@dargmuesli/nuxt-vio 22.0.0-beta.1 → 22.0.0-beta.3

package/.config/lint.js

@@ -72,4 +72,9 @@ export const VIO_ESLINT_CONFIG = [
       '@intlify/vue-i18n/no-unused-keys': 'off',
     },
   }, // TODO: remove once `@intlify/eslint-plugin-vue-i18n` accounts for translation usage in composables]
+  {
+    rules: {
+      'vue/attributes-order': ['error', { alphabetical: true }],
+    },
+  },
 ]

package/app/components/OgImage/Nuxt.takumi.vue

@@ -44,10 +44,10 @@ const titleComputedLineClamp = lineClampStyle(titleComputed, 2)
   <div class="flex h-full w-full flex-col justify-center bg-[#020420]">
     <svg
       class="absolute top-0 right-0"
-      width="629"
+      fill="none"
       height="593"
       viewBox="0 0 629 593"
-      fill="none"
+      width="629"
       xmlns="http://www.w3.org/2000/svg"
     >
       <g filter="url(#filter0_f_199_94966)">
@@ -59,23 +59,23 @@ const titleComputedLineClamp = lineClampStyle(titleComputed, 2)
       <defs>
         <filter
           id="filter0_f_199_94966"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+          height="1251.52"
+          width="1255.25"
           x="0.873535"
           y="-659"
-          width="1255.25"
-          height="1251.52"
-          filterUnits="userSpaceOnUse"
-          color-interpolation-filters="sRGB"
         >
           <feFlood flood-opacity="0" result="BackgroundImageFix" />
           <feBlend
-            mode="normal"
             in="SourceGraphic"
             in2="BackgroundImageFix"
+            mode="normal"
             result="shape"
           />
           <feGaussianBlur
-            stdDeviation="40.5"
             result="effect1_foregroundBlur_199_94966"
+            stdDeviation="40.5"
           />
         </filter>
       </defs>
@@ -105,10 +105,10 @@ const titleComputedLineClamp = lineClampStyle(titleComputed, 2)
     </div>
     <svg
       class="absolute top-40 right-22.5 hidden lg:flex"
-      width="340"
+      fill="none"
       height="340"
       viewBox="0 0 340 340"
-      fill="none"
+      width="340"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
@@ -169,32 +169,32 @@ const titleComputedLineClamp = lineClampStyle(titleComputed, 2)
       <defs>
         <filter
           id="filter0_f_199_94959"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+          height="67.3485"
+          width="91.6485"
           x="124.176"
           y="130.551"
-          width="91.6485"
-          height="67.3485"
-          filterUnits="userSpaceOnUse"
-          color-interpolation-filters="sRGB"
         >
           <feFlood flood-opacity="0" result="BackgroundImageFix" />
           <feBlend
-            mode="normal"
             in="SourceGraphic"
             in2="BackgroundImageFix"
+            mode="normal"
             result="shape"
           />
           <feGaussianBlur
-            stdDeviation="3.78713"
             result="effect1_foregroundBlur_199_94959"
+            stdDeviation="3.78713"
           />
         </filter>
         <linearGradient
           id="paint0_linear_199_94959"
+          gradientUnits="userSpaceOnUse"
           x1="167.875"
-          y1="74.375"
           x2="88"
+          y1="74.375"
           y2="261"
-          gradientUnits="userSpaceOnUse"
         >
           <stop stop-color="#0F172A" />
           <stop offset="1" stop-color="#0F172A" stop-opacity="0" />
@@ -203,31 +203,31 @@ const titleComputedLineClamp = lineClampStyle(titleComputed, 2)
           id="paint1_radial_199_94959"
           cx="0"
           cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
           gradientTransform="translate(167.875 167.875) rotate(-90) scale(100.596 107.502)"
+          gradientUnits="userSpaceOnUse"
+          r="1"
         >
           <stop stop-color="white" />
           <stop offset="1" stop-opacity="0" />
         </radialGradient>
         <linearGradient
           id="paint2_linear_199_94959"
+          gradientUnits="userSpaceOnUse"
           x1="247.183"
-          y1="96.4978"
           x2="194.172"
+          y1="96.4978"
           y2="229.234"
-          gradientUnits="userSpaceOnUse"
         >
           <stop stop-color="white" />
           <stop offset="1" stop-opacity="0" />
         </linearGradient>
         <linearGradient
           id="paint3_linear_199_94959"
+          gradientUnits="userSpaceOnUse"
           x1="267.01"
-          y1="78.6537"
           x2="200.746"
+          y1="78.6537"
           y2="244.574"
-          gradientUnits="userSpaceOnUse"
         >
           <stop stop-color="#00DC82" />
           <stop offset="1" stop-opacity="0" />
@@ -235,44 +235,44 @@ const titleComputedLineClamp = lineClampStyle(titleComputed, 2)
         </linearGradient>
         <linearGradient
           id="paint4_linear_199_94959"
+          gradientUnits="userSpaceOnUse"
           x1="292.405"
-          y1="57.8159"
           x2="209.877"
+          y1="57.8159"
           y2="264.463"
-          gradientUnits="userSpaceOnUse"
         >
           <stop stop-color="#00DC82" />
           <stop offset="1" stop-opacity="0" />
         </linearGradient>
         <linearGradient
           id="paint5_linear_199_94959"
+          gradientUnits="userSpaceOnUse"
           x1="314.196"
-          y1="40.2232"
           x2="217.813"
+          y1="40.2232"
           y2="281.562"
-          gradientUnits="userSpaceOnUse"
         >
           <stop stop-color="#00DC82" />
           <stop offset="1" stop-opacity="0" />
         </linearGradient>
         <linearGradient
           id="paint6_linear_199_94959"
+          gradientUnits="userSpaceOnUse"
           x1="202.444"
-          y1="144.3"
           x2="191.546"
+          y1="144.3"
           y2="184.293"
-          gradientUnits="userSpaceOnUse"
         >
           <stop stop-color="white" />
           <stop offset="1" stop-opacity="0" />
         </linearGradient>
         <linearGradient
           id="paint7_linear_199_94959"
+          gradientUnits="userSpaceOnUse"
           x1="202.444"
-          y1="144.3"
           x2="191.546"
+          y1="144.3"
           y2="184.293"
-          gradientUnits="userSpaceOnUse"
         >
           <stop stop-color="white" />
           <stop offset="1" stop-opacity="0" />

package/app/components/vio/form/VioFormCheckbox.vue

@@ -2,9 +2,9 @@
   <div>
     <input
       :id="`input-${formKey}`"
+      :checked="value"
       class="rounded-sm"
       type="checkbox"
-      :checked="value"
       @change="emit('change', ($event.target as HTMLInputElement).checked)"
     />
     <label class="pl-2" :for="`input-${formKey}`"><slot /></label>

package/app/components/vio/form/VioFormContact.vue

@@ -1,11 +1,11 @@
 <template>
   <VioForm
     :form="v$"
-    :is-loading="isLoading"
     :is-form-sent="isFormSent"
+    :is-loading="isLoading"
     @submit.prevent="submit"
   >
-    <input type="hidden" name="static-form-name" value="contact" />
+    <input name="static-form-name" type="hidden" value="contact" />
     <VioFormInput
       id-label="input-name"
       :placeholder="t('placeholderName')"

package/app/components/vio/form/input/VioFormInput.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
     <div
+      class="flex-wrap md:flex md:items-center"
       :class="{
         'form-input-success': success,
         'form-input-warning': warning,
         'form-input-error': value?.$error,
       }"
-      class="flex-wrap md:flex md:items-center"
     >
       <div class="mb-1 md:mb-0 md:w-1/3 md:pr-4 md:text-right">
         <label
@@ -42,13 +42,13 @@
               'rounded-r-none': $slots.icon,
             }"
             :disabled="isDisabled"
-            :placeholder="placeholder"
             :name="name || idLabelFull"
+            :placeholder="placeholder"
             :readonly="isReadonly"
             :type="type"
             :value="valueFormatter(value?.$model as string)"
-            @input="emit('input', ($event.target as HTMLInputElement)?.value)"
             @click="emit('click')"
+            @input="emit('input', ($event.target as HTMLInputElement)?.value)"
           />
           <div v-if="validationProperty && isValidatable">
             <VioFormInputIconWrapper v-if="validationProperty.$pending">

package/app/components/vio/form/input/VioFormInputEmailAddress.vue

@@ -1,9 +1,9 @@
 <template>
   <VioFormInput
     v-if="formInput"
+    :id-label="`input-${id}`"
     :is-optional="isOptional"
     :is-required="isRequired"
-    :id-label="`input-${id}`"
     :placeholder="t('globalPlaceholderEmailAddress')"
     :title="title || t('emailAddress')"
     type="email"

package/app/components/vio/form/input/VioFormInputUrl.vue

@@ -1,8 +1,8 @@
 <template>
   <VioFormInput
     v-if="formInput"
-    :is-optional="isOptional"
     :id-label="`input-${id}`"
+    :is-optional="isOptional"
     :placeholder="t('globalPlaceholderUrl')"
     :title="t('url')"
     type="url"

package/app/components/vio/icon/VioIconArrowRight.vue

@@ -1,15 +1,15 @@
 <template>
   <VioIconContainer
     fill="none"
-    viewBox="0 0 24 24"
     stroke="currentColor"
     stroke-width="1.5"
     :title="title || t('title')"
+    viewBox="0 0 24 24"
   >
     <path
+      d="M14 5l7 7m0 0l-7 7m7-7H3"
       stroke-linecap="round"
       stroke-linejoin="round"
-      d="M14 5l7 7m0 0l-7 7m7-7H3"
     />
   </VioIconContainer>
 </template>

package/app/components/vio/icon/VioIconCalendar.vue

@@ -1,15 +1,15 @@
 <template>
   <VioIconContainer
     fill="none"
-    viewBox="0 0 24 24"
     stroke="currentColor"
     :title="title || t('title')"
+    viewBox="0 0 24 24"
   >
     <path
+      d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
       stroke-linecap="round"
       stroke-linejoin="round"
       stroke-width="1.5"
-      d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
     />
   </VioIconContainer>
 </template>

package/app/components/vio/icon/VioIconChartBar.vue

@@ -1,15 +1,15 @@
 <template>
   <VioIconContainer
     fill="none"
-    viewBox="0 0 24 24"
     stroke="currentColor"
     stroke-width="1.5"
     :title="title || t('title')"
+    viewBox="0 0 24 24"
   >
     <path
+      d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
       stroke-linecap="round"
       stroke-linejoin="round"
-      d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
     />
   </VioIconContainer>
 </template>

package/app/components/vio/icon/VioIconChatOutline.vue

@@ -1,16 +1,16 @@
 <template>
   <svg
-    xmlns="http://www.w3.org/2000/svg"
     :class="classes"
     fill="none"
-    viewBox="0 0 24 24"
     stroke="currentColor"
     stroke-width="1.5"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
   >
     <path
+      d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"
       stroke-linecap="round"
       stroke-linejoin="round"
-      d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"
     />
   </svg>
 </template>

package/app/components/vio/icon/VioIconChatSolid.vue

@@ -1,9 +1,9 @@
 <template>
   <svg
-    xmlns="http://www.w3.org/2000/svg"
     :class="classes"
-    viewBox="0 0 20 20"
     fill="currentColor"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
   >
     <path
       d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z"

package/app/components/vio/icon/VioIconCheckCircle.vue

@@ -1,13 +1,13 @@
 <template>
   <VioIconContainer
-    viewBox="0 0 20 20"
     fill="currentColor"
     :title="title || t('title')"
+    viewBox="0 0 20 20"
   >
     <path
-      fill-rule="evenodd"
-      d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
       clip-rule="evenodd"
+      d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+      fill-rule="evenodd"
     />
   </VioIconContainer>
 </template>

package/app/components/vio/icon/VioIconContainer.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" :class="classes" :title="title">
+  <svg :class="classes" :title="title" xmlns="http://www.w3.org/2000/svg">
     <slot />
   </svg>
 </template>

package/app/components/vio/icon/VioIconDownload.vue

@@ -1,15 +1,15 @@
 <template>
   <VioIconContainer
     fill="none"
-    viewBox="0 0 24 24"
     stroke="currentColor"
     stroke-width="1.5"
     :title="title || t('title')"
+    viewBox="0 0 24 24"
   >
     <path
+      d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
       stroke-linecap="round"
       stroke-linejoin="round"
-      d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
     />
   </VioIconContainer>
 </template>

package/app/components/vio/icon/VioIconExclamationCircle.vue

@@ -1,13 +1,13 @@
 <template>
   <VioIconContainer
-    viewBox="0 0 20 20"
     fill="currentColor"
     :title="title || t('title')"
+    viewBox="0 0 20 20"
   >
     <path
-      fill-rule="evenodd"
-      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
       clip-rule="evenodd"
+      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
+      fill-rule="evenodd"
     />
   </VioIconContainer>
 </template>

package/app/components/vio/icon/VioIconHeart.vue

@@ -1,15 +1,15 @@
 <template>
   <VioIconContainer
     fill="none"
-    viewBox="0 0 24 24"
     stroke="currentColor"
     stroke-width="1.5"
     :title="title || t('title')"
+    viewBox="0 0 24 24"
   >
     <path
+      d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
       stroke-linecap="round"
       stroke-linejoin="round"
-      d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
     />
   </VioIconContainer>
 </template>

package/app/components/vio/icon/VioIconHome.vue

@@ -1,15 +1,15 @@
 <template>
   <VioIconContainer
     fill="none"
-    viewBox="0 0 24 24"
     stroke="currentColor"
     stroke-width="1.5"
     :title="title || t('title')"
+    viewBox="0 0 24 24"
   >
     <path
+      d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
       stroke-linecap="round"
       stroke-linejoin="round"
-      d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
     />
   </VioIconContainer>
 </template>

package/app/components/vio/icon/VioIconHourglass.vue

@@ -1,16 +1,16 @@
 <template>
   <VioIconContainer
     aria-hidden="true"
-    focusable="false"
-    data-prefix="fas"
     data-icon="hourglass"
+    data-prefix="fas"
+    focusable="false"
     role="img"
-    viewBox="0 0 384 512"
     :title="title || t('title')"
+    viewBox="0 0 384 512"
   >
     <path
-      fill="currentColor"
       d="M352 0C369.7 0 384 14.33 384 32C384 49.67 369.7 64 352 64V74.98C352 117.4 335.1 158.1 305.1 188.1L237.3 256L305.1 323.9C335.1 353.9 352 394.6 352 437V448C369.7 448 384 462.3 384 480C384 497.7 369.7 512 352 512H32C14.33 512 0 497.7 0 480C0 462.3 14.33 448 32 448V437C32 394.6 48.86 353.9 78.86 323.9L146.7 256L78.86 188.1C48.86 158.1 32 117.4 32 74.98V64C14.33 64 0 49.67 0 32C0 14.33 14.33 0 32 0H352zM111.1 128H272C282.4 112.4 288 93.98 288 74.98V64H96V74.98C96 93.98 101.6 112.4 111.1 128zM111.1 384H272C268.5 378.7 264.5 373.7 259.9 369.1L192 301.3L124.1 369.1C119.5 373.7 115.5 378.7 111.1 384V384z"
+      fill="currentColor"
     />
   </VioIconContainer>
 </template>

package/app/components/vio/icon/VioIconLightbulb.vue

@@ -1,16 +1,16 @@
 <template>
   <svg
-    xmlns="http://www.w3.org/2000/svg"
     :class="classes"
     fill="none"
-    viewBox="0 0 24 24"
     stroke="currentColor"
     stroke-width="1.5"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
   >
     <path
+      d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
       stroke-linecap="round"
       stroke-linejoin="round"
-      d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
     />
   </svg>
 </template>

package/app/components/vio/icon/VioIconMixcloud.vue

@@ -1,8 +1,8 @@
 <template>
   <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 640 512"
     :class="classes"
+    viewBox="0 0 640 512"
+    xmlns="http://www.w3.org/2000/svg"
   >
     <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
     <path

package/app/components/vio/icon/VioIconMusic.vue

@@ -1,16 +1,16 @@
 <template>
   <svg
-    xmlns="http://www.w3.org/2000/svg"
     :class="classes"
     fill="none"
-    viewBox="0 0 24 24"
     stroke="currentColor"
     stroke-width="1.5"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
   >
     <path
+      d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
       stroke-linecap="round"
       stroke-linejoin="round"
-      d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
     />
   </svg>
 </template>

package/app/components/vio/icon/VioIconPlay.vue

@@ -1,14 +1,14 @@
 <template>
   <svg
-    xmlns="http://www.w3.org/2000/svg"
     :class="classes"
-    viewBox="0 0 20 20"
     fill="currentColor"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      fill-rule="evenodd"
-      d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
       clip-rule="evenodd"
+      d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
+      fill-rule="evenodd"
     />
   </svg>
 </template>

package/app/components/vio/icon/VioIconShare.vue

@@ -1,15 +1,15 @@
 <template>
   <VioIconContainer
     fill="none"
-    viewBox="0 0 24 24"
     stroke="currentColor"
     stroke-width="1.5"
     :title="title || t('title')"
+    viewBox="0 0 24 24"
   >
     <path
+      d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z"
       stroke-linecap="round"
       stroke-linejoin="round"
-      d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z"
     />
   </VioIconContainer>
 </template>

package/app/components/vio/icon/VioIconSignIn.vue

@@ -1,15 +1,15 @@
 <template>
   <VioIconContainer
     fill="none"
-    viewBox="0 0 24 24"
     stroke="currentColor"
     stroke-width="1.5"
     :title="title || t('title')"
+    viewBox="0 0 24 24"
   >
     <path
+      d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
       stroke-linecap="round"
       stroke-linejoin="round"
-      d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
     />
   </VioIconContainer>
 </template>

package/app/components/vio/icon/VioIconTv.vue

@@ -1,15 +1,15 @@
 <template>
   <VioIconContainer
     fill="none"
-    viewBox="0 0 24 24"
     stroke="currentColor"
     stroke-width="1.5"
     :title="title || t('title')"
+    viewBox="0 0 24 24"
   >
     <path
+      d="M6 20.25h12m-7.5-3v3m3-3v3m-10.125-3h17.25c.621 0 1.125-.504 1.125-1.125V4.875c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125z"
       stroke-linecap="round"
       stroke-linejoin="round"
-      d="M6 20.25h12m-7.5-3v3m3-3v3m-10.125-3h17.25c.621 0 1.125-.504 1.125-1.125V4.875c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125z"
     />
   </VioIconContainer>
 </template>

package/app/components/vio/loader/indicator/VioLoaderIndicatorSpinner.vue

@@ -2,9 +2,9 @@
   <VioLoaderIndicator>
     <svg
       class="animate-spin"
-      xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
     >
       <circle
         class="opacity-25"
@@ -16,8 +16,8 @@
       />
       <path
         class="opacity-75"
-        fill="currentColor"
         d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        fill="currentColor"
       />
     </svg>
   </VioLoaderIndicator>

package/app/composables/networking.ts

@@ -6,10 +6,12 @@ export const useGetServiceHref = () => {
   return ({
     isSsr = true,
     name,
+    path,
     port,
   }: {
     isSsr?: boolean
     name: string
+    path?: string
     port?: number
   }) =>
     getServiceHref({
@@ -17,6 +19,7 @@ export const useGetServiceHref = () => {
       isSsr,
       isTesting,
       name,
+      path,
       port,
       stagingHost: runtimeConfig.public.vio.stagingHost,
     })
@@ -30,3 +33,13 @@ export const useHost = () => {
 
   return host
 }
+
+export const useServiceFetch = (
+  options: Parameters<ReturnType<typeof useGetServiceHref>>[0],
+) => {
+  const getServiceHref = useGetServiceHref()
+
+  return $fetch.create({
+    baseURL: getServiceHref(options),
+  })
+}

package/app/composables/strapi.ts

@@ -1,7 +1,8 @@
-export const useStrapiFetch = () => {
-  const getServiceHref = useGetServiceHref()
-
-  return $fetch.create({
-    baseURL: getServiceHref({ name: 'creal_strapi', port: 1337 }) + '/api',
+export const useStrapiFetch = (
+  options?: Parameters<ReturnType<typeof useGetServiceHref>>[0],
+) =>
+  useServiceFetch({
+    ...(options ? options : {}),
+    name: options?.name || 'strapi',
+    path: options?.path || '/api',
   })
-}

package/app/error.vue

@@ -3,10 +3,10 @@
     <!-- `NuxtLayout` can't be the root element (https://github.com/nuxt/nuxt/issues/25214) -->
     <NuxtLayout>
       <VioError
-        :status="error.status"
-        :status-text="error.statusText"
         :description="error.message"
         :stack="error.stack"
+        :status="error.status"
+        :status-text="error.statusText"
       />
     </NuxtLayout>
   </div>

package/nuxt.config.ts

@@ -143,7 +143,7 @@ export default defineNuxtConfig(
       },
       vite: {
         plugins: [
-          tailwindcss() as never, // TODO: remove typecast once tailwindcss fixes the plugin type
+          tailwindcss(),
           {
             // This plugin suppresses false-positive sourcemap warnings from Tailwind's Vite plugin
             // TODO: remove once tailwind generates sourcemaps for their transforms (https://github.com/tailwindlabs/tailwindcss/discussions/16119)

package/package.json

@@ -1,11 +1,11 @@
 {
   "dependencies": {
-    "@dargmuesli/nuxt-cookie-control": "9.1.25",
+    "@dargmuesli/nuxt-cookie-control": "9.1.28",
     "@eslint/compat": "2.1.0",
     "@heroicons/vue": "2.2.0",
     "@http-util/status-i18n": "0.9.0",
-    "@intlify/eslint-plugin-vue-i18n": "4.4.0",
-    "@lucide/vue": "1.16.0",
+    "@intlify/eslint-plugin-vue-i18n": "4.5.1",
+    "@lucide/vue": "1.17.0",
     "@nuxt/devtools": "3.2.4",
     "@nuxt/eslint": "1.15.2",
     "@nuxt/image": "2.0.0",
@@ -18,7 +18,7 @@
     "@tailwindcss/forms": "0.5.11",
     "@tailwindcss/typography": "0.5.19",
     "@tailwindcss/vite": "4.3.0",
-    "@takumi-rs/core": "1.5.1",
+    "@takumi-rs/core": "1.7.0",
     "@types/lodash-es": "4.17.12",
     "@types/nodemailer": "8.0.0",
     "@urql/core": "6.0.1",
@@ -28,26 +28,26 @@
     "@vueuse/core": "14.3.0",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
-    "eslint": "10.4.0",
+    "eslint": "10.4.1",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-compat": "7.0.2",
-    "eslint-plugin-prettier": "5.5.5",
-    "eslint-plugin-yml": "3.3.2",
+    "eslint-plugin-prettier": "5.5.6",
+    "eslint-plugin-yml": "3.4.0",
     "globals": "17.6.0",
     "jiti": "2.7.0",
     "jose": "6.2.3",
-    "nodemailer": "8.0.9",
+    "nodemailer": "8.0.10",
     "nuxt-gtag": "4.1.0",
     "nuxt-security": "2.6.0",
-    "reka-ui": "2.9.8",
-    "shadcn-nuxt": "2.7.3",
+    "reka-ui": "2.9.9",
+    "shadcn-nuxt": "2.7.4",
     "tailwind-merge": "3.6.0",
     "tw-animate-css": "1.4.0",
     "vue-sonner": "2.0.9",
-    "vue-tsc": "3.3.2"
+    "vue-tsc": "3.3.3"
   },
   "devDependencies": {
-    "@types/node": "24.12.4",
+    "@types/node": "24.13.1",
     "@urql/devtools": "2.0.3",
     "@urql/exchange-graphcache": "9.0.0",
     "@vueuse/core": "14.3.0",
@@ -55,19 +55,19 @@
     "defu": "6.1.7",
     "h3": "1.15.11",
     "lodash-es": "4.18.1",
-    "nuxt": "4.4.6",
+    "nuxt": "4.4.7",
     "pinia": "3.0.4",
     "prettier": "3.8.3",
     "prettier-plugin-tailwindcss": "0.8.0",
     "serve": "14.2.6",
     "sharp": "0.34.5",
-    "stylelint": "17.12.0",
+    "stylelint": "17.13.0",
     "stylelint-config-recommended-vue": "1.6.1",
     "stylelint-config-standard": "40.0.0",
     "stylelint-no-unsupported-browser-features": "8.1.1",
     "tailwindcss": "4.3.0",
-    "vue": "3.5.34",
-    "vue-router": "5.0.7"
+    "vue": "3.5.35",
+    "vue-router": "5.1.0"
   },
   "engines": {
     "node": "24"
@@ -97,7 +97,7 @@
     "url": "git+https://github.com/dargmuesli/vio.git"
   },
   "type": "module",
-  "version": "22.0.0-beta.1",
+  "version": "22.0.0-beta.3",
   "scripts": {
     "build": "pnpm run build:node",
     "build:node": "NUXT_PUBLIC_I18N_BASE_URL=https://app.localhost:3001 nuxt build playground",

package/server/utils/dependencies/dargstack.ts

@@ -0,0 +1 @@
+export const DARGSTACK_SECRET_UNUSED_THIRD_PARTY = 'UNSET THIRD PARTY SECRET'

package/server/utils/dependencies/index.ts

@@ -1 +1,2 @@
+export * from './dargstack'
 export * from './turnstile'

package/server/utils/networking.ts

@@ -8,10 +8,12 @@ export const useGetServiceHref = ({ event }: { event?: H3Event } = {}) => {
   return ({
     isSsr = true,
     name,
+    path,
     port,
   }: {
     isSsr?: boolean
     name: string
+    path?: string
     port?: number
   }) =>
     getServiceHref({
@@ -19,6 +21,7 @@ export const useGetServiceHref = ({ event }: { event?: H3Event } = {}) => {
       isSsr,
       isTesting,
       name,
+      path,
       port,
       stagingHost: runtimeConfig.public.vio.stagingHost,
     })

package/shared/utils/networking.ts

@@ -90,6 +90,7 @@ export const getServiceHref = ({
   isSsr = true,
   isTesting,
   name,
+  path,
   port,
   stagingHost,
 }: {
@@ -97,6 +98,7 @@ export const getServiceHref = ({
   isSsr?: boolean
   isTesting?: boolean
   name: string
+  path?: string
   port?: number
   stagingHost?: string
 }) => {
@@ -104,21 +106,22 @@ export const getServiceHref = ({
     name !== VIO_SITE_NAME ? name?.replaceAll('_', '-') : undefined
   const nameSubdomainString = nameSubdomain ? `${nameSubdomain}.` : ''
   const portString = port ? `:${port}` : ''
+  const pathString = path ? `/${path.replace(/^\/+/, '')}` : ''
 
   if (isTesting) {
-    return `${SITE_URL_TYPED.protocol}//${nameSubdomainString}${SITE_URL_TYPED.host}`
+    return `${SITE_URL_TYPED.protocol}//${nameSubdomainString}${SITE_URL_TYPED.host}${pathString}`
   }
 
   if (stagingHost) {
-    return `https://${nameSubdomainString}${stagingHost}`
+    return `https://${nameSubdomainString}${stagingHost}${pathString}`
   }
 
   if (import.meta.server && isSsr) {
-    return `http://${name}${portString}`
+    return `http://${name}${portString}${pathString}`
   }
 
   if (host) {
-    return `https://${nameSubdomainString}${host}`
+    return `https://${nameSubdomainString}${host}${pathString}`
   }
 
   throw new Error('Could not get service href!')