Honest Feedback

[mcfaith9]

Hey! Thanks for the package — it works well, but the code is a bit large and tightly coupled. I ended up splitting some parts into reusable components to make it easier to manage. Would be great if it were more modular and customizable out of the box. Let me know if you're open to PRs!

e.g Input

<script setup>
  import { computed } from 'vue'

  const props = defineProps({
    label: {
      type: String,
      default: null,
    },
    modelValue: {
      type: [String, Number],
      default: '',
    },
    placeholder: {
      type: String,
      default: '',
    },
    required: {
      type: Boolean,
      default: false,
    },
  })

  const emit = defineEmits(['update:modelValue'])

  const inputValue = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val),
  })
</script>

<template>
  <div>
    <label
      v-if="label"
      class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
      {{ label }}
    </label>
    <input
      v-model="inputValue"
      type="text"
      :placeholder="placeholder"
      :required="required"
      class="dark:bg-dark-900 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"/>
  </div>
</template>

Usage:

<Input 
  v-model="taskName"
  label="Task Name"
  placeholder="Enter task name"
  required />