@cwa/nuxt-edge 1.0.0-29138192.e49c1a0

package/dist/runtime/templates/components/core/admin/PageDataAdminModal.vue

@@ -0,0 +1,187 @@
+<template>
+  <ResourceModal
+    v-if="localResourceData"
+    v-model="localResourceData.title"
+    title-placeholder="No Title"
+    :is-loading="isLoading"
+    :border-color-class="resource?.route ? 'cwa:border-b-green' : 'cwa:border-b-orange'"
+    @close="$emit('close')"
+    @save="saveTitle"
+  >
+    <template
+      v-if="!hideViewLink && !isAdding"
+      #icons
+    >
+      <div>
+        <NuxtLink :to="localResourceData['@id']">
+          <CwaUiIconEyeIcon class="cwa:w-9" />
+        </NuxtLink>
+      </div>
+    </template>
+    <ResourceModalTabs :tabs="tabs">
+      <template #details>
+        <div class="cwa:flex cwa:flex-col cwa:gap-y-2">
+          <div>
+            <ModalInput
+              v-model="localResourceData.metaDescription"
+              label="SEO Meta Description"
+            />
+          </div>
+          <div>
+            <ModalSelect
+              v-model="localResourceData.page"
+              label="Dynamic Page"
+              :options="pageOptions"
+            />
+          </div>
+          <div class="cwa:flex cwa:justify-end cwa:pt-2 cwa:gap-x-2">
+            <div>
+              <CwaUiFormButton
+                color="dark"
+                :disabled="isUpdating"
+                @click="saveResource(true)"
+              >
+                {{ isAdding ? "Add" : "Save" }} & Close
+              </CwaUiFormButton>
+            </div>
+            <div>
+              <CwaUiFormButton
+                color="blue"
+                :disabled="isUpdating"
+                @click="() => saveResource(false)"
+              >
+                {{ isAdding ? "Add Now" : "Save" }}
+              </CwaUiFormButton>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template #routes>
+        <RoutesTab
+          v-if="resource && resource.hasOwnProperty('@id')"
+          :page-resource="resource"
+          @reload="loadResource"
+        />
+      </template>
+      <template #info>
+        <div class="cwa:flex cwa:flex-col cwa:gap-y-2">
+          <div>
+            <ModalInfo
+              label="Created"
+              :content="formatDate(localResourceData.createdAt)"
+            />
+          </div>
+          <div>
+            <ModalInfo
+              label="Updated"
+              :content="formatDate(localResourceData.updatedAt)"
+            />
+          </div>
+          <div>
+            <ModalInfo
+              label="ID"
+              :content="localResourceData['@id']"
+            />
+          </div>
+          <div class="cwa:flex cwa:justify-start cwa:pt-6">
+            <div>
+              <CwaUiFormButton
+                :disabled="isUpdating"
+                @click="handleDeleteClick"
+              >
+                Delete
+              </CwaUiFormButton>
+            </div>
+          </div>
+        </div>
+      </template>
+    </ResourceModalTabs>
+  </ResourceModal>
+</template>
+
+<script setup>
+import { computed, onMounted, ref, toRef, watch, watchEffect } from "vue";
+import ResourceModal from "#cwa/runtime/templates/components/core/admin/ResourceModal.vue";
+import ResourceModalTabs, {} from "#cwa/runtime/templates/components/core/admin/ResourceModalTabs.vue";
+import ModalInfo from "#cwa/runtime/templates/components/core/admin/form/ModalInfo.vue";
+import ModalInput from "#cwa/runtime/templates/components/core/admin/form/ModalInput.vue";
+import { useItemPage } from "#cwa/layer/pages/_cwa/composables/useItemPage";
+import ModalSelect from "#cwa/runtime/templates/components/core/admin/form/ModalSelect.vue";
+import RoutesTab from "#cwa/runtime/templates/components/core/admin/RoutesTab.vue";
+import { useDynamicPageLoader } from "#cwa/layer/pages/_cwa/composables/useDynamicPageLoader";
+import { useDataList } from "#cwa/layer/pages/_cwa/composables/useDataList";
+import { useCwa } from "#imports";
+const $cwa = useCwa();
+const emit = defineEmits(["close", "reload"]);
+const props = defineProps({
+  iri: { type: String, required: false },
+  hideViewLink: { type: Boolean, required: false },
+  resourceType: { type: String, required: true }
+});
+const iriRef = toRef(props, "iri");
+const createEndpoint = ref("");
+const { isAdding, isLoading, isUpdating, localResourceData, resource, formatDate, deleteResource, saveResource, saveTitle, loadResource } = useItemPage({
+  createEndpoint,
+  emit,
+  resourceType: props.resourceType,
+  defaultResource: {},
+  endpoint: iriRef,
+  routeHashAfterAdd: computed(() => "#routes")
+});
+function handleDeleteClick() {
+  deleteResource();
+}
+const tabs = computed(() => {
+  const t = [
+    {
+      label: "Details",
+      id: "details"
+    }
+  ];
+  if (!isAdding.value) {
+    t.push({
+      label: "Routes",
+      id: "routes"
+    });
+    t.push({
+      label: "Info",
+      id: "info"
+    });
+  }
+  return t;
+});
+const pageOptions = computed(() => {
+  if (!dynamicPages.value) {
+    return [];
+  }
+  const options = [];
+  for (const page of dynamicPages.value) {
+    options.push({
+      label: page.reference,
+      value: page["@id"]
+    });
+  }
+  return options;
+});
+const { dynamicPages, loadDynamicPageOptions } = useDynamicPageLoader();
+const { fqcnToEntrypointKey } = useDataList();
+watch(() => localResourceData.value?.isTemplate, (isTemplate, oldIsTemplate) => {
+  !isAdding.value && isTemplate !== void 0 && oldIsTemplate !== void 0 && saveResource(false);
+});
+watchEffect(async () => {
+  const docs = await $cwa.getApiDocumentation();
+  if (props.resourceType) {
+    createEndpoint.value = docs?.entrypoint?.[fqcnToEntrypointKey(props.resourceType) || ""] || "";
+  }
+});
+onMounted(async () => {
+  await loadDynamicPageOptions();
+  if (!dynamicPages.value?.length) {
+    emit("close");
+    return;
+  }
+  if (isAdding.value && localResourceData.value && !localResourceData.value.page) {
+    localResourceData.value.page = pageOptions.value[0].value;
+  }
+});
+</script>

package/dist/runtime/templates/components/core/admin/PageDataAdminModal.vue.d.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    iri?: string;
+    hideViewLink?: boolean;
+    resourceType: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    reload: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onReload?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/templates/components/core/admin/ResourceModal.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="cwa:text-light cwa:w-full cwa:bg-stone-800 cwa:max-w-4xl cwa:max-h-full cwa:min-h-96 cwa:flex cwa:flex-col">
+    <template v-if="isLoading">
+      <Spinner
+        class="cwa:absolute cwa:top-1/2 cwa:left-1/2 cwa:-translate-x-1/2  cwa:-translate-y-1/2"
+        :show="true"
+      />
+    </template>
+    <template v-else>
+      <div
+        class="cwa:relative cwa:bg-stone-900/40 cwa:border-b-2"
+        :class="[borderColorClass]"
+      >
+        <div class="cwa:p-3 cwa:flex cwa:justify-end cwa:text-stone-400 cwa:gap-x-4 cwa:items-center">
+          <slot name="icons" />
+          <button
+            class="cwa:cursor-pointer"
+            @click="closeModal"
+          >
+            <CwaUiIconXMarkIcon class="cwa:h-10" />
+          </button>
+        </div>
+        <div class="cwa:p-4 cwa:flex cwa:justify-center">
+          <div class="cwa:grow cwa:max-w-xl cwa:flex cwa:items-center cwa:gap-x-6">
+            <div class="cwa:grow cwa:flex cwa:items-center cwa:gap-x-2 cwa:min-w-0">
+              <div class="cwa:max-w-[calc(100%-1.3em)]">
+                <input
+                  v-if="isEditingTitle"
+                  ref="referenceInput"
+                  v-model="titleModel"
+                  v-auto-width="{ comfortZone: '.5rem', minWidth: '270px' }"
+                  class="cwa:dark-blur cwa:text-4xl cwa:py-1 cwa:px-2 cwa:max-w-full cwa:-ml-2 cwa:placeholder-light/20"
+                  placeholder="Enter Reference"
+                >
+                <h2
+                  v-else
+                  class="cwa:text-4xl cwa:truncate cwa:py-1 cwa:pr-3 cwa:border cwa:border-transparent"
+                  :class="[titleModel ? '' : 'cwa:text-light/20']"
+                  @click="triggerEditTitle"
+                >
+                  {{ titleModel || "[" + titlePlaceholder + "]" }}
+                </h2>
+              </div>
+              <div class="cwa:shrink-0 cwa:w-[1.3em] cwa:cursor-pointer">
+                <CwaUiIconTickIcon
+                  v-if="isEditingTitle"
+                  class="cwa:w-full"
+                  @click="saveTitle()"
+                />
+                <CwaUiIconPenIcon
+                  v-else
+                  class="cwa:w-full"
+                  @click="triggerEditTitle"
+                />
+              </div>
+            </div>
+            <slot name="title" />
+          </div>
+        </div>
+        <ResourceLoadingIndicator class="cwa:absolute cwa:top-full cwa:left-0 cwa:z-10" />
+      </div>
+      <div class="cwa:grow cwa:px-4 cwa:pt-4 cwa:pb-10 cwa:flex cwa:justify-center cwa:min-h-0">
+        <div class="cwa:w-full cwa:max-w-xl cwa:overflow-auto">
+          <slot />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { nextTick, ref, useTemplateRef } from "vue";
+import { directive as vAutoWidth } from "vue-input-autowidth";
+import ResourceLoadingIndicator from "#cwa/runtime/templates/components/main/admin/_common/ResourceLoadingIndicator.vue";
+import Spinner from "#cwa/runtime/templates/components/utils/Spinner.vue";
+const referenceInput = useTemplateRef("referenceInput");
+const titleModel = defineModel();
+const emit = defineEmits(["close", "save"]);
+defineProps({
+  isLoading: { type: Boolean, required: false },
+  titlePlaceholder: { type: String, required: false, default: "No Reference" },
+  borderColorClass: { type: String, required: false, default: "cwa:border-b-stone-700" }
+});
+const isEditingTitle = ref(false);
+function closeModal() {
+  emit("close");
+}
+function saveTitle() {
+  emit("save");
+  isEditingTitle.value = false;
+}
+async function triggerEditTitle() {
+  isEditingTitle.value = true;
+  await nextTick();
+  if (referenceInput.value) {
+    referenceInput.value.focus();
+  }
+}
+</script>

package/dist/runtime/templates/components/core/admin/ResourceModal.vue.d.ts

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    isLoading?: boolean;
+    titlePlaceholder?: string;
+    borderColorClass?: 'cwa:border-b-stone-700' | 'cwa:border-b-green' | 'cwa:border-b-orange' | 'cwa:border-b-yellow' | 'cwa:border-b-blue-600';
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: any;
+};
+declare var __VLS_4: {}, __VLS_26: {}, __VLS_31: {};
+type __VLS_Slots = {} & {
+    icons?: (props: typeof __VLS_4) => any;
+} & {
+    title?: (props: typeof __VLS_26) => any;
+} & {
+    default?: (props: typeof __VLS_31) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{}>, {
+    titlePlaceholder: string;
+    borderColorClass: "cwa:border-b-stone-700" | "cwa:border-b-green" | "cwa:border-b-orange" | "cwa:border-b-yellow" | "cwa:border-b-blue-600";
+}, {}, {}, {}, 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/core/admin/ResourceModalOverlay.vue

@@ -0,0 +1,27 @@
+<template>
+  <ResourceModalOverlayTemplate :show="!!route.params.iri">
+    <NuxtPage
+      v-if="route.params.iri"
+      @click.stop
+      @close="hideModal"
+      @reload="$emit('reload')"
+    />
+  </ResourceModalOverlayTemplate>
+</template>
+
+<script setup>
+import { useRoute, useRouter } from "vue-router";
+import ResourceModalOverlayTemplate from "#cwa/runtime/templates/components/core/admin/ResourceModalOverlayTemplate.vue";
+defineEmits(["reload"]);
+const route = useRoute();
+const router = useRouter();
+function hideModal() {
+  if (!route.name) {
+    return;
+  }
+  router.push({
+    name: route.name.toString().replace("-iri", ""),
+    query: route.query
+  });
+}
+</script>

package/dist/runtime/templates/components/core/admin/ResourceModalOverlay.vue.d.ts

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

package/dist/runtime/templates/components/core/admin/ResourceModalOverlayTemplate.vue

@@ -0,0 +1,23 @@
+<template>
+  <Transition
+    enter-from-class="cwa:transform cwa:opacity-0"
+    enter-active-class="cwa:duration-200"
+    enter-to-class="cwa:opacity-100"
+    leave-from-class="cwa:opacity-100"
+    leave-active-class="cwa:duration-200"
+    leave-to-class="cwa:transform cwa:opacity-0"
+  >
+    <div
+      v-if="show"
+      class="cwa:fixed cwa:z-dialog cwa:bg-dark/80 cwa:backdrop-blur-sm cwa:top-0 cwa:left-0 cwa:w-full cwa:h-full cwa:px-6 cwa:py-10 cwa:text-light cwa:flex cwa:justify-center cwa:items-center"
+    >
+      <slot />
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+defineProps({
+  show: { type: Boolean, required: true }
+});
+</script>

package/dist/runtime/templates/components/core/admin/ResourceModalOverlayTemplate.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    show: boolean;
+};
+declare var __VLS_5: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_5) => 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/core/admin/ResourceModalTabs.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="cwa:flex cwa:flex-col cwa:h-full">
+    <div
+      v-if="tabs.length > 1"
+      class="cwa:mb-4"
+    >
+      <div class="cwa:flex cwa:gap-x-1 cwa:overflow-hidden cwa:items-center cwa:text-lg">
+        <button
+          v-for="(tab, index) of tabs"
+          :id="tab.id"
+          :key="`tab-button-${tab.id}`"
+          class="cwa:py-1.5 cwa:px-5 cwa:transition cwa:rounded cwa:cursor-pointer"
+          :class="[index === selectedTabIndex ? 'cwa:text-stone-100 cwa:bg-stone-700/80' : 'cwa:text-stone-400 cwa:hover:text-stone-300']"
+          @click="selectTab(index)"
+        >
+          {{ tab.label }}
+        </button>
+      </div>
+    </div>
+    <div class="cwa:grow cwa:min-h-0 cwa:overflow-auto">
+      <slot
+        v-if="tabs[selectedTabIndex]?.id"
+        :name="tabs[selectedTabIndex]?.id"
+      >
+        No tab content provided for tab index `{{ selectedTabIndex }}`- ID: `{{ tabs[selectedTabIndex].id }}`
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watch } from "vue";
+import { useRoute, useRouter } from "#imports";
+const router = useRouter();
+const route = useRoute();
+const props = defineProps({
+  tabs: { type: Array, required: true }
+});
+function selectTab(index) {
+  selectedTabIndex.value = index;
+  setTimeout(() => {
+    router.replace({ ...route, hash: `#${selectedTabId.value}` });
+  }, 100);
+}
+function getIndexFromHash() {
+  const currentHash = route.hash?.substring(1, route.hash.length);
+  if (!currentHash) {
+    return 0;
+  }
+  const initialHashValue = route.hash.substring(1, route.hash.length);
+  return getIndexFromId(initialHashValue);
+}
+function getIndexFromId(checkId) {
+  const index = props.tabs.findIndex(({ id }) => id === checkId);
+  return index !== -1 ? index : 0;
+}
+const selectedTabIndex = ref(getIndexFromHash());
+const selectedTabId = computed(() => {
+  return props.tabs[selectedTabIndex.value]?.id;
+});
+const indexAndId = computed(() => {
+  return {
+    index: selectedTabIndex.value,
+    id: selectedTabId.value
+  };
+});
+watch(indexAndId, (newValues, oldValues) => {
+  if (oldValues.id === void 0) {
+    return;
+  }
+  const indexIsSame = oldValues.index === newValues.index;
+  const idHasChanged = oldValues.id !== newValues.id;
+  if (indexIsSame && idHasChanged) {
+    selectedTabIndex.value = getIndexFromId(oldValues.id);
+  }
+});
+</script>

package/dist/runtime/templates/components/core/admin/ResourceModalTabs.vue.d.ts

@@ -0,0 +1,19 @@
+export type ResourceModalTab = {
+    id: string;
+    label: string;
+};
+type __VLS_Props = {
+    tabs: ResourceModalTab[];
+};
+declare var __VLS_2: any, __VLS_3: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => 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/core/admin/RouteListRow.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="cwa:flex cwa:border-b cwa:border-b-stone-700 cwa:py-6 cwa:gap-x-4 cwa:items-center">
+    <div class="cwa:grow cwa:flex cwa:flex-col cwa:gap-y-1 cwa:min-w-0">
+      <span class="cwa:text-xl cwa:truncate">{{ data.path }}</span>
+      <span
+        v-if="relatedResource"
+        class="cwa:text-stone-400"
+      >
+        <span class="cwa:inline-flex cwa:max-w-full cwa:bg-dark cwa:p-2 cwa:font-bold cwa:gap-x-2 cwa:items-center">
+          <IconRoutes
+            v-if="resourceType === 'Route'"
+            class="cwa:h-5"
+          />
+          <IconData
+            v-else-if="resourceType === 'PageData'"
+            class="cwa:h-5"
+          />
+          <IconPages
+            v-else-if="resourceType === 'Page'"
+            class="cwa:h-5"
+          />
+          <span class="cwa:truncate">{{ relatedResource || "Unknown" }}</span>
+        </span>
+      </span>
+      <span v-else>
+        <span class="cwa:inline-flex cwa:truncate cwa:bg-magenta/60 cwa:text-white cwa:font-bold cwa:py-1 cwa:px-3 cwa:border cwa:border-magenta cwa:rounded">
+          This route has no association and should be deleted
+        </span>
+      </span>
+    </div>
+    <div>
+      <CwaUiFormButton
+        v-if="relatedResource"
+        :to="linkTo"
+      >
+        <IconPages
+          v-if="data.page"
+          class="cwa:h-6"
+        />
+        <IconData
+          v-else
+          class="cwa:h-6"
+        />
+        <span class="cwa:sr-only">View</span>
+      </CwaUiFormButton>
+      <CwaUiFormButton
+        v-else-if="!data.redirect"
+        color="error"
+        @click="$emit('delete', data['@id'])"
+      >
+        <CwaUiIconBinIcon class="cwa:w-4 cwa:m-1" />
+        <span class="cwa:sr-only">Delete</span>
+      </CwaUiFormButton>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import IconPages from "#cwa/runtime/templates/components/core/assets/IconPages.vue";
+import IconRoutes from "#cwa/runtime/templates/components/core/assets/IconRoutes.vue";
+import IconData from "#cwa/runtime/templates/components/core/assets/IconData.vue";
+import { useDataList } from "#cwa/layer/pages/_cwa/composables/useDataList";
+const { fqcnToEntrypointKey } = useDataList();
+const props = defineProps({
+  data: { type: Object, required: true },
+  linkFn: { type: Function, required: true },
+  associatedResources: { type: Object, required: false }
+});
+defineEmits(["delete"]);
+const linkTo = computed(() => {
+  if (!relatedResource.value) {
+    return;
+  }
+  if (props.associatedResources?.pageData) {
+    if (!props.data.pageData) {
+      return "#";
+    }
+    return props.linkFn(props.data.pageData, "_cwa-data-type-iri", "#routes", { type: fqcnToEntrypointKey(props.associatedResources?.pageDataType || "") || "" });
+  }
+  if (!props.data.page) {
+    return "#";
+  }
+  return props.linkFn(props.data.page, "_cwa-pages", "#routes");
+});
+const resourceType = computed(() => {
+  const assocResource = props.associatedResources;
+  if (!assocResource) {
+    return;
+  }
+  if (props.associatedResources?.redirect) {
+    return "Route";
+  }
+  if (props.associatedResources?.page) {
+    return "Page";
+  }
+  return "PageData";
+});
+const relatedResource = computed(() => {
+  return props.associatedResources?.redirect || props.associatedResources?.pageData || props.associatedResources?.page;
+});
+</script>

package/dist/runtime/templates/components/core/admin/RouteListRow.vue.d.ts

@@ -0,0 +1,20 @@
+import type { RouteLocationRaw } from 'vue-router';
+import type { CwaResource } from '#cwa/runtime/resources/resource-utils';
+type __VLS_Props = {
+    data: CwaResource;
+    linkFn: (iri: string, routeName?: string, hash?: string, params?: {
+        [key: string]: string;
+    }) => RouteLocationRaw;
+    associatedResources?: {
+        redirect?: string;
+        page?: string;
+        pageData?: string;
+        pageDataType?: string;
+    };
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (args_0: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: ((args_0: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/templates/components/core/admin/RouteRedirectsTree.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <ul class="relative cwa:flex cwa:flex-col cwa:gap-y-0.5 cwa:pl-3">
+      <li
+        v-for="(redirectRoute, index) of redirects"
+        :key="redirectRoute['@id']"
+        class="relative"
+      >
+        <div class="cwa:flex cwa:flex-col cwa:gap-y-0.5">
+          <div class="cwa:flex cwa:items-center cwa:before:absolute cwa:before:w-3 cwa:before:border-b cwa:before:top-1/2 cwa:before:right-full cwa:before:border-stone-400 cwa:hover:bg-stone-800 cwa:px-2 cwa:py-1.5">
+            <div class="cwa:grow cwa:min-w-0 cwa:truncate">
+              {{ redirectRoute.path }}
+            </div>
+            <div>
+              <button
+                class="cwa:opacity-60 cwa:hover:opacity-80 cwa:translate-y-0.5 cwa:cursor-pointer"
+                @click="deleteRoute(redirectRoute['@id'])"
+              >
+                <CwaUiIconBinIcon class="cwa:w-3.5" />
+              </button>
+            </div>
+            <div class="cwa:absolute cwa:top-0 cwa:-left-3 cwa:h-1/2 cwa:border-l cwa:border-stone-400" />
+            <div
+              v-if="index < redirects.length - 1"
+              class="cwa:absolute cwa:top-1/2 cwa:-left-3 cwa:h-[calc(50%+.75rem)] cwa:border-l cwa:border-stone-400"
+            />
+          </div>
+          <RouteRedirectsTree
+            v-if="redirectRoute.redirectedFrom"
+            :redirects="redirectRoute.redirectedFrom"
+            @reload="$emit('reload')"
+          />
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { useCwa } from "#imports";
+const $cwa = useCwa();
+const emit = defineEmits(["reload"]);
+defineProps({
+  redirects: { type: Array, required: true }
+});
+async function deleteRoute(iri) {
+  await $cwa.resourcesManager.deleteResource({
+    endpoint: iri
+  });
+  emit("reload");
+}
+</script>