various-ui
Version:
This is a test version of the Vue 3 component library
183 lines (180 loc) • 7.13 kB
JavaScript
import { inject, ref, computed, nextTick, reactive } from 'vue';
import '../../../utils/index.mjs';
import { UiFormEmitterKey } from '../../../constants/index.mjs';
import { analyzes } from './utils.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 = {
timer: void 0,
observer: void 0
};
const refs = {
visible: ref(false)
};
const nodes = {
sHourser: ref(),
eHourser: ref(),
sMinuteser: ref(),
sSecondser: ref(),
eMinuteser: ref(),
eSecondser: ref(),
container: ref(),
//* 时间选择器节点
candidates: ref()
//* 候选项容器节点
};
const computeds = {
//* 组件类
className: computed(() => refs.visible.value ? "ui-active" : ""),
sTime: computed(() => {
var _a;
return analyzes.date((_a = define.modelValue) == null ? void 0 : _a.start);
}),
eTime: computed(() => {
var _a;
return analyzes.date((_a = define.modelValue) == null ? void 0 : _a.end);
})
};
const methods = {
//* 初始化函数
init: () => {
const number = define.mode == "minutes" ? 2 : 3;
const result = {
start: computeds.sTime.value.slice(0, number).map((value) => value.toString().padStart(2, "0")).join(":"),
end: computeds.eTime.value.slice(0, number).map((value) => value.toString().padStart(2, "0")).join(":")
};
emits("update:modelValue", result);
emits("change", result);
emitter == null ? void 0 : emitter.emit(define.name, "change");
},
//* 显示函数
show: () => {
if (refs.visible.value) return methods.hidden();
else {
refs.visible.value = true;
nextTick(() => {
var _a;
if (!nodes.container.value || !nodes.candidates.value) return;
else {
append(document.body, nodes.candidates.value);
window.addEventListener("click", methods.hidden, { capture: true, once: true });
(_a = vars.observer) == null ? void 0 : _a.disconnect();
vars.observer = new ResizeObserver(() => {
var _a2, _b, _c, _d, _e, _f;
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"
});
(_a2 = nodes.sHourser.value) == null ? void 0 : _a2.move(computeds.sTime.value[0] * 30);
(_b = nodes.sMinuteser.value) == null ? void 0 : _b.move(computeds.sTime.value[1] * 30);
(_c = nodes.sSecondser.value) == null ? void 0 : _c.move(computeds.sTime.value[2] * 30);
(_d = nodes.eHourser.value) == null ? void 0 : _d.move(computeds.eTime.value[0] * 30);
(_e = nodes.eMinuteser.value) == null ? void 0 : _e.move(computeds.eTime.value[1] * 30);
(_f = nodes.eSecondser.value) == null ? void 0 : _f.move(computeds.eTime.value[2] * 30);
}
});
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;
(_a = vars.observer) == null ? void 0 : _a.disconnect();
emitter == null ? void 0 : emitter.emit(define.name, "blur");
}
}
},
//* 时间滚动回调
scroll: (index, node2, finish) => {
const number = define.mode == "minutes" ? 2 : 3;
const simulate = { start: computeds.sTime.value, end: computeds.eTime.value };
const container = node2 == null ? void 0 : node2.$el.querySelector(".ui-simplebar-container");
if (finish) simulate.end[index] = Math.floor(((container == null ? void 0 : container.scrollTop) || 0) / 30);
else {
simulate.start[index] = Math.floor(((container == null ? void 0 : container.scrollTop) || 0) / 30);
}
const result = {
start: simulate.start.slice(0, number).map((value) => value.toString().padStart(2, "0")).join(":"),
end: simulate.end.slice(0, number).map((value) => value.toString().padStart(2, "0")).join(":")
};
emits("update:modelValue", result);
vars.timer && clearTimeout(vars.timer);
vars.timer = setTimeout(() => {
emits("change", result);
emitter == null ? void 0 : emitter.emit(define.name, "change");
nextTick(() => {
var _a, _b, _c, _d, _e, _f;
(_a = nodes.sHourser.value) == null ? void 0 : _a.move(computeds.sTime.value[0] * 30);
(_b = nodes.sMinuteser.value) == null ? void 0 : _b.move(computeds.sTime.value[1] * 30);
(_c = nodes.sSecondser.value) == null ? void 0 : _c.move(computeds.sTime.value[2] * 30);
(_d = nodes.eHourser.value) == null ? void 0 : _d.move(computeds.eTime.value[0] * 30);
(_e = nodes.eMinuteser.value) == null ? void 0 : _e.move(computeds.eTime.value[1] * 30);
(_f = nodes.eSecondser.value) == null ? void 0 : _f.move(computeds.eTime.value[2] * 30);
});
}, 500);
}
};
const binds = reactive({
end: computed(() => {
var _a;
return {
placeholder: define.placeholder.end,
value: (_a = define.modelValue) == null ? void 0 : _a.end
};
}),
start: computed(() => {
var _a;
return {
placeholder: define.placeholder.start,
value: (_a = define.modelValue) == null ? void 0 : _a.start
};
}),
//* 容器
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")
})
};
return { ons, vars, refs, nodes, binds, methods, computeds };
};
export { useComposable };
//# sourceMappingURL=composable.mjs.map