hazo_ui 1.1.0 → 2.0.1

package/dist/index.js

@@ -6,12 +6,16 @@ import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X, ChevronDown, ChevronUp, Check, Filter, Plus, ChevronsUpDown, Trash2, Calendar as Calendar$1, ChevronRight, ChevronLeft } from 'lucide-react';
+import { X, ChevronDown, ChevronUp, Check, Filter, Plus, ChevronsUpDown, ArrowUpDown, Trash2, GripVertical, Calendar as Calendar$1, ChevronRight, ChevronLeft } from 'lucide-react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { DayPicker } from 'react-day-picker';
 import { format } from 'date-fns';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from '@dnd-kit/core';
+import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, arrayMove, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 
 var ExampleComponent = ({ children, className = "" }) => {
   return /* @__PURE__ */ jsx("div", { className: `cls_example_component ${className}`, children });
@@ -756,30 +760,27 @@ function MultiFilterDialog({
           ) }),
           /* @__PURE__ */ jsx(PopoverContent, { className: "cls_combobox_popover w-full p-0", children: /* @__PURE__ */ jsxs(Command, { children: [
             /* @__PURE__ */ jsx(CommandInput, { placeholder: "Search fields...", className: "cls_command_input" }),
-            /* @__PURE__ */ jsxs(CommandList, { children: [
-              /* @__PURE__ */ jsx(CommandEmpty, { children: "No fields found." }),
-              /* @__PURE__ */ jsx(CommandGroup, { children: availableFieldsToAdd.map((field) => /* @__PURE__ */ jsxs(
-                CommandItem,
-                {
-                  value: field.value,
-                  onSelect: () => handleAddField(field.value),
-                  className: "cls_command_item",
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      Check,
-                      {
-                        className: cn(
-                          "cls_check_icon mr-2 h-4 w-4",
-                          "opacity-0"
-                        )
-                      }
-                    ),
-                    field.label
-                  ]
-                },
-                field.value
-              )) })
-            ] })
+            /* @__PURE__ */ jsx(CommandList, { children: availableFieldsToAdd.length === 0 ? /* @__PURE__ */ jsx(CommandEmpty, { children: "No fields found." }) : /* @__PURE__ */ jsx(CommandGroup, { children: availableFieldsToAdd.map((field) => /* @__PURE__ */ jsxs(
+              CommandItem,
+              {
+                value: field.label,
+                onSelect: () => handleAddField(field.value),
+                className: "cls_command_item",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Check,
+                    {
+                      className: cn(
+                        "cls_check_icon mr-2 h-4 w-4",
+                        "opacity-0"
+                      )
+                    }
+                  ),
+                  field.label
+                ]
+              },
+              field.value
+            )) }) })
           ] }) })
         ] }) }),
         filterFields.length > 0 ? /* @__PURE__ */ jsx("div", { className: "cls_filter_fields_list space-y-2", children: filterFields.map((filterConfig) => {
@@ -832,7 +833,319 @@ function MultiFilterDialog({
     ] })
   ] });
 }
+var Switch = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SwitchPrimitives.Root,
+  {
+    className: cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    ),
+    ...props,
+    ref,
+    children: /* @__PURE__ */ jsx(
+      SwitchPrimitives.Thumb,
+      {
+        className: cn(
+          "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+        )
+      }
+    )
+  }
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+var Label2 = React6.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "label",
+      {
+        ref,
+        className: cn(
+          "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Label2.displayName = "Label";
+function SortableSortFieldItem({
+  sortConfig,
+  fieldLabel,
+  onDirectionChange,
+  onDelete
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: sortConfig.field });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      className: "cls_sortable_sort_field_item flex items-center gap-3 p-3 border rounded-md bg-card",
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...attributes,
+            ...listeners,
+            className: "cls_drag_handle cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground",
+            children: /* @__PURE__ */ jsx(GripVertical, { className: "cls_drag_icon h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "cls_field_label flex-1 text-sm font-medium", children: fieldLabel }),
+        /* @__PURE__ */ jsxs("div", { className: "cls_direction_control flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Label2, { htmlFor: `switch-${sortConfig.field}`, className: "cls_direction_label text-xs text-muted-foreground", children: sortConfig.direction === "asc" ? "Ascending" : "Descending" }),
+          /* @__PURE__ */ jsx(
+            Switch,
+            {
+              id: `switch-${sortConfig.field}`,
+              checked: sortConfig.direction === "desc",
+              onCheckedChange: (checked) => onDirectionChange(checked ? "desc" : "asc"),
+              "aria-label": `Toggle sort direction for ${fieldLabel}`
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: onDelete,
+            className: "cls_delete_btn h-8 w-8 p-0 text-destructive hover:text-destructive",
+            "aria-label": `Remove ${fieldLabel} from sort`,
+            children: /* @__PURE__ */ jsx(Trash2, { className: "cls_delete_icon h-4 w-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function MultiSortDialog({
+  availableFields,
+  onSortChange,
+  initialSortFields = []
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [sortFields, setSortFields] = useState(initialSortFields);
+  const [isComboboxOpen, setIsComboboxOpen] = useState(false);
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  useEffect(() => {
+    if (isOpen) {
+      setSortFields(initialSortFields);
+    }
+  }, [isOpen, initialSortFields]);
+  const handleAddField = (fieldValue) => {
+    if (sortFields.some((sf) => sf.field === fieldValue)) {
+      return;
+    }
+    const newField = {
+      field: fieldValue,
+      direction: "asc"
+    };
+    setSortFields([...sortFields, newField]);
+    setIsComboboxOpen(false);
+  };
+  const handleDeleteField = (fieldValue) => {
+    setSortFields(sortFields.filter((sf) => sf.field !== fieldValue));
+  };
+  const handleDirectionChange = (fieldValue, direction) => {
+    setSortFields(
+      sortFields.map(
+        (sf) => sf.field === fieldValue ? { ...sf, direction } : sf
+      )
+    );
+  };
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) {
+      return;
+    }
+    const oldIndex = sortFields.findIndex((sf) => sf.field === active.id);
+    const newIndex = sortFields.findIndex((sf) => sf.field === over.id);
+    if (oldIndex !== -1 && newIndex !== -1) {
+      setSortFields(arrayMove(sortFields, oldIndex, newIndex));
+    }
+  };
+  const handleApply = () => {
+    onSortChange([...sortFields]);
+    setIsOpen(false);
+  };
+  const handleCancel = () => {
+    setSortFields(initialSortFields);
+    setIsOpen(false);
+  };
+  const handleClearAll = () => {
+    setSortFields([]);
+  };
+  const availableFieldsToAdd = availableFields.filter(
+    (af) => !sortFields.some((sf) => sf.field === af.value)
+  );
+  const getFieldLabel = (fieldValue) => {
+    return availableFields.find((af) => af.value === fieldValue)?.label || fieldValue;
+  };
+  const hasActiveSorts = initialSortFields.length > 0;
+  const tooltipContent = hasActiveSorts ? /* @__PURE__ */ jsxs("div", { className: "cls_sort_tooltip_content space-y-1", children: [
+    /* @__PURE__ */ jsx("div", { className: "cls_tooltip_title text-xs font-semibold mb-1", children: "Active Sorts:" }),
+    initialSortFields.map((sortConfig, index) => /* @__PURE__ */ jsxs("div", { className: "cls_tooltip_item text-xs", children: [
+      index + 1,
+      ". ",
+      getFieldLabel(sortConfig.field),
+      " (",
+      sortConfig.direction === "asc" ? "Asc" : "Desc",
+      ")"
+    ] }, sortConfig.field))
+  ] }) : /* @__PURE__ */ jsx("div", { className: "cls_sort_tooltip_content text-xs", children: "No active sorts" });
+  return /* @__PURE__ */ jsxs(Dialog, { open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: "cls_sort_button",
+          "aria-label": "Open sort dialog",
+          children: [
+            /* @__PURE__ */ jsx(
+              ArrowUpDown,
+              {
+                className: cn(
+                  "cls_sort_icon h-4 w-4 mr-2",
+                  hasActiveSorts && "text-blue-600"
+                )
+              }
+            ),
+            "Sort"
+          ]
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: tooltipContent })
+    ] }) }),
+    /* @__PURE__ */ jsxs(DialogContent, { className: "cls_sort_dialog_content max-w-lg", children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: "Sort Images" }),
+        /* @__PURE__ */ jsx(DialogDescription, { children: "Add multiple fields to sort by and reorder them. Use the switch to toggle between ascending and descending." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "cls_sort_dialog_body space-y-4 py-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "cls_add_field_section", children: /* @__PURE__ */ jsxs(Popover, { open: isComboboxOpen, onOpenChange: setIsComboboxOpen, children: [
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline",
+              role: "combobox",
+              "aria-expanded": isComboboxOpen,
+              className: "cls_add_field_combobox w-full justify-between",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "cls_combobox_content flex items-center", children: [
+                  /* @__PURE__ */ jsx(Plus, { className: "cls_plus_icon h-4 w-4 mr-2" }),
+                  /* @__PURE__ */ jsx("span", { children: "Add field" })
+                ] }),
+                /* @__PURE__ */ jsx(ChevronsUpDown, { className: "cls_chevron_icon ml-2 h-4 w-4 shrink-0 opacity-50" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(PopoverContent, { className: "cls_combobox_popover w-full p-0", children: /* @__PURE__ */ jsxs(Command, { children: [
+            /* @__PURE__ */ jsx(CommandInput, { placeholder: "Search fields...", className: "cls_command_input" }),
+            /* @__PURE__ */ jsx(CommandList, { children: availableFieldsToAdd.length === 0 ? /* @__PURE__ */ jsx(CommandEmpty, { children: "No fields found." }) : /* @__PURE__ */ jsx(CommandGroup, { children: availableFieldsToAdd.map((field) => /* @__PURE__ */ jsxs(
+              CommandItem,
+              {
+                value: field.label,
+                onSelect: () => handleAddField(field.value),
+                className: "cls_command_item",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Check,
+                    {
+                      className: cn(
+                        "cls_check_icon mr-2 h-4 w-4",
+                        "opacity-0"
+                      )
+                    }
+                  ),
+                  field.label
+                ]
+              },
+              field.value
+            )) }) })
+          ] }) })
+        ] }) }),
+        sortFields.length > 0 ? /* @__PURE__ */ jsx("div", { className: "cls_sort_fields_list space-y-2", children: /* @__PURE__ */ jsx(
+          DndContext,
+          {
+            sensors,
+            collisionDetection: closestCenter,
+            onDragEnd: handleDragEnd,
+            children: /* @__PURE__ */ jsx(
+              SortableContext,
+              {
+                items: sortFields.map((sf) => sf.field),
+                strategy: verticalListSortingStrategy,
+                children: sortFields.map((sortConfig) => /* @__PURE__ */ jsx(
+                  SortableSortFieldItem,
+                  {
+                    sortConfig,
+                    fieldLabel: getFieldLabel(sortConfig.field),
+                    onDirectionChange: (direction) => handleDirectionChange(sortConfig.field, direction),
+                    onDelete: () => handleDeleteField(sortConfig.field)
+                  },
+                  sortConfig.field
+                ))
+              }
+            )
+          }
+        ) }) : /* @__PURE__ */ jsx("div", { className: "cls_empty_sort_fields text-center py-8 text-sm text-muted-foreground", children: 'No sort fields added. Click "Add field" to add sorting criteria.' })
+      ] }),
+      /* @__PURE__ */ jsxs(DialogFooter, { children: [
+        sortFields.length > 0 && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            onClick: handleClearAll,
+            className: "cls_clear_all_btn",
+            children: [
+              /* @__PURE__ */ jsx(Trash2, { className: "cls_clear_all_icon h-4 w-4 mr-2" }),
+              "Clear All"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: handleApply,
+            className: "cls_apply_btn",
+            children: "Apply"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            onClick: handleCancel,
+            className: "cls_cancel_btn",
+            children: "Cancel"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
 
-export { ExampleComponent, MultiFilterDialog };
+export { ExampleComponent, MultiFilterDialog, MultiSortDialog };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map