@morscherlab/mint-sdk 1.2.0-beta.8 → 1.2.0

package/src/components/internal/FileBrowserDialogInternal.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'
+import type { ModalSize } from '../../types'
+import { useFocusTrap } from '../../composables/useFocusTrap'
+import IconButton from '../IconButton.vue'
+
+const props = defineProps<{ open: boolean; label: string; size: ModalSize; variant?: 'picker' }>()
+const emit = defineEmits<{ close: [] }>()
+const containerRef = shallowRef<HTMLElement | null>(null)
+const active = shallowRef(false)
+useFocusTrap({ containerRef, active })
+
+// Activate after mounting so an initially open picker traps focus too.
+onMounted(() => {
+  active.value = props.open
+})
+watch(
+  () => props.open,
+  (open) => {
+    active.value = open
+  },
+)
+watch(
+  active,
+  (open, _, onCleanup) => {
+    if (!open) return
+    const overflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    onCleanup(() => {
+      document.body.style.overflow = overflow
+    })
+  },
+  { flush: 'sync' },
+)
+onBeforeUnmount(() => {
+  active.value = false
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="open" class="mint-file-browser-overlay">
+      <section
+        ref="containerRef"
+        class="mint-file-browser-dialog"
+        :class="[
+          `mint-file-browser-dialog--${size}`,
+          variant === 'picker' ? 'mint-picker-dialog' : '',
+        ]"
+        role="dialog"
+        aria-modal="true"
+        :aria-label="label"
+        tabindex="-1"
+        @keydown.esc.stop.prevent="emit('close')"
+      >
+        <header class="mint-file-browser-dialog__header">
+          <slot name="header" />
+          <IconButton size="sm" label="Close modal" @click="emit('close')">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              aria-hidden="true"
+            >
+              <path d="M6 6l12 12M18 6L6 18" />
+            </svg>
+          </IconButton>
+        </header>
+        <slot />
+        <footer class="mint-file-browser-dialog__footer"><slot name="footer" /></footer>
+      </section>
+    </div>
+  </Teleport>
+</template>

package/src/components/internal/FileBrowserListingInternal.vue

@@ -0,0 +1,197 @@
+<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

@@ -0,0 +1,136 @@
+<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/FilePickerPreviewInternal.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import BaseButton from '../BaseButton.vue'
+import { FILE_BROWSER_ICONS as ICON, formatBytes } from '../fileBrowserPresentation'
+import type { PickerNode, PickerExcluded, PickerSource } from '../../types/filePicker'
+import { pickerReason } from '../../composables/filePicker/validation'
+
+defineProps<{
+  totalCount?: number | null
+  node: PickerNode | null
+  source: PickerSource
+  exclusions: PickerExcluded[]
+  busy: boolean
+  error: string
+  reviewing: boolean
+}>()
+const emit = defineEmits<{ review: []; retry: [] }>()
+</script>
+<template>
+  <aside class="mint-picker__preview" aria-label="Selection preview">
+    <div class="mint-picker__preview-heading">{{ reviewing ? 'Skipped files' : 'Preview' }}</div>
+    <div v-if="reviewing" class="mint-picker__preview-content">
+      <BaseButton variant="ghost" size="sm" @click="emit('review')">Back to preview</BaseButton>
+      <div
+        v-for="item in exclusions"
+        :key="item.path"
+        class="mint-picker__exclusion"
+        :title="item.path"
+      >
+        <strong>{{ item.name }}</strong
+        ><span>{{ pickerReason(item) }}</span>
+      </div>
+    </div>
+    <div v-else-if="node" class="mint-picker__preview-content">
+      <div class="mint-picker__preview-icon">
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.7"
+          aria-hidden="true"
+        >
+          <path :d="node.kind === 'folder' ? ICON.folder : ICON.file" />
+        </svg>
+      </div>
+      <strong class="mint-picker__preview-name">{{ node.name }}</strong>
+      <dl class="mint-picker__metadata">
+        <div>
+          <dt>Location</dt>
+          <dd :title="node.parentName || node.path">{{ node.parentName || node.path }}</dd>
+        </div>
+        <div>
+          <dt>Size</dt>
+          <dd>{{ node.bytes == null ? 'Not available' : formatBytes(node.bytes) }}</dd>
+        </div>
+        <div v-if="node.kind === 'folder'">
+          <dt>Files</dt>
+          <dd>
+            {{ node.fileCount ?? 'Not counted yet'
+            }}<template v-if="totalCount != null && totalCount !== node.fileCount">
+              of {{ totalCount }}</template
+            >
+          </dd>
+        </div>
+        <div>
+          <dt>Format</dt>
+          <dd v-if="node.kind === 'file'">{{ node.format.toUpperCase() || 'Unknown' }}</dd>
+          <dd v-else>
+            <span v-for="(count, format) in node.formats" :key="format"
+              >{{ format.toUpperCase() }} ×{{ count }}<br /></span
+            ><span v-if="!node.formats">Not counted yet</span>
+          </dd>
+        </div>
+        <div>
+          <dt>Source</dt>
+          <dd>
+            {{ source === 'localFile' ? 'Local files' : 'Server' }}
+          </dd>
+        </div>
+      </dl>
+      <BaseButton
+        v-if="exclusions.length"
+        variant="ghost"
+        size="sm"
+        class="mint-picker__skipped"
+        @click="emit('review')"
+        >{{ exclusions.length }} skipped · Review</BaseButton
+      >
+      <div v-if="error" class="mint-picker__preview-error" role="alert">
+        {{ error
+        }}<BaseButton variant="secondary" size="sm" @click="emit('retry')">Try again</BaseButton>
+      </div>
+      <span v-else class="mint-picker__ready" role="status">{{
+        busy ? 'Checking selection…' : '✓ Metadata available'
+      }}</span>
+    </div>
+    <div v-else class="mint-picker__preview-empty">
+      Select a file or folder to preview its details.
+    </div>
+  </aside>
+</template>