npm - @adyen/bento-vue3 - Versions diffs - 1.108.0 → 1.108.2 - Mend

@adyen/bento-vue3 1.108.0 → 1.108.2

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

Files changed (80) hide show

package/dist/chunks/{dropdown-tag.B8nYIdkZ.js.map → dropdown-tag.7plhjvUU.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown-tag.B8nYIdkZ.js","sources":["../../../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue","../../../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue","../../../vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue","../../../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue","../../../vue2/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<{\n /\n Emitted when an option is clicked. Updates the selected option from the \"value\" property linked to the v-model.\n * @deprecated Since v2.0.0. Use `v-model` or `update:model-value` instead.\n /\n (e: 'input', selectedValue: BentoListboxSelectedValue);\n\n /\n Emitted when an option is clicked. Updates the selected option from the \"modelValue\" property linked to the v-model.\n /\n (e: 'update:model-value', selectedValue: BentoListboxSelectedValue);\n\n /\n Emitted when:\n * - `lazyLoad` is `automatic` and the scroll meets the end of the list\n * - `lazyload` is `button` and the button is clicked\n /\n (e: 'show-more');\n\n /\n Emitted when the dropdown is opened.\n /\n (e: 'open');\n }>();\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<{\n /\n Emitted when an option is clicked. Updates the selected option from the \"value\" property linked to the v-model.\n * @deprecated Since v2.0.0. Use `v-model` or `update:model-value` instead.\n /\n (e: 'input', selectedValue: BentoListboxSelectedValue);\n\n /\n Emitted when an option is clicked. Updates the selected option from the \"modelValue\" property linked to the v-model.\n /\n (e: 'update:model-value', selectedValue: BentoListboxSelectedValue);\n\n /\n Emitted when:\n * - `lazyLoad` is `automatic` and the scroll meets the end of the list\n * - `lazyload` is `button` and the button is clicked\n /\n (e: 'show-more');\n\n /\n Emitted when the dropdown is opened.\n /\n (e: 'open');\n }>();\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<{\n /\n Emitted when an option is clicked. Updates the selected option from the \"value\" property linked to the v-model.\n * @deprecated Since v2.0.0. Use `v-model` or `update:model-value` instead.\n /\n (e: 'input', selectedValue: BentoListboxSelectedValue);\n\n /\n Emitted when an option is clicked. Updates the selected option from the \"modelValue\" property linked to the v-model.\n /\n (e: 'update:model-value', selectedValue: BentoListboxSelectedValue);\n\n /\n Emitted when:\n * - `lazyLoad` is `automatic` and the scroll meets the end of the list\n * - `lazyload` is `button` and the button is clicked\n /\n (e: 'show-more');\n\n /\n Emitted when the dropdown is opened.\n /\n (e: 'open');\n }>();\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<{\n /\n Emitted when an option is clicked. Updates the selected option from the \"value\" property linked to the v-model.\n * @deprecated Since v2.0.0. Use `v-model` or `update:model-value` instead.\n /\n (e: 'input', selectedValue: BentoListboxSelectedValue);\n\n /\n Emitted when an option is clicked. Updates the selected option from the \"modelValue\" property linked to the v-model.\n /\n (e: 'update:model-value', selectedValue: BentoListboxSelectedValue);\n\n /\n Emitted when:\n * - `lazyLoad` is `automatic` and the scroll meets the end of the list\n * - `lazyload` is `button` and the button is clicked\n /\n (e: 'show-more');\n\n /\n Emitted when the dropdown is opened.\n /\n (e: 'open');\n }>();\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<{\n /\n Emitted when an option is clicked. Updates the selected option from the \"value\" property linked to the v-model.\n * @deprecated Since v2.0.0. Use `v-model` or `update:model-value` instead.\n /\n (e: 'input', selectedValue: BentoListboxSelectedValue);\n\n /\n Emitted when an option is clicked. Updates the selected option from the \"modelValue\" property linked to the v-model.\n /\n (e: 'update:model-value', selectedValue: BentoListboxSelectedValue);\n\n /\n Emitted when:\n * - `lazyLoad` is `automatic` and the scroll meets the end of the list\n * - `lazyload` is `button` and the button is clicked\n /\n (e: 'show-more');\n\n /\n Emitted when the dropdown is opened.\n /\n (e: 'open');\n }>();\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","props","__props","emit","__emit","emitValue","useFormFieldEmits","onUpdateModelValue","selectedValue","dropdownItems","computed","value","label","src","deprecate","__default__$3","variant","items","toRefs","countryItems","useCountryItems","item","__default__$2","filteredItems","ref","watch","search","searchTerm","searchableItems","normalizedResults","useSearchBarFilter","result","__default__$1","__default__","tagItems"],"mappings":"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"}
1	+ {"version":3,"file":"dropdown-tag.7plhjvUU.js","sources":["../../../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue","../../../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue","../../../vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue","../../../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue","../../../vue2/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<{\n /\n Emitted when an option is clicked. Updates the selected option from the \"value\" property linked to the v-model.\n * @deprecated Since v2.0.0. Use `v-model` or `update:model-value` instead.\n /\n (e: 'input', selectedValue: BentoListboxSelectedValue);\n\n /\n Emitted when an option is clicked. Updates the selected option from the \"modelValue\" property linked to the v-model.\n /\n (e: 'update:model-value', selectedValue: BentoListboxSelectedValue);\n\n /\n Emitted when:\n * - `lazyLoad` is `automatic` and the scroll meets the end of the list\n * - `lazyload` is `button` and the button is clicked\n /\n (e: 'show-more');\n\n /\n Emitted when the dropdown is opened.\n /\n (e: 'open');\n }>();\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<{\n /\n Emitted when an option is clicked. Updates the selected option from the \"value\" property linked to the v-model.\n * @deprecated Since v2.0.0. Use `v-model` or `update:model-value` instead.\n /\n (e: 'input', selectedValue: BentoListboxSelectedValue);\n\n /\n Emitted when an option is clicked. Updates the selected option from the \"modelValue\" property linked to the v-model.\n /\n (e: 'update:model-value', selectedValue: BentoListboxSelectedValue);\n\n /\n Emitted when:\n * - `lazyLoad` is `automatic` and the scroll meets the end of the list\n * - `lazyload` is `button` and the button is clicked\n /\n (e: 'show-more');\n\n /\n Emitted when the dropdown is opened.\n /\n (e: 'open');\n }>();\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<{\n /\n Emitted when an option is clicked. Updates the selected option from the \"value\" property linked to the v-model.\n * @deprecated Since v2.0.0. Use `v-model` or `update:model-value` instead.\n /\n (e: 'input', selectedValue: BentoListboxSelectedValue);\n\n /\n Emitted when an option is clicked. Updates the selected option from the \"modelValue\" property linked to the v-model.\n /\n (e: 'update:model-value', selectedValue: BentoListboxSelectedValue);\n\n /\n Emitted when:\n * - `lazyLoad` is `automatic` and the scroll meets the end of the list\n * - `lazyload` is `button` and the button is clicked\n /\n (e: 'show-more');\n\n /\n Emitted when the dropdown is opened.\n /\n (e: 'open');\n }>();\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<{\n /\n Emitted when an option is clicked. Updates the selected option from the \"value\" property linked to the v-model.\n * @deprecated Since v2.0.0. Use `v-model` or `update:model-value` instead.\n /\n (e: 'input', selectedValue: BentoListboxSelectedValue);\n\n /\n Emitted when an option is clicked. Updates the selected option from the \"modelValue\" property linked to the v-model.\n /\n (e: 'update:model-value', selectedValue: BentoListboxSelectedValue);\n\n /\n Emitted when:\n * - `lazyLoad` is `automatic` and the scroll meets the end of the list\n * - `lazyload` is `button` and the button is clicked\n /\n (e: 'show-more');\n\n /\n Emitted when the dropdown is opened.\n /\n (e: 'open');\n }>();\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<{\n /\n Emitted when an option is clicked. Updates the selected option from the \"value\" property linked to the v-model.\n * @deprecated Since v2.0.0. Use `v-model` or `update:model-value` instead.\n /\n (e: 'input', selectedValue: BentoListboxSelectedValue);\n\n /\n Emitted when an option is clicked. Updates the selected option from the \"modelValue\" property linked to the v-model.\n /\n (e: 'update:model-value', selectedValue: BentoListboxSelectedValue);\n\n /\n Emitted when:\n * - `lazyLoad` is `automatic` and the scroll meets the end of the list\n * - `lazyload` is `button` and the button is clicked\n /\n (e: 'show-more');\n\n /\n Emitted when the dropdown is opened.\n /\n (e: 'open');\n }>();\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","props","__props","emit","__emit","emitValue","useFormFieldEmits","onUpdateModelValue","selectedValue","dropdownItems","computed","value","label","src","deprecate","__default__$3","variant","items","toRefs","countryItems","useCountryItems","item","__default__$2","filteredItems","ref","watch","search","searchTerm","searchableItems","normalizedResults","useSearchBarFilter","result","__default__$1","__default__","tagItems"],"mappings":"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"}

package/dist/chunks/{dropdown.DIuBwxF-.js → dropdown.ByQDIs7p.js} RENAMED Viewed

@@ -1,30 +1,30 @@
 import { computed as r, ref as A, onMounted as Qt, onUnmounted as el, watch as ye, defineComponent as Q, resolveComponent as H, openBlock as b, createElementBlock as L, createVNode as W, withCtx as M, createTextVNode as oe, toDisplayString as Y, createElementVNode as X, renderSlot as J, mergeProps as z, withKeys as ge, createCommentVNode as q, createBlock as F, withModifiers as Ee, normalizeProps as fe, guardReactiveProps as we, withDirectives as Se, vShow as Ue, nextTick as pe, toRef as ue, resolveDirective as wt, toHandlers as ve, Fragment as he, renderList as de, createSlots as Ie, normalizeClass as Oe, unref as f, useSlots as Ke, useAttrs as ft, toRefs as At, resolveDynamicComponent as $t, inject as vt } from "vue";
 import { B as Ne, d as ct } from "./typography.wIM07Hbl.js";
 import { g as Me } from "./generate-uid.DBWe4g6T.js";
+import { u as tl } from "./aria-label.CaUURpnB.js";
 import { u as Pe } from "./index.B875RXHM.js";
-import { s as Ve } from "./events.BQOQSSb7.js";
+import { u as ll } from "./form-field.D_2g7vaP.js";
+import { u as al } from "./use-form-layout-loading.CWbjZiwP.js";
 import { u as kt } from "./use-has-slot.CyMiImRQ.js";
-import { C as tl } from "./cross-circle-fill.BWCKKn0E.js";
-import { C as ll } from "./cross-circle-fill-small.H1wH-vcZ.js";
-import { _ as te } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { C as _t } from "./chevron-down.XeE-LBV_.js";
-import { C as Dt } from "./chevron-up.Cmgl2a3x.js";
-/* empty css              */
-import { u as al } from "./aria-label.CaUURpnB.js";
-import { u as ol } from "./form-field.D_2g7vaP.js";
-import { u as sl } from "./use-form-layout-loading.CWbjZiwP.js";
-import { B as nl } from "./directive.D1-d-C2K.js";
+import { B as ol } from "./directive.D1-d-C2K.js";
 import { B as ee, a as Ye } from "./keyboard-navigation.DWmhelVv.js";
-import { B as xt } from "./loading-indicator.BPol9I84.js";
-import { B as Bt } from "./empty-state.CcmkgiUA.js";
-import { o as il } from "./resize.Bqks3WUm.js";
-import { B as lt, N as rl } from "./minus-small.BZ-ZyAWF.js";
-import { C as dl } from "./checkmark-small.CRuZauJc.js";
-import { B as ul } from "./chip.BJq22P-k.js";
-import { b as at, a as cl, h as pl, e as bl } from "./button-actions.iIMUk8Vx.js";
-import { F as fl } from "./field-label.B3HF2C1r.js";
+import { B as _t } from "./loading-indicator.BPol9I84.js";
+import { B as Dt } from "./empty-state.CcmkgiUA.js";
+import { o as sl } from "./resize.Bqks3WUm.js";
+import { B as lt, N as nl } from "./minus-small.BZ-ZyAWF.js";
+import { C as il } from "./checkmark-small.CRuZauJc.js";
+/* empty css              */
+import { _ as te } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { B as rl } from "./chip.BJq22P-k.js";
+import { C as xt } from "./chevron-down.XeE-LBV_.js";
+import { C as Bt } from "./chevron-up.Cmgl2a3x.js";
+import { b as at, a as dl, h as ul, e as cl } from "./button-actions.iIMUk8Vx.js";
+import { F as pl } from "./field-label.B3HF2C1r.js";
 import { P as St } from "./popper-container.CiDvPvKf.js";
-import { E as vl } from "./error-message.ROkM72Gh.js";
+import { E as bl } from "./error-message.ROkM72Gh.js";
+import { s as Ve } from "./events.BQOQSSb7.js";
+import { C as fl } from "./cross-circle-fill.BWCKKn0E.js";
+import { C as vl } from "./cross-circle-fill-small.H1wH-vcZ.js";
 import "../assets/dropdown.css";
 const Rt = (e, a, n, l) => {
   const i = r(
@@ -82,7 +82,7 @@ function ml(e, { disabled: a, itemHeight: n, overscan: l = 5, prefixHeight: i })
     C();
   };
   a || (Qt(() => {
-    s.value && (u.value = s.value.clientHeight, c = il(s.value, ({ clientHeight: w }) => {
+    s.value && (u.value = s.value.clientHeight, c = sl(s.value, ({ clientHeight: w }) => {
       u.value = w, C();
     }), C());
   }), el(() => {
@@ -689,7 +689,7 @@ const Pl = /* @__PURE__ */ te(Rl, [["render", Nl]]), Fl = {}, zl = /* @__PURE__
       class: Oe(["b-checkbox-input", n.value]),
       role: "presentation"
     }, [
-      i.indeterminate ? (b(), F(f(rl), {
+      i.indeterminate ? (b(), F(f(nl), {
         key: 0,
         class: "b-checkbox-input__icon",
         "svg-title": "",
@@ -700,7 +700,7 @@ const Pl = /* @__PURE__ */ te(Rl, [["render", Nl]]), Fl = {}, zl = /* @__PURE__
         "svg-title": "",
         "aria-hidden": "true",
         "data-testid": "decorative-checkbox-double-checkmark-icon"
-      })) : i.checked ? (b(), F(f(dl), {
+      })) : i.checked ? (b(), F(f(il), {
         key: 2,
         class: "b-checkbox-input__icon",
         "svg-title": "",
@@ -748,7 +748,7 @@ const Ft = {
       () => n.loading ? at.LOADING : at.START
     ), s = r(() => n.loading ? a("loading") : a("showMore"));
     return (t, o) => l.value || t.loading ? (b(), L("div", Vl, [
-      l.value ? (b(), F(f(cl), {
+      l.value ? (b(), F(f(dl), {
         key: 0,
         state: i.value,
         tabindex: t.tabindex,
@@ -760,7 +760,7 @@ const Ft = {
           oe(Y(s.value), 1)
         ]),
         _: 1
-      }, 8, ["state", "tabindex", "condensed"])) : t.loading ? (b(), F(f(xt), { key: 1 })) : q("", !0)
+      }, 8, ["state", "tabindex", "condensed"])) : t.loading ? (b(), F(f(_t), { key: 1 })) : q("", !0)
     ])) : q("", !0);
   }
 }), zt = /* @__PURE__ */ te(Ul, [["__scopeId", "data-v-ae5fccad"]]), Vt = {
@@ -812,7 +812,7 @@ const Ft = {
         ge(Ee(t, ["prevent"]), ["space"])
       ]
     }, [
-      l.value ? (b(), F(f(Bt), {
+      l.value ? (b(), F(f(Dt), {
         key: 0,
         variant: "basic",
         class: "b-listbox-multi-select-nested-lazy-load__error-message"
@@ -851,8 +851,8 @@ const Ft = {
     BentoTypography: Ne,
     BentoListboxOption: ot,
     BentoListboxMultiSelectNestedLazyLoad: Yl,
-    ChevronDownIcon: _t,
-    ChevronUpIcon: Dt,
+    ChevronDownIcon: xt,
+    ChevronUpIcon: Bt,
     DecorativeCheckbox: yt
   },
   props: {
@@ -1499,7 +1499,7 @@ const sa = /* @__PURE__ */ te(ta, [["render", oa], ["__scopeId", "data-v-dba55b0
           (b(!0), L(he, null, de($e.value, (E) => (b(), L("li", {
             key: E.value
           }, [
-            W(f(ul), {
+            W(f(rl), {
               ref_for: !0,
               ref_key: "selectedListboxItemsRef",
               ref: p,
@@ -1586,11 +1586,11 @@ const sa = /* @__PURE__ */ te(ta, [["render", oa], ["__scopeId", "data-v-dba55b0
 }, ca = 36, pa = Q({
   name: "bento-listbox",
   components: {
-    BentoEmptyState: Bt,
+    BentoEmptyState: Dt,
     BentoListboxSingleSelect: Bl,
     BentoListboxMultiSelect: Et,
     BentoTypography: Ne,
-    BentoLoadingIndicator: xt,
+    BentoLoadingIndicator: _t,
     BentoListboxLazyLoad: zt
   },
   directives: { BentoKeyboardNavigationDirective: Ye },
@@ -2117,7 +2117,7 @@ const gt = {
       "b-dropdown-options-container--single": !s?.multiple
     })), v = r(() => ({
       "b-dropdown-options-container__listbox--single": !s?.multiple
-    })), { actions: C, internalSelectedValue: P, listeners: k, onEscapeKey: x, onOutsideDropdownClick: w } = ha(t, o, c, i), _ = r(() => s?.multiple ? pl : St), T = r(() => {
+    })), { actions: C, internalSelectedValue: P, listeners: k, onEscapeKey: x, onOutsideDropdownClick: w } = ha(t, o, c, i), _ = r(() => s?.multiple ? ul : St), T = r(() => {
       const O = {
         "min-width": `${s?.targetElement?.clientWidth}px`,
         "max-width": "min(500px, 95%)"
@@ -2481,10 +2481,10 @@ const Ia = /* @__PURE__ */ Symbol("dropdown small size injection key"), Wt = /*
             onKeydown: ge(Ee(ie, ["stop"]), ["enter"]),
             onKeyup: ge(ie, ["space"])
           }, [
-            e.size === f(Ge).SMALL ? (b(), F(f(ll), {
+            e.size === f(Ge).SMALL ? (b(), F(f(vl), {
               key: 0,
               "svg-title": f(l)("clearSearch")
-            }, null, 8, ["svg-title"])) : (b(), F(f(tl), {
+            }, null, 8, ["svg-title"])) : (b(), F(f(fl), {
               key: 1,
               "svg-title": f(l)("clearSearch")
             }, null, 8, ["svg-title"]))
@@ -2633,10 +2633,10 @@ const Ia = /* @__PURE__ */ Symbol("dropdown small size injection key"), Wt = /*
       }, ve(C)), Ie({
         icon: M(() => [
           X("div", Ba, [
-            Se(W(f(Dt), { "svg-title": "opened" }, null, 512), [
+            Se(W(f(Bt), { "svg-title": "opened" }, null, 512), [
               [Ue, m.value]
             ]),
-            Se(W(f(_t), { "svg-title": "closed" }, null, 512), [
+            Se(W(f(xt), { "svg-title": "closed" }, null, 512), [
               [Ue, !m.value]
             ])
           ])
@@ -3001,12 +3001,12 @@ const Ht = {
   },
   emits: ["input", "update:model-value", "show-more", "open"],
   setup(e, { expose: a, emit: n }) {
-    const l = ft(), i = Ke(), s = kt(i), t = e, o = n, { t: m } = Pe({ messages: Ht }), { emitValue: u } = ol(o), c = A(null), d = A(null), p = A(null), v = A(!1), C = A(!1), P = Me("bento-dropdown-options-container"), k = Me("dropdown-label"), x = Me("dropdown-description"), w = Me("dropdown-error"), { isReadOnly: _ } = sl(ue(t, "readonly")), T = r(() => t.modelValue ?? t.value), { cachedSelectedListboxOptions: O, cachedListboxSelectedValues: N, setCachedValues: B } = ga(
+    const l = ft(), i = Ke(), s = kt(i), t = e, o = n, { t: m } = Pe({ messages: Ht }), { emitValue: u } = ll(o), c = A(null), d = A(null), p = A(null), v = A(!1), C = A(!1), P = Me("bento-dropdown-options-container"), k = Me("dropdown-label"), x = Me("dropdown-description"), w = Me("dropdown-error"), { isReadOnly: _ } = al(ue(t, "readonly")), T = r(() => t.modelValue ?? t.value), { cachedSelectedListboxOptions: O, cachedListboxSelectedValues: N, setCachedValues: B } = ga(
       ue(t, "items"),
       T,
       ue(t, "multiple"),
       ue(t, "enableValueLabelPair")
-    ), V = A(l["aria-label"]), se = A(l["aria-describedby"]), { ariaLabel: ne, label: R } = At(t), D = r(() => m("ariaLabelFallback")), K = al({
+    ), V = A(l["aria-label"]), se = A(l["aria-describedby"]), { ariaLabel: ne, label: R } = At(t), D = r(() => m("ariaLabelFallback")), K = tl({
       // TODO: take ariaLabel ref away when aria-label prop is removed
       ariaLabel: ne.value || V,
       label: R,
@@ -3155,7 +3155,7 @@ const Ht = {
     }), (h, Te) => Se((b(), L("div", {
       class: Oe(["b-dropdown", ie.value])
     }, [
-      f(R) ? (b(), F(f(fl), {
+      f(R) ? (b(), F(f(pl), {
         key: 0,
         id: f(k),
         condensed: h.condensed,
@@ -3214,7 +3214,7 @@ const Ht = {
       ], 16)), [
         [f(Ye)]
       ]),
-      c.value ? (b(), F(f(bl), {
+      c.value ? (b(), F(f(cl), {
         key: 1,
         disabled: h.teleport?.disabled,
         to: h.teleport?.to
@@ -3252,7 +3252,7 @@ const Ht = {
         ]),
         _: 3
       }, 8, ["disabled", "to"])) : q("", !0),
-      h.errorMessage ? (b(), F(f(vl), {
+      h.errorMessage ? (b(), F(f(bl), {
         key: 2,
         id: f(w),
         "error-message": h.errorMessage,
@@ -3272,7 +3272,7 @@ const Ht = {
         _: 3
       }, 8, ["id", "class"])) : q("", !0)
     ], 2)), [
-      [f(nl), G.value]
+      [f(ol), G.value]
     ]);
   }
 }), Do = /* @__PURE__ */ te(ao, [["__scopeId", "data-v-df996f26"]]);
@@ -3292,4 +3292,4 @@ export {
   yt as j,
   ga as u
 };
-//# sourceMappingURL=dropdown.DIuBwxF-.js.map
+//# sourceMappingURL=dropdown.ByQDIs7p.js.map