npm - ui-thing - Versions diffs - 0.1.47 → 0.1.48 - Mend

ui-thing 0.1.47 → 0.1.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "ui-thing",
-  "version": "0.1.47",
+  "version": "0.1.48",
   "description": "CLI used to add Nuxt 3 components to a project",
   "keywords": [
     "cli",

package/src/comps.ts CHANGED Viewed

@@ -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: [],