srcdev-nuxt-forms 2.1.7 → 2.1.8

package/components/forms/input-checkbox/InputCheckboxCore.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="input-checkbox-wrapper" :data-form-theme="formTheme" :class="[size, { error: fieldHasError }]">
+    <Icon :name="icon" class="input-checkbox-decorator" />
     <input
       type="checkbox"
       :true-value="trueValue"
@@ -13,9 +14,6 @@
       v-model="modelValue"
       ref="inputField"
     />
-    <div class="input-checkbox-decorator" :class="[size, stateIcon]">
-      <Icon :name="icon" class="icon" />
-    </div>
   </div>
 </template>
 
@@ -105,15 +103,15 @@ const icon = computed(() => {
 <style scoped lang="css">
 .input-checkbox-wrapper {
   --_checkbox-size: initial;
-  --_wrapper-size: calc(var(--_checkbox-size) - 5px);
   --_outline-width: var(--input-outline-width-thin);
   --_border-width: var(--input-border-width-default);
   --_box-shadow: none;
 
   display: grid;
   grid-template-areas: 'element-stack';
-  height: var(--_wrapper-size);
-  width: var(--_wrapper-size);
+
+  background-color: var(--theme-form-radio-bg);
+  border-radius: 4px;
 
   &:has(.input-checkbox-core:focus-visible) {
     --_box-shadow: var(--theme-form-focus-box-shadow);
@@ -137,24 +135,11 @@ const icon = computed(() => {
   }
 
   .input-checkbox-decorator {
-    --_padding: 5px;
-    display: grid;
     grid-area: element-stack;
-    background-color: var(--theme-form-checkbox-bg);
-    border-radius: 2px;
-    place-content: center;
-    position: relative;
-    height: var(--_wrapper-size);
-    width: var(--_wrapper-size);
-    z-index: -1;
-
-    .icon {
-      grid-area: stack;
-      color: var(--theme-form-radio-symbol);
-      height: var(--_checkbox-size);
-      width: var(--_checkbox-size);
-      box-shadow: var(--_box-shadow);
-    }
+    color: var(--theme-form-radio-symbol);
+    height: var(--_checkbox-size);
+    width: var(--_checkbox-size);
+    box-shadow: var(--_box-shadow);
   }
 
   .input-checkbox-core {
@@ -167,6 +152,11 @@ const icon = computed(() => {
     &:hover {
       cursor: pointer;
     }
+
+    &:focus {
+      border: var(--_border-width) solid var(--theme-form-input-border);
+      outline: var(--_outline-width) solid hsl(from var(--theme-form-input-outline) h s 50%);
+    }
   }
 }
 </style>

package/components/forms/input-radio/InputRadiobuttonCore.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="input-radiobutton-wrapper" :data-form-theme="formTheme" :class="[size, { error: fieldHasError }]">
+    <Icon :name="icon" class="input-radiobutton-decorator" />
     <input
       type="radio"
       :true-value="trueValue"
@@ -13,9 +14,6 @@
       v-model="modelValue"
       ref="inputField"
     />
-    <div class="input-radiobutton-decorator" :class="[size]">
-      <Icon :name="icon" class="icon" />
-    </div>
   </div>
 </template>
 
@@ -103,6 +101,18 @@ const isChecked = computed(() => {
 const icon = computed(() => {
   return isChecked.value ? stateIcon.checked : stateIcon.unchecked;
 });
+
+const useCustomizeIcon = (content: string, name: string, prefix: string, provider: string) => {
+  console.log('useCustomizeIcon');
+  // if (prefix !== 'carbon') return content; // Ignore Prefix
+
+  return content
+    .replace(/stroke-width="[^"]*"/g, `stroke-width="2"`) // Change stroke width to 2
+    .replace(/stroke="[^"]*"/g, `stroke="#ff0000"`) // Change stroke color to red
+    .replace(/fill="[^"]*"/g, `fill="#00ff00"`) // Change fill color to green
+    .replace(/animation-duration="[^"]*"/g, `animation-duration="1s"`) // Change animation duration to 1s (for animated icons)
+    .replace(/opacity="[^"]*"/g, `opacity="0.8"`); // Change opacity to 0.8
+};
 </script>
 
 <style scoped lang="css">
@@ -114,9 +124,9 @@ const icon = computed(() => {
 
   display: grid;
   grid-template-areas: 'element-stack';
-  height: var(--_checkbox-size);
-  width: var(--_checkbox-size);
-  overflow: hidden;
+
+  background-color: var(--theme-form-radio-bg);
+  border-radius: 50%;
 
   &:has(.input-radiobutton-core:focus-visible) {
     --_box-shadow: var(--theme-form-focus-box-shadow);
@@ -140,25 +150,11 @@ const icon = computed(() => {
   }
 
   .input-radiobutton-decorator {
-    --_padding: 5px;
-    display: grid;
     grid-area: element-stack;
-    background-color: var(--theme-form-checkbox-bg);
-    border-radius: 100%;
-    place-content: center;
-    position: relative;
+    color: var(--theme-form-radio-symbol);
     height: var(--_checkbox-size);
     width: var(--_checkbox-size);
-    z-index: -1;
-
-    .icon {
-      grid-area: stack;
-      color: var(--theme-form-radio-symbol);
-      height: var(--_checkbox-size);
-      width: var(--_checkbox-size);
-      box-shadow: var(--_box-shadow);
-      outline: 1px solid yellow;
-    }
+    box-shadow: var(--_box-shadow);
   }
 
   .input-radiobutton-core {
@@ -176,13 +172,6 @@ const icon = computed(() => {
       border: var(--_border-width) solid var(--theme-form-input-border);
       outline: var(--_outline-width) solid hsl(from var(--theme-form-input-outline) h s 50%);
     }
-
-    &:checked::after {
-      display: grid;
-      font-family: var(--font-family);
-      place-content: center;
-      font-size: calc(var(--_checkbox-size) * 0.75);
-    }
   }
 }
 </style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",