@cwa/nuxt-edge 1.0.0-29138192.e49c1a0

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

@@ -0,0 +1,205 @@
+<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/runtime/templates/components/core/DialogBox.vue";
+import { useCwa, useCwaSelect } from "#imports";
+import Spinner from "#cwa/runtime/templates/components/utils/Spinner.vue";
+import {
+  useDynamicPositionSelectOptions
+} from "#cwa/runtime/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 filtered = allowedComponents ? asEntries.filter(
+    ([_, value]) => allowedComponents.includes(value.endpoint)
+  ) : asEntries;
+  const mapped = filtered.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(() => {
+  if (selectedComponent.value !== "ComponentPosition") {
+    return {};
+  }
+  return {
+    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,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/templates/components/main/admin/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,6 @@
+type __VLS_Props = {
+    modelValue: boolean;
+    virtualElement: any;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/templates/components/main/admin/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,7 @@
+import type { CwaResourceManagerTabOptions } from '#cwa/runtime/composables/cwa-resource-manager-tab';
+type __VLS_Props = {
+    tab: CwaResourceManagerTabOptions;
+    selected: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/templates/components/main/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,13 @@
+import type { CwaResourceManagerTabOptions } from '#cwa/runtime/composables/cwa-resource-manager-tab';
+type __VLS_Props = {
+    tabs: CwaResourceManagerTabOptions[];
+};
+declare function resetTabs(newIndex?: number): void;
+declare const _default: 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>;
+export default _default;

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

@@ -0,0 +1,59 @@
+<script setup>
+import { computed, ref } from "vue";
+import { useCwaResourceManagerTab } from "#cwa/runtime/composables/cwa-resource-manager-tab";
+import { DEFAULT_TAB_ORDER } from "#cwa/runtime/admin/manager-tabs-resolver";
+import { NEW_RESOURCE_IRI } from "#cwa/runtime/storage/stores/resources/state";
+const { exposeMeta, iri, $cwa } = 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;
+  }
+  return isAddingNew.value || !$cwa.resources.isDataPage.value || $cwa.resources.isPageDataResource(iri.value).value || $cwa.admin.resourceStackManager.isEditingLayout.value;
+});
+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,6 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    disabled: import("vue").Ref<boolean>;
+    name: string;
+    order?: number | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,75 @@
+<script setup>
+import { computed } from "vue";
+import { useCwaResourceManagerTab } from "#cwa/runtime/composables/cwa-resource-manager-tab";
+import { DEFAULT_TAB_ORDER } from "#cwa/runtime/admin/manager-tabs-resolver";
+import { CwaResourceTypes } from "#cwa/runtime/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,6 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    disabled: import("vue").Ref<boolean>;
+    name: string;
+    order?: number | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,41 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { useCwaResourceManagerTab } from "#cwa/runtime/composables/cwa-resource-manager-tab";
+import { DEFAULT_TAB_ORDER } from "#cwa/runtime/admin/manager-tabs-resolver";
+import { getPublishedResourceState } from "#cwa/runtime/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,6 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    disabled: import("vue").Ref<boolean>;
+    name: string;
+    order?: number | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,101 @@
+<script setup>
+import { computed, onMounted, ref, watch, watchEffect } from "vue";
+import { watchOnce } from "@vueuse/core";
+import {
+  useCwaResourceManagerTab
+} from "#cwa/runtime/composables/cwa-resource-manager-tab";
+import { DEFAULT_TAB_ORDER } from "#cwa/runtime/admin/manager-tabs-resolver";
+import { useCwaResourceModel } from "#cwa/runtime/composables/cwa-resource-model";
+import { useCwaSelect } from "#cwa/runtime/composables/cwa-select";
+import { useDataResolver } from "#cwa/runtime/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;
+disabled.value = !current.value?.styles?.value?.classes.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-2">
+      <CwaUiFormSelect
+        v-model="uiSelect.model.value"
+        :options="uiSelect.options.value"
+      />
+      <CwaUiFormSelect
+        v-model="classNamesSelect.model.value"
+        :options="classNamesSelect.options.value"
+      />
+    </div>
+  </div>
+</template>

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

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