various-ui
Version:
This is a test version of the Vue 3 component library
217 lines (214 loc) • 7.71 kB
JavaScript
import { inject, ref, computed, nextTick, watch, reactive } from 'vue';
import '../../../utils/index.mjs';
import { UiFormEmitterKey } from '../../../constants/index.mjs';
import { analyzes } from './utils.mjs';
import '../components/time/index.vue.mjs';
import '../components/date/index.vue.mjs';
import '../components/month/index.vue.mjs';
import _sfc_main from '../components/month/index.vue2.mjs';
import _sfc_main$1 from '../components/time/index.vue2.mjs';
import _sfc_main$2 from '../components/date/index.vue2.mjs';
import { append, includes } from '../../../utils/src/node/index.mjs';
import { relativeContainerBody } from '../../../utils/src/dispose/boundary/src/relativeContainerBody.mjs';
import { isNumber } from 'lodash-es';
import { selector } from '../../../utils/src/animation/index.mjs';
const useComposable = (define, emits) => {
const emitter = inject(UiFormEmitterKey, void 0);
const vars = {
observer: void 0
};
const refs = {
end: ref(analyzes.date(define.modelValue.end)),
date: ref(analyzes.date(define.modelValue.start) || analyzes.date(define.modelValue.end) || /* @__PURE__ */ new Date()),
mode: ref(define.mode),
//* 窗口类型
start: ref(analyzes.date(define.modelValue.start)),
visible: ref(false)
};
const nodes = {
container: ref(),
//* 时间选择器节点
candidates: ref(),
//* 候选项容器节点
components: ref()
//* 候选项组件节点
};
const computeds = {
//* 组件类
className: computed(() => refs.visible.value ? "ui-active" : ""),
view: computed(() => {
if (refs.mode.value == "month") return _sfc_main;
else if (refs.mode.value == "time") return _sfc_main$1;
else {
return _sfc_main$2;
}
})
};
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;
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 });
nextTick(() => {
var _a3;
if (!nodes.container.value || !nodes.candidates.value) return;
else {
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(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 && (includes(target, nodes.container.value) || includes(target, nodes.candidates.value))) {
return window.addEventListener("click", methods.hidden, { capture: true, once: true });
} else {
refs.visible.value = false;
refs.start.value = analyzes.date(define.modelValue.start);
refs.end.value = 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: watch(
() => define.modelValue,
() => {
refs.end.value = analyzes.date(define.modelValue.end);
refs.start.value = analyzes.date(define.modelValue.start);
refs.date.value = analyzes.date(define.modelValue.start) || analyzes.date(define.modelValue.end) || /* @__PURE__ */ new Date();
}
)
};
const binds = reactive({
end: computed(() => {
return {
placeholder: define.placeholder.end,
value: analyzes.string(define.mode, refs.end.value)
};
}),
start: computed(() => {
return {
placeholder: define.placeholder.start,
value: analyzes.string(define.mode, refs.start.value)
};
}),
//* 容器
container: computed(() => {
return {
class: computeds.className.value,
style: {
width: isNumber(define.width) ? define.width + "px" : define.width
}
};
}),
//* 候选项容器
candidates: computed(() => {
return {
class: define.classExtraName || "",
style: {
zIndex: define.zIndex
}
};
})
});
const ons = {
//* 候选项
candidates: 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");
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;
}
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 });
}
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(data, {
direction: "bottom",
offset: 8,
align: "center"
});
}
});
});
}
}
};
return { ons, vars, refs, nodes, binds, watchs, methods, computeds };
};
export { useComposable };
//# sourceMappingURL=composable.mjs.map