@wwtdev/bsds-components-vue3 2.3.6 → 2.4.0

package/lib/bsds-components.js

@@ -1,6 +1,6 @@
-import { computed as p, ref as y, onMounted as Y, onUnmounted as re, shallowRef as dt, watch as R, defineAsyncComponent as Re, openBlock as d, createElementBlock as h, unref as f, createElementVNode as B, renderSlot as L, createBlock as O, resolveDynamicComponent as J, createCommentVNode as k, toDisplayString as T, createVNode as V, normalizeClass as ae, Fragment as W, useAttrs as se, mergeProps as N, withCtx as D, toHandlers as Me, onBeforeUnmount as tt, onBeforeMount as at, nextTick as ce, createTextVNode as H, renderList as Z, Teleport as ut, withDirectives as Be, Transition as Ke, vShow as $e, provide as oe, inject as ie, createSlots as ct, isRef as ft, useSlots as pt } from "vue";
-import { v4 as nt } from "uuid";
-import { BsIconCaretDown as lt, BsIconWarning as ze, BsIconClose as Se, BsIconCalendar as ot, BsIconCaretSort as vt, BsIconSearch as ht, BsIconCaretLeftDouble as bt, BsIconCaretLeft as mt, BsIconCaretRight as gt, BsIconCaretRightDouble as yt, BsIconActionEllipsis as Bt, BsIconCircleExclamation as $t, BsIconThumbsUpStroke as St } from "@wwtdev/bsds-icons-vue3";
+import { computed as p, ref as y, onMounted as Y, onUnmounted as re, shallowRef as ut, watch as R, defineAsyncComponent as Re, openBlock as d, createElementBlock as h, unref as f, createElementVNode as B, renderSlot as L, createBlock as O, resolveDynamicComponent as J, createCommentVNode as k, toDisplayString as T, createVNode as V, normalizeClass as ae, Fragment as W, useAttrs as se, mergeProps as N, withCtx as D, toHandlers as Me, onBeforeUnmount as tt, onBeforeMount as at, nextTick as ce, createTextVNode as H, createSlots as nt, renderList as Z, Teleport as ct, withDirectives as Be, Transition as Ke, vShow as $e, provide as oe, inject as ie, isRef as ft, useSlots as pt } from "vue";
+import { v4 as lt } from "uuid";
+import { BsIconCaretDown as ot, BsIconWarning as ze, BsIconClose as Se, BsIconCalendar as it, BsIconCaretSort as vt, BsIconSearch as ht, BsIconCaretLeftDouble as bt, BsIconCaretLeft as mt, BsIconCaretRight as gt, BsIconCaretRightDouble as yt, BsIconActionEllipsis as Bt, BsIconCircleExclamation as $t, BsIconThumbsUpStroke as St } from "@wwtdev/bsds-icons-vue3";
 import { DatePicker as wt } from "v-calendar";
 import { Chart as qe, BarController as kt, BarElement as It, CategoryScale as Ct, LinearScale as Tt, Legend as xt, Tooltip as At } from "chart.js";
 import { getSupportedCallingCodes as Lt, getRegionCodeForCountryCode as Vt, parsePhoneNumber as Ye } from "awesome-phonenumber";
@@ -73,7 +73,7 @@ const me = (e, a) => {
       return u;
     });
   }
-  const n = dt();
+  const n = ut();
   return n.value = t(e[a]), R(() => e[a], async (l) => n.value = t(l)), { icon: n };
 };
 function X(e = 1) {
@@ -81,7 +81,7 @@ function X(e = 1) {
   for (let t = 0; t < e; t++)
     a.push(y(""));
   return Y(() => {
-    a.forEach((t) => t.value = `id-${nt()}`);
+    a.forEach((t) => t.value = `id-${lt()}`);
   }), a;
 }
 const Ie = (e, a, t = void 0) => {
@@ -136,7 +136,7 @@ const Ie = (e, a, t = void 0) => {
     function w() {
       n("toggled", o.value), t.controlled || (i.value = !i.value);
     }
-    return (m, x) => (d(), h("div", {
+    return (b, x) => (d(), h("div", {
       id: f(o),
       ref_key: "containerRef",
       ref: l,
@@ -154,13 +154,13 @@ const Ie = (e, a, t = void 0) => {
           type: "button",
           onClick: w
         }, [
-          e.icon || m.$slots.icon ? (d(), h("span", Nt, [
-            L(m.$slots, "icon", {}, () => [
+          e.icon || b.$slots.icon ? (d(), h("span", Nt, [
+            L(b.$slots, "icon", {}, () => [
               e.icon ? (d(), O(J(f(u) ? f(u) : "span"), { key: 0 })) : k("", !0)
             ])
           ])) : k("", !0),
           B("span", { id: r.value }, T(e.headerText), 9, Rt),
-          V(f(lt), {
+          V(f(ot), {
             size: "md",
             "data-position": "end"
           })
@@ -175,7 +175,7 @@ const Ie = (e, a, t = void 0) => {
         role: "region"
       }, [
         B("div", null, [
-          L(m.$slots, "default")
+          L(b.$slots, "default")
         ])
       ], 8, jt)
     ], 8, Pt));
@@ -434,7 +434,7 @@ const Ie = (e, a, t = void 0) => {
       error: e.error
     }, {
       default: D(() => [
-        V(f(ot)),
+        V(f(it)),
         V(ve, N({
           "data-autowidth": "",
           disabled: e.disabled,
@@ -512,7 +512,7 @@ const aa = ["disabled", "id", "model-value"], na = ["disabled", "id", "model-val
       error: e.error
     }, {
       default: D(() => [
-        V(f(ot)),
+        V(f(it)),
         V(ve, {
           "data-autowidth": "",
           disabled: e.disabled,
@@ -659,6 +659,10 @@ const ua = ["data-range"], _e = "(min-width: 752px)", Dl = /* @__PURE__ */ Objec
     inputId: {
       type: String
     },
+    inputMode: {
+      type: Boolean,
+      default: !0
+    },
     isRange: {
       type: Boolean,
       default: !1
@@ -705,46 +709,46 @@ const ua = ["data-range"], _e = "(min-width: 752px)", Dl = /* @__PURE__ */ Objec
       "masks",
       "rows",
       "trim-weeks"
-    ]), v = p(() => t.inputId || u.value), w = p(() => ({ range: t.isRange })), m = p(() => !!(t.error && t.errorMsg || t.hint)), x = p(() => t.step), S = p(() => t.variant);
+    ]), v = p(() => t.inputId || u.value), w = p(() => ({ range: t.isRange })), b = p(() => !!(t.error && t.errorMsg || t.hint)), x = p(() => t.step), S = p(() => t.variant);
     ra(n), Je(
       _e,
-      (b) => l.value = b != null && b.matches && S.value == "2-col" ? 2 : 1,
+      (m) => l.value = m != null && m.matches && S.value == "2-col" ? 2 : 1,
       [S]
     ), Je(
       _e,
-      (b) => s.value = b != null && b.matches && S.value == "2-col" ? x.value : 1,
+      (m) => s.value = m != null && m.matches && S.value == "2-col" ? x.value : 1,
       [x, S]
     ), R(() => {
-      var b, z;
-      return (z = (b = n.value) == null ? void 0 : b.popoverRef) == null ? void 0 : z.isVisible;
-    }, (b) => {
-      b && ce(g);
+      var m, z;
+      return (z = (m = n.value) == null ? void 0 : m.popoverRef) == null ? void 0 : z.isVisible;
+    }, (m) => {
+      m && ce(g);
     });
-    function C(b) {
-      return t.isRange && b.start && b.end ? `${b.start} to ${b.end}` : !t.isRange && b ? b : "";
+    function C(m) {
+      return t.isRange && m.start && m.end ? `${m.start} to ${m.end}` : !t.isRange && m ? m : "";
     }
-    function P(b) {
-      !t.isRange || i.value.contains(b.relatedTarget) || n.value.hidePopover();
+    function P(m) {
+      !t.isRange || i.value.contains(m.relatedTarget) || n.value.hidePopover();
     }
     function g() {
-      const b = i.value.querySelector("button.vc-prev"), z = i.value.querySelector("button.vc-next");
-      b && b.setAttribute("aria-label", "Previous month"), z && z.setAttribute("aria-label", "Next month");
+      const m = i.value.querySelector("button.vc-prev"), z = i.value.querySelector("button.vc-next");
+      m && m.setAttribute("aria-label", "Previous month"), z && z.setAttribute("aria-label", "Next month");
     }
-    return (b, z) => (d(), h("div", N({
+    return (m, z) => (d(), h("div", N({
       ref_key: "container",
       ref: i,
       class: "bs-calendar",
       "data-range": e.isRange,
       onFocusout: P
     }, f(c)), [
-      e.label || b.$slots.label ? (d(), O(ne, {
+      e.label || m.$slots.label ? (d(), O(ne, {
         key: 0,
         for: v.value,
         disabled: e.disabled,
         required: e.required
       }, {
         default: D(() => [
-          L(b.$slots, "label", {}, () => [
+          L(m.$slots, "label", {}, () => [
             H(T(e.label), 1)
           ])
         ]),
@@ -763,37 +767,38 @@ const ua = ["data-range"], _e = "(min-width: 752px)", Dl = /* @__PURE__ */ Objec
         popover: { visibility: "focus" },
         rows: 1,
         step: s.value,
-        "onUpdate:modelValue": z[0] || (z[0] = (I) => b.$emit("update:modelValue", I))
-      }, f(r)), {
-        default: D(({ inputValue: I, inputEvents: A, showPopover: q }) => [
-          e.isRange ? (d(), O(la, {
-            key: 1,
-            disabled: e.disabled,
-            error: e.error,
-            "hidden-end-ref": b.inputEnd,
-            "hidden-start-ref": b.inputStart,
-            "input-id": v.value,
-            "input-value": I,
-            "input-value-fmt": C(I),
-            listeners: A,
-            placeholder: e.placeholder,
-            required: e.required,
-            onUiFocusin: q,
-            onUiInput: q
-          }, null, 8, ["disabled", "error", "hidden-end-ref", "hidden-start-ref", "input-id", "input-value", "input-value-fmt", "listeners", "placeholder", "required", "onUiFocusin", "onUiInput"])) : (d(), O(ta, {
-            key: 0,
-            disabled: e.disabled,
-            error: e.error,
-            "input-id": v.value,
-            listeners: A,
-            "model-value": C(I),
-            placeholder: e.placeholder,
-            required: e.required
-          }, null, 8, ["disabled", "error", "input-id", "listeners", "model-value", "placeholder", "required"]))
-        ]),
-        _: 1
-      }, 16, ["columns", "disabled-dates", "max-date", "min-date", "model-value", "model-modifiers", "step"]),
-      m.value ? (d(), O(pe, {
+        "onUpdate:modelValue": z[0] || (z[0] = (I) => m.$emit("update:modelValue", I))
+      }, f(r)), nt({ _: 2 }, [
+        e.inputMode ? {
+          name: "default",
+          fn: D(({ inputValue: I, inputEvents: A, showPopover: q }) => [
+            e.isRange ? (d(), O(la, {
+              key: 1,
+              disabled: e.disabled,
+              error: e.error,
+              "input-id": v.value,
+              "input-value": I,
+              "input-value-fmt": C(I),
+              listeners: A,
+              placeholder: e.placeholder,
+              required: e.required,
+              onUiFocusin: q,
+              onUiInput: q
+            }, null, 8, ["disabled", "error", "input-id", "input-value", "input-value-fmt", "listeners", "placeholder", "required", "onUiFocusin", "onUiInput"])) : (d(), O(ta, {
+              key: 0,
+              disabled: e.disabled,
+              error: e.error,
+              "input-id": v.value,
+              listeners: A,
+              "model-value": C(I),
+              placeholder: e.placeholder,
+              required: e.required
+            }, null, 8, ["disabled", "error", "input-id", "listeners", "model-value", "placeholder", "required"]))
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1040, ["columns", "disabled-dates", "max-date", "min-date", "model-value", "model-modifiers", "step"]),
+      b.value ? (d(), O(pe, {
         key: 1,
         error: e.error,
         "error-msg": e.errorMsg,
@@ -1122,7 +1127,7 @@ const $a = {
     function w() {
       u.value && (u.value.indeterminate = r.value && !s.value);
     }
-    function m(C) {
+    function b(C) {
       n("update:modelValue", C);
     }
     function x(C) {
@@ -1131,7 +1136,7 @@ const $a = {
     }
     function S(C) {
       const { checked: P } = C.target;
-      c.value ? x(P) : m(P);
+      c.value ? x(P) : b(P);
     }
     return R(s, w), R(r, w), Y(w), (C, P) => (d(), h("div", N({
       class: "bs-boolean",
@@ -1215,7 +1220,7 @@ const $a = {
       if (a.hoverEffect)
         return a.iconPosition;
     }), c = p(() => a.textBtn && a.iconPosition !== "left"), v = p(() => a.textBtn && a.iconPosition === "left");
-    return (w, m) => (d(), O(J(f(n)), N({
+    return (w, b) => (d(), O(J(f(n)), N({
       class: "bs-circle-button",
       "data-disabled": e.disabled,
       "data-direction": r.value,
@@ -1259,7 +1264,7 @@ const $a = {
   setup(e, { expose: a }) {
     const t = y(null);
     return a({ internalContainerRef: t }), (n, l) => (d(), h(W, null, [
-      e.breakout && e.breakoutMounted ? (d(), O(ut, {
+      e.breakout && e.breakoutMounted ? (d(), O(ct, {
         key: 0,
         to: e.breakoutStub
       }, [
@@ -1322,9 +1327,9 @@ const $a = {
   setup(e, { emit: a }) {
     const t = e, n = a, l = [], i = t.preloaded && t.shown;
     function u(r, c) {
-      const { duration: v, enterClass: w, enterAttribute: m } = t;
+      const { duration: v, enterClass: w, enterAttribute: b } = t;
       l.push(setTimeout(() => {
-        w && r.classList.add(w), m && r.setAttribute(m, ""), l.push(setTimeout(() => {
+        w && r.classList.add(w), b && r.setAttribute(b, ""), l.push(setTimeout(() => {
           c();
         }, v)), n("enter", r);
       }));
@@ -1333,11 +1338,11 @@ const $a = {
       const {
         duration: v,
         enterClass: w,
-        enterAttribute: m,
+        enterAttribute: b,
         leaveClass: x,
         leaveAttribute: S
       } = t;
-      r.classList.remove(w), r.removeAttribute(m), x && r.classList.add(x), S && r.setAttribute(S, ""), l.push(setTimeout(() => {
+      r.classList.remove(w), r.removeAttribute(b), x && r.classList.add(x), S && r.setAttribute(S, ""), l.push(setTimeout(() => {
         c();
       }, v)), n("leave", r);
     }
@@ -1391,7 +1396,7 @@ const $a = {
   const n = y(null), l = y(null), i = y(!1);
   let u = !1;
   return Y(() => {
-    e && (n.value = a || nt(), document.getElementById(n.value) ? (l.value = document.getElementById(n.value), u = !0) : (l.value = document.createElement("div"), l.value.id = n.value, l.value.style.position = t, document.body.insertAdjacentElement("afterbegin", l.value)), i.value = !0);
+    e && (n.value = a || lt(), document.getElementById(n.value) ? (l.value = document.getElementById(n.value), u = !0) : (l.value = document.createElement("div"), l.value.id = n.value, l.value.style.position = t, document.body.insertAdjacentElement("afterbegin", l.value)), i.value = !0);
   }), re(() => {
     var o;
     e && !u && ((o = document.getElementById(n.value)) == null || o.remove());
@@ -1460,7 +1465,7 @@ const $a = {
     });
     const { breakoutStub: v, breakoutMounted: w } = La(t.breakout, t.containerId);
     oe("dropdownEnter", u), oe("dropdownAfterEnter", o), oe("dropdownShown", p(() => t.shown));
-    const m = (I, A) => {
+    const b = (I, A) => {
       i.value.style.setProperty(I, A);
     };
     function x() {
@@ -1470,10 +1475,10 @@ const $a = {
     function S(I, A) {
       if (t.position === "top") {
         const q = I.bottom - A.bottom;
-        m("--dropdown-wscreen-top", "auto"), m("--dropdown-wscreen-bottom", `${q + A.height + 8}px`);
+        b("--dropdown-wscreen-top", "auto"), b("--dropdown-wscreen-bottom", `${q + A.height + 8}px`);
       } else {
         const q = A.top - I.top;
-        m("--dropdown-wscreen-top", `${q + A.height + 8}px`), m("--dropdown-wscreen-bottom", "auto");
+        b("--dropdown-wscreen-top", `${q + A.height + 8}px`), b("--dropdown-wscreen-bottom", "auto");
       }
     }
     function C(I, A, q) {
@@ -1481,25 +1486,25 @@ const $a = {
         const F = A.left - I.left;
         if (t.position === "center") {
           const _ = (A.width - q.width) / 2;
-          m("--dropdown-wscreen-left", `${F + _}px`), m("--dropdown-wscreen-right", "auto");
+          b("--dropdown-wscreen-left", `${F + _}px`), b("--dropdown-wscreen-right", "auto");
         } else if (t.position === "right") {
           const _ = I.right - A.right;
-          m("--dropdown-wscreen-left", "auto"), m("--dropdown-wscreen-right", `${_}px`);
+          b("--dropdown-wscreen-left", "auto"), b("--dropdown-wscreen-right", `${_}px`);
         } else
-          m("--dropdown-wscreen-left", `${F}px`), m("--dropdown-wscreen-right", "auto");
+          b("--dropdown-wscreen-left", `${F}px`), b("--dropdown-wscreen-right", "auto");
       }
     }
     function P() {
       if (t.width === "anchor") {
         const I = s.value.getBoundingClientRect();
-        m("--dropdown-wscreen-width", `${I.width}px`);
+        b("--dropdown-wscreen-width", `${I.width}px`);
       } else
-        m("--dropdown-wscreen-width", "");
+        b("--dropdown-wscreen-width", "");
     }
     function g() {
       u.value = !0, x(), P(), n("enter");
     }
-    function b() {
+    function m() {
       o.value = !0, n("after-enter");
     }
     function z() {
@@ -1521,7 +1526,7 @@ const $a = {
             preloaded: e.preloaded,
             duration: 75,
             "enter-attribute": "data-shown",
-            onAfterEnter: b,
+            onAfterEnter: m,
             onEnter: g,
             onAfterLeave: z
           }, {
@@ -1556,7 +1561,7 @@ const $a = {
       }, 8, ["breakout", "breakoutMounted", "breakoutStub", "containerId"])
     ], 64));
   }
-}), it = {
+}), rt = {
   __name: "BsDropdown",
   props: {
     anchorId: {
@@ -1706,7 +1711,7 @@ const $a = {
   emits: ["optselected", "update:modelValue", "close"],
   setup(e, { expose: a, emit: t }) {
     const n = e, l = t, i = y(null), u = y(null), o = y(-1), s = y(null), r = y(!1), c = ie("dropdownEnter", !1), v = ie("dropdownAfterEnter", !1), w = ie("dropdownShown", !1);
-    let m = -1;
+    let b = -1;
     oe("handleSelect", z), oe("optionsId", p(() => n.optionsId)), Y(() => {
       S(), C(), document.addEventListener("keydown", g);
     }), re(() => {
@@ -1721,7 +1726,7 @@ const $a = {
       }
     ), R(v, (I) => {
       var A, q;
-      I && m > -1 && (n.focusOnShow ? (A = s.value[m]) == null || A.focus() : (q = s.value[m]) == null || q.scrollIntoView({ block: "nearest" }));
+      I && b > -1 && (n.focusOnShow ? (A = s.value[b]) == null || A.focus() : (q = s.value[b]) == null || q.scrollIntoView({ block: "nearest" }));
     }), R(w, C);
     const x = p(() => n.modelValue || n.selectedValue);
     function S() {
@@ -1731,12 +1736,12 @@ const $a = {
     }
     function C() {
       var I, A;
-      w.value && !n.multiselect ? (m = s.value.findIndex(
+      w.value && !n.multiselect ? (b = s.value.findIndex(
         (q) => q.getAttribute("data-value") === String(x.value)
       ), s.value.forEach((q) => {
         var F;
         return (F = q == null ? void 0 : q.setAttribute) == null ? void 0 : F.call(q, "aria-selected", "false");
-      }), m > -1 && ((I = s.value[m]) == null || I.setAttribute("data-selected", ""), (A = s.value[m]) == null || A.setAttribute("aria-selected", "true"), o.value = m)) : (s.value.forEach((q) => {
+      }), b > -1 && ((I = s.value[b]) == null || I.setAttribute("data-selected", ""), (A = s.value[b]) == null || A.setAttribute("aria-selected", "true"), o.value = b)) : (s.value.forEach((q) => {
         var F;
         return (F = q == null ? void 0 : q.removeAttribute) == null ? void 0 : F.call(q, "data-selected");
       }), s.value.forEach((q) => {
@@ -1759,23 +1764,23 @@ const $a = {
       if (w.value)
         switch (I.key) {
           case "ArrowDown":
-            b("down"), I.preventDefault();
+            m("down"), I.preventDefault();
             break;
           case "ArrowUp":
-            b("up"), I.preventDefault();
+            m("up"), I.preventDefault();
             break;
           case "Home":
-            b("home"), I.preventDefault();
+            m("home"), I.preventDefault();
             break;
           case "End":
-            b("end"), I.preventDefault();
+            m("end"), I.preventDefault();
             break;
           case "Tab":
-            o.value = m, n.preventTab && I.preventDefault();
+            o.value = b, n.preventTab && I.preventDefault();
             break;
         }
     }
-    function b(I) {
+    function m(I) {
       let A;
       switch (I) {
         case "up":
@@ -1853,7 +1858,7 @@ const $a = {
       L(o.$slots, "default")
     ], 8, za));
   }
-}, Na = ["data-img-size", "data-initials", "data-no-img"], Ra = ["src", "alt"], rt = {
+}, Na = ["data-img-size", "data-initials", "data-no-img"], Ra = ["src", "alt"], st = {
   __name: "BsProfileImg",
   props: {
     src: String,
@@ -1966,7 +1971,7 @@ const $a = {
           r.icon ? (d(), h("span", Fa, [
             (d(), O(J(t[r.icon])))
           ])) : k("", !0),
-          r.profileImg ? (d(), O(rt, {
+          r.profileImg ? (d(), O(st, {
             key: 2,
             src: r.profileImg.src,
             size: "xs",
@@ -2023,45 +2028,45 @@ const $a = {
       () => t.selectedOptions,
       c,
       { immediate: !0 }
-    ), R(() => t.shown, (m) => {
-      m && ce(s);
+    ), R(() => t.shown, (b) => {
+      b && ce(s);
     });
     function s() {
       var x, S;
       l.value && (l.value.refreshOptions(), l.value.activeDescendantId = (x = l.value.optionEls[0]) == null ? void 0 : x.id, l.value.focusedIndex = 0);
-      const m = document.querySelector(`#${t.optionsId} [data-component="bs-dropdown-option"]`);
-      (S = m == null ? void 0 : m.focus) == null || S.call(m, { preventScroll: !0 });
+      const b = document.querySelector(`#${t.optionsId} [data-component="bs-dropdown-option"]`);
+      (S = b == null ? void 0 : b.focus) == null || S.call(b, { preventScroll: !0 });
     }
     function r() {
-      var m;
+      var b;
       if (l.value) {
         l.value.refreshOptions();
         const x = l.value.focusedIndex, S = l.value.optionEls[x];
-        (m = S == null ? void 0 : S.focus) == null || m.call(S), l.value.activeDescendantId = S == null ? void 0 : S.id;
+        (b = S == null ? void 0 : S.focus) == null || b.call(S), l.value.activeDescendantId = S == null ? void 0 : S.id;
       }
     }
-    function c(m = []) {
-      const x = new Set(m), S = [], C = [];
+    function c(b = []) {
+      const x = new Set(b), S = [], C = [];
       t.options.forEach((P) => {
-        const g = { ...P }, b = `${t.optionsId}-${P.value}-cb`;
-        x.has(P.value) ? (g.checkbox = { inputId: b, checked: !0 }, S.push(g)) : (g.checkbox = { inputId: b, checked: !1 }, C.push(g));
+        const g = { ...P }, m = `${t.optionsId}-${P.value}-cb`;
+        x.has(P.value) ? (g.checkbox = { inputId: m, checked: !0 }, S.push(g)) : (g.checkbox = { inputId: m, checked: !1 }, C.push(g));
       }), i.value = S, ce(() => {
         u.value = C, ce(() => {
           o && r(), o = !1;
         });
       });
     }
-    function v(m = []) {
-      const x = new Set(m), S = [];
+    function v(b = []) {
+      const x = new Set(b), S = [];
       return t.options.forEach((C) => {
         x.has(C.value) && S.push(C.value);
       }), S;
     }
-    function w(m) {
-      const x = t.selectedOptions.includes(m) ? t.selectedOptions.filter((S) => S !== m) : v([...t.selectedOptions, m]);
+    function w(b) {
+      const x = t.selectedOptions.includes(b) ? t.selectedOptions.filter((S) => S !== b) : v([...t.selectedOptions, b]);
       o = !0, n("update:selectedOptions", x);
     }
-    return (m, x) => (d(), O(Fe, {
+    return (b, x) => (d(), O(Fe, {
       ref_key: "optlist",
       ref: l,
       "aria-multiselectable": "true",
@@ -2179,7 +2184,7 @@ const $a = {
     function u() {
       n.value && (n.value = !1, t("close"));
     }
-    return (o, s) => (d(), O(f(it), {
+    return (o, s) => (d(), O(f(rt), {
       "anchor-id": e.anchorId,
       breakout: e.breakout,
       "container-id": e.containerId,
@@ -2414,7 +2419,7 @@ const $a = {
       L(n.$slots, "label", {}, () => [
         H(T(e.label), 1)
       ]),
-      V(f(lt))
+      V(f(ot))
     ], 8, _a));
   }
 }, tn = ["id"], Ml = {
@@ -2496,7 +2501,7 @@ const $a = {
     function w(x) {
       n("update:selectedOptions", x);
     }
-    function m(x) {
+    function b(x) {
       t.multiselect || (n("update:selectedOption", x), r());
     }
     return (x, S) => (d(), h("div", {
@@ -2522,7 +2527,7 @@ const $a = {
         ]),
         _: 3
       }, 8, ["aria-controls", "aria-expanded", "disabled", "id", "open", "options-id", "size"]),
-      V(it, {
+      V(rt, {
         shown: e.open,
         "anchor-id": f(o),
         breakout: e.breakout,
@@ -2543,7 +2548,7 @@ const $a = {
             "options-id": f(s),
             "selected-options": e.selectedOptions,
             shown: e.open,
-            "onUpdate:modelValue": m,
+            "onUpdate:modelValue": b,
             "onUpdate:selectedOptions": w,
             onClose: S[1] || (S[1] = (C) => e.multiselect ? void 0 : c())
           }, {
@@ -2825,13 +2830,13 @@ const $a = {
       c,
       v,
       w,
-      m
-    ] = X(4), x = y(!1), S = y(""), C = y(""), P = y(!1), g = y(!1), b = y(!0);
+      b
+    ] = X(4), x = y(!1), S = y(""), C = y(""), P = y(!1), g = y(!1), m = y(!0);
     a({
       validationErr: P,
       validationErrMsg: C
     });
-    const z = p(() => S.value ? `+${o.value}${S.value}` : ""), I = p(() => `Country code: ${o.value}. Click to change.`), A = p(() => b.value ? n.errorMsg || C.value : ""), q = p(() => n.error || P.value), F = p(() => n.hint || q.value && A.value), _ = p(() => b.value && q.value);
+    const z = p(() => S.value ? `+${o.value}${S.value}` : ""), I = p(() => `Country code: ${o.value}. Click to change.`), A = p(() => m.value ? n.errorMsg || C.value : ""), q = p(() => n.error || P.value), F = p(() => n.hint || q.value && A.value), _ = p(() => m.value && q.value);
     R(z, (M) => {
       l("update:modelValue", M), be(M);
     }), R(() => n.modelValue, de), De(), Y(() => x.value = !0);
@@ -2847,10 +2852,10 @@ const $a = {
       o.value = M, g.value = !1, (U = u.value) == null || U.focus(), he(M);
     }
     function Le() {
-      n.deferValidation && (b.value = !0), l("input-blur");
+      n.deferValidation && (m.value = !0), l("input-blur");
     }
     function Ve(M) {
-      S.value = M.target.value, n.deferValidation && (b.value = !1);
+      S.value = M.target.value, n.deferValidation && (m.value = !1);
     }
     function Ee(M) {
       var U, G;
@@ -2878,7 +2883,7 @@ const $a = {
       "data-component": "bs-input-phone"
     }, f(K)(M.$attrs, f(ge)).remaining), [
       V(ne, {
-        for: M.$attrs.id || e.inputId || f(m),
+        for: M.$attrs.id || e.inputId || f(b),
         required: e.required,
         class: ae({ "visually-hidden": e.hideLabel })
       }, {
@@ -2913,7 +2918,7 @@ const $a = {
               V(f(vt), { size: "sm" })
             ], 8, on),
             V(ve, N({
-              "input-id": M.$attrs.id || e.inputId || f(m),
+              "input-id": M.$attrs.id || e.inputId || f(b),
               disabled: e.disabled,
               "hint-id": f(w),
               placeholder: e.placeholder,
@@ -3144,19 +3149,19 @@ const $a = {
     const s = p(() => t.typeaheadId || u.value), r = p(() => `${s.value}-input-container`), c = p(() => `${s.value}-input`), v = p(() => `${s.value}-options`), w = p(() => {
       if (l.value) {
         let g = t.options;
-        const b = t.inputValue.toLowerCase(), z = t.filterType === "includes" ? "includes" : "startsWith";
-        return g = m(g, b, z), g = g.slice(0, t.maxOptions), g = x(g, b, z), o = g, g;
+        const m = t.inputValue.toLowerCase(), z = t.filterType === "includes" ? "includes" : "startsWith";
+        return g = b(g, m, z), g = g.slice(0, t.maxOptions), g = x(g, m, z), o = g, g;
       } else
         return o;
     });
-    function m(g, b, z) {
-      return t.internalFiltering ? g.filter((I) => I.label.toLowerCase()[z](b)) : g;
+    function b(g, m, z) {
+      return t.internalFiltering ? g.filter((I) => I.label.toLowerCase()[z](m)) : g;
     }
-    function x(g, b, z) {
+    function x(g, m, z) {
       return g.map((I) => {
         let A = I.label;
-        if (b !== "") {
-          const q = z === "includes" ? "gi" : "i", F = new RegExp(`(${b})`, q);
+        if (m !== "") {
+          const q = z === "includes" ? "gi" : "i", F = new RegExp(`(${m})`, q);
           A = I.label.replace(F, '<span style="color: var(--bs-blue-base)">$1</span>');
         }
         return { ...I, labelHtml: A };
@@ -3170,10 +3175,10 @@ const $a = {
     }
     function P(g) {
       i.value = !0, l.value = !1;
-      const b = w.value.find((z) => z.value === g);
-      n("update:inputValue", b.label), n("update:optionsValue", g);
+      const m = w.value.find((z) => z.value === g);
+      n("update:inputValue", m.label), n("update:optionsValue", g);
     }
-    return (g, b) => (d(), h(W, null, [
+    return (g, m) => (d(), h(W, null, [
       e.label || g.$slots.label ? (d(), O(ne, {
         key: 0,
         for: c.value,
@@ -3204,7 +3209,7 @@ const $a = {
         }, g.$attrs, {
           onClear: C,
           onFocusin: S,
-          "onUpdate:modelValue": b[0] || (b[0] = (z) => n("update:inputValue", z))
+          "onUpdate:modelValue": m[0] || (m[0] = (z) => n("update:inputValue", z))
         }), null, 16, ["aria-controls", "aria-expanded", "disabled", "hide-clear", "hide-search-icon", "input-id", "placeholder", "value"])
       ], 8, yn),
       V(We, {
@@ -3217,11 +3222,11 @@ const $a = {
         shown: l.value,
         "use-mobile-style": !1,
         width: "toggle",
-        onClose: b[1] || (b[1] = (z) => l.value = !1),
+        onClose: m[1] || (m[1] = (z) => l.value = !1),
         "onUpdate:modelValue": P
       }, {
         default: D(() => [
-          V(ye, { options: w.value }, ct({ _: 2 }, [
+          V(ye, { options: w.value }, nt({ _: 2 }, [
             e.loading ? {
               name: "no-options",
               fn: D(() => [
@@ -3358,9 +3363,9 @@ const $a = {
         preloaded: e.preloaded,
         duration: 75,
         "enter-attribute": "data-shown",
-        onEnter: w[1] || (w[1] = (m) => ft(u) ? u.value = !0 : u = !0),
-        onAfterEnter: w[2] || (w[2] = (m) => n("after-enter")),
-        onAfterLeave: w[3] || (w[3] = (m) => n("after-leave"))
+        onEnter: w[1] || (w[1] = (b) => ft(u) ? u.value = !0 : u = !0),
+        onAfterEnter: w[2] || (w[2] = (b) => n("after-enter")),
+        onAfterLeave: w[3] || (w[3] = (b) => n("after-leave"))
       }, {
         default: D(() => [
           B("div", N({
@@ -3390,7 +3395,7 @@ const $a = {
                 type: "button",
                 title: "Close Modal",
                 "aria-label": "Close Modal",
-                onClick: w[0] || (w[0] = (m) => n("close", e.modalId))
+                onClick: w[0] || (w[0] = (b) => n("close", e.modalId))
               }, [
                 V(f(Se), { class: "close-button" })
               ])) : k("", !0)
@@ -3534,12 +3539,12 @@ const $a = {
       if (t.pageCount <= t.pageRange)
         return [...Array(t.pageCount + 1).keys()].slice(1);
       const C = [1], P = (t.pageRange - 1) / 2;
-      let g = l.value - P, b = l.value + P;
-      g < 1 && (b += 1 - g, g = 1), b > t.pageCount && (g -= b - t.pageCount, b = t.pageCount), g = Math.max(g, 2), b = Math.min(b, t.pageCount - 1), g > 2 && C.push(t.breakText);
-      for (let z = g; z <= b; z++)
+      let g = l.value - P, m = l.value + P;
+      g < 1 && (m += 1 - g, g = 1), m > t.pageCount && (g -= m - t.pageCount, m = t.pageCount), g = Math.max(g, 2), m = Math.min(m, t.pageCount - 1), g > 2 && C.push(t.breakText);
+      for (let z = g; z <= m; z++)
         C.push(z);
-      return b < t.pageCount - 1 && C.push(t.breakText), C.push(t.pageCount), C;
-    }), m = p(() => `${t.centerLabel ?? "Page"} ${l.value} of ${u.value}`), x = p(() => {
+      return m < t.pageCount - 1 && C.push(t.breakText), C.push(t.pageCount), C;
+    }), b = p(() => `${t.centerLabel ?? "Page"} ${l.value} of ${u.value}`), x = p(() => {
       const C = (l.value - 1) * t.itemsPerGroup + 1, P = Math.min(C - 1 + t.itemsPerGroup, t.itemsCount);
       return `${t.centerLabel ?? "Results"} ${C} - ${P} of ${t.itemsCount}`;
     }), S = p(() => t.resultsIncrements.split(",").map((C) => parseInt(C)));
@@ -3579,10 +3584,10 @@ const $a = {
           type: "button",
           title: `Page ${g}`,
           "data-selected": g === l.value,
-          onClick: (b) => l.value = g
+          onClick: (m) => l.value = g
         }, T(g), 9, Vn))), 128))
       ])) : k("", !0),
-      t.variant === "base" && t.centerDisplay === "text" ? (d(), h("span", En, T(m.value), 1)) : k("", !0),
+      t.variant === "base" && t.centerDisplay === "text" ? (d(), h("span", En, T(b.value), 1)) : k("", !0),
       t.variant === "group" ? (d(), h("span", Dn, T(x.value), 1)) : k("", !0),
       t.variant === "results" ? (d(), h(W, { key: 4 }, [
         On,
@@ -3592,7 +3597,7 @@ const $a = {
             key: `results-${g}`,
             "data-selected": g === l.value,
             disabled: l.value === g,
-            onClick: (b) => l.value = g
+            onClick: (m) => l.value = g
           }, T(g), 9, Pn))), 128))
         ])
       ], 64)) : k("", !0),
@@ -3762,7 +3767,7 @@ const $a = {
       "data-layout": e.layout
     }, f(o), { onClick: f(i) }), {
       default: D(() => [
-        V(rt, {
+        V(st, {
           src: e.imageSrc,
           size: e.imageSize,
           initials: e.initials,
@@ -4133,10 +4138,10 @@ const $a = {
   },
   emits: ["tabChange", "update:modelValue"],
   setup(e, { emit: a }) {
-    const t = e, n = a, l = y(!1), i = y(!1), u = y([]), o = y(!1), s = y(!1), r = y(), c = y([]), v = y(!1), w = y([]), m = y(), x = y(), S = y(), [C, P] = X(2), g = p(() => t.activeTabId ? w.value.findIndex(($) => $.id === t.activeTabId) : 0), b = p(() => u.value.some(($) => $.id === t.activeTabId)), z = p(() => `${P.value}-options`), I = p(() => `${P.value}-toggle`), A = p(() => {
+    const t = e, n = a, l = y(!1), i = y(!1), u = y([]), o = y(!1), s = y(!1), r = y(), c = y([]), v = y(!1), w = y([]), b = y(), x = y(), S = y(), [C, P] = X(2), g = p(() => t.activeTabId ? w.value.findIndex(($) => $.id === t.activeTabId) : 0), m = p(() => u.value.some(($) => $.id === t.activeTabId)), z = p(() => `${P.value}-options`), I = p(() => `${P.value}-toggle`), A = p(() => {
       var $;
-      return b.value ? ($ = w.value[g.value]) == null ? void 0 : $.textContent : "More";
-    }), q = p(() => b.value ? c.value[g.value] - c.value[g.value - 1] + ul : dl), F = p(() => {
+      return m.value ? ($ = w.value[g.value]) == null ? void 0 : $.textContent : "More";
+    }), q = p(() => m.value ? c.value[g.value] - c.value[g.value - 1] + ul : dl), F = p(() => {
       var E, j;
       let $ = [];
       if (typeof window > "u")
@@ -4182,14 +4187,14 @@ const $a = {
     }
     function Le() {
       var $;
-      ($ = m.value) == null || $.focus(), o.value = !1;
+      ($ = b.value) == null || $.focus(), o.value = !1;
     }
     function Ve() {
       o.value = !o.value, i.value || (i.value = !0);
     }
     function Ee($) {
       var E;
-      o.value = !1, (E = m.value) == null || E.focus(), de($);
+      o.value = !1, (E = b.value) == null || E.focus(), de($);
     }
     function De($) {
       if (t.withBsTabs)
@@ -4222,7 +4227,7 @@ const $a = {
       var le, te, Ge, He;
       const $ = parseInt(r.value.style.getPropertyValue("--active-line-offset")) || 0, E = S.value;
       let j = 300, Q = ((te = (le = F.value) == null ? void 0 : le[g.value]) == null ? void 0 : te.offsetLeft) || 0, ee = xe(g.value);
-      s.value && b.value && (Q = (Ge = m.value) == null ? void 0 : Ge.offsetLeft, ee = (He = m.value) == null ? void 0 : He.offsetWidth), j = Math.max(Math.abs((Q - $) / E * 300), 100), r.value.style.setProperty("--active-line-max-width", `${E}px`), r.value.style.setProperty("--active-line-scale", `${ee / E}`), r.value.style.setProperty("--active-line-offset", `${Q}px`), r.value.style.setProperty("--active-line-transition-duration", `${j}ms`);
+      s.value && m.value && (Q = (Ge = b.value) == null ? void 0 : Ge.offsetLeft, ee = (He = b.value) == null ? void 0 : He.offsetWidth), j = Math.max(Math.abs((Q - $) / E * 300), 100), r.value.style.setProperty("--active-line-max-width", `${E}px`), r.value.style.setProperty("--active-line-scale", `${ee / E}`), r.value.style.setProperty("--active-line-offset", `${Q}px`), r.value.style.setProperty("--active-line-transition-duration", `${j}ms`);
     }
     function U() {
       var $, E;
@@ -4238,7 +4243,7 @@ const $a = {
     function ue() {
       w.value = Array.from(r.value.children).filter(($) => $.role === "tab");
     }
-    function st() {
+    function dt() {
       let $;
       w.value.forEach((E, j) => {
         $ = E.getBoundingClientRect().width + cl, c.value.push(j ? $ + c.value[j - 1] : $);
@@ -4247,7 +4252,7 @@ const $a = {
     return R(() => t.activeTabId, Ae), Y(() => {
       var $;
       try {
-        ue(), st(), G(), S.value = r.value.getBoundingClientRect().width, _(), t.withBsTabs || ($ = w.value[g.value]) == null || $.setAttribute("aria-selected", "true");
+        ue(), dt(), G(), S.value = r.value.getBoundingClientRect().width, _(), t.withBsTabs || ($ = w.value[g.value]) == null || $.setAttribute("aria-selected", "true");
       } catch (E) {
         console.log("tab error", E);
       }
@@ -4268,11 +4273,11 @@ const $a = {
         "aria-controls": f(P),
         "aria-expanded": o.value,
         class: "bs-tab-list-toggle",
-        "data-active": b.value || void 0,
+        "data-active": m.value || void 0,
         "data-hidden": !s.value,
         id: I.value,
         ref_key: "dropdownToggle",
-        ref: m,
+        ref: b,
         onClick: Ve
       }, [
         V(f(Bt), { size: "sm" }),
@@ -4670,7 +4675,7 @@ export {
   Ol as BsChartBar,
   ql as BsCheckbox,
   Pl as BsCircleButton,
-  it as BsDropdown,
+  rt as BsDropdown,
   Xa as BsDropdownMultiselect,
   Ue as BsDropdownOption,
   ye as BsDropdownOptionBuilder,
@@ -4694,7 +4699,7 @@ export {
   Wl as BsPill,
   Gl as BsProfile,
   Qn as BsProfileDetails,
-  rt as BsProfileImg,
+  st as BsProfileImg,
   Hl as BsRadio,
   _n as BsSelect,
   Kl as BsSelectField,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wwtdev/bsds-components-vue3",
   "type": "module",
-  "version": "2.3.6",
+  "version": "2.4.0",
   "description": "BSDS Vue3 Components",
   "files": [
     "lib"
@@ -70,7 +70,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.8",
     "@wwtdev/bsds-css": "^2.3.4",
-    "@wwtdev/bsds-icons-vue3": "^2.5.1",
+    "@wwtdev/bsds-icons-vue3": "^2.6.0",
     "awesome-phonenumber": "^6.4.0",
     "chart.js": "^4.4.1",
     "uuid": "^9.0.1",