@timus-networks/theme 1.0.188 → 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 +10 -5
- package/components-js/ThemePopover.vue +35 -17
- package/components-js/TimusAlertBox.d.ts +1 -1
- package/components-js/TimusAlertBox.vue +5 -5
- package/components-js/TimusSamples.vue +11 -12
- package/components-ts/ThemeAlertBox.vue +10 -5
- package/components-ts/ThemePopover.vue +35 -17
- package/components-ts/TimusAlertBox.vue +5 -5
- package/output/main.css +1 -1
- package/package.json +1 -1
|
@@ -2,18 +2,23 @@
|
|
|
2
2
|
<div class="pt-8 pb-16 flex gap-12 flex-col">
|
|
3
3
|
<section>
|
|
4
4
|
<h1>AlertBox</h1>
|
|
5
|
-
<
|
|
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>
|
|
6
9
|
<div class="flex flex-col gap-3">
|
|
7
|
-
<timus-alert-box v-for="(item, key) in colors" :key="key" :
|
|
10
|
+
<timus-alert-box v-for="(item, key) in colors" :key="key" :type="item" class="items-center max-w-4xl" size="normal">
|
|
8
11
|
Scanning is in progress and may take a while. You don’t need to stay on this page - feel free to return later.
|
|
9
12
|
</timus-alert-box>
|
|
10
13
|
</div>
|
|
11
14
|
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
12
15
|
<p class="text-xs">
|
|
13
16
|
<code>
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
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>
|
|
17
22
|
</code>
|
|
18
23
|
</p>
|
|
19
24
|
</div>
|
|
@@ -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">
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div id="wrapper" :class="`flex flex-row border rounded-lg
|
|
2
|
+
<div id="wrapper" :class="`flex flex-row border rounded-lg items-start ${size_class.wrapper} ${wrapper_css_class}`">
|
|
3
3
|
<div id="icon-wrapper" :class="`flex self-start ${size_class.icon_wrapper}`">
|
|
4
4
|
<div id="icon" :class="`flex items-center justify-center rounded-full text-white ${size_class.icon} ${icon_class}`" />
|
|
5
5
|
</div>
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
<script>/**
|
|
14
14
|
* Alert box display boxes with type parameter
|
|
15
15
|
*
|
|
16
|
-
*
|
|
16
|
+
* types: info, warning, success, error
|
|
17
17
|
*/
|
|
18
18
|
import Vue from 'vue';
|
|
19
19
|
export default Vue.extend({
|
|
@@ -37,7 +37,7 @@ export default Vue.extend({
|
|
|
37
37
|
info: 'bg-info-100 border-info-500',
|
|
38
38
|
warning: 'bg-warning-100 border-warning-500',
|
|
39
39
|
success: 'bg-success-100 border-success-500',
|
|
40
|
-
error: 'bg-
|
|
40
|
+
error: 'bg-danger-100 border-danger-500',
|
|
41
41
|
danger: 'bg-danger-100 border-danger-500',
|
|
42
42
|
};
|
|
43
43
|
return classes[this.type] || classes.info;
|
|
@@ -47,7 +47,7 @@ export default Vue.extend({
|
|
|
47
47
|
success: 'isax-tick-circle bg-success-500',
|
|
48
48
|
warning: 'isax-danger bg-warning-500',
|
|
49
49
|
info: 'isax-info-circle bg-info-500',
|
|
50
|
-
error: 'isax-danger bg-
|
|
50
|
+
error: 'isax-danger bg-danger-500',
|
|
51
51
|
danger: 'isax-danger bg-danger-500',
|
|
52
52
|
};
|
|
53
53
|
return classes[this.type] || classes.info;
|
|
@@ -57,7 +57,7 @@ export default Vue.extend({
|
|
|
57
57
|
info: 'text-info-500',
|
|
58
58
|
warning: 'text-warning-500',
|
|
59
59
|
success: 'text-success-500',
|
|
60
|
-
error: 'text-
|
|
60
|
+
error: 'text-danger-500',
|
|
61
61
|
danger: 'text-danger-500',
|
|
62
62
|
};
|
|
63
63
|
return classes[this.type] || classes.info;
|
|
@@ -33,22 +33,21 @@
|
|
|
33
33
|
</div>
|
|
34
34
|
</template>
|
|
35
35
|
|
|
36
|
-
<script>
|
|
37
|
-
import { defineComponent } from 'vue';
|
|
36
|
+
<script>import { defineComponent } from 'vue';
|
|
38
37
|
import ThemeInputNumbers from './ThemeInputNumbers.vue';
|
|
39
38
|
import ThemeInputs from './ThemeInputs.vue';
|
|
40
39
|
import ThemePopover from './ThemePopover.vue';
|
|
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>
|
|
@@ -2,18 +2,23 @@
|
|
|
2
2
|
<div class="pt-8 pb-16 flex gap-12 flex-col">
|
|
3
3
|
<section>
|
|
4
4
|
<h1>AlertBox</h1>
|
|
5
|
-
<
|
|
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>
|
|
6
9
|
<div class="flex flex-col gap-3">
|
|
7
|
-
<timus-alert-box v-for="(item, key) in colors" :key="key" :
|
|
10
|
+
<timus-alert-box v-for="(item, key) in colors" :key="key" :type="item" class="items-center max-w-4xl" size="normal">
|
|
8
11
|
Scanning is in progress and may take a while. You don’t need to stay on this page - feel free to return later.
|
|
9
12
|
</timus-alert-box>
|
|
10
13
|
</div>
|
|
11
14
|
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
12
15
|
<p class="text-xs">
|
|
13
16
|
<code>
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
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>
|
|
17
22
|
</code>
|
|
18
23
|
</p>
|
|
19
24
|
</div>
|
|
@@ -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">
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div id="wrapper" :class="`flex flex-row border rounded-lg
|
|
2
|
+
<div id="wrapper" :class="`flex flex-row border rounded-lg items-start ${size_class.wrapper} ${wrapper_css_class}`">
|
|
3
3
|
<div id="icon-wrapper" :class="`flex self-start ${size_class.icon_wrapper}`">
|
|
4
4
|
<div id="icon" :class="`flex items-center justify-center rounded-full text-white ${size_class.icon} ${icon_class}`" />
|
|
5
5
|
</div>
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
/**
|
|
15
15
|
* Alert box display boxes with type parameter
|
|
16
16
|
*
|
|
17
|
-
*
|
|
17
|
+
* types: info, warning, success, error
|
|
18
18
|
*/
|
|
19
19
|
|
|
20
20
|
import Vue from 'vue';
|
|
@@ -47,7 +47,7 @@ export default Vue.extend({
|
|
|
47
47
|
info: 'bg-info-100 border-info-500',
|
|
48
48
|
warning: 'bg-warning-100 border-warning-500',
|
|
49
49
|
success: 'bg-success-100 border-success-500',
|
|
50
|
-
error: 'bg-
|
|
50
|
+
error: 'bg-danger-100 border-danger-500',
|
|
51
51
|
danger: 'bg-danger-100 border-danger-500',
|
|
52
52
|
};
|
|
53
53
|
|
|
@@ -58,7 +58,7 @@ export default Vue.extend({
|
|
|
58
58
|
success: 'isax-tick-circle bg-success-500',
|
|
59
59
|
warning: 'isax-danger bg-warning-500',
|
|
60
60
|
info: 'isax-info-circle bg-info-500',
|
|
61
|
-
error: 'isax-danger bg-
|
|
61
|
+
error: 'isax-danger bg-danger-500',
|
|
62
62
|
danger: 'isax-danger bg-danger-500',
|
|
63
63
|
};
|
|
64
64
|
|
|
@@ -69,7 +69,7 @@ export default Vue.extend({
|
|
|
69
69
|
info: 'text-info-500',
|
|
70
70
|
warning: 'text-warning-500',
|
|
71
71
|
success: 'text-success-500',
|
|
72
|
-
error: 'text-
|
|
72
|
+
error: 'text-danger-500',
|
|
73
73
|
danger: 'text-danger-500',
|
|
74
74
|
};
|
|
75
75
|
|