@timus-networks/theme 1.0.88 → 1.0.90

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/components-js/ThemeTable.vue +35 -36
  2. package/components-ts/ThemeTable.vue +35 -36
  3. package/output/main.css +1 -1
  4. package/package.json +1 -1
package/components-js/ThemeTable.vue CHANGED
@@ -9,14 +9,14 @@
9
9
  <div class="grid flex-column">
10
10
  <div class="table-container mb-4">
11
11
  <el-table
12
+ ref="multipleTable"
12
13
  :data="tableData"
13
14
  :default-sort="{ prop: 'date', order: 'descending' }"
14
- @selection-change="handleSelectionChange"
15
- ref="multipleTable"
16
15
  height="360px"
17
16
  style="width: 100%"
17
+ @selection-change="handleSelectionChange"
18
18
  >
19
- <el-table-column type="selection" width="55"> </el-table-column>
19
+ <el-table-column type="selection" width="16" />
20
20
  <el-table-column
21
21
  fixed
22
22
  prop="date"
@@ -30,10 +30,9 @@
30
30
  { text: '2016-05-04', value: '2016-05-04' },
31
31
  ]"
32
32
  :filter-method="filterHandler"
33
- >
34
- </el-table-column>
35
- <el-table-column prop="name" label="Name" width="60" :show-overflow-tooltip="true"> </el-table-column>
36
- <el-table-column prop="address" label="Address" :formatter="formatter"> </el-table-column>
33
+ />
34
+ <el-table-column prop="name" label="Name" width="60" :show-overflow-tooltip="true" />
35
+ <el-table-column prop="address" label="Address" :formatter="formatter" />
37
36
  <el-table-column
38
37
  prop="tag"
39
38
  label="Tag"
@@ -44,30 +43,28 @@
44
43
  ]"
45
44
  :filter-method="filterTag"
46
45
  filter-placement="top-start"
47
- >
48
- </el-table-column>
49
- <el-table-column prop="name" label="Name" width="120"> </el-table-column>
50
- <el-table-column prop="state" label="State" width="120"> </el-table-column>
51
- <el-table-column prop="city" label="City" width="120"> </el-table-column>
52
- <el-table-column prop="address" label="Address" width="300"> </el-table-column>
53
- <el-table-column prop="zip" label="Zip" width="120"> </el-table-column>
46
+ />
47
+ <el-table-column prop="name" label="Name" width="120" />
48
+ <el-table-column prop="state" label="State" width="120" />
49
+ <el-table-column prop="city" label="City" width="120" />
50
+ <el-table-column prop="address" label="Address" width="300" />
51
+ <el-table-column prop="zip" label="Zip" width="120" />
54
52
  <el-table-column fixed="right" label="Operations" width="120">
55
- <template slot-scope="scope">
56
- <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small"> Remove </el-button>
53
+ <template #default="scope">
54
+ <el-button type="text" size="small" @click.native.prevent="deleteRow(scope.$index, tableData)"> Remove </el-button>
57
55
  </template>
58
56
  </el-table-column>
59
57
  </el-table>
60
58
  </div>
61
59
  <el-pagination
62
- @size-change="handleSizeChange"
63
- @current-change="handleCurrentChange"
64
- :current-page.sync="currentPage4"
60
+ v-model:current-page="currentPage4"
65
61
  :page-sizes="[100, 200, 300, 400]"
66
62
  :page-size="100"
67
63
  layout="total, prev, pager, next, jumper, sizes"
68
64
  :total="400"
69
- >
70
- </el-pagination>
65
+ @size-change="handleSizeChange"
66
+ @current-change="handleCurrentChange"
67
+ />
71
68
  </div>
72
69
  <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
73
70
  <p class="text-xs">
@@ -90,15 +87,15 @@
90
87
  <div class="table-container mb-4">
91
88
  <el-table :data="tableData" style="width: 100%">
92
89
  <el-table-column type="expand">
93
- <template slot-scope="props">
90
+ <template #default="props">
94
91
  <p>State: {{ props.row.state }}</p>
95
92
  <p>City: {{ props.row.city }}</p>
96
93
  <p>Address: {{ props.row.address }}</p>
97
94
  <p>Zip: {{ props.row.zip }}</p>
98
95
  </template>
99
96
  </el-table-column>
100
- <el-table-column label="Date" prop="date"> </el-table-column>
101
- <el-table-column label="Name" prop="name"> </el-table-column>
97
+ <el-table-column label="Date" prop="date" />
98
+ <el-table-column label="Name" prop="name" />
102
99
  </el-table>
103
100
  </div>
104
101
  </div>
@@ -119,17 +116,6 @@ import Vue from 'vue';
119
116
 
120
117
  export default Vue.extend({
121
118
  name: 'ThemeTable',
122
- computed: {
123
- gridSize() {
124
- const grids = {
125
- 5: 'grid-cols-5',
126
- 6: 'grid-cols-6',
127
- 7: 'grid-cols-7',
128
- 8: 'grid-cols-8',
129
- };
130
- return grids;
131
- },
132
- },
133
119
  data() {
134
120
  return {
135
121
  multipleSelection: [],
@@ -204,6 +190,18 @@ export default Vue.extend({
204
190
  ],
205
191
  };
206
192
  },
193
+ computed: {
194
+ gridSize() {
195
+ const grids = {
196
+ 5: 'grid-cols-5',
197
+ 6: 'grid-cols-6',
198
+ 7: 'grid-cols-7',
199
+ 8: 'grid-cols-8',
200
+ };
201
+
202
+ return grids;
203
+ },
204
+ },
207
205
  methods: {
208
206
  toggleSelection(rows) {
209
207
  if (rows) {
@@ -231,7 +229,8 @@ export default Vue.extend({
231
229
  },
232
230
  filterHandler(value, row, column) {
233
231
  console.log(row, column, value);
234
- const property = column['property'];
232
+ const { property } = column;
233
+
235
234
  return row[property] === value;
236
235
  },
237
236
  handleSizeChange(val) {
package/components-ts/ThemeTable.vue CHANGED
@@ -9,14 +9,14 @@
9
9
  <div class="grid flex-column">
10
10
  <div class="table-container mb-4">
11
11
  <el-table
12
+ ref="multipleTable"
12
13
  :data="tableData"
13
14
  :default-sort="{ prop: 'date', order: 'descending' }"
14
- @selection-change="handleSelectionChange"
15
- ref="multipleTable"
16
15
  height="360px"
17
16
  style="width: 100%"
17
+ @selection-change="handleSelectionChange"
18
18
  >
19
- <el-table-column type="selection" width="55"> </el-table-column>
19
+ <el-table-column type="selection" width="16" />
20
20
  <el-table-column
21
21
  fixed
22
22
  prop="date"
@@ -30,10 +30,9 @@
30
30
  { text: '2016-05-04', value: '2016-05-04' },
31
31
  ]"
32
32
  :filter-method="filterHandler"
33
- >
34
- </el-table-column>
35
- <el-table-column prop="name" label="Name" width="60" :show-overflow-tooltip="true"> </el-table-column>
36
- <el-table-column prop="address" label="Address" :formatter="formatter"> </el-table-column>
33
+ />
34
+ <el-table-column prop="name" label="Name" width="60" :show-overflow-tooltip="true" />
35
+ <el-table-column prop="address" label="Address" :formatter="formatter" />
37
36
  <el-table-column
38
37
  prop="tag"
39
38
  label="Tag"
@@ -44,30 +43,28 @@
44
43
  ]"
45
44
  :filter-method="filterTag"
46
45
  filter-placement="top-start"
47
- >
48
- </el-table-column>
49
- <el-table-column prop="name" label="Name" width="120"> </el-table-column>
50
- <el-table-column prop="state" label="State" width="120"> </el-table-column>
51
- <el-table-column prop="city" label="City" width="120"> </el-table-column>
52
- <el-table-column prop="address" label="Address" width="300"> </el-table-column>
53
- <el-table-column prop="zip" label="Zip" width="120"> </el-table-column>
46
+ />
47
+ <el-table-column prop="name" label="Name" width="120" />
48
+ <el-table-column prop="state" label="State" width="120" />
49
+ <el-table-column prop="city" label="City" width="120" />
50
+ <el-table-column prop="address" label="Address" width="300" />
51
+ <el-table-column prop="zip" label="Zip" width="120" />
54
52
  <el-table-column fixed="right" label="Operations" width="120">
55
- <template slot-scope="scope">
56
- <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small"> Remove </el-button>
53
+ <template #default="scope">
54
+ <el-button type="text" size="small" @click.native.prevent="deleteRow(scope.$index, tableData)"> Remove </el-button>
57
55
  </template>
58
56
  </el-table-column>
59
57
  </el-table>
60
58
  </div>
61
59
  <el-pagination
62
- @size-change="handleSizeChange"
63
- @current-change="handleCurrentChange"
64
- :current-page.sync="currentPage4"
60
+ v-model:current-page="currentPage4"
65
61
  :page-sizes="[100, 200, 300, 400]"
66
62
  :page-size="100"
67
63
  layout="total, prev, pager, next, jumper, sizes"
68
64
  :total="400"
69
- >
70
- </el-pagination>
65
+ @size-change="handleSizeChange"
66
+ @current-change="handleCurrentChange"
67
+ />
71
68
  </div>
72
69
  <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
73
70
  <p class="text-xs">
@@ -90,15 +87,15 @@
90
87
  <div class="table-container mb-4">
91
88
  <el-table :data="tableData" style="width: 100%">
92
89
  <el-table-column type="expand">
93
- <template slot-scope="props">
90
+ <template #default="props">
94
91
  <p>State: {{ props.row.state }}</p>
95
92
  <p>City: {{ props.row.city }}</p>
96
93
  <p>Address: {{ props.row.address }}</p>
97
94
  <p>Zip: {{ props.row.zip }}</p>
98
95
  </template>
99
96
  </el-table-column>
100
- <el-table-column label="Date" prop="date"> </el-table-column>
101
- <el-table-column label="Name" prop="name"> </el-table-column>
97
+ <el-table-column label="Date" prop="date" />
98
+ <el-table-column label="Name" prop="name" />
102
99
  </el-table>
103
100
  </div>
104
101
  </div>
@@ -119,17 +116,6 @@ import Vue from 'vue';
119
116
 
120
117
  export default Vue.extend({
121
118
  name: 'ThemeTable',
122
- computed: {
123
- gridSize() {
124
- const grids = {
125
- 5: 'grid-cols-5',
126
- 6: 'grid-cols-6',
127
- 7: 'grid-cols-7',
128
- 8: 'grid-cols-8',
129
- };
130
- return grids;
131
- },
132
- },
133
119
  data() {
134
120
  return {
135
121
  multipleSelection: [],
@@ -204,6 +190,18 @@ export default Vue.extend({
204
190
  ],
205
191
  };
206
192
  },
193
+ computed: {
194
+ gridSize() {
195
+ const grids = {
196
+ 5: 'grid-cols-5',
197
+ 6: 'grid-cols-6',
198
+ 7: 'grid-cols-7',
199
+ 8: 'grid-cols-8',
200
+ };
201
+
202
+ return grids;
203
+ },
204
+ },
207
205
  methods: {
208
206
  toggleSelection(rows) {
209
207
  if (rows) {
@@ -231,7 +229,8 @@ export default Vue.extend({
231
229
  },
232
230
  filterHandler(value, row, column) {
233
231
  console.log(row, column, value);
234
- const property = column['property'];
232
+ const { property } = column;
233
+
235
234
  return row[property] === value;
236
235
  },
237
236
  handleSizeChange(val) {