@cryptlex/web-components 3.8.2 → 4.1.0
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/components/data-table/data-table-filter.es.js +178 -0
- package/dist/components/data-table/data-table-filter.es.js.map +1 -0
- package/dist/components/data-table/data-table.es.js +402 -153
- package/dist/components/data-table/data-table.es.js.map +1 -1
- package/dist/components/data-table/table-commons.es.js +267 -19
- package/dist/components/data-table/table-commons.es.js.map +1 -1
- package/dist/components/inputs/calendar.es.js +12 -12
- package/dist/components/inputs/calendar.es.js.map +1 -1
- package/dist/components/inputs/checkbox.es.js +13 -13
- package/dist/components/inputs/checkbox.es.js.map +1 -1
- package/dist/components/inputs/country-select.es.js +3 -3
- package/dist/components/inputs/form-field.es.js +1 -1
- package/dist/components/inputs/input-otp.es.js +2 -2
- package/dist/components/inputs/input-otp.es.js.map +1 -1
- package/dist/components/inputs/input.es.js +7 -7
- package/dist/components/inputs/input.es.js.map +1 -1
- package/dist/components/inputs/multi-select.es.js +7 -7
- package/dist/components/inputs/radio-group.es.js +1 -1
- package/dist/components/inputs/select.es.js +10 -10
- package/dist/components/inputs/select.es.js.map +1 -1
- package/dist/components/inputs/textarea.es.js +4 -4
- package/dist/components/key-value-card/key-value-card.es.js +6 -9
- package/dist/components/key-value-card/key-value-card.es.js.map +1 -1
- package/dist/components/ui/accordion.es.js +6 -6
- package/dist/components/ui/accordion.es.js.map +1 -1
- package/dist/components/ui/alert.es.js +4 -4
- package/dist/components/ui/avatar.es.js +1 -1
- package/dist/components/ui/badge.es.js +1 -1
- package/dist/components/ui/breadcrumb.es.js +2 -2
- package/dist/components/ui/breadcrumb.es.js.map +1 -1
- package/dist/components/ui/button.es.js +27 -25
- package/dist/components/ui/button.es.js.map +1 -1
- package/dist/components/ui/card.es.js +8 -8
- package/dist/components/ui/card.es.js.map +1 -1
- package/dist/components/ui/copy-button.es.js +12 -14
- package/dist/components/ui/copy-button.es.js.map +1 -1
- package/dist/components/ui/dialog.es.js +4 -4
- package/dist/components/ui/dialog.es.js.map +1 -1
- package/dist/components/ui/drawer.es.js +10 -10
- package/dist/components/ui/drawer.es.js.map +1 -1
- package/dist/components/ui/dropdown-menu.es.js +13 -13
- package/dist/components/ui/dropdown-menu.es.js.map +1 -1
- package/dist/components/ui/label.es.js +1 -1
- package/dist/components/ui/loader.es.js +3 -3
- package/dist/components/ui/pagination.es.js +2 -2
- package/dist/components/ui/pagination.es.js.map +1 -1
- package/dist/components/ui/popover.es.js +5 -5
- package/dist/components/ui/popover.es.js.map +1 -1
- package/dist/components/ui/separator.es.js +1 -1
- package/dist/components/ui/sheet.es.js +1 -1
- package/dist/components/ui/sidebar.es.js +105 -105
- package/dist/components/ui/sidebar.es.js.map +1 -1
- package/dist/components/ui/skeleton.es.js +1 -1
- package/dist/components/ui/static-data-table.es.js +1 -1
- package/dist/components/ui/table.es.js +8 -8
- package/dist/components/ui/table.es.js.map +1 -1
- package/dist/components/ui/tabs.es.js +1 -1
- package/dist/components/ui/tabs.es.js.map +1 -1
- package/dist/components/ui/timeline.es.js +3 -3
- package/dist/components/ui/timeline.es.js.map +1 -1
- package/dist/components/ui/tooltip.es.js +1 -1
- package/dist/index.es.d.ts +128 -32
- package/dist/index.es.js +237 -238
- package/dist/index.es.js.map +1 -1
- package/dist/node_modules/.pnpm/@radix-ui_react-dropdown-menu@2.1.15_@types_react-dom@19.1.0_@types_react@19.1.0_react-dom@19.1.0_react@19.1.0/node_modules/@radix-ui/react-dropdown-menu/dist/index.es.js +10 -10
- package/dist/node_modules/.pnpm/@radix-ui_react-menu@2.1.15_@types_react-dom@19.1.0_@types_react@19.1.0_react-dom@19.1.0_react@19.1.0/node_modules/@radix-ui/react-menu/dist/index.es.js +4 -4
- package/dist/utils/{index.es.js → primitives.es.js} +1 -1
- package/dist/utils/primitives.es.js.map +1 -0
- package/dist/{hooks → utils}/use-mobile.es.js.map +1 -1
- package/lib/theme.css +10 -12
- package/lib/tokens.css +3 -3
- package/lib/utilities.css +8 -8
- package/package.json +9 -11
- package/dist/components/data-table/column-picker.es.js +0 -50
- package/dist/components/data-table/column-picker.es.js.map +0 -1
- package/dist/components/data-table/page-size.es.js +0 -25
- package/dist/components/data-table/page-size.es.js.map +0 -1
- package/dist/components/data-table/paginator.es.js +0 -64
- package/dist/components/data-table/paginator.es.js.map +0 -1
- package/dist/components/data-table/table-actions.es.js +0 -26
- package/dist/components/data-table/table-actions.es.js.map +0 -1
- package/dist/components/data-table/table-content.es.js +0 -65
- package/dist/components/data-table/table-content.es.js.map +0 -1
- package/dist/components/data-table/table-utils/constants.es.js +0 -288
- package/dist/components/data-table/table-utils/constants.es.js.map +0 -1
- package/dist/components/data-table/table-utils/createTableFetchFn.es.js +0 -25
- package/dist/components/data-table/table-utils/createTableFetchFn.es.js.map +0 -1
- package/dist/components/data-table/table-utils/date.es.js +0 -12
- package/dist/components/data-table/table-utils/date.es.js.map +0 -1
- package/dist/components/data-table/table-utils/string.es.js +0 -19
- package/dist/components/data-table/table-utils/string.es.js.map +0 -1
- package/dist/components/data-table/table-utils/types.es.js +0 -5
- package/dist/components/data-table/table-utils/types.es.js.map +0 -1
- package/dist/utils/index.es.js.map +0 -1
- /package/dist/{hooks → utils}/use-mobile.es.js +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"primitives.es.js","sources":["../../lib/utils/primitives.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\n\n/** Classnames */\nexport function cn(...inputs: ClassValue[]) {\n return clsx(inputs);\n}\n\n/**\n * This is the variable name representing the primary hue.\n * Referenced in tokens.scss -> token.css\n */\nconst PRIMARY_HUE_PROPERTY = \"--primary-hue\";\n\n/**\n *\n * @returns\n */\nexport function getThemeHue() {\n return document.documentElement.style.getPropertyValue(PRIMARY_HUE_PROPERTY);\n}\n\n/**\n * @param hue the hue value to set in the document style\n */\nexport function setThemeHue(hue: number) {\n document.documentElement.style.setProperty(\n PRIMARY_HUE_PROPERTY,\n // In this case, it must be a number.\n hue as unknown as string,\n );\n}\n\nconst ACCESS_TOKEN = \"AT\";\nconst REFRESH_TOKEN = \"RT\";\nexport function logout() {\n if (typeof window !== \"undefined\" && window.localStorage) {\n try {\n localStorage.removeItem(REFRESH_TOKEN);\n localStorage.removeItem(ACCESS_TOKEN);\n window.location.replace(\"/auth/login\");\n } catch (error) {\n console.error(\"Logout failed:\", error);\n }\n }\n}\n\nexport type JwtDecode = {\n aud: string;\n email: string;\n exp: number;\n iat: number;\n jti: string;\n region: string;\n role: string;\n role_type: string;\n scope: string[];\n sub: string;\n teat: number;\n tenantid: string;\n token_usage: string;\n sadmin?: string;\n};\nexport type CtxPortals =\n | \"customer-portal\"\n | \"system-portal\"\n | \"reseller-portal\"\n | \"admin-portal\";\n"],"names":["cn","inputs","clsx","PRIMARY_HUE_PROPERTY","getThemeHue","setThemeHue","hue","ACCESS_TOKEN","REFRESH_TOKEN","logout","error"],"mappings":";AAGO,SAASA,KAAMC,GAAsB;AACxC,SAAOC,EAAKD,CAAM;AACtB;AAMA,MAAME,IAAuB;AAMtB,SAASC,IAAc;AAC1B,SAAO,SAAS,gBAAgB,MAAM,iBAAiBD,CAAoB;AAC/E;AAKO,SAASE,EAAYC,GAAa;AACrC,WAAS,gBAAgB,MAAM;AAAA,IAC3BH;AAAA;AAAA,IAEAG;AAAA,EAAA;AAER;AAEA,MAAMC,IAAe,MACfC,IAAgB;AACf,SAASC,IAAS;AACrB,MAAI,OAAO,SAAW,OAAe,OAAO;AACxC,QAAI;AACA,mBAAa,WAAWD,CAAa,GACrC,aAAa,WAAWD,CAAY,GACpC,OAAO,SAAS,QAAQ,aAAa;AAAA,IACzC,SAASG,GAAO;AACZ,cAAQ,MAAM,kBAAkBA,CAAK;AAAA,IACzC;AAER;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-mobile.es.js","sources":["../../lib/
|
|
1
|
+
{"version":3,"file":"use-mobile.es.js","sources":["../../lib/utils/use-mobile.tsx"],"sourcesContent":["import * as React from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n\tconst [isMobile, setIsMobile] = React.useState<boolean | undefined>(\n\t\tundefined,\n\t);\n\n\tReact.useEffect(() => {\n\t\tconst mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n\t\tconst onChange = () => {\n\t\t\tsetIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n\t\t};\n\t\tmql.addEventListener(\"change\", onChange);\n\t\tsetIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n\t\treturn () => mql.removeEventListener(\"change\", onChange);\n\t}, []);\n\n\treturn !!isMobile;\n}\n"],"names":["MOBILE_BREAKPOINT","useIsMobile","isMobile","setIsMobile","React","mql","onChange"],"mappings":";AAEA,MAAMA,IAAoB;AAEnB,SAASC,IAAc;AAC7B,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAM;AAAA,IACrC;AAAA,EAAA;AAGD,SAAAA,EAAM,UAAU,MAAM;AACrB,UAAMC,IAAM,OAAO,WAAW,eAAeL,IAAoB,CAAC,KAAK,GACjEM,IAAW,MAAM;AACtB,MAAAH,EAAY,OAAO,aAAaH,CAAiB;AAAA,IAClD;AACA,WAAAK,EAAI,iBAAiB,UAAUC,CAAQ,GACvCH,EAAY,OAAO,aAAaH,CAAiB,GAC1C,MAAMK,EAAI,oBAAoB,UAAUC,CAAQ;AAAA,EACxD,GAAG,CAAA,CAAE,GAEE,CAAC,CAACJ;AACV;"}
|
package/lib/theme.css
CHANGED
|
@@ -76,13 +76,17 @@
|
|
|
76
76
|
--color-success-9: var(--success-9);
|
|
77
77
|
--color-success-10: var(--success-10);
|
|
78
78
|
|
|
79
|
-
--color-background: var(--color-neutral-2);
|
|
80
|
-
--color-foreground: var(--color-neutral-8);
|
|
81
79
|
|
|
82
|
-
|
|
80
|
+
/* TODO, multiple levels of elevation */
|
|
81
|
+
--color-background: var(--color-neutral-3);
|
|
82
|
+
--color-elevation-1: var(--color-neutral-2);
|
|
83
|
+
--color-elevation-2: var(--color-neutral-1);
|
|
84
|
+
|
|
85
|
+
--color-foreground: var(--color-neutral-8);
|
|
86
|
+
--color-card: var(--color-elevation-1);
|
|
83
87
|
--color-card-foreground: var(--color-foreground);
|
|
84
88
|
/* Assuming popovers only show up over cards ??? */
|
|
85
|
-
--color-popover: var(--color-
|
|
89
|
+
--color-popover: var(--color-elevation-2);
|
|
86
90
|
--color-popover-foreground: var(--color-foreground);
|
|
87
91
|
|
|
88
92
|
--color-primary: var(--color-primary-7);
|
|
@@ -108,20 +112,14 @@
|
|
|
108
112
|
--color-chart-4: var(--color-secondary-4);
|
|
109
113
|
--color-chart-5: var(--color-secondary-2);
|
|
110
114
|
|
|
111
|
-
--color-sidebar-background: var(--color-
|
|
115
|
+
--color-sidebar-background: var(--color-elevation-1);
|
|
112
116
|
--color-sidebar-foreground: var(--color-foreground);
|
|
113
|
-
|
|
114
|
-
--color-sidebar-primary: var(--color-primary);
|
|
115
|
-
--color-sidebar-primary-foreground: var(--color-primary-foreground);
|
|
116
|
-
|
|
117
|
-
--color-sidebar-accent: var(--color-accent);
|
|
118
|
-
--color-sidebar-accent-foreground: var(--color-accent-foreground);
|
|
119
117
|
|
|
120
118
|
--color-sidebar-border: var(--color-border);
|
|
121
119
|
--color-sidebar-ring: var(--color-ring);
|
|
122
120
|
|
|
123
|
-
--spacing-icon: calc(var(--spacing) * 4);
|
|
124
121
|
--spacing-input: calc(var(--spacing) * 8);
|
|
122
|
+
--spacing-icon: calc(var(--spacing-input) / 2);
|
|
125
123
|
--spacing-table: calc(var(--spacing) * 100);
|
|
126
124
|
|
|
127
125
|
/* Header nav */
|
package/lib/tokens.css
CHANGED
|
@@ -88,15 +88,15 @@
|
|
|
88
88
|
--success-9: var(--xsuccess-9);
|
|
89
89
|
--success-10: var(--xsuccess-10);
|
|
90
90
|
--neutral-hue: var(--primary-hue);
|
|
91
|
-
--neutral-s: 0.
|
|
91
|
+
--neutral-s: 0.0005;
|
|
92
92
|
--xneutral-1: oklch(0.985 var(--neutral-s) var(--neutral-hue));
|
|
93
93
|
--xneutral-2: oklch(0.97 var(--neutral-s) var(--neutral-hue));
|
|
94
|
-
--xneutral-3: oklch(0.
|
|
94
|
+
--xneutral-3: oklch(0.95 var(--neutral-s) var(--neutral-hue));
|
|
95
95
|
--xneutral-4: oklch(0.87 var(--neutral-s) var(--neutral-hue));
|
|
96
96
|
--xneutral-5: oklch(0.708 var(--neutral-s) var(--neutral-hue));
|
|
97
97
|
--xneutral-6: oklch(0.556 var(--neutral-s) var(--neutral-hue));
|
|
98
98
|
--xneutral-7: oklch(0.439 var(--neutral-s) var(--neutral-hue));
|
|
99
|
-
--xneutral-8: oklch(0.
|
|
99
|
+
--xneutral-8: oklch(0.29 var(--neutral-s) var(--neutral-hue));
|
|
100
100
|
--xneutral-9: oklch(0.269 var(--neutral-s) var(--neutral-hue));
|
|
101
101
|
--xneutral-10: oklch(0.205 var(--neutral-s) var(--neutral-hue));
|
|
102
102
|
--neutral-1: var(--xneutral-1);
|
package/lib/utilities.css
CHANGED
|
@@ -32,11 +32,11 @@
|
|
|
32
32
|
|
|
33
33
|
/* Fluid grid with minimum width */
|
|
34
34
|
@utility grid-fluid {
|
|
35
|
-
@apply grid grid-cols-[repeat(auto-fill,_minmax(var(--fluid-grid-min),_1fr))] gap-
|
|
35
|
+
@apply grid grid-cols-[repeat(auto-fill,_minmax(var(--fluid-grid-min),_1fr))] gap-icon;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
@utility input {
|
|
39
|
-
@apply border border-input bg-card px-
|
|
39
|
+
@apply border border-input bg-card px-icon py-2 body placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
/* A base set of classes for elements that can be clicked */
|
|
@@ -44,28 +44,28 @@
|
|
|
44
44
|
@apply cursor-pointer ring-offset-background focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring leading-none no-underline whitespace-nowrap select-none disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50;
|
|
45
45
|
}
|
|
46
46
|
@utility btn-primary {
|
|
47
|
-
@apply
|
|
47
|
+
@apply border border-primary text-primary hover:bg-primary/10 focus:bg-primary/10;
|
|
48
48
|
}
|
|
49
49
|
@utility btn-destructive {
|
|
50
|
-
@apply
|
|
50
|
+
@apply border border-destructive text-destructive hover:bg-destructive/10 focus:bg-destructive/10;
|
|
51
51
|
}
|
|
52
|
-
@utility btn-
|
|
52
|
+
@utility btn-neutral {
|
|
53
53
|
@apply border border-input text-accent bg-card hover:bg-accent/10 focus:bg-accent/10;
|
|
54
54
|
}
|
|
55
55
|
@utility btn-secondary {
|
|
56
|
-
@apply
|
|
56
|
+
@apply border border-secondary text-secondary hover:bg-secondary/10 focus:bg-secondary/10;
|
|
57
57
|
}
|
|
58
58
|
@utility btn-ghost {
|
|
59
59
|
@apply bg-transparent hover:bg-accent/10 focus:bg-accent/10;
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
@utility btn-dropdown {
|
|
63
|
-
@apply w-full btn btn-
|
|
63
|
+
@apply w-full btn btn-neutral leading-normal h-input text-sm text-left px-2 truncate;
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
/* Dimensions for a standard input */
|
|
67
67
|
@utility input-dim {
|
|
68
|
-
@apply h-input px-
|
|
68
|
+
@apply h-input px-icon py-2 text-sm;
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
@utility dropdown-item {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cryptlex/web-components",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.1.0",
|
|
4
4
|
"description": "React component library for Cryptlex web applications",
|
|
5
5
|
"author": "Cryptlex",
|
|
6
6
|
"type": "module",
|
|
@@ -48,6 +48,9 @@
|
|
|
48
48
|
},
|
|
49
49
|
"peerDependencies": {
|
|
50
50
|
"@cryptlex/web-api-types": "1.41.0",
|
|
51
|
+
"@dnd-kit/core": "6.3.1",
|
|
52
|
+
"@dnd-kit/sortable": "10.0.0",
|
|
53
|
+
"@dnd-kit/utilities": "3.2.2",
|
|
51
54
|
"@tanstack/react-form": "1.6.3",
|
|
52
55
|
"@tanstack/react-query": "5.62.3",
|
|
53
56
|
"@tanstack/react-table": "8.20.5",
|
|
@@ -79,15 +82,10 @@
|
|
|
79
82
|
"@radix-ui/react-slot": "1.2.3",
|
|
80
83
|
"@radix-ui/react-tabs": "1.1.12",
|
|
81
84
|
"@radix-ui/react-tooltip": "1.2.7",
|
|
82
|
-
"@storybook/addon-docs": "^
|
|
83
|
-
"@storybook/addon-
|
|
84
|
-
"@storybook/addon-
|
|
85
|
-
"@storybook/
|
|
86
|
-
"@storybook/addon-onboarding": "^8.6.12",
|
|
87
|
-
"@storybook/blocks": "^8.6.12",
|
|
88
|
-
"@storybook/react": "^8.6.12",
|
|
89
|
-
"@storybook/react-vite": "^8.6.12",
|
|
90
|
-
"@storybook/test": "^8.6.12",
|
|
85
|
+
"@storybook/addon-docs": "^9.0.16",
|
|
86
|
+
"@storybook/addon-links": "^9.0.16",
|
|
87
|
+
"@storybook/addon-onboarding": "^9.0.16",
|
|
88
|
+
"@storybook/react-vite": "^9.0.16",
|
|
91
89
|
"@tailwindcss/vite": "^4.0.6",
|
|
92
90
|
"@types/lodash-es": "^4.17.12",
|
|
93
91
|
"@types/node": "^22.7.8",
|
|
@@ -97,7 +95,7 @@
|
|
|
97
95
|
"react-day-picker": "9.7.0",
|
|
98
96
|
"rollup-preserve-directives": "1.1.3",
|
|
99
97
|
"sass": "^1.80.6",
|
|
100
|
-
"storybook": "^
|
|
98
|
+
"storybook": "^9.0.16",
|
|
101
99
|
"typescript": "^5.5.3",
|
|
102
100
|
"typescript-eslint": "^8.7.0",
|
|
103
101
|
"vite": "^5.4.8",
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { jsxs as i, jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import "react";
|
|
3
|
-
import "../../utils/form-context.es.js";
|
|
4
|
-
import "../../utils/form-hook.es.js";
|
|
5
|
-
import { Columns3 as m } from "lucide-react";
|
|
6
|
-
import { DropdownMenu as p, DropdownMenuTrigger as u, DropdownMenuContent as a, DropdownMenuGroup as c, DropdownMenuCheckboxItem as n } from "../ui/dropdown-menu.es.js";
|
|
7
|
-
import { Button as s } from "../ui/button.es.js";
|
|
8
|
-
import { getResourceDisplayName as h } from "./table-utils/constants.es.js";
|
|
9
|
-
function x({
|
|
10
|
-
toggleAllColumnsVisible: o,
|
|
11
|
-
getIsAllColumnsVisible: t,
|
|
12
|
-
getAllColumns: d
|
|
13
|
-
}) {
|
|
14
|
-
return /* @__PURE__ */ i(p, { children: [
|
|
15
|
-
/* @__PURE__ */ r(u, { asChild: !0, children: /* @__PURE__ */ r(s, { icon: () => m, variant: "outline", children: "Columns" }) }),
|
|
16
|
-
/* @__PURE__ */ r(a, { children: /* @__PURE__ */ i(c, { children: [
|
|
17
|
-
/* @__PURE__ */ r(
|
|
18
|
-
n,
|
|
19
|
-
{
|
|
20
|
-
className: "italic",
|
|
21
|
-
onSelect: (e) => {
|
|
22
|
-
e.preventDefault(), o();
|
|
23
|
-
},
|
|
24
|
-
checked: t(),
|
|
25
|
-
children: "(Select all)"
|
|
26
|
-
}
|
|
27
|
-
),
|
|
28
|
-
d().map((e) => /* @__PURE__ */ i(
|
|
29
|
-
n,
|
|
30
|
-
{
|
|
31
|
-
onSelect: (l) => {
|
|
32
|
-
l.preventDefault(), e.toggleVisibility();
|
|
33
|
-
},
|
|
34
|
-
disabled: !e.getCanHide(),
|
|
35
|
-
checked: e.getIsVisible(),
|
|
36
|
-
children: [
|
|
37
|
-
e.getIsSorted(),
|
|
38
|
-
" ",
|
|
39
|
-
h(e.id, "admin-portal")
|
|
40
|
-
]
|
|
41
|
-
},
|
|
42
|
-
e.id
|
|
43
|
-
))
|
|
44
|
-
] }) })
|
|
45
|
-
] });
|
|
46
|
-
}
|
|
47
|
-
export {
|
|
48
|
-
x as ColumnPicker
|
|
49
|
-
};
|
|
50
|
-
//# sourceMappingURL=column-picker.es.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"column-picker.es.js","sources":["../../../lib/components/data-table/column-picker.tsx"],"sourcesContent":["import {\n\tButton,\n\tDropdownMenu,\n\tDropdownMenuCheckboxItem,\n\tDropdownMenuContent,\n\tDropdownMenuGroup,\n\tDropdownMenuTrigger,\n\tgetResourceDisplayName,\n} from \"@/index\";\nimport type { Column } from \"@tanstack/react-table\";\nimport { Columns3 } from \"lucide-react\";\n\nexport function ColumnPicker({\n\ttoggleAllColumnsVisible,\n\tgetIsAllColumnsVisible,\n\tgetAllColumns,\n}: {\n\ttoggleAllColumnsVisible: () => void;\n\tgetIsAllColumnsVisible: () => boolean;\n\tgetAllColumns: () => Column<any, any>[];\n}) {\n\treturn (\n\t\t<DropdownMenu>\n\t\t\t<DropdownMenuTrigger asChild>\n\t\t\t\t<Button icon={() => Columns3} variant={\"outline\"}>\n\t\t\t\t\tColumns\n\t\t\t\t</Button>\n\t\t\t</DropdownMenuTrigger>\n\t\t\t<DropdownMenuContent>\n\t\t\t\t<DropdownMenuGroup>\n\t\t\t\t\t<DropdownMenuCheckboxItem\n\t\t\t\t\t\tclassName=\"italic\"\n\t\t\t\t\t\tonSelect={(e) => {\n\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\ttoggleAllColumnsVisible();\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tchecked={getIsAllColumnsVisible()}\n\t\t\t\t\t>\n\t\t\t\t\t\t(Select all)\n\t\t\t\t\t</DropdownMenuCheckboxItem>\n\t\t\t\t\t{getAllColumns().map((col) => (\n\t\t\t\t\t\t<DropdownMenuCheckboxItem\n\t\t\t\t\t\t\tonSelect={(e) => {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\tcol.toggleVisibility();\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tkey={col.id}\n\t\t\t\t\t\t\tdisabled={!col.getCanHide()}\n\t\t\t\t\t\t\tchecked={col.getIsVisible()}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{col.getIsSorted()}{\" \"}\n\t\t\t\t\t\t\t{getResourceDisplayName(col.id, \"admin-portal\")}\n\t\t\t\t\t\t</DropdownMenuCheckboxItem>\n\t\t\t\t\t))}\n\t\t\t\t\t{/* TODO getResourceDisplayName needs some review here. */}\n\t\t\t\t</DropdownMenuGroup>\n\t\t\t</DropdownMenuContent>\n\t\t</DropdownMenu>\n\t);\n}\n"],"names":["ColumnPicker","toggleAllColumnsVisible","getIsAllColumnsVisible","getAllColumns","DropdownMenu","jsx","DropdownMenuTrigger","Button","Columns3","DropdownMenuContent","jsxs","DropdownMenuGroup","DropdownMenuCheckboxItem","col","e","getResourceDisplayName"],"mappings":";;;;;;;;AAYO,SAASA,EAAa;AAAA,EAC5B,yBAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,eAAAC;AACD,GAIG;AACF,2BACEC,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAoB,SAAO,IAC3B,UAAA,gBAAAD,EAACE,GAAA,EAAO,MAAM,MAAMC,GAAU,SAAS,WAAW,UAAA,UAAA,CAElD,GACD;AAAA,IACA,gBAAAH,EAACI,GAAA,EACA,UAAA,gBAAAC,EAACC,GAAA,EACA,UAAA;AAAA,MAAA,gBAAAN;AAAA,QAACO;AAAA,QAAA;AAAA,UACA,WAAU;AAAA,UACV,UAAU,CAAC,MAAM;AAChB,cAAE,eAAA,GACFX,EAAA;AAAA,UACD;AAAA,UACA,SAASC,EAAA;AAAA,UACT,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGAC,IAAgB,IAAI,CAACU,MACrB,gBAAAH;AAAA,QAACE;AAAA,QAAA;AAAA,UACA,UAAU,CAACE,MAAM;AAChB,YAAAA,EAAE,eAAA,GACFD,EAAI,iBAAA;AAAA,UACL;AAAA,UAEA,UAAU,CAACA,EAAI,WAAA;AAAA,UACf,SAASA,EAAI,aAAA;AAAA,UAEZ,UAAA;AAAA,YAAAA,EAAI,YAAA;AAAA,YAAe;AAAA,YACnBE,EAAuBF,EAAI,IAAI,cAAc;AAAA,UAAA;AAAA,QAAA;AAAA,QALzCA,EAAI;AAAA,MAAA,CAOV;AAAA,IAAA,EAAA,CAEF,EAAA,CACD;AAAA,EAAA,GACD;AAEF;"}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { jsxs as i, jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import { Button as d } from "../ui/button.es.js";
|
|
3
|
-
import { DropdownMenu as u, DropdownMenuTrigger as l, DropdownMenuContent as p, DropdownMenuRadioGroup as c, DropdownMenuRadioItem as m } from "../ui/dropdown-menu.es.js";
|
|
4
|
-
import { Menu as a } from "lucide-react";
|
|
5
|
-
function w({
|
|
6
|
-
size: r,
|
|
7
|
-
onSelect: e
|
|
8
|
-
}) {
|
|
9
|
-
const t = [10, 20, 30, 40, 50];
|
|
10
|
-
return /* @__PURE__ */ i(u, { children: [
|
|
11
|
-
/* @__PURE__ */ o(l, { asChild: !0, children: /* @__PURE__ */ o(d, { icon: () => a, variant: "outline", children: r }) }),
|
|
12
|
-
/* @__PURE__ */ o(p, { children: /* @__PURE__ */ o(c, { value: r.toString(), children: t.map((n) => /* @__PURE__ */ o(
|
|
13
|
-
m,
|
|
14
|
-
{
|
|
15
|
-
value: n.toString(),
|
|
16
|
-
onSelect: () => e(n),
|
|
17
|
-
children: n
|
|
18
|
-
}
|
|
19
|
-
)) }) })
|
|
20
|
-
] });
|
|
21
|
-
}
|
|
22
|
-
export {
|
|
23
|
-
w as PageSize
|
|
24
|
-
};
|
|
25
|
-
//# sourceMappingURL=page-size.es.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"page-size.es.js","sources":["../../../lib/components/data-table/page-size.tsx"],"sourcesContent":["import { Button } from \"@/components/ui/button\";\nimport {\n\tDropdownMenu,\n\tDropdownMenuContent,\n\tDropdownMenuRadioGroup,\n\tDropdownMenuRadioItem,\n\tDropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { Menu } from \"lucide-react\";\n\nexport function PageSize({\n\tsize,\n\tonSelect,\n}: { size: number; onSelect: (v: number) => void }) {\n\t// const currentPageSize = table.getState().pagination.pageSize;\n\tconst pageSizes = [10, 20, 30, 40, 50];\n\n\treturn (\n\t\t<DropdownMenu>\n\t\t\t<DropdownMenuTrigger asChild>\n\t\t\t\t<Button icon={() => Menu} variant=\"outline\">\n\t\t\t\t\t{size}\n\t\t\t\t</Button>\n\t\t\t</DropdownMenuTrigger>\n\t\t\t<DropdownMenuContent>\n\t\t\t\t<DropdownMenuRadioGroup value={size.toString()}>\n\t\t\t\t\t{pageSizes.map((pageSize) => (\n\t\t\t\t\t\t<DropdownMenuRadioItem\n\t\t\t\t\t\t\tvalue={pageSize.toString()}\n\t\t\t\t\t\t\tonSelect={() => onSelect(pageSize)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{pageSize}\n\t\t\t\t\t\t</DropdownMenuRadioItem>\n\t\t\t\t\t))}\n\t\t\t\t</DropdownMenuRadioGroup>\n\t\t\t</DropdownMenuContent>\n\t\t</DropdownMenu>\n\t);\n}\n"],"names":["PageSize","size","onSelect","pageSizes","DropdownMenu","jsx","DropdownMenuTrigger","Button","Menu","DropdownMenuContent","DropdownMenuRadioGroup","pageSize","DropdownMenuRadioItem"],"mappings":";;;;AAUO,SAASA,EAAS;AAAA,EACxB,MAAAC;AAAA,EACA,UAAAC;AACD,GAAoD;AAEnD,QAAMC,IAAY,CAAC,IAAI,IAAI,IAAI,IAAI,EAAE;AAErC,2BACEC,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAoB,SAAO,IAC3B,UAAA,gBAAAD,EAACE,GAAA,EAAO,MAAM,MAAMC,GAAM,SAAQ,WAChC,UAAAP,EAAA,CACF,GACD;AAAA,IACA,gBAAAI,EAACI,GAAA,EACA,UAAA,gBAAAJ,EAACK,GAAA,EAAuB,OAAOT,EAAK,SAAA,GAClC,UAAAE,EAAU,IAAI,CAACQ,MACf,gBAAAN;AAAA,MAACO;AAAA,MAAA;AAAA,QACA,OAAOD,EAAS,SAAA;AAAA,QAChB,UAAU,MAAMT,EAASS,CAAQ;AAAA,QAEhC,UAAAA;AAAA,MAAA;AAAA,IAAA,CAEF,GACF,EAAA,CACD;AAAA,EAAA,GACD;AAEF;"}
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import { jsxs as p, jsx as i } from "react/jsx-runtime";
|
|
2
|
-
import { Button as e } from "../ui/button.es.js";
|
|
3
|
-
import { ChevronFirst as d, ChevronLeft as m, ChevronRight as h, ChevronLast as v } from "lucide-react";
|
|
4
|
-
function g({
|
|
5
|
-
getCanPreviousPage: o,
|
|
6
|
-
getCanNextPage: c,
|
|
7
|
-
firstPage: s,
|
|
8
|
-
previousPage: l,
|
|
9
|
-
nextPage: r,
|
|
10
|
-
lastPage: t,
|
|
11
|
-
getState: n,
|
|
12
|
-
rowCount: a
|
|
13
|
-
}) {
|
|
14
|
-
return /* @__PURE__ */ p("div", { className: "flex items-center gap-2", children: [
|
|
15
|
-
/* @__PURE__ */ i("span", { className: "whitespace-nowrap caption text-muted", children: `${n().pagination.pageIndex * n().pagination.pageSize + 1} - ${Math.min(
|
|
16
|
-
(n().pagination.pageIndex + 1) * n().pagination.pageSize,
|
|
17
|
-
a
|
|
18
|
-
)} of ${a == null ? void 0 : a.toLocaleString()}` }),
|
|
19
|
-
/* @__PURE__ */ i(
|
|
20
|
-
e,
|
|
21
|
-
{
|
|
22
|
-
onClick: () => s(),
|
|
23
|
-
disabled: !o(),
|
|
24
|
-
variant: "outline",
|
|
25
|
-
size: "icon",
|
|
26
|
-
icon: () => d
|
|
27
|
-
}
|
|
28
|
-
),
|
|
29
|
-
/* @__PURE__ */ i(
|
|
30
|
-
e,
|
|
31
|
-
{
|
|
32
|
-
onClick: () => l(),
|
|
33
|
-
disabled: !o(),
|
|
34
|
-
variant: "outline",
|
|
35
|
-
size: "icon",
|
|
36
|
-
icon: () => m
|
|
37
|
-
}
|
|
38
|
-
),
|
|
39
|
-
/* @__PURE__ */ i(
|
|
40
|
-
e,
|
|
41
|
-
{
|
|
42
|
-
onClick: () => r(),
|
|
43
|
-
disabled: !c(),
|
|
44
|
-
variant: "outline",
|
|
45
|
-
size: "icon",
|
|
46
|
-
icon: () => h
|
|
47
|
-
}
|
|
48
|
-
),
|
|
49
|
-
/* @__PURE__ */ i(
|
|
50
|
-
e,
|
|
51
|
-
{
|
|
52
|
-
onClick: () => t(),
|
|
53
|
-
disabled: !c(),
|
|
54
|
-
variant: "outline",
|
|
55
|
-
size: "icon",
|
|
56
|
-
icon: () => v
|
|
57
|
-
}
|
|
58
|
-
)
|
|
59
|
-
] });
|
|
60
|
-
}
|
|
61
|
-
export {
|
|
62
|
-
g as Paginator
|
|
63
|
-
};
|
|
64
|
-
//# sourceMappingURL=paginator.es.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"paginator.es.js","sources":["../../../lib/components/data-table/paginator.tsx"],"sourcesContent":["import { Button } from \"@/components/ui/button\";\nimport type { TableState } from \"@tanstack/react-table\";\nimport {\n\tChevronFirst,\n\tChevronLast,\n\tChevronLeft,\n\tChevronRight,\n} from \"lucide-react\";\n\nexport function Paginator({\n\tgetCanPreviousPage,\n\tgetCanNextPage,\n\tfirstPage,\n\tpreviousPage,\n\tnextPage,\n\tlastPage,\n\tgetState,\n\trowCount,\n}: {\n\tgetCanPreviousPage: () => boolean;\n\tgetCanNextPage: () => boolean;\n\tfirstPage: () => void;\n\tpreviousPage: () => void;\n\tnextPage: () => void;\n\tlastPage: () => void;\n\tgetState: () => TableState;\n\trowCount: number;\n}) {\n\treturn (\n\t\t<div className=\"flex items-center gap-2\">\n\t\t\t<span className=\"whitespace-nowrap caption text-muted\">\n\t\t\t\t{`${getState().pagination.pageIndex * getState().pagination.pageSize + 1} - ${Math.min(\n\t\t\t\t\t(getState().pagination.pageIndex + 1) *\n\t\t\t\t\t\tgetState().pagination.pageSize,\n\t\t\t\t\trowCount,\n\t\t\t\t)} of ${rowCount?.toLocaleString()}`}\n\t\t\t</span>\n\n\t\t\t<Button\n\t\t\t\tonClick={() => firstPage()}\n\t\t\t\tdisabled={!getCanPreviousPage()}\n\t\t\t\tvariant=\"outline\"\n\t\t\t\tsize={\"icon\"}\n\t\t\t\ticon={() => ChevronFirst}\n\t\t\t/>\n\t\t\t<Button\n\t\t\t\tonClick={() => previousPage()}\n\t\t\t\tdisabled={!getCanPreviousPage()}\n\t\t\t\tvariant=\"outline\"\n\t\t\t\tsize={\"icon\"}\n\t\t\t\ticon={() => ChevronLeft}\n\t\t\t/>\n\t\t\t<Button\n\t\t\t\tonClick={() => nextPage()}\n\t\t\t\tdisabled={!getCanNextPage()}\n\t\t\t\tvariant=\"outline\"\n\t\t\t\tsize={\"icon\"}\n\t\t\t\ticon={() => ChevronRight}\n\t\t\t/>\n\t\t\t<Button\n\t\t\t\tonClick={() => lastPage()}\n\t\t\t\tdisabled={!getCanNextPage()}\n\t\t\t\tvariant=\"outline\"\n\t\t\t\tsize={\"icon\"}\n\t\t\t\ticon={() => ChevronLast}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],"names":["Paginator","getCanPreviousPage","getCanNextPage","firstPage","previousPage","nextPage","lastPage","getState","rowCount","jsxs","jsx","Button","ChevronFirst","ChevronLeft","ChevronRight","ChevronLast"],"mappings":";;;AASO,SAASA,EAAU;AAAA,EACzB,oBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACD,GASG;AACF,SACC,gBAAAC,EAAC,OAAA,EAAI,WAAU,2BACd,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,wCACd,UAAA,GAAGH,IAAW,WAAW,YAAYA,EAAA,EAAW,WAAW,WAAW,CAAC,MAAM,KAAK;AAAA,OACjFA,IAAW,WAAW,YAAY,KAClCA,EAAA,EAAW,WAAW;AAAA,MACvBC;AAAA,IAAA,CACA,OAAOA,KAAA,gBAAAA,EAAU,gBAAgB,GAAA,CACnC;AAAA,IAEA,gBAAAE;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,SAAS,MAAMR,EAAA;AAAA,QACf,UAAU,CAACF,EAAA;AAAA,QACX,SAAQ;AAAA,QACR,MAAM;AAAA,QACN,MAAM,MAAMW;AAAA,MAAA;AAAA,IAAA;AAAA,IAEb,gBAAAF;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,SAAS,MAAMP,EAAA;AAAA,QACf,UAAU,CAACH,EAAA;AAAA,QACX,SAAQ;AAAA,QACR,MAAM;AAAA,QACN,MAAM,MAAMY;AAAA,MAAA;AAAA,IAAA;AAAA,IAEb,gBAAAH;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,SAAS,MAAMN,EAAA;AAAA,QACf,UAAU,CAACH,EAAA;AAAA,QACX,SAAQ;AAAA,QACR,MAAM;AAAA,QACN,MAAM,MAAMY;AAAA,MAAA;AAAA,IAAA;AAAA,IAEb,gBAAAJ;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,SAAS,MAAML,EAAA;AAAA,QACf,UAAU,CAACJ,EAAA;AAAA,QACX,SAAQ;AAAA,QACR,MAAM;AAAA,QACN,MAAM,MAAMa;AAAA,MAAA;AAAA,IAAA;AAAA,EACb,GACD;AAEF;"}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { RotateCw as o } from "lucide-react";
|
|
3
|
-
import { Button as i } from "../ui/button.es.js";
|
|
4
|
-
import { useState as r } from "react";
|
|
5
|
-
function p({
|
|
6
|
-
tableActions: n,
|
|
7
|
-
getSelectedRowModel: a,
|
|
8
|
-
handleSearching: c,
|
|
9
|
-
dataQuery: t
|
|
10
|
-
}) {
|
|
11
|
-
const [l, s] = r("");
|
|
12
|
-
return /* @__PURE__ */ e("div", { className: "flex bg-card justify-between my-0 p-4 border gap-4 overflow-auto", children: /* @__PURE__ */ e("div", { className: "flex gap-4", children: /* @__PURE__ */ e(
|
|
13
|
-
i,
|
|
14
|
-
{
|
|
15
|
-
loading: t.isFetching,
|
|
16
|
-
icon: () => o,
|
|
17
|
-
onClick: () => t.refetch(),
|
|
18
|
-
variant: "outline",
|
|
19
|
-
size: "icon"
|
|
20
|
-
}
|
|
21
|
-
) }) });
|
|
22
|
-
}
|
|
23
|
-
export {
|
|
24
|
-
p as default
|
|
25
|
-
};
|
|
26
|
-
//# sourceMappingURL=table-actions.es.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"table-actions.es.js","sources":["../../../lib/components/data-table/table-actions.tsx"],"sourcesContent":["import { RotateCw } from \"lucide-react\";\n\nimport type { TableActions } from \"@/components/data-table/table-utils/index\";\nimport { Button } from \"@/components/ui/button\";\nimport type { UseQueryResult } from \"@tanstack/react-query\";\nimport type { RowModel } from \"@tanstack/react-table\";\nimport { useState } from \"react\";\n\nexport default function Actions({\n\ttableActions,\n\tgetSelectedRowModel,\n\thandleSearching,\n\tdataQuery,\n}: {\n\ttableActions: TableActions;\n\tgetSelectedRowModel: () => RowModel<any>;\n\thandleSearching: (value: string) => void;\n\tdataQuery: UseQueryResult<any, unknown>;\n}) {\n\t// const { location: { href } = {} } = useRouterState();\n\tconst [search, setSearch] = useState<string>(\"\");\n\treturn (\n\t\t<div className=\"flex bg-card justify-between my-0 p-4 border gap-4 overflow-auto\">\n\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t<Button\n\t\t\t\t\tloading={dataQuery.isFetching}\n\t\t\t\t\ticon={() => RotateCw}\n\t\t\t\t\tonClick={() => dataQuery.refetch()}\n\t\t\t\t\tvariant={\"outline\"}\n\t\t\t\t\tsize={\"icon\"}\n\t\t\t\t/>\n\t\t\t\t{/* //TODO: we can show the create, delete button based on permsission\n\t\t\t\t{/* All the creating routes will be with url /create in host app */}\n\t\t\t\t{/* */}\n\t\t\t</div>\n\t\t\t{/* {tableActions?.search && (\n\t\t\t\t<SearchInput\n\t\t\t\t\tvalue={search}\n\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\tsetSearch(e);\n\t\t\t\t\t\thandleSearching(e);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)} */}\n\t\t</div>\n\t);\n}\n"],"names":["Actions","tableActions","getSelectedRowModel","handleSearching","dataQuery","search","setSearch","useState","jsx","Button","RotateCw"],"mappings":";;;;AAQA,SAAwBA,EAAQ;AAAA,EAC/B,cAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AACD,GAKG;AAEF,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAiB,EAAE;AAC/C,2BACE,OAAA,EAAI,WAAU,oEACd,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,cACd,UAAA,gBAAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,SAASL,EAAU;AAAA,MACnB,MAAM,MAAMM;AAAA,MACZ,SAAS,MAAMN,EAAU,QAAA;AAAA,MACzB,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EAAA,GAKR,EAAA,CAUD;AAEF;"}
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { jsxs as i, jsx as t } from "react/jsx-runtime";
|
|
2
|
-
import { ACTIONS_COLUMN_ID as l } from "./data-table.es.js";
|
|
3
|
-
import { Table as d, TableHeader as p, TableRow as a, TableHead as u, TableBody as f, TableCell as g } from "../ui/table.es.js";
|
|
4
|
-
import { flexRender as s } from "@tanstack/react-table";
|
|
5
|
-
import { ArrowDownNarrowWide as x, ArrowDownWideNarrow as w, ArrowUpDown as b } from "lucide-react";
|
|
6
|
-
import { Button as h } from "../ui/button.es.js";
|
|
7
|
-
function k({
|
|
8
|
-
className: c,
|
|
9
|
-
getHeaderGroups: m,
|
|
10
|
-
getRowModel: r
|
|
11
|
-
}) {
|
|
12
|
-
return /* @__PURE__ */ i(d, { className: c, children: [
|
|
13
|
-
/* @__PURE__ */ t(p, { className: "sticky top-0 z-10", children: m().map((o) => /* @__PURE__ */ t(a, { children: o.headers.map((e) => /* @__PURE__ */ t(
|
|
14
|
-
u,
|
|
15
|
-
{
|
|
16
|
-
className: `px-4 py-2 text-left text-sm font-medium bg-card whitespace-nowrap ${e.id === l ? "sticky right-0 z-50 text-center" : ""}`,
|
|
17
|
-
children: /* @__PURE__ */ i("span", { className: "inline-flex items-center gap-1", children: [
|
|
18
|
-
/* @__PURE__ */ t("span", { children: e.isPlaceholder ? null : s(
|
|
19
|
-
e.column.columnDef.header,
|
|
20
|
-
e.getContext()
|
|
21
|
-
) }),
|
|
22
|
-
e.column.getCanSort() && /* @__PURE__ */ t(
|
|
23
|
-
h,
|
|
24
|
-
{
|
|
25
|
-
size: "icon",
|
|
26
|
-
variant: "ghost",
|
|
27
|
-
onClick: e.column.getToggleSortingHandler(),
|
|
28
|
-
icon: () => {
|
|
29
|
-
const n = e.column.getIsSorted();
|
|
30
|
-
return n === "asc" ? x : n === "desc" ? w : b;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
)
|
|
34
|
-
] })
|
|
35
|
-
},
|
|
36
|
-
e.id
|
|
37
|
-
)) }, o.id)) }),
|
|
38
|
-
/* @__PURE__ */ t(f, { className: "flex-1 overflow-y-auto relative", children: r().rows.length !== 0 && r().rows.map((o) => /* @__PURE__ */ t(
|
|
39
|
-
a,
|
|
40
|
-
{
|
|
41
|
-
className: "h-input transition-colors data-[state=selected]:bg-muted-foreground/30 hover:bg-muted-foreground/20",
|
|
42
|
-
"data-state": o.getIsSelected() && "selected",
|
|
43
|
-
children: o.getVisibleCells().map((e) => /* @__PURE__ */ t(
|
|
44
|
-
g,
|
|
45
|
-
{
|
|
46
|
-
className: `
|
|
47
|
-
px-4 py-2 text-left text-sm whitespace-nowrap
|
|
48
|
-
${e.column.id === l ? "sticky right-0 w-20 bg-card" : ""}
|
|
49
|
-
`,
|
|
50
|
-
children: s(
|
|
51
|
-
e.column.columnDef.cell,
|
|
52
|
-
e.getContext()
|
|
53
|
-
)
|
|
54
|
-
},
|
|
55
|
-
e.id
|
|
56
|
-
))
|
|
57
|
-
},
|
|
58
|
-
o.id
|
|
59
|
-
)) })
|
|
60
|
-
] });
|
|
61
|
-
}
|
|
62
|
-
export {
|
|
63
|
-
k as TableContent
|
|
64
|
-
};
|
|
65
|
-
//# sourceMappingURL=table-content.es.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"table-content.es.js","sources":["../../../lib/components/data-table/table-content.tsx"],"sourcesContent":["import { ACTIONS_COLUMN_ID } from \"@/components/data-table/data-table\";\nimport { Button } from \"@/components/ui\";\nimport {\n\tTableBody,\n\tTableCell,\n\tTable as TableComponent,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"@/components/ui/table\";\nimport {\n\ttype HeaderGroup,\n\ttype RowModel,\n\tflexRender,\n} from \"@tanstack/react-table\";\nimport {\n\tArrowDownNarrowWide,\n\tArrowDownWideNarrow,\n\tArrowUpDown\n} from \"lucide-react\";\n\n// TODO, automate checking valid HTML\nexport function TableContent({\n\tclassName,\n\tgetHeaderGroups,\n\tgetRowModel,\n}: {\n\tclassName?: string;\n\tgetRowModel: () => RowModel<any>;\n\tgetHeaderGroups: () => HeaderGroup<any>[];\n}) {\n\treturn (\n\t\t<TableComponent className={className}>\n\t\t\t<TableHeader className=\"sticky top-0 z-10\">\n\t\t\t\t{getHeaderGroups().map((headerGroup) => (\n\t\t\t\t\t<TableRow key={headerGroup.id}>\n\t\t\t\t\t\t{headerGroup.headers.map((header) => (\n\t\t\t\t\t\t\t<TableHead\n\t\t\t\t\t\t\t\tkey={header.id}\n\t\t\t\t\t\t\t\tclassName={`px-4 py-2 text-left text-sm font-medium bg-card whitespace-nowrap ${header.id === ACTIONS_COLUMN_ID ? \"sticky right-0 z-50 text-center\" : \"\"}`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span className=\"inline-flex items-center gap-1\">\n\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t{header.isPlaceholder\n\t\t\t\t\t\t\t\t\t\t\t? null\n\t\t\t\t\t\t\t\t\t\t\t: flexRender(\n\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header,\n\t\t\t\t\t\t\t\t\t\t\t\theader.getContext(),\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t{header.column.getCanSort() && (\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={header.column.getToggleSortingHandler()}\n\t\t\t\t\t\t\t\t\t\t\ticon={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tconst sort = header.column.getIsSorted();\n\t\t\t\t\t\t\t\t\t\t\t\tif (sort === \"asc\") {\n\t\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowDownNarrowWide;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tif (sort === \"desc\") {\n\t\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowDownWideNarrow;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowUpDown;\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TableRow>\n\t\t\t\t))}\n\t\t\t</TableHeader>\n\t\t\t<TableBody className=\"flex-1 overflow-y-auto relative\">\n\t\t\t\t{getRowModel().rows.length !== 0 &&\n\t\t\t\t\tgetRowModel().rows.map((row) => (\n\t\t\t\t\t\t<TableRow\n\t\t\t\t\t\t\tclassName=\"h-input transition-colors data-[state=selected]:bg-muted-foreground/30 hover:bg-muted-foreground/20\"\n\t\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\t\tdata-state={row.getIsSelected() && \"selected\"}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t\t\t\t\t<TableCell\n\t\t\t\t\t\t\t\t\tkey={cell.id}\n\t\t\t\t\t\t\t\t\tclassName={`\n px-4 py-2 text-left text-sm whitespace-nowrap\n ${cell.column.id === ACTIONS_COLUMN_ID\n\t\t\t\t\t\t\t\t\t\t\t? \"sticky right-0 w-20 bg-card\"\n\t\t\t\t\t\t\t\t\t\t\t: \"\"\n\t\t\t\t\t\t\t\t\t\t}\n `}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{flexRender(\n\t\t\t\t\t\t\t\t\t\tcell.column.columnDef.cell,\n\t\t\t\t\t\t\t\t\t\tcell.getContext(),\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t))}\n\t\t\t</TableBody>\n\t\t</TableComponent>\n\t);\n}\n"],"names":["TableContent","className","getHeaderGroups","getRowModel","jsxs","TableComponent","jsx","TableHeader","headerGroup","TableRow","header","TableHead","ACTIONS_COLUMN_ID","flexRender","Button","sort","ArrowDownNarrowWide","ArrowDownWideNarrow","ArrowUpDown","TableBody","row","cell","TableCell"],"mappings":";;;;;;AAsBO,SAASA,EAAa;AAAA,EAC5B,WAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,aAAAC;AACD,GAIG;AACF,SACC,gBAAAC,EAACC,KAAe,WAAAJ,GACf,UAAA;AAAA,IAAA,gBAAAK,EAACC,GAAA,EAAY,WAAU,qBACrB,UAAAL,EAAA,EAAkB,IAAI,CAACM,MACvB,gBAAAF,EAACG,GAAA,EACC,UAAAD,EAAY,QAAQ,IAAI,CAACE,MACzB,gBAAAJ;AAAA,MAACK;AAAA,MAAA;AAAA,QAEA,WAAW,qEAAqED,EAAO,OAAOE,IAAoB,oCAAoC,EAAE;AAAA,QAExJ,UAAA,gBAAAR,EAAC,QAAA,EAAK,WAAU,kCACf,UAAA;AAAA,UAAA,gBAAAE,EAAC,QAAA,EACC,UAAAI,EAAO,gBACL,OACAG;AAAA,YACDH,EAAO,OAAO,UAAU;AAAA,YACxBA,EAAO,WAAA;AAAA,UAAW,GAErB;AAAA,UACCA,EAAO,OAAO,WAAA,KACd,gBAAAJ;AAAA,YAACQ;AAAA,YAAA;AAAA,cACA,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,SAASJ,EAAO,OAAO,wBAAA;AAAA,cACvB,MAAM,MAAM;AACX,sBAAMK,IAAOL,EAAO,OAAO,YAAA;AAC3B,uBAAIK,MAAS,QACLC,IAEJD,MAAS,SACLE,IAGDC;AAAA,cACR;AAAA,YAAA;AAAA,UAAA;AAAA,QACD,EAAA,CAEF;AAAA,MAAA;AAAA,MA9BKR,EAAO;AAAA,IAAA,CAgCb,KAnCaF,EAAY,EAoC3B,CACA,EAAA,CACF;AAAA,IACA,gBAAAF,EAACa,GAAA,EAAU,WAAU,mCACnB,cAAc,KAAK,WAAW,KAC9BhB,EAAA,EAAc,KAAK,IAAI,CAACiB,MACvB,gBAAAd;AAAA,MAACG;AAAA,MAAA;AAAA,QACA,WAAU;AAAA,QAEV,cAAYW,EAAI,cAAA,KAAmB;AAAA,QAElC,UAAAA,EAAI,gBAAA,EAAkB,IAAI,CAACC,MAC3B,gBAAAf;AAAA,UAACgB;AAAA,UAAA;AAAA,YAEA,WAAW;AAAA;AAAA,sBAEED,EAAK,OAAO,OAAOT,IAC5B,gCACA,EACH;AAAA;AAAA,YAGA,UAAAC;AAAA,cACAQ,EAAK,OAAO,UAAU;AAAA,cACtBA,EAAK,WAAA;AAAA,YAAW;AAAA,UACjB;AAAA,UAZKA,EAAK;AAAA,QAAA,CAcX;AAAA,MAAA;AAAA,MAnBID,EAAI;AAAA,IAAA,CAqBV,EAAA,CACH;AAAA,EAAA,GACD;AAEF;"}
|