You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
7.3 KiB
1 line
7.3 KiB
11 months ago
|
{"version":3,"file":"useOption.mjs","sources":["../../../../../../packages/components/select/src/useOption.ts"],"sourcesContent":["import { inject, computed, getCurrentInstance, watch, toRaw, unref } from 'vue'\nimport { getValueByPath, escapeRegexpString } from '@element-plus/utils/util'\nimport { selectKey, selectGroupKey } from './token'\n\nimport type { Ref } from 'vue'\nimport type { QueryChangeCtx } from './token'\n\nexport function useOption(props, states) {\n // inject\n const select = inject(selectKey)\n const selectGroup = inject(selectGroupKey, { disabled: false })\n\n // computed\n const isObject = computed(() => {\n return (\n Object.prototype.toString.call(props.value).toLowerCase() ===\n '[object object]'\n )\n })\n\n const itemSelected = computed(() => {\n if (!select.props.multiple) {\n return isEqual(props.value, select.props.modelValue)\n } else {\n return contains(select.props.modelValue as unknown[], props.value)\n }\n })\n\n const limitReached = computed(() => {\n if (select.props.multiple) {\n const modelValue = (select.props.modelValue || []) as unknown[]\n return (\n !itemSelected.value &&\n modelValue.length >= select.props.multipleLimit &&\n select.props.multipleLimit > 0\n )\n } else {\n return false\n }\n })\n\n const currentLabel = computed(() => {\n return props.label || (isObject.value ? '' : props.value)\n })\n\n const currentValue = computed(() => {\n return props.value || props.label || ''\n })\n\n const isDisabled = computed(() => {\n return props.disabled || states.groupDisabled || limitReached.value\n })\n\n const instance = getCurrentInstance()\n\n const contains = (arr = [], target) => {\n if (!isObject.value) {\n return arr && arr.indexOf(target) > -1\n } else {\n const valueKey = select.props.valueKey\n return (\n arr &&\n arr.some((item) => {\n return (\n getValueByPath(item, valueKey) === getValueByPath(target, valueKey)\n )\n })\n )\n }\n }\n\n const isEqual = (a: unknown, b: unknown) => {\n if (!isObject.value) {\n return a === b\n } else {\n const { valueKey } = select.props\n return getValueByPath(a, valueKey) === getValueByPath(b, valueKey)\n }\n }\n\n const hoverItem = () => {\n if (!props.disabled && !selectGroup.disabled) {\n select.hoverIndex = select.optionsArray.indexOf(instance)\n }\n }\n\n watch(\n () => currentLabel.value,\n () => {\n if (!props.created && !select.props.remote) select.setSelected()\n }\n )\n\n watch(\n () => props.value,\n (val, oldVal) => {\n const { remote, valueKey } = select.props\n if (!props.created && !remote) {\n if (\n valueKey &&\n typeof val === 'object' &&\n typeof oldVal === 'object' &&\n val[valueKey] === oldVal[valueKey]\n ) {\n return\n }\n select.setSelected()\n }\n }\n )\n\n watch(\n () => selectGroup.disabled,\n () => {\n states.groupDisabled = selectGroup.disabled\n },\n { immediate: true }\n )\n\n const { queryChange } = toRaw(select)\n watch(queryChange, (changes: Ref<QueryChangeCtx>) => {\n const { query } = unref(changes)\n\n const regexp = new RegExp(escapeRegexpString(query), 'i')\n states.visible = regexp.test(currentLabel.value) || props.created\n if (!states.visible) {\n select.filteredOptionsCount--\n }\n })\n\n return {\n select,\n currentLabel,\n currentValue,\n itemSelected,\n isDisabled,\n hoverItem,\n }\n}\n"],"names":[],"mappings":";;;;AAGO,SAAS,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE;AACzC,EAAE,MAAM,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;AACnC,EAAE,MAAM,WAAW,GAAG,MAAM,CAAC,cAAc,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;AAClE,EAAE,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM;AAClC,IAAI,OAAO,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,KAAK,iBAAiB,CAAC;AAC3F,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAM;
|