@cwa/nuxt-edge 1.0.0-29138192.e49c1a0

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

@@ -0,0 +1,10 @@
+import type { CwaResource } from '#cwa/runtime/resources/resource-utils';
+type __VLS_Props = {
+    redirects: CwaResource[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    reload: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onReload?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,273 @@
+<template>
+  <div>
+    <div v-if="currentScreen === 'view'">
+      <div class="cwa:flex cwa:flex-col cwa:gap-y-6">
+        <ModalInfo
+          label="Route"
+          :content="isLoadingRoute ? void 0 : resource?.path"
+        >
+          <Spinner
+            v-if="isLoadingRoute"
+            :show="true"
+          />
+          <CwaUiFormButton
+            v-else
+            :color="resource?.path ? 'dark' : 'blue'"
+            @click="goToManageRoute"
+          >
+            {{ resource?.path ? "Edit" : "Create New Route" }}
+          </CwaUiFormButton>
+        </ModalInfo>
+        <div class="cwa:dark-blur cwa:p-4 cwa:flex cwa:flex-col cwa:gap-y-2.5 cwa:border cwa:rounded-xl cwa:border-stone-600">
+          <div class="cwa:flex cwa:gap-x-4 cwa:items-center">
+            <h2 class="cwa:text-stone-400 cwa:text-2xl">
+              Redirects
+            </h2>
+            <div>
+              <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="addRedirect"
+              >
+                <CwaUiIconPlusIcon class="cwa:w-4 cwa:h-4" />
+                <span class="cwa:sr-only">Add</span>
+              </button>
+            </div>
+          </div>
+          <div>
+            <Spinner
+              v-if="isLoadingRoute"
+              :show="true"
+            />
+            <RouteRedirectsTree
+              v-else-if="resource?.redirectedFrom?.length"
+              :redirects="resource.redirectedFrom"
+              @reload="loadResource"
+            />
+            <p
+              v-else
+              class="cwa:text-lg cwa:font-bold cwa:text-stone-400 cwa:mb-2 cwa:mt-4"
+            >
+              You do not have any redirects
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else-if="currentScreen === 'manage-route' && localResourceData">
+      <div class="cwa:flex cwa:flex-col cwa:gap-y-8">
+        <div>
+          <button
+            class="cwa:cursor-pointer"
+            @click="goBackToViewing"
+          >
+            &lt; Back to Routes
+          </button>
+        </div>
+        <div class="cwa:flex cwa:flex-col cwa:gap-y-4">
+          <div>
+            <ModalInput
+              v-model="localResourceData.path"
+              label="Route path"
+              :placeholder="recommendedRoute"
+            />
+          </div>
+          <div>
+            <p class="cwa:text-sm cwa:text-stone-300">
+              When updating, we will automatically create a new redirect from the old path.
+            </p>
+          </div>
+          <div class="cwa:flex cwa:justify-between">
+            <div>
+              <CwaUiFormButton
+                color="blue"
+                :disabled="disableButtons"
+                @click="saveRoute"
+              >
+                Save Route
+              </CwaUiFormButton>
+            </div>
+            <div v-if="!!routeIri">
+              <CwaUiFormButton
+                color="grey"
+                :disabled="disableButtons"
+                @click="deleteRoute"
+              >
+                Delete Route
+              </CwaUiFormButton>
+            </div>
+          </div>
+        </div>
+        <template v-if="recommendedRoute !== resource?.path">
+          <div class="cwa:w-full cwa:border-b cwa:border-b-stone-600" />
+          <div class="cwa:flex cwa:flex-col cwa:gap-y-4">
+            <ModalInfo
+              label="Recommended route path"
+              :content="recommendedRoute"
+            />
+          </div>
+          <div class="cwa:text-sm cwa:text-stone-300 cwa:flex cwa:flex-col cwa:gap-y-2">
+            <p>This is based on your page title <b>`{{ pageResource.title }}`</b>.</p>
+            <p>It is optimal for search engines to increase the relevance of the page to the title provided. Relevance of page content is important too.</p>
+          </div>
+          <div class="cwa:flex cwa:justify-start">
+            <CwaUiFormButton
+              color="blue"
+              :disabled="disableButtons"
+              @click="generateRoute"
+            >
+              Use Recommended Route
+            </CwaUiFormButton>
+          </div>
+        </template>
+      </div>
+    </div>
+    <div v-else-if="currentScreen === 'create-redirect'">
+      <div class="cwa:flex cwa:flex-col cwa:gap-y-6">
+        <div>
+          <button
+            class="cwa:cursor-pointer"
+            @click="goBackToViewing"
+          >
+            &lt; Back to Routes
+          </button>
+        </div>
+        <div class="cwa:flex cwa:flex-col cwa:gap-y-4">
+          <div>
+            <ModalInput
+              v-model="newRedirectPath"
+              label="Redirect from path"
+              placeholder="/some-path"
+            />
+          </div>
+          <div class="cwa:text-sm cwa:text-stone-300 cwa:flex cwa:flex-col cwa:gap-y-2">
+            <p v-if="newRedirectPath">
+              A user visiting <b class="cwa:bg-dark cwa:p-2">{{ finalPath }}</b> will be redirected to <b class="cwa:bg-dark cwa:p-2">{{ resource?.path }}</b>
+            </p>
+          </div>
+        </div>
+        <div class="cwa:flex cwa:justify-start">
+          <CwaUiFormButton
+            color="blue"
+            :disabled="disableButtons"
+            @click="createRedirect"
+          >
+            Create Redirect
+          </CwaUiFormButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, toRef, watch } from "vue";
+import slugify from "slugify";
+import ModalInfo from "#cwa/runtime/templates/components/core/admin/form/ModalInfo.vue";
+import Spinner from "#cwa/runtime/templates/components/utils/Spinner.vue";
+import { useItemPage } from "#cwa/layer/pages/_cwa/composables/useItemPage";
+import ModalInput from "#cwa/runtime/templates/components/core/admin/form/ModalInput.vue";
+import { useCwa } from "#imports";
+import RouteRedirectsTree from "#cwa/runtime/templates/components/core/admin/RouteRedirectsTree.vue";
+const props = defineProps({
+  pageResource: { type: Object, required: true }
+});
+const emit = defineEmits(["close", "reload"]);
+const $cwa = useCwa();
+const pageResource = toRef(props, "pageResource");
+const routeIri = computed(() => pageResource.value?.route);
+const endpoint = computed(() => routeIri.value ? `${routeIri.value}/redirects` : "add");
+const disableButtons = computed(() => submitting.value || isUpdating.value);
+const submitting = ref(false);
+const newRedirectPath = ref();
+const currentScreen = ref("view");
+const recommendedRoute = computed(() => {
+  if (!props.pageResource.title) {
+    return;
+  }
+  return "/" + slugify(props.pageResource.title.toLowerCase());
+});
+function goToManageRoute() {
+  currentScreen.value = "manage-route";
+}
+function goBackToViewing() {
+  newRedirectPath.value = "";
+  currentScreen.value = "view";
+}
+function addRedirect() {
+  currentScreen.value = "create-redirect";
+}
+const finalPath = computed(() => {
+  return newRedirectPath.value?.startsWith("/") ? newRedirectPath.value : `/${newRedirectPath.value}`;
+});
+async function createRedirect() {
+  submitting.value = true;
+  const newResource = await $cwa.resourcesManager.createResource({
+    endpoint: "/_/routes",
+    data: {
+      name: newRedirectPath.value,
+      path: finalPath.value,
+      redirect: routeIri.value
+    }
+  });
+  submitting.value = false;
+  if (newResource) {
+    goBackToViewing();
+    await loadResource();
+  }
+}
+async function generateRoute() {
+  submitting.value = true;
+  const newResource = await $cwa.resourcesManager.createResource({
+    endpoint: "/_/routes/generate",
+    data: {
+      page: defaultResource.value.page,
+      pageData: defaultResource.value.pageData
+    }
+  });
+  submitting.value = false;
+  if (newResource) {
+    emit("reload");
+    goBackToViewing();
+  }
+}
+async function saveRoute() {
+  const resource2 = await saveResource(true);
+  if (resource2) {
+    await loadResource();
+    emit("reload");
+    goBackToViewing();
+  }
+}
+async function deleteRoute() {
+  await deleteResource();
+  emit("reload");
+  goBackToViewing();
+}
+watch(routeIri, async () => {
+  await loadResource();
+});
+const defaultResource = computed(() => {
+  const obj = {
+    path: ""
+  };
+  if (pageResource.value["@type"] === "Page") {
+    obj.page = pageResource.value["@id"];
+  } else {
+    obj.pageData = pageResource.value["@id"];
+  }
+  return obj;
+});
+const { isLoading: isLoadingRoute, isUpdating, resource, localResourceData, loadResource, deleteResource, saveResource } = useItemPage({
+  createEndpoint: "/_/routes",
+  emit,
+  resourceType: "Route",
+  defaultResource: defaultResource.value,
+  validate(data) {
+    data.name = data.path;
+    return true;
+  },
+  endpoint,
+  iri: routeIri,
+  excludeFields: ["redirectedFrom"]
+});
+</script>

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

@@ -0,0 +1,12 @@
+import type { CwaResource } from '#cwa/runtime/resources/resource-utils';
+type __VLS_Props = {
+    pageResource: CwaResource;
+};
+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;

package/dist/runtime/templates/components/core/admin/form/FilterFormWrapper.vue

@@ -0,0 +1,18 @@
+<template>
+  <label
+    class="cwa:block cwa:text-light/70"
+    :for="inputId"
+  >
+    {{ label }}
+  </label>
+  <span class="cwa:flex cwa:relative">
+    <slot />
+  </span>
+</template>
+
+<script setup>
+defineProps({
+  label: { type: String, required: true },
+  inputId: { type: String, required: false }
+});
+</script>

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

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    label: string;
+    inputId?: string;
+};
+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/form/FilterSelect.vue

@@ -0,0 +1,86 @@
+<script setup>
+import {
+  Listbox,
+  ListboxButton,
+  ListboxOptions,
+  ListboxOption
+} from "@headlessui/vue";
+import { computed } from "vue";
+import { useCwaSelectInput } from "#cwa/runtime/composables/cwa-select-input";
+const emit = defineEmits(["update:modelValue"]);
+const props = defineProps({
+  options: { type: Array, required: true },
+  modelValue: { type: [String, Number, Boolean, Object, null, Array], required: true, skipCheck: true },
+  popper: { type: Object, required: false }
+});
+const { value, compareOptions, selectedOption, trigger, container } = useCwaSelectInput(computed(() => props), emit);
+</script>
+
+<template>
+  <Listbox
+    v-slot="{ open }"
+    v-model="value"
+    :by="compareOptions"
+  >
+    <div class="cwa:relative cwa:inline-flex">
+      <ListboxButton
+        ref="trigger"
+        class="cwa:flex cwa:transition-colors cwa:relative cwa:rounded-lg cwa:py-2 cwa:px-4 cwa:text-left cwa:text-light cwa:w-full cwa:border-0 cwa:cursor-pointer"
+        :class="[open ? 'cwa:bg-stone-700' : 'cwa:bg-stone-700/80']"
+      >
+        <span class="cwa:block cwa:truncate cwa:grow">{{ selectedOption?.label }}</span>
+        <svg
+          class="cwa:-mr-1 cwa:h-6 cwa:w-6 cwa:transition-transform"
+          :class="{ 'cwa:rotate-180': open }"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </ListboxButton>
+      <Transition
+        enter-active-class="cwa:transition-opacity cwa:duration-100 cwa:ease-out"
+        enter-from-class="cwa:opacity-0"
+        enter-to-class="cwa:opacity-100"
+        leave-active-class="cwa:transition-opacity cwa:duration-100 cwa:ease-in"
+        leave-from-class="cwa:opacity-100"
+        leave-to-class="cwa:opacity-0"
+      >
+        <ListboxOptions
+          v-show="open"
+          ref="container"
+          static
+          class="cwa:absolute cwa:max-h-60 cwa:min-w-full cwa:overflow-auto cwa:dark-blur cwa:rounded-lg cwa:z-dialog cwa:border cwa:border-stone-600"
+        >
+          <ListboxOption
+            v-for="option in options"
+            :key="option.label"
+            v-slot="{ active, selected }"
+            as="template"
+            :value="option.value"
+            :disabled="option.disabled"
+          >
+            <li
+              :class="[
+  active ? 'cwa:text-white' : 'cwa:text-stone-400',
+  'cwa:relative cwa:cursor-pointer cwa:select-none cwa:py-2 cwa:px-4'
+]"
+            >
+              <span
+                :class="[
+  selected ? 'cwa:text-white' : '',
+  'cwa:block cwa:truncate'
+]"
+              >{{ option.label }}</span>
+            </li>
+          </ListboxOption>
+        </ListboxOptions>
+      </Transition>
+    </div>
+  </Listbox>
+</template>

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

@@ -0,0 +1,3 @@
+import { type SelectInputProps } from '#cwa/runtime/composables/cwa-select-input';
+declare const _default: import("vue").DefineComponent<SelectInputProps, {}, {}, {}, {}, 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/form/ModalInfo.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="cwa:flex cwa:flex-col cwa:gap-y-1">
+    <span class="cwa:text-stone-400">
+      {{ label }}
+    </span>
+    <div class="cwa:flex cwa:items-center cwa:gap-x-4">
+      <span
+        v-if="content"
+        class="cwa:truncate"
+      >
+        {{ content }}
+      </span>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  label: { type: String, required: true },
+  content: { type: String, required: false }
+});
+</script>

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

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    label: string;
+    content?: string;
+};
+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/form/ModalInput.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="cwa:rounded-lg cwa:py-1.5 cwa:relative cwa:border cwa:bg-dark/90 cwa:border-stone-700 cwa:focus-within:bg-dark cwa:focus-within:border-stone-600">
+    <label
+      class="cwa:px-4 cwa:text-stone-400 cwa:absolute"
+      :for="id"
+    >
+      {{ label }}
+    </label>
+    <input
+      :id="id"
+      v-model="model"
+      :type="type"
+      :placeholder="placeholder"
+      :autocomplete="autocomplete"
+      class="cwa:flex cwa:relative cwa:px-4 cwa:pt-6 cwa:pb-0 cwa:text-left cwa:text-light cwa:w-full cwa:border-0 cwa:items-center cwa:bg-transparent cwa:border-0 cwa:focus:ring-0 cwa:outline-0"
+    >
+  </div>
+</template>
+
+<script setup>
+import { useId } from "vue";
+const id = useId();
+const model = defineModel({ type: String });
+defineProps({
+  label: { type: String, required: true },
+  type: { type: String, required: false },
+  placeholder: { type: String, required: false },
+  autocomplete: { type: String, required: false }
+});
+</script>

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

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

package/dist/runtime/templates/components/core/admin/form/ModalSelect.vue

@@ -0,0 +1,99 @@
+<script setup>
+import {
+  Listbox,
+  ListboxButton,
+  ListboxOptions,
+  ListboxOption,
+  ListboxLabel
+} from "@headlessui/vue";
+import { computed } from "vue";
+import { useCwaSelectInput } from "#cwa/runtime/composables/cwa-select-input";
+const emit = defineEmits(["update:modelValue"]);
+const props = defineProps({
+  options: { type: Array, required: true },
+  modelValue: { type: [String, Number, Boolean, Object, null, Array], required: true, skipCheck: true },
+  popper: { type: Object, required: false },
+  label: { type: String, required: true }
+});
+const { value, compareOptions, selectedOption, trigger, container } = useCwaSelectInput(computed(() => props), emit);
+</script>
+
+<template>
+  <Listbox
+    v-slot="{ open }"
+    v-model="value"
+    :by="compareOptions"
+  >
+    <div class="cwa:relative cwa:w-full">
+      <div
+        class="cwa:rounded-lg cwa:py-1.5 cwa:relative cwa:border"
+        :class="[open ? 'cwa:bg-dark cwa:border-stone-600' : 'cwa:bg-dark/90 cwa:border-stone-700']"
+      >
+        <ListboxLabel class="cwa:px-4 cwa:text-stone-400 cwa:absolute">
+          {{ label }}
+        </ListboxLabel>
+        <ListboxButton
+          ref="trigger"
+          class="cwa:flex cwa:transition-colors cwa:relative cwa:px-4 cwa:text-left cwa:text-light cwa:w-full cwa:border-0 cwa:items-center cwa:cursor-pointer"
+        >
+          <span class="cwa:block cwa:truncate cwa:grow cwa:pt-6">{{ selectedOption?.label }}</span>
+          <svg
+            class="cwa:-mr-1 cwa:h-6 cwa:w-6 cwa:transition-transform"
+            :class="{ 'cwa:rotate-180': open }"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </ListboxButton>
+      </div>
+      <ClientOnly>
+        <Teleport to="body">
+          <Transition
+            enter-active-class="cwa:transition-opacity cwa:duration-100 cwa:ease-out"
+            enter-from-class="cwa:opacity-0"
+            enter-to-class="cwa:opacity-100"
+            leave-active-class="cwa:transition-opacity cwa:duration-100 cwa:ease-in"
+            leave-from-class="cwa:opacity-100"
+            leave-to-class="cwa:opacity-0"
+          >
+            <ListboxOptions
+              v-show="open"
+              ref="container"
+              static
+              class="cwa:absolute cwa:max-h-60 cwa:overflow-auto cwa:dark-blur cwa:rounded-lg cwa:border cwa:border-stone-600 cwa:z-notifications"
+            >
+              <ListboxOption
+                v-for="option in options"
+                :key="option.label"
+                v-slot="{ active, selected }"
+                as="template"
+                :value="option.value"
+                :disabled="option.disabled"
+              >
+                <li
+                  :class="[
+  active ? 'cwa:text-white' : 'cwa:text-stone-400',
+  'cwa:relative cwa:cursor-pointer cwa:select-none cwa:py-2 cwa:px-4'
+]"
+                >
+                  <span
+                    :class="[
+  selected ? 'cwa:text-white' : '',
+  'cwa:block cwa:truncate'
+]"
+                  >{{ option.label }}</span>
+                </li>
+              </ListboxOption>
+            </ListboxOptions>
+          </Transition>
+        </Teleport>
+      </ClientOnly>
+    </div>
+  </Listbox>
+</template>

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

@@ -0,0 +1,6 @@
+import { type SelectInputProps } from '#cwa/runtime/composables/cwa-select-input';
+type __VLS_Props = SelectInputProps & {
+    label: 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;