@davincihealthcare/elty-design-system-vue 2.13.0 → 2.13.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("vue"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("vue"),w=require("./input.cjs.js"),F=require("../ElDropdown.vue.cjs2.js"),T=require("../ElInputChip.vue.cjs2.js"),N=require("../../node_modules/@vueuse/core/index.cjs.js"),z=require("../ElSpinner.vue.cjs2.js"),K=require("./ElInputContainer.vue.cjs2.js"),P=require("../../node_modules/@vueuse/core/node_modules/@vueuse/shared/index.cjs.js"),U={class:"flex items-center gap-1 px-2"},W=["disabled","validation","placeholder"],$=a.defineComponent({__name:"ElInputAutocomplete",props:{...w.withCommonElInputProps(),modelValue:{type:[Array,String],required:!1,default:void 0},placeholder:{type:String,default:"",required:!1},items:{type:Array,required:!1,default:()=>[]},selectedItems:{type:Array,default:()=>[]},labelSelectAll:{type:String,default:"Seleziona tutto"},labelDeselectAll:{type:String,default:"Deseleziona tutto"},disableSelectAll:{type:Boolean,default:!1},focusOnMount:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},debounceTime:{type:Number,default:300,requied:!1},dataController:{type:Function,required:!1,default:void 0}},emits:["update:modelValue","item:click","update:selectedItems","endOfList"],setup(p,{expose:q,emit:E}){const o=p,c=E,v=a.ref(!1),i=a.ref(!1),r=a.ref(o.modelValue),u=a.ref([]),n=a.ref(o.selectedItems),m=a.ref(),f=a.ref();a.onMounted(async()=>{if(o.dataController){const t=await g(r.value);u.value=(t==null?void 0:t.data)||[]}else u.value=o.items});const B=a.computed(()=>{var e;const t=(e=u.value)==null?void 0:e.map((l,d)=>({...l,text:l.label||l.text,check:n.value.some(s=>s.text?s.text===l.text:s.label===l.label),onClick:()=>{var s;if(o.multiple){const I=n.value.findIndex(b=>b.text?b.text===l.text:b.label===l.label);I!==-1?n.value=n.value.filter((b,O)=>O!==I):n.value.push({...l,check:!0}),r.value="",f.value=void 0,(s=m.value)==null||s.focus(),c("update:selectedItems",n.value)}else r.value=l.text||l.label||l.value||"";c("update:modelValue",l.text||l.label||l.value||""),c("item:click",d)}}));return o.multiple&&!o.disableSelectAll&&t.unshift({text:n.value.length===u.value.length?o.labelDeselectAll:o.labelSelectAll,check:!1,onClick:()=>{var l;n.value.length===u.value.length?n.value=[]:n.value=u.value,(l=m.value)==null||l.focus(),c("update:selectedItems",n.value)}}),t}),y=N.useMemoize(async(t,e)=>{var l;return await((l=o.dataController)==null?void 0:l.call(o,t,e))}),g=P.useDebounceFn(y,o.debounceTime),M=()=>y.cache.clear(),S=async()=>{var e;r.value=void 0,u.value=o.items,n.value=o.selectedItems;const t=await((e=o.dataController)==null?void 0:e.call(o,r.value));u.value=(t==null?void 0:t.data)||[]},A=()=>{u.value=[]},k=t=>{var e;((e=t.relatedTarget)==null?void 0:e.role)!=="option"&&(i.value?i.value=!1:i.value=!0)},V=({target:t})=>{t instanceof HTMLInputElement&&t.value.charAt(t.value.length-1)!==" "&&_(t.value)},x=(t,e)=>{n.value=n.value.filter(l=>l.text!==e.text),c("update:selectedItems",n.value)},_=async t=>{if(o.dataController){v.value=!0;const e=await g(t);i.value=!!e,v.value=!e,u.value=(e==null?void 0:e.data)||[]}else t?u.value=o.items.filter(e=>{var l;return(l=e.text)==null?void 0:l.toLowerCase().includes(t.toLowerCase())}):u.value=o.items;c("update:modelValue",t)},D=async t=>{if(o.dataController){v.value=!0;const e=await g(r.value,t);v.value=!e,u.value=(e==null?void 0:e.data)||[]}else u.value=o.items},C=t=>{var e,l;if(!r.value)if(n.value.length>0&&!f.value){const d=n.value.length-1;f.value=n.value[d],(e=document.getElementById(d.toString()))==null||e.focus()}else x(t,f.value),f.value=void 0,(l=m.value)==null||l.focus()},h=t=>{const e=t.currentTarget;e.scrollLeft+=t.deltaY,t.preventDefault()},L=t=>{o.multiple?i.value=!0:i.value=t};return q({resetAllAndFetch:S,clearCache:M,resetItems:A}),(t,e)=>(a.openBlock(),a.createBlock(K.default,a.mergeProps(t.$attrs,{name:t.label,color:t.color,label:t.label,"error-message":o.errorMessage===!1?!1:o.errorMessage||t.errorMessage,"hidden-error-message":t.hiddenErrorMessage,"set-required-mark":a.unref(w.showRequiredMark)([o.validation])}),{default:a.withCtx(()=>[a.createVNode(F.default,{items:B.value,multiple:p.multiple,"is-open":i.value,disabled:t.disabled,"onUpdate:isOpen":e[7]||(e[7]=l=>L(l)),onEndOfList:e[8]||(e[8]=l=>D({isEndOfList:!0}))},{anchor:a.withCtx(()=>[a.createElementVNode("div",U,[p.multiple?(a.openBlock(),a.createElementBlock("div",{key:0,name:"scrollable-container",class:"flex items-center gap-1 overflow-x-scroll no-scrollbar cursor-grab active:cursor-grabbing",onWheel:h},[(a.openBlock(!0),a.createElementBlock(a.Fragment,null,a.renderList(n.value,(l,d)=>(a.openBlock(),a.createBlock(T.default,{id:d,key:d,text:l.text||l.label||"",class:"border flex-shrink-0 rounded-md px-3 py-2",onClick:s=>x(s,l),onKeydown:e[0]||(e[0]=a.withKeys(s=>C(s),["backspace"]))},null,8,["id","text","onClick"]))),128))],32)):a.createCommentVNode("",!0),a.withDirectives(a.createElementVNode("input",{ref_key:"inputField",ref:m,"onUpdate:modelValue":e[1]||(e[1]=l=>r.value=l),disabled:t.disabled,type:"text",class:a.normalizeClass(["border-none tex-tsm font-normal flex flex-1 focus:outline-none focus:ring-0",{"cursor-not-allowed":t.disabled}]),validation:t.validation,placeholder:p.placeholder,onInput:e[2]||(e[2]=l=>V(l)),onKeydown:e[3]||(e[3]=a.withKeys(l=>C(l),["backspace"])),onClick:e[4]||(e[4]=a.withModifiers(l=>k(l),["prevent"])),onBlur:e[5]||(e[5]=a.withModifiers(l=>k(l),["prevent"])),onWheel:e[6]||(e[6]=l=>h(l))},null,42,W),[[a.vModelText,r.value]]),v.value?(a.openBlock(),a.createBlock(z.default,{key:1,class:"mx-2",size:"normal"})):a.createCommentVNode("",!0)])]),_:1},8,["items","multiple","is-open","disabled"])]),_:1},16,["name","color","label","error-message","hidden-error-message","set-required-mark"]))}});exports.default=$;
|
|
2
2
|
//# sourceMappingURL=ElInputAutocomplete.vue.cjs2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElInputAutocomplete.vue.cjs2.js","sources":["../../../src/forms/ElInputAutocomplete.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type InputAutocompleteItemsDataControl = string;\nexport type ElInputAutocompleteItems = Array<DropdownItem & { label?: string; value?: string }>;\nexport type EventOptions = { isEndOfList: boolean };\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, onMounted, PropType, ref } from 'vue';\nimport { TextualValueType, withCommonElInputProps } from './input';\nimport ElDropdown, { DropdownItem } from '@/ElDropdown.vue';\nimport ElInputChip from '@/ElInputChip.vue';\nimport { useDebounceFn, useMemoize } from '@vueuse/core';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElInputContainer from './ElInputContainer.vue';\n\nconst props = defineProps({\n ...withCommonElInputProps(),\n modelValue: {\n type: [Array, String] as PropType<TextualValueType>,\n required: false,\n default: undefined,\n },\n placeholder: {\n type: String,\n default: '',\n required: false,\n },\n items: {\n type: Array as PropType<ElInputAutocompleteItems>,\n required: false,\n default: () => [],\n },\n selectedItems: {\n type: Array as PropType<ElInputAutocompleteItems>,\n default: () => [],\n },\n labelSelectAll: {\n type: String,\n default: 'Seleziona tutto',\n },\n labelDeselectAll: {\n type: String,\n default: 'Deseleziona tutto',\n },\n disableSelectAll: {\n type: Boolean,\n default: false,\n },\n focusOnMount: {\n type: Boolean,\n default: false,\n },\n multiple: {\n type: Boolean as PropType<InstanceType<typeof ElDropdown>['multiple']>,\n default: false,\n },\n debounceTime: {\n type: Number,\n default: 300,\n requied: false,\n },\n dataController: {\n type: Function as PropType<(args: TextualValueType, eventOptions?: EventOptions) => Promise<{ data: ElInputAutocompleteItems }>>,\n required: false,\n default: undefined,\n },\n});\n\nconst emit = defineEmits<{\n (event: 'update:modelValue', value: TextualValueType): void;\n (event: 'item:click', itemIndex: number): void;\n (event: 'update:selectedItems', value: ElInputAutocompleteItems): void;\n (event: 'endOfList'): void;\n}>();\n\nconst isLoading = ref(false);\nconst isOpen = ref(false);\nconst query = ref<TextualValueType>(props.modelValue);\nconst filteredItems = ref<ElInputAutocompleteItems>([]);\nconst selectedItems = ref<ElInputAutocompleteItems>(props.selectedItems);\nconst inputField = ref<HTMLInputElement>();\nconst lastSelectedItem = ref();\n\nonMounted(async () => {\n if (props.dataController) {\n const response = await debounceDataController(query.value);\n filteredItems.value = response?.data || [];\n } else {\n filteredItems.value = props.items;\n }\n});\n\nconst items = computed(() => {\n const mappedItems = filteredItems.value?.map((item, index) => ({\n ...item,\n text: item.label || item.text,\n check: selectedItems.value.some(selectedItem =>\n selectedItem.text ? selectedItem.text === item.text : selectedItem.label === item.label,\n ),\n onClick: () => {\n if (props.multiple) {\n // If the item is already selected, remove it from the selectedItems array\n const clickedItemIndex = selectedItems.value.findIndex(currentItem =>\n currentItem.text ? currentItem.text === item.text : currentItem.label === item.label,\n );\n\n if (clickedItemIndex !== -1) {\n selectedItems.value = selectedItems.value.filter((_, index) => index !== clickedItemIndex);\n } else {\n selectedItems.value.push({ ...item, check: true });\n }\n\n // Reset query to empty string to clear the input\n query.value = '';\n // Reset last selected item because the selectedItems array is updated\n lastSelectedItem.value = undefined;\n inputField.value?.focus();\n\n emit('update:selectedItems', selectedItems.value);\n } else {\n query.value = item.text || item.label || item.value || '';\n }\n\n emit('update:modelValue', item.text || item.label || item.value || '');\n emit('item:click', index);\n },\n }));\n\n if (props.multiple && !props.disableSelectAll) {\n mappedItems.unshift({\n text: selectedItems.value.length === filteredItems.value.length ? props.labelDeselectAll : props.labelSelectAll,\n check: false,\n onClick: () => {\n if (selectedItems.value.length === filteredItems.value.length) {\n selectedItems.value = [];\n } else {\n selectedItems.value = filteredItems.value;\n }\n\n inputField.value?.focus();\n emit('update:selectedItems', selectedItems.value);\n },\n });\n }\n\n return mappedItems;\n});\n\nconst debounceFunction = useMemoize(async (value: TextualValueType, eventOptions?: EventOptions) => {\n return await props.dataController?.(value, eventOptions);\n});\n\nconst debounceDataController = useDebounceFn(debounceFunction, props.debounceTime);\nconst clearCache = () => debounceFunction.cache.clear();\n\nconst resetAllAndFetch = async () => {\n query.value = undefined;\n filteredItems.value = props.items;\n selectedItems.value = props.selectedItems;\n const response = await props.dataController?.(query.value);\n filteredItems.value = response?.data || [];\n};\n\nconst resetItems = () => {\n filteredItems.value = [];\n};\n/**\n * Handle input click event necessary to open or close dropdown\n * @param e FocusEvent\n */\nconst onInputClick = (e: FocusEvent) => {\n if ((e.relatedTarget as HTMLElement)?.role !== 'option') {\n if (!isOpen.value) {\n isOpen.value = true;\n } else {\n isOpen.value = false;\n }\n }\n};\n\n/**\n * Handle input change event to update model value\n * @param event Event\n */\nconst onChangeEvent = ({ target }: Event) => {\n if (target instanceof HTMLInputElement) {\n if (target.value.charAt(target.value.length - 1) !== ' ') {\n updateModel(target.value);\n }\n }\n};\n\n/**\n * Handle remove item fr m selected items by clicking on the item\n * @param _event Event\n * @param item DropdownItem\n */\nconst onRemoveItem = (_event: Event, item: DropdownItem) => {\n selectedItems.value = selectedItems.value.filter(currentItem => currentItem.text !== item.text);\n emit('update:selectedItems', selectedItems.value);\n};\n\nconst updateModel = async (value: TextualValueType) => {\n if (props.dataController) {\n isLoading.value = true;\n const response = await debounceDataController(value);\n isOpen.value = !!response;\n isLoading.value = !response;\n filteredItems.value = response?.data || [];\n } else {\n if (value) {\n filteredItems.value = props.items.filter(result => result.text?.toLowerCase().includes(value.toLowerCase()));\n } else {\n filteredItems.value = props.items;\n }\n }\n\n emit('update:modelValue', value);\n};\nconst triggerEventOption = async (eventOptions: EventOptions) => {\n if (props.dataController) {\n isLoading.value = true;\n const response = await debounceDataController(query.value, eventOptions);\n isLoading.value = !response;\n\n filteredItems.value = response?.data || [];\n } else {\n filteredItems.value = props.items;\n }\n};\n\n/**\n Handle backspace key press to re last selected item wh multiple is true\n param e KeyboardEvent\n */\nconst onDeleteKeyPress = (e: KeyboardEvent) => {\n if (!query.value) {\n if (selectedItems.value.length > 0 && !lastSelectedItem.value) {\n const lastItemIndex = selectedItems.value.length - 1;\n lastSelectedItem.value = selectedItems.value[lastItemIndex];\n document.getElementById(lastItemIndex.toString())?.focus();\n } else {\n onRemoveItem(e, lastSelectedItem.value);\n lastSelectedItem.value = undefined;\n inputField.value?.focus();\n }\n }\n};\n\n/**\n Handle wheel sc event to scroll the li ox horizontally\n param event WheelEvent\n */\nconst onWheelScroll = (event: WheelEvent) => {\n const container = event.currentTarget as HTMLElement;\n container.scrollLeft += event.deltaY;\n // Prevent vertical scrolling he page\n event.preventDefault();\n};\n\n/**\n Handle update isOpen eve o open the dropdown n multiple is true\n param event boolean\n */\nconst onUpdateIsOpen = (event: boolean) => {\n if (props.multiple) {\n isOpen.value = true;\n } else {\n isOpen.value = event;\n }\n};\n\ndefineExpose({\n resetAllAndFetch,\n clearCache,\n resetItems,\n});\n</script>\n\n<template>\n <div class=\"flex flex-col gap-1\">\n <label class=\"text-sm font-semibold\" :class=\"{ 'text-error': errorMessage, 'text-neutral-darker': !errorMessage }\">\n {{ label }}\n </label>\n <ElDropdown\n :items=\"items\"\n :multiple=\"multiple\"\n :is-open=\"isOpen\"\n :disabled=\"disabled\"\n @update:is-open=\"onUpdateIsOpen($event)\"\n @end-of-list=\"triggerEventOption({ isEndOfList: true })\"\n >\n <template #anchor>\n <ElInputContainer :color=\"color\" :name=\"name\">\n <template #default>\n <div class=\"flex items-center gap-1 px-2\">\n <div\n v-if=\"multiple\"\n name=\"scrollable-container\"\n class=\"flex items-center gap-1 overflow-x-scroll no-scrollbar cursor-grab active:cursor-grabbing\"\n @wheel=\"onWheelScroll\"\n >\n <ElInputChip\n v-for=\"(item, index) in selectedItems\"\n :id=\"index\"\n :key=\"index\"\n :text=\"item.text || item.label || ''\"\n class=\"border flex-shrink-0 rounded-md px-3 py-2\"\n @click=\"onRemoveItem($event, item)\"\n @keydown.backspace=\"onDeleteKeyPress($event)\"\n />\n </div>\n\n <input\n ref=\"inputField\"\n v-model=\"query\"\n :disabled=\"disabled\"\n type=\"text\"\n class=\"border-none tex-tsm font-normal flex flex-1 focus:outline-none focus:ring-0\"\n :class=\"{ 'cursor-not-allowed': disabled }\"\n :validation=\"validation\"\n :placeholder=\"placeholder\"\n @input=\"onChangeEvent($event)\"\n @keydown.backspace=\"onDeleteKeyPress($event)\"\n @click.prevent=\"onInputClick($event)\"\n @blur.prevent=\"onInputClick($event)\"\n @wheel=\"onWheelScroll($event)\"\n />\n\n <ElSpinner v-if=\"isLoading\" class=\"mx-2\" size=\"normal\" />\n </div>\n </template>\n </ElInputContainer>\n </template>\n </ElDropdown>\n <div v-if=\"errorMessage\" class=\"text-xs font-normal text-error\">{{ errorMessage }}</div>\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","isLoading","ref","isOpen","query","filteredItems","selectedItems","inputField","lastSelectedItem","onMounted","response","debounceDataController","items","computed","mappedItems","_a","item","index","selectedItem","clickedItemIndex","currentItem","_","debounceFunction","useMemoize","value","eventOptions","useDebounceFn","clearCache","resetAllAndFetch","resetItems","onInputClick","e","onChangeEvent","target","updateModel","onRemoveItem","_event","result","triggerEventOption","onDeleteKeyPress","lastItemIndex","_b","onWheelScroll","event","container","onUpdateIsOpen","__expose"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ElInputAutocomplete.vue.cjs2.js","sources":["../../../src/forms/ElInputAutocomplete.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type InputAutocompleteItemsDataControl = string;\nexport type ElInputAutocompleteItems = Array<DropdownItem & { label?: string; value?: string }>;\nexport type EventOptions = { isEndOfList: boolean };\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, onMounted, PropType, ref } from 'vue';\nimport { showRequiredMark, TextualValueType, withCommonElInputProps } from './input';\nimport ElDropdown, { DropdownItem } from '@/ElDropdown.vue';\nimport ElInputChip from '@/ElInputChip.vue';\nimport { useDebounceFn, useMemoize } from '@vueuse/core';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElInputContainer from './ElInputContainer.vue';\n\nconst props = defineProps({\n ...withCommonElInputProps(),\n modelValue: {\n type: [Array, String] as PropType<TextualValueType>,\n required: false,\n default: undefined,\n },\n placeholder: {\n type: String,\n default: '',\n required: false,\n },\n items: {\n type: Array as PropType<ElInputAutocompleteItems>,\n required: false,\n default: () => [],\n },\n selectedItems: {\n type: Array as PropType<ElInputAutocompleteItems>,\n default: () => [],\n },\n labelSelectAll: {\n type: String,\n default: 'Seleziona tutto',\n },\n labelDeselectAll: {\n type: String,\n default: 'Deseleziona tutto',\n },\n disableSelectAll: {\n type: Boolean,\n default: false,\n },\n focusOnMount: {\n type: Boolean,\n default: false,\n },\n multiple: {\n type: Boolean as PropType<InstanceType<typeof ElDropdown>['multiple']>,\n default: false,\n },\n debounceTime: {\n type: Number,\n default: 300,\n requied: false,\n },\n dataController: {\n type: Function as PropType<(args: TextualValueType, eventOptions?: EventOptions) => Promise<{ data: ElInputAutocompleteItems }>>,\n required: false,\n default: undefined,\n },\n});\n\nconst emit = defineEmits<{\n (event: 'update:modelValue', value: TextualValueType): void;\n (event: 'item:click', itemIndex: number): void;\n (event: 'update:selectedItems', value: ElInputAutocompleteItems): void;\n (event: 'endOfList'): void;\n}>();\n\nconst isLoading = ref(false);\nconst isOpen = ref(false);\nconst query = ref<TextualValueType>(props.modelValue);\nconst filteredItems = ref<ElInputAutocompleteItems>([]);\nconst selectedItems = ref<ElInputAutocompleteItems>(props.selectedItems);\nconst inputField = ref<HTMLInputElement>();\nconst lastSelectedItem = ref();\n\nonMounted(async () => {\n if (props.dataController) {\n const response = await debounceDataController(query.value);\n filteredItems.value = response?.data || [];\n } else {\n filteredItems.value = props.items;\n }\n});\n\nconst items = computed(() => {\n const mappedItems = filteredItems.value?.map((item, index) => ({\n ...item,\n text: item.label || item.text,\n check: selectedItems.value.some(selectedItem =>\n selectedItem.text ? selectedItem.text === item.text : selectedItem.label === item.label,\n ),\n onClick: () => {\n if (props.multiple) {\n // If the item is already selected, remove it from the selectedItems array\n const clickedItemIndex = selectedItems.value.findIndex(currentItem =>\n currentItem.text ? currentItem.text === item.text : currentItem.label === item.label,\n );\n\n if (clickedItemIndex !== -1) {\n selectedItems.value = selectedItems.value.filter((_, index) => index !== clickedItemIndex);\n } else {\n selectedItems.value.push({ ...item, check: true });\n }\n\n // Reset query to empty string to clear the input\n query.value = '';\n // Reset last selected item because the selectedItems array is updated\n lastSelectedItem.value = undefined;\n inputField.value?.focus();\n\n emit('update:selectedItems', selectedItems.value);\n } else {\n query.value = item.text || item.label || item.value || '';\n }\n\n emit('update:modelValue', item.text || item.label || item.value || '');\n emit('item:click', index);\n },\n }));\n\n if (props.multiple && !props.disableSelectAll) {\n mappedItems.unshift({\n text: selectedItems.value.length === filteredItems.value.length ? props.labelDeselectAll : props.labelSelectAll,\n check: false,\n onClick: () => {\n if (selectedItems.value.length === filteredItems.value.length) {\n selectedItems.value = [];\n } else {\n selectedItems.value = filteredItems.value;\n }\n\n inputField.value?.focus();\n emit('update:selectedItems', selectedItems.value);\n },\n });\n }\n\n return mappedItems;\n});\n\nconst debounceFunction = useMemoize(async (value: TextualValueType, eventOptions?: EventOptions) => {\n return await props.dataController?.(value, eventOptions);\n});\n\nconst debounceDataController = useDebounceFn(debounceFunction, props.debounceTime);\nconst clearCache = () => debounceFunction.cache.clear();\n\nconst resetAllAndFetch = async () => {\n query.value = undefined;\n filteredItems.value = props.items;\n selectedItems.value = props.selectedItems;\n const response = await props.dataController?.(query.value);\n filteredItems.value = response?.data || [];\n};\n\nconst resetItems = () => {\n filteredItems.value = [];\n};\n/**\n * Handle input click event necessary to open or close dropdown\n * @param e FocusEvent\n */\nconst onInputClick = (e: FocusEvent) => {\n if ((e.relatedTarget as HTMLElement)?.role !== 'option') {\n if (!isOpen.value) {\n isOpen.value = true;\n } else {\n isOpen.value = false;\n }\n }\n};\n\n/**\n * Handle input change event to update model value\n * @param event Event\n */\nconst onChangeEvent = ({ target }: Event) => {\n if (target instanceof HTMLInputElement) {\n if (target.value.charAt(target.value.length - 1) !== ' ') {\n updateModel(target.value);\n }\n }\n};\n\n/**\n * Handle remove item fr m selected items by clicking on the item\n * @param _event Event\n * @param item DropdownItem\n */\nconst onRemoveItem = (_event: Event, item: DropdownItem) => {\n selectedItems.value = selectedItems.value.filter(currentItem => currentItem.text !== item.text);\n emit('update:selectedItems', selectedItems.value);\n};\n\nconst updateModel = async (value: TextualValueType) => {\n if (props.dataController) {\n isLoading.value = true;\n const response = await debounceDataController(value);\n isOpen.value = !!response;\n isLoading.value = !response;\n filteredItems.value = response?.data || [];\n } else {\n if (value) {\n filteredItems.value = props.items.filter(result => result.text?.toLowerCase().includes(value.toLowerCase()));\n } else {\n filteredItems.value = props.items;\n }\n }\n\n emit('update:modelValue', value);\n};\nconst triggerEventOption = async (eventOptions: EventOptions) => {\n if (props.dataController) {\n isLoading.value = true;\n const response = await debounceDataController(query.value, eventOptions);\n isLoading.value = !response;\n\n filteredItems.value = response?.data || [];\n } else {\n filteredItems.value = props.items;\n }\n};\n\n/**\n Handle backspace key press to re last selected item wh multiple is true\n param e KeyboardEvent\n */\nconst onDeleteKeyPress = (e: KeyboardEvent) => {\n if (!query.value) {\n if (selectedItems.value.length > 0 && !lastSelectedItem.value) {\n const lastItemIndex = selectedItems.value.length - 1;\n lastSelectedItem.value = selectedItems.value[lastItemIndex];\n document.getElementById(lastItemIndex.toString())?.focus();\n } else {\n onRemoveItem(e, lastSelectedItem.value);\n lastSelectedItem.value = undefined;\n inputField.value?.focus();\n }\n }\n};\n\n/**\n Handle wheel sc event to scroll the li ox horizontally\n param event WheelEvent\n */\nconst onWheelScroll = (event: WheelEvent) => {\n const container = event.currentTarget as HTMLElement;\n container.scrollLeft += event.deltaY;\n // Prevent vertical scrolling he page\n event.preventDefault();\n};\n\n/**\n Handle update isOpen eve o open the dropdown n multiple is true\n param event boolean\n */\nconst onUpdateIsOpen = (event: boolean) => {\n if (props.multiple) {\n isOpen.value = true;\n } else {\n isOpen.value = event;\n }\n};\n\ndefineExpose({\n resetAllAndFetch,\n clearCache,\n resetItems,\n});\n</script>\n\n<template>\n <ElInputContainer\n v-bind=\"$attrs\"\n :name=\"label\"\n :color=\"color\"\n :label=\"label\"\n :error-message=\"props.errorMessage === false ? false : props.errorMessage || errorMessage\"\n :hidden-error-message=\"hiddenErrorMessage\"\n :set-required-mark=\"showRequiredMark([props.validation])\"\n >\n <ElDropdown\n :items=\"items\"\n :multiple=\"multiple\"\n :is-open=\"isOpen\"\n :disabled=\"disabled\"\n @update:is-open=\"onUpdateIsOpen($event)\"\n @end-of-list=\"triggerEventOption({ isEndOfList: true })\"\n >\n <template #anchor>\n <div class=\"flex items-center gap-1 px-2\">\n <div\n v-if=\"multiple\"\n name=\"scrollable-container\"\n class=\"flex items-center gap-1 overflow-x-scroll no-scrollbar cursor-grab active:cursor-grabbing\"\n @wheel=\"onWheelScroll\"\n >\n <ElInputChip\n v-for=\"(item, index) in selectedItems\"\n :id=\"index\"\n :key=\"index\"\n :text=\"item.text || item.label || ''\"\n class=\"border flex-shrink-0 rounded-md px-3 py-2\"\n @click=\"onRemoveItem($event, item)\"\n @keydown.backspace=\"onDeleteKeyPress($event)\"\n />\n </div>\n <input\n ref=\"inputField\"\n v-model=\"query\"\n :disabled=\"disabled\"\n type=\"text\"\n class=\"border-none tex-tsm font-normal flex flex-1 focus:outline-none focus:ring-0\"\n :class=\"{ 'cursor-not-allowed': disabled }\"\n :validation=\"validation\"\n :placeholder=\"placeholder\"\n @input=\"onChangeEvent($event)\"\n @keydown.backspace=\"onDeleteKeyPress($event)\"\n @click.prevent=\"onInputClick($event)\"\n @blur.prevent=\"onInputClick($event)\"\n @wheel=\"onWheelScroll($event)\"\n />\n <ElSpinner v-if=\"isLoading\" class=\"mx-2\" size=\"normal\" />\n </div>\n </template>\n </ElDropdown>\n </ElInputContainer>\n</template>\n"],"names":["props","__props","emit","__emit","isLoading","ref","isOpen","query","filteredItems","selectedItems","inputField","lastSelectedItem","onMounted","response","debounceDataController","items","computed","mappedItems","_a","item","index","selectedItem","clickedItemIndex","currentItem","_","debounceFunction","useMemoize","value","eventOptions","useDebounceFn","clearCache","resetAllAndFetch","resetItems","onInputClick","e","onChangeEvent","target","updateModel","onRemoveItem","_event","result","triggerEventOption","onDeleteKeyPress","lastItemIndex","_b","onWheelScroll","event","container","onUpdateIsOpen","__expose"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineComponent as
|
|
1
|
+
import{defineComponent as W,ref as d,onMounted as R,computed as H,openBlock as m,createBlock as k,mergeProps as Y,unref as j,withCtx as M,createVNode as G,createElementVNode as S,createElementBlock as E,Fragment as J,renderList as Q,withKeys as q,createCommentVNode as L,withDirectives as X,normalizeClass as Z,withModifiers as V,vModelText as _}from"vue";import{withCommonElInputProps as ee,showRequiredMark as le}from"./input.esm.js";import te from"../ElDropdown.vue.esm2.js";import ae from"../ElInputChip.vue.esm2.js";import{useMemoize as oe}from"../../node_modules/@vueuse/core/index.esm.js";import ne from"../ElSpinner.vue.esm2.js";import se from"./ElInputContainer.vue.esm2.js";import{useDebounceFn as ue}from"../../node_modules/@vueuse/core/node_modules/@vueuse/shared/index.esm.js";const re={class:"flex items-center gap-1 px-2"},ie=["disabled","validation","placeholder"],ye=W({__name:"ElInputAutocomplete",props:{...ee(),modelValue:{type:[Array,String],required:!1,default:void 0},placeholder:{type:String,default:"",required:!1},items:{type:Array,required:!1,default:()=>[]},selectedItems:{type:Array,default:()=>[]},labelSelectAll:{type:String,default:"Seleziona tutto"},labelDeselectAll:{type:String,default:"Deseleziona tutto"},disableSelectAll:{type:Boolean,default:!1},focusOnMount:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},debounceTime:{type:Number,default:300,requied:!1},dataController:{type:Function,required:!1,default:void 0}},emits:["update:modelValue","item:click","update:selectedItems","endOfList"],setup(p,{expose:B,emit:D}){const a=p,c=D,f=d(!1),r=d(!1),u=d(a.modelValue),n=d([]),o=d(a.selectedItems),b=d(),v=d();R(async()=>{if(a.dataController){const t=await y(u.value);n.value=(t==null?void 0:t.data)||[]}else n.value=a.items});const O=H(()=>{var e;const t=(e=n.value)==null?void 0:e.map((l,i)=>({...l,text:l.label||l.text,check:o.value.some(s=>s.text?s.text===l.text:s.label===l.label),onClick:()=>{var s;if(a.multiple){const A=o.value.findIndex(g=>g.text?g.text===l.text:g.label===l.label);A!==-1?o.value=o.value.filter((g,U)=>U!==A):o.value.push({...l,check:!0}),u.value="",v.value=void 0,(s=b.value)==null||s.focus(),c("update:selectedItems",o.value)}else u.value=l.text||l.label||l.value||"";c("update:modelValue",l.text||l.label||l.value||""),c("item:click",i)}}));return a.multiple&&!a.disableSelectAll&&t.unshift({text:o.value.length===n.value.length?a.labelDeselectAll:a.labelSelectAll,check:!1,onClick:()=>{var l;o.value.length===n.value.length?o.value=[]:o.value=n.value,(l=b.value)==null||l.focus(),c("update:selectedItems",o.value)}}),t}),x=oe(async(t,e)=>{var l;return await((l=a.dataController)==null?void 0:l.call(a,t,e))}),y=ue(x,a.debounceTime),F=()=>x.cache.clear(),T=async()=>{var e;u.value=void 0,n.value=a.items,o.value=a.selectedItems;const t=await((e=a.dataController)==null?void 0:e.call(a,u.value));n.value=(t==null?void 0:t.data)||[]},$=()=>{n.value=[]},C=t=>{var e;((e=t.relatedTarget)==null?void 0:e.role)!=="option"&&(r.value?r.value=!1:r.value=!0)},z=({target:t})=>{t instanceof HTMLInputElement&&t.value.charAt(t.value.length-1)!==" "&&K(t.value)},I=(t,e)=>{o.value=o.value.filter(l=>l.text!==e.text),c("update:selectedItems",o.value)},K=async t=>{if(a.dataController){f.value=!0;const e=await y(t);r.value=!!e,f.value=!e,n.value=(e==null?void 0:e.data)||[]}else t?n.value=a.items.filter(e=>{var l;return(l=e.text)==null?void 0:l.toLowerCase().includes(t.toLowerCase())}):n.value=a.items;c("update:modelValue",t)},N=async t=>{if(a.dataController){f.value=!0;const e=await y(u.value,t);f.value=!e,n.value=(e==null?void 0:e.data)||[]}else n.value=a.items},h=t=>{var e,l;if(!u.value)if(o.value.length>0&&!v.value){const i=o.value.length-1;v.value=o.value[i],(e=document.getElementById(i.toString()))==null||e.focus()}else I(t,v.value),v.value=void 0,(l=b.value)==null||l.focus()},w=t=>{const e=t.currentTarget;e.scrollLeft+=t.deltaY,t.preventDefault()},P=t=>{a.multiple?r.value=!0:r.value=t};return B({resetAllAndFetch:T,clearCache:F,resetItems:$}),(t,e)=>(m(),k(se,Y(t.$attrs,{name:t.label,color:t.color,label:t.label,"error-message":a.errorMessage===!1?!1:a.errorMessage||t.errorMessage,"hidden-error-message":t.hiddenErrorMessage,"set-required-mark":j(le)([a.validation])}),{default:M(()=>[G(te,{items:O.value,multiple:p.multiple,"is-open":r.value,disabled:t.disabled,"onUpdate:isOpen":e[7]||(e[7]=l=>P(l)),onEndOfList:e[8]||(e[8]=l=>N({isEndOfList:!0}))},{anchor:M(()=>[S("div",re,[p.multiple?(m(),E("div",{key:0,name:"scrollable-container",class:"flex items-center gap-1 overflow-x-scroll no-scrollbar cursor-grab active:cursor-grabbing",onWheel:w},[(m(!0),E(J,null,Q(o.value,(l,i)=>(m(),k(ae,{id:i,key:i,text:l.text||l.label||"",class:"border flex-shrink-0 rounded-md px-3 py-2",onClick:s=>I(s,l),onKeydown:e[0]||(e[0]=q(s=>h(s),["backspace"]))},null,8,["id","text","onClick"]))),128))],32)):L("",!0),X(S("input",{ref_key:"inputField",ref:b,"onUpdate:modelValue":e[1]||(e[1]=l=>u.value=l),disabled:t.disabled,type:"text",class:Z(["border-none tex-tsm font-normal flex flex-1 focus:outline-none focus:ring-0",{"cursor-not-allowed":t.disabled}]),validation:t.validation,placeholder:p.placeholder,onInput:e[2]||(e[2]=l=>z(l)),onKeydown:e[3]||(e[3]=q(l=>h(l),["backspace"])),onClick:e[4]||(e[4]=V(l=>C(l),["prevent"])),onBlur:e[5]||(e[5]=V(l=>C(l),["prevent"])),onWheel:e[6]||(e[6]=l=>w(l))},null,42,ie),[[_,u.value]]),f.value?(m(),k(ne,{key:1,class:"mx-2",size:"normal"})):L("",!0)])]),_:1},8,["items","multiple","is-open","disabled"])]),_:1},16,["name","color","label","error-message","hidden-error-message","set-required-mark"]))}});export{ye as default};
|
|
2
2
|
//# sourceMappingURL=ElInputAutocomplete.vue.esm2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElInputAutocomplete.vue.esm2.js","sources":["../../../src/forms/ElInputAutocomplete.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type InputAutocompleteItemsDataControl = string;\nexport type ElInputAutocompleteItems = Array<DropdownItem & { label?: string; value?: string }>;\nexport type EventOptions = { isEndOfList: boolean };\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, onMounted, PropType, ref } from 'vue';\nimport { TextualValueType, withCommonElInputProps } from './input';\nimport ElDropdown, { DropdownItem } from '@/ElDropdown.vue';\nimport ElInputChip from '@/ElInputChip.vue';\nimport { useDebounceFn, useMemoize } from '@vueuse/core';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElInputContainer from './ElInputContainer.vue';\n\nconst props = defineProps({\n ...withCommonElInputProps(),\n modelValue: {\n type: [Array, String] as PropType<TextualValueType>,\n required: false,\n default: undefined,\n },\n placeholder: {\n type: String,\n default: '',\n required: false,\n },\n items: {\n type: Array as PropType<ElInputAutocompleteItems>,\n required: false,\n default: () => [],\n },\n selectedItems: {\n type: Array as PropType<ElInputAutocompleteItems>,\n default: () => [],\n },\n labelSelectAll: {\n type: String,\n default: 'Seleziona tutto',\n },\n labelDeselectAll: {\n type: String,\n default: 'Deseleziona tutto',\n },\n disableSelectAll: {\n type: Boolean,\n default: false,\n },\n focusOnMount: {\n type: Boolean,\n default: false,\n },\n multiple: {\n type: Boolean as PropType<InstanceType<typeof ElDropdown>['multiple']>,\n default: false,\n },\n debounceTime: {\n type: Number,\n default: 300,\n requied: false,\n },\n dataController: {\n type: Function as PropType<(args: TextualValueType, eventOptions?: EventOptions) => Promise<{ data: ElInputAutocompleteItems }>>,\n required: false,\n default: undefined,\n },\n});\n\nconst emit = defineEmits<{\n (event: 'update:modelValue', value: TextualValueType): void;\n (event: 'item:click', itemIndex: number): void;\n (event: 'update:selectedItems', value: ElInputAutocompleteItems): void;\n (event: 'endOfList'): void;\n}>();\n\nconst isLoading = ref(false);\nconst isOpen = ref(false);\nconst query = ref<TextualValueType>(props.modelValue);\nconst filteredItems = ref<ElInputAutocompleteItems>([]);\nconst selectedItems = ref<ElInputAutocompleteItems>(props.selectedItems);\nconst inputField = ref<HTMLInputElement>();\nconst lastSelectedItem = ref();\n\nonMounted(async () => {\n if (props.dataController) {\n const response = await debounceDataController(query.value);\n filteredItems.value = response?.data || [];\n } else {\n filteredItems.value = props.items;\n }\n});\n\nconst items = computed(() => {\n const mappedItems = filteredItems.value?.map((item, index) => ({\n ...item,\n text: item.label || item.text,\n check: selectedItems.value.some(selectedItem =>\n selectedItem.text ? selectedItem.text === item.text : selectedItem.label === item.label,\n ),\n onClick: () => {\n if (props.multiple) {\n // If the item is already selected, remove it from the selectedItems array\n const clickedItemIndex = selectedItems.value.findIndex(currentItem =>\n currentItem.text ? currentItem.text === item.text : currentItem.label === item.label,\n );\n\n if (clickedItemIndex !== -1) {\n selectedItems.value = selectedItems.value.filter((_, index) => index !== clickedItemIndex);\n } else {\n selectedItems.value.push({ ...item, check: true });\n }\n\n // Reset query to empty string to clear the input\n query.value = '';\n // Reset last selected item because the selectedItems array is updated\n lastSelectedItem.value = undefined;\n inputField.value?.focus();\n\n emit('update:selectedItems', selectedItems.value);\n } else {\n query.value = item.text || item.label || item.value || '';\n }\n\n emit('update:modelValue', item.text || item.label || item.value || '');\n emit('item:click', index);\n },\n }));\n\n if (props.multiple && !props.disableSelectAll) {\n mappedItems.unshift({\n text: selectedItems.value.length === filteredItems.value.length ? props.labelDeselectAll : props.labelSelectAll,\n check: false,\n onClick: () => {\n if (selectedItems.value.length === filteredItems.value.length) {\n selectedItems.value = [];\n } else {\n selectedItems.value = filteredItems.value;\n }\n\n inputField.value?.focus();\n emit('update:selectedItems', selectedItems.value);\n },\n });\n }\n\n return mappedItems;\n});\n\nconst debounceFunction = useMemoize(async (value: TextualValueType, eventOptions?: EventOptions) => {\n return await props.dataController?.(value, eventOptions);\n});\n\nconst debounceDataController = useDebounceFn(debounceFunction, props.debounceTime);\nconst clearCache = () => debounceFunction.cache.clear();\n\nconst resetAllAndFetch = async () => {\n query.value = undefined;\n filteredItems.value = props.items;\n selectedItems.value = props.selectedItems;\n const response = await props.dataController?.(query.value);\n filteredItems.value = response?.data || [];\n};\n\nconst resetItems = () => {\n filteredItems.value = [];\n};\n/**\n * Handle input click event necessary to open or close dropdown\n * @param e FocusEvent\n */\nconst onInputClick = (e: FocusEvent) => {\n if ((e.relatedTarget as HTMLElement)?.role !== 'option') {\n if (!isOpen.value) {\n isOpen.value = true;\n } else {\n isOpen.value = false;\n }\n }\n};\n\n/**\n * Handle input change event to update model value\n * @param event Event\n */\nconst onChangeEvent = ({ target }: Event) => {\n if (target instanceof HTMLInputElement) {\n if (target.value.charAt(target.value.length - 1) !== ' ') {\n updateModel(target.value);\n }\n }\n};\n\n/**\n * Handle remove item fr m selected items by clicking on the item\n * @param _event Event\n * @param item DropdownItem\n */\nconst onRemoveItem = (_event: Event, item: DropdownItem) => {\n selectedItems.value = selectedItems.value.filter(currentItem => currentItem.text !== item.text);\n emit('update:selectedItems', selectedItems.value);\n};\n\nconst updateModel = async (value: TextualValueType) => {\n if (props.dataController) {\n isLoading.value = true;\n const response = await debounceDataController(value);\n isOpen.value = !!response;\n isLoading.value = !response;\n filteredItems.value = response?.data || [];\n } else {\n if (value) {\n filteredItems.value = props.items.filter(result => result.text?.toLowerCase().includes(value.toLowerCase()));\n } else {\n filteredItems.value = props.items;\n }\n }\n\n emit('update:modelValue', value);\n};\nconst triggerEventOption = async (eventOptions: EventOptions) => {\n if (props.dataController) {\n isLoading.value = true;\n const response = await debounceDataController(query.value, eventOptions);\n isLoading.value = !response;\n\n filteredItems.value = response?.data || [];\n } else {\n filteredItems.value = props.items;\n }\n};\n\n/**\n Handle backspace key press to re last selected item wh multiple is true\n param e KeyboardEvent\n */\nconst onDeleteKeyPress = (e: KeyboardEvent) => {\n if (!query.value) {\n if (selectedItems.value.length > 0 && !lastSelectedItem.value) {\n const lastItemIndex = selectedItems.value.length - 1;\n lastSelectedItem.value = selectedItems.value[lastItemIndex];\n document.getElementById(lastItemIndex.toString())?.focus();\n } else {\n onRemoveItem(e, lastSelectedItem.value);\n lastSelectedItem.value = undefined;\n inputField.value?.focus();\n }\n }\n};\n\n/**\n Handle wheel sc event to scroll the li ox horizontally\n param event WheelEvent\n */\nconst onWheelScroll = (event: WheelEvent) => {\n const container = event.currentTarget as HTMLElement;\n container.scrollLeft += event.deltaY;\n // Prevent vertical scrolling he page\n event.preventDefault();\n};\n\n/**\n Handle update isOpen eve o open the dropdown n multiple is true\n param event boolean\n */\nconst onUpdateIsOpen = (event: boolean) => {\n if (props.multiple) {\n isOpen.value = true;\n } else {\n isOpen.value = event;\n }\n};\n\ndefineExpose({\n resetAllAndFetch,\n clearCache,\n resetItems,\n});\n</script>\n\n<template>\n <div class=\"flex flex-col gap-1\">\n <label class=\"text-sm font-semibold\" :class=\"{ 'text-error': errorMessage, 'text-neutral-darker': !errorMessage }\">\n {{ label }}\n </label>\n <ElDropdown\n :items=\"items\"\n :multiple=\"multiple\"\n :is-open=\"isOpen\"\n :disabled=\"disabled\"\n @update:is-open=\"onUpdateIsOpen($event)\"\n @end-of-list=\"triggerEventOption({ isEndOfList: true })\"\n >\n <template #anchor>\n <ElInputContainer :color=\"color\" :name=\"name\">\n <template #default>\n <div class=\"flex items-center gap-1 px-2\">\n <div\n v-if=\"multiple\"\n name=\"scrollable-container\"\n class=\"flex items-center gap-1 overflow-x-scroll no-scrollbar cursor-grab active:cursor-grabbing\"\n @wheel=\"onWheelScroll\"\n >\n <ElInputChip\n v-for=\"(item, index) in selectedItems\"\n :id=\"index\"\n :key=\"index\"\n :text=\"item.text || item.label || ''\"\n class=\"border flex-shrink-0 rounded-md px-3 py-2\"\n @click=\"onRemoveItem($event, item)\"\n @keydown.backspace=\"onDeleteKeyPress($event)\"\n />\n </div>\n\n <input\n ref=\"inputField\"\n v-model=\"query\"\n :disabled=\"disabled\"\n type=\"text\"\n class=\"border-none tex-tsm font-normal flex flex-1 focus:outline-none focus:ring-0\"\n :class=\"{ 'cursor-not-allowed': disabled }\"\n :validation=\"validation\"\n :placeholder=\"placeholder\"\n @input=\"onChangeEvent($event)\"\n @keydown.backspace=\"onDeleteKeyPress($event)\"\n @click.prevent=\"onInputClick($event)\"\n @blur.prevent=\"onInputClick($event)\"\n @wheel=\"onWheelScroll($event)\"\n />\n\n <ElSpinner v-if=\"isLoading\" class=\"mx-2\" size=\"normal\" />\n </div>\n </template>\n </ElInputContainer>\n </template>\n </ElDropdown>\n <div v-if=\"errorMessage\" class=\"text-xs font-normal text-error\">{{ errorMessage }}</div>\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","isLoading","ref","isOpen","query","filteredItems","selectedItems","inputField","lastSelectedItem","onMounted","response","debounceDataController","items","computed","mappedItems","_a","item","index","selectedItem","clickedItemIndex","currentItem","_","debounceFunction","useMemoize","value","eventOptions","useDebounceFn","clearCache","resetAllAndFetch","resetItems","onInputClick","e","onChangeEvent","target","updateModel","onRemoveItem","_event","result","triggerEventOption","onDeleteKeyPress","lastItemIndex","_b","onWheelScroll","event","container","onUpdateIsOpen","__expose"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ElInputAutocomplete.vue.esm2.js","sources":["../../../src/forms/ElInputAutocomplete.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type InputAutocompleteItemsDataControl = string;\nexport type ElInputAutocompleteItems = Array<DropdownItem & { label?: string; value?: string }>;\nexport type EventOptions = { isEndOfList: boolean };\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, onMounted, PropType, ref } from 'vue';\nimport { showRequiredMark, TextualValueType, withCommonElInputProps } from './input';\nimport ElDropdown, { DropdownItem } from '@/ElDropdown.vue';\nimport ElInputChip from '@/ElInputChip.vue';\nimport { useDebounceFn, useMemoize } from '@vueuse/core';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElInputContainer from './ElInputContainer.vue';\n\nconst props = defineProps({\n ...withCommonElInputProps(),\n modelValue: {\n type: [Array, String] as PropType<TextualValueType>,\n required: false,\n default: undefined,\n },\n placeholder: {\n type: String,\n default: '',\n required: false,\n },\n items: {\n type: Array as PropType<ElInputAutocompleteItems>,\n required: false,\n default: () => [],\n },\n selectedItems: {\n type: Array as PropType<ElInputAutocompleteItems>,\n default: () => [],\n },\n labelSelectAll: {\n type: String,\n default: 'Seleziona tutto',\n },\n labelDeselectAll: {\n type: String,\n default: 'Deseleziona tutto',\n },\n disableSelectAll: {\n type: Boolean,\n default: false,\n },\n focusOnMount: {\n type: Boolean,\n default: false,\n },\n multiple: {\n type: Boolean as PropType<InstanceType<typeof ElDropdown>['multiple']>,\n default: false,\n },\n debounceTime: {\n type: Number,\n default: 300,\n requied: false,\n },\n dataController: {\n type: Function as PropType<(args: TextualValueType, eventOptions?: EventOptions) => Promise<{ data: ElInputAutocompleteItems }>>,\n required: false,\n default: undefined,\n },\n});\n\nconst emit = defineEmits<{\n (event: 'update:modelValue', value: TextualValueType): void;\n (event: 'item:click', itemIndex: number): void;\n (event: 'update:selectedItems', value: ElInputAutocompleteItems): void;\n (event: 'endOfList'): void;\n}>();\n\nconst isLoading = ref(false);\nconst isOpen = ref(false);\nconst query = ref<TextualValueType>(props.modelValue);\nconst filteredItems = ref<ElInputAutocompleteItems>([]);\nconst selectedItems = ref<ElInputAutocompleteItems>(props.selectedItems);\nconst inputField = ref<HTMLInputElement>();\nconst lastSelectedItem = ref();\n\nonMounted(async () => {\n if (props.dataController) {\n const response = await debounceDataController(query.value);\n filteredItems.value = response?.data || [];\n } else {\n filteredItems.value = props.items;\n }\n});\n\nconst items = computed(() => {\n const mappedItems = filteredItems.value?.map((item, index) => ({\n ...item,\n text: item.label || item.text,\n check: selectedItems.value.some(selectedItem =>\n selectedItem.text ? selectedItem.text === item.text : selectedItem.label === item.label,\n ),\n onClick: () => {\n if (props.multiple) {\n // If the item is already selected, remove it from the selectedItems array\n const clickedItemIndex = selectedItems.value.findIndex(currentItem =>\n currentItem.text ? currentItem.text === item.text : currentItem.label === item.label,\n );\n\n if (clickedItemIndex !== -1) {\n selectedItems.value = selectedItems.value.filter((_, index) => index !== clickedItemIndex);\n } else {\n selectedItems.value.push({ ...item, check: true });\n }\n\n // Reset query to empty string to clear the input\n query.value = '';\n // Reset last selected item because the selectedItems array is updated\n lastSelectedItem.value = undefined;\n inputField.value?.focus();\n\n emit('update:selectedItems', selectedItems.value);\n } else {\n query.value = item.text || item.label || item.value || '';\n }\n\n emit('update:modelValue', item.text || item.label || item.value || '');\n emit('item:click', index);\n },\n }));\n\n if (props.multiple && !props.disableSelectAll) {\n mappedItems.unshift({\n text: selectedItems.value.length === filteredItems.value.length ? props.labelDeselectAll : props.labelSelectAll,\n check: false,\n onClick: () => {\n if (selectedItems.value.length === filteredItems.value.length) {\n selectedItems.value = [];\n } else {\n selectedItems.value = filteredItems.value;\n }\n\n inputField.value?.focus();\n emit('update:selectedItems', selectedItems.value);\n },\n });\n }\n\n return mappedItems;\n});\n\nconst debounceFunction = useMemoize(async (value: TextualValueType, eventOptions?: EventOptions) => {\n return await props.dataController?.(value, eventOptions);\n});\n\nconst debounceDataController = useDebounceFn(debounceFunction, props.debounceTime);\nconst clearCache = () => debounceFunction.cache.clear();\n\nconst resetAllAndFetch = async () => {\n query.value = undefined;\n filteredItems.value = props.items;\n selectedItems.value = props.selectedItems;\n const response = await props.dataController?.(query.value);\n filteredItems.value = response?.data || [];\n};\n\nconst resetItems = () => {\n filteredItems.value = [];\n};\n/**\n * Handle input click event necessary to open or close dropdown\n * @param e FocusEvent\n */\nconst onInputClick = (e: FocusEvent) => {\n if ((e.relatedTarget as HTMLElement)?.role !== 'option') {\n if (!isOpen.value) {\n isOpen.value = true;\n } else {\n isOpen.value = false;\n }\n }\n};\n\n/**\n * Handle input change event to update model value\n * @param event Event\n */\nconst onChangeEvent = ({ target }: Event) => {\n if (target instanceof HTMLInputElement) {\n if (target.value.charAt(target.value.length - 1) !== ' ') {\n updateModel(target.value);\n }\n }\n};\n\n/**\n * Handle remove item fr m selected items by clicking on the item\n * @param _event Event\n * @param item DropdownItem\n */\nconst onRemoveItem = (_event: Event, item: DropdownItem) => {\n selectedItems.value = selectedItems.value.filter(currentItem => currentItem.text !== item.text);\n emit('update:selectedItems', selectedItems.value);\n};\n\nconst updateModel = async (value: TextualValueType) => {\n if (props.dataController) {\n isLoading.value = true;\n const response = await debounceDataController(value);\n isOpen.value = !!response;\n isLoading.value = !response;\n filteredItems.value = response?.data || [];\n } else {\n if (value) {\n filteredItems.value = props.items.filter(result => result.text?.toLowerCase().includes(value.toLowerCase()));\n } else {\n filteredItems.value = props.items;\n }\n }\n\n emit('update:modelValue', value);\n};\nconst triggerEventOption = async (eventOptions: EventOptions) => {\n if (props.dataController) {\n isLoading.value = true;\n const response = await debounceDataController(query.value, eventOptions);\n isLoading.value = !response;\n\n filteredItems.value = response?.data || [];\n } else {\n filteredItems.value = props.items;\n }\n};\n\n/**\n Handle backspace key press to re last selected item wh multiple is true\n param e KeyboardEvent\n */\nconst onDeleteKeyPress = (e: KeyboardEvent) => {\n if (!query.value) {\n if (selectedItems.value.length > 0 && !lastSelectedItem.value) {\n const lastItemIndex = selectedItems.value.length - 1;\n lastSelectedItem.value = selectedItems.value[lastItemIndex];\n document.getElementById(lastItemIndex.toString())?.focus();\n } else {\n onRemoveItem(e, lastSelectedItem.value);\n lastSelectedItem.value = undefined;\n inputField.value?.focus();\n }\n }\n};\n\n/**\n Handle wheel sc event to scroll the li ox horizontally\n param event WheelEvent\n */\nconst onWheelScroll = (event: WheelEvent) => {\n const container = event.currentTarget as HTMLElement;\n container.scrollLeft += event.deltaY;\n // Prevent vertical scrolling he page\n event.preventDefault();\n};\n\n/**\n Handle update isOpen eve o open the dropdown n multiple is true\n param event boolean\n */\nconst onUpdateIsOpen = (event: boolean) => {\n if (props.multiple) {\n isOpen.value = true;\n } else {\n isOpen.value = event;\n }\n};\n\ndefineExpose({\n resetAllAndFetch,\n clearCache,\n resetItems,\n});\n</script>\n\n<template>\n <ElInputContainer\n v-bind=\"$attrs\"\n :name=\"label\"\n :color=\"color\"\n :label=\"label\"\n :error-message=\"props.errorMessage === false ? false : props.errorMessage || errorMessage\"\n :hidden-error-message=\"hiddenErrorMessage\"\n :set-required-mark=\"showRequiredMark([props.validation])\"\n >\n <ElDropdown\n :items=\"items\"\n :multiple=\"multiple\"\n :is-open=\"isOpen\"\n :disabled=\"disabled\"\n @update:is-open=\"onUpdateIsOpen($event)\"\n @end-of-list=\"triggerEventOption({ isEndOfList: true })\"\n >\n <template #anchor>\n <div class=\"flex items-center gap-1 px-2\">\n <div\n v-if=\"multiple\"\n name=\"scrollable-container\"\n class=\"flex items-center gap-1 overflow-x-scroll no-scrollbar cursor-grab active:cursor-grabbing\"\n @wheel=\"onWheelScroll\"\n >\n <ElInputChip\n v-for=\"(item, index) in selectedItems\"\n :id=\"index\"\n :key=\"index\"\n :text=\"item.text || item.label || ''\"\n class=\"border flex-shrink-0 rounded-md px-3 py-2\"\n @click=\"onRemoveItem($event, item)\"\n @keydown.backspace=\"onDeleteKeyPress($event)\"\n />\n </div>\n <input\n ref=\"inputField\"\n v-model=\"query\"\n :disabled=\"disabled\"\n type=\"text\"\n class=\"border-none tex-tsm font-normal flex flex-1 focus:outline-none focus:ring-0\"\n :class=\"{ 'cursor-not-allowed': disabled }\"\n :validation=\"validation\"\n :placeholder=\"placeholder\"\n @input=\"onChangeEvent($event)\"\n @keydown.backspace=\"onDeleteKeyPress($event)\"\n @click.prevent=\"onInputClick($event)\"\n @blur.prevent=\"onInputClick($event)\"\n @wheel=\"onWheelScroll($event)\"\n />\n <ElSpinner v-if=\"isLoading\" class=\"mx-2\" size=\"normal\" />\n </div>\n </template>\n </ElDropdown>\n </ElInputContainer>\n</template>\n"],"names":["props","__props","emit","__emit","isLoading","ref","isOpen","query","filteredItems","selectedItems","inputField","lastSelectedItem","onMounted","response","debounceDataController","items","computed","mappedItems","_a","item","index","selectedItem","clickedItemIndex","currentItem","_","debounceFunction","useMemoize","value","eventOptions","useDebounceFn","clearCache","resetAllAndFetch","resetItems","onInputClick","e","onChangeEvent","target","updateModel","onRemoveItem","_event","result","triggerEventOption","onDeleteKeyPress","lastItemIndex","_b","onWheelScroll","event","container","onUpdateIsOpen","__expose"],"mappings":"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"}
|