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

package/buttonselecttree/index.es.js

@@ -1,15 +1,16 @@
-import { defineComponent as G, onMounted as L, reactive as W, ref as d, computed as c, watch as T, createElementBlock as A, openBlock as i, Fragment as F, createVNode as u, createBlock as p, mergeProps as z, withCtx as y, createCommentVNode as M, normalizeStyle as Y, normalizeClass as j, createSlots as J, renderSlot as P, nextTick as U } from "vue";
-import { u as q } from "../vendor/vee-validate/dist/vee-validate.esm.es.js";
-import { _ as Q } from "../badge/index.es.js";
-import { _ as h } from "../button/index.es.js";
-import { _ as X } from "../dialogselecttree/index.es.js";
-import { _ as Z } from "../fieldwrapper/index.es.js";
-import { _ as D } from "../icon/index.es.js";
-import { _ as ee } from "../validatormessage/index.es.js";
-const le = {
+import { defineComponent, onMounted, reactive, ref, computed, watch, createElementBlock, openBlock, Fragment, createVNode, createBlock, mergeProps, withCtx, createCommentVNode, normalizeStyle, normalizeClass, createSlots, renderSlot, nextTick } from "vue";
+import { u as useField } from "../vendor/vee-validate/dist/vee-validate.esm.es.js";
+import { _ as _sfc_main$2 } from "../badge/index.es.js";
+import { _ as _sfc_main$3 } from "../button/index.es.js";
+import { _ as _sfc_main$6 } from "../dialogselecttree/index.es.js";
+import { _ as _sfc_main$1 } from "../fieldwrapper/index.es.js";
+import { _ as _sfc_main$4 } from "../icon/index.es.js";
+import { _ as _sfc_main$5 } from "../validatormessage/index.es.js";
+const _hoisted_1 = {
   key: 0,
   class: "inline-flex gap-1 items-center"
-}, ue = /* @__PURE__ */ G({
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ButtonSelectTree",
   props: {
     type: {},
@@ -19,7 +20,7 @@ const le = {
     selectionMode: { default: "checkbox" },
     useValidator: { type: Boolean },
     fieldName: { default: "selectTree" },
-    mandatory: { type: Boolean, default: !1 },
+    mandatory: { type: Boolean, default: false },
     validatorMessage: { default: void 0 },
     dialogHeader: { default: void 0 },
     label: { default: void 0 },
@@ -30,191 +31,251 @@ const le = {
     exactDisableKeys: {},
     disabled: { type: Boolean },
     exactDisableKey: {},
-    disableNodeAll: { type: Boolean, default: !1 },
+    disableNodeAll: { type: Boolean, default: false },
     disableNodeWhen: { type: Function, default: void 0 },
-    allowEmptySelection: { type: Boolean, default: !0 },
+    allowEmptySelection: { type: Boolean, default: true },
     fieldLabel: { default: void 0 },
     fieldInfo: { default: void 0 },
-    invalid: { type: Boolean, default: !1 },
+    invalid: { type: Boolean, default: false },
     btnWidth: {},
     width: {},
     readonly: { type: Boolean },
     showDisposableGroups: { type: Boolean },
     flattenDisposableNode: { type: Boolean },
     excludedKeys: {},
-    singleEditable: { type: Boolean, default: !0 },
+    singleEditable: { type: Boolean, default: true },
     singleResetable: { type: Boolean },
-    fetchTreeOnButtonRender: { type: Boolean, default: !1 }
+    fetchTreeOnButtonRender: { type: Boolean, default: false }
   },
   emits: ["update:value", "dialogShown", "dialogHidden", "reset"],
-  setup($, { emit: K }) {
-    const f = K, l = $;
-    L(() => {
-      var e, a;
-      l.useValidator && (Object.assign(
-        s,
-        q(l.fieldName, (t) => _(t))
-      ), l.value && ((a = (e = k.value) == null ? void 0 : e.treeComponent) == null || a.fetchTreeList(), s.value = l.value));
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const props = __props;
+    onMounted(() => {
+      var _a, _b;
+      if (props.useValidator) {
+        Object.assign(
+          field,
+          useField(props.fieldName, (value) => {
+            return setValidatorMessage(value);
+          })
+        );
+        if (props.value) {
+          (_b = (_a = dialogTreeInstance.value) == null ? void 0 : _a.treeComponent) == null ? void 0 : _b.fetchTreeList();
+          field.value = props.value;
+        }
+      }
     });
-    const s = W({
-      value: l.value
-    }), k = d(), m = d(l.fetchTreeOnButtonRender), b = d(l.fetchTreeOnButtonRender), w = d(0), n = d(
-      !Array.isArray(l.value) && typeof l.value != "number" && typeof l.value != "string" ? l.value : void 0
-    ), v = c({
-      get: () => n.value,
-      set: (e) => {
-        n.value = e, f("update:value", g(e, l.fieldDataKey));
+    const field = reactive({
+      value: props.value
+    });
+    const dialogTreeInstance = ref();
+    const showDialogTree = ref(props.fetchTreeOnButtonRender);
+    const hideDialogTreeOnRender = ref(props.fetchTreeOnButtonRender);
+    const dialogTreeKey = ref(0);
+    const selectedSingleTreeNode = ref(
+      !Array.isArray(props.value) && typeof props.value !== "number" && typeof props.value !== "string" ? props.value : void 0
+    );
+    const singleTreeNodeModel = computed({
+      get: () => selectedSingleTreeNode.value,
+      set: (node) => {
+        selectedSingleTreeNode.value = node;
+        emit("update:value", getValue(node, props.fieldDataKey));
       }
-    }), B = c(() => E(s.value ?? l.value)), x = c(() => {
-      var t;
-      const a = (l.selectionMode === "checkbox" ? ((t = B.value) == null ? void 0 : t.filter((o) => (o == null ? void 0 : o.toString()) != "-1")) ?? [] : []).length;
-      return a && l.selectionMode === "checkbox" ? a + (l.type === "group" ? " group(s) selected" : " category(s) selected") : l.label ? l.label : l.type === "group" ? "Select Group" : "Select Category";
-    }), C = c(
-      () => l.width ? `width: ${l.width}px !important` : void 0
-    ), E = (e) => {
-      const a = JSON.parse(
-        sessionStorage.getItem(`flatten${l.type}nodes`) ?? "[]"
+    });
+    const treeKeys = computed(() => {
+      return collectKeyValue(field.value ?? props.value);
+    });
+    const buttonLabel = computed(() => {
+      var _a;
+      const keysExcludeAll = props.selectionMode === "checkbox" ? ((_a = treeKeys.value) == null ? void 0 : _a.filter((key) => (key == null ? void 0 : key.toString()) != "-1")) ?? [] : [];
+      const keyCount = keysExcludeAll.length;
+      if (keyCount && props.selectionMode === "checkbox") {
+        return keyCount + (props.type === "group" ? " group(s) selected" : " category(s) selected");
+      }
+      if (props.label) return props.label;
+      return props.type === "group" ? "Select Group" : "Select Category";
+    });
+    const bindBtnWidth = computed(
+      () => props.width ? `width: ${props.width}px !important` : void 0
+    );
+    const collectKeyValue = (source) => {
+      const flatNodes = JSON.parse(
+        sessionStorage.getItem(`flatten${props.type}nodes`) ?? "[]"
       );
-      return e ? (Array.isArray(e) ? e : [e]).map((t) => {
-        if (typeof t == "number")
-          return t;
-        if (typeof t == "string") {
-          const o = a.find((r) => r._id === t);
-          return o == null ? void 0 : o.key;
-        }
-        return t.key;
-      }) : [];
-    }, g = (e, a) => {
-      if (Array.isArray(e) && l.selectionMode === "checkbox")
-        return e.map((t) => a ? t == null ? void 0 : t[a] : t);
-      if (e && l.selectionMode === "single")
-        return a ? e == null ? void 0 : e[a] : e;
-    }, _ = async (e) => (await U(), (Array.isArray(e) && !(e != null && e.length) || !Array.isArray(e) && !e) && l.mandatory ? l.validatorMessage ? l.validatorMessage : l.type === "group" ? "You must pick a group" : "You must pick a category" : l.invalid && l.validatorMessage ? l.validatorMessage : !0), V = (e) => {
-      var a;
-      if (e) {
-        const { keys: t, singleNode: o, selectedNodes: r } = e, R = ((a = t[-1]) == null ? void 0 : a.checked) ?? !1;
-        if (l.selectionMode === "single")
-          v.value = o, s.value = g(v.value, l.fieldDataKey);
-        else {
-          const H = r == null ? void 0 : r.filter((I) => {
-            var N;
-            return !((N = l.excludedKeys) != null && N.includes(Number(I.key)));
+      if (source) {
+        return (Array.isArray(source) ? source : [source]).map((each) => {
+          if (typeof each === "number") {
+            return each;
+          } else if (typeof each === "string") {
+            const matchedNode = flatNodes.find((node) => {
+              return node._id === each;
+            });
+            return matchedNode == null ? void 0 : matchedNode.key;
+          }
+          return each.key;
+        });
+      }
+      return [];
+    };
+    const getValue = (source, dataKey) => {
+      if (Array.isArray(source) && props.selectionMode === "checkbox") {
+        return source.map((each) => {
+          return dataKey ? each == null ? void 0 : each[dataKey] : each;
+        });
+      } else if (source && props.selectionMode === "single") {
+        return dataKey ? source == null ? void 0 : source[dataKey] : source;
+      }
+      return void 0;
+    };
+    const setValidatorMessage = async (value) => {
+      await nextTick();
+      if ((Array.isArray(value) && !(value == null ? void 0 : value.length) || !Array.isArray(value) && !value) && props.mandatory) {
+        if (props.validatorMessage) return props.validatorMessage;
+        return props.type === "group" ? "You must pick a group" : "You must pick a category";
+      } else if (props.invalid && props.validatorMessage) {
+        return props.validatorMessage;
+      }
+      return true;
+    };
+    const setTreeSelection = (event) => {
+      var _a;
+      if (event) {
+        const { keys, singleNode, selectedNodes } = event;
+        const isAllSelected = ((_a = keys[-1]) == null ? void 0 : _a.checked) ?? false;
+        if (props.selectionMode === "single") {
+          singleTreeNodeModel.value = singleNode;
+          field.value = getValue(singleTreeNodeModel.value, props.fieldDataKey);
+        } else {
+          const filterredExcludedNodes = selectedNodes == null ? void 0 : selectedNodes.filter((each) => {
+            var _a2;
+            return !((_a2 = props.excludedKeys) == null ? void 0 : _a2.includes(Number(each.key)));
           });
-          s.value = g(H, l.fieldDataKey) ?? [];
+          field.value = getValue(filterredExcludedNodes, props.fieldDataKey) ?? [];
         }
-        f("update:value", s.value, R);
+        emit("update:value", field.value, isAllSelected);
       }
-    }, O = () => {
-      v.value = void 0, w.value++, f("reset");
-    }, S = () => {
-      m.value = !0, b.value = !1, f("dialogShown");
     };
-    return T(
-      () => l.value,
-      (e) => {
-        s.value = e;
+    const resetSingleGroupNode = () => {
+      singleTreeNodeModel.value = void 0;
+      dialogTreeKey.value++;
+      emit("reset");
+    };
+    const showDialogSelectTree = () => {
+      showDialogTree.value = true;
+      hideDialogTreeOnRender.value = false;
+      emit("dialogShown");
+    };
+    watch(
+      () => props.value,
+      (value) => {
+        field.value = value;
       }
-    ), T(
-      () => l.selectedNode,
-      (e) => {
-        l.selectionMode === "single" && (n.value = e);
+    );
+    watch(
+      () => props.selectedNode,
+      (node) => {
+        if (props.selectionMode === "single") selectedSingleTreeNode.value = node;
       },
-      { immediate: !0 }
-    ), (e, a) => (i(), A(F, null, [
-      u(Z, z(e.$attrs, {
-        info: e.fieldInfo,
-        label: l.fieldLabel,
-        mandatory: l.mandatory,
-        "show-optional-text": e.$attrs["show-optional-text"] != !1
-      }), {
-        default: y(() => [
-          n.value ? (i(), A("span", le, [
-            u(Q, {
-              label: n.value.name,
-              format: "nowrap"
-            }, null, 8, ["label"]),
-            e.singleEditable ? (i(), p(h, {
-              key: 0,
-              onClick: S,
-              class: "p-0 m-0 !min-w-0 !min-h-0 !h-4 !w-4 focus-visible:ring-0 focus-visible:bg-primary-50",
-              text: ""
-            }, {
-              default: y(() => [
-                u(D, {
-                  class: "w-full h-full",
-                  icon: "edit",
-                  severity: "primary"
-                })
-              ]),
-              _: 1
-            })) : M("", !0),
-            e.singleResetable ? (i(), p(h, {
+      { immediate: true }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(_sfc_main$1, mergeProps(_ctx.$attrs, {
+          info: _ctx.fieldInfo,
+          label: props.fieldLabel,
+          mandatory: props.mandatory,
+          "show-optional-text": _ctx.$attrs["show-optional-text"] != false
+        }), {
+          default: withCtx(() => [
+            selectedSingleTreeNode.value ? (openBlock(), createElementBlock("span", _hoisted_1, [
+              createVNode(_sfc_main$2, {
+                label: selectedSingleTreeNode.value.name,
+                format: "nowrap"
+              }, null, 8, ["label"]),
+              _ctx.singleEditable ? (openBlock(), createBlock(_sfc_main$3, {
+                key: 0,
+                onClick: showDialogSelectTree,
+                class: "p-0 m-0 !min-w-0 !min-h-0 !h-4 !w-4 focus-visible:ring-0 focus-visible:bg-primary-50",
+                text: ""
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$4, {
+                    class: "w-full h-full",
+                    icon: "edit",
+                    severity: "primary"
+                  })
+                ]),
+                _: 1
+              })) : createCommentVNode("", true),
+              _ctx.singleResetable ? (openBlock(), createBlock(_sfc_main$3, {
+                key: 1,
+                onClick: resetSingleGroupNode,
+                class: "p-0 m-0 !min-w-0 !min-h-0 !h-4 !w-4 focus-visible:ring-0 focus-visible:bg-danger-50",
+                text: ""
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$4, {
+                    class: "w-full h-full",
+                    icon: "close",
+                    severity: "danger"
+                  })
+                ]),
+                _: 1
+              })) : createCommentVNode("", true)
+            ])) : (openBlock(), createBlock(_sfc_main$3, {
               key: 1,
-              onClick: O,
-              class: "p-0 m-0 !min-w-0 !min-h-0 !h-4 !w-4 focus-visible:ring-0 focus-visible:bg-danger-50",
-              text: ""
-            }, {
-              default: y(() => [
-                u(D, {
-                  class: "w-full h-full",
-                  icon: "close",
-                  severity: "danger"
-                })
-              ]),
-              _: 1
-            })) : M("", !0)
-          ])) : (i(), p(h, {
-            key: 1,
-            class: j({ "!w-full": !l.width }),
-            disabled: e.disabled,
-            label: x.value,
-            style: Y(C.value),
-            onClick: S
-          }, null, 8, ["class", "disabled", "label", "style"])),
-          u(ee, {
-            message: s.errorMessage
-          }, null, 8, ["message"])
-        ]),
-        _: 1
-      }, 16, ["info", "label", "mandatory", "show-optional-text"]),
-      (i(), p(X, {
-        key: w.value + +b.value,
-        ref_key: "dialogTreeInstance",
-        ref: k,
-        visible: m.value,
-        "onUpdate:visible": a[0] || (a[0] = (t) => m.value = t),
-        "allow-empty-selection": e.allowEmptySelection,
-        "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,
-        "flatten-disposable-node": e.flattenDisposableNode,
-        header: e.dialogHeader,
-        hidden: b.value,
-        keys: B.value,
-        params: e.params,
-        readonly: l.readonly,
-        "selection-mode": l.selectionMode,
-        "show-disposable-groups": l.showDisposableGroups,
-        type: l.type,
-        onHide: a[1] || (a[1] = (t) => e.$emit("dialogHidden")),
-        onSelect: V
-      }, J({ _: 2 }, [
-        e.$slots.treenode ? {
-          name: "treenode",
-          fn: y(({ node: t }) => [
-            P(e.$slots, "treenode", { node: t })
+              class: normalizeClass({ "!w-full": !props.width }),
+              disabled: _ctx.disabled,
+              label: buttonLabel.value,
+              style: normalizeStyle(bindBtnWidth.value),
+              onClick: showDialogSelectTree
+            }, null, 8, ["class", "disabled", "label", "style"])),
+            createVNode(_sfc_main$5, {
+              message: field.errorMessage
+            }, null, 8, ["message"])
           ]),
-          key: "0"
-        } : void 0
-      ]), 1032, ["visible", "allow-empty-selection", "auto-select-all", "disable-keys", "disable-node-all", "disable-node-when", "exact-disable-key", "exact-disable-keys", "excluded-keys", "fetch-tree", "flatten-disposable-node", "header", "hidden", "keys", "params", "readonly", "selection-mode", "show-disposable-groups", "type"]))
-    ], 64));
+          _: 1
+        }, 16, ["info", "label", "mandatory", "show-optional-text"]),
+        (openBlock(), createBlock(_sfc_main$6, {
+          key: dialogTreeKey.value + +hideDialogTreeOnRender.value,
+          ref_key: "dialogTreeInstance",
+          ref: dialogTreeInstance,
+          visible: showDialogTree.value,
+          "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => showDialogTree.value = $event),
+          "allow-empty-selection": _ctx.allowEmptySelection,
+          "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,
+          "flatten-disposable-node": _ctx.flattenDisposableNode,
+          header: _ctx.dialogHeader,
+          hidden: hideDialogTreeOnRender.value,
+          keys: treeKeys.value,
+          params: _ctx.params,
+          readonly: props.readonly,
+          "selection-mode": props.selectionMode,
+          "show-disposable-groups": props.showDisposableGroups,
+          type: props.type,
+          onHide: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("dialogHidden")),
+          onSelect: setTreeSelection
+        }, createSlots({ _: 2 }, [
+          _ctx.$slots.treenode ? {
+            name: "treenode",
+            fn: withCtx(({ node }) => [
+              renderSlot(_ctx.$slots, "treenode", { node })
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["visible", "allow-empty-selection", "auto-select-all", "disable-keys", "disable-node-all", "disable-node-when", "exact-disable-key", "exact-disable-keys", "excluded-keys", "fetch-tree", "flatten-disposable-node", "header", "hidden", "keys", "params", "readonly", "selection-mode", "show-disposable-groups", "type"]))
+      ], 64);
+    };
   }
 });
 export {
-  ue as _
+  _sfc_main as _
 };

package/buttontoggle/index.es.js

@@ -1,11 +1,13 @@
-import { defineComponent as o, createBlock as e, openBlock as t } from "vue";
-import { _ } from "../toggleswitch/index.es.js";
-const a = /* @__PURE__ */ o({
+import { defineComponent, createBlock, openBlock } from "vue";
+import { _ as _sfc_main$1 } from "../toggleswitch/index.es.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ButtonToggle",
-  setup(n) {
-    return (r, c) => (t(), e(_));
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1);
+    };
   }
 });
 export {
-  a as _
+  _sfc_main as _
 };