From 3095b48991603e60220c96d5aac2a5ca51f7f8a9 Mon Sep 17 00:00:00 2001 From: ankurk91 Date: Sat, 15 Oct 2022 20:23:14 +0530 Subject: [PATCH] Housekeeping --- README.md | 7 ++-- examples/App.vue | 2 +- package.json | 2 +- src/component.js | 87 ++++++++++++++++++------------------------- src/util.js | 6 +-- webpack.config.dev.js | 4 ++ webpack.config.js | 3 ++ 7 files changed, 51 insertions(+), 60 deletions(-) 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: - + ``` ## 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,