@topvisor/ui 0.0.18 → 0.0.33

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/editArea/editArea.amd.js

@@ -1,3 +0,0 @@
-define(["exports","vue","../.chunks/forms-1dc7c6f3.amd"],function(i,e,l){"use strict"; if(typeof vue === "undefined") var vue = window.Vue;var p=document.createElement("style");p.textContent=`.top-editArea{display:flex;flex-direction:column;gap:6px}.top-editArea_title{font-size:12px}.top-editArea_form{background:var(--top-forms-background-color);outline-color:var(--color-theme-75);outline-offset:0;display:flex;flex-direction:column}.top-editArea_form:hover{background:var(--top-forms-background-color-hover)}.top-textarea{width:100%}.top-editArea_element.top-textarea_textarea{border:none;outline:none;animation:none}.top-editArea_footer{padding:var(--top-forms-padding);display:flex;justify-content:flex-end;gap:var(--top-forms-padding)}.top-editArea-attachedToKeyboard{background:var(--top-forms-background-color);margin-bottom:env(keyboard-inset-height,0);position:fixed;bottom:0;right:0;left:0;z-index:2;gap:0}.top-editArea-attachedToKeyboard .top-editArea_form{border-radius:0;border:none;border-top:1px solid var(--top-forms-border-color)}.top-editArea-attachedToKeyboard .top-editArea_title{border-top:1px solid var(--color-line-2-opacity);padding:var(--top-forms-padding)}.top-editArea-attachedToKeyboard .top-editArea_footer>[data-top-icon]{border-radius:100%}
-`,document.head.appendChild(p);const u={key:0,class:"top-editArea_title"},f={class:"top-editArea_footer"},b=e.defineComponent({__name:"editArea",props:{modelValue:{},title:{},cancelText:{default:"Отмена"},submitText:{default:"Отправить"},attachToKeyboard:{type:Boolean},name:{},placeholder:{},rows:{},minHeight:{},expandable:{type:Boolean,default:!0},disabled:{type:Boolean},readonly:{type:Boolean},isError:{type:Boolean},hint:{}},emits:["update:modelValue","cancel"],setup(A,{emit:s}){const r=A,n=e.ref(""),a=e.ref(r.modelValue);e.watch(e.toRef(r,"modelValue"),()=>{a.value=r.modelValue});const g=e.computed(()=>a.value!==r.modelValue),c=t=>{s("update:modelValue",t)},m=()=>{s("cancel"),a.value=r.modelValue};return(t,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass({"top-editArea":!0,"top-editArea-attachedToKeyboard":t.attachToKeyboard})},[t.title?(e.openBlock(),e.createElementBlock("div",u,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass({"top-editArea_form":!0,"top-error":t.isError,"top-focus":n.value=="focus"})},[e.createVNode(l.Textarea,{modelValue:a.value,"onUpdate:modelValue":o[0]||(o[0]=d=>a.value=d),name:t.name,placeholder:t.placeholder,rows:t.rows,minHeight:t.minHeight,expandable:t.expandable,disabled:t.disabled,readonly:t.readonly,isError:t.isError,hint:t.hint,class:"top-editArea_element",onFocus:o[1]||(o[1]=d=>n.value="focus"),onBlur:o[2]||(o[2]=d=>n.value=""),onKeyup:[e.withKeys(m,["esc"]),o[3]||(o[3]=e.withKeys(e.withModifiers(d=>c(a.value),["ctrl"]),["enter"]))]},null,8,["modelValue","name","placeholder","rows","minHeight","expandable","disabled","readonly","isError","hint","onKeyup"]),e.createElementVNode("div",f,[g.value&&(!t.attachToKeyboard||t.modelValue)?(e.openBlock(),e.createBlock(l.Button,{key:0,class:"top-editArea_button",color:"theme",icon:t.attachToKeyboard?"":"",onClick:m},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.attachToKeyboard?"":t.cancelText),1)]),_:1},8,["icon"])):e.createCommentVNode("",!0),e.createVNode(l.Button,{class:"top-editArea_button",icon:t.attachToKeyboard?"":"",onClick:o[4]||(o[4]=d=>c(a.value))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.attachToKeyboard?"":t.submitText),1)]),_:1},8,["icon"])])],2)],2))}}),y={$style:{"top-editArea":"top-editArea","top-editArea_title":"top-editArea_title","top-editArea_form":"top-editArea_form","top-textarea":"top-textarea","top-editArea_element":"top-editArea_element","top-textarea_textarea":"top-textarea_textarea","top-editArea_footer":"top-editArea_footer","top-editArea-attachedToKeyboard":"top-editArea-attachedToKeyboard"}},h=l._export_sfc(b,[["__cssModules",y]]);i.EditArea=h,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
-//# sourceMappingURL=editArea.amd.js.map

package/editArea/editArea.amd.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"editArea.amd.js","sources":["../../src/components/editArea/editArea/editArea.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { ref, toRef, watch, computed } from 'vue';\r\nimport Button from '@/components/forms/button/button.vue';\r\nimport type { Props, Emits } from './editArea';\r\nimport Textarea from '@/components/forms/textarea/textarea.vue';\r\n\r\n// TODO: добавить переменную top-forms-fixed-height и использовать ее при добавлении отступов у страницы\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tcancelText: 'Отмена',\r\n\tsubmitText: 'Отправить',\r\n\texpandable: true,\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst state = ref('');\r\n\r\n/**\r\n * Локальное значение modelValue, будет проброшено вверх только в случае отправки формы\r\n */\r\nconst localValue = ref(props.modelValue);\r\n\r\nwatch(toRef(props, 'modelValue'), () => {\r\n\tlocalValue.value = props.modelValue;\r\n});\r\n\r\nconst isChanged = computed(() => localValue.value !== props.modelValue);\r\n\r\nconst submit = (value: string) => {\r\n\temit('update:modelValue', value);\r\n};\r\n\r\nconst cancel = () => {\r\n\temit('cancel');\r\n\r\n\t// сброс введенного значения\r\n\tlocalValue.value = props.modelValue;\r\n};\r\n</script>\r\n\r\n<template>\r\n\t<div\r\n\t\t:class=\"{\r\n\t\t\t'top-editArea': true,\r\n\t\t\t'top-editArea-attachedToKeyboard': attachToKeyboard,\r\n\t\t}\"\r\n\t>\r\n\t\t<div\r\n\t\t\tv-if=\"title\"\r\n\t\t\tclass=\"top-editArea_title\"\r\n\t\t>\r\n\t\t\t{{ title }}\r\n\t\t</div>\r\n\r\n\t\t<div\r\n\t\t\t:class=\"{\r\n\t\t\t\t'top-editArea_form': true,\r\n\t\t\t\t'top-error': isError,\r\n\t\t\t\t'top-focus': state == 'focus',\r\n\t\t\t}\"\r\n\t\t>\r\n\t\t\t<Textarea\r\n\t\t\t\tv-model=\"localValue\"\r\n\t\t\t\t:name=\"name\"\r\n\t\t\t\t:placeholder=\"placeholder\"\r\n\t\t\t\t:rows=\"rows\"\r\n\t\t\t\t:minHeight=\"minHeight\"\r\n\t\t\t\t:expandable=\"expandable\"\r\n\t\t\t\t:disabled=\"disabled\"\r\n\t\t\t\t:readonly=\"readonly\"\r\n\t\t\t\t:isError=\"isError\"\r\n\t\t\t\t:hint=\"hint\"\r\n\t\t\t\tclass=\"top-editArea_element\"\r\n\t\t\t\t@focus=\"state = 'focus'\"\r\n\t\t\t\t@blur=\"state = ''\"\r\n\t\t\t\t@keyup.esc=\"cancel\"\r\n\t\t\t\t@keyup.ctrl.enter=\"submit(localValue)\"\r\n\t\t\t/>\r\n\r\n\t\t\t<div class=\"top-editArea_footer\">\r\n\t\t\t\t<Button\r\n\t\t\t\t\tv-if=\"isChanged && (!attachToKeyboard || modelValue)\"\r\n\t\t\t\t\tclass=\"top-editArea_button\"\r\n\t\t\t\t\tcolor=\"theme\"\r\n\t\t\t\t\t:icon=\"attachToKeyboard ? '': ''\"\r\n\t\t\t\t\t@click=\"cancel\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ attachToKeyboard ? '' : cancelText }}\r\n\t\t\t\t</Button>\r\n\r\n\t\t\t\t<Button\r\n\t\t\t\t\tclass=\"top-editArea_button\"\r\n\t\t\t\t\t:icon=\"attachToKeyboard ? '': ''\"\r\n\t\t\t\t\t@click=\"submit(localValue)\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ attachToKeyboard ? '' : submitText }}\r\n\t\t\t\t</Button>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</template>\r\n\r\n<style module>\r\n.top-editArea {\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tgap: 6px;\r\n}\r\n\r\n.top-editArea_title {\r\n\tfont-size: 12px;\r\n}\r\n\r\n.top-editArea_form {\r\n\tbackground: var(--top-forms-background-color);\r\n\toutline-color: var(--color-theme-75);\r\n\toutline-offset: 0;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n}\r\n\r\n.top-editArea_form:hover {\r\n\tbackground: var(--top-forms-background-color-hover);\r\n}\r\n\r\n/* textarea в EditArea */\r\n.top-textarea {\r\n\twidth: 100%;\r\n}\r\n\r\n.top-editArea_element.top-textarea_textarea {\r\n\tborder: none;\r\n\toutline: none;\r\n\tanimation: none;\r\n}\r\n\r\n/* footer */\r\n.top-editArea_footer {\r\n\tpadding: var(--top-forms-padding);\r\n\tdisplay: flex;\r\n\tjustify-content: flex-end;\r\n\tgap: var(--top-forms-padding);\r\n}\r\n\r\n/* attachedToKeyboard */\r\n.top-editArea-attachedToKeyboard {\r\n\tbackground: var(--top-forms-background-color);\r\n\tmargin-bottom: env(keyboard-inset-height, 0);\r\n\tposition: fixed;\r\n\tbottom: 0;\r\n\tright: 0;\r\n\tleft: 0;\r\n\tz-index: 2;\r\n\tgap: 0;\r\n}\r\n\r\n.top-editArea-attachedToKeyboard .top-editArea_form {\r\n\tborder-radius: 0;\r\n\tborder: none;\r\n\tborder-top: 1px solid var(--top-forms-border-color);\r\n}\r\n\r\n.top-editArea-attachedToKeyboard .top-editArea_title {\r\n\tborder-top: 1px solid var(--color-line-2-opacity);\r\n\tpadding: var(--top-forms-padding);\r\n}\r\n\r\n.top-editArea-attachedToKeyboard .top-editArea_footer > [data-top-icon] {\r\n\tborder-radius: 100%;\r\n}\r\n</style>"],"names":["state","ref","localValue","props","watch","toRef","isChanged","computed","submit","value","emit","cancel"],"mappings":";gfAgBMA,EAAQC,MAAI,EAAE,EAKdC,EAAaD,EAAAA,IAAIE,EAAM,UAAU,EAEvCC,EAAAA,MAAMC,EAAM,MAAAF,EAAO,YAAY,EAAG,IAAM,CACvCD,EAAW,MAAQC,EAAM,UAAA,CACzB,EAED,MAAMG,EAAYC,EAAAA,SAAS,IAAML,EAAW,QAAUC,EAAM,UAAU,EAEhEK,EAAUC,GAAkB,CACjCC,EAAK,oBAAqBD,CAAK,CAAA,EAG1BE,EAAS,IAAM,CACpBD,EAAK,QAAQ,EAGbR,EAAW,MAAQC,EAAM,UAAA"}

package/editArea/editArea.js

@@ -1,111 +0,0 @@
-import { defineComponent as B, ref as u, watch as w, toRef as E, computed as k, openBlock as d, createElementBlock as m, normalizeClass as c, toDisplayString as n, createCommentVNode as y, createElementVNode as b, createVNode as A, withKeys as f, withModifiers as C, createBlock as g, withCtx as h, createTextVNode as v } from "vue";
-import { T as $, B as T, _ as H } from "../.chunks/forms-3575c189.es.js";
-const N = {
-  key: 0,
-  class: "top-editArea_title"
-}, M = { class: "top-editArea_footer" }, _ = /* @__PURE__ */ B({
-  __name: "editArea",
-  props: {
-    modelValue: {},
-    title: {},
-    cancelText: { default: "Отмена" },
-    submitText: { default: "Отправить" },
-    attachToKeyboard: { type: Boolean },
-    name: {},
-    placeholder: {},
-    rows: {},
-    minHeight: {},
-    expandable: { type: Boolean, default: !0 },
-    disabled: { type: Boolean },
-    readonly: { type: Boolean },
-    isError: { type: Boolean },
-    hint: {}
-  },
-  emits: ["update:modelValue", "cancel"],
-  setup(V, { emit: i }) {
-    const a = V, r = u(""), o = u(a.modelValue);
-    w(E(a, "modelValue"), () => {
-      o.value = a.modelValue;
-    });
-    const K = k(() => o.value !== a.modelValue), s = (e) => {
-      i("update:modelValue", e);
-    }, p = () => {
-      i("cancel"), o.value = a.modelValue;
-    };
-    return (e, t) => (d(), m("div", {
-      class: c({
-        "top-editArea": !0,
-        "top-editArea-attachedToKeyboard": e.attachToKeyboard
-      })
-    }, [
-      e.title ? (d(), m("div", N, n(e.title), 1)) : y("", !0),
-      b("div", {
-        class: c({
-          "top-editArea_form": !0,
-          "top-error": e.isError,
-          "top-focus": r.value == "focus"
-        })
-      }, [
-        A($, {
-          modelValue: o.value,
-          "onUpdate:modelValue": t[0] || (t[0] = (l) => o.value = l),
-          name: e.name,
-          placeholder: e.placeholder,
-          rows: e.rows,
-          minHeight: e.minHeight,
-          expandable: e.expandable,
-          disabled: e.disabled,
-          readonly: e.readonly,
-          isError: e.isError,
-          hint: e.hint,
-          class: "top-editArea_element",
-          onFocus: t[1] || (t[1] = (l) => r.value = "focus"),
-          onBlur: t[2] || (t[2] = (l) => r.value = ""),
-          onKeyup: [
-            f(p, ["esc"]),
-            t[3] || (t[3] = f(C((l) => s(o.value), ["ctrl"]), ["enter"]))
-          ]
-        }, null, 8, ["modelValue", "name", "placeholder", "rows", "minHeight", "expandable", "disabled", "readonly", "isError", "hint", "onKeyup"]),
-        b("div", M, [
-          K.value && (!e.attachToKeyboard || e.modelValue) ? (d(), g(T, {
-            key: 0,
-            class: "top-editArea_button",
-            color: "theme",
-            icon: e.attachToKeyboard ? "" : "",
-            onClick: p
-          }, {
-            default: h(() => [
-              v(n(e.attachToKeyboard ? "" : e.cancelText), 1)
-            ]),
-            _: 1
-          }, 8, ["icon"])) : y("", !0),
-          A(T, {
-            class: "top-editArea_button",
-            icon: e.attachToKeyboard ? "" : "",
-            onClick: t[4] || (t[4] = (l) => s(o.value))
-          }, {
-            default: h(() => [
-              v(n(e.attachToKeyboard ? "" : e.submitText), 1)
-            ]),
-            _: 1
-          }, 8, ["icon"])
-        ])
-      ], 2)
-    ], 2));
-  }
-}), z = {
-  "top-editArea": "top-editArea",
-  "top-editArea_title": "top-editArea_title",
-  "top-editArea_form": "top-editArea_form",
-  "top-textarea": "top-textarea",
-  "top-editArea_element": "top-editArea_element",
-  "top-textarea_textarea": "top-textarea_textarea",
-  "top-editArea_footer": "top-editArea_footer",
-  "top-editArea-attachedToKeyboard": "top-editArea-attachedToKeyboard"
-}, D = {
-  $style: z
-}, S = /* @__PURE__ */ H(_, [["__cssModules", D]]);
-export {
-  S as EditArea
-};
-//# sourceMappingURL=editArea.js.map

package/editArea/editArea.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"editArea.js","sources":["../../src/components/editArea/editArea/editArea.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { ref, toRef, watch, computed } from 'vue';\r\nimport Button from '@/components/forms/button/button.vue';\r\nimport type { Props, Emits } from './editArea';\r\nimport Textarea from '@/components/forms/textarea/textarea.vue';\r\n\r\n// TODO: добавить переменную top-forms-fixed-height и использовать ее при добавлении отступов у страницы\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tcancelText: 'Отмена',\r\n\tsubmitText: 'Отправить',\r\n\texpandable: true,\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst state = ref('');\r\n\r\n/**\r\n * Локальное значение modelValue, будет проброшено вверх только в случае отправки формы\r\n */\r\nconst localValue = ref(props.modelValue);\r\n\r\nwatch(toRef(props, 'modelValue'), () => {\r\n\tlocalValue.value = props.modelValue;\r\n});\r\n\r\nconst isChanged = computed(() => localValue.value !== props.modelValue);\r\n\r\nconst submit = (value: string) => {\r\n\temit('update:modelValue', value);\r\n};\r\n\r\nconst cancel = () => {\r\n\temit('cancel');\r\n\r\n\t// сброс введенного значения\r\n\tlocalValue.value = props.modelValue;\r\n};\r\n</script>\r\n\r\n<template>\r\n\t<div\r\n\t\t:class=\"{\r\n\t\t\t'top-editArea': true,\r\n\t\t\t'top-editArea-attachedToKeyboard': attachToKeyboard,\r\n\t\t}\"\r\n\t>\r\n\t\t<div\r\n\t\t\tv-if=\"title\"\r\n\t\t\tclass=\"top-editArea_title\"\r\n\t\t>\r\n\t\t\t{{ title }}\r\n\t\t</div>\r\n\r\n\t\t<div\r\n\t\t\t:class=\"{\r\n\t\t\t\t'top-editArea_form': true,\r\n\t\t\t\t'top-error': isError,\r\n\t\t\t\t'top-focus': state == 'focus',\r\n\t\t\t}\"\r\n\t\t>\r\n\t\t\t<Textarea\r\n\t\t\t\tv-model=\"localValue\"\r\n\t\t\t\t:name=\"name\"\r\n\t\t\t\t:placeholder=\"placeholder\"\r\n\t\t\t\t:rows=\"rows\"\r\n\t\t\t\t:minHeight=\"minHeight\"\r\n\t\t\t\t:expandable=\"expandable\"\r\n\t\t\t\t:disabled=\"disabled\"\r\n\t\t\t\t:readonly=\"readonly\"\r\n\t\t\t\t:isError=\"isError\"\r\n\t\t\t\t:hint=\"hint\"\r\n\t\t\t\tclass=\"top-editArea_element\"\r\n\t\t\t\t@focus=\"state = 'focus'\"\r\n\t\t\t\t@blur=\"state = ''\"\r\n\t\t\t\t@keyup.esc=\"cancel\"\r\n\t\t\t\t@keyup.ctrl.enter=\"submit(localValue)\"\r\n\t\t\t/>\r\n\r\n\t\t\t<div class=\"top-editArea_footer\">\r\n\t\t\t\t<Button\r\n\t\t\t\t\tv-if=\"isChanged && (!attachToKeyboard || modelValue)\"\r\n\t\t\t\t\tclass=\"top-editArea_button\"\r\n\t\t\t\t\tcolor=\"theme\"\r\n\t\t\t\t\t:icon=\"attachToKeyboard ? '': ''\"\r\n\t\t\t\t\t@click=\"cancel\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ attachToKeyboard ? '' : cancelText }}\r\n\t\t\t\t</Button>\r\n\r\n\t\t\t\t<Button\r\n\t\t\t\t\tclass=\"top-editArea_button\"\r\n\t\t\t\t\t:icon=\"attachToKeyboard ? '': ''\"\r\n\t\t\t\t\t@click=\"submit(localValue)\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ attachToKeyboard ? '' : submitText }}\r\n\t\t\t\t</Button>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</template>\r\n\r\n<style module>\r\n.top-editArea {\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tgap: 6px;\r\n}\r\n\r\n.top-editArea_title {\r\n\tfont-size: 12px;\r\n}\r\n\r\n.top-editArea_form {\r\n\tbackground: var(--top-forms-background-color);\r\n\toutline-color: var(--color-theme-75);\r\n\toutline-offset: 0;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n}\r\n\r\n.top-editArea_form:hover {\r\n\tbackground: var(--top-forms-background-color-hover);\r\n}\r\n\r\n/* textarea в EditArea */\r\n.top-textarea {\r\n\twidth: 100%;\r\n}\r\n\r\n.top-editArea_element.top-textarea_textarea {\r\n\tborder: none;\r\n\toutline: none;\r\n\tanimation: none;\r\n}\r\n\r\n/* footer */\r\n.top-editArea_footer {\r\n\tpadding: var(--top-forms-padding);\r\n\tdisplay: flex;\r\n\tjustify-content: flex-end;\r\n\tgap: var(--top-forms-padding);\r\n}\r\n\r\n/* attachedToKeyboard */\r\n.top-editArea-attachedToKeyboard {\r\n\tbackground: var(--top-forms-background-color);\r\n\tmargin-bottom: env(keyboard-inset-height, 0);\r\n\tposition: fixed;\r\n\tbottom: 0;\r\n\tright: 0;\r\n\tleft: 0;\r\n\tz-index: 2;\r\n\tgap: 0;\r\n}\r\n\r\n.top-editArea-attachedToKeyboard .top-editArea_form {\r\n\tborder-radius: 0;\r\n\tborder: none;\r\n\tborder-top: 1px solid var(--top-forms-border-color);\r\n}\r\n\r\n.top-editArea-attachedToKeyboard .top-editArea_title {\r\n\tborder-top: 1px solid var(--color-line-2-opacity);\r\n\tpadding: var(--top-forms-padding);\r\n}\r\n\r\n.top-editArea-attachedToKeyboard .top-editArea_footer > [data-top-icon] {\r\n\tborder-radius: 100%;\r\n}\r\n</style>"],"names":["state","ref","localValue","props","watch","toRef","isChanged","computed","submit","value","emit","cancel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;iBAgBMA,IAAQC,EAAI,EAAE,GAKdC,IAAaD,EAAIE,EAAM,UAAU;AAEvC,IAAAC,EAAMC,EAAMF,GAAO,YAAY,GAAG,MAAM;AACvC,MAAAD,EAAW,QAAQC,EAAM;AAAA,IAAA,CACzB;AAED,UAAMG,IAAYC,EAAS,MAAML,EAAW,UAAUC,EAAM,UAAU,GAEhEK,IAAS,CAACC,MAAkB;AACjC,MAAAC,EAAK,qBAAqBD,CAAK;AAAA,IAAA,GAG1BE,IAAS,MAAM;AACpB,MAAAD,EAAK,QAAQ,GAGbR,EAAW,QAAQC,EAAM;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}