@timus-networks/theme 1.0.53 → 1.0.54
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.
- package/components-js/ThemeCascader.vue +3 -1
- package/components-js/ThemeDescription.vue +167 -0
- package/components-js/ThemeForm.vue +18 -25
- package/components-js/ThemeTable.vue +226 -226
- package/components-js/TimusSamples.vue +2 -1
- package/components-ts/ThemeCascader.vue +3 -1
- package/components-ts/ThemeDescription.vue +167 -0
- package/components-ts/ThemeForm.vue +18 -25
- package/components-ts/ThemeTable.vue +226 -226
- package/components-ts/TimusSamples.vue +2 -1
- package/output/main.css +1 -1
- package/package.json +1 -1
|
@@ -1,245 +1,245 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
2
|
+
<div class="pt-8 pb-16 flex gap-12 flex-col">
|
|
3
|
+
<section>
|
|
4
|
+
<h1>Fixed Height</h1>
|
|
5
|
+
<p class="p-md-c my-6">
|
|
6
|
+
This example demonstrates the basic usage of creating a data table using the `el-table` component provided by Element UI. Please note that the
|
|
7
|
+
outer border is applied with `table-container`.
|
|
8
|
+
</p>
|
|
9
|
+
<div class="grid flex-column">
|
|
10
|
+
<div class="table-container mb-4">
|
|
11
|
+
<el-table
|
|
12
|
+
:data="tableData"
|
|
13
|
+
:default-sort="{ prop: 'date', order: 'descending' }"
|
|
14
|
+
@selection-change="handleSelectionChange"
|
|
15
|
+
ref="multipleTable"
|
|
16
|
+
height="360px"
|
|
17
|
+
style="width: 100%"
|
|
18
|
+
>
|
|
19
|
+
<el-table-column type="selection" width="55"> </el-table-column>
|
|
20
|
+
<el-table-column
|
|
21
|
+
fixed
|
|
22
|
+
prop="date"
|
|
23
|
+
label="Date"
|
|
24
|
+
sortable
|
|
25
|
+
column-key="date"
|
|
26
|
+
:filters="[
|
|
27
|
+
{ text: '2016-05-01', value: '2016-05-01' },
|
|
28
|
+
{ text: '2016-05-02', value: '2016-05-02' },
|
|
29
|
+
{ text: '2016-05-03', value: '2016-05-03' },
|
|
30
|
+
{ text: '2016-05-04', value: '2016-05-04' },
|
|
31
|
+
]"
|
|
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>
|
|
37
|
+
<el-table-column
|
|
38
|
+
prop="tag"
|
|
39
|
+
label="Tag"
|
|
40
|
+
:filters="[
|
|
41
|
+
{ text: 'Home', value: 'Home' },
|
|
42
|
+
{ text: 'Office', value: 'Office' },
|
|
43
|
+
{ text: 'Potato', value: 'Potato' },
|
|
44
|
+
]"
|
|
45
|
+
:filter-method="filterTag"
|
|
46
|
+
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>
|
|
54
|
+
<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>
|
|
57
|
+
</template>
|
|
58
|
+
</el-table-column>
|
|
59
|
+
</el-table>
|
|
60
|
+
</div>
|
|
61
|
+
<el-pagination
|
|
62
|
+
@size-change="handleSizeChange"
|
|
63
|
+
@current-change="handleCurrentChange"
|
|
64
|
+
:current-page.sync="currentPage4"
|
|
65
|
+
:page-sizes="[100, 200, 300, 400]"
|
|
66
|
+
:page-size="100"
|
|
67
|
+
layout="total, prev, pager, next, jumper, sizes"
|
|
68
|
+
:total="400"
|
|
69
|
+
>
|
|
70
|
+
</el-pagination>
|
|
71
|
+
</div>
|
|
72
|
+
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
73
|
+
<p class="text-xs">
|
|
74
|
+
<code>
|
|
75
|
+
<div class="table-container"><el-table :data="tableData" :default-sort="{ prop: 'date', order: 'descending'
|
|
76
|
+
}"></el-table></div>
|
|
77
|
+
</code>
|
|
78
|
+
</p>
|
|
79
|
+
</div>
|
|
80
|
+
</section>
|
|
81
81
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
82
|
+
<section>
|
|
83
|
+
<h1>Expandable Row</h1>
|
|
84
|
+
<p class="p-md-c my-6">
|
|
85
|
+
When the row content is too long and you do not want to display the horizontal scroll bar, you can use the expandable row feature. Activate
|
|
86
|
+
expandable row by adding type="expand" and scoped slot. The template for el-table-column will be rendered as the contents of the expanded row,
|
|
87
|
+
and you can access the same attributes as when you are using Scoped slot in custom column templates.
|
|
88
|
+
</p>
|
|
89
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
90
|
+
<div class="table-container mb-4">
|
|
91
|
+
<el-table :data="tableData" style="width: 100%">
|
|
92
|
+
<el-table-column type="expand">
|
|
93
|
+
<template slot-scope="props">
|
|
94
|
+
<p>State: {{ props.row.state }}</p>
|
|
95
|
+
<p>City: {{ props.row.city }}</p>
|
|
96
|
+
<p>Address: {{ props.row.address }}</p>
|
|
97
|
+
<p>Zip: {{ props.row.zip }}</p>
|
|
98
|
+
</template>
|
|
99
|
+
</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>
|
|
102
|
+
</el-table>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
106
|
+
<p class="text-xs">
|
|
107
|
+
<code>
|
|
108
|
+
<el-table :data="tableData"> <el-table-column type="expand"> <template v-slot="props"> <p>State: { props.row.state
|
|
109
|
+
} </p> </template> </el-table-column> </el-table>
|
|
110
|
+
</code>
|
|
111
|
+
</p>
|
|
112
|
+
</div>
|
|
113
|
+
</section>
|
|
114
|
+
</div>
|
|
115
115
|
</template>
|
|
116
116
|
|
|
117
117
|
<script>
|
|
118
118
|
import Vue from 'vue';
|
|
119
119
|
|
|
120
120
|
export default Vue.extend({
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
},
|
|
132
|
-
},
|
|
133
|
-
data() {
|
|
134
|
-
return {
|
|
135
|
-
multipleSelection: [],
|
|
136
|
-
currentPage1: 5,
|
|
137
|
-
currentPage2: 5,
|
|
138
|
-
currentPage3: 5,
|
|
139
|
-
currentPage4: 4,
|
|
140
|
-
tableData: [
|
|
141
|
-
{
|
|
142
|
-
date: '2016-05-03',
|
|
143
|
-
name: 'Tom',
|
|
144
|
-
state: 'California',
|
|
145
|
-
city: 'Los Angeles',
|
|
146
|
-
address: 'No. 189, Grove St, Los Angeles',
|
|
147
|
-
zip: 'CA 90036',
|
|
148
|
-
tag: 'Home',
|
|
149
|
-
},
|
|
150
|
-
{
|
|
151
|
-
date: '2016-05-02',
|
|
152
|
-
name: 'Tom',
|
|
153
|
-
state: 'California',
|
|
154
|
-
city: 'Los Angeles',
|
|
155
|
-
address: 'No. 189, Grove St, Los Angeles',
|
|
156
|
-
zip: 'CA 90036',
|
|
157
|
-
tag: 'Office',
|
|
158
|
-
},
|
|
159
|
-
{
|
|
160
|
-
date: '2016-05-04',
|
|
161
|
-
name: 'Tom',
|
|
162
|
-
state: 'California',
|
|
163
|
-
city: 'Los Angeles',
|
|
164
|
-
address: 'No. 189, Grove St, Los Angeles',
|
|
165
|
-
zip: 'CA 90036',
|
|
166
|
-
tag: 'Home',
|
|
167
|
-
},
|
|
168
|
-
{
|
|
169
|
-
date: '2016-05-01',
|
|
170
|
-
name: 'Tom',
|
|
171
|
-
state: 'California',
|
|
172
|
-
city: 'Los Angeles',
|
|
173
|
-
address: 'No. 189, Grove St, Los Angeles',
|
|
174
|
-
zip: 'CA 90036',
|
|
175
|
-
tag: 'Office',
|
|
176
|
-
},
|
|
177
|
-
{
|
|
178
|
-
date: '2016-05-08',
|
|
179
|
-
name: 'Tom',
|
|
180
|
-
state: 'California',
|
|
181
|
-
city: 'Los Angeles',
|
|
182
|
-
address: 'No. 189, Grove St, Los Angeles',
|
|
183
|
-
zip: 'CA 90036',
|
|
184
|
-
tag: 'Office',
|
|
185
|
-
},
|
|
186
|
-
{
|
|
187
|
-
date: '2016-05-06',
|
|
188
|
-
name: 'Tom',
|
|
189
|
-
state: 'California',
|
|
190
|
-
city: 'Los Angeles',
|
|
191
|
-
address: 'No. 189, Grove St, Los Angeles',
|
|
192
|
-
zip: 'CA 90036',
|
|
193
|
-
tag: 'Home',
|
|
194
|
-
},
|
|
195
|
-
{
|
|
196
|
-
date: '2016-05-07',
|
|
197
|
-
name: 'Tom',
|
|
198
|
-
state: 'California',
|
|
199
|
-
city: 'Los Angeles',
|
|
200
|
-
address: 'No. 189, Grove St, Los Angeles',
|
|
201
|
-
zip: 'CA 90036',
|
|
202
|
-
tag: 'Office',
|
|
203
|
-
},
|
|
204
|
-
],
|
|
205
|
-
};
|
|
121
|
+
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;
|
|
206
131
|
},
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
132
|
+
},
|
|
133
|
+
data() {
|
|
134
|
+
return {
|
|
135
|
+
multipleSelection: [],
|
|
136
|
+
currentPage1: 5,
|
|
137
|
+
currentPage2: 5,
|
|
138
|
+
currentPage3: 5,
|
|
139
|
+
currentPage4: 4,
|
|
140
|
+
tableData: [
|
|
141
|
+
{
|
|
142
|
+
date: '2016-05-03',
|
|
143
|
+
name: 'Tom Tom Tom Tom Tom Tom Tom Tom Tom Tom Tom Kruz',
|
|
144
|
+
state: 'California ST',
|
|
145
|
+
city: 'Los Angeles',
|
|
146
|
+
address: 'No. 189, Grove St, Los Angeles',
|
|
147
|
+
zip: 'CA 90036',
|
|
148
|
+
tag: 'Home',
|
|
219
149
|
},
|
|
220
|
-
|
|
221
|
-
|
|
150
|
+
{
|
|
151
|
+
date: '2016-05-02',
|
|
152
|
+
name: 'Tom',
|
|
153
|
+
state: 'California',
|
|
154
|
+
city: 'Los Angeles',
|
|
155
|
+
address: 'No. 189, Grove St, Los Angeles',
|
|
156
|
+
zip: 'CA 90036',
|
|
157
|
+
tag: 'Office',
|
|
222
158
|
},
|
|
223
|
-
|
|
224
|
-
|
|
159
|
+
{
|
|
160
|
+
date: '2016-05-04',
|
|
161
|
+
name: 'Tom',
|
|
162
|
+
state: 'California',
|
|
163
|
+
city: 'Los Angeles',
|
|
164
|
+
address: 'No. 189, Grove St, Los Angeles',
|
|
165
|
+
zip: 'CA 90036',
|
|
166
|
+
tag: 'Home',
|
|
225
167
|
},
|
|
226
|
-
|
|
227
|
-
|
|
168
|
+
{
|
|
169
|
+
date: '2016-05-01',
|
|
170
|
+
name: 'Tom',
|
|
171
|
+
state: 'California',
|
|
172
|
+
city: 'Los Angeles',
|
|
173
|
+
address: 'No. 189, Grove St, Los Angeles',
|
|
174
|
+
zip: 'CA 90036',
|
|
175
|
+
tag: 'Office',
|
|
228
176
|
},
|
|
229
|
-
|
|
230
|
-
|
|
177
|
+
{
|
|
178
|
+
date: '2016-05-08',
|
|
179
|
+
name: 'Tom',
|
|
180
|
+
state: 'California',
|
|
181
|
+
city: 'Los Angeles',
|
|
182
|
+
address: 'No. 189, Grove St, Los Angeles',
|
|
183
|
+
zip: 'CA 90036',
|
|
184
|
+
tag: 'Office',
|
|
231
185
|
},
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
186
|
+
{
|
|
187
|
+
date: '2016-05-06',
|
|
188
|
+
name: 'Tom',
|
|
189
|
+
state: 'California',
|
|
190
|
+
city: 'Los Angeles',
|
|
191
|
+
address: 'No. 189, Grove St, Los Angeles',
|
|
192
|
+
zip: 'CA 90036',
|
|
193
|
+
tag: 'Home',
|
|
236
194
|
},
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
195
|
+
{
|
|
196
|
+
date: '2016-05-07',
|
|
197
|
+
name: 'Tom',
|
|
198
|
+
state: 'California',
|
|
199
|
+
city: 'Los Angeles',
|
|
200
|
+
address: 'No. 189, Grove St, Los Angeles',
|
|
201
|
+
zip: 'CA 90036',
|
|
202
|
+
tag: 'Office',
|
|
242
203
|
},
|
|
204
|
+
],
|
|
205
|
+
};
|
|
206
|
+
},
|
|
207
|
+
methods: {
|
|
208
|
+
toggleSelection(rows) {
|
|
209
|
+
if (rows) {
|
|
210
|
+
rows.forEach((row) => {
|
|
211
|
+
this.$refs.multipleTable.toggleRowSelection(row);
|
|
212
|
+
});
|
|
213
|
+
} else {
|
|
214
|
+
this.$refs.multipleTable.clearSelection();
|
|
215
|
+
}
|
|
216
|
+
},
|
|
217
|
+
handleSelectionChange(val) {
|
|
218
|
+
this.multipleSelection = val;
|
|
219
|
+
},
|
|
220
|
+
resetDateFilter() {
|
|
221
|
+
this.$refs.filterTable.clearFilter('date');
|
|
222
|
+
},
|
|
223
|
+
clearFilter() {
|
|
224
|
+
this.$refs.filterTable.clearFilter();
|
|
225
|
+
},
|
|
226
|
+
formatter(row, column) {
|
|
227
|
+
return row.address;
|
|
228
|
+
},
|
|
229
|
+
filterTag(value, row) {
|
|
230
|
+
return row.tag === value;
|
|
231
|
+
},
|
|
232
|
+
filterHandler(value, row, column) {
|
|
233
|
+
console.log(row, column, value);
|
|
234
|
+
const property = column['property'];
|
|
235
|
+
return row[property] === value;
|
|
236
|
+
},
|
|
237
|
+
handleSizeChange(val) {
|
|
238
|
+
console.log(`${val} items per page`);
|
|
239
|
+
},
|
|
240
|
+
handleCurrentChange(val) {
|
|
241
|
+
console.log(`current page: ${val}`);
|
|
243
242
|
},
|
|
243
|
+
},
|
|
244
244
|
});
|
|
245
245
|
</script>
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
<el-tab-pane label="Sidebar" name="twenty-one"><ThemeSidebar></ThemeSidebar></el-tab-pane>
|
|
25
25
|
<el-tab-pane label="Upload" name="twenty-two"><ThemeUpload></ThemeUpload></el-tab-pane>
|
|
26
26
|
<el-tab-pane label="MessageBox" name="twenty-three"><ThemeMessageBox></ThemeMessageBox></el-tab-pane>
|
|
27
|
+
<el-tab-pane label="Description" name="twenty-4"><ThemeDescription></ThemeDescription></el-tab-pane>
|
|
27
28
|
</el-tabs>
|
|
28
29
|
</div>
|
|
29
30
|
</template>
|
|
@@ -35,7 +36,7 @@ import ThemePopover from './ThemePopover.vue';
|
|
|
35
36
|
export default {
|
|
36
37
|
data() {
|
|
37
38
|
return {
|
|
38
|
-
activeName: '
|
|
39
|
+
activeName: 'twenty-4',
|
|
39
40
|
};
|
|
40
41
|
},
|
|
41
42
|
methods: {
|
|
@@ -25,9 +25,11 @@
|
|
|
25
25
|
<el-select v-model="value" placeholder="Select">
|
|
26
26
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
|
27
27
|
</el-select>
|
|
28
|
-
<el-
|
|
28
|
+
<el-input v-show="false"></el-input>
|
|
29
|
+
<el-select v-model="value" placeholder="Select" class="grow">
|
|
29
30
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
|
30
31
|
</el-select>
|
|
32
|
+
<el-button class="isax-add-circle grow-0">Add</el-button>
|
|
31
33
|
</div>
|
|
32
34
|
</section>
|
|
33
35
|
<section>
|