sigpro-ui/components/Input.js

import { h, $, when, fx } from 'sigpro';
import { get, cls, isFunc } from './_core.js';

export const Input = (props) => {
  const { label, icon, float, placeholder, value, left, right, content, ...rest } = props;

  const showPassword = $(false);
  const isFocused = $(false);
  const isPassword = props.type === 'password';

  const inputType = () => isPassword
    ? (get(showPassword) ? 'text' : 'password')
    : (props.type || 'text');

  return h("div", {
    class: "input-container",
    onfocusin: () => isFocused(true),
    onfocusout: (e) => {
      if (!e.currentTarget.contains(e.relatedTarget)) {
        isFocused(false);
      }
    }
  }, [
    h('label', { class: "floating-label" }, [
      float ? h("span", {}, label) : null,
      h("label", {
        class: () => cls('input', props.class)
      }, [
        label && !float ? h('span', { class: 'label' }, label) : null,
        left ?? null,
        h('input', {
          ...rest,
          type: inputType,
          class: 'grow',
          placeholder: placeholder || label || ' ',
          value: value
        }),
        right ?? null,

        isPassword ? h('label', { class: 'swap swap-rotate ml-2' }, [
          h('input', {
            type: 'checkbox',
            onchange: (e) => showPassword(e.target.checked)
          }),
          h('span', { class: 'swap-on icon-[lucide--eye]' }),
          h('span', { class: 'swap-off icon-[lucide--eye-off]' })
        ]) : null
      ]),

      when(isFocused, () => fx({ duration: 300, slide: true },
        h('div', {
          class: 'input-content',
          onmousedown: e => e.preventDefault()
        }, [
          isFunc(content) ? content(isFocused) : content
        ])
      ))
    ])
  ]);
};