turn button/icon to functional

packages/button/src/button-group.js

+/**
+ * button
+ * @module components/basic/menu
+ * @desc 用于按钮组
+ * @param {string} label - 名称
+ */
+export default {
+  name: 'ElButtonGroup',
+
+  functional: true,
+
+  render(h, { slots, data }) {
+    return (
+      <div
+        class="el-button-group"
+        { ...data }
+        { ...{ on: data.nativeOn } }>
+        { slots().default }
+      </div>
+    );
+  }
+};

packages/button/src/button-group.vue

-<template>
-  <div class="el-button-group">
-    <slot></slot>
-  </div>
-</template>
-<script>
-  /**
-   * button
-   * @module components/basic/menu
-   * @desc 用于按钮组
-   * @param {string} label - 名称
-   */
-  export default {
-    name: 'ElButtonGroup'
-  };
-</script>

packages/button/src/button.js

+export default {
+  name: 'ElButton',
+
+  functional: true,
+
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    },
+    size: String,
+    icon: {
+      type: String,
+      default: ''
+    },
+    nativeType: {
+      type: String,
+      default: 'button'
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    plain: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  render(h, { props, slots, data }) {
+    return (
+      <button
+        disabled={ props.disabled }
+        type={ props.nativeType }
+        class={[
+          'el-button',
+          props.type ? 'el-button-' + props.type : '',
+          props.size ? 'el-button-' + props.size : '',
+          {
+            'is-disabled': props.disabled,
+            'is-loading': props.loading,
+            'is-plain': props.plain
+          }
+        ]}
+        { ...data }
+        { ...{ on: data.nativeOn } }>
+        {
+          [
+            props.loading
+              ? <i class="el-icon-loading"></i>
+              : {},
+            props.icon && !props.loading
+              ? <i class={ 'el-icon-' + props.icon }></i>
+              : {}
+          ]
+        }
+        { slots().default }
+      </button>
+    );
+  }
+};

packages/button/src/button.vue

-<template>
-  <button :disabled="disabled" class="el-button"
-    :type="nativeType"
-    :class="[
-      type ? 'el-button-' + type : '',
-      size ? 'el-button-' + size : '',
-      {
-        'is-disabled': disabled,
-        'is-loading': loading,
-        'is-plain': plain
-      }
-    ]"
-  >
-    <i class="el-icon-loading" v-if="loading"></i>
-    <i :class="'el-icon-' + icon" v-if="icon && !loading"></i>
-    <slot></slot>
-  </button>
-</template>
-<script>
-  /**
-   * button
-   */
-  export default {
-    name: 'ElButton',
-
-    props: {
-      type: {
-        type: String,
-        default: 'default'
-      },
-      size: String,
-      icon: {
-        type: String,
-        default: ''
-      },
-      nativeType: {
-        type: String,
-        default: 'button'
-      },
-      loading: {
-        type: Boolean,
-        default: false
-      },
-      disabled: {
-        type: Boolean,
-        default: false
-      },
-      plain: {
-        type: Boolean,
-        default: false
-      }
-    }
-  };
-</script>

packages/icon/index.js

-module.exports = require('./src/icon.vue');
+module.exports = require('./src/icon');

packages/icon/src/icon.js

+export default {
+  name: 'ElIcon',
+
+  functional: true,
+
+  props: {
+    name: String
+  },
+
+  render(h, { props, data }) {
+    return (
+      <i
+        class={ 'el-icon' + props.name }
+        { ...data }
+        { ...{ on: data.nativeOn } }>
+      </i>
+    );
+  }
+};

packages/icon/src/icon.vue

-<template>
-  <i :class="'el-icon-' + name"></i>
-</template>
-
-<script>
-  export default {
-    name: 'ElIcon',
-
-    props: {
-      name: String
-    }
-  };
-</script>