@topvisor/ui 0.0.15 → 0.0.17

package/dark.css

@@ -1,136 +1,136 @@
-:root {
-	/* Main */
-	--color-primary: var(--color-blue-450);
-	--color-primary-light: var(--color-blue-800);
-	--color-primary-light-opacity: rgba(1, 40, 100, 0.75);
-	--color-primary-2: var(--color-blue-500);
-	--color-primary-2-light: var(--color-blue-750);
-	--color-primary-2-light-opacity: rgba(0, 59, 146, 0.64);
-
-	--color-secondary-opacity: rgba(193, 203, 215, 0.16);
-	--color-secondary-2-opacity: rgba(193, 203, 215, 0.32);
-	--color-secondary-3-opacity: rgba(193, 203, 215, 0.38);
-
-	--color-positive: var(--color-green-450);
-	--color-positive-opacity: rgba(0, 102, 44, 0.75);
-	--color-positive-light: var(--color-green-800);
-	--color-positive-light-opacity: rgba(0, 89, 38, 0.47);
-	--color-positive-2: var(--color-green-500);
-	--color-positive-2-light: var(--color-green-750);
-	--color-positive-2-light-opacity: rgba(0, 102, 44, 0.75);
-
-	--color-warning: var(--color-orange-450);
-	--color-warning-opacity: rgba(255, 170, 51, 0.3);
-	--color-warning-light: var(--color-orange-800);
-	--color-warning-light-opacity: rgba(109, 64, 1, 0.61);
-	--color-warning-2: var(--color-orange-500);
-	--color-warning-2-light: var(--color-orange-750);
-	--color-warning-2-light-opacity: rgba(161, 97, 0, 0.58);
-
-	--color-negative: var(--color-red-450);
-	--color-negative-opacity: rgba(234, 65, 50, 0.3);
-	--color-negative-light: var(--color-red-800);
-	--color-negative-light-opacity: rgba(117, 10, 0, 0.50);
-	--color-negative-2: var(--color-red-500);
-	--color-negative-2-light: var(--color-red-750);
-	--color-negative-2-light-opacity: rgba(136, 23, 0, 0.66);
-
-	/* Text */
-	--color-text-1: var(--color-theme-975);
-	--color-text-2: var(--color-theme-750);
-	--color-text-3: var(--color-theme-550);
-	--color-text-4: var(--color-theme-450);
-	--color-text: var(--color-text-1);
-
-	--color-text-secondary: var(--color-gray-750);
-	--color-text-secondary-2: var(--color-gray-650);
-
-	--color-text-link: var(--color-blue-500);
-	--color-text-link-hover: var(--color-blue-450);
-
-	--color-overlay: rgba(0, 0, 0, 0.3);
-
-	--color-placeholder: var(--color-gray-350);
-	--color-placeholder-active: var(--color-gray-450);
-
-	/* Background colors */
-	--color-bg-1: rgba(21, 23, 25, 1);
-	--color-bg-2: rgba(26, 28, 31, 1);
-	--color-bg-3: rgba(38, 41, 46, 1);
-
-	/* Line colors */
-	--color-line-1-opacity: rgba(193, 203, 215, 0.1);
-	--color-line-2-opacity: rgba(68, 74, 87, 0.67);
-	--color-line-3-opacity: rgba(104, 110, 126, 0.67);
-
-	/* Scroll */
-	--scroll-thumb-color: var(--color-gray-750);
-	--scroll-thumb-color-hover: var(--color-gray-700);
-	--scroll-thumb-color-active: var(--color-gray-650);
-
-	/* Page */
-	--body-background-color: var(--content-background-color);
-	--content-background-color: var(--color-bg-3);
-
-	/* Theme */
-	--color-theme-0: var(--color-bg-3);
-	--color-theme-25: rgba(40, 43, 48, 1);
-	--color-theme-50: rgba(41, 45, 51, 1);
-	--color-theme-75: rgba(44, 49, 56, 1);
-	--color-theme-100: rgba(48, 52, 59, 1);
-	--color-theme-125: rgba(52, 56, 64, 1);
-	--color-theme-150: rgba(54, 59, 69, 1);
-	--color-theme-200: rgba(58, 63, 74, 1);
-	--color-theme-250: rgba(61, 66, 77, 1);
-	--color-theme-300: rgba(64, 70, 82, 1);
-	--color-theme-350: rgba(68, 74, 87, 1);
-	--color-theme-400: rgba(75, 81, 94, 1);
-	--color-theme-450: rgba(82, 87, 99, 1);
-	--color-theme-500: rgba(90, 95, 107, 1);
-	--color-theme-525: rgba(98, 103, 115, 1);
-	--color-theme-550: rgba(108, 112, 122, 1);
-	--color-theme-600: rgba(116, 120, 130, 1);
-	--color-theme-650: rgba(128, 131, 140, 1);
-	--color-theme-700: rgba(142, 145, 153, 1);
-	--color-theme-750: rgba(157, 160, 166, 1);
-	--color-theme-800: rgba(174, 177, 184, 1);
-	--color-theme-850: rgba(193, 196, 201, 1);
-	--color-theme-875: rgba(211, 214, 219, 1);
-	--color-theme-900: rgba(235, 237, 240, 1);
-	--color-theme-925: rgba(240, 242, 245, 1);
-	--color-theme-950: rgba(245, 246, 247, 1);
-	--color-theme-975: rgba(250, 251, 252, 1);
-	--color-theme-1000: rgba(255, 255, 255, 1);
-
-	/* top-shadow */
-	--top-shadow-s:
-		0px 0px 3px rgba(0, 0, 0, 0.11),
-		0px 5px 25px rgba(0, 0, 0, 0.17);
-	--top-shadow:
-		0px 0px 4px rgba(0, 0, 0, 0.14),
-		0px 4px 32px rgba(0, 0, 0, 0.2);
-	--top-shadow-b:
-		0px 0px 4px rgba(0, 0, 0, 0.15),
-		0px 18px 32px rgba(0, 0, 0, 0.34);
-
-	--top-shadow-darken: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.03);
-	--top-shadow-darken-2: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.07);
-	--top-shadow-darken-3: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.14);
-}
-
-/* forms */
-:root {
-	/* for text */
-	--top-forms-color: var(--color-text-1);
-	--top-forms-color-disabled: var(--color-text-3);
-	/* for border */
-	--top-forms-border-color: var(--color-line-3-opacity);
-	--top-forms-border-color-hover: var(--color-primary);
-	--top-forms-border-color-disabled: var(--color-line-1-opacity);
-	/* for placeholder */
-	--top-forms-placeholder-color: var(--color-text-3);
-	--top-forms-placeholder-color-disabled: var(--color-text-4);
-	/* for background */
-	--top-forms-background-color: var(--color-bg-3);
-	--top-forms-background-color-hover: var(--color-bg-3);
+:root {
+	/* Main */
+	--color-primary: var(--color-blue-450);
+	--color-primary-light: var(--color-blue-800);
+	--color-primary-light-opacity: rgba(1, 40, 100, 0.75);
+	--color-primary-2: var(--color-blue-500);
+	--color-primary-2-light: var(--color-blue-750);
+	--color-primary-2-light-opacity: rgba(0, 59, 146, 0.64);
+
+	--color-secondary-opacity: rgba(193, 203, 215, 0.16);
+	--color-secondary-2-opacity: rgba(193, 203, 215, 0.32);
+	--color-secondary-3-opacity: rgba(193, 203, 215, 0.38);
+
+	--color-positive: var(--color-green-450);
+	--color-positive-opacity: rgba(0, 102, 44, 0.75);
+	--color-positive-light: var(--color-green-800);
+	--color-positive-light-opacity: rgba(0, 89, 38, 0.47);
+	--color-positive-2: var(--color-green-500);
+	--color-positive-2-light: var(--color-green-750);
+	--color-positive-2-light-opacity: rgba(0, 102, 44, 0.75);
+
+	--color-warning: var(--color-orange-450);
+	--color-warning-opacity: rgba(255, 170, 51, 0.3);
+	--color-warning-light: var(--color-orange-800);
+	--color-warning-light-opacity: rgba(109, 64, 1, 0.61);
+	--color-warning-2: var(--color-orange-500);
+	--color-warning-2-light: var(--color-orange-750);
+	--color-warning-2-light-opacity: rgba(161, 97, 0, 0.58);
+
+	--color-negative: var(--color-red-450);
+	--color-negative-opacity: rgba(234, 65, 50, 0.3);
+	--color-negative-light: var(--color-red-800);
+	--color-negative-light-opacity: rgba(117, 10, 0, 0.50);
+	--color-negative-2: var(--color-red-500);
+	--color-negative-2-light: var(--color-red-750);
+	--color-negative-2-light-opacity: rgba(136, 23, 0, 0.66);
+
+	/* Text */
+	--color-text-1: var(--color-theme-975);
+	--color-text-2: var(--color-theme-750);
+	--color-text-3: var(--color-theme-550);
+	--color-text-4: var(--color-theme-450);
+	--color-text: var(--color-text-1);
+
+	--color-text-secondary: var(--color-gray-750);
+	--color-text-secondary-2: var(--color-gray-650);
+
+	--color-text-link: var(--color-blue-500);
+	--color-text-link-hover: var(--color-blue-450);
+
+	--color-overlay: rgba(0, 0, 0, 0.3);
+
+	--color-placeholder: var(--color-gray-350);
+	--color-placeholder-active: var(--color-gray-450);
+
+	/* Background colors */
+	--color-bg-1: rgba(21, 23, 25, 1);
+	--color-bg-2: rgba(26, 28, 31, 1);
+	--color-bg-3: rgba(38, 41, 46, 1);
+
+	/* Line colors */
+	--color-line-1-opacity: rgba(193, 203, 215, 0.1);
+	--color-line-2-opacity: rgba(68, 74, 87, 0.67);
+	--color-line-3-opacity: rgba(104, 110, 126, 0.67);
+
+	/* Scroll */
+	--scroll-thumb-color: var(--color-gray-750);
+	--scroll-thumb-color-hover: var(--color-gray-700);
+	--scroll-thumb-color-active: var(--color-gray-650);
+
+	/* Page */
+	--body-background-color: var(--content-background-color);
+	--content-background-color: var(--color-bg-3);
+
+	/* Theme */
+	--color-theme-0: var(--color-bg-3);
+	--color-theme-25: rgba(40, 43, 48, 1);
+	--color-theme-50: rgba(41, 45, 51, 1);
+	--color-theme-75: rgba(44, 49, 56, 1);
+	--color-theme-100: rgba(48, 52, 59, 1);
+	--color-theme-125: rgba(52, 56, 64, 1);
+	--color-theme-150: rgba(54, 59, 69, 1);
+	--color-theme-200: rgba(58, 63, 74, 1);
+	--color-theme-250: rgba(61, 66, 77, 1);
+	--color-theme-300: rgba(64, 70, 82, 1);
+	--color-theme-350: rgba(68, 74, 87, 1);
+	--color-theme-400: rgba(75, 81, 94, 1);
+	--color-theme-450: rgba(82, 87, 99, 1);
+	--color-theme-500: rgba(90, 95, 107, 1);
+	--color-theme-525: rgba(98, 103, 115, 1);
+	--color-theme-550: rgba(108, 112, 122, 1);
+	--color-theme-600: rgba(116, 120, 130, 1);
+	--color-theme-650: rgba(128, 131, 140, 1);
+	--color-theme-700: rgba(142, 145, 153, 1);
+	--color-theme-750: rgba(157, 160, 166, 1);
+	--color-theme-800: rgba(174, 177, 184, 1);
+	--color-theme-850: rgba(193, 196, 201, 1);
+	--color-theme-875: rgba(211, 214, 219, 1);
+	--color-theme-900: rgba(235, 237, 240, 1);
+	--color-theme-925: rgba(240, 242, 245, 1);
+	--color-theme-950: rgba(245, 246, 247, 1);
+	--color-theme-975: rgba(250, 251, 252, 1);
+	--color-theme-1000: rgba(255, 255, 255, 1);
+
+	/* top-shadow */
+	--top-shadow-s:
+		0px 0px 3px rgba(0, 0, 0, 0.11),
+		0px 5px 25px rgba(0, 0, 0, 0.17);
+	--top-shadow:
+		0px 0px 4px rgba(0, 0, 0, 0.14),
+		0px 4px 32px rgba(0, 0, 0, 0.2);
+	--top-shadow-b:
+		0px 0px 4px rgba(0, 0, 0, 0.15),
+		0px 18px 32px rgba(0, 0, 0, 0.34);
+
+	--top-shadow-darken: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.03);
+	--top-shadow-darken-2: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.07);
+	--top-shadow-darken-3: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.14);
+}
+
+/* forms */
+:root {
+	/* for text */
+	--top-forms-color: var(--color-text-1);
+	--top-forms-color-disabled: var(--color-text-3);
+	/* for border */
+	--top-forms-border-color: var(--color-line-2-opacity);
+	--top-forms-border-color-hover: var(--color-primary);
+	--top-forms-border-color-disabled: var(--color-line-1-opacity);
+	/* for placeholder */
+	--top-forms-placeholder-color: var(--color-text-3);
+	--top-forms-placeholder-color-disabled: var(--color-text-4);
+	/* for background */
+	--top-forms-background-color: var(--color-bg-3);
+	--top-forms-background-color-hover: var(--color-bg-3);
 }

package/editArea/editArea.amd.js

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

package/editArea/editArea.amd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editArea.amd.js","sources":["../../src/components/editArea/editArea/editArea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, toRef, watch, computed } from 'vue';\nimport { COLOR as BUTTON_COLOR } from '@/components/forms/button/button';\nimport Button from '@/components/forms/button/button.vue';\nimport type { Props, Emits } from './editArea';\nimport Textarea from '@/components/forms/textarea/textarea.vue';\n\n// TODO: добавить переменную top-forms-fixed-height и использовать ее при добавлении отступов у страницы\n\nconst props = withDefaults(defineProps<Props>(), {\n\tcancelText: 'Отмена',\n\tsubmitText: 'Отправить',\n\texpandable: true,\n});\n\nconst emit = defineEmits<Emits>();\n\nconst state = ref('');\n\n/**\n * Локальное значение modelValue, будет проброшено вверх только в случае отправки формы\n */\nconst localValue = ref(props.modelValue);\n\nwatch(toRef(props, 'modelValue'), () => {\n\tlocalValue.value = props.modelValue;\n});\n\nconst isChanged = computed(() => localValue.value !== props.modelValue);\n\nconst submit = (value: string) => {\n\temit('update:modelValue', value);\n};\n\nconst cancel = () => {\n\temit('cancel');\n\n\t// сброс введенного значения\n\tlocalValue.value = props.modelValue;\n};\n</script>\n\n<template>\n\t<div\n\t\t:class=\"{\n\t\t\t'top-editArea': true,\n\t\t\t'top-editArea-attachedToKeyboard': attachToKeyboard,\n\t\t}\"\n\t>\n\t\t<div\n\t\t\tv-if=\"title\"\n\t\t\tclass=\"top-editArea_title\"\n\t\t>\n\t\t\t{{ title }}\n\t\t</div>\n\n\t\t<div\n\t\t\t:class=\"{\n\t\t\t\t'top-editArea_form': true,\n\t\t\t\t'top-error': isError,\n\t\t\t\t'top-focus': state == 'focus',\n\t\t\t}\"\n\t\t>\n\t\t\t<Textarea\n\t\t\t\tv-model=\"localValue\"\n\t\t\t\t:name=\"name\"\n\t\t\t\t:placeholder=\"placeholder\"\n\t\t\t\t:rows=\"rows\"\n\t\t\t\t:minHeight=\"minHeight\"\n\t\t\t\t:expandable=\"expandable\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:readonly=\"readonly\"\n\t\t\t\t:isError=\"isError\"\n\t\t\t\t:hint=\"hint\"\n\t\t\t\tclass=\"top-editArea_element\"\n\t\t\t\t@focus=\"state = 'focus'\"\n\t\t\t\t@blur=\"state = ''\"\n\t\t\t\t@keyup.esc=\"cancel\"\n\t\t\t\t@keyup.ctrl.enter=\"submit(localValue)\"\n\t\t\t/>\n\n\t\t\t<div class=\"top-editArea_footer\">\n\t\t\t\t<Button\n\t\t\t\t\tv-if=\"isChanged && (!attachToKeyboard || modelValue)\"\n\t\t\t\t\tclass=\"top-editArea_button\"\n\t\t\t\t\t:color=\"BUTTON_COLOR.Theme\"\n\t\t\t\t\t:icon=\"attachToKeyboard ? '': ''\"\n\t\t\t\t\t@click=\"cancel\"\n\t\t\t\t>\n\t\t\t\t\t{{ attachToKeyboard ? '' : cancelText }}\n\t\t\t\t</Button>\n\n\t\t\t\t<Button\n\t\t\t\t\tclass=\"top-editArea_button\"\n\t\t\t\t\t:icon=\"attachToKeyboard ? '': ''\"\n\t\t\t\t\t@click=\"submit(localValue)\"\n\t\t\t\t>\n\t\t\t\t\t{{ attachToKeyboard ? '' : submitText }}\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</template>\n\n<style module>\n.top-editArea {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 6px;\n}\n\n.top-editArea_title {\n\tfont-size: 12px;\n}\n\n.top-editArea_form {\n\tbackground: var(--top-forms-background-color);\n\toutline-color: var(--color-theme-75);\n\toutline-offset: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n.top-editArea_form:hover {\n\tbackground: var(--top-forms-background-color-hover);\n}\n\n/* textarea в EditArea */\n.top-editArea_element.top-textarea {\n\twidth: 100%;\n}\n\n.top-editArea_element.top-textarea_textarea {\n\tborder: none;\n\toutline: none;\n\tanimation: none;\n}\n\n/* footer */\n.top-editArea_footer {\n\tpadding: var(--top-forms-padding);\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\tgap: var(--top-forms-padding);\n}\n\n/* attachedToKeyboard */\n.top-editArea-attachedToKeyboard {\n\tbackground: var(--top-forms-background-color);\n\tmargin-bottom: env(keyboard-inset-height, 0);\n\tposition: fixed;\n\tbottom: 0;\n\tright: 0;\n\tleft: 0;\n\tz-index: 2;\n\tgap: 0;\n}\n\n.top-editArea-attachedToKeyboard .top-editArea_form {\n\tborder-radius: 0;\n\tborder: none;\n\tborder-top: 1px solid var(--top-forms-border-color);\n}\n\n.top-editArea-attachedToKeyboard .top-editArea_title {\n\tborder-top: 1px solid var(--color-line-2-opacity);\n\tpadding: var(--top-forms-padding);\n}\n\n.top-editArea-attachedToKeyboard .top-editArea_footer > [data-top-icon] {\n\tborder-radius: 100%;\n}\n</style>"],"names":["ref","watch","toRef","computed"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBM,YAAA,QAAQA,QAAI,EAAE;AAKd,YAAA,aAAaA,IAAAA,IAAI,MAAM,UAAU;AAEvCC,UAAAA,MAAMC,IAAM,MAAA,OAAO,YAAY,GAAG,MAAM;AACvC,mBAAW,QAAQ,MAAM;AAAA,MAAA,CACzB;AAED,YAAM,YAAYC,IAAAA,SAAS,MAAM,WAAW,UAAU,MAAM,UAAU;AAEhE,YAAA,SAAS,CAAC,UAAkB;AACjC,aAAK,qBAAqB,KAAK;AAAA,MAAA;AAGhC,YAAM,SAAS,MAAM;AACpB,aAAK,QAAQ;AAGb,mBAAW,QAAQ,MAAM;AAAA,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/editArea/editArea.js

@@ -0,0 +1,123 @@
+import { defineComponent, ref, watch, toRef, computed, openBlock, createElementBlock, normalizeClass, toDisplayString, createCommentVNode, createElementVNode, createVNode, withKeys, withModifiers, createBlock, unref, withCtx, createTextVNode } from "vue";
+import { T as Textarea, B as Button, C as COLOR, _ as _export_sfc } from "../.chunks/forms-245e3bc0.es.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "top-editArea_title"
+};
+const _hoisted_2 = { class: "top-editArea_footer" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "editArea",
+  props: {
+    modelValue: {},
+    title: {},
+    cancelText: { default: "Отмена" },
+    submitText: { default: "Отправить" },
+    attachToKeyboard: { type: Boolean },
+    name: {},
+    placeholder: {},
+    rows: {},
+    minHeight: {},
+    expandable: { type: Boolean, default: true },
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    isError: { type: Boolean },
+    hint: {}
+  },
+  emits: ["update:modelValue", "cancel"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const state = ref("");
+    const localValue = ref(props.modelValue);
+    watch(toRef(props, "modelValue"), () => {
+      localValue.value = props.modelValue;
+    });
+    const isChanged = computed(() => localValue.value !== props.modelValue);
+    const submit = (value) => {
+      emit("update:modelValue", value);
+    };
+    const cancel = () => {
+      emit("cancel");
+      localValue.value = props.modelValue;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass({
+          "top-editArea": true,
+          "top-editArea-attachedToKeyboard": _ctx.attachToKeyboard
+        })
+      }, [
+        _ctx.title ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass({
+            "top-editArea_form": true,
+            "top-error": _ctx.isError,
+            "top-focus": state.value == "focus"
+          })
+        }, [
+          createVNode(Textarea, {
+            modelValue: localValue.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => localValue.value = $event),
+            name: _ctx.name,
+            placeholder: _ctx.placeholder,
+            rows: _ctx.rows,
+            minHeight: _ctx.minHeight,
+            expandable: _ctx.expandable,
+            disabled: _ctx.disabled,
+            readonly: _ctx.readonly,
+            isError: _ctx.isError,
+            hint: _ctx.hint,
+            class: "top-editArea_element",
+            onFocus: _cache[1] || (_cache[1] = ($event) => state.value = "focus"),
+            onBlur: _cache[2] || (_cache[2] = ($event) => state.value = ""),
+            onKeyup: [
+              withKeys(cancel, ["esc"]),
+              _cache[3] || (_cache[3] = withKeys(withModifiers(($event) => submit(localValue.value), ["ctrl"]), ["enter"]))
+            ]
+          }, null, 8, ["modelValue", "name", "placeholder", "rows", "minHeight", "expandable", "disabled", "readonly", "isError", "hint", "onKeyup"]),
+          createElementVNode("div", _hoisted_2, [
+            isChanged.value && (!_ctx.attachToKeyboard || _ctx.modelValue) ? (openBlock(), createBlock(Button, {
+              key: 0,
+              class: "top-editArea_button",
+              color: unref(COLOR).Theme,
+              icon: _ctx.attachToKeyboard ? "" : "",
+              onClick: cancel
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(_ctx.attachToKeyboard ? "" : _ctx.cancelText), 1)
+              ]),
+              _: 1
+            }, 8, ["color", "icon"])) : createCommentVNode("", true),
+            createVNode(Button, {
+              class: "top-editArea_button",
+              icon: _ctx.attachToKeyboard ? "" : "",
+              onClick: _cache[4] || (_cache[4] = ($event) => submit(localValue.value))
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(_ctx.attachToKeyboard ? "" : _ctx.submitText), 1)
+              ]),
+              _: 1
+            }, 8, ["icon"])
+          ])
+        ], 2)
+      ], 2);
+    };
+  }
+});
+const style0 = {
+  "top-editArea": "top-editArea",
+  "top-editArea_title": "top-editArea_title",
+  "top-editArea_form": "top-editArea_form",
+  "top-editArea_element": "top-editArea_element",
+  "top-textarea": "top-textarea",
+  "top-textarea_textarea": "top-textarea_textarea",
+  "top-editArea_footer": "top-editArea_footer",
+  "top-editArea-attachedToKeyboard": "top-editArea-attachedToKeyboard"
+};
+const cssModules = {
+  "$style": style0
+};
+const editArea = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  editArea as EditArea
+};
+//# sourceMappingURL=editArea.js.map

package/editArea/editArea.js.map

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

package/editArea.css

@@ -0,0 +1,61 @@
+
+.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);
+}
+
+/* textarea в EditArea */
+.top-editArea_element.top-textarea {
+	width: 100%;
+}
+.top-editArea_element.top-textarea_textarea {
+	border: none;
+	outline: none;
+	animation: none;
+}
+
+/* footer */
+.top-editArea_footer {
+	padding: var(--top-forms-padding);
+	display: flex;
+	justify-content: flex-end;
+	gap: var(--top-forms-padding);
+}
+
+/* attachedToKeyboard */
+.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%;
+}

package/forms/forms.amd.js

@@ -1,11 +1,13 @@
-define(["exports", "../.chunks/forms-2abb7eaa.amd", "vue"], function(exports, forms, vue) {
-  "use strict"; vue = vue ?? Vue;
-  exports.Button = forms.button;
+define(["exports", "../.chunks/forms-f7b7b259.amd", "vue"], function(exports, forms, vue) {
+  "use strict"; if(typeof vue === "undefined") var vue = window.Vue;
+  exports.Button = forms.Button;
   exports.Checkbox = forms.checkbox;
   exports.ControlLabel = forms.ControlLabel;
+  exports.Hint = forms.Hint;
   exports.Input = forms.input;
   exports.Radio = forms.radio;
   exports.Switcher = forms.switcher;
+  exports.Textarea = forms.Textarea;
   Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 });
 //# sourceMappingURL=forms.amd.js.map

package/forms/forms.amd.js.map

@@ -1 +1 @@
-{"version":3,"file":"forms.amd.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"forms.amd.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/forms/forms.js

@@ -1,11 +1,13 @@
-import { b, c, C, i, r, s } from "../.chunks/forms-5e17154c.es.js";
+import { B, c, a, H, i, r, s, T } from "../.chunks/forms-245e3bc0.es.js";
 import "vue";
 export {
-  b as Button,
+  B as Button,
   c as Checkbox,
-  C as ControlLabel,
+  a as ControlLabel,
+  H as Hint,
   i as Input,
   r as Radio,
-  s as Switcher
+  s as Switcher,
+  T as Textarea
 };
 //# sourceMappingURL=forms.js.map

package/{helpers → forms}/helpers.amd.js

@@ -1,5 +1,5 @@
-define(["exports", "../.chunks/forms-2abb7eaa.amd", "vue"], function(exports, forms, vue) {
-  "use strict"; vue = vue ?? Vue;
+define(["exports", "../.chunks/forms-f7b7b259.amd", "vue"], function(exports, forms, vue) {
+  "use strict"; if(typeof vue === "undefined") var vue = window.Vue;
   exports.SIZE = forms.SIZE;
   Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 });