@smurfox/proxy-ui 0.1.31 → 0.1.33
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 +327 -0
- package/dist/module.json +1 -1
- package/dist/runtime/components/Card.vue +5 -5
- package/dist/runtime/components/Input.d.vue.ts +35 -0
- package/dist/runtime/components/Input.vue +84 -0
- package/dist/runtime/components/Input.vue.d.ts +35 -0
- package/dist/runtime/components/Tabs.d.vue.ts +1 -0
- package/dist/runtime/components/Tabs.vue +8 -3
- package/dist/runtime/components/Tabs.vue.d.ts +1 -0
- package/dist/runtime/types/index.d.ts +15 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -91,6 +91,8 @@ A button component powered by `motion-v` for smooth press animations.
|
|
|
91
91
|
| `rounded` | `'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'full'` | `'lg'` | Border radius. |
|
|
92
92
|
| `disabled` | `boolean` | `false` | Disables the button. |
|
|
93
93
|
| `loading` | `boolean` | `false` | Shows a spinner and disables interaction. |
|
|
94
|
+
| `isIconOnly` | `boolean` | `false` | Displays only an icon without label. |
|
|
95
|
+
| `icon` | `string` | — | Iconify icon name for icon-only button. |
|
|
94
96
|
| `startIcon` | `string` | — | Iconify icon name rendered before the label. |
|
|
95
97
|
| `endIcon` | `string` | — | Iconify icon name rendered after the label. |
|
|
96
98
|
| `customClass` | `string` | — | Tailwind classes applied when `color="custom"`. |
|
|
@@ -119,6 +121,7 @@ A button component powered by `motion-v` for smooth press animations.
|
|
|
119
121
|
<!-- Icons -->
|
|
120
122
|
<PUButton start-icon="lucide:plus" label="New item" />
|
|
121
123
|
<PUButton end-icon="lucide:arrow-right" label="Continue" />
|
|
124
|
+
<PUButton is-icon-only icon="lucide:settings" />
|
|
122
125
|
|
|
123
126
|
<!-- States -->
|
|
124
127
|
<PUButton disabled label="Disabled" />
|
|
@@ -139,6 +142,315 @@ A button component powered by `motion-v` for smooth press animations.
|
|
|
139
142
|
|
|
140
143
|
---
|
|
141
144
|
|
|
145
|
+
### PUInput
|
|
146
|
+
|
|
147
|
+
A flexible input component with validation and state management.
|
|
148
|
+
|
|
149
|
+
```vue
|
|
150
|
+
<PUInput label="Username" placeholder="Enter your name" />
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
**Props**
|
|
154
|
+
|
|
155
|
+
| Prop | Type | Default | Description |
|
|
156
|
+
| ------------- | ----------------------------------------------------------- | ------------------------- | ---------------------------------------------------- |
|
|
157
|
+
| `type` | `string` | `'text'` | HTML input type (text, email, password, etc). |
|
|
158
|
+
| `label` | `string` | — | Label displayed above the input. |
|
|
159
|
+
| `labelClass` | `string` | `'text-sm font-semibold'` | Custom classes for the label. |
|
|
160
|
+
| `placeholder` | `string` | — | Placeholder text inside the input. |
|
|
161
|
+
| `description` | `string` | — | Helper text displayed below the input. |
|
|
162
|
+
| `rounded` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'full'` | `'xl'` | Border radius. |
|
|
163
|
+
| `variant` | `'default' \| 'secondary'` | `'default'` | Visual style of the input. |
|
|
164
|
+
| `required` | `boolean` | `false` | Shows a red asterisk on the label. |
|
|
165
|
+
| `error` | `string` | — | Error message to display. Changes styling to danger. |
|
|
166
|
+
| `disabled` | `boolean` | `false` | Disables the input. |
|
|
167
|
+
|
|
168
|
+
**Slots**
|
|
169
|
+
|
|
170
|
+
| Slot | Description |
|
|
171
|
+
| -------------- | ----------------------------- |
|
|
172
|
+
| `startContent` | Icon or content at the start. |
|
|
173
|
+
| `endContent` | Icon or content at the end. |
|
|
174
|
+
|
|
175
|
+
**Examples**
|
|
176
|
+
|
|
177
|
+
```vue
|
|
178
|
+
<!-- Basic -->
|
|
179
|
+
<PUInput label="Email" type="email" placeholder="you@example.com" />
|
|
180
|
+
|
|
181
|
+
<!-- With helper text -->
|
|
182
|
+
<PUInput label="Password" type="password" description="At least 8 characters" />
|
|
183
|
+
|
|
184
|
+
<!-- Required field -->
|
|
185
|
+
<PUInput label="Full name" required />
|
|
186
|
+
|
|
187
|
+
<!-- With error -->
|
|
188
|
+
<PUInput label="Username" error="This username is already taken" />
|
|
189
|
+
|
|
190
|
+
<!-- Disabled -->
|
|
191
|
+
<PUInput label="Disabled field" disabled value="Read only" />
|
|
192
|
+
|
|
193
|
+
<!-- With icons -->
|
|
194
|
+
<PUInput label="Search" placeholder="Search...">
|
|
195
|
+
<template #startContent>
|
|
196
|
+
<Icon name="lucide:search" />
|
|
197
|
+
</template>
|
|
198
|
+
</PUInput>
|
|
199
|
+
|
|
200
|
+
<!-- Variants -->
|
|
201
|
+
<PUInput variant="default" label="Default" />
|
|
202
|
+
<PUInput variant="secondary" label="Secondary" />
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
---
|
|
206
|
+
|
|
207
|
+
### PUCard
|
|
208
|
+
|
|
209
|
+
A flexible card component with customizable styling and borders.
|
|
210
|
+
|
|
211
|
+
```vue
|
|
212
|
+
<PUCard>
|
|
213
|
+
<h2>Card Title</h2>
|
|
214
|
+
<p>Card content goes here</p>
|
|
215
|
+
</PUCard>
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
**Props**
|
|
219
|
+
|
|
220
|
+
| Prop | Type | Default | Description |
|
|
221
|
+
| ------------- | ---------------------------- | ----------- | --------------------------------- |
|
|
222
|
+
| `variant` | `'default' \| 'liquidGlass'` | `'default'` | Visual style of the card. |
|
|
223
|
+
| `customClass` | `string` | — | Custom Tailwind classes to apply. |
|
|
224
|
+
| `isBordered` | `boolean` | `false` | Adds a border to the card. |
|
|
225
|
+
|
|
226
|
+
**Examples**
|
|
227
|
+
|
|
228
|
+
```vue
|
|
229
|
+
<!-- Basic card -->
|
|
230
|
+
<PUCard>
|
|
231
|
+
<p>Simple card with default styling</p>
|
|
232
|
+
</PUCard>
|
|
233
|
+
|
|
234
|
+
<!-- With border -->
|
|
235
|
+
<PUCard is-bordered>
|
|
236
|
+
<h3>Bordered Card</h3>
|
|
237
|
+
<p>This card has a border</p>
|
|
238
|
+
</PUCard>
|
|
239
|
+
|
|
240
|
+
<!-- Custom styling -->
|
|
241
|
+
<PUCard custom-class="bg-blue-100 p-6 rounded-lg">
|
|
242
|
+
<p>Fully customized card</p>
|
|
243
|
+
</PUCard>
|
|
244
|
+
|
|
245
|
+
<!-- Slot content -->
|
|
246
|
+
<PUCard>
|
|
247
|
+
<template #default>
|
|
248
|
+
<div class="flex items-center gap-4">
|
|
249
|
+
<img src="avatar.jpg" alt="Avatar" />
|
|
250
|
+
<div>
|
|
251
|
+
<h3>John Doe</h3>
|
|
252
|
+
<p>User profile card</p>
|
|
253
|
+
</div>
|
|
254
|
+
</div>
|
|
255
|
+
</template>
|
|
256
|
+
</PUCard>
|
|
257
|
+
```
|
|
258
|
+
|
|
259
|
+
---
|
|
260
|
+
|
|
261
|
+
### PUAvatar
|
|
262
|
+
|
|
263
|
+
An avatar component that displays user images, icons, or initials.
|
|
264
|
+
|
|
265
|
+
```vue
|
|
266
|
+
<PUAvatar label="JD" />
|
|
267
|
+
```
|
|
268
|
+
|
|
269
|
+
**Props**
|
|
270
|
+
|
|
271
|
+
| Prop | Type | Default | Description |
|
|
272
|
+
| --------- | ----------------------------------------------------------- | -------- | ------------------------- |
|
|
273
|
+
| `label` | `string` | — | Text/initials to display. |
|
|
274
|
+
| `icon` | `string` | — | Iconify icon name. |
|
|
275
|
+
| `image` | `string` | — | Image URL to display. |
|
|
276
|
+
| `size` | `'sm' \| 'md' \| 'lg' \| 'full'` | `'md'` | Avatar size. |
|
|
277
|
+
| `rounded` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'full'` | `'full'` | Border radius. |
|
|
278
|
+
|
|
279
|
+
**Examples**
|
|
280
|
+
|
|
281
|
+
```vue
|
|
282
|
+
<!-- With initials -->
|
|
283
|
+
<PUAvatar label="JD" size="md" />
|
|
284
|
+
|
|
285
|
+
<!-- With icon -->
|
|
286
|
+
<PUAvatar icon="lucide:user" size="lg" />
|
|
287
|
+
|
|
288
|
+
<!-- With image -->
|
|
289
|
+
<PUAvatar image="https://example.com/avatar.jpg" />
|
|
290
|
+
|
|
291
|
+
<!-- Different sizes -->
|
|
292
|
+
<PUAvatar label="A" size="sm" />
|
|
293
|
+
<PUAvatar label="A" size="md" />
|
|
294
|
+
<PUAvatar label="A" size="lg" />
|
|
295
|
+
|
|
296
|
+
<!-- Border radius -->
|
|
297
|
+
<PUAvatar label="JD" rounded="none" />
|
|
298
|
+
<PUAvatar label="JD" rounded="md" />
|
|
299
|
+
<PUAvatar label="JD" rounded="full" />
|
|
300
|
+
```
|
|
301
|
+
|
|
302
|
+
---
|
|
303
|
+
|
|
304
|
+
### PUChip
|
|
305
|
+
|
|
306
|
+
A compact component for displaying small pieces of information.
|
|
307
|
+
|
|
308
|
+
```vue
|
|
309
|
+
<PUChip label="Tag" />
|
|
310
|
+
```
|
|
311
|
+
|
|
312
|
+
**Props**
|
|
313
|
+
|
|
314
|
+
| Prop | Type | Default | Description |
|
|
315
|
+
| ------------- | ----------------------------------------------------------------------------------- | ----------- | ----------------------------------------------- |
|
|
316
|
+
| `label` | `string` | — | Text displayed in the chip. |
|
|
317
|
+
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Chip size. |
|
|
318
|
+
| `variant` | `'default' \| 'secondary' \| 'outline' \| 'flat'` | `'default'` | Visual style of the chip. |
|
|
319
|
+
| `color` | `'default' \| 'ios' \| 'primary' \| 'danger' \| 'success' \| 'warning' \| 'custom'` | `'default'` | Color scheme. |
|
|
320
|
+
| `rounded` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'full'` | `'full'` | Border radius. |
|
|
321
|
+
| `startIcon` | `string` | — | Iconify icon name at the start. |
|
|
322
|
+
| `endIcon` | `string` | — | Iconify icon name at the end. |
|
|
323
|
+
| `customClass` | `string` | — | Tailwind classes applied when `color="custom"`. |
|
|
324
|
+
|
|
325
|
+
**Examples**
|
|
326
|
+
|
|
327
|
+
```vue
|
|
328
|
+
<!-- Basic -->
|
|
329
|
+
<PUChip label="React" />
|
|
330
|
+
|
|
331
|
+
<!-- Variants -->
|
|
332
|
+
<PUChip variant="default" label="Default" />
|
|
333
|
+
<PUChip variant="secondary" label="Secondary" />
|
|
334
|
+
<PUChip variant="outline" label="Outline" />
|
|
335
|
+
<PUChip variant="flat" label="Flat" />
|
|
336
|
+
|
|
337
|
+
<!-- Colors -->
|
|
338
|
+
<PUChip color="primary" label="Primary" />
|
|
339
|
+
<PUChip color="danger" label="Danger" />
|
|
340
|
+
<PUChip color="success" label="Success" />
|
|
341
|
+
|
|
342
|
+
<!-- Sizes -->
|
|
343
|
+
<PUChip size="sm" label="Small" />
|
|
344
|
+
<PUChip size="md" label="Medium" />
|
|
345
|
+
<PUChip size="lg" label="Large" />
|
|
346
|
+
|
|
347
|
+
<!-- With icons -->
|
|
348
|
+
<PUChip start-icon="lucide:check" label="Done" />
|
|
349
|
+
<PUChip end-icon="lucide:x" label="Close" />
|
|
350
|
+
```
|
|
351
|
+
|
|
352
|
+
---
|
|
353
|
+
|
|
354
|
+
### PUTabs
|
|
355
|
+
|
|
356
|
+
A tabbed interface component with smooth animations.
|
|
357
|
+
|
|
358
|
+
```vue
|
|
359
|
+
<PUTabs
|
|
360
|
+
v-model="activeTab"
|
|
361
|
+
:tabs="[
|
|
362
|
+
{ label: 'Tab 1', value: 'tab1' },
|
|
363
|
+
{ label: 'Tab 2', value: 'tab2' },
|
|
364
|
+
]"
|
|
365
|
+
/>
|
|
366
|
+
```
|
|
367
|
+
|
|
368
|
+
**Props**
|
|
369
|
+
|
|
370
|
+
| Prop | Type | Default | Description |
|
|
371
|
+
| ------------------- | ------------------------------------------------------------------- | --------------------------------------------------------------------------- | ----------------------------- |
|
|
372
|
+
| `modelValue` | `string` | `''` | Active tab value (v-model). |
|
|
373
|
+
| `tabs` | `TabItem[]` | — | Array of tab items. |
|
|
374
|
+
| `iconSize` | `number` | `15` | Size of tab icons. |
|
|
375
|
+
| `rounded` | `'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'full'` | `'lg'` | Border radius. |
|
|
376
|
+
| `bgColor` | `string` | `'bg-black/5 dark:bg-white/10'` | Background color classes. |
|
|
377
|
+
| `btnColor` | `string` | `'bg-white dark:bg-white/10'` | Active tab button color. |
|
|
378
|
+
| `activeTextColor` | `string` | `'text-black dark:text-white'` | Active text color. |
|
|
379
|
+
| `inactiveTextColor` | `string` | `'text-black/70 dark:text-white/70 hover:text-black dark:hover:text-white'` | Inactive text color. |
|
|
380
|
+
| `disabledTabs` | `string[]` | `[]` | Array of disabled tab values. |
|
|
381
|
+
| `isVertical` | `boolean` | `false` | Display tabs vertically. |
|
|
382
|
+
|
|
383
|
+
**TabItem Interface**
|
|
384
|
+
|
|
385
|
+
```ts
|
|
386
|
+
interface TabItem {
|
|
387
|
+
label: string;
|
|
388
|
+
value: string;
|
|
389
|
+
icon?: string;
|
|
390
|
+
disabled?: boolean;
|
|
391
|
+
}
|
|
392
|
+
```
|
|
393
|
+
|
|
394
|
+
**Events**
|
|
395
|
+
|
|
396
|
+
| Event | Description |
|
|
397
|
+
| ------------------- | ---------------------------- |
|
|
398
|
+
| `update:modelValue` | Emitted when tab is clicked. |
|
|
399
|
+
|
|
400
|
+
**Examples**
|
|
401
|
+
|
|
402
|
+
```vue
|
|
403
|
+
<template>
|
|
404
|
+
<!-- Basic tabs -->
|
|
405
|
+
<PUTabs
|
|
406
|
+
v-model="activeTab"
|
|
407
|
+
:tabs="[
|
|
408
|
+
{ label: 'Dashboard', value: 'dashboard' },
|
|
409
|
+
{ label: 'Settings', value: 'settings' },
|
|
410
|
+
{ label: 'Profile', value: 'profile' },
|
|
411
|
+
]"
|
|
412
|
+
/>
|
|
413
|
+
|
|
414
|
+
<!-- With icons -->
|
|
415
|
+
<PUTabs
|
|
416
|
+
v-model="activeTab"
|
|
417
|
+
:tabs="[
|
|
418
|
+
{ label: 'Home', value: 'home', icon: 'lucide:home' },
|
|
419
|
+
{ label: 'Bell', value: 'bell', icon: 'lucide:bell' },
|
|
420
|
+
{ label: 'User', value: 'user', icon: 'lucide:user' },
|
|
421
|
+
]"
|
|
422
|
+
/>
|
|
423
|
+
|
|
424
|
+
<!-- With disabled tabs -->
|
|
425
|
+
<PUTabs
|
|
426
|
+
v-model="activeTab"
|
|
427
|
+
:tabs="[
|
|
428
|
+
{ label: 'Active', value: 'active' },
|
|
429
|
+
{ label: 'Disabled', value: 'disabled', disabled: true },
|
|
430
|
+
]"
|
|
431
|
+
:disabled-tabs="['disabled']"
|
|
432
|
+
/>
|
|
433
|
+
|
|
434
|
+
<!-- Vertical layout -->
|
|
435
|
+
<PUTabs v-model="activeTab" :tabs="tabs" is-vertical />
|
|
436
|
+
|
|
437
|
+
<!-- Custom colors -->
|
|
438
|
+
<PUTabs
|
|
439
|
+
v-model="activeTab"
|
|
440
|
+
:tabs="tabs"
|
|
441
|
+
bg-color="bg-gray-100 dark:bg-gray-800"
|
|
442
|
+
btn-color="bg-blue-500"
|
|
443
|
+
active-text-color="text-blue-600"
|
|
444
|
+
/>
|
|
445
|
+
</template>
|
|
446
|
+
|
|
447
|
+
<script setup>
|
|
448
|
+
const activeTab = ref("dashboard");
|
|
449
|
+
</script>
|
|
450
|
+
```
|
|
451
|
+
|
|
452
|
+
---
|
|
453
|
+
|
|
142
454
|
## TypeScript
|
|
143
455
|
|
|
144
456
|
ProxyUI exports all component types:
|
|
@@ -149,6 +461,21 @@ import type {
|
|
|
149
461
|
ButtonColor,
|
|
150
462
|
ButtonVariant,
|
|
151
463
|
ButtonSize,
|
|
464
|
+
ButtonRounded,
|
|
465
|
+
InputVariant,
|
|
466
|
+
InputRounded,
|
|
467
|
+
ChipProps,
|
|
468
|
+
ChipSize,
|
|
469
|
+
ChipVariant,
|
|
470
|
+
ChipColor,
|
|
471
|
+
ChipRounded,
|
|
472
|
+
CardProps,
|
|
473
|
+
CardVariant,
|
|
474
|
+
AvatarSize,
|
|
475
|
+
AvatarRounded,
|
|
476
|
+
TabItem,
|
|
477
|
+
TabsProps,
|
|
478
|
+
TabsRounded,
|
|
152
479
|
} from "proxy-ui";
|
|
153
480
|
```
|
|
154
481
|
|
package/dist/module.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
2
|
+
<div
|
|
3
3
|
:class="[
|
|
4
4
|
!hasBg ? 'bg-white dark:bg-white/5' : '',
|
|
5
5
|
!hasPadding ? 'p-4' : '',
|
|
@@ -7,10 +7,10 @@
|
|
|
7
7
|
!hasRounded ? 'rounded-2xl' : '',
|
|
8
8
|
customClass,
|
|
9
9
|
isBordered ? 'border border-gray-200 dark:border-white/5' : ''
|
|
10
|
-
]"
|
|
11
|
-
>
|
|
12
|
-
<slot />
|
|
13
|
-
</div>
|
|
10
|
+
]"
|
|
11
|
+
>
|
|
12
|
+
<slot />
|
|
13
|
+
</div>
|
|
14
14
|
</template>
|
|
15
15
|
|
|
16
16
|
<script setup>
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import type { InputVariant, InputRounded } from "../types/index.js";
|
|
2
|
+
type __VLS_Props = {
|
|
3
|
+
type?: string;
|
|
4
|
+
label?: string;
|
|
5
|
+
labelClass?: string;
|
|
6
|
+
placeholder?: string;
|
|
7
|
+
description?: string;
|
|
8
|
+
rounded?: InputRounded;
|
|
9
|
+
variant?: InputVariant;
|
|
10
|
+
required?: boolean;
|
|
11
|
+
error?: string;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
};
|
|
14
|
+
declare var __VLS_1: {}, __VLS_3: {};
|
|
15
|
+
type __VLS_Slots = {} & {
|
|
16
|
+
startContent?: (props: typeof __VLS_1) => any;
|
|
17
|
+
} & {
|
|
18
|
+
endContent?: (props: typeof __VLS_3) => any;
|
|
19
|
+
};
|
|
20
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
21
|
+
rounded: InputRounded;
|
|
22
|
+
type: string;
|
|
23
|
+
variant: InputVariant;
|
|
24
|
+
disabled: boolean;
|
|
25
|
+
labelClass: string;
|
|
26
|
+
required: boolean;
|
|
27
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
28
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
29
|
+
declare const _default: typeof __VLS_export;
|
|
30
|
+
export default _default;
|
|
31
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
32
|
+
new (): {
|
|
33
|
+
$slots: S;
|
|
34
|
+
};
|
|
35
|
+
};
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="flex flex-col gap-1">
|
|
3
|
+
<div v-if="label" class="flex items-start gap-1">
|
|
4
|
+
<label class="dark:text-white" :class="[labelClass]">{{ label }} </label>
|
|
5
|
+
<span v-if="props.required" class="text-danger">*</span>
|
|
6
|
+
</div>
|
|
7
|
+
<div class="relative w-full">
|
|
8
|
+
<!-- startContent -->
|
|
9
|
+
<div
|
|
10
|
+
v-if="$slots.startContent"
|
|
11
|
+
class="absolute left-3 top-1/2 -translate-y-1/2 flex items-center pointer-events-none"
|
|
12
|
+
:class="props.error ? 'text-danger' : ''"
|
|
13
|
+
>
|
|
14
|
+
<slot name="startContent" />
|
|
15
|
+
</div>
|
|
16
|
+
<input
|
|
17
|
+
:type="type"
|
|
18
|
+
:placeholder="placeholder"
|
|
19
|
+
class="w-full p-3 text-sm transition-colors"
|
|
20
|
+
:class="[
|
|
21
|
+
$slots.startContent ? 'pl-9' : '',
|
|
22
|
+
$slots.endContent ? 'pr-9' : '',
|
|
23
|
+
rounded[props.rounded],
|
|
24
|
+
props.error ? errorVariants[props.variant] : variants[props.variant],
|
|
25
|
+
props.disabled ? 'opacity-70' : ''
|
|
26
|
+
]"
|
|
27
|
+
:disabled="props.disabled"
|
|
28
|
+
/>
|
|
29
|
+
<!-- endContent -->
|
|
30
|
+
<div
|
|
31
|
+
v-if="$slots.endContent"
|
|
32
|
+
class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center"
|
|
33
|
+
>
|
|
34
|
+
<slot name="endContent" />
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
<p
|
|
38
|
+
v-if="description && !props.error"
|
|
39
|
+
class="text-gray-600 dark:text-white/60 text-xs"
|
|
40
|
+
>
|
|
41
|
+
{{ description }}
|
|
42
|
+
</p>
|
|
43
|
+
<!-- error message fuera de contenedor relativo -->
|
|
44
|
+
<p v-if="props.error" class="text-danger text-xs mt-1">
|
|
45
|
+
{{ props.error }}
|
|
46
|
+
</p>
|
|
47
|
+
</div>
|
|
48
|
+
</template>
|
|
49
|
+
|
|
50
|
+
<script setup>
|
|
51
|
+
const rounded = {
|
|
52
|
+
none: "rounded-none",
|
|
53
|
+
sm: "rounded-sm",
|
|
54
|
+
md: "rounded-md",
|
|
55
|
+
lg: "rounded-lg",
|
|
56
|
+
xl: "rounded-xl",
|
|
57
|
+
"2xl": "rounded-2xl",
|
|
58
|
+
full: "rounded-full"
|
|
59
|
+
};
|
|
60
|
+
const variants = {
|
|
61
|
+
default: "border border-gray-200 dark:border-white/10 bg-white dark:bg-white/10 enabled:hover:bg-gray-100 dark:enabled:hover:bg-white/20 dark:text-white focus:bg-white dark:focus:bg-white/10 focus:ring-2 focus:ring-primary focus:outline-none",
|
|
62
|
+
secondary: "border border-gray-200 dark:border-white/10 bg-[#EBEBEC] dark:bg-white/20 dark:text-white enabled:hover:bg-[#E0E0E1] dark:enabled:hover:bg-white/30 focus:bg-[#EBEBEC] dark:focus:bg-white/20 focus:ring-2 focus:ring-primary focus:outline-none"
|
|
63
|
+
};
|
|
64
|
+
const errorVariants = {
|
|
65
|
+
default: "border border-danger bg-white dark:bg-white/10 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",
|
|
66
|
+
secondary: "border border-danger bg-[#EBEBEC] dark:bg-white/20 dark:text-white enabled:hover:bg-[#E0E0E1] dark:enabled:hover:bg-white/30 focus:bg-[#EBEBEC] dark:focus:bg-white/20 focus:ring-2 focus:ring-danger focus:outline-none"
|
|
67
|
+
};
|
|
68
|
+
const props = defineProps({
|
|
69
|
+
type: { type: String, required: false, default: "text" },
|
|
70
|
+
label: { type: String, required: false },
|
|
71
|
+
labelClass: { type: String, required: false, default: "text-sm font-semibold" },
|
|
72
|
+
placeholder: { type: String, required: false },
|
|
73
|
+
description: { type: String, required: false },
|
|
74
|
+
rounded: { type: String, required: false, default: "xl" },
|
|
75
|
+
variant: { type: String, required: false, default: "default" },
|
|
76
|
+
required: { type: Boolean, required: false, default: false },
|
|
77
|
+
error: { type: String, required: false },
|
|
78
|
+
disabled: { type: Boolean, required: false, default: false }
|
|
79
|
+
});
|
|
80
|
+
</script>
|
|
81
|
+
|
|
82
|
+
<style scoped>
|
|
83
|
+
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{-webkit-box-shadow:inset 0 0 0 30px transparent!important;-webkit-text-fill-color:inherit!important;-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s}.dark input:-webkit-autofill,.dark input:-webkit-autofill:active,.dark input:-webkit-autofill:focus,.dark input:-webkit-autofill:hover{-webkit-text-fill-color:#fff!important}input:-moz-autofill{background-color:transparent!important}
|
|
84
|
+
</style>
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import type { InputVariant, InputRounded } from "../types/index.js";
|
|
2
|
+
type __VLS_Props = {
|
|
3
|
+
type?: string;
|
|
4
|
+
label?: string;
|
|
5
|
+
labelClass?: string;
|
|
6
|
+
placeholder?: string;
|
|
7
|
+
description?: string;
|
|
8
|
+
rounded?: InputRounded;
|
|
9
|
+
variant?: InputVariant;
|
|
10
|
+
required?: boolean;
|
|
11
|
+
error?: string;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
};
|
|
14
|
+
declare var __VLS_1: {}, __VLS_3: {};
|
|
15
|
+
type __VLS_Slots = {} & {
|
|
16
|
+
startContent?: (props: typeof __VLS_1) => any;
|
|
17
|
+
} & {
|
|
18
|
+
endContent?: (props: typeof __VLS_3) => any;
|
|
19
|
+
};
|
|
20
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
21
|
+
rounded: InputRounded;
|
|
22
|
+
type: string;
|
|
23
|
+
variant: InputVariant;
|
|
24
|
+
disabled: boolean;
|
|
25
|
+
labelClass: string;
|
|
26
|
+
required: boolean;
|
|
27
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
28
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
29
|
+
declare const _default: typeof __VLS_export;
|
|
30
|
+
export default _default;
|
|
31
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
32
|
+
new (): {
|
|
33
|
+
$slots: S;
|
|
34
|
+
};
|
|
35
|
+
};
|
|
@@ -12,6 +12,7 @@ declare const __VLS_export: import("vue").DefineComponent<TabsProps, {}, {}, {},
|
|
|
12
12
|
activeTextColor: string;
|
|
13
13
|
inactiveTextColor: string;
|
|
14
14
|
disabledTabs: string[];
|
|
15
|
+
isVertical: boolean;
|
|
15
16
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
16
17
|
declare const _default: typeof __VLS_export;
|
|
17
18
|
export default _default;
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div
|
|
3
|
-
class="inline-flex
|
|
4
|
-
:class="[
|
|
3
|
+
class="inline-flex gap-1 p-1"
|
|
4
|
+
:class="[
|
|
5
|
+
bgColor,
|
|
6
|
+
roundedClasses[rounded],
|
|
7
|
+
isVertical ? 'flex-col w-fit' : 'flex-row w-fit'
|
|
8
|
+
]"
|
|
5
9
|
>
|
|
6
10
|
<button
|
|
7
11
|
v-for="tab in tabs"
|
|
@@ -56,7 +60,8 @@ const props = defineProps({
|
|
|
56
60
|
btnColor: { type: String, required: false, default: "bg-white dark:bg-white/10" },
|
|
57
61
|
activeTextColor: { type: String, required: false, default: "text-black dark:text-white" },
|
|
58
62
|
inactiveTextColor: { type: String, required: false, default: "text-black/70 dark:text-white/70 hover:text-black dark:hover:text-white" },
|
|
59
|
-
disabledTabs: { type: Array, required: false, default: () => [] }
|
|
63
|
+
disabledTabs: { type: Array, required: false, default: () => [] },
|
|
64
|
+
isVertical: { type: Boolean, required: false, default: false }
|
|
60
65
|
});
|
|
61
66
|
const emit = defineEmits(["update:modelValue"]);
|
|
62
67
|
</script>
|
|
@@ -12,6 +12,7 @@ declare const __VLS_export: import("vue").DefineComponent<TabsProps, {}, {}, {},
|
|
|
12
12
|
activeTextColor: string;
|
|
13
13
|
inactiveTextColor: string;
|
|
14
14
|
disabledTabs: string[];
|
|
15
|
+
isVertical: boolean;
|
|
15
16
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
16
17
|
declare const _default: typeof __VLS_export;
|
|
17
18
|
export default _default;
|
|
@@ -38,6 +38,20 @@ export interface CardProps {
|
|
|
38
38
|
}
|
|
39
39
|
export type AvatarSize = "sm" | "md" | "lg" | "full";
|
|
40
40
|
export type AvatarRounded = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
|
|
41
|
+
export type InputVariant = "default" | "secondary";
|
|
42
|
+
export type InputRounded = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
|
|
43
|
+
export interface InputProps {
|
|
44
|
+
type?: string;
|
|
45
|
+
label?: string;
|
|
46
|
+
labelClass?: string;
|
|
47
|
+
placeholder?: string;
|
|
48
|
+
description?: string;
|
|
49
|
+
rounded?: InputRounded;
|
|
50
|
+
variant?: InputVariant;
|
|
51
|
+
required?: boolean;
|
|
52
|
+
error?: string;
|
|
53
|
+
disabled?: boolean;
|
|
54
|
+
}
|
|
41
55
|
export type TabsRounded = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
|
|
42
56
|
export interface TabItem {
|
|
43
57
|
label: string;
|
|
@@ -55,4 +69,5 @@ export interface TabsProps {
|
|
|
55
69
|
activeTextColor?: string;
|
|
56
70
|
inactiveTextColor?: string;
|
|
57
71
|
disabledTabs?: string[];
|
|
72
|
+
isVertical?: boolean;
|
|
58
73
|
}
|