@topvisor/ui 0.0.16 → 0.0.17

package/dark.css

@@ -1 +1,136 @@
-:root{--color-primary: var(--color-blue-450);--color-primary-light: var(--color-blue-800);--color-primary-light-opacity: rgba(1, 40, 100, .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, .64);--color-secondary-opacity: rgba(193, 203, 215, .16);--color-secondary-2-opacity: rgba(193, 203, 215, .32);--color-secondary-3-opacity: rgba(193, 203, 215, .38);--color-positive: var(--color-green-450);--color-positive-opacity: rgba(0, 102, 44, .75);--color-positive-light: var(--color-green-800);--color-positive-light-opacity: rgba(0, 89, 38, .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, .75);--color-warning: var(--color-orange-450);--color-warning-opacity: rgba(255, 170, 51, .3);--color-warning-light: var(--color-orange-800);--color-warning-light-opacity: rgba(109, 64, 1, .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, .58);--color-negative: var(--color-red-450);--color-negative-opacity: rgba(234, 65, 50, .3);--color-negative-light: var(--color-red-800);--color-negative-light-opacity: rgba(117, 10, 0, .5);--color-negative-2: var(--color-red-500);--color-negative-2-light: var(--color-red-750);--color-negative-2-light-opacity: rgba(136, 23, 0, .66);--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, .3);--color-placeholder: var(--color-gray-350);--color-placeholder-active: var(--color-gray-450);--color-bg-1: rgba(21, 23, 25, 1);--color-bg-2: rgba(26, 28, 31, 1);--color-bg-3: rgba(38, 41, 46, 1);--color-line-1-opacity: rgba(193, 203, 215, .1);--color-line-2-opacity: rgba(68, 74, 87, .67);--color-line-3-opacity: rgba(104, 110, 126, .67);--scroll-thumb-color: var(--color-gray-750);--scroll-thumb-color-hover: var(--color-gray-700);--scroll-thumb-color-active: var(--color-gray-650);--body-background-color: var(--content-background-color);--content-background-color: var(--color-bg-3);--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-s: 0px 0px 3px rgba(0, 0, 0, .11), 0px 5px 25px rgba(0, 0, 0, .17);--top-shadow: 0px 0px 4px rgba(0, 0, 0, .14), 0px 4px 32px rgba(0, 0, 0, .2);--top-shadow-b: 0px 0px 4px rgba(0, 0, 0, .15), 0px 18px 32px rgba(0, 0, 0, .34);--top-shadow-darken: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, .03);--top-shadow-darken-2: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, .07);--top-shadow-darken-3: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, .14)}:root{--top-forms-color: var(--color-text-1);--top-forms-color-disabled: var(--color-text-3);--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);--top-forms-placeholder-color: var(--color-text-3);--top-forms-placeholder-color-disabled: var(--color-text-4);--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

@@ -1,3 +1,126 @@
-define(["exports","vue","../.chunks/forms-7119886a.amd"],function(i,e,r){"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-editArea_element.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 d=A,n=e.ref(""),a=e.ref(d.modelValue);e.watch(e.toRef(d,"modelValue"),()=>{a.value=d.modelValue});const g=e.computed(()=>a.value!==d.modelValue),c=t=>{s("update:modelValue",t)},m=()=>{s("cancel"),a.value=d.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(r.Textarea,{modelValue:a.value,"onUpdate:modelValue":o[0]||(o[0]=l=>a.value=l),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]=l=>n.value="focus"),onBlur:o[2]||(o[2]=l=>n.value=""),onKeyup:[e.withKeys(m,["esc"]),o[3]||(o[3]=e.withKeys(e.withModifiers(l=>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(r.Button,{key:0,class:"top-editArea_button",color:e.unref(r.COLOR).Theme,icon:t.attachToKeyboard?"":"",onClick:m},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.attachToKeyboard?"":t.cancelText),1)]),_:1},8,["color","icon"])):e.createCommentVNode("",!0),e.createVNode(r.Button,{class:"top-editArea_button",icon:t.attachToKeyboard?"":"",onClick:o[4]||(o[4]=l=>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-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"}},h=r._export_sfc(b,[["__cssModules",y]]);i.EditArea=h,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
+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

@@ -1 +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":["state","ref","localValue","props","watch","toRef","isChanged","computed","submit","value","emit","cancel"],"mappings":";gfAiBMA,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"}
+{"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

@@ -1,9 +1,11 @@
-import { defineComponent as B, ref as u, watch as C, toRef as w, computed as E, openBlock as d, createElementBlock as m, normalizeClass as c, toDisplayString as n, createCommentVNode as y, createElementVNode as b, createVNode as f, withKeys as A, withModifiers as k, createBlock as g, unref as $, withCtx as h, createTextVNode as v } from "vue";
-import { T as H, B as T, C as N, _ as M } from "../.chunks/forms-6a6b0b80.es.js";
-const O = {
+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"
-}, R = { class: "top-editArea_footer" }, _ = /* @__PURE__ */ B({
+};
+const _hoisted_2 = { class: "top-editArea_footer" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "editArea",
   props: {
     modelValue: {},
@@ -15,85 +17,93 @@ const O = {
     placeholder: {},
     rows: {},
     minHeight: {},
-    expandable: { type: Boolean, default: !0 },
+    expandable: { type: Boolean, default: true },
     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);
-    C(w(a, "modelValue"), () => {
-      o.value = a.modelValue;
+  setup(__props, { emit }) {
+    const props = __props;
+    const state = ref("");
+    const localValue = ref(props.modelValue);
+    watch(toRef(props, "modelValue"), () => {
+      localValue.value = props.modelValue;
     });
-    const K = E(() => o.value !== a.modelValue), s = (e) => {
-      i("update:modelValue", e);
-    }, p = () => {
-      i("cancel"), o.value = a.modelValue;
+    const isChanged = computed(() => localValue.value !== props.modelValue);
+    const submit = (value) => {
+      emit("update:modelValue", value);
+    };
+    const cancel = () => {
+      emit("cancel");
+      localValue.value = props.modelValue;
     };
-    return (e, t) => (d(), m("div", {
-      class: c({
-        "top-editArea": !0,
-        "top-editArea-attachedToKeyboard": e.attachToKeyboard
-      })
-    }, [
-      e.title ? (d(), m("div", O, n(e.title), 1)) : y("", !0),
-      b("div", {
-        class: c({
-          "top-editArea_form": !0,
-          "top-error": e.isError,
-          "top-focus": r.value == "focus"
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass({
+          "top-editArea": true,
+          "top-editArea-attachedToKeyboard": _ctx.attachToKeyboard
         })
       }, [
-        f(H, {
-          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: [
-            A(p, ["esc"]),
-            t[3] || (t[3] = A(k((l) => s(o.value), ["ctrl"]), ["enter"]))
-          ]
-        }, null, 8, ["modelValue", "name", "placeholder", "rows", "minHeight", "expandable", "disabled", "readonly", "isError", "hint", "onKeyup"]),
-        b("div", R, [
-          K.value && (!e.attachToKeyboard || e.modelValue) ? (d(), g(T, {
-            key: 0,
-            class: "top-editArea_button",
-            color: $(N).Theme,
-            icon: e.attachToKeyboard ? "" : "",
-            onClick: p
-          }, {
-            default: h(() => [
-              v(n(e.attachToKeyboard ? "" : e.cancelText), 1)
-            ]),
-            _: 1
-          }, 8, ["color", "icon"])) : y("", !0),
-          f(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));
+        _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);
+    };
   }
-}), z = {
+});
+const style0 = {
   "top-editArea": "top-editArea",
   "top-editArea_title": "top-editArea_title",
   "top-editArea_form": "top-editArea_form",
@@ -102,10 +112,12 @@ const O = {
   "top-textarea_textarea": "top-textarea_textarea",
   "top-editArea_footer": "top-editArea_footer",
   "top-editArea-attachedToKeyboard": "top-editArea-attachedToKeyboard"
-}, D = {
-  $style: z
-}, S = /* @__PURE__ */ M(_, [["__cssModules", D]]);
+};
+const cssModules = {
+  "$style": style0
+};
+const editArea = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
 export {
-  S as EditArea
+  editArea as EditArea
 };
 //# sourceMappingURL=editArea.js.map

package/editArea/editArea.js.map

@@ -1 +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":["state","ref","localValue","props","watch","toRef","isChanged","computed","submit","value","emit","cancel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;iBAiBMA,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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

@@ -1 +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)}.top-editArea_element.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%}
+
+.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,2 +1,13 @@
-define(["exports","../.chunks/forms-7119886a.amd","vue"],function(e,n,t){"use strict"; if(typeof vue === "undefined") var vue = window.Vue;e.Button=n.Button,e.Checkbox=n.checkbox,e.ControlLabel=n.ControlLabel,e.Hint=n.Hint,e.Input=n.input,e.Radio=n.radio,e.Switcher=n.switcher,e.Textarea=n.Textarea,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
+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":";;;;;;;;;;;;"}