Skip to content
This repository was archived by the owner on Mar 14, 2025. It is now read-only.

Commit 65f3526

Browse files
ankurk91ankurk91
committed
next: rewrite in typescript 🚀
1 parent 1141495 commit 65f3526

24 files changed

+295
-1426
lines changed

Diff for: ‎.babelrc

-33
This file was deleted.

Diff for: ‎.github/ISSUE_TEMPLATE.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
* flatPickr version : 4.6.x
1212
* Vue.js version : 3.2
1313
* Browser name and version : Chrome|Firefox|Edge x.x.x
14-
* This package version : 10.x.x
14+
* This package version : 11.x.x
1515

1616
**Current behavior**
1717
<!-- Describe how the bug manifests. -->

Diff for: ‎.github/workflows/build.yml

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ name: build
33
on:
44
push:
55
branches:
6-
- master
6+
- main
77
- dev
88
pull_request:
99
branches:
10-
- master
10+
- main
1111
- dev
1212
schedule:
1313
- cron: '0 0 11 * *'

Diff for: ‎README.md

+26-44
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,20 @@
55
[![npm-version](https://badgen.net/npm/v/vue-flatpickr-component)](https://www.npmjs.com/package/vue-flatpickr-component)
66
[![github-tag](https://badgen.net/github/tag/ankurk91/vue-flatpickr-component)](https://github.com/ankurk91/vue-flatpickr-component/tags)
77
[![build](https://github.com/ankurk91/vue-flatpickr-component/workflows/build/badge.svg)](https://github.com/ankurk91/vue-flatpickr-component/actions)
8-
[![codecov](https://codecov.io/gh/ankurk91/vue-flatpickr-component/branch/master/graph/badge.svg)](https://codecov.io/gh/ankurk91/vue-flatpickr-component)
9-
[![license](https://badgen.net/github/license/ankurk91/vue-flatpickr-component)](https://yarnpkg.com/en/package/vue-flatpickr-component)
10-
![TypeScript](https://badgen.net/badge/icon/Typed?icon=typescript&label&labelColor=blue&color=555555)
8+
[![codecov](https://codecov.io/gh/ankurk91/vue-flatpickr-component/branch/main/graph/badge.svg)](https://codecov.io/gh/ankurk91/vue-flatpickr-component)
9+
[![license](https://badgen.net/github/license/ankurk91/vue-flatpickr-component)](LICENSE.txt)
10+
![ts](https://badgen.net/badge/Built%20With/TypeScript/blue)
1111

1212
Vue.js component for [Flatpickr](https://flatpickr.js.org/) date-time picker.
1313

1414
## [Demo](https://ankurk91.github.io/vue-flatpickr-component/) or [JSFiddle](https://jsfiddle.net/ankurk91/63kzdwLx/)
1515

1616
### Version matrix
1717

18-
|Vue.js version|Package version | Branch |
19-
|:-------------|:--------------:|--------------------------------------------------------------------:|
20-
| 2.x | 8.x | [8.x](https://github.com/ankurk91/vue-flatpickr-component/tree/8.x) |
21-
| 3.x | 10.x | `master` |
18+
|Vue.js version| Package version | Branch |
19+
|:-------------|:---------------:|--------------------------------------------------------------------:|
20+
| 2.x | 8.x | [8.x](https://github.com/ankurk91/vue-flatpickr-component/tree/8.x) |
21+
| 3.x | 11.x | `main` |
2222

2323
## Features
2424

@@ -35,7 +35,7 @@ Vue.js component for [Flatpickr](https://flatpickr.js.org/) date-time picker.
3535
## Installation
3636

3737
```bash
38-
npm install vue-flatpickr-component@^10
38+
npm install vue-flatpickr-component@^11
3939
```
4040

4141
## Usage
@@ -48,21 +48,12 @@ npm install vue-flatpickr-component@^10
4848
<flat-pickr v-model="date"/>
4949
</template>
5050

51-
<script>
51+
<script setup>
52+
import {ref} from 'vue';
5253
import flatPickr from 'vue-flatpickr-component';
5354
import 'flatpickr/dist/flatpickr.css';
5455
55-
export default {
56-
name: 'yourComponent'
57-
data() {
58-
return {
59-
date: null,
60-
}
61-
},
62-
components: {
63-
flatPickr
64-
}
65-
}
56+
const date = ref(null);
6657
</script>
6758
```
6859

@@ -99,7 +90,8 @@ Using Bootstrap [input group](https://getbootstrap.com/docs/4.6/components/input
9990
</section>
10091
</template>
10192

102-
<script>
93+
<script setup>
94+
import {ref} from 'vue';
10395
import 'bootstrap/dist/css/bootstrap.css';
10496
// import this component
10597
import flatPickr from 'vue-flatpickr-component';
@@ -110,26 +102,16 @@ Using Bootstrap [input group](https://getbootstrap.com/docs/4.6/components/input
110102
// localization is optional
111103
import {Hindi} from 'flatpickr/dist/l10n/hi.js';
112104
113-
export default {
114-
name: 'yourComponent',
115-
data() {
116-
return {
117-
// Initial value can be a date object as well
118-
date: '2020-10-16',
119-
// Read more at https://flatpickr.js.org/options/
120-
config: {
121-
wrap: true, // set wrap to true only when using 'input-group'
122-
altFormat: 'M j, Y',
123-
altInput: true,
124-
dateFormat: 'Y-m-d',
125-
locale: Hindi, // locale for this instance only
126-
},
127-
}
128-
},
129-
components: {
130-
flatPickr
131-
},
132-
}
105+
const date = ref('2022-10-28');
106+
107+
// Read more at https://flatpickr.js.org/options/
108+
const config = ref({
109+
wrap: true, // set wrap to true only when using 'input-group'
110+
altFormat: 'M j, Y',
111+
altInput: true,
112+
dateFormat: 'Y-m-d',
113+
locale: Hindi, // locale for this instance only
114+
});
133115
</script>
134116
```
135117

@@ -153,9 +135,9 @@ The component accepts these props:
153135
|:----------|:-----------------------------------------------:|:----------------------------------------------:|:-----------------------------------------------------------------------|
154136
| v-model | String / Date Object / Array / Timestamp / null | `null` | Set or Get date-picker value (required) |
155137
| config | Object | `{ wrap: false }` | Flatpickr configuration [options](https://flatpickr.js.org/options/) |
156-
| events | Array | Array of sensible [events](./src/events.js#L2) | Customise the [events](https://flatpickr.js.org/events/) to be emitted |
138+
| events | Array | Array of sensible [events](./src/events.ts#L2) | Customise the [events](https://flatpickr.js.org/events/) to be emitted |
157139

158-
## Install in non-module environments (without webpack)
140+
## Use in browser with CDN
159141

160142
```html
161143
<!-- Flatpickr related files -->
@@ -164,7 +146,7 @@ The component accepts these props:
164146
<!-- Vue.js -->
165147
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
166148
<!-- Lastly add this package -->
167-
<script src="https://cdn.jsdelivr.net/npm/vue-flatpickr-component@10"></script>
149+
<script src="https://cdn.jsdelivr.net/npm/vue-flatpickr-component@11"></script>
168150
<script>
169151
const app = Vue.createApp({})
170152
app.component('flat-pickr', VueFlatpickr.default);

Diff for: ‎__test__/emits.spec.js renamed to ‎__test__/emits.spec.ts

File renamed without changes.

Diff for: ‎__test__/events.spec.js renamed to ‎__test__/events.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Component from '../src/component';
44

55
describe('Flatpickr events', () => {
66

7-
let wrapper;
7+
let wrapper: any;
88
let onChangeStub = jest.fn();
99

1010
const globalOnChange = jest.fn();

Diff for: ‎__test__/instance.spec.js renamed to ‎__test__/instance.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Component from '../src/component';
33

44
describe('Flatpickr component instance', () => {
55

6-
let wrapper;
6+
let wrapper: any;
77

88
beforeEach(() => {
99
wrapper = mount(Component, {

Diff for: ‎__test__/plugin.spec.js renamed to ‎__test__/plugin.spec.ts

File renamed without changes.

Diff for: ‎__test__/props.spec.js renamed to ‎__test__/props.spec.ts

+1-15
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ describe('Flatpickr props', () => {
1111
}
1212
};
1313

14-
let wrapper;
14+
let wrapper: any;
1515

1616
beforeEach(() => {
1717
wrapper = mount(Component, {
@@ -31,18 +31,4 @@ describe('Flatpickr props', () => {
3131
test('accepts value via prop', () => {
3232
expect(wrapper.props('modelValue')).toBe(props.modelValue);
3333
});
34-
35-
test('validates v-model', () => {
36-
let vModel = wrapper.vm.$options.props.modelValue;
37-
38-
expect(vModel.validator(false)).toBe(false);
39-
expect(vModel.validator(undefined)).toBe(false);
40-
41-
expect(vModel.validator(new Date())).toBe(true);
42-
expect(vModel.validator(null)).toBe(true);
43-
expect(vModel.validator('2017-12-12')).toBe(true);
44-
expect(vModel.validator(['2017-12-12'])).toBe(true);
45-
expect(vModel.validator(+new Date())).toBe(true);
46-
});
47-
4834
});

Diff for: ‎__test__/watchers.spec.js renamed to ‎__test__/watchers.spec.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import {mount} from '@vue/test-utils'
22
import {Hindi as HindiLocale} from 'flatpickr/dist/l10n/hi';
33
import {english as EnglishLocale} from 'flatpickr/dist/l10n/default'
44

5-
import Component from '../src/component.js';
5+
import Component from '../src/component';
66

77
describe('Flatpickr watchers', () => {
88

9-
let wrapper;
9+
let wrapper: any;
1010

1111
beforeEach(() => {
1212
wrapper = mount(Component, {

Diff for: ‎examples/App.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@
186186
<script>
187187
import flatpickr from "flatpickr";
188188
// Init component
189-
import flatPickrComponent from '../src/index.js';
189+
import flatPickrComponent from '../src/index';
190190
// Need to add base css for flatpickr
191191
import 'flatpickr/dist/flatpickr.min.css';
192192
// l10n is optional

Diff for: ‎jest.config.js

+4-6
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,15 @@ module.exports = {
99
],
1010
},
1111
transform: {
12-
'^.+\\.js$': 'babel-jest',
12+
"^.+\\.tsx?$": "ts-jest"
1313
},
1414
moduleFileExtensions: [
15+
'ts',
1516
'js',
16-
'json',
17-
'jsx',
18-
'node',
19-
'vue',
2017
],
2118
watchPathIgnorePatterns: [
2219
"<rootDir>/examples/",
2320
"/node_modules/"
24-
]
21+
],
22+
testRegex: "^.+\\.spec\\.tsx?$"
2523
}

Diff for: ‎package.json

+13-12
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22
"name": "vue-flatpickr-component",
33
"version": "10.0.0",
44
"description": "Vue.js component for Flatpickr date-time picker",
5-
"main": "dist/index.js",
6-
"types": "types/index.d.ts",
5+
"main": "dist/index.umd.js",
6+
"module": "dist/esm/index.js",
7+
"types": "dist/types/index.d.ts",
78
"files": [
89
"src",
910
"dist",
@@ -27,33 +28,33 @@
2728
},
2829
"homepage": "https://github.com/ankurk91/vue-flatpickr-component",
2930
"scripts": {
30-
"test": "jest",
31+
"test": "jest --runInBand",
3132
"test:watch": "npm run test --watch --notify",
3233
"start": "npm run dev",
33-
"dev": "cross-env NODE_ENV=development webpack serve --progress --hot --config=webpack.config.dev.js",
34-
"docs": "cross-env NODE_ENV=production webpack --config=webpack.config.dev.js --progress --mode=production",
35-
"build": "cross-env NODE_ENV=production webpack --progress --mode=production",
34+
"dev": "webpack serve --node-env=development --progress --hot --config=webpack.config.dev.js",
35+
"docs": "webpack --node-env=production --config=webpack.config.dev.js --progress --mode=production",
36+
"build:esm": "tsc -m es6 --outDir ./dist/esm",
37+
"build:umd": "webpack --node-env=production --progress --mode=production",
38+
"build": "npm run build:umd && npm run build:esm",
3639
"prepublishOnly": "npm run test && npm run build"
3740
},
3841
"dependencies": {
3942
"flatpickr": "^4.6.13"
4043
},
4144
"devDependencies": {
42-
"@babel/core": "^7.19.3",
43-
"@babel/preset-env": "^7.19.3",
44-
"@vue/compiler-sfc": "^3.2.40",
45+
"@types/jest": "^29.1.2",
4546
"@vue/test-utils": "^2.1.0",
46-
"babel-jest": "^29.1.2",
47-
"babel-loader": "^8.2.5",
4847
"bootstrap": "^4.6",
49-
"cross-env": "^7.0.3",
5048
"css-loader": "^6.7.1",
5149
"file-loader": "^6.2.0",
5250
"html-webpack-plugin": "^5.5.0",
5351
"jest": "^29.1.2",
5452
"jest-environment-jsdom": "^29.1.2",
5553
"mini-css-extract-plugin": "^2.6.1",
5654
"style-loader": "^3.3.1",
55+
"ts-jest": "^29.0.3",
56+
"ts-loader": "^9.4.1",
57+
"typescript": "^4.8.4",
5758
"vue": "^3.2.40",
5859
"vue-loader": "^17.0.0",
5960
"webpack": "^5.74.0",

0 commit comments

Comments
 (0)