vueless 0.0.291 → 0.0.292

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.291",
+  "version": "0.0.292",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.form-textarea/configs/default.config.js

@@ -38,6 +38,9 @@ export default /*tw*/ {
         md: "text-sm placeholder:text-sm",
         lg: "text-base placeholder:text-base",
       },
+      resizable: {
+        false: "resize-none",
+      },
     },
   },
   defaults: {
@@ -46,6 +49,7 @@ export default /*tw*/ {
     type: "text",
     inputmode: "text",
     labelAlign: "topInside",
+    resizable: false,
     disabled: false,
     readonly: false,
     noAutocomplete: false,

package/ui.form-textarea/index.vue

@@ -29,7 +29,7 @@
         :placeholder="placeholder"
         :readonly="readonly"
         :disabled="disabled"
-        :rows="rows"
+        :rows="currentRows"
         :inputmode="inputmode"
         :data-test="dataTest"
         v-bind="textareaAttrs"
@@ -39,6 +39,8 @@
         @mouseleave="onMouseleave"
         @mousedown="onMousedown"
         @click="onClick"
+        @keydown.enter="onEnter"
+        @keydown.backspace="onBackspace"
       />
     </label>
     <label v-if="hasSlotContent($slots['right'])" :for="id" v-bind="rightSlotAttrs">
@@ -49,7 +51,7 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref, useSlots } from "vue";
+import { computed, onMounted, ref, watch, useSlots } from "vue";
 
 import ULabel from "../ui.form-label";
 import { getRandomId, getDefault } from "../service.ui";
@@ -112,6 +114,14 @@ const props = defineProps({
     default: "",
   },
 
+  /**
+   * Allow resizing of the textarea.
+   */
+  resizable: {
+    type: Boolean,
+    default: getDefault(defaultConfig, UTextarea).resizable,
+  },
+
   /**
    * Make textarea read only.
    */
@@ -157,7 +167,7 @@ const props = defineProps({
    * Set number of visible rows.
    */
   rows: {
-    type: String,
+    type: [String, Number],
     default: getDefault(defaultConfig, UTextarea).rows,
   },
 
@@ -236,6 +246,33 @@ const labelComponentRef = ref(null);
 const leftSlotWrapperRef = ref(null);
 const textareaWrapperRef = ref(null);
 
+const currentRows = ref(props.rows);
+
+watch(
+  () => props.rows,
+  (newRows) => {
+    currentRows.value = newRows;
+  },
+);
+
+function onEnter() {
+  currentRows.value++;
+}
+
+function onBackspace() {
+  const textarea = textareaRef.value;
+
+  if (!textarea) return;
+
+  const content = textarea.value;
+  const newlineCount = (content.match(/\n/g) || []).length;
+  const newRowCount = Math.max(props.rows, newlineCount + 1);
+
+  if (newRowCount < currentRows.value) {
+    currentRows.value = newRowCount;
+  }
+}
+
 const localValue = computed({
   get() {
     return props.modelValue;

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.291",
+  "version": "0.0.292",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -8067,6 +8067,15 @@
               },
               "default": "\"\""
             },
+            {
+              "name": "resizable",
+              "description": "Allow resizing of the textarea.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "readonly",
               "description": "Make textarea read only.",
@@ -8117,7 +8126,7 @@
               "description": "Set number of visible rows.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "string|number"
               },
               "default": "3"
             },