@base-framework/ui
Version:
This is a UI package that adds components and atoms that use Tailwind CSS and a theme based on Shadcn.
211 lines (210 loc) • 7 kB
JavaScript
import { Div as l, Label as d, Checkbox as u, Span as g, OnState as p, I as x, Input as r, Textarea as k } from "@base-framework/atoms";
import { Jot as y, Atom as s } from "@base-framework/base";
import { Icons as v } from "./icons.es.js";
const $ = "flex h-10 w-full px-3 py-2 text-sm", b = "rounded-md border border-input bg-background", n = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background", i = "disabled:cursor-not-allowed disabled:opacity-50 [&:user-invalid]:border-destructive", f = "placeholder:text-muted-foreground", h = `${$} ${b} ${n} ${f} ${i}`, I = ({ id: e, checked: o, bind: t, required: a }) => u({
id: e,
cache: "checkbox",
class: "absolute opacity-0 w-full h-full cursor-pointer pointer-events-none",
aria: {
checked: ["checked"]
},
required: a,
checked: o,
bind: t
}), C = () => g({ class: "absolute text-xs pointer-events-none" }, [
p(
"checked",
(e) => e ? x({
class: "w-2 h-2 pointer-events-none",
html: v.check
}) : null
)
]), w = ({ id: e, bind: o, checked: t, required: a, clickHandler: m }) => l({
class: `relative flex items-center justify-center w-5 h-5 transition-colors duration-200 border-primary hover:border-accent-foreground
${b}
${n}
${i}`.trim(),
onState: [
"checked",
{
"bg-primary": !0,
"text-primary-foreground": !0,
"border-primary": !0
}
],
role: "checkbox",
aria: {
checked: ["checked"]
},
tabIndex: 0,
click: m
}, [
I({ bind: o, checked: t, id: e, required: a }),
C()
]), T = ({ id: e, label: o, clickHandler: t }) => d({
class: "text-base cursor-pointer",
htmlFor: e,
click: t
}, o), q = y(
{
/**
* This will initialize the state of the checkbox.
*
* @returns {object}
*/
state() {
return {
// @ts-ignore
checked: this.checked ?? !1
};
},
/**
* This is added to check the checkbox after the component is rendered
* to see if the bind updated the checked value.
*
* @returns {void}
*/
after() {
this.state.checked = this.checkbox.checked;
},
/**
* This will handle the click event for the checkbox.
*
* @param {object} e
* @returns {void}
*/
clickHandler(e) {
e.preventDefault(), e.stopPropagation(), this.state.toggle("checked"), this.checkbox.checked = this.state.checked, typeof this.onChange == "function" && this.onChange(this.state.checked, this);
},
/**
* This will render the checkbox component.
*
* @returns {object}
*/
render() {
const e = this.getId(), o = (t) => this.clickHandler(t);
return l({ class: `flex items-center space-x-2 cursor-pointer ${this.class || ""}` }, [
w({
id: e,
// @ts-ignore
bind: this.bind,
// @ts-ignore
checked: this.state.checked,
// @ts-ignore
required: this.required,
// @ts-ignore
clickHandler: o
}),
// @ts-ignore
this.label && T({ id: e, label: this.label, clickHandler: o })
]);
}
}
), H = (e) => {
if (!e || e.length === 0) return "";
const t = e.replace(/\D/g, "").match(/^(\d{0,3})(\d{0,3})(\d{0,4})$/);
return t ? t[2] ? `(${t[1]}) ${t[2]}${t[3] ? "-" + t[3] : ""}` : t[1] || "" : e;
}, D = (e) => {
const o = e.target, t = H(o.value);
t && (o.value = t);
}, c = s((e) => r({
...e,
class: `${h} ${e.class || ""}`.trim()
})), F = s((e) => c({
...e,
type: "tel",
name: e.name || "Phone",
label: e.label || "Phone",
placeholder: "(555) 555-5555",
required: !0,
pattern: e.pattern || "\\(\\d{3}\\) \\d{3}-\\d{4}",
keyup: D
})), L = s((e) => c({
...e,
type: "email",
name: e.name || "Email",
label: e.label || "Email",
placeholder: "Email address"
})), M = s((e) => k({
...e,
as: "textarea",
class: `flex w-full h-24 px-3 py-2 text-sm rounded-md border border-input bg-background ${n} ${f} ${i} ${e.class || ""}`.trim()
})), R = (e = {}) => l({ class: "flex items-center space-x-2" }, [
r({
...e,
type: "radio",
class: "cursor-pointer appearance-none h-4 w-4 border rounded-full checked:border-primary checked:bg-primary focus:ring focus:ring-primary".trim()
}),
e.label && d({ forHTML: e.value, class: "cursor-pointer" }, e.label)
]), U = s((e) => r({
...e,
type: "date",
class: `rounded-md border px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${e.class || ""}`.trim()
})), W = s((e) => r({
...e,
type: "time",
class: `rounded-md border px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${e.class || ""}`.trim()
})), j = s((e) => r({
...e,
type: "datetime-local",
class: `rounded-md border px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${e.class || ""}`.trim()
})), z = s((e) => r({
...e,
type: "month",
class: `rounded-md border px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${e.class || ""}`.trim()
})), A = s((e) => r({
...e,
type: "week",
class: `rounded-md border px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${e.class || ""}`.trim()
})), B = s((e) => c({
...e,
type: "number"
})), J = s((e) => c({
...e,
type: "password"
})), O = s((e) => c({
...e,
type: "search"
})), G = s((e) => c({
...e,
type: "url"
})), K = s((e) => c({
...e,
type: "hidden"
})), Q = s((e) => r({
...e,
type: "color",
class: `border rounded-md border-input bg-background text-foreground p-0 disabled:cursor-not-allowed disabled:opacity-50 ${e.class || ""}`.trim()
}));
s((e) => u({
...e,
class: `flex h-4 w-4 rounded-md border border-input bg-background text-foreground ${n} ${i} ${e.class || ""}`.trim()
}));
const E = "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground", V = s((e) => r({
...e,
type: "file",
class: `${h} ${E} ${e.class || ""}`.trim()
}));
export {
q as C,
U as D,
L as E,
V as F,
K as H,
c as I,
z as M,
B as N,
J as P,
R,
O as S,
F as T,
G as U,
A as W,
M as a,
W as b,
j as c,
Q as d,
i as e,
n as f,
h as g
};