@validol4ik/uikit 0.10.2 → 0.11.1

package/dist/index-qX2ysQuM.js

@@ -0,0 +1,616 @@
+import { defineComponent as C, computed as M, openBlock as a, createBlock as $, unref as B, normalizeClass as p, withCtx as X, createElementBlock as u, createCommentVNode as f, renderSlot as z, Fragment as T, createTextVNode as G, toDisplayString as I, createElementVNode as h, withModifiers as j, withDirectives as q, createVNode as ee, normalizeStyle as W, ref as L, watch as Y, onMounted as Z, renderList as H, withKeys as oe, vModelText as le, nextTick as P, useModel as J, useTemplateRef as Q, onBeforeUnmount as te, mergeModels as F, defineAsyncComponent as O } from "vue";
+import { boot as ne } from "quasar/wrappers";
+import ae from "quasar/src/components/btn/QBtn.js";
+import se from "quasar/src/components/checkbox/QCheckbox.js";
+import ie from "quasar/src/directives/close-popup/ClosePopup.js";
+import ue from "quasar/src/components/spinner/QSpinner.js";
+import de from "quasar/src/components/linear-progress/QLinearProgress.js";
+import re from "quasar/src/components/item/QItem.js";
+const je = ne(({ app: d }) => {
+  const t = d.config.globalProperties.$q;
+  t.iconMapFn = (n) => {
+    if (n.startsWith("icon-kl:"))
+      return {
+        cls: `icon-kl icon-kl-${n.slice(8)}`
+      };
+  };
+}), K = {
+  PRIMARY: "primary",
+  INFO: "info"
+}, _ = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl"
+}, pe = {
+  [_.SM]: "3px 9px",
+  [_.MD]: "5px 12px",
+  [_.LG]: "6px 15px",
+  [_.XL]: "9px 20px"
+}, ce = /* @__PURE__ */ C({
+  __name: "AppButton",
+  props: {
+    size: { default: _.MD },
+    transparent: { type: Boolean },
+    flat: { type: Boolean },
+    rounded: { type: Boolean },
+    color: { default: K.PRIMARY },
+    iconLeft: {},
+    iconRight: {},
+    iconMiddle: {},
+    disabled: { type: Boolean },
+    loading: { type: Boolean },
+    to: {},
+    href: {},
+    target: {},
+    submit: { type: Boolean },
+    ariaLabel: {},
+    label: {},
+    download: {}
+  },
+  emits: ["click"],
+  setup(d) {
+    const t = d, n = M(() => [
+      "app-btn",
+      {
+        "app-btn_default": !t.transparent && !t.flat,
+        "app-btn_trans": t.transparent,
+        "app-btn_flat": t.flat,
+        "app-btn_rounded": t.rounded,
+        "app-btn_icon-left": t.iconLeft,
+        "app-btn_icon-right": t.iconRight,
+        "app-btn_icon-middle": t.iconMiddle
+      },
+      `app-btn_${t.size}`,
+      `app-btn_${t.color}`
+    ]);
+    return (e, i) => (a(), $(B(ae), {
+      "no-caps": "",
+      unelevated: "",
+      class: p(n.value),
+      padding: B(pe)[e.size || B(_).MD],
+      loading: e.loading,
+      disable: e.disabled || void 0,
+      to: e.to,
+      href: e.href,
+      target: e.target,
+      type: e.submit ? "submit" : void 0,
+      "aria-label": e.ariaLabel,
+      download: e.download,
+      onClick: i[0] || (i[0] = (l) => e.$emit("click", l))
+    }, {
+      default: X(() => [
+        e.iconLeft || e.iconMiddle ? (a(), u("i", {
+          key: 0,
+          class: p([
+            "icon-kl",
+            e.iconLeft ? "icon-kl_left" : "icon-kl_middle",
+            `icon-kl-${e.iconLeft || e.iconMiddle}`,
+            e.transparent || e.flat ? `text-${e.color}` : "text-secondary"
+          ])
+        }, null, 2)) : f("", !0),
+        z(e.$slots, "default", {}, void 0, !0),
+        e.label ? (a(), u(T, { key: 1 }, [
+          G(I(e.label), 1)
+        ], 64)) : f("", !0),
+        e.iconRight ? (a(), u("i", {
+          key: 2,
+          class: p([
+            "icon-kl",
+            "icon-kl_right",
+            `icon-kl-${e.iconRight}`,
+            e.transparent ? `text-${e.color}` : "text-secondary"
+          ])
+        }, null, 2)) : f("", !0)
+      ]),
+      _: 3
+    }, 8, ["class", "padding", "loading", "disable", "to", "href", "target", "type", "aria-label", "download"]));
+  }
+}), w = (d, t) => {
+  const n = d.__vccOpts || d;
+  for (const [e, i] of t)
+    n[e] = i;
+  return n;
+}, qe = /* @__PURE__ */ w(ce, [["__scopeId", "data-v-c9951ab6"]]), me = /* @__PURE__ */ C({
+  __name: "CloseButton",
+  props: {
+    size: { default: _.MD }
+  },
+  setup(d) {
+    const t = d, n = M(() => ["close-btn", `close-btn_${t.size}`]);
+    return (e, i) => (a(), u("button", {
+      class: p(n.value),
+      type: "button",
+      "aria-label": "Close"
+    }, [...i[0] || (i[0] = [
+      h("i", { class: "icon-kl icon-kl-close" }, null, -1)
+    ])], 2));
+  }
+}), Ze = /* @__PURE__ */ w(me, [["__scopeId", "data-v-7cc56d51"]]), fe = {
+  key: 0,
+  class: "app-toggle__label app-toggle__label_left"
+}, ge = { class: "app-toggle__container" }, be = ["checked", "disabled"], ve = { class: "app-toggle__thumb" }, he = {
+  key: 1,
+  class: "app-toggle__label"
+}, _e = /* @__PURE__ */ C({
+  __name: "AppToggle",
+  props: {
+    modelValue: { type: Boolean },
+    size: { default: _.MD },
+    label: {},
+    disabled: { type: Boolean },
+    color: { default: K.PRIMARY },
+    iconColor: {},
+    icon: {},
+    iconActive: {},
+    labelLeft: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(d, { emit: t }) {
+    const n = d, e = t, i = M({
+      get: () => n.modelValue,
+      set: (o) => {
+        e("update:modelValue", o);
+      }
+    }), l = M(() => [
+      "app-toggle",
+      {
+        "app-toggle_active": i.value,
+        "app-toggle_disabled": n.disabled
+      },
+      `app-toggle_${n.size}`,
+      `app-toggle_${n.color}`
+    ]);
+    return (o, g) => (a(), u("div", {
+      class: p(l.value),
+      onClick: g[1] || (g[1] = j(() => {
+      }, ["stop"]))
+    }, [
+      o.label && o.labelLeft ? (a(), u("span", fe, I(o.label), 1)) : f("", !0),
+      h("label", ge, [
+        h("input", {
+          type: "checkbox",
+          checked: i.value,
+          onChange: g[0] || (g[0] = (k) => i.value = !i.value),
+          disabled: o.disabled,
+          class: "app-toggle__input"
+        }, null, 40, be),
+        h("span", {
+          class: p(["app-toggle__slider", i.value ? `bg-${o.color}` : ""])
+        }, [
+          h("span", ve, [
+            o.icon && !o.modelValue ? (a(), u("i", {
+              key: 0,
+              class: p(["icon-kl", `icon-kl-${o.icon}`, "app-toggle__icon"])
+            }, null, 2)) : f("", !0),
+            o.modelValue && (o.iconActive || o.icon) ? (a(), u("i", {
+              key: 1,
+              class: p([
+                "icon-kl",
+                `icon-kl-${o.iconActive || o.icon}`,
+                "app-toggle__icon",
+                i.value ? `text-${o.iconColor}` : ""
+              ])
+            }, null, 2)) : f("", !0)
+          ])
+        ], 2),
+        z(o.$slots, "default", {}, void 0, !0)
+      ]),
+      o.label && !o.labelLeft ? (a(), u("span", he, I(o.label), 1)) : f("", !0)
+    ], 2));
+  }
+}), x = /* @__PURE__ */ w(_e, [["__scopeId", "data-v-ba49356e"]]), ke = {
+  key: 0,
+  class: "menu-item__loading"
+}, ye = {
+  key: 0,
+  class: "menu-item__checked"
+}, $e = {
+  key: 2,
+  class: "menu-item__icon"
+}, Be = { class: "menu-item__label" }, Me = {
+  key: 3,
+  class: "menu-item__icon-right icon-kl icon-kl-arrow-right"
+}, we = /* @__PURE__ */ C({
+  __name: "PopupItem",
+  props: {
+    label: {},
+    icon: {},
+    iconSize: {},
+    color: {},
+    iconRight: {},
+    arrow: { type: Boolean },
+    toggle: { type: Boolean },
+    checkbox: { type: Boolean },
+    active: { type: Boolean },
+    modelValue: { type: Boolean },
+    persistent: { type: Boolean },
+    loading: { type: Boolean },
+    disabled: { type: Boolean },
+    gap: { type: Boolean },
+    checked: { type: Boolean },
+    isMobile: { type: Boolean }
+  },
+  emits: ["update:modelValue", "closePopup"],
+  setup(d, { emit: t }) {
+    const n = d, e = t, i = () => {
+      n.disabled || (n.toggle || n.checkbox ? e("update:modelValue", !n.modelValue) : n.persistent || e("closePopup"));
+    };
+    return (l, o) => q((a(), u("div", {
+      class: p(["menu-item", [
+        { "menu-item_gap": l.gap },
+        { "menu-item_disabled": l.disabled },
+        { "menu-item_active": l.active },
+        { "menu-item_mobile": l.isMobile }
+      ]]),
+      onClick: i
+    }, [
+      h("div", {
+        class: p(["row items-center no-wrap", `text-${l.color ? l.color : "dark"}`])
+      }, [
+        l.loading ? (a(), u("div", ke, [
+          ee(B(ue), {
+            size: "19px",
+            color: l.color ? l.color : "dark"
+          }, null, 8, ["color"])
+        ])) : (a(), u(T, { key: 1 }, [
+          l.checked ? (a(), u("div", ye, [...o[3] || (o[3] = [
+            h("i", { class: "icon-kl icon-kl-check" }, null, -1)
+          ])])) : f("", !0),
+          l.checkbox ? (a(), $(se, {
+            key: 1,
+            class: "menu-item__checkbox",
+            size: "34px",
+            "model-value": l.modelValue,
+            "onUpdate:modelValue": o[0] || (o[0] = (g) => e("update:modelValue", g)),
+            onClick: o[1] || (o[1] = j(() => {
+            }, ["stop"]))
+          }, null, 8, ["model-value"])) : f("", !0),
+          l.icon ? (a(), u("div", $e, [
+            h("i", {
+              class: p(`icon-kl icon-kl-${l.icon}`),
+              style: W({ fontSize: l.iconSize || "27px" })
+            }, null, 6)
+          ])) : f("", !0)
+        ], 64)),
+        h("span", Be, I(l.label), 1)
+      ], 2),
+      l.$slots.right ? z(l.$slots, "right", { key: 0 }, void 0, !0) : l.toggle ? (a(), $(x, {
+        key: 1,
+        class: "menu-item__toggle",
+        "model-value": l.modelValue,
+        disabled: l.disabled || l.loading,
+        "onUpdate:modelValue": o[2] || (o[2] = (g) => e("update:modelValue", g))
+      }, null, 8, ["model-value", "disabled"])) : l.iconRight ? (a(), u("i", {
+        key: 2,
+        class: p([
+          "menu-item__icon-right menu-item__icon-right_custom icon-kl",
+          `icon-kl-${l.iconRight}`
+        ])
+      }, null, 2)) : l.arrow ? (a(), u("i", Me)) : f("", !0)
+    ], 2)), [
+      [ie, !l.toggle && !l.checkbox && !l.persistent && !l.disabled]
+    ]);
+  }
+}), He = /* @__PURE__ */ w(we, [["__scopeId", "data-v-4b2a03b5"]]), Ce = /* @__PURE__ */ C({
+  __name: "AppIcon",
+  props: {
+    name: {},
+    size: {},
+    color: {}
+  },
+  setup(d) {
+    return (t, n) => (a(), u("i", {
+      class: p(["icon-kl", `icon-kl-${t.name}`, t.color ? `text-${t.color}` : ""]),
+      style: W(t.size ? `font-size: ${t.size}` : void 0)
+    }, null, 6));
+  }
+}), N = /* @__PURE__ */ w(Ce, [["__scopeId", "data-v-941765ee"]]), Ve = {
+  key: 0,
+  class: "code-field__label"
+}, ze = { class: "code-field__inputs" }, Ie = ["onUpdate:modelValue", "disabled", "onInput", "onKeydown", "onPaste"], Re = /* @__PURE__ */ C({
+  __name: "AppCodeInput",
+  props: {
+    length: { default: 5 },
+    size: { default: _.MD },
+    label: {},
+    disabled: { type: Boolean },
+    loading: { type: Boolean },
+    autofocus: { type: Boolean },
+    color: {}
+  },
+  emits: ["update:modelValue", "completed"],
+  setup(d, { expose: t, emit: n }) {
+    const e = d, i = n, l = L(Array(e.length).fill("")), o = L([]), g = M(() => [
+      "code-field",
+      {
+        "code-field_disabled": e.disabled || e.loading
+      },
+      `code-field_${e.size}`,
+      `code-field_${e.color}`
+    ]), k = M(() => {
+      let s = "";
+      return e.size == _.SM && (s += `width: ${e.length * 26 + (e.length - 1) * 5}px`), e.size == _.MD && (s += `width: ${e.length * 32 + (e.length - 1) * 8}px`), e.size == _.LG && (s += `width: ${e.length * 44 + (e.length - 1) * 10}px`), s;
+    }), U = (s, c) => {
+      var m;
+      const b = s.target.value;
+      if (b.length === 1)
+        c < e.length - 1 && o.value && ((m = o.value[c + 1]) == null || m.focus());
+      else if (b.length > 1) {
+        const r = b.slice(0, e.length - c).split("");
+        r.forEach((v, y) => {
+          l.value[c + y] = v;
+        }), P(() => {
+          var v;
+          o.value && ((v = o.value[Math.min(c + r.length, e.length - 1)]) == null || v.focus());
+        });
+      }
+    }, R = (s) => {
+      var c;
+      l.value[s] === "" && o.value && s > 0 && ((c = o.value[s - 1]) == null || c.focus());
+    }, E = (s, c) => {
+      var m;
+      s.preventDefault();
+      const V = ((m = s.clipboardData) == null ? void 0 : m.getData("text")) ?? "";
+      if (!V) return;
+      const b = V.slice(0, e.length - c).split("");
+      b.forEach((r, v) => {
+        l.value[c + v] = r;
+      }), P(() => {
+        var r;
+        o.value && ((r = o.value[Math.min(c + b.length, e.length - 1)]) == null || r.focus());
+      });
+    };
+    Y(
+      l,
+      (s) => {
+        const c = s.join("");
+        A(c);
+      },
+      { deep: !0 }
+    );
+    const A = (s) => {
+      i("update:modelValue", s), s.length === e.length && !s.includes(" ") && i("completed", s);
+    }, S = (s) => {
+      s && (l.value = s.split("").slice(0, e.length));
+    };
+    return Z(() => {
+      e.autofocus && o.value && o.value[0] && o.value[0].focus();
+    }), t({
+      injectCode: S
+    }), (s, c) => (a(), u("div", {
+      class: p(g.value),
+      style: W(k.value)
+    }, [
+      s.label ? (a(), u("label", Ve, I(s.label), 1)) : f("", !0),
+      h("div", ze, [
+        (a(!0), u(T, null, H(s.length, (V, b) => q((a(), u("input", {
+          key: b,
+          "onUpdate:modelValue": (m) => l.value[b] = m,
+          ref_for: !0,
+          ref_key: "inputRefs",
+          ref: o,
+          type: "number",
+          maxlength: "1",
+          class: "code-field__input",
+          disabled: s.disabled || s.loading,
+          onInput: (m) => U(m, b),
+          onKeydown: oe((m) => R(b), ["backspace"]),
+          onPaste: (m) => E(m, b)
+        }, null, 40, Ie)), [
+          [le, l.value[b]]
+        ])), 128))
+      ]),
+      s.loading ? (a(), $(de, {
+        key: 1,
+        indeterminate: "",
+        rounded: "",
+        color: s.color,
+        class: "code-field__loading"
+      }, null, 8, ["color"])) : f("", !0)
+    ], 6));
+  }
+}), Je = /* @__PURE__ */ w(Re, [["__scopeId", "data-v-4e11db87"]]), Ae = ["onClick", "disabled"], Se = /* @__PURE__ */ C({
+  __name: "AppSegment",
+  props: /* @__PURE__ */ F({
+    options: {},
+    disabled: { type: Boolean },
+    size: { default: _.MD },
+    color: { default: K.PRIMARY },
+    glass: { type: Boolean },
+    blur: { type: Boolean }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(d) {
+    const t = J(d, "modelValue"), n = d, e = Q("scroller"), i = Q("content"), l = Q("buttons"), o = L(!1), g = L(!1), k = L({ left: 0, width: 0 }), U = M(() => [
+      "app-segment",
+      {
+        "app-segment_disabled": n.disabled,
+        "app-segment_scrollable": g.value,
+        "app-segment_glass": n.glass,
+        "app-segment_blur": n.blur
+      },
+      `app-segment_${n.size}`,
+      `app-segment_${n.color}`
+    ]), R = M(
+      () => n.options.findIndex((r) => r.value === t.value)
+    ), E = M(() => ({
+      width: `${k.value.width}px`,
+      transform: `translateX(${k.value.left}px)`,
+      opacity: k.value.width ? 1 : 0
+    }));
+    function A() {
+      var v;
+      const r = (v = l.value) == null ? void 0 : v[R.value];
+      k.value = r ? { left: r.offsetLeft, width: r.offsetWidth } : { left: 0, width: 0 }, e.value && (g.value = e.value.scrollWidth - e.value.clientWidth > 1);
+    }
+    function S(r = "smooth") {
+      var y, D;
+      const v = (y = l.value) == null ? void 0 : y[R.value];
+      !v || !((D = e.value) != null && D.scrollTo) || e.value.scrollTo({
+        left: v.offsetLeft + v.offsetWidth / 2 - e.value.clientWidth / 2,
+        behavior: r
+      });
+    }
+    function s(r) {
+      n.disabled || (t.value = r);
+    }
+    let c = !0;
+    function V() {
+      c = !1;
+    }
+    function b() {
+      A(), c && S();
+    }
+    let m;
+    return Z(async () => {
+      A(), await P(), S("auto"), o.value = !0, typeof ResizeObserver < "u" && e.value && i.value && (m = new ResizeObserver(b), m.observe(e.value), m.observe(i.value));
+    }), te(() => m == null ? void 0 : m.disconnect()), Y(
+      [R, g, () => n.options, () => n.size],
+      () => P(A)
+    ), Y(R, () => {
+      c = !0, P(() => S());
+    }), (r, v) => (a(), u("div", {
+      ref_key: "scroller",
+      ref: e,
+      class: p(U.value),
+      onWheelPassive: V,
+      onTouchstartPassive: V
+    }, [
+      h("div", {
+        ref_key: "content",
+        ref: i,
+        class: "app-segment__content"
+      }, [
+        h("div", {
+          class: p(["app-segment__thumb", { "app-segment__thumb_animated": o.value }]),
+          style: W(E.value)
+        }, null, 6),
+        (a(!0), u(T, null, H(r.options, (y, D) => (a(), u("button", {
+          ref_for: !0,
+          ref_key: "buttons",
+          ref: l,
+          key: D,
+          class: p(["app-segment__btn", { "app-segment__btn_active": t.value === y.value }]),
+          onClick: (Ue) => s(y.value),
+          disabled: r.disabled
+        }, [
+          z(r.$slots, "option", { option: y }, () => [
+            G(I(y.label), 1)
+          ], !0)
+        ], 10, Ae))), 128))
+      ], 512)
+    ], 34));
+  }
+}), xe = /* @__PURE__ */ w(Se, [["__scopeId", "data-v-ae0383f8"]]), Le = {}, Pe = { class: "system-menu" };
+function De(d, t) {
+  return a(), u("div", Pe, [
+    z(d.$slots, "default", {}, void 0, !0)
+  ]);
+}
+const eo = /* @__PURE__ */ w(Le, [["render", De], ["__scopeId", "data-v-5649b2f4"]]), Te = { class: "menu-item__content" }, We = {
+  key: 0,
+  class: "menu-item__value"
+}, Oe = /* @__PURE__ */ C({
+  __name: "MenuItem",
+  props: /* @__PURE__ */ F({
+    label: {},
+    icon: {},
+    iconRight: {},
+    arrow: { type: Boolean },
+    color: {},
+    to: {},
+    href: {},
+    target: {},
+    disabled: { type: Boolean },
+    toggle: { type: Boolean },
+    isMobile: { type: Boolean }
+  }, {
+    modelValue: { type: Boolean },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ F(["click"], ["update:modelValue"]),
+  setup(d, { emit: t }) {
+    const n = d, e = t, i = J(d, "modelValue"), l = async () => {
+      n.toggle && (i.value = !i.value), e("click");
+    };
+    return (o, g) => (a(), $(B(re), {
+      class: p(["menu-item", {
+        "menu-item_disabled": o.disabled,
+        "menu-item_mobile": o.isMobile
+      }]),
+      to: o.to,
+      href: o.href,
+      target: o.target,
+      disable: o.disabled,
+      clickable: "",
+      onClick: l
+    }, {
+      default: X(() => [
+        o.icon ? (a(), $(B(N), {
+          key: 0,
+          name: o.icon.name,
+          class: p(["menu-item__icon", `bg-${o.icon.color}`])
+        }, null, 8, ["name", "class"])) : f("", !0),
+        h("div", Te, [
+          h("span", {
+            class: p(["app-menu-item__label", o.color ? `text-${o.color}` : ""])
+          }, [
+            G(I(o.label) + " ", 1),
+            z(o.$slots, "default", {}, void 0, !0)
+          ], 2),
+          o.$slots.value ? (a(), u("span", We, [
+            z(o.$slots, "value", {}, void 0, !0)
+          ])) : f("", !0),
+          o.toggle ? (a(), $(B(x), {
+            key: 1,
+            modelValue: i.value,
+            "onUpdate:modelValue": g[0] || (g[0] = (k) => i.value = k)
+          }, null, 8, ["modelValue"])) : f("", !0),
+          o.iconRight ? (a(), $(B(N), {
+            key: 2,
+            class: "menu-item__icon-right",
+            name: o.iconRight.name,
+            color: o.iconRight.color
+          }, null, 8, ["name", "color"])) : f("", !0),
+          o.arrow ? (a(), $(B(N), {
+            key: 3,
+            class: "menu-item__icon-right menu-item__arrow",
+            name: "arrow-right"
+          })) : f("", !0)
+        ])
+      ]),
+      _: 3
+    }, 8, ["class", "to", "href", "target", "disable"]));
+  }
+}), oo = /* @__PURE__ */ w(Oe, [["__scopeId", "data-v-b9907ab7"]]), lo = O(
+  () => import("./AppButtonCopy-BjQVrYEH.js")
+), to = O(
+  () => import("./AppSelect-pGQF24bM.js")
+), no = O(
+  () => import("./DropdownButton-BYc2A5TU.js")
+), ao = O(
+  () => import("./BottomSheet-BV1JZxic.js")
+);
+export {
+  qe as A,
+  ao as B,
+  K as C,
+  no as D,
+  oo as M,
+  He as P,
+  _ as S,
+  w as _,
+  Ze as a,
+  lo as b,
+  Je as c,
+  N as d,
+  xe as e,
+  to as f,
+  x as g,
+  eo as h,
+  je as i
+};