@talex-touch/tuffex 0.3.3

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

@@ -0,0 +1,320 @@
+import { defineComponent, ref, computed, watch, nextTick, createBlock, openBlock, withCtx, createElementVNode, normalizeStyle, createElementBlock, createCommentVNode, createVNode, normalizeClass, renderSlot, toDisplayString, withModifiers, Fragment, renderList } from 'vue';
+import TxCardItem from '../../card-item/src/TxCardItem.vue.js';
+import TxCheckbox from '../../checkbox/src/TxCheckbox.vue.js';
+import TuffInput from '../../input/src/TxInput.vue.js';
+import TxPopover from '../../popover/src/TxPopover.vue.js';
+import _sfc_main$1 from '../../tag/src/TxTag.vue.js';
+/* empty css                       */
+import TxTree from '../../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__ */ 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 = ref(false);
+    const query = ref("");
+    const triggerRef = ref(null);
+    function walk(nodes, cb) {
+      for (const n of nodes) {
+        cb(n);
+        if (n.children?.length)
+          walk(n.children, cb);
+      }
+    }
+    const labelMap = computed(() => {
+      const m = /* @__PURE__ */ new Map();
+      walk(props.nodes, (n) => {
+        m.set(n.key, n.label);
+      });
+      return m;
+    });
+    const selectedKeys = 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 = 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;
+    }
+    watch(
+      open,
+      async (v) => {
+        if (v)
+          emit("open");
+        else
+          emit("close");
+        if (v && props.searchable) {
+          await 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 openBlock(), createBlock(TxPopover, {
+        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: withCtx(() => [
+          createElementVNode("div", {
+            ref_key: "triggerRef",
+            ref: triggerRef,
+            class: 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
+          }, [
+            createElementVNode("div", _hoisted_2, [
+              __props.multiple ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                selectedLabels.value.length ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(selectedLabels.value, (l, i) => {
+                    return openBlock(), createBlock(_sfc_main$1, {
+                      key: `${l}-${i}`,
+                      label: l
+                    }, null, 8, ["label"]);
+                  }), 128))
+                ])) : (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.placeholder), 1))
+              ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                selectedLabels.value[0] ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(selectedLabels.value[0]), 1)) : (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(__props.placeholder), 1))
+              ], 64))
+            ]),
+            __props.clearable && !__props.disabled && selectedKeys.value.size ? (openBlock(), createElementBlock("button", {
+              key: 0,
+              type: "button",
+              class: "tx-tree-select__clear",
+              "aria-label": "Clear",
+              onClick: withModifiers(onClearClick, ["stop"])
+            }, [..._cache[4] || (_cache[4] = [
+              createElementVNode("svg", {
+                viewBox: "0 0 24 24",
+                width: "14",
+                height: "14"
+              }, [
+                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)
+            ])])) : createCommentVNode("", true),
+            _cache[5] || (_cache[5] = createElementVNode("span", {
+              class: "tx-tree-select__arrow",
+              "aria-hidden": "true"
+            }, [
+              createElementVNode("svg", {
+                viewBox: "0 0 24 24",
+                width: "16",
+                height: "16"
+              }, [
+                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: withCtx(() => [
+          createElementVNode("div", {
+            class: "tx-tree-select__panel",
+            role: "listbox",
+            style: normalizeStyle({ maxHeight: `${__props.dropdownMaxHeight}px` })
+          }, [
+            __props.searchable ? (openBlock(), createElementBlock("div", _hoisted_7, [
+              createVNode(TuffInput, {
+                modelValue: query.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => query.value = $event),
+                placeholder: "Search",
+                clearable: ""
+              }, null, 8, ["modelValue"])
+            ])) : createCommentVNode("", true),
+            createElementVNode("div", _hoisted_8, [
+              createVNode(TxTree, {
+                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: withCtx(({ node, level, hasChildren, expanded, selected, toggleExpand, toggleSelect, indent }) => [
+                  createVNode(TxCardItem, {
+                    class: normalizeClass(["tx-tree-select__item", { "is-disabled": node.disabled, "is-selected": selected }]),
+                    clickable: !node.disabled,
+                    disabled: !!node.disabled,
+                    active: selected,
+                    style: normalizeStyle({ paddingLeft: `${10 + level * indent}px` }),
+                    onClick: ($event) => toggleSelect()
+                  }, {
+                    avatar: withCtx(() => [
+                      createElementVNode("div", {
+                        class: "tx-tree-select__left",
+                        onClick: _cache[2] || (_cache[2] = withModifiers(() => {
+                        }, ["stop"]))
+                      }, [
+                        hasChildren ? (openBlock(), createElementBlock("button", {
+                          key: 0,
+                          type: "button",
+                          class: "tx-tree-select__caret",
+                          "aria-label": expanded ? "Collapse" : "Expand",
+                          onClick: withModifiers(($event) => toggleExpand(), ["stop"])
+                        }, [
+                          (openBlock(), createElementBlock("svg", {
+                            viewBox: "0 0 24 24",
+                            width: "14",
+                            height: "14",
+                            style: normalizeStyle({ transform: expanded ? "rotate(90deg)" : "rotate(0deg)" })
+                          }, [..._cache[6] || (_cache[6] = [
+                            createElementVNode("path", {
+                              fill: "currentColor",
+                              d: "M10 6l6 6-6 6"
+                            }, null, -1)
+                          ])], 4))
+                        ], 8, _hoisted_9)) : (openBlock(), createElementBlock("span", _hoisted_10)),
+                        __props.multiple ? (openBlock(), createBlock(TxCheckbox, {
+                          key: 2,
+                          "model-value": selected,
+                          disabled: !!node.disabled,
+                          "aria-label": "Select",
+                          onClick: _cache[1] || (_cache[1] = withModifiers(() => {
+                          }, ["stop"])),
+                          "onUpdate:modelValue": () => toggleSelect()
+                        }, null, 8, ["model-value", "disabled", "onUpdate:modelValue"])) : createCommentVNode("", true)
+                      ])
+                    ]),
+                    title: withCtx(() => [
+                      renderSlot(_ctx.$slots, "node", {
+                        node,
+                        level,
+                        expanded,
+                        selected
+                      }, () => [
+                        createElementVNode("span", _hoisted_11, toDisplayString(node.label), 1)
+                      ], true)
+                    ]),
+                    _: 2
+                  }, 1032, ["class", "clickable", "disabled", "active", "style", "onClick"])
+                ]),
+                empty: withCtx(() => [..._cache[7] || (_cache[7] = [
+                  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"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/es/tree-select/src/types.d.ts

@@ -0,0 +1,31 @@
+import { PopoverPlacement } from '../../popover/src/types';
+
+export type TreeSelectKey = string | number;
+export interface TreeSelectNode {
+    key: TreeSelectKey;
+    label: string;
+    disabled?: boolean;
+    children?: TreeSelectNode[];
+}
+export type TreeSelectValue = TreeSelectKey | TreeSelectKey[] | undefined;
+export interface TreeSelectProps {
+    modelValue?: TreeSelectValue;
+    nodes?: TreeSelectNode[];
+    multiple?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    searchable?: boolean;
+    clearable?: boolean;
+    placement?: PopoverPlacement;
+    dropdownOffset?: number;
+    dropdownWidth?: number;
+    dropdownMaxWidth?: number;
+    dropdownMaxHeight?: number;
+    defaultExpandedKeys?: TreeSelectKey[];
+}
+export interface TreeSelectEmits {
+    (e: 'update:modelValue', v: TreeSelectValue): void;
+    (e: 'change', v: TreeSelectValue): void;
+    (e: 'open'): void;
+    (e: 'close'): void;
+}