feat: publicize doc implemetation

one/docs/demo/input-group/default.vue

@@ -0,0 +1,126 @@
+<template>
+<article>
+  <section>
+    <h4>Select + Input + Button</h4>
+    <veui-input-group>
+      <veui-select
+        :options="protocols"
+        style="width: 100px"
+      />
+      <veui-input/>
+      <veui-button ui="primary">
+        Submit
+      </veui-button>
+    </veui-input-group>
+  </section>
+  <section>
+    <h4>Label + NumberInput + Button + <code>ui="s"</code></h4>
+    <veui-input-group ui="s">
+      <veui-label for="bid">
+        USD
+      </veui-label>
+      <veui-number-input
+        ref="bid"
+        v-model="bid"
+        style="width: 120px"
+      />
+      <veui-button>Submit</veui-button>
+    </veui-input-group>
+  </section>
+  <section>
+    <h4>NumberInput + Span + NumberInput + <code>ui="xs"</code></h4>
+    <veui-input-group ui="xs">
+      <veui-number-input v-model="width"/>
+      <veui-span>×</veui-span>
+      <veui-number-input v-model="height"/>
+    </veui-input-group>
+  </section>
+  <section>
+    <h4>Autocomplete + ButtonGroup</h4>
+    <veui-input-group>
+      <veui-autocomplete :datasource="suggestions"/>
+      <veui-button-group
+        :items="ops"
+        ui="primary"
+      />
+    </veui-input-group>
+  </section>
+  <section>
+    <h4>Select + SearchBox + <code>ui="l"</code></h4>
+    <veui-input-group ui="l">
+      <veui-select
+        :options="types"
+        :value="type"
+        style="width: 120px"
+      />
+      <veui-search-box/>
+    </veui-input-group>
+  </section>
+</article>
+</template>
+
+<script>
+import {
+  InputGroup,
+  ButtonGroup,
+  Select,
+  Input,
+  NumberInput,
+  Button,
+  Autocomplete,
+  SearchBox,
+  Label,
+  Span
+} from 'veui'
+
+export default {
+  name: 'text-input',
+  components: {
+    'veui-input-group': InputGroup,
+    'veui-button-group': ButtonGroup,
+    'veui-input': Input,
+    'veui-select': Select,
+    'veui-number-input': NumberInput,
+    'veui-button': Button,
+    'veui-autocomplete': Autocomplete,
+    'veui-search-box': SearchBox,
+    'veui-label': Label,
+    'veui-span': Span
+  },
+  data () {
+    return {
+      protocols: [
+        { label: 'https://', value: 'https' },
+        { label: 'http://', value: 'http' }
+      ],
+      bid: 1024,
+      width: 1024,
+      height: 768,
+      ops: [
+        { label: 'Save', value: 'save' },
+        { label: 'Submit', value: 'submit' }
+      ],
+      types: [
+        { label: 'By ID', value: 'id' },
+        { label: 'By Name', value: 'name' }
+      ],
+      type: 'id',
+      suggestions: [
+        { value: 'Steve Rogers' },
+        { value: 'Tony Stark' },
+        { value: 'Thor' },
+        { value: 'Hulk' },
+        { value: 'Stephen Strange' },
+        { value: 'Natasha Romanov' },
+        { value: 'Loki' }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+section {
+  margin-bottom: 20px;
+}
+</style>