srcdev-nuxt-forms 2.1.16 → 2.1.18

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 (10) hide show
  1. package/assets/styles/forms/themes/_error.css +1 -1
  2. package/assets/styles/forms/themes/_ghost.css +1 -1
  3. package/assets/styles/forms/themes/_primary.css +5 -1
  4. package/assets/styles/forms/themes/_secondary.css +1 -1
  5. package/assets/styles/forms/themes/_success.css +1 -1
  6. package/assets/styles/forms/themes/_tertiary.css +1 -1
  7. package/assets/styles/forms/themes/_warning.css +1 -1
  8. package/components/forms/input-checkbox-radio/InputCheckboxRadioButton.vue +12 -2
  9. package/components/forms/input-checkbox-radio/InputCheckboxRadioCore.vue +6 -4
  10. package/package.json +1 -1
package/assets/styles/forms/themes/_error.css CHANGED
@@ -31,7 +31,7 @@
31
31
  * Checkbox as button
32
32
  **/
33
33
 
34
- --theme-checkbox-radio-button-bg-default: light-dark(var(--red-4), var(--red-4));
34
+ --theme-checkbox-radio-button-bg-default: light-dark(var(--red-1), var(--red-1));
35
35
 
36
36
  --theme-checkbox-radio-button-border-default: light-dark(var(--red-12), var(--red-12));
37
37
  --theme-checkbox-radio-button-border-width: 1px;
package/assets/styles/forms/themes/_ghost.css CHANGED
@@ -31,7 +31,7 @@
31
31
  * Checkbox as button
32
32
  **/
33
33
 
34
- --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-4), var(--gray-4));
34
+ --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
35
35
 
36
36
  --theme-checkbox-radio-button-border-default: light-dark(var(--gray-12), var(--gray-12));
37
37
  --theme-checkbox-radio-button-border-width: 1px;
package/assets/styles/forms/themes/_primary.css CHANGED
@@ -31,14 +31,18 @@
31
31
  * Checkbox as button
32
32
  **/
33
33
 
34
- --theme-checkbox-radio-button-bg-default: light-dark(var(--blue-4), var(--blue-4));
34
+ --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
35
35
 
36
36
  --theme-checkbox-radio-button-border-default: light-dark(var(--blue-12), var(--blue-12));
37
37
  --theme-checkbox-radio-button-border-width: 1px;
38
38
 
39
39
  --theme-checkbox-radio-button-outline-default: light-dark(var(--blue-5), var(--blue-5));
40
+ --theme-checkbox-radio-button-outline-focus: light-dark(var(--blue-12), var(--blue-12));
40
41
  --theme-checkbox-radio-button-outline-width: 1px;
41
42
 
43
+ --theme-checkbox-radio-button-shadow: transparent;
44
+ --theme-checkbox-radio-button-shadow-focus: light-dark(var(--blue-6), var(--blue-1));
45
+
42
46
  --theme-checkbox-radio-button-label-default: light-dark(var(--blue-12), var(--blue-12));
43
47
  }
44
48
 
package/assets/styles/forms/themes/_secondary.css CHANGED
@@ -31,7 +31,7 @@
31
31
  * Checkbox as button
32
32
  **/
33
33
 
34
- --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-4), var(--gray-4));
34
+ --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
35
35
 
36
36
  --theme-checkbox-radio-button-border-default: light-dark(var(--gray-12), var(--gray-12));
37
37
  --theme-checkbox-radio-button-border-width: 1px;
package/assets/styles/forms/themes/_success.css CHANGED
@@ -31,7 +31,7 @@
31
31
  * Checkbox as button
32
32
  **/
33
33
 
34
- --theme-checkbox-radio-button-bg-default: light-dark(var(--green-4), var(--green-4));
34
+ --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
35
35
 
36
36
  --theme-checkbox-radio-button-border-default: light-dark(var(--green-12), var(--green-12));
37
37
  --theme-checkbox-radio-button-border-width: 1px;
package/assets/styles/forms/themes/_tertiary.css CHANGED
@@ -31,7 +31,7 @@
31
31
  * Checkbox as button
32
32
  **/
33
33
 
34
- --theme-checkbox-radio-button-bg-default: light-dark(var(--green-4), var(--green-4));
34
+ --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
35
35
 
36
36
  --theme-checkbox-radio-button-border-default: light-dark(var(--green-12), var(--green-12));
37
37
  --theme-checkbox-radio-button-border-width: 1px;
package/assets/styles/forms/themes/_warning.css CHANGED
@@ -31,7 +31,7 @@
31
31
  * Checkbox as button
32
32
  **/
33
33
 
34
- --theme-checkbox-radio-button-bg-default: light-dark(var(--orange-4), var(--orange-4));
34
+ --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
35
35
 
36
36
  --theme-checkbox-radio-button-border-default: light-dark(var(--orange-12), var(--orange-12));
37
37
  --theme-checkbox-radio-button-border-width: 1px;
package/components/forms/input-checkbox-radio/InputCheckboxRadioButton.vue CHANGED
@@ -108,7 +108,7 @@ const flexDirection = ref(direction);
108
108
  --_border-color: var(--theme-checkbox-radio-button-border-default);
109
109
  --_outline-color: var(--theme-checkbox-radio-button-outline-default);
110
110
  --_label-color: var(--theme-checkbox-radio-button-label-default);
111
- --_box-shadow: none;
111
+ --_box-shadow: var(--theme-checkbox-radio-button-shadow);
112
112
  --_white-space: wrap;
113
113
  --_gap: 4px;
114
114
  --_border-radius: 22px;
@@ -125,7 +125,7 @@ const flexDirection = ref(direction);
125
125
  border-radius: var(--_border-radius);
126
126
  border: var(--theme-checkbox-radio-button-border-width) solid var(--_border-color);
127
127
  outline: var(--theme-checkbox-radio-button-outline-width) solid var(--_outline-color);
128
- box-shadow: var(--_box-shadow);
128
+ box-shadow: 1px 1px 8px 1px var(--_box-shadow);
129
129
  padding-block: var(--_padding-block);
130
130
  padding-inline: var(--_padding-inline);
131
131
 
@@ -133,6 +133,16 @@ const flexDirection = ref(direction);
133
133
  --_white-space: nowrap;
134
134
  }
135
135
 
136
+ /* &:focus-within {
137
+ --_box-shadow: var(--theme-checkbox-radio-button-shadow-focus);
138
+ --_outline-color: var(--theme-checkbox-radio-button-outline-focus);
139
+ } */
140
+
141
+ &:has(.input-checkbox-radio-core:focus-visible) {
142
+ --_box-shadow: var(--theme-checkbox-radio-button-shadow-focus);
143
+ --_outline-color: var(--theme-checkbox-radio-button-outline-focus);
144
+ }
145
+
136
146
  /* Sizes */
137
147
  &.x-small {
138
148
  --_checkbox-size: 20px;
package/components/forms/input-checkbox-radio/InputCheckboxRadioCore.vue CHANGED
@@ -13,7 +13,7 @@
13
13
  :required="required && !multipleOptions"
14
14
  :value="trueValue"
15
15
  class="input-checkbox-radio-core"
16
- :class="[size, { error: fieldHasError }]"
16
+ :class="[size, { error: fieldHasError }, { 'is-button': isButton }]"
17
17
  v-model="modelValue"
18
18
  ref="inputField"
19
19
  />
@@ -146,7 +146,7 @@ const isChecked = computed(() => {
146
146
 
147
147
  transition: all 0.2s ease-in-out;
148
148
 
149
- &:has(.input-checkbox-radio-core:focus-visible) {
149
+ &:not(.button):has(.input-checkbox-radio-core:focus-visible) {
150
150
  --_box-shadow: var(--theme-form-focus-box-shadow);
151
151
  }
152
152
 
@@ -189,8 +189,10 @@ const isChecked = computed(() => {
189
189
  cursor: pointer;
190
190
  }
191
191
 
192
- &:focus-visible {
193
- --_box-shadow: var(--theme-form-focus-box-shadow);
192
+ &:not(.is-button) {
193
+ &:focus-visible {
194
+ --_box-shadow: var(--theme-form-focus-box-shadow);
195
+ }
194
196
  }
195
197
  }
196
198
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "srcdev-nuxt-forms",
3
3
  "type": "module",
4
- "version": "2.1.16",
4
+ "version": "2.1.18",
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",