nuxt-media-library 0.0.44

package/dist/runtime/components/MLUploader/Item.vue

@@ -0,0 +1,242 @@
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import { useMLChunkUploader } from "../../index";
+import { useMLProcessingStatus } from "../../composables/useMLProcessingStatus";
+const props = defineProps({
+  file: { type: null, required: true },
+  resourceType: { type: String, required: true },
+  collectionName: { type: [String, null], required: false },
+  policy: { type: Object, required: true },
+  chunkUploader: { type: [Object, String], required: false },
+  noPreviewText: { type: String, required: false, default: "No preview" },
+  uploadedText: { type: String, required: false, default: "Uploaded" },
+  errorText: { type: String, required: false, default: "Error" },
+  uploadingText: { type: String, required: false, default: "Uploading\u2026" },
+  uploadFailedText: { type: String, required: false, default: "Upload failed." }
+});
+const emit = defineEmits(["uploaded", "error", "progress", "canceled", "remove"]);
+const parsedChunkUploader = computed(() => {
+  if (!props.chunkUploader) return void 0;
+  if (typeof props.chunkUploader === "string") {
+    try {
+      return JSON.parse(props.chunkUploader);
+    } catch {
+      return void 0;
+    }
+  }
+  return props.chunkUploader;
+});
+const { uploadFile, abort } = useMLChunkUploader(parsedChunkUploader.value);
+const progress = ref(0);
+const status = ref("uploading");
+const message = ref(null);
+const fileType = computed(() => props.file.type.split("/")[1] || "file");
+const isImage = computed(() => props.file.type.startsWith("image/"));
+const isVideo = computed(() => props.file.type.startsWith("video/"));
+const previewUrl = ref(null);
+const uploadedAssetId = ref(null);
+const popoverOpen = ref(false);
+const { track } = useMLProcessingStatus();
+let processingStream = null;
+const processingProgress = computed(() => processingStream?.progress.value ?? 0);
+const isProcessingDone = computed(() => processingStream?.isComplete.value ?? false);
+const initPreview = () => {
+  if (isImage.value || isVideo.value) {
+    previewUrl.value = URL.createObjectURL(props.file);
+  }
+};
+const startUpload = async () => {
+  try {
+    const res = await uploadFile(props.file, {
+      create: {
+        resource_type: props.resourceType,
+        collection_name: props.collectionName ?? null
+      },
+      onProgress(p) {
+        progress.value = p.percent;
+        emit("progress", p.percent);
+      },
+      onState(_s) {
+      }
+    });
+    const assetIds = Array.isArray(res?.finalize?.asset_ids) ? res.finalize.asset_ids : res?.finalize?.asset_id ? [res.finalize.asset_id] : [];
+    status.value = "uploaded";
+    emit("uploaded", assetIds);
+    if (assetIds.length > 0) {
+      uploadedAssetId.value = assetIds[0];
+      status.value = "processing";
+      processingStream = track(assetIds[0]);
+      const checkDone = setInterval(() => {
+        if (processingStream?.isComplete.value) {
+          status.value = "ready";
+          clearInterval(checkDone);
+        }
+        if (processingStream?.isFailed.value) {
+          status.value = "error";
+          message.value = "Processing failed";
+          clearInterval(checkDone);
+        }
+      }, 500);
+    }
+  } catch (err) {
+    status.value = "error";
+    message.value = props.uploadFailedText;
+    emit("error", message.value);
+  }
+};
+const cancelUpload = () => {
+  abort();
+  emit("canceled");
+};
+const removeItem = () => {
+  processingStream?.close();
+  emit("remove");
+};
+const statusText = computed(() => {
+  switch (status.value) {
+    case "uploading":
+      return props.uploadingText;
+    case "uploaded":
+      return props.uploadedText;
+    case "processing":
+      return `Processing\u2026 ${processingProgress.value}%`;
+    case "ready":
+      return "Ready";
+    case "error":
+      return message.value || props.errorText;
+    default:
+      return "";
+  }
+});
+const statusBarColor = computed(() => {
+  if (status.value === "error") return "bg-(--ui-danger)";
+  if (status.value === "ready") return "bg-green-500";
+  if (status.value === "processing") return "bg-primary";
+  return "bg-primary";
+});
+const effectiveProgress = computed(() => {
+  if (status.value === "uploading") return progress.value;
+  if (status.value === "processing") return processingProgress.value;
+  if (status.value === "ready" || status.value === "uploaded") return 100;
+  return progress.value;
+});
+onMounted(() => {
+  initPreview();
+  startUpload();
+});
+onUnmounted(() => {
+  if (previewUrl.value) URL.revokeObjectURL(previewUrl.value);
+  processingStream?.close();
+});
+</script>
+
+<template>
+  <UPopover
+    v-if="uploadedAssetId && (status === 'processing' || status === 'ready' || status === 'error')"
+    v-model:open="popoverOpen"
+    mode="click"
+    :content="{ side: 'top', align: 'center', sideOffset: 8 }"
+  >
+    <div class="text-sm text-default bg-muted rounded px-3 py-2 w-40 cursor-pointer" @click.stop="popoverOpen = !popoverOpen">
+      <div class="relative w-full aspect-square bg-default rounded mb-2 overflow-hidden">
+        <img v-if="isImage && previewUrl" :src="previewUrl" class="w-full h-full object-cover" alt="" />
+        <video v-else-if="isVideo && previewUrl" :src="previewUrl" class="w-full h-full object-cover" muted />
+        <div v-else class="text-xs text-muted flex items-center justify-center w-full h-full">
+          {{ props.noPreviewText }}
+        </div>
+
+        <!-- Processing overlay -->
+        <div
+          class="absolute inset-0 flex flex-col items-center justify-center gap-1"
+          style="background-color: color-mix(in srgb, var(--ui-text) 40%, transparent);"
+        >
+          <div v-if="status === 'processing'" class="w-10 h-10 rounded-full bg-primary/20 border-2 border-primary flex items-center justify-center animate-pulse">
+            <UIcon name="i-lucide-loader" class="size-5 text-primary animate-spin" />
+          </div>
+          <div v-else-if="status === 'ready'" class="w-10 h-10 rounded-full bg-green-500/20 border-2 border-green-500 flex items-center justify-center">
+            <UIcon name="i-lucide-check" class="size-5 text-green-500" />
+          </div>
+          <div v-else-if="status === 'error'" class="w-10 h-10 rounded-full bg-red-500/20 border-2 border-red-500 flex items-center justify-center">
+            <UIcon name="i-lucide-x" class="size-5 text-red-500" />
+          </div>
+        </div>
+
+        <!-- Remove button -->
+        <div class="absolute top-1 right-1">
+          <UButton
+            icon="i-heroicons-trash-20-solid"
+            color="error"
+            variant="ghost"
+            size="xs"
+            @click.stop="removeItem"
+          />
+        </div>
+      </div>
+      <div class="font-medium truncate">{{ file.name }}</div>
+      <div class="text-xs text-muted uppercase">{{ fileType }}</div>
+      <div class="mt-1 h-1 w-full bg-border rounded">
+        <div class="h-1 rounded transition-all duration-300" :class="statusBarColor" :style="{ width: `${effectiveProgress}%` }" />
+      </div>
+      <div class="text-xs text-muted mt-1">{{ statusText }}</div>
+    </div>
+
+    <template #content>
+      <div class="w-80 max-h-96 overflow-y-auto p-1">
+        <MLProcessingPipeline :asset-id="uploadedAssetId" />
+      </div>
+    </template>
+  </UPopover>
+
+  <!-- Non-popover state: uploading or no asset yet -->
+  <div v-else class="text-sm text-default bg-muted rounded px-3 py-2 w-40" @click.stop>
+    <div class="relative w-full aspect-square bg-default rounded mb-2 overflow-hidden">
+      <img v-if="isImage && previewUrl" :src="previewUrl" class="w-full h-full object-cover" alt="" />
+      <video v-else-if="isVideo && previewUrl" :src="previewUrl" class="w-full h-full object-cover" muted />
+      <div v-else class="text-xs text-muted flex items-center justify-center w-full h-full">
+        {{ props.noPreviewText }}
+      </div>
+
+      <div
+        v-if="status === 'uploading'"
+        class="absolute inset-0 flex flex-col items-center justify-center gap-2"
+        style="background-color: color-mix(in srgb, var(--ui-text) 60%, transparent);"
+      >
+        <UProgress :value="progress" size="xs" class="w-3/4" />
+        <div class="text-xs text-(--ui-bg)">{{ progress.toFixed(0) }}%</div>
+      </div>
+
+      <div class="absolute inset-0 flex items-center justify-center">
+        <UButton
+          v-if="status === 'uploading'"
+          icon="i-heroicons-x-mark-20-solid"
+          color="error"
+          variant="ghost"
+          size="xs"
+          @click.stop="cancelUpload"
+        />
+        <UButton
+          v-else
+          icon="i-heroicons-trash-20-solid"
+          color="error"
+          variant="ghost"
+          size="xs"
+          @click.stop="removeItem"
+        />
+      </div>
+    </div>
+    <div class="font-medium truncate">{{ file.name }}</div>
+    <div class="text-xs text-muted uppercase">{{ fileType }}</div>
+    <div class="mt-1 h-1 w-full bg-border rounded">
+      <div
+        class="h-1 rounded"
+        :class="status === 'error' ? 'bg-(--ui-danger)' : 'bg-primary'"
+        :style="{ width: `${progress}%` }"
+      />
+    </div>
+    <div class="text-xs text-muted mt-1">
+      <span v-if="status === 'uploaded'">{{ props.uploadedText }}</span>
+      <span v-else-if="status === 'error'">{{ message || props.errorText }}</span>
+      <span v-else>{{ props.uploadingText }}</span>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/MLUploader/Item.vue.d.ts

@@ -0,0 +1,34 @@
+import type { ResourcePolicyResponse } from "../../index.js";
+type __VLS_Props = {
+    file: File;
+    resourceType: string;
+    collectionName?: string | null;
+    policy: ResourcePolicyResponse;
+    chunkUploader?: Record<string, any> | string;
+    noPreviewText?: string;
+    uploadedText?: string;
+    errorText?: string;
+    uploadingText?: string;
+    uploadFailedText?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    remove: () => any;
+    error: (message: string) => any;
+    progress: (percent: number) => any;
+    uploaded: (assetIds: string[]) => any;
+    canceled: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRemove?: (() => any) | undefined;
+    onError?: ((message: string) => any) | undefined;
+    onProgress?: ((percent: number) => any) | undefined;
+    onUploaded?: ((assetIds: string[]) => any) | undefined;
+    onCanceled?: (() => any) | undefined;
+}>, {
+    uploadFailedText: string;
+    noPreviewText: string;
+    uploadedText: string;
+    errorText: string;
+    uploadingText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MLUploader/PolicyPopover.d.vue.ts

@@ -0,0 +1,7 @@
+import type { ResourcePolicyResponse } from "../../index.js";
+type __VLS_Props = {
+    policy?: ResourcePolicyResponse | null;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MLUploader/PolicyPopover.vue

@@ -0,0 +1,160 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+const props = defineProps({
+  policy: { type: [Object, null], required: false }
+});
+const hasPolicy = computed(() => Boolean(props.policy));
+const triggerRef = ref(null);
+const anchorRef = ref(null);
+const contentWidth = ref(null);
+let resizeObserver = null;
+let resizeListener = null;
+const updateWidth = () => {
+  const host = triggerRef.value?.closest(".ml-uploader-root");
+  if (!host) return;
+  anchorRef.value = host;
+  const width = host.getBoundingClientRect().width;
+  contentWidth.value = width > 0 ? width : null;
+};
+const formatBytes = (value) => {
+  if (value === null || value === void 0) return "\u2014";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  let num = value;
+  let idx = 0;
+  while (num >= 1024 && idx < units.length - 1) {
+    num /= 1024;
+    idx += 1;
+  }
+  const precision = idx === 0 ? 0 : num >= 10 ? 0 : 1;
+  return `${num.toFixed(precision)} ${units[idx]}`;
+};
+const formatDate = (value) => {
+  if (!value) return "\u2014";
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? value : date.toLocaleString();
+};
+const allowedMimeTypes = computed(() => props.policy?.file_constraints?.allowed_mime_types || []);
+const permissionRequirements = computed(() => props.policy?.permission_requirements || {});
+const permissionsList = computed(() => permissionRequirements.value.required_permissions || []);
+const contentStyle = computed(() => {
+  if (!contentWidth.value) {
+    return { maxWidth: "95vw" };
+  }
+  return {
+    width: `${contentWidth.value}px`,
+    maxWidth: "95vw"
+  };
+});
+onMounted(() => {
+  updateWidth();
+  if (typeof ResizeObserver !== "undefined") {
+    resizeObserver = new ResizeObserver(updateWidth);
+    if (anchorRef.value) resizeObserver.observe(anchorRef.value);
+  } else {
+    resizeListener = () => updateWidth();
+    window.addEventListener("resize", resizeListener);
+  }
+});
+onBeforeUnmount(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
+  if (resizeListener) {
+    window.removeEventListener("resize", resizeListener);
+    resizeListener = null;
+  }
+});
+</script>
+
+<template>
+  <div ref="triggerRef" class="absolute top-4 right-4 z-1">
+    <UPopover
+      mode="click"
+      :reference="anchorRef || void 0"
+      :content="{ side: 'bottom', align: 'start', sideOffset: 8 }"
+    >
+      <div>
+        <UButton
+          color="neutral"
+          variant="outline"
+          icon="i-lucide-info"
+          :disabled="!hasPolicy"
+        />
+      </div>
+      <template #content>
+        <div :style="contentStyle" class="p-4 text-sm text-default space-y-4">
+          <div v-if="!hasPolicy" class="text-sm text-muted">
+            Policy not loaded yet.
+          </div>
+          <template v-else>
+            <div class="flex items-start justify-between gap-3">
+              <div>
+                <div class="text-xs text-muted">Resource Policy</div>
+                <div class="font-semibold">
+                  {{ props.policy?.resource_type }}
+                  <span v-if="props.policy?.collection_name">/ {{ props.policy.collection_name }}</span>
+                </div>
+                <div class="text-xs text-muted">ID: {{ props.policy?.id }}</div>
+              </div>
+              <UBadge :color="props.policy?.is_active ? 'success' : 'error'">
+                {{ props.policy?.is_active ? "Active" : "Inactive" }}
+              </UBadge>
+            </div>
+
+            <div class="grid grid-cols-2 gap-x-3 gap-y-2 text-xs">
+              <div class="text-muted">Kind</div>
+              <div class="font-medium">{{ props.policy?.kind }}</div>
+              <div class="text-muted">Visibility</div>
+              <div class="font-medium">{{ props.policy?.visibility }}</div>
+              <div class="text-muted">Version</div>
+              <div class="font-medium">{{ props.policy?.version }}</div>
+            </div>
+
+            <div class="space-y-2">
+              <div class="text-xs font-semibold uppercase text-muted">File Constraints</div>
+              <div class="grid grid-cols-2 gap-x-3 gap-y-2 text-xs">
+                <div class="text-muted">Max Size</div>
+                <div class="font-medium">{{ formatBytes(props.policy?.file_constraints?.max_size_bytes) }}</div>
+                <div class="text-muted">Min Size</div>
+                <div class="font-medium">{{ formatBytes(props.policy?.file_constraints?.min_size_bytes) }}</div>
+                <div class="text-muted">Allow Multiple</div>
+                <div class="font-medium">{{ props.policy?.file_constraints?.allow_multiple ? "Yes" : "No" }}</div>
+              </div>
+              <div class="text-xs text-muted">Allowed MIME Types</div>
+              <div class="flex flex-wrap gap-1">
+                <UBadge v-for="type in allowedMimeTypes" :key="type" color="neutral" variant="soft">
+                  {{ type }}
+                </UBadge>
+                <span v-if="!allowedMimeTypes.length" class="text-xs text-muted">—</span>
+              </div>
+
+              <div class="text-xs font-semibold uppercase text-muted">Permissions</div>
+              <div class="grid grid-cols-2 gap-x-3 gap-y-2 text-xs">
+                <div class="text-muted">Allow Anonymous</div>
+                <div class="font-medium">{{ permissionRequirements.allow_anonymous ? "Yes" : "No" }}</div>
+                <div class="text-muted">Permissions</div>
+                <div class="font-medium">{{ permissionsList.join(", ") || "\u2014" }}</div>
+              </div>
+            </div>
+
+            <div class="space-y-2">
+              <div class="text-xs font-semibold uppercase text-muted">Processing</div>
+              <div class="grid grid-cols-2 gap-x-3 gap-y-2 text-xs">
+                <div class="text-muted">Auto Process</div>
+                <div class="font-medium">{{ props.policy?.processing_config?.auto_process ? "Yes" : "No" }}</div>
+              </div>
+            </div>
+
+            <div class="grid grid-cols-2 gap-x-3 gap-y-2 text-xs">
+              <div class="text-muted">Created</div>
+              <div class="font-medium">{{ formatDate(props.policy?.created_at) }}</div>
+              <div class="text-muted">Updated</div>
+              <div class="font-medium">{{ formatDate(props.policy?.updated_at) }}</div>
+            </div>
+          </template>
+        </div>
+      </template>
+    </UPopover>
+  </div>
+</template>

package/dist/runtime/components/MLUploader/PolicyPopover.vue.d.ts

@@ -0,0 +1,7 @@
+import type { ResourcePolicyResponse } from "../../index.js";
+type __VLS_Props = {
+    policy?: ResourcePolicyResponse | null;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MLUploader/Widget.d.vue.ts

@@ -0,0 +1,44 @@
+type __VLS_Props = {
+    resourceType: string;
+    collectionName?: string | null;
+    chunkUploader?: Record<string, any> | string;
+    titleText?: string;
+    hintText?: string;
+    clickText?: string;
+    ariaLabelText?: string;
+    emptyStateIconText?: string;
+    policyErrorText?: string;
+    policyLoadingText?: string;
+    uploadErrorText?: string;
+    singleFileErrorText?: string;
+    fileTypeErrorText?: string;
+    fileTooLargeText?: string;
+    fileTooSmallText?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    reset: () => void;
+    isBusy: () => boolean;
+}, {}, {}, {}, 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;
+}>, {
+    fileTypeErrorText: string;
+    fileTooLargeText: string;
+    fileTooSmallText: string;
+    titleText: string;
+    hintText: string;
+    clickText: string;
+    ariaLabelText: string;
+    emptyStateIconText: string;
+    policyErrorText: string;
+    policyLoadingText: string;
+    uploadErrorText: string;
+    singleFileErrorText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;