@cwa/nuxt-edge 0.0.0-29696494.72f11a4

package/README.md

@@ -0,0 +1,38 @@
+<!---
+This file is auto-generate by a github hook please modify README.template.md if you don't want to lose your work
+-->
+# CWA Nuxt 3 Module (in development)
+
+[![codecov](https://codecov.io/github/components-web-app/cwa-nuxt-module/branch/feat/manager-tabs/graph/badge.svg?token=Z6GQJN413O)](https://app.codecov.io/gh/components-web-app/cwa-nuxt-module/tree/feat/manager-tabs)
+
+This module is designed to work with the [API Component Bundle](https://github.com/components-web-app/api-components-bundle) and will provide a full user-interface and utilities to easily create custom web apps with an advanced in-line content management system
+
+## CWA Module in Action
+
+### Template using this module for front-end and API Components Bundle for back-end
+https://github.com/components-web-app/components-web-app/tree/v3
+
+### Template application deployed online
+https://cwa-v3-silverback-web-apps.vercel.app/
+
+## Development
+
+- Run `pnpm run dev:prepare` to generate type stubs.
+- Use `pnpm run dev` to start [playground](./playground) in development mode.
+
+### Linting
+
+- Run `pnpm run lint` or `pnpm run lint:fix`
+
+### Testing
+
+We have built in testing using `vitest`.
+
+- To run tests as a one-off use `pnpm run test`
+- To include coverage run `pnpm run test:coverage`
+- To run tests in watch mode during development run `pnpm run test:watch`
+- If you want to check coverage updates at the same time as watching for file changes you can run `pnpm run test:watch:coverage`
+
+## Test coverage for branch `feat/manager-tabs`
+
+![Codecov sunburst image](https://codecov.io/github/components-web-app/cwa-nuxt-module/branch/feat/manager-tabs/graphs/sunburst.svg?token=Z6GQJN413O)

package/README.template.md

@@ -0,0 +1,32 @@
+# CWA Nuxt 3 Module
+
+[![codecov](https://codecov.io/github/components-web-app/cwa-nuxt-module/branch/{{ current.branch }}/graph/badge.svg?token=Z6GQJN413O)](https://app.codecov.io/gh/components-web-app/cwa-nuxt-module/tree/{{ current.branch }})
+
+This module is designed to work with the [API Component Bundle](https://github.com/components-web-app/api-components-bundle) and will provide a full user-interface and utilities to easily create custom web apps with an advanced in-line content management system
+
+## CWA Module in Action
+
+### Template using this module for front-end and API Components Bundle for back-end
+https://github.com/components-web-app/components-web-app
+
+## Development
+
+- Run `pnpm run dev:prepare` to generate type stubs.
+- Use `pnpm run dev` to start [playground](./playground) in development mode.
+
+### Linting
+
+- Run `pnpm run lint` or `pnpm run lint:fix`
+
+### Testing
+
+We have built in testing using `vitest`.
+
+- To run tests as a one-off use `pnpm run test`
+- To include coverage run `pnpm run test:coverage`
+- To run tests in watch mode during development run `pnpm run test:watch`
+- If you want to check coverage updates at the same time as watching for file changes you can run `pnpm run test:watch:coverage`
+
+## Test coverage for branch `{{ current.branch }}`
+
+![Codecov sunburst image](https://codecov.io/github/components-web-app/cwa-nuxt-module/branch/{{ current.branch }}/graphs/sunburst.svg?token=Z6GQJN413O)

package/dist/layer/_components/TextButton.vue

@@ -0,0 +1,13 @@
+<template>
+  <button
+    class="cwa:cursor-pointer cwa:underline cwa:flex cwa:items-center cwa:gap-x-2 cwa:group cwa:disabled:no-underline"
+  >
+    <slot />
+  </button>
+</template>
+
+<script lang="ts" setup>
+defineSlots<{
+  default(): any
+}>()
+</script>

package/dist/layer/error.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { NuxtError } from 'nuxt/app'
+
+defineProps<{
+  error: NuxtError
+}>()
+</script>
+
+<template>
+  <NuxtLayout>
+    <CwaErrorPage :error="error" />
+  </NuxtLayout>
+</template>

package/dist/layer/layouts/CwaRootLayout.vue

@@ -0,0 +1,172 @@
+<template>
+  <div
+    id="cwa-root-layout"
+    ref="rootLayout"
+    class="cwa:relative cwa:h-full cwa:flex cwa:flex-col"
+    @contextmenu="closeContextMenu"
+  >
+    <ClientOnly>
+      <LazyCwaAdminHeader v-if="showAdmin" />
+      <OutdatedContentNotice
+        v-else
+        class="cwa:absolute cwa:top-0 cwa:mt-1.5 cwa:left-1/2 cwa:-translate-x-1/2 cwa:z-50"
+      />
+    </ClientOnly>
+    <component
+      :is="resolvedComponent"
+      v-if="resolvedComponent"
+      class="cwa:relative"
+      @click.stop="onLayoutClick"
+      @contextmenu.stop="onLayoutContextMenu"
+    >
+      <div
+        ref="page"
+        class="cwa:grow"
+        @click.stop="onPageClick"
+        @contextmenu.stop="onPageContextMenu"
+      >
+        <slot />
+      </div>
+    </component>
+    <ClientOnly>
+      <template v-if="showAdmin">
+        <LazyCwaAdminResourceManager ref="resourceManager" />
+        <LayoutPageOverlay
+          v-if="$cwa.admin.isEditing && page && rootLayout"
+          :page="page"
+          :layout="rootLayout"
+        />
+        <teleport to="body">
+          <DialogsWrapper />
+        </teleport>
+      </template>
+    </ClientOnly>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, getCurrentInstance, watch, nextTick } from 'vue'
+import { DialogsWrapper } from 'vuejs-confirm-dialog'
+import { useRouter } from 'vue-router'
+import { useWindowScroll } from '@vueuse/core'
+import { useCwa, useHead } from '#imports'
+import { LazyCwaAdminHeader, LazyCwaAdminResourceManager, LazyCwaDefaultLayout } from '#components'
+import OutdatedContentNotice from '#cwa/templates/components/main/admin/header/_parts/OutdatedContentNotice.vue'
+import type { GlobalComponentNames } from '#cwa/types'
+import LayoutPageOverlay from '#cwa/templates/components/main/admin/resource-manager/LayoutPageOverlay.vue'
+
+const $cwa = useCwa()
+const currentRoute = useRouter().currentRoute
+const resourceManager = ref<null | InstanceType<typeof LazyCwaAdminResourceManager>>(null)
+const page = ref<null | HTMLElement>(null)
+const rootLayout = ref<null | HTMLElement>(null)
+const instance = getCurrentInstance()
+
+const cwaPageMeta = computed(() => {
+  return currentRoute.value.meta?.cwa
+})
+
+function callResourceManagerHandler(handler: 'contextMenuHandler' | 'clickHandler', e: MouseEvent, type: 'layout' | 'page') {
+  resourceManager.value && resourceManager.value[handler](e, type)
+}
+
+function closeContextMenu(e: MouseEvent) {
+  resourceManager.value && resourceManager.value.closeContextMenu(e)
+}
+
+function onLayoutContextMenu(e: MouseEvent) {
+  callResourceManagerHandler('contextMenuHandler', e, 'layout')
+}
+
+function onPageContextMenu(e: MouseEvent) {
+  callResourceManagerHandler('contextMenuHandler', e, 'page')
+}
+
+function onPageClick(e: MouseEvent) {
+  callResourceManagerHandler('clickHandler', e, 'page')
+}
+
+function onLayoutClick(e: MouseEvent) {
+  callResourceManagerHandler('clickHandler', e, 'layout')
+}
+
+const layoutResource = computed(() => {
+  return $cwa.resources.layout.value
+})
+
+const layoutUiComponent = computed<GlobalComponentNames>(() => {
+  return cwaPageMeta.value?.staticLayout || (layoutResource.value?.data?.uiComponent as GlobalComponentNames) || LazyCwaDefaultLayout
+})
+
+// Whether the current context resolves to a named layout component (not falling back to default).
+const hasNamedLayout = computed(() => !!(cwaPageMeta.value?.staticLayout || layoutResource.value?.data?.uiComponent))
+
+// Track the last confirmed real layout component so we can avoid a brief flash back to the
+// unstyled default during navigation. The flash occurs when the early-switch fires before the
+// route resource's HTTP response has arrived: layoutIri is defined (we know the new layout IRI
+// from the page resource) but layoutResource.data is still undefined (the layout entity hasn't
+// been fetched yet), causing layoutUiComponent to momentarily fall back to LazyCwaDefaultLayout.
+const stableLayoutUiComponent = ref<GlobalComponentNames | undefined>(hasNamedLayout.value ? layoutUiComponent.value : undefined)
+watch(hasNamedLayout, (isNamed) => {
+  if (isNamed) {
+    stableLayoutUiComponent.value = layoutUiComponent.value
+  }
+})
+
+// todo: adjust to not be global https://github.com/nuxt/nuxt/issues/14036#issuecomment-2110180751
+const resolvedComponent = computed(() => {
+  // todo: add checks to ensure component exists - otherwise output a warning and/or default
+  if (typeof instance?.appContext.components !== 'object') {
+    return LazyCwaDefaultLayout
+  }
+  // If we're momentarily without a named layout but we know a layout IRI exists (the layout
+  // entity data hasn't arrived yet), hold the last known real layout to avoid a flash back
+  // to the unstyled default during navigation.
+  if (!hasNamedLayout.value && $cwa.resources.layoutIri.value && stableLayoutUiComponent.value) {
+    return stableLayoutUiComponent.value
+  }
+  return layoutUiComponent.value
+})
+
+const cachedWindowScroll = ref<{ x: number, y: number }>()
+const windowScroll = useWindowScroll()
+
+watch(() => $cwa.admin.isEditing, () => {
+  cachedWindowScroll.value = {
+    x: windowScroll.x.value,
+    y: windowScroll.y.value,
+  }
+}, {
+  flush: 'pre',
+})
+
+watch(() => $cwa.admin.isEditing, async () => {
+  // when lots of elements on the page are replaced with drafts, it can cause the scroll to revert to the top of the page. Prevent this.
+  // we may need to wait for other components to have loaded in from drafts... todo: have a think about draft component loading and taking some time.
+  await nextTick()
+  setTimeout(() => {
+    if (cachedWindowScroll.value) {
+      window.scrollTo(cachedWindowScroll.value.x, cachedWindowScroll.value.y)
+      cachedWindowScroll.value = undefined
+    }
+  }, 10)
+}, {
+  flush: 'post',
+})
+
+const showAdmin = $cwa.auth.isAdmin
+// resolve the store inside setup
+const siteConfigVar = $cwa.siteConfig.config
+useHead({
+  titleTemplate: () => {
+    if (siteConfigVar.concatTitle) {
+      return '%s %separator %siteName'
+    }
+    return '%s'
+  },
+})
+
+defineSlots<{
+  default(): any
+}>()
+</script>

package/dist/layer/nuxt.config.ts

@@ -0,0 +1,8 @@
+import { defineNuxtConfig } from 'nuxt/config'
+import { fileURLToPath } from 'node:url'
+
+export default defineNuxtConfig({
+  modules: [
+    fileURLToPath(new URL('./../module', import.meta.url)),
+  ],
+})

package/dist/layer/pages/_cwa/[cwaPage0].vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { definePageMeta } from '#imports'
+import CwaPage from '#cwa/templates/cwa-page.vue'
+import { options } from '#build/cwa-options'
+
+definePageMeta({
+  name: '_cwa-resource-page',
+  cwa: {
+    disabled: false,
+    admin: false,
+  },
+  layout: options.layoutName || 'cwa-root-layout',
+})
+</script>
+
+<template>
+  <CwaPage v-bind="$props" />
+</template>

package/dist/layer/pages/_cwa/index/composables/useDataList.ts

@@ -0,0 +1,50 @@
+import { onMounted, ref } from 'vue'
+import { useCwa } from '#cwa/composables/cwa'
+import type { PageDataMetadataResource } from '#cwa/storage/stores/api-documentation/state'
+
+export const useDataList = () => {
+  const $cwa = useCwa()
+  const dataTypes = ref<PageDataMetadataResource[]>([])
+  const isLoadingDataTypes = ref(true)
+
+  function fqcnToEntrypointKey(fqcn: string) {
+    // e.g. App\\Entity\\BlogArticleData -> blogArticleData
+    const className = fqcn.split('\\').pop()
+    if (!className) {
+      return
+    }
+    return className.charAt(0).toLowerCase() + className.slice(1)
+  }
+
+  function displayPageDataClassName(cls: string) {
+    const clsName = cls.split('\\').pop()
+    const configName = clsName ? $cwa.pageDataConfig?.[clsName]?.name : undefined
+    return configName || clsName || cls
+  }
+
+  onMounted(async () => {
+    if (!$cwa.auth.user?.['@id']) {
+      return
+    }
+    isLoadingDataTypes.value = true
+    // need to fetch a resource to get the docs from link header if not set - user should always be there as we are logged in
+    await $cwa.fetchResource({
+      path: $cwa.auth.user?.['@id'],
+    })
+    const docs = await $cwa.getApiDocumentation()
+    const allMetadata = docs?.pageDataMetadata?.['member']
+    if (!allMetadata) {
+      isLoadingDataTypes.value = false
+      return
+    }
+    dataTypes.value = allMetadata.filter(data => (!data.resourceClass.endsWith('\\AbstractPageData')))
+    isLoadingDataTypes.value = false
+  })
+
+  return {
+    displayPageDataClassName,
+    dataTypes,
+    fqcnToEntrypointKey,
+    isLoadingDataTypes,
+  }
+}

package/dist/layer/pages/_cwa/index/composables/useDataType.ts

@@ -0,0 +1,41 @@
+import { computed, type MaybeRef, toValue } from 'vue'
+import { useRoute } from 'vue-router'
+import { useCwa } from '#cwa/composables/cwa'
+
+export const useDataType = (dataClass: MaybeRef<string> | undefined = undefined) => {
+  const $cwa = useCwa()
+  const route = useRoute()
+  // todo: getStringFromParam is a function used localised in a few places, generalise it
+  function getStringFromParam(paramName: string): string {
+    const paramValue = route.params[paramName]
+    return (Array.isArray(paramValue) ? paramValue[0] : paramValue) || ''
+  }
+
+  const dataType = computed<string>(() => {
+    if (dataClass) return toValue(dataClass)
+    return getStringFromParam('type')
+  })
+  const dataTypeClassName = computed(() => {
+    if (!dataType.value) {
+      return
+    }
+    return dataType.value.charAt(0).toUpperCase() + dataType.value.slice(1)
+  })
+  const pageDataConfig = computed(() => {
+    if (!dataTypeClassName.value) return
+    return $cwa.pageDataConfig?.[dataTypeClassName.value]
+  })
+  const pageDataClassName = computed<string>(() => {
+    if (!dataTypeClassName.value) {
+      return 'Unknown'
+    }
+    return pageDataConfig.value?.name || dataType.value
+  })
+
+  return {
+    dataTypeClassName,
+    dataType,
+    pageDataClassName,
+    pageDataConfig,
+  }
+}

package/dist/layer/pages/_cwa/index/composables/useDynamicPageLoader.ts

@@ -0,0 +1,28 @@
+import { ref } from 'vue'
+import type { CwaResource } from '#cwa/resources/resource-utils'
+import { useCwa } from '#imports'
+
+export const useDynamicPageLoader = () => {
+  const $cwa = useCwa()
+  const loadingDynamicPages = ref(false)
+  const currentRequestId = ref(0)
+  const dynamicPages = ref<CwaResource[]>()
+
+  async function loadDynamicPageOptions() {
+    const thisRequestId = currentRequestId.value + 1
+    currentRequestId.value = thisRequestId
+    loadingDynamicPages.value = true
+    const { response } = $cwa.fetch({ path: '/_/pages?isTemplate=true', noQuery: true })
+    const { _data: data } = await response
+    if (thisRequestId === currentRequestId.value) {
+      data && (dynamicPages.value = data['member'])
+      loadingDynamicPages.value = false
+    }
+    return dynamicPages
+  }
+
+  return {
+    loadDynamicPageOptions,
+    dynamicPages,
+  }
+}

package/dist/layer/pages/_cwa/index/composables/useItemPage.ts

@@ -0,0 +1,200 @@
+import { computed, isRef, onMounted, ref, watch } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import dayjs from 'dayjs'
+import { useCwaResourceRoute } from '#cwa/composables/useCwaResourceRoute'
+import type { CwaResource } from '#cwa/resources/resource-utils'
+import { useCwa } from '#cwa/composables/cwa'
+import { ErrorType } from '#cwa/storage/stores/error/state'
+import type { ApiResourceEvent } from '#cwa/resources/resources-manager'
+
+export type TempCwaResource = Omit<CwaResource, '@id' | '_metadata'>
+
+type StartsWithHash = `#${string}`
+
+type UseItemOps = {
+  createEndpoint: string | Ref<string>
+  emit: ((evt: 'close') => void) & ((evt: 'reload') => void)
+  resourceType: string
+  defaultResource: Omit<TempCwaResource, '@type'>
+  validate?: (data: any) => boolean | string
+  endpoint?: Ref<string | undefined>
+  routeHashAfterAdd?: ComputedRef<StartsWithHash>
+  iri?: Ref<string | undefined>
+  excludeFields?: string[]
+}
+
+export const useItemPage = ({ emit, resourceType, defaultResource, createEndpoint, validate, endpoint: userDefinedEndpoint, routeHashAfterAdd, iri, excludeFields }: UseItemOps) => {
+  const $cwa = useCwa()
+  const router = useRouter()
+  const route = useRoute()
+
+  function getStringFromParam(paramName: string): string {
+    const paramValue = route.params[paramName]
+    return (Array.isArray(paramValue) ? paramValue[0] : paramValue) || ''
+  }
+
+  const endpoint = computed(() => userDefinedEndpoint?.value || getStringFromParam('iri'))
+  if (!endpoint.value) {
+    throw new Error('No Endpoint Found For useItemPage composable')
+  }
+
+  const isLoading = ref(true)
+  const isUpdating = ref(false)
+  const localResourceData = ref<TempCwaResource | CwaResource>()
+  const resourceIri = computed(() => (iri?.value || endpoint.value))
+
+  const isAdding = computed(() => endpoint.value === 'add')
+  const apiState = computed(() => (isAdding.value ? undefined : $cwa.resources.getResource(resourceIri.value).value?.apiState))
+  const resource = computed(() => isAdding.value ? localResourceData.value : $cwa.resources.getResource(resourceIri.value).value?.data)
+
+  function formatDate(dateStr: string) {
+    return dayjs(dateStr).format('DD/MM/YY @ HH:mm UTCZ')
+  }
+
+  async function loadResource() {
+    if (isAdding.value) {
+      localResourceData.value = {
+        '@type': resourceType,
+        ...defaultResource,
+      }
+      return localResourceData.value
+    }
+    const fetchProps = {
+      path: endpoint.value,
+      iri: iri?.value,
+      shallowFetch: true,
+    }
+    const loadedResource = await $cwa.fetchResource(fetchProps)
+    isLoading.value = false
+    return loadedResource
+  }
+
+  async function deleteResource(refreshEndpoints?: string[] | undefined, requestCompleteFn?: ApiResourceEvent['requestCompleteFn']) {
+    isUpdating.value = true
+    await $cwa.resourcesManager.deleteResource({
+      endpoint: iri?.value || endpoint.value,
+      refreshEndpoints,
+      requestCompleteFn,
+      saveCompleteFn: () => {
+        // if in cwa view
+        emit('reload')
+        emit('close')
+      },
+    })
+    isUpdating.value = false
+  }
+
+  function saveTitle() {
+    if (isAdding.value) {
+      return
+    }
+    return saveResource()
+  }
+
+  async function saveResource(close = false, extraData?: Record<string, any>) {
+    if (!localResourceData.value) {
+      return
+    }
+    if (validate) {
+      const result = validate(localResourceData.value)
+      if (result !== true) {
+        if (result !== false) {
+          $cwa.resourcesManager.addError({
+            type: ErrorType.VALIDATION,
+            timestamp: (new Date()).getTime(),
+            statusCode: 0,
+            detail: result,
+            violations: [
+              {
+                message: result,
+                property: 'plainPassword',
+              },
+            ],
+          })
+        }
+        return
+      }
+    }
+    const doRequest = async () => {
+      const data: { [key: string]: any } = {
+        ...localResourceData.value,
+        ...extraData,
+      }
+      if (excludeFields) {
+        for (const field of excludeFields) {
+          data[field] && (delete data[field])
+        }
+      }
+      if (isAdding.value) {
+        const newResource = await $cwa.resourcesManager.createResource({
+          endpoint: isRef(createEndpoint) ? createEndpoint.value : createEndpoint,
+          data,
+          source: 'admin-modal',
+        })
+        if (newResource) {
+          emit('reload')
+          if (close) {
+            emit('close')
+          }
+          else {
+            router.push({ name: route.name, params: { iri: newResource['@id'] }, query: route.query, hash: routeHashAfterAdd?.value })
+          }
+        }
+        return newResource
+      }
+
+      const updatedResource = await $cwa.resourcesManager.updateResource({
+        endpoint: iri?.value || endpoint.value,
+        data,
+      })
+      if (close && updatedResource) {
+        emit('close')
+      }
+      return updatedResource
+    }
+
+    isUpdating.value = true
+    const resource = await doRequest()
+    isUpdating.value = false
+    return resource
+  }
+
+  function syncLocalResourceWithStore(newResource?: TempCwaResource | undefined) {
+    const storeResource = newResource || resource.value
+    if (!isAdding.value && storeResource) {
+      localResourceData.value = { ...storeResource }
+    }
+  }
+
+  watch(resource, syncLocalResourceWithStore)
+  watch(endpoint, loadResource)
+
+  onMounted(async () => {
+    await loadResource()
+    if (!resource.value || (resourceType !== undefined && resource.value['@type'] !== resourceType)) {
+      emit('close')
+      isLoading.value = false
+      return
+    }
+    isLoading.value = false
+  })
+
+  const { getInternalResourceLink } = useCwaResourceRoute()
+
+  return {
+    isLoading,
+    isUpdating,
+    resource,
+    localResourceData,
+    isAdding,
+    apiState,
+    formatDate,
+    deleteResource,
+    saveTitle,
+    saveResource,
+    loadResource,
+    resetResource: syncLocalResourceWithStore,
+    getInternalResourceLink,
+  }
+}

package/dist/layer/pages/_cwa/index/composables/useListPage.ts

@@ -0,0 +1,44 @@
+import { useRoute, useRouter } from 'vue-router'
+import type { RouteLocationRaw } from 'vue-router'
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+import type ListContent from '#cwa/templates/components/core/admin/ListContent.vue'
+
+export const useListPage = (listContent: Ref<InstanceType<typeof ListContent> | null>, clearPageNumberQuery?: boolean) => {
+  const router = useRouter()
+  const route = useRoute()
+
+  function triggerReload() {
+    listContent.value?.reloadItems()
+  }
+
+  function goToAdd() {
+    router.push(computedItemLink.value('add'))
+  }
+
+  const computedItemLink = computed(() => {
+    return (iri: string, routeName?: string, hash?: string, params?: { [key: string]: string }): RouteLocationRaw => {
+      const currentRouteName = routeName || route.name?.toString()
+      if (!currentRouteName) {
+        return '#'
+      }
+      const upperRouteName = currentRouteName.replace(/-iri$/, '')
+
+      if (!params) {
+        params = {}
+      }
+      params.iri = iri
+
+      const query = { ...route.query }
+      clearPageNumberQuery && delete query.page
+
+      return { name: `${upperRouteName}-iri`, params, query, hash }
+    }
+  })
+
+  return {
+    goToAdd,
+    triggerReload,
+    computedItemLink,
+  }
+}