@fewangsit/wangsvue 1.5.219-alpha.0 → 1.5.219-alpha.2

package/dialogselecttree/index.es.js

@@ -1,23 +1,26 @@
-import { defineComponent as G, mergeModels as T, useModel as P, inject as U, ref as o, computed as W, watch as b, createBlock as N, openBlock as d, unref as v, createSlots as O, withCtx as g, createVNode as B, mergeProps as z, renderSlot as D, createElementVNode as K, createElementBlock as k, createCommentVNode as h, normalizeClass as V, toDisplayString as L, Fragment as I, renderList as Y, withDirectives as q, vShow as J } from "vue";
-import { g as Q } from "../utils/object.util.es.js";
-import { _ as j } from "../button/index.es.js";
-import { _ as R } from "../dialog/index.es.js";
-import { _ as X } from "../tree/index.es.js";
-import { _ as Z } from "../treesearchinput/index.es.js";
-import { _ } from "../validatormessage/index.es.js";
-const ee = {
+import { defineComponent, mergeModels, useModel, inject, ref, computed, watch, createBlock, openBlock, unref, createSlots, withCtx, createVNode, mergeProps, renderSlot, createElementVNode, createElementBlock, createCommentVNode, normalizeClass, toDisplayString, Fragment, renderList, withDirectives, vShow } from "vue";
+import { g as getNestedPropertyValue } from "../utils/object.util.es.js";
+import { _ as _sfc_main$5 } from "../button/index.es.js";
+import { _ as _sfc_main$1 } from "../dialog/index.es.js";
+import { _ as _sfc_main$2 } from "../tree/index.es.js";
+import { _ as _sfc_main$3 } from "../treesearchinput/index.es.js";
+import { _ as _sfc_main$4 } from "../validatormessage/index.es.js";
+const _hoisted_1 = {
   class: "flex flex-col gap-3 items-start w-full",
   "data-wv-section": "header-wrapper"
-}, le = {
+};
+const _hoisted_2 = {
   key: 0,
   class: "list-inside w-full overflow-auto max-h-20",
   "data-wv-section": "dialog-select-tree-lists"
-}, te = {
+};
+const _hoisted_3 = {
   class: "flex gap-1 items-center justify-end",
   "data-wv-section": "footer-button"
-}, ue = /* @__PURE__ */ G({
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "DialogSelectTree",
-  props: /* @__PURE__ */ T({
+  props: /* @__PURE__ */ mergeModels({
     fetchTree: {},
     params: {},
     visible: { type: Boolean },
@@ -26,11 +29,11 @@ const ee = {
     header: {},
     subHeader: { default: void 0 },
     selectionMode: { default: "checkbox" },
-    allowEmptySelection: { type: Boolean, default: !0 },
+    allowEmptySelection: { type: Boolean, default: true },
     keys: { default: void 0 },
     lists: { default: void 0 },
     listLabel: { default: void 0 },
-    disableNodeAll: { type: Boolean, default: !1 },
+    disableNodeAll: { type: Boolean, default: false },
     exactDisableKey: {},
     disableKeys: {},
     exactDisableKeys: {},
@@ -73,197 +76,242 @@ const ee = {
     exactDisableNodeWhen: {},
     nodeSelectedWhen: {}
   }, {
-    visible: { type: Boolean, default: !1 },
-    visibleModifiers: {}
+    "visible": { type: Boolean, ...{ default: false } },
+    "visibleModifiers": {}
   }),
-  emits: /* @__PURE__ */ T(["select", "hide"], ["update:visible"]),
-  setup($, { expose: A, emit: x }) {
-    const s = $, C = x, n = P($, "visible"), f = U("preset", {}).dialog, r = o(), p = o(""), y = o(""), m = o([]), c = o(), S = o(), E = o(!1), u = o(), w = o(), H = W(() => s.header ? s.header : s.type === "group" ? "Select Group" : "Select Category"), M = (e = !0) => {
-      c.value = u.value, S.value = w.value, Object.keys(c.value ?? {}).length ? (C("select", {
-        keys: c.value,
-        selectedNodes: m.value,
-        singleNode: S.value
-      }), n.value = !e) : s.allowEmptySelection ? (C("select", {
-        keys: [],
-        selectedNodes: void 0,
-        singleNode: void 0
-      }), n.value = !e) : s.allowEmptySelection || (y.value = "You must pick a " + s.type.toLowerCase());
+  emits: /* @__PURE__ */ mergeModels(["select", "hide"], ["update:visible"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const visible = useModel(__props, "visible");
+    const DialogPreset = inject("preset", {}).dialog;
+    const treeComponent = ref();
+    const treeFilter = ref("");
+    const invalidSelectionMessage = ref("");
+    const selectedTreeNodes = ref([]);
+    const selectedTreeKeys = ref();
+    const selectedNode = ref();
+    const selectDisposableOnly = ref(false);
+    const temporarySelectedTreeKeys = ref();
+    const temporarySelectedNode = ref();
+    const dialogHeader = computed(() => {
+      if (props.header) return props.header;
+      return props.type === "group" ? "Select Group" : "Select Category";
+    });
+    const onButtonSelectClicked = (close = true) => {
+      selectedTreeKeys.value = temporarySelectedTreeKeys.value;
+      selectedNode.value = temporarySelectedNode.value;
+      if (Object.keys(selectedTreeKeys.value ?? {}).length) {
+        emit("select", {
+          keys: selectedTreeKeys.value,
+          selectedNodes: selectedTreeNodes.value,
+          singleNode: selectedNode.value
+        });
+        visible.value = !close;
+      } else if (props.allowEmptySelection) {
+        emit("select", {
+          keys: [],
+          selectedNodes: void 0,
+          singleNode: void 0
+        });
+        visible.value = !close;
+      } else if (!props.allowEmptySelection) {
+        invalidSelectionMessage.value = "You must pick a " + props.type.toLowerCase();
+      }
     };
-    return b(n, (e) => {
-      u.value = e ? c.value : void 0, w.value = e ? S.value : void 0, e && s.keys && !u.value && (u.value = s.keys);
-    }), b(
-      r,
-      (e) => {
-        e && s.showDisposableGroups && (e.showDisposableGroups = !0, E.value = !0);
+    watch(visible, (show) => {
+      temporarySelectedTreeKeys.value = show ? selectedTreeKeys.value : void 0;
+      temporarySelectedNode.value = show ? selectedNode.value : void 0;
+      if (show && props.keys && !temporarySelectedTreeKeys.value) {
+        temporarySelectedTreeKeys.value = props.keys;
+      }
+    });
+    watch(
+      treeComponent,
+      (tree) => {
+        if (tree && props.showDisposableGroups) {
+          tree.showDisposableGroups = true;
+          selectDisposableOnly.value = true;
+        }
       },
-      { deep: !0 }
-    ), b(
-      m,
+      { deep: true }
+    );
+    watch(
+      selectedTreeNodes,
       () => {
-        s.hidden && M(!1);
+        if (props.hidden) {
+          onButtonSelectClicked(false);
+        }
       },
-      { once: !0 }
-    ), b(
-      () => s.keys,
+      { once: true }
+    );
+    watch(
+      () => props.keys,
       () => {
-        c.value = s.keys;
+        selectedTreeKeys.value = props.keys;
       }
-    ), A({ treeComponent: r }), (e, l) => (d(), N(R, {
-      visible: n.value,
-      "onUpdate:visible": l[7] || (l[7] = (t) => n.value = t),
-      modal: !e.hidden,
-      pt: {
-        root: {
-          class: [
-            ...v(f).root({ state: {} }).class,
-            "!w-[400px]",
-            { "!hidden": e.hidden }
-          ]
+    );
+    __expose({ treeComponent });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        visible: visible.value,
+        "onUpdate:visible": _cache[7] || (_cache[7] = ($event) => visible.value = $event),
+        modal: !_ctx.hidden,
+        pt: {
+          root: {
+            class: [
+              ...unref(DialogPreset).root({ state: {} }).class,
+              "!w-[400px]",
+              { "!hidden": _ctx.hidden }
+            ]
+          },
+          header: {
+            class: "relative"
+          },
+          icons: {
+            class: "absolute top-0 right-0"
+          },
+          content: {
+            class: [
+              ...unref(DialogPreset).content({ state: {}, instance: {} }).class,
+              "pr-1.5 focus-visible:outline-none"
+            ]
+          },
+          footer: {
+            class: [
+              {
+                "flex justify-end items-center gap-1": _ctx.allowEmptySelection,
+                "flex justify-end items-end flex-col gap-1": !_ctx.allowEmptySelection
+              }
+            ]
+          }
         },
-        header: {
-          class: "relative"
-        },
-        icons: {
-          class: "absolute top-0 right-0"
-        },
-        content: {
-          class: [
-            ...v(f).content({ state: {}, instance: {} }).class,
-            "pr-1.5 focus-visible:outline-none"
-          ]
-        },
-        footer: {
-          class: [
-            {
-              "flex justify-end items-center gap-1": e.allowEmptySelection,
-              "flex justify-end items-end flex-col gap-1": !e.allowEmptySelection
-            }
-          ]
-        }
-      },
-      onHide: l[8] || (l[8] = (t) => e.$emit("hide")),
-      onShow: l[9] || (l[9] = (t) => y.value = ""),
-      "data-wv-name": "dialogselecttree"
-    }, O({
-      header: g(() => {
-        var t;
-        return [
-          D(e.$slots, "header", {
-            dialogHeader: H.value,
-            filter: p.value,
-            isLoading: !!((t = r.value) != null && t.isLoading),
-            listLabel: e.listLabel,
-            lists: e.lists,
-            subHeader: e.subHeader,
-            updateFilter: (a) => p.value = a
-          }, () => {
-            var a;
-            return [
-              K("div", ee, [
-                K("h3", {
-                  class: V([...v(f).title.class, "!leading-6"])
-                }, L(H.value), 3),
-                e.lists ? (d(), k("ul", le, [
-                  (d(!0), k(I, null, Y(e.lists, (i, F) => (d(), k("li", {
-                    key: F,
-                    class: "text-xs leading-[16.39px] tracking-[0.02em] font-medium text-general-800 list-disc ps-[6px]"
-                  }, L(e.listLabel && typeof i != "string" ? v(Q)(i, e.listLabel) : i), 1))), 128))
-                ])) : h("", !0),
-                e.subHeader ? (d(), k("h4", {
-                  key: 1,
-                  class: V([...v(f).title.class, "!leading-6 text-sm"])
-                }, L(e.subHeader), 3)) : h("", !0),
-                (a = r.value) != null && a.isLoading ? h("", !0) : (d(), N(Z, {
-                  key: 2,
-                  modelValue: p.value,
-                  "onUpdate:modelValue": l[0] || (l[0] = (i) => p.value = i),
-                  class: "w-full"
-                }, null, 8, ["modelValue"]))
-              ])
-            ];
-          })
-        ];
-      }),
-      default: g(() => [
-        B(X, z({
-          ref_key: "treeComponent",
-          ref: r
-        }, s, {
-          "selected-keys": u.value,
-          "onUpdate:selectedKeys": [
-            l[1] || (l[1] = (t) => u.value = t),
-            l[4] || (l[4] = (t) => y.value = "")
-          ],
-          "selected-tree-nodes": m.value,
-          "onUpdate:selectedTreeNodes": l[2] || (l[2] = (t) => m.value = t),
-          "auto-select-all": e.autoSelectAll,
-          "disable-keys": e.disableKeys,
-          "disable-node-all": e.disableNodeAll,
-          "disable-node-when": e.disableNodeWhen,
-          "exact-disable-key": e.exactDisableKey,
-          "exact-disable-keys": e.exactDisableKeys,
-          "excluded-keys": e.excludedKeys,
-          "fetch-tree": e.fetchTree,
-          filter: p.value,
-          "flatten-disposable-node": e.flattenDisposableNode,
-          params: e.params,
-          "propagate-selection": e.propagateSelection,
-          readonly: s.readonly,
-          "select-disposable-only": E.value,
-          "selection-mode": e.selectionMode,
-          type: s.type,
-          onNodeSelect: l[3] || (l[3] = (t) => w.value = t)
-        }), O({ _: 2 }, [
-          e.$slots.treenode ? {
-            name: "default",
-            fn: g(({ node: t, checked: a, disabled: i }) => [
-              D(e.$slots, "treenode", {
-                checked: a,
-                disabled: i,
-                node: t
-              })
-            ]),
-            key: "0"
-          } : void 0
-        ]), 1040, ["selected-keys", "selected-tree-nodes", "auto-select-all", "disable-keys", "disable-node-all", "disable-node-when", "exact-disable-key", "exact-disable-keys", "excluded-keys", "fetch-tree", "filter", "flatten-disposable-node", "params", "propagate-selection", "readonly", "select-disposable-only", "selection-mode", "type"])
-      ]),
-      _: 2
-    }, [
-      s.readonly ? void 0 : {
-        name: "footer",
-        fn: g(() => [
-          D(e.$slots, "footer", {}, () => {
-            var t;
-            return [
-              e.allowEmptySelection ? h("", !0) : q((d(), N(_, {
-                key: 0,
-                format: !1,
-                message: y.value
-              }, null, 8, ["message"])), [
-                [J, !!y.value]
+        onHide: _cache[8] || (_cache[8] = ($event) => _ctx.$emit("hide")),
+        onShow: _cache[9] || (_cache[9] = ($event) => invalidSelectionMessage.value = ""),
+        "data-wv-name": "dialogselecttree"
+      }, createSlots({
+        header: withCtx(() => {
+          var _a;
+          return [
+            renderSlot(_ctx.$slots, "header", {
+              dialogHeader: dialogHeader.value,
+              filter: treeFilter.value,
+              isLoading: !!((_a = treeComponent.value) == null ? void 0 : _a.isLoading),
+              listLabel: _ctx.listLabel,
+              lists: _ctx.lists,
+              subHeader: _ctx.subHeader,
+              updateFilter: (filter) => treeFilter.value = filter
+            }, () => {
+              var _a2;
+              return [
+                createElementVNode("div", _hoisted_1, [
+                  createElementVNode("h3", {
+                    class: normalizeClass([...unref(DialogPreset).title.class, "!leading-6"])
+                  }, toDisplayString(dialogHeader.value), 3),
+                  _ctx.lists ? (openBlock(), createElementBlock("ul", _hoisted_2, [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.lists, (list, index) => {
+                      return openBlock(), createElementBlock("li", {
+                        key: index,
+                        class: "text-xs leading-[16.39px] tracking-[0.02em] font-medium text-general-800 list-disc ps-[6px]"
+                      }, toDisplayString(_ctx.listLabel && typeof list !== "string" ? unref(getNestedPropertyValue)(list, _ctx.listLabel) : list), 1);
+                    }), 128))
+                  ])) : createCommentVNode("", true),
+                  _ctx.subHeader ? (openBlock(), createElementBlock("h4", {
+                    key: 1,
+                    class: normalizeClass([...unref(DialogPreset).title.class, "!leading-6 text-sm"])
+                  }, toDisplayString(_ctx.subHeader), 3)) : createCommentVNode("", true),
+                  !((_a2 = treeComponent.value) == null ? void 0 : _a2.isLoading) ? (openBlock(), createBlock(_sfc_main$3, {
+                    key: 2,
+                    modelValue: treeFilter.value,
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => treeFilter.value = $event),
+                    class: "w-full"
+                  }, null, 8, ["modelValue"])) : createCommentVNode("", true)
+                ])
+              ];
+            })
+          ];
+        }),
+        default: withCtx(() => [
+          createVNode(_sfc_main$2, mergeProps({
+            ref_key: "treeComponent",
+            ref: treeComponent
+          }, props, {
+            "selected-keys": temporarySelectedTreeKeys.value,
+            "onUpdate:selectedKeys": [
+              _cache[1] || (_cache[1] = ($event) => temporarySelectedTreeKeys.value = $event),
+              _cache[4] || (_cache[4] = ($event) => invalidSelectionMessage.value = "")
+            ],
+            "selected-tree-nodes": selectedTreeNodes.value,
+            "onUpdate:selectedTreeNodes": _cache[2] || (_cache[2] = ($event) => selectedTreeNodes.value = $event),
+            "auto-select-all": _ctx.autoSelectAll,
+            "disable-keys": _ctx.disableKeys,
+            "disable-node-all": _ctx.disableNodeAll,
+            "disable-node-when": _ctx.disableNodeWhen,
+            "exact-disable-key": _ctx.exactDisableKey,
+            "exact-disable-keys": _ctx.exactDisableKeys,
+            "excluded-keys": _ctx.excludedKeys,
+            "fetch-tree": _ctx.fetchTree,
+            filter: treeFilter.value,
+            "flatten-disposable-node": _ctx.flattenDisposableNode,
+            params: _ctx.params,
+            "propagate-selection": _ctx.propagateSelection,
+            readonly: props.readonly,
+            "select-disposable-only": selectDisposableOnly.value,
+            "selection-mode": _ctx.selectionMode,
+            type: props.type,
+            onNodeSelect: _cache[3] || (_cache[3] = ($event) => temporarySelectedNode.value = $event)
+          }), createSlots({ _: 2 }, [
+            _ctx.$slots.treenode ? {
+              name: "default",
+              fn: withCtx(({ node, checked, disabled }) => [
+                renderSlot(_ctx.$slots, "treenode", {
+                  checked,
+                  disabled,
+                  node
+                })
               ]),
-              K("div", te, [
-                B(j, {
-                  onClick: l[5] || (l[5] = (a) => n.value = !1),
-                  label: "Cancel",
-                  severity: "secondary",
-                  text: ""
-                }),
-                B(j, {
-                  disabled: (t = r.value) == null ? void 0 : t.isLoading,
-                  onClick: l[6] || (l[6] = (a) => M(!0)),
-                  label: "Select",
-                  severity: "success"
-                }, null, 8, ["disabled"])
-              ])
-            ];
-          })
+              key: "0"
+            } : void 0
+          ]), 1040, ["selected-keys", "selected-tree-nodes", "auto-select-all", "disable-keys", "disable-node-all", "disable-node-when", "exact-disable-key", "exact-disable-keys", "excluded-keys", "fetch-tree", "filter", "flatten-disposable-node", "params", "propagate-selection", "readonly", "select-disposable-only", "selection-mode", "type"])
         ]),
-        key: "0"
-      }
-    ]), 1032, ["visible", "modal", "pt"]));
+        _: 2
+      }, [
+        !props.readonly ? {
+          name: "footer",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "footer", {}, () => {
+              var _a;
+              return [
+                !_ctx.allowEmptySelection ? withDirectives((openBlock(), createBlock(_sfc_main$4, {
+                  key: 0,
+                  format: false,
+                  message: invalidSelectionMessage.value
+                }, null, 8, ["message"])), [
+                  [vShow, !!invalidSelectionMessage.value]
+                ]) : createCommentVNode("", true),
+                createElementVNode("div", _hoisted_3, [
+                  createVNode(_sfc_main$5, {
+                    onClick: _cache[5] || (_cache[5] = ($event) => visible.value = false),
+                    label: "Cancel",
+                    severity: "secondary",
+                    text: ""
+                  }),
+                  createVNode(_sfc_main$5, {
+                    disabled: (_a = treeComponent.value) == null ? void 0 : _a.isLoading,
+                    onClick: _cache[6] || (_cache[6] = ($event) => onButtonSelectClicked(true)),
+                    label: "Select",
+                    severity: "success"
+                  }, null, 8, ["disabled"])
+                ])
+              ];
+            })
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["visible", "modal", "pt"]);
+    };
   }
 });
 export {
-  ue as _
+  _sfc_main as _
 };

package/directives/focus.es.js

@@ -1,13 +1,18 @@
-import { nextTick as n } from "vue";
-const c = {
-  mounted: async (t) => {
-    const s = t.tagName.toLowerCase() === "input", e = t.tagName.toLowerCase() === "button";
-    n(() => {
-      var o;
-      s || e ? t.focus() : (o = t.querySelector("input")) == null || o.focus();
+import { nextTick } from "vue";
+const Focus = {
+  mounted: async (el) => {
+    const isInput = el.tagName.toLowerCase() === "input";
+    const isButton = el.tagName.toLowerCase() === "button";
+    nextTick(() => {
+      var _a;
+      if (isInput || isButton) {
+        el.focus();
+      } else {
+        (_a = el.querySelector("input")) == null ? void 0 : _a.focus();
+      }
     });
   }
 };
 export {
-  c as F
+  Focus as F
 };