UNPKG

various-ui

Version:

This is a test version of the Vue 3 component library

1 lines 13.2 kB
{"version":3,"file":"composable.mjs","sources":["../../../../../../packages/components/select/default/src/composable.ts"],"sourcesContent":["//* 按需导入插件\r\nimport { SetupContext, nextTick, reactive, computed, inject, ref } from \"vue\";\r\n//* 组件属性\r\nimport { UiSelectProps, UiSelectEmits } from \"../index\";\r\n//* 公共属性\r\nimport { UiFormEmitterKey, UiTypes } from \"@various/constants\";\r\n//* 公共函数\r\nimport { node, utility, dispose, animations } from \"@various/utils\";\r\n\r\nexport const useComposable = (define: UiSelectProps, emits: SetupContext<typeof UiSelectEmits>[\"emit\"]) => {\r\n //* 初始化mitt\r\n const emitter = inject(UiFormEmitterKey, undefined);\r\n\r\n //* 静态变量\r\n const vars = {\r\n observer: <ResizeObserver | undefined>undefined,\r\n };\r\n\r\n //* 响应式变量\r\n const refs = {\r\n visible: ref<boolean>(false),\r\n };\r\n\r\n const nodes = {\r\n body: ref<HTMLElement>(),\r\n container: ref<HTMLElement>(),\r\n };\r\n\r\n //* 函数列表\r\n const methods = {\r\n //* 候选框隐藏事件\r\n hidden: (ev?: Event) => {\r\n if (!nodes.container.value) return;\r\n if (ev?.target && node.includes(ev.target as HTMLElement, nodes.container.value)) return;\r\n else {\r\n //* 状态更新\r\n refs.visible.value = false;\r\n //* 注销观察者\r\n vars.observer?.disconnect();\r\n }\r\n },\r\n\r\n //* 选择器清空事件\r\n clear: () => {\r\n emits(\"update:modelValue\", \"\");\r\n emits(\"clear\", \"clear\");\r\n if (emitter?.emit) {\r\n emitter.emit(define.name || \"\", \"change\");\r\n }\r\n },\r\n\r\n //* 候选框显示事件\r\n show: () => {\r\n //* 判断选择框是否处于异常状态\r\n if (define.readonly || define.disabled || define.loading) return;\r\n //* 判断候选项是否已被激活\r\n if (refs.visible.value) {\r\n methods.hidden();\r\n } else {\r\n refs.visible.value = true;\r\n nextTick(() => {\r\n if (!nodes.container.value || !nodes.body.value) return;\r\n else {\r\n //* 隐藏事件\r\n addEventListener(\"click\", methods.hidden, { capture: true, once: true });\r\n //* 将内容添加到视图容器中\r\n node.append(document.body, nodes.body.value);\r\n //* 注册观察者\r\n vars.observer?.disconnect();\r\n vars.observer = new ResizeObserver(() => {\r\n if (!nodes.container.value || !nodes.body.value) return;\r\n else {\r\n //* 数据初始化\r\n const data = { container: nodes.container.value, view: nodes.body.value };\r\n const width = nodes.container.value?.offsetWidth || 0;\r\n dispose.boundary.relativeContainerBody(data, {\r\n direction: \"bottom\",\r\n height: define.height,\r\n offset: 8,\r\n width: { min: width, max: define.widthExtra },\r\n align: \"start\",\r\n });\r\n }\r\n });\r\n\r\n vars.observer.observe(document.documentElement);\r\n }\r\n });\r\n }\r\n },\r\n };\r\n\r\n //* 计算属性\r\n const computeds = {\r\n //* 组件值\r\n value: computed(() => {\r\n if (define.resolve) return define.resolve();\r\n else {\r\n return define.candidates.find((candidate) => candidate.value == define.modelValue)?.label || \"\";\r\n }\r\n }),\r\n\r\n //* 禁用状态\r\n disabled: computed(() => define.loading || define.disabled),\r\n\r\n //* 组件类\r\n className: computed(() => {\r\n //* 初始化数据\r\n const className: string[] = [];\r\n //* 判断候选项是否处于展示状态\r\n if (refs.visible.value && define.candidates?.length) className.push(\"ui-form-selector\");\r\n //* 判断是否需要添加clearable类名\r\n if (define.clearable) className.push(\"ui-clearable\");\r\n //* 判断是否需要添加size类名\r\n if (define.size != \"default\") className.push(`ui-${define.size}`);\r\n //* 判断是否是禁用或只读状态\r\n if (define.loading) className.push(\"ui-loading-status\");\r\n else if (define.disabled) className.push(\"ui-disabled-status\");\r\n else if (define.readonly) {\r\n className.push(\"ui-readonly-status\");\r\n }\r\n\r\n return className.join(\" \");\r\n }),\r\n };\r\n\r\n //* 属性\r\n const binds = reactive({\r\n //* 主体\r\n main: computed(() => {\r\n return {\r\n value: computeds.value.value,\r\n disabled: computeds.disabled.value,\r\n placeholder: define.placeholder,\r\n autocomplete: \"off\",\r\n };\r\n }),\r\n\r\n //* 候选项容器\r\n body: computed(() => {\r\n return {\r\n class: define.classExtraName || \"\",\r\n style: {\r\n zIndex: define.zIndex,\r\n },\r\n };\r\n }),\r\n\r\n //* 容器\r\n container: computed(() => {\r\n return {\r\n class: computeds.className.value,\r\n style: {\r\n width: utility.isNumber(define.width) ? define.width + \"px\" : define.width,\r\n },\r\n };\r\n }),\r\n\r\n //* 候选项列表\r\n candidates: computed(() => {\r\n return {\r\n style: {\r\n maxHeight: define.height + \"px\",\r\n },\r\n };\r\n }),\r\n });\r\n\r\n //* 响应事件\r\n const ons = {\r\n //* 候选项容器事件\r\n animation: animations.selector(define.animation, {\r\n beforeEnter: () => emits(\"before-enter\"),\r\n beforeLeave: () => emits(\"before-leave\"),\r\n afterEnter: () => emits(\"after-enter\"),\r\n afterLeave: () => emits(\"after-leave\"),\r\n }),\r\n\r\n //* 候选项事件\r\n candidate: (option: UiTypes.candidate) => {\r\n return {\r\n //* 候选项选择事件\r\n mousedown: (ev: Event) => {\r\n emits(\"update:modelValue\", option.value);\r\n emits(\"change\", ev);\r\n emitter?.emit(define.name || \"\", \"change\");\r\n if (refs.visible.value) {\r\n methods.hidden();\r\n }\r\n },\r\n };\r\n },\r\n };\r\n\r\n return { ons, vars, refs, nodes, binds, methods, computeds, animations };\r\n};\r\n"],"names":["node.includes","node.append","_a","dispose.boundary.relativeContainerBody","utility.isNumber","animations.selector","animations"],"mappings":"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"}