@ atscript/ ui 风格
📚 联合国 (原始内容存档于2018-10-21) (英语). ui.atscript.dev
共享 UnoCSS 预设、快捷键、图标加载器、每个组件类安全列表以及预建的 CSS @atscript/vue-form, (中文(简体) ), @atscript/vue-table,以及 @atscript/vue-wf。 。 。 .
该研究面向贡献. 它涵盖了包装船, 为什么每个部件都存在, 以及形成代码的负载决定. 最终用户安装和使用情况
/docs/guide/styling.md。 。 。 .
什么这个包裹船
asPresetVunor(opts)——消费者化的UnoCSS预设. 回返Preset[]与 vunor 的预设、 图标预设、 快捷键合并form编号 :table编号 :wf编号 :common和习惯 提取器 将每个组件类列表拉入消费者的 CSS 捆绑,而没有任何node_modules文件系统扫描 .createAsBaseUnoConfig(opts)—— 预设+快捷键与asPresetVunor不过 无 提取器。 仅限内部脚本(见第13号决定).allShortcuts+ 每一地区出口(formShortcuts, (中文(简体) ),tableShortcuts, (中文(简体) ),wfShortcuts, (中文(简体) ),commonShortcuts, (中文(简体) ),aoothShortcuts)——直接取用快捷图.createIconsLoader(opts)- 仅节点的图标加载器(当地).icons/dir + 在磁盘上 API 缓存)scripts/bake-icons.ts;出口后消费者可以自行驱动presetIcons()举个例子 没有asIconsPreset导出——已烤i-as-*收藏在内部注册asPresetVunor()并关闭icons: false。 。 。 .bakedIcons- 烤出来的name → <svg>地图i-as-*藏书.- 生成的安全列表 时间
src/generated/component-classes.ts已执行(第12号决定)。 再出口公共API:componentClasses, (中文(简体) ),helperAliases, (中文(简体) ),componentPackages, (中文(简体) ),getComponentClasses(...), (中文(简体) ),getHelperClasses(...)。 。 。 . - 预建CSS 时间
dist/css/{all,form,table,wf}.css对非UnoCSS消费者(决定5)。 只默认主题; 不能被主题或过滤 . AsResolver()地点@atscript/ui-styles/vite子路径 -unplugin-vue-components解析地图As*PascalCase标签与每个组件子路径的匹配(@atscript/vue-{form,table,wf}/<as-name>) (中文(简体) ). 只有标记——必须明确进口可堆肥物。 开车经过componentPackages从生成的模块中自动取出新的组件.
带出自己的图标预设
两个 presetIcons() 在 UnoCSS 配置游戏中 i- 前缀
而第二者则永无决心。 当消费者已经经营自己的
图标预设, 关闭我们的 并交给他们 as 替代收藏 :
// uno.config.ts
import presetIcons from "@unocss/preset-icons";
import { asPresetVunor, bakedIcons } from "@atscript/ui-styles";
export default defineConfig({
presets: [
...asPresetVunor({ icons: false }),
presetIcons({
collections: {
// your own collections …
as: (name) => bakedIcons[name],
},
}),
],
});
bakedIcons 正在同步,没有文件系统/网络依赖性。 解决
as 名称从图标化(或您自己的) .icons/*.svg)在建设时间,交换
用于 createIconsLoader({ aliases: defaultAsIconAliases, iconsDir: ".icons" })
——"节点",写上"盘"缓存.
icons: false 仅跳过已烤的相片预设条目——快捷键
组件提取器、键框预设和窗格变体/安全列表
无人知晓。 (自0.1.133起) (中文(简体) )
此软件包为何存在
UnoCSS只为它在消费者源树上看到的类名生成 CSS. 何时 @atscript/vue-form 等从npm安装,他们的班级住在里面 node_modules 而UnoCSS不会扫描那里。 此软件包用自定义解决 提取器 扫描消费者自己的组件导入源 / tags / 助手调用, 并按组件抽取预计算类别列表.
有负载的决定
整个设计原理 STYLES.md。快速贡献出错单 :
决定6——自定义UnoCSS 有五个匹配图案的解析器
createAsExtractor (单位:千美元)src/extractor.ts承认:
- 子路径导入 -
from '@atscript/vue-form/as-form' - 桶名进口——
import { AsForm, AsField } from '@atscript/vue-form' - PascalCase标签 -
<AsForm, (中文(简体) ),<AsTableRoot(实际消费者代码中的主要模式) - Kebab- case 标记 -
<as-form - 辅助功能电话 -
createDefaultTypes(, (中文(简体) ),createDefaultControls(, (中文(简体) ),createDefaultCellTypes(
不知名的警卫是 componentClasses[kebab] - 命令里没有的都是禁止的 PascalCase / kebab 等同处理 src/kebab.ts。 。 。 .
决定11——求助电话检测(默认部件的强制性规定)
createDefaultTypes(), (中文(简体) ), createDefaultControls(),以及 createDefaultCellTypes() 船舶默认字段/细胞组件消费者从不直接标记. 只有标记的提取器会默默地放弃他们的课程. 提取脚本( E)scripts/extract-component-classes.ts)行走每个帮助文件,解析从 ../components/defaults中, kebab- cases 指定标识符, 并发出 helperAliases。当它将帮助者名称视为函数调用(成员调用如: obj.createDefaultTypes() 被领导排除 (?:^|[^.\w]) 警卫.
增加新的助手时,他们必须符合 决定17其布局( e)src/composables/create-*.ts,从 ../components/defaults),或者解析器在再生时会很难失败.
决定13 - createAsBaseUnoConfig 编号 : asPresetVunor 循环断开
里面的提取器 asPresetVunor() 进口 componentClasses。提取脚本需要使用相同的快捷键/预设来运行 UnoCSS componentClasses。如果脚本导入 asPresetVunor()你会有一个鸡蛋.
两个工厂:
createAsBaseUnoConfig({})——预设+快捷键,无提取器. 用于scripts/extract-component-classes.ts财务报告和审定财务报表scripts/build-css.ts。 。 。 .asPresetVunor(opts)——同基+进口的提取器componentClasses消费者使用.
别弄坏这些 别使编成的剧本依赖于取出者.
决定15 - excludeComponents 是比赛后, 消费方, UnoCSS 仅限
asPresetVunor({ excludeComponents: ["as-filter-dialog"] }) 让一个用户放弃他们自己替换的默认组件的类。 不适用 之后 regex 匹配——匹配但被排除在外的组件沉默地不添加类. 此文件已记录在案;替换为 <AsFilterDialog> 在排除它后,它给出了一个未设定的组件,是用户的明确选择.
预建的 CSS 不尊重 excludeComponents。 。 。 . CSS 文件在 dist/css/ 在我们的建设时间,每个软件包的完整安全清单一并生成。 选项是运行时取出器取出取出器;它没有位置在预烤的文物上. 需要放下默认组件的用户必须使用UnoCSS路径.
AsResolver —— 说 componentPackages 是真理的唯一来源
解决者在 src/vite.ts 已经 没有 保持自己的调度表。 它看每个 As* 标记在 componentPackages 表格 ${PKG_TO_NPM[pkg]}/${kebab}当一个新的公共组件 降落在任何vue-*包, 提取脚本把它捡起来, componentPackages 重新生成, 以及下一个建筑上的解析器路径—— 不需要解析器编辑 .
unplugin-vue-components 被电线作为 选项 相对依赖性。 不自动进口的消费者(明确使用) import { AsForm } from "@atscript/vue-form" 任何地方)不需要安装;做自动进口的消费者已经拥有了.
第17号决定——Vue-*包中的加农用组件布局
每个 @atscript/vue-* 软件包遵循一个布局 :
- 公开根 组件
src/components/*.vue。 。 。 . - 公开默认 时间
src/components/defaults/*.vue,通过src/components/defaults/index.ts(纯再出口桶-无逻辑,无辅助功能). - 私人内部 时间
src/components/internal/*.vue——没有输出,没有子路径,但班级仍然通过依赖行走到达安全名单. - 帮助者 时间
src/composables/create-*.ts,仅通过import { AsX, ... } from "../components/defaults"。帮助者别名解析scripts/extract-component-classes.ts取决于这个精确的形状——一个不符合要求的帮助文件会使构建失败.
任何新的组件或帮助者都必须符合要求;否则就无声地用工具来降低或硬失败.
预建CSS——取舍(决定5)
对于不运行UnoCSS的消费者,这个软件包将四个预建的CSS文件装入 dist/css/数字 :
| 文件 | 目录 |
|---|---|
all.css | 横跨形式+表+wf的每个组件. |
form.css | 组件来自 @atscript/vue-form 只有这个. |
table.css | 组件来自 @atscript/vue-table 只有这个. |
wf.css | 组件来自 @atscript/vue-wf 只有这个. |
洞穴:
- 不准编故事. 以默认方式在我们出版时建成一次
asPresetVunor()调色板。 需要自定义主题的消费者必须使用UnoCSS路径. - 没有
excludeComponents。 。 。 . 见上文第15号决定. - 每包文件重叠. 每一个都独立完成——
as-spacer在每一个使用它的包装文件. 不要结合form.css+ 键table.css+ 键wf.css; 装入all.css换句话说.
这个 wf.css 文件今天很小(vue-wf有一个组件),但为了对称性而存在——vue-wf会增长,消费者已经可以装入他们需要的东西了.
出品文物
src/generated/component-classes.ts承诺承诺(第12号决定)。 三张地图+两张助手功能. 以pnpm extract-classes。 CI 必须运行脚本并失败于漂移; 修改的 PRs.vue不重生的模板将被标记 .dist/css/{all,form,table,wf}.css——出土的建筑文物,通过已出版的柏油丸运送files: ["dist"]。由pnpm build-css。 。 。 .
建设管道
pnpm --filter @atscript/ui-styles run build
# expands to:
pnpm extract-classes && vp pack && pnpm build-css
extract-classes(单位:千美元)scripts/extract-component-classes.ts——走 vue-form/table/wf 源文件,运行 UnoCSS,出行src/generated/component-classes.ts。读取磁盘上的源; 没有 消耗他们的dist/。即使在 vue- * 软件包建成之前(决定8),一个干净的退出就可以运行此程序.vp pack- 捆绑两个TS切入点:src/index.ts(主地表)和src/vite.ts(单位:千美元)AsResolver。输出 :dist/{index,vite}.{mjs,cjs,d.mts,d.cts}。 。 。 .build-css(单位:千美元)scripts/build-css.ts——使用createAsBaseUnoConfig()(第13号决定)+componentClasses+ 键componentPackages从生成的模块中释放出四个 CSS 文件。 输出是字节决定的跨行.
快捷键
第六阶段结束后,操场和演示配置不再使用源扫描 vue-{form,table,wf}/src/**。编辑快捷键并看到它反映在操场中需要 @atscript/ui-styles 在监视模式中 :
# terminal 1
pnpm --filter @atscript/ui-styles run dev # vp pack --watch
# terminal 2
pnpm dev
这交易了dev ergonomics 一个干净的,prod类的设置,匹配终端用户得到的.