@smurfox/proxy-ui 0.4.1 → 0.4.3
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/README.md +5 -4
- package/dist/module.json +1 -1
- package/dist/runtime/components/Autocomplete.vue +7 -7
- package/dist/runtime/components/Input.vue +3 -3
- package/dist/runtime/components/Select.vue +7 -7
- package/dist/runtime/components/Table.d.vue.ts +57 -106
- package/dist/runtime/components/Table.vue +17 -11
- package/dist/runtime/components/Table.vue.d.ts +57 -106
- package/dist/runtime/components/TextArea.vue +3 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -758,14 +758,15 @@ A responsive data table that renders as a normal `<table>` on `md+` viewports an
|
|
|
758
758
|
|
|
759
759
|
| Prop | Type | Default | Description |
|
|
760
760
|
| ---------------------- | ---------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
|
|
761
|
-
| `items` | `
|
|
761
|
+
| `items` | `TItem[]` where `TItem extends { id: string \| number }` | `[]` | Row data. `PUTable` is generic in `TItem`, so passing `SaleOrder[]`, `User[]`, etc. is type-safe — `row-click` and the `cell-{id}` slot scope infer your interface. |
|
|
762
762
|
| `columns` | `{ name: string, id: string, width?: string }[]` | `[]` | Column definitions. `id` is the row key to read, `width` is CSS width. |
|
|
763
763
|
| `rounded` | `'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| 'full'` | `'lg'` | Border radius of the outer container. |
|
|
764
764
|
| `isBordered` | `boolean` | `false` | Adds an outer border around the table. |
|
|
765
765
|
| `isSelectable` | `boolean` | `false` | Enables row click + hover effects (cursor, bg highlight, motion-v lift). Emits `row-click`. |
|
|
766
766
|
| `itemsSize` | `'sm' \| 'md' \| 'lg'` | `'md'` | Vertical padding of body rows. `sm` → `py-2`, `md` → `py-4`, `lg` → `py-6`. |
|
|
767
|
-
| `headerColor` | `string` | `bg-[#F4F4F5] text-[#71717A] dark:bg-[#
|
|
768
|
-
| `
|
|
767
|
+
| `headerColor` | `string` | `bg-[#F4F4F5] text-[#71717A] dark:bg-[#20242C] dark:text-[#9CA3AF]` | Tailwind classes applied to `<thead>`. |
|
|
768
|
+
| `isBodyColored` | `boolean` | `false` | When `true`, applies `bodyColor` to `<tbody>`. Leave `false` to let the parent paint the bg.|
|
|
769
|
+
| `bodyColor` | `string` | `'bg-white dark:bg-[#14171C]'` | Tailwind classes applied to `<tbody>` (only when `isBodyColored` is `true`). |
|
|
769
770
|
| `hasShadow` | `boolean` | `true` | Adds an iOS-style outer shadow to the table container. |
|
|
770
771
|
| `emptyStateTitle` | `string` | `'No results found'` | Heading shown when `items` is empty. |
|
|
771
772
|
| `emptyStateDescription`| `string` | `'Try adjusting your search or filter to find what you\'re looking for.'` | Sub-text shown under the empty-state title. |
|
|
@@ -777,7 +778,7 @@ A responsive data table that renders as a normal `<table>` on `md+` viewports an
|
|
|
777
778
|
|
|
778
779
|
| Event | Payload | Description |
|
|
779
780
|
| ----------- | -------------------------------------------------------- | ------------------------------------------------------------------------ |
|
|
780
|
-
| `row-click` | `item:
|
|
781
|
+
| `row-click` | `item: TItem` | Emitted when a row is clicked (only when `isSelectable` is `true`). `TItem` is inferred from `items`. |
|
|
781
782
|
|
|
782
783
|
**Slots**
|
|
783
784
|
|
package/dist/module.json
CHANGED
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
:exit="{ scale: 0.96, opacity: 0, y: -6 }"
|
|
66
66
|
class="fixed p-2 max-h-56 overflow-y-auto origin-top border rounded-xl shadow-xl"
|
|
67
67
|
:class="
|
|
68
|
-
isDarkMode ? 'bg-[#
|
|
68
|
+
isDarkMode ? 'bg-[#242830] border-[#2D323B] text-white' : 'bg-white border-gray-100'
|
|
69
69
|
"
|
|
70
70
|
:style="dropdownStyle"
|
|
71
71
|
@click.stop
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
<div
|
|
74
74
|
v-if="filteredOptions.length === 0"
|
|
75
75
|
class="px-4 py-2 text-sm text-center"
|
|
76
|
-
:class="isDarkMode ? 'text-
|
|
76
|
+
:class="isDarkMode ? 'text-[#8B92A0]' : 'text-black/50'"
|
|
77
77
|
>
|
|
78
78
|
No available options
|
|
79
79
|
</div>
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
type="button"
|
|
85
85
|
class="w-full flex items-center justify-between gap-3 px-3 py-2 mb-1 text-left cursor-pointer rounded-lg transition-colors"
|
|
86
86
|
:class="[
|
|
87
|
-
isDarkMode ? 'hover:bg-
|
|
87
|
+
isDarkMode ? 'hover:bg-[#2A2F37]' : 'hover:bg-gray-100',
|
|
88
88
|
option.value === props.modelValue ? selectedOptionClass : ''
|
|
89
89
|
]"
|
|
90
90
|
@click.stop="selectOption(option)"
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
|
|
112
112
|
<p
|
|
113
113
|
v-if="description && !props.error"
|
|
114
|
-
class="text-gray-600 dark:text-
|
|
114
|
+
class="text-gray-600 dark:text-[#8B92A0] text-xs"
|
|
115
115
|
>
|
|
116
116
|
{{ description }}
|
|
117
117
|
</p>
|
|
@@ -142,8 +142,8 @@ const roundedVariants = {
|
|
|
142
142
|
"full": "rounded-full"
|
|
143
143
|
};
|
|
144
144
|
const variants = {
|
|
145
|
-
default: "border border-gray-200 dark:border-
|
|
146
|
-
secondary: "border border-gray-200 dark:border-
|
|
145
|
+
default: "border border-gray-200 dark:border-[#2D323B] bg-white dark:bg-[#242830] enabled:hover:bg-gray-100 dark:enabled:hover:bg-[#2A2F37] dark:text-white dark:placeholder:text-[#6B7280] focus:bg-white dark:focus:bg-[#242830] focus:ring-2 focus:ring-primary focus:outline-none",
|
|
146
|
+
secondary: "border border-gray-200 dark:border-[#2D323B] bg-[#EBEBEC] dark:bg-[#1C2026] dark:text-white dark:placeholder:text-[#6B7280] enabled:hover:bg-[#E0E0E1] dark:enabled:hover:bg-[#22272F] focus:bg-[#EBEBEC] dark:focus:bg-[#1C2026] focus:ring-2 focus:ring-primary focus:outline-none"
|
|
147
147
|
};
|
|
148
148
|
const errorVariants = {
|
|
149
149
|
default: "border border-danger bg-danger/10 dark:bg-danger/20 text-black dark:text-white enabled:hover:bg-white/20 dark:enabled:hover:bg-white/20 focus:bg-white dark:focus:bg-white/10 focus:ring-2 focus:ring-danger focus:outline-none",
|
|
@@ -189,7 +189,7 @@ const dropdownStyle = computed(() => ({
|
|
|
189
189
|
zIndex: 9999
|
|
190
190
|
}));
|
|
191
191
|
const selectedOptionClass = computed(() => {
|
|
192
|
-
return isDarkMode.value ? "bg-
|
|
192
|
+
return isDarkMode.value ? "bg-primary/15" : "bg-primary/10";
|
|
193
193
|
});
|
|
194
194
|
const unselectedOptionClass = computed(() => {
|
|
195
195
|
return isDarkMode.value ? "text-white" : "text-black";
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
</div>
|
|
51
51
|
<p
|
|
52
52
|
v-if="description && !props.error"
|
|
53
|
-
class="text-gray-600 dark:text-
|
|
53
|
+
class="text-gray-600 dark:text-[#8B92A0] text-xs"
|
|
54
54
|
>
|
|
55
55
|
{{ description }}
|
|
56
56
|
</p>
|
|
@@ -75,8 +75,8 @@ const roundedClasses = {
|
|
|
75
75
|
"full": "rounded-full"
|
|
76
76
|
};
|
|
77
77
|
const variants = {
|
|
78
|
-
default: "border border-gray-200 dark:border-
|
|
79
|
-
secondary: "border border-gray-200 dark:border-
|
|
78
|
+
default: "border border-gray-200 dark:border-[#2D323B] bg-white dark:bg-[#242830] enabled:hover:bg-gray-100 dark:enabled:hover:bg-[#2A2F37] dark:text-white dark:placeholder:text-[#6B7280] focus:bg-white dark:focus:bg-[#242830] focus:ring-2 focus:ring-primary focus:outline-none",
|
|
79
|
+
secondary: "border border-gray-200 dark:border-[#2D323B] bg-[#EBEBEC] dark:bg-[#1C2026] dark:text-white dark:placeholder:text-[#6B7280] enabled:hover:bg-[#E0E0E1] dark:enabled:hover:bg-[#22272F] focus:bg-[#EBEBEC] dark:focus:bg-[#1C2026] focus:ring-2 focus:ring-primary focus:outline-none"
|
|
80
80
|
};
|
|
81
81
|
const errorVariants = {
|
|
82
82
|
default: "border border-danger bg-danger/10 dark:bg-danger/20 text-black dark:text-white enabled:hover:bg-white/20 dark:enabled:hover:bg-white/20 focus:bg-white dark:focus:bg-white/10 focus:ring-2 focus:ring-danger focus:outline-none",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
:exit="{ scale: 0.96, opacity: 0, y: -6 }"
|
|
53
53
|
class="fixed p-2 max-h-56 overflow-y-auto origin-top border rounded-xl shadow-xl"
|
|
54
54
|
:class="
|
|
55
|
-
isDarkMode ? 'bg-[#
|
|
55
|
+
isDarkMode ? 'bg-[#242830] border-[#2D323B] text-white' : 'bg-white border-gray-100'
|
|
56
56
|
"
|
|
57
57
|
:style="dropdownStyle"
|
|
58
58
|
@click.stop
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
<div
|
|
61
61
|
v-if="props.options.length === 0"
|
|
62
62
|
class="px-4 py-2 text-sm text-center"
|
|
63
|
-
:class="isDarkMode ? 'text-
|
|
63
|
+
:class="isDarkMode ? 'text-[#8B92A0]' : 'text-black/50'"
|
|
64
64
|
>
|
|
65
65
|
No available options
|
|
66
66
|
</div>
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
type="button"
|
|
72
72
|
class="w-full flex items-center justify-between gap-3 px-3 py-2 mb-1 text-left cursor-pointer rounded-lg transition-colors"
|
|
73
73
|
:class="[
|
|
74
|
-
isDarkMode ? 'hover:bg-
|
|
74
|
+
isDarkMode ? 'hover:bg-[#2A2F37]' : 'hover:bg-gray-100',
|
|
75
75
|
option.value === props.modelValue ? selectedOptionClass : ''
|
|
76
76
|
]"
|
|
77
77
|
@click.stop="selectOption(option)"
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
|
|
99
99
|
<p
|
|
100
100
|
v-if="description && !props.error"
|
|
101
|
-
class="text-gray-600 dark:text-
|
|
101
|
+
class="text-gray-600 dark:text-[#8B92A0] text-xs"
|
|
102
102
|
>
|
|
103
103
|
{{ description }}
|
|
104
104
|
</p>
|
|
@@ -129,8 +129,8 @@ const roundedVariants = {
|
|
|
129
129
|
"full": "rounded-full"
|
|
130
130
|
};
|
|
131
131
|
const variants = {
|
|
132
|
-
default: "border border-gray-200 dark:border-
|
|
133
|
-
secondary: "border border-gray-200 dark:border-
|
|
132
|
+
default: "border border-gray-200 dark:border-[#2D323B] bg-white dark:bg-[#242830] enabled:hover:bg-gray-100 dark:enabled:hover:bg-[#2A2F37] dark:text-white focus:bg-white dark:focus:bg-[#242830] focus:ring-2 focus:ring-primary focus:outline-none",
|
|
133
|
+
secondary: "border border-gray-200 dark:border-[#2D323B] bg-[#EBEBEC] dark:bg-[#1C2026] dark:text-white enabled:hover:bg-[#E0E0E1] dark:enabled:hover:bg-[#22272F] focus:bg-[#EBEBEC] dark:focus:bg-[#1C2026] focus:ring-2 focus:ring-primary focus:outline-none"
|
|
134
134
|
};
|
|
135
135
|
const errorVariants = {
|
|
136
136
|
default: "border border-danger bg-danger/10 dark:bg-danger/20 text-black dark:text-white enabled:hover:bg-white/20 dark:enabled:hover:bg-white/20 focus:bg-white dark:focus:bg-white/10 focus:ring-2 focus:ring-danger focus:outline-none",
|
|
@@ -167,7 +167,7 @@ const dropdownStyle = computed(() => ({
|
|
|
167
167
|
zIndex: 9999
|
|
168
168
|
}));
|
|
169
169
|
const selectedOptionClass = computed(() => {
|
|
170
|
-
return isDarkMode.value ? "bg-
|
|
170
|
+
return isDarkMode.value ? "bg-primary/15" : "bg-primary/10";
|
|
171
171
|
});
|
|
172
172
|
const unselectedOptionClass = computed(() => {
|
|
173
173
|
return isDarkMode.value ? "text-white" : "text-black";
|
|
@@ -1,110 +1,61 @@
|
|
|
1
|
-
declare const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
1
|
+
declare const __VLS_export: <TItem extends {
|
|
2
|
+
id: string | number;
|
|
3
|
+
}>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
4
|
+
props: import("vue").PublicProps & __VLS_PrettifyLocal<{
|
|
5
|
+
items?: TItem[];
|
|
6
|
+
columns?: {
|
|
7
|
+
name: string;
|
|
8
|
+
id: string;
|
|
9
|
+
width?: string;
|
|
10
|
+
}[];
|
|
11
|
+
rounded?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full";
|
|
12
|
+
isBordered?: boolean;
|
|
13
|
+
isSelectable?: boolean;
|
|
14
|
+
headerColor?: string;
|
|
15
|
+
isBodyColored?: boolean;
|
|
16
|
+
bodyColor?: string;
|
|
17
|
+
itemsSize?: "sm" | "md" | "lg";
|
|
18
|
+
hasShadow?: boolean;
|
|
19
|
+
emptyStateTitle?: string;
|
|
20
|
+
emptyStateDescription?: string;
|
|
21
|
+
showEmptyAnimation?: boolean;
|
|
22
|
+
emptyAnimationData?: object;
|
|
23
|
+
emptyAnimationSize?: number;
|
|
24
|
+
} & {
|
|
25
|
+
"onRow-click"?: ((item: TItem) => any) | undefined;
|
|
26
|
+
}> & (typeof globalThis extends {
|
|
27
|
+
__VLS_PROPS_FALLBACK: infer P;
|
|
28
|
+
} ? P : {});
|
|
29
|
+
expose: (exposed: {}) => void;
|
|
30
|
+
attrs: any;
|
|
31
|
+
slots: {
|
|
32
|
+
[x: `cell-${string}`]: ((props: {
|
|
33
|
+
item: TItem;
|
|
34
|
+
value: unknown;
|
|
35
|
+
}) => any) | undefined;
|
|
36
|
+
} & {
|
|
37
|
+
[x: `cell-${string}`]: ((props: {
|
|
38
|
+
item: TItem;
|
|
39
|
+
value: unknown;
|
|
40
|
+
}) => any) | undefined;
|
|
41
|
+
} & {
|
|
42
|
+
'mobile-card'?: (props: {
|
|
43
|
+
item: TItem;
|
|
44
|
+
columns: {
|
|
45
|
+
name: string;
|
|
46
|
+
id: string;
|
|
47
|
+
width?: string;
|
|
48
|
+
}[];
|
|
49
|
+
}) => any;
|
|
50
50
|
};
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
width?: string;
|
|
55
|
-
}[];
|
|
56
|
-
}, __VLS_29: `cell-${string}`, __VLS_30: {
|
|
57
|
-
item: {
|
|
58
|
-
[key: string]: unknown;
|
|
59
|
-
id: string | number;
|
|
60
|
-
};
|
|
61
|
-
value: unknown;
|
|
62
|
-
};
|
|
63
|
-
type __VLS_Slots = {} & {
|
|
64
|
-
[K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
|
|
65
|
-
} & {
|
|
66
|
-
[K in NonNullable<typeof __VLS_29>]?: (props: typeof __VLS_30) => any;
|
|
67
|
-
} & {
|
|
68
|
-
'mobile-card'?: (props: typeof __VLS_26) => any;
|
|
51
|
+
emit: (evt: "row-click", item: TItem) => void;
|
|
52
|
+
}>) => import("vue").VNode & {
|
|
53
|
+
__ctx?: Awaited<typeof __VLS_setup>;
|
|
69
54
|
};
|
|
70
|
-
declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
71
|
-
"row-click": (item: {
|
|
72
|
-
[key: string]: unknown;
|
|
73
|
-
id: string | number;
|
|
74
|
-
}) => any;
|
|
75
|
-
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
76
|
-
"onRow-click"?: ((item: {
|
|
77
|
-
[key: string]: unknown;
|
|
78
|
-
id: string | number;
|
|
79
|
-
}) => any) | undefined;
|
|
80
|
-
}>, {
|
|
81
|
-
rounded: keyof typeof roundedClasses;
|
|
82
|
-
columns: {
|
|
83
|
-
name: string;
|
|
84
|
-
id: string;
|
|
85
|
-
width?: string;
|
|
86
|
-
}[];
|
|
87
|
-
isBordered: boolean;
|
|
88
|
-
hasShadow: boolean;
|
|
89
|
-
items: Array<{
|
|
90
|
-
id: string | number;
|
|
91
|
-
[key: string]: unknown;
|
|
92
|
-
}>;
|
|
93
|
-
isSelectable: boolean;
|
|
94
|
-
headerColor: string;
|
|
95
|
-
bodyColor: string;
|
|
96
|
-
itemsSize: keyof typeof sizes;
|
|
97
|
-
emptyStateTitle: string;
|
|
98
|
-
emptyStateDescription: string;
|
|
99
|
-
showEmptyAnimation: boolean;
|
|
100
|
-
emptyAnimationData: object;
|
|
101
|
-
emptyAnimationSize: number;
|
|
102
|
-
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
103
|
-
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
104
55
|
declare const _default: typeof __VLS_export;
|
|
105
56
|
export default _default;
|
|
106
|
-
type
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
};
|
|
57
|
+
type __VLS_PrettifyLocal<T> = (T extends any ? {
|
|
58
|
+
[K in keyof T]: T[K];
|
|
59
|
+
} : {
|
|
60
|
+
[K in keyof T as K]: T[K];
|
|
61
|
+
}) & {};
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
class="hidden md:block overflow-clip"
|
|
6
6
|
:class="[
|
|
7
7
|
roundedClasses[props.rounded],
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
hasShadow ? 'pu-shadow-ios' : '',
|
|
9
|
+
isBordered ? 'border border-gray-200 dark:border-[#23272F] ' : ''
|
|
10
10
|
]"
|
|
11
11
|
>
|
|
12
12
|
<table class="w-full text-sm text-left rtl:text-right table-fixed">
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
</tr>
|
|
29
29
|
</thead>
|
|
30
30
|
|
|
31
|
-
<tbody :class="props.bodyColor">
|
|
31
|
+
<tbody :class="[props.isBodyColored ? props.bodyColor : '']">
|
|
32
32
|
<template v-if="items.length > 0">
|
|
33
33
|
<motion.tr
|
|
34
34
|
v-for="item in items"
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
:while-hover="props.isSelectable ? { scale: 1.01 } : {}"
|
|
37
37
|
:transition="{ type: 'spring', stiffness: 400, damping: 30 }"
|
|
38
38
|
:class="
|
|
39
|
-
props.isSelectable ? 'cursor-pointer hover:bg-gray-100 dark:hover:bg-
|
|
39
|
+
props.isSelectable ? 'cursor-pointer hover:bg-gray-100 dark:hover:bg-[#1C2026]' : ''
|
|
40
40
|
"
|
|
41
41
|
@click="props.isSelectable && emit('row-click', item)"
|
|
42
42
|
>
|
|
@@ -50,9 +50,9 @@
|
|
|
50
50
|
<slot
|
|
51
51
|
:name="`cell-${column.id}`"
|
|
52
52
|
:item="item"
|
|
53
|
-
:value="item
|
|
53
|
+
:value="getCellValue(item, column.id)"
|
|
54
54
|
>
|
|
55
|
-
{{ item
|
|
55
|
+
{{ getCellValue(item, column.id) }}
|
|
56
56
|
</slot>
|
|
57
57
|
</td>
|
|
58
58
|
</motion.tr>
|
|
@@ -66,7 +66,9 @@
|
|
|
66
66
|
<div class="flex flex-col items-center gap-1">
|
|
67
67
|
<Lottie
|
|
68
68
|
v-if="props.showEmptyAnimation"
|
|
69
|
-
:animation-data="
|
|
69
|
+
:animation-data="
|
|
70
|
+
props.emptyAnimationData ?? defaultEmptyAnimation
|
|
71
|
+
"
|
|
70
72
|
:width="props.emptyAnimationSize"
|
|
71
73
|
:height="props.emptyAnimationSize"
|
|
72
74
|
/>
|
|
@@ -120,9 +122,9 @@
|
|
|
120
122
|
<slot
|
|
121
123
|
:name="`cell-${column.id}`"
|
|
122
124
|
:item="item"
|
|
123
|
-
:value="item
|
|
125
|
+
:value="getCellValue(item, column.id)"
|
|
124
126
|
>
|
|
125
|
-
{{ item
|
|
127
|
+
{{ getCellValue(item, column.id) }}
|
|
126
128
|
</slot>
|
|
127
129
|
</div>
|
|
128
130
|
</div>
|
|
@@ -225,8 +227,9 @@ const props = defineProps({
|
|
|
225
227
|
rounded: { type: null, required: false, default: "lg" },
|
|
226
228
|
isBordered: { type: Boolean, required: false, default: false },
|
|
227
229
|
isSelectable: { type: Boolean, required: false, default: false },
|
|
228
|
-
headerColor: { type: String, required: false, default: "bg-[#F4F4F5] text-[#71717A] dark:bg-[#
|
|
229
|
-
|
|
230
|
+
headerColor: { type: String, required: false, default: "bg-[#F4F4F5] text-[#71717A] dark:bg-[#20242C] dark:text-[#9CA3AF]" },
|
|
231
|
+
isBodyColored: { type: Boolean, required: false, default: false },
|
|
232
|
+
bodyColor: { type: String, required: false, default: "bg-white dark:bg-[#14171C]" },
|
|
230
233
|
itemsSize: { type: null, required: false, default: "md" },
|
|
231
234
|
hasShadow: { type: Boolean, required: false, default: true },
|
|
232
235
|
emptyStateTitle: { type: String, required: false, default: "No results found" },
|
|
@@ -236,6 +239,9 @@ const props = defineProps({
|
|
|
236
239
|
emptyAnimationSize: { type: Number, required: false, default: 220 }
|
|
237
240
|
});
|
|
238
241
|
const emit = defineEmits(["row-click"]);
|
|
242
|
+
function getCellValue(item, key) {
|
|
243
|
+
return item[key];
|
|
244
|
+
}
|
|
239
245
|
</script>
|
|
240
246
|
|
|
241
247
|
<style scoped>
|
|
@@ -1,110 +1,61 @@
|
|
|
1
|
-
declare const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
1
|
+
declare const __VLS_export: <TItem extends {
|
|
2
|
+
id: string | number;
|
|
3
|
+
}>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
4
|
+
props: import("vue").PublicProps & __VLS_PrettifyLocal<{
|
|
5
|
+
items?: TItem[];
|
|
6
|
+
columns?: {
|
|
7
|
+
name: string;
|
|
8
|
+
id: string;
|
|
9
|
+
width?: string;
|
|
10
|
+
}[];
|
|
11
|
+
rounded?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full";
|
|
12
|
+
isBordered?: boolean;
|
|
13
|
+
isSelectable?: boolean;
|
|
14
|
+
headerColor?: string;
|
|
15
|
+
isBodyColored?: boolean;
|
|
16
|
+
bodyColor?: string;
|
|
17
|
+
itemsSize?: "sm" | "md" | "lg";
|
|
18
|
+
hasShadow?: boolean;
|
|
19
|
+
emptyStateTitle?: string;
|
|
20
|
+
emptyStateDescription?: string;
|
|
21
|
+
showEmptyAnimation?: boolean;
|
|
22
|
+
emptyAnimationData?: object;
|
|
23
|
+
emptyAnimationSize?: number;
|
|
24
|
+
} & {
|
|
25
|
+
"onRow-click"?: ((item: TItem) => any) | undefined;
|
|
26
|
+
}> & (typeof globalThis extends {
|
|
27
|
+
__VLS_PROPS_FALLBACK: infer P;
|
|
28
|
+
} ? P : {});
|
|
29
|
+
expose: (exposed: {}) => void;
|
|
30
|
+
attrs: any;
|
|
31
|
+
slots: {
|
|
32
|
+
[x: `cell-${string}`]: ((props: {
|
|
33
|
+
item: TItem;
|
|
34
|
+
value: unknown;
|
|
35
|
+
}) => any) | undefined;
|
|
36
|
+
} & {
|
|
37
|
+
[x: `cell-${string}`]: ((props: {
|
|
38
|
+
item: TItem;
|
|
39
|
+
value: unknown;
|
|
40
|
+
}) => any) | undefined;
|
|
41
|
+
} & {
|
|
42
|
+
'mobile-card'?: (props: {
|
|
43
|
+
item: TItem;
|
|
44
|
+
columns: {
|
|
45
|
+
name: string;
|
|
46
|
+
id: string;
|
|
47
|
+
width?: string;
|
|
48
|
+
}[];
|
|
49
|
+
}) => any;
|
|
50
50
|
};
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
width?: string;
|
|
55
|
-
}[];
|
|
56
|
-
}, __VLS_29: `cell-${string}`, __VLS_30: {
|
|
57
|
-
item: {
|
|
58
|
-
[key: string]: unknown;
|
|
59
|
-
id: string | number;
|
|
60
|
-
};
|
|
61
|
-
value: unknown;
|
|
62
|
-
};
|
|
63
|
-
type __VLS_Slots = {} & {
|
|
64
|
-
[K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
|
|
65
|
-
} & {
|
|
66
|
-
[K in NonNullable<typeof __VLS_29>]?: (props: typeof __VLS_30) => any;
|
|
67
|
-
} & {
|
|
68
|
-
'mobile-card'?: (props: typeof __VLS_26) => any;
|
|
51
|
+
emit: (evt: "row-click", item: TItem) => void;
|
|
52
|
+
}>) => import("vue").VNode & {
|
|
53
|
+
__ctx?: Awaited<typeof __VLS_setup>;
|
|
69
54
|
};
|
|
70
|
-
declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
71
|
-
"row-click": (item: {
|
|
72
|
-
[key: string]: unknown;
|
|
73
|
-
id: string | number;
|
|
74
|
-
}) => any;
|
|
75
|
-
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
76
|
-
"onRow-click"?: ((item: {
|
|
77
|
-
[key: string]: unknown;
|
|
78
|
-
id: string | number;
|
|
79
|
-
}) => any) | undefined;
|
|
80
|
-
}>, {
|
|
81
|
-
rounded: keyof typeof roundedClasses;
|
|
82
|
-
columns: {
|
|
83
|
-
name: string;
|
|
84
|
-
id: string;
|
|
85
|
-
width?: string;
|
|
86
|
-
}[];
|
|
87
|
-
isBordered: boolean;
|
|
88
|
-
hasShadow: boolean;
|
|
89
|
-
items: Array<{
|
|
90
|
-
id: string | number;
|
|
91
|
-
[key: string]: unknown;
|
|
92
|
-
}>;
|
|
93
|
-
isSelectable: boolean;
|
|
94
|
-
headerColor: string;
|
|
95
|
-
bodyColor: string;
|
|
96
|
-
itemsSize: keyof typeof sizes;
|
|
97
|
-
emptyStateTitle: string;
|
|
98
|
-
emptyStateDescription: string;
|
|
99
|
-
showEmptyAnimation: boolean;
|
|
100
|
-
emptyAnimationData: object;
|
|
101
|
-
emptyAnimationSize: number;
|
|
102
|
-
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
103
|
-
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
104
55
|
declare const _default: typeof __VLS_export;
|
|
105
56
|
export default _default;
|
|
106
|
-
type
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
};
|
|
57
|
+
type __VLS_PrettifyLocal<T> = (T extends any ? {
|
|
58
|
+
[K in keyof T]: T[K];
|
|
59
|
+
} : {
|
|
60
|
+
[K in keyof T as K]: T[K];
|
|
61
|
+
}) & {};
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
</div>
|
|
52
52
|
<p
|
|
53
53
|
v-if="description && !props.error"
|
|
54
|
-
class="text-gray-600 dark:text-
|
|
54
|
+
class="text-gray-600 dark:text-[#8B92A0] text-xs"
|
|
55
55
|
>
|
|
56
56
|
{{ description }}
|
|
57
57
|
</p>
|
|
@@ -75,8 +75,8 @@ const roundedVariants = {
|
|
|
75
75
|
"full": "rounded-full"
|
|
76
76
|
};
|
|
77
77
|
const variants = {
|
|
78
|
-
default: "border border-gray-200 dark:border-
|
|
79
|
-
secondary: "border border-gray-200 dark:border-
|
|
78
|
+
default: "border border-gray-200 dark:border-[#2D323B] bg-white dark:bg-[#242830] enabled:hover:bg-gray-100 dark:enabled:hover:bg-[#2A2F37] dark:text-white dark:placeholder:text-[#6B7280] focus:bg-white dark:focus:bg-[#242830] focus:ring-2 focus:ring-primary focus:outline-none",
|
|
79
|
+
secondary: "border border-gray-200 dark:border-[#2D323B] bg-[#EBEBEC] dark:bg-[#1C2026] dark:text-white dark:placeholder:text-[#6B7280] enabled:hover:bg-[#E0E0E1] dark:enabled:hover:bg-[#22272F] focus:bg-[#EBEBEC] dark:focus:bg-[#1C2026] focus:ring-2 focus:ring-primary focus:outline-none"
|
|
80
80
|
};
|
|
81
81
|
const errorVariants = {
|
|
82
82
|
default: "border border-danger bg-danger/10 dark:bg-danger/20 text-black dark:text-white enabled:hover:bg-white/20 dark:enabled:hover:bg-white/20 focus:bg-white dark:focus:bg-white/10 focus:ring-2 focus:ring-danger focus:outline-none",
|