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/components/MazSelect.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MazSelect.mjs","sources":["../../src/components/MazSelect.vue"],"sourcesContent":["<script\n lang=\"ts\"\n setup\n generic=\"T extends ModelValueSimple, U extends MazSelectOption\"\n>\nimport type { Color, ModelValueSimple, Position, Size } from '@components/types'\nimport MazInput from '@components/MazInput.vue'\nimport { useInstanceUniqId } from '@composables/useInstanceUniqId'\nimport { useStringMatching } from '@composables/useStringMatching'\nimport { vClosable } from '@directives/vClosable'\nimport { debounceCallback } from '@helpers/debounceCallback'\nimport { normalizeString } from '@helpers/normalizeString'\n\nimport {\n type ComponentPublicInstance,\n computed,\n defineAsyncComponent,\n type HTMLAttributes,\n nextTick,\n onBeforeMount,\n ref,\n} from 'vue'\n\nexport type NormalizedOption = Record<string, ModelValueSimple>\nexport interface MazSelectOptionWithOptGroup {\n label: string\n options: (NormalizedOption \| string \| number \| boolean)[]\n}\nexport type MazSelectOption =\n \| NormalizedOption\n \| string\n \| number\n \| boolean\n \| MazSelectOptionWithOptGroup\n\nexport interface MazSelectProps<T extends ModelValueSimple, U extends MazSelectOption> {\n /** Style attribut of the component root element /\n style?: HTMLAttributes['style']\n /* Class attribut of the component root element /\n class?: HTMLAttributes['class']\n /* The id of the select /\n id?: string\n /* The value of the select /\n modelValue?: T \| T[]\n /* The options of the select /\n options?: U[]\n /\n The key of the option value\n * @default 'value'\n /\n optionValueKey?: string\n /\n The key of the option label\n * @default 'label'\n /\n optionLabelKey?: string\n /\n The key of the option input value\n * @default 'label'\n /\n optionInputValueKey?: string\n /\n The position of the list\n * @default 'bottom left'\n /\n listPosition?: Position\n /* The height of the option list item /\n itemHeight?: number\n /* The max height of the option list /\n maxListHeight?: number\n /* The max width of the option list /\n maxListWidth?: number\n /* The min height of the option list /\n minListHeight?: number\n /* The min width of the option list /\n minListWidth?: number\n /\n The size of the select\n * @default 'md'\n /\n size?: Size\n /\n The color of the select\n * @default 'primary'\n /\n color?: Color\n /* Display search input in option list /\n search?: boolean\n /\n The placeholder of the search input\n * @default 'Search in options'\n /\n searchPlaceholder?: string\n /\n Replace the default search function to provide a custom search function\n * @default undefined\n /\n searchFunction?: (query: string, options: U[]) => U[] \| undefined\n /\n The threshold for the search input where 1 is a perfect match and 0 is a match with any character\n * @default 0.75\n /\n searchThreshold?: number\n /* if true, the option list is opened by default /\n open?: boolean\n /* Enable the multiple selection /\n multiple?: boolean\n /* Make the input required in the form /\n required?: boolean\n /* Disable the component /\n disabled?: boolean\n /* The input will be displayed in full width /\n block?: boolean\n /* The exclude selectors for the v-closable directive - will exclude the elements from the directive /\n excludeSelectors?: string[]\n /\n The autocomplete attribute of the input\n * @default 'off'\n /\n autocomplete?: string\n}\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MazSelectProps<T, U>>(), {\n id: undefined,\n class: undefined,\n multiple: undefined,\n style: undefined,\n modelValue: undefined,\n optionValueKey: 'value',\n optionLabelKey: 'label',\n optionInputValueKey: 'label',\n listPosition: 'bottom left',\n itemHeight: undefined,\n maxListHeight: 240,\n maxListWidth: undefined,\n minListWidth: undefined,\n minListHeight: undefined,\n size: 'md',\n color: 'primary',\n options: undefined,\n excludeSelectors: undefined,\n searchPlaceholder: 'Search in options',\n searchThreshold: 0.75,\n autocomplete: 'off',\n})\n\nconst emits = defineEmits<{\n /\n On list is closed\n * @event 'close'\n * @property {Event} value - the event\n /\n 'close': [value?: Event]\n /\n On list is opened\n * @event 'open'\n * @property {boolean} value - if the list is opened or not\n /\n 'open': [value: boolean]\n /\n On input blur\n * @event 'blur'\n * @property {Event} value - the event\n /\n 'blur': [value: Event]\n /\n On input focus\n * @event 'focus'\n * @property {Event} value - the event\n /\n 'focus': [value: Event]\n /\n On input change value\n * @event 'change'\n * @property {Event} value - the event\n /\n 'change': [value: Event]\n /\n On input value\n * @event 'input'\n * @property {Event} value - the event\n /\n 'input': [value: Event]\n /\n On model value update, returns the new value\n * @event 'update:model-value'\n * @property {ModelValueSimple \| ModelValueSimple[]} value - the new value\n /\n 'update:model-value': [value: T \| T[]]\n /\n On selected value, returns the option object\n * @event 'selected-option'\n * @property {MazSelectOption} value - the option object\n /\n 'selected-option': [value: U]\n}>()\n\nconst MazCheckbox = defineAsyncComponent(() => import('@components/MazCheckbox.vue'))\n\nconst SearchIcon = defineAsyncComponent(() => import('@icons/magnifying-glass.svg'))\nconst ChevronDownIcon = defineAsyncComponent(() => import('@icons/chevron-down.svg'))\nconst NoSymbolIcon = defineAsyncComponent(() => import('@icons/no-symbol.svg'))\n\ndefineExpose<{\n openList: typeof openList\n closeList: typeof closeList\n}>({\n /* Method to open the option list /\n openList,\n /* Method to close the option list */\n closeList,\n})\n\nconst listOpened = ref(false)\nconst tmpModelValueIndex = ref<number>()\n\nconst isBlackOrTransparentColor = computed(() =>\n ['black', 'transparent', 'white'].includes(props.color),\n)\n\nconst selectedTextColor = computed(() =>\n isBlackOrTransparentColor.value\n ? `var(--maz-color-black)`\n : `var(--maz-color-${props.color}-800)`,\n)\nconst selectedBgColor = computed(() =>\n isBlackOrTransparentColor.value\n ? 'var(--maz-color-muted)'\n : `var(--maz-color-${props.color}-100)`,\n)\nconst keyboardSelectedBgColor = computed(() =>\n isBlackOrTransparentColor.value\n ? 'var(--maz-color-muted)'\n : `var(--maz-color-${props.color}-200)`,\n)\n\nconst hasListOpened = computed(() => listOpened.value \|\| props.open)\n\nconst instanceId = useInstanceUniqId({\n componentName: 'MazSelect',\n providedId: props.id,\n})\n\nfunction getOptionPayload(option: string \| number \| boolean): NormalizedOption {\n return {\n [props.optionValueKey]: option,\n [props.optionLabelKey]: option,\n [props.optionInputValueKey]: option,\n }\n}\nfunction getNormalizedOptionPayload(option: NormalizedOption): NormalizedOption {\n return {\n ...option,\n [props.optionValueKey]: option[props.optionValueKey],\n [props.optionLabelKey]: option[props.optionLabelKey],\n [props.optionInputValueKey]: option[props.optionInputValueKey],\n }\n}\n\nfunction getNormalizedOptions(options: U[]) {\n const normalizedOptions: NormalizedOption[] = []\n\n if (!options?.length) {\n return []\n }\n\n for (const option of options) {\n if (typeof option === 'string' \|\| typeof option === 'number' \|\| typeof option === 'boolean') {\n normalizedOptions.push(getOptionPayload(option))\n }\n else if (\n typeof option === 'object'\n && 'options' in option\n && Array.isArray(option.options)\n ) {\n normalizedOptions.push(\n { label: option.label, isOptGroup: true },\n ...option.options.map(opt =>\n typeof opt === 'string' \|\| typeof opt === 'number' \|\| typeof opt === 'boolean'\n ? getOptionPayload(opt)\n : getNormalizedOptionPayload(opt),\n ),\n )\n }\n else {\n normalizedOptions.push(getNormalizedOptionPayload(option as NormalizedOption))\n }\n }\n\n return normalizedOptions\n}\n\nconst optionsNormalized = computed<NormalizedOption[]>(() => getNormalizedOptions(props.options ?? []))\n\nconst selectedOptions = computed(\n () =>\n optionsNormalized.value?.filter((option) => {\n return props.multiple\n ? Array.isArray(props.modelValue)\n ? props.modelValue.includes(option[props.optionValueKey] as T)\n && !isNullOrUndefined(option[props.optionValueKey])\n : false\n : props.modelValue === option[props.optionValueKey]\n && !isNullOrUndefined(option[props.optionValueKey])\n }) ?? [],\n)\n\nonBeforeMount(() => {\n if (!props.options?.length) {\n console.warn('[maz-ui](MazSelect) you must provide options')\n }\n\n updateTmpModelValueIndex()\n})\n\nconst mazSelectElement = ref<HTMLDivElement>()\nconst mazInputComponent = ref<ComponentPublicInstance<typeof MazInput>>()\nconst searchInputComponent = ref<ComponentPublicInstance<typeof MazInput>>()\nconst optionListElement = ref<HTMLDivElement>()\n\nfunction isNullOrUndefined(value: unknown) {\n return value === undefined \|\| value === null\n}\n\nfunction isSelectedOption(option: NormalizedOption) {\n const hasOption\n = selectedOptions.value?.some(\n selectedOption => selectedOption[props.optionValueKey] === option[props.optionValueKey],\n ) ?? false\n\n return hasOption && !isNullOrUndefined(option[props.optionValueKey])\n}\n\nconst mazInputValue = computed(() => {\n if (props.multiple && props.modelValue && Array.isArray(props.modelValue)) {\n return props.modelValue\n .map(\n value =>\n optionsNormalized.value?.find(option => option[props.optionValueKey] === value)?.[\n props.optionInputValueKey\n ],\n )\n .join(', ')\n }\n\n const selectedOption = optionsNormalized.value?.find(\n option => option[props.optionValueKey] === props.modelValue,\n )\n\n return isNullOrUndefined(props.modelValue)\n ? undefined\n : selectedOption?.[props.optionInputValueKey]\n})\n\nconst listTransition = computed(() =>\n props.listPosition.includes('bottom') ? 'maz-slide' : 'maz-slideinvert',\n)\n\nconst searchQuery = ref<string>('')\nconst query = ref<string>('')\n\nfunction searchInValue(value?: ModelValueSimple, query?: string) {\n return query && value && normalizeString(value).includes(normalizeString(query))\n}\n\nfunction getFilteredOptionWithQuery(query: string) {\n return query\n ? optionsNormalized.value?.filter((option) => {\n const searchValue = option[props.optionLabelKey]\n const searchValue3 = option[props.optionValueKey]\n const searchValue2 = option[props.optionInputValueKey]\n\n const threshold = props.searchThreshold\n\n return (\n searchInValue(searchValue, query)\n \|\| searchInValue(searchValue2, query)\n \|\| searchInValue(searchValue3, query)\n \|\| (typeof searchValue === 'string'\n && useStringMatching(searchValue, query, threshold).isMatching.value)\n \|\| (typeof searchValue2 === 'string'\n && useStringMatching(searchValue2, query, threshold).isMatching.value)\n \|\| (typeof searchValue3 === 'string'\n && useStringMatching(searchValue3, query, threshold).isMatching.value)\n )\n })\n : optionsNormalized.value\n}\n\nconst optionList = computed(() => {\n return props.searchFunction && props.search && searchQuery.value\n ? getNormalizedOptions(props.searchFunction(searchQuery.value, props.options ?? []) ?? [])\n : getFilteredOptionWithQuery(searchQuery.value)\n})\n\nasync function closeList(event?: Event) {\n if (!hasListOpened.value)\n return\n if (\n event\n && (('relatedTarget' in event\n && mazSelectElement.value?.contains(event.relatedTarget as Node))\n \|\| event.type === 'keydown')\n ) {\n return event.preventDefault()\n }\n\n const eventTargetId\n = event\n && 'relatedTarget' in event\n && event.relatedTarget instanceof HTMLElement\n && event.relatedTarget.getAttribute('id')\n\n if (props.excludeSelectors?.includes(`#${eventTargetId}`)) {\n return event?.preventDefault()\n }\n\n await nextTick()\n listOpened.value = false\n tmpModelValueIndex.value = 0\n emits('close', event)\n}\n\nasync function openList(event: Event) {\n if (props.disabled \|\| hasListOpened.value)\n return\n\n event?.preventDefault()\n listOpened.value = true\n await scrollToOptionIndex()\n emits('focus', event)\n emits('open', listOpened.value)\n}\n\nfunction focusMainInput() {\n ;(mazInputComponent.value?.$el as HTMLElement).querySelector('input')?.focus()\n}\nfunction emitInputMainInput() {\n ;(mazInputComponent.value?.$el as HTMLElement).querySelector('input')?.dispatchEvent(new Event('input'))\n}\n\nfunction toggleList(event: Event) {\n if (listOpened.value) {\n closeList(event)\n }\n else {\n focusMainInput()\n }\n}\n\nfunction focusSearchInputAndSetQuery(q: string) {\n searchQuery.value = q\n ;(searchInputComponent.value?.$el as HTMLElement).querySelector('input')?.focus()\n}\n\nfunction searchOptionWithQuery(keyPressed: string) {\n if (keyPressed === 'Backspace' && query.value.length > 0) {\n query.value = query.value.slice(0, -1)\n }\n else {\n query.value += keyPressed\n }\n\n const filteredOptions = getFilteredOptionWithQuery(query.value)\n\n if (filteredOptions?.length) {\n tmpModelValueIndex.value = optionList.value?.findIndex(\n option => option[props.optionValueKey] === filteredOptions[0][props.optionValueKey],\n )\n\n if (typeof tmpModelValueIndex.value === 'number' && tmpModelValueIndex.value >= 0) {\n scrollToOptionIndex(tmpModelValueIndex.value)\n }\n }\n\n debounceCallback(() => {\n query.value = ''\n }, 1000)\n}\n\nfunction mainInputKeyboardHandler(event: KeyboardEvent) {\n const keyPressed = event.key\n\n if (/^[\\dA-Za-z\\u0400-\\u04FF]$/.test(keyPressed)) {\n event.preventDefault()\n openList(event)\n\n if (props.search) {\n focusSearchInputAndSetQuery(keyPressed)\n }\n else {\n searchOptionWithQuery(keyPressed)\n }\n }\n else {\n keyboardHandler(event)\n }\n}\n\nfunction keyboardHandler(event: KeyboardEvent, shouldSelectWithSpace = true) {\n const code = event.code\n\n const isArrow = ['ArrowUp', 'ArrowDown'].includes(code)\n const shouldSelect = (shouldSelectWithSpace ? ['Enter', 'Space'] : ['Enter']).includes(code)\n const shouldCloseList = code === 'Escape' && hasListOpened.value\n\n if (isArrow) {\n arrowHandler(event, tmpModelValueIndex.value)\n }\n else if (shouldSelect) {\n enterHandler(event, tmpModelValueIndex.value)\n }\n else if (shouldCloseList) {\n closeList(event)\n }\n}\n\nfunction arrowHandler(event: KeyboardEvent, currentIndex?: number) {\n event.preventDefault()\n const code = event.code\n\n if (!hasListOpened.value)\n openList(event)\n\n const optionsLength = optionList.value?.length\n\n if (!optionsLength) {\n return\n }\n\n if (typeof currentIndex === 'number') {\n if (currentIndex === optionsLength - 1 && code === 'ArrowDown') {\n tmpModelValueIndex.value = 0\n }\n else if (currentIndex === 0 && code === 'ArrowUp') {\n tmpModelValueIndex.value = optionsLength - 1\n }\n else {\n tmpModelValueIndex.value = code === 'ArrowDown' ? currentIndex + 1 : currentIndex - 1\n }\n }\n else {\n tmpModelValueIndex.value = code === 'ArrowDown' ? 0 : optionsLength - 1\n }\n\n scrollToOptionIndex(tmpModelValueIndex.value)\n}\n\nfunction enterHandler(event: KeyboardEvent, currentIndex?: number) {\n if (!hasListOpened.value) {\n return\n }\n\n event.preventDefault()\n\n const newValue = currentIndex\n ? optionList.value?.[currentIndex] ?? optionList.value?.[0]\n : optionList.value?.[0]\n\n if (!isNullOrUndefined(newValue)) {\n updateValue(newValue as Record<string, ModelValueSimple>)\n }\n}\n\nasync function scrollToOptionIndex(index?: number) {\n await nextTick()\n\n if (typeof index !== 'number') {\n updateTmpModelValueIndex()\n }\n\n const selectedIndex = index ?? tmpModelValueIndex.value\n\n if (typeof selectedIndex === 'number' && selectedIndex >= 0) {\n const item = optionListElement.value\n ?.querySelectorAll('.m-select-list-item')\n\n item?.[selectedIndex]?.scrollIntoView({\n behavior: 'auto',\n block: 'nearest',\n inline: 'start',\n })\n }\n}\n\nfunction updateTmpModelValueIndex(inputOption?: NormalizedOption) {\n const index = optionList.value?.findIndex((option) => {\n if (props.multiple && Array.isArray(props.modelValue)) {\n if (inputOption) {\n return inputOption[props.optionValueKey] === option[props.optionValueKey]\n }\n const values = [...props.modelValue].reverse()\n return values[0] === option[props.optionValueKey]\n }\n else {\n return selectedOptions.value?.[0]?.[props.optionValueKey] === option[props.optionValueKey]\n }\n })\n\n tmpModelValueIndex.value = index && index >= 0 ? index : 0\n}\n\nfunction updateValue(inputOption: NormalizedOption, mustCloseList = true) {\n if (mustCloseList && !props.multiple) {\n nextTick(() => closeList())\n }\n\n searchQuery.value = ''\n\n const isAlreadySelected = selectedOptions.value?.some(\n option => option[props.optionValueKey] === inputOption[props.optionValueKey],\n )\n\n let newValue = selectedOptions.value\n\n if (isAlreadySelected && props.multiple) {\n newValue = newValue?.filter(\n option => option[props.optionValueKey] !== inputOption[props.optionValueKey],\n )\n }\n else if (props.multiple) {\n newValue.push(inputOption)\n }\n else {\n newValue = [inputOption]\n }\n\n const selectedValues = newValue.map(option => option[props.optionValueKey])\n\n emits('update:model-value', (props.multiple ? selectedValues : selectedValues[0]) as T \| T[])\n emits('selected-option', inputOption as U)\n emitInputMainInput()\n updateTmpModelValueIndex(inputOption)\n focusMainInput()\n}\n</script>\n\n<template>\n <div\n ref=\"mazSelectElement\"\n v-closable=\"{\n exclude: excludeSelectors,\n handler: closeList,\n }\"\n class=\"m-select m-reset-css\"\n :class=\"[\n { '--is-open': hasListOpened, '--disabled': disabled, '--block': block },\n props.class,\n `--${size}`,\n ]\"\n :style=\"[style, { '--keyboard-selected-bg-color': keyboardSelectedBgColor, '--selected-bg-color': selectedBgColor, '--selected-text-color': selectedTextColor }]\"\n >\n <MazInput\n :id=\"instanceId\"\n ref=\"mazInputComponent\"\n class=\"m-select-input\"\n v-bind=\"$attrs\"\n :required=\"required\"\n :border-active=\"listOpened\"\n :color=\"color\"\n :model-value=\"mazInputValue\"\n :size=\"size\"\n block\n :autocomplete\n :disabled=\"disabled\"\n @focus.prevent.stop=\"openList\"\n @blur.prevent.stop=\"closeList\"\n @click.prevent.stop=\"openList\"\n @change=\"emits('change', $event)\"\n @input=\"emits('input', $event)\"\n @keydown=\"mainInputKeyboardHandler\"\n >\n <template #right-icon>\n <button\n tabindex=\"-1\"\n type=\"button\"\n class=\"m-select-input__toggle-button maz-custom\"\n :aria-label=\"`${hasListOpened ? 'collapse' : 'expand'} list of options`\"\n @click.stop=\"toggleList\"\n >\n <ChevronDownIcon class=\"m-select-chevron maz-text-xl\" />\n </button>\n </template>\n </MazInput>\n <Transition :name=\"listTransition\">\n <div\n v-if=\"hasListOpened\"\n ref=\"optionListElement\"\n class=\"m-select-list\"\n :class=\"{\n '--top': listPosition.includes('top'),\n '--left': listPosition.includes('left'),\n '--right': listPosition.includes('right'),\n '--bottom': listPosition.includes('bottom'),\n }\"\n :style=\"{\n maxHeight: `${maxListHeight}px`,\n maxWidth: `${maxListWidth}px`,\n minHeight: `${minListHeight}px`,\n minWidth: `${minListWidth}px`,\n }\"\n >\n <MazInput\n v-if=\"search\"\n ref=\"searchInputComponent\"\n v-model=\"searchQuery\"\n size=\"sm\"\n :color=\"color\"\n :placeholder=\"searchPlaceholder\"\n name=\"search\"\n inputmode=\"search\"\n block\n autocomplete=\"off\"\n tabindex=\"-1\"\n class=\"m-select-list__search-input maz-flex-none\"\n :left-icon=\"SearchIcon\"\n @keydown=\"keyboardHandler($event, false)\"\n @update:model-value=\"tmpModelValueIndex = 0\"\n />\n <!--\n @slot No results slot - Displayed when no results corresponding with search query\n -->\n <slot v-if=\"!optionList \|\| optionList.length <= 0\" name=\"no-results\">\n <span class=\"m-select-list__no-results\">\n <NoSymbolIcon class=\"maz-h-6 maz-w-6 maz-text-normal\" />\n </span>\n </slot>\n <div v-else class=\"m-select-list__scroll-wrapper\" tabindex=\"-1\">\n <template v-for=\"(option, i) in optionList\" :key=\"i\">\n <!--\n @slot Custom optgroup label\n @binding {String} label - the label of the optgroup\n -->\n <slot v-if=\"option.label && option.isOptGroup\" name=\"optgroup\" :label=\"option.label\">\n <span class=\"m-select-list-optgroup\">\n {{ option.label }}\n </span>\n </slot>\n\n <button\n v-else\n tabindex=\"-1\"\n type=\"button\"\n class=\"m-select-list-item maz-custom maz-flex-none\"\n :class=\"[\n {\n '--is-keyboard-selected': tmpModelValueIndex === i,\n '--is-selected': isSelectedOption(option),\n '--is-none-value': isNullOrUndefined(option[optionValueKey]),\n },\n ]\"\n :style=\"itemHeight ? { height: `${itemHeight}px` } : undefined\"\n @click.prevent.stop=\"updateValue(option)\"\n >\n <MazCheckbox\n v-if=\"multiple\"\n tabindex=\"-1\"\n :model-value=\"isSelectedOption(option)\"\n size=\"sm\"\n :color=\"color\"\n />\n <!--\n @slot Custom option\n @binding {Object} option - the option object\n @binding {Boolean} is-selected - if the option is selected\n -->\n <slot :option=\"option\" :is-selected=\"isSelectedOption(option)\">\n <span>\n {{ option[optionLabelKey] }}\n </span>\n </slot>\n </button>\n </template>\n </div>\n </div>\n </Transition>\n </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n .m-select {\n @apply maz-relative maz-inline-flex maz-align-top;\n\n &.--mini {\n @apply maz-text-xs;\n }\n\n &.--xs {\n @apply maz-text-xs;\n }\n\n &.--sm {\n @apply maz-text-sm;\n }\n\n &.--md {\n @apply maz-text-base;\n }\n\n &.--lg {\n @apply maz-text-lg;\n }\n\n &.--xl {\n @apply maz-text-xl;\n }\n\n &.--block {\n @apply maz-w-full;\n }\n\n &:not(.--disabled):deep(.m-input-input) {\n @apply maz-cursor-pointer;\n }\n\n &-input:deep(.m-input-input) {\n @apply maz-pr-0;\n }\n\n &-input.--has-label:deep(.m-input-input) {\n @apply maz-pr-0;\n }\n\n &-input {\n &__toggle-button {\n @apply maz-flex maz-h-full maz-bg-transparent maz-pl-0 maz-flex-center;\n }\n\n &:deep(input) {\n @apply maz-caret-transparent;\n }\n }\n\n &-chevron {\n @apply maz-text-[1.2em] maz-text-normal maz-transition-all maz-duration-300 maz-ease-out;\n }\n\n &.--is-open {\n & .m-select-chevron {\n transform: rotate(180deg);\n }\n }\n\n .m-select-list {\n @apply maz-absolute maz-z-default-backdrop maz-flex maz-flex-col maz-gap-1 maz-overflow-hidden maz-rounded maz-bg-color maz-p-2 maz-elevation dark:maz-border dark:maz-border-color-light;\n\n &-optgroup {\n @apply maz-flex-none maz-p-0.5 maz-text-start maz-text-[0.875em] maz-text-muted;\n }\n\n min-width: 3.5rem;\n\n &.--top {\n @apply maz-bottom-full;\n }\n\n &.--left {\n @apply maz-left-0;\n }\n\n &.--right {\n @apply maz-right-0;\n }\n\n &.--bottom {\n @apply maz-top-full;\n }\n\n &__scroll-wrapper {\n @apply maz-flex maz-flex-1 maz-flex-col maz-gap-1 maz-overflow-auto;\n }\n\n &__no-results {\n @apply maz-flex maz-p-4 maz-flex-center;\n }\n\n &-item {\n @apply maz-flex maz-w-full maz-cursor-pointer maz-items-center maz-gap-3 maz-truncate maz-rounded maz-bg-transparent maz-px-3 maz-py-[0.5em] maz-text-start maz-text-[1em] maz-transition-colors maz-duration-300 maz-ease-in-out focus-within:maz-bg-color-light hover:maz-bg-color-light;\n\n span {\n @apply maz-truncate;\n }\n\n &.--is-keyboard-selected {\n @apply maz-bg-color-light dark:maz-bg-color-lighter;\n\n &.--is-selected {\n background-color: var(--keyboard-selected-bg-color);\n\n &:hover {\n background-color: var(--keyboard-selected-bg-color);\n }\n }\n }\n\n &.--is-none-value {\n @apply maz-text-muted;\n }\n\n &.--is-selected {\n color: var(--selected-text-color);\n background-color: var(--selected-bg-color);\n\n &:hover {\n background-color: var(--selected-bg-color);\n }\n\n &.--transparent {\n @apply maz-bg-color;\n }\n }\n }\n }\n\n & button.maz-custom {\n @apply maz-cursor-pointer maz-appearance-none maz-border-none;\n }\n}\n</style>\n"],"names":["props","__props","emits","__emit","MazCheckbox","defineAsyncComponent","SearchIcon","ChevronDownIcon","NoSymbolIcon","__expose","openList","closeList","listOpened","ref","tmpModelValueIndex","isBlackOrTransparentColor","computed","selectedTextColor","selectedBgColor","keyboardSelectedBgColor","hasListOpened","instanceId","useInstanceUniqId","getOptionPayload","option","getNormalizedOptionPayload","getNormalizedOptions","options","normalizedOptions","opt","optionsNormalized","selectedOptions","_a","isNullOrUndefined","onBeforeMount","updateTmpModelValueIndex","mazSelectElement","mazInputComponent","searchInputComponent","optionListElement","value","isSelectedOption","selectedOption","mazInputValue","_b","listTransition","searchQuery","query","searchInValue","normalizeString","getFilteredOptionWithQuery","searchValue","searchValue3","searchValue2","threshold","useStringMatching","optionList","event","eventTargetId","nextTick","scrollToOptionIndex","focusMainInput","emitInputMainInput","toggleList","focusSearchInputAndSetQuery","q","searchOptionWithQuery","keyPressed","filteredOptions","debounceCallback","mainInputKeyboardHandler","keyboardHandler","shouldSelectWithSpace","code","isArrow","shouldSelect","shouldCloseList","arrowHandler","enterHandler","currentIndex","optionsLength","newValue","_c","updateValue","index","selectedIndex","item","inputOption","mustCloseList","isAlreadySelected","selectedValues"],"mappings":"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"}
1	+ {"version":3,"file":"MazSelect.mjs","sources":["../../src/components/MazSelect.vue"],"sourcesContent":["<script\n lang=\"ts\"\n setup\n generic=\"T extends ModelValueSimple, U extends MazSelectOption\"\n>\nimport type { Color, ModelValueSimple, Position, Size } from './types'\nimport {\n type ComponentPublicInstance,\n computed,\n defineAsyncComponent,\n type HTMLAttributes,\n nextTick,\n onBeforeMount,\n ref,\n} from 'vue'\nimport { useInstanceUniqId } from '../composables/useInstanceUniqId'\nimport { useStringMatching } from '../composables/useStringMatching'\nimport { vClosable } from '../directives/vClosable'\nimport { debounceCallback } from '../helpers/debounceCallback'\nimport { normalizeString } from '../helpers/normalizeString'\n\nimport MazInput from './MazInput.vue'\n\nexport type NormalizedOption = Record<string, ModelValueSimple>\nexport interface MazSelectOptionWithOptGroup {\n label: string\n options: (NormalizedOption \| string \| number \| boolean)[]\n}\nexport type MazSelectOption =\n \| NormalizedOption\n \| string\n \| number\n \| boolean\n \| MazSelectOptionWithOptGroup\n\nexport interface MazSelectProps<T extends ModelValueSimple, U extends MazSelectOption> {\n /** Style attribut of the component root element /\n style?: HTMLAttributes['style']\n /* Class attribut of the component root element /\n class?: HTMLAttributes['class']\n /* The id of the select /\n id?: string\n /* The value of the select /\n modelValue?: T \| T[]\n /* The options of the select /\n options?: U[]\n /\n The key of the option value\n * @default 'value'\n /\n optionValueKey?: string\n /\n The key of the option label\n * @default 'label'\n /\n optionLabelKey?: string\n /\n The key of the option input value\n * @default 'label'\n /\n optionInputValueKey?: string\n /\n The position of the list\n * @default 'bottom left'\n /\n listPosition?: Position\n /* The height of the option list item /\n itemHeight?: number\n /* The max height of the option list /\n maxListHeight?: number\n /* The max width of the option list /\n maxListWidth?: number\n /* The min height of the option list /\n minListHeight?: number\n /* The min width of the option list /\n minListWidth?: number\n /\n The size of the select\n * @default 'md'\n /\n size?: Size\n /\n The color of the select\n * @default 'primary'\n /\n color?: Color\n /* Display search input in option list /\n search?: boolean\n /\n The placeholder of the search input\n * @default 'Search in options'\n /\n searchPlaceholder?: string\n /\n Replace the default search function to provide a custom search function\n * @default undefined\n /\n searchFunction?: (query: string, options: U[]) => U[] \| undefined\n /\n The threshold for the search input where 1 is a perfect match and 0 is a match with any character\n * @default 0.75\n /\n searchThreshold?: number\n /* if true, the option list is opened by default /\n open?: boolean\n /* Enable the multiple selection /\n multiple?: boolean\n /* Make the input required in the form /\n required?: boolean\n /* Disable the component /\n disabled?: boolean\n /* The input will be displayed in full width /\n block?: boolean\n /* The exclude selectors for the v-closable directive - will exclude the elements from the directive /\n excludeSelectors?: string[]\n /\n The autocomplete attribute of the input\n * @default 'off'\n /\n autocomplete?: string\n}\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MazSelectProps<T, U>>(), {\n id: undefined,\n class: undefined,\n multiple: undefined,\n style: undefined,\n modelValue: undefined,\n optionValueKey: 'value',\n optionLabelKey: 'label',\n optionInputValueKey: 'label',\n listPosition: 'bottom left',\n itemHeight: undefined,\n maxListHeight: 240,\n maxListWidth: undefined,\n minListWidth: undefined,\n minListHeight: undefined,\n size: 'md',\n color: 'primary',\n options: undefined,\n excludeSelectors: undefined,\n searchPlaceholder: 'Search in options',\n searchThreshold: 0.75,\n autocomplete: 'off',\n})\n\nconst emits = defineEmits<{\n /\n On list is closed\n * @event 'close'\n * @property {Event} value - the event\n /\n 'close': [value?: Event]\n /\n On list is opened\n * @event 'open'\n * @property {boolean} value - if the list is opened or not\n /\n 'open': [value: boolean]\n /\n On input blur\n * @event 'blur'\n * @property {Event} value - the event\n /\n 'blur': [value: Event]\n /\n On input focus\n * @event 'focus'\n * @property {Event} value - the event\n /\n 'focus': [value: Event]\n /\n On input change value\n * @event 'change'\n * @property {Event} value - the event\n /\n 'change': [value: Event]\n /\n On input value\n * @event 'input'\n * @property {Event} value - the event\n /\n 'input': [value: Event]\n /\n On model value update, returns the new value\n * @event 'update:model-value'\n * @property {ModelValueSimple \| ModelValueSimple[]} value - the new value\n /\n 'update:model-value': [value: T \| T[]]\n /\n On selected value, returns the option object\n * @event 'selected-option'\n * @property {MazSelectOption} value - the option object\n /\n 'selected-option': [value: U]\n}>()\n\nconst MazCheckbox = defineAsyncComponent(() => import('./MazCheckbox.vue'))\n\nconst SearchIcon = defineAsyncComponent(() => import('../../icons/magnifying-glass.svg'))\nconst ChevronDownIcon = defineAsyncComponent(() => import('../../icons/chevron-down.svg'))\nconst NoSymbolIcon = defineAsyncComponent(() => import('../../icons/no-symbol.svg'))\n\ndefineExpose<{\n openList: typeof openList\n closeList: typeof closeList\n}>({\n /* Method to open the option list /\n openList,\n /* Method to close the option list */\n closeList,\n})\n\nconst listOpened = ref(false)\nconst tmpModelValueIndex = ref<number>()\n\nconst isBlackOrTransparentColor = computed(() =>\n ['black', 'transparent', 'white'].includes(props.color),\n)\n\nconst selectedTextColor = computed(() =>\n isBlackOrTransparentColor.value\n ? `var(--maz-color-black)`\n : `var(--maz-color-${props.color}-800)`,\n)\nconst selectedBgColor = computed(() =>\n isBlackOrTransparentColor.value\n ? 'var(--maz-color-muted)'\n : `var(--maz-color-${props.color}-100)`,\n)\nconst keyboardSelectedBgColor = computed(() =>\n isBlackOrTransparentColor.value\n ? 'var(--maz-color-muted)'\n : `var(--maz-color-${props.color}-200)`,\n)\n\nconst hasListOpened = computed(() => listOpened.value \|\| props.open)\n\nconst instanceId = useInstanceUniqId({\n componentName: 'MazSelect',\n providedId: props.id,\n})\n\nfunction getOptionPayload(option: string \| number \| boolean): NormalizedOption {\n return {\n [props.optionValueKey]: option,\n [props.optionLabelKey]: option,\n [props.optionInputValueKey]: option,\n }\n}\nfunction getNormalizedOptionPayload(option: NormalizedOption): NormalizedOption {\n return {\n ...option,\n [props.optionValueKey]: option[props.optionValueKey],\n [props.optionLabelKey]: option[props.optionLabelKey],\n [props.optionInputValueKey]: option[props.optionInputValueKey],\n }\n}\n\nfunction getNormalizedOptions(options: U[]) {\n const normalizedOptions: NormalizedOption[] = []\n\n if (!options?.length) {\n return []\n }\n\n for (const option of options) {\n if (typeof option === 'string' \|\| typeof option === 'number' \|\| typeof option === 'boolean') {\n normalizedOptions.push(getOptionPayload(option))\n }\n else if (\n typeof option === 'object'\n && 'options' in option\n && Array.isArray(option.options)\n ) {\n normalizedOptions.push(\n { label: option.label, isOptGroup: true },\n ...option.options.map(opt =>\n typeof opt === 'string' \|\| typeof opt === 'number' \|\| typeof opt === 'boolean'\n ? getOptionPayload(opt)\n : getNormalizedOptionPayload(opt),\n ),\n )\n }\n else {\n normalizedOptions.push(getNormalizedOptionPayload(option as NormalizedOption))\n }\n }\n\n return normalizedOptions\n}\n\nconst optionsNormalized = computed<NormalizedOption[]>(() => getNormalizedOptions(props.options ?? []))\n\nconst selectedOptions = computed(\n () =>\n optionsNormalized.value?.filter((option) => {\n return props.multiple\n ? Array.isArray(props.modelValue)\n ? props.modelValue.includes(option[props.optionValueKey] as T)\n && !isNullOrUndefined(option[props.optionValueKey])\n : false\n : props.modelValue === option[props.optionValueKey]\n && !isNullOrUndefined(option[props.optionValueKey])\n }) ?? [],\n)\n\nonBeforeMount(() => {\n if (!props.options?.length) {\n console.warn('[maz-ui](MazSelect) you must provide options')\n }\n\n updateTmpModelValueIndex()\n})\n\nconst mazSelectElement = ref<HTMLDivElement>()\nconst mazInputComponent = ref<ComponentPublicInstance<typeof MazInput>>()\nconst searchInputComponent = ref<ComponentPublicInstance<typeof MazInput>>()\nconst optionListElement = ref<HTMLDivElement>()\n\nfunction isNullOrUndefined(value: unknown) {\n return value === undefined \|\| value === null\n}\n\nfunction isSelectedOption(option: NormalizedOption) {\n const hasOption\n = selectedOptions.value?.some(\n selectedOption => selectedOption[props.optionValueKey] === option[props.optionValueKey],\n ) ?? false\n\n return hasOption && !isNullOrUndefined(option[props.optionValueKey])\n}\n\nconst mazInputValue = computed(() => {\n if (props.multiple && props.modelValue && Array.isArray(props.modelValue)) {\n return props.modelValue\n .map(\n value =>\n optionsNormalized.value?.find(option => option[props.optionValueKey] === value)?.[\n props.optionInputValueKey\n ],\n )\n .join(', ')\n }\n\n const selectedOption = optionsNormalized.value?.find(\n option => option[props.optionValueKey] === props.modelValue,\n )\n\n return isNullOrUndefined(props.modelValue)\n ? undefined\n : selectedOption?.[props.optionInputValueKey]\n})\n\nconst listTransition = computed(() =>\n props.listPosition.includes('bottom') ? 'maz-slide' : 'maz-slideinvert',\n)\n\nconst searchQuery = ref<string>('')\nconst query = ref<string>('')\n\nfunction searchInValue(value?: ModelValueSimple, query?: string) {\n return query && value && normalizeString(value).includes(normalizeString(query))\n}\n\nfunction getFilteredOptionWithQuery(query: string) {\n return query\n ? optionsNormalized.value?.filter((option) => {\n const searchValue = option[props.optionLabelKey]\n const searchValue3 = option[props.optionValueKey]\n const searchValue2 = option[props.optionInputValueKey]\n\n const threshold = props.searchThreshold\n\n return (\n searchInValue(searchValue, query)\n \|\| searchInValue(searchValue2, query)\n \|\| searchInValue(searchValue3, query)\n \|\| (typeof searchValue === 'string'\n && useStringMatching(searchValue, query, threshold).isMatching.value)\n \|\| (typeof searchValue2 === 'string'\n && useStringMatching(searchValue2, query, threshold).isMatching.value)\n \|\| (typeof searchValue3 === 'string'\n && useStringMatching(searchValue3, query, threshold).isMatching.value)\n )\n })\n : optionsNormalized.value\n}\n\nconst optionList = computed(() => {\n return props.searchFunction && props.search && searchQuery.value\n ? getNormalizedOptions(props.searchFunction(searchQuery.value, props.options ?? []) ?? [])\n : getFilteredOptionWithQuery(searchQuery.value)\n})\n\nasync function closeList(event?: Event) {\n if (!hasListOpened.value)\n return\n if (\n event\n && (('relatedTarget' in event\n && mazSelectElement.value?.contains(event.relatedTarget as Node))\n \|\| event.type === 'keydown')\n ) {\n return event.preventDefault()\n }\n\n const eventTargetId\n = event\n && 'relatedTarget' in event\n && event.relatedTarget instanceof HTMLElement\n && event.relatedTarget.getAttribute('id')\n\n if (props.excludeSelectors?.includes(`#${eventTargetId}`)) {\n return event?.preventDefault()\n }\n\n await nextTick()\n listOpened.value = false\n tmpModelValueIndex.value = 0\n emits('close', event)\n}\n\nasync function openList(event: Event) {\n if (props.disabled \|\| hasListOpened.value)\n return\n\n event?.preventDefault()\n listOpened.value = true\n await scrollToOptionIndex()\n emits('focus', event)\n emits('open', listOpened.value)\n}\n\nfunction focusMainInput() {\n ;(mazInputComponent.value?.$el as HTMLElement).querySelector('input')?.focus()\n}\nfunction emitInputMainInput() {\n ;(mazInputComponent.value?.$el as HTMLElement).querySelector('input')?.dispatchEvent(new Event('input'))\n}\n\nfunction toggleList(event: Event) {\n if (listOpened.value) {\n closeList(event)\n }\n else {\n focusMainInput()\n }\n}\n\nfunction focusSearchInputAndSetQuery(q: string) {\n searchQuery.value = q\n ;(searchInputComponent.value?.$el as HTMLElement).querySelector('input')?.focus()\n}\n\nfunction searchOptionWithQuery(keyPressed: string) {\n if (keyPressed === 'Backspace' && query.value.length > 0) {\n query.value = query.value.slice(0, -1)\n }\n else {\n query.value += keyPressed\n }\n\n const filteredOptions = getFilteredOptionWithQuery(query.value)\n\n if (filteredOptions?.length) {\n tmpModelValueIndex.value = optionList.value?.findIndex(\n option => option[props.optionValueKey] === filteredOptions[0][props.optionValueKey],\n )\n\n if (typeof tmpModelValueIndex.value === 'number' && tmpModelValueIndex.value >= 0) {\n scrollToOptionIndex(tmpModelValueIndex.value)\n }\n }\n\n debounceCallback(() => {\n query.value = ''\n }, 1000)\n}\n\nfunction mainInputKeyboardHandler(event: KeyboardEvent) {\n const keyPressed = event.key\n\n if (/^[\\dA-Za-z\\u0400-\\u04FF]$/.test(keyPressed)) {\n event.preventDefault()\n openList(event)\n\n if (props.search) {\n focusSearchInputAndSetQuery(keyPressed)\n }\n else {\n searchOptionWithQuery(keyPressed)\n }\n }\n else {\n keyboardHandler(event)\n }\n}\n\nfunction keyboardHandler(event: KeyboardEvent, shouldSelectWithSpace = true) {\n const code = event.code\n\n const isArrow = ['ArrowUp', 'ArrowDown'].includes(code)\n const shouldSelect = (shouldSelectWithSpace ? ['Enter', 'Space'] : ['Enter']).includes(code)\n const shouldCloseList = code === 'Escape' && hasListOpened.value\n\n if (isArrow) {\n arrowHandler(event, tmpModelValueIndex.value)\n }\n else if (shouldSelect) {\n enterHandler(event, tmpModelValueIndex.value)\n }\n else if (shouldCloseList) {\n closeList(event)\n }\n}\n\nfunction arrowHandler(event: KeyboardEvent, currentIndex?: number) {\n event.preventDefault()\n const code = event.code\n\n if (!hasListOpened.value)\n openList(event)\n\n const optionsLength = optionList.value?.length\n\n if (!optionsLength) {\n return\n }\n\n if (typeof currentIndex === 'number') {\n if (currentIndex === optionsLength - 1 && code === 'ArrowDown') {\n tmpModelValueIndex.value = 0\n }\n else if (currentIndex === 0 && code === 'ArrowUp') {\n tmpModelValueIndex.value = optionsLength - 1\n }\n else {\n tmpModelValueIndex.value = code === 'ArrowDown' ? currentIndex + 1 : currentIndex - 1\n }\n }\n else {\n tmpModelValueIndex.value = code === 'ArrowDown' ? 0 : optionsLength - 1\n }\n\n scrollToOptionIndex(tmpModelValueIndex.value)\n}\n\nfunction enterHandler(event: KeyboardEvent, currentIndex?: number) {\n if (!hasListOpened.value) {\n return\n }\n\n event.preventDefault()\n\n const newValue = currentIndex\n ? optionList.value?.[currentIndex] ?? optionList.value?.[0]\n : optionList.value?.[0]\n\n if (!isNullOrUndefined(newValue)) {\n updateValue(newValue as Record<string, ModelValueSimple>)\n }\n}\n\nasync function scrollToOptionIndex(index?: number) {\n await nextTick()\n\n if (typeof index !== 'number') {\n updateTmpModelValueIndex()\n }\n\n const selectedIndex = index ?? tmpModelValueIndex.value\n\n if (typeof selectedIndex === 'number' && selectedIndex >= 0) {\n const item = optionListElement.value\n ?.querySelectorAll('.m-select-list-item')\n\n item?.[selectedIndex]?.scrollIntoView({\n behavior: 'auto',\n block: 'nearest',\n inline: 'start',\n })\n }\n}\n\nfunction updateTmpModelValueIndex(inputOption?: NormalizedOption) {\n const index = optionList.value?.findIndex((option) => {\n if (props.multiple && Array.isArray(props.modelValue)) {\n if (inputOption) {\n return inputOption[props.optionValueKey] === option[props.optionValueKey]\n }\n const values = [...props.modelValue].reverse()\n return values[0] === option[props.optionValueKey]\n }\n else {\n return selectedOptions.value?.[0]?.[props.optionValueKey] === option[props.optionValueKey]\n }\n })\n\n tmpModelValueIndex.value = index && index >= 0 ? index : 0\n}\n\nfunction updateValue(inputOption: NormalizedOption, mustCloseList = true) {\n if (mustCloseList && !props.multiple) {\n nextTick(() => closeList())\n }\n\n searchQuery.value = ''\n\n const isAlreadySelected = selectedOptions.value?.some(\n option => option[props.optionValueKey] === inputOption[props.optionValueKey],\n )\n\n let newValue = selectedOptions.value\n\n if (isAlreadySelected && props.multiple) {\n newValue = newValue?.filter(\n option => option[props.optionValueKey] !== inputOption[props.optionValueKey],\n )\n }\n else if (props.multiple) {\n newValue.push(inputOption)\n }\n else {\n newValue = [inputOption]\n }\n\n const selectedValues = newValue.map(option => option[props.optionValueKey])\n\n emits('update:model-value', (props.multiple ? selectedValues : selectedValues[0]) as T \| T[])\n emits('selected-option', inputOption as U)\n emitInputMainInput()\n updateTmpModelValueIndex(inputOption)\n focusMainInput()\n}\n</script>\n\n<template>\n <div\n ref=\"mazSelectElement\"\n v-closable=\"{\n exclude: excludeSelectors,\n handler: closeList,\n }\"\n class=\"m-select m-reset-css\"\n :class=\"[\n { '--is-open': hasListOpened, '--disabled': disabled, '--block': block },\n props.class,\n `--${size}`,\n ]\"\n :style=\"[style, { '--keyboard-selected-bg-color': keyboardSelectedBgColor, '--selected-bg-color': selectedBgColor, '--selected-text-color': selectedTextColor }]\"\n >\n <MazInput\n :id=\"instanceId\"\n ref=\"mazInputComponent\"\n class=\"m-select-input\"\n v-bind=\"$attrs\"\n :required=\"required\"\n :border-active=\"listOpened\"\n :color=\"color\"\n :model-value=\"mazInputValue\"\n :size=\"size\"\n block\n :autocomplete\n :disabled=\"disabled\"\n @focus.prevent.stop=\"openList\"\n @blur.prevent.stop=\"closeList\"\n @click.prevent.stop=\"openList\"\n @change=\"emits('change', $event)\"\n @input=\"emits('input', $event)\"\n @keydown=\"mainInputKeyboardHandler\"\n >\n <template #right-icon>\n <button\n tabindex=\"-1\"\n type=\"button\"\n class=\"m-select-input__toggle-button maz-custom\"\n :aria-label=\"`${hasListOpened ? 'collapse' : 'expand'} list of options`\"\n @click.stop=\"toggleList\"\n >\n <ChevronDownIcon class=\"m-select-chevron maz-text-xl\" />\n </button>\n </template>\n </MazInput>\n <Transition :name=\"listTransition\">\n <div\n v-if=\"hasListOpened\"\n ref=\"optionListElement\"\n class=\"m-select-list\"\n :class=\"{\n '--top': listPosition.includes('top'),\n '--left': listPosition.includes('left'),\n '--right': listPosition.includes('right'),\n '--bottom': listPosition.includes('bottom'),\n }\"\n :style=\"{\n maxHeight: `${maxListHeight}px`,\n maxWidth: `${maxListWidth}px`,\n minHeight: `${minListHeight}px`,\n minWidth: `${minListWidth}px`,\n }\"\n >\n <MazInput\n v-if=\"search\"\n ref=\"searchInputComponent\"\n v-model=\"searchQuery\"\n size=\"sm\"\n :color=\"color\"\n :placeholder=\"searchPlaceholder\"\n name=\"search\"\n inputmode=\"search\"\n block\n autocomplete=\"off\"\n tabindex=\"-1\"\n class=\"m-select-list__search-input maz-flex-none\"\n :left-icon=\"SearchIcon\"\n @keydown=\"keyboardHandler($event, false)\"\n @update:model-value=\"tmpModelValueIndex = 0\"\n />\n <!--\n @slot No results slot - Displayed when no results corresponding with search query\n -->\n <slot v-if=\"!optionList \|\| optionList.length <= 0\" name=\"no-results\">\n <span class=\"m-select-list__no-results\">\n <NoSymbolIcon class=\"maz-h-6 maz-w-6 maz-text-normal\" />\n </span>\n </slot>\n <div v-else class=\"m-select-list__scroll-wrapper\" tabindex=\"-1\">\n <template v-for=\"(option, i) in optionList\" :key=\"i\">\n <!--\n @slot Custom optgroup label\n @binding {String} label - the label of the optgroup\n -->\n <slot v-if=\"option.label && option.isOptGroup\" name=\"optgroup\" :label=\"option.label\">\n <span class=\"m-select-list-optgroup\">\n {{ option.label }}\n </span>\n </slot>\n\n <button\n v-else\n tabindex=\"-1\"\n type=\"button\"\n class=\"m-select-list-item maz-custom maz-flex-none\"\n :class=\"[\n {\n '--is-keyboard-selected': tmpModelValueIndex === i,\n '--is-selected': isSelectedOption(option),\n '--is-none-value': isNullOrUndefined(option[optionValueKey]),\n },\n ]\"\n :style=\"itemHeight ? { height: `${itemHeight}px` } : undefined\"\n @click.prevent.stop=\"updateValue(option)\"\n >\n <MazCheckbox\n v-if=\"multiple\"\n tabindex=\"-1\"\n :model-value=\"isSelectedOption(option)\"\n size=\"sm\"\n :color=\"color\"\n />\n <!--\n @slot Custom option\n @binding {Object} option - the option object\n @binding {Boolean} is-selected - if the option is selected\n -->\n <slot :option=\"option\" :is-selected=\"isSelectedOption(option)\">\n <span>\n {{ option[optionLabelKey] }}\n </span>\n </slot>\n </button>\n </template>\n </div>\n </div>\n </Transition>\n </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n .m-select {\n @apply maz-relative maz-inline-flex maz-align-top;\n\n &.--mini {\n @apply maz-text-xs;\n }\n\n &.--xs {\n @apply maz-text-xs;\n }\n\n &.--sm {\n @apply maz-text-sm;\n }\n\n &.--md {\n @apply maz-text-base;\n }\n\n &.--lg {\n @apply maz-text-lg;\n }\n\n &.--xl {\n @apply maz-text-xl;\n }\n\n &.--block {\n @apply maz-w-full;\n }\n\n &:not(.--disabled):deep(.m-input-input) {\n @apply maz-cursor-pointer;\n }\n\n &-input:deep(.m-input-input) {\n @apply maz-pr-0;\n }\n\n &-input.--has-label:deep(.m-input-input) {\n @apply maz-pr-0;\n }\n\n &-input {\n &__toggle-button {\n @apply maz-flex maz-h-full maz-bg-transparent maz-pl-0 maz-flex-center;\n }\n\n &:deep(input) {\n @apply maz-caret-transparent;\n }\n }\n\n &-chevron {\n @apply maz-text-[1.2em] maz-text-normal maz-transition-all maz-duration-300 maz-ease-out;\n }\n\n &.--is-open {\n & .m-select-chevron {\n transform: rotate(180deg);\n }\n }\n\n .m-select-list {\n @apply maz-absolute maz-z-default-backdrop maz-flex maz-flex-col maz-gap-1 maz-overflow-hidden maz-rounded maz-bg-color maz-p-2 maz-elevation dark:maz-border dark:maz-border-color-light;\n\n &-optgroup {\n @apply maz-flex-none maz-p-0.5 maz-text-start maz-text-[0.875em] maz-text-muted;\n }\n\n min-width: 3.5rem;\n\n &.--top {\n @apply maz-bottom-full;\n }\n\n &.--left {\n @apply maz-left-0;\n }\n\n &.--right {\n @apply maz-right-0;\n }\n\n &.--bottom {\n @apply maz-top-full;\n }\n\n &__scroll-wrapper {\n @apply maz-flex maz-flex-1 maz-flex-col maz-gap-1 maz-overflow-auto;\n }\n\n &__no-results {\n @apply maz-flex maz-p-4 maz-flex-center;\n }\n\n &-item {\n @apply maz-flex maz-w-full maz-cursor-pointer maz-items-center maz-gap-3 maz-truncate maz-rounded maz-bg-transparent maz-px-3 maz-py-[0.5em] maz-text-start maz-text-[1em] maz-transition-colors maz-duration-300 maz-ease-in-out focus-within:maz-bg-color-light hover:maz-bg-color-light;\n\n span {\n @apply maz-truncate;\n }\n\n &.--is-keyboard-selected {\n @apply maz-bg-color-light dark:maz-bg-color-lighter;\n\n &.--is-selected {\n background-color: var(--keyboard-selected-bg-color);\n\n &:hover {\n background-color: var(--keyboard-selected-bg-color);\n }\n }\n }\n\n &.--is-none-value {\n @apply maz-text-muted;\n }\n\n &.--is-selected {\n color: var(--selected-text-color);\n background-color: var(--selected-bg-color);\n\n &:hover {\n background-color: var(--selected-bg-color);\n }\n\n &.--transparent {\n @apply maz-bg-color;\n }\n }\n }\n }\n\n & button.maz-custom {\n @apply maz-cursor-pointer maz-appearance-none maz-border-none;\n }\n}\n</style>\n"],"names":["props","__props","emits","__emit","MazCheckbox","defineAsyncComponent","SearchIcon","ChevronDownIcon","NoSymbolIcon","__expose","openList","closeList","listOpened","ref","tmpModelValueIndex","isBlackOrTransparentColor","computed","selectedTextColor","selectedBgColor","keyboardSelectedBgColor","hasListOpened","instanceId","useInstanceUniqId","getOptionPayload","option","getNormalizedOptionPayload","getNormalizedOptions","options","normalizedOptions","opt","optionsNormalized","selectedOptions","_a","isNullOrUndefined","onBeforeMount","updateTmpModelValueIndex","mazSelectElement","mazInputComponent","searchInputComponent","optionListElement","value","isSelectedOption","selectedOption","mazInputValue","_b","listTransition","searchQuery","query","searchInValue","normalizeString","getFilteredOptionWithQuery","searchValue","searchValue3","searchValue2","threshold","useStringMatching","optionList","event","eventTargetId","nextTick","scrollToOptionIndex","focusMainInput","emitInputMainInput","toggleList","focusSearchInputAndSetQuery","q","searchOptionWithQuery","keyPressed","filteredOptions","debounceCallback","mainInputKeyboardHandler","keyboardHandler","shouldSelectWithSpace","code","isArrow","shouldSelect","shouldCloseList","arrowHandler","enterHandler","currentIndex","optionsLength","newValue","_c","updateValue","index","selectedIndex","item","inputOption","mustCloseList","isAlreadySelected","selectedValues"],"mappings":"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"}

package/dist/components/MazSlider.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazSlider.D08gO9DD.css');const e=require("vue"),I=require("../helpers/debounce.cjs"),X=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs");function Y(l){const c=document.documentElement,a=document.body,v=l.getBoundingClientRect();return{y:v.top+(window.pageYOffset||c.scrollTop)-(c.clientTop||a.clientTop||0),x:v.left+(window.pageXOffset||c.scrollLeft)-(c.clientLeft||a.clientLeft||0)}}function R(l,c,a=!1){const v="targetTouches"in l?l.targetTouches[0]:l,m=Y(c),i={x:v.pageX-m.x,y:v.pageY-m.y};return{x:a?c.offsetWidth-i.x:i.x,y:a?c.offsetHeight-i.y:i.y}}function A(l,c,a,v){return v==="minus"?c?l>=c:!0:a?l<=a:!0}function E(l,c,a){const v=l+1,i=c<v?v-c:c-v;return 100/a*i/100}const U=["aria-valuenow","aria-valuemin","aria-valuemax"],G=["data-label","onMousedownPassive","onTouchstartPassive","onFocusPassive","onBlurPassive","onTouchendPassive","onKeydownPassive"],J=e.defineComponent({__name:"MazSlider",props:{modelValue:{type:[Number,Array],required:!0,validator:l=>["number"].includes(typeof l)||Array.isArray(l)||l===null},labels:{type:Array,default:void 0},min:{type:Number,default:0},max:{type:Number,default:100},size:{type:String,default:void 0},noDivider:{type:Boolean,default:!1},log:{type:Boolean,default:!1},color:{type:String,default:"primary"},noCursorAnim:{type:Boolean,default:!1}},emits:["update:model-value"],setup(l,{emit:c}){const a=l,v=c,m=e.ref(),i=e.ref(),f=e.ref(),d=e.ref(),k=e.ref([]),S=e.ref([]),p=e.computed(()=>typeof a.modelValue=="number"?[a.modelValue]:a.modelValue?a.modelValue:[0]),b=e.computed(()=>Math.log(a.min||1)),$=e.computed(()=>Math.log(a.max)),z=e.computed(()=>{const{min:t,max:n}=a;return($.value-b.value)/(n-t)}),B=e.computed(()=>{const{min:t,max:n}=a;return n-t}),W=e.computed(()=>({paddingTop:a.labels?"2.5em":"1em"})),D=e.computed(()=>Array.isArray(a.modelValue));e.watch(()=>a.modelValue,()=>d.value=p.value,{immediate:!0}),e.watch(()=>[p.value,a.min,a.max,a.log].join(","),()=>h(!0));const P=I.debounce(()=>h(),300);e.onMounted(()=>{h(!0),window.addEventListener("resize",P)}),e.onBeforeUnmount(()=>{window.removeEventListener("resize",P)});async function h(t){t===!0&&q(),await j(),await e.nextTick();for(const[n]of p.value.entries())x(n)}function O(t,n){t.key==="ArrowLeft"?d.value&&A(d.value[n]-1,d.value[n-1],d.value[n+1],"minus")&&(d.value[n]--,g(d.value)):t.key==="ArrowRight"&&d.value&&A(d.value[n]+1,d.value[n-1],d.value[n+1],"plus")&&(d.value[n]++,g(d.value))}function T(t){i.value=void 0,V(t)}function q(){const{min:t,max:n}=a,s=p.value.map(o=>o<t?t:o>n?n:o);g(s),d.value=s}function g(t){const n=D.value?[...t]:t[0];v("update:model-value",n)}function F(t){const{labels:n}=a;return n?n[t]:void 0}function x(t){V(t),a.noDivider||N()}async function V(t){var s;await e.nextTick();const n=document.querySelectorAll(".m-slider .m-slider__btn");if(n){const o=n[t],u=(o==null?void 0:o.clientWidth)+16,r={left:typeof((s=f.value)==null?void 0:s[t])=="number"?`${f.value[t]-u/2||1}px`:""};k.value[t]=r}}function N(){if(f.value){const t=[...f.value];t.push(0);const n=t.length,s=Math.round(n/2);S.value=t.map((o,u)=>({left:u===0?0:`${t[u-1]}px`,right:u+1===n?0:`calc( 100% - ${o}px )`,backgroundColor:s===u+1?void 0:u<s?`rgba(255, 255, 255, ${E(u,s,n)})`:`rgba(0, 0, 0, ${E(u,s,n)})`}))}}async function j(){var u,r;await e.nextTick();const{min:t,max:n,log:s}=a,o=(u=m.value)==null?void 0:u.clientWidth;typeof o=="number"?f.value=(r=d.value)==null?void 0:r.map(y=>s?o/n*(t+(Math.log(y)-b.value)/z.value):o/B.value*(y-t)):console.warn("[maz-ui][MazSlider] ref component not found")}async function _(){var u,r,y;await e.nextTick();const{max:t,min:n,log:s}=a,o=(u=m.value)==null?void 0:u.clientWidth;if(typeof o=="number")return s?(r=f.value)==null?void 0:r.map(M=>{const K=M/(o/t),H=Math.exp((K-n)*z.value+b.value);return Math.round(H)}):(y=f.value)==null?void 0:y.map(M=>Math.round(M/(o/B.value))+n);console.warn("[maz-ui][MazSlider] ref component not found")}function w(t,n){i.value===void 0&&(i.value=n,x(n))}async function C(){if(i.value===void 0)return;const t=await _();t&&g(t),i.value=void 0}async function L(t){var s;if(await e.nextTick(),i.value===void 0)return;const n=(s=m.value)==null?void 0:s.clientWidth;if(f.value){const o=f.value[i.value-1]||0,u=f.value[i.value+1]||n;if(!m.value)return console.error("[maz-ui](MazSlider/handleMousemove) MazSlider not available");f.value[i.value]=(()=>{const r=R(t,m.value).x;return r<o?o:u&&r>u?u:r})(),d.value=await _(),x(i.value)}}return(t,n)=>(e.openBlock(),e.createElementBlock("div",{style:e.normalizeStyle([W.value,{fontSize:l.size}]),class:e.normalizeClass(["m-slider m-reset-css",[`m-slider--${l.color}`]]),role:"button",tabindex:"-1",onMousemovePassive:L,onMouseupPassive:C,onMouseleavePassive:C,onTouchmovePassive:L},[e.createElementVNode("div",{ref_key:"MazSlider",ref:m,class:"m-slider__bar",role:"slider","aria-valuenow":l.modelValue.toString(),"aria-valuemin":l.min,"aria-valuemax":l.max},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(S.value,(s,o)=>(e.openBlock(),e.createElementBlock("div",{key:`divider-${o}`,style:e.normalizeStyle([s]),class:"m-slider__divider"},null,4))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.value,(s,o)=>{var u;return e.openBlock(),e.createElementBlock("button",{key:`cursor-${o}`,type:"button","data-label":F(o),class:e.normalizeClass(["m-slider__btn",{"active-cursor":o===i.value&&!l.noCursorAnim}]),style:e.normalizeStyle([k.value[o]]),onMousedownPassive:r=>w(r,o),onTouchstartPassive:r=>w(r,o),onFocusPassive:r=>w(r,o),onBlurPassive:r=>T(o),onTouchendPassive:r=>T(o),onKeydownPassive:r=>O(r,o)},[e.createElementVNode("span",null,e.toDisplayString((u=d.value)==null?void 0:u[o]),1)],46,G)}),128))],8,U)],38))}}),Q=X._export_sfc(J,[["__scopeId","data-v-0ba9f676"]]);exports.default=Q;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazSlider.KrU-f4K4.css');const e=require("vue"),I=require("../helpers/debounce.cjs"),X=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs");function Y(l){const c=document.documentElement,a=document.body,v=l.getBoundingClientRect();return{y:v.top+(window.pageYOffset||c.scrollTop)-(c.clientTop||a.clientTop||0),x:v.left+(window.pageXOffset||c.scrollLeft)-(c.clientLeft||a.clientLeft||0)}}function R(l,c,a=!1){const v="targetTouches"in l?l.targetTouches[0]:l,m=Y(c),i={x:v.pageX-m.x,y:v.pageY-m.y};return{x:a?c.offsetWidth-i.x:i.x,y:a?c.offsetHeight-i.y:i.y}}function A(l,c,a,v){return v==="minus"?c?l>=c:!0:a?l<=a:!0}function E(l,c,a){const v=l+1,i=c<v?v-c:c-v;return 100/a*i/100}const U=["aria-valuenow","aria-valuemin","aria-valuemax"],G=["data-label","onMousedownPassive","onTouchstartPassive","onFocusPassive","onBlurPassive","onTouchendPassive","onKeydownPassive"],J=e.defineComponent({__name:"MazSlider",props:{modelValue:{type:[Number,Array],required:!0,validator:l=>["number"].includes(typeof l)||Array.isArray(l)||l===null},labels:{type:Array,default:void 0},min:{type:Number,default:0},max:{type:Number,default:100},size:{type:String,default:void 0},noDivider:{type:Boolean,default:!1},log:{type:Boolean,default:!1},color:{type:String,default:"primary"},noCursorAnim:{type:Boolean,default:!1}},emits:["update:model-value"],setup(l,{emit:c}){const a=l,v=c,m=e.ref(),i=e.ref(),f=e.ref(),d=e.ref(),k=e.ref([]),S=e.ref([]),p=e.computed(()=>typeof a.modelValue=="number"?[a.modelValue]:a.modelValue?a.modelValue:[0]),g=e.computed(()=>Math.log(a.min||1)),$=e.computed(()=>Math.log(a.max)),z=e.computed(()=>{const{min:t,max:n}=a;return($.value-g.value)/(n-t)}),B=e.computed(()=>{const{min:t,max:n}=a;return n-t}),W=e.computed(()=>({paddingTop:a.labels?"2.5em":"1em"})),D=e.computed(()=>Array.isArray(a.modelValue));e.watch(()=>a.modelValue,()=>d.value=p.value,{immediate:!0}),e.watch(()=>[p.value,a.min,a.max,a.log].join(","),()=>h(!0));const P=I.debounce(()=>h(),300);e.onMounted(()=>{h(!0),window.addEventListener("resize",P)}),e.onBeforeUnmount(()=>{window.removeEventListener("resize",P)});async function h(t){t===!0&&q(),await j(),await e.nextTick();for(const[n]of p.value.entries())x(n)}function O(t,n){t.key==="ArrowLeft"?d.value&&A(d.value[n]-1,d.value[n-1],d.value[n+1],"minus")&&(d.value[n]--,b(d.value)):t.key==="ArrowRight"&&d.value&&A(d.value[n]+1,d.value[n-1],d.value[n+1],"plus")&&(d.value[n]++,b(d.value))}function T(t){i.value=void 0,V(t)}function q(){const{min:t,max:n}=a,s=p.value.map(o=>o<t?t:o>n?n:o);b(s),d.value=s}function b(t){const n=D.value?[...t]:t[0];v("update:model-value",n)}function F(t){const{labels:n}=a;return n?n[t]:void 0}function x(t){V(t),a.noDivider||N()}async function V(t){var s;await e.nextTick();const n=document.querySelectorAll(".m-slider .m-slider__btn");if(n){const o=n[t],u=(o==null?void 0:o.clientWidth)+16,r={left:typeof((s=f.value)==null?void 0:s[t])=="number"?`${f.value[t]-u/2||1}px`:""};k.value[t]=r}}function N(){if(f.value){const t=[...f.value];t.push(0);const n=t.length,s=Math.round(n/2);S.value=t.map((o,u)=>({left:u===0?0:`${t[u-1]}px`,right:u+1===n?0:`calc( 100% - ${o}px )`,backgroundColor:s===u+1?void 0:u<s?`rgba(255, 255, 255, ${E(u,s,n)})`:`rgba(0, 0, 0, ${E(u,s,n)})`}))}}async function j(){var u,r;await e.nextTick();const{min:t,max:n,log:s}=a,o=(u=m.value)==null?void 0:u.clientWidth;typeof o=="number"?f.value=(r=d.value)==null?void 0:r.map(y=>s?o/n*(t+(Math.log(y)-g.value)/z.value):o/B.value*(y-t)):console.warn("[maz-ui][MazSlider] ref component not found")}async function _(){var u,r,y;await e.nextTick();const{max:t,min:n,log:s}=a,o=(u=m.value)==null?void 0:u.clientWidth;if(typeof o=="number")return s?(r=f.value)==null?void 0:r.map(M=>{const K=M/(o/t),H=Math.exp((K-n)*z.value+g.value);return Math.round(H)}):(y=f.value)==null?void 0:y.map(M=>Math.round(M/(o/B.value))+n);console.warn("[maz-ui][MazSlider] ref component not found")}function w(t,n){i.value===void 0&&(i.value=n,x(n))}async function C(){if(i.value===void 0)return;const t=await _();t&&b(t),i.value=void 0}async function L(t){var s;if(await e.nextTick(),i.value===void 0)return;const n=(s=m.value)==null?void 0:s.clientWidth;if(f.value){const o=f.value[i.value-1]||0,u=f.value[i.value+1]||n;if(!m.value)return console.error("[maz-ui](MazSlider/handleMousemove) MazSlider not available");f.value[i.value]=(()=>{const r=R(t,m.value).x;return r<o?o:u&&r>u?u:r})(),d.value=await _(),x(i.value)}}return(t,n)=>(e.openBlock(),e.createElementBlock("div",{style:e.normalizeStyle([W.value,{fontSize:l.size}]),class:e.normalizeClass(["m-slider m-reset-css",[`m-slider--${l.color}`]]),role:"button",tabindex:"-1",onMousemovePassive:L,onMouseupPassive:C,onMouseleavePassive:C,onTouchmovePassive:L},[e.createElementVNode("div",{ref_key:"MazSlider",ref:m,class:"m-slider__bar",role:"slider","aria-valuenow":l.modelValue.toString(),"aria-valuemin":l.min,"aria-valuemax":l.max},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(S.value,(s,o)=>(e.openBlock(),e.createElementBlock("div",{key:`divider-${o}`,style:e.normalizeStyle([s]),class:"m-slider__divider"},null,4))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.value,(s,o)=>{var u;return e.openBlock(),e.createElementBlock("button",{key:`cursor-${o}`,type:"button","data-label":F(o),class:e.normalizeClass(["m-slider__btn",{"active-cursor":o===i.value&&!l.noCursorAnim}]),style:e.normalizeStyle([k.value[o]]),onMousedownPassive:r=>w(r,o),onTouchstartPassive:r=>w(r,o),onFocusPassive:r=>w(r,o),onBlurPassive:r=>T(o),onTouchendPassive:r=>T(o),onKeydownPassive:r=>O(r,o)},[e.createElementVNode("span",null,e.toDisplayString((u=d.value)==null?void 0:u[o]),1)],46,G)}),128))],8,U)],38))}}),Q=X._export_sfc(J,[["__scopeId","data-v-14ebe2cb"]]);exports.default=Q;
 //# sourceMappingURL=MazSlider.cjs.map

package/dist/components/MazSlider.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MazSlider.cjs","sources":["../../src/components/MazSlider/utils.ts","../../src/components/MazSlider.vue"],"sourcesContent":["interface IPosObject {\n x: number\n y: number\n}\n\nexport function getOffset(elem: HTMLDivElement): IPosObject {\n const doc = document.documentElement as HTMLElement\n const body = document.body as HTMLElement\n const rect = elem.getBoundingClientRect()\n const offset: IPosObject = {\n y: rect.top + (window.pageYOffset \|\| doc.scrollTop) - (doc.clientTop \|\| body.clientTop \|\| 0),\n x:\n rect.left + (window.pageXOffset \|\| doc.scrollLeft) - (doc.clientLeft \|\| body.clientLeft \|\| 0),\n }\n return offset\n}\n\n/*\n Get the position of the mouse/finger in the element\n * @param e Trigger event\n * @param elem Container element\n * @param isReverse From the right/bottom\n /\nexport function getPos(e: MouseEvent \| TouchEvent, elem: HTMLDivElement, isReverse = false): IPosObject {\n const event = 'targetTouches' in e ? e.targetTouches[0] : e\n const offset = getOffset(elem)\n const posObj = {\n x: event.pageX - offset.x,\n y: event.pageY - offset.y,\n }\n return {\n x: isReverse ? elem.offsetWidth - posObj.x : posObj.x,\n y: isReverse ? elem.offsetHeight - posObj.y : posObj.y,\n }\n}\n\nexport function isBetween(value: number, prev: number, next: number, direction: string) {\n return direction === 'minus' ? (prev ? value >= prev : true) : next ? value <= next : true\n}\n\nexport function getOpacityCoeff(index: number, middle: number, length: number) {\n const currentIndex = index + 1\n const isBiggerThanMiddle = middle < currentIndex\n const deviation = isBiggerThanMiddle ? currentIndex - middle : middle - currentIndex\n return ((100 / length) deviation) / 100\n}\n","<script lang=\"ts\" setup>\nimport type { Color } from '@components/types'\nimport { getOpacityCoeff, getPos, isBetween } from '@components/MazSlider/utils'\n\nimport { debounce } from '@helpers/debounce'\nimport {\n computed,\n type CSSProperties,\n nextTick,\n onBeforeUnmount,\n onMounted,\n type PropType,\n ref,\n watch,\n} from 'vue'\n\nconst props = defineProps({\n /** Array of cursors values /\n modelValue: {\n type: [Number, Array] as PropType<number \| number[]>,\n required: true,\n validator: (value: string) => {\n return ['number'].includes(typeof value) \|\| Array.isArray(value) \|\| value === null\n },\n },\n /* array of cursors label /\n labels: { type: Array, default: undefined },\n /* min value of sliders /\n min: { type: Number, default: 0 },\n /* max value of sliders /\n max: { type: Number, default: 100 },\n /* height size of slider bar /\n size: { type: String, default: undefined },\n /* remove div in different colors /\n noDivider: { type: Boolean, default: false },\n /* become a logarithmic slider (exponential) /\n log: { type: Boolean, default: false },\n /* main slider color /\n color: {\n type: String as PropType<Color>,\n default: 'primary',\n },\n /* disables cursor animation when active /\n noCursorAnim: { type: Boolean, default: false },\n})\n\nconst emits = defineEmits(['update:model-value'])\n\nconst MazSlider = ref<HTMLDivElement>()\n\nconst activeCursor = ref<number>()\nconst buttonPositions = ref<number[]>()\nconst tmpValues = ref<number[]>()\n\nconst buttonStyles = ref<CSSProperties[]>([])\nconst dividers = ref<CSSProperties[]>([])\n\n// COMPUTED\n\nconst computedValue = computed<number[]>(() => {\n if (typeof props.modelValue === 'number') {\n return [props.modelValue]\n }\n else if (props.modelValue) {\n return props.modelValue\n }\n else {\n return [0]\n }\n})\nconst minLog = computed(() => {\n return Math.log(props.min \|\| 1)\n})\nconst maxLog = computed(() => {\n return Math.log(props.max)\n})\nconst scale = computed(() => {\n const { min, max } = props\n return (maxLog.value - minLog.value) / (max - min)\n})\nconst range = computed(() => {\n const { min, max } = props\n return max - min\n})\nconst wrapperStyle = computed(() => {\n return {\n paddingTop: props.labels ? `2.5em` : `1em`,\n }\n})\nconst hasMultipleValues = computed(() => Array.isArray(props.modelValue))\n\nwatch(\n () => props.modelValue,\n () => (tmpValues.value = computedValue.value),\n { immediate: true },\n)\nwatch(\n () => [computedValue.value, props.min, props.max, props.log].join(','),\n () => buildComponent(true),\n)\n\nconst resizeListenerFunction = debounce(() => buildComponent(), 300)\n\nonMounted(() => {\n buildComponent(true)\n\n window.addEventListener('resize', resizeListenerFunction)\n})\n\nonBeforeUnmount(() => {\n window.removeEventListener('resize', resizeListenerFunction)\n})\n\nasync function buildComponent(emitValue?: boolean) {\n if (emitValue === true)\n checkValues()\n await calcPos()\n await nextTick()\n\n for (const [index] of computedValue.value.entries()) {\n setBtnDividers(index)\n }\n}\n\nfunction cursorKeyDown(event: KeyboardEvent, i: number) {\n if (event.key === 'ArrowLeft') {\n if (\n tmpValues.value\n && isBetween(tmpValues.value[i] - 1, tmpValues.value[i - 1], tmpValues.value[i + 1], 'minus')\n ) {\n tmpValues.value[i]--\n emitValue(tmpValues.value)\n }\n }\n // ArrowRight\n else if (\n event.key === 'ArrowRight'\n && tmpValues.value\n && isBetween(tmpValues.value[i] + 1, tmpValues.value[i - 1], tmpValues.value[i + 1], 'plus')\n ) {\n tmpValues.value[i]++\n emitValue(tmpValues.value)\n }\n}\nfunction blurCursor(i: number) {\n activeCursor.value = undefined\n setBtnStyle(i)\n}\nfunction checkValues() {\n // check if values are not below the min or above the max\n const { min, max } = props\n const valuesChecked = computedValue.value.map((v: number) =>\n v < min ? min : v > max ? max : v,\n )\n emitValue(valuesChecked)\n tmpValues.value = valuesChecked\n}\nfunction emitValue(values: number[]) {\n const valueToEmit = hasMultipleValues.value ? [...values] : values[0]\n emits('update:model-value', valueToEmit)\n}\nfunction getLabel(i: number) {\n const { labels } = props\n return labels ? labels[i] : undefined\n}\nfunction setBtnDividers(i: number) {\n setBtnStyle(i)\n if (!props.noDivider)\n setDividers()\n}\nasync function setBtnStyle(i: number) {\n await nextTick()\n\n const currentCursor = document.querySelectorAll('.m-slider .m-slider__btn')\n\n // get width of text in cursor + padding/space\n if (currentCursor) {\n const cursor = currentCursor[i]\n const width = cursor?.clientWidth + 16\n\n const btnStyle = {\n left:\n typeof buttonPositions.value?.[i] === 'number'\n ? `${buttonPositions.value[i] - width / 2 \|\| 1}px`\n : '',\n }\n\n buttonStyles.value[i] = btnStyle\n }\n}\n\nfunction setDividers() {\n if (buttonPositions.value) {\n // remove getters/setters of vue\n const base = [...buttonPositions.value]\n // add an item to generate one more divider\n base.push(0)\n const baseLength = base.length\n const middle = Math.round(baseLength / 2)\n // generate dividers items with style\n dividers.value = base.map((pos, i) => ({\n left: i === 0 ? 0 : `${base[i - 1]}px`, // ATTENTION: buttonPositions.value[i - 1]\n right: i + 1 === baseLength ? 0 : `calc( 100% - ${pos}px )`,\n backgroundColor:\n middle === i + 1\n ? undefined\n : i < middle\n ? `rgba(255, 255, 255, ${getOpacityCoeff(i, middle, baseLength)})` // lighten\n : `rgba(0, 0, 0, ${getOpacityCoeff(i, middle, baseLength)})`, // darken\n }))\n }\n}\n\nasync function calcPos() {\n await nextTick()\n const { min, max, log } = props\n const barWidth = MazSlider.value?.clientWidth\n if (typeof barWidth === 'number') {\n buttonPositions.value = tmpValues.value?.map(v =>\n log\n ? (barWidth / max) (min + (Math.log(v) - minLog.value) / scale.value)\n : (barWidth / range.value) * (v - min),\n )\n }\n else {\n console.warn('[maz-ui][MazSlider] ref component not found')\n }\n}\nasync function getCursorsValues() {\n await nextTick()\n const { max, min, log } = props\n const barWidth = MazSlider.value?.clientWidth\n if (typeof barWidth === 'number') {\n return log\n ? buttonPositions.value?.map((pos: number) => {\n const position = pos / (barWidth / max)\n const value = Math.exp((position - min) * scale.value + minLog.value)\n return Math.round(value)\n })\n : buttonPositions.value?.map(\n (pos: number) => Math.round(pos / (barWidth / range.value)) + min,\n )\n }\n else {\n console.warn('[maz-ui][MazSlider] ref component not found')\n }\n}\nfunction handleMousedown(_event: MouseEvent \| TouchEvent \| FocusEvent, i: number) {\n if (activeCursor.value !== undefined)\n return\n\n activeCursor.value = i\n setBtnDividers(i)\n}\nasync function handleMouseup() {\n if (activeCursor.value === undefined)\n return\n\n const values = await getCursorsValues()\n\n if (values)\n emitValue(values)\n\n activeCursor.value = undefined\n}\nasync function handleMousemove(event: MouseEvent \| TouchEvent) {\n await nextTick()\n if (activeCursor.value === undefined)\n return\n\n const barWidth = MazSlider.value?.clientWidth\n\n if (buttonPositions.value) {\n const prevValue = buttonPositions.value[activeCursor.value - 1] \|\| 0\n const nextValue = buttonPositions.value[activeCursor.value + 1] \|\| barWidth\n\n if (!MazSlider.value)\n\n return console.error('[maz-ui](MazSlider/handleMousemove) MazSlider not available')\n\n buttonPositions.value[activeCursor.value] = (() => {\n const movement = getPos(event, MazSlider.value).x\n\n if (movement < prevValue) {\n return prevValue\n }\n else if (nextValue && movement > nextValue) {\n return nextValue\n }\n\n return movement\n })()\n\n tmpValues.value = await getCursorsValues()\n\n setBtnDividers(activeCursor.value)\n }\n}\n</script>\n\n<template>\n <!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n <div\n :style=\"[wrapperStyle, { fontSize: size }]\"\n class=\"m-slider m-reset-css\"\n role=\"button\"\n tabindex=\"-1\"\n :class=\"[`m-slider--${color}`]\"\n @mousemove.passive=\"handleMousemove\"\n @mouseup.passive=\"handleMouseup\"\n @mouseleave.passive=\"handleMouseup\"\n @touchmove.passive=\"handleMousemove\"\n >\n <div\n ref=\"MazSlider\"\n class=\"m-slider__bar\"\n role=\"slider\"\n :aria-valuenow=\"modelValue.toString()\"\n :aria-valuemin=\"min\"\n :aria-valuemax=\"max\"\n >\n <div\n v-for=\"(div, i) in dividers\"\n :key=\"`divider-${i}`\"\n :style=\"[div]\"\n class=\"m-slider__divider\"\n />\n\n <button\n v-for=\"(_btn, i) in computedValue\"\n :key=\"`cursor-${i}`\"\n type=\"button\"\n :data-label=\"getLabel(i)\"\n class=\"m-slider__btn\"\n :class=\"{\n 'active-cursor': i === activeCursor && !noCursorAnim,\n }\"\n :style=\"[buttonStyles[i]]\"\n @mousedown.passive=\"handleMousedown($event, i)\"\n @touchstart.passive=\"handleMousedown($event, i)\"\n @focus.passive=\"handleMousedown($event, i)\"\n @blur.passive=\"blurCursor(i)\"\n @touchend.passive=\"blurCursor(i)\"\n @keydown.passive=\"cursorKeyDown($event, i)\"\n >\n <span>\n {{ tmpValues?.[i] }}\n </span>\n </button>\n </div>\n </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n .m-slider {\n padding: 1em 1.5rem;\n\n &__bar {\n @apply maz-relative maz-flex maz-items-center maz-justify-center maz-rounded-full;\n\n height: 0.5em;\n }\n\n &__divider {\n position: absolute;\n border-radius: 2em;\n height: 100%;\n }\n\n &__btn {\n position: absolute;\n outline: none;\n cursor: pointer;\n font-size: 1em;\n font-weight: bold;\n line-height: 1;\n transition:\n box-shadow 300ms ease-in-out,\n width 300ms ease-in-out,\n transform 300ms ease-in-out,\n background-color 300ms ease-in-out;\n z-index: 1;\n user-select: none;\n\n @apply maz-flex maz-items-center maz-justify-center maz-rounded-full maz-border\n maz-border-border maz-bg-bg-light maz-shadow-md;\n\n padding: 0.25em 0.5em;\n\n & span {\n @apply maz-flex maz-items-center maz-text-dark;\n\n margin-left: 0.25em;\n margin-right: 0.25em;\n }\n\n &.active-cursor {\n transform: scale(1.3);\n\n @apply maz-z-2;\n }\n\n &::before {\n content: attr(data-label);\n font-size: 0.8em;\n top: -1.5em;\n\n @apply maz-absolute maz-font-medium maz-text-normal;\n }\n\n &:hover {\n @apply maz-bg-border;\n }\n }\n\n &--primary {\n & .m-slider {\n &__bar {\n @apply maz-bg-primary;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-primary maz-shadow-lg;\n }\n }\n }\n\n &--secondary {\n & .m-slider {\n &__bar {\n @apply maz-bg-secondary;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-secondary maz-shadow-lg;\n }\n }\n }\n\n &--info {\n & .m-slider {\n &__bar {\n @apply maz-bg-info;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-info maz-shadow-lg;\n }\n }\n }\n\n &--success {\n & .m-slider {\n &__bar {\n @apply maz-bg-success;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-success maz-shadow-lg;\n }\n }\n }\n\n &--warning {\n & .m-slider {\n &__bar {\n @apply maz-bg-warning;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-warning maz-shadow-lg;\n }\n }\n }\n\n &--danger {\n & .m-slider {\n &__bar {\n @apply maz-bg-danger;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-danger maz-shadow-lg;\n }\n }\n }\n\n &--white {\n & .m-slider {\n &__bar {\n @apply maz-bg-white;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-white maz-shadow-lg;\n }\n }\n }\n\n &--black {\n & .m-slider {\n &__bar {\n @apply maz-bg-black;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-black maz-shadow-lg;\n }\n }\n }\n}\n</style>\n"],"names":["getOffset","elem","doc","body","rect","getPos","e","isReverse","event","offset","posObj","isBetween","value","prev","next","direction","getOpacityCoeff","index","middle","length","currentIndex","deviation","props","__props","emits","__emit","MazSlider","ref","activeCursor","buttonPositions","tmpValues","buttonStyles","dividers","computedValue","computed","minLog","maxLog","scale","min","max","range","wrapperStyle","hasMultipleValues","watch","buildComponent","resizeListenerFunction","debounce","onMounted","onBeforeUnmount","emitValue","checkValues","calcPos","nextTick","setBtnDividers","cursorKeyDown","i","blurCursor","setBtnStyle","valuesChecked","v","values","valueToEmit","getLabel","labels","setDividers","currentCursor","cursor","width","btnStyle","_a","base","baseLength","pos","log","barWidth","_b","getCursorsValues","position","_c","handleMousedown","_event","handleMouseup","handleMousemove","prevValue","nextValue","movement"],"mappings":"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"}
1	+ {"version":3,"file":"MazSlider.cjs","sources":["../../src/components/MazSlider/utils.ts","../../src/components/MazSlider.vue"],"sourcesContent":["interface IPosObject {\n x: number\n y: number\n}\n\nexport function getOffset(elem: HTMLDivElement): IPosObject {\n const doc = document.documentElement as HTMLElement\n const body = document.body as HTMLElement\n const rect = elem.getBoundingClientRect()\n const offset: IPosObject = {\n y: rect.top + (window.pageYOffset \|\| doc.scrollTop) - (doc.clientTop \|\| body.clientTop \|\| 0),\n x:\n rect.left + (window.pageXOffset \|\| doc.scrollLeft) - (doc.clientLeft \|\| body.clientLeft \|\| 0),\n }\n return offset\n}\n\n/*\n Get the position of the mouse/finger in the element\n * @param e Trigger event\n * @param elem Container element\n * @param isReverse From the right/bottom\n /\nexport function getPos(e: MouseEvent \| TouchEvent, elem: HTMLDivElement, isReverse = false): IPosObject {\n const event = 'targetTouches' in e ? e.targetTouches[0] : e\n const offset = getOffset(elem)\n const posObj = {\n x: event.pageX - offset.x,\n y: event.pageY - offset.y,\n }\n return {\n x: isReverse ? elem.offsetWidth - posObj.x : posObj.x,\n y: isReverse ? elem.offsetHeight - posObj.y : posObj.y,\n }\n}\n\nexport function isBetween(value: number, prev: number, next: number, direction: string) {\n return direction === 'minus' ? (prev ? value >= prev : true) : next ? value <= next : true\n}\n\nexport function getOpacityCoeff(index: number, middle: number, length: number) {\n const currentIndex = index + 1\n const isBiggerThanMiddle = middle < currentIndex\n const deviation = isBiggerThanMiddle ? currentIndex - middle : middle - currentIndex\n return ((100 / length) deviation) / 100\n}\n","<script lang=\"ts\" setup>\nimport type { Color } from './types'\nimport {\n computed,\n type CSSProperties,\n nextTick,\n onBeforeUnmount,\n onMounted,\n type PropType,\n ref,\n watch,\n} from 'vue'\n\nimport { debounce } from '../helpers/debounce'\nimport { getOpacityCoeff, getPos, isBetween } from './MazSlider/utils'\n\nconst props = defineProps({\n /** Array of cursors values /\n modelValue: {\n type: [Number, Array] as PropType<number \| number[]>,\n required: true,\n validator: (value: string) => {\n return ['number'].includes(typeof value) \|\| Array.isArray(value) \|\| value === null\n },\n },\n /* array of cursors label /\n labels: { type: Array, default: undefined },\n /* min value of sliders /\n min: { type: Number, default: 0 },\n /* max value of sliders /\n max: { type: Number, default: 100 },\n /* height size of slider bar /\n size: { type: String, default: undefined },\n /* remove div in different colors /\n noDivider: { type: Boolean, default: false },\n /* become a logarithmic slider (exponential) /\n log: { type: Boolean, default: false },\n /* main slider color /\n color: {\n type: String as PropType<Color>,\n default: 'primary',\n },\n /* disables cursor animation when active /\n noCursorAnim: { type: Boolean, default: false },\n})\n\nconst emits = defineEmits(['update:model-value'])\n\nconst MazSlider = ref<HTMLDivElement>()\n\nconst activeCursor = ref<number>()\nconst buttonPositions = ref<number[]>()\nconst tmpValues = ref<number[]>()\n\nconst buttonStyles = ref<CSSProperties[]>([])\nconst dividers = ref<CSSProperties[]>([])\n\n// COMPUTED\n\nconst computedValue = computed<number[]>(() => {\n if (typeof props.modelValue === 'number') {\n return [props.modelValue]\n }\n else if (props.modelValue) {\n return props.modelValue\n }\n else {\n return [0]\n }\n})\nconst minLog = computed(() => {\n return Math.log(props.min \|\| 1)\n})\nconst maxLog = computed(() => {\n return Math.log(props.max)\n})\nconst scale = computed(() => {\n const { min, max } = props\n return (maxLog.value - minLog.value) / (max - min)\n})\nconst range = computed(() => {\n const { min, max } = props\n return max - min\n})\nconst wrapperStyle = computed(() => {\n return {\n paddingTop: props.labels ? `2.5em` : `1em`,\n }\n})\nconst hasMultipleValues = computed(() => Array.isArray(props.modelValue))\n\nwatch(\n () => props.modelValue,\n () => (tmpValues.value = computedValue.value),\n { immediate: true },\n)\nwatch(\n () => [computedValue.value, props.min, props.max, props.log].join(','),\n () => buildComponent(true),\n)\n\nconst resizeListenerFunction = debounce(() => buildComponent(), 300)\n\nonMounted(() => {\n buildComponent(true)\n\n window.addEventListener('resize', resizeListenerFunction)\n})\n\nonBeforeUnmount(() => {\n window.removeEventListener('resize', resizeListenerFunction)\n})\n\nasync function buildComponent(emitValue?: boolean) {\n if (emitValue === true)\n checkValues()\n await calcPos()\n await nextTick()\n\n for (const [index] of computedValue.value.entries()) {\n setBtnDividers(index)\n }\n}\n\nfunction cursorKeyDown(event: KeyboardEvent, i: number) {\n if (event.key === 'ArrowLeft') {\n if (\n tmpValues.value\n && isBetween(tmpValues.value[i] - 1, tmpValues.value[i - 1], tmpValues.value[i + 1], 'minus')\n ) {\n tmpValues.value[i]--\n emitValue(tmpValues.value)\n }\n }\n // ArrowRight\n else if (\n event.key === 'ArrowRight'\n && tmpValues.value\n && isBetween(tmpValues.value[i] + 1, tmpValues.value[i - 1], tmpValues.value[i + 1], 'plus')\n ) {\n tmpValues.value[i]++\n emitValue(tmpValues.value)\n }\n}\nfunction blurCursor(i: number) {\n activeCursor.value = undefined\n setBtnStyle(i)\n}\nfunction checkValues() {\n // check if values are not below the min or above the max\n const { min, max } = props\n const valuesChecked = computedValue.value.map((v: number) =>\n v < min ? min : v > max ? max : v,\n )\n emitValue(valuesChecked)\n tmpValues.value = valuesChecked\n}\nfunction emitValue(values: number[]) {\n const valueToEmit = hasMultipleValues.value ? [...values] : values[0]\n emits('update:model-value', valueToEmit)\n}\nfunction getLabel(i: number) {\n const { labels } = props\n return labels ? labels[i] : undefined\n}\nfunction setBtnDividers(i: number) {\n setBtnStyle(i)\n if (!props.noDivider)\n setDividers()\n}\nasync function setBtnStyle(i: number) {\n await nextTick()\n\n const currentCursor = document.querySelectorAll('.m-slider .m-slider__btn')\n\n // get width of text in cursor + padding/space\n if (currentCursor) {\n const cursor = currentCursor[i]\n const width = cursor?.clientWidth + 16\n\n const btnStyle = {\n left:\n typeof buttonPositions.value?.[i] === 'number'\n ? `${buttonPositions.value[i] - width / 2 \|\| 1}px`\n : '',\n }\n\n buttonStyles.value[i] = btnStyle\n }\n}\n\nfunction setDividers() {\n if (buttonPositions.value) {\n // remove getters/setters of vue\n const base = [...buttonPositions.value]\n // add an item to generate one more divider\n base.push(0)\n const baseLength = base.length\n const middle = Math.round(baseLength / 2)\n // generate dividers items with style\n dividers.value = base.map((pos, i) => ({\n left: i === 0 ? 0 : `${base[i - 1]}px`, // ATTENTION: buttonPositions.value[i - 1]\n right: i + 1 === baseLength ? 0 : `calc( 100% - ${pos}px )`,\n backgroundColor:\n middle === i + 1\n ? undefined\n : i < middle\n ? `rgba(255, 255, 255, ${getOpacityCoeff(i, middle, baseLength)})` // lighten\n : `rgba(0, 0, 0, ${getOpacityCoeff(i, middle, baseLength)})`, // darken\n }))\n }\n}\n\nasync function calcPos() {\n await nextTick()\n const { min, max, log } = props\n const barWidth = MazSlider.value?.clientWidth\n if (typeof barWidth === 'number') {\n buttonPositions.value = tmpValues.value?.map(v =>\n log\n ? (barWidth / max) (min + (Math.log(v) - minLog.value) / scale.value)\n : (barWidth / range.value) * (v - min),\n )\n }\n else {\n console.warn('[maz-ui][MazSlider] ref component not found')\n }\n}\nasync function getCursorsValues() {\n await nextTick()\n const { max, min, log } = props\n const barWidth = MazSlider.value?.clientWidth\n if (typeof barWidth === 'number') {\n return log\n ? buttonPositions.value?.map((pos: number) => {\n const position = pos / (barWidth / max)\n const value = Math.exp((position - min) * scale.value + minLog.value)\n return Math.round(value)\n })\n : buttonPositions.value?.map(\n (pos: number) => Math.round(pos / (barWidth / range.value)) + min,\n )\n }\n else {\n console.warn('[maz-ui][MazSlider] ref component not found')\n }\n}\nfunction handleMousedown(_event: MouseEvent \| TouchEvent \| FocusEvent, i: number) {\n if (activeCursor.value !== undefined)\n return\n\n activeCursor.value = i\n setBtnDividers(i)\n}\nasync function handleMouseup() {\n if (activeCursor.value === undefined)\n return\n\n const values = await getCursorsValues()\n\n if (values)\n emitValue(values)\n\n activeCursor.value = undefined\n}\nasync function handleMousemove(event: MouseEvent \| TouchEvent) {\n await nextTick()\n if (activeCursor.value === undefined)\n return\n\n const barWidth = MazSlider.value?.clientWidth\n\n if (buttonPositions.value) {\n const prevValue = buttonPositions.value[activeCursor.value - 1] \|\| 0\n const nextValue = buttonPositions.value[activeCursor.value + 1] \|\| barWidth\n\n if (!MazSlider.value)\n\n return console.error('[maz-ui](MazSlider/handleMousemove) MazSlider not available')\n\n buttonPositions.value[activeCursor.value] = (() => {\n const movement = getPos(event, MazSlider.value).x\n\n if (movement < prevValue) {\n return prevValue\n }\n else if (nextValue && movement > nextValue) {\n return nextValue\n }\n\n return movement\n })()\n\n tmpValues.value = await getCursorsValues()\n\n setBtnDividers(activeCursor.value)\n }\n}\n</script>\n\n<template>\n <!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n <div\n :style=\"[wrapperStyle, { fontSize: size }]\"\n class=\"m-slider m-reset-css\"\n role=\"button\"\n tabindex=\"-1\"\n :class=\"[`m-slider--${color}`]\"\n @mousemove.passive=\"handleMousemove\"\n @mouseup.passive=\"handleMouseup\"\n @mouseleave.passive=\"handleMouseup\"\n @touchmove.passive=\"handleMousemove\"\n >\n <div\n ref=\"MazSlider\"\n class=\"m-slider__bar\"\n role=\"slider\"\n :aria-valuenow=\"modelValue.toString()\"\n :aria-valuemin=\"min\"\n :aria-valuemax=\"max\"\n >\n <div\n v-for=\"(div, i) in dividers\"\n :key=\"`divider-${i}`\"\n :style=\"[div]\"\n class=\"m-slider__divider\"\n />\n\n <button\n v-for=\"(_btn, i) in computedValue\"\n :key=\"`cursor-${i}`\"\n type=\"button\"\n :data-label=\"getLabel(i)\"\n class=\"m-slider__btn\"\n :class=\"{\n 'active-cursor': i === activeCursor && !noCursorAnim,\n }\"\n :style=\"[buttonStyles[i]]\"\n @mousedown.passive=\"handleMousedown($event, i)\"\n @touchstart.passive=\"handleMousedown($event, i)\"\n @focus.passive=\"handleMousedown($event, i)\"\n @blur.passive=\"blurCursor(i)\"\n @touchend.passive=\"blurCursor(i)\"\n @keydown.passive=\"cursorKeyDown($event, i)\"\n >\n <span>\n {{ tmpValues?.[i] }}\n </span>\n </button>\n </div>\n </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n .m-slider {\n padding: 1em 1.5rem;\n\n &__bar {\n @apply maz-relative maz-flex maz-items-center maz-justify-center maz-rounded-full;\n\n height: 0.5em;\n }\n\n &__divider {\n position: absolute;\n border-radius: 2em;\n height: 100%;\n }\n\n &__btn {\n position: absolute;\n outline: none;\n cursor: pointer;\n font-size: 1em;\n font-weight: bold;\n line-height: 1;\n transition:\n box-shadow 300ms ease-in-out,\n width 300ms ease-in-out,\n transform 300ms ease-in-out,\n background-color 300ms ease-in-out;\n z-index: 1;\n user-select: none;\n\n @apply maz-flex maz-items-center maz-justify-center maz-rounded-full maz-border\n maz-border-border maz-bg-bg-light maz-shadow-md;\n\n padding: 0.25em 0.5em;\n\n & span {\n @apply maz-flex maz-items-center maz-text-dark;\n\n margin-left: 0.25em;\n margin-right: 0.25em;\n }\n\n &.active-cursor {\n transform: scale(1.3);\n\n @apply maz-z-2;\n }\n\n &::before {\n content: attr(data-label);\n font-size: 0.8em;\n top: -1.5em;\n\n @apply maz-absolute maz-font-medium maz-text-normal;\n }\n\n &:hover {\n @apply maz-bg-border;\n }\n }\n\n &--primary {\n & .m-slider {\n &__bar {\n @apply maz-bg-primary;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-primary maz-shadow-lg;\n }\n }\n }\n\n &--secondary {\n & .m-slider {\n &__bar {\n @apply maz-bg-secondary;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-secondary maz-shadow-lg;\n }\n }\n }\n\n &--info {\n & .m-slider {\n &__bar {\n @apply maz-bg-info;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-info maz-shadow-lg;\n }\n }\n }\n\n &--success {\n & .m-slider {\n &__bar {\n @apply maz-bg-success;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-success maz-shadow-lg;\n }\n }\n }\n\n &--warning {\n & .m-slider {\n &__bar {\n @apply maz-bg-warning;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-warning maz-shadow-lg;\n }\n }\n }\n\n &--danger {\n & .m-slider {\n &__bar {\n @apply maz-bg-danger;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-danger maz-shadow-lg;\n }\n }\n }\n\n &--white {\n & .m-slider {\n &__bar {\n @apply maz-bg-white;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-white maz-shadow-lg;\n }\n }\n }\n\n &--black {\n & .m-slider {\n &__bar {\n @apply maz-bg-black;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-black maz-shadow-lg;\n }\n }\n }\n}\n</style>\n"],"names":["getOffset","elem","doc","body","rect","getPos","e","isReverse","event","offset","posObj","isBetween","value","prev","next","direction","getOpacityCoeff","index","middle","length","currentIndex","deviation","props","__props","emits","__emit","MazSlider","ref","activeCursor","buttonPositions","tmpValues","buttonStyles","dividers","computedValue","computed","minLog","maxLog","scale","min","max","range","wrapperStyle","hasMultipleValues","watch","buildComponent","resizeListenerFunction","debounce","onMounted","onBeforeUnmount","emitValue","checkValues","calcPos","nextTick","setBtnDividers","cursorKeyDown","i","blurCursor","setBtnStyle","valuesChecked","v","values","valueToEmit","getLabel","labels","setDividers","currentCursor","cursor","width","btnStyle","_a","base","baseLength","pos","log","barWidth","_b","getCursorsValues","position","_c","handleMousedown","_event","handleMouseup","handleMousemove","prevValue","nextValue","movement"],"mappings":"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"}

package/dist/components/MazSlider.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
-import { defineComponent as te, ref as p, computed as f, watch as O, onMounted as ne, onBeforeUnmount as oe, nextTick as b, openBlock as g, createElementBlock as w, normalizeStyle as T, normalizeClass as F, createElementVNode as N, Fragment as K, renderList as j, toDisplayString as ae } from "vue";
+import { defineComponent as te, ref as p, computed as f, watch as O, onMounted as ne, onBeforeUnmount as oe, nextTick as h, openBlock as g, createElementBlock as w, normalizeStyle as T, normalizeClass as F, createElementVNode as N, Fragment as K, renderList as j, toDisplayString as ae } from "vue";
 import { debounce as ue } from "../helpers/debounce.mjs";
 import { _ as le } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
-import '../assets/MazSlider.D08gO9DD.css';function se(a) {
+import '../assets/MazSlider.KrU-f4K4.css';function se(a) {
   const i = document.documentElement, o = document.body, d = a.getBoundingClientRect();
   return {
     y: d.top + (window.pageYOffset || i.scrollTop) - (i.clientTop || o.clientTop || 0),
@@ -80,7 +80,7 @@ const ie = ["aria-valuenow", "aria-valuemin", "aria-valuemax"], ce = ["data-labe
       window.removeEventListener("resize", k);
     });
     async function z(e) {
-      e === !0 && U(), await Q(), await b();
+      e === !0 && U(), await Q(), await h();
       for (const [t] of y.value.entries())
         P(t);
     }
@@ -109,7 +109,7 @@ const ie = ["aria-valuenow", "aria-valuemin", "aria-valuemax"], ce = ["data-labe
     }
     async function $(e) {
       var s;
-      await b();
+      await h();
       const t = document.querySelectorAll(".m-slider .m-slider__btn");
       if (t) {
         const n = t[e], u = (n == null ? void 0 : n.clientWidth) + 16, l = {
@@ -134,21 +134,21 @@ const ie = ["aria-valuenow", "aria-valuemin", "aria-valuemax"], ce = ["data-labe
     }
     async function Q() {
       var u, l;
-      await b();
+      await h();
       const { min: e, max: t, log: s } = o, n = (u = v.value) == null ? void 0 : u.clientWidth;
       typeof n == "number" ? m.value = (l = c.value) == null ? void 0 : l.map(
-        (h) => s ? n / t * (e + (Math.log(h) - M.value) / C.value) : n / L.value * (h - e)
+        (b) => s ? n / t * (e + (Math.log(b) - M.value) / C.value) : n / L.value * (b - e)
       ) : console.warn("[maz-ui][MazSlider] ref component not found");
     }
     async function W() {
-      var u, l, h;
-      await b();
+      var u, l, b;
+      await h();
       const { max: e, min: t, log: s } = o, n = (u = v.value) == null ? void 0 : u.clientWidth;
       if (typeof n == "number")
         return s ? (l = m.value) == null ? void 0 : l.map((V) => {
           const Z = V / (n / e), ee = Math.exp((Z - t) * C.value + M.value);
           return Math.round(ee);
-        }) : (h = m.value) == null ? void 0 : h.map(
+        }) : (b = m.value) == null ? void 0 : b.map(
           (V) => Math.round(V / (n / L.value)) + t
         );
       console.warn("[maz-ui][MazSlider] ref component not found");
@@ -164,7 +164,7 @@ const ie = ["aria-valuenow", "aria-valuemin", "aria-valuemax"], ce = ["data-labe
     }
     async function E(e) {
       var s;
-      if (await b(), r.value === void 0)
+      if (await h(), r.value === void 0)
         return;
       const t = (s = v.value) == null ? void 0 : s.clientWidth;
       if (m.value) {
@@ -224,7 +224,7 @@ const ie = ["aria-valuenow", "aria-valuemin", "aria-valuemax"], ce = ["data-labe
       ], 8, ie)
     ], 38));
   }
-}), pe = /* @__PURE__ */ le(de, [["__scopeId", "data-v-0ba9f676"]]);
+}), pe = /* @__PURE__ */ le(de, [["__scopeId", "data-v-14ebe2cb"]]);
 export {
   pe as default
 };

package/dist/components/MazSlider.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MazSlider.mjs","sources":["../../src/components/MazSlider/utils.ts","../../src/components/MazSlider.vue"],"sourcesContent":["interface IPosObject {\n x: number\n y: number\n}\n\nexport function getOffset(elem: HTMLDivElement): IPosObject {\n const doc = document.documentElement as HTMLElement\n const body = document.body as HTMLElement\n const rect = elem.getBoundingClientRect()\n const offset: IPosObject = {\n y: rect.top + (window.pageYOffset \|\| doc.scrollTop) - (doc.clientTop \|\| body.clientTop \|\| 0),\n x:\n rect.left + (window.pageXOffset \|\| doc.scrollLeft) - (doc.clientLeft \|\| body.clientLeft \|\| 0),\n }\n return offset\n}\n\n/*\n Get the position of the mouse/finger in the element\n * @param e Trigger event\n * @param elem Container element\n * @param isReverse From the right/bottom\n /\nexport function getPos(e: MouseEvent \| TouchEvent, elem: HTMLDivElement, isReverse = false): IPosObject {\n const event = 'targetTouches' in e ? e.targetTouches[0] : e\n const offset = getOffset(elem)\n const posObj = {\n x: event.pageX - offset.x,\n y: event.pageY - offset.y,\n }\n return {\n x: isReverse ? elem.offsetWidth - posObj.x : posObj.x,\n y: isReverse ? elem.offsetHeight - posObj.y : posObj.y,\n }\n}\n\nexport function isBetween(value: number, prev: number, next: number, direction: string) {\n return direction === 'minus' ? (prev ? value >= prev : true) : next ? value <= next : true\n}\n\nexport function getOpacityCoeff(index: number, middle: number, length: number) {\n const currentIndex = index + 1\n const isBiggerThanMiddle = middle < currentIndex\n const deviation = isBiggerThanMiddle ? currentIndex - middle : middle - currentIndex\n return ((100 / length) deviation) / 100\n}\n","<script lang=\"ts\" setup>\nimport type { Color } from '@components/types'\nimport { getOpacityCoeff, getPos, isBetween } from '@components/MazSlider/utils'\n\nimport { debounce } from '@helpers/debounce'\nimport {\n computed,\n type CSSProperties,\n nextTick,\n onBeforeUnmount,\n onMounted,\n type PropType,\n ref,\n watch,\n} from 'vue'\n\nconst props = defineProps({\n /** Array of cursors values /\n modelValue: {\n type: [Number, Array] as PropType<number \| number[]>,\n required: true,\n validator: (value: string) => {\n return ['number'].includes(typeof value) \|\| Array.isArray(value) \|\| value === null\n },\n },\n /* array of cursors label /\n labels: { type: Array, default: undefined },\n /* min value of sliders /\n min: { type: Number, default: 0 },\n /* max value of sliders /\n max: { type: Number, default: 100 },\n /* height size of slider bar /\n size: { type: String, default: undefined },\n /* remove div in different colors /\n noDivider: { type: Boolean, default: false },\n /* become a logarithmic slider (exponential) /\n log: { type: Boolean, default: false },\n /* main slider color /\n color: {\n type: String as PropType<Color>,\n default: 'primary',\n },\n /* disables cursor animation when active /\n noCursorAnim: { type: Boolean, default: false },\n})\n\nconst emits = defineEmits(['update:model-value'])\n\nconst MazSlider = ref<HTMLDivElement>()\n\nconst activeCursor = ref<number>()\nconst buttonPositions = ref<number[]>()\nconst tmpValues = ref<number[]>()\n\nconst buttonStyles = ref<CSSProperties[]>([])\nconst dividers = ref<CSSProperties[]>([])\n\n// COMPUTED\n\nconst computedValue = computed<number[]>(() => {\n if (typeof props.modelValue === 'number') {\n return [props.modelValue]\n }\n else if (props.modelValue) {\n return props.modelValue\n }\n else {\n return [0]\n }\n})\nconst minLog = computed(() => {\n return Math.log(props.min \|\| 1)\n})\nconst maxLog = computed(() => {\n return Math.log(props.max)\n})\nconst scale = computed(() => {\n const { min, max } = props\n return (maxLog.value - minLog.value) / (max - min)\n})\nconst range = computed(() => {\n const { min, max } = props\n return max - min\n})\nconst wrapperStyle = computed(() => {\n return {\n paddingTop: props.labels ? `2.5em` : `1em`,\n }\n})\nconst hasMultipleValues = computed(() => Array.isArray(props.modelValue))\n\nwatch(\n () => props.modelValue,\n () => (tmpValues.value = computedValue.value),\n { immediate: true },\n)\nwatch(\n () => [computedValue.value, props.min, props.max, props.log].join(','),\n () => buildComponent(true),\n)\n\nconst resizeListenerFunction = debounce(() => buildComponent(), 300)\n\nonMounted(() => {\n buildComponent(true)\n\n window.addEventListener('resize', resizeListenerFunction)\n})\n\nonBeforeUnmount(() => {\n window.removeEventListener('resize', resizeListenerFunction)\n})\n\nasync function buildComponent(emitValue?: boolean) {\n if (emitValue === true)\n checkValues()\n await calcPos()\n await nextTick()\n\n for (const [index] of computedValue.value.entries()) {\n setBtnDividers(index)\n }\n}\n\nfunction cursorKeyDown(event: KeyboardEvent, i: number) {\n if (event.key === 'ArrowLeft') {\n if (\n tmpValues.value\n && isBetween(tmpValues.value[i] - 1, tmpValues.value[i - 1], tmpValues.value[i + 1], 'minus')\n ) {\n tmpValues.value[i]--\n emitValue(tmpValues.value)\n }\n }\n // ArrowRight\n else if (\n event.key === 'ArrowRight'\n && tmpValues.value\n && isBetween(tmpValues.value[i] + 1, tmpValues.value[i - 1], tmpValues.value[i + 1], 'plus')\n ) {\n tmpValues.value[i]++\n emitValue(tmpValues.value)\n }\n}\nfunction blurCursor(i: number) {\n activeCursor.value = undefined\n setBtnStyle(i)\n}\nfunction checkValues() {\n // check if values are not below the min or above the max\n const { min, max } = props\n const valuesChecked = computedValue.value.map((v: number) =>\n v < min ? min : v > max ? max : v,\n )\n emitValue(valuesChecked)\n tmpValues.value = valuesChecked\n}\nfunction emitValue(values: number[]) {\n const valueToEmit = hasMultipleValues.value ? [...values] : values[0]\n emits('update:model-value', valueToEmit)\n}\nfunction getLabel(i: number) {\n const { labels } = props\n return labels ? labels[i] : undefined\n}\nfunction setBtnDividers(i: number) {\n setBtnStyle(i)\n if (!props.noDivider)\n setDividers()\n}\nasync function setBtnStyle(i: number) {\n await nextTick()\n\n const currentCursor = document.querySelectorAll('.m-slider .m-slider__btn')\n\n // get width of text in cursor + padding/space\n if (currentCursor) {\n const cursor = currentCursor[i]\n const width = cursor?.clientWidth + 16\n\n const btnStyle = {\n left:\n typeof buttonPositions.value?.[i] === 'number'\n ? `${buttonPositions.value[i] - width / 2 \|\| 1}px`\n : '',\n }\n\n buttonStyles.value[i] = btnStyle\n }\n}\n\nfunction setDividers() {\n if (buttonPositions.value) {\n // remove getters/setters of vue\n const base = [...buttonPositions.value]\n // add an item to generate one more divider\n base.push(0)\n const baseLength = base.length\n const middle = Math.round(baseLength / 2)\n // generate dividers items with style\n dividers.value = base.map((pos, i) => ({\n left: i === 0 ? 0 : `${base[i - 1]}px`, // ATTENTION: buttonPositions.value[i - 1]\n right: i + 1 === baseLength ? 0 : `calc( 100% - ${pos}px )`,\n backgroundColor:\n middle === i + 1\n ? undefined\n : i < middle\n ? `rgba(255, 255, 255, ${getOpacityCoeff(i, middle, baseLength)})` // lighten\n : `rgba(0, 0, 0, ${getOpacityCoeff(i, middle, baseLength)})`, // darken\n }))\n }\n}\n\nasync function calcPos() {\n await nextTick()\n const { min, max, log } = props\n const barWidth = MazSlider.value?.clientWidth\n if (typeof barWidth === 'number') {\n buttonPositions.value = tmpValues.value?.map(v =>\n log\n ? (barWidth / max) (min + (Math.log(v) - minLog.value) / scale.value)\n : (barWidth / range.value) * (v - min),\n )\n }\n else {\n console.warn('[maz-ui][MazSlider] ref component not found')\n }\n}\nasync function getCursorsValues() {\n await nextTick()\n const { max, min, log } = props\n const barWidth = MazSlider.value?.clientWidth\n if (typeof barWidth === 'number') {\n return log\n ? buttonPositions.value?.map((pos: number) => {\n const position = pos / (barWidth / max)\n const value = Math.exp((position - min) * scale.value + minLog.value)\n return Math.round(value)\n })\n : buttonPositions.value?.map(\n (pos: number) => Math.round(pos / (barWidth / range.value)) + min,\n )\n }\n else {\n console.warn('[maz-ui][MazSlider] ref component not found')\n }\n}\nfunction handleMousedown(_event: MouseEvent \| TouchEvent \| FocusEvent, i: number) {\n if (activeCursor.value !== undefined)\n return\n\n activeCursor.value = i\n setBtnDividers(i)\n}\nasync function handleMouseup() {\n if (activeCursor.value === undefined)\n return\n\n const values = await getCursorsValues()\n\n if (values)\n emitValue(values)\n\n activeCursor.value = undefined\n}\nasync function handleMousemove(event: MouseEvent \| TouchEvent) {\n await nextTick()\n if (activeCursor.value === undefined)\n return\n\n const barWidth = MazSlider.value?.clientWidth\n\n if (buttonPositions.value) {\n const prevValue = buttonPositions.value[activeCursor.value - 1] \|\| 0\n const nextValue = buttonPositions.value[activeCursor.value + 1] \|\| barWidth\n\n if (!MazSlider.value)\n\n return console.error('[maz-ui](MazSlider/handleMousemove) MazSlider not available')\n\n buttonPositions.value[activeCursor.value] = (() => {\n const movement = getPos(event, MazSlider.value).x\n\n if (movement < prevValue) {\n return prevValue\n }\n else if (nextValue && movement > nextValue) {\n return nextValue\n }\n\n return movement\n })()\n\n tmpValues.value = await getCursorsValues()\n\n setBtnDividers(activeCursor.value)\n }\n}\n</script>\n\n<template>\n <!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n <div\n :style=\"[wrapperStyle, { fontSize: size }]\"\n class=\"m-slider m-reset-css\"\n role=\"button\"\n tabindex=\"-1\"\n :class=\"[`m-slider--${color}`]\"\n @mousemove.passive=\"handleMousemove\"\n @mouseup.passive=\"handleMouseup\"\n @mouseleave.passive=\"handleMouseup\"\n @touchmove.passive=\"handleMousemove\"\n >\n <div\n ref=\"MazSlider\"\n class=\"m-slider__bar\"\n role=\"slider\"\n :aria-valuenow=\"modelValue.toString()\"\n :aria-valuemin=\"min\"\n :aria-valuemax=\"max\"\n >\n <div\n v-for=\"(div, i) in dividers\"\n :key=\"`divider-${i}`\"\n :style=\"[div]\"\n class=\"m-slider__divider\"\n />\n\n <button\n v-for=\"(_btn, i) in computedValue\"\n :key=\"`cursor-${i}`\"\n type=\"button\"\n :data-label=\"getLabel(i)\"\n class=\"m-slider__btn\"\n :class=\"{\n 'active-cursor': i === activeCursor && !noCursorAnim,\n }\"\n :style=\"[buttonStyles[i]]\"\n @mousedown.passive=\"handleMousedown($event, i)\"\n @touchstart.passive=\"handleMousedown($event, i)\"\n @focus.passive=\"handleMousedown($event, i)\"\n @blur.passive=\"blurCursor(i)\"\n @touchend.passive=\"blurCursor(i)\"\n @keydown.passive=\"cursorKeyDown($event, i)\"\n >\n <span>\n {{ tmpValues?.[i] }}\n </span>\n </button>\n </div>\n </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n .m-slider {\n padding: 1em 1.5rem;\n\n &__bar {\n @apply maz-relative maz-flex maz-items-center maz-justify-center maz-rounded-full;\n\n height: 0.5em;\n }\n\n &__divider {\n position: absolute;\n border-radius: 2em;\n height: 100%;\n }\n\n &__btn {\n position: absolute;\n outline: none;\n cursor: pointer;\n font-size: 1em;\n font-weight: bold;\n line-height: 1;\n transition:\n box-shadow 300ms ease-in-out,\n width 300ms ease-in-out,\n transform 300ms ease-in-out,\n background-color 300ms ease-in-out;\n z-index: 1;\n user-select: none;\n\n @apply maz-flex maz-items-center maz-justify-center maz-rounded-full maz-border\n maz-border-border maz-bg-bg-light maz-shadow-md;\n\n padding: 0.25em 0.5em;\n\n & span {\n @apply maz-flex maz-items-center maz-text-dark;\n\n margin-left: 0.25em;\n margin-right: 0.25em;\n }\n\n &.active-cursor {\n transform: scale(1.3);\n\n @apply maz-z-2;\n }\n\n &::before {\n content: attr(data-label);\n font-size: 0.8em;\n top: -1.5em;\n\n @apply maz-absolute maz-font-medium maz-text-normal;\n }\n\n &:hover {\n @apply maz-bg-border;\n }\n }\n\n &--primary {\n & .m-slider {\n &__bar {\n @apply maz-bg-primary;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-primary maz-shadow-lg;\n }\n }\n }\n\n &--secondary {\n & .m-slider {\n &__bar {\n @apply maz-bg-secondary;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-secondary maz-shadow-lg;\n }\n }\n }\n\n &--info {\n & .m-slider {\n &__bar {\n @apply maz-bg-info;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-info maz-shadow-lg;\n }\n }\n }\n\n &--success {\n & .m-slider {\n &__bar {\n @apply maz-bg-success;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-success maz-shadow-lg;\n }\n }\n }\n\n &--warning {\n & .m-slider {\n &__bar {\n @apply maz-bg-warning;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-warning maz-shadow-lg;\n }\n }\n }\n\n &--danger {\n & .m-slider {\n &__bar {\n @apply maz-bg-danger;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-danger maz-shadow-lg;\n }\n }\n }\n\n &--white {\n & .m-slider {\n &__bar {\n @apply maz-bg-white;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-white maz-shadow-lg;\n }\n }\n }\n\n &--black {\n & .m-slider {\n &__bar {\n @apply maz-bg-black;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-black maz-shadow-lg;\n }\n }\n }\n}\n</style>\n"],"names":["getOffset","elem","doc","body","rect","getPos","e","isReverse","event","offset","posObj","isBetween","value","prev","next","direction","getOpacityCoeff","index","middle","length","currentIndex","deviation","props","__props","emits","__emit","MazSlider","ref","activeCursor","buttonPositions","tmpValues","buttonStyles","dividers","computedValue","computed","minLog","maxLog","scale","min","max","range","wrapperStyle","hasMultipleValues","watch","buildComponent","resizeListenerFunction","debounce","onMounted","onBeforeUnmount","emitValue","checkValues","calcPos","nextTick","setBtnDividers","cursorKeyDown","i","blurCursor","setBtnStyle","valuesChecked","v","values","valueToEmit","getLabel","labels","setDividers","currentCursor","cursor","width","btnStyle","_a","base","baseLength","pos","log","barWidth","_b","getCursorsValues","position","_c","handleMousedown","_event","handleMouseup","handleMousemove","prevValue","nextValue","movement"],"mappings":";;;AAKO,SAASA,GAAUC,GAAkC;AAC1D,QAAMC,IAAM,SAAS,iBACfC,IAAO,SAAS,MAChBC,IAAOH,EAAK,sBAAsB;AAMjC,SALoB;AAAA,IACzB,GAAGG,EAAK,OAAO,OAAO,eAAeF,EAAI,cAAcA,EAAI,aAAaC,EAAK,aAAa;AAAA,IAC1F,GACEC,EAAK,QAAQ,OAAO,eAAeF,EAAI,eAAeA,EAAI,cAAcC,EAAK,cAAc;AAAA,EAC/F;AAEF;AAQO,SAASE,GAAOC,GAA4BL,GAAsBM,IAAY,IAAmB;AACtG,QAAMC,IAAQ,mBAAmBF,IAAIA,EAAE,cAAc,CAAC,IAAIA,GACpDG,IAAST,GAAUC,CAAI,GACvBS,IAAS;AAAA,IACb,GAAGF,EAAM,QAAQC,EAAO;AAAA,IACxB,GAAGD,EAAM,QAAQC,EAAO;AAAA,EAC1B;AACO,SAAA;AAAA,IACL,GAAGF,IAAYN,EAAK,cAAcS,EAAO,IAAIA,EAAO;AAAA,IACpD,GAAGH,IAAYN,EAAK,eAAeS,EAAO,IAAIA,EAAO;AAAA,EACvD;AACF;AAEO,SAASC,EAAUC,GAAeC,GAAcC,GAAcC,GAAmB;AAC/E,SAAAA,MAAc,UAAWF,IAAOD,KAASC,IAAO,KAAQC,IAAOF,KAASE,IAAO;AACxF;AAEgB,SAAAE,EAAgBC,GAAeC,GAAgBC,GAAgB;AAC7E,QAAMC,IAAeH,IAAQ,GAEvBI,IADqBH,IAASE,IACGA,IAAeF,IAASA,IAASE;AAC/D,SAAA,MAAMD,IAAUE,IAAa;AACxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC7BA,UAAMC,IAAQC,GA8BRC,IAAQC,GAERC,IAAYC,EAAoB,GAEhCC,IAAeD,EAAY,GAC3BE,IAAkBF,EAAc,GAChCG,IAAYH,EAAc,GAE1BI,IAAeJ,EAAqB,EAAE,GACtCK,IAAWL,EAAqB,EAAE,GAIlCM,IAAgBC,EAAmB,MACnC,OAAOZ,EAAM,cAAe,WACvB,CAACA,EAAM,UAAU,IAEjBA,EAAM,aACNA,EAAM,aAGN,CAAC,CAAC,CAEZ,GACKa,IAASD,EAAS,MACf,KAAK,IAAIZ,EAAM,OAAO,CAAC,CAC/B,GACKc,IAASF,EAAS,MACf,KAAK,IAAIZ,EAAM,GAAG,CAC1B,GACKe,IAAQH,EAAS,MAAM;AACrB,YAAA,EAAE,KAAAI,GAAK,KAAAC,EAAA,IAAQjB;AACrB,cAAQc,EAAO,QAAQD,EAAO,UAAUI,IAAMD;AAAA,IAAA,CAC/C,GACKE,IAAQN,EAAS,MAAM;AACrB,YAAA,EAAE,KAAAI,GAAK,KAAAC,EAAA,IAAQjB;AACrB,aAAOiB,IAAMD;AAAA,IAAA,CACd,GACKG,IAAeP,EAAS,OACrB;AAAA,MACL,YAAYZ,EAAM,SAAS,UAAU;AAAA,IACvC,EACD,GACKoB,IAAoBR,EAAS,MAAM,MAAM,QAAQZ,EAAM,UAAU,CAAC;AAExE,IAAAqB;AAAA,MACE,MAAMrB,EAAM;AAAA,MACZ,MAAOQ,EAAU,QAAQG,EAAc;AAAA,MACvC,EAAE,WAAW,GAAK;AAAA,IACpB,GACAU;AAAA,MACE,MAAM,CAACV,EAAc,OAAOX,EAAM,KAAKA,EAAM,KAAKA,EAAM,GAAG,EAAE,KAAK,GAAG;AAAA,MACrE,MAAMsB,EAAe,EAAI;AAAA,IAC3B;AAEA,UAAMC,IAAyBC,GAAS,MAAMF,EAAA,GAAkB,GAAG;AAEnE,IAAAG,GAAU,MAAM;AACd,MAAAH,EAAe,EAAI,GAEZ,OAAA,iBAAiB,UAAUC,CAAsB;AAAA,IAAA,CACzD,GAEDG,GAAgB,MAAM;AACb,aAAA,oBAAoB,UAAUH,CAAsB;AAAA,IAAA,CAC5D;AAED,mBAAeD,EAAeK,GAAqB;AACjD,MAAIA,MAAc,MACJC,EAAA,GACd,MAAMC,EAAQ,GACd,MAAMC,EAAS;AAEf,iBAAW,CAACnC,CAAK,KAAKgB,EAAc,MAAM;AACxC,QAAAoB,EAAepC,CAAK;AAAA,IACtB;AAGO,aAAAqC,EAAc9C,GAAsB+C,GAAW;AAClD,MAAA/C,EAAM,QAAQ,cAEdsB,EAAU,SACPnB,EAAUmB,EAAU,MAAMyB,CAAC,IAAI,GAAGzB,EAAU,MAAMyB,IAAI,CAAC,GAAGzB,EAAU,MAAMyB,IAAI,CAAC,GAAG,OAAO,MAE5FzB,EAAU,MAAMyB,CAAC,KACjBN,EAAUnB,EAAU,KAAK,KAK3BtB,EAAM,QAAQ,gBACXsB,EAAU,SACVnB,EAAUmB,EAAU,MAAMyB,CAAC,IAAI,GAAGzB,EAAU,MAAMyB,IAAI,CAAC,GAAGzB,EAAU,MAAMyB,IAAI,CAAC,GAAG,MAAM,MAE3FzB,EAAU,MAAMyB,CAAC,KACjBN,EAAUnB,EAAU,KAAK;AAAA,IAC3B;AAEF,aAAS0B,EAAWD,GAAW;AAC7B,MAAA3B,EAAa,QAAQ,QACrB6B,EAAYF,CAAC;AAAA,IAAA;AAEf,aAASL,IAAc;AAEf,YAAA,EAAE,KAAAZ,GAAK,KAAAC,EAAA,IAAQjB,GACfoC,IAAgBzB,EAAc,MAAM;AAAA,QAAI,CAAC0B,MAC7CA,IAAIrB,IAAMA,IAAMqB,IAAIpB,IAAMA,IAAMoB;AAAA,MAClC;AACA,MAAAV,EAAUS,CAAa,GACvB5B,EAAU,QAAQ4B;AAAA,IAAA;AAEpB,aAAST,EAAUW,GAAkB;AAC7B,YAAAC,IAAcnB,EAAkB,QAAQ,CAAC,GAAGkB,CAAM,IAAIA,EAAO,CAAC;AACpE,MAAApC,EAAM,sBAAsBqC,CAAW;AAAA,IAAA;AAEzC,aAASC,EAASP,GAAW;AACrB,YAAA,EAAE,QAAAQ,MAAWzC;AACZ,aAAAyC,IAASA,EAAOR,CAAC,IAAI;AAAA,IAAA;AAE9B,aAASF,EAAeE,GAAW;AACjC,MAAAE,EAAYF,CAAC,GACRjC,EAAM,aACG0C,EAAA;AAAA,IAAA;AAEhB,mBAAeP,EAAYF,GAAW;;AACpC,YAAMH,EAAS;AAET,YAAAa,IAAgB,SAAS,iBAAiB,0BAA0B;AAG1E,UAAIA,GAAe;AACX,cAAAC,IAASD,EAAcV,CAAC,GACxBY,KAAQD,KAAA,gBAAAA,EAAQ,eAAc,IAE9BE,IAAW;AAAA,UACf,MACI,SAAOC,IAAAxC,EAAgB,UAAhB,gBAAAwC,EAAwBd,OAAO,WAClC,GAAG1B,EAAgB,MAAM0B,CAAC,IAAIY,IAAQ,KAAK,CAAC,OAC5C;AAAA,QACV;AAEa,QAAApC,EAAA,MAAMwB,CAAC,IAAIa;AAAA,MAAA;AAAA,IAC1B;AAGF,aAASJ,IAAc;AACrB,UAAInC,EAAgB,OAAO;AAEzB,cAAMyC,IAAO,CAAC,GAAGzC,EAAgB,KAAK;AAEtC,QAAAyC,EAAK,KAAK,CAAC;AACX,cAAMC,IAAaD,EAAK,QAClBpD,IAAS,KAAK,MAAMqD,IAAa,CAAC;AAExC,QAAAvC,EAAS,QAAQsC,EAAK,IAAI,CAACE,GAAKjB,OAAO;AAAA,UACrC,MAAMA,MAAM,IAAI,IAAI,GAAGe,EAAKf,IAAI,CAAC,CAAC;AAAA;AAAA,UAClC,OAAOA,IAAI,MAAMgB,IAAa,IAAI,gBAAgBC,CAAG;AAAA,UACrD,iBACEtD,MAAWqC,IAAI,IACX,SACAA,IAAIrC,IACF,uBAAuBF,EAAgBuC,GAAGrC,GAAQqD,CAAU,CAAC,MAC7D,iBAAiBvD,EAAgBuC,GAAGrC,GAAQqD,CAAU,CAAC;AAAA;AAAA,QAAA,EAC/D;AAAA,MAAA;AAAA,IACJ;AAGF,mBAAepB,IAAU;;AACvB,YAAMC,EAAS;AACf,YAAM,EAAE,KAAAd,GAAK,KAAAC,GAAK,KAAAkC,EAAQ,IAAAnD,GACpBoD,KAAWL,IAAA3C,EAAU,UAAV,gBAAA2C,EAAiB;AAC9B,MAAA,OAAOK,KAAa,WACN7C,EAAA,SAAQ8C,IAAA7C,EAAU,UAAV,gBAAA6C,EAAiB;AAAA,QAAI,OAC3CF,IACKC,IAAWnC,KAAQD,KAAO,KAAK,IAAIqB,CAAC,IAAIxB,EAAO,SAASE,EAAM,SAC9DqC,IAAWlC,EAAM,SAAUmB,IAAIrB;AAAA,UAItC,QAAQ,KAAK,6CAA6C;AAAA,IAC5D;AAEF,mBAAesC,IAAmB;;AAChC,YAAMxB,EAAS;AACf,YAAM,EAAE,KAAAb,GAAK,KAAAD,GAAK,KAAAmC,EAAQ,IAAAnD,GACpBoD,KAAWL,IAAA3C,EAAU,UAAV,gBAAA2C,EAAiB;AAC9B,UAAA,OAAOK,KAAa;AACtB,eAAOD,KACHE,IAAA9C,EAAgB,UAAhB,gBAAA8C,EAAuB,IAAI,CAACH,MAAgB;AACtC,gBAAAK,IAAWL,KAAOE,IAAWnC,IAC7B3B,KAAQ,KAAK,KAAKiE,IAAWvC,KAAOD,EAAM,QAAQF,EAAO,KAAK;AAC7D,iBAAA,KAAK,MAAMvB,EAAK;AAAA,QAAA,MAEvBkE,IAAAjD,EAAgB,UAAhB,gBAAAiD,EAAuB;AAAA,UACvB,CAACN,MAAgB,KAAK,MAAMA,KAAOE,IAAWlC,EAAM,MAAM,IAAIF;AAAA;AAIlE,cAAQ,KAAK,6CAA6C;AAAA,IAC5D;AAEO,aAAAyC,EAAgBC,GAA8CzB,GAAW;AAChF,MAAI3B,EAAa,UAAU,WAG3BA,EAAa,QAAQ2B,GACrBF,EAAeE,CAAC;AAAA,IAAA;AAElB,mBAAe0B,IAAgB;AAC7B,UAAIrD,EAAa,UAAU;AACzB;AAEI,YAAAgC,IAAS,MAAMgB,EAAiB;AAElC,MAAAhB,KACFX,EAAUW,CAAM,GAElBhC,EAAa,QAAQ;AAAA,IAAA;AAEvB,mBAAesD,EAAgB1E,GAAgC;;AAE7D,UADA,MAAM4C,EAAS,GACXxB,EAAa,UAAU;AACzB;AAEI,YAAA8C,KAAWL,IAAA3C,EAAU,UAAV,gBAAA2C,EAAiB;AAElC,UAAIxC,EAAgB,OAAO;AACzB,cAAMsD,IAAYtD,EAAgB,MAAMD,EAAa,QAAQ,CAAC,KAAK,GAC7DwD,IAAYvD,EAAgB,MAAMD,EAAa,QAAQ,CAAC,KAAK8C;AAEnE,YAAI,CAAChD,EAAU;AAEN,iBAAA,QAAQ,MAAM,6DAA6D;AAEpF,QAAAG,EAAgB,MAAMD,EAAa,KAAK,KAAK,MAAM;AACjD,gBAAMyD,IAAWhF,GAAOG,GAAOkB,EAAU,KAAK,EAAE;AAEhD,iBAAI2D,IAAWF,IACNA,IAEAC,KAAaC,IAAWD,IACxBA,IAGFC;AAAA,QAAA,GACN,GAEOvD,EAAA,QAAQ,MAAM8C,EAAiB,GAEzCvB,EAAezB,EAAa,KAAK;AAAA,MAAA;AAAA,IACnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"MazSlider.mjs","sources":["../../src/components/MazSlider/utils.ts","../../src/components/MazSlider.vue"],"sourcesContent":["interface IPosObject {\n x: number\n y: number\n}\n\nexport function getOffset(elem: HTMLDivElement): IPosObject {\n const doc = document.documentElement as HTMLElement\n const body = document.body as HTMLElement\n const rect = elem.getBoundingClientRect()\n const offset: IPosObject = {\n y: rect.top + (window.pageYOffset \|\| doc.scrollTop) - (doc.clientTop \|\| body.clientTop \|\| 0),\n x:\n rect.left + (window.pageXOffset \|\| doc.scrollLeft) - (doc.clientLeft \|\| body.clientLeft \|\| 0),\n }\n return offset\n}\n\n/*\n Get the position of the mouse/finger in the element\n * @param e Trigger event\n * @param elem Container element\n * @param isReverse From the right/bottom\n /\nexport function getPos(e: MouseEvent \| TouchEvent, elem: HTMLDivElement, isReverse = false): IPosObject {\n const event = 'targetTouches' in e ? e.targetTouches[0] : e\n const offset = getOffset(elem)\n const posObj = {\n x: event.pageX - offset.x,\n y: event.pageY - offset.y,\n }\n return {\n x: isReverse ? elem.offsetWidth - posObj.x : posObj.x,\n y: isReverse ? elem.offsetHeight - posObj.y : posObj.y,\n }\n}\n\nexport function isBetween(value: number, prev: number, next: number, direction: string) {\n return direction === 'minus' ? (prev ? value >= prev : true) : next ? value <= next : true\n}\n\nexport function getOpacityCoeff(index: number, middle: number, length: number) {\n const currentIndex = index + 1\n const isBiggerThanMiddle = middle < currentIndex\n const deviation = isBiggerThanMiddle ? currentIndex - middle : middle - currentIndex\n return ((100 / length) deviation) / 100\n}\n","<script lang=\"ts\" setup>\nimport type { Color } from './types'\nimport {\n computed,\n type CSSProperties,\n nextTick,\n onBeforeUnmount,\n onMounted,\n type PropType,\n ref,\n watch,\n} from 'vue'\n\nimport { debounce } from '../helpers/debounce'\nimport { getOpacityCoeff, getPos, isBetween } from './MazSlider/utils'\n\nconst props = defineProps({\n /** Array of cursors values /\n modelValue: {\n type: [Number, Array] as PropType<number \| number[]>,\n required: true,\n validator: (value: string) => {\n return ['number'].includes(typeof value) \|\| Array.isArray(value) \|\| value === null\n },\n },\n /* array of cursors label /\n labels: { type: Array, default: undefined },\n /* min value of sliders /\n min: { type: Number, default: 0 },\n /* max value of sliders /\n max: { type: Number, default: 100 },\n /* height size of slider bar /\n size: { type: String, default: undefined },\n /* remove div in different colors /\n noDivider: { type: Boolean, default: false },\n /* become a logarithmic slider (exponential) /\n log: { type: Boolean, default: false },\n /* main slider color /\n color: {\n type: String as PropType<Color>,\n default: 'primary',\n },\n /* disables cursor animation when active /\n noCursorAnim: { type: Boolean, default: false },\n})\n\nconst emits = defineEmits(['update:model-value'])\n\nconst MazSlider = ref<HTMLDivElement>()\n\nconst activeCursor = ref<number>()\nconst buttonPositions = ref<number[]>()\nconst tmpValues = ref<number[]>()\n\nconst buttonStyles = ref<CSSProperties[]>([])\nconst dividers = ref<CSSProperties[]>([])\n\n// COMPUTED\n\nconst computedValue = computed<number[]>(() => {\n if (typeof props.modelValue === 'number') {\n return [props.modelValue]\n }\n else if (props.modelValue) {\n return props.modelValue\n }\n else {\n return [0]\n }\n})\nconst minLog = computed(() => {\n return Math.log(props.min \|\| 1)\n})\nconst maxLog = computed(() => {\n return Math.log(props.max)\n})\nconst scale = computed(() => {\n const { min, max } = props\n return (maxLog.value - minLog.value) / (max - min)\n})\nconst range = computed(() => {\n const { min, max } = props\n return max - min\n})\nconst wrapperStyle = computed(() => {\n return {\n paddingTop: props.labels ? `2.5em` : `1em`,\n }\n})\nconst hasMultipleValues = computed(() => Array.isArray(props.modelValue))\n\nwatch(\n () => props.modelValue,\n () => (tmpValues.value = computedValue.value),\n { immediate: true },\n)\nwatch(\n () => [computedValue.value, props.min, props.max, props.log].join(','),\n () => buildComponent(true),\n)\n\nconst resizeListenerFunction = debounce(() => buildComponent(), 300)\n\nonMounted(() => {\n buildComponent(true)\n\n window.addEventListener('resize', resizeListenerFunction)\n})\n\nonBeforeUnmount(() => {\n window.removeEventListener('resize', resizeListenerFunction)\n})\n\nasync function buildComponent(emitValue?: boolean) {\n if (emitValue === true)\n checkValues()\n await calcPos()\n await nextTick()\n\n for (const [index] of computedValue.value.entries()) {\n setBtnDividers(index)\n }\n}\n\nfunction cursorKeyDown(event: KeyboardEvent, i: number) {\n if (event.key === 'ArrowLeft') {\n if (\n tmpValues.value\n && isBetween(tmpValues.value[i] - 1, tmpValues.value[i - 1], tmpValues.value[i + 1], 'minus')\n ) {\n tmpValues.value[i]--\n emitValue(tmpValues.value)\n }\n }\n // ArrowRight\n else if (\n event.key === 'ArrowRight'\n && tmpValues.value\n && isBetween(tmpValues.value[i] + 1, tmpValues.value[i - 1], tmpValues.value[i + 1], 'plus')\n ) {\n tmpValues.value[i]++\n emitValue(tmpValues.value)\n }\n}\nfunction blurCursor(i: number) {\n activeCursor.value = undefined\n setBtnStyle(i)\n}\nfunction checkValues() {\n // check if values are not below the min or above the max\n const { min, max } = props\n const valuesChecked = computedValue.value.map((v: number) =>\n v < min ? min : v > max ? max : v,\n )\n emitValue(valuesChecked)\n tmpValues.value = valuesChecked\n}\nfunction emitValue(values: number[]) {\n const valueToEmit = hasMultipleValues.value ? [...values] : values[0]\n emits('update:model-value', valueToEmit)\n}\nfunction getLabel(i: number) {\n const { labels } = props\n return labels ? labels[i] : undefined\n}\nfunction setBtnDividers(i: number) {\n setBtnStyle(i)\n if (!props.noDivider)\n setDividers()\n}\nasync function setBtnStyle(i: number) {\n await nextTick()\n\n const currentCursor = document.querySelectorAll('.m-slider .m-slider__btn')\n\n // get width of text in cursor + padding/space\n if (currentCursor) {\n const cursor = currentCursor[i]\n const width = cursor?.clientWidth + 16\n\n const btnStyle = {\n left:\n typeof buttonPositions.value?.[i] === 'number'\n ? `${buttonPositions.value[i] - width / 2 \|\| 1}px`\n : '',\n }\n\n buttonStyles.value[i] = btnStyle\n }\n}\n\nfunction setDividers() {\n if (buttonPositions.value) {\n // remove getters/setters of vue\n const base = [...buttonPositions.value]\n // add an item to generate one more divider\n base.push(0)\n const baseLength = base.length\n const middle = Math.round(baseLength / 2)\n // generate dividers items with style\n dividers.value = base.map((pos, i) => ({\n left: i === 0 ? 0 : `${base[i - 1]}px`, // ATTENTION: buttonPositions.value[i - 1]\n right: i + 1 === baseLength ? 0 : `calc( 100% - ${pos}px )`,\n backgroundColor:\n middle === i + 1\n ? undefined\n : i < middle\n ? `rgba(255, 255, 255, ${getOpacityCoeff(i, middle, baseLength)})` // lighten\n : `rgba(0, 0, 0, ${getOpacityCoeff(i, middle, baseLength)})`, // darken\n }))\n }\n}\n\nasync function calcPos() {\n await nextTick()\n const { min, max, log } = props\n const barWidth = MazSlider.value?.clientWidth\n if (typeof barWidth === 'number') {\n buttonPositions.value = tmpValues.value?.map(v =>\n log\n ? (barWidth / max) (min + (Math.log(v) - minLog.value) / scale.value)\n : (barWidth / range.value) * (v - min),\n )\n }\n else {\n console.warn('[maz-ui][MazSlider] ref component not found')\n }\n}\nasync function getCursorsValues() {\n await nextTick()\n const { max, min, log } = props\n const barWidth = MazSlider.value?.clientWidth\n if (typeof barWidth === 'number') {\n return log\n ? buttonPositions.value?.map((pos: number) => {\n const position = pos / (barWidth / max)\n const value = Math.exp((position - min) * scale.value + minLog.value)\n return Math.round(value)\n })\n : buttonPositions.value?.map(\n (pos: number) => Math.round(pos / (barWidth / range.value)) + min,\n )\n }\n else {\n console.warn('[maz-ui][MazSlider] ref component not found')\n }\n}\nfunction handleMousedown(_event: MouseEvent \| TouchEvent \| FocusEvent, i: number) {\n if (activeCursor.value !== undefined)\n return\n\n activeCursor.value = i\n setBtnDividers(i)\n}\nasync function handleMouseup() {\n if (activeCursor.value === undefined)\n return\n\n const values = await getCursorsValues()\n\n if (values)\n emitValue(values)\n\n activeCursor.value = undefined\n}\nasync function handleMousemove(event: MouseEvent \| TouchEvent) {\n await nextTick()\n if (activeCursor.value === undefined)\n return\n\n const barWidth = MazSlider.value?.clientWidth\n\n if (buttonPositions.value) {\n const prevValue = buttonPositions.value[activeCursor.value - 1] \|\| 0\n const nextValue = buttonPositions.value[activeCursor.value + 1] \|\| barWidth\n\n if (!MazSlider.value)\n\n return console.error('[maz-ui](MazSlider/handleMousemove) MazSlider not available')\n\n buttonPositions.value[activeCursor.value] = (() => {\n const movement = getPos(event, MazSlider.value).x\n\n if (movement < prevValue) {\n return prevValue\n }\n else if (nextValue && movement > nextValue) {\n return nextValue\n }\n\n return movement\n })()\n\n tmpValues.value = await getCursorsValues()\n\n setBtnDividers(activeCursor.value)\n }\n}\n</script>\n\n<template>\n <!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n <div\n :style=\"[wrapperStyle, { fontSize: size }]\"\n class=\"m-slider m-reset-css\"\n role=\"button\"\n tabindex=\"-1\"\n :class=\"[`m-slider--${color}`]\"\n @mousemove.passive=\"handleMousemove\"\n @mouseup.passive=\"handleMouseup\"\n @mouseleave.passive=\"handleMouseup\"\n @touchmove.passive=\"handleMousemove\"\n >\n <div\n ref=\"MazSlider\"\n class=\"m-slider__bar\"\n role=\"slider\"\n :aria-valuenow=\"modelValue.toString()\"\n :aria-valuemin=\"min\"\n :aria-valuemax=\"max\"\n >\n <div\n v-for=\"(div, i) in dividers\"\n :key=\"`divider-${i}`\"\n :style=\"[div]\"\n class=\"m-slider__divider\"\n />\n\n <button\n v-for=\"(_btn, i) in computedValue\"\n :key=\"`cursor-${i}`\"\n type=\"button\"\n :data-label=\"getLabel(i)\"\n class=\"m-slider__btn\"\n :class=\"{\n 'active-cursor': i === activeCursor && !noCursorAnim,\n }\"\n :style=\"[buttonStyles[i]]\"\n @mousedown.passive=\"handleMousedown($event, i)\"\n @touchstart.passive=\"handleMousedown($event, i)\"\n @focus.passive=\"handleMousedown($event, i)\"\n @blur.passive=\"blurCursor(i)\"\n @touchend.passive=\"blurCursor(i)\"\n @keydown.passive=\"cursorKeyDown($event, i)\"\n >\n <span>\n {{ tmpValues?.[i] }}\n </span>\n </button>\n </div>\n </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n .m-slider {\n padding: 1em 1.5rem;\n\n &__bar {\n @apply maz-relative maz-flex maz-items-center maz-justify-center maz-rounded-full;\n\n height: 0.5em;\n }\n\n &__divider {\n position: absolute;\n border-radius: 2em;\n height: 100%;\n }\n\n &__btn {\n position: absolute;\n outline: none;\n cursor: pointer;\n font-size: 1em;\n font-weight: bold;\n line-height: 1;\n transition:\n box-shadow 300ms ease-in-out,\n width 300ms ease-in-out,\n transform 300ms ease-in-out,\n background-color 300ms ease-in-out;\n z-index: 1;\n user-select: none;\n\n @apply maz-flex maz-items-center maz-justify-center maz-rounded-full maz-border\n maz-border-border maz-bg-bg-light maz-shadow-md;\n\n padding: 0.25em 0.5em;\n\n & span {\n @apply maz-flex maz-items-center maz-text-dark;\n\n margin-left: 0.25em;\n margin-right: 0.25em;\n }\n\n &.active-cursor {\n transform: scale(1.3);\n\n @apply maz-z-2;\n }\n\n &::before {\n content: attr(data-label);\n font-size: 0.8em;\n top: -1.5em;\n\n @apply maz-absolute maz-font-medium maz-text-normal;\n }\n\n &:hover {\n @apply maz-bg-border;\n }\n }\n\n &--primary {\n & .m-slider {\n &__bar {\n @apply maz-bg-primary;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-primary maz-shadow-lg;\n }\n }\n }\n\n &--secondary {\n & .m-slider {\n &__bar {\n @apply maz-bg-secondary;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-secondary maz-shadow-lg;\n }\n }\n }\n\n &--info {\n & .m-slider {\n &__bar {\n @apply maz-bg-info;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-info maz-shadow-lg;\n }\n }\n }\n\n &--success {\n & .m-slider {\n &__bar {\n @apply maz-bg-success;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-success maz-shadow-lg;\n }\n }\n }\n\n &--warning {\n & .m-slider {\n &__bar {\n @apply maz-bg-warning;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-warning maz-shadow-lg;\n }\n }\n }\n\n &--danger {\n & .m-slider {\n &__bar {\n @apply maz-bg-danger;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-danger maz-shadow-lg;\n }\n }\n }\n\n &--white {\n & .m-slider {\n &__bar {\n @apply maz-bg-white;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-white maz-shadow-lg;\n }\n }\n }\n\n &--black {\n & .m-slider {\n &__bar {\n @apply maz-bg-black;\n }\n\n &__btn.active-cursor {\n @apply maz-border maz-border-black maz-shadow-lg;\n }\n }\n }\n}\n</style>\n"],"names":["getOffset","elem","doc","body","rect","getPos","e","isReverse","event","offset","posObj","isBetween","value","prev","next","direction","getOpacityCoeff","index","middle","length","currentIndex","deviation","props","__props","emits","__emit","MazSlider","ref","activeCursor","buttonPositions","tmpValues","buttonStyles","dividers","computedValue","computed","minLog","maxLog","scale","min","max","range","wrapperStyle","hasMultipleValues","watch","buildComponent","resizeListenerFunction","debounce","onMounted","onBeforeUnmount","emitValue","checkValues","calcPos","nextTick","setBtnDividers","cursorKeyDown","i","blurCursor","setBtnStyle","valuesChecked","v","values","valueToEmit","getLabel","labels","setDividers","currentCursor","cursor","width","btnStyle","_a","base","baseLength","pos","log","barWidth","_b","getCursorsValues","position","_c","handleMousedown","_event","handleMouseup","handleMousemove","prevValue","nextValue","movement"],"mappings":"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"}

package/dist/components/MazSpinner.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazSpinner.DTuz1RdS.css');const e=require("vue"),n=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),r=["width","height"],o=e.defineComponent({__name:"MazSpinner",props:{size:{default:"2em"},color:{default:"theme"}},setup(i){return(s,t)=>(e.openBlock(),e.createElementBlock("svg",{width:s.size,height:s.size,version:"1.1",xmlns:"http://www.w3.org/2000/svg",x:"0px",y:"0px",viewBox:"0 0 50 50","xml:space":"preserve",class:e.normalizeClass(["m-spinner m-reset-css",`m-spinner--${s.color}`]),style:{"enable-background":"new 0 0 50 50"}},t[0]||(t[0]=[e.createElementVNode("path",{d:"M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"},null,-1)]),10,r))}}),l=n._export_sfc(o,[["__scopeId","data-v-4f7cc2ae"]]);exports.default=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazSpinner.C2jmWJte.css');const e=require("vue"),n=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),r=["width","height"],o=e.defineComponent({__name:"MazSpinner",props:{size:{default:"2em"},color:{default:"theme"}},setup(i){return(s,t)=>(e.openBlock(),e.createElementBlock("svg",{width:s.size,height:s.size,version:"1.1",xmlns:"http://www.w3.org/2000/svg",x:"0px",y:"0px",viewBox:"0 0 50 50","xml:space":"preserve",class:e.normalizeClass(["m-spinner m-reset-css",`m-spinner--${s.color}`]),style:{"enable-background":"new 0 0 50 50"}},t[0]||(t[0]=[e.createElementVNode("path",{d:"M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"},null,-1)]),10,r))}}),l=n._export_sfc(o,[["__scopeId","data-v-c8e4c8b6"]]);exports.default=l;
 //# sourceMappingURL=MazSpinner.cjs.map

package/dist/components/MazSpinner.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 import { defineComponent as n, openBlock as o, createElementBlock as t, normalizeClass as r, createElementVNode as p } from "vue";
 import { _ as a } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
-import '../assets/MazSpinner.DTuz1RdS.css';const i = ["width", "height"], c = /* @__PURE__ */ n({
+import '../assets/MazSpinner.C2jmWJte.css';const i = ["width", "height"], c = /* @__PURE__ */ n({
   __name: "MazSpinner",
   props: {
     size: { default: "2em" },
@@ -22,7 +22,7 @@ import '../assets/MazSpinner.DTuz1RdS.css';const i = ["width", "height"], c = /*
       p("path", { d: "M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" }, null, -1)
     ]), 10, i));
   }
-}), h = /* @__PURE__ */ a(c, [["__scopeId", "data-v-4f7cc2ae"]]);
+}), h = /* @__PURE__ */ a(c, [["__scopeId", "data-v-c8e4c8b6"]]);
 export {
   h as default
 };

package/dist/components/MazStepper.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazStepper.BE3Mm9rm.css');const e=require("vue"),I=require("./MazExpandAnimation.cjs"),O=require("../chunks/MazIcon.vue_vue_type_script_setup_true_lang.C5NwBerh.cjs"),P=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),q=["id","disabled","onClick"],A={class:"m-stepper__header__wrapper"},M={class:"m-stepper__count --primary"},w={class:"m-stepper__count__circle"},T={class:"m-stepper__header__content"},F={class:"m-stepper__title"},W={key:0,class:"m-stepper__subtitle"},j={key:0,class:"m-stepper__right"},L={class:"m-stepper__content__wrapper"},H=e.defineComponent({__name:"MazStepper",props:{modelValue:{default:void 0},steps:{default:void 0},color:{default:"primary"},disabledNextSteps:{type:Boolean},disabledPreviousSteps:{type:Boolean},autoValidateSteps:{type:Boolean},allStepsOpened:{type:Boolean},allStepsValidated:{type:Boolean},canCloseSteps:{type:Boolean}},emits:["update:model-value"],setup(h,{emit:V}){const l=h,g=V,C=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../chunks/check-circle.D3i-p-t3.cjs"))),E=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../chunks/exclamation-circle.BXs0Yj0f.cjs"))),N=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../chunks/exclamation-triangle.BtW3be9S.cjs"))),$=e.computed(()=>`var(--maz-color-${l.color})`),D=e.computed(()=>`var(--maz-color-${l.color}-contrast)`),k=e.useSlots(),d=e.computed(()=>Object.keys(k).filter(o=>o.startsWith("content-")).length),y=e.ref(1),r=e.computed({get:()=>l.modelValue??y.value,set:o=>{y.value=o,g("update:model-value",o)}});function p(o){return b(o)?{icon:C,class:"--success"}:f(o)?{icon:N,class:"--warning"}:S(o)?{icon:E,class:"--error"}:{class:"--normal"}}function i(o){var n,t;return(t=(n=l.steps)==null?void 0:n[o-1])==null?void 0:t.icon}function m(o,n){var t,a;return(a=(t=l.steps)==null?void 0:t[n-1])==null?void 0:a[o]}function _(o){r.value===o&&l.canCloseSteps?r.value=0:o<1?r.value=1:o>d.value?r.value=d.value:r.value=o}function v(o,n){var s,u;const t=o==="titleInfo"?"title-info":o,a=Object.keys(k).filter(z=>z.startsWith(`${t}-`)).includes(`${t}-${n}`),c=!!((u=(s=l.steps)==null?void 0:s[n-1])!=null&&u[o]);return a||c}function b(o){var c,s;const n=(s=(c=l.steps)==null?void 0:c[o-1])==null?void 0:s.success,t=S(o)||f(o),a=l.autoValidateSteps&&o<r.value&&!t;return n??(a||l.allStepsValidated)}function B(o){var s,u;const n=(u=(s=l.steps)==null?void 0:s[o-1])==null?void 0:u.disabled,t=r.value===o&&!l.canCloseSteps,a=l.disabledNextSteps&&o>r.value,c=l.disabledPreviousSteps&&o<r.value;return n??(t||a||c||l.allStepsOpened)}function S(o){var n,t;return(t=(n=l.steps)==null?void 0:n[o-1])==null?void 0:t.error}function f(o){var n,t;return(t=(n=l.steps)==null?void 0:n[o-1])==null?void 0:t.warning}function x(o){return o===d.value}return(o,n)=>(e.openBlock(),e.createElementBlock("div",{class:"m-stepper m-reset-css",style:e.normalizeStyle([{"--round-step-bg-color":$.value,"--round-step-text-color":D.value}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.value,t=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:t},[v("title",t)?(e.openBlock(),e.createElementBlock("button",{key:0,id:`header-step-${t}`,type:"button",disabled:B(t),class:e.normalizeClass(["m-stepper__header",[{"--is-current-step":t===r.value||o.allStepsOpened,"--disabled":t!==r.value&&!o.allStepsOpened&&B(t)},`${p(t).class}`]]),onClick:a=>_(t)},[e.createElementVNode("div",A,[e.createElementVNode("span",M,[e.createElementVNode("div",w,[p(t).icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(p(t).icon),{key:0,class:"icon maz-text-xl"})):e.createCommentVNode("",!0)]),e.renderSlot(o.$slots,`icon-${t}`,{},()=>[i(t)?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[typeof i(t)=="string"?(e.openBlock(),e.createBlock(O._sfc_main,{key:0,name:i(t)},null,8,["name"])):i(t)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(i(t)),{key:1})):e.createCommentVNode("",!0)],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(t),1)],64))],!0)]),e.createElementVNode("div",T,[e.createElementVNode("span",F,[e.renderSlot(o.$slots,`title-${t}`,{},()=>[e.createTextVNode(e.toDisplayString(m("title",t)),1)],!0)]),v("subtitle",t)?(e.openBlock(),e.createElementBlock("span",W,[e.renderSlot(o.$slots,`subtitle-${t}`,{},()=>[e.createTextVNode(e.toDisplayString(m("subtitle",t)),1)],!0)])):e.createCommentVNode("",!0)])]),v("titleInfo",t)?(e.openBlock(),e.createElementBlock("span",j,[e.renderSlot(o.$slots,`title-info-${t}`,{},()=>[e.createTextVNode(e.toDisplayString(m("titleInfo",t)),1)],!0)])):e.createCommentVNode("",!0)],10,q)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["m-stepper__content",{"--no-border":x(t)}])},[e.createVNode(I.default,{"model-value":o.allStepsOpened||r.value===t,"aria-labelledby":`header-step-${t}`},{default:e.withCtx(()=>[e.createElementVNode("div",L,[e.renderSlot(o.$slots,`content-${t}`,{validated:b(t),error:S(t),warning:f(t),nextStep:()=>_(t+1),previousStep:()=>_(t-1)},void 0,!0)])]),_:2},1032,["model-value","aria-labelledby"])],2)],64))),128))],4))}}),G=P._export_sfc(H,[["__scopeId","data-v-7f5eb4dc"]]);exports.default=G;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazStepper.CFdY5O1y.css');const e=require("vue"),I=require("./MazExpandAnimation.cjs"),O=require("../chunks/MazIcon.vue_vue_type_script_setup_true_lang.C5NwBerh.cjs"),P=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),q=["id","disabled","onClick"],A={class:"m-stepper__header__wrapper"},M={class:"m-stepper__count --primary"},w={class:"m-stepper__count__circle"},T={class:"m-stepper__header__content"},F={class:"m-stepper__title"},W={key:0,class:"m-stepper__subtitle"},j={key:0,class:"m-stepper__right"},L={class:"m-stepper__content__wrapper"},H=e.defineComponent({__name:"MazStepper",props:{modelValue:{default:void 0},steps:{default:void 0},color:{default:"primary"},disabledNextSteps:{type:Boolean},disabledPreviousSteps:{type:Boolean},autoValidateSteps:{type:Boolean},allStepsOpened:{type:Boolean},allStepsValidated:{type:Boolean},canCloseSteps:{type:Boolean}},emits:["update:model-value"],setup(h,{emit:V}){const l=h,g=V,C=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../chunks/check-circle.D3i-p-t3.cjs"))),E=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../chunks/exclamation-circle.BXs0Yj0f.cjs"))),N=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../chunks/exclamation-triangle.BtW3be9S.cjs"))),$=e.computed(()=>`var(--maz-color-${l.color})`),D=e.computed(()=>`var(--maz-color-${l.color}-contrast)`),k=e.useSlots(),d=e.computed(()=>Object.keys(k).filter(o=>o.startsWith("content-")).length),y=e.ref(1),r=e.computed({get:()=>l.modelValue??y.value,set:o=>{y.value=o,g("update:model-value",o)}});function p(o){return b(o)?{icon:C,class:"--success"}:f(o)?{icon:N,class:"--warning"}:S(o)?{icon:E,class:"--error"}:{class:"--normal"}}function i(o){var n,t;return(t=(n=l.steps)==null?void 0:n[o-1])==null?void 0:t.icon}function m(o,n){var t,a;return(a=(t=l.steps)==null?void 0:t[n-1])==null?void 0:a[o]}function _(o){r.value===o&&l.canCloseSteps?r.value=0:o<1?r.value=1:o>d.value?r.value=d.value:r.value=o}function v(o,n){var s,u;const t=o==="titleInfo"?"title-info":o,a=Object.keys(k).filter(z=>z.startsWith(`${t}-`)).includes(`${t}-${n}`),c=!!((u=(s=l.steps)==null?void 0:s[n-1])!=null&&u[o]);return a||c}function b(o){var c,s;const n=(s=(c=l.steps)==null?void 0:c[o-1])==null?void 0:s.success,t=S(o)||f(o),a=l.autoValidateSteps&&o<r.value&&!t;return n??(a||l.allStepsValidated)}function B(o){var s,u;const n=(u=(s=l.steps)==null?void 0:s[o-1])==null?void 0:u.disabled,t=r.value===o&&!l.canCloseSteps,a=l.disabledNextSteps&&o>r.value,c=l.disabledPreviousSteps&&o<r.value;return n??(t||a||c||l.allStepsOpened)}function S(o){var n,t;return(t=(n=l.steps)==null?void 0:n[o-1])==null?void 0:t.error}function f(o){var n,t;return(t=(n=l.steps)==null?void 0:n[o-1])==null?void 0:t.warning}function x(o){return o===d.value}return(o,n)=>(e.openBlock(),e.createElementBlock("div",{class:"m-stepper m-reset-css",style:e.normalizeStyle([{"--round-step-bg-color":$.value,"--round-step-text-color":D.value}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.value,t=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:t},[v("title",t)?(e.openBlock(),e.createElementBlock("button",{key:0,id:`header-step-${t}`,type:"button",disabled:B(t),class:e.normalizeClass(["m-stepper__header",[{"--is-current-step":t===r.value||o.allStepsOpened,"--disabled":t!==r.value&&!o.allStepsOpened&&B(t)},`${p(t).class}`]]),onClick:a=>_(t)},[e.createElementVNode("div",A,[e.createElementVNode("span",M,[e.createElementVNode("div",w,[p(t).icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(p(t).icon),{key:0,class:"icon maz-text-xl"})):e.createCommentVNode("",!0)]),e.renderSlot(o.$slots,`icon-${t}`,{},()=>[i(t)?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[typeof i(t)=="string"?(e.openBlock(),e.createBlock(O._sfc_main,{key:0,name:i(t)},null,8,["name"])):i(t)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(i(t)),{key:1})):e.createCommentVNode("",!0)],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(t),1)],64))],!0)]),e.createElementVNode("div",T,[e.createElementVNode("span",F,[e.renderSlot(o.$slots,`title-${t}`,{},()=>[e.createTextVNode(e.toDisplayString(m("title",t)),1)],!0)]),v("subtitle",t)?(e.openBlock(),e.createElementBlock("span",W,[e.renderSlot(o.$slots,`subtitle-${t}`,{},()=>[e.createTextVNode(e.toDisplayString(m("subtitle",t)),1)],!0)])):e.createCommentVNode("",!0)])]),v("titleInfo",t)?(e.openBlock(),e.createElementBlock("span",j,[e.renderSlot(o.$slots,`title-info-${t}`,{},()=>[e.createTextVNode(e.toDisplayString(m("titleInfo",t)),1)],!0)])):e.createCommentVNode("",!0)],10,q)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["m-stepper__content",{"--no-border":x(t)}])},[e.createVNode(I.default,{"model-value":o.allStepsOpened||r.value===t,"aria-labelledby":`header-step-${t}`},{default:e.withCtx(()=>[e.createElementVNode("div",L,[e.renderSlot(o.$slots,`content-${t}`,{validated:b(t),error:S(t),warning:f(t),nextStep:()=>_(t+1),previousStep:()=>_(t-1)},void 0,!0)])]),_:2},1032,["model-value","aria-labelledby"])],2)],64))),128))],4))}}),G=P._export_sfc(H,[["__scopeId","data-v-99042afb"]]);exports.default=G;
 //# sourceMappingURL=MazStepper.cjs.map