aloha-vue 1.0.240 → 1.0.241

package/docs/src/views/PageForm/PageForm.js

@@ -56,6 +56,13 @@ export default {
   computed: {
     data() {
       return [
+        {
+          type: "textarea",
+          label: "Aloha tiny",
+          id: "aloha_textarea",
+          classColumn: "a_column a_column_8",
+          required: true,
+        },
         {
           type: "tinymce",
           label: "Aloha tiny",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.240",
+  "version": "1.0.241",
   "author": "Ilia Brykin",
   "scripts": {
     "build-icons": "node scriptsNode/iconsSvgToJs.js bootstrap3 && node scriptsNode/iconsSvgToJs.js bootstrap-1-9-1"

package/src/styles/components/AFormElement/ATextarea.scss

@@ -4,3 +4,15 @@
   max-height: none;
   min-height: auto;
 }
+.a_textarea_resize_v {
+  resize: vertical;
+}
+.a_textarea_resize_h {
+  resize: horizontal;
+}
+.a_textarea_resize_none {
+  resize: none;
+}
+.a_form_element_textarea > .a_form_element__btn_close {
+  right: 1.2rem;
+}

package/src/styles/styles.scss

@@ -20,6 +20,7 @@
 @import "components/ALink";
 @import "components/AWizard";
 @import "components/AGroupButtonDropdown";
+@import "components/AFormElement/ATextarea";
 
 .a_dropdown__caret {
   margin: 0;

package/src/ui/ATextarea/ATextarea.js

@@ -18,6 +18,7 @@ import ASafeHtml from "../../directives/ASafeHtml";
 import UiClearButtonMixinProps from "../mixins/UiClearButtonMixinProps";
 import UiMixinProps from "../mixins/UiMixinProps";
 
+import ResizeClass from "./compositionAPI/ResizeClass";
 import UiAPI from "../compositionApi/UiAPI";
 import UiClearButtonAPI from "../compositionApi/UiClearButtonAPI";
 import UiStyleHideAPI from "../compositionApi/UiStyleHideAPI";
@@ -53,6 +54,12 @@ export default {
       required: false,
       default: "",
     },
+    resize: {
+      type: String,
+      required: false,
+      default: "v",
+      validator: value => ["v", "h", "none", "auto"].indexOf(value) !== -1,
+    },
   },
   setup(props, context) {
     const {
@@ -77,6 +84,10 @@ export default {
       isModel,
     });
 
+    const {
+      resizeClass,
+    } = ResizeClass(props);
+
     const isAutosizeStarted = ref(undefined);
 
     const rows = toRef(props, "rows");
@@ -138,23 +149,21 @@ export default {
     });
 
     return {
-      componentStyleHide,
-
       ariaDescribedbyLocal,
       changeModel,
+      clearModel,
+      componentStyleHide,
       errorsId,
       helpTextId,
       htmlIdLocal,
+      isAutosizeStarted,
+      isClearButtonLocal,
       isErrors,
       isModel,
       onBlur,
       onFocus,
-
-      isClearButtonLocal,
-
-      clearModel,
-      isAutosizeStarted,
       onInput,
+      resizeClass,
       rowsLocal,
       textareaRef,
     };
@@ -177,7 +186,7 @@ export default {
           isLabelFloat: this.isLabelFloat,
         }),
         h("div", {
-          class: "a_form_element",
+          class: "a_form_element a_form_element_textarea",
         }, [
           h("textarea", {
             ref: "textareaRef",
@@ -192,6 +201,7 @@ export default {
                 a_form_element_with_btn_close: this.isClearButton,
                 a_form_control_invalid: this.isErrors,
               },
+              this.resizeClass,
             ],
             disabled: this.disabled,
             ariaRequired: this.required,

package/src/ui/ATextarea/compositionAPI/ResizeClass.js

@@ -0,0 +1,23 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function ResizeClass(props) {
+  const resize = toRef(props, "resize");
+
+  const RESIZE_CLASS_MAPPING = {
+    v: "a_textarea_resize_v",
+    h: "a_textarea_resize_h",
+    none: "a_textarea_resize_none",
+    auto: "",
+  };
+
+  const resizeClass = computed(() => {
+    return RESIZE_CLASS_MAPPING[resize.value];
+  });
+
+  return {
+    resizeClass,
+  };
+}