@brftech/filex-core 0.1.56

package/src/components/Breadcrumb.vue

@@ -0,0 +1,282 @@
+<script setup lang="ts">
+/**
+ * Breadcrumb — adapter-aware path crumbs.
+ *
+ * Dirname arrives as `<adapter>://<rel>` (e.g. `s3-test://aa/bb`). The
+ * first crumb is ALWAYS the storage root — its label is the adapter
+ * name itself (`s3-test`) and clicking it lands you at `<adapter>://`,
+ * NOT at the first sub-folder you happened to be inside. The remaining
+ * crumbs walk down the path one segment at a time.
+ *
+ * Examples:
+ *   `s3-test://`           → [s3-test]
+ *   `s3-test://aa`         → [s3-test] › [aa]
+ *   `s3-test://aa/bb`      → [s3-test] › [aa] › [bb]
+ *
+ * `rootLabel` overrides the adapter name when the embedder wants a
+ * branded label ('Files', 'My Drive', etc). Defaults to the adapter.
+ *
+ * The ✏ button swaps the crumbs for a free-form input; Enter
+ * navigates, Escape cancels.
+ */
+import { computed, nextTick, ref } from 'vue';
+import type { LocaleCode } from '../types/ExplorerConfig';
+import { useLocale } from '../composables/useLocale';
+
+const props = defineProps<{
+  dirname: string;
+  adapter: string;
+  rootLabel: string;
+  locale: LocaleCode;
+  /**
+   * Multi-storage mode — when true the breadcrumb prepends a global
+   * "/" crumb so the user can pop all the way back to the storage
+   * picker. Storage name then occupies crumb #1 instead of #0.
+   */
+  multiStorageRoot?: boolean;
+  /**
+   * Root confinement (qualified `<adapter>://<rel>`). When set the breadcrumb
+   * treats this folder as `/`: crumbs above it are hidden, the root crumb is
+   * the confined folder's own name, and the ✏ path editor shows/accepts paths
+   * relative to it (`/`, `/sub`). Pairs with FileExplorer's rootPath clamp.
+   */
+  rootPath?: string;
+}>();
+
+// Confined root parsed into its adapter-relative form ("projeler/acme") and
+// the trailing folder name used as the "/" crumb label.
+const confinedRel = computed(() => {
+  if (!props.rootPath) return '';
+  const r = props.rootPath;
+  const i = r.indexOf('://');
+  return (i >= 0 ? r.slice(i + 3) : r).replace(/^\/+|\/+$/g, '');
+});
+const floorLabel = computed(() => {
+  const rel = confinedRel.value;
+  if (!rel) return props.rootLabel || props.adapter;
+  const parts = rel.split('/');
+  return parts[parts.length - 1] || (props.rootLabel || props.adapter);
+});
+
+const { t } = useLocale(() => props.locale);
+
+const emit = defineEmits<{
+  (e: 'navigate', adapterPath: string): void;
+  (e: 'copy-path', adapterPath: string): void;
+  (e: 'crumb-context', payload: { x: number; y: number; adapterPath: string; label: string }): void;
+  (e: 'crumb-drop', adapterPath: string, ev: DragEvent): void;
+}>();
+
+interface Crumb {
+  label: string;
+  adapterPath: string;
+}
+
+const crumbs = computed<Crumb[]>(() => {
+  const adapterPrefix = `${props.adapter}://`;
+  const raw = props.dirname.startsWith(adapterPrefix)
+    ? props.dirname.slice(adapterPrefix.length)
+    : props.dirname;
+  const parts = raw.split('/').filter(Boolean);
+
+  const out: Crumb[] = [];
+
+  // Confined: the root folder is the top crumb (its own name), and only the
+  // path BELOW it is walked — segments above the confinement are never shown.
+  if (props.rootPath) {
+    const floor = confinedRel.value;
+    const cur = raw.replace(/^\/+|\/+$/g, '');
+    const below = floor && (cur === floor || cur.startsWith(floor + '/'))
+      ? cur.slice(floor.length).replace(/^\/+/, '')
+      : '';
+    out.push({ label: floorLabel.value, adapterPath: props.rootPath });
+    let acc = floor;
+    for (const part of below.split('/').filter(Boolean)) {
+      acc = acc ? `${acc}/${part}` : part;
+      out.push({ label: part === '.trash' ? t('node.trash') : part, adapterPath: `${adapterPrefix}${acc}` });
+    }
+    return out;
+  }
+
+  if (props.multiStorageRoot) {
+    // Global "/" crumb — clicking it pops back to the storage picker
+    // (FileExplorer treats the empty string as the virtual root).
+    out.push({ label: '/', adapterPath: '' });
+    if (props.adapter) {
+      // Storage segment — wire form `<adapter>://` lands at storage
+      // root regardless of where we are now.
+      out.push({ label: props.rootLabel || props.adapter, adapterPath: adapterPrefix });
+    }
+  } else {
+    // Single-storage mode: the storage name IS the root, no "/"
+    // above it.
+    out.push({
+      label: props.rootLabel || props.adapter,
+      adapterPath: adapterPrefix,
+    });
+  }
+
+  let acc = '';
+  for (const part of parts) {
+    acc = acc ? `${acc}/${part}` : part;
+    const label = part === '.trash' ? t('node.trash') : part;
+    out.push({ label, adapterPath: `${adapterPrefix}${acc}` });
+  }
+  return out;
+});
+
+function onClick(crumb: Crumb) {
+  emit('navigate', crumb.adapterPath);
+}
+
+function onContext(ev: MouseEvent, crumb: Crumb) {
+  ev.preventDefault();
+  ev.stopPropagation();
+  emit('crumb-context', {
+    x: ev.clientX,
+    y: ev.clientY,
+    adapterPath: crumb.adapterPath,
+    label: crumb.label,
+  });
+}
+
+function onCrumbDragOver(ev: DragEvent) {
+  if (!ev.dataTransfer?.types.includes('application/x-brf-files')) return;
+  ev.preventDefault();
+  ev.stopPropagation();
+  if (ev.dataTransfer) ev.dataTransfer.dropEffect = 'move';
+}
+
+function onCrumbDrop(ev: DragEvent, crumb: Crumb) {
+  if (!ev.dataTransfer?.types.includes('application/x-brf-files')) return;
+  ev.preventDefault();
+  ev.stopPropagation();
+  emit('crumb-drop', crumb.adapterPath, ev);
+}
+
+const editing = ref(false);
+const pathDraft = ref('');
+const pathInput = ref<HTMLInputElement | null>(null);
+
+function startEdit() {
+  const adapterPrefix = `${props.adapter}://`;
+  const rel = props.dirname.startsWith(adapterPrefix)
+    ? props.dirname.slice(adapterPrefix.length)
+    : props.dirname;
+  // Confined: edit relative to the root folder — `/` is the root, `/sub` below.
+  if (props.rootPath) {
+    const floor = confinedRel.value;
+    const cur = rel.replace(/^\/+|\/+$/g, '');
+    const below = floor && (cur === floor || cur.startsWith(floor + '/'))
+      ? cur.slice(floor.length).replace(/^\/+/, '')
+      : '';
+    pathDraft.value = below ? `/${below}` : '/';
+    editing.value = true;
+    void nextTick(() => {
+      pathInput.value?.focus();
+      pathInput.value?.select();
+    });
+    return;
+  }
+  // Multi-storage: show `/<storage>/<rel>` so the user can edit the
+  // whole tree (`/main/foo`, `/s3-test/example`, just `/` for root).
+  if (props.multiStorageRoot) {
+    if (!props.adapter) {
+      pathDraft.value = '/';
+    } else {
+      const trimmed = rel.replace(/^\/+|\/+$/g, '');
+      pathDraft.value = trimmed
+        ? `/${props.adapter}/${trimmed}`
+        : `/${props.adapter}`;
+    }
+  } else {
+    pathDraft.value = rel;
+  }
+  editing.value = true;
+  void nextTick(() => {
+    pathInput.value?.focus();
+    pathInput.value?.select();
+  });
+}
+
+function submitPath() {
+  const raw = pathDraft.value.trim();
+  editing.value = false;
+
+  // Confined: the typed path is relative to the root folder; prepend the floor.
+  if (props.rootPath) {
+    const sub = raw.replace(/^\/+|\/+$/g, '');
+    const floor = confinedRel.value;
+    const rel = sub ? (floor ? `${floor}/${sub}` : sub) : floor;
+    emit('navigate', rel ? `${props.adapter}://${rel}` : `${props.adapter}://`);
+    return;
+  }
+
+  if (props.multiStorageRoot) {
+    // Strip leading/trailing slashes. First segment = storage.
+    const clean = raw.replace(/^\/+|\/+$/g, '');
+    if (!clean) {
+      // navigate to global root by emitting empty wire path; the
+      // FileExplorer treats it as virtual storage list.
+      emit('navigate', '');
+      return;
+    }
+    const slash = clean.indexOf('/');
+    const adapter = slash === -1 ? clean : clean.slice(0, slash);
+    const rel = slash === -1 ? '' : clean.slice(slash + 1);
+    emit('navigate', rel ? `${adapter}://${rel}` : `${adapter}://`);
+    return;
+  }
+
+  const v = raw.replace(/^\/+|\/+$/g, '');
+  if (!v) return;
+  emit('navigate', `${props.adapter}://${v}`);
+}
+
+function cancelEdit() {
+  editing.value = false;
+}
+</script>
+
+<template>
+  <nav class="fe-breadcrumb" aria-label="Breadcrumb">
+    <template v-if="!editing">
+      <button
+        v-for="(c, i) in crumbs"
+        :key="c.adapterPath"
+        class="fe-breadcrumb__crumb"
+        :class="{ 'is-last': i === crumbs.length - 1 }"
+        type="button"
+        :aria-current="i === crumbs.length - 1 ? 'page' : undefined"
+        @click="onClick(c)"
+        @contextmenu="onContext($event, c)"
+        @dragover="onCrumbDragOver"
+        @drop="onCrumbDrop($event, c)"
+      >
+        <span>{{ c.label }}</span>
+        <span v-if="i < crumbs.length - 1" class="fe-breadcrumb__sep" aria-hidden="true">›</span>
+      </button>
+      <button
+        type="button"
+        class="fe-breadcrumb__edit"
+        :title="t('breadcrumb.go_to_path')"
+        :aria-label="t('breadcrumb.go_to_path')"
+        @click="startEdit"
+      >✏</button>
+    </template>
+    <template v-else>
+      <input
+        ref="pathInput"
+        v-model="pathDraft"
+        type="text"
+        class="fe-breadcrumb__input"
+        :placeholder="t('breadcrumb.path_placeholder')"
+        spellcheck="false"
+        autocomplete="off"
+        @keydown.enter.prevent="submitPath"
+        @keydown.escape.prevent="cancelEdit"
+        @blur="cancelEdit"
+      />
+    </template>
+  </nav>
+</template>

package/src/components/ContextMenu.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+/**
+ * ContextMenu — Teleport-based menu.
+ *
+ * Teleported under <body> so no parent (Ionic <ion-page>, Filament's
+ * transformed flex containers, panel sidebars, …) can shift the
+ * `position: fixed` backdrop off-window.
+ */
+import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import type { LocaleCode, ThemeMode } from '../types/ExplorerConfig';
+import type { FileNode } from '../types/FileNode';
+import { useLocale } from '../composables/useLocale';
+
+export interface ContextAction {
+  key: string;
+  label: string;
+  icon?: string;
+  danger?: boolean;
+  disabled?: boolean;
+  hidden?: boolean;
+  divider?: boolean;
+}
+
+const props = defineProps<{
+  locale: LocaleCode;
+  actions: ContextAction[];
+  /**
+   * Resolved theme. Teleported into <body> we lose the `.fe` parent
+   * that scopes CSS vars, so we tag the backdrop with the current
+   * theme so variables.css can re-apply dark overrides outside the
+   * explorer tree.
+   */
+  theme?: ThemeMode;
+}>();
+
+const emit = defineEmits<{
+  (e: 'select', action: ContextAction, target: FileNode[]): void;
+}>();
+
+void useLocale(() => props.locale); // eager-instantiate t/lookup so future templates can reuse
+
+const open = ref(false);
+const x = ref(0);
+const y = ref(0);
+const targetNodes = ref<FileNode[]>([]);
+const menuEl = ref<HTMLElement | null>(null);
+
+async function show(ev: { clientX: number; clientY: number }, nodes: FileNode[]) {
+  open.value = true;
+  x.value = ev.clientX;
+  y.value = ev.clientY;
+  targetNodes.value = nodes;
+  // After the menu renders, clamp it inside the viewport so a click near the
+  // bottom/right edge doesn't push the menu off-screen (it opens down-right
+  // from the cursor by default).
+  await nextTick();
+  clampToViewport();
+}
+
+function clampToViewport() {
+  const el = menuEl.value;
+  if (!el || typeof window === 'undefined') return;
+  const rect = el.getBoundingClientRect();
+  const margin = 8;
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  if (y.value + rect.height > vh - margin) {
+    y.value = Math.max(margin, vh - rect.height - margin);
+  }
+  if (x.value + rect.width > vw - margin) {
+    x.value = Math.max(margin, vw - rect.width - margin);
+  }
+}
+
+function hide() {
+  open.value = false;
+}
+
+function pick(a: ContextAction) {
+  if (a.disabled) return;
+  emit('select', a, targetNodes.value);
+  hide();
+}
+
+function onKey(e: KeyboardEvent) {
+  if (e.key === 'Escape') hide();
+}
+
+const visibleActions = computed(() => props.actions.filter((a) => !a.hidden));
+
+const prefersDark = ref(false);
+let mq: MediaQueryList | undefined;
+function syncPrefersDark(e?: MediaQueryListEvent | MediaQueryList) {
+  prefersDark.value = !!(e && 'matches' in e && e.matches);
+}
+onMounted(() => {
+  if (typeof window === 'undefined') return;
+  mq = window.matchMedia('(prefers-color-scheme: dark)');
+  syncPrefersDark(mq);
+  mq.addEventListener?.('change', syncPrefersDark);
+});
+onBeforeUnmount(() => {
+  mq?.removeEventListener?.('change', syncPrefersDark);
+});
+
+const themeClass = computed(() => {
+  const t = props.theme || 'auto';
+  return `fe-ctx-backdrop--theme-${t}`;
+});
+
+defineExpose({ show, hide });
+</script>
+
+<template>
+  <Teleport to="body">
+    <transition name="fe-ctx">
+      <div
+        v-if="open"
+        class="fe-ctx-backdrop"
+        :class="themeClass"
+        :data-prefers-dark="prefersDark ? '1' : '0'"
+        @click="hide"
+        @contextmenu.prevent="hide"
+        @keydown="onKey"
+      >
+        <div
+          ref="menuEl"
+          class="fe-ctx"
+          role="menu"
+          :style="{ top: y + 'px', left: x + 'px' }"
+          @click.stop
+        >
+          <template v-for="(a, i) in visibleActions" :key="a.key || i">
+            <div v-if="a.divider" class="fe-ctx__sep" />
+            <button
+              v-else
+              type="button"
+              class="fe-ctx__item"
+              :class="{ 'is-danger': a.danger, 'is-disabled': a.disabled }"
+              :disabled="a.disabled"
+              role="menuitem"
+              @click="pick(a)"
+            >
+              <span v-if="a.icon" class="fe-ctx__icon" aria-hidden="true">{{ a.icon }}</span>
+              <span class="fe-ctx__label">{{ a.label }}</span>
+            </button>
+          </template>
+        </div>
+      </div>
+    </transition>
+  </Teleport>
+</template>

package/src/components/GridView.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+/**
+ * GridView — card grid. Thumbnails preferred, fall back to icon.
+ */
+import type { FileNode } from '../types/FileNode';
+import type { LocaleCode } from '../types/ExplorerConfig';
+import { useLocale } from '../composables/useLocale';
+
+const props = defineProps<{
+  files: FileNode[];
+  selected: Set<string>;
+  clipped?: Set<string>;
+  showParentPath?: boolean;
+  locale: LocaleCode;
+  loading?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'click-card', node: FileNode, mod: { ctrl: boolean; shift: boolean }): void;
+  (e: 'dbl-card', node: FileNode): void;
+  (e: 'context-card', node: FileNode, ev: MouseEvent): void;
+  (e: 'item-drag-start', node: FileNode, ev: DragEvent): void;
+  (e: 'item-drop-into', target: FileNode, ev: DragEvent): void;
+}>();
+
+const { t, formatSize, nodeDisplayName } = useLocale(() => props.locale);
+
+function isSelected(n: FileNode): boolean {
+  return props.selected.has(n.path);
+}
+
+function onClick(n: FileNode, ev: MouseEvent) {
+  emit('click-card', n, { ctrl: ev.ctrlKey || ev.metaKey, shift: ev.shiftKey });
+}
+
+function onDbl(n: FileNode) {
+  emit('dbl-card', n);
+}
+
+function onCtx(n: FileNode, ev: MouseEvent) {
+  ev.preventDefault();
+  ev.stopPropagation();
+  emit('context-card', n, ev);
+}
+
+function onItemDragStart(n: FileNode, ev: DragEvent) {
+  emit('item-drag-start', n, ev);
+}
+
+function onItemDragOver(n: FileNode, ev: DragEvent) {
+  if (n.type !== 'dir') return;
+  if (!ev.dataTransfer?.types.includes('application/x-brf-files')) return;
+  ev.preventDefault();
+  ev.stopPropagation();
+  if (ev.dataTransfer) ev.dataTransfer.dropEffect = 'move';
+}
+
+function onItemDrop(n: FileNode, ev: DragEvent) {
+  if (n.type !== 'dir') return;
+  if (!ev.dataTransfer?.types.includes('application/x-brf-files')) return;
+  ev.preventDefault();
+  ev.stopPropagation();
+  emit('item-drop-into', n, ev);
+}
+
+let pressTimer: ReturnType<typeof setTimeout> | undefined;
+let pressTarget: FileNode | null = null;
+function onTouchStart(n: FileNode, ev: TouchEvent) {
+  pressTarget = n;
+  if (pressTimer) clearTimeout(pressTimer);
+  pressTimer = setTimeout(() => {
+    if (pressTarget) {
+      const t0 = ev.touches[0];
+      emit('context-card', pressTarget, {
+        clientX: t0.clientX,
+        clientY: t0.clientY,
+        preventDefault: () => {},
+      } as unknown as MouseEvent);
+    }
+  }, 500);
+}
+function cancelPress() {
+  if (pressTimer) clearTimeout(pressTimer);
+  pressTarget = null;
+}
+
+function parentDir(path: string): string {
+  const stripped = path.replace(/^[a-z][a-z0-9+.-]*:\/\//i, '');
+  const idx = stripped.lastIndexOf('/');
+  if (idx === -1) return '';
+  return stripped.slice(0, idx);
+}
+
+function iconFor(n: FileNode): string {
+  if (n.mime_type === 'inode/storage') return '💾';
+  if (n.type === 'dir') return '📁';
+  const e = (n.extension || '').toLowerCase();
+  if (['jpg', 'jpeg', 'png', 'webp', 'gif', 'bmp', 'svg'].includes(e)) return '🖼';
+  if (['mp4', 'webm', 'mov', 'mkv'].includes(e)) return '🎞';
+  if (['mp3', 'wav', 'flac', 'ogg'].includes(e)) return '🎵';
+  if (e === 'pdf') return '📕';
+  if (['doc', 'docx', 'odt'].includes(e)) return '📄';
+  if (['xls', 'xlsx', 'csv'].includes(e)) return '📊';
+  if (['ppt', 'pptx'].includes(e)) return '📽';
+  if (['zip', 'tar', 'gz', '7z'].includes(e)) return '🗜';
+  return '📎';
+}
+</script>
+
+<template>
+  <div class="fe-grid" :class="{ 'is-loading': loading }">
+    <div
+      v-for="n in files"
+      :key="n.path"
+      class="fe-grid__card"
+      :class="{
+        'is-selected': isSelected(n),
+        'is-dir': n.type === 'dir',
+        'is-trash': n.trashed,
+        'is-clipped': clipped?.has(n.path),
+      }"
+      tabindex="0"
+      draggable="true"
+      @click="onClick(n, $event)"
+      @dblclick="onDbl(n)"
+      @contextmenu="onCtx(n, $event)"
+      @dragstart="onItemDragStart(n, $event)"
+      @dragover="onItemDragOver(n, $event)"
+      @drop="onItemDrop(n, $event)"
+      @touchstart.passive="onTouchStart(n, $event)"
+      @touchend="cancelPress"
+      @touchmove="cancelPress"
+    >
+      <div class="fe-grid__thumb">
+        <!--
+          draggable="false" — HTML5 image drag dataTransfer adds 'Files'
+          MIME, which trips the parent's upload handler; without this
+          the user dragging an item with a thumbnail re-uploads it.
+          Parent card stays draggable=true so internal move works.
+        -->
+        <img
+          v-if="n.thumb_url"
+          :src="n.thumb_url"
+          :alt="n.basename"
+          loading="lazy"
+          draggable="false"
+        />
+        <span v-else class="fe-grid__icon">{{ iconFor(n) }}</span>
+      </div>
+      <div class="fe-grid__label" :title="n.basename">
+        {{ nodeDisplayName(n) }}
+      </div>
+      <div
+        v-if="showParentPath"
+        class="fe-grid__parent"
+        :title="parentDir(n.path)"
+      >{{ parentDir(n.path) || '—' }}</div>
+      <div class="fe-grid__meta">
+        {{ n.type === 'dir' ? '—' : formatSize(n.size) }}
+      </div>
+    </div>
+    <div v-if="!loading && files.length === 0" class="fe-grid__empty">
+      {{ t('empty.folder') }}
+    </div>
+  </div>
+</template>