srcdev-nuxt-forms 6.1.3 → 6.1.5

package/app/components/forms/c12/prop-validators/index.ts

@@ -1,38 +1,48 @@
 export const propValidators = {
-  size: ['x-small', 'small', 'default', 'medium', 'large'],
+  size: ["x-small", "small", "default", "medium", "large"],
   weight: [
-    'wght-100',
-    'wght-200',
-    'wght-300',
-    'wght-400',
-    'wght-500',
-    'wght-600',
-    'wght-700',
-    'wght-800',
-    'wght-900',
-    'light',
-    'normal',
-    'bold',
-    'fvs-wght-100',
-    'fvs-wght-200',
-    'fvs-wght-300',
-    'fvs-wght-400',
-    'fvs-wght-500',
-    'fvs-wght-600',
-    'fvs-wght-700',
-    'fvs-wght-800',
-    'fvs-wght-900',
+    "wght-100",
+    "wght-200",
+    "wght-300",
+    "wght-400",
+    "wght-500",
+    "wght-600",
+    "wght-700",
+    "wght-800",
+    "wght-900",
+    "light",
+    "normal",
+    "bold",
+    "fvs-wght-100",
+    "fvs-wght-200",
+    "fvs-wght-300",
+    "fvs-wght-400",
+    "fvs-wght-500",
+    "fvs-wght-600",
+    "fvs-wght-700",
+    "fvs-wght-800",
+    "fvs-wght-900",
   ],
-  theme: ['primary', 'secondary', 'tertiary', 'ghost', 'error', 'success', 'warning', 'input-action', 'input-action-underlined'],
-  checkboxAppearance: [null, 'with-decorator'],
-  checkboxStyle: ['check', 'cross'],
-  radioAppearance: [null, 'with-decorator'],
-  optionsLayout: ['block', 'inline', 'equal-widths'],
-  labelWeight: ['normal', 'semi-bold', 'bold'],
-  inputVariant: ['normal', 'outlined', 'underlined'],
-  inputTypesButton: ['button', 'cancel', 'reset', 'submit'],
-  inputTypesText: ['text', 'email', 'password', 'number', 'tel', 'url'],
-  inputMode: ['text', 'email', 'tel', 'url', 'search', 'numeric', 'none', 'decimal'],
-};
+  theme: [
+    "primary",
+    "secondary",
+    "tertiary",
+    "ghost",
+    "error",
+    "success",
+    "warning",
+    "input-action",
+    "input-action-underlined",
+  ],
+  checkboxAppearance: [null, "with-decorator"],
+  checkboxStyle: ["check", "cross"],
+  radioAppearance: [null, "with-decorator"],
+  optionsLayout: ["block", "inline", "equal-widths"],
+  labelWeight: ["normal", "semi-bold", "bold"],
+  inputVariant: ["normal", "outlined", "underlined"],
+  inputTypesButton: ["button", "cancel", "reset", "submit"],
+  inputTypesText: ["text", "email", "password", "number", "tel", "url"],
+  inputMode: ["text", "email", "tel", "url", "search", "numeric", "none", "decimal"],
+}
 
-export default propValidators;
+export default propValidators

package/app/components/forms/input-checkbox-radio/InputCheckboxRadioButton.vue

@@ -1,5 +1,6 @@
 <template>
-  <div
+  <label
+    :for="id"
     class="input-checkbox-radio-options-button"
     :data-theme="formTheme"
     :data-size="size"
@@ -24,16 +25,16 @@
         <slot name="checkedIcon"></slot>
       </template>
     </InputCheckboxRadioCore>
-    <label v-if="slots.labelContent" class="input-checkbox-radio-options-button-label" :for="id">
+    <div v-if="slots.labelContent" class="input-checkbox-radio-options-button-label">
       <slot name="labelContent"></slot>
-    </label>
-    <label v-else class="input-checkbox-radio-options-button-label" :for="id">{{ label }}</label>
+    </div>
+    <div v-else class="input-checkbox-radio-options-button-label">{{ label }}</div>
     <div class="decorator-icon">
       <slot name="itemIcon">
         <Icon name="material-symbols:add-2" class="icon" aria-hidden="true" focusable="false" />
       </slot>
     </div>
-  </div>
+  </label>
 </template>
 
 <script setup lang="ts">
@@ -154,6 +155,7 @@ const flexDirection = ref(props.direction)
     border-color: var(--theme-input-border);
     outline-color: var(--theme-input-outline-hover);
     outline-offset: var(--form-element-outline-offset-focus);
+    cursor: pointer;
   }
 
   &:has(.input-checkbox-radio-core:focus-visible) {

package/app/components/forms/input-checkbox-radio/InputCheckboxRadioCore.vue

@@ -3,11 +3,20 @@
     class="input-checkbox-radio-wrapper"
     :data-theme="formTheme"
     :data-size="size"
-    :class="[type, size, elementClasses, { error: fieldHasError }, { button: isButton }, { 'display-as-disc': displayAsDisc }]"
+    :class="[
+      type,
+      size,
+      elementClasses,
+      { error: fieldHasError },
+      { button: isButton },
+      { 'display-as-disc': displayAsDisc },
+    ]"
   >
-    <slot name="checkedIcon" v-if="isChecked">
-      <Icon :name="defaultIcon" class="input-checked-icon" />
-    </slot>
+    <div class="input-checked-icon-slot">
+      <slot name="checkedIcon">
+        <Icon :name="defaultIcon" class="input-checked-icon-checked" />
+      </slot>
+    </div>
 
     <input
       :type
@@ -29,14 +38,14 @@
 </template>
 
 <script setup lang="ts">
-import propValidators from '../c12/prop-validators';
+import propValidators from "../c12/prop-validators"
 const props = defineProps({
   isButton: {
     type: Boolean,
     default: false,
   },
   type: {
-    type: String as PropType<'checkbox' | 'radio'>,
+    type: String as PropType<"checkbox" | "radio">,
     required: true,
   },
   id: {
@@ -65,16 +74,16 @@ const props = defineProps({
   },
   theme: {
     type: String as PropType<string>,
-    default: 'primary',
+    default: "primary",
     validator(value: string) {
-      return propValidators.theme.includes(value);
+      return propValidators.theme.includes(value)
     },
   },
   size: {
     type: String as PropType<string>,
-    default: 'medium',
+    default: "medium",
     validator(value: string) {
-      return propValidators.size.includes(value);
+      return propValidators.size.includes(value)
     },
   },
   fieldHasError: {
@@ -93,37 +102,37 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-});
+})
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 const formTheme = computed(() => {
-  return props.fieldHasError ? 'error' : props.theme;
-});
+  return props.fieldHasError ? "error" : props.theme
+})
 
-const modelValue = defineModel<any>();
+const modelValue = defineModel<any>()
 
-const inputField = ref<HTMLInputElement | null>(null);
+const inputField = ref<HTMLInputElement | null>(null)
 
 const defaultIcon = computed(() => {
-  return props.type === 'checkbox' ? 'material-symbols:check-small' : 'material-symbols:circle';
-});
+  return props.type === "checkbox" ? "material-symbols:check-small" : "material-symbols:circle"
+})
 
-const isArray = Array.isArray(modelValue.value);
+const isArray = Array.isArray(modelValue.value)
 
 const isChecked = computed(() => {
   if (isArray) {
-    return modelValue.value.includes(props.trueValue);
+    return modelValue.value.includes(props.trueValue)
   } else {
-    return modelValue.value === props.trueValue;
+    return modelValue.value === props.trueValue
   }
-});
+})
 </script>
 
 <style lang="css">
 .input-checkbox-radio-wrapper {
   display: grid;
-  grid-template-areas: 'element-stack';
+  grid-template-areas: "element-stack";
   place-content: center;
 
   background-color: var(--theme-checkbox-symbol-surface);
@@ -149,17 +158,34 @@ const isChecked = computed(() => {
     border-radius: 50%;
   }
 
+  &:has(.input-checkbox-radio-core:checked) {
+    .input-checked-icon-slot {
+      opacity: 1;
+
+      .input-checked-icon-checked {
+        color: var(--theme-checkbox-symbol-color);
+      }
+    }
+  }
+
   /* focus-visible */
   &:not(.button):has(.input-checkbox-radio-core:focus-visible) {
     outline: var(--theme-focus-visible-outline);
   }
 
-  .input-checked-icon {
+  .input-checked-icon-slot {
     grid-area: element-stack;
-    color: var(--theme-checkbox-symbol-color);
-    height: var(--input-symbol-size);
-    width: var(--input-symbol-size);
-    box-shadow: var(--_box-shadow);
+    display: grid;
+    place-content: center;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+
+    .input-checked-icon-checked {
+      color: var(--theme-checkbox-symbol-color);
+      height: var(--input-symbol-size);
+      width: var(--input-symbol-size);
+      box-shadow: var(--_box-shadow);
+    }
   }
 
   .input-checkbox-radio-core {

package/app/components/forms/input-checkbox-radio/InputCheckboxRadioWithLabel.vue

@@ -1,5 +1,6 @@
 <template>
-  <div
+  <label
+    :for="id"
     class="input-checkbox-radio-with-label"
     :data-size="size"
     :class="[elementClasses, optionsLayout, { error: fieldHasError }]"
@@ -23,11 +24,11 @@
       </template>
     </InputCheckboxRadioCore>
 
-    <label v-if="slots.labelContent" class="input-checkbox-radio-label body-normal" :for="id">
+    <div v-if="slots.labelContent" class="input-checkbox-radio-label body-normal">
       <slot name="labelContent"></slot>
-    </label>
-    <label v-else class="input-checkbox-radio-label body-normal-semibold" :for="id">{{ label }}</label>
-  </div>
+    </div>
+    <div v-else class="input-checkbox-radio-label body-normal-semibold">{{ label }}</div>
+  </label>
 </template>
 
 <script setup lang="ts">

package/package.json

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