mirror of
https://github.com/ershisan99/db-studio.git
synced 2025-12-16 12:33:05 +00:00
remove primere
This commit is contained in:
Binary file not shown.
@@ -25,28 +25,27 @@
|
||||
"@radix-ui/react-tabs": "^1.1.0",
|
||||
"@radix-ui/react-toggle": "^1.1.0",
|
||||
"@radix-ui/react-toggle-group": "^1.1.0",
|
||||
"@tanstack/react-query": "^5.50.1",
|
||||
"@tanstack/react-router": "^1.43.12",
|
||||
"@tanstack/react-table": "^8.19.2",
|
||||
"@tanstack/react-query": "^5.51.1",
|
||||
"@tanstack/react-router": "^1.45.0",
|
||||
"@tanstack/react-table": "^8.19.3",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.1",
|
||||
"ky": "^1.4.0",
|
||||
"lucide-react": "^0.400.0",
|
||||
"primereact": "^10.7.0",
|
||||
"lucide-react": "^0.408.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-hook-form": "^7.52.1",
|
||||
"sonner": "^1.5.0",
|
||||
"tailwind-merge": "^2.3.0",
|
||||
"tailwind-merge": "^2.4.0",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"zod": "^3.23.8",
|
||||
"zustand": "^4.5.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@biomejs/biome": "1.8.3",
|
||||
"@tanstack/react-query-devtools": "^5.50.1",
|
||||
"@tanstack/router-devtools": "^1.43.12",
|
||||
"@tanstack/router-plugin": "^1.43.12",
|
||||
"@tanstack/react-query-devtools": "^5.51.1",
|
||||
"@tanstack/router-devtools": "^1.45.1",
|
||||
"@tanstack/router-plugin": "^1.45.0",
|
||||
"@types/node": "^20.14.10",
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
@@ -55,7 +54,7 @@
|
||||
"postcss": "^8.4.39",
|
||||
"tailwindcss": "^3.4.4",
|
||||
"typescript": "^5.5.3",
|
||||
"vite": "^5.3.1"
|
||||
"vite": "^5.3.3"
|
||||
},
|
||||
"prettier": "@it-incubator/prettier-config"
|
||||
}
|
||||
|
||||
@@ -1,210 +0,0 @@
|
||||
import { cn, isImageUrl, isUrl } from "@/lib/utils";
|
||||
import { useTableColumnsQuery, useTableDataQuery } from "@/services/db";
|
||||
import { useSettingsStore } from "@/state";
|
||||
import { Rows3 } from "lucide-react";
|
||||
import { Column } from "primereact/column";
|
||||
import { DataTable, type SortOrder } from "primereact/datatable";
|
||||
import {
|
||||
MultiSelect,
|
||||
type MultiSelectChangeEvent,
|
||||
} from "primereact/multiselect";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
const headerTemplate = ({
|
||||
columnName,
|
||||
udt_name,
|
||||
}: { udt_name: string; columnName: string }) => (
|
||||
<div className={"flex items-center gap-2"}>
|
||||
<span>{columnName}</span>
|
||||
<span className="text-xs text-gray-500">[{udt_name.toUpperCase()}]</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
const columnTemplate =
|
||||
({
|
||||
columnName,
|
||||
formatDates,
|
||||
showImagesPreview,
|
||||
udt_name,
|
||||
data_type,
|
||||
}: {
|
||||
columnName: string;
|
||||
formatDates: boolean;
|
||||
showImagesPreview: boolean;
|
||||
udt_name: string;
|
||||
data_type: string;
|
||||
}) =>
|
||||
(item: Record<string, any>) => {
|
||||
const value = item[columnName] as any;
|
||||
|
||||
let finalValue = value;
|
||||
if (
|
||||
formatDates &&
|
||||
["timestamp", "datetime"].includes(udt_name.toLowerCase())
|
||||
) {
|
||||
finalValue = new Date(value as string).toLocaleString();
|
||||
}
|
||||
if (showImagesPreview && typeof value === "string" && isUrl(value)) {
|
||||
const isImage = isImageUrl(value);
|
||||
return (
|
||||
<a
|
||||
href={value}
|
||||
target={"_blank"}
|
||||
className={cn("hover:underline")}
|
||||
rel="noreferrer"
|
||||
>
|
||||
<div className={"flex items-center justify-between break-all gap-4"}>
|
||||
{value}
|
||||
{isImage && (
|
||||
<img
|
||||
src={value}
|
||||
alt={"preview"}
|
||||
className="size-20 object-cover"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"break-all",
|
||||
["integer", "int", "tinyint", "double"].includes(data_type) &&
|
||||
"text-right",
|
||||
)}
|
||||
>
|
||||
{finalValue}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const DataTablePrime = ({
|
||||
tableName,
|
||||
dbName,
|
||||
offset,
|
||||
pageSize,
|
||||
onPageSizeChange,
|
||||
onPageIndexChange,
|
||||
}: {
|
||||
tableName: string;
|
||||
offset: number;
|
||||
dbName: string;
|
||||
pageSize: number;
|
||||
onPageIndexChange: (pageIndex: number) => void;
|
||||
onPageSizeChange: (pageSize: number) => void;
|
||||
}) => {
|
||||
const formatDates = useSettingsStore.use.formatDates();
|
||||
const showImagesPreview = useSettingsStore.use.showImagesPreview();
|
||||
const paginationOptions = useSettingsStore.use.paginationOptions();
|
||||
const [sorting, setSorting] = useState<
|
||||
| {
|
||||
sortField?: string;
|
||||
sortOrder?: SortOrder;
|
||||
}
|
||||
| undefined
|
||||
>(undefined);
|
||||
const { data: columns } = useTableColumnsQuery({ dbName, tableName });
|
||||
const [visibleColumns, setVisibleColumns] = useState(columns);
|
||||
|
||||
useEffect(() => {
|
||||
setVisibleColumns(columns);
|
||||
}, [columns]);
|
||||
|
||||
const onColumnToggle = (event: MultiSelectChangeEvent) => {
|
||||
const selectedColumns = event.value;
|
||||
console.log(selectedColumns);
|
||||
const orderedSelectedColumns = columns?.filter((col) =>
|
||||
selectedColumns.some((sCol: any) => sCol.column_name === col.column_name),
|
||||
);
|
||||
|
||||
setVisibleColumns(orderedSelectedColumns);
|
||||
};
|
||||
|
||||
const header = (
|
||||
<MultiSelect
|
||||
value={visibleColumns}
|
||||
options={columns}
|
||||
optionLabel="column_name"
|
||||
onChange={onColumnToggle}
|
||||
className="w-full sm:w-20rem"
|
||||
display="chip"
|
||||
filter
|
||||
/>
|
||||
);
|
||||
|
||||
const { data, isFetching } = useTableDataQuery({
|
||||
tableName,
|
||||
dbName,
|
||||
perPage: pageSize,
|
||||
page: Math.floor(offset / pageSize),
|
||||
sortDesc: sorting?.sortOrder === -1,
|
||||
sortField: sorting?.sortField,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={"flex flex-col gap-4 flex-1 max-h-full h-full pb-3"}>
|
||||
<div className={"flex gap-4 items-center justify-between"}>
|
||||
<h1 className="text-2xl font-bold flex items-center gap-2">
|
||||
<Rows3 /> {tableName}
|
||||
</h1>
|
||||
<p>
|
||||
Rows: <strong>{data?.count}</strong>
|
||||
</p>
|
||||
</div>
|
||||
<div className="min-h-0 h-full w-full min-w-0">
|
||||
<DataTable
|
||||
header={header}
|
||||
rows={pageSize}
|
||||
lazy
|
||||
first={offset}
|
||||
onPage={(e) => {
|
||||
if (e.rows !== pageSize) {
|
||||
onPageSizeChange(e.rows);
|
||||
} else if (e.first !== offset) {
|
||||
onPageIndexChange(e.first);
|
||||
}
|
||||
}}
|
||||
onSort={setSorting}
|
||||
sortField={sorting?.sortField}
|
||||
sortOrder={sorting?.sortOrder}
|
||||
paginator
|
||||
totalRecords={data?.count}
|
||||
rowsPerPageOptions={paginationOptions}
|
||||
stripedRows
|
||||
columnResizeMode="expand"
|
||||
resizableColumns
|
||||
showGridlines
|
||||
size="small"
|
||||
value={data?.data}
|
||||
tableStyle={{ minWidth: "100%" }}
|
||||
scrollable
|
||||
scrollHeight="flex"
|
||||
loading={isFetching}
|
||||
removableSort
|
||||
stateStorage="local"
|
||||
stateKey={`dt-state-${dbName}-${tableName}`}
|
||||
>
|
||||
{visibleColumns?.map((col) => (
|
||||
<Column
|
||||
key={col.column_name}
|
||||
sortable
|
||||
field={col.column_name}
|
||||
header={headerTemplate({
|
||||
columnName: col.column_name,
|
||||
udt_name: col.udt_name,
|
||||
})}
|
||||
body={columnTemplate({
|
||||
columnName: col.column_name,
|
||||
formatDates,
|
||||
showImagesPreview,
|
||||
udt_name: col.udt_name,
|
||||
data_type: col.data_type,
|
||||
})}
|
||||
/>
|
||||
))}
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,10 +1,6 @@
|
||||
import { RouterProvider, createRouter } from "@tanstack/react-router";
|
||||
import { StrictMode } from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
|
||||
import { PrimeReactProvider } from "primereact/api";
|
||||
import Tailwind from "primereact/passthrough/tailwind";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import "@fontsource/inter/300.css";
|
||||
import "@fontsource/inter/400.css";
|
||||
import "@fontsource/inter/500.css";
|
||||
@@ -13,8 +9,6 @@ import "@fontsource/inter/700.css";
|
||||
import "@fontsource/inter/800.css";
|
||||
import "./index.css";
|
||||
import { Toaster } from "@/components/ui";
|
||||
import { datatable } from "@/styles/datatable";
|
||||
import { multiselect } from "@/styles/multiselect";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
|
||||
// Import the generated route tree
|
||||
@@ -37,12 +31,6 @@ const queryClient = new QueryClient({
|
||||
},
|
||||
});
|
||||
|
||||
const PrimeStyles = {
|
||||
...Tailwind,
|
||||
datatable,
|
||||
multiselect,
|
||||
};
|
||||
|
||||
// Render the app
|
||||
const rootElement = document.getElementById("root");
|
||||
if (rootElement && !rootElement.innerHTML) {
|
||||
@@ -54,20 +42,8 @@ if (rootElement && !rootElement.innerHTML) {
|
||||
initialIsOpen={false}
|
||||
buttonPosition={"bottom-left"}
|
||||
/>
|
||||
<PrimeReactProvider
|
||||
value={{
|
||||
unstyled: true,
|
||||
pt: PrimeStyles,
|
||||
ptOptions: {
|
||||
mergeSections: true,
|
||||
mergeProps: true,
|
||||
classNameMergeFunction: twMerge,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Toaster richColors />
|
||||
<RouterProvider router={router} />
|
||||
</PrimeReactProvider>
|
||||
</QueryClientProvider>
|
||||
</StrictMode>,
|
||||
);
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { DataTable } from "@/components/db-table-view/data-table";
|
||||
import { DataTablePrime } from "@/components/db-table-view/data-table-prime";
|
||||
import { createFileRoute, useNavigate } from "@tanstack/react-router";
|
||||
import { z } from "zod";
|
||||
|
||||
@@ -32,12 +31,12 @@ function TableView() {
|
||||
|
||||
return (
|
||||
<div className="p-3 h-layout w-layout">
|
||||
<DataTablePrime
|
||||
<DataTable
|
||||
key={tableName}
|
||||
dbName={dbName}
|
||||
tableName={tableName}
|
||||
pageSize={pageSize}
|
||||
offset={pageIndex}
|
||||
pageIndex={pageIndex}
|
||||
onPageIndexChange={updatePageIndex}
|
||||
onPageSizeChange={updatePageSize}
|
||||
/>
|
||||
|
||||
@@ -1,379 +0,0 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { DataTablePassThroughOptions } from "primereact/datatable";
|
||||
|
||||
const TRANSITIONS = {
|
||||
overlay: {
|
||||
timeout: 150,
|
||||
classNames: {
|
||||
enter: "opacity-0 scale-75",
|
||||
enterActive:
|
||||
"opacity-100 !scale-100 transition-transform transition-opacity duration-150 ease-in",
|
||||
exit: "opacity-100",
|
||||
exitActive: "!opacity-0 transition-opacity duration-150 ease-linear",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const datatable: DataTablePassThroughOptions = {
|
||||
root: ({ props }) => ({
|
||||
className: cn("relative", {
|
||||
"flex flex-col h-full": props.scrollable && props.scrollHeight === "flex",
|
||||
}),
|
||||
}),
|
||||
loadingoverlay: {
|
||||
className: cn(
|
||||
"fixed w-full h-full t-0 l-0 bg-gray-100/40",
|
||||
"transition duration-200",
|
||||
"absolute flex items-center justify-center z-10",
|
||||
"dark:bg-gray-950/40", // Dark Mode
|
||||
),
|
||||
},
|
||||
loadingicon: "w-8 h-8",
|
||||
wrapper: ({ props }) => ({
|
||||
className: cn({
|
||||
relative: props.scrollable,
|
||||
"flex flex-col grow h-full":
|
||||
props.scrollable && props.scrollHeight === "flex",
|
||||
}),
|
||||
}),
|
||||
header: ({ props }) => ({
|
||||
className: cn(
|
||||
"font-bold p-4",
|
||||
"dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900", // Dark Mode
|
||||
props.showGridlines
|
||||
? "border-x border-t border-b-0"
|
||||
: "border-y border-x-0",
|
||||
),
|
||||
}),
|
||||
table: "w-full border-spacing-0 text-sm",
|
||||
thead: ({ context }) => ({
|
||||
className: cn({
|
||||
"top-0 z-[1]": context.scrollable,
|
||||
}),
|
||||
}),
|
||||
tbody: ({ props, context }) => ({
|
||||
className: cn({
|
||||
"sticky z-[1]": props.frozenRow && context.scrollable,
|
||||
}),
|
||||
}),
|
||||
tfoot: ({ context }) => ({
|
||||
className: cn({
|
||||
"bg-slate-50 bottom-0 z-[1]": context.scrollable,
|
||||
}),
|
||||
}),
|
||||
footer: {
|
||||
className: cn(
|
||||
"bg-slate-50 text-slate-700 border-t-0 border-b border-x-0 border-gray-300 font-bold p-4",
|
||||
"dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900", // Dark Mode
|
||||
),
|
||||
},
|
||||
column: {
|
||||
headercell: ({ context, props }) => ({
|
||||
className: cn(
|
||||
"text-left border-0 border-b border-solid font-bold",
|
||||
"transition duration-200",
|
||||
context?.size === "small"
|
||||
? "p-2"
|
||||
: context?.size === "large"
|
||||
? "p-5"
|
||||
: "p-4", // Size
|
||||
context.sorted
|
||||
? "bg-blue-50 text-blue-700"
|
||||
: "bg-muted/50 text-slate-700", // Sort
|
||||
context.sorted
|
||||
? "dark:text-white/80 dark:bg-blue-300"
|
||||
: "dark:text-white/80 dark:bg-gray-900", // Dark Mode
|
||||
{
|
||||
"sticky z-[1]": props.frozen || props.frozen === "", // Frozen Columns
|
||||
"border-x border-y": context?.showGridlines,
|
||||
"overflow-hidden space-nowrap border-y relative bg-clip-padding":
|
||||
context.resizable, // Resizable
|
||||
},
|
||||
),
|
||||
}),
|
||||
headercontent: "flex items-center font-medium text-muted-foreground",
|
||||
bodycell: ({ props, context }) => ({
|
||||
className: cn(
|
||||
"text-left border-0 border-b border-solid border-gray-300",
|
||||
context?.size === "small"
|
||||
? "p-2"
|
||||
: context?.size === "large"
|
||||
? "p-5"
|
||||
: "p-4", // Size
|
||||
"dark:text-white/80 dark:border-blue-900/40", // Dark Mode
|
||||
{
|
||||
"sticky bg-inherit": props && (props.frozen || props.frozen === ""), // Frozen Columns
|
||||
"border-x border-y": context.showGridlines,
|
||||
},
|
||||
),
|
||||
}),
|
||||
footercell: ({ context }) => ({
|
||||
className: cn(
|
||||
"text-left border-0 border-b border-solid border-gray-300 font-bold",
|
||||
"bg-slate-50 text-slate-700",
|
||||
"transition duration-200",
|
||||
context?.size === "small"
|
||||
? "p-2"
|
||||
: context?.size === "large"
|
||||
? "p-5"
|
||||
: "p-4", // Size
|
||||
"dark:text-white/80 dark:bg-gray-900 dark:border-blue-900/40", // Dark Mode
|
||||
{
|
||||
"border-x border-y": context.showGridlines,
|
||||
},
|
||||
),
|
||||
}),
|
||||
sorticon: ({ context }) => ({
|
||||
className: cn(
|
||||
"ml-2",
|
||||
context.sorted
|
||||
? "text-blue-700 dark:text-white/80"
|
||||
: "text-slate-700 dark:text-white/70",
|
||||
),
|
||||
}),
|
||||
sortbadge: {
|
||||
className: cn(
|
||||
"flex items-center justify-center align-middle",
|
||||
"rounded-[50%] w-[1.143rem] leading-[1.143rem] ml-2",
|
||||
"text-blue-700 bg-blue-50",
|
||||
"dark:text-white/80 dark:bg-blue-400", // Dark Mode
|
||||
),
|
||||
},
|
||||
columnfilter: "inline-flex items-center ml-auto",
|
||||
filteroverlay: {
|
||||
className: cn(
|
||||
"bg-white text-gray-600 border-0 rounded-md min-w-[12.5rem]",
|
||||
"dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80", //Dark Mode
|
||||
),
|
||||
},
|
||||
filtermatchmodedropdown: {
|
||||
root: "min-[0px]:flex mb-2",
|
||||
},
|
||||
filterrowitems: "m-0 p-0 py-3 list-none ",
|
||||
filterrowitem: ({ context }) => ({
|
||||
className: cn(
|
||||
"m-0 py-3 px-5 bg-transparent",
|
||||
"transition duration-200",
|
||||
context?.highlighted
|
||||
? "text-blue-700 bg-blue-100 dark:text-white/80 dark:bg-blue-300"
|
||||
: "text-gray-600 bg-transparent dark:text-white/80 dark:bg-transparent",
|
||||
),
|
||||
}),
|
||||
filteroperator: {
|
||||
className: cn(
|
||||
"px-5 py-3 border-b border-solid border-gray-300 text-slate-700 bg-slate-50 rounded-t-md",
|
||||
"dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900", // Dark Mode
|
||||
),
|
||||
},
|
||||
filteroperatordropdown: {
|
||||
root: "min-[0px]:flex",
|
||||
},
|
||||
filterconstraint:
|
||||
"p-5 border-b border-solid border-gray-300 dark:border-blue-900/40",
|
||||
filteraddrule: "py-3 px-5",
|
||||
filteraddrulebutton: {
|
||||
root: "justify-center w-full min-[0px]:text-sm",
|
||||
label: "flex-auto grow-0",
|
||||
icon: "mr-2",
|
||||
},
|
||||
filterremovebutton: {
|
||||
root: "ml-2",
|
||||
label: "grow-0",
|
||||
},
|
||||
filterbuttonbar: "flex items-center justify-between p-5",
|
||||
filterclearbutton: {
|
||||
root: "w-auto min-[0px]:text-sm border-blue-500 text-blue-500 px-4 py-3",
|
||||
},
|
||||
filterapplybutton: {
|
||||
root: "w-auto min-[0px]:text-sm px-4 py-3",
|
||||
},
|
||||
filtermenubutton: ({ context }) => ({
|
||||
className: cn(
|
||||
"inline-flex justify-center items-center cursor-pointer no-underline overflow-hidden relative ml-2",
|
||||
"w-8 h-8 rounded-[50%]",
|
||||
"transition duration-200",
|
||||
"hover:text-slate-700 hover:bg-gray-300/20", // Hover
|
||||
"focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]", // Focus
|
||||
"dark:text-white/70 dark:hover:text-white/80 dark:bg-gray-900", // Dark Mode
|
||||
{
|
||||
"bg-blue-50 text-blue-700": context.active,
|
||||
},
|
||||
),
|
||||
}),
|
||||
headerfilterclearbutton: ({ context }) => ({
|
||||
className: cn(
|
||||
"inline-flex justify-center items-center cursor-pointer no-underline overflow-hidden relative",
|
||||
"text-left bg-transparent m-0 p-0 border-none select-none ml-2",
|
||||
{
|
||||
invisible: !context.hidden,
|
||||
},
|
||||
),
|
||||
}),
|
||||
columnresizer:
|
||||
"block absolute top-0 right-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent",
|
||||
rowreordericon: "cursor-move",
|
||||
roweditorinitbutton: {
|
||||
className: cn(
|
||||
"inline-flex items-center justify-center overflow-hidden relative",
|
||||
"text-left cursor-pointer select-none",
|
||||
"w-8 h-8 border-0 rounded-[50%]",
|
||||
"transition duration-200",
|
||||
"text-slate-700 border-transparent",
|
||||
"focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]", //Focus
|
||||
"hover:text-slate-700 hover:bg-gray-300/20", //Hover
|
||||
"dark:text-white/70", // Dark Mode
|
||||
),
|
||||
},
|
||||
roweditorsavebutton: {
|
||||
className: cn(
|
||||
"inline-flex items-center justify-center overflow-hidden relative",
|
||||
"text-left cursor-pointer select-none",
|
||||
"w-8 h-8 border-0 rounded-[50%]",
|
||||
"transition duration-200",
|
||||
"text-slate-700 border-transparent",
|
||||
"focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]", //Focus
|
||||
"hover:text-slate-700 hover:bg-gray-300/20", //Hover
|
||||
"dark:text-white/70", // Dark Mode
|
||||
),
|
||||
},
|
||||
roweditorcancelbutton: {
|
||||
className: cn(
|
||||
"inline-flex items-center justify-center overflow-hidden relative",
|
||||
"text-left cursor-pointer select-none",
|
||||
"w-8 h-8 border-0 rounded-[50%]",
|
||||
"transition duration-200",
|
||||
"text-slate-700 border-transparent",
|
||||
"focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]", //Focus
|
||||
"hover:text-slate-700 hover:bg-gray-300/20", //Hover
|
||||
"dark:text-white/70", // Dark Mode
|
||||
),
|
||||
},
|
||||
radioButton: {
|
||||
className: cn(
|
||||
"relative inline-flex cursor-pointer select-none align-bottom",
|
||||
"w-6 h-6",
|
||||
),
|
||||
},
|
||||
radioButtonInput: {
|
||||
className: cn(
|
||||
"w-full h-full top-0 left-0 absolute appearance-none select-none",
|
||||
"p-0 m-0 opacity-0 z-[1] rounded-[50%] outline-none",
|
||||
"cursor-pointer peer",
|
||||
),
|
||||
},
|
||||
radioButtonBox: ({ context }) => ({
|
||||
className: cn(
|
||||
"flex items-center justify-center",
|
||||
"h-6 w-6 rounded-full border-2 text-gray-700 transition duration-200 ease-in-out",
|
||||
context.checked
|
||||
? "border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400 peer-hover:bg-blue-700 peer-hover:border-blue-700"
|
||||
: "border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900 peer-hover:border-blue-500",
|
||||
{
|
||||
"hover:border-blue-500 focus:shadow-input-focus focus:outline-none focus:outline-offset-0 dark:hover:border-blue-400 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]":
|
||||
!context.disabled,
|
||||
"cursor-default opacity-60": context.disabled,
|
||||
},
|
||||
),
|
||||
}),
|
||||
radioButtonIcon: ({ context }) => ({
|
||||
className: cn(
|
||||
"transform rounded-full",
|
||||
"block h-3 w-3 bg-white transition duration-200 dark:bg-gray-900",
|
||||
{
|
||||
"backface-hidden scale-10 invisible": context.checked === false,
|
||||
"visible scale-100 transform": context.checked === true,
|
||||
},
|
||||
),
|
||||
}),
|
||||
headercheckboxwrapper: {
|
||||
className: cn(
|
||||
"cursor-pointer inline-flex relative select-none align-bottom",
|
||||
"w-6 h-6",
|
||||
),
|
||||
},
|
||||
headercheckbox: ({ context }) => ({
|
||||
className: cn(
|
||||
"flex items-center justify-center",
|
||||
"border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200",
|
||||
context.checked
|
||||
? "border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400"
|
||||
: "border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900",
|
||||
{
|
||||
"hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]":
|
||||
!context.disabled,
|
||||
"cursor-default opacity-60": context.disabled,
|
||||
},
|
||||
),
|
||||
}),
|
||||
headercheckboxicon:
|
||||
"w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900",
|
||||
checkboxwrapper: {
|
||||
className: cn(
|
||||
"cursor-pointer inline-flex relative select-none align-bottom",
|
||||
"w-6 h-6",
|
||||
),
|
||||
},
|
||||
checkbox: ({ context }) => ({
|
||||
className: cn(
|
||||
"flex items-center justify-center",
|
||||
"border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200",
|
||||
context.checked
|
||||
? "border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400"
|
||||
: "border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900",
|
||||
{
|
||||
"hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]":
|
||||
!context.disabled,
|
||||
"cursor-default opacity-60": context.disabled,
|
||||
},
|
||||
),
|
||||
}),
|
||||
checkboxicon:
|
||||
"w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900",
|
||||
transition: TRANSITIONS.overlay,
|
||||
},
|
||||
bodyrow: ({ context }) => ({
|
||||
className: cn(
|
||||
context.selected
|
||||
? "bg-blue-50 text-blue-700 dark:bg-blue-300"
|
||||
: "bg-white text-foreground dark:bg-gray-900",
|
||||
context.stripedRows &&
|
||||
(context.index % 2 === 0
|
||||
? "bg-white text-foreground dark:bg-gray-900"
|
||||
: "bg-muted/50 text-foreground dark:bg-gray-950"),
|
||||
"transition duration-200",
|
||||
"focus:outline focus:outline-[0.15rem] focus:outline-blue-200 focus:outline-offset-[-0.15rem]", // Focus
|
||||
"dark:text-white/80 dark:focus:outline dark:focus:outline-[0.15rem] dark:focus:outline-blue-300 dark:focus:outline-offset-[-0.15rem]", // Dark Mode
|
||||
{
|
||||
"cursor-pointer": context.selectable,
|
||||
"hover:bg-gray-300/20 hover:text-gray-600":
|
||||
context.selectable && !context.selected, // Hover
|
||||
},
|
||||
),
|
||||
}),
|
||||
rowexpansion: "bg-white text-gray-600 dark:bg-gray-900 dark:text-white/80",
|
||||
rowgroupheader: {
|
||||
className: cn(
|
||||
"sticky z-[1]",
|
||||
"bg-white text-gray-600",
|
||||
"transition duration-200",
|
||||
),
|
||||
},
|
||||
rowgroupfooter: {
|
||||
className: cn(
|
||||
"sticky z-[1]",
|
||||
"bg-white text-gray-600",
|
||||
"transition duration-200",
|
||||
),
|
||||
},
|
||||
rowgrouptoggler: {
|
||||
className: cn(
|
||||
"text-left m-0 p-0 cursor-pointer select-none",
|
||||
"inline-flex items-center justify-center overflow-hidden relative",
|
||||
"w-8 h-8 text-gray-500 border-0 bg-transparent rounded-[50%]",
|
||||
"transition duration-200",
|
||||
"dark:text-white/70", // Dark Mode
|
||||
),
|
||||
},
|
||||
rowgrouptogglericon: "inline-block w-4 h-4",
|
||||
resizehelper: "absolute hidden w-px z-10 bg-blue-500 dark:bg-blue-300",
|
||||
};
|
||||
@@ -1,165 +0,0 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { MultiSelectPassThroughOptions } from "primereact/multiselect";
|
||||
|
||||
const TRANSITIONS = {
|
||||
overlay: {
|
||||
timeout: 150,
|
||||
classNames: {
|
||||
enter: "opacity-0 scale-75",
|
||||
enterActive:
|
||||
"opacity-100 !scale-100 transition-transform transition-opacity duration-150 ease-in",
|
||||
exit: "opacity-100",
|
||||
exitActive: "!opacity-0 transition-opacity duration-150 ease-linear",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const multiselect: MultiSelectPassThroughOptions = {
|
||||
root: ({ props }) => ({
|
||||
className: cn(
|
||||
"inline-flex cursor-pointer select-none",
|
||||
"bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40 transition-colors duration-200 ease-in-out rounded-md",
|
||||
"w-full md:w-80",
|
||||
{
|
||||
"opacity-60 select-none pointer-events-none cursor-default":
|
||||
props.disabled,
|
||||
},
|
||||
),
|
||||
}),
|
||||
labelContainer: "overflow-hidden flex flex-auto cursor-pointer",
|
||||
label: ({ props }) => ({
|
||||
className: cn(
|
||||
"block overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis",
|
||||
"text-gray-800 dark:text-white/80",
|
||||
"p-3 transition duration-200",
|
||||
{
|
||||
"!p-3":
|
||||
props.display !== "chip" &&
|
||||
(props.value == null || props.value === undefined),
|
||||
"!py-1.5 px-3": props.display === "chip" && props.value !== null,
|
||||
},
|
||||
),
|
||||
}),
|
||||
token: {
|
||||
className: cn(
|
||||
"py-1 px-2 mr-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white/80 rounded-full",
|
||||
"cursor-default inline-flex items-center",
|
||||
),
|
||||
},
|
||||
removeTokenIcon: "ml-2",
|
||||
trigger: {
|
||||
className: cn(
|
||||
"flex items-center justify-center shrink-0",
|
||||
"bg-transparent text-gray-600 dark:text-white/70 w-12 rounded-tr-lg rounded-br-lg",
|
||||
),
|
||||
},
|
||||
panel: {
|
||||
className: cn(
|
||||
"bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-0 rounded-md shadow-lg",
|
||||
),
|
||||
},
|
||||
header: {
|
||||
className: cn(
|
||||
"p-3 border-b border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 bg-gray-100 dark:bg-gray-800 rounded-t-lg",
|
||||
"flex items-center justify-between",
|
||||
),
|
||||
},
|
||||
headerCheckboxContainer: {
|
||||
className: cn(
|
||||
"inline-flex cursor-pointer select-none align-bottom relative",
|
||||
"mr-2",
|
||||
"w-6 h-6",
|
||||
),
|
||||
},
|
||||
headerCheckbox: {
|
||||
root: ({ props }) => ({
|
||||
className: cn(
|
||||
"asdfasdf flex items-center justify-center [&>div]:shrink-0",
|
||||
"border-2 w-6 h-6 text-gray-600 dark:text-white/70 rounded-lg transition-colors duration-200",
|
||||
"hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]",
|
||||
{
|
||||
"border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900":
|
||||
!props?.checked,
|
||||
"border-blue-500 bg-blue-500": props?.checked,
|
||||
},
|
||||
),
|
||||
}),
|
||||
},
|
||||
headerCheckboxIcon:
|
||||
"w-4 h-4 transition-all duration-200 text-white text-base",
|
||||
closeButton: {
|
||||
className: cn(
|
||||
"flex items-center justify-center overflow-hidden relative",
|
||||
"w-8 h-8 text-gray-500 dark:text-white/70 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mr-2 last:mr-0",
|
||||
"hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 ",
|
||||
"focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]",
|
||||
),
|
||||
},
|
||||
closeIcon: "w-4 h-4 inline-block",
|
||||
wrapper: {
|
||||
className: cn(
|
||||
"max-h-[200px] overflow-auto",
|
||||
"bg-white text-gray-700 border-0 rounded-md shadow-lg",
|
||||
"dark:bg-gray-900 dark:text-white/80",
|
||||
),
|
||||
},
|
||||
list: "py-3 list-none m-0",
|
||||
item: ({ context }) => ({
|
||||
className: cn(
|
||||
"cursor-pointer font-normal overflow-hidden relative whitespace-nowrap",
|
||||
"m-0 p-3 border-0 transition-shadow duration-200 rounded-none",
|
||||
{
|
||||
"text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800":
|
||||
!context?.focused && !context?.selected,
|
||||
"bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800":
|
||||
context?.focused && !context?.selected,
|
||||
"bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80":
|
||||
context?.focused && context?.selected,
|
||||
"bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80":
|
||||
!context?.focused && context?.selected,
|
||||
},
|
||||
),
|
||||
}),
|
||||
checkboxContainer: {
|
||||
className: cn(
|
||||
"inline-flex cursor-pointer select-none align-bottom relative",
|
||||
"mr-2",
|
||||
"w-6 h-6",
|
||||
),
|
||||
},
|
||||
checkbox: ({ context }) => ({
|
||||
className: cn(
|
||||
"flex items-center justify-center shrink-0",
|
||||
"border-2 w-6 h-6 text-gray-600 dark:text-white/80 rounded-lg transition-colors duration-200",
|
||||
"hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]",
|
||||
{
|
||||
"border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900":
|
||||
!context?.selected,
|
||||
"border-blue-500 bg-blue-500": context?.selected,
|
||||
},
|
||||
),
|
||||
}),
|
||||
checkboxIcon: "w-4 h-4 transition-all duration-200 text-white text-base",
|
||||
itemGroup: {
|
||||
className: cn(
|
||||
"m-0 p-3 text-gray-800 bg-white font-bold",
|
||||
"dark:bg-gray-900 dark:text-white/80",
|
||||
"cursor-auto",
|
||||
),
|
||||
},
|
||||
filterContainer: "relative",
|
||||
filterInput: {
|
||||
root: {
|
||||
className: cn(
|
||||
"pr-7 -mr-7",
|
||||
"w-full",
|
||||
"font-sans text-base text-gray-700 bg-white py-3 px-3 pr-6 border border-gray-300 transition duration-200 rounded-lg appearance-none",
|
||||
"dark:bg-gray-900 dark:border-blue-900/40 dark:hover:border-blue-300 dark:text-white/80",
|
||||
"hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]",
|
||||
),
|
||||
},
|
||||
},
|
||||
filterIcon: "-mt-2 absolute top-1/2 right-2",
|
||||
clearIcon: "text-gray-500 right-12 -mt-2 absolute top-1/2",
|
||||
transition: TRANSITIONS.overlay,
|
||||
};
|
||||
@@ -7,7 +7,6 @@ module.exports = {
|
||||
"./components/**/*.{ts,tsx}",
|
||||
"./app/**/*.{ts,tsx}",
|
||||
"./src/**/*.{ts,tsx}",
|
||||
"./node_modules/primereact/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
prefix: "",
|
||||
theme: {
|
||||
|
||||
Reference in New Issue
Block a user