srcdev-nuxt-forms 2.1.43 → 2.1.45

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.
Files changed (4) hide show
  1. package/assets/styles/forms/variables/_sizes.css +4 -4
  2. package/components/forms/input-textarea/InputTextareaCore.vue +18 -7
  3. package/components/forms/input-textarea/variants/InputTextareaWithLabel.vue +9 -2
  4. package/package.json +1 -1
package/assets/styles/forms/variables/_sizes.css CHANGED
@@ -25,7 +25,7 @@
25
25
  --form-element-line-height: var(--step-1);
26
26
  --form-icon-size: var(--step-1);
27
27
  --form-button-padding-inline: calc(var(--step-0) * 1.65);
28
- --form-text-padding-inline: calc(var(--step-0) * 0.25);
28
+ --form-text-padding-inline: calc(var(--step-1) * 0.25);
29
29
  --form-button-icon-gap: calc(var(--step-0) * 0.65);
30
30
  --form-input-border-radius: 0.4rem;
31
31
  --form-icon-only-button-size: calc(var(--step-1) * 2.25);
@@ -40,7 +40,7 @@
40
40
  --form-element-line-height: var(--step-2);
41
41
  --form-icon-size: var(--step-2);
42
42
  --form-button-padding-inline: calc(var(--step-0) * 1.65);
43
- --form-text-padding-inline: calc(var(--step-0) * 0.25);
43
+ --form-text-padding-inline: calc(var(--step-2) * 0.25);
44
44
  --form-button-icon-gap: calc(var(--step-0) * 0.65);
45
45
  --form-input-border-radius: 0.4rem;
46
46
  --form-icon-only-button-size: calc(var(--step-1) * 2.5);
@@ -55,7 +55,7 @@
55
55
  --form-element-line-height: var(--step-3);
56
56
  --form-icon-size: var(--step-3);
57
57
  --form-button-padding-inline: calc(var(--step-0) * 1.65);
58
- --form-text-padding-inline: calc(var(--step-0) * 0.25);
58
+ --form-text-padding-inline: calc(var(--step-3) * 0.25);
59
59
  --form-button-icon-gap: calc(var(--step-0) * 0.65);
60
60
  --form-input-border-radius: 0.4rem;
61
61
  --form-icon-only-button-size: calc(var(--step-1) * 2.75);
@@ -70,7 +70,7 @@
70
70
  --form-element-line-height: var(--step-4);
71
71
  --form-icon-size: var(--step-4);
72
72
  --form-button-padding-inline: calc(var(--step-0) * 1.75);
73
- --form-text-padding-inline: calc(var(--step-0) * 0.25);
73
+ --form-text-padding-inline: calc(var(--step-4) * 0.25);
74
74
  --form-button-icon-gap: calc(var(--step-0) * 0.75);
75
75
  --form-input-border-radius: 0.4rem;
76
76
  --form-icon-only-button-size: calc(var(--step-1) * 3);
package/components/forms/input-textarea/InputTextareaCore.vue CHANGED
@@ -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-text-core', 'text-normal', elementClasses, { dirty: isDirty }, { active: isActive }]"
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-text-core {
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(--theme-form-button-font-size-normal);
149
- line-height: var(--line-height);
150
- padding: 0.8rem 1.2rem;
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
  }
package/components/forms/input-textarea/variants/InputTextareaWithLabel.vue CHANGED
@@ -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
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "srcdev-nuxt-forms",
3
3
  "type": "module",
4
- "version": "2.1.43",
4
+ "version": "2.1.45",
5
5
  "main": "nuxt.config.ts",
6
6
  "scripts": {
7
7
  "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",