test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-29 18:48:45 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

chore: 开发环境切成 vite (#5677)

Browse Source 
* 尝试使用 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 <xujiahao01@baidu.com>

* 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: 吴多益 <wuduoyi@baidu.com>
Co-authored-by: RUNZE LU <36724300+lurunze1226@users.noreply.github.com>
Co-authored-by: 徐佳豪 <1440054388@qq.com>
Co-authored-by: xujiahao01 <xujiahao01@baidu.com>
Co-authored-by: 刘丹 <365533093@qq.com>
This commit is contained in:
liaoxuezhi 2022-11-02 22:45:12 +08:00 committed by GitHub
parent 3fc5c3de2a
commit c591ab4381
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
86 changed files with 7290 additions and 1343 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -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
```

280
examples/components/CssDocs.tsx
View File

@ -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
)
)
}
]

14
examples/components/EventAction/cmpt-event-action/FormEvent.jsx
View File

@ -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 {
}
}
]
},
}
}
}
]

0
examples/components/Form/Custom.jsx → examples/components/Form/Custom.tsx
View File

3
examples/components/Form/Static.jsx
View File

@ -117,8 +117,7 @@ export default {
imageCaption: 'jfe fjkda fejfkda fejk fdajf dajfe jfkda',
popOver: {
title: '查看大图',
body:
'<div class="w-xxl"><img class="w-full" src="${image}"/></div>'
body: '<div class="w-xxl"><img class="w-full" src="${image}"/></div>'
}
},

2254
examples/components/Form/SwitchDisplay.jsx
View File

File diff suppressed because it is too large Load Diff

1
examples/components/MdRenderer.jsx
View File

@ -157,6 +157,7 @@ class Preview extends React.Component {
}
export default function (doc) {
doc = doc.default || doc;
return class extends React.Component {
popoverDom = null;

1
examples/components/SchemaRender.jsx
View File

@ -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';

111
index.html Normal file
View File

@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>amis - 低代码前端框架</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link
type="image/x-icon"
rel="shortcut icon"
href="./examples/static/favicon.png"
/>
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<link rel="stylesheet" href="./examples/static/iconfont.css" />
<link
rel="stylesheet"
href="./node_modules/@fortawesome/fontawesome-free/css/all.css"
/>
<link
rel="stylesheet"
href="./node_modules/@fortawesome/fontawesome-free/css/v4-shims.css"
/>
<link rel="stylesheet" href="./node_modules/prismjs/themes/prism.css" />
<link rel="stylesheet" href="./examples/doc.css" />
<link rel="stylesheet" href="./examples/style.scss" />
<style>
.app-wrapper,
.schema-wrapper {
position: relative;
width: 100%;
height: 100%;
}
</style>
<script type="module">
let theme = localStorage.getItem('amis-theme') || 'cxd';
if (theme === 'default') {
theme = 'cxd';
}
['ang', 'cxd', 'dark', 'antd'].forEach(key => {
const link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('title', key);
if (theme !== key) {
link.setAttribute('disabled', 'disabled');
}
link.setAttribute(
'href',
new URL(`./packages/amis/lib/themes/${key}.css`, import.meta.url).href
);
document.head.appendChild(link);
});
</script>
<link rel="stylesheet" href="./packages/amis/lib/helper.css" />
</head>
<body>
<div id="root" class="app-wrapper"></div>
<script type="text/javascript">
if (location.hostname !== 'localhost') {
var _hmt = _hmt || [];
// 百度统计
(function () {
var hm = document.createElement('script');
hm.src =
'https://hm.baidu.com/hm.js?286766a21abb57abefedbd5257a26dc8';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(hm, s);
})();
}
</script>
<script type="module">
import {bootstrap} from './examples/index.jsx';
import * as monaco from 'monaco-editor';
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
self.MonacoEnvironment = {
getWorker(_, label) {
if (label === 'json') {
return new jsonWorker();
}
if (label === 'css' || label === 'scss' || label === 'less') {
return new cssWorker();
}
if (label === 'html' || label === 'handlebars' || label === 'razor') {
return new htmlWorker();
}
if (label === 'typescript' || label === 'javascript') {
return new tsWorker();
}
return new editorWorker();
}
};
window.enableAMISDebug = true;
const initialState = {};
bootstrap(document.getElementById('root'), initialState);
</script>
</body>
</html>

27
package.json
View File

@ -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": {

1
packages/amis-formula/.gitignore vendored
View File

@ -1,2 +1,3 @@
/coverage
/lib
/esm

16
packages/amis-formula/package.json
View File

@ -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",

110
packages/amis-formula/rollup.config.js
View File

@ -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}
`
})
]
};
];
}

38
packages/amis-formula/scripts/genDoc.ts
View File

@ -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<any>) {
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) => {

935
packages/amis-formula/src/doc.md Normal file
View File

@ -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<string>` 要处理的文本集合
返回：`Array<number>` 长度集合
计算文本集合中所有文本的长度
### 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("<star>&")`
返回 `&lt;start&gt;&amp;`
### 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<string>` 文本集
将文本根据指定片段分割成数组
示例：`SPLIT("a,b,c", ",")`
返回 `["a", "b", "c"]`
### TRIM
用法：`TRIM(text)`
* `text:string` 文本
返回：`string` 处理后的文本
将文本去除前后空格
### STRIPTAG
用法：`STRIPTAG(text)`
* `text:string` 文本
返回：`string` 处理后的文本
去除文本中的 HTML 标签
示例：`STRIPTAG("<b>amis</b>")`
返回：`amis`
### LINEBREAK
用法：`LINEBREAK(text)`
* `text:string` 文本
返回：`string` 处理后的文本
将字符串中的换行转成 HTML `<br>`，用于简单换行的场景
示例：`LINEBREAK("\n")`
返回：`<br/>`
### 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<any>` 数组
返回：`boolean` 结果
返回数组的长度
### ARRAYMAP
用法：`ARRAYMAP(arr, item => item)`
* `arr:Array<any>` 数组
* `iterator:Array<any>` 箭头函数
返回：`boolean` 结果
数组做数据转换，需要搭配箭头函数一起使用，注意箭头函数只支持单表达式用法。
### ARRAYFILTER
用法：`ARRAYFILTER(arr, item => item)`
* `arr:Array<any>` 数组
* `iterator:Array<any>` 箭头函数
返回：`boolean` 结果
数据做数据过滤，需要搭配箭头函数一起使用，注意箭头函数只支持单表达式用法。
将第二个箭头函数返回为 false 的成员过滤掉。
### COMPACT
用法：`COMPACT(arr)`
* `arr:Array<any>` 数组
返回：`Array<any>` 结果
数组过滤掉 false、null、0 和 ""
示例：
COMPACT([0, 1, false, 2, '', 3]) 得到 [1, 2, 3]
### JOIN
用法：`JOIN(arr, string)`
* `arr:Array<any>` 数组
* `separator:String` 分隔符
返回：`String` 结果
数组转成字符串
示例：
JOIN(['a', 'b', 'c'], '=') 得到 'a=b=c'
### CONCAT
用法：`CONCAT(['a', 'b', 'c'], ['1'], ['3'])`
* `arr:Array<any>` 数组
返回：`Array<any>` 结果
数组合并
示例：
CONCAT(['a', 'b', 'c'], ['1'], ['3']) 得到 ['a', 'b', 'c', '1', '3']
### UNIQ
用法：`UNIQ([{a: '1'}, {b: '2'}, {a: '1'}], 'x')`
* `arr:Array<any>` 数组
* `field:string` 字段
返回：`Array<any>` 结果
数组去重，第二个参数「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。

1601
packages/amis-formula/src/doc.ts Normal file
View File

File diff suppressed because it is too large Load Diff

4
packages/amis-formula/src/filter.ts
View File

@ -1,9 +1,7 @@
import {Evaluator} from './evalutor';
import {FilterMap} from './types';
const entityMap: {
[propName: string]: string;
} = {
const entityMap: any = {
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',

4
packages/amis-formula/tsconfig.json
View File

@ -3,12 +3,14 @@
"compilerOptions": {
"rootDir": "./",
"outDir": "./dist",
"baseUrl": "./",
"allowSyntheticDefaultImports": true,
"typeRoots": [
"../../types",
"./node_modules/@types",
"../../node_modules/@types"
]
],
"paths": {}
},
"include": ["src/**/*", "scripts/**/*"],
"references": []

4
packages/amis-ui/package.json
View File

@ -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": "*",

88
packages/amis-ui/scripts/GenDoc.ts Normal file
View File

@ -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<string> = [];
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<string> = []
) {
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<string> {
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<void> {
return new Promise<void>((resolve, reject) => {
fs.writeFile(
filename,
content,
{
encoding: 'utf8'
},
err => {
if (err) {
reject(err);
} else {
resolve();
}
}
);
});
}
main().catch(e => console.error(e));

131
packages/amis-ui/scss/helper/background/_background-color.md Normal file
View File

@ -0,0 +1,131 @@
---
title: 背景色
---
| Class | Properties | Demo |
| ----------- | ------------------------ | -------- |
| bg-none | background: none !important | <span style="background: none !important;" class="w-24 h-6"></div> |
| bg-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
| bg-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
| bg-black | background: #000 | <div style="background: #000;" class="w-24 h-6"></div> |
| bg-white | background: #fff | <div style="background: #fff;" class="w-24 h-6"></div> |
| bg-primary | background: #007bff | <div style="background: #007bff;" class="w-24 h-6"></div> |
| bg-secondary | background: #6c757d | <div style="background: #6c757d;" class="w-24 h-6"></div> |
| bg-success | background: #28a745 | <div style="background: #28a745;" class="w-24 h-6"></div> |
| bg-info | background: #007bff | <div style="background: #007bff" class="w-24 h-6"></div> |
| bg-warning | background: #28a745 | <div style="background: #28a745;" class="w-24 h-6"></div> |
| bg-danger | background: #dc3545 | <div style="background: #dc3545;" class="w-24 h-6"></div> |
| bg-light | background: #f8f9fa | <div style="background: #f8f9fa;" class="w-24 h-6"></div> |
| bg-dark | background: #343a40 | <div style="background: #343a40;" class="w-24 h-6"></div> |
| bg-gray-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
| bg-gray-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
| bg-gray-50 | background: #f9fafb | <div style="background: #f9fafb;" class="w-24 h-6"></div> |
| bg-gray-100 | background: #f3f4f6 | <div style="background: #f3f4f6;" class="w-24 h-6"></div> |
| bg-gray-200 | background: #e5e7eb | <div style="background: #e5e7eb;" class="w-24 h-6"></div> |
| bg-gray-300 | background: #d1d5db | <div style="background: #d1d5db;" class="w-24 h-6"></div> |
| bg-gray-400 | background: #9ca3af | <div style="background: #9ca3af;" class="w-24 h-6"></div> |
| bg-gray-500 | background: #6b7280 | <div style="background: #6b7280;" class="w-24 h-6"></div> |
| bg-gray-600 | background: #4b5563 | <div style="background: #4b5563;" class="w-24 h-6"></div> |
| bg-gray-700 | background: #374151 | <div style="background: #374151;" class="w-24 h-6"></div> |
| bg-gray-800 | background: #1f2937 | <div style="background: #1f2937;" class="w-24 h-6"></div> |
| bg-gray-900 | background: #111827 | <div style="background: #111827;" class="w-24 h-6"></div> |
| bg-red-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
| bg-red-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
| bg-red-50 | background: #fef2f2 | <div style="background: #fef2f2;" class="w-24 h-6"></div> |
| bg-red-100 | background: #fee2e2 | <div style="background: #fee2e2;" class="w-24 h-6"></div> |
| bg-red-200 | background: #fecaca | <div style="background: #fecaca;" class="w-24 h-6"></div> |
| bg-red-300 | background: #fca5a5 | <div style="background: #fca5a5;" class="w-24 h-6"></div> |
| bg-red-400 | background: #f87171 | <div style="background: #f87171;" class="w-24 h-6"></div> |
| bg-red-500 | background: #ef4444 | <div style="background: #ef4444;" class="w-24 h-6"></div> |
| bg-red-600 | background: #dc2626 | <div style="background: #dc2626;" class="w-24 h-6"></div> |
| bg-red-700 | background: #b91c1c | <div style="background: #b91c1c;" class="w-24 h-6"></div> |
| bg-red-800 | background: #991b1b | <div style="background: #991b1b;" class="w-24 h-6"></div> |
| bg-red-900 | background: #7f1d1d | <div style="background: #7f1d1d;" class="w-24 h-6"></div> |
| bg-yellow-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
| bg-yellow-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
| bg-yellow-50 | background: #fffbeb | <div style="background: #fffbeb;" class="w-24 h-6"></div> |
| bg-yellow-100 | background: #fef3c7 | <div style="background: #fef3c7;" class="w-24 h-6"></div> |
| bg-yellow-200 | background: #fde68a | <div style="background: #fde68a;" class="w-24 h-6"></div> |
| bg-yellow-300 | background: #fcd34d | <div style="background: #fcd34d;" class="w-24 h-6"></div> |
| bg-yellow-400 | background: #fbbf24 | <div style="background: #fbbf24;" class="w-24 h-6"></div> |
| bg-yellow-500 | background: #f59e0b | <div style="background: #f59e0b;" class="w-24 h-6"></div> |
| bg-yellow-600 | background: #d97706 | <div style="background: #d97706;" class="w-24 h-6"></div> |
| bg-yellow-700 | background: #b45309 | <div style="background: #b45309;" class="w-24 h-6"></div> |
| bg-yellow-800 | background: #92400e | <div style="background: #92400e;" class="w-24 h-6"></div> |
| bg-yellow-900 | background: #78350f | <div style="background: #78350f;" class="w-24 h-6"></div> |
| bg-green-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
| bg-green-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
| bg-green-50 | background: #ecfdf5 | <div style="background: #ecfdf5;" class="w-24 h-6"></div> |
| bg-green-100 | background: #d1fae5 | <div style="background: #d1fae5;" class="w-24 h-6"></div> |
| bg-green-200 | background: #a7f3d0 | <div style="background: #a7f3d0;" class="w-24 h-6"></div> |
| bg-green-300 | background: #6ee7b7 | <div style="background: #6ee7b7;" class="w-24 h-6"></div> |
| bg-green-400 | background: #34d399 | <div style="background: #34d399;" class="w-24 h-6"></div> |
| bg-green-500 | background: #10b981 | <div style="background: #10b981;" class="w-24 h-6"></div> |
| bg-green-600 | background: #059669 | <div style="background: #059669;" class="w-24 h-6"></div> |
| bg-green-700 | background: #047857 | <div style="background: #047857;" class="w-24 h-6"></div> |
| bg-green-800 | background: #065f46 | <div style="background: #065f46;" class="w-24 h-6"></div> |
| bg-green-900 | background: #064e3b | <div style="background: #064e3b;" class="w-24 h-6"></div> |
| bg-blue-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
| bg-blue-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
| bg-blue-50 | background: #eff6ff | <div style="background: #eff6ff;" class="w-24 h-6"></div> |
| bg-blue-100 | background: #dbeafe | <div style="background: #dbeafe;" class="w-24 h-6"></div> |
| bg-blue-200 | background: #bfdbfe | <div style="background: #bfdbfe;" class="w-24 h-6"></div> |
| bg-blue-300 | background: #93c5fd | <div style="background: #93c5fd;" class="w-24 h-6"></div> |
| bg-blue-400 | background: #60a5fa | <div style="background: #60a5fa;" class="w-24 h-6"></div> |
| bg-blue-500 | background: #3b82f6 | <div style="background: #3b82f6;" class="w-24 h-6"></div> |
| bg-blue-600 | background: #2563eb | <div style="background: #2563eb;" class="w-24 h-6"></div> |
| bg-blue-700 | background: #1d4ed8 | <div style="background: #1d4ed8;" class="w-24 h-6"></div> |
| bg-blue-800 | background: #1e40af | <div style="background: #1e40af;" class="w-24 h-6"></div> |
| bg-blue-900 | background: #1e3a8a | <div style="background: #1e3a8a;" class="w-24 h-6"></div> |
| bg-cyan-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
| bg-cyan-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
| bg-cyan-50 | background: #ecfeff | <div style="background: #ecfeff;" class="w-24 h-6"></div> |
| bg-cyan-100 | background: #cffafe | <div style="background: #cffafe;" class="w-24 h-6"></div> |
| bg-cyan-200 | background: #a5f3fc | <div style="background: #a5f3fc;" class="w-24 h-6"></div> |
| bg-cyan-300 | background: #67e8f9 | <div style="background: #67e8f9;" class="w-24 h-6"></div> |
| bg-cyan-400 | background: #22d3ee | <div style="background: #22d3ee;" class="w-24 h-6"></div> |
| bg-cyan-500 | background: #06b6d4 | <div style="background: #06b6d4;" class="w-24 h-6"></div> |
| bg-cyan-600 | background: #0891b2 | <div style="background: #0891b2;" class="w-24 h-6"></div> |
| bg-cyan-700 | background: #0e7490 | <div style="background: #0e7490;" class="w-24 h-6"></div> |
| bg-cyan-800 | background: #155e75 | <div style="background: #155e75;" class="w-24 h-6"></div> |
| bg-cyan-900 | background: #164e63 | <div style="background: #164e63;" class="w-24 h-6"></div> |
| bg-indigo-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
| bg-indigo-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
| bg-indigo-50 | background: #eef2ff | <div style="background: #eef2ff;" class="w-24 h-6"></div> |
| bg-indigo-100 | background: #e0e7ff | <div style="background: #e0e7ff;" class="w-24 h-6"></div> |
| bg-indigo-200 | background: #c7d2fe | <div style="background: #c7d2fe;" class="w-24 h-6"></div> |
| bg-indigo-300 | background: #a5b4fc | <div style="background: #a5b4fc;" class="w-24 h-6"></div> |
| bg-indigo-400 | background: #818cf8 | <div style="background: #818cf8;" class="w-24 h-6"></div> |
| bg-indigo-500 | background: #6366f1 | <div style="background: #6366f1;" class="w-24 h-6"></div> |
| bg-indigo-600 | background: #4f46e5 | <div style="background: #4f46e5;" class="w-24 h-6"></div> |
| bg-indigo-700 | background: #4338ca | <div style="background: #4338ca;" class="w-24 h-6"></div> |
| bg-indigo-800 | background: #3730a3 | <div style="background: #3730a3;" class="w-24 h-6"></div> |
| bg-indigo-900 | background: #312e81 | <div style="background: #312e81;" class="w-24 h-6"></div> |
| bg-purple-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
| bg-purple-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
| bg-purple-50 | background: #f5f3ff | <div style="background: #f5f3ff;" class="w-24 h-6"></div> |
| bg-purple-100 | background: #ede9fe | <div style="background: #ede9fe;" class="w-24 h-6"></div> |
| bg-purple-200 | background: #ddd6fe | <div style="background: #ddd6fe;" class="w-24 h-6"></div> |
| bg-purple-300 | background: #c4b5fd | <div style="background: #c4b5fd;" class="w-24 h-6"></div> |
| bg-purple-400 | background: #a78bfa | <div style="background: #a78bfa;" class="w-24 h-6"></div> |
| bg-purple-500 | background: #8b5cf6 | <div style="background: #8b5cf6;" class="w-24 h-6"></div> |
| bg-purple-600 | background: #7c3aed | <div style="background: #7c3aed;" class="w-24 h-6"></div> |
| bg-purple-700 | background: #6d28d9 | <div style="background: #6d28d9;" class="w-24 h-6"></div> |
| bg-purple-800 | background: #5b21b6 | <div style="background: #5b21b6;" class="w-24 h-6"></div> |
| bg-purple-900 | background: #4c1d95 | <div style="background: #4c1d95;" class="w-24 h-6"></div> |
| bg-pink-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
| bg-pink-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
| bg-pink-50 | background: #fdf2f8 | <div style="background: #fdf2f8;" class="w-24 h-6"></div> |
| bg-pink-100 | background: #fce7f3 | <div style="background: #fce7f3;" class="w-24 h-6"></div> |
| bg-pink-200 | background: #fbcfe8 | <div style="background: #fbcfe8;" class="w-24 h-6"></div> |
| bg-pink-300 | background: #f9a8d4 | <div style="background: #f9a8d4;" class="w-24 h-6"></div> |
| bg-pink-400 | background: #f472b6 | <div style="background: #f472b6;" class="w-24 h-6"></div> |
| bg-pink-500 | background: #ec4899 | <div style="background: #ec4899;" class="w-24 h-6"></div> |
| bg-pink-600 | background: #db2777 | <div style="background: #db2777;" class="w-24 h-6"></div> |
| bg-pink-700 | background: #be185d | <div style="background: #be185d;" class="w-24 h-6"></div> |
| bg-pink-800 | background: #9d174d | <div style="background: #9d174d;" class="w-24 h-6"></div> |
| bg-pink-900 | background: #831843 | <div style="background: #831843;" class="w-24 h-6"></div> |
还有 hover、active、focus、disabled 扩展，比如 `hover:bg-black`
参考: [tailwindcss](https://tailwindcss.com/docs/background-color)

109
packages/amis-ui/scss/helper/border/_border-color.md Normal file
View File

@ -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`

86
packages/amis-ui/scss/helper/border/_border-radius.md Normal file
View File

@ -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 |

11
packages/amis-ui/scss/helper/border/_border-style.md Normal file
View File

@ -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 |

31
packages/amis-ui/scss/helper/border/_border-width.md Normal file
View File

@ -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 |

12
packages/amis-ui/scss/helper/box-alignment/_align-content.md Normal file
View File

@ -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 |

11
packages/amis-ui/scss/helper/box-alignment/_align-items.md Normal file
View File

@ -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 |

11
packages/amis-ui/scss/helper/box-alignment/_align-self.md Normal file
View File

@ -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 |

12
packages/amis-ui/scss/helper/box-alignment/_justify-content.md Normal file
View File

@ -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 |

11
packages/amis-ui/scss/helper/box-alignment/_justify-items.md Normal file
View File

@ -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 |

11
packages/amis-ui/scss/helper/box-alignment/_justify-self.md Normal file
View File

@ -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 |

13
packages/amis-ui/scss/helper/box-alignment/_place-content.md Normal file
View File

@ -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 |

11
packages/amis-ui/scss/helper/box-alignment/_place-items.md Normal file
View File

@ -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 |

11
packages/amis-ui/scss/helper/box-alignment/_place-self.md Normal file
View File

@ -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 |

16
packages/amis-ui/scss/helper/effect/_box-shadow.md Normal file
View File

@ -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`

21
packages/amis-ui/scss/helper/effect/_opacity.md Normal file
View File

@ -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 |

10
packages/amis-ui/scss/helper/flex/_direction.md Normal file
View File

@ -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 |

10
packages/amis-ui/scss/helper/flex/_flex.md Normal file
View File

@ -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 |

8
packages/amis-ui/scss/helper/flex/_grow.md Normal file
View File

@ -0,0 +1,8 @@
---
title: Flex Grow
---
| Class | Properties |
| ----------- | ------------------------ |
| flex-grow-0 | flex-grow: 0 |
| flex-grow | flex-grow: 1 |

20
packages/amis-ui/scss/helper/flex/_order.md Normal file
View File

@ -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 |

8
packages/amis-ui/scss/helper/flex/_shrink.md Normal file
View File

@ -0,0 +1,8 @@
---
title: Flex Shrink
---
| Class | Properties |
| ----------- | ------------------------ |
| flex-shrink-0 | flex-shrink: 0 |
| flex-shrink | flex-shrink: 1 |

9
packages/amis-ui/scss/helper/flex/_wrap.md Normal file
View File

@ -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 |

10
packages/amis-ui/scss/helper/grid/_auto-columns.md Normal file
View File

@ -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) |

10
packages/amis-ui/scss/helper/grid/_auto-flow.md Normal file
View File

@ -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 |

10
packages/amis-ui/scss/helper/grid/_auto-rows.md Normal file
View File

@ -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) |

48
packages/amis-ui/scss/helper/grid/_column-start-end.md Normal file
View File

@ -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 |

19
packages/amis-ui/scss/helper/grid/_columns.md Normal file
View File

@ -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 |

117
packages/amis-ui/scss/helper/grid/_gap.md Normal file
View File

@ -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 |

48
packages/amis-ui/scss/helper/grid/_row-start-end.md Normal file
View File

@ -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 |

13
packages/amis-ui/scss/helper/grid/_rows.md Normal file
View File

@ -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 |

35
packages/amis-ui/scss/helper/layout/_box-sizing.md Normal file
View File

@ -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
<div class="flex space-x-6">
<div class="box-border h-32 w-32 p-4 border-4 border-blue-400 bg-blue-200 rounded-md">
<div class="h-full w-full bg-red-400"></div>
</div>
<div class="box-content h-32 w-32 p-4 border-4 border-blue-400 bg-blue-200 rounded-md">
<div class="h-full w-full bg-red-400"></div>
</div>
</div>
```
## 响应式设计
不支持 [「响应式设计前缀」](../../../docs/style/responsive-design.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
## 状态前缀
不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。

27
packages/amis-ui/scss/helper/layout/_clear.md Normal file
View File

@ -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)。

41
packages/amis-ui/scss/helper/layout/_display.md Normal file
View File

@ -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)。

47
packages/amis-ui/scss/helper/layout/_float.md Normal file
View File

@ -0,0 +1,47 @@
---
title: Floats
---
浮动相关样式。
| Class | Properties |
| ----------- | ------------- |
| float-right | float: right; |
| float-left | float: left; |
| float-none | float: none; |
## 左浮
```html
<img class="w-32 m-4 pc:float-left ..." src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAMAAAAKE/YAAAAAP1BMVEXp7vG6vsHo7fC3ur7s8fXr8PO1uLy8wMO5vcDL0NLN0dXl6u3T19vHy86+wsXO0tbQ1djc4eTh5ejBxcjZ3eD/ULOKAAACiklEQVR42u3a2YrjMBCF4arSVrYTL3Le/1lHXqbdPTZDWheRDOcLAZGrnyLgRSIAAAAAAAAAAAAAAAAAAAAAAAAAAAD4IrmoGBHKVSxbyFEm56hMtRBN7TNPO1GRaiFpvDd5vG+lQLUQNT6EwDlCYD+4AtF2Ug4mkzKb+PFqITf6oP3wyDEEZTPaz0dT63s/2DxPw6YtFT2S7Lr0eZtrSkYP64pShrXWyZsVhaNHt6xScjdNUSy9lyG2fLTYbpyZw/NFJDeJFhdnb4wab1ohuUc0dbPnwMxB/WhFbhFtR8+boBwvSkSktmiS2fDu8oohzoqQ1BQtLgY9oht3HutrXKvrjX4SyekexTys1DVp6vojeimRf5t1ra5p0lvBTvVlz83MW3VV0TF1bfwsJOfmv9UVRYt9eN2a++gumo/qeqJJ3Ks3i+dl81FNUk90ipDX0I4TfW+WvflndT3R6WsTJ/9r3qvriSb569x8VPNaXU/0149y0XxU+4cjqSpaZK8+mq+rK4pOofE5WZFT86m6omjbzT4s1UfzZXVFf4+1uTc82aWZTeArGkzoXC3R25w1LNX2lZqVr2lfPnpZHc3MqTpOejSfmAqiHcn35kRDCk8qnnSKPpo3qqx1R6fV3swHrX/SazP/UHl0Wrml+VbRTmhpvlu0i6o3jA6IPlQTHWqJZqNv4ypumFJ0z+FtPc8VRJNI9zvln1wytrhrenLZ3GGjqHWW3O/tm5+Ftpm5Gdrht9qh2V6CCH2Y2KgmsM9imFWj+3w00eiVQx5eN8Lo44RkVJOLR5IyR2tcHJs8Y7SlDjGJtS6PteWOi53d4WQe3a8YAAAAAAAAAAAAAAAAAAAAAAAAAACgNn8AGA09DkR51CoAAAAASUVORK5CYII=">
<p>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.</p>
```
## 右浮
```html
<img class="w-32 m-4 pc:float-right ..." src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAMAAAAKE/YAAAAAP1BMVEXp7vG6vsHo7fC3ur7s8fXr8PO1uLy8wMO5vcDL0NLN0dXl6u3T19vHy86+wsXO0tbQ1djc4eTh5ejBxcjZ3eD/ULOKAAACiklEQVR42u3a2YrjMBCF4arSVrYTL3Le/1lHXqbdPTZDWheRDOcLAZGrnyLgRSIAAAAAAAAAAAAAAAAAAAAAAAAAAAD4IrmoGBHKVSxbyFEm56hMtRBN7TNPO1GRaiFpvDd5vG+lQLUQNT6EwDlCYD+4AtF2Ug4mkzKb+PFqITf6oP3wyDEEZTPaz0dT63s/2DxPw6YtFT2S7Lr0eZtrSkYP64pShrXWyZsVhaNHt6xScjdNUSy9lyG2fLTYbpyZw/NFJDeJFhdnb4wab1ohuUc0dbPnwMxB/WhFbhFtR8+boBwvSkSktmiS2fDu8oohzoqQ1BQtLgY9oht3HutrXKvrjX4SyekexTys1DVp6vojeimRf5t1ra5p0lvBTvVlz83MW3VV0TF1bfwsJOfmv9UVRYt9eN2a++gumo/qeqJJ3Ks3i+dl81FNUk90ipDX0I4TfW+WvflndT3R6WsTJ/9r3qvriSb569x8VPNaXU/0149y0XxU+4cjqSpaZK8+mq+rK4pOofE5WZFT86m6omjbzT4s1UfzZXVFf4+1uTc82aWZTeArGkzoXC3R25w1LNX2lZqVr2lfPnpZHc3MqTpOejSfmAqiHcn35kRDCk8qnnSKPpo3qqx1R6fV3swHrX/SazP/UHl0Wrml+VbRTmhpvlu0i6o3jA6IPlQTHWqJZqNv4ypumFJ0z+FtPc8VRJNI9zvln1wytrhrenLZ3GGjqHWW3O/tm5+Ftpm5Gdrht9qh2V6CCH2Y2KgmsM9imFWj+3w00eiVQx5eN8Lo44RkVJOLR5IyR2tcHJs8Y7SlDjGJtS6PteWOi53d4WQe3a8YAAAAAAAAAAAAAAAAAAAAAAAAAACgNn8AGA09DkR51CoAAAAASUVORK5CYII=">
<p>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.</p>
```
## 不浮动
```html
<img class="w-32 m-4 pc:float-none ..." src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAMAAAAKE/YAAAAAP1BMVEXp7vG6vsHo7fC3ur7s8fXr8PO1uLy8wMO5vcDL0NLN0dXl6u3T19vHy86+wsXO0tbQ1djc4eTh5ejBxcjZ3eD/ULOKAAACiklEQVR42u3a2YrjMBCF4arSVrYTL3Le/1lHXqbdPTZDWheRDOcLAZGrnyLgRSIAAAAAAAAAAAAAAAAAAAAAAAAAAAD4IrmoGBHKVSxbyFEm56hMtRBN7TNPO1GRaiFpvDd5vG+lQLUQNT6EwDlCYD+4AtF2Ug4mkzKb+PFqITf6oP3wyDEEZTPaz0dT63s/2DxPw6YtFT2S7Lr0eZtrSkYP64pShrXWyZsVhaNHt6xScjdNUSy9lyG2fLTYbpyZw/NFJDeJFhdnb4wab1ohuUc0dbPnwMxB/WhFbhFtR8+boBwvSkSktmiS2fDu8oohzoqQ1BQtLgY9oht3HutrXKvrjX4SyekexTys1DVp6vojeimRf5t1ra5p0lvBTvVlz83MW3VV0TF1bfwsJOfmv9UVRYt9eN2a++gumo/qeqJJ3Ks3i+dl81FNUk90ipDX0I4TfW+WvflndT3R6WsTJ/9r3qvriSb569x8VPNaXU/0149y0XxU+4cjqSpaZK8+mq+rK4pOofE5WZFT86m6omjbzT4s1UfzZXVFf4+1uTc82aWZTeArGkzoXC3R25w1LNX2lZqVr2lfPnpZHc3MqTpOejSfmAqiHcn35kRDCk8qnnSKPpo3qqx1R6fV3swHrX/SazP/UHl0Wrml+VbRTmhpvlu0i6o3jA6IPlQTHWqJZqNv4ypumFJ0z+FtPc8VRJNI9zvln1wytrhrenLZ3GGjqHWW3O/tm5+Ftpm5Gdrht9qh2V6CCH2Y2KgmsM9imFWj+3w00eiVQx5eN8Lo44RkVJOLR5IyR2tcHJs8Y7SlDjGJtS6PteWOi53d4WQe3a8YAAAAAAAAAAAAAAAAAAAAAAAAAACgNn8AGA09DkR51CoAAAAASUVORK5CYII=">
<p>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.</p>
```
## 响应式设计
支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。
```html
<img class="w-32 m-4 pc:float-right ..." src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAMAAAAKE/YAAAAAP1BMVEXp7vG6vsHo7fC3ur7s8fXr8PO1uLy8wMO5vcDL0NLN0dXl6u3T19vHy86+wsXO0tbQ1djc4eTh5ejBxcjZ3eD/ULOKAAACiklEQVR42u3a2YrjMBCF4arSVrYTL3Le/1lHXqbdPTZDWheRDOcLAZGrnyLgRSIAAAAAAAAAAAAAAAAAAAAAAAAAAAD4IrmoGBHKVSxbyFEm56hMtRBN7TNPO1GRaiFpvDd5vG+lQLUQNT6EwDlCYD+4AtF2Ug4mkzKb+PFqITf6oP3wyDEEZTPaz0dT63s/2DxPw6YtFT2S7Lr0eZtrSkYP64pShrXWyZsVhaNHt6xScjdNUSy9lyG2fLTYbpyZw/NFJDeJFhdnb4wab1ohuUc0dbPnwMxB/WhFbhFtR8+boBwvSkSktmiS2fDu8oohzoqQ1BQtLgY9oht3HutrXKvrjX4SyekexTys1DVp6vojeimRf5t1ra5p0lvBTvVlz83MW3VV0TF1bfwsJOfmv9UVRYt9eN2a++gumo/qeqJJ3Ks3i+dl81FNUk90ipDX0I4TfW+WvflndT3R6WsTJ/9r3qvriSb569x8VPNaXU/0149y0XxU+4cjqSpaZK8+mq+rK4pOofE5WZFT86m6omjbzT4s1UfzZXVFf4+1uTc82aWZTeArGkzoXC3R25w1LNX2lZqVr2lfPnpZHc3MqTpOejSfmAqiHcn35kRDCk8qnnSKPpo3qqx1R6fV3swHrX/SazP/UHl0Wrml+VbRTmhpvlu0i6o3jA6IPlQTHWqJZqNv4ypumFJ0z+FtPc8VRJNI9zvln1wytrhrenLZ3GGjqHWW3O/tm5+Ftpm5Gdrht9qh2V6CCH2Y2KgmsM9imFWj+3w00eiVQx5eN8Lo44RkVJOLR5IyR2tcHJs8Y7SlDjGJtS6PteWOi53d4WQe3a8YAAAAAAAAAAAAAAAAAAAAAAAAAACgNn8AGA09DkR51CoAAAAASUVORK5CYII=">
<p>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.</p>
```
## 状态前缀
不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。

34
packages/amis-ui/scss/helper/layout/_overflow.md Normal file
View File

@ -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)。

27
packages/amis-ui/scss/helper/layout/_position.md Normal file
View File

@ -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)。

150
packages/amis-ui/scss/helper/layout/_top-right-bottom-left.md Normal file
View File

@ -0,0 +1,150 @@
---
title: Top / Right / Bottom / Left
---
用来控制位置的样式集。
| Class | Properties |
| ------------ | --------------------------------------------------------------------------------- |
| inset-0 | top: 0px;<br/>right: 0px;<br/>bottom: 0px;<br/>left: 0px; |
| -inset-0 | top: 0px;<br/>right: 0px;<br/>bottom: 0px;<br/>left: 0px; |
| inset-y-0 | top: 0px;<br/>bottom: 0px; |
| inset-x-0 | right: 0px;<br/>left: 0px; |
| -inset-y-0 | top: 0px;<br/>bottom: 0px; |
| -inset-x-0 | right: 0px;<br/>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;<br/>right: 0.125rem;<br/>bottom: 0.125rem;<br/>left: 0.125rem; |
| -inset-0.5 | top: -0.125rem;<br/>right: -0.125rem;<br/>bottom: -0.125rem;<br/>left: -0.125rem; |
| inset-y-0.5 | top: 0.125rem;<br/>bottom: 0.125rem; |
| inset-x-0.5 | right: 0.125rem;<br/>left: 0.125rem; |
| -inset-y-0.5 | top: -0.125rem;<br/>bottom: -0.125rem; |
| -inset-x-0.5 | right: -0.125rem;<br/>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
<div class="grid grid-cols-4 m:grid-cols-2 gap-4">
<!-- Span top edge -->
<div class="relative h-32 w-32 ... bg-blue-500">
<div class="absolute inset-x-0 top-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">1</div>
</div>
<!-- Span right edge -->
<div class="relative h-32 w-32 ... bg-blue-500">
<div class="absolute inset-y-0 right-0 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">2</div>
</div>
<!-- Span bottom edge -->
<div class="relative h-32 w-32 ... bg-blue-500">
<div class="absolute inset-x-0 bottom-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">3</div>
</div>
<!-- Span left edge -->
<div class="relative h-32 w-32 ... bg-blue-500">
<div class="absolute inset-y-0 left-0 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">4</div>
</div>
<!-- Fill entire parent -->
<div class="relative h-32 w-32 ... bg-blue-500">
<div class="absolute inset-0 bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">5</div>
</div>
<!-- Pin to top left corner -->
<div class="relative h-32 w-32 ... bg-blue-500">
<div class="absolute left-0 top-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">6</div>
</div>
<!-- Pin to top right corner -->
<div class="relative h-32 w-32 ... bg-blue-500">
<div class="absolute top-0 right-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">7</div>
</div>
<!-- Pin to bottom right corner -->
<div class="relative h-32 w-32 ... bg-blue-500">
<div class="absolute bottom-0 right-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">8</div>
</div>
<!-- Pin to bottom left corner -->
<div class="relative h-32 w-32 ... bg-blue-500">
<div class="absolute bottom-0 left-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">9</div>
</div>
</div>
```
## 响应式设计
支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。
## 状态前缀
不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。

21
packages/amis-ui/scss/helper/layout/_visibility.md Normal file
View File

@ -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)。

37
packages/amis-ui/scss/helper/layout/_z-index.md Normal file
View File

@ -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
<div class="flex ... justify-center relative h-28 text-center transform translate-x-12">
<div class="z-40 ... relative w-20 h-20 bg-purple-500 border-r border-opacity-50 border-purple-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">5</div>
<div class="z-30 ... relative w-20 h-20 -left-6 top-2 bg-purple-500 border-r border-opacity-50 border-purple-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">4</div>
<div class="z-20 ... relative w-20 h-20 -left-12 top-4 bg-purple-500 border-r border-opacity-50 border-purple-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">3</div>
<div class="z-10 ... relative w-20 h-20 -left-18 top-6 bg-purple-500 border-r border-opacity-50 border-purple-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">2</div>
<div class="z-0 ... relative w-20 h-20 -left-24 top-8 bg-purple-500 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">1</div>
</div>
```
# 响应式设计
支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。
## 状态前缀
不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。

103
packages/amis-ui/scss/helper/sizing/_height.md Normal file
View File

@ -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 |

98
packages/amis-ui/scss/helper/sizing/_width.md Normal file
View File

@ -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 |

527
packages/amis-ui/scss/helper/spacing/_margin.md Normal file
View File

@ -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 |

265
packages/amis-ui/scss/helper/spacing/_padding.md Normal file
View File

@ -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 |

155
packages/amis-ui/scss/helper/spacing/_space-between.md Normal file
View File

@ -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 |

9
packages/amis-ui/scss/helper/typography/_font-family.md Normal file
View File

@ -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 |

19
packages/amis-ui/scss/helper/typography/_font-size.md Normal file
View File

@ -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 |

8
packages/amis-ui/scss/helper/typography/_font-style.md Normal file
View File

@ -0,0 +1,8 @@
---
title: Font Style
---
| Class | Properties |
| ----------- | ------------------------ |
| italic | font-style: italic |
| not-italic | font-style: normal |

15
packages/amis-ui/scss/helper/typography/_font-weight.md Normal file
View File

@ -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 |

12
packages/amis-ui/scss/helper/typography/_letter-spacing.md Normal file
View File

@ -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 |

20
packages/amis-ui/scss/helper/typography/_line-height.md Normal file
View File

@ -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 |

11
packages/amis-ui/scss/helper/typography/_list-style-type.md Normal file
View File

@ -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 |

10
packages/amis-ui/scss/helper/typography/_text-align.md Normal file
View File

@ -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 |

110
packages/amis-ui/scss/helper/typography/_text-color.md Normal file
View File

@ -0,0 +1,110 @@
---
title: Text Color
---
| Class | Properties | 示例效果 |
| ----------- | ------------------------ | ------------------------ |
| text-transparent | color: transparent | <span style="color: #transparent">AaBbCcDd</span>|
| text-current | color: currentColor | <span style="color: #currentColor">AaBbCcDd</span>|
| text-black | color: #000 | <span style="color: #000">AaBbCcDd</span>|
| text-white | color: #fff | <span style="color: #fff">AaBbCcDd</span>|
| text-primary | color: #007bff | <span style="color: #007bff">AaBbCcDd</span>|
| text-secondary | color: #6c757d | <span style="color: #6c757d">AaBbCcDd</span>|
| text-success | color: #28a745 | <span style="color: #28a745">AaBbCcDd</span>|
| text-info | color: #007bff | <span style="color: #007bff">AaBbCcDd</span>|
| text-warning | color: #fad733 | <span style="color: #fad733">AaBbCcDd</span>|
| text-danger | color: #dc3545 | <span style="color: #dc3545">AaBbCcDd</span>|
| text-light | color: #f8f9fa | <span style="color: #f8f9fa">AaBbCcDd</span>|
| text-dark | color: #343a40 | <span style="color: #343a40">AaBbCcDd</span>|
| text-gray-50 | color: #f9fafb | <span style="color: #f9fafb">AaBbCcDd</span>|
| text-gray-100 | color: #f3f4f6 | <span style="color: #f3f4f6">AaBbCcDd</span>|
| text-gray-200 | color: #e5e7eb | <span style="color: #e5e7eb">AaBbCcDd</span>|
| text-gray-300 | color: #d1d5db | <span style="color: #d1d5db">AaBbCcDd</span>|
| text-gray-400 | color: #9ca3af | <span style="color: #9ca3af">AaBbCcDd</span>|
| text-gray-500 | color: #6b7280 | <span style="color: #6b7280">AaBbCcDd</span>|
| text-gray-600 | color: #4b5563 | <span style="color: #4b5563">AaBbCcDd</span>|
| text-gray-700 | color: #374151 | <span style="color: #374151">AaBbCcDd</span>|
| text-gray-800 | color: #1f2937 | <span style="color: #1f2937">AaBbCcDd</span>|
| text-gray-900 | color: #111827 | <span style="color: #111827">AaBbCcDd</span>|
| text-red-50 | color: #fef2f2 | <span style="color: #fef2f2">AaBbCcDd</span>|
| text-red-100 | color: #fee2e2 | <span style="color: #fee2e2">AaBbCcDd</span>|
| text-red-200 | color: #fecaca | <span style="color: #fecaca">AaBbCcDd</span>|
| text-red-300 | color: #fca5a5 | <span style="color: #fca5a5">AaBbCcDd</span>|
| text-red-400 | color: #f87171 | <span style="color: #f87171">AaBbCcDd</span>|
| text-red-500 | color: #ef4444 | <span style="color: #ef4444">AaBbCcDd</span>|
| text-red-600 | color: #dc2626 | <span style="color: #dc2626">AaBbCcDd</span>|
| text-red-700 | color: #b91c1c | <span style="color: #b91c1c">AaBbCcDd</span>|
| text-red-800 | color: #991b1b | <span style="color: #991b1b">AaBbCcDd</span>|
| text-red-900 | color: #7f1d1d | <span style="color: #7f1d1d">AaBbCcDd</span>|
| text-yellow-50 | color: #fffbeb | <span style="color: #fffbeb">AaBbCcDd</span>|
| text-yellow-100 | color: #fef3c7 | <span style="color: #fef3c7">AaBbCcDd</span>|
| text-yellow-200 | color: #fde68a | <span style="color: #fde68a">AaBbCcDd</span>|
| text-yellow-300 | color: #fcd34d | <span style="color: #fcd34d">AaBbCcDd</span>|
| text-yellow-400 | color: #fbbf24 | <span style="color: #fbbf24">AaBbCcDd</span>|
| text-yellow-500 | color: #f59e0b | <span style="color: #f59e0b">AaBbCcDd</span>|
| text-yellow-600 | color: #d97706 | <span style="color: #d97706">AaBbCcDd</span>|
| text-yellow-700 | color: #b45309 | <span style="color: #b45309">AaBbCcDd</span>|
| text-yellow-800 | color: #92400e | <span style="color: #92400e">AaBbCcDd</span>|
| text-yellow-900 | color: #78350f | <span style="color: #78350f">AaBbCcDd</span>|
| text-green-50 | color: #ecfdf5 | <span style="color: #ecfdf5">AaBbCcDd</span>|
| text-green-100 | color: #d1fae5 | <span style="color: #d1fae5">AaBbCcDd</span>|
| text-green-200 | color: #a7f3d0 | <span style="color: #a7f3d0">AaBbCcDd</span>|
| text-green-300 | color: #6ee7b7 | <span style="color: #6ee7b7">AaBbCcDd</span>|
| text-green-400 | color: #34d399 | <span style="color: #34d399">AaBbCcDd</span>|
| text-green-500 | color: #10b981 | <span style="color: #10b981">AaBbCcDd</span>|
| text-green-600 | color: #059669 | <span style="color: #059669">AaBbCcDd</span>|
| text-green-700 | color: #047857 | <span style="color: #047857">AaBbCcDd</span>|
| text-green-800 | color: #065f46 | <span style="color: #065f46">AaBbCcDd</span>|
| text-green-900 | color: #064e3b | <span style="color: #064e3b">AaBbCcDd</span>|
| text-blue-50 | color: #eff6ff | <span style="color: #eff6ff">AaBbCcDd</span>|
| text-blue-100 | color: #dbeafe | <span style="color: #dbeafe">AaBbCcDd</span>|
| text-blue-200 | color: #bfdbfe | <span style="color: #bfdbfe">AaBbCcDd</span>|
| text-blue-300 | color: #93c5fd | <span style="color: #93c5fd">AaBbCcDd</span>|
| text-blue-400 | color: #60a5fa | <span style="color: #60a5fa">AaBbCcDd</span>|
| text-blue-500 | color: #3b82f6 | <span style="color: #3b82f6">AaBbCcDd</span>|
| text-blue-600 | color: #2563eb | <span style="color: #2563eb">AaBbCcDd</span>|
| text-blue-700 | color: #1d4ed8 | <span style="color: #1d4ed8">AaBbCcDd</span>|
| text-blue-800 | color: #1e40af | <span style="color: #1e40af">AaBbCcDd</span>|
| text-blue-900 | color: #1e3a8a | <span style="color: #1e3a8a">AaBbCcDd</span>|
| text-cyan-50 | color: #ecfeff | <span style="color: #ecfeff">AaBbCcDd</span>|
| text-cyan-100 | color: #cffafe | <span style="color: #cffafe">AaBbCcDd</span>|
| text-cyan-200 | color: #a5f3fc | <span style="color: #a5f3fc">AaBbCcDd</span>|
| text-cyan-300 | color: #67e8f9 | <span style="color: #67e8f9">AaBbCcDd</span>|
| text-cyan-400 | color: #22d3ee | <span style="color: #22d3ee">AaBbCcDd</span>|
| text-cyan-500 | color: #06b6d4 | <span style="color: #06b6d4">AaBbCcDd</span>|
| text-cyan-600 | color: #0891b2 | <span style="color: #0891b2">AaBbCcDd</span>|
| text-cyan-700 | color: #0e7490 | <span style="color: #0e7490">AaBbCcDd</span>|
| text-cyan-800 | color: #155e75 | <span style="color: #155e75">AaBbCcDd</span>|
| text-cyan-900 | color: #164e63 | <span style="color: #164e63">AaBbCcDd</span>|
| text-indigo-50 | color: #eef2ff | <span style="color: #eef2ff">AaBbCcDd</span>|
| text-indigo-100 | color: #e0e7ff | <span style="color: #e0e7ff">AaBbCcDd</span>|
| text-indigo-200 | color: #c7d2fe | <span style="color: #c7d2fe">AaBbCcDd</span>|
| text-indigo-300 | color: #a5b4fc | <span style="color: #a5b4fc">AaBbCcDd</span>|
| text-indigo-400 | color: #818cf8 | <span style="color: #818cf8">AaBbCcDd</span>|
| text-indigo-500 | color: #6366f1 | <span style="color: #6366f1">AaBbCcDd</span>|
| text-indigo-600 | color: #4f46e5 | <span style="color: #4f46e5">AaBbCcDd</span>|
| text-indigo-700 | color: #4338ca | <span style="color: #4338ca">AaBbCcDd</span>|
| text-indigo-800 | color: #3730a3 | <span style="color: #3730a3">AaBbCcDd</span>|
| text-indigo-900 | color: #312e81 | <span style="color: #312e81">AaBbCcDd</span>|
| text-purple-50 | color: #f5f3ff | <span style="color: #f5f3ff">AaBbCcDd</span>|
| text-purple-100 | color: #ede9fe | <span style="color: #ede9fe">AaBbCcDd</span>|
| text-purple-200 | color: #ddd6fe | <span style="color: #ddd6fe">AaBbCcDd</span>|
| text-purple-300 | color: #c4b5fd | <span style="color: #c4b5fd">AaBbCcDd</span>|
| text-purple-400 | color: #a78bfa | <span style="color: #a78bfa">AaBbCcDd</span>|
| text-purple-500 | color: #8b5cf6 | <span style="color: #8b5cf6">AaBbCcDd</span>|
| text-purple-600 | color: #7c3aed | <span style="color: #7c3aed">AaBbCcDd</span>|
| text-purple-700 | color: #6d28d9 | <span style="color: #6d28d9">AaBbCcDd</span>|
| text-purple-800 | color: #5b21b6 | <span style="color: #5b21b6">AaBbCcDd</span>|
| text-purple-900 | color: #4c1d95 | <span style="color: #4c1d95">AaBbCcDd</span>|
| text-pink-50 | color: #fdf2f8 | <span style="color: #fdf2f8">AaBbCcDd</span>|
| text-pink-100 | color: #fce7f3 | <span style="color: #fce7f3">AaBbCcDd</span>|
| text-pink-200 | color: #fbcfe8 | <span style="color: #fbcfe8">AaBbCcDd</span>|
| text-pink-300 | color: #f9a8d4 | <span style="color: #f9a8d4">AaBbCcDd</span>|
| text-pink-400 | color: #f472b6 | <span style="color: #f472b6">AaBbCcDd</span>|
| text-pink-500 | color: #ec4899 | <span style="color: #ec4899">AaBbCcDd</span>|
| text-pink-600 | color: #db2777 | <span style="color: #db2777">AaBbCcDd</span>|
| text-pink-700 | color: #be185d | <span style="color: #be185d">AaBbCcDd</span>|
| text-pink-800 | color: #9d174d | <span style="color: #9d174d">AaBbCcDd</span>|
| text-pink-900 | color: #831843 | <span style="color: #831843">AaBbCcDd</span>|
还有 hover、active、focus、disabled 扩展，比如 `hover:text-black`

9
packages/amis-ui/scss/helper/typography/_text-decoration.md Normal file
View File

@ -0,0 +1,9 @@
---
title: Text Decoration
---
| Class | Properties |
| ----------- | ------------------------ |
| underline | text-decoration: underline |
| line-through | text-decoration: line-through |
| no-underline | text-decoration: none |

9
packages/amis-ui/scss/helper/typography/_text-overflow.md Normal file
View File

@ -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 |

10
packages/amis-ui/scss/helper/typography/_text-transform.md Normal file
View File

@ -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 |

12
packages/amis-ui/scss/helper/typography/_vertical-align.md Normal file
View File

@ -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 |

11
packages/amis-ui/scss/helper/typography/_whitespace.md Normal file
View File

@ -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 |

9
packages/amis-ui/scss/helper/typography/_word-break.md Normal file
View File

@ -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 |

2
packages/amis/src/renderers/Icon.tsx
View File

@ -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';
/**

1
packages/amis/tsconfig.json
View File

@ -3,6 +3,7 @@
"compilerOptions": {
"outDir": "lib",
"rootDir": "./",
"experimentalDecorators": true,
"typeRoots": [
"../../types",
"./node_modules/@types",

62
scripts/fis3plugin.ts Normal file
View File

@ -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;
}
};
}

251
scripts/markdownPlugin.ts Normal file
View File

@ -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 '<table class="table table-striped">\n'
// + '<thead>\n'
// + header
// + '</thead>\n'
// + '<tbody>\n'
// + body
// + '</tbody>\n'
// + '</table>\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 = '<a href="' + href + '"';
if (title) {
out += ' title="' + title + '"';
}
out += '>' + text + '</a>';
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 =
'<a class="anchor" name="' +
escapedText +
'" href="#' +
escapedText +
'" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>';
return '<h' + level + '>' + anchor + text + '</h' + level + '>';
// return '<h' + level + '><a name="' +
// escapedText +
// '" class="anchor" href="#' +
// escapedText +
// '"><span class="header-link"></span></a>' +
// text + '</h' + level + '>';
};
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] = `<iframe class="doc-iframe" width="100%" height="${setting.height || 200}px" frameBorder="0" src="/play?code=${encodeURIComponent(code)}&scope=${encodeURIComponent(setting.scope)}"></iframe>`;
if (lang === 'html') {
if (~code.indexOf('<html') || ~code.indexOf('<link')) {
return _;
}
placeholder[
index
] = `<!--amis-preview-start--><div class="amis-doc"><div class="preview">${code}</div><pre><code class="lang-html">${prism.highlight(
code
.replace(/"data:(\w+\/\w+);.*?"/g, '"data:$1; ..."')
.replace(/<svg([^>]*)>[\s\S]*?<\/svg>/g, '<svg$1>...</svg>')
.replace(/class="([^"]*?)\.\.\.([^"]*?)"/g, 'class="$1..."'),
prism.languages[lang],
lang
)}</code></pre></div><!--amis-preview-end-->`;
} else {
placeholder[
index
] = `<!--amis-preview-start--><div class="amis-preview" style="min-height: ${setting.height}px"><script type="text/schema" ${attr}>${code}</script></div><!--amis-preview-end-->`;
}
return `[[${index++}]]`;
}
);
content = (marked as any)
.parse(content)
.replace(/<p>\[\[(\d+)\]\]<\/p>/g, function (_: string, id: string) {
return placeholder[id] || '';
});
// content = global.fis ? fis.compile.partial(content, file, 'html') : content;
// + `\n\n<div class="m-t-lg b-l b-info b-3x wrapper bg-light dk">文档内容有误？欢迎大家一起来编写，文档地址：<i class="fa fa-github"></i><a href="https://github.com/baidu/amis/tree/master${file.subpath}">${file.subpath}</a>。</div>`;
info.html =
'<div class="markdown-body">' +
content.replace(
/<\!\-\-amis\-preview\-(start|end)\-\-\>/g,
function (_, type) {
return type === 'start' ? '</div>' : '<div class="markdown-body">';
}
) +
'</div>';
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<string> = [];
// 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};
}
};
}

42
scripts/mockApiPlugin.ts Normal file
View File

@ -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'));
});
});
}
};
}

12
tsconfig.json
View File

@ -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"
]
}

79
vite.config.ts Normal file
View File

@ -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')
}
]
}
});