@feugene/granularity
@feugene/granularity 是一个 Vue 3 设计系统软件包,帮助您更快、更清洁和更多构建界面
可以预测:有现成的部件、透明的造型系统、颗粒进口和建造
运输机器生成的货单 而不是设置指令.
它是为设计系统 需要不仅仅是一组UI部件 ——工作工程而建造的 工具:对于一个产品团队来说是方便的,对于一个大应用程序来说是可扩展的,对于不同的采用来说是足够灵活的 战略.
为什么它存在
- 在单一的视觉基础上推出新的屏幕和功能;
- 逐步采用软件包,不改写整个应用程序;
- 来控制
JS财务报告和审定财务报表CSS船,当它真正重要; - 既可以使用同一软件包作为现成组件库,也可以作为低等软件包级API的来源.
为什么 granularity 不错
- 快速开始没有不必要的魔法. 只需导入组件和现成的样式入口即可.
- 颗粒进口. 每个组件都是自己的子路径导出, 所以捆绑背负的正是你 导入, 旁边没有.
- 出自"圣德"风格. 托肯斯(tokens),基底样式,主题,和组件级CSS被分出为清晰的地层.
- 准备真正的规模. 该软件包用于“只是插入几个组件”以及情景: 具有依赖意识的进口、安全清单和精确的CSS管道调试物质.
- 一个插件, 不扫描 . 货船
granum.manifest.json班级 消耗的代币, 依赖性、主题文件和组件 CSS 在构建软件包时进行计算,所以应用程序 读取它们而不是扫描node_modules。 。 。 . - 不只是组件. 除了UI之外,您还获得指令、文件验证 API 和工具条目 基础设施设想.
技术要点
- 根导出 :
@feugene/granularity——插件,可堆肥,公用设施,常数和类型. 部件来了 他们的子道:granum,从根部导入的组件是ComponentRootImportError, (中文(简体) ), 因为选择只能从它的子路径看到一个组件,而根会加载整个包; - 组件子路径导出 :
@feugene/granularity/components/<ComponentName>· ; - 现成CSS入口:
@feugene/granularity/styles.css- 那个slate两种模式中的主题 (单位:千美元)light, (中文(简体) ),dark) 核心组件符号和基层在一个文件中,供消费者使用 不要运行建设管道。 一个模式被对对切换data-theme="slate-dark"A级 组件自己的 CSS 不存在 :granum它从仪表里出来; - 低级基础出口:按部别排列目录的现成主题——
@feugene/granularity/themes/<theme>/root.css加号themes/<theme>/<mode>.css用于您需要的模式—— 或整个模式,themes/<theme>.css· ;@feugene/granularity/styles/base.css, (中文(简体) ),@feugene/granularity/styles/preflight.css· ; - 软件包级 API :
@feugene/granularity/directives, (中文(简体) ),@feugene/granularity/fileValidation· ; - 设计符号作为数据:
@feugene/granularity/tokens; 全球符号、 主题数据和主题构建者生活在@feugene/granularity-tokens,该套件的依赖性; - 构建列表 :
@feugene/granularity/granum.manifest.json- 申请是什么granum()插件 读取;它也记录各类所属的实用词汇engine块。 这个 供应商登记处本身作为@feugene/granularity/granular-provider页:1 包可以扩展它.
限制
RTL 不被支持 . 部件本身有物理方向(pl-编号 :pr-, (中文(简体) ),
ml-编号 :mr-, (中文(简体) ), left-编号 :right-),以及 dir="rtl" 无法在任何地方读取:右到左文档将
制取镜像粘贴、相抵和浮动面板。 这是有意决定 1.x
线条 — 移动到逻辑属性会改变每个组件的外观, 也就是视觉断开
更改并属于主发布,而不是补丁。 见 docs/styling.md。 。 。 .
快开始
yarn add @feugene/granularity vue @floating-ui/dom
@floating-ui/dom 是一个需要的对等依赖,而不是捆绑的:每个浮面板——选择,
菜单、工具提示、弹出器 —— 被定位在它的位置上, 所有使它变成一个的(数据) 也一样
表格、 页形、 侧边栏、 取色器; 从包根导入总是拉出
进来 没有它,应用程序的构建无法解决从
dist/composables/useFloating.js。保持外部表示已经使用的应用程序
活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活.
叠加组件GrModal, (中文(简体) ), GrDrawer, (中文(简体) ), GrDialog, (中文(简体) ), GrImageViewer) 不需要其他东西——
他们的焦点陷阱,层叠和卷轴锁 是包自己的原始. @headlessui/vue
于0.15.0中投放,不是同位相依;如果仅为这个软件包安装,
它可以被删除.
支持的设置是 granum 插件 :
yarn add -D @feugene/granum @feugene/granum-engine-wind
两个包,不是一个: granum 是管道和船只 没有自己的通用发动机,所以
应用程序选择词汇表,并移交实例. @feugene/granum-engine-wind 这是
默认执行 - preset-wind3 加上附加规则 组件被绘制.
// granum.config.ts
import { defineGranumConfig } from '@feugene/granum/vite'
import { windEngine } from '@feugene/granum-engine-wind'
export default defineGranumConfig({
engine: windEngine(),
providers: ['@feugene/granularity'],
appSources: { dirs: ['src'] },
})
该软件包宣布其类的词汇被写作反对——
unocss/preset-wind3+granum@66。有不同方言的引擎会 granum 报告
provider-dialect-mismatch 并命名它必须掉下的每一类,而不是让组件
变成半型。 见 docs/granum.md。 。 。 .
// src/main.ts
import 'virtual:granum.css'
单模块包含五个级联层: 符号、基础、主题、组件的CSS 选中的, 以及它们创建的功能类 .
部件是从它们的子路径导入的:
<script setup lang="ts">
import { GrButton } from '@feugene/granularity/components/GrButton'
</script>
<template>
<GrButton>Save</GrButton>
</template>
没有插件,仍然有静态回落—— @feugene/granularity/styles.css 以物证,
基础层、飞行前和内置 light编号 :dark 主题。 它不携带的是
工具类,所以组件用自己的CSS来渲染,但没有布局.
颗粒进口,数量
| 您导入的 | 齐普 | 枪管 |
|---|---|---|
| 来自根的整个软件包 | 646.5千贝 | 100% |
最轻的部件—— GrSkeleton | 1.7千贝 | < 1% (中文(简体) ) |
中间部分 - GrTextarea | 19.5千贝 | 3% 妇女 |
| 五个最重的在一起 | 251.8千贝 | 占39%(含) |
这些数字 不要加起来:共享代码在每行中再次被计算,但支付一次,这就是为什么
组合显示为结合而非和. 它们是一个上界,是万物的分道扬镳
离开 dist,在应用程序捆绑器进一步摇动并再修改之前.
每个组成部分的重量—— docs/entry-sizes.md。 。 。 .
其余的家属
核心船为通用部件。 任何具有严重依赖性的东西,属于
,或少数消费者需要生活在一个配套的套装中 peer
在这张上,核心保持倾斜, 你只安装你伸手要的东西.
| 软件包 | 版本 | 上面写的 |
|---|---|---|
@feugene/granularity-charts | 4.0.0 (单位:千美元) | 图表——自有SVG,零依赖,以主题符号绘制. |
@feugene/granularity-chrono | 4.0.1 (中文(简体) ) | 日历,日期和时间组件——没有第三方日期部件,没有日期库. |
@feugene/granularity-code | 4.0.1 (中文(简体) ) | 代码表面:取景,编辑和diff——取景器和diff完全没有依赖性. |
@feugene/granularity-dashboard | 3.0.1 (中文(简体) ) | 部件网格——拖动,调整大小,断点和布局持久性,零依赖. |
@feugene/granularity-datasource | 0.1.2 (中文(简体) ) | 列表状态: 排序、 过滤、 呼呼、 URL 同步和无种族获取到一个可堆叠的后面 . |
@feugene/granularity-devtools | 2.1.1 国家 | Vue DevTools面板——一个道具值来自何处,覆盖层堆栈和设计系统警告. |
@feugene/granularity-editor | 4.0.1 (中文(简体) ) | Rich-text编辑:一个由 TipTap 支撑的 GrRichText 字段,有一个设计系统工具栏. |
@feugene/granularity-forms-schema | 3.0.1 (中文(简体) ) | Schema驱动的形式——zod和JSON Schema进入了真实的形式字段,零依赖. |
@feugene/granularity-media | 4.0.0 (单位:千美元) | 媒体组件:图像裁剪,相机捕捉,代码扫描和视频回放. |
@feugene/granularity-test-kit | 2.4.0 (中文(简体) ) | 测试 @ feugene/ granulaity 设计-系统包的门 — 标志、登记和默认合同作为可重复使用的工厂. |
@feugene/granularity-tokens | 2.5.0 (中文(简体) ) | @feugene/granulality的设计符和主题: 符号注册,按模式和主题构建器的主题数据. |
@feugene/unplugin-granularity | 1.2.1 国家 | unplugin-vue-组件解析器——组件和指令的颗粒自动进口. |
文档
docs/README.md概览和文件地图docs/installation.md设施、公共入境点和收养战略docs/styling.md样式层、主题和导入顺序docs/tokens.md—— 组件符号参考(来自每个组件的)tokens.json);全球标志和主题——@feugene/granularity-tokensdocs/entry-sizes.md——每个组件作为子道的重量(由建筑产生)docs/modes.md——应用程序中的模式:切换,岛屿,SSR,配置中你自己的模式themes.md联 合 国@feugene/granularity-tokens——主题:角色,对比规则,构建自己的模式或主题docs/keyboard.md——每个组件的键盘合同docs/overlays.md重叠合同:门户、层叠、Esc,inert,焦点docs/z-index.md——分层尺度docs/ssr.md——服务器侧渲染合同docs/granum.md—— 说granum融合docs/localization.md——软件包插件如何将应用程序本地化docs/directives.md——包裹级指令docs/file-validation.md——文件验证 APIdocs/components.md——已公布组件目录docs/ADDING_COMPONENTS.md——新增部分内部指南