diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
index c69efe5..f254c4b 100644
--- 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**
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 60c8189..240516d 100644
--- 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
index 74e068e..12b092c 100644
--- 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,9 +45,7 @@ npm install vue-flatpickr-component@^9
```html
-
-
-
+
```
-#### 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 ``
-
## Events
* The component can emit all possible events, you can listen to them in your component
@@ -168,11 +149,11 @@ This will register a global component ``
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)
@@ -180,13 +161,13 @@ The component accepts these props:
-
+
-
+
```
@@ -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
new file mode 100644
index 0000000..e50eaa5
--- /dev/null
+++ 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
index b46e81e..41f902a 100644
--- 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
index a7c3d94..7463490 100644
--- 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
index 4bf3db5..37a4849 100644
--- 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
index f931568..d57aa3d 100644
--- 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
index a2d2bc6..080d4c8 100644
--- 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
index da0d24a..b988c05 100644
--- 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
index 25a72fd..5a11dce 100644
--- 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
index 5b84274..f1d2693 100644
--- 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
index e8cff5b..53d22e8 100644
--- 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