@morscherlab/mint-sdk 1.2.0-beta.9 → 1.2.1

package/src/components/internal/FilePickerTreeInternal.vue

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

package/src/components/internal/FormFieldRendererInternal.vue

@@ -20,6 +20,23 @@ const isChoiceField = computed(() =>
 )
 
 const componentProps = computed<Record<string, unknown>>(() => {
+  if (props.field.type === 'multiselect') {
+    const values = Array.isArray(props.resolvedProps.modelValue) ? props.resolvedProps.modelValue : []
+    return { ...props.resolvedProps, modelValue: values }
+  }
+  if (props.field.type === 'tags') {
+    const values = Array.isArray(props.resolvedProps.modelValue) ? props.resolvedProps.modelValue : []
+    const onUpdate = props.resolvedProps['onUpdate:modelValue'] as ((value: unknown) => void) | undefined
+    // TagsInput edits strings; numeric fields are parsed back on the way out so
+    // nullable or numeric form data is displayed without being replaced.
+    return {
+      ...props.resolvedProps,
+      modelValue: values.map(String),
+      'onUpdate:modelValue': (next: unknown) => onUpdate?.(
+        props.field.itemType === 'number' && Array.isArray(next) ? next.map(Number) : next,
+      ),
+    }
+  }
   if (!isChoiceField.value) return props.resolvedProps
 
   return {

package/src/components/internal/WorkspaceSidebarInternal.vue

@@ -34,11 +34,10 @@ defineSlots<{
     :title="sidebar.title"
     :subtitle="sidebar.subtitle"
     :badge="sidebar.badge"
-    :variant="sidebar.variant"
     :panels="sidebar.panels"
     :active-view="sidebar.activeView"
     :floating="sidebar.floating"
-    :dense="sidebar.dense"
+    :density="sidebar.dense ? 'compact' : 'comfortable'"
     :width="sidebar.width"
     :side="sidebar.side"
     :forms="sidebar.forms"

package/src/composables/filePicker/localFiles.ts

@@ -0,0 +1,65 @@
+import type { PickerAdapter, PickerNode } from '../../types/filePicker'
+import { pickerFormat } from './validation'
+
+/** Construct metadata only: no FileReader, arrayBuffer or upload. */
+export function localFilesAdapter(
+  files: File[],
+  relativePaths?: (string | undefined)[],
+): PickerAdapter {
+  const nodes = new Map<string, PickerNode>()
+  for (const [index, file] of files.entries()) {
+    const relative = relativePaths?.[index] || file.webkitRelativePath || file.name
+    const parts = relative.split('/')
+    let parent: string | null = null
+    for (let i = 0; i < parts.length - 1; i++) {
+      const path = parts.slice(0, i + 1).join('/')
+      if (!nodes.has(path))
+        nodes.set(path, {
+          kind: 'folder', name: parts[i]!, path, parentPath: parent,
+          fileCount: 0, bytes: 0, formats: {},
+        })
+      parent = path
+    }
+    // Plain file picks can have equal names; preserve both File objects.
+    let path = relative
+    for (let n = 2; nodes.has(path); n++) path = `${relative} (${n})`
+    nodes.set(path, {
+      kind: 'file',
+      name: file.name,
+      path,
+      parentPath: parent,
+      bytes: file.size,
+      format: pickerFormat(file.name),
+      file,
+    })
+  }
+  const children = new Map<string, PickerNode[]>()
+  for (const node of nodes.values()) {
+    const parent = node.parentPath ?? ''
+    const siblings = children.get(parent)
+    if (siblings) siblings.push(node)
+    else children.set(parent, [node])
+    if (node.kind !== 'file') continue
+    // Each file contributes once to its ancestors, rather than scanning all
+    // files again for every folder in the selection.
+    for (let slash = node.path.indexOf('/'); slash >= 0; slash = node.path.indexOf('/', slash + 1)) {
+      const folder = nodes.get(node.path.slice(0, slash))
+      if (folder?.kind !== 'folder') continue
+      folder.fileCount = (folder.fileCount ?? 0) + 1
+      folder.bytes = (folder.bytes ?? 0) + (node.bytes ?? 0)
+      folder.formats![node.format] = (folder.formats![node.format] ?? 0) + 1
+    }
+  }
+  const list = (path: string) => [...(children.get(path) ?? [])]
+  return {
+    listRoot: async () => list(''),
+    listChildren: async (path) => list(path),
+    search: async (query, scope) =>
+      [...nodes.values()].filter((node) => {
+        const inScope = scope.recursive
+          ? !scope.path || node.path.startsWith(`${scope.path}/`)
+          : (node.parentPath ?? '') === scope.path
+        return inScope && node.name.toLowerCase().includes(query.toLowerCase())
+      }),
+  }
+}

package/src/composables/filePicker/usePickerNavigation.ts

@@ -0,0 +1,220 @@
+import { computed, onScopeDispose, ref, shallowRef } from 'vue'
+import type {
+  PickerAdapter,
+  PickerNode,
+  PickerRequest,
+  PickerTreeRow,
+} from '../../types/filePicker'
+
+export function usePickerNavigation(
+  adapter: () => PickerAdapter,
+  request: () => PickerRequest,
+  systemFilter: (node: PickerNode) => boolean = () => true,
+) {
+  const path = shallowRef('')
+  const trail = ref<{ path: string; label: string }[]>([])
+  const entries = shallowRef<PickerNode[]>([])
+  const nodes = ref(new Map<string, PickerNode>())
+  const children = shallowRef(new Map<string, PickerNode[]>())
+  const expanded = ref(new Set<string>())
+  const expanding = ref(new Set<string>())
+  const expansionErrors = ref(new Map<string, string>())
+  const loading = shallowRef(false)
+  const error = shallowRef('')
+  let epoch = 0
+  let navigation = 0
+  let controller: AbortController | undefined
+  const pending = new Map<string, Promise<PickerNode[]>>()
+  const childControllers = new Set<AbortController>()
+
+  function isAllowed(node: PickerNode): boolean {
+    const seen = new Set<string>()
+    let current: PickerNode | undefined = node
+    while (current && !seen.has(current.path)) {
+      if (!systemFilter(current)) return false
+      seen.add(current.path)
+      current = current.parentPath ? nodes.value.get(current.parentPath) : undefined
+    }
+    return true
+  }
+
+  function register(items: PickerNode[], parent?: string) {
+    for (const item of items)
+      nodes.value.set(item.path, {
+        ...item,
+        parentPath:
+          item.parentPath !== undefined
+            ? item.parentPath
+            : parent !== undefined
+              ? parent || null
+              : (nodes.value.get(item.path)?.parentPath ?? null),
+      })
+  }
+  function invalidate() {
+    ++epoch
+    ++navigation
+    controller?.abort()
+    childControllers.forEach((item) => item.abort())
+    childControllers.clear()
+    pending.clear()
+    children.value = new Map()
+    expanding.value.clear()
+    expansionErrors.value.clear()
+  }
+  function clear() {
+    invalidate()
+    nodes.value.clear()
+    expanded.value.clear()
+    expanding.value.clear()
+    expansionErrors.value.clear()
+    entries.value = []
+    loading.value = false
+    error.value = ''
+  }
+  async function loadChildren(
+    folder: string,
+    ancestors: string[] = [],
+    refresh = false,
+  ): Promise<PickerNode[]> {
+    if (ancestors.includes(folder)) throw new Error('The adapter returned a circular folder tree.')
+    const cached = children.value.get(folder)
+    if (cached) return cached
+    const existing = pending.get(folder)
+    if (existing) return existing
+    const token = epoch
+    const abort = new AbortController()
+    childControllers.add(abort)
+    const task = adapter()
+      .listChildren(folder, { ...request(), ...(refresh && { refresh }), signal: abort.signal })
+      .then((items) => {
+        if (token !== epoch) throw new DOMException('Cancelled', 'AbortError')
+        const retained = new Set(items.map((item) => item.path))
+        function remove(path: string, seen = new Set<string>()) {
+          if (seen.has(path) || path === folder) return
+          seen.add(path)
+          for (const node of nodes.value.values())
+            if (node.parentPath === path) remove(node.path, seen)
+          nodes.value.delete(path)
+          children.value.delete(path)
+        }
+        for (const node of nodes.value.values())
+          if (node.parentPath === folder && !retained.has(node.path)) remove(node.path)
+        register(items, folder)
+        children.value = new Map(children.value).set(folder, items)
+        return items
+      })
+      .finally(() => {
+        childControllers.delete(abort)
+        if (token === epoch) pending.delete(folder)
+      })
+    pending.set(folder, task)
+    return task
+  }
+  async function load(query = '', recursive = false, refresh = false) {
+    const token = ++navigation
+    controller?.abort()
+    controller = new AbortController()
+    const options = { ...request(), ...(refresh && { refresh }), signal: controller.signal }
+    loading.value = true
+    error.value = ''
+    entries.value = []
+    try {
+      const items = query.trim()
+        ? await adapter().search(query.trim(), { path: path.value, recursive }, options)
+        : path.value
+          ? await loadChildren(path.value, [], refresh)
+          : await adapter().listRoot(options)
+      if (token !== navigation) return
+      register(items, query.trim() ? undefined : path.value)
+      entries.value = items
+    } catch (cause) {
+      if (token === navigation)
+        error.value = cause instanceof Error ? cause.message : 'Could not read this location.'
+    } finally {
+      if (token === navigation) loading.value = false
+    }
+  }
+  async function expand(node: PickerNode) {
+    if (node.kind !== 'folder' || node.unavailableReason || !isAllowed(node)) return
+    if (expanded.value.has(node.path)) {
+      expanded.value.delete(node.path)
+      return
+    }
+    expanded.value.add(node.path)
+    expanding.value.add(node.path)
+    expansionErrors.value.delete(node.path)
+    const token = epoch
+    try {
+      await loadChildren(node.path)
+    } catch (cause) {
+      if (token === epoch)
+        expansionErrors.value.set(
+          node.path,
+          cause instanceof Error ? cause.message : 'Could not read this folder.',
+        )
+    } finally {
+      if (token === epoch) expanding.value.delete(node.path)
+    }
+  }
+  function enter(node: PickerNode) {
+    if (node.kind !== 'folder' || node.unavailableReason || !isAllowed(node)) return
+    const index = trail.value.findIndex((crumb) => crumb.path === node.path)
+    trail.value =
+      index >= 0
+        ? trail.value.slice(0, index + 1)
+        : [...trail.value, { path: node.path, label: node.name }]
+    path.value = node.path
+  }
+  function up(target?: string) {
+    const index =
+      target !== undefined
+        ? trail.value.findIndex((crumb) => crumb.path === target)
+        : trail.value.length - 2
+    trail.value = index < 0 ? [] : trail.value.slice(0, index + 1)
+    path.value = trail.value[trail.value.length - 1]?.path ?? ''
+  }
+  const rows = computed(() => {
+    const result: PickerTreeRow[] = []
+    function visit(items: PickerNode[], depth: number, ancestors: Set<string>) {
+      for (const item of items) {
+        if (ancestors.has(item.path) || depth > 30) continue
+        const node = nodes.value.get(item.path) ?? item
+        if (!isAllowed(node)) continue
+        result.push({
+          node,
+          depth,
+          expanded: expanded.value.has(item.path),
+          loading: expanding.value.has(item.path),
+          error: expansionErrors.value.get(item.path),
+        })
+        if (expanded.value.has(item.path))
+          visit(children.value.get(item.path) ?? [], depth + 1, new Set([...ancestors, item.path]))
+      }
+    }
+    visit(entries.value, 0, new Set())
+    return result
+  })
+  onScopeDispose(clear)
+  return {
+    path,
+    trail,
+    entries,
+    nodes,
+    children,
+    expanded,
+    expanding,
+    expansionErrors,
+    loading,
+    error,
+    rows,
+    isAllowed,
+    clear,
+    invalidate,
+    register,
+    loadChildren,
+    load,
+    expand,
+    enter,
+    up,
+  }
+}