From 6275510fea9b96636d269512b520c41135a9d6ec Mon Sep 17 00:00:00 2001
From: ankurk91 <pro.ankurk1@gmail.com>
Date: Wed, 19 Oct 2022 12:54:31 +0530
Subject: [PATCH] next version
---
.github/ISSUE_TEMPLATE.md | 2 +-
CHANGELOG.md | 6 ++++
README.md | 61 ++++++++++++++-------------------------
UPGRADING.md | 18 ++++++++++++
__test__/emits.spec.js | 4 +--
__test__/events.spec.js | 2 +-
__test__/instance.spec.js | 3 +-
__test__/props.spec.js | 3 +-
__test__/watchers.spec.js | 2 +-
package.json | 11 ++++---
src/component.js | 20 ++++++-------
src/index.js | 12 +-------
types/component.d.ts | 6 ----
types/index.d.ts | 3 +-
webpack.config.js | 15 ++++++----
15 files changed, 78 insertions(+), 90 deletions(-)
create mode 100644 UPGRADING.md
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**
<!-- Describe how the bug manifests. -->
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
<template>
- <div>
- <flat-pickr v-model="date"></flat-pickr>
- </div>
+ <flat-pickr v-model="date"/>
</template>
<script>
@@ -56,6 +53,7 @@ npm install vue-flatpickr-component@^9
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,11 +149,11 @@ 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)
@@ -180,13 +161,13 @@ The component accepts these props:
<!-- 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/vue@3.2"></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
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<ExtractPropTypes<{
diff --git a/types/index.d.ts b/types/index.d.ts
index 8446c1d..4e1e7c0 100644
--- 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;
diff --git a/webpack.config.js b/webpack.config.js
index e653793..4670e9d 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -16,8 +16,8 @@ module.exports = {
},
},
entry: {
- 'vue-flatpickr': './src/index.js',
- 'vue-flatpickr.min': './src/index.js',
+ 'index': './src/index.js',
+ 'index.min': './src/index.js',
},
externals: {
'vue': {
@@ -31,11 +31,13 @@ module.exports = {
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
- library: 'VueFlatpickr',
- libraryTarget: 'umd',
- libraryExport: 'default',
- umdNamedDefine: true,
+ library: {
+ name: 'VueFlatpickr',
+ type: 'umd',
+ umdNamedDefine: true,
+ },
clean: true,
+ pathinfo: false,
},
module: {
rules: [
@@ -53,6 +55,7 @@ module.exports = {
},
optimization: {
minimize: true,
+ usedExports: false,
minimizer: [
new TerserPlugin({
include: /\.min\.js$/,