@cwa/nuxt-edge 1.0.0-29138192.e49c1a0

package/dist/runtime/templates/components/main/ComponentGroup.Util.Synchronizer.js

@@ -0,0 +1,69 @@
+import { watch } from "vue";
+import { isEqual } from "lodash-es";
+import { CwaResourceTypes, getResourceTypeFromIri } from "../../../resources/resource-utils.js";
+import { CwaResourceApiStatuses } from "../../../storage/stores/resources/state.js";
+import { useCwa } from "../../../composables/cwa.js";
+const resourceTypeProperty = {
+  [CwaResourceTypes.PAGE]: "pages",
+  [CwaResourceTypes.LAYOUT]: "layouts",
+  [CwaResourceTypes.COMPONENT]: "components"
+};
+export class ComponentGroupUtilSynchronizer {
+  resourcesManager;
+  resources;
+  auth;
+  watchStopHandle;
+  constructor() {
+    const { auth, resources, resourcesManager } = useCwa();
+    this.resourcesManager = resourcesManager;
+    this.resources = resources;
+    this.auth = auth;
+  }
+  createSyncWatcher(ops) {
+    this.watchStopHandle = watch(
+      [this.resources.isLoading, this.auth.signedIn, ops.resource],
+      async ([isLoading, signedIn, resource]) => {
+        if (!isLoading && signedIn) {
+          if (!resource) {
+            await this.createComponentGroup(ops.location, ops.fullReference, ops.allowedComponents);
+          } else if (resource.apiState.status === CwaResourceApiStatuses.SUCCESS) {
+            await this.updateAllowedComponents(ops.allowedComponents, resource);
+          }
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+  }
+  stopSyncWatcher() {
+    this.watchStopHandle?.();
+  }
+  async createComponentGroup(iri, fullReference, allowedComponents) {
+    const locationResourceType = getResourceTypeFromIri(iri);
+    const locationProperty = resourceTypeProperty[locationResourceType];
+    const postData = {
+      reference: fullReference.value,
+      location: iri,
+      allowedComponents
+    };
+    if (locationProperty) {
+      postData[locationProperty] = [iri];
+    }
+    await this.resourcesManager.createResource({
+      endpoint: "/_/component_groups",
+      data: postData
+    });
+  }
+  async updateAllowedComponents(allowedComponents, resource) {
+    if (isEqual(allowedComponents, resource?.data?.allowedComponents ?? null)) {
+      return;
+    }
+    await this.resourcesManager.updateResource({
+      endpoint: resource?.data["@id"],
+      data: {
+        allowedComponents
+      }
+    });
+  }
+}

package/dist/runtime/templates/components/main/ComponentGroup.spec.ts.snap

@@ -0,0 +1,59 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ComponentGroup > snapshots > should match snapshot IF loader is shown 1`] = `
+<div
+  class="component-group-placeholder"
+>
+  <spinner-stub
+    show="true"
+  />
+</div>
+`;
+
+exports[`ComponentGroup > snapshots > should match snapshot IF resource is not found 1`] = `<!--v-if-->`;
+
+exports[`ComponentGroup > snapshots > should match snapshot IF there are component positions defined 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <!--cwa-start-->
+  
+  <resourceloader-stub
+    class=""
+    componentprefix=""
+    data-sort-value="mock_sort_pos1"
+    iri="pos1"
+    uicomponent="[object Object]"
+  />
+  <resourceloader-stub
+    class=""
+    componentprefix=""
+    data-sort-value="mock_sort_pos2"
+    iri="pos2"
+    uicomponent="[object Object]"
+  />
+  <resourceloader-stub
+    class=""
+    componentprefix=""
+    data-sort-value="mock_sort_pos3"
+    iri="pos3"
+    uicomponent="[object Object]"
+  />
+  
+  <!--cwa-end-->
+  
+</div>
+`;
+
+exports[`ComponentGroup > snapshots > should match snapshot IF there are no component positions defined 1`] = `<!--v-if-->`;
+
+exports[`ComponentGroup > snapshots > should match snapshot IF user is logged in but there are no positions 1`] = `
+<div
+  class="cwa:flex cwa:justify-center cwa:border-2 cwa:border-dashed cwa:border-gray-200 cwa:p-5"
+>
+  <lazyhotspot-stub
+    screen-reader-action="Add component position"
+  />
+</div>
+`;

package/dist/runtime/templates/components/main/ComponentGroup.vue

@@ -0,0 +1,107 @@
+<template>
+  <div
+    v-if="showLoader"
+    class="component-group-placeholder"
+  >
+    <Spinner :show="true" />
+  </div>
+  <template v-else-if="componentPositions?.length">
+    <!--cwa-start-->
+    <ResourceLoader
+      v-for="positionIri of componentPositions"
+      :key="getResourceKey(positionIri)"
+      :data-sort-value="$cwa.resources.getPositionSortDisplayNumber(positionIri)"
+      :iri="positionIri"
+      :ui-component="ComponentPosition"
+      :class="nestedClasses"
+    />
+    <!--cwa-end-->
+  </template>
+  <div
+    v-else-if="signedInAndResourceExists"
+    class="cwa:flex cwa:justify-center cwa:border-2 cwa:border-dashed cwa:border-gray-200 cwa:p-5"
+  >
+    <LazyHotSpot
+      screen-reader-action="Add component position"
+      :iri="iri"
+    />
+  </div>
+</template>
+
+<script setup>
+import {
+  computed,
+  onMounted,
+  onBeforeUnmount,
+  defineAsyncComponent
+} from "vue";
+import { ComponentGroupUtilSynchronizer } from "#cwa/runtime/templates/components/main/ComponentGroup.Util.Synchronizer";
+import {
+  useComponentGroupPositions
+} from "#cwa/runtime/templates/components/main/ComponentGroup.Util.Positions";
+import ComponentPosition from "#cwa/runtime/templates/components/core/ComponentPosition.vue";
+import ResourceLoader from "#cwa/runtime/templates/components/core/ResourceLoader.vue";
+import { CwaResourceApiStatuses } from "#cwa/runtime/storage/stores/resources/state";
+import { useCwa } from "#cwa/runtime/composables/cwa";
+import { useCwaResourceManageable } from "#cwa/runtime/composables/cwa-resource-manageable";
+import Spinner from "#cwa/runtime/templates/components/utils/Spinner.vue";
+const LazyHotSpot = defineAsyncComponent({
+  suspensible: false,
+  loader: () => import("#cwa/runtime/templates/components/utils/HotSpot.vue")
+});
+const iri = computed(() => resource.value?.data?.["@id"]);
+const $cwa = useCwa();
+useCwaResourceManageable(iri);
+const props = defineProps({
+  reference: { type: String, required: true },
+  location: { type: String, required: true },
+  allowedComponents: { type: [Array, null], required: false, default: null }
+});
+const fullReference = computed(() => {
+  const locationResource = $cwa.resources.getResource(props.location);
+  if (!locationResource.value) {
+    return;
+  }
+  return `${props.reference}_${props.location}`;
+});
+const resource = computed(() => {
+  if (!fullReference.value) {
+    return;
+  }
+  return $cwa.resources.getComponentGroupByReference(fullReference.value);
+});
+const signedInAndResourceExists = computed(() => {
+  return $cwa.auth.signedIn.value && !!resource.value?.data && $cwa.admin.isEditing;
+});
+const showLoader = computed(() => {
+  if (!$cwa.resources.isLoading.value) {
+    return false;
+  }
+  if (!resource.value) {
+    return true;
+  }
+  return !resource.value?.data && resource.value?.apiState.status === CwaResourceApiStatuses.IN_PROGRESS;
+});
+const componentGroupSynchronizer = new ComponentGroupUtilSynchronizer();
+const { groupIsReordering, componentPositions } = useComponentGroupPositions(iri, $cwa);
+const nestedClasses = computed(() => {
+  if (!groupIsReordering.value) {
+    return;
+  }
+  return ["cwa:is-reordering"];
+});
+function getResourceKey(positionIri) {
+  return `ResourceLoaderGroupPosition_${iri.value}_${positionIri}`;
+}
+onMounted(() => {
+  componentGroupSynchronizer.createSyncWatcher({
+    resource,
+    location: props.location,
+    fullReference,
+    allowedComponents: props.allowedComponents
+  });
+});
+onBeforeUnmount(() => {
+  componentGroupSynchronizer.stopSyncWatcher();
+});
+</script>

package/dist/runtime/templates/components/main/ComponentGroup.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    reference: string;
+    location: string;
+    allowedComponents?: string[] | null;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    allowedComponents: string[] | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/templates/components/main/CwaLink.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { computed } from "vue";
+import { defineNuxtLink } from "#app";
+import { useCwa } from "#imports";
+const props = defineProps({
+  custom: { type: null, required: false },
+  to: { type: null, required: false },
+  href: { type: null, required: false },
+  external: { type: Boolean, required: false },
+  target: { type: [String, Object, null], required: false },
+  rel: { type: [String, Object, null], required: false },
+  noRel: { type: Boolean, required: false },
+  prefetchedClass: { type: String, required: false },
+  prefetch: { type: Boolean, required: false },
+  prefetchOn: { type: [String, Object], required: false },
+  noPrefetch: { type: Boolean, required: false },
+  trailingSlash: { type: String, required: false },
+  activeClass: { type: String, required: false },
+  exactActiveClass: { type: String, required: false },
+  ariaCurrentValue: { type: String, required: false },
+  viewTransition: { type: Boolean, required: false },
+  replace: { type: Boolean, required: false }
+});
+const $cwa = useCwa();
+const CwaLinkComponent = defineNuxtLink({
+  componentName: "CwaLink"
+});
+const cwaLink = CwaLinkComponent.useLink(props);
+const target = computed(() => {
+  if (props.target) {
+    return props.target;
+  }
+  return cwaLink.isExternal.value ? "_blank" : "_self";
+});
+function handleClick(e) {
+  if (!cwaLink.isExternal.value) {
+    return;
+  }
+  $cwa.navigationDisabled && e.preventDefault();
+}
+</script>
+
+<template>
+  <CwaLinkComponent
+    v-bind="props"
+    :target="target"
+    @click="handleClick"
+  >
+    <slot />
+  </CwaLinkComponent>
+</template>

package/dist/runtime/templates/components/main/CwaLink.vue.d.ts

@@ -0,0 +1,14 @@
+import { type NuxtLinkProps } from '#app';
+type __VLS_Props = NuxtLinkProps;
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/templates/components/main/DefaultLayout.vue

@@ -0,0 +1,8 @@
+<template>
+  <div
+    id="cwa:default-layout"
+    class="cwa:flex cwa:flex-col cwa:h-full"
+  >
+    <slot />
+  </div>
+</template>

package/dist/runtime/templates/components/main/DefaultLayout.vue.d.ts

@@ -0,0 +1,12 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/templates/components/main/ErrorPage.vue

@@ -0,0 +1,98 @@
+<script setup>
+import { onMounted, ref } from "vue";
+import { clearError, useHead, useRoute } from "#app";
+import { useCwa } from "#cwa/runtime/composables/cwa";
+const props = defineProps({
+  error: { type: Object, required: true }
+});
+const _error = props.error;
+const stacktrace = _error.stack ? _error.stack.split("\n").splice(1).map((line) => {
+  const text = line.replace("webpack:/", "").replace(".vue", ".js").trim();
+  return {
+    text,
+    internal: line.includes("node_modules") && !line.includes(".cache") || line.includes("internal") || line.includes("new Promise")
+  };
+}).map((i) => `<span class="stack${i.internal ? " internal" : ""}">${i.text}</span>`).join("\n") : "";
+const $route = useRoute();
+const $cwa = useCwa();
+const statusCode = Number(_error.statusCode || 500);
+const is404 = statusCode === 404;
+const statusMessage = _error.statusMessage ?? (is404 ? "Page Not Found" : "Internal Server Error");
+const description = _error.message || _error.toString();
+const stack = import.meta.dev && !is404 ? description || `${stacktrace}` : void 0;
+useHead({
+  bodyAttrs: {
+    class: "cwa:h-full cwa:bg-white cwa:dark:bg-black"
+  },
+  htmlAttrs: {
+    class: "cwa:h-full"
+  }
+});
+const returnHome = () => clearError({ redirect: "/" });
+const showingErrorPage = ref(false);
+onMounted(() => {
+  showingErrorPage.value = true;
+});
+</script>
+
+<template>
+  <div
+    class="cwa:h-full cwa:relative cwa:z-10 cwa:transition-opacity cwa:duration-300"
+    :class="[showingErrorPage ? 'cwa:opacity-100' : 'cwa:opacity-0']"
+  >
+    <CwaUiBackgroundParticles class="cwa:absolute cwa:inset-0 cwa:-z-10 cwa:opacity-30 cwa:invert cwa:dark:invert-0" />
+    <main class="cwa:h-full cwa:flex cwa:flex-col cwa:p-6 cwa:lg:p-8">
+      <div class="cwa:flex cwa:justify-center cwa:grow cwa:h-full cwa:items-center">
+        <div class="cwa:text-center">
+          <p class="cwa:text-base cwa:font-semibold cwa:text-blue-600">
+            {{ statusCode }}
+          </p>
+          <h1 class="cwa:mt-4 cwa:text-balance cwa:text-4xl cwa:font-semibold cwa:tracking-tight cwa:text-gray-900 cwa:dark:text-stone-100 cwa:sm:text-6xl">
+            {{ statusMessage }}
+          </h1>
+          <p class="cwa:mt-6 cwa:text-pretty cwa:text-lg cwa:font-medium cwa:text-stone-400 sm:text-xl/8">
+            {{ description }}
+          </p>
+          <div
+            v-if="stack"
+            class="cwa:text-left cwa:bg-black/5 cwa:bg-white cwa:dark:bg-white/10 cwa:flex-1 cwa:h-auto cwa:overflow-y-auto cwa:rounded-md cwa:text-stone-400 cwa:mt-8"
+          >
+            <pre
+              class="cwa:font-light cwa:leading-tight cwa:p-4 cwa:text-sm cwa:z-10"
+              v-html="stack"
+            />
+          </div>
+          <div class="cwa:mt-10 cwa:flex cwa:items-center cwa:justify-center cwa:gap-x-6">
+            <button
+              v-if="$route.path !== '/'"
+              class="cwa:cursor-pointer cwa:rounded-md cwa:bg-blue-600 cwa:px-3.5 cwa:py-2.5 cwa:text-sm cwa:font-semibold cwa:text-white cwa:shadow-sm cwa:hover:bg-indigo-500 cwa:focus-visible:outline cwa:focus-visible:outline-2 cwa:focus-visible:outline-offset-2 cwa:focus-visible:outline-indigo-600"
+              @click="returnHome"
+            >
+              Go back home
+            </button>
+          </div>
+        </div>
+      </div>
+      <div class="cwa:justify-center cwa:gap-y-2 cwa:flex cwa:h-auto cwa:grow-0 cwa:flex-col cwa:text-center cwa:pb-2 cwa:pt-6">
+        <div class="cwa:justify-center cwa:flex">
+          <CwaLogo class="cwa:h-6 cwa:w-auto cwa:text-stone-300" />
+        </div>
+        <ClientOnly>
+          <div class="cwa:text-sm cwa:text-stone-400">
+            Are you the owner of this website?
+            <NuxtLink
+              v-if="$cwa.auth.hasRole('ROLE_ADMIN')"
+              to="/_cwa/layouts"
+              class="cwa:font-semibold cwa:hover:text-dark cwa:dark:hover:text-white"
+            >Go to admin <span aria-hidden="true">&rarr;</span></NuxtLink>
+            <NuxtLink
+              v-else
+              to="/login"
+              class="cwa:font-semibold cwa:hover:text-dark cwa:dark:hover:text-white"
+            >Sign in <span aria-hidden="true">&rarr;</span></NuxtLink>
+          </div>
+        </ClientOnly>
+      </div>
+    </main>
+  </div>
+</template>

package/dist/runtime/templates/components/main/ErrorPage.vue.d.ts

@@ -0,0 +1,6 @@
+import { type NuxtError } from '#app';
+type __VLS_Props = {
+    error: NuxtError;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/templates/components/main/Logo.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    width="906px"
+    height="260px"
+    viewBox="0 0 906 260"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g
+      transform="translate(-181.000000, -185.000000)"
+      fill="currentColor"
+    >
+      <path
+        d="M411,232.558892 L311.990506,315.54434 L395.186608,414.582148 C395.083121,414.669432 394.979462,414.756587 394.875631,414.843614 C340.020479,460.820814 258.000365,453.391191 211.678578,398.249085 C165.356791,343.10698 172.27445,261.133586 227.129601,215.156386 C281.984753,169.179186 364.004868,176.608809 410.326654,231.750915 C410.552367,232.019606 410.776815,232.288934 411,232.558892 Z M731,444.98882 L606.047047,318.63887 L482,444.072786 L482,186 L731,186 L731,444.98882 Z M784,445 L935,186 L1087,445 L784,445 Z"
+      />
+    </g>
+  </svg>
+</template>

package/dist/runtime/templates/components/main/Logo.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/templates/components/main/README.md

@@ -0,0 +1,7 @@
+Components in this directory are available to the application automatically with the 'Cwa' prefix.
+N.b directories starting with an underscore will not be available as an auto-import or from the #components alias
+
+For example:
+```vue
+<CwaComponentGroup reference="primary" :location="props.iri" />
+```

package/dist/runtime/templates/components/main/admin/_common/ResourceContextItem.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { computed } from "vue";
+import { useCwa } from "#imports";
+const $cwa = useCwa();
+const props = defineProps({
+  index: { type: Number, required: true },
+  rootWidth: { type: Number, required: false },
+  useCurrentStack: { type: Boolean, required: false }
+});
+defineEmits(["click"]);
+const stack = computed(() => {
+  return props.useCurrentStack ? $cwa.admin.resourceStackManager.resourceStack.value : $cwa.admin.resourceStackManager.contextStack.value;
+});
+const stackItem = computed(() => {
+  return stack.value[props.index];
+});
+const nextIndex = computed(() => props.index - 1);
+</script>
+
+<template>
+  <div
+    class="resource-context-item cwa:border cwa:border-dashed cwa:px-1.5 cwa:py-1 cwa:cursor-pointer cwa:text-gray-300 cwa:block
+    [&:not(:has(.resource-context-item:hover)):hover]:cwa:!bg-dark
+    [&:not(:has(.resource-context-item:hover)):hover]:cwa:!border-gray-200
+    [&:not(:has(.resource-context-item:hover)):hover]:cwa:!border-solid
+    [&:not(:has(.resource-context-item:hover)):hover]:cwa:!text-white"
+    :style="{ minWidth: rootWidth && index === 0 ? `${rootWidth}px` : `auto` }"
+    @click="$emit('click', index)"
+  >
+    <resource-context-item
+      v-if="nextIndex >= 0"
+      :index="nextIndex"
+      :root-width="rootWidth"
+      :use-current-stack="useCurrentStack"
+      @click="(childIndex) => $emit('click', childIndex)"
+    />
+    <button class="cwa:px-1.5 cwa:py-0.5 cwa:w-auto cwa:min-w-full cwa:cursor-pointer">
+      {{ stackItem.displayName || stackItem.iri }}
+    </button>
+  </div>
+</template>

package/dist/runtime/templates/components/main/admin/_common/ResourceContextItem.vue.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    index: number;
+    rootWidth?: number;
+    useCurrentStack?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/templates/components/main/admin/_common/ResourceLoadingIndicator.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { computed, onMounted, ref, useTemplateRef, watch } from "vue";
+import { useCwa } from "#imports";
+const $cwa = useCwa();
+const requestsOngoing = computed(() => {
+  return $cwa.resourcesManager.requestCount.value > 0;
+});
+const holder = useTemplateRef("holder");
+const currentIndicators = ref([]);
+const indicatorCount = ref();
+onMounted(() => {
+  watch(requestsOngoing, (isRequests) => {
+    if (isRequests) {
+      indicatorCount.value++;
+      if (indicatorCount.value > 100) {
+        indicatorCount.value = 0;
+      }
+      currentIndicators.value.push(indicatorCount.value);
+    } else if (currentIndicators.value.length) {
+      currentIndicators.value.splice(0, 1);
+    }
+  });
+});
+</script>
+
+<template>
+  <div
+    ref="holder"
+    class="cwa:w-full cwa:h-[1px] cwa:pointer-events-none"
+  >
+    <TransitionGroup name="load-indicator">
+      <div
+        v-for="count in currentIndicators"
+        :key="`load-indicator-${count}`"
+        class="cwa:absolute cwa:h-full cwa:bg-orange/30 cwa:top-0 cwa:left-0 cwa:right-0"
+      >
+        <div class="cwa:shadow-[inset_-20px_0_10px_-10px] cwa:shadow-orange/30 cwa:absolute cwa:right-full cwa:w-8 cwa:h-full" />
+        <div class="cwa-loader-inner-holder cwa:transition cwa:duration-300 cwa:left-0 cwa:right-0 cwa:top-0 cwa:h-full">
+          <div class="cwa-loader-inner-indicator cwa:bg-light/30 cwa:h-full cwa:top-0 cwa:absolute cwa:z-10" />
+        </div>
+      </div>
+    </TransitionGroup>
+  </div>
+</template>
+
+<style>
+.load-indicator-enter-active,.load-indicator-leave-active{transition:all .6s ease}.load-indicator-enter-from{opacity:1;right:100%!important}.load-indicator-leave-to{left:100%!important;opacity:1}.load-indicator-leave-to .cwa-loader-inner-holder{left:100%!important;opacity:0!important}@keyframes inner-indicator-animation{0%,5%{left:0;opacity:0;right:100%}45%,55%{opacity:1}50%{left:0;opacity:1;right:0}95%,to{left:100%;opacity:0;right:0}}.cwa-loader-inner-indicator{animation:inner-indicator-animation 2.5s infinite;animation-delay:.8s}
+</style>

package/dist/runtime/templates/components/main/admin/_common/ResourceLoadingIndicator.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/templates/components/main/admin/_common/useDynamicPositionSelectOptions.d.ts

@@ -0,0 +1,5 @@
+import type { SelectOption } from '#cwa/runtime/composables/cwa-select-input';
+import type Cwa from '#cwa/runtime/cwa';
+export declare const useDynamicPositionSelectOptions: ($cwa: Cwa) => {
+    getOptions: () => Promise<SelectOption[]>;
+};

package/dist/runtime/templates/components/main/admin/_common/useDynamicPositionSelectOptions.js

@@ -0,0 +1,19 @@
+export const useDynamicPositionSelectOptions = ($cwa) => {
+  async function getOptions() {
+    const newOptions = [{
+      label: "None",
+      value: null
+    }];
+    const docs = await $cwa.getApiDocumentation();
+    const pageDataMeta = docs?.pageDataMetadata?.["hydra:member"];
+    if (pageDataMeta) {
+      for (const { properties } of pageDataMeta) {
+        newOptions.push(...properties.map(({ property }) => ({ label: property, value: property })));
+      }
+    }
+    return newOptions;
+  }
+  return {
+    getOptions
+  };
+};