feat: publicize doc implemetation

one/build/customBlock.js

@@ -0,0 +1,226 @@
+'use strict'
+
+var trim = require('trim-trailing-lines')
+
+module.exports = customBlock
+
+var C_NEWLINE = '\n'
+var C_TAB = '\t'
+var C_SPACE = ' '
+var C_COLON = ':'
+
+var MIN_FENCE_COUNT = 3
+var CODE_INDENT_COUNT = 4
+
+function customBlock (eat, value, silent) {
+  var self = this
+  var length = value.length + 1
+  var index = 0
+  var subvalue = ''
+  var fenceCount
+  var marker
+  var character
+  var flag
+  var queue
+  var content
+  var exdentedContent
+  var closing
+  var exdentedClosing
+  var indent
+  var now
+
+  /* Eat initial spacing. */
+  while (index < length) {
+    character = value.charAt(index)
+
+    if (character !== C_SPACE && character !== C_TAB) {
+      break
+    }
+
+    subvalue += character
+    index++
+  }
+
+  indent = index
+
+  /* Eat the fence. */
+  character = value.charAt(index)
+
+  if (character !== C_COLON) {
+    return
+  }
+
+  index++
+  marker = character
+  fenceCount = 1
+  subvalue += character
+
+  while (index < length) {
+    character = value.charAt(index)
+
+    if (character !== marker) {
+      break
+    }
+
+    subvalue += character
+    fenceCount++
+    index++
+  }
+
+  if (fenceCount < MIN_FENCE_COUNT) {
+    return
+  }
+
+  /* Eat spacing before flag. */
+  while (index < length) {
+    character = value.charAt(index)
+
+    if (character !== C_SPACE && character !== C_TAB) {
+      break
+    }
+
+    subvalue += character
+    index++
+  }
+
+  /* Eat flag. */
+  flag = ''
+  queue = ''
+
+  while (index < length) {
+    character = value.charAt(index)
+
+    if (character === C_NEWLINE || character === C_COLON) {
+      break
+    }
+
+    if (character === C_SPACE || character === C_TAB) {
+      queue += character
+    } else {
+      flag += queue + character
+      queue = ''
+    }
+
+    index++
+  }
+
+  character = value.charAt(index)
+
+  if (character && character !== C_NEWLINE) {
+    return
+  }
+
+  if (silent) {
+    return true
+  }
+
+  now = eat.now()
+  now.column += subvalue.length
+  now.offset += subvalue.length
+
+  subvalue += flag
+  flag = self.decode.raw(self.unescape(flag), now)
+
+  if (queue) {
+    subvalue += queue
+  }
+
+  queue = ''
+  closing = ''
+  exdentedClosing = ''
+  content = ''
+  exdentedContent = ''
+
+  /* Eat content. */
+  while (index < length) {
+    character = value.charAt(index)
+    content += closing
+    exdentedContent += exdentedClosing
+    closing = ''
+    exdentedClosing = ''
+
+    if (character !== C_NEWLINE) {
+      content += character
+      exdentedClosing += character
+      index++
+      continue
+    }
+
+    /* Add the newline to `subvalue` if its the first
+     * character.  Otherwise, add it to the `closing`
+     * queue. */
+    if (content) {
+      closing += character
+      exdentedClosing += character
+    } else {
+      subvalue += character
+    }
+
+    queue = ''
+    index++
+
+    while (index < length) {
+      character = value.charAt(index)
+
+      if (character !== C_SPACE) {
+        break
+      }
+
+      queue += character
+      index++
+    }
+
+    closing += queue
+    exdentedClosing += queue.slice(indent)
+
+    if (queue.length >= CODE_INDENT_COUNT) {
+      continue
+    }
+
+    queue = ''
+
+    while (index < length) {
+      character = value.charAt(index)
+
+      if (character !== marker) {
+        break
+      }
+
+      queue += character
+      index++
+    }
+
+    closing += queue
+    exdentedClosing += queue
+
+    if (queue.length < fenceCount) {
+      continue
+    }
+
+    queue = ''
+
+    while (index < length) {
+      character = value.charAt(index)
+
+      if (character !== C_SPACE && character !== C_TAB) {
+        break
+      }
+
+      closing += character
+      exdentedClosing += character
+      index++
+    }
+
+    if (!character || character === C_NEWLINE) {
+      break
+    }
+  }
+
+  subvalue += content + closing
+
+  return eat(subvalue)({
+    type: 'customblock',
+    className: (flag || '').trim().replace(/\s+/g, ' '),
+    value: trim(exdentedContent)
+  })
+}

one/build/deps.js

@@ -0,0 +1,48 @@
+import path from 'path'
+import { readFileSync, writeFileSync } from './util'
+import { merge } from 'lodash'
+
+function load () {
+  try {
+    return JSON.parse(readFileSync(resolve('./deps.json')))
+  } catch (e) {
+    return {}
+  }
+}
+
+function save (deps) {
+  writeFileSync(resolve('./deps.json'), JSON.stringify(deps, null, '  '))
+}
+
+function resolve (file) {
+  return path.resolve(__dirname, file)
+}
+
+export function get (file) {
+  let deps = load()
+  return deps[file]
+}
+
+export function add (data) {
+  let deps = load()
+  save(merge(deps, data))
+}
+
+export function remove (data) {
+  let deps = load()
+  Object.keys(data).forEach(key => {
+    if (deps[key]) {
+      delete deps[key][data[key]]
+    }
+  })
+  save(deps)
+}
+
+export function removeFile (file) {
+  let deps = load()
+  delete deps[file]
+
+  Object.keys(deps).forEach(key => {
+    delete deps[key][file]
+  })
+}

one/build/details.js

@@ -0,0 +1,226 @@
+'use strict'
+
+var trim = require('trim-trailing-lines')
+
+module.exports = details
+
+var C_NEWLINE = '\n'
+var C_TAB = '\t'
+var C_SPACE = ' '
+var C_PLUS = '+'
+
+var MIN_FENCE_COUNT = 3
+var CODE_INDENT_COUNT = 4
+
+function details (eat, value, silent) {
+  var self = this
+  var length = value.length + 1
+  var index = 0
+  var subvalue = ''
+  var fenceCount
+  var marker
+  var character
+  var flag
+  var queue
+  var content
+  var exdentedContent
+  var closing
+  var exdentedClosing
+  var indent
+  var now
+
+  /* Eat initial spacing. */
+  while (index < length) {
+    character = value.charAt(index)
+
+    if (character !== C_SPACE && character !== C_TAB) {
+      break
+    }
+
+    subvalue += character
+    index++
+  }
+
+  indent = index
+
+  /* Eat the fence. */
+  character = value.charAt(index)
+
+  if (character !== C_PLUS) {
+    return
+  }
+
+  index++
+  marker = character
+  fenceCount = 1
+  subvalue += character
+
+  while (index < length) {
+    character = value.charAt(index)
+
+    if (character !== marker) {
+      break
+    }
+
+    subvalue += character
+    fenceCount++
+    index++
+  }
+
+  if (fenceCount < MIN_FENCE_COUNT) {
+    return
+  }
+
+  /* Eat spacing before flag. */
+  while (index < length) {
+    character = value.charAt(index)
+
+    if (character !== C_SPACE && character !== C_TAB) {
+      break
+    }
+
+    subvalue += character
+    index++
+  }
+
+  /* Eat flag. */
+  flag = ''
+  queue = ''
+
+  while (index < length) {
+    character = value.charAt(index)
+
+    if (character === C_NEWLINE || character === C_PLUS) {
+      break
+    }
+
+    if (character === C_SPACE || character === C_TAB) {
+      queue += character
+    } else {
+      flag += queue + character
+      queue = ''
+    }
+
+    index++
+  }
+
+  character = value.charAt(index)
+
+  if (character && character !== C_NEWLINE) {
+    return
+  }
+
+  if (silent) {
+    return true
+  }
+
+  now = eat.now()
+  now.column += subvalue.length
+  now.offset += subvalue.length
+
+  subvalue += flag
+  flag = self.decode.raw(self.unescape(flag), now)
+
+  if (queue) {
+    subvalue += queue
+  }
+
+  queue = ''
+  closing = ''
+  exdentedClosing = ''
+  content = ''
+  exdentedContent = ''
+
+  /* Eat content. */
+  while (index < length) {
+    character = value.charAt(index)
+    content += closing
+    exdentedContent += exdentedClosing
+    closing = ''
+    exdentedClosing = ''
+
+    if (character !== C_NEWLINE) {
+      content += character
+      exdentedClosing += character
+      index++
+      continue
+    }
+
+    /* Add the newline to `subvalue` if its the first
+     * character.  Otherwise, add it to the `closing`
+     * queue. */
+    if (content) {
+      closing += character
+      exdentedClosing += character
+    } else {
+      subvalue += character
+    }
+
+    queue = ''
+    index++
+
+    while (index < length) {
+      character = value.charAt(index)
+
+      if (character !== C_SPACE) {
+        break
+      }
+
+      queue += character
+      index++
+    }
+
+    closing += queue
+    exdentedClosing += queue.slice(indent)
+
+    if (queue.length >= CODE_INDENT_COUNT) {
+      continue
+    }
+
+    queue = ''
+
+    while (index < length) {
+      character = value.charAt(index)
+
+      if (character !== marker) {
+        break
+      }
+
+      queue += character
+      index++
+    }
+
+    closing += queue
+    exdentedClosing += queue
+
+    if (queue.length < fenceCount) {
+      continue
+    }
+
+    queue = ''
+
+    while (index < length) {
+      character = value.charAt(index)
+
+      if (character !== C_SPACE && character !== C_TAB) {
+        break
+      }
+
+      closing += character
+      exdentedClosing += character
+      index++
+    }
+
+    if (!character || character === C_NEWLINE) {
+      break
+    }
+  }
+
+  subvalue += content + closing
+
+  return eat(subvalue)({
+    type: 'details',
+    summary: flag || null,
+    value: trim(exdentedContent)
+  })
+}

one/build/generate.js

@@ -0,0 +1,3 @@
+import { generatePages } from './generator'
+
+generatePages()

one/build/generator.js

@@ -0,0 +1,105 @@
+import { statSync } from 'fs'
+import { resolve, relative, extname, basename, sep } from 'path'
+import readdirpSync from 'recursive-readdir-sync'
+import rimraf from 'rimraf'
+import { copyFileSync, replaceExtSync } from './util'
+import { renderDocToPage } from './page'
+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)
+    console.log('...done.')
+  } else {
+    handleFile(file, stats)
+  }
+}
+
+function handleFile (file, stats) {
+  let segments = relative(DOCS_DIR, file).split(sep)
+  if (segments.some(segment => {
+    return segment.startsWith('_') || segment.startsWith('.')
+  })) {
+    return
+  }
+
+  let remove = stats ? stats.remove : false
+  let dir = stats ? stats.dir : statSync(file).isDirectory()
+  if (dir) {
+    if (remove) {
+      rimraf.sync(file)
+      return
+    }
+
+    let children = readdirpSync(file)
+    children.forEach(child => {
+      handleFile(child, remove)
+    })
+    return
+  }
+
+  let ext = extname(file).toLowerCase()
+
+  /* eslint-disable indent */
+  /* There seems to be something wrong with FECS here */
+  switch (ext) {
+    case '.md': {
+      if (remove) {
+        let relDest = replaceExtSync(relative(DOCS_DIR, file), 'vue')
+        rimraf.sync(resolve(PAGES_DIR, relDest))
+        console.log(`[${relDest}] removed.`)
+      } else {
+        let dest = relative(DOCS_DIR, file)
+        renderDocToPage(dest)
+        console.log(`[${dest}] synced.`)
+      }
+      break
+    }
+    case '.json': {
+      if (basename(file) === 'nav.json') {
+        copyFileSync(file, resolve(ASSETS_DIR, 'data', 'nav.json'))
+        console.log('[nav.json] synced.')
+      }
+      break
+    }
+    default: {
+      let relDest = relative(DOCS_DIR, file)
+
+      let dest = relDest.split(sep).indexOf('demo') === -1
+        ? resolve(PAGES_DIR, relDest)
+        : resolve(DEMOS_DIR, relDest)
+      if (remove) {
+        rimraf.sync(dest)
+        console.log(`[${relDest}] removed.`)
+      } else {
+        copyFileSync(file, dest)
+        console.log(`[${relDest}] synced.`)
+      }
+      break
+    }
+  }
+  /* eslint-enable indent */
+
+  if (remove) {
+    removeFile(file)
+    return
+  }
+
+  let deps = get(file)
+  if (deps) {
+    Object.keys(deps).forEach(dep => {
+      handleFile(dep)
+    })
+  }
+}

one/build/i18n.js

@@ -0,0 +1,13 @@
+export const DEFAULT_LOCALE = 'zh-Hans'
+export const LOCALES = [
+  {
+    code: DEFAULT_LOCALE,
+    label: '简体中文'
+  },
+  {
+    code: 'en-US',
+    label: 'English (US)'
+  }
+]
+export const LOCALE_CODES = LOCALES.map(l => l.code)
+export const RE_LOCALE = new RegExp(`^\\/(${LOCALE_CODES.join('|')})\\/`)

one/build/language.js

@@ -0,0 +1,99 @@
+/* eslint-disable fecs-camelcase */
+/* eslint-disable babel/new-cap */
+export function vue (hljs) {
+  const XML_IDENT_RE = '[A-Za-z0-9\\._:-]+'
+  const TAG_INTERNALS = {
+    endsWithParent: true,
+    illegal: /</,
+    relevance: 0,
+    contains: [
+      {
+        className: 'attr',
+        begin: XML_IDENT_RE,
+        relevance: 0
+      },
+      {
+        begin: /=\s*/,
+        relevance: 0,
+        contains: [
+          {
+            className: 'string',
+            endsParent: true,
+            variants: [
+              {begin: /"/, end: /"/},
+              {begin: /'/, end: /'/},
+              {begin: /[^\s"'=<>`]+/}
+            ]
+          }
+        ]
+      }
+    ]
+  }
+  return {
+    case_insensitive: true,
+    contains: [
+      hljs.COMMENT(
+        '<!--',
+        '-->',
+        {
+          relevance: 10
+        }
+      ),
+      {
+        className: 'tag',
+        /*
+        The lookahead pattern (?=...) ensures that 'begin' only matches
+        '<style' as a single word, followed by a whitespace or an
+        ending braket. The '$' is needed for the lexeme to be recognized
+        by hljs.subMode() that tests lexemes outside the stream.
+        */
+        begin: '<style(?=\\s|>|$)',
+        end: '>',
+        keywords: {name: 'style'},
+        contains: [TAG_INTERNALS],
+        starts: {
+          end: '</style>',
+          returnEnd: true,
+          subLanguage: ['css', 'less', 'scss', 'stylus']
+        }
+      },
+      {
+        className: 'tag',
+        // See the comment in the <style tag about the lookahead pattern
+        begin: '<script(?=\\s|>|$)',
+        end: '>',
+        keywords: {name: 'script'},
+        contains: [TAG_INTERNALS],
+        starts: {
+          end: '</script>',
+          returnEnd: true,
+          subLanguage: ['javascript']
+        }
+      },
+      {
+        className: 'tag',
+        // See the comment in the <style tag about the lookahead pattern
+        begin: '<template(?=\\s|>|$)',
+        end: '>',
+        keywords: {name: 'template'},
+        contains: [TAG_INTERNALS],
+        starts: {
+          end: '</template>',
+          returnEnd: true,
+          subLanguage: ['html']
+        }
+      },
+      {
+        className: 'tag',
+        begin: '</?',
+        end: '/?>',
+        contains: [
+          {
+            className: 'name', begin: /[^/><\s]+/, relevance: 0
+          },
+          TAG_INTERNALS
+        ]
+      }
+    ]
+  }
+}

one/build/page.js

@@ -0,0 +1,94 @@
+import { resolve, relative, join } from 'path'
+import vfile from 'vfile'
+import remark from 'remark'
+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'
+import etpl from 'etpl'
+import { readFileSync, writeFileSync, replaceExtSync } from './util'
+import demo from './remark-demo'
+import ref from './remark-ref'
+import details from './remark-details'
+import custom from './remark-custom'
+import extractFrontmatter from './remark-extract-frontmatter'
+import rehypePreviewImg from './rehype-preview-img'
+import rehypeLink from './rehype-link'
+import rehypeDemo from './rehype-demo'
+import { add } from './deps'
+import lowlight from 'lowlight'
+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)
+
+lowlight.registerLanguage('vue', vue)
+
+const md = remark()
+  .use(custom)
+  .use(details)
+  .use(ref)
+  .use(frontmatter)
+  .use(shortcodes)
+  .use(mermaid, {
+    cssFile: join(`${STYLES_DIR}`, 'mermaid-cli.css'),
+    theme: 'none'
+  })
+  .use(demo)
+  .use(extractFrontmatter)
+  .use(highlight)
+  .use(slug)
+  .use(remarkToRehype, { allowDangerousHTML: true })
+  .use(raw)
+  .use(rehypePreviewImg)
+  .use(rehypeLink)
+  .use(rehypeDemo)
+  .use(html, { allowDangerousHTML: true })
+
+export function render (contents, path, data = {}) {
+  data.destinationDir = MERMAID_DIR
+  return md.processSync(vfile({ contents, path, data }))
+}
+
+function renderFile (file) {
+  return render(readFileSync(file), file)
+}
+
+export function renderDocToPage (file) {
+  let src = resolve(DOCS_DIR, file)
+  let dest = resolve(PAGES_DIR, replaceExtSync(file, 'vue'))
+  let { contents, data } = renderFile(src, dest)
+  let { demos = {}, components = {}, meta = {}, deps = {} } = data
+
+  Object.keys(deps || {}).forEach(dep => {
+    add({ [dep]: { [src]: true } })
+  })
+
+  let { layout, style } = meta
+  let componentList = Object.keys(components)
+  let demoList = Object.keys(demos)
+  let result = renderPage({
+    content: (contents || '').replace(/\n{3,}/g, '\n\n'),
+    demos: demoList.map(name => {
+      return {
+        name,
+        src: join('@/components/demos', relative(DOCS_DIR, demos[name].path))
+      }
+    }),
+    components: componentList,
+    boilerplate: demoList.length || componentList.length,
+    layout,
+    style: style || 'post'
+  })
+
+  writeFileSync(dest, result)
+}

one/build/refBlock.js

@@ -0,0 +1,226 @@
+'use strict'
+
+var trim = require('trim-trailing-lines')
+
+module.exports = refBlock
+
+var C_NEWLINE = '\n'
+var C_TAB = '\t'
+var C_SPACE = ' '
+var C_CARET = '^'
+
+var MIN_FENCE_COUNT = 3
+var CODE_INDENT_COUNT = 4
+
+function refBlock (eat, value, silent) {
+  var self = this
+  var length = value.length + 1
+  var index = 0
+  var subvalue = ''
+  var fenceCount
+  var marker
+  var character
+  var flag
+  var queue
+  var content
+  var exdentedContent
+  var closing
+  var exdentedClosing
+  var indent
+  var now
+
+  /* Eat initial spacing. */
+  while (index < length) {
+    character = value.charAt(index)
+
+    if (character !== C_SPACE && character !== C_TAB) {
+      break
+    }
+
+    subvalue += character
+    index++
+  }
+
+  indent = index
+
+  /* Eat the fence. */
+  character = value.charAt(index)
+
+  if (character !== C_CARET) {
+    return
+  }
+
+  index++
+  marker = character
+  fenceCount = 1
+  subvalue += character
+
+  while (index < length) {
+    character = value.charAt(index)
+
+    if (character !== marker) {
+      break
+    }
+
+    subvalue += character
+    fenceCount++
+    index++
+  }
+
+  if (fenceCount < MIN_FENCE_COUNT) {
+    return
+  }
+
+  /* Eat spacing before flag. */
+  while (index < length) {
+    character = value.charAt(index)
+
+    if (character !== C_SPACE && character !== C_TAB) {
+      break
+    }
+
+    subvalue += character
+    index++
+  }
+
+  /* Eat flag. */
+  flag = ''
+  queue = ''
+
+  while (index < length) {
+    character = value.charAt(index)
+
+    if (character === C_NEWLINE || character === C_CARET) {
+      break
+    }
+
+    if (character === C_SPACE || character === C_TAB) {
+      queue += character
+    } else {
+      flag += queue + character
+      queue = ''
+    }
+
+    index++
+  }
+
+  character = value.charAt(index)
+
+  if (character && character !== C_NEWLINE) {
+    return
+  }
+
+  if (silent) {
+    return true
+  }
+
+  now = eat.now()
+  now.column += subvalue.length
+  now.offset += subvalue.length
+
+  subvalue += flag
+  flag = self.decode.raw(self.unescape(flag), now)
+
+  if (queue) {
+    subvalue += queue
+  }
+
+  queue = ''
+  closing = ''
+  exdentedClosing = ''
+  content = ''
+  exdentedContent = ''
+
+  /* Eat content. */
+  while (index < length) {
+    character = value.charAt(index)
+    content += closing
+    exdentedContent += exdentedClosing
+    closing = ''
+    exdentedClosing = ''
+
+    if (character !== C_NEWLINE) {
+      content += character
+      exdentedClosing += character
+      index++
+      continue
+    }
+
+    /* Add the newline to `subvalue` if its the first
+     * character.  Otherwise, add it to the `closing`
+     * queue. */
+    if (content) {
+      closing += character
+      exdentedClosing += character
+    } else {
+      subvalue += character
+    }
+
+    queue = ''
+    index++
+
+    while (index < length) {
+      character = value.charAt(index)
+
+      if (character !== C_SPACE) {
+        break
+      }
+
+      queue += character
+      index++
+    }
+
+    closing += queue
+    exdentedClosing += queue.slice(indent)
+
+    if (queue.length >= CODE_INDENT_COUNT) {
+      continue
+    }
+
+    queue = ''
+
+    while (index < length) {
+      character = value.charAt(index)
+
+      if (character !== marker) {
+        break
+      }
+
+      queue += character
+      index++
+    }
+
+    closing += queue
+    exdentedClosing += queue
+
+    if (queue.length < fenceCount) {
+      continue
+    }
+
+    queue = ''
+
+    while (index < length) {
+      character = value.charAt(index)
+
+      if (character !== C_SPACE && character !== C_TAB) {
+        break
+      }
+
+      closing += character
+      exdentedClosing += character
+      index++
+    }
+
+    if (!character || character === C_NEWLINE) {
+      break
+    }
+  }
+
+  subvalue += content + closing
+
+  return eat(subvalue)({
+    type: 'refblock',
+    id: flag || null,
+    value: trim(exdentedContent)
+  })
+}

one/build/rehype-demo.js

@@ -0,0 +1,54 @@
+import visit from 'unist-util-visit'
+import h from 'hastscript'
+
+const RE_DEMO = /^one-demo-[a-f0-9]+/i
+export default function attacher () {
+  return (tree, { data }) => {
+    visit(tree, 'element', (node, index, parent) => {
+      let { tagName } = node
+      let [name] = tagName.match(RE_DEMO) || []
+      if (name) {
+        let { code, desc, browser } = data.demos[name] || {}
+        if (!code) {
+          return
+        }
+
+        let demo = h('one-demo',
+          {
+            browser
+          },
+          [
+            node,
+            h(
+              'template',
+              {
+                slot: 'source'
+              },
+              h(
+                'div',
+                {
+                  'v-pre': true
+                },
+                {
+                  type: 'raw',
+                  value: code
+                }
+              )
+            ),
+            h(
+              'template',
+              {
+                slot: 'desc'
+              },
+              {
+                type: 'raw',
+                value: desc
+              }
+            )
+          ])
+
+        parent.children.splice(index, 1, demo)
+      }
+    })
+  }
+}

one/build/rehype-link.js

@@ -0,0 +1,26 @@
+import { resolve, relative } from 'path'
+import visit from 'unist-util-visit'
+import { RE_LOCALE } from './i18n'
+
+const DOCS_DIR = resolve(__dirname, '../docs')
+
+export default function attacher () {
+  return (tree, { path }) => {
+    let localPath = `/${relative(DOCS_DIR, path)}`
+    let [, locale] = localPath.match(RE_LOCALE) || []
+    if (!locale) {
+      return
+    }
+
+    visit(tree, 'element', node => {
+      let { tagName, properties, properties: { href } } = node
+      if (tagName !== 'a' || href.match(/^\w+:\/\//)) {
+        return
+      }
+
+      if (locale && href.indexOf('/') === 0) {
+        properties.href = `/${locale}${href}`
+      }
+    })
+  }
+}

one/build/rehype-preview-img.js

@@ -0,0 +1,98 @@
+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 => {
+    visit(tree, 'element', (node, index, { children }) => {
+      let { tagName, properties, properties: { src, alt, title, className } } = node
+      if (tagName !== 'img' || src.match(/^\w+:\/\//)) {
+        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')) {
+        removeClass(node, 'preview')
+        let fig = h(`figure${hasClass(node, 'hero') ? '.hero' : ''}`, [
+          h('div.preview', [
+            h('img', {
+              src,
+              alt,
+              title,
+              className,
+              srcset: `${src} 2x`
+            })
+          ]),
+          ...(title || alt) ? [
+            h('figcaption', [
+              ...title ? [
+                h('p.caption', title)
+              ] : [],
+              ...alt ? [
+                h('p.desc', alt)
+              ] : []
+            ])
+          ] : []
+        ])
+        children.splice(index, 1, fig)
+
+        if (hasClass(node, 'bad')) {
+          removeClass(node, 'bad')
+          addClass(fig, 'bad')
+          let prev
+          let prevIndex = index - 1
+          while (true) {
+            prev = children[prevIndex]
+            if (!prev) {
+              break
+            }
+            // skip whitespace-only text nodes
+            if (prev.type === 'text' && RE_SPACE.test(prev.value)) {
+              prevIndex--
+              continue
+            }
+            break
+          }
+          if (prev) {
+            let prevPreview = (prev.children || [])[0]
+            if (prevPreview && hasClass(prevPreview, 'preview')) {
+              let prevImg = (prevPreview.children || [])[0]
+              if (hasClass(prevImg, 'good')) {
+                removeClass(prevImg, 'good')
+                addClass(prev, 'good')
+                children.splice(index - 1, 2, h('div.comparison', [prev, fig]))
+              }
+            }
+          }
+        }
+      } else {
+        properties.src = src
+        properties.srcset = `${src} 2x`
+        if (className && !className.length) {
+          delete properties.className
+        }
+      }
+    })
+  }
+}

one/build/rehype-util-class.js

@@ -0,0 +1,36 @@
+import { remove, get, set } from 'lodash'
+
+const CLASSNAME_PATH = 'properties.className'
+
+export function toggleClass (node, name, add) {
+  let className = get(node, CLASSNAME_PATH)
+  if (!className) {
+    set(node, CLASSNAME_PATH, [])
+    className = node.properties.className
+  }
+
+  if (typeof add === 'boolean') {
+    if (add && !className.includes(name)) {
+      className.push(name)
+    } else if (!add) {
+      remove(className, c => c === name)
+    }
+  } else if (className.includes(name)) {
+    remove(className, c => c === name)
+  } else {
+    className.push(name)
+  }
+}
+
+export function addClass (node, name) {
+  toggleClass(node, name, true)
+}
+
+export function removeClass (node, name) {
+  toggleClass(node, name, false)
+}
+
+export function hasClass (node, name) {
+  let className = get(node, CLASSNAME_PATH, [])
+  return className.includes(name)
+}

one/build/remark-custom.js

@@ -0,0 +1,30 @@
+import tokenizer from './customBlock'
+import visit from 'unist-util-visit'
+import { render } from './page'
+
+const NAME = 'customblock'
+
+export default function attacher () {
+  let proto = this.Parser.prototype
+
+  proto.blockTokenizers[NAME] = tokenizer
+  proto.interruptParagraph.push([NAME])
+  proto.interruptList.push([NAME])
+  proto.interruptBlockquote.push([NAME])
+
+  let methods = proto.blockMethods
+  methods.unshift(NAME)
+
+  return (tree, file) => {
+    let { path } = file
+
+    visit(tree, NAME, ({ className, value }, index, parent) => {
+      let { contents } = render(value, path, {})
+      className = className ? `${className} custom-block` : 'custom-block'
+      parent.children.splice(index, 1, {
+        type: 'html',
+        value: `<div class="${className}">${contents}</div>`
+      })
+    })
+  }
+}

one/build/remark-demo.js

@@ -0,0 +1,125 @@
+import { resolve, relative, dirname } from 'path'
+import { existsSync } from 'fs'
+import visit from 'unist-util-visit'
+import { readFileSync, hash } from './util'
+import { render } from './page'
+import { parseComponent } from 'vue-template-compiler'
+import { escape } from 'lodash'
+import { RE_LOCALE } from './i18n'
+
+const DOCS_DIR = resolve(__dirname, '../docs')
+
+export default function attacher () {
+  return (tree, file) => {
+    let { path, data: fileData } = file
+    visit(tree, 'shortcode', node => {
+      let {
+        identifier,
+        data: nodeData,
+        attributes: { src, browser } = {}
+      } = node
+      if (identifier !== 'demo' || !src) {
+        return
+      }
+
+      if (!nodeData) {
+        node.data = nodeData = {}
+      }
+      if (!fileData) {
+        file.data = fileData = {}
+      }
+      if (!fileData.demos) {
+        fileData.demos = {}
+      }
+      if (!fileData.deps) {
+        fileData.deps = {}
+      }
+
+      let demoPath =
+        src.indexOf('/') === 0
+          ? resolve(DOCS_DIR, src.slice(1))
+          : resolve(dirname(path), src)
+
+      if (!existsSync(demoPath)) {
+        console.warn(`Demo not found at '${demoPath}'`)
+        return
+      }
+
+      fileData.deps[demoPath] = true
+
+      let name = getComponentName(demoPath)
+      nodeData.hName = name
+
+      let localPath = `/${relative(DOCS_DIR, path)}`
+      let [, locale] = localPath.match(RE_LOCALE) || []
+
+      let { content, doc } = extractDoc(demoPath, { locale })
+      fileData.demos[name] = {
+        path: demoPath,
+        browser,
+        code: render('```vue\n' + content + '\n```', demoPath).contents,
+        desc: render(doc, demoPath).contents
+      }
+    })
+  }
+}
+
+function getComponentName (path) {
+  return `one-demo-${hash(path)}`
+}
+
+function extractDoc (file, { locale }) {
+  let content = readFileSync(file)
+  let vueComponent = parseComponent(content)
+  let { customBlocks } = vueComponent
+  let i = customBlocks.findIndex(({ type, attrs }) => {
+    return ((locale && locale === attrs.locale) || !locale) && type === 'docs'
+  })
+
+  let doc = null
+  if (i !== -1) {
+    doc = customBlocks[i].content
+  }
+
+  return {
+    content: stringifyVueComponent(vueComponent),
+    doc
+  }
+}
+
+function stringifyVueComponent (component) {
+  let content = []
+  let { template, script, styles } = component
+  if (template) {
+    content.push(
+      `<template${stringifyAttrs(template.attrs)}>${
+        template.content
+      }</template>`
+    )
+  }
+  if (script) {
+    content.push(
+      `<script${stringifyAttrs(script.attrs)}>${script.content}</script>`
+    )
+  }
+  styles.filter(({ attrs }) => !attrs.docs).forEach(style => {
+    content.push(
+      `<style${stringifyAttrs(style.attrs)}>${style.content}</style>`
+    )
+  })
+  return content.join('\n\n')
+}
+
+function stringifyAttrs (attrs) {
+  let result = Object.keys(attrs)
+    .map(key => {
+      let val = attrs[key]
+      if (typeof val !== 'boolean') {
+        return `${escape(key)}="${escape(val)}"`
+      }
+      return val ? `${escape(key)}` : ''
+    })
+    .join(' ')
+
+  return result ? ` ${result}` : ''
+}

one/build/remark-details.js

@@ -0,0 +1,39 @@
+import tokenizer from './details'
+import visit from 'unist-util-visit'
+import { escape } from 'lodash'
+import { render } from './page'
+
+const NAME = 'details'
+
+export default function attacher () {
+  let proto = this.Parser.prototype
+
+  proto.blockTokenizers[NAME] = tokenizer
+  proto.interruptParagraph.push([NAME])
+  proto.interruptList.push([NAME])
+  proto.interruptBlockquote.push([NAME])
+
+  let methods = proto.blockMethods
+  methods.unshift(NAME)
+
+  return (tree, file) => {
+    let { path, data } = file
+
+    if (!data) {
+      file.data = data = {}
+    }
+    if (!data.components) {
+      data.components = {}
+    }
+
+    visit(tree, NAME, ({ summary, value }, index, parent) => {
+      data.components['OneDetails'] = true
+
+      let { contents } = render(value, path, data)
+      parent.children.splice(index, 1, {
+        type: 'html',
+        value: `<one-details summary="${escape(summary)}">${contents}</one-details>`
+      })
+    })
+  }
+}

one/build/remark-extract-frontmatter.js

@@ -0,0 +1,16 @@
+import visit from 'unist-util-visit'
+import remove from 'unist-util-remove'
+import yaml from 'js-yaml'
+
+export default function attacher () {
+  return (tree, file) => {
+    let { data } = file
+
+    visit(tree, 'yaml', node => {
+      data.meta = yaml.safeLoad(node.value)
+      return visit.EXIT
+    })
+
+    remove(tree, ['yaml', 'toml'])
+  }
+}

one/build/remark-ref.js

@@ -0,0 +1,49 @@
+import tokenizer from './refBlock'
+import visit from 'unist-util-visit'
+import remove from 'unist-util-remove'
+import { render } from './page'
+
+const NAME = 'refblock'
+const RE_REF = /^\^([-_a-z0-9]+)/i
+
+export default function attacher () {
+  let proto = this.Parser.prototype
+
+  proto.blockTokenizers[NAME] = tokenizer
+  proto.interruptParagraph.push([NAME])
+  proto.interruptList.push([NAME])
+  proto.interruptBlockquote.push([NAME])
+
+  let methods = proto.blockMethods
+  methods.unshift(NAME)
+
+  return (tree, file) => {
+    let { path, data } = file
+
+    if (!data) {
+      file.data = data = {}
+    }
+    if (!data.refs) {
+      data.refs = {}
+    }
+
+    visit(tree, NAME, ({ id, value }) => {
+      let { contents } = render(value, path, data)
+      data.refs[id] = contents
+    })
+    remove(tree, NAME)
+
+    visit(tree, 'linkReference', (node, index, parent) => {
+      let { identifier } = node
+      let [match, id] = identifier.match(RE_REF)
+      if (!match || !id || !data.refs[id]) {
+        return
+      }
+
+      parent.children.splice(index, 1, {
+        type: 'html',
+        value: data.refs[id]
+      })
+    })
+  }
+}

one/build/util.js

@@ -0,0 +1,29 @@
+import { readFileSync as fsReadFileSync, writeFileSync as fsWriteFileSync } from 'fs'
+import { dirname } from 'path'
+import mkdirp from 'mkdirp'
+import crypto from 'crypto'
+
+export function readFileSync (file) {
+  return fsReadFileSync(file, 'utf8')
+}
+
+export function writeFileSync (file, content) {
+  mkdirp.sync(dirname(file))
+  fsWriteFileSync(file, content, 'utf8')
+}
+
+export function copyFileSync (src, dest) {
+  mkdirp.sync(dirname(dest))
+  writeFileSync(dest, readFileSync(src))
+}
+
+const RE_EXT = /\.([^.]+)$/
+export function replaceExtSync (file, ext) {
+  return file.replace(RE_EXT, `.${ext}`)
+}
+
+export function hash (path) {
+  let hash = crypto.createHash('sha1')
+  hash.update(path)
+  return hash.digest('hex').substring(0, 7)
+}

one/build/watch.js

@@ -0,0 +1,33 @@
+import { resolve } from 'path'
+import { debounce } from 'lodash'
+import chokidar from 'chokidar'
+import { generatePages } from './generator'
+
+let watcher = chokidar.watch(resolve(__dirname, '../docs'), {
+  ignoreInitial: true
+})
+
+watcher
+  .on('all', debounce(generate, 1000))
+
+function generate (type, path) {
+  switch (type) {
+    case 'add':
+      generatePages(path, { dir: false, remove: false })
+      break
+    case 'addDir':
+      generatePages(path, { dir: true, remove: false })
+      break
+    case 'change':
+      generatePages(path)
+      break
+    case 'unlink':
+      generatePages(path, { dir: false, remove: true })
+      break
+    case 'unlinkDir':
+      generatePages(path, { dir: true, remove: true })
+      break
+    default:
+      break
+  }
+}

one/docs/advanced/custom-rules.md

@@ -0,0 +1,89 @@
+# 自定义校验规则
+
+对于多值校验，[表单 › validators 属性](../components/form#属性)提供了比较完善的功能来实现自定义校验。对于单值校验，`Field` 组件内置了 7 种常见规则，具体参考[表单项 › rule 属性](../components/field#属性)。如果无法覆盖需求，`VEUI` 校验规则模块允许你添加自定义规则。
+
+## 示例
+
+```js
+import ruleManager from 'veui/manager/rule'
+ruleManager.addRule('range', {
+  validate (value, ruleValue) {
+    // 仅实现大小校验部分
+    let range = value.split('-')
+    return +range[0] >= ruleValue.floor && +range[1] <= ruleValue.ceil
+  },
+  message: '范围值必须在限定区间内',
+  priority: 100
+})
+```
+
+```html
+<veui-field
+  :rules=[{
+    triggers: 'change'
+    name: 'range',
+    value: {
+      ceil: 100,
+      floor: 50
+    }
+  }]
+  ...
+>...</veui-field>
+```
+
+## API
+
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `validate` | `function(value: *, ruleValue: ?*=)` | 校验逻辑，`value` 为 `Field` 需要校验的值，`ruleValue` 可选，根据规则需要添加，表示规则的限定值。 |
+| `message` | `function|string` | [^message] |
+| `priority` | `number` | [^priority] |
+
+^^^message
+默认出错信息。
+
+若类型为 `string`，可以通过 `{ruleValue}` 引用 `ruleValue`、`{value}` 引用 `value`。例如：
+
+```js
+let minLengthRule = {
+  validate (value, ruleValue) {
+    return !isEmpty(value) ? val.length >= ruleValue : true
+  },
+  message: '字符长度不能短于 {ruleValue}，当前长度 {value}',
+  priority: 100
+}
+```
+
+若类型为 `function`，参数为 `(ruleValue: ?*=, value: *)`。例如：
+
+```js
+let minLengthRule = {
+  validate (value, ruleValue) {
+    return !isEmpty(value) ? val.length >= ruleValue : true
+  },
+  message (ruleValue, value) {
+    return `字符长度不能短于${ruleValue}，当前长度${value}`
+  },
+  priority: 100
+}
+```
+
+:::tip
+如果需要支持运行时切换语言，`message` 必须使用 `function` 类型。
+:::
+^^^
+
+^^^priority
+规则优先级。数值低优先级高。
+
++++目前内置的优先级
+| 名称 | 优先级 |
+| -- | -- | -- |
+| `required` | `0` |
+| `numeric` | `10` |
+| `pattern` | `50` |
+| `maxLength` | `100` |
+| `minLength` | `100` |
+| `max` | `200` |
+| `min` | `200` |
++++

one/docs/advanced/global-config.md

@@ -0,0 +1,61 @@
+# 全局配置
+
+VEUI 中很多组件都定义了全局配置项，允许开发者在使用时全局配置某个组件的行为细节。
+
+例如，`Uploader` 组件可以统一配置上传模式，用户可以根据项目前后端接口、需要支持浏览器版本的具体情况选择使用 iframe 回调方式还是 XHR2 方式传递数据，也可以统一配置远端数据格式的转换函数。
+
+VEUI 全局配置项可以通过 `veui/managers/config` 模块进行覆盖：
+
+```js
+import config from 'veui/managers/config'
+
+config.set('uploader.requestMode', 'iframe')
+config.set('uploader.convertResponse', ({ code, error, result }) => {
+  /**
+   * Transform from
+   *
+   * {
+   *   code: 0,
+   *   error: '...',
+   *   result: {
+   *     url: '...'
+   *   }
+   * }
+   *
+   * to
+   *
+   * {
+   *   success: true,
+   *   message: '...',
+   *   src: '...'
+   * }
+   */
+  return {
+    success: code === 0,
+    src: error ? null : result.url,
+    message: error || null
+  }
+})
+```
+
+如果需要一次修改同一个组件的多项设置，可以使用如下写法：
+
+```js
+import config from 'veui/managers/config'
+
+config.set({
+  requestMode: 'iframe',
+  convertResponse: data => data
+}, 'uploader')
+```
+
+`config.set()` 方法参数可为如下形式：
+
+* `(key: string, value: *, namespace: string)`
+* `(values: Object<{key: string, value: *}>, namespace: string)`
+
+当提供了 `namespace` 参数时，最终生成的配置项键名为 <code>\`${namespace}.${key}\`</code>。
+
+除此以外，还提供了相同参数列表的 `config.defaults()` 方法，区别在于当需要在配置项中写入的键值已经存在，则不会覆盖。
+
+每个组件、指令等支持的全局配置请查看对应组件、指令的详情页。

one/docs/advanced/overlay.md

@@ -0,0 +1,124 @@
+# 浮层管理
+
+在 VEUI 中，有大量组件使用到了浮层功能：
+
+* 各种类型的弹框：[对话框](../components/dialog)、[警告弹框](../components/alert-box)等；
+* [下拉选择](../components/select)；
+* ……
+
+针对这些组件，我们抽离了具备如下功能的浮层模块：
+
+* 能够浮于页面上所有普通元素之上；
+* 能够进行层叠顺序管理；
+* 能够基于指定元素定位。
+
+## 层叠覆盖
+
+为了避免浮层被上层 `overflow: hidden` 的元素意外遮盖，我们将浮层根元素直接置于 `<body>` 下统一管理。
+
+在[浮层组件](../components/overlay)中，`.veui-overlay-box` 对应了浮层根元素，该元素在组件初始化的时候，会被放置到 `<body>` 之下，组件销毁的时候，会被移除掉。
+
+## 层叠顺序管理
+
+在将浮层根元素置于 `<body>` 下后，原有的层级嵌套关系会丢失，同时也无法通过原生的层叠上下文机制来控制浮层的层叠顺序。比如：
+
+* 某个对话框组件 A 上有一个下拉选择组件 B，那么 B 组件浮层应该位于 A 组件浮层之上。
+* 警告框浮层应该位于普通对话框浮层之上。
+
+基于上述限制，浮层模块实现了自己的层叠顺序管理机制。整个浮层层级嵌套关系，是通过一棵树来表达的：
+
+<img class="preview hero" src="/images/development/advanced/overlay-tree.png">
+
+树中每一个蓝色节点都对应关联到具体的[浮层组件](../componets/overlay)实例。针对上图，树的构造顺序可以是：
+
+1. 弹出“对话框 1”，创建一个“对话框 1”节点，根据节点权重信息创建一个分组，然后将分组挂在 root 节点之下。
+2. 弹出“对话框 2”，创建一个“对话框 2”节点，发现已经存在相同权重的分组，就直接将“对话框 2”节点放置在该分组的末尾位置。
+3. 在“对话框 2”中实例化一个“下拉选择 1”组件实例，由于“对话框 2”组件实例是“下拉选择 1”组件实例的父级，因此对应的浮层节点也应当具备父子关系，因此按照类似于“步骤 1”的顺序在“对话框 2”节点下生成分组及“下拉选择 1”节点。
+4. 此时由于程序运行出现了故障，弹出了“警告弹框 1”，由于“警告弹框”类型的组件相对于“对话框”组件具备更高的层级权重，因此在 root 之下新建了一个靠右的分组，并将生成的“警告弹框 1”节点置于分组末尾。
+
+有了树之后，就会按照深度优先的遍历顺序生成每个节点的 `z-index` 值。
+
+其中，基准 `z-index` 值可以通过全局配置对象进行配置：
+
+```js
+import config from 'veui/managers/config'
+
+config.set('overlay.baseZIndex', 200)
+```
+
+:::warning
+必须在[浮层组件](../components/overlay)引入之前设置基准 `z-index`，不然不会生效。
+:::
+
+可以针对组件类型，甚至组件实例粒度设置层叠优先级，层叠优先级值越大，最终生成的 `z-index` 值就越大。具有相同层叠优先级的同级组件实例，越靠后实例化的组件，生成的 `z-index` 值越大。
+
+浮层组件、对话框组件、弹框组件等提供了 `priority` 属性，用于自定义组件实例的层叠优先级：
+
+```html
+<veui-dialog :priority="300"/>
+```
+
+一些比较特殊的组件，会提供基于组件类型粒度的层叠优先级配置：
+
+| 组件 | 配置字段 | 默认值 | 修改配置示例 |
+| -- | -- | -- | -- |
+| 警告弹框 | `alertbox.priority` | `100` | [^alert-box] |
+| 确认弹框 | `confirmbox.priority` | `100` | [^confirm-box] |
+| 输入弹框 | `promptbox.priority` | `100` | [^prompt-box] |
+
+^^^alert-box
+```js
+import config from 'veui/managers/config'
+
+config.set('alertbox.priority', 100)
+```
+^^^
+
+^^^confirm-box
+```js
+import config from 'veui/managers/config'
+
+config.set('confirmbox.priority', 100)
+```
+^^^
+
+^^^prompt-box
+```js
+import config from 'veui/managers/config'
+
+config.set('promptbox.priority', 100)
+```
+^^^
+
+总结起来，确定某个浮层系组件实例的层叠优先级的逻辑流程为：
+
+* 如果能够设置组件实例级别的层叠优先级，并且设置了，那么就使用这个层叠优先级值，否则进入下一步；
+* 如果能够设置组件类型级别的层叠优先级，并且设置了，那么就使用这个层叠优先级值，否则进入下一步；
+* 使用默认的层叠优先级值：`1`。
+
+## 定位
+
+VEUI 中，浮层支持两种定位方式：
+
+* 在页面范围内，以坐标值的形式进行定位；
+* 相对于某个元素，指定偏移和变换规则进行定位。
+
+以坐标方式定位时，需要自己写 CSS 进行控制（浮层模块内部只会生成浮层根元素的 `z-index` 值）。
+
+相对元素定位时，可以通过[浮层组件](../components/overlay)的 `options` 属性描述偏移和变换规则。由于目前内部采用 [Tether](http://tether.io/) 实现，因此完整的配置项可以参考 [Tether 官网](http://tether.io/#options)。同时，也支持一些常见场景的简化配置：<code>{ position: &#0096;${side}-${align}&#0096; }</code>，`side` 表示浮层根元素位于目标元素哪一边（`top`/`right`/`bottom`/`left`），`align` 表示对齐方式（`start`/`end`）。其中 `side` 是必须的，`align` 不传表示居中。推荐尽量使用简化的配置。
+
+## 样式
+
+由于浮层根元素被手动放置到 `<body>` 元素之下了，要设置浮层内容的样式，就需要给浮层根元素指定 `class`。所有浮层系组件都支持 `overlay-class` 属性，通过该属性为浮层根元素设置 `class`：
+
+```vue
+<template>
+  <veui-dialog overlay-class="my-dialog-overlay"/>
+<template>
+
+<style>
+.my-dialg-overlay {
+  /* 自定义浮层样式 */
+}
+</style>
+```

one/docs/advanced/theming.md

@@ -0,0 +1,134 @@
+# 主题
+
+VEUI 的组件和主题包是完全解耦的。组件库中不含有任何样式代码，每个组件的样式都需要主题包中对应的样式文件来提供。
+
+为了方便在按需引入的同时不需要手动引入每个组件的样式代码，我们提供了 `veui-loader` 来完成通过配置自动将依赖的样式文件注入组件，详情请参考 `veui-loader` 的[相关介绍](../getting-started/veui-loader)。
+
+## 创建自定义主题包
+
+veui-loader 为 VEUI 注入依赖时，同时支持注入 script 类型及 style 类型的模块。所以主题包中可以为每个组件提供这两种类型的主题配置。
+
+### 自定义样式
+
+:::warning
+注意，主题包样式对 VEUI 组件的 DOM 结构会有依赖。
+:::
+
+为每个组件提供完整的样式，可以使用任何预处理语言。每个组件具体提供的类名及选择器可以参考 `veui-theme-dls` 中的实现。
+
+```less
+.veui-button {
+  /* ... */
+}
+```
+
+### 自定义图标
+
+VEUI 的 `Icon` 组件封装了 [Vue-Awesome](https://justineo.github.io/vue-awesome/demo/) 来输出内联 SVG 图标，无法直接在样式代码中指定，需要通过 script 模块进行注册。每个组件都定义了语义明确的图标接口，我们需要做的只是在全局配置中为组件注入相应的图标名称映射并引入对应的图标模块：
+
+```js
+import config from 'veui/managers/config'
+import '../icons/angle-up-small'
+import '../icons/angle-down-small'
+
+config.defaults({
+  icons: {
+    expand: 'angle-down-small',
+    collapse: 'angle-up-small'
+  }
+}, 'select')
+```
+
+除了 `veui-theme-dls` 自带的图标外，目前可以使用的图标包还有：
+
+* [`vue-awesome/icons`](https://justineo.github.io/vue-awesome/demo/)：Vue-Awesome 自带 [FontAwesome](https://fontawesome.com/) 图标包
+* [`vue-awesome-material-icons/icons`](https://justineo.github.io/vue-awesome-material-icons/demo/)：同样基于 Vue-Awesome 的 [Material Icons](https://material.io/tools/icons) 图标包
+
+### 预设样式及自定义配置
+
+VEUI 中各个组件的可切换的预设样式是通过为主题包提供可扩展的 `ui` 配置实现的。
+
+新增一个预设样式 `foo` 只需要在样式文件中添加 `[ui~="foo"]` 对应的样式并在使用组件时添加对应的 `ui="foo"` 声明即可完成：
+
+```less
+.veui-select {
+  /* ... */
+
+  &[ui~="foo"] {
+    color: #f00;
+  }
+}
+```
+
+```html
+<veui-select ui="foo">...</veui-select>
+```
+
+一个组件也可以同时应用多个预设样式：
+
+```html
+<veui-select ui="foo bar">...</veui-select>
+```
+
+但如果我们想将预设样式定义得更完善一些，比如 `foo` 与 `bar` 是组件的两种不可同时使用的预设样式怎么办呢？比如 `small` 和 `large` 样式都会自定义组件的尺寸，是互斥的，我们就需要通过在全局配置中为组件注入更详细的 `ui` 配置来实现。
+
+`ui` 字段下每个属性名都是需要声明的预设样式名称，其值的类型为：`{ values, boolean, inherit }`。
+
+字段详情：
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `values` | `Array<string>` | - | 预设 `ui` 属性的可选值。 |
+| `boolean` | `boolean` | `false` | 预设 `ui` 属性是否为布尔型。 |
+| `inherit` | `boolean` | `false` | 预设 `ui` 属性值是否会被子组件继承。 |
+
+以 `Select` 组件为例：
+
+```js
+import config from 'veui/managers/config'
+
+config.defaults({
+  ui: {
+    size: {
+      values: ['large', 'small', 'tiny', 'micro'],
+      inherit: true
+    },
+    style: {
+      values: ['alt']
+    }
+  }
+}, 'select')
+```
+
+在上面这个例子中，我们定义了两个 `ui` 属性：`size` 和 `style`。它们都是枚举类型，其中 `size` 值可被子组件继承。最终调用 `Select` 组件时，可以这样启用预设样式：
+
+```html
+<veui-select ui="alt small">...</veui-select>
+```
+
+当然，我们也可以完全不定义 `ui` 属性的详情，这时 VEUI 会将用户书写的 `ui` 属性原样输出，不会进行去重、同属性的属性值冲突检测、继承等特殊处理。
+
+:::warning
+由于 `ui` 属性最后会将值打平输出到 DOM 元素上，所以各个属性的值不能冲突。
+:::
+
+### 指定组件内部组件的预设样式
+
+有一些组件由多个其它组件组合而成，此时我们可能会需要全局指定内部特定部件的预设样式。比如在 `veui-theme-dls` 中，`Dialog` 中的取消按钮默认采用默认样式，而如果在其它主题中我们可能会想重置为 `link` 样式。此时可以使用全局配置修改组件的 `parts` 映射。
+
+```js
+import config from 'veui/managers/config'
+
+config.defaults({
+  parts: {
+    ok: 'primary',
+    cancel: 'link'
+  }
+}, 'select')
+```
+
+## 主题包列表
+
+* [veui-theme-dls](https://github.com/ecomfe/veui/tree/dev/packages/veui-theme-dls)：基于 DLS 的 VEUI 2.x 主题
+* [veui-theme-blue](https://github.com/ecomfe/veui-theme-blue)：基于 Theme Blue 的 VEUI 1.x 主题
+* [veui-theme-spectre](https://justineo.github.io/veui-theme-spectre/demo/)：基于 Spectre.css 的 VEUI 1.x 主题

one/docs/components/accordion.md

@@ -0,0 +1,61 @@
+# Accordion <small>手风琴面板</small>
+
+:::tip
+`Accordion` 组件需要内联 [`Collapse`](./collapse) 组件使用。
+:::
+
+## 示例
+
+### 尺寸
+
+可选的尺寸 `ui` 属性值：`s`/`m`。
+
+[[ demo src="/demo/accordion/size.vue" ]]
+
+### 允许多个展开
+
+可使用 `multiple` 属性来允许多个面板同时展开。
+
+[[ demo src="/demo/accordion/multiple.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `multiple` | `boolean=` | `false` | 是否允许多个子面板同时展开。 |
+| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
+| `expanded` | `string|Array<string>` | - | [^expanded] |
+
+^^^expanded
+:::badges
+`.sync`
+:::
+
+已展开的折叠面板标识，对应于内联 `Collapse` 组件的 `name` 属性。当 `multiple` 为 `true` 时，为折叠面板标识的数组。
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 内容区，用来内联 `Collapse` 组件。 |
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `toggle` | [^toggle] |
+
+^^^toggle
+点击内部折叠面板标题区触发展开/收起时触发。回调参数为 `(expand: boolean, name: string, expanded)`。
+
++++参数详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `expand` | `boolean` | 是否展开。 |
+| `name` | `string` | 被切换的折叠面板标识。 |
+| `expanded` | `string|Array<string>` | 当前所有被展开的折叠面板标识。 |
++++
+^^^

one/docs/components/alert-box.md

@@ -0,0 +1,69 @@
+# AlertBox <small>警告弹框</small>
+
+## 示例
+
+### 类型
+
+`AlertBox` 有三种类型，分别是 `info`、`success` 和 `error`，可以通过 `type` 属性指定不同的类型。
+
+[[ demo src="/demo/alert-box/type.vue" ]]
+
+### 标题
+
+可以通过 `title` 属性或 `title` 插槽自定义警告弹框的标题。
+
+[[ demo src="/demo/alert-box/title.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `open` | `boolean` | `false` | [^open] |
+| `type` | `string=` | `'success'` | [^type] |
+| `title` | `string=` | - | 标题。 |
+| `overlay-class` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 `overlay-class` 属性。 |
+
+^^^open
+:::badges
+`.sync`
+:::
+
+是否显示警告弹框。
+^^^
+
+^^^type
+警告框类型。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `info` | 信息提示样式。 |
+| `success` | 成功样式。 |
+| `error` | 错误样式。 |
++++
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 内容区。 |
+| `title` | 标题区。若同时指定了 `title` 属性和 `title` 插槽，以后者为准。 |
+| `foot` | 底部区域，默认会展示一个“知道了”按钮。 |
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `ok` | 点击“知道了”按钮触发。 |
+| `afterclose` | 浮层关闭后触发。如果样式主题提供了退出动画，将在退出动画完毕后触发。 |
+
+### 图标
+
+| 名称 | 描述 |
+| -- | -- |
+| `info` | 普通信息。 |
+| `success` | 成功状态。 |
+| `error` | 错误状态。 |

one/docs/components/alert.md

@@ -0,0 +1,92 @@
+# Alert <small>提示</small>
+
+## 示例
+
+### 类型
+
+`Alert` 有四种类型，分别是 `success`、`info`、`warning` 和 `error`，可以通过 `type` 属性指定不同的类型。
+
+[[ demo src="/demo/alert/type.vue" ]]
+
+### 多消息切换
+
+可以将 `message` 属性指定为数组，来实现展现多条可切换的消息提示。
+
+[[ demo src="/demo/alert/multiple.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `type` | `string=` | `'success'` | [^type] |
+| `title` | `string` | - | 消息标题。 |
+| `message` | `string|Array<string>` | - | 消息内容，当类型为数组时会显示多条数据并支持切换上一条/下一条。 |
+| `closable` | `boolean=` | `false` | 是否允许关闭。 |
+| `open` | `boolean=` | `true` | [^open] |
+| `index` | `number=` | `0` | [^index] |
+
+^^^type
+警告框类型。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `info` | 信息提示样式。 |
+| `success` | 成功样式。 |
+| `warning` | 警告样式。 |
+| `error` | 错误样式。 |
++++
+^^^
+
+^^^open
+:::badges
+`.sync`
+:::
+
+是否显示消息。
+^^^
+
+^^^index
+:::badges
+`.sync`
+:::
+
+在有多条数据时，当前显示的消息的索引。
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | [^scoped-slot-default] |
+| `title` | 消息标题的内容区域。 |
+| `extra` | 消息之后的额外内容区域。 |
+| `content` | 整个消息区域，包括状态图标、切换按钮、关闭按钮等。 |
+
+^^^scoped-slot-default
+消息内容区域。
+
+默认内容：消息文本。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `message` | `string` | 消息文本。 |
+| `index` | `number=` | 当有多条消息时，当前消息的索引值。 |
+| `close` | `function` | 用于关闭提示。 |
++++
+^^^
+
+### 图标
+
+| 名称 | 描述 |
+| -- | -- |
+| `success` | 成功消息。 |
+| `warning` | 警告消息。 |
+| `info` | 信息消息。 |
+| `error` | 错误消息。 |
+| `prev` | 上一条。 |
+| `next` | 下一条。 |
+| `close` | 关闭。 |

one/docs/components/anchor.md

@@ -0,0 +1,64 @@
+# Anchor <small>锚点</small>
+
+## 示例
+
+### 容器与吸附
+
+使用 `container` 属性设置 `Anchor` 的容器，使用 `sticky` 属性来控制是否在滚动出容器时进行吸附。
+
+[[ demo src="/demo/anchor/sticky.vue" ]]
+
+### 指定偏移
+
+`target-offset` 用来控制锚点滚动到容器何处开始处于激活状态。
+
+`sticky-offset` 用来控制 `Anchor` 处于容器何处时开始吸附。
+
+[[ demo src="/demo/anchor/offset.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `items` | `Array<{value, label, children}>` | `[]` | [^items] |
+| `sticky` | `boolean=` | `false` | 是否有吸附效果。 |
+| `container` | `string|HTMLElement|Window=` | - | `Anchor` 吸附与判断锚点激活所参考的容器。 |
+| `target-offset` | `string|number=` | `0` | 当某个锚点处于到容器的 `target-offset` 位置，那么对应的锚点链接处于激活状态。 |
+| `sticky-offset` | `string|number=` | `0` | 对于 sticky `Anchor` 而言，当容器滚动到 `sticky-offset` 位置，那么该 `Anchor` 开始吸附。 |
+
+^^^items
+数据源数组，每个项目类型为 `{label, value, children, ...}`。
+
++++字段详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 节点的文字描述。 |
+| `value` | `string` | 节点对应的值，一般是页内 hash， 如 `#button` 。 |
+| `children` | `Array<Object>=` | 节点的子节点数组，数组项类型同 `items` 数组项。 |
++++
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `item` | [^scoped-slot-item] |
+| `item-label` | [^scoped-slot-item-label] |
+
+^^^scoped-slot-item
+渲染每个锚点链接。
+
+默认内容：锚点链接。
+
+作用域参数参见 `items` 属性详情。
+^^^
+
+^^^scoped-slot-item-label
+渲染每个锚点链接的文本。
+
+默认内容：锚点链接的描述文本 `label`。
+
+作用域参数参见 `item` 插槽。
+^^^

one/docs/components/autocomplete.md

@@ -0,0 +1,91 @@
+# Autocomplete <small>自动完成</small>
+
+## 示例
+
+[[ demo src="/demo/autocomplete/normal.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `datasource` | `Array<string|Object>=` | `[]` | [^datasource] |
+| `value` | `*` | - | [^prop-value] |
+| `match` | `function(string|Object, string)=: boolean` | - | 自定义搜索逻辑。 |
+| `strict` | `boolean=` | `false` | 建议下拉面板关闭时，若输入值没有完全匹配建议值，那么会清空输入值。 |
+| `suggest-trigger` | `string|Array<string>=` | `'input'` | 触发建议下拉面板的时机，可用值有：`'input'`、`'focus'`。 |
+| `placeholder` | `string=` |  | 输入占位符。 |
+| `select-on-focus` | `boolean=` | `false` | 聚焦时是否自动选中输入框文本。 |
+| `composition` | `boolean=` | `false` | 是否感知输入法输入过程的值。 |
+| `clearable` | `boolean=` | `false` | 是否显示清除按钮。 |
+| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
+| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
+
+^^^datasource
+数据源数组，项目为 `Object` 时字段为 `{label, value, children, ...}`。
+
++++字段详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 节点的文字描述。 |
+| `value` | `string` | 节点对应的值，一般是页内 hash， 如 `#button` 。 |
+| `children` | `Array<Object>=` | 节点的子节点数组，数组项类型同 `items` 数组项。 |
++++
+^^^
+
+^^^prop-value
+:::badges
+`v-model`
+:::
+
+当前选中的值。
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `suggestions` | [^scoped-slot-suggestions] |
+| `option-label` | [^scoped-slot-option-label] |
+
+^^^scoped-slot-suggestions
+
+下拉建议面板插槽。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `datasource` | `Array<string|Object>` | 数据源，类型同 `datasource` 属性。 |
+| `keyword` | `string` | 搜索关键词。 |
++++
+^^^
+
+^^^scoped-slot-option-label
+
+下拉面板中选项插槽。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 用来显示的节点文案，不存在则取 `value`。 |
+| `value` | `string` | 用来实际选中的值。 |
+| `matches` | `Array<{text: string, matched: boolean}>` | 匹配情况，一个节点可能被切分成多断文本，`text` 表示该段文本， `matched` 表示该段文本是否匹配。 |
++++
+^^^
+
+### 事件
+
+| 名称  | 描述 |
+| -- | -- |
+| input | [^event-input] |
+| suggest | 采纳建议时触发，参数是当前值。 |
+| clear | 清除当前值时触发。 |
+
+^^^event-input
+:::badges
+`v-model`
+:::
+
+当在 `input` 中输入或下拉面板中选值会触发该事件，参数是当前输入值或选中时的选中项目的 `value`。
+^^^

one/docs/components/badge.md

@@ -0,0 +1,52 @@
+# Badge <small>徽标</small>
+
+## 示例
+
+### 文字徽标
+
+徽标内容可以是纯文本。
+
+[[ demo src="/demo/badge/text.vue" ]]
+
+### 数字徽标
+
+徽标内容也可以是数字，超过最大值时可以显示为*最大值+*。
+
+[[ demo src="/demo/badge/number.vue" ]]
+
+### 圆点徽标
+
+不提供插槽内容时，徽标将以圆点样式显示。
+
+[[ demo src="/demo/badge/dot.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `type` | `string=` | `'error'` | [^type] |
+| `value` | `string|number` | - | 徽标内容值。为 `number` 类型值时，会受 `max` 属性限制。为 `string` 类型时，`max` 会被忽略。 |
+| `max` | `number=` | `badge.max` | 徽标数值的最大值，当 `value` 超过此值时，徽标内容会显示为 `{max}+`。当 `value` 为 `string` 时会被忽略。 |
+| `hidden` | `boolean=` | `false` | 是否处于隐藏状态。 |
+
+^^^type
+徽标状态类型。自带样式的可选值如下。使用其它值时需要自行定义 `.veui-badge-{type}` 的样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `info` | 信息提示样式。 |
+| `success` | 成功样式。 |
+| `warning` | 警告样式。 |
+| `error` | 错误样式。 |
+| `aux` | 辅助样式。 |
++++
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 需要显示徽标的目标内容。 |

one/docs/components/breadcrumb-item.md

@@ -0,0 +1,48 @@
+# BreadcrumbItem <small>面包屑项</small>
+
+:::tip
+`BreadcrumbItem` 组件需要在 [`Breadcrumb`](./breadcrumb) 组件内使用。
+:::
+
+## 示例
+
+见 [`Breadcrumb` 示例](./breadcrumb#示例)。
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| --- | --- | --- | --- |
+| `to` | `string|Object` | - | 点击面包屑项之后要跳转到的地址。见 [`Link`](./link#属性) 组件的同名属性。 |
+| `type` | `string` | `'link'` | [^link] |
+| `native` | `boolean` | `false` | 当值为 `true` 且指定了 `to` 时，会直接使用原生 `<a>` 元素，`to` 值会被设置到 `<a>` 标签的 `href` 属性上。 |
+
+^^^link
+面包屑项的类型。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `link` | 超链接样式。 |
+| `text` | 文本样式。 |
++++
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 填充面包屑项的正文内容区。 |
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `redirect` | 点击 `type` 为 `link` 的项目时将触发该事件，回调参数为 `(event: Event)`，直接透传[原生点击事件对象](https://developer.mozilla.org/zh-CN/docs/Web/Events/click)。 |
+
+### 图标
+
+| 名称 | 描述 |
+| -- | -- |
+| `separator` | 分隔符。 |

one/docs/components/breadcrumb.md

@@ -0,0 +1,114 @@
+# Breadcrumb <small>面包屑</small>
+
+:::tip
+`Breadcrumb` 组件可以内联 [`BreadcrumbItem`](./breadcrumb-item) 组件使用。
+:::
+
+## 示例
+
+### 风格
+
+可选的风格 `ui` 属性值：`strong`。
+
+[[ demo src="/demo/breadcrumb/style.vue" ]]
+
+### 尺寸
+
+可选的尺寸 `ui` 属性值：`s`/`m`。
+
+[[ demo src="/demo/breadcrumb/size.vue" ]]
+
+### 使用内联 `BreadcrumbItem`
+
+直接内联 `BreadcrumbItem` 使用。
+
+[[ demo src="/demo/breadcrumb/base.vue" ]]
+
+### 使用数据源
+
+也可以传入数据源。
+
+[[ demo src="/demo/breadcrumb/datasource.vue" ]]
+
+### 自定义分隔符
+
+可以使用插槽自定义分隔符。
+
+[[ demo src="/demo/breadcrumb/separator.vue" ]]
+
+### 事件监听
+
+监听跳转事件后处理而非直接路由跳转。
+
+[[ demo src="/demo/breadcrumb/redirect.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| --- | --- | --- | --- |
+| `ui` | `string=` | - | [^ui] |
+| `routes` | `Array<Object>` | `[]` | [^routes] |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
+^^^
+
+^^^routes
+面包屑配置，项目类型为 `{label: string, type: string, to: string|Object=, native: boolean=}`，除 `label` 外字段详情可参考 [`BreadcrumbItem`](./breadcrumb-item) 组件的属性。
+
+:::warning
+默认情况下，最后一项始终会显示成普通文本样式。
+:::
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 支持内联模式，直接传入 [`BreadcrumbItem`](./breadcrumb-item) 组件列表。填充后 `routes` 属性将被忽略。 |
+| `item` | [^slot-item] |
+| `separator` | [^slot-separator] |
+
+^^^slot-item
+用于为每个项目自定义内容。默认内容为 `routes` 项目的 `label` 或 [`BreadcrumbItem`]('./breadcrumb-item) 组件的默认插槽。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `route` | `Object` | `routes` 中的项目。自定义字段亦会绑定到作用域对象中。 |
++++
+^^^
+
+^^^slot-separator
+面包屑条目之间的分隔符。默认显示全局配置的分隔图标。
+
+:::warning
+当使用 Vue.js `2.5.17` 及以下版本时，必须绑定 `slot-scope` 使用。
+:::
+^^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `redirect` | [^redirect] |
+
+^^^redirect
+点击 `type` 为 `link` 的项目时将触发该事件，回调参数为 `(event, route, index)`。
+
++++参数详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `event` | [Event](https://developer.mozilla.org/zh-CN/docs/Web/Events/click) | 事件对象。 |
+| `route` | `Object` | 面包屑条目对象。 |
+| `index` | `number` | 当前点击条目的索引。 |
++++
+^^^

one/docs/components/button-group.md

@@ -0,0 +1,110 @@
+# ButtonGroup <small>按钮组</small>
+
+## 示例
+
+### 风格
+
+可选的 `ui` 属性值：`primary`/`strong`。
+
+[[ demo src="/demo/button-group/style.vue" ]]
+
+### 尺寸
+
+可选的 `ui` 属性值：`xs`/`s`/`m`/`l`/`xl`。
+
+[[ demo src="/demo/button-group/size.vue" ]]
+
+### 使用 `items` 数据源
+
+可以使用 `items` 属性通过数据源指定按钮内容。
+
+[[ demo src="/demo/button-group/items.vue" ]]
+
+### 禁用状态
+
+设置 `disabled` 来使按钮处于禁用状态。
+
+[[ demo src="/demo/button-group/disabled.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `items` | `Array<Object>` | - | [^items] |
+| `disabled` | `boolean=` | `false` | 按钮是否为禁用状态。 |
+
+^^^ui
+预设样式。为空格分隔的一组枚举值的组合。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `primary` | 主要按钮，背景显示为主题色。 |
+| `strong` | 加强样式。 |
+| `xs` | 超小尺寸样式。 |
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
+| `l` | 大尺寸样式。 |
+| `xl` | 超大尺寸样式。 |
++++
+^^^
+
+^^^items
+按钮数据项的数组，项目类型为 `{label, value}`。
+
++++字段详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 按钮文本。 |
+| `value` | `*=` | 如传入 `string` 类型的值，则会在点击按钮时触发同名的事件。 |
++++
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 按钮组内容区。 |
+| `item` | [^scoped-slot-item] |
+
+^^^scoped-slot-item
+默认作用域插槽，用来定制每个按钮的内容。
+
+默认内容：`label` 属性值。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 按钮文本。 |
+| `value` | `*=` | 按钮项的 `value` 值。 |
+| `index` | `number` | 按钮在 `items` 中的序号。 |
+| `disabled` | `boolean=` | 按钮是否禁用。 |
++++
+
+另外，`items` 内数据项中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
+^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `click` | [^click-event] |
+| <var>&lt;value&gt;</var> | [^value-var-event] |
+
+^^^click-event
+点击后触发，回调参数为 `(item, index)`。
+
++++参数详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `item` | `{label: string, value: *=, ...}` | 数据项。 |
+| `index` | `number` | 按钮在 `items` 中的序号。 |
++++
+^^^
+
+^^^value-var-event
+如果对应数据项有字符串类型的 `value` 字段，则在点击后触发名为 `value` 值的事件，参数与 `click` 事件相同。
+^^^

one/docs/components/button.md

@@ -0,0 +1,93 @@
+# Button <small>按钮</small>
+
+## 示例
+
+### 风格
+
+可选的风格 `ui` 属性值：`primary`/`strong`/`translucent`/`text`/`icon`。
+
+[[ demo src="/demo/button/style.vue" ]]
+
+### 尺寸
+
+可选的尺寸 `ui` 属性值：`xs`/`s`/`m`/`l`/`xl`。
+
+[[ demo src="/demo/button/size.vue" ]]
+
+### 禁用状态
+
+设置 `disabled` 来使按钮处于禁用状态。
+
+[[ demo src="/demo/button/disabled.vue" ]]
+
+### 加载状态
+
+设置 `loading` 来使按钮处于加载状态，无法点击。
+
+[[ demo src="/demo/button/loading.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
+| `type` | `string=` | `'button'` | [^type] |
+| `loading` | `boolean=` | `false` | 是否处于加载状态。加载状态下按钮不响应用户交互。 |
+
+^^^ui
+预设样式。为空格分隔的一组枚举值的组合。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `normal` | 普通按钮，为默认样式。 |
+| `primary` | 主要按钮，背景显示为主题色。 |
+| `basic` | 基础按钮。 |
+| `strong` | 加强样式。可单独使用，也可配合 `text`/`icon` 样式使用。 |
+| `translucent` | 半透明样式，用于深色背景。 |
+| `text` | 纯文字样式，没有背景色及边框。 |
+| `icon` | 纯图标样式，没有背景色及边框。 |
+| `aux` | 辅助按钮，用于配合 `text`/`icon` 样式使用。 |
+| `square` | 方形按钮。可配合其它样式一同使用。 |
+| `xs` | 超小尺寸样式。 |
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
+| `l` | 大尺寸样式。 |
+| `xl` | 超大尺寸样式。 |
++++
+^^^
+
+^^^type
+按钮类型。参见原生 `<button>` 元素的 [`type`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button#attr-type)。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `button` | 普通按钮。 |
+| `submit` | 提交按钮，点击会触发外部表单提交。 |
+| `reset` | 重置按钮，点击会触发外部表单重置为初始值。 |
++++
+
+:::warning
+注意，默认值与原生 `<button>` 元素不同。需要触发表单提交时请显式设置为 `submit`。
+:::
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 按钮上显示的内容。 |
+
+### 事件
+
+`Button` 组件支持所有原生 `<button>` 元素支持的原生事件，回调函数的参数均为相应的原生事件对象。
+
+### 图标
+
+| 名称 | 描述 |
+| -- | -- |
+| `loading` | 加载状态。 |

one/docs/components/calendar.md

@@ -0,0 +1,123 @@
+# Calendar <small>日历</small>
+
+## 示例
+
+### 单日选择
+
+默认情况下，单击日期可以选中一个日期。
+
+[[ demo src="/demo/calendar/default.vue" ]]
+
+### 多日选择、日期范围选择
+
+配置 `multiple` 属性时，可以选择多个日期。配置 `range` 属性时，可以选择一个日期范围。
+
+[[ demo src="/demo/calendar/range-multiple.vue" ]]
+
+### 多日期范围选择
+
+同时配置 `multiple` 及 `range` 属性时，可以选择多段日期范围。配置 `panel` 属性时，可以指定日历面板的数量。两次选择的时间段合并的策略为，若从未选日期开始选择则选中该时段，否则则取消选择该时段。
+
+[[ demo src="/demo/calendar/multiple-ranges.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `type` | `string=` | `'date'` | 日历的类型，可用值为 `'date'`/`'month'`/`'year'`，分别对应日期/月/年视图。 |
+| `multiple` | `boolean=` | `false` | 是否可以选择多个日期（范围）。 |
+| `range` | `boolean=` | `false` | 是否选择日期范围。 |
+| `selected` | `Date|Array=` | - | [^selected] |
+| `panel` | `number=` | `1` | 日历面板数量。 |
+| `today` | `Date=` | `new Date()` | 「今天」的日期。 |
+| `week-start` | `number=` | `calendar.weekStart` | 一周的起始。可进行[全局配置](#全局配置)。 |
+| `fill-month` | `boolean=` | `true` | 当只有一个面板时，是否要在当前月份面板显示非本月日期。 |
+| `date-class` | `string|Array|Object|function=` | `{}` | 特定日期的自定义 HTML `class`。传非函数时，数据格式为所有 [Vue 支持的 `class` 表达式](https://cn.vuejs.org/v2/guide/class-and-style.html#%E7%BB%91%E5%AE%9A-HTML-Class)；传函数时，签名为 `function(Date): string|Array<string>|Object<string, boolean>`，返回值格式亦为所有 Vue 支持的 `class` 表达式。 |
+| `disabled-date` | `function(Date)=: boolean` | `() => false` | 特定日期是否禁用。 |
+| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
+| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
+
+^^^selected
+:::badges
+`v-model`
+:::
+
+已选日期（范围）的值，根据 `multiple` 和 `range` 属性值的不同，数据格式不同。
+
++++类型详情
+| `multiple` | `range` | 类型 |
+| -- | -- | -- |
+| `false` | `false` | `Date` |
+| `true` | `false` | `Array<Date>` |
+| `false` | `true` | `[Date, Date]` |
+| `true` | `true` | `Array<[Date, Date]>` |
++++
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `before` | 日历内，面板上方可供定制的区域。 |
+| `after` | 日历内，面板下方可供定制的区域。 |
+| `date` | [^scoped-slot-date] |
+
+^^^scoped-slot-date
+单日单元格内的区域，可用来定制每一天对应区域的内容。
+
+默认内容：对应日期的 `date`。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `year` | `number` | 完整年份。 |
+| `month` | `number` | 月份数，`0` 表示一月。 |
+| `date` | `number` | 月份内的日期。 |
++++
+^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `select` | [^event-select] |
+| `selectstart` | 选择日期范围时，选择完起始日期时触发，回调参数 `(picking: Date)`，表示已选的起始项日期。 |
+| `selectprogress` | [^event-selectprogress] |
+| `viewchange` | 面板显示的月份发生变化时触发。回调参数 `(month: Object<{year: number, month: number, index: number}>)`，表示当前年月（`month` 为 `0` 表示一月）。 |
+
+^^^event-select
+:::badges
+`v-model`
+:::
+
+选择修改后触发，回调参数为 `(selected)`。数据类型和 `selected` 属性一致。
+^^^
+
+^^^event-selectprogress
+选择日期范围时，在已经选择开始日期后，通过鼠标或键盘交互标记到的结束日期变更时触发。回调参数为 `(picking)`，表示当前标记的日期范围，类型取决于 `multiple` 属性的值。
+
++++参数详请
+| `multiple` | 类型 |
+| -- | -- |
+| `false` | `[Date, Date]` |
+| `true` | `Array<[Date, Date]>` |
++++
+^^^
+
+### 全局配置
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `calendar.weekStart` | `number` | `1` | 一周的第一天是星期几。周一到周日分别对应 `1` 到 `7`。 |
+
+### 图标
+
+| 名称 | 描述 |
+| -- | -- |
+| `backward` | 上一年。 |
+| `prev` | 上一页。 |
+| `next` | 下一页。 |
+| `forward` | 下一年。 |
+| `expand` | 展开下拉菜单。 |

one/docs/components/carousel.md

@@ -0,0 +1,110 @@
+# Carousel <small>轮播</small>
+
+## 示例
+
+### 切换
+
+使用 `index` 来控制当前显示的项目。
+
+[[ demo src="/demo/carousel/switch.vue" ]]
+
+### 进度指示器类型
+
+使用 `indicator` 属性来指定进度指示器类型。
+
+[[ demo src="/demo/carousel/indicator.vue" ]]
+
+### 自动切换
+
+指定 `autoplay` 属性来允许自动播放。
+
+[[ demo src="/demo/carousel/autoplay.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `datasource` | `Array<Object>` | `[]` | [^datasource] |
+| `index` | `number=` | `0` | [^index] |
+| `indicator` | `string=` | `'radio'` | [^indicator] |
+| `switch-trigger` | `string=` | `'click'` | [^switch-trigger] |
+| `autoplay` | `boolean=` | `false` | 是否自动轮播。 |
+| `pause-on-hover` | `boolean=` | `false` | 在自动轮播时，鼠标悬浮后是否暂停。 |
+| `interval` | `number=` | `3000` | 在自动轮播时，切换间隔的毫秒数。 |
+| `wrap` | `boolean=` | `false` | 是否可以循环播放。 |
+
+^^^datasource
+轮播图数据源，项目类型为：`{src, alt, label}`。
+
++++字段详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `src` | `string` | 图片源地址。 |
+| `alt` | `string` | 图片的降级描述文本。 |
+| `label` | `string` | 图片的描述性标题。 |
++++
+^^^
+
+^^^index
+:::badges
+`.sync`
+:::
+
+当前轮播图序号。
+^^^
+
+^^^indicator
+播放进度指示器的显示模式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `radio` | 单选按钮型。 |
+| `number` | 显示「当前页数/全部页数」文字提示。 |
+| `none` | 不显示指示器。 |
+^^^
+
+^^^switch-trigger
+当显示单选型指示器时，触发切换的操作。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `click` | 点击时切换。 |
+| `hover` | 鼠标悬浮时切换。 |
++++
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `item` | [^scoped-slot-item] |
+
+^^^scoped-slot-item
+可用来定制每个轮播项的区域。
+
+默认内容：轮播项图片。
+
+作用域参数为 `datasource` 属性每个列表项的内容（可以有自定义字段）加上 `index: number` 表示轮播项的序号。即整个 `slot-scope` 绑定的值为 `{src, alt, label, index, ...}`。
+^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `change` | [^event-change] |
+
+^^^event-change
+
+切换后触发，回调参数为 `(to: number, from: number)`。分别表示切换后的序号和切换前的序号。
+^^^
+
+### 图标
+
+| 名称 | 描述 |
+| -- | -- |
+| `prev` | 上一页。 |
+| `next` | 下一页。 |

one/docs/components/check-button-group.md

@@ -0,0 +1,88 @@
+# CheckButtonGroup <small>复选按钮组</small>
+
+## 示例
+
+### 尺寸
+
+可选的 `ui` 属性值：`s`/`m`。
+
+[[ demo src="/demo/check-button-group/default.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `items` | `Array<Object>` | `[]` | [^items] |
+| `value` | `Array` | `[]` | [^value] |
+| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
+| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
+^^^
+
+^^^items
+复选按钮组数据源，项目类型为 `{label, value, disabled, ...}`。
+
++++字段详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 选项的文字说明。 |
+| `value` | `*` | 选项对应的值。 |
+| `disabled` | `boolean=` | 选项是否为禁用。 |
++++
+^^^
+
+^^^value
+:::badges
+`v-model`
+:::
+
+`items` 中已选项的 `value` 列表。
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `item` | [^scoped-slot-item] |
+
+^^^scoped-slot-item
+按钮内文本区域。
+
+默认内容：`label` 属性值。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 选项文本。 |
+| `value` | `*` | 选项值。 |
+| `index` | `number` | 选项在 `items` 中的序号。 |
+| `disabled` | `boolean=` | 选项是否禁用。 |
++++
+
+另外，`items` 内数据项中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
+^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `change` | [^event-change] |
+
+^^^event-change
+:::badges
+`v-model`
+:::
+
+选中状态变化后触发，回调参数为 `(value: Array)`。`value` 为当前按钮组已选项内 `value` 字段组成的数组。
+^^^

one/docs/components/checkbox-group.md

@@ -0,0 +1,88 @@
+# CheckboxGroup <small>复选框组</small>
+
+## 示例
+
+### 尺寸
+
+可选的 `ui` 属性值：`s`/`m`。
+
+[[ demo src="/demo/checkbox-group/default.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `items` | `Array<Object>` | `[]` | [^items] |
+| `value` | `Array` | `[]` | [^value] |
+| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
+| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `m` | 中尺寸样式。 |
+| `s` | 小尺寸样式。 |
+^^^
+
+^^^items
+复选框组数据源，项目类型为 `{label, value, disabled, ...}`。
+
++++字段详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 选项的文字说明。 |
+| `value` | `*` | 选项对应的值。 |
+| `disabled` | `boolean=` | 选项是否为禁用。 |
++++
+^^^
+
+^^^value
+:::badges
+`v-model`
+:::
+
+`items` 中已选项的 `value` 列表。
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `item` | [^scoped-slot-item] |
+
+^^^scoped-slot-item
+选项描述文本区域。
+
+默认内容：`label` 属性值。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 选项文本。 |
+| `value` | `*` | 选项值。 |
+| `index` | `number` | 选项在 `items` 中的序号。 |
+| `disabled` | `boolean=` | 选项是否禁用。 |
++++
+
+另外，`items` 内数据项中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
+^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `change` | [^event-change] |
+
+^^^event-change
+:::badges
+`v-model`
+:::
+
+选中状态变化后触发，回调参数为 `(value: Array)`。`value` 为当前复选框组已选项内 `value` 字段组成的数组。
+^^^

one/docs/components/checkbox.md

@@ -0,0 +1,83 @@
+# Checkbox <small>复选框</small>
+
+## 示例
+
+### 尺寸
+
+可选的 `ui` 属性值：`s`/`m`。
+
+[[ demo src="/demo/checkbox/size.vue" ]]
+
+### 值设定
+
+可以通过设置 `true-value` 和 `false-value` 来修改选中、非选中状态下 `model` 属性（`v-model`）的值。
+
+[[ demo src="/demo/checkbox/value.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `checked` | `boolean=` | `false` | [^checked] |
+| `value` | `*` | - | 当 `v-model` 绑定到数组时，代表当前复选框的值。 |
+| `true-value` | `*=` | `true` | 选中状态对应的值。 |
+| `false-value` | `*=` | `false` | 未选状态对应的值。 |
+| `indeterminate` | `boolean=` | `false` | 是否处于半选状态。 |
+| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
+| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
++++
+^^^
+
+^^^checked
+:::badges
+`.sync`
+:::
+
+是否处于选中状态。
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 复选框的描述文本，点击时会切换选择状态。无默认内容。 |
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `change` | 用户切换选中状态时触发，回调参数为 `(checked: boolean)`。`checked` 表示当前是否选中。 |
+| `input` | [^event-input] |
+
+^^^event-input
+:::badges
+`v-model`
+:::
+
+选中状态变化后触发，回调参数为 `(val: *)`。`val` 为当前 `v-model` 的值。与 `change` 事件不同，`input` 事件在数据操作导致状态变化时也会触发。
+^^^
+
+此外，`Checkbox` 支持如下的原生事件：
+
+`auxclick`、`click`、`contextmenu`、`dblclick`、`mousedown`、`mouseenter`、`mouseleave`、`mousemove`、`mouseover`、`mouseout`、`mouseup`、`select`、`wheel`、`keydown`、`keypress`、`keyup`、`focus`、`blur`、`focusin`、`focusout`。
+
+回调参数均为相应的原生事件对象。
+
+### 图标
+
+| 名称 | 描述 |
+| -- | -- |
+| `checked` | 已选状态。 |
+| `indeterminate` | 半选状态。 |

one/docs/components/collapse.md

@@ -0,0 +1,52 @@
+# Collapse <small>折叠面板</small>
+
+:::tip
+`Collapse` 组件可以内联在 [`Accordion`](./accordion) 组件中使用。
+:::
+
+## 示例
+
+### 尺寸
+
+可选的尺寸 `ui` 属性值：`s`/`m`。
+
+[[ demo src="/demo/collapse/size.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `label` | `string` | - | 折叠面板标题。 |
+| `expanded` | `boolean=` | `false` | [^expanded] |
+| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
+| `name` | `string|number=` | - | 当内联在 [`Accordion`](./accordion) 组件中使用时，用来提供已展开面板的唯一标识。 |
+
+^^^expanded
+:::badges
+`.sync`
+:::
+
+折叠面板是否展开。
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 折叠式面板内容区。 |
+| `title` | 折叠式面板标题区。 |
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `toggle` | 点击标题区触发展开/收起时触发。回调参数为 `(expanded: boolean)`。`expanded` 为面板是否展开。 |
+
+### 图标
+
+| 名称 | 描述 |
+| -- | -- |
+| `expand` | 收起状态，点击后展开。 |
+| `collapse` | 展开状态，点击后收起。 |

one/docs/components/column.md

@@ -0,0 +1,75 @@
+# Column <small>表格列</small>
+
+:::tip
+`Column` 组件需要在 [`Table`](./table) 组件内使用。
+:::
+
+## 示例
+
+见 [`Table` 示例](./table#示例)。
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `title` | `string` | - | 列标题。 |
+| `field` | `string` | - | 列的键名，对应所属的 `Table` 组件 `data` 属性数据项的某个字段。 |
+| `width` | `string=|number=` | - | 列宽，值为像素值。 |
+| `sortable` | `boolean=` | `false` | [^sortable] |
+| `align` | `string=` | - | 内容对齐方式，支持 `left`/`center`/`right`。 |
+| `span` | `function(number)=: Object` | | [^span] |
+
+^^^sortable
+本列是否支持排序。
+
+:::warning
+组件本身不会处理排序逻辑，仅会在排序按钮被点击时在 `Table` 上抛出 `sort` 事件，使用者需要自行处理排序逻辑。
+:::
+^^^
+
+^^^span
+单元格合并配置。类型为 `function(index: number): { row: number, col: number }`。`index` 为当前行在所属 `Table` 组件的 `data` 属性中的索引。返回值的 `row`/`col` 字段对应于单元格的 `rowspan`/`colspan`，默认值均为 `1`。
+
+:::tip
+可以参考 `Table` 组件中的[示例 › 高级](./table#高级)来了解如何使用。
+:::
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `head` | 列头区域。 |
+| `foot` | [^slot-foot] |
+| `default` | [^scoped-slot-default] |
+| `sub-row` | [^scoped-slot-sub-row] |
+
+^^^slot-foot
+列脚区域。
+
+:::warning
+如果所属的 `Table` 组件定义了 `foot` 插槽，单独的列脚配置将被覆盖。
+:::
+^^^
+
+^^^scoped-slot-default
+单元格的内容。
+
+默认内容：表格 `data` 数据项中与 `field` 属性对应的字段值。
+
+作用域参数为 `data` 内当前行数据中的所有字段。
+^^^
+
+^^^scoped-slot-sub-row
+展开行后子行的内容。使用此插槽时，内容会作为行展开下方子行中对应列的单元格内容。行数据源来自 `data` 中对应主行数据的 `children` 数组，展开的子行数与 `children` 内数据项数相同，使用相同的列配置。
+
+默认内容：表格 `data[i].children[j]` 数据项中与 `field` 属性对应的字段值。
+
+作用域参数当前子行数据中的所有字段，以及当前主行对应索引值 `index`。
+
+:::warning
+如果所属的 `Table` 组件定义了作用域插槽 `sub-row`，单独列的 `sub-row` 将被覆盖。
+:::
+^^^

one/docs/components/confirm-box.md

@@ -0,0 +1,41 @@
+# ConfirmBox <small>确认弹框</small>
+
+## 示例
+
+自定义标题和内容区。
+
+[[ demo src="/demo/confirm-box/custom.vue"]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| --- | --- | --- | --- |
+| `open` | `boolean` | `false` | [^open] |
+| `title` | `string=` | - | 标题。 |
+| `overlay-class` | `string|Array|Object=` | - | 参考 [Overlay](./overlay) 组件的 `overlay-class` 属性。 |
+
+^^^open
+:::badges
+`.sync`
+:::
+
+是否显示确认弹框。
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 内容区。 |
+| `title` | 标题区。若同时指定了 `title` 属性和 `title` 插槽，以后者为准。 |
+| `foot` | 底部区域，默认会展示“确定”、“取消”按钮。 |
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `ok` | 点击“确定”按钮时触发。 |
+| `cancel` | 点击“取消”按钮时触发。 |
+| `afterclose` | 浮层关闭后触发。如果样式主题提供了退出动画，将在退出动画完毕后触发。 |

one/docs/components/date-picker.md

@@ -0,0 +1,214 @@
+# DatePicker <small>日期选择</small>
+
+## 示例
+
+### 单日选择
+
+默认情况下，在下拉浮层中单击日期可以选中一个日期。可以配置 `clearable` 属性来允许清除已选值，用 `placeholder` 属性来配置未选择时的占位文本。
+
+[[ demo src="/demo/date-picker/default.vue" ]]
+
+### 日期范围选择
+
+配置 `range` 属性时，可以在下拉浮层中选择一个日期范围。
+
+[[ demo src="/demo/date-picker/range.vue" ]]
+
+### 设置快捷选项
+
+选择日期范围时，可以通过配置 `shortcuts` 属性来提供快捷选项。
+
+[[ demo src="/demo/date-picker/shortcuts.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `type` | `string` | `'date'` | 日历的类型，可用值为 `'date'`/`'month'`/`'year'`，分别对应日期/月/年视图。 |
+| `range` | `boolean` | `false` | 是否选择日期范围。 |
+| `selected` | `Date|Array` | - | [^selected] |
+| `today` | `Date` | `new Date()` | 「今天」的日期。 |
+| `week-start` | `number` | `calendar.weekStart` | 一周的起始。可进行[全局配置](./calendar#全局配置)。 |
+| `fill-month` | `boolean` | `true` | 当只有一个面板时，是否要在当前月份面板显示非本月日期。 |
+| `date-class` | `string|Array|Object|function` | `{}` | 特定日期的自定义 HTML `class`。传非函数时，数据格式为所有 Vue 支持的 `class` 表达式；传函数时，签名为 `function(Date): string|Array<string>|Object<string, boolean>`，返回值格式亦为所有 Vue 支持的 `class` 表达式。 |
+| `disabled-date` | `function(Date): boolean` | `() => false` | 特定日期是否禁用。 |
+| `clearable` | `boolean` | `false` | 已选值是否可以清除。 |
+| `placeholder` | `string` | `range ? datepicker.rangePlaceholder : datepicker.placeholder` | 未选择时的占位文本。可进行[全局配置](#全局配置)。 |
+| `format` | `string` | `'yyyy-MM-dd'`/`'yyyy-MM'`/`'yyyy'` | 用于格式化的字符串表达式，具体格式可以参见 [date-fns 的文档](https://date-fns.org/v2.12.0/docs/format)。 |
+| `shortcuts` | `Array<Object>` | `datepicker.shortcuts` | [^shortcuts] |
+| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
+| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
+
+^^^selected
+:::badges
+`v-model`
+:::
+
+已选日期（范围）的值，根据 `range` 属性值的不同，数据格式不同。
+
++++类型详情
+| `range` | 类型 |
+| -- | -- |
+| `false` | `Date` |
+| `true` | `[Date, Date]` |
++++
+^^^
+
+^^^shortcuts
+在选择范围时，可以定制的浮层中的快捷选择项列表，格式为 `Array<{label, from, to}>`。可进行[全局配置](#全局配置)。
+
++++字段详情
+<table>
+  <thead>
+    <tr>
+      <th>名称</th>
+      <th>类型</th>
+      <th>描述</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>label</code></td>
+      <td><code>string</code></td>
+      <td>快捷选项的文本。</td>
+    </tr>
+    <tr>
+      <td><code>from</code></td>
+      <td colspan="2">开始时间计算方式，见下方<a href="#快捷选项偏移量数据格式">快捷选项偏移量数据格式</a>描述。</td>
+    </tr>
+    <tr>
+      <td><code>to</code></td>
+      <td colspan="2">结束时间计算方式，见下方<a href="#快捷选项偏移量数据格式">快捷选项偏移量数据格式</a>描述。</td>
+    </tr>
+  </tbody>
+</table>
++++
+^^^
+
+#### 快捷选项偏移量数据格式
+
+`shortcuts` 列表项中的 `from` 及 `to` 字段格式相同，分别用来设置开始结束日期的计算方式。格式为 `number|Object`，默认值为 `0`。
+
+* 类型为 `number` 时，表示以「今天」为基准，偏移指定天数，比如 `-1` 等价于 `{ startOf: 'day', days: -1 }`，即「昨天」；
+* 类型为 `Object` 时，支持的格式为：`{startOf: string=, days: number=, weeks: number=, months: number=, }`。
+
+  +++字段详情
+  | 名称 | 类型 | 默认值 | 描述 |
+  | -- | -- | -- | -- |
+  | `startOf` | `string=` | `'day'` | 起始日期基准，支持的值有 `'day'`/`'week'`/`'month'`/`'quarter'`/`'year'`。 |
+  | `day` | `number=` | - | 偏移的天数。 |
+  | `week` | `number=` | - | 偏移的周数。 |
+  | `month` | `number=` | - | 偏移的月数。 |
+  | `quarter` | `number=` | - | 偏移的季度数。 |
+  | `year` | `number=` | - | 偏移的年数。 |
+
+计算方式是先根据 `startOf` 设置基准，然后根据其它字段进行偏移量的叠加。
+
+可以根据下面的例子，结合 `label` 理解计算方式。掌握以后，就可以非常快速地对快捷选项进行设置了。
+
+```js
+[
+  {
+    label: '上个月',
+    // 本月第一天往前算一个月，即上月第一天
+    from: {
+      startOf: 'month',
+      month: -1
+    },
+    // 本月第一天往前算一天，即上月最后一天
+    to: {
+      startOf: 'month',
+      days: -1
+    }
+  },
+  {
+    label: '本月',
+    // 本月第一天
+    from: {
+      startOf: 'month'
+    },
+    // 今天
+    to: 0
+  },
+  {
+    label: '本周',
+    // 本周第一天，days 为 0 是可以省略的
+    from: {
+      startOf: 'week',
+      days: 0
+    },
+    // 今天
+    to: 0
+  },
+  {
+    label: '最近7天',
+    // 往前算 6 天
+    from: -6,
+    // 到今天
+    to: 0
+  },
+  {
+    label: '今天',
+    to: 0
+  }
+]
+```
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `date` | [^scoped-slot-date] |
+
+^^^scoped-slot-date
+浮层中日历的单日单元格内的区域，可用来定制每一天对应区域的内容。
+
+默认内容：对应日期的 `date`。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `year` | `number` | 完整年份。 |
+| `month` | `number` | 月份数，`0` 表示一月。 |
+| `date` | `number` | 月份内的日期。 |
++++
+^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `select` | [^event-select] |
+
+^^^event-select
+:::badges
+`v-model`
+:::
+
+选择修改后触发，回调参数为 `(selected)`。数据类型和 `selected` 属性一致。
+^^^
+
+### 全局配置
+
+| 配置项 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `datepicker.shortcuts` | `Array` | `[]` | 快捷选项配置。 |
+| `datepicker.placeholder` | `string` | `@@datepicker.selectDate` | 选择单日时，未选择状态的占位文本。 |
+| `datepicker.monthPlaceholder` | `string` | `@@datepicker.selectMonth` | 选择月份时，未选择状态的占位文本。 |
+| `datepicker.yearPlaceholder` | `string` | `@@datepicker.selectYear` | 选择年时，未选择状态的占位文本。 |
+| `datepicker.rangePlaceholder` | `string` | `@@datepicker.selectRange` | 选择日期范围时，未选择状态的占位文本。 |
+| `datepicker.monthRangePlaceholder` | `string` | `@@datepicker.selectMonthRange` | 选择月份范围时，未选择状态的占位文本。 |
+| `datepicker.yearRangePlaceholder` | `string` | `@@datepicker.selectYearRange` | 选择年份范围时，未选择状态的占位文本。 |
+
+:::tip
+`@@` 开头的值表示引用多语言配置中的相应字段。
+:::
+
+### 图标
+
+| 名称 | 描述 |
+| -- | -- |
+| `calendar` | 日历。 |
+| `clear` | 清除内容。 |

one/docs/components/dialog.md

@@ -0,0 +1,130 @@
+# Dialog <small>对话框</small>
+
+## 示例
+
+### 模态与非模态
+
+[[ demo src="/demo/dialog/modal.vue" ]]
+
+### 自定义内容
+
+[[ demo src="/demo/dialog/custom.vue" ]]
+
+### 异步支持
+
+[[ demo src="/demo/dialog/async.vue" ]]
+
+### 可拖拽
+
+[[ demo src="/demo/dialog/draggable.vue" ]]
+
+### 层叠顺序
+
+[[ demo src="/demo/dialog/stack.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `modal` | `boolean=` | `true` | 是否是模态对话框。模态对话框默认遮挡底层（无法点击）且抢占焦点（关闭后焦点会回归）。 |
+| `title` | `string=` | - | 对话框标题文本。如果指定了 `title` 插槽，则优先使用 `title` 插槽。 |
+| `open` | `boolean` | `false` | [^open] |
+| `closable` | `boolean=` | `true` | 是否显示关闭按钮。 |
+| `outside-closable` | `boolean=` | `false` | 点击对话框外部时是否关闭对话框。 |
+| `draggable` | `boolean=` | `false` | 是否可拖拽。 |
+| `escapable` | `boolean=` | `false` | 按下 <kbd>esc</kbd> 键是否可以关闭对话框。仅在 `closable` 为 `true` 时生效。 |
+| `inline` | `boolean=` | `false` | 是否内联在内容中显示并占用内容空间。 |
+| `footless` | `boolean=` | `false` | 是否不显示默认的底部操作栏。 |
+| `loading` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态，无法点击。 |
+| `priority` | `number=` | - | 对话框浮层层叠权重，参考 [`Overlay`](./overlay) 组件的 [`priority`](./overlay#props) 属性。 |
+| `before-close` | `function(string)=: boolean=|Promise<boolean=>` | - | [^before-close] |
+| `overlay-class` | `string|Object=` | - | 对话框浮层根元素类名，参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props) 属性。 |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `s` | 小内容尺寸（内容及部件尺寸，非对话框整体空间大小）。 |
+| `m` | 中内容尺寸（内容及部件尺寸，非对话框整体空间大小）。 |
+| `narrow` | 窄尺寸样式。 |
+| `medium` | 中尺寸样式。 |
+| `wide` | 宽尺寸样式。 |
+| `fullscreen` | 全屏尺寸样式。 |
+| `auto` | 自适应尺寸样式。 |
++++
+^^^
+
+^^^open
+:::badges
+`.sync`
+:::
+
+是否显示对话框。
+^^^
+
+^^^before-close
+在将触发对话框关闭的操作发生后执行，类型为 `function(type: string): boolean=|Promise<boolean=>`。`type` 为触发关闭的类型，默认情况下可选值为 `'ok'|'cancel'`。返回值可以是一个 `boolean`，也可以是一个 resolve `boolean` 的 `Promise`，用来处理可能需要异步决定对话框关闭状态的情况。返回值或 resolve 值非 `false` 时才会关闭对话框。
+
++++调用示例
+```html
+<veui-dialog :open.sync="dialogOpen" :before-close="submit">...</veui-dialog>
+```
+
+```js
+methods: {
+  submit (type) {
+    if (type === 'ok') {
+      return axios.post('/item/create', {/* ... */})
+        .then(({ id, error }) => {
+          if (error) {
+            this.showError(error)
+            return false // resolve `false` 将阻止对话框关闭
+          }
+        })
+    }
+    // resolve 但不返回 `false` 时会关闭对话框
+  },
+  // ...
+}
+```
++++
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 内容区。 |
+| `title` | 标题区。若同时指定了 `title` 属性和 `title` 插槽，以后者为准。 |
+| `foot` | [^slot-foot] |
+
+^^^slot-foot
+底部区域，默认会展示“确定”、“取消”按钮。
+
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `close` | `function(type: string): void` | 触发对话框关闭的回调函数。`type` 为关闭的类型，将作为参数传入 `before-close` 钩子函数作为参数，同时将同步触发同名的事件。 |
++++
+^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `ok` | 点击“确定”按钮时或通过调用作用域函数 `close('ok')` 时触发。 |
+| `cancel` | 点击“取消”按钮、关闭按钮、通过 <kbd>esc</kbd> 关闭对话框时，或者通过调用作用域函数 `close('cancel')` 时触发。 |
+| <var>&lt;value&gt;</var> | 通过调用作用域函数 `close(value)` 时触发。 |
+| `afterclose` | 浮层关闭后触发。如果样式主题提供了退出动画，将在退出动画完毕后触发。 |
+
+### 图标
+
+| 名称 | 描述 |
+| -- | -- |
+| `close` | 关闭。 |

one/docs/components/drawer.md

@@ -0,0 +1,98 @@
+# Drawer <small>抽屉</small>
+
+## 示例
+
+### 位置
+
+使用 `placement` 属性控制抽屉弹出的位置。
+
+[[ demo src="/demo/drawer/placement.vue" ]]
+
+### 模态与非模态
+
+使用 `modal` 属性控制抽屉是否为模态类型。
+
+[[ demo src="/demo/drawer/modal.vue" ]]
+
+### 自定义内容
+
+[[ demo src="/demo/drawer/custom.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `placement` | `string` | `'right'` | [^placement] |
+| `modal` | `boolean` | `true` | 是否是模态抽屉。模态抽屉默认遮挡底层（无法点击）且抢占焦点（关闭后焦点会回归）。 |
+| `title` | `string` | - | 抽屉标题文本。如果指定了 `title` 插槽，则优先使用 `title` 插槽。 |
+| `open` | `boolean` | `false` | [^open] |
+| `closable` | `boolean` | `true` | 是否显示关闭按钮。 |
+| `outside-closable` | `boolean` | `false` | 点击抽屉外部时是否关闭抽屉。 |
+| `draggable` | `boolean` | `false` | 是否可拖拽。 |
+| `escapable` | `boolean` | `false` | 按下 <kbd>esc</kbd> 键是否可以关闭抽屉。仅在 `closable` 为 `true` 时生效。 |
+| `footless` | `boolean` | `false` | 是否不显示默认的底部操作栏。 |
+| `before-close` | `function(string): boolean=|Promise<boolean=>` | - | 在将触发抽屉关闭的操作发生后执行，参考 [`Dialog`](./dialog) 组件的 [`before-close`](./dialog#props) 属性。 |
+| `overlay-class` | `string|Object` | - | 抽屉浮层根元素类名，参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props) 属性。 |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `s` | 小内容尺寸（内容及部件尺寸，非抽屉整体空间大小）。 |
+| `m` | 中内容尺寸（内容及部件尺寸，非抽屉整体空间大小）。 |
++++
+^^^
+
+^^^placement
+抽屉位置。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `top` | 从上面滑出。 |
+| `right` | 从右面滑出。 |
+| `bottom` | 从下面滑出。 |
+| `left` | 从左面滑出。 |
++++
+^^^
+
+
+^^^open
+:::badges
+`.sync`
+:::
+
+是否显示抽屉。
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 内容区。 |
+| `title` | 标题区。若同时指定了 `title` 属性和 `title` 插槽，以后者为准。 |
+| `foot` | [^slot-foot] |
+
+^^^slot-foot
+底部区域，默认会展示“确定”、“取消”按钮。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `close` | `function(type: string): void` | 触发抽屉关闭的回调函数。`type` 为关闭的类型，将作为参数传入 `before-close` 钩子函数作为参数，同时将同步触发同名的事件。 |
++++
+^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `ok` | 点击“确定”按钮时或通过调用作用域函数 `close('ok')` 时触发。 |
+| `cancel` | 点击“取消”按钮、关闭按钮、通过 <kbd>esc</kbd> 关闭抽屉时，或者通过调用作用域函数 `close('cancel')` 时触发。 |
+| <var>&lt;value&gt;</var> | 通过调用作用域函数 `close(value)` 时触发。 |
+| `afterclose` | 浮层关闭后触发。如果样式主题提供了退出动画，将在退出动画完毕后触发。 |

one/docs/components/dropdown.md

@@ -0,0 +1,169 @@
+# Dropdown <small>下拉菜单</small>
+
+:::tip
+`Dropdown` 组件可以内联 [`Option`](./option) 或 [`OptionGroup`](./option-group) 组件使用。
+:::
+
+## 示例
+
+### 样式
+
+可选的样式 `ui` 属性值： `primary`/`text`。
+
+[[ demo src="/demo/dropdown/style.vue" ]]
+
+### 尺寸
+
+可选的尺寸 `ui` 属性值：`xs`/`s`/`m`/`l`。
+
+[[ demo src="/demo/dropdown/size.vue" ]]
+
+### 内联模式
+
+`Dropdown` 组件内支持内联使用 `OptionGroup` 及 `Option` 组件来代替 `options` 属性。
+
+[[ demo src="/demo/dropdown/inline.vue" ]]
+
+### 含搜索的下拉框菜单
+
+使用 `searchable` 属性使组件支持搜索并高亮显示符合条件的选项。
+
+[[ demo src="/demo/dropdown/searchable.vue" ]]
+
+### 禁用状态的下拉框菜单
+
+使用数据源中的 `disabled` 属性来禁用下拉项。
+
+[[ demo src="/demo/dropdown/disable.vue" ]]
+
+### 下拉触发时机与分离按钮
+
+使用 `trigger` 属性指定展开下拉菜单的时机，使用 `split` 属性来使命令按钮与下拉按钮分离。
+
+[[ demo src="/demo/dropdown/other.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `options` | `Array<Object>=` | `[]` | [^options] |
+| `label` | `string` | - | 下拉按钮的描述文本。 |
+| `trigger` | `string=` | `'click'` | 触发下拉框展开的时机，可选值为 `'click'`/`'hover'`。 |
+| `split` | `boolean=` | `false` | 是否将下拉按钮分离为指令按钮和切换下拉按钮两部分。 |
+| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
+| `overlay-class` | `string|Array|Object=` | - | 参考 [Overlay](./overlay) 组件的 [`overlay-class` 属性](./overlay#属性)。 |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `primary` | 主题色样式。 |
+| `text` | 文字样式。 |
+| `xs` | 特小尺寸样式。 |
+| `s` | 小尺寸样式。 |
+| `m` | 中等尺寸样式。 |
+| `l` | 大尺寸样式。 |
++++
+^^^
+
+^^^options
+选项列表，项目的类型为 `{label, value, options, disabled, ...}`。
+
++++字段详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 选项的文字说明。 |
+| `value` | `*` | 选项对应的值。 |
+| `options` | `Array<Object>=` | 选项的子选项数组，数组项类型同 `options` 属性数组项。 |
+| `disabled` | `boolean=` | 选项是否为禁用。 |
++++
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 选项列表的内容。在没有指定 `options` 属性时，可以用来直接内联 `Option` 或 `OptionGroup` |
+| `before` | 选项列表前的内容。无默认内容。 |
+| `after` | 选项列表后的内容。无默认内容。 |
+| `label` | [^scoped-slot-label] |
+| `group-label` | [^scoped-slot-group-label] |
+| `option-label` | [^scoped-slot-option-label] |
+| `option` | [^scoped-slot-option] |
+
+^^^scoped-slot-label
+下拉按钮文本区域。
+
+默认内容：`label` 属性值。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | `label` 属性对应文本。 |
++++
+^^^
+
+^^^scoped-slot-group-label
+下拉选项组（带 `options` 的选项）的标题文本区域。
+
+默认内容：选项的 `label` 属性值。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 选项组标题文本。 |
+| `disabled` | `boolean=` | 选项组是否禁用。 |
++++
+
+另外，当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
+^^^
+
+^^^scoped-slot-option-label
+下拉选项（不带 `options` 的选项）的文本区域。
+
+默认内容：选项的 `label` 属性值。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 选项文本。 |
+| `value` | `*` | 选项值。 |
+| `disabled` | `boolean=` | 选项是否禁用。 |
++++
+
+另外，当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
+^^^
+
+^^^scoped-slot-option
+可供选择的下拉选项的整个区域。
+
+默认内容：`Option` 内的组件默认结构。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 选项文本。 |
+| `value` | `*` | 选项值。 |
+| `disabled` | `boolean=` | 选项是否禁用。 |
++++
+
+另外，当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
+^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `click` | 点击选项后触发，回调参数为 `(value: *=)`。`value` 为当前已选项 `value` 字段的值。当 `split` 属性为 `true` 时，直接点击指令按钮部分也会触发，但不会携带 `value` 参数。 |
+
+### 图标
+
+| 名称 | 描述 |
+| -- | -- |
+| `expand` | 展开浮层。 |
+| `collapse` | 收起浮层。 |

one/docs/components/embedded.md

@@ -0,0 +1,72 @@
+# Embedded <small>嵌入式面板</small>
+
+## 示例
+
+### 尺寸
+
+可选的尺寸 `ui` 属性值：`xs`/`s`/`m`/`l`/`xl`。
+
+[[ demo src="/demo/embedded/size.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `title` | `string=` | - | 折叠式面板标题文本。如果指定了 `title` 插槽，则优先使用 `title` 插槽。 |
+| `open` | `boolean` | `false` | [^open] |
+| `closable` | `boolean=` | `true` | 是否显示关闭按钮。 |
+| `footless` | `boolean=` | `false` | 是否不显示默认的底部操作栏。 |
+| `loading` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态，无法点击。 |
+| `priority` | `number=` | - | 折叠式面板浮层层叠权重，参考 [`Overlay`](./overlay) 组件的 [`priority`](./overlay#props) 属性。 |
+| `before-close` | `function(string)=: boolean=|Promise<boolean=>` | - | 在将触发折叠式面板关闭的操作发生后执行，参考 [`Dialog`](./dialog) 组件的 [`before-close`](./dialog#props) 属性。 |
+| `overlay-class` | `string|Object=` | - | 折叠式面板浮层根元素类名，参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props) 属性。 |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `s` | 小内容尺寸。 |
+| `m` | 中内容尺寸。 |
++++
+^^^
+
+^^^open
+:::badges
+`.sync`
+:::
+
+是否显示折叠式面板。
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 内容区。 |
+| `title` | 标题区。若同时指定了 `title` 属性和 `title` 插槽，以后者为准。 |
+| `foot` | [^slot-foot] |
+
+^^^slot-foot
+底部区域，默认会展示“确定”、“取消”按钮。
+
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `close` | `function(type: string): void` | 触发折叠式面板关闭的回调函数。`type` 为关闭的类型，将作为参数传入 `before-close` 钩子函数作为参数，同时将同步触发同名的事件。 |
++++
+^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `ok` | 点击“确定”按钮时或通过调用作用域函数 `close('ok')` 时触发。 |
+| `cancel` | 点击“取消”按钮、关闭按钮、通过 <kbd>esc</kbd> 关闭折叠式面板时，或者通过调用作用域函数 `close('cancel')` 时触发。 |
+| <var>&lt;value&gt;</var> | 通过调用作用域函数 `close(value)` 时触发。 |
+| `afterclose` | 浮层关闭后触发。如果样式主题提供了退出动画，将在退出动画完毕后触发。 |

one/docs/components/field.md

@@ -0,0 +1,131 @@
+# Field <small>表单项</small>
+
+:::tip
+`Field` 组件需要配合 [`Form`](./form) 及 [`Fieldset`](./fieldset) 组件使用。一个 `Field` 对应一个输入组件。
+:::
+
+## 示例
+
+见 [`Form` 示例](./form#示例)。
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `readonly` | `boolean=` | `false` | 内部输入组件是否为只读状态。 |
+| `disabled` | `boolean=` | `false` | 内部输入组件是否为禁用状态。 |
+| `label` | `string` | - | 表单项描述。 |
+| `tip` | `string` | - | 表单项提示。 |
+| `name` | `string` | - | 表单项名称，可用于指定数据字段名或展示错误消息的定位。 |
+| `field` | `string` | - | [^field] |
+| `rules` | `string|Array<Object>` | - | [^rules] |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `xs` | 超小尺寸样式。 |
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
+| `l` | 大尺寸样式。 |
++++
+^^^
+
+^^^message
+出错信息，可以覆盖规则默认出错信息。
+
+若类型为 `string`，可以通过 `{ruleValue}` 引用 `ruleValue`、`{value}` 引用 `value`。例如：
+
+```js
+let minLengthRule = {
+  validate (value, ruleValue) {
+    return !isEmpty(value) ? val.length >= ruleValue : true
+  },
+  message: '字符长度不能短于 {ruleValue}，当前长度 {value}',
+  priority: 100
+}
+```
+
+若类型为 `function`，参数为 `(ruleValue: ?*=, value: *)`。例如：
+
+```js
+let minLengthRule = {
+  validate (value, ruleValue) {
+    return !isEmpty(value) ? val.length >= ruleValue : true
+  },
+  message (ruleValue, value) {
+    return `字符长度不能短于${ruleValue}，当前长度${value}`
+  },
+  priority: 100
+}
+```
+
+:::tip
+如果需要支持多语言，`message` 必须使用 `function` 类型。
+:::
+^^^
+
+^^^rules
+表单项校验规则，同步的单值校验。对于 `Array` 类型，项目的类型为 `{triggers, name, message, value, priority}`。
+
++++字段详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `triggers` | `string` | 触发校验的事件名称集合，逗号分隔。 |
+| `name` | `string` | 规则名称。 |
+| `value` | `*` | 规则要匹配的值。`boolean` 类型的规则，默认为 `true`。 |
+| `message` | `string|function` | [^message] |
+| `priority` | `number` | 规则优先级，可以覆盖规则默认优先级。 |
++++
+
++++内置规则
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `required` | `boolean` | 值不能为空值（`null`/`undefined`/`''`/`[]`）。 |
+| `numeric` | `boolean` | 值必须可描述十进制数值。(`6`/`66.6`/`6e6`/`'6'`/`.6`) |
+| `pattern` | `RegExp|string` | 正则匹配。 |
+| `maxLength` | `number` | 值的 `length` 属性不能大于限定值。 |
+| `minLength` | `number` | 值的 `length` 属性不能小于限定值。 |
+| `max` | `number` | 值不能大于限定值。 |
+| `min` | `number` | 值不能小于限定值。 |
++++
+
+:::warning
+对于 `string` 类型，格式为 `rule1,rule2,...`，仅支持 `value` 类型为 `boolean` 的规则。
+
+优先级会影响最后展示的出错信息，出错信息栈内会保留所有规则的错误提示，但仅展现优先级最高的那一个。
+
+自定义 `rule` 请参考[高级 › 自定义校验规则](../advanced/custom-rules)。
+:::
+^^^
+
+^^^field
+非必须，默认取 `name` 属性值。在特殊情况下，用于指定表单 `data` 属性对应字段的路径。
+
++++格式示例
+| 值 | 描述 |
+| -- | -- |
+| `username` | 对应表单 `data` 属性引用值的 `username` 属性，等价于 `data.username`。 |
+| `users[0]` | 等价于 `data.users[0]`。 |
+| `user.username` | 等价于 `data.user.username`。 |
++++
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 用于内联输入组件。无默认内容。 |
+| `label` | 填充表单项描述的内容。默认为 `label` 属性的文本值。 |
+| `tip` | 填充表单项提示的内容。默认为 `tip` 属性的文本值。 |
+
+### 图标
+
+| 名称 | 描述 |
+| -- | -- |
+| `alert` | 警示图标。 |

one/docs/components/fieldset.md

@@ -0,0 +1,30 @@
+# Fieldset <small>表单项集合</small>
+
+:::tip
+`Fieldset` 组件需要配合 [`Form`](./form) 及 [`Field`](./field) 组件使用。一个 `Fieldset` 可以包含多个 `Field`。
+:::
+
+## 示例
+
+见 [`Form` 示例](./form#示例)。
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `readonly` | `boolean=` | `false` | 内部输入组件是否为只读状态。 |
+| `disabled` | `boolean=` | `false` | 内部输入组件是否为禁用状态。 |
+| `label` | `string` | - | 表单项集合描述。 |
+| `tip` | `string` | - | 表单项集合提示。 |
+| `name` | `string` | - | 表单项集合名称，用于展示错误消息的定位。 |
+| `required` | `boolean` | - | 是否显示必要性星号提示。 |
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 用于内联 `Field` 组件。无默认内容。 |
+| `label` | 填充表单项集合描述的内容。默认为 `label` 属性的文本值。 |
+| `tip` | 填充表单项集合提示的内容。默认为 `tip` 属性的文本值。 |

one/docs/components/filter-panel.md

@@ -0,0 +1,58 @@
+# FilterPanel <small>过滤面板</small>
+
+## 示例
+
+[[ demo src="/demo/filter-panel/default.vue"]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `datasource` | `Array<Object>` | `[]` | 数据源，项目类型为 `{label: string, ...}`。 |
+| `searchable` | `boolean=` | `true` | 是否允许搜索。 |
+| `filter` | `function=` | 见描述 | [^filter] |
+| `search-on-input` | `boolean=` | `true` | 是否在输入的时候触发搜索。 |
+| `placeholder` | `string=` | - | 搜索框的占位符。 |
+
+^^^filter
+搜索过滤函数，签名为 `function(keyword, item, index, datasource): boolean`。返回值为 `false` 的项目将被从结果中过滤掉。
+
++++参数详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `keyword` | `string` | 搜索关键词。 |
+| `item` | `Object` | 当前遍历到的数据节点。 |
+| `index` | `number` | 当前数据节点在兄弟节点中的索引。 |
+| `datasource` | `Array<{label: string, ...}>` | 与 `datasource` 属性一致。 |
++++
+
++++默认值
+```js
+import { includes } from 'lodash'
+
+function (keyword, { label }) {
+  return includes(label, keyword)
+}
+```
++++
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `head` | 标题区域。默认显示 `title` 属性值。 |
+| `no-data` | `datasource` 中没数据时显示的内容。 |
+| `default` | [^default] |
+
+^^^default
+主内容区域。
+
++++参数属性
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `items` | `Array<Object>` | `datasource` 经过过滤后的数据，类型与 `datasource` 保持一致。 |
++++
+^^^

one/docs/components/form.md

@@ -0,0 +1,198 @@
+# Form <small>表单</small>
+
+:::tip
+`Form` 组件需要配合 [`Fieldset`](./fieldset) 及 [`Field`](./field) 组件使用。
+:::
+
+## 示例
+
+### 基础样式
+
+使用 `actions` 插槽来提供表单操作按钮。
+
+[[ demo src="/demo/form/normal.vue" ]]
+
+### 只读状态
+
+设置 `readonly` 来使内部表单项处于只读状态。
+
+[[ demo src="/demo/form/readonly.vue" ]]
+
+### 禁用状态
+
+设置 `disabled` 来使内部表单项处于禁用状态。
+
+[[ demo src="/demo/form/disabled.vue" ]]
+
+### 校验
+
+[[ demo src="/demo/form/validate.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `readonly` | `boolean=` | `false` | 内部输入组件是否为只读状态。 |
+| `disabled` | `boolean=` | `false` | 内部输入组件是否为禁用状态。 |
+| `data` | `Object` | - | [^data] |
+| `validators` | `Array<Object>=` | - | [^validators] |
+| `before-validate` | `function=` | - | 表单进入提交流程后，进行校验之前的 hook，传入参数为 `(data)`，`data` 为表单 `data` 属性值的副本。支持返回 `Promise`，返回值或 `Promise.resolve` 的值为 `true` 或 `undefined` 表示流程继续，其它返回值表示中断流程并触发 [`invalid`](#事件) 事件。|
+| `after-validate` | `function=` | - | 表单校验成功后，触发 `submit` 事件之前的 hook，传入参数为 `(data)`，与 `beforeValidate` 的入参是同一个引用。支持返回 `Promise`，返回值或 `Promise.resolve` 的值为 `true` 或 `undefined` 表示流程继续，其它返回值表示中断流程并触发 [`invalid`](#事件) 事件。|
+
+^^^data
+表单绑定的数据，和表单中的输入组件通过 `v-model` 绑定，也是表单校验时的数据源。
+
+:::warning
+[`Field`](./field) 如果处于 `disabled` 状态，提交流程中处理 `data` 副本时其对应的数据键值对会被过滤，校验时同理。
+:::
+^^^
+
+^^^validators
+表单联合校验、异步校验器。项目类型为 `{fields, validate, triggers}`。
+
++++属性详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `fields` | `Array` | 对应 `Field` 的 `field` 描述的集合。事件会绑定到对应 `Field` 中的输入组件上。 |
+| `validate` | `function` | 自定义校验函数，传入参数为 `(data[fields[0]], data[fields[1]], ...)`，`data` 为表单 `data` 属性值的引用。返回 `undefined`/`true` 代表校验成功，返回 `{[field]: message, ...}` 表示校验失败信息，详见[表单 › 表单校验逻辑](#表单校验逻辑)。 |
+| `triggers` | `string|Array<string>` | 事件名称集合。 |
++++
+
+
++++规则详情
+| `fields` | `triggers` | 绑定事件情况 |
+| -- | -- | -- |
+| `['a']` | `['change', 'blur,input,xxx', 'submit']` | a(change) |
+| `['a','b','c']` | `['change', 'blur,input,xxx', 'submit']` | a(change), b(blur,input,xxx), c(submit) |
+| `['a','b','c']` | `'blur'` | a(blur), b(submit), c(submit) |
+| `['a','b','c']` | `'blur,input'` | a(blur,input), b(blur,input), c(blur,input) |
++++
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 可直接内联 `Fieldset` 或 `Field` 组件。无默认内容。 |
+| `actions` | 表单操作内容，如“提交”、“取消”按钮等。无默认内容。 |
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `submit` | [^event-submit] |
+| `invalid` | [^event-invalid] |
+
+^^^event-submit
+在原生 `submit` 事件之后触发，回调参数为 `(data, event)`。具体提交流程请参考[表单 › 表单提交流程](#表单提交流程)。
+
++++参数详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `data` | `Object` | 表单 `data` 属性值的引用。 |
+| `event` | `Event` | 原生事件对象。 |
++++
+^^^
+
+^^^event-invalid
+`beforeValidate`、`validate`、`afterValidate` 流程中某一项返回中断时触发，回调参数为流程 function 的返回值，参数为 `(result)`，表示流程中断的信息，具体返回值类型由流程返回决定。具体提交流程请参考[表单 › 表单提交流程](#表单提交流程)，`validate` 逻辑见[表单 › 表单校验逻辑](#表单校验逻辑)。
+^^^
+
+### 表单提交流程
+
+```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
+```
+
+:::warning
+`beforeValidate` 和 `afterValidate` 以及 `sumbit` 事件操作的 `data` 均为 props `data` 的同一个副本。考虑到校验信息和 UI 中数据的一致性，`validate` 的目标数据是 props `data` 的源数据。因此在 `beforeValidate` 中**不建议**修改 `data` 副本。
+:::
+
+### 表单校验逻辑
+
+表单校验内部分为 `Field` 的 `rule` 校验和 `validators` 的校验。
+
+1. `Field` 的 `rule` 是单值、同步校验。详见[表单项](./field)。
+2. `validators` 可以是多值、异步的校验。
+
++++validators 示例
+```js
+validators: [
+  {
+    fields: ['start', 'end'],
+    validate (start, end) {
+      if (start == null || end == null) {
+        return true
+      }
+
+      if (parseInt(start, 10) >= parseInt(end, 10)) {
+        return {
+          start: '下限必须小于上限'
+        }
+      }
+      return true
+    },
+    triggers: ['change', 'submit,input']
+  },
+  {
+    fields: ['phone'],
+    validate (phone) {
+      return new Promise(function (resolve) {
+        setTimeout(function () {
+          let res
+          if (phone === '18888888888') {
+            res = {
+              phone: '该手机已被注册'
+            }
+          }
+          return resolve(res)
+        }, 3000)
+      })
+    },
+    triggers: ['input']
+  }
+]
+```
++++
+
+#### `Field` 的 `rule` 和 `validators` 的优先级
+
+校验失败的信息会添加到对应的 `Field` 的 `validities` 信息中。由于同个操作触发的校验，`validators` 的校验结果优先级大于 `Field` 的 `rule`，不同操作触发的校验，展现最后一个结果。`Field` 的 `rule` 内部的优先级，参考[表单项 › 属性](./field#属性)。
+
+#### 交互过程的校验
+
+```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]
+```
+
+#### 提交过程的校验
+
+```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)"]
+```
+
+提交时，其中一个过程的校验失败不会导致整个校验终止，校验信息将在两个过程执行完毕后进行整合，并传递到 [`invalid`](#事件) 事件中去。

one/docs/components/grid-column.md

@@ -0,0 +1,26 @@
+# GridColumn <small>栅格栏</small>
+
+:::tip
+`GridColumn` 组件需要配合 [`GridContainer`](./grid-container) 及 [`GridRow`](./grid-row) 组件使用。
+:::
+
+## 示例
+
+见 [`GridContainer` 示例](./grid-container#示例)。
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `span` | `number` | - | 栅格栏横跨的列数，不传则默认占满整行。 |
+| `offset` | `number=` | `0` | 偏移列数，将影响后续栅格栏的位置。 |
+| `pull` | `number=` | `0` | 栅格栏向左偏移列数，不影响其它栅格栏的位置。不能与 `push` 同时使用。 |
+| `push` | `number=` | `0` | 栅格栏向右偏移列数，不影响其它栅格栏的位置。不能与 `pull` 同时使用。 |
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 栅格栏内容。 |

one/docs/components/grid-container.md

@@ -0,0 +1,48 @@
+# GridContainer <small>栅格容器</small>
+
+:::tip
+`GridContainer` 组件需要配合 [`GridRow`](./grid-row) 及 [`GridColumn`](./grid-column) 组件使用。
+:::
+
+## 示例
+
+### 默认栅格
+
+[[ demo src="/demo/grid/default.vue" browser="/demos/grid/default.vue" ]]
+
+### 定宽栅格
+
+[[ demo src="/demo/grid/fixed.vue" browser="/demos/grid/fixed.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `columns` | `number=` | `gridcontainer.columns` | 栅格列数。 |
+| `margin` | `number=` | `gridcontainer.margin` | 栅格两侧边距 `px` 数值。 |
+| `gutter` | `number=` | `gridcontainer.gutter` | 栅格列间距 `px` 数值。 |
+| `width` | `number=` | - | 当需要创建定宽布局时，用来传入容器宽度 `px` 数值。 |
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 布局内容，直接子组件只能包含 [`GridRow`](./grid-row) 组件。 |
+
+### 全局配置
+
+| 配置项 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `gridcontainer.columns` | `number` | `12` | 栅格列数。 |
+| `gridcontainer.gutter` | `number` | `30` | 栅格列间距 `px` 数值。 |
+| `gridcontainer.margin` | `number` | `0` | 栅格两侧边距 `px` 数值。 |
+
+#### `veui-theme-dls` 中的默认配置
+
+| 配置项 | 类型 | 默认值 |
+| -- | -- | -- | -- |
+| `gridcontainer.columns` | `number` | `24` |
+| `gridcontainer.gutter` | `number` | `20` |
+| `gridcontainer.margin` | `number` | `20` |

one/docs/components/grid-row.md

@@ -0,0 +1,17 @@
+# GridRow <small>栅格行</small>
+
+:::tip
+`GridRow` 组件需要配合 [`GridContainer`](./grid-container) 及 [`GridColumn`](./grid-column) 组件使用。
+:::
+
+## 示例
+
+见 [`GridContainer` 示例](./grid-container#示例)。
+
+## API
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 栅格行内容，直接子组件只能包含 [`GridColumn`](./grid-column) 组件。 |

one/docs/components/icon.md

@@ -0,0 +1,33 @@
+# Icon <small>图标</small>
+
+:::tip
+VEUI 的 `Icon` 组件目前兼容 [Vue-Awesome](https://github.com/Justineo/vue-awesome) 的方式注册并通过字符串类型的 `name` 属性指定图标；也支持直接传入组件定义进行渲染。
+:::
+
+## 示例
+
+[[ demo src="/demo/icon/default.vue"]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `name` | `string` | - | 图标名称或其组件定义。 |
+| `label` | `string` | - | 图标的文字说明，对辅助设备可见。当不设置时，图标对辅助设备隐藏。 |
+| `scale` | `number` | - | 图标尺寸倍数。不设置时相当于 `1`。 |
+| `spin` | `boolean` | `false` | 是否保持旋转状态。 |
+| `pulse` | `boolean` | `false` | 是否保持步进旋转状态。 |
+| `inverse` | `boolean` | `false` | 是否翻转颜色（用白色绘制，用于深色背景）。 |
+| `flip` | `string` | - | 是否翻转，可选值为 `'horizontal'`/`'vertical'`，分别表示水平翻转与垂直翻转。 |
+
+:::warning
+当 `name` 属性使用组件定义时，仅支持 `spin` 属性。
+:::
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 用来实现图标堆叠，当内部有 `Icon` 子组件时会层叠在一起居中显示，且外部 `Icon` 组件不需要设置 `name` 属性。 |

one/docs/components/input-group.md

@@ -0,0 +1,21 @@
+# InputGroup <small>输入组件组</small>
+
+:::tip
+`Input` 组件需要内联 [`Input`](./input)、[`NumberInput`](./number-input)、[`Autocomplete`](autocomplete)、[`SearchBox`](./search-box)、[`Select`](./select)、[DatePicker](./date-picker)、[TimePicker](./time-picker)、[`Dropdown`](./dropdown)、[`Button`](./button)、[`ButtonGroup`](./button-group)、[`Label`](./label)、[`Span`](./span) 等组件配合使用。
+:::
+
+## 示例
+
+### 任意组合
+
+可选的尺寸 `ui` 属性值：`xs`/`s`/`m`/`l`。
+
+[[ demo src="/demo/input-group/default.vue" ]]
+
+## API
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 内容区，用来内联输入组件。 |

one/docs/components/input.md

@@ -0,0 +1,120 @@
+# Input <small>输入</small>
+
+## 示例
+
+### 尺寸
+
+可选的尺寸 `ui` 属性值：`xs`/`s`/`m`/`l`。
+
+[[ demo src="/demo/input/size.vue" ]]
+
+### 只读状态
+
+设置 `readonly` 来使输入框处于只读状态。
+
+[[ demo src="/demo/input/readonly.vue" ]]
+
+### 禁用状态
+
+设置 `disabled` 来使输入框处于禁用状态。
+
+[[ demo src="/demo/input/disabled.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `value` | `string` | '' | [^value] |
+| `disabled` | `boolean=` | `false` | 输入框是否为禁用状态。 |
+| `readonly` | `boolean=` | `false` | 输入框是否为只读状态。 |
+| `type` | `string=` | `'text'` | [^type] |
+| `placeholder` | `string=` | - | 输入占位符。 |
+| `clearable` | `boolean=` | `false` | 是否显示清除按钮。 |
+| `composition` | `boolean=` | `false` | 是否感知输入法输入过程的值。 |
+| `select-on-focus` | `boolean=` | `false` | 聚焦时是否自动选中输入框文本。 |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `xs` | 超小尺寸样式。 |
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
+| `l` | 大尺寸样式。 |
++++
+^^^
+
+^^^value
+:::badges
+`v-model`
+:::
+
+输入框的值。
+^^^
+
+^^^type
+输入类型。参见原生 `<input>` 元素的 [`type`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input#attr-type)。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `text` | 文本输入框。 |
+| `password` | 密码输入框。 |
+| `hidden` | 隐藏的输入框，但是值允许提交。 |
++++
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `before` | 输入框内前置内容。 |
+| `after` | 输入框内后置内容。 |
+| `placeholder` | 未输入时的占位内容。 |
+
+:::warning
+注意，插槽宽度会挤压输入框宽度。
+:::
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `change` | [^event-change] |
+| `input` | [^event-input] |
+
+^^^event-change
+输入框内容变化时触发，即原生 `change` 事件触发时。回调参数为 `(value, event)`。
+
++++参数详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `value` | `string` | 输入框的值。 |
+| `event` | [`Event`](https://developer.mozilla.org/zh-CN/docs/Web/Events/change) | 原生 `change` 事件对象。 |
++++
+^^^
+
+^^^event-input
+:::badges
+`v-model`
+:::
+
+有效输入时触发，受 `composition` 属性影响。回调参数为 `(value: string)`，`value` 为输入框的 `value` 值。
+^^^
+
+此外，`Input` 支持如下的原生事件：
+
+`auxclick`、`click`、`contextmenu`、`dblclick`、`mousedown`、`mouseenter`、`mouseleave`、`mousemove`、`mouseover`、`mouseout`、`mouseup`、`select`、`wheel`、`keydown`、`keypress`、`keyup`、`focus`、`blur`、`focusin`、`focusout`。
+
+回调函数的参数都为原生事件对象。
+
+### 图标
+
+| 名称 | 描述 |
+| -- | -- |
+| `remove` | 清除按钮。 |

one/docs/components/label.md

@@ -0,0 +1,36 @@
+# Label <small>标签</small>
+
+## 示例
+
+### 激活输入组件
+
+可以使用 `for` 属性指定被激活组件的 `ref`。点击标签区域可以触发
+
+[[ demo src="/demo/label/default.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `for` | `string=` | - | [^for] |
+
+^^^for
+允许通过 [`ref`](https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E8%AE%BF%E9%97%AE%E5%AD%90%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%E6%88%96%E5%AD%90%E5%85%83%E7%B4%A0)、[Vue 组件实例](https://cn.vuejs.org/v2/guide/instance.html)、[`HTMLElement`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement) 的方式指定目标组件或元素。如果指定的是组件，点击标签后会调用对应组件的 `activate` 方法（如果存在）；如果指定的是元素，点击标签后会调用对应元素的 [`click` 方法](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click)。
+
++++类型详情
+| 类型 | 描述 |
+| -- | -- |
+| `string` | 在当前浮层组件所在上下文中，通过匹配 `$refs` 中的键名查找 HTML 元素或对应组件实例的根元素。 |
+| `Vue` | 如果传入的是组件实例，就直接返回该组件的根元素。 |
+| `HTMLElement` | 如果已经是一个 HTML 元素了，就直接使用该元素。 |
++++
+^^^
+
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 默认插槽。无默认内容。用于填充行内内容，**不允许**放入块级内容。 |

one/docs/components/link.md

@@ -0,0 +1,51 @@
+# Link <small>链接</small>
+
+## 示例
+
+[[ demo src="/demo/link/default.vue"]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `to` | `string|Object` | - | 链接路径。当配合 Vue Router 使用时，会透传到 [`<router-link>`](https://router.vuejs.org/api/#router-link) 的[同名属性](https://router.vuejs.org/api/#to)；否则只支持 `string` 类型，输出到 `<a>` 元素的 `href` 属性中。 |
+| `rel` | `string` | - | HTML 原生的链接类型，可参考 [MDN 的相关介绍](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types)。 |
+| `target` | `string` | - | [^target] |
+| `native` | `boolean` | `false` | 是否强制使用原生的 `<a>` 元素。 |
+| `fallback` | `string` | `'span'` | 在 `to` 属性为空时使用的原生元素类型。 |
+| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `strong` | 加强样式。 |
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
++++
+^^^
+
+^^^target
+指定在何处显示链接的资源，可参考 [MDN 的相关介绍](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#attr-target)。
+
+:::tip
+当 `target` 为 `_blank` 时将自动增加 `noopener` 值（如果用户未指定该值）以增强默认情况下的安全性。
+:::
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 链接内容。 |
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `click` | 在 `to` 属性为空或指定了 `native` 为 `true` 的情况下，点击时触发。回调参数为 `(event)`，`event` 类型为原生 [`Event`](https://developer.mozilla.org/zh-CN/docs/Web/Events/click)。 |

one/docs/components/loading.md

@@ -0,0 +1,56 @@
+# Loading <small>加载</small>
+
+## 示例
+
+### 风格
+
+可选的风格 `ui` 属性值：`normal`/`strong`/`reverse`。
+
+[[demo src="/demo/loading/style.vue"]]
+
+### 尺寸
+
+可选的尺寸 `ui` 属性值：`s`/`m`/`l`。
+
+[[demo src="/demo/loading/size.vue"]]
+
+### 排列方式
+
+可选的排列方式 `ui` 属性值：`vertical`。
+
+[[demo src="/demo/loading/layout.vue"]]
+
+### 自定义加载图标
+
+通过 `spinner` 插槽设置自定义加载图标。
+
+[[demo src="/demo/loading/slot.vue"]]
+
+## API
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | `normal` `m` | [^ui] |
+| `loading` | `boolean` | `false` | 是否处于加载状态。 |
+
+^^^ui
+预设样式。为空格分隔的一组枚举值的组合。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `strong` | 加强样式。 |
+| `reverse` | 反白样式，用于深色背景。 |
+| `vertical` | 垂直排列样式。|
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
+| `l` | 大尺寸样式。 |
++++
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `spinner` | 加载图标。 |
+| `default` | 加载中提示文字。 |

one/docs/components/menu.md

@@ -0,0 +1,147 @@
+# Menu <small>边栏菜单</small>
+
+## 示例
+
+### 普通
+
+结合 Vue Router 使用边栏菜单。
+
+[[ demo src="/demo/menu/normal.vue" ]]
+
+### 可折叠
+
+使用 `collapsible` 属性控制菜单是否可以折叠。
+
+[[ demo src="/demo/menu/collaspible.vue" ]]
+
+### 自定义插槽
+
+[[ demo src="/demo/menu/slot.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `items` | `Array<Object>=` | `[]` | [^items] |
+| `active` | `string` | - | [^active] |
+| `matches` | `function(Object, string): boolean` | - | [^matches] |
+| `collapsible` | `boolean` | `false` | 整个导航菜单是否可折叠。 |
+| `collapsed` | `boolean` | `false` | [^collapsed] |
+| `expanded` | `Array<string>=` | `[]` | [^expanded] |
+
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
++++
+^^^
+
+^^^active
+当前激活节点，若该节点定义了 `name` 则就是该 `name` 值，否则该值是由 `to` 生成的路由路径（[route.path](https://router.vuejs.org/api/#route-object-properties)）。
+
+^^^
+
+^^^items
+数据源数组，每个节点类型为 `{label, to, name, icon, disabled, children, ...}`。
+
++++字段详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 节点的文字描述。 |
+| `to` | `string|Object` | 节点的导航目的地。参考 [`Link`](./link) 组件的 [`to`](./link#props) 属性。 |
+| `name` | `string` | 节点的唯一标识，`name` 和 `to` 二者至少有一个存在。 |
+| `disabled` | `boolean=` | 节点是否被禁用。 |
+| `icon` | `string|{render: function}` | 首层节点使用的图标。 |
+| `children` | `Array<Object>=` | 节点的子节点数组，数组项类型同 `items` 数组项。 |
++++
+^^^
+
+^^^matches
+当路由发生切换时，用来从 `items` 中找到激活的项目。
+
+默认实现：项目路由路径和当前路由的路径相等 (===) 则认为该项目是激活的。
+^^^
+
+^^^collapsed
+:::badges
+`.sync`
+:::
+当前折叠状态。
+^^^
+
+^^^expanded
+:::badges
+`.sync`
+:::
+指定当前展开的节点，是一个对应于 `items` 中节点数据中 `name` 属性或路由路径的数组。
+^^^
+
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `before` | 前置插槽。 |
+| `item` | [^item] |
+| `icon` | [^icon] |
+| `item-label` | [^item-label] |
+| `after` | 后置插槽。 |
+
+
+^^^item
+每个节点的渲染插槽。
+
+默认内容：渲染了 `icon` 插槽和 `item-label` 插槽。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 图标名称。 |
+| `to` | `string|Object` | 节点的导航目的地。参考 [`Link`](./link) 组件的 [`to`](./link#props) 属性。 |
+| `name` | `string` | 节点的唯一标识，`name` 和 `to` 二者至少有一个存在。 |
+| `disabled` | `boolean=` | 节点是否被禁用。 |
+| `icon` | `string` | 首层节点使用的图标。 |
+| `children` | `Array<Object>=` | 节点的子节点数组，数组项类型同 `items` 数组项。 |
++++
+^^^
+
+^^^icon
+节点前的图标插槽。
+
+默认内容：渲染 `item.icon` 指定的图标。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `icon` | `string|{render: function}` | 图标名称。 |
++++
+^^^
+
+^^^item-label
+节点的 `label` 插槽。
+
+默认内容：渲染节点对应的 `Link`。
+
+作用域参数参考 `item` 插槽。
+^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `activate` | 用户点击有 `to` 的节点触发，参数是激活节点的整个 `item` 数据。 |
+| `click` | 用户点击节点时触发，参数是激活节点整个 `item` 数据。 |
+
+### 图标
+| 名称 | 描述 |
+| -- | -- |
+| `expand` | 展开。 |
+| `collapse` | 折叠。 |

one/docs/components/number-input.md

@@ -0,0 +1,107 @@
+# NumberInput <small>数字输入</small>
+
+## 示例
+
+### 尺寸
+
+可选的尺寸 `ui` 属性值：`xs`/`s`/`m`。
+
+[[ demo src="/demo/number-input/size.vue" ]]
+
+### 只读状态
+
+设置 `readonly` 来使数字输入框处于只读状态。
+
+[[ demo src="/demo/number-input/readonly.vue" ]]
+
+### 禁用状态
+
+设置 `disabled` 来使数字输入框处于禁用状态。
+
+[[ demo src="/demo/number-input/disabled.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `value` | `number` | - | [^value] |
+| `readonly` | `boolean=` | `false` | 数字输入框是否为只读状态。 |
+| `disabled` | `boolean=` | `false` | 数字输入框是否为禁用状态。 |
+| `placeholder` | `string` | - | 输入占位符。 |
+| `select-on-focus` | `boolean` | `false` | 聚焦时是否自动选中数字输入框文本。 |
+| `max` | `number` | - | 允许的最大值。 |
+| `min` | `number` | - | 允许的最小值。 |
+| `decimalPlace` | `number` | 0 | 数值的小数精度位数，默认精确到整数位，`-1` 表示不处理精度。 |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `xs` | 超小尺寸样式。 |
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
++++
+^^^
+
+^^^value
+:::badges
+`v-model`
+:::
+
+数字输入框的值。
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `before` | 数字输入框前置内容。 |
+| `after` | 数字输入框后置内容。位于增减按钮之后。 |
+
+:::warning
+注意，插槽宽度会挤压输入框宽度。
+:::
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `change` | [^event-change] |
+| `input` | [^event-input] |
+
+^^^event-change
+原生 `change` 事件，回调参数为 `(value, event)`。
+
++++参数详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `value` | `number` | 数字输入框的值。 |
+| `event` | `Event` | 原生事件对象。 |
++++
+^^^
+
+^^^event-input
+:::badges
+`v-model`
+:::
+
+有效输入时触发，受数字格式化影响，若当前值格式化为无效值，则不触发。回调参数为 `(value: string)`，`value` 为数字输入框的 `value` 值。
+^^^
+
+此外，`NumberInput` 支持如下的原生事件：
+
+`auxclick`、`click`、`contextmenu`、`dblclick`、`mousedown`、`mouseenter`、`mouseleave`、`mousemove`、`mouseover`、`mouseout`、`mouseup`、`select`、`wheel`、`keydown`、`keypress`、`keyup`、`focus`、`blur`、`focusin`、`focusout`。
+
+回调函数的参数都为原生事件对象。
+
+### 图标
+
+| 名称 | 描述 |
+| -- | -- |
+| `increase` | 增加按钮。 |
+| `decrease` | 减少按钮。 |

one/docs/components/option-group.md

@@ -0,0 +1,121 @@
+# OptionGroup <small>选择组</small>
+
+:::tip
+`OptionGroup` 组件需要在 [`Select`](./select)、[`Dropdown`](./dropdown) 或其它 `OptionGroup` 组件内使用，可以配合 [`Option`](./option) 组件使用。
+:::
+
+## 示例
+
+见 [`Select` 示例](./select#示例)或 [`Dropdown` 示例](./dropdown#示例)。
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `label` | `string` | - | 选项组的标题。 |
+| `options` | `Array<Object>` | `[]` | [^options] |
+| `position` | `string` | `inline` | [^position] |
+| `overlay-class` | `string|Array|Object=` | - | 参考 [Overlay](./overlay) 组件的 `overlay-class` 属性。 |
+
+^^^options
+选项列表，项目的类型为 `{label, value, disabled, ...}`。
+
++++字段详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 选项的文字说明。 |
+| `value` | `*` | 选项对应的值。 |
+| `disabled` | `boolean=` | 选项是否为禁用。 |
++++
+^^^
+
+^^^position
+内部选项显示的方式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `inline` | 内联方式直接显示。 |
+| `popup` | 在浮层中显示。 |
++++
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 选项列表的内容。在没有指定 `options` 属性时，可以用来直接内联 `Option` 或其它 `OptionGroup` 组件。 |
+| `label` | [^scoped-slot-label] |
+| `group-label` | [^scoped-slot-group-label] |
+| `option-label` | [^scoped-slot-option-label] |
+| `option` | [^scoped-slot-option] |
+
+^^^scoped-slot-label
+选项组标题文本区域。
+
+默认内容：`label` 属性对应的文本。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 选项组标题文本。 |
+| `disabled` | `boolean=` | 选项组是否禁用。 |
++++
+^^^
+
+^^^scoped-slot-group-label
+子选项组的标题文本区域。
+
+默认内容：带 `options` 的选项对应的 `label` 属性值。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 选项组文本。 |
+| `disabled` | `boolean=` | 选项组是否禁用。 |
++++
+
+另外，当前选项组数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
+^^^
+
+^^^scoped-slot-option-label
+选项的文本区域。
+
+默认内容：不带 `options` 的选项对应的 `label` 属性值。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 选项文本。 |
+| `value` | `string` | 选项值。 |
+| `selected` | `boolean` | 是否已选择。 |
+| `disabled` | `boolean=` | 选项是否禁用。 |
++++
+
+另外，当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
+^^^
+
+^^^scoped-slot-option
+可供选择的选项的整个区域。
+
+默认内容：`Option` 内的组件默认结构。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 选项文本。 |
+| `value` | `string` | 选项值。 |
+| `selected` | `boolean` | 是否已选择。 |
+| `disabled` | `boolean=` | 选项是否禁用。 |
++++
+
+另外，当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
+^^^
+
+### 图标
+
+| 名称 | 描述 |
+| -- | -- |
+| `expandable` | 可展开的项目。 |

one/docs/components/option.md

@@ -0,0 +1,37 @@
+# Option <small>选项</small>
+
+:::tip
+`Option` 组件需要配合 [`Select`](./select) 或 [`Dropdown`](./dropdown) 或 [`OptionGroup`](./option) 组件使用。
+:::
+
+## 示例
+
+见 [`Select` 示例](./select#示例)或 [`Dropdown` 示例](./dropdown#示例)。
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `label` | `string` | - | 选项的文本。 |
+| `value` | `*` | - | 选项对应的值。 |
+| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
+| `hidden` | `boolean=` | `false` | 是否为隐藏状态。 |
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 选项的整个区域。默认显示文本及勾选图标等。 |
+| `label` | 选项的文本区域。默认显示 `label` 属性内容。 |
+
+### 事件
+
+在选项被点击时触发 `click` 事件，没有参数。
+
+### 图标
+
+| 名称 | 描述 |
+| -- | -- |
+| `checked` | 已选状态。 |

one/docs/components/overlay.md

@@ -0,0 +1,102 @@
+# Overlay <small>浮层</small>
+
+## 示例
+
+### 自定义定位
+
+浮层可以在页面内按照自定义方式定位。
+
+[[ demo src="/demo/overlay/position.vue" ]]
+
+### 相对已有元素定位
+
+浮层可以相对于页面内某个 DOM 元素定位。
+
+[[ demo src="/demo/overlay/relative-base.vue" ]]
+
+### 层叠顺序管理
+
+同层级且相同优先级的浮层，越晚显示的层叠顺序越高。
+
+[[ demo src="/demo/overlay/stack-display-order.vue" ]]
+
+打开的浮层，会建立新的层叠上下文，从中打开的浮层层叠顺序会高于父级浮层。
+
+[[ demo src="/demo/overlay/stack-on-overlay.vue" ]]
+
+子浮层的层叠顺序受父浮层影响。
+
+[[ demo src="/demo/overlay/stack-display-order-with-on-overlay.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | 预设样式。`veui-theme-dls` 未提供，可自定义。 |
+| `open` | `boolean` | `false` | [^open] |
+| `target` | `string|Vue|Element` | - | [^target] |
+| `priority` | `number` | - | [^priority] |
+| `autofocus` | `boolean` | - | 是否自动抢占焦点到浮层内的第一个可聚焦元素。 |
+| `modal` | `boolean` | `false` | 是否是模态浮层。模态浮层会抢占焦点且限制键盘导航处于浮层内部（关闭后焦点会回归）。 |
+| `inline` | `boolean` | `false` | 是否将浮层渲染为内联内容。 |
+| `local` | `boolean` | `false` | 是否将浮层保留在原来的 DOM 位置，而非移动到全局位置并参与[全局浮层管理](../advanced/overlay)。 |
+| `overlay-class` | `string|Array|Object=` | - | [^overlay-class] |
+| `options` | `Object` | 透传给底层 Popper.js 实现的 `modifiers` 配置项，具体内容参见[这里](https://popper.js.org/docs/v1/#modifiers)。 |
+
+^^^open
+:::badges
+`.sync`
+:::
+
+是否显示浮层。
+^^^
+
+^^^target
+允许通过 [`ref`](https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E8%AE%BF%E9%97%AE%E5%AD%90%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%E6%88%96%E5%AD%90%E5%85%83%E7%B4%A0)、[Vue 组件实例](https://cn.vuejs.org/v2/guide/instance.html)、[`Element`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element) 的方式指定目标元素。如果目标元素存在，浮层会相对于该元素进行定位，具体定位参数由 `options` 属性指定。
+
++++类型详情
+| 类型 | 描述 |
+| -- | -- |
+| `string` | 在当前浮层组件所在上下文中，通过匹配 `$refs` 中的键名查找 DOM 元素或对应组件实例的根元素。 |
+| `Vue` | 如果传入的是组件实例，就直接返回该组件的根元素。 |
+| `Element` | 如果已经是一个 DOM 元素了，就直接使用该元素。 |
++++
+^^^
+
+^^^priority
+当前浮层组件实例与其它实例在层叠关系上的权重，数值越大，越靠上。
+
+:::tip
+由于所有浮层组件的浮层根元素都会放置到 `<body>` 元素下，所以为了更好地控制浮层层叠顺序，浮层模块内部实现了全局的层叠上下文。组件的父子关系决定了浮层的嵌套关系，在同层级内的每个浮层组件实例都可以通过指定 `priority` 来实现不同实例间的相对层叠顺序。相同 `priority` 数值的组件实例，按照实例化的先后顺序来决定层叠顺序，后实例化的组件在之前组件的上面。
+:::
+^^^
+
+^^^overlay-class
+浮层根元素类名，数据格式为所有 [Vue 支持的 `class` 表达式](https://cn.vuejs.org/v2/guide/class-and-style.html#%E7%BB%91%E5%AE%9A-HTML-Class)。
+
+:::tip
+由于浮层根元素会放置在 `<body>` 元素下，可以通过这个属性给浮层根元素设置类名以自定义样式。
+:::
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 浮层内容。 |
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `locate` | 浮层定位发生变化时触发。 |
+| `afteropen` | 浮层打开后触发。如果样式主题提供了退出动画，将在退出动画完毕后触发。 |
+| `afterclose` | 浮层关闭后触发。如果样式主题提供了退出动画，将在退出动画完毕后触发。 |
+
+### 全局配置
+
+| 配置项 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `overlay.overlayClass` | `string|Array|Object=` | `[]` | 全局配置需要添加到浮层容器上的类名，数据格式为所有 [Vue 支持的 `class` 表达式](https://cn.vuejs.org/v2/guide/class-and-style.html#%E7%BB%91%E5%AE%9A-HTML-Class)。 |

one/docs/components/pagination.md

@@ -0,0 +1,67 @@
+# Pagination <small>翻页</small>
+
+## 示例
+
+### 尺寸
+
+[[ demo src="/demo/pagination/size.vue" ]]
+
+### 跳转到指定页
+
+使用 `goto` 属性开启跳转到指定页的功能。
+
+[[ demo src="/demo/pagination/goto.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `page` | `number` | `1` | 当前页码（从 `1` 开始）。 |
+| `total` | `number` | - | 总页数。 |
+| `to` | `string|Object` | `''` | [^to] |
+| `native` | `boolean` | `false` | 原生链接跳转。 |
+| `page-size` | `number` | `pagination.pageSize` | [^page-size] |
+| `page-sizes` | `Array` | `pagination.pageSizes` | 每页个数候选项。 |
+| `goto` | `boolean` | `false` | 是否显示直接跳转到页码。 |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `xs` | 超小尺寸样式。 |
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
++++
+^^^
+
+^^^to
+目标链接模板。类型见 [`Link`](./link#属性) 组件的同名属性。其中，类型为 `string` 路径时其中的 `:page` 关键词会被替换为实际页码。类型为 `Object` 时，会将起转换为 `string` 后替换掉 `:page` 部分。
+^^^
+
+^^^page-size
+:::badges
+`.sync`
+:::
+
+每页个数。
+^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `pagesizechange` | `page-size` 改变时触发，回调参数为 `(size: number)`。`size` 为新的 `page-size` 值。 |
+| `redirect` | 链接跳转时触发，回调参数为 `(page: number, event: Object)`。`page` 为要跳转的目标页码。`event` 为原生的事件对象，在 `native` 为 `true` 时，调用 `event.preventDefault` 可阻止跳转。 |
+
+### 全局配置
+
+| 配置项 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `pagination.pageSize` | `number` | `30` | 每页个数。 |
+| `pagination.pageSizes` | `Array<number>` | `[30, 50, 100]` | 每页个数候选项。 |
+

one/docs/components/popover.md

@@ -0,0 +1,70 @@
+# Popover <small>气泡提示</small>
+
+## 示例
+
+### 风格
+
+可选的 `ui` 属性值：`s`/`m`。
+
+[[ demo src="/demo/popover/ui.vue" ]]
+
+### 定位
+
+使用 `position` 属性来指定气泡显示的位置。
+
+[[ demo src="/demo/popover/position.vue" ]]
+
+### 触发时机
+
+使用 `trigger` 属性来指定显示/隐藏气泡的时机。
+
+[[ demo src="/demo/popover/trigger.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `open` | `boolean` | `false` | [^open] |
+| `target` | `string|Vue|Node` | - | 参考 [`Overlay`](./overlay) 组件的 `target` 属性。 |
+| `position` | `string` | `'top'` | [^position] |
+| `trigger` | `string` | `'hover'` | [^trigger] |
+| `hide-delay` | `number` | `tooltip.hideDelays` | 触发关闭条件满足后延迟关闭等待时间的毫秒数。可以用来防止光标移出 `target` 后移入气泡进行交互前已经自动关闭。 |
+| `overlay-class` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class` 属性](./overlay#属性)。 |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
++++
+^^^
+
+^^^open
+:::badges
+`.sync`
+:::
+
+是否显示气泡提示。
+^^^
+
+^^^position
+指定定位参数。使用 [Popper.js](https://popper.js.org/) 风格的定位语法指定，可参考 [`Popper.placements`](https://popper.js.org/popper-documentation.html#Popper.placements)。
+^^^
+
+^^^trigger
+触发气泡提示的方式。支持指定的值为 `v-outside` 指令绑定值的 `trigger` 参数，并支持使用 <code>&#0096;${open}-${close}&#0096;</code> 语法分别指定触发打开/关闭提示的时机。另外，当 `trigger` 指定为 `custom` 时，将不会使用 `v-outside` 功能自动进行处理。
+
+例如：`click` 表示点击 `target` 后打开，在空白处点击时关闭；`hover-mousedown` 表示光标移入 `target` 后打开，在空白处按下鼠标时关闭。
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 气泡提示内容。 |

one/docs/components/progress.md

@@ -0,0 +1,60 @@
+# Progress <small>进度条</small>
+
+## 示例
+
+[[ demo src="/demo/progress/default.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `type` | `string` | `'bar'` | 进度条类型。可选值为 `bar`/`circular`，分别是柱状和环形。 |
+| `desc` | `boolean` | `false` | 是否显示文字提示。 |
+| `value` | `number` | `0` | 进度值。 |
+| `min` | `number` | `0` | 最小值。 |
+| `max` | `number` | `1` | 最大值。 |
+| `decimal-place` | `number` | `0` | 保留的小数位数。 |
+| `status` | `string` | - | [^status] |
+| `autosucceed` | `boolean|number` | - | 是否在进度值到达最大时自动进入 `success` 状态。`true` 表示直接进入成功状态，如果是 `number` 类型则表示在到达最大值后切换为成功状态前等待的毫秒数。 |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `fluid` | 柱状进度条自适应宽度样式。 |
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
+^^^
+
+^^^status
+:::badges
+`.sync`
+:::
+
+进度状态。可选值为 `success`/`alert`，分别表示成功及危险警告状态。
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | [^scoped-slot-default] |
+
+^^^scoped-slot-default
+可用来定制文字提示区域的内容。
+
+默认内容：完成率百分比。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `percent` | `number` | 进度完成百分比。 |
+| `value` | `number` | 进度值，同 `value` 属性。 |
+| `status` | `string` | 进度状态，同 `status` 属性。 |
++++
+^^^

one/docs/components/prompt-box.md

@@ -0,0 +1,60 @@
+# PromptBox <small>输入弹框</small>
+
+## 示例
+
+获取用户输入的值。
+
+[[ demo src="/demo/prompt-box/base.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| --- | --- | --- | --- |
+| `open` | `boolean` | `false` | [^open] |
+| `title` | `string` | - | 标题。 |
+| `content` | `string` | `'请输入'` | 输入框上方的说明内容。 |
+| `value` | `string` | `''` | [^value] |
+| `overlay-class` | `string|Array|Object=` | - | 参考 [Overlay](./overlay) 组件的 `overlay-class` 属性。 |
+
+^^^open
+:::badges
+`.sync`
+:::
+
+是否显示输入弹框。
+^^^
+
+^^^value
+:::badges
+`v-model`
+:::
+
+输入框值。
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 内容区。 |
+| `title` | 标题区。若同时指定了 `title` 属性和 `title` 插槽，以后者为准。 |
+| `foot` | 底部区域，默认会展示“确定”、“取消”按钮。 |
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `input` | [^event-input] |
+| `ok` | 点击“确定”按钮时触发。 |
+| `cancel` | 点击“取消”按钮时触发。 |
+| `afterclose` | 浮层关闭后触发。如果样式主题提供了退出动画，将在退出动画完毕后触发。 |
+
+^^^event-input
+:::badges
+`v-model`
+:::
+
+输入框值发生变化后触发。回调参数为 `(value: string)`，`value` 为输入框当前值。
+^^^

one/docs/components/radio-button-group.md

@@ -0,0 +1,88 @@
+# RadioButtonGroup <small>单选按钮组</small>
+
+## 示例
+
+### 尺寸
+
+可选的 `ui` 属性值：`s`/`m`。
+
+[[ demo src="/demo/radio-button-group/default.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `items` | `Array<Object>` | `[]` | [^items] |
+| `value` | `*` | - | [^value] |
+| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
+| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
+^^^
+
+^^^items
+单选按钮组数据源，项目类型为 `{label, value, disabled, ...}`。
+
++++字段详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 选项的文字说明。 |
+| `value` | `*` | 选项对应的值。 |
+| `disabled` | `boolean=` | 选项是否为禁用。 |
++++
+^^^
+
+^^^value
+:::badges
+`v-model`
+:::
+
+`items` 中已选项的 `value` 列表。
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `item` | [^scoped-slot-item] |
+
+^^^scoped-slot-item
+按钮内文本区域。
+
+默认内容：`label` 属性值。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 选项文本。 |
+| `value` | `string` | 选项值。 |
+| `index` | `number` | 选项在 `items` 中的序号。 |
+| `disabled` | `boolean=` | 选项是否禁用。 |
++++
+
+另外，`items` 内数据项中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
+^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `change` | [^event-change] |
+
+^^^event-change
+:::badges
+`v-model`
+:::
+
+选中状态变化后触发，回调参数为 `(value: *)`。`value` 为当前按钮组已选项内 `value` 字段的值。
+^^^

one/docs/components/radio-group.md

@@ -0,0 +1,88 @@
+# RadioGroup <small>单选框组</small>
+
+## 示例
+
+### 尺寸
+
+可选的 `ui` 属性值：`s`/`m`。
+
+[[ demo src="/demo/radio-group/default.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `items` | `Array<Object>` | `[]` | [^items] |
+| `value` | `*` | - | [^value] |
+| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
+| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
+^^^
+
+^^^items
+单选框组数据源，项目类型为 `{label, value, disabled, ...}`。
+
++++字段详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 选项的文字说明。 |
+| `value` | `*` | 选项对应的值。 |
+| `disabled` | `boolean=` | 选项是否为禁用。 |
++++
+^^^
+
+^^^value
+:::badges
+`v-model`
+:::
+
+`items` 中已选项的 `value`。
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `item` | [^scoped-slot-item] |
+
+^^^scoped-slot-item
+选项描述文本区域。
+
+默认内容：`label` 属性值。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 选项文本。 |
+| `value` | `*` | 选项值。 |
+| `index` | `number` | 选项在 `items` 中的序号。 |
+| `disabled` | `boolean=` | 选项是否禁用。 |
++++
+
+另外，`items` 内数据项中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
+^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `change` | [^event-change] |
+
+^^^event-change
+:::badges
+`v-model`
+:::
+
+选中状态变化后触发，回调参数为 `(value: *)`。`value` 为当前按钮组已选项内 `value` 字段的值。
+^^^

one/docs/components/radio.md

@@ -0,0 +1,73 @@
+# Radio <small>单选框</small>
+
+## 示例
+
+### 尺寸
+
+可选的 `ui` 属性值：`s`/`m`。
+
+[[ demo src="/demo/radio/size.vue" ]]
+
+### 值设定
+
+可以通过设置 `value` 来修改选中状态下 `model` 属性（`v-model`）的值。
+
+[[ demo src="/demo/radio/model.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `checked` | `boolean` | `false` | [^checked] |
+| `value` | `*` | `true` | 选中状态对应的值。 |
+| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
+| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
++++
+^^^
+
+^^^checked
+:::badges
+`.sync`
+:::
+
+是否处于选中状态。
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 单选框的描述文本，点击时会进行选中。无默认内容。 |
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `change` | 用户切换选中状态时触发，回调参数为 `(checked: boolean)`。`checked` 表示当前是否选中。 |
+| `input` | [^event-input] |
+
+^^^event-input
+:::badges
+`v-model`
+:::
+
+选中状态变化后触发，回调参数为 `(val: *)`。`val` 为当前 `v-model` 的值。与 `change` 事件不同，`input` 事件在数据操作导致状态变化时也会触发。
+^^^
+
+此外，`Radio` 支持如下的原生事件：
+
+`auxclick`、`click`、`contextmenu`、`dblclick`、`mousedown`、`mouseenter`、`mouseleave`、`mousemove`、`mouseover`、`mouseout`、`mouseup`、`select`、`wheel`、`keydown`、`keypress`、`keyup`、`focus`、`blur`、`focusin`、`focusout`。
+
+回调参数均为相应的原生事件对象。

one/docs/components/region-picker.md

@@ -0,0 +1,81 @@
+# RegionPicker <small>地域选择</small>
+
+## 示例
+
+[[ demo src="/demo/region-picker/default.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `datasource` | `Array<Object>` | `[]` | [^datasource] |
+| `selected` | `Array<string>` | - | [^selected] |
+| `include-indeterminate` | `boolean` | `false` | 是否将半选状态的节点加入已选项。`datasource` 节点中的非叶子节点若有部分子孙节点被选中，则为半选状态。 |
+| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
+| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
+
+^^^datasource
+数据源，项目类型为 `{label, value, disabled, children, ...}`。
+
++++字段详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 节点的文字说明。 |
+| `value` | `string=` | 节点对应的值。 |
+| `disabled` | `boolean=` | 节点是否为禁用。 |
+| `children` | `Array<Object>=` | 子节点列表，列表项类型与本节点相同。 |
++++
+^^^
+
+^^^selected
+:::badges
+`v-model`
+:::
+
+已选项 `value` 的数组。
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `label` | [^scoped-slot-label] |
+
+^^^scoped-slot-label
+每个节点文本描述的内容。
+
+默认内容：每个节点 `label` 字段对应的文本内容。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 节点的文字说明。 |
+| `value` | `string` | 节点对应的值。 |
+| `disabled` | `boolean=` | 节点是否为禁用。 |
+| `children` | `Array<Object>=` | 子节点列表，列表项类型与本节点相同。 |
+| `level` | `number` | 节点所在的层级。顶层节点层级为 `0`。 |
+| `overlay` | `boolean=` | 是否在浮层中。 |
++++
+
+另外，`datasource` 内节点中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
+
+:::tip
+`level` 为 `2` 且 `overlay` 为 `true` 时为在浮层中展现的三级标题，默认内容会附带被选中的子节点个数及子节点总数信息。
+:::
+^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `select` | [^event-select] |
+
+^^^event-select
+:::badges
+`v-model`
+:::
+
+选中状态变化后触发，回调参数为 `(value: Array)`。`value` 类型与 `selected` 属性相同。
+^^^

one/docs/components/schedule.md

@@ -0,0 +1,154 @@
+# Schedule <small>时段选择</small>
+
+## 示例
+
+[[ demo src="/demo/schedule/default.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `selected` | `Object` | - | [^selected] |
+| `hour-class` | `string|Array|Object|function` | `{}` | 特定小时的自定义 HTML `class`。传非函数时，数据格式为所有 [Vue 支持的 `class` 表达式](https://cn.vuejs.org/v2/guide/class-and-style.html#%E7%BB%91%E5%AE%9A-HTML-Class)；传函数时，签名为 `function(day: number, hour: number): string|Array<string>|Object<string, boolean>`，返回值格式亦为所有 Vue 支持的 `class` 表达式。 |
+| `disabled-date` | `function(number, number): boolean` | `() => false` | 特定小时是否禁用。参数类型为 `(day: number, hour: number)`，分别表示一周的第几天（`0` 表示周日）及对应的小时数。 |
+| `shortcuts` | `Array` | `schedule.shortcuts` | [^shortcuts] |
+| `shortcuts-display` | `string` | `'inline'` | 快捷选择项的显示方式，支持 `inline`/`popup`，分别对应内联按钮组与下拉选择。 |
+| `statuses` | `Array<{label: string, value: string}>` | `schedule.statuses` | 图例数据源。会为图例项目添加 `class` 值 <code>&#0096;veui-schedule-legend-${value}&#0096;</code>，`label` 则会显示为图例文本。 |
+| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
+| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
+
+^^^selected
+:::badges
+`v-model`
+:::
+
+已选时段。类型为 `Object<number, Array>`。
+
+键为一周的第几天，`0` 表示周日，与 [`Date.prototype.getDay()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay) 返回值相同。值为每天被选取的时段，每个时段格式为 `[start: number, end: number]`，`start` 与 `end` 均为 `0`–`23` 的小时数。
+
++++数据样例
+```json
+{
+  1: [
+    [9, 17]
+  ],
+  6: [
+    [0, 2],
+    [18, 20]
+  ]
+}
+```
+
+本例表示周一的 9:00–18:00 与周六的 0:00–3:00 和 18:00–21:00。结束时间表示的是时段最后一小时的开始时间。
++++
+^^^
+
+^^^shortcuts
+快捷选择选项列表。类型为 `{label: string, selected: boolean|Array}`。
+
+`label` 为显示的提示文字。`selected` 表示预选择的时段，类型为数组时，格式与 `selected` 属性相同；值为 `true` 时等同于 `[[0, 23]]`。
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `header` | 顶部区域。 |
+| `header-content` | 顶部区域的内容，不包括外层容器。 |
+| `shortcuts` | 顶部快捷选项区域。 |
+| `legend` | 顶部图例区域。 |
+| `legend-label` | [^scoped-slot-legend-label] |
+| `hour` | [^scoped-slot-hour] |
+| `label` | [^scoped-slot-label] |
+| `tooltip` | [^scoped-slot-tooltip] |
+
+^^^scoped-slot-legend-label
+每个图例的文本区域。
+
+默认内容：每个图例状态 `label` 字段对应的文本内容。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 图例状态的文字说明。 |
+| `value` | `string` | 图例状态对应的值。 |
++++
+
+另外，`status` 内对应图例状态对象中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
+^^^
+
+^^^scoped-slot-hour
+每小时区域的内容。
+
+默认内容：无。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `day` | `number` | 一周的第几天，`0` 表示周日。 |
+| `hour` | `number` | 小时序号。 |
++++
+^^^
+
+^^^scoped-slot-label
+已选时间段的区域。
+
+默认内容：时段在 3 小时及以上时，显示时段范围 <code>&#0096;${from}:00–${to + 1}:00&#0096;</code>；选择全天的显示为“全天”；小于 3 小时无内容。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `from` | `number` | 时段开始的小时。 |
+| `to` | `number` | 时段结束的小时。 |
++++
+^^^
+
+^^^scoped-slot-tooltip
+光标移入每个小时格子的悬浮提示内容。
+
+默认内容：当前小时格子的时间范围 <code>&#0096;${hour}:00–${hour + 1}:00&#0096;</code>。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `day` | `number` | 一周的第几天，`0` 表示周日。 |
+| `hour` | `number` | 小时序号。 |
++++
+^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `select` | [^event-select] |
+
+^^^event-select
+:::badges
+`v-model`
+:::
+
+选中状态变化后触发，回调参数为 `(value: Object)`。`value` 类型与 `selected` 属性相同。
+^^^
+
+### 全局配置
+
+| 配置项 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `schedule.statuses` | Array<{name, label}> | 见描述。 | [^config-statuses] |
+
+^^^config-statuses
+默认图例状态数组。数组项类型为 `{name: string, label: string}`，默认值为：
+
+```js
+[
+  { name: 'selected', label: '@@schedule.selectedRanges' },
+  { name: 'available', label: '@@schedule.availableRanges' }
+]
+```
+
+:::tip
+`@@` 开头的值表示引用多语言配置中的相应字段。
+:::
+^^^

one/docs/components/search-box.md

@@ -0,0 +1,176 @@
+# SearchBox <small>搜索框</small>
+
+## 示例
+
+### 风格
+
+可选的 `ui` 属性值：`strong`。
+
+[[ demo src="/demo/search-box/style.vue" ]]
+
+### 尺寸
+
+可选的 `ui` 属性值：`xs`/`s`/`m`/`l`。
+
+[[ demo src="/demo/search-box/size.vue" ]]
+
+### 只读与禁用
+
+[[ demo src="/demo/search-box/disabled.vue" ]]
+
+### 推荐列表
+
+[[ demo src="/demo/search-box/suggestion.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `placeholder` | `string` | - | 搜索框占位符。 |
+| `value` | `string` | - | [^value] |
+| `autofocus` | `boolean` | `false` | 是否自动聚焦。 |
+| `clearable` | `boolean` | `false` | 是否显示清除按钮。 |
+| `select-on-focus` | `boolean` | `false` | 聚焦时是否自动选择文本。 |
+| `composition` | `boolean` | `false` | 是否感知输入法状态。 |
+| `suggestions` | `Array<string>|Array<Object>` | - | [^suggestions] |
+| `replace-on-select` | `boolean` | `true` | 选择推荐项时是否自动使用其内容填充文本框。 |
+| `suggest-trigger` | `Array<string>|string` | `input` | [^suggest-trigger] |
+| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
+| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
+
+^^^ui
+按钮预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `strong` | 加强样式，搜索图标变成搜索按钮，背景为主题色。 |
+| `xs` | 特小尺寸样式。 |
+| `s` | 小尺寸样式。 |
+| `m` | 中等尺寸样式。 |
+| `l` | 大尺寸样式。 |
++++
+^^^
+
+^^^value
+:::badges
+`v-model`
+:::
+
+输入框的值。
+^^^
+
+^^^suggestions
+推荐列表。列表项为 `Object` 时格式为 `{label, value}`。
+
++++字段详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 推荐项文本。 |
+| `value` | `string` | 推荐项值。 |
++++
+^^^
+
+^^^suggest-trigger
+展示推荐列表的触发时机。可以是枚举值，也可以枚举值的组合。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `focus` | 输入框聚焦时。 |
+| `input` | 输入框触发 `input` 事件时。 |
+| `submit` | 点击搜索按钮时。 |
++++
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `suggestions` | [^slot-suggestions] |
+| `suggestions-before` | 插入推荐列表前的内容。 |
+| `suggestions-after` | 插入推荐列表后的内容。 |
+| `suggestion` | [^slot-suggestion] |
+
+^^^slot-suggestions
+推荐列表内容。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `suggestions` | `Array<{value: string, label: string}>` | 从 `suggestions` 属性归一化类型后的推荐列表。 |
+| `select` | `function(suggestion: {value: string, label: string}): void` | 选择指定的推荐项。 |
+
+^^^slot-suggestion
+推荐列表的单项插槽，用来定制选项内容。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 选项文本。 |
+| `value` | `string` | 选项值。 |
+
+`suggestions` 中的每一项，除了 `label` 和 `value` 外的字段也会自动通过 `v-bind` 进行绑定。
+
+当 `suggestions` 为 `Array<string>` 类型时，`label` 和 `value` 均为单项 `string` 值。
++++
+^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `input` | [^event-input] |
+| `suggest` | [^event-suggest] |
+| `select` | [^event-select] |
+| `search` | [^event-search] |
+
+^^^event-input
+输入框中文本发生变化时触发该事件，回调参数为 `(value: string)`。
+
++++参数详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `value` | `string` | 输入框的值。 |
++++
+^^^
+
+^^^event-suggest
+需要展示推荐列表时触发，回调参数为 `(value: string)`。
+
++++参数详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `value` | `string` | 输入框的值。 |
++++
+^^^
+
+^^^event-select
+选择推荐列表某个选项时触发，回调参数为 `(item: Object)`。
+
++++参数详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `item` | `{label: string, value: string=, ...}` | 单个选项。 |
++++
+^^^
+
+^^^event-search
+输入内容被提交时触发，回调参数为 `(value: string, event: Event)`。
+
++++参数详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `value` | `string` | 输入框的值。 |
+| `event` | [`Event`](https://developer.mozilla.org/en-US/docs/Web/Events/click) | 原生点击事件。 |
++++
+^^^
+
+### 图标
+
+| 名称 | 描述 |
+| -- | -- |
+| `search` | 搜索。 |

one/docs/components/select.md

@@ -0,0 +1,193 @@
+# Select <small>下拉选择</small>
+
+:::tip
+`Select` 组件可以内联 [`Option`](./option) 或 [`OptionGroup`](./option-group) 组件使用。
+:::
+
+## 示例
+
+### 尺寸
+
+可选的尺寸 `ui` 属性值：`xs`/`s`/`m`/`l`。
+
+[[ demo src="/demo/select/size.vue" ]]
+
+### 内联模式
+
+`Select` 组件内支持内联使用 `OptionGroup` 及 `Option` 组件来代替 `options` 属性。
+
+[[ demo src="/demo/select/inline.vue" ]]
+
+### 搜索选项
+
+使用 `searchable` 属性来开启选项搜索。
+
+[[ demo src="/demo/select/searchable.vue" ]]
+
+### 多选
+
+使用 `multiple` 属性来开启多选模式。
+
+[[ demo src="/demo/select/multiple.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `options` | `Array<Object>` | - | [^options] |
+| `value` | `Array<*>|*` | - | [^value] |
+| `multiple` | `boolean` | `false` | 是否允许多选。 |
+| `max` | `number` | - | 多选时允许选择的项目上限。 |
+| `placeholder` | `string` | `select.placeholder` | 未选择时的占位文本。 |
+| `clearable` | `boolean` | `false` | 是否可以清除已选内容。 |
+| `searchable` | `boolean` | `false` | 是否允许搜索选项。 |
+| `filter` | `function` | - | 选项过滤函数，签名为 `function(option: Object): boolean`。`option` 类型与 `options` 属性中的项相同。返回值表示是否将结果保留在下拉选项列表中。 |
+| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
+| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
+| `overlay-class` | `string|Array|Object=` | - | 参考 [Overlay](./overlay) 组件的 [`overlay-class` 属性](./overlay#属性)。 |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `xs` | 超小尺寸样式。 |
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
+| `l` | 大尺寸样式。 |
++++
+^^^
+
+^^^options
+选项列表，项目的类型为 `{label, value, options, disabled, ...}`。
+
++++字段详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 选项的文字说明。 |
+| `value` | `*` | 选项对应的值。 |
+| `options` | `Array<Object>=` | 选项的子选项数组，数组项类型同 `options` 属性数组项。 |
+| `disabled` | `boolean=` | 选项是否为禁用。 |
++++
+^^^
+
+^^^value
+:::badges
+`v-model`
+:::
+
+已选值。
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 选项列表的内容。在没有指定 `options` 属性时，可以用来直接内联 `Option` 或 `OptionGroup`。 |
+| `before` | 选项列表前的内容。无默认内容。 |
+| `after` | 选项列表后的内容。无默认内容。 |
+| `label` | [^scoped-slot-label] |
+| `group-label` | [^scoped-slot-group-label] |
+| `option-label` | [^scoped-slot-option-label] |
+| `option` | [^scoped-slot-option] |
+
+^^^scoped-slot-label
+下拉按钮文本区域。
+
+默认内容：已选项对应的 `label` 属性值或内联模式下已选项的文本内容。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 已选项文本。 |
+| `value` | `*` | 已选项值。 |
+| `selected` | `boolean` | 是否已选择某个值。 |
+| `disabled` | `boolean=` | 选项是否禁用。 |
++++
+
+另外，当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
+^^^
+
+^^^scoped-slot-group-label
+下拉选项组（带 `options` 的选项）的标题文本区域。
+
+默认内容：选项的 `label` 属性值。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 选项组标题文本。 |
+| `disabled` | `boolean=` | 选项组是否禁用。 |
++++
+
+另外，当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
+^^^
+
+^^^scoped-slot-option-label
+下拉选项（不带 `options` 的选项）的文本区域。
+
+默认内容：选项的 `label` 属性值。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 选项文本。 |
+| `value` | `*` | 选项值。 |
+| `selected` | `boolean` | 是否已选择。 |
+| `disabled` | `boolean=` | 选项是否禁用。 |
++++
+
+另外，当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
+^^^
+
+^^^scoped-slot-option
+可供选择的下拉选项的整个区域。
+
+默认内容：`Option` 内的组件默认结构。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 选项文本。 |
+| `value` | `*` | 选项值。 |
+| `selected` | `boolean` | 是否已选择。 |
+| `disabled` | `boolean=` | 选项是否禁用。 |
++++
+
+另外，当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
+^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `change` | [^event-change] |
+
+^^^event-change
+:::badges
+`v-model`
+:::
+
+选中状态变化后触发，回调参数为 `(value: *)`。`value` 为当前已选项 `value` 字段的值。
+^^^
+
+### 全局配置
+
+| 配置项 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `select.placeholder` | `string` | `@@select.placeholder` | 未选择时的占位内容。 |
+
+:::tip
+`@@` 开头的值表示引用多语言配置中的相应字段。
+:::
+
+### 图标
+
+| 名称 | 描述 |
+| -- | -- |
+| `expand` | 展开浮层。 |
+| `collapse` | 收起浮层。 |

one/docs/components/slider.md

@@ -0,0 +1,129 @@
+# Slider <small>滑块</small>
+
+## 示例
+
+### 尺寸
+
+可选的尺寸 `ui` 属性值：`s`/`m`。
+
+[[ demo src="/demo/slider/size.vue" ]]
+
+### 只读/禁用
+
+设置 `readonly` 属性来使设置滑块只读，设置 `disabled` 属性来使设置滑块禁用。
+
+[[ demo src="/demo/slider/editable.vue" ]]
+
+### 步进
+
+使用 `step` 属性来指定步进值，使点击调节按钮或按下 <kbd>▴</kbd>、<kbd>▾</kbd> 键时根据指定步进值来调整输入值。
+
+[[ demo src="/demo/slider/steps.vue" ]]
+
+### 范围
+
+使用 `max`/`min` 属性来指定拖动范围两端的值。
+
+[[ demo src="/demo/slider/range.vue" ]]
+
+### 次级条
+
+使用 `secondary-progress` 属性来指定一个次级进度条。
+
+[[ demo src="/demo/slider/buffer.vue" ]]
+
+### 定制内容
+
+使用 `thumb`/`tip` 插槽来自定义滑块按钮、悬浮提示等内容。
+
+[[ demo src="/demo/slider/variant.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `value` | `*|Array<*>` | - | [^value] |
+| `secondary-progress` | `number|Array<number>` | `0` | 次要条。 |
+| `min` | `number` | `0` | `value` 经过 `parse` 函数处理后允许的最小值。 |
+| `max` | `number` | `1` | `value` 经过 `parse` 函数处理后允许的最大值。 |
+| `step` | `number` | `0` | `value` 经过 `parse` 函数处理后的步进值。 |
+| `mark` | `boolean` | `false` | 是否显示步进标记。 |
+| `parse` | `function` | `val => val` | 传入值处理函数。 |
+| `format` | `function` | `val => val` | 输出值处理函数。 |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
++++
+^^^
+
+^^^value
+值。
+
+默认值类型为 `number`，经过 `parse` 函数处理后值大小范围应在 `min` 和 `max` 之间。
+当值为 `Array<number>` 形式时，组件则渲染多个滑块与值一一对应。
+
+:::tip
+当提供 `parse` 和 `format` 时，值可以为任意类型，但 `parse` 需要把传入值解析为 `number` 类型并返回；`format` 需要把传出值格式化成原始形式。`parse` 和 `format` 的实现只需要处理单值，组件内部会给多值的每一项分别依次调用这两个函数。
+:::
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `track` | 滑轨。默认内容：横线。 |
+| `tip-label` | 浮动提示文本。默认内容：当前 `value` 值。 |
+| `thumb` | [^scoped-slot-thumb] |
+| `tip` | [^scoped-slot-tip] |
+
+^^^scoped-slot-thumb
+滑块。
+
+默认内容：圆形按钮。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `index` | `number` | 滑块索引。 |
+| `focus` | `boolean` | 滑块是否聚焦。 |
+| `hover` | `boolean` | 鼠标是否悬浮。 |
+| `dragging` | `boolean` | 滑块是否正在被拖动。 |
++++
+^^^
+
+^^^scoped-slot-tip
+浮动提示。
+
+默认内容：内容为 `value` 的 Tooltip 组件。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `target` | `HTMLElement` | 滑块元素。 |
+| `open` | `boolean` | 是否存在激活的滑块。 |
+| `active-index` | `boolean` | 激活的滑块索引。 |
++++
+^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `input` | [^event-input] |
+
+^^^event-input
+:::badges
+`v-model`
+:::
+
+修改后触发，回调参数为 `(value: *)`。`value` 为改变后经 `format` 函数处理过的新值。
+^^^

one/docs/components/span.md

@@ -0,0 +1,11 @@
+# Span <small>行内文本</small>
+
+:::tip
+`Span` 组件可配合 [`InputGroup`](./input-group)、[`Field`](./field) 或 [`Fieldset`](./fieldset) 等组件使用。
+:::
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 默认插槽。无默认内容。用于填充行内内容，**不允许**放入块级内容。 |

one/docs/components/steps.md

@@ -0,0 +1,91 @@
+# Steps <small>步骤</small>
+
+## 示例
+
+### 尺寸及方向
+
+可选的 `ui` 属性值：`s`/`m`/`vertical`/`label-vertical`。
+
+[[ demo src="/demo/steps/default.vue" ]]
+
+### 步骤状态
+
+可以通过设置 `steps` 的 `status` 属性值定义步骤状态，若步骤出错，可设置为 `error`。
+
+[[ demo src="/demo/steps/status.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `steps` | `Array` | - | [^steps] |
+| `current` | `number` | - | 当前步骤的索引值。 |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
+| `vertical` | 纵向样式。 |
+| `label-vertical` | 文案纵向样式。 |
++++
+^^^
+
+^^^steps
+步骤数据源。类型为 `{ label, desc, to, status }`。
+
++++字段详情
+| 名称 | 类型 | | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 步骤标题。 |
+| `desc` | `string` | 步骤描述。 |
+| `to` | `string|Object` | 步骤链接。类型见 [`Link`](./link#属性) 组件的同名属性。 |
+| `status` | `string` | 步骤状态。可选值为默认和 `error`。 |
++++
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | [^scoped-slot-default] |
+| `index` | 序号部分内容，默认显示从 `1` 开始的序号，已完成的步骤显示完成图标，出错的步骤显示出错图标。位于 `default` 内部，作用域参数同 `default`。 |
+| `label` | 步骤标题部分内容，默认显示 `steps` 中项目的 `label` 字段。位于 `default` 内部，作用域参数同 `default`。 |
+| `desc` | 步骤描述部分内容，默认显示 `steps` 中项目的 `desc` 字段。位于 `default` 内部，作用域参数同 `default`。 |
+
+^^^scoped-slot-default
+整个步骤项内容。
+
+默认内容：序号/完成图标、步骤标题、描述等内容。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 步骤标题。同 `steps` 属性中项目的 `label` 字段。 |
+| `desc` | `string` | 步骤描述。同 `steps` 属性中项目的 `desc` 字段。 |
+| `to` | `string|Object` | 步骤链接。同 `steps` 属性中项目的 `to` 字段。 |
+| `status` | `string` | 步骤状态。同 `steps` 属性中项目的 `status` 字段。 |
+| `index` | `number` | 步骤索引值。 |
+
+另外，`steps` 内数据项中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
++++
+^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `click` | 任意步骤被点击后触发，回调参数为 `(index: number, event: Event)`。其中 `index` 为被点击步骤的索引值，`event` 为相应的原生事件对象。 |
+
+### 图标
+
+| 名称 | 描述 |
+| -- | -- |
+| `success` | 已成功完成的步骤。 |
+| `error` | 出错的步骤。 |

one/docs/components/switch.md

@@ -0,0 +1,75 @@
+# Switch <small>开关</small>
+
+## 示例
+
+### 尺寸
+
+可选的 `ui` 属性值：`xs`/`s`/`m`。
+
+[[ demo src="/demo/switch/size.vue" ]]
+
+### 值设定
+
+可以通过设置 `true-value` 和 `false-value` 来修改打开、关闭状态下 `v-model` 的值。
+
+[[ demo src="/demo/switch/value.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `checked` | `boolean` | `false` | [^checked] |
+| `true-value` | `*` | `true` | 打开状态对应的值。 |
+| `false-value` | `*` | `false` | 关闭状态对应的值。 |
+| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
+| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `xs` | 超小尺寸样式。 |
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
++++
+^^^
+
+^^^checked
+:::badges
+`.sync`
+:::
+
+是否处于打开状态。
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 开关的描述文本，点击时会切换选择状态。无默认内容。 |
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `change` | 用户切换打开状态时触发，回调参数为 `(checked: boolean)`。`checked` 表示当前是否打开。 |
+| `input` | [^event-input] |
+
+^^^event-input
+:::badges
+`v-model`
+:::
+
+打开状态变化后触发，回调参数为 `(val: *)`。`val` 为当前 `model` 属性的值。与 `change` 事件不同，`input` 事件在数据操作导致状态变化时也会触发。
+^^^
+
+此外，`Switch` 支持如下的原生事件：
+
+`auxclick`、`click`、`contextmenu`、`dblclick`、`mousedown`、`mouseenter`、`mouseleave`、`mousemove`、`mouseover`、`mouseout`、`mouseup`、`select`、`wheel`、`keydown`、`keypress`、`keyup`、`focus`、`blur`、`focusin`、`focusout`。
+
+回调参数均为相应的原生事件对象。

one/docs/components/tab.md

@@ -0,0 +1,57 @@
+# Tab <small>标签</small>
+
+:::tip
+`Tab` 组件需要配合 [`Tabs`](./tabs) 组件使用。
+:::
+
+## 示例
+
+见 [`Tabs` 示例](./tabs#示例)。
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `label` | `string` | - | 选项卡文本。 |
+| `name` | `string` | - | 选项卡名称。 |
+| `disabled` | `boolean=` | `false` | 选项卡是否禁用。 |
+| `to` | `string|Object` | - | [^to] |
+| `matches` | `function(Route, Route): boolean` | - | [^matches] |
+| `native` | `boolean` | `false` | 路由模式是否强制使用原生的 `<a>` 元素。 |
+| `removable` | `boolean` | | 是否可删除。 |
+| `status` | `string` | - | [^status] |
+
+^^^to
+选项卡路由信息。类型见 [`Link`](./link#属性) 组件的同名属性。如果 `to` 存在，则 `name` 属性将被忽略。
+
+:::tip
+如果使用了 Vue Router，当前被激活的状态将与 `$route` 对象自动匹配，无需在 [`Tabs`](./tabs) 组件中手动控制 `index` 或 `active`。
+:::
+^^^
+
+^^^matches
+在使用了 Vue Router 且提供了 `to` 属性后，用于自定义判断路由当前激活 `Tab` 的逻辑。参数列表为 `(current: Route, to: Route)`。`current` 与 `to` 参数均为 Vue Router 的 [`Route`](https://router.vuejs.org/zh/api/#%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7) 类型对象。默认使用上层 [`Tabs`](./tabs) 组件的 `matches` 逻辑。
+^^^
+
+^^^status
+选项卡状态。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `success` | 成功状态。 |
+| `warning` | 警示状态。 |
+| `info` | 普通信息状态。 |
+| `error` | 错误状态。 |
++++
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 默认插槽。 |
+| `item` | 标签选项卡内容，包括对应的按钮/链接。 |
+| `item-label` | 标签选项卡文本。 |

one/docs/components/table.md

@@ -0,0 +1,129 @@
+# Table <small>表格</small>
+
+:::tip
+`Table` 组件需要配合 [`Column`](./column) 组件使用。
+:::
+
+## 示例
+
+### 内容密度
+
+可选的 `ui` 尺寸属性值：`compact`/`loose`。
+
+[[ demo src="/demo/table/basic.vue" ]]
+
+### 高级
+
+允许自定义唯一键、设定选择模式以及进行排序。
+
+[[ demo src="/demo/table/advanced.vue" ]]
+
+### 内部滚动模式
+
+允许启用内部滚动模式，以达到固定表头表底的效果。
+
+[[ demo src="/demo/table/scrollable.vue" ]]
+
+### 固定列
+
+使用 `Table` 的 `scroll` 属性及 `Column` 组件的 `fixed` 属性来控制固定列的位置。
+
+[[ demo src="/demo/table/fixed.vue" ]]
+
+### 展开行
+
+支持将带有子数据的行进行展开。
+
+[[ demo src="/demo/table/expandable.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `data` | `Array<Object>` | - | 表格数据。 |
+| `key-field` | `string` | - | 用于指定充当表格数据的键的列标志符。值对应 `data` 属性中数据项的某个字段名称。对应字段的值则会作为行元素的 [`key` 属性](https://cn.vuejs.org/v2/guide/list.html#key)输出。当 `selectable` 属性为 `true` 时，也可以用来指定在存在纵向合并单元格的情况下以哪一列的不同行作为选择项，此时值必须来自内部某个 `Column` 组件的 `field` 属性。 |
+| `selectable` | `boolean` | `false` | 是否支持表格行的选择。 |
+| `select-mode` | `string` | `'multiple'` | 选择模式，支持的值为 `single`/`multiple`，分别对应于单选/多选模式。 |
+| `selected` | `Array<*>|*` | `[]` | [^selected] |
+| `expandable` | `boolean` | `false` | 是否允许展开行。 |
+| `expanded` | `Array<*>` | `[]` | [^expanded] |
+| `order` | `string|boolean` | `false` | 排序顺序。为 `false` 时表示无序，为字符串值 `'asc'`/`'desc'` 时分别为升序/降序。 |
+| `order-by` | `string` | - | 用于指定当前基于哪一列进行了排序，值必须来自内部某个 `Column` 组件的 `field` 属性。 |
+| `scroll` | `number` | - | 指定滚动区域的最大高度，当超出此高度时，表格将进入固定表头和底部只允许数据区域滚动的模式。 |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `compact` | 紧凑样式。 |
+| `loose` | 宽松样式。 |
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
++++
+^^^
+
+^^^selected
+:::badges
+`.sync`
+:::
+
+已选行。当 `select-mode` 为 `'multiple'` 时为已选行 `key-field` 对应字段值的数组；为 `'single'` 时为已选行 `key-field` 对应字段值。
+^^^
+
+^^^expanded
+:::badges
+`.sync`
+:::
+
+已展开行。为已展开行 `key-field` 对应字段值的数组。
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 用于定义表格列，只能包含 `Column` 组件。 |
+| `no-data` | 用于定义无数据时要展现的内容。 |
+| `foot` | 表格脚部内容，整个区域将打通成为一个容器，不再保留分列。 |
+| `sub-row` | [^scoped-slot-sub-row] |
+
+^^^scoped-slot-sub-row
+展开行后子行的内容。使用此插槽时，内容会作为行展开下方通栏显式的子行内容。使用此插槽时会覆盖 `Column` 的作用域插槽 `sub-row` 内容。
+
+作用域参数为 `data` 内当前行数据中的所有字段，以及当前行对应索引值 `index`。
+^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `select` | [^event-select] |
+| `sort` | [^event-sort] |
+
+^^^event-select
+切换已选项时触发。回调参数为 `(selected, item, selectedItems)`。
+
++++参数详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `selected` | `boolean` | `true` 表示已选择，`false` 则表示取消选择。 |
+| `item` | `Object` | 选择状态发生变化的 `data` 属性中的数据项。当存在纵向合并单元格且以相应行作为键进行选择时，将返回第一条相关的 `data` 数据项。 |
+| `selectedItems` | `Object<string, Object|Array>` | 当前所有已选项的信息，键为 `key-field` 对应字段，值为对应的 `data` 数据项。当存在纵向合并单元格且以相应行作为键进行选择时，值为所有相关行数据项组成的数组。 |
++++
+^^^
+
+^^^event-sort
+进行排序时触发的事件。回调参数为 `(field, order)`。
+
++++参数详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `field` | `string` | 基于哪一列进行排序。值来自对应 `Column` 组件的 `field` 属性。 |
+| `order` | `string|boolean` | 同 [`order` 属性](#属性)。 |
++++
+^^^

one/docs/components/tabs.md

@@ -0,0 +1,137 @@
+# Tabs <small>标签页</small>
+
+:::tip
+`Tabs` 组件需要配合 [`Tab`](/components/tab) 组件使用。
+:::
+
+## 示例
+
+### 尺寸
+
+可选的 `ui` 尺寸属性值：`s`/`m`/`l`。
+
+[[ demo src="/demo/tabs/size.vue" ]]
+
+### 样式
+
+设置 `ui` 为 `simple`/`strong` 来分别启用简单样式、加强样式。
+
+[[ demo src="/demo/tabs/style.vue" ]]
+
+### 路由模式
+
+设置[`Tab`](/components/tab) 组件 `to` 属性来使用路由模式。
+
+[[ demo src="/demo/tabs/route.vue" ]]
+
+### 禁用状态
+
+设置[`Tab`](/components/tab) 组件 `disabled` 属性来使选项卡处于禁用状态。
+
+[[ demo src="/demo/tabs/disabled.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `active` | `string` | - | [^active] |
+| `matches` | `function(Route, Route): boolean` | `tabs.matches` | [^matches] |
+| `addable` | `boolean` | `false` | 是否可以增加标签。 |
+| `max` | `number` | - | 可增加标签的上限值。 |
+| `tip` | `string` | - | 提示文本。 |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
+| `l` | 大尺寸样式。 |
+| `simple` | 简单样式。 |
+| `strong` | 加强样式。 |
++++
+^^^
+
+^^^active
+:::badges
+`.sync`
+:::
+
+表示当前哪个标签页处于激活状态。具体映射的值受[标签](/components/tab)的属性影响，优先级 `to` > `name`。
+^^^
+
+^^^matches
+用于给内部的 [`Tab`](/components/tab) 组件设置统一的路由匹配逻辑。具体参见 [`Tab`](/components/tab) 组件的 [`to` 属性](/components/tab#属性)。
+
+:::warning
+当内部的 `Tab` 组件设置了 `matches` 属性，将会覆盖在 `Tabs` 组件上的 `matches` 属性。
+:::
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 允许直接内联 `Tab` 组件。无默认内容。 |
+| `panel` | 选项卡下方面板区域。 |
+| `extra` | 位于标签页右侧的扩展区域。 |
+| `tab-item` | [^tab-item] |
+| `tab-item-label` | 标签选项卡文本区域，默认内容为选项卡文本。作用域参数同 `tab-item` 插槽。 |
+
+^^^tab-item
+标签选项卡区域，默认内容为选项卡对应的按钮/链接。作用域参数为标签属性描述对象。
+
++++参数详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 选项卡文本。 |
+| `name` | `string` | 选项卡名称。 |
+| `disabled` | `boolean=` | 选项卡是否禁用。 |
+| `to` | `string` | 选项卡路由信息。 |
+| `native` | `boolean` | 路由模式是否强制使用原生的 `<a>` 元素。 |
+| `removable` | `boolean` | 是否可删除。 |
+| `status` | `string` | 选项卡状态。 |
++++
+^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `change` | 切换时触发。回调参数为 `(tab: Object)`，`tab` 与作用域插槽中的作用域参数一致。 |
+| `add` | 点击添加按钮触发的事件，无回调参数。 |
+| `remove` | 删除标签时触发的事件。回调参数为 `(tab: Object)`，`tab` 与作用域插槽中的作用域参数一致。 |
+
+### 全局配置
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `tabs.matches` | `function` | 见描述。 | [^config-matches] |
+
+^^^config-matches
+函数签名与 [`Tab`](/components/tab) 组件的 [`to` 属性](/components/tab#属性)相同。默认值为：
+
+```js
+function (current, to) {
+  return current.fullPath === to.fullPath
+}
+```
+^^^
+
+### 图标
+
+| 名称 | 描述 |
+| -- | -- |
+| `add` | 添加按钮。 |
+| `remove` | 清除按钮。 |
+| `prev` | 往左翻页按钮。 |
+| `next` | 往右翻页按钮。 |
+| `success` | 成功状态。 |
+| `warning` | 警示状态。 |
+| `info` | 普通信息状态。 |
+| `error` | 错误状态。 |

one/docs/components/tabs/index.vue

@@ -0,0 +1,5 @@
+<template>
+<div>
+  Tab content #1
+</div>
+</template>

one/docs/components/tabs/tab.vue

@@ -0,0 +1,5 @@
+<template>
+<div>
+  Tab content #1
+</div>
+</template>

one/docs/components/tabs/tab2.vue

@@ -0,0 +1,5 @@
+<template>
+<div>
+  Tab content #2
+</div>
+</template>

one/docs/components/tabs/tab3.vue

@@ -0,0 +1,5 @@
+<template>
+<div>
+  Tab content #3
+</div>
+</template>

one/docs/components/tag.md

@@ -0,0 +1,100 @@
+# Tag <small>标签</small>
+
+## 示例
+
+### 尺寸
+
+可选的尺寸 `ui` 属性值：`s`/`m`。
+
+[[ demo src="/demo/tag/size.vue" ]]
+
+### 可选择
+
+使用 `selectable` 属性使标签可以切换选中状态。
+
+[[ demo src="/demo/tag/selectable.vue" ]]
+
+### 可移除
+
+使用 `removable` 属性使标签可以被移除。
+
+[[ demo src="/demo/tag/removable.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `type` | `string=` | `'default'` | [^type] |
+| `selectable` | `boolean=` | `false` | 是否允许选择。 |
+| `selected` | `boolean=` | `false` | [^selected] |
+| `removable` | `boolean=` | `false` | 是否允许删除。 |
+| `removed` | `boolean=` | `false` | [^removed] |
+| `disabled` | `boolean=` | `false` | 是否禁用。 |
+
+:::warning
+`selectable` 和 `removable` 属性不允许同时为 `true`。
+:::
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `s` | 小内容尺寸。 |
+| `m` | 中内容尺寸。 |
+| `reverse` | 反色样式。 |
+| `bordered` | 带边框样式。 |
++++
+^^^
+
+^^^type
+标签类型。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `default` | 默认标签。 |
+| `info` | 信息提示标签。 |
+| `success` | 成功标签。 |
+| `warning` | 警告标签。 |
+| `error` | 错误标签。 |
++++
+^^^
+
+^^^selected
+:::badges
+`.sync`
+:::
+
+是否已被选中。
+^^^
+
+^^^removed
+:::badges
+`.sync`
+:::
+
+是否已被删除。
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 内容区。 |
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `remove` | 点击删除按钮时触发。 |
+
+### 图标
+
+| 名称 | 描述 |
+| -- | -- |
+| `remove` | 删除。 |

one/docs/components/textarea.md

@@ -0,0 +1,89 @@
+# Textarea <small>文本域</small>
+
+## 示例
+
+### 尺寸
+
+可选的 `ui` 属性值：`s`/`m`。
+
+[[ demo src="/demo/textarea/size.vue" ]]
+
+### 只读状态
+
+设置 `readonly` 来使文本域处于只读状态。
+
+[[ demo src="/demo/textarea/readonly.vue" ]]
+
+### 禁用状态
+
+设置 `disabled` 来使文本域处于禁用状态。
+
+[[ demo src="/demo/textarea/disabled.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `value` | `string` | '' | [^value] |
+| `disabled` | `boolean=` | `false` | 文本域是否为禁用状态。 |
+| `readonly` | `boolean=` | `false` | 文本域是否为只读状态。 |
+| `line-number` | `boolean` | `false` | 是否显示行号。 |
+| `rows` | `number|string` | - | 默认情况下文本域可视行数。 |
+| `placeholder` | `string` | - | 输入占位符。 |
+| `composition` | `boolean` | `false` | 是否感知输入法输入过程的值。 |
+| `select-on-focus` | `boolean` | `false` | 聚焦时是否自动选中文本域文本。 |
+| `autoresize` | `boolean` | `false` | 高度是否会被内容撑开。 |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
++++
+^^^
+
+^^^value
+:::badges
+`v-model`
+:::
+
+文本域的值。
+^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `change` | [^event-change] |
+| `input` | [^event-input] |
+
+^^^event-change
+输入框内容变化时触发，即原生 `change` 事件触发时。回调参数为 `(value, event)`。
+
++++参数详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `value` | `string` | 文本域的值。 |
+| `event` | [`Event`](https://developer.mozilla.org/zh-CN/docs/Web/Events/change) | 原生 `change` 事件对象。 |
++++
+^^^
+
+^^^event-input
+:::badges
+`v-model`
+:::
+
+有效输入时触发，受 `composition` 属性影响。回调参数为 `(value: string)`，`value` 为输入框的 `value` 值。
+^^^
+
+此外，`Textarea` 支持如下的原生事件：
+
+`auxclick`、`click`、`contextmenu`、`dblclick`、`mousedown`、`mouseenter`、`mouseleave`、`mousemove`、`mouseover`、`mouseout`、`mouseup`、`select`、`wheel`、`keydown`、`keypress`、`keyup`、`focus`、`blur`、`focusin`、`focusout`。
+
+回调函数的参数都为原生事件对象。

one/docs/components/time-picker.md

@@ -0,0 +1,114 @@
+# TimePicker <small>时间选择</small>
+
+## 示例
+
+### 三种模式
+
+支持三种模式，分别是 `hour`、`minute` 和 `second`，可以通过 `mode` 属性来控制。
+
+[[ demo src="/demo/time-picker/mode.vue" ]]
+
+### 定制时间选项
+
+支持定制时间选项，分别可以通过 `hours`、`minutes` 和 `seconds` 来定制对应的时间选项。
+
+[[ demo src="/demo/time-picker/datasource.vue" ]]
+
+### 范围限制
+
+支持范围限制，可以通过 `min` 和 `max` 来分别设置最小值和最大值。
+
+[[ demo src="/demo/time-picker/range.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `mode` | `string` | `'second'` | 指定选择的粒度，分别精确到时（`hour`）、分（`minute`）、秒（`second`）。 |
+| `value` | `string` |  | [^prop-value] |
+| `placeholder` | `string` | `timepicker.placeholder` | 未选择时的占位文本。 |
+| `hours` | `Array<number>` | - | 小时选项，默认 0-23。 |
+| `minutes` | `Array<number>` | - | 分钟选项，默认 0-59。 |
+| `seconds` | `Array<number>` | - | 秒钟选项，默认 0-59。 |
+| `min` | `string` | - | 最小值限制。 |
+| `max` | `string` | - | 最大值限制。 |
+| `autofocus` | `boolean` | `false` | 是否自动获得焦点。 |
+| `clearable` | `boolean` | `false` | 已选值是否可以清除。 |
+| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
+| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
+
+^^^ui
+预设样式。为空格分隔的一组枚举值的组合。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
++++
+^^^
+
+^^^prop-value
+:::badges
+`v-model`
+:::
+
+当前选中的值。
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `option` | [^scoped-slot-option] |
+
+^^^scoped-slot-option
+
+下拉面板中的时间选项插槽。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 用来显示的文字描述。 |
+| `value` | `string` | 实际对应的值。 |
+| `disabled` | `boolean=` | 是否禁用。 |
+| `part` | `string` | 该选项是哪个部分，分别是 `hour`/`minute`/`second`。 |
++++
+^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `input` | [^event-input] |
+| `change` | 若当前选中的值发生变化，在时间选择下拉面板关闭时会触发该事件，参数是当前选中值。 |
+| `clear` | 清除当前选中的值。 |
+
+^^^event-input
+:::badges
+`v-model`
+:::
+
+当手动输入或下拉面板中选值会触发该事件，参数是当前输入值。
+^^^
+
+### 全局配置
+
+| 配置项 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `timepicker.placeholder` | `string` | `@@timepickerpicker.placeholder` | 未选择时的占位文本。 |
+
+:::tip
+`@@` 开头的值表示引用多语言配置中的相应字段。
+:::
+
+### 图标
+
+| 名称 | 描述 |
+| -- | -- |
+| `clock` | 时钟。 |
+| `clear` | 清除内容。 |
+

one/docs/components/toast.md

@@ -0,0 +1,74 @@
+# Toast <small>消息提示</small>
+
+## 示例
+
+### 类型
+
+`Toast` 有四种类型，分别是 `info`、`success`、`warning` 和 `error`，可以通过 `type` 属性指定不同的类型。
+
+[[ demo src="/demo/toast/default.vue" ]]
+
+### 命令式调用
+
+可使用 `veui/plugins/toast` 模块加载 [`toast` 插件](../plugins/toast)进行命令式调用。
+
+[[ demo src="/demo/toast/plugin.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `open` | `boolean` | `false` | [^open] |
+| `type` | `string` | `'success'` | [^type] |
+| `message` | `string` | - | 消息内容。 |
+| `duration` | `number` | `toast.duration` | 消息展示时间毫秒数，超过此事件则消息提示自动关闭。 |
+
+^^^open
+:::badges
+`.sync`
+:::
+
+是否显示消息提示。
+^^^
+
+^^^type
+警告框类型。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `info` | 信息提示样式。 |
+| `success` | 成功样式。 |
+| `warning` | 警告样式。 |
+| `error` | 错误样式。 |
++++
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 内容区。默认显示 `message` 属性的内容。 |
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `close` | 消息自动关闭后触发。 |
+
+### 全局配置
+
+| 配置项 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `toast.duration` | `number` | `3000` | 消息默认展示时间毫秒数。 |
+
+### 图标
+
+| 名称 | 描述 |
+| -- | -- |
+| `info` | 普通信息。 |
+| `success` | 成功状态。 |
+| `warning` | 警告状态。 |
+| `error` | 错误状态。 |

one/docs/components/tooltip.md

@@ -0,0 +1,78 @@
+# Tooltip <small>浮层提示</small>
+
+## 示例
+
+### 风格
+
+可选的风格 `ui` 属性值：`alt`。
+
+[[ demo src="/demo/tooltip/style.vue" ]]
+
+### 定位
+
+使用 `position` 属性来指定浮层显示的位置。
+
+[[ demo src="/demo/tooltip/position.vue" ]]
+
+### 触发时机
+
+使用 `trigger` 属性来指定显示/隐藏浮层的时机。
+
+[[ demo src="/demo/tooltip/trigger.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `open` | `boolean` | `false` | [^open] |
+| `target` | `string|Vue|Node` | - | 参考 [`Overlay`](./overlay) 组件的 `target` 属性。 |
+| `position` | `string` | `'top'` | [^position] |
+| `trigger` | `string` | `'hover'` | [^trigger] |
+| `interactive` | `boolean` | `true` | 浮层内容是否允许交互。如果为 `false` 则在 `target` 外满足 `trigger` 指定的条件浮层即自动关闭。 |
+| `hide-delay` | `number` | `tooltip.hideDelays` | 触发关闭条件满足后延迟关闭等待时间的毫秒数。可以用来防止光标移出 `target` 后移入浮层进行交互前已经自动关闭。 |
+| `overlay-class` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class` 属性](./overlay#属性)。 |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `reverse` | 反色样式。 |
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
++++
+^^^
+
+^^^open
+:::badges
+`.sync`
+:::
+
+是否显示浮层提示。
+^^^
+
+^^^position
+指定定位参数。使用 [Popper.js](https://popper.js.org/) 风格的定位语法指定，可参考 [`Popper.placements`](https://popper.js.org/popper-documentation.html#Popper.placements)。
+^^^
+
+^^^trigger
+触发浮层提示的方式。支持指定的值为 `v-outside` 指令绑定值的 `trigger` 参数，并支持使用 <code>&#0096;${open}-${close}&#0096;</code> 语法分别指定触发打开/关闭提示的时机。另外，当 `trigger` 指定为 `custom` 时，将不会使用 `v-outside` 功能自动进行处理。
+
+例如：`click` 表示点击 `target` 后打开，在空白处点击时关闭；`hover-mousedown` 表示光标移入 `target` 后打开，在空白处按下鼠标时关闭。
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `default` | 浮层提示内容。 |
+
+### 全局配置
+
+| 配置项 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `tooltip.hideDelay` | `number` | `300` | 见 [`hide-delay` 属性](#属性)。 |

one/docs/components/transfer.md

@@ -0,0 +1,170 @@
+# Transfer <small>穿梭框</small>
+
+## 示例
+
+### 尺寸
+
+可选的尺寸 `ui` 属性值：`s`/`m`。
+
+[[ demo src="/demo/transfer/size.vue" ]]
+
+### 无搜索
+
+[[ demo src="/demo/transfer/no-search.vue" ]]
+
+### 自定义搜索
+
+[[ demo src="/demo/transfer/custom-search.vue" ]]
+
+### 扁平输出树形数据
+
+[[ demo src="/demo/transfer/flat.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `datasource` | `Array<Object>` | `[]` | [^datasource] |
+| `searchable` | `boolean` | `true` | 是否允许搜索。 |
+| `filter` | `function` | 见描述 | [^filter] |
+| `selected` | `Array` | `[]` | [^selected] |
+| `candidate-placeholder` | `string` | - | 待选区内搜索框的占位文本。 |
+| `selected-placeholder` | `string` | - | 已选区内搜索框的占位文本。 |
+| `selected-show-mode` | `string` | `'tree'` | [^selected-show-mode] |
+| `keys` | `string|function` | `'value'` | [^keys] |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
++++
+^^^
+
+^^^datasource
+数据源数组，每个项目类型为 `{label, value, disabled, children, ...}`。
+
++++字段详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 项目的文字描述。 |
+| `value` | `string` | 项目对应的值。 |
+| `disabled` | `boolean=` | 项目是否被禁用。 |
+| `children` | `Array<Object>=` | 项目的子项目数组，数组项类型同 `datasource` 数组项。 |
++++
+^^^
+
+^^^filter
+搜索过滤函数，签名为 `function(from, keyword, item, index, datasource): boolean`。返回值为 `false` 的项目将被从结果中过滤掉。
+
++++参数详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `from` | `string` | 搜索来源，可选枚举值：`'candidate'`、`'selected'`。`'candidate'` 表示是备选列表触发的搜索，`'selected'` 表示是已选列表触发的搜索。 |
+| `keyword` | `string` | 搜索关键词。 |
+| `item` | `Object` | 当前遍历到的数据项。 |
+| `index` | `number` | 当前数据项在兄弟项目中的索引。 |
+| `datasource` | `Array<Object>` | 与 `datasource` 属性一致。 |
++++
+
++++默认值
+```js
+import { includes } from 'lodash'
+
+function (keyword, { label }) {
+  return includes(label, keyword)
+}
+```
++++
+^^^
+
+^^^selected
+:::badges
+`v-model`
+:::
+
+当前选中的值，是 `datasource` 中选中项的 `value` 集合（受 `keys` 属性影响）。
+^^^
+
+^^^selected-show-mode
+选中框中选中项的显示方式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `tree` | 以树形结构展示。 |
+| `flat` | 以扁平方式展示，数据展开成一维数组。 |
++++
+^^^
+
+^^^keys
+自定义获取 `datasource` 中每一项的 `value` 值（具备唯一性）。可以用字符串的形式直接指定 `datasource` 中的哪个属性作为 `value`，也可以传递一个函数更加灵活地去生成 `value` 值。
+
+若类型为 `function`，参数为 `(item: Object)`，`item` 是 `datasource` 中的一个节点的属性，返回值是添加到 `selected` 中的值。
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `candidate-head` | 待选区内顶部标题区域。 |
+| `selected-head` | 已选区内顶部标题区域。 |
+| `candidate-title` | 待选区内顶部标题文本区域。 |
+| `selected-title` | 已选区内顶部标题文本区域。 |
+| `candidate-no-data` | 数据源没数据时显示的内容。 |
+| `selected-no-data` | 没有已选项时显示的内容。 |
+| `candidate-item` | [^candidate-item] |
+| `selected-item` | [^selected-item] |
+| `candidate-item-label` | 待选区内每一项的文本区域。作用域参数与 `candidate-item` 一致。 |
+| `selected-item-label` | 已选区内每一项的文本区域。当 `selected-show-mode` 为 `'tree'` 时作用域参数与 `selected-item` 一致。否则该插槽对应每个已选叶子项目的整条路径上的每个节点内容，此时作用域参数与 `candidate-item` 一致。 |
+
+^^^candidate-item
+待选区内的每一项内容。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 项目的文本描述。 |
+| `value` | `string` | 项目的值。 |
+| `disabled` | `boolean=` | 项目是否被禁用。 |
+| `children` | `Array<Object>=` | 项目的子项目数组，数组项类型同 `datasource` 数组项。 |
+| `index` | `number` | 当前项目在同层级兄弟项中的索引。 |
+| `depth` | `number` | 当前项目在树结构中的深度。 |
++++
+^^^
+
+^^^selected-item
+已选区内的每一项内容。
+
++++作用域参数
+如果 `Transfer` 组件的 `selected-show-mode` 为 `'tree'`，则作用域参数与 `candidate-item` 一致；如果 `selected-show-mode` 为 `'flat'`，则作用域参数为：
+
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `items` | `Array<Object>` | 包含从树形结构的根项目到叶子项目的路径。数组项类型与 `datasource` 项目相同。 |
+| `index` | `number` | 当前项目在展开数组中的索引。 |
++++
+^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `select` | 切换选择时触发。回调参数为 `(selected: Array<string>)`。`selected` 为已选项 `value` 字段集合。 |
+
+### 图标
+
+| 名称 | 描述 |
+| -- | -- |
+| `checked` | 已选状态。 |
+| `select` | 待选择。 |
+| `remove` | 移除。 |
+| `expand` | 收起状态，点击后展开。 |
+| `collapse` | 展开状态，点击后收起。 |
+| `separator` | 当 `selected-show-mode` 为 `'flat'` 时层级间的分隔符。 |

one/docs/components/tree.md

@@ -0,0 +1,166 @@
+# Tree <small>树形控件</small>
+
+## 示例
+
+### 尺寸
+
+可选的尺寸 `ui` 属性值：`m`/`s`。
+
+[[ demo src="/demo/tree/size.vue" ]]
+
+### 控制展开、选中状态
+
+[[ demo src="/demo/tree/default.vue" ]]
+
+### 自定义内容
+
+[[ demo src="/demo/tree/custom-item.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | [^ui] |
+| `datasource` | `Array<Object>` | `[]` | [^datasource] |
+| `expanded` | `Array` | `[]` | [^expanded] |
+| `checkable` | `boolean` | `false` | 子节点是否可勾选。 |
+| `checked` | `Array` | `[]` | [^checked] |
+| `selectable` | `boolean` | `false` | 点击整个节点区域时是否选中该节点。 |
+| `selected` | `string` | - | [^selected] |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `s` | 小尺寸样式。 |
+| `m` | 中尺寸样式。 |
++++
+^^^
+
+^^^datasource
+数据源数组，每个项目类型为 `{label, value, disabled, children, ...}`。
+
++++字段详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 节点的文字描述。 |
+| `value` | `string` | 节点对应的值。 |
+| `disabled` | `boolean=` | 节点是否被禁用。 |
+| `children` | `Array<Object>=` | 节点的子节点数组，数组项类型同 `datasource` 数组项。 |
++++
+^^^
+
+^^^expanded
+:::badges
+`.sync`
+:::
+
+指定当前展开的节点，是一个对应于 `datasource` 中节点数据中 `value` 属性的数组。
+^^^
+
+^^^checked
+:::badges
+`v-model`
+:::
+
+当前被勾选的叶节点的值，是一个对应于 `datasource` 中节点数据中 `value` 属性的数组。
+^^^
+
+^^^selected
+:::badges
+`.sync`
+:::
+
+当前被选中的叶节点的值，是一个对应于 `datasource` 中节点数据中 `value` 属性的数组。
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `item` | [^item] |
+| `item-label` | 每个节点的文本区域。作用域参数与 `item` 插槽一致。 |
+| `item-prepend` | 每个节点的文本之前的区域。作用域参数与 `item` 插槽一致。 |
+| `item-append` | 每个节点的文本之后的区域。作用域参数与 `item` 插槽一致。 |
+
+^^^item
+每个节点的整个内容区域。
+
++++参数属性
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `label` | `string` | 节点的文本描述。 |
+| `value` | `string` | 节点的值。 |
+| `disabled` | `boolean=` | 节点是否被禁用。 |
+| `children` | `Array<Object>=` | 节点的子节点数组，数组项类型同 `datasource` 数组项。 |
+| `index` | `number` | 当前数据节点在共父节点层级的索引。 |
+| `depth` | `number` | 当前数据节点在树种的深度。 |
++++
+
+另外，`datasource` 内数据项中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
+^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `click` | [^click] |
+| `expand` | [^expand] |
+| `collapse` | [^collapse] |
+| `check` | [^check] |
+
+^^^click
+点击节点触发，回调参数为 `(item, parents, index, depth)`。
+
++++参数详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `item` | `Object` | 节点数据。数组项类型与 `datasource` 项目相同。 |
+| `parents` | `Array<Object>` | 从根节点到当前节点父节点的路径。数组项类型与 `datasource` 项目相同。 |
+| `index` | `number` | 当前节点在自己所属层级的索引。 |
+| `depth` | `number` | 当前节点在树形层级中的深度。 |
++++
+^^^
+
+^^^expand
+节点展开时触发。回调参数为 `(item, index, depth)`。
+
++++参数详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `item` | `Object` | 节点数据。数组项类型与 `datasource` 项目相同。 |
+| `index` | `number` | 当前节点在自己所属层级的索引。 |
+| `depth` | `number` | 当前节点在树形层级中的深度。 |
++++
+^^^
+
+^^^collapse
+点击收起图标或者整个节点时触发，由 `item-click` 属性决定，回调参数为 `(item, index, depth)`。
+
++++参数详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `item` | `Object` | 节点数据。数组项类型与 `datasource` 项目相同。 |
+| `index` | `number` | 当前节点在自己所属层级的索引。 |
+| `depth` | `number` | 当前节点在树形层级中的深度。 |
++++
+^^^
+
+^^^check
+:::badges
+`v-model`
+:::
+
+勾选状态变化后触发，回调参数为 `(value: Array)`。`value` 为当前勾选中的叶节点的 `value` 字段组成的数组（受 `keys` 属性影响）。
+^^^
+
+### 图标
+
+| 名称 | 描述 |
+| -- | -- |
+| `expand` | 收起状态，点击后展开。 |
+| `collapse` | 展开状态，点击后收起。 |

one/docs/components/uploader.md

@@ -0,0 +1,312 @@
+# Uploader <small>上传</small>
+
+## 示例
+
+### 文件上传
+
+设置 `type` 的值为 `file` 进入文件上传模式。
+
+[[ demo src="/demo/uploader/file.vue" ]]
+
+### 图片上传
+
+设置 `type` 的值为 `image` 进入图片上传模式。
+
+[[ demo src="/demo/uploader/image.vue" ]]
+
+### 前端校验
+
+图片格式、大小、数量校验以及使用 `validator` 自定义校验。
+
+[[ demo src="/demo/uploader/validate.vue" ]]
+
+### 自定义配置
+
+使用 `upload` 自定义上传过程，使用 `controls` 配置浮层操作项。
+
+[[ demo src="/demo/uploader/custom.vue" ]]
+
+## API
+
+### 属性
+
+| 属性 | 类型 | 默认值 | 描述 |
+| --- | --- | --- | --- |
+| `type` | `string` | `'file'` | [^type] |
+| `value` | `Object|Array<Object>` | - | [^value] |
+| `name` | `string` | `'file'` | 原生 `<input>` 元素的 `name`。 |
+| `action` | `string` | - | 上传地址。 |
+| `headers` | `Object` | `uploader.headers` | 需要加入 [HTTP 请求头](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers) 的内容。可进行全局统一配置。 |
+| `with-credentials` | `boolean` | `true` | 同 `XMLHttpRequest` 的 `with-credentials` 属性。 |
+| `request-mode` | `string` | `uploader.requestMode` | [^request-mode] |
+| `iframe-mode` | `string` | `uploader.iframeMode` | [^iframe-mode] |
+| `callback-namespace` | `string` | `uploader.callbackNamespace` | 在 `request-mode` 的值为 `'iframe'` 并且 `iframe-mode` 的值为 `'callback'` 的模式下，指定回调函数的命名空间，放在 `window` 对象下。可进行全局统一配置。 |
+| `data-type`| `string` | `'json'` | [^data-type] |
+| `convert-response` | `uploader.convertResponse` | - | [^convert-response] |
+| `accept` | `string` | - | 与原生 `<input>` 元素 的 `accept` 相同，在浏览器的文件类型筛选后再加一层校验。对于类似 `application/msword` 这样的 MIME type 与扩展名对不上的情形跳过校验。 |
+| `extensions` | `Array<string>` | `['jpg', 'jpeg', 'gif', 'png', 'bmp', 'tif', 'tiff', 'webp', 'apng', 'svg']` | 如果 `accept` 的值是类似 `'image/*'` 这样的形式，可以指定能通过校验的所有的扩展名。 |
+| `max-count` | `number` | - | 最大文件数量。 |
+| `max-size` | `number|string` | - | 单个文件的最大大小，如果是 `number`，单位是 `byte`；如果是 `string`，支持在数字后面添加单位，单位可以是 `b`/`kb`/`mb`/`gb`/`tb`。 |
+| `validator` | `function(Object): Object|Promise<Object>` | - | [^validator] |
+| `payload` | `Object` | - | 附带在上传请求中的额外参数。 |
+| `autoupload` | `boolean` | `true` | 指定是否在选完文件后立刻上传。 |
+| `order` | `string` | `'asc'` | [^order] |
+| `picker-position` | `string` | `'after'` | [^picker-position] |
+| `upload` | `function(Object, Object): function` | - | [^upload] |
+| `controls` | `function(Object, Array<Object>): Array<Object>` | - | [^controls] |
+
+^^^type
+上传类型。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `file` | 文件上传。 |
+| `image` | 图片上传。 |
++++
+^^^
+
+^^^value
++++字段详情
+| `max-count` | 字段类型 |
+| -- | -- |
+| `1` | `Object` |
+| 大于 `1` 或 `null` | `Array<Object>` |
+
+每个文件对象的类型为 `{name: string, src: string, ...}`，以及在 `convert-response` 中自定义添加的字段。
++++
+^^^
+
+^^^request-mode
+指定异步上传方式。可进行全局统一配置。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `xhr` | 通过 `XMLHttpRequest` 上传。 |
+| `iframe` | 通过 `<iframe>` 上传。 |
+| `custom` | 自定义上传过程，通过 prop `upload` 方法上传。 |
++++
+^^^
+
+^^^iframe-mode
+指定在 `request-mode` 的值为 `iframe` 的模式下，上传成功后的回调方式。可进行全局统一配置。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `postmessage` | 通过 `PostMessage` 回调。 |
+| `callback` | 通过调用 `window` 的 `callback-namespace` 里的回调函数回调。 |
++++
+^^^
+
+^^^data-type
+如果回调的值是文本, 指明文本的解析方式。如果回调的数据是 `Object`，则 `data-type` 可以为空。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `json` | 回调的文本是 JSON。 |
+| `text` | 回调的文本是普通文本。 |
++++
+^^^
+
+^^^convert-response
+将回调数据转换成需要的格式的函数，使组件能够判断上传是否成功以便显示相应结果，参数是回调数据。返回结果的格式要求如下：
+
++++字段详情
+| 字段 | 类型 | 描述 |
+| -- | -- | -- |
+| `success` | `boolean` | 表示上传是否成功。 |
+| `name` | `string=` | 文件的名称。`success` 为 `true` 时必须。 |
+| `src` | `string=` | 文件的地址。`success` 为 `true` 时必须。 |
+| `message` | `string=` | 上传失败时的出错信息。`success` 为 `false` 时必须。 |
+
+还可以给返回结果加上其它自定义的属性，这些自定义属性会被包含在 `value` 以及 `change`、`success`、`failure`、`remove`、`progress` 事件的回调参数 `file` 中 。可进行全局统一配置。
++++
+^^^
+
+^^^order
+上传文件的显示顺序，按照开始上传的时间排序。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `asc` | 升序排列。 |
+| `desc` | 降序排列。 |
++++
+^^^
+
+^^^picker-position
+图片上传模式下，上传按钮在图片队列中的位置。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `before` | 上传按钮始终在队列最前面。 |
+| `after` | 上传按钮始终在队列最后面。 |
++++
+^^^
+
+^^^validator
+自定义校验逻辑，参数为原生 [`File`](https://developer.mozilla.org/zh-CN/docs/Web/API/File) 对象。返回结果的格式要求如下：
+
++++字段详情
+| 字段 | 类型 | 描述 |
+| -- | -- | -- |
+| `valid` | `boolean` | 是否通过校验。 |
+| `message` | `string=` | `valid` 为 `false` 时的错误提示信息。 |
+
+支持异步校验，返回值可以是一个 resolve 上述返回结果的 `Promise`。
+
+^^^
+
+^^^upload
+在 `request-mode` 的值是 `'custom'` 的情况下自定义上传过程，第一个参数为原生 [`File`](https://developer.mozilla.org/zh-CN/docs/Web/API/File) 对象，第二个参数为包含与上传过程相关的回调函数的对象，具体字段如下：
+
++++字段详情
+| 字段 | 类型 | 描述 |
+| -- | -- | -- |
+| `onload` | `function` | 上传完成的回调函数，参数内容与 `convert-response` prop 返回值相同。 |
+| `onprogress` | `function` | 上传进度发生变化的回调函数，参数为 `{ loaded: number, total: number }`，`loaded` 为已上传部分大小，`total` 为文件总大小。 |
+| `onerror` | `function` | 上传出错的回调函数，参数为 `{ message: string }`，`message` 为错误提示信息。 |
+
+该方法如果返回一个函数，该函数将在用户操作取消或上传组件销毁时被调用，用来中断自定义上传过程。
+
+^^^
+
+^^^controls
+图片上传模式下，自定义配置图片遮罩浮层上的操作项，参数为 `(file: Object, defaultControls: Array<Object>)`，`file` 为文件相关信息，`defaultControls` 为包含默认的操作项的数组。该方法可根据文件状态的不同，返回包含不同的操作项的数组。每个操作项的具体字段如下：
+
++++字段详情
+| 字段 | 类型 | 描述 |
+| -- | -- | -- |
+| `name` | `string` | 操作项的名称，点击该按钮后会抛出同名的事件，事件的回调参数为 `(file: Object, index: number)`， `file` 为触发事件的文件对象，`index` 为文件在列表中的序号。 |
+| `icon` | `string` | 操作项使用的图标。 |
+| `disabled` | `boolean=` | 操作项是否被禁用。如果该字段为空，则该操作项的禁用状态跟随组件整体的禁用状态。 |
+
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `button-label` | [^button-label] |
+| `upload` | 图片上传模式下，上传按钮的区域。 |
+| `desc` | 对文件数量、格式、大小等的提示内容。 |
+| `file` | [^file] |
+| `file-before` | 单个文件内容之前的区域。作用域参数与 `file` 作用域插槽相同。 |
+| `file-after` | 单个文件内容之后的区域。作用域参数与 `file` 作用域插槽相同。 |
+| `uploading` | 图片上传模式下，上传中的单个图片的区域。作用域参数与 `file` 作用域插槽相同。 |
+| `failure` | 图片上传模式下，上传失败的单个图片的区域。作用域参数与 `file` 作用域插槽相同。 |
+
+^^^button-label
+上传文件的按钮里的内容。
+
+默认内容：提示选择文件。
+^^^
+
+^^^file
+单个文件的区域，用来定制文件内容。
+
++++作用域参数
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `name` | `string` | 文件的名称。 |
+| `src` | `string` | 文件的地址。 |
+| `status` | `string` | 文件的状态。`'success'` 表示上传成功；`'uploading'` 表示正在上传；`'failure'` 表示上传失败。 |
+| `index` | `number` | 文件在列表中的序号。 |
++++
+^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `change` | [^event-change] |
+| `remove` | [^event-remove] |
+| `success` | 上传成功时触发，回调参数与 `remove` 事件的回调参数相同。 |
+| `failure` | 上传失败时触发，回调参数与 `remove` 事件的回调参数相同。 |
+| `statuschange` | [^event-statuschange] |
+| `progress` | [^event-progress] |
+
+^^^event-change
+只在上传成功、删除文件时触发，回调参数为 `(value)`。
+
++++参数详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `value` | `Object|Array<Object>` | 组件的 `value` 的值。 |
++++
+^^^
+
+^^^event-remove
+删除文件时触发，回调参数为 `(file, index)`。
+
++++参数详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `file` | `Object` | 被删除的文件。 |
+| `index` | `number` | 被删除的文件的序号。 |
+
+`file` 字段详情
+
+| 字段 | 类型 | 描述 |
+| -- | -- | -- |
+| `name` | `string` | 文件名称。 |
+| `src` | `string` | 文件地址。 |
+| `status` | `string` | 上传状态。`'success'` 表示上传成功；`'uploading'` 表示正在上传；`'failure'` 表示上传失败。 |
+
+同时也包含在 `convert-response` 中添加的自定义属性。
++++
+^^^
+
+^^^event-statuschange
+在所有文件总的状态发生变化时触发，回调参数为组件整体的状态 `(status: string)`。
+
++++值详情
+| 值 | 描述 |
+| -- | -- |
+| `empty` | 没有选择任何文件上传。 |
+| `uploading` | 有任一文件正在上传中。 |
+| `failure` | 有任一文件上传失败。 |
+| `success` | 所有文件上传成功。 |
++++
+^^^
+
+^^^event-progress
+在 `request-mode` 的值为 `'xhr'` 的情况下，在上传进度发生变化时触发，回调参数为 `(file, index, event)`。
+
++++参数详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `file` | `Object` | 与 `remove` 事件的回调参数中的 `file` 相同。 |
+| `index` | `number` | 正在上传的文件的序号。 |
+| `event` | [`Event`](https://developer.mozilla.org/zh-CN/docs/Web/Events/progress) | 上传进度原生事件。 |
++++
+^^^
+
+### 全局配置
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `uploader.requestMode` | `string` | `'xhr'` | 参见 [`request-mode`](#props) 属性。 |
+| `uploader.iframeMode` | `string` | `'postmessage'` | 参见 [`iframe-mode`](#props) 属性。 |
+| `uploader.callbackNamespace` | `string` | `'veuiUploadResult'` | 参见 [`callback-namespace`](#props) 属性。 |
+| `uploader.headers` | `Object` | - | 参见 [`headers`](#props) 属性。 |
+| `uploader.convertResponse` | `function(Object): Object` | - | 参见 [`convert-response`](#props) 属性。 |
+| `uploader.pickerPosition` | `string` | `'after'` | 参见 [`picker-position`](#props) 属性。 |
+
+### 图标
+
+| 名称 | 描述 |
+| -- | -- |
+| `upload` | 上传文件。 |
+| `add-image` | 上传图片。 |
+| `clear` | 删除。 |
+| `success` | 上传成功。 |
+| `failure` | 上传失败。 |
+| `loading` | 上传中。 |
+| `file` | 已上传文件。 |
+| `alert` | 校验失败警告。 |
+| `preview` | 预览图片。 |

one/docs/demo/accordion/multiple.vue

@@ -0,0 +1,28 @@
+<template>
+<article>
+  <veui-accordion multiple>
+    <veui-collapse label="Sun">
+      The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. Its diameter is about 1.39 million kilometers (864,000 miles), or 109 times that of Earth, and its mass is about 330,000 times that of Earth. It accounts for about 99.86% of the total mass of the Solar System. Roughly three quarters of the Sun's mass consists of hydrogen (~73%); the rest is mostly helium (~25%), with much smaller quantities of heavier elements, including oxygen, carbon, neon, and iron.
+    </veui-collapse>
+    <veui-collapse label="Moon">
+      The Moon is an astronomical body orbiting Earth and is the planet's only natural satellite. It is the fifth-largest satellite in the Solar System, and by far the largest among planetary satellites relative to the size of the planet that it orbits. The Moon is, after Jupiter's satellite Io, the second-densest satellite in the Solar System among those whose densities are known.
+    </veui-collapse>
+  </veui-accordion>
+</article>
+</template>
+
+<script>
+import { Accordion, Collapse } from 'veui'
+
+export default {
+  components: {
+    'veui-accordion': Accordion,
+    'veui-collapse': Collapse
+  }
+}
+</script>
+
+<style lang="stylus" scoped docs>
+section
+  margin-bottom 20px
+</style>

one/docs/demo/accordion/size.vue

@@ -0,0 +1,40 @@
+<template>
+<article>
+  <section>
+    <veui-accordion>
+      <veui-collapse label="Sun">
+        The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. Its diameter is about 1.39 million kilometers (864,000 miles), or 109 times that of Earth, and its mass is about 330,000 times that of Earth. It accounts for about 99.86% of the total mass of the Solar System. Roughly three quarters of the Sun's mass consists of hydrogen (~73%); the rest is mostly helium (~25%), with much smaller quantities of heavier elements, including oxygen, carbon, neon, and iron.
+      </veui-collapse>
+      <veui-collapse label="Moon">
+        The Moon is an astronomical body orbiting Earth and is the planet's only natural satellite. It is the fifth-largest satellite in the Solar System, and by far the largest among planetary satellites relative to the size of the planet that it orbits. The Moon is, after Jupiter's satellite Io, the second-densest satellite in the Solar System among those whose densities are known.
+      </veui-collapse>
+    </veui-accordion>
+  </section>
+  <section>
+    <veui-accordion ui="s">
+      <veui-collapse label="Sun">
+        The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. Its diameter is about 1.39 million kilometers (864,000 miles), or 109 times that of Earth, and its mass is about 330,000 times that of Earth. It accounts for about 99.86% of the total mass of the Solar System. Roughly three quarters of the Sun's mass consists of hydrogen (~73%); the rest is mostly helium (~25%), with much smaller quantities of heavier elements, including oxygen, carbon, neon, and iron.
+      </veui-collapse>
+      <veui-collapse label="Moon">
+        The Moon is an astronomical body orbiting Earth and is the planet's only natural satellite. It is the fifth-largest satellite in the Solar System, and by far the largest among planetary satellites relative to the size of the planet that it orbits. The Moon is, after Jupiter's satellite Io, the second-densest satellite in the Solar System among those whose densities are known.
+      </veui-collapse>
+    </veui-accordion>
+  </section>
+</article>
+</template>
+
+<script>
+import { Accordion, Collapse } from 'veui'
+
+export default {
+  components: {
+    'veui-accordion': Accordion,
+    'veui-collapse': Collapse
+  }
+}
+</script>
+
+<style lang="stylus" scoped docs>
+section
+  margin-bottom 20px
+</style>

one/docs/demo/alert-box/title.vue

@@ -0,0 +1,65 @@
+<template>
+<article>
+  <veui-button @click="open1 = true">
+    title prop
+  </veui-button>
+  <veui-button @click="open2 = true">
+    title slot
+  </veui-button>
+
+  <veui-alert-box
+    type="success"
+    :open.sync="open1"
+    title="Success"
+    @ok="ok"
+  >
+    <p>Saved successfully!</p>
+  </veui-alert-box>
+
+  <veui-alert-box
+    type="success"
+    :open.sync="open2"
+    @ok="ok"
+  >
+    <template #title>
+      Success
+      <veui-icon name="info-circle"/>
+    </template>
+    <p>Saved successfully!</p>
+  </veui-alert-box>
+</article>
+</template>
+
+<script>
+import { AlertBox, Button, Icon } from 'veui'
+import 'veui-theme-dls-icons/info-circle'
+import toast from 'veui/managers/toast'
+
+export default {
+  components: {
+    'veui-alert-box': AlertBox,
+    'veui-button': Button,
+    'veui-icon': Icon
+  },
+  data () {
+    return {
+      open1: false,
+      open2: false
+    }
+  },
+  methods: {
+    ok () {
+      toast.info('Confirmed')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+.veui-button {
+  margin-right: 10px;
+}
+.icon {
+  vertical-align: -2px;
+}
+</style>

one/docs/demo/alert-box/type.vue

@@ -0,0 +1,67 @@
+<template>
+<article>
+  <veui-button @click="successOpen = true">
+    Success
+  </veui-button>
+  <veui-button @click="errorOpen = true">
+    Error
+  </veui-button>
+  <veui-button @click="infoOpen = true">
+    Info
+  </veui-button>
+
+  <veui-alert-box
+    type="success"
+    :open.sync="successOpen"
+  >
+    <template #title>
+      Success
+    </template>
+    <div>Saved successfully!</div>
+  </veui-alert-box>
+
+  <veui-alert-box
+    type="error"
+    :open.sync="errorOpen"
+  >
+    <template #title>
+      Error
+    </template>
+    <div>Not enough disk space!</div>
+  </veui-alert-box>
+
+  <veui-alert-box
+    type="info"
+    :open.sync="infoOpen"
+  >
+    <template #title>
+      Sytstem
+    </template>
+    <div>The total available storage is 5MB.</div>
+  </veui-alert-box>
+</article>
+</template>
+
+<script>
+import { AlertBox, Button } from 'veui'
+
+export default {
+  components: {
+    'veui-alert-box': AlertBox,
+    'veui-button': Button
+  },
+  data () {
+    return {
+      successOpen: false,
+      errorOpen: false,
+      infoOpen: false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+.veui-button {
+  margin-right: 10px;
+}
+</style>

one/docs/demo/alert/multiple.vue

@@ -0,0 +1,46 @@
+<template>
+<article>
+  <veui-alert
+    type="info"
+    close-label="Got it"
+    closable
+    :open.sync="open"
+    :message="messages"
+  />
+  <section v-if="!open">
+    <veui-button @click="open = true">
+      Open
+    </veui-button>
+  </section>
+</article>
+</template>
+
+<script>
+import { Alert, Button } from 'veui'
+
+export default {
+  components: {
+    'veui-alert': Alert,
+    'veui-button': Button
+  },
+  data () {
+    return {
+      open: true,
+      messages: [
+        'Component data must be a function.',
+        'Prop definitions should be as detailed as possible.',
+        'Always use key with v-for.',
+        'Never use v-if on the same element as v-for.'
+      ]
+    }
+  }
+}
+</script>
+
+<docs>
+可以指定 `closable` 属性为 `true` 来允许提示被用户主动关闭，还可以通过指定 `close-label` 属性来将关闭按钮以文字形式展现。
+</docs>
+
+<docs locale="en-US">
+Set the `closable` prop to `true` to allow the alert message to be closed by users. You can also use the `close-label` prop to make the close button shown as specified text.
+</docs>