@timus-networks/theme 1.0.187 → 1.0.189
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/ThemeAlertBox.vue +92 -0
- package/components-js/ThemePopover.vue +35 -17
- package/components-js/TimusAlertBox.d.ts +7 -0
- package/components-js/TimusAlertBox.vue +84 -0
- package/components-js/TimusSamples.d.ts +2 -0
- package/components-js/TimusSamples.vue +39 -40
- package/components-ts/ThemeAlertBox.vue +92 -0
- package/components-ts/ThemePopover.vue +35 -17
- package/components-ts/TimusAlertBox.vue +98 -0
- package/components-ts/TimusSamples.vue +33 -31
- package/index.d.ts +2 -0
- package/output/main.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="pt-8 pb-16 flex gap-12 flex-col">
|
|
3
|
+
<section>
|
|
4
|
+
<h1>AlertBox</h1>
|
|
5
|
+
<div class="p-md-c my-6">
|
|
6
|
+
Uyarı bileşenleri, sayfada otomatik olarak kaybolmayan non-overlay mesajlarını görüntülemek için kullanılır. <br />
|
|
7
|
+
Item type çeşitleri: <b>"success | warning | info | error"</b>
|
|
8
|
+
</div>
|
|
9
|
+
<div class="flex flex-col gap-3">
|
|
10
|
+
<timus-alert-box v-for="(item, key) in colors" :key="key" :type="item" class="items-center max-w-4xl" size="normal">
|
|
11
|
+
Scanning is in progress and may take a while. You don’t need to stay on this page - feel free to return later.
|
|
12
|
+
</timus-alert-box>
|
|
13
|
+
</div>
|
|
14
|
+
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
15
|
+
<p class="text-xs">
|
|
16
|
+
<code>
|
|
17
|
+
<pre>
|
|
18
|
+
<timus-alert-box type="info" size="normal">
|
|
19
|
+
Scanning is in progress and may take a while. You don’t need to stay on this page - feel free to return later.
|
|
20
|
+
</timus-alert-box>
|
|
21
|
+
</pre>
|
|
22
|
+
</code>
|
|
23
|
+
</p>
|
|
24
|
+
</div>
|
|
25
|
+
</section>
|
|
26
|
+
</div>
|
|
27
|
+
</template>
|
|
28
|
+
<script>
|
|
29
|
+
import { defineComponent } from 'vue';
|
|
30
|
+
|
|
31
|
+
import TimusAlertBox from './TimusAlertBox.vue';
|
|
32
|
+
|
|
33
|
+
export default defineComponent({
|
|
34
|
+
name: 'ThemeTable',
|
|
35
|
+
components: { TimusAlertBox },
|
|
36
|
+
data() {
|
|
37
|
+
return {
|
|
38
|
+
colors: ['warning', 'danger', 'info', 'success', 'error'],
|
|
39
|
+
};
|
|
40
|
+
},
|
|
41
|
+
computed: {
|
|
42
|
+
gridSize() {
|
|
43
|
+
const grids = {
|
|
44
|
+
5: 'grid-cols-5',
|
|
45
|
+
6: 'grid-cols-6',
|
|
46
|
+
7: 'grid-cols-7',
|
|
47
|
+
8: 'grid-cols-8',
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
return grids;
|
|
51
|
+
},
|
|
52
|
+
},
|
|
53
|
+
methods: {
|
|
54
|
+
toggleSelection(rows) {
|
|
55
|
+
if (rows) {
|
|
56
|
+
rows.forEach((row) => {
|
|
57
|
+
this.$refs.multipleTable.toggleRowSelection(row);
|
|
58
|
+
});
|
|
59
|
+
} else {
|
|
60
|
+
this.$refs.multipleTable.clearSelection();
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
handleSelectionChange(val) {
|
|
64
|
+
this.multipleSelection = val;
|
|
65
|
+
},
|
|
66
|
+
resetDateFilter() {
|
|
67
|
+
this.$refs.filterTable.clearFilter('date');
|
|
68
|
+
},
|
|
69
|
+
clearFilter() {
|
|
70
|
+
this.$refs.filterTable.clearFilter();
|
|
71
|
+
},
|
|
72
|
+
formatter(row, column) {
|
|
73
|
+
return row.address;
|
|
74
|
+
},
|
|
75
|
+
filterTag(value, row) {
|
|
76
|
+
return row.tag === value;
|
|
77
|
+
},
|
|
78
|
+
filterHandler(value, row, column) {
|
|
79
|
+
console.log(row, column, value);
|
|
80
|
+
const { property } = column;
|
|
81
|
+
|
|
82
|
+
return row[property] === value;
|
|
83
|
+
},
|
|
84
|
+
handleSizeChange(val) {
|
|
85
|
+
console.log(`${val} items per page`);
|
|
86
|
+
},
|
|
87
|
+
handleCurrentChange(val) {
|
|
88
|
+
console.log(`current page: ${val}`);
|
|
89
|
+
},
|
|
90
|
+
},
|
|
91
|
+
});
|
|
92
|
+
</script>
|
|
@@ -54,16 +54,24 @@
|
|
|
54
54
|
|
|
55
55
|
<section>
|
|
56
56
|
<h2>Popover with Table</h2>
|
|
57
|
-
<
|
|
58
|
-
Displays tables with popover content.
|
|
59
|
-
|
|
57
|
+
<div class="p-md-c my-6">
|
|
58
|
+
Displays tables with popover content.
|
|
59
|
+
<ul class="list-disc list-inside">
|
|
60
|
+
<li>Add class to <b><el table class="popover-table" /></b></li>
|
|
61
|
+
<li>If you need a description add class to <b><div class="popover-description">sdd sdsds</div></b></li>
|
|
62
|
+
<li>
|
|
63
|
+
You can use custom <b>TimusAlertBox</b> component if you need a <timus-alert-box />. You can find documentation in tabs for more
|
|
64
|
+
info.
|
|
65
|
+
</li>
|
|
66
|
+
</ul>
|
|
67
|
+
</div>
|
|
60
68
|
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
61
69
|
<el-popover placement="right" width="400" trigger="click">
|
|
62
70
|
<el-alert title="error alert" type="error" show-icon />
|
|
63
71
|
<el-table :data="gridData" class="popover-table">
|
|
64
|
-
<el-table-column
|
|
65
|
-
<el-table-column
|
|
66
|
-
<el-table-column
|
|
72
|
+
<el-table-column property="date" label="date" />
|
|
73
|
+
<el-table-column property="name" label="name" />
|
|
74
|
+
<el-table-column property="address" label="address" />
|
|
67
75
|
</el-table>
|
|
68
76
|
<div class="popover-description">sdd sdsds</div>
|
|
69
77
|
<div class="popover-footer">
|
|
@@ -75,17 +83,27 @@
|
|
|
75
83
|
</template>
|
|
76
84
|
</el-popover>
|
|
77
85
|
</div>
|
|
78
|
-
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
79
|
-
<
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
86
|
+
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100 text-xs">
|
|
87
|
+
<pre>
|
|
88
|
+
<code>
|
|
89
|
+
<el-popover placement="right" width="400" trigger="click">
|
|
90
|
+
<el-alert title="error alert" type="error" show-icon />
|
|
91
|
+
<el-table :data="gridData" class="popover-table">
|
|
92
|
+
<el-table-column property="date" label="date" />
|
|
93
|
+
<el-table-column property="name" label="name" />
|
|
94
|
+
<el-table-column property="address" label="address" />
|
|
95
|
+
</el-table>
|
|
96
|
+
<div class="popover-description">sdd sdsds</div>
|
|
97
|
+
<div class="popover-footer">
|
|
98
|
+
<el-button>Cancel</el-button>
|
|
99
|
+
<el-button>Save</el-button>
|
|
100
|
+
</div>
|
|
101
|
+
<template #reference>
|
|
102
|
+
<el-button type="primary" size="small">Click to activate</el-button>
|
|
103
|
+
</template>
|
|
104
|
+
</el-popover>
|
|
105
|
+
</code>
|
|
106
|
+
</pre>
|
|
89
107
|
</div>
|
|
90
108
|
|
|
91
109
|
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div id="wrapper" :class="`flex flex-row border rounded-lg items-start ${size_class.wrapper} ${wrapper_css_class}`">
|
|
3
|
+
<div id="icon-wrapper" :class="`flex self-start ${size_class.icon_wrapper}`">
|
|
4
|
+
<div id="icon" :class="`flex items-center justify-center rounded-full text-white ${size_class.icon} ${icon_class}`" />
|
|
5
|
+
</div>
|
|
6
|
+
|
|
7
|
+
<div :class="`flex flex-col justify-center ml-3 gap-2 ${size_class.slot} ${text_class}`">
|
|
8
|
+
<slot />
|
|
9
|
+
</div>
|
|
10
|
+
</div>
|
|
11
|
+
</template>
|
|
12
|
+
|
|
13
|
+
<script>/**
|
|
14
|
+
* Alert box display boxes with type parameter
|
|
15
|
+
*
|
|
16
|
+
* types: info, warning, success, error
|
|
17
|
+
*/
|
|
18
|
+
import Vue from 'vue';
|
|
19
|
+
export default Vue.extend({
|
|
20
|
+
props: {
|
|
21
|
+
type: {
|
|
22
|
+
type: String,
|
|
23
|
+
default() {
|
|
24
|
+
return 'info';
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
size: {
|
|
28
|
+
type: String,
|
|
29
|
+
default() {
|
|
30
|
+
return 'normal';
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
computed: {
|
|
35
|
+
wrapper_css_class() {
|
|
36
|
+
const classes = {
|
|
37
|
+
info: 'bg-info-100 border-info-500',
|
|
38
|
+
warning: 'bg-warning-100 border-warning-500',
|
|
39
|
+
success: 'bg-success-100 border-success-500',
|
|
40
|
+
error: 'bg-danger-100 border-danger-500',
|
|
41
|
+
danger: 'bg-danger-100 border-danger-500',
|
|
42
|
+
};
|
|
43
|
+
return classes[this.type] || classes.info;
|
|
44
|
+
},
|
|
45
|
+
icon_class() {
|
|
46
|
+
const classes = {
|
|
47
|
+
success: 'isax-tick-circle bg-success-500',
|
|
48
|
+
warning: 'isax-danger bg-warning-500',
|
|
49
|
+
info: 'isax-info-circle bg-info-500',
|
|
50
|
+
error: 'isax-danger bg-danger-500',
|
|
51
|
+
danger: 'isax-danger bg-danger-500',
|
|
52
|
+
};
|
|
53
|
+
return classes[this.type] || classes.info;
|
|
54
|
+
},
|
|
55
|
+
text_class() {
|
|
56
|
+
const classes = {
|
|
57
|
+
info: 'text-info-500',
|
|
58
|
+
warning: 'text-warning-500',
|
|
59
|
+
success: 'text-success-500',
|
|
60
|
+
error: 'text-danger-500',
|
|
61
|
+
danger: 'text-danger-500',
|
|
62
|
+
};
|
|
63
|
+
return classes[this.type] || classes.info;
|
|
64
|
+
},
|
|
65
|
+
size_class() {
|
|
66
|
+
const sizes = {
|
|
67
|
+
normal: {
|
|
68
|
+
wrapper: 'p-3 my-3 p-md',
|
|
69
|
+
icon_wrapper: 'w-8',
|
|
70
|
+
icon: '!w-8 !h-8',
|
|
71
|
+
slot: 'p-md ml-3',
|
|
72
|
+
},
|
|
73
|
+
small: {
|
|
74
|
+
wrapper: 'p-2 my-2 p-xs',
|
|
75
|
+
icon_wrapper: 'w-6',
|
|
76
|
+
icon: '!w-6 !h-6',
|
|
77
|
+
slot: 'p-xs ml-2',
|
|
78
|
+
},
|
|
79
|
+
};
|
|
80
|
+
return sizes[this.size];
|
|
81
|
+
},
|
|
82
|
+
},
|
|
83
|
+
});
|
|
84
|
+
</script>
|
|
@@ -1,54 +1,53 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="container py-16">
|
|
3
3
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
4
|
-
<el-tab-pane label="
|
|
5
|
-
<el-tab-pane label="
|
|
6
|
-
<el-tab-pane label="
|
|
7
|
-
<el-tab-pane label="
|
|
8
|
-
<el-tab-pane label="
|
|
9
|
-
<el-tab-pane label="
|
|
10
|
-
<el-tab-pane label="
|
|
11
|
-
<el-tab-pane label="
|
|
12
|
-
<el-tab-pane label="
|
|
13
|
-
<el-tab-pane label="
|
|
14
|
-
<el-tab-pane label="
|
|
15
|
-
<el-tab-pane label="
|
|
16
|
-
<el-tab-pane label="
|
|
17
|
-
<el-tab-pane label="
|
|
18
|
-
<el-tab-pane label="
|
|
19
|
-
<el-tab-pane label="
|
|
20
|
-
<el-tab-pane label="
|
|
21
|
-
<el-tab-pane label="
|
|
22
|
-
<el-tab-pane label="
|
|
23
|
-
<el-tab-pane label="
|
|
24
|
-
<el-tab-pane label="
|
|
25
|
-
<el-tab-pane label="
|
|
26
|
-
<el-tab-pane label="
|
|
27
|
-
<el-tab-pane label="
|
|
28
|
-
<el-tab-pane label="
|
|
29
|
-
<el-tab-pane label="
|
|
30
|
-
<el-tab-pane label="
|
|
4
|
+
<el-tab-pane label="Alert" name="alert"><ThemeAlert /></el-tab-pane>
|
|
5
|
+
<el-tab-pane label="AlertBox" name="alert-box"><ThemeAlertBox /></el-tab-pane>
|
|
6
|
+
<el-tab-pane label="Avatar" name="avatar"><ThemeAvatar /></el-tab-pane>
|
|
7
|
+
<el-tab-pane label="Badge" name="badge"><ThemeBadge /></el-tab-pane>
|
|
8
|
+
<el-tab-pane label="Breadcrumb" name="breadcrumb"><ThemeBreadcrumb /></el-tab-pane>
|
|
9
|
+
<el-tab-pane label="Button" name="button"><ThemeButtons /></el-tab-pane>
|
|
10
|
+
<el-tab-pane label="Cascader" name="cascader"><ThemeCascader /></el-tab-pane>
|
|
11
|
+
<el-tab-pane label="Checkbox" name="checkbox"><ThemeCheckbox /></el-tab-pane>
|
|
12
|
+
<el-tab-pane label="Collapse" name="collapse"><ThemeCollapse /></el-tab-pane>
|
|
13
|
+
<el-tab-pane label="Dialog" name="dialog"><ThemeDialog /></el-tab-pane>
|
|
14
|
+
<el-tab-pane label="Form" name="form"><ThemeForm /></el-tab-pane>
|
|
15
|
+
<el-tab-pane label="Information" name="information"><ThemeInformation /></el-tab-pane>
|
|
16
|
+
<el-tab-pane label="Input" name="input"><ThemeInputs /></el-tab-pane>
|
|
17
|
+
<el-tab-pane label="Link" name="link"><ThemeLink /></el-tab-pane>
|
|
18
|
+
<el-tab-pane label="Logo" name="logo"><ThemeLogo /></el-tab-pane>
|
|
19
|
+
<el-tab-pane label="Message" name="message"><ThemeMessage /></el-tab-pane>
|
|
20
|
+
<el-tab-pane label="MessageBox" name="message-box"><ThemeMessageBox /></el-tab-pane>
|
|
21
|
+
<el-tab-pane label="Number" name="number"><ThemeInputNumbers /></el-tab-pane>
|
|
22
|
+
<el-tab-pane label="Popover & Dropdown" name="popover-dropdown"><ThemePopover /></el-tab-pane>
|
|
23
|
+
<el-tab-pane label="Radio" name="radio"><ThemeRadio /></el-tab-pane>
|
|
24
|
+
<el-tab-pane label="Select" name="select"><ThemeSelect /></el-tab-pane>
|
|
25
|
+
<el-tab-pane label="Sidebar" name="sidebar"><ThemeSidebar /></el-tab-pane>
|
|
26
|
+
<el-tab-pane label="Switch" name="switch"><ThemeToggle /></el-tab-pane>
|
|
27
|
+
<el-tab-pane label="Table" name="table"><ThemeTable /></el-tab-pane>
|
|
28
|
+
<el-tab-pane label="Tag" name="tag"><ThemeTag /></el-tab-pane>
|
|
29
|
+
<el-tab-pane label="Tooltip" name="tooltip"><ThemeTooltip /></el-tab-pane>
|
|
30
|
+
<el-tab-pane label="Typo" name="typo"><ThemeTypo /></el-tab-pane>
|
|
31
|
+
<el-tab-pane label="Upload" name="upload"><ThemeUpload /></el-tab-pane>
|
|
31
32
|
</el-tabs>
|
|
32
33
|
</div>
|
|
33
34
|
</template>
|
|
34
|
-
<script>
|
|
35
|
-
import { defineComponent } from 'vue';
|
|
36
35
|
|
|
36
|
+
<script>import { defineComponent } from 'vue';
|
|
37
37
|
import ThemeInputNumbers from './ThemeInputNumbers.vue';
|
|
38
38
|
import ThemeInputs from './ThemeInputs.vue';
|
|
39
39
|
import ThemePopover from './ThemePopover.vue';
|
|
40
|
-
|
|
41
40
|
export default defineComponent({
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
41
|
+
components: { ThemeInputs, ThemeInputNumbers, ThemePopover },
|
|
42
|
+
data() {
|
|
43
|
+
return {
|
|
44
|
+
activeName: 'alert',
|
|
45
|
+
};
|
|
46
|
+
},
|
|
47
|
+
methods: {
|
|
48
|
+
handleClick(tab) {
|
|
49
|
+
console.log(tab);
|
|
50
|
+
},
|
|
51
51
|
},
|
|
52
|
-
},
|
|
53
52
|
});
|
|
54
53
|
</script>
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="pt-8 pb-16 flex gap-12 flex-col">
|
|
3
|
+
<section>
|
|
4
|
+
<h1>AlertBox</h1>
|
|
5
|
+
<div class="p-md-c my-6">
|
|
6
|
+
Uyarı bileşenleri, sayfada otomatik olarak kaybolmayan non-overlay mesajlarını görüntülemek için kullanılır. <br />
|
|
7
|
+
Item type çeşitleri: <b>"success | warning | info | error"</b>
|
|
8
|
+
</div>
|
|
9
|
+
<div class="flex flex-col gap-3">
|
|
10
|
+
<timus-alert-box v-for="(item, key) in colors" :key="key" :type="item" class="items-center max-w-4xl" size="normal">
|
|
11
|
+
Scanning is in progress and may take a while. You don’t need to stay on this page - feel free to return later.
|
|
12
|
+
</timus-alert-box>
|
|
13
|
+
</div>
|
|
14
|
+
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
15
|
+
<p class="text-xs">
|
|
16
|
+
<code>
|
|
17
|
+
<pre>
|
|
18
|
+
<timus-alert-box type="info" size="normal">
|
|
19
|
+
Scanning is in progress and may take a while. You don’t need to stay on this page - feel free to return later.
|
|
20
|
+
</timus-alert-box>
|
|
21
|
+
</pre>
|
|
22
|
+
</code>
|
|
23
|
+
</p>
|
|
24
|
+
</div>
|
|
25
|
+
</section>
|
|
26
|
+
</div>
|
|
27
|
+
</template>
|
|
28
|
+
<script>
|
|
29
|
+
import { defineComponent } from 'vue';
|
|
30
|
+
|
|
31
|
+
import TimusAlertBox from './TimusAlertBox.vue';
|
|
32
|
+
|
|
33
|
+
export default defineComponent({
|
|
34
|
+
name: 'ThemeTable',
|
|
35
|
+
components: { TimusAlertBox },
|
|
36
|
+
data() {
|
|
37
|
+
return {
|
|
38
|
+
colors: ['warning', 'danger', 'info', 'success', 'error'],
|
|
39
|
+
};
|
|
40
|
+
},
|
|
41
|
+
computed: {
|
|
42
|
+
gridSize() {
|
|
43
|
+
const grids = {
|
|
44
|
+
5: 'grid-cols-5',
|
|
45
|
+
6: 'grid-cols-6',
|
|
46
|
+
7: 'grid-cols-7',
|
|
47
|
+
8: 'grid-cols-8',
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
return grids;
|
|
51
|
+
},
|
|
52
|
+
},
|
|
53
|
+
methods: {
|
|
54
|
+
toggleSelection(rows) {
|
|
55
|
+
if (rows) {
|
|
56
|
+
rows.forEach((row) => {
|
|
57
|
+
this.$refs.multipleTable.toggleRowSelection(row);
|
|
58
|
+
});
|
|
59
|
+
} else {
|
|
60
|
+
this.$refs.multipleTable.clearSelection();
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
handleSelectionChange(val) {
|
|
64
|
+
this.multipleSelection = val;
|
|
65
|
+
},
|
|
66
|
+
resetDateFilter() {
|
|
67
|
+
this.$refs.filterTable.clearFilter('date');
|
|
68
|
+
},
|
|
69
|
+
clearFilter() {
|
|
70
|
+
this.$refs.filterTable.clearFilter();
|
|
71
|
+
},
|
|
72
|
+
formatter(row, column) {
|
|
73
|
+
return row.address;
|
|
74
|
+
},
|
|
75
|
+
filterTag(value, row) {
|
|
76
|
+
return row.tag === value;
|
|
77
|
+
},
|
|
78
|
+
filterHandler(value, row, column) {
|
|
79
|
+
console.log(row, column, value);
|
|
80
|
+
const { property } = column;
|
|
81
|
+
|
|
82
|
+
return row[property] === value;
|
|
83
|
+
},
|
|
84
|
+
handleSizeChange(val) {
|
|
85
|
+
console.log(`${val} items per page`);
|
|
86
|
+
},
|
|
87
|
+
handleCurrentChange(val) {
|
|
88
|
+
console.log(`current page: ${val}`);
|
|
89
|
+
},
|
|
90
|
+
},
|
|
91
|
+
});
|
|
92
|
+
</script>
|
|
@@ -54,16 +54,24 @@
|
|
|
54
54
|
|
|
55
55
|
<section>
|
|
56
56
|
<h2>Popover with Table</h2>
|
|
57
|
-
<
|
|
58
|
-
Displays tables with popover content.
|
|
59
|
-
|
|
57
|
+
<div class="p-md-c my-6">
|
|
58
|
+
Displays tables with popover content.
|
|
59
|
+
<ul class="list-disc list-inside">
|
|
60
|
+
<li>Add class to <b><el table class="popover-table" /></b></li>
|
|
61
|
+
<li>If you need a description add class to <b><div class="popover-description">sdd sdsds</div></b></li>
|
|
62
|
+
<li>
|
|
63
|
+
You can use custom <b>TimusAlertBox</b> component if you need a <timus-alert-box />. You can find documentation in tabs for more
|
|
64
|
+
info.
|
|
65
|
+
</li>
|
|
66
|
+
</ul>
|
|
67
|
+
</div>
|
|
60
68
|
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
61
69
|
<el-popover placement="right" width="400" trigger="click">
|
|
62
70
|
<el-alert title="error alert" type="error" show-icon />
|
|
63
71
|
<el-table :data="gridData" class="popover-table">
|
|
64
|
-
<el-table-column
|
|
65
|
-
<el-table-column
|
|
66
|
-
<el-table-column
|
|
72
|
+
<el-table-column property="date" label="date" />
|
|
73
|
+
<el-table-column property="name" label="name" />
|
|
74
|
+
<el-table-column property="address" label="address" />
|
|
67
75
|
</el-table>
|
|
68
76
|
<div class="popover-description">sdd sdsds</div>
|
|
69
77
|
<div class="popover-footer">
|
|
@@ -75,17 +83,27 @@
|
|
|
75
83
|
</template>
|
|
76
84
|
</el-popover>
|
|
77
85
|
</div>
|
|
78
|
-
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
79
|
-
<
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
86
|
+
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100 text-xs">
|
|
87
|
+
<pre>
|
|
88
|
+
<code>
|
|
89
|
+
<el-popover placement="right" width="400" trigger="click">
|
|
90
|
+
<el-alert title="error alert" type="error" show-icon />
|
|
91
|
+
<el-table :data="gridData" class="popover-table">
|
|
92
|
+
<el-table-column property="date" label="date" />
|
|
93
|
+
<el-table-column property="name" label="name" />
|
|
94
|
+
<el-table-column property="address" label="address" />
|
|
95
|
+
</el-table>
|
|
96
|
+
<div class="popover-description">sdd sdsds</div>
|
|
97
|
+
<div class="popover-footer">
|
|
98
|
+
<el-button>Cancel</el-button>
|
|
99
|
+
<el-button>Save</el-button>
|
|
100
|
+
</div>
|
|
101
|
+
<template #reference>
|
|
102
|
+
<el-button type="primary" size="small">Click to activate</el-button>
|
|
103
|
+
</template>
|
|
104
|
+
</el-popover>
|
|
105
|
+
</code>
|
|
106
|
+
</pre>
|
|
89
107
|
</div>
|
|
90
108
|
|
|
91
109
|
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div id="wrapper" :class="`flex flex-row border rounded-lg items-start ${size_class.wrapper} ${wrapper_css_class}`">
|
|
3
|
+
<div id="icon-wrapper" :class="`flex self-start ${size_class.icon_wrapper}`">
|
|
4
|
+
<div id="icon" :class="`flex items-center justify-center rounded-full text-white ${size_class.icon} ${icon_class}`" />
|
|
5
|
+
</div>
|
|
6
|
+
|
|
7
|
+
<div :class="`flex flex-col justify-center ml-3 gap-2 ${size_class.slot} ${text_class}`">
|
|
8
|
+
<slot />
|
|
9
|
+
</div>
|
|
10
|
+
</div>
|
|
11
|
+
</template>
|
|
12
|
+
|
|
13
|
+
<script lang="ts">
|
|
14
|
+
/**
|
|
15
|
+
* Alert box display boxes with type parameter
|
|
16
|
+
*
|
|
17
|
+
* types: info, warning, success, error
|
|
18
|
+
*/
|
|
19
|
+
|
|
20
|
+
import Vue from 'vue';
|
|
21
|
+
|
|
22
|
+
interface SizeClass {
|
|
23
|
+
wrapper: string;
|
|
24
|
+
icon_wrapper: string;
|
|
25
|
+
icon: string;
|
|
26
|
+
slot: string;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
export default Vue.extend({
|
|
30
|
+
props: {
|
|
31
|
+
type: {
|
|
32
|
+
type: String,
|
|
33
|
+
default(): string {
|
|
34
|
+
return 'info';
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
size: {
|
|
38
|
+
type: String,
|
|
39
|
+
default(): string {
|
|
40
|
+
return 'normal';
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
},
|
|
44
|
+
computed: {
|
|
45
|
+
wrapper_css_class(): string {
|
|
46
|
+
const classes: Record<string, string> = {
|
|
47
|
+
info: 'bg-info-100 border-info-500',
|
|
48
|
+
warning: 'bg-warning-100 border-warning-500',
|
|
49
|
+
success: 'bg-success-100 border-success-500',
|
|
50
|
+
error: 'bg-danger-100 border-danger-500',
|
|
51
|
+
danger: 'bg-danger-100 border-danger-500',
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
return classes[this.type] || classes.info;
|
|
55
|
+
},
|
|
56
|
+
icon_class(): string {
|
|
57
|
+
const classes: Record<string, string> = {
|
|
58
|
+
success: 'isax-tick-circle bg-success-500',
|
|
59
|
+
warning: 'isax-danger bg-warning-500',
|
|
60
|
+
info: 'isax-info-circle bg-info-500',
|
|
61
|
+
error: 'isax-danger bg-danger-500',
|
|
62
|
+
danger: 'isax-danger bg-danger-500',
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
return classes[this.type] || classes.info;
|
|
66
|
+
},
|
|
67
|
+
text_class(): string {
|
|
68
|
+
const classes: Record<string, string> = {
|
|
69
|
+
info: 'text-info-500',
|
|
70
|
+
warning: 'text-warning-500',
|
|
71
|
+
success: 'text-success-500',
|
|
72
|
+
error: 'text-danger-500',
|
|
73
|
+
danger: 'text-danger-500',
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
return classes[this.type] || classes.info;
|
|
77
|
+
},
|
|
78
|
+
size_class(): SizeClass {
|
|
79
|
+
const sizes: Record<string, SizeClass> = {
|
|
80
|
+
normal: {
|
|
81
|
+
wrapper: 'p-3 my-3 p-md',
|
|
82
|
+
icon_wrapper: 'w-8',
|
|
83
|
+
icon: '!w-8 !h-8',
|
|
84
|
+
slot: 'p-md ml-3',
|
|
85
|
+
},
|
|
86
|
+
small: {
|
|
87
|
+
wrapper: 'p-2 my-2 p-xs',
|
|
88
|
+
icon_wrapper: 'w-6',
|
|
89
|
+
icon: '!w-6 !h-6',
|
|
90
|
+
slot: 'p-xs ml-2',
|
|
91
|
+
},
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
return sizes[this.size];
|
|
95
|
+
},
|
|
96
|
+
},
|
|
97
|
+
});
|
|
98
|
+
</script>
|