@smurfox/proxy-ui 0.4.1 → 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 +3 -2
- 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 +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
|
@@ -764,8 +764,9 @@ A responsive data table that renders as a normal `<table>` on `md+` viewports an
|
|
|
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. |
|
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";
|
|
@@ -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",
|