various-ui/es/components/input/default/src/composable.mjs.map

This is a test version of the Vue 3 component library

{"version":3,"file":"composable.mjs","sources":["../../../../../../packages/components/input/default/src/composable.ts"],"sourcesContent":["//* 按需导入插件\r\nimport { SetupContext, nextTick, computed, inject, ref, reactive } from \"vue\";\r\n//* 组件属性\r\nimport { UiInputProps, UiInputEmits } from \"../index\";\r\n//* 公共属性\r\nimport { UiTypes, UiFormEmitterKey } from \"@various/constants\";\r\n//* 公共函数\r\nimport { node, utility, dispose, animations } from \"@various/utils\";\r\n\r\nexport const useComposable = (define: UiInputProps, emits: SetupContext<typeof UiInputEmits>[\"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    //* 节点\r\n    const nodes = {\r\n        main: ref<HTMLElement>(),\r\n        body: ref<HTMLElement>(),\r\n        container: ref<HTMLElement>(),\r\n    };\r\n\r\n    //* 工具函数\r\n    const utils = {\r\n        //* 候选框显示事件\r\n        show: () => {\r\n            //* 检测是否满足运行条件\r\n            if (refs.visible.value) return;\r\n            else {\r\n                //* 显示候选项列表\r\n                refs.visible.value = true;\r\n                //* 下一帧运行\r\n                nextTick(() => {\r\n                    //* 检测是否向下执行\r\n                    if (!nodes.container.value || !nodes.body.value) return;\r\n                    else {\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                                    offset: 8,\r\n                                    height: define.height,\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 methods = {\r\n        //* Input失去焦点事件\r\n        blur: (ev?: FocusEvent | Event) => {\r\n            //* 当ev不存在时, 触发Input失去焦点\r\n            if (!ev) return nodes.main.value?.blur();\r\n            else {\r\n                //* 隐藏候选项\r\n                refs.visible.value = false;\r\n\r\n                //* 触发blur回调\r\n                emits(\"blur\", ev);\r\n                //* 触发表单blur相关校验\r\n                emitter?.emit(define.name || \"\", \"blur\");\r\n                //* 注销观察者\r\n                vars.observer?.disconnect();\r\n            }\r\n        },\r\n\r\n        //* Input获取焦点事件\r\n        focus: (ev?: FocusEvent | Event) => {\r\n            //* 当ev不存在时, 触发Input获取焦点\r\n            if (!ev) return nodes.main.value?.focus();\r\n            else {\r\n                //* 显示候选项\r\n                utils.show();\r\n\r\n                //* 触发focus回调\r\n                emits(\"focus\", ev);\r\n            }\r\n        },\r\n\r\n        //* 清空事件\r\n        clear: () => {\r\n            emits(\"update:modelValue\", \"\");\r\n            emits(\"clear\");\r\n            if (emitter?.emit) {\r\n                emitter.emit(define.name || \"\", \"change\");\r\n            }\r\n        },\r\n\r\n        //* Input触发input事件\r\n        input: (ev: InputEvent | Event) => {\r\n            //* 获取Target对象\r\n            const target = ev.target as HTMLInputElement;\r\n\r\n            //* 显示候选项窗口, 针对某些情况下提前隐藏候选项, 但触发input时候选项需要显示的场景\r\n            utils.show();\r\n\r\n            //* 触发v-model变更和input回调\r\n            emits(\"update:modelValue\", target.value);\r\n            emits(\"input\", ev as InputEvent);\r\n        },\r\n\r\n        //* Input触发回车事件\r\n        enter: (ev: KeyboardEvent | Event) => {\r\n            emits(\"enter\", ev);\r\n        },\r\n\r\n        //* Input触发change事件\r\n        change: (ev: Event) => {\r\n            //* 触发change回调\r\n            emits(\"change\", ev);\r\n            //* 触发表单change相关校验\r\n            emitter?.emit(define.name || \"\", \"change\");\r\n        },\r\n    };\r\n\r\n    //* 计算属性\r\n    const computeds = {\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            //* 判断是否需要添加size类名\r\n            if (define.size != \"default\") className.push(`ui-${define.size}`);\r\n            //* 判断是否需要添加clearable类名\r\n            if (define.clearable) className.push(\"ui-clearable\");\r\n            //* 判断候选项是否处于展示状态\r\n            if (refs.visible.value && define.candidates?.length) className.push(\"ui-form-selector\");\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                type: define.type,\r\n                disabled: computeds.disabled.value,\r\n                readonly: define.readonly,\r\n                maxlength: define.maxlength,\r\n                placeholder: define.placeholder,\r\n                autocomplete: define.autocomplete,\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        main: {\r\n            change: methods.change,\r\n            focus: methods.focus,\r\n            input: methods.input,\r\n            blur: methods.blur,\r\n        },\r\n\r\n        //* 候选项\r\n        candidate: (option: UiTypes.candidate) => {\r\n            return {\r\n                mousedown: (ev: Event) => {\r\n                    emits(\"update:modelValue\", option.value);\r\n                    emits(\"select\", ev, option);\r\n                    emits(\"change\", ev);\r\n                    if (emitter?.emit) {\r\n                        emitter.emit(define.name || \"\", \"change\");\r\n                    }\r\n                },\r\n            };\r\n        },\r\n\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    return { ons, vars, refs, binds, nodes, methods, computeds, animations };\r\n};\r\n"],"names":["node.append","_a","dispose.boundary.relativeContainerBody","utility.isNumber","animations.selector","animations"],"mappings":"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"}