@smurfox/proxy-ui 0.1.33 → 0.1.35
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/Input.d.vue.ts +6 -1
- package/dist/runtime/components/Input.vue +8 -2
- package/dist/runtime/components/Input.vue.d.ts +6 -1
- package/dist/runtime/components/Select.d.vue.ts +37 -0
- package/dist/runtime/components/Select.vue +206 -0
- package/dist/runtime/components/Select.vue.d.ts +37 -0
- package/dist/runtime/components/TextArea.d.vue.ts +43 -0
- package/dist/runtime/components/TextArea.vue +106 -0
- package/dist/runtime/components/TextArea.vue.d.ts +43 -0
- package/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { InputVariant, InputRounded } from "../types/index.js";
|
|
2
2
|
type __VLS_Props = {
|
|
3
|
+
modelValue?: string | number;
|
|
3
4
|
type?: string;
|
|
4
5
|
label?: string;
|
|
5
6
|
labelClass?: string;
|
|
@@ -17,7 +18,11 @@ type __VLS_Slots = {} & {
|
|
|
17
18
|
} & {
|
|
18
19
|
endContent?: (props: typeof __VLS_3) => any;
|
|
19
20
|
};
|
|
20
|
-
declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
21
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
22
|
+
"update:modelValue": (value: string | number) => any;
|
|
23
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
24
|
+
"onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
|
|
25
|
+
}>, {
|
|
21
26
|
rounded: InputRounded;
|
|
22
27
|
type: string;
|
|
23
28
|
variant: InputVariant;
|
|
@@ -24,7 +24,11 @@
|
|
|
24
24
|
props.error ? errorVariants[props.variant] : variants[props.variant],
|
|
25
25
|
props.disabled ? 'opacity-70' : ''
|
|
26
26
|
]"
|
|
27
|
+
:value="modelValue"
|
|
27
28
|
:disabled="props.disabled"
|
|
29
|
+
@input="
|
|
30
|
+
emit('update:modelValue', $event.target.value)
|
|
31
|
+
"
|
|
28
32
|
/>
|
|
29
33
|
<!-- endContent -->
|
|
30
34
|
<div
|
|
@@ -62,10 +66,11 @@ const variants = {
|
|
|
62
66
|
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
67
|
};
|
|
64
68
|
const errorVariants = {
|
|
65
|
-
default: "border border-danger bg-
|
|
66
|
-
secondary: "border border-danger bg-
|
|
69
|
+
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",
|
|
70
|
+
secondary: "border border-danger bg-danger/22 dark:bg-danger/10 text-black 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
71
|
};
|
|
68
72
|
const props = defineProps({
|
|
73
|
+
modelValue: { type: [String, Number], required: false },
|
|
69
74
|
type: { type: String, required: false, default: "text" },
|
|
70
75
|
label: { type: String, required: false },
|
|
71
76
|
labelClass: { type: String, required: false, default: "text-sm font-semibold" },
|
|
@@ -77,6 +82,7 @@ const props = defineProps({
|
|
|
77
82
|
error: { type: String, required: false },
|
|
78
83
|
disabled: { type: Boolean, required: false, default: false }
|
|
79
84
|
});
|
|
85
|
+
const emit = defineEmits(["update:modelValue"]);
|
|
80
86
|
</script>
|
|
81
87
|
|
|
82
88
|
<style scoped>
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { InputVariant, InputRounded } from "../types/index.js";
|
|
2
2
|
type __VLS_Props = {
|
|
3
|
+
modelValue?: string | number;
|
|
3
4
|
type?: string;
|
|
4
5
|
label?: string;
|
|
5
6
|
labelClass?: string;
|
|
@@ -17,7 +18,11 @@ type __VLS_Slots = {} & {
|
|
|
17
18
|
} & {
|
|
18
19
|
endContent?: (props: typeof __VLS_3) => any;
|
|
19
20
|
};
|
|
20
|
-
declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
21
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
22
|
+
"update:modelValue": (value: string | number) => any;
|
|
23
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
24
|
+
"onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
|
|
25
|
+
}>, {
|
|
21
26
|
rounded: InputRounded;
|
|
22
27
|
type: string;
|
|
23
28
|
variant: InputVariant;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import type { InputRounded, InputVariant } from "../types/index.js";
|
|
2
|
+
interface SelectOption {
|
|
3
|
+
label: string;
|
|
4
|
+
value: string | number;
|
|
5
|
+
}
|
|
6
|
+
type __VLS_Props = {
|
|
7
|
+
modelValue?: string | number | null;
|
|
8
|
+
options?: SelectOption[];
|
|
9
|
+
label?: string;
|
|
10
|
+
labelClass?: string;
|
|
11
|
+
placeholder?: string;
|
|
12
|
+
description?: string;
|
|
13
|
+
rounded?: InputRounded;
|
|
14
|
+
variant?: InputVariant;
|
|
15
|
+
required?: boolean;
|
|
16
|
+
error?: string;
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
};
|
|
19
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
20
|
+
change: (value: string | number) => any;
|
|
21
|
+
"update:modelValue": (value: string | number) => any;
|
|
22
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
23
|
+
onChange?: ((value: string | number) => any) | undefined;
|
|
24
|
+
"onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
|
|
25
|
+
}>, {
|
|
26
|
+
rounded: InputRounded;
|
|
27
|
+
error: string;
|
|
28
|
+
variant: InputVariant;
|
|
29
|
+
disabled: boolean;
|
|
30
|
+
placeholder: string;
|
|
31
|
+
modelValue: string | number | null;
|
|
32
|
+
labelClass: string;
|
|
33
|
+
required: boolean;
|
|
34
|
+
options: SelectOption[];
|
|
35
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
36
|
+
declare const _default: typeof __VLS_export;
|
|
37
|
+
export default _default;
|
|
@@ -0,0 +1,206 @@
|
|
|
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
|
+
|
|
8
|
+
<div ref="selectRef" class="relative w-full text-left">
|
|
9
|
+
<button
|
|
10
|
+
type="button"
|
|
11
|
+
class="w-full p-3 text-sm text-left transition-colors flex items-center justify-between gap-3"
|
|
12
|
+
:class="[
|
|
13
|
+
roundedVariants[props.rounded],
|
|
14
|
+
props.error ? errorVariants[props.variant] : variants[props.variant],
|
|
15
|
+
props.disabled ? 'opacity-70 cursor-not-allowed' : 'cursor-pointer',
|
|
16
|
+
!selectedOption ? 'text-gray-500 dark:text-white/50' : ''
|
|
17
|
+
]"
|
|
18
|
+
:disabled="props.disabled"
|
|
19
|
+
@click.stop="toggle"
|
|
20
|
+
>
|
|
21
|
+
<span class="truncate">
|
|
22
|
+
{{ displayText }}
|
|
23
|
+
</span>
|
|
24
|
+
<Icon
|
|
25
|
+
name="mdi:chevron-down"
|
|
26
|
+
class="text-gray-400 transition-transform duration-200 shrink-0"
|
|
27
|
+
:class="{ 'rotate-180': isOpen && !props.disabled }"
|
|
28
|
+
/>
|
|
29
|
+
</button>
|
|
30
|
+
|
|
31
|
+
<Teleport v-if="isOpen && !props.disabled" to="body">
|
|
32
|
+
<AnimatePresence>
|
|
33
|
+
<motion.div
|
|
34
|
+
v-if="isOpen && !props.disabled"
|
|
35
|
+
:initial="{ scale: 0.96, opacity: 0, y: -6 }"
|
|
36
|
+
:animate="{ scale: 1, opacity: 1, y: 0 }"
|
|
37
|
+
:exit="{ scale: 0.96, opacity: 0, y: -6 }"
|
|
38
|
+
class="fixed p-2 max-h-56 overflow-y-auto origin-top border rounded-xl shadow-xl"
|
|
39
|
+
:class="
|
|
40
|
+
isDarkMode ? 'bg-[#212123] border-white/10 text-white' : 'bg-white border-gray-100'
|
|
41
|
+
"
|
|
42
|
+
:style="dropdownStyle"
|
|
43
|
+
@click.stop
|
|
44
|
+
>
|
|
45
|
+
<div
|
|
46
|
+
v-if="props.options.length === 0"
|
|
47
|
+
class="px-4 py-2 text-sm text-center"
|
|
48
|
+
:class="isDarkMode ? 'text-white/60' : 'text-black/50'"
|
|
49
|
+
>
|
|
50
|
+
No available options
|
|
51
|
+
</div>
|
|
52
|
+
<template v-else>
|
|
53
|
+
<button
|
|
54
|
+
v-for="option in props.options"
|
|
55
|
+
:key="String(option.value)"
|
|
56
|
+
type="button"
|
|
57
|
+
class="w-full flex items-center justify-between gap-3 px-3 py-2 mb-1 text-left cursor-pointer rounded-lg transition-colors"
|
|
58
|
+
:class="[
|
|
59
|
+
isDarkMode ? 'hover:bg-white/10' : 'hover:bg-gray-100',
|
|
60
|
+
option.value === props.modelValue ? selectedOptionClass : ''
|
|
61
|
+
]"
|
|
62
|
+
@click.stop="selectOption(option)"
|
|
63
|
+
>
|
|
64
|
+
<span
|
|
65
|
+
class="text-sm truncate"
|
|
66
|
+
:class="
|
|
67
|
+
option.value === props.modelValue ? 'text-primary' : unselectedOptionClass
|
|
68
|
+
"
|
|
69
|
+
>
|
|
70
|
+
{{ option.label }}
|
|
71
|
+
</span>
|
|
72
|
+
<Icon
|
|
73
|
+
v-if="option.value === props.modelValue"
|
|
74
|
+
name="mdi:check"
|
|
75
|
+
class="text-primary text-sm shrink-0"
|
|
76
|
+
/>
|
|
77
|
+
</button>
|
|
78
|
+
</template>
|
|
79
|
+
</motion.div>
|
|
80
|
+
</AnimatePresence>
|
|
81
|
+
</Teleport>
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
<p
|
|
85
|
+
v-if="description && !props.error"
|
|
86
|
+
class="text-gray-600 dark:text-white/60 text-xs"
|
|
87
|
+
>
|
|
88
|
+
{{ description }}
|
|
89
|
+
</p>
|
|
90
|
+
<p v-if="props.error" class="text-danger text-xs mt-1">
|
|
91
|
+
{{ props.error }}
|
|
92
|
+
</p>
|
|
93
|
+
</div>
|
|
94
|
+
</template>
|
|
95
|
+
|
|
96
|
+
<script setup>
|
|
97
|
+
import { AnimatePresence, motion } from "motion-v";
|
|
98
|
+
import { computed, nextTick, onMounted, onUnmounted, ref } from "vue";
|
|
99
|
+
const roundedVariants = {
|
|
100
|
+
none: "rounded-none",
|
|
101
|
+
sm: "rounded-sm",
|
|
102
|
+
md: "rounded-md",
|
|
103
|
+
lg: "rounded-lg",
|
|
104
|
+
xl: "rounded-xl",
|
|
105
|
+
"2xl": "rounded-2xl",
|
|
106
|
+
full: "rounded-full"
|
|
107
|
+
};
|
|
108
|
+
const variants = {
|
|
109
|
+
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",
|
|
110
|
+
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"
|
|
111
|
+
};
|
|
112
|
+
const errorVariants = {
|
|
113
|
+
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",
|
|
114
|
+
secondary: "border border-danger bg-danger/22 dark:bg-danger/10 text-black 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"
|
|
115
|
+
};
|
|
116
|
+
const props = defineProps({
|
|
117
|
+
modelValue: { type: [String, Number, null], required: false, default: null },
|
|
118
|
+
options: { type: Array, required: false, default: () => [] },
|
|
119
|
+
label: { type: String, required: false },
|
|
120
|
+
labelClass: { type: String, required: false, default: "text-sm font-semibold" },
|
|
121
|
+
placeholder: { type: String, required: false, default: "Seleccionar" },
|
|
122
|
+
description: { type: String, required: false },
|
|
123
|
+
rounded: { type: String, required: false, default: "xl" },
|
|
124
|
+
variant: { type: String, required: false, default: "default" },
|
|
125
|
+
required: { type: Boolean, required: false, default: false },
|
|
126
|
+
error: { type: String, required: false, default: "" },
|
|
127
|
+
disabled: { type: Boolean, required: false, default: false }
|
|
128
|
+
});
|
|
129
|
+
const emit = defineEmits(["update:modelValue", "change"]);
|
|
130
|
+
const selectRef = ref(null);
|
|
131
|
+
const isOpen = ref(false);
|
|
132
|
+
const isDarkMode = ref(false);
|
|
133
|
+
const dropdownPosition = ref({ top: 0, left: 0, width: 0 });
|
|
134
|
+
const selectedOption = computed(() => {
|
|
135
|
+
return props.options.find((option) => option.value === props.modelValue);
|
|
136
|
+
});
|
|
137
|
+
const displayText = computed(() => {
|
|
138
|
+
return selectedOption.value?.label || props.placeholder;
|
|
139
|
+
});
|
|
140
|
+
const dropdownStyle = computed(() => ({
|
|
141
|
+
top: `${dropdownPosition.value.top}px`,
|
|
142
|
+
left: `${dropdownPosition.value.left}px`,
|
|
143
|
+
width: `${dropdownPosition.value.width}px`,
|
|
144
|
+
zIndex: 9999
|
|
145
|
+
}));
|
|
146
|
+
const selectedOptionClass = computed(() => {
|
|
147
|
+
return isDarkMode.value ? "bg-white/10" : "bg-primary/10";
|
|
148
|
+
});
|
|
149
|
+
const unselectedOptionClass = computed(() => {
|
|
150
|
+
return isDarkMode.value ? "text-white" : "text-black";
|
|
151
|
+
});
|
|
152
|
+
function syncDarkMode() {
|
|
153
|
+
isDarkMode.value = Boolean(selectRef.value?.closest(".dark"));
|
|
154
|
+
}
|
|
155
|
+
function calculateDropdownPosition() {
|
|
156
|
+
if (!selectRef.value) {
|
|
157
|
+
return;
|
|
158
|
+
}
|
|
159
|
+
syncDarkMode();
|
|
160
|
+
const rect = selectRef.value.getBoundingClientRect();
|
|
161
|
+
dropdownPosition.value = {
|
|
162
|
+
top: rect.bottom + window.scrollY + 8,
|
|
163
|
+
left: rect.left + window.scrollX,
|
|
164
|
+
width: rect.width
|
|
165
|
+
};
|
|
166
|
+
}
|
|
167
|
+
async function toggle() {
|
|
168
|
+
if (props.disabled) {
|
|
169
|
+
return;
|
|
170
|
+
}
|
|
171
|
+
if (!isOpen.value) {
|
|
172
|
+
await nextTick();
|
|
173
|
+
calculateDropdownPosition();
|
|
174
|
+
}
|
|
175
|
+
isOpen.value = !isOpen.value;
|
|
176
|
+
}
|
|
177
|
+
function close() {
|
|
178
|
+
isOpen.value = false;
|
|
179
|
+
}
|
|
180
|
+
function selectOption(option) {
|
|
181
|
+
emit("update:modelValue", option.value);
|
|
182
|
+
emit("change", option.value);
|
|
183
|
+
close();
|
|
184
|
+
}
|
|
185
|
+
function onClickOutside(event) {
|
|
186
|
+
if (selectRef.value && !selectRef.value.contains(event.target)) {
|
|
187
|
+
close();
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
function onScroll() {
|
|
191
|
+
if (isOpen.value) {
|
|
192
|
+
calculateDropdownPosition();
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
onMounted(() => {
|
|
196
|
+
syncDarkMode();
|
|
197
|
+
document.addEventListener("click", onClickOutside);
|
|
198
|
+
window.addEventListener("scroll", onScroll, true);
|
|
199
|
+
window.addEventListener("resize", onScroll);
|
|
200
|
+
});
|
|
201
|
+
onUnmounted(() => {
|
|
202
|
+
document.removeEventListener("click", onClickOutside);
|
|
203
|
+
window.removeEventListener("scroll", onScroll, true);
|
|
204
|
+
window.removeEventListener("resize", onScroll);
|
|
205
|
+
});
|
|
206
|
+
</script>
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import type { InputRounded, InputVariant } from "../types/index.js";
|
|
2
|
+
interface SelectOption {
|
|
3
|
+
label: string;
|
|
4
|
+
value: string | number;
|
|
5
|
+
}
|
|
6
|
+
type __VLS_Props = {
|
|
7
|
+
modelValue?: string | number | null;
|
|
8
|
+
options?: SelectOption[];
|
|
9
|
+
label?: string;
|
|
10
|
+
labelClass?: string;
|
|
11
|
+
placeholder?: string;
|
|
12
|
+
description?: string;
|
|
13
|
+
rounded?: InputRounded;
|
|
14
|
+
variant?: InputVariant;
|
|
15
|
+
required?: boolean;
|
|
16
|
+
error?: string;
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
};
|
|
19
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
20
|
+
change: (value: string | number) => any;
|
|
21
|
+
"update:modelValue": (value: string | number) => any;
|
|
22
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
23
|
+
onChange?: ((value: string | number) => any) | undefined;
|
|
24
|
+
"onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
|
|
25
|
+
}>, {
|
|
26
|
+
rounded: InputRounded;
|
|
27
|
+
error: string;
|
|
28
|
+
variant: InputVariant;
|
|
29
|
+
disabled: boolean;
|
|
30
|
+
placeholder: string;
|
|
31
|
+
modelValue: string | number | null;
|
|
32
|
+
labelClass: string;
|
|
33
|
+
required: boolean;
|
|
34
|
+
options: SelectOption[];
|
|
35
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
36
|
+
declare const _default: typeof __VLS_export;
|
|
37
|
+
export default _default;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import type { InputRounded, InputVariant } from '../types/index.js';
|
|
2
|
+
type TextAreaResize = 'none' | 'both' | 'horizontal' | 'vertical';
|
|
3
|
+
type __VLS_Props = {
|
|
4
|
+
modelValue?: string | number;
|
|
5
|
+
label?: string;
|
|
6
|
+
labelClass?: string;
|
|
7
|
+
placeholder?: string;
|
|
8
|
+
description?: string;
|
|
9
|
+
rounded?: InputRounded;
|
|
10
|
+
variant?: InputVariant;
|
|
11
|
+
required?: boolean;
|
|
12
|
+
error?: string;
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
rows?: number | string;
|
|
15
|
+
resize?: TextAreaResize;
|
|
16
|
+
};
|
|
17
|
+
declare var __VLS_1: {}, __VLS_3: {};
|
|
18
|
+
type __VLS_Slots = {} & {
|
|
19
|
+
startContent?: (props: typeof __VLS_1) => any;
|
|
20
|
+
} & {
|
|
21
|
+
endContent?: (props: typeof __VLS_3) => any;
|
|
22
|
+
};
|
|
23
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
24
|
+
"update:modelValue": (value: string | number) => any;
|
|
25
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
26
|
+
"onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
|
|
27
|
+
}>, {
|
|
28
|
+
rounded: InputRounded;
|
|
29
|
+
resize: TextAreaResize;
|
|
30
|
+
variant: InputVariant;
|
|
31
|
+
disabled: boolean;
|
|
32
|
+
labelClass: string;
|
|
33
|
+
required: boolean;
|
|
34
|
+
rows: number | string;
|
|
35
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
36
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
37
|
+
declare const _default: typeof __VLS_export;
|
|
38
|
+
export default _default;
|
|
39
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
40
|
+
new (): {
|
|
41
|
+
$slots: S;
|
|
42
|
+
};
|
|
43
|
+
};
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="flex flex-col gap-1">
|
|
3
|
+
<div
|
|
4
|
+
v-if="label"
|
|
5
|
+
class="flex items-start gap-1"
|
|
6
|
+
>
|
|
7
|
+
<label
|
|
8
|
+
class="dark:text-white"
|
|
9
|
+
:class="[labelClass]"
|
|
10
|
+
>{{ label }} </label>
|
|
11
|
+
<span
|
|
12
|
+
v-if="props.required"
|
|
13
|
+
class="text-danger"
|
|
14
|
+
>*</span>
|
|
15
|
+
</div>
|
|
16
|
+
<div class="relative w-full">
|
|
17
|
+
<div
|
|
18
|
+
v-if="$slots.startContent"
|
|
19
|
+
class="absolute left-3 top-3 flex items-center pointer-events-none"
|
|
20
|
+
:class="props.error ? 'text-danger' : ''"
|
|
21
|
+
>
|
|
22
|
+
<slot name="startContent" />
|
|
23
|
+
</div>
|
|
24
|
+
<textarea
|
|
25
|
+
:placeholder="placeholder"
|
|
26
|
+
:rows="rows"
|
|
27
|
+
class="w-full p-3 text-sm transition-colors"
|
|
28
|
+
:class="[
|
|
29
|
+
$slots.startContent ? 'pl-9' : '',
|
|
30
|
+
$slots.endContent ? 'pr-9' : '',
|
|
31
|
+
resizeVariants[props.resize],
|
|
32
|
+
roundedVariants[props.rounded],
|
|
33
|
+
props.error ? errorVariants[props.variant] : variants[props.variant],
|
|
34
|
+
props.disabled ? 'opacity-70' : ''
|
|
35
|
+
]"
|
|
36
|
+
:value="modelValue"
|
|
37
|
+
:disabled="props.disabled"
|
|
38
|
+
@input="
|
|
39
|
+
emit(
|
|
40
|
+
'update:modelValue',
|
|
41
|
+
$event.target.value
|
|
42
|
+
)
|
|
43
|
+
"
|
|
44
|
+
/>
|
|
45
|
+
<div
|
|
46
|
+
v-if="$slots.endContent"
|
|
47
|
+
class="absolute right-3 top-3 flex items-center"
|
|
48
|
+
>
|
|
49
|
+
<slot name="endContent" />
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
<p
|
|
53
|
+
v-if="description && !props.error"
|
|
54
|
+
class="text-gray-600 dark:text-white/60 text-xs"
|
|
55
|
+
>
|
|
56
|
+
{{ description }}
|
|
57
|
+
</p>
|
|
58
|
+
<p
|
|
59
|
+
v-if="props.error"
|
|
60
|
+
class="text-danger text-xs mt-1"
|
|
61
|
+
>
|
|
62
|
+
{{ props.error }}
|
|
63
|
+
</p>
|
|
64
|
+
</div>
|
|
65
|
+
</template>
|
|
66
|
+
|
|
67
|
+
<script setup>
|
|
68
|
+
const roundedVariants = {
|
|
69
|
+
"none": "rounded-none",
|
|
70
|
+
"sm": "rounded-sm",
|
|
71
|
+
"md": "rounded-md",
|
|
72
|
+
"lg": "rounded-lg",
|
|
73
|
+
"xl": "rounded-xl",
|
|
74
|
+
"2xl": "rounded-2xl",
|
|
75
|
+
"full": "rounded-full"
|
|
76
|
+
};
|
|
77
|
+
const variants = {
|
|
78
|
+
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",
|
|
79
|
+
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"
|
|
80
|
+
};
|
|
81
|
+
const errorVariants = {
|
|
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",
|
|
83
|
+
secondary: "border border-danger bg-danger/22 dark:bg-danger/10 text-black 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"
|
|
84
|
+
};
|
|
85
|
+
const resizeVariants = {
|
|
86
|
+
none: "resize-none",
|
|
87
|
+
both: "resize",
|
|
88
|
+
horizontal: "resize-x",
|
|
89
|
+
vertical: "resize-y"
|
|
90
|
+
};
|
|
91
|
+
const props = defineProps({
|
|
92
|
+
modelValue: { type: [String, Number], required: false },
|
|
93
|
+
label: { type: String, required: false },
|
|
94
|
+
labelClass: { type: String, required: false, default: "text-sm font-semibold" },
|
|
95
|
+
placeholder: { type: String, required: false },
|
|
96
|
+
description: { type: String, required: false },
|
|
97
|
+
rounded: { type: String, required: false, default: "xl" },
|
|
98
|
+
variant: { type: String, required: false, default: "default" },
|
|
99
|
+
required: { type: Boolean, required: false, default: false },
|
|
100
|
+
error: { type: String, required: false },
|
|
101
|
+
disabled: { type: Boolean, required: false, default: false },
|
|
102
|
+
rows: { type: [Number, String], required: false, default: 4 },
|
|
103
|
+
resize: { type: String, required: false, default: "vertical" }
|
|
104
|
+
});
|
|
105
|
+
const emit = defineEmits(["update:modelValue"]);
|
|
106
|
+
</script>
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import type { InputRounded, InputVariant } from '../types/index.js';
|
|
2
|
+
type TextAreaResize = 'none' | 'both' | 'horizontal' | 'vertical';
|
|
3
|
+
type __VLS_Props = {
|
|
4
|
+
modelValue?: string | number;
|
|
5
|
+
label?: string;
|
|
6
|
+
labelClass?: string;
|
|
7
|
+
placeholder?: string;
|
|
8
|
+
description?: string;
|
|
9
|
+
rounded?: InputRounded;
|
|
10
|
+
variant?: InputVariant;
|
|
11
|
+
required?: boolean;
|
|
12
|
+
error?: string;
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
rows?: number | string;
|
|
15
|
+
resize?: TextAreaResize;
|
|
16
|
+
};
|
|
17
|
+
declare var __VLS_1: {}, __VLS_3: {};
|
|
18
|
+
type __VLS_Slots = {} & {
|
|
19
|
+
startContent?: (props: typeof __VLS_1) => any;
|
|
20
|
+
} & {
|
|
21
|
+
endContent?: (props: typeof __VLS_3) => any;
|
|
22
|
+
};
|
|
23
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
24
|
+
"update:modelValue": (value: string | number) => any;
|
|
25
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
26
|
+
"onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
|
|
27
|
+
}>, {
|
|
28
|
+
rounded: InputRounded;
|
|
29
|
+
resize: TextAreaResize;
|
|
30
|
+
variant: InputVariant;
|
|
31
|
+
disabled: boolean;
|
|
32
|
+
labelClass: string;
|
|
33
|
+
required: boolean;
|
|
34
|
+
rows: number | string;
|
|
35
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
36
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
37
|
+
declare const _default: typeof __VLS_export;
|
|
38
|
+
export default _default;
|
|
39
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
40
|
+
new (): {
|
|
41
|
+
$slots: S;
|
|
42
|
+
};
|
|
43
|
+
};
|