Add TextareaAutosize into the project

src/popup/components/AliasMoreOptions.vue

@@ -1,3 +1,10 @@
+<!--
+Original implementation:
+https://github.com/devstark-com/vue-textarea-autosize/blob/8e767ea21863b3e8607b1808b89e7b5a0e3aa98c/src/components/TextareaAutosize.vue
+
+MIT License
+-->
+
 <template>
   <expand-transition>
     <div class="more-options" v-if="show">
@@ -26,13 +33,13 @@
       </div>
 
       <label>Alias Note</label>
-      <textarea-autosize
+      <TextareaAutosize
         placeholder="Note, can be anything to help you remember why you created this alias. This field is optional."
         class="form-control"
         style="width: 100%"
         v-model="moreOptions.note"
         :disabled="loading"
-      ></textarea-autosize>
+      ></TextareaAutosize>
 
       <label>
         From Name
@@ -83,10 +90,8 @@
 
 <script>
 import Utils from "../Utils";
-import SLStorage from "../SLStorage";
-import EventManager from "../EventManager";
-import Navigation from "../Navigation";
 import ExpandTransition from "./ExpandTransition";
+import TextareaAutosize from "./TextareaAutosize";
 import { callAPI, API_ROUTE, API_ON_ERR } from "../APIService";
 
 export default {
@@ -112,6 +117,7 @@ export default {
     },
   },
   components: {
+    TextareaAutosize,
     "expand-transition": ExpandTransition,
   },
   data() {

src/popup/components/TextareaAutosize.vue

@@ -0,0 +1,120 @@
+<template>
+  <textarea :style="computedStyles" v-model="val" @focus="resize"></textarea>
+</template>
+<script>
+export default {
+  name: "TextareaAutosize",
+  props: {
+    value: {
+      type: [String, Number],
+      default: "",
+    },
+    autosize: {
+      type: Boolean,
+      default: true,
+    },
+    minHeight: {
+      type: [Number],
+      default: null,
+    },
+    maxHeight: {
+      type: [Number],
+      default: null,
+    },
+    /*
+     * Force !important for style properties
+     */
+    important: {
+      type: [Boolean, Array],
+      default: false,
+    },
+  },
+  data() {
+    return {
+      // data property for v-model binding with real textarea tag
+      val: null,
+      // works when content height becomes more then value of the maxHeight property
+      maxHeightScroll: false,
+      height: "auto",
+    };
+  },
+  computed: {
+    computedStyles() {
+      if (!this.autosize) return {};
+      return {
+        resize: !this.isResizeImportant ? "none" : "none !important",
+        height: this.height,
+        overflow: this.maxHeightScroll
+          ? "auto"
+          : !this.isOverflowImportant
+          ? "hidden"
+          : "hidden !important",
+      };
+    },
+    isResizeImportant() {
+      const imp = this.important;
+      return imp === true || (Array.isArray(imp) && imp.includes("resize"));
+    },
+    isOverflowImportant() {
+      const imp = this.important;
+      return imp === true || (Array.isArray(imp) && imp.includes("overflow"));
+    },
+    isHeightImportant() {
+      const imp = this.important;
+      return imp === true || (Array.isArray(imp) && imp.includes("height"));
+    },
+  },
+  watch: {
+    value(val) {
+      this.val = val;
+    },
+    val(val) {
+      this.$nextTick(this.resize);
+      this.$emit("input", val);
+    },
+    minHeight() {
+      this.$nextTick(this.resize);
+    },
+    maxHeight() {
+      this.$nextTick(this.resize);
+    },
+    autosize(val) {
+      if (val) this.resize();
+    },
+  },
+  methods: {
+    resize() {
+      const important = this.isHeightImportant ? "important" : "";
+      this.height = `auto${important ? " !important" : ""}`;
+      this.$nextTick(() => {
+        let contentHeight = this.$el.scrollHeight + 1;
+
+        if (this.minHeight) {
+          contentHeight =
+            contentHeight < this.minHeight ? this.minHeight : contentHeight;
+        }
+
+        if (this.maxHeight) {
+          if (contentHeight > this.maxHeight) {
+            contentHeight = this.maxHeight;
+            this.maxHeightScroll = true;
+          } else {
+            this.maxHeightScroll = false;
+          }
+        }
+
+        const heightVal = contentHeight + "px";
+        this.height = `${heightVal}${important ? " !important" : ""}`;
+      });
+
+      return this;
+    },
+  },
+  created() {
+    this.val = this.value;
+  },
+  mounted() {
+    this.resize();
+  },
+};
+</script>