chore: remove mermaid

one/build/generator.js

@@ -9,14 +9,12 @@ import { get, removeFile } from './deps'
 const DOCS_DIR = resolve(__dirname, '../docs')
 const PAGES_DIR = resolve(__dirname, '../../pages')
 const DEMOS_DIR = resolve(__dirname, '../../components/demos')
-const MERMAID_DIR = resolve(__dirname, '../../static/images/mermaid')
 const ASSETS_DIR = resolve(__dirname, '../../assets')
 
 export function generatePages (file, stats) {
   if (!file) {
     rimraf.sync(PAGES_DIR)
     rimraf.sync(DEMOS_DIR)
-    rimraf.sync(MERMAID_DIR)
     rimraf.sync(resolve(__dirname, './deps.json'))
     console.log('Regenerating all files...')
     handleFile(DOCS_DIR)

one/build/page.js

@@ -5,7 +5,6 @@ import slug from 'remark-slug'
 import frontmatter from 'remark-frontmatter'
 import highlight from 'remark-highlight.js'
 import shortcodes from 'remark-shortcodes'
-import mermaid from 'one-remark-mermaid'
 import remarkToRehype from 'remark-rehype'
 import raw from 'rehype-raw'
 import html from 'rehype-stringify'
@@ -25,8 +24,6 @@ import { vue } from './language'
 
 const DOCS_DIR = resolve(__dirname, '../docs')
 const PAGES_DIR = resolve(__dirname, '../../pages')
-const STYLES_DIR = resolve(__dirname, '../../assets/styles')
-const MERMAID_DIR = resolve(__dirname, '../../static/images/mermaid')
 const PAGE_TPL = readFileSync(resolve(__dirname, '../templates/page.etpl'))
 
 const renderPage = etpl.compile(PAGE_TPL)
@@ -39,10 +36,6 @@ const md = remark()
   .use(ref)
   .use(frontmatter)
   .use(shortcodes)
-  .use(mermaid, {
-    cssFile: join(`${STYLES_DIR}`, 'mermaid-cli.css'),
-    theme: 'none'
-  })
   .use(demo)
   .use(extractFrontmatter)
   .use(highlight)
@@ -55,7 +48,6 @@ const md = remark()
   .use(html, { allowDangerousHTML: true })
 
 export function render (contents, path, data = {}) {
-  data.destinationDir = MERMAID_DIR
   return md.processSync(vfile({ contents, path, data }))
 }
 

one/build/rehype-preview-img.js

@@ -1,11 +1,8 @@
-import { resolve, join } from 'path'
 import visit from 'unist-util-visit'
 import h from 'hastscript'
 import { removeClass, addClass, hasClass } from './rehype-util-class'
-import { readFileSync } from './util'
 
 const RE_SPACE = /[\w\r\n]*/
-const MERMAID_DIR = resolve(__dirname, '../../static/images/mermaid')
 
 export default function attacher () {
   return tree => {
@@ -15,21 +12,6 @@ export default function attacher () {
         return
       }
 
-      if (title && title.indexOf('mermaid') !== -1) {
-        let fig = h(
-          'figure.hero.mermaid',
-          {
-            'v-once': true
-          },
-          {
-            type: 'raw',
-            value: readFileSync(join(MERMAID_DIR, src))
-          }
-        )
-        children.splice(index, 1, fig)
-        return
-      }
-
       src = src.replace(/(\.\.)?\/assets\//g, '/images/content/')
 
       if (hasClass(node, 'preview')) {

one/docs/components/form.md

@@ -102,18 +102,7 @@
 
 ### 表单提交流程
 
-```mermaid
-graph TD
-A[Native submit event] --> B[Clone data object]
-B --> C["beforeValidate(data)"]
-C -- not set / resolved --> D["validate()"]
-D --> E{isValid?}
-E -- Y --> F["afterValidate(data)"]
-F -- not set / reslved --> G["$emit('submit', data, event')"]
-C -- rejected --> H["$emit('invalid', result)"]
-D -- N --> H
-F -- rejected --> H
-```
+<img class="preview hero" src="/images/development/form/flow.png">
 
 :::warning
 `beforeValidate` 和 `afterValidate` 以及 `sumbit` 事件操作的 `data` 均为 props `data` 的同一个副本。考虑到校验信息和 UI 中数据的一致性，`validate` 的目标数据是 props `data` 的源数据。因此在 `beforeValidate` 中**不建议**修改 `data` 副本。
@@ -172,27 +161,10 @@ validators: [
 
 #### 交互过程的校验
 
-```mermaid
-graph LR
-A[Interaction events] -->B[Field#validate]
-A --> C[validators.validate]
-B --> D{isValid?}
-C --> D
-D -- Y --> E[Hide validities]
-D -- N --> F[Show errors]
-```
+<img class="preview hero" src="/images/development/form/interaction.png">
 
 #### 提交过程的校验
 
-```mermaid
-graph LR
-A[validate] -->B[Field#validate]
-A --> C[validators.validate]
-B --> D[Merge validities]
-C --> D
-D --> E{isValid?}
-E -- Y --> F["Promise.resolve(true)"]
-E -- N --> G["Promise.resolve(error)"]
-```
+<img class="preview hero" src="/images/development/form/submit.png">
 
 提交时，其中一个过程的校验失败不会导致整个校验终止，校验信息将在两个过程执行完毕后进行整合，并传递到 [`invalid`](#事件) 事件中去。