various-ui
Version:
This is a test version of the Vue 3 component library
192 lines (189 loc) • 7 kB
JavaScript
import { inject, ref, nextTick, computed, reactive } from 'vue';
import { options } from './options.mjs';
import { UiFormEmitterKey } from '../../../constants/index.mjs';
import '../../../utils/index.mjs';
import { includes, append } 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 = {
visible: ref(false),
result: ref([]),
data: ref([])
};
const nodes = {
body: ref(),
container: ref()
};
const methods = {
//* 候选菜单选择事件
select: (region) => {
var _a, _b, _c, _d;
refs.result.value.push(region.name);
emits("update:modelValue", refs.result.value);
if (!((_a = region.children) == null ? void 0 : _a.length)) {
emits("change");
emitter == null ? void 0 : emitter.emit(define.name || "", "change");
if (refs.visible.value) {
refs.visible.value = false;
(_b = vars.observer) == null ? void 0 : _b.disconnect();
}
} else {
refs.data.value = region.children.map((value) => value);
(_d = (_c = nodes.body.value) == null ? void 0 : _c.querySelector(".ui-form-candidate-content")) == null ? void 0 : _d.scrollTo({ top: 0 });
}
},
//* 候选框隐藏事件
hidden: (ev) => {
var _a;
if (!nodes.container.value || !nodes.body.value) return;
else {
const target = ev == null ? void 0 : ev.target;
if (target && (includes(target, nodes.container.value) || includes(target, nodes.body.value))) {
addEventListener("click", methods.hidden, { capture: true, once: true });
} else {
refs.visible.value = false;
(_a = vars.observer) == null ? void 0 : _a.disconnect();
}
}
},
//* 候选框显示事件
show: (region) => {
var _a, _b;
if (define.readonly || define.disabled || define.loading) return;
if (region || !refs.visible.value) refs.visible.value = true;
else {
refs.visible.value = false;
(_a = vars.observer) == null ? void 0 : _a.disconnect();
}
if (refs.visible.value) {
const index$1 = region ? computeds.regions.value.findIndex((value) => value.name == region) : computeds.regions.value.length;
const regions = computeds.regions.value.filter((value, key) => {
var _a2;
return key < index$1 && ((_a2 = value.children) == null ? void 0 : _a2.length);
});
refs.data.value = ((_b = regions.slice(-1)[0]) == null ? void 0 : _b.children) || options.regions;
refs.result.value = regions.map((value) => value.name);
nextTick(() => {
var _a2, _b2, _c;
if (!nodes.container.value || !nodes.body.value) return;
else {
(_b2 = (_a2 = nodes.body.value) == null ? void 0 : _a2.querySelector(".ui-form-candidate-content")) == null ? void 0 : _b2.scrollTo({ top: 0 });
addEventListener("click", methods.hidden, { capture: true, once: true });
append(document.body, nodes.body.value);
(_c = vars.observer) == null ? void 0 : _c.disconnect();
vars.observer = new ResizeObserver(() => {
var _a3;
if (!nodes.container.value || !nodes.body.value) return;
else {
const data = { container: nodes.container.value, view: nodes.body.value };
const width = ((_a3 = nodes.container.value) == null ? void 0 : _a3.offsetWidth) || 0;
relativeContainerBody(data, {
direction: "bottom",
height: define.height,
offset: 4,
width: { min: width, max: define.widthExtra },
align: "start"
});
}
});
vars.observer.observe(document.documentElement);
}
});
}
}
};
const computeds = {
//* 组件值
regions: computed(() => {
const result = [];
const region_lv1 = options.regions.find((value) => {
var _a;
return value.name == ((_a = define.modelValue) == null ? void 0 : _a[0]);
});
if (region_lv1) result.push({ name: region_lv1.name, children: region_lv1.children });
else {
return [{ name: "\u8BF7\u9009\u62E9\u7701/\u76F4\u8F96\u5E02" }];
}
const region_lv2 = region_lv1.children.find((value) => {
var _a;
return value.name == ((_a = define.modelValue) == null ? void 0 : _a[1]);
});
if (region_lv2) {
result.push({ name: region_lv2.name, children: region_lv2.children });
if (!region_lv2.children.length) {
return result;
}
} else {
return [...result, { name: "\u8BF7\u9009\u62E9\u5E02/\u533A" }];
}
const region_lv3 = region_lv2.children.find((value) => {
var _a;
return value.name == ((_a = define.modelValue) == null ? void 0 : _a[2]);
});
if (region_lv3) result.push({ name: region_lv3.name, children: [] });
else {
return [...result, { name: "\u8BF7\u9009\u62E9\u533A/\u53BF/\u8857\u9053" }];
}
return result;
}),
//* 禁用状态
disabled: computed(() => define.loading || define.disabled),
//* 组件类
className: computed(() => {
const className = [];
if (refs.visible.value) className.push("ui-form-selector");
if (define.loading) className.push("ui-loading-status");
else if (define.disabled) className.push("ui-disabled-status");
else if (define.readonly) {
className.push("ui-readonly-status");
}
return className.join(" ");
})
};
const binds = reactive({
//* 候选项容器
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
}
};
}),
//* 候选项列表
candidates: computed(() => {
return {
style: {
maxHeight: define.height + "px"
}
};
})
});
const ons = {
//* 候选项容器事件
animation: 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