npm - srcdev-nuxt-forms - Versions diffs - 2.1.31 → 2.1.33 - Mend

srcdev-nuxt-forms 2.1.31 → 2.1.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/assets/styles/utils/_padding-helpers.css CHANGED Viewed

@@ -22,287 +22,287 @@
 }
 .p-1 {
-  padding: 1px;
+  padding: 0.1rem;
 }
 .pbs-1 {
-  padding-block-start: 1px;
+  padding-block-start: 0.1rem;
 }
 .pbe-1 {
-  padding-block-end: 1px;
+  padding-block-end: 0.1rem;
 }
 .pis-1 {
-  padding-inline-start: 1px;
+  padding-inline-start: 0.1rem;
 }
 .pie-1 {
-  padding-inline-end: 1px;
+  padding-inline-end: 0.1rem;
 }
 .pi-1 {
-  padding-inline: 1px;
+  padding-inline: 0.1rem;
 }
 .pb-1 {
-  padding-block: 1px;
+  padding-block: 0.1rem;
 }
 .p-2 {
-  padding: 2px;
+  padding: 0.2rem;
 }
 .pbs-2 {
-  padding-block-start: 2px;
+  padding-block-start: 0.2rem;
 }
 .pbe-2 {
-  padding-block-end: 2px;
+  padding-block-end: 0.2rem;
 }
 .pis-2 {
-  padding-inline-start: 2px;
+  padding-inline-start: 0.2rem;
 }
 .pie-2 {
-  padding-inline-end: 2px;
+  padding-inline-end: 0.2rem;
 }
 .pi-2 {
-  padding-inline: 2px;
+  padding-inline: 0.2rem;
 }
 .pb-2 {
-  padding-block: 2px;
+  padding-block: 0.2rem;
 }
 .p-4 {
-  padding: 4px;
+  padding: 0.4rem;
 }
 .pbs-4 {
-  padding-block-start: 4px;
+  padding-block-start: 0.4rem;
 }
 .pbe-4 {
-  padding-block-end: 4px;
+  padding-block-end: 0.4rem;
 }
 .pis-4 {
-  padding-inline-start: 4px;
+  padding-inline-start: 0.4rem;
 }
 .pie-4 {
-  padding-inline-end: 4px;
+  padding-inline-end: 0.4rem;
 }
 .pi-4 {
-  padding-inline: 4px;
+  padding-inline: 0.4rem;
 }
 .pb-4 {
-  padding-block: 4px;
+  padding-block: 0.4rem;
 }
 .p-6 {
-  padding: 6px;
+  padding: 0.6rem;
 }
 .pbs-6 {
-  padding-block-start: 6px;
+  padding-block-start: 0.6rem;
 }
 .pbe-6 {
-  padding-block-end: 6px;
+  padding-block-end: 0.6rem;
 }
 .pis-6 {
-  padding-inline-start: 6px;
+  padding-inline-start: 0.6rem;
 }
 .pie-6 {
-  padding-inline-end: 6px;
+  padding-inline-end: 0.6rem;
 }
 .pi-6 {
-  padding-inline: 6px;
+  padding-inline: 0.6rem;
 }
 .pb-6 {
-  padding-block: 6px;
+  padding-block: 0.6rem;
 }
 .p-8 {
-  padding: 8px;
+  padding: 0.8rem;
 }
 .pbs-8 {
-  padding-block-start: 8px;
+  padding-block-start: 0.8rem;
 }
 .pbe-8 {
-  padding-block-end: 8px;
+  padding-block-end: 0.8rem;
 }
 .pis-8 {
-  padding-inline-start: 8px;
+  padding-inline-start: 0.8rem;
 }
 .pie-8 {
-  padding-inline-end: 8px;
+  padding-inline-end: 0.8rem;
 }
 .pi-8 {
-  padding-inline: 8px;
+  padding-inline: 0.8rem;
 }
 .pb-8 {
-  padding-block: 8px;
+  padding-block: 0.8rem;
 }
 .p-10 {
-  padding: 10px;
+  padding: 1rem;
 }
 .pbs-10 {
-  padding-block-start: 10px;
+  padding-block-start: 1rem;
 }
 .pbe-10 {
-  padding-block-end: 10px;
+  padding-block-end: 1rem;
 }
 .pis-10 {
-  padding-inline-start: 10px;
+  padding-inline-start: 1rem;
 }
 .pie-10 {
-  padding-inline-end: 10px;
+  padding-inline-end: 1rem;
 }
 .pi-10 {
-  padding-inline: 10px;
+  padding-inline: 1rem;
 }
 .pb-10 {
-  padding-block: 10px;
+  padding-block: 1rem;
 }
 .p-12 {
-  padding: 12px;
+  padding: 1.2rem;
 }
 .pbs-12 {
-  padding-block-start: 12px;
+  padding-block-start: 1.2rem;
 }
 .pbe-12 {
-  padding-block-end: 12px;
+  padding-block-end: 1.2rem;
 }
 .pis-12 {
-  padding-inline-start: 12px;
+  padding-inline-start: 1.2rem;
 }
 .pie-12 {
-  padding-inline-end: 12px;
+  padding-inline-end: 1.2rem;
 }
 .pi-12 {
-  padding-inline: 12px;
+  padding-inline: 1.2rem;
 }
 .pb-12 {
-  padding-block: 12px;
+  padding-block: 1.2rem;
 }
 .p-18 {
-  padding: 18px;
+  padding: 1.8rem;
 }
 .pbs-18 {
-  padding-block-start: 18px;
+  padding-block-start: 1.8rem;
 }
 .pbe-18 {
-  padding-block-end: 18px;
+  padding-block-end: 1.8rem;
 }
 .pis-18 {
-  padding-inline-start: 18px;
+  padding-inline-start: 1.8rem;
 }
 .pie-18 {
-  padding-inline-end: 18px;
+  padding-inline-end: 1.8rem;
 }
 .pi-18 {
-  padding-inline: 18px;
+  padding-inline: 1.8rem;
 }
 .pb-18 {
-  padding-block: 18px;
+  padding-block: 1.8rem;
 }
 .p-20 {
-  padding: 20px;
+  padding: 2rem;
 }
 .pbs-20 {
-  padding-block-start: 20px;
+  padding-block-start: 2rem;
 }
 .pbe-20 {
-  padding-block-end: 20px;
+  padding-block-end: 2rem;
 }
 .pis-20 {
-  padding-inline-start: 20px;
+  padding-inline-start: 2rem;
 }
 .pie-20 {
-  padding-inline-end: 20px;
+  padding-inline-end: 2rem;
 }
 .pi-20 {
-  padding-inline: 20px;
+  padding-inline: 2rem;
 }
 .pb-20 {
-  padding-block: 20px;
+  padding-block: 2rem;
 }
 .p-24 {
-  padding: 24px;
+  padding: 2.4rem;
 }
 .pbs-24 {
-  padding-block-start: 24px;
+  padding-block-start: 2.4rem;
 }
 .pbe-24 {
-  padding-block-end: 24px;
+  padding-block-end: 2.4rem;
 }
 .pis-24 {
-  padding-inline-start: 24px;
+  padding-inline-start: 2.4rem;
 }
 .pie-24 {
-  padding-inline-end: 24px;
+  padding-inline-end: 2.4rem;
 }
 .pi-24 {
-  padding-inline: 24px;
+  padding-inline: 2.4rem;
 }
 .pb-24 {
-  padding-block: 24px;
+  padding-block: 2.4rem;
 }
 .p-32 {
-  padding: 32px;
+  padding: 3.2rem;
 }
 .pbs-32 {
-  padding-block-start: 32px;
+  padding-block-start: 3.2rem;
 }
 .pbe-32 {
-  padding-block-end: 32px;
+  padding-block-end: 3.2rem;
 }
 .pis-32 {
-  padding-inline-start: 32px;
+  padding-inline-start: 3.2rem;
 }
 .pie-32 {
-  padding-inline-end: 32px;
+  padding-inline-end: 3.2rem;
 }
 .pi-32 {
-  padding-inline: 32px;
+  padding-inline: 3.2rem;
 }
 .pb-32 {
-  padding-block: 32px;
+  padding-block: 3.2rem;
 }
 .p-40 {
-  padding: 40px;
+  padding: 4rem;
 }
 .pbs-40 {
-  padding-block-start: 40px;
+  padding-block-start: 4rem;
 }
 .pbe-40 {
-  padding-block-end: 40px;
+  padding-block-end: 4rem;
 }
 .pis-40 {
-  padding-inline-start: 40px;
+  padding-inline-start: 4rem;
 }
 .pie-40 {
-  padding-inline-end: 40px;
+  padding-inline-end: 4rem;
 }
 .pi-40 {
-  padding-inline: 40px;
+  padding-inline: 4rem;
 }
 .pb-40 {
-  padding-block: 40px;
+  padding-block: 4rem;
 }
 .p-60 {
-  padding: 60px;
+  padding: 6rem;
 }
 .pbs-60 {
-  padding-block-start: 60px;
+  padding-block-start: 6rem;
 }
 .pbe-60 {
-  padding-block-end: 60px;
+  padding-block-end: 6rem;
 }
 .pis-60 {
-  padding-inline-start: 60px;
+  padding-inline-start: 6rem;
 }
 .pie-60 {
-  padding-inline-end: 60px;
+  padding-inline-end: 6rem;
 }
 .pi-60 {
-  padding-inline: 60px;
+  padding-inline: 6rem;
 }
 .pb-60 {
-  padding-block: 60px;
+  padding-block: 6rem;
 }

package/components/forms/form-errors/InputError.vue CHANGED Viewed

@@ -67,7 +67,7 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
   --_display-show: block;
   --_display-hide: none;
   --_display: var(--_display-hide);
-  --_gutter: 12px;
+  --_gutter: 1.2rem;
   --_gutter-block: 0;
   --_gutter-inline: var(--_gutter);
   --_transition-duration: 500ms;
@@ -86,7 +86,7 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
   color: var(--theme-error-text);
   background-color: var(--theme-error-surface);
-  border-radius: 0 0 4px 4px;
+  border-radius: 0 0 0.4rem 0.4rem;
   transition-property: grid-template-rows;
   transition-duration: var(--_transition-duration);
@@ -95,7 +95,7 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
   &.detached {
     border-radius: var(--input-border-radius);
-    margin-block-start: 20px;
+    margin-block-start: 2rem;
   }
   /* &.mbs-12 {
@@ -104,7 +104,7 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
       margin-block-start: 0;
     }
     &.show {
-      margin-block-start: 12px;
+      margin-block-start: 1.2rem;
     }
   } */
@@ -134,7 +134,7 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
       .inner-icon {
         display: inline-block;
-        padding-left: 12px;
+        padding-left: 1.2rem;
         .icon {
           color: white;
@@ -146,7 +146,7 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
         display: inline-block;
         flex-grow: 1;
         font-family: var(--font-family);
-        font-size: 16px;
+        font-size: 1.6rem;
         font-weight: 500;
         padding-block: var(--_padding-message);
         padding-inline: var(--_gutter-inline);
@@ -171,7 +171,7 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
           }
           .message-list-item + .message-list-item {
-            margin-block-start: 6px;
+            margin-block-start: 0.6rem;
           }
         }
       }

package/components/forms/input-button/InputButtonCore.vue CHANGED Viewed

@@ -126,6 +126,7 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
   border-radius: var(--input-border-radius);
   font-family: var(--font-family);
+  /* line-height: var(--theme-form-button-line-height); */
   padding-inline: var(--_padding-inline);
   padding-block: var(--_padding-block);
@@ -134,7 +135,7 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
   background-color: var(--theme-btn-bg);
   border: var(--_border-width) solid var(--theme-btn-border);
   color: var(--theme-btn-text);
-  outline: 1px solid var(--theme-btn-outline);
+  outline: 0.1rem solid var(--theme-btn-outline);
   /*
   * States
@@ -241,10 +242,10 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
     &.sr-only {
       position: absolute;
-      clip: rect(1px, 1px, 1px, 1px);
+      clip: rect(1px, 0.1rem, 0.1rem, 0.1rem);
       clip-path: inset(50%);
-      height: 1px;
-      width: 1px;
+      height: 0.1rem;
+      width: 0.1rem;
       overflow: hidden;
       white-space: nowrap;
     }

package/components/forms/input-checkbox/MultipleCheckboxes.vue CHANGED Viewed

@@ -168,7 +168,7 @@ const ariaDescribedby = computed(() => {
   legend {
     font-family: var(--font-family);
-    font-size: 16px;
+    font-size: 1.6rem;
     font-weight: 500;
     &.has-description {
@@ -178,16 +178,16 @@ const ariaDescribedby = computed(() => {
   .label-description {
     font-family: var(--font-family);
-    font-size: 16px;
-    margin-top: 12px;
+    font-size: 1.6rem;
+    margin-top: 1.2rem;
   }
 }
 .multiple-checkboxes-items {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 12px;
-  margin-top: 12px;
+  gap: 1.2rem;
+  margin-top: 1.2rem;
   &.inline {
     flex-direction: row;

package/components/forms/input-checkbox/SingleCheckbox.vue CHANGED Viewed

@@ -136,7 +136,7 @@ watchEffect(() => {
   legend {
     font-family: var(--font-family);
-    font-size: 16px;
+    font-size: 1.6rem;
     font-weight: 500;
     &.has-description {
@@ -146,15 +146,15 @@ watchEffect(() => {
   .label-description {
     font-family: var(--font-family);
-    font-size: 16px;
-    margin-top: 12px;
+    font-size: 1.6rem;
+    margin-top: 1.2rem;
   }
 }
 .single-checkbox-items {
   display: flex;
-  gap: 12px;
-  margin-top: 12px;
+  gap: 1.2rem;
+  margin-top: 1.2rem;
   &.inline {
     flex-direction: row;

package/components/forms/input-checkbox-radio/InputCheckboxRadioButton.vue CHANGED Viewed

@@ -114,10 +114,10 @@ const flexDirection = ref(direction);
   --_label-color: var(--theme-checkbox-radio-button-label-default);
   --_box-shadow: var(--theme-checkbox-radio-button-shadow);
   --_white-space: wrap;
-  --_gap: 4px;
-  --_border-radius: 22px;
-  --_padding-block: 4px;
-  --_padding-inline: 12px;
+  --_gap: 0.4rem;
+  --_border-radius: 2.2rem;
+  --_padding-block: 0.4rem;
+  --_padding-inline: 1.2rem;
   display: flex;
   flex-direction: v-bind(flexDirection);
@@ -129,7 +129,7 @@ const flexDirection = ref(direction);
   border-radius: var(--_border-radius);
   border: var(--theme-checkbox-radio-button-border-width) solid var(--_border-color);
   outline: var(--theme-checkbox-radio-button-outline-width) solid var(--_outline-color);
-  box-shadow: 1px 1px 8px 1px var(--_box-shadow);
+  box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem var(--_box-shadow);
   padding-block: var(--_padding-block);
   padding-inline: var(--_padding-inline);
@@ -149,39 +149,39 @@ const flexDirection = ref(direction);
   /* Sizes */
   &.x-small {
-    --_checkbox-size: 20px;
-    --_gap: 10px;
-    --_border-radius: 20px;
-    --_padding-block: 2px;
-    --_padding-inline: 16px;
+    --_checkbox-size: 2rem;
+    --_gap: 1rem;
+    --_border-radius: 2rem;
+    --_padding-block: 0.2rem;
+    --_padding-inline: 1.6rem;
   }
   &.small {
-    --_checkbox-size: 22px;
-    --_gap: 12px;
-    --_border-radius: 18px;
-    --_padding-block: 0px;
-    --_padding-inline: 12px;
+    --_checkbox-size: 2.2rem;
+    --_gap: 1.2rem;
+    --_border-radius: 1.8rem;
+    --_padding-block: 0rem;
+    --_padding-inline: 1.2rem;
   }
   &.normal {
-    --_checkbox-size: 34px;
-    --_gap: 10px;
-    --_border-radius: 20px;
-    --_padding-block: 4px;
-    --_padding-inline: 12px;
+    --_checkbox-size: 3.4rem;
+    --_gap: 1rem;
+    --_border-radius: 2rem;
+    --_padding-block: 0.4rem;
+    --_padding-inline: 1.2rem;
   }
   &.medium {
-    --_checkbox-size: 34px;
-    --_gap: 10px;
-    --_border-radius: 20px;
-    --_padding-block: 4px;
-    --_padding-inline: 12px;
+    --_checkbox-size: 3.4rem;
+    --_gap: 1rem;
+    --_border-radius: 2rem;
+    --_padding-block: 0.4rem;
+    --_padding-inline: 1.2rem;
   }
   &.large {
-    --_checkbox-size: 34px;
-    --_gap: 10px;
-    --_border-radius: 20px;
-    --_padding-block: 4px;
-    --_padding-inline: 12px;
+    --_checkbox-size: 3.4rem;
+    --_gap: 1rem;
+    --_border-radius: 2rem;
+    --_padding-block: 0.4rem;
+    --_padding-inline: 1.2rem;
   }
 }
@@ -193,8 +193,8 @@ const flexDirection = ref(direction);
   height: 100%;
   align-items: center;
   justify-content: center;
-  margin-block: 8px;
-  padding-inline: 8px;
+  margin-block: 0.8rem;
+  padding-inline: 0.8rem;
   white-space: var(--_white-space);
   &:hover {

package/components/forms/input-checkbox-radio/InputCheckboxRadioCore.vue CHANGED Viewed

@@ -113,8 +113,8 @@ const isChecked = computed(() => {
 <style lang="css">
 .input-checkbox-radio-wrapper {
   --_checkbox-size: initial;
-  --_outline-width: 1px;
-  --_border-width: 1px;
+  --_outline-width: 0.1rem;
+  --_border-width: 0.1rem;
   --_border-radius: 50%;
   --_background-color: var(--theme-form-checkbox-bg);
   --_box-shadow: none;
@@ -125,7 +125,7 @@ const isChecked = computed(() => {
     &.checkbox {
       --_background-color: var(--theme-form-checkbox-bg);
       --_border-color: var(--theme-form-checkbox-border);
-      --_border-radius: 4px;
+      --_border-radius: 0.4rem;
       --_outline-color: var(--theme-form-checkbox-outline);
     }
@@ -144,7 +144,7 @@ const isChecked = computed(() => {
   background-color: var(--_background-color);
   border: var(--_border-width) solid var(--_border-color);
   border-radius: var(--_border-radius);
-  outline: 1px solid var(--_outline-color);
+  outline: 0.1rem solid var(--_outline-color);
   box-shadow: var(--_box-shadow);
   height: var(--_checkbox-size);
@@ -158,19 +158,19 @@ const isChecked = computed(() => {
   /* Sizes */
   &.x-small {
-    --_checkbox-size: 20px;
+    --_checkbox-size: 2rem;
   }
   &.small {
-    --_checkbox-size: 24px;
+    --_checkbox-size: 2.4rem;
   }
   &.normal {
-    --_checkbox-size: 34px;
+    --_checkbox-size: 3.4rem;
   }
   &.medium {
-    --_checkbox-size: 40px;
+    --_checkbox-size: 4rem;
   }
   &.large {
-    --_checkbox-size: 44px;
+    --_checkbox-size: 4.4rem;
   }
   .input-checked-icon {

package/components/forms/input-checkbox-radio/InputCheckboxRadioWithLabel.vue CHANGED Viewed

@@ -102,8 +102,8 @@ const modelValue = defineModel();
     width: 100%;
     height: 100%;
     align-items: center;
-    margin-block: 8px;
-    padding-inline: 8px;
+    margin-block: 0.8rem;
+    padding-inline: 0.8rem;
     white-space: var(--_white-space);
     &:hover {