@cwa/nuxt-edge 0.0.0-29696494.72f11a4

package/dist/runtime/templates/components/main/admin/resource-manager/ResourceManager.vue

@@ -0,0 +1,186 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from "vue";
+import ResourceLoadingIndicator from "../_common/ResourceLoadingIndicator.vue";
+import ManagerTabs from "./_parts/ManagerTabs.vue";
+import CwaAdminResourceManagerContextMenu from "./_parts/CwaResourceManagerContextMenu.vue";
+import { useCwa } from "#imports";
+import { CwaUserRoles } from "#cwa/storage/stores/auth/state";
+import ResourceManagerCtaButton from "#cwa/templates/components/main/admin/resource-manager/cta/ResourceManagerCtaButton.vue";
+import AddComponentDialog from "#cwa/templates/components/main/admin/resource-manager/_parts/AddComponentDialog.vue";
+import { useDataResolver } from "#cwa/templates/components/core/useDataResolver";
+const $cwa = useCwa();
+const currentStackItem = $cwa.admin.resourceStackManager.currentStackItem;
+const spacer = useTemplateRef("spacer");
+const managerHolder = useTemplateRef("managerHolder");
+const allTabsMeta = ref([]);
+const selectedIndex = ref(0);
+const isOpen = ref(false);
+const virtualElement = ref({ getBoundingClientRect: () => ({}) });
+const managerTabs = useTemplateRef("managerTabs");
+const currentManagerTabs = ref();
+const cachedPosition = { top: 0, left: 0 };
+let mousedownTarget = null;
+function showDefaultContext({ top, left }) {
+  const difference = {
+    top: Math.abs(top - cachedPosition.top),
+    left: Math.abs(left - cachedPosition.left)
+  };
+  return isOpen.value && difference.top < 10 && difference.left < 10;
+}
+function openContext({ top, left }) {
+  cachedPosition.top = top;
+  cachedPosition.left = left;
+  virtualElement.value.getBoundingClientRect = () => ({
+    width: 0,
+    height: 0,
+    top,
+    left
+  });
+  isOpen.value = true;
+}
+function contextMenuHandler(e, type) {
+  const pos = {
+    top: e.clientY,
+    left: e.clientX
+  };
+  if (showDefaultContext(pos) || !$cwa.admin.isEditing || !$cwa.admin.resourceStackManager.isContextPopulating.value) {
+    isOpen.value = false;
+    return;
+  }
+  e.preventDefault();
+  completeStack(e, type, true);
+  openContext(pos);
+}
+function closeContextMenu(e) {
+  isOpen.value = false;
+  completeStack(e, void 0, true);
+}
+function mousedownHandler(e) {
+  mousedownTarget = e.target;
+}
+function clickHandler(e, type) {
+  if (e.target !== mousedownTarget && !$cwa.admin.resourceStackManager.isPopulating.value) {
+    return;
+  }
+  completeStack(e, type);
+  $cwa.admin.resourceStackManager.selectStackIndex(0, false);
+}
+function completeStack(e, type, isContext = false) {
+  $cwa.admin.resourceStackManager.completeStack({ clickTarget: e.target }, isContext, type);
+}
+function selectTab(index) {
+  selectedIndex.value = index;
+}
+const showAdmin = computed(() => {
+  return $cwa.auth.hasRole(CwaUserRoles.ADMIN);
+});
+const showSpacer = computed(() => {
+  return $cwa.admin.resourceStackManager.showManager.value && !!currentStackItem;
+});
+const selectedTab = computed(() => {
+  return currentStackItem.value?.managerTabs?.[selectedIndex.value];
+});
+watch([spacer, managerHolder, currentStackItem, selectedIndex, allTabsMeta], () => {
+  if (!spacer.value || !managerHolder.value || !currentStackItem.value) {
+    return;
+  }
+  const newHeight = managerHolder.value.clientHeight;
+  spacer.value.style.height = `${newHeight}px`;
+  nextTick().then(() => $cwa.admin.emitRedraw());
+}, {
+  flush: "post"
+});
+const resolverProps = computed(() => {
+  return {
+    iri: currentStackItem.value?.iri
+  };
+});
+useDataResolver(allTabsMeta, {
+  components: currentManagerTabs,
+  props: resolverProps,
+  propsValidator: (props) => {
+    return !!props.iri;
+  }
+});
+watch(currentStackItem, (newCurrent, oldCurrent) => {
+  if (oldCurrent && newCurrent && $cwa.resources.isIriPublishableEquivalent(oldCurrent.iri, newCurrent.iri)) {
+    return;
+  }
+  allTabsMeta.value = [];
+  managerTabs.value?.resetTabs();
+  currentManagerTabs.value = newCurrent?.managerTabs;
+});
+onMounted(() => {
+  window.addEventListener("mousedown", mousedownHandler);
+  window.addEventListener("resize", $cwa.admin.emitRedraw, false);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", $cwa.admin.emitRedraw);
+});
+defineExpose({
+  clickHandler,
+  contextMenuHandler,
+  closeContextMenu
+});
+</script>
+
+<template>
+  <div
+    v-if="showSpacer"
+    id="cwa-manager-spacer"
+    ref="spacer"
+    class="relative"
+  />
+  <Transition
+    enter-from-class="cwa:transform cwa:translate-y-full"
+    enter-active-class="cwa:duration-200 cwa:ease-out"
+    enter-to-class="cwa:translate-y-0"
+    leave-from-class="cwa:translate-y-0"
+    leave-active-class="cwa:duration-200 cwa:ease-in"
+    leave-to-class="cwa:transform cwa:translate-y-full"
+  >
+    <div
+      v-if="$cwa.admin.resourceStackManager.showManager.value"
+      class="fixed cwa:bottom-0 cwa:z-manager cwa:w-full cwa:text-white cwa:bg-dark/40"
+      @click.stop
+    >
+      <div class="cwa:dark-blur">
+        <div
+          v-if="allTabsMeta.length"
+          ref="managerHolder"
+        >
+          <ResourceLoadingIndicator class="cwa:absolute cwa:bottom-full cwa:left-0" />
+          <div class="cwa:flex">
+            <div class="cwa:grow">
+              <div class="cwa:flex cwa:items-center cwa:pt-3 cwa:px-4 cwa:gap-x-3">
+                <div class="cwa:grow">
+                  <ManagerTabs
+                    ref="managerTabs"
+                    :tabs="allTabsMeta"
+                    @click="selectTab"
+                  />
+                </div>
+                <div class="cwa:flex cwa:light cwa:items-center cwa:content-center cwa:justify-center">
+                  <ResourceManagerCtaButton />
+                </div>
+              </div>
+              <div class="cwa:p-4 cwa:min-h-[74px] cwa:flex cwa:items-center">
+                <component
+                  :is="selectedTab"
+                  v-if="selectedTab"
+                  class="cwa:w-full"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+  <CwaAdminResourceManagerContextMenu
+    v-if="showAdmin"
+    v-model="isOpen"
+    :virtual-element="virtualElement"
+  />
+  <AddComponentDialog />
+</template>

package/dist/runtime/templates/components/main/admin/resource-manager/ResourceManager.vue.d.ts

@@ -0,0 +1,10 @@
+declare function contextMenuHandler(e: MouseEvent, type: 'page' | 'layout'): void;
+declare function closeContextMenu(e: MouseEvent): void;
+declare function clickHandler(e: MouseEvent, type: 'page' | 'layout'): void;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    clickHandler: typeof clickHandler;
+    contextMenuHandler: typeof contextMenuHandler;
+    closeContextMenu: typeof closeContextMenu;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/templates/components/main/admin/resource-manager/_parts/AddComponentDialog.d.vue.ts

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

package/dist/runtime/templates/components/main/admin/resource-manager/_parts/AddComponentDialog.vue

@@ -0,0 +1,208 @@
+<template>
+  <DialogBox
+    v-model="open"
+    title="Add Component"
+    :buttons="buttons"
+    :is-loading="dialogLoading"
+  >
+    <Spinner
+      v-if="loadingComponents"
+      :show="true"
+    />
+    <template v-else-if="displayData">
+      <div class="cwa:flex cwa:gap-x-4">
+        <div class="cwa:flex cwa:flex-col cwa:w-4/12 cwa:gap-y-3 cwa:min-h-64">
+          <button
+            v-for="(component, name) of displayData.displayAvailableComponents"
+            :key="`add-${name}`"
+            :class="buttonClass"
+            :aria-selected="selectedComponent === name"
+            @click="selectComponent(name)"
+          >
+            {{ getComponentName(component) }}
+          </button>
+          <div v-if="displayData.enableDynamicPosition">
+            <button
+              :class="buttonClass"
+              class="cwa:border-yellow cwa:border-2 cwa:cursor-pointer"
+              :aria-selected="selectedComponent === 'ComponentPosition'"
+              @click="selectComponent('ComponentPosition')"
+            >
+              Dynamic
+            </button>
+          </div>
+        </div>
+        <div class="cwa:grow cwa:w-8/12">
+          <div
+            class="cwa:mb-6 cwa:gap-y-4"
+            v-html="resourceDescription"
+          />
+          <template v-if="selectedComponent === 'ComponentPosition'">
+            <CwaUiFormSelect
+              v-model="dynamicPropertySelect.model.value"
+              :options="dynamicPropertySelect.options.value"
+            />
+          </template>
+        </div>
+      </div>
+    </template>
+  </DialogBox>
+</template>
+
+<script setup>
+import { computed, nextTick, onMounted, ref, watch } from "vue";
+import DialogBox from "#cwa/templates/components/core/DialogBox.vue";
+import { useCwa, useCwaSelect } from "#imports";
+import Spinner from "#cwa/templates/components/utils/Spinner.vue";
+import {
+  useDynamicPositionSelectOptions
+} from "#cwa/templates/components/main/admin/_common/useDynamicPositionSelectOptions";
+const buttonClass = "w-full cwa:rounded-lg cwa:py-3 cwa:px-4 cwa:text-white/70 cwa:bg-stone-800 cwa:hover:bg-stone-700 cwa:aria-selected:bg-stone-700 cwa:hover:text-white cwa:aria-selected:text-white cwa:transition cwa:border cwa:border-solid cwa:border-stone-700 cwa:hover:border-opacity-100 cwa:cursor-pointer";
+const $cwa = useCwa();
+const { getOptions } = useDynamicPositionSelectOptions($cwa);
+const loadingComponents = ref(true);
+const displayData = ref();
+const selectedComponent = ref();
+const dialogLoading = ref(false);
+const dynamicPositionPropertyModel = ref();
+const dynamicPropertySelect = useCwaSelect(dynamicPositionPropertyModel);
+dynamicPropertySelect.options.value = [{
+  label: "Loading...",
+  value: void 0
+}];
+const addResourceEvent = computed(() => $cwa.resourcesManager.addResourceEvent.value);
+const isInstantAddResourceSaved = computed(() => {
+  return !!$cwa.resources.newResource.value?.data?._metadata.adding?.instantAdd;
+});
+const open = computed({
+  get() {
+    return !!addResourceEvent.value && !!addResourceEvent.value?.closest.group && (!$cwa.resources.newResource.value || isInstantAddResourceSaved.value);
+  },
+  set(value) {
+    if (!value) {
+      $cwa.resourcesManager.clearAddResource();
+    }
+  }
+});
+const instantAdd = computed(() => !!selectedResourceMeta.value?.instantAdd);
+const buttons = computed(() => {
+  return [
+    {
+      label: instantAdd.value ? "Add Now" : "Insert",
+      color: "blue",
+      buttonClass: "cwa:min-w-[120px]",
+      callbackFn: handleAdd,
+      disabled: !selectedComponent.value
+    },
+    {
+      label: "Cancel",
+      color: "grey"
+    }
+  ];
+});
+function getComponentName(metadata) {
+  return metadata.config.name || metadata.apiMetadata.resourceName;
+}
+function selectComponent(name) {
+  selectedComponent.value = name;
+}
+async function findAvailableComponents(allowedComponents, includePosition = false) {
+  const apiComponents = await $cwa.getComponentMetadata(true, includePosition);
+  if (!apiComponents) {
+    throw new Error("Could not retrieve component metadata from the API");
+  }
+  const asEntries = Object.entries(apiComponents);
+  const filteredAllowed = allowedComponents ? asEntries.filter(
+    ([_, value]) => allowedComponents.includes(value.endpoint)
+  ) : asEntries;
+  const filteredHasResourceConfig = filteredAllowed.filter(([name]) => $cwa.resourcesConfig?.[name]);
+  const mapped = filteredHasResourceConfig.map(([name, apiMetadata]) => [name, { apiMetadata, config: $cwa.resourcesConfig[name] }]);
+  return Object.fromEntries(mapped);
+}
+const selectedResourceMeta = computed(() => {
+  if (!selectedComponent.value) {
+    return;
+  }
+  return $cwa.resourcesConfig?.[selectedComponent.value];
+});
+const selectedResourceDescription = computed(() => {
+  if (!selectedResourceMeta.value) {
+    return;
+  }
+  return selectedResourceMeta.value?.description;
+});
+const resourceDescription = computed(() => {
+  return selectedResourceDescription.value || (selectedComponent.value ? "<p>No Description</p>" : "<p>Please select a resource to add</p>");
+});
+const defaultComponentData = computed(() => {
+  const defaultData = selectedResourceMeta.value?.defaultData || {};
+  if (selectedComponent.value !== "ComponentPosition") {
+    return defaultData;
+  }
+  return {
+    ...defaultData,
+    pageDataProperty: dynamicPropertySelect.model.value
+  };
+});
+async function createDisplayData() {
+  const event = addResourceEvent.value;
+  if (!event) {
+    return;
+  }
+  const allowedComponents = event.closest.group ? findAllowedComponents(event.closest.group) : void 0;
+  const enableDynamicPosition = !$cwa.admin.resourceStackManager.isEditingLayout.value && $cwa.resources.isDynamicPage.value;
+  const availableComponents = await findAvailableComponents(allowedComponents, enableDynamicPosition);
+  const displayAvailableComponents = { ...availableComponents };
+  delete displayAvailableComponents.ComponentPosition;
+  return {
+    event,
+    availableComponents,
+    enableDynamicPosition,
+    displayAvailableComponents
+  };
+}
+function findAllowedComponents(groupIri) {
+  return $cwa.resources.getResource(groupIri).value?.data?.allowedComponents;
+}
+function handleAdd() {
+  if (!selectedComponent.value) {
+    return;
+  }
+  const meta = displayData.value?.availableComponents[selectedComponent.value];
+  if (!meta) {
+    return;
+  }
+  $cwa.resourcesManager.setAddResourceEventResource(selectedComponent.value, meta.apiMetadata.endpoint, meta.apiMetadata.isPublishable, instantAdd.value, defaultComponentData.value);
+}
+async function loadOps() {
+  dynamicPropertySelect.options.value = await getOptions();
+}
+onMounted(() => {
+  loadOps();
+});
+watch(isInstantAddResourceSaved, async (newlySaved) => {
+  if (!newlySaved) {
+    return;
+  }
+  dialogLoading.value = true;
+  try {
+    const newResource = await $cwa.resourcesManager.addResourceAction();
+    if (newResource) {
+      await nextTick(() => {
+        $cwa.admin.eventBus.emit("selectResource", newResource["@id"]);
+      });
+    }
+  } finally {
+    $cwa.resourcesManager.clearAddResourceEventResource();
+    dialogLoading.value = false;
+  }
+});
+watch(open, async (isOpen) => {
+  if (!isOpen) {
+    return;
+  }
+  selectComponent();
+  displayData.value = await createDisplayData();
+  loadingComponents.value = false;
+});
+</script>

package/dist/runtime/templates/components/main/admin/resource-manager/_parts/AddComponentDialog.vue.d.ts

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

package/dist/runtime/templates/components/main/admin/resource-manager/_parts/CwaResourceManagerContextMenu.d.vue.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    modelValue: boolean;
+    virtualElement: any;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/templates/components/main/admin/resource-manager/_parts/CwaResourceManagerContextMenu.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { computed } from "vue";
+import ResourceContextItem from "../../_common/ResourceContextItem.vue";
+import ContextMenu from "../../../../utils/ContextMenu.vue";
+import { useCwa } from "#imports";
+const $cwa = useCwa();
+const props = defineProps({
+  modelValue: { type: Boolean, required: true },
+  virtualElement: { type: null, required: true }
+});
+const emit = defineEmits(["update:modelValue"]);
+const stackSize = computed(() => $cwa.admin.resourceStackManager.contextStack.value.length);
+const isOpen = computed({
+  get() {
+    return props.modelValue && stackSize.value > 0;
+  },
+  set(value) {
+    emit("update:modelValue", value);
+  }
+});
+function selectResource(index) {
+  $cwa.admin.resourceStackManager.selectStackIndex(index, true);
+  isOpen.value = false;
+}
+</script>
+
+<template>
+  <context-menu
+    v-model="isOpen"
+    :virtual-element="virtualElement"
+    @click.stop
+  >
+    <resource-context-item
+      :index="stackSize - 1"
+      @click="(index) => selectResource(index)"
+    />
+  </context-menu>
+</template>

package/dist/runtime/templates/components/main/admin/resource-manager/_parts/CwaResourceManagerContextMenu.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    modelValue: boolean;
+    virtualElement: any;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/templates/components/main/admin/resource-manager/_parts/ManagerTab.d.vue.ts

@@ -0,0 +1,8 @@
+import type { CwaResourceManagerTabOptions } from '#cwa/composables/cwa-resource-manager-tab';
+type __VLS_Props = {
+    tab: CwaResourceManagerTabOptions;
+    selected: boolean;
+};
+declare const __VLS_export: 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: typeof __VLS_export;
+export default _default;

package/dist/runtime/templates/components/main/admin/resource-manager/_parts/ManagerTab.vue

@@ -0,0 +1,15 @@
+<script setup>
+defineProps({
+  tab: { type: Object, required: true },
+  selected: { type: Boolean, required: true }
+});
+</script>
+
+<template>
+  <button
+    class="cwa:py-1.5 cwa:px-3 cwa:transition cwa:rounded cwa:cursor-pointer"
+    :class="[selected ? 'cwa:text-stone-100 cwa:bg-stone-700/80' : 'cwa:text-stone-400 cwa:hover:text-stone-300']"
+  >
+    {{ tab.name }}
+  </button>
+</template>

package/dist/runtime/templates/components/main/admin/resource-manager/_parts/ManagerTab.vue.d.ts

@@ -0,0 +1,8 @@
+import type { CwaResourceManagerTabOptions } from '#cwa/composables/cwa-resource-manager-tab';
+type __VLS_Props = {
+    tab: CwaResourceManagerTabOptions;
+    selected: boolean;
+};
+declare const __VLS_export: 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: typeof __VLS_export;
+export default _default;

package/dist/runtime/templates/components/main/admin/resource-manager/_parts/ManagerTabs.d.vue.ts

@@ -0,0 +1,14 @@
+import type { CwaResourceManagerTabOptions } from '#cwa/composables/cwa-resource-manager-tab';
+type __VLS_Props = {
+    tabs: CwaResourceManagerTabOptions[];
+};
+declare function resetTabs(newIndex?: number): void;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    resetTabs: typeof resetTabs;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (index: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((index: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/templates/components/main/admin/resource-manager/_parts/ManagerTabs.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { computed, ref, toRef, watchEffect } from "vue";
+import ManagerTab from "./ManagerTab.vue";
+const props = defineProps({
+  tabs: { type: Array, required: true }
+});
+const reactiveTabs = toRef(props, "tabs");
+const selectedIndex = ref(0);
+function getOrderValue(meta) {
+  return meta.order === void 0 ? 0 : meta.order;
+}
+const orderedTabs = computed(() => {
+  const tabsWithOriginalSort = [];
+  reactiveTabs.value.forEach((tab, index) => {
+    tabsWithOriginalSort.push({ ...tab, _originalIndex: index });
+  });
+  return tabsWithOriginalSort.filter((v) => !v.disabled).sort((a, b) => getOrderValue(a) - getOrderValue(b));
+});
+function selectIndex(newIndex) {
+  selectedIndex.value = newIndex;
+}
+function resetTabs(newIndex = 0) {
+  selectedIndex.value = newIndex;
+}
+const emit = defineEmits(["click"]);
+watchEffect(() => {
+  const newIndex = orderedTabs.value[selectedIndex.value || 0]?._originalIndex || 0;
+  emit("click", newIndex);
+});
+defineExpose({ resetTabs });
+</script>
+
+<template>
+  <div class="cwa:flex cwa:gap-x-1 cwa:overflow-hidden cwa:items-center">
+    <ManagerTab
+      v-for="(tab, index) of orderedTabs"
+      :key="`tab_${index}_${tab.name}`"
+      :tab="tab"
+      :selected="index === selectedIndex"
+      class="cwa:-mb-px"
+      @click="selectIndex(index)"
+    />
+  </div>
+</template>

package/dist/runtime/templates/components/main/admin/resource-manager/_parts/ManagerTabs.vue.d.ts

@@ -0,0 +1,14 @@
+import type { CwaResourceManagerTabOptions } from '#cwa/composables/cwa-resource-manager-tab';
+type __VLS_Props = {
+    tabs: CwaResourceManagerTabOptions[];
+};
+declare function resetTabs(newIndex?: number): void;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    resetTabs: typeof resetTabs;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (index: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((index: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/templates/components/main/admin/resource-manager/_tabs/ResourceInfoTab.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, import("#cwa/composables/cwa-resource-manager-tab").CwaResourceManagerTabMeta, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/templates/components/main/admin/resource-manager/_tabs/ResourceInfoTab.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { CwaResourceTypes, getResourceTypeFromIri } from "#cwa/resources/resource-utils";
+import { computed, ref } from "vue";
+import { useCwaResourceManagerTab } from "#cwa/composables/cwa-resource-manager-tab";
+import { DEFAULT_TAB_ORDER } from "#cwa/admin/manager-tabs-resolver";
+import { NEW_RESOURCE_IRI } from "#cwa/storage/stores/resources/state";
+const { exposeMeta, iri, $cwa, resource } = useCwaResourceManagerTab({
+  name: "Info",
+  order: DEFAULT_TAB_ORDER + 1
+});
+defineExpose(exposeMeta);
+const disableButton = ref(false);
+async function handleDelete() {
+  if (!iri.value) {
+    return;
+  }
+  if (isAddingNew.value) {
+    if (await $cwa.resourcesManager.confirmDiscardAddingResource()) {
+      $cwa.admin.emptyStack();
+    }
+    return;
+  }
+  disableButton.value = true;
+  const result = await $cwa.resourcesManager.deleteResource({
+    endpoint: iri.value,
+    refreshEndpoints: $cwa.resources.getRefreshEndpointsForDelete(iri.value)
+  });
+  if (result !== false) {
+    $cwa.admin.emptyStack();
+  }
+  disableButton.value = false;
+}
+const isDeleteEnabled = computed(() => {
+  if (!iri.value) {
+    return false;
+  }
+  if (getResourceTypeFromIri(iri.value) === CwaResourceTypes.COMPONENT_GROUP) {
+    return !$cwa.admin.resourceStackManager.isComponentGroupDisabled(iri.value, resource.value?.data?.location);
+  }
+  if (isAddingNew.value || $cwa.admin.resourceStackManager.isEditingLayout.value || !$cwa.resources.isDataPage.value) {
+    return true;
+  }
+  const groupIri = $cwa.admin.resourceStackManager.getClosestStackItemByType(CwaResourceTypes.COMPONENT_GROUP);
+  return $cwa.resources.isPageDataResource(iri.value).value || !!groupIri;
+});
+const isAddingNew = computed(() => {
+  return iri.value === NEW_RESOURCE_IRI;
+});
+</script>
+
+<template>
+  <div class="cwa:flex cwa:gap-x-4 cwa:items-center">
+    <div class="cwa:text-sm">
+      {{ isAddingNew ? "[New Resource]" : iri }}
+    </div>
+    <div v-if="isDeleteEnabled">
+      <CwaUiFormButton
+        color="grey"
+        button-class="cwa:min-w-[100px]"
+        :disabled="disableButton"
+        @click="handleDelete"
+      >
+        {{ isAddingNew ? "Discard" : "Delete" }}
+      </CwaUiFormButton>
+    </div>
+  </div>
+</template>

package/dist/runtime/templates/components/main/admin/resource-manager/_tabs/ResourceInfoTab.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, import("#cwa/composables/cwa-resource-manager-tab").CwaResourceManagerTabMeta, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;