Skip to content

Commit

Permalink
Merge pull request #324 from crutch12/feat/vue3
Browse files Browse the repository at this point in the history
  • Loading branch information
@WilliamDASILVA
WilliamDASILVA committed Mar 10, 2022
2 parents 02e500e + 3c68dc8 commit ea67d8c
Show file tree
Hide file tree
Showing 30 changed files with 15,932 additions and 7,677 deletions.
20 changes: 19 additions & 1 deletion .eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,30 @@ module.exports = {
'never'
],
'no-var': 'error',
'vue/attributes-order': 'error',
'vue/attributes-order': ['error', {
order: [
'DEFINITION',
'LIST_RENDERING',
'CONDITIONALS',
'RENDER_MODIFIERS',
'UNIQUE',
'TWO_WAY_BINDING',
'OTHER_DIRECTIVES',
[
'OTHER_ATTR', // v-bind order is important since vue3 (https://v3.vuejs.org/guide/migration/v-bind.html#_3-x-syntax)
'GLOBAL'
],
'EVENTS',
'CONTENT'
],
alphabetical: false
}],
'vue/no-confusing-v-for-v-if': 'error',
'vue/no-v-html': 'error',
'vue/order-in-components': 'error',
'vue/this-in-template': 'error',
'vue/script-indent': 'error',
'vue/v-slot-style': 'off',
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off'
},

Expand Down
63 changes: 35 additions & 28 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,15 +81,25 @@ Vue.component('VueCtkDateTimePicker', VueCtkDateTimePicker);

Here is an example of [UMD implementation](https://codepen.io/louismazel/pen/jQWNzQ).

## Use custom element to trigger the component

## Use custom element to trigger the component (using [Slots api](https://v3.vuejs.org/api/directives.html#v-slot))
```html
<VueCtkDateTimePicker :no-value-to-custom-elem="(true|false)" />
...
<input type="text" />
... or
<button type="button">Label</button>
...
<VueCtkDateTimePicker>
<template v-slot="{ dateFormatted, toggleDatePicker, isOpen, close }">
...
<input
type="text"
:value="dateFormatted"
@focus="toggleDatePicker(true)"
>
... or
<button
type="button"
@click="toggleDatePicker(true)"
>
{{ dateFormatted }}
</button>
...
</template>
</VueCtkDateTimePicker>
```

Expand All @@ -114,9 +124,8 @@ Here is an example of [UMD implementation](https://codepen.io/louismazel/pen/jQW
| only-date | Boolean | no | false |
| no-label | Boolean | no | false |
| no-header | Boolean | no | false |
| no-value-to-custom-elem (6) | Boolean | no | false |
| min-date (7) | String | no | - |
| max-date (7) | String | no | - |
| min-date (6) | String | no | - |
| max-date (6) | String | no | - |
| no-weekends-days | Boolean | no | false |
| auto-close | Boolean | no | false |
| inline | Boolean | no | false |
Expand All @@ -129,16 +138,16 @@ Here is an example of [UMD implementation](https://codepen.io/louismazel/pen/jQW
| button-now-translation | String | no | 'Now' |
| no-button-now | Boolean | no | false |
| first-day-of-week | Int (0 to 7) | no | - |
| disabled-dates (8) | Array`<string>` | no | [] |
| disabled-hours (9) | Array`<string>` | no | - |
| disabled-dates (7) | Array`<string>` | no | [] |
| disabled-hours (8) | Array`<string>` | no | - |
| shortcut | String | no | - |
| custom-shortcuts (10) | Array`<object>` | no | - |
| disabled-weekly (11) | Array`<integer>` | no | [] |
| no-keyboard (12) | Boolean | no | false |
| right (13) | Boolean | no | false |
| custom-shortcuts (9) | Array`<object>` | no | - |
| disabled-weekly (10) | Array`<integer>` | no | [] |
| no-keyboard (11) | Boolean | no | false |
| right (12) | Boolean | no | false |
| noClearButton | Boolean | no | false |
| behaviour | Object | no | [See behaviour](#Behaviour) |
| id (14) | String | no | undefined |
| id (13) | String | no | undefined |

(1) hint : Is a text that replaces the label/placeholder (Ex : Error designation)

Expand All @@ -150,15 +159,13 @@ Here is an example of [UMD implementation](https://codepen.io/louismazel/pen/jQW

(5) locale : Default value is the locale of the browser - Ex : Set `locale="fr"` to force to French language

(6) no-value-to-custom-elem : No value will set to your elem (you can get the formatted value with @formatted-value event)

(7) min-date && max-date should be in the same format as property format specified. If format not set - it is set to 'YYYY-MM-DD hh:mm a' by default
(6) min-date && max-date should be in the same format as property format specified. If format not set - it is set to 'YYYY-MM-DD hh:mm a' by default

(8) Disabled-Dates is an Array of dates in 'YYYY-MM-DD' format (ex: `['2018-04-03', '2018-04-07', '2018-04-09']`)
(7) Disabled-Dates is an Array of dates in 'YYYY-MM-DD' format (ex: `['2018-04-03', '2018-04-07', '2018-04-09']`)

(9) disabled-hours : Must be an Array of hours in 24h format ('00' to '23') : `['00','01','02','03','04','05','06','07','19','20','21','22','23']`
(8) disabled-hours : Must be an Array of hours in 24h format ('00' to '23') : `['00','01','02','03','04','05','06','07','19','20','21','22','23']`

(10) custom-shortcuts - It's an array of objects. Each object represents a single shortcut.
(9) custom-shortcuts - It's an array of objects. Each object represents a single shortcut.

```js
[
Expand Down Expand Up @@ -205,13 +212,13 @@ With the `shortcut` property, you can specify a shortcut that's selected by defa
:shortcut="'thisMonth'"
```

(11) disabled-weekly : Days of the week which are disabled every week, in Array format with day index, Sunday as 0 and Saturday as 6: `[0,4,6]`
(10) disabled-weekly : Days of the week which are disabled every week, in Array format with day index, Sunday as 0 and Saturday as 6: `[0,4,6]`

(12) no-keyboard : Disable keyboard accessibility & navigation
(11) no-keyboard : Disable keyboard accessibility & navigation

(13) right : add this attribute to align the picker on right
(12) right : add this attribute to align the picker on right

(14) id : it assign id such as 'passedstring-input' to input help diffrentiate between two date-time-picker on same component.
(13) id : it assign id such as 'passedstring-input' to input help diffrentiate between two date-time-picker on same component.

> Any additionnal attribute passed to the component will be automatically be binded to the input component. (eg. if you passes a `type` attribute, the `<input>` will receive it).
Expand Down
2 changes: 1 addition & 1 deletion babel.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
module.exports = {
presets: [
'@vue/app'
'@vue/cli-plugin-babel/preset'
]
}
Loading

0 comments on commit ea67d8c

Please sign in to comment.