srcdev-nuxt-forms 2.1.32 → 2.1.34

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

@@ -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

@@ -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 {

package/components/forms/input-number/InputNumberCore.vue

@@ -109,7 +109,7 @@ onMounted(() => {
 
 <style lang="css">
 .input-number-wrapper {
-  --_gutter: 12px;
+  --_gutter: 1.2rem;
   --_border-width: var(--input-border-width-default);
   --_min-width: v-bind(minLength);
 
@@ -120,7 +120,7 @@ onMounted(() => {
 
   .slot {
     display: inline-block;
-    padding-inline: 8px;
+    padding-inline: 0.8rem;
 
     .icon {
       font-weight: 900;
@@ -156,7 +156,7 @@ onMounted(() => {
     font-family: var(--font-family);
     font-size: var(--theme-form-button-font-size-normal);
     line-height: var(--line-height);
-    padding: 4px 16px;
+    padding: 0.4rem 1.6rem;
     text-align: center;
     min-width: var(--_min-width);
 

package/components/forms/input-number/variants/InputNumberDefault.vue

@@ -135,11 +135,11 @@ const updateValue = (step: number, withinRangeLimit: boolean) => {
 .input-number-with-label {
   --_border-width: var(--input-border-width-default);
   --_outline-width: var(--input-outline-width-thin);
-  --_label-padding-inline: 10px;
+  --_label-padding-inline: 1rem;
 
   .input-number-label {
     display: block;
-    margin-block: 8px;
+    margin-block: 0.8rem;
 
     &:hover {
       cursor: pointer;
@@ -148,8 +148,8 @@ const updateValue = (step: number, withinRangeLimit: boolean) => {
 
   .label-description {
     font-family: var(--font-family);
-    font-size: 16px;
-    margin-top: 12px;
+    font-size: 1.6rem;
+    margin-top: 1.2rem;
   }
 }
 </style>

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

@@ -167,7 +167,7 @@ const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
 
   legend {
     font-family: var(--font-family);
-    font-size: 16px;
+    font-size: 1.6rem;
     font-weight: 500;
 
     &.has-description {
@@ -177,15 +177,15 @@ const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
 
   .label-description {
     font-family: var(--font-family);
-    font-size: 16px;
-    margin-top: 12px;
+    font-size: 1.6rem;
+    margin-top: 1.2rem;
   }
 }
 
 .multiple-radiobuttons-items {
   display: flex;
-  gap: 12px;
-  margin-top: 12px;
+  gap: 1.2rem;
+  margin-top: 1.2rem;
 
   &.inline {
     flex-direction: row;

package/components/forms/input-range/InputRangeCore.vue

@@ -115,17 +115,17 @@ const changeBackgroundColor = () => {
 
 <style lang="css">
 .input-range-wrapper {
-  --_gutter: 12px;
+  --_gutter: 1.2rem;
   --_border-width: var(--input-border-width-default);
   --_outline-width: var(--input-outline-width-thin);
 
-  --_input-range-height: 24px;
+  --_input-range-height: 2.4rem;
   --_slot-translate-y: calc(var(--_input-range-height) / 4);
 
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 10px;
+  gap: 1rem;
 
   .slot {
     align-self: flex-start;
@@ -160,8 +160,8 @@ const changeBackgroundColor = () => {
         /* -webkit-appearance: none; */
         accent-color: blue;
         color: blue;
-        background-color: 1px solid green;
-        outline: 1px solid blue;
+        background-color: 0.1rem solid green;
+        outline: 0.1rem solid blue;
         border-radius: 50%;
       }
 
@@ -169,7 +169,7 @@ const changeBackgroundColor = () => {
         appearance: none;
         -webkit-appearance: none;
         /* background: hsl(10 80% 50% / 0.5); */
-        /* box-shadow: 1px 1px 1px #fff, 0px 0px 1px #fff; */
+        /* box-shadow: 0.1rem 0.1rem 0.1rem #fff, 0rem 0rem 0.1rem #fff; */
       }
 
       /* For Chrome, Safari, Opera, and Edge */
@@ -190,7 +190,7 @@ const changeBackgroundColor = () => {
         background: #5cd5eb;
         height: 2rem;
         width: 1rem;
-        border-radius: 10px;
+        border-radius: 1rem;
       } */
 
       /* For Firefox */
@@ -198,7 +198,7 @@ const changeBackgroundColor = () => {
         background: #5cd5eb;
         height: 2rem;
         width: 1rem;
-        border-radius: 10px;
+        border-radius: 1rem;
         border: none;
       } */
 
@@ -211,7 +211,7 @@ const changeBackgroundColor = () => {
       display: flex;
       flex-direction: column;
       font-family: var(--font-family);
-      font-size: 14px;
+      font-size: 1.4rem;
       font-weight: 500;
       justify-content: space-between;
       writing-mode: vertical-lr;

package/components/forms/input-range/variants/InputRangeDefault.vue

@@ -143,7 +143,7 @@ const updateRange = (step: number, withinRangeLimit: boolean) => {
 .input-range-with-label {
   .input-range-label {
     display: block;
-    margin-block: 8px;
+    margin-block: 0.8rem;
 
     &:hover {
       cursor: pointer;
@@ -152,8 +152,8 @@ const updateRange = (step: number, withinRangeLimit: boolean) => {
 
   .label-description {
     font-family: var(--font-family);
-    font-size: 16px;
-    margin-top: 12px;
+    font-size: 1.6rem;
+    margin-top: 1.2rem;
   }
 }
 </style>

package/components/forms/input-range-fancy/InputRangeFancyCore.vue

@@ -156,10 +156,10 @@ onMounted(() => {
 
   .sr-only {
     position: absolute;
-    width: 1px;
-    height: 1px;
+    width: 0.1rem;
+    height: 0.1rem;
     padding: 0;
-    margin: -1px;
+    margin: -0.1rem;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
@@ -174,7 +174,7 @@ onMounted(() => {
   [type='range'] {
     width: 100%;
     opacity: 0;
-    height: 60px;
+    height: 6rem;
   }
 
   [type='range']:hover {
@@ -237,23 +237,23 @@ onMounted(() => {
   [type='range']::-webkit-slider-thumb {
     appearance: none;
     -webkit-appearance: none;
-    height: 60px;
-    width: 40px;
-    margin-top: 0px;
+    height: 6rem;
+    width: 4rem;
+    margin-top: 0rem;
     opacity: 1;
   }
   [type='range']::-webkit-slider-runnable-track {
     -webkit-appearance: none;
-    height: 60px;
+    height: 6rem;
     /* background: hsl(10 80% 50% / 0.5); */
-    margin-top: 0px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
-    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+    margin-top: 0rem; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
+    box-shadow: 0.1rem 0.1rem 0.1rem #000000, 0rem 0rem 0.1rem #0d0d0d;
   }
   [type='range']::-moz-range-track {
-    height: 60px;
+    height: 6rem;
     /* background: hsl(10 80% 50% / 0.5); */
-    margin-top: 0px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
-    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+    margin-top: 0rem; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
+    box-shadow: 0.1rem 0.1rem 0.1rem #000000, 0rem 0rem 0.1rem #0d0d0d;
   }
 }
 
@@ -276,7 +276,7 @@ onMounted(() => {
     touch-action: none;
     /* extras */
     accent-color: hsl(24 74% calc(24% + (30% * ((100 - var(--value, 0)) / 100)) / 1) / 0.4);
-    outline: 2px dashed #0000;
+    outline: 0.2rem dashed #0000;
     transition-property: outline-color, opacity, translate;
     transition-duration: 0.25s;
   }
@@ -305,12 +305,12 @@ onMounted(() => {
     pointer-events: none;
     transition: height var(--speed) var(--timing);
     z-index: 5;
-    clip-path: inset(0 -0.25rem 0 -0.25rem round 6px);
+    clip-path: inset(0 -0.25rem 0 -0.25rem round 0.6rem);
   }
 
   [data-reveal='true'] .control__track {
     clip-path: unset;
-    outline: 2px dashed white;
+    outline: 0.2rem dashed white;
   }
 
   .control__track-slide {
@@ -324,7 +324,7 @@ onMounted(() => {
     width: 100%;
     height: 100%;
     position: absolute;
-    border-radius: 6px;
+    border-radius: 0.6rem;
 
     &:nth-of-type(1) {
       background: var(--coffee);
@@ -338,8 +338,8 @@ onMounted(() => {
 
   .control__indicator {
     height: 75%;
-    border-radius: 4px;
-    width: 4px;
+    border-radius: 0.4rem;
+    width: 0.4rem;
     position: absolute;
     top: 50%;
     left: 50%;
@@ -431,13 +431,13 @@ onMounted(() => {
       --range: calc((70 - (var(--value) / 100 * 10)) * 1%);
 
       display: flex;
-      gap: 12px;
+      gap: 1.2rem;
       color: hsl(24 74% 54%);
       mask: linear-gradient(90deg, hsl(0 0% 100% / 0.6) var(--range), hsl(0 0% 100% / 1) var(--range));
       left: 0.5rem;
       .low-value {
         display: inline-block;
-        border: 1px solid white;
+        border: 0.1rem solid white;
         height: 2rem;
         width: 5rem;
       }
@@ -447,12 +447,12 @@ onMounted(() => {
       --range: calc((50 - (var(--value) / 100 * 10)) * 1%);
 
       display: flex;
-      gap: 12px;
+      gap: 1.2rem;
       mask: linear-gradient(90deg, hsl(0 0% 100% / 1) var(--range), hsl(0 0% 100% / 0.5) var(--range));
       right: 0.5rem;
       .high-value {
         display: inline-block;
-        border: 1px solid white;
+        border: 0.1rem solid white;
         height: 2rem;
         width: 5rem;
       }

package/components/forms/input-range-fancy/InputRangeFancyWithLabel.vue

@@ -108,7 +108,7 @@ const modelValue = defineModel<number | readonly number[]>();
 .input-range-fancy-with-label {
   .input-range-fancy-label {
     display: block;
-    margin-block: 8px;
+    margin-block: 0.8rem;
 
     &:hover {
       cursor: pointer;
@@ -117,8 +117,8 @@ const modelValue = defineModel<number | readonly number[]>();
 
   .label-description {
     font-family: var(--font-family);
-    font-size: 16px;
-    margin-top: 12px;
+    font-size: 1.6rem;
+    margin-top: 1.2rem;
   }
 }
 </style>

package/components/forms/input-text/InputTextCore.vue

@@ -144,7 +144,7 @@ onMounted(() => {
 
 <style lang="css">
 .input-text-wrapper {
-  --_gutter: 12px;
+  --_gutter: 1.2rem;
   --_border-width: var(--input-border-width-default);
   --_outline-width: var(--input-border-width-default);
 
@@ -164,7 +164,7 @@ onMounted(() => {
   &:not(:has(.btn)) {
     .slot {
       display: inline-block;
-      padding-inline: 8px;
+      padding-inline: 0.8rem;
 
       .icon {
         color: var(--theme-form-input-text);
@@ -174,7 +174,7 @@ onMounted(() => {
 
   &:has(.btn) {
     .btn {
-      margin-inline: 6px;
+      margin-inline: 0.6rem;
     }
   }
 
@@ -203,7 +203,7 @@ onMounted(() => {
     font-family: var(--font-family);
     font-size: var(--theme-form-button-font-size-normal);
     line-height: var(--line-height);
-    padding: 8px 12px;
+    padding: 0.8rem 1.2rem;
 
     &::placeholder,
     &::-webkit-input-placeholder {
@@ -223,7 +223,7 @@ input:-webkit-autofill-and-obscured {
   background-color: var(--theme-form-input-bg) !important;
   background-image: none !important;
   color: var(--theme-form-input-text) !important;
-  -webkit-box-shadow: 0 0 0px 1000px var(--theme-form-input-bg) inset;
+  -webkit-box-shadow: 0 0 0rem 1000px var(--theme-form-input-bg) inset;
   -webkit-text-fill-color: var(--theme-form-input-text);
   transition: background-color 5000s ease-in-out 0s;
 }

package/components/forms/input-text/variants/InputTextWithLabel.vue

@@ -139,7 +139,7 @@ watch(
 .input-text-with-label {
   .input-text-label {
     display: block;
-    margin-block: 8px;
+    margin-block: 0.8rem;
   }
 }
 </style>

package/components/forms/input-textarea/InputTextareaCore.vue

@@ -96,7 +96,7 @@ onMounted(() => {
 
 <style lang="css">
 .input-textarea-wrapper {
-  --_gutter: 12px;
+  --_gutter: 1.2rem;
   --_border-width: var(--input-border-width-default);
   --_outline-width: var(--input-border-width-default);
 
@@ -115,7 +115,7 @@ onMounted(() => {
 
   .slot {
     display: inline-block;
-    padding-inline: 8px;
+    padding-inline: 0.8rem;
 
     .icon {
       color: var(--theme-form-input-text);
@@ -147,7 +147,7 @@ onMounted(() => {
     font-family: var(--font-family);
     font-size: var(--theme-form-button-font-size-normal);
     line-height: var(--line-height);
-    padding: 8px 12px;
+    padding: 0.8rem 1.2rem;
 
     &::placeholder,
     &::-webkit-input-placeholder {

package/components/forms/input-textarea/variants/InputTextareaWithLabel.vue

@@ -100,7 +100,7 @@ watch(
 .input-textarea-with-label {
   .input-textarea-label {
     display: block;
-    margin-block: 8px;
+    margin-block: 0.8rem;
   }
 }
 </style>

package/components/forms/toggle-switch/ToggleSwitchCore.vue

@@ -109,7 +109,6 @@ const inputId = computed(() => `toggle-sitch-${id}`);
       --_icon-off-opacity: 0;
     }
 
-    /* The symbol */
     .symbol-wrapper {
       position: absolute;
       cursor: pointer;
@@ -137,37 +136,34 @@ const inputId = computed(() => `toggle-sitch-${id}`);
 }
 
 /*
-    * ToggleSwitch configurable
-    **/
+* ToggleSwitch configurable
+**/
 .toggle-switch-core {
   /* Sizes */
   &.x-small {
-    --_symbol-size: 20px;
+    --_symbol-size: 2rem;
   }
   &.small {
-    --_symbol-size: 24px;
+    --_symbol-size: 2.4rem;
   }
   &.normal {
-    --_symbol-size: 34px;
+    --_symbol-size: 3.4rem;
   }
   &.medium {
-    --_symbol-size: 40px;
+    --_symbol-size: 4rem;
   }
   &.large {
-    --_symbol-size: 44px;
+    --_symbol-size: 4.4rem;
   }
 
-  /* .toggle-switch-label {
-  } */
-
   .toggle-switch-input {
     border: var(--theme-form-toggle-border);
     outline: var(--theme-form-toggle-outline);
-    width: calc(var(--_symbol-size) * 2 - 4px);
-    height: calc(var(--_symbol-size) + 4px);
+    width: calc(var(--_symbol-size) * 2 - calc(var(--theme-form-toggle-border-width) * 4));
+    height: calc(var(--_symbol-size) + calc(var(--theme-form-toggle-border-width) * 4));
 
     &.round {
-      border-radius: calc(var(--_symbol-size) + 2px);
+      border-radius: calc(var(--_symbol-size) + calc(var(--theme-form-toggle-border-width) * 2));
     }
 
     .symbol-wrapper {
@@ -178,10 +174,10 @@ const inputId = computed(() => `toggle-sitch-${id}`);
         border-radius: var(--_symbol-size);
       }
       .symbol {
-        height: calc(var(--_symbol-size) - 6px);
-        width: calc(var(--_symbol-size) - 6px);
-        left: 4px;
-        bottom: 4px;
+        height: calc(var(--_symbol-size) - 0.6rem);
+        width: calc(var(--_symbol-size) - 0.6rem);
+        left: 0.4rem;
+        bottom: 0.4rem;
         background-color: var(--theme-form-toggle-symbol-off);
         transition: var(--_transition-duration);
 

package/components/forms/toggle-switch/variants/ToggleSwitchWithLabel.vue

@@ -39,7 +39,8 @@ const { id, name, label, required, errorMessage, fieldHasError, trueValue, false
   },
   errorMessage: {
     type: [Object, String],
-    required: true,
+    default: '',
+    required: false,
   },
   fieldHasError: {
     type: Boolean,

package/components/forms/ui/FormField.vue

@@ -24,17 +24,17 @@ defineProps({
 
 <style lang="css">
 .form-field {
-  --_gutter-width: 0px;
+  --_gutter-width: 0rem;
   --_max-width: 400px;
 
   margin-inline: auto;
-  margin-bottom: 16px;
+  margin-bottom: 1.6rem;
 
   width: min(100% - calc(2 * var(--_gutter-width)), var(--_max-width));
-  outline: 0px solid var(--gray-5);
+  outline: 0rem solid var(--gray-5);
 
   &.has-gutter {
-    --_gutter-width: 16px;
+    --_gutter-width: 1.6rem;
   }
 
   &.narrow {

package/components/forms/ui/FormWrapper.vue

@@ -16,8 +16,8 @@ defineProps({
 
 <style lang="css">
 .form-wrapper {
-  outline: 0px solid var(--gray-12);
-  padding-bottom: 20px;
+  outline: 0rem solid var(--gray-12);
+  padding-bottom: 2rem;
 
   &.narrow {
     max-width: 400px;

package/components/utils/dark-mode-switcher/DarkModeSwitcher.vue

@@ -0,0 +1,23 @@
+<template>
+  <ToggleSwitchCore v-model="displayMode" class="dark-mode-switcher" :class="elementClasses" true-value="dark" false-value="light" name="header-dark-mode-switcher" id="header-dark-mode-switcher">
+    <template #iconOn>
+      <Icon name="radix-icons:moon" class="icon" />
+    </template>
+    <template #iconOff>
+      <Icon name="radix-icons:sun" class="icon" />
+    </template>
+  </ToggleSwitchCore>
+</template>
+
+<script setup lang="ts">
+const { styleClassPassthrough } = defineProps({
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const displayMode = ref<'auto' | 'dark' | 'light'>('auto');
+const { elementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+useColourScheme(displayMode);
+</script>

package/composables/useColourScheme.ts

@@ -0,0 +1,41 @@
+export const useColourScheme = (colourScheme: Ref<'auto' | 'dark' | 'light'> = ref('light')) => {
+  const updateColourScheme = (newColourScheme: 'auto' | 'dark' | 'light') => {
+    colourScheme.value = newColourScheme;
+  };
+
+  const getSetPrefereredColourScheme = () => {
+    if (import.meta.client) {
+      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        colourScheme.value = 'dark';
+      } else {
+        colourScheme.value = 'light';
+      }
+    }
+  };
+
+  onMounted(() => {
+    if (import.meta.client) {
+      const storedMode = localStorage.getItem('colourScheme');
+      if (storedMode) {
+        colourScheme.value = storedMode as 'dark' | 'light';
+      } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        colourScheme.value = 'dark';
+      } else {
+        colourScheme.value = 'light';
+      }
+    }
+  });
+
+  watch(colourScheme, (newVal) => {
+    if (import.meta.client) {
+      localStorage.setItem('colourScheme', newVal);
+      document.documentElement.dataset.colorScheme = newVal;
+    }
+  });
+
+  return {
+    colourScheme,
+    updateColourScheme,
+    getSetPrefereredColourScheme,
+  };
+};

package/nuxt.config.ts

@@ -11,6 +11,16 @@ export default defineNuxtConfig({
       },
     },
   },
+  app: {
+    head: {
+      htmlAttrs: {
+        lang: 'en',
+        'data-color-scheme': 'auto',
+      },
+      titleTemplate: '%s - Website name',
+      meta: [{ charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }],
+    },
+  },
   components: [
     {
       path: './components',