Merge pull request 'dev' (#4) from dev into main

Reviewed-on: #4

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
 

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",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "datenel-vue3",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

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#modelvalue-a-k-a-v-model}
 		* 
 		* @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#close-void}
 	 * 
 	 * @default undefined
 	 */

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,12 +81,26 @@ 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-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)