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

package/dropdown/index.es.js

@@ -1,19 +1,19 @@
-import { defineComponent as x, onMounted as ee, computed as u, inject as N, ref as le, shallowRef as I, reactive as ae, watch as $, createBlock as f, openBlock as s, withCtx as r, createVNode as d, normalizeClass as oe, createCommentVNode as T, unref as t, renderSlot as m, mergeProps as j, createSlots as te, normalizeProps as v, guardReactiveProps as c, createElementVNode as ie, toDisplayString as k, createElementBlock as D, Fragment as E, createTextVNode as R, nextTick as re } from "vue";
-import { u as ne } from "../vendor/vee-validate/dist/vee-validate.esm.es.js";
-import { u as se } from "../plugins/WangsVue.es.js";
-import { f as de } from "../utils/filterOptions.util.es.js";
-import { m as ue } from "../utils/mergePropsWithDefaults.util.es.js";
-import { a as pe } from "../utils/textFormatter.util.es.js";
-import { s as fe } from "../vendor/primevue/dropdown/dropdown.esm.es.js";
-import { s as K } from "../vendor/primevue/inputgroupaddon/inputgroupaddon.esm.es.js";
-import { _ as me } from "../badge/index.es.js";
-import { _ as ve } from "../fieldwrapper/index.es.js";
-import { _ as B } from "../icon/index.es.js";
-import { _ as ce } from "../inputgroup/index.es.js";
-import { _ as ge } from "../validatormessage/index.es.js";
-import { i as z } from "../vendor/lodash-es/isEqual.es.js";
-import { c as F } from "../vendor/lodash-es/cloneDeep.es.js";
-const Ie = /* @__PURE__ */ x({
+import { defineComponent, onMounted, computed, inject, ref, shallowRef, reactive, watch, createBlock, openBlock, withCtx, createVNode, normalizeClass, createCommentVNode, unref, renderSlot, mergeProps, createSlots, normalizeProps, guardReactiveProps, createElementVNode, toDisplayString, createElementBlock, Fragment, createTextVNode, nextTick } from "vue";
+import { u as useField } from "../vendor/vee-validate/dist/vee-validate.esm.es.js";
+import { u as useWangsVueConfig } from "../plugins/WangsVue.es.js";
+import { f as filterOptions } from "../utils/filterOptions.util.es.js";
+import { m as mergePropsWithDefaults } from "../utils/mergePropsWithDefaults.util.es.js";
+import { a as formatVowelSoundLabel } from "../utils/textFormatter.util.es.js";
+import { s as script$1 } from "../vendor/primevue/dropdown/dropdown.esm.es.js";
+import { s as script } from "../vendor/primevue/inputgroupaddon/inputgroupaddon.esm.es.js";
+import { _ as _sfc_main$4 } from "../badge/index.es.js";
+import { _ as _sfc_main$1 } from "../fieldwrapper/index.es.js";
+import { _ as _sfc_main$3 } from "../icon/index.es.js";
+import { _ as _sfc_main$2 } from "../inputgroup/index.es.js";
+import { _ as _sfc_main$5 } from "../validatormessage/index.es.js";
+import { i as isEqual } from "../vendor/lodash-es/isEqual.es.js";
+import { c as cloneDeep } from "../vendor/lodash-es/cloneDeep.es.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Dropdown",
   props: {
     modelValue: { type: [String, Number, Boolean, Object], default: void 0 },
@@ -32,212 +32,266 @@ const Ie = /* @__PURE__ */ x({
     mandatory: { type: Boolean },
     showOptionalText: { type: Boolean, default: void 0 },
     validatorMessage: {},
-    formatValidatorMessage: { type: Boolean, default: !0 },
+    formatValidatorMessage: { type: Boolean, default: true },
     invalid: { type: Boolean },
     fieldName: {},
     placeholder: {},
     loading: { type: Boolean },
     fieldInfo: {},
     disabled: { type: Boolean },
-    filter: { type: Boolean, default: !0 },
+    filter: { type: Boolean, default: true },
     filterPlaceholder: {},
-    panelMaxContent: { type: Boolean, default: !1 }
+    panelMaxContent: { type: Boolean, default: false }
   },
   emits: ["update:modelValue", "show", "fieldInfoClick"],
-  setup(W, { expose: q, emit: A }) {
-    const e = W, O = A;
-    ee(() => {
-      X();
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    onMounted(() => {
+      setValidator();
     });
-    const { locale: p, defaultProps: G } = se("Dropdown"), H = u(() => ue(e, G)), n = N("preset", {}).dropdown, U = N(
+    const { locale, defaultProps } = useWangsVueConfig("Dropdown");
+    const config = computed(() => mergePropsWithDefaults(props, defaultProps));
+    const Preset = inject("preset", {}).dropdown;
+    const InputGroupAddonPreset = inject(
       "preset",
       {}
-    ).inputgroupaddon, g = le(), y = I(!1), b = I(!1), M = u(() => e.invalid || !!a.errorMessage), a = ae({
-      value: e.initialValue !== void 0 ? e.initialValue : e.modelValue
-    }), J = u(() => {
-      var l;
-      return p.emptySelectionErrorMessage.replace("{label}", e.label).replace(
+    ).inputgroupaddon;
+    const dropdown = ref();
+    const isShowOverlay = shallowRef(false);
+    const isClicked = shallowRef(false);
+    const invalidInput = computed(() => props.invalid || !!field.errorMessage);
+    const field = reactive({
+      value: props.initialValue !== void 0 ? props.initialValue : props.modelValue
+    });
+    const emptyErrorMessage = computed(() => {
+      var _a;
+      return locale.emptySelectionErrorMessage.replace("{label}", props.label).replace(
         "{formattedLabel}",
-        (l = pe(e.label)) == null ? void 0 : l.toLowerCase()
+        (_a = formatVowelSoundLabel(props.label)) == null ? void 0 : _a.toLowerCase()
       );
-    }), V = u(() => de(e.options)), Q = u(() => {
-      var l;
-      return e.loading ? p.loadingPlaceholder : e.placeholder ?? ((l = p.inputPlaceholder) == null ? void 0 : l.replace("{label}", e.label ?? "").replace("{lowercaseLabel}", (e.label ?? "").toLowerCase()));
-    }), X = () => {
-      e.useValidator && (Object.assign(
-        a,
-        ne(e.fieldName ?? "dropdown", (l) => !(l != null && l !== "") && e.mandatory ? typeof e.validatorMessage == "object" && "empty" in e.validatorMessage ? e.validatorMessage.empty : e.validatorMessage ?? J.value : re(Y))
-      ), e.initialValue !== void 0 && (a.value = e.initialValue), e.invalid && a.validate());
-    }, Y = () => e.validatorMessage && e.invalid ? e.validatorMessage : !0, Z = (l) => {
-      const { value: o } = l;
-      e.unselectOnReselect ? b.value = !0 : O("update:modelValue", o);
-    }, h = () => {
-      if (e.optionValue) {
-        const l = V.value.find((o) => {
-          if (typeof o != "string")
-            return e.dataKey ? a.value[e.dataKey] === o[e.optionValue ?? ""][e.dataKey] : z(
-              F(o[e.optionValue ?? ""]),
-              F(a.value)
+    });
+    const visibleOptions = computed(() => filterOptions(props.options));
+    const dropdownPlaceholder = computed(() => {
+      var _a;
+      return props.loading ? locale.loadingPlaceholder : props.placeholder ?? ((_a = locale.inputPlaceholder) == null ? void 0 : _a.replace("{label}", props.label ?? "").replace("{lowercaseLabel}", (props.label ?? "").toLowerCase()));
+    });
+    const setValidator = () => {
+      if (props.useValidator) {
+        Object.assign(
+          field,
+          useField(props.fieldName ?? "dropdown", (value) => {
+            const hasValue = value != null && value !== "";
+            if (!hasValue && props.mandatory) {
+              if (typeof props.validatorMessage === "object" && "empty" in props.validatorMessage) {
+                return props.validatorMessage.empty;
+              }
+              return props.validatorMessage ?? emptyErrorMessage.value;
+            }
+            return nextTick(setValidatorMessage);
+          })
+        );
+        if (props.initialValue !== void 0) field.value = props.initialValue;
+        if (props.invalid) field.validate();
+      }
+    };
+    const setValidatorMessage = () => {
+      if (props.validatorMessage && props.invalid) {
+        return props.validatorMessage;
+      }
+      return true;
+    };
+    const updateFieldValue = (event) => {
+      const { value } = event;
+      if (props.unselectOnReselect) isClicked.value = true;
+      else emit("update:modelValue", value);
+    };
+    const getOptionLabel = () => {
+      if (props.optionValue) {
+        const matchOption = visibleOptions.value.find((op) => {
+          if (typeof op != "string") {
+            if (props.dataKey) {
+              return field.value[props.dataKey] === op[props.optionValue ?? ""][props.dataKey];
+            }
+            return isEqual(
+              cloneDeep(op[props.optionValue ?? ""]),
+              cloneDeep(field.value)
             );
+          }
         });
-        if (l && typeof l != "string")
-          return l[e.optionLabel ?? ""];
-      } else if (a.value && typeof a.value == "object" && e.optionLabel && e.optionLabel in a.value)
-        return a.value[e.optionLabel];
-      return a.value;
-    }, _ = () => {
-      g.value && g.value.show();
+        if (matchOption && typeof matchOption != "string") {
+          return matchOption[props.optionLabel ?? ""];
+        }
+      } else if (field.value && typeof field.value === "object" && props.optionLabel && props.optionLabel in field.value) {
+        return field.value[props.optionLabel];
+      }
+      return field.value;
+    };
+    const showOverlay = () => {
+      if (dropdown.value) dropdown.value.show();
     };
-    return $(
-      () => e.initialValue,
-      (l) => {
-        a.value = l;
+    watch(
+      () => props.initialValue,
+      (value) => {
+        field.value = value;
       },
-      { once: !0 }
-    ), $(
-      () => e.modelValue,
-      (l) => {
-        a.value = l;
+      { once: true }
+    );
+    watch(
+      () => props.modelValue,
+      (value) => {
+        field.value = value;
       }
-    ), $(
-      () => a.value,
-      (l, o) => {
+    );
+    watch(
+      () => field.value,
+      (newValue, oldValue) => {
         setTimeout(() => {
-          e.unselectOnReselect && b.value && (z(l, o) && l !== void 0 && (a.value = void 0), b.value = !1, O("update:modelValue", a.value));
+          if (props.unselectOnReselect && isClicked.value) {
+            if (isEqual(newValue, oldValue) && newValue !== void 0) {
+              field.value = void 0;
+            }
+            isClicked.value = false;
+            emit("update:modelValue", field.value);
+          }
         }, 0);
       }
-    ), q({
-      showOverlay: _
-    }), (l, o) => (s(), f(ve, {
-      info: l.fieldInfo,
-      label: e.label,
-      mandatory: e.mandatory,
-      "show-optional-text": l.showOptionalText,
-      onInfoClick: o[3] || (o[3] = (w) => l.$emit("fieldInfoClick"))
-    }, {
-      default: r(() => [
-        d(ce, {
-          class: oe([
-            {
-              "grid grid-cols-[max-content,1fr,max-content]": l.$slots["addon-left"] && l.$slots["addon-right"],
-              "grid grid-cols-[1fr,max-content]": !l.$slots["addon-left"] && l.$slots["addon-right"],
-              "grid grid-cols-[max-content,1fr]": l.$slots["addon-left"] && !l.$slots["addon-right"]
-            }
-          ]),
-          disabled: e.disabled,
-          invalid: M.value,
-          ring: l.inputBorder
-        }, {
-          default: r(() => {
-            var w, C, S, P, L;
-            return [
-              l.$slots["addon-left"] ? (s(), f(t(K), {
-                key: 0,
-                disabled: e.disabled
-              }, {
-                default: r(() => [
-                  m(l.$slots, "addon-left")
-                ]),
-                _: 3
-              }, 8, ["disabled"])) : T("", !0),
-              d(t(fe), j({
-                ref_key: "dropdown",
-                ref: g
-              }, e, {
-                modelValue: a.value,
-                "onUpdate:modelValue": o[0] || (o[0] = (i) => a.value = i),
-                "aria-describedby": e.label + "error",
-                "filter-placeholder": e.filterPlaceholder || t(p).filterPlaceholder,
-                invalid: M.value,
-                options: V.value,
-                placeholder: Q.value,
-                pt: {
-                  list: (w = t(n)) == null ? void 0 : w.list({ props: e }),
-                  panel: (C = t(n)) == null ? void 0 : C.panel({ props: e }),
-                  virtualScroller: (S = t(n)) == null ? void 0 : S.virtualScroller({ props: e }),
-                  wrapper: (P = t(n)) == null ? void 0 : P.wrapper({ props: e })
-                },
-                "virtual-scroller-options": ((L = V.value) == null ? void 0 : L.length) > 10 ? { itemSize: 32 } : void 0,
-                onChange: Z,
-                onHide: o[1] || (o[1] = (i) => y.value = !1),
-                onShow: o[2] || (o[2] = (i) => (l.$emit("show"), y.value = !0))
-              }), te({
-                dropdownicon: r(() => [
-                  d(B, v(c(t(n).dropdownicon({ state: { isShowOverlay: y.value } }))), null, 16)
-                ]),
-                loadingicon: r(() => [
-                  d(B, v(c(t(n).loadingicon)), null, 16)
-                ]),
-                filtericon: r(() => [
-                  d(B, v(c(t(n).filtericon)), null, 16)
-                ]),
-                _: 2
-              }, [
-                l.loading ? {
-                  name: "value",
-                  fn: r(({ placeholder: i }) => [
-                    ie("span", v(c(t(n).loadingplaceholder)), k(i), 17)
+    );
+    __expose({
+      showOverlay
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        info: _ctx.fieldInfo,
+        label: props.label,
+        mandatory: props.mandatory,
+        "show-optional-text": _ctx.showOptionalText,
+        onInfoClick: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("fieldInfoClick"))
+      }, {
+        default: withCtx(() => [
+          createVNode(_sfc_main$2, {
+            class: normalizeClass([
+              {
+                "grid grid-cols-[max-content,1fr,max-content]": _ctx.$slots["addon-left"] && _ctx.$slots["addon-right"],
+                "grid grid-cols-[1fr,max-content]": !_ctx.$slots["addon-left"] && _ctx.$slots["addon-right"],
+                "grid grid-cols-[max-content,1fr]": _ctx.$slots["addon-left"] && !_ctx.$slots["addon-right"]
+              }
+            ]),
+            disabled: props.disabled,
+            invalid: invalidInput.value,
+            ring: _ctx.inputBorder
+          }, {
+            default: withCtx(() => {
+              var _a, _b, _c, _d, _e;
+              return [
+                _ctx.$slots["addon-left"] ? (openBlock(), createBlock(unref(script), {
+                  key: 0,
+                  disabled: props.disabled
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "addon-left")
                   ]),
-                  key: "0"
-                } : {
-                  name: "value",
-                  fn: r((i) => [
-                    (H.value.allowNullOption ? i.value !== void 0 : i.value != null) ? m(l.$slots, "value", {
-                      key: 0,
-                      originalValue: i.value,
-                      value: h()
-                    }, () => [
-                      l.valueType === "badge" ? (s(), f(me, j({ key: 0 }, l.badgeValueProps, {
-                        label: h()
-                      }), null, 16, ["label"])) : (s(), D(E, { key: 1 }, [
-                        R(k(h()), 1)
-                      ], 64))
-                    ]) : (s(), D(E, { key: 1 }, [
-                      R(k(i.placeholder), 1)
-                    ], 64))
+                  _: 3
+                }, 8, ["disabled"])) : createCommentVNode("", true),
+                createVNode(unref(script$1), mergeProps({
+                  ref_key: "dropdown",
+                  ref: dropdown
+                }, props, {
+                  modelValue: field.value,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => field.value = $event),
+                  "aria-describedby": props.label + "error",
+                  "filter-placeholder": props.filterPlaceholder || unref(locale).filterPlaceholder,
+                  invalid: invalidInput.value,
+                  options: visibleOptions.value,
+                  placeholder: dropdownPlaceholder.value,
+                  pt: {
+                    list: (_a = unref(Preset)) == null ? void 0 : _a.list({ props }),
+                    panel: (_b = unref(Preset)) == null ? void 0 : _b.panel({ props }),
+                    virtualScroller: (_c = unref(Preset)) == null ? void 0 : _c.virtualScroller({ props }),
+                    wrapper: (_d = unref(Preset)) == null ? void 0 : _d.wrapper({ props })
+                  },
+                  "virtual-scroller-options": ((_e = visibleOptions.value) == null ? void 0 : _e.length) > 10 ? { itemSize: 32 } : void 0,
+                  onChange: updateFieldValue,
+                  onHide: _cache[1] || (_cache[1] = ($event) => isShowOverlay.value = false),
+                  onShow: _cache[2] || (_cache[2] = ($event) => (_ctx.$emit("show"), isShowOverlay.value = true))
+                }), createSlots({
+                  dropdownicon: withCtx(() => [
+                    createVNode(_sfc_main$3, normalizeProps(guardReactiveProps(unref(Preset).dropdownicon({ state: { isShowOverlay: isShowOverlay.value } }))), null, 16)
+                  ]),
+                  loadingicon: withCtx(() => [
+                    createVNode(_sfc_main$3, normalizeProps(guardReactiveProps(unref(Preset).loadingicon)), null, 16)
                   ]),
-                  key: "1"
-                },
-                l.$slots.option ? {
-                  name: "option",
-                  fn: r(({ option: i }) => [
-                    m(l.$slots, "option", { option: i })
+                  filtericon: withCtx(() => [
+                    createVNode(_sfc_main$3, normalizeProps(guardReactiveProps(unref(Preset).filtericon)), null, 16)
                   ]),
-                  key: "2"
-                } : void 0
-              ]), 1040, ["modelValue", "aria-describedby", "filter-placeholder", "invalid", "options", "placeholder", "pt", "virtual-scroller-options"]),
-              l.$slots["addon-right"] ? (s(), f(t(K), {
-                key: 1,
-                pt: {
-                  root: t(U).root({
-                    props: {
-                      class: [
-                        {
-                          "!text-general-200": e.disabled
-                        }
-                      ]
-                    }
-                  })
-                }
-              }, {
-                default: r(() => [
-                  m(l.$slots, "addon-right")
-                ]),
-                _: 3
-              }, 8, ["pt"])) : T("", !0)
-            ];
-          }),
-          _: 3
-        }, 8, ["class", "disabled", "invalid", "ring"]),
-        d(ge, {
-          id: e.label + "error",
-          message: a.errorMessage
-        }, null, 8, ["id", "message"])
-      ]),
-      _: 3
-    }, 8, ["info", "label", "mandatory", "show-optional-text"]));
+                  _: 2
+                }, [
+                  _ctx.loading ? {
+                    name: "value",
+                    fn: withCtx(({ placeholder }) => [
+                      createElementVNode("span", normalizeProps(guardReactiveProps(unref(Preset).loadingplaceholder)), toDisplayString(placeholder), 17)
+                    ]),
+                    key: "0"
+                  } : {
+                    name: "value",
+                    fn: withCtx((slotProps) => [
+                      (config.value.allowNullOption ? slotProps.value !== void 0 : slotProps.value != null) ? renderSlot(_ctx.$slots, "value", {
+                        key: 0,
+                        originalValue: slotProps.value,
+                        value: getOptionLabel()
+                      }, () => [
+                        _ctx.valueType === "badge" ? (openBlock(), createBlock(_sfc_main$4, mergeProps({ key: 0 }, _ctx.badgeValueProps, {
+                          label: getOptionLabel()
+                        }), null, 16, ["label"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                          createTextVNode(toDisplayString(getOptionLabel()), 1)
+                        ], 64))
+                      ]) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                        createTextVNode(toDisplayString(slotProps.placeholder), 1)
+                      ], 64))
+                    ]),
+                    key: "1"
+                  },
+                  _ctx.$slots["option"] ? {
+                    name: "option",
+                    fn: withCtx(({ option }) => [
+                      renderSlot(_ctx.$slots, "option", { option })
+                    ]),
+                    key: "2"
+                  } : void 0
+                ]), 1040, ["modelValue", "aria-describedby", "filter-placeholder", "invalid", "options", "placeholder", "pt", "virtual-scroller-options"]),
+                _ctx.$slots["addon-right"] ? (openBlock(), createBlock(unref(script), {
+                  key: 1,
+                  pt: {
+                    root: unref(InputGroupAddonPreset).root({
+                      props: {
+                        class: [
+                          {
+                            "!text-general-200": props.disabled
+                          }
+                        ]
+                      }
+                    })
+                  }
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "addon-right")
+                  ]),
+                  _: 3
+                }, 8, ["pt"])) : createCommentVNode("", true)
+              ];
+            }),
+            _: 3
+          }, 8, ["class", "disabled", "invalid", "ring"]),
+          createVNode(_sfc_main$5, {
+            id: props.label + "error",
+            message: field.errorMessage
+          }, null, 8, ["id", "message"])
+        ]),
+        _: 3
+      }, 8, ["info", "label", "mandatory", "show-optional-text"]);
+    };
   }
 });
 export {
-  Ie as _
+  _sfc_main as _
 };