@dargmuesli/nuxt-vio 15.1.0 → 16.0.0-beta.1

package/assets/css/tailwind.css

@@ -7,52 +7,19 @@
 /* doiuse-disable css-cascade-layers */
 @layer base {
   /* doiuse-enable css-cascade-layers */
-  a:focus {
-    /* doiuse-disable css-nesting */
-    @apply outline-none ring; /* doiuse-enable css-nesting */
-  }
-
-  button:focus {
-    /* doiuse-disable css-nesting */
-    @apply outline-none ring; /* doiuse-enable css-nesting */
-  }
-
-  thead {
-    /* doiuse-disable css-nesting */
-    @apply vio-bg-darken sticky top-0 z-10; /* doiuse-enable css-nesting */
-  }
-
-  tbody {
-    /* doiuse-disable css-nesting */
-    @apply vio-divide-darken divide-y; /* doiuse-enable css-nesting */
-  }
-}
-
-/* doiuse-disable css-cascade-layers */
-@layer utilities {
-  /* doiuse-enable css-cascade-layers */
-  .vio-prose {
-    /* doiuse-disable css-nesting */
-    @apply prose prose-sm dark:prose-invert sm:prose-base lg:prose-lg xl:prose-xl; /* 2xl:prose-2xl */ /* doiuse-enable css-nesting */
-  }
-
-  .vio-prose-fullwidth {
-    /* doiuse-disable css-nesting */
-    @apply vio-prose max-w-full sm:max-w-full md:max-w-full xl:max-w-full 2xl:max-w-full; /* doiuse-enable css-nesting */
-  }
-
-  .vio-divide-darken {
-    /* doiuse-disable css-nesting */
-    @apply divide-background-brighten dark:divide-background-darken; /* doiuse-enable css-nesting */
-  }
-
-  .vio-bg-darken {
-    /* doiuse-disable css-nesting */
-    @apply bg-background-brighten dark:bg-background-darken; /* doiuse-enable css-nesting */
-  }
 
-  .vio-border-darken {
-    /* doiuse-disable css-nesting */
-    @apply border-background-brighten dark:border-background-darken; /* doiuse-enable css-nesting */
+  :root {
+    /* stylelint-disable plugin/no-unsupported-browser-features */
+    --color-background-bright: 255 255 255;
+    --color-background-brighten: 229 231 235;
+    --color-background-dark: 31 41 55;
+    --color-background-darken: 55 65 81;
+    --color-link-bright: 96 165 250;
+    --color-link-dark: 37 99 235;
+    --color-text-bright: 249 250 251;
+    --color-text-dark: 17 24 39;
+    --color-vio-primary-bg: 243 244 246;
+    --color-vio-primary-text: 17 24 39;
+    /* stylelint-enable plugin/no-unsupported-browser-features */
   }
 }

package/components/vio/layout/VioLayoutProse.vue

@@ -0,0 +1,21 @@
+<template>
+  <div
+    :class="[
+      'prose prose-sm dark:prose-invert sm:prose-base lg:prose-lg xl:prose-xl',
+      ...(isFullWidth
+        ? [
+            'max-w-full sm:max-w-full md:max-w-full xl:max-w-full 2xl:max-w-full',
+          ]
+        : []),
+    ]"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  isFullWidth?: boolean
+}
+withDefaults(defineProps<Props>(), {})
+</script>

package/components/vio/layout/VioLayoutTbody.vue

@@ -0,0 +1,7 @@
+<template>
+  <tbody
+    class="divide-y divide-background-brighten dark:divide-background-darken"
+  >
+    <slot />
+  </tbody>
+</template>

package/components/vio/layout/VioLayoutThead.vue

@@ -0,0 +1,7 @@
+<template>
+  <thead
+    class="sticky top-0 z-10 bg-background-brighten dark:bg-background-darken"
+  >
+    <slot />
+  </thead>
+</template>

package/components/vio/page/VioPageLegalNotice.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vio-prose m-auto">
+  <VioLayoutProse class="m-auto">
     <h1>{{ title }}</h1>
     <h2>{{ t('tmg') }}</h2>
     <address>
@@ -64,7 +64,7 @@
     <p>
       <VioLink to="https://www.e-recht24.de">{{ t('source') }}</VioLink>
     </p>
-  </div>
+  </VioLayoutProse>
 </template>
 
 <script setup lang="ts">

package/components/vio/page/VioPagePrivacyPolicy.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vio-prose m-auto">
+  <VioLayoutProse class="m-auto">
     <h1>{{ title }}</h1>
     <ol v-if="isEnabled">
       <li v-if="isEnabled.summary">
@@ -429,7 +429,7 @@
         {{ t('source') }}
       </VioLink>
     </p>
-  </div>
+  </VioLayoutProse>
 </template>
 
 <script setup lang="ts">

package/package.json

@@ -1,21 +1,21 @@
 {
   "dependencies": {
-    "@dargmuesli/nuxt-cookie-control": "8.4.19",
-    "@eslint/compat": "1.2.4",
+    "@dargmuesli/nuxt-cookie-control": "8.4.20",
+    "@eslint/compat": "1.2.5",
     "@heroicons/vue": "2.2.0",
     "@http-util/status-i18n": "0.8.1",
     "@intlify/eslint-plugin-vue-i18n": "4.0.0-next.1",
     "@nuxt/devtools": "1.7.0",
-    "@nuxt/eslint": "0.7.4",
-    "@nuxt/image": "1.8.1",
+    "@nuxt/eslint": "0.7.5",
+    "@nuxt/image": "1.9.0",
     "@nuxtjs/color-mode": "3.5.2",
     "@nuxtjs/html-validator": "1.8.2",
     "@nuxtjs/i18n": "9.1.1",
     "@nuxtjs/seo": "2.0.2",
-    "@nuxtjs/tailwindcss": "6.12.2",
+    "@nuxtjs/tailwindcss": "6.13.0",
     "@pinia/nuxt": "0.9.0",
-    "@tailwindcss/forms": "0.5.9",
-    "@tailwindcss/typography": "0.5.15",
+    "@tailwindcss/forms": "0.5.10",
+    "@tailwindcss/typography": "0.5.16",
     "@types/lodash-es": "4.17.12",
     "@urql/core": "5.1.0",
     "@urql/vue": "1.4.2",
@@ -23,8 +23,8 @@
     "@vuelidate/validators": "2.0.4",
     "clipboardy": "4.0.0",
     "dayjs": "2.0.0-alpha.4",
-    "eslint": "9.17.0",
-    "eslint-config-prettier": "9.1.0",
+    "eslint": "9.18.0",
+    "eslint-config-prettier": "10.0.1",
     "eslint-plugin-compat": "6.0.2",
     "eslint-plugin-prettier": "5.2.1",
     "eslint-plugin-yml": "1.16.0",
@@ -33,30 +33,30 @@
     "jose": "5.9.6",
     "nuxt-gtag": "3.0.2",
     "nuxt-security": "2.1.5",
-    "sweetalert2": "11.15.3",
+    "sweetalert2": "11.15.10",
     "vue-tsc": "2.2.0"
   },
   "devDependencies": {
-    "@unhead/vue": "1.11.14",
+    "@unhead/vue": "1.11.16",
     "@urql/devtools": "2.0.3",
     "@urql/exchange-graphcache": "7.2.1",
-    "consola": "3.3.3",
+    "consola": "3.4.0",
     "cookie-es": "1.2.2",
     "defu": "6.1.4",
-    "h3": "1.13.0",
+    "h3": "1.13.1",
     "lodash-es": "4.17.21",
-    "nuxt": "3.15.0",
+    "nuxt": "3.15.1",
     "pinia": "2.3.0",
     "prettier": "3.4.2",
     "prettier-plugin-tailwindcss": "0.6.9",
     "serve": "14.2.4",
     "sharp": "0.33.5",
-    "stylelint": "16.12.0",
+    "stylelint": "16.13.1",
     "stylelint-config-recommended-vue": "1.5.0",
-    "stylelint-config-standard": "36.0.1",
+    "stylelint-config-standard": "37.0.0",
     "stylelint-no-unsupported-browser-features": "8.0.2",
     "tailwindcss": "3.4.17",
-    "unhead": "1.11.14",
+    "unhead": "1.11.16",
     "vue": "3.5.13",
     "vue-router": "4.5.0"
   },
@@ -86,7 +86,7 @@
   "main": "nuxt.config.ts",
   "name": "@dargmuesli/nuxt-vio",
   "peerDependencies": {
-    "nuxt": "3.15.0",
+    "nuxt": "3.15.1",
     "vue": "3.5.13",
     "vue-router": "4.5.0"
   },
@@ -101,7 +101,6 @@
     "build": "pnpm run build:node",
     "build:node": "nuxt build .playground",
     "build:static": "nuxt generate .playground",
-    "build:static:test": "SITE_URL=https://localhost:3002 pnpm run build:static",
     "dev": "pnpm run start:dev",
     "generate": "pnpm run build:static",
     "lint:fix": "pnpm run lint:js --fix && pnpm run lint:ts --fix && pnpm run lint:style --fix",
@@ -117,5 +116,5 @@
     "start:static": "serve .playground/.output/public --ssl-cert ./.config/certificates/ssl.crt --ssl-key ./.config/certificates/ssl.key"
   },
   "type": "module",
-  "version": "15.1.0"
+  "version": "16.0.0-beta.1"
 }

package/tailwind.config.ts

@@ -1,7 +1,6 @@
 import type { ModuleOptions } from '@nuxtjs/tailwindcss'
 import formsPlugin from '@tailwindcss/forms'
 import typographyPlugin from '@tailwindcss/typography'
-import colors from 'tailwindcss/colors'
 import type { PluginAPI } from 'tailwindcss/types/config'
 
 const heading = (theme: PluginAPI['theme']): Record<string, string> => ({
@@ -11,8 +10,6 @@ const heading = (theme: PluginAPI['theme']): Record<string, string> => ({
   // set overflow truncate/ellipsis in the surrounding container, or larger fonts will be cut off due to their line-heights
 })
 
-const gray = colors.gray // or slate, zinc, neutral, stone
-
 const prose = (theme: PluginAPI['theme']) => ({
   css: {
     a: {
@@ -61,9 +58,23 @@ export default {
           marginLeft: '5px',
           width: theme('fontSize.xs'),
         },
+        'a:focus': {
+          // @apply outline-none ring
+          outline: '2px solid transparent',
+          outlineOffset: '2px',
+          boxShadow:
+            'var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)',
+        },
         address: {
           margin: theme('margin.4'),
         },
+        'button:focus': {
+          // @apply outline-none ring
+          outline: '2px solid transparent',
+          outlineOffset: '2px',
+          boxShadow:
+            'var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)',
+        },
         h1: {
           ...heading(theme),
           fontSize: theme('fontSize.4xl'),
@@ -178,23 +189,23 @@ export default {
       },
       colors: {
         background: {
-          bright: colors.white,
-          brighten: gray['200'],
-          dark: gray['800'],
-          darken: gray['700'],
+          bright: 'rgb(var(--color-background-bright))',
+          brighten: 'rgb(var(--color-background-brighten))',
+          dark: 'rgb(var(--color-background-dark))',
+          darken: 'rgb(var(--color-background-darken))',
         },
         link: {
-          bright: colors.blue['400'],
-          dark: colors.blue['600'],
+          bright: 'rgb(var(--color-link-bright))',
+          dark: 'rgb(var(--color-link-dark))',
         },
         text: {
-          bright: gray['50'],
-          dark: gray['900'],
+          bright: 'rgb(var(--color-text-bright))',
+          dark: 'rgb(var(--color-text-dark))',
         },
         vio: {
           primary: {
-            bg: gray['100'],
-            text: gray['900'],
+            bg: 'rgb(var(--color-vio-primary-bg))',
+            text: 'rgb(var(--color-vio-primary-text))',
           },
         },
       },