katecms 0.0.0-stage → 1.0.0-beta.1

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

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

@@ -0,0 +1,28 @@
+type __VLS_Props = {
+    open?: boolean;
+    title?: string;
+    message?: string;
+    saveLabel?: string;
+    discardLabel?: string;
+    cancelLabel?: string;
+    busy?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => any;
+    save: () => any;
+    discard: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onSave?: (() => any) | undefined;
+    onDiscard?: (() => any) | undefined;
+}>, {
+    message: string;
+    title: string;
+    open: boolean;
+    saveLabel: string;
+    discardLabel: string;
+    cancelLabel: string;
+    busy: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,136 @@
+<script setup>
+import { onBeforeUnmount, watch } from "vue";
+const props = defineProps({
+  open: { type: Boolean, required: false, default: false },
+  title: { type: String, required: false, default: "Unsaved changes" },
+  message: { type: String, required: false, default: "Save your changes before leaving?" },
+  saveLabel: { type: String, required: false, default: "Save" },
+  discardLabel: { type: String, required: false, default: "Don't save" },
+  cancelLabel: { type: String, required: false, default: "Cancel" },
+  busy: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["save", "discard", "cancel"]);
+const rootClass = "katecms-confirm-dialog";
+function onKeydown(event) {
+  if (event.key === "Escape" && props.open && !props.busy) {
+    emit("cancel");
+  }
+}
+watch(() => props.open, (open) => {
+  if (typeof document === "undefined") {
+    return;
+  }
+  if (open) {
+    document.addEventListener("keydown", onKeydown);
+  } else {
+    document.removeEventListener("keydown", onKeydown);
+  }
+}, { immediate: true });
+onBeforeUnmount(() => {
+  if (typeof document !== "undefined") {
+    document.removeEventListener("keydown", onKeydown);
+  }
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      :class="`${rootClass}__overlay`"
+      @click.self="!busy && emit('cancel')"
+    >
+      <div
+        :class="rootClass"
+        role="dialog"
+        aria-modal="true"
+        :aria-labelledby="`${rootClass}-title`"
+      >
+        <div
+          :id="`${rootClass}-title`"
+          :class="`${rootClass}__title`"
+        >
+          {{ title }}
+        </div>
+        <div :class="`${rootClass}__message`">
+          {{ message }}
+        </div>
+        <div :class="`${rootClass}__actions`">
+          <KateCmsUiButton
+            tag="button"
+            :variant="['secondary']"
+            :disabled="busy"
+            @click="emit('discard')"
+          >
+            {{ discardLabel }}
+          </KateCmsUiButton>
+          <div :class="`${rootClass}__actions-end`">
+            <KateCmsUiButton
+              tag="button"
+              :variant="['secondary']"
+              :disabled="busy"
+              @click="emit('cancel')"
+            >
+              {{ cancelLabel }}
+            </KateCmsUiButton>
+            <KateCmsUiButton
+              tag="button"
+              :disabled="busy"
+              @click="emit('save')"
+            >
+              {{ busy ? "Saving\u2026" : saveLabel }}
+            </KateCmsUiButton>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.katecms-confirm-dialog {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 100%;
+  max-width: 27.5rem;
+  padding: 1.125rem;
+  background-color: var(--katecms-color-surface);
+  border-radius: var(--katecms-border-radius);
+  box-shadow: var(--katecms-shadow-md);
+}
+.katecms-confirm-dialog__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background-color: var(--katecms-color-overlay);
+}
+.katecms-confirm-dialog__title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--katecms-color-ink);
+}
+.katecms-confirm-dialog__message {
+  font-size: 0.875rem;
+  line-height: 1.45;
+  color: var(--katecms-color-muted);
+}
+.katecms-confirm-dialog__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+}
+.katecms-confirm-dialog__actions-end {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-left: auto;
+}
+</style>

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

@@ -0,0 +1,28 @@
+type __VLS_Props = {
+    open?: boolean;
+    title?: string;
+    message?: string;
+    saveLabel?: string;
+    discardLabel?: string;
+    cancelLabel?: string;
+    busy?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => any;
+    save: () => any;
+    discard: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onSave?: (() => any) | undefined;
+    onDiscard?: (() => any) | undefined;
+}>, {
+    message: string;
+    title: string;
+    open: boolean;
+    saveLabel: string;
+    discardLabel: string;
+    cancelLabel: string;
+    busy: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,33 @@
+import type { AdminDictionaryMeta, DictionaryTermFormModel, ParentOption } from '../../utils/dictionaries.js';
+type __VLS_Props = {
+    dictionary: AdminDictionaryMeta;
+    modelValue: DictionaryTermFormModel;
+    entryKey?: string | number;
+    parents?: ParentOption[];
+    saving?: boolean;
+    error?: string | null;
+    canUpdate?: boolean;
+    formId?: string;
+    submitLabel?: string;
+    showSubmit?: boolean;
+};
+declare function validateForSubmit(): boolean;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    validateForSubmit: typeof validateForSubmit;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: () => any;
+    "update:modelValue": (value: DictionaryTermFormModel) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSubmit?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: DictionaryTermFormModel) => any) | undefined;
+}>, {
+    canUpdate: boolean;
+    parents: ParentOption[];
+    error: string | null;
+    saving: boolean;
+    formId: string;
+    submitLabel: string;
+    showSubmit: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,328 @@
+<script setup>
+import { computed, nextTick, reactive, ref, watch } from "vue";
+import {
+  buildFormValues,
+  collectPanelDefaults,
+  collectVisibleValueKeys,
+  isLayoutOnlyFieldType,
+  isVisible,
+  validateRequiredFields
+} from "@katecms/core";
+import { resolveField } from "../../utils/helpers";
+import { provideKateCmsFieldValues } from "../../utils/field-values";
+import { provideKateCmsFieldErrors } from "../../utils/field-errors";
+import { slugify } from "../../utils/slugify";
+const props = defineProps({
+  dictionary: { type: Object, required: true },
+  modelValue: { type: Object, required: true },
+  entryKey: { type: [String, Number], required: false },
+  parents: { type: Array, required: false, default: () => [] },
+  saving: { type: Boolean, required: false, default: false },
+  error: { type: [String, null], required: false, default: null },
+  canUpdate: { type: Boolean, required: false, default: true },
+  formId: { type: String, required: false, default: "cms-dictionary-term-form" },
+  submitLabel: { type: String, required: false, default: "Add" },
+  showSubmit: { type: Boolean, required: false, default: true }
+});
+const emit = defineEmits(["update:modelValue", "submit"]);
+const rootClass = "katecms-dictionary-form";
+const fieldDefs = computed(() => props.dictionary.fields ?? {});
+const values = reactive({});
+provideKateCmsFieldValues(values);
+const fieldErrors = ref({});
+const attemptedSubmit = ref(false);
+provideKateCmsFieldErrors(fieldErrors);
+const readOnly = computed(() => !props.canUpdate);
+const titleField = { type: "text", label: "Title", required: true };
+const slugField = { type: "text", label: "Slug", required: true };
+const parentChoices = computed(
+  () => (props.parents ?? []).map((parent) => {
+    const depth = parent.depth ?? 0;
+    const title = depth < 1 ? parent.title : `${"\u2014 ".repeat(depth)}${parent.title}`;
+    return {
+      val: parent.id,
+      lbl: title
+    };
+  })
+);
+const parentField = computed(() => ({
+  type: "select",
+  label: "Parent",
+  allowNull: true,
+  placeholder: "\u2014 None \u2014",
+  choices: parentChoices.value
+}));
+let syncingFromParent = false;
+function replaceValues(next) {
+  syncingFromParent = true;
+  for (const key of Object.keys(values)) {
+    Reflect.deleteProperty(values, key);
+  }
+  Object.assign(values, next);
+  queueMicrotask(() => {
+    syncingFromParent = false;
+  });
+}
+watch(
+  () => `${props.dictionary.slug}:${props.entryKey ?? "default"}`,
+  () => {
+    replaceValues({
+      ...buildFormValues(fieldDefs.value),
+      ...props.modelValue.fields ?? {}
+    });
+    attemptedSubmit.value = false;
+    fieldErrors.value = {};
+  },
+  { immediate: true }
+);
+watch(
+  values,
+  () => {
+    if (syncingFromParent) {
+      return;
+    }
+    emit("update:modelValue", {
+      ...props.modelValue,
+      fields: { ...values }
+    });
+  },
+  { deep: true }
+);
+const visibleFields = computed(
+  () => Object.entries(fieldDefs.value).filter(
+    ([, field]) => isVisible(field.conditionalLogic, values)
+  )
+);
+const hiddenCache = {};
+function restoreFieldValue(key, field) {
+  if (isLayoutOnlyFieldType(field.type)) {
+    if (field.type === "tab" || field.type === "accordion") {
+      for (const [panelKey, panelDefault] of Object.entries(collectPanelDefaults(field))) {
+        if (!(panelKey in values)) {
+          values[panelKey] = panelKey in hiddenCache ? hiddenCache[panelKey] : panelDefault;
+          Reflect.deleteProperty(hiddenCache, panelKey);
+        }
+      }
+    }
+    Reflect.deleteProperty(values, key);
+    return;
+  }
+  if (!(key in values)) {
+    values[key] = key in hiddenCache ? hiddenCache[key] : "defaultValue" in field ? field.defaultValue : field.type === "group" ? void 0 : field.type === "repeater" || field.type === "flexible_content" || field.type === "gallery" ? [] : field.type === "open_street_map" && field.multiple ? [] : void 0;
+    Reflect.deleteProperty(hiddenCache, key);
+  }
+}
+watch(visibleFields, (visible) => {
+  const visibleKeys = collectVisibleValueKeys(visible);
+  for (const key of Object.keys(values)) {
+    if (!visibleKeys.has(key)) {
+      hiddenCache[key] = values[key];
+      Reflect.deleteProperty(values, key);
+    }
+  }
+  for (const [key, field] of visible) {
+    restoreFieldValue(key, field);
+  }
+}, { immediate: true });
+function updateCore(key, value) {
+  emit("update:modelValue", {
+    ...props.modelValue,
+    [key]: value
+  });
+}
+const parentModel = computed({
+  get() {
+    return props.modelValue.parentId;
+  },
+  set(value) {
+    if (value === "" || value === null || value === void 0) {
+      updateCore("parentId", null);
+      return;
+    }
+    const id = Number(value);
+    updateCore("parentId", Number.isInteger(id) && id > 0 ? id : null);
+  }
+});
+const canSubmit = computed(() => !readOnly.value && !props.saving);
+function collectFieldErrors(slug = props.modelValue.slug) {
+  const next = {};
+  if (!props.modelValue.title.trim()) {
+    next["cms-dictionary-title"] = "Title is required.";
+  }
+  if (!slug.trim()) {
+    next["cms-dictionary-slug"] = "Slug is required.";
+  }
+  for (const issue of validateRequiredFields(fieldDefs.value, values)) {
+    next[issue.key] = issue.message;
+  }
+  return next;
+}
+function scrollToFirstError(errors) {
+  const key = Object.keys(errors)[0];
+  if (!key || typeof document === "undefined") {
+    return;
+  }
+  const target = document.querySelector(`[data-field-key="${CSS.escape(key)}"]`);
+  if (target instanceof HTMLElement) {
+    target.scrollIntoView({ block: "center", behavior: "smooth" });
+  }
+}
+function validateForSubmit() {
+  if (!canSubmit.value) {
+    return false;
+  }
+  let slug = props.modelValue.slug.trim();
+  if (!slug && props.modelValue.title.trim()) {
+    slug = slugify(props.modelValue.title) || "term";
+    updateCore("slug", slug);
+  }
+  attemptedSubmit.value = true;
+  const errors = collectFieldErrors(slug);
+  fieldErrors.value = errors;
+  if (Object.keys(errors).length > 0) {
+    nextTick(() => scrollToFirstError(errors));
+    return false;
+  }
+  return true;
+}
+function onSubmit() {
+  if (!validateForSubmit()) {
+    return;
+  }
+  emit("submit");
+}
+function ensureSlug() {
+  if (!props.modelValue.slug.trim() && props.modelValue.title.trim()) {
+    updateCore("slug", slugify(props.modelValue.title) || "term");
+  }
+}
+defineExpose({ validateForSubmit });
+watch(
+  [values, () => props.modelValue.title, () => props.modelValue.slug],
+  () => {
+    if (!attemptedSubmit.value) {
+      return;
+    }
+    fieldErrors.value = collectFieldErrors();
+  },
+  { deep: true }
+);
+const requiredNotice = computed(() => {
+  const messages = Object.values(fieldErrors.value);
+  if (messages.length === 0) {
+    return "";
+  }
+  if (messages.length === 1) {
+    return messages[0];
+  }
+  return "Please fill in the required fields.";
+});
+const buttonLabel = computed(() => props.submitLabel);
+</script>
+
+<template>
+  <form
+    :id="formId"
+    :class="rootClass"
+    novalidate
+    @submit.prevent="onSubmit"
+    @focusout="ensureSlug"
+  >
+    <KateCmsUiNotice
+      v-if="requiredNotice"
+      placement="static"
+      variant="danger"
+      :message="requiredNotice"
+      :closable="false"
+    />
+    <KateCmsUiNotice
+      v-if="error"
+      placement="static"
+      variant="danger"
+      :message="error"
+    />
+
+    <KateCmsFieldWrapper
+      field-key="cms-dictionary-title"
+      :field="titleField"
+    >
+      <KateCmsInputControl
+        :model-value="modelValue.title"
+        field-key="cms-dictionary-title"
+        :field="titleField"
+        :disabled="readOnly"
+        @update:model-value="updateCore('title', String($event ?? ''))"
+      />
+    </KateCmsFieldWrapper>
+
+    <KateCmsFieldWrapper
+      field-key="cms-dictionary-slug"
+      :field="slugField"
+    >
+      <KateCmsInputControl
+        :model-value="modelValue.slug"
+        field-key="cms-dictionary-slug"
+        :field="slugField"
+        :disabled="readOnly"
+        @update:model-value="updateCore('slug', String($event ?? ''))"
+      />
+    </KateCmsFieldWrapper>
+
+    <KateCmsSelectField
+      v-if="dictionary.hierarchical"
+      v-model="parentModel"
+      field-key="cms-dictionary-parent"
+      :field="parentField"
+    />
+
+    <div
+      v-if="visibleFields.length"
+      :class="`${rootClass}__fields`"
+    >
+      <div
+        v-for="[key, field] in visibleFields"
+        :key="key"
+        :class="`${rootClass}__field`"
+        :style="field.columnWidth ? { width: `${field.columnWidth}%` } : void 0"
+      >
+        <component
+          :is="resolveField(field.type)"
+          v-model="values[key]"
+          :field-key="key"
+          :field="field"
+        />
+      </div>
+    </div>
+
+    <KateCmsUiButton
+      v-if="showSubmit && canUpdate"
+      tag="button"
+      type="submit"
+      :disabled="!canSubmit"
+    >
+      {{ buttonLabel }}
+    </KateCmsUiButton>
+  </form>
+</template>
+
+<style scoped>
+body#katecms-body .katecms-dictionary-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+  min-width: 0;
+}
+body#katecms-body .katecms-dictionary-form__fields {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 1rem;
+  margin-left: -0.5rem;
+  margin-right: -0.5rem;
+}
+body#katecms-body .katecms-dictionary-form__field {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  width: 100%;
+  box-sizing: border-box;
+}
+</style>

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

@@ -0,0 +1,33 @@
+import type { AdminDictionaryMeta, DictionaryTermFormModel, ParentOption } from '../../utils/dictionaries.js';
+type __VLS_Props = {
+    dictionary: AdminDictionaryMeta;
+    modelValue: DictionaryTermFormModel;
+    entryKey?: string | number;
+    parents?: ParentOption[];
+    saving?: boolean;
+    error?: string | null;
+    canUpdate?: boolean;
+    formId?: string;
+    submitLabel?: string;
+    showSubmit?: boolean;
+};
+declare function validateForSubmit(): boolean;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    validateForSubmit: typeof validateForSubmit;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: () => any;
+    "update:modelValue": (value: DictionaryTermFormModel) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSubmit?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: DictionaryTermFormModel) => any) | undefined;
+}>, {
+    canUpdate: boolean;
+    parents: ParentOption[];
+    error: string | null;
+    saving: boolean;
+    formId: string;
+    submitLabel: string;
+    showSubmit: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,15 @@
+import type { EntryRevisionItem } from '../../utils/collections.js';
+type __VLS_Props = {
+    items: EntryRevisionItem[];
+    loading?: boolean;
+    error?: string;
+    canRestore?: boolean;
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    restore: (id: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRestore?: ((id: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;