@adyen/bento-vue3 1.62.1 → 1.63.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 (146) hide show
  1. package/dist/@types/index.d.ts +181 -235
  2. package/dist/accordion.js +1 -1
  3. package/dist/action-bar.js +1 -1
  4. package/dist/assets/accordion-item.css +1 -1
  5. package/dist/assets/action-bar.css +1 -1
  6. package/dist/assets/base-modal.css +1 -1
  7. package/dist/assets/card.css +1 -1
  8. package/dist/assets/checkbox-input.css +1 -1
  9. package/dist/assets/data-grid.css +1 -1
  10. package/dist/assets/date-range-picker.css +1 -1
  11. package/dist/assets/dialog-page.css +1 -1
  12. package/dist/assets/file-uploader.css +1 -1
  13. package/dist/assets/header-with-views.css +1 -1
  14. package/dist/assets/inspector.css +1 -1
  15. package/dist/assets/listbox-option-tag.css +1 -1
  16. package/dist/assets/menu.css +1 -1
  17. package/dist/assets/modal-fullscreen.css +1 -1
  18. package/dist/assets/popover.css +1 -1
  19. package/dist/assets/sidepanel.css +1 -1
  20. package/dist/assets/use-cached-selected-values.css +1 -1
  21. package/dist/card.js +1 -1
  22. package/dist/checkbox.js +3 -3
  23. package/dist/chunks/{accordion-item.QL3wdbhL.js → accordion-item.DOnW0OnU.js} +16 -15
  24. package/dist/chunks/{accordion-item.QL3wdbhL.js.map → accordion-item.DOnW0OnU.js.map} +1 -1
  25. package/dist/chunks/{action-bar.DZhxAMLL.js → action-bar.D8eibCuD.js} +2 -2
  26. package/dist/chunks/{action-bar.DZhxAMLL.js.map → action-bar.D8eibCuD.js.map} +1 -1
  27. package/dist/chunks/{button-actions-with-menu.DhqEdBBQ.js → button-actions-with-menu.BS4gewjn.js} +2 -2
  28. package/dist/chunks/{button-actions-with-menu.DhqEdBBQ.js.map → button-actions-with-menu.BS4gewjn.js.map} +1 -1
  29. package/dist/chunks/{calendar.DW8Uy3b_.js → calendar.CLpwW_-k.js} +2 -2
  30. package/dist/chunks/{calendar.DW8Uy3b_.js.map → calendar.CLpwW_-k.js.map} +1 -1
  31. package/dist/chunks/card.DiBtLuRU.js +227 -0
  32. package/dist/chunks/card.DiBtLuRU.js.map +1 -0
  33. package/dist/chunks/{checkbox-group.Dsmy9OW5.js → checkbox-group.Aqtco8Q5.js} +2 -2
  34. package/dist/chunks/{checkbox-group.Dsmy9OW5.js.map → checkbox-group.Aqtco8Q5.js.map} +1 -1
  35. package/dist/chunks/checkbox-input.DFkwZ4GM.js +144 -0
  36. package/dist/chunks/checkbox-input.DFkwZ4GM.js.map +1 -0
  37. package/dist/chunks/{checkbox.C4dJVYbB.js → checkbox.Hl6-8Sai.js} +22 -21
  38. package/dist/chunks/{checkbox.C4dJVYbB.js.map → checkbox.Hl6-8Sai.js.map} +1 -1
  39. package/dist/chunks/chevron-down.DCQ6ZLaq.js +29 -0
  40. package/dist/chunks/chevron-down.DCQ6ZLaq.js.map +1 -0
  41. package/dist/chunks/{chevron-left.Cfn1uGLH.js → chevron-right.Brdj0WlO.js} +5 -5
  42. package/dist/chunks/chevron-right.Brdj0WlO.js.map +1 -0
  43. package/dist/chunks/chevron-up.kfuLRpZb.js +29 -0
  44. package/dist/chunks/chevron-up.kfuLRpZb.js.map +1 -0
  45. package/dist/chunks/{code-snippet.CIHRopTU.js → code-snippet.DyAfzpUj.js} +2 -2
  46. package/dist/chunks/{code-snippet.CIHRopTU.js.map → code-snippet.DyAfzpUj.js.map} +1 -1
  47. package/dist/chunks/{dashboard-section.BEpgS9FV.js → dashboard-section.Bff7RNHI.js} +3 -3
  48. package/dist/chunks/{dashboard-section.BEpgS9FV.js.map → dashboard-section.Bff7RNHI.js.map} +1 -1
  49. package/dist/chunks/{data-grid-template.DCJc9gFg.js → data-grid-template.Dt-4ta3L.js} +3 -3
  50. package/dist/chunks/{data-grid-template.DCJc9gFg.js.map → data-grid-template.Dt-4ta3L.js.map} +1 -1
  51. package/dist/chunks/{data-grid.DyEWs8hN.js → data-grid.dnbCuBF7.js} +1266 -1278
  52. package/dist/chunks/data-grid.dnbCuBF7.js.map +1 -0
  53. package/dist/chunks/{date-picker.WtLYBSvA.js → date-picker.Bfemi1um.js} +3 -3
  54. package/dist/chunks/{date-picker.WtLYBSvA.js.map → date-picker.Bfemi1um.js.map} +1 -1
  55. package/dist/chunks/date-range-picker.BJm2xOoG.js +1209 -0
  56. package/dist/chunks/date-range-picker.BJm2xOoG.js.map +1 -0
  57. package/dist/chunks/{dropdown-default-textbox.CtsO8vqZ.js → dropdown-default-textbox.B05elQig.js} +7 -6
  58. package/dist/chunks/{dropdown-default-textbox.CtsO8vqZ.js.map → dropdown-default-textbox.B05elQig.js.map} +1 -1
  59. package/dist/chunks/{dropdown-tag.B3zx-Qsj.js → dropdown-tag.CQMkfl3K.js} +3 -3
  60. package/dist/chunks/{dropdown-tag.B3zx-Qsj.js.map → dropdown-tag.CQMkfl3K.js.map} +1 -1
  61. package/dist/chunks/{dropdown.D5PRxQgj.js → dropdown.BPQS22Kl.js} +3 -3
  62. package/dist/chunks/{dropdown.D5PRxQgj.js.map → dropdown.BPQS22Kl.js.map} +1 -1
  63. package/dist/chunks/es6.n1ewaW31.js.map +1 -1
  64. package/dist/chunks/{filter-bar.D1aerbpR.js → filter-bar.BNMR3HZ5.js} +15 -14
  65. package/dist/chunks/{filter-bar.D1aerbpR.js.map → filter-bar.BNMR3HZ5.js.map} +1 -1
  66. package/dist/chunks/{fixed-scroller.Cmi0TpjZ.js → fixed-scroller.D5nAPPbo.js} +31 -31
  67. package/dist/chunks/fixed-scroller.D5nAPPbo.js.map +1 -0
  68. package/dist/chunks/{header-with-views.DAdB-PI8.js → header-with-views.go02TaiU.js} +435 -435
  69. package/dist/chunks/header-with-views.go02TaiU.js.map +1 -0
  70. package/dist/chunks/{header.D94roWI-.js → header.CLg3TLJs.js} +2 -2
  71. package/dist/chunks/{header.D94roWI-.js.map → header.CLg3TLJs.js.map} +1 -1
  72. package/dist/chunks/{input-field-password.BZMhU9Ry.js → input-field-password.B5zx9e4K.js} +3 -3
  73. package/dist/chunks/{input-field-password.BZMhU9Ry.js.map → input-field-password.B5zx9e4K.js.map} +1 -1
  74. package/dist/chunks/{input-field-phone-number.BNlaejr8.js → input-field-phone-number.DqfmWaJ2.js} +3 -3
  75. package/dist/chunks/{input-field-phone-number.BNlaejr8.js.map → input-field-phone-number.DqfmWaJ2.js.map} +1 -1
  76. package/dist/chunks/{input-field.CeKszPdB.js → input-field.CfsdWr4t.js} +2 -2
  77. package/dist/chunks/{input-field.CeKszPdB.js.map → input-field.CfsdWr4t.js.map} +1 -1
  78. package/dist/chunks/listbox-option-tag.0fIXV0Bs.js +57 -0
  79. package/dist/chunks/listbox-option-tag.0fIXV0Bs.js.map +1 -0
  80. package/dist/chunks/menu.CCDxWQPw.js +679 -0
  81. package/dist/chunks/menu.CCDxWQPw.js.map +1 -0
  82. package/dist/chunks/minus-small.DYIyF5XW.js +32 -0
  83. package/dist/chunks/minus-small.DYIyF5XW.js.map +1 -0
  84. package/dist/chunks/{pagination.Dt7_h6Fq.js → pagination.BKyr5hq_.js} +2 -2
  85. package/dist/chunks/{pagination.Dt7_h6Fq.js.map → pagination.BKyr5hq_.js.map} +1 -1
  86. package/dist/chunks/{rich-text-editor.CnoXCpHV.js → rich-text-editor.BK2zdyOm.js} +2 -2
  87. package/dist/chunks/{rich-text-editor.CnoXCpHV.js.map → rich-text-editor.BK2zdyOm.js.map} +1 -1
  88. package/dist/chunks/{search-bar.Bw8AFQFl.js → search-bar.DgOHq0ns.js} +3 -3
  89. package/dist/chunks/{search-bar.Bw8AFQFl.js.map → search-bar.DgOHq0ns.js.map} +1 -1
  90. package/dist/chunks/{secondary-nav.B8u1MnnX.js → secondary-nav.BHpoi5U4.js} +2 -2
  91. package/dist/chunks/{secondary-nav.B8u1MnnX.js.map → secondary-nav.BHpoi5U4.js.map} +1 -1
  92. package/dist/chunks/{selection-card-group.0tHKJZ1M.js → selection-card-group.-8bXRhOW.js} +2 -2
  93. package/dist/chunks/{selection-card-group.0tHKJZ1M.js.map → selection-card-group.-8bXRhOW.js.map} +1 -1
  94. package/dist/chunks/{tabs.CkDHEdGa.js → tabs.Cq1fdzVh.js} +2 -2
  95. package/dist/chunks/{tabs.CkDHEdGa.js.map → tabs.Cq1fdzVh.js.map} +1 -1
  96. package/dist/chunks/{tutorial.vue_vue_type_script_setup_true_lang.20XC06Eu.js → tutorial.vue_vue_type_script_setup_true_lang.BlSsK0Rr.js} +2 -2
  97. package/dist/chunks/{tutorial.vue_vue_type_script_setup_true_lang.20XC06Eu.js.map → tutorial.vue_vue_type_script_setup_true_lang.BlSsK0Rr.js.map} +1 -1
  98. package/dist/chunks/{use-cached-selected-values.CNbV3lQs.js → use-cached-selected-values.swt0cdsA.js} +602 -570
  99. package/dist/chunks/use-cached-selected-values.swt0cdsA.js.map +1 -0
  100. package/dist/code-snippet.js +1 -1
  101. package/dist/dashboard-template.js +1 -1
  102. package/dist/data-grid-template.js +1 -1
  103. package/dist/data-grid.js +1 -1
  104. package/dist/date-picker.js +2 -2
  105. package/dist/date-range-picker.js +2 -2
  106. package/dist/dropdown.js +4 -4
  107. package/dist/filter-bar.js +1 -1
  108. package/dist/header-with-views.js +1 -1
  109. package/dist/header.js +1 -1
  110. package/dist/index.js +31 -31
  111. package/dist/input-field-password.js +1 -1
  112. package/dist/input-field-phone-number.js +1 -1
  113. package/dist/input-field.js +1 -1
  114. package/dist/internal.js +5 -5
  115. package/dist/menu.js +1 -1
  116. package/dist/pagination.js +1 -1
  117. package/dist/rich-text-editor.js +1 -1
  118. package/dist/search-bar.js +2 -2
  119. package/dist/secondary-nav.js +1 -1
  120. package/dist/selection-card.js +1 -1
  121. package/dist/styles/bento-dark.css +4 -0
  122. package/dist/styles/bento-light.css +4 -0
  123. package/dist/styles/bento.css +4 -0
  124. package/dist/styles/legacy.css +4 -0
  125. package/dist/styles/styleguide.css +4 -0
  126. package/dist/tabs.js +1 -1
  127. package/dist/tutorial.js +1 -1
  128. package/dist/web-types.json +1 -1
  129. package/package.json +6 -6
  130. package/dist/chunks/card.CxeuIcpZ.js +0 -213
  131. package/dist/chunks/card.CxeuIcpZ.js.map +0 -1
  132. package/dist/chunks/checkbox-input.BhAIj6Cq.js +0 -168
  133. package/dist/chunks/checkbox-input.BhAIj6Cq.js.map +0 -1
  134. package/dist/chunks/chevron-left.Cfn1uGLH.js.map +0 -1
  135. package/dist/chunks/chevron-up.MAa3Ksgd.js +0 -52
  136. package/dist/chunks/chevron-up.MAa3Ksgd.js.map +0 -1
  137. package/dist/chunks/data-grid.DyEWs8hN.js.map +0 -1
  138. package/dist/chunks/date-range-picker.CFicalpy.js +0 -1181
  139. package/dist/chunks/date-range-picker.CFicalpy.js.map +0 -1
  140. package/dist/chunks/fixed-scroller.Cmi0TpjZ.js.map +0 -1
  141. package/dist/chunks/header-with-views.DAdB-PI8.js.map +0 -1
  142. package/dist/chunks/listbox-option-tag.WzftYVP_.js +0 -55
  143. package/dist/chunks/listbox-option-tag.WzftYVP_.js.map +0 -1
  144. package/dist/chunks/menu.DOKYXlFy.js +0 -768
  145. package/dist/chunks/menu.DOKYXlFy.js.map +0 -1
  146. package/dist/chunks/use-cached-selected-values.CNbV3lQs.js.map +0 -1
@@ -1,1181 +0,0 @@
1
- import { reactive as Te, defineComponent as ze, computed as b, ref as A, onMounted as Je, toRaw as Ie, resolveComponent as k, createElementBlock as Se, openBlock as O, createElementVNode as $, createCommentVNode as F, renderSlot as Fe, createBlock as V, createVNode as K, withCtx as L, createTextVNode as re, normalizeClass as ke, toRef as _e, watch as Re, resolveDirective as ft, withDirectives as pt, withKeys as vt, toDisplayString as gt, createSlots as yt } from "vue";
2
- import { B as Tt } from "./divider.qUOSAbU6.js";
3
- import { B as bt } from "./popover.maCMPyz8.js";
4
- import { B as Xe, d as Rt } from "./typography.DN5eC5ch.js";
5
- import { D as It } from "./dropdown-default-textbox.CtsO8vqZ.js";
6
- import { r as M, t as X, g as Ee } from "./get-date-locale.BN8xEjY0.js";
7
- import { g as de } from "./generate-uid.NJ8tVoha.js";
8
- import { u as he } from "./i18n.B6g5VX0q.js";
9
- import { t as De, f as ce } from "./date.CKXySBQv.js";
10
- import { e as Ze, f as me, i as Y, g as se, h as Ue, j as St, k as Be, l as kt, s as Ne, m as Et, n as Pe, a as J, u as ht } from "./calendar.DW8Uy3b_.js";
11
- import { f as qe, v as wt, D as E } from "./date-input.BqBdAO1E.js";
12
- import { u as Ot } from "./use-form-layout-loading.D3lALhtC.js";
13
- import { B as Mt } from "./directive.Cbdox5VL.js";
14
- import "./events.FNmSWp_P.js";
15
- import { B as Ct } from "./input-field.CeKszPdB.js";
16
- import { B as At } from "./dropdown.D5PRxQgj.js";
17
- import { B as Ft } from "./segmented-control.CZpx9H-d.js";
18
- import { d as ge } from "./debounce.DUTu11PS.js";
19
- import { u as _t } from "./use-has-slot.B7eQSabc.js";
20
- import { e as j, a as $e } from "./index.BDuTpjD8.js";
21
- import { _ as xe } from "./_plugin-vue_export-helper.CHgC5LLL.js";
22
- import { F as Ut, E as Bt } from "./error-message.C9YtK-P0.js";
23
- import { B as Nt, c as Pt } from "./button-actions.D1pXI1AJ.js";
24
- import "../assets/date-range-picker.css";
25
- function et(e, a) {
26
- M(2, arguments);
27
- var l = De(a), i = l * 3;
28
- return Ze(e, i);
29
- }
30
- function Le(e) {
31
- M(1, arguments);
32
- var a = X(e), l = Math.floor(a.getMonth() / 3) + 1;
33
- return l;
34
- }
35
- function Ye(e) {
36
- return M(1, arguments), X(e).getFullYear();
37
- }
38
- function qt(e, a) {
39
- M(2, arguments);
40
- var l = X(e), i = X(a);
41
- return l.getTime() === i.getTime();
42
- }
43
- function $t(e, a) {
44
- M(2, arguments);
45
- var l = me(e), i = me(a);
46
- return l.getTime() === i.getTime();
47
- }
48
- function Ve(e) {
49
- M(1, arguments);
50
- var a = X(e);
51
- return a.setMilliseconds(0), a;
52
- }
53
- function Ke(e, a) {
54
- M(2, arguments);
55
- var l = Ve(e), i = Ve(a);
56
- return l.getTime() === i.getTime();
57
- }
58
- function Lt(e) {
59
- return M(1, arguments), Y(e, Date.now());
60
- }
61
- function Yt(e, a) {
62
- M(2, arguments);
63
- var l = X(e), i = De(a);
64
- return l.setHours(i), l;
65
- }
66
- function Vt(e, a) {
67
- M(2, arguments);
68
- var l = X(e), i = De(a);
69
- return l.setMinutes(i), l;
70
- }
71
- function Kt(e, a) {
72
- M(2, arguments);
73
- var l = X(e), i = De(a);
74
- return l.setSeconds(i), l;
75
- }
76
- function jt(e, a) {
77
- M(2, arguments);
78
- var l = De(a);
79
- return et(e, -l);
80
- }
81
- function oe(e) {
82
- if (e == null)
83
- return se(/* @__PURE__ */ new Date());
84
- const [a, l, i] = e.split("-").map((s) => parseInt(s, 10));
85
- return new Date(a, l - 1, i);
86
- }
87
- const Qt = ({
88
- firstDayOfWeek: e,
89
- min: a,
90
- max: l
91
- }) => ({ getGranularCalendarLimits: (s) => {
92
- let c = se(a), D = j(l);
93
- if ((s == null ? void 0 : s.type) === "weekly") {
94
- if (s.earliest)
95
- c = se(s.earliest);
96
- else {
97
- const n = Ue(c, { weekStartsOn: e });
98
- Y(c, n) || (c = se(St(Be(c, { weekStartsOn: e }), 1)));
99
- }
100
- if (s.latest)
101
- D = j(s.latest);
102
- else {
103
- const n = Be(D, { weekStartsOn: e });
104
- Y(D, n) || (D = j(kt(Ue(D, { weekStartsOn: e }), 1)));
105
- }
106
- }
107
- if ((s == null ? void 0 : s.type) === "monthly") {
108
- if (s.earliest)
109
- c = se(s.earliest);
110
- else {
111
- const n = Ne(c);
112
- Y(c, n) || (c = Ne(Ze(c, 1)));
113
- }
114
- if (s.latest)
115
- D = j(s.latest);
116
- else {
117
- const n = $e(D);
118
- Y(D, n) || (D = $e(Et(D, 1)));
119
- }
120
- }
121
- if ((s == null ? void 0 : s.type) === "quarterly") {
122
- if (s.earliest)
123
- c = me(s.earliest);
124
- else {
125
- const n = me(c);
126
- Y(c, n) || (c = me(et(c, 1)));
127
- }
128
- if (s.latest)
129
- D = j(s.latest);
130
- else {
131
- const n = Pe(D);
132
- Y(D, n) || (D = Pe(jt(D, 1)));
133
- }
134
- }
135
- return { min: c, max: D };
136
- } }), Gt = () => {
137
- const e = Te({
138
- daily: null,
139
- weekly: null,
140
- monthly: null,
141
- quarterly: null
142
- });
143
- return {
144
- savedRanges: e,
145
- saveRange: (i, s) => {
146
- e[i] = s;
147
- },
148
- resetSavedRanges: () => {
149
- e.daily = null, e.weekly = null, e.monthly = null, e.quarterly = null;
150
- }
151
- };
152
- };
153
- var T = /* @__PURE__ */ ((e) => (e.CUSTOM_RANGE = "custom-range", e.INPUT = "input", e.ERROR = "error", e.FORM_DATE = "form-date", e.START_DATE_SELECTED = "start-date-selected", e))(T || {});
154
- const Ht = /[\d]/, Wt = /^\d{2}$/, zt = /^\d{2}:\d{2}$/, Jt = (e) => {
155
- const { selectionStart: a } = e.target, l = ["Backspace", "Tab", "ArrowLeft", "ArrowRight"], i = Ht.test(e.key) || l.includes(e.key), s = [1, 2, 4, 5].includes(a) && e.key === ":";
156
- !i && !s && e.preventDefault();
157
- }, je = (e) => {
158
- if (!e)
159
- return e;
160
- let a = e;
161
- if (a.length === 1 && parseInt(e, 10) > 2)
162
- return `0${a}:`;
163
- const [l, i] = a.slice(-2);
164
- return [2, 5].includes(a.length) && i === ":" && (a = `${a.slice(0, a.length - 2)}0${l}`), (Wt.test(a) || zt.test(a)) && (a += ":"), a;
165
- }, Qe = {
166
- "en-US": {
167
- customRange: "Custom range",
168
- daily: "Daily",
169
- dateFrom: "Date from",
170
- dateTo: "Date to",
171
- lastMonth: "Last month",
172
- lastSevenDays: "Last 7 days",
173
- lastThreeMonths: "Last three months",
174
- monthly: "Monthly",
175
- quarterly: "Quarterly",
176
- timeFrom: "Time from",
177
- timeTo: "Time to",
178
- weekly: "Weekly"
179
- },
180
- "ja-JP": {
181
- customRange: "カスタム範囲を選択",
182
- daily: "毎日",
183
- lastMonth: "先月",
184
- lastSevenDays: "過去7日間",
185
- monthly: "毎月",
186
- weekly: "毎週"
187
- },
188
- "pt-BR": {
189
- customRange: "Selecione um intervalo personalizado",
190
- daily: "Diário",
191
- lastMonth: "Último mês",
192
- lastSevenDays: "Últimos 7 dias",
193
- monthly: "Mensal",
194
- weekly: "Semanal"
195
- }
196
- }, Ge = 300, He = "customRange", Xt = ze({
197
- i18n: { messages: Qe },
198
- name: "date-range-picker-calendar",
199
- components: {
200
- BentoDropdown: At,
201
- BentoInputField: Ct,
202
- BentoSegmentedControl: Ft,
203
- BentoTypography: Xe,
204
- Calendar: J
205
- },
206
- props: {
207
- /**
208
- * Allows user to enter time values in the form
209
- */
210
- allowTimeInput: { type: Boolean, default: !1 },
211
- /**
212
- * Ranges form persistance data
213
- */
214
- dateFormData: {
215
- type: Object,
216
- default: () => ({ startDate: void 0, endDate: void 0, startTime: void 0, endTime: void 0 })
217
- },
218
- /**
219
- * Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday
220
- */
221
- firstDayOfWeek: J.props.firstDayOfWeek,
222
- /**
223
- * A list of available granularities.
224
- * If present, the date picker will display a segmented control to change granularity.
225
- */
226
- granularities: {
227
- type: Array,
228
- default: null
229
- },
230
- /**
231
- * Indicate if a date should be disabled or not
232
- */
233
- isDateDisabled: J.props.isDateDisabled,
234
- /**
235
- * Set a maximum number of dates to be selectable by the range.
236
- */
237
- maxRange: J.props.maxRange,
238
- /**
239
- * Sets a minimum limit for selectable dates - dates before `min` will not be selectable
240
- */
241
- min: J.props.min,
242
- /**
243
- * Sets a maximum limit for selectable dates - dates after `max` will not be selectable
244
- */
245
- max: J.props.max,
246
- /**
247
- * Number of months rendered on pane
248
- */
249
- numberOfMonths: J.props.numberOfMonths,
250
- /**
251
- * Displays the end date's month when the calendar is opened. Defaults to false i.e. the start date's month is displayed.
252
- */
253
- showEndDateOnOpen: { type: Boolean, default: !1 },
254
- /**
255
- * Enables the custom range selector.
256
- * If provided, must be an array that sets the custom range dropdown items. Items are of the structure:
257
- * `label` - label of custom range item.
258
- * `value` - a unique key of the custom range item.
259
- * `data` - an object `{ startDate: Date; endDate: Date }` to set the date picker range to upon selecting.
260
- */
261
- quickSelectRanges: {
262
- type: Array,
263
- default: void 0
264
- },
265
- /**
266
- * Selected date
267
- */
268
- value: { type: Object, default: void 0 },
269
- /**
270
- * The type of calendar to display. Defaults to showing days.
271
- */
272
- variant: J.props.variant
273
- },
274
- emits: [
275
- T.CUSTOM_RANGE,
276
- T.INPUT,
277
- T.ERROR,
278
- T.FORM_DATE,
279
- T.START_DATE_SELECTED
280
- ],
281
- setup(e, { emit: a, slots: l }) {
282
- var Oe, Me, Ce, Ae;
283
- const { locale: i, t: s } = he({ messages: Qe }), c = Ee(), D = b(() => e.variant === "month" ? "monthly" : "daily"), n = Te({
284
- startDate: (Oe = e.value) == null ? void 0 : Oe.startDate,
285
- endDate: (Me = e.value) == null ? void 0 : Me.endDate,
286
- range: (Ce = e.value) == null ? void 0 : Ce.range,
287
- ...e.granularities ? {
288
- granularity: ((Ae = e.value) == null ? void 0 : Ae.granularity) || D.value
289
- } : {}
290
- });
291
- function p(t) {
292
- return t ? new Date(
293
- t.getUTCFullYear(),
294
- t.getUTCMonth(),
295
- t.getUTCDate(),
296
- t.getUTCHours(),
297
- t.getUTCMinutes(),
298
- t.getUTCSeconds()
299
- ) : null;
300
- }
301
- const v = b(() => {
302
- var t, o;
303
- return (
304
- // eslint-disable-next-line consistent-return
305
- ((o = (t = e == null ? void 0 : e.quickSelectRanges) == null ? void 0 : t.find(({ value: u, data: m }) => {
306
- if (!m.endDate)
307
- return u === n.range || qt(
308
- p(m.startDate),
309
- p(n.startDate)
310
- ) && Lt(n.endDate);
311
- if (e.allowTimeInput)
312
- return Ke(
313
- p(m.startDate),
314
- p(n.startDate)
315
- ) && Ke(p(m.endDate), p(n.endDate));
316
- if (m.endDate)
317
- return Y(m.startDate, n.startDate) && Y(m.endDate, n.endDate);
318
- })) == null ? void 0 : o.value) ?? He
319
- );
320
- }), Q = b(() => ({
321
- "b-date-range-picker-calendar__form-input-wrapper": e.allowTimeInput
322
- })), Z = b(() => [
323
- { label: s("customRange"), value: He },
324
- ...e.quickSelectRanges ? e.quickSelectRanges : []
325
- ]), g = b(
326
- () => {
327
- var t;
328
- return ((t = e.granularities) == null ? void 0 : t.find(({ type: o }) => o === n.granularity)) || null;
329
- }
330
- ), G = b(
331
- () => {
332
- var t;
333
- return ((t = e.granularities) == null ? void 0 : t.map(({ type: o, disabled: u }) => ({
334
- label: s(o),
335
- value: o,
336
- disabled: u
337
- }))) ?? [];
338
- }
339
- ), { getGranularCalendarLimits: I } = Qt(e), y = b(
340
- () => e.granularities ? I(g.value) : { min: se(e.min), max: j(e.max) }
341
- ), {
342
- adjustDateForQuarterly: h,
343
- adjustDateForMonthly: x,
344
- adjustDateForWeekly: le,
345
- adjustStartDateInputForWeekly: _,
346
- adjustEndDateInputForWeekly: f,
347
- adjustStartDateInputForMonthly: U,
348
- adjustEndDateInputForMonthly: B,
349
- adjustStartDateInputForQuarterly: ee,
350
- adjustEndDateInputForQuarterly: be
351
- } = ht(e.firstDayOfWeek), { savedRanges: N, saveRange: fe, resetSavedRanges: P } = Gt(), R = (t) => t ? ce(t, E.NUMERIC_DATE_YEAR_FIRST, {
352
- locale: c[i.value.substring(0, 2)] || c.enUS
353
- }) : "", H = (t) => t ? ce(t, E.HOUR_MINUTE_SECONDS, {
354
- locale: c[i.value.substring(0, 2)] || c.enUS
355
- }) : "", W = A(!1), z = A(!1), te = A(!1), ae = A(!1), r = Te({
356
- startDate: e.dateFormData.startDate,
357
- endDate: e.dateFormData.endDate,
358
- startTime: e.dateFormData.startTime,
359
- endTime: e.dateFormData.endTime
360
- }), pe = (t) => /^(?:[01]\d|2[01234]):(?:[012345]\d):(?:[012345]\d)$/.test(t), w = (t, o) => {
361
- if (!o || !pe(o) || e.variant === "month")
362
- return t;
363
- let u = new Date(t);
364
- const [m, S, ne] = o.split(":");
365
- return u = Yt(u, parseInt(m, 10)), u = Vt(u, parseInt(S, 10)), u = Kt(u, parseInt(ne, 10)), u;
366
- }, we = (t) => {
367
- r.startTime = H(se(t.startDate)), r.endTime = H(j(t.endDate)), n.startDate = w(t.startDate, r.startTime), n.endDate = w(t.endDate, r.endTime), n.range = null, e.granularities && P(), a(T.INPUT, {
368
- ...n,
369
- range: v.value
370
- });
371
- }, d = (t) => {
372
- const o = (m) => e.min && m <= e.min || e.max && m >= e.max ? !1 : e.isDateDisabled ? !e.isDateDisabled(m) : !0;
373
- return /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$/.test(t) && o(new Date(t));
374
- };
375
- Je(() => {
376
- e.dateFormData.startDate && !d(e.dateFormData.startDate) ? W.value = !0 : (W.value = !1, te.value = !1), e.dateFormData.endDate && !d(e.dateFormData.endDate) ? z.value = !0 : (z.value = !1, ae.value = !1);
377
- });
378
- const C = (t) => {
379
- var o;
380
- r.startDate = R(t), r.startTime ? te.value && (r.startTime = (o = e.dateFormData) == null ? void 0 : o.startTime) : r.startTime = H(t), W.value = !1, te.value = !1, a(T.START_DATE_SELECTED, t);
381
- }, ie = (t) => {
382
- var o;
383
- r.endDate = R(t), r.endTime ? ae.value && (r.endTime = (o = e.dateFormData) == null ? void 0 : o.endTime) : r.endTime = H(j(t)), z.value = !1, ae.value = !1;
384
- }, ue = (t) => {
385
- const o = e.value[t];
386
- if (o)
387
- return o;
388
- if (e.dateFormData[t] && d(e.dateFormData[t]))
389
- return new Date(e.dateFormData[t]);
390
- }, tt = ge((t) => {
391
- var o;
392
- if (d(t)) {
393
- let u = t;
394
- switch (W.value = !1, (o = g.value) == null ? void 0 : o.type) {
395
- case "weekly":
396
- u = _(
397
- t,
398
- R,
399
- y.value.min,
400
- y.value.max
401
- ), r.startDate = u;
402
- break;
403
- case "monthly":
404
- u = U(
405
- t,
406
- R,
407
- y.value.min,
408
- y.value.max
409
- ), r.startDate = u;
410
- break;
411
- case "quarterly":
412
- u = ee(
413
- t,
414
- R,
415
- y.value.min,
416
- y.value.max
417
- ), r.startDate = u;
418
- break;
419
- }
420
- const m = oe(u);
421
- n.startDate = w(m, r.startTime), n.endDate = w(
422
- oe(r.endDate),
423
- r.endTime
424
- ), d(r.endDate) && (n.endDate = w(
425
- oe(r.endDate),
426
- r.endTime
427
- ));
428
- const S = ue("endDate");
429
- n.range = null, a(T.FORM_DATE, {
430
- startDate: m,
431
- endDate: S
432
- }), a(T.INPUT, {
433
- ...n,
434
- range: v.value
435
- });
436
- } else
437
- W.value = !0, a(T.ERROR, { ...r });
438
- }, Ge), at = (t) => {
439
- r.startDate = qe(t), tt(r.startDate);
440
- }, nt = ge((t) => {
441
- var o;
442
- if (d(t)) {
443
- let u = t;
444
- switch (z.value = !1, (o = g.value) == null ? void 0 : o.type) {
445
- case "weekly":
446
- u = f(
447
- t,
448
- R,
449
- y.value.min,
450
- y.value.max
451
- ), r.endDate = u;
452
- break;
453
- case "monthly":
454
- u = B(
455
- t,
456
- R,
457
- y.value.min,
458
- y.value.max
459
- ), r.endDate = u;
460
- break;
461
- case "quarterly":
462
- u = be(
463
- t,
464
- R,
465
- y.value.min,
466
- y.value.max
467
- ), r.endDate = u;
468
- break;
469
- }
470
- const m = oe(u);
471
- n.endDate = w(m, r.endTime), d(r.startDate) && (n.startDate = w(
472
- oe(r.startDate),
473
- r.startTime
474
- ));
475
- const S = ue("startDate");
476
- n.range = null, a(T.FORM_DATE, {
477
- startDate: S,
478
- endDate: m
479
- }), a(T.INPUT, {
480
- ...n,
481
- range: v.value
482
- });
483
- } else
484
- z.value = !0, a(T.ERROR, { ...r });
485
- }, Ge), rt = (t) => {
486
- r.endDate = qe(t), nt(r.endDate);
487
- }, ot = (t) => {
488
- wt(t);
489
- }, st = ge((t) => {
490
- if (pe(t)) {
491
- te.value = !1, n.startDate = w(n.startDate, t);
492
- const o = ue("endDate");
493
- a(T.FORM_DATE, {
494
- startDate: new Date(n.startDate),
495
- endDate: o,
496
- startTime: t,
497
- endTime: e.dateFormData.endTime
498
- }), a(T.INPUT, {
499
- ...n,
500
- range: v.value
501
- });
502
- } else
503
- te.value = !0, a(T.ERROR, { ...r });
504
- }), lt = ge((t) => {
505
- if (pe(t)) {
506
- ae.value = !1, n.endDate = w(n.endDate, t);
507
- const o = ue("startDate");
508
- n.startDate = w(new Date(o), e.dateFormData.startTime), a(T.FORM_DATE, {
509
- startDate: w(new Date(o), e.dateFormData.startTime),
510
- endDate: new Date(n.endDate),
511
- startTime: e.dateFormData.startTime,
512
- endTime: t
513
- }), a(T.INPUT, {
514
- ...n,
515
- range: v.value
516
- });
517
- } else
518
- ae.value = !0, a(T.ERROR, { ...r });
519
- }), it = (t) => {
520
- r.startTime = je(t), st(r.startTime);
521
- }, ut = (t) => {
522
- r.endTime = je(t), lt(r.endTime);
523
- }, dt = (t) => {
524
- Jt(t);
525
- }, ve = (t, o, u, m) => {
526
- n.startDate = t, n.endDate = o, u && (n.granularity = u), m && (n.range = m);
527
- }, mt = (t) => {
528
- var u;
529
- const o = (u = e.quickSelectRanges) == null ? void 0 : u.find(({ value: m }) => m === t);
530
- if (o) {
531
- P();
532
- const m = o.data, S = m.endDate || (m.isRelativeToNow ? new Date(Date.now()) : j(new Date(Date.now()))), ne = m.isRelativeToNow && m.timeDifference ? new Date(S.getTime() - m.timeDifference) : m.startDate;
533
- r.endDate = R(S), r.startDate = R(ne), ve(ne, S, null, t), e.granularities && (n.granularity = m.granularity || D.value), r.startTime = H(ne), r.endTime = H(S), n.startDate = ne, n.endDate = S, a(T.CUSTOM_RANGE, {
534
- ...o.data,
535
- startDate: ne,
536
- endDate: S,
537
- range: o.value
538
- });
539
- }
540
- }, ct = {
541
- weekly: le,
542
- monthly: x,
543
- quarterly: h
544
- }, Dt = (t) => {
545
- const o = n.granularity;
546
- if (n.granularity = t, o && fe(o, structuredClone(Ie(n))), n.startDate && n.endDate) {
547
- switch (t) {
548
- case "quarterly":
549
- case "monthly":
550
- case "weekly": {
551
- if (N[t]) {
552
- ve(N[t].startDate, N[t].endDate, t);
553
- break;
554
- }
555
- const { startDate: u, endDate: m } = ct[t](
556
- n.startDate,
557
- n.endDate,
558
- y.value.min,
559
- y.value.max
560
- );
561
- ve(u, m, t);
562
- break;
563
- }
564
- case "daily":
565
- N.daily && ve(N.daily.startDate, N.daily.endDate, t);
566
- break;
567
- }
568
- r.startDate = R(n.startDate), r.endDate = R(n.endDate), a(T.INPUT, {
569
- ...n,
570
- range: v.value
571
- });
572
- }
573
- };
574
- return {
575
- // Values
576
- internalRangeDate: n,
577
- dateTextInput: r,
578
- endDateError: z,
579
- endTimeError: ae,
580
- granularityItems: G,
581
- selectedGranularity: g,
582
- computedMinMax: y,
583
- selectedRangeSelectorValue: v,
584
- startDateError: W,
585
- startTimeError: te,
586
- quickSelectRangeDefaultItems: Z,
587
- formInputWrapperConditionalClasses: Q,
588
- // Methods
589
- hasSlot: _t(l),
590
- t: s,
591
- // Events
592
- onDateInput: we,
593
- onDateInputKeyDown: ot,
594
- onEndDateInput: rt,
595
- onEndDateSelected: ie,
596
- onEndTimeInput: ut,
597
- onGranularityInput: Dt,
598
- onRangeSelectorInput: mt,
599
- onStartDateInput: at,
600
- onStartDateSelected: C,
601
- onStartTimeInput: it,
602
- onTimeInputKeyDown: dt
603
- };
604
- }
605
- }), Zt = { class: "b-date-range-picker-calendar" }, xt = { class: "b-date-range-picker-calendar__form-container" }, ea = { class: "b-date-range-picker-calendar__form" }, ta = { key: 0 }, aa = { class: "b-date-range-picker-calendar__calendars-container" };
606
- function na(e, a, l, i, s, c) {
607
- const D = k("bento-dropdown"), n = k("bento-segmented-control"), p = k("bento-typography"), v = k("bento-input-field"), Q = k("calendar");
608
- return O(), Se("div", Zt, [
609
- $("div", xt, [
610
- $("div", ea, [
611
- e.hasSlot("title") ? Fe(e.$slots, "title", { key: 0 }, void 0, !0) : F("", !0),
612
- e.quickSelectRanges ? (O(), V(D, {
613
- key: 1,
614
- "aria-label": e.t("customRange"),
615
- items: e.quickSelectRangeDefaultItems,
616
- value: e.selectedRangeSelectorValue,
617
- onInput: e.onRangeSelectorInput
618
- }, null, 8, ["aria-label", "items", "value", "onInput"])) : F("", !0),
619
- e.granularities ? (O(), V(n, {
620
- key: 2,
621
- items: e.granularityItems,
622
- "model-value": e.internalRangeDate.granularity,
623
- "full-width": "",
624
- "onUpdate:modelValue": e.onGranularityInput
625
- }, null, 8, ["items", "model-value", "onUpdate:modelValue"])) : F("", !0),
626
- $("div", null, [
627
- K(p, {
628
- stronger: "",
629
- el: "span",
630
- class: "b-date-range-picker-calendar__label"
631
- }, {
632
- default: L(() => a[0] || (a[0] = [
633
- re(" From ")
634
- ])),
635
- _: 1
636
- }),
637
- $("div", {
638
- class: ke(e.formInputWrapperConditionalClasses)
639
- }, [
640
- K(v, {
641
- "aria-label": e.t("dateFrom"),
642
- value: e.dateTextInput.startDate,
643
- error: e.startDateError,
644
- class: "b-date-range-picker-calendar__form-input",
645
- onInput: e.onStartDateInput,
646
- onKeydown: e.onDateInputKeyDown
647
- }, {
648
- description: L(() => a[1] || (a[1] = [
649
- re("YYYY-MM-DD")
650
- ])),
651
- _: 1
652
- }, 8, ["aria-label", "value", "error", "onInput", "onKeydown"]),
653
- e.allowTimeInput ? (O(), V(v, {
654
- key: 0,
655
- "aria-label": e.t("timeFrom"),
656
- value: e.dateTextInput.startTime,
657
- error: e.startTimeError,
658
- class: "b-date-range-picker-calendar__form-input",
659
- onInput: e.onStartTimeInput,
660
- onKeydown: e.onTimeInputKeyDown
661
- }, {
662
- description: L(() => a[2] || (a[2] = [
663
- re("HH:MM:SS")
664
- ])),
665
- _: 1
666
- }, 8, ["aria-label", "value", "error", "onInput", "onKeydown"])) : F("", !0)
667
- ], 2)
668
- ]),
669
- $("div", null, [
670
- K(p, {
671
- stronger: "",
672
- el: "span",
673
- class: "b-date-range-picker-calendar__label"
674
- }, {
675
- default: L(() => a[3] || (a[3] = [
676
- re(" To ")
677
- ])),
678
- _: 1
679
- }),
680
- $("div", {
681
- class: ke(e.formInputWrapperConditionalClasses)
682
- }, [
683
- K(v, {
684
- class: "b-date-range-picker-calendar__form-input",
685
- "aria-label": e.t("dateTo"),
686
- value: e.dateTextInput.endDate,
687
- error: e.endDateError,
688
- onInput: e.onEndDateInput,
689
- onKeydown: e.onDateInputKeyDown
690
- }, {
691
- description: L(() => a[4] || (a[4] = [
692
- re("YYYY-MM-DD")
693
- ])),
694
- _: 1
695
- }, 8, ["aria-label", "value", "error", "onInput", "onKeydown"]),
696
- e.allowTimeInput ? (O(), V(v, {
697
- key: 0,
698
- "aria-label": e.t("timeTo"),
699
- value: e.dateTextInput.endTime,
700
- error: e.endTimeError,
701
- class: "b-date-range-picker-calendar__form-input",
702
- onInput: e.onEndTimeInput,
703
- onKeydown: e.onTimeInputKeyDown
704
- }, {
705
- description: L(() => a[5] || (a[5] = [
706
- re("HH:MM:SS")
707
- ])),
708
- _: 1
709
- }, 8, ["aria-label", "value", "error", "onInput", "onKeydown"])) : F("", !0)
710
- ], 2)
711
- ])
712
- ]),
713
- e.hasSlot("actions") ? (O(), Se("div", ta, [
714
- Fe(e.$slots, "actions", {}, void 0, !0)
715
- ])) : F("", !0)
716
- ]),
717
- $("div", aa, [
718
- K(Q, {
719
- value: e.internalRangeDate,
720
- "first-day-of-week": e.firstDayOfWeek,
721
- "is-date-disabled": e.isDateDisabled,
722
- "max-range": e.maxRange,
723
- min: e.computedMinMax.min,
724
- max: e.computedMinMax.max,
725
- "number-of-months": e.numberOfMonths,
726
- "show-end-date-on-open": e.showEndDateOnOpen,
727
- granularity: e.selectedGranularity,
728
- variant: e.variant,
729
- "is-range": "",
730
- onInput: e.onDateInput,
731
- onStartDateSelected: e.onStartDateSelected,
732
- onEndDateSelected: e.onEndDateSelected
733
- }, null, 8, ["value", "first-day-of-week", "is-date-disabled", "max-range", "min", "max", "number-of-months", "show-end-date-on-open", "granularity", "variant", "onInput", "onStartDateSelected", "onEndDateSelected"])
734
- ])
735
- ]);
736
- }
737
- const q = /* @__PURE__ */ xe(Xt, [["render", na], ["__scopeId", "data-v-38e91c34"]]), ra = ({
738
- datePickerValue: e,
739
- isDateIncorrect: a,
740
- quickSelectRanges: l,
741
- isMonthVariant: i
742
- }) => {
743
- var g, G, I, y;
744
- const { locale: s, t: c } = he(), D = Ee(), n = (h) => !!h && !isNaN(h.getTime()), p = (h, x) => n(h) ? ce(h, x, {
745
- locale: D[s.value.substring(0, 2)] || D.enUS
746
- }) : void 0, v = Te({
747
- startDate: p((g = e.value) == null ? void 0 : g.startDate, E.NUMERIC_DATE_YEAR_FIRST),
748
- endDate: p((G = e.value) == null ? void 0 : G.endDate, E.NUMERIC_DATE_YEAR_FIRST),
749
- startTime: p((I = e.value) == null ? void 0 : I.startDate, E.HOUR_MINUTE_SECONDS),
750
- endTime: p((y = e.value) == null ? void 0 : y.endDate, E.HOUR_MINUTE_SECONDS)
751
- });
752
- return {
753
- // Values
754
- dateDisplayValue: b(() => {
755
- var _;
756
- if (a.value)
757
- return `${v.startDate || ""} - ${v.endDate || ""}`;
758
- if (!e.value || !e.value.startDate && !e.value.endDate)
759
- return c("selectDateRange");
760
- if ((_ = l.value) != null && _.length) {
761
- const f = l.value.find(({ value: U }) => {
762
- var B;
763
- return U === ((B = e.value) == null ? void 0 : B.range);
764
- });
765
- if (f)
766
- return f.label;
767
- }
768
- if (e.value.granularity === "quarterly") {
769
- const { startDate: f, endDate: U } = e.value, B = c("quarter", { quarter: Le(f), year: Ye(f) });
770
- if ($t(f, U))
771
- return B;
772
- const ee = c("quarter", { quarter: Le(U), year: Ye(U) });
773
- return `${B} - ${ee}`;
774
- }
775
- const { startDate: h, endDate: x } = v, le = i != null && i.value ? E.LONG_MONTH_YEAR : E.FULL_DATE_MONTH_FIRST;
776
- return `${p(oe(h), le)} - ${p(
777
- oe(x),
778
- le
779
- )}`;
780
- }),
781
- textInputDisplayValue: v,
782
- // Methods
783
- formatTextInputDisplayValue: () => ""
784
- };
785
- };
786
- var ye = /* @__PURE__ */ ((e) => (e.INPUT = "input", e))(ye || {});
787
- const We = {
788
- "en-US": {
789
- apply: "Apply",
790
- cancel: "Cancel",
791
- dateRangePicker: "Date range picker {name}",
792
- provideDateInAFormat: "Provide date in a YYYY-MM-DD format",
793
- quarter: "Q{quarter} {year}",
794
- selectDate: "Select a date",
795
- selectDateRange: "Select a date range",
796
- selectedDateIsNotAvailable: "Selected date is not available"
797
- },
798
- "ja-JP": {
799
- apply: "適用",
800
- cancel: "キャンセル",
801
- selectDate: "日付を選択"
802
- },
803
- "pt-BR": {
804
- apply: "Aplicar",
805
- cancel: "Cancelar",
806
- selectDate: "Selecione uma data"
807
- }
808
- }, oa = ze({
809
- i18n: { messages: We },
810
- name: "bento-date-range-picker",
811
- components: {
812
- BentoButtonActions: Nt,
813
- BentoDivider: Tt,
814
- BentoTypography: Xe,
815
- BentoPopover: bt,
816
- DateRangePickerCalendar: q,
817
- DropdownInputDefault: It,
818
- ErrorMessage: Bt,
819
- FieldLabel: Ut
820
- },
821
- directives: { BentoClickOutsideDirective: Mt },
822
- props: {
823
- /**
824
- * Allows user to enter time values in the form
825
- */
826
- allowTimeInput: { type: Boolean, default: !1 },
827
- /**
828
- * Descriptive supporting text visbile underneath the dropdown.
829
- */
830
- description: { type: String, default: void 0 },
831
- /**
832
- * Disables dropdown functionality.
833
- */
834
- disabled: { type: Boolean, default: !1 },
835
- /**
836
- * Displays component in an error state with an error message
837
- */
838
- errorMessage: { type: String, default: null },
839
- /**
840
- * Allows user to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday
841
- */
842
- firstDayOfWeek: q.props.firstDayOfWeek,
843
- /**
844
- * A list of available granularities.
845
- * If present, the date picker will display a segmented control to change granularity.
846
- */
847
- granularities: q.props.granularities,
848
- /**
849
- * Indicate if a date should be disabled or not
850
- */
851
- isDateDisabled: q.props.isDateDisabled,
852
- /**
853
- * Text that is displayed as a label above the element.
854
- */
855
- label: { type: String, default: void 0 },
856
- /**
857
- * Upon opening date range picker, end date's month will be pre-selected.
858
- */
859
- showEndDateOnOpen: { type: Boolean, default: !1 },
860
- /**
861
- * Highlights the dropdown is optional.
862
- */
863
- optional: { type: Boolean, default: !1 },
864
- /**
865
- * The Boolean readonly property, when present, makes the element not mutable, meaning the user can not edit the date range picker.
866
- */
867
- readonly: { type: Boolean, default: !1 },
868
- /**
869
- * Highlights the dropdown is required.
870
- */
871
- required: { type: Boolean, default: !1 },
872
- /**
873
- * Adds a info icon next to the label to display the passed tooltip message.
874
- */
875
- tooltipText: { type: String, default: null },
876
- /**
877
- * Enables the range selector.
878
- * If provided, must be an array that sets the custom range dropdown items. Items are of the structure:
879
- * `label` - label of custom range item.
880
- * `value` - a unique key of the custom range item.
881
- * `data` - an object `{ startDate: Date; endDate: Date }` to set the date picker range to upon selecting.
882
- */
883
- quickSelectRanges: {
884
- type: Array,
885
- default: void 0
886
- },
887
- /**
888
- * Set a maximum number of dates to be selectable by the range.
889
- */
890
- maxRange: q.props.maxRange,
891
- /**
892
- * Sets a minimum limit for selectable dates - dates before `min` will not be selectable
893
- */
894
- min: q.props.min,
895
- /**
896
- * Sets a maximum limit for selectable dates - dates after `max` will not be selectable
897
- */
898
- max: q.props.max,
899
- /**
900
- * Number of months rendered on pane
901
- */
902
- numberOfMonths: q.props.numberOfMonths,
903
- /**
904
- * Selected date
905
- */
906
- value: q.props.value,
907
- /**
908
- * The type of calendar to display. Defaults to showing days.
909
- */
910
- variant: {
911
- type: String,
912
- default: void 0
913
- // Default will be set by @/internal/calendar
914
- },
915
- /**
916
- * Enables the date picker selection to persist until it is explicitly applied.
917
- * Displays a set of buttons: Apply and Cancel.
918
- *
919
- * @deprecated This will be the default behaviour in v2.0.0.
920
- */
921
- hasActions: { type: Boolean, default: !1 }
922
- },
923
- emits: [ye.INPUT],
924
- setup(e, { emit: a }) {
925
- const { locale: l, t: i } = he({ messages: We }), s = Ee(), c = de("bento-date-range-picker-container"), D = de("bento-date-range-picker-label"), n = de("bento-date-range-picker-description"), p = de("bento-date-range-picker-error"), v = de("bento-date-range-picker-date-error"), Q = b(
926
- () => e.label || i("dateRangePicker", { name: c })
927
- ), Z = b(() => (e == null ? void 0 : e.quickSelectRanges) && e.quickSelectRanges.map((d) => {
928
- const C = d.data.endDate ? void 0 : new Date(Date.now()).getTime() - d.data.startDate.getTime();
929
- return {
930
- ...d,
931
- data: {
932
- ...d.data,
933
- // Adding timeDifference to calculate an up-to-date endDate on range selection
934
- timeDifference: C
935
- }
936
- };
937
- })), g = A(!1), G = A(null), I = A(!1), { isReadOnly: y } = Ot(_e(e, "readonly"));
938
- Re(
939
- () => e.disabled,
940
- () => {
941
- e.disabled && I.value && (I.value = !1);
942
- }
943
- );
944
- const h = b(() => e.hasActions ? !R.value && g.value : g.value), x = b(() => ({
945
- "b-date-range-picker__description--error": !!e.errorMessage || h.value
946
- })), le = b(() => e.variant === "month"), { dateDisplayValue: _, textInputDisplayValue: f } = ra({
947
- datePickerValue: _e(e, "value"),
948
- isDateIncorrect: g,
949
- quickSelectRanges: Z,
950
- isMonthVariant: le
951
- }), U = b(
952
- () => `${e.description ? n : ""} ${e.errorMessage ? p : ""} ${g.value ? v : ""}`.trim() || null
953
- ), B = b(() => e.allowTimeInput && e.variant !== "month"), ee = () => {
954
- I.value = !1;
955
- }, be = () => {
956
- I.value = !0;
957
- }, N = A(_.value), fe = A(
958
- // textInputDisplayValue is a reactive object
959
- structuredClone(Ie(f))
960
- ), P = A(e.value), R = A(!0), H = b(
961
- () => e.hasActions ? fe.value : f
962
- ), W = b(
963
- () => e.hasActions ? N.value : _.value
964
- );
965
- Je(() => {
966
- if (e.hasActions || Rt(
967
- 'BentoDateRangePicker "hasActions" property',
968
- `Set the BentoDateRangePicker "hasActions" property true which will display the "Apply" and "Cancel" buttons.
969
- This will be the default behavior in the v2 and "hasActions" will be removed.`,
970
- "2.0.0"
971
- ), e.granularities && e.variant !== "month" && e.granularities.find(({ type: d }) => d === "quarterly"))
972
- throw new Error(
973
- 'Quarterly granularity is only supported by BentoDateRangePicker with variant: "month"'
974
- );
975
- }), Re(
976
- () => e.value,
977
- () => {
978
- N.value = _.value, fe.value = structuredClone(Ie(f));
979
- }
980
- );
981
- const z = b(() => [
982
- {
983
- title: i("apply"),
984
- event: () => {
985
- a(ye.INPUT, P.value), ee(), R.value = !0;
986
- },
987
- disabled: R.value
988
- },
989
- {
990
- title: i("cancel"),
991
- event: ee
992
- }
993
- ]);
994
- return Re(P, (d) => {
995
- if (e.hasActions) {
996
- R.value = g.value;
997
- return;
998
- }
999
- a(ye.INPUT, d);
1000
- }), {
1001
- // Refs
1002
- inputContainerRef: G,
1003
- // Values,
1004
- adjustedQuickSelectRanges: Z,
1005
- dateDisplayValue: _,
1006
- datePickerContainerId: c,
1007
- descriptionConditionalClasses: x,
1008
- displayedTextInputValue: H,
1009
- displayedDateValue: W,
1010
- isDateIncorrect: g,
1011
- isDateRangePickerOpen: I,
1012
- isReadOnly: y,
1013
- labelId: D,
1014
- descriptionId: n,
1015
- dateErrorId: v,
1016
- errorId: p,
1017
- popoverAriaLabel: Q,
1018
- shouldDisplayError: h,
1019
- ariaDescribedBy: U,
1020
- textInputDisplayValue: f,
1021
- rangePickerButtonActions: z,
1022
- BentoButtonActionsLayout: Pt,
1023
- withTimeInput: B,
1024
- // Events
1025
- closeDateRangePicker: ee,
1026
- clearDateRangePickerValue: async () => {
1027
- g.value && (g.value = !1), P.value = null;
1028
- },
1029
- openDateRangePicker: be,
1030
- onRangeSelectorInput: (d) => {
1031
- if (d) {
1032
- const C = (ie) => ce(ie, E.NUMERIC_DATE_YEAR_FIRST, {
1033
- locale: s[l.value.substring(0, 2)] || s.enUS
1034
- });
1035
- f.startDate = C(d.startDate), f.endDate = C(d.endDate), P.value = d;
1036
- }
1037
- },
1038
- onEnterPressedOverInput: () => {
1039
- if (!I.value) {
1040
- I.value = !0;
1041
- return;
1042
- }
1043
- g.value || (I.value = !1);
1044
- },
1045
- onDateRangePickerInput: (d) => {
1046
- g.value = !1;
1047
- const C = (ie, ue) => ie ? ce(ie, ue, {
1048
- locale: s[l.value.substring(0, 2)] || s.enUS
1049
- }) : void 0;
1050
- f.startDate = C(
1051
- d.startDate,
1052
- E.NUMERIC_DATE_YEAR_FIRST
1053
- ), f.endDate = C(d.endDate, E.NUMERIC_DATE_YEAR_FIRST), f.startTime = C(d.startDate, E.HOUR_MINUTE_SECONDS), f.endTime = C(d.endDate, E.HOUR_MINUTE_SECONDS), P.value = d;
1054
- },
1055
- onDateRangePickerError: (d) => {
1056
- g.value = !0, f.startDate = d.startDate, f.endDate = d.endDate, P.value = { startDate: null, endDate: null };
1057
- },
1058
- onDateRangePickerFormDateInputUpdate: (d) => {
1059
- g.value = !1, d.startTime && (f.startTime = d.startTime), d.endTime && (f.endTime = d.endTime);
1060
- },
1061
- // Translations
1062
- t: i
1063
- };
1064
- }
1065
- }), sa = { class: "b-date-range-picker" }, la = { class: "b-date-range-picker__footer" };
1066
- function ia(e, a, l, i, s, c) {
1067
- const D = k("field-label"), n = k("dropdown-input-default"), p = k("error-message"), v = k("bento-typography"), Q = k("bento-divider"), Z = k("bento-button-actions"), g = k("date-range-picker-calendar"), G = k("bento-popover"), I = ft("bento-click-outside-directive");
1068
- return pt((O(), Se("div", sa, [
1069
- e.label ? (O(), V(D, {
1070
- key: 0,
1071
- id: e.labelId,
1072
- label: e.label,
1073
- "tooltip-text": e.tooltipText,
1074
- optional: e.optional,
1075
- required: e.required
1076
- }, null, 8, ["id", "label", "tooltip-text", "optional", "required"])) : F("", !0),
1077
- $("div", {
1078
- onKeydown: a[0] || (a[0] = vt((...y) => e.onEnterPressedOverInput && e.onEnterPressedOverInput(...y), ["enter"]))
1079
- }, [
1080
- K(n, {
1081
- ref: "inputContainerRef",
1082
- "always-combobox-is-input": "",
1083
- ariaControls: e.datePickerContainerId,
1084
- ariaExpanded: e.isDateRangePickerOpen,
1085
- "aria-labelledby": e.label ? e.labelId : null,
1086
- "aria-describedby": e.ariaDescribedBy,
1087
- disabled: e.disabled,
1088
- "is-invalid": !!e.errorMessage || e.shouldDisplayError,
1089
- open: e.isDateRangePickerOpen,
1090
- "display-value": e.displayedDateValue,
1091
- readonly: e.isReadOnly,
1092
- onOpen: e.openDateRangePicker,
1093
- onClear: e.clearDateRangePickerValue,
1094
- onClose: e.closeDateRangePicker
1095
- }, null, 8, ["ariaControls", "ariaExpanded", "aria-labelledby", "aria-describedby", "disabled", "is-invalid", "open", "display-value", "readonly", "onOpen", "onClear", "onClose"])
1096
- ], 32),
1097
- e.shouldDisplayError ? (O(), V(p, {
1098
- key: 1,
1099
- id: e.dateErrorId,
1100
- "error-message": e.t("provideDateInAFormat"),
1101
- class: "b-date-range-picker__error-message"
1102
- }, null, 8, ["id", "error-message"])) : F("", !0),
1103
- e.errorMessage ? (O(), V(p, {
1104
- key: 2,
1105
- id: e.errorId,
1106
- "error-message": e.errorMessage,
1107
- class: "b-date-range-picker__error-message"
1108
- }, null, 8, ["id", "error-message"])) : F("", !0),
1109
- e.description ? (O(), V(v, {
1110
- key: 3,
1111
- id: e.descriptionId,
1112
- class: ke(["b-date-range-picker__description", e.descriptionConditionalClasses]),
1113
- el: "span"
1114
- }, {
1115
- default: L(() => [
1116
- re(gt(e.description), 1)
1117
- ]),
1118
- _: 1
1119
- }, 8, ["id", "class"])) : F("", !0),
1120
- e.inputContainerRef ? (O(), V(G, {
1121
- key: 4,
1122
- id: e.datePickerContainerId,
1123
- class: "b-date-range-picker__container",
1124
- open: e.isDateRangePickerOpen,
1125
- "target-element": e.inputContainerRef,
1126
- "disable-focus-trap": !0,
1127
- "aria-label": e.popoverAriaLabel,
1128
- position: "bottom-start",
1129
- "without-space": "",
1130
- "fit-content": ""
1131
- }, {
1132
- default: L(() => [
1133
- K(g, {
1134
- "allow-time-input": e.withTimeInput,
1135
- "quick-select-ranges": e.adjustedQuickSelectRanges,
1136
- value: e.value,
1137
- "first-day-of-week": e.firstDayOfWeek,
1138
- granularities: e.granularities,
1139
- "is-date-disabled": e.isDateDisabled,
1140
- "max-range": e.maxRange,
1141
- min: e.min,
1142
- max: e.max,
1143
- "number-of-months": e.numberOfMonths,
1144
- "show-end-date-on-open": e.showEndDateOnOpen,
1145
- "date-form-data": e.displayedTextInputValue,
1146
- variant: e.variant,
1147
- onCustomRange: e.onRangeSelectorInput,
1148
- onInput: e.onDateRangePickerInput,
1149
- onError: e.onDateRangePickerError,
1150
- onFormDate: e.onDateRangePickerFormDateInputUpdate
1151
- }, yt({ _: 2 }, [
1152
- e.hasActions ? {
1153
- name: "actions",
1154
- fn: L(() => [
1155
- K(Q),
1156
- $("div", la, [
1157
- K(Z, {
1158
- actions: e.rangePickerButtonActions,
1159
- layout: e.BentoButtonActionsLayout.SPACE_BETWEEN
1160
- }, null, 8, ["actions", "layout"])
1161
- ])
1162
- ]),
1163
- key: "0"
1164
- } : void 0
1165
- ]), 1032, ["allow-time-input", "quick-select-ranges", "value", "first-day-of-week", "granularities", "is-date-disabled", "max-range", "min", "max", "number-of-months", "show-end-date-on-open", "date-form-data", "variant", "onCustomRange", "onInput", "onError", "onFormDate"])
1166
- ]),
1167
- _: 1
1168
- }, 8, ["id", "open", "target-element", "aria-label"])) : F("", !0)
1169
- ])), [
1170
- [I, e.closeDateRangePicker]
1171
- ]);
1172
- }
1173
- const Fa = /* @__PURE__ */ xe(oa, [["render", ia], ["__scopeId", "data-v-b8cb27dc"]]);
1174
- export {
1175
- Fa as B,
1176
- q as D,
1177
- ye as a,
1178
- Lt as b,
1179
- qt as i
1180
- };
1181
- //# sourceMappingURL=date-range-picker.CFicalpy.js.map