feat: publicize doc implemetation

one/docs/demo/select/inline.vue

@@ -0,0 +1,102 @@
+<template>
+<article>
+  <veui-select
+    v-model="item"
+    placeholder="Pick one..."
+    clearable
+  >
+    <veui-option-group
+      label="Editors"
+      position="popup"
+    >
+      <veui-option
+        value="vscode"
+        label="VSCode"
+      />
+      <veui-option
+        value="sublime"
+        label="SublimeText"
+      />
+      <veui-option
+        value="atom"
+        label="Atom"
+      />
+    </veui-option-group>
+    <veui-option-group
+      label="Browsers"
+      position="popup"
+    >
+      <veui-option-group
+        label="Desktop"
+        position="popup"
+      >
+        <veui-option
+          value="ie"
+          label="IE"
+        />
+        <veui-option
+          value="edge"
+          label="Edge"
+        />
+        <veui-option
+          value="firefox"
+          label="Firefox"
+        />
+        <veui-option
+          value="chrome"
+          label="Chrome"
+        />
+      </veui-option-group>
+      <veui-option-group
+        label="Mobile"
+        position="popup"
+      >
+        <veui-option
+          value="ios_safari"
+          label="iOS Safari"
+        />
+        <veui-option
+          value="android"
+          label="Android Browser"
+        />
+        <veui-option
+          value="android_chrome"
+          label="Chrome for Android"
+        />
+      </veui-option-group>
+    </veui-option-group>
+  </veui-select>
+  <p>Selected: {{ item || '-' }}</p>
+</article>
+</template>
+
+<script>
+import { Select, OptionGroup, Option } from 'veui'
+
+export default {
+  components: {
+    'veui-select': Select,
+    'veui-option-group': OptionGroup,
+    'veui-option': Option
+  },
+  data () {
+    return {
+      item: null
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+.veui-select {
+  width: 180px;
+}
+</style>
+
+<docs>
+可以使用 `clearable` 属性将 `Select` 组件设置为允许删除已选值的模式。将 `OptionGroup` 的 `position` 属性设置为 `popup` 后可以让子选项在新的浮动子菜单中展现。
+</docs>
+
+<docs locale="en-US">
+`clearable` can be used to allow selected values to be discarded for `Select`. Set `position` of the embedded `OptionGroup`s to `popup` to display children options inside a popup menu.
+</docs>

one/docs/demo/select/multiple.vue

@@ -0,0 +1,79 @@
+<template>
+<article>
+  <section>
+    <veui-checkbox v-model="searchable">
+      Searchable
+    </veui-checkbox>
+  </section>
+  <section>
+    <veui-select
+      v-model="license"
+      multiple
+      :options="options"
+      :max="5"
+      :searchable="searchable"
+    />
+  </section>
+</article>
+</template>
+
+<script>
+import { Select, Checkbox } from 'veui'
+
+export default {
+  components: {
+    'veui-select': Select,
+    'veui-checkbox': Checkbox
+  },
+  data () {
+    return {
+      searchable: false,
+      license: null,
+      options: [
+        {
+          label: 'MIT',
+          value: 'mit'
+        },
+        {
+          label: 'BSD',
+          value: 'bsd'
+        },
+        {
+          label: 'Apache 2.0',
+          value: 'apache2'
+        },
+        {
+          label: 'GPL 3.0',
+          value: 'gpl3'
+        },
+        {
+          label: 'AGPL 3.0',
+          value: 'agpl3'
+        },
+        {
+          label: 'LGPL 2.1',
+          value: 'lgpl2'
+        },
+        {
+          label: 'MPL 2.0',
+          value: 'mpl2'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+section {
+  margin-bottom: 1em;
+}
+</style>
+
+<docs>
+可使用 `max` 属性控制选中选项的最大数量。这种场景下也可以使用 `searchable` 属性控制是否允许搜索选项。
+</docs>
+
+<docs locale="en-US">
+Use `max` to specify the max number of options that can be selected. The `searchable` prop can also be used here to make options searchable.
+</docs>

one/docs/demo/select/searchable.vue

@@ -0,0 +1,38 @@
+<template>
+<article>
+  <veui-select
+    v-model="license"
+    :options="options"
+    searchable
+  />
+</article>
+</template>
+
+<script>
+import { Select } from 'veui'
+
+export default {
+  components: {
+    'veui-select': Select
+  },
+  data () {
+    return {
+      license: null,
+      options: [
+        {
+          label: 'MIT',
+          value: 'mit'
+        },
+        {
+          label: 'BSD',
+          value: 'bsd'
+        },
+        {
+          label: 'Apache 2.0',
+          value: 'apache2'
+        }
+      ]
+    }
+  }
+}
+</script>

one/docs/demo/select/size.vue

@@ -0,0 +1,59 @@
+<template>
+<article>
+  <veui-select
+    v-model="license"
+    ui="l"
+    :options="options"
+  />
+  <veui-select
+    v-model="license"
+    :options="options"
+  />
+  <veui-select
+    v-model="license"
+    ui="s"
+    :options="options"
+  />
+  <veui-select
+    v-model="license"
+    ui="xs"
+    :options="options"
+  />
+</article>
+</template>
+
+<script>
+import { Select } from 'veui'
+
+export default {
+  components: {
+    'veui-select': Select
+  },
+  data () {
+    return {
+      license: null,
+      options: [
+        {
+          label: 'MIT',
+          value: 'mit'
+        },
+        {
+          label: 'BSD',
+          value: 'bsd'
+        },
+        {
+          label: 'Apache 2.0',
+          value: 'apache2'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+.veui-select {
+  max-width: 120px;
+  margin-right: 10px;
+}
+</style>