feat(BaseTextarea): add .lazy v-model modifier

shuriken-ui · Oct 14, 2023 · 6d68fa5 · 6d68fa5
1 parent b18930d
commit 6d68fa5
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 4 deletions.
diff --git a/components/form/BaseInput.vue b/components/form/BaseInput.vue
@@ -16,13 +16,21 @@ const props = withDefaults(
      *
      * @modifiers
      * `v-model.trim="value"`
+     *
+     * @modifiers
+     * `v-model.lazy="value"`
      */
     modelValue?: string | number
 
     /**
-     * Used internaly to allow v-model.number and v-model.trim
+     * Used internaly to allow .number, .trim
+     * and .lazy v-model modifiers.
      */
-    modelModifiers?: any
+    modelModifiers?: {
+      number?: boolean
+      trim?: boolean
+      lazy?: boolean
+    }
 
     /**
      * The form input identifier.

diff --git a/components/form/BaseTextarea.vue b/components/form/BaseTextarea.vue
@@ -12,13 +12,20 @@ export interface TextareaProps {
    *
    * @example
    * `v-model.trim="value"`
+   *
+   * @modifiers
+   * `v-model.lazy="value"`
    */
   modelValue?: string
 
   /**
-   * Used internaly to allow v-model.trim
+   * Used internaly to allow .trim
+   * and .lazy v-model modifiers.
    */
-  modelModifiers?: any
+  modelModifiers?: {
+    trim?: boolean
+    lazy?: boolean
+  }
 
   /**
    * The form input identifier.
@@ -249,6 +256,24 @@ const id = useNinjaId(() => props.id)
     </label>
     <div class="nui-textarea-outer">
       <textarea
+        v-if="props.modelModifiers.lazy"
+        :id="id"
+        ref="textareaRef"
+        v-model.lazy="value"
+        v-bind="$attrs"
+        class="nui-textarea"
+        :class="[
+          props.colorFocus && 'nui-textarea-focus',
+          props.classes.textarea,
+        ]"
+        :name="props.name"
+        :placeholder="props.placeholder"
+        :readonly="props.readonly"
+        :disabled="props.disabled"
+        :rows="props.rows"
+      ></textarea>
+      <textarea
+        v-else
         :id="id"
         ref="textareaRef"
         v-model="value"