[
  {
    "path": ".babelrc",
    "content": "{\n  \"presets\": [\n    [\"env\", { \"modules\": false }]\n  ]\n}\n"
  },
  {
    "path": ".gitignore",
    "content": ".DS_Store\nnode_modules/\ndist/\nlib/\nnpm-debug.log\nyarn-error.log\n\n# Editor directories and files\n.idea\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2017 青鲤锦时\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# Egrid\n\n### 基于 `Element-UI` `Table` 组件封装的高阶表格组件，可无缝支持 element 的 table 组件。\n\nelement 升级到了 2.0 了， 不用担心可以无缝升级的~\n\n文档 [http://kinglisky.github.io/egrid](http://kinglisky.github.io/egrid)\n\n\n### 开发\n\n> `npm run dev`\n\n> `npm run build`\n\n> `npm run doc`\n\n\n### 使用\n\n安装 Element：\n\n> `npm i element-ui -S`\n\n安装 egrid:\n\n> `npm i egrid -S`\n\n`egrid` 只依赖 `Element` 中的 `Table` 与 `TableColumn` 组件不会将整个 `Element` 导入。\n但不包含样式，`Table` 的样式需要用户手动引入。\n\n使用：\n```javascript\nimport Vue from 'vue'\nimport Egrid from 'egrid'\n\n// table 的样式需要手动引入\nimport 'element-ui/lib/theme-default/icon.css'\nimport 'element-ui/lib/theme-default/table.css'\nimport 'element-ui/lib/theme-default/table-column.css'\n\n\n\n\n\nVue.use(Egrid)\n```\n\n为什么要在 element table 组价之上再封装一层呢？\n\n平时我们使用的 element table 时候往往是这样写的：\n\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    border\n    style=\"width: 100%\">\n    <el-table-column\n      label=\"日期\"\n      width=\"180\">\n      <template scope=\"scope\">\n        <el-icon name=\"time\"></el-icon>\n        <span style=\"margin-left: 10px\">{{ scope.row.date }}</span>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label=\"姓名\"\n      width=\"180\">\n      <template scope=\"scope\">\n        <el-popover trigger=\"hover\" placement=\"top\">\n          <p>姓名: {{ scope.row.name }}</p>\n          <p>住址: {{ scope.row.address }}</p>\n          <div slot=\"reference\" class=\"name-wrapper\">\n            <el-tag>{{ scope.row.name }}</el-tag>\n          </div>\n        </el-popover>\n      </template>\n    </el-table-column>\n    <el-table-column label=\"操作\">\n      <template scope=\"scope\">\n        <el-button\n          size=\"small\"\n          @click=\"handleEdit(scope.$index, scope.row)\">编辑</el-button>\n        <el-button\n          size=\"small\"\n          type=\"danger\"\n          @click=\"handleDelete(scope.$index, scope.row)\">删除</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n```\n\n如果每次使用表格都要重复这一段代码，那久而久之你的项目肯定会冗余很多重复的代码，而且也不利于维护。\n这时候我们就有必要在原始的表格组件基础上再封装一层，将这些重复的代码放在组件内部，使用时考虑如何通过一种配置的方式去定制表格。\n\n`egrid` 就是为此而生的，少写两行是两行。耶~~~\n\n\n"
  },
  {
    "path": "dev/App.vue",
    "content": "<template>\n  <div id=\"app\">\n    <egrid stripe\n      max-height=\"500\"\n      :data=\"data\"\n      :columns=\"columns\">\n    </egrid>\n    <egrid ref=\"egrid\" stripe\n      :column-type=\"['expand', 'selection']\"\n      :column-type-props=columnTypeProps\n      :column-key-map=\"{ label: 'name' }\"\n      max-height=\"500\"\n      :data=\"data\"\n      :columns=\"columns\"\n      :columns-schema=\"columnsSchema\"\n      :columns-handler=\"columnsHandler\"\n      @selection-change=\"selectionChange\">\n      <template slot=\"expand\" slot-scope=\"{ row }\">\n        <section class=\"expand-detail\">\n          <div v-for=\"col in columns\" :key=\"col.label\">\n            {{ col.name }}：{{ row[col.prop] }}\n          </div>\n        </section>\n      </template>\n    </egrid>\n    <button @click=\"clearSelection\">CLEAR</button>\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue'\n// import Egrid from '../lib/index.com'\nimport Egrid from '../src/index'\nimport Data from './data'\nimport Btn from './cell-btn.vue'\nimport Editor from './cell-editor.vue'\nexport default {\n  name: 'app',\n  data () {\n    this.columnTypeProps = {\n      selection: {\n        // reserveSelection: true,\n        selectable (row, index) {\n          return index < 2\n        }\n      }\n    }\n    return {\n      data: Data.data,\n      columns: Data.columns,\n      // columnsProps 用于定义所有 columns 公共的属性，\n      // 这里属性可以参考这里： http://element.eleme.io/#/zh-CN/component/table#table-column-attributes\n      // columnsProps: {\n      //   width: 120,\n      //   sortable: true,\n      //   // 定义表格列如何渲染\n      //   component: Editor\n      // },\n\n      // columnsSchema 可以用来单独定义 columns 的某一列，这里的设置会覆盖 columnsProps 的配置属性\n      columnsSchema: {\n        '地址': {\n          width: 'auto',\n          // propsHandler 可用于转换传给自定义组件的 props\n          propsHandler ({ col, row }) {\n            return { address: row[col.prop] }\n          },\n          component: Vue.extend({\n            props: ['address'],\n            render (h) {\n              return h('span', {\n                style: { color: '#20A0FF' }\n              }, this.address)\n            }\n          })\n        },\n        '邮编': {\n          formater (row, col) {\n            return row[col.prop] + '...'\n          }\n        }\n      },\n      selecetedRows: []\n    }\n  },\n\n  methods: {\n    // columnsHandler 可用于在现有的 columns 进行操作，对 columns 进行增删改，这里新增了操作列\n    columnsHandler (cols) {\n      return cols.concat({\n        // fixed: 'right',\n        label: '操作',\n        align: 'left',\n        component: Btn,\n        // listeners 可用于监听自定义组件内部 $emit 出的事件\n        listeners: {\n          'row-edit' (row) {\n            console.log('row-edit', row)\n          }\n        }\n      })\n    },\n\n    selectionChange (rows) {\n      this.selecetedRows = rows\n      console.log('selected', rows)\n    },\n\n    clearSelection () {\n      const { egrid } = this.$refs\n      if (egrid && egrid.clearSelection) {\n        egrid.clearSelection()\n      }\n    }\n  },\n\n  components: { Egrid }\n}\n</script>\n\n<style>\n#app {\n  font-family: 'Avenir', Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  padding: 50px 60px;\n}\n\n.expand-detail div {\n  text-align: left;\n  padding: 4px 0;\n}\n</style>\n"
  },
  {
    "path": "dev/cell-btn.vue",
    "content": "<template>\n  <button @click=\"todo\">{{ row._edit ? 'Done' : 'Edit' }}</button>\n</template>\n\n<script>\nexport default {\n  props: ['row', 'column'],\n\n  methods: {\n    todo () {\n      this.$emit('row-edit', this.row)\n      this.$set(this.row, '_edit', !this.row._edit)\n    }\n  }\n}\n</script>\n\n"
  },
  {
    "path": "dev/cell-editor.vue",
    "content": "<template>\n  <div>\n    <input\n      v-show=\"row._edit\" type=\"text\"\n      v-model=\"row[column.property]\">\n    <span v-show=\"!row._edit\">{{ text }}</span>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: ['row', 'column'],\n\n  computed: {\n    text () {\n      return this.row[this.column.property]\n    }\n  }\n}\n</script>\n\n"
  },
  {
    "path": "dev/data.js",
    "content": "export default {\n  data: [\n    {\n      date: '2016-05-03',\n      name: '王小虎',\n      province: '上海',\n      city: '普陀区',\n      address: '上海市普陀区金沙江路 1518 弄',\n      zip: 200333\n    },\n    {\n      date: '2016-05-02',\n      name: '王小虎',\n      province: '上海',\n      city: '普陀区',\n      address: '上海市普陀区金沙江路 1518 弄',\n      zip: 200333\n    },\n    {\n      date: '2016-05-04',\n      name: '王小虎',\n      province: '上海',\n      city: '普陀区',\n      address: '上海市普陀区金沙江路 1518 弄',\n      zip: 200333\n    },\n    {\n      date: '2016-05-01',\n      name: '王小虎',\n      province: '上海',\n      city: '普陀区',\n      address: '上海市普陀区金沙江路 1518 弄',\n      zip: 200333\n    },\n    {\n      date: '2016-05-08',\n      name: '王小虎',\n      province: '上海',\n      city: '普陀区',\n      address: '上海市普陀区金沙江路 1518 弄',\n      zip: 200333\n    },\n    {\n      date: '2016-05-06',\n      name: '王小虎',\n      province: '上海',\n      city: '普陀区',\n      address: '上海市普陀区金沙江路 1518 弄',\n      zip: 200333\n    },\n    {\n      date: '2016-05-07',\n      name: '王小虎',\n      province: '上海',\n      city: '普陀区',\n      address: '上海市普陀区金沙江路 1518 弄',\n      zip: 200333\n    }\n  ],\n  columns: [\n    { name: '日期', prop: 'date' },\n    { name: '姓名', prop: 'name' },\n    { name: '省份', prop: 'province' },\n    { name: '市区', prop: 'city' },\n    { name: '地址', prop: 'address' },\n    { name: '邮编', prop: 'zip' }\n  ]\n}\n"
  },
  {
    "path": "dev/main.js",
    "content": "import Vue from 'vue'\nimport ElementUI from 'element-ui'\nimport App from './App.vue'\n// 1.4.12\n// import 'element-ui/lib/theme-default/index.css'\nimport 'element-ui/lib/theme-chalk/index.css'\n\nVue.use(ElementUI)\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n})\n"
  },
  {
    "path": "docs/.nojekyll",
    "content": ""
  },
  {
    "path": "docs/README.md",
    "content": "# Egrid\n\n基于 `Element-UI` `Table` 组件封装的高阶表格组件，可无缝支持 element 的 table 组件。\n\nmin 文件仅 3.8 kb。实现比较简单，源码在这： [https://github.com/kinglisky/egrid](https://github.com/kinglisky/egrid)\n\nelement 升级到了 2.0 了， 不用担心可以直接用。\n\n首先组件依赖 `Element Table`，先要安装 Element：\n\n> `npm i element-ui -S`\n\n安装 egrid:\n\n> `npm i egrid -S`\n\n!> `egrid` 只依赖 `Element` 中的 `Table` 与 `TableColumn` 组件不会将整个 `Element` 导入。\n但不包含样式，`Table` 的样式需要用户手动引入。\n\n使用：\n\n```javascript\nimport Vue from 'vue'\nimport Egrid from 'egrid'\n\n// table 的样式需要手动引入\nimport 'element-ui/lib/theme-default/icon.css'\nimport 'element-ui/lib/theme-default/table.css'\nimport 'element-ui/lib/theme-default/table-column.css'\n\nVue.use(Egrid)\n```\n\n在线栗子🌰 ：\n<iframe width=\"100%\" height=\"400\"\n  src=\"//jsfiddle.net/nlush/yr0uf0fm/98/embedded/result,html,js,css/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\">\n</iframe>\n\n先创建表格中使用的自定义组件：\n\n`cell-btn.vue`\n```html\n<template>\n  <button @click=\"todo\">{{ row._edit ? 'Done' : 'Edit' }}</button>\n</template>\n\n<script>\nexport default {\n  props: ['row', 'col'],\n\n  methods: {\n    todo () {\n      this.$emit('row-editor', this.row)\n      this.$set(this.row, '_edit', !this.row._edit)\n    }\n  }\n}\n</script>\n```\n\n`cell-editor.vue`\n```html\n<template>\n  <div>\n    <input\n      v-show=\"row._edit\" type=\"text\"\n      v-model=\"row[col.prop]\">\n    <span v-show=\"!row._edit\">{{ text }}</span>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: ['row', 'col'],\n\n  computed: {\n    text () {\n      return this.row[this.col.prop]\n    }\n  }\n}\n</script>\n```\n\n使用 `egrid`:\n\n```html\n<template>\n  <egrid border\n    max-height=\"500\"\n    column-type=\"selection\"\n    :data=\"data\"\n    :columns=\"columns\"\n    :columns-schema=\"columnsSchema\"\n    :columns-props=\"columnsProps\"\n    :columns-handler=\"columnsHandler\"\n    @selection-change=\"selectionChange\">\n  </egrid>\n</template>\n\n<script>\nimport Data from './data'\nimport Btn from './cell-btn.vue'\nimport Editor from './cell-editor.vue'\n\nexport default {\n  data () {\n    return {\n      data: Data.data,\n      columns: Data.columns,\n      // columnsProps 用于定义 columns 公共的属性\n      columnsProps: {\n        width: 120,\n        sortable: true,\n        // 定义表格列如何渲染\n        component: Editor\n      },\n\n      // columnsSchema 可以用来单独定义 columns 的某一列，这里的设置会覆盖 columnsProps 的配置属性\n      columnsSchema: {\n        '地址': {\n          width: 'auto',\n          // propsHandler 可用于转换传给自定义组件的 props 这里将 props 变成了 address\n          propsHandler ({ col, row }) {\n            return { address: row[col.prop] }\n          },\n          // 这里的 props 是 address\n          component: Vue.extend({\n            props: ['address'],\n            render (h) {\n              return h('span', {\n                style: { color: '#20A0FF' }\n              }, this.address)\n            }\n          })\n        }\n      }\n    }\n  },\n\n  methods: {\n    // columnsHandler 可用于在现有的 columns 进行操作，对 columns 进行增删改，这里新增了操作列\n    columnsHandler (cols) {\n      return cols.concat({\n        label: '操作',\n        align: 'left',\n        component: Btn,\n        // listeners 可用于监听自定义组件内部 $emit 出的事件\n        listeners: {\n          'row-edit' (row) {\n            console.log('row-edit', row)\n          }\n        }\n      })\n    },\n\n    selectionChange (rows) {\n      console.log('selected', rows)\n    }\n  }\n}\n</script>\n```\n\n\n# Attributes\n\n!> `egrid` 只是在 `Element Table` 封装了一层，原本设置在 `Table` 上的 `props` 与事件监听可直接设置到 `egrid` 上，如：`height` `max-height` `border` `@selection-change`......具体配置可参考[Element Tabel 文档](http://element.eleme.io/#/zh-CN/component/table#table-attributes)\n\n| 属性   | 说明 | 可选项 | 默认 |\n| ---   | ---- | --- | --- |\n| `data` | `Array` table 的 data 属性 | - | `[]` |\n| `columns` | `Array` 用于控制表格列渲染 | - | `[]` | \n| `column-type` | `[String, Array]` 映射到 `Element Table-column` 的 `type` 属性，用于支持功能特殊的功能列（多选、索引、折叠行），不设置则不显示功能列 | `selection/index/expand` | - |\n| `column-key-map` | `Object` 用于映射 `Table-column` 中 `label` 与 `prop` 值对应的 key | - | `{ label: 'label', prop: 'prop' }` |\n| `columns-props` | `Object` 用于定义所有 `columns` 公共的 `Element Table-column` 属性  | - | - |\n| `columns-schema` | `Object` 可以用来单独定义 `columns` 的某一列，这里的设置会覆盖 `columnsProps` 的配置属性 <br> 使用 `Element Table-column` 中 `label` 值进行匹配 | - | - |\n| `columns-handler` | `Function` 可用于在现有的 `columns` 进行操作，对 `columns` 进行增删改操作。 | - | - |\n| `slot-append` | `Boolean` 是否使用 `Element Table` 的 `slot=\"append\"` | `true/false` | `false` |\n\n\n> columns 配置\n\ncolumns 用于控制表格的列行为，使用时一般会设置成：\n\n```javascript\nconst columns = [\n  {\n    label: '日期',\n    prop: 'date',\n    width: 100\n    ...\n  },\n  {\n    label: '姓名',\n    prop: 'name',\n    minWidth: 100\n    ...\n  },\n  {\n    label: '其他',\n    component: Btn, // 'el-button'\n    listeners: {\n      'custom-event' (data) {\n        console.log('custom-event', data)\n      }\n    },\n    propsHandler: function ({ row, col, column }) {\n      return { row, col, column }\n    }\n    ......\n  }\n  ......\n]\n```\n\n`columns` 中每项的配置项其实就是 `Element Table-column` 上的 `props` 属性，具体的属性设置可以参考 [Element Table-column 文档](http://element.eleme.io/#/zh-CN/component/table#table-column-attributes)。\n\n在此基础上 `columns` 新增了 `component` `listeners` `propsHandler` 配置属性。当然你也可以自定义一些其他的属性附加到 `columns` 上以便后期自定组件中使用，例如附加一些处理函数传递给自定义组件使用。\n\n`component`\n用于配置当前列渲染用的自定义组件，内部使用 `<component>` 实现的，component 的值可以是：`string | ComponentDefinition | ComponentConstructor` 具体参考 [<component> 组件文档](https://cn.vuejs.org/v2/api/#component)\n\n\n`listeners`\n用于监听 `component` 配置的自定义渲染组件内部 `$emit` 出的事件，这里使用 Vue 2.4 引入 `v-on` [新语法](https://cn.vuejs.org/v2/api/#v-on)，可直接为 `v-on` 绑定一个对象，如：\n```javascrip\nv-on=\"{ 'custom-event': function (data) {...} }\"\n```\n\n`propsHandler`\n\n用于转化 `egrid` 组件内部附加 `<component>` 上的 props 。默认的附加在 `<component>` 上的 props 是：\n\n```html\n<component v-bind=\"{ row, col, column }\" :is=\"col.component\"></component>\n```\n\n可通过 `propsHandler` 对 `{ row, col, column }`  进行转化你想要的形式：\n\n```javascript\npropsHandler({ row, col, column })\n\n// 转化成 =>\n\n{\n  msg: row[col.prop],\n  handler (data) {\n    console.log('handler:', data)\n  }\n}\n\n```\n> columns-props 配置\n\n`columns-props` 配置用于定义 `columns` 各列默认的 props 属性。如所有的列默认都**居左对齐**，**不支持排序**，我们可以将 columns-props 设置成：\n\n```javascript\n{\n  align: 'left',\n  sortable: false\n}\n```\n如需要为某些列单独定义显示行为可以通过 `columns-schema` 进行单独配置。\n\n> columns-schema 配置\n\n`columns-schema` 主要用于单独定义某一列的行为。\n\n```javascript\n{\n  '地址': {\n    width: 300,\n    sortable: false,\n    ...\n    component: CustomComponent\n  }\n}\n\n```\n\n`columns-schema` 是通过 columns 每列的 `label` 属性值来匹配的。这里的配置属性会覆盖 `columns-props` 与 `columns` 设置的对应的列的属性值。\n\n!> 覆盖的优先级为 `columns-schema` > `columns` > `columns-props`\n\n> columns-handler 配置\n\n`columns-handler` 处理函数可以对已有的 `columns` 进行增删改操作，常见的用法就是为，`columns` 新增一个自定义的操作列：\n\n```javascript\n// :columns-handler=\"columnsHandler\"\ncolumnsHandler (cols) {\n  return cols.concat({\n    label: '操作',\n    align: 'left',\n    sortable: false,\n    ...\n    component: OperatComponent,\n  })\n}\n```\n> column-type 配置\n\n映射到 `Element Table-column` 的 `type` 属性，用于特殊的功能列的功能，不设置则不显示功能列。\n\n* `selection`： 多选支持\n\n* `index`： 编号索引\n\n* `expand`： 表格支持折叠展开行 \n\n当 `column-type` 为 `expand` 时表格支持折叠展开行，此时可用通过 `slot (slot=\"expand\")` 方式自定渲染折叠详情。\n\n当 `column-type` 为数组时可设置多个特殊列，`['expand', 'index', 'selection']`，一般很少这样使用。\n\n使用可参考下面的栗子🌰 ：\n\n<iframe width=\"100%\" height=\"600\"\nsrc=\"//jsfiddle.net/nlush/azr14zfs/45/embedded/result,html,js,css/\"\nallowfullscreen=\"allowfullscreen\" frameborder=\"0\">\n</iframe>\n\n> `column-key-map` 配置\n\n考虑到 `columns` 中的 `label` 项与 `prop` 项对应的属性 key 不一定是 `label` 与 `prop`，这时可以通过 `column-key-map` 做个映射。\n\n\n\n# Methods\n\n```javascript\n[\n  'setCurrentRow',\n  'toggleRowSelection',\n  'toggleRowExpansion',\n  'clearSelection',\n  'clearFilter',\n  'clearSort',\n  'doLayout',\n  'sort'\n]\n```\n\n!> 直接代理一层原 `Element Table` 的方法。可参考[文档](http://element.eleme.io/#/zh-CN/component/table#table-methods)\n\n\n# Slots\n\n`append`：对应 `Element Table` 的 `slot=\"append\"` [可参考文档](http://element.eleme.io/#/zh-CN/component/table#table-slot)，使用时注意设置 `slot-append` 为 `true`\n\n`expand`： 当 `column-type` 为 `expand` 时使用，用于自定义折叠展开内容。\n\n\n\n"
  },
  {
    "path": "docs/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>egrid - element-ui table packaging</title>\n  <meta name=\"description\" content=\"element-ui table 组件\">\n  <meta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\">\n  <link rel=\"stylesheet\" href=\"//unpkg.com/docsify/lib/themes/vue.css\">\n</head>\n<body>\n  <div id=\"app\"></div>\n</body>\n<script>\n  window.$docsify = {\n    name: 'Egrid',\n    search: 'auto',\n    loadSidebar: false,\n    repo: 'https://github.com/kinglisky/egrid',\n    formatUpdated: '{MM}/{DD} {HH}:{mm}'\n  }\n</script>\n<script src=\"//unpkg.com/docsify/lib/docsify.min.js\"></script>\n</html>\n"
  },
  {
    "path": "index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <title>temp</title>\n  </head>\n  <body>\n    <div id=\"app\"></div>\n    <script src=\"/dist/build.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"egrid\",\n  \"description\": \"element-ui table packaging component\",\n  \"version\": \"1.1.2\",\n  \"author\": \"芊野 <free.nan.sky@gmail.com>\",\n  \"private\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git@github.com:kinglisky/egrid.git\"\n  },\n  \"main\": \"lib/index.com.min.js\",\n  \"scripts\": {\n    \"clear\": \"rm -rf lib\",\n    \"doc\": \"docsify serve docs\",\n    \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --open --hot\",\n    \"build\": \"npm run clear && node rollup.config.js\"\n  },\n  \"devDependencies\": {\n    \"babel-core\": \"^6.26.0\",\n    \"babel-helpers\": \"^6.24.1\",\n    \"babel-loader\": \"^7.1.2\",\n    \"babel-plugin-external-helpers\": \"^6.22.0\",\n    \"babel-preset-env\": \"^1.6.0\",\n    \"babel-preset-es2015-rollup\": \"^3.0.0\",\n    \"cross-env\": \"^5.1.3\",\n    \"css-loader\": \"^0.28.8\",\n    \"docsify\": \"^4.5.7\",\n    \"file-loader\": \"^1.1.6\",\n    \"rollup\": \"^0.55.3\",\n    \"rollup-plugin-babel\": \"^3.0.3\",\n    \"rollup-plugin-commonjs\": \"^8.2.6\",\n    \"rollup-plugin-node-resolve\": \"^3.0.0\",\n    \"rollup-plugin-uglify\": \"^2.0.1\",\n    \"rollup-plugin-vue2\": \"^0.8.0\",\n    \"style-loader\": \"^0.19.1\",\n    \"uglify-es\": \"^3.3.4\",\n    \"url-loader\": \"^0.6.2\",\n    \"vue\": \"^2.5.13\",\n    \"vue-loader\": \"^13.6.2\",\n    \"vue-template-compiler\": \"^2.5.13\",\n    \"webpack\": \"^3.10.0\",\n    \"webpack-dev-server\": \"^2.9.7\"\n  },\n  \"peerDependencies\": {\n    \"element-ui\": \"^2.0.10\"\n  }\n}\n"
  },
  {
    "path": "rollup.config.js",
    "content": "const rollup = require('rollup')\nconst vue = require('rollup-plugin-vue2')\nconst resolve = require('rollup-plugin-node-resolve')\nconst babel = require('rollup-plugin-babel')\nconst uglify = require('rollup-plugin-uglify')\nconst ug = require('uglify-es')\nconst babelHelpers = require('babel-helpers')\nconst externalHelpersWhitelist = babelHelpers.list.filter(helperName => {\n  return helperName !== 'asyncGenerator'\n})\nconst plugins = [\n  vue(),\n  resolve({\n    extensions: ['.js', '.vue']\n  }),\n  babel({\n    exclude: 'node_modules/**',\n    plugins: ['external-helpers'],\n    externalHelpersWhitelist\n  })\n]\n\nconst config = {\n  name: 'Egrid',\n  entry: './src/index.js',\n  dist: 'lib/index'\n}\n\nconst pkgs = [\n  { format: 'cjs', suffix: '.com.js' },\n  { format: 'cjs', suffix: '.com.min.js', min: true },\n  { format: 'es', suffix: '.esm.js' },\n  { format: 'es', suffix: '.esm.min.js', min: true },\n  { format: 'umd', suffix: '.umd.js' },\n  { format: 'umd', suffix: '.umd.min.js', min: true }\n]\n\npkgs.forEach(runRollup)\n\nfunction runRollup (it) {\n  rollup.rollup({\n    input: config.entry,\n    external: ['vue', 'element-ui/lib/table', 'element-ui/lib/table-column'],\n    plugins: it.min ? plugins.concat(uglify({}, ug.minify)) : plugins\n  })\n  .then(bundle => {\n    bundle.write({\n      format: it.format,\n      name: config.name,\n      globals: {\n        'vue': 'Vue',\n        'element-ui/lib/table': 'ELEMENT.Table',\n        'element-ui/lib/table-column': 'ELEMENT.TableColumn'\n      },\n      file: config.dist + it.suffix\n    })\n  })\n  .catch(e => {\n    console.log(`${it.format} - 打包出错：`, e)\n    process.exit(1)\n  })\n}\n"
  },
  {
    "path": "src/index.js",
    "content": "import Main from './main.vue'\nimport methods from './methods'\nMain.install = function (Vue) {\n  Vue.component(Main.name, Main)\n}\nMain._mixinsMethods = methods\nexport default Main\n"
  },
  {
    "path": "src/main.vue",
    "content": "<template>\n  <el-table class=\"egrid\"\n    :data=\"data\" ref=\"grid\"\n    v-bind=\"tableBind\"\n    v-on=\"$listeners\">\n    <template v-for=\"tp in typesColumns\">\n      <el-table-column \n        v-if=\"tp.type === 'expand'\"\n        v-bind=\"tp.props\"\n        type=\"expand\"\n        :key=\"tp.type\">\n        <template slot-scope=\"props\">\n          <slot name=\"expand\" v-bind=\"props\"></slot>\n        </template>\n      </el-table-column>\n      <el-table-column v-else\n        :key=\"tp.type\"\n        :type=\"tp.type\"\n        v-bind=\"tp.props\">\n      </el-table-column>\n    </template>\n    <el-table-column v-for=\"col in renderColumns\"\n      :key=\"col.label\" v-bind=\"getColBind(col)\">\n      <template slot-scope=\"scope\">\n        <component :is=\"col.component\"\n          v-bind=\"getCptBind(scope, col)\"\n          v-on=\"col.listeners\">\n        </component>\n      </template>\n    </el-table-column>\n    <template v-if=\"slotAppend\" slot=\"append\">\n      <slot name=\"append\"></slot>\n    </template>\n  </el-table>\n</template>\n\n<script>\nimport ElTable from 'element-ui/lib/table'\nimport ElTableColumn from 'element-ui/lib/table-column'\nimport methods from './methods'\nimport Text from './text'\n\nconst BOOLEAN_KEYS = [\n  'fit',\n  'stripe',\n  'border',\n  'show-header',\n  'highlight-current-row',\n  'default-expand-all',\n  'show-summary'\n]\n\nconst COLUMN_PROPS = {\n  align: 'left',\n  component: Text\n}\n\nconst TYPES = ['selection', 'expand', 'index']\n\nconst COLUMN_KEY_MAP = {\n  label: 'label',\n  prop: 'prop'\n}\n\nexport default {\n  name: 'Egrid',\n\n  mixins: [methods],\n\n  props: {\n    data: {\n      type: Array,\n      default () {\n        return []\n      }\n    },\n\n    columns: {\n      type: Array,\n      default () {\n        return []\n      }\n    },\n\n    columnType: [String, Array],\n\n    columnTypeProps: Object,\n\n    columnKeyMap: Object,\n\n    columnsProps: Object,\n\n    columnsSchema: Object,\n\n    columnsHandler: Function,\n\n    slotAppend: Boolean\n  },\n\n  computed: {\n    // 处理 $attrs 里面 Boolean 类型的 prop 和统一 prop 命名 \n    tableBind () {\n      const { $attrs } = this\n      const bind = {}\n      Object.keys($attrs).forEach(key => {\n        const v = $attrs[key]\n        const uniformKey = key.replace(/([A-Z])/, '-$1').toLowerCase()\n        bind[key] = ~BOOLEAN_KEYS.indexOf(uniformKey) && v === '' ? true : v\n      })\n      return bind\n    },\n\n    renderColumns () {\n      const {\n        columns,\n        columnKeyMap,\n        columnsHandler,\n        columnsProps: props,\n        columnsSchema: schema\n      } = this\n      const map = Object.assign({}, COLUMN_KEY_MAP, columnKeyMap)\n      const renderColumns = columns.map(col => {\n        const mix = schema && schema[col[map.label]] || {}\n        const it = Object.assign({}, COLUMN_PROPS, props, col, mix)\n        it.label = it[map.label]\n        it.prop = it[map.prop]\n        return it\n      })\n      return columnsHandler && columnsHandler(renderColumns) || renderColumns\n    },\n\n    // 用于渲染特殊列\n    typesColumns () {\n      const { columnType: type, columnTypeProps } = this\n      let typeColums = []\n      if (typeof type === 'string' && ~TYPES.indexOf(type)) {\n        typeColums = [type]\n      }\n      if (Array.isArray(type)) {\n        typeColums = type.filter(it => ~TYPES.indexOf(it))\n      }\n      const map = columnTypeProps || {}\n      return typeColums.map(type => {\n        return {\n          type,\n          props: map[type]\n        }\n      })\n    }\n  },\n\n  methods: {\n    getColBind (col) {\n      const bind = Object.assign({}, col)\n      delete bind.component\n      delete bind.listeners\n      delete bind.propsHandler\n      return bind\n    },\n\n    getCptBind ({ row, column }, col) {\n      const props = { row, col, column }\n      const handler = col.propsHandler\n      return handler && handler(props) || props\n    }\n  },\n\n  components: {\n    [ElTable.name]: ElTable,\n    [ElTableColumn.name]: ElTableColumn\n  }\n}\n</script>\n"
  },
  {
    "path": "src/methods.js",
    "content": "const METHOD_NAMES = [\n  \"setCurrentRow\",\n  \"toggleRowSelection\",\n  \"toggleRowExpansion\",\n  \"clearSelection\",\n  \"clearFilter\",\n  \"clearSort\",\n  \"doLayout\",\n  \"sort\"\n]\n\nconst methods = {}\n\nMETHOD_NAMES.forEach(name => {\n  methods[name] = function (...args) {\n      const { grid } = this.$refs\n      if (grid && grid[name]) { \n          grid[name](...args)\n      }\n  }\n})\n\nexport default { methods }\n"
  },
  {
    "path": "src/text.js",
    "content": "\nexport default {\n  functional: true,\n  props: ['row', 'col', 'column'],\n  render (h, { props: { row, col }, _v: text }) {\n    const { formater } = col\n    const v = formater && formater(row, col) || row[col.prop]\n    // 解决 umd 打包 text 渲染不出来的问题，需要转成 Vnode\n    return text && text(v) || v\n  }\n}\n"
  },
  {
    "path": "webpack.config.js",
    "content": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n  entry: './dev/main.js',\n  output: {\n    path: path.resolve(__dirname, './dist'),\n    publicPath: '/dist/',\n    filename: 'build.js'\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader',\n        options: {\n          loaders: {\n          }\n          // other vue-loader options go here\n        }\n      },\n      {\n        test: /\\.js$/,\n        loader: 'babel-loader',\n        exclude: /node_modules/\n      },\n      {\n        test: /\\.css$/,\n        use: ['style-loader', 'css-loader']\n      },\n      {\n        test: /\\.(eot|svg|ttf|woff|woff2)(\\?\\S*)?$/,\n        loader: 'file-loader'\n      },\n      {\n        test: /\\.(png|jpg|gif|svg)$/,\n        loader: 'file-loader',\n        options: {\n          name: '[name].[ext]?[hash]'\n        }\n      }\n    ]\n  },\n  resolve: {\n    alias: {\n      'vue$': 'vue/dist/vue.esm.js'\n    }\n  },\n  devServer: {\n    historyApiFallback: true,\n    noInfo: true,\n    overlay: true\n  },\n  performance: {\n    hints: false\n  },\n  devtool: '#eval-source-map'\n}\n\nif (process.env.NODE_ENV === 'production') {\n  module.exports.devtool = '#source-map'\n  // http://vue-loader.vuejs.org/en/workflow/production.html\n  module.exports.plugins = (module.exports.plugins || []).concat([\n    new webpack.DefinePlugin({\n      'process.env': {\n        NODE_ENV: '\"production\"'\n      }\n    }),\n    new webpack.optimize.UglifyJsPlugin({\n      sourceMap: true,\n      compress: {\n        warnings: false\n      }\n    }),\n    new webpack.LoaderOptionsPlugin({\n      minimize: true\n    })\n  ])\n}\n"
  }
]