vueless 0.0.290 → 0.0.292

package/package.json

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

package/service.helper/index.js

@@ -6,40 +6,34 @@
  @returns {Object}
  */
 export function cloneDeep(entity, cache = new WeakMap()) {
-  const referenceTypes = ["Array", "Object", "Map", "Set", "Date"];
-  const entityType = Object.prototype.toString.call(entity);
-
-  if (
-    !new RegExp(referenceTypes.join("|")).test(entityType) ||
-    entity instanceof WeakMap ||
-    entity instanceof WeakSet
-  ) {
+  // primitives
+  if (Object(entity) !== entity) {
     return entity;
   }
 
+  // cyclic reference
   if (cache.has(entity)) {
     return cache.get(entity);
   }
 
-  const c = new entity.constructor();
-
-  if (entity instanceof Map) {
-    entity.forEach((value, key) => c.set(cloneDeep(key), cloneDeep(value)));
-  }
-
-  if (entity instanceof Set) {
-    entity.forEach((value) => c.add(cloneDeep(value)));
-  }
-
-  if (entity instanceof Date) {
-    return new Date(entity);
-  }
-
-  cache.set(entity, c);
+  const result =
+    entity instanceof Set
+      ? new Set(entity)
+      : entity instanceof Map
+        ? new Map(Array.from(entity, ([key, val]) => [key, cloneDeep(val, cache)]))
+        : entity instanceof Date
+          ? new Date(entity)
+          : entity instanceof RegExp
+            ? new RegExp(entity.source, entity.flags)
+            : entity.constructor
+              ? new entity.constructor()
+              : Object.create(null);
+
+  cache.set(entity, result);
 
   return Object.assign(
-    c,
-    ...Object.keys(entity).map((prop) => ({ [prop]: cloneDeep(entity[prop], cache) })),
+    result,
+    ...Object.keys(entity).map((key) => ({ [key]: cloneDeep(entity[key], cache) })),
   );
 }
 

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.290",
+  "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"
             },