katecms 0.0.0-stage → 1.0.0-beta.1

package/dist/runtime/internal/admin/AdminHeader.vue

@@ -0,0 +1,91 @@
+<script setup>
+defineProps({
+  title: { type: String, required: true },
+  backTo: { type: String, required: false },
+  meta: { type: String, required: false },
+  count: { type: [String, Number], required: false }
+});
+const rootClass = "katecms-admin-header";
+</script>
+
+<template>
+  <div :class="rootClass">
+    <KateCmsUiButton
+      v-if="backTo"
+      tag="a"
+      :variant="['secondary', 'icon']"
+      :link="{ url: backTo, title: 'Back' }"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 640 640"
+      ><path
+        d="M73 297a32 32 0 0 0 0 46l160 160a32 32 0 0 0 46-46L173 352h371a32 32 0 1 0 0-64H173l106-105a32 32 0 0 0-46-46z"
+        fill="currentColor"
+      /></svg>
+    </KateCmsUiButton>
+
+    <div :class="`${rootClass}__main`">
+      <div :class="`${rootClass}__title`">
+        {{ title }}
+        <span
+          v-if="count != null && count !== ''"
+          :class="`${rootClass}__count`"
+        >{{ count }}</span>
+      </div>
+      <div
+        v-if="meta"
+        :class="`${rootClass}__meta`"
+      >
+        {{ meta }}
+      </div>
+    </div>
+
+    <div
+      v-if="$slots.default"
+      :class="`${rootClass}__actions`"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+body#katecms-body .katecms-admin-header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 1rem;
+  min-width: 0;
+  padding: 0.5rem 0;
+  background: var(--katecms-color-surface);
+}
+body#katecms-body .katecms-admin-header__main {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+}
+body#katecms-body .katecms-admin-header__title {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+body#katecms-body .katecms-admin-header__count {
+  color: var(--katecms-color-muted);
+  font-size: 1rem;
+  font-weight: 400;
+}
+body#katecms-body .katecms-admin-header__meta {
+  font-size: 0.8125rem;
+  color: var(--katecms-color-muted);
+}
+body#katecms-body .katecms-admin-header__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-left: auto;
+}
+</style>

package/dist/runtime/internal/admin/AdminHeader.vue.d.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    title: string;
+    /** When set, a back button is shown before the title. */
+    backTo?: string;
+    /** Secondary line under the title. */
+    meta?: string;
+    /** Shown after the title, for example a result count. */
+    count?: string | number;
+};
+declare const __VLS_template: () => {
+    __VLS_Slots: {
+        default?: (props: {}) => any;
+    };
+};
+type __VLS_Slots = ReturnType<typeof __VLS_template>['__VLS_Slots'];
+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/internal/admin/AppMenu.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/internal/admin/AppMenu.vue

@@ -0,0 +1,244 @@
+<script setup>
+import { computed } from "vue";
+import { useRoute, useRuntimeConfig } from "#imports";
+import { useCmsPaths } from "../../composables/useCmsPaths";
+import { useKateCmsMenuItems } from "../../composables/useKateCmsExtensions";
+import { useMenuAccess } from "../../composables/useMenuAccess";
+const rootClass = "katecms-menu";
+const route = useRoute();
+const paths = useCmsPaths();
+const runtimeConfig = useRuntimeConfig();
+const extraMenu = useKateCmsMenuItems();
+const menuAccess = useMenuAccess();
+const visibleAccess = computed(() => new Set(menuAccess.data.value?.visible ?? []));
+const DASHBOARD_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M4 4h7v7H4V4Zm9 0h7v5h-7V4ZM4 13h7v7H4v-7Zm9 7v-9h7v9h-7Z" stroke="currentColor" stroke-width="1.6"/></svg>';
+const COLLECTION_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M7 3h7l5 5v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" stroke="currentColor" stroke-width="1.6"/><path d="M14 3v5h5" stroke="currentColor" stroke-width="1.6"/></svg>';
+const DICTIONARY_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M7 4h10a2 2 0 0 1 2 2v14l-7-3-7 3V6a2 2 0 0 1 2-2Z" stroke="currentColor" stroke-width="1.6"/><path d="M9 8h6M9 12h6" stroke="currentColor" stroke-width="1.6"/></svg>';
+const MEDIA_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" stroke-width="1.6"/><path d="m3 16 5-5 4 4 3-3 6 6" stroke="currentColor" stroke-width="1.6"/><circle cx="9" cy="9" r="1.4" fill="currentColor"/></svg>';
+const USERS_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><circle cx="9" cy="8" r="3" stroke="currentColor" stroke-width="1.6"/><path d="M4 19c0-2.8 2.2-5 5-5h0c2.8 0 5 2.2 5 5" stroke="currentColor" stroke-width="1.6"/><circle cx="17" cy="9" r="2.2" stroke="currentColor" stroke-width="1.6"/><path d="M16.2 14.2c2.2.4 3.8 2.3 3.8 4.8" stroke="currentColor" stroke-width="1.6"/></svg>';
+const OPTIONS_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.6"/><path d="M12 3.5v2.2M12 18.3v2.2M4.9 6.5l1.6 1.6M17.5 16.9l1.6 1.6M3.5 12h2.2M18.3 12h2.2M4.9 17.5l1.6-1.6M17.5 7.1l1.6-1.6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>';
+function isSvgIcon(value) {
+  return typeof value === "string" && /^\s*<svg[\s>]/i.test(value);
+}
+function isActive(to, exact = false) {
+  const path = route.path.replace(/\/$/, "") || "/";
+  const target = to.replace(/\/$/, "") || "/";
+  if (path === target) {
+    return true;
+  }
+  return !exact && path.startsWith(`${target}/`);
+}
+const groups = computed(() => {
+  const collections = runtimeConfig.public.katecms?.collections ?? {};
+  const collectionItems = Object.entries(collections).map(([slug, def]) => {
+    const to = paths.collection(slug);
+    return {
+      key: `collection:${slug}`,
+      label: def.labels?.name || slug,
+      to,
+      icon: isSvgIcon(def.icon) ? def.icon : COLLECTION_ICON,
+      active: isActive(to)
+    };
+  });
+  const dictionaries = runtimeConfig.public.katecms?.dictionaries ?? {};
+  const dictionaryItems = Object.entries(dictionaries).map(([slug, def]) => {
+    const to = paths.dictionary(slug);
+    return {
+      key: `dictionary:${slug}`,
+      label: def.labels?.name || slug,
+      to,
+      icon: isSvgIcon(def.icon) ? def.icon : DICTIONARY_ICON,
+      active: isActive(to)
+    };
+  });
+  const optionPages = runtimeConfig.public.katecms?.options ?? {};
+  const optionItems = Object.entries(optionPages).map(([slug, def]) => {
+    const to = paths.option(slug);
+    return {
+      key: `option:${slug}`,
+      label: def.label || slug,
+      to,
+      icon: isSvgIcon(def.icon) ? def.icon : OPTIONS_ICON,
+      active: isActive(to)
+    };
+  });
+  const result = [
+    {
+      key: "overview",
+      items: [
+        {
+          key: "dashboard",
+          label: "Dashboard",
+          to: paths.admin,
+          icon: DASHBOARD_ICON,
+          active: isActive(paths.admin, true)
+        }
+      ]
+    }
+  ];
+  if (collectionItems.length) {
+    result.push({
+      key: "collections",
+      label: "Collections",
+      items: collectionItems
+    });
+  }
+  if (dictionaryItems.length) {
+    result.push({
+      key: "dictionaries",
+      label: "Dictionaries",
+      items: dictionaryItems
+    });
+  }
+  if (optionItems.length) {
+    result.push({
+      key: "options",
+      label: "Options",
+      items: optionItems
+    });
+  }
+  result.push({
+    key: "manage",
+    label: "Manage",
+    items: [
+      {
+        key: "media",
+        label: "Media",
+        to: paths.media,
+        icon: MEDIA_ICON,
+        active: isActive(paths.media)
+      },
+      {
+        key: "users",
+        label: "Users",
+        to: paths.users,
+        icon: USERS_ICON,
+        active: isActive(paths.users)
+      },
+      ...extraMenu.value.flatMap((item) => {
+        if (item.access && !visibleAccess.value.has(item.access)) {
+          return [];
+        }
+        return [{
+          key: item.key,
+          label: item.label,
+          to: item.to,
+          icon: item.icon || OPTIONS_ICON,
+          active: isActive(item.to)
+        }];
+      })
+    ]
+  });
+  return result;
+});
+</script>
+
+<template>
+  <div :class="rootClass">
+    <!--    <NuxtLink
+      :class="`${rootClass}__logo`"
+      :to="paths.admin"
+    >
+      <img
+        src="../../assets/img/katecms-logo.svg"
+        alt="KateCMS"
+      >
+    </NuxtLink> -->
+
+    <div :class="`${rootClass}__wrap`">
+      <div
+        v-for="group in groups"
+        :key="group.key"
+        :class="`${rootClass}__group`"
+      >
+        <div
+          v-if="group.label"
+          :class="`${rootClass}__heading`"
+        >
+          {{ group.label }}
+        </div>
+        <NuxtLink
+          v-for="item in group.items"
+          :key="item.key"
+          :to="item.to"
+          :class="[`${rootClass}__link`, { 'is-active': item.active }]"
+        >
+          <span
+            :class="`${rootClass}__icon`"
+            aria-hidden="true"
+            v-html="item.icon"
+          />
+          <span :class="`${rootClass}__label`">{{ item.label }}</span>
+        </NuxtLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+body#katecms-body .katecms-menu {
+  display: flex;
+  flex-direction: column;
+  background: var(--katecms-color-bg);
+}
+body#katecms-body .katecms-menu__wrap {
+  flex-grow: 1;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem;
+  gap: 0.75rem;
+}
+body#katecms-body .katecms-menu__group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+body#katecms-body .katecms-menu__heading {
+  padding: 0.25rem 0.625rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--katecms-color-muted);
+}
+body#katecms-body .katecms-menu__link {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.625rem;
+  border-radius: var(--katecms-border-radius-inter);
+  color: var(--katecms-color-ink);
+  text-decoration: none;
+  font-size: 0.875rem;
+}
+body#katecms-body .katecms-menu__link:hover {
+  background: var(--katecms-color-accent-wash);
+}
+body#katecms-body .katecms-menu__link.is-active {
+  background: var(--katecms-color-accent-wash);
+  color: var(--katecms-color-accent);
+  font-weight: 600;
+}
+body#katecms-body .katecms-menu__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.125rem;
+  height: 1.125rem;
+  color: inherit;
+}
+body#katecms-body .katecms-menu__icon :deep(svg) {
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+}
+body#katecms-body .katecms-menu__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/dist/runtime/internal/admin/AppMenu.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/internal/admin/AppUser.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/internal/admin/AppUser.vue

@@ -0,0 +1,227 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { useAuth } from "../../composables/useAuth";
+import { useCmsPaths } from "../../composables/useCmsPaths";
+import { avatarSrc, userInitials } from "../../utils/admin-users";
+const rootClass = "katecms-user";
+const paths = useCmsPaths();
+const { user, logout, loggingOut } = useAuth();
+const menuOpen = ref(false);
+const rootEl = ref(null);
+const avatarUrl = computed(() => avatarSrc(user.value?.avatar));
+const displayName = computed(() => {
+  const current = user.value;
+  if (!current) {
+    return "";
+  }
+  const name = current.name?.trim();
+  if (name) {
+    return name;
+  }
+  return current.email.split("@")[0] || current.email;
+});
+const initials = computed(() => {
+  const current = user.value;
+  if (!current) {
+    return "?";
+  }
+  return userInitials(current);
+});
+const profileTo = computed(() => {
+  const id = user.value?.id;
+  return id ? paths.user(id) : paths.users;
+});
+function closeMenu() {
+  menuOpen.value = false;
+}
+function toggleMenu() {
+  menuOpen.value = !menuOpen.value;
+}
+function onDocumentClick(event) {
+  if (!menuOpen.value) {
+    return;
+  }
+  const target = event.target;
+  if (target && rootEl.value?.contains(target)) {
+    return;
+  }
+  closeMenu();
+}
+async function onLogout() {
+  closeMenu();
+  await logout();
+}
+onMounted(() => {
+  document.addEventListener("click", onDocumentClick);
+});
+onBeforeUnmount(() => {
+  document.removeEventListener("click", onDocumentClick);
+});
+</script>
+
+<template>
+  <div
+    v-if="user"
+    ref="rootEl"
+    :class="rootClass"
+  >
+    <button
+      type="button"
+      :class="[`${rootClass}__btn`, { 'is-open': menuOpen }]"
+      :aria-expanded="menuOpen"
+      aria-haspopup="menu"
+      @click.stop="toggleMenu"
+    >
+      <span :class="`${rootClass}__avatar`">
+        <img
+          v-if="avatarUrl"
+          :src="avatarUrl"
+          alt=""
+        >
+        <span
+          v-else
+          :class="`${rootClass}__initials`"
+        >{{ initials }}</span>
+      </span>
+      <span :class="`${rootClass}__meta`">
+        <span
+          v-if="displayName"
+          :class="`${rootClass}__name`"
+        >{{ displayName }}</span>
+        <span :class="`${rootClass}__email`">{{ user.email }}</span>
+      </span>
+    </button>
+
+    <div
+      v-if="menuOpen"
+      :class="`${rootClass}__menu`"
+      role="menu"
+      @click.stop
+    >
+      <NuxtLink
+        :to="profileTo"
+        role="menuitem"
+        :class="`${rootClass}__menu-item`"
+        @click="closeMenu"
+      >
+        Profile
+      </NuxtLink>
+      <button
+        type="button"
+        role="menuitem"
+        :class="[`${rootClass}__menu-item`, `${rootClass}__menu-item--danger`]"
+        :disabled="loggingOut"
+        @click="onLogout"
+      >
+        {{ loggingOut ? "Signing out\u2026" : "Sign out" }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+body#katecms-body .katecms-user {
+  position: relative;
+  max-width: 15rem;
+}
+body#katecms-body .katecms-user__btn {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  padding: 0.25rem 0.5rem;
+  border: none;
+  border-radius: var(--katecms-border-radius);
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  font: inherit;
+  cursor: pointer;
+}
+body#katecms-body .katecms-user__btn:hover, body#katecms-body .katecms-user__btn.is-open {
+  background: var(--katecms-color-accent-wash);
+}
+body#katecms-body .katecms-user__avatar {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  overflow: hidden;
+  background: var(--katecms-color-accent-wash);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+body#katecms-body .katecms-user__avatar img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  object-fit: cover;
+}
+body#katecms-body .katecms-user__initials {
+  font-size: 0.6875rem;
+  font-weight: 700;
+  color: var(--katecms-color-accent);
+  line-height: 1;
+}
+body#katecms-body .katecms-user__meta {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+body#katecms-body .katecms-user__name {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--katecms-color-ink);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+body#katecms-body .katecms-user__email {
+  font-size: 0.75rem;
+  color: var(--katecms-color-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+body#katecms-body .katecms-user__menu {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  right: 0;
+  left: 0;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  padding: 0.25rem;
+  background: var(--katecms-color-surface);
+  border: 1px solid var(--katecms-color-border);
+  border-radius: var(--katecms-border-radius);
+  box-shadow: var(--katecms-shadow-md);
+}
+body#katecms-body .katecms-user__menu-item {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.625rem;
+  border: none;
+  border-radius: var(--katecms-border-radius-inter);
+  background: transparent;
+  color: var(--katecms-color-ink);
+  text-align: left;
+  text-decoration: none;
+  font: inherit;
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+body#katecms-body .katecms-user__menu-item:hover {
+  background: var(--katecms-color-accent-wash);
+}
+body#katecms-body .katecms-user__menu-item:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+body#katecms-body .katecms-user__menu-item--danger {
+  color: var(--katecms-color-danger);
+}
+</style>

package/dist/runtime/internal/admin/AppUser.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/internal/admin/CollectionEntryForm.d.vue.ts

@@ -0,0 +1,41 @@
+import type { CollectionStatus } from '@katecms/core';
+import type { AdminCollectionMeta, CollectionDictionaryPicker, CollectionEntryFormModel, EntryRevisionItem, ParentOption } from '../../utils/collections.js';
+type __VLS_Props = {
+    collection: AdminCollectionMeta;
+    modelValue: CollectionEntryFormModel;
+    entryKey?: string | number;
+    parents?: ParentOption[];
+    saving?: boolean;
+    error?: string | null;
+    viewUrl?: string | null;
+    canUpdate?: boolean;
+    canDelete?: boolean;
+    /** Saved status from the server (trash vs live form status). */
+    savedStatus?: CollectionStatus;
+    dictionaryPickers?: CollectionDictionaryPicker[];
+    revisions?: EntryRevisionItem[];
+    revisionsLoading?: boolean;
+    revisionsError?: string;
+};
+declare function validateForSubmit(): boolean;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    validateForSubmit: typeof validateForSubmit;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: () => any;
+    trash: () => any;
+    ready: () => any;
+    submit: () => any;
+    restore: () => any;
+    "update:modelValue": (value: CollectionEntryFormModel) => any;
+    restoreRevision: (id: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: (() => any) | undefined;
+    onTrash?: (() => any) | undefined;
+    onReady?: (() => any) | undefined;
+    onSubmit?: (() => any) | undefined;
+    onRestore?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: CollectionEntryFormModel) => any) | undefined;
+    onRestoreRevision?: ((id: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;