@icreate/ics-mui
Version:
京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）
768 lines (767 loc) • 18.6 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, defineComponent, toRef, openBlock, createElementBlock, Fragment, createElementVNode, createVNode, unref, withCtx, toDisplayString, renderSlot, renderList, normalizeClass, normalizeStyle } from "vue";
import "../input/Input.js";
import { I as IcsPopup } from "../index-kY3YH8kV.js";
import { I as IcsPickerColumn } from "../Column-BdcOilw3.js";
import { u as useLocale } from "../index-Dc5XFAmV.js";
import { u as useFormDisabled } from "../common-DXugw-he.js";
import { _ as _sfc_main$1 } from "../input.vue_vue_type_script_setup_true_lang-CUVjcKoZ.js";
import { w as withInstall } from "../with-install-DWwOiZS3.js";
const DEFAULT_FILED_NAMES = {
text: "text",
value: "value",
children: "children",
className: "className"
};
const OPTIONS = [
[
{
text: "00",
value: "00"
},
{
text: "01",
value: "01"
},
{
text: "02",
value: "02"
},
{
text: "03",
value: "03"
},
{
text: "04",
value: "04"
},
{
text: "05",
value: "05"
},
{
text: "06",
value: "06"
},
{
text: "07",
value: "07"
},
{
text: "08",
value: "08"
},
{
text: "09",
value: "09"
},
{
text: "10",
value: "10"
},
{
text: "11",
value: "11"
},
{
text: "12",
value: "12"
},
{
text: "13",
value: "13"
},
{
text: "14",
value: "14"
},
{
text: "15",
value: "15"
},
{
text: "16",
value: "16"
},
{
text: "17",
value: "17"
},
{
text: "18",
value: "18"
},
{
text: "19",
value: "19"
},
{
text: "20",
value: "20"
},
{
text: "21",
value: "21"
},
{
text: "22",
value: "22"
},
{
text: "23",
value: "23"
}
],
[
{
text: "00",
value: "00"
},
{
text: "01",
value: "01"
},
{
text: "02",
value: "02"
},
{
text: "03",
value: "03"
},
{
text: "04",
value: "04"
},
{
text: "05",
value: "05"
},
{
text: "06",
value: "06"
},
{
text: "07",
value: "07"
},
{
text: "08",
value: "08"
},
{
text: "09",
value: "09"
},
{
text: "10",
value: "10"
},
{
text: "11",
value: "11"
},
{
text: "12",
value: "12"
},
{
text: "13",
value: "13"
},
{
text: "14",
value: "14"
},
{
text: "15",
value: "15"
},
{
text: "16",
value: "16"
},
{
text: "17",
value: "17"
},
{
text: "18",
value: "18"
},
{
text: "19",
value: "19"
},
{
text: "20",
value: "20"
},
{
text: "21",
value: "21"
},
{
text: "22",
value: "22"
},
{
text: "23",
value: "23"
},
{
text: "24",
value: "24"
},
{
text: "25",
value: "25"
},
{
text: "26",
value: "26"
},
{
text: "27",
value: "27"
},
{
text: "28",
value: "28"
},
{
text: "29",
value: "29"
},
{
text: "30",
value: "30"
},
{
text: "31",
value: "31"
},
{
text: "32",
value: "32"
},
{
text: "33",
value: "33"
},
{
text: "34",
value: "34"
},
{
text: "35",
value: "35"
},
{
text: "36",
value: "36"
},
{
text: "37",
value: "37"
},
{
text: "38",
value: "38"
},
{
text: "39",
value: "39"
},
{
text: "40",
value: "40"
},
{
text: "41",
value: "41"
},
{
text: "42",
value: "42"
},
{
text: "43",
value: "43"
},
{
text: "44",
value: "44"
},
{
text: "45",
value: "45"
},
{
text: "46",
value: "46"
},
{
text: "47",
value: "47"
},
{
text: "48",
value: "48"
},
{
text: "49",
value: "49"
},
{
text: "50",
value: "50"
},
{
text: "51",
value: "51"
},
{
text: "52",
value: "52"
},
{
text: "53",
value: "53"
},
{
text: "54",
value: "54"
},
{
text: "55",
value: "55"
},
{
text: "56",
value: "56"
},
{
text: "57",
value: "57"
},
{
text: "58",
value: "58"
},
{
text: "59",
value: "59"
}
]
];
const usePicker = (props, emit) => {
const state = reactive({
formattedColumns: props.columns.length ? props.columns : OPTIONS
});
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 {
defaultValues.value[columnIndex] = Object.prototype.hasOwnProperty.call(option, fields.value) ? option[fields.value] : "";
}
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: () => []
},
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,
default: false
}
};
const _hoisted_1 = { class: "ics-input-picker" };
const _hoisted_2 = { class: "nut-time-picker-content" };
const _hoisted_3 = { class: "nut-picker" };
const _hoisted_4 = { class: "nut-picker__bar" };
const _hoisted_5 = { class: "nut-picker__title" };
const _hoisted_6 = { class: "nut-picker__column__box" };
const _hoisted_7 = { class: "time-list-box" };
const _hoisted_8 = { class: "time-list" };
const _hoisted_9 = ["onClick"];
const _hoisted_10 = { class: "nut-time" };
const cN = "IcsPicker";
const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, { name: "IcsTimePicker" }), {
__name: "index",
props: baseProps,
emits: ["cancel", "change", "confirm", "update:modelValue"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const translate = useLocale(cN);
const show = ref(false);
const pickerColumn = ref([]);
const date = ref("");
const disabled = useFormDisabled(toRef(props, "disabled"));
const timeList = ref([
{ label: "03:00", value: "03:00" },
{ label: "07:00", value: "07:00" },
{ label: "11:00", value: "11:00" },
{ label: "15:00", value: "15:00" },
{ label: "19:00", value: "19:00" },
{ label: "23:00", value: "23:00" }
]);
const selectVal = computed({
get() {
return props.modelValue.join(":");
},
set(value) {
emits("update:modelValue", value);
}
});
const columnStyle = computed(() => {
const styles = {};
styles.height = `${+props.visibleOptionNum * +props.optionHeight}px`;
styles["--lineHeight"] = `${+props.optionHeight}px`;
return styles;
});
const currentTime = computed(() => selectVal.value);
const { changeHandler, confirm, defaultValues, columnsList, columnsType, columnFieldNames, cancel } = usePicker(
props,
emits
);
const swipeRef = (el) => {
if (el && pickerColumn.value.length < columnsList.value.length) {
pickerColumn.value.push(el);
}
};
const cancelHandler = () => {
show.value = false;
cancel();
};
const confirmHandler = () => {
if (pickerColumn.value.length > 0) {
pickerColumn.value.forEach((column) => {
column.stopMomentum();
});
}
show.value = false;
confirm();
};
const onQuickTime = (item) => {
emits("update:modelValue", item.value.split(":"));
};
const onPicker = () => {
if (disabled.value)
return;
show.value = true;
selectVal.value && (date.value = selectVal.value);
};
__expose({
columnsType,
columnsList,
columnFieldNames,
cancel,
changeHandler,
confirmHandler,
defaultValues,
translate,
pickerColumn,
swipeRef,
columnStyle
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock(Fragment, null, [
createElementVNode("div", _hoisted_1, [
createVNode(unref(_sfc_main$1), {
modelValue: selectVal.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectVal.value = $event),
border: false,
readonly: "",
disabled: unref(disabled),
placeholder: "请选择",
onClick: onPicker
}, null, 8, ["modelValue", "disabled"])
]),
createVNode(IcsPopup, {
visible: show.value,
"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => show.value = $event),
position: "bottom",
"pop-class": "nut-time-picker-popup"
}, {
default: withCtx(() => [
createElementVNode("div", _hoisted_2, [
createElementVNode("div", _hoisted_3, [
createElementVNode("div", _hoisted_4, [
createElementVNode("div", {
class: "nut-picker__left",
onClick: cancelHandler
}, toDisplayString(_ctx.cancelText || unref(translate)("cancel")), 1),
createElementVNode("div", _hoisted_5, toDisplayString(_ctx.title), 1),
createElementVNode("div", {
class: "nut-picker__right",
onClick: confirmHandler
}, toDisplayString(_ctx.okText || unref(translate)("confirm")), 1)
]),
renderSlot(_ctx.$slots, "top"),
createElementVNode("div", _hoisted_6, [
createElementVNode("div", _hoisted_7, [
createElementVNode("div", _hoisted_8, [
(openBlock(true), createElementBlock(Fragment, null, renderList(timeList.value, (item) => {
return openBlock(), createElementBlock("div", {
key: item.value,
class: normalizeClass(["nut-time__wrapper", { "nut-time__checked": currentTime.value == item.value }]),
onClick: ($event) => onQuickTime(item)
}, [
createElementVNode("div", _hoisted_10, toDisplayString(item.label), 1)
], 10, _hoisted_9);
}), 128))
])
]),
createElementVNode("div", {
class: "nut-picker__column",
style: normalizeStyle(columnStyle.value)
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(columnsList), (column, columnIndex) => {
return openBlock(), createElementBlock("div", {
key: columnIndex,
class: "nut-picker__columnitem"
}, [
createVNode(IcsPickerColumn, {
ref_for: true,
ref: swipeRef,
column,
"columns-type": unref(columnsType),
"field-names": unref(columnFieldNames),
value: unref(defaultValues) && unref(defaultValues)[columnIndex],
"three-dimensional": _ctx.threeDimensional,
"swipe-duration": _ctx.swipeDuration,
"visible-option-num": _ctx.visibleOptionNum,
"option-height": _ctx.optionHeight,
onChange: (option) => unref(changeHandler)(columnIndex, option)
}, null, 8, ["column", "columns-type", "field-names", "value", "three-dimensional", "swipe-duration", "visible-option-num", "option-height", "onChange"])
]);
}), 128))
], 4)
]),
renderSlot(_ctx.$slots, "default")
])
])
]),
_: 3
}, 8, ["visible"])
], 64);
};
}
}));
withInstall(_sfc_main);
export {
_sfc_main as TimePicker,
_sfc_main as default
};