补充文档,调整样式

docs/css-utilities/index.md

@@ -4,13 +4,13 @@ title: 快速开始
 
 amis 参考 [tailwindcss](https://tailwindcss.com/) 加入了大量的帮助类 css，掌握这些用法，完全不用手写 css。
 
-理念来自[tailwindcss](https://tailwindcss.com/), 不过这边做了一定的筛选，把一些不常用的用法剔除了，另外响应式方面只做了 pc 端和手机端，其他的设备并没有支持。这个文件未压缩版本大概是 300K 左右，比官方的要小很多。目前这个文件没有和主题文件合并在一起，用户可以选择性加载。
+理念来自于[tailwindcss](https://tailwindcss.com/), 不过根据我们经验分析，做了一定的筛选，把一些不常用的用法剔除了，另外响应式方面只做了 pc 端和手机端，其他的设备并没有支持。这个文件未压缩版本大概是 300K 左右，比官方的要小很多。目前这个文件没有和主题文件合并在一起，用户可以选择性加载。
 
 ```html
 <link rel="stylesheet" href="amis/lib/utilities.css" />
 ```
 
-引入这个 css 后，就可以像下面那样直接给 html 标签加类名的方式来设定样式了。
+引入这个 css 后，就可以像下面那样直接用 html 标签加类名的方式来设定样式了。
 
 ```html
 <div
@@ -65,3 +65,5 @@ amis 参考 [tailwindcss](https://tailwindcss.com/) 加入了大量的帮助类
 - 通过 `rounded-xl` 设置圆角。
 - 通过 `text-xl`、`font-medium` 设置字体大小粗细。
 - 等等。。
+
+具体用法请查看相关章节的文档。

docs/css-utilities/responsive-design.md

@@ -4,10 +4,18 @@ title: 响应式设计
 
 响应式设计目前只支持 pc 端和手机端，其他设备目前不支持，貌似也没必要支持。默认就是 pc，如果你在 css 类名前面再加个 `mobile:` 开头，就是专门给移动设备设置样式了。
 
-```html
+<!-- ```html
 <div class="text-black-500 mobile:text-red-500">
   这是一段文字，pc 端我是黑色的，在移动端查看，我是红色的。
 </div>
+``` -->
+
+```schema:height="100" scope="body"
+{
+  "type": "tpl",
+  "className": "text-black-500 mobile:text-red-500",
+  "tpl": "这是一段文字，pc 端我是黑色的，在移动端查看，我是红色的。"
+}
 ```
 
 几乎所有的类名都可以在开头处加个 `mobile:` 用来表示是移动端样式。

docs/css-utilities/state.md

@@ -2,12 +2,17 @@
 title: 状态样式
 ---
 
-响应式设计目前只支持 pc 端和手机端，其他设备目前不支持，貌似也没必要支持。默认就是 pc，如果你在 css 类名前面再加个 `mobile:` 开头，就是专门给移动设备设置样式了。
+除了给默认状态设置样式外，还支持几个特定状态的样式设置比如：hover（鼠标悬停）、active（当前选中）或者 disabled（当前不可用）。
 
-```html
-<div class="text-black-500 mobile:text-red-500">
-  这是一段文字，pc 端我是黑色的，在移动端查看，我是红色的。
-</div>
+```schema:height="100" scope="body"
+{
+  "type": "button",
+  "label": "按钮",
+  "className": "bg-pink-400 hover:bg-pink-600",
+  "actionType": "dialog",
+  "dialog": {
+    "title": "弹框",
+    "body": "Hello World!"
+  }
+}
 ```
-
-几乎所有的类名都可以在开头处加个 `mobile:` 用来表示是移动端样式。

examples/components/App.tsx

@@ -148,7 +148,7 @@ export class App extends React.PureComponent {
       });
 
       document
-        .querySelectorAll(`link[title=${this.state.theme.value}]`)
+        .querySelectorAll(`link[title="${this.state.theme.value}"]`)
         .forEach(item => {
           item.disabled = false;
         });
@@ -164,13 +164,13 @@ export class App extends React.PureComponent {
 
     if (preState.theme.value !== this.state.theme.value) {
       document
-        .querySelectorAll(`link[title=${preState.theme.value}]`)
+        .querySelectorAll(`link[title="${preState.theme.value}"]`)
         .forEach(item => {
           item.disabled = true;
         });
 
       document
-        .querySelectorAll(`link[title=${this.state.theme.value}]`)
+        .querySelectorAll(`link[title="${this.state.theme.value}"]`)
         .forEach(item => {
           item.disabled = false;
         });
@@ -295,15 +295,14 @@ export class App extends React.PureComponent {
 
         <div className={`${theme.ns}Layout-searchBar hidden-xs hidden-sm`}>
           <DocSearch theme={theme} />
+          <a
+            className="gh-icon"
+            href="https://github.com/baidu/amis"
+            target="_blank"
+          >
+            <i className="fa fa-github" />
+          </a>
         </div>
-
-        <a
-          className="gh-icon"
-          href="https://github.com/baidu/amis"
-          target="_blank"
-        >
-          <i className="fa fa-github" />
-        </a>
       </>
     );
   }

examples/components/DocSearch.jsx

@@ -120,10 +120,13 @@ export default class DocSearch extends React.Component {
     const ns = this.props.theme.ns;
     return (
       <>
-        <div className={`${ns}TextControl-input Doc-search`}>
+        {/* <div className={`${ns}TextControl-input Doc-search`}>
           <Icon icon="search" className="icon" />
           <input readOnly placeholder={'搜索...'} onClick={this.onOpen} />
-        </div>
+        </div> */}
+        <a onClick={this.onOpen}>
+          <Icon icon="search" className="icon" />
+        </a>
 
         <Drawer
           className="Doc-searchDrawer"

examples/components/MdRenderer.tsx

@@ -31,12 +31,6 @@ class CodePreview extends React.Component {
     const PlayGround = this.state.PlayGround;
     // 不要放在 .markdown-body 下面，因为样式会干扰，复写又麻烦，所以通过 Overlay 渲染到同级
 
-    if (this.props.viewMode === 'mobile') {
-      // 移动端下高度不能太低
-      if (height < 500) {
-        height = 500;
-      }
-    }
     return (
       <div>
         <span style={{display: 'block', height: height}} ref="span" />
@@ -129,9 +123,18 @@ class Preview extends React.Component {
 
       let dom = document.createElement('div');
       let height = props.height ? parseInt(props.height, 10) : 200;
+
+      if (this.props.viewMode === 'mobile') {
+        // 移动端下高度不能太低
+        if (height < 500) {
+          height = 500;
+        }
+      }
+
       dom.setAttribute('class', 'doc-play-ground');
       dom.setAttribute('style', `height: ${height}px;`);
-      script.parentNode.replaceChild(dom, script);
+      const origin = script.parentNode;
+      origin.parentNode.replaceChild(dom, origin);
 
       this.doms.push(dom);
       ReactDOM.unstable_renderSubtreeIntoContainer(

examples/mobile.html

@@ -12,6 +12,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
     <link rel="stylesheet" href="font-awesome/css/font-awesome.css" />
     <link rel="stylesheet" href="animate.css/animate.css" />
+    <!--DEPENDENCIES_INJECT_PLACEHOLDER-->
     <link rel="stylesheet" title="default" href="../scss/themes/default.scss" />
     <link
       rel="stylesheet"
@@ -25,6 +26,7 @@
       disabled
       href="../scss/themes/dark.scss"
     />
+    <link rel="stylesheet" href="../scss/utilities.scss" />
     <style>
       .app-wrapper {
         position: relative;
@@ -54,7 +56,7 @@
       ];
       const theme = themes[localStorage.getItem('themeIndex') || 0];
       // mobile 下先禁掉所有外链避免影响
-      document.querySelectorAll('link').forEach(item => {
+      document.querySelectorAll('link[title]').forEach(item => {
         item.disabled = true;
       });
       document.querySelector(`link[title=${theme.value}]`).disabled = false;

examples/style.scss

@@ -84,7 +84,7 @@ body {
     position: relative;
     height: 100%;
     width: 100%;
-    overflow: auto;
+    // overflow: auto;
   }
 }
 
@@ -126,18 +126,18 @@ body {
         box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
       }
 
-      .gh-icon {
-        position: fixed;
-        right: 15px;
-        top: 15px;
-        font-size: 22px;
-        padding: 0 10px;
-        color: #333;
+      // .gh-icon {
+      //   position: fixed;
+      //   right: 15px;
+      //   top: 15px;
+      //   font-size: 22px;
+      //   padding: 0 10px;
+      //   color: #333;
 
-        &:hover {
-          color: #333;
-        }
-      }
+      //   &:hover {
+      //     color: #333;
+      //   }
+      // }
     }
 
     &-brandBar,
@@ -187,7 +187,7 @@ body {
 
     &-headerBar {
       height: 64px;
-      padding-right: 20px;
+      padding-right: 15px;
 
       &-links {
         height: 64px;
@@ -222,18 +222,43 @@ body {
     }
 
     &-searchBar {
-      width: 120px;
+      width: 65px;
+      align-self: center;
+      padding-left: 15px;
 
-      .Doc-search {
-        margin-top: 15px;
-        border: 0;
+      > a {
+        cursor: pointer;
+        color: #666;
 
-        > .icon-search {
-          margin-right: 8px;
-          top: 3px;
+        > svg {
+          width: 14px;
+          height: 14px;
+          top: 2px;
+        }
+
+        > i {
+          font-size: 18px;
+        }
+
+        &:hover {
+          color: #333;
+        }
+
+        & + a {
+          margin-left: 10px;
         }
       }
 
+      // .Doc-search {
+      //   margin-top: 15px;
+      //   border: 0;
+
+      //   > .icon-search {
+      //     margin-right: 8px;
+      //     top: 3px;
+      //   }
+      // }
+
       &::before {
         left: 0;
       }

mock/server.conf

@@ -1,4 +1,4 @@
-rewrite ^\/(?:examples|docs|style|schema\.json)(?:\/[a-z0-9\-_\/]+)?$ /examples/index.html
+rewrite ^\/(?:examples|docs|style)(?:\/[a-z0-9\-_\/]+)?$ /examples/index.html
 
 rewrite ^\/play$ /examples/index.html
 rewrite ^\/edit$ /examples/index.html

package.json

@@ -158,7 +158,7 @@
     "react-testing-library": "6.0.4",
     "strip-json-comments": "^2.0.1",
     "ts-jest": "^24.0.0",
-    "ts-json-schema-generator": "^0.73.0",
+    "ts-json-schema-generator": "0.73.0",
     "ts-node": "^9.0.0",
     "typescript": "^4.0.2"
   },

scripts/NodeParser/IntersectionNodeParser.ts

@@ -12,14 +12,11 @@ export class IntersectionNodeParser extends BaseIntersectionNodeParser {
   protected readonly childParser: NodeParser;
 
   public constructor(typeChecker: ts.TypeChecker, childNodeParser: NodeParser) {
-    super(typeChecker, childNodeParser);
+    super(typeChecker as any, childNodeParser);
     this.childParser = childNodeParser;
   }
 
-  public createType(
-    node: ts.IntersectionTypeNode,
-    context: Context
-  ): BaseType | undefined {
+  public createType(node: any, context: Context): BaseType | undefined {
     // 这两个只能用 allOf 来了，提取不了。
     const shouldBeReference = (type: any) =>
       ['SchemaObject', 'FormControlSchema'].includes(
@@ -30,12 +27,12 @@ export class IntersectionNodeParser extends BaseIntersectionNodeParser {
     // 跟 SchemaObject and 一般都有问题，改成 allOf 不要支持 additional props false 了
     if (matched) {
       const types: BaseType[] = node.types
-        .map(type => this.childParser.createType(type, context)!)
-        .filter(item => item);
+        .map((type: any) => this.childParser.createType(type as any, context)!)
+        .filter((item: any) => item);
 
       return new IntersectionType(types);
     }
 
-    return super.createType(node, context);
+    return super.createType(node as any, context);
   }
 }

scripts/build-schemas.ts

@@ -189,7 +189,7 @@ function hackIt(generator: any) {
   replaceNodeParser(
     chainNodeParser.nodeParsers,
     IntersectionNodeParser,
-    new MyIntersectionNodeParser(typeChecker, chainNodeParser)
+    new MyIntersectionNodeParser(typeChecker as any, chainNodeParser) as any
   );
 }