@studio-west/component-sw 0.0.1

package/README.md

@@ -0,0 +1,5 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).

package/dist/SwButton-CQh1Mtze.js

@@ -0,0 +1,30 @@
+import { computed as n, createElementBlock as o, openBlock as a, normalizeClass as u, renderSlot as p } from "vue";
+const i = {
+  __name: "SwButton",
+  props: {
+    class: { type: String, default: "" },
+    size: { type: String, default: "" },
+    // large, small
+    type: { type: String, default: "" },
+    // primary, success, info, warning, danger,
+    round: { type: Boolean, default: !1 },
+    text: { type: Boolean, default: !1 },
+    link: { type: Boolean, default: !1 }
+  },
+  setup(s) {
+    const e = s, l = n(
+      () => {
+        let t = ["sw-button"];
+        return e.size.length > 0 && t.push("sw-" + e.size), e.type.length > 0 && t.push("sw-" + e.type), e.round && t.push("sw-round"), e.text && t.push("sw-text"), e.link && t.push("sw-link"), e.class.length > 0 && t.push(e.class), t;
+      }
+    );
+    return (t, r) => (a(), o("button", {
+      class: u(l.value)
+    }, [
+      p(t.$slots, "default")
+    ], 2));
+  }
+};
+export {
+  i as default
+};

package/dist/SwCollapse-CjL9dpO-.js

@@ -0,0 +1,24 @@
+import { onMounted as a, computed as r, ref as n, createElementBlock as p, openBlock as c, normalizeStyle as u, normalizeClass as i, renderSlot as f } from "vue";
+const v = {
+  __name: "SwCollapse",
+  props: {
+    visual: { type: Boolean, default: !0 }
+  },
+  setup(t) {
+    a(() => {
+      o.value = "0px";
+    });
+    const e = n("0px"), l = t, o = r(() => l.visual ? `${e.value.scrollHeight}px` : "0px");
+    return (s, m) => (c(), p("div", {
+      class: i(["sw-collapse", { open: l.visual }]),
+      style: u({ height: o.value }),
+      ref_key: "collapse",
+      ref: e
+    }, [
+      f(s.$slots, "default")
+    ], 6));
+  }
+};
+export {
+  v as default
+};

package/dist/SwDropdown-CngCMKee.js

@@ -0,0 +1,85 @@
+import { ref as c, computed as E, onMounted as R, onUnmounted as L, createElementBlock as g, openBlock as r, normalizeClass as v, renderSlot as y, createBlock as W, Teleport as $, createCommentVNode as C, normalizeStyle as B, nextTick as T } from "vue";
+const O = {
+  __name: "SwDropdown",
+  props: {
+    class: { type: String, default: "" },
+    size: { type: String, default: "" },
+    type: { type: String, default: "" },
+    trigger: { type: String, default: "click" },
+    placement: { type: String, default: "bottom-left" },
+    maxWidth: { type: Number, default: 0 }
+  },
+  setup(k) {
+    const n = k, l = c(!1), s = c(null), a = c(null), u = c({}), b = E(
+      () => {
+        let e = ["sw-dropdown"];
+        return n.size.length > 0 && e.push("sw-" + n.size), n.type.length > 0 && e.push("sw-" + n.type), e;
+      }
+    ), d = async () => {
+      if (await T(), !a.value) return;
+      const e = s.value.getBoundingClientRect(), i = window.pageYOffset || document.documentElement.scrollTop, w = window.pageXOffset || document.documentElement.scrollLeft, p = a.value.offsetHeight, h = a.value.offsetWidth;
+      let t = e.left + e.width / 2 + w, o = e.bottom - e.height / 2 + i;
+      const [x, z] = n.placement.split("-", 2);
+      switch (console.log(n.placement), x) {
+        case "bottom":
+          o = o + e.height / 2 + 8;
+          break;
+        case "top":
+          o = o - e.height / 2 - 8 - p;
+          break;
+        case "left":
+          t = t - h - e.width / 2 - 10, o = o - p / 2;
+          break;
+        case "right":
+          t = t + e.width / 2 + 8, o = o - p / 2;
+          break;
+      }
+      switch (z) {
+        case "left":
+          t = t - h + e.width / 2;
+          break;
+        case "right":
+          t = t - e.width / 2;
+          break;
+      }
+      t < 0 && (t = 0), o < 0 && (o = 0), u.value = {
+        position: "absolute",
+        top: `${o}px`,
+        left: `${t}px`,
+        maxWidth: n.maxWidth === 0 ? "" : `${n.maxWidth}px`
+      };
+    }, S = async () => {
+      l.value = !l.value, l.value && await d();
+    }, f = () => {
+      l.value && d();
+    }, m = (e) => {
+      s.value && !s.value.contains(e.target) && (l.value = !1);
+    };
+    return R(() => {
+      document.addEventListener("click", m), window.addEventListener("resize", f);
+    }), L(() => {
+      document.removeEventListener("click", m), window.removeEventListener("resize", f);
+    }), (e, i) => (r(), g("div", {
+      class: v(b.value),
+      onClick: i[0] || (i[0] = (w) => S()),
+      ref_key: "dropdownRef",
+      ref: s
+    }, [
+      y(e.$slots, "default"),
+      (r(), W($, { to: "body" }, [
+        l.value ? (r(), g("ul", {
+          key: 0,
+          ref_key: "popupRef",
+          ref: a,
+          class: v(["sw-dropdown-popup", n.class]),
+          style: B(u.value)
+        }, [
+          y(e.$slots, "dropdown")
+        ], 6)) : C("", !0)
+      ]))
+    ], 2));
+  }
+};
+export {
+  O as default
+};

package/dist/SwDropdownItem-C3_wJ1DL.js

@@ -0,0 +1,32 @@
+import { computed as l, resolveComponent as c, createElementBlock as r, openBlock as a, normalizeClass as i, createVNode as p, renderSlot as u } from "vue";
+const m = {
+  __name: "SwDropdownItem",
+  props: {
+    class: { type: String, default: "" },
+    size: { type: String, default: "" },
+    // large, small
+    type: { type: String, default: "" },
+    // primary, success, info, warning, danger,
+    iconBefore: { type: String, default: "" }
+  },
+  setup(s) {
+    const e = s, n = l(
+      () => {
+        let t = ["sw-dropdown-item"];
+        return e.size.length > 0 && t.push("sw-" + e.size), e.type.length > 0 && t.push("sw-" + e.type), e.class.length > 0 && t.push(e.class), t;
+      }
+    );
+    return (t, f) => {
+      const o = c("svg-icon");
+      return a(), r("li", {
+        class: i(n.value)
+      }, [
+        p(o, { "icon-class": s.iconBefore }, null, 8, ["icon-class"]),
+        u(t.$slots, "default")
+      ], 2);
+    };
+  }
+};
+export {
+  m as default
+};

package/dist/SwFormItem-CgahR93o.js

@@ -0,0 +1,25 @@
+import { computed as r, createElementBlock as o, openBlock as a, normalizeClass as n, renderSlot as p } from "vue";
+const m = {
+  __name: "SwFormItem",
+  props: {
+    class: { type: String, default: "" },
+    type: { type: String, default: "" }
+    // start, end, around
+  },
+  setup(s) {
+    const t = s, l = r(
+      () => {
+        let e = ["sw-form-item"];
+        return t.type.length > 0 && e.push("sw-" + t.type), t.class.length > 0 && e.push(t.class), e;
+      }
+    );
+    return (e, c) => (a(), o("div", {
+      class: n(l.value)
+    }, [
+      p(e.$slots, "default")
+    ], 2));
+  }
+};
+export {
+  m as default
+};

package/dist/SwInput-DpflrHQm.js

@@ -0,0 +1,120 @@
+import { createElementBlock as i, openBlock as a, mergeProps as d, createElementVNode as c, mergeModels as p, useModel as _, ref as b, computed as C, normalizeClass as V, createBlock as m, renderSlot as y, createCommentVNode as z, withDirectives as E, createTextVNode as N, toDisplayString as $, vModelDynamic as q } from "vue";
+function w(l) {
+  return /^(https?:|mailto:|tel:)/.test(l);
+}
+const B = (l, r) => {
+  const t = l.__vccOpts || l;
+  for (const [e, s] of r)
+    t[e] = s;
+  return t;
+}, M = {
+  name: "SvgIcon",
+  props: {
+    prefix: {
+      type: String,
+      default: "icon"
+    },
+    iconClass: {
+      type: String,
+      required: !0
+    },
+    className: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    isExt() {
+      return w(this.iconClass);
+    }
+  }
+}, D = ["href"];
+function I(l, r, t, e, s, u) {
+  return u.isExt ? (a(), i("div", d({
+    key: 0,
+    style: "mask: url(" + t.iconClass + ") no-repeat 50% 50%;",
+    class: "svg-external-icon svg-icon"
+  }, l.$attrs), null, 16)) : (a(), i("svg", d({
+    key: 1,
+    class: "svg-icon " + t.className,
+    "aria-hidden": "true"
+  }, l.$attrs), [
+    c("use", {
+      href: "#" + t.prefix + "-" + t.iconClass
+    }, null, 8, D)
+  ], 16));
+}
+const g = /* @__PURE__ */ B(M, [["render", I]]), A = ["for"], F = ["placeholder", "type", "id", "name"], P = {
+  __name: "SwInput",
+  props: /* @__PURE__ */ p({
+    before: { type: String, default: "" },
+    after: { type: String, default: "" },
+    placeholder: { type: String, default: "" },
+    label: { type: String, default: "" },
+    name: { type: String, required: !0 },
+    class: { type: String, default: "" },
+    size: { type: String, default: "" },
+    type: { type: String, default: "text" }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ p(["suffix"], ["update:modelValue"]),
+  setup(l, { emit: r }) {
+    var f;
+    const t = _(l, "modelValue"), e = l, s = b(null), u = r, v = () => {
+      s.value !== null && (s.value.style.top = "-.6em");
+    }, h = () => {
+      var n;
+      ((n = t.value) == null ? void 0 : n.length) == 0 && s.value !== null && s.value.removeAttribute("style");
+    };
+    ((f = t.value) == null ? void 0 : f.length) > 0 && s.value !== null && (s.value.style.top = "-.6em");
+    const S = () => {
+      u("suffix");
+    }, k = C(
+      () => {
+        let n = ["sw-input"];
+        return e.size.length > 0 && n.push("sw-" + e.size), e.class.length > 0 && n.push(e.class), n;
+      }
+    );
+    return (n, o) => (a(), i("div", {
+      class: V(k.value)
+    }, [
+      e.before.length > 0 ? (a(), m(g, {
+        key: 0,
+        "icon-class": e.before
+      }, null, 8, ["icon-class"])) : y(n.$slots, "prefix", { key: 1 }),
+      e.label.length > 0 ? (a(), i("label", {
+        key: 2,
+        for: e.name,
+        ref_key: "lab",
+        ref: s
+      }, [
+        N($(e.label), 1),
+        o[1] || (o[1] = c("span", { title: "Это поле обязательно для заполнения." }, "*", -1))
+      ], 8, A)) : z("", !0),
+      E(c("input", {
+        "onUpdate:modelValue": o[0] || (o[0] = (x) => t.value = x),
+        required: "required",
+        placeholder: e.placeholder,
+        type: e.type,
+        id: e.name,
+        name: e.name,
+        size: "60",
+        onFocus: v,
+        onBlur: h,
+        maxlength: "128"
+      }, null, 40, F), [
+        [q, t.value]
+      ]),
+      e.after.length > 0 ? (a(), m(g, {
+        key: 3,
+        "icon-class": e.after,
+        onClick: S
+      }, null, 8, ["icon-class"])) : y(n.$slots, "suffix", { key: 4 })
+    ], 2));
+  }
+};
+export {
+  P as default
+};

package/dist/SwMessage-BGIOC-zp.js

@@ -0,0 +1,53 @@
+import { mergeModels as c, useModel as p, ref as g, resolveComponent as y, createElementBlock as r, createCommentVNode as a, openBlock as m, normalizeClass as k, renderSlot as s, createElementVNode as v, createTextVNode as i, createVNode as d, toDisplayString as V, withCtx as S } from "vue";
+import _ from "./SwButton-CQh1Mtze.js";
+const C = { key: 0 }, w = {
+  __name: "SwMessage",
+  props: /* @__PURE__ */ c({
+    name: { type: String, default: "" },
+    class: { type: String, default: "" },
+    iconAfter: { type: String, default: "" }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(l) {
+    const n = p(l, "modelValue"), e = l, f = g(null);
+    return (o, t) => {
+      const u = y("svg-icon");
+      return n.value ? (m(), r("div", {
+        key: 0,
+        class: k(["sw-message", e.class]),
+        ref_key: "messageRef",
+        ref: f
+      }, [
+        e.name.length > 0 ? (m(), r("header", C, [
+          s(o.$slots, "header", {}, () => [
+            i(V(e.name) + " ", 1),
+            d(_, {
+              link: "",
+              type: "primary",
+              onClick: t[0] || (t[0] = ($) => n.value = !1)
+            }, {
+              default: S(() => [
+                d(u, {
+                  "icon-class": e.iconAfter
+                }, null, 8, ["icon-class"])
+              ]),
+              _: 1
+            })
+          ])
+        ])) : a("", !0),
+        s(o.$slots, "default", {}, () => [
+          t[1] || (t[1] = i("111222"))
+        ]),
+        v("footer", null, [
+          s(o.$slots, "footer")
+        ])
+      ], 2)) : a("", !0);
+    };
+  }
+};
+export {
+  w as default
+};

package/dist/SwSection-CaY8OFmf.js

@@ -0,0 +1,34 @@
+import { resolveComponent as r, createElementBlock as a, openBlock as c, normalizeClass as i, createElementVNode as n, renderSlot as o, createTextVNode as p, createVNode as d, toDisplayString as f } from "vue";
+const S = {
+  __name: "SwSection",
+  props: {
+    name: { type: String, default: "" },
+    class: { type: String, default: "" },
+    iconAfter: { type: String, default: "" }
+  },
+  setup(s) {
+    const e = s;
+    return (t, m) => {
+      const l = r("svg-icon");
+      return c(), a("section", {
+        class: i(e.class)
+      }, [
+        n("header", null, [
+          o(t.$slots, "header", {}, () => [
+            p(f(e.name) + " ", 1),
+            d(l, {
+              "icon-class": e.iconAfter
+            }, null, 8, ["icon-class"])
+          ])
+        ]),
+        o(t.$slots, "default"),
+        n("footer", null, [
+          o(t.$slots, "footer")
+        ])
+      ], 2);
+    };
+  }
+};
+export {
+  S as default
+};

package/dist/SwSkeleton-DWILNFfF.js

@@ -0,0 +1,28 @@
+import { renderSlot as l, createElementBlock as a, createTextVNode as r, openBlock as n, normalizeClass as i, createVNode as m } from "vue";
+import p from "./SwSkeletonItem-CU7LvihY.js";
+const u = {
+  __name: "SwSkeleton",
+  props: {
+    class: { type: String, default: "" },
+    visual: { type: Boolean, default: !1 }
+  },
+  setup(o) {
+    const e = o;
+    return (s, t) => e.visual ? l(s.$slots, "default", { key: 0 }, () => [
+      t[0] || (t[0] = r("1"))
+    ]) : (n(), a("div", {
+      key: 1,
+      class: i(["sw-skeleton", e.class])
+    }, [
+      l(s.$slots, "skeleton", {}, () => [
+        m(p, {
+          animate: "",
+          size: "small"
+        })
+      ])
+    ], 2));
+  }
+};
+export {
+  u as default
+};

package/dist/SwSkeletonItem-CU7LvihY.js

@@ -0,0 +1,29 @@
+import { computed as s, createElementBlock as a, openBlock as n, normalizeStyle as r, normalizeClass as c, createCommentVNode as u } from "vue";
+const m = { key: 0 }, f = {
+  __name: "SwSkeletonItem",
+  props: {
+    width: { type: String, default: "100" },
+    class: { type: String, default: "" },
+    animate: { type: Boolean, default: !1 },
+    size: { type: String, default: "" }
+  },
+  setup(l) {
+    const e = l, i = s(
+      () => {
+        let t = ["sw-skeleton-item"];
+        return e.size.length > 0 && t.push("sw-" + e.size), e.animate && t.push("sw-animate"), e.class.length > 0 && t.push(e.class), t;
+      }
+    ), o = s(() => ({
+      width: e.width + "%"
+    }));
+    return (t, p) => (n(), a("div", {
+      class: c(i.value),
+      style: r(o.value)
+    }, [
+      e.animate ? (n(), a("div", m)) : u("", !0)
+    ], 6));
+  }
+};
+export {
+  f as default
+};

package/dist/SwSwitch-375THfdW.js

@@ -0,0 +1,41 @@
+import { mergeModels as n, useModel as i, createElementBlock as r, openBlock as c, normalizeClass as u, withDirectives as f, createElementVNode as o, renderSlot as m, vModelCheckbox as p } from "vue";
+const b = ["name", "id"], S = ["for", "data-onlabel", "data-offlabel"], w = {
+  __name: "SwSwitch",
+  props: /* @__PURE__ */ n({
+    id: { type: String, default: "checkbox" },
+    class: { type: String, default: "" },
+    name: { type: String, default: "" },
+    on: { type: String, default: "" },
+    off: { type: String, default: "" }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(l) {
+    const t = i(l, "modelValue"), e = l;
+    return (s, a) => (c(), r("div", {
+      class: u(["sw-switch", e.class])
+    }, [
+      f(o("input", {
+        type: "checkbox",
+        name: e.name,
+        class: "sw-control",
+        id: e.id,
+        "onUpdate:modelValue": a[0] || (a[0] = (d) => t.value = d)
+      }, null, 8, b), [
+        [p, t.value]
+      ]),
+      o("label", {
+        for: e.id,
+        class: "sw-label",
+        "data-onlabel": e.on,
+        "data-offlabel": e.off
+      }, null, 8, S),
+      m(s.$slots, "default")
+    ], 2));
+  }
+};
+export {
+  w as default
+};

package/dist/SwTabs-BBUJ5wnR.js

@@ -0,0 +1,31 @@
+import { mergeModels as c, ref as i, useModel as p, useSlots as f, provide as u, createElementBlock as s, openBlock as o, normalizeClass as m, createElementVNode as v, renderSlot as _, Fragment as b, renderList as S, toDisplayString as k } from "vue";
+const g = ["onClick"], C = {
+  __name: "SwTabs",
+  props: /* @__PURE__ */ c({
+    name: { type: String },
+    class: { type: String, default: "" }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ c(["tab-click"], ["update:modelValue"]),
+  setup(r, { emit: y }) {
+    i(0);
+    const e = i([]), d = r, t = p(r, "modelValue");
+    return e.value = f().default().filter((l) => l.type.__name === "SwTabsPane"), u("activeTab", t), u("tabs", e), (l, V) => (o(), s("div", {
+      class: m("sw-tabs " + d.class)
+    }, [
+      v("header", null, [
+        (o(!0), s(b, null, S(e.value, (n, a) => (o(), s("span", {
+          key: a,
+          class: m([{ active: t.value === a }]),
+          onClick: (h) => t.value = a
+        }, k(n.props.label || n.props.title), 11, g))), 128))
+      ]),
+      _(l.$slots, "default")
+    ], 2));
+  }
+};
+export {
+  C as default
+};

package/dist/SwTabsPane-BUUmFjh7.js

@@ -0,0 +1,25 @@
+import { inject as n, computed as i, createElementBlock as l, createCommentVNode as u, openBlock as p, renderSlot as d } from "vue";
+const m = {
+  key: 0,
+  class: "tab-content"
+}, _ = {
+  __name: "SwTabsPane",
+  props: {
+    title: {
+      type: String,
+      required: !0
+    }
+  },
+  setup(o) {
+    const s = o, a = n("activeTab"), c = n("tabs"), r = i(() => {
+      const e = c.value.findIndex((t) => t.props.title === s.title);
+      return a.value === e;
+    });
+    return (e, t) => r.value ? (p(), l("div", m, [
+      d(e.$slots, "default")
+    ])) : u("", !0);
+  }
+};
+export {
+  _ as default
+};

package/dist/component-sw.css

@@ -0,0 +1 @@
+:root{--sw-color-default: #DFDFDF;--sw-color-primary: #3EAF4E;--sw-color-success: #FFE603;--sw-color-info: #C0C0C0;--sw-color-warning: #FF7A00;--sw-color-danger: #CC2D4A;--sw-text-color-primary: #333333;--sw-text-color-secondary: #4C4C4C;--sw-text-color-third: #818181;--sw-text-color-revers: white;--sw-bg-color: #f4f4f4;--sw-bg-color-page: white;--sw-bg-color-second: #FAFAFA;--sw-border-color: #D6D6D6;--sw-border-color-input: #CECECE;--sw-font-size: 1rem;--sw-font-size-small: .875rem;--sw-font-size-large: 1.125rem;--sw-font-size-big: 2.8rem;--sw-border-radius: .625rem;--sw-border-round: 3.625rem;--sw-component-size-base: 3rem;--sw-component-size-small: 1.625rem;--sw-component-size-large: 3.5rem;font-family:Montserrat,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:var(--sw-text-color-primary);background-color:var(--sw-bg-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme: dark){:root{--sw-color-default: #4E4E4E;--sw-color-primary: #38A151;--sw-color-success: #FFE603;--sw-color-info: #808185;--sw-color-warning: #FF7A00;--sw-color-danger: #CC2D4A;--sw-text-color-primary: white;--sw-text-color-secondary: #FAFAFA;--sw-text-color-third: #FAFAFA;--sw-text-color-revers: white;--sw-bg-color: #182127;--sw-bg-color-page: #323741;--sw-bg-color-second: #232832;--sw-border-color: #4E4E4E;--sw-border-color-input: #5C5E63;--sw-shadow: 0 100px 80px rgba(0, 0, 0, .03), 0 41.7776px 33.4221px rgba(0, 0, 0, .0215656), 0 22.3363px 17.869px rgba(0, 0, 0, .0178832), 0 12.5216px 10.0172px rgba(0, 0, 0, .015), 0 6.6501px 5.32008px rgba(0, 0, 0, .0121168), 0 2.76726px 2.21381px rgba(0, 0, 0, .00843437)}}.sw-tabs{-webkit-user-select:none;user-select:none}.sw-tabs>header{display:flex;border-bottom:2px solid var(--sw-color-info);color:var(--sw-color-info);-webkit-user-select:none;user-select:none;font-size:var(--sw-font-size-small);font-weight:400;margin-bottom:1.25rem;transition:all .6s ease-out}.sw-tabs>header span{position:relative;top:2px;border-radius:0;padding:5px;cursor:pointer;border:none;background:none;outline:none}.sw-tabs>header span.active{border-bottom:2px solid var(--sw-color-primary);color:var(--sw-color-primary);font-weight:700}.sw-tabs>header span:hover:not(.active){color:var(--sw-border-color)}.sw-input{display:flex;align-items:center;position:relative;gap:0 1.75rem;padding:0 1.2em;border:1px solid var(--sw-border-color-input);border-radius:var(--sw-border-radius)}.sw-input input{line-height:var(--sw-component-size-base);border:none;width:100%;font-size:var(--sw-font-size-large);background:none;outline:none}.sw-input .svg-icon{font-size:20px;color:var(--sw-text-color-third)}.sw-input>svg+label{left:4rem}.sw-input.sw-small input{line-height:var(--sw-component-size-small)}.sw-input.sw-large input{line-height:var(--sw-component-size-large)}.sw-button{border-radius:1rem;border:1px solid var(--sw-color-default);padding:0 1.2em;min-height:var(--sw-component-size-base);font-size:var(--sw-font-size);font-weight:500;cursor:pointer;transition:border-color .25s;background-color:var(--sw-color-default);color:var(--sw-text-color-revers)}.sw-form-item{display:flex;justify-content:space-between;font-size:var(--sw-font-size-small);color:var(--sw-text-color-secondary);gap:1rem}.sw-form-item.sw-start{justify-content:flex-start}.sw-form-item.sw-end{justify-content:flex-end}.sw-form-item.sw-around{justify-content:space-around}.sw-dropdown{position:relative;display:inline-block}.sw-dropdown-popup{z-index:3;padding:8px;min-width:200px;margin:0;background-color:var(--sw-bg-color-second);border:1px solid var(--sw-border-color);border-radius:4px;box-shadow:0 2px 8px #0000001a}.sw-dropdown-item{display:block}.sw-dropdown-item svg{margin-right:.5rem}.sw-dropdown-item:hover{color:var(--sw-color-primary)}.sw-collapse{transition:all .3s ease-out;overflow:hidden;box-sizing:border-box;margin:0}.sw-switch{display:inline-flex;align-items:center;box-sizing:border-box;-webkit-user-select:none;user-select:none}.sw-switch>input{display:none}.sw-switch>input:checked+label{background-color:var(--sw-color-primary)}.sw-switch>input:checked+label:before{color:var(--sw-text-color-revers);content:attr(data-onlabel);left:.5rem;right:auto}.sw-switch>input:checked+label:after{background:#f7f7f7;left:2.125rem}.sw-switch>label{background-color:var(--sw-color-info);border-radius:1rem;cursor:pointer;flex:0 0 4rem;height:1.75rem;margin:.5rem;position:relative;transition:all .3s;width:4rem}.sw-switch>label:before{color:var(--sw-text-color-revers);content:attr(data-offlabel);display:block;font-size:1rem;position:absolute;right:.5rem;transition:all .3s}.sw-switch>label:after{background:var(--sw-text-color-revers);border:1px solid var(--sw-color-info);border-radius:50%;content:"";height:2rem;left:-.125rem;position:absolute;top:-.125rem;transition:all .3s;width:2rem}.sw-skeleton{display:flex;gap:.5rem;flex-wrap:wrap;align-items:flex-end}.sw-skeleton-item{min-height:var(--sw-component-size-base);width:100%;background:var(--sw-bg-color-second);border-radius:var(--sw-border-radius);border:1px solid var(--sw-bg-color);box-sizing:border-box;overflow:hidden;position:relative}.sw-skeleton-item>div{height:100%;width:10px;background:var(--sw-border-color-input);display:inline-block;animation:sw-skeleton 3s linear infinite normal;position:absolute;transform:skew(-20deg);box-shadow:0 0 20px 20px var(--sw-border-color-input)}.sw-message{position:fixed;z-index:3;background-color:var(--sw-bg-color-page);border:1px solid var(--sw-border-color);border-radius:var(--sw-border-radius);padding:1.875rem;box-sizing:border-box;top:50%;left:50%;transform:translateY(-50%),translate(-50%);max-width:28.75rem}.sw-message>header{display:flex;justify-content:space-between}.sw-round{border-radius:var(--sw-border-round)}.sw-small{min-height:var(--sw-component-size-small)}.sw-large{min-height:var(--sw-component-size-large)}.sw-primary{background-color:var(--sw-color-primary);border-color:var(--sw-color-primary)}.sw-success{background-color:var(--sw-color-success);border-color:var(--sw-color-success)}.sw-info{background-color:var(--sw-color-info);border-color:var(--sw-color-info)}.sw-warning{background-color:var(--sw-color-warning);border-color:var(--sw-color-warning)}.sw-danger{background-color:var(--sw-color-danger);border-color:var(--sw-color-danger)}.sw-text{color:var(--sw-color-default);background:none}.sw-text.sw-primary{color:var(--sw-color-primary)}.sw-text.sw-success{color:var(--sw-color-success)}.sw-text.sw-info{color:var(--sw-color-info)}.sw-text.sw-warning{color:var(--sw-color-warning)}.sw-text.sw-danger{color:var(--sw-color-danger)}.sw-link{background:none;border:none;padding:0;color:var(--sw-text-color-secondary);min-height:1em}.sw-link:hover.sw-primary{color:var(--sw-color-primary)}.sw-link:hover.sw-success{color:var(--sw-color-success)}.sw-link:hover.sw-info{color:var(--sw-color-info)}.sw-link:hover.sw-warning{color:var(--sw-color-warning)}.sw-link:hover.sw-danger{color:var(--sw-color-danger)}@keyframes sw-skeleton{0%{left:-50px}to{left:calc(50px + 100%)}}

package/dist/index.cjs

@@ -0,0 +1 @@
+(function(e,u){typeof exports=="object"&&typeof module<"u"?module.exports=u(require("vue")):typeof define=="function"&&define.amd?define(["vue"],u):(e=typeof globalThis<"u"?globalThis:e||self,e["component-sw"]=u(e.vue))})(this,function(e){"use strict";const u=Object.assign({"./components/SwButton.vue":()=>Promise.resolve().then(()=>$),"./components/SwCollapse.vue":()=>Promise.resolve().then(()=>z),"./components/SwDropdown.vue":()=>Promise.resolve().then(()=>C),"./components/SwDropdownItem.vue":()=>Promise.resolve().then(()=>E),"./components/SwFormItem.vue":()=>Promise.resolve().then(()=>V),"./components/SwInput.vue":()=>Promise.resolve().then(()=>I),"./components/SwMessage.vue":()=>Promise.resolve().then(()=>R),"./components/SwSection.vue":()=>Promise.resolve().then(()=>A),"./components/SwSkeleton.vue":()=>Promise.resolve().then(()=>W),"./components/SwSkeletonItem.vue":()=>Promise.resolve().then(()=>q),"./components/SwSwitch.vue":()=>Promise.resolve().then(()=>U),"./components/SwTabs.vue":()=>Promise.resolve().then(()=>Y),"./components/SwTabsPane.vue":()=>Promise.resolve().then(()=>J)}),h={};for(const n in u){const t=n.split("/").pop().replace(".vue","");h[t]=e.defineAsyncComponent(u[n])}const w={__name:"SwButton",props:{class:{type:String,default:""},size:{type:String,default:""},type:{type:String,default:""},round:{type:Boolean,default:!1},text:{type:Boolean,default:!1},link:{type:Boolean,default:!1}},setup(n){const t=n,l=e.computed(()=>{let o=["sw-button"];return t.size.length>0&&o.push("sw-"+t.size),t.type.length>0&&o.push("sw-"+t.type),t.round&&o.push("sw-round"),t.text&&o.push("sw-text"),t.link&&o.push("sw-link"),t.class.length>0&&o.push(t.class),o});return(o,s)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(l.value)},[e.renderSlot(o.$slots,"default")],2))}},$=Object.freeze(Object.defineProperty({__proto__:null,default:w},Symbol.toStringTag,{value:"Module"})),z=Object.freeze(Object.defineProperty({__proto__:null,default:{__name:"SwCollapse",props:{visual:{type:Boolean,default:!0}},setup(n){e.onMounted(()=>{o.value="0px"});const t=e.ref("0px"),l=n,o=e.computed(()=>l.visual?`${t.value.scrollHeight}px`:"0px");return(s,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["sw-collapse",{open:l.visual}]),style:e.normalizeStyle({height:o.value}),ref_key:"collapse",ref:t},[e.renderSlot(s.$slots,"default")],6))}}},Symbol.toStringTag,{value:"Module"})),C=Object.freeze(Object.defineProperty({__proto__:null,default:{__name:"SwDropdown",props:{class:{type:String,default:""},size:{type:String,default:""},type:{type:String,default:""},trigger:{type:String,default:"click"},placement:{type:String,default:"bottom-left"},maxWidth:{type:Number,default:0}},setup(n){const t=n,l=e.ref(!1),o=e.ref(null),s=e.ref(null),r=e.ref({}),p=e.computed(()=>{let a=["sw-dropdown"];return t.size.length>0&&a.push("sw-"+t.size),t.type.length>0&&a.push("sw-"+t.type),a}),m=async()=>{if(await e.nextTick(),!s.value)return;const a=o.value.getBoundingClientRect(),d=window.pageYOffset||document.documentElement.scrollTop,y=window.pageXOffset||document.documentElement.scrollLeft,g=s.value.offsetHeight,B=s.value.offsetWidth;let c=a.left+a.width/2+y,i=a.bottom-a.height/2+d;const[K,Q]=t.placement.split("-",2);switch(console.log(t.placement),K){case"bottom":i=i+a.height/2+8;break;case"top":i=i-a.height/2-8-g;break;case"left":c=c-B-a.width/2-10,i=i-g/2;break;case"right":c=c+a.width/2+8,i=i-g/2;break}switch(Q){case"left":c=c-B+a.width/2;break;case"right":c=c-a.width/2;break}c<0&&(c=0),i<0&&(i=0),r.value={position:"absolute",top:`${i}px`,left:`${c}px`,maxWidth:t.maxWidth===0?"":`${t.maxWidth}px`}},f=async()=>{l.value=!l.value,l.value&&await m()},_=()=>{l.value&&m()},S=a=>{o.value&&!o.value.contains(a.target)&&(l.value=!1)};return e.onMounted(()=>{document.addEventListener("click",S),window.addEventListener("resize",_)}),e.onUnmounted(()=>{document.removeEventListener("click",S),window.removeEventListener("resize",_)}),(a,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(p.value),onClick:d[0]||(d[0]=y=>f()),ref_key:"dropdownRef",ref:o},[e.renderSlot(a.$slots,"default"),(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[l.value?(e.openBlock(),e.createElementBlock("ul",{key:0,ref_key:"popupRef",ref:s,class:e.normalizeClass(["sw-dropdown-popup",t.class]),style:e.normalizeStyle(r.value)},[e.renderSlot(a.$slots,"dropdown")],6)):e.createCommentVNode("",!0)]))],2))}}},Symbol.toStringTag,{value:"Module"})),E=Object.freeze(Object.defineProperty({__proto__:null,default:{__name:"SwDropdownItem",props:{class:{type:String,default:""},size:{type:String,default:""},type:{type:String,default:""},iconBefore:{type:String,default:""}},setup(n){const t=n,l=e.computed(()=>{let o=["sw-dropdown-item"];return t.size.length>0&&o.push("sw-"+t.size),t.type.length>0&&o.push("sw-"+t.type),t.class.length>0&&o.push(t.class),o});return(o,s)=>{const r=e.resolveComponent("svg-icon");return e.openBlock(),e.createElementBlock("li",{class:e.normalizeClass(l.value)},[e.createVNode(r,{"icon-class":n.iconBefore},null,8,["icon-class"]),e.renderSlot(o.$slots,"default")],2)}}}},Symbol.toStringTag,{value:"Module"})),V=Object.freeze(Object.defineProperty({__proto__:null,default:{__name:"SwFormItem",props:{class:{type:String,default:""},type:{type:String,default:""}},setup(n){const t=n,l=e.computed(()=>{let o=["sw-form-item"];return t.type.length>0&&o.push("sw-"+t.type),t.class.length>0&&o.push(t.class),o});return(o,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(l.value)},[e.renderSlot(o.$slots,"default")],2))}}},Symbol.toStringTag,{value:"Module"}));function P(n){return/^(https?:|mailto:|tel:)/.test(n)}const M=(n,t)=>{const l=n.__vccOpts||n;for(const[o,s]of t)l[o]=s;return l},T={name:"SvgIcon",props:{prefix:{type:String,default:"icon"},iconClass:{type:String,required:!0},className:{type:String,default:""}},computed:{isExt(){return P(this.iconClass)}}},x=["href"];function O(n,t,l,o,s,r){return r.isExt?(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:0,style:"mask: url("+l.iconClass+") no-repeat 50% 50%;",class:"svg-external-icon svg-icon"},n.$attrs),null,16)):(e.openBlock(),e.createElementBlock("svg",e.mergeProps({key:1,class:"svg-icon "+l.className,"aria-hidden":"true"},n.$attrs),[e.createElementVNode("use",{href:"#"+l.prefix+"-"+l.iconClass},null,8,x)],16))}const k=M(T,[["render",O]]),j=["for"],N=["placeholder","type","id","name"],I=Object.freeze(Object.defineProperty({__proto__:null,default:{__name:"SwInput",props:e.mergeModels({before:{type:String,default:""},after:{type:String,default:""},placeholder:{type:String,default:""},label:{type:String,default:""},name:{type:String,required:!0},class:{type:String,default:""},size:{type:String,default:""},type:{type:String,default:"text"}},{modelValue:{},modelModifiers:{}}),emits:e.mergeModels(["suffix"],["update:modelValue"]),setup(n,{emit:t}){var S;const l=e.useModel(n,"modelValue"),o=n,s=e.ref(null),r=t,p=()=>{s.value!==null&&(s.value.style.top="-.6em")},m=()=>{var a;((a=l.value)==null?void 0:a.length)==0&&s.value!==null&&s.value.removeAttribute("style")};((S=l.value)==null?void 0:S.length)>0&&s.value!==null&&(s.value.style.top="-.6em");const f=()=>{r("suffix")},_=e.computed(()=>{let a=["sw-input"];return o.size.length>0&&a.push("sw-"+o.size),o.class.length>0&&a.push(o.class),a});return(a,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(_.value)},[o.before.length>0?(e.openBlock(),e.createBlock(k,{key:0,"icon-class":o.before},null,8,["icon-class"])):e.renderSlot(a.$slots,"prefix",{key:1}),o.label.length>0?(e.openBlock(),e.createElementBlock("label",{key:2,for:o.name,ref_key:"lab",ref:s},[e.createTextVNode(e.toDisplayString(o.label),1),d[1]||(d[1]=e.createElementVNode("span",{title:"Это поле обязательно для заполнения."},"*",-1))],8,j)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":d[0]||(d[0]=y=>l.value=y),required:"required",placeholder:o.placeholder,type:o.type,id:o.name,name:o.name,size:"60",onFocus:p,onBlur:m,maxlength:"128"},null,40,N),[[e.vModelDynamic,l.value]]),o.after.length>0?(e.openBlock(),e.createBlock(k,{key:3,"icon-class":o.after,onClick:f},null,8,["icon-class"])):e.renderSlot(a.$slots,"suffix",{key:4})],2))}}},Symbol.toStringTag,{value:"Module"})),D={key:0},R=Object.freeze(Object.defineProperty({__proto__:null,default:{__name:"SwMessage",props:e.mergeModels({name:{type:String,default:""},class:{type:String,default:""},iconAfter:{type:String,default:""}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(n){const t=e.useModel(n,"modelValue"),l=n,o=e.ref(null);return(s,r)=>{const p=e.resolveComponent("svg-icon");return t.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["sw-message",l.class]),ref_key:"messageRef",ref:o},[l.name.length>0?(e.openBlock(),e.createElementBlock("header",D,[e.renderSlot(s.$slots,"header",{},()=>[e.createTextVNode(e.toDisplayString(l.name)+" ",1),e.createVNode(w,{link:"",type:"primary",onClick:r[0]||(r[0]=m=>t.value=!1)},{default:e.withCtx(()=>[e.createVNode(p,{"icon-class":l.iconAfter},null,8,["icon-class"])]),_:1})])])):e.createCommentVNode("",!0),e.renderSlot(s.$slots,"default",{},()=>[r[1]||(r[1]=e.createTextVNode("111222"))]),e.createElementVNode("footer",null,[e.renderSlot(s.$slots,"footer")])],2)):e.createCommentVNode("",!0)}}}},Symbol.toStringTag,{value:"Module"})),A=Object.freeze(Object.defineProperty({__proto__:null,default:{__name:"SwSection",props:{name:{type:String,default:""},class:{type:String,default:""},iconAfter:{type:String,default:""}},setup(n){const t=n;return(l,o)=>{const s=e.resolveComponent("svg-icon");return e.openBlock(),e.createElementBlock("section",{class:e.normalizeClass(t.class)},[e.createElementVNode("header",null,[e.renderSlot(l.$slots,"header",{},()=>[e.createTextVNode(e.toDisplayString(t.name)+" ",1),e.createVNode(s,{"icon-class":t.iconAfter},null,8,["icon-class"])])]),e.renderSlot(l.$slots,"default"),e.createElementVNode("footer",null,[e.renderSlot(l.$slots,"footer")])],2)}}}},Symbol.toStringTag,{value:"Module"})),L={key:0},b={__name:"SwSkeletonItem",props:{width:{type:String,default:"100"},class:{type:String,default:""},animate:{type:Boolean,default:!1},size:{type:String,default:""}},setup(n){const t=n,l=e.computed(()=>{let s=["sw-skeleton-item"];return t.size.length>0&&s.push("sw-"+t.size),t.animate&&s.push("sw-animate"),t.class.length>0&&s.push(t.class),s}),o=e.computed(()=>({width:t.width+"%"}));return(s,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(l.value),style:e.normalizeStyle(o.value)},[t.animate?(e.openBlock(),e.createElementBlock("div",L)):e.createCommentVNode("",!0)],6))}},q=Object.freeze(Object.defineProperty({__proto__:null,default:b},Symbol.toStringTag,{value:"Module"})),W=Object.freeze(Object.defineProperty({__proto__:null,default:{__name:"SwSkeleton",props:{class:{type:String,default:""},visual:{type:Boolean,default:!1}},setup(n){const t=n;return(l,o)=>t.visual?e.renderSlot(l.$slots,"default",{key:0},()=>[o[0]||(o[0]=e.createTextVNode("1"))]):(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["sw-skeleton",t.class])},[e.renderSlot(l.$slots,"skeleton",{},()=>[e.createVNode(b,{animate:"",size:"small"})])],2))}}},Symbol.toStringTag,{value:"Module"})),F=["name","id"],H=["for","data-onlabel","data-offlabel"],U=Object.freeze(Object.defineProperty({__proto__:null,default:{__name:"SwSwitch",props:e.mergeModels({id:{type:String,default:"checkbox"},class:{type:String,default:""},name:{type:String,default:""},on:{type:String,default:""},off:{type:String,default:""}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(n){const t=e.useModel(n,"modelValue"),l=n;return(o,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["sw-switch",l.class])},[e.withDirectives(e.createElementVNode("input",{type:"checkbox",name:l.name,class:"sw-control",id:l.id,"onUpdate:modelValue":s[0]||(s[0]=r=>t.value=r)},null,8,F),[[e.vModelCheckbox,t.value]]),e.createElementVNode("label",{for:l.id,class:"sw-label","data-onlabel":l.on,"data-offlabel":l.off},null,8,H),e.renderSlot(o.$slots,"default")],2))}}},Symbol.toStringTag,{value:"Module"})),X=["onClick"],Y=Object.freeze(Object.defineProperty({__proto__:null,default:{__name:"SwTabs",props:e.mergeModels({name:{type:String},class:{type:String,default:""}},{modelValue:{},modelModifiers:{}}),emits:e.mergeModels(["tab-click"],["update:modelValue"]),setup(n,{emit:t}){e.ref(0);const l=e.ref([]),o=n,s=e.useModel(n,"modelValue");return l.value=e.useSlots().default().filter(r=>r.type.__name==="SwTabsPane"),e.provide("activeTab",s),e.provide("tabs",l),(r,p)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass("sw-tabs "+o.class)},[e.createElementVNode("header",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,(m,f)=>(e.openBlock(),e.createElementBlock("span",{key:f,class:e.normalizeClass([{active:s.value===f}]),onClick:_=>s.value=f},e.toDisplayString(m.props.label||m.props.title),11,X))),128))]),e.renderSlot(r.$slots,"default")],2))}}},Symbol.toStringTag,{value:"Module"})),G={key:0,class:"tab-content"},J=Object.freeze(Object.defineProperty({__proto__:null,default:{__name:"SwTabsPane",props:{title:{type:String,required:!0}},setup(n){const t=n,l=e.inject("activeTab"),o=e.inject("tabs"),s=e.computed(()=>{const r=o.value.findIndex(p=>p.props.title===t.title);return l.value===r});return(r,p)=>s.value?(e.openBlock(),e.createElementBlock("div",G,[e.renderSlot(r.$slots,"default")])):e.createCommentVNode("",!0)}}},Symbol.toStringTag,{value:"Module"}));return h});

package/dist/index.js

@@ -0,0 +1,9 @@
+import { defineAsyncComponent as n } from "vue";
+const e = /* @__PURE__ */ Object.assign({ "./components/SwButton.vue": () => import("./SwButton-CQh1Mtze.js"), "./components/SwCollapse.vue": () => import("./SwCollapse-CjL9dpO-.js"), "./components/SwDropdown.vue": () => import("./SwDropdown-CngCMKee.js"), "./components/SwDropdownItem.vue": () => import("./SwDropdownItem-C3_wJ1DL.js"), "./components/SwFormItem.vue": () => import("./SwFormItem-CgahR93o.js"), "./components/SwInput.vue": () => import("./SwInput-DpflrHQm.js"), "./components/SwMessage.vue": () => import("./SwMessage-BGIOC-zp.js"), "./components/SwSection.vue": () => import("./SwSection-CaY8OFmf.js"), "./components/SwSkeleton.vue": () => import("./SwSkeleton-DWILNFfF.js"), "./components/SwSkeletonItem.vue": () => import("./SwSkeletonItem-CU7LvihY.js"), "./components/SwSwitch.vue": () => import("./SwSwitch-375THfdW.js"), "./components/SwTabs.vue": () => import("./SwTabs-BBUJ5wnR.js"), "./components/SwTabsPane.vue": () => import("./SwTabsPane-BUUmFjh7.js") }), p = {};
+for (const o in e) {
+  const t = o.split("/").pop().replace(".vue", "");
+  p[t] = n(e[o]);
+}
+export {
+  p as default
+};

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@studio-west/component-sw",
+  "version": "0.0.1",
+  "description": "Vue components of Component SW collection.",
+  "type": "module",
+  "keywords": [
+    "icon",
+    "svg",
+    "vue",
+    "component-sw"
+  ],
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
+    },
+    "./dist/main.css": "./dist/main.css",
+    "./*": "./*"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "sass": "^1.86.0",
+    "sass-embedded": "^1.83.0",
+    "vite": "^6.2.0"
+  },
+  "author": "Alexander Efimov",
+  "license": "MIT"
+}