Initial public release

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,18 @@
+node_modules
+lib
+dist
+.nuxt
+playground/.nuxt
+
+src/runtime/css/output.css
+
+graphql/translations.graphql
+
+npmBuild/
+
+playground/translations.graphql
+
+drupal/frontend_routing.settings.yml
+
+.npm
+.idea/

.nuxtrc

@@ -0,0 +1,2 @@
+imports.autoImport=false
+typescript.includeWorkspace=true

.nvmrc

@@ -0,0 +1 @@
+v20

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "proseWrap": "always",
+  "semi": false,
+  "singleQuote": true,
+  "arrowParens": "always",
+  "printWidth": 80,
+  "trailingComma": "all"
+}

README.md

@@ -0,0 +1,148 @@
+# VuePal
+
+VuePal provides a bridge between Drupal and Vue. It comes with a set of components and
+composables to make your life easier when working with Drupal.
+
+## Frontend Routing
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  vuepal: {
+    frontendRouting: {
+      enabled: true,
+      langcodes: ['de', 'fr', 'en'],
+      outputPath: './../drupal/config/default/frontend_routing.settings.yml',
+    },
+  },
+})
+```
+
+With this feature enabled, you can create a static frontend page in Nuxt and still use all the routing features of
+Drupal in your frontend application. You can define your aliases in the frontend page using `definePageMeta`. The module
+will automatically create a Drupal configuration file that can be imported and processed by the
+[Drupal frontend_routing](https://www.drupal.org/project/frontend_routing) module.
+
+```ts [pages/static-page/example.vue]
+definePageMeta({
+  name: 'static-page-example',
+  drupalFrontendRoute: true,
+  languageMapping: {
+    de: '/de/statisch',
+    fr: '/fr/statique',
+    en: '/en/static',
+  },
+})
+```
+
+## Drupal Route
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  vuepal: {
+    drupalRoute: {
+      enabled: true,
+    },
+  },
+})
+```
+
+This option enables the `useDrupalRoute()` composable.
+This composable provides the necessary GraphQL fragment and query to fetch the route data and metatags of a Drupal page.
+
+## Admin Toolbar
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  vuepal: {
+    adminToolbar: {
+      enabled: true,
+    },
+  },
+})
+```
+
+The admin toolbar component fetches the Drupal administration menu and displays it in your frontend application.
+![toolbar.png](/screenshots/toolbar.png)
+
+### Usage
+
+```vue
+
+<template>
+  <ClientOnly>
+    <div v-if="drupalUser.accessToolbar && !isEditing">
+      <VuepalAdminToolbar :key="language" />
+    </div>
+  </ClientOnly>
+</template>
+
+
+<script setup lang="ts">
+  const route = useRoute()
+  const drupalUser = useDrupalUser()
+  const language = useCurrentLanguage()
+  const isEditing = computed(
+    () =>
+      !!(route.query.blokkliEditing || route.query.blokkliPreview) &&
+      drupalUser.value.accessToolbar,
+  )
+</script>
+```
+
+## LocalTasks
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  vuepal: {
+    localTasks: {
+      enabled: true,
+    },
+  },
+})
+```
+
+The local tasks component fetches the local tasks of a Drupal page and displays them in your frontend application.
+![localtasks.png](/screenshots/localtasks.png)
+
+```vue
+
+<template>
+  <ClientOnly>
+    <div class="flex">
+      <div class="mx-auto w-auto bg-white py-8 xl:min-w-[1174px]">
+        <VuepalLocalTasks />
+      </div>
+    </div>
+  </ClientOnly>
+</template>
+```
+
+## Full Configuration
+
+Example of a full VuePal configuration in the `nuxt.config.ts` file.
+
+```ts
+export default defineNuxtConfig({
+  vuepal: {
+    adminToolbar: {
+      enabled: true,
+    },
+    localTasks: {
+      enabled: true,
+    },
+    drupalRoute: {
+      enabled: true,
+    },
+    frontendRouting: {
+      enabled: true,
+      langcodes: ['de', 'fr', 'en'],
+      outputPath: './../drupal/config/default/frontend_routing.settings.yml',
+    },
+    devMode: {
+      enabled: true,
+      url: `https://${NUXT_REQUEST_HOST}`,
+      forceHttps: true,
+    },
+  },
+})
+```

app/vuepal.adapter.ts

@@ -0,0 +1,13 @@
+import { defineVuepalAdapter } from '#vuepal/types'
+import { computed } from '#imports'
+
+export default defineVuepalAdapter(() => {
+  return {
+    getAdminMenu() {
+      return Promise.resolve(undefined)
+    },
+    getCurrentLanguage() {
+      return computed(() => 'de')
+    },
+  }
+})

build.config.ts

@@ -0,0 +1,16 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  externals: [
+    '#imports',
+    'defu',
+    'unplugin',
+    'magic-string',
+    'estree-walker',
+    'acorn',
+    'pathe',
+    'webpack-sources',
+    'webpack-virtual-modules',
+    '@jridgewell/sourcemap-codec',
+  ],
+})

css/index.css

@@ -0,0 +1,99 @@
+@import './../src/runtime/components/AdminToolbar/Palette/index.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.vuepal-admin-toolbar {
+  @apply relative top-0 left-0 w-full bg-white shadow-md font-sans;
+  z-index: 900001;
+  background: white;
+  font-size: 14px;
+  --vuepal-environment-color: #ccc;
+  border-top: 6px solid var(--vuepal-environment-color);
+
+  a {
+    @apply flex px-15 py-10 text-black justify-between items-center hover:bg-slate-100 no-underline whitespace-nowrap;
+    svg {
+      @apply w-[14px] h-[14px];
+    }
+  }
+
+  > ul {
+    @apply flex m-0 list-none p-0;
+    margin-left: min(5vw, 32px);
+    margin-right: min(5vw, 48px);
+    ul {
+      @apply absolute bg-white list-none p-0 min-w-[200px];
+      box-shadow: 0 8px 14px rgba(0, 0, 0, 0.15);
+    }
+
+    > li > ul {
+      top: 100%;
+      left: 0;
+
+      > li ul {
+        left: 100%;
+        top: 0;
+      }
+    }
+  }
+  li {
+    position: relative;
+    &:hover {
+      > a {
+        background: #eee;
+      }
+    }
+  }
+}
+
+.vuepal-admin-toolbar-icon {
+  @apply w-18 h-18;
+  background: currentColor;
+  display: inline-block;
+  margin-right: 0.5em;
+  -webkit-mask-position: center center;
+  mask-position: center center;
+  -webkit-mask-size: 17px 17px;
+  mask-size: 17px 17px;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+
+.vuepal-admin-toolbar-link {
+  @apply py-18;
+
+  &.vp-is-first {
+    @apply py-20;
+  }
+
+  &[data-route-name='<front>'] {
+    @apply h-full;
+    padding: 0;
+    width: 54px;
+    .vuepal-admin-toolbar-icon {
+      width: 100%;
+      height: 100%;
+      -webkit-mask-size: 28px 28px;
+      mask-size: 28px 28px;
+      mask-position: 14px center;
+      background: var(--vuepal-environment-color);
+    }
+    .vuepal-admin-toolbar-text {
+      display: none;
+    }
+  }
+}
+
+.vuepal-local-tasks > ul {
+  @apply list-none flex gap-15;
+  a {
+    @apply flex items-center py-0 px-16 h-[43px] font-bold no-underline text-[15px] font-sans rounded-full;
+    &.vp-is-active,
+    &:hover {
+      background: #d9e0f9;
+      color: #043cad;
+    }
+  }
+}

eslint.config.mjs

@@ -0,0 +1,69 @@
+// @ts-check
+import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
+
+// Run `npx @eslint/config-inspector` to inspect the resolved config interactively
+export default createConfigForNuxt({
+  features: {
+    // Rules for module authors
+    tooling: true,
+    // Rules for formatting
+    stylistic: false,
+  },
+  dirs: {
+    src: ['./playground'],
+  },
+})
+  .override('nuxt/vue/rules', {
+    rules: {
+      'vue/no-v-html': 0,
+      'vue/no-v-text-v-html-on-component': 0,
+      'vue/multi-word-component-names': 0,
+      'vue/no-empty-component-block': 'error',
+      'vue/padding-line-between-blocks': 'error',
+      'vue/no-v-for-template-key': 'error',
+      'vue/prefer-true-attribute-shorthand': 'error',
+      'vue/component-api-style': 'error',
+      'vue/block-lang': [
+        'error',
+        {
+          script: {
+            lang: 'ts',
+          },
+        },
+      ],
+      'vue/block-order': [
+        'error',
+        {
+          order: [['script', 'template'], 'style'],
+        },
+      ],
+      'vue/html-self-closing': [
+        'error',
+        {
+          html: {
+            void: 'always',
+          },
+        },
+      ],
+      'vue/no-deprecated-slot-attribute': [
+        'error',
+        {
+          ignore: [],
+        },
+      ],
+    },
+  })
+  .override('nuxt/typescript/rules', {
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/ban-ts-comment': 'off',
+      '@typescript-eslint/no-empty-object-type': 'off',
+    },
+  })
+  .override('nuxt/tooling/regexp', {
+    rules: {
+      'regexp/no-super-linear-backtracking': 'off',
+      'regexp/optimal-quantifier-concatenation': 'off',
+      'regexp/no-unused-capturing-group': 'off',
+    },
+  })