various-ui
Version:
This is a test version of the Vue 3 component library
82 lines (79 loc) • 2.71 kB
JavaScript
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