@topvisor/ui 0.0.14 → 0.0.16

package/dark.css

@@ -1,128 +1 @@
-: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 {
-	--top-forms-border-color: var(--color-line-1-opacity);
-	--top-forms-border-color-hover: var(--color-line-2-opacity);
-
-	--top-forms-background-color: var(--color-bg-3);
-	--top-forms-background-color-hover: var(--color-bg-3);
-}
+: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)}

package/editArea/editArea.amd.js

@@ -0,0 +1,3 @@
+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"})});
+//# 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":["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"}

package/editArea/editArea.js

@@ -0,0 +1,111 @@
+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 = {
+  key: 0,
+  class: "top-editArea_title"
+}, R = { 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);
+    C(w(a, "modelValue"), () => {
+      o.value = a.modelValue;
+    });
+    const K = E(() => 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", O, n(e.title), 1)) : y("", !0),
+      b("div", {
+        class: c({
+          "top-editArea_form": !0,
+          "top-error": e.isError,
+          "top-focus": r.value == "focus"
+        })
+      }, [
+        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));
+  }
+}), z = {
+  "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"
+}, D = {
+  $style: z
+}, S = /* @__PURE__ */ M(_, [["__cssModules", D]]);
+export {
+  S 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":["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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/editArea.css

@@ -0,0 +1 @@
+.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%}

package/forms/forms.amd.js

@@ -1,11 +1,2 @@
-define(["exports", "../.chunks/forms-512abfa7.amd", "vue"], function(exports, forms, vue) {
-  "use strict"; vue = vue ?? Vue;
-  exports.Button = forms.button;
-  exports.Checkbox = forms.checkbox;
-  exports.ControlLabel = forms.ControlLabel;
-  exports.Input = forms.input;
-  exports.Radio = forms.radio;
-  exports.Switcher = forms.switcher;
-  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-});
+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"})});
 //# 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-1b3f76e9.es.js";
+import { B as o, c as r, a as e, H as i, i as n, r as c, s as p, T as x } from "../.chunks/forms-6a6b0b80.es.js";
 import "vue";
 export {
-  b as Button,
-  c as Checkbox,
-  C as ControlLabel,
-  i as Input,
-  r as Radio,
-  s as Switcher
+  o as Button,
+  r as Checkbox,
+  e as ControlLabel,
+  i as Hint,
+  n as Input,
+  c as Radio,
+  p as Switcher,
+  x as Textarea
 };
 //# sourceMappingURL=forms.js.map

package/forms/helpers.amd.js

@@ -0,0 +1,2 @@
+define(["exports","../.chunks/forms-7119886a.amd","vue"],function(e,t,u){"use strict"; if(typeof vue === "undefined") var vue = window.Vue;e.SIZE=t.SIZE,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
+//# sourceMappingURL=helpers.amd.js.map

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

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

package/forms/helpers.js

@@ -0,0 +1,6 @@
+import { S as p } from "../.chunks/forms-6a6b0b80.es.js";
+import "vue";
+export {
+  p as SIZE
+};
+//# sourceMappingURL=helpers.js.map