@icreate/ics-mui
Version:
京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）
196 lines (195 loc) • 7.36 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 { defineComponent, toRef, ref, computed, openBlock, createElementBlock, Fragment, createElementVNode, createVNode, unref, withCtx, toDisplayString, renderList, createBlock, normalizeStyle, createTextVNode } from "vue";
import { X as v } from "../style_icon-C4_0S-Vm.js";
import "../input/Input.js";
import { u as useFormDisabled } from "../common-DXugw-he.js";
import { I as IcsPopup } from "../index-kY3YH8kV.js";
import { _ as _sfc_main$2 } from "../index.vue_vue_type_script_lang-CwuJxVK-.js";
import { _ as _sfc_main$3 } from "../index.vue_vue_type_script_lang-Cvb1iC2K.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 _hoisted_1 = { class: "ics-input-picker" };
const _hoisted_2 = { class: "nut-picker" };
const _hoisted_3 = { class: "nut-picker__bar" };
const _hoisted_4 = { class: "nut-picker__title" };
const _hoisted_5 = { class: "nut-picker-select__multiple" };
const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
name: "IcsCellSelectMultiple"
}), {
__name: "index",
props: {
modelValue: {
type: [Array, String],
default: () => []
},
title: {
type: String,
default: "意识"
},
cancelText: {
type: String,
default: "取消"
},
okText: {
type: String,
default: "确认"
},
options: {
type: Array,
default: []
},
optionHeight: {
type: [Number, String],
default: 50
},
disabled: {
type: Boolean,
default: false
}
},
emits: ["cancel", "confirm", "update:modelValue"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const disabled = useFormDisabled(toRef(props, "disabled"));
const emits = __emit;
const show = ref(false);
const optionHeight = ref(props.optionHeight);
const selectVal = computed({
get() {
if (Array.isArray(props.modelValue)) {
return props.modelValue;
} else {
return props.modelValue ? props.modelValue.split(",") : [];
}
},
set(value) {
emits("update:modelValue", value);
}
});
const selectCheckbox = ref([...selectVal.value]);
const selectItem = computed(() => {
return props.options.filter((option) => selectCheckbox.value.includes(option.value));
});
const currentSelect = ref(selectItem.value);
const selectName = ref(selectItem.value.map((option) => option.text).join(","));
const getSelectedValuesAndOptions = () => {
const selectedValue = selectItem.value.map((option) => option.value);
const selectedOptions = selectItem.value;
return { selectedValue, selectedOptions };
};
const cancel = () => {
show.value = false;
const { selectedValue, selectedOptions } = getSelectedValuesAndOptions();
emits("cancel", selectedValue, selectedOptions);
};
const confirm = () => {
show.value = false;
currentSelect.value = selectItem.value;
selectName.value = selectItem.value.map((option) => option.text).join(",");
const { selectedValue, selectedOptions } = getSelectedValuesAndOptions();
emits("update:modelValue", selectCheckbox.value);
emits("confirm", selectedValue, selectedOptions);
};
const onPicker = () => {
if (disabled.value)
return;
show.value = true;
selectVal.value = currentSelect.value.map((option) => option.value);
};
__expose({
cancel,
confirm,
onPicker
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock(Fragment, null, [
createElementVNode("div", _hoisted_1, [
createVNode(unref(_sfc_main$1), {
modelValue: selectName.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectName.value = $event),
border: false,
placeholder: "请选择",
readonly: "",
disabled: unref(disabled),
onClick: onPicker
}, {
right: withCtx(() => [
createVNode(unref(v), { class: "arrow" })
]),
_: 1
}, 8, ["modelValue", "disabled"])
]),
createVNode(IcsPopup, {
visible: show.value,
"onUpdate:visible": _cache[2] || (_cache[2] = ($event) => show.value = $event),
position: "bottom",
"pop-class": "nut-select-multiple-popup"
}, {
default: withCtx(() => [
createElementVNode("div", _hoisted_2, [
createElementVNode("div", _hoisted_3, [
createElementVNode("div", {
class: "nut-picker__left",
onClick: cancel
}, toDisplayString(__props.cancelText), 1),
createElementVNode("div", _hoisted_4, toDisplayString(__props.title) + "选择", 1),
createElementVNode("div", {
class: "nut-picker__right",
onClick: confirm
}, toDisplayString(__props.okText), 1)
]),
createElementVNode("div", _hoisted_5, [
createVNode(_sfc_main$2, {
modelValue: selectCheckbox.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectCheckbox.value = $event),
direction: "horizontal",
gap: 0
}, {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (item) => {
return openBlock(), createBlock(_sfc_main$3, {
key: item.value,
label: item.value,
style: normalizeStyle({ height: optionHeight.value + "px" })
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(item.text), 1)
]),
_: 2
}, 1032, ["label", "style"]);
}), 128))
]),
_: 1
}, 8, ["modelValue"])
])
])
]),
_: 1
}, 8, ["visible"])
], 64);
};
}
}));
withInstall(_sfc_main);
export {
_sfc_main as CellSelectMultiple,
_sfc_main as default
};