@xleddyl/nuxt-cms 0.4.4 → 0.5.0

package/dist/runtime/app/components/cms/MediaThumb.vue

@@ -1,5 +1,8 @@
 <template>
-   <span v-if="!value" class="cms-media-thumb-empty">—</span>
+   <span v-if="!value" class="cms-media-thumb-empty">
+      <KIcon :name="cmsIcon('minus')" />
+      <span class="k-visually-hidden">No media</span>
+   </span>
 
    <img
       v-else-if="kind === 'image' && url"
@@ -21,14 +24,16 @@
    />
 
    <span v-else :title="filename" class="cms-media-thumb is-fallback">
-      <CmsIcon :name="icon" class="size-4" />
+      <KIcon :name="cmsIcon(icon)" />
    </span>
 </template>
 
 <script setup>
 import { computed } from "#imports";
+import { Icon as KIcon } from "@xleddyl/443-components-vue";
 import { mediaFilename, mediaIconFor, mediaPublicUrl, mediaTypeForKey } from "#nuxt-cms";
 import { useCmsRuntime } from "../../composables/cms-runtime";
+import { cmsIcon } from "../../utils/ui";
 const props = defineProps({
   value: { type: [String, null], required: false }
 });

package/dist/runtime/app/components/cms/MediaUpload.vue

@@ -1,68 +1,50 @@
 <template>
-   <div class="flex flex-col items-center gap-2">
-      <button
-         type="button"
-         class="cms-dropzone"
-         :class="{ 'is-over': dragOver, 'is-busy': uploading }"
-         :disabled="uploading"
-         @click="input?.click()"
-         @dragover.prevent="dragOver = true"
-         @dragleave.prevent="dragOver = false"
-         @drop.prevent.stop="onDrop"
-      >
-         <input
-            ref="input"
-            type="file"
-            class="hidden"
-            :accept="acceptAttr"
-            :multiple="multiple"
-            @change="onChange"
-            @click.stop
-         />
-         <CmsIcon
-            :name="uploading ? 'arrow-path' : 'cloud-arrow-up'"
-            class="size-5 shrink-0"
-            :class="{ 'animate-spin': uploading }"
-         />
-         <span class="text-sm font-medium">
-            {{
-               uploading ? `Uploading ${Math.min(done + 1, total)} of ${total}\u2026` : multiple ? "Drop files here or click to browse" : "Drop a file here or click to browse"
-            }}
-         </span>
-         <span v-if="!uploading" class="cms-dropzone-hint">
-            <CmsIcon :name="folder ? 'folder' : 'circle-stack'" class="size-3.5" />
+   <KFileInput
+      :accept="acceptAttr"
+      accept-mode="hint"
+      :multiple="multiple"
+      :directory="directories ? 'drop' : false"
+      :list="false"
+      :loading="uploading"
+      :icon="cmsIcon('cloud-arrow-up')"
+      size="lg"
+      skip-hidden
+      @add="onAdd"
+   >
+      <template #title>
+         {{
+            uploading ? `Uploading ${Math.min(done + 1, total)} of ${total}\u2026` : multiple ? "Drop files here or click to browse" : "Drop a file here or click to browse"
+         }}
+      </template>
+      <template v-if="!uploading" #hint>
+         <span class="cms-media-dropzone-hint">
+            <KIcon :name="cmsIcon(folder ? 'folder' : 'circle-stack')" />
             {{ folder ?? "Library root" }}
          </span>
-      </button>
-      <template v-if="directories && multiple && !uploading">
-         <input
-            ref="directoryInput"
-            type="file"
-            class="hidden"
-            webkitdirectory
-            multiple
-            @change="onChange"
-         />
-         <CmsButton
+      </template>
+      <template v-if="directories && multiple && !uploading" #actions="{ browseDirectory }">
+         <KButton
             label="Upload a folder"
-            icon="folder-arrow-down"
+            :icon="cmsIcon('folder-arrow-down')"
             variant="ghost"
-            color="neutral"
+            tone="neutral"
             size="sm"
-            @click="directoryInput?.click()"
+            @click="browseDirectory"
          />
       </template>
-   </div>
+   </KFileInput>
 </template>
 
 <script setup>
 import { mediaTypeAccept } from "#nuxt-cms";
-import { computed, ref } from "#imports";
+import { computed } from "#imports";
 import {
-  uploadTreeFromDrop,
-  uploadTreeFromFiles,
-  useCmsMediaUploader
-} from "../../composables/cms-media-uploader";
+  Button as KButton,
+  FileInput as KFileInput,
+  Icon as KIcon
+} from "@xleddyl/443-components-vue";
+import { cmsIcon } from "../../utils/ui";
+import { uploadTreeFromEntries, useCmsMediaUploader } from "../../composables/cms-media-uploader";
 const props = defineProps({
   multiple: { type: Boolean, required: false },
   mediaType: { type: null, required: false, default: "file" },
@@ -72,31 +54,16 @@ const props = defineProps({
 });
 const emit = defineEmits(["uploaded"]);
 const { upload, uploading, done, total } = useCmsMediaUploader();
-const input = ref(null);
-const directoryInput = ref(null);
-const dragOver = ref(false);
 const acceptAttr = computed(
   () => (props.accept?.length ? props.accept : mediaTypeAccept(props.mediaType))?.join(",")
 );
-async function handleTree(pending) {
-  const tree = await pending;
+async function onAdd(_files, detail) {
+  const tree = uploadTreeFromEntries(detail.entries, props.directories ? detail.directories : []);
   const items = await upload(tree, {
     folder: props.folder,
     accept: acceptAttr.value,
     multiple: props.multiple
   });
-  if (items.length || props.directories && tree.directories.length) emit("uploaded", items);
-}
-function onChange(event) {
-  const el = event.target;
-  if (el.files?.length) void handleTree(uploadTreeFromFiles(el.files));
-  el.value = "";
-}
-function onDrop(event) {
-  dragOver.value = false;
-  if (!event.dataTransfer?.files.length) return;
-  void handleTree(
-    props.directories ? uploadTreeFromDrop(event.dataTransfer) : uploadTreeFromFiles(event.dataTransfer.files)
-  );
+  if (items.length || tree.directories.length) emit("uploaded", items);
 }
 </script>

package/dist/runtime/app/components/cms/RelationField.vue

@@ -1,28 +1,19 @@
 <template>
-   <CmsSelectMenu
-      v-if="multiple"
-      v-model="many"
-      v-model:search-term="searchTerm"
-      multiple
-      ignore-filter
-      :items="options"
-      value-key="value"
-      :loading="loading"
-   />
-   <CmsSelectMenu
-      v-else
-      v-model="single"
-      v-model:search-term="searchTerm"
-      ignore-filter
-      :items="singleItems"
-      value-key="value"
-      :loading="loading"
+   <KCombobox
+      v-model="model"
+      :multiple="multiple"
+      :clearable="!multiple && !required"
+      open-on-focus
+      :options="selectedOptions"
+      :search="search"
+      :debounce="300"
    />
 </template>
 
 <script setup>
 import { isTranslatableField, selectDisplayValue } from "#nuxt-cms";
-import { computed, onBeforeUnmount, onMounted, ref, watch } from "#imports";
+import { Combobox as KCombobox } from "@xleddyl/443-components-vue";
+import { computed, onMounted, ref } from "#imports";
 import cmsConfig from "#cms-config";
 import { useCmsRuntime } from "../../composables/cms-runtime";
 import { useCmsToast } from "../../composables/cms-toast";
@@ -36,40 +27,27 @@ const model = defineModel({ type: [String, Array, null], ...{ required: true } }
 const toast = useCmsToast();
 const target = cmsConfig[props.to];
 const endpoint = `/api/cms/admin/${props.to}`;
-const fetched = ref([]);
 const selectedRows = ref(/* @__PURE__ */ new Map());
-const loading = ref(true);
-const searchTerm = ref("");
-let fetchRequest = 0;
-async function fetchOptions() {
-  const request = ++fetchRequest;
-  loading.value = true;
+async function search(query, signal) {
+  const term = query.trim();
   try {
-    const term = searchTerm.value.trim();
     const page = await $fetch(endpoint, {
-      query: { light: "true", limit: 25, ...term ? { search: term } : {} }
+      query: { light: "true", limit: 25, ...term ? { search: term } : {} },
+      signal
     });
-    if (request !== fetchRequest) return;
-    fetched.value = page.items;
+    return page.items.map((row) => ({ label: optionLabel(row), value: row.id }));
   } catch (err) {
-    if (request !== fetchRequest) return;
+    if (signal.aborted) throw err;
     toast.add({
       title: "Loading failed",
       description: errorMessage(err),
       color: "error"
     });
-  } finally {
-    if (request === fetchRequest) loading.value = false;
+    return [];
   }
 }
-let searchTimer;
-watch(searchTerm, () => {
-  clearTimeout(searchTimer);
-  searchTimer = setTimeout(() => void fetchOptions(), 300);
-});
-onBeforeUnmount(() => clearTimeout(searchTimer));
 const selectedIds = computed(() => {
-  if (props.multiple) return model.value ?? [];
+  if (Array.isArray(model.value)) return model.value;
   return model.value ? [model.value] : [];
 });
 async function resolveSelected() {
@@ -85,7 +63,6 @@ async function resolveSelected() {
   );
 }
 onMounted(() => {
-  void fetchOptions();
   void resolveSelected();
 });
 const { i18n: contentI18n } = useCmsRuntime();
@@ -102,35 +79,10 @@ function optionLabel(row) {
     return selectDisplayValue(titleFieldConfig, value) || `#${row.id}`;
   return String(value ?? `#${row.id}`);
 }
-const options = computed(() => {
-  const seen = /* @__PURE__ */ new Set();
-  const list = [];
-  for (const row of fetched.value) {
-    const id = row.id;
-    list.push({ label: optionLabel(row), value: id });
-    seen.add(id);
-  }
-  for (const id of selectedIds.value) {
-    if (seen.has(id)) continue;
+const selectedOptions = computed(
+  () => selectedIds.value.map((id) => {
     const row = selectedRows.value.get(id);
-    list.push({ label: row ? optionLabel(row) : `#${id}`, value: id });
-  }
-  return list;
-});
-const singleItems = computed(() => [
-  ...props.required ? [] : [{ label: "\u2014", value: null }],
-  ...options.value
-]);
-const single = computed({
-  get: () => model.value ?? null,
-  set: (value) => {
-    model.value = value;
-  }
-});
-const many = computed({
-  get: () => model.value ?? [],
-  set: (value) => {
-    model.value = value;
-  }
-});
+    return { label: row ? optionLabel(row) : `#${id}`, value: id };
+  })
+);
 </script>

package/dist/runtime/app/components/cms/RichTextField.vue

@@ -1,183 +1,29 @@
 <template>
-   <div class="cms-richtext">
-      <div class="cms-richtext-toolbar">
-         <CmsButton
-            v-for="action in actions"
-            :key="action.icon"
-            :icon="action.icon"
-            size="xs"
-            :variant="editor?.isActive(action.mark, action.attrs) ? 'soft' : 'ghost'"
-            color="neutral"
-            :aria-label="action.label"
-            :title="action.label"
-            @click="action.run"
-         />
-         <CmsPopover v-model:open="linkOpen">
-            <CmsButton
-               icon="link"
-               size="xs"
-               :variant="editor?.isActive('link') ? 'soft' : 'ghost'"
-               color="neutral"
-               aria-label="Link"
-               title="Link"
-            />
-            <template #content>
-               <div class="flex items-center gap-2 p-2">
-                  <CmsInput
-                     v-model="linkUrl"
-                     size="sm"
-                     placeholder="https://"
-                     class="w-64"
-                     @keydown.enter.prevent="applyLink"
-                  />
-                  <CmsButton size="xs" label="Apply" @click="applyLink" />
-                  <CmsButton
-                     v-if="editor?.isActive('link')"
-                     size="xs"
-                     variant="soft"
-                     color="error"
-                     label="Remove link"
-                     @click="removeLink"
-                  />
-               </div>
-            </template>
-         </CmsPopover>
-         <span class="grow" />
-         <CmsButton
-            icon="arrow-uturn-left"
-            size="xs"
-            variant="ghost"
-            color="neutral"
-            aria-label="Undo"
-            title="Undo"
-            :disabled="!editor?.can().undo()"
-            @click="undo"
-         />
-         <CmsButton
-            icon="arrow-uturn-right"
-            size="xs"
-            variant="ghost"
-            color="neutral"
-            aria-label="Redo"
-            title="Redo"
-            :disabled="!editor?.can().redo()"
-            @click="redo"
-         />
-      </div>
-      <EditorContent :editor="editor" />
-   </div>
+   <KRichTextEditor
+      :model-value="model"
+      :headings="[2, 3]"
+      :toolbar="TOOLBAR"
+      min-height="9rem"
+      @update:model-value="(value) => model = typeof value === 'string' ? value : null"
+   />
 </template>
 
 <script setup>
-import StarterKit from "@tiptap/starter-kit";
-import { EditorContent, useEditor } from "@tiptap/vue-3";
-import { ref, watch } from "#imports";
-const model = defineModel({ type: [String, null], ...{ required: true } });
-const editor = useEditor({
-  content: model.value ?? "",
-  extensions: [StarterKit.configure({ link: { openOnClick: false } })],
-  editorProps: {
-    attributes: { class: "cms-richtext-body" }
-  },
-  onUpdate: ({ editor: instance }) => {
-    model.value = instance.isEmpty ? null : instance.getHTML();
-  }
-});
-watch(model, (value) => {
-  if (!editor.value) return;
-  const current = editor.value.isEmpty ? null : editor.value.getHTML();
-  if ((value ?? null) !== current) {
-    editor.value.commands.setContent(value ?? "");
-  }
-});
-const actions = [
-  {
-    icon: "bold",
-    mark: "bold",
-    label: "Bold",
-    run: () => {
-      editor.value?.chain().focus().toggleBold().run();
-    }
-  },
-  {
-    icon: "italic",
-    mark: "italic",
-    label: "Italic",
-    run: () => {
-      editor.value?.chain().focus().toggleItalic().run();
-    }
-  },
-  {
-    icon: "strikethrough",
-    mark: "strike",
-    label: "Strikethrough",
-    run: () => {
-      editor.value?.chain().focus().toggleStrike().run();
-    }
-  },
-  {
-    icon: "h2",
-    mark: "heading",
-    attrs: { level: 2 },
-    label: "Heading 2",
-    run: () => {
-      editor.value?.chain().focus().toggleHeading({ level: 2 }).run();
-    }
-  },
-  {
-    icon: "h3",
-    mark: "heading",
-    attrs: { level: 3 },
-    label: "Heading 3",
-    run: () => {
-      editor.value?.chain().focus().toggleHeading({ level: 3 }).run();
-    }
-  },
-  {
-    icon: "list-bullet",
-    mark: "bulletList",
-    label: "Bullet list",
-    run: () => {
-      editor.value?.chain().focus().toggleBulletList().run();
-    }
-  },
-  {
-    icon: "numbered-list",
-    mark: "orderedList",
-    label: "Numbered list",
-    run: () => {
-      editor.value?.chain().focus().toggleOrderedList().run();
-    }
-  },
-  {
-    icon: "chat-bubble-bottom-center-text",
-    mark: "blockquote",
-    label: "Quote",
-    run: () => {
-      editor.value?.chain().focus().toggleBlockquote().run();
-    }
-  }
+import { RichTextEditor as KRichTextEditor } from "@xleddyl/443-components-vue/editor";
+const TOOLBAR = [
+  "bold",
+  "italic",
+  "strike",
+  "|",
+  "headings",
+  "|",
+  "bulletList",
+  "orderedList",
+  "blockquote",
+  "link",
+  "|",
+  "undo",
+  "redo"
 ];
-const linkOpen = ref(false);
-const linkUrl = ref("");
-watch(linkOpen, (open) => {
-  if (open) linkUrl.value = editor.value?.getAttributes("link").href ?? "";
-});
-function applyLink() {
-  const url = linkUrl.value.trim();
-  const chain = editor.value?.chain().focus().extendMarkRange("link");
-  if (url) chain?.setLink({ href: url }).run();
-  else chain?.unsetLink().run();
-  linkOpen.value = false;
-}
-function removeLink() {
-  editor.value?.chain().focus().extendMarkRange("link").unsetLink().run();
-  linkOpen.value = false;
-}
-function undo() {
-  editor.value?.chain().focus().undo().run();
-}
-function redo() {
-  editor.value?.chain().focus().redo().run();
-}
+const model = defineModel({ type: [String, null], ...{ required: true } });
 </script>