@timus-networks/theme 1.0.186 → 1.0.188
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 +87 -0
- 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 +32 -32
- package/components-ts/ThemeAlertBox.vue +87 -0
- 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,87 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="pt-8 pb-16 flex gap-12 flex-col">
|
|
3
|
+
<section>
|
|
4
|
+
<h1>AlertBox</h1>
|
|
5
|
+
<p class="p-lg-c my-6">Uyarı bileşenleri, sayfada otomatik olarak kaybolmayan non-overlay mesajlarını görüntülemek için kullanılır.</p>
|
|
6
|
+
<div class="flex flex-col gap-3">
|
|
7
|
+
<timus-alert-box v-for="(item, key) in colors" :key="key" :title="`${item}`" :type="item" class="items-center max-w-4xl" size="normal">
|
|
8
|
+
Scanning is in progress and may take a while. You don’t need to stay on this page - feel free to return later.
|
|
9
|
+
</timus-alert-box>
|
|
10
|
+
</div>
|
|
11
|
+
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
12
|
+
<p class="text-xs">
|
|
13
|
+
<code>
|
|
14
|
+
<timus-alert-box v-for="(item, key) in colors" :key="key" :title="`${item}`"
|
|
15
|
+
:type="item" class="items-center max-w-4xl" size="small"> Scanning is in progress and may take a while.
|
|
16
|
+
You don’t need to stay on this page - feel free to return later. </timus-alert-box>
|
|
17
|
+
</code>
|
|
18
|
+
</p>
|
|
19
|
+
</div>
|
|
20
|
+
</section>
|
|
21
|
+
</div>
|
|
22
|
+
</template>
|
|
23
|
+
<script>
|
|
24
|
+
import { defineComponent } from 'vue';
|
|
25
|
+
|
|
26
|
+
import TimusAlertBox from './TimusAlertBox.vue';
|
|
27
|
+
|
|
28
|
+
export default defineComponent({
|
|
29
|
+
name: 'ThemeTable',
|
|
30
|
+
components: { TimusAlertBox },
|
|
31
|
+
data() {
|
|
32
|
+
return {
|
|
33
|
+
colors: ['warning', 'danger', 'info', 'success', 'error'],
|
|
34
|
+
};
|
|
35
|
+
},
|
|
36
|
+
computed: {
|
|
37
|
+
gridSize() {
|
|
38
|
+
const grids = {
|
|
39
|
+
5: 'grid-cols-5',
|
|
40
|
+
6: 'grid-cols-6',
|
|
41
|
+
7: 'grid-cols-7',
|
|
42
|
+
8: 'grid-cols-8',
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
return grids;
|
|
46
|
+
},
|
|
47
|
+
},
|
|
48
|
+
methods: {
|
|
49
|
+
toggleSelection(rows) {
|
|
50
|
+
if (rows) {
|
|
51
|
+
rows.forEach((row) => {
|
|
52
|
+
this.$refs.multipleTable.toggleRowSelection(row);
|
|
53
|
+
});
|
|
54
|
+
} else {
|
|
55
|
+
this.$refs.multipleTable.clearSelection();
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
handleSelectionChange(val) {
|
|
59
|
+
this.multipleSelection = val;
|
|
60
|
+
},
|
|
61
|
+
resetDateFilter() {
|
|
62
|
+
this.$refs.filterTable.clearFilter('date');
|
|
63
|
+
},
|
|
64
|
+
clearFilter() {
|
|
65
|
+
this.$refs.filterTable.clearFilter();
|
|
66
|
+
},
|
|
67
|
+
formatter(row, column) {
|
|
68
|
+
return row.address;
|
|
69
|
+
},
|
|
70
|
+
filterTag(value, row) {
|
|
71
|
+
return row.tag === value;
|
|
72
|
+
},
|
|
73
|
+
filterHandler(value, row, column) {
|
|
74
|
+
console.log(row, column, value);
|
|
75
|
+
const { property } = column;
|
|
76
|
+
|
|
77
|
+
return row[property] === value;
|
|
78
|
+
},
|
|
79
|
+
handleSizeChange(val) {
|
|
80
|
+
console.log(`${val} items per page`);
|
|
81
|
+
},
|
|
82
|
+
handleCurrentChange(val) {
|
|
83
|
+
console.log(`current page: ${val}`);
|
|
84
|
+
},
|
|
85
|
+
},
|
|
86
|
+
});
|
|
87
|
+
</script>
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div id="wrapper" :class="`flex flex-row border rounded-lg ${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-error-100 border-error-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-error-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-error-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,53 +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>
|
|
35
|
+
|
|
34
36
|
<script>
|
|
35
37
|
import { defineComponent } from 'vue';
|
|
36
|
-
|
|
37
38
|
import ThemeInputNumbers from './ThemeInputNumbers.vue';
|
|
38
39
|
import ThemeInputs from './ThemeInputs.vue';
|
|
39
40
|
import ThemePopover from './ThemePopover.vue';
|
|
40
|
-
|
|
41
41
|
export default defineComponent({
|
|
42
42
|
components: { ThemeInputs, ThemeInputNumbers, ThemePopover },
|
|
43
43
|
data() {
|
|
44
44
|
return {
|
|
45
|
-
activeName: '
|
|
45
|
+
activeName: 'alert',
|
|
46
46
|
};
|
|
47
47
|
},
|
|
48
48
|
methods: {
|
|
49
|
-
handleClick(tab
|
|
50
|
-
console.log(tab
|
|
49
|
+
handleClick(tab) {
|
|
50
|
+
console.log(tab);
|
|
51
51
|
},
|
|
52
52
|
},
|
|
53
53
|
});
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="pt-8 pb-16 flex gap-12 flex-col">
|
|
3
|
+
<section>
|
|
4
|
+
<h1>AlertBox</h1>
|
|
5
|
+
<p class="p-lg-c my-6">Uyarı bileşenleri, sayfada otomatik olarak kaybolmayan non-overlay mesajlarını görüntülemek için kullanılır.</p>
|
|
6
|
+
<div class="flex flex-col gap-3">
|
|
7
|
+
<timus-alert-box v-for="(item, key) in colors" :key="key" :title="`${item}`" :type="item" class="items-center max-w-4xl" size="normal">
|
|
8
|
+
Scanning is in progress and may take a while. You don’t need to stay on this page - feel free to return later.
|
|
9
|
+
</timus-alert-box>
|
|
10
|
+
</div>
|
|
11
|
+
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
12
|
+
<p class="text-xs">
|
|
13
|
+
<code>
|
|
14
|
+
<timus-alert-box v-for="(item, key) in colors" :key="key" :title="`${item}`"
|
|
15
|
+
:type="item" class="items-center max-w-4xl" size="small"> Scanning is in progress and may take a while.
|
|
16
|
+
You don’t need to stay on this page - feel free to return later. </timus-alert-box>
|
|
17
|
+
</code>
|
|
18
|
+
</p>
|
|
19
|
+
</div>
|
|
20
|
+
</section>
|
|
21
|
+
</div>
|
|
22
|
+
</template>
|
|
23
|
+
<script>
|
|
24
|
+
import { defineComponent } from 'vue';
|
|
25
|
+
|
|
26
|
+
import TimusAlertBox from './TimusAlertBox.vue';
|
|
27
|
+
|
|
28
|
+
export default defineComponent({
|
|
29
|
+
name: 'ThemeTable',
|
|
30
|
+
components: { TimusAlertBox },
|
|
31
|
+
data() {
|
|
32
|
+
return {
|
|
33
|
+
colors: ['warning', 'danger', 'info', 'success', 'error'],
|
|
34
|
+
};
|
|
35
|
+
},
|
|
36
|
+
computed: {
|
|
37
|
+
gridSize() {
|
|
38
|
+
const grids = {
|
|
39
|
+
5: 'grid-cols-5',
|
|
40
|
+
6: 'grid-cols-6',
|
|
41
|
+
7: 'grid-cols-7',
|
|
42
|
+
8: 'grid-cols-8',
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
return grids;
|
|
46
|
+
},
|
|
47
|
+
},
|
|
48
|
+
methods: {
|
|
49
|
+
toggleSelection(rows) {
|
|
50
|
+
if (rows) {
|
|
51
|
+
rows.forEach((row) => {
|
|
52
|
+
this.$refs.multipleTable.toggleRowSelection(row);
|
|
53
|
+
});
|
|
54
|
+
} else {
|
|
55
|
+
this.$refs.multipleTable.clearSelection();
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
handleSelectionChange(val) {
|
|
59
|
+
this.multipleSelection = val;
|
|
60
|
+
},
|
|
61
|
+
resetDateFilter() {
|
|
62
|
+
this.$refs.filterTable.clearFilter('date');
|
|
63
|
+
},
|
|
64
|
+
clearFilter() {
|
|
65
|
+
this.$refs.filterTable.clearFilter();
|
|
66
|
+
},
|
|
67
|
+
formatter(row, column) {
|
|
68
|
+
return row.address;
|
|
69
|
+
},
|
|
70
|
+
filterTag(value, row) {
|
|
71
|
+
return row.tag === value;
|
|
72
|
+
},
|
|
73
|
+
filterHandler(value, row, column) {
|
|
74
|
+
console.log(row, column, value);
|
|
75
|
+
const { property } = column;
|
|
76
|
+
|
|
77
|
+
return row[property] === value;
|
|
78
|
+
},
|
|
79
|
+
handleSizeChange(val) {
|
|
80
|
+
console.log(`${val} items per page`);
|
|
81
|
+
},
|
|
82
|
+
handleCurrentChange(val) {
|
|
83
|
+
console.log(`current page: ${val}`);
|
|
84
|
+
},
|
|
85
|
+
},
|
|
86
|
+
});
|
|
87
|
+
</script>
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div id="wrapper" :class="`flex flex-row border rounded-lg ${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-error-100 border-error-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-error-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-error-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>
|
|
@@ -1,37 +1,39 @@
|
|
|
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
|
-
|
|
35
|
+
|
|
36
|
+
<script lang="ts">
|
|
35
37
|
import { defineComponent } from 'vue';
|
|
36
38
|
|
|
37
39
|
import ThemeInputNumbers from './ThemeInputNumbers.vue';
|
|
@@ -42,12 +44,12 @@ export default defineComponent({
|
|
|
42
44
|
components: { ThemeInputs, ThemeInputNumbers, ThemePopover },
|
|
43
45
|
data() {
|
|
44
46
|
return {
|
|
45
|
-
activeName: '
|
|
47
|
+
activeName: 'alert',
|
|
46
48
|
};
|
|
47
49
|
},
|
|
48
50
|
methods: {
|
|
49
|
-
handleClick(tab
|
|
50
|
-
console.log(tab
|
|
51
|
+
handleClick(tab: string) {
|
|
52
|
+
console.log(tab);
|
|
51
53
|
},
|
|
52
54
|
},
|
|
53
55
|
});
|
package/index.d.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
export * from './components-js/utils';
|
|
2
|
+
export * from './components-js/TimusSamples';
|
|
3
|
+
export * from './components-js/TimusAlertBox';
|
|
2
4
|
export * from './components-js/ThemeSidebar';
|
|
3
5
|
export * from './components-js/ThemeRadio';
|
|
4
6
|
export * from './components-js/ThemePopover';
|