@gbmtech/aurora-ui 0.4.73 → 0.4.75
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/alert-dialog.cjs +1 -1
- package/dist/cjs/components/app-layout/index.cjs +1 -1
- package/dist/cjs/components/app-layout/index.cjs.map +1 -1
- package/dist/cjs/components/app-layout/sidebar/index.cjs +1 -1
- package/dist/cjs/components/app-layout/sidebar/index.cjs.map +1 -1
- package/dist/cjs/components/app-layout/sidebar/sidebar.cjs +1 -1
- package/dist/cjs/components/avatar.cjs +1 -1
- package/dist/cjs/components/badge.cjs +1 -1
- package/dist/cjs/components/breadcrumb.cjs +1 -1
- package/dist/cjs/components/command.cjs +1 -1
- package/dist/cjs/components/context-menu.cjs +1 -1
- package/dist/cjs/components/data-table/data-table-action-bar.cjs +1 -1
- package/dist/cjs/components/date-picker-with-range.cjs +2 -2
- package/dist/cjs/components/date-picker-with-range.cjs.map +1 -1
- package/dist/cjs/components/dialog.cjs +1 -1
- package/dist/cjs/components/dropdown-menu.cjs +1 -1
- package/dist/cjs/components/faceted.cjs +1 -1
- package/dist/cjs/components/form.cjs +1 -1
- package/dist/cjs/components/input-otp.cjs +1 -1
- package/dist/cjs/components/multi-select.cjs +1 -1
- package/dist/cjs/components/multi-select.cjs.map +1 -1
- package/dist/cjs/components/pagination.cjs +1 -1
- package/dist/cjs/components/select.cjs +1 -1
- package/dist/cjs/components/separator.cjs +1 -1
- package/dist/cjs/components/sheet/sheet.cjs +1 -1
- package/dist/cjs/components/sortable.cjs +1 -1
- package/dist/cjs/components/table-expandable.cjs +1 -1
- package/dist/cjs/components/table.cjs +1 -1
- package/dist/cjs/components/tabs/tabs-root.cjs +1 -1
- package/dist/cjs/components/time-picker-input.cjs +1 -1
- package/dist/cjs/components/time-picker-input.cjs.map +1 -1
- package/dist/cjs/components/tooltip.cjs +1 -1
- package/dist/cjs/index.cjs +1 -1
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/lib/composition.cjs +1 -1
- package/dist/cjs/lib/data-table.cjs +1 -1
- package/dist/cjs/lib/index.cjs +1 -1
- package/dist/cjs/lib/index.cjs.map +1 -1
- package/dist/cjs/lib/parsers.cjs +1 -1
- package/dist/cjs/primitive/input.cjs +1 -1
- package/dist/esm/components/alert-dialog.js +1 -1
- package/dist/esm/components/alert-dialog.js.map +1 -1
- package/dist/esm/components/app-layout/app-layout-breadcrumb.js +1 -1
- package/dist/esm/components/app-layout/app-layout-breadcrumb.js.map +1 -1
- package/dist/esm/components/app-layout/app-layout-content.js +1 -1
- package/dist/esm/components/app-layout/app-layout-content.js.map +1 -1
- package/dist/esm/components/app-layout/app-layout-filters.js +1 -1
- package/dist/esm/components/app-layout/app-layout-filters.js.map +1 -1
- package/dist/esm/components/app-layout/app-layout-header.js +1 -1
- package/dist/esm/components/app-layout/app-layout-header.js.map +1 -1
- package/dist/esm/components/app-layout/app-layout-provider.js +1 -1
- package/dist/esm/components/app-layout/app-layout-provider.js.map +1 -1
- package/dist/esm/components/app-layout/app-layout.js +1 -1
- package/dist/esm/components/app-layout/app-layout.js.map +1 -1
- package/dist/esm/components/app-layout/sidebar/app-sidebar.js +1 -1
- package/dist/esm/components/app-layout/sidebar/app-sidebar.js.map +1 -1
- package/dist/esm/components/app-layout/sidebar/index.js +2 -1
- package/dist/esm/components/app-layout/sidebar/index.js.map +1 -0
- package/dist/esm/components/app-layout/sidebar/logo.js +1 -1
- package/dist/esm/components/app-layout/sidebar/logo.js.map +1 -1
- package/dist/esm/components/app-layout/sidebar/nav-modules.js +1 -1
- package/dist/esm/components/app-layout/sidebar/nav-modules.js.map +1 -1
- package/dist/esm/components/app-layout/sidebar/nav-sub-item.js +1 -1
- package/dist/esm/components/app-layout/sidebar/nav-sub-item.js.map +1 -1
- package/dist/esm/components/app-layout/sidebar/nav-user.js +1 -1
- package/dist/esm/components/app-layout/sidebar/nav-user.js.map +1 -1
- package/dist/esm/components/app-layout/sidebar/sidebar-icons.js +1 -1
- package/dist/esm/components/app-layout/sidebar/sidebar-icons.js.map +1 -1
- package/dist/esm/components/app-layout/sidebar/sidebar.js +1 -1
- package/dist/esm/components/app-layout/sidebar/sidebar.js.map +1 -1
- package/dist/esm/components/autocomplete/autocomplete-content.js +1 -1
- package/dist/esm/components/autocomplete/autocomplete-content.js.map +1 -1
- package/dist/esm/components/autocomplete/autocomplete-context.js +1 -1
- package/dist/esm/components/autocomplete/autocomplete-context.js.map +1 -1
- package/dist/esm/components/autocomplete/autocomplete-empty.js +1 -1
- package/dist/esm/components/autocomplete/autocomplete-empty.js.map +1 -1
- package/dist/esm/components/autocomplete/autocomplete-input.js +1 -1
- package/dist/esm/components/autocomplete/autocomplete-input.js.map +1 -1
- package/dist/esm/components/autocomplete/autocomplete-item.js +1 -1
- package/dist/esm/components/autocomplete/autocomplete-item.js.map +1 -1
- package/dist/esm/components/autocomplete/autocomplete-list.js +1 -1
- package/dist/esm/components/autocomplete/autocomplete-list.js.map +1 -1
- package/dist/esm/components/autocomplete/autocomplete.js +1 -1
- package/dist/esm/components/autocomplete/autocomplete.js.map +1 -1
- package/dist/esm/components/avatar.js +1 -1
- package/dist/esm/components/avatar.js.map +1 -1
- package/dist/esm/components/badge.js +1 -1
- package/dist/esm/components/badge.js.map +1 -1
- package/dist/esm/components/breadcrumb.js +1 -1
- package/dist/esm/components/breadcrumb.js.map +1 -1
- package/dist/esm/components/button.js +1 -1
- package/dist/esm/components/button.js.map +1 -1
- package/dist/esm/components/calendar.js +1 -1
- package/dist/esm/components/calendar.js.map +1 -1
- package/dist/esm/components/checkbox.js +1 -1
- package/dist/esm/components/checkbox.js.map +1 -1
- package/dist/esm/components/combobox.js +1 -1
- package/dist/esm/components/combobox.js.map +1 -1
- package/dist/esm/components/command.js +1 -1
- package/dist/esm/components/command.js.map +1 -1
- package/dist/esm/components/context-menu.js +1 -1
- package/dist/esm/components/context-menu.js.map +1 -1
- package/dist/esm/components/data-table/data-table-action-bar.js +1 -1
- package/dist/esm/components/data-table/data-table-action-bar.js.map +1 -1
- package/dist/esm/components/data-table/data-table-advanced-toolbar.js +1 -1
- package/dist/esm/components/data-table/data-table-advanced-toolbar.js.map +1 -1
- package/dist/esm/components/data-table/data-table-column-header.js +1 -1
- package/dist/esm/components/data-table/data-table-column-header.js.map +1 -1
- package/dist/esm/components/data-table/data-table-date-filter.js +1 -1
- package/dist/esm/components/data-table/data-table-date-filter.js.map +1 -1
- package/dist/esm/components/data-table/data-table-faceted-filter.js +1 -1
- package/dist/esm/components/data-table/data-table-faceted-filter.js.map +1 -1
- package/dist/esm/components/data-table/data-table-filter-list.js +1 -1
- package/dist/esm/components/data-table/data-table-filter-list.js.map +1 -1
- package/dist/esm/components/data-table/data-table-filter-menu.js +1 -1
- package/dist/esm/components/data-table/data-table-filter-menu.js.map +1 -1
- package/dist/esm/components/data-table/data-table-pagination.js +1 -1
- package/dist/esm/components/data-table/data-table-pagination.js.map +1 -1
- package/dist/esm/components/data-table/data-table-range-filter.js +1 -1
- package/dist/esm/components/data-table/data-table-range-filter.js.map +1 -1
- package/dist/esm/components/data-table/data-table-skeleton.js +1 -1
- package/dist/esm/components/data-table/data-table-skeleton.js.map +1 -1
- package/dist/esm/components/data-table/data-table-slider-filter.js +1 -1
- package/dist/esm/components/data-table/data-table-slider-filter.js.map +1 -1
- package/dist/esm/components/data-table/data-table-sort-list.js +1 -1
- package/dist/esm/components/data-table/data-table-sort-list.js.map +1 -1
- package/dist/esm/components/data-table/data-table-toolbar.js +1 -1
- package/dist/esm/components/data-table/data-table-toolbar.js.map +1 -1
- package/dist/esm/components/data-table/data-table-view-options.js +1 -1
- package/dist/esm/components/data-table/data-table-view-options.js.map +1 -1
- package/dist/esm/components/data-table/data-table.js +1 -1
- package/dist/esm/components/data-table/data-table.js.map +1 -1
- package/dist/esm/components/data-table/index.js +1 -1
- package/dist/esm/components/date-picker-with-range.js +2 -2
- package/dist/esm/components/date-picker-with-range.js.map +1 -1
- package/dist/esm/components/date-picker.js +1 -1
- package/dist/esm/components/date-picker.js.map +1 -1
- package/dist/esm/components/date-time-picker-with-range.js +1 -1
- package/dist/esm/components/date-time-picker-with-range.js.map +1 -1
- package/dist/esm/components/datetime-picker/datetime-picker.js +1 -1
- package/dist/esm/components/datetime-picker/datetime-picker.js.map +1 -1
- package/dist/esm/components/datetime-picker/month-year-picker.js +1 -1
- package/dist/esm/components/datetime-picker/month-year-picker.js.map +1 -1
- package/dist/esm/components/datetime-picker/time-item.js +1 -1
- package/dist/esm/components/datetime-picker/time-item.js.map +1 -1
- package/dist/esm/components/dialog.js +1 -1
- package/dist/esm/components/dialog.js.map +1 -1
- package/dist/esm/components/dropdown-menu.js +1 -1
- package/dist/esm/components/dropdown-menu.js.map +1 -1
- package/dist/esm/components/faceted.js +1 -1
- package/dist/esm/components/faceted.js.map +1 -1
- package/dist/esm/components/form.js +1 -1
- package/dist/esm/components/form.js.map +1 -1
- package/dist/esm/components/icons/rumo.js +1 -1
- package/dist/esm/components/icons/rumo.js.map +1 -1
- package/dist/esm/components/icons/vli.js +1 -1
- package/dist/esm/components/icons/vli.js.map +1 -1
- package/dist/esm/components/input-otp.js +1 -1
- package/dist/esm/components/input-otp.js.map +1 -1
- package/dist/esm/components/input-password.js +1 -1
- package/dist/esm/components/input-password.js.map +1 -1
- package/dist/esm/components/input.js +1 -1
- package/dist/esm/components/input.js.map +1 -1
- package/dist/esm/components/label.js +1 -1
- package/dist/esm/components/label.js.map +1 -1
- package/dist/esm/components/mask-input.js +1 -1
- package/dist/esm/components/mask-input.js.map +1 -1
- package/dist/esm/components/multi-select.js +1 -1
- package/dist/esm/components/multi-select.js.map +1 -1
- package/dist/esm/components/pagination.js +1 -1
- package/dist/esm/components/pagination.js.map +1 -1
- package/dist/esm/components/popover.js +1 -1
- package/dist/esm/components/popover.js.map +1 -1
- package/dist/esm/components/radio-group.js +1 -1
- package/dist/esm/components/radio-group.js.map +1 -1
- package/dist/esm/components/scroll-area.js +1 -1
- package/dist/esm/components/scroll-area.js.map +1 -1
- package/dist/esm/components/select.js +1 -1
- package/dist/esm/components/select.js.map +1 -1
- package/dist/esm/components/separator.js +1 -1
- package/dist/esm/components/separator.js.map +1 -1
- package/dist/esm/components/sheet/sheet-content-variants.js +1 -1
- package/dist/esm/components/sheet/sheet-content-variants.js.map +1 -1
- package/dist/esm/components/sheet/sheet.js +1 -1
- package/dist/esm/components/sheet/sheet.js.map +1 -1
- package/dist/esm/components/skeleton.js +1 -1
- package/dist/esm/components/skeleton.js.map +1 -1
- package/dist/esm/components/slider.js +1 -1
- package/dist/esm/components/slider.js.map +1 -1
- package/dist/esm/components/sortable.js +3 -3
- package/dist/esm/components/sortable.js.map +1 -1
- package/dist/esm/components/spinner.js +1 -1
- package/dist/esm/components/spinner.js.map +1 -1
- package/dist/esm/components/switch.js +1 -1
- package/dist/esm/components/switch.js.map +1 -1
- package/dist/esm/components/table-expandable.js +1 -1
- package/dist/esm/components/table-expandable.js.map +1 -1
- package/dist/esm/components/table.js +1 -1
- package/dist/esm/components/table.js.map +1 -1
- package/dist/esm/components/tabs/index.js +1 -1
- package/dist/esm/components/tabs/index.js.map +1 -1
- package/dist/esm/components/tabs/tabs-content.js +1 -1
- package/dist/esm/components/tabs/tabs-content.js.map +1 -1
- package/dist/esm/components/tabs/tabs-list.js +1 -1
- package/dist/esm/components/tabs/tabs-list.js.map +1 -1
- package/dist/esm/components/tabs/tabs-root.js +1 -1
- package/dist/esm/components/tabs/tabs-root.js.map +1 -1
- package/dist/esm/components/tabs/tabs-trigger.js +1 -1
- package/dist/esm/components/tabs/tabs-trigger.js.map +1 -1
- package/dist/esm/components/textarea.js +1 -1
- package/dist/esm/components/textarea.js.map +1 -1
- package/dist/esm/components/theme-provider.js +1 -1
- package/dist/esm/components/theme-provider.js.map +1 -1
- package/dist/esm/components/theme-toggle.js +1 -1
- package/dist/esm/components/theme-toggle.js.map +1 -1
- package/dist/esm/components/time-picker-input.js +1 -1
- package/dist/esm/components/time-picker-input.js.map +1 -1
- package/dist/esm/components/time-picker.js +1 -1
- package/dist/esm/components/time-picker.js.map +1 -1
- package/dist/esm/components/title.js +1 -1
- package/dist/esm/components/title.js.map +1 -1
- package/dist/esm/components/tokens-grid.js +1 -1
- package/dist/esm/components/tokens-grid.js.map +1 -1
- package/dist/esm/components/tooltip.js +1 -1
- package/dist/esm/components/tooltip.js.map +1 -1
- package/dist/esm/hooks/use-callback-ref.js +1 -1
- package/dist/esm/hooks/use-callback-ref.js.map +1 -1
- package/dist/esm/hooks/use-data-table.js +1 -1
- package/dist/esm/hooks/use-data-table.js.map +1 -1
- package/dist/esm/hooks/use-debounce.js +1 -1
- package/dist/esm/hooks/use-debounce.js.map +1 -1
- package/dist/esm/hooks/use-debounced-callback.js +1 -1
- package/dist/esm/hooks/use-debounced-callback.js.map +1 -1
- package/dist/esm/hooks/use-mobile.js +1 -1
- package/dist/esm/hooks/use-mobile.js.map +1 -1
- package/dist/esm/lib/composition.js +1 -1
- package/dist/esm/lib/composition.js.map +1 -1
- package/dist/esm/lib/data-table.js +1 -1
- package/dist/esm/lib/data-table.js.map +1 -1
- package/dist/esm/lib/id.js +1 -1
- package/dist/esm/lib/id.js.map +1 -1
- package/dist/esm/lib/parsers.js +1 -1
- package/dist/esm/lib/parsers.js.map +1 -1
- package/dist/esm/lib/utils.js +1 -1
- package/dist/esm/lib/utils.js.map +1 -1
- package/dist/esm/primitive/input.js +1 -1
- package/dist/esm/primitive/input.js.map +1 -1
- package/package.json +8 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components\\data-table\\data-table-sort-list.js","sources":["webpack://@gbmtech/aurora-ui/./src/components/data-table/data-table-sort-list.tsx"],"sourcesContent":["\r\n\r\nimport {\r\n ArrowsDownUpIcon,\r\n CaretUpDownIcon,\r\n DotsSixVerticalIcon,\r\n TrashIcon,\r\n} from '@phosphor-icons/react'\r\nimport type { ColumnSort, SortDirection, Table } from '@tanstack/react-table'\r\nimport * as React from 'react'\r\n\r\nimport { Badge } from '@/components/badge'\r\nimport { Button } from '@/components/button'\r\nimport {\r\n Command,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n} from '@/components/command'\r\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/popover'\r\nimport {\r\n Select,\r\n SelectContent,\r\n SelectItem,\r\n SelectTrigger,\r\n SelectValue,\r\n} from '@/components/select'\r\nimport {\r\n Sortable,\r\n SortableContent,\r\n SortableItem,\r\n SortableItemHandle,\r\n SortableOverlay,\r\n} from '@/components/sortable'\r\nimport { dataTableConfig } from '@/lib/data-table-config'\r\nimport { cn } from '@/lib/utils'\r\n\r\nconst OPEN_MENU_SHORTCUT = 's'\r\nconst REMOVE_SORT_SHORTCUTS = ['backspace', 'delete']\r\n\r\ninterface DataTableSortListProps<TData>\r\n extends React.ComponentProps<typeof PopoverContent> {\r\n table: Table<TData>\r\n}\r\n\r\nexport function DataTableSortList<TData>({\r\n table,\r\n ...props\r\n}: DataTableSortListProps<TData>) {\r\n const id = React.useId()\r\n const labelId = React.useId()\r\n const descriptionId = React.useId()\r\n const [open, setOpen] = React.useState(false)\r\n const addButtonRef = React.useRef<HTMLButtonElement>(null)\r\n\r\n const sorting = table.getState().sorting\r\n const onSortingChange = table.setSorting\r\n\r\n const { columnLabels, columns } = React.useMemo(() => {\r\n const labels = new Map<string, string>()\r\n const sortingIds = new Set(sorting.map(s => s.id))\r\n const availableColumns: { id: string; label: string }[] = []\r\n\r\n for (const column of table.getAllColumns()) {\r\n if (!column.getCanSort()) continue\r\n\r\n const label = column.columnDef.meta?.label ?? column.id\r\n labels.set(column.id, label)\r\n\r\n if (!sortingIds.has(column.id)) {\r\n availableColumns.push({ id: column.id, label })\r\n }\r\n }\r\n\r\n return {\r\n columnLabels: labels,\r\n columns: availableColumns,\r\n }\r\n }, [sorting, table])\r\n\r\n const onSortAdd = React.useCallback(() => {\r\n const firstColumn = columns[0]\r\n if (!firstColumn) return\r\n\r\n onSortingChange(prevSorting => [\r\n ...prevSorting,\r\n { id: firstColumn.id, desc: false },\r\n ])\r\n }, [columns, onSortingChange])\r\n\r\n const onSortUpdate = React.useCallback(\r\n (sortId: string, updates: Partial<ColumnSort>) => {\r\n onSortingChange(prevSorting => {\r\n if (!prevSorting) return prevSorting\r\n return prevSorting.map(sort =>\r\n sort.id === sortId ? { ...sort, ...updates } : sort\r\n )\r\n })\r\n },\r\n [onSortingChange]\r\n )\r\n\r\n const onSortRemove = React.useCallback(\r\n (sortId: string) => {\r\n onSortingChange(prevSorting =>\r\n prevSorting.filter(item => item.id !== sortId)\r\n )\r\n },\r\n [onSortingChange]\r\n )\r\n\r\n const onSortingReset = React.useCallback(\r\n () => onSortingChange(table.initialState.sorting),\r\n [onSortingChange, table.initialState.sorting]\r\n )\r\n\r\n React.useEffect(() => {\r\n function onKeyDown(event: KeyboardEvent) {\r\n if (\r\n event.target instanceof HTMLInputElement ||\r\n event.target instanceof HTMLTextAreaElement\r\n ) {\r\n return\r\n }\r\n\r\n if (\r\n event.key.toLowerCase() === OPEN_MENU_SHORTCUT &&\r\n !event.ctrlKey &&\r\n !event.metaKey &&\r\n !event.shiftKey\r\n ) {\r\n event.preventDefault()\r\n setOpen(true)\r\n }\r\n\r\n if (\r\n event.key.toLowerCase() === OPEN_MENU_SHORTCUT &&\r\n event.shiftKey &&\r\n sorting.length > 0\r\n ) {\r\n event.preventDefault()\r\n onSortingReset()\r\n }\r\n }\r\n\r\n window.addEventListener('keydown', onKeyDown)\r\n return () => window.removeEventListener('keydown', onKeyDown)\r\n }, [sorting.length, onSortingReset])\r\n\r\n const onTriggerKeyDown = React.useCallback(\r\n (event: React.KeyboardEvent<HTMLButtonElement>) => {\r\n if (\r\n REMOVE_SORT_SHORTCUTS.includes(event.key.toLowerCase()) &&\r\n sorting.length > 0\r\n ) {\r\n event.preventDefault()\r\n onSortingReset()\r\n }\r\n },\r\n [sorting.length, onSortingReset]\r\n )\r\n\r\n return (\r\n <Sortable\r\n value={sorting}\r\n onValueChange={onSortingChange}\r\n getItemValue={item => item.id}\r\n >\r\n <Popover open={open} onOpenChange={setOpen}>\r\n <PopoverTrigger asChild>\r\n <Button variant=\"outline\" size=\"sm\" onKeyDown={onTriggerKeyDown}>\r\n <ArrowsDownUpIcon />\r\n Ordenar\r\n {sorting.length > 0 && (\r\n <Badge\r\n variant=\"secondary\"\r\n className=\"h-[18.24px] rounded-[3.2px] px-[5.12px] font-mono font-normal text-[10.4px]\"\r\n >\r\n {sorting.length}\r\n </Badge>\r\n )}\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent\r\n aria-labelledby={labelId}\r\n aria-describedby={descriptionId}\r\n className=\"flex w-full max-w-[var(--radix-popover-content-available-width)] origin-[var(--radix-popover-content-transform-origin)] flex-col gap-3.5 p-4 sm:min-w-[380px]\"\r\n {...props}\r\n >\r\n <div className=\"flex flex-col gap-1\">\r\n <h4 id={labelId} className=\"font-medium leading-none\">\r\n {sorting.length > 0\r\n ? 'Ordenar por'\r\n : 'Nenhuma ordenação aplicada'}\r\n </h4>\r\n <p\r\n id={descriptionId}\r\n className={cn(\r\n 'text-gray-500 text-sm',\r\n sorting.length > 0 && 'sr-only'\r\n )}\r\n >\r\n {sorting.length > 0\r\n ? 'Modifique a ordenação para organizar suas linhas.'\r\n : 'Adicione uma ordenação para organizar suas linhas.'}\r\n </p>\r\n </div>\r\n {sorting.length > 0 && (\r\n <SortableContent asChild>\r\n <div\r\n role=\"list\"\r\n className=\"flex max-h-[300px] flex-col gap-2 overflow-y-auto p-1\"\r\n >\r\n {sorting.map(sort => (\r\n <DataTableSortItem\r\n key={sort.id}\r\n sort={sort}\r\n sortItemId={`${id}-sort-${sort.id}`}\r\n columns={columns}\r\n columnLabels={columnLabels}\r\n onSortUpdate={onSortUpdate}\r\n onSortRemove={onSortRemove}\r\n />\r\n ))}\r\n </div>\r\n </SortableContent>\r\n )}\r\n <div className=\"flex w-full items-center gap-2\">\r\n <Button\r\n size=\"sm\"\r\n className=\"rounded\"\r\n ref={addButtonRef}\r\n onClick={onSortAdd}\r\n disabled={columns.length === 0}\r\n >\r\n Adicionar\r\n </Button>\r\n {sorting.length > 0 && (\r\n <Button\r\n variant=\"outline\"\r\n size=\"sm\"\r\n className=\"rounded\"\r\n onClick={onSortingReset}\r\n >\r\n Resetar\r\n </Button>\r\n )}\r\n </div>\r\n </PopoverContent>\r\n </Popover>\r\n <SortableOverlay>\r\n <div className=\"flex items-center gap-2\">\r\n <div className=\"h-10 w-[180px] rounded-sm bg-primary/10\" />\r\n <div className=\"h-10 w-24 rounded-sm bg-primary/10\" />\r\n <div className=\"size-8 shrink-0 rounded-sm bg-primary/10\" />\r\n <div className=\"size-8 shrink-0 rounded-sm bg-primary/10\" />\r\n </div>\r\n </SortableOverlay>\r\n </Sortable>\r\n )\r\n}\r\n\r\ninterface DataTableSortItemProps {\r\n sort: ColumnSort\r\n sortItemId: string\r\n columns: { id: string; label: string }[]\r\n columnLabels: Map<string, string>\r\n onSortUpdate: (sortId: string, updates: Partial<ColumnSort>) => void\r\n onSortRemove: (sortId: string) => void\r\n}\r\n\r\nfunction DataTableSortItem({\r\n sort,\r\n sortItemId,\r\n columns,\r\n columnLabels,\r\n onSortUpdate,\r\n onSortRemove,\r\n}: DataTableSortItemProps) {\r\n const fieldListboxId = `${sortItemId}-field-listbox`\r\n const fieldTriggerId = `${sortItemId}-field-trigger`\r\n const directionListboxId = `${sortItemId}-direction-listbox`\r\n\r\n const [showFieldSelector, setShowFieldSelector] = React.useState(false)\r\n const [showDirectionSelector, setShowDirectionSelector] =\r\n React.useState(false)\r\n\r\n const onItemKeyDown = React.useCallback(\r\n (event: React.KeyboardEvent<HTMLDivElement>) => {\r\n if (\r\n event.target instanceof HTMLInputElement ||\r\n event.target instanceof HTMLTextAreaElement\r\n ) {\r\n return\r\n }\r\n\r\n if (showFieldSelector || showDirectionSelector) {\r\n return\r\n }\r\n\r\n if (REMOVE_SORT_SHORTCUTS.includes(event.key.toLowerCase())) {\r\n event.preventDefault()\r\n onSortRemove(sort.id)\r\n }\r\n },\r\n [sort.id, showFieldSelector, showDirectionSelector, onSortRemove]\r\n )\r\n\r\n return (\r\n <SortableItem value={sort.id} asChild>\r\n <div\r\n role=\"listitem\"\r\n id={sortItemId}\r\n tabIndex={-1}\r\n className=\"flex items-center gap-2\"\r\n onKeyDown={onItemKeyDown}\r\n >\r\n <Popover open={showFieldSelector} onOpenChange={setShowFieldSelector}>\r\n <PopoverTrigger asChild>\r\n <Button\r\n id={fieldTriggerId}\r\n role=\"combobox\"\r\n aria-controls={fieldListboxId}\r\n variant=\"outline\"\r\n size=\"sm\"\r\n className=\"w-44 justify-between rounded font-normal\"\r\n >\r\n <span className=\"truncate\">{columnLabels.get(sort.id)}</span>\r\n <CaretUpDownIcon className=\"opacity-50\" />\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent\r\n id={fieldListboxId}\r\n className=\"w-[var(--radix-popover-trigger-width)] origin-[var(--radix-popover-content-transform-origin)] p-0\"\r\n >\r\n <Command>\r\n <CommandInput placeholder=\"Buscar campo...\" />\r\n <CommandList>\r\n <CommandEmpty>Nenhum campo encontrado.</CommandEmpty>\r\n <CommandGroup>\r\n {columns.map(column => (\r\n <CommandItem\r\n key={column.id}\r\n value={column.id}\r\n onSelect={value => onSortUpdate(sort.id, { id: value })}\r\n >\r\n <span className=\"truncate\">{column.label}</span>\r\n </CommandItem>\r\n ))}\r\n </CommandGroup>\r\n </CommandList>\r\n </Command>\r\n </PopoverContent>\r\n </Popover>\r\n <Select\r\n open={showDirectionSelector}\r\n onOpenChange={setShowDirectionSelector}\r\n value={sort.desc ? 'desc' : 'asc'}\r\n onValueChange={(value: SortDirection) =>\r\n onSortUpdate(sort.id, { desc: value === 'desc' })\r\n }\r\n >\r\n <SelectTrigger\r\n aria-controls={directionListboxId}\r\n className=\"h-10 w-24 rounded [&[data-size]]:h-10\"\r\n >\r\n <SelectValue />\r\n </SelectTrigger>\r\n <SelectContent\r\n id={directionListboxId}\r\n className=\"min-w-[var(--radix-select-trigger-width)] origin-[var(--radix-select-content-transform-origin)]\"\r\n >\r\n {dataTableConfig.sortOrders.map(order => (\r\n <SelectItem key={order.value} value={order.value}>\r\n {order.label}\r\n </SelectItem>\r\n ))}\r\n </SelectContent>\r\n </Select>\r\n <Button\r\n aria-controls={sortItemId}\r\n variant=\"outline\"\r\n size=\"icon\"\r\n className=\"size-10 shrink-0 rounded\"\r\n onClick={() => onSortRemove(sort.id)}\r\n >\r\n <TrashIcon weight=\"bold\" />\r\n </Button>\r\n <SortableItemHandle asChild>\r\n <Button\r\n variant=\"outline\"\r\n size=\"icon\"\r\n className=\"size-10 shrink-0 rounded\"\r\n >\r\n <DotsSixVerticalIcon weight=\"bold\" />\r\n </Button>\r\n </SortableItemHandle>\r\n </div>\r\n </SortableItem>\r\n )\r\n}\r\n"],"names":["REMOVE_SORT_SHORTCUTS","DataTableSortList","table","props","id","React","labelId","descriptionId","open","setOpen","addButtonRef","sorting","onSortingChange","columnLabels","columns","labels","Map","sortingIds","Set","s","availableColumns","column","label","onSortAdd","firstColumn","prevSorting","onSortUpdate","sortId","updates","sort","onSortRemove","item","onSortingReset","onKeyDown","event","HTMLInputElement","HTMLTextAreaElement","window","onTriggerKeyDown","Sortable","Popover","PopoverTrigger","Button","ArrowsDownUpIcon","Badge","PopoverContent","cn","SortableContent","DataTableSortItem","SortableOverlay","sortItemId","fieldListboxId","fieldTriggerId","directionListboxId","showFieldSelector","setShowFieldSelector","showDirectionSelector","setShowDirectionSelector","onItemKeyDown","SortableItem","CaretUpDownIcon","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","value","Select","SelectTrigger","SelectValue","SelectContent","dataTableConfig","order","SelectItem","TrashIcon","SortableItemHandle","DotsSixVerticalIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"components\\data-table\\data-table-sort-list.js","sources":["webpack://@gbmtech/aurora-ui/./src/components/data-table/data-table-sort-list.tsx"],"sourcesContent":["\r\n\r\nimport {\r\n ArrowsDownUpIcon,\r\n CaretUpDownIcon,\r\n DotsSixVerticalIcon,\r\n TrashIcon,\r\n} from '@phosphor-icons/react'\r\nimport type { ColumnSort, SortDirection, Table } from '@tanstack/react-table'\r\nimport * as React from 'react'\r\n\r\nimport { Badge } from '@/components/badge'\r\nimport { Button } from '@/components/button'\r\nimport {\r\n Command,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n} from '@/components/command'\r\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/popover'\r\nimport {\r\n Select,\r\n SelectContent,\r\n SelectItem,\r\n SelectTrigger,\r\n SelectValue,\r\n} from '@/components/select'\r\nimport {\r\n Sortable,\r\n SortableContent,\r\n SortableItem,\r\n SortableItemHandle,\r\n SortableOverlay,\r\n} from '@/components/sortable'\r\nimport { dataTableConfig } from '@/lib/data-table-config'\r\nimport { cn } from '@/lib/utils'\r\n\r\nconst OPEN_MENU_SHORTCUT = 's'\r\nconst REMOVE_SORT_SHORTCUTS = ['backspace', 'delete']\r\n\r\ninterface DataTableSortListProps<TData>\r\n extends React.ComponentProps<typeof PopoverContent> {\r\n table: Table<TData>\r\n}\r\n\r\nexport function DataTableSortList<TData>({\r\n table,\r\n ...props\r\n}: DataTableSortListProps<TData>) {\r\n const id = React.useId()\r\n const labelId = React.useId()\r\n const descriptionId = React.useId()\r\n const [open, setOpen] = React.useState(false)\r\n const addButtonRef = React.useRef<HTMLButtonElement>(null)\r\n\r\n const sorting = table.getState().sorting\r\n const onSortingChange = table.setSorting\r\n\r\n const { columnLabels, columns } = React.useMemo(() => {\r\n const labels = new Map<string, string>()\r\n const sortingIds = new Set(sorting.map(s => s.id))\r\n const availableColumns: { id: string; label: string }[] = []\r\n\r\n for (const column of table.getAllColumns()) {\r\n if (!column.getCanSort()) continue\r\n\r\n const label = column.columnDef.meta?.label ?? column.id\r\n labels.set(column.id, label)\r\n\r\n if (!sortingIds.has(column.id)) {\r\n availableColumns.push({ id: column.id, label })\r\n }\r\n }\r\n\r\n return {\r\n columnLabels: labels,\r\n columns: availableColumns,\r\n }\r\n }, [sorting, table])\r\n\r\n const onSortAdd = React.useCallback(() => {\r\n const firstColumn = columns[0]\r\n if (!firstColumn) return\r\n\r\n onSortingChange(prevSorting => [\r\n ...prevSorting,\r\n { id: firstColumn.id, desc: false },\r\n ])\r\n }, [columns, onSortingChange])\r\n\r\n const onSortUpdate = React.useCallback(\r\n (sortId: string, updates: Partial<ColumnSort>) => {\r\n onSortingChange(prevSorting => {\r\n if (!prevSorting) return prevSorting\r\n return prevSorting.map(sort =>\r\n sort.id === sortId ? { ...sort, ...updates } : sort\r\n )\r\n })\r\n },\r\n [onSortingChange]\r\n )\r\n\r\n const onSortRemove = React.useCallback(\r\n (sortId: string) => {\r\n onSortingChange(prevSorting =>\r\n prevSorting.filter(item => item.id !== sortId)\r\n )\r\n },\r\n [onSortingChange]\r\n )\r\n\r\n const onSortingReset = React.useCallback(\r\n () => onSortingChange(table.initialState.sorting),\r\n [onSortingChange, table.initialState.sorting]\r\n )\r\n\r\n React.useEffect(() => {\r\n function onKeyDown(event: KeyboardEvent) {\r\n if (\r\n event.target instanceof HTMLInputElement ||\r\n event.target instanceof HTMLTextAreaElement\r\n ) {\r\n return\r\n }\r\n\r\n if (\r\n event.key.toLowerCase() === OPEN_MENU_SHORTCUT &&\r\n !event.ctrlKey &&\r\n !event.metaKey &&\r\n !event.shiftKey\r\n ) {\r\n event.preventDefault()\r\n setOpen(true)\r\n }\r\n\r\n if (\r\n event.key.toLowerCase() === OPEN_MENU_SHORTCUT &&\r\n event.shiftKey &&\r\n sorting.length > 0\r\n ) {\r\n event.preventDefault()\r\n onSortingReset()\r\n }\r\n }\r\n\r\n window.addEventListener('keydown', onKeyDown)\r\n return () => window.removeEventListener('keydown', onKeyDown)\r\n }, [sorting.length, onSortingReset])\r\n\r\n const onTriggerKeyDown = React.useCallback(\r\n (event: React.KeyboardEvent<HTMLButtonElement>) => {\r\n if (\r\n REMOVE_SORT_SHORTCUTS.includes(event.key.toLowerCase()) &&\r\n sorting.length > 0\r\n ) {\r\n event.preventDefault()\r\n onSortingReset()\r\n }\r\n },\r\n [sorting.length, onSortingReset]\r\n )\r\n\r\n return (\r\n <Sortable\r\n value={sorting}\r\n onValueChange={onSortingChange}\r\n getItemValue={item => item.id}\r\n >\r\n <Popover open={open} onOpenChange={setOpen}>\r\n <PopoverTrigger asChild>\r\n <Button variant=\"outline\" size=\"sm\" onKeyDown={onTriggerKeyDown}>\r\n <ArrowsDownUpIcon />\r\n Ordenar\r\n {sorting.length > 0 && (\r\n <Badge\r\n variant=\"secondary\"\r\n className=\"h-[18.24px] rounded-[3.2px] px-[5.12px] font-mono font-normal text-[10.4px]\"\r\n >\r\n {sorting.length}\r\n </Badge>\r\n )}\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent\r\n aria-labelledby={labelId}\r\n aria-describedby={descriptionId}\r\n className=\"flex w-full max-w-[var(--radix-popover-content-available-width)] origin-[var(--radix-popover-content-transform-origin)] flex-col gap-3.5 p-4 sm:min-w-[380px]\"\r\n {...props}\r\n >\r\n <div className=\"flex flex-col gap-1\">\r\n <h4 id={labelId} className=\"font-medium leading-none\">\r\n {sorting.length > 0\r\n ? 'Ordenar por'\r\n : 'Nenhuma ordenação aplicada'}\r\n </h4>\r\n <p\r\n id={descriptionId}\r\n className={cn(\r\n 'text-gray-500 text-sm',\r\n sorting.length > 0 && 'sr-only'\r\n )}\r\n >\r\n {sorting.length > 0\r\n ? 'Modifique a ordenação para organizar suas linhas.'\r\n : 'Adicione uma ordenação para organizar suas linhas.'}\r\n </p>\r\n </div>\r\n {sorting.length > 0 && (\r\n <SortableContent asChild>\r\n <div\r\n role=\"list\"\r\n className=\"flex max-h-[300px] flex-col gap-2 overflow-y-auto p-1\"\r\n >\r\n {sorting.map(sort => (\r\n <DataTableSortItem\r\n key={sort.id}\r\n sort={sort}\r\n sortItemId={`${id}-sort-${sort.id}`}\r\n columns={columns}\r\n columnLabels={columnLabels}\r\n onSortUpdate={onSortUpdate}\r\n onSortRemove={onSortRemove}\r\n />\r\n ))}\r\n </div>\r\n </SortableContent>\r\n )}\r\n <div className=\"flex w-full items-center gap-2\">\r\n <Button\r\n size=\"sm\"\r\n className=\"rounded\"\r\n ref={addButtonRef}\r\n onClick={onSortAdd}\r\n disabled={columns.length === 0}\r\n >\r\n Adicionar\r\n </Button>\r\n {sorting.length > 0 && (\r\n <Button\r\n variant=\"outline\"\r\n size=\"sm\"\r\n className=\"rounded\"\r\n onClick={onSortingReset}\r\n >\r\n Resetar\r\n </Button>\r\n )}\r\n </div>\r\n </PopoverContent>\r\n </Popover>\r\n <SortableOverlay>\r\n <div className=\"flex items-center gap-2\">\r\n <div className=\"h-10 w-[180px] rounded-sm bg-primary/10\" />\r\n <div className=\"h-10 w-24 rounded-sm bg-primary/10\" />\r\n <div className=\"size-8 shrink-0 rounded-sm bg-primary/10\" />\r\n <div className=\"size-8 shrink-0 rounded-sm bg-primary/10\" />\r\n </div>\r\n </SortableOverlay>\r\n </Sortable>\r\n )\r\n}\r\n\r\ninterface DataTableSortItemProps {\r\n sort: ColumnSort\r\n sortItemId: string\r\n columns: { id: string; label: string }[]\r\n columnLabels: Map<string, string>\r\n onSortUpdate: (sortId: string, updates: Partial<ColumnSort>) => void\r\n onSortRemove: (sortId: string) => void\r\n}\r\n\r\nfunction DataTableSortItem({\r\n sort,\r\n sortItemId,\r\n columns,\r\n columnLabels,\r\n onSortUpdate,\r\n onSortRemove,\r\n}: DataTableSortItemProps) {\r\n const fieldListboxId = `${sortItemId}-field-listbox`\r\n const fieldTriggerId = `${sortItemId}-field-trigger`\r\n const directionListboxId = `${sortItemId}-direction-listbox`\r\n\r\n const [showFieldSelector, setShowFieldSelector] = React.useState(false)\r\n const [showDirectionSelector, setShowDirectionSelector] =\r\n React.useState(false)\r\n\r\n const onItemKeyDown = React.useCallback(\r\n (event: React.KeyboardEvent<HTMLDivElement>) => {\r\n if (\r\n event.target instanceof HTMLInputElement ||\r\n event.target instanceof HTMLTextAreaElement\r\n ) {\r\n return\r\n }\r\n\r\n if (showFieldSelector || showDirectionSelector) {\r\n return\r\n }\r\n\r\n if (REMOVE_SORT_SHORTCUTS.includes(event.key.toLowerCase())) {\r\n event.preventDefault()\r\n onSortRemove(sort.id)\r\n }\r\n },\r\n [sort.id, showFieldSelector, showDirectionSelector, onSortRemove]\r\n )\r\n\r\n return (\r\n <SortableItem value={sort.id} asChild>\r\n <div\r\n role=\"listitem\"\r\n id={sortItemId}\r\n tabIndex={-1}\r\n className=\"flex items-center gap-2\"\r\n onKeyDown={onItemKeyDown}\r\n >\r\n <Popover open={showFieldSelector} onOpenChange={setShowFieldSelector}>\r\n <PopoverTrigger asChild>\r\n <Button\r\n id={fieldTriggerId}\r\n role=\"combobox\"\r\n aria-controls={fieldListboxId}\r\n variant=\"outline\"\r\n size=\"sm\"\r\n className=\"w-44 justify-between rounded font-normal\"\r\n >\r\n <span className=\"truncate\">{columnLabels.get(sort.id)}</span>\r\n <CaretUpDownIcon className=\"opacity-50\" />\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent\r\n id={fieldListboxId}\r\n className=\"w-[var(--radix-popover-trigger-width)] origin-[var(--radix-popover-content-transform-origin)] p-0\"\r\n >\r\n <Command>\r\n <CommandInput placeholder=\"Buscar campo...\" />\r\n <CommandList>\r\n <CommandEmpty>Nenhum campo encontrado.</CommandEmpty>\r\n <CommandGroup>\r\n {columns.map(column => (\r\n <CommandItem\r\n key={column.id}\r\n value={column.id}\r\n onSelect={value => onSortUpdate(sort.id, { id: value })}\r\n >\r\n <span className=\"truncate\">{column.label}</span>\r\n </CommandItem>\r\n ))}\r\n </CommandGroup>\r\n </CommandList>\r\n </Command>\r\n </PopoverContent>\r\n </Popover>\r\n <Select\r\n open={showDirectionSelector}\r\n onOpenChange={setShowDirectionSelector}\r\n value={sort.desc ? 'desc' : 'asc'}\r\n onValueChange={(value: SortDirection) =>\r\n onSortUpdate(sort.id, { desc: value === 'desc' })\r\n }\r\n >\r\n <SelectTrigger\r\n aria-controls={directionListboxId}\r\n className=\"h-10 w-24 rounded [&[data-size]]:h-10\"\r\n >\r\n <SelectValue />\r\n </SelectTrigger>\r\n <SelectContent\r\n id={directionListboxId}\r\n className=\"min-w-[var(--radix-select-trigger-width)] origin-[var(--radix-select-content-transform-origin)]\"\r\n >\r\n {dataTableConfig.sortOrders.map(order => (\r\n <SelectItem key={order.value} value={order.value}>\r\n {order.label}\r\n </SelectItem>\r\n ))}\r\n </SelectContent>\r\n </Select>\r\n <Button\r\n aria-controls={sortItemId}\r\n variant=\"outline\"\r\n size=\"icon\"\r\n className=\"size-10 shrink-0 rounded\"\r\n onClick={() => onSortRemove(sort.id)}\r\n >\r\n <TrashIcon weight=\"bold\" />\r\n </Button>\r\n <SortableItemHandle asChild>\r\n <Button\r\n variant=\"outline\"\r\n size=\"icon\"\r\n className=\"size-10 shrink-0 rounded\"\r\n >\r\n <DotsSixVerticalIcon weight=\"bold\" />\r\n </Button>\r\n </SortableItemHandle>\r\n </div>\r\n </SortableItem>\r\n )\r\n}\r\n"],"names":["REMOVE_SORT_SHORTCUTS","DataTableSortList","table","props","id","React","labelId","descriptionId","open","setOpen","addButtonRef","sorting","onSortingChange","columnLabels","columns","labels","Map","sortingIds","Set","s","availableColumns","column","label","onSortAdd","firstColumn","prevSorting","onSortUpdate","sortId","updates","sort","onSortRemove","item","onSortingReset","onKeyDown","event","HTMLInputElement","HTMLTextAreaElement","window","onTriggerKeyDown","Sortable","Popover","PopoverTrigger","Button","ArrowsDownUpIcon","Badge","PopoverContent","cn","SortableContent","DataTableSortItem","SortableOverlay","sortItemId","fieldListboxId","fieldTriggerId","directionListboxId","showFieldSelector","setShowFieldSelector","showDirectionSelector","setShowDirectionSelector","onItemKeyDown","SortableItem","CaretUpDownIcon","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","value","Select","SelectTrigger","SelectValue","SelectContent","dataTableConfig","order","SelectItem","TrashIcon","SortableItemHandle","DotsSixVerticalIcon"],"mappings":"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
'use client'
|
|
2
|
-
import
|
|
2
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{XIcon as l}from"@phosphor-icons/react";import{useCallback as a,useMemo as r}from"react";import{Button as i}from"../button.js";import{DataTableDateFilter as n}from"./data-table-date-filter.js";import{DataTableFacetedFilter as o}from"./data-table-faceted-filter.js";import{DataTableSliderFilter as s}from"./data-table-slider-filter.js";import{DataTableViewOptions as m}from"./data-table-view-options.js";import{Input as u}from"../input.js";import{cn as c}from"../../lib/utils.js";function p({table:n,children:o,className:s,...u}){let p=n.getState().columnFilters.length>0,f=r(()=>n.getAllColumns().filter(e=>e.getCanFilter()),[n]),b=a(()=>{n.resetColumnFilters()},[n]);return t("div",{role:"toolbar","aria-orientation":"horizontal",className:c("flex w-full items-start justify-between gap-2",s),...u,children:[t("div",{className:"flex flex-1 flex-wrap items-center gap-2",children:[f.map(t=>e(d,{column:t},t.id)),p&&t(i,{"aria-label":"Reset filters",variant:"outline",size:"sm",onClick:b,children:[e(l,{}),"Limpar"]})]}),t("div",{className:"flex items-center gap-2",children:[o,e(m,{table:n})]})]})}function d({column:l}){{let r=l.columnDef.meta;return a(()=>{if(!r?.variant)return null;switch(r.variant){case"text":return e(u,{placeholder:r.placeholder??r.label,value:l.getFilterValue()??"",onChange:e=>l.setFilterValue(e.target.value),className:"h-9 w-40 lg:w-56",classNames:{input:"text-sm"}});case"number":return t("div",{className:"relative",children:[e(u,{type:"number",inputMode:"numeric",placeholder:r.placeholder??r.label,value:l.getFilterValue()??"",onChange:e=>l.setFilterValue(e.target.value),className:c("h-10 w-[120px]",r.unit&&"pr-8"),classNames:{input:"text-sm"}}),r.unit&&e("span",{className:"absolute top-0 right-0 bottom-0 flex items-center rounded-r-md bg-accent px-2 text-muted-foreground text-sm",children:r.unit})]});case"range":return e(s,{column:l,title:r.label??l.id});case"date":case"dateRange":return e(n,{column:l,title:r.label??l.id,multiple:"dateRange"===r.variant});case"select":case"multiSelect":return e(o,{column:l,title:r.label??l.id,options:r.options??[],multiple:"multiSelect"===r.variant});default:return null}},[l,r])()}}export{p as DataTableToolbar};
|
|
3
3
|
//# sourceMappingURL=data-table-toolbar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components\\data-table\\data-table-toolbar.js","sources":["webpack://@gbmtech/aurora-ui/./src/components/data-table/data-table-toolbar.tsx"],"sourcesContent":["\r\n\r\nimport { XIcon } from '@phosphor-icons/react'\r\nimport type { Column, Table } from '@tanstack/react-table'\r\nimport * as React from 'react'\r\n\r\nimport { Button } from '@/components/button'\r\nimport { DataTableDateFilter } from '@/components/data-table/data-table-date-filter'\r\nimport { DataTableFacetedFilter } from '@/components/data-table/data-table-faceted-filter'\r\nimport { DataTableSliderFilter } from '@/components/data-table/data-table-slider-filter'\r\nimport { DataTableViewOptions } from '@/components/data-table/data-table-view-options'\r\nimport { Input } from '@/components/input'\r\nimport { cn } from '@/lib/utils'\r\n\r\ninterface DataTableToolbarProps<TData> extends React.ComponentProps<'div'> {\r\n table: Table<TData>\r\n}\r\n\r\nexport function DataTableToolbar<TData>({\r\n table,\r\n children,\r\n className,\r\n ...props\r\n}: DataTableToolbarProps<TData>) {\r\n const isFiltered = table.getState().columnFilters.length > 0\r\n\r\n const columns = React.useMemo(\r\n () => table.getAllColumns().filter(column => column.getCanFilter()),\r\n [table]\r\n )\r\n\r\n const onReset = React.useCallback(() => {\r\n table.resetColumnFilters()\r\n }, [table])\r\n\r\n return (\r\n <div\r\n role=\"toolbar\"\r\n aria-orientation=\"horizontal\"\r\n className={cn(\r\n 'flex w-full items-start justify-between gap-2',\r\n className\r\n )}\r\n {...props}\r\n >\r\n <div className=\"flex flex-1 flex-wrap items-center gap-2\">\r\n {columns.map(column => (\r\n <DataTableToolbarFilter key={column.id} column={column} />\r\n ))}\r\n {isFiltered && (\r\n <Button\r\n aria-label=\"Reset filters\"\r\n variant=\"outline\"\r\n size=\"sm\"\r\n onClick={onReset}\r\n >\r\n <XIcon />\r\n Limpar\r\n </Button>\r\n )}\r\n </div>\r\n <div className=\"flex items-center gap-2\">\r\n {children}\r\n <DataTableViewOptions table={table} />\r\n </div>\r\n </div>\r\n )\r\n}\r\ninterface DataTableToolbarFilterProps<TData> {\r\n column: Column<TData>\r\n}\r\n\r\nfunction DataTableToolbarFilter<TData>({\r\n column,\r\n}: DataTableToolbarFilterProps<TData>) {\r\n {\r\n const columnMeta = column.columnDef.meta\r\n\r\n const onFilterRender = React.useCallback(() => {\r\n if (!columnMeta?.variant) return null\r\n\r\n switch (columnMeta.variant) {\r\n case 'text':\r\n return (\r\n <Input\r\n placeholder={columnMeta.placeholder ?? columnMeta.label}\r\n value={(column.getFilterValue() as string) ?? ''}\r\n onChange={event => column.setFilterValue(event.target.value)}\r\n className=\"h-9 w-40 lg:w-56\"\r\n classNames={{\r\n input: 'text-sm',\r\n }}\r\n />\r\n )\r\n\r\n case 'number':\r\n return (\r\n <div className=\"relative\">\r\n <Input\r\n type=\"number\"\r\n inputMode=\"numeric\"\r\n placeholder={columnMeta.placeholder ?? columnMeta.label}\r\n value={(column.getFilterValue() as string) ?? ''}\r\n onChange={event => column.setFilterValue(event.target.value)}\r\n className={cn('h-10 w-[120px]', columnMeta.unit && 'pr-8')}\r\n classNames={{\r\n input: 'text-sm',\r\n }}\r\n />\r\n {columnMeta.unit && (\r\n <span className=\"absolute top-0 right-0 bottom-0 flex items-center rounded-r-md bg-accent px-2 text-muted-foreground text-sm\">\r\n {columnMeta.unit}\r\n </span>\r\n )}\r\n </div>\r\n )\r\n\r\n case 'range':\r\n return (\r\n <DataTableSliderFilter\r\n column={column}\r\n title={columnMeta.label ?? column.id}\r\n />\r\n )\r\n\r\n case 'date':\r\n case 'dateRange':\r\n return (\r\n <DataTableDateFilter\r\n column={column}\r\n title={columnMeta.label ?? column.id}\r\n multiple={columnMeta.variant === 'dateRange'}\r\n />\r\n )\r\n\r\n case 'select':\r\n case 'multiSelect':\r\n return (\r\n <DataTableFacetedFilter\r\n column={column}\r\n title={columnMeta.label ?? column.id}\r\n options={columnMeta.options ?? []}\r\n multiple={columnMeta.variant === 'multiSelect'}\r\n />\r\n )\r\n\r\n default:\r\n return null\r\n }\r\n }, [column, columnMeta])\r\n\r\n return onFilterRender()\r\n }\r\n}\r\n"],"names":["DataTableToolbar","table","children","className","props","isFiltered","columns","React","column","onReset","cn","DataTableToolbarFilter","Button","XIcon","DataTableViewOptions","columnMeta","onFilterRender","Input","event","DataTableSliderFilter","DataTableDateFilter","DataTableFacetedFilter"],"mappings":";
|
|
1
|
+
{"version":3,"file":"components\\data-table\\data-table-toolbar.js","sources":["webpack://@gbmtech/aurora-ui/./src/components/data-table/data-table-toolbar.tsx"],"sourcesContent":["\r\n\r\nimport { XIcon } from '@phosphor-icons/react'\r\nimport type { Column, Table } from '@tanstack/react-table'\r\nimport * as React from 'react'\r\n\r\nimport { Button } from '@/components/button'\r\nimport { DataTableDateFilter } from '@/components/data-table/data-table-date-filter'\r\nimport { DataTableFacetedFilter } from '@/components/data-table/data-table-faceted-filter'\r\nimport { DataTableSliderFilter } from '@/components/data-table/data-table-slider-filter'\r\nimport { DataTableViewOptions } from '@/components/data-table/data-table-view-options'\r\nimport { Input } from '@/components/input'\r\nimport { cn } from '@/lib/utils'\r\n\r\ninterface DataTableToolbarProps<TData> extends React.ComponentProps<'div'> {\r\n table: Table<TData>\r\n}\r\n\r\nexport function DataTableToolbar<TData>({\r\n table,\r\n children,\r\n className,\r\n ...props\r\n}: DataTableToolbarProps<TData>) {\r\n const isFiltered = table.getState().columnFilters.length > 0\r\n\r\n const columns = React.useMemo(\r\n () => table.getAllColumns().filter(column => column.getCanFilter()),\r\n [table]\r\n )\r\n\r\n const onReset = React.useCallback(() => {\r\n table.resetColumnFilters()\r\n }, [table])\r\n\r\n return (\r\n <div\r\n role=\"toolbar\"\r\n aria-orientation=\"horizontal\"\r\n className={cn(\r\n 'flex w-full items-start justify-between gap-2',\r\n className\r\n )}\r\n {...props}\r\n >\r\n <div className=\"flex flex-1 flex-wrap items-center gap-2\">\r\n {columns.map(column => (\r\n <DataTableToolbarFilter key={column.id} column={column} />\r\n ))}\r\n {isFiltered && (\r\n <Button\r\n aria-label=\"Reset filters\"\r\n variant=\"outline\"\r\n size=\"sm\"\r\n onClick={onReset}\r\n >\r\n <XIcon />\r\n Limpar\r\n </Button>\r\n )}\r\n </div>\r\n <div className=\"flex items-center gap-2\">\r\n {children}\r\n <DataTableViewOptions table={table} />\r\n </div>\r\n </div>\r\n )\r\n}\r\ninterface DataTableToolbarFilterProps<TData> {\r\n column: Column<TData>\r\n}\r\n\r\nfunction DataTableToolbarFilter<TData>({\r\n column,\r\n}: DataTableToolbarFilterProps<TData>) {\r\n {\r\n const columnMeta = column.columnDef.meta\r\n\r\n const onFilterRender = React.useCallback(() => {\r\n if (!columnMeta?.variant) return null\r\n\r\n switch (columnMeta.variant) {\r\n case 'text':\r\n return (\r\n <Input\r\n placeholder={columnMeta.placeholder ?? columnMeta.label}\r\n value={(column.getFilterValue() as string) ?? ''}\r\n onChange={event => column.setFilterValue(event.target.value)}\r\n className=\"h-9 w-40 lg:w-56\"\r\n classNames={{\r\n input: 'text-sm',\r\n }}\r\n />\r\n )\r\n\r\n case 'number':\r\n return (\r\n <div className=\"relative\">\r\n <Input\r\n type=\"number\"\r\n inputMode=\"numeric\"\r\n placeholder={columnMeta.placeholder ?? columnMeta.label}\r\n value={(column.getFilterValue() as string) ?? ''}\r\n onChange={event => column.setFilterValue(event.target.value)}\r\n className={cn('h-10 w-[120px]', columnMeta.unit && 'pr-8')}\r\n classNames={{\r\n input: 'text-sm',\r\n }}\r\n />\r\n {columnMeta.unit && (\r\n <span className=\"absolute top-0 right-0 bottom-0 flex items-center rounded-r-md bg-accent px-2 text-muted-foreground text-sm\">\r\n {columnMeta.unit}\r\n </span>\r\n )}\r\n </div>\r\n )\r\n\r\n case 'range':\r\n return (\r\n <DataTableSliderFilter\r\n column={column}\r\n title={columnMeta.label ?? column.id}\r\n />\r\n )\r\n\r\n case 'date':\r\n case 'dateRange':\r\n return (\r\n <DataTableDateFilter\r\n column={column}\r\n title={columnMeta.label ?? column.id}\r\n multiple={columnMeta.variant === 'dateRange'}\r\n />\r\n )\r\n\r\n case 'select':\r\n case 'multiSelect':\r\n return (\r\n <DataTableFacetedFilter\r\n column={column}\r\n title={columnMeta.label ?? column.id}\r\n options={columnMeta.options ?? []}\r\n multiple={columnMeta.variant === 'multiSelect'}\r\n />\r\n )\r\n\r\n default:\r\n return null\r\n }\r\n }, [column, columnMeta])\r\n\r\n return onFilterRender()\r\n }\r\n}\r\n"],"names":["DataTableToolbar","table","children","className","props","isFiltered","columns","React","column","onReset","cn","DataTableToolbarFilter","Button","XIcon","DataTableViewOptions","columnMeta","onFilterRender","Input","event","DataTableSliderFilter","DataTableDateFilter","DataTableFacetedFilter"],"mappings":";uhBAkBO,SAASA,EAAwB,CACtCC,MAAAA,CAAK,CACLC,SAAAA,CAAQ,CACRC,UAAAA,CAAS,CACT,GAAGC,EAC0B,EAC7B,IAAMC,EAAaJ,EAAM,QAAQ,GAAG,aAAa,CAAC,MAAM,CAAG,EAErDK,EAAUC,EACd,IAAMN,EAAM,aAAa,GAAG,MAAM,CAACO,GAAUA,EAAO,YAAY,IAChE,CAACP,EAAM,EAGHQ,EAAUF,EAAkB,KAChCN,EAAM,kBAAkB,EAC1B,EAAG,CAACA,EAAM,EAEV,OACE,EAAC,OACC,KAAK,UACL,mBAAiB,aACjB,UAAWS,EACT,gDACAP,GAED,GAAGC,CAAK,C,UAET,EAAC,OAAI,UAAU,2C,UACZE,EAAQ,GAAG,CAACE,GACX,EAACG,EAAAA,CAAuC,OAAQH,C,EAAnBA,EAAO,EAAE,GAEvCH,GACC,EAACO,EAAMA,CACL,aAAW,gBACX,QAAQ,UACR,KAAK,KACL,QAASH,E,UAET,EAACI,EAAKA,CAAAA,GAAG,S,MAKf,EAAC,OAAI,UAAU,0B,UACZX,EACD,EAACY,EAAoBA,CAAC,MAAOb,C,QAIrC,CAKA,SAASU,EAA8B,CACrCH,OAAAA,CAAM,CAC6B,EACnC,CACE,IAAMO,EAAaP,EAAO,SAAS,CAAC,IAAI,CA2ExC,OAAOQ,EAzEkC,KACvC,GAAI,CAACD,GAAY,QAAS,OAAO,KAEjC,OAAQA,EAAW,OAAO,EACxB,IAAK,OACH,OACE,EAACE,EAAKA,CACJ,YAAaF,EAAW,WAAW,EAAIA,EAAW,KAAK,CACvD,MAAQP,EAAO,cAAc,IAAiB,GAC9C,SAAUU,GAASV,EAAO,cAAc,CAACU,EAAM,MAAM,CAAC,KAAK,EAC3D,UAAU,mBACV,WAAY,CACV,MAAO,SACT,C,EAIN,KAAK,SACH,OACE,EAAC,OAAI,UAAU,W,UACb,EAACD,EAAKA,CACJ,KAAK,SACL,UAAU,UACV,YAAaF,EAAW,WAAW,EAAIA,EAAW,KAAK,CACvD,MAAQP,EAAO,cAAc,IAAiB,GAC9C,SAAUU,GAASV,EAAO,cAAc,CAACU,EAAM,MAAM,CAAC,KAAK,EAC3D,UAAWR,EAAG,iBAAkBK,EAAW,IAAI,EAAI,QACnD,WAAY,CACV,MAAO,SACT,C,GAEDA,EAAW,IAAI,EACd,EAAC,QAAK,UAAU,8G,SACbA,EAAW,IAAI,KAM1B,KAAK,QACH,OACE,EAACI,EAAqBA,CACpB,OAAQX,EACR,MAAOO,EAAW,KAAK,EAAIP,EAAO,EAAE,EAI1C,KAAK,OACL,IAAK,YACH,OACE,EAACY,EAAmBA,CAClB,OAAQZ,EACR,MAAOO,EAAW,KAAK,EAAIP,EAAO,EAAE,CACpC,SAAUO,cAAAA,EAAW,OAAO,EAIlC,KAAK,SACL,IAAK,cACH,OACE,EAACM,EAAsBA,CACrB,OAAQb,EACR,MAAOO,EAAW,KAAK,EAAIP,EAAO,EAAE,CACpC,QAASO,EAAW,OAAO,EAAI,EAAE,CACjC,SAAUA,gBAAAA,EAAW,OAAO,EAIlC,SACE,OAAO,IACX,CACF,EAAG,CAACP,EAAQO,EAAW,GAGzB,CACF,Q"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
'use client'
|
|
2
|
-
import
|
|
2
|
+
import{jsx as e,jsxs as l}from"react/jsx-runtime";import{CaretUpDownIcon as i,CheckIcon as o,SlidersHorizontalIcon as a}from"@phosphor-icons/react";import{Button as r}from"../button.js";import{Command as t,CommandEmpty as n,CommandGroup as c,CommandInput as s,CommandItem as m,CommandList as d}from"../command.js";import{Popover as p,PopoverContent as h,PopoverTrigger as u}from"../popover.js";import{cn as f}from"../../lib/utils.js";import{useMemo as g}from"react";function b({table:b}){let N=g(()=>b.getAllColumns().filter(e=>void 0!==e.accessorFn&&e.getCanHide()),[b]);return N.length<=0?null:l(p,{children:[e(u,{asChild:!0,children:l(r,{"aria-label":"Toggle columns",role:"combobox",variant:"outline",size:"sm",className:"ml-auto hidden lg:flex",children:[e(a,{}),"Ver",e(i,{className:"ml-auto opacity-50"})]})}),e(h,{align:"end",className:"w-44 p-0",children:l(t,{children:[e(s,{placeholder:"Buscar colunas..."}),l(d,{children:[e(n,{children:"Nenhuma coluna encontrada."}),e(c,{children:N.map(i=>l(m,{onSelect:()=>i.toggleVisibility(!i.getIsVisible()),children:[e("span",{className:"truncate",children:i.columnDef.meta?.label??i.id}),e(o,{className:f("ml-auto size-4 shrink-0",i.getIsVisible()?"opacity-100":"opacity-0")})]},i.id))})]})]})})]})}export{b as DataTableViewOptions};
|
|
3
3
|
//# sourceMappingURL=data-table-view-options.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components\\data-table\\data-table-view-options.js","sources":["webpack://@gbmtech/aurora-ui/./src/components/data-table/data-table-view-options.tsx"],"sourcesContent":["\r\n\r\nimport { CaretUpDownIcon, CheckIcon, SlidersHorizontalIcon } from '@phosphor-icons/react'\r\nimport type { Table } from '@tanstack/react-table'\r\n\r\nimport { Button } from '@/components/button'\r\nimport {\r\n Command,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n} from '@/components/command'\r\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/popover'\r\nimport { cn } from '@/lib/utils'\r\nimport * as React from 'react'\r\n\r\ninterface DataTableViewOptionsProps<TData> {\r\n table: Table<TData>\r\n}\r\n\r\nexport function DataTableViewOptions<TData>({\r\n table,\r\n}: DataTableViewOptionsProps<TData>) {\r\n const columns = React.useMemo(\r\n () =>\r\n table\r\n .getAllColumns()\r\n .filter(\r\n column =>\r\n typeof column.accessorFn !== 'undefined' && column.getCanHide()\r\n ),\r\n [table]\r\n )\r\n\r\n if (columns.length <= 0) {\r\n return null\r\n }\r\n\r\n return (\r\n <Popover>\r\n <PopoverTrigger asChild>\r\n <Button\r\n aria-label=\"Toggle columns\"\r\n role=\"combobox\"\r\n variant=\"outline\"\r\n size=\"sm\"\r\n className=\"ml-auto hidden lg:flex\"\r\n >\r\n <SlidersHorizontalIcon />\r\n Ver\r\n <CaretUpDownIcon className=\"ml-auto opacity-50\" />\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent align=\"end\" className=\"w-44 p-0\">\r\n <Command>\r\n <CommandInput placeholder=\"Buscar colunas...\" />\r\n <CommandList>\r\n <CommandEmpty>Nenhuma coluna encontrada.</CommandEmpty>\r\n <CommandGroup>\r\n {columns.map(column => (\r\n <CommandItem\r\n key={column.id}\r\n onSelect={() =>\r\n column.toggleVisibility(!column.getIsVisible())\r\n }\r\n >\r\n <span className=\"truncate\">\r\n {column.columnDef.meta?.label ?? column.id}\r\n </span>\r\n <CheckIcon\r\n className={cn(\r\n 'ml-auto size-4 shrink-0',\r\n column.getIsVisible() ? 'opacity-100' : 'opacity-0'\r\n )}\r\n />\r\n </CommandItem>\r\n ))}\r\n </CommandGroup>\r\n </CommandList>\r\n </Command>\r\n </PopoverContent>\r\n </Popover>\r\n )\r\n}\r\n"],"names":["DataTableViewOptions","table","columns","React","column","Popover","PopoverTrigger","Button","SlidersHorizontalIcon","CaretUpDownIcon","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","CheckIcon","cn"],"mappings":";
|
|
1
|
+
{"version":3,"file":"components\\data-table\\data-table-view-options.js","sources":["webpack://@gbmtech/aurora-ui/./src/components/data-table/data-table-view-options.tsx"],"sourcesContent":["\r\n\r\nimport { CaretUpDownIcon, CheckIcon, SlidersHorizontalIcon } from '@phosphor-icons/react'\r\nimport type { Table } from '@tanstack/react-table'\r\n\r\nimport { Button } from '@/components/button'\r\nimport {\r\n Command,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n} from '@/components/command'\r\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/popover'\r\nimport { cn } from '@/lib/utils'\r\nimport * as React from 'react'\r\n\r\ninterface DataTableViewOptionsProps<TData> {\r\n table: Table<TData>\r\n}\r\n\r\nexport function DataTableViewOptions<TData>({\r\n table,\r\n}: DataTableViewOptionsProps<TData>) {\r\n const columns = React.useMemo(\r\n () =>\r\n table\r\n .getAllColumns()\r\n .filter(\r\n column =>\r\n typeof column.accessorFn !== 'undefined' && column.getCanHide()\r\n ),\r\n [table]\r\n )\r\n\r\n if (columns.length <= 0) {\r\n return null\r\n }\r\n\r\n return (\r\n <Popover>\r\n <PopoverTrigger asChild>\r\n <Button\r\n aria-label=\"Toggle columns\"\r\n role=\"combobox\"\r\n variant=\"outline\"\r\n size=\"sm\"\r\n className=\"ml-auto hidden lg:flex\"\r\n >\r\n <SlidersHorizontalIcon />\r\n Ver\r\n <CaretUpDownIcon className=\"ml-auto opacity-50\" />\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent align=\"end\" className=\"w-44 p-0\">\r\n <Command>\r\n <CommandInput placeholder=\"Buscar colunas...\" />\r\n <CommandList>\r\n <CommandEmpty>Nenhuma coluna encontrada.</CommandEmpty>\r\n <CommandGroup>\r\n {columns.map(column => (\r\n <CommandItem\r\n key={column.id}\r\n onSelect={() =>\r\n column.toggleVisibility(!column.getIsVisible())\r\n }\r\n >\r\n <span className=\"truncate\">\r\n {column.columnDef.meta?.label ?? column.id}\r\n </span>\r\n <CheckIcon\r\n className={cn(\r\n 'ml-auto size-4 shrink-0',\r\n column.getIsVisible() ? 'opacity-100' : 'opacity-0'\r\n )}\r\n />\r\n </CommandItem>\r\n ))}\r\n </CommandGroup>\r\n </CommandList>\r\n </Command>\r\n </PopoverContent>\r\n </Popover>\r\n )\r\n}\r\n"],"names":["DataTableViewOptions","table","columns","React","column","Popover","PopoverTrigger","Button","SlidersHorizontalIcon","CaretUpDownIcon","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","CheckIcon","cn"],"mappings":";kdAsBO,SAASA,EAA4B,CAC1CC,MAAAA,CAAK,CAC4B,EACjC,IAAMC,EAAUC,EACd,IACEF,EACG,aAAa,GACb,MAAM,CACLG,GACE,SAAOA,EAAO,UAAU,EAAoBA,EAAO,UAAU,IAErE,CAACH,EAAM,SAGT,EAAY,MAAM,EAAI,EACb,KAIP,EAACI,EAAOA,C,UACN,EAACC,EAAcA,CAAC,QAAO,G,SACrB,EAACC,EAAMA,CACL,aAAW,iBACX,KAAK,WACL,QAAQ,UACR,KAAK,KACL,UAAU,yB,UAEV,EAACC,EAAqBA,CAAAA,GAAG,MAEzB,EAACC,EAAeA,CAAC,UAAU,oB,QAG/B,EAACC,EAAcA,CAAC,MAAM,MAAM,UAAU,W,SACpC,EAACC,EAAOA,C,UACN,EAACC,EAAYA,CAAC,YAAY,mB,GAC1B,EAACC,EAAWA,C,UACV,EAACC,EAAYA,C,SAAC,4B,GACd,EAACC,EAAYA,C,SACVb,EAAQ,GAAG,CAACE,GACX,EAACY,EAAWA,CAEV,SAAU,IACRZ,EAAO,gBAAgB,CAAC,CAACA,EAAO,YAAY,I,UAG9C,EAAC,QAAK,UAAU,W,SACbA,EAAO,SAAS,CAAC,IAAI,EAAE,OAASA,EAAO,EAAE,GAE5C,EAACa,EAASA,CACR,UAAWC,EACT,0BACAd,EAAO,YAAY,GAAK,cAAgB,Y,KAXvCA,EAAO,EAAE,E,aAsBhC,Q"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as e,jsxs as l}from"react/jsx-runtime";import{flexRender as a}from"@tanstack/react-table";import{DataTablePagination as t}from"./data-table-pagination.js";import{Table as r,TableBody as o,TableCell as c,TableHead as n,TableHeader as i,TableRow as s}from"../table.js";import{getCommonPinningStyles as d}from"../../lib/data-table.js";import{cn as m}from"../../lib/utils.js";import{ContextMenu as h,ContextMenuContent as p,ContextMenuItem as u,ContextMenuTrigger as b}from"../context-menu.js";function f({table:f,actionBar:g,contextMenuOptions:w,children:x,className:N,classNames:C,hasPagination:j=!0,...S}){return l("div",{className:m("flex w-full flex-col gap-2.5 overflow-auto",N),...S,children:[x,l(r,{classNames:{wrapper:C?.table?.wrapper},children:[e(i,{className:C?.table?.header,children:f.getHeaderGroups().map(l=>e(s,{className:C?.table?.row,children:l.headers.map(l=>e(n,{colSpan:l.colSpan,style:{...d({column:l.column})},className:C?.table?.head,children:l.isPlaceholder?null:a(l.column.columnDef.header,l.getContext())},l.id))},l.id))}),e(o,{children:f.getRowModel().rows?.length?f.getRowModel().rows.map(t=>l(h,{children:[e(b,{asChild:!0,children:e(s,{"data-state":t.getIsSelected()&&"selected",className:C?.table?.row,children:t.getVisibleCells().map(l=>e(c,{style:{...d({column:l.column})},className:C?.table?.cell,children:a(l.column.columnDef.cell,l.getContext())},l.id))},t.id)}),w&&e(p,{children:w(t.original).map(l=>e(u,{onClick:l.onClick,children:l.label},l.label))})]},t.id)):e(s,{children:e(c,{colSpan:f.getAllColumns().length,className:"h-24 text-center",children:"Nenhum resultado"})})})]}),l("div",{className:"flex flex-col gap-2.5",children:[j&&e(t,{table:f}),g&&f.getFilteredSelectedRowModel().rows.length>0&&g]})]})}export{f as DataTable};
|
|
2
2
|
//# sourceMappingURL=data-table.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components\\data-table\\data-table.js","sources":["webpack://@gbmtech/aurora-ui/./src/components/data-table/data-table.tsx"],"sourcesContent":["import { type Table as TanstackTable, flexRender } from '@tanstack/react-table'\r\nimport type * as React from 'react'\r\n\r\nimport { DataTablePagination } from '@/components/data-table/data-table-pagination'\r\nimport {\r\n Table,\r\n TableBody,\r\n TableCell,\r\n TableHead,\r\n TableHeader,\r\n TableRow,\r\n} from '@/components/table'\r\nimport { getCommonPinningStyles } from '@/lib/data-table'\r\nimport { cn } from '@/lib/utils'\r\nimport {\r\n ContextMenu,\r\n ContextMenuContent,\r\n ContextMenuItem,\r\n ContextMenuTrigger,\r\n} from '../context-menu'\r\n\r\ninterface DataTableProps<TData> extends React.ComponentProps<'div'> {\r\n table: TanstackTable<TData>\r\n actionBar?: React.ReactNode\r\n contextMenuOptions?: (row: TData) => { label: string; onClick: () => void }[]\r\n classNames?: {\r\n table?: {\r\n wrapper?: string\r\n header?: string\r\n head?: string\r\n row?: string\r\n cell?: string\r\n }\r\n }\r\n hasPagination?: boolean\r\n}\r\n\r\nexport function DataTable<TData>({\r\n table,\r\n actionBar,\r\n contextMenuOptions,\r\n children,\r\n className,\r\n classNames,\r\n hasPagination = true,\r\n ...props\r\n}: DataTableProps<TData>) {\r\n return (\r\n <div\r\n className={cn('flex w-full flex-col gap-2.5 overflow-auto', className)}\r\n {...props}\r\n >\r\n {children}\r\n <Table\r\n classNames={{\r\n wrapper: classNames?.table?.wrapper,\r\n }}\r\n >\r\n <TableHeader className={classNames?.table?.header}>\r\n {table.getHeaderGroups().map(headerGroup => (\r\n <TableRow key={headerGroup.id} className={classNames?.table?.row}>\r\n {headerGroup.headers.map(header => (\r\n <TableHead\r\n key={header.id}\r\n colSpan={header.colSpan}\r\n style={{\r\n ...getCommonPinningStyles({ column: header.column }),\r\n }}\r\n className={classNames?.table?.head}\r\n >\r\n {header.isPlaceholder\r\n ? null\r\n : flexRender(\r\n header.column.columnDef.header,\r\n header.getContext()\r\n )}\r\n </TableHead>\r\n ))}\r\n </TableRow>\r\n ))}\r\n </TableHeader>\r\n <TableBody>\r\n {table.getRowModel().rows?.length ? (\r\n table.getRowModel().rows.map(row => (\r\n <ContextMenu key={row.id}>\r\n <ContextMenuTrigger asChild>\r\n <TableRow\r\n key={row.id}\r\n data-state={row.getIsSelected() && 'selected'}\r\n className={classNames?.table?.row}\r\n >\r\n {row.getVisibleCells().map(cell => (\r\n <TableCell\r\n key={cell.id}\r\n style={{\r\n ...getCommonPinningStyles({ column: cell.column }),\r\n }}\r\n className={classNames?.table?.cell}\r\n >\r\n {flexRender(\r\n cell.column.columnDef.cell,\r\n cell.getContext()\r\n )}\r\n </TableCell>\r\n ))}\r\n </TableRow>\r\n </ContextMenuTrigger>\r\n {contextMenuOptions && (\r\n <ContextMenuContent>\r\n {contextMenuOptions(row.original).map(option => (\r\n <ContextMenuItem\r\n key={option.label}\r\n onClick={option.onClick}\r\n >\r\n {option.label}\r\n </ContextMenuItem>\r\n ))}\r\n </ContextMenuContent>\r\n )}\r\n </ContextMenu>\r\n ))\r\n ) : (\r\n <TableRow>\r\n <TableCell\r\n colSpan={table.getAllColumns().length}\r\n className=\"h-24 text-center\"\r\n >\r\n Nenhum resultado\r\n </TableCell>\r\n </TableRow>\r\n )}\r\n </TableBody>\r\n </Table>\r\n <div className=\"flex flex-col gap-2.5\">\r\n {hasPagination && <DataTablePagination table={table} />}\r\n {actionBar &&\r\n table.getFilteredSelectedRowModel().rows.length > 0 &&\r\n actionBar}\r\n </div>\r\n </div>\r\n )\r\n}\r\n"],"names":["DataTable","table","actionBar","contextMenuOptions","children","className","classNames","hasPagination","props","cn","Table","TableHeader","headerGroup","TableRow","header","TableHead","getCommonPinningStyles","flexRender","TableBody","row","ContextMenu","ContextMenuTrigger","cell","TableCell","ContextMenuContent","option","ContextMenuItem","DataTablePagination"],"mappings":"
|
|
1
|
+
{"version":3,"file":"components\\data-table\\data-table.js","sources":["webpack://@gbmtech/aurora-ui/./src/components/data-table/data-table.tsx"],"sourcesContent":["import { type Table as TanstackTable, flexRender } from '@tanstack/react-table'\r\nimport type * as React from 'react'\r\n\r\nimport { DataTablePagination } from '@/components/data-table/data-table-pagination'\r\nimport {\r\n Table,\r\n TableBody,\r\n TableCell,\r\n TableHead,\r\n TableHeader,\r\n TableRow,\r\n} from '@/components/table'\r\nimport { getCommonPinningStyles } from '@/lib/data-table'\r\nimport { cn } from '@/lib/utils'\r\nimport {\r\n ContextMenu,\r\n ContextMenuContent,\r\n ContextMenuItem,\r\n ContextMenuTrigger,\r\n} from '../context-menu'\r\n\r\ninterface DataTableProps<TData> extends React.ComponentProps<'div'> {\r\n table: TanstackTable<TData>\r\n actionBar?: React.ReactNode\r\n contextMenuOptions?: (row: TData) => { label: string; onClick: () => void }[]\r\n classNames?: {\r\n table?: {\r\n wrapper?: string\r\n header?: string\r\n head?: string\r\n row?: string\r\n cell?: string\r\n }\r\n }\r\n hasPagination?: boolean\r\n}\r\n\r\nexport function DataTable<TData>({\r\n table,\r\n actionBar,\r\n contextMenuOptions,\r\n children,\r\n className,\r\n classNames,\r\n hasPagination = true,\r\n ...props\r\n}: DataTableProps<TData>) {\r\n return (\r\n <div\r\n className={cn('flex w-full flex-col gap-2.5 overflow-auto', className)}\r\n {...props}\r\n >\r\n {children}\r\n <Table\r\n classNames={{\r\n wrapper: classNames?.table?.wrapper,\r\n }}\r\n >\r\n <TableHeader className={classNames?.table?.header}>\r\n {table.getHeaderGroups().map(headerGroup => (\r\n <TableRow key={headerGroup.id} className={classNames?.table?.row}>\r\n {headerGroup.headers.map(header => (\r\n <TableHead\r\n key={header.id}\r\n colSpan={header.colSpan}\r\n style={{\r\n ...getCommonPinningStyles({ column: header.column }),\r\n }}\r\n className={classNames?.table?.head}\r\n >\r\n {header.isPlaceholder\r\n ? null\r\n : flexRender(\r\n header.column.columnDef.header,\r\n header.getContext()\r\n )}\r\n </TableHead>\r\n ))}\r\n </TableRow>\r\n ))}\r\n </TableHeader>\r\n <TableBody>\r\n {table.getRowModel().rows?.length ? (\r\n table.getRowModel().rows.map(row => (\r\n <ContextMenu key={row.id}>\r\n <ContextMenuTrigger asChild>\r\n <TableRow\r\n key={row.id}\r\n data-state={row.getIsSelected() && 'selected'}\r\n className={classNames?.table?.row}\r\n >\r\n {row.getVisibleCells().map(cell => (\r\n <TableCell\r\n key={cell.id}\r\n style={{\r\n ...getCommonPinningStyles({ column: cell.column }),\r\n }}\r\n className={classNames?.table?.cell}\r\n >\r\n {flexRender(\r\n cell.column.columnDef.cell,\r\n cell.getContext()\r\n )}\r\n </TableCell>\r\n ))}\r\n </TableRow>\r\n </ContextMenuTrigger>\r\n {contextMenuOptions && (\r\n <ContextMenuContent>\r\n {contextMenuOptions(row.original).map(option => (\r\n <ContextMenuItem\r\n key={option.label}\r\n onClick={option.onClick}\r\n >\r\n {option.label}\r\n </ContextMenuItem>\r\n ))}\r\n </ContextMenuContent>\r\n )}\r\n </ContextMenu>\r\n ))\r\n ) : (\r\n <TableRow>\r\n <TableCell\r\n colSpan={table.getAllColumns().length}\r\n className=\"h-24 text-center\"\r\n >\r\n Nenhum resultado\r\n </TableCell>\r\n </TableRow>\r\n )}\r\n </TableBody>\r\n </Table>\r\n <div className=\"flex flex-col gap-2.5\">\r\n {hasPagination && <DataTablePagination table={table} />}\r\n {actionBar &&\r\n table.getFilteredSelectedRowModel().rows.length > 0 &&\r\n actionBar}\r\n </div>\r\n </div>\r\n )\r\n}\r\n"],"names":["DataTable","table","actionBar","contextMenuOptions","children","className","classNames","hasPagination","props","cn","Table","TableHeader","headerGroup","TableRow","header","TableHead","getCommonPinningStyles","flexRender","TableBody","row","ContextMenu","ContextMenuTrigger","cell","TableCell","ContextMenuContent","option","ContextMenuItem","DataTablePagination"],"mappings":"qfAqCO,SAASA,EAAiB,CAC/BC,MAAAA,CAAK,CACLC,UAAAA,CAAS,CACTC,mBAAAA,CAAkB,CAClBC,SAAAA,CAAQ,CACRC,UAAAA,CAAS,CACTC,WAAAA,CAAU,CACVC,cAAAA,EAAgB,EAAI,CACpB,GAAGC,EACmB,EACtB,OACE,EAAC,OACC,UAAWC,EAAG,6CAA8CJ,GAC3D,GAAGG,CAAK,C,UAERJ,EACD,EAACM,EAAKA,CACJ,WAAY,CACV,QAASJ,GAAY,OAAO,OAC9B,E,UAEA,EAACK,EAAWA,CAAC,UAAWL,GAAY,OAAO,O,SACxCL,EAAM,eAAe,GAAG,GAAG,CAACW,AAAAA,GAC3B,EAACC,EAAQA,CAAsB,UAAWP,GAAY,OAAO,I,SAC1DM,EAAY,OAAO,CAAC,GAAG,CAACE,AAAAA,GACvB,EAACC,EAASA,CAER,QAASD,EAAO,OAAO,CACvB,MAAO,CACL,GAAGE,EAAuB,CAAE,OAAQF,EAAO,MAAM,AAAC,EAAE,AACtD,EACA,UAAWR,GAAY,OAAO,K,SAE7BQ,EAAO,aAAa,CACjB,KACAG,EACEH,EAAO,MAAM,CAAC,SAAS,CAAC,MAAM,CAC9BA,EAAO,UAAU,G,EAXlBA,EAAO,EAAE,E,EAHLF,EAAY,EAAE,E,GAqBjC,EAACM,EAASA,C,SACPjB,EAAM,WAAW,GAAG,IAAI,EAAE,OACzBA,EAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAACkB,AAAAA,GAC3B,EAACC,EAAWA,C,UACV,EAACC,EAAkBA,CAAC,QAAO,G,SACzB,EAACR,EAAQA,CAEP,aAAYM,EAAI,aAAa,IAAM,WACnC,UAAWb,GAAY,OAAO,I,SAE7Ba,EAAI,eAAe,GAAG,GAAG,CAACG,AAAAA,GACzB,EAACC,EAASA,CAER,MAAO,CACL,GAAGP,EAAuB,CAAE,OAAQM,EAAK,MAAM,AAAC,EAAE,AACpD,EACA,UAAWhB,GAAY,OAAO,K,SAE7BW,EACCK,EAAK,MAAM,CAAC,SAAS,CAAC,IAAI,CAC1BA,EAAK,UAAU,G,EARZA,EAAK,EAAE,E,EANXH,EAAI,EAAE,C,GAoBdhB,GACC,EAACqB,EAAkBA,C,SAChBrB,EAAmBgB,EAAI,QAAQ,EAAE,GAAG,CAACM,AAAAA,GACpC,EAACC,EAAeA,CAEd,QAASD,EAAO,OAAO,C,SAEtBA,EAAO,KAAK,A,EAHRA,EAAO,KAAK,E,KA3BTN,EAAI,EAAE,GAsC1B,EAACN,EAAQA,C,SACP,EAACU,EAASA,CACR,QAAStB,EAAM,aAAa,GAAG,MAAM,CACrC,UAAU,mB,SACX,kB,UAOT,EAAC,OAAI,UAAU,wB,UACZM,GAAiB,EAACoB,EAAmBA,CAAC,MAAO1B,C,GAC7CC,GACCD,EAAM,2BAA2B,GAAG,IAAI,CAAC,MAAM,CAAG,GAClDC,E,KAIV,Q"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as t from"./data-table-pagination.js";import*as a from"./data-table-
|
|
1
|
+
import*as t from"./data-table-pagination.js";import*as a from"./data-table-range-filter.js";export*from"./data-table-action-bar.js";export*from"./data-table-advanced-toolbar.js";export*from"./data-table-column-header.js";export*from"./data-table-date-filter.js";export*from"./data-table-faceted-filter.js";export*from"./data-table-filter-list.js";export*from"./data-table-filter-menu.js";export*from"./data-table-skeleton.js";export*from"./data-table-slider-filter.js";export*from"./data-table-sort-list.js";export*from"./data-table-toolbar.js";export*from"./data-table-view-options.js";export*from"./data-table.js";var e={"@/components/data-table/data-table-pagination":function(a){a.exports=t},"@/components/data-table/data-table-range-filter":function(t){t.exports=a}},r={};function o(t){var a=r[t];if(void 0!==a)return a.exports;var n=r[t]={exports:{}};return e[t](n,n.exports,o),n.exports}o.d=(t,a)=>{for(var e in a)o.o(a,e)&&!o.o(t,e)&&Object.defineProperty(t,e,{enumerable:!0,get:a[e]})},o.o=(t,a)=>Object.prototype.hasOwnProperty.call(t,a),o.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var n={};o.r(n);var l=o("@/components/data-table/data-table-pagination"),d={};for(var f in l)"default"!==f&&(d[f]=(function(t){return l[t]}).bind(0,f));o.d(n,d);var i=o("@/components/data-table/data-table-range-filter"),d={};for(var f in i)"default"!==f&&(d[f]=(function(t){return i[t]}).bind(0,f));o.d(n,d);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
1
|
+
"use client";
|
|
2
|
+
import{Fragment as r,jsx as e,jsxs as o}from"react/jsx-runtime";import{CalendarBlankIcon as t}from"@phosphor-icons/react/dist/ssr";import{format as i}from"date-fns";import{useState as d}from"react";import{cn as m}from"../lib/utils.js";import{Button as n}from"./button.js";import{Calendar as a}from"./calendar.js";import{Popover as s,PopoverContent as l,PopoverTrigger as f}from"./popover.js";function c({startDate:c,endDate:p,onChange:h,placeholder:y,className:u,disabled:M=!1}){let[b,g]=d({from:c,to:p});return o(s,{children:[e(f,{asChild:!0,children:o(n,{id:"date",variant:"outline",className:m("h-12 min-w-60 justify-between overflow-hidden rounded-md px-4 text-left font-normal hover:bg-gray-50",!(b?.from||b?.to)&&"text-gray-400",u),disabled:M,children:[e("div",{children:b?.from?b.to?o(r,{children:[i(b.from,"dd/MM/yyyy")," -"," ",i(b.to,"dd/MM/yyyy")]}):i(b.from,"dd/MM/yyyy"):e("span",{children:y||"Selecione o per\xedodo"})}),e(t,{className:"ml-2 size-4 text-gray-600"})]})}),e(l,{className:"w-auto p-0",align:"start",children:e(a,{autoFocus:!0,mode:"range",defaultMonth:b?.from,selected:b,onSelect:r=>{g(r),h?.(r)},numberOfMonths:2,disabled:M})})]})}export{c as DatePickerWithRange};
|
|
3
3
|
//# sourceMappingURL=date-picker-with-range.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components\\date-picker-with-range.js","sources":["webpack://@gbmtech/aurora-ui/./src/components/date-picker-with-range.tsx"],"sourcesContent":["\r\n\r\nimport {
|
|
1
|
+
{"version":3,"file":"components\\date-picker-with-range.js","sources":["webpack://@gbmtech/aurora-ui/./src/components/date-picker-with-range.tsx"],"sourcesContent":["\r\n\r\nimport { CalendarBlankIcon } from '@phosphor-icons/react/dist/ssr'\r\nimport { format } from 'date-fns'\r\nimport { useState } from 'react'\r\nimport { DateRange } from 'react-day-picker'\r\n\r\nimport { cn } from '../lib/utils'\r\nimport { Button } from './button'\r\nimport { Calendar } from './calendar'\r\nimport { Popover, PopoverContent, PopoverTrigger } from './popover'\r\n\r\ninterface DatePickerWithRangeProps {\r\n startDate?: Date\r\n endDate?: Date\r\n placeholder?: string\r\n className?: string\r\n disabled?: boolean\r\n onChange?: (date: DateRange | undefined) => void\r\n}\r\n\r\n/* -----------------------------------------------------------------------------\r\n * Component: DatePickerWithRange\r\n * -------------------------------------------------------------------------- */\r\n\r\nfunction DatePickerWithRange({\r\n startDate,\r\n endDate,\r\n onChange,\r\n placeholder,\r\n className,\r\n disabled = false,\r\n}: DatePickerWithRangeProps) {\r\n const [date, setDate] = useState<DateRange | undefined>({\r\n from: startDate,\r\n to: endDate,\r\n })\r\n\r\n const isRangeSelected = date?.from || date?.to\r\n\r\n return (\r\n <Popover>\r\n <PopoverTrigger asChild>\r\n <Button\r\n id=\"date\"\r\n variant=\"outline\"\r\n className={cn(\r\n 'h-12 min-w-60 justify-between overflow-hidden rounded-md px-4 text-left font-normal hover:bg-gray-50',\r\n !isRangeSelected && 'text-gray-400',\r\n className\r\n )}\r\n disabled={disabled}\r\n >\r\n <div>\r\n {date?.from ? (\r\n date.to ? (\r\n <>\r\n {format(date.from, 'dd/MM/yyyy')} -{' '}\r\n {format(date.to, 'dd/MM/yyyy')}\r\n </>\r\n ) : (\r\n format(date.from, 'dd/MM/yyyy')\r\n )\r\n ) : (\r\n <span>{placeholder || 'Selecione o período'}</span>\r\n )}\r\n </div>\r\n <CalendarBlankIcon className=\"ml-2 size-4 text-gray-600\" />\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent className=\"w-auto p-0\" align=\"start\">\r\n <Calendar\r\n autoFocus\r\n mode=\"range\"\r\n defaultMonth={date?.from}\r\n selected={date}\r\n onSelect={date => {\r\n setDate(date)\r\n onChange?.(date)\r\n }}\r\n numberOfMonths={2}\r\n disabled={disabled}\r\n />\r\n </PopoverContent>\r\n </Popover>\r\n )\r\n}\r\n\r\n/* -----------------------------------------------------------------------------\r\n * Exports\r\n * -------------------------------------------------------------------------- */\r\n\r\nexport { DatePickerWithRange }\r\n"],"names":["DatePickerWithRange","startDate","endDate","onChange","placeholder","className","disabled","date","setDate","useState","Popover","PopoverTrigger","Button","cn","format","CalendarBlankIcon","PopoverContent","Calendar"],"mappings":";wYAyBA,SAASA,EAAoB,CAC3BC,UAAAA,CAAS,CACTC,QAAAA,CAAO,CACPC,SAAAA,CAAQ,CACRC,YAAAA,CAAW,CACXC,UAAAA,CAAS,CACTC,SAAAA,EAAW,EAAK,CACS,EACzB,GAAM,CAACC,EAAMC,EAAQ,CAAGC,EAAgC,CACtD,KAAMR,EACN,GAAIC,CACN,GAIA,OACE,EAACQ,EAAOA,C,UACN,EAACC,EAAcA,CAAC,QAAO,G,SACrB,EAACC,EAAMA,CACL,GAAG,OACH,QAAQ,UACR,UAAWC,EACT,uGACA,CAVcN,CAAAA,GAAM,MAAQA,GAAM,EAAC,GAUf,gBACpBF,GAEF,SAAUC,E,UAEV,EAAC,O,SACEC,GAAM,KACLA,EAAK,EAAE,CACL,K,UACGO,EAAOP,EAAK,IAAI,CAAE,cAAc,KAAG,IACnCO,EAAOP,EAAK,EAAE,CAAE,c,GAGnBO,EAAOP,EAAK,IAAI,CAAE,cAGpB,EAAC,Q,SAAMH,GAAe,wB,KAG1B,EAACW,EAAiBA,CAAC,UAAU,2B,QAGjC,EAACC,EAAcA,CAAC,UAAU,aAAa,MAAM,Q,SAC3C,EAACC,EAAQA,CACP,UAAS,GACT,KAAK,QACL,aAAcV,GAAM,KACpB,SAAUA,EACV,SAAUA,IACRC,EAAQD,GACRJ,IAAWI,EACb,EACA,eAAgB,EAChB,SAAUD,C,OAKpB,Q"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
'use client'
|
|
2
|
-
import
|
|
2
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{CalendarBlank as r}from"@phosphor-icons/react";import{format as o}from"date-fns";import{useState as i}from"react";import{cn as a}from"../lib/utils.js";import{Button as m}from"./button.js";import{Calendar as n}from"./calendar.js";import{Popover as s,PopoverContent as l,PopoverTrigger as d}from"./popover.js";function c({date:c,defaultValue:p,placeholder:f,className:u,disabled:h=!1,onChange:y,...x}){let[g,j]=i(c);return t(s,{children:[e(d,{asChild:!0,children:t(m,{id:"date",variant:"outline",size:"default",className:a("min-w-60 justify-between rounded-md px-4 text-left font-normal text-sm hover:bg-gray-50",!g&&"text-gray-400",u),disabled:h,children:[g?o(g,"dd/MM/yyyy"):e("span",{children:f||"Selecione a data"}),e(r,{className:"ml-4 size-4 text-gray-600"})]})}),e(l,{className:"w-auto p-0",align:"start",children:e(n,{...x,mode:"single",selected:g??p,onSelect:e=>{j(e),y?.(e)}})})]})}export{c as DatePicker};
|
|
3
3
|
//# sourceMappingURL=date-picker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components\\date-picker.js","sources":["webpack://@gbmtech/aurora-ui/./src/components/date-picker.tsx"],"sourcesContent":["\r\n\r\nimport { CalendarBlank } from '@phosphor-icons/react'\r\nimport { format } from 'date-fns'\r\nimport { ComponentProps, useState } from 'react'\r\n\r\nimport { cn } from '../lib/utils'\r\nimport { Button } from './button'\r\nimport { Calendar } from './calendar'\r\nimport { Popover, PopoverContent, PopoverTrigger } from './popover'\r\n\r\n/* -----------------------------------------------------------------------------\r\n * Component: DateTimePicker\r\n * -------------------------------------------------------------------------- */\r\n\r\nfunction DatePicker({\r\n date,\r\n defaultValue,\r\n placeholder,\r\n className,\r\n disabled = false,\r\n onChange,\r\n ...props\r\n}: ComponentProps<typeof Calendar> & {\r\n date?: Date\r\n defaultValue?: Date\r\n placeholder?: string\r\n className?: string\r\n disabled?: boolean\r\n onChange?: (date: Date | undefined) => void\r\n}) {\r\n const [currentDate, setCurrentDate] = useState<Date | undefined>(date)\r\n\r\n return (\r\n <Popover>\r\n <PopoverTrigger asChild>\r\n <Button\r\n id=\"date\"\r\n variant=\"outline\"\r\n size=\"default\"\r\n className={cn(\r\n 'min-w-60 justify-between rounded-md px-4 text-left font-normal text-sm hover:bg-gray-50',\r\n !currentDate && 'text-gray-400',\r\n className\r\n )}\r\n disabled={disabled}\r\n >\r\n {currentDate ? (\r\n format(currentDate, 'dd/MM/yyyy')\r\n ) : (\r\n <span>{placeholder || 'Selecione a data'}</span>\r\n )}\r\n <CalendarBlank className=\"ml-4 size-4 text-gray-600\" />\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent className=\"w-auto p-0\" align=\"start\">\r\n <Calendar\r\n {...props}\r\n mode=\"single\"\r\n selected={currentDate ?? defaultValue}\r\n onSelect={date => {\r\n setCurrentDate(date)\r\n onChange?.(date)\r\n }}\r\n />\r\n </PopoverContent>\r\n </Popover>\r\n )\r\n}\r\n\r\n/* -----------------------------------------------------------------------------\r\n * Exports\r\n * -------------------------------------------------------------------------- */\r\n\r\nexport { DatePicker }\r\n"],"names":["DatePicker","date","defaultValue","placeholder","className","disabled","onChange","props","currentDate","setCurrentDate","useState","Popover","PopoverTrigger","Button","cn","format","CalendarBlank","PopoverContent","Calendar"],"mappings":";
|
|
1
|
+
{"version":3,"file":"components\\date-picker.js","sources":["webpack://@gbmtech/aurora-ui/./src/components/date-picker.tsx"],"sourcesContent":["\r\n\r\nimport { CalendarBlank } from '@phosphor-icons/react'\r\nimport { format } from 'date-fns'\r\nimport { ComponentProps, useState } from 'react'\r\n\r\nimport { cn } from '../lib/utils'\r\nimport { Button } from './button'\r\nimport { Calendar } from './calendar'\r\nimport { Popover, PopoverContent, PopoverTrigger } from './popover'\r\n\r\n/* -----------------------------------------------------------------------------\r\n * Component: DateTimePicker\r\n * -------------------------------------------------------------------------- */\r\n\r\nfunction DatePicker({\r\n date,\r\n defaultValue,\r\n placeholder,\r\n className,\r\n disabled = false,\r\n onChange,\r\n ...props\r\n}: ComponentProps<typeof Calendar> & {\r\n date?: Date\r\n defaultValue?: Date\r\n placeholder?: string\r\n className?: string\r\n disabled?: boolean\r\n onChange?: (date: Date | undefined) => void\r\n}) {\r\n const [currentDate, setCurrentDate] = useState<Date | undefined>(date)\r\n\r\n return (\r\n <Popover>\r\n <PopoverTrigger asChild>\r\n <Button\r\n id=\"date\"\r\n variant=\"outline\"\r\n size=\"default\"\r\n className={cn(\r\n 'min-w-60 justify-between rounded-md px-4 text-left font-normal text-sm hover:bg-gray-50',\r\n !currentDate && 'text-gray-400',\r\n className\r\n )}\r\n disabled={disabled}\r\n >\r\n {currentDate ? (\r\n format(currentDate, 'dd/MM/yyyy')\r\n ) : (\r\n <span>{placeholder || 'Selecione a data'}</span>\r\n )}\r\n <CalendarBlank className=\"ml-4 size-4 text-gray-600\" />\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent className=\"w-auto p-0\" align=\"start\">\r\n <Calendar\r\n {...props}\r\n mode=\"single\"\r\n selected={currentDate ?? defaultValue}\r\n onSelect={date => {\r\n setCurrentDate(date)\r\n onChange?.(date)\r\n }}\r\n />\r\n </PopoverContent>\r\n </Popover>\r\n )\r\n}\r\n\r\n/* -----------------------------------------------------------------------------\r\n * Exports\r\n * -------------------------------------------------------------------------- */\r\n\r\nexport { DatePicker }\r\n"],"names":["DatePicker","date","defaultValue","placeholder","className","disabled","onChange","props","currentDate","setCurrentDate","useState","Popover","PopoverTrigger","Button","cn","format","CalendarBlank","PopoverContent","Calendar"],"mappings":";6WAeA,SAASA,EAAW,CAClBC,KAAAA,CAAI,CACJC,aAAAA,CAAY,CACZC,YAAAA,CAAW,CACXC,UAAAA,CAAS,CACTC,SAAAA,EAAW,EAAK,CAChBC,SAAAA,CAAQ,CACR,GAAGC,EAQJ,EACC,GAAM,CAACC,EAAaC,EAAe,CAAGC,EAA2BT,GAEjE,OACE,EAACU,EAAOA,C,UACN,EAACC,EAAcA,CAAC,QAAO,G,SACrB,EAACC,EAAMA,CACL,GAAG,OACH,QAAQ,UACR,KAAK,UACL,UAAWC,EACT,0FACA,CAACN,GAAe,gBAChBJ,GAEF,SAAUC,E,UAETG,EACCO,EAAOP,EAAa,cAEpB,EAAC,Q,SAAML,GAAe,kB,GAExB,EAACa,EAAaA,CAAC,UAAU,2B,QAG7B,EAACC,EAAcA,CAAC,UAAU,aAAa,MAAM,Q,SAC3C,EAACC,EAAQA,CACN,GAAGX,CAAK,CACT,KAAK,SACL,SAAUC,GAAeN,EACzB,SAAUD,IACRQ,EAAeR,GACfK,IAAWL,EACb,C,OAKV,Q"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
'use client'
|
|
2
|
-
import
|
|
2
|
+
import{jsx as e,jsxs as o}from"react/jsx-runtime";import{CalendarBlank as r,X as t}from"@phosphor-icons/react/dist/ssr";import{format as m}from"date-fns";import{useState as i}from"react";import{cn as a}from"../lib/utils.js";import{Button as l}from"./button.js";import{Calendar as n}from"./calendar.js";import{Popover as f,PopoverContent as s,PopoverTrigger as d}from"./popover.js";import{TimePicker as c}from"./time-picker.js";function p({startDate:p,endDate:h,onChange:y,placeholder:u,className:x,disabled:j=!1}){let[v,b]=i({from:p,to:h}),g=e=>{if(!e){b(void 0),y?.(void 0);return}b({from:e.from??v?.from,to:e.to}),y?.({from:e.from??v?.from,to:e.to})};return o(f,{children:[e(d,{asChild:!0,children:o(l,{id:"date",variant:"outline",className:a("h-12 min-w-96 justify-between px-4 text-left font-normal",!v?.from&&!v?.to&&"text-gray-400",x),disabled:j,children:[v?.from?v.to?`${m(v.from,"dd/MM/yyyy HH:mm")} - ${m(v.to,"dd/MM/yyyy HH:mm")}`:m(v.from,"dd/MM/yyyy HH:mm"):e("span",{children:u||"Selecione o per\xedodo"}),e(r,{size:20,className:"ml-2 text-gray-600"})]})}),o(s,{className:"w-auto p-0",children:[e(n,{mode:"range",selected:v,onSelect:g,numberOfMonths:2}),e("div",{className:"flex flex-col border-stroke border-t p-3",children:o("div",{className:"flex justify-between gap-4",children:[e(c,{onTimeChange:e=>g({...v,from:e}),date:v?.from}),e(c,{onTimeChange:e=>g({...v,to:e}),date:v?.to})]})}),e("div",{className:"flex flex-1 justify-center",children:o(l,{variant:"outline",className:"flex h-12 flex-1",onClick:()=>g(void 0),children:[e(t,{size:12})," Clear"]})})]})]})}export{p as DateTimePickerWithRange};
|
|
3
3
|
//# sourceMappingURL=date-time-picker-with-range.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components\\date-time-picker-with-range.js","sources":["webpack://@gbmtech/aurora-ui/./src/components/date-time-picker-with-range.tsx"],"sourcesContent":["\r\n\r\nimport { CalendarBlank, X } from '@phosphor-icons/react/dist/ssr'\r\nimport { format } from 'date-fns'\r\nimport { useState } from 'react'\r\nimport { DateRange } from 'react-day-picker'\r\n\r\nimport { cn } from '../lib/utils'\r\nimport { Button } from './button'\r\nimport { Calendar } from './calendar'\r\nimport { Popover, PopoverContent, PopoverTrigger } from './popover'\r\nimport { TimePicker } from './time-picker'\r\n\r\ninterface DateTimePickerWithRangeProps {\r\n startDate?: Date\r\n endDate?: Date\r\n placeholder?: string\r\n className?: string\r\n disabled?: boolean\r\n onChange?: (date: DateRange | undefined) => void\r\n}\r\n\r\n/* -----------------------------------------------------------------------------\r\n * Component: DateTimePickerWithRange\r\n * -------------------------------------------------------------------------- */\r\n\r\nfunction DateTimePickerWithRange({\r\n startDate,\r\n endDate,\r\n onChange,\r\n placeholder,\r\n className,\r\n disabled = false,\r\n}: DateTimePickerWithRangeProps) {\r\n const [dateRange, setDateRange] = useState<DateRange | undefined>({\r\n from: startDate,\r\n to: endDate,\r\n })\r\n\r\n const handleDateChange = (newRange: Partial<DateRange> | undefined) => {\r\n if (!newRange) {\r\n setDateRange(undefined)\r\n onChange?.(undefined)\r\n return\r\n }\r\n\r\n setDateRange({\r\n from: newRange.from ?? dateRange?.from,\r\n to: newRange.to,\r\n })\r\n onChange?.({\r\n from: newRange.from ?? dateRange?.from,\r\n to: newRange.to,\r\n })\r\n }\r\n\r\n return (\r\n <Popover>\r\n <PopoverTrigger asChild>\r\n <Button\r\n id=\"date\"\r\n variant=\"outline\"\r\n className={cn(\r\n 'h-12 min-w-96 justify-between px-4 text-left font-normal',\r\n !dateRange?.from && !dateRange?.to && 'text-gray-400',\r\n className\r\n )}\r\n disabled={disabled}\r\n >\r\n {dateRange?.from ? (\r\n dateRange.to ? (\r\n `${format(dateRange.from, 'dd/MM/yyyy HH:mm')} - ${format(dateRange.to, 'dd/MM/yyyy HH:mm')}`\r\n ) : (\r\n format(dateRange.from, 'dd/MM/yyyy HH:mm')\r\n )\r\n ) : (\r\n <span>{placeholder || 'Selecione o período'}</span>\r\n )}\r\n <CalendarBlank size={20} className=\"ml-2 text-gray-600\" />\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent className=\"w-auto p-0\">\r\n <Calendar\r\n mode=\"range\"\r\n selected={dateRange}\r\n onSelect={handleDateChange}\r\n numberOfMonths={2}\r\n />\r\n <div className=\"flex flex-col border-stroke border-t p-3\">\r\n <div className=\"flex justify-between gap-4\">\r\n <TimePicker\r\n onTimeChange={date =>\r\n handleDateChange({ ...dateRange, from: date })\r\n }\r\n date={dateRange?.from}\r\n />\r\n <TimePicker\r\n onTimeChange={date =>\r\n handleDateChange({ ...dateRange, to: date })\r\n }\r\n date={dateRange?.to}\r\n />\r\n </div>\r\n </div>\r\n <div className=\"flex flex-1 justify-center\">\r\n <Button\r\n variant=\"outline\"\r\n className=\"flex h-12 flex-1\"\r\n onClick={() => handleDateChange(undefined)}\r\n >\r\n <X size={12} /> Clear\r\n </Button>\r\n </div>\r\n </PopoverContent>\r\n </Popover>\r\n )\r\n}\r\n\r\n/* -----------------------------------------------------------------------------\r\n * Exports\r\n * -------------------------------------------------------------------------- */\r\n\r\nexport { DateTimePickerWithRange }\r\n"],"names":["DateTimePickerWithRange","startDate","endDate","onChange","placeholder","className","disabled","dateRange","setDateRange","useState","handleDateChange","newRange","undefined","Popover","PopoverTrigger","Button","cn","format","CalendarBlank","PopoverContent","Calendar","TimePicker","date","X"],"mappings":";
|
|
1
|
+
{"version":3,"file":"components\\date-time-picker-with-range.js","sources":["webpack://@gbmtech/aurora-ui/./src/components/date-time-picker-with-range.tsx"],"sourcesContent":["\r\n\r\nimport { CalendarBlank, X } from '@phosphor-icons/react/dist/ssr'\r\nimport { format } from 'date-fns'\r\nimport { useState } from 'react'\r\nimport { DateRange } from 'react-day-picker'\r\n\r\nimport { cn } from '../lib/utils'\r\nimport { Button } from './button'\r\nimport { Calendar } from './calendar'\r\nimport { Popover, PopoverContent, PopoverTrigger } from './popover'\r\nimport { TimePicker } from './time-picker'\r\n\r\ninterface DateTimePickerWithRangeProps {\r\n startDate?: Date\r\n endDate?: Date\r\n placeholder?: string\r\n className?: string\r\n disabled?: boolean\r\n onChange?: (date: DateRange | undefined) => void\r\n}\r\n\r\n/* -----------------------------------------------------------------------------\r\n * Component: DateTimePickerWithRange\r\n * -------------------------------------------------------------------------- */\r\n\r\nfunction DateTimePickerWithRange({\r\n startDate,\r\n endDate,\r\n onChange,\r\n placeholder,\r\n className,\r\n disabled = false,\r\n}: DateTimePickerWithRangeProps) {\r\n const [dateRange, setDateRange] = useState<DateRange | undefined>({\r\n from: startDate,\r\n to: endDate,\r\n })\r\n\r\n const handleDateChange = (newRange: Partial<DateRange> | undefined) => {\r\n if (!newRange) {\r\n setDateRange(undefined)\r\n onChange?.(undefined)\r\n return\r\n }\r\n\r\n setDateRange({\r\n from: newRange.from ?? dateRange?.from,\r\n to: newRange.to,\r\n })\r\n onChange?.({\r\n from: newRange.from ?? dateRange?.from,\r\n to: newRange.to,\r\n })\r\n }\r\n\r\n return (\r\n <Popover>\r\n <PopoverTrigger asChild>\r\n <Button\r\n id=\"date\"\r\n variant=\"outline\"\r\n className={cn(\r\n 'h-12 min-w-96 justify-between px-4 text-left font-normal',\r\n !dateRange?.from && !dateRange?.to && 'text-gray-400',\r\n className\r\n )}\r\n disabled={disabled}\r\n >\r\n {dateRange?.from ? (\r\n dateRange.to ? (\r\n `${format(dateRange.from, 'dd/MM/yyyy HH:mm')} - ${format(dateRange.to, 'dd/MM/yyyy HH:mm')}`\r\n ) : (\r\n format(dateRange.from, 'dd/MM/yyyy HH:mm')\r\n )\r\n ) : (\r\n <span>{placeholder || 'Selecione o período'}</span>\r\n )}\r\n <CalendarBlank size={20} className=\"ml-2 text-gray-600\" />\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent className=\"w-auto p-0\">\r\n <Calendar\r\n mode=\"range\"\r\n selected={dateRange}\r\n onSelect={handleDateChange}\r\n numberOfMonths={2}\r\n />\r\n <div className=\"flex flex-col border-stroke border-t p-3\">\r\n <div className=\"flex justify-between gap-4\">\r\n <TimePicker\r\n onTimeChange={date =>\r\n handleDateChange({ ...dateRange, from: date })\r\n }\r\n date={dateRange?.from}\r\n />\r\n <TimePicker\r\n onTimeChange={date =>\r\n handleDateChange({ ...dateRange, to: date })\r\n }\r\n date={dateRange?.to}\r\n />\r\n </div>\r\n </div>\r\n <div className=\"flex flex-1 justify-center\">\r\n <Button\r\n variant=\"outline\"\r\n className=\"flex h-12 flex-1\"\r\n onClick={() => handleDateChange(undefined)}\r\n >\r\n <X size={12} /> Clear\r\n </Button>\r\n </div>\r\n </PopoverContent>\r\n </Popover>\r\n )\r\n}\r\n\r\n/* -----------------------------------------------------------------------------\r\n * Exports\r\n * -------------------------------------------------------------------------- */\r\n\r\nexport { DateTimePickerWithRange }\r\n"],"names":["DateTimePickerWithRange","startDate","endDate","onChange","placeholder","className","disabled","dateRange","setDateRange","useState","handleDateChange","newRange","undefined","Popover","PopoverTrigger","Button","cn","format","CalendarBlank","PopoverContent","Calendar","TimePicker","date","X"],"mappings":";2aA0BA,SAASA,EAAwB,CAC/BC,UAAAA,CAAS,CACTC,QAAAA,CAAO,CACPC,SAAAA,CAAQ,CACRC,YAAAA,CAAW,CACXC,UAAAA,CAAS,CACTC,SAAAA,EAAW,EAAK,CACa,EAC7B,GAAM,CAACC,EAAWC,EAAa,CAAGC,EAAgC,CAChE,KAAMR,EACN,GAAIC,CACN,GAEMQ,EAAmB,IACvB,GAAI,CAACC,EAAU,CACbH,EAAaI,QACbT,IAAWS,QACX,MACF,CAEAJ,EAAa,CACX,KAAMG,EAAS,IAAI,EAAIJ,GAAW,KAClC,GAAII,EAAS,EAAE,GAEjBR,IAAW,CACT,KAAMQ,EAAS,IAAI,EAAIJ,GAAW,KAClC,GAAII,EAAS,EAAE,EAEnB,EAEA,OACE,EAACE,EAAOA,C,UACN,EAACC,EAAcA,CAAC,QAAO,G,SACrB,EAACC,EAAMA,CACL,GAAG,OACH,QAAQ,UACR,UAAWC,EACT,2DACA,CAACT,GAAW,MAAQ,CAACA,GAAW,IAAM,gBACtCF,GAEF,SAAUC,E,UAETC,GAAW,KACVA,EAAU,EAAE,CACV,CAAC,EAAEU,EAAOV,EAAU,IAAI,CAAE,oBAAoB,GAAG,EAAEU,EAAOV,EAAU,EAAE,CAAE,oBAAoB,CAAC,CAE7FU,EAAOV,EAAU,IAAI,CAAE,oBAGzB,EAAC,Q,SAAMH,GAAe,wB,GAExB,EAACc,EAAaA,CAAC,KAAM,GAAI,UAAU,oB,QAGvC,EAACC,EAAcA,CAAC,UAAU,a,UACxB,EAACC,EAAQA,CACP,KAAK,QACL,SAAUb,EACV,SAAUG,EACV,eAAgB,C,GAElB,EAAC,OAAI,UAAU,2C,SACb,EAAC,OAAI,UAAU,6B,UACb,EAACW,EAAUA,CACT,aAAcC,GACZZ,EAAiB,CAAE,GAAGH,CAAS,CAAE,KAAMe,CAAK,GAE9C,KAAMf,GAAW,I,GAEnB,EAACc,EAAUA,CACT,aAAcC,GACZZ,EAAiB,CAAE,GAAGH,CAAS,CAAE,GAAIe,CAAK,GAE5C,KAAMf,GAAW,E,QAIvB,EAAC,OAAI,UAAU,6B,SACb,EAACQ,EAAMA,CACL,QAAQ,UACR,UAAU,mBACV,QAAS,IAAML,EAAiBE,Q,UAEhC,EAACW,EAACA,CAAC,KAAM,E,GAAM,S,UAM3B,Q"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react/jsx-runtime";import*as s from"@phosphor-icons/react";import*as t from"date-fns";import*as a from"date-fns/locale";import*as l from"react";import*as o from"react-day-picker";import*as r from"../../lib/index.js";import*as n from"../button.js";import*as i from"../calendar.js";import*as c from"../popover.js";import*as u from"../scroll-area.js";import*as d from"./month-year-picker.js";import*as m from"./time-item.js";function h({value:u,onChange:m,min:h,max:x,timezone:p,hideTime:v,use12HourFormat:g=!1,disabled:j,clearable:M,classNames:b,timePicker:S,modal:y=!1,variant:N="outline",size:C="default",hasCalendarIcon:w=!0,...k}){let[H,I]=(0,l.useState)(!1),[D,P]=(0,l.useState)(!1),T=(0,l.useMemo)(()=>new o.TZDate(u||new Date,p),[u,p]),[z,B]=(0,l.useState)(T),[A,O]=(0,l.useState)(T),R=(0,l.useMemo)(()=>(0,t.setYear)(z,(0,t.getYear)(z)+1),[z]),U=(0,l.useMemo)(()=>h?new o.TZDate(h,p):void 0,[h,p]),V=(0,l.useMemo)(()=>x?new o.TZDate(x,p):void 0,[x,p]),Z=(0,l.useCallback)(e=>{e.setHours(A.getHours(),A.getMinutes(),A.getSeconds()),h&&e<h&&e.setHours(h.getHours(),h.getMinutes(),h.getSeconds()),x&&e>x&&e.setHours(x.getHours(),x.getMinutes(),x.getSeconds()),O(e)},[O,B]),E=(0,l.useCallback)(()=>{m(new Date(A)),I(!1)},[A,m]),Y=(0,l.useCallback)((e,s)=>{B(e),"year"===s?P("month"):P(!1)},[B,P]),F=(0,l.useCallback)(()=>{B((0,t.addMonths)(z,1))},[z]),L=(0,l.useCallback)(()=>{B((0,t.subMonths)(z,1))},[z]);(0,l.useEffect)(()=>{H&&(O(T),B(T),P(!1))},[H,T]);let X=(0,l.useMemo)(()=>H||u?H?A:T:u,[A,u,H]),q=(0,l.useMemo)(()=>X?(0,t.format)(X,"dd/MM/yyyy"+(v?"":" HH:mm")):"Selecione uma data",[X,v,g]);return(0,e.jsxs)(c.Popover,{open:H,onOpenChange:I,modal:y,children:[(0,e.jsx)(c.PopoverTrigger,{disabled:j,asChild:!0,children:(0,e.jsxs)("div",{className:(0,r.cn)((0,n.buttonVariants)({variant:N,size:C,disabled:j}),"ps-3 pe-1 font-normal hover:bg-transparent dark:hover:bg-input/50",!X&&"text-muted-foreground",(!M||!u)&&"pe-3",b?.trigger),children:[(0,e.jsxs)("div",{className:"flex flex-grow items-center",children:[w&&(0,e.jsx)(s.CalendarBlankIcon,{className:"mr-2 size-4"}),q]}),M&&u&&(0,e.jsx)(n.Button,{disabled:j,variant:"ghost",size:"sm","aria-label":"Clear date",className:"ms-1 size-6 p-1",onClick:e=>{e.stopPropagation(),e.preventDefault(),m(null),I(!1)},children:(0,e.jsx)(s.XIcon,{className:"size-4"})})]})}),(0,e.jsxs)(c.PopoverContent,{className:"w-auto p-2",children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"ms-2 flex cursor-pointer items-center font-bold text-md",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)("button",{type:"button",onClick:()=>P("month"!==D&&"month"),children:(0,t.format)(z,"MMMM",{locale:a.ptBR}).charAt(0).toUpperCase()+(0,t.format)(z,"MMMM",{locale:a.ptBR}).slice(1)}),(0,e.jsx)("button",{type:"button",className:"ms-1",onClick:()=>P("year"!==D&&"year"),children:(0,t.format)(z,"yyyy")})]}),(0,e.jsx)(n.Button,{variant:"ghost",size:"icon",className:"ml-1 size-6",onClick:()=>P(!D&&"year"),children:D?(0,e.jsx)(s.CaretUpIcon,{}):(0,e.jsx)(s.CaretDownIcon,{})})]}),(0,e.jsxs)("div",{className:(0,r.cn)("flex space-x-2",D?"hidden":""),children:[(0,e.jsx)(n.Button,{variant:"ghost",size:"icon",onClick:L,children:(0,e.jsx)(s.CaretLeftIcon,{})}),(0,e.jsx)(n.Button,{variant:"ghost",size:"icon",onClick:F,children:(0,e.jsx)(s.CaretRightIcon,{})})]})]}),(0,e.jsxs)("div",{className:"relative overflow-hidden",children:[(0,e.jsx)(i.Calendar,{mode:"single",timeZone:p,selected:A,onSelect:e=>e&&Z(e),month:z,endMonth:R,disabled:[x?{after:x}:null,h?{before:h}:null].filter(Boolean),onMonthChange:B,showOutsideDays:!0,classNames:{[o.UI.Root]:"py-2 px-0",[o.UI.MonthCaption]:"hidden",[o.UI.NextMonthButton]:"hidden",[o.UI.PreviousMonthButton]:"hidden"},...k}),(0,e.jsx)("div",{className:(0,r.cn)("absolute top-0 right-0 bottom-0 left-0",D?"bg-background":"hidden")}),(0,e.jsx)(d.MonthYearPicker,{value:z,mode:D,onChange:Y,minDate:U,maxDate:V,className:(0,r.cn)("absolute top-0 right-0 bottom-0 left-0",D?"":"hidden")})]}),(0,e.jsxs)("div",{className:"flex flex-col gap-2",children:[!v&&(0,e.jsx)(f,{timePicker:S,value:A,onChange:O,use12HourFormat:g,min:U,max:V}),(0,e.jsxs)("div",{className:"flex flex-row-reverse items-center justify-between",children:[(0,e.jsx)(n.Button,{className:"ms-2 h-7 px-2 text-sm",onClick:E,children:"Salvar"}),p&&(0,e.jsxs)("div",{className:"text-sm",children:[(0,e.jsx)("span",{children:"Timezone:"}),(0,e.jsx)("span",{className:"ms-1 font-semibold",children:p})]})]})]})]})]})}function f({value:a,onChange:o,use12HourFormat:r,min:i,max:d,timePicker:h}){let f=(0,l.useMemo)(()=>r?"yyyy-MM-dd hh:mm:ss.SSS a xxxx":"yyyy-MM-dd HH:mm:ss.SSS xxxx",[r]),[p,v]=(0,l.useState)(+("AM"!==(0,t.format)(a,"a"))),[g,j]=(0,l.useState)(r?+(0,t.format)(a,"hh"):a.getHours()),[M,b]=(0,l.useState)(a.getMinutes()),[S,y]=(0,l.useState)(a.getSeconds());(0,l.useEffect)(()=>{o(x({use12HourFormat:r,value:a,formatStr:f,hour:g,minute:M,second:S,ampm:p}))},[g,M,S,p,f,r]);let N=(0,l.useMemo)(()=>r?g%12+12*p:g,[a,r,p]),C=(0,l.useMemo)(()=>Array.from({length:r?12:24},(e,s)=>{let l=!1,o=r&&0===s?12:s,n=(0,t.setHours)(a,r?s+12*p:s),c=(0,t.startOfHour)(n),u=(0,t.endOfHour)(n);return i&&u<i&&(l=!0),d&&c>d&&(l=!0),{value:o,label:o.toString().padStart(2,"0"),disabled:l}}),[a,i,d,r,p]),w=(0,l.useMemo)(()=>{let e=(0,t.setHours)(a,N);return Array.from({length:60},(s,a)=>{let l=!1,o=(0,t.setMinutes)(e,a),r=(0,t.startOfMinute)(o),n=(0,t.endOfMinute)(o);return i&&n<i&&(l=!0),d&&r>d&&(l=!0),{value:a,label:a.toString().padStart(2,"0"),disabled:l}})},[a,i,d,N]),k=(0,l.useMemo)(()=>{let e=(0,t.setMilliseconds)((0,t.setMinutes)((0,t.setHours)(a,N),M),0),s=i?(0,t.setMilliseconds)(i,0):void 0,l=d?(0,t.setMilliseconds)(d,0):void 0;return Array.from({length:60},(a,o)=>{let r=!1,n=(0,t.setSeconds)(e,o);return s&&n<s&&(r=!0),l&&n>l&&(r=!0),{value:o,label:o.toString().padStart(2,"0"),disabled:r}})},[a,M,i,d,N]),H=(0,l.useMemo)(()=>{let e=(0,t.startOfDay)(a),s=(0,t.endOfDay)(a);return[{value:0,label:"AM"},{value:1,label:"PM"}].map(a=>{let l=!1,o=(0,t.addHours)(e,12*a.value),r=(0,t.subHours)(s,(1-a.value)*12);return i&&r<i&&(l=!0),d&&o>d&&(l=!0),{...a,disabled:l}})},[a,i,d]),[I,D]=(0,l.useState)(!1),P=(0,l.useRef)(null),T=(0,l.useRef)(null),z=(0,l.useRef)(null);(0,l.useEffect)(()=>{let e=setTimeout(()=>{I&&(P.current?.scrollIntoView({behavior:"auto"}),T.current?.scrollIntoView({behavior:"auto"}),z.current?.scrollIntoView({behavior:"auto"}))},1);return()=>clearTimeout(e)},[I]);let B=(0,l.useCallback)(e=>{i&&x({use12HourFormat:r,value:a,formatStr:f,hour:e.value,minute:M,second:S,ampm:p})<i&&(b(i.getMinutes()),y(i.getSeconds())),d&&x({use12HourFormat:r,value:a,formatStr:f,hour:e.value,minute:M,second:S,ampm:p})>d&&(b(d.getMinutes()),y(d.getSeconds())),j(e.value)},[j,r,a,f,M,S,p]),A=(0,l.useCallback)(e=>{if(i&&x({use12HourFormat:r,value:a,formatStr:f,hour:e.value,minute:M,second:S,ampm:p})<i&&y(i.getSeconds()),d){let s=x({use12HourFormat:r,value:a,formatStr:f,hour:e.value,minute:M,second:S,ampm:p});s>d&&y(s.getSeconds())}b(e.value)},[b,r,a,f,g,S,p]),O=(0,l.useCallback)(e=>{if(i&&x({use12HourFormat:r,value:a,formatStr:f,hour:g,minute:M,second:S,ampm:e.value})<i){let e=i.getHours()%12;j(0===e?12:e),b(i.getMinutes()),y(i.getSeconds())}if(d&&x({use12HourFormat:r,value:a,formatStr:f,hour:g,minute:M,second:S,ampm:e.value})>d){let e=d.getHours()%12;j(0===e?12:e),b(d.getMinutes()),y(d.getSeconds())}v(e.value)},[v,r,a,f,g,M,S,i,d]),R=(0,l.useMemo)(()=>{let e=[];for(let s of["hour","minute","second"])(!h||h[s])&&("hour"===s?e.push(r?"hh":"HH"):e.push("minute"===s?"mm":"ss"));return(0,t.format)(a,e.join(":")+(r?" a":""))},[a,r,h]);return(0,e.jsxs)(c.Popover,{open:I,onOpenChange:D,children:[(0,e.jsx)(c.PopoverTrigger,{asChild:!0,children:(0,e.jsxs)(n.Button,{variant:"outline",size:"sm","aria-expanded":I,className:"justify-between font-mono",children:[(0,e.jsx)(s.ClockIcon,{className:"mr-2 size-4"}),R,(0,e.jsx)(s.CaretDownIcon,{className:"ml-2 size-4 shrink-0 opacity-50"})]})}),(0,e.jsx)(c.PopoverContent,{className:"p-0",side:"top",children:(0,e.jsx)("div",{className:"flex-col gap-2 p-2",children:(0,e.jsxs)("div",{className:"flex h-56 grow",children:[(!h||h.hour)&&(0,e.jsx)(u.ScrollArea,{className:"h-full flex-grow",children:(0,e.jsx)("div",{className:"flex grow flex-col items-stretch overflow-y-auto pe-2 pb-48",children:C.map(s=>(0,e.jsx)("div",{ref:s.value===g?P:void 0,children:(0,e.jsx)(m.TimeItem,{option:s,selected:s.value===g,onSelect:B,className:"h-8",disabled:s.disabled})},s.value))})}),(!h||h.minute)&&(0,e.jsx)(u.ScrollArea,{className:"h-full flex-grow",children:(0,e.jsx)("div",{className:"flex grow flex-col items-stretch overflow-y-auto pe-2 pb-48",children:w.map(s=>(0,e.jsx)("div",{ref:s.value===M?T:void 0,children:(0,e.jsx)(m.TimeItem,{option:s,selected:s.value===M,onSelect:A,className:"h-8",disabled:s.disabled})},s.value))})}),(!h||h.second)&&(0,e.jsx)(u.ScrollArea,{className:"h-full flex-grow",children:(0,e.jsx)("div",{className:"flex grow flex-col items-stretch overflow-y-auto pe-2 pb-48",children:k.map(s=>(0,e.jsx)("div",{ref:s.value===S?z:void 0,children:(0,e.jsx)(m.TimeItem,{option:s,selected:s.value===S,onSelect:e=>y(e.value),className:"h-8",disabled:s.disabled})},s.value))})}),r&&(0,e.jsx)(u.ScrollArea,{className:"h-full flex-grow",children:(0,e.jsx)("div",{className:"flex grow flex-col items-stretch overflow-y-auto pe-2",children:H.map(s=>(0,e.jsx)(m.TimeItem,{option:s,selected:s.value===p,onSelect:O,className:"h-8",disabled:s.disabled},s.value))})})]})})})]})}function x(e){let s,{use12HourFormat:a,value:l,formatStr:o,hour:r,minute:n,second:i,ampm:c}=e;if(a){let e=(0,t.format)(l,o),a=e.slice(0,11)+r.toString().padStart(2,"0")+e.slice(13);a=(a=(a=a.slice(0,14)+n.toString().padStart(2,"0")+a.slice(16)).slice(0,17)+i.toString().padStart(2,"0")+a.slice(19)).slice(0,24)+(0===c?"AM":"PM")+a.slice(26),s=(0,t.parse)(a,o,l)}else s=(0,t.setHours)((0,t.setMinutes)((0,t.setSeconds)(l,i),n),r);return s}export{h as DateTimePicker};
|
|
1
|
+
import{jsx as e,jsxs as l}from"react/jsx-runtime";import{CalendarBlankIcon as t,CaretDownIcon as a,CaretLeftIcon as o,CaretRightIcon as r,CaretUpIcon as s,ClockIcon as i,XIcon as n}from"@phosphor-icons/react";import{addHours as c,addMonths as d,endOfDay as m,endOfHour as u,endOfMinute as h,format as p,getYear as v,parse as f,setHours as g,setMilliseconds as x,setMinutes as b,setSeconds as N,setYear as y,startOfDay as S,startOfHour as M,startOfMinute as w,subHours as C,subMonths as H}from"date-fns";import{ptBR as k}from"date-fns/locale";import{useCallback as j,useEffect as z,useMemo as A,useRef as D,useState as P}from"react";import{TZDate as T,UI as B}from"react-day-picker";import{cn as I}from"../../lib/index.js";import{Button as O,buttonVariants as V}from"../button.js";import{Calendar as F}from"../calendar.js";import{Popover as R,PopoverContent as U,PopoverTrigger as Z}from"../popover.js";import{ScrollArea as q}from"../scroll-area.js";import{MonthYearPicker as E}from"./month-year-picker.js";import{TimeItem as G}from"./time-item.js";function J({value:i,onChange:c,min:m,max:u,timezone:h,hideTime:f,use12HourFormat:g=!1,disabled:x,clearable:b,classNames:N,timePicker:S,modal:M=!1,variant:w="outline",size:C="default",hasCalendarIcon:D=!0,...q}){let[G,J]=P(!1),[L,Q]=P(!1),W=A(()=>new T(i||new Date,h),[i,h]),[X,Y]=P(W),[$,_]=P(W),ee=A(()=>y(X,v(X)+1),[X]),el=A(()=>m?new T(m,h):void 0,[m,h]),et=A(()=>u?new T(u,h):void 0,[u,h]),ea=j(e=>{e.setHours($.getHours(),$.getMinutes(),$.getSeconds()),m&&e<m&&e.setHours(m.getHours(),m.getMinutes(),m.getSeconds()),u&&e>u&&e.setHours(u.getHours(),u.getMinutes(),u.getSeconds()),_(e)},[_,Y]),eo=j(()=>{c(new Date($)),J(!1)},[$,c]),er=j((e,l)=>{Y(e),"year"===l?Q("month"):Q(!1)},[Y,Q]),es=j(()=>{Y(d(X,1))},[X]),ei=j(()=>{Y(H(X,1))},[X]);z(()=>{G&&(_(W),Y(W),Q(!1))},[G,W]);let en=A(()=>G||i?G?$:W:i,[$,i,G]),ec=A(()=>en?p(en,"dd/MM/yyyy"+(f?"":" HH:mm")):"Selecione uma data",[en,f,g]);return l(R,{open:G,onOpenChange:J,modal:M,children:[e(Z,{disabled:x,asChild:!0,children:l("div",{className:I(V({variant:w,size:C,disabled:x}),"ps-3 pe-1 font-normal hover:bg-transparent dark:hover:bg-input/50",!en&&"text-muted-foreground",(!b||!i)&&"pe-3",N?.trigger),children:[l("div",{className:"flex flex-grow items-center",children:[D&&e(t,{className:"mr-2 size-4"}),ec]}),b&&i&&e(O,{disabled:x,variant:"ghost",size:"sm","aria-label":"Clear date",className:"ms-1 size-6 p-1",onClick:e=>{e.stopPropagation(),e.preventDefault(),c(null),J(!1)},children:e(n,{className:"size-4"})})]})}),l(U,{className:"w-auto p-2",children:[l("div",{className:"flex items-center justify-between",children:[l("div",{className:"ms-2 flex cursor-pointer items-center font-bold text-md",children:[l("div",{children:[e("button",{type:"button",onClick:()=>Q("month"!==L&&"month"),children:p(X,"MMMM",{locale:k}).charAt(0).toUpperCase()+p(X,"MMMM",{locale:k}).slice(1)}),e("button",{type:"button",className:"ms-1",onClick:()=>Q("year"!==L&&"year"),children:p(X,"yyyy")})]}),e(O,{variant:"ghost",size:"icon",className:"ml-1 size-6",onClick:()=>Q(!L&&"year"),children:L?e(s,{}):e(a,{})})]}),l("div",{className:I("flex space-x-2",L?"hidden":""),children:[e(O,{variant:"ghost",size:"icon",onClick:ei,children:e(o,{})}),e(O,{variant:"ghost",size:"icon",onClick:es,children:e(r,{})})]})]}),l("div",{className:"relative overflow-hidden",children:[e(F,{mode:"single",timeZone:h,selected:$,onSelect:e=>e&&ea(e),month:X,endMonth:ee,disabled:[u?{after:u}:null,m?{before:m}:null].filter(Boolean),onMonthChange:Y,showOutsideDays:!0,classNames:{[B.Root]:"py-2 px-0",[B.MonthCaption]:"hidden",[B.NextMonthButton]:"hidden",[B.PreviousMonthButton]:"hidden"},...q}),e("div",{className:I("absolute top-0 right-0 bottom-0 left-0",L?"bg-background":"hidden")}),e(E,{value:X,mode:L,onChange:er,minDate:el,maxDate:et,className:I("absolute top-0 right-0 bottom-0 left-0",L?"":"hidden")})]}),l("div",{className:"flex flex-col gap-2",children:[!f&&e(K,{timePicker:S,value:$,onChange:_,use12HourFormat:g,min:el,max:et}),l("div",{className:"flex flex-row-reverse items-center justify-between",children:[e(O,{className:"ms-2 h-7 px-2 text-sm",onClick:eo,children:"Salvar"}),h&&l("div",{className:"text-sm",children:[e("span",{children:"Timezone:"}),e("span",{className:"ms-1 font-semibold",children:h})]})]})]})]})]})}function K({value:t,onChange:o,use12HourFormat:r,min:s,max:n,timePicker:d}){let v=A(()=>r?"yyyy-MM-dd hh:mm:ss.SSS a xxxx":"yyyy-MM-dd HH:mm:ss.SSS xxxx",[r]),[f,y]=P(+("AM"!==p(t,"a"))),[H,k]=P(r?+p(t,"hh"):t.getHours()),[T,B]=P(t.getMinutes()),[I,V]=P(t.getSeconds());z(()=>{o(L({use12HourFormat:r,value:t,formatStr:v,hour:H,minute:T,second:I,ampm:f}))},[H,T,I,f,v,r]);let F=A(()=>r?H%12+12*f:H,[t,r,f]),E=A(()=>Array.from({length:r?12:24},(e,l)=>{let a=!1,o=r&&0===l?12:l,i=g(t,r?l+12*f:l),c=M(i),d=u(i);return s&&d<s&&(a=!0),n&&c>n&&(a=!0),{value:o,label:o.toString().padStart(2,"0"),disabled:a}}),[t,s,n,r,f]),J=A(()=>{let e=g(t,F);return Array.from({length:60},(l,t)=>{let a=!1,o=b(e,t),r=w(o),i=h(o);return s&&i<s&&(a=!0),n&&r>n&&(a=!0),{value:t,label:t.toString().padStart(2,"0"),disabled:a}})},[t,s,n,F]),K=A(()=>{let e=x(b(g(t,F),T),0),l=s?x(s,0):void 0,a=n?x(n,0):void 0;return Array.from({length:60},(t,o)=>{let r=!1,s=N(e,o);return l&&s<l&&(r=!0),a&&s>a&&(r=!0),{value:o,label:o.toString().padStart(2,"0"),disabled:r}})},[t,T,s,n,F]),Q=A(()=>{let e=S(t),l=m(t);return[{value:0,label:"AM"},{value:1,label:"PM"}].map(t=>{let a=!1,o=c(e,12*t.value),r=C(l,(1-t.value)*12);return s&&r<s&&(a=!0),n&&o>n&&(a=!0),{...t,disabled:a}})},[t,s,n]),[W,X]=P(!1),Y=D(null),$=D(null),_=D(null);z(()=>{let e=setTimeout(()=>{W&&(Y.current?.scrollIntoView({behavior:"auto"}),$.current?.scrollIntoView({behavior:"auto"}),_.current?.scrollIntoView({behavior:"auto"}))},1);return()=>clearTimeout(e)},[W]);let ee=j(e=>{s&&L({use12HourFormat:r,value:t,formatStr:v,hour:e.value,minute:T,second:I,ampm:f})<s&&(B(s.getMinutes()),V(s.getSeconds())),n&&L({use12HourFormat:r,value:t,formatStr:v,hour:e.value,minute:T,second:I,ampm:f})>n&&(B(n.getMinutes()),V(n.getSeconds())),k(e.value)},[k,r,t,v,T,I,f]),el=j(e=>{if(s&&L({use12HourFormat:r,value:t,formatStr:v,hour:e.value,minute:T,second:I,ampm:f})<s&&V(s.getSeconds()),n){let l=L({use12HourFormat:r,value:t,formatStr:v,hour:e.value,minute:T,second:I,ampm:f});l>n&&V(l.getSeconds())}B(e.value)},[B,r,t,v,H,I,f]),et=j(e=>{if(s&&L({use12HourFormat:r,value:t,formatStr:v,hour:H,minute:T,second:I,ampm:e.value})<s){let e=s.getHours()%12;k(0===e?12:e),B(s.getMinutes()),V(s.getSeconds())}if(n&&L({use12HourFormat:r,value:t,formatStr:v,hour:H,minute:T,second:I,ampm:e.value})>n){let e=n.getHours()%12;k(0===e?12:e),B(n.getMinutes()),V(n.getSeconds())}y(e.value)},[y,r,t,v,H,T,I,s,n]),ea=A(()=>{let e=[];for(let l of["hour","minute","second"])(!d||d[l])&&("hour"===l?e.push(r?"hh":"HH"):e.push("minute"===l?"mm":"ss"));return p(t,e.join(":")+(r?" a":""))},[t,r,d]);return l(R,{open:W,onOpenChange:X,children:[e(Z,{asChild:!0,children:l(O,{variant:"outline",size:"sm","aria-expanded":W,className:"justify-between font-mono",children:[e(i,{className:"mr-2 size-4"}),ea,e(a,{className:"ml-2 size-4 shrink-0 opacity-50"})]})}),e(U,{className:"p-0",side:"top",children:e("div",{className:"flex-col gap-2 p-2",children:l("div",{className:"flex h-56 grow",children:[(!d||d.hour)&&e(q,{className:"h-full flex-grow",children:e("div",{className:"flex grow flex-col items-stretch overflow-y-auto pe-2 pb-48",children:E.map(l=>e("div",{ref:l.value===H?Y:void 0,children:e(G,{option:l,selected:l.value===H,onSelect:ee,className:"h-8",disabled:l.disabled})},l.value))})}),(!d||d.minute)&&e(q,{className:"h-full flex-grow",children:e("div",{className:"flex grow flex-col items-stretch overflow-y-auto pe-2 pb-48",children:J.map(l=>e("div",{ref:l.value===T?$:void 0,children:e(G,{option:l,selected:l.value===T,onSelect:el,className:"h-8",disabled:l.disabled})},l.value))})}),(!d||d.second)&&e(q,{className:"h-full flex-grow",children:e("div",{className:"flex grow flex-col items-stretch overflow-y-auto pe-2 pb-48",children:K.map(l=>e("div",{ref:l.value===I?_:void 0,children:e(G,{option:l,selected:l.value===I,onSelect:e=>V(e.value),className:"h-8",disabled:l.disabled})},l.value))})}),r&&e(q,{className:"h-full flex-grow",children:e("div",{className:"flex grow flex-col items-stretch overflow-y-auto pe-2",children:Q.map(l=>e(G,{option:l,selected:l.value===f,onSelect:et,className:"h-8",disabled:l.disabled},l.value))})})]})})})]})}function L(e){let l,{use12HourFormat:t,value:a,formatStr:o,hour:r,minute:s,second:i,ampm:n}=e;if(t){let e=p(a,o),t=e.slice(0,11)+r.toString().padStart(2,"0")+e.slice(13);l=f(t=(t=(t=t.slice(0,14)+s.toString().padStart(2,"0")+t.slice(16)).slice(0,17)+i.toString().padStart(2,"0")+t.slice(19)).slice(0,24)+(0===n?"AM":"PM")+t.slice(26),o,a)}else l=g(b(N(a,i),s),r);return l}export{J as DateTimePicker};
|
|
2
2
|
//# sourceMappingURL=datetime-picker.js.map
|