@ignatremizov/vue-tailwind-datepicker 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (189) hide show
  1. package/LICENSE +23 -0
  2. package/README.md +399 -0
  3. package/dist/af-C1zDfZWk.js +40 -0
  4. package/dist/am-CtTtf4Gb.js +41 -0
  5. package/dist/ar-BKGsAKbh.js +75 -0
  6. package/dist/ar-dz-DUDZjMe7.js +42 -0
  7. package/dist/ar-iq-C7P8tTKh.js +43 -0
  8. package/dist/ar-kw-QqWCxp-X.js +42 -0
  9. package/dist/ar-ly-MCe2_Zi7.js +28 -0
  10. package/dist/ar-ma-Di79jrLh.js +43 -0
  11. package/dist/ar-sa-B8t8bJ2s.js +42 -0
  12. package/dist/ar-tn-0rWMsCVL.js +43 -0
  13. package/dist/az-ClHWZNK_.js +40 -0
  14. package/dist/be-BjGLHn4i.js +70 -0
  15. package/dist/bg-z_R9zuDN.js +44 -0
  16. package/dist/bi-GVSnRI6v.js +40 -0
  17. package/dist/bm-CLraWWLi.js +40 -0
  18. package/dist/bn-BeItfdMf.js +71 -0
  19. package/dist/bn-bd-ChPYodUc.js +79 -0
  20. package/dist/bo-DpAnYKxF.js +39 -0
  21. package/dist/br-COpBQNp9.js +78 -0
  22. package/dist/bs-DebYPcMf.js +25 -0
  23. package/dist/ca-rXaOWL6o.js +44 -0
  24. package/dist/commitlint.config.d.ts +5 -0
  25. package/dist/cs-dcnM_aoD.js +72 -0
  26. package/dist/cv-LgukTbsI.js +25 -0
  27. package/dist/cy-Cn05PFW8.js +40 -0
  28. package/dist/da-D_MLuBe0.js +41 -0
  29. package/dist/de-CgGoOQDK.js +58 -0
  30. package/dist/de-at-BJ-45lAp.js +57 -0
  31. package/dist/de-ch-Byib3lwY.js +57 -0
  32. package/dist/dv-B_EIIriN.js +40 -0
  33. package/dist/el-D_gmH9Na.js +40 -0
  34. package/dist/en-au-HpZyybUB.js +41 -0
  35. package/dist/en-ca-B7I-4DmG.js +39 -0
  36. package/dist/en-gb-DTn0UYEi.js +42 -0
  37. package/dist/en-ie-DsPM2hRv.js +40 -0
  38. package/dist/en-il-4Zk7-yRG.js +39 -0
  39. package/dist/en-in-CQq3vhbI.js +42 -0
  40. package/dist/en-nz-W6-v1RVo.js +41 -0
  41. package/dist/en-sg-DJnk1r9W.js +40 -0
  42. package/dist/en-tt-aRR6_nf3.js +42 -0
  43. package/dist/en-va9Akwus.js +12 -0
  44. package/dist/eo-k1vVHrod.js +40 -0
  45. package/dist/es-CSMohBMe.js +40 -0
  46. package/dist/es-do-X_2zYeQO.js +40 -0
  47. package/dist/es-mx-h_Vadr6L.js +39 -0
  48. package/dist/es-pr-R6i3elBe.js +40 -0
  49. package/dist/es-us-ydkMGyeN.js +39 -0
  50. package/dist/eslint.config.d.mts +2 -0
  51. package/dist/et-BKWztujO.js +59 -0
  52. package/dist/eu-XFu_w1qy.js +44 -0
  53. package/dist/fa-CDHjs84K.js +40 -0
  54. package/dist/favicon.ico +0 -0
  55. package/dist/fi-BS6V1F9E.js +79 -0
  56. package/dist/fo-CdrA_7wK.js +40 -0
  57. package/dist/fr-B1gU2lms.js +42 -0
  58. package/dist/fr-ca-CsT34QVW.js +39 -0
  59. package/dist/fr-ch-DYjf9cxE.js +40 -0
  60. package/dist/fy-DLbDEv2U.js +40 -0
  61. package/dist/ga-DK9bL349.js +40 -0
  62. package/dist/gd-DU3QcgzQ.js +40 -0
  63. package/dist/gl-CHjAZiiE.js +40 -0
  64. package/dist/gom-latn-M51aP5Vq.js +26 -0
  65. package/dist/gu-DP_FOEbq.js +39 -0
  66. package/dist/he-hx5Rx9Y0.js +77 -0
  67. package/dist/hi-DJE-92Un.js +39 -0
  68. package/dist/hr-BhjZ0qVV.js +45 -0
  69. package/dist/ht-DazeV7vT.js +39 -0
  70. package/dist/hu-ytdCzWmW.js +62 -0
  71. package/dist/hy-am-Dyc4VOmQ.js +40 -0
  72. package/dist/id-B_mXD8X7.js +40 -0
  73. package/dist/index-pdvQgmpw.js +320 -0
  74. package/dist/is-BG4JBQMw.js +61 -0
  75. package/dist/it-BrIMlVAY.js +40 -0
  76. package/dist/it-ch-DzD0gF2i.js +40 -0
  77. package/dist/ja-CTGa4G7h.js +46 -0
  78. package/dist/jv-BlPQUE1w.js +40 -0
  79. package/dist/ka-YjhghQse.js +40 -0
  80. package/dist/kk-C7TlwYiA.js +40 -0
  81. package/dist/km-DRQg4k_s.js +40 -0
  82. package/dist/kn-C1PvRBaO.js +39 -0
  83. package/dist/ko-DtqL7t-O.js +46 -0
  84. package/dist/ku-C6btZimO.js +76 -0
  85. package/dist/ky-MCwRo1zy.js +40 -0
  86. package/dist/lb-BnMsfuJ5.js +25 -0
  87. package/dist/lo-Cr1zQAWG.js +39 -0
  88. package/dist/lt-C7Y5Vfq9.js +61 -0
  89. package/dist/lv-C1vej2ax.js +40 -0
  90. package/dist/me-CRZB39fN.js +25 -0
  91. package/dist/mi-CLv7nfSQ.js +40 -0
  92. package/dist/mk-VHZ4gmYJ.js +40 -0
  93. package/dist/ml-jL4gB-xe.js +39 -0
  94. package/dist/mn-CDX_PxbZ.js +39 -0
  95. package/dist/mr-Bkbpr_Bw.js +24 -0
  96. package/dist/ms-BROxiacM.js +40 -0
  97. package/dist/ms-my-BODpks0O.js +40 -0
  98. package/dist/mt-CcikoxHP.js +40 -0
  99. package/dist/my-DarnpznW.js +40 -0
  100. package/dist/nb-BxpWY1p7.js +41 -0
  101. package/dist/ne-BcyXFx4T.js +41 -0
  102. package/dist/nl-Cxyr0jEa.js +41 -0
  103. package/dist/nl-be-LFLOh8-R.js +40 -0
  104. package/dist/nn-Cq-c_cbv.js +40 -0
  105. package/dist/oc-lnc-C8oaNTvd.js +40 -0
  106. package/dist/pa-in-B_b-6ATe.js +39 -0
  107. package/dist/pl-CfBULd3-.js +66 -0
  108. package/dist/pt-D5-rUt-h.js +41 -0
  109. package/dist/pt-br-1IZy4zr2.js +39 -0
  110. package/dist/rn-CMcLfY65.js +40 -0
  111. package/dist/ro-DlmkeHk-.js +40 -0
  112. package/dist/ru-C9cgpNSv.js +69 -0
  113. package/dist/rw-CSEynZEm.js +36 -0
  114. package/dist/scripts/generate-doc-screenshots.playwright.d.ts +0 -0
  115. package/dist/scripts/generate-doc-wheel-videos.playwright.d.ts +0 -0
  116. package/dist/sd-B8d_Ue0W.js +40 -0
  117. package/dist/se-DDIW9po1.js +40 -0
  118. package/dist/si-CU12TX8e.js +39 -0
  119. package/dist/sk-DRelTxNn.js +73 -0
  120. package/dist/sl-Dn8K6NrS.js +74 -0
  121. package/dist/sq-B4KAEviD.js +40 -0
  122. package/dist/sr-cyrl-BqPUfczc.js +63 -0
  123. package/dist/sr-v-5lLwSP.js +63 -0
  124. package/dist/src/composables/date.d.ts +47 -0
  125. package/dist/src/composables/directYearInput.d.ts +11 -0
  126. package/dist/src/composables/dom.d.ts +3 -0
  127. package/dist/src/composables/shortcut.d.ts +36 -0
  128. package/dist/src/entry.d.ts +2 -0
  129. package/dist/src/entry.esm.d.ts +2 -0
  130. package/dist/src/keys.d.ts +18 -0
  131. package/dist/src/main.d.ts +0 -0
  132. package/dist/src/types.d.ts +106 -0
  133. package/dist/src/utils.d.ts +15 -0
  134. package/dist/ss-BwpPKI6e.js +40 -0
  135. package/dist/sv-CPdiBRl8.js +44 -0
  136. package/dist/sv-fi-BeG4nL1v.js +46 -0
  137. package/dist/sw-BKJ7-E_7.js +40 -0
  138. package/dist/ta-6KciRDjF.js +39 -0
  139. package/dist/te-Cp3slRML.js +39 -0
  140. package/dist/tests/setup.d.ts +1 -0
  141. package/dist/tests/unit/accessibility-regression.spec.d.ts +1 -0
  142. package/dist/tests/unit/calendar-keyboard-activation.spec.d.ts +1 -0
  143. package/dist/tests/unit/calendar-today-range-style.spec.d.ts +1 -0
  144. package/dist/tests/unit/date-validation.spec.d.ts +1 -0
  145. package/dist/tests/unit/direct-year-input-format.spec.d.ts +1 -0
  146. package/dist/tests/unit/formatter-time-token-analysis.spec.d.ts +1 -0
  147. package/dist/tests/unit/header-selector-calendar-nav.spec.d.ts +1 -0
  148. package/dist/tests/unit/input-tab-focus-cycle.spec.d.ts +1 -0
  149. package/dist/tests/unit/input-text-sync.spec.d.ts +1 -0
  150. package/dist/tests/unit/locale-isolation.spec.d.ts +0 -0
  151. package/dist/tests/unit/range-keyboard-apply.spec.d.ts +1 -0
  152. package/dist/tests/unit/selector-focus-tint.spec.d.ts +1 -0
  153. package/dist/tests/unit/selector-wheel-keyboard.spec.d.ts +1 -0
  154. package/dist/tests/unit/selector-year-scroll-mode.spec.d.ts +1 -0
  155. package/dist/tests/unit/shortcut-event-contract.spec.d.ts +1 -0
  156. package/dist/tests/unit/shortcut-legacy-preset.spec.d.ts +1 -0
  157. package/dist/tests/unit/shortcut-modern-preset.spec.d.ts +1 -0
  158. package/dist/tests/unit/shortcut-popover-close.spec.d.ts +1 -0
  159. package/dist/tests/unit/shortcut-test-utils.d.ts +10 -0
  160. package/dist/tests/unit/shortcut-visibility.spec.d.ts +1 -0
  161. package/dist/tests/unit/time-panel-layout.spec.d.ts +1 -0
  162. package/dist/tests/unit/weekend-day-styling.spec.d.ts +1 -0
  163. package/dist/tet-BjgM2Fpa.js +40 -0
  164. package/dist/tg-D2g8lGfg.js +40 -0
  165. package/dist/th-DKy_3Vge.js +39 -0
  166. package/dist/tk-C_Ds8e8h.js +40 -0
  167. package/dist/tl-ph-Bve44VXc.js +40 -0
  168. package/dist/tlh-CsCi3dmH.js +25 -0
  169. package/dist/tr-DKgu-Z24.js +40 -0
  170. package/dist/tzl-CeMn1mnp.js +25 -0
  171. package/dist/tzm-C_IfIumK.js +40 -0
  172. package/dist/tzm-latn-ikQegYmo.js +40 -0
  173. package/dist/ug-cn-CL3sdtZ8.js +40 -0
  174. package/dist/uk-CbGYFPds.js +61 -0
  175. package/dist/ur-B0XJkbVm.js +40 -0
  176. package/dist/uz-BsDYjG4i.js +40 -0
  177. package/dist/uz-latn-BebLbnY4.js +40 -0
  178. package/dist/vi-eqBLBxPa.js +44 -0
  179. package/dist/vite.config.d.ts +2 -0
  180. package/dist/vitest.config.d.ts +2 -0
  181. package/dist/vue-tailwind-datepicker.js +7663 -0
  182. package/dist/vue-tailwind-datepicker.umd.cjs +5 -0
  183. package/dist/x-pseudo-DY7_TCZy.js +40 -0
  184. package/dist/yo-DlB7L6qv.js +40 -0
  185. package/dist/zh-CLtjqusr.js +49 -0
  186. package/dist/zh-cn-BRXgNKy_.js +49 -0
  187. package/dist/zh-hk-F0Sypqrw.js +47 -0
  188. package/dist/zh-tw-ioELNDRx.js +47 -0
  189. package/package.json +243 -0
package/LICENSE ADDED
@@ -0,0 +1,23 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2021 Kenhyuwa
4
+ Copyright (c) 2022-2024 Alexandre Le Corre
5
+ Copyright (c) 2024-2026 Ignat Remizov <ignat@ignatremizov.com>
6
+
7
+ Permission is hereby granted, free of charge, to any person obtaining a copy
8
+ of this software and associated documentation files (the "Software"), to deal
9
+ in the Software without restriction, including without limitation the rights
10
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11
+ copies of the Software, and to permit persons to whom the Software is
12
+ furnished to do so, subject to the following conditions:
13
+
14
+ The above copyright notice and this permission notice shall be included in all
15
+ copies or substantial portions of the Software.
16
+
17
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,399 @@
1
+ # Vue Tailwind Datepicker
2
+
3
+ <p align="center">
4
+ <a href="https://github.com/ignatremizov/vue-tailwind-datepicker" target="_blank">
5
+ <img alt="Vue Tailwind Datepicker" width="100" style="border-radius: 100%;" src="https://github.com/ignatremizov/vue-tailwind-datepicker/blob/main/docs/logo.png?raw=true">
6
+ </a><br><br>
7
+ Advanced date-time picker with native-UI like wheels for Vue 3 using Tailwind and dayjs.
8
+ <br />
9
+ Maintained fork by Ignat Remizov.
10
+ </p>
11
+
12
+ [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
13
+
14
+ ## Highlights
15
+
16
+ <p>
17
+ <img alt="Dual calendar wheel-page layout" width="100%" src="./docs/assets/screenshots/all-features-wheel-page-dual-calendar.png">
18
+ </p>
19
+ <p>
20
+ <img alt="12-hour time wheel with seconds and meridiem" width="49%" src="./docs/assets/screenshots/all-features-format-hh-mm-ss-a-time.png">
21
+ <img alt="Selector mode month and year wheels" width="49%" src="./docs/assets/screenshots/all-features-direct-year-input-off-selector.png">
22
+ </p>
23
+
24
+ ## Documentation
25
+
26
+ Go to [full documentation](https://github.com/ignatremizov/vue-tailwind-datepicker/tree/main/docs) or run `npm run docs:dev` locally.
27
+
28
+ Project guidelines:
29
+
30
+ - [Contributing](./CONTRIBUTING.md)
31
+ - [Code of Conduct](./.github/CODE_OF_CONDUCT.md)
32
+ - [Release Guide](./.github/RELEASE_GUIDE.md)
33
+
34
+ ## Installation
35
+
36
+ ⚠️ Vue Tailwind Datepicker uses Tailwind CSS (with the @tailwindcss/forms plugin) & Day.js under the hood, **you must install those packages** before.
37
+ See the repository docs for complete setup guides.
38
+
39
+ ### Install via npm
40
+
41
+ ```
42
+ npm install @ignatremizov/vue-tailwind-datepicker
43
+ ```
44
+
45
+ ### Install via yarn
46
+
47
+ ```
48
+ yarn add @ignatremizov/vue-tailwind-datepicker
49
+ ```
50
+
51
+ ## Simple Usage
52
+
53
+ How it works,
54
+
55
+ ```vue
56
+ <script setup>
57
+ import { ref } from 'vue'
58
+ import VueTailwindDatepicker from '@ignatremizov/vue-tailwind-datepicker'
59
+
60
+ const dateValue = ref([])
61
+ const formatter = ref({
62
+ date: 'DD MMM YYYY',
63
+ month: 'MMM',
64
+ })
65
+ </script>
66
+
67
+ <template>
68
+ <div>
69
+ <VueTailwindDatepicker v-model="dateValue" :formatter="formatter" />
70
+ </div>
71
+ </template>
72
+ ```
73
+
74
+ ## Time Picker Modes
75
+
76
+ Use `timePickerStyle` to control whether time is disabled, text input, or wheel UI.
77
+
78
+ - `timePickerStyle="none"` (default): date-only mode.
79
+ - `timePickerStyle="input"`: text input time under the calendar.
80
+ - `timePickerStyle="wheel-inline"`: wheel controls always visible under the calendar.
81
+ - `timePickerStyle="wheel-page"`: calendar and wheel shown as separate pages.
82
+ - `timePageMode="toggle"` (default): manual page switching.
83
+ - `timePageMode="after-date"`: automatically switch from calendar to time after date selection.
84
+ - For any non-`none` mode, commit requires explicit **Apply** even when `autoApply=true`.
85
+ - `formatter.date` remains the source of truth for date/time parse and format behavior.
86
+
87
+ ### Input mode
88
+
89
+ ```vue
90
+ <script setup>
91
+ import { ref } from 'vue'
92
+
93
+ const value = ref('')
94
+ </script>
95
+
96
+ <template>
97
+ <vue-tailwind-datepicker
98
+ v-model="value"
99
+ as-single
100
+ time-picker-style="input"
101
+ :auto-apply="true"
102
+ :formatter="{ date: 'YYYY-MM-DD HH:mm', month: 'MMM' }"
103
+ />
104
+ </template>
105
+ ```
106
+
107
+ ### Range with defaults
108
+
109
+ ```vue
110
+ <script setup>
111
+ import { ref } from 'vue'
112
+
113
+ const value = ref({
114
+ startDate: '',
115
+ endDate: '',
116
+ })
117
+ </script>
118
+
119
+ <template>
120
+ <vue-tailwind-datepicker
121
+ v-model="value"
122
+ use-range
123
+ as-single
124
+ time-picker-style="wheel-inline"
125
+ default-time="09:00"
126
+ default-end-time="17:00"
127
+ :formatter="{ date: 'YYYY-MM-DD h:mm A', month: 'MMM' }"
128
+ />
129
+ </template>
130
+ ```
131
+
132
+ ### Notes
133
+
134
+ - Existing date-only integrations do not need changes.
135
+ - If you enable a time mode (`input`, `wheel-inline`, `wheel-page`), ensure `formatter.date` includes time tokens (`HH:mm`, `HH:mm:ss`, or 12-hour equivalents with meridiem).
136
+ - If incoming model values do not include time, hydration uses `defaultTime` / `defaultEndTime` then falls back to `00:00[:00]`.
137
+
138
+ ### Wheel modes
139
+
140
+ - `timePickerStyle="wheel-inline"`: native-like wheel selectors (`hh/mm[/ss]`, plus meridiem in 12-hour mode), always visible.
141
+ - `timePickerStyle="wheel-page"` with `timePageMode="toggle"`: manual back-and-forth using the switch button.
142
+ - `timePickerStyle="wheel-page"` with `timePageMode="after-date"`: flow is `calendar -> time -> apply`.
143
+ - `timeWheelScrollMode="boundary"` (default): wheels snap discretely at each unit.
144
+ - `timeWheelScrollMode="fractional"`: wheels drift continuously based on lower-order units (for example hour drift by minute progress).
145
+
146
+ ```vue
147
+ <vue-tailwind-datepicker
148
+ v-model="value"
149
+ as-single
150
+ time-picker-style="wheel-page"
151
+ time-page-mode="after-date"
152
+ time-wheel-scroll-mode="fractional"
153
+ :formatter="{ date: 'YYYY-MM-DD HH:mm', month: 'MMM' }"
154
+ />
155
+ ```
156
+
157
+ ## Native Scroll Selector Mode
158
+
159
+ Enable native-like month/year scrolling with `selectorMode` (use `:selector-mode` in templates). Default is `false`.
160
+
161
+ **Single date**
162
+
163
+ ```vue
164
+ <script setup>
165
+ import { ref } from 'vue'
166
+
167
+ const singleDate = ref('')
168
+ </script>
169
+
170
+ <template>
171
+ <vue-tailwind-datepicker v-model="singleDate" as-single :selector-mode="true" />
172
+ </template>
173
+ ```
174
+
175
+ **Range**
176
+
177
+ ```vue
178
+ <script setup>
179
+ import { ref } from 'vue'
180
+
181
+ const rangeDate = ref({
182
+ startDate: '',
183
+ endDate: '',
184
+ })
185
+ </script>
186
+
187
+ <template>
188
+ <vue-tailwind-datepicker v-model="rangeDate" use-range :selector-mode="true" />
189
+ </template>
190
+ ```
191
+
192
+ **Selector behavior options**
193
+
194
+ - `selector-year-scroll-mode="boundary"`: clarity-first default; year wheel advances discretely.
195
+ - `selector-year-scroll-mode="fractional"`: continuous month-synced year-wheel drift.
196
+ - `:selector-year-home-jump="100"`: Home key jump size (years) in year wheel mode.
197
+ - `:selector-year-end-jump="100"`: End key jump size (years) in year wheel mode.
198
+ - `:selector-year-page-jump="10"`: PageUp/PageDown jump size (years) in year wheel mode.
199
+ - `:selector-year-page-shift-jump="100"`: Shift+PageUp/Shift+PageDown jump size (years).
200
+ - `:selector-focus-tint="false"`: keeps selector containers neutral while preserving functionality.
201
+ - `:close-on-range-selection="false"`: keeps the popover open after selecting the second range date.
202
+ Recommended with `selector-mode` when you want a fully native-like keep-open flow.
203
+ In `no-input` static mode this option is a no-op because there is no popover to close.
204
+
205
+ **Popover behavior options**
206
+
207
+ - `open-focus-target="input" | "calendar"`: controls where focus lands after popover open.
208
+ - `:popover-transition="true|false"`: toggles enter/leave transition classes.
209
+ - `:popover-restore-focus="false"` (default): prevents automatic refocus of the input/trigger when the popover closes.
210
+ Set `:popover-restore-focus="true"` to restore legacy trigger-refocus behavior.
211
+
212
+ ```vue
213
+ <vue-tailwind-datepicker
214
+ v-model="rangeDate"
215
+ use-range
216
+ :selector-mode="true"
217
+ selector-year-scroll-mode="boundary"
218
+ :selector-year-home-jump="100"
219
+ :selector-year-end-jump="100"
220
+ :selector-year-page-jump="10"
221
+ :selector-year-page-shift-jump="100"
222
+ :selector-focus-tint="true"
223
+ :close-on-range-selection="false"
224
+ open-focus-target="input"
225
+ :popover-transition="true"
226
+ :popover-restore-focus="false"
227
+ />
228
+ ```
229
+
230
+ Selector wheel visuals are also themeable through CSS variables on `.vtd-datepicker` (month/year selected and hover colors, borders, typography, wheel cell sizing, and shared selected/unselected wheel text tokens used by selector + time wheels). Calendar range preview colors/opacity are exposed via `--vtd-calendar-range-preview-bg` and `--vtd-calendar-range-preview-bg-dark`. See `docs/theming-options.md` for examples.
231
+
232
+ ## Shortcut Layout Customization
233
+
234
+ Shortcut sizing can be customized through the `shortcut-item` slot and host CSS.
235
+
236
+ ```vue
237
+ <vue-tailwind-datepicker v-model="dateValue" :shortcuts="typedShortcuts">
238
+ <template #shortcut-item="{ id, label, isDisabled, disabledReason, activate }">
239
+ <button
240
+ type="button"
241
+ class="vtd-shortcuts w-[10.5rem] rounded border px-2 py-1.5 text-left text-sm"
242
+ :data-shortcut-id="id"
243
+ :disabled="isDisabled"
244
+ @click="activate"
245
+ >
246
+ {{ label }}
247
+ </button>
248
+ <small v-if="disabledReason === 'blocked-date'">blocked by disableDate</small>
249
+ </template>
250
+ </vue-tailwind-datepicker>
251
+ ```
252
+
253
+ - Control width/spacing/typography with slot classes.
254
+ - Use `.vtd-shortcuts` for host-level CSS overrides.
255
+ - Use `disabledReason` (`explicit` | `blocked-date`) to show user-facing status badges.
256
+ - There is no dedicated `shortcutPanelWidth` prop yet; panel width follows rendered shortcut content.
257
+
258
+ ## Weekend Day Styling Hooks
259
+
260
+ Day cells now expose stable weekend hooks so host apps can apply weekend tinting without patching component internals:
261
+
262
+ - `vtd-weekend` for Saturday and Sunday
263
+ - `vtd-saturday` for Saturday only
264
+ - `vtd-sunday` for Sunday only
265
+
266
+ ```css
267
+ /* Base weekend tint */
268
+ .vtd-datepicker-date.vtd-weekend {
269
+ color: #dc2626;
270
+ }
271
+
272
+ /* Optional split palette */
273
+ .vtd-datepicker-date.vtd-saturday {
274
+ color: #ea580c;
275
+ }
276
+
277
+ .vtd-datepicker-date.vtd-sunday {
278
+ color: #b91c1c;
279
+ }
280
+ ```
281
+
282
+ Hooks are stable across locales and also apply when `selector-mode` is enabled:
283
+
284
+ ```vue
285
+ <vue-tailwind-datepicker v-model="rangeEn" use-range i18n="en" />
286
+
287
+ <vue-tailwind-datepicker v-model="rangeDe" use-range i18n="de" />
288
+
289
+ <vue-tailwind-datepicker
290
+ v-model="rangeSelector"
291
+ use-range
292
+ as-single
293
+ :selector-mode="true"
294
+ i18n="en"
295
+ />
296
+ ```
297
+
298
+ Hooks are additive: selected/range/disabled/today semantics remain unchanged unless your host CSS explicitly overrides them.
299
+
300
+ ## Direct Year Input (Selector Mode)
301
+
302
+ Use `directYearInput` to allow typing a year directly in selector mode. The feature is opt-in and defaults to `false`.
303
+
304
+ ```vue
305
+ <script setup>
306
+ import { ref } from 'vue'
307
+
308
+ const value = ref({
309
+ startDate: '',
310
+ endDate: '',
311
+ })
312
+ </script>
313
+
314
+ <template>
315
+ <vue-tailwind-datepicker
316
+ v-model="value"
317
+ use-range
318
+ :selector-mode="true"
319
+ :direct-year-input="true"
320
+ year-numbering-mode="historical"
321
+ />
322
+ </template>
323
+ ```
324
+
325
+ Behavior summary:
326
+
327
+ - Valid typed tokens commit immediately to selector/calendar state and emit `update:modelValue` for the active context.
328
+ - Year parsing supports signed `-99999..99999`; `year-numbering-mode="historical"` rejects `0`, while `astronomical` accepts `0`.
329
+ - Typeahead intentionally supports historical/fantasy/scientific timelines (not only modern Gregorian UI assumptions):
330
+ - Prefix `1` anchors to `1950` for 1-digit starts.
331
+ - Prefix `2` anchors to the current year suffix for 1-digit starts.
332
+ - 2-digit tokens use a mid-century suffix (`xx50`).
333
+ - 3-digit non-zero prefixes use a mid-decade suffix (`xxx5`).
334
+ - Up to 5 digits are accepted before the token resets.
335
+ - `+` / `-` set explicit sign, `Backspace` edits the active token, and `Escape` clears it.
336
+ - Typeahead state auto-resets after 900 ms of idle time.
337
+ - Enter confirms in place and keeps selector mode open.
338
+ - Escape and invalid blur revert to the last valid year text.
339
+ - In range mode, temporary `start > end` from live typing is allowed and is normalized only at explicit persist boundaries (`Apply` or close-with-persist toggle).
340
+ - Cancel-like exits (Escape, Cancel button, backdrop dismiss) do not trigger range normalization.
341
+
342
+ ## Theming options
343
+
344
+ **Light Mode**
345
+
346
+ ![Light Mode](https://github.com/ignatremizov/vue-tailwind-datepicker/blob/main/docs/light.png?raw=true)
347
+
348
+ **Dark Mode**
349
+
350
+ ![Dark Mode](https://github.com/ignatremizov/vue-tailwind-datepicker/blob/main/docs/dark.png?raw=true)
351
+
352
+ ## Local Dev Ports
353
+
354
+ - `npm run dev` uses Vite dev-server defaults (typically `http://127.0.0.1:5173/` unless overridden).
355
+ - `npm run preview` runs on `http://127.0.0.1:4173/` (configured in `package.json`).
356
+ - `npm run docs:screenshots` accepts a base URL argument, for example:
357
+ - `npm run docs:screenshots -- http://127.0.0.1:5173/`
358
+ - `npm run docs:screenshots -- http://127.0.0.1:4180/` (useful when working across multiple worktrees).
359
+ - Screenshot quality is configurable via env vars:
360
+ - `DOC_SCREENSHOT_VIEWPORT_WIDTH` (default `1800`)
361
+ - `DOC_SCREENSHOT_VIEWPORT_HEIGHT` (default `1300`)
362
+ - `DOC_SCREENSHOT_DEVICE_SCALE` (default `2`)
363
+ - `DOC_SCREENSHOT_ZOOM` (default `1.0`)
364
+ - `npm run docs:videos` generates MP4 animation captures (same URL argument pattern):
365
+ - `npm run docs:videos -- http://127.0.0.1:5173/`
366
+ - `npm run docs:videos -- http://127.0.0.1:4180/`
367
+
368
+ ## Dependency Pins (Dev)
369
+
370
+ - `@headlessui/vue` is pinned to a GitHub release tarball from the fork to include Vue fixes not yet available in the upstream npm line used by this repo.
371
+ - `js-beautify` is pinned via `overrides` to a fork tarball commit to break an upstream dev-only audit chain (through `@vue/test-utils`), until upstream publishes an equivalent fix.
372
+ - When updating either pin, prefer a tagged release or commit SHA URL and run:
373
+ - `npm install`
374
+ - `npm run test:unit`
375
+ - `npm run build`
376
+ - `npm audit`
377
+
378
+ ## Changelog
379
+
380
+ All notable changes to this project will be documented in the [Releases Page](https://github.com/ignatremizov/vue-tailwind-datepicker/releases).
381
+
382
+ ## Funding
383
+
384
+ - [GitHub Sponsors: @ignatremizov](https://github.com/sponsors/ignatremizov)
385
+
386
+ ## License
387
+
388
+ The [MIT](LICENSE) License. Please [see](http://opensource.org/licenses/MIT) for more information.
389
+
390
+ ## Contributors
391
+
392
+ - [Ignat Remizov](https://github.com/ignatremizov) (maintainer of this fork)
393
+ - [Alexandre Le Corre](https://github.com/elreco) (upstream maintainer)
394
+ - [Kenhyuwa](https://github.com/kenhyuwa) (original author/contributor)
395
+ - See [CONTRIBUTORS.md](./CONTRIBUTORS.md) for contributor notes.
396
+ - [Vue](https://v3.vuejs.org/)
397
+ - [Tailwind CSS](https://tailwindcss.com/)
398
+ - [day.js](https://day.js.org/)
399
+ - and other support...
@@ -0,0 +1,40 @@
1
+ import { d as e } from "./index-pdvQgmpw.js";
2
+ var _ = {
3
+ name: "af",
4
+ weekdays: "Sondag_Maandag_Dinsdag_Woensdag_Donderdag_Vrydag_Saterdag".split("_"),
5
+ months: "Januarie_Februarie_Maart_April_Mei_Junie_Julie_Augustus_September_Oktober_November_Desember".split("_"),
6
+ weekStart: 1,
7
+ weekdaysShort: "Son_Maa_Din_Woe_Don_Vry_Sat".split("_"),
8
+ monthsShort: "Jan_Feb_Mrt_Apr_Mei_Jun_Jul_Aug_Sep_Okt_Nov_Des".split("_"),
9
+ weekdaysMin: "So_Ma_Di_Wo_Do_Vr_Sa".split("_"),
10
+ ordinal: function(a) {
11
+ return a;
12
+ },
13
+ formats: {
14
+ LT: "HH:mm",
15
+ LTS: "HH:mm:ss",
16
+ L: "DD/MM/YYYY",
17
+ LL: "D MMMM YYYY",
18
+ LLL: "D MMMM YYYY HH:mm",
19
+ LLLL: "dddd, D MMMM YYYY HH:mm"
20
+ },
21
+ relativeTime: {
22
+ future: "oor %s",
23
+ past: "%s gelede",
24
+ s: "'n paar sekondes",
25
+ m: "'n minuut",
26
+ mm: "%d minute",
27
+ h: "'n uur",
28
+ hh: "%d ure",
29
+ d: "'n dag",
30
+ dd: "%d dae",
31
+ M: "'n maand",
32
+ MM: "%d maande",
33
+ y: "'n jaar",
34
+ yy: "%d jaar"
35
+ }
36
+ };
37
+ e.locale(_, null, !0);
38
+ export {
39
+ _ as default
40
+ };
@@ -0,0 +1,41 @@
1
+ import { d as t } from "./index-pdvQgmpw.js";
2
+ var a = {
3
+ name: "am",
4
+ weekdays: "እሑድ_ሰኞ_ማክሰኞ_ረቡዕ_ሐሙስ_አርብ_ቅዳሜ".split("_"),
5
+ weekdaysShort: "እሑድ_ሰኞ_ማክሰ_ረቡዕ_ሐሙስ_አርብ_ቅዳሜ".split("_"),
6
+ weekdaysMin: "እሑ_ሰኞ_ማክ_ረቡ_ሐሙ_አር_ቅዳ".split("_"),
7
+ months: "ጃንዋሪ_ፌብሯሪ_ማርች_ኤፕሪል_ሜይ_ጁን_ጁላይ_ኦገስት_ሴፕቴምበር_ኦክቶበር_ኖቬምበር_ዲሴምበር".split("_"),
8
+ monthsShort: "ጃንዋ_ፌብሯ_ማርች_ኤፕሪ_ሜይ_ጁን_ጁላይ_ኦገስ_ሴፕቴ_ኦክቶ_ኖቬም_ዲሴም".split("_"),
9
+ weekStart: 1,
10
+ yearStart: 4,
11
+ relativeTime: {
12
+ future: "በ%s",
13
+ past: "%s በፊት",
14
+ s: "ጥቂት ሰከንዶች",
15
+ m: "አንድ ደቂቃ",
16
+ mm: "%d ደቂቃዎች",
17
+ h: "አንድ ሰዓት",
18
+ hh: "%d ሰዓታት",
19
+ d: "አንድ ቀን",
20
+ dd: "%d ቀናት",
21
+ M: "አንድ ወር",
22
+ MM: "%d ወራት",
23
+ y: "አንድ ዓመት",
24
+ yy: "%d ዓመታት"
25
+ },
26
+ formats: {
27
+ LT: "HH:mm",
28
+ LTS: "HH:mm:ss",
29
+ L: "DD/MM/YYYY",
30
+ LL: "MMMM D ፣ YYYY",
31
+ LLL: "MMMM D ፣ YYYY HH:mm",
32
+ LLLL: "dddd ፣ MMMM D ፣ YYYY HH:mm"
33
+ },
34
+ ordinal: function(_) {
35
+ return _ + "ኛ";
36
+ }
37
+ };
38
+ t.locale(a, null, !0);
39
+ export {
40
+ a as default
41
+ };
@@ -0,0 +1,75 @@
1
+ import { d as m } from "./index-pdvQgmpw.js";
2
+ var t = "يناير_فبراير_مارس_أبريل_مايو_يونيو_يوليو_أغسطس_سبتمبر_أكتوبر_نوفمبر_ديسمبر".split("_"), _ = {
3
+ 1: "١",
4
+ 2: "٢",
5
+ 3: "٣",
6
+ 4: "٤",
7
+ 5: "٥",
8
+ 6: "٦",
9
+ 7: "٧",
10
+ 8: "٨",
11
+ 9: "٩",
12
+ 0: "٠"
13
+ }, o = {
14
+ "١": "1",
15
+ "٢": "2",
16
+ "٣": "3",
17
+ "٤": "4",
18
+ "٥": "5",
19
+ "٦": "6",
20
+ "٧": "7",
21
+ "٨": "8",
22
+ "٩": "9",
23
+ "٠": "0"
24
+ }, n = /[١٢٣٤٥٦٧٨٩٠]/g, s = /،/g, d = /\d/g, l = /,/g, i = {
25
+ name: "ar",
26
+ weekdays: "الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
27
+ weekdaysShort: "أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت".split("_"),
28
+ weekdaysMin: "ح_ن_ث_ر_خ_ج_س".split("_"),
29
+ months: t,
30
+ monthsShort: t,
31
+ weekStart: 6,
32
+ meridiem: function(r) {
33
+ return r > 12 ? "م" : "ص";
34
+ },
35
+ relativeTime: {
36
+ future: "بعد %s",
37
+ past: "منذ %s",
38
+ s: "ثانية واحدة",
39
+ m: "دقيقة واحدة",
40
+ mm: "%d دقائق",
41
+ h: "ساعة واحدة",
42
+ hh: "%d ساعات",
43
+ d: "يوم واحد",
44
+ dd: "%d أيام",
45
+ M: "شهر واحد",
46
+ MM: "%d أشهر",
47
+ y: "عام واحد",
48
+ yy: "%d أعوام"
49
+ },
50
+ preparse: function(r) {
51
+ return r.replace(n, function(a) {
52
+ return o[a];
53
+ }).replace(s, ",");
54
+ },
55
+ postformat: function(r) {
56
+ return r.replace(d, function(a) {
57
+ return _[a];
58
+ }).replace(l, "،");
59
+ },
60
+ ordinal: function(r) {
61
+ return r;
62
+ },
63
+ formats: {
64
+ LT: "HH:mm",
65
+ LTS: "HH:mm:ss",
66
+ L: "D/‏M/‏YYYY",
67
+ LL: "D MMMM YYYY",
68
+ LLL: "D MMMM YYYY HH:mm",
69
+ LLLL: "dddd D MMMM YYYY HH:mm"
70
+ }
71
+ };
72
+ m.locale(i, null, !0);
73
+ export {
74
+ i as default
75
+ };
@@ -0,0 +1,42 @@
1
+ import { d as e } from "./index-pdvQgmpw.js";
2
+ var m = {
3
+ name: "ar-dz",
4
+ weekdays: "الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
5
+ months: "جانفي_فيفري_مارس_أفريل_ماي_جوان_جويلية_أوت_سبتمبر_أكتوبر_نوفمبر_ديسمبر".split("_"),
6
+ weekdaysShort: "احد_اثنين_ثلاثاء_اربعاء_خميس_جمعة_سبت".split("_"),
7
+ monthsShort: "جانفي_فيفري_مارس_أفريل_ماي_جوان_جويلية_أوت_سبتمبر_أكتوبر_نوفمبر_ديسمبر".split("_"),
8
+ weekdaysMin: "أح_إث_ثلا_أر_خم_جم_سب".split("_"),
9
+ ordinal: function(_) {
10
+ return _;
11
+ },
12
+ formats: {
13
+ LT: "HH:mm",
14
+ LTS: "HH:mm:ss",
15
+ L: "DD/MM/YYYY",
16
+ LL: "D MMMM YYYY",
17
+ LLL: "D MMMM YYYY HH:mm",
18
+ LLLL: "dddd D MMMM YYYY HH:mm"
19
+ },
20
+ meridiem: function(_) {
21
+ return _ > 12 ? "م" : "ص";
22
+ },
23
+ relativeTime: {
24
+ future: "في %s",
25
+ past: "منذ %s",
26
+ s: "ثوان",
27
+ m: "دقيقة",
28
+ mm: "%d دقائق",
29
+ h: "ساعة",
30
+ hh: "%d ساعات",
31
+ d: "يوم",
32
+ dd: "%d أيام",
33
+ M: "شهر",
34
+ MM: "%d أشهر",
35
+ y: "سنة",
36
+ yy: "%d سنوات"
37
+ }
38
+ };
39
+ e.locale(m, null, !0);
40
+ export {
41
+ m as default
42
+ };
@@ -0,0 +1,43 @@
1
+ import { d as t } from "./index-pdvQgmpw.js";
2
+ var d = {
3
+ name: "ar-iq",
4
+ weekdays: "الأحد_الإثنين_الثلاثاء_الأربعاء_الخميس_الجمعة_السبت".split("_"),
5
+ months: "كانون الثاني_شباط_آذار_نيسان_أيار_حزيران_تموز_آب_أيلول_تشرين الأول_ تشرين الثاني_كانون الأول".split("_"),
6
+ weekStart: 1,
7
+ weekdaysShort: "أحد_إثنين_ثلاثاء_أربعاء_خميس_جمعة_سبت".split("_"),
8
+ monthsShort: "كانون الثاني_شباط_آذار_نيسان_أيار_حزيران_تموز_آب_أيلول_تشرين الأول_ تشرين الثاني_كانون الأول".split("_"),
9
+ weekdaysMin: "ح_ن_ث_ر_خ_ج_س".split("_"),
10
+ ordinal: function(_) {
11
+ return _;
12
+ },
13
+ formats: {
14
+ LT: "HH:mm",
15
+ LTS: "HH:mm:ss",
16
+ L: "DD/MM/YYYY",
17
+ LL: "D MMMM YYYY",
18
+ LLL: "D MMMM YYYY HH:mm",
19
+ LLLL: "dddd D MMMM YYYY HH:mm"
20
+ },
21
+ meridiem: function(_) {
22
+ return _ > 12 ? "م" : "ص";
23
+ },
24
+ relativeTime: {
25
+ future: "في %s",
26
+ past: "منذ %s",
27
+ s: "ثوان",
28
+ m: "دقيقة",
29
+ mm: "%d دقائق",
30
+ h: "ساعة",
31
+ hh: "%d ساعات",
32
+ d: "يوم",
33
+ dd: "%d أيام",
34
+ M: "شهر",
35
+ MM: "%d أشهر",
36
+ y: "سنة",
37
+ yy: "%d سنوات"
38
+ }
39
+ };
40
+ t.locale(d, null, !0);
41
+ export {
42
+ d as default
43
+ };