vue-lib-components/dist/vue-lib-components.es.js

Contains Vue 3 components that are used quite often. At the moment it is a test version (however, the current components can be used), but in the near future new features will be improved and new components will be added.

import { defineComponent as m, ref as S, openBlock as o, createElementBlock as s, createElementVNode as n, normalizeClass as b, toDisplayString as u, renderSlot as h, createCommentVNode as r, withDirectives as y, vShow as O, createTextVNode as C, computed as v, unref as w, vModelText as A, Fragment as I, renderList as V, vModelSelect as M, vModelCheckbox as T, vModelRadio as U, normalizeStyle as D } from "vue";
const E = { class: "ui-accordion" }, z = { class: "ui-accordion__box-icon" }, F = { class: "ui-accordion__body" }, L = { key: 0 }, W = { key: 1 }, j = /* @__PURE__ */ m({
  __name: "Accordion",
  props: {
    title: {},
    content: {},
    disabled: { type: Boolean },
    open: { type: Boolean }
  },
  setup(c) {
    const a = c, l = S(!1), i = () => {
      a.disabled || (l.value = !l.value);
    };
    return (e, d) => (o(), s("div", E, [
      n("div", {
        class: b(["ui-accordion__title", { "ui-accordion__disabled": e.disabled }]),
        onClick: i
      }, [
        n("span", null, u(e.title), 1),
        n("div", z, [
          e.$slots.icon ? h(e.$slots, "icon", { key: 0 }, void 0, !0) : r("", !0),
          n("div", {
            class: b(["ui-accordion__chevron", { "ui-accordion__chevron--open": l.value || e.open }])
          }, null, 2)
        ])
      ], 2),
      y(n("div", F, [
        e.content ? (o(), s("span", L, u(e.content), 1)) : (o(), s("span", W, [
          h(e.$slots, "default", {}, void 0, !0)
        ]))
      ], 512), [
        [O, l.value || e.open]
      ])
    ]));
  }
}), k = (c, a) => {
  const l = c.__vccOpts || c;
  for (const [i, e] of a)
    l[i] = e;
  return l;
}, Ie = /* @__PURE__ */ k(j, [["__scopeId", "data-v-8bc91b40"]]), R = ["disabled", "id"], q = { key: 0 }, G = {
  key: 1,
  class: "ui-button__content"
}, H = {
  key: 0,
  class: "ui-button__content-slot"
}, J = { class: "ui-button__text" }, K = {
  key: 1,
  class: "ui-button__content-slot ui-button__content-slot--right"
}, P = /* @__PURE__ */ m({
  __name: "Button",
  props: {
    text: {},
    id: {},
    disabled: { type: Boolean },
    fullWidth: { type: Boolean },
    loading: { type: Boolean }
  },
  emits: ["click"],
  setup(c, { emit: a }) {
    const l = a, i = () => {
      l("click");
    };
    return (e, d) => (o(), s("button", {
      disabled: e.disabled,
      id: e.id,
      class: b([
        "ui-button",
        {
          "ui-button__disabled": e.disabled,
          "ui-button__full-width": e.fullWidth
        }
      ]),
      onClick: i
    }, [
      e.loading ? (o(), s("div", q, d[0] || (d[0] = [
        n("span", null, "Loading ...", -1)
      ]))) : (o(), s("div", G, [
        e.$slots.leftSlot ? (o(), s("span", H, [
          h(e.$slots, "leftSlot", {}, void 0, !0)
        ])) : r("", !0),
        n("span", J, [
          h(e.$slots, "default", {}, () => [
            C(u(e.text), 1)
          ], !0)
        ]),
        e.$slots.rightSlot ? (o(), s("span", K, [
          h(e.$slots, "rightSlot", {}, void 0, !0)
        ])) : r("", !0)
      ]))
    ], 10, R));
  }
}), Ve = /* @__PURE__ */ k(P, [["__scopeId", "data-v-dfd16da5"]]), Q = { class: "ui-input" }, X = { class: "ui-input__container" }, Y = {
  key: 0,
  class: "ui-button__content-slot ui-button__content-slot--left"
}, Z = ["disabled", "placeholder", "maxlength"], x = {
  key: 1,
  class: "ui-button__content-slot ui-button__content-slot--right"
}, ee = {
  key: 0,
  class: "ui-input__bottom"
}, te = { class: "ui-input__hint" }, oe = {
  key: 0,
  class: "ui-input__maxlength"
}, se = {
  key: 1,
  class: "ui-input__error"
}, le = /* @__PURE__ */ m({
  __name: "Input",
  props: {
    model: {},
    text: {},
    placeholder: {},
    id: {},
    disabled: { type: Boolean },
    error: {},
    hint: {},
    maxlength: {}
  },
  emits: ["update:model", "click"],
  setup(c, { emit: a }) {
    const l = c;
    let i = S(!1);
    const e = v(() => l.model ? l.model.length : 0), d = a, p = v({
      get() {
        return l.model;
      },
      set(t) {
        d("update:model", t);
      }
    });
    return (t, $) => (o(), s("div", Q, [
      n("div", {
        class: b(["ui-input__text", { "input__text--focus": w(i) }])
      }, u(t.text), 3),
      n("div", X, [
        t.$slots.leftSlot ? (o(), s("div", Y, [
          h(t.$slots, "leftSlot", {}, void 0, !0)
        ])) : r("", !0),
        y(n("input", {
          "onUpdate:modelValue": $[0] || ($[0] = (g) => p.value = g),
          class: b(["ui-input__field", { "ui-input__field--error": t.error }]),
          disabled: t.disabled,
          placeholder: t.placeholder,
          type: "text",
          maxlength: t.maxlength
        }, null, 10, Z), [
          [A, p.value]
        ]),
        t.$slots.rightSlot ? (o(), s("div", x, [
          h(t.$slots, "rightSlot", {}, void 0, !0)
        ])) : r("", !0)
      ]),
      t.maxlength || t.hint ? (o(), s("div", ee, [
        n("span", te, u(t.hint), 1),
        t.maxlength ? (o(), s("span", oe, u(e.value) + "/" + u(t.maxlength), 1)) : r("", !0)
      ])) : r("", !0),
      t.error ? (o(), s("div", se, u(t.error), 1)) : r("", !0)
    ]));
  }
}), Ne = /* @__PURE__ */ k(le, [["__scopeId", "data-v-9d5c8e66"]]), ne = { class: "ui-select" }, ie = { class: "ui-select__label" }, de = { class: "ui-select__container" }, ae = ["disabled"], ce = {
  key: 0,
  disabled: "",
  selected: "",
  value: ""
}, ue = ["value", "disabled"], re = {
  key: 0,
  class: "ui-select__error"
}, _e = {
  key: 1,
  class: "ui-select__hint"
}, pe = /* @__PURE__ */ m({
  __name: "Select",
  props: {
    model: {},
    width: {},
    label: {},
    notSelected: {},
    hideNotSelect: { type: Boolean },
    options: {},
    disabled: { type: Boolean },
    error: {},
    hint: {}
  },
  emits: ["update:model", "click"],
  setup(c, { emit: a }) {
    let l = S(!1);
    const i = c, e = v(() => i.notSelected ? i.notSelected : "не указан"), d = v(() => Array.isArray(i.options) ? !!i.options.length : !1), p = a, t = v({
      get() {
        return i.model;
      },
      set(_) {
        p("update:model", _);
      }
    }), $ = () => l.value = !0, g = () => l.value = !1;
    return (_, B) => (o(), s("div", ne, [
      n("div", ie, u(_.label), 1),
      n("div", de, [
        y(n("select", {
          "onUpdate:modelValue": B[0] || (B[0] = (f) => t.value = f),
          onFocus: $,
          onBlur: g,
          disabled: _.disabled,
          class: b([
            "ui-select__field",
            {
              "ui-select__field--not-selected": !t.value,
              "ui-select__field--error": _.error
            }
          ])
        }, [
          !t.value && !_.hideNotSelect ? (o(), s("option", ce, u(e.value), 1)) : r("", !0),
          d.value ? (o(!0), s(I, { key: 1 }, V(_.options, (f, N) => (o(), s("option", {
            key: N,
            value: f.value,
            disabled: f.disabled
          }, u(f.label), 9, ue))), 128)) : r("", !0)
        ], 42, ae), [
          [M, t.value]
        ]),
        n("div", {
          class: b(["ui-select__icon", w(l) ? "select__icon--arrow-up" : "select__icon--arrow-down"])
        }, null, 2)
      ]),
      _.error ? (o(), s("div", re, u(_.error), 1)) : r("", !0),
      _.hint ? (o(), s("div", _e, u(_.hint), 1)) : r("", !0)
    ]));
  }
}), Oe = /* @__PURE__ */ k(pe, [["__scopeId", "data-v-fe3a36a2"]]), he = { class: "ui-checkbox" }, be = { class: "ui-checkbox__label" }, ve = { class: "ui-checkbox__slot" }, me = ["disabled"], ke = /* @__PURE__ */ m({
  __name: "Checkbox",
  props: {
    check: {},
    disabled: {},
    label: {}
  },
  emits: ["update:check"],
  setup(c, { emit: a }) {
    const l = c, i = a, e = v({
      get() {
        return l.check;
      },
      set(d) {
        i("update:check", d);
      }
    });
    return (d, p) => (o(), s("div", he, [
      n("label", be, [
        n("span", ve, [
          C(u(d.label) + " ", 1),
          h(d.$slots, "default", {}, void 0, !0)
        ]),
        y(n("input", {
          type: "checkbox",
          disabled: !!d.disabled,
          "onUpdate:modelValue": p[0] || (p[0] = (t) => e.value = t),
          class: "ui-checkbox__input"
        }, null, 8, me), [
          [T, e.value]
        ]),
        n("span", {
          class: b(["ui-checkbox__checkmark ", { "ui-checkbox__checkmark_disabled": d.disabled }])
        }, null, 2)
      ])
    ]));
  }
}), Ae = /* @__PURE__ */ k(ke, [["__scopeId", "data-v-d307a83d"]]), $e = { class: "ui-tabs" }, fe = { class: "ui-tabs__header" }, ye = ["value", "disabled"], ge = { class: "ui-tabs__label" }, Se = { class: "ui-tabs__content" }, Be = /* @__PURE__ */ m({
  __name: "Tabs",
  props: {
    picked: {},
    items: {}
  },
  emits: ["update:picked"],
  setup(c, { emit: a }) {
    const l = c, i = a, e = v({
      get() {
        return l.picked;
      },
      set(d) {
        i("update:picked", d);
      }
    });
    return (d, p) => (o(), s("div", $e, [
      n("div", fe, [
        (o(!0), s(I, null, V(d.items, (t) => (o(), s("label", {
          key: t.id,
          class: b(["ui-tabs__tab", { "ui-tabs__tab--active": t.id === e.value }])
        }, [
          y(n("input", {
            "onUpdate:modelValue": p[0] || (p[0] = ($) => e.value = $),
            type: "radio",
            value: t.id,
            disabled: t.disabled,
            class: "ui-tabs__input"
          }, null, 8, ye), [
            [U, e.value]
          ]),
          n("span", ge, u(t.label), 1)
        ], 2))), 128))
      ]),
      n("div", Se, [
        h(d.$slots, "default", {}, void 0, !0)
      ])
    ]));
  }
}), Me = /* @__PURE__ */ k(Be, [["__scopeId", "data-v-35a8f9cd"]]), Ce = /* @__PURE__ */ m({
  __name: "Skeleton",
  props: {
    backgroundColor: {},
    width: {},
    height: {}
  },
  setup(c) {
    const a = c, l = v(() => {
      let i = {};
      return Object.keys(a).forEach((e) => {
        e && (i[e] = a[e]);
      }), i;
    });
    return (i, e) => (o(), s("div", {
      class: "ui-skeleton",
      style: D(l.value)
    }, null, 4));
  }
}), Te = /* @__PURE__ */ k(Ce, [["__scopeId", "data-v-02f01480"]]);
export {
  Ie as Accordion,
  Ve as Button,
  Ae as Checkbox,
  Ne as Input,
  Oe as Select,
  Te as Skeleton,
  Me as Tabs
};