@useinsider/ab-components 0.0.7 → 0.0.8

package/dist/index-RMe94nFN.js

@@ -0,0 +1,550 @@
+import { defineComponent as M, computed as L, openBlock as r, createElementBlock as p, normalizeClass as _, unref as t, createBlock as S, createCommentVNode as h, toDisplayString as g, ref as z, reactive as U, onMounted as Y, watch as E, Fragment as N, createElementVNode as C, withDirectives as A, normalizeStyle as W, withModifiers as te, vModelText as ne, renderList as q, defineAsyncComponent as B, resolveDynamicComponent as oe, createVNode as le } from "vue";
+const ae = "_button__size_default_16zzc_1", _e = "_button__size_small_16zzc_8", re = "_button_16zzc_1", se = "_button__label_16zzc_193", ue = "_button__solid_16zzc_205", ie = "_fill_16zzc_1125", V = {
+  button__size_default: ae,
+  button__size_small: _e,
+  button: re,
+  button__label: se,
+  "button__solid-primary": "_button__solid-primary_16zzc_205",
+  "no-hover-effect": "_no-hover-effect_16zzc_212",
+  "button--selected": "_button--selected_16zzc_234",
+  "button__solid-subtle-primary": "_button__solid-subtle-primary_16zzc_241",
+  "button__solid-secondary": "_button__solid-secondary_16zzc_277",
+  "button__solid-danger": "_button__solid-danger_16zzc_313",
+  "button__solid-warning": "_button__solid-warning_16zzc_349",
+  "button__solid-smart": "_button__solid-smart_16zzc_385",
+  "button__ghost-primary": "_button__ghost-primary_16zzc_421",
+  "button__ghost-subtle-primary": "_button__ghost-subtle-primary_16zzc_457",
+  "button__ghost-secondary": "_button__ghost-secondary_16zzc_493",
+  "button__ghost-danger": "_button__ghost-danger_16zzc_529",
+  "button__ghost-warning": "_button__ghost-warning_16zzc_565",
+  "button__ghost-smart": "_button__ghost-smart_16zzc_601",
+  "button__text-primary": "_button__text-primary_16zzc_637",
+  "button__text-text": "_button__text-text_16zzc_673",
+  "button__text-subtle-primary": "_button__text-subtle-primary_16zzc_709",
+  "button__text-secondary": "_button__text-secondary_16zzc_745",
+  "button__text-danger": "_button__text-danger_16zzc_781",
+  "button__text-warning": "_button__text-warning_16zzc_817",
+  "button__text-smart": "_button__text-smart_16zzc_853",
+  "button__outline-primary": "_button__outline-primary_16zzc_889",
+  "button__outline-subtle-primary": "_button__outline-subtle-primary_16zzc_926",
+  "button__outline-secondary": "_button__outline-secondary_16zzc_963",
+  "button__outline-danger": "_button__outline-danger_16zzc_1000",
+  "button__outline-warning": "_button__outline-warning_16zzc_1037",
+  "button__outline-smart": "_button__outline-smart_16zzc_1074",
+  button__solid: ue,
+  fill: ie
+}, ce = ["disabled"], at = /* @__PURE__ */ M({
+  __name: "Button",
+  props: {
+    variant: {},
+    color: {},
+    size: { default: "default" },
+    leftIconName: {},
+    rightIconName: {},
+    loadingStatus: { type: Boolean, default: !1 },
+    successStatus: { type: Boolean, default: !1 },
+    label: {},
+    disabled: { type: Boolean, default: !1 },
+    fill: { type: Boolean, default: !1 }
+  },
+  emits: ["click"],
+  setup(s, { emit: u }) {
+    const o = s, n = u, l = (c) => {
+      o.disabled || n("click", c);
+    }, m = L(() => o.loadingStatus ? "LoadingCircle" : o.successStatus ? "LineCheck" : o.leftIconName);
+    return (c, e) => (r(), p("button", {
+      class: _([
+        t(V).button,
+        t(V)[`button__${c.variant}`],
+        t(V)[`button__${c.variant}-${c.color}`],
+        t(V)[`button__size_${c.size}`],
+        { [t(V).fill]: c.fill }
+      ]),
+      disabled: o.disabled,
+      onClick: l
+    }, [
+      m.value ? (r(), S(t(H), {
+        key: 0,
+        name: m.value
+      }, null, 8, ["name"])) : h("", !0),
+      c.label ? (r(), p("span", {
+        key: 1,
+        class: _(t(V).button__label)
+      }, g(c.label), 3)) : h("", !0),
+      c.rightIconName ? (r(), S(t(H), {
+        key: 2,
+        name: c.rightIconName
+      }, null, 8, ["name"])) : h("", !0)
+    ], 10, ce));
+  }
+}), de = {
+  mounted(s, u) {
+    s.clickOutsideEvent = (o) => {
+      [s, ...u.value.exclude || []].some((l) => l && (l === o.target || l.contains(o.target))) || u.value.handler();
+    }, document.addEventListener("click", s.clickOutsideEvent);
+  },
+  unmounted(s) {
+    s.clickOutsideEvent && document.removeEventListener("click", s.clickOutsideEvent);
+  }
+}, pe = (s, u) => {
+  var n;
+  let o = 0;
+  for (const l of s)
+    if (l.toLowerCase() === ((n = u[o]) == null ? void 0 : n.toLowerCase()) && o++, o === u.length)
+      return !0;
+  return !1;
+}, me = (s, u, o) => {
+  if (!o.trim())
+    return s;
+  const n = o.toLowerCase();
+  return s.filter((l) => {
+    const m = String(l[u]);
+    return pe(m.toLowerCase(), n);
+  }).sort((l, m) => {
+    const c = String(l[u]).toLowerCase(), e = String(m[u]).toLowerCase();
+    return c === n ? -1 : e === n ? 1 : c.startsWith(n) && !e.startsWith(n) ? -1 : !c.startsWith(n) && e.startsWith(n) ? 1 : c.length - e.length;
+  });
+}, be = "_dropdown_olekc_1", fe = "_menu_olekc_1", ve = "_dropdown__valueContent_olekc_182", he = "_dropdown__label_olekc_193", ge = "_dropdown__value_olekc_182", we = "_dropdown__placeholder_olekc_200", ze = "_dropdown__arrowIcon_olekc_208", ye = "_menu__searchContainer_olekc_223", ke = "_menu__searchInputWrap_olekc_227", Ce = "_menu__searchInput_olekc_227", Ie = "_menu__errorMessage_olekc_249", $e = "_menu__addButton_olekc_256", xe = "_menu__itemContainer_olekc_264", Be = "_menu__item_olekc_264", f = {
+  dropdown: be,
+  menu: fe,
+  dropdown__valueContent: ve,
+  "dropdown__valueContent--open": "_dropdown__valueContent--open_olekc_190",
+  dropdown__label: he,
+  dropdown__value: ge,
+  dropdown__placeholder: we,
+  dropdown__arrowIcon: ze,
+  menu__searchContainer: ye,
+  menu__searchInputWrap: ke,
+  menu__searchInput: Ce,
+  "menu__searchInput--error": "_menu__searchInput--error_olekc_246",
+  menu__errorMessage: Ie,
+  menu__addButton: $e,
+  menu__itemContainer: xe,
+  menu__item: Be,
+  "menu__item--active": "_menu__item--active_olekc_302"
+}, Ve = ["for"], Me = ["placeholder"], Le = ["onClick"], _t = /* @__PURE__ */ M({
+  __name: "DropdownMenu",
+  props: {
+    id: {},
+    label: {},
+    modelValue: { default: "" },
+    menuHeight: { default: 154 },
+    placeholder: {},
+    addable: { type: Boolean },
+    addButtonText: {},
+    searchable: { type: Boolean },
+    searchPlaceHolder: {},
+    items: {},
+    validateAddItem: { type: Function, default: () => null }
+  },
+  emits: ["update:modelValue", "add-error", "item-added", "select-item"],
+  setup(s, { emit: u }) {
+    const o = de, n = s, l = u, m = z(), c = z(), e = z(!1), a = z(null), b = z(""), d = z(null), I = z({ x: 0, y: 0, width: 0, shouldOpenUp: !1, height: n.menuHeight }), $ = U([...n.items]), x = U([...n.items]), P = () => {
+      if (!m.value)
+        return;
+      const { offsetTop: i, offsetLeft: v, offsetWidth: w } = m.value, F = window.innerHeight, G = i + m.value.offsetHeight, D = G + n.menuHeight > F;
+      I.value = {
+        x: v + window.scrollX,
+        y: D ? i + window.scrollY : G + window.scrollY,
+        width: w,
+        shouldOpenUp: D,
+        height: n.menuHeight
+      };
+    }, Q = () => {
+      P(), e.value = !e.value;
+    }, j = () => {
+      d.value = null, b.value = "", $.splice(0, $.length, ...x);
+    }, R = () => {
+      e.value = !1, j();
+    }, X = (i) => {
+      a.value = i, l("select-item", i), l("update:modelValue", i.value), R();
+    }, Z = () => {
+      const i = b.value.trim(), v = n.validateAddItem(i, x);
+      if (v) {
+        d.value = v, l("add-error", v);
+        return;
+      }
+      const w = {
+        text: i,
+        value: i
+      };
+      x.push(w), j(), l("item-added", w);
+    }, J = () => {
+      const i = me(x, "text", b.value);
+      $.splice(0, $.length, ...i);
+    }, K = () => {
+      d.value = "";
+    }, ee = L(() => ({
+      top: I.value.shouldOpenUp ? `${I.value.y - 10}px` : `${I.value.y}px`,
+      left: `${I.value.x}px`,
+      width: `${I.value.width}px`,
+      height: `${n.menuHeight}px`
+    }));
+    Y(() => {
+      if (P(), n.modelValue) {
+        const i = x.find((v) => v.value === n.modelValue);
+        i && (a.value = i);
+      }
+    });
+    const T = L(() => a.value ? a.value.text : "");
+    return E(
+      () => n.items,
+      (i) => {
+        x.splice(0, x.length, ...i), $.splice(0, $.length, ...i);
+      },
+      { deep: !0 }
+    ), (i, v) => (r(), p(N, null, [
+      C("div", {
+        ref_key: "dropdownRef",
+        ref: m,
+        class: _(t(f).dropdown)
+      }, [
+        i.label ? (r(), p("label", {
+          key: 0,
+          class: _(t(f).dropdown__label),
+          for: i.id
+        }, g(i.label), 11, Ve)) : h("", !0),
+        C("button", {
+          class: _([
+            t(f).dropdown__valueContent,
+            {
+              [t(f)["dropdown__valueContent--open"]]: e.value
+            }
+          ]),
+          onClick: Q
+        }, [
+          C("span", {
+            class: _(t(f).dropdown__value)
+          }, g(T.value), 3),
+          i.placeholder && !T.value ? (r(), p("span", {
+            key: 0,
+            class: _(t(f).dropdown__placeholder)
+          }, g(i.placeholder), 3)) : h("", !0),
+          (r(), p("svg", {
+            fill: "none",
+            height: "17",
+            viewBox: "0 0 16 17",
+            width: "16",
+            xmlns: "http://www.w3.org/2000/svg",
+            class: _(t(f).dropdown__arrowIcon)
+          }, v[2] || (v[2] = [
+            C("path", {
+              d: "M8 11.2021L4.5359 6.70215L11.4641 6.70215L8 11.2021Z",
+              fill: "#91949F"
+            }, null, -1)
+          ]), 2))
+        ], 2)
+      ], 2),
+      e.value ? A((r(), p("div", {
+        key: 0,
+        ref_key: "menuRef",
+        ref: c,
+        class: _(t(f).menu),
+        style: W(ee.value),
+        onClick: v[1] || (v[1] = te(() => {
+        }, ["prevent"]))
+      }, [
+        n.searchable ? (r(), p("div", {
+          key: 0,
+          class: _(t(f).menu__searchContainer)
+        }, [
+          C("div", {
+            class: _(t(f).menu__searchInputWrap)
+          }, [
+            A(C("input", {
+              type: "text",
+              class: _([
+                t(f).menu__searchInput,
+                {
+                  [t(f)["menu__searchInput--error"]]: d.value
+                }
+              ]),
+              placeholder: i.searchPlaceHolder,
+              "onUpdate:modelValue": v[0] || (v[0] = (w) => b.value = w),
+              onFocus: K,
+              onInput: J
+            }, null, 42, Me), [
+              [ne, b.value]
+            ]),
+            d.value ? (r(), p("p", {
+              key: 0,
+              class: _(t(f).menu__errorMessage)
+            }, g(d.value), 3)) : h("", !0)
+          ], 2),
+          n.addable ? (r(), p("button", {
+            key: 0,
+            class: _(t(f).menu__addButton),
+            onClick: Z
+          }, g(i.addButtonText), 3)) : h("", !0)
+        ], 2)) : h("", !0),
+        C("ul", {
+          class: _(t(f).menu__itemContainer)
+        }, [
+          (r(!0), p(N, null, q($, (w, F) => (r(), p("li", {
+            key: `${w.value}-${F}`,
+            class: _([
+              t(f).menu__item,
+              {
+                [t(f)["menu__item--active"]]: a.value && w.value === a.value.value
+              }
+            ]),
+            onClick: (G) => X(w)
+          }, g(w.text), 11, Le))), 128))
+        ], 2)
+      ], 6)), [
+        [t(o), { handler: R, exclude: [m.value, c.value] }]
+      ]) : h("", !0)
+    ], 64));
+  }
+}), Se = {
+  FilledErrorBox: B(() => import("./FilledErrorBox-cOfeWLjE.js")),
+  LineCheck: B(() => import("./LineCheck-Cqr6b9xw.js")),
+  FilledCheckCircle: B(() => import("./FilledCheckCircle-CTFsLEFA.js")),
+  LoadingCircle: B(() => import("./LoadingCircle-DBQ2KdHQ.js")),
+  FilledInfoCircle: B(() => import("./FilledInfoCircle-SQZ-tevO.js")),
+  SmartIcon: B(() => import("./SmartIcon-CHS1pqOk.js")),
+  FilledCautionTriangle: B(() => import("./FilledCautionTriangle-CH-ggpYw.js"))
+}, He = /* @__PURE__ */ M({
+  __name: "Icon",
+  props: {
+    name: {},
+    size: { default: 16 },
+    color: {}
+  },
+  setup(s) {
+    const u = s, o = L(() => typeof u.size == "number" ? `${u.size}px` : u.size);
+    return (n, l) => (r(), S(oe(t(Se)[n.name]), {
+      class: "icon",
+      style: W({ width: o.value, height: o.value, fill: u.color || "currentColor" })
+    }, null, 8, ["style"]));
+  }
+}), Fe = (s, u) => {
+  const o = s.__vccOpts || s;
+  for (const [n, l] of u)
+    o[n] = l;
+  return o;
+}, H = /* @__PURE__ */ Fe(He, [["__scopeId", "data-v-3e9c3b20"]]), Ge = "_container_2joy4_1", Oe = "_container__text_2joy4_187", Ee = "_container__default_2joy4_191", Ne = "_container__warning_2joy4_199", We = "_container__alert_2joy4_207", Pe = "_container__success_2joy4_215", O = {
+  container: Ge,
+  container__text: Oe,
+  container__default: Ee,
+  container__warning: Ne,
+  container__alert: We,
+  container__success: Pe
+}, rt = /* @__PURE__ */ M({
+  __name: "OnPageMessage",
+  props: {
+    variant: { default: "default" },
+    text: {}
+  },
+  setup(s) {
+    const u = s, o = L(() => {
+      switch (u.variant) {
+        case "alert":
+          return "FilledErrorBox";
+        case "warning":
+          return "FilledCautionTriangle";
+        case "success":
+          return "FilledCheckCircle";
+        default:
+          return "FilledInfoCircle";
+      }
+    });
+    return (n, l) => (r(), p("div", {
+      class: _([
+        t(O).container,
+        t(O)[`container__${n.variant}`]
+      ])
+    }, [
+      le(H, {
+        name: o.value,
+        size: 24
+      }, null, 8, ["name"]),
+      C("span", {
+        class: _(t(O).container__text)
+      }, g(n.text), 3)
+    ], 2));
+  }
+}), je = "_button__size_default_150xv_1", Re = "_button__size_small_150xv_8", Te = "_button_150xv_1", De = "_button__label_150xv_193", Ue = "_button__solid_150xv_330", Ae = "_segmentGroup_150xv_337", Ye = "_fill_150xv_359", y = {
+  button__size_default: je,
+  button__size_small: Re,
+  button: Te,
+  button__label: De,
+  "button--primary": "_button--primary_150xv_208",
+  "button--selected": "_button--selected_150xv_218",
+  "button--secondary": "_button--secondary_150xv_231",
+  "button--danger": "_button--danger_150xv_254",
+  "button--warning": "_button--warning_150xv_277",
+  "button--smart": "_button--smart_150xv_300",
+  button__solid: Ue,
+  segmentGroup: Ae,
+  "segmentGroup--vertical": "_segmentGroup--vertical_150xv_340",
+  "segmentGroup--horizontal": "_segmentGroup--horizontal_150xv_349",
+  fill: Ye
+}, qe = ["disabled", "onClick"], st = /* @__PURE__ */ M({
+  __name: "SegmentButton",
+  props: {
+    color: {},
+    size: { default: "default" },
+    align: { default: "horizontal" },
+    disabled: { type: Boolean, default: !1 },
+    segments: {},
+    fill: { type: Boolean },
+    modelValue: {}
+  },
+  emits: ["update:modelValue", "click"],
+  setup(s, { emit: u }) {
+    const o = s, n = u, l = z(o.modelValue || ""), m = (e) => {
+      o.disabled || e.disabled || (l.value = e.value, n("update:modelValue", e.value), n("click", e.value));
+    };
+    E(() => o.modelValue, (e) => {
+      l.value = e || "";
+    });
+    const c = z([...o.segments]);
+    return E(() => o.segments, (e) => {
+      c.value = [...e], e.some((a) => a.value === l.value) || (l.value = "", n("update:modelValue", ""));
+    }, { deep: !0 }), (e, a) => (r(), p("div", {
+      class: _([
+        t(y).segmentGroup,
+        t(y)[`segmentGroup--${e.align}`],
+        { [t(y).fill]: e.fill }
+      ])
+    }, [
+      (r(!0), p(N, null, q(c.value, (b, d) => (r(), p("button", {
+        key: `${b.value}-${d}`,
+        class: _([
+          t(y).button,
+          t(y)[`button--${e.color}`],
+          t(y)[`button__size_${e.size}`],
+          t(y).fill,
+          {
+            [t(y)["button--selected"]]: b.value === e.modelValue
+          }
+        ]),
+        disabled: b.disabled || o.disabled,
+        onClick: (I) => m(b)
+      }, [
+        b.icon ? (r(), S(t(H), {
+          key: 0,
+          name: b.icon
+        }, null, 8, ["name"])) : h("", !0),
+        b.label ? (r(), p("span", {
+          key: 1,
+          class: _(t(y).button__label)
+        }, g(b.label), 3)) : h("", !0)
+      ], 10, qe))), 128))
+    ], 2));
+  }
+}), Qe = "_wrapper_1pges_169", Xe = "_wrapper__field_1pges_174", Ze = "_wrapper__label_1pges_208", Je = "_wrapper__bottom_1pges_216", Ke = "_wrapper__errorMessage_1pges_220", et = "_wrapper__counter_1pges_225", k = {
+  wrapper: Qe,
+  wrapper__field: Xe,
+  wrapper__label: Ze,
+  wrapper__bottom: Je,
+  wrapper__errorMessage: Ke,
+  wrapper__counter: et,
+  "wrapper--error": "_wrapper--error_1pges_231"
+}, tt = ["for"], nt = ["id", "maxlength", "name", "placeholder", "value"], ot = ["id", "maxlength", "name", "placeholder", "value"], ut = /* @__PURE__ */ M({
+  __name: "TextInput",
+  props: {
+    id: {},
+    name: {},
+    modelValue: { default: "" },
+    label: { default: "" },
+    placeholder: { default: "" },
+    maxLength: { default: void 0 },
+    maxHeight: { default: void 0 },
+    error: { default: "" },
+    multiline: { type: Boolean, default: !1 },
+    autoGrow: { type: Boolean, default: !1 },
+    counter: { type: Boolean }
+  },
+  emits: ["update:modelValue", "input", "change", "paste", "focus", "blur"],
+  setup(s, { emit: u }) {
+    const o = s, n = u, l = z(null), m = () => {
+      if (o.autoGrow && l.value) {
+        l.value.style.height = "";
+        const e = Math.min(l.value.scrollHeight, o.maxHeight || l.value.scrollHeight);
+        l.value.style.height = `${e}px`;
+      }
+    }, c = (e) => {
+      const a = e.target;
+      n("input", e), n("update:modelValue", a.value), m();
+    };
+    return Y(() => {
+      m();
+    }), (e, a) => {
+      var b;
+      return r(), p("div", {
+        class: _(t(k).wrapper)
+      }, [
+        e.label ? (r(), p("label", {
+          key: 0,
+          class: _(t(k).wrapper__label),
+          for: e.id
+        }, g(e.label), 11, tt)) : h("", !0),
+        e.multiline ? (r(), p("textarea", {
+          key: 1,
+          id: e.id,
+          ref_key: "textareaRef",
+          ref: l,
+          class: _([
+            t(k).wrapper__field,
+            {
+              [t(k)["wrapper--error"]]: e.error
+            }
+          ]),
+          maxlength: e.maxLength,
+          name: e.name,
+          placeholder: e.placeholder,
+          style: W(e.maxHeight ? { maxHeight: `${e.maxHeight}px` } : void 0),
+          value: e.modelValue,
+          onBlur: a[0] || (a[0] = (d) => n("blur", d)),
+          onChange: a[1] || (a[1] = (d) => e.$emit("change", d)),
+          onFocus: a[2] || (a[2] = (d) => n("focus", d)),
+          onInput: c,
+          onPaste: a[3] || (a[3] = (d) => n("paste", d))
+        }, null, 46, nt)) : (r(), p("input", {
+          key: 2,
+          id: e.id,
+          type: "text",
+          class: _([
+            t(k).wrapper__field,
+            {
+              [t(k)["wrapper--error"]]: e.error
+            }
+          ]),
+          maxlength: e.maxLength,
+          name: e.name,
+          placeholder: e.placeholder,
+          value: e.modelValue,
+          onBlur: a[4] || (a[4] = (d) => n("blur", d)),
+          onChange: a[5] || (a[5] = (d) => e.$emit("change", d)),
+          onFocus: a[6] || (a[6] = (d) => n("focus", d)),
+          onInput: c,
+          onPaste: a[7] || (a[7] = (d) => n("paste", d))
+        }, null, 42, ot)),
+        C("div", {
+          class: _(t(k).wrapper__bottom)
+        }, [
+          e.error ? (r(), p("div", {
+            key: 0,
+            class: _(t(k).wrapper__errorMessage)
+          }, g(e.error), 3)) : h("", !0),
+          e.counter ? (r(), p("div", {
+            key: 1,
+            class: _(t(k).wrapper__counter)
+          }, g(((b = e.modelValue) == null ? void 0 : b.toString().length) || 0), 3)) : h("", !0)
+        ], 2)
+      ], 2);
+    };
+  }
+});
+export {
+  H as I,
+  Fe as _,
+  at as a,
+  _t as b,
+  rt as c,
+  st as d,
+  ut as e
+};
+//# sourceMappingURL=index-RMe94nFN.js.map

package/dist/index-RMe94nFN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-RMe94nFN.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, reactive, watch } 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    modelValue: '',\n    validateAddItem: () => null,\n});\n\nconst emit = defineEmits<Emits>();\nconst dropdownRef = ref<HTMLDivElement>();\nconst menuRef = ref<HTMLDivElement>();\nconst isOpen = ref(false);\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 = reactive([...props.items]);\nconst allItems = reactive([...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.splice(0, filteredItems.length, ...allItems);\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);\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.push(newItem);\n    resetSettings();\n\n    emit('item-added', newItem);\n};\n\nconst onSearch = () => {\n    const results = fuzzySearch<MenuItem>(allItems, 'text', searchQuery.value);\n\n    filteredItems.splice(0, filteredItems.length, ...results);\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.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\nwatch(\n    () => props.items,\n    newItems => {\n        allItems.splice(0, allItems.length, ...newItems);\n        filteredItems.splice(0, filteredItems.length, ...newItems);\n    },\n    { deep: true }\n);\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, index) in filteredItems\"\n                :key=\"`${item.value}-${index}`\"\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, watch } from 'vue';\nimport type { IconNames } from '@/components/Icon/types';\nimport { Icon } from '@/index';\nimport styles from './SegmentButton.module.scss';\n\nexport interface SegmentType {\n    value: string;\n    label: string;\n    disabled?: boolean;\n    icon?: IconNames;\n}\n\nexport interface 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    modelValue?: string;\n}\n\ninterface SegmentButtonEmits {\n    'update:modelValue': [value: string];\n    click: [value: SegmentType['value']];\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<SegmentButtonEmits>();\nconst selected = ref<string>(props.modelValue || '');\n\nconst setSelect = (segment: SegmentType) => {\n    if (props.disabled || segment.disabled) {\n        return;\n    }\n\n    selected.value = segment.value;\n    emit('update:modelValue', segment.value);\n    emit('click', segment.value);\n};\n\nwatch(() => props.modelValue, newValue => {\n    selected.value = newValue || '';\n});\n\nconst filteredSegments = ref<SegmentType[]>([...props.segments]);\n\nwatch(() => props.segments, newSegments => {\n    filteredSegments.value = [...newSegments];\n\n    if (!newSegments.some(segment => segment.value === selected.value)) {\n        selected.value = '';\n        emit('update:modelValue', '');\n    }\n}, { deep: true });\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, index) in filteredSegments\"\n            :key=\"`${segment.value}-${index}`\"\n            :class=\"[\n                styles.button,\n                styles[`button--${color}`],\n                styles[`button__size_${size}`],\n                styles.fill,\n                {\n                    [styles[`button--selected`]]: segment.value === modelValue,\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;\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    modelValue: '',\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","a","b","aValue","bValue","vClickOutside","dropdownRef","ref","menuRef","isOpen","selectedItem","searchQuery","errorMessage","menuPosition","filteredItems","reactive","allItems","calculateMenuPosition","top","left","width","viewportHeight","bottom","shouldOpenUp","toggleMenu","resetSettings","closeMenu","selectItem","item","addItem","query","error","newItem","onSearch","results","onFocusSearch","menuStyle","onMounted","defaultItem","selectedValue","watch","newItems","iconMap","defineAsyncComponent","iconSize","IconName","selected","setSelect","segment","newValue","filteredSegments","newSegments","textareaRef","autoGrow","newHeight","handleInput","target"],"mappings":"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"}

package/dist/index.d.ts

@@ -100,7 +100,7 @@ declare interface OnPageMessageProps {
 declare interface Props {
     id: string;
     name: string;
-    modelValue: string | number;
+    modelValue?: string;
     label?: string;
     placeholder?: string;
     maxLength?: number;
@@ -112,9 +112,11 @@ declare interface Props {
 }
 
 export declare const SegmentButton: DefineComponent<SegmentButtonProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-click: (event: string) => any;
+click: (value: string) => any;
+"update:modelValue": (value: string) => any;
 }, string, PublicProps, Readonly<SegmentButtonProps> & Readonly<{
-onClick?: ((event: string) => any) | undefined;
+onClick?: ((value: string) => any) | undefined;
+"onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
 size: "default" | "small";
 disabled: boolean;
@@ -128,6 +130,7 @@ declare interface SegmentButtonProps {
     disabled?: boolean;
     segments: SegmentType[];
     fill?: boolean;
+    modelValue?: string;
 }
 
 declare interface SegmentType {
@@ -143,18 +146,18 @@ blur: (event: FocusEvent) => any;
 change: (event: Event) => any;
 focus: (event: FocusEvent) => any;
 paste: (event: ClipboardEvent) => any;
-"update:modelValue": (args_0: string | number) => any;
+"update:modelValue": (args_0: string | undefined) => 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;
+"onUpdate:modelValue"?: ((args_0: string | undefined) => any) | undefined;
 }>, {
 label: string;
 error: string;
-modelValue: string | number;
+modelValue: string;
 placeholder: string;
 maxHeight: number;
 maxLength: number;

package/package.json

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