@3squared/forge-ui-3 2.21.0 → 2.21.2

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

@@ -1,12 +1,12 @@
 import $e from "primevue/message";
-import { defineComponent as z, createBlock as x, openBlock as d, normalizeProps as G, guardReactiveProps as Y, withCtx as f, renderSlot as F, createVNode as k, unref as c, createElementVNode as m, normalizeClass as P, createCommentVNode as T, ref as M, createElementBlock as b, Fragment as U, mergeProps as _, renderList as L, mergeModels as E, useModel as N, computed as j, withDirectives as K, createTextVNode as V, toDisplayString as $, vShow as X, createSlots as ie, onMounted as ne, withKeys as le, isRef as Fe, normalizeStyle as Se, withModifiers as Q, watch as W, h as Ce, useTemplateRef as Te } from "vue";
+import { defineComponent as z, createBlock as x, openBlock as d, normalizeProps as G, guardReactiveProps as Y, withCtx as f, renderSlot as F, createVNode as k, unref as c, createElementVNode as m, normalizeClass as P, createCommentVNode as T, ref as M, createElementBlock as b, Fragment as U, mergeProps as j, renderList as L, mergeModels as E, useModel as N, computed as _, withDirectives as K, createTextVNode as V, toDisplayString as $, vShow as X, createSlots as ie, onMounted as ne, withKeys as le, isRef as Fe, normalizeStyle as Se, withModifiers as Q, watch as W, h as Ce, useTemplateRef as Te } from "vue";
 import { Icon as I } from "@iconify/vue";
 import q from "primevue/button";
 import ze from "primevue/toast";
 import Pe from "primevue/autocomplete";
-import _e from "primevue/checkbox";
+import je from "primevue/checkbox";
 import { useField as se } from "vee-validate";
-import je from "primevue/progressspinner";
+import _e from "primevue/progressspinner";
 import Me from "primevue/dialog";
 import ae from "primevue/inputtext";
 import { vOnClickOutside as Ie } from "@vueuse/components";
@@ -1111,7 +1111,7 @@ const Qe = {
     pcFilterContainer: { root: "dropdown-item" },
     filterIcon: "d-none"
   }
-}, _t = {
+}, jt = {
   treeSelect: {
     root: ({ props: e }) => ({
       class: [
@@ -1159,7 +1159,7 @@ const Qe = {
       filterIcon: "d-none"
     }
   }
-}, jt = {
+}, _t = {
   fieldset: {
     root: () => ({
       class: [
@@ -1239,9 +1239,9 @@ const Qe = {
     pcTargetMoveDownButton: { root: "btn btn-sm btn-outline-primary focus-ring" },
     pcTargetMoveTopButton: { root: "btn btn-sm btn-outline-primary focus-ring" },
     pcTargetMoveUpButton: { root: "btn btn-sm btn-outline-primary focus-ring" },
-    sourceControls: "d-flex flex-column gap-1",
-    transferControls: "d-flex flex-column gap-1",
-    targetControls: "d-flex flex-column gap-1",
+    sourceControls: "d-flex flex-column justify-content-center gap-1",
+    transferControls: "d-flex flex-column justify-content-center gap-1",
+    targetControls: "d-flex flex-column justify-content-center gap-1",
     pcListbox: {
       root: "",
       list: "list-unstyled list-group list-group-flush",
@@ -1311,8 +1311,8 @@ const Qe = {
   ...vt,
   ...zt,
   ...rt,
-  ...jt,
   ..._t,
+  ...jt,
   ...Pt,
   ...Mt,
   ...It,
@@ -1387,7 +1387,7 @@ const Qe = {
     return (o, l) => {
       const n = q;
       return d(), b(U, null, [
-        k(n, _({ ...a, ...o.$attrs }, {
+        k(n, j({ ...a, ...o.$attrs }, {
           loading: t.value,
           disabled: t.value || a.disabled,
           onClick: i
@@ -1399,7 +1399,7 @@ const Qe = {
 }), so = /* @__PURE__ */ z({
   __name: "ForgeAutoComplete",
   setup(e) {
-    return (t, a) => (d(), x(c(Pe), _({ ...t.$attrs, ...t.$props }, { inputClass: "form-control border-0" }), {
+    return (t, a) => (d(), x(c(Pe), j({ ...t.$attrs, ...t.$props }, { inputClass: "form-control border-0" }), {
       default: f(() => [
         (d(!0), b(U, null, L(t.$slots, (i, o) => F(t.$slots, o, { slot: o })), 256))
       ]),
@@ -1450,16 +1450,16 @@ const Qe = {
       }
     ), n = (p, u) => {
       (t.disabled || t.readonly) && p.preventDefault(), t.name ? i(u) : a.value = u;
-    }, s = j(() => o.value.length > 0);
+    }, s = _(() => o.value.length > 0);
     return (p, u) => {
-      const h = _e;
+      const h = je;
       return d(), b("div", Ot, [
-        m("div", _({
+        m("div", j({
           class: "d-flex",
           "data-cy": "checkbox-container",
           onClick: u[2] || (u[2] = (r) => n(r, a.value))
         }, { ...p.$attrs }), [
-          k(h, _({ ...t }, {
+          k(h, j({ ...t }, {
             binary: "",
             modelValue: a.value,
             "onUpdate:modelValue": u[0] || (u[0] = (r) => a.value = r),
@@ -1493,7 +1493,7 @@ const Qe = {
     inLine: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const t = e, a = j(() => ({
+    const t = e, a = _(() => ({
       spin: () => ({
         class: [
           "spinner-border",
@@ -1504,7 +1504,7 @@ const Qe = {
       })
     }));
     return (i, o) => {
-      const l = je;
+      const l = _e;
       return d(), b("div", {
         class: P(i.inLine ? "" : "forge-loader")
       }, [
@@ -1534,7 +1534,7 @@ const Qe = {
     iconName: {}
   },
   setup(e) {
-    const t = j(() => ({
+    const t = _(() => ({
       [`link-${e.severity}`]: e.severity,
       [`link-underline-${e.underlineSeverity}`]: e.underlineSeverity,
       [`link-opacity-${e.opacity}`]: e.opacity,
@@ -1543,7 +1543,7 @@ const Qe = {
       [`link-underline-opacity-${e.underlineHoverOpacity ?? e.hoverOpacity}-hover`]: e.underlineHoverOpacity || e.hoverOpacity,
       [`link-offset-${e.underlineOffset}`]: e.underlineOffset,
       "icon-link icon-link-hover": e.animateIconOnHover
-    })), a = j(() => ({
+    })), a = _(() => ({
       "order-2": e.positionIconEnd,
       "me-1": !e.positionIconEnd && !e.animateIconOnHover,
       "ms-1": e.positionIconEnd && !e.animateIconOnHover,
@@ -1683,7 +1683,7 @@ const Lt = {
         }
         l.value = !1;
       }
-    }, w = j(() => ({
+    }, w = _(() => ({
       root: [
         "modal modal-dialog modal-content h-auto m-0",
         {
@@ -1704,7 +1704,7 @@ const Lt = {
     }));
     return (g, C) => {
       const S = q, A = Me;
-      return d(), x(A, _(o, {
+      return d(), x(A, j(o, {
         onMaximize: u,
         onUnmaximize: p,
         pt: w.value
@@ -1821,7 +1821,7 @@ const Lt = {
     ne(() => {
       r.value = a.value;
     });
-    const w = j(() => h.value.length > 0);
+    const w = _(() => h.value.length > 0);
     return (g, C) => {
       const S = ae, A = q;
       return d(), b("div", {
@@ -1918,7 +1918,7 @@ const Lt = {
     unstyled: { type: Boolean }
   },
   setup(e) {
-    const t = e, a = j(() => ({
+    const t = e, a = _(() => ({
       root: () => ({
         class: [
           "navbar container-fluid navbar-expand-lg",
@@ -1946,7 +1946,7 @@ const Lt = {
         ]
       })
     }));
-    return (i, o) => (d(), x(c(Ve), _({ ...t, ...i.$attrs }, {
+    return (i, o) => (d(), x(c(Ve), j({ ...t, ...i.$attrs }, {
       pt: a.value,
       "data-cy": "navbar"
     }), ie({
@@ -2017,7 +2017,7 @@ const Lt = {
           class: P(o.orientation === "row" ? "col-12 mb-1" : "col"),
           "data-cy": "multiselect-container"
         }, [
-          k(n, _({
+          k(n, j({
             modelValue: a.value,
             "onUpdate:modelValue": l[0] || (l[0] = (p) => a.value = p)
           }, { ...o.$attrs }, {
@@ -2172,7 +2172,7 @@ const Lt = {
       initialValue: a.value
     }), p = () => {
       s(null), a.value = null;
-    }, u = j(() => i.value.length > 0), h = j(() => ({
+    }, u = _(() => i.value.length > 0), h = _(() => ({
       day: ({ context: r, props: w, attrs: g }) => ({
         class: [
           "d-flex justify-content-center align-items-center",
@@ -2285,7 +2285,7 @@ const Lt = {
             F(r.$slots, "before")
           ]),
           m("div", ra, [
-            k(g, _({ ...t, ...r.$attrs }, {
+            k(g, j({ ...t, ...r.$attrs }, {
               pt: h.value,
               modelValue: a.value,
               "onUpdate:modelValue": [
@@ -2331,7 +2331,7 @@ const Lt = {
     currentCount: {}
   },
   setup(e) {
-    const t = e, a = j(() => t.maxCount - t.currentCount);
+    const t = e, a = _(() => t.maxCount - t.currentCount);
     return (i, o) => (d(), b("div", {
       class: P(a.value < 0 ? "text-danger" : "")
     }, "Remaining characters: " + $(a.value), 3));
@@ -2363,7 +2363,7 @@ const Lt = {
     }
     return (l, n) => {
       const s = q;
-      return d(), b("form", _(l.$attrs, {
+      return d(), b("form", j(l.$attrs, {
         novalidate: "",
         class: "position-relative shadow-sm border p-4 bg-white",
         onSubmit: Q(o, ["prevent"])
@@ -2456,12 +2456,12 @@ const Lt = {
       a.type == "number" ? s(h.value) : s(h);
     }, { errors: o, value: l, errorMessage: n, handleChange: s, handleBlur: p } = se(() => a.name, void 0, {
       initialValue: t.value
-    }), u = j(() => o.value.length > 0);
+    }), u = _(() => o.value.length > 0);
     return W(() => l.value, (h) => {
       t.value = h;
     }, { immediate: !0 }), (h, r) => {
       const w = Ae, g = Oe, C = ae, S = oe, A = de, v = xe;
-      return a.type === "checkbox" ? (d(), x(ye, _({
+      return a.type === "checkbox" ? (d(), x(ye, j({
         key: 0,
         id: a.name,
         label: a.fieldLabel
@@ -2482,7 +2482,7 @@ const Lt = {
             h.required ? (d(), b("span", ma, "*")) : T("", !0)
           ], 10, ua),
           F(h.$slots, "default", G(Y({ modelValue: t.value, updateModel: c(s), hasErrors: u.value })), () => [
-            a.type === "number" ? (d(), x(c(fe), _({
+            a.type === "number" ? (d(), x(c(fe), j({
               key: 0,
               id: a.name
             }, h.$attrs, {
@@ -2492,7 +2492,7 @@ const Lt = {
               onInput: i,
               modelValue: t.value,
               "onUpdate:modelValue": r[1] || (r[1] = (B) => t.value = B)
-            }), null, 16, ["id", "placeholder", "input-class", "class", "modelValue"])) : a.type === "textarea" ? (d(), x(w, _({
+            }), null, 16, ["id", "placeholder", "input-class", "class", "modelValue"])) : a.type === "textarea" ? (d(), x(w, j({
               key: 1,
               id: a.name
             }, h.$attrs, {
@@ -2502,7 +2502,7 @@ const Lt = {
               "onUpdate:modelValue": r[2] || (r[2] = (B) => t.value = B),
               onInput: i,
               onBlur: c(p)
-            }), null, 16, ["id", "placeholder", "class", "modelValue", "onBlur"])) : a.type === "mask" ? (d(), x(g, _({
+            }), null, 16, ["id", "placeholder", "class", "modelValue", "onBlur"])) : a.type === "mask" ? (d(), x(g, j({
               key: 2,
               id: a.name
             }, h.$attrs, {
@@ -2513,7 +2513,7 @@ const Lt = {
               "onUpdate:modelValue": r[3] || (r[3] = (B) => t.value = B),
               onComplete: i,
               onBlur: c(p)
-            }), null, 16, ["id", "placeholder", "mask", "class", "modelValue", "onBlur"])) : a.type === "text" ? (d(), x(C, _({
+            }), null, 16, ["id", "placeholder", "mask", "class", "modelValue", "onBlur"])) : a.type === "text" ? (d(), x(C, j({
               key: 3,
               id: a.name
             }, h.$attrs, {
@@ -2523,19 +2523,19 @@ const Lt = {
               "onUpdate:modelValue": r[4] || (r[4] = (B) => t.value = B),
               onInput: i,
               onBlur: c(p)
-            }), null, 16, ["id", "placeholder", "class", "modelValue", "onBlur"])) : a.type === "select" ? (d(), x(S, _({ key: 4 }, { ...a, ...h.$attrs }, {
+            }), null, 16, ["id", "placeholder", "class", "modelValue", "onBlur"])) : a.type === "select" ? (d(), x(S, j({ key: 4 }, { ...a, ...h.$attrs }, {
               modelValue: t.value,
               "onUpdate:modelValue": r[5] || (r[5] = (B) => t.value = B),
               class: { "is-invalid": u.value }
-            }), null, 16, ["modelValue", "class"])) : a.type === "multiselect" ? (d(), x(A, _({ key: 5 }, { ...a, ...h.$attrs }, {
+            }), null, 16, ["modelValue", "class"])) : a.type === "multiselect" ? (d(), x(A, j({ key: 5 }, { ...a, ...h.$attrs }, {
               modelValue: t.value,
               "onUpdate:modelValue": r[6] || (r[6] = (B) => t.value = B),
               class: { "is-invalid": u.value }
-            }), null, 16, ["modelValue", "class"])) : a.type === "multiselect-preview" ? (d(), x(aa, _({ key: 6 }, { ...a, ...h.$attrs }, {
+            }), null, 16, ["modelValue", "class"])) : a.type === "multiselect-preview" ? (d(), x(aa, j({ key: 6 }, { ...a, ...h.$attrs }, {
               modelValue: t.value,
               "onUpdate:modelValue": r[7] || (r[7] = (B) => t.value = B),
               class: { "is-invalid": u.value }
-            }), null, 16, ["modelValue", "class"])) : a.type === "datepicker" ? (d(), x(v, _({ key: 7 }, { ...a, ...h.$attrs }, {
+            }), null, 16, ["modelValue", "class"])) : a.type === "datepicker" ? (d(), x(v, j({ key: 7 }, { ...a, ...h.$attrs }, {
               modelValue: t.value,
               "onUpdate:modelValue": r[8] || (r[8] = (B) => t.value = B),
               class: { "is-invalid": u.value }
@@ -2567,7 +2567,7 @@ const Lt = {
     unstyled: { type: Boolean }
   },
   setup(e) {
-    const t = e, a = j(() => ({
+    const t = e, a = _(() => ({
       root: [
         "badge d-inline-flex align-items-center border me-1 p-1",
         {
@@ -2587,7 +2587,7 @@ const Lt = {
     }));
     return (i, o) => {
       const l = Ne;
-      return d(), x(l, _({ ...i.$attrs, ...i.$props }, { pt: a.value }), {
+      return d(), x(l, j({ ...i.$attrs, ...i.$props }, { pt: a.value }), {
         default: f(() => [
           (d(!0), b(U, null, L(i.$slots, (n, s) => F(i.$slots, s, { slot: s })), 256))
         ]),
@@ -2611,7 +2611,7 @@ const Lt = {
     unstyled: { type: Boolean }
   },
   setup(e) {
-    const t = e, a = j(() => t.striped ? "progress-bar-striped" : null), i = j(() => t.animate ? "progress-bar-animated" : null), o = j(() => {
+    const t = e, a = _(() => t.striped ? "progress-bar-striped" : null), i = _(() => t.animate ? "progress-bar-animated" : null), o = _(() => {
       switch (t.severity) {
         case "brand":
           return "bg-brand";
@@ -2632,7 +2632,7 @@ const Lt = {
         default:
           return "bg-primary";
       }
-    }), l = j(() => ({
+    }), l = _(() => ({
       root: {
         style: t.pixelWidth ? `width: ${t.pixelWidth}px` : ""
       },
@@ -2642,7 +2642,7 @@ const Lt = {
     }));
     return (n, s) => {
       const p = Ue;
-      return d(), x(p, _({ ...n.$attrs, ...t }, { pt: l.value }), {
+      return d(), x(p, j({ ...n.$attrs, ...t }, { pt: l.value }), {
         default: f(() => [
           F(n.$slots, "default")
         ]),
@@ -3066,7 +3066,7 @@ const fa = { class: "d-flex flex-column" }, ga = { class: "d-flex flex-row mt-1
     return (h, r) => {
       const w = q;
       return d(), b("div", fa, [
-        k(c(va), _({
+        k(c(va), j({
           ref_key: "drawingCanvas",
           ref: o,
           image: l.value,
@@ -3140,7 +3140,7 @@ const fa = { class: "d-flex flex-column" }, ga = { class: "d-flex flex-row mt-1
   },
   setup(e) {
     const t = e;
-    return (a, i) => (d(), b("div", _(a.$attrs, {
+    return (a, i) => (d(), b("div", j(a.$attrs, {
       class: `d-flex shadow m-2 align-items-center widget--${t.size} bg-${t.severity}`
     }), [
       m("span", ba, [
@@ -3166,7 +3166,7 @@ const fa = { class: "d-flex flex-column" }, ga = { class: "d-flex flex-row mt-1
     unstyled: { type: Boolean }
   },
   setup(e) {
-    const t = e, a = j(() => ({
+    const t = e, a = _(() => ({
       header: {
         class: [
           "p-0 m-0 d-flex align-items-center border border-0 bg-transparent gap-1",
@@ -3199,7 +3199,7 @@ const fa = { class: "d-flex flex-column" }, ga = { class: "d-flex flex-row mt-1
       default: f(() => [
         k(c(qe), null, {
           default: f(() => [
-            (d(!0), b(U, null, L(i.steps, (l) => (d(), x(c(Le), _({
+            (d(!0), b(U, null, L(i.steps, (l) => (d(), x(c(Le), j({
               key: l.value,
               value: l.value,
               disabled: l.disabled
@@ -3239,7 +3239,7 @@ const fa = { class: "d-flex flex-column" }, ga = { class: "d-flex flex-row mt-1
     selected: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const t = e, a = j(() => `${t.severity === void 0 ? "tile-primary" : `tile-${t.severity}`} ${t.barPosition === "none" ? "" : `tile-bar-${t.barPosition}`} ${t.selected ? "selected" : ""}`), i = j(() => `${t.severity === void 0 ? "tile-primary border-primary" : `tile-${t.severity} border-${t.severity}`} ${t.barPosition === "none" ? "" : `tile-bar-${t.barPosition}`} ${t.selected ? "selected" : ""}`);
+    const t = e, a = _(() => `${t.severity === void 0 ? "tile-primary" : `tile-${t.severity}`} ${t.barPosition === "none" ? "" : `tile-bar-${t.barPosition}`} ${t.selected ? "selected" : ""}`), i = _(() => `${t.severity === void 0 ? "tile-primary border-primary" : `tile-${t.severity} border-${t.severity}`} ${t.barPosition === "none" ? "" : `tile-bar-${t.barPosition}`} ${t.selected ? "selected" : ""}`);
     return (o, l) => {
       const n = q;
       return t.clickable ? (d(), x(n, {
@@ -3291,7 +3291,7 @@ const wa = {
   setup(e, { emit: t }) {
     const a = t, i = e, o = (n) => {
       a("update:perPage", n.value);
-    }, l = j(() => {
+    }, l = _(() => {
       const n = Math.ceil(i.total / i.perPage);
       return `${n} ${ee(n, "page")}`;
     });
@@ -3315,7 +3315,7 @@ const wa = {
 }), Fa = { class: "position-relative" }, Sa = { "data-cy": "above-table-slot" }, Ca = { class: "d-flex w-100" }, Ta = {
   class: "mx-auto",
   "data-cy": "empty-message"
-}, za = { class: "d-flex" }, Pa = { class: "d-flex align-items-end mb-2" }, _a = { key: 0 }, ja = { class: "ms-auto" }, $o = /* @__PURE__ */ z({
+}, za = { class: "d-flex" }, Pa = { class: "d-flex align-items-end mb-2" }, ja = { key: 0 }, _a = { class: "ms-auto" }, $o = /* @__PURE__ */ z({
   __name: "ForgeTable",
   props: {
     value: {},
@@ -3413,10 +3413,10 @@ const wa = {
     W(() => i.perPage, (v) => {
       v && (n.value = v, s.value.perPage = v);
     });
-    const p = j(() => i.totalRecords ?? i.value.length), u = j(() => {
+    const p = _(() => i.totalRecords ?? i.value.length), u = _(() => {
       const v = Math.ceil(p.value / n.value);
       return `${v} ${ee(v, "page")}`;
-    }), h = j(() => ({
+    }), h = _(() => ({
       thead: () => ({
         class: [
           {
@@ -3464,7 +3464,7 @@ const wa = {
       m("span", Sa, [
         F(v.$slots, "above-table")
       ]),
-      k(c(We), _({
+      k(c(We), j({
         class: ["w-100", `${i.severity ? `forge-table-${i.severity}` : ""}`]
       }, { ...i, ...v.$attrs }, {
         pt: h.value,
@@ -3490,7 +3490,7 @@ const wa = {
           }, [
             m("div", za, [
               m("div", Pa, [
-                v.paginator && !v.legacyPaginationFooter ? (d(), b("span", _a, [
+                v.paginator && !v.legacyPaginationFooter ? (d(), b("span", ja, [
                   k(he, {
                     total: p.value,
                     "page-sizes": l.value,
@@ -3502,7 +3502,7 @@ const wa = {
                   }, null, 8, ["total", "page-sizes", "per-page"])
                 ])) : T("", !0)
               ]),
-              m("div", ja, [
+              m("div", _a, [
                 v.showClearButton ? (d(), x(c(q), {
                   key: 0,
                   outlined: "",
@@ -3657,10 +3657,10 @@ const wa = {
       sortDirection: "None",
       sortField: "",
       total: a.totalRecords ?? a.value.length
-    }), u = j(() => a.totalRecords ?? a.value.length), h = j(() => {
+    }), u = _(() => a.totalRecords ?? a.value.length), h = _(() => {
       const y = Math.ceil(u.value / l.value);
       return `${y} ${ee(y, "page")}`;
-    }), r = j(() => ({
+    }), r = _(() => ({
       root: "position-relative",
       table: (y) => ({
         class: [
@@ -3761,7 +3761,7 @@ const wa = {
       m("span", Ia, [
         F(y.$slots, "above-table")
       ]),
-      k(c(Ge), _({
+      k(c(Ge), j({
         class: ["w-100", `${a.severity ? `forge-table-${a.severity}` : ""}`]
       }, { ...a, ...y.$attrs }, {
         pt: r.value,
@@ -3896,19 +3896,19 @@ const wa = {
     return (o, l) => {
       const n = fe, s = q;
       return d(), b("div", La, [
-        o.dataType === "numeric" ? (d(), x(n, _({
+        o.dataType === "numeric" ? (d(), x(n, j({
           key: 0,
           modelValue: t.value,
           "onUpdate:modelValue": l[0] || (l[0] = (p) => t.value = p),
           modelModifiers: { trim: !0 }
-        }, o.$attrs), null, 16, ["modelValue"])) : o.dataType === "date" ? (d(), x(xe, _({
+        }, o.$attrs), null, 16, ["modelValue"])) : o.dataType === "date" ? (d(), x(xe, j({
           key: 1,
           modelValue: t.value,
           "onUpdate:modelValue": l[1] || (l[1] = (p) => t.value = p)
         }, o.$attrs, {
           "show-icon": !1,
           "show-on-focus": !0
-        }), null, 16, ["modelValue"])) : o.dataType === "select" ? (d(), x(c(oe), _({
+        }), null, 16, ["modelValue"])) : o.dataType === "select" ? (d(), x(c(oe), j({
           key: 2,
           modelValue: t.value,
           "onUpdate:modelValue": l[2] || (l[2] = (p) => t.value = p)
@@ -3941,7 +3941,7 @@ const wa = {
             ])
           ]),
           _: 1
-        }, 16, ["modelValue", "options", "option-value", "option-label"])) : o.dataType === "multiselect" ? (d(), x(c(de), _({
+        }, 16, ["modelValue", "options", "option-value", "option-label"])) : o.dataType === "multiselect" ? (d(), x(c(de), j({
           key: 3,
           modelValue: t.value,
           "onUpdate:modelValue": l[3] || (l[3] = (p) => t.value = p)
@@ -3951,7 +3951,7 @@ const wa = {
           "option-label": o.optionLabel,
           "option-value": o.optionValue,
           filter: ""
-        }), null, 16, ["modelValue", "options", "option-label", "option-value"])) : (d(), x(c(ae), _({
+        }), null, 16, ["modelValue", "options", "option-label", "option-value"])) : (d(), x(c(ae), j({
           key: 4,
           modelValue: t.value,
           "onUpdate:modelValue": l[4] || (l[4] = (p) => t.value = p),
@@ -5176,7 +5176,7 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = N(e, "modelValue"), a = M(), i = (n) => a.value.toggle(n), o = j(() => e.maxFileInput <= t.value.length), l = (n) => {
+    const t = N(e, "modelValue"), a = M(), i = (n) => a.value.toggle(n), o = _(() => e.maxFileInput <= t.value.length), l = (n) => {
       t.value = ke(n, t.value, e.acceptedFileTypes.map((s) => s.fileType), e.maxFileInput);
     };
     return (n, s) => {
@@ -5253,7 +5253,7 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = N(e, "modelValue"), a = M(!1), i = j(() => e.maxFileInput <= t.value.length), o = (l) => {
+    const t = N(e, "modelValue"), a = M(!1), i = _(() => e.maxFileInput <= t.value.length), o = (l) => {
       a.value = !1, l.dataTransfer.files.length > e.maxFileInput || i.value ? l.preventDefault() : t.value = ke([...l.dataTransfer.files], t.value, e.acceptedFileTypes.map((n) => n.fileType), e.maxFileSize);
     };
     return (l, n) => (d(), b("div", {
@@ -5285,7 +5285,7 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
     uploadStatus: {}
   },
   setup(e) {
-    const t = e, a = j(() => t.uploadStatus === "Failed" || t.uploadStatus === "InvalidFileType" || t.uploadStatus === "InvalidFileSize" ? "danger" : "warning"), i = j(() => {
+    const t = e, a = _(() => t.uploadStatus === "Failed" || t.uploadStatus === "InvalidFileType" || t.uploadStatus === "InvalidFileSize" ? "danger" : "warning"), i = _(() => {
       switch (t.uploadStatus) {
         case "InvalidFileType":
           return "Upload Failed: File type is not accepted.";
@@ -5350,7 +5350,7 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
   }),
   emits: /* @__PURE__ */ E(["deleted"], ["update:file", "update:blobFileName", "update:uploadStatus"]),
   setup(e, { emit: t }) {
-    const a = N(e, "file"), i = N(e, "blobFileName"), o = N(e, "uploadStatus"), l = t, n = M(a.value.name), s = M(""), p = M(0), u = M(), h = j(() => e.acceptedFileTypes.some(({ fileType: v }) => v === a.value.type)), r = j(() => a.value.size <= e.maxFileSize), w = j(() => a.value.type ? a.value.type : Ga().getType(a.value.name)), g = () => {
+    const a = N(e, "file"), i = N(e, "blobFileName"), o = N(e, "uploadStatus"), l = t, n = M(a.value.name), s = M(""), p = M(0), u = M(), h = _(() => e.acceptedFileTypes.some(({ fileType: v }) => v === a.value.type)), r = _(() => a.value.size <= e.maxFileSize), w = _(() => a.value.type ? a.value.type : Ga().getType(a.value.name)), g = () => {
       n.value != null && (C(), a.value = new File([a.value], n.value, { type: a.value.type, lastModified: (/* @__PURE__ */ new Date()).valueOf() }));
     }, C = () => {
       let v = n.value.split("."), B = qa.getExtension(w.value), D = n.value.split(".").pop();
@@ -5520,7 +5520,7 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
         ]),
         _: 1
       })) : T("", !0),
-      k(Za, _(a, {
+      k(Za, j(a, {
         modelValue: t.value,
         "onUpdate:modelValue": l[0] || (l[0] = (n) => t.value = n)
       }), null, 16, ["modelValue"]),
@@ -5534,7 +5534,7 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
         }, {
           default: f(() => [
             (d(!0), b(U, null, L(t.value, ({ file: n }, s) => (d(), b("div", null, [
-              (d(), x(di, _({
+              (d(), x(di, j({
                 key: n.name,
                 class: s === t.value.length - 1 || t.value.length == 1 ? "" : "border-bottom",
                 file: t.value[s].file,
@@ -5653,7 +5653,7 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
     severity: { default: "primary" }
   },
   setup(e) {
-    const t = e, a = j(() => ({
+    const t = e, a = _(() => ({
       root: (i) => ({
         class: [
           "btn",
@@ -5674,7 +5674,7 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
         ]
       })
     }));
-    return (i, o) => (d(), x(c(Ke), _({ ...i.$attrs, ...t }, {
+    return (i, o) => (d(), x(c(Ke), j({ ...i.$attrs, ...t }, {
       severity: t.severity,
       pt: a.value
     }), null, 16, ["severity", "pt"]));
@@ -5726,10 +5726,10 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
       }, null, 8, ["onLabel", "offLabel", "severity", "onChange", "defaultValue", "disabled", "data-cy", "invalid"]))), 128))
     ]));
   }
-}), _o = /* @__PURE__ */ z({
+}), jo = /* @__PURE__ */ z({
   __name: "ForgeConfirmPopup",
   setup(e) {
-    const t = j(() => ({
+    const t = _(() => ({
       root: [
         "card w-fit-content position-absolute"
       ],
@@ -5740,7 +5740,7 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
       pcRejectButton: { root: "btn btn-outline-primary btn-sm" },
       pcAcceptButton: { root: "btn btn-primary btn-sm" }
     }));
-    return (a, i) => (d(), x(c(Ze), _({ pt: t.value }, { ...a.$attrs, ...a.$props }), {
+    return (a, i) => (d(), x(c(Ze), j({ pt: t.value }, { ...a.$attrs, ...a.$props }), {
       default: f(() => [
         (d(!0), b(U, null, L(a.$slots, (o, l) => F(a.$slots, l, { slot: l })), 256))
       ]),
@@ -5753,7 +5753,7 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
 }, Bi = {
   key: 0,
   class: "mb-1"
-}, jo = /* @__PURE__ */ z({
+}, _o = /* @__PURE__ */ z({
   __name: "ForgePickList",
   props: /* @__PURE__ */ E({
     filterBy: {},
@@ -5823,14 +5823,15 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
         g && (i.value = g[1] ?? [], o.value = g[0] ?? [], a.value = [o.value, i.value]);
       },
       { once: !0 }
-    ), (g, C) => (d(), x(c(Xe), _({
+    ), (g, C) => (d(), x(c(Xe), j({
       modelValue: a.value,
       "onUpdate:modelValue": C[2] || (C[2] = (S) => a.value = S)
     }, { ...g.$attrs, ...t }, {
       onMoveAllToSource: u,
       onMoveAllToTarget: h,
       onMoveToTarget: C[3] || (C[3] = (S) => s(S)),
-      onMoveToSource: C[4] || (C[4] = (S) => p(S))
+      onMoveToSource: C[4] || (C[4] = (S) => p(S)),
+      style: { height: "14rem" }
     }), {
       sourceheader: f(() => [
         g.sourceTitle ? (d(), b("div", ki, $(g.sourceTitle), 1)) : T("", !0),
@@ -5882,7 +5883,7 @@ export {
   ye as ForgeCheckbox,
   yo as ForgeChip,
   To as ForgeColumnCustomiser,
-  _o as ForgeConfirmPopup,
+  jo as ForgeConfirmPopup,
   xe as ForgeDatepicker,
   Co as ForgeFileUploader,
   So as ForgeFilterHeader,
@@ -5896,7 +5897,7 @@ export {
   mo as ForgeNavbar,
   vo as ForgePageHeader,
   zo as ForgePanel,
-  jo as ForgePickList,
+  _o as ForgePickList,
   xo as ForgeProgressBar,
   fo as ForgeRemainingCharacters,
   Mo as ForgeResolver,

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": "2.21.0",
+  "version": "2.21.2",
   "type": "module",
   "license": "MIT",
   "contributors": [
@@ -50,8 +50,8 @@
     "@cypress/code-coverage": "3.14.4",
     "@primevue/auto-import-resolver": "4.3.5",
     "@vitejs/plugin-vue": "5.2.4",
-    "@vitest/coverage-v8": "3.2.1",
-    "@vitest/ui": "3.2.1",
+    "@vitest/coverage-v8": "3.2.2",
+    "@vitest/ui": "3.2.2",
     "cypress": "14.4.1",
     "cypress-real-events": "1.14.0",
     "rollup-plugin-visualizer": "6.0.1",
@@ -62,7 +62,7 @@
     "vite-bundle-visualizer": "1.2.1",
     "vite-plugin-dts": "4.5.4",
     "vite-plugin-istanbul": "7.0.0",
-    "vitest": "3.2.1",
+    "vitest": "3.2.2",
     "vue-drawing-canvas": "1.0.14"
   },
   "optionalDependencies": {

package/src/styles/main.scss

@@ -5,6 +5,3 @@
 
 @import "bootstrap/scss/bootstrap";
 
-.flex-1 {
-  flex: 1
-}