@useupup/svelte 3.3.0

package/dist/components/SourceSelector.svelte

@@ -0,0 +1,292 @@
+<script lang="ts">
+  import { formatUiMessage as t, pluralUiMessage as plural } from '@useupup/core'
+import { cn } from '@useupup/core/internal'
+  import {
+    useUploaderFiles,
+    useUploaderI18n,
+    useUploaderOptions,
+    useUploaderRuntime,
+    useUploaderTheme,
+  } from '../context/uploader-context'
+  import useSourceSelector from '../composables/useSourceSelector'
+  import Icon from './Icon.svelte'
+
+  // Regular chips fit at most 4 per row inside the max-w-[420px] grid, so up to 8
+  // sources wrap into balanced rows; 9 would wrap 4/4/1. Past this count the chips
+  // switch to the compact size, which fits 5 per row (5/4).
+  const COMPACT_SOURCE_THRESHOLD = 8
+
+  const { core, getFileInput, openFilePicker } = useUploaderRuntime()
+  const { translations: tr } = useUploaderI18n()
+  const { setFiles } = useUploaderFiles()
+  const { isDark: dark, slotOverrides: slotClasses } = useUploaderTheme()
+  const {
+    mini,
+    allowedFileTypes,
+    limit,
+    maxFileSize,
+    folderPickerButtonVisible,
+  } = useUploaderOptions()
+
+  // Idle limits caption (data-upup-slot="limits-caption"): iconified file-count
+  // and per-file size limits, plus a leading text-only type-restriction segment
+  // so no constraint the consumer configured is dropped.
+  const typeConstraint = (() => {
+    if (allowedFileTypes && allowedFileTypes !== '*/*' && allowedFileTypes !== '*') {
+      const humanized = allowedFileTypes
+        .split(',')
+        .map((s) => s.trim())
+        .map((m) => {
+          if (m.startsWith('.')) return m
+          const [type, sub] = m.split('/')
+          if (!type || !sub) return m
+          if (sub === '*') return type.charAt(0).toUpperCase() + type.slice(1) + 's'
+          return sub.toUpperCase()
+        })
+        .join(', ')
+      return humanized + ' only'
+    }
+    return null
+  })()
+  const showFilesLimit = limit > 1
+  const showSizeLimit = !!(maxFileSize?.size && maxFileSize?.unit)
+  const hasLimitsCaption = !!typeConstraint || showFilesLimit || showSizeLimit
+
+  const { chosenSources, handleSourceClick } = useSourceSelector()
+  const compact = chosenSources.length > COMPACT_SOURCE_THRESHOLD
+
+  function handleBrowseFilesClick() {
+    const el = getFileInput()
+    if (el) {
+      el.removeAttribute('webkitdirectory')
+      el.removeAttribute('directory')
+    }
+    openFilePicker()
+    core?.emit('browse-files', {})
+  }
+
+  async function handleSelectFolderClick() {
+    const fsWindow = window as Window & { showDirectoryPicker?: () => Promise<FileSystemDirectoryHandle> }
+    if (fsWindow.showDirectoryPicker) {
+      try {
+        const directoryHandle = await fsWindow.showDirectoryPicker()
+        const collectedFiles: File[] = []
+
+        type IterableDirHandle = { values(): AsyncIterableIterator<FileSystemHandle & { kind: string; getFile: () => Promise<File> }> }
+        async function getFiles(dirHandle: IterableDirHandle, path = '') {
+          for await (const entry of dirHandle.values()) {
+            const newPath = path ? `${path}/${entry.name}` : entry.name
+            if (entry.kind === 'file') {
+              const pickedFile = await entry.getFile()
+              const file = new File(
+                [await pickedFile.arrayBuffer()],
+                pickedFile.name,
+                { type: pickedFile.type, lastModified: pickedFile.lastModified },
+              )
+              try {
+                Object.defineProperty(file, 'webkitRelativePath', {
+                  value: newPath, configurable: true, writable: true,
+                })
+                Object.defineProperty(file, 'relativePath', {
+                  value: newPath, configurable: true, writable: true,
+                })
+              } catch {
+                Object.assign(file, { relativePath: newPath })
+              }
+              collectedFiles.push(file)
+            } else if (entry.kind === 'directory') {
+              await getFiles(entry as unknown as IterableDirHandle, newPath)
+            }
+          }
+        }
+        await getFiles(directoryHandle as unknown as IterableDirHandle)
+        if (collectedFiles.length > 0) {
+          setFiles(collectedFiles)
+          core?.emit('folder-select', { count: collectedFiles.length })
+          const el = getFileInput()
+          if (el) el.value = ''
+        }
+      } catch (error) {
+        const name = error instanceof DOMException ? error.name : ''
+        if (name !== 'AbortError') throw error
+      }
+    } else {
+      const el = getFileInput()
+      if (el) {
+        el.setAttribute('webkitdirectory', 'true')
+        el.setAttribute('directory', 'true')
+      }
+      openFilePicker()
+      core?.emit('folder-select', { count: 0 })
+    }
+  }
+</script>
+
+<div
+  data-testid="upup-source-selector"
+  data-upup-slot="source-selector"
+  class="upup-animate-fx-view upup-relative upup-flex upup-h-full upup-flex-col upup-items-center upup-justify-center upup-gap-6 upup-rounded-lg upup-px-4 upup-py-6"
+>
+  {#if !mini}
+    <div
+      class={cn(
+        'upup-flex upup-flex-wrap upup-items-center upup-justify-center upup-gap-x-1.5 upup-gap-y-1 upup-px-2 upup-text-center upup-text-base upup-font-medium md:upup-text-lg',
+        {
+          'upup-text-[#242634]': !$dark,
+          'upup-text-[#e2e8f0] dark:upup-text-[#e2e8f0]': $dark,
+        },
+      )}
+    >
+      <span>{tr.dropFilesHere}</span>
+      <button
+        type="button"
+        data-testid="upup-browse-files"
+        class={cn(
+          'upup-cursor-pointer upup-rounded upup-font-semibold focus-visible:upup-outline-none focus-visible:upup-ring-2 focus-visible:upup-ring-[#38bdf8]',
+          {
+            'upup-text-[#0284c7]': !$dark,
+            'upup-text-[#38bdf8] dark:upup-text-[#38bdf8]': $dark,
+          },
+        )}
+        onclick={handleBrowseFilesClick}
+      >
+        {tr.browseFiles}
+      </button>
+      {#if folderPickerButtonVisible}
+        <span>{tr.or}</span>
+        <button
+          type="button"
+          class={cn(
+            'upup-cursor-pointer upup-rounded upup-font-semibold focus-visible:upup-outline-none focus-visible:upup-ring-2 focus-visible:upup-ring-[#38bdf8]',
+            {
+              'upup-text-[#0284c7]': !$dark,
+              'upup-text-[#38bdf8] dark:upup-text-[#38bdf8]': $dark,
+            },
+          )}
+          onclick={handleSelectFolderClick}
+        >
+          {tr.selectAFolder}
+        </button>
+      {/if}
+      <span>{tr.orImportFrom}</span>
+    </div>
+    <div
+      class={cn(
+        compact
+          ? 'upup-flex upup-max-w-[420px] upup-flex-wrap upup-items-start upup-justify-center upup-gap-x-3 upup-gap-y-4'
+          : 'upup-flex upup-max-w-[420px] upup-flex-wrap upup-items-start upup-justify-center upup-gap-x-6 upup-gap-y-5',
+        $slotClasses.sourceButtonList,
+      )}
+    >
+      {#each chosenSources as { Icon: SourceIcon, id, name } (id)}
+        <button
+          type="button"
+          data-testid={`upup-source-${id}`}
+          class={cn(
+            compact
+              ? 'upup-fx-hover-lift upup-fx-press upup-fx-icon-nudge upup-group upup-flex upup-w-[62px] upup-cursor-pointer upup-flex-col upup-items-center upup-gap-[7px] upup-rounded-[12px] focus-visible:upup-outline-none focus-visible:upup-ring-2 focus-visible:upup-ring-[#38bdf8] hover:upup-shadow-none'
+              : 'upup-fx-hover-lift upup-fx-press upup-fx-icon-nudge upup-group upup-flex upup-w-[66px] upup-cursor-pointer upup-flex-col upup-items-center upup-gap-[9px] upup-rounded-[14px] focus-visible:upup-outline-none focus-visible:upup-ring-2 focus-visible:upup-ring-[#38bdf8] hover:upup-shadow-none',
+            $slotClasses.sourceButton,
+          )}
+          onclick={() => handleSourceClick(id)}
+        >
+          <span
+            class={cn(
+              compact
+                ? 'upup-flex upup-h-[42px] upup-w-[42px] upup-items-center upup-justify-center upup-rounded-[12px] upup-ring-1 upup-transition-colors'
+                : 'upup-flex upup-h-[52px] upup-w-[52px] upup-items-center upup-justify-center upup-rounded-[14px] upup-ring-1 upup-transition-colors',
+              {
+                'upup-bg-white upup-ring-black/[0.07] group-hover:upup-bg-slate-50': !$dark,
+                'upup-bg-white/[0.055] upup-ring-white/[0.06] group-hover:upup-bg-white/[0.09] dark:upup-bg-white/[0.055] dark:upup-ring-white/[0.06]': $dark,
+              },
+            )}
+          >
+            <SourceIcon
+              class={cn(
+                compact ? 'upup-h-8 upup-w-8' : 'upup-h-10 upup-w-10',
+                $slotClasses.sourceButtonIcon,
+              )}
+            />
+          </span>
+          <span
+            class={cn(
+              'upup-text-xs upup-leading-none',
+              {
+                'upup-text-[#6D6D6D]': !$dark,
+                'upup-text-[#94a3b8] dark:upup-text-[#94a3b8]': $dark,
+              },
+              $slotClasses.sourceButtonText,
+            )}
+          >
+            {name}
+          </span>
+        </button>
+      {/each}
+    </div>
+  {/if}
+
+  {#if mini}
+    <button
+      type="button"
+      onclick={handleBrowseFilesClick}
+      class="upup-flex upup-cursor-pointer upup-flex-col upup-items-center upup-justify-center upup-gap-2 upup-rounded-lg upup-p-2"
+    >
+      <Icon
+        name="upload"
+        size={32}
+        class={cn(
+          'upup-h-16 upup-w-16 md:upup-h-20 md:upup-w-20',
+          {
+            'upup-text-[#0B0B0B]': !$dark,
+            'upup-text-white dark:upup-text-white': $dark,
+          },
+        )}
+      />
+      <p
+        class={cn('px-6 upup-text-center upup-text-xs', {
+          'upup-text-[#6D6D6D] dark:upup-text-gray-400': !$dark,
+          'upup-text-gray-400 dark:upup-text-gray-500': $dark,
+        })}
+      >
+        Drag or browse to upload
+      </p>
+    </button>
+  {:else if hasLimitsCaption}
+    <div
+      data-upup-slot="limits-caption"
+      class={cn(
+        'upup-flex upup-flex-wrap upup-items-center upup-justify-center upup-gap-x-2.5 upup-gap-y-1 upup-px-3 upup-text-center upup-text-xs',
+        {
+          'upup-text-[#6D6D6D]': !$dark,
+          'upup-text-[#94a3b8] dark:upup-text-[#94a3b8]': $dark,
+        },
+      )}
+    >
+      {#if typeConstraint}
+        <span>{typeConstraint}</span>
+      {/if}
+      {#if typeConstraint && (showFilesLimit || showSizeLimit)}
+        <span aria-hidden="true">&middot;</span>
+      {/if}
+      {#if showFilesLimit}
+        <span class="upup-inline-flex upup-items-center upup-gap-1.5">
+          <span aria-hidden="true" class="upup-inline-flex">
+            <Icon name="stacked-files" class="upup-h-4 upup-w-4" />
+          </span>
+          {t(plural(tr, 'filesMax', limit), { count: limit })}
+        </span>
+      {/if}
+      {#if showFilesLimit && showSizeLimit}
+        <span aria-hidden="true">&middot;</span>
+      {/if}
+      {#if showSizeLimit}
+        <span class="upup-inline-flex upup-items-center upup-gap-1.5">
+          <span aria-hidden="true" class="upup-inline-flex">
+            <Icon name="storage" class="upup-h-4 upup-w-4" />
+          </span>
+          {t(tr.sizeEach, { size: maxFileSize?.size ?? 0, unit: maxFileSize?.unit ?? '' })}
+        </span>
+      {/if}
+    </div>
+  {/if}
+</div>

package/dist/components/SourceSelector.svelte.d.ts

@@ -0,0 +1,19 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SourceSelector: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SourceSelector = InstanceType<typeof SourceSelector>;
+export default SourceSelector;
+//# sourceMappingURL=SourceSelector.svelte.d.ts.map

package/dist/components/SourceSelector.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SourceSelector.svelte.d.ts","sourceRoot":"","sources":["../../src/components/SourceSelector.svelte.ts"],"names":[],"mappings":"AAuQA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,cAAc;;kBAA+E,CAAC;AAClF,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAC5D,eAAe,cAAc,CAAC"}

package/dist/components/SourceView.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  import {
+    useUploaderI18n,
+    useUploaderOptions,
+    useUploaderRuntime,
+    useUploaderSource,
+    useUploaderTheme,
+  } from '../context/uploader-context'
+  import { provideSourceViewHeaderExtra } from '../context/source-view-header-extra'
+  import { uploadSourceObject } from '../lib/constants'
+  import { cn } from '@useupup/core/internal'
+  import DefaultLoaderIcon from './DefaultLoaderIcon.svelte'
+
+  const { core } = useUploaderRuntime()
+  const { activeSource, setActiveSource } = useUploaderSource()
+  const { translations: tr } = useUploaderI18n()
+  const { mini } = useUploaderOptions()
+  const { isDark: dark, slotOverrides: slotClasses } = useUploaderTheme()
+
+  // Portal host for a source view's header extras (drive avatar + log out); lives
+  // left of Back. `empty:upup-hidden` keeps the flex gap from showing when no
+  // view portals anything in.
+  const headerExtraStore = provideSourceViewHeaderExtra()
+  let headerExtraHost: HTMLElement | null = $state(null)
+  $effect(() => {
+    headerExtraStore.set(headerExtraHost)
+  })
+
+  const activeComponent = $derived(
+    $activeSource ? uploadSourceObject[$activeSource]?.Component : undefined,
+  )
+  const SourceIcon = $derived(
+    $activeSource ? uploadSourceObject[$activeSource]?.Icon : undefined,
+  )
+  const sourceName = $derived.by(() => {
+    const s = $activeSource
+    const entry = s ? uploadSourceObject[s] : undefined
+    return entry ? tr[entry.nameKey] : ''
+  })
+
+  const shouldRender = $derived(
+    !!activeComponent && !mini && !!$activeSource && !!SourceIcon,
+  )
+
+  function handleCancel() {
+    core?.emit('source-view-cancel', { sourceId: $activeSource })
+    setActiveSource(undefined)
+  }
+</script>
+
+{#if shouldRender}
+  <div
+    class="upup-animate-fx-view upup-grid upup-h-full upup-w-full upup-grid-rows-[auto,1fr]"
+    data-upup-slot="source-view"
+  >
+    <!-- Transparent header on the panel gradient (no inner box): the
+         provider icon + name fill the row; "Back" returns to sources. -->
+    <div
+      class={cn(
+        'upup-flex upup-items-center upup-justify-between upup-gap-2 upup-px-3 upup-py-2 upup-text-sm upup-font-medium',
+        $dark ? 'upup-text-[#FAFAFA]' : 'upup-text-[#0f172a]',
+        $slotClasses.sourceViewHeader,
+      )}
+    >
+      <span class="upup-flex upup-items-center upup-gap-2">
+        {#if SourceIcon}
+          <SourceIcon />
+        {/if}
+        <span>{sourceName}</span>
+      </span>
+      <span class="upup-flex upup-items-center upup-gap-2.5">
+        <span
+          bind:this={headerExtraHost}
+          data-upup-slot="source-view-header-extra"
+          class="upup-flex upup-items-center upup-gap-2.5 empty:upup-hidden"
+        ></span>
+        <button
+          class={cn(
+            'upup-rounded-md upup-p-1 upup-text-[#0284c7] upup-transition-all upup-duration-300',
+            { 'upup-text-[#38bdf8] dark:upup-text-[#38bdf8]': $dark },
+            $slotClasses.sourceViewCancelButton,
+          )}
+          onclick={handleCancel}
+          type="button"
+        >
+          {tr.overlayBack}
+        </button>
+      </span>
+    </div>
+    {#if activeComponent}
+      {#await activeComponent()}
+        <div class="upup-flex upup-h-full upup-items-center upup-justify-center">
+          <DefaultLoaderIcon />
+        </div>
+      {:then mod}
+        <mod.default />
+      {/await}
+    {/if}
+  </div>
+{/if}

package/dist/components/SourceView.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const SourceView: import("svelte").Component<Record<string, never>, {}, "">;
+type SourceView = ReturnType<typeof SourceView>;
+export default SourceView;
+//# sourceMappingURL=SourceView.svelte.d.ts.map

package/dist/components/SourceView.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SourceView.svelte.d.ts","sourceRoot":"","sources":["../../src/components/SourceView.svelte.ts"],"names":[],"mappings":"AAkGA,QAAA,MAAM,UAAU,2DAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/TrashIcon.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  // Default file-delete glyph — renders the shared registry 'trash' icon (parity with
+  // React's react-icons TbTrash default). Forwards the consumer's class/size to the svg.
+  import Icon from './Icon.svelte'
+  let {
+    class: className = '',
+    size = undefined,
+  }: { class?: string; size?: number } = $props()
+</script>
+
+<Icon name="trash" class={className} {size} />

package/dist/components/TrashIcon.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    class?: string;
+    size?: number;
+};
+declare const TrashIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type TrashIcon = ReturnType<typeof TrashIcon>;
+export default TrashIcon;
+//# sourceMappingURL=TrashIcon.svelte.d.ts.map

package/dist/components/TrashIcon.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrashIcon.svelte.d.ts","sourceRoot":"","sources":["../../src/components/TrashIcon.svelte.ts"],"names":[],"mappings":"AAOC,KAAK,gBAAgB,GAAI;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAe5D,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}