srcdev-nuxt-forms 2.1.10 → 2.1.12

package/assets/styles/variables/colors/_green.css

@@ -11,5 +11,5 @@
   --green-9: #2b8a3e;
   --green-10: #237032;
   --green-11: #1b5727;
-  --green-12: #00a21e;
+  --green-12: #017f18;
 }

package/assets/styles/variables/colors/_orange.css

@@ -11,5 +11,5 @@
   --orange-9: #d9480f;
   --orange-10: #bf400d;
   --orange-11: #99330b;
-  --orange-12: #db3e00;
+  --orange-12: #c23903;
 }

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

@@ -1,6 +1,9 @@
 <template>
   <div class="input-checkbox-wrapper" :data-form-theme="formTheme" :class="[size, { error: fieldHasError }]">
-    <Icon v-show="isChecked" name="material-symbols:check-small" class="input-checkbox-decorator" />
+    <slot name="checkedIcon" v-if="isChecked">
+      <Icon name="material-symbols:check-small" class="input-checked-icon" />
+    </slot>
+
     <input
       type="checkbox"
       :true-value="trueValue"
@@ -19,7 +22,7 @@
 
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
-const { id, name, required, trueValue, falseValue, multipleOptions, theme, styleClassPassthrough, size, stateIcon, fieldHasError } = defineProps({
+const { id, name, required, trueValue, falseValue, multipleOptions, theme, styleClassPassthrough, size, fieldHasError } = defineProps({
   id: {
     type: String,
     required: true,
@@ -58,13 +61,6 @@ const { id, name, required, trueValue, falseValue, multipleOptions, theme, style
       return propValidators.size.includes(value);
     },
   },
-  stateIcon: {
-    type: Object as PropType<{ checked: string; unchecked: string }>,
-    default: {
-      checked: 'carbon:checkbox-checked',
-      unchecked: 'carbon:checkbox',
-    },
-  },
   fieldHasError: {
     type: Boolean,
     default: false,
@@ -94,13 +90,9 @@ const isChecked = computed(() => {
     return modelValue.value === trueValue;
   }
 });
-
-const icon = computed(() => {
-  return isChecked.value ? stateIcon.checked : stateIcon.unchecked;
-});
 </script>
 
-<style scoped lang="css">
+<style lang="css">
 .input-checkbox-wrapper {
   --_checkbox-size: initial;
   --_outline-width: var(--input-outline-width-thin);
@@ -143,7 +135,7 @@ const icon = computed(() => {
     --_checkbox-size: 44px;
   }
 
-  .input-checkbox-decorator {
+  .input-checked-icon {
     grid-area: element-stack;
     color: var(--theme-form-checkbox-symbol);
     height: var(--_checkbox-size);

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

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

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

@@ -6,7 +6,11 @@
     </template>
     <div class="multiple-checkboxes-items" :class="[optionsLayout]">
       <template v-for="item in fieldData.data" :key="item.id">
-        <InputCheckboxWithLabel :id="`${name}-${item.value}`" :name :required :label="item.label" :fieldHasError v-model="modelValue" :true-value="item.value" :size :stateIcon :optionsLayout :theme />
+        <InputCheckboxWithLabel :id="`${name}-${item.value}`" :name :required :label="item.label" :fieldHasError v-model="modelValue" :true-value="item.value" :size :optionsLayout :theme>
+          <template #checkedIcon>
+            <slot name="checkedIcon"></slot>
+          </template>
+        </InputCheckboxWithLabel>
       </template>
     </div>
     <InputError :errorMessage="errorMessage" :fieldHasError :id="name" :isDetached="true" />
@@ -19,7 +23,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, stateIcon, styleClassPassthrough, theme } = defineProps({
+const { id, name, legend, label, required, fieldHasError, placeholder, errorMessage, size, optionsLayout, equalCols, styleClassPassthrough, theme } = defineProps({
   id: {
     type: String,
     required: true,
@@ -74,13 +78,6 @@ const { id, name, legend, label, required, fieldHasError, placeholder, errorMess
     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: () => [],

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

@@ -5,7 +5,10 @@
       <slot name="description"></slot>
     </template>
     <div class="single-checkbox-items" :class="[optionsLayout]">
-      <InputCheckboxWithLabel :id :name :required :label :fieldHasError v-model="modelValue" :trueValue :falseValue :size :stateIcon :theme>
+      <InputCheckboxWithLabel :id :name :required :label :fieldHasError v-model="modelValue" :trueValue :falseValue :size :theme>
+        <template #checkedIcon>
+          <slot name="checkedIcon"></slot>
+        </template>
         <template v-if="hasLabelContent" #labelContent>
           <slot name="labelContent"></slot>
         </template>
@@ -19,7 +22,7 @@
 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, stateIcon, styleClassPassthrough, theme } = defineProps({
+const { id, name, legend, label, required, fieldHasError, errorMessage, size, optionsLayout, equalCols, trueValue, falseValue, styleClassPassthrough, theme } = defineProps({
   id: {
     type: String,
     required: true,
@@ -79,13 +82,6 @@ const { id, name, legend, label, required, fieldHasError, errorMessage, size, op
     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: () => [],

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

@@ -1,6 +1,8 @@
 <template>
   <div class="input-radiobutton-wrapper" :data-form-theme="formTheme" :class="[size, { error: fieldHasError }]">
-    <Icon v-show="isChecked" name="material-symbols:circle" class="input-radiobutton-decorator" />
+    <slot name="checkedIcon" v-if="isChecked">
+      <Icon name="material-symbols:circle" class="input-checked-icon" />
+    </slot>
     <input
       type="radio"
       :true-value="trueValue"
@@ -19,7 +21,7 @@
 
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
-const { id, name, required, trueValue, falseValue, multipleOptions, theme, styleClassPassthrough, size, stateIcon, fieldHasError } = defineProps({
+const { id, name, required, trueValue, falseValue, multipleOptions, theme, styleClassPassthrough, size, fieldHasError } = defineProps({
   id: {
     type: String,
     required: true,
@@ -58,13 +60,6 @@ const { id, name, required, trueValue, falseValue, multipleOptions, theme, style
       return propValidators.size.includes(value);
     },
   },
-  stateIcon: {
-    type: Object as PropType<{ checked: string; unchecked: string }>,
-    default: {
-      checked: 'carbon:radio-button-checked',
-      unchecked: 'carbon:radio-button',
-    },
-  },
   fieldHasError: {
     type: Boolean,
     default: false,
@@ -97,25 +92,9 @@ const isChecked = computed(() => {
     return modelValue.value === trueValue;
   }
 });
-
-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">
+<style lang="css">
 .input-radiobutton-wrapper {
   --_checkbox-size: initial;
   --_outline-width: var(--input-outline-width-thin);
@@ -158,7 +137,7 @@ const useCustomizeIcon = (content: string, name: string, prefix: string, provide
     --_checkbox-size: 44px;
   }
 
-  .input-radiobutton-decorator {
+  .input-checked-icon {
     --_checked-size: calc(var(--_checkbox-size) * 0.65);
     grid-area: element-stack;
     align-self: center;

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

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

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

@@ -6,7 +6,11 @@
     </template>
     <div class="multiple-radiobuttons-items" :class="[optionsLayout]">
       <template v-for="item in fieldData.data" :key="item.id">
-        <InputRadiobuttonWithLabel :id="`${name}-${item.value}`" :name="item.name" :required :label="item.label" :fieldHasError v-model="modelValue" :true-value="item.value" :size :stateIcon :theme />
+        <InputRadiobuttonWithLabel :id="`${name}-${item.value}`" :name="`${name}-${item.name}`" :required :label="item.label" :fieldHasError v-model="modelValue" :true-value="item.value" :size :theme>
+          <template #checkedIcon>
+            <slot name="checkedIcon"></slot>
+          </template>
+        </InputRadiobuttonWithLabel>
       </template>
     </div>
     <InputError :errorMessage="errorMessage" :fieldHasError :id="name" :isDetached="true" />
@@ -15,11 +19,9 @@
 
 <script setup lang="ts">
 import propValidators from '../../c12/prop-validators';
-import type { IOptionsConfig, IFormMultipleOptions } from '@/types/types.forms';
+import type { 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, stateIcon, styleClassPassthrough, theme } = defineProps({
+const { id, name, legend, label, required, fieldHasError, placeholder, errorMessage, size, optionsLayout, equalCols, styleClassPassthrough, theme } = defineProps({
   id: {
     type: String,
     required: true,
@@ -74,13 +76,6 @@ const { id, name, legend, label, required, fieldHasError, placeholder, errorMess
     type: Boolean,
     default: true,
   },
-  stateIcon: {
-    type: Object as PropType<{ checked: string; unchecked: string }>,
-    default: {
-      checked: 'carbon:radio-button-checked',
-      unchecked: 'carbon:radio-button',
-    },
-  },
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
     default: () => [],

package/components/forms/input-text/variants/material/InputPasswordWithLabel.vue

@@ -6,7 +6,7 @@
         @click.stop.prevent="toggleDisplayPassword"
         :is-pending="false"
         :buttonText
-        theme="ghost"
+        :theme
         size="x-small"
         @focusin="updateFocus(name, true)"
         @focusout="updateFocus(name, false)"

package/package.json

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