srcdev-nuxt-forms 2.1.43 → 2.1.44
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.
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
<div
|
|
3
3
|
class="input-textarea-wrapper"
|
|
4
4
|
:data-form-theme="formTheme"
|
|
5
|
+
:data-size="size"
|
|
5
6
|
:class="[{ dirty: isDirty }, { active: isActive }, { error: fieldHasError }, { 'has-left-slot': hasLeftSlot }, { 'has-right-slot': hasRightSlot }]"
|
|
6
7
|
>
|
|
7
8
|
<span v-if="hasLeftSlot" class="slot left-slot">
|
|
@@ -14,7 +15,7 @@
|
|
|
14
15
|
:id
|
|
15
16
|
:name
|
|
16
17
|
:required
|
|
17
|
-
:class="['input-
|
|
18
|
+
:class="['input-textarea-core', elementClasses, { dirty: isDirty }, { active: isActive }]"
|
|
18
19
|
v-model="modelValue"
|
|
19
20
|
ref="inputField"
|
|
20
21
|
:aria-invalid="fieldHasError"
|
|
@@ -31,7 +32,7 @@
|
|
|
31
32
|
|
|
32
33
|
<script setup lang="ts">
|
|
33
34
|
import propValidators from '../c12/prop-validators';
|
|
34
|
-
const { maxlength, id, name, placeholder, fieldHasError, required, styleClassPassthrough, theme } = defineProps({
|
|
35
|
+
const { maxlength, id, name, placeholder, fieldHasError, required, styleClassPassthrough, theme, size } = defineProps({
|
|
35
36
|
maxlength: {
|
|
36
37
|
type: Number,
|
|
37
38
|
default: 255,
|
|
@@ -67,6 +68,13 @@ const { maxlength, id, name, placeholder, fieldHasError, required, styleClassPas
|
|
|
67
68
|
return propValidators.theme.includes(value);
|
|
68
69
|
},
|
|
69
70
|
},
|
|
71
|
+
size: {
|
|
72
|
+
type: String as PropType<string>,
|
|
73
|
+
default: 'normal',
|
|
74
|
+
validator(value: string) {
|
|
75
|
+
return propValidators.size.includes(value);
|
|
76
|
+
},
|
|
77
|
+
},
|
|
70
78
|
});
|
|
71
79
|
|
|
72
80
|
const slots = useSlots();
|
|
@@ -136,7 +144,7 @@ onMounted(() => {
|
|
|
136
144
|
}
|
|
137
145
|
}
|
|
138
146
|
|
|
139
|
-
.input-
|
|
147
|
+
.input-textarea-core {
|
|
140
148
|
background-color: transparent;
|
|
141
149
|
border: none;
|
|
142
150
|
outline: none;
|
|
@@ -145,14 +153,17 @@ onMounted(() => {
|
|
|
145
153
|
|
|
146
154
|
color: var(--theme-form-input-text);
|
|
147
155
|
font-family: var(--font-family);
|
|
148
|
-
font-size: var(--
|
|
149
|
-
line-height: var(--line-height);
|
|
150
|
-
|
|
156
|
+
font-size: var(--form-element-font-size);
|
|
157
|
+
line-height: var(--form-element-line-height);
|
|
158
|
+
|
|
159
|
+
padding-inline: var(--form-text-padding-inline);
|
|
160
|
+
padding-block-start: var(--form-element-padding-block-start);
|
|
161
|
+
padding-block-end: var(--form-element-padding-block-end);
|
|
151
162
|
|
|
152
163
|
&::placeholder,
|
|
153
164
|
&::-webkit-input-placeholder {
|
|
154
165
|
font-family: var(--font-family);
|
|
155
|
-
font-size: var(--font-size);
|
|
166
|
+
font-size: var(--form-element-font-size);
|
|
156
167
|
font-style: italic;
|
|
157
168
|
font-weight: 400;
|
|
158
169
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<div class="input-textarea-with-label" :data-form-theme="formTheme" :class="[elementClasses, { dirty: isDirty }, { active: isActive }]">
|
|
3
3
|
<label :for="id" class="input-textarea-label body-normal-semibold">{{ label }}</label>
|
|
4
4
|
|
|
5
|
-
<InputTextareaCore v-model="modelValue" v-model:isDirty="isDirty" v-model:isActive="isActive" :maxlength :id :name :placeholder :label :fieldHasError :required :styleClassPassthrough :theme>
|
|
5
|
+
<InputTextareaCore v-model="modelValue" v-model:isDirty="isDirty" v-model:isActive="isActive" :maxlength :id :name :placeholder :label :fieldHasError :required :styleClassPassthrough :theme :size>
|
|
6
6
|
<template v-if="hasLeftSlot" #left>
|
|
7
7
|
<slot name="left"></slot>
|
|
8
8
|
</template>
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
|
|
17
17
|
<script setup lang="ts">
|
|
18
18
|
import propValidators from '../../c12/prop-validators';
|
|
19
|
-
const { maxlength, id, name, placeholder, label, errorMessage, fieldHasError, required, styleClassPassthrough, theme } = defineProps({
|
|
19
|
+
const { maxlength, id, name, placeholder, label, errorMessage, fieldHasError, required, styleClassPassthrough, theme, size } = defineProps({
|
|
20
20
|
maxlength: {
|
|
21
21
|
type: Number,
|
|
22
22
|
default: 255,
|
|
@@ -60,6 +60,13 @@ const { maxlength, id, name, placeholder, label, errorMessage, fieldHasError, re
|
|
|
60
60
|
return propValidators.theme.includes(value);
|
|
61
61
|
},
|
|
62
62
|
},
|
|
63
|
+
size: {
|
|
64
|
+
type: String as PropType<string>,
|
|
65
|
+
default: 'normal',
|
|
66
|
+
validator(value: string) {
|
|
67
|
+
return propValidators.size.includes(value);
|
|
68
|
+
},
|
|
69
|
+
},
|
|
63
70
|
});
|
|
64
71
|
|
|
65
72
|
const slots = useSlots();
|
package/package.json
CHANGED