npm - @adyen/bento-vue2 - Versions diffs - 1.1.0 → 1.2.0 - Mend

@adyen/bento-vue2 1.1.0 → 1.2.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 (299) hide show

package/dist/date-picker.js CHANGED Viewed

@@ -1,19 +1,19 @@
 import { ref as u, computed as p, defineComponent as M, watch as q, toRef as F, nextTick as T } from "vue";
-import { c as Y } from "./chunks/dropdown-default-textbox.e425fc5b.js";
+import { c as Y } from "./chunks/dropdown-default-textbox.a5eca928.js";
 import { BentoPopover as L, BentoPopoverPositions as W } from "./popover.js";
 import { g as d } from "./chunks/unique-id.a2a2b458.js";
-import { B as $, a as K, b as j } from "./chunks/index.e1fcc9e0.js";
+import { B as $, a as K, b as j } from "./chunks/index.175f9e2d.js";
 import { u as x } from "./chunks/i18n.155748d6.js";
-import { f as E } from "./chunks/index.8d590c55.js";
+import { f as E } from "./chunks/index.d07f9800.js";
 import { e as _, d as z, f as G } from "./chunks/index.f55fdc32.js";
 import { D as B, v as H, f as J } from "./chunks/date-input.9186a0bf.js";
 import { d as Q } from "./chunks/debounce.f8d92e44.js";
-import { C as k } from "./chunks/calendar.c9cfce76.js";
-import { b as Se } from "./chunks/calendar.c9cfce76.js";
-import { E as X } from "./chunks/error-message.4269d92b.js";
+import { C as k } from "./chunks/calendar.8f50a65a.js";
+import { b as Se } from "./chunks/calendar.8f50a65a.js";
+import { E as X } from "./chunks/error-message.a581a172.js";
 import { B as Z } from "./chunks/directive.0408e565.js";
 import { n as ee } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index3.css";
+import "./assets/index21.css";
 var i = /* @__PURE__ */ ((a) => (a.INPUT = "input", a))(i || {});
 const ae = ({ datePickerValue: a, isDateIncorrect: e }) => {
   const { locale: t, t: n } = x(), f = { de: z, enUS: _, fr: G }, l = u(null);

package/dist/date-range-picker.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { B as t, a as r } from "./chunks/index.bc51abe9.js";
-import { b as o } from "./chunks/calendar.c9cfce76.js";
+import { B as t, a as r } from "./chunks/index.f0d99471.js";
+import { b as o } from "./chunks/calendar.8f50a65a.js";
 export {
   t as BentoDateRangePicker,
   r as BentoDateRangePickerEvent,

package/dist/date.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { B as e, a as o } from "./chunks/index.8d590c55.js";
+import { B as e, a as o } from "./chunks/index.d07f9800.js";
 export {
   e as BentoDate,
   o as BentoDateFormat

package/dist/divider.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { defineComponent as i, computed as n } from "vue";
 import { n as s } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index7.css";
+import "./assets/index26.css";
 const _ = i({
   name: "bento-divider",
   setup(a, { attrs: e }) {

package/dist/dropdown.js CHANGED Viewed

@@ -1,11 +1,11 @@
-import { B as s } from "./chunks/dropdown.e298bb6c.js";
+import { B as s } from "./chunks/dropdown.368486b1.js";
 import { defineComponent as a, computed as c, toRefs as m } from "vue";
-import { B as f, L as l } from "./chunks/listbox-option-tag.aae99730.js";
+import { B as f, L as l } from "./chunks/listbox-option-tag.c7e9a228.js";
 import { n as u } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
 import { BentoCountry as y, BentoCountryVariant as _ } from "./country.js";
 import { u as v } from "./chunks/useCountryItems.5d7b436e.js";
 import { BentoPaymentMethod as b } from "./payment-method.js";
-import "./assets/index4.css";
+import "./assets/index27.css";
 const w = a({
   name: "bento-dropdown-avatar",
   components: {

package/dist/dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown.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 v-slot=\"{ label, data }\" v-bind=\"$props\" :items=\"dropdownItems\" @input=\"onInput\">\n <bento-avatar :username=\"label\" :src=\"data\" />\n </bento-dropdown>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType } from 'vue';\n import { BentoListboxSelectedValue } from '@/types';\n import { BentoAvatarListboxOptions } from './dropdown-avatar.types';\n import { BentoAvatar } from '@/internal';\n import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\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 components: {\n BentoDropdown,\n BentoAvatar,\n },\n props: {\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 emits: ['input'],\n setup(props, { emit }) {\n const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n\n const dropdownItems = computed(() =>\n props.items.map(({ value, label, src }) => ({ value, label, data: src }))\n );\n\n return {\n // Values\n dropdownItems,\n\n // Methods\n onInput,\n };\n },\n });\n</script>\n","<template>\n <div>\n <bento-dropdown v-slot=\"{ value, label }\" v-bind=\"$props\" :items=\"countryItems\" @input=\"onInput\">\n <bento-country :code=\"value\" :label=\"label\" :variant=\"BentoCountryVariant.CUSTOM\" />\n </bento-dropdown>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { defineComponent, PropType, toRefs } from 'vue';\n import { BentoCountryListboxOptions } from './dropdown-country.types';\n import { BentoListboxSelectedValue } from '@/types';\n import { BentoCountry, BentoCountryVariant } from '@/components/country';\n import { useCountryItems } from './composables/useCountryItems';\n import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\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 components: {\n BentoDropdown,\n BentoCountry,\n },\n props: {\n ...BentoDropdown.props,\n /\n The option elements to populate the country dropdown with.\n * It must be an array of {@see BentoCountryListboxOptions }\n * * @property {string} value.label - Text to be displayed in the option\n * * @property {BentoCountryCode} 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>,\n default: BentoCountryVariant.CUSTOM,\n validator: (value: BentoCountryVariant) => Object.values(BentoCountryVariant).includes(value),\n },\n },\n emits: ['input'],\n setup(props, { emit }) {\n const { variant, items } = toRefs(props);\n const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n\n const countryItems = useCountryItems(variant, items);\n\n return {\n // Values\n countryItems,\n\n // Methods\n onInput,\n\n // Enums\n BentoCountryVariant,\n };\n },\n });\n</script>\n","<template>\n <bento-dropdown v-slot=\"slotProps\" v-bind=\"$props\" @input=\"onInput\">\n <listbox-option-tag :option=\"slotProps\" />\n </bento-dropdown>\n</template>\n\n<script lang=\"ts\">\n import { defineComponent, PropType } from 'vue';\n import type { BentoCurrencyListboxOptions } from './dropdown-currency.types';\n import type { BentoListboxSelectedValue } from '@/types';\n import { ListboxOptionTag } from '@/internal';\n import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\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 components: {\n BentoDropdown,\n ListboxOptionTag,\n },\n props: {\n ...BentoDropdown.props,\n /\n The option elements to populate the country 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 emits: ['input'],\n setup(_props, { emit }) {\n const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n\n return {\n // Methods\n onInput,\n };\n },\n });\n</script>\n","<template>\n <div>\n <bento-dropdown v-slot=\"{ value, label }\" v-bind=\"$props\" @input=\"onInput\">\n <bento-payment-method :type=\"value\" :label=\"label\" />\n </bento-dropdown>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { defineComponent, PropType } from 'vue';\n import { BentoPaymentMethodListboxOptions } from './dropdown-payment-method.types';\n import { BentoListboxSelectedValue } from '@/types';\n import { BentoPaymentMethod } from '@/components/payment-method';\n import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\n /\n A Payment method Dropdown showing a selectable list of countries.\n \n @example\n * import { BentoDropdownPaymentMethod, BentoPaymentMethodType } 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 === BentoPaymentMethodType.VISA\"\n * :items=\"options\"\n * />\n * `,\n * setup() {\n * const selectedValue = ref(BentoPaymentMethodType.IDEAL) // Default value\n * const options: BentoPaymentMethodListboxOptions = [\n * { label: 'Option 1', value: BentoPaymentMethodType.IDEAL },\n * { label: 'Option 2', value: BentoPaymentMethodType.VISA },\n * ];\n * return { options, selectedValue };\n * }\n * }\n /\n export default defineComponent({\n name: 'bento-dropdown-payment-method',\n components: {\n BentoDropdown,\n BentoPaymentMethod,\n },\n props: {\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 {BentoPaymentMethodType} value.value - Payment type code that\n /\n items: {\n type: Array as PropType<BentoPaymentMethodListboxOptions>,\n default: () => [],\n },\n },\n emits: ['input'],\n setup(_props, { emit }) {\n const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n\n return {\n // Methods\n onInput,\n };\n },\n });\n</script>\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 @input=\"onInput\"\n >\n <listbox-option-tag :option=\"{ value: label, data, label: '' }\" />\n </bento-dropdown>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType } from 'vue';\n import type { BentoTagListboxOptions } from './dropdown-tag.types';\n import type { BentoListboxSelectedValue } from '../../../../../types';\n import { ListboxOptionTag } from '../../../../internal';\n import BentoDropdown from '../../../dropdown.vue';\n\n /\n A Tag Dropdown showing a selectable list of tags.\n \n @example\n * import { BentoDropdownTag, BentoTagVariant } 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: BentoTagVariant.RED },\n * { label: 'Online', value: 'unique-id-2', variant: BentoTagVariant.GREEN },\n * ];\n * return { options, selectedValue };\n * }\n * }\n /\n export default defineComponent({\n name: 'bento-dropdown-tag',\n components: {\n BentoDropdown,\n ListboxOptionTag,\n },\n props: {\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 {BentoTagVariant} value.variant - The BentTag variant shown for the option.\n */\n items: {\n type: Array as PropType<BentoTagListboxOptions>,\n default: () => [],\n },\n },\n emits: ['input'],\n setup(props, { emit }) {\n const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n\n const tagItems = computed(() =>\n props.items?.map(({ label, value, variant }) => ({ label, value, data: variant }))\n );\n\n return {\n // Values\n tagItems,\n\n // Methods\n onInput,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-tag.scss\" />\n"],"names":["_sfc_main$4","defineComponent","BentoDropdown","BentoAvatar","props","emit","onInput","selectedValue","computed","value","label","src","_sfc_main$3","BentoCountry","BentoCountryVariant","variant","items","toRefs","useCountryItems","_sfc_main$2","ListboxOptionTag","_props","_sfc_main$1","BentoPaymentMethod","_sfc_main","_a"],"mappings":"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"}
1	+ {"version":3,"file":"dropdown.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 v-slot=\"{ label, data }\" v-bind=\"$props\" :items=\"dropdownItems\" @input=\"onInput\">\n <bento-avatar :username=\"label\" :src=\"data\" />\n </bento-dropdown>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType } from 'vue';\n import { BentoListboxSelectedValue } from '@/types';\n import { BentoAvatarListboxOptions } from './dropdown-avatar.types';\n import { BentoAvatar } from '@/internal';\n import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\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 components: {\n BentoDropdown,\n BentoAvatar,\n },\n props: {\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 emits: ['input'],\n setup(props, { emit }) {\n const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n\n const dropdownItems = computed(() =>\n props.items.map(({ value, label, src }) => ({ value, label, data: src }))\n );\n\n return {\n // Values\n dropdownItems,\n\n // Methods\n onInput,\n };\n },\n });\n</script>\n","<template>\n <div>\n <bento-dropdown v-slot=\"{ value, label }\" v-bind=\"$props\" :items=\"countryItems\" @input=\"onInput\">\n <bento-country :code=\"value\" :label=\"label\" :variant=\"BentoCountryVariant.CUSTOM\" />\n </bento-dropdown>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { defineComponent, PropType, toRefs } from 'vue';\n import { BentoCountryListboxOptions } from './dropdown-country.types';\n import { BentoListboxSelectedValue } from '@/types';\n import { BentoCountry, BentoCountryVariant } from '@/components/country';\n import { useCountryItems } from './composables/useCountryItems';\n import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\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 components: {\n BentoDropdown,\n BentoCountry,\n },\n props: {\n ...BentoDropdown.props,\n /\n The option elements to populate the country dropdown with.\n * It must be an array of {@see BentoCountryListboxOptions }\n * * @property {string} value.label - Text to be displayed in the option\n * * @property {BentoCountryCode} 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 emits: ['input'],\n setup(props, { emit }) {\n const { variant, items } = toRefs(props);\n const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n\n const countryItems = useCountryItems(variant, items);\n\n return {\n // Values\n countryItems,\n\n // Methods\n onInput,\n\n // Enums\n BentoCountryVariant,\n };\n },\n });\n</script>\n","<template>\n <bento-dropdown v-slot=\"slotProps\" v-bind=\"$props\" @input=\"onInput\">\n <listbox-option-tag :option=\"slotProps\" />\n </bento-dropdown>\n</template>\n\n<script lang=\"ts\">\n import { defineComponent, PropType } from 'vue';\n import type { BentoCurrencyListboxOptions } from './dropdown-currency.types';\n import type { BentoListboxSelectedValue } from '@/types';\n import { ListboxOptionTag } from '@/internal';\n import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\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 components: {\n BentoDropdown,\n ListboxOptionTag,\n },\n props: {\n ...BentoDropdown.props,\n /\n The option elements to populate the country 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 emits: ['input'],\n setup(_props, { emit }) {\n const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n\n return {\n // Methods\n onInput,\n };\n },\n });\n</script>\n","<template>\n <div>\n <bento-dropdown v-slot=\"{ value, label }\" v-bind=\"$props\" @input=\"onInput\">\n <bento-payment-method :type=\"value\" :label=\"label\" />\n </bento-dropdown>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { defineComponent, PropType } from 'vue';\n import { BentoPaymentMethodListboxOptions } from './dropdown-payment-method.types';\n import { BentoListboxSelectedValue } from '@/types';\n import { BentoPaymentMethod } from '@/components/payment-method';\n import BentoDropdown from '@/components/dropdown/dropdown.vue';\n\n /\n A Payment method Dropdown showing a selectable list of countries.\n \n @example\n * import { BentoDropdownPaymentMethod, BentoPaymentMethodType } 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 === BentoPaymentMethodType.VISA\"\n * :items=\"options\"\n * />\n * `,\n * setup() {\n * const selectedValue = ref(BentoPaymentMethodType.IDEAL) // Default value\n * const options: BentoPaymentMethodListboxOptions = [\n * { label: 'Option 1', value: BentoPaymentMethodType.IDEAL },\n * { label: 'Option 2', value: BentoPaymentMethodType.VISA },\n * ];\n * return { options, selectedValue };\n * }\n * }\n /\n export default defineComponent({\n name: 'bento-dropdown-payment-method',\n components: {\n BentoDropdown,\n BentoPaymentMethod,\n },\n props: {\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 {BentoPaymentMethodType} value.value - Payment type code that\n /\n items: {\n type: Array as PropType<BentoPaymentMethodListboxOptions>,\n default: () => [],\n },\n },\n emits: ['input'],\n setup(_props, { emit }) {\n const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n\n return {\n // Methods\n onInput,\n };\n },\n });\n</script>\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 @input=\"onInput\"\n >\n <listbox-option-tag :option=\"{ value: label, data, label: '' }\" />\n </bento-dropdown>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType } from 'vue';\n import type { BentoTagListboxOptions } from './dropdown-tag.types';\n import type { BentoListboxSelectedValue } from '../../../../../types';\n import { ListboxOptionTag } from '../../../../internal';\n import BentoDropdown from '../../../dropdown.vue';\n\n /\n A Tag Dropdown showing a selectable list of tags.\n \n @example\n * import { BentoDropdownTag, BentoTagVariant } 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: BentoTagVariant.RED },\n * { label: 'Online', value: 'unique-id-2', variant: BentoTagVariant.GREEN },\n * ];\n * return { options, selectedValue };\n * }\n * }\n /\n export default defineComponent({\n name: 'bento-dropdown-tag',\n components: {\n BentoDropdown,\n ListboxOptionTag,\n },\n props: {\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 {BentoTagVariant} value.variant - The BentTag variant shown for the option.\n */\n items: {\n type: Array as PropType<BentoTagListboxOptions>,\n default: () => [],\n },\n },\n emits: ['input'],\n setup(props, { emit }) {\n const onInput = (selectedValue: BentoListboxSelectedValue) => emit('input', selectedValue);\n\n const tagItems = computed(() =>\n props.items?.map(({ label, value, variant }) => ({ label, value, data: variant }))\n );\n\n return {\n // Values\n tagItems,\n\n // Methods\n onInput,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-tag.scss\" />\n"],"names":["_sfc_main$4","defineComponent","BentoDropdown","BentoAvatar","props","emit","onInput","selectedValue","computed","value","label","src","_sfc_main$3","BentoCountry","BentoCountryVariant","variant","items","toRefs","useCountryItems","_sfc_main$2","ListboxOptionTag","_props","_sfc_main$1","BentoPaymentMethod","_sfc_main","_a"],"mappings":"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"}

package/dist/filter-bar.js CHANGED Viewed

@@ -1,38 +1,38 @@
 import { n as T } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
 import { defineComponent as E, computed as i, ref as A, watch as Z, toRef as P, onBeforeUpdate as te, nextTick as pe, reactive as _e, toRefs as Le, onMounted as Me } from "vue";
-import { a as le, B as be } from "./chunks/button.f64585fc.js";
+import { a as le, B as be } from "./chunks/button.c27a7ce2.js";
 import { BentoPopover as ue, BentoPopoverPositions as we } from "./popover.js";
 import { u as Y } from "./chunks/i18n.155748d6.js";
 import { g as ae } from "./chunks/unique-id.a2a2b458.js";
-import { B as ne, a as se, b as oe } from "./chunks/index.e1fcc9e0.js";
+import { B as ne, a as se, b as oe } from "./chunks/index.175f9e2d.js";
 import { u as qe } from "./chunks/aria-label.ac9651a5.js";
 import { u as Ye } from "./chunks/use-has-slot.068222e6.js";
-import { B as He, a as ce } from "./chunks/base-button.e7630a1d.js";
+import { B as He, a as ce } from "./chunks/base-button.d4487ac9.js";
 import { g as je } from "./chunks/get-slot-text.e5c766d0.js";
 import { a as ze, C as Ge } from "./chunks/chevron-down.b851a6da.js";
-import { B as Je } from "./chunks/tooltip.1e7cda50.js";
+import { B as Je } from "./chunks/tooltip.9af34fba.js";
 import { B as Ke } from "./chunks/directive.0408e565.js";
-import { c as ve, B as We } from "./chunks/button-actions.03751d96.js";
+import { c as ve, B as We } from "./chunks/button-actions.cf73ed47.js";
 import { BentoRadioGroup as Qe } from "./radio-group.js";
 import { BentoInputField as ye, BentoInputFieldType as Xe } from "./input-field.js";
 import { BentoSearchBar as X, BentoSearchBarEvent as H } from "./search-bar.js";
 import { u as Ze } from "./chunks/toastController.0e01443d.js";
 import { BentoModal as et, BentoModalEvent as tt, BentoModalSize as lt } from "./modal.js";
-import { B as at, u as me } from "./chunks/dropdown.e298bb6c.js";
-import { g as nt } from "./chunks/index.96e2f563.js";
+import { B as at, u as me } from "./chunks/dropdown.368486b1.js";
+import { g as nt } from "./chunks/index.ad39b625.js";
 import { BentoDivider as Fe } from "./divider.js";
 import { BentoDatePicker as st } from "./date-picker.js";
-import { f as K } from "./chunks/index.8d590c55.js";
+import { f as K } from "./chunks/index.d07f9800.js";
 import { e as q, d as Be, f as he } from "./chunks/index.f55fdc32.js";
-import { C as ot } from "./chunks/calendar.c9cfce76.js";
-import { B as rt, D as it } from "./chunks/index.bc51abe9.js";
+import { C as ot } from "./chunks/calendar.8f50a65a.js";
+import { B as rt, D as it } from "./chunks/index.f0d99471.js";
 import { D as de } from "./chunks/date-input.9186a0bf.js";
-import { B as ut } from "./chunks/listbox.99d23071.js";
-import { B as ct, L as ge } from "./chunks/listbox-option-tag.aae99730.js";
+import { B as ut } from "./chunks/listbox.f51e92cd.js";
+import { B as ct, L as ge } from "./chunks/listbox-option-tag.c7e9a228.js";
 import { BentoCountry as dt, BentoCountryVariant as Ce } from "./country.js";
 import { u as ft } from "./chunks/useCountryItems.5d7b436e.js";
 import { BentoPaymentMethod as pt } from "./payment-method.js";
-import "./assets/index29.css";
+import "./assets/index28.css";
 var r = /* @__PURE__ */ ((t) => (t.INPUT = "input", t.UPDATE = "update", t))(r || {}), M = /* @__PURE__ */ ((t) => (t.INPUT = "input", t))(M || {}), R = /* @__PURE__ */ ((t) => (t.INPUT = "BentoInputFilter", t.BOOLEAN = "BentoBooleanFilter", t.RANGE = "BentoRangeFilter", t.SELECT = "BentoSelectFilter", t.SELECT_AVATAR = "BentoSelectAvatarFilter", t.SELECT_COUNTRY = "BentoSelectCountryFilter", t.SELECT_CURRENCY = "BentoSelectCurrencyFilter", t.SELECT_PAYMENT_METHOD = "BentoSelectPaymentMethodFilter", t.SELECT_TAG = "BentoSelectTagFilter", t.DATE = "BentoDateFilter", t.DATE_RANGE = "BentoDateRangeFilter", t))(R || {});
 const _t = E({
   name: "base-filter-button",