mhz-ui 1.0.5 → 1.0.7

package/dist/UiInput/UiInput.css

@@ -1 +1 @@
-._inputBlock_1boy2_1{position:relative;display:flex;width:100%;border-radius:16px}._inputBlock_1boy2_1[data-mode=select]{cursor:pointer}._inputBlock_1boy2_1[data-mode=select]:hover ._input_1boy2_1{border:1px solid var(--color-gray-dark-extra)}._input_1boy2_1{width:100%;height:40px;padding:0 16px;font-size:1rem;border:1px solid var(--color-gray);border-radius:16px;outline:none}._input_1boy2_1:hover{border:1px solid var(--color-gray-dark-extra)}._input_1boy2_1:focus{border:1px solid var(--color-primary)}._input_1boy2_1:disabled{color:var(--color-gray-dark-extra);background:var(--color-gray-light-extra);border-color:var(--color-transparent)}._input_1boy2_1::placeholder{color:var(--color-gray-dark-extra)}._input_1boy2_1[data-mode=select]{pointer-events:none}._input_1boy2_1[data-append-icon=true]{padding-right:40px}._icon_1boy2_44{position:absolute;top:calc(50% - 8px);right:16px}
+._inputBlock_h3kt9_1{position:relative;display:flex;width:100%;border-radius:16px}._inputBlock_h3kt9_1[data-mode=select]{cursor:pointer}._inputBlock_h3kt9_1[data-mode=select]:hover ._input_h3kt9_1{border:1px solid var(--color-gray-dark-extra)}._input_h3kt9_1{width:100%;height:40px;padding:0 16px;font-size:1rem;border:1px solid var(--color-gray);border-radius:16px;outline:none}._input_h3kt9_1:hover{border:1px solid var(--color-gray-dark-extra)}._input_h3kt9_1:focus{border:1px solid var(--color-primary)}._input_h3kt9_1:disabled{color:var(--color-gray-dark-extra);background:var(--color-gray-light-extra);border-color:var(--color-transparent)}._input_h3kt9_1::placeholder{color:var(--color-gray-dark-extra)}._input_h3kt9_1[data-mode=select]{pointer-events:none}._input_h3kt9_1[data-append-icon=true]{padding-right:40px}._input_h3kt9_1[data-center=true]{text-align:center}._icon_h3kt9_47{position:absolute;top:calc(50% - 8px);right:16px}

package/dist/UiInput/UiInput.d.ts

@@ -8,7 +8,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     mode: {
-        type: import("vue").PropType<"default" | "select" | "multiselect">;
+        type: import("vue").PropType<"default" | "select">;
         default: string;
     };
     appendIcon: {
@@ -18,6 +18,9 @@ declare const _default: import("vue").DefineComponent<{
     isFocus: {
         type: import("vue").PropType<boolean>;
     };
+    isCenter: {
+        type: import("vue").PropType<boolean>;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "toggle")[], "update:modelValue" | "toggle", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     isDisabled: {
         type: import("vue").PropType<boolean>;
@@ -27,7 +30,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     mode: {
-        type: import("vue").PropType<"default" | "select" | "multiselect">;
+        type: import("vue").PropType<"default" | "select">;
         default: string;
     };
     appendIcon: {
@@ -37,12 +40,15 @@ declare const _default: import("vue").DefineComponent<{
     isFocus: {
         type: import("vue").PropType<boolean>;
     };
+    isCenter: {
+        type: import("vue").PropType<boolean>;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onToggle?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: string | number | boolean | null;
-    mode: "default" | "select" | "multiselect";
+    mode: "default" | "select";
     appendIcon: FunctionalComponent<{}, {}, any>;
 }, {}>;
 export default _default;

package/dist/UiInput/UiInput.js

@@ -1,56 +1,58 @@
 import "./UiInput.css";
-import { defineComponent as p, ref as c, onMounted as m, nextTick as r, openBlock as s, createElementBlock as f, withKeys as y, normalizeClass as d, createElementVNode as _, mergeProps as b, createBlock as k, resolveDynamicComponent as B, createCommentVNode as g } from "vue";
+import { defineComponent as u, ref as c, onMounted as r, nextTick as m, openBlock as s, createElementBlock as f, withKeys as y, normalizeClass as d, createElementVNode as _, mergeProps as k, createBlock as B, resolveDynamicComponent as b, createCommentVNode as g } from "vue";
 import { _ as v } from "../_plugin-vue_export-helper-dad06003.js";
-const I = ["data-mode", "tabindex"], $ = ["value", "disabled", "data-mode", "data-append-icon", "tabindex"], V = /* @__PURE__ */ p({
+const I = ["data-mode", "tabindex"], C = ["value", "disabled", "data-mode", "data-center", "data-append-icon", "tabindex"], $ = /* @__PURE__ */ u({
   __name: "UiInput",
   props: {
     modelValue: { type: [String, Number, Boolean, null], default: "" },
     isDisabled: { type: Boolean },
     mode: { default: "default" },
     appendIcon: { type: [Function, Object], default: void 0 },
-    isFocus: { type: Boolean }
+    isFocus: { type: Boolean },
+    isCenter: { type: Boolean }
   },
   emits: ["update:modelValue", "toggle"],
-  setup(i, { emit: n }) {
+  setup(i, { emit: o }) {
     const e = i;
-    function u(o) {
-      n("update:modelValue", o.value);
+    function p(t) {
+      o("update:modelValue", t.value);
     }
     const l = c();
-    return m(async () => {
-      e.isFocus && (await r(), l.value?.focus());
-    }), (o, t) => (s(), f("div", {
-      onClick: t[1] || (t[1] = (a) => n("toggle")),
-      onKeydown: t[2] || (t[2] = y((a) => n("toggle"), ["space"])),
-      class: d(o.$style.inputBlock),
+    return r(async () => {
+      e.isFocus && (await m(), l.value?.focus());
+    }), (t, n) => (s(), f("div", {
+      onClick: n[1] || (n[1] = (a) => o("toggle")),
+      onKeydown: n[2] || (n[2] = y((a) => o("toggle"), ["space"])),
+      class: d(t.$style.inputBlock),
       "data-mode": e.mode,
       tabindex: e.mode === "default" ? "-1" : "0"
     }, [
-      _("input", b({
+      _("input", k({
         value: e.modelValue,
-        onInput: t[0] || (t[0] = (a) => u(a.target)),
+        onInput: n[0] || (n[0] = (a) => p(a.target)),
         disabled: e.isDisabled,
-        class: o.$style.input
-      }, o.$attrs, {
+        class: t.$style.input
+      }, t.$attrs, {
         ref_key: "input",
         ref: l,
         "data-mode": e.mode,
+        "data-center": e.isCenter,
         "data-append-icon": !!e.appendIcon,
         tabindex: e.mode === "default" ? "0" : "-1"
-      }), null, 16, $),
-      e.appendIcon ? (s(), k(B(e.appendIcon), {
+      }), null, 16, C),
+      e.appendIcon ? (s(), B(b(e.appendIcon), {
         key: 0,
-        class: d(o.$style.icon)
+        class: d(t.$style.icon)
       }, null, 8, ["class"])) : g("", !0)
     ], 42, I));
   }
-}), C = "_inputBlock_1boy2_1", x = "_input_1boy2_1", w = "_icon_1boy2_44", D = {
-  inputBlock: C,
+}), V = "_inputBlock_h3kt9_1", x = "_input_h3kt9_1", w = "_icon_h3kt9_47", D = {
+  inputBlock: V,
   input: x,
   icon: w
 }, F = {
   $style: D
-}, E = /* @__PURE__ */ v(V, [["__cssModules", F]]);
+}, h = /* @__PURE__ */ v($, [["__cssModules", F]]);
 export {
-  E as default
+  h as default
 };

package/dist/UiSearch/UiSearch.css

@@ -0,0 +1 @@
+._container_rimgb_1{position:relative;width:320px}._results_rimgb_6{position:absolute;z-index:2;display:flex;flex-direction:column;gap:8px;width:100%;max-height:320px;padding:16px;margin-top:8px;overflow-y:auto;background-color:var(--color-white);border-radius:16px;box-shadow:0 0 16px -8px var(--color-black-transparent)}._resultsInner_rimgb_22{display:flex;flex-direction:column;gap:4px}._type_rimgb_28{font-weight:700;text-transform:capitalize}._link_rimgb_33{display:flex;gap:4px;text-decoration:none}

package/dist/UiSearch/UiSearch.d.ts

@@ -0,0 +1,56 @@
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    searchScheme: {
+        type: import("vue").PropType<{
+            type: string;
+            labels: string[];
+            url: string;
+        }[]>;
+        required: true;
+    };
+    results: {
+        type: import("vue").PropType<{
+            [key: string]: {
+                _id?: string | undefined;
+            }[] | {
+                [key: string]: string;
+            }[];
+        }>;
+    };
+    isSuccess: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    searchScheme: {
+        type: import("vue").PropType<{
+            type: string;
+            labels: string[];
+            url: string;
+        }[]>;
+        required: true;
+    };
+    results: {
+        type: import("vue").PropType<{
+            [key: string]: {
+                _id?: string | undefined;
+            }[] | {
+                [key: string]: string;
+            }[];
+        }>;
+    };
+    isSuccess: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
+export default _default;

package/dist/UiSearch/UiSearch.js

@@ -0,0 +1,138 @@
+import "./UiSearch.css";
+import { openBlock as n, createElementBlock as l, createElementVNode as E, defineComponent as I, ref as S, computed as C, normalizeClass as g, createVNode as $, unref as N, withKeys as B, Fragment as i, createTextVNode as v, createCommentVNode as h, renderList as V, toDisplayString as b, createBlock as O, resolveDynamicComponent as T, withCtx as U } from "vue";
+import { RouterLink as Z } from "vue-router";
+import { o as L } from "../index-e9b7d99f.js";
+import R from "../UiInput/UiInput.js";
+import { _ as D } from "../_plugin-vue_export-helper-dad06003.js";
+const F = {
+  trailing: !0
+};
+function K(d, u = 25, e = {}) {
+  if (e = { ...F, ...e }, !Number.isFinite(u))
+    throw new TypeError("Expected `wait` to be a finite number");
+  let a, c, _ = [], s, m;
+  const p = (r, y) => (s = M(d, r, y), s.finally(() => {
+    if (s = null, e.trailing && m && !c) {
+      const t = p(r, m);
+      return m = null, t;
+    }
+  }), s);
+  return function(...r) {
+    return s ? (e.trailing && (m = r), s) : new Promise((y) => {
+      const t = !c && e.leading;
+      clearTimeout(c), c = setTimeout(() => {
+        c = null;
+        const f = e.leading ? a : p(this, r);
+        for (const o of _)
+          o(f);
+        _ = [];
+      }, u), t ? (a = p(this, r), y(a)) : _.push(y);
+    });
+  };
+}
+async function M(d, u, e) {
+  return await d.apply(u, e);
+}
+const P = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  fill: "none"
+}, A = /* @__PURE__ */ E("path", {
+  fill: "#dfdfdf",
+  d: "M13.5 15.338a.5.5 0 1 0 .737-.676l-.736.676Zm.737-.676-1.398-1.523-.737.676 1.399 1.523.736-.676ZM13.5 7.628c0 3.394-2.695 6.129-6 6.129v1c3.875 0 7-3.201 7-7.129h-1Zm-6 6.129c-3.305 0-6-2.735-6-6.129h-1c0 3.928 3.125 7.129 7 7.129v-1Zm-6-6.129c0-3.393 2.695-6.128 6-6.128v-1C3.625.5.5 3.7.5 7.628h1Zm6-6.128c3.305 0 6 2.735 6 6.128h1C14.5 3.701 11.375.5 7.5.5v1Z"
+}, null, -1), j = [
+  A
+];
+function x(d, u) {
+  return n(), l("svg", P, j);
+}
+const z = { render: x }, Y = /* @__PURE__ */ I({
+  __name: "UiSearch",
+  props: {
+    modelValue: {},
+    searchScheme: {},
+    results: {},
+    isSuccess: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(d, { emit: u }) {
+    const e = d, a = S(!1), c = K(async (t) => {
+      u("update:modelValue", t);
+    }, 300);
+    async function _(t) {
+      await c(t);
+    }
+    function s() {
+      a.value = !1;
+    }
+    function m() {
+      s(), u("update:modelValue", "");
+    }
+    const p = C(() => e.results ? Object.values(e.results).reduce((t, f) => t + f.length, 0) : !1), r = S();
+    L(r, () => {
+      s();
+    });
+    const y = C(() => window.IS_STORYBOOK ? "a" : Z);
+    return (t, f) => (n(), l("div", {
+      class: g(t.$style.container),
+      ref_key: "containerElement",
+      ref: r
+    }, [
+      $(R, {
+        modelValue: e.modelValue,
+        "onUpdate:modelValue": _,
+        appendIcon: N(z),
+        placeholder: "Search",
+        onClick: f[0] || (f[0] = (o) => a.value = !0),
+        onKeyup: B(s, ["esc"])
+      }, null, 8, ["modelValue", "appendIcon", "onKeyup"]),
+      a.value && e.modelValue.length ? (n(), l("div", {
+        key: 0,
+        class: g(t.$style.results)
+      }, [
+        e.modelValue.length < 3 ? (n(), l(i, { key: 0 }, [
+          v("Please enter 3 or more symbols")
+        ], 64)) : h("", !0),
+        e.modelValue.length > 2 && !e.isSuccess ? (n(), l(i, { key: 1 }, [
+          v("Loading...")
+        ], 64)) : h("", !0),
+        e.modelValue.length > 2 && !p.value && e.isSuccess ? (n(), l(i, { key: 2 }, [
+          v("No results")
+        ], 64)) : h("", !0),
+        e.modelValue.length > 2 && p.value ? (n(!0), l(i, { key: 3 }, V(e.searchScheme, (o) => (n(), l("div", {
+          key: o.type,
+          class: g(t.$style.resultsInner)
+        }, [
+          t.results?.[o.type]?.length ? (n(), l(i, { key: 0 }, [
+            E("div", {
+              class: g(t.$style.type)
+            }, b(o.type) + ":", 3),
+            (n(!0), l(i, null, V(t.results[o.type], (k) => (n(), O(T(y.value), {
+              key: k._id,
+              to: `${o.url}/${k._id}`,
+              onClick: m,
+              class: g(t.$style.link)
+            }, {
+              default: U(() => [
+                (n(!0), l(i, null, V(o.labels, (w) => (n(), l("span", { key: w }, b(k[w]), 1))), 128))
+              ]),
+              _: 2
+            }, 1032, ["to", "class"]))), 128))
+          ], 64)) : h("", !0)
+        ], 2))), 128)) : h("", !0)
+      ], 2)) : h("", !0)
+    ], 2));
+  }
+}), q = "_container_rimgb_1", G = "_results_rimgb_6", H = "_resultsInner_rimgb_22", J = "_type_rimgb_28", Q = "_link_rimgb_33", W = {
+  container: q,
+  results: G,
+  resultsInner: H,
+  type: J,
+  link: Q
+}, X = {
+  $style: W
+}, re = /* @__PURE__ */ D(Y, [["__cssModules", X]]);
+export {
+  re as default
+};

package/dist/UiSelect/UiSelect.js

@@ -1,120 +1,41 @@
 import "./UiSelect.css";
-import { getCurrentScope as N, onScopeDispose as R, unref as O, watch as T, openBlock as h, createElementBlock as y, createElementVNode as B, defineComponent as D, ref as w, computed as K, normalizeClass as E, createVNode as S, createCommentVNode as A, Fragment as W, renderList as q, withKeys as $, toDisplayString as z } from "vue";
-import L from "../UiInput/UiInput.js";
-import { _ as H } from "../_plugin-vue_export-helper-dad06003.js";
-function Q(o) {
-  return N() ? (R(o), !0) : !1;
-}
-function P(o) {
-  return typeof o == "function" ? o() : O(o);
-}
-const M = typeof window < "u" && typeof document < "u", x = Object.prototype.toString, G = (o) => x.call(o) === "[object Object]", j = () => {
-}, J = /* @__PURE__ */ X();
-function X() {
-  var o;
-  return M && ((o = window?.navigator) == null ? void 0 : o.userAgent) && /* @__PURE__ */ /iP(ad|hone|od)/.test(window.navigator.userAgent);
-}
-function C(o) {
-  var s;
-  const t = P(o);
-  return (s = t?.$el) != null ? s : t;
-}
-const U = M ? window : void 0;
-function b(...o) {
-  let s, t, r, m;
-  if (typeof o[0] == "string" || Array.isArray(o[0]) ? ([t, r, m] = o, s = U) : [s, t, r, m] = o, !s)
-    return j;
-  Array.isArray(t) || (t = [t]), Array.isArray(r) || (r = [r]);
-  const c = [], d = () => {
-    c.forEach((i) => i()), c.length = 0;
-  }, p = (i, a, e, n) => (i.addEventListener(a, e, n), () => i.removeEventListener(a, e, n)), _ = T(
-    () => [C(s), P(m)],
-    ([i, a]) => {
-      if (d(), !i)
-        return;
-      const e = G(a) ? { ...a } : a;
-      c.push(
-        ...t.flatMap((n) => r.map((u) => p(i, n, u, e)))
-      );
-    },
-    { immediate: !0, flush: "post" }
-  ), k = () => {
-    _(), d();
-  };
-  return Q(k), k;
-}
-let F = !1;
-function Y(o, s, t = {}) {
-  const { window: r = U, ignore: m = [], capture: c = !0, detectIframe: d = !1 } = t;
-  if (!r)
-    return;
-  J && !F && (F = !0, Array.from(r.document.body.children).forEach((e) => e.addEventListener("click", j)), r.document.documentElement.addEventListener("click", j));
-  let p = !0;
-  const _ = (e) => m.some((n) => {
-    if (typeof n == "string")
-      return Array.from(r.document.querySelectorAll(n)).some((u) => u === e.target || e.composedPath().includes(u));
-    {
-      const u = C(n);
-      return u && (e.target === u || e.composedPath().includes(u));
-    }
-  }), i = [
-    b(r, "click", (e) => {
-      const n = C(o);
-      if (!(!n || n === e.target || e.composedPath().includes(n))) {
-        if (e.detail === 0 && (p = !_(e)), !p) {
-          p = !0;
-          return;
-        }
-        s(e);
-      }
-    }, { passive: !0, capture: c }),
-    b(r, "pointerdown", (e) => {
-      const n = C(o);
-      n && (p = !e.composedPath().includes(n) && !_(e));
-    }, { passive: !0 }),
-    d && b(r, "blur", (e) => {
-      setTimeout(() => {
-        var n;
-        const u = C(o);
-        ((n = r.document.activeElement) == null ? void 0 : n.tagName) === "IFRAME" && !u?.contains(r.document.activeElement) && s(e);
-      }, 0);
-    })
-  ].filter(Boolean);
-  return () => i.forEach((e) => e());
-}
-const Z = {
+import { openBlock as l, createElementBlock as s, createElementVNode as B, defineComponent as O, ref as a, computed as U, normalizeClass as p, createVNode as E, unref as b, createCommentVNode as j, Fragment as L, renderList as S, withKeys as m, toDisplayString as M } from "vue";
+import { o as N } from "../index-e9b7d99f.js";
+import F from "../UiInput/UiInput.js";
+import { _ as K } from "../_plugin-vue_export-helper-dad06003.js";
+const R = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "15",
   height: "8",
   fill: "none"
-}, ee = /* @__PURE__ */ B("path", {
+}, T = /* @__PURE__ */ B("path", {
   stroke: "currentColor",
   "stroke-linecap": "round",
   "stroke-linejoin": "round",
   d: "m.5 1 7.17 6 6.83-6"
-}, null, -1), te = [
-  ee
+}, null, -1), P = [
+  T
 ];
-function oe(o, s) {
-  return h(), y("svg", Z, te);
+function z(y, c) {
+  return l(), s("svg", R, P);
 }
-const ne = { render: oe }, re = {
+const D = { render: z }, H = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "15",
   height: "8",
   fill: "none"
-}, le = /* @__PURE__ */ B("path", {
+}, Q = /* @__PURE__ */ B("path", {
   stroke: "currentColor",
   "stroke-linecap": "round",
   "stroke-linejoin": "round",
   d: "m.5 7 7.17-6 6.83 6"
-}, null, -1), se = [
-  le
+}, null, -1), q = [
+  Q
 ];
-function ie(o, s) {
-  return h(), y("svg", re, se);
+function x(y, c) {
+  return l(), s("svg", H, q);
 }
-const ue = { render: ie }, ce = ["onClick", "onKeydown", "onMouseenter", "data-current"], ae = /* @__PURE__ */ D({
+const A = { render: x }, G = ["onClick", "onKeydown", "onMouseenter", "data-current"], J = /* @__PURE__ */ O({
   __name: "UiSelect",
   props: {
     modelValue: {},
@@ -122,108 +43,108 @@ const ue = { render: ie }, ce = ["onClick", "onKeydown", "onMouseenter", "data-c
     isFilter: { type: Boolean }
   },
   emits: ["update:modelValue", "reachedBottom"],
-  setup(o, { emit: s }) {
-    const t = o, r = w(""), m = K(() => {
+  setup(y, { emit: c }) {
+    const t = y, f = a(""), g = U(() => {
       if (!t.options)
         return [];
-      let l = t.options;
-      return typeof t.options[0] != "object" && (l = t.options.map((f) => ({ _id: f, title: f }))), t.isFilter ? l.filter((f) => f.title.toLowerCase().includes(r.value.toLowerCase())) : l;
-    }), c = w(!1), d = w(), p = w(), _ = w([]);
-    function k(l) {
-      s("update:modelValue", l);
+      let e = t.options;
+      return typeof t.options[0] != "object" && (e = t.options.map((o) => ({ _id: o, title: o }))), t.isFilter ? e.filter((o) => o.title.toLowerCase().includes(f.value.toLowerCase())) : e;
+    }), r = a(!1), i = a(), v = a(), $ = a([]);
+    function I(e) {
+      c("update:modelValue", e);
     }
-    function i(l) {
-      l < 0 || l === m.value.length || t.isFilter || _.value[l]?.focus();
+    function _(e) {
+      e < 0 || e === g.value.length || t.isFilter || $.value[e]?.focus();
     }
-    function a() {
-      d.value?.removeEventListener("scroll", u, !0), r.value = "", c.value = !1;
+    function d() {
+      i.value?.removeEventListener("scroll", V, !0), f.value = "", r.value = !1;
     }
-    function e() {
-      c.value = !0, t.isFilter || setTimeout(() => {
-        d.value?.scrollTo(0, 0), i(0), d.value?.addEventListener("scroll", u, !0);
+    function w() {
+      r.value = !0, t.isFilter || setTimeout(() => {
+        i.value?.scrollTo(0, 0), _(0), i.value?.addEventListener("scroll", V, !0);
       }, 100);
     }
-    function n(l) {
-      s("update:modelValue", typeof t.modelValue == "object" ? l : l._id), a();
+    function k(e) {
+      c("update:modelValue", typeof t.modelValue == "object" ? e : e._id), d();
     }
-    function u() {
-      if (!d.value || !p.value)
+    function V() {
+      if (!i.value || !v.value)
         return;
-      d.value.getBoundingClientRect().y - p.value.getBoundingClientRect().y - p.value.scrollHeight + d.value.getBoundingClientRect().height > -100 && s("reachedBottom");
+      i.value.getBoundingClientRect().y - v.value.getBoundingClientRect().y - v.value.scrollHeight + i.value.getBoundingClientRect().height > -100 && c("reachedBottom");
     }
-    const I = w();
-    return Y(I, () => {
-      a();
-    }), (l, f) => (h(), y("div", {
-      class: E(l.$style.container),
+    const C = a();
+    return N(C, () => {
+      d();
+    }), (e, o) => (l(), s("div", {
+      class: p(e.$style.container),
       ref_key: "containerElement",
-      ref: I
+      ref: C
     }, [
-      S(L, {
+      E(F, {
         modelValue: typeof t.modelValue == "object" ? t.modelValue.title : t.modelValue,
-        onUpdate: k,
-        onToggle: f[0] || (f[0] = (v) => c.value ? a() : e()),
+        onUpdate: I,
+        onToggle: o[0] || (o[0] = (n) => r.value ? d() : w()),
         mode: "select",
         placeholder: "Choose variant",
-        appendIcon: c.value ? O(ue) : O(ne)
+        appendIcon: r.value ? b(A) : b(D)
       }, null, 8, ["modelValue", "appendIcon"]),
-      t.isFilter && c.value ? (h(), y("div", {
+      t.isFilter && r.value ? (l(), s("div", {
         key: 0,
-        class: E(l.$style.filter)
+        class: p(e.$style.filter)
       }, [
-        S(L, {
-          modelValue: r.value,
-          "onUpdate:modelValue": f[1] || (f[1] = (v) => r.value = v),
+        E(F, {
+          modelValue: f.value,
+          "onUpdate:modelValue": o[1] || (o[1] = (n) => f.value = n),
           placeholder: "Filter Variants",
           isFocus: ""
         }, null, 8, ["modelValue"])
-      ], 2)) : A("", !0),
-      c.value ? (h(), y("div", {
+      ], 2)) : j("", !0),
+      r.value ? (l(), s("div", {
         key: 1,
-        class: E(l.$style.options),
+        class: p(e.$style.options),
         ref_key: "optionsElement",
-        ref: d
+        ref: i
       }, [
-        m.value.length ? (h(), y("div", {
+        g.value.length ? (l(), s("div", {
           key: 0,
           ref_key: "optionsInnerElement",
-          ref: p
+          ref: v
         }, [
-          (h(!0), y(W, null, q(m.value, (v, V) => (h(), y("div", {
-            key: `${v}-${V}`,
-            onClick: (g) => n(v),
+          (l(!0), s(L, null, S(g.value, (n, h) => (l(), s("div", {
+            key: `${n}-${h}`,
+            onClick: (u) => k(n),
             onKeydown: [
-              $((g) => n(v), ["enter"]),
-              $((g) => n(v), ["space"]),
-              $((g) => i(V - 1), ["up"]),
-              $((g) => i(V + 1), ["down"]),
-              f[2] || (f[2] = $((g) => c.value ? a() : e(), ["esc"]))
+              m((u) => k(n), ["enter"]),
+              m((u) => k(n), ["space"]),
+              m((u) => _(h - 1), ["up"]),
+              m((u) => _(h + 1), ["down"]),
+              o[2] || (o[2] = m((u) => r.value ? d() : w(), ["esc"]))
             ],
-            onMouseenter: (g) => i(V),
-            class: E(l.$style.option),
+            onMouseenter: (u) => _(h),
+            class: p(e.$style.option),
             tabindex: "0",
             ref_for: !0,
             ref_key: "optionElement",
-            ref: _,
-            "data-current": t.modelValue === v._id
-          }, z(v.title), 43, ce))), 128))
-        ], 512)) : (h(), y("div", {
+            ref: $,
+            "data-current": t.modelValue === n._id
+          }, M(n.title), 43, G))), 128))
+        ], 512)) : (l(), s("div", {
           key: 1,
-          onClick: a,
-          class: E(l.$style.option),
+          onClick: d,
+          class: p(e.$style.option),
           tabindex: "0"
         }, "No results", 2))
-      ], 2)) : A("", !0)
+      ], 2)) : j("", !0)
     ], 2));
   }
-}), de = "_container_1bjom_1", pe = "_filter_1bjom_5", fe = "_options_1bjom_9", me = "_option_1bjom_9", ve = {
-  container: de,
-  filter: pe,
-  options: fe,
-  option: me
-}, he = {
-  $style: ve
-}, we = /* @__PURE__ */ H(ae, [["__cssModules", he]]);
+}), W = "_container_1bjom_1", X = "_filter_1bjom_5", Y = "_options_1bjom_9", Z = "_option_1bjom_9", ee = {
+  container: W,
+  filter: X,
+  options: Y,
+  option: Z
+}, te = {
+  $style: ee
+}, re = /* @__PURE__ */ K(J, [["__cssModules", te]]);
 export {
-  we as default
+  re as default
 };

package/dist/index-e9b7d99f.js

@@ -0,0 +1,84 @@
+import { getCurrentScope as S, onScopeDispose as O, unref as b, watch as I } from "vue";
+function L(t) {
+  return S() ? (O(t), !0) : !1;
+}
+function E(t) {
+  return typeof t == "function" ? t() : b(t);
+}
+const g = typeof window < "u" && typeof document < "u", k = Object.prototype.toString, P = (t) => k.call(t) === "[object Object]", w = () => {
+}, j = /* @__PURE__ */ C();
+function C() {
+  var t;
+  return g && ((t = window?.navigator) == null ? void 0 : t.userAgent) && /* @__PURE__ */ /iP(ad|hone|od)/.test(window.navigator.userAgent);
+}
+function f(t) {
+  var s;
+  const r = E(t);
+  return (s = r?.$el) != null ? s : r;
+}
+const A = g ? window : void 0;
+function h(...t) {
+  let s, r, o, a;
+  if (typeof t[0] == "string" || Array.isArray(t[0]) ? ([r, o, a] = t, s = A) : [s, r, o, a] = t, !s)
+    return w;
+  Array.isArray(r) || (r = [r]), Array.isArray(o) || (o = [o]);
+  const d = [], p = () => {
+    d.forEach((c) => c()), d.length = 0;
+  }, l = (c, u, e, n) => (c.addEventListener(u, e, n), () => c.removeEventListener(u, e, n)), m = I(
+    () => [f(s), E(a)],
+    ([c, u]) => {
+      if (p(), !c)
+        return;
+      const e = P(u) ? { ...u } : u;
+      d.push(
+        ...r.flatMap((n) => o.map((i) => l(c, n, i, e)))
+      );
+    },
+    { immediate: !0, flush: "post" }
+  ), y = () => {
+    m(), p();
+  };
+  return L(y), y;
+}
+let v = !1;
+function W(t, s, r = {}) {
+  const { window: o = A, ignore: a = [], capture: d = !0, detectIframe: p = !1 } = r;
+  if (!o)
+    return;
+  j && !v && (v = !0, Array.from(o.document.body.children).forEach((e) => e.addEventListener("click", w)), o.document.documentElement.addEventListener("click", w));
+  let l = !0;
+  const m = (e) => a.some((n) => {
+    if (typeof n == "string")
+      return Array.from(o.document.querySelectorAll(n)).some((i) => i === e.target || e.composedPath().includes(i));
+    {
+      const i = f(n);
+      return i && (e.target === i || e.composedPath().includes(i));
+    }
+  }), c = [
+    h(o, "click", (e) => {
+      const n = f(t);
+      if (!(!n || n === e.target || e.composedPath().includes(n))) {
+        if (e.detail === 0 && (l = !m(e)), !l) {
+          l = !0;
+          return;
+        }
+        s(e);
+      }
+    }, { passive: !0, capture: d }),
+    h(o, "pointerdown", (e) => {
+      const n = f(t);
+      n && (l = !e.composedPath().includes(n) && !m(e));
+    }, { passive: !0 }),
+    p && h(o, "blur", (e) => {
+      setTimeout(() => {
+        var n;
+        const i = f(t);
+        ((n = o.document.activeElement) == null ? void 0 : n.tagName) === "IFRAME" && !i?.contains(o.document.activeElement) && s(e);
+      }, 0);
+    })
+  ].filter(Boolean);
+  return () => c.forEach((e) => e());
+}
+export {
+  W as o
+};

package/dist/index.d.ts

@@ -9,4 +9,5 @@ export { default as UiPagination } from './UiPagination/UiPagination';
 export { default as UiCheckbox } from './UiCheckbox/UiCheckbox';
 export { default as UiModal } from './UiModal/UiModal';
 export { default as UiBreadcrumbs } from './UiBreadcrumbs/UiBreadcrumbs';
+export { default as UiSearch } from './UiSearch/UiSearch';
 export { default as toast } from './toast/toast';

package/dist/index.ts

@@ -9,4 +9,5 @@ export { default as UiPagination } from './UiPagination/UiPagination.js';
 export { default as UiCheckbox } from './UiCheckbox/UiCheckbox.js';
 export { default as UiModal } from './UiModal/UiModal.js';
 export { default as UiBreadcrumbs } from './UiBreadcrumbs/UiBreadcrumbs.js';
+export { default as UiSearch } from './UiSearch/UiSearch.js';
 export { default as toast } from './toast/toast';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mhz-ui",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "mhz-ui",
   "author": "dergunov.com",
   "license": "MIT",
@@ -28,22 +28,23 @@
     "@tiptap/vue-3": "2.1.7",
     "@vueuse/core": "10.4.1",
     "@vueuse/integrations": "10.4.1",
+    "perfect-debounce": "1.0.0",
     "vue": "3.3.4",
     "vue-router": "4.2.4"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "7.3.2",
-    "@storybook/addon-interactions": "7.3.2",
-    "@storybook/addon-links": "7.3.2",
-    "@storybook/blocks": "7.3.2",
-    "@storybook/core-events": "7.3.2",
-    "@storybook/preview-api": "7.3.2",
-    "@storybook/vue3": "7.3.2",
-    "@storybook/vue3-vite": "7.3.2",
+    "@storybook/addon-essentials": "7.4.0",
+    "@storybook/addon-interactions": "7.4.0",
+    "@storybook/addon-links": "7.4.0",
+    "@storybook/blocks": "7.4.0",
+    "@storybook/core-events": "7.4.0",
+    "@storybook/preview-api": "7.4.0",
+    "@storybook/vue3": "7.4.0",
+    "@storybook/vue3-vite": "7.4.0",
     "@types/node": "20.5.7",
-    "@typescript-eslint/eslint-plugin": "6.4.1",
-    "@typescript-eslint/parser": "6.4.1",
-    "@vitejs/plugin-vue": "4.3.3",
+    "@typescript-eslint/eslint-plugin": "6.5.0",
+    "@typescript-eslint/parser": "6.5.0",
+    "@vitejs/plugin-vue": "4.3.4",
     "eslint": "8.48.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-import-resolver-typescript": "3.6.0",
@@ -52,11 +53,11 @@
     "eslint-plugin-vue": "9.17.0",
     "postcss-html": "1.5.0",
     "postcss-scss": "4.0.7",
-    "prettier": "3.0.2",
+    "prettier": "3.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "sass": "1.66.1",
-    "storybook": "7.3.2",
+    "storybook": "7.4.0",
     "stylelint": "15.10.3",
     "stylelint-config-recess-order": "4.3.0",
     "stylelint-config-recommended-scss": "12.0.0",
@@ -64,10 +65,10 @@
     "stylelint-prettier": "4.0.2",
     "typescript": "5.2.2",
     "vite": "4.4.9",
-    "vite-plugin-dts": "3.5.2",
+    "vite-plugin-dts": "3.5.3",
     "vite-plugin-static-copy": "0.17.0",
     "vite-svg-loader": "4.0.0",
-    "vue-linters-config": "0.1.6",
+    "vue-linters-config": "0.1.9",
     "vue-tsc": "1.8.8"
   },
   "peerDependencies": {