@3squared/forge-ui-3 1.3.4 → 1.3.5

package/dist/esm/forge-ui-3.js

@@ -6,9 +6,9 @@ import je from "primevue/toast";
 import be from "primevue/checkbox";
 import { useField as X } from "vee-validate";
 import Ce from "primevue/progressspinner";
-import Se from "primevue/dialog";
+import Ve from "primevue/dialog";
 import ce from "primevue/inputtext";
-import { vOnClickOutside as Ve } from "@vueuse/components";
+import { vOnClickOutside as Se } from "@vueuse/components";
 import Te from "primevue/menubar";
 import Me from "vue-multiselect";
 import me from "primevue/multiselect";
@@ -879,7 +879,7 @@ const Ne = {
       ]
     })
   }
-}, zi = {
+}, _i = {
   ...sa,
   ...Ne,
   ...ma,
@@ -952,7 +952,7 @@ const Ne = {
       }, 16);
     };
   }
-}), _i = /* @__PURE__ */ F({
+}), ji = /* @__PURE__ */ F({
   __name: "ForgeActionButton",
   props: {
     action: {},
@@ -1073,7 +1073,7 @@ const Ne = {
       ]);
     };
   }
-}), wa = ["href", "target"], ji = /* @__PURE__ */ F({
+}), wa = ["href", "target"], Ci = /* @__PURE__ */ F({
   __name: "ForgeLink",
   props: {
     url: {},
@@ -1136,7 +1136,7 @@ function ka(e) {
   }
   return a.errorMessage === "" && a.errorDetails.length === 0 && (a.errorMessage = e), a;
 }
-function Ci(e, a) {
+function Vi(e, a) {
   return e.map((t) => ({ id: t, label: a ? a(t) : `${t}` }));
 }
 function Si(e, a, t) {
@@ -1145,7 +1145,7 @@ function Si(e, a, t) {
 const $a = { key: 0 }, Ba = {
   class: "d-flex w-100",
   "data-cy": "footer"
-}, Vi = /* @__PURE__ */ F({
+}, Ti = /* @__PURE__ */ F({
   __name: "ForgeModal",
   props: /* @__PURE__ */ N({
     cancelText: { default: "Cancel" },
@@ -1226,8 +1226,8 @@ const $a = { key: 0 }, Ba = {
       ]
     }));
     return (n, j) => {
-      const S = A, V = Se;
-      return p(), w(V, z(i, {
+      const V = A, S = Ve;
+      return p(), w(S, z(i, {
         onMaximize: s,
         onUnmaximize: r,
         pt: v.value
@@ -1279,7 +1279,7 @@ const $a = { key: 0 }, Ba = {
           name: "footer",
           fn: g(() => [
             m("div", Ba, [
-              f(S, {
+              f(V, {
                 label: n.cancelText,
                 class: B(i.cancelClass),
                 outlined: "",
@@ -1287,7 +1287,7 @@ const $a = { key: 0 }, Ba = {
                 id: "cancel-button",
                 type: i.cancelButtonType
               }, null, 8, ["label", "class", "type"]),
-              f(S, {
+              f(V, {
                 label: n.submitText,
                 class: B([i.submitClass, "ms-auto"]),
                 onClick: c,
@@ -1301,7 +1301,7 @@ const $a = { key: 0 }, Ba = {
       ]), 1040, ["pt"]);
     };
   }
-}), Fa = ["id"], za = { key: 0 }, _a = { key: 0 }, ja = { class: "d-flex justify-content-between align-items-center position-relative" }, Ca = { key: 1 }, Sa = { "data-cy": "readonly-value" }, Va = /* @__PURE__ */ F({
+}), Fa = ["id"], za = { key: 0 }, _a = { key: 0 }, ja = { class: "d-flex justify-content-between align-items-center position-relative" }, Ca = { key: 1 }, Va = { "data-cy": "readonly-value" }, Sa = /* @__PURE__ */ F({
   __name: "ForgeInlineEditor",
   props: /* @__PURE__ */ N({
     name: { default: "" },
@@ -1317,8 +1317,8 @@ const $a = { key: 0 }, Ba = {
   emits: ["update:modelValue"],
   setup(e) {
     const a = e, t = O(e, "modelValue"), i = T(!1), l = T(), o = () => {
-      var S;
-      i.value = !i.value, (S = l.value) == null || S.focus();
+      var V;
+      i.value = !i.value, (V = l.value) == null || V.focus();
     }, r = async () => {
       if (j.value)
         return !1;
@@ -1341,19 +1341,19 @@ const $a = { key: 0 }, Ba = {
       n.value = t.value;
     });
     const j = k(() => v.value.length > 0);
-    return (S, V) => {
+    return (V, S) => {
       const D = ce, M = A;
       return p(), x("div", {
         id: a.name
       }, [
-        S.readonly ? (p(), x("div", Ca, [
-          $(S.$slots, "default", {}, () => [
-            m("span", Sa, h(u(n)), 1)
+        V.readonly ? (p(), x("div", Ca, [
+          $(V.$slots, "default", {}, () => [
+            m("span", Va, h(u(n)), 1)
           ])
         ])) : (p(), x("div", za, [
           i.value ? (p(), x("div", _a, [
             H((p(), x("div", ja, [
-              $(S.$slots, "editor", {
+              $(V.$slots, "editor", {
                 class: B({ "is-invalid": j.value }),
                 editFinished: r,
                 cancel: s,
@@ -1364,7 +1364,7 @@ const $a = { key: 0 }, Ba = {
                   ref_key: "input",
                   ref: l,
                   modelValue: u(n),
-                  "onUpdate:modelValue": V[0] || (V[0] = (b) => de(n) ? n.value = b : null),
+                  "onUpdate:modelValue": S[0] || (S[0] = (b) => de(n) ? n.value = b : null),
                   modelModifiers: { trim: !0 },
                   class: B({ "is-invalid": j.value }),
                   onKeydown: [
@@ -1381,7 +1381,7 @@ const $a = { key: 0 }, Ba = {
                 "data-cy": "clear-icon"
               })
             ])), [
-              [u(Ve), r]
+              [u(Se), r]
             ])
           ])) : (p(), x("div", {
             key: 1,
@@ -1389,7 +1389,7 @@ const $a = { key: 0 }, Ba = {
             onClick: o,
             onFocus: o
           }, [
-            $(S.$slots, "default", {}, () => [
+            $(V.$slots, "default", {}, () => [
               m("div", {
                 class: B(["pe-2 cursor-pointer", { "text-invalid": j.value }]),
                 "data-cy": "value"
@@ -1420,7 +1420,7 @@ const $a = { key: 0 }, Ba = {
       ], 8, Fa);
     };
   }
-}), Ta = ["href"], Ti = /* @__PURE__ */ F({
+}), Ta = ["href"], Mi = /* @__PURE__ */ F({
   __name: "ForgeNavbar",
   props: {
     severity: { default: "light" },
@@ -1502,7 +1502,7 @@ const $a = { key: 0 }, Ba = {
       ]), 1040, ["pt"]);
     };
   }
-}), Ma = { class: "multiselect__caret" }, Pa = ["checked"], Ia = ["data-cy"], Oa = ["checked"], Da = { class: "my-auto ms-1" }, Ua = { class: "multiselect__tag d-inline-flex" }, qa = { class: "my-auto" }, Mi = /* @__PURE__ */ F({
+}), Ma = { class: "multiselect__caret" }, Pa = ["checked"], Ia = ["data-cy"], Oa = ["checked"], Da = { class: "my-auto ms-1" }, Ua = { class: "multiselect__tag d-inline-flex" }, qa = { class: "my-auto" }, Pi = /* @__PURE__ */ F({
   __name: "ForgeMultiSelect",
   props: {
     severity: { default: "primary" },
@@ -1535,16 +1535,16 @@ const $a = { key: 0 }, Ba = {
       searchable: !!(l.searchable === null || l.searchable) && l.modelValue.length === l.options.length,
       async: !1,
       ...l
-    })), n = k(() => `forge-multiselect-${t.severity}`), j = k(() => `multiselect__option ${c.value ? " multiselect__option--highlight" : ""} ${S.value ? " multiselect__option--selected" : ""}`), S = k(() => v.value && !(v.value.multiple || !t.showSelectAll || v.value.async) ? !1 : l.modelValue.length === l.options.length), V = k(() => r.value.length > 0), D = k(() => !!((l.allowEmpty == null || l.allowEmpty) && t.showClearSelection && (v.value.multiple ? l.modelValue.length > 0 : l.modelValue))), M = () => c.value = !0, b = () => c.value = !1, y = () => {
+    })), n = k(() => `forge-multiselect-${t.severity}`), j = k(() => `multiselect__option ${c.value ? " multiselect__option--highlight" : ""} ${V.value ? " multiselect__option--selected" : ""}`), V = k(() => v.value && !(v.value.multiple || !t.showSelectAll || v.value.async) ? !1 : l.modelValue.length === l.options.length), S = k(() => r.value.length > 0), D = k(() => !!((l.allowEmpty == null || l.allowEmpty) && t.showClearSelection && (v.value.multiple ? l.modelValue.length > 0 : l.modelValue))), M = () => c.value = !0, b = () => c.value = !1, y = () => {
       s.value = v.value.multiple ? [] : null, o("update:modelValue", s.value);
     }, R = (E) => {
       o("update:modelValue", t.selectValue ? E.map((I) => I[t.selectValue]) : E);
     }, Z = (E) => l.modelValue !== null ? l.modelValue.some((I) => v.value.selectValue ? E[t.selectValue] === I : E.id === I.id && E.label === I.label) : !1, pe = () => {
-      S.value ? y() : (s.value = [...l.options], o("update:modelValue", [...l.options]));
+      V.value ? y() : (s.value = [...l.options], o("update:modelValue", [...l.options]));
     };
     return (E, I) => (p(), x(q, null, [
       f(u(Me), z(v.value, {
-        class: [n.value, V.value ? "is-invalid" : ""],
+        class: [n.value, S.value ? "is-invalid" : ""],
         "data-cy": "multiselect",
         "onUpdate:modelValue": [
           R,
@@ -1576,7 +1576,7 @@ const $a = { key: 0 }, Ba = {
             f(u(_), {
               icon: "bi:x",
               class: "my-auto multiselect__tag-icon",
-              onMousedown: G((Xt) => i(Q, U), ["prevent", "stop"]),
+              onMousedown: G((Qt) => i(Q, U), ["prevent", "stop"]),
               height: "18px",
               width: "18px"
             }, null, 8, ["onMousedown"])
@@ -1601,7 +1601,7 @@ const $a = { key: 0 }, Ba = {
                 class: B(["d-flex py-1", j.value])
               }, [
                 m("input", {
-                  checked: S.value,
+                  checked: V.value,
                   name: "selected",
                   type: "checkbox",
                   class: "form-check-input px-2 py-2 rounded ms-2 cursor-pointer"
@@ -1635,7 +1635,7 @@ const $a = { key: 0 }, Ba = {
         "data-cy": "error",
         class: "invalid-feedback"
       }, h(u(d)), 513), [
-        [Y, V.value]
+        [Y, S.value]
       ])
     ], 64));
   }
@@ -1646,7 +1646,7 @@ const $a = { key: 0 }, Ba = {
 }, La = { class: "d-inline-block" }, Na = {
   key: 1,
   class: "p-2 item d-flex justify-content-between align-items-center"
-}, Pi = /* @__PURE__ */ F({
+}, Ra = /* @__PURE__ */ F({
   __name: "ForgeMultiSelectPreview",
   props: /* @__PURE__ */ N({
     title: { default: "Selected Items" },
@@ -1679,7 +1679,7 @@ const $a = { key: 0 }, Ba = {
             modelValue: t.value,
             "onUpdate:modelValue": o[0] || (o[0] = (d) => t.value = d)
           }, { ...l.$attrs }, {
-            options: a.options,
+            options: a.options ?? [],
             optionLabel: "label",
             placeholder: l.multiselectPlaceholder,
             "data-cy": "multiselect"
@@ -1724,17 +1724,17 @@ const $a = { key: 0 }, Ba = {
                   _: 2
                 }, 1032, ["onClick"])) : C("", !0)
               ]))), 128)),
-              t.value.length === 0 ? (p(), x("div", Na, h(a.optionsPreviewEmptyText), 1)) : C("", !0)
+              t.value == null || t.value.length == 0 ? (p(), x("div", Na, h(a.optionsPreviewEmptyText), 1)) : C("", !0)
             ])
           ], 4)
         ], 2)
       ], 2);
     };
   }
-}), Ra = { class: "d-flex justify-content-between pb-2" }, Ha = {
+}), Ha = { class: "d-flex justify-content-between pb-2" }, Wa = {
   "data-cy": "title",
   class: "my-auto"
-}, Wa = {
+}, Ya = {
   "data-cy": "slot",
   class: "d-flex align-items-center"
 }, Ii = /* @__PURE__ */ F({
@@ -1744,14 +1744,14 @@ const $a = { key: 0 }, Ba = {
   },
   setup(e) {
     const a = e;
-    return (t, i) => (p(), x("div", Ra, [
-      m("h3", Ha, h(a.title), 1),
-      m("div", Wa, [
+    return (t, i) => (p(), x("div", Ha, [
+      m("h3", Wa, h(a.title), 1),
+      m("div", Ya, [
         $(t.$slots, "default")
       ])
     ]));
   }
-}), Ya = { class: "d-flex" }, Ga = { "data-cy": "before-slot" }, Ka = { class: "position-relative w-100" }, Za = { "data-cy": "after-slot" }, ke = /* @__PURE__ */ F({
+}), Ga = { class: "d-flex" }, Ka = { "data-cy": "before-slot" }, Za = { class: "position-relative w-100" }, Ja = { "data-cy": "after-slot" }, ke = /* @__PURE__ */ F({
   __name: "ForgeDatepicker",
   props: /* @__PURE__ */ N({
     severity: { default: "primary" },
@@ -1920,18 +1920,18 @@ const $a = { key: 0 }, Ba = {
       })
     }));
     return (n, j) => {
-      const S = Pe;
+      const V = Pe;
       return p(), x(q, null, [
-        m("div", Ya, [
-          m("span", Ga, [
+        m("div", Ga, [
+          m("span", Ka, [
             $(n.$slots, "before")
           ]),
-          m("div", Ka, [
-            f(S, z({ ...a, ...n.$attrs }, {
+          m("div", Za, [
+            f(V, z({ ...a, ...n.$attrs }, {
               pt: v.value,
               modelValue: t.value,
               "onUpdate:modelValue": [
-                j[0] || (j[0] = (V) => t.value = V),
+                j[0] || (j[0] = (S) => t.value = S),
                 u(o)
               ],
               onBlur: u(r),
@@ -1953,7 +1953,7 @@ const $a = { key: 0 }, Ba = {
               [Y, a.modelValue]
             ])
           ]),
-          m("span", Za, [
+          m("span", Ja, [
             $(n.$slots, "after")
           ])
         ]),
@@ -1978,7 +1978,7 @@ const $a = { key: 0 }, Ba = {
       class: B(t.value < 0 ? "text-danger" : "")
     }, "Remaining characters: " + h(t.value), 3));
   }
-}), Ja = { class: "d-flex justify-content-between" }, Di = /* @__PURE__ */ F({
+}), Xa = { class: "d-flex justify-content-between" }, Di = /* @__PURE__ */ F({
   __name: "ForgeForm",
   props: {
     onSubmit: {},
@@ -2034,7 +2034,7 @@ const $a = { key: 0 }, Ba = {
           _: 3
         })) : C("", !0),
         $(o.$slots, "default"),
-        m("div", Ja, [
+        m("div", Xa, [
           $(o.$slots, "cancel", {}, () => [
             o.hideCancel ? C("", !0) : (p(), w(s, {
               key: 0,
@@ -2071,10 +2071,10 @@ const $a = { key: 0 }, Ba = {
       ], 16);
     };
   }
-}), Xa = {
+}), Qa = {
   key: 1,
   class: "d-flex flex-column w-100"
-}, Qa = ["for"], Ui = /* @__PURE__ */ F({
+}, et = ["for"], Ui = /* @__PURE__ */ F({
   __name: "ForgeFormField",
   props: /* @__PURE__ */ N({
     name: {},
@@ -2098,7 +2098,7 @@ const $a = { key: 0 }, Ba = {
     return xe(() => o.value, (v) => {
       a.value = v;
     }, { immediate: !0 }), (v, n) => {
-      const j = Oe, S = Ie, V = ce, D = se, M = me, b = ke;
+      const j = Oe, V = Ie, S = ce, D = se, M = me, b = ke;
       return t.type === "checkbox" ? (p(), w(ya, z({
         key: 0,
         id: t.name,
@@ -2107,7 +2107,7 @@ const $a = { key: 0 }, Ba = {
         name: t.name,
         modelValue: a.value,
         "onUpdate:modelValue": n[0] || (n[0] = (y) => a.value = y)
-      }), null, 16, ["id", "label", "name", "modelValue"])) : (p(), x("div", Xa, [
+      }), null, 16, ["id", "label", "name", "modelValue"])) : (p(), x("div", Qa, [
         m("div", {
           "data-cy": "input-wrapper",
           class: B(["d-flex", t.fieldLabelPosition === "top" ? "flex-column" : "flex-row"])
@@ -2115,7 +2115,7 @@ const $a = { key: 0 }, Ba = {
           m("label", {
             for: t.name,
             class: B(t.fieldLabelPosition === "top" ? "mb-1" : "me-2 " + t.labelWidthClass)
-          }, h(t.fieldLabel), 11, Qa),
+          }, h(t.fieldLabel), 11, et),
           t.type === "number" ? (p(), w(u(ge), z({
             key: 0,
             id: t.name
@@ -2136,7 +2136,7 @@ const $a = { key: 0 }, Ba = {
             "onUpdate:modelValue": n[2] || (n[2] = (y) => a.value = y),
             onInput: i,
             onBlur: u(d)
-          }), null, 16, ["id", "placeholder", "class", "modelValue", "onBlur"])) : t.type === "mask" ? (p(), w(S, z({
+          }), null, 16, ["id", "placeholder", "class", "modelValue", "onBlur"])) : t.type === "mask" ? (p(), w(V, z({
             key: 2,
             id: t.name
           }, v.$attrs, {
@@ -2147,7 +2147,7 @@ const $a = { key: 0 }, Ba = {
             "onUpdate:modelValue": n[3] || (n[3] = (y) => a.value = y),
             onComplete: i,
             onBlur: u(d)
-          }), null, 16, ["id", "placeholder", "mask", "class", "modelValue", "onBlur"])) : t.type === "text" ? (p(), w(V, z({
+          }), null, 16, ["id", "placeholder", "mask", "class", "modelValue", "onBlur"])) : t.type === "text" ? (p(), w(S, z({
             key: 3,
             id: t.name
           }, v.$attrs, {
@@ -2165,10 +2165,14 @@ const $a = { key: 0 }, Ba = {
             modelValue: a.value,
             "onUpdate:modelValue": n[6] || (n[6] = (y) => a.value = y),
             class: { "is-invalid": c.value }
-          }), null, 16, ["modelValue", "class"])) : t.type === "datepicker" ? (p(), w(b, z({ key: 6 }, { ...t, ...v.$attrs }, {
+          }), null, 16, ["modelValue", "class"])) : t.type === "multiselect-preview" ? (p(), w(Ra, z({ key: 6 }, { ...t, ...v.$attrs }, {
             modelValue: a.value,
             "onUpdate:modelValue": n[7] || (n[7] = (y) => a.value = y),
             class: { "is-invalid": c.value }
+          }), null, 16, ["modelValue", "class"])) : t.type === "datepicker" ? (p(), w(b, z({ key: 7 }, { ...t, ...v.$attrs }, {
+            modelValue: a.value,
+            "onUpdate:modelValue": n[8] || (n[8] = (y) => a.value = y),
+            class: { "is-invalid": c.value }
           }), null, 16, ["modelValue", "class"])) : C("", !0)
         ], 2),
         H(m("small", {
@@ -2268,7 +2272,7 @@ const $a = { key: 0 }, Ba = {
       ], 64);
     };
   }
-}), et = /* @__PURE__ */ F({
+}), at = /* @__PURE__ */ F({
   __name: "ForgeProgressBar",
   props: {
     severity: { default: "primary" },
@@ -2320,7 +2324,7 @@ const $a = { key: 0 }, Ba = {
       }, 16, ["pt"]);
     };
   }
-}), at = { class: "value text-white w-100 text-center" }, Ai = /* @__PURE__ */ F({
+}), tt = { class: "value text-white w-100 text-center" }, Ai = /* @__PURE__ */ F({
   __name: "ForgeStatWidget",
   props: {
     size: { default: "md" },
@@ -2331,15 +2335,15 @@ const $a = { key: 0 }, Ba = {
     return (t, i) => (p(), x("div", z(t.$attrs, {
       class: `d-flex shadow m-2 align-items-center widget--${a.size} bg-${a.severity}`
     }), [
-      m("span", at, [
+      m("span", tt, [
         $(t.$slots, "default")
       ])
     ], 16));
   }
-}), tt = {
+}), it = {
   class: "d-flex flex-column align-items-center",
   "data-cy": "stepper"
-}, it = { class: "d-flex align-items-center justify-content-center w-100" }, Ei = /* @__PURE__ */ F({
+}, lt = { class: "d-flex align-items-center justify-content-center w-100" }, Ei = /* @__PURE__ */ F({
   __name: "ForgeStepper",
   props: {
     currentStep: { default: 0 },
@@ -2406,9 +2410,9 @@ const $a = { key: 0 }, Ba = {
       })
     }));
     return (c, v) => {
-      const n = A, j = Ae, S = qe;
-      return p(), x("div", tt, [
-        m("div", it, [
+      const n = A, j = Ae, V = qe;
+      return p(), x("div", it, [
+        m("div", lt, [
           f(n, {
             severity: i.severity,
             disabled: s.value,
@@ -2426,18 +2430,18 @@ const $a = { key: 0 }, Ba = {
           }, 8, ["severity", "disabled"]),
           f(j, {
             "active-step": l.value,
-            "onUpdate:activeStep": v[0] || (v[0] = (V) => l.value = V),
+            "onUpdate:activeStep": v[0] || (v[0] = (S) => l.value = S),
             model: i.model,
             pt: d.value,
             readonly: !1
           }, null, 8, ["active-step", "model", "pt"])
         ]),
-        f(S, { class: "m-4" }),
-        (p(!0), x(q, null, W(i.model, (V, D) => (p(), x("div", {
+        f(V, { class: "m-4" }),
+        (p(!0), x(q, null, W(i.model, (S, D) => (p(), x("div", {
           key: D,
           class: "w-100"
         }, [
-          D === l.value ? $(c.$slots, V.key ?? V.label, {
+          D === l.value ? $(c.$slots, S.key ?? S.label, {
             key: 0,
             nextStep: r,
             previousStep: o
@@ -2447,7 +2451,7 @@ const $a = { key: 0 }, Ba = {
               "data-cy": "alert"
             }, {
               default: g(() => [
-                P(" Please add Slot Content for the key " + h(V.key ?? V.label) + " ", 1),
+                P(" Please add Slot Content for the key " + h(S.key ?? S.label) + " ", 1),
                 f(n, {
                   severity: "primary",
                   label: "Next",
@@ -2462,7 +2466,7 @@ const $a = { key: 0 }, Ba = {
       ]);
     };
   }
-}), lt = { class: "p-4 text-wrap w-100" }, ot = { class: "p-4 text-wrap w-100" }, Li = /* @__PURE__ */ F({
+}), ot = { class: "p-4 text-wrap w-100" }, nt = { class: "p-4 text-wrap w-100" }, Li = /* @__PURE__ */ F({
   __name: "ForgeTile",
   props: {
     severity: { default: "primary" },
@@ -2482,7 +2486,7 @@ const $a = { key: 0 }, Ba = {
         "data-cy": "button-tile"
       }, {
         default: g(() => [
-          m("div", lt, [
+          m("div", ot, [
             $(l.$slots, "default", {}, () => [
               o[0] || (o[0] = P("Tile Content"))
             ])
@@ -2494,7 +2498,7 @@ const $a = { key: 0 }, Ba = {
         class: B(["d-flex w-100", i.value]),
         "data-cy": "tile"
       }, [
-        m("div", ot, [
+        m("div", nt, [
           $(l.$slots, "default", {}, () => [
             o[1] || (o[1] = P("Tile Content"))
           ])
@@ -2506,13 +2510,13 @@ const $a = { key: 0 }, Ba = {
 function te(e, a) {
   return e > 1 ? `${a}s` : a;
 }
-const nt = {
+const st = {
   class: "d-flex justify-content-start align-items-baseline",
   "data-cy": "pagination-header"
-}, st = { class: "ms-2" }, rt = { key: 0 }, pt = {
+}, rt = { class: "ms-2" }, pt = { key: 0 }, dt = {
   class: "w-auto",
   "data-cy": "total"
-}, dt = /* @__PURE__ */ F({
+}, ct = /* @__PURE__ */ F({
   __name: "ForgePaginationHeader",
   props: {
     total: {},
@@ -2527,9 +2531,9 @@ const nt = {
       const r = Math.ceil(i.total / i.perPage);
       return `${r} ${te(r, "page")}`;
     });
-    return (r, s) => (p(), x("div", nt, [
+    return (r, s) => (p(), x("div", st, [
       s[2] || (s[2] = P(" Number of results per page ")),
-      m("div", st, [
+      m("div", rt, [
         f(u(se), {
           options: i.pageSizes,
           "model-value": i.perPage,
@@ -2537,16 +2541,16 @@ const nt = {
           onChange: s[0] || (s[0] = (d) => l(d))
         }, null, 8, ["options", "model-value"])
       ]),
-      i.total ? (p(), x("div", rt, [
+      i.total ? (p(), x("div", pt, [
         s[1] || (s[1] = m("span", { class: "mx-2" }, "|", -1)),
-        m("span", pt, h(i.total) + " " + h(u(te)(i.total, "result")) + " across " + h(o.value), 1)
+        m("span", dt, h(i.total) + " " + h(u(te)(i.total, "result")) + " across " + h(o.value), 1)
       ])) : C("", !0)
     ]));
   }
-}), ct = { class: "position-relative" }, mt = { "data-cy": "above-table-slot" }, ut = { class: "d-flex w-100" }, vt = {
+}), mt = { class: "position-relative" }, ut = { "data-cy": "above-table-slot" }, vt = { class: "d-flex w-100" }, ft = {
   class: "mx-auto",
   "data-cy": "empty-message"
-}, ft = { class: "d-flex" }, xt = { class: "d-flex align-items-end mb-2" }, bt = { key: 0 }, gt = { class: "ms-auto" }, Ni = /* @__PURE__ */ F({
+}, xt = { class: "d-flex" }, bt = { class: "d-flex align-items-end mb-2" }, gt = { key: 0 }, yt = { class: "ms-auto" }, Ni = /* @__PURE__ */ F({
   __name: "ForgeTable",
   props: {
     value: {},
@@ -2666,13 +2670,13 @@ const nt = {
       else
         for (const b in i.filters)
           typeof i.filters[b] == "string" ? i.filters[b] = "" : i.filters[b].value = null;
-      V(i.filters);
+      S(i.filters);
     }, j = () => {
       l.value.exportCSV();
-    }, S = (b) => {
+    }, V = (b) => {
       var y;
       s.value.sortDirection = b.sortOrder === 1 ? "Asc" : b.sortOrder === -1 ? "Desc" : "None", s.value.sortField = ((y = b.sortField) == null ? void 0 : y.toString()) ?? "", t("update:tableContext", s.value), t("sort", b);
-    }, V = (b) => {
+    }, S = (b) => {
       s.value.filters = b, t("update:tableContext", s.value), t("update:filters", b);
     }, D = (b) => {
       s.value.page = b.page, t("update:tableContext", s.value), t("page", b);
@@ -2681,8 +2685,8 @@ const nt = {
     };
     return xe(() => i.filters, (b) => {
       s.value.filters = b, t("update:tableContext", s.value);
-    }, { deep: !0 }), ne(() => t("update:tableContext", s.value)), (b, y) => (p(), x("div", ct, [
-      m("span", mt, [
+    }, { deep: !0 }), ne(() => t("update:tableContext", s.value)), (b, y) => (p(), x("div", mt, [
+      m("span", ut, [
         $(b.$slots, "above-table")
       ]),
       f(u(Ee), z({
@@ -2695,23 +2699,23 @@ const nt = {
         ref_key: "forgeTable",
         ref: l,
         "data-cy": "table",
-        "onUpdate:filters": V,
-        onSort: S,
+        "onUpdate:filters": S,
+        onSort: V,
         onPage: D
       }), oe({
         empty: g(() => [
-          m("div", ut, [
-            m("h5", vt, h(b.emptyMessage ?? "No items Found."), 1)
+          m("div", vt, [
+            m("h5", ft, h(b.emptyMessage ?? "No items Found."), 1)
           ])
         ]),
         header: g(() => [
           m("div", {
             class: B(i.loading ? "opacity-50" : "")
           }, [
-            m("div", ft, [
-              m("div", xt, [
-                b.paginator && !b.legacyPaginationFooter ? (p(), x("span", bt, [
-                  f(dt, {
+            m("div", xt, [
+              m("div", bt, [
+                b.paginator && !b.legacyPaginationFooter ? (p(), x("span", gt, [
+                  f(ct, {
                     total: d.value,
                     "page-sizes": o.value,
                     "per-page": r.value,
@@ -2722,7 +2726,7 @@ const nt = {
                   }, null, 8, ["total", "page-sizes", "per-page"])
                 ])) : C("", !0)
               ]),
-              m("div", gt, [
+              m("div", yt, [
                 b.showClearButton ? (p(), w(u(A), {
                   key: 0,
                   outlined: "",
@@ -2804,7 +2808,7 @@ const nt = {
       ]), 1040, ["class", "pt", "rows", "total-records", "filter-display"])
     ]));
   }
-}), yt = { class: "d-flex position-relative" }, ht = { class: "d-flex w-100" }, Ri = /* @__PURE__ */ F({
+}), ht = { class: "d-flex position-relative" }, wt = { class: "d-flex w-100" }, Ri = /* @__PURE__ */ F({
   __name: "ForgeFilterHeader",
   props: /* @__PURE__ */ N({
     dataType: {},
@@ -2835,7 +2839,7 @@ const nt = {
     };
     return (l, o) => {
       const r = ge, s = A;
-      return p(), x("div", yt, [
+      return p(), x("div", ht, [
         l.dataType === "numeric" ? (p(), w(r, z({
           key: 0,
           modelValue: a.value,
@@ -2857,7 +2861,7 @@ const nt = {
           "option-label": l.optionLabel
         }), {
           value: g(({ value: d, placeholder: c }) => [
-            m("div", ht, [
+            m("div", wt, [
               m("span", {
                 class: B({ "filter-placeholder": d === null })
               }, h(t(d, c)), 3),
@@ -2988,7 +2992,7 @@ function Be(e, a, t, i) {
     })) : a[r].status = "Duplicate";
   }), a;
 }
-async function wt(e, a) {
+async function kt(e, a) {
   if (e === "Uploaded" && a !== null)
     try {
       await new ye(a).delete();
@@ -3011,20 +3015,20 @@ function fe(e, a = !0, t = 1) {
   while (Math.round(Math.abs(e) * r) / r >= i && o < l.length - 1);
   return e.toFixed(t) + " " + l[o];
 }
-function kt(e) {
+function $t(e) {
   return ["image/gif", "image/png", "image/jpeg", "image/svg"].includes(e);
 }
-function $t(e) {
+function Bt(e) {
   return URL.createObjectURL(e);
 }
-function Bt() {
+function Ft() {
   const e = new $e(ve, ue);
   return e.define({ "application/vnd.ms-outlook": ["pst"] }), e;
 }
-const Ft = { class: "d-flex justify-content-between" }, zt = ["accept", "disabled", "multiple"], _t = {
+const zt = { class: "d-flex justify-content-between" }, _t = ["accept", "disabled", "multiple"], jt = {
   class: "text-break accepted-file-types-container",
   id: "accepted-file-types-overlay"
-}, jt = /* @__PURE__ */ F({
+}, Ct = /* @__PURE__ */ F({
   __name: "UploadButton",
   props: /* @__PURE__ */ N({
     acceptedFileTypes: {},
@@ -3041,7 +3045,7 @@ const Ft = { class: "d-flex justify-content-between" }, zt = ["accept", "disable
     };
     return (r, s) => {
       const d = A;
-      return p(), x("div", Ft, [
+      return p(), x("div", zt, [
         $(r.$slots, "message"),
         m("div", null, [
           m("input", {
@@ -3052,7 +3056,7 @@ const Ft = { class: "d-flex justify-content-between" }, zt = ["accept", "disable
             disabled: l.value,
             multiple: r.maxFileInput > 1,
             onInput: s[0] || (s[0] = (c) => o([...c.target.files]))
-          }, null, 40, zt),
+          }, null, 40, _t),
           m("label", {
             class: B([{ disabled: l.value }, "btn btn-primary"]),
             id: "file-input-button",
@@ -3086,21 +3090,21 @@ const Ft = { class: "d-flex justify-content-between" }, zt = ["accept", "disable
           ref: t
         }, {
           default: g(() => [
-            m("div", _t, h(r.acceptedFileTypes.map((c) => c.label ?? c.fileType.split("/").pop()).join(", ")), 1)
+            m("div", jt, h(r.acceptedFileTypes.map((c) => c.label ?? c.fileType.split("/").pop()).join(", ")), 1)
           ]),
           _: 1
         }, 512)
       ]);
     };
   }
-}), Ct = {
+}), Vt = {
   key: 0,
   class: "py-4 px-3",
   id: "placeholder-message"
 }, St = {
   key: 1,
   class: "d-flex flex-column"
-}, Vt = /* @__PURE__ */ F({
+}, Tt = /* @__PURE__ */ F({
   __name: "DragDropArea",
   props: /* @__PURE__ */ N({
     maxFileInput: {},
@@ -3122,7 +3126,7 @@ const Ft = { class: "d-flex justify-content-between" }, zt = ["accept", "disable
       onDragover: r[1] || (r[1] = G((s) => t.value = !0, ["prevent"])),
       onDrop: G(l, ["prevent"])
     }, [
-      a.value.length === 0 ? (p(), x("div", Ct, [
+      a.value.length === 0 ? (p(), x("div", Vt, [
         f(u(_), {
           icon: "bi:upload",
           class: "me-2",
@@ -3135,7 +3139,7 @@ const Ft = { class: "d-flex justify-content-between" }, zt = ["accept", "disable
       ]))
     ], 34));
   }
-}), Tt = { class: "d-flex align-items-center me-2" }, Mt = /* @__PURE__ */ F({
+}), Mt = { class: "d-flex align-items-center me-2" }, Pt = /* @__PURE__ */ F({
   __name: "UploadStatus",
   props: {
     fileSize: {},
@@ -3160,8 +3164,8 @@ const Ft = { class: "d-flex justify-content-between" }, zt = ["accept", "disable
           return "Upload Failed: Connection error, please try again.";
       }
     });
-    return (i, l) => (p(), x("div", Tt, [
-      i.uploadStatus === "Uploading" ? (p(), w(et, {
+    return (i, l) => (p(), x("div", Mt, [
+      i.uploadStatus === "Uploading" ? (p(), w(at, {
         key: 0,
         pixelWidth: 200,
         animate: "",
@@ -3185,16 +3189,16 @@ const Ft = { class: "d-flex justify-content-between" }, zt = ["accept", "disable
       }, 8, ["severity"])) : C("", !0)
     ]));
   }
-}), Pt = ["data-cy"], It = { class: "ms-3 d-flex flex-column" }, Ot = {
+}), It = ["data-cy"], Ot = { class: "ms-3 d-flex flex-column" }, Dt = {
   key: 1,
   id: "file-name"
-}, Dt = {
+}, Ut = {
   class: "text-black-50",
   id: "file-type"
-}, Ut = {
+}, qt = {
   class: "text-black-50",
   id: "file-size"
-}, qt = { class: "ms-auto my-auto d-flex" }, At = /* @__PURE__ */ F({
+}, At = { class: "ms-auto my-auto d-flex" }, Et = /* @__PURE__ */ F({
   __name: "FileInfo",
   props: /* @__PURE__ */ N({
     editableFileName: { type: Boolean },
@@ -3213,9 +3217,9 @@ const Ft = { class: "d-flex justify-content-between" }, zt = ["accept", "disable
   }),
   emits: /* @__PURE__ */ N(["deleted"], ["update:file", "update:blobFileName", "update:uploadStatus"]),
   setup(e, { emit: a }) {
-    const t = O(e, "file"), i = O(e, "blobFileName"), l = O(e, "uploadStatus"), o = a, r = T(t.value.name), s = T(""), d = T(0), c = T(), v = k(() => e.acceptedFileTypes.some(({ fileType: M }) => M === t.value.type)), n = k(() => t.value.size <= e.maxFileSize), j = k(() => t.value.type ? t.value.type : Bt().getType(t.value.name)), S = () => {
+    const t = O(e, "file"), i = O(e, "blobFileName"), l = O(e, "uploadStatus"), o = a, r = T(t.value.name), s = T(""), d = T(0), c = T(), v = k(() => e.acceptedFileTypes.some(({ fileType: M }) => M === t.value.type)), n = k(() => t.value.size <= e.maxFileSize), j = k(() => t.value.type ? t.value.type : Ft().getType(t.value.name)), V = () => {
       t.value = new File([t.value], r.value, { type: t.value.type, lastModified: (/* @__PURE__ */ new Date()).valueOf() });
-    }, V = async () => {
+    }, S = async () => {
       if (!v.value || !n.value) {
         l.value = v.value ? "InvalidFileSize" : "InvalidFileType";
         return;
@@ -3246,10 +3250,10 @@ const Ft = { class: "d-flex justify-content-between" }, zt = ["accept", "disable
         l.value = "Failed";
       }
     }, D = async () => {
-      await wt(l.value, s.value), o("deleted", t.value);
+      await kt(l.value, s.value), o("deleted", t.value);
     };
     return ne(() => {
-      e.autoUploadToBlob && V();
+      e.autoUploadToBlob && S();
     }), (M, b) => {
       const y = A;
       return p(), x("div", {
@@ -3257,11 +3261,11 @@ const Ft = { class: "d-flex justify-content-between" }, zt = ["accept", "disable
         "data-cy": `file-info-${t.value.name}`
       }, [
         m("div", null, [
-          u(kt)(t.value.type) ? (p(), w(u(Le), {
+          u($t)(t.value.type) ? (p(), w(u(Le), {
             key: 0,
             id: "thumbnail-image",
             "image-class": "image-file-thumbnail border",
-            src: u($t)(t.value),
+            src: u(Bt)(t.value),
             alt: t.value.name,
             width: "75px",
             preview: ""
@@ -3273,23 +3277,23 @@ const Ft = { class: "d-flex justify-content-between" }, zt = ["accept", "disable
             width: "75px"
           }))
         ]),
-        m("div", It, [
+        m("div", Ot, [
           m("div", null, [
-            M.editableFileName ? (p(), w(Va, {
+            M.editableFileName ? (p(), w(Sa, {
               key: 0,
               id: "edit-file-name",
               modelValue: r.value,
               "onUpdate:modelValue": b[0] || (b[0] = (R) => r.value = R),
               rules: M.customFileNameRules,
               name: t.value.name,
-              "complete-action": S
-            }, null, 8, ["modelValue", "rules", "name"])) : (p(), x("span", Ot, h(t.value.name), 1))
+              "complete-action": V
+            }, null, 8, ["modelValue", "rules", "name"])) : (p(), x("span", Dt, h(t.value.name), 1))
           ]),
-          m("span", Dt, "File type: " + h(t.value.type.split("/").pop()), 1),
-          m("span", Ut, "File size: " + h(u(fe)(t.value.size)), 1)
+          m("span", Ut, "File type: " + h(t.value.type.split("/").pop()), 1),
+          m("span", qt, "File size: " + h(u(fe)(t.value.size)), 1)
         ]),
-        m("div", qt, [
-          (p(), w(Mt, {
+        m("div", At, [
+          (p(), w(Pt, {
             key: l.value,
             "file-size": t.value.size,
             "upload-status": l.value,
@@ -3299,7 +3303,7 @@ const Ft = { class: "d-flex justify-content-between" }, zt = ["accept", "disable
           l.value === "Not Uploaded" || l.value === "Failed" || l.value === "Duplicate" || l.value === "Aborted" ? (p(), w(y, {
             key: 0,
             link: "",
-            onClick: V
+            onClick: S
           }, {
             default: g(() => [
               f(u(_), {
@@ -3329,20 +3333,20 @@ const Ft = { class: "d-flex justify-content-between" }, zt = ["accept", "disable
             _: 1
           }))
         ])
-      ], 8, Pt);
+      ], 8, It);
     };
   }
-}), Et = { class: "d-flex justify-content-end mt-1" }, Lt = { id: "max-file-size" }, Nt = /* @__PURE__ */ F({
+}), Lt = { class: "d-flex justify-content-end mt-1" }, Nt = { id: "max-file-size" }, Rt = /* @__PURE__ */ F({
   __name: "MaxFileSize",
   props: {
     maxFileSize: {}
   },
   setup(e) {
-    return (a, t) => (p(), x("div", Et, [
-      m("div", Lt, "Max file size: " + h(u(fe)(a.maxFileSize)), 1)
+    return (a, t) => (p(), x("div", Lt, [
+      m("div", Nt, "Max file size: " + h(u(fe)(a.maxFileSize)), 1)
     ]));
   }
-}), Rt = { "data-cy": "file-uploader" }, Ht = { key: 0 }, Hi = /* @__PURE__ */ F({
+}), Ht = { "data-cy": "file-uploader" }, Wt = { key: 0 }, Hi = /* @__PURE__ */ F({
   __name: "ForgeFileUploader",
   props: /* @__PURE__ */ N({
     acceptedFileTypes: {},
@@ -3362,13 +3366,13 @@ const Ft = { class: "d-flex justify-content-between" }, zt = ["accept", "disable
     const a = O(e, "modelValue"), t = e, i = (l) => {
       a.value = a.value.filter((o) => o.file != l);
     };
-    return (l, o) => (p(), x("div", Rt, [
-      f(jt, z(t, {
+    return (l, o) => (p(), x("div", Ht, [
+      f(Ct, z(t, {
         modelValue: a.value,
         "onUpdate:modelValue": o[0] || (o[0] = (r) => a.value = r)
       }), null, 16, ["modelValue"]),
-      l.showDragDropArea ? (p(), x("div", Ht, [
-        f(Vt, {
+      l.showDragDropArea ? (p(), x("div", Wt, [
+        f(Tt, {
           "max-file-input": t.maxFileInput,
           "max-file-size": t.maxFileSize,
           "accepted-file-types": t.acceptedFileTypes,
@@ -3377,7 +3381,7 @@ const Ft = { class: "d-flex justify-content-between" }, zt = ["accept", "disable
         }, {
           default: g(() => [
             (p(!0), x(q, null, W(a.value, ({ file: r }, s) => (p(), x("span", null, [
-              (p(), w(At, z({
+              (p(), w(Et, z({
                 key: r.name,
                 class: s === a.value.length - 1 || a.value.length == 1 ? "" : "border-bottom",
                 file: a.value[s].file,
@@ -3392,13 +3396,13 @@ const Ft = { class: "d-flex justify-content-between" }, zt = ["accept", "disable
           ]),
           _: 1
         }, 8, ["max-file-input", "max-file-size", "accepted-file-types", "modelValue"]),
-        f(Nt, {
+        f(Rt, {
           "max-file-size": t.maxFileSize
         }, null, 8, ["max-file-size"])
       ])) : C("", !0)
     ]));
   }
-}), Wt = { class: "d-flex" }, Yt = { class: "me-3" }, Gt = { class: "ms-2" }, Kt = { class: "d-flex flex-column w-100" }, Zt = ["onClick"], Jt = ["for"], Wi = /* @__PURE__ */ F({
+}), Yt = { class: "d-flex" }, Gt = { class: "me-3" }, Kt = { class: "ms-2" }, Zt = { class: "d-flex flex-column w-100" }, Jt = ["onClick"], Xt = ["for"], Wi = /* @__PURE__ */ F({
   __name: "ForgeColumnCustomiser",
   props: {
     modelValue: { required: !0 },
@@ -3420,12 +3424,12 @@ const Ft = { class: "d-flex justify-content-between" }, zt = ["accept", "disable
         class: "ms-2"
       }, {
         default: g(() => [
-          m("div", Wt, [
-            m("div", Yt, [
+          m("div", Yt, [
+            m("div", Gt, [
               f(u(_), { icon: "bi:layout-three-columns" })
             ]),
             P(" Columns (" + h(a.value.length ?? 0) + "/" + h(l.value.length ?? 0) + ") ", 1),
-            m("div", Gt, [
+            m("div", Kt, [
               f(u(_), {
                 icon: i.value ? "bi:chevron-up" : "bi:chevron-down"
               }, null, 8, ["icon"])
@@ -3442,7 +3446,7 @@ const Ft = { class: "d-flex justify-content-between" }, zt = ["accept", "disable
         onShow: c[1] || (c[1] = () => i.value = !0)
       }, {
         default: g(() => [
-          m("div", Kt, [
+          m("div", Zt, [
             (p(!0), x(q, null, W(l.value, (v, n) => (p(), x("div", {
               class: B(["d-flex cursor-pointer", {
                 "border-top": n !== 0,
@@ -3461,8 +3465,8 @@ const Ft = { class: "d-flex justify-content-between" }, zt = ["accept", "disable
               m("label", {
                 for: v.field,
                 class: "cursor-pointer"
-              }, h(v.header), 9, Jt)
-            ], 10, Zt))), 256))
+              }, h(v.header), 9, Xt)
+            ], 10, Jt))), 256))
           ])
         ]),
         _: 1
@@ -3471,8 +3475,8 @@ const Ft = { class: "d-flex justify-content-between" }, zt = ["accept", "disable
   }
 });
 export {
-  zi as Bootstrap_PT,
-  _i as ForgeActionButton,
+  _i as Bootstrap_PT,
+  ji as ForgeActionButton,
   re as ForgeAlert,
   ya as ForgeCheckbox,
   qi as ForgeChips,
@@ -3482,21 +3486,21 @@ export {
   Ri as ForgeFilterHeader,
   Di as ForgeForm,
   Ui as ForgeFormField,
-  Va as ForgeInlineEditor,
-  ji as ForgeLink,
+  Sa as ForgeInlineEditor,
+  Ci as ForgeLink,
   we as ForgeLoader,
-  Vi as ForgeModal,
-  Mi as ForgeMultiSelect,
-  Pi as ForgeMultiSelectPreview,
-  Ti as ForgeNavbar,
+  Ti as ForgeModal,
+  Pi as ForgeMultiSelect,
+  Ra as ForgeMultiSelectPreview,
+  Mi as ForgeNavbar,
   Ii as ForgePageHeader,
-  et as ForgeProgressBar,
+  at as ForgeProgressBar,
   Oi as ForgeRemainingCharacters,
   Ai as ForgeStatWidget,
   Ei as ForgeStepper,
   Ni as ForgeTable,
   Li as ForgeTile,
   Si as convertToMultiSelectOption,
-  Ci as enumToMultiSelectList,
+  Vi as enumToMultiSelectList,
   ka as parseError
 };

package/dist/src/types/forge-types.d.ts

@@ -6,7 +6,7 @@ import { DataTableFilterMeta } from 'primevue/datatable';
 export type Severity = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'brand' | undefined;
 export type Size = 'sm' | 'md' | 'lg' | undefined;
 export type BarPosition = 'top' | 'left' | 'none';
-export type ForgeFormFieldTypes = "text" | "number" | "checkbox" | "textarea" | "mask" | "select" | "multiselect" | "datepicker";
+export type ForgeFormFieldTypes = "text" | "number" | "checkbox" | "textarea" | "mask" | "select" | "multiselect" | "datepicker" | "multiselect-preview";
 export type ForgeNavbarPosition = "fixed-top" | "fixed-bottom" | "sticky-top";
 export type ForgeMultiSelectOrientation = "row" | "column";
 export type ForgeColumnDataType = 'text' | 'numeric' | 'date' | 'select' | 'multiselect' | undefined;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@3squared/forge-ui-3",
   "repository": "https://github.com/3Squared/ForgeUI-3",
   "description": "ForgeUI 3 is Vue 3 UI Library which combines a variety of popular packages to create a consistent UI for your application.",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "type": "module",
   "license": "MIT",
   "contributors": [

package/src/types/forge-types.ts

@@ -7,7 +7,7 @@ export type Severity = 'primary' | 'secondary' | 'success' | 'warning' | 'danger
 export type Size = 'sm' | 'md' | 'lg' | undefined
 export type BarPosition = 'top' | 'left' | 'none'
 
-export type ForgeFormFieldTypes = "text" | "number" | "checkbox" | "textarea" | "mask" | "select" | "multiselect" | "datepicker"
+export type ForgeFormFieldTypes = "text" | "number" | "checkbox" | "textarea" | "mask" | "select" | "multiselect" | "datepicker" | "multiselect-preview"
 export type ForgeNavbarPosition = "fixed-top" | "fixed-bottom" | "sticky-top"
 
 export type ForgeMultiSelectOrientation = "row" | "column"