init
This commit is contained in:
1
es/treeSelect/index.css
Normal file
1
es/treeSelect/index.css
Normal file
@@ -0,0 +1 @@
|
||||
.layui-tree-select{width:220px}.layui-tree-select-content{padding:10px}.layui-tree-select .layui-icon-triangle-d{transition:all .3s;-webkit-transition:all .3s;color:var(--global-neutral-color-8)}.layui-tree-select .layui-icon-triangle-d.triangle{transform:rotate(180deg)}
|
||||
178
es/treeSelect/index.js
Normal file
178
es/treeSelect/index.js
Normal file
@@ -0,0 +1,178 @@
|
||||
import { w as withInstall } from "../badge/index2.js";
|
||||
import { defineComponent, ref, computed, watch, resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, createElementVNode, unref, isRef, createBlock } from "vue";
|
||||
var index = /* @__PURE__ */ (() => ".layui-tree-select{width:220px}.layui-tree-select-content{padding:10px}.layui-tree-select .layui-icon-triangle-d{transition:all .3s;-webkit-transition:all .3s;color:var(--global-neutral-color-8)}.layui-tree-select .layui-icon-triangle-d.triangle{transform:rotate(180deg)}\n")();
|
||||
function getNode(root, id) {
|
||||
let resultNode = null;
|
||||
findNode(root, id);
|
||||
function findNode(root2, id2) {
|
||||
if (!!root2) {
|
||||
let type = Object.prototype.toString.call(root2);
|
||||
if (type === "[object Object]") {
|
||||
if (root2.id && root2.id === id2) {
|
||||
resultNode = root2;
|
||||
} else {
|
||||
let node = root2.children || null;
|
||||
findNode(node, id2);
|
||||
}
|
||||
} else if (type === "[object Array]") {
|
||||
let needNode = root2.find((i) => !!i === true && i.id === id2);
|
||||
if (!!needNode) {
|
||||
resultNode = needNode;
|
||||
} else {
|
||||
if (root2.length) {
|
||||
root2.forEach((item) => {
|
||||
if (item && item.children) {
|
||||
let node = item.children;
|
||||
if (node && node.length) {
|
||||
findNode(node, id2);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return resultNode;
|
||||
}
|
||||
const _hoisted_1 = { class: "layui-tree-select-content" };
|
||||
const __default__ = {
|
||||
name: "LayTreeSelect"
|
||||
};
|
||||
const _sfc_main = defineComponent({
|
||||
...__default__,
|
||||
props: {
|
||||
data: null,
|
||||
modelValue: null,
|
||||
disabled: { type: Boolean, default: false },
|
||||
placeholder: { default: "\u8BF7\u9009\u62E9" },
|
||||
multiple: { type: Boolean, default: false },
|
||||
allowClear: { type: Boolean, default: false },
|
||||
collapseTagsTooltip: { type: Boolean, default: true },
|
||||
minCollapsedNum: { default: 3 },
|
||||
size: { default: "md" },
|
||||
checkStrictly: { type: Boolean, default: true }
|
||||
},
|
||||
emits: ["update:modelValue", "change", "search"],
|
||||
setup(__props, { emit: emits }) {
|
||||
const props = __props;
|
||||
const singleValue = ref();
|
||||
const multipleValue = ref(["1"]);
|
||||
const openState = ref(false);
|
||||
const dropdownRef = ref();
|
||||
const selectedValue = computed({
|
||||
get() {
|
||||
return props.modelValue;
|
||||
},
|
||||
set(value) {
|
||||
emits("update:modelValue", value);
|
||||
emits("change", value);
|
||||
}
|
||||
});
|
||||
const checkedKeys = computed({
|
||||
get() {
|
||||
return props.multiple ? props.modelValue : [];
|
||||
},
|
||||
set(value) {
|
||||
if (props.multiple) {
|
||||
emits("update:modelValue", value);
|
||||
emits("change", value);
|
||||
}
|
||||
}
|
||||
});
|
||||
watch(selectedValue, () => {
|
||||
if (props.multiple) {
|
||||
multipleValue.value = selectedValue.value.map((value) => {
|
||||
const node = getNode(props.data, value);
|
||||
node.label = node.title;
|
||||
node.closable = !node.disabled;
|
||||
return node;
|
||||
});
|
||||
} else {
|
||||
const node = getNode(props.data, selectedValue.value);
|
||||
if (node) {
|
||||
singleValue.value = node.title;
|
||||
}
|
||||
}
|
||||
}, { immediate: true, deep: true });
|
||||
const handleClick = (node) => {
|
||||
dropdownRef.value.hide();
|
||||
selectedValue.value = node.id;
|
||||
};
|
||||
return (_ctx, _cache) => {
|
||||
const _component_lay_icon = resolveComponent("lay-icon");
|
||||
const _component_lay_tag_input = resolveComponent("lay-tag-input");
|
||||
const _component_lay_input = resolveComponent("lay-input");
|
||||
const _component_lay_tree = resolveComponent("lay-tree");
|
||||
const _component_lay_dropdown = resolveComponent("lay-dropdown");
|
||||
return openBlock(), createElementBlock("div", {
|
||||
class: normalizeClass(["layui-tree-select", { "layui-disabled": __props.disabled }])
|
||||
}, [
|
||||
createVNode(_component_lay_dropdown, {
|
||||
ref_key: "dropdownRef",
|
||||
ref: dropdownRef,
|
||||
disabled: __props.disabled,
|
||||
"update-at-scroll": true,
|
||||
onShow: _cache[4] || (_cache[4] = ($event) => openState.value = true),
|
||||
onHide: _cache[5] || (_cache[5] = ($event) => openState.value = false)
|
||||
}, {
|
||||
content: withCtx(() => [
|
||||
createElementVNode("div", _hoisted_1, [
|
||||
createVNode(_component_lay_tree, {
|
||||
data: __props.data,
|
||||
onlyIconControl: true,
|
||||
"show-checkbox": __props.multiple,
|
||||
"check-strictly": __props.checkStrictly,
|
||||
selectedKey: unref(selectedValue),
|
||||
"onUpdate:selectedKey": _cache[2] || (_cache[2] = ($event) => isRef(selectedValue) ? selectedValue.value = $event : null),
|
||||
checkedKeys: unref(checkedKeys),
|
||||
"onUpdate:checkedKeys": _cache[3] || (_cache[3] = ($event) => isRef(checkedKeys) ? checkedKeys.value = $event : null),
|
||||
onNodeClick: handleClick
|
||||
}, null, 8, ["data", "show-checkbox", "check-strictly", "selectedKey", "checkedKeys"])
|
||||
])
|
||||
]),
|
||||
default: withCtx(() => [
|
||||
__props.multiple ? (openBlock(), createBlock(_component_lay_tag_input, {
|
||||
key: 0,
|
||||
size: __props.size,
|
||||
"allow-clear": __props.allowClear,
|
||||
placeholder: __props.placeholder,
|
||||
collapseTagsTooltip: __props.collapseTagsTooltip,
|
||||
minCollapsedNum: __props.minCollapsedNum,
|
||||
disabledInput: true,
|
||||
modelValue: multipleValue.value,
|
||||
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => multipleValue.value = $event)
|
||||
}, {
|
||||
suffix: withCtx(() => [
|
||||
createVNode(_component_lay_icon, {
|
||||
type: "layui-icon-triangle-d",
|
||||
class: normalizeClass({ triangle: openState.value })
|
||||
}, null, 8, ["class"])
|
||||
]),
|
||||
_: 1
|
||||
}, 8, ["size", "allow-clear", "placeholder", "collapseTagsTooltip", "minCollapsedNum", "modelValue"])) : (openBlock(), createBlock(_component_lay_input, {
|
||||
key: 1,
|
||||
modelValue: singleValue.value,
|
||||
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => singleValue.value = $event),
|
||||
placeholder: __props.placeholder,
|
||||
disabled: __props.disabled,
|
||||
readonly: true,
|
||||
size: __props.size
|
||||
}, {
|
||||
suffix: withCtx(() => [
|
||||
createVNode(_component_lay_icon, {
|
||||
type: "layui-icon-triangle-d",
|
||||
class: normalizeClass({ triangle: openState.value })
|
||||
}, null, 8, ["class"])
|
||||
]),
|
||||
_: 1
|
||||
}, 8, ["modelValue", "placeholder", "disabled", "size"]))
|
||||
]),
|
||||
_: 1
|
||||
}, 8, ["disabled"])
|
||||
], 2);
|
||||
};
|
||||
}
|
||||
});
|
||||
const component = withInstall(_sfc_main);
|
||||
export { component as default };
|
||||
Reference in New Issue
Block a user