@treeui/vue 0.17.0 → 0.19.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 (120) hide show
  1. package/dist/components/TAppShell.cjs.map +1 -1
  2. package/dist/components/TAppShell.js.map +1 -1
  3. package/dist/components/TAppShell.vue.d.ts +24 -2
  4. package/dist/components/TAppShell.vue.d.ts.map +1 -1
  5. package/dist/components/TAppShell.vue_vue_type_script_setup_true_lang.cjs +1 -1
  6. package/dist/components/TAppShell.vue_vue_type_script_setup_true_lang.cjs.map +1 -1
  7. package/dist/components/TAppShell.vue_vue_type_script_setup_true_lang.js +96 -121
  8. package/dist/components/TAppShell.vue_vue_type_script_setup_true_lang.js.map +1 -1
  9. package/dist/components/TButton.cjs.map +1 -1
  10. package/dist/components/TButton.js.map +1 -1
  11. package/dist/components/TButton.vue.d.ts +21 -0
  12. package/dist/components/TButton.vue.d.ts.map +1 -1
  13. package/dist/components/TButton.vue_vue_type_script_setup_true_lang.cjs +1 -1
  14. package/dist/components/TButton.vue_vue_type_script_setup_true_lang.cjs.map +1 -1
  15. package/dist/components/TButton.vue_vue_type_script_setup_true_lang.js +47 -31
  16. package/dist/components/TButton.vue_vue_type_script_setup_true_lang.js.map +1 -1
  17. package/dist/components/TDatePicker.cjs.map +1 -1
  18. package/dist/components/TDatePicker.js.map +1 -1
  19. package/dist/components/TDatePicker.vue_vue_type_script_setup_true_lang.cjs +1 -1
  20. package/dist/components/TDatePicker.vue_vue_type_script_setup_true_lang.cjs.map +1 -1
  21. package/dist/components/TDatePicker.vue_vue_type_script_setup_true_lang.js +1 -1
  22. package/dist/components/TDatePicker.vue_vue_type_script_setup_true_lang.js.map +1 -1
  23. package/dist/components/TDateTimePicker.cjs.map +1 -1
  24. package/dist/components/TDateTimePicker.js.map +1 -1
  25. package/dist/components/TDateTimePicker.vue_vue_type_script_setup_true_lang.cjs +1 -1
  26. package/dist/components/TDateTimePicker.vue_vue_type_script_setup_true_lang.cjs.map +1 -1
  27. package/dist/components/TDateTimePicker.vue_vue_type_script_setup_true_lang.js +1 -1
  28. package/dist/components/TDateTimePicker.vue_vue_type_script_setup_true_lang.js.map +1 -1
  29. package/dist/components/TDrawer.cjs.map +1 -1
  30. package/dist/components/TDrawer.js.map +1 -1
  31. package/dist/components/TDrawer.vue_vue_type_script_setup_true_lang.cjs +1 -1
  32. package/dist/components/TDrawer.vue_vue_type_script_setup_true_lang.cjs.map +1 -1
  33. package/dist/components/TDrawer.vue_vue_type_script_setup_true_lang.js +1 -1
  34. package/dist/components/TDrawer.vue_vue_type_script_setup_true_lang.js.map +1 -1
  35. package/dist/components/TIcon.cjs.map +1 -1
  36. package/dist/components/TIcon.js.map +1 -1
  37. package/dist/components/TIcon.vue.d.ts.map +1 -1
  38. package/dist/components/TIcon.vue_vue_type_script_setup_true_lang.cjs +1 -1
  39. package/dist/components/TIcon.vue_vue_type_script_setup_true_lang.cjs.map +1 -1
  40. package/dist/components/TIcon.vue_vue_type_script_setup_true_lang.js +18 -17
  41. package/dist/components/TIcon.vue_vue_type_script_setup_true_lang.js.map +1 -1
  42. package/dist/components/TLanguageSelect.vue.d.ts +1 -1
  43. package/dist/components/TLanguageSelect.vue.d.ts.map +1 -1
  44. package/dist/components/TModal.cjs.map +1 -1
  45. package/dist/components/TModal.js.map +1 -1
  46. package/dist/components/TModal.vue_vue_type_script_setup_true_lang.cjs +1 -1
  47. package/dist/components/TModal.vue_vue_type_script_setup_true_lang.cjs.map +1 -1
  48. package/dist/components/TModal.vue_vue_type_script_setup_true_lang.js +1 -1
  49. package/dist/components/TModal.vue_vue_type_script_setup_true_lang.js.map +1 -1
  50. package/dist/components/TMultiSelect.cjs.map +1 -1
  51. package/dist/components/TMultiSelect.js.map +1 -1
  52. package/dist/components/TMultiSelect.vue_vue_type_script_setup_true_lang.cjs +1 -1
  53. package/dist/components/TMultiSelect.vue_vue_type_script_setup_true_lang.cjs.map +1 -1
  54. package/dist/components/TMultiSelect.vue_vue_type_script_setup_true_lang.js +1 -1
  55. package/dist/components/TMultiSelect.vue_vue_type_script_setup_true_lang.js.map +1 -1
  56. package/dist/components/TNavMenu.cjs.map +1 -1
  57. package/dist/components/TNavMenu.js.map +1 -1
  58. package/dist/components/TNavMenu.vue.d.ts +7 -2
  59. package/dist/components/TNavMenu.vue.d.ts.map +1 -1
  60. package/dist/components/TNavMenu.vue_vue_type_script_setup_true_lang.cjs +1 -1
  61. package/dist/components/TNavMenu.vue_vue_type_script_setup_true_lang.cjs.map +1 -1
  62. package/dist/components/TNavMenu.vue_vue_type_script_setup_true_lang.js +50 -49
  63. package/dist/components/TNavMenu.vue_vue_type_script_setup_true_lang.js.map +1 -1
  64. package/dist/components/TPricingCard.vue.d.ts +1 -1
  65. package/dist/components/TPricingCard.vue.d.ts.map +1 -1
  66. package/dist/components/TSidebar.cjs.map +1 -1
  67. package/dist/components/TSidebar.js.map +1 -1
  68. package/dist/components/TSidebar.vue_vue_type_script_setup_true_lang.cjs +1 -1
  69. package/dist/components/TSidebar.vue_vue_type_script_setup_true_lang.cjs.map +1 -1
  70. package/dist/components/TSidebar.vue_vue_type_script_setup_true_lang.js +1 -1
  71. package/dist/components/TSidebar.vue_vue_type_script_setup_true_lang.js.map +1 -1
  72. package/dist/components/TSteps.cjs.map +1 -1
  73. package/dist/components/TSteps.js.map +1 -1
  74. package/dist/components/TSteps.vue_vue_type_script_setup_true_lang.cjs +1 -1
  75. package/dist/components/TSteps.vue_vue_type_script_setup_true_lang.cjs.map +1 -1
  76. package/dist/components/TSteps.vue_vue_type_script_setup_true_lang.js +1 -1
  77. package/dist/components/TSteps.vue_vue_type_script_setup_true_lang.js.map +1 -1
  78. package/dist/components/TTable.cjs.map +1 -1
  79. package/dist/components/TTable.js.map +1 -1
  80. package/dist/components/TTable.vue.d.ts +8 -2
  81. package/dist/components/TTable.vue.d.ts.map +1 -1
  82. package/dist/components/TTable.vue_vue_type_script_setup_true_lang.cjs +1 -1
  83. package/dist/components/TTable.vue_vue_type_script_setup_true_lang.cjs.map +1 -1
  84. package/dist/components/TTable.vue_vue_type_script_setup_true_lang.js +71 -80
  85. package/dist/components/TTable.vue_vue_type_script_setup_true_lang.js.map +1 -1
  86. package/dist/components/TTag.cjs.map +1 -1
  87. package/dist/components/TTag.js.map +1 -1
  88. package/dist/components/TTag.vue.d.ts.map +1 -1
  89. package/dist/components/TTag.vue_vue_type_script_setup_true_lang.cjs +1 -1
  90. package/dist/components/TTag.vue_vue_type_script_setup_true_lang.cjs.map +1 -1
  91. package/dist/components/TTag.vue_vue_type_script_setup_true_lang.js +22 -29
  92. package/dist/components/TTag.vue_vue_type_script_setup_true_lang.js.map +1 -1
  93. package/dist/components/TText.cjs.map +1 -1
  94. package/dist/components/TText.js.map +1 -1
  95. package/dist/components/TText.vue.d.ts +7 -0
  96. package/dist/components/TText.vue.d.ts.map +1 -1
  97. package/dist/components/TText.vue_vue_type_script_setup_true_lang.cjs +1 -1
  98. package/dist/components/TText.vue_vue_type_script_setup_true_lang.cjs.map +1 -1
  99. package/dist/components/TText.vue_vue_type_script_setup_true_lang.js +8 -1
  100. package/dist/components/TText.vue_vue_type_script_setup_true_lang.js.map +1 -1
  101. package/dist/components/TToast.cjs.map +1 -1
  102. package/dist/components/TToast.js.map +1 -1
  103. package/dist/components/TToast.vue.d.ts.map +1 -1
  104. package/dist/components/TToast.vue_vue_type_script_setup_true_lang.cjs +1 -1
  105. package/dist/components/TToast.vue_vue_type_script_setup_true_lang.cjs.map +1 -1
  106. package/dist/components/TToast.vue_vue_type_script_setup_true_lang.js +6 -6
  107. package/dist/components/TToast.vue_vue_type_script_setup_true_lang.js.map +1 -1
  108. package/dist/components/TTreeViewItem.cjs.map +1 -1
  109. package/dist/components/TTreeViewItem.js.map +1 -1
  110. package/dist/components/TTreeViewItem.vue_vue_type_script_setup_true_lang.cjs +1 -1
  111. package/dist/components/TTreeViewItem.vue_vue_type_script_setup_true_lang.cjs.map +1 -1
  112. package/dist/components/TTreeViewItem.vue_vue_type_script_setup_true_lang.js +1 -1
  113. package/dist/components/TTreeViewItem.vue_vue_type_script_setup_true_lang.js.map +1 -1
  114. package/dist/components/index.d.ts +2 -1
  115. package/dist/components/index.d.ts.map +1 -1
  116. package/dist/components/index.js +77 -0
  117. package/dist/index.cjs +1 -1
  118. package/dist/index.js +10 -9
  119. package/dist/style.css +1 -1
  120. package/package.json +4 -4
@@ -1,15 +1,18 @@
1
1
  import e from "./TSpinner.js";
2
- import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, openBlock as l, renderSlot as u, resolveDynamicComponent as d, withCtx as f } from "vue";
3
- import { tv as p } from "@treeui/utils";
2
+ import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, renderSlot as l, resolveDynamicComponent as u, withCtx as d } from "vue";
3
+ import { tv as f } from "@treeui/utils";
4
4
  //#region src/components/TButton.vue?vue&type=script&setup=true&lang.ts
5
- var m = {
5
+ var p = {
6
6
  key: 0,
7
7
  class: "t-button__spinner"
8
- }, h = {
8
+ }, m = {
9
9
  key: 1,
10
10
  class: "t-button__icon",
11
11
  "aria-hidden": "true"
12
- }, g = { class: "t-button__label" }, _ = /*@__PURE__*/ s({
12
+ }, h = {
13
+ key: 2,
14
+ class: "t-button__label"
15
+ }, g = /*@__PURE__*/ o({
13
16
  __name: "TButton",
14
17
  props: {
15
18
  as: { default: "button" },
@@ -23,6 +26,16 @@ var m = {
23
26
  type: Boolean,
24
27
  default: !1
25
28
  },
29
+ loadingLabel: { default: "Loading" },
30
+ hideIconWhileLoading: {
31
+ type: Boolean,
32
+ default: !0
33
+ },
34
+ iconOnly: {
35
+ type: Boolean,
36
+ default: !1
37
+ },
38
+ label: { default: void 0 },
26
39
  type: { default: "button" },
27
40
  block: {
28
41
  type: Boolean,
@@ -31,8 +44,8 @@ var m = {
31
44
  align: { default: "center" }
32
45
  },
33
46
  emits: ["click"],
34
- setup(s, { emit: _ }) {
35
- let v = s, y = _, b = p({
47
+ setup(o, { emit: g }) {
48
+ let _ = o, v = g, y = f({
36
49
  base: "t-button",
37
50
  variants: {
38
51
  variant: {
@@ -49,39 +62,41 @@ var m = {
49
62
  lg: "t-button--lg"
50
63
  }
51
64
  }
52
- }), x = t(() => v.as === "button"), S = t(() => v.disabled || v.loading), C = t(() => b({
53
- variant: v.variant,
54
- size: v.size,
65
+ }), b = t(() => _.as === "button"), x = t(() => _.disabled || _.loading), S = t(() => _.loading && _.hideIconWhileLoading), C = t(() => y({
66
+ variant: _.variant,
67
+ size: _.size,
55
68
  class: {
56
- "is-loading": v.loading,
57
- "is-disabled": S.value,
58
- "t-button--block": v.block,
59
- "t-button--align-start": v.align === "start",
60
- "t-button--align-end": v.align === "end"
69
+ "is-loading": _.loading,
70
+ "is-disabled": x.value,
71
+ "t-button--block": _.block,
72
+ "t-button--icon": _.iconOnly,
73
+ "t-button--align-start": _.align === "start",
74
+ "t-button--align-end": _.align === "end"
61
75
  }
62
76
  })), w = (e) => {
63
- if (S.value) {
77
+ if (x.value) {
64
78
  e.preventDefault(), e.stopPropagation();
65
79
  return;
66
80
  }
67
- y("click", e);
81
+ v("click", e);
68
82
  };
69
- return (t, p) => (l(), n(d(s.as), {
70
- type: x.value ? s.type : void 0,
71
- class: c(C.value),
72
- disabled: x.value ? S.value : void 0,
73
- "aria-disabled": !x.value && S.value ? "true" : void 0,
74
- "aria-busy": s.loading || void 0,
75
- tabindex: !x.value && S.value ? -1 : void 0,
83
+ return (t, f) => (c(), n(u(o.as), {
84
+ type: b.value ? o.type : void 0,
85
+ class: s(C.value),
86
+ disabled: b.value ? x.value : void 0,
87
+ "aria-disabled": !b.value && x.value ? "true" : void 0,
88
+ "aria-busy": o.loading || void 0,
89
+ "aria-label": o.label,
90
+ tabindex: !b.value && x.value ? -1 : void 0,
76
91
  onClick: w
77
92
  }, {
78
- default: f(() => [
79
- s.loading ? (l(), i("span", m, [o(e, {
93
+ default: d(() => [
94
+ o.loading ? (c(), i("span", p, [a(e, {
80
95
  size: "sm",
81
- label: "Loading"
82
- })])) : r("", !0),
83
- t.$slots.icon ? (l(), i("span", h, [u(t.$slots, "icon")])) : r("", !0),
84
- a("span", g, [u(t.$slots, "default")])
96
+ label: o.loadingLabel
97
+ }, null, 8, ["label"])])) : r("", !0),
98
+ t.$slots.icon && !S.value ? (c(), i("span", m, [l(t.$slots, "icon")])) : r("", !0),
99
+ o.iconOnly ? r("", !0) : (c(), i("span", h, [l(t.$slots, "default")]))
85
100
  ]),
86
101
  _: 3
87
102
  }, 8, [
@@ -90,11 +105,12 @@ var m = {
90
105
  "disabled",
91
106
  "aria-disabled",
92
107
  "aria-busy",
108
+ "aria-label",
93
109
  "tabindex"
94
110
  ]));
95
111
  }
96
112
  });
97
113
  //#endregion
98
- export { _ as default };
114
+ export { g as default };
99
115
 
100
116
  //# sourceMappingURL=TButton.vue_vue_type_script_setup_true_lang.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"TButton.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../src/components/TButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { tv } from '@treeui/utils';\nimport type { TSize, TVariant } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\nconst props = withDefaults(\n defineProps<{\n as?: string;\n variant?: TVariant | 'brand';\n size?: TSize;\n disabled?: boolean;\n loading?: boolean;\n type?: 'button' | 'submit' | 'reset';\n /** Stretch to the full width of the container. */\n block?: boolean;\n /** Content alignment — only meaningful together with `block`. */\n align?: 'start' | 'center' | 'end';\n }>(),\n {\n as: 'button',\n variant: 'solid',\n size: 'md',\n disabled: false,\n loading: false,\n type: 'button',\n block: false,\n align: 'center',\n },\n);\n\nconst emit = defineEmits<{\n click: [event: MouseEvent];\n}>();\n\nconst buttonClass = tv({\n base: 't-button',\n variants: {\n variant: {\n solid: 't-button--solid',\n outline: 't-button--outline',\n ghost: 't-button--ghost',\n soft: 't-button--soft',\n danger: 't-button--danger',\n brand: 't-button--brand',\n },\n size: {\n sm: 't-button--sm',\n md: 't-button--md',\n lg: 't-button--lg',\n },\n },\n});\n\nconst isNativeButton = computed(() => props.as === 'button');\nconst isDisabled = computed(() => props.disabled || props.loading);\nconst classes = computed(() =>\n buttonClass({\n variant: props.variant,\n size: props.size,\n class: {\n 'is-loading': props.loading,\n 'is-disabled': isDisabled.value,\n 't-button--block': props.block,\n 't-button--align-start': props.align === 'start',\n 't-button--align-end': props.align === 'end',\n },\n }),\n);\n\nconst onClick = (event: MouseEvent) => {\n if (isDisabled.value) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n emit('click', event);\n};\n</script>\n\n<template>\n <component\n :is=\"as\"\n :type=\"isNativeButton ? type : undefined\"\n :class=\"classes\"\n :disabled=\"isNativeButton ? isDisabled : undefined\"\n :aria-disabled=\"!isNativeButton && isDisabled ? 'true' : undefined\"\n :aria-busy=\"loading || undefined\"\n :tabindex=\"!isNativeButton && isDisabled ? -1 : undefined\"\n @click=\"onClick\"\n >\n <span\n v-if=\"loading\"\n class=\"t-button__spinner\"\n >\n <TSpinner\n size=\"sm\"\n label=\"Loading\"\n />\n </span>\n <span\n v-if=\"$slots.icon\"\n class=\"t-button__icon\"\n aria-hidden=\"true\"\n >\n <slot name=\"icon\" />\n </span>\n <span class=\"t-button__label\">\n <slot />\n </span>\n </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,IAAM,IAAQ,GAyBR,IAAO,GAIP,IAAc,EAAG;GACrB,MAAM;GACN,UAAU;IACR,SAAS;KACP,OAAO;KACP,SAAS;KACT,OAAO;KACP,MAAM;KACN,QAAQ;KACR,OAAO;IACT;IACA,MAAM;KACJ,IAAI;KACJ,IAAI;KACJ,IAAI;IACN;GACF;EACF,CAAC,GAEK,IAAiB,QAAe,EAAM,OAAO,QAAQ,GACrD,IAAa,QAAe,EAAM,YAAY,EAAM,OAAO,GAC3D,IAAU,QACd,EAAY;GACV,SAAS,EAAM;GACf,MAAM,EAAM;GACZ,OAAO;IACL,cAAc,EAAM;IACpB,eAAe,EAAW;IAC1B,mBAAmB,EAAM;IACzB,yBAAyB,EAAM,UAAU;IACzC,uBAAuB,EAAM,UAAU;GACzC;EACF,CAAC,CACH,GAEM,KAAW,MAAsB;GACrC,IAAI,EAAW,OAAO;IAEpB,AADA,EAAM,eAAe,GACrB,EAAM,gBAAgB;IACtB;GACF;GAEA,EAAK,SAAS,CAAK;EACrB;yBAIE,EA6BY,EA5BL,EAAA,EAAE,GAAA;GACN,MAAM,EAAA,QAAiB,EAAA,OAAO,KAAA;GAC9B,OAAK,EAAE,EAAA,KAAO;GACd,UAAU,EAAA,QAAiB,EAAA,QAAa,KAAA;GACxC,iBAAa,CAAG,EAAA,SAAkB,EAAA,QAAU,SAAY,KAAA;GACxD,aAAW,EAAA,WAAW,KAAA;GACtB,UAAQ,CAAG,EAAA,SAAkB,EAAA,QAAU,KAAQ,KAAA;GACxC;;oBAUD;IAPC,EAAA,WAAA,EAAA,GADR,EAQO,QARP,GAQO,CAJL,EAGE,GAAA;KAFA,MAAK;KACL,OAAM;;IAIFA,EAAAA,OAAO,QAAA,EAAA,GADf,EAMO,QANP,GAMO,CADL,EAAoB,EAAA,QAAA,MAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;IAEtB,EAEO,QAFP,GAEO,CADL,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA"}
1
+ {"version":3,"file":"TButton.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../src/components/TButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { tv } from '@treeui/utils';\nimport type { TSize, TVariant } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\nconst props = withDefaults(\n defineProps<{\n as?: string;\n variant?: TVariant | 'brand';\n size?: TSize;\n disabled?: boolean;\n loading?: boolean;\n /**\n * Accessible announcement while `loading`, forwarded to the spinner.\n * The default is English; pass the active locale's string to localize it.\n */\n loadingLabel?: string;\n /**\n * While `loading`, hide the `icon` slot so the spinner replaces the icon\n * instead of rendering beside it. Set to `false` to keep both visible.\n */\n hideIconWhileLoading?: boolean;\n /**\n * Square, icon-only button. The visible label is dropped, so an accessible\n * name is required — pass `label` (or `aria-label`).\n */\n iconOnly?: boolean;\n /** Accessible name, rendered as `aria-label`. Required when `iconOnly`. */\n label?: string;\n type?: 'button' | 'submit' | 'reset';\n /** Stretch to the full width of the container. */\n block?: boolean;\n /** Content alignment — only meaningful together with `block`. */\n align?: 'start' | 'center' | 'end';\n }>(),\n {\n as: 'button',\n variant: 'solid',\n size: 'md',\n disabled: false,\n loading: false,\n loadingLabel: 'Loading',\n hideIconWhileLoading: true,\n iconOnly: false,\n label: undefined,\n type: 'button',\n block: false,\n align: 'center',\n },\n);\n\nconst emit = defineEmits<{\n click: [event: MouseEvent];\n}>();\n\nconst buttonClass = tv({\n base: 't-button',\n variants: {\n variant: {\n solid: 't-button--solid',\n outline: 't-button--outline',\n ghost: 't-button--ghost',\n soft: 't-button--soft',\n danger: 't-button--danger',\n brand: 't-button--brand',\n },\n size: {\n sm: 't-button--sm',\n md: 't-button--md',\n lg: 't-button--lg',\n },\n },\n});\n\nconst isNativeButton = computed(() => props.as === 'button');\nconst isDisabled = computed(() => props.disabled || props.loading);\n\n// The spinner takes the icon's leading position, so rendering both would show\n// two glyphs and widen the button mid-action.\nconst isIconHidden = computed(() => props.loading && props.hideIconWhileLoading);\n\nconst classes = computed(() =>\n buttonClass({\n variant: props.variant,\n size: props.size,\n class: {\n 'is-loading': props.loading,\n 'is-disabled': isDisabled.value,\n 't-button--block': props.block,\n 't-button--icon': props.iconOnly,\n 't-button--align-start': props.align === 'start',\n 't-button--align-end': props.align === 'end',\n },\n }),\n);\n\nconst onClick = (event: MouseEvent) => {\n if (isDisabled.value) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n emit('click', event);\n};\n</script>\n\n<template>\n <component\n :is=\"as\"\n :type=\"isNativeButton ? type : undefined\"\n :class=\"classes\"\n :disabled=\"isNativeButton ? isDisabled : undefined\"\n :aria-disabled=\"!isNativeButton && isDisabled ? 'true' : undefined\"\n :aria-busy=\"loading || undefined\"\n :aria-label=\"label\"\n :tabindex=\"!isNativeButton && isDisabled ? -1 : undefined\"\n @click=\"onClick\"\n >\n <span\n v-if=\"loading\"\n class=\"t-button__spinner\"\n >\n <TSpinner\n size=\"sm\"\n :label=\"loadingLabel\"\n />\n </span>\n <span\n v-if=\"$slots.icon && !isIconHidden\"\n class=\"t-button__icon\"\n aria-hidden=\"true\"\n >\n <slot name=\"icon\" />\n </span>\n <span\n v-if=\"!iconOnly\"\n class=\"t-button__label\"\n >\n <slot />\n </span>\n </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,IAAM,IAAQ,GA8CR,IAAO,GAIP,IAAc,EAAG;GACrB,MAAM;GACN,UAAU;IACR,SAAS;KACP,OAAO;KACP,SAAS;KACT,OAAO;KACP,MAAM;KACN,QAAQ;KACR,OAAO;IACT;IACA,MAAM;KACJ,IAAI;KACJ,IAAI;KACJ,IAAI;IACN;GACF;EACF,CAAC,GAEK,IAAiB,QAAe,EAAM,OAAO,QAAQ,GACrD,IAAa,QAAe,EAAM,YAAY,EAAM,OAAO,GAI3D,IAAe,QAAe,EAAM,WAAW,EAAM,oBAAoB,GAEzE,IAAU,QACd,EAAY;GACV,SAAS,EAAM;GACf,MAAM,EAAM;GACZ,OAAO;IACL,cAAc,EAAM;IACpB,eAAe,EAAW;IAC1B,mBAAmB,EAAM;IACzB,kBAAkB,EAAM;IACxB,yBAAyB,EAAM,UAAU;IACzC,uBAAuB,EAAM,UAAU;GACzC;EACF,CAAC,CACH,GAEM,KAAW,MAAsB;GACrC,IAAI,EAAW,OAAO;IAEpB,AADA,EAAM,eAAe,GACrB,EAAM,gBAAgB;IACtB;GACF;GAEA,EAAK,SAAS,CAAK;EACrB;yBAIE,EAiCY,EAhCL,EAAA,EAAE,GAAA;GACN,MAAM,EAAA,QAAiB,EAAA,OAAO,KAAA;GAC9B,OAAK,EAAE,EAAA,KAAO;GACd,UAAU,EAAA,QAAiB,EAAA,QAAa,KAAA;GACxC,iBAAa,CAAG,EAAA,SAAkB,EAAA,QAAU,SAAY,KAAA;GACxD,aAAW,EAAA,WAAW,KAAA;GACtB,cAAY,EAAA;GACZ,UAAQ,CAAG,EAAA,SAAkB,EAAA,QAAU,KAAQ,KAAA;GACxC;;oBAUD;IAPC,EAAA,WAAA,EAAA,GADR,EAQO,QARP,GAQO,CAJL,EAGE,GAAA;KAFA,MAAK;KACJ,OAAO,EAAA;;IAIJA,EAAAA,OAAO,QAAI,CAAK,EAAA,SAAA,EAAA,GADxB,EAMO,QANP,GAMO,CADL,EAAoB,EAAA,QAAA,MAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;IAGb,EAAA,WAGC,EAAA,IAAA,EAAA,KAHD,EAAA,GADT,EAKO,QALP,GAKO,CADL,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"TDatePicker.cjs","names":[],"sources":["../../src/components/TDatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n addDays,\n addMonths,\n createId,\n isActivationKey,\n isEscapeKey,\n isSameDay,\n parseDateValue,\n startOfDay,\n startOfMonth,\n startOfWeek,\n toDateValue,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n type ComponentPublicInstance,\n computed,\n nextTick,\n onBeforeUnmount,\n ref,\n toRef,\n useAttrs,\n watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\ninterface CalendarCell {\n date: Date;\n dayLabel: number;\n disabled: boolean;\n inMonth: boolean;\n isFocused: boolean;\n isSelected: boolean;\n isToday: boolean;\n key: string;\n}\n\nconst CalendarIcon = getTreeIcon('calendar');\nconst ChevronLeftIcon = getTreeIcon('chevron-left');\nconst ChevronRightIcon = getTreeIcon('chevron-right');\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: string;\n open?: boolean;\n defaultOpen?: boolean;\n size?: TSize;\n disabled?: boolean;\n invalid?: boolean;\n placeholder?: string;\n locale?: string;\n min?: string;\n max?: string;\n weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n id?: string;\n }>(),\n {\n modelValue: '',\n open: undefined,\n defaultOpen: false,\n size: 'md',\n disabled: false,\n invalid: false,\n placeholder: 'Select date',\n locale: 'en-US',\n min: '',\n max: '',\n weekStartsOn: 0,\n id: undefined,\n },\n);\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string];\n 'update:open': [value: boolean];\n 'open-change': [value: boolean];\n select: [value: string];\n}>();\n\nconst attrs = useAttrs();\nconst today = startOfDay(new Date());\nconst selectedDate = computed(() => parseDateValue(props.modelValue));\nconst minDate = computed(() => parseDateValue(props.min));\nconst maxDate = computed(() => parseDateValue(props.max));\nconst calendarId = props.id ?? createId('t-date-picker');\nconst captionId = `${calendarId}-caption`;\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLButtonElement | null>(null);\nconst dayRefs = new Map<string, HTMLButtonElement>();\nconst viewMonth = ref(startOfMonth(selectedDate.value ?? today));\nconst focusedDate = ref<Date>(selectedDate.value ?? today);\n\nconst triggerAttrs = computed(() => {\n const { class: _class, style: _style, name: _name, ...rest } = attrs;\n return rest;\n});\n\nconst hiddenInputName = computed(() =>\n typeof attrs.name === 'string' ? attrs.name : undefined,\n);\n\nconst rootClasses = computed(() => [\n 't-date-picker',\n `t-date-picker--${props.size}`,\n {\n 'is-disabled': props.disabled,\n 'is-invalid': props.invalid,\n 'is-open': isOpen.value,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst { value: isOpen, setValue } = useControllableOpen(\n toRef(props, 'open'),\n props.defaultOpen,\n (value) => {\n emit('update:open', value);\n emit('open-change', value);\n },\n);\n\nconst triggerText = computed(() => {\n if (!selectedDate.value) {\n return props.placeholder;\n }\n\n return new Intl.DateTimeFormat(props.locale, {\n day: 'numeric',\n month: 'long',\n year: 'numeric',\n }).format(selectedDate.value);\n});\n\nconst monthLabel = computed(() =>\n new Intl.DateTimeFormat(props.locale, {\n month: 'long',\n year: 'numeric',\n }).format(viewMonth.value),\n);\n\nconst weekdayLabels = computed(() => {\n const formatter = new Intl.DateTimeFormat(props.locale, { weekday: 'short' });\n const weekBase = startOfWeek(new Date(2024, 0, 7), props.weekStartsOn);\n\n return Array.from({ length: 7 }, (_, index) =>\n formatter.format(addDays(weekBase, index)),\n );\n});\n\nconst isDateDisabled = (date: Date) => {\n if (props.disabled) {\n return true;\n }\n\n if (minDate.value && date < minDate.value) {\n return true;\n }\n\n if (maxDate.value && date > maxDate.value) {\n return true;\n }\n\n return false;\n};\n\nconst syncCalendarView = (date: Date) => {\n focusedDate.value = startOfDay(date);\n viewMonth.value = startOfMonth(date);\n};\n\nwatch(\n selectedDate,\n (value) => {\n if (value) {\n syncCalendarView(value);\n return;\n }\n\n if (!isOpen.value) {\n syncCalendarView(today);\n }\n },\n { immediate: true },\n);\n\nconst cells = computed(() => {\n const startDate = startOfWeek(startOfMonth(viewMonth.value), props.weekStartsOn);\n\n return Array.from({ length: 6 }, (_, weekIndex) =>\n Array.from({ length: 7 }, (_, dayIndex) => {\n const date = addDays(startDate, weekIndex * 7 + dayIndex);\n const key = toDateValue(date);\n\n return {\n date,\n dayLabel: date.getDate(),\n disabled: isDateDisabled(date),\n inMonth: date.getMonth() === viewMonth.value.getMonth(),\n isFocused: isSameDay(date, focusedDate.value),\n isSelected: isSameDay(date, selectedDate.value),\n isToday: isSameDay(date, today),\n key,\n } satisfies CalendarCell;\n }),\n );\n});\n\nconst canMovePrev = computed(() => {\n if (!minDate.value) {\n return true;\n }\n\n return startOfMonth(viewMonth.value) > startOfMonth(minDate.value);\n});\n\nconst canMoveNext = computed(() => {\n if (!maxDate.value) {\n return true;\n }\n\n return startOfMonth(viewMonth.value) < startOfMonth(maxDate.value);\n});\n\nconst focusCurrentDay = () => {\n const key = toDateValue(focusedDate.value);\n nextTick(() => {\n dayRefs.get(key)?.focus();\n });\n};\n\nconst setDayRef = (\n element: Element | ComponentPublicInstance | null,\n key: string,\n) => {\n if (element instanceof HTMLButtonElement) {\n dayRefs.set(key, element);\n return;\n }\n\n dayRefs.delete(key);\n};\n\nconst openCalendar = () => {\n if (props.disabled) {\n return;\n }\n\n syncCalendarView(selectedDate.value ?? focusedDate.value ?? today);\n setValue(true);\n focusCurrentDay();\n};\n\nconst closeCalendar = (restoreFocus = false) => {\n setValue(false);\n\n if (restoreFocus) {\n nextTick(() => {\n triggerRef.value?.focus();\n });\n }\n};\n\nconst toggleCalendar = () => {\n if (isOpen.value) {\n closeCalendar();\n return;\n }\n\n openCalendar();\n};\n\nconst moveCalendar = (direction: 1 | -1) => {\n const nextMonth = addMonths(viewMonth.value, direction);\n syncCalendarView(nextMonth);\n focusCurrentDay();\n};\n\nconst moveFocus = (nextDate: Date) => {\n if (isDateDisabled(nextDate)) {\n return;\n }\n\n syncCalendarView(nextDate);\n focusCurrentDay();\n};\n\nconst selectDate = (date: Date) => {\n if (isDateDisabled(date)) {\n return;\n }\n\n const normalizedDate = startOfDay(date);\n const value = toDateValue(normalizedDate);\n\n syncCalendarView(normalizedDate);\n emit('update:modelValue', value);\n emit('select', value);\n closeCalendar(true);\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n if (props.disabled) {\n return;\n }\n\n if (isEscapeKey(event) && isOpen.value) {\n event.preventDefault();\n closeCalendar();\n return;\n }\n\n if (\n isActivationKey(event) ||\n event.key === 'ArrowDown' ||\n event.key === 'ArrowUp'\n ) {\n event.preventDefault();\n openCalendar();\n }\n};\n\nconst onDayKeydown = (event: KeyboardEvent, date: Date) => {\n if (isEscapeKey(event)) {\n event.preventDefault();\n closeCalendar(true);\n return;\n }\n\n if (isActivationKey(event)) {\n event.preventDefault();\n selectDate(date);\n return;\n }\n\n switch (event.key) {\n case 'ArrowLeft':\n event.preventDefault();\n moveFocus(addDays(date, -1));\n break;\n case 'ArrowRight':\n event.preventDefault();\n moveFocus(addDays(date, 1));\n break;\n case 'ArrowUp':\n event.preventDefault();\n moveFocus(addDays(date, -7));\n break;\n case 'ArrowDown':\n event.preventDefault();\n moveFocus(addDays(date, 7));\n break;\n case 'Home':\n event.preventDefault();\n moveFocus(startOfWeek(date, props.weekStartsOn));\n break;\n case 'End':\n event.preventDefault();\n moveFocus(addDays(startOfWeek(date, props.weekStartsOn), 6));\n break;\n case 'PageUp':\n event.preventDefault();\n moveFocus(addMonths(date, event.shiftKey ? -12 : -1));\n break;\n case 'PageDown':\n event.preventDefault();\n moveFocus(addMonths(date, event.shiftKey ? 12 : 1));\n break;\n default:\n break;\n }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n if (!isOpen.value) {\n return;\n }\n\n const target = event.target;\n if (!(target instanceof Node)) {\n return;\n }\n\n if (rootRef.value?.contains(target)) {\n return;\n }\n\n closeCalendar();\n};\n\nwatch(isOpen, (value) => {\n if (value) {\n document.addEventListener('pointerdown', onDocumentPointerDown);\n return;\n }\n\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n\nonBeforeUnmount(() => {\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n <div\n ref=\"rootRef\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n :data-state=\"isOpen ? 'open' : 'closed'\"\n >\n <input\n v-if=\"hiddenInputName\"\n type=\"hidden\"\n :name=\"hiddenInputName\"\n :value=\"modelValue\"\n >\n <button\n ref=\"triggerRef\"\n v-bind=\"triggerAttrs\"\n type=\"button\"\n class=\"t-date-picker__trigger\"\n :disabled=\"disabled\"\n :aria-controls=\"isOpen ? calendarId : undefined\"\n aria-haspopup=\"dialog\"\n :aria-expanded=\"isOpen\"\n :aria-invalid=\"invalid || undefined\"\n @click=\"toggleCalendar\"\n @keydown=\"onTriggerKeydown\"\n >\n <span\n v-if=\"$slots.prefix\"\n class=\"t-date-picker__slot t-date-picker__slot--prefix\"\n >\n <slot name=\"prefix\" />\n </span>\n <span\n class=\"t-date-picker__value\"\n :data-placeholder=\"selectedDate ? undefined : true\"\n >\n {{ triggerText }}\n </span>\n <span class=\"t-date-picker__slot t-date-picker__slot--suffix\">\n <slot name=\"suffix\">\n <CalendarIcon v-bind=\"treeIconDefaults\" />\n </slot>\n </span>\n </button>\n\n <transition name=\"t-fade\">\n <div\n v-if=\"isOpen && !disabled\"\n :id=\"calendarId\"\n class=\"t-date-picker__content\"\n role=\"dialog\"\n aria-modal=\"false\"\n :aria-labelledby=\"captionId\"\n >\n <div class=\"t-date-picker__header\">\n <button\n type=\"button\"\n class=\"t-date-picker__nav\"\n :disabled=\"!canMovePrev\"\n aria-label=\"Previous month\"\n @click=\"moveCalendar(-1)\"\n >\n <ChevronLeftIcon v-bind=\"treeIconDefaults\" />\n </button>\n <p\n :id=\"captionId\"\n class=\"t-date-picker__month\"\n >\n {{ monthLabel }}\n </p>\n <button\n type=\"button\"\n class=\"t-date-picker__nav\"\n :disabled=\"!canMoveNext\"\n aria-label=\"Next month\"\n @click=\"moveCalendar(1)\"\n >\n <ChevronRightIcon v-bind=\"treeIconDefaults\" />\n </button>\n </div>\n\n <div\n class=\"t-date-picker__weekdays\"\n aria-hidden=\"true\"\n >\n <span\n v-for=\"label in weekdayLabels\"\n :key=\"label\"\n class=\"t-date-picker__weekday\"\n >\n {{ label }}\n </span>\n </div>\n\n <div\n class=\"t-date-picker__grid\"\n role=\"grid\"\n :aria-labelledby=\"captionId\"\n >\n <div\n v-for=\"(week, weekIndex) in cells\"\n :key=\"weekIndex\"\n class=\"t-date-picker__row\"\n role=\"row\"\n >\n <div\n v-for=\"cell in week\"\n :key=\"cell.key\"\n class=\"t-date-picker__cell\"\n role=\"gridcell\"\n :aria-selected=\"cell.isSelected\"\n >\n <button\n :ref=\"(element) => setDayRef(element, cell.key)\"\n type=\"button\"\n class=\"t-date-picker__day\"\n :class=\"{\n 'is-muted': !cell.inMonth,\n 'is-selected': cell.isSelected,\n 'is-today': cell.isToday,\n }\"\n :data-date=\"cell.key\"\n :disabled=\"cell.disabled\"\n :tabindex=\"cell.isFocused ? 0 : -1\"\n :aria-current=\"cell.isToday ? 'date' : undefined\"\n :aria-label=\"cell.key\"\n @click=\"selectDate(cell.date)\"\n @keydown=\"onDayKeydown($event, cell.date)\"\n >\n {{ cell.dayLabel }}\n </button>\n </div>\n </div>\n </div>\n </div>\n </transition>\n </div>\n</template>\n"],"mappings":""}
1
+ {"version":3,"file":"TDatePicker.cjs","names":[],"sources":["../../src/components/TDatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n addDays,\n addMonths,\n createId,\n isActivationKey,\n isEscapeKey,\n isSameDay,\n parseDateValue,\n startOfDay,\n startOfMonth,\n startOfWeek,\n toDateValue,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n type ComponentPublicInstance,\n computed,\n nextTick,\n onBeforeUnmount,\n ref,\n toRef,\n useAttrs,\n watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\ninterface CalendarCell {\n date: Date;\n dayLabel: number;\n disabled: boolean;\n inMonth: boolean;\n isFocused: boolean;\n isSelected: boolean;\n isToday: boolean;\n key: string;\n}\n\nconst CalendarIcon = computed(() => getTreeIcon('calendar'));\nconst ChevronLeftIcon = computed(() => getTreeIcon('chevron-left'));\nconst ChevronRightIcon = computed(() => getTreeIcon('chevron-right'));\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: string;\n open?: boolean;\n defaultOpen?: boolean;\n size?: TSize;\n disabled?: boolean;\n invalid?: boolean;\n placeholder?: string;\n locale?: string;\n min?: string;\n max?: string;\n weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n id?: string;\n }>(),\n {\n modelValue: '',\n open: undefined,\n defaultOpen: false,\n size: 'md',\n disabled: false,\n invalid: false,\n placeholder: 'Select date',\n locale: 'en-US',\n min: '',\n max: '',\n weekStartsOn: 0,\n id: undefined,\n },\n);\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string];\n 'update:open': [value: boolean];\n 'open-change': [value: boolean];\n select: [value: string];\n}>();\n\nconst attrs = useAttrs();\nconst today = startOfDay(new Date());\nconst selectedDate = computed(() => parseDateValue(props.modelValue));\nconst minDate = computed(() => parseDateValue(props.min));\nconst maxDate = computed(() => parseDateValue(props.max));\nconst calendarId = props.id ?? createId('t-date-picker');\nconst captionId = `${calendarId}-caption`;\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLButtonElement | null>(null);\nconst dayRefs = new Map<string, HTMLButtonElement>();\nconst viewMonth = ref(startOfMonth(selectedDate.value ?? today));\nconst focusedDate = ref<Date>(selectedDate.value ?? today);\n\nconst triggerAttrs = computed(() => {\n const { class: _class, style: _style, name: _name, ...rest } = attrs;\n return rest;\n});\n\nconst hiddenInputName = computed(() =>\n typeof attrs.name === 'string' ? attrs.name : undefined,\n);\n\nconst rootClasses = computed(() => [\n 't-date-picker',\n `t-date-picker--${props.size}`,\n {\n 'is-disabled': props.disabled,\n 'is-invalid': props.invalid,\n 'is-open': isOpen.value,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst { value: isOpen, setValue } = useControllableOpen(\n toRef(props, 'open'),\n props.defaultOpen,\n (value) => {\n emit('update:open', value);\n emit('open-change', value);\n },\n);\n\nconst triggerText = computed(() => {\n if (!selectedDate.value) {\n return props.placeholder;\n }\n\n return new Intl.DateTimeFormat(props.locale, {\n day: 'numeric',\n month: 'long',\n year: 'numeric',\n }).format(selectedDate.value);\n});\n\nconst monthLabel = computed(() =>\n new Intl.DateTimeFormat(props.locale, {\n month: 'long',\n year: 'numeric',\n }).format(viewMonth.value),\n);\n\nconst weekdayLabels = computed(() => {\n const formatter = new Intl.DateTimeFormat(props.locale, { weekday: 'short' });\n const weekBase = startOfWeek(new Date(2024, 0, 7), props.weekStartsOn);\n\n return Array.from({ length: 7 }, (_, index) =>\n formatter.format(addDays(weekBase, index)),\n );\n});\n\nconst isDateDisabled = (date: Date) => {\n if (props.disabled) {\n return true;\n }\n\n if (minDate.value && date < minDate.value) {\n return true;\n }\n\n if (maxDate.value && date > maxDate.value) {\n return true;\n }\n\n return false;\n};\n\nconst syncCalendarView = (date: Date) => {\n focusedDate.value = startOfDay(date);\n viewMonth.value = startOfMonth(date);\n};\n\nwatch(\n selectedDate,\n (value) => {\n if (value) {\n syncCalendarView(value);\n return;\n }\n\n if (!isOpen.value) {\n syncCalendarView(today);\n }\n },\n { immediate: true },\n);\n\nconst cells = computed(() => {\n const startDate = startOfWeek(startOfMonth(viewMonth.value), props.weekStartsOn);\n\n return Array.from({ length: 6 }, (_, weekIndex) =>\n Array.from({ length: 7 }, (_, dayIndex) => {\n const date = addDays(startDate, weekIndex * 7 + dayIndex);\n const key = toDateValue(date);\n\n return {\n date,\n dayLabel: date.getDate(),\n disabled: isDateDisabled(date),\n inMonth: date.getMonth() === viewMonth.value.getMonth(),\n isFocused: isSameDay(date, focusedDate.value),\n isSelected: isSameDay(date, selectedDate.value),\n isToday: isSameDay(date, today),\n key,\n } satisfies CalendarCell;\n }),\n );\n});\n\nconst canMovePrev = computed(() => {\n if (!minDate.value) {\n return true;\n }\n\n return startOfMonth(viewMonth.value) > startOfMonth(minDate.value);\n});\n\nconst canMoveNext = computed(() => {\n if (!maxDate.value) {\n return true;\n }\n\n return startOfMonth(viewMonth.value) < startOfMonth(maxDate.value);\n});\n\nconst focusCurrentDay = () => {\n const key = toDateValue(focusedDate.value);\n nextTick(() => {\n dayRefs.get(key)?.focus();\n });\n};\n\nconst setDayRef = (\n element: Element | ComponentPublicInstance | null,\n key: string,\n) => {\n if (element instanceof HTMLButtonElement) {\n dayRefs.set(key, element);\n return;\n }\n\n dayRefs.delete(key);\n};\n\nconst openCalendar = () => {\n if (props.disabled) {\n return;\n }\n\n syncCalendarView(selectedDate.value ?? focusedDate.value ?? today);\n setValue(true);\n focusCurrentDay();\n};\n\nconst closeCalendar = (restoreFocus = false) => {\n setValue(false);\n\n if (restoreFocus) {\n nextTick(() => {\n triggerRef.value?.focus();\n });\n }\n};\n\nconst toggleCalendar = () => {\n if (isOpen.value) {\n closeCalendar();\n return;\n }\n\n openCalendar();\n};\n\nconst moveCalendar = (direction: 1 | -1) => {\n const nextMonth = addMonths(viewMonth.value, direction);\n syncCalendarView(nextMonth);\n focusCurrentDay();\n};\n\nconst moveFocus = (nextDate: Date) => {\n if (isDateDisabled(nextDate)) {\n return;\n }\n\n syncCalendarView(nextDate);\n focusCurrentDay();\n};\n\nconst selectDate = (date: Date) => {\n if (isDateDisabled(date)) {\n return;\n }\n\n const normalizedDate = startOfDay(date);\n const value = toDateValue(normalizedDate);\n\n syncCalendarView(normalizedDate);\n emit('update:modelValue', value);\n emit('select', value);\n closeCalendar(true);\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n if (props.disabled) {\n return;\n }\n\n if (isEscapeKey(event) && isOpen.value) {\n event.preventDefault();\n closeCalendar();\n return;\n }\n\n if (\n isActivationKey(event) ||\n event.key === 'ArrowDown' ||\n event.key === 'ArrowUp'\n ) {\n event.preventDefault();\n openCalendar();\n }\n};\n\nconst onDayKeydown = (event: KeyboardEvent, date: Date) => {\n if (isEscapeKey(event)) {\n event.preventDefault();\n closeCalendar(true);\n return;\n }\n\n if (isActivationKey(event)) {\n event.preventDefault();\n selectDate(date);\n return;\n }\n\n switch (event.key) {\n case 'ArrowLeft':\n event.preventDefault();\n moveFocus(addDays(date, -1));\n break;\n case 'ArrowRight':\n event.preventDefault();\n moveFocus(addDays(date, 1));\n break;\n case 'ArrowUp':\n event.preventDefault();\n moveFocus(addDays(date, -7));\n break;\n case 'ArrowDown':\n event.preventDefault();\n moveFocus(addDays(date, 7));\n break;\n case 'Home':\n event.preventDefault();\n moveFocus(startOfWeek(date, props.weekStartsOn));\n break;\n case 'End':\n event.preventDefault();\n moveFocus(addDays(startOfWeek(date, props.weekStartsOn), 6));\n break;\n case 'PageUp':\n event.preventDefault();\n moveFocus(addMonths(date, event.shiftKey ? -12 : -1));\n break;\n case 'PageDown':\n event.preventDefault();\n moveFocus(addMonths(date, event.shiftKey ? 12 : 1));\n break;\n default:\n break;\n }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n if (!isOpen.value) {\n return;\n }\n\n const target = event.target;\n if (!(target instanceof Node)) {\n return;\n }\n\n if (rootRef.value?.contains(target)) {\n return;\n }\n\n closeCalendar();\n};\n\nwatch(isOpen, (value) => {\n if (value) {\n document.addEventListener('pointerdown', onDocumentPointerDown);\n return;\n }\n\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n\nonBeforeUnmount(() => {\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n <div\n ref=\"rootRef\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n :data-state=\"isOpen ? 'open' : 'closed'\"\n >\n <input\n v-if=\"hiddenInputName\"\n type=\"hidden\"\n :name=\"hiddenInputName\"\n :value=\"modelValue\"\n >\n <button\n ref=\"triggerRef\"\n v-bind=\"triggerAttrs\"\n type=\"button\"\n class=\"t-date-picker__trigger\"\n :disabled=\"disabled\"\n :aria-controls=\"isOpen ? calendarId : undefined\"\n aria-haspopup=\"dialog\"\n :aria-expanded=\"isOpen\"\n :aria-invalid=\"invalid || undefined\"\n @click=\"toggleCalendar\"\n @keydown=\"onTriggerKeydown\"\n >\n <span\n v-if=\"$slots.prefix\"\n class=\"t-date-picker__slot t-date-picker__slot--prefix\"\n >\n <slot name=\"prefix\" />\n </span>\n <span\n class=\"t-date-picker__value\"\n :data-placeholder=\"selectedDate ? undefined : true\"\n >\n {{ triggerText }}\n </span>\n <span class=\"t-date-picker__slot t-date-picker__slot--suffix\">\n <slot name=\"suffix\">\n <CalendarIcon v-bind=\"treeIconDefaults\" />\n </slot>\n </span>\n </button>\n\n <transition name=\"t-fade\">\n <div\n v-if=\"isOpen && !disabled\"\n :id=\"calendarId\"\n class=\"t-date-picker__content\"\n role=\"dialog\"\n aria-modal=\"false\"\n :aria-labelledby=\"captionId\"\n >\n <div class=\"t-date-picker__header\">\n <button\n type=\"button\"\n class=\"t-date-picker__nav\"\n :disabled=\"!canMovePrev\"\n aria-label=\"Previous month\"\n @click=\"moveCalendar(-1)\"\n >\n <ChevronLeftIcon v-bind=\"treeIconDefaults\" />\n </button>\n <p\n :id=\"captionId\"\n class=\"t-date-picker__month\"\n >\n {{ monthLabel }}\n </p>\n <button\n type=\"button\"\n class=\"t-date-picker__nav\"\n :disabled=\"!canMoveNext\"\n aria-label=\"Next month\"\n @click=\"moveCalendar(1)\"\n >\n <ChevronRightIcon v-bind=\"treeIconDefaults\" />\n </button>\n </div>\n\n <div\n class=\"t-date-picker__weekdays\"\n aria-hidden=\"true\"\n >\n <span\n v-for=\"label in weekdayLabels\"\n :key=\"label\"\n class=\"t-date-picker__weekday\"\n >\n {{ label }}\n </span>\n </div>\n\n <div\n class=\"t-date-picker__grid\"\n role=\"grid\"\n :aria-labelledby=\"captionId\"\n >\n <div\n v-for=\"(week, weekIndex) in cells\"\n :key=\"weekIndex\"\n class=\"t-date-picker__row\"\n role=\"row\"\n >\n <div\n v-for=\"cell in week\"\n :key=\"cell.key\"\n class=\"t-date-picker__cell\"\n role=\"gridcell\"\n :aria-selected=\"cell.isSelected\"\n >\n <button\n :ref=\"(element) => setDayRef(element, cell.key)\"\n type=\"button\"\n class=\"t-date-picker__day\"\n :class=\"{\n 'is-muted': !cell.inMonth,\n 'is-selected': cell.isSelected,\n 'is-today': cell.isToday,\n }\"\n :data-date=\"cell.key\"\n :disabled=\"cell.disabled\"\n :tabindex=\"cell.isFocused ? 0 : -1\"\n :aria-current=\"cell.isToday ? 'date' : undefined\"\n :aria-label=\"cell.key\"\n @click=\"selectDate(cell.date)\"\n @keydown=\"onDayKeydown($event, cell.date)\"\n >\n {{ cell.dayLabel }}\n </button>\n </div>\n </div>\n </div>\n </div>\n </transition>\n </div>\n</template>\n"],"mappings":""}
@@ -1 +1 @@
1
- {"version":3,"file":"TDatePicker.js","names":[],"sources":["../../src/components/TDatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n addDays,\n addMonths,\n createId,\n isActivationKey,\n isEscapeKey,\n isSameDay,\n parseDateValue,\n startOfDay,\n startOfMonth,\n startOfWeek,\n toDateValue,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n type ComponentPublicInstance,\n computed,\n nextTick,\n onBeforeUnmount,\n ref,\n toRef,\n useAttrs,\n watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\ninterface CalendarCell {\n date: Date;\n dayLabel: number;\n disabled: boolean;\n inMonth: boolean;\n isFocused: boolean;\n isSelected: boolean;\n isToday: boolean;\n key: string;\n}\n\nconst CalendarIcon = getTreeIcon('calendar');\nconst ChevronLeftIcon = getTreeIcon('chevron-left');\nconst ChevronRightIcon = getTreeIcon('chevron-right');\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: string;\n open?: boolean;\n defaultOpen?: boolean;\n size?: TSize;\n disabled?: boolean;\n invalid?: boolean;\n placeholder?: string;\n locale?: string;\n min?: string;\n max?: string;\n weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n id?: string;\n }>(),\n {\n modelValue: '',\n open: undefined,\n defaultOpen: false,\n size: 'md',\n disabled: false,\n invalid: false,\n placeholder: 'Select date',\n locale: 'en-US',\n min: '',\n max: '',\n weekStartsOn: 0,\n id: undefined,\n },\n);\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string];\n 'update:open': [value: boolean];\n 'open-change': [value: boolean];\n select: [value: string];\n}>();\n\nconst attrs = useAttrs();\nconst today = startOfDay(new Date());\nconst selectedDate = computed(() => parseDateValue(props.modelValue));\nconst minDate = computed(() => parseDateValue(props.min));\nconst maxDate = computed(() => parseDateValue(props.max));\nconst calendarId = props.id ?? createId('t-date-picker');\nconst captionId = `${calendarId}-caption`;\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLButtonElement | null>(null);\nconst dayRefs = new Map<string, HTMLButtonElement>();\nconst viewMonth = ref(startOfMonth(selectedDate.value ?? today));\nconst focusedDate = ref<Date>(selectedDate.value ?? today);\n\nconst triggerAttrs = computed(() => {\n const { class: _class, style: _style, name: _name, ...rest } = attrs;\n return rest;\n});\n\nconst hiddenInputName = computed(() =>\n typeof attrs.name === 'string' ? attrs.name : undefined,\n);\n\nconst rootClasses = computed(() => [\n 't-date-picker',\n `t-date-picker--${props.size}`,\n {\n 'is-disabled': props.disabled,\n 'is-invalid': props.invalid,\n 'is-open': isOpen.value,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst { value: isOpen, setValue } = useControllableOpen(\n toRef(props, 'open'),\n props.defaultOpen,\n (value) => {\n emit('update:open', value);\n emit('open-change', value);\n },\n);\n\nconst triggerText = computed(() => {\n if (!selectedDate.value) {\n return props.placeholder;\n }\n\n return new Intl.DateTimeFormat(props.locale, {\n day: 'numeric',\n month: 'long',\n year: 'numeric',\n }).format(selectedDate.value);\n});\n\nconst monthLabel = computed(() =>\n new Intl.DateTimeFormat(props.locale, {\n month: 'long',\n year: 'numeric',\n }).format(viewMonth.value),\n);\n\nconst weekdayLabels = computed(() => {\n const formatter = new Intl.DateTimeFormat(props.locale, { weekday: 'short' });\n const weekBase = startOfWeek(new Date(2024, 0, 7), props.weekStartsOn);\n\n return Array.from({ length: 7 }, (_, index) =>\n formatter.format(addDays(weekBase, index)),\n );\n});\n\nconst isDateDisabled = (date: Date) => {\n if (props.disabled) {\n return true;\n }\n\n if (minDate.value && date < minDate.value) {\n return true;\n }\n\n if (maxDate.value && date > maxDate.value) {\n return true;\n }\n\n return false;\n};\n\nconst syncCalendarView = (date: Date) => {\n focusedDate.value = startOfDay(date);\n viewMonth.value = startOfMonth(date);\n};\n\nwatch(\n selectedDate,\n (value) => {\n if (value) {\n syncCalendarView(value);\n return;\n }\n\n if (!isOpen.value) {\n syncCalendarView(today);\n }\n },\n { immediate: true },\n);\n\nconst cells = computed(() => {\n const startDate = startOfWeek(startOfMonth(viewMonth.value), props.weekStartsOn);\n\n return Array.from({ length: 6 }, (_, weekIndex) =>\n Array.from({ length: 7 }, (_, dayIndex) => {\n const date = addDays(startDate, weekIndex * 7 + dayIndex);\n const key = toDateValue(date);\n\n return {\n date,\n dayLabel: date.getDate(),\n disabled: isDateDisabled(date),\n inMonth: date.getMonth() === viewMonth.value.getMonth(),\n isFocused: isSameDay(date, focusedDate.value),\n isSelected: isSameDay(date, selectedDate.value),\n isToday: isSameDay(date, today),\n key,\n } satisfies CalendarCell;\n }),\n );\n});\n\nconst canMovePrev = computed(() => {\n if (!minDate.value) {\n return true;\n }\n\n return startOfMonth(viewMonth.value) > startOfMonth(minDate.value);\n});\n\nconst canMoveNext = computed(() => {\n if (!maxDate.value) {\n return true;\n }\n\n return startOfMonth(viewMonth.value) < startOfMonth(maxDate.value);\n});\n\nconst focusCurrentDay = () => {\n const key = toDateValue(focusedDate.value);\n nextTick(() => {\n dayRefs.get(key)?.focus();\n });\n};\n\nconst setDayRef = (\n element: Element | ComponentPublicInstance | null,\n key: string,\n) => {\n if (element instanceof HTMLButtonElement) {\n dayRefs.set(key, element);\n return;\n }\n\n dayRefs.delete(key);\n};\n\nconst openCalendar = () => {\n if (props.disabled) {\n return;\n }\n\n syncCalendarView(selectedDate.value ?? focusedDate.value ?? today);\n setValue(true);\n focusCurrentDay();\n};\n\nconst closeCalendar = (restoreFocus = false) => {\n setValue(false);\n\n if (restoreFocus) {\n nextTick(() => {\n triggerRef.value?.focus();\n });\n }\n};\n\nconst toggleCalendar = () => {\n if (isOpen.value) {\n closeCalendar();\n return;\n }\n\n openCalendar();\n};\n\nconst moveCalendar = (direction: 1 | -1) => {\n const nextMonth = addMonths(viewMonth.value, direction);\n syncCalendarView(nextMonth);\n focusCurrentDay();\n};\n\nconst moveFocus = (nextDate: Date) => {\n if (isDateDisabled(nextDate)) {\n return;\n }\n\n syncCalendarView(nextDate);\n focusCurrentDay();\n};\n\nconst selectDate = (date: Date) => {\n if (isDateDisabled(date)) {\n return;\n }\n\n const normalizedDate = startOfDay(date);\n const value = toDateValue(normalizedDate);\n\n syncCalendarView(normalizedDate);\n emit('update:modelValue', value);\n emit('select', value);\n closeCalendar(true);\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n if (props.disabled) {\n return;\n }\n\n if (isEscapeKey(event) && isOpen.value) {\n event.preventDefault();\n closeCalendar();\n return;\n }\n\n if (\n isActivationKey(event) ||\n event.key === 'ArrowDown' ||\n event.key === 'ArrowUp'\n ) {\n event.preventDefault();\n openCalendar();\n }\n};\n\nconst onDayKeydown = (event: KeyboardEvent, date: Date) => {\n if (isEscapeKey(event)) {\n event.preventDefault();\n closeCalendar(true);\n return;\n }\n\n if (isActivationKey(event)) {\n event.preventDefault();\n selectDate(date);\n return;\n }\n\n switch (event.key) {\n case 'ArrowLeft':\n event.preventDefault();\n moveFocus(addDays(date, -1));\n break;\n case 'ArrowRight':\n event.preventDefault();\n moveFocus(addDays(date, 1));\n break;\n case 'ArrowUp':\n event.preventDefault();\n moveFocus(addDays(date, -7));\n break;\n case 'ArrowDown':\n event.preventDefault();\n moveFocus(addDays(date, 7));\n break;\n case 'Home':\n event.preventDefault();\n moveFocus(startOfWeek(date, props.weekStartsOn));\n break;\n case 'End':\n event.preventDefault();\n moveFocus(addDays(startOfWeek(date, props.weekStartsOn), 6));\n break;\n case 'PageUp':\n event.preventDefault();\n moveFocus(addMonths(date, event.shiftKey ? -12 : -1));\n break;\n case 'PageDown':\n event.preventDefault();\n moveFocus(addMonths(date, event.shiftKey ? 12 : 1));\n break;\n default:\n break;\n }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n if (!isOpen.value) {\n return;\n }\n\n const target = event.target;\n if (!(target instanceof Node)) {\n return;\n }\n\n if (rootRef.value?.contains(target)) {\n return;\n }\n\n closeCalendar();\n};\n\nwatch(isOpen, (value) => {\n if (value) {\n document.addEventListener('pointerdown', onDocumentPointerDown);\n return;\n }\n\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n\nonBeforeUnmount(() => {\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n <div\n ref=\"rootRef\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n :data-state=\"isOpen ? 'open' : 'closed'\"\n >\n <input\n v-if=\"hiddenInputName\"\n type=\"hidden\"\n :name=\"hiddenInputName\"\n :value=\"modelValue\"\n >\n <button\n ref=\"triggerRef\"\n v-bind=\"triggerAttrs\"\n type=\"button\"\n class=\"t-date-picker__trigger\"\n :disabled=\"disabled\"\n :aria-controls=\"isOpen ? calendarId : undefined\"\n aria-haspopup=\"dialog\"\n :aria-expanded=\"isOpen\"\n :aria-invalid=\"invalid || undefined\"\n @click=\"toggleCalendar\"\n @keydown=\"onTriggerKeydown\"\n >\n <span\n v-if=\"$slots.prefix\"\n class=\"t-date-picker__slot t-date-picker__slot--prefix\"\n >\n <slot name=\"prefix\" />\n </span>\n <span\n class=\"t-date-picker__value\"\n :data-placeholder=\"selectedDate ? undefined : true\"\n >\n {{ triggerText }}\n </span>\n <span class=\"t-date-picker__slot t-date-picker__slot--suffix\">\n <slot name=\"suffix\">\n <CalendarIcon v-bind=\"treeIconDefaults\" />\n </slot>\n </span>\n </button>\n\n <transition name=\"t-fade\">\n <div\n v-if=\"isOpen && !disabled\"\n :id=\"calendarId\"\n class=\"t-date-picker__content\"\n role=\"dialog\"\n aria-modal=\"false\"\n :aria-labelledby=\"captionId\"\n >\n <div class=\"t-date-picker__header\">\n <button\n type=\"button\"\n class=\"t-date-picker__nav\"\n :disabled=\"!canMovePrev\"\n aria-label=\"Previous month\"\n @click=\"moveCalendar(-1)\"\n >\n <ChevronLeftIcon v-bind=\"treeIconDefaults\" />\n </button>\n <p\n :id=\"captionId\"\n class=\"t-date-picker__month\"\n >\n {{ monthLabel }}\n </p>\n <button\n type=\"button\"\n class=\"t-date-picker__nav\"\n :disabled=\"!canMoveNext\"\n aria-label=\"Next month\"\n @click=\"moveCalendar(1)\"\n >\n <ChevronRightIcon v-bind=\"treeIconDefaults\" />\n </button>\n </div>\n\n <div\n class=\"t-date-picker__weekdays\"\n aria-hidden=\"true\"\n >\n <span\n v-for=\"label in weekdayLabels\"\n :key=\"label\"\n class=\"t-date-picker__weekday\"\n >\n {{ label }}\n </span>\n </div>\n\n <div\n class=\"t-date-picker__grid\"\n role=\"grid\"\n :aria-labelledby=\"captionId\"\n >\n <div\n v-for=\"(week, weekIndex) in cells\"\n :key=\"weekIndex\"\n class=\"t-date-picker__row\"\n role=\"row\"\n >\n <div\n v-for=\"cell in week\"\n :key=\"cell.key\"\n class=\"t-date-picker__cell\"\n role=\"gridcell\"\n :aria-selected=\"cell.isSelected\"\n >\n <button\n :ref=\"(element) => setDayRef(element, cell.key)\"\n type=\"button\"\n class=\"t-date-picker__day\"\n :class=\"{\n 'is-muted': !cell.inMonth,\n 'is-selected': cell.isSelected,\n 'is-today': cell.isToday,\n }\"\n :data-date=\"cell.key\"\n :disabled=\"cell.disabled\"\n :tabindex=\"cell.isFocused ? 0 : -1\"\n :aria-current=\"cell.isToday ? 'date' : undefined\"\n :aria-label=\"cell.key\"\n @click=\"selectDate(cell.date)\"\n @keydown=\"onDayKeydown($event, cell.date)\"\n >\n {{ cell.dayLabel }}\n </button>\n </div>\n </div>\n </div>\n </div>\n </transition>\n </div>\n</template>\n"],"mappings":""}
1
+ {"version":3,"file":"TDatePicker.js","names":[],"sources":["../../src/components/TDatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n addDays,\n addMonths,\n createId,\n isActivationKey,\n isEscapeKey,\n isSameDay,\n parseDateValue,\n startOfDay,\n startOfMonth,\n startOfWeek,\n toDateValue,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n type ComponentPublicInstance,\n computed,\n nextTick,\n onBeforeUnmount,\n ref,\n toRef,\n useAttrs,\n watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\ninterface CalendarCell {\n date: Date;\n dayLabel: number;\n disabled: boolean;\n inMonth: boolean;\n isFocused: boolean;\n isSelected: boolean;\n isToday: boolean;\n key: string;\n}\n\nconst CalendarIcon = computed(() => getTreeIcon('calendar'));\nconst ChevronLeftIcon = computed(() => getTreeIcon('chevron-left'));\nconst ChevronRightIcon = computed(() => getTreeIcon('chevron-right'));\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: string;\n open?: boolean;\n defaultOpen?: boolean;\n size?: TSize;\n disabled?: boolean;\n invalid?: boolean;\n placeholder?: string;\n locale?: string;\n min?: string;\n max?: string;\n weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n id?: string;\n }>(),\n {\n modelValue: '',\n open: undefined,\n defaultOpen: false,\n size: 'md',\n disabled: false,\n invalid: false,\n placeholder: 'Select date',\n locale: 'en-US',\n min: '',\n max: '',\n weekStartsOn: 0,\n id: undefined,\n },\n);\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string];\n 'update:open': [value: boolean];\n 'open-change': [value: boolean];\n select: [value: string];\n}>();\n\nconst attrs = useAttrs();\nconst today = startOfDay(new Date());\nconst selectedDate = computed(() => parseDateValue(props.modelValue));\nconst minDate = computed(() => parseDateValue(props.min));\nconst maxDate = computed(() => parseDateValue(props.max));\nconst calendarId = props.id ?? createId('t-date-picker');\nconst captionId = `${calendarId}-caption`;\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLButtonElement | null>(null);\nconst dayRefs = new Map<string, HTMLButtonElement>();\nconst viewMonth = ref(startOfMonth(selectedDate.value ?? today));\nconst focusedDate = ref<Date>(selectedDate.value ?? today);\n\nconst triggerAttrs = computed(() => {\n const { class: _class, style: _style, name: _name, ...rest } = attrs;\n return rest;\n});\n\nconst hiddenInputName = computed(() =>\n typeof attrs.name === 'string' ? attrs.name : undefined,\n);\n\nconst rootClasses = computed(() => [\n 't-date-picker',\n `t-date-picker--${props.size}`,\n {\n 'is-disabled': props.disabled,\n 'is-invalid': props.invalid,\n 'is-open': isOpen.value,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst { value: isOpen, setValue } = useControllableOpen(\n toRef(props, 'open'),\n props.defaultOpen,\n (value) => {\n emit('update:open', value);\n emit('open-change', value);\n },\n);\n\nconst triggerText = computed(() => {\n if (!selectedDate.value) {\n return props.placeholder;\n }\n\n return new Intl.DateTimeFormat(props.locale, {\n day: 'numeric',\n month: 'long',\n year: 'numeric',\n }).format(selectedDate.value);\n});\n\nconst monthLabel = computed(() =>\n new Intl.DateTimeFormat(props.locale, {\n month: 'long',\n year: 'numeric',\n }).format(viewMonth.value),\n);\n\nconst weekdayLabels = computed(() => {\n const formatter = new Intl.DateTimeFormat(props.locale, { weekday: 'short' });\n const weekBase = startOfWeek(new Date(2024, 0, 7), props.weekStartsOn);\n\n return Array.from({ length: 7 }, (_, index) =>\n formatter.format(addDays(weekBase, index)),\n );\n});\n\nconst isDateDisabled = (date: Date) => {\n if (props.disabled) {\n return true;\n }\n\n if (minDate.value && date < minDate.value) {\n return true;\n }\n\n if (maxDate.value && date > maxDate.value) {\n return true;\n }\n\n return false;\n};\n\nconst syncCalendarView = (date: Date) => {\n focusedDate.value = startOfDay(date);\n viewMonth.value = startOfMonth(date);\n};\n\nwatch(\n selectedDate,\n (value) => {\n if (value) {\n syncCalendarView(value);\n return;\n }\n\n if (!isOpen.value) {\n syncCalendarView(today);\n }\n },\n { immediate: true },\n);\n\nconst cells = computed(() => {\n const startDate = startOfWeek(startOfMonth(viewMonth.value), props.weekStartsOn);\n\n return Array.from({ length: 6 }, (_, weekIndex) =>\n Array.from({ length: 7 }, (_, dayIndex) => {\n const date = addDays(startDate, weekIndex * 7 + dayIndex);\n const key = toDateValue(date);\n\n return {\n date,\n dayLabel: date.getDate(),\n disabled: isDateDisabled(date),\n inMonth: date.getMonth() === viewMonth.value.getMonth(),\n isFocused: isSameDay(date, focusedDate.value),\n isSelected: isSameDay(date, selectedDate.value),\n isToday: isSameDay(date, today),\n key,\n } satisfies CalendarCell;\n }),\n );\n});\n\nconst canMovePrev = computed(() => {\n if (!minDate.value) {\n return true;\n }\n\n return startOfMonth(viewMonth.value) > startOfMonth(minDate.value);\n});\n\nconst canMoveNext = computed(() => {\n if (!maxDate.value) {\n return true;\n }\n\n return startOfMonth(viewMonth.value) < startOfMonth(maxDate.value);\n});\n\nconst focusCurrentDay = () => {\n const key = toDateValue(focusedDate.value);\n nextTick(() => {\n dayRefs.get(key)?.focus();\n });\n};\n\nconst setDayRef = (\n element: Element | ComponentPublicInstance | null,\n key: string,\n) => {\n if (element instanceof HTMLButtonElement) {\n dayRefs.set(key, element);\n return;\n }\n\n dayRefs.delete(key);\n};\n\nconst openCalendar = () => {\n if (props.disabled) {\n return;\n }\n\n syncCalendarView(selectedDate.value ?? focusedDate.value ?? today);\n setValue(true);\n focusCurrentDay();\n};\n\nconst closeCalendar = (restoreFocus = false) => {\n setValue(false);\n\n if (restoreFocus) {\n nextTick(() => {\n triggerRef.value?.focus();\n });\n }\n};\n\nconst toggleCalendar = () => {\n if (isOpen.value) {\n closeCalendar();\n return;\n }\n\n openCalendar();\n};\n\nconst moveCalendar = (direction: 1 | -1) => {\n const nextMonth = addMonths(viewMonth.value, direction);\n syncCalendarView(nextMonth);\n focusCurrentDay();\n};\n\nconst moveFocus = (nextDate: Date) => {\n if (isDateDisabled(nextDate)) {\n return;\n }\n\n syncCalendarView(nextDate);\n focusCurrentDay();\n};\n\nconst selectDate = (date: Date) => {\n if (isDateDisabled(date)) {\n return;\n }\n\n const normalizedDate = startOfDay(date);\n const value = toDateValue(normalizedDate);\n\n syncCalendarView(normalizedDate);\n emit('update:modelValue', value);\n emit('select', value);\n closeCalendar(true);\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n if (props.disabled) {\n return;\n }\n\n if (isEscapeKey(event) && isOpen.value) {\n event.preventDefault();\n closeCalendar();\n return;\n }\n\n if (\n isActivationKey(event) ||\n event.key === 'ArrowDown' ||\n event.key === 'ArrowUp'\n ) {\n event.preventDefault();\n openCalendar();\n }\n};\n\nconst onDayKeydown = (event: KeyboardEvent, date: Date) => {\n if (isEscapeKey(event)) {\n event.preventDefault();\n closeCalendar(true);\n return;\n }\n\n if (isActivationKey(event)) {\n event.preventDefault();\n selectDate(date);\n return;\n }\n\n switch (event.key) {\n case 'ArrowLeft':\n event.preventDefault();\n moveFocus(addDays(date, -1));\n break;\n case 'ArrowRight':\n event.preventDefault();\n moveFocus(addDays(date, 1));\n break;\n case 'ArrowUp':\n event.preventDefault();\n moveFocus(addDays(date, -7));\n break;\n case 'ArrowDown':\n event.preventDefault();\n moveFocus(addDays(date, 7));\n break;\n case 'Home':\n event.preventDefault();\n moveFocus(startOfWeek(date, props.weekStartsOn));\n break;\n case 'End':\n event.preventDefault();\n moveFocus(addDays(startOfWeek(date, props.weekStartsOn), 6));\n break;\n case 'PageUp':\n event.preventDefault();\n moveFocus(addMonths(date, event.shiftKey ? -12 : -1));\n break;\n case 'PageDown':\n event.preventDefault();\n moveFocus(addMonths(date, event.shiftKey ? 12 : 1));\n break;\n default:\n break;\n }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n if (!isOpen.value) {\n return;\n }\n\n const target = event.target;\n if (!(target instanceof Node)) {\n return;\n }\n\n if (rootRef.value?.contains(target)) {\n return;\n }\n\n closeCalendar();\n};\n\nwatch(isOpen, (value) => {\n if (value) {\n document.addEventListener('pointerdown', onDocumentPointerDown);\n return;\n }\n\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n\nonBeforeUnmount(() => {\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n <div\n ref=\"rootRef\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n :data-state=\"isOpen ? 'open' : 'closed'\"\n >\n <input\n v-if=\"hiddenInputName\"\n type=\"hidden\"\n :name=\"hiddenInputName\"\n :value=\"modelValue\"\n >\n <button\n ref=\"triggerRef\"\n v-bind=\"triggerAttrs\"\n type=\"button\"\n class=\"t-date-picker__trigger\"\n :disabled=\"disabled\"\n :aria-controls=\"isOpen ? calendarId : undefined\"\n aria-haspopup=\"dialog\"\n :aria-expanded=\"isOpen\"\n :aria-invalid=\"invalid || undefined\"\n @click=\"toggleCalendar\"\n @keydown=\"onTriggerKeydown\"\n >\n <span\n v-if=\"$slots.prefix\"\n class=\"t-date-picker__slot t-date-picker__slot--prefix\"\n >\n <slot name=\"prefix\" />\n </span>\n <span\n class=\"t-date-picker__value\"\n :data-placeholder=\"selectedDate ? undefined : true\"\n >\n {{ triggerText }}\n </span>\n <span class=\"t-date-picker__slot t-date-picker__slot--suffix\">\n <slot name=\"suffix\">\n <CalendarIcon v-bind=\"treeIconDefaults\" />\n </slot>\n </span>\n </button>\n\n <transition name=\"t-fade\">\n <div\n v-if=\"isOpen && !disabled\"\n :id=\"calendarId\"\n class=\"t-date-picker__content\"\n role=\"dialog\"\n aria-modal=\"false\"\n :aria-labelledby=\"captionId\"\n >\n <div class=\"t-date-picker__header\">\n <button\n type=\"button\"\n class=\"t-date-picker__nav\"\n :disabled=\"!canMovePrev\"\n aria-label=\"Previous month\"\n @click=\"moveCalendar(-1)\"\n >\n <ChevronLeftIcon v-bind=\"treeIconDefaults\" />\n </button>\n <p\n :id=\"captionId\"\n class=\"t-date-picker__month\"\n >\n {{ monthLabel }}\n </p>\n <button\n type=\"button\"\n class=\"t-date-picker__nav\"\n :disabled=\"!canMoveNext\"\n aria-label=\"Next month\"\n @click=\"moveCalendar(1)\"\n >\n <ChevronRightIcon v-bind=\"treeIconDefaults\" />\n </button>\n </div>\n\n <div\n class=\"t-date-picker__weekdays\"\n aria-hidden=\"true\"\n >\n <span\n v-for=\"label in weekdayLabels\"\n :key=\"label\"\n class=\"t-date-picker__weekday\"\n >\n {{ label }}\n </span>\n </div>\n\n <div\n class=\"t-date-picker__grid\"\n role=\"grid\"\n :aria-labelledby=\"captionId\"\n >\n <div\n v-for=\"(week, weekIndex) in cells\"\n :key=\"weekIndex\"\n class=\"t-date-picker__row\"\n role=\"row\"\n >\n <div\n v-for=\"cell in week\"\n :key=\"cell.key\"\n class=\"t-date-picker__cell\"\n role=\"gridcell\"\n :aria-selected=\"cell.isSelected\"\n >\n <button\n :ref=\"(element) => setDayRef(element, cell.key)\"\n type=\"button\"\n class=\"t-date-picker__day\"\n :class=\"{\n 'is-muted': !cell.inMonth,\n 'is-selected': cell.isSelected,\n 'is-today': cell.isToday,\n }\"\n :data-date=\"cell.key\"\n :disabled=\"cell.disabled\"\n :tabindex=\"cell.isFocused ? 0 : -1\"\n :aria-current=\"cell.isToday ? 'date' : undefined\"\n :aria-label=\"cell.key\"\n @click=\"selectDate(cell.date)\"\n @keydown=\"onDayKeydown($event, cell.date)\"\n >\n {{ cell.dayLabel }}\n </button>\n </div>\n </div>\n </div>\n </div>\n </transition>\n </div>\n</template>\n"],"mappings":""}
@@ -1,2 +1,2 @@
1
- const e=require("../composables/useControllableOpen.cjs");let t=require("vue"),n=require("@treeui/utils"),r=require("@treeui/icons");var i=[`data-state`],a=[`name`,`value`],o=[`disabled`,`aria-controls`,`aria-expanded`,`aria-invalid`],ee={key:0,class:`t-date-picker__slot t-date-picker__slot--prefix`},te=[`data-placeholder`],s={class:`t-date-picker__slot t-date-picker__slot--suffix`},c=[`id`],ne={class:`t-date-picker__header`},l=[`disabled`],u=[`disabled`],d={class:`t-date-picker__weekdays`,"aria-hidden":`true`},re=[`aria-selected`],f=[`data-date`,`disabled`,`tabindex`,`aria-current`,`aria-label`,`onClick`,`onKeydown`],p=(0,t.defineComponent)({inheritAttrs:!1,__name:`TDatePicker`,props:{modelValue:{default:``},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},size:{default:`md`},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},placeholder:{default:`Select date`},locale:{default:`en-US`},min:{default:``},max:{default:``},weekStartsOn:{default:0},id:{default:void 0}},emits:[`update:modelValue`,`update:open`,`open-change`,`select`],setup(p,{emit:m}){let h=(0,r.getTreeIcon)(`calendar`),g=(0,r.getTreeIcon)(`chevron-left`),_=(0,r.getTreeIcon)(`chevron-right`),v=p,y=m,b=(0,t.useAttrs)(),x=(0,n.startOfDay)(new Date),S=(0,t.computed)(()=>(0,n.parseDateValue)(v.modelValue)),C=(0,t.computed)(()=>(0,n.parseDateValue)(v.min)),w=(0,t.computed)(()=>(0,n.parseDateValue)(v.max)),T=v.id??(0,n.createId)(`t-date-picker`),E=`${T}-caption`,D=(0,t.ref)(null),O=(0,t.ref)(null),k=new Map,A=(0,t.ref)((0,n.startOfMonth)(S.value??x)),j=(0,t.ref)(S.value??x),M=(0,t.computed)(()=>{let{class:e,style:t,name:n,...r}=b;return r}),N=(0,t.computed)(()=>typeof b.name==`string`?b.name:void 0),P=(0,t.computed)(()=>[`t-date-picker`,`t-date-picker--${v.size}`,{"is-disabled":v.disabled,"is-invalid":v.invalid,"is-open":I.value},b.class]),F=(0,t.computed)(()=>b.style),{value:I,setValue:L}=e.useControllableOpen((0,t.toRef)(v,`open`),v.defaultOpen,e=>{y(`update:open`,e),y(`open-change`,e)}),R=(0,t.computed)(()=>S.value?new Intl.DateTimeFormat(v.locale,{day:`numeric`,month:`long`,year:`numeric`}).format(S.value):v.placeholder),z=(0,t.computed)(()=>new Intl.DateTimeFormat(v.locale,{month:`long`,year:`numeric`}).format(A.value)),B=(0,t.computed)(()=>{let e=new Intl.DateTimeFormat(v.locale,{weekday:`short`}),t=(0,n.startOfWeek)(new Date(2024,0,7),v.weekStartsOn);return Array.from({length:7},(r,i)=>e.format((0,n.addDays)(t,i)))}),V=e=>!!(v.disabled||C.value&&e<C.value||w.value&&e>w.value),H=e=>{j.value=(0,n.startOfDay)(e),A.value=(0,n.startOfMonth)(e)};(0,t.watch)(S,e=>{if(e){H(e);return}I.value||H(x)},{immediate:!0});let U=(0,t.computed)(()=>{let e=(0,n.startOfWeek)((0,n.startOfMonth)(A.value),v.weekStartsOn);return Array.from({length:6},(t,r)=>Array.from({length:7},(t,i)=>{let a=(0,n.addDays)(e,r*7+i),o=(0,n.toDateValue)(a);return{date:a,dayLabel:a.getDate(),disabled:V(a),inMonth:a.getMonth()===A.value.getMonth(),isFocused:(0,n.isSameDay)(a,j.value),isSelected:(0,n.isSameDay)(a,S.value),isToday:(0,n.isSameDay)(a,x),key:o}}))}),W=(0,t.computed)(()=>!C.value||(0,n.startOfMonth)(A.value)>(0,n.startOfMonth)(C.value)),G=(0,t.computed)(()=>!w.value||(0,n.startOfMonth)(A.value)<(0,n.startOfMonth)(w.value)),K=()=>{let e=(0,n.toDateValue)(j.value);(0,t.nextTick)(()=>{k.get(e)?.focus()})},q=(e,t)=>{if(e instanceof HTMLButtonElement){k.set(t,e);return}k.delete(t)},J=()=>{v.disabled||(H(S.value??j.value??x),L(!0),K())},Y=(e=!1)=>{L(!1),e&&(0,t.nextTick)(()=>{O.value?.focus()})},ie=()=>{if(I.value){Y();return}J()},X=e=>{let t=(0,n.addMonths)(A.value,e);H(t),K()},Z=e=>{V(e)||(H(e),K())},Q=e=>{if(V(e))return;let t=(0,n.startOfDay)(e),r=(0,n.toDateValue)(t);H(t),y(`update:modelValue`,r),y(`select`,r),Y(!0)},ae=e=>{if(!v.disabled){if((0,n.isEscapeKey)(e)&&I.value){e.preventDefault(),Y();return}((0,n.isActivationKey)(e)||e.key===`ArrowDown`||e.key===`ArrowUp`)&&(e.preventDefault(),J())}},oe=(e,t)=>{if((0,n.isEscapeKey)(e)){e.preventDefault(),Y(!0);return}if((0,n.isActivationKey)(e)){e.preventDefault(),Q(t);return}switch(e.key){case`ArrowLeft`:e.preventDefault(),Z((0,n.addDays)(t,-1));break;case`ArrowRight`:e.preventDefault(),Z((0,n.addDays)(t,1));break;case`ArrowUp`:e.preventDefault(),Z((0,n.addDays)(t,-7));break;case`ArrowDown`:e.preventDefault(),Z((0,n.addDays)(t,7));break;case`Home`:e.preventDefault(),Z((0,n.startOfWeek)(t,v.weekStartsOn));break;case`End`:e.preventDefault(),Z((0,n.addDays)((0,n.startOfWeek)(t,v.weekStartsOn),6));break;case`PageUp`:e.preventDefault(),Z((0,n.addMonths)(t,e.shiftKey?-12:-1));break;case`PageDown`:e.preventDefault(),Z((0,n.addMonths)(t,e.shiftKey?12:1));break;default:break}},$=e=>{if(!I.value)return;let t=e.target;t instanceof Node&&(D.value?.contains(t)||Y())};return(0,t.watch)(I,e=>{if(e){document.addEventListener(`pointerdown`,$);return}document.removeEventListener(`pointerdown`,$)}),(0,t.onBeforeUnmount)(()=>{document.removeEventListener(`pointerdown`,$)}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`rootRef`,ref:D,class:(0,t.normalizeClass)(P.value),style:(0,t.normalizeStyle)(F.value),"data-state":(0,t.unref)(I)?`open`:`closed`},[N.value?((0,t.openBlock)(),(0,t.createElementBlock)(`input`,{key:0,type:`hidden`,name:N.value,value:p.modelValue},null,8,a)):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`button`,(0,t.mergeProps)({ref_key:`triggerRef`,ref:O},M.value,{type:`button`,class:`t-date-picker__trigger`,disabled:p.disabled,"aria-controls":(0,t.unref)(I)?(0,t.unref)(T):void 0,"aria-haspopup":`dialog`,"aria-expanded":(0,t.unref)(I),"aria-invalid":p.invalid||void 0,onClick:ie,onKeydown:ae}),[e.$slots.prefix?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,ee,[(0,t.renderSlot)(e.$slots,`prefix`)])):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`span`,{class:`t-date-picker__value`,"data-placeholder":!S.value||void 0},(0,t.toDisplayString)(R.value),9,te),(0,t.createElementVNode)(`span`,s,[(0,t.renderSlot)(e.$slots,`suffix`,{},()=>[(0,t.createVNode)((0,t.unref)(h),(0,t.normalizeProps)((0,t.guardReactiveProps)((0,t.unref)(r.treeIconDefaults))),null,16)])])],16,o),(0,t.createVNode)(t.Transition,{name:`t-fade`},{default:(0,t.withCtx)(()=>[(0,t.unref)(I)&&!p.disabled?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,id:(0,t.unref)(T),class:`t-date-picker__content`,role:`dialog`,"aria-modal":`false`,"aria-labelledby":E},[(0,t.createElementVNode)(`div`,ne,[(0,t.createElementVNode)(`button`,{type:`button`,class:`t-date-picker__nav`,disabled:!W.value,"aria-label":`Previous month`,onClick:n[0]||=e=>X(-1)},[(0,t.createVNode)((0,t.unref)(g),(0,t.normalizeProps)((0,t.guardReactiveProps)((0,t.unref)(r.treeIconDefaults))),null,16)],8,l),(0,t.createElementVNode)(`p`,{id:E,class:`t-date-picker__month`},(0,t.toDisplayString)(z.value),1),(0,t.createElementVNode)(`button`,{type:`button`,class:`t-date-picker__nav`,disabled:!G.value,"aria-label":`Next month`,onClick:n[1]||=e=>X(1)},[(0,t.createVNode)((0,t.unref)(_),(0,t.normalizeProps)((0,t.guardReactiveProps)((0,t.unref)(r.treeIconDefaults))),null,16)],8,u)]),(0,t.createElementVNode)(`div`,d,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(B.value,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`span`,{key:e,class:`t-date-picker__weekday`},(0,t.toDisplayString)(e),1))),128))]),(0,t.createElementVNode)(`div`,{class:`t-date-picker__grid`,role:`grid`,"aria-labelledby":E},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(U.value,(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:n,class:`t-date-picker__row`,role:`row`},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:e.key,class:`t-date-picker__cell`,role:`gridcell`,"aria-selected":e.isSelected},[(0,t.createElementVNode)(`button`,{ref_for:!0,ref:t=>q(t,e.key),type:`button`,class:(0,t.normalizeClass)([`t-date-picker__day`,{"is-muted":!e.inMonth,"is-selected":e.isSelected,"is-today":e.isToday}]),"data-date":e.key,disabled:e.disabled,tabindex:e.isFocused?0:-1,"aria-current":e.isToday?`date`:void 0,"aria-label":e.key,onClick:t=>Q(e.date),onKeydown:t=>oe(t,e.date)},(0,t.toDisplayString)(e.dayLabel),43,f)],8,re))),128))]))),128))])],8,c)):(0,t.createCommentVNode)(``,!0)]),_:1})],14,i))}});exports.default=p;
1
+ const e=require("../composables/useControllableOpen.cjs");let t=require("vue"),n=require("@treeui/utils"),r=require("@treeui/icons");var i=[`data-state`],a=[`name`,`value`],o=[`disabled`,`aria-controls`,`aria-expanded`,`aria-invalid`],ee={key:0,class:`t-date-picker__slot t-date-picker__slot--prefix`},te=[`data-placeholder`],s={class:`t-date-picker__slot t-date-picker__slot--suffix`},c=[`id`],ne={class:`t-date-picker__header`},l=[`disabled`],u=[`disabled`],d={class:`t-date-picker__weekdays`,"aria-hidden":`true`},re=[`aria-selected`],f=[`data-date`,`disabled`,`tabindex`,`aria-current`,`aria-label`,`onClick`,`onKeydown`],p=(0,t.defineComponent)({inheritAttrs:!1,__name:`TDatePicker`,props:{modelValue:{default:``},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},size:{default:`md`},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},placeholder:{default:`Select date`},locale:{default:`en-US`},min:{default:``},max:{default:``},weekStartsOn:{default:0},id:{default:void 0}},emits:[`update:modelValue`,`update:open`,`open-change`,`select`],setup(p,{emit:m}){let h=(0,t.computed)(()=>(0,r.getTreeIcon)(`calendar`)),g=(0,t.computed)(()=>(0,r.getTreeIcon)(`chevron-left`)),_=(0,t.computed)(()=>(0,r.getTreeIcon)(`chevron-right`)),v=p,y=m,b=(0,t.useAttrs)(),x=(0,n.startOfDay)(new Date),S=(0,t.computed)(()=>(0,n.parseDateValue)(v.modelValue)),C=(0,t.computed)(()=>(0,n.parseDateValue)(v.min)),w=(0,t.computed)(()=>(0,n.parseDateValue)(v.max)),T=v.id??(0,n.createId)(`t-date-picker`),E=`${T}-caption`,D=(0,t.ref)(null),O=(0,t.ref)(null),k=new Map,A=(0,t.ref)((0,n.startOfMonth)(S.value??x)),j=(0,t.ref)(S.value??x),M=(0,t.computed)(()=>{let{class:e,style:t,name:n,...r}=b;return r}),N=(0,t.computed)(()=>typeof b.name==`string`?b.name:void 0),P=(0,t.computed)(()=>[`t-date-picker`,`t-date-picker--${v.size}`,{"is-disabled":v.disabled,"is-invalid":v.invalid,"is-open":I.value},b.class]),F=(0,t.computed)(()=>b.style),{value:I,setValue:L}=e.useControllableOpen((0,t.toRef)(v,`open`),v.defaultOpen,e=>{y(`update:open`,e),y(`open-change`,e)}),R=(0,t.computed)(()=>S.value?new Intl.DateTimeFormat(v.locale,{day:`numeric`,month:`long`,year:`numeric`}).format(S.value):v.placeholder),z=(0,t.computed)(()=>new Intl.DateTimeFormat(v.locale,{month:`long`,year:`numeric`}).format(A.value)),B=(0,t.computed)(()=>{let e=new Intl.DateTimeFormat(v.locale,{weekday:`short`}),t=(0,n.startOfWeek)(new Date(2024,0,7),v.weekStartsOn);return Array.from({length:7},(r,i)=>e.format((0,n.addDays)(t,i)))}),V=e=>!!(v.disabled||C.value&&e<C.value||w.value&&e>w.value),H=e=>{j.value=(0,n.startOfDay)(e),A.value=(0,n.startOfMonth)(e)};(0,t.watch)(S,e=>{if(e){H(e);return}I.value||H(x)},{immediate:!0});let U=(0,t.computed)(()=>{let e=(0,n.startOfWeek)((0,n.startOfMonth)(A.value),v.weekStartsOn);return Array.from({length:6},(t,r)=>Array.from({length:7},(t,i)=>{let a=(0,n.addDays)(e,r*7+i),o=(0,n.toDateValue)(a);return{date:a,dayLabel:a.getDate(),disabled:V(a),inMonth:a.getMonth()===A.value.getMonth(),isFocused:(0,n.isSameDay)(a,j.value),isSelected:(0,n.isSameDay)(a,S.value),isToday:(0,n.isSameDay)(a,x),key:o}}))}),W=(0,t.computed)(()=>!C.value||(0,n.startOfMonth)(A.value)>(0,n.startOfMonth)(C.value)),G=(0,t.computed)(()=>!w.value||(0,n.startOfMonth)(A.value)<(0,n.startOfMonth)(w.value)),K=()=>{let e=(0,n.toDateValue)(j.value);(0,t.nextTick)(()=>{k.get(e)?.focus()})},q=(e,t)=>{if(e instanceof HTMLButtonElement){k.set(t,e);return}k.delete(t)},J=()=>{v.disabled||(H(S.value??j.value??x),L(!0),K())},Y=(e=!1)=>{L(!1),e&&(0,t.nextTick)(()=>{O.value?.focus()})},ie=()=>{if(I.value){Y();return}J()},X=e=>{let t=(0,n.addMonths)(A.value,e);H(t),K()},Z=e=>{V(e)||(H(e),K())},Q=e=>{if(V(e))return;let t=(0,n.startOfDay)(e),r=(0,n.toDateValue)(t);H(t),y(`update:modelValue`,r),y(`select`,r),Y(!0)},ae=e=>{if(!v.disabled){if((0,n.isEscapeKey)(e)&&I.value){e.preventDefault(),Y();return}((0,n.isActivationKey)(e)||e.key===`ArrowDown`||e.key===`ArrowUp`)&&(e.preventDefault(),J())}},oe=(e,t)=>{if((0,n.isEscapeKey)(e)){e.preventDefault(),Y(!0);return}if((0,n.isActivationKey)(e)){e.preventDefault(),Q(t);return}switch(e.key){case`ArrowLeft`:e.preventDefault(),Z((0,n.addDays)(t,-1));break;case`ArrowRight`:e.preventDefault(),Z((0,n.addDays)(t,1));break;case`ArrowUp`:e.preventDefault(),Z((0,n.addDays)(t,-7));break;case`ArrowDown`:e.preventDefault(),Z((0,n.addDays)(t,7));break;case`Home`:e.preventDefault(),Z((0,n.startOfWeek)(t,v.weekStartsOn));break;case`End`:e.preventDefault(),Z((0,n.addDays)((0,n.startOfWeek)(t,v.weekStartsOn),6));break;case`PageUp`:e.preventDefault(),Z((0,n.addMonths)(t,e.shiftKey?-12:-1));break;case`PageDown`:e.preventDefault(),Z((0,n.addMonths)(t,e.shiftKey?12:1));break;default:break}},$=e=>{if(!I.value)return;let t=e.target;t instanceof Node&&(D.value?.contains(t)||Y())};return(0,t.watch)(I,e=>{if(e){document.addEventListener(`pointerdown`,$);return}document.removeEventListener(`pointerdown`,$)}),(0,t.onBeforeUnmount)(()=>{document.removeEventListener(`pointerdown`,$)}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`rootRef`,ref:D,class:(0,t.normalizeClass)(P.value),style:(0,t.normalizeStyle)(F.value),"data-state":(0,t.unref)(I)?`open`:`closed`},[N.value?((0,t.openBlock)(),(0,t.createElementBlock)(`input`,{key:0,type:`hidden`,name:N.value,value:p.modelValue},null,8,a)):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`button`,(0,t.mergeProps)({ref_key:`triggerRef`,ref:O},M.value,{type:`button`,class:`t-date-picker__trigger`,disabled:p.disabled,"aria-controls":(0,t.unref)(I)?(0,t.unref)(T):void 0,"aria-haspopup":`dialog`,"aria-expanded":(0,t.unref)(I),"aria-invalid":p.invalid||void 0,onClick:ie,onKeydown:ae}),[e.$slots.prefix?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,ee,[(0,t.renderSlot)(e.$slots,`prefix`)])):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`span`,{class:`t-date-picker__value`,"data-placeholder":!S.value||void 0},(0,t.toDisplayString)(R.value),9,te),(0,t.createElementVNode)(`span`,s,[(0,t.renderSlot)(e.$slots,`suffix`,{},()=>[(0,t.createVNode)((0,t.unref)(h),(0,t.normalizeProps)((0,t.guardReactiveProps)((0,t.unref)(r.treeIconDefaults))),null,16)])])],16,o),(0,t.createVNode)(t.Transition,{name:`t-fade`},{default:(0,t.withCtx)(()=>[(0,t.unref)(I)&&!p.disabled?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,id:(0,t.unref)(T),class:`t-date-picker__content`,role:`dialog`,"aria-modal":`false`,"aria-labelledby":E},[(0,t.createElementVNode)(`div`,ne,[(0,t.createElementVNode)(`button`,{type:`button`,class:`t-date-picker__nav`,disabled:!W.value,"aria-label":`Previous month`,onClick:n[0]||=e=>X(-1)},[(0,t.createVNode)((0,t.unref)(g),(0,t.normalizeProps)((0,t.guardReactiveProps)((0,t.unref)(r.treeIconDefaults))),null,16)],8,l),(0,t.createElementVNode)(`p`,{id:E,class:`t-date-picker__month`},(0,t.toDisplayString)(z.value),1),(0,t.createElementVNode)(`button`,{type:`button`,class:`t-date-picker__nav`,disabled:!G.value,"aria-label":`Next month`,onClick:n[1]||=e=>X(1)},[(0,t.createVNode)((0,t.unref)(_),(0,t.normalizeProps)((0,t.guardReactiveProps)((0,t.unref)(r.treeIconDefaults))),null,16)],8,u)]),(0,t.createElementVNode)(`div`,d,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(B.value,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`span`,{key:e,class:`t-date-picker__weekday`},(0,t.toDisplayString)(e),1))),128))]),(0,t.createElementVNode)(`div`,{class:`t-date-picker__grid`,role:`grid`,"aria-labelledby":E},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(U.value,(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:n,class:`t-date-picker__row`,role:`row`},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:e.key,class:`t-date-picker__cell`,role:`gridcell`,"aria-selected":e.isSelected},[(0,t.createElementVNode)(`button`,{ref_for:!0,ref:t=>q(t,e.key),type:`button`,class:(0,t.normalizeClass)([`t-date-picker__day`,{"is-muted":!e.inMonth,"is-selected":e.isSelected,"is-today":e.isToday}]),"data-date":e.key,disabled:e.disabled,tabindex:e.isFocused?0:-1,"aria-current":e.isToday?`date`:void 0,"aria-label":e.key,onClick:t=>Q(e.date),onKeydown:t=>oe(t,e.date)},(0,t.toDisplayString)(e.dayLabel),43,f)],8,re))),128))]))),128))])],8,c)):(0,t.createCommentVNode)(``,!0)]),_:1})],14,i))}});exports.default=p;
2
2
  //# sourceMappingURL=TDatePicker.vue_vue_type_script_setup_true_lang.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"TDatePicker.vue_vue_type_script_setup_true_lang.cjs","names":["$slots"],"sources":["../../src/components/TDatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n addDays,\n addMonths,\n createId,\n isActivationKey,\n isEscapeKey,\n isSameDay,\n parseDateValue,\n startOfDay,\n startOfMonth,\n startOfWeek,\n toDateValue,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n type ComponentPublicInstance,\n computed,\n nextTick,\n onBeforeUnmount,\n ref,\n toRef,\n useAttrs,\n watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\ninterface CalendarCell {\n date: Date;\n dayLabel: number;\n disabled: boolean;\n inMonth: boolean;\n isFocused: boolean;\n isSelected: boolean;\n isToday: boolean;\n key: string;\n}\n\nconst CalendarIcon = getTreeIcon('calendar');\nconst ChevronLeftIcon = getTreeIcon('chevron-left');\nconst ChevronRightIcon = getTreeIcon('chevron-right');\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: string;\n open?: boolean;\n defaultOpen?: boolean;\n size?: TSize;\n disabled?: boolean;\n invalid?: boolean;\n placeholder?: string;\n locale?: string;\n min?: string;\n max?: string;\n weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n id?: string;\n }>(),\n {\n modelValue: '',\n open: undefined,\n defaultOpen: false,\n size: 'md',\n disabled: false,\n invalid: false,\n placeholder: 'Select date',\n locale: 'en-US',\n min: '',\n max: '',\n weekStartsOn: 0,\n id: undefined,\n },\n);\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string];\n 'update:open': [value: boolean];\n 'open-change': [value: boolean];\n select: [value: string];\n}>();\n\nconst attrs = useAttrs();\nconst today = startOfDay(new Date());\nconst selectedDate = computed(() => parseDateValue(props.modelValue));\nconst minDate = computed(() => parseDateValue(props.min));\nconst maxDate = computed(() => parseDateValue(props.max));\nconst calendarId = props.id ?? createId('t-date-picker');\nconst captionId = `${calendarId}-caption`;\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLButtonElement | null>(null);\nconst dayRefs = new Map<string, HTMLButtonElement>();\nconst viewMonth = ref(startOfMonth(selectedDate.value ?? today));\nconst focusedDate = ref<Date>(selectedDate.value ?? today);\n\nconst triggerAttrs = computed(() => {\n const { class: _class, style: _style, name: _name, ...rest } = attrs;\n return rest;\n});\n\nconst hiddenInputName = computed(() =>\n typeof attrs.name === 'string' ? attrs.name : undefined,\n);\n\nconst rootClasses = computed(() => [\n 't-date-picker',\n `t-date-picker--${props.size}`,\n {\n 'is-disabled': props.disabled,\n 'is-invalid': props.invalid,\n 'is-open': isOpen.value,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst { value: isOpen, setValue } = useControllableOpen(\n toRef(props, 'open'),\n props.defaultOpen,\n (value) => {\n emit('update:open', value);\n emit('open-change', value);\n },\n);\n\nconst triggerText = computed(() => {\n if (!selectedDate.value) {\n return props.placeholder;\n }\n\n return new Intl.DateTimeFormat(props.locale, {\n day: 'numeric',\n month: 'long',\n year: 'numeric',\n }).format(selectedDate.value);\n});\n\nconst monthLabel = computed(() =>\n new Intl.DateTimeFormat(props.locale, {\n month: 'long',\n year: 'numeric',\n }).format(viewMonth.value),\n);\n\nconst weekdayLabels = computed(() => {\n const formatter = new Intl.DateTimeFormat(props.locale, { weekday: 'short' });\n const weekBase = startOfWeek(new Date(2024, 0, 7), props.weekStartsOn);\n\n return Array.from({ length: 7 }, (_, index) =>\n formatter.format(addDays(weekBase, index)),\n );\n});\n\nconst isDateDisabled = (date: Date) => {\n if (props.disabled) {\n return true;\n }\n\n if (minDate.value && date < minDate.value) {\n return true;\n }\n\n if (maxDate.value && date > maxDate.value) {\n return true;\n }\n\n return false;\n};\n\nconst syncCalendarView = (date: Date) => {\n focusedDate.value = startOfDay(date);\n viewMonth.value = startOfMonth(date);\n};\n\nwatch(\n selectedDate,\n (value) => {\n if (value) {\n syncCalendarView(value);\n return;\n }\n\n if (!isOpen.value) {\n syncCalendarView(today);\n }\n },\n { immediate: true },\n);\n\nconst cells = computed(() => {\n const startDate = startOfWeek(startOfMonth(viewMonth.value), props.weekStartsOn);\n\n return Array.from({ length: 6 }, (_, weekIndex) =>\n Array.from({ length: 7 }, (_, dayIndex) => {\n const date = addDays(startDate, weekIndex * 7 + dayIndex);\n const key = toDateValue(date);\n\n return {\n date,\n dayLabel: date.getDate(),\n disabled: isDateDisabled(date),\n inMonth: date.getMonth() === viewMonth.value.getMonth(),\n isFocused: isSameDay(date, focusedDate.value),\n isSelected: isSameDay(date, selectedDate.value),\n isToday: isSameDay(date, today),\n key,\n } satisfies CalendarCell;\n }),\n );\n});\n\nconst canMovePrev = computed(() => {\n if (!minDate.value) {\n return true;\n }\n\n return startOfMonth(viewMonth.value) > startOfMonth(minDate.value);\n});\n\nconst canMoveNext = computed(() => {\n if (!maxDate.value) {\n return true;\n }\n\n return startOfMonth(viewMonth.value) < startOfMonth(maxDate.value);\n});\n\nconst focusCurrentDay = () => {\n const key = toDateValue(focusedDate.value);\n nextTick(() => {\n dayRefs.get(key)?.focus();\n });\n};\n\nconst setDayRef = (\n element: Element | ComponentPublicInstance | null,\n key: string,\n) => {\n if (element instanceof HTMLButtonElement) {\n dayRefs.set(key, element);\n return;\n }\n\n dayRefs.delete(key);\n};\n\nconst openCalendar = () => {\n if (props.disabled) {\n return;\n }\n\n syncCalendarView(selectedDate.value ?? focusedDate.value ?? today);\n setValue(true);\n focusCurrentDay();\n};\n\nconst closeCalendar = (restoreFocus = false) => {\n setValue(false);\n\n if (restoreFocus) {\n nextTick(() => {\n triggerRef.value?.focus();\n });\n }\n};\n\nconst toggleCalendar = () => {\n if (isOpen.value) {\n closeCalendar();\n return;\n }\n\n openCalendar();\n};\n\nconst moveCalendar = (direction: 1 | -1) => {\n const nextMonth = addMonths(viewMonth.value, direction);\n syncCalendarView(nextMonth);\n focusCurrentDay();\n};\n\nconst moveFocus = (nextDate: Date) => {\n if (isDateDisabled(nextDate)) {\n return;\n }\n\n syncCalendarView(nextDate);\n focusCurrentDay();\n};\n\nconst selectDate = (date: Date) => {\n if (isDateDisabled(date)) {\n return;\n }\n\n const normalizedDate = startOfDay(date);\n const value = toDateValue(normalizedDate);\n\n syncCalendarView(normalizedDate);\n emit('update:modelValue', value);\n emit('select', value);\n closeCalendar(true);\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n if (props.disabled) {\n return;\n }\n\n if (isEscapeKey(event) && isOpen.value) {\n event.preventDefault();\n closeCalendar();\n return;\n }\n\n if (\n isActivationKey(event) ||\n event.key === 'ArrowDown' ||\n event.key === 'ArrowUp'\n ) {\n event.preventDefault();\n openCalendar();\n }\n};\n\nconst onDayKeydown = (event: KeyboardEvent, date: Date) => {\n if (isEscapeKey(event)) {\n event.preventDefault();\n closeCalendar(true);\n return;\n }\n\n if (isActivationKey(event)) {\n event.preventDefault();\n selectDate(date);\n return;\n }\n\n switch (event.key) {\n case 'ArrowLeft':\n event.preventDefault();\n moveFocus(addDays(date, -1));\n break;\n case 'ArrowRight':\n event.preventDefault();\n moveFocus(addDays(date, 1));\n break;\n case 'ArrowUp':\n event.preventDefault();\n moveFocus(addDays(date, -7));\n break;\n case 'ArrowDown':\n event.preventDefault();\n moveFocus(addDays(date, 7));\n break;\n case 'Home':\n event.preventDefault();\n moveFocus(startOfWeek(date, props.weekStartsOn));\n break;\n case 'End':\n event.preventDefault();\n moveFocus(addDays(startOfWeek(date, props.weekStartsOn), 6));\n break;\n case 'PageUp':\n event.preventDefault();\n moveFocus(addMonths(date, event.shiftKey ? -12 : -1));\n break;\n case 'PageDown':\n event.preventDefault();\n moveFocus(addMonths(date, event.shiftKey ? 12 : 1));\n break;\n default:\n break;\n }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n if (!isOpen.value) {\n return;\n }\n\n const target = event.target;\n if (!(target instanceof Node)) {\n return;\n }\n\n if (rootRef.value?.contains(target)) {\n return;\n }\n\n closeCalendar();\n};\n\nwatch(isOpen, (value) => {\n if (value) {\n document.addEventListener('pointerdown', onDocumentPointerDown);\n return;\n }\n\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n\nonBeforeUnmount(() => {\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n <div\n ref=\"rootRef\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n :data-state=\"isOpen ? 'open' : 'closed'\"\n >\n <input\n v-if=\"hiddenInputName\"\n type=\"hidden\"\n :name=\"hiddenInputName\"\n :value=\"modelValue\"\n >\n <button\n ref=\"triggerRef\"\n v-bind=\"triggerAttrs\"\n type=\"button\"\n class=\"t-date-picker__trigger\"\n :disabled=\"disabled\"\n :aria-controls=\"isOpen ? calendarId : undefined\"\n aria-haspopup=\"dialog\"\n :aria-expanded=\"isOpen\"\n :aria-invalid=\"invalid || undefined\"\n @click=\"toggleCalendar\"\n @keydown=\"onTriggerKeydown\"\n >\n <span\n v-if=\"$slots.prefix\"\n class=\"t-date-picker__slot t-date-picker__slot--prefix\"\n >\n <slot name=\"prefix\" />\n </span>\n <span\n class=\"t-date-picker__value\"\n :data-placeholder=\"selectedDate ? undefined : true\"\n >\n {{ triggerText }}\n </span>\n <span class=\"t-date-picker__slot t-date-picker__slot--suffix\">\n <slot name=\"suffix\">\n <CalendarIcon v-bind=\"treeIconDefaults\" />\n </slot>\n </span>\n </button>\n\n <transition name=\"t-fade\">\n <div\n v-if=\"isOpen && !disabled\"\n :id=\"calendarId\"\n class=\"t-date-picker__content\"\n role=\"dialog\"\n aria-modal=\"false\"\n :aria-labelledby=\"captionId\"\n >\n <div class=\"t-date-picker__header\">\n <button\n type=\"button\"\n class=\"t-date-picker__nav\"\n :disabled=\"!canMovePrev\"\n aria-label=\"Previous month\"\n @click=\"moveCalendar(-1)\"\n >\n <ChevronLeftIcon v-bind=\"treeIconDefaults\" />\n </button>\n <p\n :id=\"captionId\"\n class=\"t-date-picker__month\"\n >\n {{ monthLabel }}\n </p>\n <button\n type=\"button\"\n class=\"t-date-picker__nav\"\n :disabled=\"!canMoveNext\"\n aria-label=\"Next month\"\n @click=\"moveCalendar(1)\"\n >\n <ChevronRightIcon v-bind=\"treeIconDefaults\" />\n </button>\n </div>\n\n <div\n class=\"t-date-picker__weekdays\"\n aria-hidden=\"true\"\n >\n <span\n v-for=\"label in weekdayLabels\"\n :key=\"label\"\n class=\"t-date-picker__weekday\"\n >\n {{ label }}\n </span>\n </div>\n\n <div\n class=\"t-date-picker__grid\"\n role=\"grid\"\n :aria-labelledby=\"captionId\"\n >\n <div\n v-for=\"(week, weekIndex) in cells\"\n :key=\"weekIndex\"\n class=\"t-date-picker__row\"\n role=\"row\"\n >\n <div\n v-for=\"cell in week\"\n :key=\"cell.key\"\n class=\"t-date-picker__cell\"\n role=\"gridcell\"\n :aria-selected=\"cell.isSelected\"\n >\n <button\n :ref=\"(element) => setDayRef(element, cell.key)\"\n type=\"button\"\n class=\"t-date-picker__day\"\n :class=\"{\n 'is-muted': !cell.inMonth,\n 'is-selected': cell.isSelected,\n 'is-today': cell.isToday,\n }\"\n :data-date=\"cell.key\"\n :disabled=\"cell.disabled\"\n :tabindex=\"cell.isFocused ? 0 : -1\"\n :aria-current=\"cell.isToday ? 'date' : undefined\"\n :aria-label=\"cell.key\"\n @click=\"selectDate(cell.date)\"\n @keydown=\"onDayKeydown($event, cell.date)\"\n >\n {{ cell.dayLabel }}\n </button>\n </div>\n </div>\n </div>\n </div>\n </transition>\n </div>\n</template>\n"],"mappings":"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"}
1
+ {"version":3,"file":"TDatePicker.vue_vue_type_script_setup_true_lang.cjs","names":["$slots"],"sources":["../../src/components/TDatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n addDays,\n addMonths,\n createId,\n isActivationKey,\n isEscapeKey,\n isSameDay,\n parseDateValue,\n startOfDay,\n startOfMonth,\n startOfWeek,\n toDateValue,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n type ComponentPublicInstance,\n computed,\n nextTick,\n onBeforeUnmount,\n ref,\n toRef,\n useAttrs,\n watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\ninterface CalendarCell {\n date: Date;\n dayLabel: number;\n disabled: boolean;\n inMonth: boolean;\n isFocused: boolean;\n isSelected: boolean;\n isToday: boolean;\n key: string;\n}\n\nconst CalendarIcon = computed(() => getTreeIcon('calendar'));\nconst ChevronLeftIcon = computed(() => getTreeIcon('chevron-left'));\nconst ChevronRightIcon = computed(() => getTreeIcon('chevron-right'));\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: string;\n open?: boolean;\n defaultOpen?: boolean;\n size?: TSize;\n disabled?: boolean;\n invalid?: boolean;\n placeholder?: string;\n locale?: string;\n min?: string;\n max?: string;\n weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n id?: string;\n }>(),\n {\n modelValue: '',\n open: undefined,\n defaultOpen: false,\n size: 'md',\n disabled: false,\n invalid: false,\n placeholder: 'Select date',\n locale: 'en-US',\n min: '',\n max: '',\n weekStartsOn: 0,\n id: undefined,\n },\n);\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string];\n 'update:open': [value: boolean];\n 'open-change': [value: boolean];\n select: [value: string];\n}>();\n\nconst attrs = useAttrs();\nconst today = startOfDay(new Date());\nconst selectedDate = computed(() => parseDateValue(props.modelValue));\nconst minDate = computed(() => parseDateValue(props.min));\nconst maxDate = computed(() => parseDateValue(props.max));\nconst calendarId = props.id ?? createId('t-date-picker');\nconst captionId = `${calendarId}-caption`;\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLButtonElement | null>(null);\nconst dayRefs = new Map<string, HTMLButtonElement>();\nconst viewMonth = ref(startOfMonth(selectedDate.value ?? today));\nconst focusedDate = ref<Date>(selectedDate.value ?? today);\n\nconst triggerAttrs = computed(() => {\n const { class: _class, style: _style, name: _name, ...rest } = attrs;\n return rest;\n});\n\nconst hiddenInputName = computed(() =>\n typeof attrs.name === 'string' ? attrs.name : undefined,\n);\n\nconst rootClasses = computed(() => [\n 't-date-picker',\n `t-date-picker--${props.size}`,\n {\n 'is-disabled': props.disabled,\n 'is-invalid': props.invalid,\n 'is-open': isOpen.value,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst { value: isOpen, setValue } = useControllableOpen(\n toRef(props, 'open'),\n props.defaultOpen,\n (value) => {\n emit('update:open', value);\n emit('open-change', value);\n },\n);\n\nconst triggerText = computed(() => {\n if (!selectedDate.value) {\n return props.placeholder;\n }\n\n return new Intl.DateTimeFormat(props.locale, {\n day: 'numeric',\n month: 'long',\n year: 'numeric',\n }).format(selectedDate.value);\n});\n\nconst monthLabel = computed(() =>\n new Intl.DateTimeFormat(props.locale, {\n month: 'long',\n year: 'numeric',\n }).format(viewMonth.value),\n);\n\nconst weekdayLabels = computed(() => {\n const formatter = new Intl.DateTimeFormat(props.locale, { weekday: 'short' });\n const weekBase = startOfWeek(new Date(2024, 0, 7), props.weekStartsOn);\n\n return Array.from({ length: 7 }, (_, index) =>\n formatter.format(addDays(weekBase, index)),\n );\n});\n\nconst isDateDisabled = (date: Date) => {\n if (props.disabled) {\n return true;\n }\n\n if (minDate.value && date < minDate.value) {\n return true;\n }\n\n if (maxDate.value && date > maxDate.value) {\n return true;\n }\n\n return false;\n};\n\nconst syncCalendarView = (date: Date) => {\n focusedDate.value = startOfDay(date);\n viewMonth.value = startOfMonth(date);\n};\n\nwatch(\n selectedDate,\n (value) => {\n if (value) {\n syncCalendarView(value);\n return;\n }\n\n if (!isOpen.value) {\n syncCalendarView(today);\n }\n },\n { immediate: true },\n);\n\nconst cells = computed(() => {\n const startDate = startOfWeek(startOfMonth(viewMonth.value), props.weekStartsOn);\n\n return Array.from({ length: 6 }, (_, weekIndex) =>\n Array.from({ length: 7 }, (_, dayIndex) => {\n const date = addDays(startDate, weekIndex * 7 + dayIndex);\n const key = toDateValue(date);\n\n return {\n date,\n dayLabel: date.getDate(),\n disabled: isDateDisabled(date),\n inMonth: date.getMonth() === viewMonth.value.getMonth(),\n isFocused: isSameDay(date, focusedDate.value),\n isSelected: isSameDay(date, selectedDate.value),\n isToday: isSameDay(date, today),\n key,\n } satisfies CalendarCell;\n }),\n );\n});\n\nconst canMovePrev = computed(() => {\n if (!minDate.value) {\n return true;\n }\n\n return startOfMonth(viewMonth.value) > startOfMonth(minDate.value);\n});\n\nconst canMoveNext = computed(() => {\n if (!maxDate.value) {\n return true;\n }\n\n return startOfMonth(viewMonth.value) < startOfMonth(maxDate.value);\n});\n\nconst focusCurrentDay = () => {\n const key = toDateValue(focusedDate.value);\n nextTick(() => {\n dayRefs.get(key)?.focus();\n });\n};\n\nconst setDayRef = (\n element: Element | ComponentPublicInstance | null,\n key: string,\n) => {\n if (element instanceof HTMLButtonElement) {\n dayRefs.set(key, element);\n return;\n }\n\n dayRefs.delete(key);\n};\n\nconst openCalendar = () => {\n if (props.disabled) {\n return;\n }\n\n syncCalendarView(selectedDate.value ?? focusedDate.value ?? today);\n setValue(true);\n focusCurrentDay();\n};\n\nconst closeCalendar = (restoreFocus = false) => {\n setValue(false);\n\n if (restoreFocus) {\n nextTick(() => {\n triggerRef.value?.focus();\n });\n }\n};\n\nconst toggleCalendar = () => {\n if (isOpen.value) {\n closeCalendar();\n return;\n }\n\n openCalendar();\n};\n\nconst moveCalendar = (direction: 1 | -1) => {\n const nextMonth = addMonths(viewMonth.value, direction);\n syncCalendarView(nextMonth);\n focusCurrentDay();\n};\n\nconst moveFocus = (nextDate: Date) => {\n if (isDateDisabled(nextDate)) {\n return;\n }\n\n syncCalendarView(nextDate);\n focusCurrentDay();\n};\n\nconst selectDate = (date: Date) => {\n if (isDateDisabled(date)) {\n return;\n }\n\n const normalizedDate = startOfDay(date);\n const value = toDateValue(normalizedDate);\n\n syncCalendarView(normalizedDate);\n emit('update:modelValue', value);\n emit('select', value);\n closeCalendar(true);\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n if (props.disabled) {\n return;\n }\n\n if (isEscapeKey(event) && isOpen.value) {\n event.preventDefault();\n closeCalendar();\n return;\n }\n\n if (\n isActivationKey(event) ||\n event.key === 'ArrowDown' ||\n event.key === 'ArrowUp'\n ) {\n event.preventDefault();\n openCalendar();\n }\n};\n\nconst onDayKeydown = (event: KeyboardEvent, date: Date) => {\n if (isEscapeKey(event)) {\n event.preventDefault();\n closeCalendar(true);\n return;\n }\n\n if (isActivationKey(event)) {\n event.preventDefault();\n selectDate(date);\n return;\n }\n\n switch (event.key) {\n case 'ArrowLeft':\n event.preventDefault();\n moveFocus(addDays(date, -1));\n break;\n case 'ArrowRight':\n event.preventDefault();\n moveFocus(addDays(date, 1));\n break;\n case 'ArrowUp':\n event.preventDefault();\n moveFocus(addDays(date, -7));\n break;\n case 'ArrowDown':\n event.preventDefault();\n moveFocus(addDays(date, 7));\n break;\n case 'Home':\n event.preventDefault();\n moveFocus(startOfWeek(date, props.weekStartsOn));\n break;\n case 'End':\n event.preventDefault();\n moveFocus(addDays(startOfWeek(date, props.weekStartsOn), 6));\n break;\n case 'PageUp':\n event.preventDefault();\n moveFocus(addMonths(date, event.shiftKey ? -12 : -1));\n break;\n case 'PageDown':\n event.preventDefault();\n moveFocus(addMonths(date, event.shiftKey ? 12 : 1));\n break;\n default:\n break;\n }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n if (!isOpen.value) {\n return;\n }\n\n const target = event.target;\n if (!(target instanceof Node)) {\n return;\n }\n\n if (rootRef.value?.contains(target)) {\n return;\n }\n\n closeCalendar();\n};\n\nwatch(isOpen, (value) => {\n if (value) {\n document.addEventListener('pointerdown', onDocumentPointerDown);\n return;\n }\n\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n\nonBeforeUnmount(() => {\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n <div\n ref=\"rootRef\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n :data-state=\"isOpen ? 'open' : 'closed'\"\n >\n <input\n v-if=\"hiddenInputName\"\n type=\"hidden\"\n :name=\"hiddenInputName\"\n :value=\"modelValue\"\n >\n <button\n ref=\"triggerRef\"\n v-bind=\"triggerAttrs\"\n type=\"button\"\n class=\"t-date-picker__trigger\"\n :disabled=\"disabled\"\n :aria-controls=\"isOpen ? calendarId : undefined\"\n aria-haspopup=\"dialog\"\n :aria-expanded=\"isOpen\"\n :aria-invalid=\"invalid || undefined\"\n @click=\"toggleCalendar\"\n @keydown=\"onTriggerKeydown\"\n >\n <span\n v-if=\"$slots.prefix\"\n class=\"t-date-picker__slot t-date-picker__slot--prefix\"\n >\n <slot name=\"prefix\" />\n </span>\n <span\n class=\"t-date-picker__value\"\n :data-placeholder=\"selectedDate ? undefined : true\"\n >\n {{ triggerText }}\n </span>\n <span class=\"t-date-picker__slot t-date-picker__slot--suffix\">\n <slot name=\"suffix\">\n <CalendarIcon v-bind=\"treeIconDefaults\" />\n </slot>\n </span>\n </button>\n\n <transition name=\"t-fade\">\n <div\n v-if=\"isOpen && !disabled\"\n :id=\"calendarId\"\n class=\"t-date-picker__content\"\n role=\"dialog\"\n aria-modal=\"false\"\n :aria-labelledby=\"captionId\"\n >\n <div class=\"t-date-picker__header\">\n <button\n type=\"button\"\n class=\"t-date-picker__nav\"\n :disabled=\"!canMovePrev\"\n aria-label=\"Previous month\"\n @click=\"moveCalendar(-1)\"\n >\n <ChevronLeftIcon v-bind=\"treeIconDefaults\" />\n </button>\n <p\n :id=\"captionId\"\n class=\"t-date-picker__month\"\n >\n {{ monthLabel }}\n </p>\n <button\n type=\"button\"\n class=\"t-date-picker__nav\"\n :disabled=\"!canMoveNext\"\n aria-label=\"Next month\"\n @click=\"moveCalendar(1)\"\n >\n <ChevronRightIcon v-bind=\"treeIconDefaults\" />\n </button>\n </div>\n\n <div\n class=\"t-date-picker__weekdays\"\n aria-hidden=\"true\"\n >\n <span\n v-for=\"label in weekdayLabels\"\n :key=\"label\"\n class=\"t-date-picker__weekday\"\n >\n {{ label }}\n </span>\n </div>\n\n <div\n class=\"t-date-picker__grid\"\n role=\"grid\"\n :aria-labelledby=\"captionId\"\n >\n <div\n v-for=\"(week, weekIndex) in cells\"\n :key=\"weekIndex\"\n class=\"t-date-picker__row\"\n role=\"row\"\n >\n <div\n v-for=\"cell in week\"\n :key=\"cell.key\"\n class=\"t-date-picker__cell\"\n role=\"gridcell\"\n :aria-selected=\"cell.isSelected\"\n >\n <button\n :ref=\"(element) => setDayRef(element, cell.key)\"\n type=\"button\"\n class=\"t-date-picker__day\"\n :class=\"{\n 'is-muted': !cell.inMonth,\n 'is-selected': cell.isSelected,\n 'is-today': cell.isToday,\n }\"\n :data-date=\"cell.key\"\n :disabled=\"cell.disabled\"\n :tabindex=\"cell.isFocused ? 0 : -1\"\n :aria-current=\"cell.isToday ? 'date' : undefined\"\n :aria-label=\"cell.key\"\n @click=\"selectDate(cell.date)\"\n @keydown=\"onDayKeydown($event, cell.date)\"\n >\n {{ cell.dayLabel }}\n </button>\n </div>\n </div>\n </div>\n </div>\n </transition>\n </div>\n</template>\n"],"mappings":"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"}
@@ -58,7 +58,7 @@ var ce = ["data-state"], le = ["name", "value"], ue = [
58
58
  "select"
59
59
  ],
60
60
  setup(c, { emit: j }) {
61
- let xe = k("calendar"), Se = k("chevron-left"), Ce = k("chevron-right"), M = c, N = j, P = ae(), F = T(/* @__PURE__ */ new Date()), I = r(() => w(M.modelValue)), L = r(() => w(M.min)), R = r(() => w(M.max)), z = M.id ?? se("t-date-picker"), B = `${z}-caption`, V = p(null), H = p(null), U = /* @__PURE__ */ new Map(), W = p(E(I.value ?? F)), G = p(I.value ?? F), we = r(() => {
61
+ let xe = r(() => k("calendar")), Se = r(() => k("chevron-left")), Ce = r(() => k("chevron-right")), M = c, N = j, P = ae(), F = T(/* @__PURE__ */ new Date()), I = r(() => w(M.modelValue)), L = r(() => w(M.min)), R = r(() => w(M.max)), z = M.id ?? se("t-date-picker"), B = `${z}-caption`, V = p(null), H = p(null), U = /* @__PURE__ */ new Map(), W = p(E(I.value ?? F)), G = p(I.value ?? F), we = r(() => {
62
62
  let { class: e, style: t, name: n, ...r } = P;
63
63
  return r;
64
64
  }), K = r(() => typeof P.name == "string" ? P.name : void 0), Te = r(() => [
@@ -1 +1 @@
1
- {"version":3,"file":"TDatePicker.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../src/components/TDatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n addDays,\n addMonths,\n createId,\n isActivationKey,\n isEscapeKey,\n isSameDay,\n parseDateValue,\n startOfDay,\n startOfMonth,\n startOfWeek,\n toDateValue,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n type ComponentPublicInstance,\n computed,\n nextTick,\n onBeforeUnmount,\n ref,\n toRef,\n useAttrs,\n watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\ninterface CalendarCell {\n date: Date;\n dayLabel: number;\n disabled: boolean;\n inMonth: boolean;\n isFocused: boolean;\n isSelected: boolean;\n isToday: boolean;\n key: string;\n}\n\nconst CalendarIcon = getTreeIcon('calendar');\nconst ChevronLeftIcon = getTreeIcon('chevron-left');\nconst ChevronRightIcon = getTreeIcon('chevron-right');\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: string;\n open?: boolean;\n defaultOpen?: boolean;\n size?: TSize;\n disabled?: boolean;\n invalid?: boolean;\n placeholder?: string;\n locale?: string;\n min?: string;\n max?: string;\n weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n id?: string;\n }>(),\n {\n modelValue: '',\n open: undefined,\n defaultOpen: false,\n size: 'md',\n disabled: false,\n invalid: false,\n placeholder: 'Select date',\n locale: 'en-US',\n min: '',\n max: '',\n weekStartsOn: 0,\n id: undefined,\n },\n);\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string];\n 'update:open': [value: boolean];\n 'open-change': [value: boolean];\n select: [value: string];\n}>();\n\nconst attrs = useAttrs();\nconst today = startOfDay(new Date());\nconst selectedDate = computed(() => parseDateValue(props.modelValue));\nconst minDate = computed(() => parseDateValue(props.min));\nconst maxDate = computed(() => parseDateValue(props.max));\nconst calendarId = props.id ?? createId('t-date-picker');\nconst captionId = `${calendarId}-caption`;\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLButtonElement | null>(null);\nconst dayRefs = new Map<string, HTMLButtonElement>();\nconst viewMonth = ref(startOfMonth(selectedDate.value ?? today));\nconst focusedDate = ref<Date>(selectedDate.value ?? today);\n\nconst triggerAttrs = computed(() => {\n const { class: _class, style: _style, name: _name, ...rest } = attrs;\n return rest;\n});\n\nconst hiddenInputName = computed(() =>\n typeof attrs.name === 'string' ? attrs.name : undefined,\n);\n\nconst rootClasses = computed(() => [\n 't-date-picker',\n `t-date-picker--${props.size}`,\n {\n 'is-disabled': props.disabled,\n 'is-invalid': props.invalid,\n 'is-open': isOpen.value,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst { value: isOpen, setValue } = useControllableOpen(\n toRef(props, 'open'),\n props.defaultOpen,\n (value) => {\n emit('update:open', value);\n emit('open-change', value);\n },\n);\n\nconst triggerText = computed(() => {\n if (!selectedDate.value) {\n return props.placeholder;\n }\n\n return new Intl.DateTimeFormat(props.locale, {\n day: 'numeric',\n month: 'long',\n year: 'numeric',\n }).format(selectedDate.value);\n});\n\nconst monthLabel = computed(() =>\n new Intl.DateTimeFormat(props.locale, {\n month: 'long',\n year: 'numeric',\n }).format(viewMonth.value),\n);\n\nconst weekdayLabels = computed(() => {\n const formatter = new Intl.DateTimeFormat(props.locale, { weekday: 'short' });\n const weekBase = startOfWeek(new Date(2024, 0, 7), props.weekStartsOn);\n\n return Array.from({ length: 7 }, (_, index) =>\n formatter.format(addDays(weekBase, index)),\n );\n});\n\nconst isDateDisabled = (date: Date) => {\n if (props.disabled) {\n return true;\n }\n\n if (minDate.value && date < minDate.value) {\n return true;\n }\n\n if (maxDate.value && date > maxDate.value) {\n return true;\n }\n\n return false;\n};\n\nconst syncCalendarView = (date: Date) => {\n focusedDate.value = startOfDay(date);\n viewMonth.value = startOfMonth(date);\n};\n\nwatch(\n selectedDate,\n (value) => {\n if (value) {\n syncCalendarView(value);\n return;\n }\n\n if (!isOpen.value) {\n syncCalendarView(today);\n }\n },\n { immediate: true },\n);\n\nconst cells = computed(() => {\n const startDate = startOfWeek(startOfMonth(viewMonth.value), props.weekStartsOn);\n\n return Array.from({ length: 6 }, (_, weekIndex) =>\n Array.from({ length: 7 }, (_, dayIndex) => {\n const date = addDays(startDate, weekIndex * 7 + dayIndex);\n const key = toDateValue(date);\n\n return {\n date,\n dayLabel: date.getDate(),\n disabled: isDateDisabled(date),\n inMonth: date.getMonth() === viewMonth.value.getMonth(),\n isFocused: isSameDay(date, focusedDate.value),\n isSelected: isSameDay(date, selectedDate.value),\n isToday: isSameDay(date, today),\n key,\n } satisfies CalendarCell;\n }),\n );\n});\n\nconst canMovePrev = computed(() => {\n if (!minDate.value) {\n return true;\n }\n\n return startOfMonth(viewMonth.value) > startOfMonth(minDate.value);\n});\n\nconst canMoveNext = computed(() => {\n if (!maxDate.value) {\n return true;\n }\n\n return startOfMonth(viewMonth.value) < startOfMonth(maxDate.value);\n});\n\nconst focusCurrentDay = () => {\n const key = toDateValue(focusedDate.value);\n nextTick(() => {\n dayRefs.get(key)?.focus();\n });\n};\n\nconst setDayRef = (\n element: Element | ComponentPublicInstance | null,\n key: string,\n) => {\n if (element instanceof HTMLButtonElement) {\n dayRefs.set(key, element);\n return;\n }\n\n dayRefs.delete(key);\n};\n\nconst openCalendar = () => {\n if (props.disabled) {\n return;\n }\n\n syncCalendarView(selectedDate.value ?? focusedDate.value ?? today);\n setValue(true);\n focusCurrentDay();\n};\n\nconst closeCalendar = (restoreFocus = false) => {\n setValue(false);\n\n if (restoreFocus) {\n nextTick(() => {\n triggerRef.value?.focus();\n });\n }\n};\n\nconst toggleCalendar = () => {\n if (isOpen.value) {\n closeCalendar();\n return;\n }\n\n openCalendar();\n};\n\nconst moveCalendar = (direction: 1 | -1) => {\n const nextMonth = addMonths(viewMonth.value, direction);\n syncCalendarView(nextMonth);\n focusCurrentDay();\n};\n\nconst moveFocus = (nextDate: Date) => {\n if (isDateDisabled(nextDate)) {\n return;\n }\n\n syncCalendarView(nextDate);\n focusCurrentDay();\n};\n\nconst selectDate = (date: Date) => {\n if (isDateDisabled(date)) {\n return;\n }\n\n const normalizedDate = startOfDay(date);\n const value = toDateValue(normalizedDate);\n\n syncCalendarView(normalizedDate);\n emit('update:modelValue', value);\n emit('select', value);\n closeCalendar(true);\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n if (props.disabled) {\n return;\n }\n\n if (isEscapeKey(event) && isOpen.value) {\n event.preventDefault();\n closeCalendar();\n return;\n }\n\n if (\n isActivationKey(event) ||\n event.key === 'ArrowDown' ||\n event.key === 'ArrowUp'\n ) {\n event.preventDefault();\n openCalendar();\n }\n};\n\nconst onDayKeydown = (event: KeyboardEvent, date: Date) => {\n if (isEscapeKey(event)) {\n event.preventDefault();\n closeCalendar(true);\n return;\n }\n\n if (isActivationKey(event)) {\n event.preventDefault();\n selectDate(date);\n return;\n }\n\n switch (event.key) {\n case 'ArrowLeft':\n event.preventDefault();\n moveFocus(addDays(date, -1));\n break;\n case 'ArrowRight':\n event.preventDefault();\n moveFocus(addDays(date, 1));\n break;\n case 'ArrowUp':\n event.preventDefault();\n moveFocus(addDays(date, -7));\n break;\n case 'ArrowDown':\n event.preventDefault();\n moveFocus(addDays(date, 7));\n break;\n case 'Home':\n event.preventDefault();\n moveFocus(startOfWeek(date, props.weekStartsOn));\n break;\n case 'End':\n event.preventDefault();\n moveFocus(addDays(startOfWeek(date, props.weekStartsOn), 6));\n break;\n case 'PageUp':\n event.preventDefault();\n moveFocus(addMonths(date, event.shiftKey ? -12 : -1));\n break;\n case 'PageDown':\n event.preventDefault();\n moveFocus(addMonths(date, event.shiftKey ? 12 : 1));\n break;\n default:\n break;\n }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n if (!isOpen.value) {\n return;\n }\n\n const target = event.target;\n if (!(target instanceof Node)) {\n return;\n }\n\n if (rootRef.value?.contains(target)) {\n return;\n }\n\n closeCalendar();\n};\n\nwatch(isOpen, (value) => {\n if (value) {\n document.addEventListener('pointerdown', onDocumentPointerDown);\n return;\n }\n\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n\nonBeforeUnmount(() => {\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n <div\n ref=\"rootRef\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n :data-state=\"isOpen ? 'open' : 'closed'\"\n >\n <input\n v-if=\"hiddenInputName\"\n type=\"hidden\"\n :name=\"hiddenInputName\"\n :value=\"modelValue\"\n >\n <button\n ref=\"triggerRef\"\n v-bind=\"triggerAttrs\"\n type=\"button\"\n class=\"t-date-picker__trigger\"\n :disabled=\"disabled\"\n :aria-controls=\"isOpen ? calendarId : undefined\"\n aria-haspopup=\"dialog\"\n :aria-expanded=\"isOpen\"\n :aria-invalid=\"invalid || undefined\"\n @click=\"toggleCalendar\"\n @keydown=\"onTriggerKeydown\"\n >\n <span\n v-if=\"$slots.prefix\"\n class=\"t-date-picker__slot t-date-picker__slot--prefix\"\n >\n <slot name=\"prefix\" />\n </span>\n <span\n class=\"t-date-picker__value\"\n :data-placeholder=\"selectedDate ? undefined : true\"\n >\n {{ triggerText }}\n </span>\n <span class=\"t-date-picker__slot t-date-picker__slot--suffix\">\n <slot name=\"suffix\">\n <CalendarIcon v-bind=\"treeIconDefaults\" />\n </slot>\n </span>\n </button>\n\n <transition name=\"t-fade\">\n <div\n v-if=\"isOpen && !disabled\"\n :id=\"calendarId\"\n class=\"t-date-picker__content\"\n role=\"dialog\"\n aria-modal=\"false\"\n :aria-labelledby=\"captionId\"\n >\n <div class=\"t-date-picker__header\">\n <button\n type=\"button\"\n class=\"t-date-picker__nav\"\n :disabled=\"!canMovePrev\"\n aria-label=\"Previous month\"\n @click=\"moveCalendar(-1)\"\n >\n <ChevronLeftIcon v-bind=\"treeIconDefaults\" />\n </button>\n <p\n :id=\"captionId\"\n class=\"t-date-picker__month\"\n >\n {{ monthLabel }}\n </p>\n <button\n type=\"button\"\n class=\"t-date-picker__nav\"\n :disabled=\"!canMoveNext\"\n aria-label=\"Next month\"\n @click=\"moveCalendar(1)\"\n >\n <ChevronRightIcon v-bind=\"treeIconDefaults\" />\n </button>\n </div>\n\n <div\n class=\"t-date-picker__weekdays\"\n aria-hidden=\"true\"\n >\n <span\n v-for=\"label in weekdayLabels\"\n :key=\"label\"\n class=\"t-date-picker__weekday\"\n >\n {{ label }}\n </span>\n </div>\n\n <div\n class=\"t-date-picker__grid\"\n role=\"grid\"\n :aria-labelledby=\"captionId\"\n >\n <div\n v-for=\"(week, weekIndex) in cells\"\n :key=\"weekIndex\"\n class=\"t-date-picker__row\"\n role=\"row\"\n >\n <div\n v-for=\"cell in week\"\n :key=\"cell.key\"\n class=\"t-date-picker__cell\"\n role=\"gridcell\"\n :aria-selected=\"cell.isSelected\"\n >\n <button\n :ref=\"(element) => setDayRef(element, cell.key)\"\n type=\"button\"\n class=\"t-date-picker__day\"\n :class=\"{\n 'is-muted': !cell.inMonth,\n 'is-selected': cell.isSelected,\n 'is-today': cell.isToday,\n }\"\n :data-date=\"cell.key\"\n :disabled=\"cell.disabled\"\n :tabindex=\"cell.isFocused ? 0 : -1\"\n :aria-current=\"cell.isToday ? 'date' : undefined\"\n :aria-label=\"cell.key\"\n @click=\"selectDate(cell.date)\"\n @keydown=\"onDayKeydown($event, cell.date)\"\n >\n {{ cell.dayLabel }}\n </button>\n </div>\n </div>\n </div>\n </div>\n </transition>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CA,IAAM,KAAe,EAAY,UAAU,GACrC,KAAkB,EAAY,cAAc,GAC5C,KAAmB,EAAY,eAAe,GAE9C,IAAQ,GA+BR,IAAO,GAOP,IAAQ,GAAS,GACjB,IAAQ,kBAAW,IAAI,KAAK,CAAC,GAC7B,IAAe,QAAe,EAAe,EAAM,UAAU,CAAC,GAC9D,IAAU,QAAe,EAAe,EAAM,GAAG,CAAC,GAClD,IAAU,QAAe,EAAe,EAAM,GAAG,CAAC,GAClD,IAAa,EAAM,MAAM,GAAS,eAAe,GACjD,IAAY,GAAG,EAAW,WAC1B,IAAU,EAAwB,IAAI,GACtC,IAAa,EAA8B,IAAI,GAC/C,oBAAU,IAAI,IAA+B,GAC7C,IAAY,EAAI,EAAa,EAAa,SAAS,CAAK,CAAC,GACzD,IAAc,EAAU,EAAa,SAAS,CAAK,GAEnD,KAAe,QAAe;GAClC,IAAM,EAAE,OAAO,GAAQ,OAAO,GAAQ,MAAM,GAAO,GAAG,MAAS;GAC/D,OAAO;EACT,CAAC,GAEK,IAAkB,QACtB,OAAO,EAAM,QAAS,WAAW,EAAM,OAAO,KAAA,CAChD,GAEM,KAAc,QAAe;GACjC;GACA,kBAAkB,EAAM;GACxB;IACE,eAAe,EAAM;IACrB,cAAc,EAAM;IACpB,WAAW,EAAO;GACpB;GACA,EAAM;EACR,CAAC,GAEK,KAAY,QAAe,EAAM,KAAK,GAEtC,EAAE,OAAO,GAAQ,iBAAa,EAClC,GAAM,GAAO,MAAM,GACnB,EAAM,cACL,MAAU;GAET,AADA,EAAK,eAAe,CAAK,GACzB,EAAK,eAAe,CAAK;EAC3B,CACF,GAEM,KAAc,QACb,EAAa,QAIX,IAAI,KAAK,eAAe,EAAM,QAAQ;GAC3C,KAAK;GACL,OAAO;GACP,MAAM;EACR,CAAC,CAAC,CAAC,OAAO,EAAa,KAAK,IAPnB,EAAM,WAQhB,GAEK,KAAa,QACjB,IAAI,KAAK,eAAe,EAAM,QAAQ;GACpC,OAAO;GACP,MAAM;EACR,CAAC,CAAC,CAAC,OAAO,EAAU,KAAK,CAC3B,GAEM,KAAgB,QAAe;GACnC,IAAM,IAAY,IAAI,KAAK,eAAe,EAAM,QAAQ,EAAE,SAAS,QAAQ,CAAC,GACtE,IAAW,EAAY,IAAI,KAAK,MAAM,GAAG,CAAC,GAAG,EAAM,YAAY;GAErE,OAAO,MAAM,KAAK,EAAE,QAAQ,EAAE,IAAI,GAAG,MACnC,EAAU,OAAO,EAAQ,GAAU,CAAK,CAAC,CAC3C;EACF,CAAC,GAEK,KAAkB,MAStB,GARI,EAAM,YAIN,EAAQ,SAAS,IAAO,EAAQ,SAIhC,EAAQ,SAAS,IAAO,EAAQ,QAOhC,KAAoB,MAAe;GAEvC,AADA,EAAY,QAAQ,EAAW,CAAI,GACnC,EAAU,QAAQ,EAAa,CAAI;EACrC;EAEA,EACE,IACC,MAAU;GACT,IAAI,GAAO;IACT,EAAiB,CAAK;IACtB;GACF;GAEA,AAAK,EAAO,SACV,EAAiB,CAAK;EAE1B,GACA,EAAE,WAAW,GAAK,CACpB;EAEA,IAAM,KAAQ,QAAe;GAC3B,IAAM,IAAY,EAAY,EAAa,EAAU,KAAK,GAAG,EAAM,YAAY;GAE/E,OAAO,MAAM,KAAK,EAAE,QAAQ,EAAE,IAAI,GAAG,MACnC,MAAM,KAAK,EAAE,QAAQ,EAAE,IAAI,GAAG,MAAa;IACzC,IAAM,IAAO,EAAQ,GAAW,IAAY,IAAI,CAAQ,GAClD,IAAM,EAAY,CAAI;IAE5B,OAAO;KACL;KACA,UAAU,EAAK,QAAQ;KACvB,UAAU,EAAe,CAAI;KAC7B,SAAS,EAAK,SAAS,MAAM,EAAU,MAAM,SAAS;KACtD,WAAW,EAAU,GAAM,EAAY,KAAK;KAC5C,YAAY,EAAU,GAAM,EAAa,KAAK;KAC9C,SAAS,EAAU,GAAM,CAAK;KAC9B;IACF;GACF,CAAC,CACH;EACF,CAAC,GAEK,KAAc,QAClB,CAAK,EAAQ,SAIN,EAAa,EAAU,KAAK,IAAI,EAAa,EAAQ,KAAK,CAClE,GAEK,KAAc,QAClB,CAAK,EAAQ,SAIN,EAAa,EAAU,KAAK,IAAI,EAAa,EAAQ,KAAK,CAClE,GAEK,UAAwB;GAC5B,IAAM,IAAM,EAAY,EAAY,KAAK;GACzC,SAAe;IACb,EAAQ,IAAI,CAAG,CAAC,EAAE,MAAM;GAC1B,CAAC;EACH,GAEM,MACJ,GACA,MACG;GACH,IAAI,aAAmB,mBAAmB;IACxC,EAAQ,IAAI,GAAK,CAAO;IACxB;GACF;GAEA,EAAQ,OAAO,CAAG;EACpB,GAEM,WAAqB;GACrB,EAAM,aAIV,EAAiB,EAAa,SAAS,EAAY,SAAS,CAAK,GACjE,GAAS,EAAI,GACb,EAAgB;EAClB,GAEM,KAAiB,IAAe,OAAU;GAG9C,AAFA,GAAS,EAAK,GAEV,KACF,SAAe;IACb,EAAW,OAAO,MAAM;GAC1B,CAAC;EAEL,GAEM,WAAuB;GAC3B,IAAI,EAAO,OAAO;IAChB,EAAc;IACd;GACF;GAEA,GAAa;EACf,GAEM,MAAgB,MAAsB;GAC1C,IAAM,IAAY,EAAU,EAAU,OAAO,CAAS;GAEtD,AADA,EAAiB,CAAS,GAC1B,EAAgB;EAClB,GAEM,KAAa,MAAmB;GAChC,EAAe,CAAQ,MAI3B,EAAiB,CAAQ,GACzB,EAAgB;EAClB,GAEM,MAAc,MAAe;GACjC,IAAI,EAAe,CAAI,GACrB;GAGF,IAAM,IAAiB,EAAW,CAAI,GAChC,IAAQ,EAAY,CAAc;GAKxC,AAHA,EAAiB,CAAc,GAC/B,EAAK,qBAAqB,CAAK,GAC/B,EAAK,UAAU,CAAK,GACpB,EAAc,EAAI;EACpB,GAEM,MAAoB,MAAyB;GAC7C,OAAM,UAIV;QAAI,EAAY,CAAK,KAAK,EAAO,OAAO;KAEtC,AADA,EAAM,eAAe,GACrB,EAAc;KACd;IACF;IAEA,CACE,EAAgB,CAAK,KACrB,EAAM,QAAQ,eACd,EAAM,QAAQ,eAEd,EAAM,eAAe,GACrB,GAAa;GARf;EAUF,GAEM,MAAgB,GAAsB,MAAe;GACzD,IAAI,EAAY,CAAK,GAAG;IAEtB,AADA,EAAM,eAAe,GACrB,EAAc,EAAI;IAClB;GACF;GAEA,IAAI,EAAgB,CAAK,GAAG;IAE1B,AADA,EAAM,eAAe,GACrB,GAAW,CAAI;IACf;GACF;GAEA,QAAQ,EAAM,KAAd;IACE,KAAK;KAEH,AADA,EAAM,eAAe,GACrB,EAAU,EAAQ,GAAM,EAAE,CAAC;KAC3B;IACF,KAAK;KAEH,AADA,EAAM,eAAe,GACrB,EAAU,EAAQ,GAAM,CAAC,CAAC;KAC1B;IACF,KAAK;KAEH,AADA,EAAM,eAAe,GACrB,EAAU,EAAQ,GAAM,EAAE,CAAC;KAC3B;IACF,KAAK;KAEH,AADA,EAAM,eAAe,GACrB,EAAU,EAAQ,GAAM,CAAC,CAAC;KAC1B;IACF,KAAK;KAEH,AADA,EAAM,eAAe,GACrB,EAAU,EAAY,GAAM,EAAM,YAAY,CAAC;KAC/C;IACF,KAAK;KAEH,AADA,EAAM,eAAe,GACrB,EAAU,EAAQ,EAAY,GAAM,EAAM,YAAY,GAAG,CAAC,CAAC;KAC3D;IACF,KAAK;KAEH,AADA,EAAM,eAAe,GACrB,EAAU,EAAU,GAAM,EAAM,WAAW,MAAM,EAAE,CAAC;KACpD;IACF,KAAK;KAEH,AADA,EAAM,eAAe,GACrB,EAAU,EAAU,GAAM,EAAM,WAAW,KAAK,CAAC,CAAC;KAClD;IACF,SACE;GACJ;EACF,GAEM,KAAyB,MAAwB;GACrD,IAAI,CAAC,EAAO,OACV;GAGF,IAAM,IAAS,EAAM;GACf,aAAkB,SAIpB,EAAQ,OAAO,SAAS,CAAM,KAIlC,EAAc;EAChB;SAEA,EAAM,IAAS,MAAU;GACvB,IAAI,GAAO;IACT,SAAS,iBAAiB,eAAe,CAAqB;IAC9D;GACF;GAEA,SAAS,oBAAoB,eAAe,CAAqB;EACnE,CAAC,GAED,SAAsB;GACpB,SAAS,oBAAoB,eAAe,CAAqB;EACnE,CAAC,mBAIC,EAuIM,OAAA;YAtIA;GAAJ,KAAI;GACH,OAAK,EAAE,GAAA,KAAW;GAClB,OAAK,GAAE,GAAA,KAAS;GAChB,cAAY,EAAA,CAAA,IAAM,SAAA;;GAGX,EAAA,SAAA,EAAA,GADR,EAKC,SAAA;;IAHC,MAAK;IACJ,MAAM,EAAA;IACN,OAAO,EAAA;;GAEV,EA8BS,UA9BT,GA8BS;aA7BH;IAAJ,KAAI;MACI,GAAA,OAAY;IACpB,MAAK;IACL,OAAM;IACL,UAAU,EAAA;IACV,iBAAe,EAAA,CAAA,IAAS,EAAA,CAAA,IAAa,KAAA;IACtC,iBAAc;IACb,iBAAe,EAAA,CAAA;IACf,gBAAc,EAAA,WAAW,KAAA;IACzB,SAAO;IACP,WAAS;;IAGFA,EAAAA,OAAO,UAAA,EAAA,GADf,EAKO,QALP,IAKO,CADL,EAAsB,EAAA,QAAA,QAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;IAExB,EAKO,QAAA;KAJL,OAAM;KACL,oBAAkB,GAAA,SAAe,KAAA;SAE/B,GAAA,KAAW,GAAA,GAAA,EAAA;IAEhB,EAIO,QAJP,IAIO,CAHL,EAEO,EAAA,QAAA,UAAA,CAAA,SAAA,CADL,EAA0C,EAAA,EAAA,GAAA,EAAA,EAApB,EAAA,CAAA,CAAgB,CAAA,GAAA,MAAA,EAAA,CAAA,CAAA,CAAA,CAAA;;GAK5C,EA0Fa,GAAA,EA1FD,MAAK,SAAQ,GAAA;sBAyFjB,CAvFE,EAAA,CAAA,KAAM,CAAK,EAAA,YAAA,EAAA,GADnB,EAwFM,OAAA;;KAtFH,IAAI,EAAA,CAAA;KACL,OAAM;KACN,MAAK;KACL,cAAW;KACV,mBAAiB;;KAElB,EAyBM,OAzBN,IAyBM;MAxBJ,EAQS,UAAA;OAPP,MAAK;OACL,OAAM;OACL,UAAQ,CAAG,GAAA;OACZ,cAAW;OACV,SAAK,AAAA,EAAA,QAAA,MAAE,GAAY,EAAA;UAEpB,EAA6C,EAAA,EAAA,GAAA,EAAA,EAApB,EAAA,CAAA,CAAgB,CAAA,GAAA,MAAA,EAAA,CAAA,GAAA,GAAA,EAAA;MAE3C,EAKI,KAAA;OAJD,IAAI;OACL,OAAM;WAEH,GAAA,KAAU,GAAA,CAAA;MAEf,EAQS,UAAA;OAPP,MAAK;OACL,OAAM;OACL,UAAQ,CAAG,GAAA;OACZ,cAAW;OACV,SAAK,AAAA,EAAA,QAAA,MAAE,GAAY,CAAA;UAEpB,EAA8C,EAAA,EAAA,GAAA,EAAA,EAApB,EAAA,CAAA,CAAgB,CAAA,GAAA,MAAA,EAAA,CAAA,GAAA,GAAA,EAAA;;KAI9C,EAWM,OAXN,IAWM,EAAA,EAAA,EAAA,GAPJ,EAMO,GAAA,MAAA,EALW,GAAA,QAAT,YADT,EAMO,QAAA;MAJJ,KAAK;MACN,OAAM;UAEH,CAAK,GAAA,CAAA;KAIZ,EAuCM,OAAA;MAtCJ,OAAM;MACN,MAAK;MACJ,mBAAiB;iBAElB,EAiCM,GAAA,MAAA,EAhCwB,GAAA,QAApB,GAAM,YADhB,EAiCM,OAAA;MA/BH,KAAK;MACN,OAAM;MACN,MAAK;iBAEL,EA0BM,GAAA,MAAA,EAzBW,IAAR,YADT,EA0BM,OAAA;MAxBH,KAAK,EAAK;MACX,OAAM;MACN,MAAK;MACJ,iBAAe,EAAK;SAErB,EAkBS,UAAA;;MAjBN,MAAM,MAAY,GAAU,GAAS,EAAK,GAAG;MAC9C,MAAK;MACL,OAAK,EAAA,CAAC,sBAAoB;oBACe,EAAK;sBAA0C,EAAK;mBAA0C,EAAK;;MAK3I,aAAW,EAAK;MAChB,UAAU,EAAK;MACf,UAAU,EAAK,YAAS,IAAA;MACxB,gBAAc,EAAK,UAAO,SAAY,KAAA;MACtC,cAAY,EAAK;MACjB,UAAK,MAAE,GAAW,EAAK,IAAI;MAC3B,YAAO,MAAE,GAAa,GAAQ,EAAK,IAAI;UAErC,EAAK,QAAQ,GAAA,IAAA,EAAA,CAAA,GAAA,GAAA,EAAA"}
1
+ {"version":3,"file":"TDatePicker.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../src/components/TDatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n addDays,\n addMonths,\n createId,\n isActivationKey,\n isEscapeKey,\n isSameDay,\n parseDateValue,\n startOfDay,\n startOfMonth,\n startOfWeek,\n toDateValue,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n type ComponentPublicInstance,\n computed,\n nextTick,\n onBeforeUnmount,\n ref,\n toRef,\n useAttrs,\n watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\ninterface CalendarCell {\n date: Date;\n dayLabel: number;\n disabled: boolean;\n inMonth: boolean;\n isFocused: boolean;\n isSelected: boolean;\n isToday: boolean;\n key: string;\n}\n\nconst CalendarIcon = computed(() => getTreeIcon('calendar'));\nconst ChevronLeftIcon = computed(() => getTreeIcon('chevron-left'));\nconst ChevronRightIcon = computed(() => getTreeIcon('chevron-right'));\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: string;\n open?: boolean;\n defaultOpen?: boolean;\n size?: TSize;\n disabled?: boolean;\n invalid?: boolean;\n placeholder?: string;\n locale?: string;\n min?: string;\n max?: string;\n weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n id?: string;\n }>(),\n {\n modelValue: '',\n open: undefined,\n defaultOpen: false,\n size: 'md',\n disabled: false,\n invalid: false,\n placeholder: 'Select date',\n locale: 'en-US',\n min: '',\n max: '',\n weekStartsOn: 0,\n id: undefined,\n },\n);\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string];\n 'update:open': [value: boolean];\n 'open-change': [value: boolean];\n select: [value: string];\n}>();\n\nconst attrs = useAttrs();\nconst today = startOfDay(new Date());\nconst selectedDate = computed(() => parseDateValue(props.modelValue));\nconst minDate = computed(() => parseDateValue(props.min));\nconst maxDate = computed(() => parseDateValue(props.max));\nconst calendarId = props.id ?? createId('t-date-picker');\nconst captionId = `${calendarId}-caption`;\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLButtonElement | null>(null);\nconst dayRefs = new Map<string, HTMLButtonElement>();\nconst viewMonth = ref(startOfMonth(selectedDate.value ?? today));\nconst focusedDate = ref<Date>(selectedDate.value ?? today);\n\nconst triggerAttrs = computed(() => {\n const { class: _class, style: _style, name: _name, ...rest } = attrs;\n return rest;\n});\n\nconst hiddenInputName = computed(() =>\n typeof attrs.name === 'string' ? attrs.name : undefined,\n);\n\nconst rootClasses = computed(() => [\n 't-date-picker',\n `t-date-picker--${props.size}`,\n {\n 'is-disabled': props.disabled,\n 'is-invalid': props.invalid,\n 'is-open': isOpen.value,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst { value: isOpen, setValue } = useControllableOpen(\n toRef(props, 'open'),\n props.defaultOpen,\n (value) => {\n emit('update:open', value);\n emit('open-change', value);\n },\n);\n\nconst triggerText = computed(() => {\n if (!selectedDate.value) {\n return props.placeholder;\n }\n\n return new Intl.DateTimeFormat(props.locale, {\n day: 'numeric',\n month: 'long',\n year: 'numeric',\n }).format(selectedDate.value);\n});\n\nconst monthLabel = computed(() =>\n new Intl.DateTimeFormat(props.locale, {\n month: 'long',\n year: 'numeric',\n }).format(viewMonth.value),\n);\n\nconst weekdayLabels = computed(() => {\n const formatter = new Intl.DateTimeFormat(props.locale, { weekday: 'short' });\n const weekBase = startOfWeek(new Date(2024, 0, 7), props.weekStartsOn);\n\n return Array.from({ length: 7 }, (_, index) =>\n formatter.format(addDays(weekBase, index)),\n );\n});\n\nconst isDateDisabled = (date: Date) => {\n if (props.disabled) {\n return true;\n }\n\n if (minDate.value && date < minDate.value) {\n return true;\n }\n\n if (maxDate.value && date > maxDate.value) {\n return true;\n }\n\n return false;\n};\n\nconst syncCalendarView = (date: Date) => {\n focusedDate.value = startOfDay(date);\n viewMonth.value = startOfMonth(date);\n};\n\nwatch(\n selectedDate,\n (value) => {\n if (value) {\n syncCalendarView(value);\n return;\n }\n\n if (!isOpen.value) {\n syncCalendarView(today);\n }\n },\n { immediate: true },\n);\n\nconst cells = computed(() => {\n const startDate = startOfWeek(startOfMonth(viewMonth.value), props.weekStartsOn);\n\n return Array.from({ length: 6 }, (_, weekIndex) =>\n Array.from({ length: 7 }, (_, dayIndex) => {\n const date = addDays(startDate, weekIndex * 7 + dayIndex);\n const key = toDateValue(date);\n\n return {\n date,\n dayLabel: date.getDate(),\n disabled: isDateDisabled(date),\n inMonth: date.getMonth() === viewMonth.value.getMonth(),\n isFocused: isSameDay(date, focusedDate.value),\n isSelected: isSameDay(date, selectedDate.value),\n isToday: isSameDay(date, today),\n key,\n } satisfies CalendarCell;\n }),\n );\n});\n\nconst canMovePrev = computed(() => {\n if (!minDate.value) {\n return true;\n }\n\n return startOfMonth(viewMonth.value) > startOfMonth(minDate.value);\n});\n\nconst canMoveNext = computed(() => {\n if (!maxDate.value) {\n return true;\n }\n\n return startOfMonth(viewMonth.value) < startOfMonth(maxDate.value);\n});\n\nconst focusCurrentDay = () => {\n const key = toDateValue(focusedDate.value);\n nextTick(() => {\n dayRefs.get(key)?.focus();\n });\n};\n\nconst setDayRef = (\n element: Element | ComponentPublicInstance | null,\n key: string,\n) => {\n if (element instanceof HTMLButtonElement) {\n dayRefs.set(key, element);\n return;\n }\n\n dayRefs.delete(key);\n};\n\nconst openCalendar = () => {\n if (props.disabled) {\n return;\n }\n\n syncCalendarView(selectedDate.value ?? focusedDate.value ?? today);\n setValue(true);\n focusCurrentDay();\n};\n\nconst closeCalendar = (restoreFocus = false) => {\n setValue(false);\n\n if (restoreFocus) {\n nextTick(() => {\n triggerRef.value?.focus();\n });\n }\n};\n\nconst toggleCalendar = () => {\n if (isOpen.value) {\n closeCalendar();\n return;\n }\n\n openCalendar();\n};\n\nconst moveCalendar = (direction: 1 | -1) => {\n const nextMonth = addMonths(viewMonth.value, direction);\n syncCalendarView(nextMonth);\n focusCurrentDay();\n};\n\nconst moveFocus = (nextDate: Date) => {\n if (isDateDisabled(nextDate)) {\n return;\n }\n\n syncCalendarView(nextDate);\n focusCurrentDay();\n};\n\nconst selectDate = (date: Date) => {\n if (isDateDisabled(date)) {\n return;\n }\n\n const normalizedDate = startOfDay(date);\n const value = toDateValue(normalizedDate);\n\n syncCalendarView(normalizedDate);\n emit('update:modelValue', value);\n emit('select', value);\n closeCalendar(true);\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n if (props.disabled) {\n return;\n }\n\n if (isEscapeKey(event) && isOpen.value) {\n event.preventDefault();\n closeCalendar();\n return;\n }\n\n if (\n isActivationKey(event) ||\n event.key === 'ArrowDown' ||\n event.key === 'ArrowUp'\n ) {\n event.preventDefault();\n openCalendar();\n }\n};\n\nconst onDayKeydown = (event: KeyboardEvent, date: Date) => {\n if (isEscapeKey(event)) {\n event.preventDefault();\n closeCalendar(true);\n return;\n }\n\n if (isActivationKey(event)) {\n event.preventDefault();\n selectDate(date);\n return;\n }\n\n switch (event.key) {\n case 'ArrowLeft':\n event.preventDefault();\n moveFocus(addDays(date, -1));\n break;\n case 'ArrowRight':\n event.preventDefault();\n moveFocus(addDays(date, 1));\n break;\n case 'ArrowUp':\n event.preventDefault();\n moveFocus(addDays(date, -7));\n break;\n case 'ArrowDown':\n event.preventDefault();\n moveFocus(addDays(date, 7));\n break;\n case 'Home':\n event.preventDefault();\n moveFocus(startOfWeek(date, props.weekStartsOn));\n break;\n case 'End':\n event.preventDefault();\n moveFocus(addDays(startOfWeek(date, props.weekStartsOn), 6));\n break;\n case 'PageUp':\n event.preventDefault();\n moveFocus(addMonths(date, event.shiftKey ? -12 : -1));\n break;\n case 'PageDown':\n event.preventDefault();\n moveFocus(addMonths(date, event.shiftKey ? 12 : 1));\n break;\n default:\n break;\n }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n if (!isOpen.value) {\n return;\n }\n\n const target = event.target;\n if (!(target instanceof Node)) {\n return;\n }\n\n if (rootRef.value?.contains(target)) {\n return;\n }\n\n closeCalendar();\n};\n\nwatch(isOpen, (value) => {\n if (value) {\n document.addEventListener('pointerdown', onDocumentPointerDown);\n return;\n }\n\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n\nonBeforeUnmount(() => {\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n <div\n ref=\"rootRef\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n :data-state=\"isOpen ? 'open' : 'closed'\"\n >\n <input\n v-if=\"hiddenInputName\"\n type=\"hidden\"\n :name=\"hiddenInputName\"\n :value=\"modelValue\"\n >\n <button\n ref=\"triggerRef\"\n v-bind=\"triggerAttrs\"\n type=\"button\"\n class=\"t-date-picker__trigger\"\n :disabled=\"disabled\"\n :aria-controls=\"isOpen ? calendarId : undefined\"\n aria-haspopup=\"dialog\"\n :aria-expanded=\"isOpen\"\n :aria-invalid=\"invalid || undefined\"\n @click=\"toggleCalendar\"\n @keydown=\"onTriggerKeydown\"\n >\n <span\n v-if=\"$slots.prefix\"\n class=\"t-date-picker__slot t-date-picker__slot--prefix\"\n >\n <slot name=\"prefix\" />\n </span>\n <span\n class=\"t-date-picker__value\"\n :data-placeholder=\"selectedDate ? undefined : true\"\n >\n {{ triggerText }}\n </span>\n <span class=\"t-date-picker__slot t-date-picker__slot--suffix\">\n <slot name=\"suffix\">\n <CalendarIcon v-bind=\"treeIconDefaults\" />\n </slot>\n </span>\n </button>\n\n <transition name=\"t-fade\">\n <div\n v-if=\"isOpen && !disabled\"\n :id=\"calendarId\"\n class=\"t-date-picker__content\"\n role=\"dialog\"\n aria-modal=\"false\"\n :aria-labelledby=\"captionId\"\n >\n <div class=\"t-date-picker__header\">\n <button\n type=\"button\"\n class=\"t-date-picker__nav\"\n :disabled=\"!canMovePrev\"\n aria-label=\"Previous month\"\n @click=\"moveCalendar(-1)\"\n >\n <ChevronLeftIcon v-bind=\"treeIconDefaults\" />\n </button>\n <p\n :id=\"captionId\"\n class=\"t-date-picker__month\"\n >\n {{ monthLabel }}\n </p>\n <button\n type=\"button\"\n class=\"t-date-picker__nav\"\n :disabled=\"!canMoveNext\"\n aria-label=\"Next month\"\n @click=\"moveCalendar(1)\"\n >\n <ChevronRightIcon v-bind=\"treeIconDefaults\" />\n </button>\n </div>\n\n <div\n class=\"t-date-picker__weekdays\"\n aria-hidden=\"true\"\n >\n <span\n v-for=\"label in weekdayLabels\"\n :key=\"label\"\n class=\"t-date-picker__weekday\"\n >\n {{ label }}\n </span>\n </div>\n\n <div\n class=\"t-date-picker__grid\"\n role=\"grid\"\n :aria-labelledby=\"captionId\"\n >\n <div\n v-for=\"(week, weekIndex) in cells\"\n :key=\"weekIndex\"\n class=\"t-date-picker__row\"\n role=\"row\"\n >\n <div\n v-for=\"cell in week\"\n :key=\"cell.key\"\n class=\"t-date-picker__cell\"\n role=\"gridcell\"\n :aria-selected=\"cell.isSelected\"\n >\n <button\n :ref=\"(element) => setDayRef(element, cell.key)\"\n type=\"button\"\n class=\"t-date-picker__day\"\n :class=\"{\n 'is-muted': !cell.inMonth,\n 'is-selected': cell.isSelected,\n 'is-today': cell.isToday,\n }\"\n :data-date=\"cell.key\"\n :disabled=\"cell.disabled\"\n :tabindex=\"cell.isFocused ? 0 : -1\"\n :aria-current=\"cell.isToday ? 'date' : undefined\"\n :aria-label=\"cell.key\"\n @click=\"selectDate(cell.date)\"\n @keydown=\"onDayKeydown($event, cell.date)\"\n >\n {{ cell.dayLabel }}\n </button>\n </div>\n </div>\n </div>\n </div>\n </transition>\n </div>\n</template>\n"],"mappings":"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"}