修改Table数据源

2019-04-22 15:44:14 +08:00 · 2019-04-22 15:44:14 +08:00 · 332bc1ca31
parent 9bb8194716
commit 332bc1ca31
14 changed files with 668 additions and 429 deletions
--- a/demo/demolist/Demo0601.js
+++ b/demo/demolist/Demo0601.js
@ -11,50 +11,115 @@
 import React, { Component } from 'react';
 import Table from '../../src';

-
-
-const columns5 = [
+const columns = [
  {
-    title: "Full Name",
-    width: 100,
-    dataIndex: "name",
-    key: "name",
-    fixed: "left"
+      title: "序号",
+      dataIndex: "index",
+      key: "index",
+      width: 80, 
+      fixed: 'left',
+      render(text, record, index){return index + 1}
  },
-  { title: "Age", width: 100, dataIndex: "age", key: "age", fixed: "left" },
-  { title: "address", dataIndex: "address", key: "address" }
+  {
+      title: "订单编号",
+      dataIndex: "orderCode",
+      key: "orderCode",
+      width: 100, 
+      fixed: 'left',
+  },
+  {
+      title: "供应商名称",
+      dataIndex: "supplierName",
+      key: "supplierName",
+      width: 100
+  },
+  {
+      title: "类型",
+      dataIndex: "type_name",
+      key: "type_name",
+      width: 100
+  },
+  {
+      title: "采购组织",
+      dataIndex: "purchasing",
+      key: "purchasing",
+      width: 100
+  },
+  {
+      title: "采购组",
+      dataIndex: "purchasingGroup",
+      key: "purchasingGroup",
+       width: 100
+  },
+  {
+      title: "凭证日期",
+      dataIndex: "voucherDate",
+      key: "voucherDate",
+      width: 200,
+      
+  },
+  {
+      title: "审批状态",
+      dataIndex: "approvalState_name",
+      key: "approvalState_name",
+      width: 100
+  },
+  {
+      title: "确认状态",
+      dataIndex: "confirmState_name",
+      key: "confirmState_name",
+       width: 100
+  }, 
+  {
+      title: "关闭状态",
+      dataIndex: "closeState_name",
+      key: "closeState_name",
+      width: 100
+  }
 ];

-const data5 = [
+const data = [
  { 
-    key: "1",
-    name: "John Brown",
-    age: 32,
-    address: "New York Park"
+    orderCode:"NU0391025", 
+    supplierName: "xx供应商",
+    type_name: "1",
+    purchasing:'组织c', 
+    purchasingGroup:"aa",
+    voucherDate:"2018年03月18日",
+    approvalState_name:"已审批",
+    confirmState_name:"执行中",
+    closeState_name:"未关闭",
+    key: "1"
  }, 
  { 
-    key: "2",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
+    orderCode:"NU0391026", 
+    supplierName: "xx供应商",
+    type_name: "2",
+    purchasing:'组织a', 
+    purchasingGroup:"bb",
+    voucherDate:"2018年02月05日",
+    approvalState_name:"已审批",
+    confirmState_name:"待确认",
+    closeState_name:"未关闭",
+    key: "2"
  },
  { 
-    key: "3",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
-  },
-  {
-    key: "4",
-    name: "Jim Green",
-    age: 40,
-    address: "London Park"
+    orderCode:"NU0391027", 
+    supplierName: "xx供应商",
+    type_name: "3",
+    purchasing:'组织b', 
+    purchasingGroup:"aa",
+    voucherDate:"2018年07月01日",
+    approvalState_name:"已审批",
+    confirmState_name:"终止",
+    closeState_name:"已关闭",
+    key: "3"
  }
 ];

 class Demo51 extends Component {
  render() {
-    return <Table columns={columns5} data={data5} scroll={{ x: "110%", y: 240 }}  />;
+    return <Table columns={columns} data={data} scroll={{ x: "110%", y: 240 }}  />;
  }
 }

--- a/demo/demolist/Demo0602.js
+++ b/demo/demolist/Demo0602.js
@ -12,12 +12,13 @@ import React, { Component } from 'react';
 import {Popconfirm} from 'tinper-bee';
 import Table from '../../src';

-const columns5 = [
+const columns = [
    {
        title: "序号",
        dataIndex: "index",
        key: "index",
-        width: 100, 
+        width: 80, 
+        render(text, record, index){return index + 1}
    },
    {
        title: "订单编号",
@ -47,13 +48,13 @@ const columns5 = [
        title: "采购组",
        dataIndex: "purchasingGroup",
        key: "purchasingGroup",
-         width: 300
+         width: 100
    },
    {
        title: "凭证日期",
        dataIndex: "voucherDate",
        key: "voucherDate",
-        width: 100,
+        width: 200,
        
    },
    {
@ -94,70 +95,48 @@ const columns5 = [
    }
 ];

-const data5 = [
+const data = [
    { 
-        index: 1, 
-        orderCode:"2343", 
-        supplierName: "xxx",
-        type_name: "123",
-        purchasing:'内行', 
-        purchasingGroup:"323",
-        voucherDate:"kkkk",
-        approvalState_name:"vvvv",
-        confirmState_name:"aaaa",
-        closeState_name:"vnnnnn",
-        d:"操作",
+      orderCode:"NU0391025", 
+      supplierName: "xx供应商",
+      type_name: "1",
+      purchasing:'组织c', 
+      purchasingGroup:"aa",
+      voucherDate:"2018年03月18日",
+      approvalState_name:"已审批",
+      confirmState_name:"执行中",
+      closeState_name:"未关闭",
      key: "1"
    }, 
    { 
-      index: 2, 
-      _checked:true,
-      orderCode:"222", 
-      supplierName: "22xxx",
-      type_name: "1223",
-      purchasing:'内行2', 
-      purchasingGroup:"3223",
-      voucherDate:"222kk",
-      approvalState_name:"22vvvv",
-      confirmState_name:"2aaaa",
-      closeState_name:"2vnnnnn",
-      d:"2操作",
+      orderCode:"NU0391026", 
+      supplierName: "xx供应商",
+      type_name: "2",
+      purchasing:'组织a', 
+      purchasingGroup:"bb",
+      voucherDate:"2018年02月05日",
+      approvalState_name:"已审批",
+      confirmState_name:"待确认",
+      closeState_name:"未关闭",
      key: "2"
    },
    { 
-      index: 3, 
-      orderCode:"222", 
-      supplierName: "22xxx",
-      _disabled:true,
-      type_name: "1223",
-      purchasing:'内行2', 
-      purchasingGroup:"3223",
-      voucherDate:"222kk",
-      approvalState_name:"22vvvv",
-      confirmState_name:"2aaaa",
-      closeState_name:"2vnnnnn",
-      d:"3操作",
+      orderCode:"NU0391027", 
+      supplierName: "xx供应商",
+      type_name: "3",
+      purchasing:'组织b', 
+      purchasingGroup:"aa",
+      voucherDate:"2018年07月01日",
+      approvalState_name:"已审批",
+      confirmState_name:"终止",
+      closeState_name:"已关闭",
      key: "3"
-    },
-    { 
-      index: 4, 
-      orderCode:"222", 
-      supplierName: "22xxx",
-      type_name: "1223",
-      purchasing:'内行2', 
-      purchasingGroup:"3223",
-      voucherDate:"222kk",
-      approvalState_name:"22vvvv",
-      confirmState_name:"2aaaa",
-      closeState_name:"2vnnnnn",
-      d:"4操作",
-      key: "4"
-    },
+    }
 ];

 class Demo52 extends Component {
  render() {
-    return <Table columns={columns5} data={data5} scroll={{ x:true, y: 200 }}  />;
+    return <Table columns={columns} data={data} scroll={{ x:'110%', y: 200 }}  />;
  }
 }

--- a/demo/demolist/Demo0603.js
+++ b/demo/demolist/Demo0603.js
@ -12,70 +12,110 @@ import Table from '../../src';

 const { Item } = Menu;

-const columns24 = [
+const columns = [
  {
-    title: "名字",
-    dataIndex: "a",
-    key: "a",
-    width: 100,
-    fixed: "left",
+      title: "序号",
+      dataIndex: "index",
+      key: "index",
+      width: 80, 
+      fixed: 'left',
+      render(text, record, index){return index + 1}
  },
  {
-    title: "性别",
-    dataIndex: "b",
-    key: "b",
+      title: "订单编号",
+      dataIndex: "orderCode",
+      key: "orderCode",
      width: 100, 
-    fixed: "left",
+      fixed: 'left',
  },
  {
-    title: "年龄",
-    dataIndex: "c",
-    key: "c",
-    width: 100, 
-  },
-  {
-    title: "武功级别",
-    dataIndex: "d",
-    key: "d",
+      title: "供应商名称",
+      dataIndex: "supplierName",
+      key: "supplierName",
      width: 150
  },
  {
-    title: "对手",
-    dataIndex: "e",
-    key: "e",
+      title: "类型",
+      dataIndex: "type_name",
+      key: "type_name",
      width: 100
  },
  {
-    title: "帮派",
-    dataIndex: "f",
-    key: "f",
+      title: "采购组织",
+      dataIndex: "purchasing",
+      key: "purchasing",
      width: 100
  },
  {
-    title: "武功类型",
-    dataIndex: "g",
-    key: "g",
-    width: 150 
+      title: "采购组",
+      dataIndex: "purchasingGroup",
+      key: "purchasingGroup",
+       width: 100
  },
  {
-    title: "师傅",
-    dataIndex: "k",
-    key: "k",
-    // width: 100 
+      title: "凭证日期",
+      dataIndex: "voucherDate",
+      key: "voucherDate",
+      width: 200,
+      
  },
  {
-    title: "攻击系数",
-    dataIndex: "h",
-    key: "h",
+      title: "审批状态",
+      dataIndex: "approvalState_name",
+      key: "approvalState_name",
+      width: 100
+  },
+  {
+      title: "确认状态",
+      dataIndex: "confirmState_name",
+      key: "confirmState_name",
+       width: 100
+  }, 
+  {
+      title: "关闭状态",
+      dataIndex: "closeState_name",
+      key: "closeState_name",
      width: 100
  }
 ];

-
-const data24 = [
-  { a: "杨过", b: "男", c: 30,d:'内行',e:'黄荣',f:'古墓派',g:'剑术',k:'小龙女',h:'0.5', key: "1" },
-  { a: "令狐冲", b: "男", c: 41,d:'剑客',e:'自己',f:'无',g:'剑术',k:'无',h:'0.5', key: "2" },
-  { a: "郭靖", b: "男", c: 25,d:'大侠',e:'黄荣',f:'朝廷',g:'内容',k:'外侵势力',h:'0.6', key: "3" }
+const data = [
+  { 
+    orderCode:"NU0391025", 
+    supplierName: "xx供应商",
+    type_name: "1",
+    purchasing:'组织c', 
+    purchasingGroup:"aa",
+    voucherDate:"2018年03月18日",
+    approvalState_name:"已审批",
+    confirmState_name:"执行中",
+    closeState_name:"未关闭",
+    key: "1"
+  }, 
+  { 
+    orderCode:"NU0391026", 
+    supplierName: "xx供应商",
+    type_name: "2",
+    purchasing:'组织a', 
+    purchasingGroup:"bb",
+    voucherDate:"2018年02月05日",
+    approvalState_name:"已审批",
+    confirmState_name:"待确认",
+    closeState_name:"未关闭",
+    key: "2"
+  },
+  { 
+    orderCode:"NU0391027", 
+    supplierName: "xx供应商",
+    type_name: "3",
+    purchasing:'组织b', 
+    purchasingGroup:"aa",
+    voucherDate:"2018年07月01日",
+    approvalState_name:"已审批",
+    confirmState_name:"终止",
+    closeState_name:"已关闭",
+    key: "3"
+  }
 ];
 
 class Demo24 extends Component {
@ -83,7 +123,7 @@ class Demo24 extends Component {
  constructor(props) {
    super(props);
    this.state = {
-      columns:columns24
+      columns:columns
    }
  }
  
@ -149,7 +189,7 @@ class Demo24 extends Component {
    columns = this.renderColumnsDropdown(columns);
    return(
      <div className="demo24">
-        <Table columns={columns} data={data24} scroll={{ x: "110%", y: 240 }}/>
+        <Table columns={columns} data={data} scroll={{ x: "110%", y: 240 }}/>
      </div>
    )
  }
--- a/demo/demolist/Demo0802.js
+++ b/demo/demolist/Demo0802.js
@ -2,22 +2,54 @@
 *
 * @title 列过滤面板
 * @parent 列操作-隐藏 Hide
-* @description 点击表格右侧按钮，进行表格列的数据过滤。可以自定义设置显示某列，通过ifshow属性控制，默认为true都显示。afterFilter为过滤之后的回调函数
+* @description 点击表头右侧按钮，设置显示或隐藏表格列。可以自定义设置显示某列，通过ifshow属性控制，默认值为true（显示表格所有列）。afterFilter方法为列过滤后触发的回调函数。
 *
 */


 import React, { Component } from 'react';
-import {Icon,Checkbox,Popover,Popconfirm} from "tinper-bee";
-
+import {Icon,Popover} from "tinper-bee";
 import Table from '../../src';
 import filterColumn from '../../src/lib/filterColumn';
 import sum from '../../src/lib/sum';

-const data21 = [
-  { a: "杨过", b: "男", c: 30,d:'内行',e: "操作", key: "2" },
-  { a: "令狐冲", b: "男", c: 41,d:'大侠',e: "操作", key: "1" },
-  { a: "郭靖", b: "男", c: 25,d:'大侠',e: "操作", key: "3" }
+const data = [
+  { 
+    orderCode:"NU0391025", 
+    supplierName: "xx供应商",
+    type_name: "1",
+    purchasing:'组织c', 
+    purchasingGroup:"aa",
+    voucherDate:"2018年03月18日",
+    approvalState_name:"已审批",
+    confirmState_name:"执行中",
+    closeState_name:"未关闭",
+    key: "1"
+  }, 
+  { 
+    orderCode:"NU0391026", 
+    supplierName: "xx供应商",
+    type_name: "2",
+    purchasing:'组织a', 
+    purchasingGroup:"bb",
+    voucherDate:"2018年02月05日",
+    approvalState_name:"已审批",
+    confirmState_name:"待确认",
+    closeState_name:"未关闭",
+    key: "2"
+  },
+  { 
+    orderCode:"NU0391027", 
+    supplierName: "xx供应商",
+    type_name: "3",
+    purchasing:'组织b', 
+    purchasingGroup:"aa",
+    voucherDate:"2018年07月01日",
+    approvalState_name:"已审批",
+    confirmState_name:"终止",
+    closeState_name:"已关闭",
+    key: "3"
+  }
 ];

 const FilterColumnTable = filterColumn(Table, Popover, Icon);
@ -30,33 +62,40 @@ class Demo21 extends Component {
  constructor(props) {
    super(props);
    this.state ={
-              columns21: [
+      columns: [
        {
-                  title: "名字",
-                  dataIndex: "a",
-                  key: "a"
-                  // width: 100
+          title: "序号",
+          dataIndex: "index",
+          key: "index",
+          width: 80, 
+          fixed: 'left',
+          render(text, record, index){return index + 1}
        },
        {
-                  title: "性别",
-                  dataIndex: "b",
-                  key: "b",
-                  // width: 100
+            title: "订单编号",
+            dataIndex: "orderCode",
+            key: "orderCode",
+            width: 100, 
+            fixed: 'left',
        },
        {
-                  title: "年龄",
-                  dataIndex: "c",
-                  key: "c",
-                  ifshow:false,
-                  // width: 200,
-                  // sumCol: true,
-                  sorter: (a, b) => a.c - b.c
+            title: "供应商名称",
+            dataIndex: "supplierName",
+            key: "supplierName",
+            width: 150
        },
        {
-                  title: "武功级别",
-                  dataIndex: "d",
-                  key: "d"
-                }
+            title: "类型",
+            dataIndex: "type_name",
+            key: "type_name",
+            width: 100
+        },
+        {
+            title: "采购组织",
+            dataIndex: "purchasing",
+            key: "purchasing",
+            width: 100
+        },
      ]};
  }
  afterFilter = (optData,columns)=>{
@ -75,11 +114,14 @@ class Demo21 extends Component {
  }
 
  render() {
-    
-    return <FilterColumnTable columns={this.state.columns21} data={data21} afterFilter={this.afterFilter} showFilterPopover={this.state.showFilterPopover}/>;
+    return <FilterColumnTable 
+            columns={this.state.columns} 
+            data={data} 
+            afterFilter={this.afterFilter} 
+            showFilterPopover={this.state.showFilterPopover}
+            />;
  }
 }
+
 Demo21.defaultProps = defaultProps21;
-
-
 export default Demo21;
--- a/demo/demolist/Demo0903.js
+++ b/demo/demolist/Demo0903.js
@ -2,7 +2,7 @@
 *
 * @title 多列排序
 * @parent 列操作-排序 Sort
- * @description 多列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）新增回调函数(sorterClick)
+ * @description 结合多列排序、全选功能、合计功能的表格示例。新增排序后触发的回调函数sorterClick。
 *
 */

--- a/demo/demolist/Demo1001.js
+++ b/demo/demolist/Demo1001.js
@ -2,7 +2,7 @@
 *
 * @title 拖拽改变列顺序
 * @parent 列操作-拖拽 Drag
-* @description 点击列的表头，进行左右拖拽，注意：固定列不可以交换
+* @description 点击选择表头并左右拖拽，可以改变表格列顺序。onDrop方法是拖拽交换列后触发的回调函数。注意：固定列不可以交换。
 */
 import React, { Component } from 'react';
 import {Icon} from "tinper-bee";
@ -10,7 +10,7 @@ import {Icon} from "tinper-bee";
 import Table from '../../src'; 
 import dragColumn from '../../src/lib/dragColumn';

-const columns22 = [
+const columns = [
  {
    title: "名字",
    dataIndex: "a",
@ -39,7 +39,7 @@ const columns22 = [
  }
 ];

-const data22 = [
+const data = [
  { a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
  { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
  { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
@ -57,13 +57,20 @@ class Demo22 extends Component {
  }
 
  render() {
-    return <DragColumnTable columns={columns22} data={data22} bordered
-    
+    return <DragColumnTable 
+            columns={columns} 
+            data={data} 
+            bordered
            draggable={true} 
+            onDrop ={(event,data,columns)=>{
+              console.log("--拖拽交换列后触发事件");
+              console.log("event.target:",event.target);
+              console.log("data:",data);
+              console.log("拖拽完成后的columns:",columns);
+            }}
    />;
  }
 }
+
 Demo22.defaultProps = defaultProps22;
-
-
 export default Demo22;
--- a/demo/demolist/Demo1002.js
+++ b/demo/demolist/Demo1002.js
@ -2,7 +2,7 @@
 *
 * @title 拖拽改变列宽度
 * @parent 列操作-拖拽 Drag
-* @description 注：不支持tree结构的表头、合并表头的table
+* @description onDropBorder方法为调整列宽后触发的回调函数。注：不支持tree结构的表头、合并表头的table。
 */
 import React, { Component } from 'react';
 import {Icon} from "tinper-bee";
@ -62,7 +62,10 @@ class Demo23 extends Component {
  }

  render() {
-    return <DragColumnTable columns={columns23} data={data23} bordered
+    return <DragColumnTable 
+            columns={columns23} 
+            data={data23} 
+            bordered
            dragborder={true} 
            draggable={true} 
            scroll={{y:200}}
--- a/demo/demolist/Demo1103.js
+++ b/demo/demolist/Demo1103.js
@ -1,8 +1,8 @@
 /**
 *
-* @title 选中行颜色、自定义表格标题和表尾
+* @title 自定义表格标题、表尾、选中行颜色
 * @parent 扩展行 Expanded Row
-* @description 选中行的样式可自定义
+* @description 可根据业务场景设置不同的`title`和`footer`。选中行颜色可用rowClassName作为选择器自定义css样式。
 */

 import React, { Component } from "react";
@ -11,15 +11,16 @@ import {Button,Tooltip,} from "tinper-bee";
 import Table from "../../src";

 const columns = [
-  { title: "用户名", dataIndex: "a", key: "a", width:80 , className:"rowClassName"},
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
-  { title: "年龄", dataIndex: "c", key: "c", width: 200 },
+  { title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName"},
+  { title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
+  { title: "性别", dataIndex: "c", key: "c", width: 500 },
+  { title: "部门", dataIndex: "d", key: "d", width: 200 }
 ];

 const data = [
-  { a: "令狐冲", b: "男", c: 41, key: "1" },
-  { a: "黄蓉", b: "男", c: 67, key: "2" },
-  { a: "郭靖", b: "男", c: 25, key: "3" }
+  { a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
+  { a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
+  { a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
 ];

 class Demo26 extends Component {
@ -49,8 +50,8 @@ class Demo26 extends Component {
              selectedRowIndex: index
          });
        }}
-        title={currentData => <div>标题: 这是一个标题</div>}
-        footer={currentData => <div>表尾: 我是小尾巴</div>}
+        title={currentData => <div>员工信息统计表</div>}
+        footer={currentData => <div>合计: 共{data.length}条数据</div>}
      /> 
    );
  }
--- a/demo/demolist/Demo1106.js
+++ b/demo/demolist/Demo1106.js
@ -2,7 +2,7 @@
 *
 * @title 自定义行高
 * @parent 扩展行 Expanded Row
-* @description 设置`height`属性自定义表格行高，设置`headerHeight`属性自定义表头高度。
+* @description 设置`height`属性自定义表体行高，设置`headerHeight`属性自定义表头高度。
 */

 import React, { Component } from "react";
@ -10,32 +10,16 @@ import {Button,Tooltip} from "tinper-bee";
 import Table from "../../src";

 const columns = [
-  {
-    title: "用户名", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
-    fixed:'left',
-    render: (text, record, index) => {
-      return (
-        <Tooltip inverse overlay={text}>
-          <span tootip={text} style={{
-            display: "inline-block",
-            width: "60px",
-            textOverflow: "ellipsis",
-            overflow: "hidden",
-            whiteSpace: "nowrap",
-            verticalAlign: "middle",
-          }}>{text}</span>
-        </Tooltip>
-      );
-    }
-  },
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 500},
-  { title: "年龄", dataIndex: "c", key: "c", width: 200 }
+  { title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName"},
+  { title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
+  { title: "性别", dataIndex: "c", key: "c", width: 500 },
+  { title: "部门", dataIndex: "d", key: "d", width: 200 }
 ];

 const data = [
-  { a: "令狐冲", b: "男", c: 41, key: "1" },
-  { a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
-  { a: "郭靖", b: "男", c: 25, key: "3" }
+  { a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
+  { a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
+  { a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
 ];

 class Demo1 extends Component {
@ -63,7 +47,6 @@ class Demo1 extends Component {

  render() {
    return (
-   
        <Table
          columns={columns}
          data={data}
--- a/demo/index.js
+++ b/demo/index.js
--- a/dist/demo.css
+++ b/dist/demo.css
@ -7,7 +7,6 @@
@import url(../node_modules/bee-dropdown/build/Dropdown.css);
@import url(../node_modules/bee-input-number/build/InputNumber.css);
@import url(../node_modules/bee-modal/build/Modal.css);
-@import url(../node_modules/tinper-bee/assets/tinper-bee.css);
 .red {
  color: rgb(244,67,54) !important; }

--- a/dist/demo.css.map
+++ b/dist/demo.css.map
--- a/dist/demo.js
+++ b/dist/demo.js
--- a/dist/demo.js.map
+++ b/dist/demo.js.map