@wfrog/vc-ui 1.12.4 → 1.13.0

package/dist/es/components/tree-select/tree-select.mjs

@@ -0,0 +1,222 @@
+import './index.css'
+import { ElPopover, ElScrollbar, ElTree, ElCascader } from 'element-plus/es';
+import 'element-plus/es/components/base/style/css';
+import 'element-plus/es/components/popover/style/css';
+import 'element-plus/es/components/cascader/style/css';
+import 'element-plus/es/components/scrollbar/style/css';
+import 'element-plus/es/components/tree/style/css';
+import { defineComponent, useCssVars, unref, computed, useCssModule, ref, useTemplateRef, watch, onMounted, createBlock, openBlock, withCtx, createElementVNode, normalizeClass, createVNode, mergeProps, isRef, createTextVNode, toDisplayString, nextTick } from 'vue';
+import { useFormDisabled, useFormItem } from 'element-plus';
+import { f as formatToPx } from '../../chunk/DZ5W9TaA.mjs';
+import { useVModel, useToggle, onClickOutside, useThrottleFn } from '@vueuse/core';
+import { _ as _export_sfc } from '../../chunk/pcqpp-6-.mjs';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "tree-select",
+  props: {
+    emptyText: { default: "暂无数据" },
+    placeholder: { default: "请选择" },
+    disabled: { type: Boolean, default: void 0 },
+    multiple: { type: Boolean, default: false },
+    checkStrictly: { type: Boolean },
+    modelValue: {},
+    options: { default: () => [] },
+    props: { default: () => ({}) },
+    width: {},
+    filterable: { type: Boolean },
+    filterEmptyText: { default: "没有匹配到数据" },
+    clearable: { type: Boolean, default: true }
+  },
+  emits: ["update:modelValue", "change", "blur"],
+  setup(__props, { emit: __emit }) {
+    useCssVars((_ctx) => ({
+      "v53d289be": unref(myWidth)
+    }));
+    const props = __props;
+    const emits = __emit;
+    const myValue = useVModel(props, "modelValue", emits);
+    const [popoverVisible, togglePopoverVisible] = useToggle();
+    const formDisabled = useFormDisabled();
+    const { formItem } = useFormItem();
+    const valueKey = computed(() => props.props.value || "value");
+    const cascaderProps = computed(() => ({
+      value: valueKey.value,
+      multiple: props.multiple,
+      emitPath: false,
+      checkStrictly: props.checkStrictly,
+      ...props.props
+    }));
+    const $style = useCssModule();
+    const selectClassName = computed(() => ({ [$style["is-active"]]: popoverVisible.value }));
+    const wrapperClassName = computed(() => ({ [$style["cascader-width"]]: !!props.width }));
+    const myWidth = computed(() => props.width ? formatToPx(props.width) : "auto");
+    const keyword = ref("");
+    function handleChange(node) {
+      formItem?.validate?.("change").catch(() => {
+      });
+      emits("change", myValue.value, node);
+    }
+    const treeRef = useTemplateRef("treeRef");
+    function syncTreeState(val) {
+      nextTick(() => {
+        if (props.multiple) {
+          treeRef.value?.setCheckedKeys(Array.isArray(val) ? val : [], false);
+        } else {
+          treeRef.value?.setCurrentKey(val, true);
+        }
+      });
+    }
+    watch(() => myValue.value, syncTreeState);
+    onMounted(() => syncTreeState(myValue.value));
+    function handleCheck() {
+      if (!props.multiple) {
+        return;
+      }
+      const checkedKeys = treeRef.value?.getCheckedKeys(!props.checkStrictly) || [];
+      myValue.value = checkedKeys;
+      const checkedNodes = treeRef.value?.getCheckedNodes(!props.checkStrictly) || [];
+      handleChange(checkedNodes);
+    }
+    function handleNodeClick(data, node) {
+      if (props.multiple) {
+        return;
+      }
+      if (props.checkStrictly || node.isLeaf) {
+        myValue.value = data[valueKey.value];
+        handleChange(node);
+        togglePopoverVisible(false);
+      }
+    }
+    const containerRef = useTemplateRef("containerRef");
+    onClickOutside(containerRef, (event) => {
+      let target = event.target;
+      let result = false;
+      do {
+        result = target.classList ? target.classList.contains($style.cascader) : false;
+        target = target.parentNode;
+      } while (result === false && target !== null && target.nodeName !== "BODY");
+      !result && togglePopoverVisible(false);
+    });
+    function clear() {
+      myValue.value = props.multiple ? [] : void 0;
+      treeRef.value?.setCheckedKeys([], false);
+      togglePopoverVisible(false);
+    }
+    function handleKeyup(event) {
+      keyword.value = event.target.value;
+    }
+    const handleSelectClick = useThrottleFn(() => !formDisabled.value && togglePopoverVisible(), 300);
+    function handleBlur(event) {
+      formItem?.validate?.("blur").catch(() => {
+      });
+      setTimeout(() => {
+        keyword.value = "";
+      }, 300);
+      emits("blur", event);
+    }
+    return (_ctx, _cache) => {
+      const _component_ElTree = ElTree;
+      const _component_ElScrollbar = ElScrollbar;
+      const _component_ElCascader = ElCascader;
+      const _component_ElPopover = ElPopover;
+      return openBlock(), createBlock(_component_ElPopover, {
+        visible: unref(popoverVisible) && !unref(keyword),
+        placement: "bottom",
+        "popper-class": unref($style).popover,
+        disabled: __props.filterable && !!unref(keyword)
+      }, {
+        reference: withCtx(() => [
+          createElementVNode("div", {
+            class: normalizeClass(unref(wrapperClassName)),
+            onClickCapture: _cache[1] || (_cache[1] = //@ts-ignore
+            (...args) => unref(handleSelectClick) && unref(handleSelectClick)(...args)),
+            onKeyup: handleKeyup
+          }, [
+            createVNode(_component_ElCascader, mergeProps({
+              modelValue: unref(myValue),
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(myValue) ? myValue.value = $event : null),
+              "collapse-tags": "",
+              "collapse-tags-tooltip": "",
+              clearable: __props.clearable,
+              options: __props.options,
+              placeholder: __props.placeholder,
+              filterable: __props.filterable,
+              props: unref(cascaderProps),
+              class: [unref(selectClassName), unref($style).cascader],
+              "popper-class": { [unref($style)["cascader-popover"]]: !__props.filterable || !unref(keyword), [unref($style)["cascader-panel"]]: !!unref(keyword) },
+              disabled: unref(formDisabled)
+            }, _ctx.$attrs, {
+              onClear: clear,
+              onBlur: handleBlur
+            }), {
+              empty: withCtx(() => [
+                createTextVNode(toDisplayString(__props.filterEmptyText), 1)
+              ]),
+              _: 1
+            }, 16, ["modelValue", "clearable", "options", "placeholder", "filterable", "props", "class", "popper-class", "disabled"])
+          ], 34)
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", {
+            ref_key: "containerRef",
+            ref: containerRef,
+            class: normalizeClass(unref($style).container)
+          }, [
+            createVNode(_component_ElScrollbar, {
+              "view-class": unref($style)["scrollbar-view"]
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_ElTree, {
+                  ref_key: "treeRef",
+                  ref: treeRef,
+                  data: __props.options,
+                  "node-key": unref(valueKey),
+                  props: props.props,
+                  "empty-text": __props.emptyText,
+                  "show-checkbox": __props.multiple,
+                  "check-on-click-node": __props.multiple,
+                  "expand-on-click-node": !__props.multiple && !__props.checkStrictly,
+                  "default-expand-all": true,
+                  "highlight-current": !__props.multiple,
+                  "check-strictly": __props.checkStrictly,
+                  onCheck: handleCheck,
+                  onNodeClick: handleNodeClick
+                }, null, 8, ["data", "node-key", "props", "empty-text", "show-checkbox", "check-on-click-node", "expand-on-click-node", "highlight-current", "check-strictly"])
+              ]),
+              _: 1
+            }, 8, ["view-class"])
+          ], 2)
+        ]),
+        _: 1
+      }, 8, ["visible", "popper-class", "disabled"]);
+    };
+  }
+});
+
+/* unplugin-vue-components disabled */const popover = "_popover_miab9_1";
+const container = "_container_miab9_7";
+const wrapper = "_wrapper_miab9_24";
+const cascader = "_cascader_miab9_31";
+const style0 = {
+	popover: popover,
+	container: container,
+	"scrollbar-view": "_scrollbar-view_miab9_20",
+	wrapper: wrapper,
+	cascader: cascader,
+	"cascader-width": "_cascader-width_miab9_38",
+	"is-active": "_is-active_miab9_42",
+	"cascader-popover": "_cascader-popover_miab9_49",
+	"cascader-panel": "_cascader-panel_miab9_53"
+};
+
+const cssModules = {
+  "$style": style0
+};
+const Component = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+
+const __vite_glob_0_61 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  default: Component
+}, Symbol.toStringTag, { value: 'Module' }));
+
+export { Component as C, __vite_glob_0_61 as _ };