srcdev-nuxt-forms 5.0.0 → 5.0.2

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 (15) hide show
  1. package/assets/styles/extends-layer/srcdev-forms/components/_form-core.css +8 -0
  2. package/assets/styles/extends-layer/srcdev-forms/components/_input-checkbox-radio-options-button.css +1 -1
  3. package/assets/styles/extends-layer/srcdev-forms/components/_input-checkbox.css +3 -2
  4. package/assets/styles/extends-layer/srcdev-forms/components/_input-radio.css +3 -2
  5. package/assets/styles/extends-layer/srcdev-forms/components/_input-select.css +3 -1
  6. package/assets/styles/extends-layer/srcdev-forms/components/_input-text-as-number.css +1 -1
  7. package/assets/styles/extends-layer/srcdev-forms/components/index.css +1 -0
  8. package/assets/styles/extends-layer/srcdev-forms/setup/variants/_normal.css +1 -1
  9. package/assets/styles/extends-layer/srcdev-forms/setup/variants/_underlined.css +1 -1
  10. package/components/forms/input-checkbox-radio/InputCheckboxRadioButton.vue +2 -1
  11. package/components/forms/input-checkbox-radio/InputCheckboxRadioCore.vue +2 -2
  12. package/components/forms/input-select/InputSelectCore.vue +13 -1
  13. package/components/forms/input-text/InputTextCore.vue +1 -1
  14. package/components/forms/input-textarea/InputTextareaCore.vue +1 -1
  15. package/package.json +1 -1
package/assets/styles/extends-layer/srcdev-forms/components/_form-core.css ADDED
@@ -0,0 +1,8 @@
1
+ :root {
2
+ .underlined,
3
+ .normal,
4
+ .input-select-core,
5
+ .input-checkbox-radio-options-button {
6
+ --form-core-background-color-hover: light-dark(hsl(from var(--theme-form-input-border) h s 95%), hsl(from var(--theme-form-input-border) h s 25%));
7
+ }
8
+ }
package/assets/styles/extends-layer/srcdev-forms/components/_input-checkbox-radio-options-button.css CHANGED
@@ -2,7 +2,7 @@
2
2
  .input-checkbox-radio-options-button {
3
3
  /* --input-checkbox-radio-options-button-background-color: hsl(from var(--theme-form-input-border) h s 95%); */
4
4
  --input-checkbox-radio-options-button-background-color: color-mix(in srgb, currentColor 5%, transparent);
5
- --input-checkbox-radio-options-button-background-color-active: hsl(from var(--theme-form-input-border) h s 25%);
5
+ --input-checkbox-radio-options-button-background-color-active: light-dark(hsl(from var(--theme-form-input-border) h s 75%), hsl(from var(--theme-form-input-border) h s 25%));
6
6
 
7
7
  --input-checkbox-radio-options-button-border: 0.1rem solid var(--theme-form-input-border);
8
8
  --input-checkbox-radio-options-button-border-active: 0.1rem solid var(--theme-form-input-border);
package/assets/styles/extends-layer/srcdev-forms/components/_input-checkbox.css CHANGED
@@ -5,7 +5,6 @@
5
5
  .input-checkbox-radio-wrapper {
6
6
  &.checkbox {
7
7
  --input-checkbox-radio-wrapper-transition: all var(--theme-form-transition-duration) ease-in-out;
8
- --input-checkbox-radio-wrapper-background-color: hsl(from var(--theme-form-input-border) h s 25%);
9
8
  --input-checkbox-radio-wrapper-border: 0.1rem solid var(--theme-form-input-border);
10
9
  --input-checkbox-radio-wrapper-border-radius: var(--form-input-border-radius);
11
10
  --input-checkbox-radio-wrapper-outline: 0.1rem solid hsl(from var(--theme-form-input-border) h s 95%);
@@ -17,7 +16,9 @@
17
16
  --input-checkbox-radio-wrapper-outline-on: 0.1rem solid hsl(from var(--theme-form-input-border) h s 1%);
18
17
  --input-checkbox-radio-wrapper-box-shadow-on: 0.1rem 0.1rem 0.1rem 0.1rem hsl(from var(--theme-form-input-border) h s 95%);
19
18
 
20
- --form-input-checkbox-radio-button-symbol-color: hsl(from var(--theme-form-input-border) h s 75%);
19
+ /* Color of checkbox */
20
+ --input-checkbox-radio-symbol-color-default: light-dark(hsl(from var(--theme-form-input-border) h s 95%), hsl(from var(--theme-form-input-border) h s 15%));
21
+ --input-checkbox-radio-symbol-color-active: light-dark(hsl(from var(--theme-form-input-border) h s 25%), hsl(from var(--theme-form-input-border) h s 75%));
21
22
 
22
23
  /* Size variants for radio buttons within a button */
23
24
  &.x-small {
package/assets/styles/extends-layer/srcdev-forms/components/_input-radio.css CHANGED
@@ -5,7 +5,6 @@
5
5
  .input-checkbox-radio-wrapper {
6
6
  &.radio {
7
7
  --input-checkbox-radio-wrapper-transition: all var(--theme-form-transition-duration) ease-in-out;
8
- --input-checkbox-radio-wrapper-background-color: hsl(from var(--theme-form-input-border) h s 25%);
9
8
  --input-checkbox-radio-wrapper-border: 0.1rem solid var(--theme-form-input-border);
10
9
  --input-checkbox-radio-wrapper-border-radius: 100%;
11
10
  --input-checkbox-radio-wrapper-outline: 0.1rem solid hsl(from var(--theme-form-input-border) h s 95%);
@@ -17,7 +16,9 @@
17
16
  --input-checkbox-radio-wrapper-outline-on: 0.1rem solid hsl(from var(--theme-form-input-border) h s 1%);
18
17
  --input-checkbox-radio-wrapper-box-shadow-on: 0rem 0rem 0rem 0.3rem hsl(from var(--theme-form-input-border) h s 95%);
19
18
 
20
- --form-input-checkbox-radio-button-symbol-color: hsl(from var(--theme-form-input-border) h s 75%);
19
+ /* Color of radio button */
20
+ --input-checkbox-radio-symbol-color-default: light-dark(hsl(from var(--theme-form-input-border) h s 95%), hsl(from var(--theme-form-input-border) h s 15%));
21
+ --input-checkbox-radio-symbol-color-active: light-dark(hsl(from var(--theme-form-input-border) h s 25%), hsl(from var(--theme-form-input-border) h s 75%));
21
22
 
22
23
  /* Size variants for radio buttons within a button */
23
24
  &.x-small {
package/assets/styles/extends-layer/srcdev-forms/components/_input-select.css CHANGED
@@ -8,7 +8,9 @@
8
8
  --input-select-option-padding-inline: 1.75rem;
9
9
  --input-select-option-gap: 1.5rem;
10
10
 
11
- --input-select-option-background-color-hover: hsl(from var(--theme-form-input-border) h s 25%);
11
+ /* --input-select-option-background-color-hover: light-dark(hsl(from var(--theme-form-input-border) h s 75%), hsl(from var(--theme-form-input-border) h s 25%)); */
12
+
13
+ --input-select-option-background-color-hover: light-dark(hsl(from var(--theme-form-input-border) h s 75%), hsl(from var(--theme-form-input-border) h s 25%));
12
14
 
13
15
  --input-select-option-icon-size: 1.5rem;
14
16
  --input-select-option-transition: all var(--input-select-animation-duration) ease-in-out;
package/assets/styles/extends-layer/srcdev-forms/components/_input-text-as-number.css CHANGED
@@ -8,7 +8,7 @@
8
8
  --element-decorator-padding-inline: 0.4rem;
9
9
 
10
10
  [data-btn-theme='input-action'] {
11
- --theme-btn-bg: hsl(from var(--theme-form-input-border) h s 25%);
11
+ --theme-btn-bg: light-dark(hsl(from var(--theme-form-input-border) h s 75%), hsl(from var(--theme-form-input-border) h s 25%));
12
12
  --theme-btn-text: var(--gray-00);
13
13
  --form-input-border-radius: 0.2rem;
14
14
 
package/assets/styles/extends-layer/srcdev-forms/components/index.css CHANGED
@@ -1,3 +1,4 @@
1
+ @import './_form-core';
1
2
  @import './_input-error';
2
3
  @import './_input-select';
3
4
  @import './_input-label';
package/assets/styles/extends-layer/srcdev-forms/setup/variants/_normal.css CHANGED
@@ -22,7 +22,7 @@
22
22
  --element-decorator-border-bottom-default: var(--form-element-border-width) solid var(--theme-form-input-border);
23
23
  --element-decorator-border-left-default: var(--form-element-border-width) solid var(--theme-form-input-border);
24
24
 
25
- --input-placeholder-color: var(--gray-5);
25
+ --input-placeholder-color: light-dark(var(--gray-7), var(--gray-5));
26
26
  --input-placeholder-font-size: var(--step-2);
27
27
  --input-placeholder-font-style: italic;
28
28
  --input-placeholder-font-weight: normal;
package/assets/styles/extends-layer/srcdev-forms/setup/variants/_underlined.css CHANGED
@@ -22,7 +22,7 @@
22
22
  --element-decorator-border-bottom-default: var(--form-element-border-width-underlined) solid var(--theme-form-input-border);
23
23
  --element-decorator-border-left-default: var(--form-element-border-width) solid transparent;
24
24
 
25
- --input-placeholder-color: var(--gray-5);
25
+ --input-placeholder-color: light-dark(var(--gray-7), var(--gray-5));
26
26
  --input-placeholder-font-size: var(--step-2);
27
27
  --input-placeholder-font-style: italic;
28
28
  --input-placeholder-font-weight: normal;
package/components/forms/input-checkbox-radio/InputCheckboxRadioButton.vue CHANGED
@@ -136,7 +136,8 @@ const flexDirection = ref(props.direction);
136
136
  padding-inline: var(--input-checkbox-radio-options-padding-inline);
137
137
 
138
138
  &:hover {
139
- background-color: var(--input-checkbox-radio-options-button-background-color-active);
139
+ /* background-color: var(--input-checkbox-radio-options-button-background-color-active); */
140
+ background-color: var(--form-core-background-color-hover);
140
141
  border: var(--input-checkbox-radio-options-button-border-active);
141
142
  outline: var(--input-checkbox-radio-options-button-outline-active);
142
143
  }
package/components/forms/input-checkbox-radio/InputCheckboxRadioCore.vue CHANGED
@@ -126,7 +126,7 @@ const isChecked = computed(() => {
126
126
  grid-template-areas: 'element-stack';
127
127
  place-content: center;
128
128
 
129
- background-color: var(--input-checkbox-radio-wrapper-background-color);
129
+ background-color: var(--input-checkbox-radio-symbol-color-default);
130
130
  border: var(--input-checkbox-radio-wrapper-border);
131
131
  border-radius: var(--input-checkbox-radio-wrapper-border-radius);
132
132
  outline: var(--input-checkbox-radio-wrapper-outline);
@@ -145,7 +145,7 @@ const isChecked = computed(() => {
145
145
 
146
146
  .input-checked-icon {
147
147
  grid-area: element-stack;
148
- color: var(--form-input-checkbox-radio-button-symbol-color);
148
+ color: var(--input-checkbox-radio-symbol-color-active);
149
149
  height: var(--form-input-checkbox-radio-button-symbol-size);
150
150
  width: var(--form-input-checkbox-radio-button-symbol-size);
151
151
  box-shadow: var(--_box-shadow);
package/components/forms/input-select/InputSelectCore.vue CHANGED
@@ -88,6 +88,18 @@ const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
88
88
  border-left: var(--element-decorator-border-left-default);
89
89
 
90
90
  .input-select-core {
91
+ appearance: none;
92
+ background-color: transparent;
93
+
94
+ /* For legacy support - eg, Safari */
95
+ /* &::after {
96
+ content: '';
97
+ width: 0.8em;
98
+ height: 0.5em;
99
+ background-color: var(--theme-form-input-border);
100
+ clip-path: polygon(100% 0%, 0 0%, 50% 100%);
101
+ } */
102
+
91
103
  /* Start modern Select CSS */
92
104
  &,
93
105
  &::picker(select) {
@@ -119,7 +131,7 @@ const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
119
131
 
120
132
  &:hover {
121
133
  /* background-color: lab(89.6502 -0.829279 -2.45323 / 0.1); */
122
- background-color: hsl(from var(--theme-form-input-border) h s 20%);
134
+ background-color: var(--form-core-background-color-hover);
123
135
  }
124
136
 
125
137
  /* END modern Select CSS */
package/components/forms/input-text/InputTextCore.vue CHANGED
@@ -175,7 +175,7 @@ onMounted(() => {
175
175
 
176
176
  &:hover {
177
177
  /* background-color: lab(89.6502 -0.829279 -2.45323 / 0.1); */
178
- background-color: hsl(from var(--theme-form-input-border) h s 20%);
178
+ background-color: var(--form-core-background-color-hover);
179
179
  }
180
180
 
181
181
  display: flex;
package/components/forms/input-textarea/InputTextareaCore.vue CHANGED
@@ -124,7 +124,7 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
124
124
 
125
125
  &:hover {
126
126
  /* background-color: lab(89.6502 -0.829279 -2.45323 / 0.1); */
127
- background-color: hsl(from var(--theme-form-input-border) h s 20%);
127
+ background-color: var(--form-core-background-color-hover);
128
128
  }
129
129
 
130
130
  display: flex;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "srcdev-nuxt-forms",
3
3
  "type": "module",
4
- "version": "5.0.0",
4
+ "version": "5.0.2",
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",