various-ui
Version:
This is a test version of the Vue 3 component library
208 lines (204 loc) • 7.48 kB
JavaScript
;
var vue = require('vue');
var index = require('../../../constants/index.js');
require('../../../utils/index.js');
require('../components/date/index.vue.js');
require('../components/month/index.vue.js');
var index_vue_vue_type_script_setup_true_lang = require('../components/month/index.vue2.js');
var index_vue_vue_type_script_setup_true_lang$1 = require('../components/date/index.vue2.js');
var index$1 = require('../../../utils/src/node/index.js');
var relativeContainerBody = require('../../../utils/src/dispose/boundary/src/relativeContainerBody.js');
var lodashEs = require('lodash-es');
var index$2 = require('../../../utils/src/animation/index.js');
const useComposable = (define, emits) => {
const emitter = vue.inject(index.UiFormEmitterKey, void 0);
const vars = {
observer: void 0
};
const refs = {
date: vue.ref(),
//* 临时的日期对象
mode: vue.ref(define.mode),
//* 临时的窗口类型
visible: vue.ref(false)
//* 控制变量
};
const nodes = {
components: vue.ref(),
//* 候选项组件节点
container: vue.ref(),
//* 时间选择器节点
body: vue.ref()
//* 候选项容器节点
};
const analyzes = {
//* 输入框的日期解析
analyzeDate: vue.computed(() => {
const date = new Date(refs.date.value || define.modelValue || "");
if (date.toString() == "Invalid Date") {
return /* @__PURE__ */ new Date();
} else {
return date;
}
}),
//* 解析当前组件
analyzeComponent: vue.computed(() => {
const mode = refs.mode.value || define.mode;
if (mode == "month") return index_vue_vue_type_script_setup_true_lang.default;
else {
return index_vue_vue_type_script_setup_true_lang$1.default;
}
})
};
const methods = {
//* 显示函数
show: () => {
if (refs.visible.value) return methods.hidden();
refs.mode.value = define.mode;
refs.visible.value = true;
vue.nextTick(() => {
var _a;
const data = { date: analyzes.analyzeDate.value, realityDate: new Date(define.modelValue || "") };
(_a = nodes.components.value) == null ? void 0 : _a.init(data, define.disabled);
vue.nextTick(() => {
var _a2;
if (!nodes.container.value || !nodes.body.value) return;
else {
index$1.append(document.body, nodes.body.value);
window.addEventListener("click", methods.hidden, { capture: true, once: true });
(_a2 = vars.observer) == null ? void 0 : _a2.disconnect();
vars.observer = new ResizeObserver(() => {
if (!nodes.container.value || !nodes.body.value) return;
else {
const data2 = { container: nodes.container.value, view: nodes.body.value };
relativeContainerBody.relativeContainerBody(data2, {
direction: "bottom",
offset: 8,
align: "center"
});
}
});
vars.observer.observe(document.documentElement);
}
});
});
},
//* 清空函数
clear: () => {
emits("update:modelValue", "");
emits("clear");
if (emitter == null ? void 0 : emitter.emit) {
emitter.emit(define.name || "", "change");
}
methods.hidden();
},
//* 隐藏函数
hidden: (ev) => {
var _a;
if (!nodes.container.value || !nodes.body.value) return;
const target = ev == null ? void 0 : ev.target;
if (target && (index$1.includes(target, nodes.container.value) || index$1.includes(target, nodes.body.value))) return;
else {
(_a = vars.observer) == null ? void 0 : _a.disconnect();
refs.visible.value = false;
}
},
//* 响应候选窗口更新事件
update: (mode, data) => {
lodashEs.isNumber(data.day) && analyzes.analyzeDate.value.setDate(data.day);
lodashEs.isNumber(data.year) && analyzes.analyzeDate.value.setFullYear(data.year);
lodashEs.isNumber(data.month) && analyzes.analyzeDate.value.setMonth(data.month);
refs.mode.value = mode;
vue.nextTick(() => {
var _a;
const data2 = { date: analyzes.analyzeDate.value, realityDate: new Date(define.modelValue || "") };
(_a = nodes.components.value) == null ? void 0 : _a.init(data2, define.disabled);
vue.nextTick(() => {
if (!nodes.container.value || !nodes.body.value) return;
else {
window.addEventListener("click", methods.hidden, { capture: true, once: false });
const data3 = { container: nodes.container.value, view: nodes.body.value };
relativeContainerBody.relativeContainerBody(data3, {
direction: "bottom",
offset: 8,
align: "center"
});
}
});
});
},
//* 响应候选窗口选择事件
change: (data) => {
lodashEs.isNumber(data.day) && analyzes.analyzeDate.value.setDate(data.day);
lodashEs.isNumber(data.year) && analyzes.analyzeDate.value.setFullYear(data.year);
lodashEs.isNumber(data.month) && analyzes.analyzeDate.value.setMonth(data.month);
if (define.mode == refs.mode.value) {
const cYear = analyzes.analyzeDate.value.getFullYear();
const cDate = analyzes.analyzeDate.value.getDate().toString().padStart(2, "0");
const cMonth = (analyzes.analyzeDate.value.getMonth() + 1).toString().padStart(2, "0");
if (define.mode == "month") emits("update:modelValue", `${cYear}-${cMonth}`);
else {
emits("update:modelValue", `${cYear}-${cMonth}-${cDate}`);
}
emits("change", analyzes.analyzeDate.value);
if (emitter == null ? void 0 : emitter.emit) {
emitter.emit(define.name || "", "change");
}
methods.hidden();
} else {
methods.update(define.mode, {});
}
}
};
const computeds = {
//* 组件值
value: vue.computed(() => define.modelValue),
//* 组件类
className: vue.computed(() => {
const className = [];
if (define.size != "default") className.push(`ui-${define.size}`);
if (define.modelValue) className.push(`ui-clearable`);
if (refs.visible.value) className.push("ui-active");
return className.join(" ");
})
};
const binds = vue.reactive({
//* 主体
main: vue.computed(() => {
return {
value: computeds.value.value,
placeholder: define.placeholder
};
}),
//* 候选项容器
body: vue.computed(() => {
return {
class: define.classExtraName || "",
style: {
zIndex: define.zIndex
}
};
}),
//* 容器
container: vue.computed(() => {
return {
class: computeds.className.value,
style: {
width: lodashEs.isNumber(define.width) ? define.width + "px" : define.width
}
};
})
});
const ons = {
//* 候选项
candidates: index$2.selector(define.animation, {
beforeEnter: () => emits("before-enter"),
beforeLeave: () => emits("before-leave"),
afterEnter: () => emits("after-enter"),
afterLeave: () => emits("after-leave")
})
};
return { ons, vars, refs, nodes, binds, methods, analyzes, animations: index$2 };
};
exports.useComposable = useComposable;
//# sourceMappingURL=composable.js.map