@adyen/bento-vue3 1.87.1 → 1.88.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.
- package/dist/@types/index.d.ts +127 -66
- package/dist/action-bar.js +1 -1
- 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/dropdown.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/radio-input.css +1 -1
- package/dist/assets/sidepanel.css +1 -1
- package/dist/chunks/action-bar.BS2cJzG_.js +355 -0
- package/dist/chunks/action-bar.BS2cJzG_.js.map +1 -0
- package/dist/chunks/{code-snippet.Dl1MEedz.js → code-snippet.CJDFfbit.js} +2 -2
- package/dist/chunks/{code-snippet.Dl1MEedz.js.map → code-snippet.CJDFfbit.js.map} +1 -1
- package/dist/chunks/{data-grid.DKys-Nai.js → data-grid.CWop1cFU.js} +412 -405
- package/dist/chunks/data-grid.CWop1cFU.js.map +1 -0
- package/dist/chunks/{date-picker.D5B_SECc.js → date-picker.BtNEBZfS.js} +11 -11
- package/dist/chunks/{date-picker.D5B_SECc.js.map → date-picker.BtNEBZfS.js.map} +1 -1
- package/dist/chunks/{date-range-picker.CHq6WwCb.js → date-range-picker.DVpgkLuA.js} +21 -21
- package/dist/chunks/{date-range-picker.CHq6WwCb.js.map → date-range-picker.DVpgkLuA.js.map} +1 -1
- package/dist/chunks/{dropdown-tag.CwSzUwa7.js → dropdown-tag.DyKf9OvB.js} +2 -2
- package/dist/chunks/{dropdown-tag.CwSzUwa7.js.map → dropdown-tag.DyKf9OvB.js.map} +1 -1
- package/dist/chunks/{dropdown.Bdw2B-Cw.js → dropdown.BXbfqIpi.js} +179 -178
- package/dist/chunks/dropdown.BXbfqIpi.js.map +1 -0
- package/dist/chunks/{filter-bar.CuN1cxZZ.js → filter-bar.l5_cF2g4.js} +7 -7
- package/dist/chunks/{filter-bar.CuN1cxZZ.js.map → filter-bar.l5_cF2g4.js.map} +1 -1
- package/dist/chunks/{header-with-views.BwhK4MPe.js → header-with-views.RTgwVY-Y.js} +2 -2
- package/dist/chunks/{header-with-views.BwhK4MPe.js.map → header-with-views.RTgwVY-Y.js.map} +1 -1
- package/dist/chunks/{input-field-password.CKhqGBVB.js → input-field-password.DEWVmJBO.js} +3 -3
- package/dist/chunks/{input-field-password.CKhqGBVB.js.map → input-field-password.DEWVmJBO.js.map} +1 -1
- package/dist/chunks/{input-field-phone-number.Cailj_71.js → input-field-phone-number.CnCDyXmY.js} +3 -3
- package/dist/chunks/{input-field-phone-number.Cailj_71.js.map → input-field-phone-number.CnCDyXmY.js.map} +1 -1
- package/dist/chunks/{input-field.DqXVoKpy.js → input-field.BHdMoXK2.js} +2 -2
- package/dist/chunks/{input-field.DqXVoKpy.js.map → input-field.BHdMoXK2.js.map} +1 -1
- package/dist/chunks/{pagination.CqCd5JCe.js → pagination.DWbONyCn.js} +2 -2
- package/dist/chunks/{pagination.CqCd5JCe.js.map → pagination.DWbONyCn.js.map} +1 -1
- package/dist/chunks/{radio-group.v8mDVZ-o.js → radio-group.DEYzF6o7.js} +2 -2
- package/dist/chunks/{radio-group.v8mDVZ-o.js.map → radio-group.DEYzF6o7.js.map} +1 -1
- package/dist/chunks/{radio-input.DektLjN4.js → radio-input.FC4PVCHr.js} +36 -34
- package/dist/chunks/radio-input.FC4PVCHr.js.map +1 -0
- package/dist/chunks/{search-bar.DGpLNVng.js → search-bar.Dzrc_qhy.js} +3 -3
- package/dist/chunks/{search-bar.DGpLNVng.js.map → search-bar.Dzrc_qhy.js.map} +1 -1
- package/dist/chunks/{secondary-nav.l_60nnXA.js → secondary-nav.D2Llqw3y.js} +2 -2
- package/dist/chunks/{secondary-nav.l_60nnXA.js.map → secondary-nav.D2Llqw3y.js.map} +1 -1
- package/dist/chunks/{selection-card-group.BuA6CLom.js → selection-card-group.B3LCxON_.js} +2 -2
- package/dist/chunks/{selection-card-group.BuA6CLom.js.map → selection-card-group.B3LCxON_.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 +18 -18
- 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/pagination.js +1 -1
- package/dist/radio-group.js +2 -2
- package/dist/search-bar.js +2 -2
- package/dist/secondary-nav.js +1 -1
- package/dist/selection-card.js +1 -1
- package/dist/web-types.json +1 -1
- package/package.json +5 -5
- package/dist/chunks/action-bar.Ho_fXeXK.js +0 -209
- package/dist/chunks/action-bar.Ho_fXeXK.js.map +0 -1
- package/dist/chunks/data-grid.DKys-Nai.js.map +0 -1
- package/dist/chunks/dropdown.Bdw2B-Cw.js.map +0 -1
- package/dist/chunks/radio-input.DektLjN4.js.map +0 -1
|
@@ -2,14 +2,14 @@ import { ref as u, computed as d, defineComponent as se, toRef as h, watch as x,
|
|
|
2
2
|
import { g as De, s as L, b as be } from "./calendar.vM3abC8y.js";
|
|
3
3
|
import { h as ye } from "./button-actions.BYBpjNqy.js";
|
|
4
4
|
import { d as ke, B as ge } from "./typography.B3J6_tYk.js";
|
|
5
|
-
import {
|
|
6
|
-
import { d as Ce } from "./debounce.DUTu11PS.js";
|
|
5
|
+
import { d as Ie } from "./debounce.DUTu11PS.js";
|
|
7
6
|
import { g as C } from "./generate-uid.NJ8tVoha.js";
|
|
8
7
|
import { u as W } from "./index.B875RXHM.js";
|
|
9
|
-
import { u as
|
|
10
|
-
import { u as j, a as
|
|
11
|
-
import { u as
|
|
12
|
-
import { B as
|
|
8
|
+
import { u as Ce } from "./form-field.D_2g7vaP.js";
|
|
9
|
+
import { u as j, a as Be } from "./use-date-input-formatter.dtbK-CEy.js";
|
|
10
|
+
import { u as Fe } from "./use-form-layout-loading.CWbjZiwP.js";
|
|
11
|
+
import { B as Ee } from "./directive.rXUeDb8p.js";
|
|
12
|
+
import { D as Oe } from "./dropdown-default-textbox.CskseEho.js";
|
|
13
13
|
import { F as we, E as $ } from "./error-message.oGiefI2-.js";
|
|
14
14
|
import { _ as Ae } from "./_plugin-vue_export-helper.CHgC5LLL.js";
|
|
15
15
|
import "../assets/date-picker.css";
|
|
@@ -93,7 +93,7 @@ const S = {
|
|
|
93
93
|
},
|
|
94
94
|
emits: ["update:model-value", "input"],
|
|
95
95
|
setup(c, { emit: B }) {
|
|
96
|
-
const a = c, w = B, { t: f } = W({ messages: S }), D = C("bento-date-picker-container"), i = C("bento-date-picker-label"), M = C("bento-date-picker-description"), A = C("bento-date-picker-error"), b = C("bento-date-picker-date-error"), o = d(() => a.label || f("datePicker", { name: D })), F = u(null), E = u(null), s = u(!1), l = u(!1), R = u(void 0), p = u(a.modelValue), { isReadOnly: z } =
|
|
96
|
+
const a = c, w = B, { t: f } = W({ messages: S }), D = C("bento-date-picker-container"), i = C("bento-date-picker-label"), M = C("bento-date-picker-description"), A = C("bento-date-picker-error"), b = C("bento-date-picker-date-error"), o = d(() => a.label || f("datePicker", { name: D })), F = u(null), E = u(null), s = u(!1), l = u(!1), R = u(void 0), p = u(a.modelValue), { isReadOnly: z } = Fe(h(a, "readonly")), { emitValue: y } = Ce(w), { resolvedFirstDayOfWeek: J } = Be(h(a, "firstDayOfWeek")), { isFormatValid: V, parseDate: P, onKeyDown: G, autoFormat: H } = j(), Q = d(() => ({
|
|
97
97
|
initialFocus: R.value,
|
|
98
98
|
additionalContainers: [E.value.$el]
|
|
99
99
|
}));
|
|
@@ -136,7 +136,7 @@ const S = {
|
|
|
136
136
|
if (e.length < 10)
|
|
137
137
|
return;
|
|
138
138
|
V(e) && te(P(e)) ? (s.value = !1, y(P(e))) : e && (s.value = !0, y(null));
|
|
139
|
-
}, ne =
|
|
139
|
+
}, ne = Ie(Y, 1e3), ie = (e) => {
|
|
140
140
|
r.value = H(e), l.value ? ne(r.value) : Y(r.value);
|
|
141
141
|
}, q = async (e) => {
|
|
142
142
|
var m;
|
|
@@ -161,7 +161,7 @@ const S = {
|
|
|
161
161
|
required: e.required
|
|
162
162
|
}, null, 8, ["id", "label", "tooltip-text", "optional", "required"])) : I("", !0),
|
|
163
163
|
ce("div", null, [
|
|
164
|
-
K(t(
|
|
164
|
+
K(t(Oe), {
|
|
165
165
|
ref_key: "inputContainerRef",
|
|
166
166
|
ref: E,
|
|
167
167
|
"always-combobox-is-input": "",
|
|
@@ -241,11 +241,11 @@ const S = {
|
|
|
241
241
|
_: 1
|
|
242
242
|
}, 8, ["id", "open", "target-element", "aria-label", "trap-all-options"])) : I("", !0)
|
|
243
243
|
], 32)), [
|
|
244
|
-
[t(
|
|
244
|
+
[t(Ee), O]
|
|
245
245
|
]);
|
|
246
246
|
}
|
|
247
247
|
}), je = /* @__PURE__ */ Ae(Te, [["__scopeId", "data-v-2e9461af"]]);
|
|
248
248
|
export {
|
|
249
249
|
je as B
|
|
250
250
|
};
|
|
251
|
-
//# sourceMappingURL=date-picker.
|
|
251
|
+
//# sourceMappingURL=date-picker.BtNEBZfS.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-picker.D5B_SECc.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 <dropdown-input-default\n ref=\"inputContainerRef\"\n always-combobox-is-input\n :ariaControls=\"datePickerContainerId\"\n :ariaExpanded=\"isDatePickerOpen\"\n :aria-labelledby=\"label ? labelId : null\"\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\"\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\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 { 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 } 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\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 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 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 if (isDatePickerOpen.value) {\n validateDateDebounced(textInputValue.value);\n } else {\n validateDate(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","_a","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","computedTrapAllOptions","watch","disabled","newValue","newModelValue","deprecate","dateDisplayValue","formatTextInputDisplayValue","dateErrorText","descriptionConditionalClasses","ariaDescribedBy","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.BtNEBZfS.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 <dropdown-input-default\n ref=\"inputContainerRef\"\n always-combobox-is-input\n :ariaControls=\"datePickerContainerId\"\n :ariaExpanded=\"isDatePickerOpen\"\n :aria-labelledby=\"label ? labelId : null\"\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\"\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\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 { 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 } 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\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 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 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 if (isDatePickerOpen.value) {\n validateDateDebounced(textInputValue.value);\n } else {\n validateDate(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","_a","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","computedTrapAllOptions","watch","disabled","newValue","newModelValue","deprecate","dateDisplayValue","formatTextInputDisplayValue","dateErrorText","descriptionConditionalClasses","ariaDescribedBy","isDateEnabled","closeDatePicker","openDatePicker","onDateSelected","selectedDate","clearDatePickerValue","onDateKeyDown","event","validateDate","stringDate","validateDateDebounced","debounce","onDateInputChange","onSpaceBarOrEnter","nextTick"],"mappings":"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"}
|
|
@@ -3,17 +3,17 @@ import { j as wa } from "./index.Dppy4qHk.js";
|
|
|
3
3
|
import { B as Ea } from "./divider.BIY84UH7.js";
|
|
4
4
|
import { h as Fa, B as _a } from "./button-actions.BYBpjNqy.js";
|
|
5
5
|
import { B as Ce, d as Ke } from "./typography.B3J6_tYk.js";
|
|
6
|
-
import { D as Aa } from "./dropdown-default-textbox.CskseEho.js";
|
|
7
6
|
import { g as le } from "./generate-uid.NJ8tVoha.js";
|
|
8
7
|
import { u as qe } from "./index.B875RXHM.js";
|
|
9
|
-
import { e as la, f as oe, i as x, h as R, j as
|
|
10
|
-
import { u as Ye, a as
|
|
11
|
-
import { t as H, n as
|
|
12
|
-
import { u as
|
|
13
|
-
import { B as
|
|
14
|
-
import { u as
|
|
15
|
-
import {
|
|
16
|
-
import { B as
|
|
8
|
+
import { e as la, f as oe, i as x, h as R, j as Aa, k as He, l as Ba, s as Pe, m as Ca, n as Ve, b as Q, u as qa, o as q, g as Ya } from "./calendar.vM3abC8y.js";
|
|
9
|
+
import { u as Ye, a as Na } from "./use-date-input-formatter.dtbK-CEy.js";
|
|
10
|
+
import { t as H, n as xa, c as Ua } from "./en-US.YeSsZuOc.js";
|
|
11
|
+
import { u as $a } from "./use-form-layout-loading.CWbjZiwP.js";
|
|
12
|
+
import { B as ja } from "./directive.rXUeDb8p.js";
|
|
13
|
+
import { u as La } from "./form-field.D_2g7vaP.js";
|
|
14
|
+
import { D as Qa } from "./dropdown-default-textbox.CskseEho.js";
|
|
15
|
+
import { B as ge } from "./input-field.BHdMoXK2.js";
|
|
16
|
+
import { B as Wa } from "./dropdown.BXbfqIpi.js";
|
|
17
17
|
import { B as Ga } from "./segmented-control.Aqquod8g.js";
|
|
18
18
|
import { d as Te } from "./debounce.DUTu11PS.js";
|
|
19
19
|
import { u as Ka } from "./use-has-slot.B7eQSabc.js";
|
|
@@ -38,7 +38,7 @@ function Fe(t, o) {
|
|
|
38
38
|
return +H(t) == +H(o);
|
|
39
39
|
}
|
|
40
40
|
function za(t, o, d) {
|
|
41
|
-
const [r, e] =
|
|
41
|
+
const [r, e] = xa(
|
|
42
42
|
d == null ? void 0 : d.in,
|
|
43
43
|
t,
|
|
44
44
|
o
|
|
@@ -54,7 +54,7 @@ function _e(t, o) {
|
|
|
54
54
|
}
|
|
55
55
|
function Ja(t, o) {
|
|
56
56
|
return x(
|
|
57
|
-
|
|
57
|
+
Ua(t, t),
|
|
58
58
|
Ha(t)
|
|
59
59
|
);
|
|
60
60
|
}
|
|
@@ -90,13 +90,13 @@ const tt = ({
|
|
|
90
90
|
u = R(e.earliest);
|
|
91
91
|
else if (u) {
|
|
92
92
|
const y = Je(u, { weekStartsOn: t });
|
|
93
|
-
x(u, y) || (u = R(
|
|
93
|
+
x(u, y) || (u = R(Aa(He(u, { weekStartsOn: t }), 1)));
|
|
94
94
|
}
|
|
95
95
|
if (e.latest)
|
|
96
96
|
f = $(e.latest);
|
|
97
97
|
else if (f) {
|
|
98
98
|
const y = He(f, { weekStartsOn: t });
|
|
99
|
-
x(f, y) || (f = $(
|
|
99
|
+
x(f, y) || (f = $(Ba(Je(f, { weekStartsOn: t }), 1)));
|
|
100
100
|
}
|
|
101
101
|
}
|
|
102
102
|
if ((e == null ? void 0 : e.type) === "monthly") {
|
|
@@ -110,7 +110,7 @@ const tt = ({
|
|
|
110
110
|
f = $(e.latest);
|
|
111
111
|
else if (f) {
|
|
112
112
|
const y = ze(f);
|
|
113
|
-
x(f, y) || (f = ze(
|
|
113
|
+
x(f, y) || (f = ze(Ca(f, 1)));
|
|
114
114
|
}
|
|
115
115
|
}
|
|
116
116
|
if ((e == null ? void 0 : e.type) === "quarterly") {
|
|
@@ -361,7 +361,7 @@ const rt = /[\d]/, st = /^\d{2}$/, lt = /^\d{2}:\d{2}$/, ot = (t) => {
|
|
|
361
361
|
adjustEndDateInputForMonthly: Oe,
|
|
362
362
|
adjustStartDateInputForQuarterly: me,
|
|
363
363
|
adjustEndDateInputForQuarterly: ce
|
|
364
|
-
} =
|
|
364
|
+
} = qa(e.firstDayOfWeek), { savedRanges: w, saveRange: ne, resetSavedRanges: De } = nt(), S = (a) => a ? te(a) : "", Z = B(!1), ee = B(!1), j = B(!1), L = B(!1), i = ke({
|
|
365
365
|
startDate: e.dateFormData.startDate,
|
|
366
366
|
endDate: e.dateFormData.endDate,
|
|
367
367
|
startTime: e.dateFormData.startTime,
|
|
@@ -812,7 +812,7 @@ const rt = /[\d]/, st = /^\d{2}$/, lt = /^\d{2}:\d{2}$/, ot = (t) => {
|
|
|
812
812
|
minute: "numeric",
|
|
813
813
|
second: "numeric",
|
|
814
814
|
hour12: !1
|
|
815
|
-
}),
|
|
815
|
+
}), Ya(f.value, v).formatRange(
|
|
816
816
|
t.value.startDate,
|
|
817
817
|
t.value.endDate
|
|
818
818
|
);
|
|
@@ -854,7 +854,7 @@ const rt = /[\d]/, st = /^\d{2}$/, lt = /^\d{2}:\d{2}$/, ot = (t) => {
|
|
|
854
854
|
},
|
|
855
855
|
emits: ["update:model-value", "input"],
|
|
856
856
|
setup(t, { emit: o }) {
|
|
857
|
-
const d = o, r = t, e = Ma(), { t: u } = qe({ messages: Ne }), { dateToInputDateString: f } = Ye(), y = le("bento-date-range-picker-container"), k = le("bento-date-range-picker-label"), P = le("bento-date-range-picker-description"), M = le("bento-date-range-picker-error"), _ = le("bento-date-range-picker-date-error"), ie = p(() => r.label || u("dateRangePicker", { name: y })), { resolvedFirstDayOfWeek: v } =
|
|
857
|
+
const d = o, r = t, e = Ma(), { t: u } = qe({ messages: Ne }), { dateToInputDateString: f } = Ye(), y = le("bento-date-range-picker-container"), k = le("bento-date-range-picker-label"), P = le("bento-date-range-picker-description"), M = le("bento-date-range-picker-error"), _ = le("bento-date-range-picker-date-error"), ie = p(() => r.label || u("dateRangePicker", { name: y })), { resolvedFirstDayOfWeek: v } = Na(Ee(r, "firstDayOfWeek")), te = wa({
|
|
858
858
|
none: 0,
|
|
859
859
|
one: 710,
|
|
860
860
|
// width of date range picker with one panes
|
|
@@ -883,7 +883,7 @@ const rt = /[\d]/, st = /^\d{2}$/, lt = /^\d{2}:\d{2}$/, ot = (t) => {
|
|
|
883
883
|
timeDifference: I
|
|
884
884
|
}
|
|
885
885
|
};
|
|
886
|
-
})), U = p(() => r.label ? k : (e == null ? void 0 : e["aria-labelledby"]) ?? null), n = B(!1), N = B(null), O = B(!1), { isReadOnly: Ie } =
|
|
886
|
+
})), U = p(() => r.label ? k : (e == null ? void 0 : e["aria-labelledby"]) ?? null), n = B(!1), N = B(null), O = B(!1), { isReadOnly: Ie } = $a(Ee(r, "readonly")), { emitValue: J } = La(d);
|
|
887
887
|
Re(
|
|
888
888
|
() => r.disabled,
|
|
889
889
|
() => {
|
|
@@ -977,7 +977,7 @@ const rt = /[\d]/, st = /^\d{2}$/, lt = /^\d{2}:\d{2}$/, ot = (t) => {
|
|
|
977
977
|
z("div", {
|
|
978
978
|
onKeydown: Ge(L, ["enter"])
|
|
979
979
|
}, [
|
|
980
|
-
K(c(
|
|
980
|
+
K(c(Qa), {
|
|
981
981
|
ref_key: "inputContainerRef",
|
|
982
982
|
ref: N,
|
|
983
983
|
"always-combobox-is-input": "",
|
|
@@ -1071,7 +1071,7 @@ const rt = /[\d]/, st = /^\d{2}$/, lt = /^\d{2}:\d{2}$/, ot = (t) => {
|
|
|
1071
1071
|
_: 1
|
|
1072
1072
|
}, 8, ["id", "open", "target-element", "aria-label"])) : C("", !0)
|
|
1073
1073
|
])), [
|
|
1074
|
-
[c(
|
|
1074
|
+
[c(ja), X]
|
|
1075
1075
|
]);
|
|
1076
1076
|
}
|
|
1077
1077
|
}), Gt = /* @__PURE__ */ oa(Tt, [["__scopeId", "data-v-e00826fe"]]);
|
|
@@ -1081,4 +1081,4 @@ export {
|
|
|
1081
1081
|
Ja as a,
|
|
1082
1082
|
Fe as i
|
|
1083
1083
|
};
|
|
1084
|
-
//# sourceMappingURL=date-range-picker.
|
|
1084
|
+
//# sourceMappingURL=date-range-picker.DVpgkLuA.js.map
|