@afeefa/vue-app 0.0.177 → 0.0.179

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

@@ -1 +1 @@
-0.0.177
+0.0.179

package/package.json

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

package/src/components/ALoadingIndicator.vue

@@ -1,22 +1,23 @@
 <template>
-  <v-progress-linear
-    v-if="isLoading_"
-    class="loadingIndicator"
-    indeterminate
-    :color="color"
-    v-bind="$attrs"
-  />
-  <div
-    v-else
-    style="height: 4px;"
-  />
+  <div :class="['loadingIndicator', {absolute}]">
+    <v-progress-linear
+      v-if="isLoading_"
+      class="loadingIndicator"
+      indeterminate
+      :color="color"
+    />
+    <div
+      v-else
+      style="height: 4px;"
+    />
+  </div>
 </template>
 
 <script>
 import { Component, Vue, Watch } from '@a-vue'
 
 @Component({
-  props: ['isLoading']
+  props: [{isLoading: false, absolute: false}]
 })
 export default class ALoadingIndicator extends Vue {
   isLoading_ = false
@@ -49,3 +50,13 @@ export default class ALoadingIndicator extends Vue {
   }
 }
 </script>
+
+
+<style lang="scss" scoped>
+.absolute {
+  position: absolute;
+  width: 100%;
+  top: 0;
+  left: 0;
+}
+</style>

package/src/components/AModal.vue

@@ -23,18 +23,13 @@
 
     <v-card v-if="modal">
       <v-card-title v-if="title">
-        <v-avatar
+        <v-icon
           v-if="icon"
-          color="#FFFFFF"
-          size="2rem"
-          class="mr-2 ml-n1"
-        >
-          <v-icon
-            :color="icon.color"
-            size="1.2rem"
-            v-text="icon.icon"
-          />
-        </v-avatar>
+          :color="icon.color"
+          class="mr-2"
+          size="1.5rem"
+          v-text="icon.icon"
+        />
 
         {{ title }}
       </v-card-title>

package/src/components/ASearchSelect.vue

@@ -49,7 +49,7 @@
           absolute
           top
           left
-          :class="['loadingIndicator', {showFilters}]"
+          :class="[{showFilters}]"
           :isLoading="isLoading"
         />
       </div>

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/App.vue

@@ -14,8 +14,6 @@
         :class="{marginRight: hasFloatingInformationBar}"
       >
         <a-loading-indicator
-          top
-          class="loadingIndicator"
           :isLoading="!!numLoadingRequests"
           :color="loaderColor"
         />

package/src-admin/components/detail/DetailProperty.vue

@@ -4,7 +4,7 @@
       <v-icon
         v-if="icon"
         :color="icon.color"
-        size="3rem"
+        size="2.75rem"
       >
         {{ icon.icon }}
       </v-icon>
@@ -55,12 +55,12 @@ export default class DetailProperty extends Vue {
     height: 40px;
 
     > .v-icon {
-      flex: 0 0 3rem;
-      margin-right: 1.5rem;
+      flex: 0 0 2.5rem;
+      margin-right: 1rem;
     }
 
     .iconPlaceholder {
-      width: 4.5rem;
+      width: 3.5rem;
     }
 
     .label {
@@ -73,8 +73,8 @@ export default class DetailProperty extends Vue {
   }
 
   .content {
-    margin-top: .5rem;
-    padding-left: 4.5rem;
+    margin-top: .75rem;
+    padding-left: 3.5rem;
   }
 }
 </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>