@iqual/nuxt-icms 1.4.10 → 1.5.1

package/nuxt.config.ts

@@ -1,36 +1,52 @@
 import { resolve } from 'node:path'
-import resolveConfig from 'tailwindcss/resolveConfig'
-import { runtimeConfig } from './config/runtimeConfig'
+
+import easyTexts from './config/easyTexts'
+import blokkli from './config/blokkli'
 import graphqlMiddleware from './config/graphqlMiddleware'
+import languageNegotiation from './config/languageNegotiation'
 import multiCache from './config/multiCache'
-import tailwindConfig from './tailwind.config'
-import { pathPrefix, query, acceptLanguage } from 'nuxt-language-negotiation/negotiators'
+import nitro from './config/nitro'
+import postcss from './config/postcss-drupal/postcss.config.cjs'
+import routeRules from './config/routeRules'
+import runtimeConfig from './config/runtimeConfig'
+import svgIconSprite from './config/svgIconSprite'
+import vuepal from './config/vuepal'
+import { breakpoints } from './config/breakpoints'
+
+import { fileURLToPath } from 'node:url'
+import { dirname, join } from 'node:path'
+
 
-import { fileURLToPath } from 'url'
-import { dirname, join } from 'path'
 
-const fullTailwindConfig = resolveConfig(tailwindConfig)
-const tailwindColors = fullTailwindConfig.theme.colors as Record<string, any>
 const ONE_YEAR = 31_536_000
 const ONE_MONTH = 2_592_000
 const IS_DEV = process.env.NODE_ENV === 'development'
 const NUXT_REQUEST_HOST = process.env.NUXT_REQUEST_HOST
 const NUXT_IMAGE_CLOUDFLARE_BASE_URL = process.env.NUXT_IMAGE_CLOUDFLARE_BASE_URL ?? 'https://iqual.cloud'
 
-// Helper function to transform Tailwind's rgb(xx, xx, xx) colors to blökkli's theme [xx, xx, xx]
-const transformColor = (color: string): number[] => {
-  return color.substring(4, color.length - 1).replace(/ /g, '').split(',').map(Number)
-}
+
 
 const currentDir = dirname(fileURLToPath(import.meta.url))
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  devtools: { enabled: true },
-  telemetry: false,
+  blokkli,
+
+  easyTexts,
+
   graphqlMiddleware,
+  languageNegotiation,
   multiCache,
+  nitro,
+  postcss,
+  routeRules,
   runtimeConfig,
+  svgIconSprite,
+  vuepal,
+
+  devtools: { enabled: IS_DEV },
+  telemetry: false,
+
   alias: {
     '#nuxt-svg-sprite': resolve('/.nuxt/nuxt-svg-sprite'),
     'tailwind-config': resolve(__dirname, './tailwind.config.ts'),
@@ -62,16 +78,14 @@ export default defineNuxtConfig({
    */
   css: [
     join(currentDir, './assets/css/fe-fixes.css'),
-    join(currentDir, './assets/css/tailwind.css'),
   ],
 
   /**
    * Nuxt.js modules
    */
   modules: [
-    '@nuxt/test-utils/module',
-    '@formkit/nuxt',
-    '@nuxtjs/tailwindcss',
+    ...(IS_DEV ? ['@nuxt/test-utils/module'] : []),
+    '@nuxt/ui',
     'nuxt-graphql-middleware',
     'nuxt-easy-texts',
     'nuxt-page-dependencies',
@@ -81,45 +95,13 @@ export default defineNuxtConfig({
     'nuxt-svg-icon-sprite',
     '@blokkli/editor',
     'nuxt-viewport',
-    '@nuxt/eslint',
+    ...(IS_DEV ? ['@nuxt/eslint'] : []),
     '@nuxt/image',
-    'shadcn-nuxt',
     '@iqual/nuxt-icms/modules/dynamicParagraphResolver',
     '@iqual/nuxt-icms/modules/dynamicEntityComponentResolver',
     'nuxt-maplibre',
   ],
 
-  easyTexts: {
-    pattern: [
-      './components/**/*.{js,ts,vue}',
-      './pages/**/*.{js,ts,vue}',
-      './composables/**/*.{js,ts,vue}',
-      join(currentDir, './components/**/*.{js,ts,vue}'),
-      join(currentDir, './pages/**/*.{js,ts,vue}'),
-      join(currentDir, './composables/**/*.{js,ts,vue}'),
-      join(currentDir, './*.{js,ts,vue}'),
-      './*.{js,ts,vue}',
-    ],
-    generators: [
-      {
-        outputPath: './queries/translations.graphql',
-        generate: 'drupal-graphql-texts',
-      },
-    ],
-  },
-
-  shadcn: {
-    /**
-     * Prefix for all the imported component
-     */
-    prefix: '',
-    /**
-     * Directory that the component lives in.
-     * @default "./components/ui"
-     */
-    componentDir: join(currentDir, './components/ui'),
-  },
-
   image: {
     provider: 'cloudflare',
     cloudflare: {
@@ -131,47 +113,6 @@ export default defineNuxtConfig({
     checkComposableCalled: true,
   },
 
-  vuepal: {
-    frontendRouting: {
-      enabled: IS_DEV,
-      outputPath: './../drupal/config/default/frontend_routing.settings.yml',
-    },
-    adminToolbar: {
-      enabled: true,
-    },
-    localTasks: {
-      enabled: true,
-    },
-    languageSwitchLinks: {
-      enabled: true,
-    },
-    drupalRoute: {
-      enabled: true,
-      routeQueries: {
-        nodeIcmsPage: {
-          fragments: [
-            'nodeIcmsPage'
-          ]
-        },
-        slug: {
-          fragments: [
-            'nodeIcmsPage',
-          ]
-        },
-        nodeCanonical: {
-          fragments: [
-            'nodeIcmsPage',
-          ]
-        },
-      },
-    },
-    devMode: {
-      enabled: true,
-      url: `https://${NUXT_REQUEST_HOST}`,
-      forceHttps: true,
-    },
-  },
-
   $meta: {
     name: 'icms'
   },
@@ -191,9 +132,7 @@ export default defineNuxtConfig({
         'paragraphIcmsLayoutContact',
         'paragraphIcmsLayout2ColTextElements',
         'paragraphIcmsLayoutTestimonial',
-        'paragraphIcmsLayoutFlipTeasers',
         'paragraphIcmsLayoutTable',
-        'paragraphIcmsLayoutTabs',
         'paragraphIcmsLayoutFaq',
         'paragraphIcmsLayoutGallery',
         'paragraphIcmsLayoutTextImageIntro',
@@ -205,32 +144,26 @@ export default defineNuxtConfig({
         'paragraphIcmsLayoutDownloads',
         'paragraphIcmsLayoutIframe',
         'paragraphIcmsLayoutTimeline',
+        'paragraphIcmsLayoutLinkLists',
+        'paragraphIcmsLayoutCollapsible',
         // Element components
         'paragraphIcmsButtonElement',
         'paragraphIcmsCardElement',
         'paragraphIcmsFaqElement',
         'paragraphIcmsIconTextElement',
-        'paragraphIcmsTabElement',
         'paragraphIcmsTeamElement',
         'paragraphIcmsTestimonialElement',
         'paragraphIcms2ColTextElement',
         'paragraphIcmsLogoElement',
         'paragraphIcmsPartnershipElement',
         'paragraphIcmsTimelineElement',
+        'paragraphIcmsLinkListElement',
+        'paragraphIcmsCollapsibleElement',
       ]
     },
-    searchResults: {
-      fragments: [
-        'nodeIcmsPageSearchResult',
-      ]
-    }
   },
 
-  sourcemap: true,
-
-  nitro: {
-    compressPublicAssets: true,
-  },
+  sourcemap: IS_DEV,
 
   hooks: {
     'vite:extend'({ config }) {
@@ -240,8 +173,16 @@ export default defineNuxtConfig({
       }
     },
   },
+  vue: {
+    compilerOptions: {
+      skipExtendsCheck: true,
+    },
+  },
 
   vite: {
+    build: {
+      sourcemap: false,
+    },
     css: {
       devSourcemap: true,
     },
@@ -254,296 +195,18 @@ export default defineNuxtConfig({
     },
   },
 
-  /*
   typescript: {
-    strict: true,
-    typeCheck: true,
-  },
-  */
-
-  formkit: {
-    autoImport: true,
-    configFile: join(currentDir, './formkit.config.ts'),
-  },
-
-  languageNegotiation: {
-    negotiators: [
-      pathPrefix(),
-      query({ keys: ['language', 'langcode'] }),
-      acceptLanguage(),
-    ],
-    debug: false,
-  },
-
-  svgIconSprite: {
-    sprites: {
-      default: {
-        importPatterns: [
-          join(currentDir, './assets/symbols/**/*.svg'),
-          './assets/symbols/**/*.svg',
-        ],
+    // strict: true,
+    // typeCheck: true,
+    tsConfig: {
+      compilerOptions: {
+        skipLibCheck: true,
       },
     },
   },
 
-  postcss: {
-    plugins: {
-      'postcss-import': {},
-      'tailwindcss/nesting': {},
-      tailwindcss: {},
-      'postcss-hexrgba': {
-        colorFunctionNotation: 'modern',
-        transformToBareValue: true,
-      },
-      cssnano: {
-        preset: 'default',
-      },
-    },
-  },
-
-  routeRules: {
-    '/_nuxt/**': {
-      cache: {
-        maxAge: ONE_YEAR,
-      },
-      headers: {
-        'cache-control': `public,max-age=${ONE_MONTH},s-maxage=${ONE_YEAR}`,
-      },
-    },
-    '/fonts/**': {
-      cache: {
-        maxAge: ONE_YEAR,
-      },
-      headers: {
-        'cache-control': `public,max-age=${ONE_MONTH},s-maxage=${ONE_YEAR}`,
-      },
-    },
-  },
-
-  blokkli: {
-    // enableThemeEditor: true,
-    theme: {
-      accent: Object.fromEntries(
-        Object.entries(tailwindColors.primary)
-          .filter(([key]) => key !== 'DEFAULT')
-          .map(([key, rgb]) => [key, transformColor(rgb as string)])
-      ),
-      mono: Object.fromEntries(
-        Object.entries(tailwindColors.gray)
-          .filter(([key]) => key !== 'DEFAULT')
-          .map(([key, rgb]) => [key, transformColor(rgb as string)])
-      ),
-      teal: {
-        light: [216, 243, 233],
-        normal: [131, 165, 152],
-        dark: [38, 59, 51],
-      },
-      yellow: {
-        light: [251, 241, 199],
-        normal: [250, 189, 47],
-        dark: [144, 106, 20],
-      },
-      red: {
-        light: [255, 218, 214],
-        normal: [251, 73, 52],
-        dark: [142, 24, 11],
-      },
-      lime: {
-        light: [236, 236, 197],
-        normal: [184, 187, 38],
-        dark: [80, 80, 12],
-      },
-    },
-    pattern: [
-      './components/Paragraph/**/*.{js,ts,vue}',
-      join(currentDir, './components/Blokkli/**/*.{js,ts,vue}'),
-    ],
-    globalOptions: {
-      spacingTop: {
-        type: 'radios',
-        label: 'Spacing top',
-        default: 'small',
-        options: {
-          none: 'None',
-          small: 'Small',
-          large: 'Large',
-        },
-        // displayAs: 'icons',
-        // options: {
-        //   none: {
-        //     label: 'None',
-        //     icon: 'icon-blokkli-option-no-spacing',
-        //   },
-        //   small: {
-        //     label: 'Small',
-        //     icon: 'icon-blokkli-option-small-spacing-top',
-        //   },
-        //   large: {
-        //     label: 'Large',
-        //     icon: 'icon-blokkli-option-large-spacing-top',
-        //   },
-        // },
-      },
-      spacingBottom: {
-        type: 'radios',
-        label: 'Spacing bottom',
-        default: 'small',
-        options: {
-          none: 'None',
-          small: 'Small',
-          large: 'Large',
-        },
-        // displayAs: 'icons',
-        // options: {
-        //   none: {
-        //     label: 'None',
-        //     icon: 'icon-blokkli-option-no-spacing',
-        //   },
-        //   small: {
-        //     label: 'Small',
-        //     icon: 'icon-blokkli-option-small-spacing-bottom',
-        //   },
-        //   large: {
-        //     label: 'Large',
-        //     icon: 'icon-blokkli-option-large-spacing-bottom',
-        //   },
-        // },
-      },
-      colorScheme: {
-        type: 'radios',
-        label: 'Color',
-        default: 'none',
-        displayAs: 'colors',
-        options: {
-          none: { class: 'bg-white', label: 'None' },
-          dark: { class: 'bg-gray-950', label: 'dark' },
-          light: { class: 'bg-gray-100', label: 'Light' },
-          accent: { class: 'bg-primary-600', label: 'Accent' },
-        },
-      },
-      textWidth: {
-        type: 'radios',
-        label: 'Text width',
-        default: 'wide',
-        options: {
-          wide: 'Wide',
-          medium: 'Medium',
-          narrow: 'Narrow',
-        },
-      },
-      textAlign: {
-        type: 'radios',
-        label: 'Text alignment',
-        default: 'left',
-        options: {
-          left: 'Left',
-          center: 'Center',
-          right: 'Right',
-        },
-      },
-      textColumns: {
-        type: 'radios',
-        label: 'Text columns',
-        default: 'one',
-        options: {
-          one: 'One',
-          two: 'Two',
-          three: 'Three',
-        },
-      },
-      buttonAlignment: {
-        type: 'radios',
-        label: 'Button alignment',
-        default: 'left',
-        options: {
-          left: 'Left',
-          center: 'Center',
-          right: 'Right',
-        },
-      },
-      width: {
-        type: 'radios',
-        label: 'Width',
-        default: 'page',
-        options: {
-          full: 'Full-width',
-          page: 'Page-width',
-          narrow: 'Narrow',
-        },
-      },
-      textShadow: {
-        type: 'radios',
-        label: 'Text shadow',
-        default: 'none',
-        displayAs: 'colors',
-        options: {
-          none: { class: 'bg-white', label: 'None' },
-          light: { class: 'bg-gray-200', label: 'Light' },
-          dark: { class: 'bg-gray-500', label: 'Dark' },
-          darker: { class: 'bg-gray-800', label: 'Darker' },
-        },
-      },
-      colorMode: {
-        type: 'radios',
-        label: 'Color mode',
-        default: 'none',
-        displayAs: 'colors',
-        options: {
-          none: { class: 'bg-gray-200', label: 'None' },
-          dark: { class: 'bg-black', label: 'Dark' },
-          light: { class: 'bg-white', label: 'Light' },
-        },
-      },
-      reverseColumns: {
-        type: 'checkbox',
-        label: 'Reverse columns',
-        default: false,
-      },
-      showCaptions: {
-        type: 'checkbox',
-        label: 'Show captions',
-        default: true,
-      },
-      imageAlignment: {
-        type: 'radios',
-        label: 'Image Alingment',
-        default: 'center',
-        options: {
-          top: 'Top',
-          center: 'Center',
-          bottom: 'Bottom',
-        },
-      },
-    },
-    translations: {
-      en: {
-        editIndicatorLabel: 'Edit paragraphs',
-      },
-      de: {
-        editIndicatorLabel: 'Abschnitte bearbeiten',
-      },
-    },
-    chunkNames: ['global', 'rare'],
-    itemEntityType: 'paragraph',
-    storageDefaults: {
-      blockFavorites: ['text'],
-    },
-    schemaOptionsPath: IS_DEV
-      ? '../drupal/docroot/libraries/icms-blokkli-customization/data/schema.json'
-      : undefined,
-    // Make sure the editor is always rendered in German instead of the
-    // current page language.
-    forceDefaultLanguage: false,
-  },
-
   viewport: {
-    breakpoints: {
-      ...Object.fromEntries(
-        Object.entries(fullTailwindConfig.theme.screens).map((entry) => {
-          return [entry[0], parseInt(entry[1])]
-        }),
-      ),
-    },
+    breakpoints,
     defaultBreakpoints: {
       desktop: 'lg',
       tablet: 'md',
@@ -556,5 +219,13 @@ export default defineNuxtConfig({
     asyncContext: true,
   },
 
+  colorMode: {
+    preference: 'light'
+  },
+
+  maplibre: {
+    css: false
+  },
+
   compatibilityDate: '2024-08-14',
-})
+})

package/package.json

@@ -1,65 +1,59 @@
 {
   "name": "@iqual/nuxt-icms",
-  "version": "1.4.10",
+  "version": "1.5.1",
   "description": "ICMS Base",
   "type": "module",
   "private": false,
   "main": "./nuxt.config.ts",
   "scripts": {
+    "create-shade": "bun run ./scripts/create-shade.ts",
     "styles:ckeditor": "postcss --config ./config/postcss-drupal ./assets/css/ckeditor.css -o ./../../../drupal/docroot/libraries/icms-blokkli-customization/css/ckeditor.css",
     "styles:backend": "postcss --config ./config/postcss-drupal ./assets/css/backend.css -o ./../../../drupal/docroot/libraries/icms-blokkli-customization/css/backend.css",
     "styles:backend:watch": "postcss --config ./config/postcss-drupal ./assets/css/backend.css -o ./../../../drupal/docroot/libraries/icms-blokkli-customization/css/backend.css --watch"
   },
   "dependencies": {
-    "@blokkli/editor": "^1.3.4",
+    "@blokkli/editor": "2.0.0-alpha.13",
     "@elastic/elasticsearch": "^8.18.2",
-    "@formkit/addons": "^1.6.9",
-    "@formkit/icons": "^1.6.9",
-    "@formkit/inputs": "^1.6.9",
-    "@formkit/nuxt": "^1.6.9",
     "@iframe-resizer/child": "^5.4.6",
     "@iframe-resizer/vue": "^5.4.6",
+    "@nuxt/ui": "^4.4.0",
     "@nuxtjs/color-mode": "^3.5.2",
-    "@tailwindcss/container-queries": "^0.1.1",
     "@vueuse/core": "^12.8.2",
     "caniuse-lite": "^1.0.30001718",
-    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "embla-carousel-vue": "^8.6.0",
+    "culori": "^4.0.2",
     "lucide-vue-next": "^0.469.0",
-    "nuxt-easy-texts": "^2.0.0",
-    "nuxt-graphql-middleware": "^5.1.0",
-    "nuxt-language-negotiation": "^2.0.0",
-    "nuxt-maplibre": "^1.1.1",
-    "nuxt-multi-cache": "^3.4.0",
-    "nuxt-page-dependencies": "^1.1.0",
-    "nuxt-svg-icon-sprite": "^2.0.0",
+    "nuxt-easy-texts": "^2.1.1",
+    "nuxt-graphql-middleware": "^5.2.2",
+    "nuxt-language-negotiation": "^2.0.2",
+    "nuxt-maplibre": "^1.2.2",
+    "nuxt-multi-cache": "^4.0.3",
+    "nuxt-page-dependencies": "^1.2.0",
+    "nuxt-svg-icon-sprite": "^2.0.2",
     "patch-package": "^8.0.0",
-    "radix-vue": "^1.9.17",
     "swiper": "^10.3.1",
     "tailwind-merge": "^2.6.0",
     "tailwind-variants": "^0.3.1",
-    "tailwindcss-animate": "^1.0.7",
+    "tailwind-animate": "^0.2.10",
     "vue3-carousel": "0.3.1",
     "vue3-click-away": "^1.2.4",
-    "vuepal": "^3.0.1"
+    "vuepal": "^3.0.5"
   },
   "devDependencies": {
     "@nuxt/image": "^1.10.0",
     "@nuxt/scripts": "^0.11.7",
-    "@nuxtjs/tailwindcss": "^6.14.0",
+    "@tailwindcss/postcss": "^4.1.18",
     "@nuxtjs/turnstile": "1.0.0",
     "@types/iframe-resizer": "^4.0.0",
     "nuxt-viewport": "^2.3.1",
     "postcss-cli": "^11.0.1",
     "postcss-hexrgba": "github:thormeier/postcss-hexrgba",
-    "postcss-nesting": "^13.0.1",
-    "sass": "^1.89.0",
-    "shadcn-nuxt": "^0.11.4"
+    "postcss-nesting": "^14.0.0",
+    "sass": "^1.89.0"
   },
   "peerDependencies": {
-    "nuxt": "^3.17.4",
-    "vue": "^3.5.14",
-    "vite": "^6.2.3"
+    "nuxt": "^4.1.1",
+    "vue": "^3.5.21",
+    "vite": "^7.3.1"
   }
 }

package/pages/[...slug]/index.vue

@@ -1,10 +1,15 @@
 <template>
-  <component :is="pageComponent" v-bind="node"/>
+  <div>
+    <component :is="entityComponent" v-bind="entity" />
+  </div>
+  
 </template>
 
 <script lang="ts" setup>
 
-const { $resolveDynamicEntityComponent } = useNuxtApp()
+const { get } = useEntityRegistry()
+
+const entityComponent = computed(() => get(entity.value?.__typename))
 
 defineOptions({
   name: 'PageSlug',
@@ -15,13 +20,7 @@ definePageMeta({
   path: '/:slug(.*)*',
 })
 
-const { entity: node } = await useDrupalRouteQuery('slug')
-
-const contentType = computed(() => node.value?.__typename)
-
-const pageComponent = computed(() => {
-  return $resolveDynamicEntityComponent(contentType.value)
-})
+const { entity } = await useDrupalRouteQuery('slug')
 
 await renderPageDependencies()
-</script>
+</script>