@adyen/bento-vue3 1.92.1 → 1.92.2
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.
- package/dist/assets/accordion-item.css +1 -1
- package/dist/assets/action-bar.css +1 -1
- package/dist/assets/base-modal.css +1 -1
- package/dist/assets/button-actions.css +1 -1
- package/dist/assets/card.css +1 -1
- package/dist/assets/data-grid.css +1 -1
- package/dist/assets/dialog-page.css +1 -1
- package/dist/assets/file-uploader.css +1 -1
- package/dist/assets/inspector.css +1 -1
- package/dist/assets/modal-fullscreen.css +1 -1
- package/dist/assets/secondary-nav.css +1 -1
- package/dist/assets/sidepanel.css +1 -1
- package/dist/chunks/{code-snippet.KKUb5A6A.js → code-snippet.Dtb7CDv9.js} +2 -2
- package/dist/chunks/{code-snippet.KKUb5A6A.js.map → code-snippet.Dtb7CDv9.js.map} +1 -1
- package/dist/chunks/{data-grid.BL4DPi_-.js → data-grid.T-FnwChG.js} +5 -5
- package/dist/chunks/{data-grid.BL4DPi_-.js.map → data-grid.T-FnwChG.js.map} +1 -1
- package/dist/chunks/{date-picker.Cgr0Sbo0.js → date-picker.hUcnFn4K.js} +14 -14
- package/dist/chunks/{date-picker.Cgr0Sbo0.js.map → date-picker.hUcnFn4K.js.map} +1 -1
- package/dist/chunks/{date-range-picker.Cpw7J4d1.js → date-range-picker.BM5gxJcL.js} +26 -26
- package/dist/chunks/{date-range-picker.Cpw7J4d1.js.map → date-range-picker.BM5gxJcL.js.map} +1 -1
- package/dist/chunks/{dropdown-tag.DqhjcJXf.js → dropdown-tag.Sk2n9gbl.js} +2 -2
- package/dist/chunks/{dropdown-tag.DqhjcJXf.js.map → dropdown-tag.Sk2n9gbl.js.map} +1 -1
- package/dist/chunks/{dropdown.C323NUqq.js → dropdown.CuIBYLdy.js} +30 -30
- package/dist/chunks/{dropdown.C323NUqq.js.map → dropdown.CuIBYLdy.js.map} +1 -1
- package/dist/chunks/{filter-bar.CuZruHzo.js → filter-bar.BA2Rtf_p.js} +7 -7
- package/dist/chunks/{filter-bar.CuZruHzo.js.map → filter-bar.BA2Rtf_p.js.map} +1 -1
- package/dist/chunks/{header-with-views.BI6uh8o0.js → header-with-views.CYBBcnCP.js} +3 -3
- package/dist/chunks/{header-with-views.BI6uh8o0.js.map → header-with-views.CYBBcnCP.js.map} +1 -1
- package/dist/chunks/{input-field-password.CbDeLcL2.js → input-field-password.CpRKmq4h.js} +3 -3
- package/dist/chunks/{input-field-password.CbDeLcL2.js.map → input-field-password.CpRKmq4h.js.map} +1 -1
- package/dist/chunks/{input-field-phone-number.DzruT8x5.js → input-field-phone-number.BZy1o9VW.js} +3 -3
- package/dist/chunks/{input-field-phone-number.DzruT8x5.js.map → input-field-phone-number.BZy1o9VW.js.map} +1 -1
- package/dist/chunks/{input-field.zwUuajnC.js → input-field.BseE_MT0.js} +2 -2
- package/dist/chunks/{input-field.zwUuajnC.js.map → input-field.BseE_MT0.js.map} +1 -1
- package/dist/chunks/{input-time.RUecHW9h.js → input-time.DAxp5Kku.js} +3 -3
- package/dist/chunks/{input-time.RUecHW9h.js.map → input-time.DAxp5Kku.js.map} +1 -1
- package/dist/chunks/{modal.vue_vue_type_script_setup_true_lang.BW9Ff59H.js → modal.vue_vue_type_script_setup_true_lang.Bh_GY-Ah.js} +103 -110
- package/dist/chunks/{modal.vue_vue_type_script_setup_true_lang.BW9Ff59H.js.map → modal.vue_vue_type_script_setup_true_lang.Bh_GY-Ah.js.map} +1 -1
- package/dist/chunks/{pagination.BJtoP8At.js → pagination.Ch_Occwt.js} +2 -2
- package/dist/chunks/{pagination.BJtoP8At.js.map → pagination.Ch_Occwt.js.map} +1 -1
- package/dist/chunks/{search-bar.CGXKk-gv.js → search-bar.BRf_Mf7n.js} +3 -3
- package/dist/chunks/{search-bar.CGXKk-gv.js.map → search-bar.BRf_Mf7n.js.map} +1 -1
- package/dist/chunks/{secondary-nav.DkcoRjfJ.js → secondary-nav.CROQNbYk.js} +2 -2
- package/dist/chunks/{secondary-nav.DkcoRjfJ.js.map → secondary-nav.CROQNbYk.js.map} +1 -1
- package/dist/code-snippet.js +1 -1
- package/dist/data-grid.js +1 -1
- package/dist/date-picker.js +1 -1
- package/dist/date-range-picker.js +1 -1
- package/dist/dropdown.js +2 -2
- package/dist/filter-bar.js +1 -1
- package/dist/header-with-views.js +1 -1
- package/dist/index.js +243 -243
- package/dist/input-field-password.js +1 -1
- package/dist/input-field-phone-number.js +1 -1
- package/dist/input-field.js +1 -1
- package/dist/input-time.js +1 -1
- package/dist/modal.js +1 -1
- package/dist/pagination.js +1 -1
- package/dist/search-bar.js +2 -2
- package/dist/secondary-nav.js +1 -1
- package/dist/web-types.json +1 -1
- package/package.json +5 -5
|
@@ -2,16 +2,16 @@ import { ref as m, computed as r, defineComponent as me, toRef as E, watch as G,
|
|
|
2
2
|
import { g as Ae, s as _, b as Ie, e as Me, f as Se, p as Fe } from "./calendar.DfMwuOIR.js";
|
|
3
3
|
import { h as Ce } from "./button-actions.7Oi2Ra4p.js";
|
|
4
4
|
import { d as Be, B as Pe } from "./typography.B3J6_tYk.js";
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
5
|
+
import { D as Ne } from "./dropdown.CuIBYLdy.js";
|
|
6
|
+
import { B as Ve } from "./input-field.BseE_MT0.js";
|
|
7
|
+
import { d as Ee } from "./use-cached-selected-values.DUWGSMvO.js";
|
|
7
8
|
import { g as A } from "./generate-uid.DBWe4g6T.js";
|
|
8
9
|
import { u as j } from "./index.B875RXHM.js";
|
|
9
|
-
import { u as
|
|
10
|
-
import { u as X, a as
|
|
11
|
-
import { u as
|
|
12
|
-
import { u as
|
|
13
|
-
import { B as
|
|
14
|
-
import { D as Oe } from "./dropdown.C323NUqq.js";
|
|
10
|
+
import { u as Re } from "./form-field.D_2g7vaP.js";
|
|
11
|
+
import { u as X, a as Ye } from "./use-date-input-formatter.BH4hdEJW.js";
|
|
12
|
+
import { u as Te } from "./use-form-layout-loading.CWbjZiwP.js";
|
|
13
|
+
import { u as we } from "./use-touch-device.DTqFAbXh.js";
|
|
14
|
+
import { B as Oe } from "./directive.C8kY-ZW-.js";
|
|
15
15
|
import { F as qe } from "./field-label.DZYFjFgr.js";
|
|
16
16
|
import { E as J } from "./error-message.Dyvrw6ZB.js";
|
|
17
17
|
import { _ as ze } from "./_plugin-vue_export-helper.CHgC5LLL.js";
|
|
@@ -84,7 +84,7 @@ const Y = {
|
|
|
84
84
|
},
|
|
85
85
|
emits: ["update:model-value", "input"],
|
|
86
86
|
setup(v, { emit: I }) {
|
|
87
|
-
const a = v, B = I, { t: b } = j({ messages: Y }), y = A("bento-date-picker-container"), o = A("bento-date-picker-label"), T = A("bento-date-picker-description"), P = A("bento-date-picker-error"), i = A("bento-date-picker-date-error"), k = r(() => a.label || b("datePicker", { name: y })), w = m(null), g = m(null), u = m(!1), l = m(!1), O = m(void 0), c = m(a.modelValue), { isReadOnly: q } =
|
|
87
|
+
const a = v, B = I, { t: b } = j({ messages: Y }), y = A("bento-date-picker-container"), o = A("bento-date-picker-label"), T = A("bento-date-picker-description"), P = A("bento-date-picker-error"), i = A("bento-date-picker-date-error"), k = r(() => a.label || b("datePicker", { name: y })), w = m(null), g = m(null), u = m(!1), l = m(!1), O = m(void 0), c = m(a.modelValue), { isReadOnly: q } = Te(E(a, "readonly")), { emitValue: n } = Re(B), { resolvedFirstDayOfWeek: H } = Ye(E(a, "firstDayOfWeek")), { isFormatValid: z, parseDate: M, onKeyDown: Q, autoFormat: Z } = X(), { isTouchDevice: N } = we(), ee = r(() => ({
|
|
88
88
|
initialFocus: O.value,
|
|
89
89
|
additionalContainers: [g.value.$el]
|
|
90
90
|
}));
|
|
@@ -138,7 +138,7 @@ const Y = {
|
|
|
138
138
|
if (e.length < 10)
|
|
139
139
|
return;
|
|
140
140
|
z(e) && ne(M(e)) ? (u.value = !1, n(M(e))) : e && (u.value = !0, n(null));
|
|
141
|
-
}, ce =
|
|
141
|
+
}, ce = Ee(U, 1e3), pe = (e) => {
|
|
142
142
|
s.value = Z(e), l.value || N.value ? U(s.value) : ce(s.value);
|
|
143
143
|
}, W = async (e) => {
|
|
144
144
|
l.value || (e.preventDefault(), K(), await he(), c.value || (L(/* @__PURE__ */ new Date()), n(/* @__PURE__ */ new Date())), O.value = w.value?.$refs.calendarRef[0].focusOnDate(
|
|
@@ -162,7 +162,7 @@ const Y = {
|
|
|
162
162
|
required: e.required
|
|
163
163
|
}, null, 8, ["id", "label", "tooltip-text", "optional", "required"])) : h("", !0),
|
|
164
164
|
De("div", null, [
|
|
165
|
-
t(N) ? (d(), p(t(
|
|
165
|
+
t(N) ? (d(), p(t(Ve), {
|
|
166
166
|
key: 0,
|
|
167
167
|
ref_key: "inputContainerRef",
|
|
168
168
|
ref: g,
|
|
@@ -178,7 +178,7 @@ const Y = {
|
|
|
178
178
|
min: oe.value,
|
|
179
179
|
max: ie.value,
|
|
180
180
|
"onUpdate:modelValue": le
|
|
181
|
-
}, null, 8, ["type", "aria-labelledby", "aria-label", "aria-describedby", "aria-required", "disabled", "error", "model-value", "readonly", "min", "max"])) : (d(), p(t(
|
|
181
|
+
}, null, 8, ["type", "aria-labelledby", "aria-label", "aria-describedby", "aria-required", "disabled", "error", "model-value", "readonly", "min", "max"])) : (d(), p(t(Ne), {
|
|
182
182
|
key: 1,
|
|
183
183
|
ref_key: "inputContainerRef",
|
|
184
184
|
ref: g,
|
|
@@ -259,11 +259,11 @@ const Y = {
|
|
|
259
259
|
_: 1
|
|
260
260
|
}, 8, ["id", "open", "target-element", "aria-label", "trap-all-options"])) : h("", !0)
|
|
261
261
|
], 32)), [
|
|
262
|
-
[t(
|
|
262
|
+
[t(Oe), F]
|
|
263
263
|
]);
|
|
264
264
|
}
|
|
265
265
|
}), ia = /* @__PURE__ */ ze(Ke, [["__scopeId", "data-v-891101c7"]]);
|
|
266
266
|
export {
|
|
267
267
|
ia as B
|
|
268
268
|
};
|
|
269
|
-
//# sourceMappingURL=date-picker.
|
|
269
|
+
//# sourceMappingURL=date-picker.hUcnFn4K.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-picker.Cgr0Sbo0.js","sources":["../../../vue2/src/components/date-picker/composables/use-date-picker-single-calendar-text.ts","../../../vue2/src/components/date-picker/date-picker.vue"],"sourcesContent":["import { computed, ref } from 'vue';\nimport { useI18n } from '@/utils/ts/i18n';\nimport { type UseDateDisplayText } from './use-date-picker-single-calendar-text.types';\nimport { startOfMonth } from 'date-fns/startOfMonth';\nimport { getDateTimeFormatter } from '@/utils/ts/format-date/format-date';\nimport { useDateInputFormatter } from '@/composables/use-date-input-formatter/use-date-input-formatter';\nimport messages from '../messages.json';\n\ntype MessageSchema = (typeof messages)['en-US'];\n\n/**\n * Composable that sets and formats the date to be displayed in the input box of a Single Date Picker\n * @param option.datePickerValue Ref to the datePickerValue set in the DatePicker component\n * @param option.isDateIncorrect Indicates if the date is correct or not\n * @param option.isMonthVariant Indicates if the date picker has variant \"month\"\n */\nexport const useDatePickerSingleCalendarText: UseDateDisplayText<Date> = ({\n datePickerValue,\n isDateIncorrect,\n isMonthVariant,\n placeholder,\n}) => {\n const { locale, t } = useI18n<{ message: MessageSchema }>({ messages });\n const { formatDate } = useDateInputFormatter();\n\n const textInputValue = ref(datePickerValue.value?.toDateString());\n\n const dateDisplayValue = computed(() => {\n // Display incorrect date when there's an error with the input\n if (isDateIncorrect.value) {\n return textInputValue.value;\n }\n\n // Display \"Select a date\" when there's no date selected or input\n if (!datePickerValue.value) {\n return placeholder?.value || (t('selectDate') as string);\n }\n\n // Display the date in format \"dd MMM, yyyy (25 Jun, 2023)\" or \"MMMM yyyy (June 2023)\"\n // if there's a valid date selected\n const dateFormatOptions: Intl.DateTimeFormatOptions = isMonthVariant?.value\n ? { month: 'long', year: 'numeric' }\n : { day: 'numeric', month: 'short', year: 'numeric' };\n\n return getDateTimeFormatter(locale.value, dateFormatOptions).format(datePickerValue.value);\n });\n\n /**\n * Formats the \"dateToFormat\" date value with the current format and sets it as \"formatTextInputDisplayValue\" value\n * @param dateToFormat - Date to be assigned and formatted\n */\n const formatTextInputDisplayValue = (dateToFormat: Date = datePickerValue.value) => {\n // If date is incorrect, leave the textInputValue intact\n if (isDateIncorrect.value) {\n return;\n }\n\n if (!dateToFormat) {\n textInputValue.value = '';\n return;\n }\n\n const date = isMonthVariant?.value ? startOfMonth(dateToFormat) : dateToFormat;\n textInputValue.value = formatDate(date);\n };\n\n return {\n // Values\n dateDisplayValue,\n textInputValue,\n\n // Methods\n formatTextInputDisplayValue,\n };\n};\n","<!-- TODO: Remove aria props as these are part of JSX elements /vue/types/jsx.d.ts -->\n<!-- eslint-disable vue/attribute-hyphenation -->\n<template>\n <div\n v-bento-click-outside-directive=\"closeDatePicker\"\n class=\"b-date-picker\"\n @keydown.space.capture=\"onSpaceBarOrEnter\"\n @keydown.enter.capture=\"onSpaceBarOrEnter\"\n >\n <!-- Label -->\n <field-label\n v-if=\"label\"\n :id=\"labelId\"\n :label=\"label\"\n :tooltip-text=\"tooltipText\"\n :optional=\"optional\"\n :required=\"required\"\n />\n\n <!-- Input -->\n <div>\n <bento-input-field\n v-if=\"isTouchDevice\"\n ref=\"inputContainerRef\"\n :type=\"isMonthVariant ? 'month' : 'date'\"\n :aria-labelledby=\"label ? labelId : $attrs?.['aria-labelledby']\"\n :aria-label=\"label || $attrs?.['aria-labelledby'] ? null : popoverAriaLabel\"\n :aria-describedby=\"ariaDescribedBy\"\n :aria-required=\"required\"\n :disabled=\"disabled\"\n :error=\"!!errorMessage || !!dateErrorText\"\n :model-value=\"nativeValue\"\n :readonly=\"isReadOnly\"\n :min=\"formattedMin\"\n :max=\"formattedMax\"\n @update:model-value=\"onNativeDateInput\"\n />\n <dropdown-input-default\n v-else\n ref=\"inputContainerRef\"\n always-combobox-is-input\n :ariaControls=\"datePickerContainerId\"\n :ariaExpanded=\"isDatePickerOpen\"\n :aria-labelledby=\"label ? labelId : $attrs?.['aria-labelledby']\"\n :aria-label=\"label ? null : popoverAriaLabel\"\n :aria-describedby=\"ariaDescribedBy\"\n :aria-required=\"required\"\n :disabled=\"disabled\"\n dynamic-filtering\n :is-invalid=\"!!errorMessage || !!dateErrorText\"\n :open=\"isDatePickerOpen\"\n :value=\"textInputValue\"\n :display-value=\"dateDisplayValue\"\n :debounce-time=\"0\"\n :readonly=\"isReadOnly\"\n @input=\"onDateInputChange\"\n @open=\"openDatePicker\"\n @keydown=\"onDateKeyDown\"\n @clear=\"clearDatePickerValue\"\n @close=\"closeDatePicker\"\n />\n </div>\n\n <!-- Error Messages -->\n <error-message\n v-if=\"dateErrorText\"\n :id=\"dateErrorId\"\n :error-message=\"dateErrorText\"\n class=\"b-date-picker__error-message\"\n />\n <error-message\n v-if=\"errorMessage\"\n :id=\"errorId\"\n :error-message=\"errorMessage\"\n class=\"b-date-picker__error-message\"\n />\n\n <!-- Description -->\n <bento-typography\n v-if=\"description\"\n class=\"b-date-picker__description\"\n :class=\"descriptionConditionalClasses\"\n el=\"span\"\n >\n {{ description }}\n </bento-typography>\n\n <!-- Calendar container -->\n <bento-popover\n v-if=\"inputContainerRef && !isTouchDevice\"\n :id=\"datePickerContainerId\"\n class=\"b-date-picker__container\"\n role=\"dialog\"\n :open=\"isDatePickerOpen\"\n :target-element=\"inputContainerRef\"\n :aria-label=\"popoverAriaLabel\"\n :aria-modal=\"true\"\n position=\"bottom-start\"\n fit-content\n trap-all\n :trap-all-options=\"computedTrapAllOptions\"\n @keydown.esc.native=\"closeDatePicker\"\n >\n <calendar\n ref=\"calendarContainerRef\"\n :default-display-month=\"defaultDisplayMonth\"\n :first-day-of-week=\"resolvedFirstDayOfWeek\"\n :is-date-disabled=\"isDateDisabled\"\n :number-of-months=\"1\"\n :value=\"internalModelValue\"\n :min=\"min\"\n :max=\"max\"\n :variant=\"variant\"\n @input=\"onDateSelected\"\n />\n </bento-popover>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, nextTick, ref, toRef, watch } from 'vue';\n import { startOfMonth } from 'date-fns/startOfMonth';\n\n // Components\n import { BentoPopover } from '@/components/popover';\n import { BentoTypography } from '../typography';\n import { Calendar, type CalendarSingleDateValue, ErrorMessage, FieldLabel } from '@/internal';\n import { DropdownInputDefault } from '@/components/dropdown/components';\n import { BentoInputField } from '@/components/input-field';\n\n // Utils\n import { debounce } from '@/utils/ts/debounce';\n import { generateUid } from '@/core/utils/ts';\n import { useI18n } from '@/utils/ts/i18n';\n import { dateToNativeDateString, dateToNativeMonthString, parseNativeMonthString } from '@/utils/ts/format-date';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n import { deprecate } from '@/utils/ts/deprecate';\n\n // Composables\n import { useDatePickerSingleCalendarText } from './composables/use-date-picker-single-calendar-text';\n import { useDateInputFormatter, useFirstDayOfWeek, useFormLayoutFieldLoading, useTouchDevice } from '@/composables';\n\n // Directive\n import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives';\n\n // Types\n import { type BentoDatePickerEmits, type BentoDatePickerProps } from './date-picker.types';\n\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n const DEBOUNCE_TIME = 1000;\n\n const props = withDefaults(defineProps<BentoDatePickerProps>(), {\n defaultDisplayMonth: null,\n description: undefined,\n disabled: false,\n errorMessage: null,\n firstDayOfWeek: undefined,\n isDateDisabled: undefined,\n label: undefined,\n max: null,\n min: null,\n modelValue: null,\n optional: false,\n placeholder: null,\n readonly: false,\n required: false,\n tooltipText: null,\n value: null,\n variant: undefined, // Default will be set by @/internal/calendar\n });\n\n const emit = defineEmits<BentoDatePickerEmits>();\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n const datePickerContainerId = generateUid('bento-date-picker-container');\n const labelId = generateUid('bento-date-picker-label');\n const descriptionId = generateUid('bento-date-picker-description');\n const errorId = generateUid('bento-date-picker-error');\n const dateErrorId = generateUid('bento-date-picker-date-error');\n const popoverAriaLabel = computed(() => props.label || t('datePicker', { name: datePickerContainerId }));\n\n // Refs\n const calendarContainerRef = ref(null);\n const inputContainerRef = ref(null);\n\n // Values\n const isDateIncorrect = ref(false);\n const isDatePickerOpen = ref(false);\n const initialFocusOnDatePickerOpen = ref(undefined);\n const internalModelValue = ref<CalendarSingleDateValue | null>(props.modelValue); // to be removed when `props.value` is removed\n const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n const { emitValue } = useFormFieldEmits<CalendarSingleDateValue>(emit);\n const { resolvedFirstDayOfWeek } = useFirstDayOfWeek(toRef(props, 'firstDayOfWeek'));\n const { isFormatValid, parseDate, onKeyDown, autoFormat } = useDateInputFormatter();\n const { isTouchDevice } = useTouchDevice();\n\n const computedTrapAllOptions = computed(() => ({\n initialFocus: initialFocusOnDatePickerOpen.value,\n additionalContainers: [inputContainerRef.value.$el],\n }));\n\n watch(\n () => props.disabled,\n disabled => {\n // Close date picker popover if it's opened when it's disabled\n if (disabled && isDatePickerOpen.value) {\n isDatePickerOpen.value = false;\n }\n }\n );\n\n watch(\n [() => props.value, () => props.modelValue],\n ([newValue, newModelValue]) => {\n if (newValue) {\n deprecate(\n 'BentoDatePicker \"value\" property',\n `The use of \"value\" prop in \"BentoDatePicker\" is no longer supported. Use the \"v-model\" or \"model-value\" property instead.`,\n '2.0.0'\n );\n }\n\n internalModelValue.value = newModelValue ?? newValue;\n },\n { immediate: true }\n );\n\n const isMonthVariant = computed(() => props.variant === 'month');\n\n const { dateDisplayValue, textInputValue, formatTextInputDisplayValue } = useDatePickerSingleCalendarText({\n datePickerValue: internalModelValue,\n isDateIncorrect,\n isMonthVariant,\n placeholder: toRef(props, 'placeholder'),\n });\n\n const formatNativeDate = (date: Date): string => {\n if (!date) {\n return '';\n }\n return isMonthVariant.value ? dateToNativeMonthString(date) : dateToNativeDateString(date);\n };\n\n const nativeValue = computed(() => formatNativeDate(internalModelValue.value));\n\n const onNativeDateInput = (value: string) => {\n if (!value) {\n emitValue(null);\n return;\n }\n\n if (isMonthVariant.value) {\n emitValue(parseNativeMonthString(value));\n return;\n }\n\n const date = parseDate(value);\n if (date) {\n emitValue(date);\n }\n };\n\n const dateErrorText = computed(() => {\n if (\n props.isDateDisabled &&\n textInputValue.value &&\n isFormatValid(textInputValue.value) &&\n props.isDateDisabled(parseDate(textInputValue.value)) &&\n !isDatePickerOpen.value\n ) {\n return t('selectedDateIsNotAvailable');\n }\n\n return isDateIncorrect.value ? t('provideDateInAFormat') : null;\n });\n\n const descriptionConditionalClasses = computed(() => ({\n 'b-date-picker__description--error': props.errorMessage || dateErrorText.value,\n }));\n\n const ariaDescribedBy = computed(\n () =>\n `${props.description ? descriptionId : ''} ${props.errorMessage ? errorId : ''} ${\n dateErrorText.value ? dateErrorId : ''\n }`.trim() || null\n );\n\n const formattedMin = computed(() => formatNativeDate(props.min));\n const formattedMax = computed(() => formatNativeDate(props.max));\n\n const isDateEnabled = (date: Date) => {\n // Check if date is between min/max bounds, if there are any\n if ((props.min && date <= props.min) || (props.max && date >= props.max)) {\n return false;\n }\n\n // Check if function is set, otherwise all dates are enabled\n if (props.isDateDisabled) {\n return !props.isDateDisabled(date);\n }\n\n return true;\n };\n\n const closeDatePicker = () => {\n isDatePickerOpen.value = false;\n };\n\n const openDatePicker = () => {\n isDatePickerOpen.value = true;\n\n formatTextInputDisplayValue();\n };\n\n const onDateSelected = (selectedDate: Date) => {\n // Reset the error state when a valid date is selected\n isDateIncorrect.value = false;\n\n closeDatePicker();\n emitValue(selectedDate);\n };\n\n const clearDatePickerValue = async () => {\n if (isDateIncorrect.value) {\n isDateIncorrect.value = false;\n textInputValue.value = null;\n }\n emitValue(null);\n };\n\n const onDateKeyDown = (event: KeyboardEvent) => {\n onKeyDown(event);\n };\n\n const validateDate = (stringDate: string) => {\n // Validate only if the date is complete\n if (stringDate.length < 10) {\n return;\n }\n\n const isValidDate = isFormatValid(stringDate) && isDateEnabled(parseDate(stringDate));\n if (isValidDate) {\n isDateIncorrect.value = false;\n emitValue(parseDate(stringDate));\n } else if (stringDate) {\n // Only set to true if the value exists (not null/undefined)\n isDateIncorrect.value = true;\n emitValue(null);\n }\n };\n\n const validateDateDebounced = debounce(validateDate, DEBOUNCE_TIME);\n\n const onDateInputChange = (stringDate: string) => {\n textInputValue.value = autoFormat(stringDate);\n // If we are closing the date picker, we should validate (and emit date inputs) immediately so the user doesn't have to wait for the debounce time.\n // On touch devices with native input, we also want immediate feedback.\n if (isDatePickerOpen.value || isTouchDevice.value) {\n validateDate(textInputValue.value);\n } else {\n validateDateDebounced(textInputValue.value);\n }\n };\n\n /**\n * Space bar and Enter keyDown event handler.\n *\n * * Opens the date picker dialog on the first keydown.\n * * Move focus to selected date, i.e., the date displayed in the date input text field. If no date has been selected, places focus on the current date.\n * @param {KeyboardEvent} event Event being triggered\n */\n const onSpaceBarOrEnter = async (event: KeyboardEvent) => {\n if (isDatePickerOpen.value) {\n return;\n }\n event.preventDefault();\n\n openDatePicker();\n\n // Wait for the date picker dialog to open\n await nextTick();\n\n // Set current date (today) if no date is selected\n if (!internalModelValue.value) {\n // Format the opened date picker date to YYYY-MM-DD\n formatTextInputDisplayValue(new Date());\n emitValue(new Date());\n }\n\n // Set initial focus\n initialFocusOnDatePickerOpen.value =\n calendarContainerRef.value?.$refs.calendarRef[0].focusOnDate(\n props.variant === 'month' ? startOfMonth(internalModelValue.value) : internalModelValue.value,\n true\n ) ?? undefined;\n };\n</script>\n\n<script lang=\"ts\">\n /**\n * Date picker selector.\n *\n * @example\n * import { BentoDatePicker } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoDatePicker },\n * template: `\n * <bento-date-picker\n * label=\"Label\"\n * description=\"Supporting text\"\n * required\n * optional\n * disabled\n * @input=\"onDateChanged\"\n * v-model=\"selectedDate\"\n * />\n * `,\n * setup() {\n * const selectedDate = ref(new Date()); // reactive({ startDate: new Date(), endDate: new Date() })\n * return {\n * selectedDate,\n * }\n * }\n * }\n */\n export default {\n i18n: { messages },\n name: 'bento-date-picker',\n model: { prop: 'modelValue' },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./date-picker.scss\" />\n"],"names":["useDatePickerSingleCalendarText","datePickerValue","isDateIncorrect","isMonthVariant","placeholder","locale","t","useI18n","messages","formatDate","useDateInputFormatter","textInputValue","ref","computed","dateFormatOptions","getDateTimeFormatter","dateToFormat","date","startOfMonth","__default__","props","__props","emit","__emit","datePickerContainerId","generateUid","labelId","descriptionId","errorId","dateErrorId","popoverAriaLabel","calendarContainerRef","inputContainerRef","isDatePickerOpen","initialFocusOnDatePickerOpen","internalModelValue","isReadOnly","useFormLayoutFieldLoading","toRef","emitValue","useFormFieldEmits","resolvedFirstDayOfWeek","useFirstDayOfWeek","isFormatValid","parseDate","onKeyDown","autoFormat","isTouchDevice","useTouchDevice","computedTrapAllOptions","watch","disabled","newValue","newModelValue","deprecate","dateDisplayValue","formatTextInputDisplayValue","formatNativeDate","dateToNativeMonthString","dateToNativeDateString","nativeValue","onNativeDateInput","value","parseNativeMonthString","dateErrorText","descriptionConditionalClasses","ariaDescribedBy","formattedMin","formattedMax","isDateEnabled","closeDatePicker","openDatePicker","onDateSelected","selectedDate","clearDatePickerValue","onDateKeyDown","event","validateDate","stringDate","validateDateDebounced","debounce","onDateInputChange","onSpaceBarOrEnter","nextTick"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"date-picker.hUcnFn4K.js","sources":["../../../vue2/src/components/date-picker/composables/use-date-picker-single-calendar-text.ts","../../../vue2/src/components/date-picker/date-picker.vue"],"sourcesContent":["import { computed, ref } from 'vue';\nimport { useI18n } from '@/utils/ts/i18n';\nimport { type UseDateDisplayText } from './use-date-picker-single-calendar-text.types';\nimport { startOfMonth } from 'date-fns/startOfMonth';\nimport { getDateTimeFormatter } from '@/utils/ts/format-date/format-date';\nimport { useDateInputFormatter } from '@/composables/use-date-input-formatter/use-date-input-formatter';\nimport messages from '../messages.json';\n\ntype MessageSchema = (typeof messages)['en-US'];\n\n/**\n * Composable that sets and formats the date to be displayed in the input box of a Single Date Picker\n * @param option.datePickerValue Ref to the datePickerValue set in the DatePicker component\n * @param option.isDateIncorrect Indicates if the date is correct or not\n * @param option.isMonthVariant Indicates if the date picker has variant \"month\"\n */\nexport const useDatePickerSingleCalendarText: UseDateDisplayText<Date> = ({\n datePickerValue,\n isDateIncorrect,\n isMonthVariant,\n placeholder,\n}) => {\n const { locale, t } = useI18n<{ message: MessageSchema }>({ messages });\n const { formatDate } = useDateInputFormatter();\n\n const textInputValue = ref(datePickerValue.value?.toDateString());\n\n const dateDisplayValue = computed(() => {\n // Display incorrect date when there's an error with the input\n if (isDateIncorrect.value) {\n return textInputValue.value;\n }\n\n // Display \"Select a date\" when there's no date selected or input\n if (!datePickerValue.value) {\n return placeholder?.value || (t('selectDate') as string);\n }\n\n // Display the date in format \"dd MMM, yyyy (25 Jun, 2023)\" or \"MMMM yyyy (June 2023)\"\n // if there's a valid date selected\n const dateFormatOptions: Intl.DateTimeFormatOptions = isMonthVariant?.value\n ? { month: 'long', year: 'numeric' }\n : { day: 'numeric', month: 'short', year: 'numeric' };\n\n return getDateTimeFormatter(locale.value, dateFormatOptions).format(datePickerValue.value);\n });\n\n /**\n * Formats the \"dateToFormat\" date value with the current format and sets it as \"formatTextInputDisplayValue\" value\n * @param dateToFormat - Date to be assigned and formatted\n */\n const formatTextInputDisplayValue = (dateToFormat: Date = datePickerValue.value) => {\n // If date is incorrect, leave the textInputValue intact\n if (isDateIncorrect.value) {\n return;\n }\n\n if (!dateToFormat) {\n textInputValue.value = '';\n return;\n }\n\n const date = isMonthVariant?.value ? startOfMonth(dateToFormat) : dateToFormat;\n textInputValue.value = formatDate(date);\n };\n\n return {\n // Values\n dateDisplayValue,\n textInputValue,\n\n // Methods\n formatTextInputDisplayValue,\n };\n};\n","<!-- TODO: Remove aria props as these are part of JSX elements /vue/types/jsx.d.ts -->\n<!-- eslint-disable vue/attribute-hyphenation -->\n<template>\n <div\n v-bento-click-outside-directive=\"closeDatePicker\"\n class=\"b-date-picker\"\n @keydown.space.capture=\"onSpaceBarOrEnter\"\n @keydown.enter.capture=\"onSpaceBarOrEnter\"\n >\n <!-- Label -->\n <field-label\n v-if=\"label\"\n :id=\"labelId\"\n :label=\"label\"\n :tooltip-text=\"tooltipText\"\n :optional=\"optional\"\n :required=\"required\"\n />\n\n <!-- Input -->\n <div>\n <bento-input-field\n v-if=\"isTouchDevice\"\n ref=\"inputContainerRef\"\n :type=\"isMonthVariant ? 'month' : 'date'\"\n :aria-labelledby=\"label ? labelId : $attrs?.['aria-labelledby']\"\n :aria-label=\"label || $attrs?.['aria-labelledby'] ? null : popoverAriaLabel\"\n :aria-describedby=\"ariaDescribedBy\"\n :aria-required=\"required\"\n :disabled=\"disabled\"\n :error=\"!!errorMessage || !!dateErrorText\"\n :model-value=\"nativeValue\"\n :readonly=\"isReadOnly\"\n :min=\"formattedMin\"\n :max=\"formattedMax\"\n @update:model-value=\"onNativeDateInput\"\n />\n <dropdown-input-default\n v-else\n ref=\"inputContainerRef\"\n always-combobox-is-input\n :ariaControls=\"datePickerContainerId\"\n :ariaExpanded=\"isDatePickerOpen\"\n :aria-labelledby=\"label ? labelId : $attrs?.['aria-labelledby']\"\n :aria-label=\"label ? null : popoverAriaLabel\"\n :aria-describedby=\"ariaDescribedBy\"\n :aria-required=\"required\"\n :disabled=\"disabled\"\n dynamic-filtering\n :is-invalid=\"!!errorMessage || !!dateErrorText\"\n :open=\"isDatePickerOpen\"\n :value=\"textInputValue\"\n :display-value=\"dateDisplayValue\"\n :debounce-time=\"0\"\n :readonly=\"isReadOnly\"\n @input=\"onDateInputChange\"\n @open=\"openDatePicker\"\n @keydown=\"onDateKeyDown\"\n @clear=\"clearDatePickerValue\"\n @close=\"closeDatePicker\"\n />\n </div>\n\n <!-- Error Messages -->\n <error-message\n v-if=\"dateErrorText\"\n :id=\"dateErrorId\"\n :error-message=\"dateErrorText\"\n class=\"b-date-picker__error-message\"\n />\n <error-message\n v-if=\"errorMessage\"\n :id=\"errorId\"\n :error-message=\"errorMessage\"\n class=\"b-date-picker__error-message\"\n />\n\n <!-- Description -->\n <bento-typography\n v-if=\"description\"\n class=\"b-date-picker__description\"\n :class=\"descriptionConditionalClasses\"\n el=\"span\"\n >\n {{ description }}\n </bento-typography>\n\n <!-- Calendar container -->\n <bento-popover\n v-if=\"inputContainerRef && !isTouchDevice\"\n :id=\"datePickerContainerId\"\n class=\"b-date-picker__container\"\n role=\"dialog\"\n :open=\"isDatePickerOpen\"\n :target-element=\"inputContainerRef\"\n :aria-label=\"popoverAriaLabel\"\n :aria-modal=\"true\"\n position=\"bottom-start\"\n fit-content\n trap-all\n :trap-all-options=\"computedTrapAllOptions\"\n @keydown.esc.native=\"closeDatePicker\"\n >\n <calendar\n ref=\"calendarContainerRef\"\n :default-display-month=\"defaultDisplayMonth\"\n :first-day-of-week=\"resolvedFirstDayOfWeek\"\n :is-date-disabled=\"isDateDisabled\"\n :number-of-months=\"1\"\n :value=\"internalModelValue\"\n :min=\"min\"\n :max=\"max\"\n :variant=\"variant\"\n @input=\"onDateSelected\"\n />\n </bento-popover>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, nextTick, ref, toRef, watch } from 'vue';\n import { startOfMonth } from 'date-fns/startOfMonth';\n\n // Components\n import { BentoPopover } from '@/components/popover';\n import { BentoTypography } from '../typography';\n import { Calendar, type CalendarSingleDateValue, ErrorMessage, FieldLabel } from '@/internal';\n import { DropdownInputDefault } from '@/components/dropdown/components';\n import { BentoInputField } from '@/components/input-field';\n\n // Utils\n import { debounce } from '@/utils/ts/debounce';\n import { generateUid } from '@/core/utils/ts';\n import { useI18n } from '@/utils/ts/i18n';\n import { dateToNativeDateString, dateToNativeMonthString, parseNativeMonthString } from '@/utils/ts/format-date';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n import { deprecate } from '@/utils/ts/deprecate';\n\n // Composables\n import { useDatePickerSingleCalendarText } from './composables/use-date-picker-single-calendar-text';\n import { useDateInputFormatter, useFirstDayOfWeek, useFormLayoutFieldLoading, useTouchDevice } from '@/composables';\n\n // Directive\n import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives';\n\n // Types\n import { type BentoDatePickerEmits, type BentoDatePickerProps } from './date-picker.types';\n\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n const DEBOUNCE_TIME = 1000;\n\n const props = withDefaults(defineProps<BentoDatePickerProps>(), {\n defaultDisplayMonth: null,\n description: undefined,\n disabled: false,\n errorMessage: null,\n firstDayOfWeek: undefined,\n isDateDisabled: undefined,\n label: undefined,\n max: null,\n min: null,\n modelValue: null,\n optional: false,\n placeholder: null,\n readonly: false,\n required: false,\n tooltipText: null,\n value: null,\n variant: undefined, // Default will be set by @/internal/calendar\n });\n\n const emit = defineEmits<BentoDatePickerEmits>();\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n const datePickerContainerId = generateUid('bento-date-picker-container');\n const labelId = generateUid('bento-date-picker-label');\n const descriptionId = generateUid('bento-date-picker-description');\n const errorId = generateUid('bento-date-picker-error');\n const dateErrorId = generateUid('bento-date-picker-date-error');\n const popoverAriaLabel = computed(() => props.label || t('datePicker', { name: datePickerContainerId }));\n\n // Refs\n const calendarContainerRef = ref(null);\n const inputContainerRef = ref(null);\n\n // Values\n const isDateIncorrect = ref(false);\n const isDatePickerOpen = ref(false);\n const initialFocusOnDatePickerOpen = ref(undefined);\n const internalModelValue = ref<CalendarSingleDateValue | null>(props.modelValue); // to be removed when `props.value` is removed\n const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n const { emitValue } = useFormFieldEmits<CalendarSingleDateValue>(emit);\n const { resolvedFirstDayOfWeek } = useFirstDayOfWeek(toRef(props, 'firstDayOfWeek'));\n const { isFormatValid, parseDate, onKeyDown, autoFormat } = useDateInputFormatter();\n const { isTouchDevice } = useTouchDevice();\n\n const computedTrapAllOptions = computed(() => ({\n initialFocus: initialFocusOnDatePickerOpen.value,\n additionalContainers: [inputContainerRef.value.$el],\n }));\n\n watch(\n () => props.disabled,\n disabled => {\n // Close date picker popover if it's opened when it's disabled\n if (disabled && isDatePickerOpen.value) {\n isDatePickerOpen.value = false;\n }\n }\n );\n\n watch(\n [() => props.value, () => props.modelValue],\n ([newValue, newModelValue]) => {\n if (newValue) {\n deprecate(\n 'BentoDatePicker \"value\" property',\n `The use of \"value\" prop in \"BentoDatePicker\" is no longer supported. Use the \"v-model\" or \"model-value\" property instead.`,\n '2.0.0'\n );\n }\n\n internalModelValue.value = newModelValue ?? newValue;\n },\n { immediate: true }\n );\n\n const isMonthVariant = computed(() => props.variant === 'month');\n\n const { dateDisplayValue, textInputValue, formatTextInputDisplayValue } = useDatePickerSingleCalendarText({\n datePickerValue: internalModelValue,\n isDateIncorrect,\n isMonthVariant,\n placeholder: toRef(props, 'placeholder'),\n });\n\n const formatNativeDate = (date: Date): string => {\n if (!date) {\n return '';\n }\n return isMonthVariant.value ? dateToNativeMonthString(date) : dateToNativeDateString(date);\n };\n\n const nativeValue = computed(() => formatNativeDate(internalModelValue.value));\n\n const onNativeDateInput = (value: string) => {\n if (!value) {\n emitValue(null);\n return;\n }\n\n if (isMonthVariant.value) {\n emitValue(parseNativeMonthString(value));\n return;\n }\n\n const date = parseDate(value);\n if (date) {\n emitValue(date);\n }\n };\n\n const dateErrorText = computed(() => {\n if (\n props.isDateDisabled &&\n textInputValue.value &&\n isFormatValid(textInputValue.value) &&\n props.isDateDisabled(parseDate(textInputValue.value)) &&\n !isDatePickerOpen.value\n ) {\n return t('selectedDateIsNotAvailable');\n }\n\n return isDateIncorrect.value ? t('provideDateInAFormat') : null;\n });\n\n const descriptionConditionalClasses = computed(() => ({\n 'b-date-picker__description--error': props.errorMessage || dateErrorText.value,\n }));\n\n const ariaDescribedBy = computed(\n () =>\n `${props.description ? descriptionId : ''} ${props.errorMessage ? errorId : ''} ${\n dateErrorText.value ? dateErrorId : ''\n }`.trim() || null\n );\n\n const formattedMin = computed(() => formatNativeDate(props.min));\n const formattedMax = computed(() => formatNativeDate(props.max));\n\n const isDateEnabled = (date: Date) => {\n // Check if date is between min/max bounds, if there are any\n if ((props.min && date <= props.min) || (props.max && date >= props.max)) {\n return false;\n }\n\n // Check if function is set, otherwise all dates are enabled\n if (props.isDateDisabled) {\n return !props.isDateDisabled(date);\n }\n\n return true;\n };\n\n const closeDatePicker = () => {\n isDatePickerOpen.value = false;\n };\n\n const openDatePicker = () => {\n isDatePickerOpen.value = true;\n\n formatTextInputDisplayValue();\n };\n\n const onDateSelected = (selectedDate: Date) => {\n // Reset the error state when a valid date is selected\n isDateIncorrect.value = false;\n\n closeDatePicker();\n emitValue(selectedDate);\n };\n\n const clearDatePickerValue = async () => {\n if (isDateIncorrect.value) {\n isDateIncorrect.value = false;\n textInputValue.value = null;\n }\n emitValue(null);\n };\n\n const onDateKeyDown = (event: KeyboardEvent) => {\n onKeyDown(event);\n };\n\n const validateDate = (stringDate: string) => {\n // Validate only if the date is complete\n if (stringDate.length < 10) {\n return;\n }\n\n const isValidDate = isFormatValid(stringDate) && isDateEnabled(parseDate(stringDate));\n if (isValidDate) {\n isDateIncorrect.value = false;\n emitValue(parseDate(stringDate));\n } else if (stringDate) {\n // Only set to true if the value exists (not null/undefined)\n isDateIncorrect.value = true;\n emitValue(null);\n }\n };\n\n const validateDateDebounced = debounce(validateDate, DEBOUNCE_TIME);\n\n const onDateInputChange = (stringDate: string) => {\n textInputValue.value = autoFormat(stringDate);\n // If we are closing the date picker, we should validate (and emit date inputs) immediately so the user doesn't have to wait for the debounce time.\n // On touch devices with native input, we also want immediate feedback.\n if (isDatePickerOpen.value || isTouchDevice.value) {\n validateDate(textInputValue.value);\n } else {\n validateDateDebounced(textInputValue.value);\n }\n };\n\n /**\n * Space bar and Enter keyDown event handler.\n *\n * * Opens the date picker dialog on the first keydown.\n * * Move focus to selected date, i.e., the date displayed in the date input text field. If no date has been selected, places focus on the current date.\n * @param {KeyboardEvent} event Event being triggered\n */\n const onSpaceBarOrEnter = async (event: KeyboardEvent) => {\n if (isDatePickerOpen.value) {\n return;\n }\n event.preventDefault();\n\n openDatePicker();\n\n // Wait for the date picker dialog to open\n await nextTick();\n\n // Set current date (today) if no date is selected\n if (!internalModelValue.value) {\n // Format the opened date picker date to YYYY-MM-DD\n formatTextInputDisplayValue(new Date());\n emitValue(new Date());\n }\n\n // Set initial focus\n initialFocusOnDatePickerOpen.value =\n calendarContainerRef.value?.$refs.calendarRef[0].focusOnDate(\n props.variant === 'month' ? startOfMonth(internalModelValue.value) : internalModelValue.value,\n true\n ) ?? undefined;\n };\n</script>\n\n<script lang=\"ts\">\n /**\n * Date picker selector.\n *\n * @example\n * import { BentoDatePicker } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoDatePicker },\n * template: `\n * <bento-date-picker\n * label=\"Label\"\n * description=\"Supporting text\"\n * required\n * optional\n * disabled\n * @input=\"onDateChanged\"\n * v-model=\"selectedDate\"\n * />\n * `,\n * setup() {\n * const selectedDate = ref(new Date()); // reactive({ startDate: new Date(), endDate: new Date() })\n * return {\n * selectedDate,\n * }\n * }\n * }\n */\n export default {\n i18n: { messages },\n name: 'bento-date-picker',\n model: { prop: 'modelValue' },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./date-picker.scss\" />\n"],"names":["useDatePickerSingleCalendarText","datePickerValue","isDateIncorrect","isMonthVariant","placeholder","locale","t","useI18n","messages","formatDate","useDateInputFormatter","textInputValue","ref","computed","dateFormatOptions","getDateTimeFormatter","dateToFormat","date","startOfMonth","__default__","props","__props","emit","__emit","datePickerContainerId","generateUid","labelId","descriptionId","errorId","dateErrorId","popoverAriaLabel","calendarContainerRef","inputContainerRef","isDatePickerOpen","initialFocusOnDatePickerOpen","internalModelValue","isReadOnly","useFormLayoutFieldLoading","toRef","emitValue","useFormFieldEmits","resolvedFirstDayOfWeek","useFirstDayOfWeek","isFormatValid","parseDate","onKeyDown","autoFormat","isTouchDevice","useTouchDevice","computedTrapAllOptions","watch","disabled","newValue","newModelValue","deprecate","dateDisplayValue","formatTextInputDisplayValue","formatNativeDate","dateToNativeMonthString","dateToNativeDateString","nativeValue","onNativeDateInput","value","parseNativeMonthString","dateErrorText","descriptionConditionalClasses","ariaDescribedBy","formattedMin","formattedMax","isDateEnabled","closeDatePicker","openDatePicker","onDateSelected","selectedDate","clearDatePickerValue","onDateKeyDown","event","validateDate","stringDate","validateDateDebounced","debounce","onDateInputChange","onSpaceBarOrEnter","nextTick"],"mappings":"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"}
|
|
@@ -3,18 +3,18 @@ import { j as Ba } from "./index.DDwcHPb6.js";
|
|
|
3
3
|
import { B as Ca } from "./divider.BIY84UH7.js";
|
|
4
4
|
import { h as Na, B as xa } from "./button-actions.7Oi2Ra4p.js";
|
|
5
5
|
import { B as _e, d as Qe } from "./typography.B3J6_tYk.js";
|
|
6
|
+
import { B as Pa, D as Ua } from "./dropdown.CuIBYLdy.js";
|
|
6
7
|
import { g as ue } from "./generate-uid.DBWe4g6T.js";
|
|
7
8
|
import { u as qe } from "./index.B875RXHM.js";
|
|
8
|
-
import { h as de, i as B, j as T, k as
|
|
9
|
-
import { u as Be, a as
|
|
10
|
-
import { t as H, n as
|
|
11
|
-
import { u as
|
|
12
|
-
import { B as
|
|
13
|
-
import { u as
|
|
14
|
-
import { B as at, D as tt } from "./dropdown.C323NUqq.js";
|
|
9
|
+
import { h as de, i as B, j as T, k as Va, l as Je, m as Ga, s as je, n as La, o as Qa, q as Ja, r as We, t as ja, b as U, u as Wa, e as za, f as $a, v as _, p as ze, w as $e, g as Ha } from "./calendar.DfMwuOIR.js";
|
|
10
|
+
import { u as Be, a as Ka } from "./use-date-input-formatter.BH4hdEJW.js";
|
|
11
|
+
import { t as H, n as Xa, c as Za } from "./en-US.BR6y7foR.js";
|
|
12
|
+
import { u as et } from "./use-form-layout-loading.CWbjZiwP.js";
|
|
13
|
+
import { B as at } from "./directive.C8kY-ZW-.js";
|
|
14
|
+
import { u as tt } from "./form-field.D_2g7vaP.js";
|
|
15
15
|
import { B as nt } from "./alert.RD0qOLhx.js";
|
|
16
|
-
import { B as He } from "./input-field.
|
|
17
|
-
import { B as Ke, i as Xe } from "./input-time.
|
|
16
|
+
import { B as He } from "./input-field.BseE_MT0.js";
|
|
17
|
+
import { B as Ke, i as Xe } from "./input-time.DAxp5Kku.js";
|
|
18
18
|
import { B as rt } from "./segmented-control.CQWOO1-J.js";
|
|
19
19
|
import { d as Ze } from "./use-cached-selected-values.DUWGSMvO.js";
|
|
20
20
|
import { u as lt } from "./use-has-slot.CyMiImRQ.js";
|
|
@@ -34,7 +34,7 @@ function we(n, m) {
|
|
|
34
34
|
return +H(n) == +H(m);
|
|
35
35
|
}
|
|
36
36
|
function dt(n, m, v) {
|
|
37
|
-
const [o, p] =
|
|
37
|
+
const [o, p] = Xa(
|
|
38
38
|
v?.in,
|
|
39
39
|
n,
|
|
40
40
|
m
|
|
@@ -50,7 +50,7 @@ function Fe(n, m) {
|
|
|
50
50
|
}
|
|
51
51
|
function ct(n, m) {
|
|
52
52
|
return B(
|
|
53
|
-
|
|
53
|
+
Za(n, n),
|
|
54
54
|
ot(n)
|
|
55
55
|
);
|
|
56
56
|
}
|
|
@@ -83,13 +83,13 @@ const vt = ({
|
|
|
83
83
|
a = T(p.earliest);
|
|
84
84
|
else if (a) {
|
|
85
85
|
const f = aa(a, { weekStartsOn: n });
|
|
86
|
-
B(a, f) || (a = T(
|
|
86
|
+
B(a, f) || (a = T(Va(Je(a, { weekStartsOn: n }), 1)));
|
|
87
87
|
}
|
|
88
88
|
if (p.latest)
|
|
89
89
|
i = x(p.latest);
|
|
90
90
|
else if (i) {
|
|
91
91
|
const f = Je(i, { weekStartsOn: n });
|
|
92
|
-
B(i, f) || (i = x(
|
|
92
|
+
B(i, f) || (i = x(Ga(aa(i, { weekStartsOn: n }), 1)));
|
|
93
93
|
}
|
|
94
94
|
}
|
|
95
95
|
if (p?.type === "monthly") {
|
|
@@ -97,13 +97,13 @@ const vt = ({
|
|
|
97
97
|
a = T(p.earliest);
|
|
98
98
|
else if (a) {
|
|
99
99
|
const f = je(a);
|
|
100
|
-
B(a, f) || (a = je(
|
|
100
|
+
B(a, f) || (a = je(La(a, 1)));
|
|
101
101
|
}
|
|
102
102
|
if (p.latest)
|
|
103
103
|
i = x(p.latest);
|
|
104
104
|
else if (i) {
|
|
105
105
|
const f = ea(i);
|
|
106
|
-
B(i, f) || (i = ea(
|
|
106
|
+
B(i, f) || (i = ea(Qa(i, 1)));
|
|
107
107
|
}
|
|
108
108
|
}
|
|
109
109
|
if (p?.type === "quarterly") {
|
|
@@ -111,13 +111,13 @@ const vt = ({
|
|
|
111
111
|
a = de(p.earliest);
|
|
112
112
|
else if (a) {
|
|
113
113
|
const f = de(a);
|
|
114
|
-
B(a, f) || (a = de(
|
|
114
|
+
B(a, f) || (a = de(Ja(a, 1)));
|
|
115
115
|
}
|
|
116
116
|
if (p.latest)
|
|
117
117
|
i = x(p.latest);
|
|
118
118
|
else if (i) {
|
|
119
119
|
const f = We(i);
|
|
120
|
-
B(i, f) || (i = We(
|
|
120
|
+
B(i, f) || (i = We(ja(i, 1)));
|
|
121
121
|
}
|
|
122
122
|
}
|
|
123
123
|
return { min: a, max: i };
|
|
@@ -302,7 +302,7 @@ const ua = {
|
|
|
302
302
|
adjustEndDateInputForMonthly: Q,
|
|
303
303
|
adjustStartDateInputForQuarterly: te,
|
|
304
304
|
adjustEndDateInputForQuarterly: Re
|
|
305
|
-
} =
|
|
305
|
+
} = Wa(a.firstDayOfWeek), { savedRanges: J, saveRange: ke, resetSavedRanges: pe } = ft(), I = (e) => e ? le(e) : "", Z = C(!1), ee = C(!1), l = Te({
|
|
306
306
|
startDate: a.dateFormData.startDate,
|
|
307
307
|
endDate: a.dateFormData.endDate,
|
|
308
308
|
startTime: a.dateFormData.startTime,
|
|
@@ -321,7 +321,7 @@ const ua = {
|
|
|
321
321
|
return !0;
|
|
322
322
|
};
|
|
323
323
|
return Xe(e) && d();
|
|
324
|
-
}, O = c(() => a.variant === "month"), ie = (e) => e ? O.value ?
|
|
324
|
+
}, O = c(() => a.variant === "month"), ie = (e) => e ? O.value ? za(e) : $a(e) : "", da = c(() => ie(r.startDate)), ca = c(() => ie(r.endDate)), Ne = c(() => k.value ? O.value ? "month" : "date" : "text"), ma = c(() => k.value ? da.value : l.startDate), Da = c(() => k.value ? ca.value : l.endDate), q = (e, t) => !t || !Xe(t) || a.variant === "month" ? e : ve(new Date(e), t), pa = (e) => {
|
|
325
325
|
l.startTime = _(
|
|
326
326
|
a.min && a.allowTimeInput && B(a.min, e.startDate) ? a.min : T(e.startDate)
|
|
327
327
|
), l.endTime = _(
|
|
@@ -575,7 +575,7 @@ const ua = {
|
|
|
575
575
|
}, [
|
|
576
576
|
z("div", Mt, [
|
|
577
577
|
u(G)("title") ? Ge(e.$slots, "title", { key: 0 }, void 0, !0) : F("", !0),
|
|
578
|
-
n.quickSelectRanges ? (S(), N(
|
|
578
|
+
n.quickSelectRanges ? (S(), N(Pa, {
|
|
579
579
|
key: 1,
|
|
580
580
|
"aria-label": u(Y)("customRange"),
|
|
581
581
|
items: oe.value,
|
|
@@ -766,7 +766,7 @@ const ua = {
|
|
|
766
766
|
minute: "numeric",
|
|
767
767
|
second: "numeric",
|
|
768
768
|
hour12: !1
|
|
769
|
-
}),
|
|
769
|
+
}), Ha(i.value, b).formatRange(
|
|
770
770
|
n.value.startDate,
|
|
771
771
|
n.value.endDate
|
|
772
772
|
);
|
|
@@ -808,7 +808,7 @@ const ua = {
|
|
|
808
808
|
},
|
|
809
809
|
emits: ["update:model-value", "input"],
|
|
810
810
|
setup(n, { emit: m }) {
|
|
811
|
-
const v = m, o = n, p = _a(), { t: a } = qe({ messages: Ce }), { dateToInputDateString: i } = Be(), f = ue("bento-date-range-picker-container"), G = ue("bento-date-range-picker-label"), Y = ue("bento-date-range-picker-description"), R = ue("bento-date-range-picker-error"), k = ue("bento-date-range-picker-date-error"), re = c(() => o.label || a("dateRangePicker", { name: f })), { resolvedFirstDayOfWeek: b } =
|
|
811
|
+
const v = m, o = n, p = _a(), { t: a } = qe({ messages: Ce }), { dateToInputDateString: i } = Be(), f = ue("bento-date-range-picker-container"), G = ue("bento-date-range-picker-label"), Y = ue("bento-date-range-picker-description"), R = ue("bento-date-range-picker-error"), k = ue("bento-date-range-picker-date-error"), re = c(() => o.label || a("dateRangePicker", { name: f })), { resolvedFirstDayOfWeek: b } = Ka(Se(o, "firstDayOfWeek")), g = Ba({
|
|
812
812
|
none: 0,
|
|
813
813
|
one: 710,
|
|
814
814
|
// width of date range picker with one panes
|
|
@@ -837,7 +837,7 @@ const ua = {
|
|
|
837
837
|
timeDifference: O
|
|
838
838
|
}
|
|
839
839
|
};
|
|
840
|
-
})), le = c(() => o.label ? G : p?.["aria-labelledby"] ?? null), A = C(!1), ae = C(null), w = C(!1), { isReadOnly: r } =
|
|
840
|
+
})), le = c(() => o.label ? G : p?.["aria-labelledby"] ?? null), A = C(!1), ae = C(null), w = C(!1), { isReadOnly: r } = et(Se(o, "readonly")), { emitValue: E } = tt(v);
|
|
841
841
|
he(
|
|
842
842
|
() => o.disabled,
|
|
843
843
|
() => {
|
|
@@ -931,7 +931,7 @@ const ua = {
|
|
|
931
931
|
z("div", {
|
|
932
932
|
onKeydown: Le(Z, ["enter"])
|
|
933
933
|
}, [
|
|
934
|
-
V(u(
|
|
934
|
+
V(u(Ua), {
|
|
935
935
|
ref_key: "inputContainerRef",
|
|
936
936
|
ref: ae,
|
|
937
937
|
"always-combobox-is-input": "",
|
|
@@ -1025,7 +1025,7 @@ const ua = {
|
|
|
1025
1025
|
_: 1
|
|
1026
1026
|
}, 8, ["id", "open", "target-element", "aria-label"])) : F("", !0)
|
|
1027
1027
|
])), [
|
|
1028
|
-
[u(
|
|
1028
|
+
[u(at), X]
|
|
1029
1029
|
]);
|
|
1030
1030
|
}
|
|
1031
1031
|
}), nn = /* @__PURE__ */ ia(St, [["__scopeId", "data-v-e00826fe"]]);
|
|
@@ -1035,4 +1035,4 @@ export {
|
|
|
1035
1035
|
ct as a,
|
|
1036
1036
|
we as i
|
|
1037
1037
|
};
|
|
1038
|
-
//# sourceMappingURL=date-range-picker.
|
|
1038
|
+
//# sourceMappingURL=date-range-picker.BM5gxJcL.js.map
|