@nocobase/portal-template-default 1.0.4 → 1.0.6

package/src/components/data-table/data-table-filter.tsx

@@ -1,14 +1,13 @@
 "use client";
 
-import { useState, useEffect, useMemo } from "react";
+import { lazy, Suspense, useState, useEffect, useMemo } from "react";
 import { useTranslate, type CrudOperators } from "@refinedev/core";
 import type { Column, Table as ReactTable } from "@tanstack/react-table";
 import type { DateRange } from "react-day-picker";
-import { Check, ChevronsUpDown, ListFilter, X } from "lucide-react";
+import { ChevronsUpDown, ListFilter, X } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Badge } from "@/components/ui/badge";
 import {
   Popover,
   PopoverContent,
@@ -22,9 +21,15 @@ import {
   CommandList,
 } from "@/components/ui/command";
 import { Separator } from "@/components/ui/separator";
-import { Calendar } from "@/components/ui/calendar";
+import { LoadingState } from "@/components/app-shell/loading-state";
 import { cn } from "@/lib/utils";
 
+const Calendar = lazy(() =>
+  import("@/components/ui/calendar").then((module) => ({
+    default: module.Calendar,
+  }))
+);
+
 export type DataTableFilterDropdownProps<TData> = {
   column: Column<TData>;
   contentClassName?: string;
@@ -54,22 +59,29 @@ export function DataTableFilterDropdown<TData>({
             variant="ghost"
             size="icon"
             className={cn(
-              "data-[state=open]:bg-accent",
               "w-5 h-5",
               {
-                "text-primary": isFiltered,
-                "text-muted-foreground": !isFiltered,
+                "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 data-[state=open]:bg-primary/90 data-[state=open]:text-primary-foreground":
+                  isFiltered,
+                "text-muted-foreground data-[state=open]:bg-accent":
+                  !isFiltered,
               },
               triggerClassName
             )}
           />
         }
       >
-        <ListFilter className={cn("!h-3", "!w-3")} />
+        <ListFilter
+          className={cn("!h-3", "!w-3", isFiltered && "stroke-[2.5]")}
+        />
       </PopoverTrigger>
       <PopoverContent
         align="start"
-        className={cn("w-full", "shadow-sm", contentClassName)}
+        className={cn(
+          "w-80 max-w-[calc(100vw-2rem)]",
+          "shadow-sm",
+          contentClassName
+        )}
       >
         {children({ isOpen, setIsOpen })}
       </PopoverContent>
@@ -287,12 +299,10 @@ export function DataTableFilterCombobox<TData>({
           }
         };
 
-        const handleRemove = (optionValue: string) => {
-          if (multiple) {
-            const newValues = currentValues.filter((v) => v !== optionValue);
-            onChange(newValues);
-          }
-        };
+        const selectedLabels = currentValues.map((value) => {
+          const option = options.find((item) => item.value === value);
+          return option?.label ?? value;
+        });
 
         const getDisplayText = () => {
           if (currentValues.length === 0) {
@@ -302,7 +312,7 @@ export function DataTableFilterCombobox<TData>({
           }
 
           if (multiple) {
-            return `${currentValues.length} selected`;
+            return selectedLabels.join(", ");
           }
 
           const selectedOption = options.find(
@@ -311,13 +321,6 @@ export function DataTableFilterCombobox<TData>({
           return selectedOption ? selectedOption.label : currentValues[0];
         };
 
-        const getSelectedLabels = () => {
-          return currentValues.map((val) => {
-            const option = options.find((opt) => opt.value === val);
-            return { label: option ? option.label : val, value: val };
-          });
-        };
-
         return (
           <Popover open={isOpen} onOpenChange={setIsOpen}>
             <PopoverTrigger
@@ -328,93 +331,37 @@ export function DataTableFilterCombobox<TData>({
                   aria-expanded={isOpen}
                   className={cn(
                     "w-full",
-                    "min-w-48",
-                    "max-w-80",
+                    "min-w-0",
                     "justify-start",
-                    "h-auto",
-                    "min-h-9"
+                    "h-8"
                   )}
                 />
               }
             >
-                <div className={cn("flex", "gap-2", "w-full")}>
-                  {multiple && currentValues.length > 0 ? (
-                    <div className={cn("flex", "flex-wrap", "gap-1", "flex-1")}>
-                      {getSelectedLabels()
-                        .slice(0, 3)
-                        .map(({ label, value: val }) => (
-                          <Badge
-                            key={val}
-                            variant="outline"
-                            className={cn(
-                              "inline-flex",
-                              "items-center",
-                              "gap-0",
-                              "h-4",
-                              "pr-0.5",
-                              "rounded-sm"
-                            )}
-                          >
-                            <span className={cn("text-[10px]", "leading-4")}>
-                              {label}
-                            </span>
-                            <span
-                              className={cn(
-                                "inline-flex",
-                                "items-center",
-                                "justify-center",
-                                "p-0",
-                                "w-4",
-                                "h-full",
-                                "text-muted-foreground",
-                                "hover:text-destructive",
-                                "rounded-sm",
-                                "cursor-pointer",
-                                "transition-colors"
-                              )}
-                              onClick={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                handleRemove(val);
-                              }}
-                            >
-                              <X className={cn("!h-2", "!w-2")} />
-                            </span>
-                          </Badge>
-                        ))}
-                      {currentValues.length > 3 && (
-                        <span
-                          className={cn(
-                            "text-xs",
-                            "text-muted-foreground",
-                            "px-1"
-                          )}
-                        >
-                          +{currentValues.length - 3} more
-                        </span>
-                      )}
-                    </div>
-                  ) : (
-                    <span
-                      className={cn(
-                        "truncate",
-                        "flex-1",
-                        "text-start",
-                        "text-xs",
-                        currentValues.length === 0 && "text-muted-foreground"
-                      )}
-                    >
-                      {getDisplayText()}
-                    </span>
+              <div className={cn("flex", "min-w-0", "w-full", "gap-2")}>
+                <span
+                  className={cn(
+                    "min-w-0",
+                    "truncate",
+                    "flex-1",
+                    "text-start",
+                    "text-xs",
+                    currentValues.length === 0 && "text-muted-foreground"
                   )}
+                >
+                  {getDisplayText()}
+                </span>
 
-                  <ChevronsUpDown
-                    className={cn("h-4", "w-4", "shrink-0", "opacity-50")}
-                  />
-                </div>
+                <ChevronsUpDown
+                  className={cn("h-4", "w-4", "shrink-0", "opacity-50")}
+                />
+              </div>
             </PopoverTrigger>
-            <PopoverContent className={cn("w-[200px]", "p-0")} align="start">
-              <Command items={options}>
+            <PopoverContent
+              className="w-(--anchor-width) min-w-56 p-0"
+              align="start"
+            >
+              <Command>
                 <CommandInput
                   placeholder={t("table.filter.combobox.search", "Search...")}
                 />
@@ -426,25 +373,16 @@ export function DataTableFilterCombobox<TData>({
                     )}
                 </CommandEmpty>
                 <CommandList>
-                  {(option: { label: string; value: string }) => (
+                  {options.map((option) => (
                     <CommandItem
                       key={option.value}
-                      value={option}
-                      onClick={() => handleSelect(option.value)}
+                      value={`${option.label} ${option.value}`}
+                      data-checked={currentValues.includes(option.value)}
+                      onSelect={() => handleSelect(option.value)}
                     >
                       {option.label}
-                      <Check
-                        className={cn(
-                          "ml-auto",
-                          "h-4",
-                          "w-4",
-                          currentValues.includes(option.value)
-                            ? "opacity-100"
-                            : "opacity-0"
-                        )}
-                      />
                     </CommandItem>
-                  )}
+                  ))}
                 </CommandList>
               </Command>
             </PopoverContent>
@@ -518,13 +456,15 @@ export function DataTableFilterDropdownDateSinglePicker<TData>({
               }
             }}
           >
-            <Calendar
-              mode="single"
-              selected={filterValue}
-              onSelect={(date) => {
-                setFilterValue(date);
-              }}
-            />
+            <Suspense fallback={<LoadingState className="min-h-72" />}>
+              <Calendar
+                mode="single"
+                selected={filterValue}
+                onSelect={(date) => {
+                  setFilterValue(date);
+                }}
+              />
+            </Suspense>
 
             <div className={cn("w-full")}>
               <Separator />
@@ -626,17 +566,19 @@ export function DataTableFilterDropdownDateRangePicker<TData>({
               }
             }}
           >
-            <Calendar
-              mode="range"
-              numberOfMonths={2}
-              selected={filterValue}
-              onSelect={(date) => {
-                setFilterValue({
-                  from: date?.from,
-                  to: date?.to,
-                });
-              }}
-            />
+            <Suspense fallback={<LoadingState className="min-h-72" />}>
+              <Calendar
+                mode="range"
+                numberOfMonths={2}
+                selected={filterValue}
+                onSelect={(date) => {
+                  setFilterValue({
+                    from: date?.from,
+                    to: date?.to,
+                  });
+                }}
+              />
+            </Suspense>
 
             <div className={cn("w-full")}>
               <Separator />
@@ -680,6 +622,9 @@ export function DataTableFilterInput<TData>({
   defaultOperator: defaultOperatorFromProps,
   renderInput,
 }: DataTableFilterInputProps<TData>) {
+  const hasOperatorSelect = Boolean(
+    operatorsFromProps && operatorsFromProps.length > 1
+  );
   const [filterValue, setFilterValue] = useState(
     (columnFromProps.getFilterValue() as string | string[]) || ""
   );
@@ -720,7 +665,14 @@ export function DataTableFilterInput<TData>({
   };
 
   return (
-    <DataTableFilterDropdown column={columnFromProps}>
+    <DataTableFilterDropdown
+      column={columnFromProps}
+      contentClassName={
+        hasOperatorSelect
+          ? "w-[30rem] max-w-[calc(100vw-2rem)]"
+          : undefined
+      }
+    >
       {({ setIsOpen }) => {
         return (
           <div
@@ -739,9 +691,15 @@ export function DataTableFilterInput<TData>({
             }}
           >
             <div
-              className={cn("grid", "grid-cols-1", "md:grid-cols-2", "gap-2")}
+              className={cn(
+                "grid",
+                "grid-cols-1",
+                "w-full",
+                "gap-2",
+                hasOperatorSelect && "md:grid-cols-2"
+              )}
             >
-              {operatorsFromProps && operatorsFromProps.length > 1 && (
+              {hasOperatorSelect && (
                 <DataTableFilterOperatorSelect
                   value={operator}
                   operators={operatorsFromProps}
@@ -791,11 +749,11 @@ const CRUD_OPERATOR_LABELS: Record<
   },
   in: {
     i18nKey: "table.filter.operator.in",
-    defaultLabel: "Includes in an array",
+    defaultLabel: "Includes",
   },
   nin: {
     i18nKey: "table.filter.operator.nin",
-    defaultLabel: "Not includes in an array",
+    defaultLabel: "Excludes",
   },
   ina: {
     i18nKey: "table.filter.operator.ina",
@@ -948,31 +906,27 @@ export function DataTableFilterOperatorSelect({
           className={cn("ml-2", "h-4", "w-4", "shrink-0", "opacity-50")}
         />
       </PopoverTrigger>
-      <PopoverContent className={cn("p-0", contentClassName)} keepMounted>
-        <Command items={operatorOptions}>
+      <PopoverContent
+        className={cn("w-(--anchor-width) p-0", contentClassName)}
+        keepMounted
+      >
+        <Command>
           <CommandInput placeholder={placeholderText} />
           <CommandEmpty>{noResultsText}</CommandEmpty>
           <CommandList>
-            {(option: { value: CrudOperators; label: string }) => (
+            {operatorOptions.map((option) => (
               <CommandItem
                 key={option.value}
-                value={option}
-                onClick={() => {
+                value={`${option.label} ${option.value}`}
+                data-checked={value === option.value}
+                onSelect={() => {
                   onValueChange(option.value);
                   setOpen(false);
                 }}
               >
-                <Check
-                  className={cn(
-                    "mr-2",
-                    "h-4",
-                    "w-4",
-                    value === option.value ? "opacity-100" : "opacity-0"
-                  )}
-                />
                 {option.label}
               </CommandItem>
-            )}
+            ))}
           </CommandList>
         </Command>
       </PopoverContent>

package/src/components/demo/prompt-output.tsx

@@ -0,0 +1,71 @@
+import { useState, type ReactNode } from "react";
+import { Check, Copy } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+export function PromptOutput({
+  className,
+  copiedLabel = "Copied",
+  copyErrorLabel = "Clipboard access failed. Select the prompt and copy it manually.",
+  copyLabel = "Copy prompt",
+  description,
+  prompt,
+  promptClassName,
+  title = "Generated prompt",
+}: {
+  className?: string;
+  copiedLabel?: ReactNode;
+  copyErrorLabel?: ReactNode;
+  copyLabel?: ReactNode;
+  description: ReactNode;
+  prompt: string;
+  promptClassName?: string;
+  title?: ReactNode;
+}) {
+  const [copied, setCopied] = useState(false);
+  const [copyError, setCopyError] = useState(false);
+
+  return (
+    <Card className={cn("min-w-0 gap-0 overflow-hidden py-0", className)}>
+      <div className="flex items-center justify-between gap-3 border-b px-4 py-3">
+        <div className="min-w-0">
+          <div className="text-sm font-medium">{title}</div>
+          <div className="text-xs text-muted-foreground">{description}</div>
+        </div>
+        <Button
+          type="button"
+          size="sm"
+          className="shrink-0"
+          onClick={async () => {
+            try {
+              await navigator.clipboard.writeText(prompt);
+              setCopyError(false);
+              setCopied(true);
+              window.setTimeout(() => setCopied(false), 1500);
+            } catch {
+              setCopyError(true);
+            }
+          }}
+        >
+          {copied ? <Check /> : <Copy />}
+          {copied ? copiedLabel : copyLabel}
+        </Button>
+      </div>
+      {copyError ? (
+        <p className="border-b px-4 py-2 text-xs text-destructive">
+          {copyErrorLabel}
+        </p>
+      ) : null}
+      <pre
+        className={cn(
+          "max-h-[560px] overflow-auto whitespace-pre-wrap bg-muted/25 p-5 font-mono text-xs leading-5 text-muted-foreground",
+          promptClassName
+        )}
+      >
+        {prompt}
+      </pre>
+    </Card>
+  );
+}

package/src/components/ui/alert-dialog.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
 

package/src/components/ui/attachment.tsx

@@ -0,0 +1,207 @@
+import * as React from "react"
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+const attachmentVariants = cva(
+  "group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-card text-card-foreground transition-colors focus-within:ring-1 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed",
+  {
+    variants: {
+      size: {
+        default:
+          "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2",
+        sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
+        xs: "gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1",
+      },
+      orientation: {
+        horizontal: "min-w-40 items-center",
+        vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30",
+      },
+    },
+  }
+)
+
+function Attachment({
+  className,
+  state = "done",
+  size = "default",
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof attachmentVariants> & {
+    state?: "idle" | "uploading" | "processing" | "error" | "done"
+  }) {
+  return (
+    <div
+      data-slot="attachment"
+      data-state={state}
+      data-size={size}
+      data-orientation={orientation}
+      className={cn(attachmentVariants({ size, orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+const attachmentMediaVariants = cva(
+  "relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5",
+  {
+    variants: {
+      variant: {
+        icon: "",
+        image:
+          "opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "icon",
+    },
+  }
+)
+
+function AttachmentMedia({
+  className,
+  variant = "icon",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof attachmentMediaVariants>) {
+  return (
+    <div
+      data-slot="attachment-media"
+      data-variant={variant}
+      className={cn(attachmentMediaVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AttachmentContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="attachment-content"
+      className={cn(
+        "max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AttachmentTitle({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="attachment-title"
+      className={cn(
+        "block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AttachmentDescription({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="attachment-description"
+      className={cn(
+        "mt-0.5 block min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive/80",
+        "max-w-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AttachmentActions({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="attachment-actions"
+      className={cn(
+        "relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AttachmentAction({
+  className,
+  variant,
+  size = "icon-xs",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot="attachment-action"
+      variant={variant ?? "ghost"}
+      size={size}
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function AttachmentTrigger({
+  className,
+  render,
+  type,
+  ...props
+}: useRender.ComponentProps<"button">) {
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        type: render ? type : (type ?? "button"),
+        className: cn("absolute inset-0 z-10 outline-none", className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "attachment-trigger",
+    },
+  })
+}
+
+function AttachmentGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="attachment-group"
+      className={cn(
+        "flex min-w-0 scroll-fade-x snap-x snap-mandatory scroll-px-1 scrollbar-none gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Attachment,
+  AttachmentGroup,
+  AttachmentMedia,
+  AttachmentContent,
+  AttachmentTitle,
+  AttachmentDescription,
+  AttachmentActions,
+  AttachmentAction,
+  AttachmentTrigger,
+}