katecms 0.0.0-stage → 1.0.0-beta.1

package/dist/runtime/pages/admin/demo-fields.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/pages/admin/dictionaries/[id].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/pages/admin/dictionaries/[id].vue

@@ -0,0 +1,213 @@
+<script setup>
+import { computed, nextTick, onMounted, reactive, ref, watch } from "vue";
+import { $fetch, navigateTo, useHead, useRoute } from "#imports";
+import { parseAuthError } from "../../../utils/auth-error";
+import { dictionaryApi, dictionaryTermUrl } from "../../../utils/dictionaries";
+import { useCmsPaths } from "../../../composables/useCmsPaths";
+import { useKateCmsTermPanels } from "../../../composables/useKateCmsExtensions";
+const route = useRoute();
+const paths = useCmsPaths();
+const rootClass = "katecms-dictionary-entry";
+const formId = "cms-dictionary-edit-form";
+const dictionarySlug = computed(() => String(route.params.dictionary ?? ""));
+const termId = computed(() => Number(route.params.id));
+const dictionary = ref(null);
+const parents = ref([]);
+const found = ref(false);
+const loading = ref(true);
+const saving = ref(false);
+const error = ref(null);
+const canUpdate = ref(false);
+const canDelete = ref(false);
+const entryForm = ref(null);
+const termPanels = useKateCmsTermPanels();
+const slugPath = ref("");
+const viewUrl = computed(() => dictionary.value ? dictionaryTermUrl(dictionary.value, slugPath.value) : null);
+const form = reactive({
+  title: "",
+  slug: "",
+  parentId: null,
+  fields: {}
+});
+const pageTitle = computed(() => form.title.trim() || "Edit term");
+useHead({ title: pageTitle });
+function applyTerm(res) {
+  dictionary.value = res.dictionary;
+  parents.value = res.parents;
+  form.title = res.term.title;
+  form.slug = res.term.slug;
+  form.parentId = res.term.parentId;
+  slugPath.value = res.term.slugPath || res.term.slug;
+  form.fields = { ...res.term.fields ?? {} };
+  canUpdate.value = res.canUpdate;
+  canDelete.value = res.canDelete;
+  found.value = true;
+}
+async function load() {
+  if (!Number.isInteger(termId.value) || termId.value <= 0) {
+    await navigateTo(paths.dictionary(dictionarySlug.value));
+    return;
+  }
+  loading.value = true;
+  error.value = null;
+  found.value = false;
+  try {
+    const res = await $fetch(
+      dictionaryApi(dictionarySlug.value, termId.value)
+    );
+    applyTerm(res);
+  } catch (err) {
+    error.value = parseAuthError(err, "Could not load the term.").message;
+  } finally {
+    loading.value = false;
+  }
+}
+async function submit() {
+  if (saving.value || !dictionary.value || !canUpdate.value) {
+    return;
+  }
+  if (!entryForm.value?.validateForSubmit()) {
+    return;
+  }
+  saving.value = true;
+  error.value = null;
+  try {
+    const res = await $fetch(
+      dictionaryApi(dictionarySlug.value, termId.value),
+      {
+        method: "PATCH",
+        body: {
+          title: form.title.trim(),
+          slug: form.slug.trim(),
+          fields: form.fields,
+          parentId: form.parentId
+        }
+      }
+    );
+    applyTerm(res);
+    await nextTick();
+  } catch (err) {
+    error.value = parseAuthError(err, "Could not save the term.").message;
+  } finally {
+    saving.value = false;
+  }
+}
+async function removeTerm() {
+  if (!canDelete.value || saving.value) {
+    return;
+  }
+  if (!window.confirm(`Delete \u201C${form.title || "this term"}\u201D? Child terms will become top-level. This cannot be undone.`)) {
+    return;
+  }
+  saving.value = true;
+  error.value = null;
+  try {
+    await $fetch(dictionaryApi(dictionarySlug.value, termId.value), { method: "DELETE" });
+    await navigateTo(paths.dictionary(dictionarySlug.value));
+  } catch (err) {
+    error.value = parseAuthError(err, "Could not delete the term.").message;
+  } finally {
+    saving.value = false;
+  }
+}
+onMounted(load);
+watch([dictionarySlug, termId], load);
+</script>
+
+<template>
+  <div :class="rootClass">
+    <KateCmsAdminHeader
+      :title="pageTitle"
+      :back-to="paths.dictionary(dictionarySlug)"
+    >
+      <KateCmsUiButton
+        v-if="viewUrl"
+        tag="a"
+        variant="secondary"
+        :link="{ url: viewUrl, title: 'View', target: '_blank' }"
+      >
+        View
+      </KateCmsUiButton>
+      <KateCmsUiButton
+        v-if="found && canUpdate"
+        tag="button"
+        type="submit"
+        :form="formId"
+        :disabled="saving"
+      >
+        {{ saving ? "Saving\u2026" : "Save" }}
+      </KateCmsUiButton>
+    </KateCmsAdminHeader>
+
+    <KateCmsUiNotice
+      v-if="loading"
+      placement="static"
+      variant="info"
+      message="Loading…"
+      :closable="false"
+    />
+    <KateCmsUiNotice
+      v-else-if="!found"
+      placement="static"
+      variant="danger"
+      :message="error || 'Term not found.'"
+      :closable="false"
+    />
+
+    <template v-else-if="dictionary">
+      <div :class="`${rootClass}__fields`">
+        <KateCmsDictionaryTermForm
+          ref="entryForm"
+          :form-id="formId"
+          :model-value="form"
+          :dictionary="dictionary"
+          :entry-key="termId"
+          :parents="parents"
+          :saving="saving"
+          :error="error"
+          :can-update="canUpdate"
+          :show-submit="false"
+          @update:model-value="(value) => Object.assign(form, value)"
+          @submit="submit"
+        />
+        <component
+          :is="panel"
+          v-for="panel in termPanels"
+          :key="panel"
+        />
+      </div>
+
+      <div
+        v-if="canDelete"
+        :class="`${rootClass}__danger`"
+      >
+        <KateCmsUiButton
+          tag="button"
+          type="button"
+          :variant="['red']"
+          :disabled="saving"
+          @click="removeTerm"
+        >
+          Delete
+        </KateCmsUiButton>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+body#katecms-body .katecms-dictionary-entry {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 1rem;
+  min-height: 0;
+  padding: 0 0.5rem 0.5rem;
+  overflow: auto;
+}
+body#katecms-body .katecms-dictionary-entry__danger {
+  display: flex;
+  flex-shrink: 0;
+  justify-content: flex-start;
+}
+</style>

package/dist/runtime/pages/admin/dictionaries/[id].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/pages/admin/dictionaries/index.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/pages/admin/dictionaries/index.vue

@@ -0,0 +1,387 @@
+<script setup>
+import { computed, onMounted, reactive, ref, watch } from "vue";
+import { $fetch, useHead, useRoute, useRuntimeConfig } from "#imports";
+import { buildFormValues } from "@katecms/core";
+import { parseAuthError } from "../../../utils/auth-error";
+import { dictionaryApi, dictionaryTermUrl } from "../../../utils/dictionaries";
+import { useCmsPaths } from "../../../composables/useCmsPaths";
+const route = useRoute();
+const paths = useCmsPaths();
+const collectionsNav = useRuntimeConfig().public.katecms?.collections ?? {};
+const rootClass = "katecms-dictionary-list";
+const createFormId = "cms-dictionary-create-form";
+const dictionarySlug = computed(() => String(route.params.dictionary ?? ""));
+const dictionary = ref(null);
+const terms = ref([]);
+const parents = ref([]);
+const canCreate = ref(false);
+const loading = ref(true);
+const saving = ref(false);
+const error = ref(null);
+const createError = ref(null);
+const pendingId = ref(null);
+const createKey = ref(0);
+const form = reactive({
+  title: "",
+  slug: "",
+  parentId: null,
+  fields: {}
+});
+const title = computed(() => dictionary.value?.labels.name || "Dictionary");
+useHead({ title });
+const attachedLabel = computed(() => {
+  const slugs = dictionary.value?.collections ?? [];
+  if (slugs.length === 0) {
+    return "";
+  }
+  const names = slugs.map((slug) => collectionsNav[slug]?.labels?.name || slug);
+  return `Used on ${names.join(", ")}`;
+});
+function termListTitle(term) {
+  const depth = dictionary.value?.hierarchical ? term.depth ?? 0 : 0;
+  if (depth < 1) {
+    return term.title;
+  }
+  return `${"\u2014 ".repeat(depth)}${term.title}`;
+}
+function formatListDate(iso) {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) {
+    return iso;
+  }
+  return date.toLocaleString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  });
+}
+function resetCreateForm() {
+  form.title = "";
+  form.slug = "";
+  form.parentId = null;
+  form.fields = dictionary.value ? buildFormValues(dictionary.value.fields ?? {}) : {};
+  createKey.value += 1;
+}
+async function load(showLoading = true) {
+  if (!dictionarySlug.value) {
+    return;
+  }
+  if (showLoading) {
+    loading.value = true;
+  }
+  error.value = null;
+  try {
+    const res = await $fetch(dictionaryApi(dictionarySlug.value));
+    dictionary.value = res.dictionary;
+    terms.value = res.terms;
+    parents.value = res.parents;
+    canCreate.value = res.canCreate;
+    if (createKey.value === 0) {
+      form.fields = buildFormValues(res.dictionary.fields ?? {});
+    }
+  } catch (err) {
+    if (showLoading) {
+      dictionary.value = null;
+      terms.value = [];
+      parents.value = [];
+    }
+    error.value = parseAuthError(err, "Could not load the dictionary.").message;
+  } finally {
+    loading.value = false;
+  }
+}
+async function createTerm() {
+  if (saving.value || !dictionary.value || !canCreate.value) {
+    return;
+  }
+  saving.value = true;
+  createError.value = null;
+  try {
+    await $fetch(dictionaryApi(dictionarySlug.value), {
+      method: "POST",
+      body: {
+        title: form.title.trim(),
+        slug: form.slug.trim(),
+        fields: form.fields,
+        parentId: form.parentId
+      }
+    });
+    resetCreateForm();
+    await load(false);
+  } catch (err) {
+    createError.value = parseAuthError(err, "Could not create the term.").message;
+  } finally {
+    saving.value = false;
+  }
+}
+async function removeTerm(term) {
+  if (!term.canDelete || pendingId.value !== null) {
+    return;
+  }
+  if (!window.confirm(`Delete \u201C${term.title}\u201D? Child terms will become top-level. This cannot be undone.`)) {
+    return;
+  }
+  pendingId.value = term.id;
+  error.value = null;
+  try {
+    await $fetch(dictionaryApi(dictionarySlug.value, term.id), { method: "DELETE" });
+    await load(false);
+  } catch (err) {
+    error.value = parseAuthError(err, "Could not delete the term.").message;
+  } finally {
+    pendingId.value = null;
+  }
+}
+onMounted(load);
+watch(dictionarySlug, async () => {
+  createError.value = null;
+  await load();
+  resetCreateForm();
+});
+</script>
+
+<template>
+  <div :class="rootClass">
+    <KateCmsAdminHeader
+      :title="title"
+      :meta="attachedLabel"
+    />
+
+    <KateCmsUiNotice
+      v-if="loading"
+      placement="static"
+      variant="info"
+      message="Loading…"
+      :closable="false"
+    />
+    <KateCmsUiNotice
+      v-else-if="error && !dictionary"
+      placement="static"
+      variant="danger"
+      :message="error"
+      :closable="false"
+    />
+
+    <div
+      v-else-if="dictionary"
+      :class="`${rootClass}__layout`"
+    >
+      <div
+        v-if="canCreate"
+        :class="`${rootClass}__create`"
+      >
+        <div :class="`${rootClass}__create-title`">
+          Add {{ dictionary.labels.singularName }}
+        </div>
+        <KateCmsDictionaryTermForm
+          :key="createKey"
+          :form-id="createFormId"
+          :model-value="form"
+          :dictionary="dictionary"
+          :entry-key="`new-${createKey}`"
+          :parents="parents"
+          :saving="saving"
+          :error="createError"
+          :can-update="true"
+          :submit-label="saving ? 'Adding\u2026' : `Add ${dictionary.labels.singularName}`"
+          @update:model-value="(value) => Object.assign(form, value)"
+          @submit="createTerm"
+        />
+      </div>
+
+      <div :class="`${rootClass}__list`">
+        <KateCmsUiNotice
+          v-if="error"
+          placement="static"
+          variant="danger"
+          :message="error"
+          @close="error = null"
+        />
+        <KateCmsUiNotice
+          v-else-if="!terms.length"
+          placement="static"
+          variant="info"
+          :message="`No ${dictionary.labels.name.toLowerCase()} yet.`"
+          :closable="false"
+        />
+
+        <div
+          v-else
+          :class="`${rootClass}__table-wrap`"
+        >
+          <div
+            :class="[`${rootClass}__columns`, `${rootClass}__columns--head`]"
+            role="row"
+          >
+            <span role="columnheader">Title</span>
+            <span role="columnheader">Slug</span>
+            <span role="columnheader">Date</span>
+            <span
+              role="columnheader"
+              aria-label="Actions"
+            />
+          </div>
+          <div :class="`${rootClass}__rows`">
+            <div
+              v-for="term in terms"
+              :key="term.id"
+              :class="`${rootClass}__columns`"
+              role="row"
+            >
+              <div role="cell">
+                {{ termListTitle(term) }}
+              </div>
+              <div role="cell">
+                {{ term.slug }}
+              </div>
+              <div role="cell">
+                {{ formatListDate(term.updatedAt) }}
+              </div>
+              <div
+                role="cell"
+                :class="`${rootClass}__actions`"
+              >
+                <KateCmsUiButton
+                  v-if="dictionary.public"
+                  tag="a"
+                  :variant="['secondary', 'small']"
+                  :link="{
+  url: dictionaryTermUrl(dictionary, term.slugPath) || '/',
+  title: 'View',
+  target: '_blank'
+}"
+                >
+                  View
+                </KateCmsUiButton>
+                <KateCmsUiButton
+                  v-if="term.canUpdate"
+                  tag="a"
+                  :variant="['secondary', 'small']"
+                  :link="{
+  url: paths.dictionaryTerm(dictionarySlug, term.id),
+  title: 'Edit'
+}"
+                >
+                  Edit
+                </KateCmsUiButton>
+                <KateCmsUiButton
+                  v-if="term.canDelete"
+                  tag="button"
+                  :variant="['red', 'small']"
+                  :disabled="pendingId === term.id"
+                  @click="removeTerm(term)"
+                >
+                  Delete
+                </KateCmsUiButton>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+body#katecms-body .katecms-dictionary-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 0 0.5rem;
+  height: 100%;
+}
+body#katecms-body .katecms-dictionary-list__layout {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: start;
+  flex-grow: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+body#katecms-body .katecms-dictionary-list__create {
+  flex: 0 0 400px;
+  max-width: 400px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: auto;
+  padding: 0 0.5rem 0.5rem 0;
+}
+body#katecms-body .katecms-dictionary-list__create-title {
+  flex-shrink: 0;
+  font-size: 0.9375rem;
+  font-weight: 600;
+}
+body#katecms-body .katecms-dictionary-list__list {
+  flex-basis: 0;
+  flex-grow: 1;
+  align-self: stretch;
+  max-width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  padding-bottom: 0.5rem;
+}
+body#katecms-body .katecms-dictionary-list__table-wrap {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  background: var(--katecms-color-surface);
+  border: 1px solid var(--katecms-color-border);
+  border-radius: var(--katecms-border-radius);
+}
+body#katecms-body .katecms-dictionary-list__columns {
+  display: grid;
+  grid-template-columns: minmax(10rem, 2fr) minmax(7.5rem, 1.4fr) 12.5rem minmax(8.75rem, auto);
+  align-items: center;
+  min-width: 40rem;
+}
+body#katecms-body .katecms-dictionary-list__columns > [role=columnheader],
+body#katecms-body .katecms-dictionary-list__columns > [role=cell] {
+  min-width: 0;
+  padding: 0.625rem 0.875rem;
+  overflow-wrap: anywhere;
+}
+body#katecms-body .katecms-dictionary-list__columns--head {
+  flex-shrink: 0;
+  background: var(--katecms-color-bg);
+  border-bottom: 1px solid var(--katecms-color-border);
+}
+body#katecms-body .katecms-dictionary-list__columns--head > [role=columnheader] {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--katecms-color-muted);
+}
+body#katecms-body .katecms-dictionary-list__rows {
+  flex: 1;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+body#katecms-body .katecms-dictionary-list__rows .katecms-dictionary-list__columns {
+  border-bottom: 1px solid var(--katecms-color-border);
+}
+body#katecms-body .katecms-dictionary-list__rows .katecms-dictionary-list__columns:last-child {
+  border-bottom: none;
+}
+body#katecms-body .katecms-dictionary-list__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+</style>

package/dist/runtime/pages/admin/dictionaries/index.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/pages/admin/index.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;