@topvisor/ui 0.0.16 → 0.0.18

package/.chunks/forms-3575c189.es.js

@@ -0,0 +1,461 @@
+import { defineComponent as c, computed as u, openBlock as r, createBlock as v, resolveDynamicComponent as B, normalizeClass as i, withCtx as w, renderSlot as _, createTextVNode as C, toDisplayString as f, createElementBlock as p, useCssVars as M, resolveDirective as E, withDirectives as y, createElementVNode as h, mergeProps as L, vModelText as k, createCommentVNode as d, vModelCheckbox as V, withKeys as z, vModelRadio as S } from "vue";
+const T = /* @__PURE__ */ c({
+  __name: "button",
+  props: {
+    color: { default: "blue" },
+    styling: { default: "" },
+    size: { default: "s" },
+    name: {},
+    title: {},
+    icon: {},
+    icon2: {},
+    href: {},
+    disabled: { type: Boolean },
+    isSubmit: { type: Boolean },
+    isActive: { type: Boolean },
+    isProgress: { type: Boolean }
+  },
+  setup(l) {
+    const t = l, a = u(() => t.href ? "a" : "button"), s = u(() => t.isSubmit ? "submit" : void 0);
+    return (e, n) => (r(), v(B(a.value), {
+      class: i({
+        "top-active": e.isActive,
+        "top-disabled": e.disabled,
+        "top-forms-focusable": !e.disabled,
+        "top-button": !0,
+        "top-button-progress": e.isProgress,
+        [`top-size_${e.size}`]: !!e.size,
+        [`top-color_${e.color}`]: !0,
+        [`top-style_${e.styling}`]: !!e.styling
+      }),
+      name: e.name,
+      title: e.title,
+      href: e.href,
+      type: s.value,
+      "data-top-icon": e.icon || void 0,
+      "data-top-icon2": e.icon2 || void 0,
+      disabled: e.disabled || void 0,
+      inProgress: e.isProgress
+    }, {
+      default: w(() => [
+        _(e.$slots, "default", {}, () => [
+          C(f(e.icon ? "" : "Button"), 1)
+        ])
+      ]),
+      _: 3
+    }, 8, ["class", "name", "title", "href", "type", "data-top-icon", "data-top-icon2", "disabled", "inProgress"]));
+  }
+}), P = "_progress_1f1nw_1", A = {
+  "top-button": "top-button",
+  "top-active": "top-active",
+  "top-button-progress": "top-button-progress",
+  progress: P,
+  "top-color_blue": "top-color_blue",
+  "top-color_green": "top-color_green",
+  "top-color_orange": "top-color_orange",
+  "top-color_red": "top-color_red",
+  "top-color_pink": "top-color_pink",
+  "top-color_theme": "top-color_theme",
+  "top-style_outline": "top-style_outline",
+  "top-style_soft": "top-style_soft",
+  "top-style_transparent": "top-style_transparent",
+  "top-size_l": "top-size_l",
+  "top-size_xl": "top-size_xl"
+}, m = (l, t) => {
+  const a = l.__vccOpts || l;
+  for (const [s, e] of t)
+    a[s] = e;
+  return a;
+}, U = {
+  $style: A
+}, he = /* @__PURE__ */ m(T, [["__cssModules", U]]), W = ["title"], D = /* @__PURE__ */ c({
+  __name: "hint",
+  props: {
+    hint: {}
+  },
+  setup(l) {
+    return (t, a) => (r(), p("span", {
+      class: "top-hint",
+      "data-top-icon": "",
+      title: t.hint
+    }, null, 8, W));
+  }
+}), H = {
+  "top-hint": "top-hint"
+}, N = {
+  $style: H
+}, K = /* @__PURE__ */ m(D, [["__cssModules", N]]), O = ["name", "placeholder", "disabled", "readonly", "rows"], R = {
+  key: 0,
+  class: "top-textarea_pseudoContent"
+}, j = /* @__PURE__ */ c({
+  inheritAttrs: !1,
+  __name: "textarea",
+  props: {
+    modelValue: {},
+    name: {},
+    placeholder: {},
+    rows: { default: 5 },
+    minHeight: { default: 120 },
+    expandable: { type: Boolean },
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    isError: { type: Boolean },
+    hint: {}
+  },
+  emits: ["update:modelValue"],
+  setup(l, { emit: t }) {
+    const a = l;
+    M((e) => ({
+      "17d63e56": e.minHeight + "px"
+    }));
+    const s = u({
+      get() {
+        return a.modelValue;
+      },
+      set(e) {
+        t("update:modelValue", e);
+      }
+    });
+    return (e, n) => {
+      const o = E("tv-tooltip");
+      return r(), p("label", {
+        class: i({
+          "top-textarea": !0,
+          ["top-textarea-" + e.name]: e.name,
+          "top-disabled": e.disabled
+        })
+      }, [
+        y(h("textarea", L({
+          type: "text",
+          class: {
+            "top-forms-focusable": !e.disabled,
+            "top-textarea_textarea": !0,
+            "top-textarea_textarea-expandable": e.expandable,
+            "top-error": e.isError
+          },
+          autocomplete: "off_always",
+          name: e.name,
+          placeholder: e.placeholder,
+          disabled: e.disabled,
+          readonly: e.readonly,
+          rows: e.expandable ? void 0 : e.rows
+        }, e.$attrs, {
+          "onUpdate:modelValue": n[0] || (n[0] = (b) => s.value = b)
+        }), null, 16, O), [
+          [k, s.value]
+        ]),
+        e.expandable ? (r(), p("div", R, f(s.value + " "), 1)) : d("", !0),
+        e.hint ? y((r(), v(K, {
+          key: 1,
+          class: "top-textarea_hint",
+          hint: e.hint
+        }, null, 8, ["hint"])), [
+          [o]
+        ]) : d("", !0)
+      ], 2);
+    };
+  }
+}), q = {
+  "top-textarea": "top-textarea",
+  "top-textarea_textarea": "top-textarea_textarea",
+  "top-textarea_textarea-expandable": "top-textarea_textarea-expandable",
+  "top-textarea_pseudoContent": "top-textarea_pseudoContent",
+  "top-textarea_hint": "top-textarea_hint"
+}, F = {
+  $style: q
+}, fe = /* @__PURE__ */ m(j, [["__cssModules", F]]), G = { class: "top-forms-optionLabel" }, I = {
+  key: 0,
+  class: "top-forms-optionLabel_description"
+}, J = /* @__PURE__ */ c({
+  __name: "controlLabel",
+  props: {
+    title: {},
+    description: {},
+    disabled: { type: Boolean }
+  },
+  setup(l) {
+    return (t, a) => (r(), p("div", G, [
+      h("div", {
+        class: i({
+          "top-forms-optionLabel_title": !0,
+          "top-forms-optionLabel_title-disabled": t.disabled
+        })
+      }, f(t.title), 3),
+      t.description ? (r(), p("div", I, f(t.description), 1)) : d("", !0)
+    ]));
+  }
+}), Q = {
+  "top-forms-optionLabel": "top-forms-optionLabel",
+  "top-forms-optionLabel_title": "top-forms-optionLabel_title",
+  "top-forms-optionLabel_title-disabled": "top-forms-optionLabel_title-disabled",
+  "top-forms-optionLabel_description": "top-forms-optionLabel_description"
+}, X = {
+  $style: Q
+}, $ = /* @__PURE__ */ m(J, [["__cssModules", X]]), Y = ["name", "value", "indeterminate", "disabled"], Z = /* @__PURE__ */ c({
+  __name: "checkbox",
+  props: {
+    modelValue: { type: [Boolean, Array, Set] },
+    name: {},
+    value: {},
+    title: {},
+    description: {},
+    disabled: { type: Boolean },
+    indeterminate: { type: Boolean },
+    isError: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(l, { emit: t }) {
+    const a = l, s = u({
+      get() {
+        return a.modelValue;
+      },
+      set(e) {
+        t("update:modelValue", e);
+      }
+    });
+    return (e, n) => (r(), p("label", {
+      class: i({
+        "top-forms-optionWrapper": !0,
+        "top-checkbox": !0,
+        ["top-checkbox_" + e.name]: e.name !== "",
+        "top-disabled": e.disabled,
+        "top-error": e.isError && !e.disabled
+      })
+    }, [
+      y(h("input", {
+        type: "checkbox",
+        class: i({
+          "top-forms-focusable": !e.disabled,
+          "top-forms-option": !0,
+          "top-checkbox_input": !0,
+          "top-error": e.isError && !e.disabled
+        }),
+        name: e.name,
+        "onUpdate:modelValue": n[0] || (n[0] = (o) => s.value = o),
+        value: e.value,
+        indeterminate: e.indeterminate,
+        disabled: e.disabled
+      }, null, 10, Y), [
+        [V, s.value]
+      ]),
+      e.title ? (r(), v($, {
+        key: 0,
+        title: e.title,
+        description: e.description,
+        disabled: e.disabled
+      }, null, 8, ["title", "description", "disabled"])) : d("", !0)
+    ], 2));
+  }
+}), x = {
+  "top-checkbox": "top-checkbox",
+  "top-checkbox_input": "top-checkbox_input",
+  "top-error": "top-error"
+}, ee = {
+  $style: x
+}, ve = /* @__PURE__ */ m(Z, [["__cssModules", ee]]), oe = ["data-top-icon"], te = ["name", "title", "placeholder", "disabled", "readonly"], se = {
+  key: 2,
+  class: "top-formsCaption"
+}, ae = /* @__PURE__ */ c({
+  __name: "input",
+  props: {
+    modelValue: {},
+    name: {},
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    title: {},
+    captionType: { default: "" },
+    size: { default: "s" },
+    icon: {},
+    addCleaner: { type: Boolean },
+    isError: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(l, { emit: t }) {
+    const a = l, s = u({
+      get() {
+        return a.modelValue;
+      },
+      set(o) {
+        t("update:modelValue", o);
+      }
+    }), e = u(() => a.addCleaner && !a.title || a.captionType !== "" ? "" : a.title), n = () => {
+      t("update:modelValue", "");
+    };
+    return (o, b) => (r(), p("label", {
+      class: i({
+        "top-input": !0,
+        ["top-input-" + o.name]: o.name,
+        ["top-size_" + o.size]: !0,
+        "top-disabled": o.disabled,
+        "top-input-withCleaner": o.addCleaner,
+        "top-formsCaptionWrapper": o.captionType !== "",
+        "top-formsCaptionWrapper-always": o.captionType === "top",
+        "top-input-withButton": !!o.$slots.btn
+      }),
+      "data-top-icon": o.icon
+    }, [
+      y(h("input", {
+        type: "text",
+        class: i({
+          "top-forms-focusable": !o.disabled,
+          "top-input_input": !0,
+          "top-error": o.isError
+        }),
+        autocomplete: "off_always",
+        name: o.name,
+        "onUpdate:modelValue": b[0] || (b[0] = (g) => s.value = g),
+        title: o.title,
+        placeholder: e.value,
+        disabled: o.disabled,
+        readonly: o.readonly,
+        onKeydown: b[1] || (b[1] = z(() => (o.addCleaner || !!o.$slots.btn) && n(), ["esc"]))
+      }, null, 42, te), [
+        [k, s.value]
+      ]),
+      o.addCleaner && s.value ? (r(), p("span", {
+        key: 0,
+        class: "top-input_cleaner top-cleaner",
+        "data-top-icon": "",
+        onClick: n
+      })) : d("", !0),
+      s.value ? _(o.$slots, "btn", { key: 1 }) : d("", !0),
+      _(o.$slots, "default"),
+      o.captionType !== "" ? (r(), p("span", se, f(o.title), 1)) : d("", !0)
+    ], 10, oe));
+  }
+}), le = {
+  "top-input": "top-input",
+  "top-input_input": "top-input_input",
+  "top-input-withCleaner": "top-input-withCleaner"
+}, re = {
+  $style: le
+}, _e = /* @__PURE__ */ m(ae, [["__cssModules", re]]), ne = ["name", "value", "disabled"], pe = /* @__PURE__ */ c({
+  __name: "radio",
+  props: {
+    modelValue: {},
+    value: {},
+    name: {},
+    title: {},
+    description: {},
+    disabled: { type: Boolean },
+    isError: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(l, { emit: t }) {
+    const a = l, s = u({
+      get() {
+        return a.modelValue;
+      },
+      set(e) {
+        t("update:modelValue", e);
+      }
+    });
+    return (e, n) => (r(), p("label", {
+      class: i({
+        "top-forms-optionWrapper": !0,
+        "top-radio": !0,
+        ["top-radio_" + e.name]: e.name !== "",
+        "top-disabled": e.disabled,
+        "top-error": e.isError && !e.disabled
+      })
+    }, [
+      y(h("input", {
+        type: "radio",
+        class: i({
+          "top-forms-focusable": !e.disabled,
+          "top-forms-option": !0,
+          "top-radio_input": !0,
+          "top-error": e.isError && !e.disabled
+        }),
+        "onUpdate:modelValue": n[0] || (n[0] = (o) => s.value = o),
+        name: e.name,
+        value: e.value,
+        disabled: e.disabled
+      }, null, 10, ne), [
+        [S, s.value]
+      ]),
+      e.title ? (r(), v($, {
+        key: 0,
+        title: e.title,
+        description: e.description,
+        disabled: e.disabled
+      }, null, 8, ["title", "description", "disabled"])) : d("", !0)
+    ], 2));
+  }
+}), ie = {
+  "top-radio": "top-radio",
+  "top-radio_input": "top-radio_input",
+  "top-error": "top-error"
+}, de = {
+  $style: ie
+}, $e = /* @__PURE__ */ m(pe, [["__cssModules", de]]), ue = ["name", "value", "disabled"], ce = /* @__PURE__ */ c({
+  __name: "switcher",
+  props: {
+    modelValue: { type: [Boolean, Array, Set] },
+    name: {},
+    value: {},
+    title: {},
+    description: {},
+    disabled: { type: Boolean },
+    isError: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(l, { emit: t }) {
+    const a = l, s = u({
+      get() {
+        return a.modelValue;
+      },
+      set(e) {
+        t("update:modelValue", e);
+      }
+    });
+    return (e, n) => (r(), p("label", {
+      class: i({
+        "top-forms-optionWrapper": !0,
+        "top-checkboxSwitcher": !0,
+        "top-disabled": e.disabled,
+        "top-error": e.isError && !e.disabled
+      })
+    }, [
+      y(h("input", {
+        type: "checkbox",
+        class: i({
+          "top-forms-focusable": !e.disabled,
+          "top-forms-option": !0,
+          "top-checkboxSwitcher_input": !0,
+          "top-error": e.isError && !e.disabled
+        }),
+        "onUpdate:modelValue": n[0] || (n[0] = (o) => s.value = o),
+        name: e.name,
+        value: e.value,
+        disabled: e.disabled
+      }, null, 10, ue), [
+        [V, s.value]
+      ]),
+      e.title ? (r(), v($, {
+        key: 0,
+        title: e.title,
+        description: e.description,
+        disabled: e.disabled
+      }, null, 8, ["title", "description", "disabled"])) : d("", !0)
+    ], 2));
+  }
+}), me = {
+  "top-checkboxSwitcher": "top-checkboxSwitcher",
+  "top-checkboxSwitcher_input": "top-checkboxSwitcher_input",
+  "top-error": "top-error"
+}, be = {
+  $style: me
+}, ke = /* @__PURE__ */ m(ce, [["__cssModules", be]]);
+export {
+  he as B,
+  $ as C,
+  K as H,
+  fe as T,
+  m as _,
+  ve as c,
+  _e as i,
+  $e as r,
+  ke as s
+};
+//# sourceMappingURL=forms-3575c189.es.js.map

package/.chunks/forms-3575c189.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"forms-3575c189.es.js","sources":["../../src/components/forms/button/button.vue","../../src/components/forms/textarea/textarea.vue","../../src/components/forms/checkbox/checkbox.vue","../../src/components/forms/input/input.vue","../../src/components/forms/radio/radio.vue","../../src/components/forms/switcher/switcher.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport type { Props } from './button';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tcolor: 'blue',\r\n\tstyling: '',\r\n\tsize: 's',\r\n});\r\n\r\nconst tagName = computed(() => props.href ? 'a' : 'button');\r\n\r\nconst type = computed(() => props.isSubmit ? 'submit' : undefined);\r\n</script>\r\n\r\n<template>\r\n\t<component\r\n\t\t:is=\"tagName\"\r\n\t\t:class=\"{\r\n\t\t\t['top-active']: isActive,\r\n\t\t\t['top-disabled']: disabled,\r\n\t\t\t['top-forms-focusable']: !disabled,\r\n\t\t\t['top-button']: true,\r\n\t\t\t['top-button-progress']: isProgress,\r\n\t\t\t[`top-size_${size}`]: !!size,\r\n\t\t\t[`top-color_${color}`]: true,\r\n\t\t\t[`top-style_${styling}`]: !!styling,\r\n\t\t}\"\r\n\t\t:name=\"name\"\r\n\t\t:title=\"title\"\r\n\t\t:href=\"href\"\r\n\t\t:type=\"type\"\r\n\t\t:data-top-icon=\"icon || undefined\"\r\n\t\t:data-top-icon2=\"icon2 || undefined\"\r\n\t\t:disabled=\"disabled || undefined\"\r\n\t\t:inProgress=\"isProgress\"\r\n\t>\r\n\t\t<!-- @slot Текст или HTML в кнопке -->\r\n\t\t<slot>\r\n\t\t\t{{ !icon ? 'Button' : '' }}\r\n\t\t</slot>\r\n\t</component>\r\n</template>\r\n\r\n<style module>\r\n@import \"./style/button.css\";\r\n@import \"./style/style-outline.css\";\r\n@import \"./style/style-soft.css\";\r\n@import \"./style/style-transparent.css\";\r\n\r\n.top-button {\r\n\t--top-button-color: var(--color-white);\r\n\t--top-button-background-color: transparent;\r\n\t--top-button-background-color-hover: var(--top-button-background-color);\r\n\t--top-button-background-color-active: var(--top-button-background-color-hover);\r\n\t--top-button-background-color-selected: var(--top-button-background-color-hover);\r\n\t--top-button-box-shadow: none;\r\n\t--top-button-box-shadow-hover: var(--top-shadow-darken-2);\r\n\t--top-button-box-shadow-active: var(--top-shadow-darken-3);\r\n\t--top-button-box-shadow-selected: var(--top-shadow-darken-3);\r\n\t--top-forms-border-width: 0px;\r\n\t--top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));\r\n\t--top-icon2-width: calc(var(--top-icon2-size) + var(--top-forms-padding));\r\n}\r\n\r\n.top-button.top-size_l {\r\n\t--top-forms-padding: var(--top-forms-padding_l);\r\n\t--top-forms-base-height: var(--top-forms-base-height_l);\r\n}\r\n\r\n.top-button.top-size_xl {\r\n\t--top-forms-padding: var(--top-forms-padding_xl);\r\n\t--top-forms-base-height: var(--top-forms-base-height_xl);\r\n}\r\n</style>","<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport Hint from '@/components/forms/hint/hint.vue';\r\nimport type { Props, Emits } from './textarea';\r\n\r\ndefineOptions({\r\n\tinheritAttrs: false,\r\n});\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\trows: 5,\r\n\tminHeight: 120,\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst value = computed({\r\n\tget () {\r\n\t\treturn props.modelValue;\r\n\t},\r\n\tset (value) {\r\n\t\temit('update:modelValue', value);\r\n\t},\r\n});\r\n</script>\r\n\r\n<template>\r\n\t<label\r\n\t\t:class=\"{\r\n\t\t\t['top-textarea']: true,\r\n\t\t\t['top-textarea-' + name]: name,\r\n\t\t\t['top-disabled']: disabled,\r\n\t\t}\"\r\n\t>\r\n\t\t<textarea\r\n\t\t\ttype=\"text\"\r\n\t\t\t:class=\"{\r\n\t\t\t\t['top-forms-focusable']: !disabled,\r\n\t\t\t\t['top-textarea_textarea']: true,\r\n\t\t\t\t['top-textarea_textarea-expandable']: expandable,\r\n\t\t\t\t['top-error']: isError,\r\n\t\t\t}\"\r\n\t\t\tautocomplete=\"off_always\"\r\n\t\t\t:name=\"name\"\r\n\t\t\t:placeholder=\"placeholder\"\r\n\t\t\t:disabled=\"disabled\"\r\n\t\t\t:readonly=\"readonly\"\r\n\t\t\t:rows=\"!expandable ? rows : undefined\"\r\n\t\t\t:=\"$attrs\"\r\n\t\t\tv-model=\"value\"\r\n\t\t/>\r\n\r\n\t\t<div\r\n\t\t\tv-if=\"expandable\"\r\n\t\t\tclass=\"top-textarea_pseudoContent\"\r\n\t\t>\r\n\t\t\t{{ value + ' ' }}\r\n\t\t</div>\r\n\r\n\t\t<Hint\r\n\t\t\tv-if=\"hint\"\r\n\t\t\tclass=\"top-textarea_hint\"\r\n\t\t\t:hint=\"hint\"\r\n\t\t\tv-tv-tooltip\r\n\t\t/>\r\n\t</label>\r\n</template>\r\n\r\n<style module>\r\n.top-textarea {\r\n\twidth: 180px;\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n\tposition: relative;\r\n}\r\n\r\n.top-textarea_textarea {\r\n\tbackground: var(--top-forms-background-color);\r\n\twidth: 100%;\r\n\tpadding: var(--top-forms-padding);\r\n\tresize: none;\r\n}\r\n\r\n.top-textarea_textarea:hover {\r\n\tbackground: var(--top-forms-background-color-hover);\r\n}\r\n\r\n.top-textarea_textarea:focus {\r\n\toutline-color: var(--color-theme-75);\r\n\toutline-offset: 0px;\r\n}\r\n\r\n.top-textarea_textarea.top-textarea_textarea-expandable {\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\toverflow: hidden;\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n}\r\n\r\n.top-textarea_pseudoContent {\r\n\tbox-sizing: border-box;\r\n\tmin-height: v-bind(minHeight + 'px');\r\n\tpadding: var(--top-forms-padding);\r\n\tfont-size: 14px;\r\n\twhite-space: pre-wrap;\r\n\toverflow-wrap: anywhere;\r\n\tpointer-events: none;\r\n\topacity: 0;\r\n\tz-index: -1;\r\n}\r\n\r\n.top-textarea_hint {\r\n\tposition: absolute;\r\n\ttop: 2px;\r\n\tright: 2px;\r\n}\r\n</style>","<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport type { Props, Emits } from './checkbox';\r\nimport ControlLabel from '../controlLabel/controlLabel.vue';\r\n\r\nconst props = defineProps<Props>();\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst localValue = computed({\r\n\tget () {\r\n\t\treturn props.modelValue;\r\n\t},\r\n\tset (value) {\r\n\t\temit('update:modelValue', value);\r\n\t},\r\n});\r\n\r\n</script>\r\n\r\n<template>\r\n\t<label :class=\"{\r\n\t\t['top-forms-optionWrapper']: true,\r\n\t\t['top-checkbox']: true,\r\n\t\t['top-checkbox_' + name]: name !== '',\r\n\t\t['top-disabled']: disabled,\r\n\t\t['top-error']: isError && !disabled,\r\n\t}\">\r\n\t\t<input\r\n\t\t\ttype=\"checkbox\"\r\n\t\t\t:class=\"{\r\n\t\t\t\t['top-forms-focusable']: !disabled,\r\n\t\t\t\t['top-forms-option']: true,\r\n\t\t\t\t['top-checkbox_input']: true,\r\n\t\t\t\t['top-error']: isError && !disabled,\r\n\t\t\t}\"\r\n\t\t\t:name=\"name\"\r\n\t\t\tv-model=\"localValue\"\r\n\t\t\t:value=\"value\"\r\n\t\t\t:indeterminate=\"indeterminate\"\r\n\t\t\t:disabled=\"disabled\"\r\n\t\t>\r\n\r\n\t\t<ControlLabel\r\n\t\t\tv-if=\"title\"\r\n\t\t\t:title=\"title\"\r\n\t\t\t:description=\"description\"\r\n\t\t\t:disabled=\"disabled\"\r\n\t\t/>\r\n\t</label>\r\n</template>\r\n\r\n<style module>\r\n.top-checkbox {\r\n\tcursor: pointer;\r\n\tdisplay: inline-flex;\r\n}\r\n\r\n.top-checkbox_input {\r\n\tcursor: inherit;\r\n\tborder-radius: 4px;\r\n\tbackground: var(--content-background-color);\r\n\tborder: 1px solid var(--top-forms-border-color);\r\n\twidth: calc(var(--top-forms-option-height) - 3px * 2);\r\n\theight: calc(var(--top-forms-option-height) - 3px * 2);\r\n}\r\n\r\n.top-checkbox_input:before {\r\n\tcontent: ' ';\r\n\tcolor: #FFF;\r\n\tfont-family: 'Topvisor-2';\r\n\tfont-size: 16px;\r\n}\r\n\r\n.top-checkbox_input:hover {\r\n\tborder-color: var(--top-forms-option-color);\r\n\tbackground: var(--color-theme-50)\r\n}\r\n\r\n/* checked / indeterminate */\r\n.top-checkbox_input:checked,\r\n.top-checkbox_input:indeterminate {\r\n\tborder-color: var(--top-forms-option-color);\r\n\tbackground: var(--top-forms-option-color);\r\n}\r\n\r\n.top-checkbox_input:checked:before {\r\n\tcontent: '';\r\n}\r\n\r\n.top-checkbox_input:indeterminate:before {\r\n\tcontent: '';\r\n}\r\n\r\n.top-checkbox_input:checked:hover,\r\n.top-checkbox_input:indeterminate:hover {\r\n\tborder-color: var(--top-forms-option-color-hover);\r\n\tbackground: var(--top-forms-option-color-hover);\r\n}\r\n\r\n/* disabled selected */\r\n.top-checkbox_input:disabled {\r\n\tborder-color: var(--color-line-1-opacity);\r\n\tbackground: var(--color-theme-50);\r\n}\r\n\r\n.top-checkbox_input:checked:disabled,\r\n.top-checkbox_input:indeterminate:disabled {\r\n\tborder-color: transparent;\r\n\tbackground: var(--color-theme-400);\r\n}\r\n\r\n/* isError */\r\n.top-checkbox_input.top-error {\r\n\tborder-color: var(--color-negative);\r\n}\r\n\r\n.top-checkbox_input.top-error:hover {\r\n\tborder-color: var(--color-negative-2);\r\n}\r\n\r\n/* isError selected */\r\n.top-checkbox_input:checked.top-error,\r\n.top-checkbox_input:indeterminate.top-error {\r\n\tbackground: var(--color-negative);\r\n}\r\n\r\n.top-checkbox_input:checked.top-error:hover,\r\n.top-checkbox_input:indeterminate.top-error:hover {\r\n\tbackground: var(--color-negative-2);\r\n}\r\n</style>","<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport type { Props, Emits } from './input';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tsize: 's',\r\n\tcaptionType: '',\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst modelValue = computed({\r\n\tget() {\r\n\t\treturn props.modelValue;\r\n\t},\r\n\tset(modelValue) {\r\n\t\temit('update:modelValue', modelValue);\r\n\t},\r\n});\r\n\r\nconst placeholder = computed(() => {\r\n\tif (props.addCleaner && !props.title) {\r\n\t\treturn '';\r\n\t}\r\n\tif (props.captionType !== '') {\r\n\t\treturn '';\r\n\t}\r\n\r\n\treturn props.title;\r\n});\r\n\r\nconst clean = () => {\r\n\temit('update:modelValue', '');\r\n};\r\n</script>\r\n\r\n<template>\r\n\t<label\r\n\t\t:class=\"{\r\n\t\t\t['top-input']: true,\r\n\t\t\t['top-input-' + name]: name,\r\n\t\t\t['top-size_' + size]: true,\r\n\t\t\t['top-disabled']: disabled,\r\n\t\t\t['top-input-withCleaner']: addCleaner,\r\n\t\t\t['top-formsCaptionWrapper']: captionType !== '',\r\n\t\t\t['top-formsCaptionWrapper-always']: captionType === 'top',\r\n\t\t\t['top-input-withButton']: !!$slots.btn,\r\n\t\t}\"\r\n\t\t:data-top-icon=\"icon\"\r\n\t>\r\n\t\t<input\r\n\t\t\ttype=\"text\"\r\n\t\t\t:class=\"{\r\n\t\t\t\t['top-forms-focusable']: !disabled,\r\n\t\t\t\t['top-input_input']: true,\r\n\t\t\t\t['top-error']: isError,\r\n\t\t\t}\"\r\n\t\t\tautocomplete=\"off_always\"\r\n\t\t\t:name=\"name\"\r\n\t\t\tv-model=\"modelValue\"\r\n\t\t\t:title=\"title\"\r\n\t\t\t:placeholder=\"placeholder\"\r\n\t\t\t:disabled=\"disabled\"\r\n\t\t\t:readonly=\"readonly\"\r\n\t\t\t@keydown.esc=\"() => (addCleaner || !!$slots.btn) && clean()\"\r\n\t\t>\r\n\r\n\t\t<span\r\n\t\t\tv-if=\"addCleaner && modelValue\"\r\n\t\t\tclass=\"top-input_cleaner top-cleaner\"\r\n\t\t\tdata-top-icon=\"\"\r\n\t\t\t@click=\"clean\"\r\n\t\t></span>\r\n\r\n\t\t<!-- TODO: кнопка должна отоборажаться только при изменении value -->\r\n\t\t<!-- TODO: до нажатия на кнопку, изменеине не должно применяться -->\r\n\t\t<!-- TODO: при отмене состояние должно возвращаться к первоначальному -->\r\n\t\t<slot\r\n\t\t\tv-if=\"modelValue\"\r\n\t\t\tname=\"btn\"\r\n\t\t/>\r\n\r\n\t\t<slot></slot>\r\n\r\n\t\t<span\r\n\t\t\tv-if=\"captionType !== ''\"\r\n\t\t\tclass=\"top-formsCaption\"\r\n\t\t>\r\n\t\t\t{{ title }}\r\n\t\t</span>\r\n\t</label>\r\n</template>\r\n\r\n<style module>\r\n.top-input {\r\n\twidth: 180px;\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n\tgap: var(--top-gap-1);\r\n}\r\n\r\n.top-input_input {\r\n\tbackground: var(--top-forms-background-color);\r\n}\r\n\r\n.top-input_input:hover {\r\n\tbackground: var(--top-forms-background-color-hover);\r\n}\r\n\r\n.top-input_input:focus {\r\n\toutline-color: var(--color-theme-75);\r\n\toutline-offset: 0px;\r\n}\r\n\r\n.top-input-withCleaner .top-input_input:not(:placeholder-shown) {\r\n\t--top-forms_clear-width: 24px;\r\n}\r\n\r\n/* TODO: перенести в inputsRange */\r\n.top-input_input {\r\n\twidth: 50%;\r\n\tflex-grow: 1;\r\n}\r\n\r\n.top-input[data-top-icon]:before {\r\n\t--top-icon-color: var(--color-text-secondary);\r\n}\r\n</style>","<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport type { Props, Emits } from './radio';\r\nimport ControlLabel from '../controlLabel/controlLabel.vue';\r\n\r\nconst props = defineProps<Props>();\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst localValue = computed({\r\n\tget () {\r\n\t\treturn props.modelValue;\r\n\t},\r\n\tset (value) {\r\n\t\temit('update:modelValue', value);\r\n\t},\r\n});\r\n\r\n</script>\r\n\r\n<template>\r\n\t<label\r\n\t\t:class=\"{\r\n\t\t['top-forms-optionWrapper']: true,\r\n\t\t['top-radio']: true,\r\n\t\t['top-radio_' + name]: name !== '',\r\n\t\t['top-disabled']: disabled,\r\n\t\t['top-error']: isError && !disabled,\r\n\t}\"\r\n\t>\r\n\t\t<input\r\n\t\t\ttype=\"radio\"\r\n\t\t\t:class=\"{\r\n\t\t\t\t['top-forms-focusable']: !disabled,\r\n\t\t\t\t['top-forms-option']: true,\r\n\t\t\t\t['top-radio_input']: true,\r\n\t\t\t\t['top-error']: isError && !disabled,\r\n\t\t\t}\"\r\n\t\t\tv-model=\"localValue\"\r\n\t\t\t:name=\"name\"\r\n\t\t\t:value=\"value\"\r\n\t\t\t:disabled=\"disabled\"\r\n\t\t>\r\n\r\n\t\t<ControlLabel\r\n\t\t\tv-if=\"title\"\r\n\t\t\t:title=\"title\"\r\n\t\t\t:description=\"description\"\r\n\t\t\t:disabled=\"disabled\"\r\n\t\t/>\r\n\t</label>\r\n</template>\r\n\r\n<style module>\r\n:root {\r\n\t--top-radio-background-color: var(--content-background-color);\r\n\t--top-radio-background-color-hover: var(--top-radio-background-color);\r\n\t--top-radio-background-color-active: var(--top-radio-background-color);\r\n}\r\n\r\n.top-radio {\r\n\tcursor: pointer;\r\n}\r\n\r\n.top-radio_input {\r\n\tborder-radius: 50%;\r\n\tbackground: var(--content-background-color);\r\n\tborder: 1px solid var(--top-forms-border-color);\r\n\twidth: calc(var(--top-forms-option-height) - 3px * 2);\r\n\theight: calc(var(--top-forms-option-height) - 3px * 2);\r\n}\r\n\r\n.top-radio_input:hover {\r\n\tborder-color: var(--top-forms-option-color);\r\n\tbackground: var(--color-theme-50)\r\n}\r\n\r\n.top-radio_input:checked {\r\n\tborder-color: var(--top-forms-option-color);\r\n\tborder-width: 5px;\r\n}\r\n\r\n.top-radio_input:checked:hover {\r\n\tborder-color: var(--top-forms-option-color-hover);\r\n}\r\n\r\n/* disabled */\r\n.top-radio_input:disabled {\r\n\tborder-color: var(--color-line-1-opacity);\r\n\tbackground: var(--color-theme-50);\r\n}\r\n\r\n/* disabled selected */\r\n.top-radio_input:checked:disabled {\r\n\tborder-color: var(--color-theme-400);\r\n}\r\n\r\n/* isError */\r\n.top-radio_input.top-error {\r\n\tborder-color: var(--color-negative);\r\n}\r\n\r\n.top-radio_input.top-error:hover {\r\n\tborder-color: var(--color-negative-2);\r\n}\r\n</style>","<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport type { Props, Emits } from './switcher';\r\nimport ControlLabel from '../controlLabel/controlLabel.vue';\r\n\r\nconst props = defineProps<Props>();\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst localValue = computed({\r\n\tget () {\r\n\t\treturn props.modelValue;\r\n\t},\r\n\tset (value) {\r\n\t\temit('update:modelValue', value);\r\n\t},\r\n});\r\n</script>\r\n\r\n<template>\r\n\t<label\r\n\t\t:class=\"{\r\n\t\t['top-forms-optionWrapper']: true,\r\n\t\t['top-checkboxSwitcher']: true,\r\n\t\t['top-disabled']: disabled,\r\n\t\t['top-error']: isError && !disabled,\r\n\t}\"\r\n\t>\r\n\t\t<input\r\n\t\t\ttype=\"checkbox\"\r\n\t\t\t:class=\"{\r\n\t\t\t\t['top-forms-focusable']: !disabled,\r\n\t\t\t\t['top-forms-option']: true,\r\n\t\t\t\t['top-checkboxSwitcher_input']: true,\r\n\t\t\t\t['top-error']: isError && !disabled,\r\n\t\t\t}\"\r\n\t\t\tv-model=\"localValue\"\r\n\t\t\t:name=\"name\"\r\n\t\t\t:value=\"value\"\r\n\t\t\t:disabled=\"disabled\"\r\n\t\t>\r\n\r\n\t\t<ControlLabel\r\n\t\t\tv-if=\"title\"\r\n\t\t\t:title=\"title\"\r\n\t\t\t:description=\"description\"\r\n\t\t\t:disabled=\"disabled\"\r\n\t\t/>\r\n\t</label>\r\n</template>\r\n\r\n<style module>\r\n.top-checkboxSwitcher {\r\n\tcursor: pointer;\r\n\tdisplay: inline-flex;\r\n\tgap: 4px;\r\n}\r\n\r\n.top-checkboxSwitcher_input {\r\n\tborder-radius: 9px;\r\n\tborder: none;\r\n\tbackground: var(--color-theme-100);\r\n\twidth: 36px;\r\n\theight: 18px;\r\n\tposition: relative;\r\n}\r\n\r\n.top-checkboxSwitcher_input:before {\r\n\tcontent: '';\r\n\tborder-radius: 50%;\r\n\tbackground: var(--color-white);\r\n\twidth: 12px;\r\n\theight: 12px;\r\n\tmargin: 3px;\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\r\n\ttransition: left 0.1s;\r\n}\r\n\r\n.top-checkboxSwitcher_input:hover {\r\n\tbackground: var(--color-theme-150);\r\n}\r\n\r\n/* checked */\r\n.top-checkboxSwitcher_input:checked {\r\n\tbackground: var(--top-forms-option-color);\r\n}\r\n\r\n.top-checkboxSwitcher_input:checked:hover {\r\n\tbackground: var(--top-forms-option-color-hover);\r\n}\r\n\r\n.top-checkboxSwitcher_input:checked:before {\r\n\tleft: 50%;\r\n}\r\n\r\n/* disabled */\r\n.top-checkboxSwitcher_input:disabled {\r\n\tbackground: var(--color-theme-400);\r\n}\r\n\r\n/* isError */\r\n.top-checkboxSwitcher_input.top-error {\r\n\tbackground: var(--color-negative);\r\n}\r\n\r\n.top-checkboxSwitcher_input.top-error:hover {\r\n\tbackground: var(--color-negative-2);\r\n}\r\n</style>"],"names":["tagName","computed","props","type","value","emit","localValue","modelValue","placeholder","clean"],"mappings":";;;;;;;;;;;;;;;;;;iBAUMA,IAAUC,EAAS,MAAMC,EAAM,OAAO,MAAM,QAAQ,GAEpDC,IAAOF,EAAS,MAAMC,EAAM,WAAW,WAAW,MAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACIjE,UAAME,IAAQH,EAAS;AAAA,MACtB,MAAO;AACN,eAAOC,EAAM;AAAA,MACd;AAAA,MACA,IAAKE,GAAO;AACX,QAAAC,EAAK,qBAAqBD,CAAK;AAAA,MAChC;AAAA,IAAA,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBCfKE,IAAaL,EAAS;AAAA,MAC3B,MAAO;AACN,eAAOC,EAAM;AAAA,MACd;AAAA,MACA,IAAKE,GAAO;AACX,QAAAC,EAAK,qBAAqBD,CAAK;AAAA,MAChC;AAAA,IAAA,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBCJKG,IAAaN,EAAS;AAAA,MAC3B,MAAM;AACL,eAAOC,EAAM;AAAA,MACd;AAAA,MACA,IAAIK,GAAY;AACf,QAAAF,EAAK,qBAAqBE,CAAU;AAAA,MACrC;AAAA,IAAA,CACA,GAEKC,IAAcP,EAAS,MACxBC,EAAM,cAAc,CAACA,EAAM,SAG3BA,EAAM,gBAAgB,KAClB,KAGDA,EAAM,KACb,GAEKO,IAAQ,MAAM;AACnB,MAAAJ,EAAK,qBAAqB,EAAE;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBCxBvBC,IAAaL,EAAS;AAAA,MAC3B,MAAO;AACN,eAAOC,EAAM;AAAA,MACd;AAAA,MACA,IAAKE,GAAO;AACX,QAAAC,EAAK,qBAAqBD,CAAK;AAAA,MAChC;AAAA,IAAA,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBCPKE,IAAaL,EAAS;AAAA,MAC3B,MAAO;AACN,eAAOC,EAAM;AAAA,MACd;AAAA,MACA,IAAKE,GAAO;AACX,QAAAC,EAAK,qBAAqBD,CAAK;AAAA,MAChC;AAAA,IAAA,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}