@talex-touch/tuffex 0.3.3

package/dist/lib/tree-select/src/TxTreeSelect.vue2.js

@@ -0,0 +1,324 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const vue = require('vue');
+const TxCardItem = require('../../card-item/src/TxCardItem.vue.js');
+const TxCheckbox = require('../../checkbox/src/TxCheckbox.vue.js');
+const TxInput = require('../../input/src/TxInput.vue.js');
+const TxPopover = require('../../popover/src/TxPopover.vue.js');
+const TxTag_vue_vue_type_script_setup_true_lang = require('../../tag/src/TxTag.vue.js');
+;/* empty css                        */
+const TxTree = require('../../tree/src/TxTree.vue.js');
+
+const _hoisted_1 = ["tabindex", "aria-expanded"];
+const _hoisted_2 = { class: "tx-tree-select__value" };
+const _hoisted_3 = {
+  key: 0,
+  class: "tx-tree-select__tags"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "tx-tree-select__placeholder"
+};
+const _hoisted_5 = {
+  key: 0,
+  class: "tx-tree-select__text"
+};
+const _hoisted_6 = {
+  key: 1,
+  class: "tx-tree-select__placeholder"
+};
+const _hoisted_7 = {
+  key: 0,
+  class: "tx-tree-select__search"
+};
+const _hoisted_8 = { class: "tx-tree-select__list" };
+const _hoisted_9 = ["aria-label", "onClick"];
+const _hoisted_10 = {
+  key: 1,
+  class: "tx-tree-select__caret-placeholder",
+  "aria-hidden": "true"
+};
+const _hoisted_11 = { class: "tx-tree-select__label" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "TxTreeSelect" },
+  __name: "TxTreeSelect",
+  props: {
+    modelValue: {},
+    nodes: { default: () => [] },
+    multiple: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    placeholder: { default: "请选择" },
+    searchable: { type: Boolean, default: true },
+    clearable: { type: Boolean, default: true },
+    placement: { default: "bottom-start" },
+    dropdownOffset: { default: 6 },
+    dropdownWidth: { default: 0 },
+    dropdownMaxWidth: { default: 480 },
+    dropdownMaxHeight: { default: 320 },
+    defaultExpandedKeys: { default: () => [] }
+  },
+  emits: ["update:modelValue", "change", "open", "close"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const open = vue.ref(false);
+    const query = vue.ref("");
+    const triggerRef = vue.ref(null);
+    function walk(nodes, cb) {
+      for (const n of nodes) {
+        cb(n);
+        if (n.children?.length)
+          walk(n.children, cb);
+      }
+    }
+    const labelMap = vue.computed(() => {
+      const m = /* @__PURE__ */ new Map();
+      walk(props.nodes, (n) => {
+        m.set(n.key, n.label);
+      });
+      return m;
+    });
+    const selectedKeys = vue.computed(() => {
+      const v = props.modelValue;
+      if (props.multiple) {
+        const arr = Array.isArray(v) ? v : [];
+        return new Set(arr);
+      }
+      return typeof v === "string" || typeof v === "number" ? /* @__PURE__ */ new Set([v]) : /* @__PURE__ */ new Set();
+    });
+    const selectedLabels = vue.computed(() => {
+      const labels = [];
+      for (const k of selectedKeys.value) {
+        const l = labelMap.value.get(k);
+        if (l)
+          labels.push(l);
+      }
+      return labels;
+    });
+    function setValue(v) {
+      emit("update:modelValue", v);
+      emit("change", v);
+    }
+    function clear() {
+      if (props.disabled)
+        return;
+      setValue(props.multiple ? [] : void 0);
+    }
+    function onClearClick() {
+      clear();
+      open.value = false;
+    }
+    function onTreeUpdate(value) {
+      setValue(value);
+      if (!props.multiple)
+        open.value = false;
+    }
+    vue.watch(
+      open,
+      async (v) => {
+        if (v)
+          emit("open");
+        else
+          emit("close");
+        if (v && props.searchable) {
+          await vue.nextTick();
+        }
+        if (!v)
+          query.value = "";
+      },
+      { flush: "post" }
+    );
+    function onTriggerKeydown(e) {
+      if (props.disabled)
+        return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        open.value = !open.value;
+      }
+      if (e.key === "Escape") {
+        open.value = false;
+      }
+    }
+    __expose({
+      open: () => open.value = true,
+      close: () => open.value = false,
+      toggle: () => open.value = !open.value,
+      focus: () => triggerRef.value?.focus?.(),
+      blur: () => triggerRef.value?.blur?.(),
+      clear,
+      setValue,
+      getValue: () => props.modelValue,
+      getCheckedKeys: () => Array.from(selectedKeys.value)
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(TxPopover.default, {
+        modelValue: open.value,
+        "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => open.value = $event),
+        disabled: __props.disabled,
+        placement: __props.placement,
+        offset: __props.dropdownOffset,
+        width: __props.dropdownWidth,
+        "max-width": __props.dropdownMaxWidth,
+        "reference-full-width": true
+      }, {
+        reference: vue.withCtx(() => [
+          vue.createElementVNode("div", {
+            ref_key: "triggerRef",
+            ref: triggerRef,
+            class: vue.normalizeClass(["tx-tree-select", { "is-open": open.value, "is-disabled": __props.disabled }]),
+            tabindex: __props.disabled ? -1 : 0,
+            role: "combobox",
+            "aria-haspopup": "listbox",
+            "aria-expanded": open.value,
+            onKeydown: onTriggerKeydown
+          }, [
+            vue.createElementVNode("div", _hoisted_2, [
+              __props.multiple ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                selectedLabels.value.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(selectedLabels.value, (l, i) => {
+                    return vue.openBlock(), vue.createBlock(TxTag_vue_vue_type_script_setup_true_lang.default, {
+                      key: `${l}-${i}`,
+                      label: l
+                    }, null, 8, ["label"]);
+                  }), 128))
+                ])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, vue.toDisplayString(__props.placeholder), 1))
+              ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+                selectedLabels.value[0] ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5, vue.toDisplayString(selectedLabels.value[0]), 1)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_6, vue.toDisplayString(__props.placeholder), 1))
+              ], 64))
+            ]),
+            __props.clearable && !__props.disabled && selectedKeys.value.size ? (vue.openBlock(), vue.createElementBlock("button", {
+              key: 0,
+              type: "button",
+              class: "tx-tree-select__clear",
+              "aria-label": "Clear",
+              onClick: vue.withModifiers(onClearClick, ["stop"])
+            }, [..._cache[4] || (_cache[4] = [
+              vue.createElementVNode("svg", {
+                viewBox: "0 0 24 24",
+                width: "14",
+                height: "14"
+              }, [
+                vue.createElementVNode("path", {
+                  fill: "currentColor",
+                  d: "M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95 1.414-1.414z"
+                })
+              ], -1)
+            ])])) : vue.createCommentVNode("", true),
+            _cache[5] || (_cache[5] = vue.createElementVNode("span", {
+              class: "tx-tree-select__arrow",
+              "aria-hidden": "true"
+            }, [
+              vue.createElementVNode("svg", {
+                viewBox: "0 0 24 24",
+                width: "16",
+                height: "16"
+              }, [
+                vue.createElementVNode("path", {
+                  fill: "currentColor",
+                  d: "M12 15.0006L7.75732 10.758L9.17154 9.34375L12 12.1722L14.8284 9.34375L16.2426 10.758L12 15.0006Z"
+                })
+              ])
+            ], -1))
+          ], 42, _hoisted_1)
+        ]),
+        default: vue.withCtx(() => [
+          vue.createElementVNode("div", {
+            class: "tx-tree-select__panel",
+            role: "listbox",
+            style: vue.normalizeStyle({ maxHeight: `${__props.dropdownMaxHeight}px` })
+          }, [
+            __props.searchable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
+              vue.createVNode(TxInput.default, {
+                modelValue: query.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => query.value = $event),
+                placeholder: "Search",
+                clearable: ""
+              }, null, 8, ["modelValue"])
+            ])) : vue.createCommentVNode("", true),
+            vue.createElementVNode("div", _hoisted_8, [
+              vue.createVNode(TxTree.default, {
+                nodes: __props.nodes,
+                "model-value": __props.modelValue,
+                multiple: __props.multiple,
+                checkable: __props.multiple,
+                disabled: __props.disabled,
+                "default-expanded-keys": __props.defaultExpandedKeys,
+                "filter-text": query.value,
+                indent: 16,
+                "onUpdate:modelValue": onTreeUpdate
+              }, {
+                item: vue.withCtx(({ node, level, hasChildren, expanded, selected, toggleExpand, toggleSelect, indent }) => [
+                  vue.createVNode(TxCardItem.default, {
+                    class: vue.normalizeClass(["tx-tree-select__item", { "is-disabled": node.disabled, "is-selected": selected }]),
+                    clickable: !node.disabled,
+                    disabled: !!node.disabled,
+                    active: selected,
+                    style: vue.normalizeStyle({ paddingLeft: `${10 + level * indent}px` }),
+                    onClick: ($event) => toggleSelect()
+                  }, {
+                    avatar: vue.withCtx(() => [
+                      vue.createElementVNode("div", {
+                        class: "tx-tree-select__left",
+                        onClick: _cache[2] || (_cache[2] = vue.withModifiers(() => {
+                        }, ["stop"]))
+                      }, [
+                        hasChildren ? (vue.openBlock(), vue.createElementBlock("button", {
+                          key: 0,
+                          type: "button",
+                          class: "tx-tree-select__caret",
+                          "aria-label": expanded ? "Collapse" : "Expand",
+                          onClick: vue.withModifiers(($event) => toggleExpand(), ["stop"])
+                        }, [
+                          (vue.openBlock(), vue.createElementBlock("svg", {
+                            viewBox: "0 0 24 24",
+                            width: "14",
+                            height: "14",
+                            style: vue.normalizeStyle({ transform: expanded ? "rotate(90deg)" : "rotate(0deg)" })
+                          }, [..._cache[6] || (_cache[6] = [
+                            vue.createElementVNode("path", {
+                              fill: "currentColor",
+                              d: "M10 6l6 6-6 6"
+                            }, null, -1)
+                          ])], 4))
+                        ], 8, _hoisted_9)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_10)),
+                        __props.multiple ? (vue.openBlock(), vue.createBlock(TxCheckbox.default, {
+                          key: 2,
+                          "model-value": selected,
+                          disabled: !!node.disabled,
+                          "aria-label": "Select",
+                          onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
+                          }, ["stop"])),
+                          "onUpdate:modelValue": () => toggleSelect()
+                        }, null, 8, ["model-value", "disabled", "onUpdate:modelValue"])) : vue.createCommentVNode("", true)
+                      ])
+                    ]),
+                    title: vue.withCtx(() => [
+                      vue.renderSlot(_ctx.$slots, "node", {
+                        node,
+                        level,
+                        expanded,
+                        selected
+                      }, () => [
+                        vue.createElementVNode("span", _hoisted_11, vue.toDisplayString(node.label), 1)
+                      ], true)
+                    ]),
+                    _: 2
+                  }, 1032, ["class", "clickable", "disabled", "active", "style", "onClick"])
+                ]),
+                empty: vue.withCtx(() => [..._cache[7] || (_cache[7] = [
+                  vue.createElementVNode("div", { class: "tx-tree-select__empty" }, " No results ", -1)
+                ])]),
+                _: 3
+              }, 8, ["nodes", "model-value", "multiple", "checkable", "disabled", "default-expanded-keys", "filter-text"])
+            ])
+          ], 4)
+        ]),
+        _: 3
+      }, 8, ["modelValue", "disabled", "placement", "offset", "width", "max-width"]);
+    };
+  }
+});
+
+exports.default = _sfc_main;