dgz-ui-shared
Version:
Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript, dgz-ui library
451 lines (450 loc) • 12 kB
JavaScript
import { FormField as N, FormLabel as v, FormItem as g, FormControl as p, Checkbox as D, Input as $, FormMessage as k, HtmlEditor as R, MaskInput as E, RadioGroupItem as H, Select as j, SelectTrigger as z, SelectValue as A, SelectContent as V, SelectItem as G, Switch as L, Textarea as O } from "dgz-ui/form";
export * from "dgz-ui/form";
import { jsx as e, jsxs as c } from "react/jsx-runtime";
import { useId as P } from "react";
import { DATE as _, Calendar as q, TimePicker as F } from "dgz-ui/calendar";
import { Popover as B, PopoverTrigger as J, PopoverContent as K } from "dgz-ui/popover";
import { cn as u, dayjs as S } from "dgz-ui/utils";
import { g as b } from "../../chunks/MyInput-ByJ5vTAN.es.js";
import { M as ke } from "../../chunks/MyInput-ByJ5vTAN.es.js";
import { Calendar1 as Q } from "lucide-react";
import { D as U } from "../../chunks/DateRangePicker-C2ZYbgXb.es.js";
import { M as Ce } from "../../chunks/MySelect-CRXtMlbf.es.js";
const se = ({
control: a,
name: r,
label: t,
rules: i,
...s
}) => {
const l = P();
return r && a && /* @__PURE__ */ e(
N,
{
control: a,
name: r,
rules: i,
render: ({ field: n }) => /* @__PURE__ */ e(v, { className: "block", htmlFor: s.id || l, children: /* @__PURE__ */ c(g, { className: "flex flex-row items-start gap-3", children: [
/* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(
D,
{
id: s.id || l,
checked: n.value,
onCheckedChange: n.onChange,
...s
}
) }),
t && /* @__PURE__ */ e("div", { className: "mt-0.5", children: t })
] }) })
}
) || null;
}, le = ({
control: a,
name: r,
label: t,
required: i,
rules: s,
format: l = _,
floatingError: n,
placeholder: d,
disabled: m,
register: h,
className: x,
showTime: f,
inputProps: y,
...M
}) => r && a && /* @__PURE__ */ e(
N,
{
control: a,
name: r,
rules: s,
render: ({ field: o, formState: C }) => /* @__PURE__ */ c(g, { children: [
t && /* @__PURE__ */ c(v, { className: "block", children: [
t,
" ",
i && /* @__PURE__ */ e("span", { className: "text-red-600", children: "*" })
] }),
/* @__PURE__ */ c(B, { children: [
/* @__PURE__ */ e(J, { asChild: !0, children: /* @__PURE__ */ c("div", { className: "relative", children: [
/* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(
$,
{
...y,
variant: b(C.errors, `${r}.message`) ? "failure" : "default",
disabled: m,
...o,
readOnly: !0,
placeholder: d || "Pick a date",
value: o.value ? S(o.value).format(l) : void 0,
className: u("m-0 text-start", x)
}
) }),
/* @__PURE__ */ e(
Q,
{
className: u(
"text-secondary absolute top-2.5 right-2 size-5",
m && "pointer-events-none opacity-50"
)
}
),
/* @__PURE__ */ e(
k,
{
className: u(n && "absolute -bottom-5")
}
)
] }) }),
!m && /* @__PURE__ */ c(K, { className: "w-auto p-0", align: "start", children: [
/* @__PURE__ */ e(
q,
{
...M,
mode: "single",
selected: o.value,
onSelect: o.onChange
}
),
f && /* @__PURE__ */ e("div", { className: "px-4 pb-3", children: /* @__PURE__ */ e(
F,
{
value: S(o.value).format("HH:mm"),
onChange: (I) => {
const [T, w] = I.split(":");
o.onChange(
S(o.value).set("hour", Number(T)).set("minute", Number(w)).toDate()
);
}
}
) })
] })
] })
] })
}
) || null, ne = ({
control: a,
name: r,
label: t,
required: i,
rules: s,
placeholder: l,
floatingError: n,
...d
}) => r && a && /* @__PURE__ */ e(
N,
{
control: a,
name: r,
rules: s,
render: ({ field: m, formState: h }) => /* @__PURE__ */ c(g, { children: [
t && /* @__PURE__ */ c(v, { className: "block", children: [
t,
" ",
i && /* @__PURE__ */ e("span", { className: "text-red-600", children: "*" })
] }),
/* @__PURE__ */ c("div", { children: [
/* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(
U,
{
...d,
error: `${b(h.errors, r, "")}`,
selected: m.value,
onRangeSelected: m.onChange,
placeholder: l
}
) }),
/* @__PURE__ */ e(
k,
{
className: u(n && "absolute -bottom-5")
}
)
] })
] })
}
) || null, ie = ({
control: a,
name: r,
label: t,
rules: i,
required: s,
floatingError: l,
...n
}) => r && a && /* @__PURE__ */ e(
N,
{
control: a,
name: r,
rules: i,
render: ({ field: d }) => /* @__PURE__ */ c(g, { children: [
t && /* @__PURE__ */ c(v, { className: "block", children: [
t,
" ",
s && /* @__PURE__ */ e("span", { className: "text-red-600", children: "*" })
] }),
/* @__PURE__ */ c("div", { children: [
/* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(R, { ...d, ...n }) }),
/* @__PURE__ */ e(
k,
{
className: u(l && "absolute -bottom-5")
}
)
] })
] })
}
) || null, de = ({
control: a,
name: r,
label: t,
rules: i,
required: s,
floatingError: l,
...n
}) => r && a && /* @__PURE__ */ e(
N,
{
control: a,
name: r,
rules: i,
render: ({ field: d, formState: m }) => /* @__PURE__ */ c(g, { children: [
t && /* @__PURE__ */ c(v, { className: "block", children: [
t,
" ",
s && /* @__PURE__ */ e("span", { className: "text-red-600", children: "*" })
] }),
/* @__PURE__ */ c("div", { children: [
/* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(
E,
{
thousandsSeparator: " ",
lazy: !1,
placeholderChar: "_",
unmask: !0,
...d,
...n,
variant: b(m.errors, `${r}.message`) ? "failure" : "default",
onAccept: (h) => d.onChange(h)
}
) }),
/* @__PURE__ */ e(
k,
{
className: u(l && "absolute -bottom-5")
}
)
] })
] })
}
) || null, oe = ({
control: a,
name: r,
label: t,
rules: i,
value: s,
...l
}) => {
const n = P();
return r && a && /* @__PURE__ */ e(
N,
{
control: a,
name: r,
rules: i,
render: ({ field: d }) => /* @__PURE__ */ e(v, { className: "block", htmlFor: l.id || n, children: /* @__PURE__ */ c(g, { className: "flex flex-row items-start gap-3", children: [
/* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(
H,
{
id: l.id || n,
value: s,
checked: d.value === s,
onClick: () => {
d.value !== s && d.onChange(s);
},
...l
}
) }),
t && /* @__PURE__ */ e("div", { className: "mt-0.5", children: t })
] }) })
}
) || null;
}, me = ({
control: a,
name: r,
label: t,
required: i,
className: s,
rules: l,
options: n = [],
placeholder: d = "Select an option",
disabled: m,
onChange: h
}) => r && a && /* @__PURE__ */ e(
N,
{
control: a,
name: r,
rules: l,
render: ({ field: x, formState: f }) => {
const y = !!b(f.errors, `${r}`), M = (o) => {
const C = Number(o) ? Number(o) : o;
C && x.value !== C && (x.onChange(C), h == null || h(C));
};
return /* @__PURE__ */ c(g, { children: [
t && /* @__PURE__ */ c(v, { children: [
t,
" ",
i && /* @__PURE__ */ e("span", { className: "text-red-600", children: "*" })
] }),
/* @__PURE__ */ c("div", { children: [
/* @__PURE__ */ e(p, { children: /* @__PURE__ */ c(
j,
{
value: `${x.value || ""}`,
onValueChange: M,
disabled: m,
children: [
/* @__PURE__ */ e(
z,
{
ref: x.ref,
variant: y ? "failure" : "default",
className: u(s),
children: /* @__PURE__ */ e(A, { placeholder: d })
}
),
/* @__PURE__ */ e(V, { children: n.map((o) => /* @__PURE__ */ e(
G,
{
value: String(o.value),
children: o.label
},
String(o.value)
)) })
]
}
) }),
/* @__PURE__ */ e(k, {})
] })
] });
}
}
), he = ({
control: a,
name: r,
label: t,
rules: i,
...s
}) => {
const l = P();
return r && a && /* @__PURE__ */ e(
N,
{
control: a,
name: r,
rules: i,
render: ({ field: n }) => /* @__PURE__ */ e(v, { className: "block", htmlFor: s.id || l, children: /* @__PURE__ */ c(g, { className: "flex flex-row items-start gap-3", children: [
/* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(
L,
{
id: s.id || l,
className: "m-0",
checked: n.value,
onCheckedChange: n.onChange,
...s
}
) }),
t && /* @__PURE__ */ e("div", { className: "mt-0.5", children: t })
] }) })
}
) || null;
}, ue = ({
control: a,
name: r,
label: t,
required: i,
rules: s,
className: l,
floatingError: n,
...d
}) => r && a && /* @__PURE__ */ e(
N,
{
control: a,
name: r,
rules: s,
render: ({ field: m, formState: h }) => /* @__PURE__ */ c(g, { children: [
t && /* @__PURE__ */ c(v, { className: "block", children: [
t,
" ",
i && /* @__PURE__ */ e("span", { className: "text-red-600", children: "*" })
] }),
/* @__PURE__ */ c("div", { children: [
/* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(
O,
{
variant: b(h.errors, `${r}.message`) ? "failure" : "default",
...d,
...m,
className: u(l)
}
) }),
/* @__PURE__ */ e(
k,
{
className: u(n && "absolute -bottom-5")
}
)
] })
] })
}
) || null, Ne = ({
control: a,
name: r,
label: t,
required: i,
className: s,
rules: l,
floatingError: n,
...d
}) => r && a ? /* @__PURE__ */ e(
N,
{
control: a,
name: r,
rules: l,
render: ({ field: m }) => /* @__PURE__ */ c(g, { children: [
t && /* @__PURE__ */ c(v, { className: "block", children: [
t,
" ",
i && /* @__PURE__ */ e("span", { className: "text-red-600", children: "*" })
] }),
" ",
/* @__PURE__ */ c("div", { children: [
/* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(F, { ...m, ...d }) }),
/* @__PURE__ */ e(
k,
{
className: u(n && "absolute -bottom-5")
}
)
] })
] })
}
) : /* @__PURE__ */ e(F, { className: "mt-2", ...d });
export {
se as MyCheckbox,
le as MyDatePicker,
ne as MyDateRangePicker,
ie as MyHtmlEditor,
ke as MyInput,
de as MyMaskInput,
oe as MyRadio,
Ce as MySelect,
me as MyShadcnSelect,
he as MySwitch,
ue as MyTextarea,
Ne as MyTimePicker
};
//# sourceMappingURL=index.es.js.map