diff --git a/README.md b/README.md
index 7905ef4..667e163 100644
--- a/README.md
+++ b/README.md
@@ -180,19 +180,20 @@ The component accepts these props:
<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 -->
-<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3.2"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/vue-flatpickr-component@9"></script>
<script>
- const app = Vue.createApp({}).mount("#app");
+ const app = Vue.createApp({})
app.component('flat-pickr', VueFlatpickr);
+ app.mount("#app");
</script>
```
## Run examples on your localhost
* Clone this repo
-* Make sure you have node-js `>=16.9` and [pnpm](https://pnpm.io/) `>=7.x` pre-installed
+* Make sure you have node-js `>=18.9` and [pnpm](https://pnpm.io/) `>=7.x` pre-installed
* Install dependencies `pnpm install`
* Run webpack dev server `npm start`
* This should open the demo page in your default web browser
diff --git a/examples/App.vue b/examples/App.vue
index c30d939..b5f73be 100644
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -256,7 +256,7 @@ export default {
confirmPlugin: {
enableTime: true,
// https://flatpickr.js.org/plugins/
- plugins: [new ConfirmDatePlugin()]
+ plugins: [new ConfirmDatePlugin({})]
},
allowInput: {
allowInput: true,
diff --git a/package.json b/package.json
index 64a8b21..da0d24a 100644
--- a/package.json
+++ b/package.json
@@ -62,7 +62,7 @@
"webpack-dev-server": "^4.11.1"
},
"peerDependencies": {
- "vue": "^3.0.0"
+ "vue": "^3.2.0"
},
"engines": {
"node": ">=12.13.0"
diff --git a/src/component.js b/src/component.js
index 5c66284..78c4cfa 100644
--- a/src/component.js
+++ b/src/component.js
@@ -1,8 +1,8 @@
import Flatpickr from 'flatpickr';
import {excludedEvents, includedEvents} from './events.js';
-import {arrayify, camelToKebab, cloneObject, nullify} from './util.js';
+import {arrayify, camelToKebab, nullify} from './util.js';
// You have to import css yourself
-import {h, nextTick} from 'vue';
+import {defineComponent, h, nextTick} from 'vue';
// Keep a copy of all events for later use
const allEvents = includedEvents.concat(excludedEvents);
@@ -10,7 +10,7 @@ const allEvents = includedEvents.concat(excludedEvents);
// Passing these properties in `set()` method will cause flatpickr to trigger some callbacks
const configCallbacks = ['locale', 'showMonths'];
-export default {
+export default defineComponent({
name: 'flat-pickr',
compatConfig: {
MODE: 3,
@@ -21,7 +21,6 @@ export default {
'data-input': true,
disabled: this.disabled,
onInput: this.onInput,
- ref: 'root'
});
},
emits: [
@@ -73,35 +72,8 @@ export default {
/* istanbul ignore if */
if (this.fp) return;
- // Don't mutate original object on parent component
- let safeConfig = cloneObject(this.config);
-
- this.events.forEach((hook) => {
- // Respect global callbacks registered via setDefault() method
- let globalCallbacks = Flatpickr.defaultConfig[hook] || [];
-
- // Inject our own method along with user callback
- let localCallback = (...args) => {
- this.$emit(camelToKebab(hook), ...args);
- };
-
- // Overwrite with merged array
- safeConfig[hook] = arrayify(safeConfig[hook] || []).concat(
- globalCallbacks,
- localCallback
- );
- });
-
- const onCloseCb = (...args) => {
- this.onClose(...args)
- };
- safeConfig['onClose'] = arrayify(safeConfig['onClose'] || []).concat(onCloseCb)
-
- // Set initial date without emitting any event
- safeConfig.defaultDate = this.modelValue || safeConfig.defaultDate;
-
// Init flatpickr
- this.fp = new Flatpickr(this.getElem(), safeConfig);
+ this.fp = new Flatpickr(this.getElem(), this.prepareConfig());
// Attach blur event
this.fpInput().addEventListener('blur', this.onBlur);
@@ -111,22 +83,48 @@ export default {
this.$watch('disabled', this.watchDisabled, {immediate: true});
},
methods: {
+ prepareConfig() {
+ // Don't mutate original object on parent component
+ let safeConfig = {...this.config};
+
+ this.events.forEach((hook) => {
+ // Respect global callbacks registered via setDefault() method
+ let globalCallbacks = Flatpickr.defaultConfig[hook] || [];
+
+ // Inject our own method along with user's callbacks
+ let localCallback = (...args) => {
+ this.$emit(camelToKebab(hook), ...args);
+ };
+
+ // Overwrite with merged array
+ safeConfig[hook] = arrayify(safeConfig[hook] || []).concat(
+ globalCallbacks,
+ localCallback
+ );
+ });
+
+ const onCloseCb = this.onClose.bind(this);
+ safeConfig['onClose'] = arrayify(safeConfig['onClose'] || []).concat(onCloseCb)
+
+ // Set initial date without emitting any event
+ safeConfig.defaultDate = this.modelValue || safeConfig.defaultDate;
+
+ return safeConfig;
+ },
/**
* Get the HTML node where flatpickr to be attached
* Bind on parent element if wrap is true
*/
getElem() {
- return this.config.wrap ? this.$refs.root.parentNode : this.$refs.root;
+ return this.config.wrap ? this.$el.parentNode : this.$el;
},
/**
* Watch for value changed by date-picker itself and notify parent component
- *
- * @param event
*/
onInput(event) {
const input = event.target;
- // Lets wait for DOM to be updated
+ // Let's wait for DOM to be updated
nextTick().then(() => {
this.$emit('update:modelValue', nullify(input.value));
});
@@ -141,8 +139,6 @@ export default {
/**
* Blur event is required by many validation libraries
- *
- * @param event
*/
onBlur(event) {
this.$emit('blur', nullify(event.target.value));
@@ -157,8 +153,6 @@ export default {
/**
* Watch for the disabled property and sets the value to the real input.
- *
- * @param newState
*/
watchDisabled(newState) {
if (newState) {
@@ -171,8 +165,6 @@ export default {
watch: {
/**
* Watch for any config changes and redraw date-picker
- *
- * @param newConfig Object
*/
config: {
deep: true,
@@ -181,7 +173,7 @@ export default {
return;
}
- let safeConfig = cloneObject(newConfig);
+ let safeConfig = {...newConfig};
// Workaround: Don't pass hooks to configs again otherwise
// previously registered hooks will stop working
// Notice: we are looping through all events
@@ -202,21 +194,16 @@ export default {
/**
* Watch for changes from parent component and update DOM
- *
- * @param newValue
*/
modelValue(newValue) {
// Prevent updates if v-model value is same as input's current value
- if (!this.$refs.root || newValue === nullify(this.$refs.root.value)) return;
+ if (!this.$el || newValue === nullify(this.$el.value)) return;
// Make sure we have a flatpickr instance
this.fp &&
// Notify flatpickr instance that there is a change in value
this.fp.setDate(newValue, true);
}
},
- /**
- * Free up memory
- */
beforeUnmount() {
/* istanbul ignore else */
if (this.fp) {
@@ -225,4 +212,4 @@ export default {
this.fp = null;
}
}
-};
+});
diff --git a/src/util.js b/src/util.js
index 6187f90..107b6fc 100644
--- a/src/util.js
+++ b/src/util.js
@@ -10,8 +10,4 @@ const nullify = (value) => {
return (value && value.length) ? value : null;
}
-const cloneObject = (obj) => {
- return Object.assign({}, obj);
-};
-
-export {camelToKebab, arrayify, nullify, cloneObject}
+export {camelToKebab, arrayify, nullify}
diff --git a/webpack.config.dev.js b/webpack.config.dev.js
index f476c80..3fa2670 100644
--- a/webpack.config.dev.js
+++ b/webpack.config.dev.js
@@ -104,6 +104,10 @@ module.exports = {
minifyURLs: isProduction,
}
}),
+ new webpack.DefinePlugin({
+ __VUE_OPTIONS_API__: true,
+ __VUE_PROD_DEVTOOLS__: false
+ }),
new VueLoaderPlugin(),
],
devServer: {
diff --git a/webpack.config.js b/webpack.config.js
index 5be1164..e653793 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -69,6 +69,9 @@ module.exports = {
]
},
plugins: [
+ new webpack.DefinePlugin({
+ __VUE_OPTIONS_API__: true,
+ }),
new VueLoaderPlugin(),
],
devtool: false,