mhz-ui 1.2.52 → 1.2.53

package/dist/UiModal/UiModal.css

@@ -1 +1 @@
-._backdrop_q8qi7_1{position:fixed;inset:0;z-index:998;display:flex;align-items:center;justify-content:center;background-color:var(--color-gray-transparent)}._dialog_q8qi7_11{z-index:999;padding:0;outline:none;background-color:var(--color-white);border:none;border-radius:16px}._dialog_q8qi7_11 *{outline:none}._modal_q8qi7_23{display:flex;flex-direction:column;gap:12px;width:var(--b2e7c0fe);max-width:100%;height:auto;padding:24px;box-shadow:0 0 16px 0 var(--color-gray-transparent)}._modal_q8qi7_23[data-scrollable=true]{max-height:64dvh;overflow-y:auto}._header_q8qi7_38{display:flex;justify-content:flex-end}._buttons_q8qi7_43{display:flex;gap:16px}.dark ._modal_q8qi7_23{background-color:var(--color-black);box-shadow:0 0 16px 0 var(--color-black-transparent)}.dark ._slot_q8qi7_52{color:var(--color-white)}
+._backdrop_jn54y_1{position:fixed;inset:0;z-index:998;display:flex;align-items:center;justify-content:center;background-color:var(--color-gray-transparent)}._dialog_jn54y_11{z-index:999;padding:0;outline:none;background-color:var(--color-white);border:none;border-radius:16px}._modal_jn54y_20{display:flex;flex-direction:column;gap:12px;width:var(--v1c45205f);max-width:100%;height:auto;padding:24px;outline:none;box-shadow:0 0 16px 0 var(--color-gray-transparent)}._modal_jn54y_20[data-scrollable=true]{max-height:64dvh;overflow-y:auto}._header_jn54y_36{display:flex;justify-content:flex-end}._buttons_jn54y_41{display:flex;gap:16px}.dark ._modal_jn54y_20{background-color:var(--color-black);box-shadow:0 0 16px 0 var(--color-black-transparent)}.dark ._slot_jn54y_50{color:var(--color-white)}

package/dist/UiModal/UiModal.js

@@ -1,10 +1,10 @@
 import "./UiModal.css";
-import { defineComponent as v, useCssVars as V, computed as $, ref as w, onMounted as B, watch as S, createBlock as E, openBlock as n, Teleport as N, createElementBlock as c, createCommentVNode as u, normalizeClass as l, createElementVNode as a, mergeProps as U, withModifiers as m, createVNode as i, renderSlot as T, withCtx as f, createTextVNode as p, toDisplayString as _, unref as y, nextTick as A } from "vue";
+import { defineComponent as V, useCssVars as $, computed as w, ref as B, onMounted as S, watch as j, createBlock as E, openBlock as n, Teleport as N, createElementBlock as c, createCommentVNode as u, normalizeClass as l, createElementVNode as a, mergeProps as U, withModifiers as m, createVNode as d, renderSlot as T, withCtx as f, createTextVNode as p, toDisplayString as _, unref as y, nextTick as A } from "vue";
 import g from "../UiButton/UiButton.js";
 import D from "../UiClose/UiClose.js";
-import { M as b } from "../index-DajWja1y.js";
+import { M as h } from "../index-DajWja1y.js";
 import { _ as R } from "../_plugin-vue_export-helper-CHgC5LLL.js";
-const z = ["data-scrollable"], G = /* @__PURE__ */ v({
+const z = ["data-scrollable"], G = /* @__PURE__ */ V({
   inheritAttrs: !1,
   __name: "UiModal",
   props: {
@@ -15,31 +15,31 @@ const z = ["data-scrollable"], G = /* @__PURE__ */ v({
     lang: { default: "ru" }
   },
   emits: ["update:modelValue", "confirm"],
-  setup(h, { emit: k }) {
-    V((e) => ({
-      b2e7c0fe: C.value
+  setup(k, { emit: C }) {
+    $((e) => ({
+      v1c45205f: b.value
     }));
-    const o = h, d = k, C = $(() => `${o.width}px`), s = w(null);
-    function q() {
+    const o = k, r = C, b = w(() => `${o.width}px`), s = B(null);
+    function v() {
       A(() => {
         s.value?.open ? s.value.close() : s.value?.showModal();
       });
     }
     function M() {
-      d("confirm"), t();
+      r("confirm"), t();
     }
     function t() {
-      d("update:modelValue", !1);
+      r("update:modelValue", !1);
     }
-    return B(() => {
-      S(
+    return S(() => {
+      j(
         () => o.modelValue,
         () => {
-          q();
+          v();
         },
         { immediate: !0 }
       );
-    }), (e, r) => (n(), E(N, { to: "body" }, [
+    }), (e, i) => (n(), E(N, { to: "body" }, [
       o.modelValue ? (n(), c("div", {
         key: 0,
         class: l(e.$style.backdrop),
@@ -53,14 +53,14 @@ const z = ["data-scrollable"], G = /* @__PURE__ */ v({
         }, e.$attrs), [
           a("div", {
             class: l(e.$style.modal),
-            onMousedown: r[0] || (r[0] = m(() => {
+            onMousedown: i[0] || (i[0] = m(() => {
             }, ["stop"])),
             "data-scrollable": o.isScrollable
           }, [
             a("div", {
               class: l(e.$style.header)
             }, [
-              i(D, { onClick: t })
+              d(D, { onClick: t })
             ], 2),
             a("div", {
               class: l(e.$style.slot)
@@ -71,18 +71,18 @@ const z = ["data-scrollable"], G = /* @__PURE__ */ v({
               key: 0,
               class: l(e.$style.buttons)
             }, [
-              i(g, { onClick: M }, {
+              d(g, { onClick: M }, {
                 default: f(() => [
-                  p(_(y(b)[o.lang].confirm), 1)
+                  p(_(y(h)[o.lang].confirm), 1)
                 ]),
                 _: 1
               }),
-              i(g, {
+              d(g, {
                 layout: "secondary",
                 onClick: t
               }, {
                 default: f(() => [
-                  p(_(y(b)[o.lang].cancel), 1)
+                  p(_(y(h)[o.lang].cancel), 1)
                 ]),
                 _: 1
               })
@@ -92,9 +92,9 @@ const z = ["data-scrollable"], G = /* @__PURE__ */ v({
       ], 34)) : u("", !0)
     ]));
   }
-}), P = "_backdrop_q8qi7_1", j = "_dialog_q8qi7_11", x = "_modal_q8qi7_23", F = "_header_q8qi7_38", H = "_buttons_q8qi7_43", I = "_slot_q8qi7_52", J = {
+}), P = "_backdrop_jn54y_1", q = "_dialog_jn54y_11", x = "_modal_jn54y_20", F = "_header_jn54y_36", H = "_buttons_jn54y_41", I = "_slot_jn54y_50", J = {
   backdrop: P,
-  dialog: j,
+  dialog: q,
   modal: x,
   header: F,
   buttons: H,

package/dist/UiSelect/UiSelect.js

@@ -1,18 +1,18 @@
 import "./UiSelect.css";
-import { createElementBlock as l, openBlock as s, createElementVNode as E, defineComponent as H, ref as a, computed as b, normalizeClass as d, createCommentVNode as F, createVNode as M, unref as p, Fragment as z, renderList as Q, withKeys as m, withModifiers as U, toDisplayString as R } from "vue";
-import { o as q } from "../index-CGEFkmQc.js";
-import D from "../UiInput/UiInput.js";
+import { createElementBlock as l, openBlock as s, createElementVNode as B, defineComponent as W, ref as u, computed as b, normalizeClass as p, createCommentVNode as F, createVNode as M, unref as m, Fragment as X, renderList as Y, withKeys as f, withModifiers as D, toDisplayString as T } from "vue";
+import { o as Z } from "../index-CGEFkmQc.js";
+import N from "../UiInput/UiInput.js";
 import { M as O } from "../index-DajWja1y.js";
-import { _ as J } from "../_plugin-vue_export-helper-CHgC5LLL.js";
-const W = {
+import { _ as x } from "../_plugin-vue_export-helper-CHgC5LLL.js";
+const ee = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "16",
   height: "16",
   fill: "none"
 };
-function X(h, i) {
-  return s(), l("svg", W, [...i[0] || (i[0] = [
-    E("path", {
+function te(h, i) {
+  return s(), l("svg", ee, [...i[0] || (i[0] = [
+    B("path", {
       stroke: "#1F1F1F",
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
@@ -20,15 +20,15 @@ function X(h, i) {
     }, null, -1)
   ])]);
 }
-const Y = { render: X }, Z = {
+const oe = { render: te }, ne = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "16",
   height: "16",
   fill: "none"
 };
-function x(h, i) {
-  return s(), l("svg", Z, [...i[0] || (i[0] = [
-    E("path", {
+function le(h, i) {
+  return s(), l("svg", ne, [...i[0] || (i[0] = [
+    B("path", {
       stroke: "#1F1F1F",
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
@@ -36,7 +36,7 @@ function x(h, i) {
     }, null, -1)
   ])]);
 }
-const ee = { render: x }, te = { key: 0 }, oe = ["onClick", "onKeydown", "onMouseenter", "data-current"], ne = /* @__PURE__ */ H({
+const se = { render: le }, ie = { key: 0 }, re = ["onClick", "onKeydown", "onMouseenter", "data-current"], j = 232, ae = /* @__PURE__ */ W({
   __name: "UiSelect",
   props: {
     modelValue: { default: void 0 },
@@ -49,123 +49,128 @@ const ee = { render: x }, te = { key: 0 }, oe = ["onClick", "onKeydown", "onMous
   },
   emits: ["update:modelValue", "reachedBottom"],
   setup(h, { emit: i }) {
-    const t = h, k = i, f = a(""), u = a(!1), V = a(!1), v = a(), r = a(), _ = a(), B = a([]), $ = b(() => {
+    const t = h, k = i, v = u(""), c = u(!1), V = u(!1), d = u(), r = u(), g = u(), E = u([]), $ = b(() => {
       const e = t.options?.[0];
       return e != null && typeof e == "object";
-    }), S = (e) => e !== null && (typeof e == "string" || typeof e == "number"), w = b(() => {
+    }), I = (e) => e !== null && (typeof e == "string" || typeof e == "number"), w = b(() => {
       if (!t.options?.length) return [];
       const e = $.value ? [...t.options] : t.options.map((o) => ({ _id: String(o), title: String(o) }));
-      return t.isFilter ? e.filter((o) => o.title.toLowerCase().includes(f.value.toLowerCase())) : e;
-    }), T = b(() => {
-      if (S(t.modelValue)) return t.modelValue;
+      return t.isFilter ? e.filter((o) => o.title.toLowerCase().includes(v.value.toLowerCase())) : e;
+    }), A = b(() => {
+      if (I(t.modelValue)) return t.modelValue;
       if (!t.modelValue) return "";
       const e = t.modelValue;
       return t.isLocaleField ? e.title_en ?? "" : e.title ?? "";
-    }), N = (e, o) => `${e._id || e.title}-${o}`, j = (e) => t.isLocaleField ? e.title_en : e.title, A = (e) => S(t.modelValue) ? t.modelValue === (e._id || e.title) : t.modelValue ? t.modelValue._id === e._id : !1, g = (e) => {
-      e < 0 || e >= w.value.length || t.isFilter || B.value[e]?.focus();
-    }, K = () => k("update:modelValue", void 0), L = () => {
-      u.value ? y() : G();
-    }, P = () => {
-      if (!v.value) return !1;
-      const e = 232, o = v.value.getBoundingClientRect(), n = window.innerHeight - o.bottom, c = o.top;
-      return n < e && c > n;
+    }), H = (e, o) => `${e._id || e.title}-${o}`, K = (e) => t.isLocaleField ? e.title_en : e.title, P = (e) => I(t.modelValue) ? t.modelValue === (e._id || e.title) : t.modelValue ? t.modelValue._id === e._id : !1, _ = (e) => {
+      e < 0 || e >= w.value.length || t.isFilter || E.value[e]?.focus();
+    }, G = () => k("update:modelValue", void 0), S = () => {
+      c.value ? y() : Q();
+    }, z = () => {
+      if (!d.value) return !1;
+      const e = d.value.closest("dialog");
+      if (!e) {
+        const R = d.value.getBoundingClientRect(), U = window.innerHeight - R.bottom, J = R.top;
+        return U < j && J > U;
+      }
+      const o = e.getBoundingClientRect(), n = d.value.getBoundingClientRect(), a = o.bottom - n.bottom, q = n.top - o.top;
+      return a < j && q > a;
     };
     function y() {
-      r.value?.removeEventListener("scroll", I, !0), f.value = "", u.value = !1, V.value = !1;
+      r.value?.removeEventListener("scroll", L, !0), v.value = "", c.value = !1, V.value = !1;
     }
-    function G() {
-      t.isDisabled || (V.value = P(), u.value = !0, t.isFilter || setTimeout(() => {
-        r.value?.scrollTo(0, 0), g(0), r.value?.addEventListener("scroll", I, !0);
+    function Q() {
+      t.isDisabled || (V.value = z(), c.value = !0, t.isFilter || setTimeout(() => {
+        r.value?.scrollTo(0, 0), _(0), r.value?.addEventListener("scroll", L, !0);
       }, 100));
     }
     function C(e) {
       const o = $.value ? e : e._id || e.title;
       k("update:modelValue", o), y();
     }
-    function I() {
-      if (!r.value || !_.value) return;
-      r.value.getBoundingClientRect().y - _.value.getBoundingClientRect().y - _.value.scrollHeight + r.value.getBoundingClientRect().height > -100 && k("reachedBottom");
+    function L() {
+      if (!r.value || !g.value) return;
+      r.value.getBoundingClientRect().y - g.value.getBoundingClientRect().y - g.value.scrollHeight + r.value.getBoundingClientRect().height > -100 && k("reachedBottom");
     }
-    return q(v, y), (e, o) => (s(), l("div", {
-      class: d(e.$style.container),
+    return Z(d, y), (e, o) => (s(), l("div", {
+      class: p(e.$style.container),
       ref_key: "containerElement",
-      ref: v
+      ref: d
     }, [
-      E("div", {
-        class: d(e.$style.input)
+      B("div", {
+        class: p(e.$style.input)
       }, [
-        M(D, {
-          modelValue: T.value,
+        M(N, {
+          modelValue: A.value,
           disabled: t.isDisabled,
-          onToggle: L,
+          onToggle: S,
           mode: "select",
-          placeholder: p(O)[t.lang].choose,
-          appendIcon: u.value ? p(ee) : p(Y)
+          placeholder: m(O)[t.lang].choose,
+          appendIcon: c.value ? m(se) : m(oe)
         }, null, 8, ["modelValue", "disabled", "placeholder", "appendIcon"]),
-        t.isFilter && u.value ? (s(), l("div", te, [
-          M(D, {
-            modelValue: f.value,
-            "onUpdate:modelValue": o[0] || (o[0] = (n) => f.value = n),
+        t.isFilter && c.value ? (s(), l("div", ie, [
+          M(N, {
+            modelValue: v.value,
+            "onUpdate:modelValue": o[0] || (o[0] = (n) => v.value = n),
             disabled: t.isDisabled,
-            placeholder: p(O)[t.lang].filter,
+            placeholder: m(O)[t.lang].filter,
             isFocus: ""
           }, null, 8, ["modelValue", "disabled", "placeholder"])
         ])) : F("", !0),
         t.isClearable && t.modelValue ? (s(), l("button", {
           key: 1,
-          onClick: K,
+          onClick: G,
           type: "button",
-          class: d(e.$style.clear)
+          class: p(e.$style.clear)
         }, " × ", 2)) : F("", !0)
       ], 2),
-      u.value ? (s(), l("div", {
+      c.value ? (s(), l("div", {
         key: 0,
-        class: d([e.$style.options, { [e.$style.optionsUp]: V.value }]),
+        class: p([e.$style.options, { [e.$style.optionsUp]: V.value }]),
         ref_key: "optionsElement",
         ref: r
       }, [
         w.value.length > 0 ? (s(), l("div", {
           key: 0,
           ref_key: "optionsInnerElement",
-          ref: _
+          ref: g
         }, [
-          (s(!0), l(z, null, Q(w.value, (n, c) => (s(), l("div", {
-            key: N(n, c),
+          (s(!0), l(X, null, Y(w.value, (n, a) => (s(), l("div", {
+            key: H(n, a),
             onClick: () => C(n),
             onKeydown: [
-              m(() => C(n), ["enter"]),
-              m(() => C(n), ["space"]),
-              m(U(() => g(c - 1), ["prevent"]), ["up"]),
-              m(U(() => g(c + 1), ["prevent"]), ["down"]),
-              m(L, ["esc"])
+              f(() => C(n), ["enter"]),
+              f(() => C(n), ["space"]),
+              f(D(() => _(a - 1), ["prevent"]), ["up"]),
+              f(D(() => _(a + 1), ["prevent"]), ["down"]),
+              f(S, ["esc"])
             ],
-            onMouseenter: () => g(c),
-            class: d(e.$style.option),
+            onMouseenter: () => _(a),
+            class: p(e.$style.option),
             tabindex: "0",
             ref_for: !0,
             ref_key: "optionElement",
-            ref: B,
-            "data-current": A(n)
-          }, R(j(n)), 43, oe))), 128))
+            ref: E,
+            "data-current": P(n)
+          }, T(K(n)), 43, re))), 128))
         ], 512)) : (s(), l("div", {
           key: 1,
           onClick: y,
-          class: d(e.$style.option),
+          class: p(e.$style.option),
           tabindex: "0"
-        }, R(p(O)[t.lang].noResults), 3))
+        }, T(m(O)[t.lang].noResults), 3))
       ], 2)) : F("", !0)
     ], 2));
   }
-}), le = "_container_1m448_1", se = "_input_1m448_10", ie = "_clear_1m448_16", re = "_options_1m448_31", ae = "_optionsUp_1m448_44", ue = "_option_1m448_31", ce = {
-  container: le,
-  input: se,
-  clear: ie,
-  options: re,
-  optionsUp: ae,
-  option: ue
-}, de = {
-  $style: ce
-}, ge = /* @__PURE__ */ J(ne, [["__cssModules", de]]);
+}), ue = "_container_1m448_1", ce = "_input_1m448_10", de = "_clear_1m448_16", pe = "_options_1m448_31", me = "_optionsUp_1m448_44", fe = "_option_1m448_31", ve = {
+  container: ue,
+  input: ce,
+  clear: de,
+  options: pe,
+  optionsUp: me,
+  option: fe
+}, ge = {
+  $style: ve
+}, we = /* @__PURE__ */ x(ae, [["__cssModules", ge]]);
 export {
-  ge as default
+  we as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mhz-ui",
   "description": "Mhz ui kit",
-  "version": "1.2.52",
+  "version": "1.2.53",
   "author": "Alexandr Dergunov <dergunovs@mail.ru> (https://github.com/dergunovs)",
   "license": "MIT",
   "type": "module",