`@flexiui/svelte-input`

Un componente de entrada para Svelte. Permite la entrada de datos con opciones de personalización como tipo de campo, valor, marcadores de posición, y validaciones como mínimo y máximo.

Instalación

Para instalar el componente Input en tu proyecto de Svelte, puedes usar npm o yarn.

Con npm:

npm install @flexiui/svelte-input

Con yarn:

yarn add @flexiui/svelte-input

Uso

Una vez instalado, puedes usar el componente Input en tu aplicación de Svelte.

<script>
  import MyInputField from '@flexiui/svelte-input';
  let field = {
    name: 'exampleField',
    placeholder: {
      es: 'Introduce un valor'
    },
    readonly: false
  };
</script>

<MyInputField
    name={field.name}
    id={field.name}
    type="text"
    value={''} 
    placeholder={field.placeholder}
    readonly={field.readonly} />

Propiedades del Componente

Propiedad	Tipo	Descripción
`name`	`string`	El nombre del campo para el componente de entrada.
`id`	`string`	El identificador único del campo.
`type`	`string`	El tipo de entrada (por ejemplo, `text`, `number`, etc.).
`value`	`any`	El valor actual del campo de entrada.
`placeholder`	`string`	El texto de marcador de posición en el campo de entrada.
`min`	`number`	Número mínimo permitido (solo para tipos numéricos).
`max`	`number`	Número máximo permitido (solo para tipos numéricos).
`step`	`number`	El incremento permitido (solo para tipos numéricos).
`required`	`boolean`	Indica si el campo es obligatorio.
`readonly`	`boolean`	Indica si el campo es de solo lectura.

Ejemplo de Uso

<script>
  import MyInputField from '@flexiui/svelte-input';
  let field = {
    name: 'createdAt',
    placeholder: {
      es: 'Introduce la fecha'
    },
    readonly: true
  };
</script>

<MyInputField
    name={field.name}
    id={field.name}
    type="date"
    value={new Date().toISOString().split('T')[0]} 
    placeholder={field.placeholder}
    readonly={field.readonly} />

Personalización

Puedes personalizar aún más el comportamiento del componente mediante el uso de estilos CSS. Los estilos predeterminados pueden ser sobreescritos fácilmente mediante clases CSS.

Ejemplo de estilos

/* Puedes personalizar los estilos en tu propio archivo CSS */
.input-field {
  background-color: #f0f0f0;
  border-radius: 5px;
  padding: 10px;
}

Contribuciones

Si deseas contribuir a este proyecto, puedes hacerlo mediante un Pull Request en el repositorio de GitHub. Por favor, sigue las mejores prácticas y asegúrate de que tu código pase las pruebas antes de hacer un PR.

Licencia

Este proyecto está bajo la licencia MIT.

Package detail