vueless 1.0.2-beta.49 → 1.0.2-beta.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.0.2-beta.49",
+  "version": "1.0.2-beta.50",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.form-textarea/UTextarea.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch, useSlots, useId, useTemplateRef } from "vue";
+import { computed, nextTick, onMounted, ref, watch, useSlots, useId, useTemplateRef } from "vue";
 
 import useUI from "../composables/useUI.ts";
 import { getDefaults } from "../utils/ui.ts";
@@ -67,6 +67,11 @@ const wrapperRef = useTemplateRef<HTMLLabelElement>("wrapper");
 
 const currentRows = ref(Number(props.rows));
 
+const localValue = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+
 watch(
   () => props.rows,
   (newRows) => {
@@ -74,84 +79,42 @@ watch(
   },
 );
 
-const localValue = computed({
-  get() {
-    return props.modelValue;
-  },
-  set(value) {
-    emit("update:modelValue", value);
-  },
-});
-
-onMounted(() => toggleReadonly(true));
-
-function getNewRowCount() {
-  const textarea = textareaRef.value;
-
-  if (!textarea) return 0;
-
-  const content = textarea.value;
-  const newlineCount = (content.match(/\n/g) || []).length;
-
-  return Math.max(Number(props.rows), newlineCount + 2);
-}
-
-function onEnter() {
-  if (props.readonly) return;
+watch(
+  () => [props.modelValue, props.autoResize],
+  () => props.autoResize && nextTick(autoResizeTextarea),
+);
 
-  const newRowCount = getNewRowCount();
+watch([() => props.labelAlign, () => props.size], setLabelPosition, { flush: "post" });
 
-  if (newRowCount > currentRows.value) {
-    currentRows.value = newRowCount;
-  }
+onMounted(() => {
+  toggleReadonly(true);
+  setLabelPosition();
 
-  if (newRowCount === currentRows.value) {
-    currentRows.value = newRowCount + 1;
+  if (props.autoResize) {
+    nextTick(autoResizeTextarea);
   }
-}
+});
 
-function onBackspace() {
-  if (props.readonly) return;
+function autoResizeTextarea() {
+  if (!props.autoResize || props.readonly) return;
 
-  const newRowCount = getNewRowCount() - 1;
+  const textarea = textareaRef.value;
 
-  if (newRowCount < currentRows.value) {
-    currentRows.value = newRowCount;
-  }
+  if (!textarea) return;
 
-  if (newRowCount === currentRows.value) {
-    currentRows.value = newRowCount + 1;
-  }
-}
+  textarea.style.height = "auto";
 
-function onChange() {
-  emit("change");
-}
+  // Calculate the minimum height based on rows prop
+  const computedStyle = getComputedStyle(textarea);
+  const lineHeight = parseFloat(computedStyle.lineHeight);
+  const paddingTop = parseFloat(computedStyle.paddingTop);
+  const paddingBottom = parseFloat(computedStyle.paddingBottom);
+  const minHeight = lineHeight * Number(props.rows) + paddingTop + paddingBottom;
 
-function onClick(event: MouseEvent) {
-  toggleReadonly(false);
+  // Set height to the larger of scrollHeight or minimum height
+  const newHeight = Math.max(textarea.scrollHeight, minHeight);
 
-  emit("click", event);
-}
-
-function onFocus() {
-  toggleReadonly(false);
-
-  emit("focus");
-}
-
-function onBlur() {
-  toggleReadonly(true);
-
-  emit("blur");
-}
-
-function onMouseleave() {
-  toggleReadonly(true);
-}
-
-function onMousedown() {
-  emit("mousedown");
+  textarea.style.height = `${newHeight}px`;
 }
 
 function toggleReadonly(hasReadonly: boolean) {
@@ -172,8 +135,6 @@ useMutationObserver(wrapperRef, (mutations) => mutations.forEach(setLabelPositio
   subtree: true,
 });
 
-watch([() => props.labelAlign, () => props.size], setLabelPosition, { flush: "post" });
-
 function setLabelPosition() {
   if (props.labelAlign === "top" || !hasSlotContent(slots["left"])) {
     if (labelComponentRef.value?.labelElement) {
@@ -201,7 +162,35 @@ function setLabelPosition() {
   }
 }
 
-onMounted(() => setLabelPosition());
+function onChange() {
+  emit("change");
+}
+
+function onClick(event: MouseEvent) {
+  toggleReadonly(false);
+
+  emit("click", event);
+}
+
+function onFocus() {
+  toggleReadonly(false);
+
+  emit("focus");
+}
+
+function onBlur() {
+  toggleReadonly(true);
+
+  emit("blur");
+}
+
+function onMouseleave() {
+  toggleReadonly(true);
+}
+
+function onMousedown() {
+  emit("mousedown");
+}
 
 defineExpose({
   /**
@@ -286,8 +275,6 @@ const {
         @mouseleave="onMouseleave"
         @mousedown="onMousedown"
         @click="onClick"
-        @keydown.enter="onEnter"
-        @keyup.delete="onBackspace"
       />
 
       <span v-if="hasSlotContent($slots['right'])" :for="elementId" v-bind="rightSlotAttrs">

package/ui.form-textarea/config.ts

@@ -14,7 +14,7 @@ export default /*tw*/ {
   rightSlot: "{>slot} rounded-l-none",
   wrapper: {
     base: `
-      flex px-3 gap-3 w-full bg-default transition
+      flex px-3 py-2 gap-3 w-full bg-default transition
       rounded-medium border border-default outline-transparent
       hover:border-lifted hover:focus-within:border-primary focus-within:border-primary
       focus-within:outline focus-within:outline-small focus-within:outline-primary focus-within:transition
@@ -30,7 +30,7 @@ export default /*tw*/ {
   },
   textarea: {
     base: `
-      pt-2 pb-1.5 block w-full bg-transparent border-none font-normal
+      block w-full bg-transparent border-none font-normal
       placeholder:text-muted placeholder:font-normal placeholder:leading-none
       focus:outline-none disabled:cursor-not-allowed
     `,
@@ -43,14 +43,17 @@ export default /*tw*/ {
       resizable: {
         false: "resize-none",
       },
+      autoResize: {
+        true: "resize-none overflow-hidden",
+      },
       error: {
         true: "placeholder:text-error/50",
       },
     },
     compoundVariants: [
-      { labelAlign: "topInside", label: true, size: "sm", class: "pt-[1.2rem]" },
-      { labelAlign: "topInside", label: true, size: "md", class: "pt-[1.4rem]" },
-      { labelAlign: "topInside", label: true, size: "lg", class: "pt-[1.6rem]" },
+      { labelAlign: "topInside", label: true, size: "sm", class: "mt-3" },
+      { labelAlign: "topInside", label: true, size: "md", class: "mt-4" },
+      { labelAlign: "topInside", label: true, size: "lg", class: "mt-5" },
     ],
   },
   defaults: {
@@ -59,6 +62,7 @@ export default /*tw*/ {
     inputmode: "text",
     labelAlign: "topInside",
     resizable: false,
+    autoResize: false,
     disabled: false,
     readonly: false,
     noAutocomplete: false,

package/ui.form-textarea/tests/UTextarea.test.ts

@@ -7,7 +7,7 @@ import ULabel from "../../ui.form-label/ULabel.vue";
 import type { Props } from "../types.ts";
 
 describe("UTextarea.vue", () => {
-  describe("props", () => {
+  describe("Props", () => {
     it("Model Value – sets initial value correctly", () => {
       const initialValue = "Test textarea";
 
@@ -165,6 +165,76 @@ describe("UTextarea.vue", () => {
       expect(componentResizable.get("textarea").attributes("class")).toContain("resize-none");
     });
 
+    it("Auto Resize – applies correct classes when autoResize is enabled", () => {
+      const autoResize = true;
+      const expectedClasses = "resize-none overflow-hidden";
+
+      const component = mount(UTextarea, {
+        props: {
+          autoResize,
+        },
+      });
+
+      expect(component.props("autoResize")).toBe(autoResize);
+      expect(component.get("textarea").attributes("class")).toContain(expectedClasses);
+    });
+
+    it("Auto Resize – does not adjust height when disabled", async () => {
+      const component = mount(UTextarea, {
+        props: {
+          autoResize: false,
+          rows: 2,
+          modelValue: "",
+        },
+      });
+
+      const textarea = component.get("textarea");
+      const textareaElement = textarea.element;
+      const initialHeight = textareaElement.style.height;
+
+      await textarea.setValue("line1\nline2\nline3\nline4\nline5");
+      await textarea.trigger("input");
+
+      expect(textareaElement.style.height).toBe(initialHeight);
+    });
+
+    it("Auto Resize – does not adjust height when readonly", async () => {
+      const component = mount(UTextarea, {
+        props: {
+          autoResize: true,
+          readonly: true,
+          rows: 2,
+          modelValue: "",
+        },
+      });
+
+      const textarea = component.get("textarea");
+      const textareaElement = textarea.element;
+
+      const initialHeight = textareaElement.style.height;
+
+      await textarea.setValue("line1\nline2\nline3\nline4\nline5");
+      await textarea.trigger("input");
+
+      expect(textareaElement.style.height).toBe(initialHeight);
+    });
+
+    it("Auto Resize – respects minimum rows", async () => {
+      const component = mount(UTextarea, {
+        props: {
+          autoResize: true,
+          rows: 3,
+          modelValue: "short",
+        },
+      });
+
+      const textarea = component.get("textarea");
+
+      await textarea.trigger("input");
+
+      expect(textarea.attributes("rows")).toBe("3");
+    });
+
     it("Readonly – sets textarea to readonly", () => {
       const component = mount(UTextarea, {
         props: {
@@ -449,104 +519,6 @@ describe("UTextarea.vue", () => {
     });
   });
 
-  describe("Functionality", () => {
-    it("Row auto resize – enter key increases rows when content has more lines than current rows", async () => {
-      const component = mount(UTextarea, {
-        props: {
-          rows: 2,
-          modelValue: "line1\nline2",
-        },
-      });
-
-      const textarea = component.get("textarea");
-
-      await textarea.setValue("line1\nline2\nline3");
-      await textarea.trigger("keydown", { key: "Enter" });
-
-      expect(Number(component.get("textarea").attributes("rows"))).toBeGreaterThan(2);
-    });
-
-    it("Row auto resize – enter key does not increase rows when textarea is readonly", async () => {
-      const component = mount(UTextarea, {
-        props: {
-          rows: 2,
-          modelValue: "line1\nline2",
-          readonly: true,
-        },
-      });
-
-      const textarea = component.get("textarea");
-
-      await textarea.setValue("line1\nline2\nline3");
-      await textarea.trigger("keydown", { key: "Enter" });
-
-      expect(component.get("textarea").attributes("rows")).toBe("2");
-    });
-
-    it("Row auto resize – backspace key decreases rows when content has fewer lines", async () => {
-      const component = mount(UTextarea, {
-        props: {
-          rows: 2,
-          modelValue: "line1\nline2\nline3\nline4",
-        },
-      });
-
-      const textarea = component.get("textarea");
-
-      await textarea.trigger("keydown", { key: "Enter" });
-      const initialRows = Number(component.get("textarea").attributes("rows"));
-
-      await textarea.setValue("line1\nline2");
-      await textarea.trigger("keyup", { key: "Delete" });
-
-      const finalRows = Number(component.get("textarea").attributes("rows"));
-
-      expect(finalRows).toBeLessThan(initialRows);
-    });
-
-    it("Row auto resize – backspace key does not decrease rows when textarea is readonly", async () => {
-      const component = mount(UTextarea, {
-        props: {
-          rows: 2,
-          modelValue: "line1\nline2\nline3",
-          readonly: true,
-        },
-      });
-
-      const textarea = component.get("textarea");
-
-      await textarea.trigger("keydown", { key: "Enter" });
-      const initialRows = component.get("textarea").attributes("rows");
-
-      await textarea.setValue("line1");
-      await textarea.trigger("keyup", { key: "Delete" });
-
-      expect(component.get("textarea").attributes("rows")).toBe(initialRows);
-    });
-
-    it("Row auto resize – handles rapid key presses correctly", async () => {
-      const component = mount(UTextarea, {
-        props: {
-          rows: 2,
-          modelValue: "line1",
-        },
-      });
-
-      const textarea = component.get("textarea");
-
-      await textarea.setValue("line1\nline2");
-      await textarea.trigger("keydown", { key: "Enter" });
-
-      await textarea.setValue("line1\nline2\nline3");
-      await textarea.trigger("keydown", { key: "Enter" });
-
-      await textarea.setValue("line1\nline2\nline3\nline4");
-      await textarea.trigger("keydown", { key: "Enter" });
-
-      expect(Number(component.get("textarea").attributes("rows"))).toBeGreaterThan(2);
-    });
-  });
-
   describe("Exposed Properties", () => {
     it("Wrapper Element – exposes wrapper element ref", () => {
       const component = mount(UTextarea, {

package/ui.form-textarea/types.ts

@@ -40,6 +40,11 @@ export interface Props {
    */
   resizable?: boolean;
 
+  /**
+   * Enable auto-resize functionality based on content.
+   */
+  autoResize?: boolean;
+
   /**
    * Make textarea read only.
    */