@ brftech/ filex (英语)
下潜 <filex-explorer> 网络组件 联 合 国
文件x 文件管理器。 环绕
第3组 <FileExplorer> 来自SFC @brftech/filex-core 和船舶
vue 运行时间捆绑在 - 从任何CDN 装入, 嵌入到任意
框架,不需要同行.
安装
无
npm i @brftech/filex
// Side-effect import registers the element.
import '@brftech/filex';
CDN( 无构建步骤)
<script type="module" src="https://cdn.jsdelivr.net/npm/@brftech/filex/dist/filex.js"></script>
⚠
@brftech/filex0.55需要一个文件x 0.55服务器. 打开哪些文件进行编辑 (单位:千美元)edit_kinds),输入限制(limits)和版本行 (单位:千美元)release, (中文(简体) ),commit, (中文(简体) ),built)来自服务器的/api/files/capabilities; 软件包没有它自己的列表要倒下 回来,所以反对一个旧的服务器 没有提供编辑和什么都没有 作为办公文档打开。 用软件包更新服务器 (单位:千美元)API.md (英语)) (中文(简体) ).
⚠ 打印的应用程序 (单位:千美元)
ui.print, filex 0.55 从 filex 自己的指纹 打印页面,该页面为您页面中的探索者框架。 只有文件x, 其桌面 应用程序和服务器FILEX_FRAME_ANCESTORS可能设置该页面,例如 其它网站列出您的页面来源, 否则该应用程序会被告知 打印为unavailable(单位:千美元)安全头和框架) (中文(简体) ).
样式
没有 CSS 导入, 没有 <link>。 。 。 . 捆绑带了探险家的样式表
在 Java 脚本中附加 <head> 一次,第一次,一个
元素挂载 - 所以上面的两行都是页需要的, 不管它们
来自CDN或捆绑商。 没错 @brftech/filex-core工作表字节
字节,这就是保持这个分布和Vue的外观不变的原因.
A 类 style.css 也为那些愿意为
工作表本身 :
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@brftech/filex/dist/style.css">
外观是 --fe-* 自定义属性; 设置在高于
要素(:root和探险家跟随 要件
故意的 故意的 无阴影根 正是因为这个原因 - 主页
符号、暗模式和字体伸入内部。 结果是一个宿主
也不能填补其中的空档,所以顶端栏上的产品标记来自
config.brand (单位:千美元){ name, markUrl }) (中文(简体) ).
使用
普通 HTML 语言
<filex-explorer
api-base="https://files.example.com"
locale="tr"
theme="auto"
></filex-explorer>
<script type="module">
const el = document.querySelector('filex-explorer');
// ⚠ Configure BEFORE the element is registered. A static `import` would be
// hoisted above these lines, mount the explorer with no credentials and
// spend its first listing on a request that can only fail.
el.config = {
apiBase: 'https://files.example.com',
auth: { kind: 'bearer', token: '<jwt>' },
rootPath: 'main://projects/acme',
};
// ⚠ The payload is e.detail[0] - see Events below.
el.addEventListener('error', (e) => console.error(e.detail[0].message));
el.addEventListener('share-created', (e) => navigator.clipboard.writeText(e.detail[0].url));
await import('@brftech/filex'); // registers <filex-explorer>
</script>
在非虚拟框架内
元素只是一个普通的 DOM 自定义元素 - Angular, Svelte, jS,没问题.
<filex-connections> - 在没有浏览器的情况下到达服务器
包注册 a 第二届 键。 文件x 可以作为 第3条, (中文(简体) ),
SFTP 系统, (中文(简体) ), FTPS 系统, (中文(简体) ), NFSv3 请检查url=值 (帮助) 财务报告和审定财务报表 网络数据交换,并加载 filex mount· ;
这是用户对每个协议的证书的薄荷
新建指令 那个 部署而不是带有角度的模板
括号里。 它是相同的组件文件x 管理员面板和文件x
桌面应用程序渲染 - 在任何地方没有第二套指令 .
自兹 页:1 此元素只是“ 如何连接” 表面 。 这个
initial-tab属性和属性changed事件随存储器一起消失 选项卡:它不创建、编辑或删除存储。 储存在 文件管理面板.
<filex-connections></filex-connections>
<script type="module">
import '@brftech/filex';
const el = document.querySelector('filex-connections');
el.setAttribute('closable', ''); // show a close button, emits `close`
el.config = {
apiBase: 'https://files.example.com',
auth: { kind: 'bearer', token: '<jwt>' },
locale: 'tr',
};
el.addEventListener('error', (e) => console.error(e.detail));
</script>
配置它通过
config属性属性 -el.config = { ...el.config, locale: 'tr' }。 。 。 .buildConfig合并{...attributes, ...config}且配置对象获胜,所以属性是 对一个密钥来说 配置是不会带的 那个错误 v0.19.0中发运的: 弹壳在文件列表被保留时被土耳其化 英文和所报告的要素locale === 'tr'整个时间.
见 文件/文件。 。 。 .
属性
简单的属性被自动分解到下面 config 道具 :
| 属性 | 地图到 |
|---|---|
api-base | config.apiBase |
endpoint | config.endpoint (遗产Vuefinder-compat) |
locale | config.locale - 说吧 en, (中文(简体) ), tr,或者服务器有语言包用于(es, (中文(简体) ), de, (中文(简体) ), fr(中文(简体) ). 这是元素的 默认:访问者在探险家所选取的语言 QQ-语言(被放在浏览器中),在证书是他们的时他们的账户语言,他们的浏览器语言居于首位(英语:语言) (中文(简体) ). 右到左语言 此元素 从右到左, 从自己的地方,而不是主机页面. |
theme | config.theme (单位:千美元)light 编号 : dark 编号 : auto(中文(简体) ) |
trash-visible | config.trashVisible |
sidenav | config.sideNav - 导航面板(“ + 新” 菜单 ^ 家/ 与我共享 / 我的股份 / 近期 / Starred / Trash ) - 您的标签分为个人和团队两个组 : Apps 部分, 每个安装的应用程序自己的一行 : 此调用器可以到达的存储 。 现或 ="true" 开始, ="false" 关闭; 缺席保留默认值, 默认值是打开的 . |
connections | config.connections - 面板的"连接"(连接指南;0.57前的"如何连接"和"API密钥"条目). 默认, 除以下 ui-profile="simple" 当呼叫者是时,“ API 密钥” 将另降 应用 符号 - 见 config.callerKind 见下文. |
ui-profile | config.uiProfile - 说吧 "standard" (违约)或 "simple" (一个平板,只列表/网格,没有标签条,没有分割的平板,"连接"/"API密钥"关闭). 两个值,没有第三个:任何其他字符串决定 "standard" 并记录一个控制台线 命名它,所以 "drive" 配置文件为 删除 v. 4.0.0 之后不再减少任何东西 - 通过 "simple" 换成这样 没错 没有 决定外观:"+新"菜单,带有QQK芯片的一个宽头搜索字段,Type/Owner/Modified/Size过滤行,网格中的文件夹/Files部分(由日期标题取而代之,而由Modified排序),信息面板中的细节/活性以及存储行是现在每个嵌入的绘图,没有字符串通过. |
对于任何更丰富的(自动,自定义终点,共享基础,.)设置
config JS在元素创建后的财产. 顶部属性合并
属性.
config.callerKind - 说吧 "user" (a) 个人)或 "app" (一体化:东道主)
应用的代理,一个机器人. "app" 离开属于一个的表面
身份 : API 密钥, (中文(简体) ), 近期, (中文(简体) ), 编剧, (中文(简体) ), 与我共享上传
存储,倒盘和"连接"留下,所以嵌入体仍然是嵌入体.
关闭它和元素询问服务器( O)GET /api/files/capabilities →
caller_kind)),这是权威的,因为只有服务器知道一个符号的
类型; 当您的页面已经知道时设置它, 以节省之前的时间
回答土地问题。 ⚠ 代理每个访客 一个共享 API 令牌是 "app"
大小写 - 见
文献/磁共振。 。 。 .
活动
土著 CustomEvent- 听着 addEventListener。 。 。 SFC的有效载荷是:
event.detail[0]没有 event.detail: Vue 发送自定义元素的发出
作为 new CustomEvent(name, { detail: args })时 args 是发射的
参数列表. event.detail.url 因此为 undefined,用于
selection-change - 其有效载荷本身是一个阵列- event.detail.length
总是 1。 。 。 .
| 活动 | 有效载荷 - event.detail[0] |
|---|---|
error | { message, context? } |
share-created | { path, url, pin } |
file-opened | { path, basename } |
upload-progress | { uploadId, percent, done } |
selection-change | Array<{ path, basename, type }> |
open-app-store | (无) - 导航板 应用商店 排队被按下。 只绘制于 config.appStorePage: true 当服务器向人显示屏幕时(您有存储屏幕)GET /api/app-store → visible(中文(简体) ) |
构建
pnpm build # vue-tsc + vite lib build → dist/filex.js + dist/style.css
⚠⚠
sideEffects内package.json必须保持匹配 每个 存档 构建发射( e)./dist/*.js, (中文(简体) ),./dist/*.cjs),而非姓名列表. 条目 仅仅是再出口:customElements.define样式表注入 住在旁边的花草块里 和一份不覆盖花草块的清单 让捆绑者放下它 - 然后元素永远不会注册, 工作表 从未注入,而一个 React 或 Vite 主机会使一个空页面没有出错 随便哪里.web/tests/deploy/packageLook.test.ts是警卫.
许可证
麻省理工学院