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-tabs": "^1.1.0",
|
||||||
"@radix-ui/react-toggle": "^1.1.0",
|
"@radix-ui/react-toggle": "^1.1.0",
|
||||||
"@radix-ui/react-toggle-group": "^1.1.0",
|
"@radix-ui/react-toggle-group": "^1.1.0",
|
||||||
"@tanstack/react-query": "^5.50.1",
|
"@tanstack/react-query": "^5.51.1",
|
||||||
"@tanstack/react-router": "^1.43.12",
|
"@tanstack/react-router": "^1.45.0",
|
||||||
"@tanstack/react-table": "^8.19.2",
|
"@tanstack/react-table": "^8.19.3",
|
||||||
"class-variance-authority": "^0.7.0",
|
"class-variance-authority": "^0.7.0",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"ky": "^1.4.0",
|
"ky": "^1.4.0",
|
||||||
"lucide-react": "^0.400.0",
|
"lucide-react": "^0.408.0",
|
||||||
"primereact": "^10.7.0",
|
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
"react-hook-form": "^7.52.1",
|
"react-hook-form": "^7.52.1",
|
||||||
"sonner": "^1.5.0",
|
"sonner": "^1.5.0",
|
||||||
"tailwind-merge": "^2.3.0",
|
"tailwind-merge": "^2.4.0",
|
||||||
"tailwindcss-animate": "^1.0.7",
|
"tailwindcss-animate": "^1.0.7",
|
||||||
"zod": "^3.23.8",
|
"zod": "^3.23.8",
|
||||||
"zustand": "^4.5.4"
|
"zustand": "^4.5.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@biomejs/biome": "1.8.3",
|
"@biomejs/biome": "1.8.3",
|
||||||
"@tanstack/react-query-devtools": "^5.50.1",
|
"@tanstack/react-query-devtools": "^5.51.1",
|
||||||
"@tanstack/router-devtools": "^1.43.12",
|
"@tanstack/router-devtools": "^1.45.1",
|
||||||
"@tanstack/router-plugin": "^1.43.12",
|
"@tanstack/router-plugin": "^1.45.0",
|
||||||
"@types/node": "^20.14.10",
|
"@types/node": "^20.14.10",
|
||||||
"@types/react": "^18.3.3",
|
"@types/react": "^18.3.3",
|
||||||
"@types/react-dom": "^18.3.0",
|
"@types/react-dom": "^18.3.0",
|
||||||
@@ -55,7 +54,7 @@
|
|||||||
"postcss": "^8.4.39",
|
"postcss": "^8.4.39",
|
||||||
"tailwindcss": "^3.4.4",
|
"tailwindcss": "^3.4.4",
|
||||||
"typescript": "^5.5.3",
|
"typescript": "^5.5.3",
|
||||||
"vite": "^5.3.1"
|
"vite": "^5.3.3"
|
||||||
},
|
},
|
||||||
"prettier": "@it-incubator/prettier-config"
|
"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 { RouterProvider, createRouter } from "@tanstack/react-router";
|
||||||
import { StrictMode } from "react";
|
import { StrictMode } from "react";
|
||||||
import ReactDOM from "react-dom/client";
|
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/300.css";
|
||||||
import "@fontsource/inter/400.css";
|
import "@fontsource/inter/400.css";
|
||||||
import "@fontsource/inter/500.css";
|
import "@fontsource/inter/500.css";
|
||||||
@@ -13,8 +9,6 @@ import "@fontsource/inter/700.css";
|
|||||||
import "@fontsource/inter/800.css";
|
import "@fontsource/inter/800.css";
|
||||||
import "./index.css";
|
import "./index.css";
|
||||||
import { Toaster } from "@/components/ui";
|
import { Toaster } from "@/components/ui";
|
||||||
import { datatable } from "@/styles/datatable";
|
|
||||||
import { multiselect } from "@/styles/multiselect";
|
|
||||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||||
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
|
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
|
||||||
// Import the generated route tree
|
// Import the generated route tree
|
||||||
@@ -37,12 +31,6 @@ const queryClient = new QueryClient({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const PrimeStyles = {
|
|
||||||
...Tailwind,
|
|
||||||
datatable,
|
|
||||||
multiselect,
|
|
||||||
};
|
|
||||||
|
|
||||||
// Render the app
|
// Render the app
|
||||||
const rootElement = document.getElementById("root");
|
const rootElement = document.getElementById("root");
|
||||||
if (rootElement && !rootElement.innerHTML) {
|
if (rootElement && !rootElement.innerHTML) {
|
||||||
@@ -54,20 +42,8 @@ if (rootElement && !rootElement.innerHTML) {
|
|||||||
initialIsOpen={false}
|
initialIsOpen={false}
|
||||||
buttonPosition={"bottom-left"}
|
buttonPosition={"bottom-left"}
|
||||||
/>
|
/>
|
||||||
<PrimeReactProvider
|
<Toaster richColors />
|
||||||
value={{
|
<RouterProvider router={router} />
|
||||||
unstyled: true,
|
|
||||||
pt: PrimeStyles,
|
|
||||||
ptOptions: {
|
|
||||||
mergeSections: true,
|
|
||||||
mergeProps: true,
|
|
||||||
classNameMergeFunction: twMerge,
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Toaster richColors />
|
|
||||||
<RouterProvider router={router} />
|
|
||||||
</PrimeReactProvider>
|
|
||||||
</QueryClientProvider>
|
</QueryClientProvider>
|
||||||
</StrictMode>,
|
</StrictMode>,
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import { DataTable } from "@/components/db-table-view/data-table";
|
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 { createFileRoute, useNavigate } from "@tanstack/react-router";
|
||||||
import { z } from "zod";
|
import { z } from "zod";
|
||||||
|
|
||||||
@@ -32,12 +31,12 @@ function TableView() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="p-3 h-layout w-layout">
|
<div className="p-3 h-layout w-layout">
|
||||||
<DataTablePrime
|
<DataTable
|
||||||
key={tableName}
|
key={tableName}
|
||||||
dbName={dbName}
|
dbName={dbName}
|
||||||
tableName={tableName}
|
tableName={tableName}
|
||||||
pageSize={pageSize}
|
pageSize={pageSize}
|
||||||
offset={pageIndex}
|
pageIndex={pageIndex}
|
||||||
onPageIndexChange={updatePageIndex}
|
onPageIndexChange={updatePageIndex}
|
||||||
onPageSizeChange={updatePageSize}
|
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}",
|
"./components/**/*.{ts,tsx}",
|
||||||
"./app/**/*.{ts,tsx}",
|
"./app/**/*.{ts,tsx}",
|
||||||
"./src/**/*.{ts,tsx}",
|
"./src/**/*.{ts,tsx}",
|
||||||
"./node_modules/primereact/**/*.{js,ts,jsx,tsx}",
|
|
||||||
],
|
],
|
||||||
prefix: "",
|
prefix: "",
|
||||||
theme: {
|
theme: {
|
||||||
|
|||||||
Reference in New Issue
Block a user