various-ui
Version:
This is a test version of the Vue 3 component library
194 lines (190 loc) • 7.1 kB
JavaScript
;
var vue = require('vue');
var options = require('./options.js');
var index = require('../../../constants/index.js');
require('../../../utils/index.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 = {
visible: vue.ref(false),
result: vue.ref([]),
data: vue.ref([])
};
const nodes = {
body: vue.ref(),
container: vue.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 && (index$1.includes(target, nodes.container.value) || index$1.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$2 = 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$2 && ((_a2 = value.children) == null ? void 0 : _a2.length);
});
refs.data.value = ((_b = regions.slice(-1)[0]) == null ? void 0 : _b.children) || options.options.regions;
refs.result.value = regions.map((value) => value.name);
vue.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 });
index$1.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.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: vue.computed(() => {
const result = [];
const region_lv1 = options.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: vue.computed(() => define.loading || define.disabled),
//* 组件类
className: vue.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 = vue.reactive({
//* 候选项容器
body: vue.computed(() => {
return {
class: define.classExtraName || "",
style: {
zIndex: define.zIndex
}
};
}),
//* 容器
container: vue.computed(() => {
return {
class: computeds.className.value,
style: {
width: lodashEs.isNumber(define.width) ? define.width + "px" : define.width
}
};
}),
//* 候选项列表
candidates: vue.computed(() => {
return {
style: {
maxHeight: define.height + "px"
}
};
})
});
const ons = {
//* 候选项容器事件
animation: index$2.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 };
};
exports.useComposable = useComposable;
//# sourceMappingURL=composable.js.map