renusify 2.5.1 → 3.0.0

package/components/form/textArea/index.vue

@@ -3,62 +3,99 @@
            v-model="lazyValue"
            @click.stop="handleClick()"
            @update:model-value="emit"
-           :class="[`${$r.prefix}text-area`,{'no-resize':noResize}]"
+           :class="[`${$r.prefix}text-area`]"
   >
     <template v-slot="{uid}">
       <textarea @focusin="active=true"
                 @focusout="active=false"
-                @input="$emit('update:modelValue', lazyValue)"
-                ref="input"
+                ref="inputRef"
+                :autofocus="autofocus"
+                :class="{'no-resize':noResize}"
                 :rows="rows"
                 autocomplete="no"
                 v-model="lazyValue"
+                :placeholder="placeholder"
+                @input="emitValue"
                 :id="uid"
       ></textarea>
     </template>
   </r-input>
 </template>
-<script>
+<script setup>
+import {ref, watch, nextTick, useAttrs} from 'vue'
 
-export default {
-  name: 'r-text-area',
-  props: {
-    noResize: Boolean,
-    modelValue: [String, Number],
-    rows: {
-      type: String,
-      default: '7'
-    }
-  },
-emits:['update:modelValue'],
-  data() {
-    return {
-      lazyValue: this.modelValue,
-      active: false
-    }
-  },
-  watch: {
-    modelValue() {
-      this.lazyValue = this.modelValue
-    }
-  },
-  methods: {
-    handleClick() {
-      this.$refs.input.focus()
-    },
-    emit() {
-      this.$emit('update:modelValue', this.lazyValue)
-    }
+const attr = useAttrs()
+const placeholder = attr.placeholder
+const autofocus = attr.autofocus
+
+const props = defineProps({
+  /**
+   * Disables textarea resizing
+   * @type {Boolean}
+   */
+  noResize: Boolean,
+  /**
+   * The model value of the textarea
+   * @type {String|Number}
+   */
+  modelValue: [String, Number],
+  /**
+   * Number of visible text rows
+   * @type {String|Number}
+   * @default '7'
+   */
+  rows: {
+    type: [String, Number],
+    default: '7'
+  }
+})
+
+const emit = defineEmits([
+  /**
+   * Emitted when the textarea value changes
+   * @param {String|Number} value - The updated value
+   */
+  'update:modelValue'
+])
+
+// Reactive data
+const lazyValue = ref(props.modelValue)
+const active = ref(false)
+const inputRef = ref(null)
+
+// Watchers
+watch(() => props.modelValue, (newValue) => {
+  lazyValue.value = newValue
+})
+
+// Methods
+/**
+ * Focuses the textarea input
+ */
+const handleClick = async () => {
+  await nextTick()
+  if (inputRef.value) {
+    inputRef.value.focus()
   }
 }
 
+/**
+ * Emits the updated value to the parent component
+ */
+const emitValue = () => {
+  emit('update:modelValue', lazyValue.value)
+}
 </script>
 <style lang="scss">
-@use "../../../style/variables/base";
+@use "../../../style" as *;
 
-.#{base.$prefix}text-area {
+.#{$prefix}text-area {
   .no-resize {
     resize: none;
   }
+
+  .input-control {
+    height: auto;
+  }
 }
 </style>