Merge pull request chronotruck#324 from crutch12/feat/vue3

Author: WilliamDASILVA

.eslintrc.js

@@ -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'
   },
 

README.md

@@ -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>
 ```
 
@@ -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                       |
@@ -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)
 
@@ -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
 [
@@ -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).
 

babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/app'
+    '@vue/cli-plugin-babel/preset'
   ]
 }