@akanjs/ui 0.0.150 → 0.0.151

package/esm/Field.js

@@ -0,0 +1,1090 @@
+"use client";
+import { dayjs, Enum } from "@akanjs/base";
+import { clsx } from "@akanjs/client";
+import { capitalize, formatPhone, isPhoneNumber, lowerlize } from "@akanjs/common";
+import { usePage } from "@akanjs/next";
+import { st } from "@akanjs/store";
+import { memo, useEffect, useState } from "react";
+import { AiOutlinePlus } from "react-icons/ai";
+import { BiHelpCircle, BiTrash, BiX } from "react-icons/bi";
+import { MdDragIndicator } from "react-icons/md";
+import { DraggableList } from "./DraggableList";
+import { Input } from "./Input";
+import { Select } from "./Select";
+import { ToggleSelect as UtilToggleSelect } from "./ToggleSelect";
+const Label = ({ className, label, desc, unit, nullable, mode = "edit" }) => {
+  return /* @__PURE__ */ React.createElement("span", { className: clsx("flex shrink-0 items-center gap-1", className) }, capitalize(label), unit ? /* @__PURE__ */ React.createElement("span", { className: "animate-fadeIn" }, " (", unit, ")") : null, desc ? /* @__PURE__ */ React.createElement("span", { className: "tooltip tooltip-info tooltip-right", "data-tip": desc }, /* @__PURE__ */ React.createElement(BiHelpCircle, null)) : null, nullable ? /* @__PURE__ */ React.createElement("span", { className: "text-sm text-gray-400" }, "(optional)") : null);
+};
+const Field = ({
+  className,
+  containerClassName,
+  labelClassName,
+  label,
+  desc,
+  nullable,
+  children
+}) => {
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("w-full", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement("div", { className: clsx("mt-2 flex w-full flex-col gap-4 px-4", containerClassName) }, children));
+};
+Field.Label = Label;
+const List = ({
+  className,
+  labelClassName,
+  label,
+  desc,
+  value,
+  onChange,
+  onAdd,
+  nullable,
+  renderItem
+}) => {
+  const { l } = usePage();
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("flex w-full flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement("div", { className: "mb-2 flex w-full flex-col gap-2 rounded-md border border-gray-300 p-2" }, value.map((item, idx) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { key: idx, className: "flex h-full w-full items-center justify-between gap-2" }, renderItem(item, idx), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2 border-l border-gray-300 pl-2" }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: "btn btn-xs btn-error btn-square btn-outline",
+      onClick: () => {
+        onChange(value.filter((_, i) => i !== idx));
+      }
+    },
+    /* @__PURE__ */ React.createElement(BiTrash, null)
+  ))), /* @__PURE__ */ React.createElement("div", { className: "h-[0.5px] w-full bg-gray-300 px-2 last:h-0" }))), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: "btn btn-outline",
+      onClick: () => {
+        onAdd();
+      }
+    },
+    "+ ",
+    l("shared.addModel", { model: l("appSubRoute.modelName") })
+  )));
+};
+Field.List = List;
+const Text = ({
+  label,
+  desc,
+  labelClassName,
+  className,
+  value,
+  onChange,
+  placeholder,
+  nullable,
+  disabled,
+  minlength = nullable ? 0 : 2,
+  maxlength = 200,
+  transform = (v) => v,
+  validate,
+  onPressEnter,
+  cache,
+  inputClassName,
+  inputStyleType = "bordered"
+}) => {
+  const { l } = usePage();
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      cacheKey: cache ? `${label}-${desc}-text` : void 0,
+      inputStyleType,
+      value: value ?? "",
+      nullable,
+      placeholder,
+      onChange: (value2) => {
+        onChange(transform(value2));
+      },
+      disabled,
+      className: clsx("w-full", ""),
+      inputClassName: clsx("focus:border-primary w-full", inputClassName),
+      validate: (text) => {
+        if (text.length < minlength)
+          return l("shared.textTooShortError", { minlength });
+        else if (text.length > maxlength)
+          return l("shared.textTooLongError", { maxlength });
+        else
+          return validate?.(text) ?? true;
+      },
+      onPressEnter
+    }
+  ));
+};
+Field.Text = memo(Text);
+//! 삭제
+const Price = ({
+  label,
+  desc,
+  labelClassName,
+  className,
+  value,
+  onChange,
+  placeholder,
+  nullable,
+  disabled,
+  minlength = nullable ? 0 : 2,
+  maxlength = 80,
+  transform = (v) => v,
+  validate,
+  onPressEnter,
+  inputClassName,
+  inputStyleType = "bordered"
+}) => {
+  const { l } = usePage();
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      inputStyleType,
+      value: value ?? "",
+      nullable,
+      placeholder: placeholder ?? `~ ${l("shared.priceUnit")}`,
+      onChange: (value2) => {
+        const withoutComma = value2.replace(/,/g, "").replace(/ /g, "");
+        onChange(transform(withoutComma));
+      },
+      disabled,
+      className: clsx("w-full", ""),
+      inputClassName: clsx("focus:border-primary w-full", inputClassName),
+      validate: (text) => {
+        if (text.length < minlength)
+          return l("shared.textTooShortError", { minlength });
+        else if (text.length > maxlength)
+          return l("shared.textTooLongError", { maxlength });
+        else
+          return validate?.(text) ?? true;
+      },
+      onPressEnter
+    }
+  ));
+};
+Field.Price = memo(Price);
+const TextArea = ({
+  label,
+  desc,
+  labelClassName,
+  className,
+  value,
+  onChange,
+  placeholder,
+  nullable,
+  disabled,
+  rows = 3,
+  minlength = nullable ? 0 : 2,
+  maxlength = 1e3,
+  transform = (v) => v,
+  validate,
+  onPressEnter,
+  cache,
+  inputClassName
+}) => {
+  const { l } = usePage();
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
+    Input.TextArea,
+    {
+      value: value ?? "",
+      cacheKey: cache ? `${label}-${desc}-textArea` : void 0,
+      nullable,
+      placeholder,
+      onChange: (value2) => {
+        onChange(transform(value2));
+      },
+      disabled,
+      rows,
+      className: clsx("h-full w-full"),
+      inputClassName: clsx("focus:border-primary w-full", inputClassName),
+      validate: (text) => {
+        if (text.length < minlength)
+          return l("shared.textTooShortError", { minlength });
+        else if (text.length > maxlength)
+          return l("shared.textTooLongError", { maxlength });
+        else
+          return validate?.(text) ?? true;
+      },
+      onPressEnter
+    }
+  ));
+};
+Field.TextArea = memo(TextArea);
+const Switch = ({
+  label,
+  desc,
+  labelClassName,
+  className,
+  value,
+  onChange,
+  disabled,
+  inputClassName,
+  onDesc,
+  offDesc
+}) => {
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable: true, label, desc }) : null, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "checkbox",
+      disabled,
+      className: clsx("toggle toggle-accent", inputClassName),
+      checked: value,
+      onChange: (e) => {
+        onChange(e.target.checked);
+      }
+    }
+  ), onDesc ?? offDesc ? /* @__PURE__ */ React.createElement("div", { className: "text-info text-sm" }, value ? onDesc : offDesc) : null));
+};
+Field.Switch = Switch;
+const ToggleSelect = ({
+  className,
+  labelClassName,
+  label,
+  desc,
+  model,
+  field,
+  items,
+  value,
+  validate,
+  onChange,
+  nullable,
+  disabled,
+  btnClassName
+}) => {
+  const { l } = usePage();
+  const isEnum = items instanceof Enum;
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
+    UtilToggleSelect,
+    {
+      className: "mt-2",
+      nullable: !!nullable,
+      btnClassName,
+      items: model && field ? (isEnum ? items.values : items).map((item) => ({
+        label: l.enum(model, field, item),
+        value: item
+      })) : isEnum ? items.values : items,
+      value,
+      onChange: (value2, idx) => {
+        onChange(value2);
+      },
+      disabled,
+      validate: (value2) => {
+        return validate?.(value2) ?? true;
+      }
+    }
+  ));
+};
+Field.ToggleSelect = ToggleSelect;
+const MultiToggleSelect = ({
+  className,
+  labelClassName,
+  label,
+  desc,
+  model,
+  field,
+  items,
+  value,
+  minlength,
+  maxlength,
+  validate,
+  onChange,
+  disabled
+}) => {
+  const { l } = usePage();
+  const isEnum = items instanceof Enum;
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable: !!minlength, label, desc }) : null, /* @__PURE__ */ React.createElement(
+    UtilToggleSelect.Multi,
+    {
+      nullable: !minlength,
+      items: model && field ? (isEnum ? items.values : items).map((item) => ({
+        label: l.enum(model, field, item),
+        value: item
+      })) : isEnum ? items.values : items,
+      value,
+      onChange: (values) => {
+        onChange(values);
+      },
+      disabled,
+      validate: (value2) => {
+        if (minlength && value2.length < minlength)
+          return l("shared.selectTooShortError", { minlength });
+        else if (maxlength && value2.length > maxlength)
+          return l("shared.selectTooLongError", { maxlength });
+        else
+          return validate?.(value2) ?? true;
+      }
+    }
+  ));
+};
+Field.MultiToggleSelect = MultiToggleSelect;
+const TextList = ({
+  label,
+  desc,
+  labelClassName,
+  className,
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  transform = (v) => v,
+  minlength = 0,
+  maxlength = 50,
+  minTextlength = 2,
+  maxTextlength = 200,
+  cache,
+  validate,
+  inputClassName
+}) => {
+  const { l } = usePage();
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable: !minlength, label, desc }) : null, /* @__PURE__ */ React.createElement("div", { className: "mb-5 h-full gap-2 rounded-md border border-gray-300 p-2" }, /* @__PURE__ */ React.createElement(DraggableList, { className: "h-full gap-2", onChange }, value.map((text, idx) => /* @__PURE__ */ React.createElement(DraggableList.Item, { key: idx, value: text }, /* @__PURE__ */ React.createElement("div", { className: "flex w-full items-center" }, /* @__PURE__ */ React.createElement(DraggableList.Cursor, null, /* @__PURE__ */ React.createElement(MdDragIndicator, { className: "text-xl" })), /* @__PURE__ */ React.createElement("div", { className: "flex w-full items-center justify-center gap-5" }, /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      value: text,
+      cacheKey: cache ? `${label}-${desc}-textList-[${idx}]` : void 0,
+      onChange: (text2) => {
+        const newValue = [...value];
+        newValue[idx] = transform(text2);
+        onChange(newValue);
+      },
+      validate: (text2) => {
+        if (text2.length < minlength)
+          return l("shared.textTooShortError", { minlength: minTextlength });
+        else if (text2.length > maxlength)
+          return l("shared.textTooLongError", { maxlength: maxTextlength });
+        else
+          return validate?.(text2) ?? true;
+      },
+      className: clsx("w-full", inputClassName),
+      inputClassName: "w-full input-sm",
+      placeholder,
+      disabled
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: "btn btn-xs btn-error btn-square btn-outline",
+      onClick: () => {
+        onChange(value.filter((_, i) => i !== idx));
+      }
+    },
+    /* @__PURE__ */ React.createElement(BiTrash, null)
+  )))))), /* @__PURE__ */ React.createElement("div", { className: "bg-base-content/20 my-5 h-[0.5px]" }), value.length <= maxTextlength ? /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: "btn btn-outline w-full",
+      onClick: () => {
+        onChange([...value, ""]);
+      }
+    },
+    "+ New"
+  ) : null));
+};
+Field.TextList = TextList;
+const Tags = ({
+  label,
+  desc,
+  labelClassName,
+  className,
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  transform = (v) => v,
+  minlength = 0,
+  maxlength = 50,
+  minTextlength = 2,
+  maxTextlength = 10,
+  validate,
+  inputClassName
+}) => {
+  const { l } = usePage();
+  const [inputVisible, setInputVisible] = useState(false);
+  const [tag, setTag] = useState("");
+  const addTag = () => {
+    if (!tag.length)
+      return;
+    onChange([...value, tag]);
+    setInputVisible(false);
+    setTag("");
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable: !minlength, label, desc }) : null, /* @__PURE__ */ React.createElement("div", { className: "border-base-content/20 flex w-full flex-wrap items-center gap-1 rounded-md border p-2" }, value.map((val, idx) => /* @__PURE__ */ React.createElement("span", { className: "badge badge-outline items-center rounded-full text-xs", key: idx }, /* @__PURE__ */ React.createElement("div", { className: "text-xs italic" }, "#"), val, /* @__PURE__ */ React.createElement(
+    BiX,
+    {
+      className: "ml-1 cursor-pointer opacity-50 duration-200 hover:opacity-100",
+      onClick: () => {
+        if (!disabled)
+          onChange(value.filter((v, i) => i !== idx));
+      }
+    }
+  ))), inputVisible ? /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      autoFocus: true,
+      icon: /* @__PURE__ */ React.createElement("div", { className: "text-xs italic" }, "#"),
+      className: "h-6 w-24 items-center justify-start rounded-full border px-4",
+      inputClassName: "focus:border-0 border-0 bg-transparent text-xs h-full w-full",
+      placeholder,
+      value: tag,
+      onChange: (value2) => {
+        if (value2.length > maxTextlength)
+          return;
+        setTag(transform(value2));
+      },
+      onBlur: addTag,
+      onPressEnter: addTag,
+      onPressEscape: () => {
+        setInputVisible(false);
+        setTag("");
+      },
+      validate: (text) => {
+        if (text.length < minTextlength)
+          return l("shared.textTooShortError", { minlength: minTextlength });
+        else if (text.length > maxTextlength)
+          return l("shared.textTooLongError", { maxlength: maxTextlength });
+        else
+          return validate?.(text) ?? true;
+      }
+    }
+  ) : !disabled ? /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "bg-success text-success-content flex items-center gap-2 rounded-full px-2 py-1 text-xs duration-200 hover:cursor-pointer hover:opacity-80",
+      onClick: () => {
+        setInputVisible(true);
+      }
+    },
+    /* @__PURE__ */ React.createElement(AiOutlinePlus, null),
+    "New Tag"
+  ) : null));
+};
+Field.Tags = Tags;
+const Date = ({
+  className,
+  labelClassName,
+  nullable,
+  label,
+  desc,
+  value,
+  min,
+  max,
+  onChange,
+  showTime,
+  dateClassName
+}) => {
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: showTime ? "datetime-local" : "date",
+      className: clsx(
+        "input validator text-xs duration-200 outline-none focus-within:outline-none focus:outline-none",
+        dateClassName
+      ),
+      min: min ? showTime ? dayjs(min).format("YYYY-MM-DDTHH:mm") : dayjs(min).format("YYYY-MM-DD") : void 0,
+      max: max ? showTime ? dayjs(max).format("YYYY-MM-DDTHH:mm") : dayjs(max).format("YYYY-MM-DD") : void 0,
+      value: value ? showTime ? dayjs(value).format("YYYY-MM-DDTHH:mm") : dayjs(value).format("YYYY-MM-DD") : "",
+      onChange: (e) => {
+        onChange(dayjs(e.target.value));
+      }
+    }
+  ));
+};
+Field.Date = Date;
+const DateRange = ({
+  className,
+  labelClassName,
+  nullable,
+  label,
+  desc,
+  from,
+  to,
+  min,
+  max,
+  onChangeFrom,
+  onChangeTo,
+  onChange,
+  showTime
+}) => {
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement("div", { className: "relative flex w-full flex-col items-start gap-2 pt-2 text-center md:flex-row md:items-center" }, /* @__PURE__ */ React.createElement("div", { className: "relative flex w-full flex-col items-start justify-start" }, /* @__PURE__ */ React.createElement("div", { className: "bg-base-100 absolute -top-2 left-2 z-10 px-2 text-xs font-light" }, "From"), /* @__PURE__ */ React.createElement(
+    Date,
+    {
+      className: "w-full",
+      dateClassName: "w-full",
+      showTime,
+      value: from,
+      max,
+      min,
+      onChange: (value) => {
+        onChangeFrom(value);
+      }
+    }
+  )), /* @__PURE__ */ React.createElement("div", { className: "relative flex w-full flex-col items-start gap-2 text-center md:flex-row md:items-center" }, /* @__PURE__ */ React.createElement("div", { className: "bg-base-100 absolute -top-2 left-2 z-10 px-2 text-xs font-light" }, "To"), /* @__PURE__ */ React.createElement(
+    Date,
+    {
+      className: "w-full",
+      dateClassName: "w-full",
+      showTime,
+      value: to,
+      max,
+      min,
+      onChange: (value) => {
+        onChangeTo(value);
+      }
+    }
+  ))));
+};
+Field.DateRange = DateRange;
+const Number = ({
+  label,
+  desc,
+  labelClassName,
+  className,
+  value,
+  onChange,
+  placeholder,
+  nullable,
+  disabled,
+  min,
+  max,
+  cache,
+  transform = (v) => v,
+  validate,
+  onPressEnter,
+  inputClassName,
+  unit,
+  formatter,
+  parser
+}) => {
+  const { l } = usePage();
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc, unit }) : null, /* @__PURE__ */ React.createElement(
+    Input.Number,
+    {
+      min,
+      max,
+      cacheKey: cache ? `${label}-${desc}-number` : void 0,
+      value,
+      nullable,
+      formatter,
+      parser,
+      placeholder,
+      onChange: (value2) => {
+        onChange(transform(value2 ?? 0));
+      },
+      disabled,
+      className: clsx("w-full", ""),
+      inputClassName: clsx(" w-full", inputClassName),
+      validate: (value2) => {
+        if (min !== void 0 && value2 < min)
+          return l("shared.numberTooSmallError", { min });
+        else if (max !== void 0 && value2 > max)
+          return l("shared.numberTooBigError", { max });
+        else
+          return validate?.(value2) ?? true;
+      },
+      onPressEnter
+    }
+  ));
+};
+Field.Number = Number;
+const DoubleNumber = ({
+  label,
+  desc,
+  labelClassName,
+  className,
+  value,
+  placeholder,
+  nullable,
+  disabled,
+  min,
+  max,
+  inputClassName,
+  cache,
+  separator,
+  onChange,
+  transform = (v) => v,
+  validate,
+  onPressEnter
+}) => {
+  const { l } = usePage();
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
+    Input.Number,
+    {
+      value: value ? value[0] : 0,
+      nullable,
+      cacheKey: cache ? `${label}-${desc}-number-[0]` : void 0,
+      placeholder,
+      onChange: (num) => {
+        if (num === null)
+          return;
+        onChange([transform(num), value ? value[1] : 0]);
+      },
+      disabled,
+      className: clsx("w-full", ""),
+      inputClassName: clsx("focus:border-primary w-full", inputClassName),
+      validate: (value2) => {
+        if (min && value2 < min[0])
+          return l("shared.numberTooSmallError", { min: min[0] });
+        else if (max && value2 > max[0])
+          return l("shared.numberTooBigError", { max: max[0] });
+        else
+          return validate?.(value2) ?? true;
+      },
+      onPressEnter
+    }
+  ), separator, /* @__PURE__ */ React.createElement(
+    Input.Number,
+    {
+      cacheKey: cache ? `${label}-${desc}-number-[1]` : void 0,
+      value: value ? value[1] : 0,
+      nullable,
+      placeholder,
+      onChange: (num) => {
+        onChange([value ? value[0] : 0, transform(num ?? 0)]);
+      },
+      disabled,
+      className: clsx("w-full", ""),
+      inputClassName: clsx("focus:border-primary w-full", inputClassName),
+      validate: (value2) => {
+        if (min && value2 < min[1])
+          return l("shared.numberTooSmallError", { min: min[1] });
+        else if (max && value2 > max[1])
+          return l("shared.numberTooBigError", { max: max[1] });
+        else
+          return validate?.(value2) ?? true;
+      },
+      onPressEnter
+    }
+  )));
+};
+Field.DoubleNumber = DoubleNumber;
+const Email = ({
+  label,
+  desc,
+  labelClassName,
+  className,
+  value,
+  onChange,
+  cache,
+  placeholder = "example@email.com",
+  nullable,
+  disabled,
+  minlength = nullable ? 0 : 2,
+  maxlength = 80,
+  transform = (v) => v,
+  validate,
+  onPressEnter,
+  inputClassName,
+  inputStyleType
+}) => {
+  const { l } = usePage();
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
+    Input.Email,
+    {
+      value: value ?? "",
+      cacheKey: cache ? `${label}-${desc}-email` : void 0,
+      nullable,
+      placeholder,
+      onChange: (value2) => {
+        onChange(transform(value2));
+      },
+      disabled,
+      className: clsx("w-full", ""),
+      inputClassName: clsx("focus:border-primary w-full", inputClassName),
+      inputStyleType,
+      validate: (text) => {
+        if (text.length < minlength)
+          return l("shared.textTooShortError", { minlength });
+        else if (text.length > maxlength)
+          return l("shared.textTooLongError", { maxlength });
+        else
+          return validate?.(text) ?? true;
+      },
+      onPressEnter
+    }
+  ));
+};
+Field.Email = Email;
+const Phone = ({
+  label,
+  desc,
+  labelClassName,
+  className,
+  value,
+  onChange,
+  placeholder,
+  nullable,
+  disabled,
+  maxlength = 13,
+  cache,
+  transform = (v) => formatPhone(v),
+  validate,
+  onPressEnter,
+  inputClassName
+}) => {
+  const { l } = usePage();
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      value: value ?? "",
+      cacheKey: cache ? `${label}-${desc}-phone` : void 0,
+      nullable,
+      placeholder,
+      onChange: (value2) => {
+        onChange(transform(value2));
+      },
+      disabled,
+      maxLength: maxlength,
+      className: clsx("w-full", ""),
+      inputClassName: clsx("focus:border-primary w-full", inputClassName),
+      validate: (text) => {
+        if (!isPhoneNumber(text))
+          return l("util.phoneInvalidError");
+        else
+          return validate?.(text) ?? true;
+      },
+      onPressEnter
+    }
+  ));
+};
+Field.Phone = Phone;
+const Password = ({
+  label,
+  desc,
+  labelClassName,
+  className,
+  value,
+  onChange,
+  cache,
+  confirmValue,
+  onChangeConfirm,
+  placeholder,
+  nullable,
+  disabled,
+  minlength = nullable ? 0 : 8,
+  maxlength = 20,
+  transform = (v) => v,
+  validate,
+  onPressEnter,
+  inputClassName,
+  showConfirm
+}) => {
+  const { l } = usePage();
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2" }, /* @__PURE__ */ React.createElement(
+    Input.Password,
+    {
+      cacheKey: cache ? `${label}-${desc}-password` : void 0,
+      value: value ?? "",
+      nullable,
+      placeholder: placeholder ?? l("user.password"),
+      onChange: (value2) => {
+        onChange(transform(value2));
+      },
+      disabled,
+      className: clsx("w-full", ""),
+      inputClassName: clsx("focus:border-primary w-full", inputClassName),
+      validate: (text) => {
+        if (text.length < minlength)
+          return l("shared.textTooShortError", { minlength });
+        else if (text.length > maxlength)
+          return l("shared.textTooLongError", { maxlength });
+        else
+          return validate?.(text) ?? true;
+      },
+      onPressEnter
+    }
+  ), showConfirm ? /* @__PURE__ */ React.createElement(
+    Input.Password,
+    {
+      value: confirmValue ?? "",
+      nullable,
+      placeholder: l("user.passwordConfirm"),
+      onChange: (value2) => onChangeConfirm?.(transform(value2)),
+      disabled,
+      className: clsx("w-full", ""),
+      inputClassName: clsx("focus:border-primary w-full", inputClassName),
+      validate: (text) => {
+        if (value && text !== value)
+          return l("shared.passwordNotMatchError");
+        else
+          return true;
+      },
+      onPressEnter
+    }
+  ) : null));
+};
+Field.Password = Password;
+const Parent = ({
+  label,
+  desc,
+  labelClassName,
+  selectClassName,
+  className,
+  nullable,
+  disabled,
+  initArgs,
+  sliceName,
+  value,
+  onChange,
+  onSearch,
+  sortOption,
+  renderOption,
+  renderSelected = renderOption
+}) => {
+  const refName = st.slice[sliceName].refName;
+  const [modelName, ModelName] = [lowerlize(refName), capitalize(refName)];
+  const storeUse = st.use;
+  const storeDo = st.do;
+  const storeGet = st.get;
+  const names = {
+    model: modelName,
+    modelList: `${modelName}List`,
+    modelListLoading: `${modelName}ListLoading`,
+    initModel: `init${ModelName}`
+  };
+  const namesOfSlice = {
+    modelList: sliceName.replace(names.model, names.modelList),
+    modelListLoading: sliceName.replace(names.model, names.modelListLoading),
+    initModel: sliceName.replace(names.model, names.initModel)
+  };
+  const modelList = storeUse[namesOfSlice.modelList]();
+  const modelListLoading = storeUse[namesOfSlice.modelListLoading]();
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      label,
+      desc,
+      labelClassName,
+      selectClassName,
+      value: value?.id,
+      searchable: true,
+      options: modelList.map((model) => model.id),
+      renderOption: (modelId) => {
+        const model = modelList.get(modelId);
+        if (!model)
+          return null;
+        return renderOption(model);
+      },
+      renderSelected: (modelId) => {
+        const model = modelList.get(modelId);
+        if (!model)
+          return null;
+        return renderSelected(model);
+      },
+      onChange: (modelId) => {
+        onChange(modelList.get(modelId));
+      },
+      onOpen: () => {
+        if (!disabled)
+          void storeDo[namesOfSlice.initModel](...initArgs ?? []);
+      },
+      onSearch: (text) => {
+        if (text) {
+          onSearch?.(text);
+        }
+      }
+    }
+  ));
+};
+Field.Parent = Parent;
+const ParentId = ({
+  label,
+  desc,
+  className,
+  selectClassName,
+  labelClassName,
+  nullable,
+  disabled,
+  initArgs,
+  sliceName,
+  value,
+  onChange,
+  onSearch,
+  sortOption,
+  renderOption,
+  renderSelected = renderOption
+}) => {
+  const refName = st.slice[sliceName].refName;
+  const [modelName, ModelName] = [lowerlize(refName), capitalize(refName)];
+  const storeUse = st.use;
+  const storeDo = st.do;
+  const storeGet = st.get;
+  const names = {
+    model: modelName,
+    modelList: `${modelName}List`,
+    modelListLoading: `${modelName}ListLoading`,
+    initModel: `init${ModelName}`
+  };
+  const namesOfSlice = {
+    modelList: sliceName.replace(names.model, names.modelList),
+    modelListLoading: sliceName.replace(names.model, names.modelListLoading),
+    initModel: sliceName.replace(names.model, names.initModel)
+  };
+  const modelList = storeUse[namesOfSlice.modelList]();
+  const modelListLoading = storeUse[namesOfSlice.modelListLoading]();
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      searchable: true,
+      desc,
+      label,
+      labelClassName,
+      selectClassName,
+      value,
+      options: modelList.map((model) => ({ label: model.id, value: model.id })),
+      renderOption: (renderId) => {
+        const model = modelList.get(renderId);
+        if (!model)
+          return null;
+        return renderOption?.(model);
+      },
+      renderSelected: (renderId) => {
+        const model = modelList.get(renderId);
+        if (!model)
+          return null;
+        return renderSelected?.(model);
+      },
+      onOpen: () => {
+        if (!disabled)
+          void storeDo[namesOfSlice.initModel](...initArgs ?? []);
+      },
+      onChange: (modelId) => {
+        onChange(modelId, modelList.get(modelId));
+      },
+      onSearch: (text) => {
+        if (text) {
+          onSearch?.(text);
+        }
+      }
+    }
+  ));
+};
+Field.ParentId = ParentId;
+const Children = ({
+  label,
+  desc,
+  labelClassName,
+  selectClassName,
+  className,
+  nullable,
+  disabled,
+  initArgs,
+  sliceName,
+  value,
+  onChange,
+  onSearch,
+  sortOption,
+  renderOption,
+  renderSelected = renderOption
+}) => {
+  const refName = st.slice[sliceName].refName;
+  const [modelName, ModelName] = [lowerlize(refName), capitalize(refName)];
+  const storeUse = st.use;
+  const storeDo = st.do;
+  const storeGet = st.get;
+  const names = {
+    model: modelName,
+    modelList: `${modelName}List`,
+    modelListLoading: `${modelName}ListLoading`,
+    initModel: `init${ModelName}`
+  };
+  const namesOfSlice = {
+    modelList: sliceName.replace(names.model, names.modelList),
+    modelListLoading: sliceName.replace(names.model, names.modelListLoading),
+    initModel: sliceName.replace(names.model, names.initModel)
+  };
+  const modelList = storeUse[namesOfSlice.modelList]();
+  const modelListLoading = storeUse[namesOfSlice.modelListLoading]();
+  useEffect(() => {
+    if (!disabled)
+      void storeDo[namesOfSlice.initModel](...initArgs ?? []);
+  }, []);
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      searchable: true,
+      desc,
+      label,
+      labelClassName,
+      selectClassName,
+      multiple: true,
+      value: value.map((model) => model.id),
+      options: modelList.map((model) => model.id),
+      renderOption: (modelId) => {
+        const model = modelList.get(modelId);
+        if (!model)
+          return null;
+        return renderOption(model);
+      },
+      renderSelected: (modelId) => {
+        const model = modelList.get(modelId);
+        if (!model)
+          return null;
+        return renderSelected(model);
+      },
+      onChange: (modelIds) => {
+        onChange(modelIds.map((id) => modelList.get(id)).filter((model) => model !== void 0));
+      },
+      onSearch: (text) => {
+        if (text) {
+          onSearch?.(text);
+        }
+      }
+    }
+  ));
+};
+Field.Children = Children;
+const ChildrenId = ({
+  label,
+  desc,
+  labelClassName,
+  className,
+  nullable,
+  disabled,
+  initArgs,
+  sliceName,
+  value,
+  onChange,
+  onSearch,
+  sortOption,
+  renderOption
+}) => {
+  const refName = st.slice[sliceName].refName;
+  const [modelName, ModelName] = [lowerlize(refName), capitalize(refName)];
+  const storeUse = st.use;
+  const storeDo = st.do;
+  const storeGet = st.get;
+  const names = {
+    model: modelName,
+    modelList: `${modelName}List`,
+    modelListLoading: `${modelName}ListLoading`,
+    initModel: `init${ModelName}`
+  };
+  const namesOfSlice = {
+    modelList: sliceName.replace(names.model, names.modelList),
+    modelListLoading: sliceName.replace(names.model, names.modelListLoading),
+    initModel: sliceName.replace(names.model, names.initModel)
+  };
+  const modelList = storeUse[namesOfSlice.modelList]();
+  const modelListLoading = storeUse[namesOfSlice.modelListLoading]();
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      searchable: true,
+      desc,
+      label,
+      labelClassName,
+      multiple: true,
+      value,
+      options: modelList.map((model) => ({ label: model.id, value: model.id })),
+      renderOption: (renderId) => {
+        const model = modelList.get(renderId);
+        if (!model)
+          return null;
+        return renderOption(model);
+      },
+      onChange: (modelIds) => {
+        onChange(modelIds);
+      },
+      onSearch: (text) => {
+        if (text) {
+          onSearch?.(text);
+        }
+      }
+    }
+  ));
+};
+Field.ChildrenId = ChildrenId;
+export {
+  Field
+};