@adyen/bento-vue3 1.96.1 → 1.97.0

package/dist/code-snippet.js

@@ -1,4 +1,4 @@
-import { c as n, B as o, a as p, b as a } from "./chunks/code-snippet.DHzB-8JJ.js";
+import { c as n, B as o, a as p, b as a } from "./chunks/code-snippet.Cp61a0Ud.js";
 export {
   n as BentoCodeSnippet,
   o as BentoCodeSnippetEvent,

package/dist/country.js

@@ -1,4 +1,4 @@
-import { c as a } from "./chunks/country.15m_ATbO.js";
+import { c as a } from "./chunks/country.a-fpQGLP.js";
 import { B as r, a as n, u } from "./chunks/country.types.6a7xxZIR.js";
 import { u as C, a as y } from "./chunks/use-country-phon-code.BzcawGpE.js";
 export {

package/dist/dashboard-template.js

@@ -1,4 +1,4 @@
-import { d as e, a as t } from "./chunks/dashboard-section.Da6ZFGtm.js";
+import { d as e, a as t } from "./chunks/dashboard-section.BR0xU-b-.js";
 export {
   e as BentoDashboardSection,
   t as BentoDashboardTemplate

package/dist/dashed-underline.js

@@ -1,4 +1,4 @@
-import { B as o } from "./chunks/dashed-underline.DJmMXcdt.js";
+import { B as o } from "./chunks/dashed-underline.CxpIRlCx.js";
 export {
   o as BentoDashedUnderline
 };

package/dist/data-grid-template.js

@@ -1,4 +1,4 @@
-import { d as t } from "./chunks/data-grid-template.-MuGcJp1.js";
+import { d as t } from "./chunks/data-grid-template.LTILymaF.js";
 export {
   t as BentoDataGridTemplate
 };

package/dist/data-grid.js

@@ -1,4 +1,4 @@
-import { B as e, d as o, a as r, b as i, c as n, e as d, f as B, g as l, h as s, i as D } from "./chunks/data-grid.kZgqWqQx.js";
+import { B as e, d as o, a as r, b as i, c as n, e as d, f as B, g as l, h as s, i as D } from "./chunks/data-grid.xcmkjuyg.js";
 export {
   e as BentoColumnOverflow,
   o as BentoDataGrid,

package/dist/date-picker.js

@@ -1,6 +1,6 @@
-import { B as a } from "./chunks/date-picker.DyImOUH4.js";
+import { B as a } from "./chunks/date-picker.CCETX031.js";
 import { B as o } from "./chunks/date-picker.types.Ckt7zxGy.js";
-import { C as n, a as B } from "./chunks/calendar.iQyNwQBL.js";
+import { C as n, a as B } from "./chunks/calendar.6NKd6IMo.js";
 export {
   a as BentoDatePicker,
   o as BentoDatePickerEvent,

package/dist/date-range-picker.js

@@ -1,6 +1,6 @@
-import { B as t } from "./chunks/date-range-picker.BigC6wm2.js";
+import { B as t } from "./chunks/date-range-picker.CtGaxtYh.js";
 import { B as n } from "./chunks/date-range-picker.types.Ckt7zxGy.js";
-import { C as i, a as B } from "./chunks/calendar.iQyNwQBL.js";
+import { C as i, a as B } from "./chunks/calendar.6NKd6IMo.js";
 export {
   t as BentoDateRangePicker,
   n as BentoDateRangePickerEvent,

package/dist/date-time-picker.js

@@ -1,23 +1,32 @@
-import { defineComponent as F, ref as U, computed as a, watch as E, openBlock as O, createElementBlock as $, createVNode as n, unref as d, withCtx as j, mergeProps as f } from "vue";
-import { s as D, a as v } from "./chunks/set-time-in-date.9-8WOiMT.js";
-import { e as w, s as A } from "./chunks/calendar.iQyNwQBL.js";
-import { B as G } from "./chunks/date-picker.DyImOUH4.js";
-import { B as L, i as Y } from "./chunks/input-time.CHIjCO74.js";
-import { u as N } from "./chunks/use-date-input-formatter.x285YiSd.js";
-import { u as z } from "./chunks/use-touch-device.DTqFAbXh.js";
-import { u as H } from "./chunks/index.B875RXHM.js";
-import { B as J } from "./chunks/form-layout-group.08QuvVmC.js";
-import { _ as K } from "./chunks/_plugin-vue_export-helper.CHgC5LLL.js";
+import { defineComponent as j, ref as i, computed as r, watch as N, openBlock as O, createElementBlock as R, createVNode as c, unref as p, withCtx as $, mergeProps as T, nextTick as z } from "vue";
+import { s as _, a as g } from "./chunks/set-time-in-date.9-8WOiMT.js";
+import { e as L, s as X } from "./chunks/calendar.6NKd6IMo.js";
+import { B as w } from "./chunks/date-picker.CCETX031.js";
+import { B as H, i as J } from "./chunks/input-time.CGPUOOQ9.js";
+import { u as K } from "./chunks/use-date-input-formatter.QXaVIBS0.js";
+import { u as Q } from "./chunks/use-touch-device.DTqFAbXh.js";
+import { u as W } from "./chunks/index.B875RXHM.js";
+import { B as Z } from "./chunks/form-layout-group.08QuvVmC.js";
+import { _ as ee } from "./chunks/_plugin-vue_export-helper.CHgC5LLL.js";
 import "./assets/date-time-picker.css";
-const M = {
-  "en-US": { "DD-MM-YYYY": "DD-MM-YYYY", "MM-DD-YYYY": "MM-DD-YYYY", "YYYY-MM-DD": "YYYY-MM-DD" }
-}, Q = { class: "b-date-time-picker" }, R = {
-  i18n: { messages: M },
+const b = {
+  "de-DE": { "DD-MM-YYYY": "TT-MM-JJJJ", "MM-DD-YYYY": "MM-TT-JJJJ", "YYYY-MM-DD": "JJJJ-MM-TT" },
+  "en-GB": { "DD-MM-YYYY": "DD-MM-YYYY", "MM-DD-YYYY": "MM-DD-YYYY", "YYYY-MM-DD": "YYYY-MM-DD" },
+  "en-US": { "DD-MM-YYYY": "DD-MM-YYYY", "MM-DD-YYYY": "MM-DD-YYYY", "YYYY-MM-DD": "YYYY-MM-DD", enterTimeForDate: "Enter a time for the selected date", invalidDateFormat: "Invalid date format" },
+  "es-ES": { "DD-MM-YYYY": "DD-MM-AAAA", "MM-DD-YYYY": "MM-DD-AAAA", "YYYY-MM-DD": "AAAA-MM-DD" },
+  "es-MX": { "DD-MM-YYYY": "DD-MM-AAAA", "MM-DD-YYYY": "MM-DD-AAAA", "YYYY-MM-DD": "AAAA-MM-DD" },
+  "fr-FR": { "DD-MM-YYYY": "JJ-MM-AAAA", "MM-DD-YYYY": "MM-JJ-AAAA", "YYYY-MM-DD": "AAAA-MM-JJ" },
+  "it-IT": { "DD-MM-YYYY": "GG-MM-AAAA", "MM-DD-YYYY": "MM-GG-AAAA", "YYYY-MM-DD": "AAAA-MM-GG" },
+  "ja-JP": { "DD-MM-YYYY": "DD-MM-YYYY", "MM-DD-YYYY": "MM-DD-YYYY", "YYYY-MM-DD": "YYYY-MM-DD" },
+  "pt-BR": { "DD-MM-YYYY": "DD-MM-AAAA", "MM-DD-YYYY": "MM-DD-AAAA", "YYYY-MM-DD": "AAAA-MM-DD" },
+  "zh-CN": { "DD-MM-YYYY": "日-月-年", "MM-DD-YYYY": "月-日-年", "YYYY-MM-DD": "年-月-日" }
+}, te = { class: "b-date-time-picker" }, ae = {
+  i18n: { messages: b },
   name: "bento-date-time-picker",
   inheritAttrs: !1,
   model: { prop: "modelValue", event: "update:model-value" }
-}, W = /* @__PURE__ */ F({
-  ...R,
+}, re = /* @__PURE__ */ j({
+  ...ae,
   props: {
     modelValue: { default: null },
     disabled: { type: Boolean, default: !1 },
@@ -31,93 +40,92 @@ const M = {
     timeProps: { default: () => ({}) }
   },
   emits: ["update:model-value", "input:valid", "input:error"],
-  setup(_, { emit: b }) {
-    const e = _, r = b, s = U(""), { dateFormat: u } = N(), { isTouchDevice: V } = z(), { t: m } = H({ messages: M }), g = a(() => e.modelValue ?? null), T = a(() => s.value), B = a(() => e.dateProps?.isDateDisabled ?? e.isDateDisabled), P = a(() => V.value ? e.dateProps?.description : e.dateProps?.description ? `${e.dateProps.description} ${m(u.value)}` : m(u.value)), y = (t) => !(B.value?.(A(t)) || e.min && t < v(e.min, 0) || e.max && t > v(e.max, 0)), I = a(() => ({
-      disabled: e.disabled,
-      isDateDisabled: e.isDateDisabled,
-      max: e.max,
-      min: e.min,
-      readonly: e.readonly,
-      required: e.required,
-      errorMessage: e.errorMessage,
-      ...e.dateProps,
-      description: P.value
-    })), k = a(() => ({
-      disabled: e.disabled,
-      errorMessage: e.errorMessage,
-      readonly: e.readonly,
-      required: e.required,
-      ...e.timeProps
-    }));
-    E(
-      () => e.modelValue,
-      (t) => {
-        s.value = t ? w(t) : "";
+  setup(B, { emit: P }) {
+    const t = B, D = P, l = i(null), a = i(""), s = i(null), o = i(null), { dateFormat: v } = K(), { isTouchDevice: V } = Q(), { t: n } = W({ messages: b }), h = r(() => l.value), k = r(() => a.value), x = r(() => t.dateProps?.isDateDisabled ?? t.isDateDisabled), y = r(() => V.value ? t.dateProps?.description : t.dateProps?.description ? `${t.dateProps.description} ${n(v.value)}` : n(v.value)), I = (e) => !(x.value?.(X(e)) || t.min && e < g(t.min, 0) || t.max && e > g(t.max, 0)), E = r(() => ({
+      disabled: t.disabled,
+      isDateDisabled: t.isDateDisabled,
+      max: t.max,
+      min: t.min,
+      readonly: t.readonly,
+      required: t.required,
+      errorMessage: G.value,
+      ...t.dateProps,
+      description: y.value
+    })), F = r(() => ({
+      disabled: t.disabled,
+      errorMessage: S.value,
+      readonly: t.readonly,
+      required: t.required,
+      ...t.timeProps
+    })), G = r(() => t.errorMessage ? t.errorMessage : s.value ? n(s.value) : null), S = r(() => t.errorMessage ? t.errorMessage : o.value ? n(o.value) : null), u = () => {
+      s.value = null, o.value = null;
+    }, d = i(!1);
+    N(
+      () => t.modelValue,
+      (e) => {
+        d.value || (e ? (l.value = e, a.value = L(e)) : (l.value = null, a.value = "", u()));
       },
       { immediate: !0 }
     );
-    const p = (t) => !t || y(t), i = (t) => {
-      r(t ? "input:valid" : "input:error");
-    }, c = (t) => {
-      r("update:model-value", t);
-    }, o = (t) => {
-      c(t), i(p(t));
-    }, x = (t) => {
-      c(t), i(!1);
-    }, h = (t) => {
-      if (!t) {
-        o(null);
+    const q = (e) => !e || I(e), A = (e) => {
+      D(e ? "input:valid" : "input:error");
+    }, f = (e) => {
+      d.value = !0, D("update:model-value", e), z(() => {
+        d.value = !1;
+      });
+    }, M = (e) => {
+      f(e), A(q(e));
+    }, Y = (e) => {
+      f(e), A(!1);
+    }, C = (e) => {
+      if (l.value = e, !e) {
+        a.value ? (s.value = "invalidDateFormat", Y(null)) : (u(), M(null));
         return;
       }
-      const l = s.value;
-      if (l && !Y(l)) {
-        x(null);
+      u(), a.value || (a.value = "00:00:00");
+      const m = a.value;
+      if (!J(m)) {
+        Y(null);
         return;
       }
-      o(D(t, l || "00:00:00"));
-    }, q = (t) => {
-      if (s.value = t, !t) {
-        o(null);
+      M(_(e, m));
+    }, U = (e) => {
+      if (a.value = e, !e) {
+        l.value ? (o.value = "enterTimeForDate", Y(null)) : (u(), M(null));
         return;
       }
-      if (!Y(t)) {
-        r("input:error");
+      if (o.value = null, !J(e)) {
+        Y(null);
         return;
       }
-      if (!e.modelValue) {
-        o(null);
+      if (!l.value) {
+        s.value = "invalidDateFormat", Y(null);
         return;
       }
-      o(D(e.modelValue, t));
-    }, C = () => {
-      i(p(e.modelValue));
-    }, S = () => {
-      r("input:error");
+      M(_(l.value, e));
     };
-    return (t, l) => (O(), $("div", Q, [
-      n(d(J), {
+    return (e, m) => (O(), R("div", te, [
+      c(p(Z), {
         class: "b-date-time-picker__inputs",
         layout: "50-50",
-        "error-message": e.errorMessage
+        "error-message": t.errorMessage
       }, {
-        default: j(() => [
-          n(d(G), f({ class: "b-date-time-picker__date-input" }, I.value, {
-            "model-value": g.value,
-            "onUpdate:modelValue": h
+        default: $(() => [
+          c(p(w), T({ class: "b-date-time-picker__date-input" }, E.value, {
+            "model-value": h.value,
+            "onUpdate:modelValue": C
           }), null, 16, ["model-value"]),
-          n(d(L), f({ class: "b-date-time-picker__time-input" }, k.value, {
-            "model-value": T.value,
-            "onUpdate:modelValue": q,
-            "onInput:valid": C,
-            "onInput:error": S
+          c(p(H), T({ class: "b-date-time-picker__time-input" }, F.value, {
+            "model-value": k.value,
+            "onUpdate:modelValue": U
           }), null, 16, ["model-value"])
         ]),
         _: 1
       }, 8, ["error-message"])
     ]));
   }
-}), ne = /* @__PURE__ */ K(W, [["__scopeId", "data-v-7be60b67"]]);
+}), me = /* @__PURE__ */ ee(re, [["__scopeId", "data-v-c844fd45"]]);
 export {
-  ne as BentoDateTimePicker
+  me as BentoDateTimePicker
 };
 //# sourceMappingURL=date-time-picker.js.map

package/dist/date-time-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-time-picker.js","sources":["../../vue2/src/components/date-time-picker/date-time-picker.vue"],"sourcesContent":["<template>\n    <div class=\"b-date-time-picker\">\n        <bento-form-layout-group class=\"b-date-time-picker__inputs\" layout=\"50-50\" :error-message=\"props.errorMessage\">\n            <bento-date-picker\n                class=\"b-date-time-picker__date-input\"\n                v-bind=\"resolvedDateProps\"\n                :model-value=\"dateValue\"\n                @update:model-value=\"onDateChanged\"\n            />\n            <bento-input-time\n                class=\"b-date-time-picker__time-input\"\n                v-bind=\"resolvedTimeProps\"\n                :model-value=\"timeValue\"\n                @update:model-value=\"onTimeChanged\"\n                @input:valid=\"onTimeValid\"\n                @input:error=\"onTimeError\"\n            />\n        </bento-form-layout-group>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, watch } from 'vue';\n    import { setMilliseconds } from 'date-fns/setMilliseconds';\n    import { startOfDay } from 'date-fns/startOfDay';\n\n    // Components\n    import { BentoDatePicker } from '@/components/date-picker';\n    import { BentoFormLayoutGroup } from '@/components/form-layout';\n    import { BentoInputTime } from '@/components/input-time';\n\n    // Utils\n    import { useDateInputFormatter, useTouchDevice } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { dateToTimeInputString, setTimeInDateObject } from '@/utils/ts/format-date';\n    import { isValidTimeString } from '@/utils/ts/time-input';\n\n    // Types\n    import type {\n        BentoDateTimePickerEmits,\n        BentoDateTimePickerProps,\n        BentoDateTimePickerValue,\n    } from './date-time-picker.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = withDefaults(defineProps<BentoDateTimePickerProps>(), {\n        dateProps: () => ({}),\n        disabled: false,\n        errorMessage: null,\n        isDateDisabled: undefined,\n        max: null,\n        min: null,\n        modelValue: null,\n        readonly: false,\n        required: false,\n        timeProps: () => ({}),\n    });\n\n    const emit = defineEmits<BentoDateTimePickerEmits>();\n    const currentTimeText = ref('');\n    const { dateFormat } = useDateInputFormatter();\n    const { isTouchDevice } = useTouchDevice();\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const dateValue = computed(() => props.modelValue ?? null);\n    const timeValue = computed(() => currentTimeText.value);\n    const resolvedIsDateDisabled = computed(() => props.dateProps?.isDateDisabled ?? props.isDateDisabled);\n    const dateDescription = computed(() => {\n        if (isTouchDevice.value) {\n            return props.dateProps?.description;\n        } else {\n            return props.dateProps?.description\n                ? `${props.dateProps.description} ${t(dateFormat.value)}`\n                : t(dateFormat.value);\n        }\n    });\n\n    const isMergedDateInBounds = (date: Date) => {\n        if (resolvedIsDateDisabled.value?.(startOfDay(date))) {\n            return false;\n        }\n\n        if (props.min && date < setMilliseconds(props.min, 0)) {\n            return false;\n        }\n\n        if (props.max && date > setMilliseconds(props.max, 0)) {\n            return false;\n        }\n\n        return true;\n    };\n\n    const resolvedDateProps = computed(() => ({\n        disabled: props.disabled,\n        isDateDisabled: props.isDateDisabled,\n        max: props.max,\n        min: props.min,\n        readonly: props.readonly,\n        required: props.required,\n        errorMessage: props.errorMessage,\n        ...props.dateProps,\n        description: dateDescription.value,\n    }));\n\n    const resolvedTimeProps = computed(() => ({\n        disabled: props.disabled,\n        errorMessage: props.errorMessage,\n        readonly: props.readonly,\n        required: props.required,\n        ...props.timeProps,\n    }));\n\n    watch(\n        () => props.modelValue,\n        newValue => {\n            currentTimeText.value = newValue ? dateToTimeInputString(newValue) : '';\n        },\n        { immediate: true }\n    );\n\n    const validateBounds = (value: BentoDateTimePickerValue) => !value || isMergedDateInBounds(value);\n\n    const emitValidationState = (isValid: boolean) => {\n        if (isValid) {\n            emit('input:valid');\n        } else {\n            emit('input:error');\n        }\n    };\n\n    const emitModelValue = (value: BentoDateTimePickerValue) => {\n        emit('update:model-value', value);\n    };\n\n    const emitValidatedValue = (value: BentoDateTimePickerValue) => {\n        emitModelValue(value);\n        emitValidationState(validateBounds(value));\n    };\n\n    const emitInvalidModelValue = (value: BentoDateTimePickerValue) => {\n        emitModelValue(value);\n        emitValidationState(false);\n    };\n\n    const onDateChanged = (date: Date | null) => {\n        if (!date) {\n            emitValidatedValue(null);\n            return;\n        }\n\n        const time = currentTimeText.value;\n\n        if (time && !isValidTimeString(time)) {\n            emitInvalidModelValue(null);\n            return;\n        }\n\n        emitValidatedValue(setTimeInDateObject(date, time || '00:00:00'));\n    };\n\n    const onTimeChanged = (time: string) => {\n        currentTimeText.value = time;\n\n        if (!time) {\n            emitValidatedValue(null);\n            return;\n        }\n\n        if (!isValidTimeString(time)) {\n            emit('input:error');\n            return;\n        }\n\n        if (!props.modelValue) {\n            emitValidatedValue(null);\n            return;\n        }\n\n        emitValidatedValue(setTimeInDateObject(props.modelValue, time));\n    };\n\n    const onTimeValid = () => {\n        emitValidationState(validateBounds(props.modelValue));\n    };\n\n    const onTimeError = () => {\n        emit('input:error');\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Date time picker that combines a date picker (single date) with a time input.\n     *\n     * @example\n     * import { BentoDateTimePicker } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDateTimePicker },\n     *     template: `\n     *         <bento-date-time-picker\n     *             :date-props=\"{ label: 'Date' }\"\n     *             :time-props=\"{ label: 'Time' }\"\n     *             required\n     *             :model-value=\"dateTimeValue\"\n     *             @update:model-value=\"newValue => dateTimeValue = newValue\"\n     *         />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-date-time-picker',\n        inheritAttrs: false,\n        model: { prop: 'modelValue', event: 'update:model-value' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./date-time-picker.scss\" />\n"],"names":["__default__","messages","props","__props","emit","__emit","currentTimeText","ref","dateFormat","useDateInputFormatter","isTouchDevice","useTouchDevice","t","useI18n","dateValue","computed","timeValue","resolvedIsDateDisabled","dateDescription","isMergedDateInBounds","date","startOfDay","setMilliseconds","resolvedDateProps","resolvedTimeProps","watch","newValue","dateToTimeInputString","validateBounds","value","emitValidationState","isValid","emitModelValue","emitValidatedValue","emitInvalidModelValue","onDateChanged","time","isValidTimeString","setTimeInDateObject","onTimeChanged","onTimeValid","onTimeError"],"mappings":"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"}
+{"version":3,"file":"date-time-picker.js","sources":["../../vue2/src/components/date-time-picker/date-time-picker.vue"],"sourcesContent":["<template>\n    <div class=\"b-date-time-picker\">\n        <bento-form-layout-group class=\"b-date-time-picker__inputs\" layout=\"50-50\" :error-message=\"props.errorMessage\">\n            <bento-date-picker\n                class=\"b-date-time-picker__date-input\"\n                v-bind=\"resolvedDateProps\"\n                :model-value=\"dateValue\"\n                @update:model-value=\"onDateChanged\"\n            />\n            <bento-input-time\n                class=\"b-date-time-picker__time-input\"\n                v-bind=\"resolvedTimeProps\"\n                :model-value=\"timeValue\"\n                @update:model-value=\"onTimeChanged\"\n            />\n        </bento-form-layout-group>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, ref, watch } from 'vue';\n    import { setMilliseconds } from 'date-fns/setMilliseconds';\n    import { startOfDay } from 'date-fns/startOfDay';\n\n    // Components\n    import { BentoDatePicker } from '@/components/date-picker';\n    import { BentoFormLayoutGroup } from '@/components/form-layout';\n    import { BentoInputTime } from '@/components/input-time';\n\n    // Utils\n    import { useDateInputFormatter, useTouchDevice } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { dateToTimeInputString, setTimeInDateObject } from '@/utils/ts/format-date';\n    import { isValidTimeString } from '@/utils/ts/time-input';\n\n    // Types\n    import type {\n        BentoDateTimePickerEmits,\n        BentoDateTimePickerProps,\n        BentoDateTimePickerValue,\n    } from './date-time-picker.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = withDefaults(defineProps<BentoDateTimePickerProps>(), {\n        dateProps: () => ({}),\n        disabled: false,\n        errorMessage: null,\n        isDateDisabled: undefined,\n        max: null,\n        min: null,\n        modelValue: null,\n        readonly: false,\n        required: false,\n        timeProps: () => ({}),\n    });\n\n    const emit = defineEmits<BentoDateTimePickerEmits>();\n    const currentDate = ref<Date | null>(null);\n    const currentTimeText = ref('');\n    const dateError = ref<keyof MessageSchema | null>(null);\n    const timeError = ref<keyof MessageSchema | null>(null);\n    const { dateFormat } = useDateInputFormatter();\n    const { isTouchDevice } = useTouchDevice();\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const dateValue = computed(() => currentDate.value);\n    const timeValue = computed(() => currentTimeText.value);\n    const resolvedIsDateDisabled = computed(() => props.dateProps?.isDateDisabled ?? props.isDateDisabled);\n    const dateDescription = computed(() => {\n        if (isTouchDevice.value) {\n            return props.dateProps?.description;\n        } else {\n            return props.dateProps?.description\n                ? `${props.dateProps.description} ${t(dateFormat.value)}`\n                : t(dateFormat.value);\n        }\n    });\n\n    const isMergedDateInBounds = (date: Date) => {\n        if (resolvedIsDateDisabled.value?.(startOfDay(date))) {\n            return false;\n        }\n\n        if (props.min && date < setMilliseconds(props.min, 0)) {\n            return false;\n        }\n\n        if (props.max && date > setMilliseconds(props.max, 0)) {\n            return false;\n        }\n\n        return true;\n    };\n\n    const resolvedDateProps = computed(() => ({\n        disabled: props.disabled,\n        isDateDisabled: props.isDateDisabled,\n        max: props.max,\n        min: props.min,\n        readonly: props.readonly,\n        required: props.required,\n        errorMessage: dateErrorMessage.value,\n        ...props.dateProps,\n        description: dateDescription.value,\n    }));\n\n    const resolvedTimeProps = computed(() => ({\n        disabled: props.disabled,\n        errorMessage: timeErrorMessage.value,\n        readonly: props.readonly,\n        required: props.required,\n        ...props.timeProps,\n    }));\n\n    const dateErrorMessage = computed(() => {\n        if (props.errorMessage) {\n            return props.errorMessage;\n        }\n        return dateError.value ? t(dateError.value) : null;\n    });\n\n    const timeErrorMessage = computed(() => {\n        if (props.errorMessage) {\n            return props.errorMessage;\n        }\n        return timeError.value ? t(timeError.value) : null;\n    });\n\n    const clearErrors = () => {\n        dateError.value = null;\n        timeError.value = null;\n    };\n\n    /**\n     * Guards the modelValue watcher from clearing user input when the null was emitted\n     * by our own validation logic (e.g. partial/invalid input). Without this flag,\n     * the parent's v-model round-trip would trigger the watcher and wipe the fields.\n     * Reset on nextTick so that genuine external resets (e.g. a form clear button)\n     * still clear the UI.\n     */\n    const isSelfEmittedUpdate = ref(false);\n\n    watch(\n        () => props.modelValue,\n        newValue => {\n            if (isSelfEmittedUpdate.value) {\n                return;\n            }\n\n            if (newValue) {\n                // Sync internal state when a valid Date is set (e.g. programmatic update from parent)\n                currentDate.value = newValue;\n                currentTimeText.value = dateToTimeInputString(newValue);\n            } else {\n                // External reset (e.g. parent sets modelValue to null via a form clear button):\n                // clear all internal state so the UI resets fully.\n                currentDate.value = null;\n                currentTimeText.value = '';\n                clearErrors();\n            }\n        },\n        { immediate: true }\n    );\n\n    const validateBounds = (value: BentoDateTimePickerValue) => !value || isMergedDateInBounds(value);\n\n    const emitValidationState = (isValid: boolean) => {\n        if (isValid) {\n            emit('input:valid');\n        } else {\n            emit('input:error');\n        }\n    };\n\n    const emitModelValue = (value: BentoDateTimePickerValue) => {\n        isSelfEmittedUpdate.value = true;\n        emit('update:model-value', value);\n        nextTick(() => {\n            isSelfEmittedUpdate.value = false;\n        });\n    };\n\n    const emitValidatedValue = (value: BentoDateTimePickerValue) => {\n        emitModelValue(value);\n        emitValidationState(validateBounds(value));\n    };\n\n    const emitInvalidModelValue = (value: BentoDateTimePickerValue) => {\n        emitModelValue(value);\n        emitValidationState(false);\n    };\n\n    const onDateChanged = (date: Date | null) => {\n        currentDate.value = date;\n\n        // Date invalid/cleared: error if time is populated, valid if both empty\n        if (!date) {\n            if (currentTimeText.value) {\n                dateError.value = 'invalidDateFormat';\n                emitInvalidModelValue(null);\n            } else {\n                clearErrors();\n                emitValidatedValue(null);\n            }\n            return;\n        }\n\n        clearErrors();\n\n        // Prefill time with midnight when empty so the user sees a value\n        if (!currentTimeText.value) {\n            currentTimeText.value = '00:00:00';\n        }\n\n        const time = currentTimeText.value;\n\n        // Date valid but time invalid: preserve date, signal error\n        if (!isValidTimeString(time)) {\n            emitInvalidModelValue(null);\n            return;\n        }\n\n        // Both valid: merge and emit\n        emitValidatedValue(setTimeInDateObject(date, time));\n    };\n\n    const onTimeChanged = (time: string) => {\n        currentTimeText.value = time;\n\n        // Time cleared: error if date is set (time is required once prefilled), valid-null if both empty\n        if (!time) {\n            if (currentDate.value) {\n                timeError.value = 'enterTimeForDate';\n                emitInvalidModelValue(null);\n            } else {\n                clearErrors();\n                emitValidatedValue(null);\n            }\n            return;\n        }\n\n        timeError.value = null;\n\n        // Time invalid: preserve date, signal error\n        if (!isValidTimeString(time)) {\n            emitInvalidModelValue(null);\n            return;\n        }\n\n        // Time valid but no date: signal error\n        if (!currentDate.value) {\n            dateError.value = 'invalidDateFormat';\n            emitInvalidModelValue(null);\n            return;\n        }\n\n        // Both valid: merge and emit\n        emitValidatedValue(setTimeInDateObject(currentDate.value, time));\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Date time picker that combines a date picker (single date) with a time input.\n     *\n     * @example\n     * import { BentoDateTimePicker } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDateTimePicker },\n     *     template: `\n     *         <bento-date-time-picker\n     *             :date-props=\"{ label: 'Date' }\"\n     *             :time-props=\"{ label: 'Time' }\"\n     *             required\n     *             :model-value=\"dateTimeValue\"\n     *             @update:model-value=\"newValue => dateTimeValue = newValue\"\n     *         />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-date-time-picker',\n        inheritAttrs: false,\n        model: { prop: 'modelValue', event: 'update:model-value' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./date-time-picker.scss\" />\n"],"names":["__default__","messages","props","__props","emit","__emit","currentDate","ref","currentTimeText","dateError","timeError","dateFormat","useDateInputFormatter","isTouchDevice","useTouchDevice","t","useI18n","dateValue","computed","timeValue","resolvedIsDateDisabled","dateDescription","isMergedDateInBounds","date","startOfDay","setMilliseconds","resolvedDateProps","dateErrorMessage","resolvedTimeProps","timeErrorMessage","clearErrors","isSelfEmittedUpdate","watch","newValue","dateToTimeInputString","validateBounds","value","emitValidationState","isValid","emitModelValue","nextTick","emitValidatedValue","emitInvalidModelValue","onDateChanged","time","isValidTimeString","setTimeInDateObject","onTimeChanged"],"mappings":"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"}

package/dist/draggable.js

@@ -1,4 +1,4 @@
-import { d as g, a as o } from "./chunks/draggable-handle.C1dudqKz.js";
+import { d as g, a as o } from "./chunks/draggable-handle.CUecl-HB.js";
 export {
   g as BentoDraggable,
   o as BentoDraggableHandle

package/dist/dropdown.js

@@ -1,15 +1,14 @@
-import { B as r, a } from "./chunks/dropdown.C5um1anU.js";
-import { _ as t, a as p, b as d, d as B, c as s } from "./chunks/dropdown-tag.C1ei1SyR.js";
-import { B as D, a as y } from "./chunks/use-cached-selected-values.DOw5IKdU.js";
+import { B as a, a as e, b as r, c as t } from "./chunks/dropdown.C97ShfXZ.js";
+import { _ as p, a as B, b as s, d as w, c as D } from "./chunks/dropdown-tag.BgZYYc_D.js";
 export {
-  r as BentoDropdown,
-  t as BentoDropdownAvatar,
-  p as BentoDropdownCountry,
-  d as BentoDropdownCurrency,
-  D as BentoDropdownEvent,
-  y as BentoDropdownLazyLoadType,
-  B as BentoDropdownPaymentMethod,
-  a as BentoDropdownSize,
-  s as BentoDropdownTag
+  a as BentoDropdown,
+  p as BentoDropdownAvatar,
+  B as BentoDropdownCountry,
+  s as BentoDropdownCurrency,
+  e as BentoDropdownEvent,
+  r as BentoDropdownLazyLoadType,
+  w as BentoDropdownPaymentMethod,
+  t as BentoDropdownSize,
+  D as BentoDropdownTag
 };
 //# sourceMappingURL=dropdown.js.map

package/dist/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"dropdown.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/file-uploader.js

@@ -1,4 +1,4 @@
-import { f as r } from "./chunks/file-uploader.C9YOBRQg.js";
+import { f as r } from "./chunks/file-uploader.CXgAfp0m.js";
 export {
   r as BentoFileUploader
 };

package/dist/filter-bar.js

@@ -1,4 +1,4 @@
-import { B as a, a as r, b as B, c as n, d as o } from "./chunks/filter-bar.CzFtzztU.js";
+import { B as a, a as r, b as B, c as n, d as o } from "./chunks/filter-bar.D8BVPHLT.js";
 export {
   a as BentoBaseFilter,
   r as BentoFilterBar,

package/dist/form-layout.js

@@ -1,4 +1,4 @@
-import { f as a, a as r, b as e } from "./chunks/form-layout-title.Kwve4xv2.js";
+import { f as a, a as r, b as e } from "./chunks/form-layout-title.CWw0poO8.js";
 import { B as u } from "./chunks/form-layout-group.08QuvVmC.js";
 export {
   a as BentoFormLayout,

package/dist/header-with-views.js

@@ -1,4 +1,4 @@
-import { h as r } from "./chunks/header-with-views.ubPTyW9A.js";
+import { h as r } from "./chunks/header-with-views.qCyKEZW1.js";
 export {
   r as BentoHeaderWithViews
 };

package/dist/header.js

@@ -1,4 +1,4 @@
-import { B as r } from "./chunks/header.Ds0sFKBB.js";
+import { B as r } from "./chunks/header.aJLkRe1D.js";
 export {
   r as BentoHeader
 };