@topvisor/ui 0.0.18 → 0.0.34

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

@@ -1,461 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}