@timus-networks/theme 1.0.133 → 1.0.136
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/ThemeAvatar.vue +5 -5
- package/components-js/ThemeBadge.vue +8 -9
- package/components-js/ThemeSidebar.d.ts +2 -0
- package/components-js/ThemeSidebar.vue +36 -41
- package/components-js/ThemeUpload.vue +19 -0
- package/components-ts/ThemeAvatar.vue +5 -5
- package/components-ts/ThemeBadge.vue +8 -9
- package/components-ts/ThemeSidebar.vue +32 -35
- package/components-ts/ThemeUpload.vue +19 -0
- package/index.d.ts +1 -0
- package/output/main.css +1 -1
- package/package.json +1 -1
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
<p class="p-md-c my-6">
|
|
6
6
|
Avatarlar, resimler, ikonlar veya alfanumerik karakterleri destekler. Avatar'ın şeklini ve boyutunu ayarlamak için `shape` ve `size`
|
|
7
7
|
özelliklerini kullanabilirsiniz. Ayrıca avatarın resim kaynağını belirlemek için `src` özelliğini kullanabilirsiniz. Şekil tipleri
|
|
8
|
-
<b>'circle | square'</b> şeklindedir. Boyutlar ise <b>'
|
|
9
|
-
|
|
8
|
+
<b>'circle | square'</b> şeklindedir. Boyutlar ise <b>'large', 'medium', 'small'</b> şeklindedir. Veya boyutu manuel olarak `size` özelliğini
|
|
9
|
+
kullanarak belirleyebilirsiniz, örneğin <b>size='50'</b>.
|
|
10
10
|
</p>
|
|
11
11
|
<div class="grid grid-flow-col auto-cols-max gap-4 items-center">
|
|
12
12
|
<el-avatar :size="50">SK</el-avatar>
|
|
13
|
-
<el-avatar v-for="size in sizeList" :key="size + ''" :size="size">SK</el-avatar>
|
|
13
|
+
<el-avatar v-for="size in sizeList" :key="size + 'string'" :size="size">SK</el-avatar>
|
|
14
14
|
<el-divider direction="vertical" content-position="center" />
|
|
15
15
|
<el-avatar shape="square" :size="50" :src="url" />
|
|
16
16
|
<el-avatar v-for="size in sizeList" :key="size" shape="square" :size="size" :src="url" />
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
<p class="p-md-c my-6">You can use any 'string' expression within the tag, in addition to a type that accepts 'src' or 'icon' as a property.</p>
|
|
28
28
|
<div class="grid grid-flow-col auto-cols-max gap-4 items-center">
|
|
29
29
|
<el-avatar icon="isax-add-circle" />
|
|
30
|
-
<el-avatar icon="isax-add-circle" size="
|
|
30
|
+
<el-avatar icon="isax-add-circle" size="large" />
|
|
31
31
|
<el-avatar :src="url" />
|
|
32
32
|
<el-avatar>SK</el-avatar>
|
|
33
33
|
</div>
|
|
@@ -48,7 +48,7 @@ export default Vue.extend({
|
|
|
48
48
|
data() {
|
|
49
49
|
return {
|
|
50
50
|
url: 'https://api.dicebear.com/7.x/adventurer-neutral/svg?seed=Princess',
|
|
51
|
-
sizeList: ['
|
|
51
|
+
sizeList: ['large', 'medium', 'small'],
|
|
52
52
|
};
|
|
53
53
|
},
|
|
54
54
|
});
|
|
@@ -8,11 +8,11 @@
|
|
|
8
8
|
</p>
|
|
9
9
|
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
10
10
|
<el-badge :value="12"> <el-button size="small">Yorumlar</el-button> </el-badge>
|
|
11
|
-
<el-badge
|
|
11
|
+
<el-badge v-for="(item, key) in colors" :key="key" :value="randomNumber()" :type="item">
|
|
12
12
|
<el-button size="small" :class="randomButtonType()" :type="randomColor()">{{ item }}</el-button>
|
|
13
13
|
</el-badge>
|
|
14
14
|
<el-dropdown trigger="click">
|
|
15
|
-
<span class="el-dropdown-link"> Beni Tıkla<i class="el-icon-caret-bottom el-icon--right"
|
|
15
|
+
<span class="el-dropdown-link"> Beni Tıkla<i class="el-icon-caret-bottom el-icon--right" /> </span>
|
|
16
16
|
<el-dropdown-menu slot="dropdown">
|
|
17
17
|
<el-dropdown-item class="clearfix">
|
|
18
18
|
Yorumlar
|
|
@@ -38,10 +38,10 @@
|
|
|
38
38
|
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
39
39
|
<el-badge is-dot class="item">query</el-badge>
|
|
40
40
|
<el-badge is-dot class="item">
|
|
41
|
-
<el-button class="share-button" icon="el-icon-share"
|
|
41
|
+
<el-button class="share-button" icon="el-icon-share" />
|
|
42
42
|
</el-badge>
|
|
43
|
-
<el-badge
|
|
44
|
-
<el-badge
|
|
43
|
+
<el-badge v-for="size in sizeList" :key="size + 'avatar'" is-dot class="item"><el-avatar :size="size">SK</el-avatar></el-badge>
|
|
44
|
+
<el-badge v-for="size in sizeList" :key="size + 'shape'" is-dot class="item"><el-avatar shape="square" :size="size">SK</el-avatar></el-badge>
|
|
45
45
|
</div>
|
|
46
46
|
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
47
47
|
<p class="text-xs">
|
|
@@ -80,16 +80,14 @@ export default Vue.extend({
|
|
|
80
80
|
name: 'TimusCascader',
|
|
81
81
|
data() {
|
|
82
82
|
return {
|
|
83
|
-
colors: ['primary', '
|
|
84
|
-
sizeList: ['
|
|
83
|
+
colors: ['primary', 'info', 'success', 'warning', 'danger'],
|
|
84
|
+
sizeList: ['large', 'medium', 'small'],
|
|
85
85
|
};
|
|
86
86
|
},
|
|
87
87
|
methods: {
|
|
88
88
|
handleChange(value) {
|
|
89
89
|
console.log(value);
|
|
90
90
|
},
|
|
91
|
-
},
|
|
92
|
-
methods: {
|
|
93
91
|
randomNumber() {
|
|
94
92
|
return Math.round(Math.random() * 1000);
|
|
95
93
|
},
|
|
@@ -98,6 +96,7 @@ export default Vue.extend({
|
|
|
98
96
|
},
|
|
99
97
|
randomButtonType() {
|
|
100
98
|
const type = ['outline'];
|
|
99
|
+
|
|
101
100
|
return type[Math.round(Math.random() * 2)];
|
|
102
101
|
},
|
|
103
102
|
},
|
|
@@ -5,16 +5,16 @@
|
|
|
5
5
|
<p class="p-md-c my-6">
|
|
6
6
|
Avatarlar, resimler, ikonlar veya alfanumerik karakterleri destekler. Avatar'ın şeklini ve boyutunu ayarlamak için `shape` ve `size`
|
|
7
7
|
özelliklerini kullanabilirsiniz. Ayrıca avatarın resim kaynağını belirlemek için `src` özelliğini kullanabilirsiniz. Şekil tipleri
|
|
8
|
-
<b>'circle | square'</b> şeklindedir. Boyutlar ise <b>'
|
|
9
|
-
|
|
8
|
+
<b>'circle | square'</b> şeklindedir. Boyutlar ise <b>''large', 'medium', 'small'</b> şeklindedir. Veya boyutu manuel olarak `size` özelliğini
|
|
9
|
+
kullanarak belirleyebilirsiniz, örneğin <b>size='50'</b>.
|
|
10
10
|
</p>
|
|
11
11
|
<div class="grid grid-flow-col auto-cols-max gap-4 items-center">
|
|
12
|
-
<div data-testid="components-sidebar-eitdurshvb"
|
|
13
|
-
<nuxt-link class="logo-small py-10" to="/"
|
|
12
|
+
<div id="sidebar" data-testid="components-sidebar-eitdurshvb" class="flex flex-col justify-center">
|
|
13
|
+
<nuxt-link :id="'header-logo-' + TP" class="logo-small py-10" to="/" data-testid="header-manager-logo" />
|
|
14
14
|
<el-menu
|
|
15
|
+
id="el-menu-primary"
|
|
15
16
|
class="mt-4"
|
|
16
17
|
data-testid="components-sidebar-afpbszwnwh"
|
|
17
|
-
id="el-menu-primary"
|
|
18
18
|
:default-active="activeMenuItem ? activeMenuItem.toString() : '1'"
|
|
19
19
|
:collapse="isCollapse"
|
|
20
20
|
>
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
content="Dashboard"
|
|
29
29
|
placement="right"
|
|
30
30
|
>
|
|
31
|
-
<i class="isax-grid-3"
|
|
31
|
+
<i class="isax-grid-3" />
|
|
32
32
|
</el-tooltip>
|
|
33
33
|
<span class="el-menu-text">Dashboard</span>
|
|
34
34
|
</nuxt-link>
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
<el-menu-item data-testid="components-sidebar-lhxzcthocp" index="2" data-index="2">
|
|
37
37
|
<nuxt-link class="el-menu-link" to="/users" data-testid="sidebar-users">
|
|
38
38
|
<el-tooltip data-testid="components-sidebar-gegdseotki" :disabled="true" class="item" effect="dark" content="Users" placement="right">
|
|
39
|
-
<i class="isax-profile-circle"
|
|
39
|
+
<i class="isax-profile-circle" />
|
|
40
40
|
</el-tooltip>
|
|
41
41
|
<span class="el-menu-text">User & Teams</span>
|
|
42
42
|
</nuxt-link>
|
|
@@ -51,33 +51,33 @@
|
|
|
51
51
|
content="Devices"
|
|
52
52
|
placement="right"
|
|
53
53
|
>
|
|
54
|
-
<i class="isax-monitor-mobbile"
|
|
54
|
+
<i class="isax-monitor-mobbile" />
|
|
55
55
|
</el-tooltip>
|
|
56
56
|
<span class="el-menu-text">Devices</span>
|
|
57
57
|
</nuxt-link>
|
|
58
58
|
</el-menu-item>
|
|
59
59
|
|
|
60
|
-
<el-menu-item
|
|
60
|
+
<el-menu-item v-if="TP === 'berqnet'" data-testid="components-sidebar-yzjnblrbvn" index="4" data-index="4">
|
|
61
61
|
<nuxt-link class="el-menu-link" to="/sites" data-testid="sidebar-sites">
|
|
62
62
|
<el-tooltip data-testid="components-sidebar-usdojbrni" :disabled="true" class="item" effect="dark" content="Sites" placement="right">
|
|
63
|
-
<i class="isax-driver-2"
|
|
63
|
+
<i class="isax-driver-2" />
|
|
64
64
|
</el-tooltip>
|
|
65
65
|
<span class="el-menu-text">Sites</span>
|
|
66
66
|
</nuxt-link>
|
|
67
67
|
</el-menu-item>
|
|
68
|
-
<el-menu-item data-testid="components-sidebar-wezwxkkphc"
|
|
68
|
+
<el-menu-item v-else data-testid="components-sidebar-wezwxkkphc" index="4" data-index="4">
|
|
69
69
|
<nuxt-link class="el-menu-link" to="/sites" data-testid="sidebar-sites">
|
|
70
70
|
<el-tooltip data-testid="components-sidebar-qjjhulhbpp" :disabled="true" class="item" effect="dark" content="Sites" placement="right">
|
|
71
|
-
<i class="isax-driver-2"
|
|
71
|
+
<i class="isax-driver-2" />
|
|
72
72
|
</el-tooltip>
|
|
73
73
|
<span class="el-menu-text">Sites</span>
|
|
74
74
|
</nuxt-link>
|
|
75
75
|
</el-menu-item>
|
|
76
76
|
|
|
77
77
|
<el-submenu data-testid="components-sidebar-tmdvrlndak" class="sub-menus" index="5" data-index="5">
|
|
78
|
-
<template
|
|
78
|
+
<template #title>
|
|
79
79
|
<el-tooltip :disabled="true" class="item" effect="dark" content="Insights" placement="right" data-testid="sidebar-rules">
|
|
80
|
-
<i class="isax-key-square"
|
|
80
|
+
<i class="isax-key-square" />
|
|
81
81
|
</el-tooltip>
|
|
82
82
|
<span class="el-menu-text">Rules</span>
|
|
83
83
|
</template>
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
</nuxt-link>
|
|
89
89
|
</el-menu-item>
|
|
90
90
|
|
|
91
|
-
<el-menu-item
|
|
91
|
+
<el-menu-item v-if="TP != 'timus'" data-testid="components-sidebar-jvruigbwdp" index="5-2" data-index="5-2">
|
|
92
92
|
<nuxt-link class="el-menu-link" to="/rules/routes" data-testid="sidebar-rules-routes">
|
|
93
93
|
<span class="el-menu-text">Routes</span>
|
|
94
94
|
</nuxt-link>
|
|
@@ -114,9 +114,9 @@
|
|
|
114
114
|
</el-submenu>
|
|
115
115
|
|
|
116
116
|
<el-submenu data-testid="components-sidebar-bnihbcpjuh" class="sub-menus" index="6" data-index="6">
|
|
117
|
-
<template
|
|
117
|
+
<template #title>
|
|
118
118
|
<el-tooltip :disabled="true" class="item" effect="dark" content="Ztna" placement="right" data-testid="sidebar-ztna">
|
|
119
|
-
<i class="isax-shield"
|
|
119
|
+
<i class="isax-shield" />
|
|
120
120
|
</el-tooltip>
|
|
121
121
|
<span class="el-menu-text">Zero Trust Security</span>
|
|
122
122
|
</template>
|
|
@@ -143,9 +143,9 @@
|
|
|
143
143
|
</el-submenu>
|
|
144
144
|
|
|
145
145
|
<el-submenu data-testid="components-sidebar-neymnnlec" class="sub-menus" index="7" data-index="7">
|
|
146
|
-
<template
|
|
146
|
+
<template #title>
|
|
147
147
|
<el-tooltip :disabled="true" class="item" effect="dark" content="Insights" placement="right" data-testid="sidebar-insights">
|
|
148
|
-
<i class="isax-folder-open"
|
|
148
|
+
<i class="isax-folder-open" />
|
|
149
149
|
</el-tooltip>
|
|
150
150
|
<span class="el-menu-text">Insights</span>
|
|
151
151
|
</template>
|
|
@@ -186,7 +186,7 @@
|
|
|
186
186
|
</nuxt-link>
|
|
187
187
|
</el-menu-item>
|
|
188
188
|
|
|
189
|
-
<el-menu-item
|
|
189
|
+
<el-menu-item v-if="TP != 'timus'" data-testid="components-sidebar-ewrnsjeynv" index="7-7" data-index="7-7">
|
|
190
190
|
<nuxt-link class="el-menu-link" to="/insights/signed-logs" data-testid="sidebar-insights-signed-logs">
|
|
191
191
|
<span class="el-menu-text">{{ $t('sidebar.insights.signed_logs.text') }}</span>
|
|
192
192
|
</nuxt-link>
|
|
@@ -194,13 +194,13 @@
|
|
|
194
194
|
</el-submenu>
|
|
195
195
|
|
|
196
196
|
<el-submenu data-testid="components-sidebar-jcaexatpod" class="sub-menus" index="8" data-index="8">
|
|
197
|
-
<template
|
|
197
|
+
<template #title>
|
|
198
198
|
<el-tooltip :disabled="true" class="item" effect="dark" content="Settings" placement="right" data-testid="sidebar-settings">
|
|
199
|
-
<i class="isax-setting-2"
|
|
199
|
+
<i class="isax-setting-2" />
|
|
200
200
|
</el-tooltip>
|
|
201
201
|
<span class="el-menu-text">Settings</span>
|
|
202
202
|
</template>
|
|
203
|
-
<el-menu-item
|
|
203
|
+
<el-menu-item v-if="TP != 'timus'" data-testid="components-sidebar-fswikkipil" index="8-1" data-index="8-1">
|
|
204
204
|
<nuxt-link class="el-menu-link" to="/settings/captive-portals" data-testid="sidebar-settings-captive-portal">
|
|
205
205
|
<span class="el-menu-text">Captive Portal</span>
|
|
206
206
|
</nuxt-link>
|
|
@@ -245,36 +245,31 @@
|
|
|
245
245
|
<h1>Types</h1>
|
|
246
246
|
<p class="p-md-c my-6">You can use any 'string' expression within the tag, in addition to a type that accepts 'src' or 'icon' as a property.</p>
|
|
247
247
|
<div class="grid grid-flow-col auto-cols-max gap-4 items-center">
|
|
248
|
-
<el-avatar icon="isax-add-circle"
|
|
249
|
-
<el-avatar icon="isax-add-circle" size="
|
|
250
|
-
<el-avatar :src="url"
|
|
248
|
+
<el-avatar icon="isax-add-circle" />
|
|
249
|
+
<el-avatar icon="isax-add-circle" size="large" />
|
|
250
|
+
<el-avatar :src="url" />
|
|
251
251
|
<el-avatar>SK</el-avatar>
|
|
252
252
|
</div>
|
|
253
253
|
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
254
254
|
<p class="text-xs">
|
|
255
|
-
<code><el-avatar icon="isax-add-circle" size="
|
|
255
|
+
<code><el-avatar icon="isax-add-circle" size="large"></el-avatar></code>
|
|
256
256
|
</p>
|
|
257
257
|
</div>
|
|
258
258
|
</section>
|
|
259
259
|
</div>
|
|
260
260
|
</template>
|
|
261
261
|
|
|
262
|
-
<script>
|
|
263
|
-
import Vue from 'vue';
|
|
264
|
-
|
|
262
|
+
<script>import Vue from 'vue';
|
|
265
263
|
export default Vue.extend({
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
return {
|
|
269
|
-
url: 'https://api.dicebear.com/7.x/adventurer-neutral/svg?seed=Princess',
|
|
270
|
-
sizeList: ['xlarge', 'large', 'medium', 'small', 'xsmall'],
|
|
271
|
-
|
|
272
|
-
data() {
|
|
264
|
+
name: 'TimusCascader',
|
|
265
|
+
data() {
|
|
273
266
|
return {
|
|
274
|
-
|
|
267
|
+
activeMenuItem: 1,
|
|
268
|
+
TP: 'timus',
|
|
269
|
+
isCollapse: false,
|
|
270
|
+
url: 'https://api.dicebear.com/7.x/adventurer-neutral/svg?seed=Princess',
|
|
271
|
+
sizeList: ['large', 'medium', 'small'],
|
|
275
272
|
};
|
|
276
|
-
|
|
277
|
-
};
|
|
278
|
-
},
|
|
273
|
+
},
|
|
279
274
|
});
|
|
280
275
|
</script>
|
|
@@ -48,12 +48,31 @@ export default Vue.extend({
|
|
|
48
48
|
data() {
|
|
49
49
|
return {
|
|
50
50
|
imageUrl: '',
|
|
51
|
+
fileList: [
|
|
52
|
+
{
|
|
53
|
+
name: 'food.jpeg',
|
|
54
|
+
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
name: 'food2.jpeg',
|
|
58
|
+
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
|
|
59
|
+
},
|
|
60
|
+
],
|
|
51
61
|
};
|
|
52
62
|
},
|
|
53
63
|
methods: {
|
|
54
64
|
handleAvatarSuccess(res, file) {
|
|
55
65
|
this.imageUrl = URL.createObjectURL(file.raw);
|
|
56
66
|
},
|
|
67
|
+
handleChange(file, fileList) {
|
|
68
|
+
this.fileList = fileList.slice(-3);
|
|
69
|
+
},
|
|
70
|
+
handleRemove(file, fileList) {
|
|
71
|
+
console.log(file, fileList);
|
|
72
|
+
},
|
|
73
|
+
handlePreview(file) {
|
|
74
|
+
console.log(file);
|
|
75
|
+
},
|
|
57
76
|
beforeAvatarUpload(file) {
|
|
58
77
|
const isJPG = file.type === 'image/jpeg';
|
|
59
78
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
<p class="p-md-c my-6">
|
|
6
6
|
Avatarlar, resimler, ikonlar veya alfanumerik karakterleri destekler. Avatar'ın şeklini ve boyutunu ayarlamak için `shape` ve `size`
|
|
7
7
|
özelliklerini kullanabilirsiniz. Ayrıca avatarın resim kaynağını belirlemek için `src` özelliğini kullanabilirsiniz. Şekil tipleri
|
|
8
|
-
<b>'circle | square'</b> şeklindedir. Boyutlar ise <b>'
|
|
9
|
-
|
|
8
|
+
<b>'circle | square'</b> şeklindedir. Boyutlar ise <b>'large', 'medium', 'small'</b> şeklindedir. Veya boyutu manuel olarak `size` özelliğini
|
|
9
|
+
kullanarak belirleyebilirsiniz, örneğin <b>size='50'</b>.
|
|
10
10
|
</p>
|
|
11
11
|
<div class="grid grid-flow-col auto-cols-max gap-4 items-center">
|
|
12
12
|
<el-avatar :size="50">SK</el-avatar>
|
|
13
|
-
<el-avatar v-for="size in sizeList" :key="size + ''" :size="size">SK</el-avatar>
|
|
13
|
+
<el-avatar v-for="size in sizeList" :key="size + 'string'" :size="size">SK</el-avatar>
|
|
14
14
|
<el-divider direction="vertical" content-position="center" />
|
|
15
15
|
<el-avatar shape="square" :size="50" :src="url" />
|
|
16
16
|
<el-avatar v-for="size in sizeList" :key="size" shape="square" :size="size" :src="url" />
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
<p class="p-md-c my-6">You can use any 'string' expression within the tag, in addition to a type that accepts 'src' or 'icon' as a property.</p>
|
|
28
28
|
<div class="grid grid-flow-col auto-cols-max gap-4 items-center">
|
|
29
29
|
<el-avatar icon="isax-add-circle" />
|
|
30
|
-
<el-avatar icon="isax-add-circle" size="
|
|
30
|
+
<el-avatar icon="isax-add-circle" size="large" />
|
|
31
31
|
<el-avatar :src="url" />
|
|
32
32
|
<el-avatar>SK</el-avatar>
|
|
33
33
|
</div>
|
|
@@ -48,7 +48,7 @@ export default Vue.extend({
|
|
|
48
48
|
data() {
|
|
49
49
|
return {
|
|
50
50
|
url: 'https://api.dicebear.com/7.x/adventurer-neutral/svg?seed=Princess',
|
|
51
|
-
sizeList: ['
|
|
51
|
+
sizeList: ['large', 'medium', 'small'],
|
|
52
52
|
};
|
|
53
53
|
},
|
|
54
54
|
});
|
|
@@ -8,11 +8,11 @@
|
|
|
8
8
|
</p>
|
|
9
9
|
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
10
10
|
<el-badge :value="12"> <el-button size="small">Yorumlar</el-button> </el-badge>
|
|
11
|
-
<el-badge
|
|
11
|
+
<el-badge v-for="(item, key) in colors" :key="key" :value="randomNumber()" :type="item">
|
|
12
12
|
<el-button size="small" :class="randomButtonType()" :type="randomColor()">{{ item }}</el-button>
|
|
13
13
|
</el-badge>
|
|
14
14
|
<el-dropdown trigger="click">
|
|
15
|
-
<span class="el-dropdown-link"> Beni Tıkla<i class="el-icon-caret-bottom el-icon--right"
|
|
15
|
+
<span class="el-dropdown-link"> Beni Tıkla<i class="el-icon-caret-bottom el-icon--right" /> </span>
|
|
16
16
|
<el-dropdown-menu slot="dropdown">
|
|
17
17
|
<el-dropdown-item class="clearfix">
|
|
18
18
|
Yorumlar
|
|
@@ -38,10 +38,10 @@
|
|
|
38
38
|
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
39
39
|
<el-badge is-dot class="item">query</el-badge>
|
|
40
40
|
<el-badge is-dot class="item">
|
|
41
|
-
<el-button class="share-button" icon="el-icon-share"
|
|
41
|
+
<el-button class="share-button" icon="el-icon-share" />
|
|
42
42
|
</el-badge>
|
|
43
|
-
<el-badge
|
|
44
|
-
<el-badge
|
|
43
|
+
<el-badge v-for="size in sizeList" :key="size + 'avatar'" is-dot class="item"><el-avatar :size="size">SK</el-avatar></el-badge>
|
|
44
|
+
<el-badge v-for="size in sizeList" :key="size + 'shape'" is-dot class="item"><el-avatar shape="square" :size="size">SK</el-avatar></el-badge>
|
|
45
45
|
</div>
|
|
46
46
|
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
47
47
|
<p class="text-xs">
|
|
@@ -80,16 +80,14 @@ export default Vue.extend({
|
|
|
80
80
|
name: 'TimusCascader',
|
|
81
81
|
data() {
|
|
82
82
|
return {
|
|
83
|
-
colors: ['primary', '
|
|
84
|
-
sizeList: ['
|
|
83
|
+
colors: ['primary', 'info', 'success', 'warning', 'danger'],
|
|
84
|
+
sizeList: ['large', 'medium', 'small'],
|
|
85
85
|
};
|
|
86
86
|
},
|
|
87
87
|
methods: {
|
|
88
88
|
handleChange(value) {
|
|
89
89
|
console.log(value);
|
|
90
90
|
},
|
|
91
|
-
},
|
|
92
|
-
methods: {
|
|
93
91
|
randomNumber() {
|
|
94
92
|
return Math.round(Math.random() * 1000);
|
|
95
93
|
},
|
|
@@ -98,6 +96,7 @@ export default Vue.extend({
|
|
|
98
96
|
},
|
|
99
97
|
randomButtonType() {
|
|
100
98
|
const type = ['outline'];
|
|
99
|
+
|
|
101
100
|
return type[Math.round(Math.random() * 2)];
|
|
102
101
|
},
|
|
103
102
|
},
|
|
@@ -5,16 +5,16 @@
|
|
|
5
5
|
<p class="p-md-c my-6">
|
|
6
6
|
Avatarlar, resimler, ikonlar veya alfanumerik karakterleri destekler. Avatar'ın şeklini ve boyutunu ayarlamak için `shape` ve `size`
|
|
7
7
|
özelliklerini kullanabilirsiniz. Ayrıca avatarın resim kaynağını belirlemek için `src` özelliğini kullanabilirsiniz. Şekil tipleri
|
|
8
|
-
<b>'circle | square'</b> şeklindedir. Boyutlar ise <b>'
|
|
9
|
-
|
|
8
|
+
<b>'circle | square'</b> şeklindedir. Boyutlar ise <b>''large', 'medium', 'small'</b> şeklindedir. Veya boyutu manuel olarak `size` özelliğini
|
|
9
|
+
kullanarak belirleyebilirsiniz, örneğin <b>size='50'</b>.
|
|
10
10
|
</p>
|
|
11
11
|
<div class="grid grid-flow-col auto-cols-max gap-4 items-center">
|
|
12
|
-
<div data-testid="components-sidebar-eitdurshvb"
|
|
13
|
-
<nuxt-link class="logo-small py-10" to="/"
|
|
12
|
+
<div id="sidebar" data-testid="components-sidebar-eitdurshvb" class="flex flex-col justify-center">
|
|
13
|
+
<nuxt-link :id="'header-logo-' + TP" class="logo-small py-10" to="/" data-testid="header-manager-logo" />
|
|
14
14
|
<el-menu
|
|
15
|
+
id="el-menu-primary"
|
|
15
16
|
class="mt-4"
|
|
16
17
|
data-testid="components-sidebar-afpbszwnwh"
|
|
17
|
-
id="el-menu-primary"
|
|
18
18
|
:default-active="activeMenuItem ? activeMenuItem.toString() : '1'"
|
|
19
19
|
:collapse="isCollapse"
|
|
20
20
|
>
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
content="Dashboard"
|
|
29
29
|
placement="right"
|
|
30
30
|
>
|
|
31
|
-
<i class="isax-grid-3"
|
|
31
|
+
<i class="isax-grid-3" />
|
|
32
32
|
</el-tooltip>
|
|
33
33
|
<span class="el-menu-text">Dashboard</span>
|
|
34
34
|
</nuxt-link>
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
<el-menu-item data-testid="components-sidebar-lhxzcthocp" index="2" data-index="2">
|
|
37
37
|
<nuxt-link class="el-menu-link" to="/users" data-testid="sidebar-users">
|
|
38
38
|
<el-tooltip data-testid="components-sidebar-gegdseotki" :disabled="true" class="item" effect="dark" content="Users" placement="right">
|
|
39
|
-
<i class="isax-profile-circle"
|
|
39
|
+
<i class="isax-profile-circle" />
|
|
40
40
|
</el-tooltip>
|
|
41
41
|
<span class="el-menu-text">User & Teams</span>
|
|
42
42
|
</nuxt-link>
|
|
@@ -51,33 +51,33 @@
|
|
|
51
51
|
content="Devices"
|
|
52
52
|
placement="right"
|
|
53
53
|
>
|
|
54
|
-
<i class="isax-monitor-mobbile"
|
|
54
|
+
<i class="isax-monitor-mobbile" />
|
|
55
55
|
</el-tooltip>
|
|
56
56
|
<span class="el-menu-text">Devices</span>
|
|
57
57
|
</nuxt-link>
|
|
58
58
|
</el-menu-item>
|
|
59
59
|
|
|
60
|
-
<el-menu-item
|
|
60
|
+
<el-menu-item v-if="TP === 'berqnet'" data-testid="components-sidebar-yzjnblrbvn" index="4" data-index="4">
|
|
61
61
|
<nuxt-link class="el-menu-link" to="/sites" data-testid="sidebar-sites">
|
|
62
62
|
<el-tooltip data-testid="components-sidebar-usdojbrni" :disabled="true" class="item" effect="dark" content="Sites" placement="right">
|
|
63
|
-
<i class="isax-driver-2"
|
|
63
|
+
<i class="isax-driver-2" />
|
|
64
64
|
</el-tooltip>
|
|
65
65
|
<span class="el-menu-text">Sites</span>
|
|
66
66
|
</nuxt-link>
|
|
67
67
|
</el-menu-item>
|
|
68
|
-
<el-menu-item data-testid="components-sidebar-wezwxkkphc"
|
|
68
|
+
<el-menu-item v-else data-testid="components-sidebar-wezwxkkphc" index="4" data-index="4">
|
|
69
69
|
<nuxt-link class="el-menu-link" to="/sites" data-testid="sidebar-sites">
|
|
70
70
|
<el-tooltip data-testid="components-sidebar-qjjhulhbpp" :disabled="true" class="item" effect="dark" content="Sites" placement="right">
|
|
71
|
-
<i class="isax-driver-2"
|
|
71
|
+
<i class="isax-driver-2" />
|
|
72
72
|
</el-tooltip>
|
|
73
73
|
<span class="el-menu-text">Sites</span>
|
|
74
74
|
</nuxt-link>
|
|
75
75
|
</el-menu-item>
|
|
76
76
|
|
|
77
77
|
<el-submenu data-testid="components-sidebar-tmdvrlndak" class="sub-menus" index="5" data-index="5">
|
|
78
|
-
<template
|
|
78
|
+
<template #title>
|
|
79
79
|
<el-tooltip :disabled="true" class="item" effect="dark" content="Insights" placement="right" data-testid="sidebar-rules">
|
|
80
|
-
<i class="isax-key-square"
|
|
80
|
+
<i class="isax-key-square" />
|
|
81
81
|
</el-tooltip>
|
|
82
82
|
<span class="el-menu-text">Rules</span>
|
|
83
83
|
</template>
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
</nuxt-link>
|
|
89
89
|
</el-menu-item>
|
|
90
90
|
|
|
91
|
-
<el-menu-item
|
|
91
|
+
<el-menu-item v-if="TP != 'timus'" data-testid="components-sidebar-jvruigbwdp" index="5-2" data-index="5-2">
|
|
92
92
|
<nuxt-link class="el-menu-link" to="/rules/routes" data-testid="sidebar-rules-routes">
|
|
93
93
|
<span class="el-menu-text">Routes</span>
|
|
94
94
|
</nuxt-link>
|
|
@@ -114,9 +114,9 @@
|
|
|
114
114
|
</el-submenu>
|
|
115
115
|
|
|
116
116
|
<el-submenu data-testid="components-sidebar-bnihbcpjuh" class="sub-menus" index="6" data-index="6">
|
|
117
|
-
<template
|
|
117
|
+
<template #title>
|
|
118
118
|
<el-tooltip :disabled="true" class="item" effect="dark" content="Ztna" placement="right" data-testid="sidebar-ztna">
|
|
119
|
-
<i class="isax-shield"
|
|
119
|
+
<i class="isax-shield" />
|
|
120
120
|
</el-tooltip>
|
|
121
121
|
<span class="el-menu-text">Zero Trust Security</span>
|
|
122
122
|
</template>
|
|
@@ -143,9 +143,9 @@
|
|
|
143
143
|
</el-submenu>
|
|
144
144
|
|
|
145
145
|
<el-submenu data-testid="components-sidebar-neymnnlec" class="sub-menus" index="7" data-index="7">
|
|
146
|
-
<template
|
|
146
|
+
<template #title>
|
|
147
147
|
<el-tooltip :disabled="true" class="item" effect="dark" content="Insights" placement="right" data-testid="sidebar-insights">
|
|
148
|
-
<i class="isax-folder-open"
|
|
148
|
+
<i class="isax-folder-open" />
|
|
149
149
|
</el-tooltip>
|
|
150
150
|
<span class="el-menu-text">Insights</span>
|
|
151
151
|
</template>
|
|
@@ -186,7 +186,7 @@
|
|
|
186
186
|
</nuxt-link>
|
|
187
187
|
</el-menu-item>
|
|
188
188
|
|
|
189
|
-
<el-menu-item
|
|
189
|
+
<el-menu-item v-if="TP != 'timus'" data-testid="components-sidebar-ewrnsjeynv" index="7-7" data-index="7-7">
|
|
190
190
|
<nuxt-link class="el-menu-link" to="/insights/signed-logs" data-testid="sidebar-insights-signed-logs">
|
|
191
191
|
<span class="el-menu-text">{{ $t('sidebar.insights.signed_logs.text') }}</span>
|
|
192
192
|
</nuxt-link>
|
|
@@ -194,13 +194,13 @@
|
|
|
194
194
|
</el-submenu>
|
|
195
195
|
|
|
196
196
|
<el-submenu data-testid="components-sidebar-jcaexatpod" class="sub-menus" index="8" data-index="8">
|
|
197
|
-
<template
|
|
197
|
+
<template #title>
|
|
198
198
|
<el-tooltip :disabled="true" class="item" effect="dark" content="Settings" placement="right" data-testid="sidebar-settings">
|
|
199
|
-
<i class="isax-setting-2"
|
|
199
|
+
<i class="isax-setting-2" />
|
|
200
200
|
</el-tooltip>
|
|
201
201
|
<span class="el-menu-text">Settings</span>
|
|
202
202
|
</template>
|
|
203
|
-
<el-menu-item
|
|
203
|
+
<el-menu-item v-if="TP != 'timus'" data-testid="components-sidebar-fswikkipil" index="8-1" data-index="8-1">
|
|
204
204
|
<nuxt-link class="el-menu-link" to="/settings/captive-portals" data-testid="sidebar-settings-captive-portal">
|
|
205
205
|
<span class="el-menu-text">Captive Portal</span>
|
|
206
206
|
</nuxt-link>
|
|
@@ -245,35 +245,32 @@
|
|
|
245
245
|
<h1>Types</h1>
|
|
246
246
|
<p class="p-md-c my-6">You can use any 'string' expression within the tag, in addition to a type that accepts 'src' or 'icon' as a property.</p>
|
|
247
247
|
<div class="grid grid-flow-col auto-cols-max gap-4 items-center">
|
|
248
|
-
<el-avatar icon="isax-add-circle"
|
|
249
|
-
<el-avatar icon="isax-add-circle" size="
|
|
250
|
-
<el-avatar :src="url"
|
|
248
|
+
<el-avatar icon="isax-add-circle" />
|
|
249
|
+
<el-avatar icon="isax-add-circle" size="large" />
|
|
250
|
+
<el-avatar :src="url" />
|
|
251
251
|
<el-avatar>SK</el-avatar>
|
|
252
252
|
</div>
|
|
253
253
|
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
254
254
|
<p class="text-xs">
|
|
255
|
-
<code><el-avatar icon="isax-add-circle" size="
|
|
255
|
+
<code><el-avatar icon="isax-add-circle" size="large"></el-avatar></code>
|
|
256
256
|
</p>
|
|
257
257
|
</div>
|
|
258
258
|
</section>
|
|
259
259
|
</div>
|
|
260
260
|
</template>
|
|
261
261
|
|
|
262
|
-
<script>
|
|
262
|
+
<script lang="ts">
|
|
263
263
|
import Vue from 'vue';
|
|
264
264
|
|
|
265
265
|
export default Vue.extend({
|
|
266
266
|
name: 'TimusCascader',
|
|
267
267
|
data() {
|
|
268
268
|
return {
|
|
269
|
+
activeMenuItem: 1,
|
|
270
|
+
TP: 'timus',
|
|
271
|
+
isCollapse: false,
|
|
269
272
|
url: 'https://api.dicebear.com/7.x/adventurer-neutral/svg?seed=Princess',
|
|
270
|
-
sizeList: ['
|
|
271
|
-
|
|
272
|
-
data() {
|
|
273
|
-
return {
|
|
274
|
-
isCollapse: false,
|
|
275
|
-
};
|
|
276
|
-
},
|
|
273
|
+
sizeList: ['large', 'medium', 'small'],
|
|
277
274
|
};
|
|
278
275
|
},
|
|
279
276
|
});
|
|
@@ -48,12 +48,31 @@ export default Vue.extend({
|
|
|
48
48
|
data() {
|
|
49
49
|
return {
|
|
50
50
|
imageUrl: '',
|
|
51
|
+
fileList: [
|
|
52
|
+
{
|
|
53
|
+
name: 'food.jpeg',
|
|
54
|
+
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
name: 'food2.jpeg',
|
|
58
|
+
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
|
|
59
|
+
},
|
|
60
|
+
],
|
|
51
61
|
};
|
|
52
62
|
},
|
|
53
63
|
methods: {
|
|
54
64
|
handleAvatarSuccess(res, file) {
|
|
55
65
|
this.imageUrl = URL.createObjectURL(file.raw);
|
|
56
66
|
},
|
|
67
|
+
handleChange(file, fileList) {
|
|
68
|
+
this.fileList = fileList.slice(-3);
|
|
69
|
+
},
|
|
70
|
+
handleRemove(file, fileList) {
|
|
71
|
+
console.log(file, fileList);
|
|
72
|
+
},
|
|
73
|
+
handlePreview(file) {
|
|
74
|
+
console.log(file);
|
|
75
|
+
},
|
|
57
76
|
beforeAvatarUpload(file) {
|
|
58
77
|
const isJPG = file.type === 'image/jpeg';
|
|
59
78
|
const isLt2M = file.size / 1024 / 1024 < 2;
|