455 lines
17 KiB
JavaScript
455 lines
17 KiB
JavaScript
|
"use strict";
|
||
|
|
var __defProp = Object.defineProperty;
|
||
|
|
var __defProps = Object.defineProperties;
|
||
|
|
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
||
|
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
||
|
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
||
|
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
||
|
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
||
|
|
var __spreadValues = (a, b) => {
|
||
|
|
for (var prop in b || (b = {}))
|
||
|
|
if (__hasOwnProp.call(b, prop))
|
||
|
|
__defNormalProp(a, prop, b[prop]);
|
||
|
|
if (__getOwnPropSymbols)
|
||
|
|
for (var prop of __getOwnPropSymbols(b)) {
|
||
|
|
if (__propIsEnum.call(b, prop))
|
||
|
|
__defNormalProp(a, prop, b[prop]);
|
||
|
|
}
|
||
|
|
return a;
|
||
|
|
};
|
||
|
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
||
|
|
const common_vendor = require("../../../../common/vendor.js");
|
||
|
|
if (!Array) {
|
||
|
|
const _easycom_wd_icon2 = common_vendor.resolveComponent("wd-icon");
|
||
|
|
const _easycom_wd_loading2 = common_vendor.resolveComponent("wd-loading");
|
||
|
|
const _easycom_wd_action_sheet2 = common_vendor.resolveComponent("wd-action-sheet");
|
||
|
|
(_easycom_wd_icon2 + _easycom_wd_loading2 + _easycom_wd_action_sheet2)();
|
||
|
|
}
|
||
|
|
const _easycom_wd_icon = () => "../wd-icon/wd-icon.js";
|
||
|
|
const _easycom_wd_loading = () => "../wd-loading/wd-loading.js";
|
||
|
|
const _easycom_wd_action_sheet = () => "../wd-action-sheet/wd-action-sheet.js";
|
||
|
|
if (!Math) {
|
||
|
|
(_easycom_wd_icon + _easycom_wd_loading + _easycom_wd_action_sheet)();
|
||
|
|
}
|
||
|
|
const __default__ = {
|
||
|
|
name: "wd-col-picker",
|
||
|
|
options: {
|
||
|
|
addGlobalClass: true,
|
||
|
|
virtualHost: true,
|
||
|
|
styleIsolation: "shared"
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent(__spreadProps(__spreadValues({}, __default__), {
|
||
|
|
props: common_vendor.colPickerProps,
|
||
|
|
emits: ["close", "update:modelValue", "confirm"],
|
||
|
|
setup(__props, { expose: __expose, emit: __emit }) {
|
||
|
|
const { translate } = common_vendor.useTranslate("col-picker");
|
||
|
|
const $container = ".wd-col-picker__selected-container";
|
||
|
|
const $item = ".wd-col-picker__selected-item";
|
||
|
|
const props = __props;
|
||
|
|
const emit = __emit;
|
||
|
|
const pickerShow = common_vendor.ref(false);
|
||
|
|
const currentCol = common_vendor.ref(0);
|
||
|
|
const selectList = common_vendor.ref([]);
|
||
|
|
const pickerColSelected = common_vendor.ref([]);
|
||
|
|
const selectShowList = common_vendor.ref([]);
|
||
|
|
const loading = common_vendor.ref(false);
|
||
|
|
const isChange = common_vendor.ref(false);
|
||
|
|
const lastSelectList = common_vendor.ref([]);
|
||
|
|
const lastPickerColSelected = common_vendor.ref([]);
|
||
|
|
const lineStyle = common_vendor.ref("");
|
||
|
|
const scrollLeft = common_vendor.ref(0);
|
||
|
|
const inited = common_vendor.ref(false);
|
||
|
|
const isCompleting = common_vendor.ref(false);
|
||
|
|
const { proxy } = common_vendor.getCurrentInstance();
|
||
|
|
const cell = common_vendor.useCell();
|
||
|
|
const updateLineAndScroll = common_vendor.debounce(function(animation = true) {
|
||
|
|
setLineStyle(animation);
|
||
|
|
lineScrollIntoView();
|
||
|
|
}, 50);
|
||
|
|
const showValue = common_vendor.computed(() => {
|
||
|
|
const selectedItems = (props.modelValue || []).map((item, colIndex) => {
|
||
|
|
return getSelectedItem(item, colIndex, selectList.value);
|
||
|
|
});
|
||
|
|
if (props.displayFormat) {
|
||
|
|
return props.displayFormat(selectedItems);
|
||
|
|
} else {
|
||
|
|
return selectedItems.map((item) => {
|
||
|
|
return item[props.labelKey];
|
||
|
|
}).join("");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
common_vendor.watch(
|
||
|
|
() => props.modelValue,
|
||
|
|
(newValue) => {
|
||
|
|
if (newValue === pickerColSelected.value)
|
||
|
|
return;
|
||
|
|
pickerColSelected.value = newValue;
|
||
|
|
newValue.map((item, colIndex) => {
|
||
|
|
return getSelectedItem(item, colIndex, selectList.value)[props.labelKey];
|
||
|
|
});
|
||
|
|
handleAutoComplete();
|
||
|
|
},
|
||
|
|
{
|
||
|
|
deep: true,
|
||
|
|
immediate: true
|
||
|
|
}
|
||
|
|
);
|
||
|
|
common_vendor.watch(
|
||
|
|
() => props.columns,
|
||
|
|
(newValue, oldValue) => {
|
||
|
|
if (newValue.length && !common_vendor.isArray(newValue[0])) {
|
||
|
|
console.error("[wot design] error(wd-col-picker): the columns props of wd-col-picker should be a two-dimensional array");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (newValue.length === 0 && !oldValue)
|
||
|
|
return;
|
||
|
|
const newSelectedList = newValue.slice(0);
|
||
|
|
selectList.value = newSelectedList;
|
||
|
|
selectShowList.value = pickerColSelected.value.map((item, colIndex) => {
|
||
|
|
return getSelectedItem(item, colIndex, newSelectedList)[props.labelKey];
|
||
|
|
});
|
||
|
|
lastSelectList.value = newSelectedList;
|
||
|
|
if (newSelectedList.length > 0) {
|
||
|
|
currentCol.value = newSelectedList.length - 1;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
deep: true,
|
||
|
|
immediate: true
|
||
|
|
}
|
||
|
|
);
|
||
|
|
common_vendor.watch(
|
||
|
|
() => props.columnChange,
|
||
|
|
(fn) => {
|
||
|
|
if (fn && !common_vendor.isFunction(fn)) {
|
||
|
|
console.error("The type of columnChange must be Function");
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
deep: true,
|
||
|
|
immediate: true
|
||
|
|
}
|
||
|
|
);
|
||
|
|
common_vendor.watch(
|
||
|
|
() => props.displayFormat,
|
||
|
|
(fn) => {
|
||
|
|
if (fn && !common_vendor.isFunction(fn)) {
|
||
|
|
console.error("The type of displayFormat must be Function");
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
deep: true,
|
||
|
|
immediate: true
|
||
|
|
}
|
||
|
|
);
|
||
|
|
common_vendor.watch(
|
||
|
|
() => props.beforeConfirm,
|
||
|
|
(fn) => {
|
||
|
|
if (fn && !common_vendor.isFunction(fn)) {
|
||
|
|
console.error("The type of beforeConfirm must be Function");
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
deep: true,
|
||
|
|
immediate: true
|
||
|
|
}
|
||
|
|
);
|
||
|
|
const { parent: form } = common_vendor.useParent(common_vendor.FORM_KEY);
|
||
|
|
const errorMessage = common_vendor.computed(() => {
|
||
|
|
if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
|
||
|
|
return form.errorMessages[props.prop];
|
||
|
|
} else {
|
||
|
|
return "";
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const isRequired = common_vendor.computed(() => {
|
||
|
|
let formRequired = false;
|
||
|
|
if (form && form.props.rules) {
|
||
|
|
const rules = form.props.rules;
|
||
|
|
for (const key in rules) {
|
||
|
|
if (Object.prototype.hasOwnProperty.call(rules, key) && key === props.prop && Array.isArray(rules[key])) {
|
||
|
|
formRequired = rules[key].some((rule) => rule.required);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return props.required || props.rules.some((rule) => rule.required) || formRequired;
|
||
|
|
});
|
||
|
|
common_vendor.onMounted(() => {
|
||
|
|
inited.value = true;
|
||
|
|
});
|
||
|
|
function open() {
|
||
|
|
showPicker();
|
||
|
|
}
|
||
|
|
function close() {
|
||
|
|
handlePickerClose();
|
||
|
|
}
|
||
|
|
function handlePickerOpend() {
|
||
|
|
updateLineAndScroll(false);
|
||
|
|
}
|
||
|
|
function handlePickerClose() {
|
||
|
|
pickerShow.value = false;
|
||
|
|
if (isChange.value) {
|
||
|
|
setTimeout(() => {
|
||
|
|
selectList.value = lastSelectList.value.slice(0);
|
||
|
|
pickerColSelected.value = lastPickerColSelected.value.slice(0);
|
||
|
|
selectShowList.value = lastPickerColSelected.value.map((item, colIndex) => {
|
||
|
|
return getSelectedItem(item, colIndex, lastSelectList.value)[props.labelKey];
|
||
|
|
});
|
||
|
|
currentCol.value = lastSelectList.value.length - 1;
|
||
|
|
isChange.value = false;
|
||
|
|
}, 250);
|
||
|
|
}
|
||
|
|
emit("close");
|
||
|
|
}
|
||
|
|
function showPicker() {
|
||
|
|
const { disabled, readonly } = props;
|
||
|
|
if (disabled || readonly)
|
||
|
|
return;
|
||
|
|
pickerShow.value = true;
|
||
|
|
lastPickerColSelected.value = pickerColSelected.value.slice(0);
|
||
|
|
lastSelectList.value = selectList.value.slice(0);
|
||
|
|
}
|
||
|
|
function getSelectedItem(value, colIndex, selectList2) {
|
||
|
|
const { valueKey, labelKey } = props;
|
||
|
|
if (selectList2[colIndex]) {
|
||
|
|
const selecteds = selectList2[colIndex].filter((item) => {
|
||
|
|
return item[valueKey] === value;
|
||
|
|
});
|
||
|
|
if (selecteds.length > 0) {
|
||
|
|
return selecteds[0];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
[valueKey]: value,
|
||
|
|
[labelKey]: ""
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function chooseItem(colIndex, index) {
|
||
|
|
const item = selectList.value[colIndex][index];
|
||
|
|
if (item.disabled)
|
||
|
|
return;
|
||
|
|
const newPickerColSelected = pickerColSelected.value.slice(0, colIndex);
|
||
|
|
newPickerColSelected.push(item[props.valueKey]);
|
||
|
|
isChange.value = true;
|
||
|
|
pickerColSelected.value = newPickerColSelected;
|
||
|
|
selectList.value = selectList.value.slice(0, colIndex + 1);
|
||
|
|
selectShowList.value = newPickerColSelected.map((item2, colIndex2) => {
|
||
|
|
return getSelectedItem(item2, colIndex2, selectList.value)[props.labelKey];
|
||
|
|
});
|
||
|
|
handleColChange(colIndex, item, index);
|
||
|
|
}
|
||
|
|
function handleColChange(colIndex, item, index, callback) {
|
||
|
|
loading.value = true;
|
||
|
|
const { columnChange, beforeConfirm } = props;
|
||
|
|
columnChange && columnChange({
|
||
|
|
selectedItem: item,
|
||
|
|
index: colIndex,
|
||
|
|
rowIndex: index,
|
||
|
|
resolve: (nextColumn) => {
|
||
|
|
if (!common_vendor.isArray(nextColumn)) {
|
||
|
|
console.error("[wot design] error(wd-col-picker): the data of each column of wd-col-picker should be an array");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const newSelectList = selectList.value.slice(0);
|
||
|
|
newSelectList[colIndex + 1] = nextColumn;
|
||
|
|
selectList.value = newSelectList;
|
||
|
|
loading.value = false;
|
||
|
|
currentCol.value = colIndex + 1;
|
||
|
|
updateLineAndScroll(true);
|
||
|
|
if (typeof callback === "function") {
|
||
|
|
isCompleting.value = false;
|
||
|
|
selectShowList.value = pickerColSelected.value.map((item2, colIndex2) => {
|
||
|
|
return getSelectedItem(item2, colIndex2, selectList.value)[props.labelKey];
|
||
|
|
});
|
||
|
|
callback();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
finish: (isOk) => {
|
||
|
|
if (typeof callback === "function") {
|
||
|
|
loading.value = false;
|
||
|
|
isCompleting.value = false;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (common_vendor.isBoolean(isOk) && !isOk) {
|
||
|
|
loading.value = false;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (beforeConfirm) {
|
||
|
|
beforeConfirm(
|
||
|
|
pickerColSelected.value,
|
||
|
|
pickerColSelected.value.map((item2, colIndex2) => {
|
||
|
|
return getSelectedItem(item2, colIndex2, selectList.value);
|
||
|
|
}),
|
||
|
|
(isPass) => {
|
||
|
|
if (isPass) {
|
||
|
|
onConfirm();
|
||
|
|
} else {
|
||
|
|
loading.value = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
} else {
|
||
|
|
onConfirm();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function onConfirm() {
|
||
|
|
isChange.value = false;
|
||
|
|
loading.value = false;
|
||
|
|
pickerShow.value = false;
|
||
|
|
emit("update:modelValue", pickerColSelected.value);
|
||
|
|
emit("confirm", {
|
||
|
|
value: pickerColSelected.value,
|
||
|
|
selectedItems: pickerColSelected.value.map((item, colIndex) => {
|
||
|
|
return getSelectedItem(item, colIndex, selectList.value);
|
||
|
|
})
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function handleColClick(index) {
|
||
|
|
isChange.value = true;
|
||
|
|
currentCol.value = index;
|
||
|
|
updateLineAndScroll(true);
|
||
|
|
}
|
||
|
|
function setLineStyle(animation = true) {
|
||
|
|
if (!inited.value)
|
||
|
|
return;
|
||
|
|
common_vendor.getRect($item, true, proxy).then((rects) => {
|
||
|
|
const rect = rects[currentCol.value];
|
||
|
|
const width = 16;
|
||
|
|
let left = rects.slice(0, currentCol.value).reduce((prev, curr) => prev + curr.width, 0);
|
||
|
|
left += (Number(rect.width) - width) / 2;
|
||
|
|
const transition = animation ? "transition: width 300ms ease, transform 300ms ease;" : "";
|
||
|
|
const lineStyleTemp = `
|
||
|
|
transform: translateX(${left}px);
|
||
|
|
${transition}
|
||
|
|
`;
|
||
|
|
if (lineStyle.value !== lineStyleTemp) {
|
||
|
|
lineStyle.value = lineStyleTemp;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function lineScrollIntoView() {
|
||
|
|
if (!inited.value)
|
||
|
|
return;
|
||
|
|
Promise.all([common_vendor.getRect($item, true, proxy), common_vendor.getRect($container, false, proxy)]).then(([navItemsRects, navRect]) => {
|
||
|
|
if (!common_vendor.isArray(navItemsRects) || navItemsRects.length === 0)
|
||
|
|
return;
|
||
|
|
const selectItem = navItemsRects[currentCol.value];
|
||
|
|
const offsetLeft = navItemsRects.slice(0, currentCol.value).reduce((prev, curr) => prev + Number(curr.width), 0);
|
||
|
|
scrollLeft.value = offsetLeft - (navRect.width - Number(selectItem.width)) / 2;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function diffColumns(colIndex) {
|
||
|
|
const item = colIndex === -1 ? {} : { [props.valueKey]: props.modelValue[colIndex] };
|
||
|
|
handleColChange(colIndex, item, -1, () => {
|
||
|
|
if (selectList.value.length < props.modelValue.length) {
|
||
|
|
diffColumns(colIndex + 1);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function handleAutoComplete() {
|
||
|
|
if (props.autoComplete) {
|
||
|
|
if (selectList.value.length < props.modelValue.length || selectList.value.length === 0) {
|
||
|
|
if (!isCompleting.value) {
|
||
|
|
const colIndex = selectList.value.length === 0 ? -1 : selectList.value.length - 1;
|
||
|
|
diffColumns(colIndex);
|
||
|
|
}
|
||
|
|
isCompleting.value = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
__expose({
|
||
|
|
close,
|
||
|
|
open
|
||
|
|
});
|
||
|
|
return (_ctx, _cache) => {
|
||
|
|
return common_vendor.e({
|
||
|
|
a: _ctx.useDefaultSlot
|
||
|
|
}, _ctx.useDefaultSlot ? {} : common_vendor.e({
|
||
|
|
b: _ctx.label || _ctx.useLabelSlot
|
||
|
|
}, _ctx.label || _ctx.useLabelSlot ? common_vendor.e({
|
||
|
|
c: _ctx.label
|
||
|
|
}, _ctx.label ? {
|
||
|
|
d: common_vendor.t(_ctx.label)
|
||
|
|
} : {}, {
|
||
|
|
e: common_vendor.n(`wd-col-picker__label ${isRequired.value && "is-required"} ${_ctx.customLabelClass}`),
|
||
|
|
f: common_vendor.s(_ctx.labelWidth ? "min-width:" + _ctx.labelWidth + ";max-width:" + _ctx.labelWidth + ";" : "")
|
||
|
|
}) : {}, {
|
||
|
|
g: common_vendor.t(showValue.value || _ctx.placeholder || common_vendor.unref(translate)("placeholder")),
|
||
|
|
h: common_vendor.n(`wd-col-picker__value ${_ctx.ellipsis && "is-ellipsis"} ${_ctx.customValueClass} ${showValue.value ? "" : "wd-col-picker__value--placeholder"}`),
|
||
|
|
i: !_ctx.disabled && !_ctx.readonly
|
||
|
|
}, !_ctx.disabled && !_ctx.readonly ? {
|
||
|
|
j: common_vendor.p({
|
||
|
|
["custom-class"]: "wd-col-picker__arrow",
|
||
|
|
name: "arrow-right"
|
||
|
|
})
|
||
|
|
} : {}, {
|
||
|
|
k: errorMessage.value
|
||
|
|
}, errorMessage.value ? {
|
||
|
|
l: common_vendor.t(errorMessage.value)
|
||
|
|
} : {}, {
|
||
|
|
m: common_vendor.n(`wd-col-picker__cell ${_ctx.disabled && "is-disabled"} ${_ctx.readonly && "is-readonly"} ${_ctx.alignRight && "is-align-right"} ${_ctx.error && "is-error"} ${_ctx.size && "is-" + _ctx.size}`)
|
||
|
|
}), {
|
||
|
|
n: common_vendor.o(showPicker),
|
||
|
|
o: common_vendor.f(selectList.value, (select, colIndex, i0) => {
|
||
|
|
return {
|
||
|
|
a: common_vendor.t(selectShowList.value[colIndex] || common_vendor.unref(translate)("select")),
|
||
|
|
b: colIndex,
|
||
|
|
c: common_vendor.n(`wd-col-picker__selected-item ${colIndex === currentCol.value && "is-selected"}`),
|
||
|
|
d: common_vendor.o(($event) => handleColClick(colIndex), colIndex)
|
||
|
|
};
|
||
|
|
}),
|
||
|
|
p: common_vendor.s(lineStyle.value),
|
||
|
|
q: scrollLeft.value,
|
||
|
|
r: common_vendor.f(selectList.value, (col, colIndex, i0) => {
|
||
|
|
return common_vendor.e({
|
||
|
|
a: common_vendor.f(col, (item, index, i1) => {
|
||
|
|
return common_vendor.e({
|
||
|
|
a: common_vendor.t(item[_ctx.labelKey]),
|
||
|
|
b: item[_ctx.tipKey]
|
||
|
|
}, item[_ctx.tipKey] ? {
|
||
|
|
c: common_vendor.t(item[_ctx.tipKey])
|
||
|
|
} : {}, {
|
||
|
|
d: "adcdd452-2-" + i0 + "-" + i1 + ",adcdd452-1",
|
||
|
|
e: index,
|
||
|
|
f: common_vendor.n(`wd-col-picker__list-item ${pickerColSelected.value[colIndex] && item[_ctx.valueKey] === pickerColSelected.value[colIndex] && "is-selected"} ${item.disabled && "is-disabled"}`),
|
||
|
|
g: common_vendor.o(($event) => chooseItem(colIndex, index), index)
|
||
|
|
});
|
||
|
|
})
|
||
|
|
}, loading.value ? {
|
||
|
|
b: "adcdd452-3-" + i0 + ",adcdd452-1",
|
||
|
|
c: common_vendor.p({
|
||
|
|
color: _ctx.loadingColor
|
||
|
|
})
|
||
|
|
} : {}, {
|
||
|
|
d: colIndex,
|
||
|
|
e: common_vendor.s(colIndex === currentCol.value ? "display: block;" : "display: none;")
|
||
|
|
});
|
||
|
|
}),
|
||
|
|
s: common_vendor.p({
|
||
|
|
["custom-class"]: "wd-col-picker__checked",
|
||
|
|
name: "check"
|
||
|
|
}),
|
||
|
|
t: loading.value,
|
||
|
|
v: common_vendor.o(handlePickerOpend),
|
||
|
|
w: common_vendor.o(handlePickerClose),
|
||
|
|
x: common_vendor.o(($event) => pickerShow.value = $event),
|
||
|
|
y: common_vendor.p({
|
||
|
|
duration: 250,
|
||
|
|
title: _ctx.title || common_vendor.unref(translate)("title"),
|
||
|
|
["close-on-click-modal"]: _ctx.closeOnClickModal,
|
||
|
|
["z-index"]: _ctx.zIndex,
|
||
|
|
["safe-area-inset-bottom"]: _ctx.safeAreaInsetBottom,
|
||
|
|
modelValue: pickerShow.value
|
||
|
|
}),
|
||
|
|
z: common_vendor.n(`wd-col-picker ${common_vendor.unref(cell).border.value ? "is-border" : ""} ${_ctx.customClass}`),
|
||
|
|
A: common_vendor.s(_ctx.customStyle)
|
||
|
|
});
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}));
|
||
|
|
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-adcdd452"]]);
|
||
|
|
wx.createComponent(Component);
|