next version

ankurk91 · Oct 20, 2022 · 6275510 · 6275510
1 parent f2cd3f1
commit 6275510
Show file tree

Hide file tree

Showing 15 changed files with 78 additions and 90 deletions.
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
@@ -11,7 +11,7 @@
 * flatPickr version : 4.6.x
 * Vue.js version : 3.2
 * Browser name and version : Chrome|Firefox|Edge x.x.x
-* This package version : 9.x.x
+* This package version : 10.x.x
 
 **Current behavior**
 <!-- Describe how the bug manifests. -->

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## [10.0.0](https://github.com/ankurk91/vue-flatpickr-component/compare/9.0.8...10.0.0)
+
+* Remove plugin usage
+* Change export names for browser bundle
+* Check [Upgrade Guide](UPGRADING.md) for more
+
 ## [9.0.8](https://github.com/ankurk91/vue-flatpickr-component/compare/9.0.6...9.0.8)
 
 * Add type definition

diff --git a/README.md b/README.md
@@ -15,10 +15,10 @@ Vue.js component for [Flatpickr](https://flatpickr.js.org/) date-time picker.
 
 ### Version matrix
 
-| Vue.js version | Package version | Branch          |
-| :---           | :---:           | ---:           | 
-| 2.x            | 8.x             | [8.x](https://github.com/ankurk91/vue-flatpickr-component/tree/8.x) |
-| 3.x            | 9.x             | `master`          |
+|Vue.js version|Package version |                                                              Branch |
+|:-------------|:--------------:|--------------------------------------------------------------------:| 
+| 2.x          |      8.x       | [8.x](https://github.com/ankurk91/vue-flatpickr-component/tree/8.x) |
+| 3.x          |      10.x      |                                                            `master` |
 
 ## Features
 
@@ -30,13 +30,12 @@ Vue.js component for [Flatpickr](https://flatpickr.js.org/) date-time picker.
 * Can emit all possible [events](https://flatpickr.js.org/events/)
 * Compatible with [Bootstrap](http://getbootstrap.com/) or any other CSS framework
 * Supports [wrapped](https://flatpickr.js.org/examples/#flatpickr--external-elements) mode
-    - Just set `wrap:true` in config and component will take care of all
 * Works with validation libraries
 
 ## Installation
 
 ```bash
-npm install vue-flatpickr-component@^9
+npm install vue-flatpickr-component@^10
 ```
 
 ## Usage
@@ -46,16 +45,15 @@ npm install vue-flatpickr-component@^9
 ```html
 
 <template>
-    <div>
-        <flat-pickr v-model="date"></flat-pickr>
-    </div>
+    <flat-pickr v-model="date"/>
 </template>
 
 <script>
     import flatPickr from 'vue-flatpickr-component';
     import 'flatpickr/dist/flatpickr.css';
 
     export default {
+        name: 'yourComponent'
         data() {
             return {
                 date: null,
@@ -87,14 +85,12 @@ Using Bootstrap [input group](https://getbootstrap.com/docs/4.6/components/input
                     name="date"/>
                 <div class="input-group-append">
                     <button class="btn btn-default" type="button" title="Toggle" data-toggle>
-                        <i class="fa fa-calendar">
-                            <span aria-hidden="true" class="sr-only">Toggle</span>
-                        </i>
+                        <i class="fa fa-calendar"/>
+                        <span aria-hidden="true" class="sr-only">Toggle</span>
                     </button>
                     <button class="btn btn-default" type="button" title="Clear" data-clear>
-                        <i class="fa fa-times">
-                            <span aria-hidden="true" class="sr-only">Clear</span>
-                        </i>
+                        <i class="fa fa-times"/>
+                        <span aria-hidden="true" class="sr-only">Clear</span>
                     </button>
                 </div>
             </div>
@@ -104,7 +100,6 @@ Using Bootstrap [input group](https://getbootstrap.com/docs/4.6/components/input
 </template>
 
 <script>
-    // bootstrap is just for this example
     import 'bootstrap/dist/css/bootstrap.css';
     // import this component
     import flatPickr from 'vue-flatpickr-component';
@@ -121,7 +116,7 @@ Using Bootstrap [input group](https://getbootstrap.com/docs/4.6/components/input
             return {
                 // Initial value can be a date object as well
                 date: '2020-10-16',
-                // Get more form https://flatpickr.js.org/options/
+                // Read more at https://flatpickr.js.org/options/
                 config: {
                     wrap: true, // set wrap to true only when using 'input-group'
                     altFormat: 'M j, Y',
@@ -138,20 +133,6 @@ Using Bootstrap [input group](https://getbootstrap.com/docs/4.6/components/input
 </script>
 ```
 
-#### As plugin
-
-```js
-import {createApp} from 'vue';
-import VueFlatPickr from 'vue-flatpickr-component';
-import 'flatpickr/dist/flatpickr.css';
-// Your app initialization logic goes here
-const app = createApp({});
-app.use(VueFlatPickr);
-app.mount('#app');
-```
-
-This will register a global component `<flat-pickr>`
-
 ## Events
 
 * The component can emit all possible events, you can listen to them in your component
@@ -168,25 +149,25 @@ This will register a global component `<flat-pickr>`
 
 The component accepts these props:
 
-| Attribute        | Type                                            | Default              | Description      |
-| :---             | :---:                                           | :---:                | :---             |
-| v-model          | String / Date Object / Array / Timestamp / null | `null`               | Set or Get date-picker value (required) |
-| config           | Object                                          | `{ wrap:false }`     | Flatpickr configuration [options](https://flatpickr.js.org/options/)|
-| events           | Array                                           | Array of sensible [events](./src/events.js#L2)  | Customise the [events](https://flatpickr.js.org/events/) to be emitted|
+| Attribute |                      Type                       |                    Default                     | Description                                                            |
+|:----------|:-----------------------------------------------:|:----------------------------------------------:|:-----------------------------------------------------------------------|
+| v-model   | String / Date Object / Array / Timestamp / null |                     `null`                     | Set or Get date-picker value (required)                                |
+| config    |                     Object                      |               `{ wrap: false }`                | Flatpickr configuration [options](https://flatpickr.js.org/options/)   |
+| events    |                      Array                      | Array of sensible [events](./src/events.js#L2) | Customise the [events](https://flatpickr.js.org/events/) to be emitted |
 
 ## Install in non-module environments (without webpack)
 
 ```html
 <!-- Flatpickr related files -->
 <link href="https://cdn.jsdelivr.net/npm/flatpickr@4/dist/flatpickr.min.css" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/flatpickr@4/dist/flatpickr.min.js"></script>
-<!-- Vue js -->
+<!-- Vue.js -->
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
 <!-- Lastly add this package -->
-<script src="https://cdn.jsdelivr.net/npm/vue-flatpickr-component@9"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-flatpickr-component@10"></script>
 <script>
     const app = Vue.createApp({})
-    app.component('flat-pickr', VueFlatpickr);
+    app.component('flat-pickr', VueFlatpickr.default);
     app.mount("#app");
 </script>
 ```
@@ -202,7 +183,7 @@ The component accepts these props:
 ## Testing
 
 * This package is using [Jest](https://github.com/facebook/jest)
-  and [vue-test-utils](https://github.com/vuejs/vue-test-utils-next) for testing.
+  and [vue-test-utils](https://github.com/vuejs/test-utils) for testing.
 * Tests can be found in `__test__` folder.
 * Execute tests with this command `npm test`
 

diff --git a/UPGRADING.md b/UPGRADING.md
@@ -0,0 +1,18 @@
+# Upgrade guide
+
+## From v9.x to v10.x
+
+* If you have been using the plugin, you need to define the component manually now
+
+```diff
+import flatPickr from 'vue-flatpickr-component';
+- app.use(flatPickr);
++ app.component('flat-pickr', flatPickr);
+```
+
+* If you have been consuming this component in web browser directly via CDN
+
+```diff
+- app.component('flat-pickr', VueFlatpickr);
++ app.component('flat-pickr', VueFlatpickr.default);
+```
diff --git a/__test__/emits.spec.js b/__test__/emits.spec.js
@@ -1,5 +1,5 @@
-import Component from '../src/component.js';
-import {includedEvents} from '../src/events.js';
+import Component from '../src/component';
+import {includedEvents} from '../src/events';
 import {camelToKebab} from "../src/util";
 
 describe('Flatpickr emits', () => {

diff --git a/__test__/events.spec.js b/__test__/events.spec.js
@@ -1,6 +1,6 @@
 import {mount} from '@vue/test-utils'
 import Flatpicker from 'flatpickr';
-import Component from '../src/component.js';
+import Component from '../src/component';
 
 describe('Flatpickr events', () => {
 

diff --git a/__test__/instance.spec.js b/__test__/instance.spec.js
@@ -1,6 +1,5 @@
 import {mount} from '@vue/test-utils'
-
-import Component from '../src/component.js';
+import Component from '../src/component';
 
 describe('Flatpickr component instance', () => {
 

diff --git a/__test__/props.spec.js b/__test__/props.spec.js
@@ -1,6 +1,5 @@
 import {mount} from '@vue/test-utils'
-
-import Component from '../src/component.js';
+import Component from '../src/component';
 
 describe('Flatpickr props', () => {
 

diff --git a/__test__/watchers.spec.js b/__test__/watchers.spec.js
@@ -1,6 +1,6 @@
 import {mount} from '@vue/test-utils'
 import {Hindi as HindiLocale} from 'flatpickr/dist/l10n/hi';
-import {english as EnglishLocale} from 'flatpickr/dist/l10n/default.js'
+import {english as EnglishLocale} from 'flatpickr/dist/l10n/default'
 
 import Component from '../src/component.js';
 

diff --git a/package.json b/package.json
@@ -2,8 +2,7 @@
   "name": "vue-flatpickr-component",
   "version": "9.0.8",
   "description": "Vue.js component for Flatpickr date-time picker",
-  "main": "dist/vue-flatpickr.js",
-  "browser": "dist/vue-flatpickr.min.js",
+  "main": "dist/index.js",
   "types": "./types/index.d.ts",
   "files": [
     "src",
@@ -16,10 +15,10 @@
   },
   "keywords": [
     "vue",
-    "flatpickr",
+    "flatpicker",
     "vue-flatpickr",
-    "datepicker",
-    "timepicker"
+    "date picker",
+    "time picker"
   ],
   "author": "ankurk91",
   "license": "MIT",
@@ -65,6 +64,6 @@
     "vue": "^3.2.0"
   },
   "engines": {
-    "node": ">=12.13.0"
+    "node": ">=14.13.0"
   }
 }
diff --git a/src/component.js b/src/component.js
@@ -1,16 +1,16 @@
-import Flatpickr from 'flatpickr';
-import {excludedEvents, includedEvents} from './events.js';
-import {arrayify, camelToKebab, nullify} from './util.js';
+import flatpickr from 'flatpickr';
 import {defineComponent, h} from 'vue';
+import {excludedEvents, includedEvents} from './events';
+import {arrayify, camelToKebab, nullify} from './util';
 
 // Keep a copy of all events for later use
 const allEvents = includedEvents.concat(excludedEvents);
 
-// Passing these properties in `set()` method will cause flatpickr to trigger some callbacks
+// Passing these properties in `fp.set()` method will cause flatpickr to trigger some callbacks
 const configCallbacks = ['locale', 'showMonths'];
 
 export default defineComponent({
-  name: 'Flatpickr',
+  name: 'FlatPickr',
   compatConfig: {
     MODE: 3,
   },
@@ -45,8 +45,8 @@ export default defineComponent({
     config: {
       type: Object,
       default: () => ({
+        defaultDate: null,
         wrap: false,
-        defaultDate: null
       })
     },
     events: {
@@ -56,7 +56,7 @@ export default defineComponent({
     disabled: {
       type: Boolean,
       default: false
-    }
+    },
   },
   fp: null, // non-reactive
   mounted() {
@@ -65,13 +65,13 @@ export default defineComponent({
     if (this.fp) return;
 
     // Init flatpickr
-    this.fp = new Flatpickr(this.getElem(), this.prepareConfig());
+    this.fp = flatpickr(this.getElem(), this.prepareConfig());
 
     // Attach blur event
     this.fpInput().addEventListener('blur', this.onBlur);
 
     // Immediate watch will fail before fp is set,
-    // so need to start watching after mount
+    // so we need to start watching after mount
     this.$watch('disabled', this.watchDisabled, {
       immediate: true
     });
@@ -83,7 +83,7 @@ export default defineComponent({
 
       this.events.forEach((hook) => {
         // Respect global callbacks registered via setDefault() method
-        let globalCallbacks = Flatpickr.defaultConfig[hook] || [];
+        let globalCallbacks = flatpickr.defaultConfig[hook] || [];
 
         // Inject our own method along with user's callbacks
         let localCallback = (...args) => {

diff --git a/src/index.js b/src/index.js
@@ -1,13 +1,3 @@
-import Component from './component.js';
-
-const Plugin = (app, params) => {
-  let name = 'flat-pickr';
-  /* istanbul ignore else */
-  if (typeof params === 'string') name = params;
-
-  app.component(name, Component);
-};
-
-Component.install = Plugin;
+import Component from './component';
 
 export default Component;
diff --git a/types/component.d.ts b/types/component.d.ts
@@ -58,8 +58,6 @@ declare const _default: DefineComponent<{
   getElem(): Element | null;
   /**
    * Watch for value changed by date-picker itself and notify parent component
-   *
-   * @param event
    */
   onInput(event: InputEvent): void;
   /**
@@ -68,8 +66,6 @@ declare const _default: DefineComponent<{
   fpInput(): HTMLInputElement;
   /**
    * Blur event is required by many validation libraries
-   *
-   * @param event
    */
   onBlur(event: FocusEvent): void;
   /**
@@ -78,8 +74,6 @@ declare const _default: DefineComponent<{
   onClose(selectedDates: Date[], dateStr: string): void;
   /**
    * Watch for the disabled property and sets the value to the real input.
-   *
-   * @param newState
    */
   watchDisabled(newState: boolean): void;
 }, ComponentOptionsMixin, ComponentOptionsMixin, ["blur", "update:modelValue", "on-change", "on-close", "on-destroy", "on-month-change", "on-open", "on-year-change", "on-value-update", "on-day-create", "on-parse-config", "on-ready", "on-pre-calendar-position", "on-key-down"], "blur" | "update:modelValue" | "on-change" | "on-close" | "on-destroy" | "on-month-change" | "on-open" | "on-year-change" | "on-value-update" | "on-day-create" | "on-parse-config" | "on-ready" | "on-pre-calendar-position" | "on-key-down", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -1,6 +1,5 @@
-import {Plugin} from 'vue';
 import Component from './component.js';
 
-declare const _default: typeof Component & Plugin;
+declare const _default: typeof Component;
 
 export default _default;