@afeefa/vue-app 0.0.178 → 0.0.179

package/.afeefa/package/release/version.txt

@@ -1 +1 @@
-0.0.178
+0.0.179

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.178",
+  "version": "0.0.179",
   "description": "",
   "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
   "license": "MIT",

package/src/components/AModal.vue

@@ -24,6 +24,7 @@
     <v-card v-if="modal">
       <v-card-title v-if="title">
         <v-icon
+          v-if="icon"
           :color="icon.color"
           class="mr-2"
           size="1.5rem"

package/src/components/ATab.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <slot v-if="visible" />
+  </div>
+</template>
+
+<script>
+import { Component, Vue } from '@a-vue'
+
+@Component({
+  props: ['title']
+})
+export default class ATab extends Vue {
+  visible = false
+
+  show () {
+    this.visible = true
+  }
+
+  hide () {
+    this.visible = false
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

package/src/components/ATabs.vue

@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <div :class="['menuContainer', {first}]">
+      <div class="menu">
+        <div
+          v-for="(title, index) in titles"
+          :key="index"
+          :class="['label', {selected: index === currentIndex}]"
+          @click="setTab(index)"
+        >
+          {{ title }}
+        </div>
+      </div>
+    </div>
+
+    <div class="content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Component, Vue } from '@a-vue'
+
+@Component({
+  props: [{first: false}]
+})
+export default class ATabs extends Vue {
+  titles = []
+  currentIndex = 0
+
+  mounted () {
+    console.log(this.$children)
+
+    this.titles = this.$children.map(c => c.title)
+
+    this.$children[this.currentIndex].show()
+  }
+
+  setTab (index) {
+    this.currentIndex = index
+    this.$children.forEach((tab, i) => {
+      if (i === this.currentIndex) {
+        tab.show()
+      } else {
+        tab.hide()
+      }
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.menuContainer {
+  border-bottom: 2px solid #EEEEEE;
+  margin: 2rem 0;
+
+  &.first {
+    margin-top: 0;
+  }
+}
+
+.menu {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  margin-bottom: -2px;
+
+  .label {
+    padding: .6rem 1.5rem .5rem;
+    border-bottom: 2px solid #EEEEEE;
+    // border-top-left-radius: 6px;
+    // border-top-right-radius: 6px;
+    background: white;
+    cursor: pointer;
+
+    text-transform: uppercase;
+    letter-spacing: 5px;
+    color: #CCCCCC;
+    font-size: .8rem;
+    white-space: nowrap;
+
+    &.selected {
+      padding-top: .3rem;
+
+      border-left: 2px solid #EEEEEE;
+      border-top: 2px solid #EEEEEE;
+      border-right: 2px solid #EEEEEE;
+      border-bottom: none;
+    }
+  }
+}
+
+</style>

package/src-admin/components/form/RemoveDialog.vue

@@ -9,6 +9,7 @@
 
       <a-text-field
         v-model="removeConfirmed"
+        class="mt-2"
         label="Key"
         :focus="true"
         width="100"

package/src-admin/components/list/ListView.vue

@@ -34,7 +34,7 @@
             </a-table-header>
 
             <a-table-row
-              v-for="model in models_"
+              v-for="(model, index) in models_"
               :key="model.id"
               v-flying-context-trigger="hasFlyingContext"
               :class="getRowClasses(model)"
@@ -52,6 +52,7 @@
               <slot
                 name="model-table"
                 :model="model"
+                :index="index"
               />
             </a-table-row>
           </a-table>