@cwa/nuxt-edge 0.0.0-29696494.72f11a4

package/dist/runtime/templates/components/main/admin/resource-manager/_tabs/component/Order.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/component/Order.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { computed } from "vue";
+import { useCwaResourceManagerTab } from "#cwa/composables/cwa-resource-manager-tab";
+import { DEFAULT_TAB_ORDER } from "#cwa/admin/manager-tabs-resolver";
+import { CwaResourceTypes } from "#cwa/resources/resource-utils";
+const { exposeMeta, createComputedState, $cwa } = useCwaResourceManagerTab({
+  name: "Order",
+  order: DEFAULT_TAB_ORDER
+});
+defineExpose(exposeMeta);
+const reordering = createComputedState("reordering", false);
+const positionIri = $cwa.admin.resourceStackManager.getClosestStackItemByType(CwaResourceTypes.COMPONENT_POSITION);
+const orderValue = computed({
+  get() {
+    if (!positionIri) {
+      return 0;
+    }
+    return $cwa.resources.getPositionSortDisplayNumber(positionIri) || 0;
+  },
+  set(newValue) {
+    if (!positionIri) {
+      return;
+    }
+    $cwa.admin.eventBus.emit("reorder", {
+      positionIri,
+      location: newValue
+    });
+  }
+});
+function movePosition(location) {
+  if (!positionIri) {
+    return;
+  }
+  $cwa.admin.eventBus.emit("reorder", {
+    positionIri,
+    location
+  });
+}
+function moveUp() {
+  movePosition("previous");
+}
+function moveDown() {
+  movePosition("next");
+}
+</script>
+
+<template>
+  <div>
+    <div class="cwa:flex cwa:gap-x-4">
+      <CwaUiFormToggle
+        v-model="reordering"
+        label="Enable reordering"
+      />
+      <div
+        class="cwa:flex cwa:gap-x-4"
+        :class="{ 'cwa:pointer-events-none cwa:opacity-30': !reordering || $cwa.resourcesManager.requestCount.value }"
+      >
+        <div class="cwa:max-w-[100px]">
+          <CwaUiFormInput
+            v-model="orderValue"
+            type="number"
+          />
+        </div>
+        <div class="cwa:flex cwa:gap-x-2">
+          <CwaUiFormButton @click="moveUp">
+            Move Up
+          </CwaUiFormButton>
+          <CwaUiFormButton @click="moveDown">
+            Move Down
+          </CwaUiFormButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/templates/components/main/admin/resource-manager/_tabs/component/Order.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;

package/dist/runtime/templates/components/main/admin/resource-manager/_tabs/component/Publish.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/component/Publish.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { useCwaResourceManagerTab } from "#cwa/composables/cwa-resource-manager-tab";
+import { DEFAULT_TAB_ORDER } from "#cwa/admin/manager-tabs-resolver";
+import { getPublishedResourceState } from "#cwa/resources/resource-utils";
+const { exposeMeta, resource, $cwa, iri } = useCwaResourceManagerTab({
+  name: "Publish",
+  order: DEFAULT_TAB_ORDER
+});
+const publishableState = computed(() => resource.value ? getPublishedResourceState(resource.value) : void 0);
+const editLiveVersion = ref(publishableState.value || false);
+const alternateIri = computed(() => {
+  if (!iri.value) {
+    return;
+  }
+  if (publishableState.value) {
+    return $cwa.resources.findDraftComponentIri(iri.value).value;
+  }
+  return $cwa.resources.findPublishedComponentIri(iri.value).value;
+});
+watch(editLiveVersion, (isEditLive) => {
+  $cwa.admin.resourceStackManager.forcePublishedVersion.value = isEditLive;
+});
+watch(iri, () => {
+  editLiveVersion.value = publishableState.value || false;
+});
+defineExpose(exposeMeta);
+</script>
+
+<template>
+  <div>
+    <CwaUiFormToggle
+      v-if="alternateIri"
+      v-model="editLiveVersion"
+      label="Edit live version"
+    />
+    <span v-else>
+      {{ publishableState === false ? "Draft" : "Live" }}
+    </span>
+  </div>
+</template>

package/dist/runtime/templates/components/main/admin/resource-manager/_tabs/component/Publish.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;

package/dist/runtime/templates/components/main/admin/resource-manager/_tabs/component/Ui.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/component/Ui.vue

@@ -0,0 +1,114 @@
+<script setup>
+import { computed, onMounted, ref, watch, watchEffect } from "vue";
+import { watchOnce } from "@vueuse/core";
+import {
+  useCwaResourceManagerTab
+} from "#cwa/composables/cwa-resource-manager-tab";
+import { DEFAULT_TAB_ORDER } from "#cwa/admin/manager-tabs-resolver";
+import { useCwaResourceModel } from "#cwa/composables/cwa-resource-model";
+import { useCwaSelect } from "#cwa/composables/cwa-select";
+import { useDataResolver } from "#cwa/templates/components/core/useDataResolver";
+const { exposeMeta, $cwa, iri } = useCwaResourceManagerTab({
+  name: "UI",
+  order: DEFAULT_TAB_ORDER
+});
+const savedUiComponent = computed(() => iri.value ? $cwa.resources.getResource(iri.value).value?.data?.uiComponent : void 0);
+const uiComponentModel = useCwaResourceModel(iri, "uiComponent", {
+  debounceTime: 0
+});
+const uiClassNamesModel = useCwaResourceModel(iri, "uiClassNames", {
+  debounceTime: 0
+});
+const uiSelect = useCwaSelect(uiComponentModel.model);
+const classNamesSelect = useCwaSelect(uiClassNamesModel.model);
+const componentMeta = ref([]);
+const current = computed(() => $cwa.admin.resourceStackManager.currentStackItem.value);
+const uiOptions = computed(() => {
+  const options = [{
+    label: "Default",
+    value: null
+  }];
+  componentMeta.value.forEach((meta, index) => {
+    options.push({
+      label: meta?.cwaResource.name || current.value?.ui?.[index] || "Unknown",
+      value: current.value?.ui?.[index]
+    });
+  });
+  return options;
+});
+const classOptions = computed(() => {
+  const options = [{
+    label: "Default",
+    value: null
+  }];
+  const currentClasses = current.value?.styles?.value?.classes;
+  if (currentClasses) {
+    for (const [styleName, styles] of Object.entries(currentClasses)) {
+      options.push({
+        label: styleName,
+        value: styles
+      });
+    }
+  }
+  return options;
+});
+const disabled = exposeMeta.disabled;
+watchEffect(() => {
+  const classesObj = current.value?.styles?.value?.classes;
+  disabled.value = (!classesObj || !Object.keys(classesObj).length) && !current.value?.ui?.length;
+});
+const components = computed(() => {
+  return current.value?.ui;
+});
+const resolverProps = computed(() => {
+  return {
+    iri: iri.value
+  };
+});
+const { startDataResolver } = useDataResolver(componentMeta, {
+  components,
+  props: resolverProps,
+  propsValidator: (props) => {
+    return !!props.iri;
+  }
+});
+startDataResolver();
+onMounted(() => {
+  watch(uiSelect.model, () => {
+    watchOnce(savedUiComponent, () => {
+      uiClassNamesModel.model.value = null;
+      classNamesSelect.model.value = null;
+    });
+  });
+  watchEffect(() => {
+    uiSelect.options.value = uiOptions.value;
+    classNamesSelect.options.value = classOptions.value;
+  });
+});
+defineExpose(exposeMeta);
+</script>
+
+<template>
+  <div>
+    <div class="cwa:flex cwa:gap-x-6">
+      <CwaUiFormLabelWrapper
+        v-if="uiSelect.options.value.length > 1"
+        label="UI:"
+      >
+        <CwaUiFormSelect
+          v-model="uiSelect.model.value"
+          :options="uiSelect.options.value"
+        />
+      </CwaUiFormLabelWrapper>
+      <CwaUiFormLabelWrapper
+        v-if="classNamesSelect.options.value.length > 1"
+        label="Style:"
+      >
+        <CwaUiFormSelect
+          v-model="classNamesSelect.model.value"
+          :options="classNamesSelect.options.value"
+        />
+      </CwaUiFormLabelWrapper>
+    </div>
+  </div>
+</template>

package/dist/runtime/templates/components/main/admin/resource-manager/_tabs/component/Ui.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;

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, import("#imports").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/group/Group.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { useCwaResourceManagerTab } from "#cwa/composables/cwa-resource-manager-tab";
+import { DEFAULT_TAB_ORDER } from "#cwa/admin/manager-tabs-resolver";
+import { useCwa } from "#imports";
+const $cwa = useCwa();
+const { exposeMeta, iri } = useCwaResourceManagerTab({
+  name: "Group",
+  order: DEFAULT_TAB_ORDER
+});
+defineExpose(exposeMeta);
+function addComponent(addAfter) {
+  if (!iri.value) {
+    return;
+  }
+  $cwa.resourcesManager.initAddResource(iri.value, addAfter, $cwa.admin.resourceStackManager.resourceStack.value);
+}
+function addStart() {
+  addComponent(false);
+}
+function addEnd() {
+  addComponent(true);
+}
+</script>
+
+<template>
+  <div class="cwa:flex cwa:gap-x-4">
+    <CwaUiFormButton @click="addStart">
+      Add to start
+    </CwaUiFormButton>
+    <CwaUiFormButton @click="addEnd">
+      Add to end
+    </CwaUiFormButton>
+  </div>
+</template>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, import("#imports").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/position/DataPage.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/position/DataPage.vue

@@ -0,0 +1,104 @@
+<script setup>
+import { computed, ref } from "vue";
+import { useCwaResourceManagerTab } from "#cwa/composables/cwa-resource-manager-tab";
+import { DEFAULT_TAB_ORDER } from "#cwa/admin/manager-tabs-resolver";
+const loadingDynamicMetadata = ref(false);
+const { exposeMeta, resource, $cwa, iri } = useCwaResourceManagerTab({
+  name: "Data Placeholder",
+  order: DEFAULT_TAB_ORDER
+});
+defineExpose(exposeMeta);
+const hasDynamicComponent = computed(() => {
+  if (!resource.value?.data?.component) {
+    return false;
+  }
+  if (!resource.value?.data?._metadata.staticComponent) {
+    return true;
+  }
+  return resource.value?.data?.component !== resource.value?.data?._metadata.staticComponent;
+});
+const availablePropsToComponentNames = computed(() => {
+  const pageData = $cwa.resources.pageData?.value;
+  if (!pageData) {
+    return {};
+  }
+  return pageData?.data?._metadata.pageDataMetadata.properties.reduce(
+    (obj, item) => {
+      obj[item.property] = item.componentShortName;
+      return obj;
+    },
+    {}
+  ) || {};
+});
+const pageDataProperty = computed(() => {
+  return resource.value?.data?.pageDataProperty;
+});
+const componentName = computed(() => {
+  if (!pageDataProperty.value) {
+    return;
+  }
+  return availablePropsToComponentNames.value?.[pageDataProperty.value];
+});
+const resourceConfig = computed(() => {
+  if (!componentName.value) {
+    return;
+  }
+  return $cwa.resourcesConfig[componentName.value];
+});
+const dynamicComponentName = computed(() => {
+  return resourceConfig.value?.name || componentName.value;
+});
+const instantAdd = computed(() => !!resourceConfig.value?.instantAdd);
+async function getApiMetadata() {
+  if (!componentName.value) {
+    throw new Error("Cannot get API Metadata when componentName is not set");
+  }
+  const apiComponents = await $cwa.getComponentMetadata(false, false);
+  if (!apiComponents) {
+    throw new Error("Could not retrieve component metadata from the API");
+  }
+  return apiComponents[componentName.value];
+}
+async function addDynamicComponent() {
+  loadingDynamicMetadata.value = true;
+  try {
+    const apiMetadata = await getApiMetadata();
+    if (!componentName.value || !apiMetadata || !iri.value || !pageDataProperty.value) {
+      return;
+    }
+    await $cwa.resourcesManager.initAddResource(iri.value, null, $cwa.admin.resourceStackManager.resourceStack.value, pageDataProperty.value);
+    await $cwa.resourcesManager.setAddResourceEventResource(componentName.value, apiMetadata.endpoint, apiMetadata.isPublishable, instantAdd.value);
+  } finally {
+    loadingDynamicMetadata.value = false;
+  }
+}
+function selectComponent() {
+  const componentIri = resource.value?.data?.component;
+  if (!componentIri) {
+    return;
+  }
+  $cwa.admin.eventBus.emit("selectResource", componentIri);
+}
+</script>
+
+<template>
+  <div>
+    <div class="cwa:flex cwa:gap-x-4 cwa:items-center">
+      <div>
+        <CwaUiFormButton
+          v-if="hasDynamicComponent"
+          @click="selectComponent"
+        >
+          Select Component
+        </CwaUiFormButton>
+        <CwaUiFormButton
+          v-else-if="dynamicComponentName"
+          :disabled="loadingDynamicMetadata"
+          @click="addDynamicComponent"
+        >
+          Add {{ dynamicComponentName }}
+        </CwaUiFormButton>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/templates/components/main/admin/resource-manager/_tabs/position/DataPage.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;

package/dist/runtime/templates/components/main/admin/resource-manager/_tabs/position/DynamicPage.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/position/DynamicPage.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { onMounted } from "vue";
+import { useCwaResourceManagerTab } from "#cwa/composables/cwa-resource-manager-tab";
+import { DEFAULT_TAB_ORDER } from "#cwa/admin/manager-tabs-resolver";
+import { useCwaResourceModel } from "#cwa/composables/cwa-resource-model";
+import { useCwaSelect } from "#cwa/composables/cwa-select";
+import {
+  useDynamicPositionSelectOptions
+} from "#cwa/templates/components/main/admin/_common/useDynamicPositionSelectOptions";
+const { exposeMeta, iri, $cwa, resource } = useCwaResourceManagerTab({
+  name: "Dynamic Component",
+  order: DEFAULT_TAB_ORDER
+});
+const { getOptions } = useDynamicPositionSelectOptions($cwa);
+const { model } = useCwaResourceModel(iri, "pageDataProperty", {
+  debounceTime: 0
+});
+const select = useCwaSelect(model);
+select.options.value = [{
+  label: "Loading...",
+  value: void 0
+}];
+async function loadOps() {
+  select.options.value = await getOptions();
+}
+async function addFallbackComponent() {
+  if (!iri.value) {
+    return;
+  }
+  await $cwa.resourcesManager.initAddResource(iri.value, null, $cwa.admin.resourceStackManager.resourceStack.value);
+}
+onMounted(() => {
+  loadOps();
+});
+defineExpose(exposeMeta);
+</script>
+
+<template>
+  <div>
+    <div class="cwa:flex cwa:gap-x-4 cwa:items-center">
+      <CwaUiFormSelect
+        v-model="select.model.value"
+        :options="select.options.value"
+      />
+      <div v-if="!resource?.data?.component">
+        <CwaUiFormButton @click="addFallbackComponent">
+          Add Fallback Component
+        </CwaUiFormButton>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/templates/components/main/admin/resource-manager/_tabs/position/DynamicPage.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;

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

@@ -0,0 +1,8 @@
+import type { CwaResource } from '#cwa/resources/resource-utils';
+type __VLS_Props = {
+    currentIri: string;
+    resource: CwaResource;
+};
+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/cta/CurrentResourceCta.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { computed, ref } from "vue";
+import { DateTime } from "luxon";
+import {
+  CwaResourceTypes,
+  getPublishedResourceState,
+  getResourceTypeFromIri
+} from "#cwa/resources/resource-utils";
+import { useCwa } from "#cwa/composables/cwa";
+const props = defineProps({
+  currentIri: { type: String, required: true },
+  resource: { type: Object, required: true }
+});
+const $cwa = useCwa();
+const publishing = ref(false);
+const publishedState = computed(() => {
+  if (!props.currentIri || !props.resource) {
+    return;
+  }
+  return getPublishedResourceState({ data: props.resource });
+});
+const resourceType = computed(() => {
+  return props.currentIri ? getResourceTypeFromIri(props.currentIri) : void 0;
+});
+const buttonLabel = computed(() => {
+  if (publishedState.value !== false) {
+    return;
+  }
+  return "Publish";
+});
+const buttonOptions = computed(() => {
+  const ops = [];
+  if (resourceType.value === CwaResourceTypes.COMPONENT_POSITION || resourceType.value === CwaResourceTypes.COMPONENT) {
+    ops.push([
+      {
+        label: "Add Before",
+        value: "add-before"
+      },
+      {
+        label: "Add After",
+        value: "add-after"
+      }
+    ]);
+  } else if (resourceType.value === CwaResourceTypes.COMPONENT_GROUP) {
+    ops.push([
+      {
+        label: "Add to Start",
+        value: "add-before"
+      },
+      {
+        label: "Add to End",
+        value: "add-after"
+      }
+    ]);
+  }
+  return ops;
+});
+async function publishResource() {
+  publishing.value = true;
+  await $cwa.resourcesManager.updateResource({
+    endpoint: props.currentIri,
+    data: {
+      publishedAt: DateTime.local().toUTC().toISO()
+    }
+  });
+  publishing.value = false;
+}
+function handleManagerCtaClick(value) {
+  if (!value) {
+    buttonLabel.value === "Publish" && publishResource();
+    return;
+  }
+  if (typeof value === "string") {
+    if (["add-before", "add-after"].includes(value)) {
+      const addAfter = value === "add-after";
+      $cwa.resourcesManager.initAddResource(props.currentIri, addAfter, $cwa.admin.resourceStackManager.resourceStack.value);
+    }
+    if (value === "clone") {
+    }
+  }
+}
+</script>
+
+<template>
+  <CwaUiFormButton
+    color="grey"
+    button-class="cwa:min-w-[100px]"
+    :options="buttonOptions"
+    :disabled="publishing"
+    @click="handleManagerCtaClick"
+  >
+    {{ buttonLabel }}
+  </CwaUiFormButton>
+</template>

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

@@ -0,0 +1,8 @@
+import type { CwaResource } from '#cwa/resources/resource-utils';
+type __VLS_Props = {
+    currentIri: string;
+    resource: CwaResource;
+};
+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/cta/NewResourceCta.d.vue.ts

@@ -0,0 +1,8 @@
+import type { CwaResource } from '#cwa/resources/resource-utils';
+type __VLS_Props = {
+    currentIri: string;
+    resource: CwaResource;
+};
+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/cta/NewResourceCta.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { computed, ref } from "vue";
+import { consola } from "consola";
+import { useCwa } from "#cwa/composables/cwa";
+const props = defineProps({
+  currentIri: { type: String, required: true },
+  resource: { type: Object, required: true }
+});
+const $cwa = useCwa();
+const addingMeta = computed(() => props.resource?._metadata.adding);
+const isPublishable = computed(() => addingMeta.value?.isPublishable);
+const isAdding = ref(false);
+const buttonLabel = computed(() => {
+  return isPublishable.value ? "Add Draft" : "Add";
+});
+const buttonOptions = computed(() => {
+  const ops = [];
+  ops.push({ label: "Discard", value: "add-discard" });
+  if (isPublishable.value) {
+    ops.push({ label: "Add and Publish", value: "add-publish" });
+  }
+  return ops;
+});
+async function addResourceAction(publish) {
+  isAdding.value = true;
+  try {
+    await $cwa.resourcesManager.addResourceAction(publish);
+    $cwa.admin.emptyStack();
+  } catch (e) {
+    consola.error(e);
+  }
+  isAdding.value = false;
+}
+async function handleManagerCtaClick(value) {
+  if (!value) {
+    await addResourceAction(buttonLabel.value !== "Add Draft");
+    return;
+  }
+  if (value === "add-discard") {
+    await $cwa.resourcesManager.confirmDiscardAddingResource() && $cwa.admin.emptyStack();
+    return;
+  }
+  if (value === "add-publish") {
+    await addResourceAction(true);
+  }
+}
+</script>
+
+<template>
+  <CwaUiFormButton
+    color="grey"
+    button-class="cwa:min-w-[100px]"
+    :options="buttonOptions"
+    :disabled="isAdding"
+    @click="handleManagerCtaClick"
+  >
+    {{ buttonLabel }}
+  </CwaUiFormButton>
+</template>