various-ui
Version:
This is a test version of the Vue 3 component library
207 lines (204 loc) • 7.21 kB
JavaScript
import { inject, ref, computed, nextTick, reactive } from 'vue';
import { UiFormEmitterKey } from '../../../constants/index.mjs';
import '../../../utils/index.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/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 * as index from '../../../utils/src/animation/index.mjs';
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 = {
date: ref(),
//* 临时的日期对象
mode: ref(define.mode),
//* 临时的窗口类型
visible: ref(false)
//* 控制变量
};
const nodes = {
components: ref(),
//* 候选项组件节点
container: ref(),
//* 时间选择器节点
body: ref()
//* 候选项容器节点
};
const analyzes = {
//* 输入框的日期解析
analyzeDate: computed(() => {
const date = new Date(refs.date.value || define.modelValue || "");
if (date.toString() == "Invalid Date") {
return /* @__PURE__ */ new Date();
} else {
return date;
}
}),
//* 解析当前组件
analyzeComponent: computed(() => {
const mode = refs.mode.value || define.mode;
if (mode == "month") return _sfc_main;
else {
return _sfc_main$1;
}
})
};
const methods = {
//* 显示函数
show: () => {
if (refs.visible.value) return methods.hidden();
refs.mode.value = define.mode;
refs.visible.value = true;
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);
nextTick(() => {
var _a2;
if (!nodes.container.value || !nodes.body.value) return;
else {
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(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 && (includes(target, nodes.container.value) || includes(target, nodes.body.value))) return;
else {
(_a = vars.observer) == null ? void 0 : _a.disconnect();
refs.visible.value = false;
}
},
//* 响应候选窗口更新事件
update: (mode, data) => {
isNumber(data.day) && analyzes.analyzeDate.value.setDate(data.day);
isNumber(data.year) && analyzes.analyzeDate.value.setFullYear(data.year);
isNumber(data.month) && analyzes.analyzeDate.value.setMonth(data.month);
refs.mode.value = mode;
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);
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(data3, {
direction: "bottom",
offset: 8,
align: "center"
});
}
});
});
},
//* 响应候选窗口选择事件
change: (data) => {
isNumber(data.day) && analyzes.analyzeDate.value.setDate(data.day);
isNumber(data.year) && analyzes.analyzeDate.value.setFullYear(data.year);
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: computed(() => define.modelValue),
//* 组件类
className: 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 = reactive({
//* 主体
main: computed(() => {
return {
value: computeds.value.value,
placeholder: define.placeholder
};
}),
//* 候选项容器
body: computed(() => {
return {
class: define.classExtraName || "",
style: {
zIndex: define.zIndex
}
};
}),
//* 容器
container: computed(() => {
return {
class: computeds.className.value,
style: {
width: isNumber(define.width) ? define.width + "px" : define.width
}
};
})
});
const ons = {
//* 候选项
candidates: 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 };
};
export { useComposable };
//# sourceMappingURL=composable.mjs.map