npm - @useinsider/ab-components - Versions diffs - 0.0.3 → 0.0.5 - Mend

@useinsider/ab-components 0.0.3 → 0.0.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 (27) hide show

package/dist/index-B76cJgwE.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index-B76cJgwE.js","sources":["../src/components/Button/Button.vue","../src/directives/clickOutside.ts","../src/utils/search.ts","../src/components/Dropdown/DropdownMenu.vue","../src/components/Icon/icons/index.ts","../src/components/Icon/Icon.vue","../src/components/OnPageMessage/OnPageMessage.vue","../src/components/SegmentButton/SegmentButton.vue","../src/components/TextInput/TextInput.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport type { IconNames } from '@/components/Icon/types';\nimport { Icon } from '@/index';\nimport styles from './Button.module.scss';\n\ninterface ButtonProps {\n variant: 'solid' | 'ghost' | 'text' | 'outline';\n color: 'primary' | 'subtle-primary' | 'secondary' | 'danger' | 'warning' | 'smart';\n size?: 'default' | 'small';\n leftIconName?: IconNames;\n rightIconName?: IconNames;\n loadingStatus?: boolean;\n successStatus?: boolean;\n label?: string;\n disabled?: boolean;\n fill?: boolean;\n}\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n loadingStatus: false,\n successStatus: false,\n disabled: false,\n fill: false,\n size: 'default',\n});\n\nconst emit = defineEmits<{\n click: [event: MouseEvent];\n}>();\n\nconst onClick = (event: MouseEvent) => {\n if (props.disabled) {\n return;\n }\n\n emit('click', event);\n};\n\nconst leftIcon = computed<IconNames | undefined>(() => {\n if (props.loadingStatus) {\n return 'LoadingCircle';\n } else if (props.successStatus) {\n return 'LineCheck';\n }\n\n return props.leftIconName;\n});\n</script>\n\n<template>\n <button\n :class=\"[\n styles.button,\n styles[`button__${variant}`],\n styles[`button__${variant}-${color}`],\n styles[`button__size_${size}`],\n { [styles.fill]: fill },\n ]\"\n :disabled=\"props.disabled\"\n @click=\"onClick\">\n <Icon\n v-if=\"leftIcon\"\n :name=\"leftIcon\" />\n <span\n v-if=\"label\"\n :class=\"styles.button__label\">\n {{ label }}\n </span>\n <Icon\n v-if=\"rightIconName\"\n :name=\"rightIconName\" />\n </button>\n</template>\n","import type { DirectiveBinding } from 'vue';\n\ninterface ClickOutsideElement extends HTMLElement {\n clickOutsideEvent?: (event: Event) => void;\n}\n\nexport default {\n mounted(el: ClickOutsideElement, binding: DirectiveBinding<{ handler: () => void; exclude?: HTMLElement[] }>) {\n el.clickOutsideEvent = (event: Event) => {\n const isClickInside = [el, ...(binding.value.exclude || [])].some(element => {\n return element && (element === event.target || element.contains(event.target as Node))\n });\n\n if (!isClickInside) {\n binding.value.handler(); // Close handler\n }\n };\n\n document.addEventListener('click', el.clickOutsideEvent);\n },\n unmounted(el: ClickOutsideElement) {\n if (el.clickOutsideEvent) {\n document.removeEventListener('click', el.clickOutsideEvent);\n }\n },\n};","const isFuzzyMatch = (choiceValue: string, searchTerm: string): boolean => {\n let searchIndex = 0;\n for (const char of choiceValue) {\n if (char.toLowerCase() === searchTerm[searchIndex]?.toLowerCase()) {\n searchIndex++;\n }\n if (searchIndex === searchTerm.length) {\n return true;\n }\n }\n return false;\n};\n\n\nexport const fuzzySearch = <T>(\n choices: T[],\n key: keyof T,\n searchTerm: string,\n): T[] => {\n if (!searchTerm.trim()) {\n return choices;\n }\n\n const normalizedSearchTerm = searchTerm.toLowerCase();\n\n return choices\n .filter(choice => {\n const value = String(choice[key]);\n\n return isFuzzyMatch(value.toLowerCase(), normalizedSearchTerm)\n })\n .sort((a, b) => {\n const aValue = String(a[key]).toLowerCase();\n const bValue = String(b[key]).toLowerCase();\n\n if (aValue === normalizedSearchTerm) return -1;\n if (bValue === normalizedSearchTerm) return 1;\n\n if (aValue.startsWith(normalizedSearchTerm) && !bValue.startsWith(normalizedSearchTerm))\n return -1;\n if (!aValue.startsWith(normalizedSearchTerm) && bValue.startsWith(normalizedSearchTerm))\n return 1;\n\n return aValue.length - bValue.length;\n });\n};\n","<script lang=\"ts\" setup>\nimport { ref, computed, type StyleValue, onMounted } from 'vue';\nimport clickOutside from '@/directives/clickOutside';\nimport { fuzzySearch } from '@/utils/search';\nimport styles from './Dropdown.module.scss';\n\nconst vClickOutside = clickOutside;\n\ninterface MenuItem {\n text: string;\n value: string;\n}\n\ninterface DropdownProps {\n id: string;\n label?: string;\n modelValue?: string;\n menuHeight?: number;\n placeholder?: string;\n addable?: boolean;\n addButtonText?: string;\n searchable?: boolean;\n searchPlaceHolder?: string;\n items: MenuItem[];\n validateAddItem?: (item: string, items: MenuItem[]) => string | null;\n}\n\ninterface Emits {\n (e: 'update:modelValue', value: string): void;\n (e: 'add-error', error: string): void;\n (e: 'item-added', item: MenuItem): void;\n (e: 'select-item', item: MenuItem): void;\n}\n\nconst props = withDefaults(defineProps<DropdownProps>(), {\n menuHeight: 154,\n searchBar: false,\n addItem: false,\n modelValue: '',\n validateAddItem: () => null,\n});\n\nconst emit = defineEmits<Emits>();\nconst dropdownRef = ref<HTMLDivElement>();\nconst menuRef = ref<HTMLDivElement>();\nconst isOpen = ref(false);\nconst selectedItem = ref<MenuItem | null>(null);\nconst searchQuery = ref('');\nconst errorMessage = ref<string | null>(null);\nconst menuPosition = ref({ x: 0, y: 0, width: 0, shouldOpenUp: false, height: props.menuHeight });\nconst filteredItems = ref([...props.items]);\nconst allItems = ref([...props.items]);\n\nconst calculateMenuPosition = () => {\n if (!dropdownRef.value) {\n return;\n }\n\n const { offsetTop: top, offsetLeft: left, offsetWidth: width } = dropdownRef.value;\n const viewportHeight = window.innerHeight;\n const bottom = top + dropdownRef.value.offsetHeight;\n const shouldOpenUp = bottom + props.menuHeight > viewportHeight;\n\n menuPosition.value = {\n x: left + window.scrollX,\n y: shouldOpenUp ? top + window.scrollY : bottom + window.scrollY,\n width,\n shouldOpenUp,\n height: props.menuHeight,\n };\n};\n\nconst toggleMenu = () => {\n calculateMenuPosition();\n isOpen.value = !isOpen.value;\n};\n\nconst resetSettings = () => {\n errorMessage.value = null;\n searchQuery.value = '';\n filteredItems.value = [...allItems.value];\n};\n\nconst closeMenu = () => {\n isOpen.value = false;\n\n resetSettings();\n};\n\nconst selectItem = (item: MenuItem) => {\n selectedItem.value = item;\n\n emit('select-item', item);\n emit('update:modelValue', item.value);\n\n closeMenu();\n};\n\nconst addItem = () => {\n const query = searchQuery.value.trim();\n const error = props.validateAddItem(query, allItems.value);\n\n if (error) {\n errorMessage.value = error;\n\n emit('add-error', error);\n\n return;\n }\n\n const newItem: MenuItem = {\n text: query,\n value: query,\n };\n\n allItems.value.push(newItem);\n resetSettings();\n\n emit('item-added', newItem);\n};\n\nconst onSearch = () => {\n filteredItems.value = fuzzySearch<MenuItem>(allItems.value, 'text', searchQuery.value);\n};\n\nconst onFocusSearch = () => {\n errorMessage.value = '';\n};\n\nconst menuStyle = computed<Partial<StyleValue>>(() => ({\n top: menuPosition.value.shouldOpenUp ? `${menuPosition.value.y - 10}px` : `${menuPosition.value.y}px`,\n left: `${menuPosition.value.x}px`,\n width: `${menuPosition.value.width}px`,\n height: `${props.menuHeight}px`,\n}));\n\nonMounted(() => {\n calculateMenuPosition();\n\n if (props.modelValue) {\n const defaultItem = allItems.value.find(item => item.value === props.modelValue);\n\n if (defaultItem) {\n selectedItem.value = defaultItem;\n }\n }\n});\n\nconst selectedValue = computed(() => (selectedItem.value ? selectedItem.value.text : ''));\n</script>\n\n<template>\n <div\n ref=\"dropdownRef\"\n :class=\"styles.dropdown\">\n <label\n v-if=\"label\"\n :class=\"styles.dropdown__label\"\n :for=\"id\">\n {{ label }}\n </label>\n <button\n :class=\"[\n styles.dropdown__valueContent, {\n [styles['dropdown__valueContent--open']]: isOpen,\n },\n ]\"\n @click=\"toggleMenu\">\n <span :class=\"styles.dropdown__value\">\n {{ selectedValue }}\n </span>\n <span\n v-if=\"placeholder && !selectedValue\"\n :class=\"styles.dropdown__placeholder\">\n {{ placeholder }}\n </span>\n <svg\n fill=\"none\"\n height=\"17\"\n viewBox=\"0 0 16 17\"\n width=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n :class=\"styles.dropdown__arrowIcon\">\n <path\n d=\"M8 11.2021L4.5359 6.70215L11.4641 6.70215L8 11.2021Z\"\n fill=\"#91949F\" />\n </svg>\n </button>\n </div>\n\n <div\n v-if=\"isOpen\"\n ref=\"menuRef\"\n :class=\"styles.menu\"\n :style=\"menuStyle\"\n v-click-outside=\"{ handler: closeMenu, exclude: [dropdownRef, menuRef] }\"\n @click.prevent>\n <div\n v-if=\"props.searchable\"\n :class=\"styles.menu__searchContainer\">\n <div :class=\"styles.menu__searchInputWrap\">\n <input\n type=\"text\"\n :class=\"[\n styles.menu__searchInput, {\n [styles['menu__searchInput--error']]: errorMessage,\n },\n ]\"\n :placeholder=\"searchPlaceHolder\"\n v-model=\"searchQuery\"\n @focus=\"onFocusSearch\"\n @input=\"onSearch\">\n <p\n v-if=\"errorMessage\"\n :class=\"styles.menu__errorMessage\">\n {{ errorMessage }}\n </p>\n </div>\n <button\n v-if=\"props.addable\"\n :class=\"styles.menu__addButton\"\n @click=\"addItem\">\n {{ addButtonText }}\n </button>\n </div>\n <ul :class=\"styles.menu__itemContainer\">\n <li\n v-for=\"(item) in filteredItems\"\n :key=\"item.value\"\n :class=\"[\n styles.menu__item, {\n [styles['menu__item--active']]: selectedItem && item.value === selectedItem.value,\n },\n ]\"\n @click=\"selectItem(item)\">\n {{ item.text }}\n </li>\n </ul>\n </div>\n</template>\n","import { defineAsyncComponent } from 'vue';\n\nconst iconMap = {\n FilledErrorBox: defineAsyncComponent(() => import('./FilledErrorBox.vue')),\n LineCheck: defineAsyncComponent(() => import('./LineCheck.vue')),\n FilledCheckCircle: defineAsyncComponent(() => import('./FilledCheckCircle.vue')),\n LoadingCircle: defineAsyncComponent(() => import('./LoadingCircle.vue')),\n FilledInfoCircle: defineAsyncComponent(() => import('./FilledInfoCircle.vue')),\n SmartIcon: defineAsyncComponent(() => import('./SmartIcon.vue')),\n FilledCautionTriangle: defineAsyncComponent(() => import('./FilledCautionTriangle.vue')),\n};\n\nexport default iconMap;\n","<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport iconMap from '@/components/Icon/icons';\nimport type { IconNames } from '@/components/Icon/types';\n\ninterface IconProps {\n name: IconNames;\n size?: 16 | 24;\n color?: string;\n}\n\nconst props = withDefaults(defineProps<IconProps>(), {\n size: 16,\n});\n\nconst iconSize = computed(() => (typeof props.size === 'number' ? `${props.size}px` : props.size));\n</script>\n\n<template>\n <component\n :is=\"iconMap[name]\"\n class=\"icon\"\n :style=\"{ width: iconSize, height: iconSize, fill: props.color || 'currentColor' }\" />\n</template>\n\n<style scoped>\n.icon {\n display: inline-block;\n line-height: 0;\n vertical-align: middle;\n}\n</style>\n","<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport Icon from '@/components/Icon/Icon.vue';\nimport type { IconNames } from '@/components/Icon/types';\nimport styles from './OnPageMessage.module.scss';\n\ninterface OnPageMessageProps {\n variant?: 'default' | 'warning' | 'alert' | 'success';\n text: string;\n}\n\nconst props = withDefaults(defineProps<OnPageMessageProps>(), {\n variant: 'default',\n});\n\nconst IconName = computed<IconNames>(() => {\n switch (props.variant) {\n case 'alert': return 'FilledErrorBox';\n case 'warning': return 'FilledCautionTriangle';\n case 'success': return 'FilledCheckCircle';\n\n default: return 'FilledInfoCircle';\n }\n});\n</script>\n\n<template>\n <div\n :class=\"[\n styles.container,\n styles[`container__${variant}`],\n ]\">\n <Icon\n :name=\"IconName\"\n :size=\"24\" />\n <span :class=\"styles.container__text\">{{ text }}</span>\n </div>\n</template>\n","<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport type { IconNames } from '@/components/Icon/types';\nimport { Icon } from '@/index';\nimport styles from './SegmentButton.module.scss';\n\ninterface SegmentType {\n value: string;\n label: string;\n disabled?: boolean;\n icon?: IconNames;\n}\n\ninterface SegmentButtonProps {\n color: 'primary' | 'secondary' | 'danger' | 'warning' | 'smart';\n size?: 'default' | 'small';\n align?: 'vertical' | 'horizontal';\n disabled?: boolean;\n segments: SegmentType[];\n fill?: boolean;\n}\n\nconst props = withDefaults(defineProps<SegmentButtonProps>(), {\n loadingStatus: false,\n successStatus: false,\n disabled: false,\n size: 'default',\n align: 'horizontal',\n});\n\nconst emit = defineEmits<{\n click: [event: SegmentType['value']];\n}>();\n\nconst selected = ref<string>('');\n\nconst setSelect = (segment: SegmentType) => {\n if (props.disabled || segment.disabled) {\n return;\n }\n\n selected.value = segment.value;\n\n emit('click', segment.value);\n};\n</script>\n\n<template>\n <div\n :class=\"[\n styles.segmentGroup,\n styles[`segmentGroup--${align}`],\n { [styles.fill]: fill },\n ]\">\n <button\n v-for=\"segment in segments\"\n :key=\"segment.value\"\n :class=\"[\n styles.button,\n styles[`button--${color}`],\n styles[`button__size_${size}`],\n styles.fill,\n {\n [styles[`button--selected`]]: segment.value === selected,\n },\n ]\"\n :disabled=\"segment.disabled || props.disabled\"\n @click=\"setSelect(segment)\">\n <Icon\n v-if=\"segment.icon\"\n :name=\"segment.icon\" />\n <span\n v-if=\"segment.label\"\n :class=\"styles.button__label\">\n {{ segment.label }}\n </span>\n </button>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue';\nimport styles from './TextInput.module.scss';\n\nexport interface Props {\n id: string;\n name: string;\n modelValue: string | number;\n label?: string;\n placeholder?: string;\n maxLength?: number;\n maxHeight?: number;\n error?: string;\n multiline?: boolean;\n autoGrow?: boolean;\n counter?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n label: '',\n placeholder: '',\n maxLength: undefined,\n maxHeight: undefined,\n error: '',\n multiline: false,\n autoGrow: false,\n modelValue: '',\n});\n\nconst emit = defineEmits<{\n 'update:modelValue': [Props['modelValue']];\n input: [event: Event];\n change: [event: Event];\n paste: [event: ClipboardEvent];\n focus: [event: FocusEvent];\n blur: [event: FocusEvent];\n}>();\n\nconst textareaRef = ref<HTMLTextAreaElement | null>(null);\n\nconst autoGrow = () => {\n if (props.autoGrow && textareaRef.value) {\n textareaRef.value.style.height = '';\n\n const newHeight = Math.min(textareaRef.value.scrollHeight, props.maxHeight || textareaRef.value.scrollHeight);\n\n textareaRef.value.style.height = `${newHeight}px`;\n }\n};\n\nconst handleInput = (event: Event) => {\n const target = event.target as HTMLInputElement | HTMLTextAreaElement;\n\n emit('input', event);\n emit('update:modelValue', target.value);\n\n autoGrow();\n};\n\nonMounted(() => {\n autoGrow();\n});\n</script>\n\n<template>\n <div :class=\"styles.wrapper\">\n <label\n v-if=\"label\"\n :class=\"styles.wrapper__label\"\n :for=\"id\">\n {{ label }}\n </label>\n <template v-if=\"multiline\">\n <textarea\n :id=\"id\"\n ref=\"textareaRef\"\n :class=\"[\n styles.wrapper__field, {\n [styles['wrapper--error']]: error,\n },\n ]\"\n :maxlength=\"maxLength\"\n :name=\"name\"\n :placeholder=\"placeholder\"\n :style=\"maxHeight ? { maxHeight: `${maxHeight}px` } : undefined\"\n :value=\"modelValue\"\n @blur=\"emit('blur', $event)\"\n @change=\"$emit('change', $event)\"\n @focus=\"emit('focus', $event)\"\n @input=\"handleInput\"\n @paste=\"emit('paste', $event)\" />\n </template>\n <template v-else>\n <input\n :id=\"id\"\n type=\"text\"\n :class=\"[\n styles.wrapper__field, {\n [styles['wrapper--error']]: error,\n },\n ]\"\n :maxlength=\"maxLength\"\n :name=\"name\"\n :placeholder=\"placeholder\"\n :value=\"modelValue\"\n @blur=\"emit('blur', $event)\"\n @change=\"$emit('change', $event)\"\n @focus=\"emit('focus', $event)\"\n @input=\"handleInput\"\n @paste=\"emit('paste', $event)\">\n </template>\n\n <div :class=\"styles.wrapper__bottom\">\n <div\n v-if=\"error\"\n :class=\"styles.wrapper__errorMessage\">\n {{ error }}\n </div>\n <div\n v-if=\"counter\"\n :class=\"styles.wrapper__counter\">\n {{ modelValue?.toString().length || 0 }}\n </div>\n </div>\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","onClick","event","leftIcon","computed","clickOutside","el","binding","element","isFuzzyMatch","choiceValue","searchTerm","searchIndex","char","_a","fuzzySearch","choices","key","normalizedSearchTerm","choice","value","a","b","aValue","bValue","vClickOutside","dropdownRef","ref","menuRef","isOpen","selectedItem","searchQuery","errorMessage","menuPosition","filteredItems","allItems","calculateMenuPosition","top","left","width","viewportHeight","bottom","shouldOpenUp","toggleMenu","resetSettings","closeMenu","selectItem","item","addItem","query","error","newItem","onSearch","onFocusSearch","menuStyle","onMounted","defaultItem","selectedValue","iconMap","defineAsyncComponent","iconSize","IconName","selected","setSelect","segment","textareaRef","autoGrow","newHeight","handleInput","target"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,UAAMA,IAAQC,GAQRC,IAAOC,GAIPC,IAAU,CAACC,MAAsB;AACnC,MAAIL,EAAM,YAIVE,EAAK,SAASG,CAAK;AAAA,IACvB,GAEMC,IAAWC,EAAgC,MACzCP,EAAM,gBACC,kBACAA,EAAM,gBACN,cAGJA,EAAM,YAChB;;;;;;;;;;;;;;;;;;;;;;;;;;ICzCcQ,KAAA;AAAA,EACX,QAAQC,GAAyBC,GAA6E;AACvG,IAAAD,EAAA,oBAAoB,CAACJ,MAAiB;AAKrC,MAJsB,CAACI,GAAI,GAAIC,EAAQ,MAAM,WAAW,EAAG,EAAE,KAAK,CAAWC,MAClEA,MAAYA,MAAYN,EAAM,UAAUM,EAAQ,SAASN,EAAM,MAAc,EACvF,KAGGK,EAAQ,MAAM,QAAQ;AAAA,IAE9B,GAES,SAAA,iBAAiB,SAASD,EAAG,iBAAiB;AAAA,EAC3D;AAAA,EACA,UAAUA,GAAyB;AAC/B,IAAIA,EAAG,qBACM,SAAA,oBAAoB,SAASA,EAAG,iBAAiB;AAAA,EAC9D;AAER,GCzBMG,KAAe,CAACC,GAAqBC,MAAgC;;AACvE,MAAIC,IAAc;AAClB,aAAWC,KAAQH;AAIX,QAHAG,EAAK,YAAY,QAAMC,IAAAH,EAAWC,CAAW,MAAtB,gBAAAE,EAAyB,kBAChDF,KAEAA,MAAgBD,EAAW;AACpB,aAAA;AAGR,SAAA;AACX,GAGaI,KAAc,CACvBC,GACAC,GACAN,MACM;AACF,MAAA,CAACA,EAAW;AACL,WAAAK;AAGL,QAAAE,IAAuBP,EAAW,YAAY;AAE7C,SAAAK,EACF,OAAO,CAAUG,MAAA;AACd,UAAMC,IAAQ,OAAOD,EAAOF,CAAG,CAAC;AAEhC,WAAOR,GAAaW,EAAM,YAAY,GAAGF,CAAoB;AAAA,EAChE,CAAA,EACA,KAAK,CAACG,GAAGC,MAAM;AACZ,UAAMC,IAAU,OAAOF,EAAEJ,CAAG,CAAC,EAAE,YAAY,GACrCO,IAAS,OAAOF,EAAEL,CAAG,CAAC,EAAE,YAAY;AAEtC,WAAAM,MAAWL,IAA6B,KACxCM,MAAWN,IAA6B,IAExCK,EAAO,WAAWL,CAAoB,KAAK,CAACM,EAAO,WAAWN,CAAoB,IAC3E,KACP,CAACK,EAAO,WAAWL,CAAoB,KAAKM,EAAO,WAAWN,CAAoB,IAC3E,IAEJK,EAAO,SAASC,EAAO;AAAA,EAAA,CACjC;AACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACvCA,UAAMC,IAAgBpB,IA4BhBR,IAAQC,GAQRC,IAAOC,GACP0B,IAAcC,EAAoB,GAClCC,IAAUD,EAAoB,GAC9BE,IAASF,EAAI,EAAK,GAClBG,IAAeH,EAAqB,IAAI,GACxCI,IAAcJ,EAAI,EAAE,GACpBK,IAAeL,EAAmB,IAAI,GACtCM,IAAeN,EAAI,EAAE,GAAG,GAAG,GAAG,GAAG,OAAO,GAAG,cAAc,IAAO,QAAQ9B,EAAM,YAAY,GAC1FqC,IAAgBP,EAAI,CAAC,GAAG9B,EAAM,KAAK,CAAC,GACpCsC,IAAWR,EAAI,CAAC,GAAG9B,EAAM,KAAK,CAAC,GAE/BuC,IAAwB,MAAM;AAC5B,UAAA,CAACV,EAAY;AACb;AAGE,YAAA,EAAE,WAAWW,GAAK,YAAYC,GAAM,aAAaC,MAAUb,EAAY,OACvEc,IAAiB,OAAO,aACxBC,IAASJ,IAAMX,EAAY,MAAM,cACjCgB,IAAeD,IAAS5C,EAAM,aAAa2C;AAEjD,MAAAP,EAAa,QAAQ;AAAA,QACjB,GAAGK,IAAO,OAAO;AAAA,QACjB,GAAGI,IAAeL,IAAM,OAAO,UAAUI,IAAS,OAAO;AAAA,QACzD,OAAAF;AAAA,QACA,cAAAG;AAAA,QACA,QAAQ7C,EAAM;AAAA,MAClB;AAAA,IACJ,GAEM8C,IAAa,MAAM;AACC,MAAAP,EAAA,GACfP,EAAA,QAAQ,CAACA,EAAO;AAAA,IAC3B,GAEMe,IAAgB,MAAM;AACxB,MAAAZ,EAAa,QAAQ,MACrBD,EAAY,QAAQ,IACpBG,EAAc,QAAQ,CAAC,GAAGC,EAAS,KAAK;AAAA,IAC5C,GAEMU,IAAY,MAAM;AACpB,MAAAhB,EAAO,QAAQ,IAEDe,EAAA;AAAA,IAClB,GAEME,IAAa,CAACC,MAAmB;AACnC,MAAAjB,EAAa,QAAQiB,GAErBhD,EAAK,eAAegD,CAAI,GACnBhD,EAAA,qBAAqBgD,EAAK,KAAK,GAE1BF,EAAA;AAAA,IACd,GAEMG,IAAU,MAAM;AACZ,YAAAC,IAAQlB,EAAY,MAAM,KAAK,GAC/BmB,IAAQrD,EAAM,gBAAgBoD,GAAOd,EAAS,KAAK;AAEzD,UAAIe,GAAO;AACP,QAAAlB,EAAa,QAAQkB,GAErBnD,EAAK,aAAamD,CAAK;AAEvB;AAAA,MAAA;AAGJ,YAAMC,IAAoB;AAAA,QACtB,MAAMF;AAAA,QACN,OAAOA;AAAA,MACX;AAES,MAAAd,EAAA,MAAM,KAAKgB,CAAO,GACbP,EAAA,GAEd7C,EAAK,cAAcoD,CAAO;AAAA,IAC9B,GAEMC,IAAW,MAAM;AACnB,MAAAlB,EAAc,QAAQnB,GAAsBoB,EAAS,OAAO,QAAQJ,EAAY,KAAK;AAAA,IACzF,GAEMsB,IAAgB,MAAM;AACxB,MAAArB,EAAa,QAAQ;AAAA,IACzB,GAEMsB,IAAYlD,EAA8B,OAAO;AAAA,MACnD,KAAK6B,EAAa,MAAM,eAAe,GAAGA,EAAa,MAAM,IAAI,EAAE,OAAO,GAAGA,EAAa,MAAM,CAAC;AAAA,MACjG,MAAM,GAAGA,EAAa,MAAM,CAAC;AAAA,MAC7B,OAAO,GAAGA,EAAa,MAAM,KAAK;AAAA,MAClC,QAAQ,GAAGpC,EAAM,UAAU;AAAA,IAAA,EAC7B;AAEF,IAAA0D,EAAU,MAAM;AAGZ,UAFsBnB,EAAA,GAElBvC,EAAM,YAAY;AACZ,cAAA2D,IAAcrB,EAAS,MAAM,KAAK,OAAQY,EAAK,UAAUlD,EAAM,UAAU;AAE/E,QAAI2D,MACA1B,EAAa,QAAQ0B;AAAA,MACzB;AAAA,IACJ,CACH;AAEK,UAAAC,IAAgBrD,EAAS,MAAO0B,EAAa,QAAQA,EAAa,MAAM,OAAO,EAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IClJlF4B,KAAU;AAAA,EACd,gBAAgBC,EAAqB,MAAM,OAAO,8BAAsB,CAAC;AAAA,EACzE,WAAWA,EAAqB,MAAM,OAAO,yBAAiB,CAAC;AAAA,EAC/D,mBAAmBA,EAAqB,MAAM,OAAO,iCAAyB,CAAC;AAAA,EAC/E,eAAeA,EAAqB,MAAM,OAAO,6BAAqB,CAAC;AAAA,EACvE,kBAAkBA,EAAqB,MAAM,OAAO,gCAAwB,CAAC;AAAA,EAC7E,WAAWA,EAAqB,MAAM,OAAO,yBAAiB,CAAC;AAAA,EAC/D,uBAAuBA,EAAqB,MAAM,OAAO,qCAA6B,CAAC;AACzF;;;;;;;;ACCA,UAAM9D,IAAQC,GAIR8D,IAAWxD,EAAS,MAAO,OAAOP,EAAM,QAAS,WAAW,GAAGA,EAAM,IAAI,OAAOA,EAAM,IAAK;;;;;;;;;;;;;;;;;;;;;;;;;ACJjG,UAAMA,IAAQC,GAIR+D,IAAWzD,EAAoB,MAAM;AACvC,cAAQP,EAAM,SAAS;AAAA,QACnB,KAAK;AAAgB,iBAAA;AAAA,QACrB,KAAK;AAAkB,iBAAA;AAAA,QACvB,KAAK;AAAkB,iBAAA;AAAA,QAEvB;AAAgB,iBAAA;AAAA,MAAA;AAAA,IACpB,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACDD,UAAMA,IAAQC,GAQRC,IAAOC,GAIP8D,IAAWnC,EAAY,EAAE,GAEzBoC,IAAY,CAACC,MAAyB;AACpC,MAAAnE,EAAM,YAAYmE,EAAQ,aAI9BF,EAAS,QAAQE,EAAQ,OAEpBjE,EAAA,SAASiE,EAAQ,KAAK;AAAA,IAC/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC1BA,UAAMnE,IAAQC,GAWRC,IAAOC,GASPiE,IAActC,EAAgC,IAAI,GAElDuC,IAAW,MAAM;AACf,UAAArE,EAAM,YAAYoE,EAAY,OAAO;AACzB,QAAAA,EAAA,MAAM,MAAM,SAAS;AAE3B,cAAAE,IAAY,KAAK,IAAIF,EAAY,MAAM,cAAcpE,EAAM,aAAaoE,EAAY,MAAM,YAAY;AAE5G,QAAAA,EAAY,MAAM,MAAM,SAAS,GAAGE,CAAS;AAAA,MAAA;AAAA,IAErD,GAEMC,IAAc,CAAClE,MAAiB;AAClC,YAAMmE,IAASnE,EAAM;AAErB,MAAAH,EAAK,SAASG,CAAK,GACdH,EAAA,qBAAqBsE,EAAO,KAAK,GAE7BH,EAAA;AAAA,IACb;AAEA,WAAAX,EAAU,MAAM;AACH,MAAAW,EAAA;AAAA,IAAA,CACZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.d.ts CHANGED Viewed

@@ -29,15 +29,17 @@ declare interface ButtonProps {
 }
 export declare const DropdownMenu: DefineComponent<DropdownProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+"update:modelValue": (value: string) => any;
 "add-error": (error: string) => any;
 "item-added": (item: MenuItem) => any;
 "select-item": (item: MenuItem) => any;
 }, string, PublicProps, Readonly<DropdownProps> & Readonly<{
+"onUpdate:modelValue"?: ((value: string) => any) | undefined;
 "onAdd-error"?: ((error: string) => any) | undefined;
 "onItem-added"?: ((item: MenuItem) => any) | undefined;
 "onSelect-item"?: ((item: MenuItem) => any) | undefined;
 }>, {
-defaultSelected: string;
+modelValue: string;
 menuHeight: number;
 validateAddItem: (item: string, items: MenuItem[]) => string | null;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
@@ -48,7 +50,7 @@ menuRef: HTMLDivElement;
 declare interface DropdownProps {
     id: string;
     label?: string;
-    defaultSelected?: string;
+    modelValue?: string;
     menuHeight?: number;
     placeholder?: string;
     addable?: boolean;
@@ -141,15 +143,18 @@ blur: (event: FocusEvent) => any;
 change: (event: Event) => any;
 focus: (event: FocusEvent) => any;
 paste: (event: ClipboardEvent) => any;
+"update:modelValue": (args_0: string | number) => any;
 }, string, PublicProps, Readonly<Props> & Readonly<{
 onInput?: ((event: Event) => any) | undefined;
 onBlur?: ((event: FocusEvent) => any) | undefined;
 onChange?: ((event: Event) => any) | undefined;
 onFocus?: ((event: FocusEvent) => any) | undefined;
 onPaste?: ((event: ClipboardEvent) => any) | undefined;
+"onUpdate:modelValue"?: ((args_0: string | number) => any) | undefined;
 }>, {
 label: string;
 error: string;
+modelValue: string | number;
 placeholder: string;
 maxHeight: number;
 maxLength: number;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/ab-components",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
   "files": [
     "dist"

package/dist/index-BfxawNec.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"index-BfxawNec.js","sources":["../src/components/Button/Button.vue","../src/directives/clickOutside.ts","../src/utils/search.ts","../src/components/Dropdown/DropdownMenu.vue","../src/components/Icon/icons/index.ts","../src/components/Icon/Icon.vue","../src/components/OnPageMessage/OnPageMessage.vue","../src/components/SegmentButton/SegmentButton.vue","../src/components/TextInput/TextInput.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport type { IconNames } from '@/components/Icon/types';\nimport { Icon } from '@/index';\nimport styles from './Button.module.scss';\n\ninterface ButtonProps {\n variant: 'solid' | 'ghost' | 'text' | 'outline';\n color: 'primary' | 'subtle-primary' | 'secondary' | 'danger' | 'warning' | 'smart';\n size?: 'default' | 'small';\n leftIconName?: IconNames;\n rightIconName?: IconNames;\n loadingStatus?: boolean;\n successStatus?: boolean;\n label?: string;\n disabled?: boolean;\n fill?: boolean;\n}\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n loadingStatus: false,\n successStatus: false,\n disabled: false,\n fill: false,\n size: 'default',\n});\n\nconst emit = defineEmits<{\n click: [event: MouseEvent];\n}>();\n\nconst onClick = (event: MouseEvent) => {\n if (props.disabled) {\n return;\n }\n\n emit('click', event);\n};\n\nconst leftIcon = computed<IconNames | undefined>(() => {\n if (props.loadingStatus) {\n return 'LoadingCircle';\n } else if (props.successStatus) {\n return 'LineCheck';\n }\n\n return props.leftIconName;\n});\n</script>\n\n<template>\n <button\n :class=\"[\n styles.button,\n styles[`button__${variant}`],\n styles[`button__${variant}-${color}`],\n styles[`button__size_${size}`],\n { [styles.fill]: fill },\n ]\"\n :disabled=\"props.disabled\"\n @click=\"onClick\">\n <Icon\n v-if=\"leftIcon\"\n :name=\"leftIcon\" />\n <span\n v-if=\"label\"\n :class=\"styles.button__label\">\n {{ label }}\n </span>\n <Icon\n v-if=\"rightIconName\"\n :name=\"rightIconName\" />\n </button>\n</template>\n","import type { DirectiveBinding } from 'vue';\n\ninterface ClickOutsideElement extends HTMLElement {\n clickOutsideEvent?: (event: Event) => void;\n}\n\nexport default {\n mounted(el: ClickOutsideElement, binding: DirectiveBinding<{ handler: () => void; exclude?: HTMLElement[] }>) {\n el.clickOutsideEvent = (event: Event) => {\n const isClickInside = [el, ...(binding.value.exclude || [])].some(element => {\n return element && (element === event.target || element.contains(event.target as Node))\n });\n\n if (!isClickInside) {\n binding.value.handler(); // Close handler\n }\n };\n\n document.addEventListener('click', el.clickOutsideEvent);\n },\n unmounted(el: ClickOutsideElement) {\n if (el.clickOutsideEvent) {\n document.removeEventListener('click', el.clickOutsideEvent);\n }\n },\n};","const isFuzzyMatch = (choiceValue: string, searchTerm: string): boolean => {\n let searchIndex = 0;\n for (const char of choiceValue) {\n if (char.toLowerCase() === searchTerm[searchIndex]?.toLowerCase()) {\n searchIndex++;\n }\n if (searchIndex === searchTerm.length) {\n return true;\n }\n }\n return false;\n};\n\n\nexport const fuzzySearch = <T>(\n choices: T[],\n key: keyof T,\n searchTerm: string,\n): T[] => {\n if (!searchTerm.trim()) {\n return choices;\n }\n\n const normalizedSearchTerm = searchTerm.toLowerCase();\n\n return choices\n .filter(choice => {\n const value = String(choice[key]);\n\n return isFuzzyMatch(value.toLowerCase(), normalizedSearchTerm)\n })\n .sort((a, b) => {\n const aValue = String(a[key]).toLowerCase();\n const bValue = String(b[key]).toLowerCase();\n\n if (aValue === normalizedSearchTerm) return -1;\n if (bValue === normalizedSearchTerm) return 1;\n\n if (aValue.startsWith(normalizedSearchTerm) && !bValue.startsWith(normalizedSearchTerm))\n return -1;\n if (!aValue.startsWith(normalizedSearchTerm) && bValue.startsWith(normalizedSearchTerm))\n return 1;\n\n return aValue.length - bValue.length;\n });\n};\n","<script lang=\"ts\" setup>\nimport { ref, computed, type StyleValue, onMounted } from 'vue';\nimport clickOutside from '@/directives/clickOutside';\nimport { fuzzySearch } from '@/utils/search';\nimport styles from './Dropdown.module.scss';\n\nconst vClickOutside = clickOutside;\n\ninterface MenuItem {\n text: string;\n value: string;\n}\n\ninterface DropdownProps {\n id: string;\n label?: string;\n defaultSelected?: string;\n menuHeight?: number;\n placeholder?: string;\n addable?: boolean;\n addButtonText?: string;\n searchable?: boolean;\n searchPlaceHolder?: string;\n items: MenuItem[];\n validateAddItem?: (item: string, items: MenuItem[]) => string | null;\n}\n\ninterface Emits {\n (e: 'add-error', error: string): void;\n (e: 'item-added', item: MenuItem): void;\n (e: 'select-item', item: MenuItem): void;\n}\n\nconst props = withDefaults(defineProps<DropdownProps>(), {\n menuHeight: 154,\n searchBar: false,\n addItem: false,\n defaultSelected: '',\n validateAddItem: () => null,\n});\n\nconst emit = defineEmits<Emits>();\nconst dropdownRef = ref<HTMLDivElement>();\nconst menuRef = ref<HTMLDivElement>();\nconst isOpen = ref(true);\nconst selectedItem = ref<MenuItem | null>(null);\nconst searchQuery = ref('');\nconst errorMessage = ref<string | null>(null);\nconst menuPosition = ref({ x: 0, y: 0, width: 0, shouldOpenUp: false, height: props.menuHeight });\nconst filteredItems = ref([...props.items]);\nconst allItems = ref([...props.items]);\n\nconst calculateMenuPosition = () => {\n if (!dropdownRef.value) {\n return;\n }\n\n const { offsetTop: top, offsetLeft: left, offsetWidth: width } = dropdownRef.value;\n const viewportHeight = window.innerHeight;\n const bottom = top + dropdownRef.value.offsetHeight;\n const shouldOpenUp = bottom + props.menuHeight > viewportHeight;\n\n menuPosition.value = {\n x: left + window.scrollX,\n y: shouldOpenUp ? top + window.scrollY : bottom + window.scrollY,\n width,\n shouldOpenUp,\n height: props.menuHeight,\n };\n};\n\nconst toggleMenu = () => {\n calculateMenuPosition();\n isOpen.value = !isOpen.value;\n};\n\nconst resetSettings = () => {\n errorMessage.value = null;\n searchQuery.value = '';\n filteredItems.value = [...allItems.value];\n};\n\nconst closeMenu = () => {\n isOpen.value = false;\n\n resetSettings();\n};\n\nconst selectItem = (item: MenuItem) => {\n selectedItem.value = item;\n searchQuery.value = '';\n\n closeMenu();\n\n emit('select-item', item);\n};\n\nconst addItem = () => {\n const query = searchQuery.value.trim();\n const error = props.validateAddItem(query, allItems.value);\n\n if (error) {\n errorMessage.value = error;\n\n emit('add-error', error);\n\n return;\n }\n\n const newItem: MenuItem = {\n text: query,\n value: query,\n };\n\n allItems.value.push(newItem);\n resetSettings();\n\n emit('item-added', newItem);\n};\n\nconst onSearch = () => {\n filteredItems.value = fuzzySearch<MenuItem>(allItems.value, 'text', searchQuery.value);\n};\n\nconst onFocusSearch = () => {\n errorMessage.value = '';\n};\n\nconst menuStyle = computed<Partial<StyleValue>>(() => ({\n top: menuPosition.value.shouldOpenUp ? `${menuPosition.value.y - 10}px` : `${menuPosition.value.y}px`,\n left: `${menuPosition.value.x}px`,\n width: `${menuPosition.value.width}px`,\n height: `${props.menuHeight}px`,\n}));\n\nonMounted(() => {\n calculateMenuPosition();\n\n if (props.defaultSelected) {\n const defaultItem = allItems.value.find(item => item.value === props.defaultSelected);\n\n if (defaultItem) {\n selectedItem.value = defaultItem;\n emit('select-item', defaultItem);\n }\n }\n});\n\nconst selectedValue = computed(() => (selectedItem.value ? selectedItem.value.text : ''));\n</script>\n\n<template>\n <div\n ref=\"dropdownRef\"\n :class=\"styles.dropdown\">\n <label\n v-if=\"label\"\n :class=\"styles.dropdown__label\"\n :for=\"id\">\n {{ label }}\n </label>\n <button\n :class=\"[\n styles.dropdown__valueContent, {\n [styles['dropdown__valueContent--open']]: isOpen,\n },\n ]\"\n @click=\"toggleMenu\">\n <span :class=\"styles.dropdown__value\">\n {{ selectedValue }}\n </span>\n <span\n v-if=\"placeholder && !selectedValue\"\n :class=\"styles.dropdown__placeholder\">\n {{ placeholder }}\n </span>\n <svg\n fill=\"none\"\n height=\"17\"\n viewBox=\"0 0 16 17\"\n width=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n :class=\"styles.dropdown__arrowIcon\">\n <path\n d=\"M8 11.2021L4.5359 6.70215L11.4641 6.70215L8 11.2021Z\"\n fill=\"#91949F\" />\n </svg>\n </button>\n </div>\n\n <div\n v-if=\"isOpen\"\n ref=\"menuRef\"\n :class=\"styles.menu\"\n :style=\"menuStyle\"\n v-click-outside=\"{ handler: closeMenu, exclude: [dropdownRef, menuRef] }\"\n @click.prevent>\n <div\n v-if=\"props.searchable\"\n :class=\"styles.menu__searchContainer\">\n <div :class=\"styles.menu__searchInputWrap\">\n <input\n type=\"text\"\n :class=\"[\n styles.menu__searchInput, {\n [styles['menu__searchInput--error']]: errorMessage,\n },\n ]\"\n :placeholder=\"searchPlaceHolder\"\n v-model=\"searchQuery\"\n @focus=\"onFocusSearch\"\n @input=\"onSearch\">\n <p\n v-if=\"errorMessage\"\n :class=\"styles.menu__errorMessage\">\n {{ errorMessage }}\n </p>\n </div>\n <button\n v-if=\"props.addable\"\n :class=\"styles.menu__addButton\"\n @click=\"addItem\">\n {{ addButtonText }}\n </button>\n </div>\n <ul :class=\"styles.menu__itemContainer\">\n <li\n v-for=\"(item) in filteredItems\"\n :key=\"item.value\"\n :class=\"[\n styles.menu__item, {\n [styles['menu__item--active']]: selectedItem && item.value === selectedItem.value,\n },\n ]\"\n @click=\"selectItem(item)\">\n {{ item.text }}\n </li>\n </ul>\n </div>\n</template>\n","import { defineAsyncComponent } from 'vue';\n\nconst iconMap = {\n FilledErrorBox: defineAsyncComponent(() => import('./FilledErrorBox.vue')),\n LineCheck: defineAsyncComponent(() => import('./LineCheck.vue')),\n FilledCheckCircle: defineAsyncComponent(() => import('./FilledCheckCircle.vue')),\n LoadingCircle: defineAsyncComponent(() => import('./LoadingCircle.vue')),\n FilledInfoCircle: defineAsyncComponent(() => import('./FilledInfoCircle.vue')),\n SmartIcon: defineAsyncComponent(() => import('./SmartIcon.vue')),\n FilledCautionTriangle: defineAsyncComponent(() => import('./FilledCautionTriangle.vue')),\n};\n\nexport default iconMap;\n","<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport iconMap from '@/components/Icon/icons';\nimport type { IconNames } from '@/components/Icon/types';\n\ninterface IconProps {\n name: IconNames;\n size?: 16 | 24;\n color?: string;\n}\n\nconst props = withDefaults(defineProps<IconProps>(), {\n size: 16,\n});\n\nconst iconSize = computed(() => (typeof props.size === 'number' ? `${props.size}px` : props.size));\n</script>\n\n<template>\n <component\n :is=\"iconMap[name]\"\n class=\"icon\"\n :style=\"{ width: iconSize, height: iconSize, fill: props.color || 'currentColor' }\" />\n</template>\n\n<style scoped>\n.icon {\n display: inline-block;\n line-height: 0;\n vertical-align: middle;\n}\n</style>\n","<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport Icon from '@/components/Icon/Icon.vue';\nimport type { IconNames } from '@/components/Icon/types';\nimport styles from './OnPageMessage.module.scss';\n\ninterface OnPageMessageProps {\n variant?: 'default' | 'warning' | 'alert' | 'success';\n text: string;\n}\n\nconst props = withDefaults(defineProps<OnPageMessageProps>(), {\n variant: 'default',\n});\n\nconst IconName = computed<IconNames>(() => {\n switch (props.variant) {\n case 'alert': return 'FilledErrorBox';\n case 'warning': return 'FilledCautionTriangle';\n case 'success': return 'FilledCheckCircle';\n\n default: return 'FilledInfoCircle';\n }\n});\n</script>\n\n<template>\n <div\n :class=\"[\n styles.container,\n styles[`container__${variant}`],\n ]\">\n <Icon\n :name=\"IconName\"\n :size=\"24\" />\n <span :class=\"styles.container__text\">{{ text }}</span>\n </div>\n</template>\n","<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport type { IconNames } from '@/components/Icon/types';\nimport { Icon } from '@/index';\nimport styles from './SegmentButton.module.scss';\n\ninterface SegmentType {\n value: string;\n label: string;\n disabled?: boolean;\n icon?: IconNames;\n}\n\ninterface SegmentButtonProps {\n color: 'primary' | 'secondary' | 'danger' | 'warning' | 'smart';\n size?: 'default' | 'small';\n align?: 'vertical' | 'horizontal';\n disabled?: boolean;\n segments: SegmentType[];\n fill?: boolean;\n}\n\nconst props = withDefaults(defineProps<SegmentButtonProps>(), {\n loadingStatus: false,\n successStatus: false,\n disabled: false,\n size: 'default',\n align: 'horizontal',\n});\n\nconst emit = defineEmits<{\n click: [event: SegmentType['value']];\n}>();\n\nconst selected = ref<string>('');\n\nconst setSelect = (segment: SegmentType) => {\n if (props.disabled || segment.disabled) {\n return;\n }\n\n selected.value = segment.value;\n\n emit('click', segment.value);\n};\n</script>\n\n<template>\n <div\n :class=\"[\n styles.segmentGroup,\n styles[`segmentGroup--${align}`],\n { [styles.fill]: fill },\n ]\">\n <button\n v-for=\"segment in segments\"\n :key=\"segment.value\"\n :class=\"[\n styles.button,\n styles[`button--${color}`],\n styles[`button__size_${size}`],\n styles.fill,\n {\n [styles[`button--selected`]]: segment.value === selected,\n },\n ]\"\n :disabled=\"segment.disabled || props.disabled\"\n @click=\"setSelect(segment)\">\n <Icon\n v-if=\"segment.icon\"\n :name=\"segment.icon\" />\n <span\n v-if=\"segment.label\"\n :class=\"styles.button__label\">\n {{ segment.label }}\n </span>\n </button>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue';\nimport styles from './TextInput.module.scss';\n\nexport interface Props {\n id: string;\n name: string;\n modelValue: string | number;\n label?: string;\n placeholder?: string;\n maxLength?: number;\n maxHeight?: number;\n error?: string;\n multiline?: boolean;\n autoGrow?: boolean;\n counter?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n label: '',\n placeholder: '',\n maxLength: undefined,\n maxHeight: undefined,\n error: '',\n multiline: false,\n autoGrow: false,\n});\n\nconst emit = defineEmits<{\n input: [event: Event];\n change: [event: Event];\n paste: [event: ClipboardEvent];\n focus: [event: FocusEvent];\n blur: [event: FocusEvent];\n}>();\n\nconst textareaRef = ref<HTMLTextAreaElement | null>(null);\n\nconst autoGrow = () => {\n if (props.autoGrow && textareaRef.value) {\n textareaRef.value.style.height = '';\n\n const newHeight = Math.min(textareaRef.value.scrollHeight, props.maxHeight || textareaRef.value.scrollHeight);\n\n textareaRef.value.style.height = `${newHeight}px`;\n }\n};\n\nconst handleInput = (event: Event) => {\n emit('input', event);\n\n autoGrow();\n};\n\nonMounted(() => {\n autoGrow();\n});\n</script>\n\n<template>\n <div :class=\"styles.wrapper\">\n <label\n v-if=\"label\"\n :class=\"styles.wrapper__label\"\n :for=\"id\">\n {{ label }}\n </label>\n <template v-if=\"multiline\">\n <textarea\n :id=\"id\"\n ref=\"textareaRef\"\n :class=\"[\n styles.wrapper__field, {\n [styles['wrapper--error']]: error,\n },\n ]\"\n :maxlength=\"maxLength\"\n :name=\"name\"\n :placeholder=\"placeholder\"\n :style=\"maxHeight ? { maxHeight: `${maxHeight}px` } : undefined\"\n :value=\"modelValue\"\n @blur=\"emit('blur', $event)\"\n @change=\"$emit('change', $event)\"\n @focus=\"emit('focus', $event)\"\n @input=\"handleInput\"\n @paste=\"emit('paste', $event)\" />\n </template>\n <template v-else>\n <input\n :id=\"id\"\n type=\"text\"\n :class=\"[\n styles.wrapper__field, {\n [styles['wrapper--error']]: error,\n },\n ]\"\n :maxlength=\"maxLength\"\n :name=\"name\"\n :placeholder=\"placeholder\"\n :value=\"modelValue\"\n @blur=\"emit('blur', $event)\"\n @change=\"$emit('change', $event)\"\n @focus=\"emit('focus', $event)\"\n @input=\"handleInput\"\n @paste=\"emit('paste', $event)\">\n </template>\n\n <div :class=\"styles.wrapper__bottom\">\n <div\n v-if=\"error\"\n :class=\"styles.wrapper__errorMessage\">\n {{ error }}\n </div>\n <div\n v-if=\"counter\"\n :class=\"styles.wrapper__counter\">\n {{ modelValue?.toString().length || 0 }}\n </div>\n </div>\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","onClick","event","leftIcon","computed","clickOutside","el","binding","element","isFuzzyMatch","choiceValue","searchTerm","searchIndex","char","_a","fuzzySearch","choices","key","normalizedSearchTerm","choice","value","b","aValue","bValue","vClickOutside","dropdownRef","ref","menuRef","isOpen","selectedItem","searchQuery","errorMessage","menuPosition","filteredItems","allItems","calculateMenuPosition","top","left","width","viewportHeight","bottom","shouldOpenUp","toggleMenu","resetSettings","closeMenu","selectItem","item","addItem","query","error","newItem","onSearch","onFocusSearch","menuStyle","onMounted","defaultItem","selectedValue","iconMap","defineAsyncComponent","iconSize","IconName","selected","setSelect","segment","textareaRef","autoGrow","newHeight","handleInput"],"mappings":"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"}