From 9890221c851096e94119a0e76d97df1414609b17 Mon Sep 17 00:00:00 2001 From: Astrian Zheng Date: Wed, 26 Feb 2025 10:04:00 +1100 Subject: [PATCH 1/4] fix: update documentation links in SingleDatePicker and SingleWeekPicker components to point to Vue 3 guide --- src/components/SingleDatePicker.vue | 12 ++++++------ src/components/SingleWeekPicker.vue | 8 ++++---- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/SingleDatePicker.vue b/src/components/SingleDatePicker.vue index 13e6896..eeb50c3 100644 --- a/src/components/SingleDatePicker.vue +++ b/src/components/SingleDatePicker.vue @@ -3,7 +3,7 @@ * @name SingleDatePicker * @description A panel that allows users to select a date. * @component - * @see {@link https://datenel.js.org/guide/vue/components/SingleDatePicker.html} + * @see {@link https://datenel.js.org/guide/vue3/components/SingleDatePicker.html} */ export default { name: 'SingleDatePicker', @@ -38,7 +38,7 @@ const props = defineProps({ * - `hoverColor`: The hover color of the panel, including the hover background color of the date. * - `reversedColor`: The reversed color of the panel, including the text color of the selected date. * - * @see {@link https://datenel.js.org/guide/vue/components/SingleDatePicker.html#colorscheme} + * @see {@link https://datenel.js.org/guide/vue3/components/SingleDatePicker.html#colorscheme} * * @default { mainColor: '#000000', accentColor: '#000000', borderColor: '#e0e0e0', hoverColor: '#00000017', reversedColor: '#ffffff' } */ @@ -61,7 +61,7 @@ const props = defineProps({ * that it will not effect to the screen reader, but the screen reader will still read the * date in the user’s language. * - * @see {@link https://datenel.js.org/guide/vue/components/SingleDatePicker.html#localization} + * @see {@link https://datenel.js.org/guide/vue3/components/SingleDatePicker.html#localization} * @default navigator.language */ localization: { @@ -75,7 +75,7 @@ const props = defineProps({ * date programmatically, including situations like provide a default value or control the selected * date by parent component. * - * @see {@link https://datenel.js.org/guide/vue/components/SingleDatePicker.html#value} + * @see {@link https://datenel.js.org/guide/vue3/components/SingleDatePicker.html#value} * * @example new Date(2025, 0, 1) * @default undefined (the panel will be in read-only mode) @@ -92,7 +92,7 @@ const props = defineProps({ * * The parameter will be ignored if the array length is not 2. * - * @see {@link https://datenel.js.org/guide/vue/components/SingleDatePicker.html#availablerange} + * @see {@link https://datenel.js.org/guide/vue3/components/SingleDatePicker.html#availablerange} * * @example [new Date(2025, 0, 1), new Date(2025, 11, 31)] * @example [new Date(2025, 0, 1), null] @@ -110,7 +110,7 @@ const props = defineProps({ * that the close button is not visible, but can be read by screen reader. The close * button for the screen reader is only available when this prop is not `undefined`. * - * @see {@link https://datenel.js.org/guide/vue/components/SingleDatePicker.html#onclose-void} + * @see {@link https://datenel.js.org/guide/vue3/components/SingleDatePicker.html#onclose-void} * * @default undefined */ diff --git a/src/components/SingleWeekPicker.vue b/src/components/SingleWeekPicker.vue index e6f2925..523ec84 100644 --- a/src/components/SingleWeekPicker.vue +++ b/src/components/SingleWeekPicker.vue @@ -3,7 +3,7 @@ * @name SingleWeekPicker * @description A panel that allows users to select a week. * @component - * @see {@link https://datenel.js.org/guide/vue/components/SingleWeekPicker.html} + * @see {@link https://datenel.js.org/guide/vue3/components/SingleWeekPicker.html} */ export default { name: 'SingleDatePicker', @@ -46,7 +46,7 @@ const props = defineProps({ * - `hoverColor`: The hover color of the panel, including the hover background color of the date. * - `reversedColor`: The reversed color of the panel, including the text color of the selected date. * - * @see {@link https://datenel.js.org/guide/vue/components/SingleWeekPicker.html#colorscheme} + * @see {@link https://datenel.js.org/guide/vue3/components/SingleWeekPicker.html#colorscheme} * * @default { mainColor: '#000000', accentColor: '#000000', borderColor: '#e0e0e0', hoverColor: '#00000017', reversedColor: '#ffffff' } */ @@ -69,7 +69,7 @@ const props = defineProps({ * that it will not effect to the screen reader, but the screen reader will still read the * date in the user’s language. * - * @see {@link https://datenel.js.org/guide/vue/components/SingleWeekPicker.html#localization} + * @see {@link https://datenel.js.org/guide/vue3/components/SingleWeekPicker.html#localization} * @default navigator.language */ localization: { @@ -81,7 +81,7 @@ const props = defineProps({ * * @description The model value of the component. * - * @see {@link https://datenel.js.org/guide/vue/components/SingleWeekPicker.html#modelvalue} + * @see {@link https://datenel.js.org/guide/vue3/components/SingleWeekPicker.html#modelvalue} */ modelValue: { type: Object as () => SingleWeekPickerModelValue, -- 2.45.1 From 8af79850e32ea4a4832c6c2626e2188a3f81af01 Mon Sep 17 00:00:00 2001 From: Astrian Zheng Date: Wed, 26 Feb 2025 10:48:37 +1100 Subject: [PATCH 2/4] fix: update documentation link in SingleDatePicker component to reflect v-model usage --- src/components/SingleDatePicker.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SingleDatePicker.vue b/src/components/SingleDatePicker.vue index eeb50c3..f635e96 100644 --- a/src/components/SingleDatePicker.vue +++ b/src/components/SingleDatePicker.vue @@ -75,7 +75,7 @@ const props = defineProps({ * date programmatically, including situations like provide a default value or control the selected * date by parent component. * - * @see {@link https://datenel.js.org/guide/vue3/components/SingleDatePicker.html#value} + * @see {@link https://datenel.js.org/guide/vue3/components/SingleDatePicker.html#modelvalue-a-k-a-v-model} * * @example new Date(2025, 0, 1) * @default undefined (the panel will be in read-only mode) -- 2.45.1 From 39ca9ddd14b51dba9fd2ac4d887103356f661091 Mon Sep 17 00:00:00 2001 From: Astrian Zheng Date: Wed, 26 Feb 2025 11:27:27 +1100 Subject: [PATCH 3/4] fix: update documentation links in README and components to reflect correct URLs for Vue 3 --- README.md | 2 +- src/components/SingleDatePicker.vue | 2 +- src/components/SingleWeekPicker.vue | 16 +++++++++++++++- 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 1eff175..6961f0e 100644 --- a/README.md +++ b/README.md @@ -44,7 +44,7 @@ const date = ref(new Date()) ``` -For more information and live demo, refer to [Datenel’s documentation](https://datenel.js.org/guide/vue/gettingstart.html). +For more information and live demo, refer to [Datenel’s documentation](https://datenel.js.org/guide/vue3/gettingstart.html). ## Supported Components & Props diff --git a/src/components/SingleDatePicker.vue b/src/components/SingleDatePicker.vue index f635e96..2692fe5 100644 --- a/src/components/SingleDatePicker.vue +++ b/src/components/SingleDatePicker.vue @@ -110,7 +110,7 @@ const props = defineProps({ * that the close button is not visible, but can be read by screen reader. The close * button for the screen reader is only available when this prop is not `undefined`. * - * @see {@link https://datenel.js.org/guide/vue3/components/SingleDatePicker.html#onclose-void} + * @see {@link https://datenel.js.org/guide/vue3/components/SingleDatePicker.html#close-void} * * @default undefined */ diff --git a/src/components/SingleWeekPicker.vue b/src/components/SingleWeekPicker.vue index 523ec84..eb00ee8 100644 --- a/src/components/SingleWeekPicker.vue +++ b/src/components/SingleWeekPicker.vue @@ -81,12 +81,26 @@ const props = defineProps({ * * @description The model value of the component. * - * @see {@link https://datenel.js.org/guide/vue3/components/SingleWeekPicker.html#modelvalue} + * @see {@link https://datenel.js.org/guide/vue3/components/SingleWeekPicker.html#modelvalue-a-k-a-v-model} */ modelValue: { type: Object as () => SingleWeekPickerModelValue, required: false, }, + /** + * Event handler when the panel is closed. + * @description User requires to close the panel without select a specific date. Note + * that the close button is not visible, but can be read by screen reader. The close + * button for the screen reader is only available when this prop is not `undefined`. + * + * @see {@link https://datenel.js.org/guide/vue3/components/SingleWeekPicker.html#close-void} + * + * @default undefined + */ + close: { + type: Function, + required: false, + } }) const { colorScheme, localization } = toRefs(props) -- 2.45.1 From 638a730b1984c1875032377bb0d098e33f76c42a Mon Sep 17 00:00:00 2001 From: Astrian Zheng Date: Wed, 26 Feb 2025 11:27:41 +1100 Subject: [PATCH 4/4] 0.1.2 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9e9855a..6ce40e3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "datenel-vue3", - "version": "0.1.1", + "version": "0.1.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "datenel-vue3", - "version": "0.1.1", + "version": "0.1.2", "license": "MIT", "devDependencies": { "@types/node": "^22.13.5", diff --git a/package.json b/package.json index 6ba15cd..460dbde 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "datenel-vue3", - "version": "0.1.1", + "version": "0.1.2", "type": "module", "scripts": { "dev": "vite", -- 2.45.1