@smurfox/proxy-ui 0.4.0 → 0.4.2
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 +9 -4
- package/dist/module.json +1 -1
- package/dist/runtime/components/Autocomplete.vue +7 -7
- package/dist/runtime/components/Avatar.vue +1 -1
- package/dist/runtime/components/Button.vue +10 -10
- package/dist/runtime/components/Card.vue +3 -3
- package/dist/runtime/components/Chip.vue +8 -8
- package/dist/runtime/components/Input.vue +3 -3
- package/dist/runtime/components/Select.vue +7 -7
- package/dist/runtime/components/Table.d.vue.ts +2 -0
- package/dist/runtime/components/Table.vue +10 -7
- package/dist/runtime/components/Table.vue.d.ts +2 -0
- package/dist/runtime/components/TextArea.vue +3 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -34,12 +34,15 @@ export default defineNuxtConfig({
|
|
|
34
34
|
});
|
|
35
35
|
```
|
|
36
36
|
|
|
37
|
-
Add Tailwind to your CSS entry file:
|
|
37
|
+
Add Tailwind to your CSS entry file and register the library as a source so Tailwind picks up the component classes:
|
|
38
38
|
|
|
39
39
|
```css
|
|
40
40
|
@import "tailwindcss";
|
|
41
|
+
@source "../node_modules/@smurfox/proxy-ui/dist";
|
|
41
42
|
```
|
|
42
43
|
|
|
44
|
+
> The `@source` path is relative to the CSS file. If your CSS lives deeper (e.g. `app/assets/css/main.css`), adjust the number of `../` segments so it resolves to your project root's `node_modules`. Without this directive, Tailwind v4 will not scan the library files and variants like `flat`/`outline` will render unstyled.
|
|
45
|
+
|
|
43
46
|
That's it. All `PU` components are auto-imported and ready to use.
|
|
44
47
|
|
|
45
48
|
---
|
|
@@ -50,6 +53,7 @@ ProxyUI uses CSS variables for colors. Add them to your CSS file to customize:
|
|
|
50
53
|
|
|
51
54
|
```css
|
|
52
55
|
@import "tailwindcss";
|
|
56
|
+
@source "../node_modules/@smurfox/proxy-ui/dist";
|
|
53
57
|
|
|
54
58
|
@theme {
|
|
55
59
|
--color-primary: #376fff;
|
|
@@ -420,7 +424,7 @@ A flexible card component with customizable styling and borders.
|
|
|
420
424
|
| ------------- | ---------------------------- | ----------- | --------------------------------- |
|
|
421
425
|
| `variant` | `'default' \| 'liquidGlass'` | `'default'` | Visual style of the card. |
|
|
422
426
|
| `customClass` | `string` | — | Custom Tailwind classes to apply. |
|
|
423
|
-
| `isBordered` | `boolean` | `
|
|
427
|
+
| `isBordered` | `boolean` | `true` | Adds a border to the card. |
|
|
424
428
|
|
|
425
429
|
**Examples**
|
|
426
430
|
|
|
@@ -760,8 +764,9 @@ A responsive data table that renders as a normal `<table>` on `md+` viewports an
|
|
|
760
764
|
| `isBordered` | `boolean` | `false` | Adds an outer border around the table. |
|
|
761
765
|
| `isSelectable` | `boolean` | `false` | Enables row click + hover effects (cursor, bg highlight, motion-v lift). Emits `row-click`. |
|
|
762
766
|
| `itemsSize` | `'sm' \| 'md' \| 'lg'` | `'md'` | Vertical padding of body rows. `sm` → `py-2`, `md` → `py-4`, `lg` → `py-6`. |
|
|
763
|
-
| `headerColor` | `string` | `bg-[#F4F4F5] text-[#71717A] dark:bg-[#
|
|
764
|
-
| `
|
|
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`). |
|
|
765
770
|
| `hasShadow` | `boolean` | `true` | Adds an iOS-style outer shadow to the table container. |
|
|
766
771
|
| `emptyStateTitle` | `string` | `'No results found'` | Heading shown when `items` is empty. |
|
|
767
772
|
| `emptyStateDescription`| `string` | `'Try adjusting your search or filter to find what you\'re looking for.'` | Sub-text shown under the empty-state title. |
|
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";
|
|
@@ -99,7 +99,7 @@ const props = defineProps({
|
|
|
99
99
|
customClass: { type: String, required: false }
|
|
100
100
|
});
|
|
101
101
|
const defaultColorClasses = {
|
|
102
|
-
default: "bg-gray-200/80 dark:bg-
|
|
102
|
+
default: "bg-gray-200/80 dark:bg-[#242830] text-black dark:text-white hover:bg-gray-300/80 dark:hover:bg-[#2D323B]",
|
|
103
103
|
ios: "bg-blue-500 text-white hover:brightness-110",
|
|
104
104
|
primary: "bg-primary text-white hover:brightness-110",
|
|
105
105
|
danger: "bg-danger text-black hover:brightness-110",
|
|
@@ -107,15 +107,15 @@ const defaultColorClasses = {
|
|
|
107
107
|
warning: "bg-warning text-black hover:brightness-110"
|
|
108
108
|
};
|
|
109
109
|
const secondaryColorClasses = {
|
|
110
|
-
default: "bg-gray-100 dark:bg-
|
|
111
|
-
ios: "bg-gray-200/60 dark:bg-
|
|
112
|
-
primary: "bg-gray-200/60 dark:bg-
|
|
113
|
-
danger: "bg-gray-200/60 dark:bg-
|
|
114
|
-
success: "bg-gray-200/60 dark:bg-
|
|
115
|
-
warning: "bg-gray-200/60 dark:bg-
|
|
110
|
+
default: "bg-gray-100 dark:bg-[#1A1D23] text-black dark:text-white hover:bg-gray-200/80 dark:hover:bg-[#22262E]",
|
|
111
|
+
ios: "bg-gray-200/60 dark:bg-[#242830] text-blue-500 hover:bg-gray-200 dark:hover:bg-white/10",
|
|
112
|
+
primary: "bg-gray-200/60 dark:bg-[#242830] text-primary hover:bg-gray-200 dark:hover:bg-white/10",
|
|
113
|
+
danger: "bg-gray-200/60 dark:bg-[#242830] text-danger hover:bg-gray-200 dark:hover:bg-white/10",
|
|
114
|
+
success: "bg-gray-200/60 dark:bg-[#242830] text-success hover:bg-gray-200 dark:hover:bg-white/10",
|
|
115
|
+
warning: "bg-gray-200/60 dark:bg-[#242830] text-warning hover:bg-gray-200 dark:hover:bg-white/10"
|
|
116
116
|
};
|
|
117
117
|
const outlineColorClasses = {
|
|
118
|
-
default: "border border-gray-300 text-black dark:border-
|
|
118
|
+
default: "border border-gray-300 text-black dark:border-[#2D323B] dark:text-white hover:bg-gray-100/80 dark:hover:bg-[#1A1D23]",
|
|
119
119
|
ios: "border border-blue-500 text-blue-500 hover:bg-blue-500/15 dark:hover:bg-blue-500/25",
|
|
120
120
|
primary: "border border-primary text-primary hover:bg-primary/15 dark:hover:bg-primary/25",
|
|
121
121
|
danger: "border border-danger text-danger hover:bg-danger/15 dark:hover:bg-danger/25",
|
|
@@ -123,7 +123,7 @@ const outlineColorClasses = {
|
|
|
123
123
|
warning: "border border-warning text-warning hover:bg-warning/15 dark:hover:bg-warning/25"
|
|
124
124
|
};
|
|
125
125
|
const ghostColorClasses = {
|
|
126
|
-
default: "text-black dark:text-white hover:bg-gray-200/60 dark:hover:bg-
|
|
126
|
+
default: "text-black dark:text-white hover:bg-gray-200/60 dark:hover:bg-[#1F232B]",
|
|
127
127
|
ios: "text-blue-500 hover:bg-blue-100 dark:hover:bg-blue-500/20",
|
|
128
128
|
primary: "text-primary hover:bg-primary/20 dark:hover:bg-primary/30",
|
|
129
129
|
danger: "text-danger hover:bg-danger/20 dark:hover:bg-danger/30",
|
|
@@ -131,7 +131,7 @@ const ghostColorClasses = {
|
|
|
131
131
|
warning: "text-warning hover:bg-warning/20 dark:hover:bg-warning/30"
|
|
132
132
|
};
|
|
133
133
|
const flatColorClasses = {
|
|
134
|
-
default: "bg-gray-100 dark:bg-
|
|
134
|
+
default: "bg-gray-100 dark:bg-[#1C1F26] text-black dark:text-white hover:bg-gray-200/80 dark:hover:bg-[#242830]",
|
|
135
135
|
ios: "bg-blue-500/15 text-blue-500 hover:bg-blue-500/25",
|
|
136
136
|
primary: "bg-primary/15 text-primary hover:bg-primary/25 dark:hover:bg-primary/30",
|
|
137
137
|
danger: "bg-danger/15 text-danger hover:bg-danger/25 dark:hover:bg-danger/30",
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div
|
|
3
3
|
:class="[
|
|
4
|
-
!hasBg ? 'bg-white dark:bg-
|
|
4
|
+
!hasBg ? 'bg-white dark:bg-[#14171C]' : '',
|
|
5
5
|
!hasPadding ? 'p-4' : '',
|
|
6
6
|
!hasShadow ? 'pu-shadow-ios' : '',
|
|
7
7
|
!hasRounded ? 'rounded-2xl' : '',
|
|
8
8
|
customClass,
|
|
9
|
-
isBordered ? 'border border-gray-200 dark:border-
|
|
9
|
+
isBordered ? 'border border-gray-200 dark:border-[#23272F]' : ''
|
|
10
10
|
]"
|
|
11
11
|
>
|
|
12
12
|
<slot />
|
|
@@ -18,7 +18,7 @@ import { computed } from "vue";
|
|
|
18
18
|
const props = defineProps({
|
|
19
19
|
variant: { type: String, required: false },
|
|
20
20
|
customClass: { type: String, required: false },
|
|
21
|
-
isBordered: { type: Boolean, required: false, default:
|
|
21
|
+
isBordered: { type: Boolean, required: false, default: true }
|
|
22
22
|
});
|
|
23
23
|
const hasBg = computed(
|
|
24
24
|
() => props.customClass?.split(" ").some((c) => c.startsWith("bg-"))
|
|
@@ -62,7 +62,7 @@ const props = defineProps({
|
|
|
62
62
|
iconSize: { type: String, required: false }
|
|
63
63
|
});
|
|
64
64
|
const defaultColorClasses = {
|
|
65
|
-
default: "bg-gray-200/80 dark:bg-
|
|
65
|
+
default: "bg-gray-200/80 dark:bg-[#242830] text-black dark:text-white",
|
|
66
66
|
ios: "bg-blue-500 text-white",
|
|
67
67
|
primary: "bg-primary text-white",
|
|
68
68
|
danger: "bg-danger text-black",
|
|
@@ -70,12 +70,12 @@ const defaultColorClasses = {
|
|
|
70
70
|
warning: "bg-warning text-black"
|
|
71
71
|
};
|
|
72
72
|
const secondaryColorClasses = {
|
|
73
|
-
default: "bg-gray-100 dark:bg-
|
|
74
|
-
ios: "bg-gray-200/60 dark:bg-
|
|
75
|
-
primary: "bg-gray-200/60 dark:bg-
|
|
76
|
-
danger: "bg-gray-200/60 dark:bg-
|
|
77
|
-
success: "bg-gray-200/60 dark:bg-
|
|
78
|
-
warning: "bg-gray-200/60 dark:bg-
|
|
73
|
+
default: "bg-gray-100 dark:bg-[#242830] text-black dark:text-white",
|
|
74
|
+
ios: "bg-gray-200/60 dark:bg-[#242830] text-blue-500",
|
|
75
|
+
primary: "bg-gray-200/60 dark:bg-[#242830] text-primary",
|
|
76
|
+
danger: "bg-gray-200/60 dark:bg-[#242830] text-danger",
|
|
77
|
+
success: "bg-gray-200/60 dark:bg-[#242830] text-success",
|
|
78
|
+
warning: "bg-gray-200/60 dark:bg-[#242830] text-warning"
|
|
79
79
|
};
|
|
80
80
|
const outlineColorClasses = {
|
|
81
81
|
default: "border border-gray-300 text-black dark:border-white/15 dark:text-white",
|
|
@@ -86,7 +86,7 @@ const outlineColorClasses = {
|
|
|
86
86
|
warning: "border border-warning text-warning"
|
|
87
87
|
};
|
|
88
88
|
const flatColorClasses = {
|
|
89
|
-
default: "bg-gray-100 dark:bg-
|
|
89
|
+
default: "bg-gray-100 dark:bg-[#242830] text-black dark:text-white",
|
|
90
90
|
ios: "bg-blue-500/15 text-blue-500",
|
|
91
91
|
primary: "bg-primary/15 text-primary",
|
|
92
92
|
danger: "bg-danger/15 text-danger",
|
|
@@ -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";
|
|
@@ -28,6 +28,7 @@ type __VLS_Props = {
|
|
|
28
28
|
isBordered?: boolean;
|
|
29
29
|
isSelectable?: boolean;
|
|
30
30
|
headerColor?: string;
|
|
31
|
+
isBodyColored?: boolean;
|
|
31
32
|
bodyColor?: string;
|
|
32
33
|
itemsSize?: keyof typeof sizes;
|
|
33
34
|
hasShadow?: boolean;
|
|
@@ -92,6 +93,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
|
|
|
92
93
|
}>;
|
|
93
94
|
isSelectable: boolean;
|
|
94
95
|
headerColor: string;
|
|
96
|
+
isBodyColored: boolean;
|
|
95
97
|
bodyColor: string;
|
|
96
98
|
itemsSize: keyof typeof sizes;
|
|
97
99
|
emptyStateTitle: string;
|
|
@@ -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
|
>
|
|
@@ -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
|
/>
|
|
@@ -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" },
|
|
@@ -28,6 +28,7 @@ type __VLS_Props = {
|
|
|
28
28
|
isBordered?: boolean;
|
|
29
29
|
isSelectable?: boolean;
|
|
30
30
|
headerColor?: string;
|
|
31
|
+
isBodyColored?: boolean;
|
|
31
32
|
bodyColor?: string;
|
|
32
33
|
itemsSize?: keyof typeof sizes;
|
|
33
34
|
hasShadow?: boolean;
|
|
@@ -92,6 +93,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
|
|
|
92
93
|
}>;
|
|
93
94
|
isSelectable: boolean;
|
|
94
95
|
headerColor: string;
|
|
96
|
+
isBodyColored: boolean;
|
|
95
97
|
bodyColor: string;
|
|
96
98
|
itemsSize: keyof typeof sizes;
|
|
97
99
|
emptyStateTitle: string;
|
|
@@ -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",
|