@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.181
1
+ 0.0.183
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@afeefa/vue-app",
3
- "version": "0.0.181",
3
+ "version": "0.0.183",
4
4
  "description": "",
5
5
  "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
6
6
  "license": "MIT",
@@ -8,7 +8,7 @@
8
8
  import { Component, Vue } from '@a-vue'
9
9
 
10
10
  @Component({
11
- props: ['title']
11
+ props: ['title', 'icon']
12
12
  })
13
13
  export default class ATab extends Vue {
14
14
  visible = false
@@ -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: .5rem 1rem .7rem;
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 !== 'auto') {
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 !== 'auto') {
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
- <a-row justify-space-between>
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
- <label class="label">{{ label }}</label>
27
-
28
- <v-icon class="contextButton mt-n1">
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
- <div v-if="expanded">
35
- <slot name="actionButton" />
40
+ <div v-if="expanded">
41
+ <slot name="actionButton" />
42
+ </div>
43
+ </template>
36
44
  </div>
37
- </a-row>
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: 'auto',
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
- cursor: pointer;
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
- cursor: pointer;
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.contextButton {
204
+ .v-icon.expand {
185
205
  color: #333333 !important;
186
206
  }
187
207
  }