npm - maz-ui - Versions diffs - 4.0.0-alpha.4 → 4.0.0-alpha.5 - Mend

maz-ui 4.0.0-alpha.4 → 4.0.0-alpha.5

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 (435) hide show

package/dist/chunks/MazDropdown.vue_vue_type_script_setup_true_lang.B5kO0VJW.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MazDropdown.vue_vue_type_script_setup_true_lang.B5kO0VJW.mjs","sources":["../../src/components/MazDropdown.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { MazLinkProps } from '@components/MazLink.vue'\nimport type { Color, Icon, Position, Size } from '@components/types'\nimport type { RouteLocationRaw } from 'vue-router'\nimport { useInstanceUniqId } from '@composables/useInstanceUniqId'\nimport { vClickOutside } from '@directives/vClickOutside'\nimport { debounce } from '@helpers/debounce'\nimport { computed, defineAsyncComponent, type HTMLAttributes, ref, watch } from 'vue'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MazDropdownProps>(), {\n class: undefined,\n style: undefined,\n id: undefined,\n items: () => [],\n trigger: 'both',\n color: 'transparent',\n position: 'bottom left',\n screenReaderDescription: 'Open menu dropdown',\n dropdownIconAnimation: true,\n size: 'md',\n})\nconst emits = defineEmits<{\n /*\n emitted when a menu item is clicked\n * @property {Event} event - the click event\n /\n 'menuitem-clicked': [event: Event]\n /\n Triggers when the number changes\n * @property {boolean} open new value\n /\n 'update:open': [value: boolean]\n}>()\n\nconst MazBtn = defineAsyncComponent(() => import('@components/MazBtn.vue'))\nconst MazIcon = defineAsyncComponent(() => import('@components/MazIcon.vue'))\nconst MazLink = defineAsyncComponent(() => import('@components/MazLink.vue'))\n\nconst instanceId = useInstanceUniqId({\n componentName: 'MazDropdown',\n providedId: props.id,\n})\n\ntype ItemBase = Record<string, unknown> & {\n label: string\n class?: unknown\n color?: Color\n}\n\ntype LinkItem = ItemBase & MazLinkProps & {\n target?: string\n href?: string\n to?: RouteLocationRaw\n}\n\ntype ActionItem = ItemBase & {\n action?: () => unknown\n}\n\nexport type MenuItem =\n \| (LinkItem & { action?: never })\n \| (ActionItem & { href?: never, to?: never, target?: never })\n\nexport interface MazDropdownProps {\n /* Style object /\n style?: HTMLAttributes['style']\n /* Class name /\n class?: HTMLAttributes['class']\n /\n Menu items\n * @default '[]'\n /\n items?: MenuItem[]\n /* Menu should be open? /\n open?: boolean\n /* id of the menu /\n id?: string\n /\n Should open the dropdown on click, hover or both\n * @default 'both'\n /\n trigger?: 'click' \| 'hover' \| 'both'\n /\n Button color\n * @default 'transparent'\n /\n color?: Color\n /\n Position of the dropdown\n * @default 'bottom left'\n /\n position?: Position\n /* Disable close menu on menuitem clicked /\n noCloseOnClick?: boolean\n /* Disable menu /\n disabled?: boolean\n /* Remove chevron icon in main button /\n noChevron?: boolean\n /\n Description read by screen reader (accessibility)\n * @default 'Open menu dropdown'\n /\n screenReaderDescription?: string\n /\n Class for the menu panel - useful for custom dropdown panel (background, border, etc.)\n /\n menuPanelClass?: HTMLAttributes['class']\n /\n Style for the menu panel - useful for custom dropdown panel (background, border, etc.)\n * You may use `!important` to override the default style\n /\n menuPanelStyle?: HTMLAttributes['style']\n /\n If true, the button will have a full width\n /\n block?: boolean\n /\n Custom dropdown icon\n * You can use a string to define the icon name or a Vue component\n * @default undefined\n /\n dropdownIcon?: string \| Icon\n /\n If true, the dropdown icon will rotate when the dropdown is open\n * @default true\n /\n dropdownIconAnimation?: boolean\n /\n Size of the button\n * @default 'md'\n */\n size?: Size\n}\n\nconst ChevronDownIcon = defineAsyncComponent(() => import('@icons/chevron-down.svg'))\n\nconst dropdownOpen = ref(props.open)\nconst keyboardSelectedIndex = ref<number>()\n\nconst iconClassSize = computed(() => {\n if (props.size === 'xl')\n return 'maz-text-lg'\n if (props.size === 'lg')\n return 'maz-text-base'\n if (props.size === 'md')\n return 'maz-text-base'\n if (props.size === 'sm')\n return 'maz-text-base'\n if (props.size === 'xs')\n return 'maz-text-sm'\n if (props.size === 'mini')\n return 'maz-text-sm'\n return 'maz-text-lg'\n})\n\nconst setDropdownDebounced = debounce((value: boolean) => {\n setDropdown(value)\n}, 200)\n\nfunction onClickOutside() {\n if (dropdownOpen.value) {\n setDropdown(false)\n }\n}\n\nfunction toggleDropdown() {\n setDropdown(!dropdownOpen.value)\n}\n\nfunction onElementClick() {\n if (['click'].includes(props.trigger))\n toggleDropdown()\n}\nfunction onElementFocus() {\n if (['hover', 'both'].includes(props.trigger))\n setDropdown(true)\n}\nfunction onElementMouseenter() {\n if (['hover', 'both'].includes(props.trigger)) {\n if (dropdownOpen.value === false) {\n setDropdown(true)\n }\n else {\n setDropdownDebounced(true)\n }\n }\n}\nfunction onElementMouseleave() {\n if (['hover', 'both'].includes(props.trigger)) {\n setDropdownDebounced(false)\n }\n}\nfunction onElementBlur() {\n setDropdownDebounced(false)\n}\n\nfunction setDropdown(value: boolean) {\n if (props.disabled)\n return\n\n dropdownOpen.value = value\n emits('update:open', value)\n}\n\nfunction isActionItem(item: MenuItem): item is ActionItem {\n return 'action' in item\n}\n\nfunction isLinkItem(item: MenuItem): item is LinkItem {\n return 'href' in item \|\| 'to' in item\n}\n\nasync function runAction(item: ActionItem, event: Event) {\n emits('menuitem-clicked', event)\n\n await item.action?.()\n\n if (!props.noCloseOnClick) {\n closeOnClick()\n }\n}\n\nfunction closeOnClick() {\n if (props.noCloseOnClick === false)\n setDropdown(false)\n}\n\nfunction keydownHandler(event: KeyboardEvent) {\n if (event.key === 'Escape') {\n event.preventDefault()\n setDropdown(false)\n }\n else if (['ArrowDown', 'ArrowUp'].includes(event.key)) {\n arrowHandler(event)\n }\n else if (event.key === 'Enter' && typeof keyboardSelectedIndex.value === 'number') {\n event.preventDefault()\n const item = document.querySelectorAll(`#${instanceId.value} .menuitem`)[\n keyboardSelectedIndex.value\n ] as HTMLElement\n\n item.click()\n\n closeOnClick()\n }\n}\n\nfunction keyboardOpenDropdown(event: KeyboardEvent) {\n if (['ArrowDown', 'ArrowUp', 'Enter'].includes(event.key) && dropdownOpen.value === false) {\n event.preventDefault()\n setDropdown(true)\n }\n}\n\nfunction arrowHandler(event: KeyboardEvent) {\n event.preventDefault()\n const code = event.key\n\n if (!dropdownOpen.value)\n setDropdown(true)\n\n const itemLength = props.items?.length\n\n if (!itemLength)\n return\n\n if (typeof keyboardSelectedIndex.value === 'number') {\n if (keyboardSelectedIndex.value === itemLength - 1 && code === 'ArrowDown') {\n keyboardSelectedIndex.value = 0\n }\n else if (keyboardSelectedIndex.value === 0 && code === 'ArrowUp') {\n keyboardSelectedIndex.value = itemLength - 1\n }\n else {\n keyboardSelectedIndex.value\n = code === 'ArrowDown' ? keyboardSelectedIndex.value + 1 : keyboardSelectedIndex.value - 1\n }\n }\n else {\n keyboardSelectedIndex.value = code === 'ArrowDown' ? 0 : itemLength - 1\n }\n}\n\nwatch(\n () => dropdownOpen.value,\n (value) => {\n if (value) {\n document.addEventListener('keydown', keydownHandler)\n }\n else {\n document.removeEventListener('keydown', keydownHandler)\n }\n\n keyboardSelectedIndex.value = undefined\n },\n)\nwatch(\n () => props.open,\n value => setDropdown(value),\n)\n</script>\n\n<template>\n <div\n :id=\"instanceId\"\n v-click-outside=\"onClickOutside\"\n class=\"m-dropdown m-reset-css\"\n :style\n :class=\"[props.class, { '--block': block }]\"\n >\n <div\n role=\"button\"\n tabindex=\"0\"\n class=\"m-dropdown__wrapper\"\n :aria-expanded=\"dropdownOpen\"\n aria-haspopup=\"menu\"\n @click.stop=\"onElementClick\"\n @focus=\"onElementFocus\"\n @blur=\"onElementBlur\"\n @keydown=\"keyboardOpenDropdown\"\n @mouseenter=\"onElementMouseenter\"\n @mouseleave=\"onElementMouseleave\"\n >\n <span v-if=\"screenReaderDescription \|\| $slots['screen-reader-description']\" :id=\"`${instanceId}-labelspan`\" class=\"maz-sr-only\">\n <!-- @slot Description for screen reader (hidden) -->\n <slot name=\"screen-reader-description\">\n {{ screenReaderDescription }}\n </slot>\n </span>\n <!--\n @slot Custom Element\n @binding {Boolen} is-open - dropdown open state\n @default `<MazBtn />`\n -->\n <slot name=\"element\" :is-open=\"dropdownOpen\">\n <MazBtn\n :aria-labelledby=\"`${instanceId}-labelspan`\"\n :color\n :disabled\n v-bind=\"$attrs\"\n tabindex=\"-1\"\n :block\n :size\n >\n <slot />\n\n <template v-if=\"!noChevron\" #right-icon>\n <!--\n @slot Custom dropdown icon\n @binding {Boolean} is-open - dropdown open state\n @default `<ChevronDownIcon />`\n -->\n <slot name=\"dropdown-icon\" :is-open=\"dropdownOpen\">\n <MazIcon v-if=\"typeof dropdownIcon === 'string'\" :name=\"dropdownIcon\" :class=\"[{ '--open': dropdownOpen && dropdownIconAnimation }, iconClassSize]\" />\n <Component\n :is=\"dropdownIcon\" v-else-if=\"dropdownIcon\" :class=\"[{ '--open': dropdownOpen && dropdownIconAnimation }, iconClassSize]\"\n class=\"m-dropdown__icon\"\n />\n <ChevronDownIcon\n v-else\n :class=\"[{ '--open': dropdownOpen && dropdownIconAnimation }, iconClassSize]\"\n class=\"m-dropdown__icon\"\n />\n </slot>\n </template>\n </MazBtn>\n </slot>\n </div>\n\n <Transition name=\"maz-scale-fade\">\n <div\n v-show=\"dropdownOpen\"\n role=\"menu\"\n aria-label=\"Menu\"\n class=\"menu\"\n tabindex=\"-1\"\n :class=\"[{\n '--top': position.includes('top'),\n '--left': position.includes('left'),\n '--right': position.includes('right'),\n '--bottom': position.includes('bottom'),\n }, menuPanelClass]\"\n :style=\"menuPanelStyle\"\n @focus=\"setDropdownDebounced(true)\"\n @blur=\"setDropdownDebounced(false)\"\n @mouseenter=\"['hover', 'both'].includes(trigger) ? setDropdownDebounced(true) : undefined\"\n @mouseleave=\"['hover', 'both'].includes(trigger) ? setDropdownDebounced(false) : undefined\"\n >\n <!--\n @slot Custom dropdown panel\n @binding {Array} items - items prop data\n -->\n <slot name=\"dropdown\" :items=\"items\">\n <template v-for=\"(item, index) in items\" :key=\"index\">\n <!--\n @slot Custom menu item\n @binding {MenuItem} item - menu item\n -->\n <slot name=\"menuitem\" :item=\"item\">\n <template v-if=\"isLinkItem(item)\">\n <MazLink\n :target=\"item.href ? item.target ?? '_self' : undefined\"\n :to=\"item.to\"\n :href=\"item.href\"\n :color=\"item.color ?? 'theme'\"\n v-bind=\"item\"\n :underline-only-hover=\"item.underlineOnlyHover ?? false\"\n class=\"menuitem\"\n tabindex=\"-1\"\n :class=\"[\n {\n '--is-keyboard-selected': keyboardSelectedIndex === index,\n },\n item.class,\n ]\"\n @click.stop=\"closeOnClick\"\n >\n <!--\n @slot Custom label for menu item\n @binding {MenuItem} - item menu item\n -->\n <slot name=\"menuitem-label\" :item=\"item\">\n {{ item.label }}\n </slot>\n </MazLink>\n </template>\n <template v-else-if=\"isActionItem(item)\">\n <button\n tabindex=\"-1\"\n type=\"button\"\n v-bind=\"item\"\n class=\"menuitem menuitem__button\"\n :class=\"[\n {\n '--is-keyboard-selected': keyboardSelectedIndex === index,\n },\n item.class,\n `--${item.color ?? 'theme'}`,\n ]\"\n @click.stop=\"runAction(item, $event)\"\n >\n <slot name=\"menuitem-label\" :item=\"item\">\n {{ item.label }}\n </slot>\n </button>\n </template>\n </slot>\n </template>\n </slot>\n </div>\n </Transition>\n </div>\n</template>\n\n<style lang=\"postcss\">\n .m-dropdown {\n @apply maz-relative maz-inline-flex maz-flex-col maz-items-start maz-align-top;\n\n &.--block {\n @apply maz-w-full;\n }\n\n & [aria-expanded='true'].m-btn {\n @apply maz-bg-color-light;\n }\n\n &__wrapper {\n @apply maz-h-full maz-w-full maz-outline-none;\n }\n\n &__icon {\n @apply maz-transition-transform maz-duration-200 maz-ease-in-out;\n\n &.--open {\n @apply maz-rotate-180;\n }\n }\n\n .menu {\n @apply maz-absolute maz-z-default-backdrop maz-flex maz-min-h-max maz-min-w-max maz-flex-col maz-gap-0.5 maz-overflow-auto maz-rounded maz-bg-color maz-p-2 maz-elevation dark:maz-border dark:maz-border-color-light;\n\n &.--top:not(.--right, .--left) {\n @apply maz-bottom-full maz-mb-1 maz-origin-bottom;\n }\n\n &.--bottom:not(.--right, .--left) {\n @apply maz-top-full maz-mt-1 maz-origin-top;\n }\n\n &.--left:not(.--top, .--bottom) {\n @apply maz-right-full maz-mr-1 maz-origin-top-right;\n }\n\n &.--right:not(.--top, .--bottom) {\n @apply maz-left-full maz-ml-1 maz-origin-top-left;\n }\n\n &.--top.--right {\n @apply maz-bottom-full maz-right-0 maz-mb-1 maz-origin-bottom-right;\n }\n\n &.--top.--left {\n @apply maz-bottom-full maz-left-0 maz-mb-1 maz-origin-bottom-left;\n }\n\n &.--bottom.--left {\n @apply maz-left-0 maz-top-full maz-mt-1 maz-origin-top-left;\n }\n\n &.--bottom.--right {\n @apply maz-right-0 maz-top-full maz-mt-1 maz-origin-top-right;\n }\n\n .menuitem {\n @apply maz-cursor-pointer maz-whitespace-nowrap maz-rounded maz-px-4 maz-py-2 maz-text-start maz-outline-none maz-transition-colors maz-duration-300 maz-ease-in-out focus-within:maz-bg-color-light hover:maz-bg-color-light;\n\n &.--is-keyboard-selected {\n @apply maz-bg-color-light;\n }\n\n &.menuitem__button {\n &:disabled {\n @apply maz-cursor-not-allowed maz-opacity-50;\n }\n\n &.--primary {\n @apply maz-text-primary hover:maz-text-primary-600;\n }\n\n &.--secondary {\n @apply maz-text-secondary hover:maz-text-secondary-600;\n }\n\n &.--info {\n @apply maz-text-info hover:maz-text-info-600;\n }\n\n &.--warning {\n @apply maz-text-warning-600 hover:maz-text-warning-800;\n }\n\n &.--danger {\n @apply maz-text-danger-600 hover:maz-text-danger-800;\n }\n\n &.--success {\n @apply maz-text-success-600 hover:maz-text-success-800;\n }\n\n &.--white {\n @apply maz-text-white hover:maz-text-gray-300;\n }\n\n &.--black {\n @apply maz-text-black hover:maz-text-gray-800;\n }\n\n &.--theme {\n @apply maz-text-normal hover:maz-text-black dark:hover:maz-text-white;\n }\n }\n }\n }\n}\n</style>\n"],"names":["props","__props","emits","__emit","MazBtn","defineAsyncComponent","MazIcon","MazLink","instanceId","useInstanceUniqId","ChevronDownIcon","dropdownOpen","ref","keyboardSelectedIndex","iconClassSize","computed","setDropdownDebounced","debounce","value","setDropdown","onClickOutside","toggleDropdown","onElementClick","onElementFocus","onElementMouseenter","onElementMouseleave","onElementBlur","isActionItem","item","isLinkItem","runAction","event","_a","closeOnClick","keydownHandler","arrowHandler","keyboardOpenDropdown","code","itemLength","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,UAAMA,IAAQC,GAYRC,IAAQC,GAaRC,IAASC,EAAqB,MAAM,OAAO,0BAAwB,CAAC,GACpEC,IAAUD,EAAqB,MAAM,OAAO,2BAAyB,CAAC,GACtEE,IAAUF,EAAqB,MAAM,OAAO,2BAAyB,CAAC,GAEtEG,IAAaC,GAAkB;AAAA,MACnC,eAAe;AAAA,MACf,YAAYT,EAAM;AAAA,IAAA,CACnB,GA6FKU,IAAkBL,EAAqB,MAAM,OAAO,6BAAyB,CAAC,GAE9EM,IAAeC,EAAIZ,EAAM,IAAI,GAC7Ba,IAAwBD,EAAY,GAEpCE,IAAgBC,EAAS,MACzBf,EAAM,SAAS,OACV,gBACLA,EAAM,SAAS,QAEfA,EAAM,SAAS,QAEfA,EAAM,SAAS,OACV,kBACLA,EAAM,SAAS,QAEfA,EAAM,SAAS,SACV,gBACF,aACR,GAEKgB,IAAuBC,GAAS,CAACC,MAAmB;AACxD,MAAAC,EAAYD,CAAK;AAAA,OAChB,GAAG;AAEN,aAASE,IAAiB;AACxB,MAAIT,EAAa,SACfQ,EAAY,EAAK;AAAA,IACnB;AAGF,aAASE,IAAiB;AACZ,MAAAF,EAAA,CAACR,EAAa,KAAK;AAAA,IAAA;AAGjC,aAASW,IAAiB;AACxB,MAAI,CAAC,OAAO,EAAE,SAAStB,EAAM,OAAO,KACnBqB,EAAA;AAAA,IAAA;AAEnB,aAASE,IAAiB;AACxB,MAAI,CAAC,SAAS,MAAM,EAAE,SAASvB,EAAM,OAAO,KAC1CmB,EAAY,EAAI;AAAA,IAAA;AAEpB,aAASK,IAAsB;AAC7B,MAAI,CAAC,SAAS,MAAM,EAAE,SAASxB,EAAM,OAAO,MACtCW,EAAa,UAAU,KACzBQ,EAAY,EAAI,IAGhBH,EAAqB,EAAI;AAAA,IAE7B;AAEF,aAASS,IAAsB;AAC7B,MAAI,CAAC,SAAS,MAAM,EAAE,SAASzB,EAAM,OAAO,KAC1CgB,EAAqB,EAAK;AAAA,IAC5B;AAEF,aAASU,IAAgB;AACvB,MAAAV,EAAqB,EAAK;AAAA,IAAA;AAG5B,aAASG,EAAYD,GAAgB;AACnC,MAAIlB,EAAM,aAGVW,EAAa,QAAQO,GACrBhB,EAAM,eAAegB,CAAK;AAAA,IAAA;AAG5B,aAASS,EAAaC,GAAoC;AACxD,aAAO,YAAYA;AAAA,IAAA;AAGrB,aAASC,EAAWD,GAAkC;AAC7C,aAAA,UAAUA,KAAQ,QAAQA;AAAA,IAAA;AAGpB,mBAAAE,EAAUF,GAAkBG,GAAc;;AACvD,MAAA7B,EAAM,oBAAoB6B,CAAK,GAE/B,QAAMC,IAAAJ,EAAK,WAAL,gBAAAI,EAAA,KAAAJ,KAED5B,EAAM,kBACIiC,EAAA;AAAA,IACf;AAGF,aAASA,IAAe;AACtB,MAAIjC,EAAM,mBAAmB,MAC3BmB,EAAY,EAAK;AAAA,IAAA;AAGrB,aAASe,EAAeH,GAAsB;AACxC,MAAAA,EAAM,QAAQ,YAChBA,EAAM,eAAe,GACrBZ,EAAY,EAAK,KAEV,CAAC,aAAa,SAAS,EAAE,SAASY,EAAM,GAAG,IAClDI,EAAaJ,CAAK,IAEXA,EAAM,QAAQ,WAAW,OAAOlB,EAAsB,SAAU,aACvEkB,EAAM,eAAe,GACR,SAAS,iBAAiB,IAAIvB,EAAW,KAAK,YAAY,EACrEK,EAAsB,KACxB,EAEK,MAAM,GAEEoB,EAAA;AAAA,IACf;AAGF,aAASG,EAAqBL,GAAsB;AAC9C,MAAA,CAAC,aAAa,WAAW,OAAO,EAAE,SAASA,EAAM,GAAG,KAAKpB,EAAa,UAAU,OAClFoB,EAAM,eAAe,GACrBZ,EAAY,EAAI;AAAA,IAClB;AAGF,aAASgB,EAAaJ,GAAsB;;AAC1C,MAAAA,EAAM,eAAe;AACrB,YAAMM,IAAON,EAAM;AAEnB,MAAKpB,EAAa,SAChBQ,EAAY,EAAI;AAEZ,YAAAmB,KAAaN,IAAAhC,EAAM,UAAN,gBAAAgC,EAAa;AAEhC,MAAKM,MAGD,OAAOzB,EAAsB,SAAU,WACrCA,EAAsB,UAAUyB,IAAa,KAAKD,MAAS,cAC7DxB,EAAsB,QAAQ,IAEvBA,EAAsB,UAAU,KAAKwB,MAAS,YACrDxB,EAAsB,QAAQyB,IAAa,IAG3CzB,EAAsB,QAChBwB,MAAS,cAAcxB,EAAsB,QAAQ,IAAIA,EAAsB,QAAQ,IAI/FA,EAAsB,QAAQwB,MAAS,cAAc,IAAIC,IAAa;AAAA,IACxE;AAGF,WAAAC;AAAA,MACE,MAAM5B,EAAa;AAAA,MACnB,CAACO,MAAU;AACT,QAAIA,IACO,SAAA,iBAAiB,WAAWgB,CAAc,IAG1C,SAAA,oBAAoB,WAAWA,CAAc,GAGxDrB,EAAsB,QAAQ;AAAA,MAAA;AAAA,IAElC,GACA0B;AAAA,MACE,MAAMvC,EAAM;AAAA,MACZ,CAAAkB,MAASC,EAAYD,CAAK;AAAA,IAC5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"MazDropdown.vue_vue_type_script_setup_true_lang.B5kO0VJW.mjs","sources":["../../src/components/MazDropdown.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RouteLocationRaw } from 'vue-router'\nimport type { MazLinkProps } from './MazLink.vue'\nimport type { Color, Icon, Position, Size } from './types'\nimport { computed, defineAsyncComponent, type HTMLAttributes, ref, watch } from 'vue'\nimport { useInstanceUniqId } from '../composables/useInstanceUniqId'\nimport { vClickOutside } from '../directives/vClickOutside'\nimport { debounce } from '../helpers/debounce'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MazDropdownProps>(), {\n class: undefined,\n style: undefined,\n id: undefined,\n items: () => [],\n trigger: 'both',\n color: 'transparent',\n position: 'bottom left',\n screenReaderDescription: 'Open menu dropdown',\n dropdownIconAnimation: true,\n size: 'md',\n})\nconst emits = defineEmits<{\n /*\n emitted when a menu item is clicked\n * @property {Event} event - the click event\n /\n 'menuitem-clicked': [event: Event]\n /\n Triggers when the number changes\n * @property {boolean} open new value\n /\n 'update:open': [value: boolean]\n}>()\n\nconst MazBtn = defineAsyncComponent(() => import('./MazBtn.vue'))\nconst MazIcon = defineAsyncComponent(() => import('./MazIcon.vue'))\nconst MazLink = defineAsyncComponent(() => import('./MazLink.vue'))\n\nconst instanceId = useInstanceUniqId({\n componentName: 'MazDropdown',\n providedId: props.id,\n})\n\ntype ItemBase = Record<string, unknown> & {\n label: string\n class?: unknown\n color?: Color\n}\n\ntype LinkItem = ItemBase & MazLinkProps & {\n target?: string\n href?: string\n to?: RouteLocationRaw\n}\n\ntype ActionItem = ItemBase & {\n action?: () => unknown\n}\n\nexport type MenuItem =\n \| (LinkItem & { action?: never })\n \| (ActionItem & { href?: never, to?: never, target?: never })\n\nexport interface MazDropdownProps {\n /* Style object /\n style?: HTMLAttributes['style']\n /* Class name /\n class?: HTMLAttributes['class']\n /\n Menu items\n * @default '[]'\n /\n items?: MenuItem[]\n /* Menu should be open? /\n open?: boolean\n /* id of the menu /\n id?: string\n /\n Should open the dropdown on click, hover or both\n * @default 'both'\n /\n trigger?: 'click' \| 'hover' \| 'both'\n /\n Button color\n * @default 'transparent'\n /\n color?: Color\n /\n Position of the dropdown\n * @default 'bottom left'\n /\n position?: Position\n /* Disable close menu on menuitem clicked /\n noCloseOnClick?: boolean\n /* Disable menu /\n disabled?: boolean\n /* Remove chevron icon in main button /\n noChevron?: boolean\n /\n Description read by screen reader (accessibility)\n * @default 'Open menu dropdown'\n /\n screenReaderDescription?: string\n /\n Class for the menu panel - useful for custom dropdown panel (background, border, etc.)\n /\n menuPanelClass?: HTMLAttributes['class']\n /\n Style for the menu panel - useful for custom dropdown panel (background, border, etc.)\n * You may use `!important` to override the default style\n /\n menuPanelStyle?: HTMLAttributes['style']\n /\n If true, the button will have a full width\n /\n block?: boolean\n /\n Custom dropdown icon\n * You can use a string to define the icon name or a Vue component\n * @default undefined\n /\n dropdownIcon?: string \| Icon\n /\n If true, the dropdown icon will rotate when the dropdown is open\n * @default true\n /\n dropdownIconAnimation?: boolean\n /\n Size of the button\n * @default 'md'\n */\n size?: Size\n}\n\nconst ChevronDownIcon = defineAsyncComponent(() => import('../../icons/chevron-down.svg'))\n\nconst dropdownOpen = ref(props.open)\nconst keyboardSelectedIndex = ref<number>()\n\nconst iconClassSize = computed(() => {\n if (props.size === 'xl')\n return 'maz-text-lg'\n if (props.size === 'lg')\n return 'maz-text-base'\n if (props.size === 'md')\n return 'maz-text-base'\n if (props.size === 'sm')\n return 'maz-text-base'\n if (props.size === 'xs')\n return 'maz-text-sm'\n if (props.size === 'mini')\n return 'maz-text-sm'\n return 'maz-text-lg'\n})\n\nconst setDropdownDebounced = debounce((value: boolean) => {\n setDropdown(value)\n}, 200)\n\nfunction onClickOutside() {\n if (dropdownOpen.value) {\n setDropdown(false)\n }\n}\n\nfunction toggleDropdown() {\n setDropdown(!dropdownOpen.value)\n}\n\nfunction onElementClick() {\n if (['click'].includes(props.trigger))\n toggleDropdown()\n}\nfunction onElementFocus() {\n if (['hover', 'both'].includes(props.trigger))\n setDropdown(true)\n}\nfunction onElementMouseenter() {\n if (['hover', 'both'].includes(props.trigger)) {\n if (dropdownOpen.value === false) {\n setDropdown(true)\n }\n else {\n setDropdownDebounced(true)\n }\n }\n}\nfunction onElementMouseleave() {\n if (['hover', 'both'].includes(props.trigger)) {\n setDropdownDebounced(false)\n }\n}\nfunction onElementBlur() {\n setDropdownDebounced(false)\n}\n\nfunction setDropdown(value: boolean) {\n if (props.disabled)\n return\n\n dropdownOpen.value = value\n emits('update:open', value)\n}\n\nfunction isActionItem(item: MenuItem): item is ActionItem {\n return 'action' in item\n}\n\nfunction isLinkItem(item: MenuItem): item is LinkItem {\n return 'href' in item \|\| 'to' in item\n}\n\nasync function runAction(item: ActionItem, event: Event) {\n emits('menuitem-clicked', event)\n\n await item.action?.()\n\n if (!props.noCloseOnClick) {\n closeOnClick()\n }\n}\n\nfunction closeOnClick() {\n if (props.noCloseOnClick === false)\n setDropdown(false)\n}\n\nfunction keydownHandler(event: KeyboardEvent) {\n if (event.key === 'Escape') {\n event.preventDefault()\n setDropdown(false)\n }\n else if (['ArrowDown', 'ArrowUp'].includes(event.key)) {\n arrowHandler(event)\n }\n else if (event.key === 'Enter' && typeof keyboardSelectedIndex.value === 'number') {\n event.preventDefault()\n const item = document.querySelectorAll(`#${instanceId.value} .menuitem`)[\n keyboardSelectedIndex.value\n ] as HTMLElement\n\n item.click()\n\n closeOnClick()\n }\n}\n\nfunction keyboardOpenDropdown(event: KeyboardEvent) {\n if (['ArrowDown', 'ArrowUp', 'Enter'].includes(event.key) && dropdownOpen.value === false) {\n event.preventDefault()\n setDropdown(true)\n }\n}\n\nfunction arrowHandler(event: KeyboardEvent) {\n event.preventDefault()\n const code = event.key\n\n if (!dropdownOpen.value)\n setDropdown(true)\n\n const itemLength = props.items?.length\n\n if (!itemLength)\n return\n\n if (typeof keyboardSelectedIndex.value === 'number') {\n if (keyboardSelectedIndex.value === itemLength - 1 && code === 'ArrowDown') {\n keyboardSelectedIndex.value = 0\n }\n else if (keyboardSelectedIndex.value === 0 && code === 'ArrowUp') {\n keyboardSelectedIndex.value = itemLength - 1\n }\n else {\n keyboardSelectedIndex.value\n = code === 'ArrowDown' ? keyboardSelectedIndex.value + 1 : keyboardSelectedIndex.value - 1\n }\n }\n else {\n keyboardSelectedIndex.value = code === 'ArrowDown' ? 0 : itemLength - 1\n }\n}\n\nwatch(\n () => dropdownOpen.value,\n (value) => {\n if (value) {\n document.addEventListener('keydown', keydownHandler)\n }\n else {\n document.removeEventListener('keydown', keydownHandler)\n }\n\n keyboardSelectedIndex.value = undefined\n },\n)\nwatch(\n () => props.open,\n value => setDropdown(value),\n)\n</script>\n\n<template>\n <div\n :id=\"instanceId\"\n v-click-outside=\"onClickOutside\"\n class=\"m-dropdown m-reset-css\"\n :style\n :class=\"[props.class, { '--block': block }]\"\n >\n <div\n role=\"button\"\n tabindex=\"0\"\n class=\"m-dropdown__wrapper\"\n :aria-expanded=\"dropdownOpen\"\n aria-haspopup=\"menu\"\n @click.stop=\"onElementClick\"\n @focus=\"onElementFocus\"\n @blur=\"onElementBlur\"\n @keydown=\"keyboardOpenDropdown\"\n @mouseenter=\"onElementMouseenter\"\n @mouseleave=\"onElementMouseleave\"\n >\n <span v-if=\"screenReaderDescription \|\| $slots['screen-reader-description']\" :id=\"`${instanceId}-labelspan`\" class=\"maz-sr-only\">\n <!-- @slot Description for screen reader (hidden) -->\n <slot name=\"screen-reader-description\">\n {{ screenReaderDescription }}\n </slot>\n </span>\n <!--\n @slot Custom Element\n @binding {Boolen} is-open - dropdown open state\n @default `<MazBtn />`\n -->\n <slot name=\"element\" :is-open=\"dropdownOpen\">\n <MazBtn\n :aria-labelledby=\"`${instanceId}-labelspan`\"\n :color\n :disabled\n v-bind=\"$attrs\"\n tabindex=\"-1\"\n :block\n :size\n >\n <slot />\n\n <template v-if=\"!noChevron\" #right-icon>\n <!--\n @slot Custom dropdown icon\n @binding {Boolean} is-open - dropdown open state\n @default `<ChevronDownIcon />`\n -->\n <slot name=\"dropdown-icon\" :is-open=\"dropdownOpen\">\n <MazIcon v-if=\"typeof dropdownIcon === 'string'\" :name=\"dropdownIcon\" :class=\"[{ '--open': dropdownOpen && dropdownIconAnimation }, iconClassSize]\" />\n <Component\n :is=\"dropdownIcon\" v-else-if=\"dropdownIcon\" :class=\"[{ '--open': dropdownOpen && dropdownIconAnimation }, iconClassSize]\"\n class=\"m-dropdown__icon\"\n />\n <ChevronDownIcon\n v-else\n :class=\"[{ '--open': dropdownOpen && dropdownIconAnimation }, iconClassSize]\"\n class=\"m-dropdown__icon\"\n />\n </slot>\n </template>\n </MazBtn>\n </slot>\n </div>\n\n <Transition name=\"maz-scale-fade\">\n <div\n v-show=\"dropdownOpen\"\n role=\"menu\"\n aria-label=\"Menu\"\n class=\"menu\"\n tabindex=\"-1\"\n :class=\"[{\n '--top': position.includes('top'),\n '--left': position.includes('left'),\n '--right': position.includes('right'),\n '--bottom': position.includes('bottom'),\n }, menuPanelClass]\"\n :style=\"menuPanelStyle\"\n @focus=\"setDropdownDebounced(true)\"\n @blur=\"setDropdownDebounced(false)\"\n @mouseenter=\"['hover', 'both'].includes(trigger) ? setDropdownDebounced(true) : undefined\"\n @mouseleave=\"['hover', 'both'].includes(trigger) ? setDropdownDebounced(false) : undefined\"\n >\n <!--\n @slot Custom dropdown panel\n @binding {Array} items - items prop data\n -->\n <slot name=\"dropdown\" :items=\"items\">\n <template v-for=\"(item, index) in items\" :key=\"index\">\n <!--\n @slot Custom menu item\n @binding {MenuItem} item - menu item\n -->\n <slot name=\"menuitem\" :item=\"item\">\n <template v-if=\"isLinkItem(item)\">\n <MazLink\n :target=\"item.href ? item.target ?? '_self' : undefined\"\n :to=\"item.to\"\n :href=\"item.href\"\n :color=\"item.color ?? 'theme'\"\n v-bind=\"item\"\n :underline-only-hover=\"item.underlineOnlyHover ?? false\"\n class=\"menuitem\"\n tabindex=\"-1\"\n :class=\"[\n {\n '--is-keyboard-selected': keyboardSelectedIndex === index,\n },\n item.class,\n ]\"\n @click.stop=\"closeOnClick\"\n >\n <!--\n @slot Custom label for menu item\n @binding {MenuItem} - item menu item\n -->\n <slot name=\"menuitem-label\" :item=\"item\">\n {{ item.label }}\n </slot>\n </MazLink>\n </template>\n <template v-else-if=\"isActionItem(item)\">\n <button\n tabindex=\"-1\"\n type=\"button\"\n v-bind=\"item\"\n class=\"menuitem menuitem__button\"\n :class=\"[\n {\n '--is-keyboard-selected': keyboardSelectedIndex === index,\n },\n item.class,\n `--${item.color ?? 'theme'}`,\n ]\"\n @click.stop=\"runAction(item, $event)\"\n >\n <slot name=\"menuitem-label\" :item=\"item\">\n {{ item.label }}\n </slot>\n </button>\n </template>\n </slot>\n </template>\n </slot>\n </div>\n </Transition>\n </div>\n</template>\n\n<style lang=\"postcss\">\n .m-dropdown {\n @apply maz-relative maz-inline-flex maz-flex-col maz-items-start maz-align-top;\n\n &.--block {\n @apply maz-w-full;\n }\n\n & [aria-expanded='true'].m-btn {\n @apply maz-bg-color-light;\n }\n\n &__wrapper {\n @apply maz-h-full maz-w-full maz-outline-none;\n }\n\n &__icon {\n @apply maz-transition-transform maz-duration-200 maz-ease-in-out;\n\n &.--open {\n @apply maz-rotate-180;\n }\n }\n\n .menu {\n @apply maz-absolute maz-z-default-backdrop maz-flex maz-min-h-max maz-min-w-max maz-flex-col maz-gap-0.5 maz-overflow-auto maz-rounded maz-bg-color maz-p-2 maz-elevation dark:maz-border dark:maz-border-color-light;\n\n &.--top:not(.--right, .--left) {\n @apply maz-bottom-full maz-mb-1 maz-origin-bottom;\n }\n\n &.--bottom:not(.--right, .--left) {\n @apply maz-top-full maz-mt-1 maz-origin-top;\n }\n\n &.--left:not(.--top, .--bottom) {\n @apply maz-right-full maz-mr-1 maz-origin-top-right;\n }\n\n &.--right:not(.--top, .--bottom) {\n @apply maz-left-full maz-ml-1 maz-origin-top-left;\n }\n\n &.--top.--right {\n @apply maz-bottom-full maz-right-0 maz-mb-1 maz-origin-bottom-right;\n }\n\n &.--top.--left {\n @apply maz-bottom-full maz-left-0 maz-mb-1 maz-origin-bottom-left;\n }\n\n &.--bottom.--left {\n @apply maz-left-0 maz-top-full maz-mt-1 maz-origin-top-left;\n }\n\n &.--bottom.--right {\n @apply maz-right-0 maz-top-full maz-mt-1 maz-origin-top-right;\n }\n\n .menuitem {\n @apply maz-cursor-pointer maz-whitespace-nowrap maz-rounded maz-px-4 maz-py-2 maz-text-start maz-outline-none maz-transition-colors maz-duration-300 maz-ease-in-out focus-within:maz-bg-color-light hover:maz-bg-color-light;\n\n &.--is-keyboard-selected {\n @apply maz-bg-color-light;\n }\n\n &.menuitem__button {\n &:disabled {\n @apply maz-cursor-not-allowed maz-opacity-50;\n }\n\n &.--primary {\n @apply maz-text-primary hover:maz-text-primary-600;\n }\n\n &.--secondary {\n @apply maz-text-secondary hover:maz-text-secondary-600;\n }\n\n &.--info {\n @apply maz-text-info hover:maz-text-info-600;\n }\n\n &.--warning {\n @apply maz-text-warning-600 hover:maz-text-warning-800;\n }\n\n &.--danger {\n @apply maz-text-danger-600 hover:maz-text-danger-800;\n }\n\n &.--success {\n @apply maz-text-success-600 hover:maz-text-success-800;\n }\n\n &.--white {\n @apply maz-text-white hover:maz-text-gray-300;\n }\n\n &.--black {\n @apply maz-text-black hover:maz-text-gray-800;\n }\n\n &.--theme {\n @apply maz-text-normal hover:maz-text-black dark:hover:maz-text-white;\n }\n }\n }\n }\n}\n</style>\n"],"names":["props","__props","emits","__emit","MazBtn","defineAsyncComponent","MazIcon","MazLink","instanceId","useInstanceUniqId","ChevronDownIcon","dropdownOpen","ref","keyboardSelectedIndex","iconClassSize","computed","setDropdownDebounced","debounce","value","setDropdown","onClickOutside","toggleDropdown","onElementClick","onElementFocus","onElementMouseenter","onElementMouseleave","onElementBlur","isActionItem","item","isLinkItem","runAction","event","_a","closeOnClick","keydownHandler","arrowHandler","keyboardOpenDropdown","code","itemLength","watch"],"mappings":"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"}

package/dist/chunks/MazDropdown.vue_vue_type_script_setup_true_lang.DLWmXVjB.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MazDropdown.vue_vue_type_script_setup_true_lang.DLWmXVjB.cjs","sources":["../../src/components/MazDropdown.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { MazLinkProps } from '@components/MazLink.vue'\nimport type { Color, Icon, Position, Size } from '@components/types'\nimport type { RouteLocationRaw } from 'vue-router'\nimport { useInstanceUniqId } from '@composables/useInstanceUniqId'\nimport { vClickOutside } from '@directives/vClickOutside'\nimport { debounce } from '@helpers/debounce'\nimport { computed, defineAsyncComponent, type HTMLAttributes, ref, watch } from 'vue'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MazDropdownProps>(), {\n class: undefined,\n style: undefined,\n id: undefined,\n items: () => [],\n trigger: 'both',\n color: 'transparent',\n position: 'bottom left',\n screenReaderDescription: 'Open menu dropdown',\n dropdownIconAnimation: true,\n size: 'md',\n})\nconst emits = defineEmits<{\n /*\n emitted when a menu item is clicked\n * @property {Event} event - the click event\n /\n 'menuitem-clicked': [event: Event]\n /\n Triggers when the number changes\n * @property {boolean} open new value\n /\n 'update:open': [value: boolean]\n}>()\n\nconst MazBtn = defineAsyncComponent(() => import('@components/MazBtn.vue'))\nconst MazIcon = defineAsyncComponent(() => import('@components/MazIcon.vue'))\nconst MazLink = defineAsyncComponent(() => import('@components/MazLink.vue'))\n\nconst instanceId = useInstanceUniqId({\n componentName: 'MazDropdown',\n providedId: props.id,\n})\n\ntype ItemBase = Record<string, unknown> & {\n label: string\n class?: unknown\n color?: Color\n}\n\ntype LinkItem = ItemBase & MazLinkProps & {\n target?: string\n href?: string\n to?: RouteLocationRaw\n}\n\ntype ActionItem = ItemBase & {\n action?: () => unknown\n}\n\nexport type MenuItem =\n \| (LinkItem & { action?: never })\n \| (ActionItem & { href?: never, to?: never, target?: never })\n\nexport interface MazDropdownProps {\n /* Style object /\n style?: HTMLAttributes['style']\n /* Class name /\n class?: HTMLAttributes['class']\n /\n Menu items\n * @default '[]'\n /\n items?: MenuItem[]\n /* Menu should be open? /\n open?: boolean\n /* id of the menu /\n id?: string\n /\n Should open the dropdown on click, hover or both\n * @default 'both'\n /\n trigger?: 'click' \| 'hover' \| 'both'\n /\n Button color\n * @default 'transparent'\n /\n color?: Color\n /\n Position of the dropdown\n * @default 'bottom left'\n /\n position?: Position\n /* Disable close menu on menuitem clicked /\n noCloseOnClick?: boolean\n /* Disable menu /\n disabled?: boolean\n /* Remove chevron icon in main button /\n noChevron?: boolean\n /\n Description read by screen reader (accessibility)\n * @default 'Open menu dropdown'\n /\n screenReaderDescription?: string\n /\n Class for the menu panel - useful for custom dropdown panel (background, border, etc.)\n /\n menuPanelClass?: HTMLAttributes['class']\n /\n Style for the menu panel - useful for custom dropdown panel (background, border, etc.)\n * You may use `!important` to override the default style\n /\n menuPanelStyle?: HTMLAttributes['style']\n /\n If true, the button will have a full width\n /\n block?: boolean\n /\n Custom dropdown icon\n * You can use a string to define the icon name or a Vue component\n * @default undefined\n /\n dropdownIcon?: string \| Icon\n /\n If true, the dropdown icon will rotate when the dropdown is open\n * @default true\n /\n dropdownIconAnimation?: boolean\n /\n Size of the button\n * @default 'md'\n */\n size?: Size\n}\n\nconst ChevronDownIcon = defineAsyncComponent(() => import('@icons/chevron-down.svg'))\n\nconst dropdownOpen = ref(props.open)\nconst keyboardSelectedIndex = ref<number>()\n\nconst iconClassSize = computed(() => {\n if (props.size === 'xl')\n return 'maz-text-lg'\n if (props.size === 'lg')\n return 'maz-text-base'\n if (props.size === 'md')\n return 'maz-text-base'\n if (props.size === 'sm')\n return 'maz-text-base'\n if (props.size === 'xs')\n return 'maz-text-sm'\n if (props.size === 'mini')\n return 'maz-text-sm'\n return 'maz-text-lg'\n})\n\nconst setDropdownDebounced = debounce((value: boolean) => {\n setDropdown(value)\n}, 200)\n\nfunction onClickOutside() {\n if (dropdownOpen.value) {\n setDropdown(false)\n }\n}\n\nfunction toggleDropdown() {\n setDropdown(!dropdownOpen.value)\n}\n\nfunction onElementClick() {\n if (['click'].includes(props.trigger))\n toggleDropdown()\n}\nfunction onElementFocus() {\n if (['hover', 'both'].includes(props.trigger))\n setDropdown(true)\n}\nfunction onElementMouseenter() {\n if (['hover', 'both'].includes(props.trigger)) {\n if (dropdownOpen.value === false) {\n setDropdown(true)\n }\n else {\n setDropdownDebounced(true)\n }\n }\n}\nfunction onElementMouseleave() {\n if (['hover', 'both'].includes(props.trigger)) {\n setDropdownDebounced(false)\n }\n}\nfunction onElementBlur() {\n setDropdownDebounced(false)\n}\n\nfunction setDropdown(value: boolean) {\n if (props.disabled)\n return\n\n dropdownOpen.value = value\n emits('update:open', value)\n}\n\nfunction isActionItem(item: MenuItem): item is ActionItem {\n return 'action' in item\n}\n\nfunction isLinkItem(item: MenuItem): item is LinkItem {\n return 'href' in item \|\| 'to' in item\n}\n\nasync function runAction(item: ActionItem, event: Event) {\n emits('menuitem-clicked', event)\n\n await item.action?.()\n\n if (!props.noCloseOnClick) {\n closeOnClick()\n }\n}\n\nfunction closeOnClick() {\n if (props.noCloseOnClick === false)\n setDropdown(false)\n}\n\nfunction keydownHandler(event: KeyboardEvent) {\n if (event.key === 'Escape') {\n event.preventDefault()\n setDropdown(false)\n }\n else if (['ArrowDown', 'ArrowUp'].includes(event.key)) {\n arrowHandler(event)\n }\n else if (event.key === 'Enter' && typeof keyboardSelectedIndex.value === 'number') {\n event.preventDefault()\n const item = document.querySelectorAll(`#${instanceId.value} .menuitem`)[\n keyboardSelectedIndex.value\n ] as HTMLElement\n\n item.click()\n\n closeOnClick()\n }\n}\n\nfunction keyboardOpenDropdown(event: KeyboardEvent) {\n if (['ArrowDown', 'ArrowUp', 'Enter'].includes(event.key) && dropdownOpen.value === false) {\n event.preventDefault()\n setDropdown(true)\n }\n}\n\nfunction arrowHandler(event: KeyboardEvent) {\n event.preventDefault()\n const code = event.key\n\n if (!dropdownOpen.value)\n setDropdown(true)\n\n const itemLength = props.items?.length\n\n if (!itemLength)\n return\n\n if (typeof keyboardSelectedIndex.value === 'number') {\n if (keyboardSelectedIndex.value === itemLength - 1 && code === 'ArrowDown') {\n keyboardSelectedIndex.value = 0\n }\n else if (keyboardSelectedIndex.value === 0 && code === 'ArrowUp') {\n keyboardSelectedIndex.value = itemLength - 1\n }\n else {\n keyboardSelectedIndex.value\n = code === 'ArrowDown' ? keyboardSelectedIndex.value + 1 : keyboardSelectedIndex.value - 1\n }\n }\n else {\n keyboardSelectedIndex.value = code === 'ArrowDown' ? 0 : itemLength - 1\n }\n}\n\nwatch(\n () => dropdownOpen.value,\n (value) => {\n if (value) {\n document.addEventListener('keydown', keydownHandler)\n }\n else {\n document.removeEventListener('keydown', keydownHandler)\n }\n\n keyboardSelectedIndex.value = undefined\n },\n)\nwatch(\n () => props.open,\n value => setDropdown(value),\n)\n</script>\n\n<template>\n <div\n :id=\"instanceId\"\n v-click-outside=\"onClickOutside\"\n class=\"m-dropdown m-reset-css\"\n :style\n :class=\"[props.class, { '--block': block }]\"\n >\n <div\n role=\"button\"\n tabindex=\"0\"\n class=\"m-dropdown__wrapper\"\n :aria-expanded=\"dropdownOpen\"\n aria-haspopup=\"menu\"\n @click.stop=\"onElementClick\"\n @focus=\"onElementFocus\"\n @blur=\"onElementBlur\"\n @keydown=\"keyboardOpenDropdown\"\n @mouseenter=\"onElementMouseenter\"\n @mouseleave=\"onElementMouseleave\"\n >\n <span v-if=\"screenReaderDescription \|\| $slots['screen-reader-description']\" :id=\"`${instanceId}-labelspan`\" class=\"maz-sr-only\">\n <!-- @slot Description for screen reader (hidden) -->\n <slot name=\"screen-reader-description\">\n {{ screenReaderDescription }}\n </slot>\n </span>\n <!--\n @slot Custom Element\n @binding {Boolen} is-open - dropdown open state\n @default `<MazBtn />`\n -->\n <slot name=\"element\" :is-open=\"dropdownOpen\">\n <MazBtn\n :aria-labelledby=\"`${instanceId}-labelspan`\"\n :color\n :disabled\n v-bind=\"$attrs\"\n tabindex=\"-1\"\n :block\n :size\n >\n <slot />\n\n <template v-if=\"!noChevron\" #right-icon>\n <!--\n @slot Custom dropdown icon\n @binding {Boolean} is-open - dropdown open state\n @default `<ChevronDownIcon />`\n -->\n <slot name=\"dropdown-icon\" :is-open=\"dropdownOpen\">\n <MazIcon v-if=\"typeof dropdownIcon === 'string'\" :name=\"dropdownIcon\" :class=\"[{ '--open': dropdownOpen && dropdownIconAnimation }, iconClassSize]\" />\n <Component\n :is=\"dropdownIcon\" v-else-if=\"dropdownIcon\" :class=\"[{ '--open': dropdownOpen && dropdownIconAnimation }, iconClassSize]\"\n class=\"m-dropdown__icon\"\n />\n <ChevronDownIcon\n v-else\n :class=\"[{ '--open': dropdownOpen && dropdownIconAnimation }, iconClassSize]\"\n class=\"m-dropdown__icon\"\n />\n </slot>\n </template>\n </MazBtn>\n </slot>\n </div>\n\n <Transition name=\"maz-scale-fade\">\n <div\n v-show=\"dropdownOpen\"\n role=\"menu\"\n aria-label=\"Menu\"\n class=\"menu\"\n tabindex=\"-1\"\n :class=\"[{\n '--top': position.includes('top'),\n '--left': position.includes('left'),\n '--right': position.includes('right'),\n '--bottom': position.includes('bottom'),\n }, menuPanelClass]\"\n :style=\"menuPanelStyle\"\n @focus=\"setDropdownDebounced(true)\"\n @blur=\"setDropdownDebounced(false)\"\n @mouseenter=\"['hover', 'both'].includes(trigger) ? setDropdownDebounced(true) : undefined\"\n @mouseleave=\"['hover', 'both'].includes(trigger) ? setDropdownDebounced(false) : undefined\"\n >\n <!--\n @slot Custom dropdown panel\n @binding {Array} items - items prop data\n -->\n <slot name=\"dropdown\" :items=\"items\">\n <template v-for=\"(item, index) in items\" :key=\"index\">\n <!--\n @slot Custom menu item\n @binding {MenuItem} item - menu item\n -->\n <slot name=\"menuitem\" :item=\"item\">\n <template v-if=\"isLinkItem(item)\">\n <MazLink\n :target=\"item.href ? item.target ?? '_self' : undefined\"\n :to=\"item.to\"\n :href=\"item.href\"\n :color=\"item.color ?? 'theme'\"\n v-bind=\"item\"\n :underline-only-hover=\"item.underlineOnlyHover ?? false\"\n class=\"menuitem\"\n tabindex=\"-1\"\n :class=\"[\n {\n '--is-keyboard-selected': keyboardSelectedIndex === index,\n },\n item.class,\n ]\"\n @click.stop=\"closeOnClick\"\n >\n <!--\n @slot Custom label for menu item\n @binding {MenuItem} - item menu item\n -->\n <slot name=\"menuitem-label\" :item=\"item\">\n {{ item.label }}\n </slot>\n </MazLink>\n </template>\n <template v-else-if=\"isActionItem(item)\">\n <button\n tabindex=\"-1\"\n type=\"button\"\n v-bind=\"item\"\n class=\"menuitem menuitem__button\"\n :class=\"[\n {\n '--is-keyboard-selected': keyboardSelectedIndex === index,\n },\n item.class,\n `--${item.color ?? 'theme'}`,\n ]\"\n @click.stop=\"runAction(item, $event)\"\n >\n <slot name=\"menuitem-label\" :item=\"item\">\n {{ item.label }}\n </slot>\n </button>\n </template>\n </slot>\n </template>\n </slot>\n </div>\n </Transition>\n </div>\n</template>\n\n<style lang=\"postcss\">\n .m-dropdown {\n @apply maz-relative maz-inline-flex maz-flex-col maz-items-start maz-align-top;\n\n &.--block {\n @apply maz-w-full;\n }\n\n & [aria-expanded='true'].m-btn {\n @apply maz-bg-color-light;\n }\n\n &__wrapper {\n @apply maz-h-full maz-w-full maz-outline-none;\n }\n\n &__icon {\n @apply maz-transition-transform maz-duration-200 maz-ease-in-out;\n\n &.--open {\n @apply maz-rotate-180;\n }\n }\n\n .menu {\n @apply maz-absolute maz-z-default-backdrop maz-flex maz-min-h-max maz-min-w-max maz-flex-col maz-gap-0.5 maz-overflow-auto maz-rounded maz-bg-color maz-p-2 maz-elevation dark:maz-border dark:maz-border-color-light;\n\n &.--top:not(.--right, .--left) {\n @apply maz-bottom-full maz-mb-1 maz-origin-bottom;\n }\n\n &.--bottom:not(.--right, .--left) {\n @apply maz-top-full maz-mt-1 maz-origin-top;\n }\n\n &.--left:not(.--top, .--bottom) {\n @apply maz-right-full maz-mr-1 maz-origin-top-right;\n }\n\n &.--right:not(.--top, .--bottom) {\n @apply maz-left-full maz-ml-1 maz-origin-top-left;\n }\n\n &.--top.--right {\n @apply maz-bottom-full maz-right-0 maz-mb-1 maz-origin-bottom-right;\n }\n\n &.--top.--left {\n @apply maz-bottom-full maz-left-0 maz-mb-1 maz-origin-bottom-left;\n }\n\n &.--bottom.--left {\n @apply maz-left-0 maz-top-full maz-mt-1 maz-origin-top-left;\n }\n\n &.--bottom.--right {\n @apply maz-right-0 maz-top-full maz-mt-1 maz-origin-top-right;\n }\n\n .menuitem {\n @apply maz-cursor-pointer maz-whitespace-nowrap maz-rounded maz-px-4 maz-py-2 maz-text-start maz-outline-none maz-transition-colors maz-duration-300 maz-ease-in-out focus-within:maz-bg-color-light hover:maz-bg-color-light;\n\n &.--is-keyboard-selected {\n @apply maz-bg-color-light;\n }\n\n &.menuitem__button {\n &:disabled {\n @apply maz-cursor-not-allowed maz-opacity-50;\n }\n\n &.--primary {\n @apply maz-text-primary hover:maz-text-primary-600;\n }\n\n &.--secondary {\n @apply maz-text-secondary hover:maz-text-secondary-600;\n }\n\n &.--info {\n @apply maz-text-info hover:maz-text-info-600;\n }\n\n &.--warning {\n @apply maz-text-warning-600 hover:maz-text-warning-800;\n }\n\n &.--danger {\n @apply maz-text-danger-600 hover:maz-text-danger-800;\n }\n\n &.--success {\n @apply maz-text-success-600 hover:maz-text-success-800;\n }\n\n &.--white {\n @apply maz-text-white hover:maz-text-gray-300;\n }\n\n &.--black {\n @apply maz-text-black hover:maz-text-gray-800;\n }\n\n &.--theme {\n @apply maz-text-normal hover:maz-text-black dark:hover:maz-text-white;\n }\n }\n }\n }\n}\n</style>\n"],"names":["props","__props","emits","__emit","MazBtn","defineAsyncComponent","MazIcon","MazLink","instanceId","useInstanceUniqId","ChevronDownIcon","dropdownOpen","ref","keyboardSelectedIndex","iconClassSize","computed","setDropdownDebounced","debounce","value","setDropdown","onClickOutside","toggleDropdown","onElementClick","onElementFocus","onElementMouseenter","onElementMouseleave","onElementBlur","isActionItem","item","isLinkItem","runAction","event","_a","closeOnClick","keydownHandler","arrowHandler","keyboardOpenDropdown","code","itemLength","watch"],"mappings":"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"}
1	+ {"version":3,"file":"MazDropdown.vue_vue_type_script_setup_true_lang.DLWmXVjB.cjs","sources":["../../src/components/MazDropdown.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RouteLocationRaw } from 'vue-router'\nimport type { MazLinkProps } from './MazLink.vue'\nimport type { Color, Icon, Position, Size } from './types'\nimport { computed, defineAsyncComponent, type HTMLAttributes, ref, watch } from 'vue'\nimport { useInstanceUniqId } from '../composables/useInstanceUniqId'\nimport { vClickOutside } from '../directives/vClickOutside'\nimport { debounce } from '../helpers/debounce'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MazDropdownProps>(), {\n class: undefined,\n style: undefined,\n id: undefined,\n items: () => [],\n trigger: 'both',\n color: 'transparent',\n position: 'bottom left',\n screenReaderDescription: 'Open menu dropdown',\n dropdownIconAnimation: true,\n size: 'md',\n})\nconst emits = defineEmits<{\n /*\n emitted when a menu item is clicked\n * @property {Event} event - the click event\n /\n 'menuitem-clicked': [event: Event]\n /\n Triggers when the number changes\n * @property {boolean} open new value\n /\n 'update:open': [value: boolean]\n}>()\n\nconst MazBtn = defineAsyncComponent(() => import('./MazBtn.vue'))\nconst MazIcon = defineAsyncComponent(() => import('./MazIcon.vue'))\nconst MazLink = defineAsyncComponent(() => import('./MazLink.vue'))\n\nconst instanceId = useInstanceUniqId({\n componentName: 'MazDropdown',\n providedId: props.id,\n})\n\ntype ItemBase = Record<string, unknown> & {\n label: string\n class?: unknown\n color?: Color\n}\n\ntype LinkItem = ItemBase & MazLinkProps & {\n target?: string\n href?: string\n to?: RouteLocationRaw\n}\n\ntype ActionItem = ItemBase & {\n action?: () => unknown\n}\n\nexport type MenuItem =\n \| (LinkItem & { action?: never })\n \| (ActionItem & { href?: never, to?: never, target?: never })\n\nexport interface MazDropdownProps {\n /* Style object /\n style?: HTMLAttributes['style']\n /* Class name /\n class?: HTMLAttributes['class']\n /\n Menu items\n * @default '[]'\n /\n items?: MenuItem[]\n /* Menu should be open? /\n open?: boolean\n /* id of the menu /\n id?: string\n /\n Should open the dropdown on click, hover or both\n * @default 'both'\n /\n trigger?: 'click' \| 'hover' \| 'both'\n /\n Button color\n * @default 'transparent'\n /\n color?: Color\n /\n Position of the dropdown\n * @default 'bottom left'\n /\n position?: Position\n /* Disable close menu on menuitem clicked /\n noCloseOnClick?: boolean\n /* Disable menu /\n disabled?: boolean\n /* Remove chevron icon in main button /\n noChevron?: boolean\n /\n Description read by screen reader (accessibility)\n * @default 'Open menu dropdown'\n /\n screenReaderDescription?: string\n /\n Class for the menu panel - useful for custom dropdown panel (background, border, etc.)\n /\n menuPanelClass?: HTMLAttributes['class']\n /\n Style for the menu panel - useful for custom dropdown panel (background, border, etc.)\n * You may use `!important` to override the default style\n /\n menuPanelStyle?: HTMLAttributes['style']\n /\n If true, the button will have a full width\n /\n block?: boolean\n /\n Custom dropdown icon\n * You can use a string to define the icon name or a Vue component\n * @default undefined\n /\n dropdownIcon?: string \| Icon\n /\n If true, the dropdown icon will rotate when the dropdown is open\n * @default true\n /\n dropdownIconAnimation?: boolean\n /\n Size of the button\n * @default 'md'\n */\n size?: Size\n}\n\nconst ChevronDownIcon = defineAsyncComponent(() => import('../../icons/chevron-down.svg'))\n\nconst dropdownOpen = ref(props.open)\nconst keyboardSelectedIndex = ref<number>()\n\nconst iconClassSize = computed(() => {\n if (props.size === 'xl')\n return 'maz-text-lg'\n if (props.size === 'lg')\n return 'maz-text-base'\n if (props.size === 'md')\n return 'maz-text-base'\n if (props.size === 'sm')\n return 'maz-text-base'\n if (props.size === 'xs')\n return 'maz-text-sm'\n if (props.size === 'mini')\n return 'maz-text-sm'\n return 'maz-text-lg'\n})\n\nconst setDropdownDebounced = debounce((value: boolean) => {\n setDropdown(value)\n}, 200)\n\nfunction onClickOutside() {\n if (dropdownOpen.value) {\n setDropdown(false)\n }\n}\n\nfunction toggleDropdown() {\n setDropdown(!dropdownOpen.value)\n}\n\nfunction onElementClick() {\n if (['click'].includes(props.trigger))\n toggleDropdown()\n}\nfunction onElementFocus() {\n if (['hover', 'both'].includes(props.trigger))\n setDropdown(true)\n}\nfunction onElementMouseenter() {\n if (['hover', 'both'].includes(props.trigger)) {\n if (dropdownOpen.value === false) {\n setDropdown(true)\n }\n else {\n setDropdownDebounced(true)\n }\n }\n}\nfunction onElementMouseleave() {\n if (['hover', 'both'].includes(props.trigger)) {\n setDropdownDebounced(false)\n }\n}\nfunction onElementBlur() {\n setDropdownDebounced(false)\n}\n\nfunction setDropdown(value: boolean) {\n if (props.disabled)\n return\n\n dropdownOpen.value = value\n emits('update:open', value)\n}\n\nfunction isActionItem(item: MenuItem): item is ActionItem {\n return 'action' in item\n}\n\nfunction isLinkItem(item: MenuItem): item is LinkItem {\n return 'href' in item \|\| 'to' in item\n}\n\nasync function runAction(item: ActionItem, event: Event) {\n emits('menuitem-clicked', event)\n\n await item.action?.()\n\n if (!props.noCloseOnClick) {\n closeOnClick()\n }\n}\n\nfunction closeOnClick() {\n if (props.noCloseOnClick === false)\n setDropdown(false)\n}\n\nfunction keydownHandler(event: KeyboardEvent) {\n if (event.key === 'Escape') {\n event.preventDefault()\n setDropdown(false)\n }\n else if (['ArrowDown', 'ArrowUp'].includes(event.key)) {\n arrowHandler(event)\n }\n else if (event.key === 'Enter' && typeof keyboardSelectedIndex.value === 'number') {\n event.preventDefault()\n const item = document.querySelectorAll(`#${instanceId.value} .menuitem`)[\n keyboardSelectedIndex.value\n ] as HTMLElement\n\n item.click()\n\n closeOnClick()\n }\n}\n\nfunction keyboardOpenDropdown(event: KeyboardEvent) {\n if (['ArrowDown', 'ArrowUp', 'Enter'].includes(event.key) && dropdownOpen.value === false) {\n event.preventDefault()\n setDropdown(true)\n }\n}\n\nfunction arrowHandler(event: KeyboardEvent) {\n event.preventDefault()\n const code = event.key\n\n if (!dropdownOpen.value)\n setDropdown(true)\n\n const itemLength = props.items?.length\n\n if (!itemLength)\n return\n\n if (typeof keyboardSelectedIndex.value === 'number') {\n if (keyboardSelectedIndex.value === itemLength - 1 && code === 'ArrowDown') {\n keyboardSelectedIndex.value = 0\n }\n else if (keyboardSelectedIndex.value === 0 && code === 'ArrowUp') {\n keyboardSelectedIndex.value = itemLength - 1\n }\n else {\n keyboardSelectedIndex.value\n = code === 'ArrowDown' ? keyboardSelectedIndex.value + 1 : keyboardSelectedIndex.value - 1\n }\n }\n else {\n keyboardSelectedIndex.value = code === 'ArrowDown' ? 0 : itemLength - 1\n }\n}\n\nwatch(\n () => dropdownOpen.value,\n (value) => {\n if (value) {\n document.addEventListener('keydown', keydownHandler)\n }\n else {\n document.removeEventListener('keydown', keydownHandler)\n }\n\n keyboardSelectedIndex.value = undefined\n },\n)\nwatch(\n () => props.open,\n value => setDropdown(value),\n)\n</script>\n\n<template>\n <div\n :id=\"instanceId\"\n v-click-outside=\"onClickOutside\"\n class=\"m-dropdown m-reset-css\"\n :style\n :class=\"[props.class, { '--block': block }]\"\n >\n <div\n role=\"button\"\n tabindex=\"0\"\n class=\"m-dropdown__wrapper\"\n :aria-expanded=\"dropdownOpen\"\n aria-haspopup=\"menu\"\n @click.stop=\"onElementClick\"\n @focus=\"onElementFocus\"\n @blur=\"onElementBlur\"\n @keydown=\"keyboardOpenDropdown\"\n @mouseenter=\"onElementMouseenter\"\n @mouseleave=\"onElementMouseleave\"\n >\n <span v-if=\"screenReaderDescription \|\| $slots['screen-reader-description']\" :id=\"`${instanceId}-labelspan`\" class=\"maz-sr-only\">\n <!-- @slot Description for screen reader (hidden) -->\n <slot name=\"screen-reader-description\">\n {{ screenReaderDescription }}\n </slot>\n </span>\n <!--\n @slot Custom Element\n @binding {Boolen} is-open - dropdown open state\n @default `<MazBtn />`\n -->\n <slot name=\"element\" :is-open=\"dropdownOpen\">\n <MazBtn\n :aria-labelledby=\"`${instanceId}-labelspan`\"\n :color\n :disabled\n v-bind=\"$attrs\"\n tabindex=\"-1\"\n :block\n :size\n >\n <slot />\n\n <template v-if=\"!noChevron\" #right-icon>\n <!--\n @slot Custom dropdown icon\n @binding {Boolean} is-open - dropdown open state\n @default `<ChevronDownIcon />`\n -->\n <slot name=\"dropdown-icon\" :is-open=\"dropdownOpen\">\n <MazIcon v-if=\"typeof dropdownIcon === 'string'\" :name=\"dropdownIcon\" :class=\"[{ '--open': dropdownOpen && dropdownIconAnimation }, iconClassSize]\" />\n <Component\n :is=\"dropdownIcon\" v-else-if=\"dropdownIcon\" :class=\"[{ '--open': dropdownOpen && dropdownIconAnimation }, iconClassSize]\"\n class=\"m-dropdown__icon\"\n />\n <ChevronDownIcon\n v-else\n :class=\"[{ '--open': dropdownOpen && dropdownIconAnimation }, iconClassSize]\"\n class=\"m-dropdown__icon\"\n />\n </slot>\n </template>\n </MazBtn>\n </slot>\n </div>\n\n <Transition name=\"maz-scale-fade\">\n <div\n v-show=\"dropdownOpen\"\n role=\"menu\"\n aria-label=\"Menu\"\n class=\"menu\"\n tabindex=\"-1\"\n :class=\"[{\n '--top': position.includes('top'),\n '--left': position.includes('left'),\n '--right': position.includes('right'),\n '--bottom': position.includes('bottom'),\n }, menuPanelClass]\"\n :style=\"menuPanelStyle\"\n @focus=\"setDropdownDebounced(true)\"\n @blur=\"setDropdownDebounced(false)\"\n @mouseenter=\"['hover', 'both'].includes(trigger) ? setDropdownDebounced(true) : undefined\"\n @mouseleave=\"['hover', 'both'].includes(trigger) ? setDropdownDebounced(false) : undefined\"\n >\n <!--\n @slot Custom dropdown panel\n @binding {Array} items - items prop data\n -->\n <slot name=\"dropdown\" :items=\"items\">\n <template v-for=\"(item, index) in items\" :key=\"index\">\n <!--\n @slot Custom menu item\n @binding {MenuItem} item - menu item\n -->\n <slot name=\"menuitem\" :item=\"item\">\n <template v-if=\"isLinkItem(item)\">\n <MazLink\n :target=\"item.href ? item.target ?? '_self' : undefined\"\n :to=\"item.to\"\n :href=\"item.href\"\n :color=\"item.color ?? 'theme'\"\n v-bind=\"item\"\n :underline-only-hover=\"item.underlineOnlyHover ?? false\"\n class=\"menuitem\"\n tabindex=\"-1\"\n :class=\"[\n {\n '--is-keyboard-selected': keyboardSelectedIndex === index,\n },\n item.class,\n ]\"\n @click.stop=\"closeOnClick\"\n >\n <!--\n @slot Custom label for menu item\n @binding {MenuItem} - item menu item\n -->\n <slot name=\"menuitem-label\" :item=\"item\">\n {{ item.label }}\n </slot>\n </MazLink>\n </template>\n <template v-else-if=\"isActionItem(item)\">\n <button\n tabindex=\"-1\"\n type=\"button\"\n v-bind=\"item\"\n class=\"menuitem menuitem__button\"\n :class=\"[\n {\n '--is-keyboard-selected': keyboardSelectedIndex === index,\n },\n item.class,\n `--${item.color ?? 'theme'}`,\n ]\"\n @click.stop=\"runAction(item, $event)\"\n >\n <slot name=\"menuitem-label\" :item=\"item\">\n {{ item.label }}\n </slot>\n </button>\n </template>\n </slot>\n </template>\n </slot>\n </div>\n </Transition>\n </div>\n</template>\n\n<style lang=\"postcss\">\n .m-dropdown {\n @apply maz-relative maz-inline-flex maz-flex-col maz-items-start maz-align-top;\n\n &.--block {\n @apply maz-w-full;\n }\n\n & [aria-expanded='true'].m-btn {\n @apply maz-bg-color-light;\n }\n\n &__wrapper {\n @apply maz-h-full maz-w-full maz-outline-none;\n }\n\n &__icon {\n @apply maz-transition-transform maz-duration-200 maz-ease-in-out;\n\n &.--open {\n @apply maz-rotate-180;\n }\n }\n\n .menu {\n @apply maz-absolute maz-z-default-backdrop maz-flex maz-min-h-max maz-min-w-max maz-flex-col maz-gap-0.5 maz-overflow-auto maz-rounded maz-bg-color maz-p-2 maz-elevation dark:maz-border dark:maz-border-color-light;\n\n &.--top:not(.--right, .--left) {\n @apply maz-bottom-full maz-mb-1 maz-origin-bottom;\n }\n\n &.--bottom:not(.--right, .--left) {\n @apply maz-top-full maz-mt-1 maz-origin-top;\n }\n\n &.--left:not(.--top, .--bottom) {\n @apply maz-right-full maz-mr-1 maz-origin-top-right;\n }\n\n &.--right:not(.--top, .--bottom) {\n @apply maz-left-full maz-ml-1 maz-origin-top-left;\n }\n\n &.--top.--right {\n @apply maz-bottom-full maz-right-0 maz-mb-1 maz-origin-bottom-right;\n }\n\n &.--top.--left {\n @apply maz-bottom-full maz-left-0 maz-mb-1 maz-origin-bottom-left;\n }\n\n &.--bottom.--left {\n @apply maz-left-0 maz-top-full maz-mt-1 maz-origin-top-left;\n }\n\n &.--bottom.--right {\n @apply maz-right-0 maz-top-full maz-mt-1 maz-origin-top-right;\n }\n\n .menuitem {\n @apply maz-cursor-pointer maz-whitespace-nowrap maz-rounded maz-px-4 maz-py-2 maz-text-start maz-outline-none maz-transition-colors maz-duration-300 maz-ease-in-out focus-within:maz-bg-color-light hover:maz-bg-color-light;\n\n &.--is-keyboard-selected {\n @apply maz-bg-color-light;\n }\n\n &.menuitem__button {\n &:disabled {\n @apply maz-cursor-not-allowed maz-opacity-50;\n }\n\n &.--primary {\n @apply maz-text-primary hover:maz-text-primary-600;\n }\n\n &.--secondary {\n @apply maz-text-secondary hover:maz-text-secondary-600;\n }\n\n &.--info {\n @apply maz-text-info hover:maz-text-info-600;\n }\n\n &.--warning {\n @apply maz-text-warning-600 hover:maz-text-warning-800;\n }\n\n &.--danger {\n @apply maz-text-danger-600 hover:maz-text-danger-800;\n }\n\n &.--success {\n @apply maz-text-success-600 hover:maz-text-success-800;\n }\n\n &.--white {\n @apply maz-text-white hover:maz-text-gray-300;\n }\n\n &.--black {\n @apply maz-text-black hover:maz-text-gray-800;\n }\n\n &.--theme {\n @apply maz-text-normal hover:maz-text-black dark:hover:maz-text-white;\n }\n }\n }\n }\n}\n</style>\n"],"names":["props","__props","emits","__emit","MazBtn","defineAsyncComponent","MazIcon","MazLink","instanceId","useInstanceUniqId","ChevronDownIcon","dropdownOpen","ref","keyboardSelectedIndex","iconClassSize","computed","setDropdownDebounced","debounce","value","setDropdown","onClickOutside","toggleDropdown","onElementClick","onElementFocus","onElementMouseenter","onElementMouseleave","onElementBlur","isActionItem","item","isLinkItem","runAction","event","_a","closeOnClick","keydownHandler","arrowHandler","keyboardOpenDropdown","code","itemLength","watch"],"mappings":"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"}

package/dist/chunks/MazIcon.vue_vue_type_script_setup_true_lang.C5NwBerh.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MazIcon.vue_vue_type_script_setup_true_lang.C5NwBerh.cjs","sources":["../../src/components/MazIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ~~injectStrict } from '@helpers/injectStrict'\n\nimport {~~ computed, nextTick, onMounted, type PropType, ref, watchEffect } from 'vue'\n\nconst props = defineProps({\n /** The source path of the SVG file - e.g: `/icons/home.svg` /\n src: { type: String, default: undefined },\n /* The path of the folder where the SVG files are stored - e.g: `/icons` /\n path: { type: String, default: undefined },\n /* The name of the SVG file - e.g: `home` /\n name: { type: String, default: undefined },\n /* The size of the SVG file - e.g: `1em` /\n size: { type: String, default: undefined },\n /* The title of the SVG file - e.g: `Home` /\n title: { type: String, default: undefined },\n /* The function to transform the source of the SVG file - e.g: `(svg) => svg` /\n transformSource: {\n type: Function as PropType<(param: SVGElement) => typeof param>,\n default: (svg: SVGElement) => svg,\n },\n})\nconst emits = defineEmits<{\n /\n emitted when SVG file is loaded\n * @property {SVGElement \| undefined} svg the svg element loaded\n /\n (event: 'loaded', svg: SVGElement \| undefined): void\n /\n emitted when SVG file is not loaded\n /\n (event: 'unloaded'): void\n /\n emitted when SVG file is not loaded\n * @property {Error} error the error\n */\n (event: 'error', error: Error): void\n}>()\nconst cache: Record<string, Promise<SVGElement>> = {}\nconst svgElSource = ref<SVGElement>()\nconst svgElem = ref<SVGElement>()\n\nfunction getMazIconPath() {\n try {\n return injectStrict<string>('mazIconPath')\n }\n catch {\n return undefined\n }\n}\n\nconst iconPath = computed(() => props.path ?? getMazIconPath())\nconst fullSrc = computed(() => {\n if (props.src) {\n return props.src\n }\n else if (iconPath.value) {\n return `${iconPath.value}/${props.name}.svg`\n }\n else {\n return `/${props.name}.svg`\n }\n})\n\nonMounted(() => {\n if (!props.name && !props.src) {\n console.error('[maz-ui](MazIcon) you should provide \"name\" or \"src\" as prop')\n }\n})\n\nfunction setTitle(svg: SVGElement, title: string) {\n const titleTags = svg.querySelectorAll('title')\n if (titleTags.length > 0) {\n // overwrite existing title\n titleTags[0].textContent = title\n }\n else {\n // create a title element if one doesn't already exist\n const titleEl = document.createElementNS('http://www.w3.org/2000/svg', 'title')\n titleEl.textContent = title\n svg.append(titleEl)\n }\n}\n\nfunction filterAttrs(attrs: Record<string, unknown>) {\n return Object.keys(attrs).reduce((result, key) => {\n if (attrs[key] !== false && attrs[key] !== null && attrs[key] !== undefined) {\n result[key] = attrs[key]\n }\n return result\n }, {})\n}\n\nfunction getSvgAttrs(svgEl: SVGElement) {\n // copy attrs\n const svgAttrs = {}\n const attrs = svgEl.attributes\n if (!attrs) {\n return svgAttrs\n }\n for (let i = attrs.length - 1; i >= 0; i--) {\n svgAttrs[attrs[i].name] = attrs[i].value\n }\n return svgAttrs\n}\n\nfunction getSvgContent(svgEl: SVGElement) {\n svgEl.cloneNode(true)\n const svgElNode = props.transformSource(svgEl)\n\n if (props.title) {\n setTitle(svgElNode as SVGElement, props.title)\n }\n\n // copy inner html\n return svgEl.innerHTML\n}\n\nasync function getSource(src: string) {\n // fill cache by src with promise\n if (!cache[src]) {\n // download\n cache[src] = download(src)\n }\n\n // inline svg when cached promise resolves\n try {\n svgElSource.value = await cache[src]\n // wait to render\n await nextTick()\n emits('loaded', svgElem.value)\n }\n catch (error) {\n if (svgElSource.value) {\n svgElSource.value = undefined\n emits('unloaded')\n }\n // remove cached rejected promise so next image can try load again\n delete cache[src]\n emits('error', error as Error)\n }\n}\n\nfunction download(url: string): Promise<SVGElement> {\n return new Promise((resolve, reject) => {\n const request = new XMLHttpRequest()\n request.open('GET', url, true)\n\n request.addEventListener('load', () => {\n if (request.status >= 200 && request.status < 400) {\n try {\n // Setup a parser to convert the response to text/xml in order for it to be manipulated and changed\n const parser = new DOMParser()\n const result = parser.parseFromString(request.responseText, 'text/xml')\n let svgEl = result.querySelectorAll('svg')[0] as SVGElement\n if (svgEl) {\n svgEl = props.transformSource(svgEl)\n resolve(svgEl)\n }\n else {\n reject(new Error('Loaded file is not valid SVG\"'))\n }\n }\n catch (error) {\n reject(error)\n }\n }\n else {\n reject(new Error('Error loading SVG'))\n }\n })\n\n request.addEventListener('error', error => reject(error))\n request.send()\n })\n}\n\nwatchEffect(() => getSource(fullSrc.value))\n</script>\n\n<template>\n <svg\n v-if=\"svgElSource\"\n ref=\"svgElem\"\n class=\"m-icon m-reset-css\"\n width=\"1em\"\n height=\"1em\"\n v-bind=\"{\n ...getSvgAttrs(svgElSource),\n ...filterAttrs($attrs),\n }\"\n :style=\"`font-size: ${size}`\"\n v-html=\"getSvgContent(svgElSource)\"\n />\n</template>\n"],"names":["props","__props","emits","__emit","cache","svgElSource","ref","svgElem","getMazIconPath","injectStrict","iconPath","computed","fullSrc","onMounted","setTitle","svg","title","titleTags","titleEl","filterAttrs","attrs","result","key","getSvgAttrs","svgEl","svgAttrs","i","getSvgContent","svgElNode","getSource","src","download","nextTick","error","url","resolve","reject","request","watchEffect"],"mappings":"wZAKA,MAAMA,EAAQC,EAiBRC,EAAQC,EAgBRC,EAA6C,CAAC,EAC9CC,EAAcC,EAAAA,IAAgB,EAC9BC,EAAUD,EAAAA,IAAgB,EAEhC,SAASE,GAAiB,CACpB,GAAA,CACF,OAAOC,EAAAA,aAAqB,aAAa,CAAA,MAErC,CACG,MAAA,CACT,CAGF,MAAMC,EAAWC,EAAAA,SAAS,IAAMX,EAAM,MAAQQ,GAAgB,EACxDI,EAAUD,EAAAA,SAAS,IACnBX,EAAM,IACDA,EAAM,IAENU,EAAS,MACT,GAAGA,EAAS,KAAK,IAAIV,EAAM,IAAI,OAG/B,IAAIA,EAAM,IAAI,MAExB,EAEDa,EAAAA,UAAU,IAAM,CACV,CAACb,EAAM,MAAQ,CAACA,EAAM,KACxB,QAAQ,MAAM,8DAA8D,CAC9E,CACD,EAEQ,SAAAc,EAASC,EAAiBC,EAAe,CAC1C,MAAAC,EAAYF,EAAI,iBAAiB,OAAO,EAC1C,GAAAE,EAAU,OAAS,EAEXA,EAAA,CAAC,EAAE,YAAcD,MAExB,CAEH,MAAME,EAAU,SAAS,gBAAgB,6BAA8B,OAAO,EAC9EA,EAAQ,YAAcF,EACtBD,EAAI,OAAOG,CAAO,CAAA,CACpB,CAGF,SAASC,EAAYC,EAAgC,CACnD,OAAO,OAAO,KAAKA,CAAK,EAAE,OAAO,CAACC,EAAQC,KACpCF,EAAME,CAAG,IAAM,IAASF,EAAME,CAAG,IAAM,MAAQF,EAAME,CAAG,IAAM,SACzDD,EAAAC,CAAG,EAAIF,EAAME,CAAG,GAElBD,GACN,EAAE,CAAA,CAGP,SAASE,EAAYC,EAAmB,CAEtC,MAAMC,EAAW,CAAC,EACZL,EAAQI,EAAM,WACpB,GAAI,CAACJ,EACI,OAAAK,EAET,QAASC,EAAIN,EAAM,OAAS,EAAGM,GAAK,EAAGA,IACrCD,EAASL,EAAMM,CAAC,EAAE,IAAI,EAAIN,EAAMM,CAAC,EAAE,MAE9B,OAAAD,CAAA,CAGT,SAASE,EAAcH,EAAmB,CACxCA,EAAM,UAAU,EAAI,EACd,MAAAI,EAAY5B,EAAM,gBAAgBwB,CAAK,EAE7C,OAAIxB,EAAM,OACCc,EAAAc,EAAyB5B,EAAM,KAAK,EAIxCwB,EAAM,SAAA,CAGf,eAAeK,EAAUC,EAAa,CAE/B1B,EAAM0B,CAAG,IAEN1B,EAAA0B,CAAG,EAAIC,EAASD,CAAG,GAIvB,GAAA,CACUzB,EAAA,MAAQ,MAAMD,EAAM0B,CAAG,EAEnC,MAAME,WAAS,EACT9B,EAAA,SAAUK,EAAQ,KAAK,QAExB0B,EAAO,CACR5B,EAAY,QACdA,EAAY,MAAQ,OACpBH,EAAM,UAAU,GAGlB,OAAOE,EAAM0B,CAAG,EAChB5B,EAAM,QAAS+B,CAAc,CAAA,CAC/B,CAGF,SAASF,EAASG,EAAkC,CAClD,OAAO,IAAI,QAAQ,CAACC,EAASC,IAAW,CAChC,MAAAC,EAAU,IAAI,eACZA,EAAA,KAAK,MAAOH,EAAK,EAAI,EAErBG,EAAA,iBAAiB,OAAQ,IAAM,CACrC,GAAIA,EAAQ,QAAU,KAAOA,EAAQ,OAAS,IACxC,GAAA,CAIF,IAAIb,EAFW,IAAI,UAAU,EACP,gBAAgBa,EAAQ,aAAc,UAAU,EACnD,iBAAiB,KAAK,EAAE,CAAC,EACxCb,GACMA,EAAAxB,EAAM,gBAAgBwB,CAAK,EACnCW,EAAQX,CAAK,GAGNY,EAAA,IAAI,MAAM,+BAA+B,CAAC,QAG9CH,EAAO,CACZG,EAAOH,CAAK,CAAA,MAIPG,EAAA,IAAI,MAAM,mBAAmB,CAAC,CACvC,CACD,EAEDC,EAAQ,iBAAiB,QAAkBJ,GAAAG,EAAOH,CAAK,CAAC,EACxDI,EAAQ,KAAK,CAAA,CACd,CAAA,CAGHC,OAAAA,EAAAA,YAAY,IAAMT,EAAUjB,EAAQ,KAAK,CAAC"}
1	+ {"version":3,"file":"MazIcon.vue_vue_type_script_setup_true_lang.C5NwBerh.cjs","sources":["../../src/components/MazIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, type PropType, ref, watchEffect } from 'vue'\n\nimport { injectStrict } from '../helpers/injectStrict'\n\nconst props = defineProps({\n /** The source path of the SVG file - e.g: `/icons/home.svg` /\n src: { type: String, default: undefined },\n /* The path of the folder where the SVG files are stored - e.g: `/icons` /\n path: { type: String, default: undefined },\n /* The name of the SVG file - e.g: `home` /\n name: { type: String, default: undefined },\n /* The size of the SVG file - e.g: `1em` /\n size: { type: String, default: undefined },\n /* The title of the SVG file - e.g: `Home` /\n title: { type: String, default: undefined },\n /* The function to transform the source of the SVG file - e.g: `(svg) => svg` /\n transformSource: {\n type: Function as PropType<(param: SVGElement) => typeof param>,\n default: (svg: SVGElement) => svg,\n },\n})\nconst emits = defineEmits<{\n /\n emitted when SVG file is loaded\n * @property {SVGElement \| undefined} svg the svg element loaded\n /\n (event: 'loaded', svg: SVGElement \| undefined): void\n /\n emitted when SVG file is not loaded\n /\n (event: 'unloaded'): void\n /\n emitted when SVG file is not loaded\n * @property {Error} error the error\n */\n (event: 'error', error: Error): void\n}>()\nconst cache: Record<string, Promise<SVGElement>> = {}\nconst svgElSource = ref<SVGElement>()\nconst svgElem = ref<SVGElement>()\n\nfunction getMazIconPath() {\n try {\n return injectStrict<string>('mazIconPath')\n }\n catch {\n return undefined\n }\n}\n\nconst iconPath = computed(() => props.path ?? getMazIconPath())\nconst fullSrc = computed(() => {\n if (props.src) {\n return props.src\n }\n else if (iconPath.value) {\n return `${iconPath.value}/${props.name}.svg`\n }\n else {\n return `/${props.name}.svg`\n }\n})\n\nonMounted(() => {\n if (!props.name && !props.src) {\n console.error('[maz-ui](MazIcon) you should provide \"name\" or \"src\" as prop')\n }\n})\n\nfunction setTitle(svg: SVGElement, title: string) {\n const titleTags = svg.querySelectorAll('title')\n if (titleTags.length > 0) {\n // overwrite existing title\n titleTags[0].textContent = title\n }\n else {\n // create a title element if one doesn't already exist\n const titleEl = document.createElementNS('http://www.w3.org/2000/svg', 'title')\n titleEl.textContent = title\n svg.append(titleEl)\n }\n}\n\nfunction filterAttrs(attrs: Record<string, unknown>) {\n return Object.keys(attrs).reduce((result, key) => {\n if (attrs[key] !== false && attrs[key] !== null && attrs[key] !== undefined) {\n result[key] = attrs[key]\n }\n return result\n }, {})\n}\n\nfunction getSvgAttrs(svgEl: SVGElement) {\n // copy attrs\n const svgAttrs = {}\n const attrs = svgEl.attributes\n if (!attrs) {\n return svgAttrs\n }\n for (let i = attrs.length - 1; i >= 0; i--) {\n svgAttrs[attrs[i].name] = attrs[i].value\n }\n return svgAttrs\n}\n\nfunction getSvgContent(svgEl: SVGElement) {\n svgEl.cloneNode(true)\n const svgElNode = props.transformSource(svgEl)\n\n if (props.title) {\n setTitle(svgElNode as SVGElement, props.title)\n }\n\n // copy inner html\n return svgEl.innerHTML\n}\n\nasync function getSource(src: string) {\n // fill cache by src with promise\n if (!cache[src]) {\n // download\n cache[src] = download(src)\n }\n\n // inline svg when cached promise resolves\n try {\n svgElSource.value = await cache[src]\n // wait to render\n await nextTick()\n emits('loaded', svgElem.value)\n }\n catch (error) {\n if (svgElSource.value) {\n svgElSource.value = undefined\n emits('unloaded')\n }\n // remove cached rejected promise so next image can try load again\n delete cache[src]\n emits('error', error as Error)\n }\n}\n\nfunction download(url: string): Promise<SVGElement> {\n return new Promise((resolve, reject) => {\n const request = new XMLHttpRequest()\n request.open('GET', url, true)\n\n request.addEventListener('load', () => {\n if (request.status >= 200 && request.status < 400) {\n try {\n // Setup a parser to convert the response to text/xml in order for it to be manipulated and changed\n const parser = new DOMParser()\n const result = parser.parseFromString(request.responseText, 'text/xml')\n let svgEl = result.querySelectorAll('svg')[0] as SVGElement\n if (svgEl) {\n svgEl = props.transformSource(svgEl)\n resolve(svgEl)\n }\n else {\n reject(new Error('Loaded file is not valid SVG\"'))\n }\n }\n catch (error) {\n reject(error)\n }\n }\n else {\n reject(new Error('Error loading SVG'))\n }\n })\n\n request.addEventListener('error', error => reject(error))\n request.send()\n })\n}\n\nwatchEffect(() => getSource(fullSrc.value))\n</script>\n\n<template>\n <svg\n v-if=\"svgElSource\"\n ref=\"svgElem\"\n class=\"m-icon m-reset-css\"\n width=\"1em\"\n height=\"1em\"\n v-bind=\"{\n ...getSvgAttrs(svgElSource),\n ...filterAttrs($attrs),\n }\"\n :style=\"`font-size: ${size}`\"\n v-html=\"getSvgContent(svgElSource)\"\n />\n</template>\n"],"names":["props","__props","emits","__emit","cache","svgElSource","ref","svgElem","getMazIconPath","injectStrict","iconPath","computed","fullSrc","onMounted","setTitle","svg","title","titleTags","titleEl","filterAttrs","attrs","result","key","getSvgAttrs","svgEl","svgAttrs","i","getSvgContent","svgElNode","getSource","src","download","nextTick","error","url","resolve","reject","request","watchEffect"],"mappings":"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"}

package/dist/chunks/MazIcon.vue_vue_type_script_setup_true_lang.CLoEj0Zf.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MazIcon.vue_vue_type_script_setup_true_lang.CLoEj0Zf.mjs","sources":["../../src/components/MazIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ~~injectStrict } from '@helpers/injectStrict'\n\nimport {~~ computed, nextTick, onMounted, type PropType, ref, watchEffect } from 'vue'\n\nconst props = defineProps({\n /** The source path of the SVG file - e.g: `/icons/home.svg` /\n src: { type: String, default: undefined },\n /* The path of the folder where the SVG files are stored - e.g: `/icons` /\n path: { type: String, default: undefined },\n /* The name of the SVG file - e.g: `home` /\n name: { type: String, default: undefined },\n /* The size of the SVG file - e.g: `1em` /\n size: { type: String, default: undefined },\n /* The title of the SVG file - e.g: `Home` /\n title: { type: String, default: undefined },\n /* The function to transform the source of the SVG file - e.g: `(svg) => svg` /\n transformSource: {\n type: Function as PropType<(param: SVGElement) => typeof param>,\n default: (svg: SVGElement) => svg,\n },\n})\nconst emits = defineEmits<{\n /\n emitted when SVG file is loaded\n * @property {SVGElement \| undefined} svg the svg element loaded\n /\n (event: 'loaded', svg: SVGElement \| undefined): void\n /\n emitted when SVG file is not loaded\n /\n (event: 'unloaded'): void\n /\n emitted when SVG file is not loaded\n * @property {Error} error the error\n */\n (event: 'error', error: Error): void\n}>()\nconst cache: Record<string, Promise<SVGElement>> = {}\nconst svgElSource = ref<SVGElement>()\nconst svgElem = ref<SVGElement>()\n\nfunction getMazIconPath() {\n try {\n return injectStrict<string>('mazIconPath')\n }\n catch {\n return undefined\n }\n}\n\nconst iconPath = computed(() => props.path ?? getMazIconPath())\nconst fullSrc = computed(() => {\n if (props.src) {\n return props.src\n }\n else if (iconPath.value) {\n return `${iconPath.value}/${props.name}.svg`\n }\n else {\n return `/${props.name}.svg`\n }\n})\n\nonMounted(() => {\n if (!props.name && !props.src) {\n console.error('[maz-ui](MazIcon) you should provide \"name\" or \"src\" as prop')\n }\n})\n\nfunction setTitle(svg: SVGElement, title: string) {\n const titleTags = svg.querySelectorAll('title')\n if (titleTags.length > 0) {\n // overwrite existing title\n titleTags[0].textContent = title\n }\n else {\n // create a title element if one doesn't already exist\n const titleEl = document.createElementNS('http://www.w3.org/2000/svg', 'title')\n titleEl.textContent = title\n svg.append(titleEl)\n }\n}\n\nfunction filterAttrs(attrs: Record<string, unknown>) {\n return Object.keys(attrs).reduce((result, key) => {\n if (attrs[key] !== false && attrs[key] !== null && attrs[key] !== undefined) {\n result[key] = attrs[key]\n }\n return result\n }, {})\n}\n\nfunction getSvgAttrs(svgEl: SVGElement) {\n // copy attrs\n const svgAttrs = {}\n const attrs = svgEl.attributes\n if (!attrs) {\n return svgAttrs\n }\n for (let i = attrs.length - 1; i >= 0; i--) {\n svgAttrs[attrs[i].name] = attrs[i].value\n }\n return svgAttrs\n}\n\nfunction getSvgContent(svgEl: SVGElement) {\n svgEl.cloneNode(true)\n const svgElNode = props.transformSource(svgEl)\n\n if (props.title) {\n setTitle(svgElNode as SVGElement, props.title)\n }\n\n // copy inner html\n return svgEl.innerHTML\n}\n\nasync function getSource(src: string) {\n // fill cache by src with promise\n if (!cache[src]) {\n // download\n cache[src] = download(src)\n }\n\n // inline svg when cached promise resolves\n try {\n svgElSource.value = await cache[src]\n // wait to render\n await nextTick()\n emits('loaded', svgElem.value)\n }\n catch (error) {\n if (svgElSource.value) {\n svgElSource.value = undefined\n emits('unloaded')\n }\n // remove cached rejected promise so next image can try load again\n delete cache[src]\n emits('error', error as Error)\n }\n}\n\nfunction download(url: string): Promise<SVGElement> {\n return new Promise((resolve, reject) => {\n const request = new XMLHttpRequest()\n request.open('GET', url, true)\n\n request.addEventListener('load', () => {\n if (request.status >= 200 && request.status < 400) {\n try {\n // Setup a parser to convert the response to text/xml in order for it to be manipulated and changed\n const parser = new DOMParser()\n const result = parser.parseFromString(request.responseText, 'text/xml')\n let svgEl = result.querySelectorAll('svg')[0] as SVGElement\n if (svgEl) {\n svgEl = props.transformSource(svgEl)\n resolve(svgEl)\n }\n else {\n reject(new Error('Loaded file is not valid SVG\"'))\n }\n }\n catch (error) {\n reject(error)\n }\n }\n else {\n reject(new Error('Error loading SVG'))\n }\n })\n\n request.addEventListener('error', error => reject(error))\n request.send()\n })\n}\n\nwatchEffect(() => getSource(fullSrc.value))\n</script>\n\n<template>\n <svg\n v-if=\"svgElSource\"\n ref=\"svgElem\"\n class=\"m-icon m-reset-css\"\n width=\"1em\"\n height=\"1em\"\n v-bind=\"{\n ...getSvgAttrs(svgElSource),\n ...filterAttrs($attrs),\n }\"\n :style=\"`font-size: ${size}`\"\n v-html=\"getSvgContent(svgElSource)\"\n />\n</template>\n"],"names":["props","__props","emits","__emit","cache","svgElSource","ref","svgElem","getMazIconPath","injectStrict","iconPath","computed","fullSrc","onMounted","setTitle","svg","title","titleTags","titleEl","filterAttrs","attrs","result","key","getSvgAttrs","svgEl","svgAttrs","i","getSvgContent","svgElNode","getSource","src","download","nextTick","error","url","resolve","reject","request","watchEffect"],"mappings":"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"}
1	+ {"version":3,"file":"MazIcon.vue_vue_type_script_setup_true_lang.CLoEj0Zf.mjs","sources":["../../src/components/MazIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, type PropType, ref, watchEffect } from 'vue'\n\nimport { injectStrict } from '../helpers/injectStrict'\n\nconst props = defineProps({\n /** The source path of the SVG file - e.g: `/icons/home.svg` /\n src: { type: String, default: undefined },\n /* The path of the folder where the SVG files are stored - e.g: `/icons` /\n path: { type: String, default: undefined },\n /* The name of the SVG file - e.g: `home` /\n name: { type: String, default: undefined },\n /* The size of the SVG file - e.g: `1em` /\n size: { type: String, default: undefined },\n /* The title of the SVG file - e.g: `Home` /\n title: { type: String, default: undefined },\n /* The function to transform the source of the SVG file - e.g: `(svg) => svg` /\n transformSource: {\n type: Function as PropType<(param: SVGElement) => typeof param>,\n default: (svg: SVGElement) => svg,\n },\n})\nconst emits = defineEmits<{\n /\n emitted when SVG file is loaded\n * @property {SVGElement \| undefined} svg the svg element loaded\n /\n (event: 'loaded', svg: SVGElement \| undefined): void\n /\n emitted when SVG file is not loaded\n /\n (event: 'unloaded'): void\n /\n emitted when SVG file is not loaded\n * @property {Error} error the error\n */\n (event: 'error', error: Error): void\n}>()\nconst cache: Record<string, Promise<SVGElement>> = {}\nconst svgElSource = ref<SVGElement>()\nconst svgElem = ref<SVGElement>()\n\nfunction getMazIconPath() {\n try {\n return injectStrict<string>('mazIconPath')\n }\n catch {\n return undefined\n }\n}\n\nconst iconPath = computed(() => props.path ?? getMazIconPath())\nconst fullSrc = computed(() => {\n if (props.src) {\n return props.src\n }\n else if (iconPath.value) {\n return `${iconPath.value}/${props.name}.svg`\n }\n else {\n return `/${props.name}.svg`\n }\n})\n\nonMounted(() => {\n if (!props.name && !props.src) {\n console.error('[maz-ui](MazIcon) you should provide \"name\" or \"src\" as prop')\n }\n})\n\nfunction setTitle(svg: SVGElement, title: string) {\n const titleTags = svg.querySelectorAll('title')\n if (titleTags.length > 0) {\n // overwrite existing title\n titleTags[0].textContent = title\n }\n else {\n // create a title element if one doesn't already exist\n const titleEl = document.createElementNS('http://www.w3.org/2000/svg', 'title')\n titleEl.textContent = title\n svg.append(titleEl)\n }\n}\n\nfunction filterAttrs(attrs: Record<string, unknown>) {\n return Object.keys(attrs).reduce((result, key) => {\n if (attrs[key] !== false && attrs[key] !== null && attrs[key] !== undefined) {\n result[key] = attrs[key]\n }\n return result\n }, {})\n}\n\nfunction getSvgAttrs(svgEl: SVGElement) {\n // copy attrs\n const svgAttrs = {}\n const attrs = svgEl.attributes\n if (!attrs) {\n return svgAttrs\n }\n for (let i = attrs.length - 1; i >= 0; i--) {\n svgAttrs[attrs[i].name] = attrs[i].value\n }\n return svgAttrs\n}\n\nfunction getSvgContent(svgEl: SVGElement) {\n svgEl.cloneNode(true)\n const svgElNode = props.transformSource(svgEl)\n\n if (props.title) {\n setTitle(svgElNode as SVGElement, props.title)\n }\n\n // copy inner html\n return svgEl.innerHTML\n}\n\nasync function getSource(src: string) {\n // fill cache by src with promise\n if (!cache[src]) {\n // download\n cache[src] = download(src)\n }\n\n // inline svg when cached promise resolves\n try {\n svgElSource.value = await cache[src]\n // wait to render\n await nextTick()\n emits('loaded', svgElem.value)\n }\n catch (error) {\n if (svgElSource.value) {\n svgElSource.value = undefined\n emits('unloaded')\n }\n // remove cached rejected promise so next image can try load again\n delete cache[src]\n emits('error', error as Error)\n }\n}\n\nfunction download(url: string): Promise<SVGElement> {\n return new Promise((resolve, reject) => {\n const request = new XMLHttpRequest()\n request.open('GET', url, true)\n\n request.addEventListener('load', () => {\n if (request.status >= 200 && request.status < 400) {\n try {\n // Setup a parser to convert the response to text/xml in order for it to be manipulated and changed\n const parser = new DOMParser()\n const result = parser.parseFromString(request.responseText, 'text/xml')\n let svgEl = result.querySelectorAll('svg')[0] as SVGElement\n if (svgEl) {\n svgEl = props.transformSource(svgEl)\n resolve(svgEl)\n }\n else {\n reject(new Error('Loaded file is not valid SVG\"'))\n }\n }\n catch (error) {\n reject(error)\n }\n }\n else {\n reject(new Error('Error loading SVG'))\n }\n })\n\n request.addEventListener('error', error => reject(error))\n request.send()\n })\n}\n\nwatchEffect(() => getSource(fullSrc.value))\n</script>\n\n<template>\n <svg\n v-if=\"svgElSource\"\n ref=\"svgElem\"\n class=\"m-icon m-reset-css\"\n width=\"1em\"\n height=\"1em\"\n v-bind=\"{\n ...getSvgAttrs(svgElSource),\n ...filterAttrs($attrs),\n }\"\n :style=\"`font-size: ${size}`\"\n v-html=\"getSvgContent(svgElSource)\"\n />\n</template>\n"],"names":["props","__props","emits","__emit","cache","svgElSource","ref","svgElem","getMazIconPath","injectStrict","iconPath","computed","fullSrc","onMounted","setTitle","svg","title","titleTags","titleEl","filterAttrs","attrs","result","key","getSvgAttrs","svgEl","svgAttrs","i","getSvgContent","svgElNode","getSource","src","download","nextTick","error","url","resolve","reject","request","watchEffect"],"mappings":"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"}

package/dist/chunks/{MazInputNumber.vue_vue_type_script_setup_true_lang.DiawfWBC.cjs → MazInputNumber.vue_vue_type_script_setup_true_lang.BM2uHjda.cjs} RENAMED Viewed

@@ -1,2 +1,2 @@
-"use strict";const n=require("vue"),z=require("../components/MazInput.cjs"),C=require("../helpers/debounce.cjs"),N=n.defineComponent({inheritAttrs:!1,__name:"MazInputNumber",props:{style:{default:void 0},class:{default:void 0},modelValue:{default:void 0},disabled:{type:Boolean,default:!1},max:{default:Number.POSITIVE_INFINITY},min:{default:Number.NEGATIVE_INFINITY},step:{default:1},size:{default:"md"},noButtons:{type:Boolean,default:!1},textCenter:{type:Boolean,default:!0},inputmode:{default:"numeric"},block:{type:Boolean},error:{type:Boolean},hint:{},success:{type:Boolean},warning:{type:Boolean}},emits:["update:model-value","focus","blur","click","change"],setup(p,{emit:c}){const t=p,b=c,r=n.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../components/MazBtn.cjs"))),f=n.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./minus.B8s20I4l.cjs"))),v=n.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./plus.CbUgaWqj.cjs"))),o=n.computed({get:()=>t.modelValue,set:e=>s(e)});function y(e){return Math.round(e/t.step)*t.step}function B(e){if(typeof e=="number")return e<=t.min?t.min:e>=t.max?t.max:y(e)}const k=C.debounce(e=>s(e),300);function s(e){e=B(e),o.value!==e&&b("update:model-value",e)}s(o.value);const l=n.computed(()=>t.modelValue&&t.modelValue>=t.max),a=n.computed(()=>t.modelValue&&t.modelValue<=t.min);function m(){if(!(t.disabled||l.value)){if((o.value===void 0||o.value===null)&&Number.isFinite(t.min)){o.value=t.min;return}o.value=(o.value??0)+1*t.step}}function d(){if(!(t.disabled||a.value)){if((o.value===void 0||o.value===null)&&Number.isFinite(t.min)){o.value=t.min;return}o.value=(o.value??0)-1*t.step}}return(e,u)=>(n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(["m-input-number m-reset-css",[`m-input-number--${e.size}`,t.class,{"--block":e.block}]]),style:n.normalizeStyle(e.style)},[e.noButtons?n.createCommentVNode("",!0):(n.openBlock(),n.createBlock(n.unref(r),{key:0,color:"transparent",size:e.size,tabindex:"-1",class:"m-input-number__button m-input-number__decrement-button",disabled:a.value||e.disabled,onClick:d},{default:n.withCtx(()=>[n.createVNode(n.unref(f),{class:"m-input-number__button__icon"})]),_:1},8,["size","disabled"])),n.createVNode(z.default,n.mergeProps({"model-value":o.value,type:"number",class:["m-input-number__input",{"--no-buttons":e.noButtons,"--text-center":e.textCenter}],disabled:e.disabled,min:e.min,max:e.max,step:e.step,error:e.error,success:e.success,warning:e.warning,hint:e.hint},e.$attrs,{inputmode:e.inputmode,size:e.size,block:"",onKeydown:[n.withKeys(n.withModifiers(m,["prevent"]),["up"]),n.withKeys(n.withModifiers(d,["prevent"]),["down"])],onFocus:u[0]||(u[0]=i=>e.$emit("focus",i)),onChange:u[1]||(u[1]=i=>e.$emit("change",i)),onBlur:u[2]||(u[2]=i=>e.$emit("blur",i)),onClick:u[3]||(u[3]=i=>e.$emit("click",i)),"onUpdate:modelValue":u[4]||(u[4]=i=>n.unref(k)(i))}),null,16,["model-value","class","disabled","min","max","step","error","success","warning","hint","inputmode","size","onKeydown"]),e.noButtons?n.createCommentVNode("",!0):(n.openBlock(),n.createBlock(n.unref(r),{key:1,color:"transparent","no-shadow":"",tabindex:"-1",size:e.size,class:"m-input-number__button m-input-number__increment-button",disabled:l.value||e.disabled,onClick:m},{default:n.withCtx(()=>[n.createVNode(n.unref(v),{class:"m-input-number__button__icon"})]),_:1},8,["size","disabled"]))],6))}});exports._sfc_main=N;
-//# sourceMappingURL=MazInputNumber.vue_vue_type_script_setup_true_lang.DiawfWBC.cjs.map
+"use strict";const n=require("vue"),z=require("../helpers/debounce.cjs"),C=require("../components/MazInput.cjs"),N=n.defineComponent({inheritAttrs:!1,__name:"MazInputNumber",props:{style:{default:void 0},class:{default:void 0},modelValue:{default:void 0},disabled:{type:Boolean,default:!1},max:{default:Number.POSITIVE_INFINITY},min:{default:Number.NEGATIVE_INFINITY},step:{default:1},size:{default:"md"},noButtons:{type:Boolean,default:!1},textCenter:{type:Boolean,default:!0},inputmode:{default:"numeric"},block:{type:Boolean},error:{type:Boolean},hint:{},success:{type:Boolean},warning:{type:Boolean}},emits:["update:model-value","focus","blur","click","change"],setup(p,{emit:c}){const t=p,b=c,r=n.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../components/MazBtn.cjs"))),f=n.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./minus.B8s20I4l.cjs"))),v=n.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./plus.CbUgaWqj.cjs"))),o=n.computed({get:()=>t.modelValue,set:e=>s(e)});function y(e){return Math.round(e/t.step)*t.step}function B(e){if(typeof e=="number")return e<=t.min?t.min:e>=t.max?t.max:y(e)}const k=z.debounce(e=>s(e),300);function s(e){e=B(e),o.value!==e&&b("update:model-value",e)}s(o.value);const l=n.computed(()=>t.modelValue&&t.modelValue>=t.max),a=n.computed(()=>t.modelValue&&t.modelValue<=t.min);function m(){if(!(t.disabled||l.value)){if((o.value===void 0||o.value===null)&&Number.isFinite(t.min)){o.value=t.min;return}o.value=(o.value??0)+1*t.step}}function d(){if(!(t.disabled||a.value)){if((o.value===void 0||o.value===null)&&Number.isFinite(t.min)){o.value=t.min;return}o.value=(o.value??0)-1*t.step}}return(e,u)=>(n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(["m-input-number m-reset-css",[`m-input-number--${e.size}`,t.class,{"--block":e.block}]]),style:n.normalizeStyle(e.style)},[e.noButtons?n.createCommentVNode("",!0):(n.openBlock(),n.createBlock(n.unref(r),{key:0,color:"transparent",size:e.size,tabindex:"-1",class:"m-input-number__button m-input-number__decrement-button",disabled:a.value||e.disabled,onClick:d},{default:n.withCtx(()=>[n.createVNode(n.unref(f),{class:"m-input-number__button__icon"})]),_:1},8,["size","disabled"])),n.createVNode(C.default,n.mergeProps({"model-value":o.value,type:"number",class:["m-input-number__input",{"--no-buttons":e.noButtons,"--text-center":e.textCenter}],disabled:e.disabled,min:e.min,max:e.max,step:e.step,error:e.error,success:e.success,warning:e.warning,hint:e.hint},e.$attrs,{inputmode:e.inputmode,size:e.size,block:"",onKeydown:[n.withKeys(n.withModifiers(m,["prevent"]),["up"]),n.withKeys(n.withModifiers(d,["prevent"]),["down"])],onFocus:u[0]||(u[0]=i=>e.$emit("focus",i)),onChange:u[1]||(u[1]=i=>e.$emit("change",i)),onBlur:u[2]||(u[2]=i=>e.$emit("blur",i)),onClick:u[3]||(u[3]=i=>e.$emit("click",i)),"onUpdate:modelValue":u[4]||(u[4]=i=>n.unref(k)(i))}),null,16,["model-value","class","disabled","min","max","step","error","success","warning","hint","inputmode","size","onKeydown"]),e.noButtons?n.createCommentVNode("",!0):(n.openBlock(),n.createBlock(n.unref(r),{key:1,color:"transparent","no-shadow":"",tabindex:"-1",size:e.size,class:"m-input-number__button m-input-number__increment-button",disabled:l.value||e.disabled,onClick:m},{default:n.withCtx(()=>[n.createVNode(n.unref(v),{class:"m-input-number__button__icon"})]),_:1},8,["size","disabled"]))],6))}});exports._sfc_main=N;
+//# sourceMappingURL=MazInputNumber.vue_vue_type_script_setup_true_lang.BM2uHjda.cjs.map

package/dist/chunks/MazInputNumber.vue_vue_type_script_setup_true_lang.BM2uHjda.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MazInputNumber.vue_vue_type_script_setup_true_lang.BM2uHjda.cjs","sources":["../../src/components/MazInputNumber.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Size } from './types'\nimport { computed, defineAsyncComponent, type HTMLAttributes } from 'vue'\nimport { debounce } from '../helpers/debounce'\nimport MazInput from './MazInput.vue'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MazInputNumberProps>(), {\n style: undefined,\n class: undefined,\n modelValue: undefined,\n disabled: false,\n max: Number.POSITIVE_INFINITY,\n min: Number.NEGATIVE_INFINITY,\n step: 1,\n size: 'md',\n noButtons: false,\n textCenter: true,\n inputmode: 'numeric',\n})\n\nconst emits = defineEmits<{\n /**\n * Emitted when the input value change\n * @property {number | undefined} value - value of the input\n */\n 'update:model-value': [value?: number]\n /**\n * Emitted when the input is focused\n * @property {Event} value - event object\n */\n 'focus': [value: Event]\n /**\n * Emitted when the input is blurred\n * @property {Event} value - event object\n */\n 'blur': [value: Event]\n /**\n * Emitted input is clicked\n * @property {Event} value - event object\n */\n 'click': [value: Event]\n /**\n * Emitted when the value change\n * @property {Event} value - event object\n */\n 'change': [value: Event]\n}>()\n\nexport interface MazInputNumberProps {\n /** The inline style object for the component. */\n style?: HTMLAttributes['style']\n /** The CSS class name for the component. */\n class?: HTMLAttributes['class']\n /** The value of the component (v-model). */\n modelValue?: number\n /** Whether the input number is disabled or not. */\n disabled?: boolean\n /** The maximum value allowed for the input number. */\n max?: number\n /** The minimum value allowed for the input number. */\n min?: number\n /** The step value for incrementing or decrementing the input number. */\n step?: number\n /** The size of the input number component. */\n size?: Size\n /** Whether to hide the increment and decrement buttons or not. */\n noButtons?: boolean\n /** Whether to center the text inside the input or not. */\n textCenter?: boolean\n /** The inputmode attribute for the input. */\n inputmode?: HTMLAttributes['inputmode']\n /** The input will be displayed in full width */\n block?: boolean\n /** Will display the input in error state. */\n error?: boolean\n /** The hint text to display below the input. */\n hint?: string\n /** Will display the input in success state. */\n success?: boolean\n /** Will display the input in warning state. */\n warning?: boolean\n}\n\nconst MazBtn = defineAsyncComponent(() => import('./MazBtn.vue'))\nconst MinusIcon = defineAsyncComponent(() => import('../../icons/minus.svg'))\nconst PlusIcon = defineAsyncComponent(() => import('../../icons/plus.svg'))\n\nconst currentValue = computed({\n get: () => props.modelValue,\n set: value => emitValue(value),\n})\n\nfunction findClosestStep(number: number) {\n return Math.round(number / props.step) * props.step\n}\n\nfunction checkValue(value?: number) {\n if (typeof value !== 'number')\n return\n if (value <= props.min)\n return props.min\n return value >= props.max ? props.max : findClosestStep(value)\n}\n\nconst emitDebounced = debounce((value?: number) => emitValue(value), 300)\n\nfunction emitValue(newValue?: number) {\n newValue = checkValue(newValue)\n if (currentValue.value === newValue)\n return\n emits('update:model-value', newValue)\n}\n\nemitValue(currentValue.value)\n\nconst incrementDisabled = computed(() => props.modelValue && props.modelValue >= props.max)\nconst decrementDisabled = computed(() => props.modelValue && props.modelValue <= props.min)\n\nfunction increment() {\n if (props.disabled || incrementDisabled.value)\n return\n\n if (\n (currentValue.value === undefined || currentValue.value === null)\n && Number.isFinite(props.min)\n ) {\n currentValue.value = props.min\n return\n }\n\n currentValue.value = (currentValue.value ?? 0) + 1 * props.step\n}\nfunction decrement() {\n if (props.disabled || decrementDisabled.value)\n return\n\n if (\n (currentValue.value === undefined || currentValue.value === null)\n && Number.isFinite(props.min)\n ) {\n currentValue.value = props.min\n return\n }\n\n currentValue.value = (currentValue.value ?? 0) - 1 * props.step\n}\n</script>\n\n<template>\n <div\n class=\"m-input-number m-reset-css\"\n :class=\"[`m-input-number--${size}`, props.class, { '--block': block }]\"\n :style=\"style\"\n >\n <MazBtn\n v-if=\"!noButtons\"\n color=\"transparent\"\n :size\n tabindex=\"-1\"\n class=\"m-input-number__button m-input-number__decrement-button\"\n :disabled=\"decrementDisabled || disabled\"\n @click=\"decrement\"\n >\n <MinusIcon class=\"m-input-number__button__icon\" />\n </MazBtn>\n <MazInput\n :model-value=\"currentValue\"\n type=\"number\"\n class=\"m-input-number__input\"\n :class=\"{ '--no-buttons': noButtons, '--text-center': textCenter }\"\n :disabled\n :min\n :max\n :step\n :error\n :success\n :warning\n :hint\n v-bind=\"$attrs\"\n :inputmode\n :size\n block\n @keydown.up.prevent=\"increment\"\n @keydown.down.prevent=\"decrement\"\n @focus=\"$emit('focus', $event)\"\n @change=\"$emit('change', $event)\"\n @blur=\"$emit('blur', $event)\"\n @click=\"$emit('click', $event)\"\n @update:model-value=\"emitDebounced($event as number | undefined)\"\n />\n <MazBtn\n v-if=\"!noButtons\"\n color=\"transparent\"\n no-shadow\n tabindex=\"-1\"\n :size\n class=\"m-input-number__button m-input-number__increment-button\"\n :disabled=\"incrementDisabled || disabled\"\n @click=\"increment\"\n >\n <PlusIcon class=\"m-input-number__button__icon\" />\n </MazBtn>\n </div>\n</template>\n\n<style lang=\"postcss\">\n .m-input-number {\n @apply maz-inline-flex maz-align-top;\n\n &.--block {\n @apply maz-w-full;\n }\n\n &__button {\n &.m-btn.--is-button {\n &::before {\n content: none !important;\n }\n\n &:first-child,\n &:last-child {\n @apply maz-border maz-border-border;\n @apply maz-px-3 maz-py-0;\n @apply dark:maz-border-color-lighter;\n }\n\n &:first-child {\n @apply !maz-rounded-r-none;\n\n margin-right: calc(-1 * 2px);\n }\n\n &:last-child {\n @apply !maz-rounded-l-none;\n\n margin-left: calc(-1 * 2px);\n }\n }\n\n &__icon {\n @apply maz-text-base;\n }\n }\n\n &__input {\n &:not(.--no-buttons) .m-input-wrapper {\n @apply maz-z-1 maz-rounded-none;\n }\n\n &.--text-center input {\n @apply maz-p-0 maz-text-center;\n }\n\n /* Chrome, Safari, Edge, Opera */\n & input::-webkit-outer-spin-button,\n & input::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n\n /* Firefox */\n & input[type='number'] {\n appearance: textfield;\n }\n }\n}\n</style>\n"],"names":["props","__props","emits","__emit","MazBtn","defineAsyncComponent","MinusIcon","PlusIcon","currentValue","computed","value","emitValue","findClosestStep","number","checkValue","emitDebounced","debounce","newValue","incrementDisabled","decrementDisabled","increment","decrement"],"mappings":"4qBAUA,MAAMA,EAAQC,EAcRC,EAAQC,EA+DRC,EAASC,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,0BAAc,CAAA,CAAC,EAC1DC,EAAYD,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,sBAAuB,CAAA,CAAC,EACtEE,EAAWF,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,qBAAsB,CAAA,CAAC,EAEpEG,EAAeC,EAAAA,SAAS,CAC5B,IAAK,IAAMT,EAAM,WACjB,IAAcU,GAAAC,EAAUD,CAAK,CAAA,CAC9B,EAED,SAASE,EAAgBC,EAAgB,CACvC,OAAO,KAAK,MAAMA,EAASb,EAAM,IAAI,EAAIA,EAAM,IAAA,CAGjD,SAASc,EAAWJ,EAAgB,CAClC,GAAI,OAAOA,GAAU,SAErB,OAAIA,GAASV,EAAM,IACVA,EAAM,IACRU,GAASV,EAAM,IAAMA,EAAM,IAAMY,EAAgBF,CAAK,CAAA,CAG/D,MAAMK,EAAgBC,EAAAA,SAAUN,GAAmBC,EAAUD,CAAK,EAAG,GAAG,EAExE,SAASC,EAAUM,EAAmB,CACpCA,EAAWH,EAAWG,CAAQ,EAC1BT,EAAa,QAAUS,GAE3Bf,EAAM,qBAAsBe,CAAQ,CAAA,CAGtCN,EAAUH,EAAa,KAAK,EAEtB,MAAAU,EAAoBT,WAAS,IAAMT,EAAM,YAAcA,EAAM,YAAcA,EAAM,GAAG,EACpFmB,EAAoBV,WAAS,IAAMT,EAAM,YAAcA,EAAM,YAAcA,EAAM,GAAG,EAE1F,SAASoB,GAAY,CACf,GAAA,EAAApB,EAAM,UAAYkB,EAAkB,OAIrC,KAAAV,EAAa,QAAU,QAAaA,EAAa,QAAU,OACzD,OAAO,SAASR,EAAM,GAAG,EAC5B,CACAQ,EAAa,MAAQR,EAAM,IAC3B,MAAA,CAGFQ,EAAa,OAASA,EAAa,OAAS,GAAK,EAAIR,EAAM,KAAA,CAE7D,SAASqB,GAAY,CACf,GAAA,EAAArB,EAAM,UAAYmB,EAAkB,OAIrC,KAAAX,EAAa,QAAU,QAAaA,EAAa,QAAU,OACzD,OAAO,SAASR,EAAM,GAAG,EAC5B,CACAQ,EAAa,MAAQR,EAAM,IAC3B,MAAA,CAGFQ,EAAa,OAASA,EAAa,OAAS,GAAK,EAAIR,EAAM,KAAA"}

package/dist/chunks/{MazInputNumber.vue_vue_type_script_setup_true_lang.Bbod2mLd.mjs → MazInputNumber.vue_vue_type_script_setup_true_lang.CsH-SPhu.mjs} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { defineComponent as h, defineAsyncComponent as s, computed as r, openBlock as a, createElementBlock as F, normalizeClass as E, normalizeStyle as T, createBlock as v, unref as i, withCtx as y, createVNode as m, createCommentVNode as z, mergeProps as A, withKeys as B, withModifiers as k } from "vue";
-import D from "../components/MazInput.mjs";
-import { debounce as K } from "../helpers/debounce.mjs";
+import { debounce as D } from "../helpers/debounce.mjs";
+import K from "../components/MazInput.mjs";
 const G = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "MazInputNumber",
@@ -35,7 +35,7 @@ const G = /* @__PURE__ */ h({
       if (typeof e == "number")
         return e <= n.min ? n.min : e >= n.max ? n.max : w(e);
     }
-    const $ = K((e) => l(e), 300);
+    const $ = D((e) => l(e), 300);
     function l(e) {
       e = M(e), t.value !== e && N("update:model-value", e);
     }
@@ -77,7 +77,7 @@ const G = /* @__PURE__ */ h({
         ]),
         _: 1
       }, 8, ["size", "disabled"])),
-      m(D, A({
+      m(K, A({
         "model-value": t.value,
         type: "number",
         class: ["m-input-number__input", { "--no-buttons": e.noButtons, "--text-center": e.textCenter }],
@@ -124,4 +124,4 @@ const G = /* @__PURE__ */ h({
 export {
   G as _
 };
-//# sourceMappingURL=MazInputNumber.vue_vue_type_script_setup_true_lang.Bbod2mLd.mjs.map
+//# sourceMappingURL=MazInputNumber.vue_vue_type_script_setup_true_lang.CsH-SPhu.mjs.map

package/dist/chunks/MazInputNumber.vue_vue_type_script_setup_true_lang.CsH-SPhu.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MazInputNumber.vue_vue_type_script_setup_true_lang.CsH-SPhu.mjs","sources":["../../src/components/MazInputNumber.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Size } from './types'\nimport { computed, defineAsyncComponent, type HTMLAttributes } from 'vue'\nimport { debounce } from '../helpers/debounce'\nimport MazInput from './MazInput.vue'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MazInputNumberProps>(), {\n style: undefined,\n class: undefined,\n modelValue: undefined,\n disabled: false,\n max: Number.POSITIVE_INFINITY,\n min: Number.NEGATIVE_INFINITY,\n step: 1,\n size: 'md',\n noButtons: false,\n textCenter: true,\n inputmode: 'numeric',\n})\n\nconst emits = defineEmits<{\n /**\n * Emitted when the input value change\n * @property {number | undefined} value - value of the input\n */\n 'update:model-value': [value?: number]\n /**\n * Emitted when the input is focused\n * @property {Event} value - event object\n */\n 'focus': [value: Event]\n /**\n * Emitted when the input is blurred\n * @property {Event} value - event object\n */\n 'blur': [value: Event]\n /**\n * Emitted input is clicked\n * @property {Event} value - event object\n */\n 'click': [value: Event]\n /**\n * Emitted when the value change\n * @property {Event} value - event object\n */\n 'change': [value: Event]\n}>()\n\nexport interface MazInputNumberProps {\n /** The inline style object for the component. */\n style?: HTMLAttributes['style']\n /** The CSS class name for the component. */\n class?: HTMLAttributes['class']\n /** The value of the component (v-model). */\n modelValue?: number\n /** Whether the input number is disabled or not. */\n disabled?: boolean\n /** The maximum value allowed for the input number. */\n max?: number\n /** The minimum value allowed for the input number. */\n min?: number\n /** The step value for incrementing or decrementing the input number. */\n step?: number\n /** The size of the input number component. */\n size?: Size\n /** Whether to hide the increment and decrement buttons or not. */\n noButtons?: boolean\n /** Whether to center the text inside the input or not. */\n textCenter?: boolean\n /** The inputmode attribute for the input. */\n inputmode?: HTMLAttributes['inputmode']\n /** The input will be displayed in full width */\n block?: boolean\n /** Will display the input in error state. */\n error?: boolean\n /** The hint text to display below the input. */\n hint?: string\n /** Will display the input in success state. */\n success?: boolean\n /** Will display the input in warning state. */\n warning?: boolean\n}\n\nconst MazBtn = defineAsyncComponent(() => import('./MazBtn.vue'))\nconst MinusIcon = defineAsyncComponent(() => import('../../icons/minus.svg'))\nconst PlusIcon = defineAsyncComponent(() => import('../../icons/plus.svg'))\n\nconst currentValue = computed({\n get: () => props.modelValue,\n set: value => emitValue(value),\n})\n\nfunction findClosestStep(number: number) {\n return Math.round(number / props.step) * props.step\n}\n\nfunction checkValue(value?: number) {\n if (typeof value !== 'number')\n return\n if (value <= props.min)\n return props.min\n return value >= props.max ? props.max : findClosestStep(value)\n}\n\nconst emitDebounced = debounce((value?: number) => emitValue(value), 300)\n\nfunction emitValue(newValue?: number) {\n newValue = checkValue(newValue)\n if (currentValue.value === newValue)\n return\n emits('update:model-value', newValue)\n}\n\nemitValue(currentValue.value)\n\nconst incrementDisabled = computed(() => props.modelValue && props.modelValue >= props.max)\nconst decrementDisabled = computed(() => props.modelValue && props.modelValue <= props.min)\n\nfunction increment() {\n if (props.disabled || incrementDisabled.value)\n return\n\n if (\n (currentValue.value === undefined || currentValue.value === null)\n && Number.isFinite(props.min)\n ) {\n currentValue.value = props.min\n return\n }\n\n currentValue.value = (currentValue.value ?? 0) + 1 * props.step\n}\nfunction decrement() {\n if (props.disabled || decrementDisabled.value)\n return\n\n if (\n (currentValue.value === undefined || currentValue.value === null)\n && Number.isFinite(props.min)\n ) {\n currentValue.value = props.min\n return\n }\n\n currentValue.value = (currentValue.value ?? 0) - 1 * props.step\n}\n</script>\n\n<template>\n <div\n class=\"m-input-number m-reset-css\"\n :class=\"[`m-input-number--${size}`, props.class, { '--block': block }]\"\n :style=\"style\"\n >\n <MazBtn\n v-if=\"!noButtons\"\n color=\"transparent\"\n :size\n tabindex=\"-1\"\n class=\"m-input-number__button m-input-number__decrement-button\"\n :disabled=\"decrementDisabled || disabled\"\n @click=\"decrement\"\n >\n <MinusIcon class=\"m-input-number__button__icon\" />\n </MazBtn>\n <MazInput\n :model-value=\"currentValue\"\n type=\"number\"\n class=\"m-input-number__input\"\n :class=\"{ '--no-buttons': noButtons, '--text-center': textCenter }\"\n :disabled\n :min\n :max\n :step\n :error\n :success\n :warning\n :hint\n v-bind=\"$attrs\"\n :inputmode\n :size\n block\n @keydown.up.prevent=\"increment\"\n @keydown.down.prevent=\"decrement\"\n @focus=\"$emit('focus', $event)\"\n @change=\"$emit('change', $event)\"\n @blur=\"$emit('blur', $event)\"\n @click=\"$emit('click', $event)\"\n @update:model-value=\"emitDebounced($event as number | undefined)\"\n />\n <MazBtn\n v-if=\"!noButtons\"\n color=\"transparent\"\n no-shadow\n tabindex=\"-1\"\n :size\n class=\"m-input-number__button m-input-number__increment-button\"\n :disabled=\"incrementDisabled || disabled\"\n @click=\"increment\"\n >\n <PlusIcon class=\"m-input-number__button__icon\" />\n </MazBtn>\n </div>\n</template>\n\n<style lang=\"postcss\">\n .m-input-number {\n @apply maz-inline-flex maz-align-top;\n\n &.--block {\n @apply maz-w-full;\n }\n\n &__button {\n &.m-btn.--is-button {\n &::before {\n content: none !important;\n }\n\n &:first-child,\n &:last-child {\n @apply maz-border maz-border-border;\n @apply maz-px-3 maz-py-0;\n @apply dark:maz-border-color-lighter;\n }\n\n &:first-child {\n @apply !maz-rounded-r-none;\n\n margin-right: calc(-1 * 2px);\n }\n\n &:last-child {\n @apply !maz-rounded-l-none;\n\n margin-left: calc(-1 * 2px);\n }\n }\n\n &__icon {\n @apply maz-text-base;\n }\n }\n\n &__input {\n &:not(.--no-buttons) .m-input-wrapper {\n @apply maz-z-1 maz-rounded-none;\n }\n\n &.--text-center input {\n @apply maz-p-0 maz-text-center;\n }\n\n /* Chrome, Safari, Edge, Opera */\n & input::-webkit-outer-spin-button,\n & input::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n\n /* Firefox */\n & input[type='number'] {\n appearance: textfield;\n }\n }\n}\n</style>\n"],"names":["props","__props","emits","__emit","MazBtn","defineAsyncComponent","MinusIcon","PlusIcon","currentValue","computed","value","emitValue","findClosestStep","number","checkValue","emitDebounced","debounce","newValue","incrementDisabled","decrementDisabled","increment","decrement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,UAAMA,IAAQC,GAcRC,IAAQC,GA+DRC,IAASC,EAAqB,MAAM,OAAO,0BAAc,CAAC,GAC1DC,IAAYD,EAAqB,MAAM,OAAO,sBAAuB,CAAC,GACtEE,IAAWF,EAAqB,MAAM,OAAO,qBAAsB,CAAC,GAEpEG,IAAeC,EAAS;AAAA,MAC5B,KAAK,MAAMT,EAAM;AAAA,MACjB,KAAK,CAASU,MAAAC,EAAUD,CAAK;AAAA,IAAA,CAC9B;AAED,aAASE,EAAgBC,GAAgB;AACvC,aAAO,KAAK,MAAMA,IAASb,EAAM,IAAI,IAAIA,EAAM;AAAA,IAAA;AAGjD,aAASc,EAAWJ,GAAgB;AAClC,UAAI,OAAOA,KAAU;AAErB,eAAIA,KAASV,EAAM,MACVA,EAAM,MACRU,KAASV,EAAM,MAAMA,EAAM,MAAMY,EAAgBF,CAAK;AAAA,IAAA;AAG/D,UAAMK,IAAgBC,EAAS,CAACN,MAAmBC,EAAUD,CAAK,GAAG,GAAG;AAExE,aAASC,EAAUM,GAAmB;AAEpC,MADAA,IAAWH,EAAWG,CAAQ,GAC1BT,EAAa,UAAUS,KAE3Bf,EAAM,sBAAsBe,CAAQ;AAAA,IAAA;AAGtC,IAAAN,EAAUH,EAAa,KAAK;AAEtB,UAAAU,IAAoBT,EAAS,MAAMT,EAAM,cAAcA,EAAM,cAAcA,EAAM,GAAG,GACpFmB,IAAoBV,EAAS,MAAMT,EAAM,cAAcA,EAAM,cAAcA,EAAM,GAAG;AAE1F,aAASoB,IAAY;AACf,UAAA,EAAApB,EAAM,YAAYkB,EAAkB,QAIrC;AAAA,aAAAV,EAAa,UAAU,UAAaA,EAAa,UAAU,SACzD,OAAO,SAASR,EAAM,GAAG,GAC5B;AACA,UAAAQ,EAAa,QAAQR,EAAM;AAC3B;AAAA,QAAA;AAGF,QAAAQ,EAAa,SAASA,EAAa,SAAS,KAAK,IAAIR,EAAM;AAAA;AAAA,IAAA;AAE7D,aAASqB,IAAY;AACf,UAAA,EAAArB,EAAM,YAAYmB,EAAkB,QAIrC;AAAA,aAAAX,EAAa,UAAU,UAAaA,EAAa,UAAU,SACzD,OAAO,SAASR,EAAM,GAAG,GAC5B;AACA,UAAAQ,EAAa,QAAQR,EAAM;AAC3B;AAAA,QAAA;AAGF,QAAAQ,EAAa,SAASA,EAAa,SAAS,KAAK,IAAIR,EAAM;AAAA;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{MazInputPhoneNumber.B173m1hd.mjs → MazInputPhoneNumber.BluSBPXE.mjs} RENAMED Viewed

@@ -1,8 +1,8 @@
 import { ref as d, defineComponent as G, defineAsyncComponent as $, computed as F, onBeforeMount as H, onMounted as K, watch as w, provide as Q, openBlock as L, createElementBlock as X, normalizeClass as Z, normalizeStyle as x, createBlock as _, unref as C, mergeProps as U, withCtx as I, renderSlot as S, createCommentVNode as ee, createVNode as oe, nextTick as te } from "vue";
-import { getCountries as R, getCountryCallingCode as g, isSupportedCountry as ne, parsePhoneNumberFromString as re, getExampleNumber as ae, AsYouType as le } from "libphonenumber-js";
-import { useInstanceUniqId as ue } from "../composables/useInstanceUniqId.mjs";
+import { useInstanceUniqId as ne } from "../composables/useInstanceUniqId.mjs";
+import { getCountries as R, getCountryCallingCode as g, isSupportedCountry as re, parsePhoneNumberFromString as ae, getExampleNumber as le, AsYouType as ue } from "libphonenumber-js";
 import { _ as se } from "./_plugin-vue_export-helper.CHgC5LLL.mjs";
-import '../assets/MazInputPhoneNumber.DKac4ZYj.css';const ie = {
+import '../assets/MazInputPhoneNumber.Ill3zwW5.css';const ie = {
   countrySelector: {
     placeholder: "Country code",
     error: "Choose country",
@@ -15,7 +15,7 @@ import '../assets/MazInputPhoneNumber.DKac4ZYj.css';const ie = {
 }, h = d();
 function ce(t) {
   try {
-    const n = ne(t);
+    const n = re(t);
     return n || (console.error(`[maz-ui](MazInputPhoneNumber) The code country "${t}" is not available`), !1);
   } catch (n) {
     return console.error(`[maz-ui](MazInputPhoneNumber) ${n}`), !1;
@@ -32,7 +32,7 @@ function de({
         isValid: !1,
         countryCode: n
       };
-    const o = re(t, n ?? void 0), f = (o == null ? void 0 : o.isValid()) ?? !1, c = n && r ? (o == null ? void 0 : o.country) && n === o.country : !0;
+    const o = ae(t, n ?? void 0), f = (o == null ? void 0 : o.isValid()) ?? !1, c = n && r ? (o == null ? void 0 : o.country) && n === o.country : !0;
     return {
       isValid: f && !!c,
       countryCode: n,
@@ -60,14 +60,14 @@ async function Y() {
 function fe(t) {
   var n;
   try {
-    return h.value && t ? (n = ae(t, h.value)) == null ? void 0 : n.formatNational() : void 0;
+    return h.value && t ? (n = le(t, h.value)) == null ? void 0 : n.formatNational() : void 0;
   } catch (r) {
     console.error(`[maz-ui](MazInputPhoneNumber) ${r}`);
   }
 }
 function pe(t, n) {
   try {
-    return !n || !t ? void 0 : new le(t).input(n);
+    return !n || !t ? void 0 : new ue(t).input(n);
   } catch (r) {
     throw new Error(`[MazInputPhoneNumber](getAsYouTypeFormat) ${r}`);
   }
@@ -211,7 +211,7 @@ const we = /* @__PURE__ */ G({
   },
   emits: ["update:model-value", "country-code", "update:country-code", "update", "data"],
   setup(t, { emit: n }) {
-    const r = t, o = n, f = $(() => import("./CountrySelector.C5XZelLY.mjs")), c = $(() => import("./PhoneInput.9GQJbL9x.mjs")), { fetchCountryCode: v, getBrowserLocale: m } = Pe(), { isCountryAvailable: q, getPhoneNumberResults: J } = he(), V = ue({
+    const r = t, o = n, f = $(() => import("./CountrySelector.qQCR0FE6.mjs")), c = $(() => import("./PhoneInput.DYm0yzgy.mjs")), { fetchCountryCode: v, getBrowserLocale: m } = Pe(), { isCountryAvailable: q, getPhoneNumberResults: J } = he(), V = ne({
       componentName: "MazInputPhoneNumber",
       providedId: r.id
     }), i = d(), u = d(), b = d(!1), P = d(!1), B = F(() => ({
@@ -383,10 +383,10 @@ const we = /* @__PURE__ */ G({
       ], 6);
     };
   }
-}), Be = /* @__PURE__ */ se(we, [["__scopeId", "data-v-7d4b0f6a"]]);
+}), Be = /* @__PURE__ */ se(we, [["__scopeId", "data-v-0079aa2b"]]);
 export {
   Be as M,
   he as a,
   Pe as u
 };
-//# sourceMappingURL=MazInputPhoneNumber.B173m1hd.mjs.map
+//# sourceMappingURL=MazInputPhoneNumber.BluSBPXE.mjs.map