various-ui
Version:
This is a test version of the Vue 3 component library
219 lines (215 loc) • 8.13 kB
JavaScript
;
var vue = require('vue');
require('../../../utils/index.js');
var index = require('../../../constants/index.js');
var utils = require('./utils.js');
require('../components/time/index.vue.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/time/index.vue2.js');
var index_vue_vue_type_script_setup_true_lang$2 = 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 = {
end: vue.ref(utils.analyzes.date(define.modelValue.end)),
date: vue.ref(utils.analyzes.date(define.modelValue.start) || utils.analyzes.date(define.modelValue.end) || /* @__PURE__ */ new Date()),
mode: vue.ref(define.mode),
//* 窗口类型
start: vue.ref(utils.analyzes.date(define.modelValue.start)),
visible: vue.ref(false)
};
const nodes = {
container: vue.ref(),
//* 时间选择器节点
candidates: vue.ref(),
//* 候选项容器节点
components: vue.ref()
//* 候选项组件节点
};
const computeds = {
//* 组件类
className: vue.computed(() => refs.visible.value ? "ui-active" : ""),
view: vue.computed(() => {
if (refs.mode.value == "month") return index_vue_vue_type_script_setup_true_lang.default;
else if (refs.mode.value == "time") return index_vue_vue_type_script_setup_true_lang$1.default;
else {
return index_vue_vue_type_script_setup_true_lang$2.default;
}
})
};
const methods = {
//* 显示函数
show: (ev) => {
var _a;
if (refs.visible.value) {
if (refs.mode.value != "time") return methods.hidden();
else {
return (_a = nodes.components.value) == null ? void 0 : _a.init({ end: refs.end.value, date: refs.date.value, start: refs.start.value, event: ev });
}
} else {
refs.visible.value = true;
refs.mode.value = define.mode;
vue.nextTick(() => {
var _a2;
(_a2 = nodes.components.value) == null ? void 0 : _a2.init({ end: define.modelValue.end, date: refs.date.value, start: define.modelValue.start, event: ev });
vue.nextTick(() => {
var _a3;
if (!nodes.container.value || !nodes.candidates.value) return;
else {
index$1.append(document.body, nodes.candidates.value);
window.addEventListener("click", methods.hidden, { capture: true, once: true });
(_a3 = vars.observer) == null ? void 0 : _a3.disconnect();
vars.observer = new ResizeObserver(() => {
if (!nodes.container.value || !nodes.candidates.value) return;
else {
const data = { container: nodes.container.value, view: nodes.candidates.value };
relativeContainerBody.relativeContainerBody(data, {
direction: "bottom",
offset: 8,
align: "center"
});
}
});
vars.observer.observe(document.documentElement);
}
});
});
}
},
//* 隐藏函数
hidden: (ev) => {
var _a;
if (!nodes.container.value || !nodes.candidates.value) return;
else {
const target = ev == null ? void 0 : ev.target;
if (target && (index$1.includes(target, nodes.container.value) || index$1.includes(target, nodes.candidates.value))) {
return window.addEventListener("click", methods.hidden, { capture: true, once: true });
} else {
refs.visible.value = false;
refs.start.value = utils.analyzes.date(define.modelValue.start);
refs.end.value = utils.analyzes.date(define.modelValue.end);
(_a = vars.observer) == null ? void 0 : _a.disconnect();
emitter == null ? void 0 : emitter.emit(define.name, "blur");
}
}
}
};
const watchs = {
stop_watch: vue.watch(
() => define.modelValue,
() => {
refs.end.value = utils.analyzes.date(define.modelValue.end);
refs.start.value = utils.analyzes.date(define.modelValue.start);
refs.date.value = utils.analyzes.date(define.modelValue.start) || utils.analyzes.date(define.modelValue.end) || /* @__PURE__ */ new Date();
}
)
};
const binds = vue.reactive({
end: vue.computed(() => {
return {
placeholder: define.placeholder.end,
value: utils.analyzes.string(define.mode, refs.end.value)
};
}),
start: vue.computed(() => {
return {
placeholder: define.placeholder.start,
value: utils.analyzes.string(define.mode, refs.start.value)
};
}),
//* 容器
container: vue.computed(() => {
return {
class: computeds.className.value,
style: {
width: lodashEs.isNumber(define.width) ? define.width + "px" : define.width
}
};
}),
//* 候选项容器
candidates: vue.computed(() => {
return {
class: define.classExtraName || "",
style: {
zIndex: define.zIndex
}
};
})
});
const ons = {
//* 候选项
candidates: index$2.selector(true, {
beforeEnter: () => emits("before-enter"),
beforeLeave: () => emits("before-leave"),
afterEnter: () => emits("after-enter"),
afterLeave: () => emits("after-leave")
}),
//* 组件
components: {
//* 数据更新
change: (data) => {
refs.end.value = data.end;
refs.start.value = data.start;
emits("update:modelValue", data);
emitter == null ? void 0 : emitter.emit(define.name, "change");
vue.nextTick(() => {
if (define.modelValue.start && define.modelValue.end) {
methods.hidden();
}
});
},
//* 状态更新
update: (data) => {
var _a;
if (data.year != void 0) refs.date.value.setFullYear(data.year);
if (data.month != void 0) {
refs.date.value.setMonth(data.month);
}
(_a = nodes.components.value) == null ? void 0 : _a.update(refs.date.value);
},
//* 提示更新
message: (data) => {
refs.start.value = data.start;
refs.end.value = data.end;
},
//* 模式切换
switchover: (mode) => {
if (mode == "auto") refs.mode.value = define.mode;
else {
refs.mode.value = mode;
}
vue.nextTick(() => {
var _a, _b;
if (refs.mode.value == "time") {
(_a = nodes.components.value) == null ? void 0 : _a.init({ end: refs.end.value, date: refs.date.value, start: refs.start.value });
} else {
(_b = nodes.components.value) == null ? void 0 : _b.init({ end: define.modelValue.end, date: refs.date.value, start: define.modelValue.start });
}
vue.nextTick(() => {
if (!nodes.container.value || !nodes.candidates.value) return;
else {
window.addEventListener("click", methods.hidden, { capture: true, once: false });
const data = { container: nodes.container.value, view: nodes.candidates.value };
relativeContainerBody.relativeContainerBody(data, {
direction: "bottom",
offset: 8,
align: "center"
});
}
});
});
}
}
};
return { ons, vars, refs, nodes, binds, watchs, methods, computeds };
};
exports.useComposable = useComposable;
//# sourceMappingURL=composable.js.map