nuxt-media-library 0.0.48 → 0.0.49

package/dist/runtime/components/MLMedia/FilePickerPanel.vue

@@ -0,0 +1,300 @@
+<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 { formatBytes } from "../../utils/assetFormat";
+const ALL_KINDS = ["image", "video", "audio", "document", "model_3d", "archive", "font", "web_app", "image_batch", "other"];
+const props = defineProps({
+  accept: { type: [Array, String], required: false, default: "" },
+  max: { type: Number, required: false, default: Number.POSITIVE_INFINITY },
+  selected: { type: Array, required: false, default: () => [] },
+  title: { type: String, required: false, default: void 0 },
+  maxSize: { type: [Number, null], required: false, default: null },
+  upload: { type: Object, required: false, default: () => ({}) },
+  bodyClass: { type: String, required: false, default: "max-h-[min(60vh,560px)]" }
+});
+const emit = defineEmits(["done", "cancel"]);
+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 }));
+const initial = [...props.selected];
+const chosen = ref([...initial]);
+const limitNote = ref(null);
+const single = computed(() => props.max === 1);
+const changed = computed(() => chosen.value.length !== initial.length || chosen.value.some((id, i) => id !== initial[i]));
+function isChosen(id) {
+  return !!id && chosen.value.includes(id);
+}
+function choose(id) {
+  limitNote.value = null;
+  if (single.value) {
+    chosen.value = [id];
+    return true;
+  }
+  if (chosen.value.length >= props.max) {
+    limitNote.value = `You can choose up to ${props.max}. Unselect one first.`;
+    return false;
+  }
+  chosen.value = [...chosen.value, id];
+  return true;
+}
+function toggle(id) {
+  if (isChosen(id)) {
+    limitNote.value = null;
+    chosen.value = chosen.value.filter((x) => x !== id);
+  } else {
+    choose(id);
+  }
+}
+const pinned = useMLMediaAssets(() => initial);
+const pinnedAssets = computed(() => initial.map((id) => pinned.get(id)).filter((a) => !!a));
+const uploader = useMLMediaUpload(props.upload);
+const rejectNote = ref(null);
+function onFiles(files) {
+  rejectNote.value = null;
+  for (const file of files) {
+    const u = uploader.start(file);
+    void u.created.then((id) => id && !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 uploadIds = computed(() => new Set(uploader.uploads.value.map((u) => u.assetId).filter(Boolean)));
+const visibleUploads = computed(() => uploader.uploads.value.filter((u) => u.phase !== "canceled"));
+function uploadPhase(u) {
+  return u.phase === "uploading" || u.phase === "processing" || u.phase === "failed" ? u.phase : null;
+}
+const listed = computed(() => {
+  const pinnedIds = new Set(filtering.value ? [] : pinnedAssets.value.map((a) => a.id));
+  const rest = browse.items.value.filter((a) => !pinnedIds.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 mediaEditor = useMLMediaEditor();
+function preview(id) {
+  void mediaEditor.open(id, { readonly: true, siblings: listed.value.map((a) => a.id) });
+}
+const footerText = computed(() => {
+  if (limitNote.value) return limitNote.value;
+  const n = chosen.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>
+      </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>
+
+    <div
+      class="flex min-h-0 flex-col gap-3 overflow-y-auto p-4"
+      :class="bodyClass"
+    >
+      <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>
+
+      <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 -->
+      <UEmpty
+        v-else-if="isEmpty && !browse.error.value"
+        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.' : 'Drop files above to add the first one.'"
+      />
+
+      <!-- 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"
+          :selected="isChosen(u.assetId)"
+          :disabled="!u.assetId || !isAccepted(u.kind)"
+          @toggle="u.assetId && toggle(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"
+          :selected="isChosen(a.id)"
+          :disabled="!isAccepted(a.kind) || a.status === 'failed'"
+          :disabled-reason="a.status === 'failed' ? 'Processing failed for this file' : notAcceptedReason"
+          :on-preview="() => preview(a.id)"
+          @toggle="toggle(a.id)"
+        />
+      </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'"
+          :selected="isChosen(u.assetId)"
+          :disabled="!u.assetId || !isAccepted(u.kind)"
+          @toggle="u.assetId && toggle(u.assetId)"
+        />
+        <MLMediaPickerRow
+          v-for="a in listed"
+          :key="a.id"
+          :asset="a"
+          :selected="isChosen(a.id)"
+          :disabled="!isAccepted(a.kind) || a.status === 'failed'"
+          :disabled-reason="a.status === 'failed' ? 'Processing failed for this file' : notAcceptedReason"
+          @toggle="toggle(a.id)"
+        />
+      </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>
+
+    <div class="flex flex-wrap items-center gap-2 border-t border-default px-4 py-3">
+      <span
+        class="me-auto text-sm"
+        :class="limitNote ? 'text-warning' : 'text-muted'"
+        aria-live="polite"
+      >{{ footerText }}</span>
+      <UButton
+        color="neutral"
+        variant="outline"
+        label="Cancel"
+        @click="emit('cancel')"
+      />
+      <UButton
+        label="Done"
+        :disabled="!changed"
+        @click="emit('done', [...chosen])"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,33 @@
+import { type MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
+type __VLS_Props = {
+    /** Kinds the caller takes. Others are listed but dimmed. Empty means any. */
+    accept?: readonly string[] | string;
+    /** Most files that can be chosen. 1 makes clicks replace the choice. */
+    max?: number;
+    /** IDs already attached. Listed first and checked. */
+    selected?: readonly string[];
+    title?: string;
+    /** Bytes, for uploads from the picker. */
+    maxSize?: number | null;
+    /** Upload session settings for files dropped into the picker. */
+    upload?: MediaUploadOptions;
+    /** Grid rows for a fixed-height body; the list scrolls inside it. */
+    bodyClass?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => any;
+    done: (ids: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onDone?: ((ids: string[]) => any) | undefined;
+}>, {
+    title: string;
+    accept: readonly string[] | string;
+    maxSize: number | null;
+    max: number;
+    selected: readonly string[];
+    upload: MediaUploadOptions;
+    bodyClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,30 @@
+export interface FilterPillOption {
+    label: string;
+    value: string;
+    /** Shown after the label, e.g. a count. */
+    hint?: string;
+    disabled?: boolean;
+}
+type __VLS_Props = {
+    /** "File type", "Used in"… */
+    label: string;
+    options: FilterPillOption[];
+    /** One option at a time (radio) instead of many (checkboxes). */
+    single?: boolean;
+    /** How many chosen labels to spell out before switching to "+N". */
+    maxShown?: number;
+};
+type __VLS_ModelProps = {
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {
+    single: boolean;
+    maxShown: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MLMedia/FilterPill.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  label: { type: String, required: true },
+  options: { type: Array, required: true },
+  single: { type: Boolean, required: false, default: false },
+  maxShown: { type: Number, required: false, default: 2 }
+});
+const model = defineModel({ type: Array, ...{ default: () => [] } });
+const chosen = computed(() => props.options.filter((o) => model.value.includes(o.value)));
+const summary = computed(() => {
+  const names = chosen.value.map((o) => o.label);
+  if (names.length <= props.maxShown) return names.join(", ");
+  return `${names.slice(0, props.maxShown).join(", ")} +${names.length - props.maxShown}`;
+});
+const checkItems = computed(() => props.options.map((o) => ({
+  label: o.hint ? `${o.label} (${o.hint})` : o.label,
+  value: o.value,
+  disabled: o.disabled
+})));
+const singleValue = computed({
+  get: () => model.value[0],
+  set: (v) => {
+    model.value = v ? [v] : [];
+  }
+});
+function clear() {
+  model.value = [];
+}
+</script>
+
+<template>
+  <UFieldGroup size="sm">
+    <UPopover :content="{ align: 'start' }">
+      <UButton
+        color="neutral"
+        :variant="chosen.length ? 'soft' : 'outline'"
+        :trailing-icon="chosen.length ? void 0 : 'i-lucide-chevron-down'"
+      >
+        <span>{{ label }}<span
+          v-if="chosen.length"
+          class="font-normal"
+        >: {{ summary }}</span></span>
+      </UButton>
+
+      <template #content>
+        <div class="flex min-w-48 flex-col gap-2 p-3">
+          <URadioGroup
+            v-if="single"
+            v-model="singleValue"
+            :items="checkItems"
+            size="sm"
+            :legend="label"
+            :ui="{ legend: 'sr-only' }"
+          />
+          <UCheckboxGroup
+            v-else
+            v-model="model"
+            :items="checkItems"
+            size="sm"
+            :legend="label"
+            :ui="{ legend: 'sr-only' }"
+          />
+          <UButton
+            v-if="chosen.length"
+            size="xs"
+            variant="link"
+            class="self-start px-0"
+            label="Clear"
+            @click="clear"
+          />
+        </div>
+      </template>
+    </UPopover>
+    <UButton
+      v-if="chosen.length"
+      color="neutral"
+      variant="soft"
+      icon="i-lucide-x"
+      :aria-label="`Clear ${label}`"
+      @click="clear"
+    />
+  </UFieldGroup>
+</template>

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

@@ -0,0 +1,30 @@
+export interface FilterPillOption {
+    label: string;
+    value: string;
+    /** Shown after the label, e.g. a count. */
+    hint?: string;
+    disabled?: boolean;
+}
+type __VLS_Props = {
+    /** "File type", "Used in"… */
+    label: string;
+    options: FilterPillOption[];
+    /** One option at a time (radio) instead of many (checkboxes). */
+    single?: boolean;
+    /** How many chosen labels to spell out before switching to "+N". */
+    maxShown?: number;
+};
+type __VLS_ModelProps = {
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {
+    single: boolean;
+    maxShown: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,78 @@
+import type { MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
+export interface MediaGalleryRole {
+    /** Shown on chips, badges and menus, e.g. "Cover". */
+    label: string;
+    /** Upload profile name for files uploaded into this role, e.g. "product-cover". */
+    profile?: string | null;
+    /** Asset IDs already in this role, in order. */
+    selected?: string[];
+    /** Most files in this role. 1 makes it a one-file slot: a new file replaces the old. */
+    max?: number | null;
+    accept?: readonly string[] | string;
+    maxSize?: number | null;
+}
+export type MediaGalleryProfiles = Record<string, MediaGalleryRole>;
+type __VLS_Props = {
+    /** Roles of this usage. Omit for a single list driven by v-model. */
+    profiles?: MediaGalleryProfiles | null;
+    /** Role new uploads and picked files go to. Defaults to the first role that holds more than one file. */
+    defaultRole?: string;
+    accept?: readonly string[] | string;
+    max?: number | null;
+    maxSize?: number | null;
+    title?: string;
+    hint?: string;
+    disabled?: boolean;
+    featured?: boolean;
+    recordName?: string;
+    visibility?: MediaUploadOptions['visibility'];
+    processingConfig?: MediaUploadOptions['processingConfig'];
+    collectionName?: string | null;
+    /** Upload profile for the single list (with `profiles`, each role has its own). */
+    profile?: string | null;
+    picker?: boolean;
+    onPick?: () => void;
+    editor?: boolean;
+    onOpen?: (assetId: string) => void;
+};
+type __VLS_ModelProps = {
+    modelValue?: string[];
+    'alt'?: Record<string, string> | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    uploaded: (assetId: string, role: string) => any;
+    "update:modelValue": (value: string[]) => any;
+    "update:alt": (value: Record<string, string> | undefined) => any;
+    "update:profiles": (profiles: MediaGalleryProfiles) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onUploaded?: ((assetId: string, role: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+    "onUpdate:alt"?: ((value: Record<string, string> | undefined) => any) | undefined;
+    "onUpdate:profiles"?: ((profiles: MediaGalleryProfiles) => any) | undefined;
+}>, {
+    visibility: "private" | "restricted" | "public";
+    title: string;
+    profile: string | null;
+    accept: readonly string[] | string;
+    maxSize: number | null;
+    processingConfig: {
+        stepOptions?: Record<string, Record<string, unknown>> | null;
+        useFilenameAsAssetId?: boolean;
+        enableTranscription?: boolean;
+    };
+    collectionName: string | null;
+    disabled: boolean;
+    max: number | null;
+    hint: string;
+    picker: boolean;
+    onPick: () => void;
+    editor: boolean;
+    onOpen: (assetId: string) => void;
+    featured: boolean;
+    recordName: string;
+    profiles: MediaGalleryProfiles | null;
+    defaultRole: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;