amis-ui 1.0.0-beta.0

package/scss/helper/grid/_columns.scss

@@ -0,0 +1,74 @@
+/*!markdown
+
+---
+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 |
+
+
+*/
+@mixin make-grid-columns($prefix: '.') {
+  #{$prefix}grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
+  #{$prefix}grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  #{$prefix}grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  #{$prefix}grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  #{$prefix}grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  #{$prefix}grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  #{$prefix}grid-cols-7 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  #{$prefix}grid-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  #{$prefix}grid-cols-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  #{$prefix}grid-cols-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  #{$prefix}grid-cols-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  #{$prefix}grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  #{$prefix}grid-cols-none {
+    grid-template-columns: none;
+  }
+}
+
+@include make-grid-columns();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-grid-columns('.' + selector-escape($deivce + ':'));
+  }
+}

package/scss/helper/grid/_gap.scss

@@ -0,0 +1,154 @@
+/*!markdown
+
+---
+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 |
+
+
+*/
+@mixin make-gaps($prefix: '.') {
+  @each $name, $value in $spacing {
+    @if $name == default {
+      #{$prefix}gap {
+        gap: $value;
+      }
+      #{$prefix}gap-x {
+        column-gap: $value;
+      }
+      #{$prefix}gap-y {
+        row-gap: $value;
+      }
+    } @else {
+      #{$prefix}gap-#{'' + selector-escape($name)} {
+        gap: $value;
+      }
+      #{$prefix}gap-x-#{'' + selector-escape($name)} {
+        column-gap: $value;
+      }
+      #{$prefix}gap-y-#{'' + selector-escape($name)} {
+        row-gap: $value;
+      }
+    }
+  }
+}
+
+@include make-gaps();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-gaps('.' + selector-escape($deivce + ':'));
+  }
+}

package/scss/helper/grid/_row-start-end.scss

@@ -0,0 +1,201 @@
+/*!markdown
+
+---
+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 |
+
+
+*/
+@mixin make-grid-row-span($prefix: '.') {
+  #{$prefix}row-auto {
+    grid-row: auto;
+  }
+
+  #{$prefix}row-span-1 {
+    grid-row: span 1 / span 1;
+  }
+
+  #{$prefix}row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+  #{$prefix}row-span-3 {
+    grid-row: span 3 / span 3;
+  }
+  #{$prefix}row-span-4 {
+    grid-row: span 4 / span 4;
+  }
+  #{$prefix}row-span-5 {
+    grid-row: span 5 / span 5;
+  }
+  #{$prefix}row-span-6 {
+    grid-row: span 6 / span 6;
+  }
+  #{$prefix}row-span-7 {
+    grid-row: span 7 / span 7;
+  }
+  #{$prefix}row-span-8 {
+    grid-row: span 8 / span 8;
+  }
+  #{$prefix}row-span-9 {
+    grid-row: span 9 / span 9;
+  }
+  #{$prefix}row-span-10 {
+    grid-row: span 10 / span 10;
+  }
+  #{$prefix}row-span-11 {
+    grid-row: span 11 / span 1;
+  }
+  #{$prefix}row-span-12 {
+    grid-row: span 12 / span 12;
+  }
+
+  #{$prefix}row-span-full {
+    grid-row: 1 / -1;
+  }
+}
+
+@mixin make-grid-row-start($prefix: '.') {
+  #{$prefix}row-start-1 {
+    grid-row-start: 1;
+  }
+  #{$prefix}row-start-2 {
+    grid-row-start: 2;
+  }
+  #{$prefix}row-start-3 {
+    grid-row-start: 3;
+  }
+  #{$prefix}row-start-4 {
+    grid-row-start: 4;
+  }
+  #{$prefix}row-start-5 {
+    grid-row-start: 5;
+  }
+  #{$prefix}row-start-6 {
+    grid-row-start: 6;
+  }
+  #{$prefix}row-start-7 {
+    grid-row-start: 7;
+  }
+  #{$prefix}row-start-8 {
+    grid-row-start: 8;
+  }
+  #{$prefix}row-start-9 {
+    grid-row-start: 9;
+  }
+  #{$prefix}row-start-10 {
+    grid-row-start: 10;
+  }
+  #{$prefix}row-start-11 {
+    grid-row-start: 11;
+  }
+  #{$prefix}row-start-12 {
+    grid-row-start: 12;
+  }
+  #{$prefix}row-start-13 {
+    grid-row-start: 13;
+  }
+  #{$prefix}row-start-auto {
+    grid-row-start: auto;
+  }
+}
+
+@mixin make-grid-row-end($prefix: '.') {
+  #{$prefix}row-end-1 {
+    grid-row-end: 1;
+  }
+  #{$prefix}row-end-2 {
+    grid-row-end: 2;
+  }
+  #{$prefix}row-end-3 {
+    grid-row-end: 3;
+  }
+  #{$prefix}row-end-4 {
+    grid-row-end: 4;
+  }
+  #{$prefix}row-end-5 {
+    grid-row-end: 5;
+  }
+  #{$prefix}row-end-6 {
+    grid-row-end: 6;
+  }
+  #{$prefix}row-end-7 {
+    grid-row-end: 7;
+  }
+  #{$prefix}row-end-8 {
+    grid-row-end: 8;
+  }
+  #{$prefix}row-end-9 {
+    grid-row-end: 9;
+  }
+  #{$prefix}row-end-10 {
+    grid-row-end: 10;
+  }
+  #{$prefix}row-end-11 {
+    grid-row-end: 11;
+  }
+  #{$prefix}row-end-12 {
+    grid-row-end: 12;
+  }
+  #{$prefix}row-end-13 {
+    grid-row-end: 13;
+  }
+  #{$prefix}row-end-auto {
+    grid-row-end: auto;
+  }
+}
+
+@include make-grid-row-span();
+@include make-grid-row-start();
+@include make-grid-row-end();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-grid-row-span('.' + selector-escape($deivce + ':'));
+    @include make-grid-row-start('.' + selector-escape($deivce + ':'));
+    @include make-grid-row-end('.' + selector-escape($deivce + ':'));
+  }
+}

package/scss/helper/grid/_rows.scss

@@ -0,0 +1,50 @@
+/*!markdown
+
+---
+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 |
+
+
+*/
+@mixin make-grid-rows($prefix: '.') {
+  #{$prefix}grid-rows-1 {
+    grid-template-rows: repeat(1, minmax(0, 1fr));
+  }
+
+  #{$prefix}grid-rows-2 {
+    grid-template-rows: repeat(2, minmax(0, 1fr));
+  }
+
+  #{$prefix}grid-rows-3 {
+    grid-template-rows: repeat(3, minmax(0, 1fr));
+  }
+  #{$prefix}grid-rows-4 {
+    grid-template-rows: repeat(4, minmax(0, 1fr));
+  }
+  #{$prefix}grid-rows-5 {
+    grid-template-rows: repeat(5, minmax(0, 1fr));
+  }
+  #{$prefix}grid-rows-6 {
+    grid-template-rows: repeat(6, minmax(0, 1fr));
+  }
+  #{$prefix}grid-rows-none {
+    grid-template-rows: none;
+  }
+}
+
+@include make-grid-rows();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-grid-rows('.' + selector-escape($deivce + ':'));
+  }
+}

package/scss/helper/layout/_box-sizing.scss

@@ -0,0 +1,51 @@
+/*!markdown
+
+---
+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)。
+
+*/
+
+@mixin make-box-sizing($prefix: '.') {
+  #{$prefix}box-border {
+    box-sizing: border-box;
+  }
+
+  #{$prefix}box-content {
+    box-sizing: content-box;
+  }
+}
+
+@include make-box-sizing();

package/scss/helper/layout/_clear.scss

@@ -0,0 +1,56 @@
+/*!markdown
+
+---
+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)。
+
+*/
+
+@mixin make-clear($prefix: '.') {
+  #{$prefix}clear-right {
+    clear: right;
+  }
+
+  #{$prefix}clear-left {
+    clear: left;
+  }
+
+  #{$prefix}clear-none {
+    clear: none;
+  }
+
+  #{$prefix}clear-both {
+    clear: both;
+  }
+}
+
+@include make-clear();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-clear('.' + selector-escape($deivce + ':'));
+  }
+}

package/scss/helper/layout/_display.scss

@@ -0,0 +1,82 @@
+/*!markdown
+
+---
+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)。
+
+*/
+@mixin make-display($prefix: '.') {
+  @each $name,
+    $value
+      in (
+        'block': block,
+        'inline-block': inline-block,
+        'inline': inline,
+        'flex': flex,
+        'inline-flex': inline-flex,
+        'table': table,
+        'table-caption': table-caption,
+        'table-cell': table-cell,
+        'table-column': table-column,
+        'table-column-group': table-column-group,
+        'table-footer-group': table-footer-group,
+        'table-header-group': table-header-group,
+        'table-row-group': table-row-group,
+        'table-row': table-row,
+        'flow-root': flow-root,
+        'grid': grid,
+        'inline-grid': inline-grid,
+        'contents': contents,
+        'hidden': none
+      )
+  {
+    #{$prefix + $name} {
+      display: $value;
+    }
+  }
+}
+
+@include make-display();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-display('.' + selector-escape($deivce + ':'));
+  }
+}