@morscherlab/mint-sdk 1.2.10 → 1.3.0-beta.10

package/src/components/internal/FileBrowserListingInternal.vue

@@ -1,197 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { FileEntry, FileSelection } from '../../types/fileBrowserTypes'
-import {
-  FILE_BROWSER_ICONS as ICON,
-  formatCount,
-  formatSize,
-  entryType,
-} from '../fileBrowserPresentation'
-import EmptyState from '../EmptyState.vue'
-import BaseButton from '../BaseButton.vue'
-import IconButton from '../IconButton.vue'
-import Skeleton from '../Skeleton.vue'
-const props = defineProps<{
-  mountId: string
-  entries: FileEntry[]
-  selected: FileSelection[]
-  loading: boolean
-  error?: string | null
-  dimNonMatching: boolean
-  totalCount: number | null
-  matchCount: number | null
-  truncated: boolean
-  hasMounts: boolean
-  hasAvailableMounts: boolean
-  search: string
-}>()
-const emit = defineEmits<{ toggle: [entry: FileEntry]; open: [entry: FileEntry]; refresh: [] }>()
-const emptyTitle = computed(() =>
-  !props.hasMounts
-    ? 'No server mounts configured'
-    : !props.hasAvailableMounts
-      ? 'Server mounts are offline'
-      : props.search
-        ? 'No matching files or folders'
-        : 'This folder is empty',
-)
-const emptyDescription = computed(() =>
-  !props.hasMounts
-    ? 'Ask your administrator to configure a read-only data mount.'
-    : !props.hasAvailableMounts
-      ? 'Refresh when the data mount is available again.'
-      : props.search
-        ? 'Try a different search or clear the search field.'
-        : 'Choose another folder from the mount list or breadcrumbs.',
-)
-function isSelected(entry: FileEntry) {
-  return props.selected.some((item) => item.mount_id === props.mountId && item.path === entry.path)
-}
-function isDimmed(entry: FileEntry) {
-  return props.dimNonMatching && entry.matches_type_rules === false
-}
-function entryIcon(entry: FileEntry) {
-  return entry.kind === 'directory' ? ICON.folder : ICON.file
-}
-function handleRowClick(entry: FileEntry) {
-  if (!props.loading && !props.error && props.mountId && entry.kind === 'directory')
-    emit('open', entry)
-}
-function toggleEntry(entry: FileEntry) {
-  if (!props.loading && !props.error && props.mountId) emit('toggle', entry)
-}
-function folderNote(entry: FileEntry) {
-  if (entry.kind !== 'directory' || !isSelected(entry)) return ''
-  return entry.child_count == null
-    ? 'whole folder'
-    : `whole folder, ${entry.child_count} item${entry.child_count === 1 ? '' : 's'}`
-}
-const statusLine = computed(() => {
-  if (props.loading) return 'Loading folder…'
-  if (props.error || !props.mountId) return ''
-  const total = props.totalCount ?? props.entries.length
-  const parts = [`${formatCount(total)} item${total === 1 ? '' : 's'}`]
-  if (props.entries.length !== total) parts.push(`${formatCount(props.entries.length)} shown`)
-  if (props.matchCount !== null && props.matchCount !== total)
-    parts.push(`${formatCount(props.matchCount)} match the type rules`)
-  if (props.truncated) parts.push('listing capped')
-  return parts.join(' · ')
-})
-</script>
-<template>
-  <div class="mint-file-browser__listing" :aria-busy="loading">
-    <div class="mint-file-browser__head">
-      <span class="mint-file-browser__col-check" />
-      <span class="mint-file-browser__col-icon" />
-      <span class="mint-file-browser__col-name">Name</span>
-      <span class="mint-file-browser__col-size">Size</span>
-      <span class="mint-file-browser__col-type">Type</span>
-      <span class="mint-file-browser__col-open" />
-    </div>
-
-    <div v-if="loading" class="mint-file-browser__skeleton">
-      <div v-for="n in 6" :key="n" class="mint-file-browser__skeleton-row">
-        <Skeleton width="60%" height="14px" />
-        <Skeleton width="60px" height="10px" />
-      </div>
-    </div>
-
-    <div v-else-if="error" class="mint-file-browser__error" role="alert">
-      <span>{{ error }}</span>
-      <BaseButton
-        variant="secondary"
-        size="sm"
-        class="mint-file-browser__retry"
-        aria-label="Retry folder listing"
-        @click="emit('refresh')"
-      >
-        Try again
-      </BaseButton>
-    </div>
-
-    <EmptyState
-      v-else-if="!entries.length"
-      :title="emptyTitle"
-      :description="emptyDescription"
-      size="sm"
-    />
-
-    <div v-else class="mint-file-browser__rows">
-      <div
-        v-for="entry in entries"
-        :key="entry.path"
-        class="mint-file-browser__row"
-        :class="{
-          'mint-file-browser__row--selected': isSelected(entry),
-          'mint-file-browser__row--dimmed': isDimmed(entry),
-          'mint-file-browser__row--dir': entry.kind === 'directory',
-        }"
-        @click="handleRowClick(entry)"
-      >
-        <input
-          class="mint-file-browser__checkbox"
-          type="checkbox"
-          :checked="isSelected(entry)"
-          :title="entry.kind === 'directory' ? 'Select the whole folder' : 'Select this file'"
-          :aria-label="
-            entry.kind === 'directory'
-              ? `Select the whole ${entry.name} folder`
-              : `Select ${entry.name}`
-          "
-          @click.stop
-          @change="toggleEntry(entry)"
-        />
-        <span
-          class="mint-file-browser__row-icon"
-          :class="`mint-file-browser__row-icon--${entry.kind}`"
-        >
-          <svg
-            class="mint-file-browser__icon"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.8"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path :d="entryIcon(entry)" />
-          </svg>
-        </span>
-        <span class="mint-file-browser__name-cell">
-          <span class="mint-file-browser__name" :title="entry.name">{{ entry.name }}</span>
-          <span v-if="folderNote(entry)" class="mint-file-browser__note-pill">Whole folder</span>
-        </span>
-        <span class="mint-file-browser__size">{{ formatSize(entry) }}</span>
-        <span class="mint-file-browser__type">{{ entryType(entry) }}</span>
-        <!-- The chevron is the keyboard route into a folder: the row
-                   itself is a div, so this button is what Tab can reach. -->
-        <IconButton
-          v-if="entry.kind === 'directory'"
-          size="sm"
-          class="mint-file-browser__open"
-          :label="`Open ${entry.name}`"
-          @click.stop="handleRowClick(entry)"
-        >
-          <svg
-            class="mint-file-browser__icon"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="M9 6l6 6-6 6" />
-          </svg>
-        </IconButton>
-        <span v-else class="mint-file-browser__open" aria-hidden="true" />
-      </div>
-    </div>
-
-    <div class="mint-file-browser__status" role="status" aria-live="polite">
-      <span>{{ statusLine }}</span>
-      <div class="mint-file-browser__status-spacer" />
-      <span class="mint-file-browser__legend">Read-only · Select paths, not copies</span>
-    </div>
-  </div>
-</template>

package/src/components/internal/FileBrowserToolbarInternal.vue

@@ -1,136 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import BaseButton from '../BaseButton.vue'
-import BaseInput from '../BaseInput.vue'
-import IconButton from '../IconButton.vue'
-import type {
-  FileBrowserSortKey,
-  FilePathCrumb,
-  FileBrowserLocation,
-} from '../../types/fileBrowserTypes'
-const props = defineProps<{
-  mountId: string
-  path: string
-  parent: string | null
-  breadcrumbs: FilePathCrumb[]
-  search: string
-  sort: FileBrowserSortKey
-  typeRules: string[]
-  loading: boolean
-  error?: string | null
-}>()
-const emit = defineEmits<{
-  navigate: [location: FileBrowserLocation]
-  selectFolder: [location: FileBrowserLocation]
-  'update:search': [value: string]
-  'update:sort': [value: FileBrowserSortKey]
-  refresh: []
-}>()
-const typeRuleLabel = computed(() => props.typeRules.join(' '))
-function handleBack() {
-  if (props.parent !== null && !props.loading && !props.error)
-    emit('navigate', { mount_id: props.mountId, path: props.parent })
-}
-function handleCrumb(crumb: FilePathCrumb) {
-  emit('navigate', { mount_id: props.mountId, path: crumb.path })
-}
-function cycleSort() {
-  const order: FileBrowserSortKey[] = ['name', 'size', 'modified']
-  emit('update:sort', order[(order.indexOf(props.sort) + 1) % order.length]!)
-}
-</script>
-<template>
-  <div class="mint-file-browser__toolbar">
-    <div class="mint-file-browser__pathbar">
-      <IconButton
-        size="sm"
-        class="mint-file-browser__back"
-        label="Go to parent folder"
-        :disabled="parent === null || loading || !!error"
-        @click="handleBack"
-      >
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          aria-hidden="true"
-        >
-          <path d="M12 19V5m-6 6 6-6 6 6" />
-        </svg>
-      </IconButton>
-      <nav class="mint-file-browser__crumbs" aria-label="Breadcrumb">
-        <template v-for="(crumb, index) in breadcrumbs" :key="crumb.path">
-          <span v-if="index" class="mint-file-browser__crumb-sep" aria-hidden="true">/</span>
-          <BaseButton
-            variant="ghost"
-            size="sm"
-            class="mint-file-browser__crumb"
-            :class="{ 'mint-file-browser__crumb--current': index === breadcrumbs.length - 1 }"
-            :aria-current="index === breadcrumbs.length - 1 ? 'location' : undefined"
-            @click="handleCrumb(crumb)"
-            >{{ crumb.label }}</BaseButton
-          >
-        </template>
-        <span v-if="!breadcrumbs.length" class="mint-file-browser__selection-hint">{{
-          path || 'Choose a location'
-        }}</span>
-      </nav>
-      <IconButton
-        size="sm"
-        label="Refresh folder listing"
-        :disabled="loading"
-        @click="emit('refresh')"
-      >
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          aria-hidden="true"
-        >
-          <path d="M20 7v5h-5M4 17v-5h5M6 8a7 7 0 0 1 12-2l2 3M4 15l2 3a7 7 0 0 0 12-2" />
-        </svg>
-      </IconButton>
-    </div>
-    <div class="mint-file-browser__tools">
-      <BaseInput
-        :model-value="search"
-        type="search"
-        size="sm"
-        class="mint-file-browser__search"
-        placeholder="Search this folder…"
-        aria-label="Search this folder"
-        @update:model-value="emit('update:search', String($event ?? ''))"
-      />
-      <span v-if="typeRuleLabel" class="mint-file-browser__rules" title="Matching file types">{{
-        typeRuleLabel
-      }}</span>
-      <IconButton
-        size="sm"
-        class="mint-file-browser__sort"
-        :label="`Sorted by ${sort}. Click to change.`"
-        @click="cycleSort"
-      >
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          aria-hidden="true"
-        >
-          <path d="M4 6h10M4 12h16M4 18h7" />
-        </svg>
-      </IconButton>
-      <BaseButton
-        variant="secondary"
-        size="sm"
-        class="mint-file-browser__select-folder"
-        :title="`Select ${path || 'this folder'} itself as the input`"
-        :disabled="!mountId || loading || !!error"
-        @click="emit('selectFolder', { mount_id: mountId, path })"
-        >Select this folder</BaseButton
-      >
-    </div>
-  </div>
-</template>

package/src/components/internal/FilePickerTreeInternal.vue

@@ -1,238 +0,0 @@
-<script setup lang="ts">
-import { computed, nextTick, ref } from 'vue'
-import IconButton from '../IconButton.vue'
-import BaseButton from '../BaseButton.vue'
-import Skeleton from '../Skeleton.vue'
-import { FILE_BROWSER_ICONS as ICON, formatBytes } from '../fileBrowserPresentation'
-import type { PickerNode, PickerTreeRow, PickerSelectionMode } from '../../types/filePicker'
-
-const props = defineProps<{
-  emptyTitle?: string
-  rows: PickerTreeRow[]
-  loading: boolean
-  error: string
-  query: string
-  mode: PickerSelectionMode
-  selected: (node: PickerNode) => boolean
-  reason: (node: PickerNode) => string
-  progress: (node: PickerNode) => string
-  focusPath: string
-}>()
-const emit = defineEmits<{
-  select: [node: PickerNode, event: MouseEvent | KeyboardEvent]
-  enter: [node: PickerNode]
-  expand: [node: PickerNode]
-  up: []
-  retry: []
-  parent: [node: PickerNode]
-}>()
-const list = ref<HTMLElement | null>(null)
-const focusablePath = computed(() => {
-  const available = props.rows.filter((row) => !props.reason(row.node))
-  return (
-    available.find((row) => row.node.path === props.focusPath)?.node.path ?? available[0]?.node.path
-  )
-})
-function focusRow(path: string) {
-  nextTick(() => {
-    const target = [...(list.value?.querySelectorAll<HTMLElement>('[role="treeitem"]') ?? [])].find(
-      (el) => el.dataset.path === path,
-    )
-    target?.focus()
-    target?.scrollIntoView({ block: 'nearest' })
-  })
-}
-function keydown(event: KeyboardEvent, row: PickerTreeRow) {
-  if (props.reason(row.node)) return
-  const available = props.rows.filter((item) => !props.reason(item.node))
-  const index = available.findIndex((item) => item.node.path === row.node.path)
-  if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
-    event.preventDefault()
-    const target =
-      event.key === 'Home'
-        ? available[0]
-        : event.key === 'End'
-          ? available[available.length - 1]
-          : available[
-              Math.max(
-                0,
-                Math.min(available.length - 1, index + (event.key === 'ArrowDown' ? 1 : -1)),
-              )
-            ]
-    if (target) {
-      emit('select', target.node, event)
-      focusRow(target.node.path)
-    }
-  } else if (event.key === 'ArrowRight') {
-    event.preventDefault()
-    if (row.node.kind === 'folder' && !row.expanded) emit('expand', row.node)
-    else if (row.expanded) {
-      const next = available[index + 1]
-      if (next && next.depth > row.depth) {
-        emit('select', next.node, event)
-        focusRow(next.node.path)
-      }
-    }
-  } else if (event.key === 'ArrowLeft') {
-    event.preventDefault()
-    if (row.expanded) emit('expand', row.node)
-    else {
-      const parent = props.rows
-        .slice(0, props.rows.indexOf(row))
-        .reverse()
-        .find((item) => item.depth < row.depth)
-      if (parent) {
-        emit('select', parent.node, event)
-        focusRow(parent.node.path)
-      } else emit('up')
-    }
-  } else if (event.key === 'Enter') {
-    event.preventDefault()
-    emit('enter', row.node)
-  } else if (event.key === ' ') {
-    event.preventDefault()
-    emit('select', row.node, event)
-  }
-}
-function parts(name: string) {
-  const index = props.query ? name.toLowerCase().indexOf(props.query.toLowerCase()) : -1
-  return index < 0
-    ? [name, '', '']
-    : [
-        name.slice(0, index),
-        name.slice(index, index + props.query.length),
-        name.slice(index + props.query.length),
-      ]
-}
-</script>
-
-<template>
-  <div
-    ref="list"
-    class="mint-picker__tree"
-    role="tree"
-    aria-label="Folders and files"
-    :aria-multiselectable="mode === 'multi-file' || mode === 'folder+files'"
-    :aria-busy="loading"
-  >
-    <div v-if="loading" class="mint-picker__skeleton">
-      <Skeleton v-for="n in 6" :key="n" width="100%" height="36px" />
-    </div>
-    <div v-else-if="error" role="alert" class="mint-picker__empty">
-      <span>{{ error }}</span
-      ><BaseButton variant="secondary" size="sm" @click="emit('retry')">Try again</BaseButton>
-    </div>
-    <div v-else-if="!rows.length" class="mint-picker__empty" role="status">
-      <strong>{{
-        query ? 'No matching folders or files' : emptyTitle || 'No readable files'
-      }}</strong>
-      <span>{{
-        query
-          ? 'Try a different search or include subfolders.'
-          : 'Choose a location, go up a level, or choose local files.'
-      }}</span>
-    </div>
-    <template v-else v-for="row in rows" :key="row.node.path">
-      <div
-        role="treeitem"
-        :data-path="row.node.path"
-        :aria-level="row.depth + 1"
-        :aria-selected="selected(row.node)"
-        :aria-disabled="!!reason(row.node)"
-        :aria-expanded="row.node.kind === 'folder' && !reason(row.node) ? row.expanded : undefined"
-        :tabindex="!reason(row.node) && row.node.path === focusablePath ? 0 : -1"
-        class="mint-picker__row"
-        :class="{
-          'mint-picker__row--selected': selected(row.node),
-          'mint-picker__row--unreadable': !!reason(row.node),
-          'mint-picker__row--child': row.depth > 0,
-        }"
-        :style="{ '--picker-depth': row.depth }"
-        :title="reason(row.node) || row.node.name"
-        @click="!reason(row.node) && emit('select', row.node, $event)"
-        @dblclick="!reason(row.node) && emit('enter', row.node)"
-        @keydown="keydown($event, row)"
-      >
-        <IconButton
-          v-if="row.node.kind === 'folder' && row.node.hasChildren !== false && !reason(row.node)"
-          size="sm"
-          class="mint-picker__disclosure"
-          :label="`${row.expanded ? 'Collapse' : 'Expand'} ${row.node.name}`"
-          tabindex="-1"
-          :loading="row.loading"
-          @click.stop="emit('expand', row.node)"
-          @dblclick.stop
-        >
-          <svg
-            viewBox="0 0 16 16"
-            fill="currentColor"
-            aria-hidden="true"
-            :class="{ 'mint-picker__chevron--open': row.expanded }"
-          >
-            <path d="m6 3 5 5-5 5z" />
-          </svg>
-        </IconButton>
-        <span v-else class="mint-picker__disclosure-spacer" />
-        <svg
-          class="mint-picker__node-icon"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="1.7"
-          aria-hidden="true"
-        >
-          <path :d="row.node.kind === 'folder' ? ICON.folder : ICON.file" />
-        </svg>
-        <span class="mint-picker__row-name">
-          <span class="mint-picker__name"
-            >{{ parts(row.node.name)[0]
-            }}<mark v-if="parts(row.node.name)[1]">{{ parts(row.node.name)[1] }}</mark
-            >{{ parts(row.node.name)[2] }}</span
-          >
-          <span v-if="row.node.kind === 'folder' && row.node.formats" class="mint-picker__formats">
-            <span v-for="(count, format) in row.node.formats" :key="format"
-              >{{ format.toUpperCase() }} ×{{ count }}</span
-            >
-          </span>
-          <span v-else-if="query && row.node.parentName" class="mint-picker__parent-name">{{
-            row.node.parentName
-          }}</span>
-        </span>
-        <span class="mint-picker__row-meta">
-          <span
-            v-if="row.node.kind === 'folder' && progress(row.node)"
-            :class="{
-              'mint-picker__partial':
-                selected(row.node) &&
-                progress(row.node).split(' / ')[0] !== String(row.node.fileCount),
-            }"
-            >{{ progress(row.node) }}</span
-          >
-          <span v-if="!reason(row.node) && row.node.bytes != null">{{
-            formatBytes(row.node.bytes)
-          }}</span>
-          <span v-if="reason(row.node)" aria-label="Unavailable">ⓘ</span>
-        </span>
-        <BaseButton
-          v-if="
-            query &&
-            mode === 'folder' &&
-            row.node.kind === 'file' &&
-            row.node.parentPath &&
-            !reason(row.node)
-          "
-          variant="ghost"
-          size="sm"
-          @click.stop="emit('parent', row.node)"
-          >Select its folder</BaseButton
-        >
-      </div>
-      <div v-if="row.error" class="mint-picker__branch-error" role="alert">
-        {{ row.error
-        }}<BaseButton variant="ghost" size="sm" @click="emit('expand', row.node)"
-          >Close branch</BaseButton
-        >
-      </div>
-    </template>
-  </div>
-</template>