nuxt-media-library 0.0.64 → 0.0.66

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "media-library",
   "configKey": "mediaLibrary",
-  "version": "0.0.64",
+  "version": "0.0.66",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/MLMedia/Browser.d.vue.ts

@@ -0,0 +1,98 @@
+import type { AssetDetail } from '../../types/asset.js';
+import { type MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
+import { type MediaEditorResult } from '../../composables/useMLMediaEditor.js';
+import { type MediaBrowserAction, type MediaBrowserRole } from '../../utils/browserActions.js';
+export type { MediaBrowserAction, MediaBrowserRole };
+type __VLS_Props = {
+    /**
+     * List only these asset IDs (resolved through `backend`'s `resolve`
+     * route, searched and filtered here) instead of the library. A pool the
+     * host owns, e.g. a course's files. null lists the library.
+     */
+    pickFrom?: readonly string[] | null;
+    /** Backend whose `resolve` route reads the files. Defaults to the upload backend. */
+    backend?: string | null;
+    /** Kinds that can be selected. Others are listed but dimmed. Empty means any. */
+    accept?: readonly string[] | string;
+    /** 'none' shows no checkboxes (a click previews); 'single' replaces; 'multi' adds up to `max`. */
+    selection?: 'none' | 'single' | 'multi';
+    /** Most files that can be selected in 'multi'. */
+    max?: number;
+    /** IDs listed first (when not searching), e.g. the files a record already has. */
+    pinned?: readonly string[];
+    /** Upload session settings; shows the dropzone. false hides it. */
+    upload?: MediaUploadOptions | false;
+    /** Bytes, for uploads. */
+    maxSize?: number | null;
+    /**
+     * What can be done to a file, from its menu and (for several) the bar over
+     * the selection: 'preview', 'edit', 'remove', 'delete',
+     * `{ key: 'assign', roles }`, or the host's own `{ key, label, … }`.
+     */
+    actions?: readonly MediaBrowserAction[];
+    /** Grid rows for a fixed-height body; the list scrolls inside it. */
+    bodyClass?: string;
+};
+type __VLS_Slots = {
+    /** Next to the search box, e.g. "Add from library". */
+    'toolbar'?: () => unknown;
+    /** Small labels on a card or row, e.g. "Used in 3 lessons". */
+    'card-badge'?: (p: {
+        asset: AssetDetail;
+    }) => unknown;
+    /** Extra controls on a card or row, next to its menu. */
+    'card-actions'?: (p: {
+        asset: AssetDetail;
+    }) => unknown;
+    /** Replaces the empty state. */
+    'empty'?: (p: {
+        filtering: boolean;
+    }) => unknown;
+    /** Under the list, outside the scroll, e.g. the picker's Done / Cancel. */
+    'footer'?: (p: {
+        selected: string[];
+        summary: string;
+        note: string | null;
+    }) => unknown;
+};
+type __VLS_ModelProps = {
+    /** Selected IDs, in the order they were chosen. Two-way and live. */
+    'selected'?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (assetIds: string[]) => any;
+    remove: (assetIds: string[]) => any;
+    uploaded: (assetId: string, sessionId: string | null) => any;
+    action: (key: string, assetIds: string[], role?: string | undefined) => any;
+    edit: (assetId: string, result: MediaEditorResult | null) => any;
+    assign: (role: string, assetIds: string[]) => any;
+    "update:selected": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onDelete?: ((assetIds: string[]) => any) | undefined;
+    onRemove?: ((assetIds: string[]) => any) | undefined;
+    onUploaded?: ((assetId: string, sessionId: string | null) => any) | undefined;
+    onAction?: ((key: string, assetIds: string[], role?: string | undefined) => any) | undefined;
+    onEdit?: ((assetId: string, result: MediaEditorResult | null) => any) | undefined;
+    onAssign?: ((role: string, assetIds: string[]) => any) | undefined;
+    "onUpdate:selected"?: ((value: string[]) => any) | undefined;
+}>, {
+    upload: MediaUploadOptions | false;
+    actions: readonly MediaBrowserAction[];
+    backend: string | null;
+    accept: readonly string[] | string;
+    max: number;
+    maxSize: number | null;
+    pickFrom: readonly string[] | null;
+    selection: "none" | "single" | "multi";
+    pinned: readonly string[];
+    bodyClass: string;
+}, {}, {}, {}, 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/components/MLMedia/Browser.vue

@@ -0,0 +1,521 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { useMLMediaAssets } from "../../composables/useMLMediaAssets";
+import { useMLMediaBrowse } from "../../composables/useMLMediaBrowse";
+import { useMLMediaUpload } from "../../composables/useMLMediaUpload";
+import { useMLMediaEditor } from "../../composables/useMLMediaEditor";
+import { assetKindMeta } from "../../utils/assetDisplay";
+import { acceptForKinds, describeKinds } from "../../utils/fileAccept";
+import { assetName, formatBytes } from "../../utils/assetFormat";
+import { assignBlocked, confirmText, normalizeBrowserActions } from "../../utils/browserActions";
+const ALL_KINDS = ["image", "video", "audio", "document", "model_3d", "archive", "font", "web_app", "image_batch", "other"];
+const props = defineProps({
+  pickFrom: { type: [Array, null], required: false, default: null },
+  backend: { type: [String, null], required: false, default: void 0 },
+  accept: { type: [Array, String], required: false, default: "" },
+  selection: { type: String, required: false, default: "multi" },
+  max: { type: Number, required: false, default: Number.POSITIVE_INFINITY },
+  pinned: { type: Array, required: false, default: () => [] },
+  upload: { type: [Object, Boolean], required: false, default: false },
+  maxSize: { type: [Number, null], required: false, default: null },
+  actions: { type: Array, required: false, default: () => ["preview"] },
+  bodyClass: { type: String, required: false, default: "max-h-[min(60vh,560px)]" }
+});
+const selectedModel = defineModel("selected", { type: Array, ...{ default: () => [] } });
+const selected = ref([...selectedModel.value]);
+const sameIds = (a, b) => a.length === b.length && a.every((id, i) => id === b[i]);
+watch(selectedModel, (v) => {
+  if (!sameIds(v, selected.value)) selected.value = [...v];
+});
+watch(selected, (v) => {
+  if (!sameIds(v, selectedModel.value)) selectedModel.value = [...v];
+});
+const emit = defineEmits(["uploaded", "action", "remove", "delete", "assign", "edit"]);
+defineSlots();
+const resolveBackend = computed(() => props.backend !== void 0 ? props.backend : props.upload ? props.upload.backend : null);
+const acceptKinds = computed(() => {
+  const raw = typeof props.accept === "string" ? props.accept.split(",") : [...props.accept];
+  return raw.map((k) => k.trim().toLowerCase()).filter(Boolean);
+});
+const isAccepted = (kind) => !acceptKinds.value.length || acceptKinds.value.includes((kind ?? "").toLowerCase());
+const notAcceptedReason = computed(() => `Only ${describeKinds(acceptKinds.value)} can be chosen here`);
+const search = ref("");
+const view = ref("grid");
+const kindFilter = ref(acceptKinds.value.length === 1 ? [acceptKinds.value[0]] : []);
+const kindOptions = computed(
+  () => (acceptKinds.value.length ? acceptKinds.value : ALL_KINDS).map((k) => ({ label: assetKindMeta(k).label, value: k }))
+);
+const filtering = computed(() => !!search.value.trim() || kindFilter.value.length > 0);
+const browse = useMLMediaBrowse(
+  () => ({ kind: kindFilter.value[0] ?? null, query: search.value }),
+  props.pickFrom ? { ids: () => props.pickFrom ?? [], backend: resolveBackend } : {}
+);
+const selectable = computed(() => props.selection !== "none");
+const single = computed(() => props.selection === "single");
+const limitNote = ref(null);
+function isChosen(id) {
+  return !!id && selected.value.includes(id);
+}
+function choose(id) {
+  limitNote.value = null;
+  if (single.value) {
+    selected.value = [id];
+    return true;
+  }
+  if (selected.value.length >= props.max) {
+    limitNote.value = `You can choose up to ${props.max}. Unselect one first.`;
+    return false;
+  }
+  selected.value = [...selected.value, id];
+  return true;
+}
+function toggle(id) {
+  if (!selectable.value) return;
+  if (isChosen(id)) {
+    limitNote.value = null;
+    selected.value = selected.value.filter((x) => x !== id);
+  } else {
+    choose(id);
+  }
+}
+function activate(id) {
+  if (selectable.value) toggle(id);
+  else if (hasAction("preview")) preview(id);
+  else if (hasAction("edit")) void edit(id);
+}
+const pinnedIds = computed(() => [...props.pinned]);
+const pinnedLookup = useMLMediaAssets(pinnedIds, { backend: resolveBackend });
+const pinnedAssets = computed(() => pinnedIds.value.map((id) => pinnedLookup.get(id)).filter((a) => !!a));
+const uploader = props.upload ? useMLMediaUpload(props.upload) : null;
+const rejectNote = ref(null);
+function onFiles(files) {
+  if (!uploader) return;
+  rejectNote.value = null;
+  for (const file of files) {
+    const u = uploader.start(file);
+    void u.created.then((id) => {
+      if (!id) return;
+      u.attached = true;
+      emit("uploaded", id, u.sessionId);
+      if (selectable.value && !isChosen(id)) choose(id);
+    });
+  }
+}
+function onRejected(rejected) {
+  const first = rejected[0];
+  if (!first) return;
+  const more = rejected.length > 1 ? ` (and ${rejected.length - 1} more)` : "";
+  rejectNote.value = first.reason === "type" ? `${first.file.name}${more} can't be used here. Only ${describeKinds(acceptKinds.value)}.` : `${first.file.name}${more} is larger than ${props.maxSize ? formatBytes(props.maxSize) : "the limit"}.`;
+}
+const uploads = computed(() => uploader?.uploads.value ?? []);
+const listedIds = computed(() => new Set([...browse.items.value, ...pinnedAssets.value].map((a) => a.id)));
+const settled = (u) => !!u.assetId && (u.phase === "ready" || u.phase === "failed") && listedIds.value.has(u.assetId);
+const visibleUploads = computed(() => uploads.value.filter((u) => u.phase !== "canceled" && !settled(u)));
+const uploadIds = computed(() => new Set(visibleUploads.value.map((u) => u.assetId).filter(Boolean)));
+function uploadPhase(u) {
+  return u.phase === "uploading" || u.phase === "processing" || u.phase === "failed" ? u.phase : null;
+}
+const listed = computed(() => {
+  const pinnedSet = new Set(filtering.value ? [] : pinnedAssets.value.map((a) => a.id));
+  const rest = browse.items.value.filter((a) => !pinnedSet.has(a.id) && !uploadIds.value.has(a.id));
+  return filtering.value ? rest : [...pinnedAssets.value, ...rest];
+});
+const initialLoading = computed(() => browse.loading.value && !browse.items.value.length);
+const isEmpty = computed(() => !initialLoading.value && !listed.value.length && !visibleUploads.value.length);
+watch(kindFilter, () => {
+  limitNote.value = null;
+});
+const blocked = (a) => selectable.value && (!isAccepted(a.kind) || a.status === "failed");
+const blockedReason = (a) => a.status === "failed" ? "Processing failed for this file" : notAcceptedReason.value;
+const actionList = computed(() => normalizeBrowserActions(props.actions));
+const hasAction = (key) => actionList.value.some((a) => a.key === key);
+const removeAction = computed(() => actionList.value.find((a) => a.key === "remove") ?? null);
+const mediaEditor = useMLMediaEditor();
+function preview(id) {
+  void mediaEditor.open(id, { readonly: true, siblings: listed.value.map((a) => a.id), backend: resolveBackend.value });
+}
+async function edit(id) {
+  const result = await mediaEditor.open(id, {
+    siblings: listed.value.map((a) => a.id),
+    removeLabel: removeAction.value?.label ?? "",
+    backend: resolveBackend.value
+  });
+  emit("edit", id, result);
+  if (result?.action === "remove" && removeAction.value) perform(removeAction.value, [result.assetId]);
+}
+const confirming = ref(null);
+function run(action, ids, role) {
+  if (!ids.length) return;
+  if (action.confirm) confirming.value = { action, ids, role };
+  else perform(action, ids, role);
+}
+function perform(action, ids, role) {
+  emit("action", action.key, ids, role);
+  if (action.key === "preview") return preview(ids[0]);
+  if (action.key === "edit") return void edit(ids[0]);
+  if (action.key === "assign" && role) return emit("assign", role, ids);
+  if (action.key === "remove" || action.key === "delete") {
+    const gone = new Set(ids);
+    if (selected.value.some((id) => gone.has(id))) selected.value = selected.value.filter((id) => !gone.has(id));
+    if (action.key === "remove") emit("remove", ids);
+    else emit("delete", ids);
+  }
+}
+function runConfirmed() {
+  const c = confirming.value;
+  confirming.value = null;
+  if (c) perform(c.action, c.ids, c.role);
+}
+function roleItems(action, ids) {
+  return (action.roles ?? []).map((r) => {
+    const blockedBy = assignBlocked(r, ids.length);
+    return { label: blockedBy ? `${r.label} \xB7 up to ${r.max}` : r.label, disabled: !!blockedBy, onSelect: () => run(action, ids, r.key) };
+  });
+}
+function cardMenu(id, inGrid) {
+  const plain = [];
+  const danger = [];
+  for (const a of actionList.value) {
+    if (!a.single || a.key === "preview" && inGrid) continue;
+    if (a.roles) {
+      plain.push({ label: a.label, icon: a.icon, children: roleItems(a, [id]) });
+      continue;
+    }
+    const item = { label: a.label, icon: a.icon, onSelect: () => run(a, [id]) };
+    if (a.danger) danger.push({ ...item, color: "error" });
+    else plain.push(item);
+  }
+  return [plain, danger].filter((g) => g.length);
+}
+const hasMenu = (inGrid) => cardMenu("", inGrid).length > 0;
+const bulkActions = computed(() => actionList.value.filter((a) => a.bulk));
+const showBulk = computed(() => selectable.value && selected.value.length > 0 && bulkActions.value.length > 0);
+const summary = computed(() => {
+  const n = selected.value.length;
+  if (single.value) return n ? "1 selected" : "Nothing selected";
+  return Number.isFinite(props.max) ? `${n} of ${props.max} selected` : `${n} selected`;
+});
+</script>
+
+<template>
+  <div class="flex min-h-0 flex-col">
+    <div class="flex flex-col gap-3 border-b border-default p-4">
+      <div class="flex flex-wrap items-center gap-2">
+        <UInput
+          v-model="search"
+          icon="i-lucide-search"
+          placeholder="Search files"
+          class="min-w-0 flex-1 basis-56"
+          :loading="browse.loading.value && !!search"
+          aria-label="Search files"
+        />
+        <UFieldGroup size="md">
+          <UButton
+            icon="i-lucide-layout-grid"
+            color="neutral"
+            :variant="view === 'grid' ? 'soft' : 'outline'"
+            aria-label="Grid view"
+            :aria-pressed="view === 'grid'"
+            @click="view = 'grid'"
+          />
+          <UButton
+            icon="i-lucide-list"
+            color="neutral"
+            :variant="view === 'list' ? 'soft' : 'outline'"
+            aria-label="List view"
+            :aria-pressed="view === 'list'"
+            @click="view = 'list'"
+          />
+        </UFieldGroup>
+        <slot name="toolbar" />
+      </div>
+      <div
+        v-if="kindOptions.length > 1"
+        class="flex flex-wrap gap-1.5"
+      >
+        <MLMediaFilterPill
+          v-model="kindFilter"
+          label="File type"
+          :options="kindOptions"
+          single
+        />
+      </div>
+      <div
+        v-if="showBulk"
+        class="flex flex-wrap items-center gap-1.5 rounded-md bg-elevated px-2 py-1.5 text-sm"
+        role="toolbar"
+        aria-label="Actions on the selected files"
+      >
+        <span class="me-1 tabular-nums text-muted">{{ selected.length }} selected</span>
+        <template
+          v-for="a in bulkActions"
+          :key="a.key"
+        >
+          <UDropdownMenu
+            v-if="a.roles"
+            :items="roleItems(a, [...selected])"
+          >
+            <UButton
+              size="xs"
+              color="neutral"
+              variant="outline"
+              :icon="a.icon"
+              :label="a.label"
+              trailing-icon="i-lucide-chevron-down"
+            />
+          </UDropdownMenu>
+          <UButton
+            v-else
+            size="xs"
+            :color="a.danger ? 'error' : 'neutral'"
+            variant="outline"
+            :icon="a.icon"
+            :label="a.label"
+            @click="run(a, [...selected])"
+          />
+        </template>
+        <UButton
+          size="xs"
+          color="neutral"
+          variant="ghost"
+          label="Clear"
+          class="ms-auto"
+          @click="selected = []"
+        />
+      </div>
+    </div>
+
+    <div
+      class="flex min-h-0 flex-col gap-3 overflow-y-auto p-4"
+      :class="bodyClass"
+    >
+      <template v-if="upload">
+        <MLMediaDropzone
+          :accept="acceptForKinds(acceptKinds)"
+          :multiple="!single"
+          :max-size="maxSize"
+          compact
+          :title="single ? 'Drop a file to add it to the library' : 'Drop files to add them to the library'"
+          button-label="Upload from computer"
+          @files="onFiles"
+          @rejected="onRejected"
+        />
+        <p
+          v-if="rejectNote"
+          class="text-xs text-error"
+        >
+          {{ rejectNote }}
+        </p>
+      </template>
+
+      <UAlert
+        v-if="browse.error.value"
+        color="error"
+        variant="subtle"
+        icon="i-lucide-circle-alert"
+        :title="browse.error.value"
+        :actions="[{ label: 'Try again', color: 'neutral', variant: 'outline', onClick: () => browse.reload() }]"
+      />
+
+      <!-- Loading -->
+      <div
+        v-if="initialLoading"
+        class="grid grid-cols-[repeat(auto-fill,minmax(8rem,1fr))] gap-1.5"
+      >
+        <div
+          v-for="i in 12"
+          :key="i"
+          class="flex flex-col items-center gap-2 p-2.5"
+        >
+          <USkeleton class="aspect-square w-full max-w-28 rounded-md" />
+          <USkeleton class="h-3 w-3/4" />
+        </div>
+      </div>
+
+      <!-- Empty -->
+      <template v-else-if="isEmpty && !browse.error.value">
+        <slot
+          name="empty"
+          :filtering="filtering"
+        >
+          <UEmpty
+            variant="naked"
+            :icon="filtering ? 'i-lucide-search-x' : 'i-lucide-folder-open'"
+            :title="filtering ? 'No files match' : 'No files yet'"
+            :description="filtering ? 'Try another search or clear the file type.' : upload ? 'Drop files above to add the first one.' : void 0"
+          />
+        </slot>
+      </template>
+
+      <!-- Grid -->
+      <div
+        v-else-if="view === 'grid'"
+        class="grid grid-cols-[repeat(auto-fill,minmax(8rem,1fr))] gap-1.5"
+      >
+        <MLMediaPickerCard
+          v-for="u in visibleUploads"
+          :key="u.key"
+          :src="u.localPreview"
+          :kind="u.kind"
+          :name="u.file.name"
+          :meta="u.phase === 'failed' ? u.error ?? 'Failed' : void 0"
+          :selectable="selectable"
+          :selected="isChosen(u.assetId)"
+          :disabled="!u.assetId || selectable && !isAccepted(u.kind)"
+          @toggle="u.assetId && activate(u.assetId)"
+        >
+          <MLMediaProgressVeil
+            v-if="uploadPhase(u)"
+            :phase="uploadPhase(u)"
+            :progress="u.progress"
+            compact
+          />
+        </MLMediaPickerCard>
+        <MLMediaPickerCard
+          v-for="a in listed"
+          :key="a.id"
+          :asset="a"
+          :selectable="selectable"
+          :selected="isChosen(a.id)"
+          :disabled="blocked(a)"
+          :disabled-reason="blockedReason(a)"
+          :on-preview="hasAction('preview') ? () => preview(a.id) : void 0"
+          @toggle="activate(a.id)"
+        >
+          <template
+            v-if="$slots['card-badge']"
+            #badge
+          >
+            <slot
+              name="card-badge"
+              :asset="a"
+            />
+          </template>
+          <template
+            v-if="hasMenu(true) || $slots['card-actions']"
+            #actions
+          >
+            <slot
+              name="card-actions"
+              :asset="a"
+            />
+            <UDropdownMenu
+              v-if="hasMenu(true)"
+              :items="cardMenu(a.id, true)"
+            >
+              <UButton
+                size="xs"
+                color="neutral"
+                variant="soft"
+                icon="i-lucide-ellipsis-vertical"
+                :aria-label="`Actions for ${assetName(a)}`"
+              />
+            </UDropdownMenu>
+          </template>
+        </MLMediaPickerCard>
+      </div>
+
+      <!-- List -->
+      <div
+        v-else
+        class="flex flex-col divide-y divide-default overflow-hidden rounded-lg border border-default"
+      >
+        <MLMediaPickerRow
+          v-for="u in visibleUploads"
+          :key="u.key"
+          :src="u.localPreview"
+          :kind="u.kind"
+          :name="u.file.name"
+          :size="u.phase === 'uploading' ? `${Math.round(u.progress ?? 0)}%` : formatBytes(u.file.size)"
+          :date="u.phase === 'ready' ? 'Just now' : u.phase === 'failed' ? 'Failed' : 'Uploading'"
+          :selectable="selectable"
+          :selected="isChosen(u.assetId)"
+          :disabled="!u.assetId || selectable && !isAccepted(u.kind)"
+          @toggle="u.assetId && activate(u.assetId)"
+        />
+        <MLMediaPickerRow
+          v-for="a in listed"
+          :key="a.id"
+          :asset="a"
+          :selectable="selectable"
+          :selected="isChosen(a.id)"
+          :disabled="blocked(a)"
+          :disabled-reason="blockedReason(a)"
+          @toggle="activate(a.id)"
+        >
+          <template
+            v-if="$slots['card-badge']"
+            #badge
+          >
+            <slot
+              name="card-badge"
+              :asset="a"
+            />
+          </template>
+          <template
+            v-if="hasMenu(false) || $slots['card-actions']"
+            #actions
+          >
+            <slot
+              name="card-actions"
+              :asset="a"
+            />
+            <UDropdownMenu
+              v-if="hasMenu(false)"
+              :items="cardMenu(a.id, false)"
+            >
+              <UButton
+                size="xs"
+                color="neutral"
+                variant="ghost"
+                icon="i-lucide-ellipsis-vertical"
+                :aria-label="`Actions for ${assetName(a)}`"
+              />
+            </UDropdownMenu>
+          </template>
+        </MLMediaPickerRow>
+      </div>
+
+      <UButton
+        v-if="browse.hasMore.value && !initialLoading"
+        class="self-center"
+        color="neutral"
+        variant="outline"
+        size="sm"
+        label="Load more"
+        :loading="browse.loading.value"
+        @click="browse.loadMore()"
+      />
+    </div>
+
+    <slot
+      name="footer"
+      :selected="selected"
+      :summary="limitNote ?? summary"
+      :note="limitNote"
+    />
+
+    <UModal
+      :open="!!confirming"
+      :title="confirming ? `${confirming.action.label}?` : void 0"
+      :description="confirming ? confirmText(confirming.action, confirming.ids.length) : void 0"
+      @update:open="(open) => !open && (confirming = null)"
+    >
+      <template #footer>
+        <div class="flex w-full justify-end gap-2">
+          <UButton
+            color="neutral"
+            variant="outline"
+            label="Cancel"
+            @click="confirming = null"
+          />
+          <UButton
+            :color="confirming?.action.danger ? 'error' : 'primary'"
+            :label="confirming?.action.label"
+            @click="runConfirmed"
+          />
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>