@useinsider/ab-components 0.0.3 → 0.0.4

package/dist/{index-BfxawNec.js → index-cklZdQqm.js}

@@ -1,4 +1,4 @@
-import { defineComponent as q, computed as j, openBlock as s, createElementBlock as d, normalizeClass as l, unref as e, createBlock as S, createCommentVNode as f, toDisplayString as v, ref as w, onMounted as D, Fragment as F, createElementVNode as k, withDirectives as T, normalizeStyle as G, withModifiers as K, vModelText as ee, renderList as U, defineAsyncComponent as I, resolveDynamicComponent as te, createVNode as ne } from "vue";
+import { defineComponent as q, computed as M, openBlock as s, createElementBlock as d, normalizeClass as l, unref as e, createBlock as L, createCommentVNode as f, toDisplayString as v, ref as w, onMounted as D, Fragment as F, createElementVNode as k, withDirectives as T, normalizeStyle as G, withModifiers as K, vModelText as ee, renderList as U, defineAsyncComponent as I, resolveDynamicComponent as te, createVNode as ne } from "vue";
 const oe = "_button__size_default_hp1t7_1", re = "_button__size_small_hp1t7_8", _e = "_button_hp1t7_1", ae = "_button__label_hp1t7_192", le = "_button__solid_hp1t7_204", se = "_fill_hp1t7_1124", $ = {
   button__size_default: oe,
   button__size_small: re,
@@ -49,31 +49,31 @@ const oe = "_button__size_default_hp1t7_1", re = "_button__size_small_hp1t7_8",
   },
   emits: ["click"],
   setup(u, { emit: i }) {
-    const _ = u, t = i, a = (o) => {
-      _.disabled || t("click", o);
-    }, m = j(() => _.loadingStatus ? "LoadingCircle" : _.successStatus ? "LineCheck" : _.leftIconName);
-    return (o, n) => (s(), d("button", {
+    const _ = u, t = i, a = (r) => {
+      _.disabled || t("click", r);
+    }, m = M(() => _.loadingStatus ? "LoadingCircle" : _.successStatus ? "LineCheck" : _.leftIconName);
+    return (r, n) => (s(), d("button", {
       class: l([
         e($).button,
-        e($)[`button__${o.variant}`],
-        e($)[`button__${o.variant}-${o.color}`],
-        e($)[`button__size_${o.size}`],
-        { [e($).fill]: o.fill }
+        e($)[`button__${r.variant}`],
+        e($)[`button__${r.variant}-${r.color}`],
+        e($)[`button__size_${r.size}`],
+        { [e($).fill]: r.fill }
       ]),
       disabled: _.disabled,
       onClick: a
     }, [
-      m.value ? (s(), S(e(M), {
+      m.value ? (s(), L(e(S), {
         key: 0,
         name: m.value
       }, null, 8, ["name"])) : f("", !0),
-      o.label ? (s(), d("span", {
+      r.label ? (s(), d("span", {
         key: 1,
         class: l(e($).button__label)
-      }, v(o.label), 3)) : f("", !0),
-      o.rightIconName ? (s(), S(e(M), {
+      }, v(r.label), 3)) : f("", !0),
+      r.rightIconName ? (s(), L(e(S), {
         key: 2,
-        name: o.rightIconName
+        name: r.rightIconName
       }, null, 8, ["name"])) : f("", !0)
     ], 10, ue));
   }
@@ -101,13 +101,13 @@ const oe = "_button__size_default_hp1t7_1", re = "_button__size_small_hp1t7_8",
     const m = String(a[i]);
     return de(m.toLowerCase(), t);
   }).sort((a, m) => {
-    const o = String(a[i]).toLowerCase(), n = String(m[i]).toLowerCase();
-    return o === t ? -1 : n === t ? 1 : o.startsWith(t) && !n.startsWith(t) ? -1 : !o.startsWith(t) && n.startsWith(t) ? 1 : o.length - n.length;
+    const r = String(a[i]).toLowerCase(), n = String(m[i]).toLowerCase();
+    return r === t ? -1 : n === t ? 1 : r.startsWith(t) && !n.startsWith(t) ? -1 : !r.startsWith(t) && n.startsWith(t) ? 1 : r.length - n.length;
   });
-}, pe = "_dropdown_zdj6q_169", me = "_dropdown__valueContent_zdj6q_178", he = "_dropdown__label_zdj6q_189", be = "_dropdown__value_zdj6q_178", fe = "_dropdown__placeholder_zdj6q_196", ve = "_dropdown__arrowIcon_zdj6q_204", ge = "_menu_zdj6q_209", we = "_menu__searchContainer_zdj6q_222", ye = "_menu__searchInputWrap_zdj6q_226", Ce = "_menu__searchInput_zdj6q_226", ze = "_menu__errorMessage_zdj6q_247", ke = "_menu__addButton_zdj6q_254", Ie = "_menu__itemContainer_zdj6q_262", xe = "_menu__item_zdj6q_262", h = {
+}, pe = "_dropdown_1yq1z_169", me = "_dropdown__valueContent_1yq1z_178", he = "_dropdown__label_1yq1z_189", be = "_dropdown__value_1yq1z_178", fe = "_dropdown__placeholder_1yq1z_196", ve = "_dropdown__arrowIcon_1yq1z_204", ge = "_menu_1yq1z_209", we = "_menu__searchContainer_1yq1z_222", ye = "_menu__searchInputWrap_1yq1z_226", Ce = "_menu__searchInput_1yq1z_226", ze = "_menu__errorMessage_1yq1z_247", ke = "_menu__addButton_1yq1z_254", Ie = "_menu__itemContainer_1yq1z_262", xe = "_menu__item_1yq1z_262", h = {
   dropdown: pe,
   dropdown__valueContent: me,
-  "dropdown__valueContent--open": "_dropdown__valueContent--open_zdj6q_186",
+  "dropdown__valueContent--open": "_dropdown__valueContent--open_1yq1z_186",
   dropdown__label: he,
   dropdown__value: be,
   dropdown__placeholder: fe,
@@ -116,18 +116,18 @@ const oe = "_button__size_default_hp1t7_1", re = "_button__size_small_hp1t7_8",
   menu__searchContainer: we,
   menu__searchInputWrap: ye,
   menu__searchInput: Ce,
-  "menu__searchInput--error": "_menu__searchInput--error_zdj6q_244",
+  "menu__searchInput--error": "_menu__searchInput--error_1yq1z_244",
   menu__errorMessage: ze,
   menu__addButton: ke,
   menu__itemContainer: Ie,
   menu__item: xe,
-  "menu__item--active": "_menu__item--active_zdj6q_300"
+  "menu__item--active": "_menu__item--active_1yq1z_300"
 }, $e = ["for"], qe = ["placeholder"], Be = ["onClick"], rt = /* @__PURE__ */ q({
   __name: "DropdownMenu",
   props: {
     id: {},
     label: {},
-    defaultSelected: { default: "" },
+    modelValue: {},
     menuHeight: { default: 154 },
     placeholder: {},
     addable: { type: Boolean },
@@ -137,27 +137,27 @@ const oe = "_button__size_default_hp1t7_1", re = "_button__size_small_hp1t7_8",
     items: {},
     validateAddItem: { type: Function, default: () => null }
   },
-  emits: ["add-error", "item-added", "select-item"],
+  emits: ["update:modelValue", "add-error", "item-added", "select-item"],
   setup(u, { emit: i }) {
-    const _ = ie, t = u, a = i, m = w(), o = w(), n = w(!0), r = w(null), y = w(""), c = w(null), x = w({ x: 0, y: 0, width: 0, shouldOpenUp: !1, height: t.menuHeight }), L = w([...t.items]), B = w([...t.items]), O = () => {
+    const _ = ie, t = u, a = i, m = w(), r = w(), n = w(!0), o = w(null), y = w(""), c = w(null), x = w({ x: 0, y: 0, width: 0, shouldOpenUp: !1, height: t.menuHeight }), H = w([...t.items]), B = w([...t.items]), O = () => {
       if (!m.value)
         return;
-      const { offsetTop: p, offsetLeft: b, offsetWidth: g } = m.value, W = window.innerHeight, P = p + m.value.offsetHeight, R = P + t.menuHeight > W;
+      const { offsetTop: p, offsetLeft: b, offsetWidth: g } = m.value, P = window.innerHeight, j = p + m.value.offsetHeight, R = j + t.menuHeight > P;
       x.value = {
         x: b + window.scrollX,
-        y: R ? p + window.scrollY : P + window.scrollY,
+        y: R ? p + window.scrollY : j + window.scrollY,
         width: g,
         shouldOpenUp: R,
         height: t.menuHeight
       };
     }, A = () => {
       O(), n.value = !n.value;
-    }, V = () => {
-      c.value = null, y.value = "", L.value = [...B.value];
     }, E = () => {
-      n.value = !1, V();
+      c.value = null, y.value = "", H.value = [...B.value];
+    }, N = () => {
+      n.value = !1, E();
     }, Y = (p) => {
-      r.value = p, y.value = "", E(), a("select-item", p);
+      o.value = p, a("select-item", p), a("update:modelValue", p.value), N();
     }, Q = () => {
       const p = y.value.trim(), b = t.validateAddItem(p, B.value);
       if (b) {
@@ -168,24 +168,24 @@ const oe = "_button__size_default_hp1t7_1", re = "_button__size_small_hp1t7_8",
         text: p,
         value: p
       };
-      B.value.push(g), V(), a("item-added", g);
+      B.value.push(g), E(), a("item-added", g);
     }, X = () => {
-      L.value = ce(B.value, "text", y.value);
+      H.value = ce(B.value, "text", y.value);
     }, Z = () => {
       c.value = "";
-    }, J = j(() => ({
+    }, J = M(() => ({
       top: x.value.shouldOpenUp ? `${x.value.y - 10}px` : `${x.value.y}px`,
       left: `${x.value.x}px`,
       width: `${x.value.width}px`,
       height: `${t.menuHeight}px`
     }));
     D(() => {
-      if (O(), t.defaultSelected) {
-        const p = B.value.find((b) => b.value === t.defaultSelected);
-        p && (r.value = p, a("select-item", p));
+      if (O(), t.modelValue) {
+        const p = B.value.find((b) => b.value === t.modelValue);
+        p && (o.value = p);
       }
     });
-    const N = j(() => r.value ? r.value.text : "");
+    const W = M(() => o.value ? o.value.text : "");
     return (p, b) => (s(), d(F, null, [
       k("div", {
         ref_key: "dropdownRef",
@@ -208,8 +208,8 @@ const oe = "_button__size_default_hp1t7_1", re = "_button__size_small_hp1t7_8",
         }, [
           k("span", {
             class: l(e(h).dropdown__value)
-          }, v(N.value), 3),
-          p.placeholder && !N.value ? (s(), d("span", {
+          }, v(W.value), 3),
+          p.placeholder && !W.value ? (s(), d("span", {
             key: 0,
             class: l(e(h).dropdown__placeholder)
           }, v(p.placeholder), 3)) : f("", !0),
@@ -231,7 +231,7 @@ const oe = "_button__size_default_hp1t7_1", re = "_button__size_small_hp1t7_8",
       n.value ? T((s(), d("div", {
         key: 0,
         ref_key: "menuRef",
-        ref: o,
+        ref: r,
         class: l(e(h).menu),
         style: G(J.value),
         onClick: b[1] || (b[1] = K(() => {
@@ -273,31 +273,31 @@ const oe = "_button__size_default_hp1t7_1", re = "_button__size_small_hp1t7_8",
         k("ul", {
           class: l(e(h).menu__itemContainer)
         }, [
-          (s(!0), d(F, null, U(L.value, (g) => (s(), d("li", {
+          (s(!0), d(F, null, U(H.value, (g) => (s(), d("li", {
             key: g.value,
             class: l([
               e(h).menu__item,
               {
-                [e(h)["menu__item--active"]]: r.value && g.value === r.value.value
+                [e(h)["menu__item--active"]]: o.value && g.value === o.value.value
               }
             ]),
-            onClick: (W) => Y(g)
+            onClick: (P) => Y(g)
           }, v(g.text), 11, Be))), 128))
         ], 2)
       ], 6)), [
-        [e(_), { handler: E, exclude: [m.value, o.value] }]
+        [e(_), { handler: N, exclude: [m.value, r.value] }]
       ]) : f("", !0)
     ], 64));
   }
-}), je = {
-  FilledErrorBox: I(() => import("./FilledErrorBox-Czq7e64W.js")),
-  LineCheck: I(() => import("./LineCheck-dIF58UgU.js")),
-  FilledCheckCircle: I(() => import("./FilledCheckCircle-BZblXEJF.js")),
-  LoadingCircle: I(() => import("./LoadingCircle-CoRfnES9.js")),
-  FilledInfoCircle: I(() => import("./FilledInfoCircle-BC2xa2R2.js")),
-  SmartIcon: I(() => import("./SmartIcon-m_MkAWvM.js")),
-  FilledCautionTriangle: I(() => import("./FilledCautionTriangle-Dxi1xHHx.js"))
-}, Se = /* @__PURE__ */ q({
+}), Me = {
+  FilledErrorBox: I(() => import("./FilledErrorBox-Dpe6OZUM.js")),
+  LineCheck: I(() => import("./LineCheck-BfCAWbdB.js")),
+  FilledCheckCircle: I(() => import("./FilledCheckCircle-KVwpT9RS.js")),
+  LoadingCircle: I(() => import("./LoadingCircle-tXgyfHxd.js")),
+  FilledInfoCircle: I(() => import("./FilledInfoCircle-BY63hzfn.js")),
+  SmartIcon: I(() => import("./SmartIcon-QK_6bafK.js")),
+  FilledCautionTriangle: I(() => import("./FilledCautionTriangle-B75sSsx4.js"))
+}, Le = /* @__PURE__ */ q({
   __name: "Icon",
   props: {
     name: {},
@@ -305,24 +305,24 @@ const oe = "_button__size_default_hp1t7_1", re = "_button__size_small_hp1t7_8",
     color: {}
   },
   setup(u) {
-    const i = u, _ = j(() => typeof i.size == "number" ? `${i.size}px` : i.size);
-    return (t, a) => (s(), S(te(e(je)[t.name]), {
+    const i = u, _ = M(() => typeof i.size == "number" ? `${i.size}px` : i.size);
+    return (t, a) => (s(), L(te(e(Me)[t.name]), {
       class: "icon",
       style: G({ width: _.value, height: _.value, fill: i.color || "currentColor" })
     }, null, 8, ["style"]));
   }
-}), Me = (u, i) => {
+}), Se = (u, i) => {
   const _ = u.__vccOpts || u;
   for (const [t, a] of i)
     _[t] = a;
   return _;
-}, M = /* @__PURE__ */ Me(Se, [["__scopeId", "data-v-3e9c3b20"]]), Le = "_container_2joy4_1", He = "_container__text_2joy4_187", Fe = "_container__default_2joy4_191", Ge = "_container__warning_2joy4_199", Oe = "_container__alert_2joy4_207", Ve = "_container__success_2joy4_215", H = {
-  container: Le,
-  container__text: He,
+}, S = /* @__PURE__ */ Se(Le, [["__scopeId", "data-v-3e9c3b20"]]), He = "_container_2joy4_1", Ve = "_container__text_2joy4_187", Fe = "_container__default_2joy4_191", Ge = "_container__warning_2joy4_199", Oe = "_container__alert_2joy4_207", Ee = "_container__success_2joy4_215", V = {
+  container: He,
+  container__text: Ve,
   container__default: Fe,
   container__warning: Ge,
   container__alert: Oe,
-  container__success: Ve
+  container__success: Ee
 }, _t = /* @__PURE__ */ q({
   __name: "OnPageMessage",
   props: {
@@ -330,7 +330,7 @@ const oe = "_button__size_default_hp1t7_1", re = "_button__size_small_hp1t7_8",
     text: {}
   },
   setup(u) {
-    const i = u, _ = j(() => {
+    const i = u, _ = M(() => {
       switch (i.variant) {
         case "alert":
           return "FilledErrorBox";
@@ -344,24 +344,24 @@ const oe = "_button__size_default_hp1t7_1", re = "_button__size_small_hp1t7_8",
     });
     return (t, a) => (s(), d("div", {
       class: l([
-        e(H).container,
-        e(H)[`container__${t.variant}`]
+        e(V).container,
+        e(V)[`container__${t.variant}`]
       ])
     }, [
-      ne(M, {
+      ne(S, {
         name: _.value,
         size: 24
       }, null, 8, ["name"]),
       k("span", {
-        class: l(e(H).container__text)
+        class: l(e(V).container__text)
       }, v(t.text), 3)
     ], 2));
   }
-}), Ee = "_button__size_default_qxh1r_1", Ne = "_button__size_small_qxh1r_8", We = "_button_qxh1r_1", Pe = "_button__label_qxh1r_191", Re = "_button__solid_qxh1r_328", Te = "_segmentGroup_qxh1r_335", De = "_fill_qxh1r_357", C = {
-  button__size_default: Ee,
-  button__size_small: Ne,
-  button: We,
-  button__label: Pe,
+}), Ne = "_button__size_default_qxh1r_1", We = "_button__size_small_qxh1r_8", Pe = "_button_qxh1r_1", je = "_button__label_qxh1r_191", Re = "_button__solid_qxh1r_328", Te = "_segmentGroup_qxh1r_335", De = "_fill_qxh1r_357", C = {
+  button__size_default: Ne,
+  button__size_small: We,
+  button: Pe,
+  button__label: je,
   "button--primary": "_button--primary_qxh1r_206",
   "button--selected": "_button--selected_qxh1r_216",
   "button--secondary": "_button--secondary_qxh1r_229",
@@ -385,38 +385,38 @@ const oe = "_button__size_default_hp1t7_1", re = "_button__size_small_hp1t7_8",
   },
   emits: ["click"],
   setup(u, { emit: i }) {
-    const _ = u, t = i, a = w(""), m = (o) => {
-      _.disabled || o.disabled || (a.value = o.value, t("click", o.value));
+    const _ = u, t = i, a = w(""), m = (r) => {
+      _.disabled || r.disabled || (a.value = r.value, t("click", r.value));
     };
-    return (o, n) => (s(), d("div", {
+    return (r, n) => (s(), d("div", {
       class: l([
         e(C).segmentGroup,
-        e(C)[`segmentGroup--${o.align}`],
-        { [e(C).fill]: o.fill }
+        e(C)[`segmentGroup--${r.align}`],
+        { [e(C).fill]: r.fill }
       ])
     }, [
-      (s(!0), d(F, null, U(o.segments, (r) => (s(), d("button", {
-        key: r.value,
+      (s(!0), d(F, null, U(r.segments, (o) => (s(), d("button", {
+        key: o.value,
         class: l([
           e(C).button,
-          e(C)[`button--${o.color}`],
-          e(C)[`button__size_${o.size}`],
+          e(C)[`button--${r.color}`],
+          e(C)[`button__size_${r.size}`],
           e(C).fill,
           {
-            [e(C)["button--selected"]]: r.value === a.value
+            [e(C)["button--selected"]]: o.value === a.value
           }
         ]),
-        disabled: r.disabled || _.disabled,
-        onClick: (y) => m(r)
+        disabled: o.disabled || _.disabled,
+        onClick: (y) => m(o)
       }, [
-        r.icon ? (s(), S(e(M), {
+        o.icon ? (s(), L(e(S), {
           key: 0,
-          name: r.icon
+          name: o.icon
         }, null, 8, ["name"])) : f("", !0),
-        r.label ? (s(), d("span", {
+        o.label ? (s(), d("span", {
           key: 1,
           class: l(e(C).button__label)
-        }, v(r.label), 3)) : f("", !0)
+        }, v(o.label), 3)) : f("", !0)
       ], 10, Ue))), 128))
     ], 2));
   }
@@ -443,7 +443,7 @@ const oe = "_button__size_default_hp1t7_1", re = "_button__size_small_hp1t7_8",
     autoGrow: { type: Boolean, default: !1 },
     counter: { type: Boolean }
   },
-  emits: ["input", "change", "paste", "focus", "blur"],
+  emits: ["update:modelValue", "input", "change", "paste", "focus", "blur"],
   setup(u, { emit: i }) {
     const _ = u, t = i, a = w(null), m = () => {
       if (_.autoGrow && a.value) {
@@ -451,12 +451,13 @@ const oe = "_button__size_default_hp1t7_1", re = "_button__size_small_hp1t7_8",
         const n = Math.min(a.value.scrollHeight, _.maxHeight || a.value.scrollHeight);
         a.value.style.height = `${n}px`;
       }
-    }, o = (n) => {
-      t("input", n), m();
+    }, r = (n) => {
+      const o = n.target;
+      t("input", n), t("update:modelValue", o.value), m();
     };
     return D(() => {
       m();
-    }), (n, r) => {
+    }), (n, o) => {
       var y;
       return s(), d("div", {
         class: l(e(z).wrapper)
@@ -482,11 +483,11 @@ const oe = "_button__size_default_hp1t7_1", re = "_button__size_small_hp1t7_8",
           placeholder: n.placeholder,
           style: G(n.maxHeight ? { maxHeight: `${n.maxHeight}px` } : void 0),
           value: n.modelValue,
-          onBlur: r[0] || (r[0] = (c) => t("blur", c)),
-          onChange: r[1] || (r[1] = (c) => n.$emit("change", c)),
-          onFocus: r[2] || (r[2] = (c) => t("focus", c)),
-          onInput: o,
-          onPaste: r[3] || (r[3] = (c) => t("paste", c))
+          onBlur: o[0] || (o[0] = (c) => t("blur", c)),
+          onChange: o[1] || (o[1] = (c) => n.$emit("change", c)),
+          onFocus: o[2] || (o[2] = (c) => t("focus", c)),
+          onInput: r,
+          onPaste: o[3] || (o[3] = (c) => t("paste", c))
         }, null, 46, et)) : (s(), d("input", {
           key: 2,
           id: n.id,
@@ -501,11 +502,11 @@ const oe = "_button__size_default_hp1t7_1", re = "_button__size_small_hp1t7_8",
           name: n.name,
           placeholder: n.placeholder,
           value: n.modelValue,
-          onBlur: r[4] || (r[4] = (c) => t("blur", c)),
-          onChange: r[5] || (r[5] = (c) => n.$emit("change", c)),
-          onFocus: r[6] || (r[6] = (c) => t("focus", c)),
-          onInput: o,
-          onPaste: r[7] || (r[7] = (c) => t("paste", c))
+          onBlur: o[4] || (o[4] = (c) => t("blur", c)),
+          onChange: o[5] || (o[5] = (c) => n.$emit("change", c)),
+          onFocus: o[6] || (o[6] = (c) => t("focus", c)),
+          onInput: r,
+          onPaste: o[7] || (o[7] = (c) => t("paste", c))
         }, null, 42, tt)),
         k("div", {
           class: l(e(z).wrapper__bottom)
@@ -524,12 +525,12 @@ const oe = "_button__size_default_hp1t7_1", re = "_button__size_small_hp1t7_8",
   }
 });
 export {
-  M as I,
-  Me as _,
+  S as I,
+  Se as _,
   ot as a,
   rt as b,
   _t as c,
   at as d,
   lt as e
 };
-//# sourceMappingURL=index-BfxawNec.js.map
+//# sourceMappingURL=index-cklZdQqm.js.map

package/dist/index-cklZdQqm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-cklZdQqm.js","sources":["../src/components/Button/Button.vue","../src/directives/clickOutside.ts","../src/utils/search.ts","../src/components/Dropdown/DropdownMenu.vue","../src/components/Icon/icons/index.ts","../src/components/Icon/Icon.vue","../src/components/OnPageMessage/OnPageMessage.vue","../src/components/SegmentButton/SegmentButton.vue","../src/components/TextInput/TextInput.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport type { IconNames } from '@/components/Icon/types';\nimport { Icon } from '@/index';\nimport styles from './Button.module.scss';\n\ninterface ButtonProps {\n    variant: 'solid' | 'ghost' | 'text' | 'outline';\n    color: 'primary' | 'subtle-primary' | 'secondary' | 'danger' | 'warning' | 'smart';\n    size?: 'default' | 'small';\n    leftIconName?: IconNames;\n    rightIconName?: IconNames;\n    loadingStatus?: boolean;\n    successStatus?: boolean;\n    label?: string;\n    disabled?: boolean;\n    fill?: boolean;\n}\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n    loadingStatus: false,\n    successStatus: false,\n    disabled: false,\n    fill: false,\n    size: 'default',\n});\n\nconst emit = defineEmits<{\n    click: [event: MouseEvent];\n}>();\n\nconst onClick = (event: MouseEvent) => {\n    if (props.disabled) {\n        return;\n    }\n\n    emit('click', event);\n};\n\nconst leftIcon = computed<IconNames | undefined>(() => {\n    if (props.loadingStatus) {\n        return 'LoadingCircle';\n    } else if (props.successStatus) {\n        return 'LineCheck';\n    }\n\n    return props.leftIconName;\n});\n</script>\n\n<template>\n    <button\n        :class=\"[\n            styles.button,\n            styles[`button__${variant}`],\n            styles[`button__${variant}-${color}`],\n            styles[`button__size_${size}`],\n            { [styles.fill]: fill },\n        ]\"\n        :disabled=\"props.disabled\"\n        @click=\"onClick\">\n        <Icon\n            v-if=\"leftIcon\"\n            :name=\"leftIcon\" />\n        <span\n            v-if=\"label\"\n            :class=\"styles.button__label\">\n            {{ label }}\n        </span>\n        <Icon\n            v-if=\"rightIconName\"\n            :name=\"rightIconName\" />\n    </button>\n</template>\n","import type { DirectiveBinding } from 'vue';\n\ninterface ClickOutsideElement extends HTMLElement {\n    clickOutsideEvent?: (event: Event) => void;\n}\n\nexport default {\n    mounted(el: ClickOutsideElement, binding: DirectiveBinding<{ handler: () => void; exclude?: HTMLElement[] }>) {\n        el.clickOutsideEvent = (event: Event) => {\n            const isClickInside = [el, ...(binding.value.exclude || [])].some(element => {\n                return element && (element === event.target || element.contains(event.target as Node))\n            });\n\n            if (!isClickInside) {\n                binding.value.handler(); // Close handler\n            }\n        };\n\n        document.addEventListener('click', el.clickOutsideEvent);\n    },\n    unmounted(el: ClickOutsideElement) {\n        if (el.clickOutsideEvent) {\n            document.removeEventListener('click', el.clickOutsideEvent);\n        }\n    },\n};","const isFuzzyMatch = (choiceValue: string, searchTerm: string): boolean => {\n    let searchIndex = 0;\n    for (const char of choiceValue) {\n        if (char.toLowerCase() === searchTerm[searchIndex]?.toLowerCase()) {\n            searchIndex++;\n        }\n        if (searchIndex === searchTerm.length) {\n            return true;\n        }\n    }\n    return false;\n};\n\n\nexport const fuzzySearch = <T>(\n    choices: T[],\n    key: keyof T,\n    searchTerm: string,\n): T[] => {\n    if (!searchTerm.trim()) {\n        return choices;\n    }\n\n    const normalizedSearchTerm = searchTerm.toLowerCase();\n\n    return choices\n        .filter(choice => {\n            const value = String(choice[key]);\n\n            return isFuzzyMatch(value.toLowerCase(), normalizedSearchTerm)\n        })\n        .sort((a, b) => {\n            const aValue =  String(a[key]).toLowerCase();\n            const bValue = String(b[key]).toLowerCase();\n\n            if (aValue === normalizedSearchTerm) return -1;\n            if (bValue === normalizedSearchTerm) return 1;\n\n            if (aValue.startsWith(normalizedSearchTerm) && !bValue.startsWith(normalizedSearchTerm))\n                return -1;\n            if (!aValue.startsWith(normalizedSearchTerm) && bValue.startsWith(normalizedSearchTerm))\n                return 1;\n\n            return aValue.length - bValue.length;\n        });\n};\n","<script lang=\"ts\" setup>\nimport { ref, computed, type StyleValue, onMounted } from 'vue';\nimport clickOutside from '@/directives/clickOutside';\nimport { fuzzySearch } from '@/utils/search';\nimport styles from './Dropdown.module.scss';\n\nconst vClickOutside = clickOutside;\n\ninterface MenuItem {\n    text: string;\n    value: string;\n}\n\ninterface DropdownProps {\n    id: string;\n    label?: string;\n    modelValue?: string;\n    menuHeight?: number;\n    placeholder?: string;\n    addable?: boolean;\n    addButtonText?: string;\n    searchable?: boolean;\n    searchPlaceHolder?: string;\n    items: MenuItem[];\n    validateAddItem?: (item: string, items: MenuItem[]) => string | null;\n}\n\ninterface Emits {\n    (e: 'update:modelValue', value: string): void;\n    (e: 'add-error', error: string): void;\n    (e: 'item-added', item: MenuItem): void;\n    (e: 'select-item', item: MenuItem): void;\n}\n\nconst props = withDefaults(defineProps<DropdownProps>(), {\n    menuHeight: 154,\n    searchBar: false,\n    addItem: false,\n    validateAddItem: () => null,\n});\n\nconst emit = defineEmits<Emits>();\nconst dropdownRef = ref<HTMLDivElement>();\nconst menuRef = ref<HTMLDivElement>();\nconst isOpen = ref(true);\nconst selectedItem = ref<MenuItem | null>(null);\nconst searchQuery = ref('');\nconst errorMessage = ref<string | null>(null);\nconst menuPosition = ref({ x: 0, y: 0, width: 0, shouldOpenUp: false, height: props.menuHeight });\nconst filteredItems = ref([...props.items]);\nconst allItems = ref([...props.items]);\n\nconst calculateMenuPosition = () => {\n    if (!dropdownRef.value) {\n        return;\n    }\n\n    const { offsetTop: top, offsetLeft: left, offsetWidth: width } = dropdownRef.value;\n    const viewportHeight = window.innerHeight;\n    const bottom = top + dropdownRef.value.offsetHeight;\n    const shouldOpenUp = bottom + props.menuHeight > viewportHeight;\n\n    menuPosition.value = {\n        x: left + window.scrollX,\n        y: shouldOpenUp ? top + window.scrollY : bottom + window.scrollY,\n        width,\n        shouldOpenUp,\n        height: props.menuHeight,\n    };\n};\n\nconst toggleMenu = () => {\n    calculateMenuPosition();\n    isOpen.value = !isOpen.value;\n};\n\nconst resetSettings = () => {\n    errorMessage.value = null;\n    searchQuery.value = '';\n    filteredItems.value = [...allItems.value];\n};\n\nconst closeMenu = () => {\n    isOpen.value = false;\n\n    resetSettings();\n};\n\nconst selectItem = (item: MenuItem) => {\n    selectedItem.value = item;\n\n    emit('select-item', item);\n    emit('update:modelValue', item.value);\n\n    closeMenu();\n};\n\nconst addItem = () => {\n    const query = searchQuery.value.trim();\n    const error = props.validateAddItem(query, allItems.value);\n\n    if (error) {\n        errorMessage.value = error;\n\n        emit('add-error', error);\n\n        return;\n    }\n\n    const newItem: MenuItem = {\n        text: query,\n        value: query,\n    };\n\n    allItems.value.push(newItem);\n    resetSettings();\n\n    emit('item-added', newItem);\n};\n\nconst onSearch = () => {\n    filteredItems.value = fuzzySearch<MenuItem>(allItems.value, 'text', searchQuery.value);\n};\n\nconst onFocusSearch = () => {\n    errorMessage.value = '';\n};\n\nconst menuStyle = computed<Partial<StyleValue>>(() => ({\n    top: menuPosition.value.shouldOpenUp ? `${menuPosition.value.y - 10}px` : `${menuPosition.value.y}px`,\n    left: `${menuPosition.value.x}px`,\n    width: `${menuPosition.value.width}px`,\n    height: `${props.menuHeight}px`,\n}));\n\nonMounted(() => {\n    calculateMenuPosition();\n\n    if (props.modelValue) {\n        const defaultItem = allItems.value.find(item => item.value === props.modelValue);\n\n        if (defaultItem) {\n            selectedItem.value = defaultItem;\n        }\n    }\n});\n\nconst selectedValue = computed(() => (selectedItem.value ? selectedItem.value.text : ''));\n</script>\n\n<template>\n    <div\n        ref=\"dropdownRef\"\n        :class=\"styles.dropdown\">\n        <label\n            v-if=\"label\"\n            :class=\"styles.dropdown__label\"\n            :for=\"id\">\n            {{ label }}\n        </label>\n        <button\n            :class=\"[\n                styles.dropdown__valueContent, {\n                    [styles['dropdown__valueContent--open']]: isOpen,\n                },\n            ]\"\n            @click=\"toggleMenu\">\n            <span :class=\"styles.dropdown__value\">\n                {{ selectedValue }}\n            </span>\n            <span\n                v-if=\"placeholder && !selectedValue\"\n                :class=\"styles.dropdown__placeholder\">\n                {{ placeholder }}\n            </span>\n            <svg\n                fill=\"none\"\n                height=\"17\"\n                viewBox=\"0 0 16 17\"\n                width=\"16\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                :class=\"styles.dropdown__arrowIcon\">\n                <path\n                    d=\"M8 11.2021L4.5359 6.70215L11.4641 6.70215L8 11.2021Z\"\n                    fill=\"#91949F\" />\n            </svg>\n        </button>\n    </div>\n\n    <div\n        v-if=\"isOpen\"\n        ref=\"menuRef\"\n        :class=\"styles.menu\"\n        :style=\"menuStyle\"\n        v-click-outside=\"{ handler: closeMenu, exclude: [dropdownRef, menuRef] }\"\n        @click.prevent>\n        <div\n            v-if=\"props.searchable\"\n            :class=\"styles.menu__searchContainer\">\n            <div :class=\"styles.menu__searchInputWrap\">\n                <input\n                    type=\"text\"\n                    :class=\"[\n                        styles.menu__searchInput, {\n                            [styles['menu__searchInput--error']]: errorMessage,\n                        },\n                    ]\"\n                    :placeholder=\"searchPlaceHolder\"\n                    v-model=\"searchQuery\"\n                    @focus=\"onFocusSearch\"\n                    @input=\"onSearch\">\n                <p\n                    v-if=\"errorMessage\"\n                    :class=\"styles.menu__errorMessage\">\n                    {{ errorMessage }}\n                </p>\n            </div>\n            <button\n                v-if=\"props.addable\"\n                :class=\"styles.menu__addButton\"\n                @click=\"addItem\">\n                {{ addButtonText }}\n            </button>\n        </div>\n        <ul :class=\"styles.menu__itemContainer\">\n            <li\n                v-for=\"(item) in filteredItems\"\n                :key=\"item.value\"\n                :class=\"[\n                    styles.menu__item, {\n                        [styles['menu__item--active']]: selectedItem && item.value === selectedItem.value,\n                    },\n                ]\"\n                @click=\"selectItem(item)\">\n                {{ item.text }}\n            </li>\n        </ul>\n    </div>\n</template>\n","import { defineAsyncComponent } from 'vue';\n\nconst iconMap = {\n  FilledErrorBox: defineAsyncComponent(() => import('./FilledErrorBox.vue')),\n  LineCheck: defineAsyncComponent(() => import('./LineCheck.vue')),\n  FilledCheckCircle: defineAsyncComponent(() => import('./FilledCheckCircle.vue')),\n  LoadingCircle: defineAsyncComponent(() => import('./LoadingCircle.vue')),\n  FilledInfoCircle: defineAsyncComponent(() => import('./FilledInfoCircle.vue')),\n  SmartIcon: defineAsyncComponent(() => import('./SmartIcon.vue')),\n  FilledCautionTriangle: defineAsyncComponent(() => import('./FilledCautionTriangle.vue')),\n};\n\nexport default iconMap;\n","<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport iconMap from '@/components/Icon/icons';\nimport type { IconNames } from '@/components/Icon/types';\n\ninterface IconProps {\n    name: IconNames;\n    size?: 16 | 24;\n    color?: string;\n}\n\nconst props = withDefaults(defineProps<IconProps>(), {\n    size: 16,\n});\n\nconst iconSize = computed(() => (typeof props.size === 'number' ? `${props.size}px` : props.size));\n</script>\n\n<template>\n    <component\n        :is=\"iconMap[name]\"\n        class=\"icon\"\n        :style=\"{ width: iconSize, height: iconSize, fill: props.color || 'currentColor' }\" />\n</template>\n\n<style scoped>\n.icon {\n  display: inline-block;\n  line-height: 0;\n  vertical-align: middle;\n}\n</style>\n","<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport Icon from '@/components/Icon/Icon.vue';\nimport type { IconNames } from '@/components/Icon/types';\nimport styles from './OnPageMessage.module.scss';\n\ninterface OnPageMessageProps {\n    variant?: 'default' | 'warning' | 'alert' | 'success';\n    text: string;\n}\n\nconst props = withDefaults(defineProps<OnPageMessageProps>(), {\n    variant: 'default',\n});\n\nconst IconName = computed<IconNames>(() => {\n    switch (props.variant) {\n        case 'alert': return 'FilledErrorBox';\n        case 'warning': return 'FilledCautionTriangle';\n        case 'success': return 'FilledCheckCircle';\n\n        default: return 'FilledInfoCircle';\n    }\n});\n</script>\n\n<template>\n    <div\n        :class=\"[\n            styles.container,\n            styles[`container__${variant}`],\n        ]\">\n        <Icon\n            :name=\"IconName\"\n            :size=\"24\" />\n        <span :class=\"styles.container__text\">{{ text }}</span>\n    </div>\n</template>\n","<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport type { IconNames } from '@/components/Icon/types';\nimport { Icon } from '@/index';\nimport styles from './SegmentButton.module.scss';\n\ninterface SegmentType {\n    value: string;\n    label: string;\n    disabled?: boolean;\n    icon?: IconNames;\n}\n\ninterface SegmentButtonProps {\n    color: 'primary' | 'secondary' | 'danger' | 'warning' | 'smart';\n    size?: 'default' | 'small';\n    align?: 'vertical' | 'horizontal';\n    disabled?: boolean;\n    segments: SegmentType[];\n    fill?: boolean;\n}\n\nconst props = withDefaults(defineProps<SegmentButtonProps>(), {\n    loadingStatus: false,\n    successStatus: false,\n    disabled: false,\n    size: 'default',\n    align: 'horizontal',\n});\n\nconst emit = defineEmits<{\n    click: [event: SegmentType['value']];\n}>();\n\nconst selected = ref<string>('');\n\nconst setSelect = (segment: SegmentType) => {\n    if (props.disabled || segment.disabled) {\n        return;\n    }\n\n    selected.value = segment.value;\n\n    emit('click', segment.value);\n};\n</script>\n\n<template>\n    <div\n        :class=\"[\n            styles.segmentGroup,\n            styles[`segmentGroup--${align}`],\n            { [styles.fill]: fill },\n        ]\">\n        <button\n            v-for=\"segment in segments\"\n            :key=\"segment.value\"\n            :class=\"[\n                styles.button,\n                styles[`button--${color}`],\n                styles[`button__size_${size}`],\n                styles.fill,\n                {\n                    [styles[`button--selected`]]: segment.value === selected,\n                },\n            ]\"\n            :disabled=\"segment.disabled || props.disabled\"\n            @click=\"setSelect(segment)\">\n            <Icon\n                v-if=\"segment.icon\"\n                :name=\"segment.icon\" />\n            <span\n                v-if=\"segment.label\"\n                :class=\"styles.button__label\">\n                {{ segment.label }}\n            </span>\n        </button>\n    </div>\n</template>\n","<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue';\nimport styles from './TextInput.module.scss';\n\nexport interface Props {\n    id: string;\n    name: string;\n    modelValue: string | number;\n    label?: string;\n    placeholder?: string;\n    maxLength?: number;\n    maxHeight?: number;\n    error?: string;\n    multiline?: boolean;\n    autoGrow?: boolean;\n    counter?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n    label: '',\n    placeholder: '',\n    maxLength: undefined,\n    maxHeight: undefined,\n    error: '',\n    multiline: false,\n    autoGrow: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [Props['modelValue']];\n    input: [event: Event];\n    change: [event: Event];\n    paste: [event: ClipboardEvent];\n    focus: [event: FocusEvent];\n    blur: [event: FocusEvent];\n}>();\n\nconst textareaRef = ref<HTMLTextAreaElement | null>(null);\n\nconst autoGrow = () => {\n    if (props.autoGrow && textareaRef.value) {\n        textareaRef.value.style.height = '';\n\n        const newHeight = Math.min(textareaRef.value.scrollHeight, props.maxHeight || textareaRef.value.scrollHeight);\n\n        textareaRef.value.style.height = `${newHeight}px`;\n    }\n};\n\nconst handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement | HTMLTextAreaElement;\n\n    emit('input', event);\n    emit('update:modelValue', target.value);\n\n    autoGrow();\n};\n\nonMounted(() => {\n    autoGrow();\n});\n</script>\n\n<template>\n    <div :class=\"styles.wrapper\">\n        <label\n            v-if=\"label\"\n            :class=\"styles.wrapper__label\"\n            :for=\"id\">\n            {{ label }}\n        </label>\n        <template v-if=\"multiline\">\n            <textarea\n                :id=\"id\"\n                ref=\"textareaRef\"\n                :class=\"[\n                    styles.wrapper__field, {\n                        [styles['wrapper--error']]: error,\n                    },\n                ]\"\n                :maxlength=\"maxLength\"\n                :name=\"name\"\n                :placeholder=\"placeholder\"\n                :style=\"maxHeight ? { maxHeight: `${maxHeight}px` } : undefined\"\n                :value=\"modelValue\"\n                @blur=\"emit('blur', $event)\"\n                @change=\"$emit('change', $event)\"\n                @focus=\"emit('focus', $event)\"\n                @input=\"handleInput\"\n                @paste=\"emit('paste', $event)\" />\n        </template>\n        <template v-else>\n            <input\n                :id=\"id\"\n                type=\"text\"\n                :class=\"[\n                    styles.wrapper__field, {\n                        [styles['wrapper--error']]: error,\n                    },\n                ]\"\n                :maxlength=\"maxLength\"\n                :name=\"name\"\n                :placeholder=\"placeholder\"\n                :value=\"modelValue\"\n                @blur=\"emit('blur', $event)\"\n                @change=\"$emit('change', $event)\"\n                @focus=\"emit('focus', $event)\"\n                @input=\"handleInput\"\n                @paste=\"emit('paste', $event)\">\n        </template>\n\n        <div :class=\"styles.wrapper__bottom\">\n            <div\n                v-if=\"error\"\n                :class=\"styles.wrapper__errorMessage\">\n                {{ error }}\n            </div>\n            <div\n                v-if=\"counter\"\n                :class=\"styles.wrapper__counter\">\n                {{ modelValue?.toString().length || 0 }}\n            </div>\n        </div>\n    </div>\n</template>\n"],"names":["props","__props","emit","__emit","onClick","event","leftIcon","computed","clickOutside","el","binding","element","isFuzzyMatch","choiceValue","searchTerm","searchIndex","char","_a","fuzzySearch","choices","key","normalizedSearchTerm","choice","value","b","aValue","bValue","vClickOutside","dropdownRef","ref","menuRef","isOpen","selectedItem","searchQuery","errorMessage","menuPosition","filteredItems","allItems","calculateMenuPosition","top","left","width","viewportHeight","bottom","shouldOpenUp","toggleMenu","resetSettings","closeMenu","selectItem","item","addItem","query","error","newItem","onSearch","onFocusSearch","menuStyle","onMounted","defaultItem","selectedValue","iconMap","defineAsyncComponent","iconSize","IconName","selected","setSelect","segment","textareaRef","autoGrow","newHeight","handleInput","target"],"mappings":"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"}

package/dist/index.d.ts

@@ -29,15 +29,16 @@ declare interface ButtonProps {
 }
 
 export declare const DropdownMenu: DefineComponent<DropdownProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+"update:modelValue": (value: string) => any;
 "add-error": (error: string) => any;
 "item-added": (item: MenuItem) => any;
 "select-item": (item: MenuItem) => any;
 }, string, PublicProps, Readonly<DropdownProps> & Readonly<{
+"onUpdate:modelValue"?: ((value: string) => any) | undefined;
 "onAdd-error"?: ((error: string) => any) | undefined;
 "onItem-added"?: ((item: MenuItem) => any) | undefined;
 "onSelect-item"?: ((item: MenuItem) => any) | undefined;
 }>, {
-defaultSelected: string;
 menuHeight: number;
 validateAddItem: (item: string, items: MenuItem[]) => string | null;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
@@ -48,7 +49,7 @@ menuRef: HTMLDivElement;
 declare interface DropdownProps {
     id: string;
     label?: string;
-    defaultSelected?: string;
+    modelValue?: string;
     menuHeight?: number;
     placeholder?: string;
     addable?: boolean;
@@ -141,12 +142,14 @@ blur: (event: FocusEvent) => any;
 change: (event: Event) => any;
 focus: (event: FocusEvent) => any;
 paste: (event: ClipboardEvent) => any;
+"update:modelValue": (args_0: string | number) => any;
 }, string, PublicProps, Readonly<Props> & Readonly<{
 onInput?: ((event: Event) => any) | undefined;
 onBlur?: ((event: FocusEvent) => any) | undefined;
 onChange?: ((event: Event) => any) | undefined;
 onFocus?: ((event: FocusEvent) => any) | undefined;
 onPaste?: ((event: ClipboardEvent) => any) | undefined;
+"onUpdate:modelValue"?: ((args_0: string | number) => any) | undefined;
 }>, {
 label: string;
 error: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/ab-components",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "files": [
     "dist"

package/dist/index-BfxawNec.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-BfxawNec.js","sources":["../src/components/Button/Button.vue","../src/directives/clickOutside.ts","../src/utils/search.ts","../src/components/Dropdown/DropdownMenu.vue","../src/components/Icon/icons/index.ts","../src/components/Icon/Icon.vue","../src/components/OnPageMessage/OnPageMessage.vue","../src/components/SegmentButton/SegmentButton.vue","../src/components/TextInput/TextInput.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport type { IconNames } from '@/components/Icon/types';\nimport { Icon } from '@/index';\nimport styles from './Button.module.scss';\n\ninterface ButtonProps {\n    variant: 'solid' | 'ghost' | 'text' | 'outline';\n    color: 'primary' | 'subtle-primary' | 'secondary' | 'danger' | 'warning' | 'smart';\n    size?: 'default' | 'small';\n    leftIconName?: IconNames;\n    rightIconName?: IconNames;\n    loadingStatus?: boolean;\n    successStatus?: boolean;\n    label?: string;\n    disabled?: boolean;\n    fill?: boolean;\n}\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n    loadingStatus: false,\n    successStatus: false,\n    disabled: false,\n    fill: false,\n    size: 'default',\n});\n\nconst emit = defineEmits<{\n    click: [event: MouseEvent];\n}>();\n\nconst onClick = (event: MouseEvent) => {\n    if (props.disabled) {\n        return;\n    }\n\n    emit('click', event);\n};\n\nconst leftIcon = computed<IconNames | undefined>(() => {\n    if (props.loadingStatus) {\n        return 'LoadingCircle';\n    } else if (props.successStatus) {\n        return 'LineCheck';\n    }\n\n    return props.leftIconName;\n});\n</script>\n\n<template>\n    <button\n        :class=\"[\n            styles.button,\n            styles[`button__${variant}`],\n            styles[`button__${variant}-${color}`],\n            styles[`button__size_${size}`],\n            { [styles.fill]: fill },\n        ]\"\n        :disabled=\"props.disabled\"\n        @click=\"onClick\">\n        <Icon\n            v-if=\"leftIcon\"\n            :name=\"leftIcon\" />\n        <span\n            v-if=\"label\"\n            :class=\"styles.button__label\">\n            {{ label }}\n        </span>\n        <Icon\n            v-if=\"rightIconName\"\n            :name=\"rightIconName\" />\n    </button>\n</template>\n","import type { DirectiveBinding } from 'vue';\n\ninterface ClickOutsideElement extends HTMLElement {\n    clickOutsideEvent?: (event: Event) => void;\n}\n\nexport default {\n    mounted(el: ClickOutsideElement, binding: DirectiveBinding<{ handler: () => void; exclude?: HTMLElement[] }>) {\n        el.clickOutsideEvent = (event: Event) => {\n            const isClickInside = [el, ...(binding.value.exclude || [])].some(element => {\n                return element && (element === event.target || element.contains(event.target as Node))\n            });\n\n            if (!isClickInside) {\n                binding.value.handler(); // Close handler\n            }\n        };\n\n        document.addEventListener('click', el.clickOutsideEvent);\n    },\n    unmounted(el: ClickOutsideElement) {\n        if (el.clickOutsideEvent) {\n            document.removeEventListener('click', el.clickOutsideEvent);\n        }\n    },\n};","const isFuzzyMatch = (choiceValue: string, searchTerm: string): boolean => {\n    let searchIndex = 0;\n    for (const char of choiceValue) {\n        if (char.toLowerCase() === searchTerm[searchIndex]?.toLowerCase()) {\n            searchIndex++;\n        }\n        if (searchIndex === searchTerm.length) {\n            return true;\n        }\n    }\n    return false;\n};\n\n\nexport const fuzzySearch = <T>(\n    choices: T[],\n    key: keyof T,\n    searchTerm: string,\n): T[] => {\n    if (!searchTerm.trim()) {\n        return choices;\n    }\n\n    const normalizedSearchTerm = searchTerm.toLowerCase();\n\n    return choices\n        .filter(choice => {\n            const value = String(choice[key]);\n\n            return isFuzzyMatch(value.toLowerCase(), normalizedSearchTerm)\n        })\n        .sort((a, b) => {\n            const aValue =  String(a[key]).toLowerCase();\n            const bValue = String(b[key]).toLowerCase();\n\n            if (aValue === normalizedSearchTerm) return -1;\n            if (bValue === normalizedSearchTerm) return 1;\n\n            if (aValue.startsWith(normalizedSearchTerm) && !bValue.startsWith(normalizedSearchTerm))\n                return -1;\n            if (!aValue.startsWith(normalizedSearchTerm) && bValue.startsWith(normalizedSearchTerm))\n                return 1;\n\n            return aValue.length - bValue.length;\n        });\n};\n","<script lang=\"ts\" setup>\nimport { ref, computed, type StyleValue, onMounted } from 'vue';\nimport clickOutside from '@/directives/clickOutside';\nimport { fuzzySearch } from '@/utils/search';\nimport styles from './Dropdown.module.scss';\n\nconst vClickOutside = clickOutside;\n\ninterface MenuItem {\n    text: string;\n    value: string;\n}\n\ninterface DropdownProps {\n    id: string;\n    label?: string;\n    defaultSelected?: string;\n    menuHeight?: number;\n    placeholder?: string;\n    addable?: boolean;\n    addButtonText?: string;\n    searchable?: boolean;\n    searchPlaceHolder?: string;\n    items: MenuItem[];\n    validateAddItem?: (item: string, items: MenuItem[]) => string | null;\n}\n\ninterface Emits {\n    (e: 'add-error', error: string): void;\n    (e: 'item-added', item: MenuItem): void;\n    (e: 'select-item', item: MenuItem): void;\n}\n\nconst props = withDefaults(defineProps<DropdownProps>(), {\n    menuHeight: 154,\n    searchBar: false,\n    addItem: false,\n    defaultSelected: '',\n    validateAddItem: () => null,\n});\n\nconst emit = defineEmits<Emits>();\nconst dropdownRef = ref<HTMLDivElement>();\nconst menuRef = ref<HTMLDivElement>();\nconst isOpen = ref(true);\nconst selectedItem = ref<MenuItem | null>(null);\nconst searchQuery = ref('');\nconst errorMessage = ref<string | null>(null);\nconst menuPosition = ref({ x: 0, y: 0, width: 0, shouldOpenUp: false, height: props.menuHeight });\nconst filteredItems = ref([...props.items]);\nconst allItems = ref([...props.items]);\n\nconst calculateMenuPosition = () => {\n    if (!dropdownRef.value) {\n        return;\n    }\n\n    const { offsetTop: top, offsetLeft: left, offsetWidth: width } = dropdownRef.value;\n    const viewportHeight = window.innerHeight;\n    const bottom = top + dropdownRef.value.offsetHeight;\n    const shouldOpenUp = bottom + props.menuHeight > viewportHeight;\n\n    menuPosition.value = {\n        x: left + window.scrollX,\n        y: shouldOpenUp ? top + window.scrollY : bottom + window.scrollY,\n        width,\n        shouldOpenUp,\n        height: props.menuHeight,\n    };\n};\n\nconst toggleMenu = () => {\n    calculateMenuPosition();\n    isOpen.value = !isOpen.value;\n};\n\nconst resetSettings = () => {\n    errorMessage.value = null;\n    searchQuery.value = '';\n    filteredItems.value = [...allItems.value];\n};\n\nconst closeMenu = () => {\n    isOpen.value = false;\n\n    resetSettings();\n};\n\nconst selectItem = (item: MenuItem) => {\n    selectedItem.value = item;\n    searchQuery.value = '';\n\n    closeMenu();\n\n    emit('select-item', item);\n};\n\nconst addItem = () => {\n    const query = searchQuery.value.trim();\n    const error = props.validateAddItem(query, allItems.value);\n\n    if (error) {\n        errorMessage.value = error;\n\n        emit('add-error', error);\n\n        return;\n    }\n\n    const newItem: MenuItem = {\n        text: query,\n        value: query,\n    };\n\n    allItems.value.push(newItem);\n    resetSettings();\n\n    emit('item-added', newItem);\n};\n\nconst onSearch = () => {\n    filteredItems.value = fuzzySearch<MenuItem>(allItems.value, 'text', searchQuery.value);\n};\n\nconst onFocusSearch = () => {\n    errorMessage.value = '';\n};\n\nconst menuStyle = computed<Partial<StyleValue>>(() => ({\n    top: menuPosition.value.shouldOpenUp ? `${menuPosition.value.y - 10}px` : `${menuPosition.value.y}px`,\n    left: `${menuPosition.value.x}px`,\n    width: `${menuPosition.value.width}px`,\n    height: `${props.menuHeight}px`,\n}));\n\nonMounted(() => {\n    calculateMenuPosition();\n\n    if (props.defaultSelected) {\n        const defaultItem = allItems.value.find(item => item.value === props.defaultSelected);\n\n        if (defaultItem) {\n            selectedItem.value = defaultItem;\n            emit('select-item', defaultItem);\n        }\n    }\n});\n\nconst selectedValue = computed(() => (selectedItem.value ? selectedItem.value.text : ''));\n</script>\n\n<template>\n    <div\n        ref=\"dropdownRef\"\n        :class=\"styles.dropdown\">\n        <label\n            v-if=\"label\"\n            :class=\"styles.dropdown__label\"\n            :for=\"id\">\n            {{ label }}\n        </label>\n        <button\n            :class=\"[\n                styles.dropdown__valueContent, {\n                    [styles['dropdown__valueContent--open']]: isOpen,\n                },\n            ]\"\n            @click=\"toggleMenu\">\n            <span :class=\"styles.dropdown__value\">\n                {{ selectedValue }}\n            </span>\n            <span\n                v-if=\"placeholder && !selectedValue\"\n                :class=\"styles.dropdown__placeholder\">\n                {{ placeholder }}\n            </span>\n            <svg\n                fill=\"none\"\n                height=\"17\"\n                viewBox=\"0 0 16 17\"\n                width=\"16\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                :class=\"styles.dropdown__arrowIcon\">\n                <path\n                    d=\"M8 11.2021L4.5359 6.70215L11.4641 6.70215L8 11.2021Z\"\n                    fill=\"#91949F\" />\n            </svg>\n        </button>\n    </div>\n\n    <div\n        v-if=\"isOpen\"\n        ref=\"menuRef\"\n        :class=\"styles.menu\"\n        :style=\"menuStyle\"\n        v-click-outside=\"{ handler: closeMenu, exclude: [dropdownRef, menuRef] }\"\n        @click.prevent>\n        <div\n            v-if=\"props.searchable\"\n            :class=\"styles.menu__searchContainer\">\n            <div :class=\"styles.menu__searchInputWrap\">\n                <input\n                    type=\"text\"\n                    :class=\"[\n                        styles.menu__searchInput, {\n                            [styles['menu__searchInput--error']]: errorMessage,\n                        },\n                    ]\"\n                    :placeholder=\"searchPlaceHolder\"\n                    v-model=\"searchQuery\"\n                    @focus=\"onFocusSearch\"\n                    @input=\"onSearch\">\n                <p\n                    v-if=\"errorMessage\"\n                    :class=\"styles.menu__errorMessage\">\n                    {{ errorMessage }}\n                </p>\n            </div>\n            <button\n                v-if=\"props.addable\"\n                :class=\"styles.menu__addButton\"\n                @click=\"addItem\">\n                {{ addButtonText }}\n            </button>\n        </div>\n        <ul :class=\"styles.menu__itemContainer\">\n            <li\n                v-for=\"(item) in filteredItems\"\n                :key=\"item.value\"\n                :class=\"[\n                    styles.menu__item, {\n                        [styles['menu__item--active']]: selectedItem && item.value === selectedItem.value,\n                    },\n                ]\"\n                @click=\"selectItem(item)\">\n                {{ item.text }}\n            </li>\n        </ul>\n    </div>\n</template>\n","import { defineAsyncComponent } from 'vue';\n\nconst iconMap = {\n  FilledErrorBox: defineAsyncComponent(() => import('./FilledErrorBox.vue')),\n  LineCheck: defineAsyncComponent(() => import('./LineCheck.vue')),\n  FilledCheckCircle: defineAsyncComponent(() => import('./FilledCheckCircle.vue')),\n  LoadingCircle: defineAsyncComponent(() => import('./LoadingCircle.vue')),\n  FilledInfoCircle: defineAsyncComponent(() => import('./FilledInfoCircle.vue')),\n  SmartIcon: defineAsyncComponent(() => import('./SmartIcon.vue')),\n  FilledCautionTriangle: defineAsyncComponent(() => import('./FilledCautionTriangle.vue')),\n};\n\nexport default iconMap;\n","<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport iconMap from '@/components/Icon/icons';\nimport type { IconNames } from '@/components/Icon/types';\n\ninterface IconProps {\n    name: IconNames;\n    size?: 16 | 24;\n    color?: string;\n}\n\nconst props = withDefaults(defineProps<IconProps>(), {\n    size: 16,\n});\n\nconst iconSize = computed(() => (typeof props.size === 'number' ? `${props.size}px` : props.size));\n</script>\n\n<template>\n    <component\n        :is=\"iconMap[name]\"\n        class=\"icon\"\n        :style=\"{ width: iconSize, height: iconSize, fill: props.color || 'currentColor' }\" />\n</template>\n\n<style scoped>\n.icon {\n  display: inline-block;\n  line-height: 0;\n  vertical-align: middle;\n}\n</style>\n","<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport Icon from '@/components/Icon/Icon.vue';\nimport type { IconNames } from '@/components/Icon/types';\nimport styles from './OnPageMessage.module.scss';\n\ninterface OnPageMessageProps {\n    variant?: 'default' | 'warning' | 'alert' | 'success';\n    text: string;\n}\n\nconst props = withDefaults(defineProps<OnPageMessageProps>(), {\n    variant: 'default',\n});\n\nconst IconName = computed<IconNames>(() => {\n    switch (props.variant) {\n        case 'alert': return 'FilledErrorBox';\n        case 'warning': return 'FilledCautionTriangle';\n        case 'success': return 'FilledCheckCircle';\n\n        default: return 'FilledInfoCircle';\n    }\n});\n</script>\n\n<template>\n    <div\n        :class=\"[\n            styles.container,\n            styles[`container__${variant}`],\n        ]\">\n        <Icon\n            :name=\"IconName\"\n            :size=\"24\" />\n        <span :class=\"styles.container__text\">{{ text }}</span>\n    </div>\n</template>\n","<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport type { IconNames } from '@/components/Icon/types';\nimport { Icon } from '@/index';\nimport styles from './SegmentButton.module.scss';\n\ninterface SegmentType {\n    value: string;\n    label: string;\n    disabled?: boolean;\n    icon?: IconNames;\n}\n\ninterface SegmentButtonProps {\n    color: 'primary' | 'secondary' | 'danger' | 'warning' | 'smart';\n    size?: 'default' | 'small';\n    align?: 'vertical' | 'horizontal';\n    disabled?: boolean;\n    segments: SegmentType[];\n    fill?: boolean;\n}\n\nconst props = withDefaults(defineProps<SegmentButtonProps>(), {\n    loadingStatus: false,\n    successStatus: false,\n    disabled: false,\n    size: 'default',\n    align: 'horizontal',\n});\n\nconst emit = defineEmits<{\n    click: [event: SegmentType['value']];\n}>();\n\nconst selected = ref<string>('');\n\nconst setSelect = (segment: SegmentType) => {\n    if (props.disabled || segment.disabled) {\n        return;\n    }\n\n    selected.value = segment.value;\n\n    emit('click', segment.value);\n};\n</script>\n\n<template>\n    <div\n        :class=\"[\n            styles.segmentGroup,\n            styles[`segmentGroup--${align}`],\n            { [styles.fill]: fill },\n        ]\">\n        <button\n            v-for=\"segment in segments\"\n            :key=\"segment.value\"\n            :class=\"[\n                styles.button,\n                styles[`button--${color}`],\n                styles[`button__size_${size}`],\n                styles.fill,\n                {\n                    [styles[`button--selected`]]: segment.value === selected,\n                },\n            ]\"\n            :disabled=\"segment.disabled || props.disabled\"\n            @click=\"setSelect(segment)\">\n            <Icon\n                v-if=\"segment.icon\"\n                :name=\"segment.icon\" />\n            <span\n                v-if=\"segment.label\"\n                :class=\"styles.button__label\">\n                {{ segment.label }}\n            </span>\n        </button>\n    </div>\n</template>\n","<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue';\nimport styles from './TextInput.module.scss';\n\nexport interface Props {\n    id: string;\n    name: string;\n    modelValue: string | number;\n    label?: string;\n    placeholder?: string;\n    maxLength?: number;\n    maxHeight?: number;\n    error?: string;\n    multiline?: boolean;\n    autoGrow?: boolean;\n    counter?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n    label: '',\n    placeholder: '',\n    maxLength: undefined,\n    maxHeight: undefined,\n    error: '',\n    multiline: false,\n    autoGrow: false,\n});\n\nconst emit = defineEmits<{\n    input: [event: Event];\n    change: [event: Event];\n    paste: [event: ClipboardEvent];\n    focus: [event: FocusEvent];\n    blur: [event: FocusEvent];\n}>();\n\nconst textareaRef = ref<HTMLTextAreaElement | null>(null);\n\nconst autoGrow = () => {\n    if (props.autoGrow && textareaRef.value) {\n        textareaRef.value.style.height = '';\n\n        const newHeight = Math.min(textareaRef.value.scrollHeight, props.maxHeight || textareaRef.value.scrollHeight);\n\n        textareaRef.value.style.height = `${newHeight}px`;\n    }\n};\n\nconst handleInput = (event: Event) => {\n    emit('input', event);\n\n    autoGrow();\n};\n\nonMounted(() => {\n    autoGrow();\n});\n</script>\n\n<template>\n    <div :class=\"styles.wrapper\">\n        <label\n            v-if=\"label\"\n            :class=\"styles.wrapper__label\"\n            :for=\"id\">\n            {{ label }}\n        </label>\n        <template v-if=\"multiline\">\n            <textarea\n                :id=\"id\"\n                ref=\"textareaRef\"\n                :class=\"[\n                    styles.wrapper__field, {\n                        [styles['wrapper--error']]: error,\n                    },\n                ]\"\n                :maxlength=\"maxLength\"\n                :name=\"name\"\n                :placeholder=\"placeholder\"\n                :style=\"maxHeight ? { maxHeight: `${maxHeight}px` } : undefined\"\n                :value=\"modelValue\"\n                @blur=\"emit('blur', $event)\"\n                @change=\"$emit('change', $event)\"\n                @focus=\"emit('focus', $event)\"\n                @input=\"handleInput\"\n                @paste=\"emit('paste', $event)\" />\n        </template>\n        <template v-else>\n            <input\n                :id=\"id\"\n                type=\"text\"\n                :class=\"[\n                    styles.wrapper__field, {\n                        [styles['wrapper--error']]: error,\n                    },\n                ]\"\n                :maxlength=\"maxLength\"\n                :name=\"name\"\n                :placeholder=\"placeholder\"\n                :value=\"modelValue\"\n                @blur=\"emit('blur', $event)\"\n                @change=\"$emit('change', $event)\"\n                @focus=\"emit('focus', $event)\"\n                @input=\"handleInput\"\n                @paste=\"emit('paste', $event)\">\n        </template>\n\n        <div :class=\"styles.wrapper__bottom\">\n            <div\n                v-if=\"error\"\n                :class=\"styles.wrapper__errorMessage\">\n                {{ error }}\n            </div>\n            <div\n                v-if=\"counter\"\n                :class=\"styles.wrapper__counter\">\n                {{ modelValue?.toString().length || 0 }}\n            </div>\n        </div>\n    </div>\n</template>\n"],"names":["props","__props","emit","__emit","onClick","event","leftIcon","computed","clickOutside","el","binding","element","isFuzzyMatch","choiceValue","searchTerm","searchIndex","char","_a","fuzzySearch","choices","key","normalizedSearchTerm","choice","value","b","aValue","bValue","vClickOutside","dropdownRef","ref","menuRef","isOpen","selectedItem","searchQuery","errorMessage","menuPosition","filteredItems","allItems","calculateMenuPosition","top","left","width","viewportHeight","bottom","shouldOpenUp","toggleMenu","resetSettings","closeMenu","selectItem","item","addItem","query","error","newItem","onSearch","onFocusSearch","menuStyle","onMounted","defaultItem","selectedValue","iconMap","defineAsyncComponent","iconSize","IconName","selected","setSelect","segment","textareaRef","autoGrow","newHeight","handleInput"],"mappings":"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"}