katecms 0.0.0-stage → 1.0.0-beta.1

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

@@ -0,0 +1,451 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, ref, watch } from "vue";
+import { isImageMedia as isImage } from "@katecms/core";
+import { defaultMediaLibraryFilters, mediaFiltersActive } from "../../utils/media-library-query";
+const props = defineProps({
+  open: { type: Boolean, required: false, default: false },
+  mediaKind: { type: String, required: false, default: "file" },
+  libraryEnabled: { type: Boolean, required: false, default: true },
+  library: { type: Array, required: false, default: () => [] },
+  selectedId: { type: Number, required: false },
+  selectedIds: { type: Array, required: false, default: () => [] },
+  multiple: { type: Boolean, required: false, default: false },
+  loading: { type: Boolean, required: false, default: false },
+  loadingMore: { type: Boolean, required: false, default: false },
+  hasMore: { type: Boolean, required: false, default: false },
+  filters: { type: Object, required: false, default: () => defaultMediaLibraryFilters() },
+  months: { type: Array, required: false, default: () => [] },
+  error: { type: [String, null], required: false, default: null },
+  uploading: { type: Boolean, required: false, default: false },
+  processing: { type: Boolean, required: false, default: false },
+  cropping: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["close", "choose", "confirm", "upload", "loadMore", "update:filters"]);
+const rootClass = "katecms-media-modal";
+const pendingIds = ref([]);
+const body = ref(null);
+const sentinel = ref(null);
+let loadObserver = null;
+function stopLoadObserver() {
+  loadObserver?.disconnect();
+  loadObserver = null;
+}
+function startLoadObserver() {
+  stopLoadObserver();
+  const root = body.value;
+  const target = sentinel.value;
+  if (!props.open || !root || !target || !props.hasMore) {
+    return;
+  }
+  loadObserver = new IntersectionObserver((entries) => {
+    if (entries.some((entry) => entry.isIntersecting)) {
+      emit("loadMore");
+    }
+  }, { root, rootMargin: "160px" });
+  loadObserver.observe(target);
+}
+watch([() => props.open, body, sentinel, () => props.hasMore], () => {
+  void nextTick(startLoadObserver);
+});
+watch(() => props.loadingMore, (busy) => {
+  if (busy || !props.open || !props.hasMore) {
+    return;
+  }
+  void nextTick(() => {
+    const root = body.value;
+    const target = sentinel.value;
+    if (!root || !target) {
+      return;
+    }
+    const rootRect = root.getBoundingClientRect();
+    const targetRect = target.getBoundingClientRect();
+    if (targetRect.top <= rootRect.bottom + 160) {
+      emit("loadMore");
+    }
+  });
+});
+onBeforeUnmount(stopLoadObserver);
+watch(() => props.open, (isOpen) => {
+  if (isOpen && props.multiple) {
+    pendingIds.value = [];
+  }
+});
+const isImageKind = computed(() => props.mediaKind === "image");
+const title = computed(() => {
+  if (props.libraryEnabled) {
+    return "Media library";
+  }
+  return isImageKind.value ? "Upload image" : "Upload file";
+});
+const processingText = computed(
+  () => isImageKind.value ? "Processing image\u2026" : "Processing file\u2026"
+);
+const noLibraryHint = computed(
+  () => isImageKind.value ? "Picking from the library is disabled. Upload a new image." : "Picking from the library is disabled. Upload a new file."
+);
+const emptyLibraryHint = computed(
+  () => mediaFiltersActive(props.filters) ? "No files match." : "The library is empty. Upload the first file."
+);
+const pendingCount = computed(() => pendingIds.value.length);
+const confirmLabel = computed(() => `Add (${pendingCount.value})`);
+function thumbUrl(item) {
+  const variant = item.variants?.find((v) => v.size === "thumbnail");
+  return variant ? variant.url : item.url;
+}
+function fileLabel(item) {
+  return item.filename || item.url.split("/").pop() || "File";
+}
+function isAlreadySelected(id) {
+  return props.selectedIds.includes(id);
+}
+function isPending(id) {
+  return pendingIds.value.includes(id);
+}
+function isHighlighted(item) {
+  if (props.multiple) {
+    return isPending(item.id) || isAlreadySelected(item.id);
+  }
+  return props.selectedId === item.id;
+}
+function onItemClick(item) {
+  if (!props.multiple) {
+    emit("choose", item);
+    return;
+  }
+  if (isAlreadySelected(item.id)) {
+    return;
+  }
+  if (isPending(item.id)) {
+    pendingIds.value = pendingIds.value.filter((id) => id !== item.id);
+    return;
+  }
+  pendingIds.value = [...pendingIds.value, item.id];
+}
+function confirmSelection() {
+  const items = props.library.filter((item) => pendingIds.value.includes(item.id));
+  emit("confirm", items);
+  pendingIds.value = [];
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      :class="rootClass"
+      @click.self="emit('close')"
+    >
+      <div :class="`${rootClass}__dialog`">
+        <div :class="`${rootClass}__dialog-head`">
+          <span :class="`${rootClass}__dialog-title`">
+            {{ title }}
+          </span>
+          <KateCmsUiButton
+            tag="button"
+            :variant="['tertiary', 'small', 'icon']"
+            aria-label="Close"
+            @click="emit('close')"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 640 640"
+              fill="currentColor"
+            >
+              <path
+                d="M183.1 137.4C170.6 124.9 150.3 124.9 137.8 137.4C125.3 149.9 125.3 170.2 137.8 182.7L275.2 320L137.9 457.4C125.4 469.9 125.4 490.2 137.9 502.7C150.4 515.2 170.7 515.2 183.2 502.7L320.5 365.3L457.9 502.6C470.4 515.1 490.7 515.1 503.2 502.6C515.7 490.1 515.7 469.8 503.2 457.3L365.8 320L503.1 182.6C515.6 170.1 515.6 149.8 503.1 137.3C490.6 124.8 470.3 124.8 457.8 137.3L320.5 274.7L183.1 137.4z"
+              />
+            </svg>
+          </KateCmsUiButton>
+        </div>
+
+        <KateCmsMediaLibraryFilters
+          v-if="libraryEnabled && !cropping && !processing"
+          :filters="filters"
+          :months="months"
+          id-prefix="picker"
+          :class="`${rootClass}__filters`"
+          @update:filters="emit('update:filters', $event)"
+        />
+
+        <div
+          ref="body"
+          :class="`${rootClass}__dialog-body`"
+        >
+          <div
+            v-if="error"
+            :class="`${rootClass}__error`"
+          >
+            {{ error }}
+          </div>
+
+          <div
+            v-if="processing"
+            :class="`${rootClass}__processing`"
+          >
+            <span :class="`${rootClass}__spinner`" />
+            <span :class="`${rootClass}__processing-text`">{{ processingText }}</span>
+          </div>
+
+          <template v-else-if="cropping">
+            <slot />
+          </template>
+
+          <template v-else>
+            <div
+              v-if="uploading"
+              :class="`${rootClass}__hint`"
+            >
+              Uploading…
+            </div>
+
+            <template v-if="libraryEnabled">
+              <div
+                v-if="loading && !library.length"
+                :class="`${rootClass}__hint`"
+              >
+                Loading…
+              </div>
+              <div
+                v-else-if="!library.length && !hasMore"
+                :class="`${rootClass}__hint`"
+              >
+                {{ emptyLibraryHint }}
+              </div>
+              <template v-else>
+                <div :class="`${rootClass}__grid`">
+                  <button
+                    v-for="item in library"
+                    :key="item.id"
+                    type="button"
+                    :class="[
+  `${rootClass}__grid-item`,
+  {
+    'is-selected': isHighlighted(item),
+    'is-disabled': multiple && isAlreadySelected(item.id)
+  }
+]"
+                    :disabled="multiple && isAlreadySelected(item.id)"
+                    @click="onItemClick(item)"
+                  >
+                    <img
+                      v-if="isImage(item)"
+                      :src="thumbUrl(item)"
+                      :alt="item.alt || ''"
+                      :class="`${rootClass}__grid-image`"
+                    >
+                    <span
+                      v-else
+                      :class="`${rootClass}__grid-file`"
+                    >
+                      <span
+                        :class="`${rootClass}__grid-file-icon`"
+                        aria-hidden="true"
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 640 640"
+                        >
+                          <path
+                            d="M304 112L192 112C183.2 112 176 119.2 176 128L176 512C176 520.8 183.2 528 192 528L448 528C456.8 528 464 520.8 464 512L464 272L376 272C336.2 272 304 239.8 304 200L304 112zM444.1 224L352 131.9L352 200C352 213.3 362.7 224 376 224L444.1 224zM128 128C128 92.7 156.7 64 192 64L325.5 64C342.5 64 358.8 70.7 370.8 82.7L493.3 205.3C505.3 217.3 512 233.6 512 250.6L512 512C512 547.3 483.3 576 448 576L192 576C156.7 576 128 547.3 128 512L128 128z"
+                          />
+                        </svg>
+                      </span>
+                      <span :class="`${rootClass}__grid-file-name`">{{ fileLabel(item) }}</span>
+                    </span>
+                  </button>
+                </div>
+                <div
+                  v-if="hasMore"
+                  ref="sentinel"
+                  :class="`${rootClass}__hint`"
+                >
+                  {{ loadingMore ? "Loading\u2026" : "" }}
+                </div>
+              </template>
+            </template>
+
+            <div
+              v-else
+              :class="`${rootClass}__hint`"
+            >
+              {{ noLibraryHint }}
+            </div>
+          </template>
+        </div>
+
+        <div
+          v-if="!cropping && !processing"
+          :class="`${rootClass}__dialog-foot`"
+        >
+          <KateCmsUiButton
+            tag="button"
+            variant="secondary"
+            :disabled="uploading"
+            @click="emit('upload')"
+          >
+            {{ uploading ? "Uploading\u2026" : isImageKind ? "Upload image" : "Upload file" }}
+          </KateCmsUiButton>
+
+          <KateCmsUiButton
+            v-if="multiple && pendingCount"
+            tag="button"
+            :disabled="uploading"
+            @click="confirmSelection"
+          >
+            {{ confirmLabel }}
+          </KateCmsUiButton>
+
+          <KateCmsUiButton
+            tag="button"
+            :variant="multiple ? 'secondary' : void 0"
+            @click="emit('close')"
+          >
+            Close
+          </KateCmsUiButton>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.katecms-media-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  padding: 1.25rem;
+  background-color: var(--katecms-color-overlay);
+}
+.katecms-media-modal__dialog {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background-color: var(--katecms-color-surface);
+  border-radius: var(--katecms-border-radius);
+  box-shadow: var(--katecms-shadow-md);
+  overflow: hidden;
+}
+.katecms-media-modal__dialog-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.875rem 1rem;
+  border-bottom: 1px solid var(--katecms-color-border);
+}
+.katecms-media-modal__dialog-title {
+  font-weight: 600;
+  color: var(--katecms-color-ink);
+}
+.katecms-media-modal__dialog-body {
+  flex: 1;
+  overflow-y: auto;
+}
+.katecms-media-modal__dialog-foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 0.875rem 1rem;
+  border-top: 1px solid var(--katecms-color-border);
+}
+.katecms-media-modal__filters {
+  position: relative;
+  z-index: 2;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--katecms-color-border);
+}
+.katecms-media-modal__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 0.625rem;
+  padding: 1rem;
+}
+.katecms-media-modal__grid-item {
+  aspect-ratio: 1/1;
+  padding: 0;
+  border: 2px solid transparent;
+  border-radius: var(--katecms-border-radius);
+  overflow: hidden;
+  background-color: var(--katecms-color-bg);
+  cursor: pointer;
+}
+.katecms-media-modal__grid-item.is-selected {
+  border-color: var(--katecms-color-accent);
+}
+.katecms-media-modal__grid-item.is-disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+.katecms-media-modal__grid-image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.katecms-media-modal__grid-file {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: 100%;
+  height: 100%;
+  padding: 0.625rem;
+  text-align: center;
+}
+.katecms-media-modal__grid-file-icon {
+  display: block;
+  width: 28px;
+  height: 28px;
+}
+.katecms-media-modal__grid-file-icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  fill: var(--katecms-color-muted);
+}
+.katecms-media-modal__grid-file-name {
+  font-size: 0.6875rem;
+  color: var(--katecms-color-ink);
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.katecms-media-modal__hint {
+  margin: 0;
+  padding: 1rem;
+  color: var(--katecms-color-muted);
+}
+.katecms-media-modal__processing {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  height: 100%;
+  padding: 2.5rem;
+  color: var(--katecms-color-muted);
+}
+.katecms-media-modal__spinner {
+  width: 36px;
+  height: 36px;
+  border: 3px solid var(--katecms-color-border);
+  border-top-color: var(--katecms-color-accent);
+  border-radius: 50%;
+  animation: katecms-media-modal-spin 0.8s linear infinite;
+}
+.katecms-media-modal__error {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: var(--katecms-color-danger);
+}
+
+@keyframes katecms-media-modal-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

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

@@ -0,0 +1,65 @@
+import type { MediaItem } from '@katecms/core';
+import type { MediaLibraryFilterState } from '../../utils/media-library-query.js';
+type __VLS_Props = {
+    open?: boolean;
+    mediaKind?: 'file' | 'image';
+    libraryEnabled?: boolean;
+    library?: MediaItem[];
+    selectedId?: number;
+    selectedIds?: number[];
+    multiple?: boolean;
+    loading?: boolean;
+    loadingMore?: boolean;
+    hasMore?: boolean;
+    filters?: MediaLibraryFilterState;
+    months?: string[];
+    error?: string | null;
+    uploading?: boolean;
+    processing?: boolean;
+    cropping?: boolean;
+};
+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, {
+    close: () => any;
+    "update:filters": (filters: MediaLibraryFilterState) => any;
+    choose: (item: MediaItem) => any;
+    confirm: (items: MediaItem[]) => any;
+    upload: () => any;
+    loadMore: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:filters"?: ((filters: MediaLibraryFilterState) => any) | undefined;
+    onChoose?: ((item: MediaItem) => any) | undefined;
+    onConfirm?: ((items: MediaItem[]) => any) | undefined;
+    onUpload?: (() => any) | undefined;
+    onLoadMore?: (() => any) | undefined;
+}>, {
+    multiple: boolean;
+    months: string[];
+    error: string | null;
+    library: MediaItem[];
+    filters: MediaLibraryFilterState;
+    open: boolean;
+    loading: boolean;
+    mediaKind: "image" | "file";
+    libraryEnabled: boolean;
+    selectedIds: number[];
+    loadingMore: boolean;
+    hasMore: boolean;
+    uploading: boolean;
+    processing: boolean;
+    cropping: boolean;
+}, {}, {}, {}, 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/OptionPageForm.d.vue.ts

@@ -0,0 +1,26 @@
+import type { AdminOptionMeta } from '../../utils/options.js';
+type __VLS_Props = {
+    page: AdminOptionMeta;
+    modelValue: Record<string, unknown>;
+    saving?: boolean;
+    error?: string | null;
+    canUpdate?: boolean;
+    formId?: string;
+};
+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: Record<string, unknown>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSubmit?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: Record<string, unknown>) => any) | undefined;
+}>, {
+    canUpdate: boolean;
+    error: string | null;
+    saving: boolean;
+    formId: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;