@brftech/filex-core 0.1.56

package/src/components/TagPicker.vue

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+/**
+ * TagPicker — small chip list with add/remove for a node.
+ *
+ * Reads `GET /api/files/manager/tags?node_id=…` on mount, writes the
+ * full new array via `POST /api/files/manager/tags`.
+ *
+ * Tag colors are deterministic: hash(name) → palette index. Consumers
+ * can override with the `palette` prop.
+ */
+import { ref, watch, onMounted, computed } from 'vue';
+
+const props = defineProps<{
+  nodeId: number;
+  apiBase?: string;
+  authHeaders?: () => Record<string, string> | Promise<Record<string, string>>;
+  /** Optional list of palette swatches; one is picked per tag deterministically. */
+  palette?: string[];
+}>();
+
+const emit = defineEmits<{
+  (e: 'change', tags: string[]): void;
+  (e: 'error', message: string): void;
+}>();
+
+const tags = ref<string[]>([]);
+const loading = ref(false);
+const adding = ref(false);
+const newTag = ref('');
+
+const palette = computed(() => props.palette ?? [
+  '#ef4444', '#f59e0b', '#10b981', '#3b82f6',
+  '#8b5cf6', '#ec4899', '#14b8a6', '#f97316',
+]);
+
+function colorFor(tag: string): string {
+  let h = 0;
+  for (let i = 0; i < tag.length; i++) h = (h * 31 + tag.charCodeAt(i)) | 0;
+  const arr = palette.value;
+  return arr[Math.abs(h) % arr.length];
+}
+
+async function buildHeaders(extra: Record<string, string> = {}): Promise<Record<string, string>> {
+  return { ...(await (props.authHeaders ?? (() => ({})))()), ...extra };
+}
+
+async function load() {
+  loading.value = true;
+  try {
+    const base = props.apiBase ?? '';
+    const res = await fetch(`${base}/api/files/manager/tags?node_id=${props.nodeId}`, {
+      headers: await buildHeaders(),
+      credentials: 'include',
+    });
+    if (res.ok) {
+      const body = await res.json();
+      tags.value = Array.isArray(body.tags) ? body.tags : [];
+    }
+  } catch (err) {
+    emit('error', err instanceof Error ? err.message : String(err));
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function persist(next: string[]) {
+  const previous = [...tags.value];
+  tags.value = next;
+  try {
+    const base = props.apiBase ?? '';
+    const res = await fetch(`${base}/api/files/manager/tags`, {
+      method: 'POST',
+      headers: await buildHeaders({ 'Content-Type': 'application/json' }),
+      credentials: 'include',
+      body: JSON.stringify({ node_id: props.nodeId, tags: next }),
+    });
+    if (!res.ok) throw new Error(`tag save failed: ${res.status}`);
+    emit('change', next);
+  } catch (err) {
+    tags.value = previous;
+    emit('error', err instanceof Error ? err.message : String(err));
+  }
+}
+
+function add() {
+  const v = newTag.value.trim();
+  if (!v || tags.value.includes(v)) {
+    newTag.value = '';
+    adding.value = false;
+    return;
+  }
+  persist([...tags.value, v]);
+  newTag.value = '';
+  adding.value = false;
+}
+
+function remove(tag: string) {
+  persist(tags.value.filter((t) => t !== tag));
+}
+
+onMounted(load);
+watch(() => props.nodeId, load);
+</script>
+
+<template>
+  <div class="filex-tag-picker" :class="{ 'is-loading': loading }">
+    <span
+      v-for="tag in tags"
+      :key="tag"
+      class="filex-tag"
+      :style="{ '--filex-tag-color': colorFor(tag) }"
+    >
+      {{ tag }}
+      <button class="filex-tag-x" type="button" @click="remove(tag)" aria-label="Remove tag">×</button>
+    </span>
+
+    <form v-if="adding" class="filex-tag-add" @submit.prevent="add">
+      <input
+        v-model="newTag"
+        autofocus
+        placeholder="tag name"
+        @blur="add"
+        @keydown.escape="adding = false; newTag = ''"
+      />
+    </form>
+    <button v-else class="filex-tag-add-btn" type="button" @click="adding = true">+ Add tag</button>
+  </div>
+</template>
+
+<style scoped>
+.filex-tag-picker {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+}
+.filex-tag-picker.is-loading {
+  opacity: 0.6;
+  pointer-events: none;
+}
+.filex-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border-radius: 999px;
+  padding: 2px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #fff;
+  background: var(--filex-tag-color);
+}
+.filex-tag-x {
+  background: transparent;
+  border: none;
+  color: rgba(255, 255, 255, 0.85);
+  cursor: pointer;
+  padding: 0 2px;
+  font-size: 14px;
+  line-height: 1;
+}
+.filex-tag-x:hover {
+  color: #fff;
+}
+.filex-tag-add input {
+  border: 1px solid var(--filex-border, #d1d5db);
+  border-radius: 12px;
+  padding: 2px 10px;
+  font-size: 12px;
+  width: 110px;
+}
+.filex-tag-add-btn {
+  border: 1px dashed var(--filex-border, #d1d5db);
+  background: transparent;
+  border-radius: 999px;
+  padding: 2px 10px;
+  font-size: 12px;
+  color: var(--filex-text-muted, #6b7280);
+  cursor: pointer;
+}
+.filex-tag-add-btn:hover {
+  border-color: var(--filex-accent, #6366f1);
+  color: var(--filex-accent, #6366f1);
+}
+</style>

package/src/components/Toolbar.vue

@@ -0,0 +1,220 @@
+<script setup lang="ts">
+/**
+ * Toolbar — selection-aware action row.
+ *
+ * Layout:
+ *   - No selection            → [📁 Yeni Klasör]   [search | ⬆ ↻]   [☰ ▦]
+ *   - 1 file selected         → [👁 ⬇ 🔗 ✎ 🗑]    [search | ⬆ ↻]   [☰ ▦]
+ *   - 1 folder selected       → [↗ ✎ 🗑]          [search | ⬆ ↻]   [☰ ▦]
+ *   - Multi selection         → [✂ ❐ 🗑]          [search | ⬆ ↻]   [☰ ▦]
+ *
+ * Presentational only — all logic (rename, share, …) lives in
+ * FileExplorer.vue, which listens for `action` emits.
+ */
+import { computed, ref, watch } from 'vue';
+import type { ViewMode } from '../types/FileNode';
+import type { LocaleCode } from '../types/ExplorerConfig';
+import type { ContextAction } from './ContextMenu.vue';
+import { useLocale } from '../composables/useLocale';
+
+export type SelectionMode = 'none' | 'single-file' | 'single-dir' | 'multi';
+
+const props = defineProps<{
+  viewMode: ViewMode;
+  searchQuery: string;
+  /**
+   * Tells the toolbar which action set to render (a `.trash/` listing
+   * gets a restore-only menu instead of cut/copy/etc).
+   */
+  trashActive: boolean;
+  /**
+   * The action list to render, supplied by FileExplorer. This is the SAME
+   * list the right-click context menu renders for the current selection, so
+   * the two menus can never drift apart. Dividers/hidden entries are filtered
+   * out here (the toolbar is a flat row).
+   */
+  actions: ContextAction[];
+  /** Current selection metadata — toolbar uses this to pick its mode. */
+  selectionMode?: SelectionMode;
+  /** True when clipboard has cut/copy items, so we can enable Paste. */
+  pasteEnabled?: boolean;
+  /** True when the universal converter (FILEX_CONVERT_URL) is available. */
+  convertEnabled?: boolean;
+  /**
+   * True when the current dir has a parent the user can step up to.
+   * Hidden at storage root because there's nothing above it.
+   */
+  canGoUp?: boolean;
+  /**
+   * Multi-storage virtual root marker — when true, mutation buttons
+   * (New Folder / Upload / Paste) are hidden because there's no real
+   * backend folder to write to.
+   */
+  atVirtualRoot?: boolean;
+  /**
+   * RBAC: false hides the write affordances (New Folder / Upload / Paste) when
+   * the current user lacks edit on this directory. Undefined = no RBAC gating
+   * (backward-compatible for embedders that don't pass it).
+   */
+  canWrite?: boolean;
+  locale: LocaleCode;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:viewMode', v: ViewMode): void;
+  (e: 'update:searchQuery', v: string): void;
+  (e: 'new-folder'): void;
+  (e: 'upload'): void;
+  (e: 'refresh'): void;
+  (e: 'go-up'): void;
+  (e: 'action', key: string): void;
+  (e: 'open-recents'): void;
+}>();
+
+const { t } = useLocale(() => props.locale);
+
+const searchEl = ref<HTMLInputElement | null>(null);
+const localSearch = ref(props.searchQuery);
+
+watch(() => props.searchQuery, (v) => {
+  localSearch.value = v;
+});
+
+let debounce: ReturnType<typeof setTimeout> | undefined;
+function onSearchInput(ev: Event) {
+  const v = (ev.target as HTMLInputElement).value;
+  localSearch.value = v;
+  if (debounce) clearTimeout(debounce);
+  debounce = setTimeout(() => emit('update:searchQuery', v), 200);
+}
+
+function focusSearch() {
+  searchEl.value?.focus();
+  searchEl.value?.select();
+}
+
+defineExpose({ focusSearch });
+
+const mode = computed<SelectionMode>(() => props.selectionMode ?? 'none');
+
+// The visible action buttons = the shared list from FileExplorer, minus
+// dividers and hidden entries (the toolbar is a flat row, not a dropdown).
+// Disabled entries render greyed-out. Because this is the SAME list the
+// context menu uses, the two menus are guaranteed to match.
+const toolbarItems = computed(() => props.actions.filter((a) => !a.divider && !a.hidden));
+
+function fire(key: string) {
+  emit('action', key);
+}
+</script>
+
+<template>
+  <div class="fe-toolbar">
+    <div class="fe-toolbar__primary">
+      <button
+        v-if="canGoUp"
+        type="button"
+        class="fe-btn fe-btn--icon-only"
+        :title="t('toolbar.go_up')"
+        :aria-label="t('toolbar.go_up')"
+        @click="emit('go-up')"
+      >
+        <span class="fe-icon">↑</span>
+      </button>
+
+      <button
+        v-if="mode === 'none' && !trashActive && !atVirtualRoot && canWrite !== false"
+        type="button"
+        class="fe-btn fe-btn--primary"
+        :title="t('toolbar.new_folder')"
+        @click="emit('new-folder')"
+      >
+        <span class="fe-icon">📁</span>
+        <span class="fe-btn__label">{{ t('toolbar.new_folder') }}</span>
+      </button>
+
+      <button
+        v-for="a in toolbarItems"
+        :key="a.key"
+        type="button"
+        class="fe-btn"
+        :class="{ 'fe-btn--danger': a.danger, 'is-disabled': a.disabled }"
+        :disabled="a.disabled"
+        :title="a.label"
+        @click="fire(a.key)"
+      >
+        <span class="fe-icon">{{ a.icon }}</span>
+        <span class="fe-btn__label">{{ a.label }}</span>
+      </button>
+
+      <button
+        v-if="pasteEnabled && mode === 'none' && !trashActive && !atVirtualRoot && canWrite !== false"
+        type="button"
+        class="fe-btn"
+        :title="t('ctx.paste')"
+        @click="fire('paste')"
+      >
+        <span class="fe-icon">📋</span>
+        <span class="fe-btn__label">{{ t('ctx.paste') }}</span>
+      </button>
+    </div>
+
+    <div class="fe-toolbar__spacer" />
+
+    <div class="fe-toolbar__search-group">
+      <div class="fe-search">
+        <input
+          ref="searchEl"
+          type="search"
+          class="fe-search__input"
+          :placeholder="t('toolbar.search.placeholder')"
+          :value="localSearch"
+          aria-label="Search"
+          @input="onSearchInput"
+        />
+      </div>
+      <button
+        v-if="!atVirtualRoot && canWrite !== false"
+        type="button"
+        class="fe-btn fe-btn--icon-only"
+        :title="t('toolbar.upload')"
+        @click="emit('upload')"
+      >
+        <span class="fe-icon">⬆</span>
+      </button>
+      <button
+        type="button"
+        class="fe-btn fe-btn--icon-only"
+        :title="t('toolbar.refresh')"
+        @click="emit('refresh')"
+      >
+        <span class="fe-icon">↻</span>
+      </button>
+    </div>
+
+    <div class="fe-toolbar__view" role="tablist" aria-label="View">
+      <button
+        type="button"
+        class="fe-btn fe-btn--icon-only"
+        :class="{ 'is-active': viewMode === 'list' }"
+        role="tab"
+        :aria-selected="viewMode === 'list'"
+        :title="t('toolbar.view.list')"
+        @click="emit('update:viewMode', 'list')"
+      >
+        <span class="fe-icon">☰</span>
+      </button>
+      <button
+        type="button"
+        class="fe-btn fe-btn--icon-only"
+        :class="{ 'is-active': viewMode === 'grid' }"
+        role="tab"
+        :aria-selected="viewMode === 'grid'"
+        :title="t('toolbar.view.grid')"
+        @click="emit('update:viewMode', 'grid')"
+      >
+        <span class="fe-icon">▦</span>
+      </button>
+    </div>
+  </div>
+</template>

package/src/components/UploadProgress.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+/**
+ * UploadProgress — floating footer showing active + recently-done uploads.
+ */
+import { computed } from 'vue';
+import type { UploadJob } from '../composables/useUploadChunked';
+import type { LocaleCode } from '../types/ExplorerConfig';
+import { useLocale } from '../composables/useLocale';
+
+const props = defineProps<{
+  jobs: UploadJob[];
+  locale: LocaleCode;
+}>();
+
+const emit = defineEmits<{
+  (e: 'cancel', job: UploadJob): void;
+  (e: 'dismiss', job: UploadJob): void;
+}>();
+
+const { t, formatSize } = useLocale(() => props.locale);
+
+const visible = computed(() => props.jobs);
+
+function statusLabel(j: UploadJob): string {
+  switch (j.status) {
+    case 'done':
+      return t('upload.done');
+    case 'error':
+      return `${t('upload.error')}: ${j.error ?? ''}`;
+    case 'aborted':
+      return t('upload.aborted');
+    default:
+      return t('upload.progress');
+  }
+}
+</script>
+
+<template>
+  <transition name="fe-upload-slide">
+    <div v-if="visible.length > 0" class="fe-upload">
+      <div class="fe-upload__header">
+        <strong>{{ t('upload.progress') }}</strong>
+        <span class="fe-upload__count">{{ visible.length }}</span>
+      </div>
+      <ul class="fe-upload__list">
+        <li
+          v-for="j in visible"
+          :key="j.id"
+          class="fe-upload__item"
+          :class="`is-${j.status}`"
+        >
+          <div class="fe-upload__name" :title="j.file.name">{{ j.file.name }}</div>
+          <div class="fe-upload__bar" :aria-valuenow="j.percent" role="progressbar">
+            <div class="fe-upload__bar-fill" :style="{ width: j.percent + '%' }" />
+          </div>
+          <div class="fe-upload__meta">
+            <span>{{ statusLabel(j) }}</span>
+            <span>{{ formatSize(j.uploadedBytes) }} / {{ formatSize(j.totalBytes) }}</span>
+            <button
+              v-if="j.status === 'uploading' || j.status === 'initializing'"
+              type="button"
+              class="fe-upload__cancel"
+              @click="emit('cancel', j)"
+            >
+              {{ t('upload.cancel') }}
+            </button>
+            <button
+              v-else
+              type="button"
+              class="fe-upload__cancel"
+              @click="emit('dismiss', j)"
+            >×</button>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </transition>
+</template>