UNPKG

various-ui

Version:

This is a test version of the Vue 3 component library

82 lines (79 loc) 2.71 kB
import { inject, ref, computed } from 'vue'; import '../../../../utils/index.mjs'; import { UiFormEmitterKey } from '../../../../constants/index.mjs'; import { isNumber } from 'lodash-es'; const useComposable = (define, emits) => { const emitter = inject(UiFormEmitterKey, void 0); const refs = { active: ref(false) }; const status = computed(() => { if (define.loading) { return { is: true, name: "loading" }; } else if (define.disabled) { return { is: false, name: "disabled" }; } else if (define.readonly) { return { is: false, name: "readonly" }; } else { return { is: false, name: "default" }; } }); const methods = { //* 清空事件 clear: () => { emits("update:modelValue", { start: "", end: "" }); emits("clear", "clear"); emitter == null ? void 0 : emitter.emit(define.name || "", "change"); } }; const handlers = { mainHandler: { change: (ev) => { emits("change", ev); emitter == null ? void 0 : emitter.emit(define.name || "", "change"); }, input: (ev) => emits("input", ev), focus: (ev) => { refs.active.value = true; emits("focus", ev); }, blur: (ev) => { refs.active.value = false; emits("blur", ev); emitter == null ? void 0 : emitter.emit(define.name || "", "blur"); } } }; const computeds = { //* 标签属性 attrs: computed(() => { var _a, _b; const isDisabled = ["disabled", "loading"].includes(status.value.name); const isReadonly = status.value.name == "readonly"; return { start: { disabled: isDisabled, readonly: isReadonly, placeholder: (_a = define.placeholder) == null ? void 0 : _a.start }, end: { disabled: isDisabled, readonly: isReadonly, placeholder: (_b = define.placeholder) == null ? void 0 : _b.end } }; }), //* 样式属性 style: computed(() => { if (isNumber(define.width)) return { width: define.width + "px" }; else { return { width: define.width }; } }), //* 标签类名 className: computed(() => { const result = []; if (status.value.name == "disabled") result.push("ui-disabled-status"); else if (status.value.name == "readonly") result.push("ui-readonly-status"); else if (status.value.name == "loading") result.push("ui-loading-status"); if (define.size != "default") result.push(`ui-${define.size}`); if (refs.active.value) result.push("ui-active"); return result.join(" "); }) }; return { refs, status, methods, handlers, computeds }; }; export { useComposable }; //# sourceMappingURL=composable.mjs.map