@onereach/ui-components 3.0.4-beta.2500.0 → 3.0.4-beta.2502.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 (99) hide show
  1. package/dist/bundled/v2/OrDatePicker-19e467e2.js +330 -0
  2. package/dist/bundled/v2/OrDateTimePicker-1011dc69.js +440 -0
  3. package/dist/bundled/v2/OrDateTimePickerMonthSelect-9e64d257.js +408 -0
  4. package/dist/bundled/v2/OrDateTimePickerPopoverHeader-c8672c0d.js +239 -0
  5. package/dist/bundled/v2/OrDateTimePickerTimeSelect-158d717b.js +179 -0
  6. package/dist/bundled/v2/OrTimePicker-1b3a758a.js +318 -0
  7. package/dist/bundled/v2/components/index.d.ts +2 -0
  8. package/dist/bundled/v2/components/index.js +7 -2
  9. package/dist/bundled/v2/components/or-date-picker-v3/OrDatePicker.vue.d.ts +183 -0
  10. package/dist/bundled/v2/components/or-date-picker-v3/index.d.ts +2 -0
  11. package/dist/bundled/v2/components/or-date-picker-v3/index.js +31 -0
  12. package/dist/bundled/v2/components/or-date-picker-v3/props.d.ts +1 -0
  13. package/dist/bundled/v2/components/or-date-picker-v3/styles.d.ts +2 -0
  14. package/dist/bundled/v2/components/or-date-time-picker-v3/index.js +7 -5
  15. package/dist/bundled/v2/components/or-time-picker-v3/OrTimePicker.vue.d.ts +183 -0
  16. package/dist/bundled/v2/components/or-time-picker-v3/index.d.ts +2 -0
  17. package/dist/bundled/v2/components/or-time-picker-v3/index.js +29 -0
  18. package/dist/bundled/v2/components/or-time-picker-v3/props.d.ts +1 -0
  19. package/dist/bundled/v2/components/or-time-picker-v3/styles.d.ts +2 -0
  20. package/dist/bundled/v2/index.js +7 -2
  21. package/dist/bundled/v3/OrDatePicker.vue_vue_type_script_lang-8eafbe6b.js +177 -0
  22. package/dist/bundled/v3/OrDateTimePicker.vue_vue_type_script_lang-b2a9ef8d.js +226 -0
  23. package/dist/bundled/v3/OrDateTimePickerMonthSelect-8989be5a.js +341 -0
  24. package/dist/bundled/v3/OrDateTimePickerPopoverHeader-caffcc00.js +162 -0
  25. package/dist/bundled/v3/OrDateTimePickerTimeSelect-e3a89bed.js +148 -0
  26. package/dist/bundled/v3/OrTimePicker.vue_vue_type_script_lang-f46eb37f.js +176 -0
  27. package/dist/bundled/v3/components/index.d.ts +2 -0
  28. package/dist/bundled/v3/components/index.js +8 -3
  29. package/dist/bundled/v3/components/or-date-picker-v3/OrDatePicker.vue.d.ts +183 -0
  30. package/dist/bundled/v3/components/or-date-picker-v3/index.d.ts +2 -0
  31. package/dist/bundled/v3/components/or-date-picker-v3/index.js +37 -0
  32. package/dist/bundled/v3/components/or-date-picker-v3/props.d.ts +1 -0
  33. package/dist/bundled/v3/components/or-date-picker-v3/styles.d.ts +2 -0
  34. package/dist/bundled/v3/components/or-date-time-picker-v3/index.js +7 -4
  35. package/dist/bundled/v3/components/or-time-picker-v3/OrTimePicker.vue.d.ts +183 -0
  36. package/dist/bundled/v3/components/or-time-picker-v3/index.d.ts +2 -0
  37. package/dist/bundled/v3/components/or-time-picker-v3/index.js +33 -0
  38. package/dist/bundled/v3/components/or-time-picker-v3/props.d.ts +1 -0
  39. package/dist/bundled/v3/components/or-time-picker-v3/styles.d.ts +2 -0
  40. package/dist/bundled/v3/index.js +629 -402
  41. package/dist/esm/v2/OrDatePicker-454f5267.js +329 -0
  42. package/dist/esm/v2/OrDateTimePicker-3f533d0c.js +439 -0
  43. package/dist/esm/v2/OrDateTimePickerMonthSelect-380d9c90.js +406 -0
  44. package/dist/esm/v2/OrDateTimePickerPopoverHeader-e11d3222.js +235 -0
  45. package/dist/esm/v2/OrDateTimePickerTimeSelect-83dd1e81.js +177 -0
  46. package/dist/esm/v2/OrTimePicker-f23c8577.js +317 -0
  47. package/dist/esm/v2/components/index.d.ts +2 -0
  48. package/dist/esm/v2/components/index.js +8 -3
  49. package/dist/esm/v2/components/or-date-picker-v3/OrDatePicker.vue.d.ts +183 -0
  50. package/dist/esm/v2/components/or-date-picker-v3/index.d.ts +2 -0
  51. package/dist/esm/v2/components/or-date-picker-v3/index.js +29 -0
  52. package/dist/esm/v2/components/or-date-picker-v3/props.d.ts +1 -0
  53. package/dist/esm/v2/components/or-date-picker-v3/styles.d.ts +2 -0
  54. package/dist/esm/v2/components/or-date-time-picker-v3/index.js +4 -2
  55. package/dist/esm/v2/components/or-time-picker-v3/OrTimePicker.vue.d.ts +183 -0
  56. package/dist/esm/v2/components/or-time-picker-v3/index.d.ts +2 -0
  57. package/dist/esm/v2/components/or-time-picker-v3/index.js +27 -0
  58. package/dist/esm/v2/components/or-time-picker-v3/props.d.ts +1 -0
  59. package/dist/esm/v2/components/or-time-picker-v3/styles.d.ts +2 -0
  60. package/dist/esm/v2/index.js +8 -3
  61. package/dist/esm/v3/OrDatePicker-390f7f11.js +288 -0
  62. package/dist/esm/v3/OrDateTimePicker-54db4170.js +390 -0
  63. package/dist/esm/v3/OrDateTimePickerMonthSelect-709b673d.js +338 -0
  64. package/dist/esm/v3/OrDateTimePickerPopoverHeader-c771a251.js +161 -0
  65. package/dist/esm/v3/OrDateTimePickerTimeSelect-2c8a7f9c.js +148 -0
  66. package/dist/esm/v3/OrTimePicker-362ca566.js +282 -0
  67. package/dist/esm/v3/components/index.d.ts +2 -0
  68. package/dist/esm/v3/components/index.js +7 -2
  69. package/dist/esm/v3/components/or-date-picker-v3/OrDatePicker.vue.d.ts +183 -0
  70. package/dist/esm/v3/components/or-date-picker-v3/index.d.ts +2 -0
  71. package/dist/esm/v3/components/or-date-picker-v3/index.js +27 -0
  72. package/dist/esm/v3/components/or-date-picker-v3/props.d.ts +1 -0
  73. package/dist/esm/v3/components/or-date-picker-v3/styles.d.ts +2 -0
  74. package/dist/esm/v3/components/or-date-time-picker-v3/index.js +4 -2
  75. package/dist/esm/v3/components/or-time-picker-v3/OrTimePicker.vue.d.ts +183 -0
  76. package/dist/esm/v3/components/or-time-picker-v3/index.d.ts +2 -0
  77. package/dist/esm/v3/components/or-time-picker-v3/index.js +25 -0
  78. package/dist/esm/v3/components/or-time-picker-v3/props.d.ts +1 -0
  79. package/dist/esm/v3/components/or-time-picker-v3/styles.d.ts +2 -0
  80. package/dist/esm/v3/index.js +7 -2
  81. package/package.json +2 -2
  82. package/src/components/index.ts +2 -0
  83. package/src/components/or-date-picker-v3/OrDatePicker.docs.mdx +7 -0
  84. package/src/components/or-date-picker-v3/OrDatePicker.stories3.ts +160 -0
  85. package/src/components/or-date-picker-v3/OrDatePicker.vue +308 -0
  86. package/src/components/or-date-picker-v3/index.ts +2 -0
  87. package/src/components/or-date-picker-v3/props.ts +1 -0
  88. package/src/components/or-date-picker-v3/styles.ts +12 -0
  89. package/src/components/or-date-time-picker-v3/OrDateTimePicker.vue +0 -34
  90. package/src/components/or-time-picker-v3/OrTimePicker.docs.mdx +7 -0
  91. package/src/components/or-time-picker-v3/OrTimePicker.stories3.ts +160 -0
  92. package/src/components/or-time-picker-v3/OrTimePicker.vue +302 -0
  93. package/src/components/or-time-picker-v3/index.ts +2 -0
  94. package/src/components/or-time-picker-v3/props.ts +1 -0
  95. package/src/components/or-time-picker-v3/styles.ts +12 -0
  96. package/dist/bundled/v2/OrDateTimePicker-5a379f88.js +0 -1245
  97. package/dist/bundled/v3/OrDateTimePicker.vue_vue_type_script_lang-77c42110.js +0 -855
  98. package/dist/esm/v2/OrDateTimePicker-9b277e74.js +0 -1238
  99. package/dist/esm/v3/OrDateTimePicker-46b452b3.js +0 -1021
@@ -1,855 +0,0 @@
1
- import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, createBlock, withModifiers, withCtx, createTextVNode, toDisplayString, createVNode, renderSlot, reactive, watch } from 'vue';
2
- import './OrButton-7b1eac5d.js';
3
- import { s as script$7 } from './OrButton.vue_vue_type_script_lang-ed1524cf.js';
4
- import './OrLabel-4da10c50.js';
5
- import { s as script$8 } from './OrLabel.vue_vue_type_script_lang-5ba2b33c.js';
6
- import './OrIcon-a670d8e9.js';
7
- import './OrIconButton-55238a89.js';
8
- import './OrMenu-101f1c62.js';
9
- import './OrMenuItem-a90b0369.js';
10
- import { s as script$9 } from './OrIcon.vue_vue_type_script_lang-859d76fb.js';
11
- import { s as script$a } from './OrIconButton.vue_vue_type_script_lang-3aeb76ac.js';
12
- import { s as script$b } from './OrMenu.vue_vue_type_script_lang-7ba15d1d.js';
13
- import { s as script$c } from './OrMenuItem.vue_vue_type_script_lang-d65eec51.js';
14
- import './OrHint-fcd2563e.js';
15
- import './OrInputBox-688eb48b.js';
16
- import './OrPopover-40d53b57.js';
17
- import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-0a494cc1.js';
18
- import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-b2e42f31.js';
19
- import { u as useValidationAttributes } from './useValidationAttributes-5428d8fa.js';
20
- import { s as script$d } from './OrError.vue_vue_type_script_lang-7305a1d9.js';
21
- import { s as script$e } from './OrHint.vue_vue_type_script_lang-47d9b9ed.js';
22
- import { s as script$f } from './OrInputBox.vue_vue_type_script_lang-0e3ff329.js';
23
- import { s as script$g } from './OrPopover.vue_vue_type_script_lang-9bf2361c.js';
24
- import { I as InputBoxSize } from './props-c966ae5f.js';
25
-
26
- function useDefaultDate() {
27
- return new Date().getUTCDate();
28
- }
29
-
30
- function useDefaultHours() {
31
- return 0;
32
- }
33
-
34
- function useDefaultMinutes() {
35
- return 0;
36
- }
37
-
38
- function useDefaultMonth() {
39
- return new Date().getUTCMonth();
40
- }
41
-
42
- function useDefaultYear() {
43
- return new Date().getUTCFullYear();
44
- }
45
-
46
- const DateTimePickerDaySelect = [
47
- // Layout
48
- 'layout-column',
49
- // Spacing
50
- 'px-md', 'py-md', 'gap-sm'];
51
- const DateTimePickerDaySelectButtonGroup = [
52
- // Layout
53
- 'grid', 'grid-cols-7',
54
- // Spacing
55
- 'gap-xs'];
56
- const DateTimePickerDaySelectButtonGroupItem = [
57
- // Box
58
- 'min-w-fit',
59
- // Spacing
60
- '!px-sm', '!py-sm',
61
- // Typography
62
- 'typography-caption-regular'];
63
-
64
- var script$6 = defineComponent({
65
- name: 'OrDateTimePickerDaySelect',
66
- components: {
67
- OrButton: script$7
68
- },
69
- model: {
70
- prop: 'modelValue',
71
- event: 'update:modelValue'
72
- },
73
- props: {
74
- modelValue: {
75
- type: Date,
76
- default: undefined
77
- },
78
- filter: {
79
- type: Function,
80
- default: undefined
81
- }
82
- },
83
- emits: ['update:modelValue'],
84
- expose: ['root'],
85
- setup(props, context) {
86
- // Refs
87
- const root = ref();
88
- // Styles
89
- const rootStyles = computed(() => ['or-date-time-picker-day-select', ...DateTimePickerDaySelect]);
90
- const buttonGroupStyles = computed(() => [...DateTimePickerDaySelectButtonGroup]);
91
- const buttonGroupItemStyles = computed(() => [...DateTimePickerDaySelectButtonGroupItem]);
92
- // State
93
- const proxyModelValue = computed({
94
- get: () => {
95
- var _a;
96
- return (_a = props.modelValue) !== null && _a !== void 0 ? _a : new Date(Date.UTC(useDefaultYear(), useDefaultMonth(), useDefaultDate(), useDefaultHours(), useDefaultMinutes()));
97
- },
98
- set: value => {
99
- context.emit('update:modelValue', value);
100
- }
101
- });
102
- const dayOptions = computed(() => {
103
- const monthStartDate = new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth(), 1, proxyModelValue.value.getUTCHours(), proxyModelValue.value.getUTCMinutes()));
104
- const monthEndDate = new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth() + 1, 0, proxyModelValue.value.getUTCHours(), proxyModelValue.value.getUTCMinutes()));
105
- const calendarStartDate = new Date(Date.UTC(monthStartDate.getUTCFullYear(), monthStartDate.getUTCMonth(), 1 - (monthStartDate.getUTCDay() + 6) % 7, monthStartDate.getUTCHours(), monthStartDate.getUTCMinutes()));
106
- const calendarEndDate = new Date(Date.UTC(monthEndDate.getUTCFullYear(), monthEndDate.getUTCMonth() + 1, (7 - monthEndDate.getUTCDay()) % 7, monthEndDate.getUTCHours(), monthEndDate.getUTCMinutes()));
107
- return (() => {
108
- let options = [],
109
- value = calendarStartDate;
110
- while (Number(value) !== Number(calendarEndDate)) {
111
- options = [...options, value];
112
- value = new Date(Date.UTC(value.getUTCFullYear(), value.getUTCMonth(), value.getUTCDate() + 1, value.getUTCHours(), value.getUTCMinutes()));
113
- }
114
- return options;
115
- })();
116
- });
117
- // Methods
118
- function formatDay(value) {
119
- return value.toLocaleString('default', {
120
- day: 'numeric',
121
- timeZone: 'UTC'
122
- });
123
- }
124
- return {
125
- root,
126
- rootStyles,
127
- buttonGroupStyles,
128
- buttonGroupItemStyles,
129
- proxyModelValue,
130
- dayOptions,
131
- formatDay
132
- };
133
- }
134
- });
135
-
136
- function render$5(_ctx, _cache, $props, $setup, $data, $options) {
137
- const _component_OrButton = resolveComponent("OrButton");
138
- return openBlock(), createElementBlock("div", {
139
- ref: "root",
140
- class: normalizeClass(_ctx.rootStyles)
141
- }, [createElementVNode("div", {
142
- class: normalizeClass(_ctx.buttonGroupStyles)
143
- }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.dayOptions, value => {
144
- return openBlock(), createBlock(_component_OrButton, {
145
- key: Number(value),
146
- class: normalizeClass(_ctx.buttonGroupItemStyles),
147
- variant: Number(value) === Number(_ctx.proxyModelValue) ? 'contained' : 'text',
148
- color: Number(value) === Number(_ctx.proxyModelValue) ? 'primary' : 'inherit',
149
- disabled: _ctx.filter && !_ctx.filter(value),
150
- onClick: withModifiers($event => _ctx.proxyModelValue = value, ["stop"])
151
- }, {
152
- default: withCtx(() => [createTextVNode(toDisplayString(_ctx.formatDay(value)), 1 /* TEXT */)]),
153
-
154
- _: 2 /* DYNAMIC */
155
- }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "variant", "color", "disabled", "onClick"]);
156
- }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */)], 2 /* CLASS */);
157
- }
158
-
159
- script$6.render = render$5;
160
- script$6.__file = "src/components/or-date-time-picker-v3/partials/or-date-time-picker-day-select/OrDateTimePickerDaySelect.vue";
161
-
162
- const DateTimePickerMobileControl = [
163
- // Layout
164
- 'layout-column',
165
- // Spacing
166
- 'gap-xs'];
167
- const DateTimePickerMobileControlContent = [
168
- // Typography
169
- 'typography-headline-1',
170
- // Theme
171
- 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
172
-
173
- var script$5 = defineComponent({
174
- name: 'OrDateTimePickerMobileControl',
175
- components: {
176
- OrLabel: script$8
177
- },
178
- props: {
179
- label: {
180
- type: String,
181
- required: true
182
- }
183
- },
184
- expose: ['root'],
185
- setup() {
186
- // Refs
187
- const root = ref();
188
- // Styles
189
- const rootStyles = computed(() => ['or-date-time-picker-mobile-control', ...DateTimePickerMobileControl]);
190
- const contentStyles = computed(() => [...DateTimePickerMobileControlContent]);
191
- return {
192
- root,
193
- rootStyles,
194
- contentStyles
195
- };
196
- }
197
- });
198
-
199
- function render$4(_ctx, _cache, $props, $setup, $data, $options) {
200
- const _component_OrLabel = resolveComponent("OrLabel");
201
- return openBlock(), createElementBlock("div", {
202
- ref: "root",
203
- class: normalizeClass(_ctx.rootStyles)
204
- }, [createVNode(_component_OrLabel, null, {
205
- default: withCtx(() => [createTextVNode(toDisplayString(_ctx.label), 1 /* TEXT */)]),
206
-
207
- _: 1 /* STABLE */
208
- }), createElementVNode("div", {
209
- class: normalizeClass(_ctx.contentStyles)
210
- }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */)], 2 /* CLASS */);
211
- }
212
-
213
- script$5.render = render$4;
214
- script$5.__file = "src/components/or-date-time-picker-v3/partials/or-date-time-picker-mobile-control/OrDateTimePickerMobileControl.vue";
215
-
216
- const DateTimePickerMonthSelect = [
217
- // Layout
218
- 'layout-row justify-between',
219
- // Spacing
220
- 'px-md', 'py-md', 'gap-md'];
221
-
222
- var script$4 = defineComponent({
223
- name: 'OrDateTimePickerMonthSelect',
224
- components: {
225
- OrButton: script$7,
226
- OrIcon: script$9,
227
- OrIconButton: script$a,
228
- OrMenu: script$b,
229
- OrMenuItem: script$c
230
- },
231
- model: {
232
- prop: 'modelValue',
233
- event: 'update:modelValue'
234
- },
235
- props: {
236
- modelValue: {
237
- type: Date,
238
- default: undefined
239
- },
240
- filter: {
241
- type: Function,
242
- default: undefined
243
- }
244
- },
245
- emits: ['update:modelValue'],
246
- expose: ['root'],
247
- setup(props, context) {
248
- // Refs
249
- const root = ref();
250
- const yearButton = ref();
251
- const monthButton = ref();
252
- const yearButtonRoot = computed(() => {
253
- var _a;
254
- return (_a = yearButton.value) === null || _a === void 0 ? void 0 : _a.root;
255
- });
256
- const monthButtonRoot = computed(() => {
257
- var _a;
258
- return (_a = monthButton.value) === null || _a === void 0 ? void 0 : _a.root;
259
- });
260
- const yearMenu = ref();
261
- const monthMenu = ref();
262
- const yearMenuState = computed(() => {
263
- var _a;
264
- return (_a = yearMenu.value) === null || _a === void 0 ? void 0 : _a.state;
265
- });
266
- const monthMenuState = computed(() => {
267
- var _a;
268
- return (_a = monthMenu.value) === null || _a === void 0 ? void 0 : _a.state;
269
- });
270
- // Styles
271
- const rootStyles = computed(() => ['or-date-time-picker-month-select', ...DateTimePickerMonthSelect]);
272
- // State
273
- const proxyModelValue = computed({
274
- get: () => {
275
- var _a;
276
- return (_a = props.modelValue) !== null && _a !== void 0 ? _a : new Date(Date.UTC(useDefaultYear(), useDefaultMonth(), useDefaultDate(), useDefaultHours(), useDefaultMinutes()));
277
- },
278
- set: value => {
279
- context.emit('update:modelValue', value);
280
- }
281
- });
282
- const yearOptions = computed(() => {
283
- return Array.from({
284
- length: 11
285
- }).map((_value, index, {
286
- length
287
- }) => {
288
- const value = proxyModelValue.value.getUTCFullYear() - Math.floor(length / 2) + index;
289
- return new Date(Date.UTC(value, proxyModelValue.value.getUTCMonth(), proxyModelValue.value.getUTCDate(), proxyModelValue.value.getUTCHours(), proxyModelValue.value.getUTCMinutes()));
290
- });
291
- });
292
- const monthOptions = computed(() => {
293
- return Array.from({
294
- length: 12
295
- }, (_value, index) => {
296
- const value = index;
297
- return new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), value, proxyModelValue.value.getUTCDate(), proxyModelValue.value.getUTCHours(), proxyModelValue.value.getUTCMinutes()));
298
- });
299
- });
300
- // Methods
301
- function goToNextMonth() {
302
- proxyModelValue.value = new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth() + 1, proxyModelValue.value.getUTCDate(), proxyModelValue.value.getUTCHours(), proxyModelValue.value.getUTCMinutes()));
303
- }
304
- function goToPreviousMonth() {
305
- proxyModelValue.value = new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth() - 1, proxyModelValue.value.getUTCDate(), proxyModelValue.value.getUTCHours(), proxyModelValue.value.getUTCMinutes()));
306
- }
307
- function formatYear(value) {
308
- return value.toLocaleString('default', {
309
- year: 'numeric',
310
- timeZone: 'UTC'
311
- });
312
- }
313
- function formatMonth(value) {
314
- return value.toLocaleString('default', {
315
- month: 'long',
316
- timeZone: 'UTC'
317
- });
318
- }
319
- return {
320
- root,
321
- yearButton,
322
- monthButton,
323
- yearButtonRoot,
324
- monthButtonRoot,
325
- yearMenu,
326
- monthMenu,
327
- yearMenuState,
328
- monthMenuState,
329
- rootStyles,
330
- proxyModelValue,
331
- yearOptions,
332
- monthOptions,
333
- goToNextMonth,
334
- goToPreviousMonth,
335
- formatYear,
336
- formatMonth
337
- };
338
- }
339
- });
340
-
341
- const _hoisted_1 = {
342
- class: /*#__PURE__*/normalizeClass(['layout-row-reverse', 'gap-md'])
343
- };
344
- function render$3(_ctx, _cache, $props, $setup, $data, $options) {
345
- const _component_OrIconButton = resolveComponent("OrIconButton");
346
- const _component_OrIcon = resolveComponent("OrIcon");
347
- const _component_OrButton = resolveComponent("OrButton");
348
- const _component_OrMenuItem = resolveComponent("OrMenuItem");
349
- const _component_OrMenu = resolveComponent("OrMenu");
350
- return openBlock(), createElementBlock("div", {
351
- ref: "root",
352
- class: normalizeClass(_ctx.rootStyles)
353
- }, [createVNode(_component_OrIconButton, {
354
- icon: 'chevron_left',
355
- onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.goToPreviousMonth(), ["stop"]))
356
- }), createElementVNode("div", _hoisted_1, [createVNode(_component_OrButton, {
357
- ref: "yearButton",
358
- variant: 'link',
359
- color: 'inherit',
360
- onClick: _cache[1] || (_cache[1] = withModifiers($event => _ctx.yearMenu.open(), ["stop"]))
361
- }, {
362
- default: withCtx(() => [createTextVNode(toDisplayString(_ctx.formatYear(_ctx.proxyModelValue)) + " ", 1 /* TEXT */), createVNode(_component_OrIcon, {
363
- icon: _ctx.yearMenuState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'
364
- }, null, 8 /* PROPS */, ["icon"])]),
365
- _: 1 /* STABLE */
366
- }, 512 /* NEED_PATCH */), createVNode(_component_OrButton, {
367
- ref: "monthButton",
368
- variant: 'link',
369
- color: 'inherit',
370
- onClick: _cache[2] || (_cache[2] = withModifiers($event => _ctx.monthMenu.open(), ["stop"]))
371
- }, {
372
- default: withCtx(() => [createTextVNode(toDisplayString(_ctx.formatMonth(_ctx.proxyModelValue)) + " ", 1 /* TEXT */), createVNode(_component_OrIcon, {
373
- icon: _ctx.monthMenuState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'
374
- }, null, 8 /* PROPS */, ["icon"])]),
375
- _: 1 /* STABLE */
376
- }, 512 /* NEED_PATCH */), createVNode(_component_OrMenu, {
377
- ref: "yearMenu",
378
- trigger: _ctx.yearButtonRoot
379
- }, {
380
- default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.yearOptions, value => {
381
- return openBlock(), createBlock(_component_OrMenuItem, {
382
- key: Number(value),
383
- selected: Number(value) === Number(_ctx.proxyModelValue),
384
- disabled: _ctx.filter && !_ctx.filter(value),
385
- onClick: withModifiers($event => {
386
- _ctx.proxyModelValue = value;
387
- _ctx.yearMenu.close();
388
- }, ["stop"])
389
- }, {
390
- default: withCtx(() => [createTextVNode(toDisplayString(_ctx.formatYear(value)), 1 /* TEXT */)]),
391
-
392
- _: 2 /* DYNAMIC */
393
- }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["selected", "disabled", "onClick"]);
394
- }), 128 /* KEYED_FRAGMENT */))]),
395
-
396
- _: 1 /* STABLE */
397
- }, 8 /* PROPS */, ["trigger"]), createVNode(_component_OrMenu, {
398
- ref: "monthMenu",
399
- trigger: _ctx.monthButtonRoot
400
- }, {
401
- default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.monthOptions, value => {
402
- return openBlock(), createBlock(_component_OrMenuItem, {
403
- key: Number(value),
404
- selected: Number(value) === Number(_ctx.proxyModelValue),
405
- disabled: _ctx.filter && !_ctx.filter(value),
406
- onClick: withModifiers($event => {
407
- _ctx.proxyModelValue = value;
408
- _ctx.monthMenu.close();
409
- }, ["stop"])
410
- }, {
411
- default: withCtx(() => [createTextVNode(toDisplayString(_ctx.formatMonth(value)), 1 /* TEXT */)]),
412
-
413
- _: 2 /* DYNAMIC */
414
- }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["selected", "disabled", "onClick"]);
415
- }), 128 /* KEYED_FRAGMENT */))]),
416
-
417
- _: 1 /* STABLE */
418
- }, 8 /* PROPS */, ["trigger"])]), createVNode(_component_OrIconButton, {
419
- icon: 'chevron_right',
420
- onClick: _cache[3] || (_cache[3] = withModifiers($event => _ctx.goToNextMonth(), ["stop"]))
421
- })], 2 /* CLASS */);
422
- }
423
-
424
- script$4.render = render$3;
425
- script$4.__file = "src/components/or-date-time-picker-v3/partials/or-date-time-picker-month-select/OrDateTimePickerMonthSelect.vue";
426
-
427
- const DateTimePickerPopoverFooter = [
428
- // Layout
429
- 'layout-row-reverse',
430
- // Layout (children)
431
- 'children:grow',
432
- // Spacing
433
- 'px-md md:px-sm', 'py-md md:py-sm', 'gap-md md:gap-sm'];
434
-
435
- var script$3 = defineComponent({
436
- name: 'OrDateTimePickerPopoverFooter',
437
- components: {
438
- OrButton: script$7
439
- },
440
- emits: ['resolve', 'reject'],
441
- expose: ['root'],
442
- setup() {
443
- // Refs
444
- const root = ref();
445
- // Styles
446
- const rootStyles = computed(() => ['or-date-time-picker-popover-footer', ...DateTimePickerPopoverFooter]);
447
- return {
448
- root,
449
- rootStyles
450
- };
451
- }
452
- });
453
-
454
- function render$2(_ctx, _cache, $props, $setup, $data, $options) {
455
- const _component_OrButton = resolveComponent("OrButton");
456
- return openBlock(), createElementBlock("footer", {
457
- ref: "root",
458
- class: normalizeClass(_ctx.rootStyles)
459
- }, [createVNode(_component_OrButton, {
460
- variant: 'outlined',
461
- onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.$emit('resolve'), ["stop"]))
462
- }, {
463
- default: withCtx(() => [createTextVNode(" Done ")]),
464
- _: 1 /* STABLE */
465
- }), createVNode(_component_OrButton, {
466
- variant: 'text',
467
- onClick: _cache[1] || (_cache[1] = withModifiers($event => _ctx.$emit('reject'), ["stop"]))
468
- }, {
469
- default: withCtx(() => [createTextVNode(" Cancel ")]),
470
- _: 1 /* STABLE */
471
- })], 2 /* CLASS */);
472
- }
473
-
474
- script$3.render = render$2;
475
- script$3.__file = "src/components/or-date-time-picker-v3/partials/or-date-time-picker-popover-footer/OrDateTimePickerPopoverFooter.vue";
476
-
477
- const DateTimePickerPopoverHeader = [
478
- // Layout
479
- 'layout-row md:hidden',
480
- // Spacing
481
- 'px-md', 'py-md', 'gap-xl'];
482
-
483
- var script$2 = defineComponent({
484
- name: 'OrDateTimePickerPopoverHeader',
485
- expose: ['root'],
486
- setup() {
487
- // Refs
488
- const root = ref();
489
- // Styles
490
- const rootStyles = computed(() => ['or-date-time-picker-popover-header', ...DateTimePickerPopoverHeader]);
491
- return {
492
- root,
493
- rootStyles
494
- };
495
- }
496
- });
497
-
498
- function render$1(_ctx, _cache, $props, $setup, $data, $options) {
499
- return openBlock(), createElementBlock("header", {
500
- ref: "root",
501
- class: normalizeClass(_ctx.rootStyles)
502
- }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
503
- }
504
-
505
- script$2.render = render$1;
506
- script$2.__file = "src/components/or-date-time-picker-v3/partials/or-date-time-picker-popover-header/OrDateTimePickerPopoverHeader.vue";
507
-
508
- const DateTimePickerTimeSelect = [
509
- // Layout
510
- 'layout-row justify-center',
511
- // Spacing
512
- 'px-md', 'py-md', 'gap-sm',
513
- // Typography
514
- 'typography-body-2-regular',
515
- // Theme
516
- 'theme-foreground-default', 'dark:theme-foreground-default-dark'];
517
- const DateTimePickerTimeSelectButtonGroup = [
518
- // Layout
519
- 'layout-column',
520
- // Box
521
- 'max-h-[224px]',
522
- // Overflow
523
- 'overflow-x-hidden', 'overflow-y-auto'];
524
- const DateTimePickerTimeSelectButtonGroupItem = [
525
- // Typography
526
- 'typography-caption-regular'];
527
-
528
- var script$1 = defineComponent({
529
- name: 'OrDateTimePickerTimeSelect',
530
- components: {
531
- OrButton: script$7
532
- },
533
- model: {
534
- prop: 'modelValue',
535
- event: 'update:modelValue'
536
- },
537
- props: {
538
- modelValue: {
539
- type: Date,
540
- default: undefined
541
- },
542
- filter: {
543
- type: Function,
544
- default: undefined
545
- }
546
- },
547
- emits: ['update:modelValue'],
548
- expose: ['root'],
549
- setup(props, context) {
550
- // Refs
551
- const root = ref();
552
- // Styles
553
- const rootStyles = computed(() => ['or-date-time-picker-time-select', ...DateTimePickerTimeSelect]);
554
- const buttonGroupStyles = computed(() => [...DateTimePickerTimeSelectButtonGroup]);
555
- const buttonGroupItemStyles = computed(() => [...DateTimePickerTimeSelectButtonGroupItem]);
556
- // State
557
- const proxyModelValue = computed({
558
- get: () => {
559
- var _a;
560
- return (_a = props.modelValue) !== null && _a !== void 0 ? _a : new Date(Date.UTC(useDefaultYear(), useDefaultMonth(), useDefaultDate(), useDefaultHours(), useDefaultMinutes()));
561
- },
562
- set: value => {
563
- context.emit('update:modelValue', value);
564
- }
565
- });
566
- const hoursOptions = computed(() => {
567
- return Array.from({
568
- length: 24
569
- }, (_value, index) => {
570
- const value = index;
571
- return new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth(), proxyModelValue.value.getUTCDate(), value, proxyModelValue.value.getUTCMinutes()));
572
- });
573
- });
574
- const minutesOptions = computed(() => {
575
- return Array.from({
576
- length: 60
577
- }, (_value, index) => {
578
- const value = index;
579
- return new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth(), proxyModelValue.value.getUTCDate(), proxyModelValue.value.getUTCHours(), value));
580
- });
581
- });
582
- // Methods
583
- function formatHours(value) {
584
- return value.toLocaleString('default', {
585
- hour: '2-digit',
586
- timeZone: 'UTC'
587
- });
588
- }
589
- function formatMinutes(value) {
590
- return value.toLocaleString('default', {
591
- minute: '2-digit',
592
- timeZone: 'UTC'
593
- });
594
- }
595
- return {
596
- root,
597
- rootStyles,
598
- buttonGroupStyles,
599
- buttonGroupItemStyles,
600
- proxyModelValue,
601
- hoursOptions,
602
- minutesOptions,
603
- formatHours,
604
- formatMinutes
605
- };
606
- }
607
- });
608
-
609
- function render(_ctx, _cache, $props, $setup, $data, $options) {
610
- const _component_OrButton = resolveComponent("OrButton");
611
- return openBlock(), createElementBlock("div", {
612
- ref: "root",
613
- class: normalizeClass(_ctx.rootStyles)
614
- }, [createElementVNode("div", {
615
- class: normalizeClass(_ctx.buttonGroupStyles)
616
- }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.hoursOptions, value => {
617
- return openBlock(), createBlock(_component_OrButton, {
618
- key: Number(value),
619
- class: normalizeClass(_ctx.buttonGroupItemStyles),
620
- variant: Number(value) === Number(_ctx.proxyModelValue) ? 'contained' : 'text',
621
- color: Number(value) === Number(_ctx.proxyModelValue) ? 'primary' : 'inherit',
622
- disabled: _ctx.filter && !_ctx.filter(value),
623
- onClick: withModifiers($event => _ctx.proxyModelValue = value, ["stop"])
624
- }, {
625
- default: withCtx(() => [createTextVNode(toDisplayString(_ctx.formatHours(value)), 1 /* TEXT */)]),
626
-
627
- _: 2 /* DYNAMIC */
628
- }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "variant", "color", "disabled", "onClick"]);
629
- }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */), createTextVNode(" : "), createElementVNode("div", {
630
- class: normalizeClass(_ctx.buttonGroupStyles)
631
- }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.minutesOptions, value => {
632
- return openBlock(), createBlock(_component_OrButton, {
633
- key: Number(value),
634
- class: normalizeClass(_ctx.buttonGroupItemStyles),
635
- variant: Number(value) === Number(_ctx.proxyModelValue) ? 'contained' : 'text',
636
- color: Number(value) === Number(_ctx.proxyModelValue) ? 'primary' : 'inherit',
637
- disabled: _ctx.filter && !_ctx.filter(value),
638
- onClick: withModifiers($event => _ctx.proxyModelValue = value, ["stop"])
639
- }, {
640
- default: withCtx(() => [createTextVNode(toDisplayString(_ctx.formatMinutes(value)), 1 /* TEXT */)]),
641
-
642
- _: 2 /* DYNAMIC */
643
- }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "variant", "color", "disabled", "onClick"]);
644
- }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */)], 2 /* CLASS */);
645
- }
646
-
647
- script$1.render = render;
648
- script$1.__file = "src/components/or-date-time-picker-v3/partials/or-date-time-picker-time-select/OrDateTimePickerTimeSelect.vue";
649
-
650
- const DateTimePicker = [
651
- // Layout
652
- 'layout-column',
653
- // Spacing
654
- 'gap-xs'];
655
- const DateTimePickerControl = [
656
- // Layout
657
- 'layout-inline-row justify-center',
658
- // Theme (focus)
659
- 'focus:theme-border-2-current', 'dark:focus:theme-border-2-current-dark', 'focus:theme-border-underline', 'dark:focus:theme-border-underline'];
660
-
661
- var script = defineComponent({
662
- name: 'OrDateTimePicker',
663
- components: {
664
- OrDateTimePickerDaySelect: script$6,
665
- OrDateTimePickerMobileControl: script$5,
666
- OrDateTimePickerMonthSelect: script$4,
667
- OrDateTimePickerPopoverFooter: script$3,
668
- OrDateTimePickerPopoverHeader: script$2,
669
- OrDateTimePickerTimeSelect: script$1,
670
- OrError: script$d,
671
- OrHint: script$e,
672
- OrIconButton: script$a,
673
- OrInputBox: script$f,
674
- OrLabel: script$8,
675
- OrPopover: script$g
676
- },
677
- directives: {
678
- DropdownClose,
679
- DropdownOpen
680
- },
681
- model: {
682
- prop: 'modelValue',
683
- event: 'update:modelValue'
684
- },
685
- props: {
686
- modelValue: {
687
- type: Date,
688
- default: undefined
689
- },
690
- filter: {
691
- type: Function,
692
- default: undefined
693
- },
694
- size: {
695
- type: String,
696
- default: InputBoxSize.M
697
- },
698
- label: {
699
- type: String,
700
- default: undefined
701
- },
702
- hint: {
703
- type: String,
704
- default: undefined
705
- },
706
- error: {
707
- type: [String, Boolean],
708
- default: undefined
709
- },
710
- required: {
711
- type: Boolean,
712
- default: false
713
- },
714
- readonly: {
715
- type: Boolean,
716
- default: false
717
- },
718
- disabled: {
719
- type: Boolean,
720
- default: false
721
- },
722
- disableDefaultStyles: {
723
- type: Boolean,
724
- default: false
725
- }
726
- },
727
- emits: ['update:modelValue', 'keydown', 'keyup', 'focus', 'blur'],
728
- expose: ['root', 'focus', 'blur'],
729
- setup(props, context) {
730
- // Refs
731
- const root = ref();
732
- const dateControl = ref();
733
- const timeControl = ref();
734
- const datePopover = ref();
735
- const timePopover = ref();
736
- const datePopoverState = computed(() => {
737
- var _a;
738
- return (_a = datePopover.value) === null || _a === void 0 ? void 0 : _a.state;
739
- });
740
- const timePopoverState = computed(() => {
741
- var _a;
742
- return (_a = timePopover.value) === null || _a === void 0 ? void 0 : _a.state;
743
- });
744
- // Styles
745
- const rootStyles = computed(() => ['or-date-time-picker', ...DateTimePicker]);
746
- const controlStyles = computed(() => [...DateTimePickerControl]);
747
- // State
748
- const controlAttributes = reactive({
749
- id: useIdAttribute(),
750
- ...useControlAttributes(),
751
- ...useValidationAttributes()
752
- });
753
- const proxyModelValue = computed({
754
- get: () => props.modelValue,
755
- set: value => {
756
- context.emit('update:modelValue', value);
757
- }
758
- });
759
- const draftModelValue = ref();
760
- watch(proxyModelValue, value => {
761
- draftModelValue.value = value;
762
- }, {
763
- immediate: true
764
- });
765
- // Methods
766
- function toggleDatePopover() {
767
- if (!props.readonly && !props.disabled) {
768
- const popoverInstance = datePopover.value;
769
- if (popoverInstance) {
770
- if (datePopoverState.value === 'open') {
771
- popoverInstance.close();
772
- } else {
773
- popoverInstance.open();
774
- }
775
- }
776
- }
777
- }
778
- function toggleTimePopover() {
779
- if (!props.readonly && !props.disabled) {
780
- const popoverInstance = timePopover.value;
781
- if (popoverInstance) {
782
- if (timePopoverState.value === 'open') {
783
- popoverInstance.close();
784
- } else {
785
- popoverInstance.open();
786
- }
787
- }
788
- }
789
- }
790
- function closeDatePopover() {
791
- const popoverInstance = datePopover.value;
792
- if (popoverInstance) {
793
- popoverInstance.close();
794
- }
795
- }
796
- function closeTimePopover() {
797
- const popoverInstance = timePopover.value;
798
- if (popoverInstance) {
799
- popoverInstance.close();
800
- }
801
- }
802
- function formatDate(value) {
803
- var _a;
804
- return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString('default', {
805
- dateStyle: 'short',
806
- timeZone: 'UTC'
807
- })) !== null && _a !== void 0 ? _a : '--';
808
- }
809
- function formatTime(value) {
810
- var _a;
811
- return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString('default', {
812
- timeStyle: 'short',
813
- timeZone: 'UTC'
814
- })) !== null && _a !== void 0 ? _a : '--';
815
- }
816
- function formatDateAlt(value) {
817
- var _a;
818
- return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString('default', {
819
- dateStyle: 'medium',
820
- timeZone: 'UTC'
821
- })) !== null && _a !== void 0 ? _a : '--';
822
- }
823
- function formatTimeAlt(value) {
824
- var _a;
825
- return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString('default', {
826
- timeStyle: 'short',
827
- timeZone: 'UTC'
828
- })) !== null && _a !== void 0 ? _a : '--';
829
- }
830
- return {
831
- root,
832
- dateControl,
833
- timeControl,
834
- datePopover,
835
- timePopover,
836
- datePopoverState,
837
- timePopoverState,
838
- rootStyles,
839
- controlStyles,
840
- controlAttributes,
841
- proxyModelValue,
842
- draftModelValue,
843
- toggleDatePopover,
844
- toggleTimePopover,
845
- closeDatePopover,
846
- closeTimePopover,
847
- formatDate,
848
- formatTime,
849
- formatDateAlt,
850
- formatTimeAlt
851
- };
852
- }
853
- });
854
-
855
- export { script as s };