feat: add pattern & maxlength props to input and textarea com…

…ponents.

src/comps.ts

@@ -1324,7 +1324,7 @@ export default [
         fileName: "Input.vue",
         dirPath: "app/components/Ui",
         fileContent:
-          '<template>\n  <!-- eslint-disable-next-line vue/html-self-closing -->\n  <input v-bind="props" v-model="localModel" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n  const props = withDefaults(\n    defineProps<{\n      class?: any;\n      id?: string;\n      name?: string;\n      placeholder?: string;\n      disabled?: boolean;\n      required?: boolean;\n      type?: string;\n      modelValue?: any;\n    }>(),\n    { type: "text" }\n  );\n  const emits = defineEmits<{\n    "update:modelValue": [value: any];\n  }>();\n  const localModel = useVModel(props, "modelValue", emits);\n\n  const styles = tv({\n    base: "form-input h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:px-1 file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer focus:border-input focus:ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:[color-scheme:dark] sm:text-sm",\n  });\n</script>\n',
+          '<template>\n  <!-- eslint-disable-next-line vue/html-self-closing -->\n  <input\n    v-bind="props"\n    :class="styles({ class: props.class })"\n    :value="modelValue"\n    @input="handleInput"\n  />\n</template>\n\n<script lang="ts" setup>\n  const props = withDefaults(\n    defineProps<{\n      /** Additional classes to add to the input */\n      class?: any;\n      /** The id of the input */\n      id?: string;\n      /** The name of the input */\n      name?: string;\n      /** The placeholder of the input */\n      placeholder?: string;\n      /** Whether the input is disabled */\n      disabled?: boolean;\n      /** Whether the input is required */\n      required?: boolean;\n      /** The type of the input */\n      type?: string;\n      /** The value of the input */\n      modelValue?: any;\n      /** The maximum length of the input */\n      maxlength?: number;\n      /** The `RegExp` pattern of the input */\n      pattern?: string;\n    }>(),\n    {\n      type: "text",\n      modelValue: "",\n    }\n  );\n\n  const emit = defineEmits<{\n    "update:modelValue": [value: string];\n  }>();\n\n  const handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    let value = target.value;\n\n    /* val input with pattern */\n    if (props.pattern) {\n      const regex = new RegExp(props.pattern);\n      value = Array.from(value)\n        .filter((char) => regex.test(char))\n        .join("");\n    }\n\n    /* Handle maxlength */\n    if (props.maxlength) {\n      value = value.slice(0, props.maxlength);\n    }\n\n    target.value = value;\n    emit("update:modelValue", value);\n  };\n\n  const styles = tv({\n    base: "form-input h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:px-1 file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer focus:border-input focus:ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:[color-scheme:dark] sm:text-sm",\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -2614,7 +2614,7 @@ export default [
         fileName: "Textarea.vue",
         dirPath: "app/components/Ui",
         fileContent:
-          '<template>\n  <textarea v-bind="props" v-model="localModel" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n  const props = defineProps<{\n    class?: any;\n    name?: string;\n    id?: string;\n    placeholder?: string;\n    required?: boolean;\n    disabled?: boolean;\n    rows?: number;\n    modelValue?: string;\n  }>();\n\n  const emits = defineEmits<{\n    "update:modelValue": [value: any];\n  }>();\n\n  const localModel = useVModel(props, "modelValue", emits);\n\n  const styles = tv({\n    base: "form-textarea flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 ring-offset-background placeholder:text-muted-foreground focus:border-input focus:ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\n  });\n</script>\n',
+          '<template>\n  <textarea\n    v-bind="props"\n    :value="modelValue"\n    :class="styles({ class: props.class })"\n    @input="handleInput"\n  />\n</template>\n\n<script lang="ts" setup>\n  const props = withDefaults(\n    defineProps<{\n      /** Additional classes to add to the textarea */\n      class?: any;\n      /** The name of the textarea */\n      name?: string;\n      /** The id of the textarea */\n      id?: string;\n      /** The placeholder of the textarea */\n      placeholder?: string;\n      /** Whether the textarea is required */\n      required?: boolean;\n      /** Whether the textarea is disabled */\n      disabled?: boolean;\n      /** The number of rows to display */\n      rows?: number;\n      /** The value of the textarea */\n      modelValue?: string;\n      /** The maximum number of characters allowed */\n      maxlength?: number;\n      /** The `RegExp` pattern of the textarea */\n      pattern?: string;\n    }>(),\n    {\n      modelValue: "",\n    }\n  );\n\n  const emit = defineEmits<{\n    "update:modelValue": [value: string];\n  }>();\n\n  const handleInput = (event: Event) => {\n    const target = event.target as HTMLTextAreaElement;\n    let value = target.value;\n\n    /* Validate input with pattern */\n    if (props.pattern) {\n      const regex = new RegExp(props.pattern);\n      value = Array.from(value)\n        .filter((char) => regex.test(char))\n        .join("");\n    }\n\n    /* Handle maxlength */\n    if (props.maxlength) {\n      value = value.slice(0, props.maxlength);\n    }\n\n    target.value = value;\n    emit("update:modelValue", value);\n  };\n\n  const styles = tv({\n    base: "form-textarea flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 ring-offset-background placeholder:text-muted-foreground focus:border-input focus:ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:[color-scheme:dark] sm:text-sm",\n  });\n</script>\n',
       },
     ],
     utils: [],