sigpro-ui/components/discarted/Input.js

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

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

  const showPassword = $(false);
  const isFocused = $(false);
  const isPassword = props.type === 'password';
  const pattern = rule ?? null;

  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", { pattern: pattern, class: () => cls('input validator', props.class) },
        [
          label && !float ? h('span', { class: 'label' }, label) : null,
          left ?? null,
          h('input', { ...rest, type: inputType, class: 'grow', pattern: pattern, 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
        ]),
        hint ? h('div', { class: "validator-hint" }, hint) : null,
      
      when(isFocused, () => fx({ duration: 300, slide: true },
        h('div', { class: 'input-content', onmousedown: e => e.preventDefault() },
          [
            isFn(content) ? content(isFocused) : content
          ])
      ))
    ]),
  ]);
};