nuxt-media-library 0.0.44 → 0.0.49

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;

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

@@ -0,0 +1,256 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { GALLERY_TILE_TYPE } from "../../utils/galleryDrag";
+import GallerySection from "./GallerySection.vue";
+const props = defineProps({
+  profiles: { type: [Object, null], required: false, default: null },
+  defaultRole: { type: String, required: false, default: void 0 },
+  accept: { type: [Array, String], required: false, default: "" },
+  max: { type: [Number, null], required: false, default: null },
+  maxSize: { type: [Number, null], required: false, default: null },
+  title: { type: String, required: false, default: "Media" },
+  hint: { type: String, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false, default: false },
+  featured: { type: Boolean, required: false, default: true },
+  recordName: { type: String, required: false, default: "" },
+  visibility: { type: String, required: false, default: void 0 },
+  processingConfig: { type: Object, required: false, default: void 0 },
+  collectionName: { type: [String, null], required: false, default: null },
+  profile: { type: [String, null], required: false, default: null },
+  picker: { type: Boolean, required: false, default: true },
+  onPick: { type: Function, required: false, default: void 0 },
+  editor: { type: Boolean, required: false, default: true },
+  onOpen: { type: Function, required: false, default: void 0 }
+});
+const model = defineModel({ type: Array, ...{ default: () => [] } });
+const alt = defineModel("alt", { type: null, ...{ default: void 0 } });
+const emit = defineEmits(["uploaded", "update:profiles"]);
+const roles = computed(() => Object.entries(props.profiles ?? {}).map(([key, r]) => ({ key, ...r })));
+const hasRoles = computed(() => roles.value.length > 0);
+const single = (r) => r.max === 1;
+const defaultKey = computed(() => {
+  if (props.defaultRole && props.profiles?.[props.defaultRole]) return props.defaultRole;
+  return (roles.value.find((r) => !single(r)) ?? roles.value[0])?.key ?? "";
+});
+const defaultRole = computed(() => props.profiles?.[defaultKey.value]);
+const removeLabel = computed(() => props.recordName ? `Remove from ${props.recordName}` : "Remove");
+const selections = ref({});
+watch(() => props.profiles, (p) => {
+  const next = {};
+  for (const [key, r] of Object.entries(p ?? {})) next[key] = [...r.selected ?? []];
+  selections.value = next;
+}, { immediate: true, deep: true });
+const sel = (key) => selections.value[key] ?? [];
+const union = computed(() => {
+  const seen = /* @__PURE__ */ new Set();
+  const ordered = [...roles.value.filter(single), ...roles.value.filter((r) => !single(r))];
+  for (const r of ordered) for (const id of sel(r.key)) seen.add(id);
+  return [...seen];
+});
+function commit(changes) {
+  selections.value = { ...selections.value, ...changes };
+  const out = {};
+  for (const [k, r] of Object.entries(props.profiles ?? {})) out[k] = { ...r, selected: [...sel(k)] };
+  emit("update:profiles", out);
+}
+const notice = ref(null);
+function kindAllowed(kind, accept) {
+  const list = (typeof accept === "string" ? accept.split(",") : accept ?? []).map((k) => k.trim().toLowerCase()).filter(Boolean);
+  return !list.length || !kind || list.includes(kind.toLowerCase());
+}
+function withFile(key, id, list = sel(key)) {
+  const role = props.profiles?.[key];
+  if (!role) return null;
+  if (list.includes(id)) return list;
+  if (single(role)) return [id];
+  if (role.max != null && list.length >= role.max) {
+    notice.value = `${role.label} holds up to ${role.max} files. Remove one first.`;
+    return null;
+  }
+  return [...list, id];
+}
+function setRole(id, key, on) {
+  notice.value = null;
+  const next = on ? withFile(key, id) : sel(key).filter((x) => x !== id);
+  if (next) commit({ [key]: next });
+}
+const pendingRole = /* @__PURE__ */ new Map();
+const uploadedRole = /* @__PURE__ */ new Map();
+function onUnionUpdate(next) {
+  notice.value = null;
+  const keep = new Set(next);
+  const before = new Set(union.value);
+  const changes = {};
+  for (const r of roles.value) changes[r.key] = sel(r.key).filter((id) => keep.has(id));
+  for (const id of next) {
+    if (before.has(id)) continue;
+    const key = pendingRole.get(id) ?? defaultKey.value;
+    pendingRole.delete(id);
+    const placed = withFile(key, id, changes[key]);
+    if (placed) changes[key] = placed;
+  }
+  const pos = new Map(next.map((id, i) => [id, i]));
+  for (const r of roles.value) {
+    if (!single(r)) changes[r.key] = [...changes[r.key]].sort((a, b) => (pos.get(a) ?? 0) - (pos.get(b) ?? 0));
+  }
+  commit(changes);
+}
+function onAdd(id, tag) {
+  const key = tag ?? defaultKey.value;
+  uploadedRole.set(id, key);
+  if (union.value.includes(id)) setRole(id, key, true);
+  else pendingRole.set(id, key);
+}
+function onUploaded(id) {
+  emit("uploaded", id, uploadedRole.get(id) ?? defaultKey.value);
+  uploadedRole.delete(id);
+}
+const badges = (id) => roles.value.filter((r) => sel(r.key).includes(id)).map((r) => r.label);
+function tileMenu(id, kind) {
+  return [
+    [
+      { type: "label", label: "Use as" },
+      ...roles.value.map((r) => {
+        const has = sel(r.key).includes(id);
+        return {
+          label: single(r) && !has && sel(r.key).length ? `${r.label} (replaces current)` : r.label,
+          type: "checkbox",
+          checked: has,
+          disabled: !has && !kindAllowed(kind, r.accept ?? props.accept),
+          onUpdateChecked: (on) => setRole(id, r.key, on),
+          onSelect: (e) => e.preventDefault()
+        };
+      })
+    ],
+    [{ label: removeLabel.value, icon: "i-lucide-x", color: "error", onSelect: () => onUnionUpdate(union.value.filter((x) => x !== id)) }]
+  ];
+}
+const activeRole = ref(null);
+const highlight = computed(() => activeRole.value ? new Set(sel(activeRole.value)) : null);
+const grid = ref(null);
+const chipOver = ref(null);
+function chipDragOver(e, key) {
+  const types = e.dataTransfer?.types ?? [];
+  if (props.disabled || !(types.includes(GALLERY_TILE_TYPE) || types.includes("Files"))) return;
+  e.preventDefault();
+  e.dataTransfer.dropEffect = "copy";
+  chipOver.value = key;
+}
+function chipDrop(e, key) {
+  chipOver.value = null;
+  const role = props.profiles?.[key];
+  if (!e.dataTransfer || !role || props.disabled) return;
+  e.preventDefault();
+  const id = e.dataTransfer.getData(GALLERY_TILE_TYPE);
+  if (id) return setRole(id, key, true);
+  const files = [...e.dataTransfer.files];
+  if (!files.length) return;
+  notice.value = null;
+  grid.value?.uploadFiles(files, {
+    profile: role.profile ?? null,
+    tag: key,
+    accept: role.accept ?? props.accept,
+    maxSize: role.maxSize ?? props.maxSize,
+    maxFiles: single(role) ? 1 : role.max != null ? Math.max(0, role.max - sel(key).length) : void 0
+  });
+}
+function chipCount(key, max) {
+  const n = sel(key).length;
+  return max != null ? `${n}/${max}` : String(n);
+}
+</script>
+
+<template>
+  <GallerySection
+    v-if="hasRoles"
+    ref="grid"
+    v-model:alt="alt"
+    :model-value="union"
+    :title="title"
+    :hint="hint"
+    :accept="defaultRole?.accept ?? accept"
+    :max-size="defaultRole?.maxSize ?? maxSize"
+    :profile="defaultRole?.profile ?? null"
+    :disabled="disabled"
+    :featured="featured"
+    :record-name="recordName"
+    :remove-label="removeLabel"
+    :visibility="visibility"
+    :processing-config="processingConfig"
+    :collection-name="collectionName"
+    :picker="picker"
+    :on-pick="onPick"
+    :editor="editor"
+    :on-open="onOpen"
+    :badges="badges"
+    :tile-menu="tileMenu"
+    :highlight="highlight"
+    :on-add="onAdd"
+    @update:model-value="onUnionUpdate"
+    @uploaded="onUploaded"
+  >
+    <template #toolbar>
+      <div class="flex flex-col gap-1.5">
+        <div
+          class="flex flex-wrap gap-2"
+          role="group"
+          aria-label="Roles"
+        >
+          <button
+            v-for="r in roles"
+            :key="r.key"
+            type="button"
+            class="inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs transition-colors motion-reduce:transition-none"
+            :class="chipOver === r.key ? 'border-primary bg-primary/15 text-primary' : activeRole === r.key ? 'border-primary bg-primary/10 text-primary' : single(r) && !sel(r.key).length ? 'border-dashed border-warning text-warning' : 'border-accented bg-default text-default hover:bg-elevated'"
+            :aria-pressed="activeRole === r.key"
+            @click="activeRole = activeRole === r.key ? null : r.key"
+            @dragover="chipDragOver($event, r.key)"
+            @dragleave="chipOver === r.key && (chipOver = null)"
+            @drop="chipDrop($event, r.key)"
+          >
+            <UIcon
+              :name="single(r) && !sel(r.key).length ? 'i-lucide-triangle-alert' : single(r) ? 'i-lucide-star' : 'i-lucide-layout-grid'"
+              class="size-3.5"
+            />
+            {{ single(r) && !sel(r.key).length ? `No ${r.label.toLowerCase()}` : r.label }}
+            <span class="tabular-nums opacity-70">{{ chipCount(r.key, r.max) }}</span>
+          </button>
+        </div>
+        <p class="text-xs text-dimmed">
+          Click a role to highlight its files. Drop a tile on a role to assign it, or a file from your computer to upload it as that role.
+        </p>
+        <UAlert
+          v-if="notice"
+          color="warning"
+          variant="subtle"
+          icon="i-lucide-triangle-alert"
+          :description="notice"
+          close
+          @update:open="notice = null"
+        />
+      </div>
+    </template>
+  </GallerySection>
+  <GallerySection
+    v-else
+    v-model="model"
+    v-model:alt="alt"
+    :accept="accept"
+    :max="max"
+    :max-size="maxSize"
+    :title="title"
+    :hint="hint"
+    :disabled="disabled"
+    :featured="featured"
+    :record-name="recordName"
+    :visibility="visibility"
+    :processing-config="processingConfig"
+    :collection-name="collectionName"
+    :profile="profile"
+    :picker="picker"
+    :on-pick="onPick"
+    :editor="editor"
+    :on-open="onOpen"
+    @uploaded="(id) => emit('uploaded', id, '')"
+  />
+</template>

package/dist/runtime/components/MLMedia/Gallery.vue.d.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;

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

@@ -0,0 +1,102 @@
+import type { DropdownMenuItem } from '@nuxt/ui';
+import type { MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
+type __VLS_Props = {
+    /** Asset kinds the list takes. Empty means any file. */
+    accept?: readonly string[] | string;
+    /** Most files on the record. */
+    max?: number | null;
+    /** Bytes, per file. */
+    maxSize?: number | null;
+    title?: string;
+    /** Under the grid. Defaults to how ordering works and what the list takes. */
+    hint?: string;
+    disabled?: boolean;
+    /** Show the first file larger, as the featured one. */
+    featured?: boolean;
+    /** Used in "Remove from …" labels, e.g. "product". */
+    recordName?: string;
+    visibility?: MediaUploadOptions['visibility'];
+    processingConfig?: MediaUploadOptions['processingConfig'];
+    collectionName?: string | null;
+    /** Show "Select existing", which opens the library picker. */
+    picker?: boolean;
+    onPick?: () => void;
+    /** Show the eye on each tile, which opens the media editor. */
+    editor?: boolean;
+    onOpen?: (assetId: string) => void;
+    /** Upload profile name for new files in this list. */
+    profile?: string | null;
+    /** Overrides the "Remove from …" label. */
+    removeLabel?: string;
+    /** Labels shown on a tile, e.g. its roles. */
+    badges?: (assetId: string) => string[];
+    /** Extra menu on each tile (⋯). */
+    tileMenu?: (assetId: string, kind: string | null) => DropdownMenuItem[][];
+    /** When set, these files are highlighted and the rest dimmed. */
+    highlight?: ReadonlySet<string> | null;
+    /** See useMLMediaGallery's onAdd. */
+    onAdd?: (assetId: string, tag: string | undefined) => void;
+};
+/** Upload files with another profile than the list's own, e.g. from a role chip. */
+declare function uploadFiles(files: File[], opts?: {
+    profile?: string | null;
+    tag?: string;
+    accept?: readonly string[] | string;
+    maxSize?: number | null;
+    maxFiles?: number;
+}): void;
+type __VLS_ModelProps = {
+    modelValue?: string[];
+    /** Alt text per asset ID, stored on the host record. */
+    'alt'?: Record<string, string> | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_29: {};
+type __VLS_Slots = {} & {
+    toolbar?: (props: typeof __VLS_29) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    uploadFiles: typeof uploadFiles;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    uploaded: (assetId: string) => any;
+    "update:modelValue": (value: string[]) => any;
+    "update:alt": (value: Record<string, string> | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onUploaded?: ((assetId: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+    "onUpdate:alt"?: ((value: Record<string, string> | undefined) => 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;
+    highlight: ReadonlySet<string> | null;
+    removeLabel: string;
+    max: number | null;
+    onAdd: (assetId: string, tag: string | undefined) => void;
+    hint: string;
+    picker: boolean;
+    onPick: () => void;
+    editor: boolean;
+    onOpen: (assetId: string) => void;
+    featured: boolean;
+    recordName: string;
+    badges: (assetId: string) => string[];
+    tileMenu: (assetId: string, kind: string | null) => DropdownMenuItem[][];
+}, {}, {}, {}, 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;
+    };
+};