@icreate/ics-mui
Version:
京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）
368 lines (367 loc) • 11.7 kB
JavaScript
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));
import { reactive, computed, ref, watch, toRefs, resolveComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createCommentVNode, renderSlot, normalizeStyle, Fragment, renderList, normalizeClass, createVNode } from "vue";
import { c as createComponent } from "../component-Dt_P47FR.js";
import { I as IcsPickerColumn } from "../Column-BdcOilw3.js";
import { u as useLocale } from "../index-Dc5XFAmV.js";
import { _ as _export_sfc } from "../_plugin-vue_export-helper-1tPrXgE0.js";
const DEFAULT_FILED_NAMES = {
text: "text",
value: "value",
children: "children",
className: "className"
};
const usePicker = (props, emit) => {
const state = reactive({
formattedColumns: props.columns
});
const columnFieldNames = computed(() => {
return __spreadValues(__spreadValues({}, DEFAULT_FILED_NAMES), props.fieldNames);
});
const defaultValues = ref([]);
const defaultIndexes = computed(() => {
const fields = columnFieldNames.value;
return columnsList.value.map((column, index) => {
const targetIndex = column.findIndex((item) => item[fields.value] === defaultValues.value[index]);
return targetIndex === -1 ? 0 : targetIndex;
});
});
const pickerColumn = ref([]);
const swipeRef = (el) => {
if (el && pickerColumn.value.length < columnsList.value.length) {
pickerColumn.value.push(el);
}
};
const selectedOptions = computed(() => {
const fields = columnFieldNames.value;
return columnsList.value.map((column, index) => {
return column.find((item) => item[fields.value] === defaultValues.value[index]) || column[0];
});
});
const columnsType = computed(() => {
const firstColumn = state.formattedColumns[0];
const fields = columnFieldNames.value;
if (firstColumn) {
if (Array.isArray(firstColumn)) {
return "multiple";
}
if (fields.children in firstColumn) {
return "cascade";
}
}
return "single";
});
const columnsList = computed(() => {
let result = [];
switch (columnsType.value) {
case "multiple":
result = state.formattedColumns;
break;
case "cascade":
result = formatCascade(state.formattedColumns, defaultValues.value ? defaultValues.value : []);
break;
default:
result = [state.formattedColumns];
break;
}
return result;
});
const formatCascade = (columns, defaultValues2) => {
const formatted = [];
const fields = columnFieldNames.value;
let cursor = {
text: "",
value: "",
[fields.children]: columns
};
let columnIndex = 0;
while (cursor && cursor[fields.children]) {
const options = cursor[fields.children];
const value = defaultValues2[columnIndex];
let index = options.findIndex((columnItem) => columnItem[fields.value] === value);
if (index === -1)
index = 0;
cursor = cursor[fields.children][index];
columnIndex++;
formatted.push(options);
}
return formatted;
};
const cancel = () => {
emit("cancel", {
selectedValue: defaultValues.value,
selectedOptions: selectedOptions.value
});
};
const changeHandler = (columnIndex, option) => {
var _a;
const fields = columnFieldNames.value;
if (option && Object.keys(option).length) {
defaultValues.value = defaultValues.value ? defaultValues.value : [];
if (columnsType.value === "cascade") {
defaultValues.value[columnIndex] = (_a = option[fields.value]) != null ? _a : "";
let index = columnIndex;
let cursor = option;
while (cursor && cursor[fields.children] && cursor[fields.children][0]) {
defaultValues.value[index + 1] = cursor[fields.children][0][fields.value];
index++;
cursor = cursor[fields.children][0];
}
if (cursor && cursor[fields.children] && cursor[fields.children].length === 0) {
defaultValues.value = defaultValues.value.slice(0, index + 1);
}
} else {
const currentColumnValue = Object.prototype.hasOwnProperty.call(option, fields.value) ? option[fields.value] : "";
if (currentColumnValue === defaultValues.value[columnIndex])
return;
defaultValues.value[columnIndex] = currentColumnValue;
}
console.log("change");
emit("change", {
columnIndex,
selectedValue: defaultValues.value,
selectedOptions: selectedOptions.value
});
}
};
const confirm = () => {
const fields = columnFieldNames.value;
if (defaultValues.value && !defaultValues.value.length) {
columnsList.value.forEach((columns) => {
defaultValues.value.push(columns[0][fields.value]);
});
}
emit("confirm", {
selectedValue: defaultValues.value,
selectedOptions: selectedOptions.value
});
};
const isSameValue = (valA, valB) => JSON.stringify(valA) === JSON.stringify(valB);
watch(
() => props.modelValue,
(newValues) => {
if (!isSameValue(newValues, defaultValues.value)) {
defaultValues.value = newValues;
}
},
{ deep: true, immediate: true }
);
watch(
defaultValues,
(newValues) => {
if (!isSameValue(newValues, props.modelValue)) {
emit("update:modelValue", newValues);
}
},
{ deep: true }
);
watch(
() => props.columns,
(val) => {
state.formattedColumns = val;
}
);
return __spreadProps(__spreadValues({}, toRefs(state)), {
columnsType,
columnsList,
columnFieldNames,
cancel,
changeHandler,
confirm,
defaultValues,
defaultIndexes,
pickerColumn,
swipeRef,
selectedOptions,
isSameValue
});
};
const baseProps = {
modelValue: {
type: Array,
default: () => []
},
// pickercolumn水平拖拽还是垂直拖拽
direction: {
type: String,
default: "horizontal"
// vertical旋转90deg方向
},
title: {
type: String,
default: ""
},
cancelText: {
type: String,
default: ""
},
okText: {
type: String,
default: ""
},
columns: {
type: Array,
default: () => {
return [];
}
},
threeDimensional: {
type: Boolean,
default: false
},
swipeDuration: {
type: [Number, String],
default: 1e3
},
showToolbar: {
type: Boolean,
default: true
},
visibleOptionNum: {
type: [Number, String],
default: 7
},
optionHeight: {
type: [Number, String],
default: 36
},
fieldNames: {
type: Object,
default: () => ({})
},
disabled: {
type: [Boolean, Array],
default: false
}
};
const { create } = createComponent("picker");
const cN = "IcsPicker";
const _sfc_main = create({
components: {
IcsPickerColumn
},
props: baseProps,
emits: ["cancel", "change", "confirm", "update:modelValue"],
setup(props, { emit }) {
const translate = useLocale(cN);
const { changeHandler, confirm, defaultValues, columnsList, columnsType, columnFieldNames, cancel } = usePicker(
props,
emit
);
const pickerColumn = ref([]);
const swipeRef = (el) => {
if (el && pickerColumn.value.length < columnsList.value.length) {
pickerColumn.value.push(el);
}
};
const columnStyle = computed(() => {
const styles = {};
styles.height = `${+props.visibleOptionNum * +props.optionHeight}px`;
styles["--lineHeight"] = `${+props.optionHeight}px`;
return styles;
});
const confirmHandler = () => {
if (pickerColumn.value.length > 0) {
pickerColumn.value.forEach((column) => {
column.stopMomentum();
});
}
confirm();
};
const isDisable = (columnIndex) => {
if (typeof props.disabled === "boolean") {
return props.disabled ? "nut-picker__columnitem-disabled" : "";
} else if (Array.isArray(props.disabled)) {
return props.disabled.includes(columnIndex) ? "nut-picker__columnitem-disabled" : "";
}
return "";
};
return {
columnsType,
columnsList,
columnFieldNames,
cancel,
changeHandler,
confirmHandler,
defaultValues,
translate,
pickerColumn,
swipeRef,
columnStyle,
isDisable
};
}
});
const _hoisted_1 = { class: "nut-picker" };
const _hoisted_2 = {
key: 0,
class: "nut-picker__bar"
};
const _hoisted_3 = { class: "nut-picker__title" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_ics_picker_column = resolveComponent("ics-picker-column");
return openBlock(), createElementBlock("div", _hoisted_1, [
_ctx.showToolbar ? (openBlock(), createElementBlock("view", _hoisted_2, [
createElementVNode("view", {
class: "nut-picker__left",
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.cancel && _ctx.cancel(...args))
}, toDisplayString(_ctx.cancelText || _ctx.translate("cancel")), 1),
createElementVNode("view", _hoisted_3, toDisplayString(_ctx.title), 1),
createElementVNode("view", {
class: "nut-picker__right",
onClick: _cache[1] || (_cache[1] = (...args) => _ctx.confirmHandler && _ctx.confirmHandler(...args))
}, toDisplayString(_ctx.okText || _ctx.translate("confirm")), 1)
])) : createCommentVNode("", true),
renderSlot(_ctx.$slots, "top"),
createElementVNode("view", {
class: "nut-picker__column",
style: normalizeStyle(_ctx.columnStyle)
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columnsList, (column, columnIndex) => {
return openBlock(), createElementBlock("view", {
key: columnIndex,
class: normalizeClass(["nut-picker__columnitem", _ctx.isDisable(columnIndex)])
}, [
createVNode(_component_ics_picker_column, {
ref_for: true,
ref: _ctx.swipeRef,
column,
"columns-type": _ctx.columnsType,
"field-names": _ctx.columnFieldNames,
value: _ctx.defaultValues && _ctx.defaultValues[columnIndex],
"three-dimensional": _ctx.threeDimensional,
"swipe-duration": _ctx.swipeDuration,
"visible-option-num": _ctx.visibleOptionNum,
"option-height": _ctx.optionHeight,
direction: _ctx.direction,
onChange: (option) => {
_ctx.changeHandler(columnIndex, option);
}
}, null, 8, ["column", "columns-type", "field-names", "value", "three-dimensional", "swipe-duration", "visible-option-num", "option-height", "direction", "onChange"])
], 2);
}), 128))
], 4),
renderSlot(_ctx.$slots, "default")
]);
}
const NutPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
NutPicker as default
};