@yimingliao/cms 0.0.104 → 0.0.106

package/dist/client/index.d.ts

@@ -407,6 +407,37 @@ declare function MainFields({ className, children, ...props }: ComponentProps<"d
 
 declare function SideFields({ className, children, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
+interface IndexFieldProps<T extends FormData> extends FormFieldController<T> {
+    existingIndexes?: number[];
+    availableIndex?: number;
+    isDisplay?: boolean;
+    id?: string;
+}
+declare function IndexField<T extends FormData = FormData>({ existingIndexes, availableIndex, // Min available index
+formData, setFormData, isLoading, isDisabled, isError, isDisplay, id, }: IndexFieldProps<T>): react_jsx_runtime.JSX.Element;
+
+interface SlugFieldProps<T extends FormData> extends FormFieldController<T> {
+    existingSlugs?: string[];
+    isDisplay?: boolean;
+    id?: string;
+}
+declare function SlugField<T extends FormData = FormData>({ existingSlugs, formData, setFormData, isLoading, isDisabled, isError, isDisplay, id, }: SlugFieldProps<T>): react_jsx_runtime.JSX.Element;
+
+type ControlMeta = {
+    existingIndexes?: number[];
+    availableIndex?: number;
+    existingSlugs?: string[];
+};
+interface ControlFieldsProps<T extends FormData> extends FormFieldController<T> {
+    fields: {
+        key: string;
+        label?: string;
+    }[];
+    controlMeta?: ControlMeta | undefined;
+    isDisplay?: boolean;
+}
+declare function ControlFields<T extends FormData>({ fields, controlMeta, formData, setFormData, isLoading, isDisabled, isDisplay, errors, ...props }: ControlFieldsProps<T>): react_jsx_runtime.JSX.Element | null;
+
 interface InputProps<T extends FormData = FormData> extends ComponentProps<"input">, FormFieldController<T> {
     inputGroupClassName?: string;
 }
@@ -511,4 +542,4 @@ declare const cn: (...inputs: ClassValue[]) => string;
 
 declare function useDeviceInfo(): DeviceInfo | null;
 
-export { AdminProvider, ArrayInput, Button, type ButtonProps, Checkbox, Field, FieldBody, FieldsContainer, Form, Input, type InputProps, MainFields, PageHeader, PasswordInput, ReturnButton, SearchInput, type ShowToastOption, SideFields, Textarea, cn, createAdminInitializer, createChangePasswordPage, createEmailUnverifiedPage, createForgotPasswordPage, createRequestInterceptor, createResetPasswordPage, createResponseInterceptor, createSignInPage, createSmartFetch, createUseCommand, createUseQuery, createVerifyEmailPage, handleToast, useAdmin, useDeviceInfo };
+export { AdminProvider, ArrayInput, Button, type ButtonProps, Checkbox, ControlFields, type ControlMeta, Field, FieldBody, FieldsContainer, Form, IndexField, Input, type InputProps, MainFields, PageHeader, PasswordInput, ReturnButton, SearchInput, type ShowToastOption, SideFields, SlugField, Textarea, cn, createAdminInitializer, createChangePasswordPage, createEmailUnverifiedPage, createForgotPasswordPage, createRequestInterceptor, createResetPasswordPage, createResponseInterceptor, createSignInPage, createSmartFetch, createUseCommand, createUseQuery, createVerifyEmailPage, handleToast, useAdmin, useDeviceInfo };

package/dist/client/index.js

@@ -1,4 +1,4 @@
-import { Button, Spinner, useParentPathname, cn, Separator, Label, InputGroup, InputGroupAddon, InputGroupInput, InputGroupButton, Textarea, useDeviceInfo, Card, CardHeader, CardTitle, CardContent, useCountdown, CardDescription, isConfirm } from '../chunk-FLKUBNE4.js';
+import { Button, Spinner, useParentPathname, cn, Separator, Label, InputGroup, InputGroupAddon, InputGroupInput, InputGroupButton, Textarea, Card, useDeviceInfo, CardHeader, CardTitle, CardContent, useCountdown, CardDescription, isConfirm } from '../chunk-FLKUBNE4.js';
 export { cn, useDeviceInfo } from '../chunk-FLKUBNE4.js';
 import { ensureArray } from '../chunk-OAENV763.js';
 import { toast } from 'sonner';
@@ -6,7 +6,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { createContext, useState, useContext, useEffect, createElement, useRef } from 'react';
 import { useTranslator } from 'intor/react';
-import { Undo2, Files, Asterisk, Eye, EyeOff, CircleX, CirclePlus, Search, Mail, Trash2, CopyCheck, CopyX, FileSymlink, FileX, FilePlus, FilePen, File, FileStack, FolderSearch, Lock, FolderCog, FileSpreadsheet } from 'lucide-react';
+import { Undo2, Files, Asterisk, Eye, EyeOff, CircleX, CirclePlus, Search, Mail, Trash2, CopyCheck, CopyX, FileSymlink, FileX, FilePlus, FilePen, File, FileStack, FolderSearch, Lock, FolderCog, FileSpreadsheet, Archive, Binary, MapPinCheckInside, Star, House, CircleMinus } from 'lucide-react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import Link from 'next/link';
 
@@ -703,6 +703,105 @@ function SideFields({
     }
   );
 }
+function ExpandBar({ isExpand }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "w-full",
+        "flex-center gap-1",
+        "opacity-50 group-hover:opacity-100",
+        "transition"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Separator, { className: "my-3 flex-1" }),
+        !isExpand ? /* @__PURE__ */ jsx(CirclePlus, { className: "text-base-content size-5 min-w-5" }) : /* @__PURE__ */ jsx(CircleMinus, { className: "text-base-content size-5 min-w-5" }),
+        /* @__PURE__ */ jsx(Separator, { className: "my-3 flex-1" })
+      ]
+    }
+  );
+}
+var COLLAPSED_HEIGHT = 48;
+function ExpandableListContent({
+  item,
+  items,
+  isExpand,
+  isDisabled,
+  isUnique,
+  onOverflowChange,
+  children
+}) {
+  const containerRef = useRef(null);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const height = el.scrollHeight;
+    onOverflowChange?.(height > COLLAPSED_HEIGHT);
+    if (isDisabled) {
+      el.style.maxHeight = "0px";
+      return;
+    }
+    el.style.maxHeight = isExpand ? `${height}px` : `${COLLAPSED_HEIGHT}px`;
+  }, [isExpand, isDisabled, items.length, children, onOverflowChange]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("overflow-hidden", "flex flex-wrap gap-1", "duration-150"),
+      children: [
+        children,
+        items.map((eachItem, idx) => {
+          const matched = isUnique && eachItem === item;
+          return /* @__PURE__ */ jsxs("span", { children: [
+            /* @__PURE__ */ jsx("span", { className: cn(matched && "text-error"), children: eachItem }),
+            idx !== items.length - 1 && ","
+          ] }, `${eachItem}-${idx}`);
+        })
+      ]
+    }
+  );
+}
+function ExpandableList({
+  item,
+  items = [],
+  isDisabled,
+  isUnique
+}) {
+  const [isExpand, setIsExpand] = useState(false);
+  const [isListOverFlow, setIsListOverFlow] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        if (!isListOverFlow) return;
+        setIsExpand((prev) => !prev);
+      },
+      className: cn(
+        "group flex w-full flex-col gap-1 text-xs text-gray-400",
+        !isListOverFlow && "pointer-events-none"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          ExpandableListContent,
+          {
+            item,
+            items,
+            isExpand,
+            isDisabled,
+            isUnique,
+            onOverflowChange: setIsListOverFlow,
+            children: [
+              /* @__PURE__ */ jsx(Archive, { className: "size-4" }),
+              /* @__PURE__ */ jsx("span", { children: ":" })
+            ]
+          }
+        ),
+        isListOverFlow && /* @__PURE__ */ jsx(ExpandBar, { isExpand })
+      ]
+    }
+  );
+}
 function Input({
   // form context
   fieldName,
@@ -797,7 +896,7 @@ function Checkbox({
               isChecked && "translate-x-6",
               isLoading && "opacity-0",
               !isDisabled && "group-hover:scale-95 group-active:scale-90",
-              "transition"
+              "duration-200"
             )
           }
         ),
@@ -983,6 +1082,433 @@ function SearchInput({
     }
   ) });
 }
+function IndexField({
+  existingIndexes,
+  availableIndex = 1,
+  // Min available index
+  // form context
+  formData,
+  setFormData,
+  // ui states
+  isLoading = false,
+  isDisabled = false,
+  isError = false,
+  isDisplay = false,
+  // base
+  id
+}) {
+  isDisabled = isDisabled || isLoading || isDisplay;
+  const index = formData?.["index"];
+  const isIndexActive = !!formData?.["isIndexActive"];
+  const toggleCheckbox = () => {
+    if (!setFormData) return;
+    setFormData((p) => ({ ...p, index: availableIndex }));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          id: isIndexActive ? void 0 : id,
+          fieldName: "isIndexActive",
+          formData,
+          setFormData,
+          isLoading,
+          isDisabled,
+          onClick: toggleCheckbox
+        }
+      ),
+      !isDisplay ? /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: isIndexActive ? id : void 0,
+          fieldName: "index",
+          value: index || 1,
+          setFormData,
+          type: "number",
+          min: 1,
+          required: isIndexActive,
+          isDisabled: !isIndexActive || isDisabled,
+          className: cn(!isIndexActive && "text-transparent"),
+          inputGroupClassName: cn(
+            isIndexActive ? "opacity-100" : "opacity-50 cursor-not-allowed"
+          ),
+          isError
+        }
+      ) : /* @__PURE__ */ jsx(
+        FieldBody,
+        {
+          isEmpty: !isIndexActive,
+          backgroundClassName: "!bg-base-200",
+          children: index
+        }
+      )
+    ] }),
+    !isDisplay && /* @__PURE__ */ jsx("div", { className: "mx-2", children: /* @__PURE__ */ jsx(
+      ExpandableList,
+      {
+        isDisabled: !isIndexActive,
+        item: index,
+        items: ensureArray(existingIndexes)
+      }
+    ) })
+  ] });
+}
+function SlugField({
+  existingSlugs,
+  // form context
+  formData,
+  setFormData,
+  // ui states
+  isLoading = false,
+  isDisabled = false,
+  isError = false,
+  isDisplay = false,
+  // base
+  id
+}) {
+  isDisabled = isDisabled || isLoading || isDisplay;
+  const slug = formData?.["slug"] || "";
+  const isSlugActive = !!formData?.["isSlugActive"];
+  const isUnavailable = !!existingSlugs?.includes(slug);
+  const toggleCheckbox = () => {
+    if (!setFormData) return;
+    setFormData((p) => ({ ...p, slug: null }));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          id: isSlugActive ? void 0 : id,
+          fieldName: "isSlugActive",
+          formData,
+          setFormData,
+          isLoading,
+          isDisabled,
+          onClick: toggleCheckbox,
+          className: "mt-2"
+        }
+      ),
+      !isDisplay ? /* @__PURE__ */ jsx(
+        Textarea2,
+        {
+          id: isSlugActive ? id : void 0,
+          fieldName: "slug",
+          value: slug,
+          setFormData,
+          required: isSlugActive,
+          isDisabled: !isSlugActive || isDisabled,
+          onKeyDown: (e) => {
+            if (e.key === "Enter") return e.preventDefault();
+          },
+          className: cn(
+            "resize-none break-all",
+            !isSlugActive && "text-transparent"
+          ),
+          isError: isUnavailable || isError
+        }
+      ) : /* @__PURE__ */ jsx(FieldBody, { isEmpty: !isSlugActive, backgroundClassName: "!bg-base-200", children: slug })
+    ] }),
+    !isDisplay && /* @__PURE__ */ jsx("div", { className: "mx-2", children: /* @__PURE__ */ jsx(
+      ExpandableList,
+      {
+        isDisabled: !isSlugActive,
+        isUnique: true,
+        item: slug,
+        items: ensureArray(existingSlugs)
+      }
+    ) })
+  ] });
+}
+function ControlFieldsDisplay({
+  fields,
+  // form context
+  formData,
+  // ui states
+  isLoading = false
+}) {
+  const { t } = useTranslator();
+  if (!formData) return null;
+  const notBuiltInFields = fields.filter(
+    ({ key }) => !BUILT_IN_FIELDS.some((b) => b.key == key)
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    fields.find((f) => f.key === "isActive") && /* @__PURE__ */ jsx(
+      Field,
+      {
+        label: /* @__PURE__ */ jsxs("span", { className: "flex-center gap-2", children: [
+          /* @__PURE__ */ jsx(Eye, { className: "size-5" }),
+          t("ui.field.control-fields.is-active.text")
+        ] }),
+        children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            fieldName: "isActive",
+            formData,
+            isLoading,
+            isDisplay: true
+          }
+        )
+      }
+    ),
+    fields.find((f) => f.key === "index") && /* @__PURE__ */ jsx(
+      Field,
+      {
+        label: /* @__PURE__ */ jsxs("span", { className: "flex-center gap-2", children: [
+          /* @__PURE__ */ jsx(Binary, { className: "size-5" }),
+          t("ui.field.control-fields.index.text")
+        ] }),
+        children: /* @__PURE__ */ jsx(IndexField, { formData, isLoading, isDisplay: true })
+      }
+    ),
+    fields.find((f) => f.key === "slug") && /* @__PURE__ */ jsx(
+      Field,
+      {
+        label: /* @__PURE__ */ jsxs("span", { className: "flex-center gap-2", children: [
+          /* @__PURE__ */ jsx(MapPinCheckInside, { className: "size-5" }),
+          t("ui.field.control-fields.slug.text")
+        ] }),
+        children: /* @__PURE__ */ jsx(SlugField, { formData, isLoading, isDisplay: true })
+      }
+    ),
+    fields.find((f) => f.key === "isFeatured") && /* @__PURE__ */ jsx(
+      Field,
+      {
+        label: /* @__PURE__ */ jsxs("span", { className: "flex-center gap-2", children: [
+          /* @__PURE__ */ jsx(Star, { className: "size-5" }),
+          t("ui.field.control-fields.is-featured.text")
+        ] }),
+        children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            fieldName: "isFeatured",
+            formData,
+            isLoading,
+            isDisplay: true
+          }
+        )
+      }
+    ),
+    fields.find((f) => f.key === "isShownOnHome") && /* @__PURE__ */ jsx(
+      Field,
+      {
+        label: /* @__PURE__ */ jsxs("span", { className: "flex-center gap-2", children: [
+          /* @__PURE__ */ jsx(House, { className: "size-5" }),
+          t("ui.field.control-fields.is-shown-on-home.text")
+        ] }),
+        children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            fieldName: "isShownOnHome",
+            formData,
+            isLoading,
+            isDisplay: true
+          }
+        )
+      }
+    ),
+    notBuiltInFields.map(({ key, label }) => {
+      return /* @__PURE__ */ jsx(Field, { label, children: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          fieldName: key,
+          formData,
+          isLoading,
+          isDisplay: true
+        }
+      ) }, key);
+    })
+  ] });
+}
+function ControlFieldsInput({
+  fields = [],
+  // meta
+  controlMeta = {},
+  // form context
+  formData,
+  setFormData,
+  // ui states
+  isLoading = false,
+  isDisabled = false,
+  errors
+}) {
+  const { t } = useTranslator();
+  if (!(formData && setFormData)) return null;
+  const {
+    existingIndexes = [],
+    availableIndex = 1,
+    existingSlugs = []
+  } = controlMeta;
+  const notBuiltInFields = fields.filter(
+    ({ key }) => !BUILT_IN_FIELDS.some((b) => b.key == key)
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    fields.find((f) => f.key === "isActive") && /* @__PURE__ */ jsx(
+      Field,
+      {
+        htmlFor: "isActive",
+        label: /* @__PURE__ */ jsxs("span", { className: "flex-center gap-2", children: [
+          formData["isActive"] ? /* @__PURE__ */ jsx(Eye, { className: "size-5" }) : /* @__PURE__ */ jsx(EyeOff, { className: "size-5" }),
+          t("ui.field.control-fields.is-active.text")
+        ] }),
+        children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            id: "isActive",
+            fieldName: "isActive",
+            formData,
+            setFormData,
+            isLoading,
+            isDisabled
+          }
+        )
+      }
+    ),
+    fields.find((f) => f.key === "index") && /* @__PURE__ */ jsx(
+      Field,
+      {
+        htmlFor: "index",
+        label: /* @__PURE__ */ jsxs("span", { className: "flex-center gap-2", children: [
+          /* @__PURE__ */ jsx(Binary, { className: "size-5" }),
+          t("ui.field.control-fields.index.text")
+        ] }),
+        children: /* @__PURE__ */ jsx(
+          IndexField,
+          {
+            id: "index",
+            formData,
+            setFormData,
+            isLoading,
+            isDisabled,
+            existingIndexes,
+            availableIndex,
+            isError: errors?.includes("index")
+          }
+        )
+      }
+    ),
+    fields.find((f) => f.key === "slug") && /* @__PURE__ */ jsx(
+      Field,
+      {
+        htmlFor: "slug",
+        label: /* @__PURE__ */ jsxs("span", { className: "flex-center gap-2", children: [
+          /* @__PURE__ */ jsx(MapPinCheckInside, { className: "size-5" }),
+          t("ui.field.control-fields.slug.text")
+        ] }),
+        children: /* @__PURE__ */ jsx(
+          SlugField,
+          {
+            id: "slug",
+            formData,
+            setFormData,
+            isLoading,
+            isDisabled,
+            existingSlugs,
+            isError: errors?.includes("slug")
+          }
+        )
+      }
+    ),
+    fields.find((f) => f.key === "isFeatured") && /* @__PURE__ */ jsx(
+      Field,
+      {
+        htmlFor: "isFeatured",
+        label: /* @__PURE__ */ jsxs("span", { className: "flex-center gap-2", children: [
+          /* @__PURE__ */ jsx(Star, { className: "size-5" }),
+          t("ui.field.control-fields.is-featured.text")
+        ] }),
+        children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            id: "isFeatured",
+            fieldName: "isFeatured",
+            formData,
+            setFormData,
+            isLoading,
+            isDisabled
+          }
+        )
+      }
+    ),
+    fields.find((f) => f.key === "isShownOnHome") && /* @__PURE__ */ jsx(
+      Field,
+      {
+        htmlFor: "isShownOnHome",
+        label: /* @__PURE__ */ jsxs("span", { className: "flex-center gap-2", children: [
+          /* @__PURE__ */ jsx(House, { className: "size-5" }),
+          t("ui.field.control-fields.is-shown-on-home.text")
+        ] }),
+        children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            id: "isShownOnHome",
+            fieldName: "isShownOnHome",
+            formData,
+            setFormData,
+            isLoading,
+            isDisabled
+          }
+        )
+      }
+    ),
+    notBuiltInFields.map(({ key, label }) => {
+      return /* @__PURE__ */ jsx(Field, { htmlFor: key, label, children: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          id: key,
+          fieldName: key,
+          formData,
+          setFormData,
+          isLoading,
+          isDisabled
+        }
+      ) }, key);
+    })
+  ] });
+}
+var BUILT_IN_FIELDS = [
+  { key: "isActive" },
+  { key: "index" },
+  { key: "slug" },
+  { key: "isFeatured" },
+  { key: "isShownOnHome" }
+];
+function ControlFields({
+  fields = [],
+  // meta
+  controlMeta,
+  // form context
+  formData,
+  setFormData,
+  // ui states
+  isLoading = false,
+  isDisabled = false,
+  isDisplay = false,
+  errors,
+  ...props
+}) {
+  if (fields.length === 0) return null;
+  return /* @__PURE__ */ jsx(Card, { className: cn("flex flex-col gap-6", "bg-base-100 p-4"), ...props, children: !isDisplay ? /* @__PURE__ */ jsx(
+    ControlFieldsInput,
+    {
+      fields,
+      formData,
+      setFormData,
+      controlMeta,
+      isLoading,
+      isDisabled,
+      errors
+    }
+  ) : /* @__PURE__ */ jsx(
+    ControlFieldsDisplay,
+    {
+      fields,
+      formData,
+      isLoading
+    }
+  ) });
+}
 
 // src/constants/keys/auth.ts
 var AUTH_KEYS = {
@@ -1460,4 +1986,4 @@ function createChangePasswordPage({
   };
 }
 
-export { AdminProvider, ArrayInput, Button2 as Button, Checkbox, Field, FieldBody, FieldsContainer, Form, Input, MainFields, PageHeader, PasswordInput, ReturnButton, SearchInput, SideFields, Textarea2 as Textarea, createAdminInitializer, createChangePasswordPage, createEmailUnverifiedPage, createForgotPasswordPage, createRequestInterceptor, createResetPasswordPage, createResponseInterceptor, createSignInPage, createSmartFetch, createUseCommand, createUseQuery, createVerifyEmailPage, handleToast, useAdmin };
+export { AdminProvider, ArrayInput, Button2 as Button, Checkbox, ControlFields, Field, FieldBody, FieldsContainer, Form, IndexField, Input, MainFields, PageHeader, PasswordInput, ReturnButton, SearchInput, SideFields, SlugField, Textarea2 as Textarea, createAdminInitializer, createChangePasswordPage, createEmailUnverifiedPage, createForgotPasswordPage, createRequestInterceptor, createResetPasswordPage, createResponseInterceptor, createSignInPage, createSmartFetch, createUseCommand, createUseQuery, createVerifyEmailPage, handleToast, useAdmin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yimingliao/cms",
-  "version": "0.0.104",
+  "version": "0.0.106",
   "author": "Yiming Liao",
   "license": "MIT",
   "type": "module",