@smurfox/proxy-ui 0.1.3 → 0.1.32
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/module.json +1 -1
- package/dist/runtime/components/Card.vue +5 -5
- package/dist/runtime/components/Input.d.vue.ts +49 -0
- package/dist/runtime/components/Input.vue +84 -0
- package/dist/runtime/components/Input.vue.d.ts +49 -0
- package/dist/runtime/components/Tabs.d.vue.ts +1 -0
- package/dist/runtime/components/Tabs.vue +7 -2
- package/dist/runtime/components/Tabs.vue.d.ts +1 -0
- package/dist/runtime/types/index.d.ts +1 -0
- package/package.json +1 -1
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,49 @@
|
|
|
1
|
+
declare const rounded: {
|
|
2
|
+
readonly none: "rounded-none";
|
|
3
|
+
readonly sm: "rounded-sm";
|
|
4
|
+
readonly md: "rounded-md";
|
|
5
|
+
readonly lg: "rounded-lg";
|
|
6
|
+
readonly xl: "rounded-xl";
|
|
7
|
+
readonly "2xl": "rounded-2xl";
|
|
8
|
+
readonly full: "rounded-full";
|
|
9
|
+
};
|
|
10
|
+
type Rounded = keyof typeof rounded;
|
|
11
|
+
declare const variants: {
|
|
12
|
+
readonly 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";
|
|
13
|
+
readonly 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";
|
|
14
|
+
};
|
|
15
|
+
type Variant = keyof typeof variants;
|
|
16
|
+
type __VLS_Props = {
|
|
17
|
+
type?: string;
|
|
18
|
+
label?: string;
|
|
19
|
+
labelClass?: string;
|
|
20
|
+
placeholder?: string;
|
|
21
|
+
description?: string;
|
|
22
|
+
rounded?: Rounded;
|
|
23
|
+
variant?: Variant;
|
|
24
|
+
required?: boolean;
|
|
25
|
+
error?: string;
|
|
26
|
+
disabled?: boolean;
|
|
27
|
+
};
|
|
28
|
+
declare var __VLS_1: {}, __VLS_3: {};
|
|
29
|
+
type __VLS_Slots = {} & {
|
|
30
|
+
startContent?: (props: typeof __VLS_1) => any;
|
|
31
|
+
} & {
|
|
32
|
+
endContent?: (props: typeof __VLS_3) => any;
|
|
33
|
+
};
|
|
34
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
35
|
+
rounded: Rounded;
|
|
36
|
+
type: string;
|
|
37
|
+
variant: Variant;
|
|
38
|
+
disabled: boolean;
|
|
39
|
+
labelClass: string;
|
|
40
|
+
required: boolean;
|
|
41
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
42
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
43
|
+
declare const _default: typeof __VLS_export;
|
|
44
|
+
export default _default;
|
|
45
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
46
|
+
new (): {
|
|
47
|
+
$slots: S;
|
|
48
|
+
};
|
|
49
|
+
};
|
|
@@ -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: null, required: false, default: "xl" },
|
|
75
|
+
variant: { type: null, 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,49 @@
|
|
|
1
|
+
declare const rounded: {
|
|
2
|
+
readonly none: "rounded-none";
|
|
3
|
+
readonly sm: "rounded-sm";
|
|
4
|
+
readonly md: "rounded-md";
|
|
5
|
+
readonly lg: "rounded-lg";
|
|
6
|
+
readonly xl: "rounded-xl";
|
|
7
|
+
readonly "2xl": "rounded-2xl";
|
|
8
|
+
readonly full: "rounded-full";
|
|
9
|
+
};
|
|
10
|
+
type Rounded = keyof typeof rounded;
|
|
11
|
+
declare const variants: {
|
|
12
|
+
readonly 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";
|
|
13
|
+
readonly 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";
|
|
14
|
+
};
|
|
15
|
+
type Variant = keyof typeof variants;
|
|
16
|
+
type __VLS_Props = {
|
|
17
|
+
type?: string;
|
|
18
|
+
label?: string;
|
|
19
|
+
labelClass?: string;
|
|
20
|
+
placeholder?: string;
|
|
21
|
+
description?: string;
|
|
22
|
+
rounded?: Rounded;
|
|
23
|
+
variant?: Variant;
|
|
24
|
+
required?: boolean;
|
|
25
|
+
error?: string;
|
|
26
|
+
disabled?: boolean;
|
|
27
|
+
};
|
|
28
|
+
declare var __VLS_1: {}, __VLS_3: {};
|
|
29
|
+
type __VLS_Slots = {} & {
|
|
30
|
+
startContent?: (props: typeof __VLS_1) => any;
|
|
31
|
+
} & {
|
|
32
|
+
endContent?: (props: typeof __VLS_3) => any;
|
|
33
|
+
};
|
|
34
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
35
|
+
rounded: Rounded;
|
|
36
|
+
type: string;
|
|
37
|
+
variant: Variant;
|
|
38
|
+
disabled: boolean;
|
|
39
|
+
labelClass: string;
|
|
40
|
+
required: boolean;
|
|
41
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
42
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
43
|
+
declare const _default: typeof __VLS_export;
|
|
44
|
+
export default _default;
|
|
45
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
46
|
+
new (): {
|
|
47
|
+
$slots: S;
|
|
48
|
+
};
|
|
49
|
+
};
|
|
@@ -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
3
|
class="inline-flex gap-1 p-1"
|
|
4
|
-
:class="[
|
|
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;
|