@ctsy/layui-vue
Version:
a component library for Vue 3 base on layui-vue
230 lines (229 loc) • 9.46 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, ref, watch, computed, provide, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, withDirectives, isRef, vModelText, unref, Fragment, renderList, createBlock, withCtx, toDisplayString, createCommentVNode, renderSlot } from "vue";
import { _ as _sfc_main$1 } from "../index7.js";
import { o as onClickOutside } from "../index4.js";
import "../checkbox/index.js";
var index = "";
const _hoisted_1 = ["placeholder", "disabled", "name"];
const _hoisted_2 = {
key: 0,
class: "layui-multiple-select-row"
};
const _hoisted_3 = { class: "layui-multiple-select-badge" };
const _hoisted_4 = ["onClick"];
const _hoisted_5 = { class: "layui-anim layui-anim-upbit" };
const __default__ = {
name: "LaySelect"
};
const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
props: {
modelValue: { default: null },
name: null,
placeholder: { default: "\u8BF7\u9009\u62E9" },
disabled: { type: Boolean, default: false },
showEmpty: { type: Boolean, default: true },
emptyMessage: null,
multiple: { type: Boolean, default: false },
create: { type: Boolean, default: false },
items: null
},
emits: ["update:modelValue", "change", "search", "create"],
setup(__props, { emit }) {
const props = __props;
const selectRef = ref(null);
onClickOutside(selectRef, (event) => {
openState.value = false;
});
const openState = ref(false);
const open = function() {
if (props.disabled) {
openState.value = false;
return;
}
openState.value = !openState.value;
console.log(props.create);
};
const selectItem = ref({
value: !props.multiple ? props.modelValue : props.modelValue ? [].concat(props.modelValue) : [],
label: props.multiple ? [] : null,
multiple: props.multiple
});
watch(() => selectItem.value.value, (val) => {
emit("update:modelValue", val);
emit("change", val);
}, {
deep: true
});
watch(props, () => {
let value2 = props.modelValue;
if (props.multiple) {
if (Array.isArray(value2)) {
selectItem.value.value = value2;
selectItem.value.label = value2.map((o) => ItemsMap.value[o]);
} else {
console.error("\u591A\u9009\u65F6\u8BF7\u4F20\u5165\u6570\u7EC4\u503C");
}
} else {
selectItem.value.value = value2;
selectItem.value.label = ItemsMap.value[value2] || "";
}
});
const disabledItemMap = {};
const txt = ref("");
const input = ref(false);
const value = computed({
set(v) {
txt.value = v;
emit("search", v);
},
get() {
if (input.value) {
return txt.value;
}
return !selectItem.value.multiple && selectItem.value.value !== null ? selectItem.value.label : null;
}
});
const selectItemHandle = async function(_selectItem, isChecked) {
if (!props.multiple) {
openState.value = false;
}
txt.value = "";
disabledItemMap[_selectItem.value] = _selectItem.disabled;
if (typeof isChecked !== "boolean") {
props.multiple ? selectItem.value.label.push(_selectItem.label) : selectItem.value.label = _selectItem.label;
return;
}
let values = selectItem.value.value;
if (props.multiple && Array.isArray(values)) {
const _values = values;
const _labels = selectItem.value.label;
if (isChecked) {
_values.push(_selectItem.value);
_labels.push(_selectItem.label);
} else {
_values.splice(_values.indexOf(_selectItem.value), 1);
_labels.splice(_labels.indexOf(_selectItem.label), 1);
}
selectItem.value.value = _values;
selectItem.value.label = _labels;
} else {
selectItem.value.value = _selectItem.value;
selectItem.value.label = _selectItem.label;
}
};
const removeItemHandle = function(e, _selectItem) {
e.stopPropagation();
selectItemHandle(_selectItem, false);
};
const ItemsMap = ref({});
const selectItemPush = function(p) {
if (p.value !== null) {
ItemsMap.value[p.value] = p.label;
}
};
provide("selectItemHandle", selectItemHandle);
provide("selectItemPush", selectItemPush);
provide("selectItem", selectItem);
provide("keyword", txt);
return (_ctx, _cache) => {
var _a, _b;
const _component_lay_badge = resolveComponent("lay-badge");
return openBlock(), createElementBlock("div", {
ref_key: "selectRef",
ref: selectRef,
class: normalizeClass(["layui-unselect layui-form-select", { "layui-form-selected": openState.value }])
}, [
createElementVNode("div", {
class: "layui-select-title",
onClick: open
}, [
withDirectives(createElementVNode("input", {
type: "text",
placeholder: selectItem.value.value !== null && Array.isArray(selectItem.value.value) && selectItem.value.value.length > 0 ? "" : (_a = __props.emptyMessage) != null ? _a : __props.placeholder,
disabled: __props.disabled,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(value) ? value.value = $event : null),
onInput: _cache[1] || (_cache[1] = ($event) => input.value = true),
onBlur: _cache[2] || (_cache[2] = ($event) => input.value = false),
name: __props.name,
class: normalizeClass([
"layui-input",
"layui-unselect",
{ "layui-disabled": __props.disabled }
])
}, null, 42, _hoisted_1), [
[vModelText, unref(value)]
]),
createElementVNode("i", {
class: normalizeClass(["layui-edge", { "layui-disabled": __props.disabled }])
}, null, 2),
selectItem.value.multiple && Array.isArray(selectItem.value.label) ? (openBlock(), createElementBlock("div", _hoisted_2, [
createElementVNode("div", _hoisted_3, [
(openBlock(true), createElementBlock(Fragment, null, renderList(selectItem.value.label, (item, index2) => {
return openBlock(), createBlock(_component_lay_badge, {
key: index2,
theme: "green"
}, {
default: withCtx(() => [
createElementVNode("span", null, toDisplayString(item), 1),
!__props.disabled && !(Array.isArray(selectItem.value.value) && selectItem.value.value.length > 0 && disabledItemMap[selectItem.value.value[index2]]) ? (openBlock(), createElementBlock("i", {
key: 0,
class: normalizeClass(["layui-icon", { "layui-icon-close": true }]),
onClick: ($event) => removeItemHandle($event, {
label: item,
value: Array.isArray(selectItem.value.value) ? selectItem.value.value[index2] : null
})
}, null, 8, _hoisted_4)) : createCommentVNode("", true)
]),
_: 2
}, 1024);
}), 128))
])
])) : createCommentVNode("", true)
]),
createElementVNode("dl", _hoisted_5, [
!__props.multiple && __props.showEmpty && !props.create ? (openBlock(), createBlock(_sfc_main$1, {
key: 0,
value: null,
label: (_b = __props.emptyMessage) != null ? _b : __props.placeholder
}, null, 8, ["label"])) : createCommentVNode("", true),
props.create ? (openBlock(), createElementBlock("dd", {
key: 1,
onClick: _cache[3] || (_cache[3] = ($event) => emit("create", txt.value))
}, toDisplayString(txt.value), 1)) : createCommentVNode("", true),
props.items ? (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(props.items, (v, k) => {
return openBlock(), createBlock(_sfc_main$1, {
key: k,
value: v.value,
label: v.label,
disabled: v.disabled,
keyword: v.keyword
}, null, 8, ["value", "label", "disabled", "keyword"]);
}), 128)) : createCommentVNode("", true),
renderSlot(_ctx.$slots, "default")
])
], 2);
};
}
}));
_sfc_main.install = (app) => {
app.component(_sfc_main.name, _sfc_main);
};
export { _sfc_main as default };