npm - @adyen/bento-vue2 - Versions diffs - 1.98.0 → 1.99.0 - Mend

@adyen/bento-vue2 1.98.0 → 1.99.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (77) hide show

package/dist/chunks/date-time-picker.Bpxfkj71.js ADDED Viewed

@@ -0,0 +1,195 @@
+import { defineComponent as k, ref as M, computed as i, watch as x, nextTick as E } from "vue";
+import { s as J, a as P } from "./set-time-in-date.CU7HeZLY.js";
+import { e as G, s as S } from "./calendar.CmhzIZZM.js";
+import { B as q } from "./date-picker.bbVKo7JX.js";
+import { B as z, i as B } from "./input-time.DrJ3n7Cc.js";
+import "./index.Cl4_42j5.js";
+import { u as U } from "./use-date-input-formatter.DhduXYC3.js";
+import { u as R } from "./use-touch-device.DTqFAbXh.js";
+import { u as j } from "./index.B6WW_F-J.js";
+import { B as L } from "./form-layout-group.zE6TNlzD.js";
+import { n as O } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/date-time-picker.css";
+const $ = {
+  "de-DE": {
+    "DD-MM-YYYY": "TT-MM-JJJJ",
+    "MM-DD-YYYY": "MM-TT-JJJJ",
+    "YYYY-MM-DD": "JJJJ-MM-TT",
+    enterTimeForDate: "Geben Sie eine Uhrzeit für das ausgewählte Datum ein",
+    invalidDateFormat: "Ungültiges Datumsformat"
+  },
+  "en-GB": {
+    "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"
+  },
+  "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",
+    enterTimeForDate: "Introduce una hora para la fecha seleccionada",
+    invalidDateFormat: "Formato de fecha no válido"
+  },
+  "es-MX": {
+    "DD-MM-YYYY": "DD-MM-AAAA",
+    "MM-DD-YYYY": "MM-DD-AAAA",
+    "YYYY-MM-DD": "AAAA-MM-DD",
+    enterTimeForDate: "Ingresa una hora para la fecha seleccionada",
+    invalidDateFormat: "Formato de fecha no válido"
+  },
+  "fr-FR": {
+    "DD-MM-YYYY": "JJ-MM-AAAA",
+    "MM-DD-YYYY": "MM-JJ-AAAA",
+    "YYYY-MM-DD": "AAAA-MM-JJ",
+    enterTimeForDate: "Saisissez une heure pour la date sélectionnée",
+    invalidDateFormat: "Format de date non valide"
+  },
+  "it-IT": {
+    "DD-MM-YYYY": "GG-MM-AAAA",
+    "MM-DD-YYYY": "MM-GG-AAAA",
+    "YYYY-MM-DD": "AAAA-MM-GG",
+    enterTimeForDate: "Inserisci un orario per la data selezionata",
+    invalidDateFormat: "Formato data non valido"
+  },
+  "ja-JP": {
+    "DD-MM-YYYY": "DD-MM-YYYY",
+    "MM-DD-YYYY": "MM-DD-YYYY",
+    "YYYY-MM-DD": "YYYY-MM-DD",
+    enterTimeForDate: "選択した日付の時刻を入力してください",
+    invalidDateFormat: "無効な日付形式"
+  },
+  "pt-BR": {
+    "DD-MM-YYYY": "DD-MM-AAAA",
+    "MM-DD-YYYY": "MM-DD-AAAA",
+    "YYYY-MM-DD": "AAAA-MM-DD",
+    enterTimeForDate: "Informe um horário para a data selecionada",
+    invalidDateFormat: "Formato de data inválido"
+  },
+  "zh-CN": {
+    "DD-MM-YYYY": "日-月-年",
+    "MM-DD-YYYY": "月-日-年",
+    "YYYY-MM-DD": "年-月-日",
+    enterTimeForDate: "请输入所选日期的具体时间",
+    invalidDateFormat: "日期格式无效"
+  }
+}, N = {
+  i18n: { messages: $ },
+  name: "bento-date-time-picker",
+  inheritAttrs: !1,
+  model: { prop: "modelValue", event: "update:model-value" }
+}, X = /* @__PURE__ */ k({
+  ...N,
+  props: {
+    modelValue: { default: null },
+    disabled: { type: Boolean, default: !1 },
+    errorMessage: { default: null },
+    isDateDisabled: { default: void 0 },
+    max: { default: null },
+    min: { default: null },
+    readonly: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    dateProps: { default: () => ({}) },
+    timeProps: { default: () => ({}) }
+  },
+  emits: ["update:model-value", "input:valid", "input:error"],
+  setup(A, { emit: r }) {
+    const a = A, t = M(null), o = M(""), l = M(null), s = M(null), { dateFormat: p } = U(), { isTouchDevice: T } = R(), { t: Y } = j(), I = i(() => t.value), y = i(() => o.value), m = i(() => {
+      var e;
+      return ((e = a.dateProps) == null ? void 0 : e.isDateDisabled) ?? a.isDateDisabled;
+    }), F = i(() => {
+      var e, n;
+      return T.value ? (e = a.dateProps) == null ? void 0 : e.description : (n = a.dateProps) != null && n.description ? `${a.dateProps.description} ${Y(p.value)}` : Y(p.value);
+    }), _ = (e) => {
+      var n;
+      return !((n = m.value) != null && n.call(m, S(e)) || a.min && e < J(a.min, 0) || a.max && e > J(a.max, 0));
+    }, C = i(() => ({
+      disabled: a.disabled,
+      isDateDisabled: a.isDateDisabled,
+      max: a.max,
+      min: a.min,
+      readonly: a.readonly,
+      required: a.required,
+      errorMessage: g.value,
+      ...a.dateProps,
+      description: F.value
+    })), V = i(() => ({
+      disabled: a.disabled,
+      errorMessage: h.value,
+      readonly: a.readonly,
+      required: a.required,
+      ...a.timeProps
+    })), g = i(() => a.errorMessage ? a.errorMessage : l.value ? Y(l.value) : null), h = i(() => a.errorMessage ? a.errorMessage : s.value ? Y(s.value) : null), d = () => {
+      l.value = null, s.value = null;
+    }, c = M(!1);
+    x(
+      () => a.modelValue,
+      (e) => {
+        c.value || (e ? (t.value = e, o.value = G(e)) : (t.value = null, o.value = "", d()));
+      },
+      { immediate: !0 }
+    );
+    const b = (e) => !e || _(e), v = (e) => {
+      r(e ? "input:valid" : "input:error");
+    }, f = (e) => {
+      c.value = !0, r("update:model-value", e), E(() => {
+        c.value = !1;
+      });
+    }, D = (e) => {
+      f(e), v(b(e));
+    }, u = (e) => {
+      f(e), v(!1);
+    };
+    return { __sfc: !0, props: a, emit: r, currentDate: t, currentTimeText: o, dateError: l, timeError: s, dateFormat: p, isTouchDevice: T, t: Y, dateValue: I, timeValue: y, resolvedIsDateDisabled: m, dateDescription: F, isMergedDateInBounds: _, resolvedDateProps: C, resolvedTimeProps: V, dateErrorMessage: g, timeErrorMessage: h, clearErrors: d, isSelfEmittedUpdate: c, validateBounds: b, emitValidationState: v, emitModelValue: f, emitValidatedValue: D, emitInvalidModelValue: u, onDateChanged: (e) => {
+      if (t.value = e, !e) {
+        o.value ? (l.value = "invalidDateFormat", u(null)) : (d(), D(null));
+        return;
+      }
+      d(), o.value || (o.value = "00:00:00");
+      const n = o.value;
+      if (!B(n)) {
+        u(null);
+        return;
+      }
+      D(P(e, n));
+    }, onTimeChanged: (e) => {
+      if (o.value = e, !e) {
+        t.value ? (s.value = "enterTimeForDate", u(null)) : (d(), D(null));
+        return;
+      }
+      if (s.value = null, !B(e)) {
+        u(null);
+        return;
+      }
+      if (!t.value) {
+        l.value = "invalidDateFormat", u(null);
+        return;
+      }
+      D(P(t.value, e));
+    }, BentoDatePicker: q, BentoFormLayoutGroup: L, BentoInputTime: z };
+  }
+});
+var w = function() {
+  var r = this, a = r._self._c, t = r._self._setupProxy;
+  return a("div", { staticClass: "b-date-time-picker" }, [a(t.BentoFormLayoutGroup, { staticClass: "b-date-time-picker__inputs", attrs: { layout: "50-50", "error-message": t.props.errorMessage } }, [a(t.BentoDatePicker, r._b({ staticClass: "b-date-time-picker__date-input", attrs: { "model-value": t.dateValue }, on: { "update:model-value": t.onDateChanged } }, "bento-date-picker", t.resolvedDateProps, !1)), a(t.BentoInputTime, r._b({ staticClass: "b-date-time-picker__time-input", attrs: { "model-value": t.timeValue }, on: { "update:model-value": t.onTimeChanged } }, "bento-input-time", t.resolvedTimeProps, !1))], 1)], 1);
+}, H = [], K = /* @__PURE__ */ O(
+  X,
+  w,
+  H,
+  !1,
+  null,
+  "10a6a9f8"
+);
+const Ye = K.exports;
+export {
+  Ye as d
+};
+//# sourceMappingURL=date-time-picker.Bpxfkj71.js.map

package/dist/chunks/{date-time-picker.CP-IrUwY.js.map → date-time-picker.Bpxfkj71.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-time-picker.CP-IrUwY.js","sources":["../../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 = defineProps({\n modelValue: { default: null },\n disabled: { type: Boolean, default: false },\n errorMessage: { default: null },\n isDateDisabled: { default: undefined },\n max: { default: null },\n min: { default: null },\n readonly: { type: Boolean, default: false },\n required: { type: Boolean, default: false },\n dateProps: { default: () => ({}) },\n timeProps: { default: () => ({}) }\n});\n\n const emit = defineEmits([\"update:model-value\", \"input:valid\", \"input:error\"]);\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","currentDate","ref","currentTimeText","dateError","timeError","dateFormat","useDateInputFormatter","isTouchDevice","useTouchDevice","t","useI18n","dateValue","computed","timeValue","resolvedIsDateDisabled","_a","props","dateDescription","_b","isMergedDateInBounds","date","startOfDay","setMilliseconds","resolvedDateProps","dateErrorMessage","resolvedTimeProps","timeErrorMessage","clearErrors","isSelfEmittedUpdate","watch","newValue","dateToTimeInputString","validateBounds","value","emitValidationState","isValid","emit","emitModelValue","nextTick","emitValidatedValue","emitInvalidModelValue","time","isValidTimeString","setTimeInDateObject"],"mappings":"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"}
1	+ {"version":3,"file":"date-time-picker.Bpxfkj71.js","sources":["../../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 = defineProps({\n modelValue: { default: null },\n disabled: { type: Boolean, default: false },\n errorMessage: { default: null },\n isDateDisabled: { default: undefined },\n max: { default: null },\n min: { default: null },\n readonly: { type: Boolean, default: false },\n required: { type: Boolean, default: false },\n dateProps: { default: () => ({}) },\n timeProps: { default: () => ({}) }\n});\n\n const emit = defineEmits([\"update:model-value\", \"input:valid\", \"input:error\"]);\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","currentDate","ref","currentTimeText","dateError","timeError","dateFormat","useDateInputFormatter","isTouchDevice","useTouchDevice","t","useI18n","dateValue","computed","timeValue","resolvedIsDateDisabled","_a","props","dateDescription","_b","isMergedDateInBounds","date","startOfDay","setMilliseconds","resolvedDateProps","dateErrorMessage","resolvedTimeProps","timeErrorMessage","clearErrors","isSelfEmittedUpdate","watch","newValue","dateToTimeInputString","validateBounds","value","emitValidationState","isValid","emit","emitModelValue","nextTick","emitValidatedValue","emitInvalidModelValue","time","isValidTimeString","setTimeInDateObject"],"mappings":"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"}

package/dist/chunks/{dropdown-tag.LIt7SdwS.js → dropdown-tag.VcqAOFuG.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { defineComponent as u, computed as w, toRefs as g, ref as v, watch as V } from "vue";
 import { B as D } from "./avatar.rwWPYJnt.js";
-import { B as p, f as C } from "./dropdown.NTGSuWAw.js";
+import { B as p, f as C } from "./dropdown.B21PZqp4.js";
 import { u as _ } from "./form-field.D_2g7vaP.js";
 import { d as i, B as b } from "./typography.C8lPlsbD.js";
 import { n as f } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -291,4 +291,4 @@ export {
   le as d,
   _e as e
 };
-//# sourceMappingURL=dropdown-tag.LIt7SdwS.js.map
+//# sourceMappingURL=dropdown-tag.VcqAOFuG.js.map

package/dist/chunks/{dropdown-tag.LIt7SdwS.js.map → dropdown-tag.VcqAOFuG.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown-tag.LIt7SdwS.js","sources":["../../src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue","../../src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue","../../src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue","../../src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue","../../src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue"],"sourcesContent":["<template>\n <div>\n <bento-dropdown\n v-slot=\"{ label, data }\"\n v-bind=\"$props\"\n :items=\"dropdownItems\"\n @update:model-value=\"onUpdateModelValue\"\n @show-more=\"emit('show-more')\"\n @open=\"emit('open')\"\n >\n <bento-avatar :username=\"label\" :src=\"data\" />\n </bento-dropdown>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, defineComponent, type PropType } from 'vue';\n import { type BentoListboxSelectedValue } from '@/types/listbox';\n import { type BentoAvatarListboxOptions } from './dropdown-avatar.types';\n import { BentoAvatar } from '@/components/avatar';\n import BentoDropdown from '@/components/dropdown/dropdown.vue';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n import { deprecate } from '@/utils/ts/deprecate';\n\n const props = defineProps({\n ...BentoDropdown.props,\n /*\n The option elements to populate the avatar dropdown with.\n * It must be an array of {@see BentoAvatarListboxOptions }\n * @property {string} value.label - Text to be displayed in the option.\n * @property {string \| number} value.value - Value of the option.\n * @property {string} value.src - Image source of the avatar image.\n /\n items: {\n type: Array as PropType<BentoAvatarListboxOptions>,\n default: () => [],\n },\n });\n\n const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n const dropdownItems = computed(() => props.items.map(({ value, label, src }) => ({ value, label, data: src })));\n\n if (props.value) {\n deprecate(\n 'BentoDropdownAvatar \"value\" property',\n `The use of \"value\" prop in \"BentoDropdownAvatar\" is no longer supported.\n Use the \"v-model\" or \"model-value\" property instead.`,\n '2.0.0'\n );\n }\n</script>\n\n<script lang=\"ts\">\n /\n A Avatar Dropdown showing a selectable list of countries.\n \n @example\n * import { BentoDropdownAvatar } from '@adyen/bento-vue2';\n * import type { BentoAvatarListboxOptions } from '@adyen/bento-vue2'\n \n export default {\n * components: { BentoDropdownAvatar },\n * template: `\n * <bento-dropdown-avatar\n * v-model=\"selectedValue\"\n * :disabled=\"false\"\n * :multiple=\"true\"\n * :isOptionsDisabled=\"option => option.value === 2\"\n * :items=\"options\"\n * />\n * `,\n * setup() {\n * const selectedValue = ref('user-id-1') // Default value\n * const options: BentoAvatarListboxOptions = [\n * { label: 'User 1', value: 'user-id-1' },\n * { label: 'User 2', value: 'user-id-2', src: 'image-source.jpeg' },\n * ];\n * return { options, selectedValue };\n * }\n * }\n /\n export default defineComponent({\n name: 'bento-dropdown-avatar',\n model: { prop: 'modelValue' },\n });\n</script>\n","<template>\n <div>\n <bento-dropdown\n v-slot=\"{ label }\"\n v-bind=\"$props\"\n :items=\"countryItems\"\n @update:model-value=\"onUpdateModelValue\"\n @show-more=\"emit('show-more')\"\n @open=\"emit('open')\"\n >\n <bento-typography el=\"span\">{{ label }}</bento-typography>\n </bento-dropdown>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { defineComponent, type PropType, toRefs } from 'vue';\n import { type BentoCountryListboxOptions } from './dropdown-country.types';\n import { type BentoListboxSelectedValue } from '@/types/listbox';\n import { BentoTypography } from '@/components/typography';\n import { useCountryItems } from './composables/use-country-items';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n import { deprecate } from '@/utils/ts/deprecate';\n import { BentoCountryVariant } from '@/components/country';\n import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\n const props = defineProps({\n ...BentoDropdown.props,\n /\n The option elements to populate the country dropdown with.\n * It must be an array of {@see BentoCountryListboxOptions }\n * @deprecated Since v2.0.0. Use `BentoDropdown` instead.\n * @property {BentoCountryCode \| string} value.value - Country code of the option\n /\n items: {\n type: Array as PropType<BentoCountryListboxOptions>,\n default: () => [],\n },\n\n /\n Which label variant to display.\n * @values iso, name, phone_code, capital\n /\n variant: {\n type: String as PropType<BentoCountryVariant \| `${BentoCountryVariant}`>,\n default: BentoCountryVariant.CUSTOM,\n validator: (value: BentoCountryVariant) => Object.values(BentoCountryVariant).includes(value),\n },\n });\n\n const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n const { variant, items } = toRefs(props);\n const countryItems = useCountryItems(variant, items);\n\n if (variant.value === 'custom' \|\| items.value.some(item => item.label)) {\n deprecate(\n 'BentoDropdownCountry \"custom\" variant and \"items\" prop \"label\" key',\n 'Use any of the other BentoDropdownCountry variants instead OR use BentoDropdown component for custom labels',\n '2.0.0'\n );\n }\n\n if (props.value) {\n deprecate(\n 'BentoDropdownCountry \"value\" property',\n `The use of \"value\" prop in \"BentoDropdownCountry\" is no longer supported.\n Use the \"v-model\" or \"model-value\" property instead.`,\n '2.0.0'\n );\n }\n</script>\n\n<script lang=\"ts\">\n /\n A Country Dropdown showing a selectable list of countries.\n \n @example\n * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2';\n * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2'\n \n export default {\n * components: { BentoDropdown },\n * template: `\n * <bento-dropdown-country\n * v-model=\"selectedValue\"\n * :disabled=\"false\"\n * :multiple=\"true\"\n * :isOptionsDisabled=\"option => option.value === 2\"\n * :items=\"options\"\n * />\n * `,\n * setup() {\n * const selectedValue = ref(BentoCountryCode.NL) // Default value\n * const options: BentoCountryListboxOptions = [\n * { label: 'Option 1', value: BentoCountryCode.NL },\n * { label: 'Option 2', value: BentoCountryCode.BE },\n * ];\n * return { options, selectedValue };\n * }\n * }\n /\n export default defineComponent({\n name: 'b-dropdown-country',\n model: { prop: 'modelValue' },\n });\n</script>\n","<template>\n <bento-dropdown\n v-slot=\"slotProps\"\n v-bind=\"$props\"\n :search=\"search\"\n :items=\"filteredItems\"\n @update:model-value=\"onUpdateModelValue\"\n @show-more=\"emit('show-more')\"\n @open=\"emit('open')\"\n >\n <listbox-option-tag :option=\"slotProps\" />\n </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n import { defineComponent, type PropType, ref, watch } from 'vue';\n import type { BentoCurrencyListboxOptions } from './dropdown-currency.types';\n import type { BentoListboxSelectedValue } from '@/types/listbox';\n import { ListboxOptionTag } from '@/internal/listbox/';\n import BentoDropdown from '@/components/dropdown/dropdown.vue';\n import { useSearchBarFilter } from '@/components/search-bar/useSearchBarDataFilter';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n import { deprecate } from '@/utils/ts/deprecate';\n\n const props = defineProps({\n ...BentoDropdown.props,\n /\n The option elements to populate the currency dropdown with.\n * It must be an array of {@see BentoCurrencyListboxOptions }\n * @property {string} value.label - Text to be displayed in the option\n * @property {BentoCurrencyISOCode} value.code - Currency ISO code of the option\n /\n items: {\n type: Array as PropType<BentoCurrencyListboxOptions>,\n default: () => [],\n },\n });\n\n const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n const filteredItems = ref<BentoCurrencyListboxOptions>([]);\n\n watch(\n () => props.items,\n () => (filteredItems.value = props.items),\n { immediate: true }\n );\n\n const search = props.search\n ? props.search\n : {\n debounceTime: 500,\n searchEvent: async (searchTerm: string) => {\n // Combine value and label to be able to search by the currency code\n const searchableItems = props.items.map(item => ({\n ...item,\n label: `${item.value} ${item.label}`,\n }));\n\n const searchResults = useSearchBarFilter(\n ref(searchTerm),\n ref<BentoCurrencyListboxOptions>(searchableItems),\n props?.search?.searchEvent,\n ref(false)\n ).value;\n\n // Restore original labels by removing the prepended value\n const normalizedResults = searchResults?.map(result => ({\n ...result,\n label: result.label.substring(result.value.length + 1),\n }));\n\n filteredItems.value = normalizedResults;\n },\n };\n\n if (props.value) {\n deprecate(\n 'BentoDropdownCurrency \"value\" property',\n `The use of \"value\" prop in \"BentoDropdownCurrency\" is no longer supported.\n Use the \"v-model\" or \"model-value\" property instead.`,\n '2.0.0'\n );\n }\n</script>\n\n<script lang=\"ts\">\n /\n A Currency Dropdown showing a selectable list of currencies.\n \n @example\n * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2';\n * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2'\n \n export default {\n * components: { BentoDropdown },\n * template: `\n * <bento-dropdown-currency\n * v-model=\"selectedValue\"\n * :disabled=\"false\"\n * :multiple=\"true\"\n * :isOptionsDisabled=\"option => option.value === 2\"\n * :items=\"options\"\n * />\n * `,\n * setup() {\n * const selectedValue = ref(BentoCountryCode.NL) // Default value\n * const options: BentoCountryListboxOptions = [\n * { label: 'Option 1', value: BentoCountryCode.NL },\n * { label: 'Option 2', value: BentoCountryCode.BE },\n * ];\n * return { options, selectedValue };\n * }\n * }\n /\n export default defineComponent({\n name: 'b-dropdown-currency',\n model: { prop: 'modelValue' },\n });\n</script>\n","<template>\n <div>\n <bento-dropdown\n class=\"b-dropdown-payment-method\"\n v-bind=\"$props\"\n @update:model-value=\"onUpdateModelValue\"\n @show-more=\"emit('show-more')\"\n @open=\"emit('open')\"\n >\n <template #display-value=\"{ label, value }\">\n <bento-payment-method :type=\"value\" :label=\"label\" />\n </template>\n\n <template #default=\"{ value, label, description }\">\n <div class=\"b-dropdown-payment-method__item\">\n <bento-payment-method :type=\"value\" :label=\"description ? undefined : label\" />\n\n <div v-if=\"description\" class=\"b-dropdown-payment-method__text\">\n <bento-typography el=\"span\">{{ label }}</bento-typography>\n <bento-typography el=\"span\" class=\"b-dropdown-payment-method__description\">{{\n description\n }}</bento-typography>\n </div>\n </div>\n </template>\n </bento-dropdown>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { defineComponent, type PropType } from 'vue';\n import { BentoPaymentMethod } from '@/components/payment-method';\n import { BentoTypography } from '@/components/typography';\n import BentoDropdown from '@/components/dropdown/dropdown.vue';\n import { type BentoPaymentMethodListboxOptions } from './dropdown-payment-method.types';\n import { type BentoListboxSelectedValue } from '@/types/listbox';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n import { deprecate } from '@/utils/ts/deprecate';\n\n const props = defineProps({\n ...BentoDropdown.props,\n /\n The option elements to populate the payment method dropdown with.\n * It must be an array of {@see BentoPaymentMethodListboxOptions }\n * @property {string} value.label - Text to be displayed in the option\n * @property {string} value.value - Payment type code that translates to a payment icon name {@see https://adyen-ui-assets.netlify.app/?path=/story/packages-ui-assets-payment-method-icons--icons}\n /\n items: {\n type: Array as PropType<BentoPaymentMethodListboxOptions>,\n default: () => [],\n },\n });\n\n const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n if (props.value) {\n deprecate(\n 'BentoDropdownPaymentMethod \"value\" property',\n `The use of \"value\" prop in \"BentoDropdownPaymentMethod\" is no longer supported.\n Use the \"v-model\" or \"model-value\" property instead.`,\n '2.0.0'\n );\n }\n</script>\n\n<script lang=\"ts\">\n /\n A Payment method Dropdown showing a selectable list of countries.\n \n @example\n * import { BentoDropdownPaymentMethod } from '@adyen/bento-vue2';\n * import type { BentoPaymentMethodListboxOptions } from '@adyen/bento-vue2'\n \n export default {\n * components: { BentoDropdownPaymentMethod },\n * template: `\n * <bento-dropdown-payment-method\n * v-model=\"selectedValue\"\n * :disabled=\"false\"\n * :multiple=\"true\"\n * :isOptionsDisabled=\"option => option.value === 'Visa'\"\n * :items=\"options\"\n * />\n * `,\n * setup() {\n * const selectedValue = ref('ideal') // Default value\n * const options: BentoPaymentMethodListboxOptions = [\n * { label: 'Option 1', value: 'ideal' },\n * { label: 'Option 2', value: 'visa' },\n * ];\n * return { options, selectedValue };\n * }\n * }\n /\n export default defineComponent({\n name: 'bento-dropdown-payment-method',\n model: { prop: 'modelValue' },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-payment-method.scss\" />\n","<template>\n <bento-dropdown\n v-slot=\"{ label, data }\"\n v-bind=\"$props\"\n class=\"b-dropdown-tag\"\n :items=\"tagItems\"\n show-slot-content-in-multiple\n @update:model-value=\"onUpdateModelValue\"\n @show-more=\"emit('show-more')\"\n @open=\"emit('open')\"\n >\n <listbox-option-tag :option=\"{ value: label, data, label: '' }\" />\n </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, defineComponent, type PropType } from 'vue';\n import type { BentoTagListboxOptions } from './dropdown-tag.types';\n import type { BentoListboxSelectedValue } from '@/types/listbox';\n import { ListboxOptionTag } from '../../../../internal';\n import BentoDropdown from '../../../dropdown.vue';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n import { deprecate } from '@/utils/ts/deprecate';\n\n const props = defineProps({\n ...BentoDropdown.props,\n /\n The option elements to populate the tag dropdown with.\n * It must be an array of {@see BentoTagListboxOptions }\n * @property {string} value.label - Text to be displayed in the option\n * @property {string \| number} value.value - Value of the option\n * @property {string} value.variant - The BentTag variant shown for the option.\n /\n items: {\n type: Array as PropType<BentoTagListboxOptions>,\n default: () => [],\n },\n });\n\n const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n const tagItems = computed(() => props.items?.map(({ label, value, variant }) => ({ label, value, data: variant })));\n\n if (props.value) {\n deprecate(\n 'BentoDropdownTag \"value\" property',\n `The use of \"value\" prop in \"BentoDropdownTag\" is no longer supported.\n Use the \"v-model\" or \"model-value\" property instead.`,\n '2.0.0'\n );\n }\n</script>\n\n<script lang=\"ts\">\n /\n A Tag Dropdown showing a selectable list of tags.\n \n @example\n * import { BentoDropdownTag } from '@adyen/bento-vue2';\n * import type { BentoTagListboxOptions } from '@adyen/bento-vue2'\n \n export default {\n * components: { BentoDropdownTag },\n * template: `\n * <bento-dropdown-tag\n * v-model=\"selectedValue\"\n * :disabled=\"false\"\n * :items=\"options\"\n * />\n * `,\n * setup() {\n * const selectedValue = ref('unique-id-1') // Default value\n * const options: BentoTagListboxOptions = [\n * { label: 'Offline', value: 'unique-id-1', variant: 'red' },\n * { label: 'Online', value: 'unique-id-2', variant: 'green' },\n * ];\n * return { options, selectedValue };\n * }\n * }\n */\n export default defineComponent({\n name: 'bento-dropdown-tag',\n model: { prop: 'modelValue' },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-tag.scss\" />\n"],"names":["__default__$4","defineComponent","emitValue","useFormFieldEmits","emit","onUpdateModelValue","selectedValue","dropdownItems","computed","props","value","label","src","deprecate","__default__$3","variant","items","toRefs","countryItems","useCountryItems","item","__default__$2","filteredItems","ref","watch","search","searchTerm","searchableItems","searchResults","useSearchBarFilter","_a","normalizedResults","result","__default__$1","__default__","tagItems"],"mappings":"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"}
1	+ {"version":3,"file":"dropdown-tag.VcqAOFuG.js","sources":["../../src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue","../../src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue","../../src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue","../../src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue","../../src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue"],"sourcesContent":["<template>\n <div>\n <bento-dropdown\n v-slot=\"{ label, data }\"\n v-bind=\"$props\"\n :items=\"dropdownItems\"\n @update:model-value=\"onUpdateModelValue\"\n @show-more=\"emit('show-more')\"\n @open=\"emit('open')\"\n >\n <bento-avatar :username=\"label\" :src=\"data\" />\n </bento-dropdown>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, defineComponent, type PropType } from 'vue';\n import { type BentoListboxSelectedValue } from '@/types/listbox';\n import { type BentoAvatarListboxOptions } from './dropdown-avatar.types';\n import { BentoAvatar } from '@/components/avatar';\n import BentoDropdown from '@/components/dropdown/dropdown.vue';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n import { deprecate } from '@/utils/ts/deprecate';\n\n const props = defineProps({\n ...BentoDropdown.props,\n /*\n The option elements to populate the avatar dropdown with.\n * It must be an array of {@see BentoAvatarListboxOptions }\n * @property {string} value.label - Text to be displayed in the option.\n * @property {string \| number} value.value - Value of the option.\n * @property {string} value.src - Image source of the avatar image.\n /\n items: {\n type: Array as PropType<BentoAvatarListboxOptions>,\n default: () => [],\n },\n });\n\n const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n const dropdownItems = computed(() => props.items.map(({ value, label, src }) => ({ value, label, data: src })));\n\n if (props.value) {\n deprecate(\n 'BentoDropdownAvatar \"value\" property',\n `The use of \"value\" prop in \"BentoDropdownAvatar\" is no longer supported.\n Use the \"v-model\" or \"model-value\" property instead.`,\n '2.0.0'\n );\n }\n</script>\n\n<script lang=\"ts\">\n /\n A Avatar Dropdown showing a selectable list of countries.\n \n @example\n * import { BentoDropdownAvatar } from '@adyen/bento-vue2';\n * import type { BentoAvatarListboxOptions } from '@adyen/bento-vue2'\n \n export default {\n * components: { BentoDropdownAvatar },\n * template: `\n * <bento-dropdown-avatar\n * v-model=\"selectedValue\"\n * :disabled=\"false\"\n * :multiple=\"true\"\n * :isOptionsDisabled=\"option => option.value === 2\"\n * :items=\"options\"\n * />\n * `,\n * setup() {\n * const selectedValue = ref('user-id-1') // Default value\n * const options: BentoAvatarListboxOptions = [\n * { label: 'User 1', value: 'user-id-1' },\n * { label: 'User 2', value: 'user-id-2', src: 'image-source.jpeg' },\n * ];\n * return { options, selectedValue };\n * }\n * }\n /\n export default defineComponent({\n name: 'bento-dropdown-avatar',\n model: { prop: 'modelValue' },\n });\n</script>\n","<template>\n <div>\n <bento-dropdown\n v-slot=\"{ label }\"\n v-bind=\"$props\"\n :items=\"countryItems\"\n @update:model-value=\"onUpdateModelValue\"\n @show-more=\"emit('show-more')\"\n @open=\"emit('open')\"\n >\n <bento-typography el=\"span\">{{ label }}</bento-typography>\n </bento-dropdown>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { defineComponent, type PropType, toRefs } from 'vue';\n import { type BentoCountryListboxOptions } from './dropdown-country.types';\n import { type BentoListboxSelectedValue } from '@/types/listbox';\n import { BentoTypography } from '@/components/typography';\n import { useCountryItems } from './composables/use-country-items';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n import { deprecate } from '@/utils/ts/deprecate';\n import { BentoCountryVariant } from '@/components/country';\n import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\n const props = defineProps({\n ...BentoDropdown.props,\n /\n The option elements to populate the country dropdown with.\n * It must be an array of {@see BentoCountryListboxOptions }\n * @deprecated Since v2.0.0. Use `BentoDropdown` instead.\n * @property {BentoCountryCode \| string} value.value - Country code of the option\n /\n items: {\n type: Array as PropType<BentoCountryListboxOptions>,\n default: () => [],\n },\n\n /\n Which label variant to display.\n * @values iso, name, phone_code, capital\n /\n variant: {\n type: String as PropType<BentoCountryVariant \| `${BentoCountryVariant}`>,\n default: BentoCountryVariant.CUSTOM,\n validator: (value: BentoCountryVariant) => Object.values(BentoCountryVariant).includes(value),\n },\n });\n\n const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n const { variant, items } = toRefs(props);\n const countryItems = useCountryItems(variant, items);\n\n if (variant.value === 'custom' \|\| items.value.some(item => item.label)) {\n deprecate(\n 'BentoDropdownCountry \"custom\" variant and \"items\" prop \"label\" key',\n 'Use any of the other BentoDropdownCountry variants instead OR use BentoDropdown component for custom labels',\n '2.0.0'\n );\n }\n\n if (props.value) {\n deprecate(\n 'BentoDropdownCountry \"value\" property',\n `The use of \"value\" prop in \"BentoDropdownCountry\" is no longer supported.\n Use the \"v-model\" or \"model-value\" property instead.`,\n '2.0.0'\n );\n }\n</script>\n\n<script lang=\"ts\">\n /\n A Country Dropdown showing a selectable list of countries.\n \n @example\n * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2';\n * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2'\n \n export default {\n * components: { BentoDropdown },\n * template: `\n * <bento-dropdown-country\n * v-model=\"selectedValue\"\n * :disabled=\"false\"\n * :multiple=\"true\"\n * :isOptionsDisabled=\"option => option.value === 2\"\n * :items=\"options\"\n * />\n * `,\n * setup() {\n * const selectedValue = ref(BentoCountryCode.NL) // Default value\n * const options: BentoCountryListboxOptions = [\n * { label: 'Option 1', value: BentoCountryCode.NL },\n * { label: 'Option 2', value: BentoCountryCode.BE },\n * ];\n * return { options, selectedValue };\n * }\n * }\n /\n export default defineComponent({\n name: 'b-dropdown-country',\n model: { prop: 'modelValue' },\n });\n</script>\n","<template>\n <bento-dropdown\n v-slot=\"slotProps\"\n v-bind=\"$props\"\n :search=\"search\"\n :items=\"filteredItems\"\n @update:model-value=\"onUpdateModelValue\"\n @show-more=\"emit('show-more')\"\n @open=\"emit('open')\"\n >\n <listbox-option-tag :option=\"slotProps\" />\n </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n import { defineComponent, type PropType, ref, watch } from 'vue';\n import type { BentoCurrencyListboxOptions } from './dropdown-currency.types';\n import type { BentoListboxSelectedValue } from '@/types/listbox';\n import { ListboxOptionTag } from '@/internal/listbox/';\n import BentoDropdown from '@/components/dropdown/dropdown.vue';\n import { useSearchBarFilter } from '@/components/search-bar/useSearchBarDataFilter';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n import { deprecate } from '@/utils/ts/deprecate';\n\n const props = defineProps({\n ...BentoDropdown.props,\n /\n The option elements to populate the currency dropdown with.\n * It must be an array of {@see BentoCurrencyListboxOptions }\n * @property {string} value.label - Text to be displayed in the option\n * @property {BentoCurrencyISOCode} value.code - Currency ISO code of the option\n /\n items: {\n type: Array as PropType<BentoCurrencyListboxOptions>,\n default: () => [],\n },\n });\n\n const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n const filteredItems = ref<BentoCurrencyListboxOptions>([]);\n\n watch(\n () => props.items,\n () => (filteredItems.value = props.items),\n { immediate: true }\n );\n\n const search = props.search\n ? props.search\n : {\n debounceTime: 500,\n searchEvent: async (searchTerm: string) => {\n // Combine value and label to be able to search by the currency code\n const searchableItems = props.items.map(item => ({\n ...item,\n label: `${item.value} ${item.label}`,\n }));\n\n const searchResults = useSearchBarFilter(\n ref(searchTerm),\n ref<BentoCurrencyListboxOptions>(searchableItems),\n props?.search?.searchEvent,\n ref(false)\n ).value;\n\n // Restore original labels by removing the prepended value\n const normalizedResults = searchResults?.map(result => ({\n ...result,\n label: result.label.substring(result.value.length + 1),\n }));\n\n filteredItems.value = normalizedResults;\n },\n };\n\n if (props.value) {\n deprecate(\n 'BentoDropdownCurrency \"value\" property',\n `The use of \"value\" prop in \"BentoDropdownCurrency\" is no longer supported.\n Use the \"v-model\" or \"model-value\" property instead.`,\n '2.0.0'\n );\n }\n</script>\n\n<script lang=\"ts\">\n /\n A Currency Dropdown showing a selectable list of currencies.\n \n @example\n * import { BentoDropdownCountry, BentoCountryCode } from '@adyen/bento-vue2';\n * import type { BentoCountryListboxOptions } from '@adyen/bento-vue2'\n \n export default {\n * components: { BentoDropdown },\n * template: `\n * <bento-dropdown-currency\n * v-model=\"selectedValue\"\n * :disabled=\"false\"\n * :multiple=\"true\"\n * :isOptionsDisabled=\"option => option.value === 2\"\n * :items=\"options\"\n * />\n * `,\n * setup() {\n * const selectedValue = ref(BentoCountryCode.NL) // Default value\n * const options: BentoCountryListboxOptions = [\n * { label: 'Option 1', value: BentoCountryCode.NL },\n * { label: 'Option 2', value: BentoCountryCode.BE },\n * ];\n * return { options, selectedValue };\n * }\n * }\n /\n export default defineComponent({\n name: 'b-dropdown-currency',\n model: { prop: 'modelValue' },\n });\n</script>\n","<template>\n <div>\n <bento-dropdown\n class=\"b-dropdown-payment-method\"\n v-bind=\"$props\"\n @update:model-value=\"onUpdateModelValue\"\n @show-more=\"emit('show-more')\"\n @open=\"emit('open')\"\n >\n <template #display-value=\"{ label, value }\">\n <bento-payment-method :type=\"value\" :label=\"label\" />\n </template>\n\n <template #default=\"{ value, label, description }\">\n <div class=\"b-dropdown-payment-method__item\">\n <bento-payment-method :type=\"value\" :label=\"description ? undefined : label\" />\n\n <div v-if=\"description\" class=\"b-dropdown-payment-method__text\">\n <bento-typography el=\"span\">{{ label }}</bento-typography>\n <bento-typography el=\"span\" class=\"b-dropdown-payment-method__description\">{{\n description\n }}</bento-typography>\n </div>\n </div>\n </template>\n </bento-dropdown>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { defineComponent, type PropType } from 'vue';\n import { BentoPaymentMethod } from '@/components/payment-method';\n import { BentoTypography } from '@/components/typography';\n import BentoDropdown from '@/components/dropdown/dropdown.vue';\n import { type BentoPaymentMethodListboxOptions } from './dropdown-payment-method.types';\n import { type BentoListboxSelectedValue } from '@/types/listbox';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n import { deprecate } from '@/utils/ts/deprecate';\n\n const props = defineProps({\n ...BentoDropdown.props,\n /\n The option elements to populate the payment method dropdown with.\n * It must be an array of {@see BentoPaymentMethodListboxOptions }\n * @property {string} value.label - Text to be displayed in the option\n * @property {string} value.value - Payment type code that translates to a payment icon name {@see https://adyen-ui-assets.netlify.app/?path=/story/packages-ui-assets-payment-method-icons--icons}\n /\n items: {\n type: Array as PropType<BentoPaymentMethodListboxOptions>,\n default: () => [],\n },\n });\n\n const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n if (props.value) {\n deprecate(\n 'BentoDropdownPaymentMethod \"value\" property',\n `The use of \"value\" prop in \"BentoDropdownPaymentMethod\" is no longer supported.\n Use the \"v-model\" or \"model-value\" property instead.`,\n '2.0.0'\n );\n }\n</script>\n\n<script lang=\"ts\">\n /\n A Payment method Dropdown showing a selectable list of countries.\n \n @example\n * import { BentoDropdownPaymentMethod } from '@adyen/bento-vue2';\n * import type { BentoPaymentMethodListboxOptions } from '@adyen/bento-vue2'\n \n export default {\n * components: { BentoDropdownPaymentMethod },\n * template: `\n * <bento-dropdown-payment-method\n * v-model=\"selectedValue\"\n * :disabled=\"false\"\n * :multiple=\"true\"\n * :isOptionsDisabled=\"option => option.value === 'Visa'\"\n * :items=\"options\"\n * />\n * `,\n * setup() {\n * const selectedValue = ref('ideal') // Default value\n * const options: BentoPaymentMethodListboxOptions = [\n * { label: 'Option 1', value: 'ideal' },\n * { label: 'Option 2', value: 'visa' },\n * ];\n * return { options, selectedValue };\n * }\n * }\n /\n export default defineComponent({\n name: 'bento-dropdown-payment-method',\n model: { prop: 'modelValue' },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-payment-method.scss\" />\n","<template>\n <bento-dropdown\n v-slot=\"{ label, data }\"\n v-bind=\"$props\"\n class=\"b-dropdown-tag\"\n :items=\"tagItems\"\n show-slot-content-in-multiple\n @update:model-value=\"onUpdateModelValue\"\n @show-more=\"emit('show-more')\"\n @open=\"emit('open')\"\n >\n <listbox-option-tag :option=\"{ value: label, data, label: '' }\" />\n </bento-dropdown>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, defineComponent, type PropType } from 'vue';\n import type { BentoTagListboxOptions } from './dropdown-tag.types';\n import type { BentoListboxSelectedValue } from '@/types/listbox';\n import { ListboxOptionTag } from '../../../../internal';\n import BentoDropdown from '../../../dropdown.vue';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n import { deprecate } from '@/utils/ts/deprecate';\n\n const props = defineProps({\n ...BentoDropdown.props,\n /\n The option elements to populate the tag dropdown with.\n * It must be an array of {@see BentoTagListboxOptions }\n * @property {string} value.label - Text to be displayed in the option\n * @property {string \| number} value.value - Value of the option\n * @property {string} value.variant - The BentTag variant shown for the option.\n /\n items: {\n type: Array as PropType<BentoTagListboxOptions>,\n default: () => [],\n },\n });\n\n const emit = defineEmits([\"input\", \"update:model-value\", \"show-more\", \"open\"]);\n\n const { emitValue } = useFormFieldEmits<BentoListboxSelectedValue>(emit);\n\n const onUpdateModelValue = (selectedValue: BentoListboxSelectedValue) => emitValue(selectedValue);\n\n const tagItems = computed(() => props.items?.map(({ label, value, variant }) => ({ label, value, data: variant })));\n\n if (props.value) {\n deprecate(\n 'BentoDropdownTag \"value\" property',\n `The use of \"value\" prop in \"BentoDropdownTag\" is no longer supported.\n Use the \"v-model\" or \"model-value\" property instead.`,\n '2.0.0'\n );\n }\n</script>\n\n<script lang=\"ts\">\n /\n A Tag Dropdown showing a selectable list of tags.\n \n @example\n * import { BentoDropdownTag } from '@adyen/bento-vue2';\n * import type { BentoTagListboxOptions } from '@adyen/bento-vue2'\n \n export default {\n * components: { BentoDropdownTag },\n * template: `\n * <bento-dropdown-tag\n * v-model=\"selectedValue\"\n * :disabled=\"false\"\n * :items=\"options\"\n * />\n * `,\n * setup() {\n * const selectedValue = ref('unique-id-1') // Default value\n * const options: BentoTagListboxOptions = [\n * { label: 'Offline', value: 'unique-id-1', variant: 'red' },\n * { label: 'Online', value: 'unique-id-2', variant: 'green' },\n * ];\n * return { options, selectedValue };\n * }\n * }\n */\n export default defineComponent({\n name: 'bento-dropdown-tag',\n model: { prop: 'modelValue' },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-tag.scss\" />\n"],"names":["__default__$4","defineComponent","emitValue","useFormFieldEmits","emit","onUpdateModelValue","selectedValue","dropdownItems","computed","props","value","label","src","deprecate","__default__$3","variant","items","toRefs","countryItems","useCountryItems","item","__default__$2","filteredItems","ref","watch","search","searchTerm","searchableItems","searchResults","useSearchBarFilter","_a","normalizedResults","result","__default__$1","__default__","tagItems"],"mappings":"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"}