跳转栏

按QQK键,键入几个字母,选择动作. 跳转到栏是命令调色板 在Chatwoot仪表板后面, 包装好任何 Vue 3 应用程序都可以使用它, 任何 JavaScript app可以使用其排名核心.

它很小: 排名核心是没有依赖关系的平版JavaScript( 关于 1 KB gziped; 外壳为原生 <dialog> 用尾风制成 公用事业(约5个KB与核心相接).

• 模糊地匹配重音折叠、区域、嵌入页和前缀
• 火力,所以你用的东西 上升到顶端
• 同步 commands 源在每次按键中排名, 自动 search 来源 按源代码解析,最小查询长度和 AbortSignal
• 键盘和指针处理、打开/关闭运动、骨架行,同时 远程结果负载、 RTL 和 IME 意识

如何组合:你的应用描述它能通过什么 来源, (中文(简体) ), 有标题和标题的平面对象 run 函数。 跳转到栏中进行对等 用户输入什么,而 shell 绘制列表。 包裹什么都不知道 关于你的产品.

这个 指南 通过配置、 Vue 使用、 plain JavaScript的使用和完整的参考. 此 README 是短版本 .

安装

pnpm add @chatwoot/jumpbar

包船编译了ES模块,并附有TypeScript声明; Vue 保持对外. vue 外壳需要3.4或更新.

任何框架

排名核心没有框架依赖性. 反应、 Svelte、 固态或平态 JavaScript 项目导入它 @chatwoot/jumpbar/core 执行《公约》和 自己的列表 :

import { rank, groupBySection, createFrecency } from '@chatwoot/jumpbar/core';

const ranked = rank(items, { text: query, scopes: ['conversation'] });
const sections = groupBySection(ranked);

这个 CommandBar 外壳和 useCommandBar 状态是Vue 3.

样式

壳由Tailwind公用设施建造,并读取从a 小套语义符号,因此适应了任何设计系统.

1. 添加预设并扫描软件包从而生成其类 :

   // tailwind.config.js
   module.exports = {
     presets: [require('@chatwoot/jumpbar/tailwind')],
     content: ['./node_modules/@chatwoot/jumpbar/dist/*.js'],
   };
   

   预设记录 jumpbar-* 作为 CSS 变量的颜色和 打开和关闭键框.

2. 主题 导入中性默认并覆盖您喜欢的内容 (a) 暗值 dark 分类:

   import '@chatwoot/jumpbar/theme.css';
   

   :root {
     --jumpbar-primary: #2781f6;
   }
   

   或者跳过导入并映射到您现有的 Tailwind 颜色上, 将您的暗模式带入:

   theme: {
     extend: {
       colors: {
         jumpbar: {
           background: colors.surface,
           foreground: colors.text,
           primary: colors.brand,
         },
       },
     },
   },
   

   脚本	用于
   background	小组讨论会
   foreground	标题和输入文本
   muted-foreground	字幕、分科标签、面包屑、徽章
   subtle-foreground	占位符、图标、提示、切夫龙
   muted	活行、芯片、相机倒置、骨架行
   subtle	钥匙盖,更轻的骨架栏
   border	分割符和密钥上限大纲
   ring	小组大纲
   primary	活动行标记, 页面芯片文本
   primary-soft	页面芯片背景
   overlay	后投弃
   online busy offline	存在点

3. 提供图标类 i-lucide-search, (中文(简体) ), i-lucide-loader-circle 财务报告和审定财务报表 i-lucide-chevron-right (例如通过) @egoist/tailwindcss-icons 与卢西德集. 物品带来了自己的图标类.

快开始

4个步骤,均见下例:

1. 添加 Tailwind 预设和主题符号(见上文Styling).
2. 渲染器 <CommandBar /> 一次,靠近你的应用程序的根, 并得到共享 状态为 useCommandBar()。 。 。 .
3. 登记来源: commands 对于你已经知道的事情, search 用于用户键入时获取的东西.
4. 绑住快捷键并打电话 bar.toggle()。 。 。 .

<script setup>
import { CommandBar, createFrecency, useCommandBar } from '@chatwoot/jumpbar';

const bar = useCommandBar();

bar.configure({
  prefixes: ['@', '#'],
  context: () => ({ scopes: ['conversation'] }),
  frecency: createFrecency({ storage: localStorage, key: 'palette-usage' }),
  onSelect: item => track(item),
  onClose: () => {},
  onError: (error, source) => report(error),
  limit: 100,
});

bar.register({
  id: 'navigation',
  commands: () => [
    {
      id: 'inbox',
      title: 'Go to inbox',
      section: 'Navigation',
      icon: 'i-lucide-inbox',
      shortcut: ['⌥', 'I'],
      run: () => router.push('/inbox'),
    },
  ],
});

bar.register({
  id: 'contacts',
  minQuery: 3,
  debounce: 300,
  when: ({ page }) => !page,
  search: async ({ text, signal }) => {
    const contacts = await api.search(text, { signal });
    return contacts.map(contact => ({
      id: `contact-${contact.id}`,
      title: contact.name,
      subtitle: contact.email,
      section: 'Contacts',
      avatar: { name: contact.name, src: contact.thumbnail },
      run: () => router.push(`/contacts/${contact.id}`),
    }));
  },
});
</script>

<template>
  <CommandBar
    placeholder="Search or jump to"
    empty-text="No matches"
    :hints="[
      { keys: ['↑', '↓'], label: 'navigate' },
      { keys: ['↵'], label: 'select' },
      { keys: ['esc'], label: 'close' },
    ]"
  />
</template>

自己绑住全局快捷键并打电话 bar.toggle()。 。 。 . bar.open({ page, query }) 直接打开到一页中,例如取斯努兹语.

CommandBar 道具 : placeholder, (中文(简体) ), emptyText, (中文(简体) ), scopeLabel (一个芯片之前 输入,例如选定的记录), hints 财务报告和审定财务报表 dir (单位:千美元)ltr 或者说 rtl) (中文(简体) ).

项目

源返回普通对象 :

来源

bar.register({
  id: 'conversations',
  minQuery: 2,
  debounce: 300,
  when: ({ page }) => !page,
  commands: request => [],
  search: async request => [],
});

commands 运行在每个键盘上并排序. search 运行于 与一个 AbortSignal;其结果保持了自己的顺序,附加于 ,并替换页面上的静态子. 请求包含 query, (中文(简体) ), text, (中文(简体) ), prefix, (中文(简体) ), page, (中文(简体) ), context 还有, 对于 search, (中文(简体) ), matches (有多少命令与当地匹配)和 signal。 。 。 . register 返回再次删除源的函数。 一个搜索器 抛出其行并 onError(error, source) 调用; 默认 复掷出. 最多显示文本查询 limit 排序命令(默认为50).

排名

标题按精确的、前缀的、开始的、每个字开头的、然后 分散的字符。 字幕和关键词只匹配于文字开始,所以 长描述从不淹没列表。 项目在 context.scopes 得到一个助推器, 最近用过的另一件, weight 一个小静态的. place: 'first' 财务报告和审定财务报表 place: 'last' 完全坐在积分之外.

键盘

↑ ↓ 移动, ⌘编号 :Ctrl + 键 ↑ ↓ 跳到第一行或最后一行, Enter 选择, Esc 关闭, Backspace 在空查询中 倒数一页。 Hover只在指针真正移动时更改选择, 因此箭头键在休息光标下继续工作.

发展

pnpm install
pnpm test
pnpm build

来源居住在 src/ 旁边有相片; dist/ 以出版和 没有承诺。 要释放,出事 version 内 package.json 运行 pnpm publish编辑 prepublishOnly 脚本先建立和运行测试, 因此,一个破烂的建筑永远不会到达注册.