srcdev-nuxt-forms 2.1.6 → 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-checkbox/InputCheckboxWithLabel.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="input-checkbox-with-label" :class="[elementClasses, optionsLayout, { error: fieldHasError }]">
-    <InputCheckboxCore :id :name :required v-model="modelValue" :size :trueValue :falseValue :checkboxAppearance :checkboxStyle :fieldHasError :theme />
+    <InputCheckboxCore :id :name :required v-model="modelValue" :size :trueValue :falseValue :stateIcon :fieldHasError :theme />
     <label v-if="hasLabelContent" class="input-checkbox-label body-normal" :for="id">
       <slot name="labelContent"></slot>
     </label>
@@ -11,7 +11,7 @@
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
 
-const { id, name, label, required, fieldHasError, trueValue, falseValue, size, checkboxAppearance, checkboxStyle, optionsLayout, styleClassPassthrough, theme } = defineProps({
+const { id, name, label, required, fieldHasError, trueValue, falseValue, size, stateIcon, optionsLayout, styleClassPassthrough, theme } = defineProps({
   id: {
     type: String,
     required: true,
@@ -47,18 +47,11 @@ const { id, name, label, required, fieldHasError, trueValue, falseValue, size, c
       return propValidators.size.includes(value);
     },
   },
-  checkboxAppearance: {
-    type: String as PropType<string>,
-    default: null,
-    validator(value: string) {
-      return propValidators.checkboxAppearance.includes(value);
-    },
-  },
-  checkboxStyle: {
-    type: String as PropType<string>,
-    default: 'check',
-    validator(value: string) {
-      return propValidators.checkboxStyle.includes(value);
+  stateIcon: {
+    type: Object as PropType<{ checked: string; unchecked: string }>,
+    default: {
+      checked: 'carbon:checkbox-checked',
+      unchecked: 'carbon:checkbox',
     },
   },
   optionsLayout: {

package/components/forms/input-checkbox/variants/MultipleCheckboxes.vue

@@ -6,20 +6,7 @@
     </template>
     <div class="multiple-checkboxes-items" :class="[optionsLayout]">
       <template v-for="item in fieldData.data" :key="item.id">
-        <InputCheckboxWithLabel
-          :id="item.value"
-          :name
-          :required
-          :label="item.label"
-          :fieldHasError
-          v-model="modelValue"
-          :true-value="item.value"
-          :size
-          :checkboxAppearance
-          :optionsLayout
-          :checkboxStyle
-          :theme
-        />
+        <InputCheckboxWithLabel :id="item.value" :name :required :label="item.label" :fieldHasError v-model="modelValue" :true-value="item.value" :size :stateIcon :optionsLayout :theme />
       </template>
     </div>
     <InputError :errorMessage="errorMessage" :fieldHasError :id="name" :isDetached="true" />
@@ -32,7 +19,7 @@ import type { IOptionsConfig, IFormMultipleOptions } from '@/types/types.forms';
 
 import type { C12nMultipleCheckboxes, IFormFieldC12, IFormData } from '@/types/types.forms';
 
-const { id, name, legend, label, required, fieldHasError, placeholder, errorMessage, size, optionsLayout, equalCols, checkboxAppearance, checkboxStyle, styleClassPassthrough, theme } = defineProps({
+const { id, name, legend, label, required, fieldHasError, placeholder, errorMessage, size, optionsLayout, equalCols, stateIcon, styleClassPassthrough, theme } = defineProps({
   id: {
     type: String,
     required: true,
@@ -87,18 +74,11 @@ const { id, name, legend, label, required, fieldHasError, placeholder, errorMess
     type: Boolean,
     default: true,
   },
-  checkboxAppearance: {
-    type: String as PropType<string>,
-    default: null,
-    validator(value: string) {
-      return propValidators.checkboxAppearance.includes(value);
-    },
-  },
-  checkboxStyle: {
-    type: String as PropType<string>,
-    default: 'check',
-    validator(value: string) {
-      return propValidators.checkboxStyle.includes(value);
+  stateIcon: {
+    type: Object as PropType<{ checked: string; unchecked: string }>,
+    default: {
+      checked: 'carbon:checkbox-checked',
+      unchecked: 'carbon:checkbox',
     },
   },
   styleClassPassthrough: {

package/components/forms/input-checkbox/variants/SingleCheckbox.vue

@@ -5,7 +5,7 @@
       <slot name="description"></slot>
     </template>
     <div class="single-checkbox-items" :class="[optionsLayout]">
-      <InputCheckboxWithLabel :id :name :required :label :fieldHasError v-model="modelValue" :trueValue :falseValue :size :checkboxAppearance :checkboxStyle :theme>
+      <InputCheckboxWithLabel :id :name :required :label :fieldHasError v-model="modelValue" :trueValue :falseValue :size :stateIcon :theme>
         <template v-if="hasLabelContent" #labelContent>
           <slot name="labelContent"></slot>
         </template>
@@ -19,93 +19,85 @@
 import propValidators from '../../c12/prop-validators';
 import type { IFormMultipleOptions } from '@/types/types.forms';
 
-const { id, name, legend, label, required, fieldHasError, errorMessage, size, optionsLayout, equalCols, trueValue, falseValue, checkboxAppearance, checkboxStyle, styleClassPassthrough, theme } =
-  defineProps({
-    id: {
-      type: String,
-      required: true,
-    },
-    name: {
-      type: String,
-      required: true,
-    },
-    legend: {
-      type: String,
-      required: true,
-    },
-    label: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    errorMessage: {
-      type: [Object, String],
-      required: true,
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    fieldHasError: {
-      type: Boolean,
-      default: false,
-    },
-    multipleOptions: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      type: String as PropType<string>,
-      default: 'medium',
-      validator(value: string) {
-        return propValidators.size.includes(value);
-      },
-    },
-    trueValue: {
-      type: [String, Number, Boolean],
-      default: true,
-    },
-    falseValue: {
-      type: [String, Number, Boolean],
-      default: false,
-    },
-    optionsLayout: {
-      type: String as PropType<string>,
-      default: 'equal-widths',
-      validator(value: string) {
-        return propValidators.optionsLayout.includes(value);
-      },
-    },
-    equalCols: {
-      type: Boolean,
-      default: true,
-    },
-    checkboxAppearance: {
-      type: String as PropType<string>,
-      default: null,
-      validator(value: string) {
-        return propValidators.checkboxAppearance.includes(value);
-      },
-    },
-    checkboxStyle: {
-      type: String as PropType<string>,
-      default: 'check',
-      validator(value: string) {
-        return propValidators.checkboxStyle.includes(value);
-      },
-    },
-    styleClassPassthrough: {
-      type: Array as PropType<string[]>,
-      default: () => [],
-    },
-    theme: {
-      type: String as PropType<string>,
-      default: 'primary',
-      validator(value: string) {
-        return propValidators.theme.includes(value);
-      },
-    },
-  });
+const { id, name, legend, label, required, fieldHasError, errorMessage, size, optionsLayout, equalCols, trueValue, falseValue, stateIcon, styleClassPassthrough, theme } = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  legend: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  errorMessage: {
+    type: [Object, String],
+    required: true,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  multipleOptions: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String as PropType<string>,
+    default: 'medium',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
+  trueValue: {
+    type: [String, Number, Boolean],
+    default: true,
+  },
+  falseValue: {
+    type: [String, Number, Boolean],
+    default: false,
+  },
+  optionsLayout: {
+    type: String as PropType<string>,
+    default: 'equal-widths',
+    validator(value: string) {
+      return propValidators.optionsLayout.includes(value);
+    },
+  },
+  equalCols: {
+    type: Boolean,
+    default: true,
+  },
+  stateIcon: {
+    type: Object as PropType<{ checked: string; unchecked: string }>,
+    default: {
+      checked: 'carbon:checkbox-checked',
+      unchecked: 'carbon:checkbox',
+    },
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
+});
 
 const slots = useSlots();
 const hasDescription = computed(() => slots.description !== undefined);

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/components/forms/input-radio/InputRadiobuttonWithLabel.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="input-radiobutton-with-label" :class="[elementClasses, { error: fieldHasError }]">
-    <InputRadiobuttonCore :id :name :required v-model="modelValue" :size :trueValue :falseValue :checkboxAppearance :checkboxStyle :fieldHasError :theme />
+    <InputRadiobuttonCore :id :name :required v-model="modelValue" :size :trueValue :falseValue :stateIcon :fieldHasError :theme />
     <label v-if="hasLabelContent" class="input-radiobutton-label body-normal" :for="id">
       <slot name="labelContent"></slot>
     </label>
@@ -11,7 +11,7 @@
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
 
-const { id, name, label, required, fieldHasError, trueValue, falseValue, size, checkboxAppearance, checkboxStyle, styleClassPassthrough, theme } = defineProps({
+const { id, name, label, required, fieldHasError, trueValue, falseValue, size, stateIcon, styleClassPassthrough, theme } = defineProps({
   id: {
     type: String,
     required: true,
@@ -47,18 +47,11 @@ const { id, name, label, required, fieldHasError, trueValue, falseValue, size, c
       return propValidators.size.includes(value);
     },
   },
-  checkboxAppearance: {
-    type: String as PropType<string>,
-    default: null,
-    validator(value: string) {
-      return propValidators.checkboxAppearance.includes(value);
-    },
-  },
-  checkboxStyle: {
-    type: String as PropType<string>,
-    default: 'check',
-    validator(value: string) {
-      return propValidators.checkboxStyle.includes(value);
+  stateIcon: {
+    type: Object as PropType<{ checked: string; unchecked: string }>,
+    default: {
+      checked: 'carbon:radio-button-checked',
+      unchecked: 'carbon:radio-button',
     },
   },
   styleClassPassthrough: {

package/components/forms/input-radio/variants/MultipleRadiobuttons.vue

@@ -6,19 +6,7 @@
     </template>
     <div class="multiple-radiobuttons-items" :class="[optionsLayout]">
       <template v-for="item in fieldData.data" :key="item.id">
-        <InputRadiobuttonWithLabel
-          :id="item.value"
-          :name="item.name"
-          :required
-          :label="item.label"
-          :fieldHasError
-          v-model="modelValue"
-          :true-value="item.value"
-          :size
-          :checkboxAppearance
-          :checkboxStyle
-          :theme
-        />
+        <InputRadiobuttonWithLabel :id="item.value" :name="item.name" :required :label="item.label" :fieldHasError v-model="modelValue" :true-value="item.value" :size :stateIcon :theme />
       </template>
     </div>
     <InputError :errorMessage="errorMessage" :fieldHasError :id="name" :isDetached="true" />
@@ -31,7 +19,7 @@ import type { IOptionsConfig, IFormMultipleOptions } from '@/types/types.forms';
 
 import type { C12nMultipleCheckboxes, IFormFieldC12, IFormData } from '@/types/types.forms';
 
-const { id, name, legend, label, required, fieldHasError, placeholder, errorMessage, size, optionsLayout, equalCols, checkboxAppearance, checkboxStyle, styleClassPassthrough, theme } = defineProps({
+const { id, name, legend, label, required, fieldHasError, placeholder, errorMessage, size, optionsLayout, equalCols, stateIcon, styleClassPassthrough, theme } = defineProps({
   id: {
     type: String,
     required: true,
@@ -86,18 +74,11 @@ const { id, name, legend, label, required, fieldHasError, placeholder, errorMess
     type: Boolean,
     default: true,
   },
-  checkboxAppearance: {
-    type: String as PropType<string>,
-    default: null,
-    validator(value: string) {
-      return propValidators.checkboxAppearance.includes(value);
-    },
-  },
-  checkboxStyle: {
-    type: String as PropType<string>,
-    default: 'check',
-    validator(value: string) {
-      return propValidators.checkboxStyle.includes(value);
+  stateIcon: {
+    type: Object as PropType<{ checked: string; unchecked: string }>,
+    default: {
+      checked: 'carbon:radio-button-checked',
+      unchecked: 'carbon:radio-button',
     },
   },
   styleClassPassthrough: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "2.1.6",
+  "version": "2.1.8",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -22,7 +22,8 @@
   ],
   "devDependencies": {
     "@nuxt/eslint-config": "0.6.1",
-    "eslint": "9.14.0",
+    "@nuxt/icon": "1.7.5",
+    "eslint": "9.15.0",
     "release-it": "17.10.0",
     "typescript": "5.6.3"
   },
@@ -32,7 +33,6 @@
     "@iconify-json/material-symbols": "1.2.6",
     "@iconify-json/radix-icons": "1.2.1",
     "@iconify-json/ri": "1.2.3",
-    "@nuxt/icon": "1.7.2",
     "modern-normalize": "3.0.1",
     "nuxt": "3.14.159",
     "zod": "3.23.8"