@bysivin/jumpbar 0.1.0 → 0.2.0

package/src/vue/CommandBarList.vue

@@ -1,173 +0,0 @@
-<script setup>
-import { computed, reactive, ref, watch } from 'vue';
-
-const props = defineProps({
-  sections: { type: Array, required: true },
-  items: { type: Array, required: true },
-  selectedIndex: { type: Number, required: true },
-  pending: { type: Boolean, default: false },
-});
-
-const emit = defineEmits(['select', 'activate']);
-
-const PLACEHOLDER_ROWS = 3;
-
-const STATUS_CLASSES = {
-  online: 'bg-n-teal-10',
-  busy: 'bg-n-amber-10',
-  offline: 'bg-n-slate-10',
-};
-
-const listRef = ref(null);
-const failedImages = reactive(new Set());
-let pointer = { x: null, y: null };
-
-const onPointerMove = (event, index) => {
-  if (event.clientX === pointer.x && event.clientY === pointer.y) return;
-  pointer = { x: event.clientX, y: event.clientY };
-  emit('activate', index);
-};
-
-const indexes = computed(
-  () => new Map(props.items.map((item, index) => [item.id, index]))
-);
-
-const initials = name =>
-  (name ?? '')
-    .split(/\s+/)
-    .slice(0, 2)
-    .map(word => [...word][0] ?? '')
-    .join('')
-    .toUpperCase();
-
-watch(
-  [() => props.selectedIndex, () => props.sections],
-  ([index]) => {
-    const list = listRef.value;
-    if (!list) return;
-    if (index === 0) list.scrollTop = 0;
-    else {
-      list
-        .querySelector('[aria-selected="true"]')
-        ?.scrollIntoView({ block: 'nearest' });
-    }
-  },
-  { flush: 'post' }
-);
-</script>
-
-<template>
-  <div ref="listRef" role="listbox" class="px-2 py-2 overflow-y-auto">
-    <div
-      v-for="section in sections"
-      :key="section.section ?? ''"
-      role="group"
-      :aria-label="section.section ?? undefined"
-    >
-      <p
-        v-if="section.section"
-        class="px-3 pt-3 pb-1 text-xs font-medium text-n-slate-11 first:pt-1"
-      >
-        {{ section.section }}
-      </p>
-      <div
-        v-for="item in section.items"
-        :id="`command-bar-item-${item.id}`"
-        :key="item.id"
-        role="option"
-        :aria-selected="indexes.get(item.id) === selectedIndex"
-        class="relative flex items-center h-10 gap-3 px-3 text-sm rounded-lg cursor-pointer select-none text-n-slate-12 transition-colors duration-75"
-        :class="{
-          'bg-n-alpha-2 before:absolute before:inset-y-2 before:start-0 before:w-0.5 before:rounded-full before:bg-n-brand':
-            indexes.get(item.id) === selectedIndex,
-        }"
-        @mousedown.prevent
-        @mousemove="onPointerMove($event, indexes.get(item.id))"
-        @click="emit('select', item)"
-      >
-        <span
-          v-if="item.avatar"
-          class="relative flex items-center justify-center flex-shrink-0 rounded-md size-6 bg-n-alpha-2 text-n-slate-11"
-        >
-          <img
-            v-if="item.avatar.src && !failedImages.has(item.avatar.src)"
-            :src="item.avatar.src"
-            :alt="item.avatar.name"
-            class="object-cover rounded-md size-6"
-            @error="failedImages.add(item.avatar.src)"
-          />
-          <span v-else class="text-xs font-medium leading-none">
-            {{ initials(item.avatar.name) }}
-          </span>
-          <span
-            v-if="item.avatar.status"
-            class="absolute -bottom-px -end-px border rounded-full size-2 border-n-slate-3"
-            :class="STATUS_CLASSES[item.avatar.status]"
-          />
-        </span>
-        <span
-          v-else
-          class="flex items-center justify-center flex-shrink-0 size-6"
-        >
-          <span
-            class="size-4"
-            :class="[
-              item.icon,
-              indexes.get(item.id) === selectedIndex
-                ? 'text-n-slate-12'
-                : 'text-n-slate-11',
-            ]"
-          />
-        </span>
-        <span class="flex items-center flex-1 min-w-0 gap-1.5 overflow-hidden">
-          <template v-if="item.parentTitle">
-            <span class="truncate text-n-slate-11">{{ item.parentTitle }}</span>
-            <span
-              class="flex-shrink-0 i-lucide-chevron-right size-3 text-n-slate-10 rtl:-scale-x-100"
-            />
-          </template>
-          <span class="flex-shrink-0 max-w-full truncate">{{
-            item.title
-          }}</span>
-          <span v-if="item.subtitle" class="truncate text-n-slate-11">
-            {{ item.subtitle }}
-          </span>
-        </span>
-        <span v-if="item.badge" class="flex-shrink-0 text-xs text-n-slate-11">
-          {{ item.badge }}
-        </span>
-        <span v-if="item.shortcut" class="flex items-center gap-1">
-          <kbd
-            v-for="key in item.shortcut"
-            :key="key"
-            class="inline-flex items-center justify-center h-5 px-1 text-xs rounded min-w-5 text-n-slate-11 bg-n-alpha-1 outline outline-1 outline-n-weak"
-          >
-            {{ key }}
-          </kbd>
-        </span>
-        <span
-          v-if="item.page"
-          class="flex-shrink-0 i-lucide-chevron-right size-4 text-n-slate-10 rtl:-scale-x-100"
-        />
-      </div>
-    </div>
-    <div
-      v-if="pending"
-      aria-hidden="true"
-      class="animate-pulse motion-reduce:animate-none"
-    >
-      <div class="px-3 pt-3 pb-1">
-        <span class="block w-20 h-3 rounded bg-n-alpha-2" />
-      </div>
-      <div
-        v-for="row in PLACEHOLDER_ROWS"
-        :key="row"
-        class="flex items-center h-10 gap-3 px-3"
-      >
-        <span class="flex-shrink-0 rounded-md size-6 bg-n-alpha-2" />
-        <span class="h-3 rounded w-36 bg-n-alpha-2" />
-        <span class="h-3 rounded w-24 bg-n-alpha-1" />
-      </div>
-    </div>
-  </div>
-</template>

package/src/vue/useCommandBar.js

@@ -1,261 +0,0 @@
-import { computed, ref, shallowRef } from 'vue';
-import { parseQuery } from '../core/parse';
-import { rank, groupBySection } from '../core/rank';
-
-const DEFAULT_DEBOUNCE = 120;
-const DEFAULT_LIMIT = 100;
-const NO_FRECENCY = { record: () => {}, score: () => 0 };
-
-export const createCommandBar = (initialOptions = {}) => {
-  const options = {
-    prefixes: [],
-    context: () => ({}),
-    frecency: NO_FRECENCY,
-    onSelect: () => {},
-    onClose: () => {},
-    onError: error => {
-      throw error;
-    },
-    debounce: DEFAULT_DEBOUNCE,
-    limit: DEFAULT_LIMIT,
-    ...initialOptions,
-  };
-
-  let sources = [];
-  let context = {};
-  let controller = null;
-  let timers = [];
-  let sequence = 0;
-
-  const isOpen = ref(false);
-  const query = ref('');
-  const pages = shallowRef([]);
-  const items = shallowRef([]);
-  const results = shallowRef([]);
-  const selectedIndex = ref(0);
-  const pendingCount = ref(0);
-
-  const page = computed(() => pages.value.at(-1) ?? null);
-  const isLoading = computed(() => pendingCount.value > 0);
-
-  const sections = computed(() => {
-    const list =
-      page.value && results.value.length
-        ? results.value
-        : [...items.value, ...results.value];
-    const seen = new Set();
-    const unique = list.filter(item => {
-      if (seen.has(item.id)) return false;
-      seen.add(item.id);
-      return true;
-    });
-    return groupBySection(unique);
-  });
-  const visible = computed(() =>
-    sections.value.flatMap(section => section.items)
-  );
-  const selected = computed(() => visible.value[selectedIndex.value] ?? null);
-
-  const buildRequest = () => {
-    const { prefix, text } = parseQuery(query.value, options.prefixes);
-    return {
-      query: query.value,
-      text,
-      prefix,
-      page: page.value?.id ?? null,
-      context,
-    };
-  };
-
-  const isActive = (source, request) =>
-    request.text.length >= (source.minQuery ?? 0) &&
-    (source.when?.(request) ?? true);
-
-  const collectCommands = request =>
-    sources.flatMap(source =>
-      source.commands && isActive(source, request)
-        ? source.commands(request)
-        : []
-    );
-
-  const delayOf = source => source.debounce ?? options.debounce;
-
-  const publish = batch => {
-    results.value = batch.searchers.flatMap(
-      searcher => batch.fresh.get(searcher.id) ?? []
-    );
-    selectedIndex.value = Math.min(
-      selectedIndex.value,
-      Math.max(visible.value.length - 1, 0)
-    );
-  };
-
-  const runSearchers = (batch, delay) => {
-    batch.searchers
-      .filter(source => delayOf(source) === delay)
-      .forEach(async source => {
-        try {
-          const list = await source.search({
-            ...batch.request,
-            signal: batch.signal,
-          });
-          if (batch.sequence !== sequence) return;
-          batch.fresh.set(source.id, list);
-          publish(batch);
-        } catch (error) {
-          if (batch.sequence !== sequence) return;
-          batch.fresh.set(source.id, []);
-          publish(batch);
-          options.onError(error, source);
-        } finally {
-          if (batch.sequence === sequence) pendingCount.value -= 1;
-        }
-      });
-  };
-
-  const run = () => {
-    timers.forEach(clearTimeout);
-    timers = [];
-    controller?.abort();
-    sequence += 1;
-
-    const request = buildRequest();
-    if (!request.text) results.value = [];
-    const ranked = rank(collectCommands(request), {
-      text: request.text,
-      prefix: request.prefix,
-      page: request.page,
-      scopes: context.scopes ?? [],
-      frecency: options.frecency,
-    });
-    items.value = request.text ? ranked.slice(0, options.limit) : ranked;
-    selectedIndex.value = 0;
-
-    const searchRequest = { ...request, matches: items.value.length };
-    const searchers = sources.filter(
-      source => source.search && isActive(source, searchRequest)
-    );
-    pendingCount.value = searchers.length;
-    if (!searchers.length) {
-      results.value = [];
-      return;
-    }
-
-    controller = new AbortController();
-    const batch = {
-      sequence,
-      request: searchRequest,
-      signal: controller.signal,
-      fresh: new Map(),
-      searchers,
-    };
-    new Set(searchers.map(delayOf)).forEach(delay => {
-      timers.push(setTimeout(() => runSearchers(batch, delay), delay));
-    });
-  };
-
-  const navigate = (nextPages, nextQuery = '') => {
-    pages.value = nextPages;
-    query.value = nextQuery;
-    results.value = [];
-    run();
-  };
-
-  const open = ({ page: pageId = null, query: initialQuery = '' } = {}) => {
-    context = options.context();
-    isOpen.value = true;
-    pages.value = [];
-    query.value = '';
-    const target = pageId
-      ? (collectCommands(buildRequest()).find(item => item.id === pageId) ?? {
-          id: pageId,
-        })
-      : null;
-    navigate(target ? [target] : [], initialQuery);
-  };
-
-  const close = () => {
-    if (!isOpen.value) return;
-    timers.forEach(clearTimeout);
-    timers = [];
-    controller?.abort();
-    sequence += 1;
-    pendingCount.value = 0;
-    isOpen.value = false;
-    options.onClose();
-  };
-
-  const back = () => {
-    if (!page.value) return;
-    navigate(pages.value.slice(0, -1));
-  };
-
-  const select = item => {
-    if (!item) return;
-    if (item.page) {
-      navigate([...pages.value, item]);
-      return;
-    }
-    if (!item.run) return;
-    options.frecency.record(item.id);
-    options.onSelect(item);
-    close();
-    item.run(context);
-  };
-
-  const setQuery = value => {
-    query.value = value;
-    run();
-  };
-
-  const moveSelection = delta => {
-    const count = visible.value.length;
-    if (!count) return;
-    selectedIndex.value = (selectedIndex.value + delta + count) % count;
-  };
-
-  const toggle = () => (isOpen.value ? close() : open());
-
-  const register = source => {
-    sources = [...sources, source];
-    return () => {
-      sources = sources.filter(registered => registered !== source);
-    };
-  };
-
-  const configure = overrides => Object.assign(options, overrides);
-
-  const dispose = () => {
-    close();
-    sources = [];
-  };
-
-  return {
-    isOpen,
-    query,
-    page,
-    pages,
-    visible,
-    sections,
-    selectedIndex,
-    selected,
-    isLoading,
-    open,
-    close,
-    toggle,
-    back,
-    select,
-    setQuery,
-    moveSelection,
-    register,
-    configure,
-    dispose,
-  };
-};
-
-let shared = null;
-
-export const useCommandBar = () => {
-  shared ??= createCommandBar();
-  return shared;
-};