@studio-west/component-sw 0.8.8 → 0.9.1

package/dist/{SwInput-Crfh0Z91.js → SwInput-BfVbDGqo.js}

@@ -1,9 +1,9 @@
-import { mergeModels as y, useModel as w, ref as D, computed as V, watch as C, createElementBlock as d, openBlock as s, normalizeClass as I, createBlock as v, renderSlot as _, createCommentVNode as x, withDirectives as A, createTextVNode as E, toDisplayString as R, createElementVNode as T, vModelDynamic as F } from "vue";
-import { S } from "./index-BU4MvzL6.js";
+import { mergeModels as y, useModel as w, ref as D, computed as V, watch as C, createElementBlock as d, openBlock as u, normalizeClass as A, createBlock as _, renderSlot as v, createCommentVNode as x, withDirectives as E, createTextVNode as I, toDisplayString as R, createElementVNode as T, vModelDynamic as F } from "vue";
+import { _ as k } from "./index-BqSnlKYz.js";
 const O = ["for"], U = {
   key: 0,
   title: "Это поле обязательно для заполнения."
-}, j = ["required", "placeholder", "type", "id", "name", "size", "maxlength", "minlength", "autofocus", "readonly", "inputmode"], J = {
+}, j = ["required", "placeholder", "type", "id", "name", "size", "maxlength", "minlength", "autofocus", "readonly", "inputmode", "spellcheck"], J = {
   __name: "SwInput",
   props: /* @__PURE__ */ y({
     before: { type: String, default: "" },
@@ -20,7 +20,8 @@ const O = ["for"], U = {
     minlength: { type: Number, default: 1 },
     inputSize: { type: Number, default: 60 },
     autofocus: { type: Boolean, default: !1 },
-    readonly: { type: Boolean, default: !1 }
+    readonly: { type: Boolean, default: !1 },
+    spellcheck: { type: Boolean, default: !1 }
   }, {
     modelValue: {},
     modelModifiers: {}
@@ -28,18 +29,18 @@ const O = ["for"], U = {
   emits: /* @__PURE__ */ y(["suffix", "prefix", "focusInput"], ["update:modelValue"]),
   setup(m, { emit: b }) {
     var g;
-    const o = w(m, "modelValue"), e = m, r = D(null), i = b, k = (t) => {
+    const o = w(m, "modelValue"), e = m, r = D(null), i = b, S = (t) => {
       i("focusInput"), t.target.setSelectionRange(o.value.length, o.value.length), r.value !== null && (r.value.style.top = "-.6em");
-    }, z = (t) => {
+    }, $ = (t) => {
       var l;
       ((l = o.value) == null ? void 0 : l.length) === 0 && r.value !== null && r.value.removeAttribute("style");
     };
     ((g = o.value) == null ? void 0 : g.length) > 0 && r.value !== null && (r.value.style.top = "-.6em");
-    const $ = () => {
+    const z = () => {
       i("suffix");
-    }, q = () => {
+    }, B = () => {
       i("prefix");
-    }, B = V(
+    }, q = V(
       () => {
         let t = ["sw-input"];
         return e.size.length > 0 && t.push("sw-" + e.size), e.class.length > 0 && t.push(e.class), t;
@@ -55,32 +56,32 @@ const O = ["for"], U = {
       const c = "+0 (___) ___-__-__";
       let a = 0;
       const N = c.replace(/\D/g, ""), h = n.replace(/\D/g, "");
-      let u = c.replace(/[_\d]/g, (f) => a < h.length ? h.charAt(a++) || N.charAt(a) : f);
-      a = u.indexOf("_"), a !== -1 && (a = a < 5 ? 3 : a, u = u.slice(0, a));
+      let s = c.replace(/[_\d]/g, (f) => a < h.length ? h.charAt(a++) || N.charAt(a) : f);
+      a = s.indexOf("_"), a !== -1 && (a = a < 5 ? 3 : a, s = s.slice(0, a));
       let p = c.slice(0, n.length).replace(
         /_+/g,
         (f) => `\\d{1,${f.length}}`
       ).replace(/[+()]/g, "\\$&");
-      if (p = new RegExp(`^${p}$`), u = u.replace(/[-—]$|(\) )$/g, ""), !p.test(n) || n.length < 5) return u;
+      if (p = new RegExp(`^${p}$`), s = s.replace(/[-—]$|(\) )$/g, ""), !p.test(n) || n.length < 5) return s;
     };
-    return (t, l) => (s(), d("div", {
-      class: I(B.value)
+    return (t, l) => (u(), d("div", {
+      class: A(q.value)
     }, [
-      e.before.length > 0 ? (s(), v(S, {
+      e.before.length > 0 ? (u(), _(k, {
         key: 0,
         "icon-class": e.before,
-        onClick: q
-      }, null, 8, ["icon-class"])) : _(t.$slots, "prefix", { key: 1 }),
-      e.label.length > 0 ? (s(), d("label", {
+        onClick: B
+      }, null, 8, ["icon-class"])) : v(t.$slots, "prefix", { key: 1 }),
+      e.label.length > 0 ? (u(), d("label", {
         key: 2,
         for: e.name,
         ref_key: "lab",
         ref: r
       }, [
-        E(R(e.label), 1),
-        e.required ? (s(), d("span", U, "*")) : x("", !0)
+        I(R(e.label), 1),
+        e.required ? (u(), d("span", U, "*")) : x("", !0)
       ], 8, O)) : x("", !0),
-      A(T("input", {
+      E(T("input", {
         "onUpdate:modelValue": l[0] || (l[0] = (n) => o.value = n),
         required: e.required,
         placeholder: e.required && e.label.length === 0 ? e.placeholder + "*" : e.placeholder,
@@ -88,21 +89,22 @@ const O = ["for"], U = {
         id: e.name,
         name: e.name,
         size: e.inputSize,
-        onFocus: k,
-        onBlur: z,
+        onFocus: S,
+        onBlur: $,
         maxlength: e.maxlength,
         minlength: e.minlength,
         autofocus: e.autofocus,
         readonly: e.readonly,
-        inputmode: e.inputMode
+        inputmode: e.inputMode,
+        spellcheck: e.spellcheck
       }, null, 40, j), [
         [F, o.value]
       ]),
-      e.after.length > 0 ? (s(), v(S, {
+      e.after.length > 0 ? (u(), _(k, {
         key: 3,
         "icon-class": e.after,
-        onClick: $
-      }, null, 8, ["icon-class"])) : _(t.$slots, "suffix", { key: 4 })
+        onClick: z
+      }, null, 8, ["icon-class"])) : v(t.$slots, "suffix", { key: 4 })
     ], 2));
   }
 };

package/dist/SwMessage-DL3XthhU.js

@@ -0,0 +1,58 @@
+import { mergeModels as f, useModel as p, ref as g, useSlots as v, watch as k, nextTick as w, onUnmounted as _, createElementBlock as c, openBlock as d, normalizeClass as y, createCommentVNode as h, renderSlot as n, createElementVNode as S, unref as V, createTextVNode as $, createVNode as m, toDisplayString as C, withCtx as E } from "vue";
+import M from "./SwButton-85-tKHA7.js";
+import { _ as N } from "./index-BqSnlKYz.js";
+const L = ["open"], x = { key: 0 }, z = {
+  __name: "SwMessage",
+  props: /* @__PURE__ */ f({
+    name: { type: String, default: "" },
+    class: { type: String, default: "" },
+    iconAfter: { type: String, default: "" }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(a) {
+    const t = p(a, "modelValue"), o = a, s = g(null), u = v(), l = (e) => {
+      s.value && !s.value.contains(e.target) && (t.value = !1);
+    };
+    return k(() => t.value, async (e) => {
+      e ? (await w(), window.addEventListener("click", l, !0)) : window.removeEventListener("click", l);
+    }), _(() => {
+      window.removeEventListener("click", l);
+    }), (e, r) => {
+      var i;
+      return d(), c("dialog", {
+        open: t.value,
+        class: y(["sw-message", o.class]),
+        ref_key: "messageRef",
+        ref: s
+      }, [
+        o.name.length > 0 || (i = V(u)) != null && i.header ? (d(), c("header", x, [
+          n(e.$slots, "header", {}, () => [
+            $(C(o.name) + " ", 1),
+            m(M, {
+              link: "",
+              type: "primary",
+              onClick: r[0] || (r[0] = (A) => t.value = !1)
+            }, {
+              default: E(() => [
+                m(N, {
+                  "icon-class": o.iconAfter
+                }, null, 8, ["icon-class"])
+              ]),
+              _: 1
+            })
+          ])
+        ])) : h("", !0),
+        n(e.$slots, "default"),
+        S("footer", null, [
+          n(e.$slots, "footer")
+        ])
+      ], 10, L);
+    };
+  }
+};
+export {
+  z as default
+};

package/dist/SwPopover-B4oOez4M.js

@@ -0,0 +1,58 @@
+import { mergeModels as m, useModel as c, ref as f, useSlots as v, watch as h, nextTick as y, createElementBlock as i, openBlock as p, normalizeClass as _, createCommentVNode as g, renderSlot as r, createElementVNode as S, unref as k, createTextVNode as P, createVNode as d, toDisplayString as V, withCtx as $ } from "vue";
+import w from "./SwButton-85-tKHA7.js";
+import { _ as C } from "./index-BqSnlKYz.js";
+const N = ["id", "open", "popover"], M = { key: 0 }, T = {
+  __name: "SwPopover",
+  props: /* @__PURE__ */ m({
+    popover: { type: String, default: "auto" },
+    name: { type: String, default: "" },
+    class: { type: String, default: "" },
+    iconAfter: { type: String, default: "" },
+    id: { type: String, default: "Popover" }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(l) {
+    const s = c(l, "modelValue"), e = l, t = f(null), u = v();
+    return h(() => s.value, (o) => {
+      o ? y(() => t.value.showPopover()) : t.value.hidePopover();
+    }), (o, a) => {
+      var n;
+      return p(), i("dialog", {
+        id: e.id,
+        open: s.value,
+        popover: e.popover,
+        class: _("sw-popover" + e.class),
+        ref_key: "Popover",
+        ref: t
+      }, [
+        e.name.length > 0 || (n = k(u)) != null && n.header ? (p(), i("header", M, [
+          r(o.$slots, "header", {}, () => [
+            P(V(e.name) + " ", 1),
+            d(w, {
+              link: "",
+              type: "primary",
+              onClick: a[0] || (a[0] = (x) => t.value.hidePopover())
+            }, {
+              default: $(() => [
+                d(C, {
+                  "icon-class": e.iconAfter
+                }, null, 8, ["icon-class"])
+              ]),
+              _: 1
+            })
+          ])
+        ])) : g("", !0),
+        r(o.$slots, "default"),
+        S("footer", null, [
+          r(o.$slots, "footer")
+        ])
+      ], 10, N);
+    };
+  }
+};
+export {
+  T as default
+};

package/dist/SwSlider-BTpjTOzs.js

@@ -0,0 +1,55 @@
+import { createElementBlock as m, openBlock as s, normalizeStyle as o, createElementVNode as u, toDisplayString as r } from "vue";
+const c = ["min", "max", "step", "value"], p = { class: "slider__value" }, y = {
+  __name: "SwSlider",
+  props: {
+    modelValue: {
+      type: Number,
+      required: !0
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    width: {
+      type: String,
+      default: "300px"
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: n }) {
+    const l = n, d = (t) => {
+      const a = parseFloat(t.target.value);
+      l("update:modelValue", a);
+    }, i = (t) => {
+      const a = parseFloat(t.target.value);
+      l("update:modelValue", a);
+    };
+    return (t, a) => (s(), m("div", {
+      class: "slider",
+      style: o({ "--slider-width": e.width })
+    }, [
+      u("input", {
+        type: "range",
+        class: "slider__input",
+        min: e.min,
+        max: e.max,
+        step: e.step,
+        value: e.modelValue,
+        onInput: d,
+        onChange: i
+      }, null, 40, c),
+      u("div", p, r(e.modelValue), 1)
+    ], 4));
+  }
+};
+export {
+  y as default
+};

package/dist/index-BqSnlKYz.js

@@ -0,0 +1,165 @@
+import { createElementBlock as d, unref as D, openBlock as u, mergeProps as w, createElementVNode as b, ref as $, onMounted as x, onUnmounted as A, computed as I, createBlock as f, Transition as C, withCtx as M, createCommentVNode as P, normalizeClass as j, renderSlot as m, createTextVNode as E, toDisplayString as N, createApp as z, h as F, defineAsyncComponent as O } from "vue";
+function B(e) {
+  return /^(https?:|mailto:|tel:)/.test(e);
+}
+function q(e, n) {
+  if (arguments.length === 0 || !e)
+    return null;
+  const o = n || "{Y}-{m}-{d} {G}:{i}:{s}";
+  let t;
+  typeof e == "object" ? t = e : (typeof e == "string" && (/^[0-9]+$/.test(e) ? e = parseInt(e) : e = e.replace(new RegExp(/-/gm), "/")), typeof e == "number" && e.toString().length === 10 && (e = e * 1e3), t = new Date(e));
+  const s = "ru-RU", r = {
+    Y: t.getFullYear(),
+    m: (t.getMonth() + 1).toString().padStart(2, "0"),
+    d: t.getDate(),
+    dd: t.getDate().toString().padStart(2, "0"),
+    G: t.getHours(),
+    H: t.getHours().toString().padStart(2, "0"),
+    i: t.getMinutes().toString().padStart(2, "0"),
+    s: t.getSeconds().toString().padStart(2, "0"),
+    D: new Intl.DateTimeFormat(s, { weekday: "short" }).format(t),
+    F: new Intl.DateTimeFormat(s, { month: "long" }).format(t),
+    M: new Intl.DateTimeFormat(s, { month: "short" }).format(t)
+  };
+  return o.replace(/{(dd|[YmdGHisDFM])+}/g, (i, c) => r[c]);
+}
+const G = ["href"], S = {
+  __name: "SwIcon",
+  props: {
+    prefix: { type: String, default: "icon" },
+    iconClass: { type: String, required: !0 },
+    className: { type: String, default: "" }
+  },
+  setup(e) {
+    const n = e, o = B(n.iconClass);
+    return (t, s) => D(o) ? (u(), d("div", w({
+      key: 0,
+      style: "mask: url(" + n.iconClass + ") no-repeat 50% 50%;",
+      class: "svg-external-icon svg-icon"
+    }, t.$attrs), null, 16)) : (u(), d("svg", w({
+      key: 1,
+      class: "svg-icon icon-" + (n.className || n.iconClass),
+      "aria-hidden": "true"
+    }, t.$attrs), [
+      b("use", {
+        href: "#" + n.prefix + "-" + n.iconClass
+      }, null, 8, G)
+    ], 16));
+  }
+}, H = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: S
+}, Symbol.toStringTag, { value: "Module" })), _ = {
+  __name: "SwAlert",
+  props: {
+    message: { type: String, default: "Default message" },
+    before: { type: String, default: "" },
+    class: { type: String, default: "" },
+    after: { type: String, default: "" },
+    size: { type: String, default: "" },
+    duration: { type: Number, default: 6e3 },
+    type: { type: String, default: "info", validator: (e) => ["success", "warning", "error", "info"].includes(e) }
+  },
+  emits: ["closed"],
+  setup(e, { emit: n }) {
+    const o = e, t = n, s = $(!1);
+    let r = null;
+    const i = () => {
+      s.value = !0, v();
+    }, c = () => {
+      s.value = !1, t("closed");
+    }, a = () => {
+      r && (clearTimeout(r), r = null);
+    }, T = () => {
+      v();
+    }, v = () => {
+      r = setTimeout(c, o.duration);
+    };
+    x(() => {
+      i();
+    }), A(() => {
+      r && clearTimeout(r);
+    });
+    const k = I(() => {
+      const l = ["sw-alert"];
+      return o.size.length > 0 && l.push(`sw-${o.size}`), o.type.length > 0 && l.push(`sw-${o.type}`), o.class.length > 0 && l.push(o.class), l;
+    });
+    return (l, U) => (u(), f(C, { name: "fade" }, {
+      default: M(() => [
+        s.value ? (u(), d("div", {
+          key: 0,
+          class: j(k.value),
+          onMouseenter: a,
+          onMouseleave: T
+        }, [
+          o.before.length > 0 ? (u(), f(S, {
+            key: 0,
+            "icon-class": o.before
+          }, null, 8, ["icon-class"])) : m(l.$slots, "prefix", { key: 1 }),
+          m(l.$slots, "default", {}, () => [
+            E(N(o.message), 1)
+          ]),
+          o.after.length > 0 ? (u(), f(S, {
+            key: 2,
+            "icon-class": o.after,
+            onClick: c
+          }, null, 8, ["icon-class"])) : m(l.$slots, "suffix", { key: 3 }),
+          b("footer", null, [
+            m(l.$slots, "footer")
+          ])
+        ], 34)) : P("", !0)
+      ]),
+      _: 3
+    }));
+  }
+}, Y = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: _
+}, Symbol.toStringTag, { value: "Module" }));
+let p = document.querySelector("div.sw-alert-wrapper");
+function y(e = {}) {
+  p || (p = document.createElement("div"), p.className = "sw-alert-wrapper", document.body.appendChild(p));
+  const {
+    prefix: n,
+    suffix: o,
+    footer: t,
+    ...s
+  } = e, r = (a) => a == null ? null : typeof a == "function" ? a : typeof a == "string" ? () => [a] : Array.isArray(a) ? () => a : () => [a], i = z({
+    setup() {
+      return () => F(
+        _,
+        {
+          ...s,
+          onClose: () => {
+            p.removeChild(i._container), i.unmount();
+          }
+        },
+        {
+          ...n != null && { prefix: r(n) },
+          ...o != null && { suffix: r(o) },
+          ...t != null && { footer: r(t) }
+        }
+      );
+    }
+  }), c = i.mount(document.createElement("div"));
+  p.appendChild(c.$el);
+}
+const h = /* @__PURE__ */ Object.assign({ "./components/SwAlert.vue": () => Promise.resolve().then(() => Y), "./components/SwButton.vue": () => import("./SwButton-85-tKHA7.js"), "./components/SwCollapse.vue": () => import("./SwCollapse-CuN3EbT6.js"), "./components/SwDatePicker.vue": () => import("./SwDatePicker-jkMxCTN0.js"), "./components/SwDropdown.vue": () => import("./SwDropdown-DQGTnnKw.js"), "./components/SwDropdownItem.vue": () => import("./SwDropdownItem-BcFUu896.js"), "./components/SwFormItem.vue": () => import("./SwFormItem-CaA4jsoa.js"), "./components/SwGide.vue": () => import("./SwGide-TCfG-aUP.js"), "./components/SwIcon.vue": () => Promise.resolve().then(() => H), "./components/SwInput.vue": () => import("./SwInput-BfVbDGqo.js"), "./components/SwMessage.vue": () => import("./SwMessage-DL3XthhU.js"), "./components/SwPopover.vue": () => import("./SwPopover-B4oOez4M.js"), "./components/SwSection.vue": () => import("./SwSection-D8ooQ21I.js"), "./components/SwSelect.vue": () => import("./SwSelect-C2RKinez.js"), "./components/SwSkeleton.vue": () => import("./SwSkeleton-B7ysp8L9.js"), "./components/SwSkeletonItem.vue": () => import("./SwSkeletonItem-CU7LvihY.js"), "./components/SwSlider.vue": () => import("./SwSlider-BTpjTOzs.js"), "./components/SwSwitch.vue": () => import("./SwSwitch-6rl1IT4p.js"), "./components/SwTable.vue": () => import("./SwTable-BLrFhlyO.js"), "./components/SwTableColumn.vue": () => import("./SwTableColumn-BLF5bPuJ.js"), "./components/SwTabs.vue": () => import("./SwTabs-DkSI4oAh.js"), "./components/SwTabsPane.vue": () => import("./SwTabsPane-Dwtj8g7T.js") }), g = {};
+for (const e in h) {
+  const n = e.split("/").pop().replace(".vue", "").replace(/-(\w)/g, (o, t) => t.toUpperCase());
+  g[n] = O(() => h[e]());
+}
+const L = {
+  install(e) {
+    Object.keys(g).forEach((n) => {
+      e.component(n, g[n]);
+    }), e.config.globalProperties.$Alert = y, e.provide("Alert", y);
+  }
+};
+export {
+  y as A,
+  L,
+  S as _,
+  g as c,
+  q as p
+};