docs(transfer): add docs files

packages/transfer/doc/base-usage.vue

@@ -0,0 +1,28 @@
+<template>
+  <el-transfer
+    v-model="value"
+    :data="data"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    const generateData = () => {
+      const data = []
+      for (let i = 1; i <= 15; i++) {
+        data.push({
+          key: i + '',
+          label: `Option ${ i }`,
+          disabled: i % 4 === 0,
+        })
+      }
+      return data
+    }
+    return {
+      data: generateData(),
+      value: ['1', '4'],
+    }
+  },
+}
+</script>

packages/transfer/doc/customizable.vue

@@ -0,0 +1,95 @@
+<template>
+  <p style="text-align: center; margin: 0 0 20px">Customize data items using render-content</p>
+  <div style="text-align: center">
+    <el-transfer
+      v-model="value"
+      style="text-align: left; display: inline-block"
+      filterable
+      :left-default-checked="['2', '3']"
+      :right-default-checked="['1']"
+      :render-content="renderFunc"
+      :titles="['Source', 'Target']"
+      :button-texts="['To left', 'To right']"
+      :format="{
+        noChecked: '${total}',
+        hasChecked: '${checked}/${total}'
+      }"
+      :data="data"
+      @change="handleChange"
+    >
+      <template #left-footer>
+        <el-button class="transfer-footer" size="small">Operation</el-button>
+      </template>
+      <template #right-footer>
+        <el-button class="transfer-footer" size="small">Operation</el-button>
+      </template>
+    </el-transfer>
+    <p style="text-align: center; margin: 50px 0 20px">Customize data items using scoped slot</p>
+    <div style="text-align: center">
+      <el-transfer
+        v-model="value4"
+        style="text-align: left; display: inline-block"
+        filterable
+        :left-default-checked="['2', '3']"
+        :right-default-checked="['1']"
+        :titles="['Source', 'Target']"
+        :button-texts="['To left', 'To right']"
+        :format="{
+          noChecked: '${total}',
+          hasChecked: '${checked}/${total}'
+        }"
+        :data="data"
+        @change="handleChange"
+      >
+        <template #default="{option}">
+          <span>{{ option.key }} - {{ option.label }}</span>
+        </template>
+        <template #left-footer>
+          <el-button class="transfer-footer" size="small">Operation</el-button>
+        </template>
+        <template #right-footer>
+          <el-button class="transfer-footer" size="small">Operation</el-button>
+        </template>
+      </el-transfer>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    const generateData = () => {
+      const data = []
+      for (let i = 1; i <= 15; i++) {
+        data.push({
+          key: i + '',
+          label: `Option ${ i }`,
+          disabled: i % 4 === 0,
+        })
+      }
+      return data
+    }
+    return {
+      data: generateData(),
+      value: ['1'],
+      value4: ['1'],
+      renderFunc(h, option) {
+        return h('span', `${ option.key } - ${ option.label }`)
+      },
+    }
+  },
+
+  methods: {
+    handleChange(value, direction, movedKeys) {
+      console.log(value, direction, movedKeys)
+    },
+  },
+}
+</script>
+
+<style>
+.transfer-footer {
+  margin-left: 20px;
+  padding: 6px 5px;
+}
+</style>

packages/transfer/doc/filterable.vue

@@ -0,0 +1,36 @@
+<template>
+  <el-transfer
+    v-model="value"
+    filterable
+    :filter-method="filterMethod"
+    filter-placeholder="State Abbreviations"
+    :data="data"
+  />
+</template>
+
+<script>
+export default {
+  data () {
+    const generateData = () => {
+      const data = []
+      const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut ']
+      const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']
+      states.forEach((city, index) => {
+        data.push({
+          label: city,
+          key: index + '',
+          initial: initials[index],
+        })
+      })
+      return data
+    }
+    return {
+      data: generateData(),
+      value: [],
+      filterMethod (query, item) {
+        return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1
+      },
+    }
+  },
+}
+</script>

packages/transfer/doc/index.stories.ts

@@ -0,0 +1,13 @@
+export default {
+  title: 'Transfer',
+}
+
+
+export { default as BaseUsage } from './base-usage.vue'
+
+export { default as Filterable } from './filterable.vue'
+
+export { default as Customizable } from './customizable.vue'
+
+export { default as PropAliases } from './prop-aliases.vue'
+

packages/transfer/doc/prop-aliases.vue

@@ -0,0 +1,32 @@
+<template>
+  <el-transfer
+    v-model="value"
+    :props="{
+      key: 'value',
+      label: 'desc'
+    }"
+    :data="data"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    const generateData = () => {
+      const data = []
+      for (let i = 1; i <= 15; i++) {
+        data.push({
+          value: i + '',
+          desc: `Option ${ i }`,
+          disabled: i % 4 === 0,
+        })
+      }
+      return data
+    }
+    return {
+      data: generateData(),
+      value: [],
+    }
+  },
+}
+</script>