@afeefa/vue-app 0.0.178 → 0.0.179

Sign up to get free protection for your applications and to get access to all the features.
@@ -1 +1 @@
1
- 0.0.178
1
+ 0.0.179
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@afeefa/vue-app",
3
- "version": "0.0.178",
3
+ "version": "0.0.179",
4
4
  "description": "",
5
5
  "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
6
6
  "license": "MIT",
@@ -24,6 +24,7 @@
24
24
  <v-card v-if="modal">
25
25
  <v-card-title v-if="title">
26
26
  <v-icon
27
+ v-if="icon"
27
28
  :color="icon.color"
28
29
  class="mr-2"
29
30
  size="1.5rem"
@@ -0,0 +1,27 @@
1
+ <template>
2
+ <div>
3
+ <slot v-if="visible" />
4
+ </div>
5
+ </template>
6
+
7
+ <script>
8
+ import { Component, Vue } from '@a-vue'
9
+
10
+ @Component({
11
+ props: ['title']
12
+ })
13
+ export default class ATab extends Vue {
14
+ visible = false
15
+
16
+ show () {
17
+ this.visible = true
18
+ }
19
+
20
+ hide () {
21
+ this.visible = false
22
+ }
23
+ }
24
+ </script>
25
+
26
+ <style lang="scss" scoped>
27
+ </style>
@@ -0,0 +1,94 @@
1
+ <template>
2
+ <div>
3
+ <div :class="['menuContainer', {first}]">
4
+ <div class="menu">
5
+ <div
6
+ v-for="(title, index) in titles"
7
+ :key="index"
8
+ :class="['label', {selected: index === currentIndex}]"
9
+ @click="setTab(index)"
10
+ >
11
+ {{ title }}
12
+ </div>
13
+ </div>
14
+ </div>
15
+
16
+ <div class="content">
17
+ <slot />
18
+ </div>
19
+ </div>
20
+ </template>
21
+
22
+ <script>
23
+ import { Component, Vue } from '@a-vue'
24
+
25
+ @Component({
26
+ props: [{first: false}]
27
+ })
28
+ export default class ATabs extends Vue {
29
+ titles = []
30
+ currentIndex = 0
31
+
32
+ mounted () {
33
+ console.log(this.$children)
34
+
35
+ this.titles = this.$children.map(c => c.title)
36
+
37
+ this.$children[this.currentIndex].show()
38
+ }
39
+
40
+ setTab (index) {
41
+ this.currentIndex = index
42
+ this.$children.forEach((tab, i) => {
43
+ if (i === this.currentIndex) {
44
+ tab.show()
45
+ } else {
46
+ tab.hide()
47
+ }
48
+ })
49
+ }
50
+ }
51
+ </script>
52
+
53
+ <style lang="scss" scoped>
54
+ .menuContainer {
55
+ border-bottom: 2px solid #EEEEEE;
56
+ margin: 2rem 0;
57
+
58
+ &.first {
59
+ margin-top: 0;
60
+ }
61
+ }
62
+
63
+ .menu {
64
+ position: relative;
65
+ display: flex;
66
+ justify-content: center;
67
+ margin-bottom: -2px;
68
+
69
+ .label {
70
+ padding: .6rem 1.5rem .5rem;
71
+ border-bottom: 2px solid #EEEEEE;
72
+ // border-top-left-radius: 6px;
73
+ // border-top-right-radius: 6px;
74
+ background: white;
75
+ cursor: pointer;
76
+
77
+ text-transform: uppercase;
78
+ letter-spacing: 5px;
79
+ color: #CCCCCC;
80
+ font-size: .8rem;
81
+ white-space: nowrap;
82
+
83
+ &.selected {
84
+ padding-top: .3rem;
85
+
86
+ border-left: 2px solid #EEEEEE;
87
+ border-top: 2px solid #EEEEEE;
88
+ border-right: 2px solid #EEEEEE;
89
+ border-bottom: none;
90
+ }
91
+ }
92
+ }
93
+
94
+ </style>
@@ -9,6 +9,7 @@
9
9
 
10
10
  <a-text-field
11
11
  v-model="removeConfirmed"
12
+ class="mt-2"
12
13
  label="Key"
13
14
  :focus="true"
14
15
  width="100"
@@ -34,7 +34,7 @@
34
34
  </a-table-header>
35
35
 
36
36
  <a-table-row
37
- v-for="model in models_"
37
+ v-for="(model, index) in models_"
38
38
  :key="model.id"
39
39
  v-flying-context-trigger="hasFlyingContext"
40
40
  :class="getRowClasses(model)"
@@ -52,6 +52,7 @@
52
52
  <slot
53
53
  name="model-table"
54
54
  :model="model"
55
+ :index="index"
55
56
  />
56
57
  </a-table-row>
57
58
  </a-table>