78 lines
2.3 KiB
JavaScript
78 lines
2.3 KiB
JavaScript
import { $, $html } from "sigpro";
|
|
import { val, joinClass } from "../core/utils.js";
|
|
import { tt } from "../core/i18n.js";
|
|
import {
|
|
iconAbc,
|
|
iconLock,
|
|
iconCalendar,
|
|
icon123,
|
|
iconMail,
|
|
iconShow,
|
|
iconHide
|
|
} from "../core/icons.js";
|
|
|
|
/** INPUT */
|
|
export const Input = (props) => {
|
|
const { label, tip, value, error, isSearch, icon, type = "text", ...rest } = props;
|
|
const isPassword = type === "password";
|
|
const visible = $(false);
|
|
|
|
const iconsByType = {
|
|
text: iconAbc,
|
|
password: iconLock,
|
|
date: iconCalendar,
|
|
number: icon123,
|
|
email: iconMail,
|
|
};
|
|
|
|
const inputEl = $html("input", {
|
|
...rest,
|
|
type: () => (isPassword ? (visible() ? "text" : "password") : type),
|
|
placeholder: props.placeholder || label || (isSearch ? tt("search")() : " "),
|
|
class: joinClass("grow order-2 focus:outline-none", props.class),
|
|
value: value,
|
|
oninput: (e) => props.oninput?.(e),
|
|
disabled: () => val(props.disabled),
|
|
});
|
|
|
|
const leftIcon = icon ? icon : iconsByType[type] ? $html("img", { src: iconsByType[type], class: "opacity-50", alt: type }) : null;
|
|
|
|
return $html(
|
|
"label",
|
|
{
|
|
class: () => joinClass("input input-bordered floating-label flex items-center gap-2 w-full relative", val(error) ? "input-error" : ""),
|
|
},
|
|
[
|
|
leftIcon ? $html("div", { class: "order-1 shrink-0" }, leftIcon) : null,
|
|
label ? $html("span", { class: "text-base-content/60 order-0" }, label) : null,
|
|
inputEl,
|
|
isPassword
|
|
? $html(
|
|
"button",
|
|
{
|
|
type: "button",
|
|
class: "order-3 btn btn-ghost btn-xs btn-circle opacity-50 hover:opacity-100",
|
|
onclick: (e) => {
|
|
e.preventDefault();
|
|
visible(!visible());
|
|
},
|
|
},
|
|
() =>
|
|
$html("img", {
|
|
class: "w-5 h-5",
|
|
src: visible() ? iconShow : iconHide,
|
|
}),
|
|
)
|
|
: null,
|
|
tip
|
|
? $html(
|
|
"div",
|
|
{ class: "tooltip tooltip-left order-4", "data-tip": tip },
|
|
$html("span", { class: "badge badge-ghost badge-xs cursor-help" }, "?"),
|
|
)
|
|
: null,
|
|
() => (val(error) ? $html("span", { class: "text-error text-[10px] absolute -bottom-5 left-2" }, val(error)) : null),
|
|
],
|
|
);
|
|
};
|