ivue-material-plus
Version:
A high quality UI components Library with Vue.js
1 lines • 3.4 kB
Source Map (JSON)
{"version":3,"file":"option-group.mjs","sources":["../../../../../src/components/ivue-select/option-group.vue"],"sourcesContent":["<template>\r\n <ul :class=\"[`${prefixCls}-wrap`]\" v-show=\"visible\">\r\n <!-- 标题 -->\r\n <li :class=\"[`${prefixCls}-title`]\">{{ label }}</li>\r\n <!-- 选项 -->\r\n <ul>\r\n <li :class=\"[`${prefixCls}`]\" ref=\"list\">\r\n <slot></slot>\r\n </li>\r\n </ul>\r\n </ul>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport {\r\n defineComponent,\r\n provide,\r\n reactive,\r\n toRefs,\r\n inject,\r\n ref,\r\n nextTick,\r\n} from 'vue';\r\n\r\n// type\r\nimport { SelectContextKey } from './types/select';\r\nimport { Props, SelectGroupContextKey } from './types/option-group';\r\n\r\nconst prefixCls = 'ivue-select-group';\r\n\r\nexport default defineComponent({\r\n name: 'ivue-option-group',\r\n props: {\r\n /**\r\n * 选项group标题\r\n *\r\n * @type {String}\r\n */\r\n label: {\r\n type: String,\r\n default: '',\r\n },\r\n /**\r\n * 是否禁用当选项\r\n *\r\n * @type {Boolean}\r\n */\r\n disabled: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n },\r\n setup(props: Props) {\r\n // inject\r\n const select = inject(SelectContextKey);\r\n\r\n // dom\r\n const list = ref<HTMLElement>(null);\r\n\r\n // 显示\r\n const visible = ref<boolean>(true);\r\n\r\n // methods\r\n const queryChange = () => {\r\n if (select.props.filterable) {\r\n if (select.props.filterableHiddenGroup) {\r\n setTimeout(() => {\r\n const children = list.value.children;\r\n\r\n visible.value = [...children].some((option: HTMLElement) => {\r\n const visible = option.dataset.visible;\r\n const _select = option.dataset.select;\r\n\r\n // 是否是选项组件\r\n if (_select) {\r\n // 当前选项是否显示\r\n return visible === 'true';\r\n }\r\n });\r\n });\r\n } else {\r\n nextTick(() => {\r\n visible.value = select?.options?.some((option) => {\r\n return option.data.visible === true;\r\n });\r\n });\r\n }\r\n }\r\n };\r\n\r\n // provide\r\n provide(\r\n SelectGroupContextKey,\r\n reactive({\r\n ...toRefs(props),\r\n })\r\n );\r\n\r\n // queryChange: queryChange\r\n\r\n select.selectEmitter.on('ivueOptionGroupQueryChange', queryChange);\r\n\r\n return {\r\n prefixCls,\r\n\r\n // dom\r\n list,\r\n\r\n // ref\r\n visible,\r\n };\r\n },\r\n});\r\n</script>\r\n"],"names":["_normalizeClass","_createCommentVNode","_createElementVNode","_toDisplayString"],"mappings":";;;;AACY,SAAA,YAAA,IAAA,EAAA,MAAA,EAAM,MAAS,EAAA,MAAA,EAAA,OAAA,QAAA,EAAA;;IACvB,OAAWA,cAAA,CAAA,CAAA,CAAA,EAAA,IAAA,CAAA,gBAAA,CAAA,CAAA;AAAA,GACX,EAAA;AAAA,IAAUC,mBAAA,gBAAA,CAAA;AAAA,IAA6BC,mBAAA,IAAA,EAAA;AAAA,MACvC,OAAWF,cAAA,CAAA,CAAA,CAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,CAAA;AAAA,KAKN,EAAAG,eAAA,CAAA,IAAA,CAAA,KAAA,GAAA,CAAA,CAAA;AAAA,IAAAF,mBAHH,gBAEK,CAAA;AAAA,IAAAC,kBAAA,CAFK,MAAM,IAAA,EAAA;AAAA,MAAwBA,mBAAA,IAAA,EAAA;AAAA,QAAA,OAAAF,cAAA,CAAA,CAAA,CAAA,EAAA,IAAA,CAAA,WAAA,CAAA,CAAA;AAAA,QACtC,GAAA,EAAA,MAAA;AAAA,OAAA,EAAA;AAAA;;;;;;;;;;;"}