@cwa/nuxt-edge 0.0.0-29696494.72f11a4

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

@@ -0,0 +1,439 @@
+<template>
+  <ResourceModal
+    v-if="localResourceData"
+    v-model="titleModel"
+    :title-placeholder="isDisplayingPage ? 'No Reference' : 'No Title'"
+    :is-loading="isLoading"
+    :border-color-class="borderColorClass"
+    @close="$emit('close')"
+    @save="saveTitle"
+  >
+    <template
+      v-if="isDisplayingPage"
+      #title
+    >
+      <PageTypeSelect v-model="localResourceData.isTemplate" />
+    </template>
+    <template
+      v-if="!hideViewLink && !isAdding"
+      #icons
+    >
+      <div>
+        <NuxtLink :to="getInternalResourceLink(localResourceData['@id'])">
+          <CwaUiIconEyeIcon class="cwa:w-9" />
+        </NuxtLink>
+      </div>
+    </template>
+    <template
+      v-if="depthChain.length > 1"
+      #subheader
+    >
+      <div class="cwa:flex cwa:gap-x-1 cwa:justify-center cwa:flex-wrap">
+        <button
+          v-for="option in depthChain"
+          :key="String(option.value)"
+          type="button"
+          class="cwa:py-1 cwa:px-3 cwa:text-sm cwa:rounded cwa:transition cwa:cursor-pointer"
+          :class="displayIri === option.value ? 'cwa:text-stone-100 cwa:bg-stone-700/80' : 'cwa:text-stone-400 cwa:hover:text-stone-300'"
+          @click="displayIri = option.value"
+        >
+          {{ option.label }}
+        </button>
+      </div>
+    </template>
+    <ResourceModalTabs :tabs="tabs">
+      <template #details>
+        <div class="cwa:flex cwa:flex-col cwa:gap-y-2">
+          <div class="cwa:flex cwa:flex-col cwa:gap-y-2 cwa:pb-2 cwa:border-b cwa:border-stone-500">
+            <span class="cwa:text-xs cwa:text-stone-400 cwa:uppercase cwa:tracking-wide cwa:px-1">Parent page</span>
+            <ModalRadioTabs
+              v-model="parentType"
+              :options="parentTypeOptions"
+            />
+            <div v-if="parentType === 'page'">
+              <ModalSelect
+                v-model="localResourceData.parentPage"
+                label="Parent Page"
+                :options="parentPageOptions"
+              />
+            </div>
+            <template v-if="parentType === 'data'">
+              <div>
+                <ModalSelect
+                  v-model="selectedParentDataType"
+                  label="Parent Data Type"
+                  :options="dataTypeOptions"
+                />
+              </div>
+              <div v-if="selectedParentDataType">
+                <ModalSelect
+                  v-model="localResourceData.parentPageData"
+                  label="Parent Data"
+                  :options="dataInstanceOptions"
+                />
+              </div>
+            </template>
+          </div>
+          <template v-if="isDisplayingPage">
+            <div>
+              <ModalInput
+                v-model="localResourceData.title"
+                label="SEO Page Title"
+              />
+            </div>
+          </template>
+          <div>
+            <ModalInput
+              v-model="localResourceData.metaDescription"
+              label="SEO Meta Description"
+            />
+          </div>
+          <template v-if="isDisplayingPage">
+            <div>
+              <ModalSelect
+                v-model="localResourceData.layout"
+                label="Layout"
+                :options="layoutOptions"
+              />
+            </div>
+            <div class="cwa:flex cwa:gap-x-2">
+              <div class="cwa:grow">
+                <ModalSelect
+                  v-model="localResourceData.uiComponent"
+                  label="Page UI"
+                  :options="pageComponentOptions"
+                />
+              </div>
+              <div
+                v-if="pageStyleOptions.length"
+                class="cwa:w-1/2"
+              >
+                <ModalSelect
+                  v-model="localResourceData.uiClassNames"
+                  label="Style"
+                  :options="pageStyleOptions"
+                />
+              </div>
+            </div>
+          </template>
+          <template v-if="!isDisplayingPage">
+            <div>
+              <ModalSelect
+                v-model="localResourceData.page"
+                label="Dynamic Page"
+                :options="pageOptions"
+              />
+            </div>
+            <div class="cwa:flex cwa:items-center cwa:gap-x-1.5 cwa:text-xs">
+              <CwaUiIconEyeIcon
+                class="cwa:w-4 cwa:flex-none"
+                :class="localResourceData?.page ? 'cwa:text-yellow' : 'cwa:text-stone-500'"
+              />
+              <button
+                v-if="localResourceData?.page"
+                type="button"
+                class="cwa:cursor-pointer cwa:text-yellow cwa:transition cwa:hover:opacity-80"
+                @click="goToTemplate"
+              >
+                Go to dynamic template
+              </button>
+              <span
+                v-else
+                class="cwa:text-stone-500"
+              >No template selected</span>
+            </div>
+            <div v-if="pageDataConfig?.metaFields">
+              <ModalSelect
+                v-for="field of pageDataConfig.metaFields"
+                :key="`field-${field.field}`"
+                v-model="localResourceData[field.field]"
+                :label="field.label"
+                :options="field.options || []"
+              />
+            </div>
+          </template>
+          <div class="cwa:flex cwa:justify-end cwa:pt-2 cwa:gap-x-2">
+            <div>
+              <CwaUiFormButton
+                color="dark"
+                :disabled="isUpdating"
+                @click="saveResource(true)"
+              >
+                Save &amp; Close
+              </CwaUiFormButton>
+            </div>
+            <div>
+              <CwaUiFormButton
+                color="blue"
+                :disabled="isUpdating"
+                @click="() => saveResource(false)"
+              >
+                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="deleteResource()"
+              >
+                Delete
+              </CwaUiFormButton>
+            </div>
+          </div>
+        </div>
+      </template>
+    </ResourceModalTabs>
+  </ResourceModal>
+</template>
+
+<script setup>
+import { computed, onMounted, ref, watch } from "vue";
+import { navigateTo, useCwa } from "#imports";
+import { componentNames } from "#components";
+import ResourceModal from "#cwa/templates/components/core/admin/ResourceModal.vue";
+import ResourceModalTabs from "#cwa/templates/components/core/admin/ResourceModalTabs.vue";
+import ModalInfo from "#cwa/templates/components/core/admin/form/ModalInfo.vue";
+import ModalInput from "#cwa/templates/components/core/admin/form/ModalInput.vue";
+import ModalSelect from "#cwa/templates/components/core/admin/form/ModalSelect.vue";
+import ModalRadioTabs from "#cwa/templates/components/core/admin/form/ModalRadioTabs.vue";
+import PageTypeSelect from "#cwa/templates/components/core/admin/form/PageTypeSelect.vue";
+import RoutesTab from "#cwa/templates/components/core/admin/RoutesTab.vue";
+import { CwaResourceTypes, getResourceTypeFromIri } from "#cwa/resources/resource-utils";
+import { useItemPage } from "#cwa-layer/pages/_cwa/index/composables/useItemPage";
+import { useParentPageLoader } from "#cwa-layer/pages/_cwa/index/composables/useParentPageLoader";
+import { useParentPageDataLoader } from "#cwa-layer/pages/_cwa/index/composables/useParentPageDataLoader";
+import { useDynamicPageLoader } from "#cwa-layer/pages/_cwa/index/composables/useDynamicPageLoader";
+import { useDataType } from "#cwa-layer/pages/_cwa/index/composables/useDataType";
+const emit = defineEmits(["close", "reload"]);
+const props = defineProps({
+  iri: { type: String, required: false },
+  hideViewLink: { type: Boolean, required: false },
+  resourceType: { type: String, required: true }
+});
+const $cwa = useCwa();
+const { parentPages, loadParentPageOptions } = useParentPageLoader();
+const { dataTypes, dataInstances, loadDataTypes, loadDataInstances, fqcnToEntrypointKey } = useParentPageDataLoader();
+const { dynamicPages, loadDynamicPageOptions } = useDynamicPageLoader();
+const displayIri = ref(props.iri);
+const isDisplayingPage = computed(() => getResourceTypeFromIri(displayIri.value ?? "") === CwaResourceTypes.PAGE);
+function getResourceData(iri) {
+  return $cwa.resources.getResource(iri).value;
+}
+const depthChain = computed(() => {
+  const chain = [];
+  let iri = props.iri;
+  while (iri) {
+    const res = getResourceData(iri);
+    chain.unshift({
+      label: res?.data?.reference || res?.data?.title || iri,
+      value: iri
+    });
+    iri = res?.data?.parentPage || res?.data?.parentPageData || null;
+  }
+  return chain;
+});
+const parentTypeOptions = [
+  { label: "None", value: null },
+  { label: "Page", value: "page" },
+  { label: "Data", value: "data" }
+];
+const selectedParentDataType = ref(null);
+const parentType = ref(null);
+function isDescendantOfCurrentPage(candidateIri) {
+  const allPages = parentPages.value ?? [];
+  const byId = Object.fromEntries(allPages.map((p) => [p["@id"], p]));
+  const visited = /* @__PURE__ */ new Set();
+  let current = byId[candidateIri]?.parentPage;
+  while (current) {
+    if (visited.has(current)) break;
+    visited.add(current);
+    if (current === props.iri) return true;
+    current = byId[current]?.parentPage;
+  }
+  return false;
+}
+const parentPageOptions = computed(() => {
+  const options = [{ label: "None", value: null }];
+  for (const page of parentPages.value ?? []) {
+    if (page["@id"] !== props.iri && !isDescendantOfCurrentPage(page["@id"])) {
+      options.push({ label: page.reference, value: page["@id"] });
+    }
+  }
+  return options;
+});
+const dataTypeOptions = computed(() => {
+  const options = [{ label: "Select type\u2026", value: null }];
+  for (const type of dataTypes.value ?? []) {
+    const key = fqcnToEntrypointKey(type.resourceClass);
+    if (key) {
+      options.push({ label: type.resourceClass.split("\\").pop() ?? key, value: key });
+    }
+  }
+  return options;
+});
+const dataInstanceOptions = computed(() => {
+  const options = [{ label: "Select\u2026", value: null }];
+  for (const instance of dataInstances.value ?? []) {
+    options.push({ label: instance.title || instance["@id"], value: instance["@id"] });
+  }
+  return options;
+});
+const { isAdding, isLoading, isUpdating, localResourceData, resource, formatDate, deleteResource, saveResource: _saveResource, saveTitle: _saveTitle, loadResource, getInternalResourceLink } = useItemPage({
+  createEndpoint: "/_/pages",
+  emit,
+  resourceType: props.resourceType,
+  defaultResource: {},
+  endpoint: displayIri,
+  excludeFields: ["componentGroups"]
+});
+const titleModel = computed({
+  get: () => isDisplayingPage.value ? localResourceData.value?.reference : localResourceData.value?.title,
+  set: (val) => {
+    if (!localResourceData.value) return;
+    if (isDisplayingPage.value) {
+      localResourceData.value.reference = val;
+    } else {
+      localResourceData.value.title = val;
+    }
+  }
+});
+const borderColorClass = computed(() => {
+  if (isDisplayingPage.value) {
+    return localResourceData.value?.isTemplate ? "cwa:border-b-yellow" : "cwa:border-b-blue-600";
+  }
+  return resource.value?.route ? "cwa:border-b-green" : "cwa:border-b-orange";
+});
+function saveResource(close = false) {
+  if (localResourceData.value) {
+    if (parentType.value !== "page") localResourceData.value.parentPage = null;
+    if (parentType.value !== "data") localResourceData.value.parentPageData = null;
+  }
+  return _saveResource(close);
+}
+function saveTitle() {
+  if (isAdding.value) return;
+  return saveResource();
+}
+async function goToTemplate() {
+  if (!localResourceData.value?.page) return;
+  emit("close");
+  await navigateTo({
+    ...getInternalResourceLink(localResourceData.value.page),
+    query: { cwa_force: "true" }
+  });
+  $cwa.admin.toggleEdit(false);
+}
+const currentRequestId = ref(0);
+const layouts = ref();
+async function loadLayoutOptions() {
+  const thisRequestId = currentRequestId.value + 1;
+  currentRequestId.value = thisRequestId;
+  const { response } = $cwa.fetch({ path: "/_/layouts", noQuery: true });
+  const { _data: data } = await response;
+  if (thisRequestId === currentRequestId.value) {
+    data && (layouts.value = data["member"]);
+  }
+}
+const layoutOptions = computed(() => {
+  if (!layouts.value) return [];
+  return layouts.value.map((layout) => ({
+    label: layout.reference,
+    value: layout["@id"]
+  }));
+});
+const pageComponentNames = computed(() => componentNames.filter((n) => n.startsWith("CwaPage")));
+function cleanUiName(componentName) {
+  return componentName.replace(/^CwaPage/, "");
+}
+const pageComponentOptions = computed(() => {
+  return pageComponentNames.value.map((componentName) => {
+    const cleanName = cleanUiName(componentName);
+    return {
+      label: $cwa.pagesConfig?.[cleanName]?.name || cleanName,
+      value: cleanName
+    };
+  });
+});
+const pageStyleOptions = computed(() => {
+  if (!localResourceData.value?.uiComponent) return [];
+  const cleanName = cleanUiName(localResourceData.value.uiComponent);
+  const configuredClasses = $cwa.pagesConfig?.[cleanName]?.classes;
+  if (!configuredClasses) return [];
+  const options = [{ label: "Default", value: null }];
+  for (const [label, value] of Object.entries(configuredClasses)) {
+    options.push({ label, value });
+  }
+  return options;
+});
+const pageOptions = computed(() => {
+  if (!dynamicPages.value) return [];
+  return dynamicPages.value.map((page) => ({
+    label: page.reference,
+    value: page["@id"]
+  }));
+});
+const { pageDataConfig } = useDataType(computed(() => resource.value?.["@type"]));
+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;
+});
+watch(() => localResourceData.value?.isTemplate, (isTemplate, oldIsTemplate) => {
+  if (!isDisplayingPage.value) return;
+  !isAdding.value && isTemplate !== void 0 && oldIsTemplate !== void 0 && saveResource(false);
+});
+watch(selectedParentDataType, (key, oldKey) => {
+  if (oldKey && localResourceData.value) localResourceData.value.parentPageData = null;
+  if (key) loadDataInstances(key);
+});
+watch(localResourceData, (data, oldData) => {
+  if (data?.parentPage) parentType.value = "page";
+  else if (data?.parentPageData) parentType.value = "data";
+  else parentType.value = null;
+  if (data && !oldData && data.parentPageData) {
+    const pdResource = $cwa.resources.getResource(data.parentPageData).value;
+    const pdType = pdResource?.data?.["@type"];
+    if (pdType) {
+      const key = fqcnToEntrypointKey(pdType);
+      if (key) selectedParentDataType.value = key;
+    }
+  }
+}, { immediate: true });
+onMounted(async () => {
+  await Promise.all([loadLayoutOptions(), loadDynamicPageOptions(), loadParentPageOptions(), loadDataTypes()]);
+});
+</script>

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

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    iri?: string;
+    hideViewLink?: boolean;
+    resourceType: string;
+};
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,35 @@
+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_Slots = {
+    default(): any;
+    icons(): any;
+    title(): any;
+    subheader(): any;
+};
+type __VLS_ModelProps = {
+    modelValue?: any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+    save: (...args: any[]) => void;
+    "update:modelValue": (value: any) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    onSave?: ((...args: any[]) => any) | undefined;
+}>, {
+    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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,110 @@
+<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
+        v-if="$slots.subheader"
+        class="cwa:border-b cwa:border-stone-800 cwa:bg-stone-900/40"
+      >
+        <div class="cwa:px-4 cwa:py-3 cwa:flex cwa:justify-center">
+          <div class="cwa:w-full cwa:max-w-xl cwa:flex cwa:flex-col cwa:gap-y-2">
+            <slot name="subheader" />
+          </div>
+        </div>
+      </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/templates/components/main/admin/_common/ResourceLoadingIndicator.vue";
+import Spinner from "#cwa/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();
+  }
+}
+defineSlots();
+</script>

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

@@ -0,0 +1,35 @@
+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_Slots = {
+    default(): any;
+    icons(): any;
+    title(): any;
+    subheader(): any;
+};
+type __VLS_ModelProps = {
+    modelValue?: any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+    save: (...args: any[]) => void;
+    "update:modelValue": (value: any) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    onSave?: ((...args: any[]) => any) | undefined;
+}>, {
+    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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,7 @@
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

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/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,7 @@
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;