@xleddyl/nuxt-cms 0.1.61 → 0.2.1

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

@@ -14,29 +14,72 @@
             {{ tab.label }}
          </button>
       </div>
-      <CmsFormField
-         v-for="(field, key) in visibleFields"
-         :key="key"
-         :label="field.label"
-         :name="key"
-         :required="field.required"
-      >
-         <template v-if="hasLocaleSwitch(field) && i18n.locales.length > 1" #label-actions>
-            <CmsLocaleSwitch
-               :model-value="localeFor(key)"
-               :value="
-  isTranslatableField(field) ? state[key] : null
+      <div class="cms-form-layout">
+         <div class="cms-form-main">
+            <component
+               :is="section.title ? 'section' : 'div'"
+               v-for="section in sections"
+               :key="section.id"
+               class="cms-form-section"
+               :class="{ 'is-titled': !!section.title, 'is-collapsed': isCollapsed(section) }"
+            >
+               <button
+                  v-if="section.title"
+                  type="button"
+                  class="cms-form-section-header"
+                  :aria-expanded="!isCollapsed(section)"
+                  @click="toggleSection(section.id)"
+               >
+                  <span class="cms-form-section-text">
+                     <span class="cms-form-section-title">{{ section.title }}</span>
+                     <span v-if="section.description" class="cms-form-section-description">
+                        {{ section.description }}
+                     </span>
+                  </span>
+                  <CmsIcon name="chevron-down" class="cms-form-section-chevron size-4" />
+               </button>
+               <div v-show="!isCollapsed(section)" class="cms-form-rows">
+                  <div
+                     v-for="row in section.rows"
+                     :key="row.join('|')"
+                     class="cms-form-row"
+                     :style="{ '--cms-row-cols': row.length }"
+                  >
+                     <CmsFormField
+                        v-for="key in row"
+                        :key="key"
+                        :label="fields[key].label"
+                        :description="fields[key].description"
+                        :icon="fieldIcon(fields[key])"
+                        :name="key"
+                        :required="fields[key].required"
+                     >
+                        <template
+                           v-if="hasLocaleSwitch(fields[key]) && i18n.locales.length > 1"
+                           #label-actions
+                        >
+                           <CmsLocaleSwitch
+                              :model-value="localeFor(key)"
+                              :value="
+  isTranslatableField(fields[key]) ? state[key] : null
 "
-               @update:model-value="(locale) => setLocale(key, locale)"
-            />
-         </template>
-         <CmsFieldInput
-            v-model="state[key]"
-            :field="field"
-            :locale="localeFor(key)"
-            :slug-source="field.from ? state[field.from] : void 0"
-         />
-      </CmsFormField>
+                              @update:model-value="(locale) => setLocale(key, locale)"
+                           />
+                        </template>
+                        <CmsFieldInput
+                           v-model="state[key]"
+                           :field="fields[key]"
+                           :locale="localeFor(key)"
+                           :slug-source="
+  fields[key].from ? state[fields[key].from] : void 0
+"
+                        />
+                     </CmsFormField>
+                  </div>
+               </div>
+            </component>
+         </div>
+      </div>
       <div v-if="footer" class="cms-form-actions">
          <CmsButton type="submit" label="Save" :loading="loading" />
          <CmsButton
@@ -55,14 +98,18 @@ import {
   fieldTab,
   hasTranslatableBlockFields,
   isFieldVisible,
-  isTranslatableField
+  isTranslatableField,
+  resolveFormLayout
 } from "#nuxt-cms";
-import { computed, ref, watch } from "#imports";
+import { computed, nextTick, ref, watch } from "#imports";
 import { buildEntrySchema } from "../../../shared/validation";
 import { useCmsRuntime } from "../../composables/cms-runtime";
+import { entryFormLayout, useCmsSettingsState } from "../../composables/cms-settings";
+import { fieldIcon } from "../../utils/ui";
 const props = defineProps({
   fields: { type: Object, required: true },
   tabs: { type: Array, required: false },
+  entryName: { type: String, required: false },
   drafts: { type: Boolean, required: false },
   loading: { type: Boolean, required: false },
   formId: { type: String, required: false },
@@ -77,13 +124,39 @@ const activeTab = ref(tabList.value[0]?.id ?? "");
 watch(tabList, (tabs) => {
   if (!tabs.some((tab) => tab.id === activeTab.value)) activeTab.value = tabs[0]?.id ?? "";
 });
-const visibleFields = computed(
-  () => Object.fromEntries(
-    Object.entries(props.fields).filter(
-      ([, field]) => isFieldVisible(field, state.value) && (!tabList.value.length || fieldTab(field, tabList.value) === activeTab.value)
-    )
-  )
+const settings = useCmsSettingsState();
+const layout = computed(
+  () => props.entryName ? entryFormLayout(props.entryName, settings.value, props.fields) : resolveFormLayout(props.fields, void 0)
+);
+function isShown(key) {
+  const field = props.fields[key];
+  if (!field || !isFieldVisible(field, state.value)) return false;
+  if (!tabList.value.length) return true;
+  return fieldTab(field, tabList.value) === activeTab.value;
+}
+const sections = computed(
+  () => layout.value.main.map((section, index) => ({
+    ...section,
+    id: `${index}-${section.title ?? ""}`,
+    rows: section.rows.map((row) => row.filter((key) => isShown(key))).filter((row) => row.length)
+  })).filter((section) => section.rows.length)
 );
+const toggled = ref({});
+function isCollapsed(section) {
+  if (!section.title) return false;
+  return toggled.value[section.id] ?? !!section.collapsed;
+}
+function toggleSection(id) {
+  const section = sections.value.find((s) => s.id === id);
+  if (section) toggled.value = { ...toggled.value, [id]: !isCollapsed(section) };
+}
+function revealField(key) {
+  for (const section of sections.value) {
+    if (section.rows.some((row) => row.includes(key)) && isCollapsed(section)) {
+      toggled.value = { ...toggled.value, [section.id]: false };
+    }
+  }
+}
 function onError() {
   const issue = schema.value.safeParse(state.value).error?.issues[0];
   const key = issue ? String(issue.path[0] ?? "") : "";
@@ -92,6 +165,7 @@ function onError() {
     const tab = fieldTab(field, tabList.value);
     if (tab) activeTab.value = tab;
   }
+  if (key) void nextTick(() => revealField(key));
   emit("error");
 }
 function hasLocaleSwitch(field) {

package/dist/runtime/app/components/cms/EntryForm.vue.d.ts

@@ -2,6 +2,7 @@ import type { CmsEntry, CmsTab } from '#nuxt-cms';
 type __VLS_Props = {
     fields: CmsEntry['fields'];
     tabs?: CmsTab[];
+    entryName?: string;
     drafts?: boolean;
     loading?: boolean;
     formId?: string;

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

@@ -12,16 +12,26 @@
       :locale="locale"
    />
    <CmsRichTextField v-else-if="field.type === 'richtext'" v-model="strOrNull" />
-   <CmsTextarea v-else-if="field.type === 'text' && field.textarea" v-model="str" :rows="8" />
-   <CmsInput v-else-if="field.type === 'text'" v-model="str" />
-   <CmsInput v-else-if="field.type === 'email'" v-model="str" type="email" />
+   <CmsTextarea
+      v-else-if="field.type === 'text' && field.textarea"
+      v-model="str"
+      :rows="8"
+      :placeholder="field.placeholder"
+   />
+   <CmsInput v-else-if="field.type === 'text'" v-model="str" :placeholder="field.placeholder" />
+   <CmsInput
+      v-else-if="field.type === 'email'"
+      v-model="str"
+      type="email"
+      :placeholder="field.placeholder"
+   />
    <CmsSlugField v-else-if="field.type === 'slug'" v-model="strOrNull" :source="slugSource" />
    <CmsSelectMenu
       v-else-if="field.type === 'select'"
       v-model="selValue"
       :multiple="field.multiple"
       :items="selectItems"
-      placeholder="Select…"
+      :placeholder="field.placeholder ?? 'Select\u2026'"
    />
    <CmsSwitch
       v-else-if="field.type === 'boolean'"
@@ -33,7 +43,12 @@
 "
    />
    <CmsJsonField v-else-if="field.type === 'json'" v-model="jsonValue" />
-   <CmsInput v-else-if="field.type === 'number'" v-model.number="num" type="number" />
+   <CmsInput
+      v-else-if="field.type === 'number'"
+      v-model.number="num"
+      type="number"
+      :placeholder="field.placeholder"
+   />
    <CmsInput v-else-if="field.type === 'date'" v-model="str" type="date" />
    <CmsRelationField
       v-else-if="field.type === 'relation'"

package/dist/runtime/app/components/cms/FormField.d.vue.ts

@@ -1,13 +1,15 @@
 type __VLS_Props = {
     label?: string;
+    icon?: string;
+    description?: string;
     name?: string;
     required?: boolean;
 };
-declare var __VLS_1: {}, __VLS_3: {};
+declare var __VLS_6: {}, __VLS_8: {};
 type __VLS_Slots = {} & {
-    'label-actions'?: (props: typeof __VLS_1) => any;
+    'label-actions'?: (props: typeof __VLS_6) => any;
 } & {
-    default?: (props: typeof __VLS_3) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
 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>;

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

@@ -1,13 +1,17 @@
 <template>
-   <div class="cms-form-field">
+   <div class="cms-form-field" :class="{ 'is-error': error }">
       <div v-if="label || $slots['label-actions']" class="cms-form-label-row">
          <label v-if="label" class="cms-form-label">
+            <CmsIcon v-if="icon" :name="icon" class="cms-form-label-icon size-3.5" />
             {{ label }}<span v-if="required" class="cms-form-required"> *</span>
          </label>
          <slot name="label-actions" />
       </div>
       <slot />
-      <p v-if="error" class="cms-form-error">{{ error }}</p>
+      <p v-if="description" class="cms-form-description">{{ description }}</p>
+      <p v-if="error" class="cms-form-error">
+         <CmsIcon name="exclamation-circle" class="size-3.5 shrink-0" />{{ error }}
+      </p>
    </div>
 </template>
 
@@ -16,6 +20,8 @@ import { computed, inject } from "#imports";
 import { CMS_FORM_ERRORS } from "../../utils/ui";
 const props = defineProps({
   label: { type: String, required: false },
+  icon: { type: String, required: false },
+  description: { type: String, required: false },
   name: { type: String, required: false },
   required: { type: Boolean, required: false }
 });

package/dist/runtime/app/components/cms/FormField.vue.d.ts

@@ -1,13 +1,15 @@
 type __VLS_Props = {
     label?: string;
+    icon?: string;
+    description?: string;
     name?: string;
     required?: boolean;
 };
-declare var __VLS_1: {}, __VLS_3: {};
+declare var __VLS_6: {}, __VLS_8: {};
 type __VLS_Slots = {} & {
-    'label-actions'?: (props: typeof __VLS_1) => any;
+    'label-actions'?: (props: typeof __VLS_6) => any;
 } & {
-    default?: (props: typeof __VLS_3) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
 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>;

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

@@ -1,5 +1,5 @@
 <template>
-   <component :is="icon" v-if="icon" class="size-5 stroke-[1.5]" />
+   <component :is="icon" v-if="icon" :data-icon="name" class="size-5 stroke-[1.5]" />
 </template>
 
 <script setup>

package/dist/runtime/app/components/cms/Input.d.vue.ts

@@ -2,7 +2,6 @@ type __VLS_Props = {
     type?: string;
     size?: 'sm' | 'md' | 'lg';
     icon?: string;
-    color?: 'error';
 };
 type __VLS_ModelProps = {
     modelValue?: string | number | null;

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

@@ -1,5 +1,9 @@
 <template>
-   <div class="cms-input-wrap" :class="[$attrs.class, { 'has-lead': icon }]">
+   <div
+      class="cms-input-wrap"
+      :class="[$attrs.class, { 'has-lead': icon }]"
+      :style="$attrs.style"
+   >
       <span v-if="icon" class="cms-input-lead">
          <CmsIcon :name="icon" class="size-4" />
       </span>
@@ -7,7 +11,7 @@
          v-bind="inputAttrs"
          :type="type ?? 'text'"
          :value="model ?? ''"
-         :class="['cms-field', `cms-field-${size ?? 'md'}`, { 'is-error': color === 'error' }]"
+         :class="['cms-field', `cms-field-${size ?? 'md'}`]"
          @input="onInput"
       />
       <span v-if="$slots.trailing" class="cms-input-trail">
@@ -22,8 +26,7 @@ defineOptions({ inheritAttrs: false });
 defineProps({
   type: { type: String, required: false },
   size: { type: String, required: false },
-  icon: { type: String, required: false },
-  color: { type: String, required: false }
+  icon: { type: String, required: false }
 });
 const [model, modifiers] = defineModel({ type: [String, Number, null] });
 const attrs = useAttrs();

package/dist/runtime/app/components/cms/Input.vue.d.ts

@@ -2,7 +2,6 @@ type __VLS_Props = {
     type?: string;
     size?: 'sm' | 'md' | 'lg';
     icon?: string;
-    color?: 'error';
 };
 type __VLS_ModelProps = {
     modelValue?: string | number | null;

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

@@ -6,7 +6,7 @@
          type="button"
          role="tab"
          :aria-selected="model === locale"
-         :title="filled(locale) ? locale : `${locale} \u2014 empty`"
+         :title="filled(locale) ? locale : `${locale}: empty`"
          class="cms-locale-option"
          :class="{ 'is-active': model === locale, 'is-empty': !filled(locale) }"
          @click="model = locale"

package/dist/runtime/app/components/cms/MediaFolderPicker.d.vue.ts

@@ -1,7 +1,6 @@
 type __VLS_Props = {
     folders: string[];
     exclude?: string | null;
-    disabled?: (string | null)[];
 };
 type __VLS_ModelProps = {
     modelValue?: string | null;

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

@@ -50,8 +50,7 @@ import { computed, ref } from "#imports";
 import { isWithinMediaFolder, mediaFolderDepth, mediaFolderName } from "#nuxt-cms";
 const props = defineProps({
   folders: { type: Array, required: true },
-  exclude: { type: [String, null], required: false },
-  disabled: { type: Array, required: false }
+  exclude: { type: [String, null], required: false }
 });
 const model = defineModel({ type: [String, null], ...{ default: null } });
 const query = ref("");
@@ -60,7 +59,6 @@ const visible = computed(() => {
   return term ? props.folders.filter((folder) => folder.includes(term)) : props.folders;
 });
 function isDisabled(folder) {
-  if (props.disabled?.includes(folder)) return true;
   return !!props.exclude && !!folder && isWithinMediaFolder(folder, props.exclude);
 }
 </script>

package/dist/runtime/app/components/cms/MediaFolderPicker.vue.d.ts

@@ -1,7 +1,6 @@
 type __VLS_Props = {
     folders: string[];
     exclude?: string | null;
-    disabled?: (string | null)[];
 };
 type __VLS_ModelProps = {
     modelValue?: string | null;

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

@@ -431,10 +431,11 @@
                :media-type="mediaType"
                :accept="accept"
                :folder="folder"
+               :directories="!selectable"
                @uploaded="onUploaded"
             />
             <p class="cms-form-hint cms-media-upload-hint">
-               Tip: you can also drop files anywhere on the library, or on a folder.
+               Tip: you can also drop files or folders anywhere on the library, or on a folder.
             </p>
          </template>
       </CmsModal>
@@ -562,7 +563,11 @@ import {
 } from "#nuxt-cms";
 import { useCmsConfirm } from "../../composables/cms-confirm";
 import { useCmsMediaLibrary, usageSummary } from "../../composables/cms-media-library";
-import { useCmsMediaUploader } from "../../composables/cms-media-uploader";
+import {
+  uploadTreeFromDrop,
+  uploadTreeFromFiles,
+  useCmsMediaUploader
+} from "../../composables/cms-media-uploader";
 import { useCmsRuntime } from "../../composables/cms-runtime";
 import { useCmsToast } from "../../composables/cms-toast";
 const MEDIA_DRAG = "application/x-cms-media";
@@ -946,7 +951,10 @@ async function moveSelection() {
 }
 const uploadOpen = ref(false);
 async function afterUpload(uploaded) {
-  if (!uploaded.length) return;
+  if (!uploaded.length) {
+    if (!props.selectable) await library.reload({ quiet: true });
+    return;
+  }
   if (props.selectable && uploaded[0]) {
     emitSelect(uploaded[0]);
     return;
@@ -961,13 +969,19 @@ function onUploaded(uploaded) {
   uploadOpen.value = false;
   void afterUpload(uploaded);
 }
-async function uploadFiles(files, target) {
-  const uploaded = await uploader.upload(files, {
+function droppedTree(event) {
+  const data = event.dataTransfer;
+  if (!data?.files.length) return null;
+  return props.selectable ? Promise.resolve(uploadTreeFromFiles(data.files)) : uploadTreeFromDrop(data);
+}
+async function uploadTree(pending, target) {
+  const tree = await pending;
+  const uploaded = await uploader.upload(tree, {
     folder: target,
     accept: acceptAttr.value,
     multiple: !props.selectable
   });
-  await afterUpload(uploaded);
+  if (uploaded.length || tree.directories.length) await afterUpload(uploaded);
 }
 const draggingKeys = ref([]);
 const draggingFolder = ref(null);
@@ -1036,7 +1050,7 @@ async function onTargetDrop(event, target) {
   event.stopPropagation();
   const keys = [...draggingKeys.value];
   const path = draggingFolder.value;
-  const files = event.dataTransfer?.files;
+  const tree = hasFiles(event) ? droppedTree(event) : null;
   onDragEnd();
   fileDragDepth.value = 0;
   if (keys.length) {
@@ -1051,7 +1065,7 @@ async function onTargetDrop(event, target) {
     }
     return;
   }
-  if (files?.length) await uploadFiles(files, target);
+  if (tree) await uploadTree(tree, target);
 }
 function onGalleryDragEnter(event) {
   if (!hasFiles(event) || !canUpload.value) return;
@@ -1071,8 +1085,8 @@ async function onGalleryDrop(event) {
   event.preventDefault();
   fileDragDepth.value = 0;
   dropTarget.value = null;
-  const files = event.dataTransfer?.files;
-  if (files?.length) await uploadFiles(files, folder.value);
+  const tree = droppedTree(event);
+  if (tree) await uploadTree(tree, folder.value);
 }
 function tileInfo(item) {
   const parts = [extension(item.key)];

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

@@ -4,6 +4,7 @@ type __VLS_Props = {
     mediaType?: MediaType | MediaType[];
     accept?: string[];
     folder?: string | null;
+    directories?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     uploaded: (items: MediaItem[]) => any;

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

@@ -1,72 +1,102 @@
 <template>
-   <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" />
-         {{ folder ?? "Library root" }}
-      </span>
-   </button>
+   <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" />
+            {{ folder ?? "Library root" }}
+         </span>
+      </button>
+      <template v-if="directories && multiple && !uploading">
+         <input
+            ref="directoryInput"
+            type="file"
+            class="hidden"
+            webkitdirectory
+            multiple
+            @change="onChange"
+         />
+         <CmsButton
+            label="Upload a folder"
+            icon="folder-arrow-down"
+            variant="ghost"
+            color="neutral"
+            size="sm"
+            @click="directoryInput?.click()"
+         />
+      </template>
+   </div>
 </template>
 
 <script setup>
 import { mediaTypeAccept } from "#nuxt-cms";
 import { computed, ref } from "#imports";
-import { useCmsMediaUploader } from "../../composables/cms-media-uploader";
+import {
+  uploadTreeFromDrop,
+  uploadTreeFromFiles,
+  useCmsMediaUploader
+} from "../../composables/cms-media-uploader";
 const props = defineProps({
   multiple: { type: Boolean, required: false },
   mediaType: { type: null, required: false, default: "file" },
   accept: { type: Array, required: false },
-  folder: { type: [String, null], required: false, default: null }
+  folder: { type: [String, null], required: false, default: null },
+  directories: { type: Boolean, required: false }
 });
 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 handleFiles(list) {
-  const items = await upload(list, {
+async function handleTree(pending) {
+  const tree = await pending;
+  const items = await upload(tree, {
     folder: props.folder,
     accept: acceptAttr.value,
     multiple: props.multiple
   });
-  if (items.length) emit("uploaded", items);
+  if (items.length || props.directories && tree.directories.length) emit("uploaded", items);
 }
 function onChange(event) {
   const el = event.target;
-  if (el.files?.length) void handleFiles(el.files);
+  if (el.files?.length) void handleTree(uploadTreeFromFiles(el.files));
   el.value = "";
 }
 function onDrop(event) {
   dragOver.value = false;
-  if (event.dataTransfer?.files.length) void handleFiles(event.dataTransfer.files);
+  if (!event.dataTransfer?.files.length) return;
+  void handleTree(
+    props.directories ? uploadTreeFromDrop(event.dataTransfer) : uploadTreeFromFiles(event.dataTransfer.files)
+  );
 }
 </script>

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

@@ -4,6 +4,7 @@ type __VLS_Props = {
     mediaType?: MediaType | MediaType[];
     accept?: string[];
     folder?: string | null;
+    directories?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     uploaded: (items: MediaItem[]) => any;