srcdev-nuxt-forms 6.1.19 → 6.1.20

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

@@ -36,6 +36,7 @@
             :direction
             :aria-describedby
             :display-as-disc
+            :display-as-lozenge
           >
             <template #checkedIcon>
               <slot name="checkedIcon"></slot>
@@ -158,6 +159,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  displayAsLozenge: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const slots = useSlots()

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

@@ -4,7 +4,7 @@
     class="input-checkbox-radio-options-button"
     :data-theme="formTheme"
     :data-size="size"
-    :class="[size, elementClasses, optionsLayout, { error: fieldHasError }]"
+    :class="[size, elementClasses, optionsLayout, { error: fieldHasError }, { lozenge: displayAsLozenge }]"
   >
     <InputCheckboxRadioCore
       :isButton="true"
@@ -113,6 +113,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  displayAsLozenge: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const slots = useSlots()
@@ -136,9 +140,13 @@ const flexDirection = ref(props.direction)
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  border-radius: 1lh;
+  border-radius: 0.4rem;
   transition: all 0.2s ease-in-out;
 
+  &.lozenge {
+    border-radius: 100vw;
+  }
+
   &.inline {
     --_white-space: nowrap;
   }
@@ -147,8 +155,6 @@ const flexDirection = ref(props.direction)
   outline: var(--form-element-outline-width) solid var(--theme-input-outline);
 
   box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem transparent;
-  padding-block: var(--input-checkbox-radio-options-padding-block);
-  padding-inline: var(--input-checkbox-radio-options-padding-inline);
 
   &:hover {
     background-color: var(--theme-input-surface-hover);

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

@@ -140,8 +140,8 @@ const isChecked = computed(() => {
   outline: var(--form-element-outline-width) solid var(--theme-input-outline);
   box-shadow: var(--_box-shadow);
 
-  height: var(--input-symbol-size);
-  width: var(--input-symbol-size);
+  height: var(--input-checked-element-size);
+  width: var(--input-checked-element-size);
 
   transition: all var(--theme-form-transition-duration) ease-in-out;
 
@@ -162,7 +162,8 @@ const isChecked = computed(() => {
     .input-checked-icon-slot {
       opacity: 1;
 
-      .input-checked-icon-checked {
+      .input-checked-icon-checked,
+      .icon {
         color: var(--theme-checkbox-symbol-color);
       }
     }
@@ -180,10 +181,11 @@ const isChecked = computed(() => {
     opacity: 0;
     transition: opacity 0.2s ease-in-out;
 
-    .input-checked-icon-checked {
+    .input-checked-icon-checked,
+    .icon {
       color: var(--theme-checkbox-symbol-color);
-      height: var(--input-symbol-size);
-      width: var(--input-symbol-size);
+      height: var(--input-checked-icon-size);
+      width: var(--input-checked-icon-size);
       box-shadow: var(--_box-shadow);
     }
   }
@@ -196,8 +198,8 @@ const isChecked = computed(() => {
     overflow: hidden;
     opacity: 0;
 
-    height: var(--input-symbol-size);
-    width: var(--input-symbol-size);
+    height: var(--input-checked-element-size);
+    width: var(--input-checked-element-size);
 
     &:hover {
       cursor: pointer;

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

@@ -30,6 +30,7 @@
             :theme
             :direction
             :ariaDescribedby
+            :display-as-lozenge
           >
             <template #checkedIcon>
               <slot name="checkedIcon"></slot>
@@ -147,6 +148,10 @@ const props = defineProps({
       return ["row", "row-reverse"].includes(value)
     },
   },
+  displayAsLozenge: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const slots = useSlots()

package/package.json

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