j-Input

j-Input es un componente multifuncional input que admite muchas funciones y está optimizado para el uso diario. Es una gran alternativa a j-Textbox y j-Dropdown. Funciona sólo con jComponent +v17.

Configuración:

• type {String} opcional, valores:
  • valor vacío significa valor predeterminado text
  • email,
  • multiline
  • checkbox
  • phone
  • password
  • zip
  • date (necesita el componente datepicker)
  • NUEVO: datetime (necesita el componente datepicker)
  • time (necesita el componente timepicker)
  • color (necesita el componente colorpicker)
  • icon (necesita el componente faicons)
  • emoji (necesita el componente emoji)
  • url
  • number
  • number2 (anulable)
  • search
  • lower
  • upper
  • slug
  • id
  • NUEVO: radiobutton
  • NUEVO: tags
  • NUEVO: tags-lower
  • NUEVO: tags-upper
  • NUEVO: tags-id
  • NUEVO: tags-email
  • NUEVO: tags-slug
  • NUEVO: tags-phone
  • NUEVO: tags-url
• required {Boolean} opcional, habilita "requerido" (predeterminado: false)
• icon {String} opcional, icono para etiqueta, p. home, cog, etc.
• licon {String} opcional, icono izquierdo, p.e. home, cog, etc.
• liconclick {String} opcional, una ruta al método function(component, input)
• ricon {String} opcional, icono derecho, p.e. home, cog, etc.
• riconclick {String} opcional, una ruta al método function(component, input)
• label {String} opcional, una etiqueta (el contenido predeterminado es HTML)
• autofocus {Boolean} opcional, enfoca la entrada (por defecto: false)
• align {String} opcional, left (predeterminado), 2 / right o 1 / center
• after {String} opcional, significa un carácter después de la etiqueta (predeterminado: :)
• autofill {Boolean/String} opcional, habilita la función de autocompletar del navegador (string se usará como nombre de entrada, predeterminado: false)
• placeholder {String} opcional, agrega un texto placeholder en la entrada
• maxlength {Number} opcional, establece una longitud máxima de caracteres (predeterminado: 200)
• minlength {Number} opcional, establece una longitud mínima de caracteres
• minvalue {Number} opcional, un valor mínimo para el tipo number
• maxvalue {Number} opcional, un valor máximo para el tipo number
• increment {Number} opcional, establece un valor para incrementar (predeterminado: 1)
• validate {String} opcional, una condición para validar el valor, puede contener un enlace a function(value) o !!value.match(/[a-z]+/)
• format {String} opcional, formato de salida, p. para date tipo: yyyy-MM-dd, para time tipo: HH:mm, para number puede definir máx. decimales (predeterminado: auto)
• disabled {Boolean} opcional, desactiva este componente
• error {String} opcional, agrega un texto string debajo del componente
• autocomplete {String} opcional, debe contener un enlace a una función, se activa en el evento focus
• spaces {Boolean} opcional, habilita espacios, de lo contrario los elimina (predeterminado: true)
• innerlabel {Boolean} opcional, habilita etiqueta interior (por defecto: true)
• dirsource {String} opcional, ruta a una fuente de datos o NEW a function(search, next) (la ruta debe contener / o NEW: id|name,id|name
• dircustom {String/Boolean} opcional, puede contener una ruta a function(val, next(new_val)) o puede ser Boolean. Esta opción puede permitir agregar un valor personalizado (valor no definido en la fuente de datos)
• dirrender {String} opcional, una ruta a function(item, text) (debe devolver HTML para j-Directory), esta función puede afectar la lista de elementos en j-Directory
• dirminwidth {Number} opcional, un ancho mínimo para j-Directory, predeterminado: 200

• dirmaxwidth {Number} opcional, un ancho máximo para j-Directory
• diroffsety {Number} opcional, desplazamiento Y (predeterminado: 0)
• diroffsetx {Number} opcional, desplazamiento X (predeterminado: 0)
• dirplaceholder {String} opcional, un marcador de posición para j-Directory
• dirempty {String} opcional, agrega un campo vacío para j-Directory
• dirkey {String} opcional, un nombre clave para leer text en dirsource (predeterminado: name)
• dirvalue {String} opcional, un nombre clave para leer value en dirsource (predeterminado: id)
• direxclude {Boolean} opcional, excluye un valor actual de j-Directory (predeterminado: true)
• dirsearch {Boolean|String} opcional, puede deshabilitar la búsqueda en j-Directory (predeterminado: true) o {String} (nombre de clave) puede asignar un valor para la búsqueda
• dirraw {Boolean} opcional, puede desactivar el escape de elementos para j-Directory (predeterminado: false)
• dirdetail {String} opcional, un enlace a la función function(val, next(NEW_TEXT)) (destinada a dirsource)
• dirfilter {String} opcional, un método condicional de filtro en línea, por ejemplo: value.id !== 2 (destinado a dirsource)
• NUEVO: dirrawrender {Boolean} opcional, si dirsource no incluye valor, generará un valor sin procesar (predeterminado: true)
• mask {String} opcional, puede contener una máscara con el formato ###/## (# se reemplaza por un carácter)
• maskregexp {String} opcional, puede contener RegExp para cada carácter en el formato \d,\d,\d,null,\d,\d (, es el delimitador)
• masktidy {Boolean} opcional, el componente devuelve solo caracteres sin formato sin caracteres fijos (predeterminado: false)
• autosource {String} una ruta a la fuente de búsqueda Array (NEW) o function(search, render(arr)) para búsqueda dinámica
• autovalue {String} una ruta de propiedad para el valor en autosource, predeterminado: name
• autoexec {String} un método de ruta function(item, next(value_to_input))
• searchalign {Number} puede alinear el ícono en type:search hacia la izquierda (2) o hacia la derecha (1, predeterminado)
• forcevalidation {Boolean} habilita la validación forzada para phone y email (predeterminado: true)
• camouflage {Boolean|String} enmascara el valor en la entrada después de que se activa el evento blur (predeterminado: false) o puede ser String que se usará como camuflaje.
• monospace {Boolean} habilita la fuente monospaced (predeterminada: false)
• multiple {Boolean} habilita casillas de verificación si dirsource no está vacía
• tabindex {Number} agrega un índice de tabulación (predeterminado: 0)
• tabs {Boolean} habilita pestañas para varias líneas (predeterminado: true)
• Edición de campo de texto en bloque readonly {Boolean} (predeterminado: false)
• transform {String} un enlace al function(value, config) para transformar los valores ingresados
• multiline {Boolean} funciona sólo con el tipo radiobutton
• separator {String|Boolean} un separador para múltiples valores renderizados
• realtime {Boolean} habilita el enlace en tiempo real (predeterminado: true)
• exec {String} un enlace al function(value, element) que será evaluado si la entrada se ve afectada

Interesante:

• type:date necesita el componente datepicker
• type:time necesita el componente timepicker
• dirsource:path.to.datasource necesita el componente directory
• si licon o ricon comienzan con !, entonces el componente representa un valor sin formato en lugar de icon.
• La clase ui-input-ok se vincula cuando la entrada se valida y completa
• SET('path', 'camouflage', 'show'); muestra el valor de 2000 ms

Úselo con <ui-component name="input">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia MIT.