@cwa/nuxt-edge 1.0.0-29138192.e49c1a0

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

@@ -0,0 +1,53 @@
+<template>
+  <label :for="inputId">
+    <input
+      :id="inputId"
+      v-model="model"
+      class="cwa:sr-only cwa:peer/checkbox"
+      type="checkbox"
+      :value="value"
+    >
+    <button
+      :class="['cwa:cursor-pointer', 'cwa:transition-opacity', 'cwa:border-2', 'cwa:rounded', 'cwa:py-1', 'cwa:px-4', 'cwa:opacity-50', 'cwa:peer-checked/checkbox:opacity-100', backgroundColorClass, borderColorClass]"
+      @click="toggleCheckbox"
+    >
+      {{ label }}
+    </button>
+  </label>
+</template>
+
+<script setup>
+import { computed, useId } from "vue";
+const props = defineProps({
+  modelValue: { type: [Array, null], required: true },
+  value: { type: String, required: true },
+  label: { type: String, required: true },
+  backgroundColorClass: { type: String, required: true },
+  borderColorClass: { type: String, required: true }
+});
+const inputId = useId();
+const emit = defineEmits(["update:modelValue"]);
+function toggleCheckbox() {
+  if (isChecked.value) {
+    if (model.value === null) {
+      return;
+    }
+    model.value = model.value.filter((v) => {
+      return v !== props.value;
+    });
+    return;
+  }
+  model.value = [...model.value || [], props.value];
+}
+const model = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emit("update:modelValue", value);
+  }
+});
+const isChecked = computed(() => {
+  return model.value && model.value.includes(props.value);
+});
+</script>

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

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    modelValue: string[] | null;
+    value: string;
+    label: string;
+    backgroundColorClass: string;
+    borderColorClass: string;
+};
+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/core/admin/ListHeading.vue

@@ -0,0 +1,32 @@
+<template>
+  <ListContainer class="cwa:bg-dark cwa:pt-12 cwa:pb-8 cwa:border-b-2 cwa:border-b-stone-700">
+    <div class="cwa:w-full cwa:max-w-2xl">
+      <slot />
+      <div class="cwa:flex cwa:gap-x-6 cwa:items-center">
+        <div>
+          <h1 class="cwa:text-4xl cwa:text-light">
+            {{ title }}
+          </h1>
+        </div>
+        <div v-if="!hideAdd">
+          <button
+            class="cwa:text-white cwa:bg-blue-600/90 cwa:hover:bg-blue-600 cwa:border-transparent cwa:p-2.5 cwa:cursor-pointer"
+            @click="$emit('add')"
+          >
+            <CwaUiIconPlusIcon class="cwa:w-4 cwa:h-4" />
+            <span class="cwa:sr-only">Add</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </ListContainer>
+</template>
+
+<script setup>
+import ListContainer from "#cwa/runtime/templates/components/core/admin/ListContainer.vue";
+defineProps({
+  title: { type: String, required: true },
+  hideAdd: { type: Boolean, required: false }
+});
+defineEmits(["add"]);
+</script>

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

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    title: string;
+    hideAdd?: boolean;
+};
+declare var __VLS_5: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    add: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onAdd?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,87 @@
+<template>
+  <div class="cwa:flex cwa:justify-between cwa:items-center">
+    <div class="cwa:text-stone-400 cwa:py-1.5 cwa:text-sm">
+      {{ showingFrom }} to {{ showingTo }} of {{ totalItems }} results
+    </div>
+    <div>
+      <ul class="cwa:flex cwa:bg-dark cwa:rounded-lg cwa:overflow-hidden cwa:border cwa:border-stone-600">
+        <ListPaginationButton
+          :disabled="isFirst"
+          @click="pageModel--"
+        >
+          &lt;
+        </ListPaginationButton>
+        <ListPaginationButton
+          v-for="pageNumber of pages"
+          :key="`page-change-button-${pageNumber}`"
+          :selected="pageNumber === pageModel"
+          @click="pageModel = pageNumber"
+        >
+          {{ pageNumber }}
+        </ListPaginationButton>
+        <ListPaginationButton
+          :disabled="isLast"
+          @click="pageModel++"
+        >
+          &gt;
+        </ListPaginationButton>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import ListPaginationButton from "./ListPaginationButton.vue";
+const props = defineProps({
+  totalItems: { type: Number, required: true }
+});
+const pageModel = defineModel("page", { type: Number, ...{ required: true } });
+const perPageModel = defineModel("perPage", { type: Number, ...{ required: true } });
+const showingFrom = computed(() => {
+  return 1 + (pageModel.value - 1) * perPageModel.value;
+});
+const showingTo = computed(() => {
+  return Math.min(props.totalItems, showingFrom.value - 1 + perPageModel.value);
+});
+const isFirst = computed(() => {
+  return pageModel.value <= 1;
+});
+const isLast = computed(() => {
+  return showingTo.value === props.totalItems;
+});
+const totalPages = computed(() => {
+  if (!perPageModel.value) {
+    return 1;
+  }
+  return Math.ceil(props.totalItems / perPageModel.value);
+});
+const pages = computed(() => {
+  if (!totalPages.value) {
+    return [];
+  }
+  const allPages = Array.from(Array(totalPages.value), (_, x) => x + 1);
+  const maxPagesToDisplay = 7;
+  if (allPages.length < maxPagesToDisplay) {
+    return allPages;
+  }
+  const displayPages = [];
+  displayPages.push(pageModel.value);
+  let lowest = pageModel.value;
+  let highest = pageModel.value;
+  let displayCounter = 1;
+  while (displayCounter < maxPagesToDisplay) {
+    displayCounter++;
+    if ((displayCounter % 2 === 0 || highest >= totalPages.value) && lowest > 1) {
+      lowest--;
+      displayPages.unshift(lowest);
+      continue;
+    }
+    if (highest < totalPages.value) {
+      highest++;
+      displayPages.push(highest);
+    }
+  }
+  return displayPages;
+});
+</script>

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

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    totalItems: number;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    'page': number;
+    'perPage': number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:page": (value: number) => any;
+    "update:perPage": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:page"?: ((value: number) => any) | undefined;
+    "onUpdate:perPage"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,18 @@
+<template>
+  <li class="cwa:border-r cwa:last:border-0 cwa:border-stone-600">
+    <button
+      :disabled="!!disabled"
+      class="cwa:py-1.5 cwa:px-3 cwa:transition-colors cwa:font-bold cwa:cursor-pointer"
+      :class="[disabled ? 'cwa:opacity-50' : 'cwa:hover:bg-stone-700 cwa:hover:text-light', selected ? 'cwa:text-light cwa:bg-stone-700' : 'cwa:text-stone-400']"
+    >
+      <slot />
+    </button>
+  </li>
+</template>
+
+<script setup>
+defineProps({
+  disabled: { type: Boolean, required: false },
+  selected: { type: Boolean, required: false }
+});
+</script>

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

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    disabled?: boolean;
+    selected?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,260 @@
+<template>
+  <ResourceModal
+    v-if="localResourceData"
+    v-model="localResourceData.reference"
+    title-placeholder="No Reference"
+    :is-loading="isLoading"
+    :border-color-class="localResourceData.isTemplate ? 'cwa:border-b-yellow' : 'cwa:border-b-blue-600'"
+    @close="$emit('close')"
+    @save="saveTitle"
+  >
+    <template #title>
+      <PageTypeSelect v-model="localResourceData.isTemplate" />
+    </template>
+    <template
+      v-if="!hideViewLink && !isAdding"
+      #icons
+    >
+      <div>
+        <NuxtLink :to="localResourceData['@id']">
+          <CwaUiIconEyeIcon class="cwa:w-9" />
+        </NuxtLink>
+      </div>
+    </template>
+    <ResourceModalTabs :tabs="tabs">
+      <template #details>
+        <div class="cwa:flex cwa:flex-col cwa:gap-y-2">
+          <div>
+            <ModalInput
+              v-model="localResourceData.title"
+              label="SEO Page Title"
+            />
+          </div>
+          <div>
+            <ModalInput
+              v-model="localResourceData.metaDescription"
+              label="SEO Meta Description"
+            />
+          </div>
+          <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>
+          <div class="cwa:flex cwa:justify-end cwa:pt-2 cwa:gap-x-2">
+            <div>
+              <CwaUiFormButton
+                color="dark"
+                :disabled="isUpdating"
+                @click="saveResource(true)"
+              >
+                {{ isAdding ? "Add" : "Save" }} & Close
+              </CwaUiFormButton>
+            </div>
+            <div>
+              <CwaUiFormButton
+                color="blue"
+                :disabled="isUpdating"
+                @click="() => saveResource(false)"
+              >
+                {{ isAdding ? "Add Now" : "Save" }}
+              </CwaUiFormButton>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template #routes>
+        <RoutesTab
+          v-if="resource && resource.hasOwnProperty('@id')"
+          :page-resource="resource"
+          @reload="loadResource"
+        />
+      </template>
+      <template #info>
+        <div class="cwa:flex cwa:flex-col cwa:gap-y-2">
+          <div>
+            <ModalInfo
+              label="Created"
+              :content="formatDate(localResourceData.createdAt)"
+            />
+          </div>
+          <div>
+            <ModalInfo
+              label="Updated"
+              :content="formatDate(localResourceData.updatedAt)"
+            />
+          </div>
+          <div>
+            <ModalInfo
+              label="ID"
+              :content="localResourceData['@id']"
+            />
+          </div>
+          <div class="cwa:flex cwa:justify-start cwa:pt-6">
+            <div>
+              <CwaUiFormButton
+                :disabled="isUpdating"
+                @click="handleDeleteClick"
+              >
+                Delete
+              </CwaUiFormButton>
+            </div>
+          </div>
+        </div>
+      </template>
+    </ResourceModalTabs>
+  </ResourceModal>
+</template>
+
+<script setup>
+import { computed, onMounted, ref, toRef, watch } from "vue";
+import ResourceModal from "#cwa/runtime/templates/components/core/admin/ResourceModal.vue";
+import ResourceModalTabs, {} from "#cwa/runtime/templates/components/core/admin/ResourceModalTabs.vue";
+import ModalInfo from "#cwa/runtime/templates/components/core/admin/form/ModalInfo.vue";
+import ModalInput from "#cwa/runtime/templates/components/core/admin/form/ModalInput.vue";
+import { useItemPage } from "#cwa/layer/pages/_cwa/composables/useItemPage";
+import { componentNames } from "#components";
+import { useCwa } from "#imports";
+import ModalSelect from "#cwa/runtime/templates/components/core/admin/form/ModalSelect.vue";
+import PageTypeSelect from "#cwa/runtime/templates/components/core/admin/form/PageTypeSelect.vue";
+import RoutesTab from "#cwa/runtime/templates/components/core/admin/RoutesTab.vue";
+const emit = defineEmits(["close", "reload"]);
+const props = defineProps({
+  iri: { type: String, required: false },
+  hideViewLink: { type: Boolean, required: false }
+});
+const $cwa = useCwa();
+const pageComponentNames = computed(() => {
+  return componentNames.filter((n) => n.startsWith("CwaPage"));
+});
+function cleanUiName(componentName) {
+  return componentName.replace(/^CwaPage/, "");
+}
+const pageComponentOptions = computed(() => {
+  const options = [];
+  for (const componentName of pageComponentNames.value) {
+    const cleanName = cleanUiName(componentName);
+    options.push({
+      label: $cwa.pagesConfig?.[cleanName]?.name || cleanName,
+      value: componentName
+    });
+  }
+  return options;
+});
+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 layoutOptions = computed(() => {
+  if (!layouts.value) {
+    return [];
+  }
+  const options = [];
+  for (const layout of layouts.value) {
+    options.push({
+      label: layout.reference,
+      value: layout["@id"]
+    });
+  }
+  return options;
+});
+const { isAdding, isLoading, isUpdating, localResourceData, resource, formatDate, deleteResource, saveResource, saveTitle, loadResource } = useItemPage({
+  createEndpoint: "/_/pages",
+  emit,
+  resourceType: "Page",
+  defaultResource: {
+    isTemplate: false,
+    uiComponent: pageComponentOptions.value[0].value
+  },
+  endpoint: toRef(props, "iri"),
+  routeHashAfterAdd: computed(() => localResourceData.value?.isTemplate ? "#data" : "#routes")
+});
+const tabs = computed(() => {
+  const t = [
+    {
+      label: "Details",
+      id: "details"
+    }
+  ];
+  if (!isAdding.value) {
+    t.push({
+      label: "Routes",
+      id: "routes"
+    });
+    t.push({
+      label: "Info",
+      id: "info"
+    });
+  }
+  return t;
+});
+const currentRequestId = ref(0);
+const layouts = ref();
+function handleDeleteClick() {
+  deleteResource();
+}
+async function loadLayoutOptions() {
+  const thisRequestId = currentRequestId.value + 1;
+  currentRequestId.value = thisRequestId;
+  isLoading.value = true;
+  const { response } = $cwa.fetch({ path: "/_/layouts", noQuery: true });
+  const { _data: data } = await response;
+  if (thisRequestId === currentRequestId.value) {
+    data && (layouts.value = data["hydra:member"]);
+    isLoading.value = false;
+  }
+  if (!layouts.value?.length) {
+    emit("close");
+    return;
+  }
+  if (isAdding.value && localResourceData.value && !localResourceData.value.layout) {
+    localResourceData.value.layout = layoutOptions.value[0].value;
+  }
+}
+watch(() => localResourceData.value?.isTemplate, (isTemplate, oldIsTemplate) => {
+  !isAdding.value && isTemplate !== void 0 && oldIsTemplate !== void 0 && saveResource(false);
+});
+onMounted(() => {
+  loadLayoutOptions();
+});
+</script>

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

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