@afeefa/vue-app 0.0.181 → 0.0.183
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.
@@ -1 +1 @@
|
|
1
|
-
0.0.
|
1
|
+
0.0.183
|
package/package.json
CHANGED
package/src/components/ATab.vue
CHANGED
package/src/components/ATabs.vue
CHANGED
@@ -8,6 +8,16 @@
|
|
8
8
|
:class="['label', {selected: index === currentIndex}]"
|
9
9
|
@click="setTab(index)"
|
10
10
|
>
|
11
|
+
<template v-if="icons[index]">
|
12
|
+
<a-icon
|
13
|
+
size="1.5rem"
|
14
|
+
:color="icons[index].color"
|
15
|
+
class="mt-n1 mr-1"
|
16
|
+
>
|
17
|
+
{{ icons[index].icon }}
|
18
|
+
</a-icon>
|
19
|
+
</template>
|
20
|
+
|
11
21
|
{{ title }}
|
12
22
|
</div>
|
13
23
|
</div>
|
@@ -27,10 +37,12 @@ import { Component, Vue } from '@a-vue'
|
|
27
37
|
})
|
28
38
|
export default class ATabs extends Vue {
|
29
39
|
titles = []
|
40
|
+
icons = []
|
30
41
|
currentIndex = 0
|
31
42
|
|
32
43
|
mounted () {
|
33
44
|
this.titles = this.$children.map(c => c.title)
|
45
|
+
this.icons = this.$children.map(c => c.icon)
|
34
46
|
|
35
47
|
this.$children[this.currentIndex].show()
|
36
48
|
}
|
@@ -64,7 +76,7 @@ export default class ATabs extends Vue {
|
|
64
76
|
justify-content: center;
|
65
77
|
|
66
78
|
.label {
|
67
|
-
padding: .
|
79
|
+
padding: .8rem 1.2rem .7rem;
|
68
80
|
background: white;
|
69
81
|
cursor: pointer;
|
70
82
|
|
@@ -146,14 +146,14 @@ export default class InformationBar extends Vue {
|
|
146
146
|
let width = 0
|
147
147
|
|
148
148
|
Array.from(this.getTopContainer().children).forEach(c => {
|
149
|
-
if (c.style.width !== '
|
149
|
+
if (c.style.width !== '100%') {
|
150
150
|
const w = parseInt(c.style.width)
|
151
151
|
width = Math.max(width, w)
|
152
152
|
}
|
153
153
|
})
|
154
154
|
|
155
155
|
Array.from(this.getBottomContainer().children).forEach(c => {
|
156
|
-
if (c.style.width !== '
|
156
|
+
if (c.style.width !== '100%') {
|
157
157
|
const w = parseInt(c.style.width)
|
158
158
|
width = Math.max(width, w)
|
159
159
|
}
|
@@ -4,15 +4,13 @@
|
|
4
4
|
:class="['item', infoItemId, {expanded, rail}]"
|
5
5
|
:style="{width}"
|
6
6
|
>
|
7
|
-
<
|
8
|
-
<div
|
9
|
-
class="header"
|
10
|
-
@click="derail"
|
11
|
-
>
|
7
|
+
<div class="headerContainer">
|
8
|
+
<div class="header">
|
12
9
|
<v-icon
|
13
10
|
v-if="icon"
|
14
11
|
:color="icon.color"
|
15
12
|
size="2rem"
|
13
|
+
@click="derail"
|
16
14
|
>
|
17
15
|
{{ icon.icon }}
|
18
16
|
</v-icon>
|
@@ -23,18 +21,28 @@
|
|
23
21
|
/>
|
24
22
|
|
25
23
|
<template v-if="!rail">
|
26
|
-
<
|
27
|
-
|
28
|
-
|
24
|
+
<div
|
25
|
+
class="labelContainer"
|
26
|
+
@click="derail"
|
27
|
+
>
|
28
|
+
<div class="label">
|
29
|
+
{{ label }}
|
30
|
+
</div>
|
31
|
+
</div>
|
32
|
+
|
33
|
+
<v-icon
|
34
|
+
class="contextButton expand mt-n1"
|
35
|
+
@click="derail"
|
36
|
+
>
|
29
37
|
{{ expanded ? '$caretDownIcon' : '$caretRightIcon' }}
|
30
38
|
</v-icon>
|
31
|
-
</template>
|
32
|
-
</div>
|
33
39
|
|
34
|
-
|
35
|
-
|
40
|
+
<div v-if="expanded">
|
41
|
+
<slot name="actionButton" />
|
42
|
+
</div>
|
43
|
+
</template>
|
36
44
|
</div>
|
37
|
-
</
|
45
|
+
</div>
|
38
46
|
|
39
47
|
<collapse-transition>
|
40
48
|
<div
|
@@ -66,7 +74,7 @@ import { SidebarEvent } from '@a-admin/events'
|
|
66
74
|
{
|
67
75
|
top: true,
|
68
76
|
bottom: false,
|
69
|
-
width: '
|
77
|
+
width: '100%',
|
70
78
|
open: false
|
71
79
|
}
|
72
80
|
]
|
@@ -157,15 +165,26 @@ export default class InformationBarItem extends Vue {
|
|
157
165
|
}
|
158
166
|
}
|
159
167
|
|
168
|
+
.headerContainer {
|
169
|
+
width: 100%;
|
170
|
+
line-height: 0; // kill inline-flex space
|
171
|
+
}
|
172
|
+
|
160
173
|
.header {
|
161
|
-
display: flex;
|
162
|
-
flex-wrap: nowrap;
|
174
|
+
display: inline-flex;
|
163
175
|
align-items: center;
|
164
176
|
font-size: .8rem;
|
165
|
-
|
177
|
+
line-height: 1.5; // end kill inline-flex space
|
178
|
+
max-width: 100%;
|
166
179
|
|
167
180
|
> .v-icon {
|
168
181
|
margin-right: .75rem;
|
182
|
+
cursor: pointer;
|
183
|
+
}
|
184
|
+
|
185
|
+
.labelContainer {
|
186
|
+
overflow: hidden;
|
187
|
+
cursor: pointer;
|
169
188
|
}
|
170
189
|
|
171
190
|
.label {
|
@@ -173,15 +192,16 @@ export default class InformationBarItem extends Vue {
|
|
173
192
|
text-transform: uppercase;
|
174
193
|
letter-spacing: 3px;
|
175
194
|
color: #666666;
|
176
|
-
|
195
|
+
overflow: hidden;
|
196
|
+
text-overflow: ellipsis;
|
177
197
|
}
|
178
198
|
|
179
199
|
&:hover {
|
180
|
-
label {
|
200
|
+
.label {
|
181
201
|
color: #333333;
|
182
202
|
}
|
183
203
|
|
184
|
-
.v-icon.
|
204
|
+
.v-icon.expand {
|
185
205
|
color: #333333 !important;
|
186
206
|
}
|
187
207
|
}
|