From c591ab4381d36b2297d74222750ba240999d336e Mon Sep 17 00:00:00 2001 From: liaoxuezhi <2betop.cn@gmail.com> Date: Wed, 2 Nov 2022 22:45:12 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E5=BC=80=E5=8F=91=E7=8E=AF=E5=A2=83?= =?UTF-8?q?=E5=88=87=E6=88=90=20vite=20(#5677)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 尝试使用 vite 跑开发环境 * 尝试使用 vite 跑开发环境 * 尝试使用 vite 跑开发环境 * 尝试使用 vite 跑开发环境 * 样式文档调整 * 修复有多个 __inline 时的报错 * scirpt 调整 * feat:chart接入事件动作 (#5669) * chore: input-group 没有 name 不应该报 warning (#5667) * chore: 处理编译TS Warning，调整TableStore中label解析的顺序 (#5670) * feat: timeline时间轴支持自定义图标 (#5668) * fix:折叠器Collapse自定义图标&inputNumber对含后缀生效 * 修改 * 正则修改 * 正则修改 * 正则修改 * feat:将默认px替换为rem 2px===0.125rem * feat:timeline时间轴支持自定义图标 Co-authored-by: xujiahao01 * fix: 调整echarts-stat使用方式，兼容vite打包异步非esm模块 (#5672) * feat: chart 支持配置加载 geojson 及百度地图 (#5674) * feat: chart 支持配置 geoURL 及 geoName * 增加百度地图配置 * chore: 修复 coverage 运行报错 (#5678) * chore: coverage 执行换成 v8 解决内存问题 (#5679) * 尝试使用 vite 跑开发环境 * amis-formula 也添加 esm 模块 * 代码合并有问题,做些调整 Co-authored-by: hsm-lv <80095014+hsm-lv@users.noreply.github.com> Co-authored-by: 吴多益 Co-authored-by: RUNZE LU <36724300+lurunze1226@users.noreply.github.com> Co-authored-by: 徐佳豪 <1440054388@qq.com> Co-authored-by: xujiahao01 Co-authored-by: 刘丹 <365533093@qq.com> --- README.md | 3 - examples/components/CssDocs.tsx | 280 +- .../cmpt-event-action/FormEvent.jsx | 14 +- .../Form/{Custom.jsx => Custom.tsx} | 0 examples/components/Form/Static.jsx | 3 +- examples/components/Form/SwitchDisplay.jsx | 2254 ++++++++--------- examples/components/MdRenderer.jsx | 1 + examples/components/SchemaRender.jsx | 1 - index.html | 111 + package.json | 27 +- packages/amis-formula/.gitignore | 1 + packages/amis-formula/package.json | 16 +- packages/amis-formula/rollup.config.js | 110 +- packages/amis-formula/scripts/genDoc.ts | 38 +- packages/amis-formula/src/doc.md | 935 +++++++ packages/amis-formula/src/doc.ts | 1601 ++++++++++++ packages/amis-formula/src/filter.ts | 4 +- packages/amis-formula/tsconfig.json | 4 +- packages/amis-ui/package.json | 4 +- packages/amis-ui/scripts/GenDoc.ts | 88 + .../helper/background/_background-color.md | 131 + .../scss/helper/border/_border-color.md | 109 + .../scss/helper/border/_border-radius.md | 86 + .../scss/helper/border/_border-style.md | 11 + .../scss/helper/border/_border-width.md | 31 + .../helper/box-alignment/_align-content.md | 12 + .../scss/helper/box-alignment/_align-items.md | 11 + .../scss/helper/box-alignment/_align-self.md | 11 + .../helper/box-alignment/_justify-content.md | 12 + .../helper/box-alignment/_justify-items.md | 11 + .../helper/box-alignment/_justify-self.md | 11 + .../helper/box-alignment/_place-content.md | 13 + .../scss/helper/box-alignment/_place-items.md | 11 + .../scss/helper/box-alignment/_place-self.md | 11 + .../amis-ui/scss/helper/effect/_box-shadow.md | 16 + .../amis-ui/scss/helper/effect/_opacity.md | 21 + .../amis-ui/scss/helper/flex/_direction.md | 10 + packages/amis-ui/scss/helper/flex/_flex.md | 10 + packages/amis-ui/scss/helper/flex/_grow.md | 8 + packages/amis-ui/scss/helper/flex/_order.md | 20 + packages/amis-ui/scss/helper/flex/_shrink.md | 8 + packages/amis-ui/scss/helper/flex/_wrap.md | 9 + .../amis-ui/scss/helper/grid/_auto-columns.md | 10 + .../amis-ui/scss/helper/grid/_auto-flow.md | 10 + .../amis-ui/scss/helper/grid/_auto-rows.md | 10 + .../scss/helper/grid/_column-start-end.md | 48 + packages/amis-ui/scss/helper/grid/_columns.md | 19 + packages/amis-ui/scss/helper/grid/_gap.md | 117 + .../scss/helper/grid/_row-start-end.md | 48 + packages/amis-ui/scss/helper/grid/_rows.md | 13 + .../amis-ui/scss/helper/layout/_box-sizing.md | 35 + packages/amis-ui/scss/helper/layout/_clear.md | 27 + .../amis-ui/scss/helper/layout/_display.md | 41 + packages/amis-ui/scss/helper/layout/_float.md | 47 + .../amis-ui/scss/helper/layout/_overflow.md | 34 + .../amis-ui/scss/helper/layout/_position.md | 27 + .../helper/layout/_top-right-bottom-left.md | 150 ++ .../amis-ui/scss/helper/layout/_visibility.md | 21 + .../amis-ui/scss/helper/layout/_z-index.md | 37 + .../amis-ui/scss/helper/sizing/_height.md | 103 + packages/amis-ui/scss/helper/sizing/_width.md | 98 + .../amis-ui/scss/helper/spacing/_margin.md | 527 ++++ .../amis-ui/scss/helper/spacing/_padding.md | 265 ++ .../scss/helper/spacing/_space-between.md | 155 ++ .../scss/helper/typography/_font-family.md | 9 + .../scss/helper/typography/_font-size.md | 19 + .../scss/helper/typography/_font-style.md | 8 + .../scss/helper/typography/_font-weight.md | 15 + .../scss/helper/typography/_letter-spacing.md | 12 + .../scss/helper/typography/_line-height.md | 20 + .../helper/typography/_list-style-type.md | 11 + .../scss/helper/typography/_text-align.md | 10 + .../scss/helper/typography/_text-color.md | 110 + .../helper/typography/_text-decoration.md | 9 + .../scss/helper/typography/_text-overflow.md | 9 + .../scss/helper/typography/_text-transform.md | 10 + .../scss/helper/typography/_vertical-align.md | 12 + .../scss/helper/typography/_whitespace.md | 11 + .../scss/helper/typography/_word-break.md | 9 + packages/amis/src/renderers/Icon.tsx | 2 +- packages/amis/tsconfig.json | 1 + scripts/fis3plugin.ts | 62 + scripts/markdownPlugin.ts | 251 ++ scripts/mockApiPlugin.ts | 42 + tsconfig.json | 12 +- vite.config.ts | 79 + 86 files changed, 7290 insertions(+), 1343 deletions(-) rename examples/components/Form/{Custom.jsx => Custom.tsx} (100%) create mode 100644 index.html create mode 100644 packages/amis-formula/src/doc.md create mode 100644 packages/amis-formula/src/doc.ts create mode 100644 packages/amis-ui/scripts/GenDoc.ts create mode 100644 packages/amis-ui/scss/helper/background/_background-color.md create mode 100644 packages/amis-ui/scss/helper/border/_border-color.md create mode 100644 packages/amis-ui/scss/helper/border/_border-radius.md create mode 100644 packages/amis-ui/scss/helper/border/_border-style.md create mode 100644 packages/amis-ui/scss/helper/border/_border-width.md create mode 100644 packages/amis-ui/scss/helper/box-alignment/_align-content.md create mode 100644 packages/amis-ui/scss/helper/box-alignment/_align-items.md create mode 100644 packages/amis-ui/scss/helper/box-alignment/_align-self.md create mode 100644 packages/amis-ui/scss/helper/box-alignment/_justify-content.md create mode 100644 packages/amis-ui/scss/helper/box-alignment/_justify-items.md create mode 100644 packages/amis-ui/scss/helper/box-alignment/_justify-self.md create mode 100644 packages/amis-ui/scss/helper/box-alignment/_place-content.md create mode 100644 packages/amis-ui/scss/helper/box-alignment/_place-items.md create mode 100644 packages/amis-ui/scss/helper/box-alignment/_place-self.md create mode 100644 packages/amis-ui/scss/helper/effect/_box-shadow.md create mode 100644 packages/amis-ui/scss/helper/effect/_opacity.md create mode 100644 packages/amis-ui/scss/helper/flex/_direction.md create mode 100644 packages/amis-ui/scss/helper/flex/_flex.md create mode 100644 packages/amis-ui/scss/helper/flex/_grow.md create mode 100644 packages/amis-ui/scss/helper/flex/_order.md create mode 100644 packages/amis-ui/scss/helper/flex/_shrink.md create mode 100644 packages/amis-ui/scss/helper/flex/_wrap.md create mode 100644 packages/amis-ui/scss/helper/grid/_auto-columns.md create mode 100644 packages/amis-ui/scss/helper/grid/_auto-flow.md create mode 100644 packages/amis-ui/scss/helper/grid/_auto-rows.md create mode 100644 packages/amis-ui/scss/helper/grid/_column-start-end.md create mode 100644 packages/amis-ui/scss/helper/grid/_columns.md create mode 100644 packages/amis-ui/scss/helper/grid/_gap.md create mode 100644 packages/amis-ui/scss/helper/grid/_row-start-end.md create mode 100644 packages/amis-ui/scss/helper/grid/_rows.md create mode 100644 packages/amis-ui/scss/helper/layout/_box-sizing.md create mode 100644 packages/amis-ui/scss/helper/layout/_clear.md create mode 100644 packages/amis-ui/scss/helper/layout/_display.md create mode 100644 packages/amis-ui/scss/helper/layout/_float.md create mode 100644 packages/amis-ui/scss/helper/layout/_overflow.md create mode 100644 packages/amis-ui/scss/helper/layout/_position.md create mode 100644 packages/amis-ui/scss/helper/layout/_top-right-bottom-left.md create mode 100644 packages/amis-ui/scss/helper/layout/_visibility.md create mode 100644 packages/amis-ui/scss/helper/layout/_z-index.md create mode 100644 packages/amis-ui/scss/helper/sizing/_height.md create mode 100644 packages/amis-ui/scss/helper/sizing/_width.md create mode 100644 packages/amis-ui/scss/helper/spacing/_margin.md create mode 100644 packages/amis-ui/scss/helper/spacing/_padding.md create mode 100644 packages/amis-ui/scss/helper/spacing/_space-between.md create mode 100644 packages/amis-ui/scss/helper/typography/_font-family.md create mode 100644 packages/amis-ui/scss/helper/typography/_font-size.md create mode 100644 packages/amis-ui/scss/helper/typography/_font-style.md create mode 100644 packages/amis-ui/scss/helper/typography/_font-weight.md create mode 100644 packages/amis-ui/scss/helper/typography/_letter-spacing.md create mode 100644 packages/amis-ui/scss/helper/typography/_line-height.md create mode 100644 packages/amis-ui/scss/helper/typography/_list-style-type.md create mode 100644 packages/amis-ui/scss/helper/typography/_text-align.md create mode 100644 packages/amis-ui/scss/helper/typography/_text-color.md create mode 100644 packages/amis-ui/scss/helper/typography/_text-decoration.md create mode 100644 packages/amis-ui/scss/helper/typography/_text-overflow.md create mode 100644 packages/amis-ui/scss/helper/typography/_text-transform.md create mode 100644 packages/amis-ui/scss/helper/typography/_vertical-align.md create mode 100644 packages/amis-ui/scss/helper/typography/_whitespace.md create mode 100644 packages/amis-ui/scss/helper/typography/_word-break.md create mode 100644 scripts/fis3plugin.ts create mode 100644 scripts/markdownPlugin.ts create mode 100644 scripts/mockApiPlugin.ts create mode 100644 vite.config.ts diff --git a/README.md b/README.md index ad3796f30..2d8636ad2 100644 --- a/README.md +++ b/README.md @@ -44,9 +44,6 @@ # 安装项目 npm 依赖，在 node 12 下会有报错但不影响正常使用。 npm i --legacy-peer-deps -# 因为需要 require 一个 formula/lib/doc.md 文件，所以需要先生成一下 -npm run build --workspace amis-formula - # 启动项目，等编译结束后通过 http://127.0.0.1:8888/examples/pages/simple 访问。 npm start ``` diff --git a/examples/components/CssDocs.tsx b/examples/components/CssDocs.tsx index 3c71c2821..92ea597ec 100644 --- a/examples/components/CssDocs.tsx +++ b/examples/components/CssDocs.tsx @@ -51,7 +51,9 @@ export const cssDocs = [ label: 'Box Sizing', path: '/zh-CN/style/layout/box-sizing', component: React.lazy(() => - import('amis-ui/scss/helper/layout/_box-sizing.scss').then(wrapDoc) + import( + '../../packages/amis-ui/scss/helper/layout/_box-sizing.md' + ).then(wrapDoc) ) }, @@ -59,7 +61,9 @@ export const cssDocs = [ label: 'Display', path: '/zh-CN/style/layout/display', component: React.lazy(() => - import('amis-ui/scss/helper/layout/_display.scss').then(wrapDoc) + import('../../packages/amis-ui/scss/helper/layout/_display.md').then( + wrapDoc + ) ) }, @@ -67,7 +71,9 @@ export const cssDocs = [ label: 'Floats', path: '/zh-CN/style/layout/floats', component: React.lazy(() => - import('amis-ui/scss/helper/layout/_float.scss').then(wrapDoc) + import('../../packages/amis-ui/scss/helper/layout/_float.md').then( + wrapDoc + ) ) }, @@ -75,7 +81,9 @@ export const cssDocs = [ label: 'Clear', path: '/zh-CN/style/layout/clear', component: React.lazy(() => - import('amis-ui/scss/helper/layout/_clear.scss').then(wrapDoc) + import('../../packages/amis-ui/scss/helper/layout/_clear.md').then( + wrapDoc + ) ) }, @@ -83,7 +91,9 @@ export const cssDocs = [ label: 'Overflow', path: '/zh-CN/style/layout/overflow', component: React.lazy(() => - import('amis-ui/scss/helper/layout/_overflow.scss').then(wrapDoc) + import('../../packages/amis-ui/scss/helper/layout/_overflow.md').then( + wrapDoc + ) ) }, @@ -91,7 +101,9 @@ export const cssDocs = [ label: 'Position', path: '/zh-CN/style/layout/position', component: React.lazy(() => - import('amis-ui/scss/helper/layout/_position.scss').then(wrapDoc) + import('../../packages/amis-ui/scss/helper/layout/_position.md').then( + wrapDoc + ) ) }, @@ -99,9 +111,9 @@ export const cssDocs = [ label: 'Top / Right / Bottom / Left', path: '/zh-CN/style/layout/top-right-bottom-left', component: React.lazy(() => - import('amis-ui/scss/helper/layout/_top-right-bottom-left.scss').then( - wrapDoc - ) + import( + '../../packages/amis-ui/scss/helper/layout/_top-right-bottom-left.md' + ).then(wrapDoc) ) }, @@ -109,7 +121,9 @@ export const cssDocs = [ label: 'Visibility', path: '/zh-CN/style/layout/visibility', component: React.lazy(() => - import('amis-ui/scss/helper/layout/_visibility.scss').then(wrapDoc) + import( + '../../packages/amis-ui/scss/helper/layout/_visibility.md' + ).then(wrapDoc) ) }, @@ -117,7 +131,9 @@ export const cssDocs = [ label: 'Z-Index', path: '/zh-CN/style/layout/z-index', component: React.lazy(() => - import('amis-ui/scss/helper/layout/_z-index.scss').then(wrapDoc) + import('../../packages/amis-ui/scss/helper/layout/_z-index.md').then( + wrapDoc + ) ) } ] @@ -130,7 +146,9 @@ export const cssDocs = [ label: 'Flex Direction', path: '/zh-CN/style/flex/direction', component: React.lazy(() => - import('amis-ui/scss/helper/flex/_direction.scss').then(wrapDoc) + import('../../packages/amis-ui/scss/helper/flex/_direction.md').then( + wrapDoc + ) ) }, @@ -138,7 +156,9 @@ export const cssDocs = [ label: 'Flex Wrap', path: '/zh-CN/style/flex/wrap', component: React.lazy(() => - import('amis-ui/scss/helper/flex/_wrap.scss').then(wrapDoc) + import('../../packages/amis-ui/scss/helper/flex/_wrap.md').then( + wrapDoc + ) ) }, @@ -146,7 +166,9 @@ export const cssDocs = [ label: 'Flex', path: '/zh-CN/style/flex/flex', component: React.lazy(() => - import('amis-ui/scss/helper/flex/_flex.scss').then(wrapDoc) + import('../../packages/amis-ui/scss/helper/flex/_flex.md').then( + wrapDoc + ) ) }, @@ -154,7 +176,9 @@ export const cssDocs = [ label: 'Flex Grow', path: '/zh-CN/style/flex/grow', component: React.lazy(() => - import('amis-ui/scss/helper/flex/_grow.scss').then(wrapDoc) + import('../../packages/amis-ui/scss/helper/flex/_grow.md').then( + wrapDoc + ) ) }, @@ -162,7 +186,9 @@ export const cssDocs = [ label: 'Flex Shrink', path: '/zh-CN/style/flex/shrink', component: React.lazy(() => - import('amis-ui/scss/helper/flex/_shrink.scss').then(wrapDoc) + import('../../packages/amis-ui/scss/helper/flex/_shrink.md').then( + wrapDoc + ) ) }, @@ -170,7 +196,9 @@ export const cssDocs = [ label: 'Flex Order', path: '/zh-CN/style/flex/order', component: React.lazy(() => - import('amis-ui/scss/helper/flex/_order.scss').then(wrapDoc) + import('../../packages/amis-ui/scss/helper/flex/_order.md').then( + wrapDoc + ) ) } ] @@ -183,58 +211,72 @@ export const cssDocs = [ label: 'Grid Template Columns', path: '/zh-CN/style/grid/columns', component: React.lazy(() => - import('amis-ui/scss/helper/grid/_columns.scss').then(wrapDoc) + import('../../packages/amis-ui/scss/helper/grid/_columns.md').then( + wrapDoc + ) ) }, { label: 'Grid Column Start / End', path: '/zh-CN/style/grid/column-start-end', component: React.lazy(() => - import('amis-ui/scss/helper/grid/_column-start-end.scss').then( - wrapDoc - ) + import( + '../../packages/amis-ui/scss/helper/grid/_column-start-end.md' + ).then(wrapDoc) ) }, { label: 'Grid Template Rows', path: '/zh-CN/style/grid/rows', component: React.lazy(() => - import('amis-ui/scss/helper/grid/_rows.scss').then(wrapDoc) + import('../../packages/amis-ui/scss/helper/grid/_rows.md').then( + wrapDoc + ) ) }, { label: 'Grid Row Start / End', path: '/zh-CN/style/grid/row-start-end', component: React.lazy(() => - import('amis-ui/scss/helper/grid/_row-start-end.scss').then(wrapDoc) + import( + '../../packages/amis-ui/scss/helper/grid/_row-start-end.md' + ).then(wrapDoc) ) }, { label: 'Grid Auto Flow', path: '/zh-CN/style/grid/auto-flow', component: React.lazy(() => - import('amis-ui/scss/helper/grid/_auto-flow.scss').then(wrapDoc) + import('../../packages/amis-ui/scss/helper/grid/_auto-flow.md').then( + wrapDoc + ) ) }, { label: 'Grid Auto Columns', path: '/zh-CN/style/grid/auto-columns', component: React.lazy(() => - import('amis-ui/scss/helper/grid/_auto-columns.scss').then(wrapDoc) + import( + '../../packages/amis-ui/scss/helper/grid/_auto-columns.md' + ).then(wrapDoc) ) }, { label: 'Grid Auto Rows', path: '/zh-CN/style/grid/auto-rows', component: React.lazy(() => - import('amis-ui/scss/helper/grid/_auto-rows.scss').then(wrapDoc) + import('../../packages/amis-ui/scss/helper/grid/_auto-rows.md').then( + wrapDoc + ) ) }, { label: 'Gap', path: '/zh-CN/style/grid/gap', component: React.lazy(() => - import('amis-ui/scss/helper/grid/_gap.scss').then(wrapDoc) + import('../../packages/amis-ui/scss/helper/grid/_gap.md').then( + wrapDoc + ) ) } ] @@ -247,7 +289,7 @@ export const cssDocs = [ path: '/zh-CN/style/box-alignment/justify-content', component: React.lazy(() => import( - 'amis-ui/scss/helper/box-alignment/_justify-content.scss' + '../../packages/amis-ui/scss/helper/box-alignment/_justify-content.md' ).then(wrapDoc) ) }, @@ -256,9 +298,9 @@ export const cssDocs = [ label: 'Justify Items', path: '/zh-CN/style/box-alignment/justify-items', component: React.lazy(() => - import('amis-ui/scss/helper/box-alignment/_justify-items.scss').then( - wrapDoc - ) + import( + '../../packages/amis-ui/scss/helper/box-alignment/_justify-items.md' + ).then(wrapDoc) ) }, @@ -266,9 +308,9 @@ export const cssDocs = [ label: 'Justify Self', path: '/zh-CN/style/box-alignment/justify-self', component: React.lazy(() => - import('amis-ui/scss/helper/box-alignment/_justify-self.scss').then( - wrapDoc - ) + import( + '../../packages/amis-ui/scss/helper/box-alignment/_justify-self.md' + ).then(wrapDoc) ) }, @@ -276,9 +318,9 @@ export const cssDocs = [ label: 'Align Content', path: '/zh-CN/style/box-alignment/align-content', component: React.lazy(() => - import('amis-ui/scss/helper/box-alignment/_align-content.scss').then( - wrapDoc - ) + import( + '../../packages/amis-ui/scss/helper/box-alignment/_align-content.md' + ).then(wrapDoc) ) }, @@ -286,9 +328,9 @@ export const cssDocs = [ label: 'Align Items', path: '/zh-CN/style/box-alignment/align-items', component: React.lazy(() => - import('amis-ui/scss/helper/box-alignment/_align-items.scss').then( - wrapDoc - ) + import( + '../../packages/amis-ui/scss/helper/box-alignment/_align-items.md' + ).then(wrapDoc) ) }, @@ -296,9 +338,9 @@ export const cssDocs = [ label: 'Align Self', path: '/zh-CN/style/box-alignment/align-self', component: React.lazy(() => - import('amis-ui/scss/helper/box-alignment/_align-self.scss').then( - wrapDoc - ) + import( + '../../packages/amis-ui/scss/helper/box-alignment/_align-self.md' + ).then(wrapDoc) ) }, @@ -306,9 +348,9 @@ export const cssDocs = [ label: 'Place Content', path: '/zh-CN/style/box-alignment/place-content', component: React.lazy(() => - import('amis-ui/scss/helper/box-alignment/_place-content.scss').then( - wrapDoc - ) + import( + '../../packages/amis-ui/scss/helper/box-alignment/_place-content.md' + ).then(wrapDoc) ) }, @@ -316,9 +358,9 @@ export const cssDocs = [ label: 'Place Items', path: '/zh-CN/style/box-alignment/place-items', component: React.lazy(() => - import('amis-ui/scss/helper/box-alignment/_place-items.scss').then( - wrapDoc - ) + import( + '../../packages/amis-ui/scss/helper/box-alignment/_place-items.md' + ).then(wrapDoc) ) }, @@ -326,9 +368,9 @@ export const cssDocs = [ label: 'Place Self', path: '/zh-CN/style/box-alignment/place-self', component: React.lazy(() => - import('amis-ui/scss/helper/box-alignment/_place-self.scss').then( - wrapDoc - ) + import( + '../../packages/amis-ui/scss/helper/box-alignment/_place-self.md' + ).then(wrapDoc) ) } ] @@ -341,7 +383,9 @@ export const cssDocs = [ label: 'Padding', path: '/zh-CN/style/spacing/padding', component: React.lazy(() => - import('amis-ui/scss/helper/spacing/_padding.scss').then(wrapDoc) + import('../../packages/amis-ui/scss/helper/spacing/_padding.md').then( + wrapDoc + ) ) }, @@ -349,7 +393,9 @@ export const cssDocs = [ label: 'Margin', path: '/zh-CN/style/spacing/margin', component: React.lazy(() => - import('amis-ui/scss/helper/spacing/_margin.scss').then(wrapDoc) + import('../../packages/amis-ui/scss/helper/spacing/_margin.md').then( + wrapDoc + ) ) }, @@ -357,9 +403,9 @@ export const cssDocs = [ label: 'Space Between', path: '/zh-CN/style/spacing/space-between', component: React.lazy(() => - import('amis-ui/scss/helper/spacing/_space-between.scss').then( - wrapDoc - ) + import( + '../../packages/amis-ui/scss/helper/spacing/_space-between.md' + ).then(wrapDoc) ) } ] @@ -372,14 +418,18 @@ export const cssDocs = [ label: 'Width', path: '/zh-CN/style/sizing/width', component: React.lazy(() => - import('amis-ui/scss/helper/sizing/_width.scss').then(wrapDoc) + import('../../packages/amis-ui/scss/helper/sizing/_width.md').then( + wrapDoc + ) ) }, { label: 'Height', path: '/zh-CN/style/sizing/height', component: React.lazy(() => - import('amis-ui/scss/helper/sizing/_height.scss').then(wrapDoc) + import('../../packages/amis-ui/scss/helper/sizing/_height.md').then( + wrapDoc + ) ) } ] @@ -392,9 +442,9 @@ export const cssDocs = [ label: 'Font Family', path: '/zh-CN/style/typography/font-family', component: React.lazy(() => - import('amis-ui/scss/helper/typography/_font-family.scss').then( - wrapDoc - ) + import( + '../../packages/amis-ui/scss/helper/typography/_font-family.md' + ).then(wrapDoc) ) }, @@ -402,7 +452,9 @@ export const cssDocs = [ label: 'Font Size', path: '/zh-CN/style/typography/font-size', component: React.lazy(() => - import('amis-ui/scss/helper/typography/_font-size.scss').then(wrapDoc) + import( + '../../packages/amis-ui/scss/helper/typography/_font-size.md' + ).then(wrapDoc) ) }, @@ -410,9 +462,9 @@ export const cssDocs = [ label: 'Font style', path: '/zh-CN/style/typography/font-style', component: React.lazy(() => - import('amis-ui/scss/helper/typography/_font-style.scss').then( - wrapDoc - ) + import( + '../../packages/amis-ui/scss/helper/typography/_font-style.md' + ).then(wrapDoc) ) }, @@ -420,9 +472,9 @@ export const cssDocs = [ label: 'Font Weight', path: '/zh-CN/style/typography/font-weight', component: React.lazy(() => - import('amis-ui/scss/helper/typography/_font-weight.scss').then( - wrapDoc - ) + import( + '../../packages/amis-ui/scss/helper/typography/_font-weight.md' + ).then(wrapDoc) ) }, @@ -430,9 +482,9 @@ export const cssDocs = [ label: 'Letter Spacing', path: '/zh-CN/style/typography/letter-spacing', component: React.lazy(() => - import('amis-ui/scss/helper/typography/_letter-spacing.scss').then( - wrapDoc - ) + import( + '../../packages/amis-ui/scss/helper/typography/_letter-spacing.md' + ).then(wrapDoc) ) }, @@ -440,9 +492,9 @@ export const cssDocs = [ label: 'Line Height', path: '/zh-CN/style/typography/line-height', component: React.lazy(() => - import('amis-ui/scss/helper/typography/_line-height.scss').then( - wrapDoc - ) + import( + '../../packages/amis-ui/scss/helper/typography/_line-height.md' + ).then(wrapDoc) ) }, @@ -450,9 +502,9 @@ export const cssDocs = [ label: 'List Style Type', path: '/zh-CN/style/typography/list-style-type', component: React.lazy(() => - import('amis-ui/scss/helper/typography/_list-style-type.scss').then( - wrapDoc - ) + import( + '../../packages/amis-ui/scss/helper/typography/_list-style-type.md' + ).then(wrapDoc) ) }, @@ -460,9 +512,9 @@ export const cssDocs = [ label: 'Text Alignment', path: '/zh-CN/style/typography/text-align', component: React.lazy(() => - import('amis-ui/scss/helper/typography/_text-align.scss').then( - wrapDoc - ) + import( + '../../packages/amis-ui/scss/helper/typography/_text-align.md' + ).then(wrapDoc) ) }, @@ -470,9 +522,9 @@ export const cssDocs = [ label: 'Text Color', path: '/zh-CN/style/typography/text-color', component: React.lazy(() => - import('amis-ui/scss/helper/typography/_text-color.scss').then( - wrapDoc - ) + import( + '../../packages/amis-ui/scss/helper/typography/_text-color.md' + ).then(wrapDoc) ) }, @@ -480,9 +532,9 @@ export const cssDocs = [ label: 'Text Decoration', path: '/zh-CN/style/typography/text-decoration', component: React.lazy(() => - import('amis-ui/scss/helper/typography/_text-decoration.scss').then( - wrapDoc - ) + import( + '../../packages/amis-ui/scss/helper/typography/_text-decoration.md' + ).then(wrapDoc) ) }, @@ -490,9 +542,9 @@ export const cssDocs = [ label: 'Text Transform', path: '/zh-CN/style/typography/text-transform', component: React.lazy(() => - import('amis-ui/scss/helper/typography/_text-transform.scss').then( - wrapDoc - ) + import( + '../../packages/amis-ui/scss/helper/typography/_text-transform.md' + ).then(wrapDoc) ) }, @@ -500,9 +552,9 @@ export const cssDocs = [ label: 'Vertical Alignment', path: '/zh-CN/style/typography/vertical-align', component: React.lazy(() => - import('amis-ui/scss/helper/typography/_vertical-align.scss').then( - wrapDoc - ) + import( + '../../packages/amis-ui/scss/helper/typography/_vertical-align.md' + ).then(wrapDoc) ) }, @@ -510,9 +562,9 @@ export const cssDocs = [ label: 'Whitespace', path: '/zh-CN/style/typography/whitespace', component: React.lazy(() => - import('amis-ui/scss/helper/typography/_whitespace.scss').then( - wrapDoc - ) + import( + '../../packages/amis-ui/scss/helper/typography/_whitespace.md' + ).then(wrapDoc) ) }, @@ -520,9 +572,9 @@ export const cssDocs = [ label: 'Word Break', path: '/zh-CN/style/typography/word-break', component: React.lazy(() => - import('amis-ui/scss/helper/typography/_word-break.scss').then( - wrapDoc - ) + import( + '../../packages/amis-ui/scss/helper/typography/_word-break.md' + ).then(wrapDoc) ) } ] @@ -535,9 +587,9 @@ export const cssDocs = [ label: 'Background Color', path: '/zh-CN/style/background/background-color', component: React.lazy(() => - import('amis-ui/scss/helper/background/_background-color.scss').then( - wrapDoc - ) + import( + '../../packages/amis-ui/scss/helper/background/_background-color.md' + ).then(wrapDoc) ) } ] @@ -550,7 +602,9 @@ export const cssDocs = [ label: 'Border Radius', path: '/zh-CN/style/border/border-radius', component: React.lazy(() => - import('amis-ui/scss/helper/border/_border-radius.scss').then(wrapDoc) + import( + '../../packages/amis-ui/scss/helper/border/_border-radius.md' + ).then(wrapDoc) ) }, @@ -558,7 +612,9 @@ export const cssDocs = [ label: 'Border Width', path: '/zh-CN/style/border/border-width', component: React.lazy(() => - import('amis-ui/scss/helper/border/_border-width.scss').then(wrapDoc) + import( + '../../packages/amis-ui/scss/helper/border/_border-width.md' + ).then(wrapDoc) ) }, @@ -566,7 +622,9 @@ export const cssDocs = [ label: 'Border Color', path: '/zh-CN/style/border/border-color', component: React.lazy(() => - import('amis-ui/scss/helper/border/_border-color.scss').then(wrapDoc) + import( + '../../packages/amis-ui/scss/helper/border/_border-color.md' + ).then(wrapDoc) ) }, @@ -574,7 +632,9 @@ export const cssDocs = [ label: 'Border Style', path: '/zh-CN/style/border/border-style', component: React.lazy(() => - import('amis-ui/scss/helper/border/_border-style.scss').then(wrapDoc) + import( + '../../packages/amis-ui/scss/helper/border/_border-style.md' + ).then(wrapDoc) ) } ] @@ -587,7 +647,9 @@ export const cssDocs = [ label: 'Box Shadow', path: '/zh-CN/style/effect/box-shadow', component: React.lazy(() => - import('amis-ui/scss/helper/effect/_box-shadow.scss').then(wrapDoc) + import( + '../../packages/amis-ui/scss/helper/effect/_box-shadow.md' + ).then(wrapDoc) ) }, @@ -595,7 +657,9 @@ export const cssDocs = [ label: 'Opacity', path: '/zh-CN/style/effect/opacity', component: React.lazy(() => - import('amis-ui/scss/helper/effect/_opacity.scss').then(wrapDoc) + import('../../packages/amis-ui/scss/helper/effect/_opacity.md').then( + wrapDoc + ) ) } ] diff --git a/examples/components/EventAction/cmpt-event-action/FormEvent.jsx b/examples/components/EventAction/cmpt-event-action/FormEvent.jsx index e56e8fd4e..2dcf3cd81 100644 --- a/examples/components/EventAction/cmpt-event-action/FormEvent.jsx +++ b/examples/components/EventAction/cmpt-event-action/FormEvent.jsx @@ -176,16 +176,6 @@ export default { } ] }, - submitSucc: { - actions: [ - { - actionType: 'toast', - args: { - msg: '提交成功：${event.data|json}' - } - } - ] - }, submitSucc: { actions: [ { @@ -254,7 +244,7 @@ export default { { type: 'form', debug: true, - title: "表单：提交表单无target，无api，只触发提交成功事件", + title: '表单：提交表单无target，无api，只触发提交成功事件', body: [ { type: 'input-text', @@ -284,7 +274,7 @@ export default { } } ] - }, + } } } ] diff --git a/examples/components/Form/Custom.jsx b/examples/components/Form/Custom.tsx similarity index 100% rename from examples/components/Form/Custom.jsx rename to examples/components/Form/Custom.tsx diff --git a/examples/components/Form/Static.jsx b/examples/components/Form/Static.jsx index 0b0c368d1..6346c8d1f 100644 --- a/examples/components/Form/Static.jsx +++ b/examples/components/Form/Static.jsx @@ -117,8 +117,7 @@ export default { imageCaption: 'jfe fjkda fejfkda fejk fdajf dajfe jfkda', popOver: { title: '查看大图', - body: - '
' + body: '
' } }, diff --git a/examples/components/Form/SwitchDisplay.jsx b/examples/components/Form/SwitchDisplay.jsx index ed268a86b..ebc0e4a11 100644 --- a/examples/components/Form/SwitchDisplay.jsx +++ b/examples/components/Form/SwitchDisplay.jsx @@ -1,920 +1,920 @@ const renderOptions = ( count = 3, - render = (index) => ({label: `选项${index}`, value: index}) + render = index => ({label: `选项${index}`, value: index}) ) => [...Array(count)].map((item, index) => render(index)); -const renderSelectValues = (count) => +const renderSelectValues = count => [...Array(count)].map((item, index) => index).join(','); export default { - "title": "表单及表单项切换输入态展示态", - "data": { - "id": 1 + title: '表单及表单项切换输入态展示态', + data: { + id: 1 }, - "body": [ + body: [ { - "type": "form", - "title": "整个表单状态切换", - "mode": "horizontal", - "labelWidth": 150, - "id": "allFormSwitch", - "data": { - "isStatic": false + type: 'form', + title: '整个表单状态切换', + mode: 'horizontal', + labelWidth: 150, + id: 'allFormSwitch', + data: { + isStatic: false }, - "body": [ + body: [ { - "type": "input-text", - "name": "var1", - "label": "输入框", - "value": "text" + type: 'input-text', + name: 'var1', + label: '输入框', + value: 'text' }, { - "type": "input-color", - "name": "var2", - "label": "颜色选择", - "value": "#F0F" + type: 'input-color', + name: 'var2', + label: '颜色选择', + value: '#F0F' }, { - "type": "switch", - "name": "switch", - "label": "开关", - "option": "开关说明", - "value": true + type: 'switch', + name: 'switch', + label: '开关', + option: '开关说明', + value: true }, { - "type": "checkboxes", - "name": "checkboxes", - "label": "多选框", - "value": renderSelectValues(12), - "multiple": true, - "options": renderOptions(12) + type: 'checkboxes', + name: 'checkboxes', + label: '多选框', + value: renderSelectValues(12), + multiple: true, + options: renderOptions(12) }, { - "type": "input-tag", - "name": "select11", - "label": "标签选择", - "inline": true, - "value": renderSelectValues(12), - "options": renderOptions(12) + type: 'input-tag', + name: 'select11', + label: '标签选择', + inline: true, + value: renderSelectValues(12), + options: renderOptions(12) }, { - "type": 'button-toolbar', - "name": 'button-toolbar', - "buttons": [ + type: 'button-toolbar', + name: 'button-toolbar', + buttons: [ { - "type": "button", - "label": "提交", - "level": "primary", - "visibleOn": "${!isStatic}", - "onEvent": { - "click": { - "actions": [ + type: 'button', + label: '提交', + level: 'primary', + visibleOn: '${!isStatic}', + onEvent: { + click: { + actions: [ { - "actionType": "setValue", - "componentId": "allFormSwitch", - "args": { - "value": { - "isStatic": true + actionType: 'setValue', + componentId: 'allFormSwitch', + args: { + value: { + isStatic: true } } }, { - "actionType": "static", - "componentId": "allFormSwitch" + actionType: 'static', + componentId: 'allFormSwitch' } ] } } }, { - "type": "button", - "label": "编辑", - "level": "primary", - "visibleOn": "${isStatic}", - "onEvent": { - "click": { - "actions": [ + type: 'button', + label: '编辑', + level: 'primary', + visibleOn: '${isStatic}', + onEvent: { + click: { + actions: [ { - "actionType": "setValue", - "componentId": "allFormSwitch", - "args": { - "value": { - "isStatic": false + actionType: 'setValue', + componentId: 'allFormSwitch', + args: { + value: { + isStatic: false } } }, { - "actionType": "nonstatic", - "componentId": "allFormSwitch" + actionType: 'nonstatic', + componentId: 'allFormSwitch' } ] } } } ], - "className": 'show' - }, + className: 'show' + } ], - "actions": [] + actions: [] }, { - "type": "form", - "title": "单个表单项状态切换", - "mode": "horizontal", - "labelWidth": 150, - "body": [ + type: 'form', + title: '单个表单项状态切换', + mode: 'horizontal', + labelWidth: 150, + body: [ { - "type": "input-text", - "id": "formItemSwitch", - "name": "var1", - "label": "使用事件动作状态切换", - "value": "text" + type: 'input-text', + id: 'formItemSwitch', + name: 'var1', + label: '使用事件动作状态切换', + value: 'text' }, { - "type": 'button-toolbar', - "name": 'button-toolbar', - "buttons": [ + type: 'button-toolbar', + name: 'button-toolbar', + buttons: [ { - "type": "button", - "label": "输入态", - "level": "primary", - "onEvent": { - "click": { - "actions": [ + type: 'button', + label: '输入态', + level: 'primary', + onEvent: { + click: { + actions: [ { - "actionType": "nonstatic", - "componentId": "formItemSwitch" + actionType: 'nonstatic', + componentId: 'formItemSwitch' } ] } } }, { - "type": "button", - "label": "展示态", - "level": "primary", - "onEvent": { - "click": { - "actions": [ + type: 'button', + label: '展示态', + level: 'primary', + onEvent: { + click: { + actions: [ { - "actionType": "static", - "componentId": "formItemSwitch" + actionType: 'static', + componentId: 'formItemSwitch' } ] } } } ], - "className": 'show' - }, + className: 'show' + } ], - "actions": [] + actions: [] }, { - "type": "form", - "title": "表单项展示态属性", - "mode": "horizontal", - "labelWidth": 150, - "body": [ + type: 'form', + title: '表单项展示态属性', + mode: 'horizontal', + labelWidth: 150, + body: [ { - "type": "input-text", - "id": "formItemInputText", - "name": "var1", - "label": "输入态
不设置
或static: false", - "value": "text", - "static": false, - "desc": "使用staticOn 支持表达式控制，用法类似" + type: 'input-text', + id: 'formItemInputText', + name: 'var1', + label: '输入态
不设置
或static: false', + value: 'text', + static: false, + desc: '使用staticOn 支持表达式控制，用法类似' }, { - "type": "input-text", - "id": "formItemInputText", - "name": "var1", - "label": "展示态
static: true", - "value": "text", - "static": true + type: 'input-text', + id: 'formItemInputText', + name: 'var1', + label: '展示态
static: true', + value: 'text', + static: true }, { - "type": "input-text", - "id": "formItemInputText", - "name": "var2", - "label": "空值时的占位 staticPlaceholder", - "staticPlaceholder": "空值占位符，默认为 -", - "static": true + type: 'input-text', + id: 'formItemInputText', + name: 'var2', + label: '空值时的占位 staticPlaceholder', + staticPlaceholder: '空值占位符，默认为 -', + static: true }, { - "type": "input-text", - "name": "var3", - "label": "自定义展示态schema", - "value": "表单项value", - "static": true, - "staticSchema": [ - "自定义前缀 | ", + type: 'input-text', + name: 'var3', + label: '自定义展示态schema', + value: '表单项value', + static: true, + staticSchema: [ + '自定义前缀 | ', { - "type": "tpl", - "tpl": "${var3}" + type: 'tpl', + tpl: '${var3}' }, - " | 自定义后缀", + ' | 自定义后缀' ] } ], - "actions": [] + actions: [] }, { - "type": "form", - "api": "/api/mock2/saveForm?waitSeconds=2", - "id": "myform", - "mode": "horizontal", - "autoFocus": true, - "panel": false, - "debug": false, - "title": "目前支持输入态展示态切换的表单项", - "labelWidth": 150, - "staticClassName": "now-is-static", - "body": [ + type: 'form', + api: '/api/mock2/saveForm?waitSeconds=2', + id: 'myform', + mode: 'horizontal', + autoFocus: true, + panel: false, + debug: false, + title: '目前支持输入态展示态切换的表单项', + labelWidth: 150, + staticClassName: 'now-is-static', + body: [ { - "type": "button-toolbar", - "name": "button-toolbar", - "buttons": [ + type: 'button-toolbar', + name: 'button-toolbar', + buttons: [ { - "type": "button", - "label": "切换为输入态", - "level": "primary", - "onEvent": { - "click": { - "actions": [ + type: 'button', + label: '切换为输入态', + level: 'primary', + onEvent: { + click: { + actions: [ { - "actionType": "nonstatic", - "componentId": "myform" + actionType: 'nonstatic', + componentId: 'myform' } ] } } }, { - "type": "button", - "label": "切换为展示态", - "level": "primary", - "onEvent": { - "click": { - "actions": [ + type: 'button', + label: '切换为展示态', + level: 'primary', + onEvent: { + click: { + actions: [ { - "actionType": "static", - "componentId": "myform" + actionType: 'static', + componentId: 'myform' } ] } } } ], - "className": "show" + className: 'show' }, { - "type": "input-text", - "name": "var1", - "label": "文本", - "value": "text", - "desc": "这是一段描述文字", - "id": "my-input-text" + type: 'input-text', + name: 'var1', + label: '文本', + value: 'text', + desc: '这是一段描述文字', + id: 'my-input-text' }, { - "type": "input-password", - "name": "password", - "label": "密码", - "inline": true, - "value": "123456" + type: 'input-password', + name: 'password', + label: '密码', + inline: true, + value: '123456' }, { - "type": "input-email", - "validations": "isEmail", - "label": "邮箱", - "name": "email", - "value": "hello@baidu.com" + type: 'input-email', + validations: 'isEmail', + label: '邮箱', + name: 'email', + value: 'hello@baidu.com' }, { - "type": "input-url", - "validations": "isUrl", - "label": "url", - "name": "url", - "value": "https://www.baidu.com" + type: 'input-url', + validations: 'isUrl', + label: 'url', + name: 'url', + value: 'https://www.baidu.com' }, { - "type": "input-number", - "name": "number", - "label": "数字", - "placeholder": "", - "inline": true, - "value": 5, - "min": 1, - "max": 10 + type: 'input-number', + name: 'number', + label: '数字', + placeholder: '', + inline: true, + value: 5, + min: 1, + max: 10 }, { - "type": "divider" + type: 'divider' }, { - "type": "native-date", - "name": "native-date", - "label": "native日期选择", - "value": "2022-08-18" + type: 'native-date', + name: 'native-date', + label: 'native日期选择', + value: '2022-08-18' }, { - "type": "native-time", - "name": "native-time", - "label": "native时间选择", - "value": "16:10" + type: 'native-time', + name: 'native-time', + label: 'native时间选择', + value: '16:10' }, { - "type": "native-number", - "name": "native-number", - "label": "native数字输入", - "value": "6" + type: 'native-number', + name: 'native-number', + label: 'native数字输入', + value: '6' }, { - "type": "divider" + type: 'divider' }, { - "type": "input-tag", - "name": "tag", - "label": "标签", - "placeholder": "", - "clearable": true, - "value": "zhugeliang,caocao", - "options": [ + type: 'input-tag', + name: 'tag', + label: '标签', + placeholder: '', + clearable: true, + value: 'zhugeliang,caocao', + options: [ { - "label": "诸葛亮", - "value": "zhugeliang" + label: '诸葛亮', + value: 'zhugeliang' }, { - "label": "曹操", - "value": "caocao" + label: '曹操', + value: 'caocao' }, { - "label": "钟无艳", - "value": "zhongwuyan" + label: '钟无艳', + value: 'zhongwuyan' }, { - "label": "野核", - "children": [ + label: '野核', + children: [ { - "label": "李白", - "value": "libai" + label: '李白', + value: 'libai' }, { - "label": "韩信", - "value": "hanxin" + label: '韩信', + value: 'hanxin' }, { - "label": "云中君", - "value": "yunzhongjun" + label: '云中君', + value: 'yunzhongjun' } ] } ] }, { - "type": "divider" + type: 'divider' }, { - "type": "checkboxes", - "name": "checkboxes", - "label": "多选框", - "value": "1,2", - "options": [ + type: 'checkboxes', + name: 'checkboxes', + label: '多选框', + value: '1,2', + options: [ { - "label": "选项1", - "value": 1 + label: '选项1', + value: 1 }, { - "label": "选项2", - "value": 2 + label: '选项2', + value: 2 }, { - "label": "选项3", - "value": 3 + label: '选项3', + value: 3 } ] }, { - "type": "divider" + type: 'divider' }, { - "type": "radios", - "name": "radios", - "label": "单选", - "value": 3, - "options": [ + type: 'radios', + name: 'radios', + label: '单选', + value: 3, + options: [ { - "label": "选项1", - "value": 1 + label: '选项1', + value: 1 }, { - "label": "选项2", - "value": 2 + label: '选项2', + value: 2 }, { - "label": "选项3", - "value": 3 + label: '选项3', + value: 3 } ] }, { - "type": "divider" + type: 'divider' }, { - "type": "button-group-select", - "name": "btn-group", - "label": "按钮组", - "description": "类似于单选效果", - "value": 1, - "options": [ + type: 'button-group-select', + name: 'btn-group', + label: '按钮组', + description: '类似于单选效果', + value: 1, + options: [ { - "label": "选项 A", - "value": 1 + label: '选项 A', + value: 1 }, { - "label": "选项 B", - "value": 2 + label: '选项 B', + value: 2 }, { - "label": "选项 C", - "value": 3 + label: '选项 C', + value: 3 } ] }, { - "type": "divider" + type: 'divider' }, { - "type": "list-select", - "name": "List", - "label": "List", - "desc": "也差不多，只是展示方式不一样", - "value": 3, - "options": [ + type: 'list-select', + name: 'List', + label: 'List', + desc: '也差不多，只是展示方式不一样', + value: 3, + options: [ { - "label": "选项 A", - "value": 1 + label: '选项 A', + value: 1 }, { - "label": "选项 B", - "value": 2 + label: '选项 B', + value: 2 }, { - "label": "选项 C", - "value": 3 + label: '选项 C', + value: 3 } ] }, { - "type": "divider" + type: 'divider' }, { - "type": "list-select", - "name": "list2", - "label": "List", - "desc": "可多选", - "multiple": true, - "value": renderSelectValues(2), - "options": renderOptions(3) + type: 'list-select', + name: 'list2', + label: 'List', + desc: '可多选', + multiple: true, + value: renderSelectValues(2), + options: renderOptions(3) }, { - "type": "divider" + type: 'divider' }, { - "type": "list-select", - "name": "list4", - "label": "List", - "imageClassName": "thumb-lg", - "desc": "支持放张图片", - "value": renderSelectValues(2), - "options": renderOptions(3, (index) => ({ - "image": "/examples/static/photo/3893101144.jpg", - "value": index, - "label": `图片${index}` + type: 'list-select', + name: 'list4', + label: 'List', + imageClassName: 'thumb-lg', + desc: '支持放张图片', + value: renderSelectValues(2), + options: renderOptions(3, index => ({ + image: '/examples/static/photo/3893101144.jpg', + value: index, + label: `图片${index}` })) }, { - "type": "divider" + type: 'divider' }, { - "type": "list-select", - "name": "list5", - "label": "List", - "desc": "支持文字排版", - "multiple": true, - "value": 1, - "options": renderOptions(3, (index) => ({ - "value": index, - "body": "
\n
套餐：C01
\n
CPU：22核
\n
内存：10GB
\n
SSD盘：1024GB
\n
" + type: 'list-select', + name: 'list5', + label: 'List', + desc: '支持文字排版', + multiple: true, + value: 1, + options: renderOptions(3, index => ({ + value: index, + body: '
\n
套餐：C01
\n
CPU：22核
\n
内存：10GB
\n
SSD盘：1024GB
\n
' })) }, { - "type": "divider" + type: 'divider' }, { - "type": "input-rating", - "count": 5, - "value": 4, - "label": "评分", - "name": "rating", - "half": false + type: 'input-rating', + count: 5, + value: 4, + label: '评分', + name: 'rating', + half: false }, { - "type": "divider" + type: 'divider' }, { - "type": "switch", - "name": "switch", - "label": "开关", - "value": true + type: 'switch', + name: 'switch', + label: '开关', + value: true }, { - "type": "switch", - "name": "switch4", - "value": true, - "onText": "开启", - "offText": "关闭", - "label": "开关文字" + type: 'switch', + name: 'switch4', + value: true, + onText: '开启', + offText: '关闭', + label: '开关文字' }, { - "type": "switch", - "name": "switch5", - "value": true, - "onText": { - "type": "icon", - "icon": "fa fa-check-circle" + type: 'switch', + name: 'switch5', + value: true, + onText: { + type: 'icon', + icon: 'fa fa-check-circle' }, - "offText": { - "type": "icon", - "icon": "fa fa-times-circle" + offText: { + type: 'icon', + icon: 'fa fa-times-circle' }, - "label": "开关icon" + label: '开关icon' }, { - "type": "divider" + type: 'divider' }, { - "type": "checkbox", - "name": "checkbox", - "label": "勾选框", - "option": "同意协议", - "value": true + type: 'checkbox', + name: 'checkbox', + label: '勾选框', + option: '同意协议', + value: true }, { - "type": "divider" + type: 'divider' }, { - "type": "select", - "name": "type", - "label": "下拉单选", - "inline": true, - "value": 1, - "options": [ + type: 'select', + name: 'type', + label: '下拉单选', + inline: true, + value: 1, + options: [ { - "label": "选项1", - "value": 1 + label: '选项1', + value: 1 }, { - "label": "选项2", - "value": 2 + label: '选项2', + value: 2 }, { - "label": "内容很长很长的选项，内容很长很长的选项", - "value": 3 + label: '内容很长很长的选项，内容很长很长的选项', + value: 3 } ] }, { - "type": "divider" + type: 'divider' }, { - "type": "select", - "name": "type2", - "label": "多选", - "multiple": true, - "inline": true, - "value": "1,2", - "options": [ + type: 'select', + name: 'type2', + label: '多选', + multiple: true, + inline: true, + value: '1,2', + options: [ { - "label": "选项1", - "value": 1 + label: '选项1', + value: 1 }, { - "label": "选项2", - "value": 2 + label: '选项2', + value: 2 } ] }, { - "type": "divider" + type: 'divider' }, { - "type": "input-color", - "name": "color", - "label": "Color", - "value": "#dc1717" + type: 'input-color', + name: 'color', + label: 'Color', + value: '#dc1717' }, { - "type": "divider" + type: 'divider' }, { - "type": "input-date", - "name": "date", - "label": "日期", - "value": "1591326307" + type: 'input-date', + name: 'date', + label: '日期', + value: '1591326307' }, { - "type": "input-datetime", - "name": "datetime", - "label": "日期+时间", - "value": "1591326307" + type: 'input-datetime', + name: 'datetime', + label: '日期+时间', + value: '1591326307' }, { - "type": "input-time", - "name": "time", - "label": "时间", - "value": "1591326307" + type: 'input-time', + name: 'time', + label: '时间', + value: '1591326307' }, { - "type": "input-month", - "name": "year-month", - "label": "年月", - "value": "1591326307" + type: 'input-month', + name: 'year-month', + label: '年月', + value: '1591326307' }, { - "type": "input-month", - "name": "month", - "label": "月份", - "value": "1591326307" + type: 'input-month', + name: 'month', + label: '月份', + value: '1591326307' }, { - "type": "input-year", - "name": "year", - "label": "年份", - "value": "1591326307" + type: 'input-year', + name: 'year', + label: '年份', + value: '1591326307' }, { - "type": "input-quarter", - "name": "quarter", - "label": "季度", - "value": "1591326307" + type: 'input-quarter', + name: 'quarter', + label: '季度', + value: '1591326307' }, { - "type": "divider" + type: 'divider' }, { - "type": "input-date-range", - "name": "input-date-range", - "label": "日期范围", - "value": "1661961600,1664553599" + type: 'input-date-range', + name: 'input-date-range', + label: '日期范围', + value: '1661961600,1664553599' }, { - "type": "input-datetime-range", - "name": "input-datetime-range", - "label": "日期时间范围", - "value": "1659283200,1661961599" + type: 'input-datetime-range', + name: 'input-datetime-range', + label: '日期时间范围', + value: '1659283200,1661961599' }, { - "type": "input-time-range", - "name": "input-time-range", - "label": "时间范围", - "value": "15:00,23:27" + type: 'input-time-range', + name: 'input-time-range', + label: '时间范围', + value: '15:00,23:27' }, { - "type": "input-month-range", - "name": "input-month-range", - "label": "月份范围", - "value": "1643644800,1651420799" + type: 'input-month-range', + name: 'input-month-range', + label: '月份范围', + value: '1643644800,1651420799' }, { - "type": "input-year-range", - "name": "input-year-range", - "label": "年份范围", - "value": "1693497600,1790870399" + type: 'input-year-range', + name: 'input-year-range', + label: '年份范围', + value: '1693497600,1790870399' }, { - "type": "input-quarter-range", - "name": "input-quarter-range", - "label": "季度范围", - "value": "1640966400,1664639999" + type: 'input-quarter-range', + name: 'input-quarter-range', + label: '季度范围', + value: '1640966400,1664639999' }, { - "type": "divider" + type: 'divider' }, { - "type": "input-group", - "size": "sm", - "inline": true, - "label": "组合", - "body": [ + type: 'input-group', + size: 'sm', + inline: true, + label: '组合', + body: [ { - "type": "input-text", - "placeholder": "搜索作业ID/名称", - "inputClassName": "b-l-none p-l-none", - "name": "jobName", - "value": "作业" + type: 'input-text', + placeholder: '搜索作业ID/名称', + inputClassName: 'b-l-none p-l-none', + name: 'jobName', + value: '作业' }, { - "type": "input-text", - "placeholder": "搜索作业ID/名称", - "inputClassName": "b-l-none p-l-none", - "name": "jobName", - "value": "家庭作业" + type: 'input-text', + placeholder: '搜索作业ID/名称', + inputClassName: 'b-l-none p-l-none', + name: 'jobName', + value: '家庭作业' } ] }, { - "type": "input-group", - "label": "各种组合", - "inline": true, - "body": [ + type: 'input-group', + label: '各种组合', + inline: true, + body: [ { - "type": "select", - "name": "memoryUnits", - "options": [ + type: 'select', + name: 'memoryUnits', + options: [ { - "label": "Gi", - "value": "Gi" + label: 'Gi', + value: 'Gi' }, { - "label": "Mi", - "value": "Mi" + label: 'Mi', + value: 'Mi' }, { - "label": "Ki", - "value": "Ki" + label: 'Ki', + value: 'Ki' } ], - "value": "Gi" + value: 'Gi' }, { - "type": "input-text", - "name": "memory", - "value": "memory" + type: 'input-text', + name: 'memory', + value: 'memory' }, { - "type": "select", - "name": "memoryUnits2", - "options": [ + type: 'select', + name: 'memoryUnits2', + options: [ { - "label": "Gi", - "value": "Gi" + label: 'Gi', + value: 'Gi' }, { - "label": "Mi", - "value": "Mi" + label: 'Mi', + value: 'Mi' }, { - "label": "Ki", - "value": "Ki" + label: 'Ki', + value: 'Ki' } ], - "value": "Gi" + value: 'Gi' }, { - "type": "button", - "label": "Go" + type: 'button', + label: 'Go' } ] }, { - "type": "divider" + type: 'divider' }, { - "type": "textarea", - "name": "textarea", - "label": "多行文本", - "value": "这是一段多行文本文字\n第二行内容\n2222\n333", - "staticSchema": { - "limit": 3 + type: 'textarea', + name: 'textarea', + label: '多行文本', + value: '这是一段多行文本文字\n第二行内容\n2222\n333', + staticSchema: { + limit: 3 } }, { - "type": "divider" + type: 'divider' }, { - "label": "穿梭器", - "name": "a", - "type": "transfer", - "source": "/api/mock2/form/getOptions?waitSeconds=1", - "searchable": true, - "searchApi": "/api/mock2/options/autoComplete2?term=$term", - "selectMode": "list", - "sortable": true, - "inline": true, - "value": "A,B,C" + label: '穿梭器', + name: 'a', + type: 'transfer', + source: '/api/mock2/form/getOptions?waitSeconds=1', + searchable: true, + searchApi: '/api/mock2/options/autoComplete2?term=$term', + selectMode: 'list', + sortable: true, + inline: true, + value: 'A,B,C' }, { - "label": '组合穿梭器', - "type": 'tabs-transfer', - "name": 'tabs-transfer', - "sortable": true, - "selectMode": 'tree', - "id": 'tab-transfer-receiver', - "resetValue": 'zhugeliang', - "value": "zhugeliang,caocao", - "enableNodePath": true, - "options": [ + label: '组合穿梭器', + type: 'tabs-transfer', + name: 'tabs-transfer', + sortable: true, + selectMode: 'tree', + id: 'tab-transfer-receiver', + resetValue: 'zhugeliang', + value: 'zhugeliang,caocao', + enableNodePath: true, + options: [ { - "label": '成员', - "selectMode": 'tree', - "searchable": true, - "children": [ + label: '成员', + selectMode: 'tree', + searchable: true, + children: [ { - "label": '法师', - "children": [ + label: '法师', + children: [ { - "label": '诸葛亮', - "value": 'zhugeliang' + label: '诸葛亮', + value: 'zhugeliang' } ] }, { - "label": '战士', - "children": [ + label: '战士', + children: [ { - "label": '曹操', - "value": 'caocao' + label: '曹操', + value: 'caocao' }, { - "label": '钟无艳', - "value": 'zhongwuyan' + label: '钟无艳', + value: 'zhongwuyan' } ] }, { - "label": '打野', - "children": [ + label: '打野', + children: [ { - "label": '李白', - "value": 'libai' + label: '李白', + value: 'libai' }, { - "label": '韩信', - "value": 'hanxin' + label: '韩信', + value: 'hanxin' }, { - "label": '云中君', - "value": 'yunzhongjun' + label: '云中君', + value: 'yunzhongjun' } ] } ] }, { - "label": '用户', - "selectMode": 'chained', - "children": [ + label: '用户', + selectMode: 'chained', + children: [ { - "label": '法师', - "children": [ + label: '法师', + children: [ { - "label": '诸葛亮', - "value": 'zhugeliang2' + label: '诸葛亮', + value: 'zhugeliang2' } ] }, { - "label": '战士', - "children": [ + label: '战士', + children: [ { - "label": '曹操', - "value": 'caocao2' + label: '曹操', + value: 'caocao2' }, { - "label": '钟无艳', - "value": 'zhongwuyan2' + label: '钟无艳', + value: 'zhongwuyan2' } ] }, { - "label": '打野', - "children": [ + label: '打野', + children: [ { - "label": '李白', - "value": 'libai2' + label: '李白', + value: 'libai2' }, { - "label": '韩信', - "value": 'hanxin2' + label: '韩信', + value: 'hanxin2' }, { - "label": '云中君', - "value": 'yunzhongjun2' + label: '云中君', + value: 'yunzhongjun2' } ] } ] } ], - "onEvent": { - "change": { - "actions": [ + onEvent: { + change: { + actions: [ { - "actionType": 'toast', - "args": { - "msgType": 'info', - "msg": '${event.data.value|json}' + actionType: 'toast', + args: { + msgType: 'info', + msg: '${event.data.value|json}' } } ] @@ -922,65 +922,65 @@ export default { } }, { - "label": '穿梭器picker', - "type": 'transfer-picker', - "name": 'transfer-picker', - "id": 'transfer-picker-receiver', - "resetValue": 'zhugeliang', - "sortable": true, - "selectMode": 'tree', - "searchable": true, - "value": "zhugeliang,zhongwuyan", - "enableNodePath": true, - "options": [ + label: '穿梭器picker', + type: 'transfer-picker', + name: 'transfer-picker', + id: 'transfer-picker-receiver', + resetValue: 'zhugeliang', + sortable: true, + selectMode: 'tree', + searchable: true, + value: 'zhugeliang,zhongwuyan', + enableNodePath: true, + options: [ { - "label": '法师', - "children": [ + label: '法师', + children: [ { - "label": '诸葛亮', - "value": 'zhugeliang' + label: '诸葛亮', + value: 'zhugeliang' } ] }, { - "label": '战士', - "children": [ + label: '战士', + children: [ { - "label": '曹操', - "value": 'caocao' + label: '曹操', + value: 'caocao' }, { - "label": '钟无艳', - "value": 'zhongwuyan' + label: '钟无艳', + value: 'zhongwuyan' } ] }, { - "label": '打野', - "children": [ + label: '打野', + children: [ { - "label": '李白', - "value": 'libai' + label: '李白', + value: 'libai' }, { - "label": '韩信', - "value": 'hanxin' + label: '韩信', + value: 'hanxin' }, { - "label": '云中君', - "value": 'yunzhongjun' + label: '云中君', + value: 'yunzhongjun' } ] } ], - "onEvent": { - "change": { - "actions": [ + onEvent: { + change: { + actions: [ { - "actionType": 'toast', - "args": { - "msgType": 'info', - "msg": '${event.data.value|json}' + actionType: 'toast', + args: { + msgType: 'info', + msg: '${event.data.value|json}' } } ] @@ -988,142 +988,142 @@ export default { } }, { - "label": '组合穿梭器picker', - "type": 'tabs-transfer-picker', - "name": 'tabs-transfer-picker', - "id": 'tabs-transfer-picker-receiver', - "resetValue": 'zhugeliang', - "value": "caocao,zhongwuyan", - "sortable": true, - "selectMode": 'tree', - "pickerSize": 'md', - "menuTpl": + label: '组合穿梭器picker', + type: 'tabs-transfer-picker', + name: 'tabs-transfer-picker', + id: 'tabs-transfer-picker-receiver', + resetValue: 'zhugeliang', + value: 'caocao,zhongwuyan', + sortable: true, + selectMode: 'tree', + pickerSize: 'md', + menuTpl: "
${label}${email ? `
${email}
${phone}
`: ''}
", - "valueTpl": '${label}(${value})', - "options": [ + valueTpl: '${label}(${value})', + options: [ { - "label": '成员', - "selectMode": 'tree', - "searchable": true, - "children": [ + label: '成员', + selectMode: 'tree', + searchable: true, + children: [ { - "label": '法师', - "children": [ + label: '法师', + children: [ { - "label": '诸葛亮', - "value": 'zhugeliang', - "email": 'zhugeliang@timi.com', - "phone": 13111111111 + label: '诸葛亮', + value: 'zhugeliang', + email: 'zhugeliang@timi.com', + phone: 13111111111 } ] }, { - "label": '战士', - "children": [ + label: '战士', + children: [ { - "label": '曹操', - "value": 'caocao', - "email": 'caocao@timi.com', - "phone": 13111111111 + label: '曹操', + value: 'caocao', + email: 'caocao@timi.com', + phone: 13111111111 }, { - "label": '钟无艳', - "value": 'zhongwuyan', - "email": 'zhongwuyan@timi.com', - "phone": 13111111111 + label: '钟无艳', + value: 'zhongwuyan', + email: 'zhongwuyan@timi.com', + phone: 13111111111 } ] }, { - "label": '打野', - "children": [ + label: '打野', + children: [ { - "label": '李白', - "value": 'libai', - "email": 'libai@timi.com', - "phone": 13111111111 + label: '李白', + value: 'libai', + email: 'libai@timi.com', + phone: 13111111111 }, { - "label": '韩信', - "value": 'hanxin', - "email": 'hanxin@timi.com', - "phone": 13111111111 + label: '韩信', + value: 'hanxin', + email: 'hanxin@timi.com', + phone: 13111111111 }, { - "label": '云中君', - "value": 'yunzhongjun', - "email": 'yunzhongjun@timi.com', - "phone": 13111111111 + label: '云中君', + value: 'yunzhongjun', + email: 'yunzhongjun@timi.com', + phone: 13111111111 } ] } ] }, { - "label": '角色', - "selectMode": 'list', - "children": [ + label: '角色', + selectMode: 'list', + children: [ { - "label": '角色 1', - "value": 'role1' + label: '角色 1', + value: 'role1' }, { - "label": '角色 2', - "value": 'role2' + label: '角色 2', + value: 'role2' }, { - "label": '角色 3', - "value": 'role3' + label: '角色 3', + value: 'role3' }, { - "label": '角色 4', - "value": 'role4' + label: '角色 4', + value: 'role4' } ] }, { - "label": '部门', - "selectMode": 'tree', - "children": [ + label: '部门', + selectMode: 'tree', + children: [ { - "label": '总部', - "value": 'dep0', - "children": [ + label: '总部', + value: 'dep0', + children: [ { - "label": '部门 1', - "value": 'dep1', - "children": [ + label: '部门 1', + value: 'dep1', + children: [ { - "label": '部门 4', - "value": 'dep4' + label: '部门 4', + value: 'dep4' }, { - "label": '部门 5', - "value": 'dep5' + label: '部门 5', + value: 'dep5' } ] }, { - "label": '部门 2', - "value": 'dep2' + label: '部门 2', + value: 'dep2' }, { - "label": '部门 3', - "value": 'dep3' + label: '部门 3', + value: 'dep3' } ] } ] } ], - "onEvent": { - "change": { - "actions": [ + onEvent: { + change: { + actions: [ { - "actionType": 'toast', - "args": { - "msgType": 'info', - "msg": '${event.data.value|json}' + actionType: 'toast', + args: { + msgType: 'info', + msg: '${event.data.value|json}' } } ] @@ -1131,750 +1131,726 @@ export default { } }, { - "type": "divider" + type: 'divider' }, { - "type": "input-tree", - "name": "tree", - "label": "树", - "iconField": "icon", - "value": "2", - "options": [ + type: 'input-tree', + name: 'tree', + label: '树', + iconField: 'icon', + value: '2', + options: [ { - "label": "Folder A", - "value": 1, - "icon": "fa fa-bookmark", - "children": [ + label: 'Folder A', + value: 1, + icon: 'fa fa-bookmark', + children: [ { - "label": "file A", - "value": 2, - "icon": "fa fa-star" + label: 'file A', + value: 2, + icon: 'fa fa-star' }, { - "label": "file B", - "value": 3 + label: 'file B', + value: 3 } ] }, { - "label": "file C", - "value": 4 + label: 'file C', + value: 4 }, { - "label": "file D", - "value": 5 + label: 'file D', + value: 5 } ] }, { - "type": "input-tree", - "name": "trees", - "label": "树多选", - "multiple": true, - "value": "1-2,5", - "options": [ + type: 'input-tree', + name: 'trees', + label: '树多选', + multiple: true, + value: '1-2,5', + options: [ { - "label": "Folder A", - "value": 1, - "children": [ + label: 'Folder A', + value: 1, + children: [ { - "label": "file A", - "value": 2 + label: 'file A', + value: 2 }, { - "label": "file B", - "value": 3 + label: 'file B', + value: 3 } ] }, { - "label": "file C", - "value": 4 + label: 'file C', + value: 4 }, { - "label": "file D", - "value": 5 + label: 'file D', + value: 5 } ] }, { - "type": "tree-select", - "name": "selecttree", - "label": "树选择器", - "value": "5", - "options": [ + type: 'tree-select', + name: 'selecttree', + label: '树选择器', + value: '5', + options: [ { - "label": "Folder A", - "value": 1, - "children": [ + label: 'Folder A', + value: 1, + children: [ { - "label": "file A", - "value": 2 + label: 'file A', + value: 2 }, { - "label": "file B", - "value": 3 + label: 'file B', + value: 3 } ] }, { - "label": "file C", - "value": 4 + label: 'file C', + value: 4 }, { - "label": "file D", - "value": 5 + label: 'file D', + value: 5 } ] }, { - "type": "tree-select", - "name": "selecttrees", - "label": "树多选选择器", - "enableNodePath": true, - "multiple": true, - "value": "1-2,5", - "options": [ + type: 'tree-select', + name: 'selecttrees', + label: '树多选选择器', + enableNodePath: true, + multiple: true, + value: '1-2,5', + options: [ { - "label": "Folder A", - "value": 1, - "children": [ + label: 'Folder A', + value: 1, + children: [ { - "label": "file A", - "value": 2 + label: 'file A', + value: 2 }, { - "label": "file B", - "value": 3 + label: 'file B', + value: 3 } ] }, { - "label": "file C", - "value": 4 + label: 'file C', + value: 4 }, { - "label": "file D", - "value": 5 + label: 'file D', + value: 5 } ] }, { - "type": "divider" + type: 'divider' }, { - "type": "nested-select", - "name": "nestedSelect", - "label": "级联选择器", - "value": "definitions", - "options": [ + type: 'nested-select', + name: 'nestedSelect', + label: '级联选择器', + value: 'definitions', + options: [ { - "label": "概念", - "value": "concepts", - "children": [ + label: '概念', + value: 'concepts', + children: [ { - "label": "配置与组件", - "value": "schema" + label: '配置与组件', + value: 'schema' }, { - "label": "数据域与数据链", - "value": "scope" + label: '数据域与数据链', + value: 'scope' }, { - "label": "模板", - "value": "template" + label: '模板', + value: 'template' }, { - "label": "数据映射", - "value": "data-mapping" + label: '数据映射', + value: 'data-mapping' }, { - "label": "表达式", - "value": "expression" + label: '表达式', + value: 'expression' }, { - "label": "联动", - "value": "linkage" + label: '联动', + value: 'linkage' }, { - "label": "行为", - "value": "action" + label: '行为', + value: 'action' }, { - "label": "样式", - "value": "style" + label: '样式', + value: 'style' } ] }, { - "label": "类型", - "value": "types", - "children": [ + label: '类型', + value: 'types', + children: [ { - "label": "SchemaNode", - "value": "schemanode" + label: 'SchemaNode', + value: 'schemanode' }, { - "label": "API", - "value": "api" + label: 'API', + value: 'api' }, { - "label": "Definitions", - "value": "definitions" + label: 'Definitions', + value: 'definitions' } ] }, { - "label": "组件", - "value": "zujian", - "children": [ + label: '组件', + value: 'zujian', + children: [ { - "label": "布局", - "value": "buju", - "children": [ + label: '布局', + value: 'buju', + children: [ { - "label": "Page 页面", - "value": "page" + label: 'Page 页面', + value: 'page' }, { - "label": "Container 容器", - "value": "container" + label: 'Container 容器', + value: 'container' }, { - "label": "Collapse 折叠器", - "value": "Collapse" + label: 'Collapse 折叠器', + value: 'Collapse' } ] }, { - "label": "功能", - "value": "gongneng", - "children": [ + label: '功能', + value: 'gongneng', + children: [ { - "label": "Action 行为按钮", - "value": "action-type" + label: 'Action 行为按钮', + value: 'action-type' }, { - "label": "App 多页应用", - "value": "app" + label: 'App 多页应用', + value: 'app' }, { - "label": "Button 按钮", - "value": "button" + label: 'Button 按钮', + value: 'button' } ] }, { - "label": "数据输入", - "value": "shujushuru", - "children": [ + label: '数据输入', + value: 'shujushuru', + children: [ { - "label": "Form 表单", - "value": "form" + label: 'Form 表单', + value: 'form' }, { - "label": "FormItem 表单项", - "value": "formitem" + label: 'FormItem 表单项', + value: 'formitem' }, { - "label": "Options 选择器表单项", - "value": "options" + label: 'Options 选择器表单项', + value: 'options' } ] }, { - "label": "数据展示", - "value": "shujuzhanshi", - "children": [ + label: '数据展示', + value: 'shujuzhanshi', + children: [ { - "label": "CRUD 增删改查", - "value": "crud" + label: 'CRUD 增删改查', + value: 'crud' }, { - "label": "Table 表格", - "value": "table" + label: 'Table 表格', + value: 'table' }, { - "label": "Card 卡片", - "value": "card" + label: 'Card 卡片', + value: 'card' } ] }, { - "label": "反馈", - "value": "fankui" + label: '反馈', + value: 'fankui' } ] } ] }, { - "type": "nested-select", - "name": "nestedSelectMul", - "label": "级联选择器多选", - "multiple": true, - "checkAll": false, - "value": "definitions", - "options": [ + type: 'nested-select', + name: 'nestedSelectMul', + label: '级联选择器多选', + multiple: true, + checkAll: false, + value: 'definitions', + options: [ { - "label": "概念", - "value": "concepts", - "children": [ + label: '概念', + value: 'concepts', + children: [ { - "label": "配置与组件", - "value": "schema" + label: '配置与组件', + value: 'schema' }, { - "label": "数据域与数据链", - "value": "scope" + label: '数据域与数据链', + value: 'scope' }, { - "label": "模板", - "value": "template" + label: '模板', + value: 'template' }, { - "label": "数据映射", - "value": "data-mapping" + label: '数据映射', + value: 'data-mapping' }, { - "label": "表达式", - "value": "expression" + label: '表达式', + value: 'expression' }, { - "label": "联动", - "value": "linkage" + label: '联动', + value: 'linkage' }, { - "label": "行为", - "value": "action" + label: '行为', + value: 'action' }, { - "label": "样式", - "value": "style" + label: '样式', + value: 'style' } ] }, { - "label": "类型", - "value": "types", - "children": [ + label: '类型', + value: 'types', + children: [ { - "label": "SchemaNode", - "value": "schemanode" + label: 'SchemaNode', + value: 'schemanode' }, { - "label": "API", - "value": "api" + label: 'API', + value: 'api' }, { - "label": "Definitions", - "value": "definitions" + label: 'Definitions', + value: 'definitions' } ] }, { - "label": "组件", - "value": "zujian", - "children": [ + label: '组件', + value: 'zujian', + children: [ { - "label": "布局", - "value": "buju", - "children": [ + label: '布局', + value: 'buju', + children: [ { - "label": "Page 页面", - "value": "page" + label: 'Page 页面', + value: 'page' }, { - "label": "Container 容器", - "value": "container" + label: 'Container 容器', + value: 'container' }, { - "label": "Collapse 折叠器", - "value": "Collapse" + label: 'Collapse 折叠器', + value: 'Collapse' } ] }, { - "label": "功能", - "value": "gongneng", - "children": [ + label: '功能', + value: 'gongneng', + children: [ { - "label": "Action 行为按钮", - "value": "action-type" + label: 'Action 行为按钮', + value: 'action-type' }, { - "label": "App 多页应用", - "value": "app" + label: 'App 多页应用', + value: 'app' }, { - "label": "Button 按钮", - "value": "button" + label: 'Button 按钮', + value: 'button' } ] }, { - "label": "数据输入", - "value": "shujushuru", - "children": [ + label: '数据输入', + value: 'shujushuru', + children: [ { - "label": "Form 表单", - "value": "form" + label: 'Form 表单', + value: 'form' }, { - "label": "FormItem 表单项", - "value": "formitem" + label: 'FormItem 表单项', + value: 'formitem' }, { - "label": "Options 选择器表单项", - "value": "options" + label: 'Options 选择器表单项', + value: 'options' } ] }, { - "label": "数据展示", - "value": "shujuzhanshi", - "children": [ + label: '数据展示', + value: 'shujuzhanshi', + children: [ { - "label": "CRUD 增删改查", - "value": "crud" + label: 'CRUD 增删改查', + value: 'crud' }, { - "label": "Table 表格", - "value": "table" + label: 'Table 表格', + value: 'table' }, { - "label": "Card 卡片", - "value": "card" + label: 'Card 卡片', + value: 'card' } ] }, { - "label": "反馈", - "value": "fankui" + label: '反馈', + value: 'fankui' } ] } ] }, { - "name": "select3", - "type": "chained-select", - "label": "链式下拉选择器", - "source": "/api/mock2/options/chainedOptions?waitSeconds=1&parentId=$parentId&level=$level&maxLevel=4", - "value": "a,b" + name: 'select3', + type: 'chained-select', + label: '链式下拉选择器', + source: + '/api/mock2/options/chainedOptions?waitSeconds=1&parentId=$parentId&level=$level&maxLevel=4', + value: 'a,b' }, { - "type": "divider" + type: 'divider' }, { - "type": "matrix-checkboxes", - "name": "matrix", - "label": "矩阵开关", - "rowLabel": "行标题说明", - "value": [ + type: 'matrix-checkboxes', + name: 'matrix', + label: '矩阵开关', + rowLabel: '行标题说明', + value: [ [ { - "label": "列1", - "checked": true + label: '列1', + checked: true }, { - "label": "列1", - "checked": false + label: '列1', + checked: false } ], [ { - "label": "列2", - "checked": false + label: '列2', + checked: false }, { - "label": "列2", - "checked": true + label: '列2', + checked: true } - ], - ], - "columns": [ - { - "label": "列1" - }, - { - "label": "列2" - } - ], - "rows": [ - { - "label": "行1" - }, - { - "label": "行2" - } - ] - }, - { - "type": "divider" - }, - { - "type": "combo", - "name": "combo", - "label": "组合单条", - "value": { - "c-1": 1, - "c-2": "a" - }, - "items": [ - { - "name": "c-1", - "label": "名称", - "type": "input-text", - "placeholder": "A" - }, - { - "name": "c-2", - "label": "信息", - "type": "select", - "options": [ - "a", - "b", - "c" - ] - } - ] - }, - { - "type": "divider" - }, - { - "type": "combo", - "name": "combo2", - "label": "组合多条", - "multiple": true, - "value": [ - { - "a": 1, - "b": "a" - }, - { - "a": 2, - "b": "b" - }, - ], - "items": [ - { - "name": "a", - "label": "名称：", - "type": "input-text", - "placeholder": "A" - }, - { - "name": "b", - "label": "信息：", - "type": "select", - "options": [ - "a", - "b", - "c" - ] - } - ] - }, - { - "name": "array", - "label": "颜色集合", - "type": "input-array", - "value": [ - "red", - "blue", - "green" - ], - "inline": true, - "items": { - "type": "input-color", - "clearable": false - } - }, - { - "type": "input-kv", - "name": "kv", - "label": "键值对", - "valueType": "input-number", - "value": { - "count1": 2, - "count2": 4 - } - }, - { - "type": "input-kvs", - "name": "dataModel", - "label": "可嵌套键值对象", - "addButtonText": "新增表", - "keyItem": { - "label": "表名", - "mode": "horizontal", - "type": "select", - "options": [ - "table1", - "table2", - "table3" ] - }, - "valueItems": [ + ], + columns: [ { - "type": "input-kvs", - "addButtonText": "新增字段", - "name": "column", - "keyItem": { - "label": "字段名", - "mode": "horizontal", - "type": "select", - "options": [ - "id", - "title", - "content" - ] + label: '列1' + }, + { + label: '列2' + } + ], + rows: [ + { + label: '行1' + }, + { + label: '行2' + } + ] + }, + { + type: 'divider' + }, + { + type: 'combo', + name: 'combo', + label: '组合单条', + value: { + 'c-1': 1, + 'c-2': 'a' + }, + items: [ + { + name: 'c-1', + label: '名称', + type: 'input-text', + placeholder: 'A' + }, + { + name: 'c-2', + label: '信息', + type: 'select', + options: ['a', 'b', 'c'] + } + ] + }, + { + type: 'divider' + }, + { + type: 'combo', + name: 'combo2', + label: '组合多条', + multiple: true, + value: [ + { + a: 1, + b: 'a' + }, + { + a: 2, + b: 'b' + } + ], + items: [ + { + name: 'a', + label: '名称：', + type: 'input-text', + placeholder: 'A' + }, + { + name: 'b', + label: '信息：', + type: 'select', + options: ['a', 'b', 'c'] + } + ] + }, + { + name: 'array', + label: '颜色集合', + type: 'input-array', + value: ['red', 'blue', 'green'], + inline: true, + items: { + type: 'input-color', + clearable: false + } + }, + { + type: 'input-kv', + name: 'kv', + label: '键值对', + valueType: 'input-number', + value: { + count1: 2, + count2: 4 + } + }, + { + type: 'input-kvs', + name: 'dataModel', + label: '可嵌套键值对象', + addButtonText: '新增表', + keyItem: { + label: '表名', + mode: 'horizontal', + type: 'select', + options: ['table1', 'table2', 'table3'] + }, + valueItems: [ + { + type: 'input-kvs', + addButtonText: '新增字段', + name: 'column', + keyItem: { + label: '字段名', + mode: 'horizontal', + type: 'select', + options: ['id', 'title', 'content'] }, - "valueItems": [ + valueItems: [ { - "type": "switch", - "name": "primary", - "mode": "horizontal", - "label": "是否是主键" + type: 'switch', + name: 'primary', + mode: 'horizontal', + label: '是否是主键' }, { - "type": "select", - "name": "type", - "label": "字段类型", - "mode": "horizontal", - "options": [ - "text", - "int", - "float" - ] + type: 'select', + name: 'type', + label: '字段类型', + mode: 'horizontal', + options: ['text', 'int', 'float'] } ] } ], - "value": { - "table1": { - "column": { - "id": { - "primary": false, - "type": "text" + value: { + table1: { + column: { + id: { + primary: false, + type: 'text' }, - "title": { - "type": "text" + title: { + type: 'text' } } }, - "table2": { - "column": { - "title": { - "type": "int" + table2: { + column: { + title: { + type: 'int' } } } } }, { - "type": "divider" + type: 'divider' }, { - "type": "input-range", - "name": "range", - "label": "范围", - "value": 50 + type: 'input-range', + name: 'range', + label: '范围', + value: 50 }, { - "name": "city", - "type": "input-city", - "label": "城市", - "searchable": true, - "value": 210727 + name: 'city', + type: 'input-city', + label: '城市', + searchable: true, + value: 210727 }, { - "type": "location-picker", - "label": "地理位置", - "name": "location", - "ak": "LiZT5dVbGTsPI91tFGcOlSpe5FDehpf7", - "label": "地址" + type: 'location-picker', + label: '地理位置', + name: 'location', + ak: 'LiZT5dVbGTsPI91tFGcOlSpe5FDehpf7' }, { - "type": "divider" + type: 'divider' }, { - "type": "chart-radios", - "label": "图表单选框", - "name": "main", - "chartValueField": "num", - "value": "a", - "options": [ + type: 'chart-radios', + label: '图表单选框', + name: 'main', + chartValueField: 'num', + value: 'a', + options: [ { - "label": "A", - "num": 100, - "value": "a" + label: 'A', + num: 100, + value: 'a' }, { - "label": "B", - "num": 120, - "value": "b" + label: 'B', + num: 120, + value: 'b' }, { - "label": "C", - "num": 30, - "value": "c" + label: 'C', + num: 30, + value: 'c' }, { - "label": "D", - "num": 40, - "value": "d" + label: 'D', + num: 40, + value: 'd' } ] }, { - "type": "divider" + type: 'divider' }, { - "type": "button-toolbar", - "name": "button-toolbar", - "buttons": [ + type: 'button-toolbar', + name: 'button-toolbar', + buttons: [ { - "type": "button", - "label": "切换为输入态", - "level": "primary", - "onEvent": { - "click": { - "actions": [ + type: 'button', + label: '切换为输入态', + level: 'primary', + onEvent: { + click: { + actions: [ { - "actionType": "nonstatic", - "componentId": "myform" + actionType: 'nonstatic', + componentId: 'myform' } ] } } }, { - "type": "button", - "label": "切换为展示态", - "level": "primary", - "onEvent": { - "click": { - "actions": [ + type: 'button', + label: '切换为展示态', + level: 'primary', + onEvent: { + click: { + actions: [ { - "actionType": "static", - "componentId": "myform" + actionType: 'static', + componentId: 'myform' } ] } } }, { - "type": "button", - "label": "清空", - "onEvent": { - "click": { - "actions": [ + type: 'button', + label: '清空', + onEvent: { + click: { + actions: [ { - "actionType": "clear", - "componentId": "myform" + actionType: 'clear', + componentId: 'myform' } ] } @@ -1883,7 +1859,7 @@ export default { ] } ], - "actions": [] + actions: [] } ] }; diff --git a/examples/components/MdRenderer.jsx b/examples/components/MdRenderer.jsx index c0fef87ec..5a72a5011 100644 --- a/examples/components/MdRenderer.jsx +++ b/examples/components/MdRenderer.jsx @@ -157,6 +157,7 @@ class Preview extends React.Component { } export default function (doc) { + doc = doc.default || doc; return class extends React.Component { popoverDom = null; diff --git a/examples/components/SchemaRender.jsx b/examples/components/SchemaRender.jsx index ab69196dc..8a62aea1c 100644 --- a/examples/components/SchemaRender.jsx +++ b/examples/components/SchemaRender.jsx @@ -2,7 +2,6 @@ import React from 'react'; import {render, toast, Button, LazyComponent, Drawer} from 'amis'; import axios from 'axios'; import Portal from 'react-overlays/Portal'; -import {toast} from 'amis'; import {normalizeLink} from 'amis-core'; import {withRouter} from 'react-router'; import copy from 'copy-to-clipboard'; diff --git a/index.html b/index.html new file mode 100644 index 000000000..9ff917fc2 --- /dev/null +++ b/index.html @@ -0,0 +1,111 @@ + + + + + amis - 低代码前端框架 + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/package.json b/package.json index e0cc0cddb..7192e9d36 100644 --- a/package.json +++ b/package.json @@ -7,10 +7,11 @@ "packages/amis" ], "scripts": { - "serve": "fis3 server start --www ./public --port 8888 --no-daemon --no-browse", - "start": "concurrently --restart-tries -1 npm:serve npm:dev", - "stop": "fis3 server stop", - "dev": "fis3 release -cwd ./public", + "fis3-serve": "fis3 server start --www ./public --port 8888 --no-daemon --no-browse", + "fis3": "concurrently --restart-tries -1 npm:fis3-serve npm:fis3-dev", + "fis3-stop": "fis3 server stop", + "start": "vite", + "fis3-dev": "fis3 release -cwd ./public", "deploy-gh-page": "sh ./deploy-gh-pages.sh", "build": "npm run build --workspaces", "test": "npm test --workspaces", @@ -23,14 +24,18 @@ "publish-to-internal": "sh ./publish-to-internal.sh" }, "dependencies": { - "marked": "^4.0.16", "postcss": "^8.4.14", - "prismjs": "^1.28.0", "qs": "6.9.7" }, "devDependencies": { + "@types/express": "^4.17.14", "@types/jest": "^28.1.0", + "@types/js-yaml": "^4.0.5", + "@types/marked": "^4.0.7", + "@types/prismjs": "^1.26.0", + "@vitejs/plugin-react": "^2.2.0", "echarts": "5.4.0", + "express": "^4.18.2", "fis-optimizer-terser": "^1.0.1", "fis-parser-sass": "^1.2.0", "fis-parser-svgr": "^1.0.0", @@ -48,10 +53,20 @@ "husky": "^8.0.0", "jest": "^29.0.3", "jest-environment-jsdom": "^29.0.3", + "js-yaml": "^4.1.0", "lerna": "^5.5.2", + "magic-string": "^0.26.7", + "marked": "^4.2.1", + "plugin-react-i18n": "^0.0.20", + "prismjs": "^1.29.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "rollup-pluginutils": "^2.8.2", + "setprototypeof": "^1.2.0", "ts-jest": "^29.0.2", + "vite": "^3.2.2", + "vite-plugin-monaco-editor": "^1.1.0", + "vite-plugin-svgr": "^2.2.2", "zrender": "^5.3.2" }, "jest": { diff --git a/packages/amis-formula/.gitignore b/packages/amis-formula/.gitignore index 31dae4e58..955d7bb36 100644 --- a/packages/amis-formula/.gitignore +++ b/packages/amis-formula/.gitignore @@ -1,2 +1,3 @@ /coverage /lib +/esm diff --git a/packages/amis-formula/package.json b/packages/amis-formula/package.json index 75ef5dc9e..b87101d5f 100644 --- a/packages/amis-formula/package.json +++ b/packages/amis-formula/package.json @@ -3,9 +3,10 @@ "version": "2.4.0", "description": "负责 amis 里面的表达式实现，内置公式，编辑器等", "main": "lib/index.js", + "module": "esm/index.js", "types": "lib/index.d.ts", "scripts": { - "build": "npm run clean-dist && NODE_ENV=production rollup -c && npm run genDoc && npm run declaration ", + "build": "npm run clean-dist && npm run genDoc && NODE_ENV=production rollup -c && cp src/doc.md lib/doc.md && cp src/doc.md esm/doc.md", "lib": "npm run clean-dist && NODE_ENV=production IS_LIB=1 rollup -c", "clean-dist": "rimraf lib/**", "declaration": "tsc --project tsconfig-for-declaration.json --allowJs --declaration --emitDeclarationOnly --declarationDir ./lib --rootDir ./src", @@ -14,6 +15,16 @@ "coverage": "jest --coverage", "genDoc": "ts-node ./scripts/genDoc.ts" }, + "exports": { + ".": { + "require": "./lib/index.js", + "import": "./esm/index.js" + }, + "./lib/*": { + "require": "./lib/*.js", + "import": "./esm/*.js" + } + }, "repository": { "type": "git", "url": "git+https://github.com/aisuda/amis-tpl.git" @@ -25,7 +36,8 @@ "formula" ], "files": [ - "lib" + "lib", + "esm" ], "author": "fex", "license": "MIT", diff --git a/packages/amis-formula/rollup.config.js b/packages/amis-formula/rollup.config.js index a0602bb1b..034182131 100644 --- a/packages/amis-formula/rollup.config.js +++ b/packages/amis-formula/rollup.config.js @@ -3,11 +3,16 @@ import commonjs from '@rollup/plugin-commonjs'; import json from '@rollup/plugin-json'; import resolve from '@rollup/plugin-node-resolve'; import typescript from '@rollup/plugin-typescript'; -import {terser} from 'rollup-plugin-terser'; import license from 'rollup-plugin-license'; -import {name, version, main, author, dependencies} from './package.json'; - -const isForLib = process.env.IS_LIB || false; +import { + name, + version, + main, + module, + author, + dependencies +} from './package.json'; +import path from 'path'; const settings = { globals: {} @@ -23,52 +28,79 @@ const external = id => .join('|')})` ).test(id); -export default { - input: isForLib ? './scripts/lib.ts' : './src/index.ts', - output: [ - { - file: isForLib ? 'lib/formula.js' : main, - name: isForLib ? 'formula' : main, - ...settings, - format: isForLib ? 'iife' : 'cjs', - plugins: [isForLib && terser()], - strict: !isForLib, - footer: isForLib - ? `var evaluate = formula.evaluate; - var momentFormat = formula.momentFormat; - var parse = formula.parse;` - : '' - } - ], - external: isForLib ? [] : external, +export default [ + { + input: ['./src/index.ts', './src/doc.ts'], + output: [ + { + ...settings, + dir: path.dirname(main), + format: 'cjs', + exports: 'named', + preserveModulesRoot: './src', + preserveModules: true // Keep directory structure and files + } + ], + external: external, + plugins: getPlugins('cjs') + }, + { + input: ['./src/index.ts', './src/doc.ts'], + output: [ + { + ...settings, + dir: path.dirname(module), + format: 'esm', + exports: 'named', + preserveModulesRoot: './src', + preserveModules: true // Keep directory structure and files + } + ], + external: external, + plugins: getPlugins('esm') + } +]; - plugins: [ +function getPlugins(format = 'esm') { + const typeScriptOptions = { + typescript: require('typescript'), + sourceMap: false, + outputToFilesystem: true, + + ...(format === 'esm' + ? { + compilerOptions: { + rootDir: './src', + outDir: path.dirname(module) + } + } + : { + compilerOptions: { + rootDir: './src', + outDir: path.dirname(main) + } + }) + }; + + return [ json(), resolve({ jsnext: true, main: true, browser: true }), - typescript({ - typescript: require('typescript'), - sourceMap: false, - outputToFilesystem: true + typescript(typeScriptOptions), + commonjs({ + include: 'node_modules/**', + extensions: ['.js'], + ignoreGlobal: false, + sourceMap: false }), - commonjs( - isForLib - ? {} - : { - include: 'node_modules/**', - extensions: ['.js'], - ignoreGlobal: false, - sourceMap: false - } - ), license({ banner: ` ${name} v${version} Copyright 2021<%= moment().format('YYYY') > 2021 ? '-' + moment().format('YYYY') : null %> ${author} ` }) - ] -}; + ]; +} diff --git a/packages/amis-formula/scripts/genDoc.ts b/packages/amis-formula/scripts/genDoc.ts index dd408ee15..63b9eb52d 100644 --- a/packages/amis-formula/scripts/genDoc.ts +++ b/packages/amis-formula/scripts/genDoc.ts @@ -4,8 +4,8 @@ import doctrine from 'doctrine'; const workDir = path.resolve(path.dirname(__dirname)); const jsFile = path.join(workDir, 'src/evalutor.ts'); -const outputFile = path.join(workDir, 'lib/doc.js'); -const outputMD = path.join(workDir, 'lib/doc.md'); +const outputFile = path.join(workDir, 'src/doc.ts'); +const outputMD = path.join(workDir, 'src/doc.md'); function getFormulaComments(contents: string) { const comments: Array<{ @@ -89,37 +89,29 @@ async function main(...params: Array) { fs.writeFileSync( outputFile, - `/**\n * 公式文档\n */\nexports.doc = ${JSON.stringify( - result, - null, - 2 - )}`.replace(/\"(\w+)\"\:/g, (_, key) => `${key}:`), - 'utf8' - ); - console.log(`公式文档生成 > ${outputFile}`); - fs.writeFileSync( - outputFile.replace(/\.js$/, '.d.ts'), - // 可以通过以下命令生成 - // tsc --declaration --emitDeclarationOnly --allowJs doc.js - [ - `export var doc: {`, + `/**\n * 公式文档 请运行 \`npm run genDoc\` 自动生成\n */\nexport const doc: ${[ + `{`, ` name: string;`, ` description: string;`, ` example: string;`, ` params: {`, - ` type: string;`, - ` name: string;`, - ` description: string;`, + ` type: string;`, + ` name: string;`, + ` description: string | null;`, ` }[];`, ` returns: {`, - ` type: string;`, - ` description: string;`, + ` type: string;`, + ` description: string | null;`, ` };`, ` namespace: string;`, - `}[];` - ].join('\n'), + `}[]` + ].join('\n')} = ${JSON.stringify(result, null, 2).replace( + /\"(\w+)\"\:/g, + (_, key) => `${key}:` + )};`, 'utf8' ); + console.log(`公式文档生成 > ${outputFile}`); const grouped: any = {}; result.forEach((item: any) => { diff --git a/packages/amis-formula/src/doc.md b/packages/amis-formula/src/doc.md new file mode 100644 index 000000000..e6d677434 --- /dev/null +++ b/packages/amis-formula/src/doc.md @@ -0,0 +1,935 @@ +## 逻辑函数 + +### IF + +用法：`IF(condition, consequent, alternate)` + + * `condition:expression` 条件表达式. + * `consequent:any` 条件判断通过的返回结果 + * `alternate:any` 条件判断不通过的返回结果 + +返回：`any` 根据条件返回不同的结果 + +示例：IF(A, B, C) + +如果满足条件A，则返回B，否则返回C，支持多层嵌套IF函数。 + +也可以用表达式如：A ? B : C + +### AND + +用法：`AND(expression1, expression2, ...expressionN)` + + * `conditions:...expression` 条件表达式. + +返回：`boolean` + +条件全部符合，返回 true，否则返回 false + +示例：AND(语文成绩>80, 数学成绩>80) + +语文成绩和数学成绩都大于 80，则返回 true，否则返回 false + +也可以直接用表达式如：语文成绩>80 && 数学成绩>80 + +### OR + +用法：`OR(expression1, expression2, ...expressionN)` + + * `conditions:...expression` 条件表达式. + +返回：`boolean` + +条件任意一个满足条件，返回 true，否则返回 false + +示例：OR(语文成绩>80, 数学成绩>80) + +语文成绩和数学成绩任意一个大于 80，则返回 true，否则返回 false + +也可以直接用表达式如：语文成绩>80 || 数学成绩>80 + +### XOR + +用法：`XOR(condition1, condition2)` + + * `condition1:expression` 条件表达式1 + * `condition2:expression` 条件表达式2 + +返回：`boolean` + +异或处理，多个表达式组中存在奇数个真时认为真。 + +### IFS + +用法：`IFS(condition1, result1, condition2, result2,...conditionN, resultN)` + + * `args:...any` 条件，返回值集合 + +返回：`any` 第一个满足条件的结果，没有命中的返回 false。 + +判断函数集合，相当于多个 else if 合并成一个。 + +示例：IFS(语文成绩 > 80, "优秀", 语文成绩 > 60, "良", "继续努力") + +如果语文成绩大于 80，则返回优秀，否则判断大于 60 分，则返回良，否则返回继续努力。 + +## 数学函数 + +### ABS + +用法：`ABS(num)` + + * `num:number` 数值 + +返回：`number` 传入数值的绝对值 + +返回传入数字的绝对值 + +### MAX + +用法：`MAX(num1, num2, ...numN)` + + * `num:...number` 数值 + +返回：`number` 所有传入值中最大的那个 + +获取最大值，如果只有一个参数且是数组，则计算这个数组内的值 + +### MIN + +用法：`MIN(num1, num2, ...numN)` + + * `num:...number` 数值 + +返回：`number` 所有传入值中最小的那个 + +获取最小值，如果只有一个参数且是数组，则计算这个数组内的值 + +### SUM + +用法：`SUM(num1, num2, ...numN)` + + * `num:...number` 数值 + +返回：`number` 所有传入数值的总和 + +求和，如果只有一个参数且是数组，则计算这个数组内的值 + +### INT + +用法：`INT(num)` + + * `num:number` 数值 + +返回：`number` 数值对应的整形 + +将数值向下取整为最接近的整数 + +### MOD + +用法：`MOD(num, divisor)` + + * `num:number` 被除数 + * `divisor:number` 除数 + +返回：`number` 两数相除的余数 + +返回两数相除的余数，参数 number 是被除数，divisor 是除数 + +### PI + +用法：`PI()` + +圆周率 3.1415... + +### ROUND + +用法：`ROUND(num[, numDigits = 2])` + + * `num:number` 要处理的数字 + * `numDigits:number` 小数位数 + +返回：`number` 传入数值四舍五入后的结果 + +将数字四舍五入到指定的位数，可以设置小数位。 + +### FLOOR + +用法：`FLOOR(num[, numDigits=2])` + + * `num:number` 要处理的数字 + * `numDigits:number` 小数位数 + +返回：`number` 传入数值向下取整后的结果 + +将数字向下取整到指定的位数，可以设置小数位。 + +### CEIL + +用法：`CEIL(num[, numDigits=2])` + + * `num:number` 要处理的数字 + * `numDigits:number` 小数位数 + +返回：`number` 传入数值向上取整后的结果 + +将数字向上取整到指定的位数，可以设置小数位。 + +### SQRT + +用法：`SQRT(num)` + + * `num:number` 要处理的数字 + +返回：`number` 开平方的结果 + +开平方，参数 number 为非负数 + +### AVG + +用法：`AVG(num1, num2, ...numN)` + + * `num:...number` 要处理的数字 + +返回：`number` 所有数值的平均值 + +返回所有参数的平均值，如果只有一个参数且是数组，则计算这个数组内的值 + +### DEVSQ + +用法：`DEVSQ(num1, num2, ...numN)` + + * `num:...number` 要处理的数字 + +返回：`number` 所有数值的平均值 + +返回数据点与数据均值点之差（数据偏差）的平方和，如果只有一个参数且是数组，则计算这个数组内的值 + +### AVEDEV + +用法：`AVEDEV(num1, num2, ...numN)` + + * `num:...number` 要处理的数字 + +返回：`number` 所有数值的平均值 + +数据点到其算术平均值的绝对偏差的平均值 + +### HARMEAN + +用法：`HARMEAN(num1, num2, ...numN)` + + * `num:...number` 要处理的数字 + +返回：`number` 所有数值的平均值 + +数据点的调和平均值，如果只有一个参数且是数组，则计算这个数组内的值 + +### LARGE + +用法：`LARGE(array, k)` + + * `nums:array` 要处理的数字 + * `k:number` 第几大 + +返回：`number` 所有数值的平均值 + +数据集中第 k 个最大值 + +### UPPERMONEY + +用法：`UPPERMONEY(num)` + + * `num:number` 要处理的数字 + +返回：`string` 数值中文大写字符 + +将数值转为中文大写金额 + +### RAND + +用法：`RAND()` + +返回大于等于 0 且小于 1 的均匀分布随机实数。每一次触发计算都会变化。 + +示例：`RAND()*100` + +返回 0-100 之间的随机数 + +### LAST + +用法：`LAST(array)` + + * `arr:...number` 要处理的数组 + +返回：`any` 最后一个值 + +取数据最后一个 + +## 文本函数 + +### LEFT + +用法：`LEFT(text, len)` + + * `text:string` 要处理的文本 + * `len:number` 要处理的长度 + +返回：`string` 对应字符串 + +返回传入文本左侧的指定长度字符串。 + +### RIGHT + +用法：`RIGHT(text, len)` + + * `text:string` 要处理的文本 + * `len:number` 要处理的长度 + +返回：`string` 对应字符串 + +返回传入文本右侧的指定长度字符串。 + +### LEN + +用法：`LEN(text)` + + * `text:string` 要处理的文本 + +返回：`number` 长度 + +计算文本的长度 + +### LENGTH + +用法：`LENGTH(textArr)` + + * `textArr:Array` 要处理的文本集合 + +返回：`Array` 长度集合 + +计算文本集合中所有文本的长度 + +### ISEMPTY + +用法：`ISEMPTY(text)` + + * `text:string` 要处理的文本 + +返回：`boolean` 判断结果 + +判断文本是否为空 + +### CONCATENATE + +用法：`CONCATENATE(text1, text2, ...textN)` + + * `text:...string` 文本集合 + +返回：`string` 连接后的文本 + +将多个传入值连接成文本 + +### CHAR + +用法：`CHAR(code)` + + * `code:number` 编码值 + +返回：`string` 指定位置的字符 + +返回计算机字符集的数字代码所对应的字符。 + +`CHAR(97)` 等价于 "a" + +### LOWER + +用法：`LOWER(text)` + + * `text:string` 文本 + +返回：`string` 结果文本 + +将传入文本转成小写 + +### UPPER + +用法：`UPPER(text)` + + * `text:string` 文本 + +返回：`string` 结果文本 + +将传入文本转成大写 + +### UPPERFIRST + +用法：`UPPERFIRST(text)` + + * `text:string` 文本 + +返回：`string` 结果文本 + +将传入文本首字母转成大写 + +### PADSTART + +用法：`PADSTART(text)` + + * `text:string` 文本 + * `num:number` 目标长度 + * `pad:string` 用于补齐的文本 + +返回：`string` 结果文本 + +向前补齐文本长度 + +示例 `PADSTART("6", 2, "0")` + +返回 `06` + +### CAPITALIZE + +用法：`CAPITALIZE(text)` + + * `text:string` 文本 + +返回：`string` 结果文本 + +将文本转成标题 + +示例 `CAPITALIZE("star")` + +返回 `Star` + +### ESCAPE + +用法：`ESCAPE(text)` + + * `text:string` 文本 + +返回：`string` 结果文本 + +对文本进行 HTML 转义 + +示例 `ESCAPE("&")` + +返回 `<start>&` + +### TRUNCATE + +用法：`TRUNCATE(text, 6)` + + * `text:string` 文本 + * `text:number` 最长长度 + +返回：`string` 结果文本 + +对文本长度进行截断 + +示例 `TRUNCATE("amis.baidu.com", 6)` + +返回 `amis...` + +### BEFORELAST + +用法：`BEFORELAST(text, '.')` + + * `text:string` 文本 + * `delimiter:string` 结束文本 + +返回：`string` 判断结果 + +取在某个分隔符之前的所有字符串 + +### SPLIT + +用法：`SPLIT(text, ',')` + + * `text:string` 文本 + * `delimiter:string` 文本片段 + +返回：`Array` 文本集 + +将文本根据指定片段分割成数组 + +示例：`SPLIT("a,b,c", ",")` + +返回 `["a", "b", "c"]` + +### TRIM + +用法：`TRIM(text)` + + * `text:string` 文本 + +返回：`string` 处理后的文本 + +将文本去除前后空格 + +### STRIPTAG + +用法：`STRIPTAG(text)` + + * `text:string` 文本 + +返回：`string` 处理后的文本 + +去除文本中的 HTML 标签 + +示例：`STRIPTAG("amis")` + +返回：`amis` + +### LINEBREAK + +用法：`LINEBREAK(text)` + + * `text:string` 文本 + +返回：`string` 处理后的文本 + +将字符串中的换行转成 HTML `
`，用于简单换行的场景 + +示例：`LINEBREAK("\n")` + +返回：`
` + +### STARTSWITH + +用法：`STARTSWITH(text, '片段')` + + * `text:string` 文本 + * `startString:string` 起始文本 + +返回：`string` 判断结果 + +判断字符串(text)是否以特定字符串(startString)开始，是则返回 True，否则返回 False + +### ENDSWITH + +用法：`ENDSWITH(text, '片段')` + + * `text:string` 文本 + * `endString:string` 结束文本 + +返回：`string` 判断结果 + +判断字符串(text)是否以特定字符串(endString)结束，是则返回 True，否则返回 False + +### CONTAINS + +用法：`CONTAINS(text, searchText)` + + * `text:string` 文本 + * `searchText:string` 搜索文本 + +返回：`string` 判断结果 + +判断参数 1 中的文本是否包含参数 2 中的文本。 + +### REPLACE + +用法：`REPLACE(text, search, replace)` + + * `text:string` 要处理的文本 + * `search:string` 要被替换的文本 + * `replace:string` 要替换的文本 + +返回：`string` 处理结果 + +对文本进行全量替换。 + +### SEARCH + +用法：`SEARCH(text, search, 0)` + + * `text:string` 要处理的文本 + * `search:string` 用来搜索的文本 + * `start:number` 起始位置 + +返回：`number` 命中的位置 + +对文本进行搜索，返回命中的位置 + +### MID + +用法：`MID(text, from, len)` + + * `text:string` 要处理的文本 + * `from:number` 起始位置 + * `len:number` 处理长度 + +返回：`number` 命中的位置 + +返回文本字符串中从指定位置开始的特定数目的字符 + +### BASENAME + +用法：`BASENAME(text)` + + * `text:string` 要处理的文本 + +返回：`string` 文件名 + +返回路径中的文件名 + +示例：`/home/amis/a.json` + +返回：a.json` + +## 日期函数 + +### DATE + +用法：`DATE('2021-12-06 08:20:00')` + +创建日期对象，可以通过特定格式的字符串，或者数值。 + +需要注意的是，其中月份的数值是从0开始的，也就是说， +如果是12月份，你应该传入数值11。 + +### TIMESTAMP + +用法：`TIMESTAMP(date, 'x')` + + * `date:date` 日期对象 + * `format:string` 时间戳格式，带毫秒传入 'x'。默认为 'X' 不带毫秒的。 + +返回：`number` 时间戳 + +返回时间的时间戳 + +### TODAY + +用法：`TODAY()` + +返回今天的日期 + +### NOW + +用法：`NOW()` + +返回现在的日期 + +### DATETOSTR + +用法：`DATETOSTR(date, 'YYYY-MM-DD')` + + * `date:date` 日期对象 + * `format:string` 日期格式，默认为 "YYYY-MM-DD HH:mm:ss" + +返回：`number` 日期字符串 + +将日期转成日期字符串 + +### STARTOF + +用法：`STARTOF(date[unit = "day"])` + + * `date:date` 日期对象 + * `unit:string` 比如可以传入 'day'、'month'、'year' 或者 `week` 等等 + +返回：`date` 新的日期对象 + +返回日期的指定范围的开端 + +### ENDOF + +用法：`ENDOF(date[unit = "day"])` + + * `date:date` 日期对象 + * `unit:string` 比如可以传入 'day'、'month'、'year' 或者 `week` 等等 + +返回：`date` 新的日期对象 + +返回日期的指定范围的末尾 + +### YEAR + +用法：`YEAR(date)` + + * `date:date` 日期对象 + +返回：`number` 数值 + +返回日期的年份 + +### MONTH + +用法：`MONTH(date)` + + * `date:date` 日期对象 + +返回：`number` 数值 + +返回日期的月份，这里就是自然月份。 + +### DAY + +用法：`DAY(date)` + + * `date:date` 日期对象 + +返回：`number` 数值 + +返回日期的天 + +### HOUR + +用法：`HOUR(date)` + + * `date:date` 日期对象 + +返回：`number` 数值 + +返回日期的小时 + +### MINUTE + +用法：`MINUTE(date)` + + * `date:date` 日期对象 + +返回：`number` 数值 + +返回日期的分 + +### SECOND + +用法：`SECOND(date)` + + * `date:date` 日期对象 + +返回：`number` 数值 + +返回日期的秒 + +### YEARS + +用法：`YEARS(endDate, startDate)` + + * `endDate:date` 日期对象 + * `startDate:date` 日期对象 + +返回：`number` 数值 + +返回两个日期相差多少年 + +### MINUTES + +用法：`MINUTES(endDate, startDate)` + + * `endDate:date` 日期对象 + * `startDate:date` 日期对象 + +返回：`number` 数值 + +返回两个日期相差多少分钟 + +### DAYS + +用法：`DAYS(endDate, startDate)` + + * `endDate:date` 日期对象 + * `startDate:date` 日期对象 + +返回：`number` 数值 + +返回两个日期相差多少天 + +### HOURS + +用法：`HOURS(endDate, startDate)` + + * `endDate:date` 日期对象 + * `startDate:date` 日期对象 + +返回：`number` 数值 + +返回两个日期相差多少小时 + +### DATEMODIFY + +用法：`DATEMODIFY(date, 2, 'days')` + + * `date:date` 日期对象 + * `num:number` 数值 + * `unit:string` 单位：支持年、月、天等等 + +返回：`date` 日期对象 + +修改日期，对日期进行加减天、月份、年等操作 + +示例： + +DATEMODIFY(A, -2, 'month') + +对日期 A 进行往前减2月的操作。 + +### STRTODATE + +用法：`STRTODATE(value[, format=""])` + + * `value:string` 日期字符 + * `format:string` 日期格式 + +返回：`date` 日期对象 + +将字符日期转成日期对象，可以指定日期格式。 + +示例：STRTODATE('2021/12/6', 'YYYY/MM/DD') + +### ISBEFORE + +用法：`ISBEFORE(a, b)` + + * `a:date` 第一个日期 + * `b:date` 第二个日期 + * `unit:string` 单位，默认是 'day'， 即之比较到天 + +返回：`boolean` 判断结果 + +判断两个日期，是否第一个日期在第二个日期的前面 + +### ISAFTER + +用法：`ISAFTER(a, b)` + + * `a:date` 第一个日期 + * `b:date` 第二个日期 + * `unit:string` 单位，默认是 'day'， 即之比较到天 + +返回：`boolean` 判断结果 + +判断两个日期，是否第一个日期在第二个日期的后面 + +### ISSAMEORBEFORE + +用法：`ISSAMEORBEFORE(a, b)` + + * `a:date` 第一个日期 + * `b:date` 第二个日期 + * `unit:string` 单位，默认是 'day'， 即之比较到天 + +返回：`boolean` 判断结果 + +判断两个日期，是否第一个日期在第二个日期的前面或者相等 + +### ISSAMEORAFTER + +用法：`ISSAMEORAFTER(a, b)` + + * `a:date` 第一个日期 + * `b:date` 第二个日期 + * `unit:string` 单位，默认是 'day'， 即之比较到天 + +返回：`boolean` 判断结果 + +判断两个日期，是否第一个日期在第二个日期的后面或者相等 + +## 数组 + +### COUNT + +用法：`COUNT(arr)` + + * `arr:Array` 数组 + +返回：`boolean` 结果 + +返回数组的长度 + +### ARRAYMAP + +用法：`ARRAYMAP(arr, item => item)` + + * `arr:Array` 数组 + * `iterator:Array` 箭头函数 + +返回：`boolean` 结果 + +数组做数据转换，需要搭配箭头函数一起使用，注意箭头函数只支持单表达式用法。 + +### ARRAYFILTER + +用法：`ARRAYFILTER(arr, item => item)` + + * `arr:Array` 数组 + * `iterator:Array` 箭头函数 + +返回：`boolean` 结果 + +数据做数据过滤，需要搭配箭头函数一起使用，注意箭头函数只支持单表达式用法。 +将第二个箭头函数返回为 false 的成员过滤掉。 + +### COMPACT + +用法：`COMPACT(arr)` + + * `arr:Array` 数组 + +返回：`Array` 结果 + +数组过滤掉 false、null、0 和 "" + +示例： + +COMPACT([0, 1, false, 2, '', 3]) 得到 [1, 2, 3] + +### JOIN + +用法：`JOIN(arr, string)` + + * `arr:Array` 数组 + * `separator:String` 分隔符 + +返回：`String` 结果 + +数组转成字符串 + +示例： + +JOIN(['a', 'b', 'c'], '=') 得到 'a=b=c' + +### CONCAT + +用法：`CONCAT(['a', 'b', 'c'], ['1'], ['3'])` + + * `arr:Array` 数组 + +返回：`Array` 结果 + +数组合并 + +示例： + +CONCAT(['a', 'b', 'c'], ['1'], ['3']) 得到 ['a', 'b', 'c', '1', '3'] + +### UNIQ + +用法：`UNIQ([{a: '1'}, {b: '2'}, {a: '1'}], 'x')` + + * `arr:Array` 数组 + * `field:string` 字段 + +返回：`Array` 结果 + +数组去重，第二个参数「field」，可指定根据该字段去重 + +示例： + +UNIQ([{a: '1'}, {b: '2'}, {a: '1'}]， 'id') + +## 其他 + +### ISTYPE + +用法：`ISTYPE([{a: '1'}, {b: '2'}, {a: '1'}], 'array')` + + * `判断对象:string` null + +返回：`boolean` 结果结果 + +判断是否为类型支持：string, number, array, date, plain-object。 + diff --git a/packages/amis-formula/src/doc.ts b/packages/amis-formula/src/doc.ts new file mode 100644 index 000000000..d1eead981 --- /dev/null +++ b/packages/amis-formula/src/doc.ts @@ -0,0 +1,1601 @@ +/** + * 公式文档 请运行 `npm run genDoc` 自动生成 + */ +export const doc: { + name: string; + description: string; + example: string; + params: { + type: string; + name: string; + description: string | null; + }[]; + returns: { + type: string; + description: string | null; + }; + namespace: string; +}[] = [ + { + name: "IF", + description: "示例：IF(A, B, C)\n\n如果满足条件A，则返回B，否则返回C，支持多层嵌套IF函数。\n\n也可以用表达式如：A ? B : C", + example: "IF(condition, consequent, alternate)", + params: [ + { + type: "expression", + name: "condition", + description: "条件表达式." + }, + { + type: "any", + name: "consequent", + description: "条件判断通过的返回结果" + }, + { + type: "any", + name: "alternate", + description: "条件判断不通过的返回结果" + } + ], + returns: { + type: "any", + description: "根据条件返回不同的结果" + }, + namespace: "逻辑函数" + }, + { + name: "AND", + description: "条件全部符合，返回 true，否则返回 false\n\n示例：AND(语文成绩>80, 数学成绩>80)\n\n语文成绩和数学成绩都大于 80，则返回 true，否则返回 false\n\n也可以直接用表达式如：语文成绩>80 && 数学成绩>80", + example: "AND(expression1, expression2, ...expressionN)", + params: [ + { + type: "...expression", + name: "conditions", + description: "条件表达式." + } + ], + returns: { + type: "boolean", + description: null + }, + namespace: "逻辑函数" + }, + { + name: "OR", + description: "条件任意一个满足条件，返回 true，否则返回 false\n\n示例：OR(语文成绩>80, 数学成绩>80)\n\n语文成绩和数学成绩任意一个大于 80，则返回 true，否则返回 false\n\n也可以直接用表达式如：语文成绩>80 || 数学成绩>80", + example: "OR(expression1, expression2, ...expressionN)", + params: [ + { + type: "...expression", + name: "conditions", + description: "条件表达式." + } + ], + returns: { + type: "boolean", + description: null + }, + namespace: "逻辑函数" + }, + { + name: "XOR", + description: "异或处理，多个表达式组中存在奇数个真时认为真。", + example: "XOR(condition1, condition2)", + params: [ + { + type: "expression", + name: "condition1", + description: "条件表达式1" + }, + { + type: "expression", + name: "condition2", + description: "条件表达式2" + } + ], + returns: { + type: "boolean", + description: null + }, + namespace: "逻辑函数" + }, + { + name: "IFS", + description: "判断函数集合，相当于多个 else if 合并成一个。\n\n示例：IFS(语文成绩 > 80, \"优秀\", 语文成绩 > 60, \"良\", \"继续努力\")\n\n如果语文成绩大于 80，则返回优秀，否则判断大于 60 分，则返回良，否则返回继续努力。", + example: "IFS(condition1, result1, condition2, result2,...conditionN, resultN)", + params: [ + { + type: "...any", + name: "args", + description: "条件，返回值集合" + } + ], + returns: { + type: "any", + description: "第一个满足条件的结果，没有命中的返回 false。" + }, + namespace: "逻辑函数" + }, + { + name: "ABS", + description: "返回传入数字的绝对值", + example: "ABS(num)", + params: [ + { + type: "number", + name: "num", + description: "数值" + } + ], + returns: { + type: "number", + description: "传入数值的绝对值" + }, + namespace: "数学函数" + }, + { + name: "MAX", + description: "获取最大值，如果只有一个参数且是数组，则计算这个数组内的值", + example: "MAX(num1, num2, ...numN)", + params: [ + { + type: "...number", + name: "num", + description: "数值" + } + ], + returns: { + type: "number", + description: "所有传入值中最大的那个" + }, + namespace: "数学函数" + }, + { + name: "MIN", + description: "获取最小值，如果只有一个参数且是数组，则计算这个数组内的值", + example: "MIN(num1, num2, ...numN)", + params: [ + { + type: "...number", + name: "num", + description: "数值" + } + ], + returns: { + type: "number", + description: "所有传入值中最小的那个" + }, + namespace: "数学函数" + }, + { + name: "SUM", + description: "求和，如果只有一个参数且是数组，则计算这个数组内的值", + example: "SUM(num1, num2, ...numN)", + params: [ + { + type: "...number", + name: "num", + description: "数值" + } + ], + returns: { + type: "number", + description: "所有传入数值的总和" + }, + namespace: "数学函数" + }, + { + name: "INT", + description: "将数值向下取整为最接近的整数", + example: "INT(num)", + params: [ + { + type: "number", + name: "num", + description: "数值" + } + ], + returns: { + type: "number", + description: "数值对应的整形" + }, + namespace: "数学函数" + }, + { + name: "MOD", + description: "返回两数相除的余数，参数 number 是被除数，divisor 是除数", + example: "MOD(num, divisor)", + params: [ + { + type: "number", + name: "num", + description: "被除数" + }, + { + type: "number", + name: "divisor", + description: "除数" + } + ], + returns: { + type: "number", + description: "两数相除的余数" + }, + namespace: "数学函数" + }, + { + name: "PI", + description: "圆周率 3.1415...", + example: "PI()", + params: [], + returns: { + type: "number", + description: "圆周率数值" + }, + namespace: "数学函数" + }, + { + name: "ROUND", + description: "将数字四舍五入到指定的位数，可以设置小数位。", + example: "ROUND(num[, numDigits = 2])", + params: [ + { + type: "number", + name: "num", + description: "要处理的数字" + }, + { + type: "number", + name: "numDigits", + description: "小数位数" + } + ], + returns: { + type: "number", + description: "传入数值四舍五入后的结果" + }, + namespace: "数学函数" + }, + { + name: "FLOOR", + description: "将数字向下取整到指定的位数，可以设置小数位。", + example: "FLOOR(num[, numDigits=2])", + params: [ + { + type: "number", + name: "num", + description: "要处理的数字" + }, + { + type: "number", + name: "numDigits", + description: "小数位数" + } + ], + returns: { + type: "number", + description: "传入数值向下取整后的结果" + }, + namespace: "数学函数" + }, + { + name: "CEIL", + description: "将数字向上取整到指定的位数，可以设置小数位。", + example: "CEIL(num[, numDigits=2])", + params: [ + { + type: "number", + name: "num", + description: "要处理的数字" + }, + { + type: "number", + name: "numDigits", + description: "小数位数" + } + ], + returns: { + type: "number", + description: "传入数值向上取整后的结果" + }, + namespace: "数学函数" + }, + { + name: "SQRT", + description: "开平方，参数 number 为非负数", + example: "SQRT(num)", + params: [ + { + type: "number", + name: "num", + description: "要处理的数字" + } + ], + returns: { + type: "number", + description: "开平方的结果" + }, + namespace: "数学函数" + }, + { + name: "AVG", + description: "返回所有参数的平均值，如果只有一个参数且是数组，则计算这个数组内的值", + example: "AVG(num1, num2, ...numN)", + params: [ + { + type: "...number", + name: "num", + description: "要处理的数字" + } + ], + returns: { + type: "number", + description: "所有数值的平均值" + }, + namespace: "数学函数" + }, + { + name: "DEVSQ", + description: "返回数据点与数据均值点之差（数据偏差）的平方和，如果只有一个参数且是数组，则计算这个数组内的值", + example: "DEVSQ(num1, num2, ...numN)", + params: [ + { + type: "...number", + name: "num", + description: "要处理的数字" + } + ], + returns: { + type: "number", + description: "所有数值的平均值" + }, + namespace: "数学函数" + }, + { + name: "AVEDEV", + description: "数据点到其算术平均值的绝对偏差的平均值", + example: "AVEDEV(num1, num2, ...numN)", + params: [ + { + type: "...number", + name: "num", + description: "要处理的数字" + } + ], + returns: { + type: "number", + description: "所有数值的平均值" + }, + namespace: "数学函数" + }, + { + name: "HARMEAN", + description: "数据点的调和平均值，如果只有一个参数且是数组，则计算这个数组内的值", + example: "HARMEAN(num1, num2, ...numN)", + params: [ + { + type: "...number", + name: "num", + description: "要处理的数字" + } + ], + returns: { + type: "number", + description: "所有数值的平均值" + }, + namespace: "数学函数" + }, + { + name: "LARGE", + description: "数据集中第 k 个最大值", + example: "LARGE(array, k)", + params: [ + { + type: "array", + name: "nums", + description: "要处理的数字" + }, + { + type: "number", + name: "k", + description: "第几大" + } + ], + returns: { + type: "number", + description: "所有数值的平均值" + }, + namespace: "数学函数" + }, + { + name: "UPPERMONEY", + description: "将数值转为中文大写金额", + example: "UPPERMONEY(num)", + params: [ + { + type: "number", + name: "num", + description: "要处理的数字" + } + ], + returns: { + type: "string", + description: "数值中文大写字符" + }, + namespace: "数学函数" + }, + { + name: "RAND", + description: "返回大于等于 0 且小于 1 的均匀分布随机实数。每一次触发计算都会变化。\n\n示例：`RAND()*100`\n\n返回 0-100 之间的随机数", + example: "RAND()", + params: [], + returns: { + type: "number", + description: "随机数" + }, + namespace: "数学函数" + }, + { + name: "LAST", + description: "取数据最后一个", + example: "LAST(array)", + params: [ + { + type: "...number", + name: "arr", + description: "要处理的数组" + } + ], + returns: { + type: "any", + description: "最后一个值" + }, + namespace: "数学函数" + }, + { + name: "LEFT", + description: "返回传入文本左侧的指定长度字符串。", + example: "LEFT(text, len)", + params: [ + { + type: "string", + name: "text", + description: "要处理的文本" + }, + { + type: "number", + name: "len", + description: "要处理的长度" + } + ], + returns: { + type: "string", + description: "对应字符串" + }, + namespace: "文本函数" + }, + { + name: "RIGHT", + description: "返回传入文本右侧的指定长度字符串。", + example: "RIGHT(text, len)", + params: [ + { + type: "string", + name: "text", + description: "要处理的文本" + }, + { + type: "number", + name: "len", + description: "要处理的长度" + } + ], + returns: { + type: "string", + description: "对应字符串" + }, + namespace: "文本函数" + }, + { + name: "LEN", + description: "计算文本的长度", + example: "LEN(text)", + params: [ + { + type: "string", + name: "text", + description: "要处理的文本" + } + ], + returns: { + type: "number", + description: "长度" + }, + namespace: "文本函数" + }, + { + name: "LENGTH", + description: "计算文本集合中所有文本的长度", + example: "LENGTH(textArr)", + params: [ + { + type: "Array", + name: "textArr", + description: "要处理的文本集合" + } + ], + returns: { + type: "Array", + description: "长度集合" + }, + namespace: "文本函数" + }, + { + name: "ISEMPTY", + description: "判断文本是否为空", + example: "ISEMPTY(text)", + params: [ + { + type: "string", + name: "text", + description: "要处理的文本" + } + ], + returns: { + type: "boolean", + description: "判断结果" + }, + namespace: "文本函数" + }, + { + name: "CONCATENATE", + description: "将多个传入值连接成文本", + example: "CONCATENATE(text1, text2, ...textN)", + params: [ + { + type: "...string", + name: "text", + description: "文本集合" + } + ], + returns: { + type: "string", + description: "连接后的文本" + }, + namespace: "文本函数" + }, + { + name: "CHAR", + description: "返回计算机字符集的数字代码所对应的字符。\n\n`CHAR(97)` 等价于 \"a\"", + example: "CHAR(code)", + params: [ + { + type: "number", + name: "code", + description: "编码值" + } + ], + returns: { + type: "string", + description: "指定位置的字符" + }, + namespace: "文本函数" + }, + { + name: "LOWER", + description: "将传入文本转成小写", + example: "LOWER(text)", + params: [ + { + type: "string", + name: "text", + description: "文本" + } + ], + returns: { + type: "string", + description: "结果文本" + }, + namespace: "文本函数" + }, + { + name: "UPPER", + description: "将传入文本转成大写", + example: "UPPER(text)", + params: [ + { + type: "string", + name: "text", + description: "文本" + } + ], + returns: { + type: "string", + description: "结果文本" + }, + namespace: "文本函数" + }, + { + name: "UPPERFIRST", + description: "将传入文本首字母转成大写", + example: "UPPERFIRST(text)", + params: [ + { + type: "string", + name: "text", + description: "文本" + } + ], + returns: { + type: "string", + description: "结果文本" + }, + namespace: "文本函数" + }, + { + name: "PADSTART", + description: "向前补齐文本长度\n\n示例 `PADSTART(\"6\", 2, \"0\")`\n\n返回 `06`", + example: "PADSTART(text)", + params: [ + { + type: "string", + name: "text", + description: "文本" + }, + { + type: "number", + name: "num", + description: "目标长度" + }, + { + type: "string", + name: "pad", + description: "用于补齐的文本" + } + ], + returns: { + type: "string", + description: "结果文本" + }, + namespace: "文本函数" + }, + { + name: "CAPITALIZE", + description: "将文本转成标题\n\n示例 `CAPITALIZE(\"star\")`\n\n返回 `Star`", + example: "CAPITALIZE(text)", + params: [ + { + type: "string", + name: "text", + description: "文本" + } + ], + returns: { + type: "string", + description: "结果文本" + }, + namespace: "文本函数" + }, + { + name: "ESCAPE", + description: "对文本进行 HTML 转义\n\n示例 `ESCAPE(\"&\")`\n\n返回 `<start>&`", + example: "ESCAPE(text)", + params: [ + { + type: "string", + name: "text", + description: "文本" + } + ], + returns: { + type: "string", + description: "结果文本" + }, + namespace: "文本函数" + }, + { + name: "TRUNCATE", + description: "对文本长度进行截断\n\n示例 `TRUNCATE(\"amis.baidu.com\", 6)`\n\n返回 `amis...`", + example: "TRUNCATE(text, 6)", + params: [ + { + type: "string", + name: "text", + description: "文本" + }, + { + type: "number", + name: "text", + description: "最长长度" + } + ], + returns: { + type: "string", + description: "结果文本" + }, + namespace: "文本函数" + }, + { + name: "BEFORELAST", + description: "取在某个分隔符之前的所有字符串", + example: "BEFORELAST(text, '.')", + params: [ + { + type: "string", + name: "text", + description: "文本" + }, + { + type: "string", + name: "delimiter", + description: "结束文本" + } + ], + returns: { + type: "string", + description: "判断结果" + }, + namespace: "文本函数" + }, + { + name: "SPLIT", + description: "将文本根据指定片段分割成数组\n\n示例：`SPLIT(\"a,b,c\", \",\")`\n\n返回 `[\"a\", \"b\", \"c\"]`", + example: "SPLIT(text, ',')", + params: [ + { + type: "string", + name: "text", + description: "文本" + }, + { + type: "string", + name: "delimiter", + description: "文本片段" + } + ], + returns: { + type: "Array", + description: "文本集" + }, + namespace: "文本函数" + }, + { + name: "TRIM", + description: "将文本去除前后空格", + example: "TRIM(text)", + params: [ + { + type: "string", + name: "text", + description: "文本" + } + ], + returns: { + type: "string", + description: "处理后的文本" + }, + namespace: "文本函数" + }, + { + name: "STRIPTAG", + description: "去除文本中的 HTML 标签\n\n示例：`STRIPTAG(\"amis\")`\n\n返回：`amis`", + example: "STRIPTAG(text)", + params: [ + { + type: "string", + name: "text", + description: "文本" + } + ], + returns: { + type: "string", + description: "处理后的文本" + }, + namespace: "文本函数" + }, + { + name: "LINEBREAK", + description: "将字符串中的换行转成 HTML `
`，用于简单换行的场景\n\n示例：`LINEBREAK(\"\\n\")`\n\n返回：`
`", + example: "LINEBREAK(text)", + params: [ + { + type: "string", + name: "text", + description: "文本" + } + ], + returns: { + type: "string", + description: "处理后的文本" + }, + namespace: "文本函数" + }, + { + name: "STARTSWITH", + description: "判断字符串(text)是否以特定字符串(startString)开始，是则返回 True，否则返回 False", + example: "STARTSWITH(text, '片段')", + params: [ + { + type: "string", + name: "text", + description: "文本" + }, + { + type: "string", + name: "startString", + description: "起始文本" + } + ], + returns: { + type: "string", + description: "判断结果" + }, + namespace: "文本函数" + }, + { + name: "ENDSWITH", + description: "判断字符串(text)是否以特定字符串(endString)结束，是则返回 True，否则返回 False", + example: "ENDSWITH(text, '片段')", + params: [ + { + type: "string", + name: "text", + description: "文本" + }, + { + type: "string", + name: "endString", + description: "结束文本" + } + ], + returns: { + type: "string", + description: "判断结果" + }, + namespace: "文本函数" + }, + { + name: "CONTAINS", + description: "判断参数 1 中的文本是否包含参数 2 中的文本。", + example: "CONTAINS(text, searchText)", + params: [ + { + type: "string", + name: "text", + description: "文本" + }, + { + type: "string", + name: "searchText", + description: "搜索文本" + } + ], + returns: { + type: "string", + description: "判断结果" + }, + namespace: "文本函数" + }, + { + name: "REPLACE", + description: "对文本进行全量替换。", + example: "REPLACE(text, search, replace)", + params: [ + { + type: "string", + name: "text", + description: "要处理的文本" + }, + { + type: "string", + name: "search", + description: "要被替换的文本" + }, + { + type: "string", + name: "replace", + description: "要替换的文本" + } + ], + returns: { + type: "string", + description: "处理结果" + }, + namespace: "文本函数" + }, + { + name: "SEARCH", + description: "对文本进行搜索，返回命中的位置", + example: "SEARCH(text, search, 0)", + params: [ + { + type: "string", + name: "text", + description: "要处理的文本" + }, + { + type: "string", + name: "search", + description: "用来搜索的文本" + }, + { + type: "number", + name: "start", + description: "起始位置" + } + ], + returns: { + type: "number", + description: "命中的位置" + }, + namespace: "文本函数" + }, + { + name: "MID", + description: "返回文本字符串中从指定位置开始的特定数目的字符", + example: "MID(text, from, len)", + params: [ + { + type: "string", + name: "text", + description: "要处理的文本" + }, + { + type: "number", + name: "from", + description: "起始位置" + }, + { + type: "number", + name: "len", + description: "处理长度" + } + ], + returns: { + type: "number", + description: "命中的位置" + }, + namespace: "文本函数" + }, + { + name: "BASENAME", + description: "返回路径中的文件名\n\n示例：`/home/amis/a.json`\n\n返回：a.json`", + example: "BASENAME(text)", + params: [ + { + type: "string", + name: "text", + description: "要处理的文本" + } + ], + returns: { + type: "string", + description: "文件名" + }, + namespace: "文本函数" + }, + { + name: "DATE", + description: "创建日期对象，可以通过特定格式的字符串，或者数值。\n\n需要注意的是，其中月份的数值是从0开始的，也就是说，\n如果是12月份，你应该传入数值11。", + example: "DATE('2021-12-06 08:20:00')", + params: [], + returns: { + type: "Date", + description: "日期对象" + }, + namespace: "日期函数" + }, + { + name: "TIMESTAMP", + description: "返回时间的时间戳", + example: "TIMESTAMP(date, 'x')", + params: [ + { + type: "date", + name: "date", + description: "日期对象" + }, + { + type: "string", + name: "format", + description: "时间戳格式，带毫秒传入 'x'。默认为 'X' 不带毫秒的。" + } + ], + returns: { + type: "number", + description: "时间戳" + }, + namespace: "日期函数" + }, + { + name: "TODAY", + description: "返回今天的日期", + example: "TODAY()", + params: [], + returns: { + type: "number", + description: "日期" + }, + namespace: "日期函数" + }, + { + name: "NOW", + description: "返回现在的日期", + example: "NOW()", + params: [], + returns: { + type: "number", + description: "日期" + }, + namespace: "日期函数" + }, + { + name: "DATETOSTR", + description: "将日期转成日期字符串", + example: "DATETOSTR(date, 'YYYY-MM-DD')", + params: [ + { + type: "date", + name: "date", + description: "日期对象" + }, + { + type: "string", + name: "format", + description: "日期格式，默认为 \"YYYY-MM-DD HH:mm:ss\"" + } + ], + returns: { + type: "number", + description: "日期字符串" + }, + namespace: "日期函数" + }, + { + name: "STARTOF", + description: "返回日期的指定范围的开端", + example: "STARTOF(date[unit = \"day\"])", + params: [ + { + type: "date", + name: "date", + description: "日期对象" + }, + { + type: "string", + name: "unit", + description: "比如可以传入 'day'、'month'、'year' 或者 `week` 等等" + } + ], + returns: { + type: "date", + description: "新的日期对象" + }, + namespace: "日期函数" + }, + { + name: "ENDOF", + description: "返回日期的指定范围的末尾", + example: "ENDOF(date[unit = \"day\"])", + params: [ + { + type: "date", + name: "date", + description: "日期对象" + }, + { + type: "string", + name: "unit", + description: "比如可以传入 'day'、'month'、'year' 或者 `week` 等等" + } + ], + returns: { + type: "date", + description: "新的日期对象" + }, + namespace: "日期函数" + }, + { + name: "YEAR", + description: "返回日期的年份", + example: "YEAR(date)", + params: [ + { + type: "date", + name: "date", + description: "日期对象" + } + ], + returns: { + type: "number", + description: "数值" + }, + namespace: "日期函数" + }, + { + name: "MONTH", + description: "返回日期的月份，这里就是自然月份。", + example: "MONTH(date)", + params: [ + { + type: "date", + name: "date", + description: "日期对象" + } + ], + returns: { + type: "number", + description: "数值" + }, + namespace: "日期函数" + }, + { + name: "DAY", + description: "返回日期的天", + example: "DAY(date)", + params: [ + { + type: "date", + name: "date", + description: "日期对象" + } + ], + returns: { + type: "number", + description: "数值" + }, + namespace: "日期函数" + }, + { + name: "HOUR", + description: "返回日期的小时", + example: "HOUR(date)", + params: [ + { + type: "date", + name: "date", + description: "日期对象" + } + ], + returns: { + type: "number", + description: "数值" + }, + namespace: "日期函数" + }, + { + name: "MINUTE", + description: "返回日期的分", + example: "MINUTE(date)", + params: [ + { + type: "date", + name: "date", + description: "日期对象" + } + ], + returns: { + type: "number", + description: "数值" + }, + namespace: "日期函数" + }, + { + name: "SECOND", + description: "返回日期的秒", + example: "SECOND(date)", + params: [ + { + type: "date", + name: "date", + description: "日期对象" + } + ], + returns: { + type: "number", + description: "数值" + }, + namespace: "日期函数" + }, + { + name: "YEARS", + description: "返回两个日期相差多少年", + example: "YEARS(endDate, startDate)", + params: [ + { + type: "date", + name: "endDate", + description: "日期对象" + }, + { + type: "date", + name: "startDate", + description: "日期对象" + } + ], + returns: { + type: "number", + description: "数值" + }, + namespace: "日期函数" + }, + { + name: "MINUTES", + description: "返回两个日期相差多少分钟", + example: "MINUTES(endDate, startDate)", + params: [ + { + type: "date", + name: "endDate", + description: "日期对象" + }, + { + type: "date", + name: "startDate", + description: "日期对象" + } + ], + returns: { + type: "number", + description: "数值" + }, + namespace: "日期函数" + }, + { + name: "DAYS", + description: "返回两个日期相差多少天", + example: "DAYS(endDate, startDate)", + params: [ + { + type: "date", + name: "endDate", + description: "日期对象" + }, + { + type: "date", + name: "startDate", + description: "日期对象" + } + ], + returns: { + type: "number", + description: "数值" + }, + namespace: "日期函数" + }, + { + name: "HOURS", + description: "返回两个日期相差多少小时", + example: "HOURS(endDate, startDate)", + params: [ + { + type: "date", + name: "endDate", + description: "日期对象" + }, + { + type: "date", + name: "startDate", + description: "日期对象" + } + ], + returns: { + type: "number", + description: "数值" + }, + namespace: "日期函数" + }, + { + name: "DATEMODIFY", + description: "修改日期，对日期进行加减天、月份、年等操作\n\n示例：\n\nDATEMODIFY(A, -2, 'month')\n\n对日期 A 进行往前减2月的操作。", + example: "DATEMODIFY(date, 2, 'days')", + params: [ + { + type: "date", + name: "date", + description: "日期对象" + }, + { + type: "number", + name: "num", + description: "数值" + }, + { + type: "string", + name: "unit", + description: "单位：支持年、月、天等等" + } + ], + returns: { + type: "date", + description: "日期对象" + }, + namespace: "日期函数" + }, + { + name: "STRTODATE", + description: "将字符日期转成日期对象，可以指定日期格式。\n\n示例：STRTODATE('2021/12/6', 'YYYY/MM/DD')", + example: "STRTODATE(value[, format=\"\"])", + params: [ + { + type: "string", + name: "value", + description: "日期字符" + }, + { + type: "string", + name: "format", + description: "日期格式" + } + ], + returns: { + type: "date", + description: "日期对象" + }, + namespace: "日期函数" + }, + { + name: "ISBEFORE", + description: "判断两个日期，是否第一个日期在第二个日期的前面", + example: "ISBEFORE(a, b)", + params: [ + { + type: "date", + name: "a", + description: "第一个日期" + }, + { + type: "date", + name: "b", + description: "第二个日期" + }, + { + type: "string", + name: "unit", + description: "单位，默认是 'day'， 即之比较到天" + } + ], + returns: { + type: "boolean", + description: "判断结果" + }, + namespace: "日期函数" + }, + { + name: "ISAFTER", + description: "判断两个日期，是否第一个日期在第二个日期的后面", + example: "ISAFTER(a, b)", + params: [ + { + type: "date", + name: "a", + description: "第一个日期" + }, + { + type: "date", + name: "b", + description: "第二个日期" + }, + { + type: "string", + name: "unit", + description: "单位，默认是 'day'， 即之比较到天" + } + ], + returns: { + type: "boolean", + description: "判断结果" + }, + namespace: "日期函数" + }, + { + name: "ISSAMEORBEFORE", + description: "判断两个日期，是否第一个日期在第二个日期的前面或者相等", + example: "ISSAMEORBEFORE(a, b)", + params: [ + { + type: "date", + name: "a", + description: "第一个日期" + }, + { + type: "date", + name: "b", + description: "第二个日期" + }, + { + type: "string", + name: "unit", + description: "单位，默认是 'day'， 即之比较到天" + } + ], + returns: { + type: "boolean", + description: "判断结果" + }, + namespace: "日期函数" + }, + { + name: "ISSAMEORAFTER", + description: "判断两个日期，是否第一个日期在第二个日期的后面或者相等", + example: "ISSAMEORAFTER(a, b)", + params: [ + { + type: "date", + name: "a", + description: "第一个日期" + }, + { + type: "date", + name: "b", + description: "第二个日期" + }, + { + type: "string", + name: "unit", + description: "单位，默认是 'day'， 即之比较到天" + } + ], + returns: { + type: "boolean", + description: "判断结果" + }, + namespace: "日期函数" + }, + { + name: "COUNT", + description: "返回数组的长度", + example: "COUNT(arr)", + params: [ + { + type: "Array", + name: "arr", + description: "数组" + } + ], + returns: { + type: "boolean", + description: "结果" + }, + namespace: "数组" + }, + { + name: "ARRAYMAP", + description: "数组做数据转换，需要搭配箭头函数一起使用，注意箭头函数只支持单表达式用法。", + example: "ARRAYMAP(arr, item => item)", + params: [ + { + type: "Array", + name: "arr", + description: "数组" + }, + { + type: "Array", + name: "iterator", + description: "箭头函数" + } + ], + returns: { + type: "boolean", + description: "结果" + }, + namespace: "数组" + }, + { + name: "ARRAYFILTER", + description: "数据做数据过滤，需要搭配箭头函数一起使用，注意箭头函数只支持单表达式用法。\n将第二个箭头函数返回为 false 的成员过滤掉。", + example: "ARRAYFILTER(arr, item => item)", + params: [ + { + type: "Array", + name: "arr", + description: "数组" + }, + { + type: "Array", + name: "iterator", + description: "箭头函数" + } + ], + returns: { + type: "boolean", + description: "结果" + }, + namespace: "数组" + }, + { + name: "COMPACT", + description: "数组过滤掉 false、null、0 和 \"\"\n\n示例：\n\nCOMPACT([0, 1, false, 2, '', 3]) 得到 [1, 2, 3]", + example: "COMPACT(arr)", + params: [ + { + type: "Array", + name: "arr", + description: "数组" + } + ], + returns: { + type: "Array", + description: "结果" + }, + namespace: "数组" + }, + { + name: "JOIN", + description: "数组转成字符串\n\n示例：\n\nJOIN(['a', 'b', 'c'], '=') 得到 'a=b=c'", + example: "JOIN(arr, string)", + params: [ + { + type: "Array", + name: "arr", + description: "数组" + }, + { + type: "String", + name: "separator", + description: "分隔符" + } + ], + returns: { + type: "String", + description: "结果" + }, + namespace: "数组" + }, + { + name: "CONCAT", + description: "数组合并\n\n示例：\n\nCONCAT(['a', 'b', 'c'], ['1'], ['3']) 得到 ['a', 'b', 'c', '1', '3']", + example: "CONCAT(['a', 'b', 'c'], ['1'], ['3'])", + params: [ + { + type: "Array", + name: "arr", + description: "数组" + } + ], + returns: { + type: "Array", + description: "结果" + }, + namespace: "数组" + }, + { + name: "UNIQ", + description: "数组去重，第二个参数「field」，可指定根据该字段去重\n\n示例：\n\nUNIQ([{a: '1'}, {b: '2'}, {a: '1'}]， 'id')", + example: "UNIQ([{a: '1'}, {b: '2'}, {a: '1'}], 'x')", + params: [ + { + type: "Array", + name: "arr", + description: "数组" + }, + { + type: "string", + name: "field", + description: "字段" + } + ], + returns: { + type: "Array", + description: "结果" + }, + namespace: "数组" + }, + { + name: "ISTYPE", + description: "判断是否为类型支持：string, number, array, date, plain-object。", + example: "ISTYPE([{a: '1'}, {b: '2'}, {a: '1'}], 'array')", + params: [ + { + type: "string", + name: "判断对象", + description: null + } + ], + returns: { + type: "boolean", + description: "结果结果" + }, + namespace: "其他" + } +]; \ No newline at end of file diff --git a/packages/amis-formula/src/filter.ts b/packages/amis-formula/src/filter.ts index 21caabbf7..c1b2328f8 100644 --- a/packages/amis-formula/src/filter.ts +++ b/packages/amis-formula/src/filter.ts @@ -1,9 +1,7 @@ import {Evaluator} from './evalutor'; import {FilterMap} from './types'; -const entityMap: { - [propName: string]: string; -} = { +const entityMap: any = { '&': '&', '<': '<', '>': '>', diff --git a/packages/amis-formula/tsconfig.json b/packages/amis-formula/tsconfig.json index 8ca302181..be6f2fce7 100644 --- a/packages/amis-formula/tsconfig.json +++ b/packages/amis-formula/tsconfig.json @@ -3,12 +3,14 @@ "compilerOptions": { "rootDir": "./", "outDir": "./dist", + "baseUrl": "./", "allowSyntheticDefaultImports": true, "typeRoots": [ "../../types", "./node_modules/@types", "../../node_modules/@types" - ] + ], + "paths": {} }, "include": ["src/**/*", "scripts/**/*"], "references": [] diff --git a/packages/amis-ui/package.json b/packages/amis-ui/package.json index 916c949a0..a34b8f57f 100644 --- a/packages/amis-ui/package.json +++ b/packages/amis-ui/package.json @@ -9,6 +9,7 @@ "build": "npm run clean-dist && NODE_ENV=production rollup -c ", "dev": "rollup -c -w", "test": "jest", + "gen-doc": "ts-node ./scripts/genDoc.ts", "update-snapshot": "jest --updateSnapshot", "coverage": "jest --coverage", "clean-dist": "rimraf lib/** esm/**" @@ -93,7 +94,8 @@ "rollup-plugin-scss": "^3.0.0", "sass": "^1.54.9", "ts-jest": "^29.0.2", - "typescript": "^4.6.4" + "typescript": "^4.6.4", + "ts-node": "^10.4.0" }, "peerDependencies": { "amis-core": "*", diff --git a/packages/amis-ui/scripts/GenDoc.ts b/packages/amis-ui/scripts/GenDoc.ts new file mode 100644 index 000000000..30d98fe5d --- /dev/null +++ b/packages/amis-ui/scripts/GenDoc.ts @@ -0,0 +1,88 @@ +import path from 'path'; +import fs from 'fs'; +import {promisify} from 'util'; + +const readdir = promisify(fs.readdir); +const statPath = promisify(fs.stat); + +const DIR = path.join(__dirname, '../scss/helper'); +export async function main() { + const files = await getFiles(DIR); + + for (const relativePath of files) { + const filepath = path.join(DIR, relativePath); + const contents = await readFileAsync(filepath); + const markdowns: Array = []; + + contents.replace( + /\/\*\!markdown\n([\s\S]+?)\*\//g, + (_: string, md: string) => { + markdowns.push(md.trim()); + return _; + } + ); + + if (markdowns.length) { + let mdFilePath = filepath.replace(/\.scss$/, '.md'); + await writeFileAsync(mdFilePath, markdowns.join('\n')); + console.log(`write ${mdFilePath}`); + } + } + + console.log('Done'); +} + +async function getFiles( + dir: string, + prefix: string = '', + ret: Array = [] +) { + const files = await readdir(dir); + + for (let i = 0, len = files.length; i < len; i++) { + const name = files[i]; + const filepath = path.join(dir, name); + const stat = await statPath(filepath); + + if (stat.isDirectory()) { + await getFiles(filepath, prefix ? path.join(prefix, name) : name, ret); + } else { + ret.push(prefix ? path.join(prefix, name) : name); + } + } + + return ret; +} + +function readFileAsync(filename: string): Promise { + return new Promise((resolve, reject) => { + fs.readFile(filename, 'utf8', (err, data) => { + if (err) { + reject(err); + } else { + resolve(data); + } + }); + }); +} + +function writeFileAsync(filename: string, content: string): Promise { + return new Promise((resolve, reject) => { + fs.writeFile( + filename, + content, + { + encoding: 'utf8' + }, + err => { + if (err) { + reject(err); + } else { + resolve(); + } + } + ); + }); +} + +main().catch(e => console.error(e)); diff --git a/packages/amis-ui/scss/helper/background/_background-color.md b/packages/amis-ui/scss/helper/background/_background-color.md new file mode 100644 index 000000000..8e1d53841 --- /dev/null +++ b/packages/amis-ui/scss/helper/background/_background-color.md @@ -0,0 +1,131 @@ +--- +title: 背景色 +--- + +| Class | Properties | Demo | +| ----------- | ------------------------ | -------- | +| bg-none | background: none !important | | +| bg-transparent | background: transparent |
| +| bg-current | background: currentColor |
| +| bg-black | background: #000 |
| +| bg-white | background: #fff |
| +| bg-primary | background: #007bff |
| +| bg-secondary | background: #6c757d |
| +| bg-success | background: #28a745 |
| +| bg-info | background: #007bff |
| +| bg-warning | background: #28a745 |
| +| bg-danger | background: #dc3545 |
| +| bg-light | background: #f8f9fa |
| +| bg-dark | background: #343a40 |
| +| bg-gray-transparent | background: transparent |
| +| bg-gray-current | background: currentColor |
| +| bg-gray-50 | background: #f9fafb |
| +| bg-gray-100 | background: #f3f4f6 |
| +| bg-gray-200 | background: #e5e7eb |
| +| bg-gray-300 | background: #d1d5db |
| +| bg-gray-400 | background: #9ca3af |
| +| bg-gray-500 | background: #6b7280 |
| +| bg-gray-600 | background: #4b5563 |
| +| bg-gray-700 | background: #374151 |
| +| bg-gray-800 | background: #1f2937 |
| +| bg-gray-900 | background: #111827 |
| +| bg-red-transparent | background: transparent |
| +| bg-red-current | background: currentColor |
| +| bg-red-50 | background: #fef2f2 |
| +| bg-red-100 | background: #fee2e2 |
| +| bg-red-200 | background: #fecaca |
| +| bg-red-300 | background: #fca5a5 |
| +| bg-red-400 | background: #f87171 |
| +| bg-red-500 | background: #ef4444 |
| +| bg-red-600 | background: #dc2626 |
| +| bg-red-700 | background: #b91c1c |
| +| bg-red-800 | background: #991b1b |
| +| bg-red-900 | background: #7f1d1d |
| +| bg-yellow-transparent | background: transparent |
| +| bg-yellow-current | background: currentColor |
| +| bg-yellow-50 | background: #fffbeb |
| +| bg-yellow-100 | background: #fef3c7 |
| +| bg-yellow-200 | background: #fde68a |
| +| bg-yellow-300 | background: #fcd34d |
| +| bg-yellow-400 | background: #fbbf24 |
| +| bg-yellow-500 | background: #f59e0b |
| +| bg-yellow-600 | background: #d97706 |
| +| bg-yellow-700 | background: #b45309 |
| +| bg-yellow-800 | background: #92400e |
| +| bg-yellow-900 | background: #78350f |
| +| bg-green-transparent | background: transparent |
| +| bg-green-current | background: currentColor |
| +| bg-green-50 | background: #ecfdf5 |
| +| bg-green-100 | background: #d1fae5 |
| +| bg-green-200 | background: #a7f3d0 |
| +| bg-green-300 | background: #6ee7b7 |
| +| bg-green-400 | background: #34d399 |
| +| bg-green-500 | background: #10b981 |
| +| bg-green-600 | background: #059669 |
| +| bg-green-700 | background: #047857 |
| +| bg-green-800 | background: #065f46 |
| +| bg-green-900 | background: #064e3b |
| +| bg-blue-transparent | background: transparent |
| +| bg-blue-current | background: currentColor |
| +| bg-blue-50 | background: #eff6ff |
| +| bg-blue-100 | background: #dbeafe |
| +| bg-blue-200 | background: #bfdbfe |
| +| bg-blue-300 | background: #93c5fd |
| +| bg-blue-400 | background: #60a5fa |
| +| bg-blue-500 | background: #3b82f6 |
| +| bg-blue-600 | background: #2563eb |
| +| bg-blue-700 | background: #1d4ed8 |
| +| bg-blue-800 | background: #1e40af |
| +| bg-blue-900 | background: #1e3a8a |
| +| bg-cyan-transparent | background: transparent |
| +| bg-cyan-current | background: currentColor |
| +| bg-cyan-50 | background: #ecfeff |
| +| bg-cyan-100 | background: #cffafe |
| +| bg-cyan-200 | background: #a5f3fc |
| +| bg-cyan-300 | background: #67e8f9 |
| +| bg-cyan-400 | background: #22d3ee |
| +| bg-cyan-500 | background: #06b6d4 |
| +| bg-cyan-600 | background: #0891b2 |
| +| bg-cyan-700 | background: #0e7490 |
| +| bg-cyan-800 | background: #155e75 |
| +| bg-cyan-900 | background: #164e63 |
| +| bg-indigo-transparent | background: transparent |
| +| bg-indigo-current | background: currentColor |
| +| bg-indigo-50 | background: #eef2ff |
| +| bg-indigo-100 | background: #e0e7ff |
| +| bg-indigo-200 | background: #c7d2fe |
| +| bg-indigo-300 | background: #a5b4fc |
| +| bg-indigo-400 | background: #818cf8 |
| +| bg-indigo-500 | background: #6366f1 |
| +| bg-indigo-600 | background: #4f46e5 |
| +| bg-indigo-700 | background: #4338ca |
| +| bg-indigo-800 | background: #3730a3 |
| +| bg-indigo-900 | background: #312e81 |
| +| bg-purple-transparent | background: transparent |
| +| bg-purple-current | background: currentColor |
| +| bg-purple-50 | background: #f5f3ff |
| +| bg-purple-100 | background: #ede9fe |
| +| bg-purple-200 | background: #ddd6fe |
| +| bg-purple-300 | background: #c4b5fd |
| +| bg-purple-400 | background: #a78bfa |
| +| bg-purple-500 | background: #8b5cf6 |
| +| bg-purple-600 | background: #7c3aed |
| +| bg-purple-700 | background: #6d28d9 |
| +| bg-purple-800 | background: #5b21b6 |
| +| bg-purple-900 | background: #4c1d95 |
| +| bg-pink-transparent | background: transparent |
| +| bg-pink-current | background: currentColor |
| +| bg-pink-50 | background: #fdf2f8 |
| +| bg-pink-100 | background: #fce7f3 |
| +| bg-pink-200 | background: #fbcfe8 |
| +| bg-pink-300 | background: #f9a8d4 |
| +| bg-pink-400 | background: #f472b6 |
| +| bg-pink-500 | background: #ec4899 |
| +| bg-pink-600 | background: #db2777 |
| +| bg-pink-700 | background: #be185d |
| +| bg-pink-800 | background: #9d174d |
| +| bg-pink-900 | background: #831843 |
| + +还有 hover、active、focus、disabled 扩展，比如 `hover:bg-black` + +参考: [tailwindcss](https://tailwindcss.com/docs/background-color) \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/border/_border-color.md b/packages/amis-ui/scss/helper/border/_border-color.md new file mode 100644 index 000000000..0a5c1df81 --- /dev/null +++ b/packages/amis-ui/scss/helper/border/_border-color.md @@ -0,0 +1,109 @@ +--- +title: 边框颜色 +--- + +| Class | Properties | +| ----------- | ------------------------ | +| border-black | border-color: #000 | +| border-white | border-color: #fff | +| border-primary | border-color: #007bff | +| border-secondary | border-color: #6c757d | +| border-success | border-color: #28a745 | +| border-info | border-color: #007bff | +| border-warning | border-color: #28a745 | +| border-danger | border-color: #dc3545 | +| border-light | border-color: #f8f9fa | +| border-dark | border-color: #343a40 | +| border-gray-50 | border-color: #f9fafb | +| border-gray-100 | border-color: #f3f4f6 | +| border-gray-200 | border-color: #e5e7eb | +| border-gray-300 | border-color: #d1d5db | +| border-gray-400 | border-color: #9ca3af | +| border-gray-500 | border-color: #6b7280 | +| border-gray-600 | border-color: #4b5563 | +| border-gray-700 | border-color: #374151 | +| border-gray-800 | border-color: #1f2937 | +| border-gray-900 | border-color: #111827 | +| border-red-50 | border-color: #fef2f2 | +| border-red-100 | border-color: #fee2e2 | +| border-red-200 | border-color: #fecaca | +| border-red-300 | border-color: #fca5a5 | +| border-red-400 | border-color: #f87171 | +| border-red-500 | border-color: #ef4444 | +| border-red-600 | border-color: #dc2626 | +| border-red-700 | border-color: #b91c1c | +| border-red-800 | border-color: #991b1b | +| border-red-900 | border-color: #7f1d1d | +| border-yellow-50 | border-color: #fffbeb | +| border-yellow-100 | border-color: #fef3c7 | +| border-yellow-200 | border-color: #fde68a | +| border-yellow-300 | border-color: #fcd34d | +| border-yellow-400 | border-color: #fbbf24 | +| border-yellow-500 | border-color: #f59e0b | +| border-yellow-600 | border-color: #d97706 | +| border-yellow-700 | border-color: #b45309 | +| border-yellow-800 | border-color: #92400e | +| border-yellow-900 | border-color: #78350f | +| border-green-50 | border-color: #ecfdf5 | +| border-green-100 | border-color: #d1fae5 | +| border-green-200 | border-color: #a7f3d0 | +| border-green-300 | border-color: #6ee7b7 | +| border-green-400 | border-color: #34d399 | +| border-green-500 | border-color: #10b981 | +| border-green-600 | border-color: #059669 | +| border-green-700 | border-color: #047857 | +| border-green-800 | border-color: #065f46 | +| border-green-900 | border-color: #064e3b | +| border-blue-50 | border-color: #eff6ff | +| border-blue-100 | border-color: #dbeafe | +| border-blue-200 | border-color: #bfdbfe | +| border-blue-300 | border-color: #93c5fd | +| border-blue-400 | border-color: #60a5fa | +| border-blue-500 | border-color: #3b82f6 | +| border-blue-600 | border-color: #2563eb | +| border-blue-700 | border-color: #1d4ed8 | +| border-blue-800 | border-color: #1e40af | +| border-blue-900 | border-color: #1e3a8a | +| border-cyan-50 | border-color: #ecfeff | +| border-cyan-100 | border-color: #cffafe | +| border-cyan-200 | border-color: #a5f3fc | +| border-cyan-300 | border-color: #67e8f9 | +| border-cyan-400 | border-color: #22d3ee | +| border-cyan-500 | border-color: #06b6d4 | +| border-cyan-600 | border-color: #0891b2 | +| border-cyan-700 | border-color: #0e7490 | +| border-cyan-800 | border-color: #155e75 | +| border-cyan-900 | border-color: #164e63 | +| border-indigo-50 | border-color: #eef2ff | +| border-indigo-100 | border-color: #e0e7ff | +| border-indigo-200 | border-color: #c7d2fe | +| border-indigo-300 | border-color: #a5b4fc | +| border-indigo-400 | border-color: #818cf8 | +| border-indigo-500 | border-color: #6366f1 | +| border-indigo-600 | border-color: #4f46e5 | +| border-indigo-700 | border-color: #4338ca | +| border-indigo-800 | border-color: #3730a3 | +| border-indigo-900 | border-color: #312e81 | +| border-purple-50 | border-color: #f5f3ff | +| border-purple-100 | border-color: #ede9fe | +| border-purple-200 | border-color: #ddd6fe | +| border-purple-300 | border-color: #c4b5fd | +| border-purple-400 | border-color: #a78bfa | +| border-purple-500 | border-color: #8b5cf6 | +| border-purple-600 | border-color: #7c3aed | +| border-purple-700 | border-color: #6d28d9 | +| border-purple-800 | border-color: #5b21b6 | +| border-purple-900 | border-color: #4c1d95 | +| border-pink-50 | border-color: #fdf2f8 | +| border-pink-100 | border-color: #fce7f3 | +| border-pink-200 | border-color: #fbcfe8 | +| border-pink-300 | border-color: #f9a8d4 | +| border-pink-400 | border-color: #f472b6 | +| border-pink-500 | border-color: #ec4899 | +| border-pink-600 | border-color: #db2777 | +| border-pink-700 | border-color: #be185d | +| border-pink-800 | border-color: #9d174d | +| border-pink-900 | border-color: #831843 | + + +还有 hover、active、focus、disabled 扩展，比如 `hover:border-black` \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/border/_border-radius.md b/packages/amis-ui/scss/helper/border/_border-radius.md new file mode 100644 index 000000000..dc1c7c309 --- /dev/null +++ b/packages/amis-ui/scss/helper/border/_border-radius.md @@ -0,0 +1,86 @@ +--- +title: 边框圆角 +--- +| Class | Properties | +| ----------- | ------------------------ | +| rounded-none | border-radius: 0px | +| rounded-sm | border-radius: 0.125rem | +| rounded | border-radius: 0.25rem | +| rounded-md | border-radius: 0.375rem | +| rounded-lg | border-radius: 0.5rem | +| rounded-xl | border-radius: 0.75rem | +| rounded-2xl | border-radius: 1rem | +| rounded-3xl | border-radius: 1.5rem | +| rounded-full | border-radius: 9999px | +| rounded-t-none | border-top-left-radius: 0px; border-top-right-radius: 0px | +| rounded-t-sm | border-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem | +| rounded-t | border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem | +| rounded-t-md | border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem | +| rounded-t-lg | border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem | +| rounded-t-xl | border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem | +| rounded-t-2xl | border-top-left-radius: 1rem; border-top-right-radius: 1rem | +| rounded-t-3xl | border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem | +| rounded-t-full | border-top-left-radius: 9999px; border-top-right-radius: 9999px | +| rounded-r-none | border-top-right-radius: 0px; border-bottom-right-radius: 0px | +| rounded-r-sm | border-top-right-radius: 0.125rem; border-bottom-right-radius: 0.125rem | +| rounded-r | border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem | +| rounded-r-md | border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem | +| rounded-r-lg | border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem | +| rounded-r-xl | border-top-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem | +| rounded-r-2xl | border-top-right-radius: 1rem; border-bottom-right-radius: 1rem | +| rounded-r-3xl | border-top-right-radius: 1.5rem; border-bottom-right-radius: 1.5rem | +| rounded-r-full | border-top-right-radius: 9999px; border-bottom-right-radius: 9999px | +| rounded-b-none | border-bottom-right-radius: 0px; border-bottom-left-radius: 0px | +| rounded-b-sm | border-bottom-right-radius: 0.125rem; border-bottom-left-radius: 0.125rem | +| rounded-b | border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem | +| rounded-b-md | border-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem | +| rounded-b-lg | border-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem | +| rounded-b-xl | border-bottom-right-radius: 0.75rem; border-bottom-left-radius: 0.75rem | +| rounded-b-2xl | border-bottom-right-radius: 1rem; border-bottom-left-radius: 1rem | +| rounded-b-3xl | border-bottom-right-radius: 1.5rem; border-bottom-left-radius: 1.5rem | +| rounded-b-full | border-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px | +| rounded-l-none | border-top-left-radius: 0px; border-bottom-left-radius: 0px | +| rounded-l-sm | border-top-left-radius: 0.125rem; border-bottom-left-radius: 0.125rem | +| rounded-l | border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem | +| rounded-l-md | border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem | +| rounded-l-lg | border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem | +| rounded-l-xl | border-top-left-radius: 0.75rem; border-bottom-left-radius: 0.75rem | +| rounded-l-2xl | border-top-left-radius: 1rem; border-bottom-left-radius: 1rem | +| rounded-l-3xl | border-top-left-radius: 1.5rem; border-bottom-left-radius: 1.5rem | +| rounded-l-full | border-top-left-radius: 9999px; border-bottom-left-radius: 9999px | +| rounded-tl-none | border-top-left-radius: 0px | +| rounded-tr-none | border-top-right-radius: 0px | +| rounded-br-none | border-bottom-right-radius: 0px | +| rounded-bl-none | border-bottom-left-radius: 0px | +| rounded-tl-sm | border-top-left-radius: 0.125rem | +| rounded-tr-sm | border-top-right-radius: 0.125rem | +| rounded-br-sm | border-bottom-right-radius: 0.125rem | +| rounded-bl-sm | border-bottom-left-radius: 0.125rem | +| rounded-tl | border-top-left-radius: 0.25rem | +| rounded-tr | border-top-right-radius: 0.25rem | +| rounded-br | border-bottom-right-radius: 0.25rem | +| rounded-bl | border-bottom-left-radius: 0.25rem | +| rounded-tl-md | border-top-left-radius: 0.375rem | +| rounded-tr-md | border-top-right-radius: 0.375rem | +| rounded-br-md | border-bottom-right-radius: 0.375rem | +| rounded-bl-md | border-bottom-left-radius: 0.375rem | +| rounded-tl-lg | border-top-left-radius: 0.5rem | +| rounded-tr-lg | border-top-right-radius: 0.5rem | +| rounded-br-lg | border-bottom-right-radius: 0.5rem | +| rounded-bl-lg | border-bottom-left-radius: 0.5rem | +| rounded-tl-xl | border-top-left-radius: 0.75rem | +| rounded-tr-xl | border-top-right-radius: 0.75rem | +| rounded-br-xl | border-bottom-right-radius: 0.75rem | +| rounded-bl-xl | border-bottom-left-radius: 0.75rem | +| rounded-tl-2xl | border-top-left-radius: 1rem | +| rounded-tr-2xl | border-top-right-radius: 1rem | +| rounded-br-2xl | border-bottom-right-radius: 1rem | +| rounded-bl-2xl | border-bottom-left-radius: 1rem | +| rounded-tl-3xl | border-top-left-radius: 1.5rem | +| rounded-tr-3xl | border-top-right-radius: 1.5rem | +| rounded-br-3xl | border-bottom-right-radius: 1.5rem | +| rounded-bl-3xl | border-bottom-left-radius: 1.5rem | +| rounded-tl-full | border-top-left-radius: 9999px | +| rounded-tr-full | border-top-right-radius: 9999px | +| rounded-br-full | border-bottom-right-radius: 9999px | +| rounded-bl-full | border-bottom-left-radius: 9999px | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/border/_border-style.md b/packages/amis-ui/scss/helper/border/_border-style.md new file mode 100644 index 000000000..bb1cb22f4 --- /dev/null +++ b/packages/amis-ui/scss/helper/border/_border-style.md @@ -0,0 +1,11 @@ +--- +title: 边框样式 +--- + +| Class | Properties | +| ----------- | ------------------------ | +| border-solid | border-style: solid | +| border-dashed | border-style: dashed | +| border-dotted | border-style: dotted | +| border-double | border-style: double | +| border-none | border-style: none | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/border/_border-width.md b/packages/amis-ui/scss/helper/border/_border-width.md new file mode 100644 index 000000000..8b05b3e3c --- /dev/null +++ b/packages/amis-ui/scss/helper/border/_border-width.md @@ -0,0 +1,31 @@ +--- +title: 边框宽度 +--- + +| Class | Properties | +| ----------- | ------------------------ | +| border | border-width: 1px | +| border-0 | border-width: 0px | +| border-2 | border-width: 2px | +| border-4 | border-width: 4px | +| border-8 | border-width: 8px | +| border-t | border-top-width: 1px | +| border-r | border-right-width: 1px | +| border-b | border-bottom-width: 1px | +| border-l | border-left-width: 1px | +| border-t-0 | border-top-width: 0px | +| border-r-0 | border-right-width: 0px | +| border-b-0 | border-bottom-width: 0px | +| border-l-0 | border-left-width: 0px | +| border-t-2 | border-top-width: 2px | +| border-r-2 | border-right-width: 2px | +| border-b-2 | border-bottom-width: 2px | +| border-l-2 | border-left-width: 2px | +| border-t-4 | border-top-width: 4px | +| border-r-4 | border-right-width: 4px | +| border-b-4 | border-bottom-width: 4px | +| border-l-4 | border-left-width: 4px | +| border-t-8 | border-top-width: 8px | +| border-r-8 | border-right-width: 8px | +| border-b-8 | border-bottom-width: 8px | +| border-l-8 | border-left-width: 8px | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/box-alignment/_align-content.md b/packages/amis-ui/scss/helper/box-alignment/_align-content.md new file mode 100644 index 000000000..98b517797 --- /dev/null +++ b/packages/amis-ui/scss/helper/box-alignment/_align-content.md @@ -0,0 +1,12 @@ +--- +title: Align Content +--- + +| Class | Properties | +| ----------- | ------------------------ | +| content-center | align-content: center | +| content-start | align-content: flex-start | +| content-end | align-content: flex-end | +| content-between | align-content: space-between | +| content-around | align-content: space-around | +| content-evenly | align-content: space-evenly | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/box-alignment/_align-items.md b/packages/amis-ui/scss/helper/box-alignment/_align-items.md new file mode 100644 index 000000000..70978052a --- /dev/null +++ b/packages/amis-ui/scss/helper/box-alignment/_align-items.md @@ -0,0 +1,11 @@ +--- +title: Align Items +--- + +| Class | Properties | +| ----------- | ------------------------ | +| items-start | align-items: flex-start | +| items-end | align-items: flex-end | +| items-center | align-items: center | +| items-baseline | align-items: baseline | +| items-stretch | align-items: stretch | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/box-alignment/_align-self.md b/packages/amis-ui/scss/helper/box-alignment/_align-self.md new file mode 100644 index 000000000..937382641 --- /dev/null +++ b/packages/amis-ui/scss/helper/box-alignment/_align-self.md @@ -0,0 +1,11 @@ +--- +title: Align Self +--- + +| Class | Properties | +| ----------- | ------------------------ | +| self-auto | align-self: auto | +| self-start | align-self: flex-start | +| self-end | align-self: flex-end | +| self-center | align-self: center | +| self-stretch | align-self: stretch | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/box-alignment/_justify-content.md b/packages/amis-ui/scss/helper/box-alignment/_justify-content.md new file mode 100644 index 000000000..87e553498 --- /dev/null +++ b/packages/amis-ui/scss/helper/box-alignment/_justify-content.md @@ -0,0 +1,12 @@ +--- +title: Jsutify Content +--- + +| Class | Properties | +| ----------- | ------------------------ | +| justify-start | justify-content: flex-start | +| justify-end | justify-content: flex-end | +| justify-center | justify-content: center | +| justify-between | justify-content: space-between | +| justify-around | justify-content: space-around | +| justify-evenly | justify-content: space-evenly | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/box-alignment/_justify-items.md b/packages/amis-ui/scss/helper/box-alignment/_justify-items.md new file mode 100644 index 000000000..9e288967c --- /dev/null +++ b/packages/amis-ui/scss/helper/box-alignment/_justify-items.md @@ -0,0 +1,11 @@ +--- +title: Justify Items +--- + +| Class | Properties | +| ----------- | ------------------------ | +| justify-items-auto | justify-items: auto | +| justify-items-start | justify-items: start | +| justify-items-end | justify-items: end | +| justify-items-center | justify-items: center | +| justify-items-stretch | justify-items: stretch | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/box-alignment/_justify-self.md b/packages/amis-ui/scss/helper/box-alignment/_justify-self.md new file mode 100644 index 000000000..733a38b85 --- /dev/null +++ b/packages/amis-ui/scss/helper/box-alignment/_justify-self.md @@ -0,0 +1,11 @@ +--- +title: Jsutify Self +--- + +| Class | Properties | +| ----------- | ------------------------ | +| justify-self-auto | justify-self: auto | +| justify-self-start | justify-self: start | +| justify-self-end | justify-self: end | +| justify-self-center | justify-self: center | +| justify-self-stretch | justify-self: stretch | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/box-alignment/_place-content.md b/packages/amis-ui/scss/helper/box-alignment/_place-content.md new file mode 100644 index 000000000..d91811c10 --- /dev/null +++ b/packages/amis-ui/scss/helper/box-alignment/_place-content.md @@ -0,0 +1,13 @@ +--- +title: Place Content +--- + +| Class | Properties | +| ----------- | ------------------------ | +| place-content-center | place-content: center | +| place-content-start | place-content: start | +| place-content-end | place-content: end | +| place-content-between | place-content: space-between | +| place-content-around | place-content: space-around | +| place-content-evenly | place-content: space-evenly | +| place-content-stretch | place-content: stretch | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/box-alignment/_place-items.md b/packages/amis-ui/scss/helper/box-alignment/_place-items.md new file mode 100644 index 000000000..6ca5d6b29 --- /dev/null +++ b/packages/amis-ui/scss/helper/box-alignment/_place-items.md @@ -0,0 +1,11 @@ +--- +title: Place Items +--- + +| Class | Properties | +| ----------- | ------------------------ | +| place-items-auto | place-items: auto | +| place-items-start | place-items: start | +| place-items-end | place-items: end | +| place-items-center | place-items: center | +| place-items-stretch | place-items: stretch | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/box-alignment/_place-self.md b/packages/amis-ui/scss/helper/box-alignment/_place-self.md new file mode 100644 index 000000000..b080c81c1 --- /dev/null +++ b/packages/amis-ui/scss/helper/box-alignment/_place-self.md @@ -0,0 +1,11 @@ +--- +title: Place Self +--- + +| Class | Properties | +| ----------- | ------------------------ | +| place-self-auto | place-self: auto | +| place-self-start | place-self: start | +| place-self-end | place-self: end | +| place-self-center | place-self: center | +| place-self-stretch | place-self: stretch | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/effect/_box-shadow.md b/packages/amis-ui/scss/helper/effect/_box-shadow.md new file mode 100644 index 000000000..11d409092 --- /dev/null +++ b/packages/amis-ui/scss/helper/effect/_box-shadow.md @@ -0,0 +1,16 @@ +--- +title: Box Shadow +--- + +| Class | Properties | +| ----------- | ------------------------ | +| shadow-sm | box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) | +| shadow | box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) | +| shadow-md | box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) | +| shadow-lg | box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) | +| shadow-xl | box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) , 0 10px 10px -5px rgba(0, 0, 0, 0.04) | +| shadow-2xl | box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) | +| shadow-inner | box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) | +| shadow-none | box-shadow: none | + +还有 hover、active、focus 扩展，比如 `hover:shadow-sm` \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/effect/_opacity.md b/packages/amis-ui/scss/helper/effect/_opacity.md new file mode 100644 index 000000000..4c38f4f73 --- /dev/null +++ b/packages/amis-ui/scss/helper/effect/_opacity.md @@ -0,0 +1,21 @@ +--- +title: Opacity +--- + +| Class | Properties | +| ----------- | ------------------------ | +| opacity-0 | opacity: 0 | +| opacity-5 | opacity: 0.05 | +| opacity-10 | opacity: 0.1 | +| opacity-20 | opacity: 0.2 | +| opacity-25 | opacity: 0.25 | +| opacity-30 | opacity: 0.3 | +| opacity-40 | opacity: 0.4 | +| opacity-50 | opacity: 0.5 | +| opacity-60 | opacity: 0.6 | +| opacity-70 | opacity: 0.7 | +| opacity-75 | opacity: 0.75 | +| opacity-80 | opacity: 0.8 | +| opacity-90 | opacity: 0.9 | +| opacity-95 | opacity: 0.95 | +| opacity-100 | opacity: 1 | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/flex/_direction.md b/packages/amis-ui/scss/helper/flex/_direction.md new file mode 100644 index 000000000..0986dda66 --- /dev/null +++ b/packages/amis-ui/scss/helper/flex/_direction.md @@ -0,0 +1,10 @@ +--- +title: Flex Direction +--- + +| Class | Properties | +| ----------- | ------------------------ | +| flex-row | flex-direction: row | +| flex-row-reverse | flex-direction: row-reverse | +| flex-col | flex-direction: column | +| flex-col-reverse | flex-direction: column-reverse | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/flex/_flex.md b/packages/amis-ui/scss/helper/flex/_flex.md new file mode 100644 index 000000000..53f1a48b6 --- /dev/null +++ b/packages/amis-ui/scss/helper/flex/_flex.md @@ -0,0 +1,10 @@ +--- +title: Flex +--- + +| Class | Properties | +| ----------- | ------------------------ | +| flex-1 | flex: 1 1 0% | +| flex-auto | flex: 1 1 auto | +| flex-initial | flex: 0 1 auto | +| flex-none | flex: none | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/flex/_grow.md b/packages/amis-ui/scss/helper/flex/_grow.md new file mode 100644 index 000000000..d9d688549 --- /dev/null +++ b/packages/amis-ui/scss/helper/flex/_grow.md @@ -0,0 +1,8 @@ +--- +title: Flex Grow +--- + +| Class | Properties | +| ----------- | ------------------------ | +| flex-grow-0 | flex-grow: 0 | +| flex-grow | flex-grow: 1 | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/flex/_order.md b/packages/amis-ui/scss/helper/flex/_order.md new file mode 100644 index 000000000..4b4639455 --- /dev/null +++ b/packages/amis-ui/scss/helper/flex/_order.md @@ -0,0 +1,20 @@ +--- +title: Flex Order +--- + +| Class | Properties | +| ----------- | ------------------------ | +| order-1 | order: 1 | +| order-2 | order: 2 | +| order-3 | order: 3 | +| order-4 | order: 4 | +| order-5 | order: 5 | +| order-6 | order: 6 | +| order-7 | order: 7 | +| order-8 | order: 8 | +| order-9 | order: 9 | +| order-10 | order: 10 | +| order-11 | order: 11 | +| order-12 | order: 12 | +| order-first | order: -9999 | +| order-last | order: 9999 | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/flex/_shrink.md b/packages/amis-ui/scss/helper/flex/_shrink.md new file mode 100644 index 000000000..58563a01b --- /dev/null +++ b/packages/amis-ui/scss/helper/flex/_shrink.md @@ -0,0 +1,8 @@ +--- +title: Flex Shrink +--- + +| Class | Properties | +| ----------- | ------------------------ | +| flex-shrink-0 | flex-shrink: 0 | +| flex-shrink | flex-shrink: 1 | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/flex/_wrap.md b/packages/amis-ui/scss/helper/flex/_wrap.md new file mode 100644 index 000000000..cdb6199e6 --- /dev/null +++ b/packages/amis-ui/scss/helper/flex/_wrap.md @@ -0,0 +1,9 @@ +--- +title: Flex Wrap +--- + +| Class | Properties | +| ----------- | ------------------------ | +| flex-wrap | flex-wrap: wrap | +| flex-wrap-reverse | flex-wrap: wrap-reverse | +| flex-nowrap | flex-wrap: nowrap | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/grid/_auto-columns.md b/packages/amis-ui/scss/helper/grid/_auto-columns.md new file mode 100644 index 000000000..1c620a7cd --- /dev/null +++ b/packages/amis-ui/scss/helper/grid/_auto-columns.md @@ -0,0 +1,10 @@ +--- +title: Grid Auto Columns +--- + +| Class | Properties | +| ----------- | ------------------------ | +| auto-cols-auto | grid-auto-columns: auto | +| auto-cols-min | grid-auto-columns: min-content | +| auto-cols-max | grid-auto-columns: max-content | +| auto-cols-fr | grid-auto-columns: minmax(0, 1fr) | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/grid/_auto-flow.md b/packages/amis-ui/scss/helper/grid/_auto-flow.md new file mode 100644 index 000000000..f881d55b7 --- /dev/null +++ b/packages/amis-ui/scss/helper/grid/_auto-flow.md @@ -0,0 +1,10 @@ +--- +title: Grid Auto Flow +--- + +| Class | Properties | +| ----------- | ------------------------ | +| grid-flow-row | grid-auto-flow: row | +| grid-flow-col | grid-auto-flow: column | +| grid-flow-row-dense | grid-auto-flow: row dense | +| grid-flow-col-dense | grid-auto-flow: column dense | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/grid/_auto-rows.md b/packages/amis-ui/scss/helper/grid/_auto-rows.md new file mode 100644 index 000000000..5a3e905f7 --- /dev/null +++ b/packages/amis-ui/scss/helper/grid/_auto-rows.md @@ -0,0 +1,10 @@ +--- +title: Grid Auto Flow +--- + +| Class | Properties | +| ----------- | ------------------------ | +| auto-rows-auto | grid-auto-rows: auto | +| auto-rows-min | grid-auto-rows: min-content | +| auto-rows-max | grid-auto-rows: max-content | +| auto-rows-fr | grid-auto-rows: minmax(0, 1fr) | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/grid/_column-start-end.md b/packages/amis-ui/scss/helper/grid/_column-start-end.md new file mode 100644 index 000000000..8ebd91ef3 --- /dev/null +++ b/packages/amis-ui/scss/helper/grid/_column-start-end.md @@ -0,0 +1,48 @@ +--- +title: Grid Row Start / End +--- + +| Class | Properties | +| ----------- | ------------------------ | +| col-auto | grid-column: auto | +| col-span-1 | grid-column: span 1/span 1 | +| col-span-2 | grid-column: span 2/span 2 | +| col-span-3 | grid-column: span 3/span 3 | +| col-span-4 | grid-column: span 4/span 4 | +| col-span-5 | grid-column: span 5/span 5 | +| col-span-6 | grid-column: span 6/span 6 | +| col-span-7 | grid-column: span 7/span 7 | +| col-span-8 | grid-column: span 8/span 8 | +| col-span-9 | grid-column: span 9/span 9 | +| col-span-10 | grid-column: span 10/span 10 | +| col-span-11 | grid-column: span 11/span 1 | +| col-span-12 | grid-column: span 12/span 12 | +| col-span-full | grid-column: 1/-1 | +| col-start-1 | grid-column-start: 1 | +| col-start-2 | grid-column-start: 2 | +| col-start-3 | grid-column-start: 3 | +| col-start-4 | grid-column-start: 4 | +| col-start-5 | grid-column-start: 5 | +| col-start-6 | grid-column-start: 6 | +| col-start-7 | grid-column-start: 7 | +| col-start-8 | grid-column-start: 8 | +| col-start-9 | grid-column-start: 9 | +| col-start-10 | grid-column-start: 10 | +| col-start-11 | grid-column-start: 11 | +| col-start-12 | grid-column-start: 12 | +| col-start-13 | grid-column-start: 13 | +| col-start-auto | grid-column-start: auto | +| col-end-1 | grid-column-end: 1 | +| col-end-2 | grid-column-end: 2 | +| col-end-3 | grid-column-end: 3 | +| col-end-4 | grid-column-end: 4 | +| col-end-5 | grid-column-end: 5 | +| col-end-6 | grid-column-end: 6 | +| col-end-7 | grid-column-end: 7 | +| col-end-8 | grid-column-end: 8 | +| col-end-9 | grid-column-end: 9 | +| col-end-10 | grid-column-end: 10 | +| col-end-11 | grid-column-end: 11 | +| col-end-12 | grid-column-end: 12 | +| col-end-13 | grid-column-end: 13 | +| col-end-auto | grid-column-end: auto | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/grid/_columns.md b/packages/amis-ui/scss/helper/grid/_columns.md new file mode 100644 index 000000000..8c39a6cba --- /dev/null +++ b/packages/amis-ui/scss/helper/grid/_columns.md @@ -0,0 +1,19 @@ +--- +title: Grid Template Columns +--- + +| Class | Properties | +| ----------- | ------------------------ | +| grid-cols-1 | grid-template-columns: repeat(1, minmax(0, 1fr)) | +| grid-cols-2 | grid-template-columns: repeat(2, minmax(0, 1fr)) | +| grid-cols-3 | grid-template-columns: repeat(3, minmax(0, 1fr)) | +| grid-cols-4 | grid-template-columns: repeat(4, minmax(0, 1fr)) | +| grid-cols-5 | grid-template-columns: repeat(5, minmax(0, 1fr)) | +| grid-cols-6 | grid-template-columns: repeat(6, minmax(0, 1fr)) | +| grid-cols-7 | grid-template-columns: repeat(6, minmax(0, 1fr)) | +| grid-cols-8 | grid-template-columns: repeat(8, minmax(0, 1fr)) | +| grid-cols-9 | grid-template-columns: repeat(9, minmax(0, 1fr)) | +| grid-cols-10 | grid-template-columns: repeat(10, minmax(0, 1fr)) | +| grid-cols-11 | grid-template-columns: repeat(11, minmax(0, 1fr)) | +| grid-cols-12 | grid-template-columns: repeat(12, minmax(0, 1fr)) | +| grid-cols-none | grid-template-columns: none | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/grid/_gap.md b/packages/amis-ui/scss/helper/grid/_gap.md new file mode 100644 index 000000000..6b487795b --- /dev/null +++ b/packages/amis-ui/scss/helper/grid/_gap.md @@ -0,0 +1,117 @@ +--- +title: Gap +--- + +| Class | Properties | +| ----------- | ------------------------ | +| gap-px | gap: 0.0625rem | +| gap-x-px | column-gap: 0.0625rem | +| gap-y-px | row-gap: 0.0625rem | +| gap-0 | gap: 0 | +| gap-x-0 | column-gap: 0 | +| gap-y-0 | row-gap: 0 | +| gap-none | gap: 0 | +| gap-x-none | column-gap: 0 | +| gap-y-none | row-gap: 0 | +| gap-0\.5 | gap: 0.125rem | +| gap-x-0\.5 | column-gap: 0.125rem | +| gap-y-0\.5 | row-gap: 0.125rem | +| gap-1 | gap: 0.25rem | +| gap-x-1 | column-gap: 0.25rem | +| gap-y-1 | row-gap: 0.25rem | +| gap-1\.5 | gap: 0.375rem | +| gap-x-1\.5 | column-gap: 0.375rem | +| gap-y-1\.5 | row-gap: 0.375rem | +| gap-2 | gap: 0.5rem | +| gap-x-2 | column-gap: 0.5rem | +| gap-y-2 | row-gap: 0.5rem | +| gap-2\.5 | gap: 0.625rem | +| gap-x-2\.5 | column-gap: 0.625rem | +| gap-y-2\.5 | row-gap: 0.625rem | +| gap-3 | gap: 0.75rem | +| gap-x-3 | column-gap: 0.75rem | +| gap-y-3 | row-gap: 0.75rem | +| gap-3\.5 | gap: 0.875rem | +| gap-x-3\.5 | column-gap: 0.875rem | +| gap-y-3\.5 | row-gap: 0.875rem | +| gap-4 | gap: 1rem | +| gap-x-4 | column-gap: 1rem | +| gap-y-4 | row-gap: 1rem | +| gap-5 | gap: 1.25rem | +| gap-x-5 | column-gap: 1.25rem | +| gap-y-5 | row-gap: 1.25rem | +| gap-6 | gap: 1.5rem | +| gap-x-6 | column-gap: 1.5rem | +| gap-y-6 | row-gap: 1.5rem | +| gap-7 | gap: 1.75rem | +| gap-x-7 | column-gap: 1.75rem | +| gap-y-7 | row-gap: 1.75rem | +| gap-8 | gap: 2rem | +| gap-x-8 | column-gap: 2rem | +| gap-y-8 | row-gap: 2rem | +| gap-9 | gap: 2.25rem | +| gap-x-9 | column-gap: 2.25rem | +| gap-y-9 | row-gap: 2.25rem | +| gap-10 | gap: 2.5rem | +| gap-x-10 | column-gap: 2.5rem | +| gap-y-10 | row-gap: 2.5rem | +| gap-11 | gap: 2.75rem | +| gap-x-11 | column-gap: 2.75rem | +| gap-y-11 | row-gap: 2.75rem | +| gap-12 | gap: 3rem | +| gap-x-12 | column-gap: 3rem | +| gap-y-12 | row-gap: 3rem | +| gap-14 | gap: 3.5rem | +| gap-x-14 | column-gap: 3.5rem | +| gap-y-14 | row-gap: 3.5rem | +| gap-16 | gap: 4rem | +| gap-x-16 | column-gap: 4rem | +| gap-y-16 | row-gap: 4rem | +| gap-18 | gap: 4.5rem | +| gap-x-18 | column-gap: 4.5rem | +| gap-y-18 | row-gap: 4.5rem | +| gap-20 | gap: 5rem | +| gap-x-20 | column-gap: 5rem | +| gap-y-20 | row-gap: 5rem | +| gap-24 | gap: 6rem | +| gap-x-24 | column-gap: 6rem | +| gap-y-24 | row-gap: 6rem | +| gap-28 | gap: 7rem | +| gap-x-28 | column-gap: 7rem | +| gap-y-28 | row-gap: 7rem | +| gap-32 | gap: 8rem | +| gap-x-32 | column-gap: 8rem | +| gap-y-32 | row-gap: 8rem | +| gap-36 | gap: 9rem | +| gap-x-36 | column-gap: 9rem | +| gap-y-36 | row-gap: 9rem | +| gap-40 | gap: 10rem | +| gap-x-40 | column-gap: 10rem | +| gap-y-40 | row-gap: 10rem | +| gap-44 | gap: 11rem | +| gap-x-44 | column-gap: 11rem | +| gap-y-44 | row-gap: 11rem | +| gap-48 | gap: 12rem | +| gap-x-48 | column-gap: 12rem | +| gap-y-48 | row-gap: 12rem | +| gap-52 | gap: 13rem | +| gap-x-52 | column-gap: 13rem | +| gap-y-52 | row-gap: 13rem | +| gap-56 | gap: 14rem | +| gap-x-56 | column-gap: 14rem | +| gap-y-56 | row-gap: 14rem | +| gap-60 | gap: 15rem | +| gap-x-60 | column-gap: 15rem | +| gap-y-60 | row-gap: 15rem | +| gap-64 | gap: 16rem | +| gap-x-64 | column-gap: 16rem | +| gap-y-64 | row-gap: 16rem | +| gap-72 | gap: 18rem | +| gap-x-72 | column-gap: 18rem | +| gap-y-72 | row-gap: 18rem | +| gap-80 | gap: 20rem | +| gap-x-80 | column-gap: 20rem | +| gap-y-80 | row-gap: 20rem | +| gap-96 | gap: 24rem | +| gap-x-96 | column-gap: 24rem | +| gap-y-96 | row-gap: 24rem | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/grid/_row-start-end.md b/packages/amis-ui/scss/helper/grid/_row-start-end.md new file mode 100644 index 000000000..712e070fd --- /dev/null +++ b/packages/amis-ui/scss/helper/grid/_row-start-end.md @@ -0,0 +1,48 @@ +--- +title: Grid Row Start / End +--- + +| Class | Properties | +| ----------- | ------------------------ | +| row-auto | grid-row: auto | +| row-span-1 | grid-row: span 1/span 1 | +| row-span-2 | grid-row: span 2/span 2 | +| row-span-3 | grid-row: span 3/span 3 | +| row-span-4 | grid-row: span 4/span 4 | +| row-span-5 | grid-row: span 5/span 5 | +| row-span-6 | grid-row: span 6/span 6 | +| row-span-7 | grid-row: span 7/span 7 | +| row-span-8 | grid-row: span 8/span 8 | +| row-span-9 | grid-row: span 9/span 9 | +| row-span-10 | grid-row: span 10/span 10 | +| row-span-11 | grid-row: span 11/span 1 | +| row-span-12 | grid-row: span 12/span 12 | +| row-span-full | grid-row: 1/-1 | +| row-start-1 | grid-row-start: 1 | +| row-start-2 | grid-row-start: 2 | +| row-start-3 | grid-row-start: 3 | +| row-start-4 | grid-row-start: 4 | +| row-start-5 | grid-row-start: 5 | +| row-start-6 | grid-row-start: 6 | +| row-start-7 | grid-row-start: 7 | +| row-start-8 | grid-row-start: 8 | +| row-start-9 | grid-row-start: 9 | +| row-start-10 | grid-row-start: 10 | +| row-start-11 | grid-row-start: 11 | +| row-start-12 | grid-row-start: 12 | +| row-start-13 | grid-row-start: 13 | +| row-start-auto | grid-row-start: auto | +| row-end-1 | grid-row-end: 1 | +| row-end-2 | grid-row-end: 2 | +| row-end-3 | grid-row-end: 3 | +| row-end-4 | grid-row-end: 4 | +| row-end-5 | grid-row-end: 5 | +| row-end-6 | grid-row-end: 6 | +| row-end-7 | grid-row-end: 7 | +| row-end-8 | grid-row-end: 8 | +| row-end-9 | grid-row-end: 9 | +| row-end-10 | grid-row-end: 10 | +| row-end-11 | grid-row-end: 11 | +| row-end-12 | grid-row-end: 12 | +| row-end-13 | grid-row-end: 13 | +| row-end-auto | grid-row-end: auto | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/grid/_rows.md b/packages/amis-ui/scss/helper/grid/_rows.md new file mode 100644 index 000000000..553d76db2 --- /dev/null +++ b/packages/amis-ui/scss/helper/grid/_rows.md @@ -0,0 +1,13 @@ +--- +title: Grid Template Rows +--- + +| Class | Properties | +| ----------- | ------------------------ | +| grid-rows-1 | grid-template-rows: repeat(1, minmax(0, 1fr)) | +| grid-rows-2 | grid-template-rows: repeat(2, minmax(0, 1fr)) | +| grid-rows-3 | grid-template-rows: repeat(3, minmax(0, 1fr)) | +| grid-rows-4 | grid-template-rows: repeat(4, minmax(0, 1fr)) | +| grid-rows-5 | grid-template-rows: repeat(5, minmax(0, 1fr)) | +| grid-rows-6 | grid-template-rows: repeat(6, minmax(0, 1fr)) | +| grid-rows-none | grid-template-rows: none | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/layout/_box-sizing.md b/packages/amis-ui/scss/helper/layout/_box-sizing.md new file mode 100644 index 000000000..5f416fb17 --- /dev/null +++ b/packages/amis-ui/scss/helper/layout/_box-sizing.md @@ -0,0 +1,35 @@ +--- +title: Box Sizing +--- + +Box Sizing 相关样式，主要区别在于设置宽高的时候，是否包含了 padding 和 border 的大小。 + + +| Class | Properties | +| ----------- | ------------------------ | +| box-border | box-sizing: border-box; | +| box-content | box-sizing: content-box; | + +## 用法 + +比如这个例子：左侧是 box-border 类型，整体高宽 128px。而右侧只是内容区域是 128px + 边框(2 * 4px) + padding （2 * 16px） 一共160px。 + +```html +
+
+
+
+ +
+
+
+
+``` + +## 响应式设计 + +不支持 [「响应式设计前缀」](../../../docs/style/responsive-design.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。 + +## 状态前缀 + +不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。 \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/layout/_clear.md b/packages/amis-ui/scss/helper/layout/_clear.md new file mode 100644 index 000000000..ba0d06fbf --- /dev/null +++ b/packages/amis-ui/scss/helper/layout/_clear.md @@ -0,0 +1,27 @@ +--- +title: Clear +--- + +清除浮动相关样式。 + +| Class | Properties | +| ----------- | ------------- | +| clear-right | clear: right; | +| clear-left | clear: left; | +| clear-none | clear: none; | +| clear-both | clear: both; | + +## 用法 + +请前往以下链接查看属性含义。 + +https://www.w3school.com.cn/cssref/pr_class_clear.asp + + +# 响应式设计 + +支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。 + +## 状态前缀 + +不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。 \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/layout/_display.md b/packages/amis-ui/scss/helper/layout/_display.md new file mode 100644 index 000000000..6c6b95298 --- /dev/null +++ b/packages/amis-ui/scss/helper/layout/_display.md @@ -0,0 +1,41 @@ +--- +title: Display +--- + +布局相关样式。 + + +| Class | Properties | +| ------------------ | ---------------------------- | +| block | display: block; | +| inline-block | display: inline-block; | +| inline | display: inline; | +| flex | display: flex; | +| inline-flex | display: inline-flex; | +| table | display: table; | +| table-cell | display: table-cell; | +| table-column | display: table-column; | +| table-column-group | display: table-column-group; | +| table-footer-group | display: table-footer-group; | +| table-header-group | display: table-header-group; | +| table-row-group | display: table-row-group; | +| table-row | display: table-row; | +| flow-root | display: flow-root; | +| grid | display: grid; | +| inline-grid | display: inline-grid; | +| contents | display: contents; | +| hidden | display: none; | + +## 用法 +css 相关的知识点就不介绍了，请参考： + +https://www.w3school.com.cn/cssref/pr_class_display.asp +https://tailwindcss.com/docs/display + +# 响应式设计 + +支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。 + +## 状态前缀 + +不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。 \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/layout/_float.md b/packages/amis-ui/scss/helper/layout/_float.md new file mode 100644 index 000000000..f0c33839e --- /dev/null +++ b/packages/amis-ui/scss/helper/layout/_float.md @@ -0,0 +1,47 @@ +--- +title: Floats +--- + +浮动相关样式。 + +| Class | Properties | +| ----------- | ------------- | +| float-right | float: right; | +| float-left | float: left; | +| float-none | float: none; | + +## 左浮 + +```html + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.

+``` + +## 右浮 + +```html + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.

+``` + +## 不浮动 + +```html + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.

+``` + + + +## 响应式设计 + +支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。 + +```html + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.

+``` + +## 状态前缀 + +不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。 \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/layout/_overflow.md b/packages/amis-ui/scss/helper/layout/_overflow.md new file mode 100644 index 000000000..27e5c0430 --- /dev/null +++ b/packages/amis-ui/scss/helper/layout/_overflow.md @@ -0,0 +1,34 @@ +--- +title: Overflow +--- + +内容超出相关样式。 + +| Class | Properties | +| ----------- | ------------------------ | +| overflow-auto | overflow: auto; | +| overflow-hidden | overflow: hidden; | +| overflow-visible | overflow: visible; | +| overflow-scroll | overflow: scroll; | +| overflow-x-auto | overflow-x: auto; | +| overflow-y-auto | overflow-y: auto; | +| overflow-x-hidden | overflow-x: hidden; | +| overflow-y-hidden | overflow-y: hidden; | +| overflow-x-visible | overflow-x: visible; | +| overflow-y-visible | overflow-y: visible; | +| overflow-x-scroll | overflow-x: scroll; | +| overflow-y-scroll | overflow-y: scroll; | + +## 用法 + +请前往一下文档查看属性含义。 + +https://www.w3school.com.cn/cssref/pr_pos_overflow.asp + +# 响应式设计 + +支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。 + +## 状态前缀 + +不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。 \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/layout/_position.md b/packages/amis-ui/scss/helper/layout/_position.md new file mode 100644 index 000000000..56457df02 --- /dev/null +++ b/packages/amis-ui/scss/helper/layout/_position.md @@ -0,0 +1,27 @@ +--- +title: Position +--- + +定位相关样式。 + +| Class | Properties | +| ----------- | ------------------------ | +| static | position: static; | +| fixed | position: fixed; | +| absolute | position: absolute; | +| relative | position: relative; | +| sticky | position: sticky; | + +## 用法 + +请前往一下文档查看属性含义。 + +https://www.w3school.com.cn/cssref/pr_class_position.asp + +# 响应式设计 + +支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。 + +## 状态前缀 + +不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。 \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/layout/_top-right-bottom-left.md b/packages/amis-ui/scss/helper/layout/_top-right-bottom-left.md new file mode 100644 index 000000000..413a7cb9a --- /dev/null +++ b/packages/amis-ui/scss/helper/layout/_top-right-bottom-left.md @@ -0,0 +1,150 @@ +--- +title: Top / Right / Bottom / Left +--- + +用来控制位置的样式集。 + +| Class | Properties | +| ------------ | --------------------------------------------------------------------------------- | +| inset-0 | top: 0px;
right: 0px;
bottom: 0px;
left: 0px; | +| -inset-0 | top: 0px;
right: 0px;
bottom: 0px;
left: 0px; | +| inset-y-0 | top: 0px;
bottom: 0px; | +| inset-x-0 | right: 0px;
left: 0px; | +| -inset-y-0 | top: 0px;
bottom: 0px; | +| -inset-x-0 | right: 0px;
left: 0px; | +| top-0 | top: 0px; | +| right-0 | right: 0px; | +| bottom-0 | bottom: 0px; | +| left-0 | left: 0px; | +| -top-0 | top: 0px; | +| -right-0 | right: 0px; | +| -bottom-0 | bottom: 0px; | +| -left-0 | left: 0px; | +| inset-0.5 | top: 0.125rem;
right: 0.125rem;
bottom: 0.125rem;
left: 0.125rem; | +| -inset-0.5 | top: -0.125rem;
right: -0.125rem;
bottom: -0.125rem;
left: -0.125rem; | +| inset-y-0.5 | top: 0.125rem;
bottom: 0.125rem; | +| inset-x-0.5 | right: 0.125rem;
left: 0.125rem; | +| -inset-y-0.5 | top: -0.125rem;
bottom: -0.125rem; | +| -inset-x-0.5 | right: -0.125rem;
left: -0.125rem; | +| top-0.5 | top: 0.125rem; | +| right-0.5 | right: 0.125rem; | +| bottom-0.5 | bottom: 0.125rem; | +| left-0.5 | left: 0.125rem; | +| -top-0.5 | top: -0.125rem; | +| -right-0.5 | right: -0.125rem; | +| -bottom-0.5 | bottom: -0.125rem; | +| -left-0.5 | left: -0.125rem; | + +按以下尺寸表依次类推 + +| 尺寸 | 大小 | +| ---- | -------------- | +| 0 | 0 | +| 0.5 | 0.125rem; | +| 1 | 0.25rem | +| 1.5 | 0.375rem | +| 1.5 | 0.375rem | +| 2 | 0.5rem | +| 2.5 | 0.625rem | +| 3 | 0.75rem | +| 3.5 | 0.875rem | +| 4 | 1rem | +| 5 | 1.25rem | +| 6 | 1.5rem | +| 7 | 1.75rem | +| 8 | 2rem | +| 9 | 2.25rem | +| 10 | 2.5rem | +| 11 | 2.75rem | +| 12 | 3rem | +| 14 | 3.5rem | +| 16 | 4rem | +| 20 | 5rem | +| 24 | 6rem | +| 28 | 7rem | +| 32 | 8rem | +| 36 | 9rem | +| 40 | 10rem | +| 44 | 11rem | +| 48 | 12rem | +| 52 | 13rem | +| 56 | 14rem | +| 60 | 15rem | +| 64 | 16rem | +| 68 | 17rem | +| 72 | 18rem | +| 76 | 19rem | +| 80 | 20rem | +| 96 | 24rem | +| auto | auto | +| 1/2 | 50% | +| 1/3 | 33.333333% | +| 2/3 | 66.666667% | +| 1/4 | 25%; | +| 2/4 | 50%; | +| 3/4 | 75%; | +| full | 100%; | +| px | 0.0625rem(1px) | + +## 用法 + +结合 relative 和 absolute 定位 和位置样式 `{top|right|bottom|left|inset}-xxx`，可以很方便的实现各种组件布局。 + +```html +
+ + +
+
1
+
+ + +
+
2
+
+ + +
+
3
+
+ + +
+
4
+
+ + +
+
5
+
+ + +
+
6
+
+ + +
+
7
+
+ + +
+
8
+
+ + +
+
9
+
+ +
+``` + +## 响应式设计 + +支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。 + +## 状态前缀 + +不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。 \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/layout/_visibility.md b/packages/amis-ui/scss/helper/layout/_visibility.md new file mode 100644 index 000000000..e38017504 --- /dev/null +++ b/packages/amis-ui/scss/helper/layout/_visibility.md @@ -0,0 +1,21 @@ +--- +title: Visibility +--- + +显示与隐藏。 + +| Class | Properties | +| --------- | -------------------- | +| visible | visibility: visible; | +| invisible | visibility: hidden; | + +## 用法 + + +# 响应式设计 + +支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。 + +## 状态前缀 + +不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。 \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/layout/_z-index.md b/packages/amis-ui/scss/helper/layout/_z-index.md new file mode 100644 index 000000000..0df0b5eec --- /dev/null +++ b/packages/amis-ui/scss/helper/layout/_z-index.md @@ -0,0 +1,37 @@ +--- +title: Z-Index +--- + +Utilities for controlling the stack order of an element. + + + +| Class | Properties | +| ----------- | ------------------------ | +| z-0 | z-index: 0 | +| z-10 | z-index: 10 | +| z-20 | z-index: 20 | +| z-30 | z-index: 30 | +| z-40 | z-index: 40 | +| z-50 | z-index: 50 | +| z-auto | z-index: auto | + +## 用法 + +```html +
+
5
+
4
+
3
+
2
+
1
+
+``` + +# 响应式设计 + +支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。 + +## 状态前缀 + +不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。 \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/sizing/_height.md b/packages/amis-ui/scss/helper/sizing/_height.md new file mode 100644 index 000000000..04549be46 --- /dev/null +++ b/packages/amis-ui/scss/helper/sizing/_height.md @@ -0,0 +1,103 @@ +--- +title: Height +--- + +| Class | Properties | +| ----------- | ------------------------ | +| h-px | height: 0.0625rem | +| h-0 | height: 0 | +| h-none | height: 0 | +| h-0\.5 | height: 0.125rem | +| h-1 | height: 0.25rem | +| h-1\.5 | height: 0.375rem | +| h-2 | height: 0.5rem | +| h-2\.5 | height: 0.625rem | +| h-3 | height: 0.75rem | +| h-3\.5 | height: 0.875rem | +| h-4 | height: 1rem | +| h-5 | height: 1.25rem | +| h-6 | height: 1.5rem | +| h-7 | height: 1.75rem | +| h-8 | height: 2rem | +| h-9 | height: 2.25rem | +| h-10 | height: 2.5rem | +| h-11 | height: 2.75rem | +| h-12 | height: 3rem | +| h-14 | height: 3.5rem | +| h-16 | height: 4rem | +| h-18 | height: 4.5rem | +| h-20 | height: 5rem | +| h-24 | height: 6rem | +| h-28 | height: 7rem | +| h-32 | height: 8rem | +| h-36 | height: 9rem | +| h-40 | height: 10rem | +| h-44 | height: 11rem | +| h-48 | height: 12rem | +| h-52 | height: 13rem | +| h-56 | height: 14rem | +| h-60 | height: 15rem | +| h-64 | height: 16rem | +| h-72 | height: 18rem | +| h-80 | height: 20rem | +| h-96 | height: 24rem | +| h-auto | height: auto | +| h-1\/2 | height: 50% | +| h-1\/3 | height: 33.333333% | +| h-2\/3 | height: 66.666667% | +| h-1\/4 | height: 25% | +| h-2\/4 | height: 50% | +| h-3\/4 | height: 75% | +| h-1\/5 | height: 20% | +| h-2\/5 | height: 40% | +| h-3\/5 | height: 60% | +| h-4\/5 | height: 80% | +| h-1\/6 | height: 16.666667% | +| h-2\/6 | height: 33.333333% | +| h-3\/6 | height: 50% | +| h-4\/6 | height: 66.666667% | +| h-5\/6 | height: 83.333333% | +| h-full | height: 100% | +| h-screen | height: 100vh | +| min-h-0 | min-height: 0px | +| min-h-full | min-height: 100% | +| min-h-screen | min-height: 100vh | +| max-h-px | max-height: 0.0625rem | +| max-h-0 | max-height: 0 | +| max-h-none | max-height: 0 | +| max-h-0\.5 | max-height: 0.125rem | +| max-h-1 | max-height: 0.25rem | +| max-h-1\.5 | max-height: 0.375rem | +| max-h-2 | max-height: 0.5rem | +| max-h-2\.5 | max-height: 0.625rem | +| max-h-3 | max-height: 0.75rem | +| max-h-3\.5 | max-height: 0.875rem | +| max-h-4 | max-height: 1rem | +| max-h-5 | max-height: 1.25rem | +| max-h-6 | max-height: 1.5rem | +| max-h-7 | max-height: 1.75rem | +| max-h-8 | max-height: 2rem | +| max-h-9 | max-height: 2.25rem | +| max-h-10 | max-height: 2.5rem | +| max-h-11 | max-height: 2.75rem | +| max-h-12 | max-height: 3rem | +| max-h-14 | max-height: 3.5rem | +| max-h-16 | max-height: 4rem | +| max-h-18 | max-height: 4.5rem | +| max-h-20 | max-height: 5rem | +| max-h-24 | max-height: 6rem | +| max-h-28 | max-height: 7rem | +| max-h-32 | max-height: 8rem | +| max-h-36 | max-height: 9rem | +| max-h-40 | max-height: 10rem | +| max-h-44 | max-height: 11rem | +| max-h-48 | max-height: 12rem | +| max-h-52 | max-height: 13rem | +| max-h-56 | max-height: 14rem | +| max-h-60 | max-height: 15rem | +| max-h-64 | max-height: 16rem | +| max-h-72 | max-height: 18rem | +| max-h-80 | max-height: 20rem | +| max-h-96 | max-height: 24rem | +| max-h-full | max-height: 100% | +| max-h-screen | max-height: 100vh | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/sizing/_width.md b/packages/amis-ui/scss/helper/sizing/_width.md new file mode 100644 index 000000000..8b600f997 --- /dev/null +++ b/packages/amis-ui/scss/helper/sizing/_width.md @@ -0,0 +1,98 @@ +--- +title: Width +--- + +| Class | Properties | +| ----------- | ------------------------ | +| w-px | width: 0.0625rem | +| w-0 | width: 0 | +| w-none | width: 0 | +| w-0\.5 | width: 0.125rem | +| w-1 | width: 0.25rem | +| w-1\.5 | width: 0.375rem | +| w-2 | width: 0.5rem | +| w-2\.5 | width: 0.625rem | +| w-3 | width: 0.75rem | +| w-3\.5 | width: 0.875rem | +| w-4 | width: 1rem | +| w-5 | width: 1.25rem | +| w-6 | width: 1.5rem | +| w-7 | width: 1.75rem | +| w-8 | width: 2rem | +| w-9 | width: 2.25rem | +| w-10 | width: 2.5rem | +| w-11 | width: 2.75rem | +| w-12 | width: 3rem | +| w-14 | width: 3.5rem | +| w-16 | width: 4rem | +| w-18 | width: 4.5rem | +| w-20 | width: 5rem | +| w-24 | width: 6rem | +| w-28 | width: 7rem | +| w-32 | width: 8rem | +| w-36 | width: 9rem | +| w-40 | width: 10rem | +| w-44 | width: 11rem | +| w-48 | width: 12rem | +| w-52 | width: 13rem | +| w-56 | width: 14rem | +| w-60 | width: 15rem | +| w-64 | width: 16rem | +| w-72 | width: 18rem | +| w-80 | width: 20rem | +| w-96 | width: 24rem | +| w-auto | width: auto | +| w-1x | width: 1em | +| w-2x | width: 2em | +| w-3x | width: 3em | +| w-1\/2 | width: 50% | +| w-1\/3 | width: 33.333333% | +| w-2\/3 | width: 66.666667% | +| w-1\/4 | width: 25% | +| w-2\/4 | width: 50% | +| w-3\/4 | width: 75% | +| w-1\/5 | width: 20% | +| w-2\/5 | width: 40% | +| w-3\/5 | width: 60% | +| w-4\/5 | width: 80% | +| w-1\/6 | width: 16.666667% | +| w-2\/6 | width: 33.333333% | +| w-3\/6 | width: 50% | +| w-4\/6 | width: 66.666667% | +| w-5\/6 | width: 83.333333% | +| w-1\/12 | width: 8.333333% | +| w-2\/12 | width: 16.666667% | +| w-3\/12 | width: 25% | +| w-4\/12 | width: 33.333333% | +| w-5\/12 | width: 41.666667% | +| w-6\/12 | width: 50% | +| w-7\/12 | width: 58.333333% | +| w-8\/12 | width: 66.666667% | +| w-9\/12 | width: 75% | +| w-10\/12 | width: 83.333333% | +| w-11\/12 | width: 91.666667% | +| w-full | width: 100% | +| w-screen | width: 100vw | +| w-min | width: min-content | +| w-max | width: max-content | +| min-w-0 | min-width: 0px | +| min-w-full | min-width: 100% | +| min-w-min | min-width: min-content | +| min-w-max | min-width: max-content | +| max-w-none | max-width: none | +| max-w-0 | max-width: 0rem | +| max-w-xs | max-width: 20rem | +| max-w-sm | max-width: 24rem | +| max-w-md | max-width: 28rem | +| max-w-lg | max-width: 32rem | +| max-w-xl | max-width: 36rem | +| max-w-2xl | max-width: 42rem | +| max-w-3xl | max-width: 48rem | +| max-w-4xl | max-width: 56rem | +| max-w-5xl | max-width: 64rem | +| max-w-6xl | max-width: 72rem | +| max-w-7xl | max-width: 80rem | +| max-w-full | max-width: 100% | +| max-w-min | max-width: min-content | +| max-w-max | max-width: max-content | +| max-w-prose | max-width: 65ch | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/spacing/_margin.md b/packages/amis-ui/scss/helper/spacing/_margin.md new file mode 100644 index 000000000..4e4d6b301 --- /dev/null +++ b/packages/amis-ui/scss/helper/spacing/_margin.md @@ -0,0 +1,527 @@ +--- +title: Margin +--- + +| Class | Properties | +| ----------- | ------------------------ | +| m-px | margin: 0.0625rem | +| m-0 | margin: 0 | +| m-none | margin: 0 | +| m-0\.5 | margin: 0.125rem | +| m-1 | margin: 0.25rem | +| m-1\.5 | margin: 0.375rem | +| m-2 | margin: 0.5rem | +| m-2\.5 | margin: 0.625rem | +| m-3 | margin: 0.75rem | +| m-3\.5 | margin: 0.875rem | +| m-4 | margin: 1rem | +| m-5 | margin: 1.25rem | +| m-6 | margin: 1.5rem | +| m-7 | margin: 1.75rem | +| m-8 | margin: 2rem | +| m-9 | margin: 2.25rem | +| m-10 | margin: 2.5rem | +| m-11 | margin: 2.75rem | +| m-12 | margin: 3rem | +| m-14 | margin: 3.5rem | +| m-16 | margin: 4rem | +| m-18 | margin: 4.5rem | +| m-20 | margin: 5rem | +| m-24 | margin: 6rem | +| m-28 | margin: 7rem | +| m-32 | margin: 8rem | +| m-36 | margin: 9rem | +| m-40 | margin: 10rem | +| m-44 | margin: 11rem | +| m-48 | margin: 12rem | +| m-52 | margin: 13rem | +| m-56 | margin: 14rem | +| m-60 | margin: 15rem | +| m-64 | margin: 16rem | +| m-72 | margin: 18rem | +| m-80 | margin: 20rem | +| m-96 | margin: 24rem | +| m-auto | margin: auto | +| -m-px | margin: -0.0625rem | +| -m-0 | margin: 0 | +| -m-none | margin: 0 | +| -m-0\.5 | margin: -0.125rem | +| -m-1 | margin: -0.25rem | +| -m-1\.5 | margin: -0.375rem | +| -m-2 | margin: -0.5rem | +| -m-2\.5 | margin: -0.625rem | +| -m-3 | margin: -0.75rem | +| -m-3\.5 | margin: -0.875rem | +| -m-4 | margin: -1rem | +| -m-5 | margin: -1.25rem | +| -m-6 | margin: -1.5rem | +| -m-7 | margin: -1.75rem | +| -m-8 | margin: -2rem | +| -m-9 | margin: -2.25rem | +| -m-10 | margin: -2.5rem | +| -m-11 | margin: -2.75rem | +| -m-12 | margin: -3rem | +| -m-14 | margin: -3.5rem | +| -m-16 | margin: -4rem | +| -m-18 | margin: -4.5rem | +| -m-20 | margin: -5rem | +| -m-24 | margin: -6rem | +| -m-28 | margin: -7rem | +| -m-32 | margin: -8rem | +| -m-36 | margin: -9rem | +| -m-40 | margin: -10rem | +| -m-44 | margin: -11rem | +| -m-48 | margin: -12rem | +| -m-52 | margin: -13rem | +| -m-56 | margin: -14rem | +| -m-60 | margin: -15rem | +| -m-64 | margin: -16rem | +| -m-72 | margin: -18rem | +| -m-80 | margin: -20rem | +| -m-96 | margin: -24rem | +| mx-px | margin-left: 0.0625rem; margin-right: 0.0625rem | +| mx-0 | margin-left: 0; margin-right: 0 | +| mx-none | margin-left: 0; margin-right: 0 | +| mx-0\.5 | margin-left: 0.125rem; margin-right: 0.125rem | +| mx-1 | margin-left: 0.25rem; margin-right: 0.25rem | +| mx-1\.5 | margin-left: 0.375rem; margin-right: 0.375rem | +| mx-2 | margin-left: 0.5rem; margin-right: 0.5rem | +| mx-2\.5 | margin-left: 0.625rem; margin-right: 0.625rem | +| mx-3 | margin-left: 0.75rem; margin-right: 0.75rem | +| mx-3\.5 | margin-left: 0.875rem; margin-right: 0.875rem | +| mx-4 | margin-left: 1rem; margin-right: 1rem | +| mx-5 | margin-left: 1.25rem; margin-right: 1.25rem | +| mx-6 | margin-left: 1.5rem; margin-right: 1.5rem | +| mx-7 | margin-left: 1.75rem; margin-right: 1.75rem | +| mx-8 | margin-left: 2rem; margin-right: 2rem | +| mx-9 | margin-left: 2.25rem; margin-right: 2.25rem | +| mx-10 | margin-left: 2.5rem; margin-right: 2.5rem | +| mx-11 | margin-left: 2.75rem; margin-right: 2.75rem | +| mx-12 | margin-left: 3rem; margin-right: 3rem | +| mx-14 | margin-left: 3.5rem; margin-right: 3.5rem | +| mx-16 | margin-left: 4rem; margin-right: 4rem | +| mx-18 | margin-left: 4.5rem; margin-right: 4.5rem | +| mx-20 | margin-left: 5rem; margin-right: 5rem | +| mx-24 | margin-left: 6rem; margin-right: 6rem | +| mx-28 | margin-left: 7rem; margin-right: 7rem | +| mx-32 | margin-left: 8rem; margin-right: 8rem | +| mx-36 | margin-left: 9rem; margin-right: 9rem | +| mx-40 | margin-left: 10rem; margin-right: 10rem | +| mx-44 | margin-left: 11rem; margin-right: 11rem | +| mx-48 | margin-left: 12rem; margin-right: 12rem | +| mx-52 | margin-left: 13rem; margin-right: 13rem | +| mx-56 | margin-left: 14rem; margin-right: 14rem | +| mx-60 | margin-left: 15rem; margin-right: 15rem | +| mx-64 | margin-left: 16rem; margin-right: 16rem | +| mx-72 | margin-left: 18rem; margin-right: 18rem | +| mx-80 | margin-left: 20rem; margin-right: 20rem | +| mx-96 | margin-left: 24rem; margin-right: 24rem | +| mx-auto | margin-left: auto; margin-right: auto | +| -mx-px | margin-left: -0.0625rem; margin-right: -0.0625rem | +| -mx-0 | margin-left: 0; margin-right: 0 | +| -mx-none | margin-left: 0; margin-right: 0 | +| -mx-0\.5 | margin-left: -0.125rem; margin-right: -0.125rem | +| -mx-1 | margin-left: -0.25rem; margin-right: -0.25rem | +| -mx-1\.5 | margin-left: -0.375rem; margin-right: -0.375rem | +| -mx-2 | margin-left: -0.5rem; margin-right: -0.5rem | +| -mx-2\.5 | margin-left: -0.625rem; margin-right: -0.625rem | +| -mx-3 | margin-left: -0.75rem; margin-right: -0.75rem | +| -mx-3\.5 | margin-left: -0.875rem; margin-right: -0.875rem | +| -mx-4 | margin-left: -1rem; margin-right: -1rem | +| -mx-5 | margin-left: -1.25rem; margin-right: -1.25rem | +| -mx-6 | margin-left: -1.5rem; margin-right: -1.5rem | +| -mx-7 | margin-left: -1.75rem; margin-right: -1.75rem | +| -mx-8 | margin-left: -2rem; margin-right: -2rem | +| -mx-9 | margin-left: -2.25rem; margin-right: -2.25rem | +| -mx-10 | margin-left: -2.5rem; margin-right: -2.5rem | +| -mx-11 | margin-left: -2.75rem; margin-right: -2.75rem | +| -mx-12 | margin-left: -3rem; margin-right: -3rem | +| -mx-14 | margin-left: -3.5rem; margin-right: -3.5rem | +| -mx-16 | margin-left: -4rem; margin-right: -4rem | +| -mx-18 | margin-left: -4.5rem; margin-right: -4.5rem | +| -mx-20 | margin-left: -5rem; margin-right: -5rem | +| -mx-24 | margin-left: -6rem; margin-right: -6rem | +| -mx-28 | margin-left: -7rem; margin-right: -7rem | +| -mx-32 | margin-left: -8rem; margin-right: -8rem | +| -mx-36 | margin-left: -9rem; margin-right: -9rem | +| -mx-40 | margin-left: -10rem; margin-right: -10rem | +| -mx-44 | margin-left: -11rem; margin-right: -11rem | +| -mx-48 | margin-left: -12rem; margin-right: -12rem | +| -mx-52 | margin-left: -13rem; margin-right: -13rem | +| -mx-56 | margin-left: -14rem; margin-right: -14rem | +| -mx-60 | margin-left: -15rem; margin-right: -15rem | +| -mx-64 | margin-left: -16rem; margin-right: -16rem | +| -mx-72 | margin-left: -18rem; margin-right: -18rem | +| -mx-80 | margin-left: -20rem; margin-right: -20rem | +| -mx-96 | margin-left: -24rem; margin-right: -24rem | +| my-px | margin-top: 0.0625rem; margin-bottom: 0.0625rem | +| my-0 | margin-top: 0; margin-bottom: 0 | +| my-none | margin-top: 0; margin-bottom: 0 | +| my-0\.5 | margin-top: 0.125rem; margin-bottom: 0.125rem | +| my-1 | margin-top: 0.25rem; margin-bottom: 0.25rem | +| my-1\.5 | margin-top: 0.375rem; margin-bottom: 0.375rem | +| my-2 | margin-top: 0.5rem; margin-bottom: 0.5rem | +| my-2\.5 | margin-top: 0.625rem; margin-bottom: 0.625rem | +| my-3 | margin-top: 0.75rem; margin-bottom: 0.75rem | +| my-3\.5 | margin-top: 0.875rem; margin-bottom: 0.875rem | +| my-4 | margin-top: 1rem; margin-bottom: 1rem | +| my-5 | margin-top: 1.25rem; margin-bottom: 1.25rem | +| my-6 | margin-top: 1.5rem; margin-bottom: 1.5rem | +| my-7 | margin-top: 1.75rem; margin-bottom: 1.75rem | +| my-8 | margin-top: 2rem; margin-bottom: 2rem | +| my-9 | margin-top: 2.25rem; margin-bottom: 2.25rem | +| my-10 | margin-top: 2.5rem; margin-bottom: 2.5rem | +| my-11 | margin-top: 2.75rem; margin-bottom: 2.75rem | +| my-12 | margin-top: 3rem; margin-bottom: 3rem | +| my-14 | margin-top: 3.5rem; margin-bottom: 3.5rem | +| my-16 | margin-top: 4rem; margin-bottom: 4rem | +| my-18 | margin-top: 4.5rem; margin-bottom: 4.5rem | +| my-20 | margin-top: 5rem; margin-bottom: 5rem | +| my-24 | margin-top: 6rem; margin-bottom: 6rem | +| my-28 | margin-top: 7rem; margin-bottom: 7rem | +| my-32 | margin-top: 8rem; margin-bottom: 8rem | +| my-36 | margin-top: 9rem; margin-bottom: 9rem | +| my-40 | margin-top: 10rem; margin-bottom: 10rem | +| my-44 | margin-top: 11rem; margin-bottom: 11rem | +| my-48 | margin-top: 12rem; margin-bottom: 12rem | +| my-52 | margin-top: 13rem; margin-bottom: 13rem | +| my-56 | margin-top: 14rem; margin-bottom: 14rem | +| my-60 | margin-top: 15rem; margin-bottom: 15rem | +| my-64 | margin-top: 16rem; margin-bottom: 16rem | +| my-72 | margin-top: 18rem; margin-bottom: 18rem | +| my-80 | margin-top: 20rem; margin-bottom: 20rem | +| my-96 | margin-top: 24rem; margin-bottom: 24rem | +| my-auto | margin-top: auto; margin-bottom: auto | +| -my-px | margin-top: -0.0625rem; margin-bottom: -0.0625rem | +| -my-0 | margin-top: 0; margin-bottom: 0 | +| -my-none | margin-top: 0; margin-bottom: 0 | +| -my-0\.5 | margin-top: -0.125rem; margin-bottom: -0.125rem | +| -my-1 | margin-top: -0.25rem; margin-bottom: -0.25rem | +| -my-1\.5 | margin-top: -0.375rem; margin-bottom: -0.375rem | +| -my-2 | margin-top: -0.5rem; margin-bottom: -0.5rem | +| -my-2\.5 | margin-top: -0.625rem; margin-bottom: -0.625rem | +| -my-3 | margin-top: -0.75rem; margin-bottom: -0.75rem | +| -my-3\.5 | margin-top: -0.875rem; margin-bottom: -0.875rem | +| -my-4 | margin-top: -1rem; margin-bottom: -1rem | +| -my-5 | margin-top: -1.25rem; margin-bottom: -1.25rem | +| -my-6 | margin-top: -1.5rem; margin-bottom: -1.5rem | +| -my-7 | margin-top: -1.75rem; margin-bottom: -1.75rem | +| -my-8 | margin-top: -2rem; margin-bottom: -2rem | +| -my-9 | margin-top: -2.25rem; margin-bottom: -2.25rem | +| -my-10 | margin-top: -2.5rem; margin-bottom: -2.5rem | +| -my-11 | margin-top: -2.75rem; margin-bottom: -2.75rem | +| -my-12 | margin-top: -3rem; margin-bottom: -3rem | +| -my-14 | margin-top: -3.5rem; margin-bottom: -3.5rem | +| -my-16 | margin-top: -4rem; margin-bottom: -4rem | +| -my-18 | margin-top: -4.5rem; margin-bottom: -4.5rem | +| -my-20 | margin-top: -5rem; margin-bottom: -5rem | +| -my-24 | margin-top: -6rem; margin-bottom: -6rem | +| -my-28 | margin-top: -7rem; margin-bottom: -7rem | +| -my-32 | margin-top: -8rem; margin-bottom: -8rem | +| -my-36 | margin-top: -9rem; margin-bottom: -9rem | +| -my-40 | margin-top: -10rem; margin-bottom: -10rem | +| -my-44 | margin-top: -11rem; margin-bottom: -11rem | +| -my-48 | margin-top: -12rem; margin-bottom: -12rem | +| -my-52 | margin-top: -13rem; margin-bottom: -13rem | +| -my-56 | margin-top: -14rem; margin-bottom: -14rem | +| -my-60 | margin-top: -15rem; margin-bottom: -15rem | +| -my-64 | margin-top: -16rem; margin-bottom: -16rem | +| -my-72 | margin-top: -18rem; margin-bottom: -18rem | +| -my-80 | margin-top: -20rem; margin-bottom: -20rem | +| -my-96 | margin-top: -24rem; margin-bottom: -24rem | +| mt-px | margin-top: 0.0625rem | +| mt-0 | margin-top: 0 | +| mt-none | margin-top: 0 | +| mt-0\.5 | margin-top: 0.125rem | +| mt-1 | margin-top: 0.25rem | +| mt-1\.5 | margin-top: 0.375rem | +| mt-2 | margin-top: 0.5rem | +| mt-2\.5 | margin-top: 0.625rem | +| mt-3 | margin-top: 0.75rem | +| mt-3\.5 | margin-top: 0.875rem | +| mt-4 | margin-top: 1rem | +| mt-5 | margin-top: 1.25rem | +| mt-6 | margin-top: 1.5rem | +| mt-7 | margin-top: 1.75rem | +| mt-8 | margin-top: 2rem | +| mt-9 | margin-top: 2.25rem | +| mt-10 | margin-top: 2.5rem | +| mt-11 | margin-top: 2.75rem | +| mt-12 | margin-top: 3rem | +| mt-14 | margin-top: 3.5rem | +| mt-16 | margin-top: 4rem | +| mt-18 | margin-top: 4.5rem | +| mt-20 | margin-top: 5rem | +| mt-24 | margin-top: 6rem | +| mt-28 | margin-top: 7rem | +| mt-32 | margin-top: 8rem | +| mt-36 | margin-top: 9rem | +| mt-40 | margin-top: 10rem | +| mt-44 | margin-top: 11rem | +| mt-48 | margin-top: 12rem | +| mt-52 | margin-top: 13rem | +| mt-56 | margin-top: 14rem | +| mt-60 | margin-top: 15rem | +| mt-64 | margin-top: 16rem | +| mt-72 | margin-top: 18rem | +| mt-80 | margin-top: 20rem | +| mt-96 | margin-top: 24rem | +| -mt-px | margin-top: -0.0625rem | +| -mt-0 | margin-top: 0 | +| -mt-none | margin-top: 0 | +| -mt-0\.5 | margin-top: -0.125rem | +| -mt-1 | margin-top: -0.25rem | +| -mt-1\.5 | margin-top: -0.375rem | +| -mt-2 | margin-top: -0.5rem | +| -mt-2\.5 | margin-top: -0.625rem | +| -mt-3 | margin-top: -0.75rem | +| -mt-3\.5 | margin-top: -0.875rem | +| -mt-4 | margin-top: -1rem | +| -mt-5 | margin-top: -1.25rem | +| -mt-6 | margin-top: -1.5rem | +| -mt-7 | margin-top: -1.75rem | +| -mt-8 | margin-top: -2rem | +| -mt-9 | margin-top: -2.25rem | +| -mt-10 | margin-top: -2.5rem | +| -mt-11 | margin-top: -2.75rem | +| -mt-12 | margin-top: -3rem | +| -mt-14 | margin-top: -3.5rem | +| -mt-16 | margin-top: -4rem | +| -mt-18 | margin-top: -4.5rem | +| -mt-20 | margin-top: -5rem | +| -mt-24 | margin-top: -6rem | +| -mt-28 | margin-top: -7rem | +| -mt-32 | margin-top: -8rem | +| -mt-36 | margin-top: -9rem | +| -mt-40 | margin-top: -10rem | +| -mt-44 | margin-top: -11rem | +| -mt-48 | margin-top: -12rem | +| -mt-52 | margin-top: -13rem | +| -mt-56 | margin-top: -14rem | +| -mt-60 | margin-top: -15rem | +| -mt-64 | margin-top: -16rem | +| -mt-72 | margin-top: -18rem | +| -mt-80 | margin-top: -20rem | +| -mt-96 | margin-top: -24rem | +| mr-px | margin-right: 0.0625rem | +| mr-0 | margin-right: 0 | +| mr-none | margin-right: 0 | +| mr-0\.5 | margin-right: 0.125rem | +| mr-1 | margin-right: 0.25rem | +| mr-1\.5 | margin-right: 0.375rem | +| mr-2 | margin-right: 0.5rem | +| mr-2\.5 | margin-right: 0.625rem | +| mr-3 | margin-right: 0.75rem | +| mr-3\.5 | margin-right: 0.875rem | +| mr-4 | margin-right: 1rem | +| mr-5 | margin-right: 1.25rem | +| mr-6 | margin-right: 1.5rem | +| mr-7 | margin-right: 1.75rem | +| mr-8 | margin-right: 2rem | +| mr-9 | margin-right: 2.25rem | +| mr-10 | margin-right: 2.5rem | +| mr-11 | margin-right: 2.75rem | +| mr-12 | margin-right: 3rem | +| mr-14 | margin-right: 3.5rem | +| mr-16 | margin-right: 4rem | +| mr-18 | margin-right: 4.5rem | +| mr-20 | margin-right: 5rem | +| mr-24 | margin-right: 6rem | +| mr-28 | margin-right: 7rem | +| mr-32 | margin-right: 8rem | +| mr-36 | margin-right: 9rem | +| mr-40 | margin-right: 10rem | +| mr-44 | margin-right: 11rem | +| mr-48 | margin-right: 12rem | +| mr-52 | margin-right: 13rem | +| mr-56 | margin-right: 14rem | +| mr-60 | margin-right: 15rem | +| mr-64 | margin-right: 16rem | +| mr-72 | margin-right: 18rem | +| mr-80 | margin-right: 20rem | +| mr-96 | margin-right: 24rem | +| -mr-px | margin-right: -0.0625rem | +| -mr-0 | margin-right: 0 | +| -mr-none | margin-right: 0 | +| -mr-0\.5 | margin-right: -0.125rem | +| -mr-1 | margin-right: -0.25rem | +| -mr-1\.5 | margin-right: -0.375rem | +| -mr-2 | margin-right: -0.5rem | +| -mr-2\.5 | margin-right: -0.625rem | +| -mr-3 | margin-right: -0.75rem | +| -mr-3\.5 | margin-right: -0.875rem | +| -mr-4 | margin-right: -1rem | +| -mr-5 | margin-right: -1.25rem | +| -mr-6 | margin-right: -1.5rem | +| -mr-7 | margin-right: -1.75rem | +| -mr-8 | margin-right: -2rem | +| -mr-9 | margin-right: -2.25rem | +| -mr-10 | margin-right: -2.5rem | +| -mr-11 | margin-right: -2.75rem | +| -mr-12 | margin-right: -3rem | +| -mr-14 | margin-right: -3.5rem | +| -mr-16 | margin-right: -4rem | +| -mr-18 | margin-right: -4.5rem | +| -mr-20 | margin-right: -5rem | +| -mr-24 | margin-right: -6rem | +| -mr-28 | margin-right: -7rem | +| -mr-32 | margin-right: -8rem | +| -mr-36 | margin-right: -9rem | +| -mr-40 | margin-right: -10rem | +| -mr-44 | margin-right: -11rem | +| -mr-48 | margin-right: -12rem | +| -mr-52 | margin-right: -13rem | +| -mr-56 | margin-right: -14rem | +| -mr-60 | margin-right: -15rem | +| -mr-64 | margin-right: -16rem | +| -mr-72 | margin-right: -18rem | +| -mr-80 | margin-right: -20rem | +| -mr-96 | margin-right: -24rem | +| mb-px | margin-bottom: 0.0625rem | +| mb-0 | margin-bottom: 0 | +| mb-none | margin-bottom: 0 | +| mb-0\.5 | margin-bottom: 0.125rem | +| mb-1 | margin-bottom: 0.25rem | +| mb-1\.5 | margin-bottom: 0.375rem | +| mb-2 | margin-bottom: 0.5rem | +| mb-2\.5 | margin-bottom: 0.625rem | +| mb-3 | margin-bottom: 0.75rem | +| mb-3\.5 | margin-bottom: 0.875rem | +| mb-4 | margin-bottom: 1rem | +| mb-5 | margin-bottom: 1.25rem | +| mb-6 | margin-bottom: 1.5rem | +| mb-7 | margin-bottom: 1.75rem | +| mb-8 | margin-bottom: 2rem | +| mb-9 | margin-bottom: 2.25rem | +| mb-10 | margin-bottom: 2.5rem | +| mb-11 | margin-bottom: 2.75rem | +| mb-12 | margin-bottom: 3rem | +| mb-14 | margin-bottom: 3.5rem | +| mb-16 | margin-bottom: 4rem | +| mb-18 | margin-bottom: 4.5rem | +| mb-20 | margin-bottom: 5rem | +| mb-24 | margin-bottom: 6rem | +| mb-28 | margin-bottom: 7rem | +| mb-32 | margin-bottom: 8rem | +| mb-36 | margin-bottom: 9rem | +| mb-40 | margin-bottom: 10rem | +| mb-44 | margin-bottom: 11rem | +| mb-48 | margin-bottom: 12rem | +| mb-52 | margin-bottom: 13rem | +| mb-56 | margin-bottom: 14rem | +| mb-60 | margin-bottom: 15rem | +| mb-64 | margin-bottom: 16rem | +| mb-72 | margin-bottom: 18rem | +| mb-80 | margin-bottom: 20rem | +| mb-96 | margin-bottom: 24rem | +| -mb-px | margin-bottom: -0.0625rem | +| -mb-0 | margin-bottom: 0 | +| -mb-none | margin-bottom: 0 | +| -mb-0\.5 | margin-bottom: -0.125rem | +| -mb-1 | margin-bottom: -0.25rem | +| -mb-1\.5 | margin-bottom: -0.375rem | +| -mb-2 | margin-bottom: -0.5rem | +| -mb-2\.5 | margin-bottom: -0.625rem | +| -mb-3 | margin-bottom: -0.75rem | +| -mb-3\.5 | margin-bottom: -0.875rem | +| -mb-4 | margin-bottom: -1rem | +| -mb-5 | margin-bottom: -1.25rem | +| -mb-6 | margin-bottom: -1.5rem | +| -mb-7 | margin-bottom: -1.75rem | +| -mb-8 | margin-bottom: -2rem | +| -mb-9 | margin-bottom: -2.25rem | +| -mb-10 | margin-bottom: -2.5rem | +| -mb-11 | margin-bottom: -2.75rem | +| -mb-12 | margin-bottom: -3rem | +| -mb-14 | margin-bottom: -3.5rem | +| -mb-16 | margin-bottom: -4rem | +| -mb-18 | margin-bottom: -4.5rem | +| -mb-20 | margin-bottom: -5rem | +| -mb-24 | margin-bottom: -6rem | +| -mb-28 | margin-bottom: -7rem | +| -mb-32 | margin-bottom: -8rem | +| -mb-36 | margin-bottom: -9rem | +| -mb-40 | margin-bottom: -10rem | +| -mb-44 | margin-bottom: -11rem | +| -mb-48 | margin-bottom: -12rem | +| -mb-52 | margin-bottom: -13rem | +| -mb-56 | margin-bottom: -14rem | +| -mb-60 | margin-bottom: -15rem | +| -mb-64 | margin-bottom: -16rem | +| -mb-72 | margin-bottom: -18rem | +| -mb-80 | margin-bottom: -20rem | +| -mb-96 | margin-bottom: -24rem | +| ml-px | margin-left: 0.0625rem | +| ml-0 | margin-left: 0 | +| ml-none | margin-left: 0 | +| ml-0\.5 | margin-left: 0.125rem | +| ml-1 | margin-left: 0.25rem | +| ml-1\.5 | margin-left: 0.375rem | +| ml-2 | margin-left: 0.5rem | +| ml-2\.5 | margin-left: 0.625rem | +| ml-3 | margin-left: 0.75rem | +| ml-3\.5 | margin-left: 0.875rem | +| ml-4 | margin-left: 1rem | +| ml-5 | margin-left: 1.25rem | +| ml-6 | margin-left: 1.5rem | +| ml-7 | margin-left: 1.75rem | +| ml-8 | margin-left: 2rem | +| ml-9 | margin-left: 2.25rem | +| ml-10 | margin-left: 2.5rem | +| ml-11 | margin-left: 2.75rem | +| ml-12 | margin-left: 3rem | +| ml-14 | margin-left: 3.5rem | +| ml-16 | margin-left: 4rem | +| ml-18 | margin-left: 4.5rem | +| ml-20 | margin-left: 5rem | +| ml-24 | margin-left: 6rem | +| ml-28 | margin-left: 7rem | +| ml-32 | margin-left: 8rem | +| ml-36 | margin-left: 9rem | +| ml-40 | margin-left: 10rem | +| ml-44 | margin-left: 11rem | +| ml-48 | margin-left: 12rem | +| ml-52 | margin-left: 13rem | +| ml-56 | margin-left: 14rem | +| ml-60 | margin-left: 15rem | +| ml-64 | margin-left: 16rem | +| ml-72 | margin-left: 18rem | +| ml-80 | margin-left: 20rem | +| ml-96 | margin-left: 24rem | +| -ml-px | margin-left: -0.0625rem | +| -ml-0 | margin-left: 0 | +| -ml-none | margin-left: 0 | +| -ml-0\.5 | margin-left: -0.125rem | +| -ml-1 | margin-left: -0.25rem | +| -ml-1\.5 | margin-left: -0.375rem | +| -ml-2 | margin-left: -0.5rem | +| -ml-2\.5 | margin-left: -0.625rem | +| -ml-3 | margin-left: -0.75rem | +| -ml-3\.5 | margin-left: -0.875rem | +| -ml-4 | margin-left: -1rem | +| -ml-5 | margin-left: -1.25rem | +| -ml-6 | margin-left: -1.5rem | +| -ml-7 | margin-left: -1.75rem | +| -ml-8 | margin-left: -2rem | +| -ml-9 | margin-left: -2.25rem | +| -ml-10 | margin-left: -2.5rem | +| -ml-11 | margin-left: -2.75rem | +| -ml-12 | margin-left: -3rem | +| -ml-14 | margin-left: -3.5rem | +| -ml-16 | margin-left: -4rem | +| -ml-18 | margin-left: -4.5rem | +| -ml-20 | margin-left: -5rem | +| -ml-24 | margin-left: -6rem | +| -ml-28 | margin-left: -7rem | +| -ml-32 | margin-left: -8rem | +| -ml-36 | margin-left: -9rem | +| -ml-40 | margin-left: -10rem | +| -ml-44 | margin-left: -11rem | +| -ml-48 | margin-left: -12rem | +| -ml-52 | margin-left: -13rem | +| -ml-56 | margin-left: -14rem | +| -ml-60 | margin-left: -15rem | +| -ml-64 | margin-left: -16rem | +| -ml-72 | margin-left: -18rem | +| -ml-80 | margin-left: -20rem | +| -ml-96 | margin-left: -24rem | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/spacing/_padding.md b/packages/amis-ui/scss/helper/spacing/_padding.md new file mode 100644 index 000000000..0f41331ba --- /dev/null +++ b/packages/amis-ui/scss/helper/spacing/_padding.md @@ -0,0 +1,265 @@ +--- +title: Padding +--- + +| Class | Properties | +| ----------- | ------------------------ | +| p-px | padding: 0.0625rem | +| p-0 | padding: 0 | +| p-none | padding: 0 | +| p-0\.5 | padding: 0.125rem | +| p-1 | padding: 0.25rem | +| p-1\.5 | padding: 0.375rem | +| p-2 | padding: 0.5rem | +| p-2\.5 | padding: 0.625rem | +| p-3 | padding: 0.75rem | +| p-3\.5 | padding: 0.875rem | +| p-4 | padding: 1rem | +| p-5 | padding: 1.25rem | +| p-6 | padding: 1.5rem | +| p-7 | padding: 1.75rem | +| p-8 | padding: 2rem | +| p-9 | padding: 2.25rem | +| p-10 | padding: 2.5rem | +| p-11 | padding: 2.75rem | +| p-12 | padding: 3rem | +| p-14 | padding: 3.5rem | +| p-16 | padding: 4rem | +| p-18 | padding: 4.5rem | +| p-20 | padding: 5rem | +| p-24 | padding: 6rem | +| p-28 | padding: 7rem | +| p-32 | padding: 8rem | +| p-36 | padding: 9rem | +| p-40 | padding: 10rem | +| p-44 | padding: 11rem | +| p-48 | padding: 12rem | +| p-52 | padding: 13rem | +| p-56 | padding: 14rem | +| p-60 | padding: 15rem | +| p-64 | padding: 16rem | +| p-72 | padding: 18rem | +| p-80 | padding: 20rem | +| p-96 | padding: 24rem | +| px-px | padding-left: 0.0625rem; padding-right: 0.0625rem | +| px-0 | padding-left: 0; padding-right: 0 | +| px-none | padding-left: 0; padding-right: 0 | +| px-0\.5 | padding-left: 0.125rem; padding-right: 0.125rem | +| px-1 | padding-left: 0.25rem; padding-right: 0.25rem | +| px-1\.5 | padding-left: 0.375rem; padding-right: 0.375rem | +| px-2 | padding-left: 0.5rem; padding-right: 0.5rem | +| px-2\.5 | padding-left: 0.625rem; padding-right: 0.625rem | +| px-3 | padding-left: 0.75rem; padding-right: 0.75rem | +| px-3\.5 | padding-left: 0.875rem; padding-right: 0.875rem | +| px-4 | padding-left: 1rem; padding-right: 1rem | +| px-5 | padding-left: 1.25rem; padding-right: 1.25rem | +| px-6 | padding-left: 1.5rem; padding-right: 1.5rem | +| px-7 | padding-left: 1.75rem; padding-right: 1.75rem | +| px-8 | padding-left: 2rem; padding-right: 2rem | +| px-9 | padding-left: 2.25rem; padding-right: 2.25rem | +| px-10 | padding-left: 2.5rem; padding-right: 2.5rem | +| px-11 | padding-left: 2.75rem; padding-right: 2.75rem | +| px-12 | padding-left: 3rem; padding-right: 3rem | +| px-14 | padding-left: 3.5rem; padding-right: 3.5rem | +| px-16 | padding-left: 4rem; padding-right: 4rem | +| px-18 | padding-left: 4.5rem; padding-right: 4.5rem | +| px-20 | padding-left: 5rem; padding-right: 5rem | +| px-24 | padding-left: 6rem; padding-right: 6rem | +| px-28 | padding-left: 7rem; padding-right: 7rem | +| px-32 | padding-left: 8rem; padding-right: 8rem | +| px-36 | padding-left: 9rem; padding-right: 9rem | +| px-40 | padding-left: 10rem; padding-right: 10rem | +| px-44 | padding-left: 11rem; padding-right: 11rem | +| px-48 | padding-left: 12rem; padding-right: 12rem | +| px-52 | padding-left: 13rem; padding-right: 13rem | +| px-56 | padding-left: 14rem; padding-right: 14rem | +| px-60 | padding-left: 15rem; padding-right: 15rem | +| px-64 | padding-left: 16rem; padding-right: 16rem | +| px-72 | padding-left: 18rem; padding-right: 18rem | +| px-80 | padding-left: 20rem; padding-right: 20rem | +| px-96 | padding-left: 24rem; padding-right: 24rem | +| py-px | padding-top: 0.0625rem; padding-bottom: 0.0625rem | +| py-0 | padding-top: 0; padding-bottom: 0 | +| py-none | padding-top: 0; padding-bottom: 0 | +| py-0\.5 | padding-top: 0.125rem; padding-bottom: 0.125rem | +| py-1 | padding-top: 0.25rem; padding-bottom: 0.25rem | +| py-1\.5 | padding-top: 0.375rem; padding-bottom: 0.375rem | +| py-2 | padding-top: 0.5rem; padding-bottom: 0.5rem | +| py-2\.5 | padding-top: 0.625rem; padding-bottom: 0.625rem | +| py-3 | padding-top: 0.75rem; padding-bottom: 0.75rem | +| py-3\.5 | padding-top: 0.875rem; padding-bottom: 0.875rem | +| py-4 | padding-top: 1rem; padding-bottom: 1rem | +| py-5 | padding-top: 1.25rem; padding-bottom: 1.25rem | +| py-6 | padding-top: 1.5rem; padding-bottom: 1.5rem | +| py-7 | padding-top: 1.75rem; padding-bottom: 1.75rem | +| py-8 | padding-top: 2rem; padding-bottom: 2rem | +| py-9 | padding-top: 2.25rem; padding-bottom: 2.25rem | +| py-10 | padding-top: 2.5rem; padding-bottom: 2.5rem | +| py-11 | padding-top: 2.75rem; padding-bottom: 2.75rem | +| py-12 | padding-top: 3rem; padding-bottom: 3rem | +| py-14 | padding-top: 3.5rem; padding-bottom: 3.5rem | +| py-16 | padding-top: 4rem; padding-bottom: 4rem | +| py-18 | padding-top: 4.5rem; padding-bottom: 4.5rem | +| py-20 | padding-top: 5rem; padding-bottom: 5rem | +| py-24 | padding-top: 6rem; padding-bottom: 6rem | +| py-28 | padding-top: 7rem; padding-bottom: 7rem | +| py-32 | padding-top: 8rem; padding-bottom: 8rem | +| py-36 | padding-top: 9rem; padding-bottom: 9rem | +| py-40 | padding-top: 10rem; padding-bottom: 10rem | +| py-44 | padding-top: 11rem; padding-bottom: 11rem | +| py-48 | padding-top: 12rem; padding-bottom: 12rem | +| py-52 | padding-top: 13rem; padding-bottom: 13rem | +| py-56 | padding-top: 14rem; padding-bottom: 14rem | +| py-60 | padding-top: 15rem; padding-bottom: 15rem | +| py-64 | padding-top: 16rem; padding-bottom: 16rem | +| py-72 | padding-top: 18rem; padding-bottom: 18rem | +| py-80 | padding-top: 20rem; padding-bottom: 20rem | +| py-96 | padding-top: 24rem; padding-bottom: 24rem | +| pt-px | padding-top: 0.0625rem | +| pt-0 | padding-top: 0 | +| pt-none | padding-top: 0 | +| pt-0\.5 | padding-top: 0.125rem | +| pt-1 | padding-top: 0.25rem | +| pt-1\.5 | padding-top: 0.375rem | +| pt-2 | padding-top: 0.5rem | +| pt-2\.5 | padding-top: 0.625rem | +| pt-3 | padding-top: 0.75rem | +| pt-3\.5 | padding-top: 0.875rem | +| pt-4 | padding-top: 1rem | +| pt-5 | padding-top: 1.25rem | +| pt-6 | padding-top: 1.5rem | +| pt-7 | padding-top: 1.75rem | +| pt-8 | padding-top: 2rem | +| pt-9 | padding-top: 2.25rem | +| pt-10 | padding-top: 2.5rem | +| pt-11 | padding-top: 2.75rem | +| pt-12 | padding-top: 3rem | +| pt-14 | padding-top: 3.5rem | +| pt-16 | padding-top: 4rem | +| pt-18 | padding-top: 4.5rem | +| pt-20 | padding-top: 5rem | +| pt-24 | padding-top: 6rem | +| pt-28 | padding-top: 7rem | +| pt-32 | padding-top: 8rem | +| pt-36 | padding-top: 9rem | +| pt-40 | padding-top: 10rem | +| pt-44 | padding-top: 11rem | +| pt-48 | padding-top: 12rem | +| pt-52 | padding-top: 13rem | +| pt-56 | padding-top: 14rem | +| pt-60 | padding-top: 15rem | +| pt-64 | padding-top: 16rem | +| pt-72 | padding-top: 18rem | +| pt-80 | padding-top: 20rem | +| pt-96 | padding-top: 24rem | +| pr-px | padding-right: 0.0625rem | +| pr-0 | padding-right: 0 | +| pr-none | padding-right: 0 | +| pr-0\.5 | padding-right: 0.125rem | +| pr-1 | padding-right: 0.25rem | +| pr-1\.5 | padding-right: 0.375rem | +| pr-2 | padding-right: 0.5rem | +| pr-2\.5 | padding-right: 0.625rem | +| pr-3 | padding-right: 0.75rem | +| pr-3\.5 | padding-right: 0.875rem | +| pr-4 | padding-right: 1rem | +| pr-5 | padding-right: 1.25rem | +| pr-6 | padding-right: 1.5rem | +| pr-7 | padding-right: 1.75rem | +| pr-8 | padding-right: 2rem | +| pr-9 | padding-right: 2.25rem | +| pr-10 | padding-right: 2.5rem | +| pr-11 | padding-right: 2.75rem | +| pr-12 | padding-right: 3rem | +| pr-14 | padding-right: 3.5rem | +| pr-16 | padding-right: 4rem | +| pr-18 | padding-right: 4.5rem | +| pr-20 | padding-right: 5rem | +| pr-24 | padding-right: 6rem | +| pr-28 | padding-right: 7rem | +| pr-32 | padding-right: 8rem | +| pr-36 | padding-right: 9rem | +| pr-40 | padding-right: 10rem | +| pr-44 | padding-right: 11rem | +| pr-48 | padding-right: 12rem | +| pr-52 | padding-right: 13rem | +| pr-56 | padding-right: 14rem | +| pr-60 | padding-right: 15rem | +| pr-64 | padding-right: 16rem | +| pr-72 | padding-right: 18rem | +| pr-80 | padding-right: 20rem | +| pr-96 | padding-right: 24rem | +| pb-px | padding-bottom: 0.0625rem | +| pb-0 | padding-bottom: 0 | +| pb-none | padding-bottom: 0 | +| pb-0\.5 | padding-bottom: 0.125rem | +| pb-1 | padding-bottom: 0.25rem | +| pb-1\.5 | padding-bottom: 0.375rem | +| pb-2 | padding-bottom: 0.5rem | +| pb-2\.5 | padding-bottom: 0.625rem | +| pb-3 | padding-bottom: 0.75rem | +| pb-3\.5 | padding-bottom: 0.875rem | +| pb-4 | padding-bottom: 1rem | +| pb-5 | padding-bottom: 1.25rem | +| pb-6 | padding-bottom: 1.5rem | +| pb-7 | padding-bottom: 1.75rem | +| pb-8 | padding-bottom: 2rem | +| pb-9 | padding-bottom: 2.25rem | +| pb-10 | padding-bottom: 2.5rem | +| pb-11 | padding-bottom: 2.75rem | +| pb-12 | padding-bottom: 3rem | +| pb-14 | padding-bottom: 3.5rem | +| pb-16 | padding-bottom: 4rem | +| pb-18 | padding-bottom: 4.5rem | +| pb-20 | padding-bottom: 5rem | +| pb-24 | padding-bottom: 6rem | +| pb-28 | padding-bottom: 7rem | +| pb-32 | padding-bottom: 8rem | +| pb-36 | padding-bottom: 9rem | +| pb-40 | padding-bottom: 10rem | +| pb-44 | padding-bottom: 11rem | +| pb-48 | padding-bottom: 12rem | +| pb-52 | padding-bottom: 13rem | +| pb-56 | padding-bottom: 14rem | +| pb-60 | padding-bottom: 15rem | +| pb-64 | padding-bottom: 16rem | +| pb-72 | padding-bottom: 18rem | +| pb-80 | padding-bottom: 20rem | +| pb-96 | padding-bottom: 24rem | +| pl-px | padding-left: 0.0625rem | +| pl-0 | padding-left: 0 | +| pl-none | padding-left: 0 | +| pl-0\.5 | padding-left: 0.125rem | +| pl-1 | padding-left: 0.25rem | +| pl-1\.5 | padding-left: 0.375rem | +| pl-2 | padding-left: 0.5rem | +| pl-2\.5 | padding-left: 0.625rem | +| pl-3 | padding-left: 0.75rem | +| pl-3\.5 | padding-left: 0.875rem | +| pl-4 | padding-left: 1rem | +| pl-5 | padding-left: 1.25rem | +| pl-6 | padding-left: 1.5rem | +| pl-7 | padding-left: 1.75rem | +| pl-8 | padding-left: 2rem | +| pl-9 | padding-left: 2.25rem | +| pl-10 | padding-left: 2.5rem | +| pl-11 | padding-left: 2.75rem | +| pl-12 | padding-left: 3rem | +| pl-14 | padding-left: 3.5rem | +| pl-16 | padding-left: 4rem | +| pl-18 | padding-left: 4.5rem | +| pl-20 | padding-left: 5rem | +| pl-24 | padding-left: 6rem | +| pl-28 | padding-left: 7rem | +| pl-32 | padding-left: 8rem | +| pl-36 | padding-left: 9rem | +| pl-40 | padding-left: 10rem | +| pl-44 | padding-left: 11rem | +| pl-48 | padding-left: 12rem | +| pl-52 | padding-left: 13rem | +| pl-56 | padding-left: 14rem | +| pl-60 | padding-left: 15rem | +| pl-64 | padding-left: 16rem | +| pl-72 | padding-left: 18rem | +| pl-80 | padding-left: 20rem | +| pl-96 | padding-left: 24rem | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/spacing/_space-between.md b/packages/amis-ui/scss/helper/spacing/_space-between.md new file mode 100644 index 000000000..3a83e91f7 --- /dev/null +++ b/packages/amis-ui/scss/helper/spacing/_space-between.md @@ -0,0 +1,155 @@ +--- +title: Space Between +--- + + +| Class | Properties | +| ----------- | ------------------------ | +| space-x-px | margin-left: 0.0625rem | +| space-x-px.space-x-reverse | margin-right: 0.0625rem | +| space-x-0 | margin-left: 0 | +| space-x-0.space-x-reverse | margin-right: 0 | +| space-x-none | margin-left: 0 | +| space-x-none.space-x-reverse | margin-right: 0 | +| space-x-0\.5 | margin-left: 0.125rem | +| space-x-0\.5.space-x-reverse | margin-right: 0.125rem | +| space-x-1 | margin-left: 0.25rem | +| space-x-1.space-x-reverse | margin-right: 0.25rem | +| space-x-1\.5 | margin-left: 0.375rem | +| space-x-1\.5.space-x-reverse | margin-right: 0.375rem | +| space-x-2 | margin-left: 0.5rem | +| space-x-2.space-x-reverse | margin-right: 0.5rem | +| space-x-2\.5 | margin-left: 0.625rem | +| space-x-2\.5.space-x-reverse | margin-right: 0.625rem | +| space-x-3 | margin-left: 0.75rem | +| space-x-3.space-x-reverse | margin-right: 0.75rem | +| space-x-3\.5 | margin-left: 0.875rem | +| space-x-3\.5.space-x-reverse | margin-right: 0.875rem | +| space-x-4 | margin-left: 1rem | +| space-x-4.space-x-reverse | margin-right: 1rem | +| space-x-5 | margin-left: 1.25rem | +| space-x-5.space-x-reverse | margin-right: 1.25rem | +| space-x-6 | margin-left: 1.5rem | +| space-x-6.space-x-reverse | margin-right: 1.5rem | +| space-x-7 | margin-left: 1.75rem | +| space-x-7.space-x-reverse | margin-right: 1.75rem | +| space-x-8 | margin-left: 2rem | +| space-x-8.space-x-reverse | margin-right: 2rem | +| space-x-9 | margin-left: 2.25rem | +| space-x-9.space-x-reverse | margin-right: 2.25rem | +| space-x-10 | margin-left: 2.5rem | +| space-x-10.space-x-reverse | margin-right: 2.5rem | +| space-x-11 | margin-left: 2.75rem | +| space-x-11.space-x-reverse | margin-right: 2.75rem | +| space-x-12 | margin-left: 3rem | +| space-x-12.space-x-reverse | margin-right: 3rem | +| space-x-14 | margin-left: 3.5rem | +| space-x-14.space-x-reverse | margin-right: 3.5rem | +| space-x-16 | margin-left: 4rem | +| space-x-16.space-x-reverse | margin-right: 4rem | +| space-x-18 | margin-left: 4.5rem | +| space-x-18.space-x-reverse | margin-right: 4.5rem | +| space-x-20 | margin-left: 5rem | +| space-x-20.space-x-reverse | margin-right: 5rem | +| space-x-24 | margin-left: 6rem | +| space-x-24.space-x-reverse | margin-right: 6rem | +| space-x-28 | margin-left: 7rem | +| space-x-28.space-x-reverse | margin-right: 7rem | +| space-x-32 | margin-left: 8rem | +| space-x-32.space-x-reverse | margin-right: 8rem | +| space-x-36 | margin-left: 9rem | +| space-x-36.space-x-reverse | margin-right: 9rem | +| space-x-40 | margin-left: 10rem | +| space-x-40.space-x-reverse | margin-right: 10rem | +| space-x-44 | margin-left: 11rem | +| space-x-44.space-x-reverse | margin-right: 11rem | +| space-x-48 | margin-left: 12rem | +| space-x-48.space-x-reverse | margin-right: 12rem | +| space-x-52 | margin-left: 13rem | +| space-x-52.space-x-reverse | margin-right: 13rem | +| space-x-56 | margin-left: 14rem | +| space-x-56.space-x-reverse | margin-right: 14rem | +| space-x-60 | margin-left: 15rem | +| space-x-60.space-x-reverse | margin-right: 15rem | +| space-x-64 | margin-left: 16rem | +| space-x-64.space-x-reverse | margin-right: 16rem | +| space-x-72 | margin-left: 18rem | +| space-x-72.space-x-reverse | margin-right: 18rem | +| space-x-80 | margin-left: 20rem | +| space-x-80.space-x-reverse | margin-right: 20rem | +| space-x-96 | margin-left: 24rem | +| space-x-96.space-x-reverse | margin-right: 24rem | +| space-y-px | margin-top: 0.0625rem | +| space-y-px.space-y-reverse | margin-bottom: 0.0625rem | +| space-y-0 | margin-top: 0 | +| space-y-0.space-y-reverse | margin-bottom: 0 | +| space-y-none | margin-top: 0 | +| space-y-none.space-y-reverse | margin-bottom: 0 | +| space-y-0\.5 | margin-top: 0.125rem | +| space-y-0\.5.space-y-reverse | margin-bottom: 0.125rem | +| space-y-1 | margin-top: 0.25rem | +| space-y-1.space-y-reverse | margin-bottom: 0.25rem | +| space-y-1\.5 | margin-top: 0.375rem | +| space-y-1\.5.space-y-reverse | margin-bottom: 0.375rem | +| space-y-2 | margin-top: 0.5rem | +| space-y-2.space-y-reverse | margin-bottom: 0.5rem | +| space-y-2\.5 | margin-top: 0.625rem | +| space-y-2\.5.space-y-reverse | margin-bottom: 0.625rem | +| space-y-3 | margin-top: 0.75rem | +| space-y-3.space-y-reverse | margin-bottom: 0.75rem | +| space-y-3\.5 | margin-top: 0.875rem | +| space-y-3\.5.space-y-reverse | margin-bottom: 0.875rem | +| space-y-4 | margin-top: 1rem | +| space-y-4.space-y-reverse | margin-bottom: 1rem | +| space-y-5 | margin-top: 1.25rem | +| space-y-5.space-y-reverse | margin-bottom: 1.25rem | +| space-y-6 | margin-top: 1.5rem | +| space-y-6.space-y-reverse | margin-bottom: 1.5rem | +| space-y-7 | margin-top: 1.75rem | +| space-y-7.space-y-reverse | margin-bottom: 1.75rem | +| space-y-8 | margin-top: 2rem | +| space-y-8.space-y-reverse | margin-bottom: 2rem | +| space-y-9 | margin-top: 2.25rem | +| space-y-9.space-y-reverse | margin-bottom: 2.25rem | +| space-y-10 | margin-top: 2.5rem | +| space-y-10.space-y-reverse | margin-bottom: 2.5rem | +| space-y-11 | margin-top: 2.75rem | +| space-y-11.space-y-reverse | margin-bottom: 2.75rem | +| space-y-12 | margin-top: 3rem | +| space-y-12.space-y-reverse | margin-bottom: 3rem | +| space-y-14 | margin-top: 3.5rem | +| space-y-14.space-y-reverse | margin-bottom: 3.5rem | +| space-y-16 | margin-top: 4rem | +| space-y-16.space-y-reverse | margin-bottom: 4rem | +| space-y-18 | margin-top: 4.5rem | +| space-y-18.space-y-reverse | margin-bottom: 4.5rem | +| space-y-20 | margin-top: 5rem | +| space-y-20.space-y-reverse | margin-bottom: 5rem | +| space-y-24 | margin-top: 6rem | +| space-y-24.space-y-reverse | margin-bottom: 6rem | +| space-y-28 | margin-top: 7rem | +| space-y-28.space-y-reverse | margin-bottom: 7rem | +| space-y-32 | margin-top: 8rem | +| space-y-32.space-y-reverse | margin-bottom: 8rem | +| space-y-36 | margin-top: 9rem | +| space-y-36.space-y-reverse | margin-bottom: 9rem | +| space-y-40 | margin-top: 10rem | +| space-y-40.space-y-reverse | margin-bottom: 10rem | +| space-y-44 | margin-top: 11rem | +| space-y-44.space-y-reverse | margin-bottom: 11rem | +| space-y-48 | margin-top: 12rem | +| space-y-48.space-y-reverse | margin-bottom: 12rem | +| space-y-52 | margin-top: 13rem | +| space-y-52.space-y-reverse | margin-bottom: 13rem | +| space-y-56 | margin-top: 14rem | +| space-y-56.space-y-reverse | margin-bottom: 14rem | +| space-y-60 | margin-top: 15rem | +| space-y-60.space-y-reverse | margin-bottom: 15rem | +| space-y-64 | margin-top: 16rem | +| space-y-64.space-y-reverse | margin-bottom: 16rem | +| space-y-72 | margin-top: 18rem | +| space-y-72.space-y-reverse | margin-bottom: 18rem | +| space-y-80 | margin-top: 20rem | +| space-y-80.space-y-reverse | margin-bottom: 20rem | +| space-y-96 | margin-top: 24rem | +| space-y-96.space-y-reverse | margin-bottom: 24rem | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/typography/_font-family.md b/packages/amis-ui/scss/helper/typography/_font-family.md new file mode 100644 index 000000000..4b11e0825 --- /dev/null +++ b/packages/amis-ui/scss/helper/typography/_font-family.md @@ -0,0 +1,9 @@ +--- +title: Font Family +--- + +| Class | Properties | +| ----------- | ------------------------ | +| font-sans | ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' | +| font-serif | font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif | +| font-mono | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/typography/_font-size.md b/packages/amis-ui/scss/helper/typography/_font-size.md new file mode 100644 index 000000000..3577e1cf2 --- /dev/null +++ b/packages/amis-ui/scss/helper/typography/_font-size.md @@ -0,0 +1,19 @@ +--- +title: Font Size +--- + +| Class | Properties | +| ----------- | ------------------------ | +| text-xs | font-size: 0.75rem; line-height: 1rem | +| text-sm | font-size: 0.875rem; line-height: 1.25rem | +| text-base | font-size: 1rem; line-height: 1.5rem | +| text-md | font-size: 1.125rem; line-height: 1.75rem | +| text-lg | font-size: 1.25rem; line-height: 1.75rem | +| text-xl | font-size: 1.5rem; line-height: 2rem | +| text-2xl | font-size: 1.875rem; line-height: 2.25rem | +| text-3xl | font-size: 2.25rem; line-height: 2.5rem | +| text-4xl | font-size: 3rem; line-height: 1 | +| text-5xl | font-size: 3.75rem; line-height: 1 | +| text-6xl | font-size: 4.5rem; line-height: 1 | +| text-7xl | font-size: 6rem; line-height: 1 | +| text-8xl | font-size: 8rem; line-height: 1 | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/typography/_font-style.md b/packages/amis-ui/scss/helper/typography/_font-style.md new file mode 100644 index 000000000..6e756d0df --- /dev/null +++ b/packages/amis-ui/scss/helper/typography/_font-style.md @@ -0,0 +1,8 @@ +--- +title: Font Style +--- + +| Class | Properties | +| ----------- | ------------------------ | +| italic | font-style: italic | +| not-italic | font-style: normal | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/typography/_font-weight.md b/packages/amis-ui/scss/helper/typography/_font-weight.md new file mode 100644 index 000000000..ee5678e5e --- /dev/null +++ b/packages/amis-ui/scss/helper/typography/_font-weight.md @@ -0,0 +1,15 @@ +--- +title: Font Weight +--- + +| Class | Properties | +| ----------- | ------------------------ | +| font-thin | font-weight: 100 | +| font-extralight | font-weight: 200 | +| font-light | font-weight: 300 | +| font-normal | font-weight: 400 | +| font-medium | font-weight: 500 | +| font-semibold | font-weight: 600 | +| font-bold | font-weight: 700 | +| font-extrabold | font-weight: 800 | +| font-black | font-weight: 900 | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/typography/_letter-spacing.md b/packages/amis-ui/scss/helper/typography/_letter-spacing.md new file mode 100644 index 000000000..525951aa4 --- /dev/null +++ b/packages/amis-ui/scss/helper/typography/_letter-spacing.md @@ -0,0 +1,12 @@ +--- +title: Letter Spacing +--- + +| Class | Properties | +| ----------- | ------------------------ | +| tracking-tighter | letter-spacing: -0.05em | +| tracking-tight | letter-spacing: -0.025em | +| tracking-normal | letter-spacing: 0em | +| tracking-wide | letter-spacing: 0.025 | +| tracking-wider | letter-spacing: 0.05em | +| tracking-widest | letter-spacing: 0.1em | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/typography/_line-height.md b/packages/amis-ui/scss/helper/typography/_line-height.md new file mode 100644 index 000000000..5b0b68c65 --- /dev/null +++ b/packages/amis-ui/scss/helper/typography/_line-height.md @@ -0,0 +1,20 @@ +--- +title: Line Height +--- + +| Class | Properties | +| ----------- | ------------------------ | +| leading-3 | line-height: 0.75rem | +| leading-4 | line-height: 1rem | +| leading-5 | line-height: 1.25rem | +| leading-6 | line-height: 1.5rem | +| leading-7 | line-height: 1.75rem | +| leading-8 | line-height: 2rem | +| leading-9 | line-height: 2.25rem | +| leading-10 | line-height: 2.5rem | +| leading-none | line-height: 1 | +| leading-tight | line-height: 1.25 | +| leading-snug | line-height: 1.375 | +| leading-normal | line-height: 1.5 | +| leading-relaxed | line-height: 1.625 | +| leading-loose | line-height: 2 | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/typography/_list-style-type.md b/packages/amis-ui/scss/helper/typography/_list-style-type.md new file mode 100644 index 000000000..09f230e3c --- /dev/null +++ b/packages/amis-ui/scss/helper/typography/_list-style-type.md @@ -0,0 +1,11 @@ +--- +title: List Style Type +--- + +| Class | Properties | +| ----------- | ------------------------ | +| list-none | list-style-type: none | +| list-disc | list-style-type: disc | +| list-decimal | list-style-type: decimal | +| list-inside | list-style-position: inside | +| list-outside | list-style-position: outside | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/typography/_text-align.md b/packages/amis-ui/scss/helper/typography/_text-align.md new file mode 100644 index 000000000..30e76cfcb --- /dev/null +++ b/packages/amis-ui/scss/helper/typography/_text-align.md @@ -0,0 +1,10 @@ +--- +title: Text Align +--- + +| Class | Properties | +| ----------- | ------------------------ | +| text-left | text-align: left | +| text-center | text-align: center | +| text-right | text-align: right | +| text-justify | text-align: justify | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/typography/_text-color.md b/packages/amis-ui/scss/helper/typography/_text-color.md new file mode 100644 index 000000000..31cc8fc85 --- /dev/null +++ b/packages/amis-ui/scss/helper/typography/_text-color.md @@ -0,0 +1,110 @@ +--- +title: Text Color +--- + +| Class | Properties | 示例效果 | +| ----------- | ------------------------ | ------------------------ | +| text-transparent | color: transparent | AaBbCcDd| +| text-current | color: currentColor | AaBbCcDd| +| text-black | color: #000 | AaBbCcDd| +| text-white | color: #fff | AaBbCcDd| +| text-primary | color: #007bff | AaBbCcDd| +| text-secondary | color: #6c757d | AaBbCcDd| +| text-success | color: #28a745 | AaBbCcDd| +| text-info | color: #007bff | AaBbCcDd| +| text-warning | color: #fad733 | AaBbCcDd| +| text-danger | color: #dc3545 | AaBbCcDd| +| text-light | color: #f8f9fa | AaBbCcDd| +| text-dark | color: #343a40 | AaBbCcDd| +| text-gray-50 | color: #f9fafb | AaBbCcDd| +| text-gray-100 | color: #f3f4f6 | AaBbCcDd| +| text-gray-200 | color: #e5e7eb | AaBbCcDd| +| text-gray-300 | color: #d1d5db | AaBbCcDd| +| text-gray-400 | color: #9ca3af | AaBbCcDd| +| text-gray-500 | color: #6b7280 | AaBbCcDd| +| text-gray-600 | color: #4b5563 | AaBbCcDd| +| text-gray-700 | color: #374151 | AaBbCcDd| +| text-gray-800 | color: #1f2937 | AaBbCcDd| +| text-gray-900 | color: #111827 | AaBbCcDd| +| text-red-50 | color: #fef2f2 | AaBbCcDd| +| text-red-100 | color: #fee2e2 | AaBbCcDd| +| text-red-200 | color: #fecaca | AaBbCcDd| +| text-red-300 | color: #fca5a5 | AaBbCcDd| +| text-red-400 | color: #f87171 | AaBbCcDd| +| text-red-500 | color: #ef4444 | AaBbCcDd| +| text-red-600 | color: #dc2626 | AaBbCcDd| +| text-red-700 | color: #b91c1c | AaBbCcDd| +| text-red-800 | color: #991b1b | AaBbCcDd| +| text-red-900 | color: #7f1d1d | AaBbCcDd| +| text-yellow-50 | color: #fffbeb | AaBbCcDd| +| text-yellow-100 | color: #fef3c7 | AaBbCcDd| +| text-yellow-200 | color: #fde68a | AaBbCcDd| +| text-yellow-300 | color: #fcd34d | AaBbCcDd| +| text-yellow-400 | color: #fbbf24 | AaBbCcDd| +| text-yellow-500 | color: #f59e0b | AaBbCcDd| +| text-yellow-600 | color: #d97706 | AaBbCcDd| +| text-yellow-700 | color: #b45309 | AaBbCcDd| +| text-yellow-800 | color: #92400e | AaBbCcDd| +| text-yellow-900 | color: #78350f | AaBbCcDd| +| text-green-50 | color: #ecfdf5 | AaBbCcDd| +| text-green-100 | color: #d1fae5 | AaBbCcDd| +| text-green-200 | color: #a7f3d0 | AaBbCcDd| +| text-green-300 | color: #6ee7b7 | AaBbCcDd| +| text-green-400 | color: #34d399 | AaBbCcDd| +| text-green-500 | color: #10b981 | AaBbCcDd| +| text-green-600 | color: #059669 | AaBbCcDd| +| text-green-700 | color: #047857 | AaBbCcDd| +| text-green-800 | color: #065f46 | AaBbCcDd| +| text-green-900 | color: #064e3b | AaBbCcDd| +| text-blue-50 | color: #eff6ff | AaBbCcDd| +| text-blue-100 | color: #dbeafe | AaBbCcDd| +| text-blue-200 | color: #bfdbfe | AaBbCcDd| +| text-blue-300 | color: #93c5fd | AaBbCcDd| +| text-blue-400 | color: #60a5fa | AaBbCcDd| +| text-blue-500 | color: #3b82f6 | AaBbCcDd| +| text-blue-600 | color: #2563eb | AaBbCcDd| +| text-blue-700 | color: #1d4ed8 | AaBbCcDd| +| text-blue-800 | color: #1e40af | AaBbCcDd| +| text-blue-900 | color: #1e3a8a | AaBbCcDd| +| text-cyan-50 | color: #ecfeff | AaBbCcDd| +| text-cyan-100 | color: #cffafe | AaBbCcDd| +| text-cyan-200 | color: #a5f3fc | AaBbCcDd| +| text-cyan-300 | color: #67e8f9 | AaBbCcDd| +| text-cyan-400 | color: #22d3ee | AaBbCcDd| +| text-cyan-500 | color: #06b6d4 | AaBbCcDd| +| text-cyan-600 | color: #0891b2 | AaBbCcDd| +| text-cyan-700 | color: #0e7490 | AaBbCcDd| +| text-cyan-800 | color: #155e75 | AaBbCcDd| +| text-cyan-900 | color: #164e63 | AaBbCcDd| +| text-indigo-50 | color: #eef2ff | AaBbCcDd| +| text-indigo-100 | color: #e0e7ff | AaBbCcDd| +| text-indigo-200 | color: #c7d2fe | AaBbCcDd| +| text-indigo-300 | color: #a5b4fc | AaBbCcDd| +| text-indigo-400 | color: #818cf8 | AaBbCcDd| +| text-indigo-500 | color: #6366f1 | AaBbCcDd| +| text-indigo-600 | color: #4f46e5 | AaBbCcDd| +| text-indigo-700 | color: #4338ca | AaBbCcDd| +| text-indigo-800 | color: #3730a3 | AaBbCcDd| +| text-indigo-900 | color: #312e81 | AaBbCcDd| +| text-purple-50 | color: #f5f3ff | AaBbCcDd| +| text-purple-100 | color: #ede9fe | AaBbCcDd| +| text-purple-200 | color: #ddd6fe | AaBbCcDd| +| text-purple-300 | color: #c4b5fd | AaBbCcDd| +| text-purple-400 | color: #a78bfa | AaBbCcDd| +| text-purple-500 | color: #8b5cf6 | AaBbCcDd| +| text-purple-600 | color: #7c3aed | AaBbCcDd| +| text-purple-700 | color: #6d28d9 | AaBbCcDd| +| text-purple-800 | color: #5b21b6 | AaBbCcDd| +| text-purple-900 | color: #4c1d95 | AaBbCcDd| +| text-pink-50 | color: #fdf2f8 | AaBbCcDd| +| text-pink-100 | color: #fce7f3 | AaBbCcDd| +| text-pink-200 | color: #fbcfe8 | AaBbCcDd| +| text-pink-300 | color: #f9a8d4 | AaBbCcDd| +| text-pink-400 | color: #f472b6 | AaBbCcDd| +| text-pink-500 | color: #ec4899 | AaBbCcDd| +| text-pink-600 | color: #db2777 | AaBbCcDd| +| text-pink-700 | color: #be185d | AaBbCcDd| +| text-pink-800 | color: #9d174d | AaBbCcDd| +| text-pink-900 | color: #831843 | AaBbCcDd| + +还有 hover、active、focus、disabled 扩展，比如 `hover:text-black` \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/typography/_text-decoration.md b/packages/amis-ui/scss/helper/typography/_text-decoration.md new file mode 100644 index 000000000..bdd194840 --- /dev/null +++ b/packages/amis-ui/scss/helper/typography/_text-decoration.md @@ -0,0 +1,9 @@ +--- +title: Text Decoration +--- + +| Class | Properties | +| ----------- | ------------------------ | +| underline | text-decoration: underline | +| line-through | text-decoration: line-through | +| no-underline | text-decoration: none | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/typography/_text-overflow.md b/packages/amis-ui/scss/helper/typography/_text-overflow.md new file mode 100644 index 000000000..6e2605161 --- /dev/null +++ b/packages/amis-ui/scss/helper/typography/_text-overflow.md @@ -0,0 +1,9 @@ +--- +title: Text OverFlow +--- + +| Class | Properties | +| ----------- | ------------------------ | +| truncate | overflow: hidden; text-overflow: ellipsis; white-space: nowrap | +| overflow-ellipsis | text-overflow: ellipsis | +| overflow-clip | text-overflow: clip | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/typography/_text-transform.md b/packages/amis-ui/scss/helper/typography/_text-transform.md new file mode 100644 index 000000000..68bd85662 --- /dev/null +++ b/packages/amis-ui/scss/helper/typography/_text-transform.md @@ -0,0 +1,10 @@ +--- +title: Text Transform +--- + +| Class | Properties | +| ----------- | ------------------------ | +| uppercase | text-transform: uppercase | +| lowercase | text-transform: lowercase | +| capitalize | text-transform: capitalize | +| normal-case | text-transform: none | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/typography/_vertical-align.md b/packages/amis-ui/scss/helper/typography/_vertical-align.md new file mode 100644 index 000000000..13ee9d3b3 --- /dev/null +++ b/packages/amis-ui/scss/helper/typography/_vertical-align.md @@ -0,0 +1,12 @@ +--- +title: Vertial Align +--- + +| Class | Properties | +| ----------- | ------------------------ | +| align-baseline | vertical-align: baseline | +| align-top | vertical-align: top | +| align-middle | vertical-align: middle | +| align-bottom | vertical-align: bottom | +| align-text-top | vertical-align: text-top | +| align-text-bottom | vertical-align: text-bottom | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/typography/_whitespace.md b/packages/amis-ui/scss/helper/typography/_whitespace.md new file mode 100644 index 000000000..8992456c9 --- /dev/null +++ b/packages/amis-ui/scss/helper/typography/_whitespace.md @@ -0,0 +1,11 @@ +--- +title: Whitespace +--- + +| Class | Properties | +| ----------- | ------------------------ | +| white-space-normal | align: normal | +| white-space-nowrap | white-space: nowrap | +| white-space-pre | white-space: pre | +| white-space-pre-line | white-space: pre-line | +| white-space-pre-wrap | white-space: pre-wrap | \ No newline at end of file diff --git a/packages/amis-ui/scss/helper/typography/_word-break.md b/packages/amis-ui/scss/helper/typography/_word-break.md new file mode 100644 index 000000000..f5122eb0d --- /dev/null +++ b/packages/amis-ui/scss/helper/typography/_word-break.md @@ -0,0 +1,9 @@ +--- +title: Word Break +--- + +| Class | Properties | +| ----------- | ------------------------ | +| break-normal | overflow-wrap: normal; word-break: normal | +| break-words | overflow-wrap: break-word | +| break-all | word-break: break-all | \ No newline at end of file diff --git a/packages/amis/src/renderers/Icon.tsx b/packages/amis/src/renderers/Icon.tsx index 56f121f83..67f2394df 100644 --- a/packages/amis/src/renderers/Icon.tsx +++ b/packages/amis/src/renderers/Icon.tsx @@ -2,7 +2,7 @@ import React from 'react'; import {Renderer, RendererProps, filter, IconCheckedSchema} from 'amis-core'; import {BaseSchema, SchemaTpl} from '../Schema'; import {BadgeObject, withBadge} from 'amis-ui'; -import {getIcon} from 'amis-ui/lib/components/icons'; +import {getIcon} from 'amis-ui'; import {isObject} from 'lodash'; /** diff --git a/packages/amis/tsconfig.json b/packages/amis/tsconfig.json index bcc963e38..6b2dd8b3a 100644 --- a/packages/amis/tsconfig.json +++ b/packages/amis/tsconfig.json @@ -3,6 +3,7 @@ "compilerOptions": { "outDir": "lib", "rootDir": "./", + "experimentalDecorators": true, "typeRoots": [ "../../types", "./node_modules/@types", diff --git a/scripts/fis3plugin.ts b/scripts/fis3plugin.ts new file mode 100644 index 000000000..c46d66434 --- /dev/null +++ b/scripts/fis3plugin.ts @@ -0,0 +1,62 @@ +import MagicString from 'magic-string'; +import {createFilter} from 'rollup-pluginutils'; +import type {Plugin} from 'vite'; + +export default function fis3replace( + options: { + include?: any; + exclude?: any; + sourcemap?: boolean; + sourceMap?: boolean; + } = {} +): Plugin { + const filter = createFilter(options.include, options.exclude); + + return { + name: 'fis3', + enforce: 'pre', + apply: 'serve', + + transform(code: string, id: string) { + if (!filter(id)) return null; + + const magicString = new MagicString(code); + + let hasReplacements = false; + let start; + let end; + + code = code.replace( + /(__uri|__inline)\(\s*('|")(.*?)\2\s*\)/g, + (_, directive, quote, target, index) => { + hasReplacements = true; + + start = index; + end = start + _.length; + + if (directive === '__uri') { + let replacement = `new URL(${quote}${target}${quote}, import.meta.url).href`; + magicString.overwrite(start, end, replacement); + } else if (directive === '__inline') { + let varname = target + .replace(/[^a-zA-Z0-9]/g, '') + .replace(/^\d+/, ''); + + magicString.prepend(`import ${varname} from '${target}?inline';\n`); + magicString.overwrite(start, end, `${varname}`); + } + + return _; + } + ); + + if (!hasReplacements) return null; + + const result: any = {code: magicString.toString()}; + if (options.sourceMap !== false && options.sourcemap !== false) + result.map = magicString.generateMap({hires: true}); + + return result; + } + }; +} diff --git a/scripts/markdownPlugin.ts b/scripts/markdownPlugin.ts new file mode 100644 index 000000000..a1f7d6df3 --- /dev/null +++ b/scripts/markdownPlugin.ts @@ -0,0 +1,251 @@ +import type {Plugin} from 'vite'; +import * as marked from 'marked'; +import * as prism from 'prismjs'; +import * as yaml from 'js-yaml'; +let loadLanguages = require('prismjs/components/'); +loadLanguages([ + 'bash', + 'javascript', + 'java', + 'python', + 'jsx', + 'tsx', + 'css', + 'markup', + 'json' +]); +const rYml = /^\s*---([\s\S]*?)---\s/; +const renderer = new marked.Renderer(); +(marked as any).setOptions({ + renderer: renderer, + gfm: true, + tables: true, + breaks: false, + pedantic: false, + smartLists: true, + smartypants: false +}); + +// Synchronous highlighting with prism.js +(marked as any).setOptions({ + highlight: function (code: string, lang: string) { + if (lang) { + return prism.highlight(code, prism.languages[lang], lang); + } else { + return code; + } + } +}); + +// renderer.table = function(header, body) { +// return '\n' +// + '\n' +// + header +// + '\n' +// + '\n' +// + body +// + '\n' +// + '
\n'; +// }; + +renderer.link = function (href: string, title: string, text: string) { + if ((this as any).options.sanitize) { + try { + var prot = decodeURIComponent(unescape(href)) + .replace(/[^\w:]/g, '') + .toLowerCase(); + } catch (e) { + return ''; + } + if (prot.indexOf('javascript:') === 0 || prot.indexOf('vbscript:') === 0) { + return ''; + } + } + if (href && href[0] === '#') { + href = + '#' + + encodeURIComponent( + href + .substring(1) + .toLowerCase() + .replace(/[^\u4e00-\u9fa5_a-zA-Z0-9]+/g, '-') + ); + } + + var out = ''; + return out; +}; + +function markdown2js(content: string, file: string) { + var m = rYml.exec(content); + var info: any = {}; + if (m && m[1]) { + info = (yaml as any).load(m[1]); + content = content.substring(m[0].length); + } + + var toc: any = { + label: '目录', + type: 'toc', + children: [], + level: 0 + }; + var stack = [toc]; + + renderer.heading = function (text, level) { + var escapedText = encodeURIComponent( + text.toLowerCase().replace(/[^\u4e00-\u9fa5_a-zA-Z0-9]+/g, '-') + ); + + if (level < 5) { + var menu = { + label: text, + fragment: escapedText, + fullPath: '#' + escapedText, + level: level + }; + + while (stack.length && stack[0].level >= level) { + stack.shift(); + } + + stack[0].children = stack[0].children || []; + stack[0].children.push(menu); + + stack.unshift(menu); + } + + var anchor = + ''; + + return '' + anchor + text + ''; + + // return '' + + // text + ''; + }; + + const placeholder: any = {}; + let index = 1; + + content = content + .replace(/\!\!\!include\s*\(([^\)]+?)\)\!\!\!/g, (_, val) => { + // todo + // const result = null; + + // if (result) { + // // 暂时不支持嵌套 include + // return result.file.getContent(); + // } + + return _; + }) + .replace( + /```(schema|html)(?::(.*?))?\n([\s\S]*?)```/g, + function (_, lang, attr, code) { + const setting: any = {}; + attr && + attr.split(/\s+/).forEach(function (item: string) { + var parts = item.split('='); + + if (parts[1] && /^('|").*\1/.test(parts[1])) { + parts[1] = parts[1].substring(1, parts[1].length - 1); + } + + setting[parts[0]] = parts[1] ? decodeURIComponent(parts[1]) : ''; + + if (parts[0] === 'height') { + setting.height = parseInt(setting.height, 10) /*编辑器的高度*/; + attr = attr.replace(item, `height="${setting.height}"`); + } + }); + + // placeholder[index] = ``; + if (lang === 'html') { + if (~code.indexOf('
${code}
${prism.highlight(
+            code
+              .replace(/"data:(\w+\/\w+);.*?"/g, '"data:$1; ..."')
+              .replace(/]*)>[\s\S]*?<\/svg>/g, '...')
+              .replace(/class="([^"]*?)\.\.\.([^"]*?)"/g, 'class="$1..."'),
+            prism.languages[lang],
+            lang
+          )}
`; + } else { + placeholder[ + index + ] = `
`; + } + + return `[[${index++}]]`; + } + ); + + content = (marked as any) + .parse(content) + .replace(/

\[\[(\d+)\]\]<\/p>/g, function (_: string, id: string) { + return placeholder[id] || ''; + }); + + // content = global.fis ? fis.compile.partial(content, file, 'html') : content; + // + `\n\n

文档内容有误？欢迎大家一起来编写，文档地址：${file.subpath}。
`; + info.html = + '
' + + content.replace( + /<\!\-\-amis\-preview\-(start|end)\-\-\>/g, + function (_, type) { + return type === 'start' ? '
' : '
'; + } + ) + + '
'; + info.toc = toc; + + return 'export default ' + JSON.stringify(info, null, 2) + ';'; +} + +export default function markdownPlugin(options: {} = {}): Plugin { + return { + name: 'markdown-as-js', + enforce: 'pre', + apply: 'serve', + transform(code: string, id: string) { + // if (id.endsWith('.scss') && /\/_[^\/]+\.scss$/.test(id)) { + // const markdowns: Array = []; + + // code.replace( + // /\/\*\!markdown\n([\s\S]+?)\*\//g, + // (_: string, md: string) => { + // markdowns.push(md.trim()); + // return _; + // } + // ); + + // if (markdowns.length) { + // return {code: markdown2js(markdowns.join('\n'), id) as string}; + // } + + // return null; + // } + + if (!id.endsWith('.md')) return null; + + return {code: markdown2js(code, id) as string}; + } + }; +} diff --git a/scripts/mockApiPlugin.ts b/scripts/mockApiPlugin.ts new file mode 100644 index 000000000..4b11dda94 --- /dev/null +++ b/scripts/mockApiPlugin.ts @@ -0,0 +1,42 @@ +import type {Plugin} from 'vite'; +// @ts-ignore +import handler from '../mock/index'; +import express, {query} from 'express'; +import setPrototypeOf from 'setprototypeof'; +import path from 'path'; +const app = express(); + +function initExpress(req: any, res: any, next: any, callback: () => void) { + if (app.enabled('x-powered-by')) res.setHeader('X-Powered-By', 'Express'); + (req as any).res = res; + res.req = req; + (req as any).next = next; + + setPrototypeOf(req, app.request); + setPrototypeOf(res, app.response); + + res.locals = res.locals || Object.create(null); + + query({})(req as any, res, callback); +} + +export default function mockApiPlugin(options: {} = {}): Plugin { + return { + name: 'mock-api', + enforce: 'pre' as 'pre', + apply: 'serve' as 'serve', + configureServer(server) { + server.middlewares.use('/api', (req, res, next) => { + initExpress(req, res, next, () => { + handler(req, res); + }); + }); + + server.middlewares.use('/schema.json', (req, res, next) => { + initExpress(req, res, next, () => { + res.sendFile(path.resolve(__dirname, '../packages/amis/schema.json')); + }); + }); + } + }; +} diff --git a/tsconfig.json b/tsconfig.json index f9d2307ca..2730c92c0 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -28,6 +28,14 @@ } }, "types": ["typePatches"], - "references": [{"path": "packages/amis"}], - "include": ["**.ts", "**.tsx", "packages/amis-ui/src/custom.d.ts"] + "references": [], + "include": [ + "**.ts", + "**.tsx", + "**.jsx", + "scripts/fis3plugin.ts", + "scripts/markdownPlugin.ts", + "scripts/mockApiPlugin.ts", + "packages/amis-ui/src/custom.d.ts" + ] } diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 000000000..af5f1b805 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,79 @@ +import {defineConfig} from 'vite'; +import react from '@vitejs/plugin-react'; +import path from 'path'; +import svgr from 'vite-plugin-svgr'; +import monacoEditorPlugin from 'vite-plugin-monaco-editor'; +import replace from '@rollup/plugin-replace'; +import fis3 from './scripts/fis3plugin'; +import markdown from './scripts/markdownPlugin'; +import mockApi from './scripts/mockApiPlugin'; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + fis3(), + markdown(), + mockApi(), + + react({ + babel: { + parserOpts: { + plugins: ['decorators-legacy', 'classProperties'] + } + } + }), + svgr({ + exportAsDefault: true, + svgrOptions: { + svgProps: { + className: 'icon' + }, + prettier: false, + dimensions: false + } + }), + monacoEditorPlugin({}), + replace({ + preventAssignment: true, + __buildDate__: () => JSON.stringify(new Date()), + __buildVersion: JSON.stringify('dev') + }) + ], + optimizeDeps: { + include: ['amis-formula/lib/doc'], + esbuildOptions: { + target: 'esnext' + } + }, + server: { + port: 8888 + }, + resolve: { + alias: [ + { + find: 'amis-formula/lib', + replacement: path.resolve(__dirname, './packages/amis-formula/src') + }, + { + find: 'amis-formula', + replacement: path.resolve(__dirname, './packages/amis-formula/src') + }, + { + find: 'amis-ui/lib', + replacement: path.resolve(__dirname, './packages/amis-ui/src') + }, + { + find: 'amis-ui', + replacement: path.resolve(__dirname, './packages/amis-ui/src') + }, + { + find: 'amis-core', + replacement: path.resolve(__dirname, './packages/amis-core/src') + }, + { + find: 'amis', + replacement: path.resolve(__dirname, './packages/amis/src') + } + ] + } +});