@cwa/nuxt-edge 0.0.0-29696494.72f11a4

package/dist/runtime/templates/components/main/admin/_common/ResourceLoadingIndicator.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { computed, onMounted, ref, useTemplateRef, watch } from "vue";
+import { useCwa } from "#imports";
+const $cwa = useCwa();
+const requestsOngoing = computed(() => {
+  return $cwa.resourcesManager.requestCount.value > 0;
+});
+const holder = useTemplateRef("holder");
+const currentIndicators = ref([]);
+const indicatorCount = ref();
+onMounted(() => {
+  watch(requestsOngoing, (isRequests) => {
+    if (isRequests) {
+      indicatorCount.value++;
+      if (indicatorCount.value > 100) {
+        indicatorCount.value = 0;
+      }
+      currentIndicators.value.push(indicatorCount.value);
+    } else if (currentIndicators.value.length) {
+      currentIndicators.value.splice(0, 1);
+    }
+  });
+});
+</script>
+
+<template>
+  <div
+    ref="holder"
+    class="cwa:w-full cwa:h-[1px] cwa:pointer-events-none"
+  >
+    <TransitionGroup name="load-indicator">
+      <div
+        v-for="count in currentIndicators"
+        :key="`load-indicator-${count}`"
+        class="cwa:absolute cwa:h-full cwa:bg-orange/30 cwa:top-0 cwa:left-0 cwa:right-0"
+      >
+        <div class="cwa:shadow-[inset_-20px_0_10px_-10px] cwa:shadow-orange/30 cwa:absolute cwa:right-full cwa:w-8 cwa:h-full" />
+        <div class="cwa-loader-inner-holder cwa:transition cwa:duration-300 cwa:left-0 cwa:right-0 cwa:top-0 cwa:h-full">
+          <div class="cwa-loader-inner-indicator cwa:bg-light/30 cwa:h-full cwa:top-0 cwa:absolute cwa:z-10" />
+        </div>
+      </div>
+    </TransitionGroup>
+  </div>
+</template>
+
+<style>
+.load-indicator-enter-active,.load-indicator-leave-active{transition:all .6s ease}.load-indicator-enter-from{opacity:1;right:100%!important}.load-indicator-leave-to{left:100%!important;opacity:1}.load-indicator-leave-to .cwa-loader-inner-holder{left:100%!important;opacity:0!important}@keyframes inner-indicator-animation{0%,5%{left:0;opacity:0;right:100%}45%,55%{opacity:1}50%{left:0;opacity:1;right:0}95%,to{left:100%;opacity:0;right:0}}.cwa-loader-inner-indicator{animation:inner-indicator-animation 2.5s infinite;animation-delay:.8s}
+</style>

package/dist/runtime/templates/components/main/admin/_common/ResourceLoadingIndicator.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/_common/useDynamicPositionSelectOptions.d.ts

@@ -0,0 +1,5 @@
+import type { SelectOption } from '#cwa/composables/cwa-select-input';
+import type Cwa from '#cwa/cwa';
+export declare const useDynamicPositionSelectOptions: ($cwa: Cwa) => {
+    getOptions: () => Promise<SelectOption[]>;
+};

package/dist/runtime/templates/components/main/admin/_common/useDynamicPositionSelectOptions.js

@@ -0,0 +1,19 @@
+export const useDynamicPositionSelectOptions = ($cwa) => {
+  async function getOptions() {
+    const newOptions = [{
+      label: "None",
+      value: null
+    }];
+    const docs = await $cwa.getApiDocumentation();
+    const pageDataMeta = docs?.pageDataMetadata?.["member"];
+    if (pageDataMeta) {
+      for (const { properties } of pageDataMeta) {
+        newOptions.push(...properties.map(({ property }) => ({ label: property, value: property })));
+      }
+    }
+    return newOptions;
+  }
+  return {
+    getOptions
+  };
+};

package/dist/runtime/templates/components/main/admin/header/Header.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/header/Header.vue

@@ -0,0 +1,209 @@
+<template>
+  <div>
+    <div ref="spacer" />
+    <div
+      ref="header"
+      class="cwa:section cwa:border-0 cwa:border-b-2 cwa:border-b-light/30 cwa:fixed cwa:z-manager cwa:w-full cwa:h-18 cwa:top-0 cwa:dark-blur"
+      :class="highlightClass"
+      @click.stop
+    >
+      <div class="cwa:flex cwa:justify-between cwa:items-center">
+        <div class="cwa:absolute cwa:left-1/2 cwa:top-1/2 cwa:-translate-x-1/2 cwa:-translate-y-1/2 cwa:text-center cwa:text-gray-300 cwa:z-manager">
+          <template v-if="!pageIsAdmin && !isErrorPage">
+            <CwaUiFormButton
+              v-if="!$cwa.admin.isEditing && $cwa.resources?.page?.value?.data"
+              color="dark"
+              class="cwa:min-w-[120px]"
+            >
+              <span
+                class="cwa:flex cwa:items-center cwa:gap-x-2 cwa:justify-center"
+                @click="showEditPage"
+              >
+                <span>{{ editPageLabel }}</span> <CwaUiIconCogIcon
+                  class="cwa:h-5 cwa:w-5"
+                  aria-hidden="true"
+                />
+              </span>
+            </CwaUiFormButton>
+            <path-selector v-else-if="$cwa.admin.resourceStackManager.showManager.value" />
+          </template>
+          <template v-else>
+            <ul class="cwa:flex cwa:gap-x-8 cwa:text-stone-400 cwa:items-center">
+              <li>
+                <NuxtLink
+                  to="/_cwa/layouts"
+                  class="cwa:hover:text-white cwa:transition-colors"
+                  active-class="cwa:text-white"
+                >
+                  <IconLayouts />
+                  <span class="cwa:sr-only">Layouts</span>
+                </NuxtLink>
+              </li>
+              <li>
+                <NuxtLink
+                  to="/_cwa/pages"
+                  class="cwa:hover:text-white cwa:transition-colors"
+                  active-class="cwa:text-white"
+                >
+                  <IconPages class="cwa:h-6" />
+                  <span class="cwa:sr-only">Pages</span>
+                </NuxtLink>
+              </li>
+              <li>
+                <NuxtLink
+                  to="/_cwa/data"
+                  class="cwa:hover:text-white cwa:transition-colors"
+                  active-class="cwa:text-white"
+                >
+                  <IconData class="cwa:h-6" />
+                  <span class="cwa:sr-only">Data</span>
+                </NuxtLink>
+              </li>
+              <li>
+                <NuxtLink
+                  to="/_cwa/routes"
+                  class="cwa:hover:text-white cwa:transition-colors"
+                  active-class="cwa:text-white"
+                >
+                  <IconRoutes class="cwa:h-6" />
+                  <span class="cwa:sr-only">Routes</span>
+                </NuxtLink>
+              </li>
+              <li>
+                <NuxtLink
+                  to="/_cwa/users"
+                  class="cwa:hover:text-white cwa:transition-colors"
+                  active-class="cwa:text-white"
+                >
+                  <IconUsers />
+                  <span class="cwa:sr-only">Users</span>
+                </NuxtLink>
+              </li>
+            </ul>
+          </template>
+        </div>
+        <div class="cwa:flex cwa:justify-start cwa:gap-x-4">
+          <template v-if="!pageIsAdmin && !isErrorPage">
+            <CwaUiFormButton
+              class="cwa:min-w-[100px]"
+              color="blue"
+              :loading="$cwa.resources.isLoading.value"
+              @click="$cwa.admin.toggleEdit()"
+            >
+              {{ $cwa.admin.isEditing ? "Done" : "Edit" }}
+            </CwaUiFormButton>
+            <!-- this will be used when cloning a component only -->
+            <CwaUiFormToggle
+              v-if="false"
+              v-model="isNavEnabled"
+              label="Enable Navigation"
+            />
+          </template>
+        </div>
+        <div
+          v-if="$cwa.admin.isEditing"
+          class="cwa:flex cwa:gap-x-4 cwa:items-center"
+        >
+          <SpinnerTick
+            :is-loading="isLoading"
+            :is-pending="!!$cwa.resources.newResource.value"
+          />
+        </div>
+        <div
+          v-else
+          class="cwa:flex cwa:self-stretch cwa:min-h-9"
+        >
+          <Menu />
+        </div>
+      </div>
+      <OutdatedContentNotice class="cwa:absolute cwa:top-full cwa:mt-1.5 cwa:left-1/2 cwa:-translate-x-1/2 cwa:z-notifications" />
+      <ResourceLoadingIndicator class="cwa:absolute cwa:top-full cwa:left-0 cwa:z-notifications" />
+    </div>
+    <RequestErrors />
+    <ResourceModalOverlayTemplate :show="showEditModal && !!$cwa.resources.displayPageIri.value">
+      <PageResourceAdminModal
+        v-if="$cwa.resources.displayPageIri.value"
+        :iri="$cwa.resources.displayPageIri.value"
+        :resource-type="editPageResourceType"
+        :hide-view-link="true"
+        @close="closeModal"
+        @reload="goToAdminPagesView"
+      />
+    </ResourceModalOverlayTemplate>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref, useTemplateRef } from "vue";
+import ResourceLoadingIndicator from "../_common/ResourceLoadingIndicator.vue";
+import SpinnerTick from "../../../utils/SpinnerTick.vue";
+import PathSelector from "./_parts/PathSelector.vue";
+import RequestErrors from "./_parts/RequestErrors.vue";
+import Menu from "./_parts/Menu.vue";
+import { useCwa, useError, useRoute, useRouter } from "#imports";
+import OutdatedContentNotice from "#cwa/templates/components/main/admin/header/_parts/OutdatedContentNotice.vue";
+import IconPages from "#cwa/templates/components/core/assets/IconPages.vue";
+import IconLayouts from "#cwa/templates/components/core/assets/IconLayouts.vue";
+import IconUsers from "#cwa/templates/components/core/assets/IconUsers.vue";
+import ResourceModalOverlayTemplate from "#cwa/templates/components/core/admin/ResourceModalOverlayTemplate.vue";
+import PageResourceAdminModal from "#cwa/templates/components/core/admin/PageResourceAdminModal.vue";
+import IconRoutes from "#cwa/templates/components/core/assets/IconRoutes.vue";
+import IconData from "#cwa/templates/components/core/assets/IconData.vue";
+const $cwa = useCwa();
+const route = useRoute();
+const router = useRouter();
+const header = useTemplateRef("header");
+const spacer = useTemplateRef("spacer");
+const error = useError();
+const pageIsAdmin = computed(() => route.meta.cwa?.admin);
+const isErrorPage = computed(() => !!error.value);
+const showEditModal = ref(false);
+const editPageLabel = computed(() => {
+  if ($cwa.resources.isDataPage.value) {
+    return $cwa.resources.pageData?.value?.data?.title || "Data Page";
+  }
+  return $cwa.resources.page?.value?.data?.reference;
+});
+const isNavEnabled = computed({
+  get: () => {
+    return $cwa.admin.navigationGuardDisabled;
+  },
+  set: (newValue) => {
+    $cwa.admin.setNavigationGuardDisabled(newValue);
+  }
+});
+const isLoading = computed(() => $cwa.resourcesManager.requestCount.value > 0);
+const editPageResourceType = computed(() => {
+  if ($cwa.resources.isDataPage.value) {
+    return $cwa.resources.pageData?.value?.data?.["@type"] || "";
+  }
+  return "Page";
+});
+const highlightClass = computed(() => {
+  const classes = ['cwa:before:content-[""] cwa:before:absolute cwa:before:top-0 cwa:before:left-0 cwa:before:w-full cwa:before:h-0.5 cwa:before:transition-colors'];
+  if ($cwa.resources.isDynamicPage.value) {
+    return [...classes, "cwa:before:bg-yellow"];
+  }
+  if ($cwa.resources.isDataPage.value) {
+    return [...classes, $cwa.resources.pageData?.value?.data?.route ? "cwa:before:bg-green" : "cwa:before:bg-orange"];
+  }
+  if (pageIsAdmin.value) {
+    return [...classes, "cwa:before:bg-stone-400"];
+  }
+  return [...classes, "cwa:before:bg-blue-600"];
+});
+function showEditPage() {
+  showEditModal.value = true;
+}
+function closeModal() {
+  showEditModal.value = false;
+}
+function goToAdminPagesView() {
+  router.replace("/_cwa/pages");
+}
+onMounted(() => {
+  if (header.value && spacer.value) {
+    spacer.value.style.height = `${header.value.clientHeight}px`;
+  }
+});
+</script>

package/dist/runtime/templates/components/main/admin/header/Header.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/header/_parts/Menu.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/header/_parts/Menu.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="cwa:flex cwa:relative cwa:h-full cwa:items-center cwa:z-dialog">
+    <CwaUiHamburger
+      ref="hamburger"
+      v-model="showMenu"
+      class="cwa:relative cwa:z-20"
+    />
+    <Transition
+      enter-from-class="cwa:transform cwa:opacity-0 cwa:scale-[0.97]"
+      enter-active-class="cwa:duration-200 cwa:ease-out"
+      enter-to-class="cwa:opacity-100"
+      leave-from-class="cwa:opacity-100"
+      leave-active-class="cwa:duration-200 cwa:ease-in"
+      leave-to-class="cwa:transform cwa:opacity-0 cwa:scale-[0.97]"
+    >
+      <div
+        v-show="showMenu"
+        ref="menu"
+        class="cwa:absolute cwa:z-10 cwa:-top-1.5 cwa:-right-2 cwa:bg-dark cwa:pt-6 cwa:pb-12 cwa:px-12 cwa:w-[90vw] cwa:max-w-lg cwa:origin-top-right"
+      >
+        <div class="cwa:text-light cwa:flex cwa:flex-col cwa:text-center cwa:gap-y-2 cwa:mb-5">
+          <div class="cwa:flex cwa:justify-center cwa:opacity-[.35]">
+            <CwaLogo class="cwa:h-8 cwa:w-auto" />
+          </div>
+          <h2 class="cwa:opacity-50 cwa:text-sm cwa:font-bold">
+            {{ $cwa.config.siteName }}
+          </h2>
+        </div>
+        <div class="cwa:flex cwa:justify-center">
+          <div class="cwa:flex cwa:justify-between cwa:w-full cwa:max-w-[350px]">
+            <div class="cwa:mt-2">
+              <ul class="cwa:text-xl cwa:flex cwa:flex-col cwa:gap-y-5">
+                <li>
+                  <MenuPrimaryLink
+                    label="Layouts"
+                    to="/_cwa/layouts"
+                  >
+                    <IconLayouts class="cwa:w-7" />
+                  </MenuPrimaryLink>
+                </li>
+                <li>
+                  <MenuPrimaryLink
+                    label="Pages"
+                    to="/_cwa/pages"
+                  >
+                    <IconPages class="cwa:w-5 cwa:mx-1" />
+                  </MenuPrimaryLink>
+                </li>
+                <li>
+                  <MenuPrimaryLink
+                    label="Data"
+                    to="/_cwa/data"
+                  >
+                    <IconData class="cwa:w-6 cwa:mx-0.5" />
+                  </MenuPrimaryLink>
+                </li>
+                <li>
+                  <MenuPrimaryLink
+                    label="Routes"
+                    to="/_cwa/routes"
+                  >
+                    <IconRoutes class="cwa:w-7" />
+                  </MenuPrimaryLink>
+                </li>
+                <li>
+                  <MenuPrimaryLink
+                    label="Users"
+                    :to="{ name: '_cwa-users-user' }"
+                  >
+                    <IconUsers class="cwa:w-7" />
+                  </MenuPrimaryLink>
+                </li>
+              </ul>
+            </div>
+            <div class="cwa:flex cwa:flex-col cwa:gap-y-4">
+              <div>
+                <h3>General</h3>
+                <ul class="cwa:text-sm">
+                  <li>
+                    <MenuLink :to="{ name: '_cwa-settings' }">
+                      Site settings
+                    </MenuLink>
+                  </li>
+                </ul>
+              </div>
+              <div>
+                <h3>Account</h3>
+                <ul class="cwa:text-sm">
+                  <li v-if="$cwa.auth.user">
+                    <MenuLink :to="{ name: '_cwa-users-user-iri', params: { iri: $cwa.auth.user['@id'] } }">
+                      My account
+                    </MenuLink>
+                  </li>
+                  <li>
+                    <MenuLink @click="signOut">
+                      Sign out
+                    </MenuLink>
+                  </li>
+                </ul>
+              </div>
+              <div class="cwa:py-2 cwa:rounded-lg">
+                <h3>CWA</h3>
+                <ul class="cwa:text-sm">
+                  <li>
+                    <MenuLink
+                      to="https://cwa.rocks"
+                    >
+                      About the CWA
+                    </MenuLink>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+import { ref, useTemplateRef, watch } from "vue";
+import { onClickOutside } from "@vueuse/core";
+import MenuPrimaryLink from "./MenuPrimaryLink.vue";
+import CwaLogo from "#cwa/templates/components/core/assets/CwaLogo.vue";
+import { useCwa, useRoute } from "#imports";
+import IconLayouts from "#cwa/templates/components/core/assets/IconLayouts.vue";
+import IconPages from "#cwa/templates/components/core/assets/IconPages.vue";
+import IconUsers from "#cwa/templates/components/core/assets/IconUsers.vue";
+import MenuLink from "#cwa/templates/components/main/admin/header/_parts/MenuLink.vue";
+import IconRoutes from "#cwa/templates/components/core/assets/IconRoutes.vue";
+import IconData from "#cwa/templates/components/core/assets/IconData.vue";
+const $cwa = useCwa();
+const route = useRoute();
+const showMenu = ref(false);
+const menu = useTemplateRef("menu");
+const hamburger = ref();
+onClickOutside(menu, () => {
+  showMenu.value = false;
+}, {
+  ignore: [hamburger]
+});
+async function signOut() {
+  if ($cwa.navigationDisabled) {
+    return;
+  }
+  await $cwa.auth.signOut();
+}
+watch(
+  () => route.path,
+  () => {
+    showMenu.value = false;
+  }
+);
+</script>

package/dist/runtime/templates/components/main/admin/header/_parts/Menu.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/header/_parts/MenuLink.d.vue.ts

@@ -0,0 +1,16 @@
+import type { RouteLocationRaw } from 'vue-router';
+type __VLS_Props = {
+    to?: RouteLocationRaw;
+};
+type __VLS_Slots = {
+    default(): any;
+};
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/templates/components/main/admin/header/_parts/MenuLink.vue

@@ -0,0 +1,15 @@
+<template>
+  <CwaLink
+    :to="to || '#'"
+    class="cwa:transition cwa:font-medium cwa:text-neutral-400 cwa:hover:text-white"
+  >
+    <slot />
+  </CwaLink>
+</template>
+
+<script setup>
+defineProps({
+  to: { type: null, required: false }
+});
+defineSlots();
+</script>

package/dist/runtime/templates/components/main/admin/header/_parts/MenuLink.vue.d.ts

@@ -0,0 +1,16 @@
+import type { RouteLocationRaw } from 'vue-router';
+type __VLS_Props = {
+    to?: RouteLocationRaw;
+};
+type __VLS_Slots = {
+    default(): any;
+};
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/templates/components/main/admin/header/_parts/MenuPrimaryLink.d.vue.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    label: string;
+};
+type __VLS_Slots = {
+    default(): any;
+};
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/templates/components/main/admin/header/_parts/MenuPrimaryLink.vue

@@ -0,0 +1,20 @@
+<template>
+  <NuxtLink
+    to="#"
+    class="cwa:transition cwa:font-medium cwa:text-neutral-400 cwa:hover:text-white cwa:flex cwa:gap-x-2 cwa:items-center"
+  >
+    <div class="cwa:w-10">
+      <slot />
+    </div>
+    <span>
+      {{ label }}
+    </span>
+  </NuxtLink>
+</template>
+
+<script setup>
+defineProps({
+  label: { type: String, required: true }
+});
+defineSlots();
+</script>

package/dist/runtime/templates/components/main/admin/header/_parts/MenuPrimaryLink.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    label: string;
+};
+type __VLS_Slots = {
+    default(): any;
+};
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/templates/components/main/admin/header/_parts/Notification.d.vue.ts

@@ -0,0 +1,16 @@
+type __VLS_Slots = {
+    default(): any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onClear?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/templates/components/main/admin/header/_parts/Notification.vue

@@ -0,0 +1,70 @@
+<template>
+  <li
+    class="cwa:pointer-events-auto cwa:w-full cwa:max-w-sm cwa:overflow-hidden cwa:rounded-lg cwa:dark-blur cwa:ring-2 cwa:ring-magenta"
+    @mouseout="setEmitTimeout"
+    @mouseover="clearEmitTimeout"
+  >
+    <div class="cwa:p-4">
+      <div class="cwa:flex cwa:items-start cwa:relative">
+        <div class="cwa:ml-3 cwa:w-0 cwa:flex-1 cwa:pt-0.5">
+          <slot />
+        </div>
+        <div class="cwa:ml-4 cwa:flex cwa:shrink-0">
+          <button
+            type="button"
+            class="cwa:inline-flex cwa:rounded-md cwa:text-stone-400 cwa:hover:text-white cwa:transition cwa:cursor-pointer"
+            @click="$emit('clear')"
+          >
+            <span class="cwa:sr-only">Close</span>
+            <CwaUiIconXMarkIcon
+              class="cwa:h-5 cwa:w-5"
+              aria-hidden="true"
+            />
+          </button>
+        </div>
+        <svg
+          class="cwa:absolute cwa:-top-0.5 cwa:-right-0.5 countdown-icon cwa:w-6 cwa:h-6 cwa:pointer-events-none"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 100 100"
+          xml:space="preserve"
+          :class="{ 'is-progressing': emitTimeout !== void 0 }"
+        >
+          <circle
+            class="circle cwa:stroke-stone-400"
+            cx="50"
+            cy="50"
+            r="44"
+            fill="transparent"
+          />
+        </svg>
+      </div>
+    </div>
+  </li>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+const emitTimeout = ref();
+const emit = defineEmits(["clear"]);
+defineSlots();
+function setEmitTimeout() {
+  emitTimeout.value = setTimeout(() => {
+    emit("clear");
+  }, 6e3);
+}
+function clearEmitTimeout() {
+  if (emitTimeout.value) {
+    clearTimeout(emitTimeout.value);
+    emitTimeout.value = void 0;
+  }
+}
+onMounted(() => {
+  setTimeout(() => {
+    setEmitTimeout();
+  }, 20);
+});
+</script>
+
+<style>
+.countdown-icon .circle{stroke-dasharray:314;stroke-dashoffset:0;stroke-width:12;transform:rotate(-90deg);transform-origin:50% 50% 0;transition:stroke-dashoffset .6s linear}.countdown-icon.is-progressing .circle{stroke-dashoffset:314;transition-duration:6s}
+</style>