@afeefa/vue-app 0.0.178 → 0.0.180

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

@@ -1 +1 @@
-0.0.178
+0.0.180

package/package.json

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

package/src/components/AInfo.vue

@@ -1,6 +1,7 @@
 <template>
   <v-alert
     v-bind="$attrs"
+    :type="type"
     :style="{display: inline ? 'inline-block' : 'block'}"
     :class="['a-info', {xSmall}]"
     dense
@@ -17,7 +18,7 @@
 import { Component, Vue } from '@a-vue'
 
 @Component({
-  props: [{inline: true, xSmall: false}]
+  props: [{inline: true, xSmall: false, type: 'info'}]
 })
 export default class AInfo extends Vue {
 }

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,89 @@
+<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 () {
+    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: 3px solid #DDDDDD;
+  margin: 2rem 0;
+
+  &.first {
+    margin-top: 0;
+  }
+}
+
+.menu {
+  position: relative;
+  display: flex;
+  justify-content: center;
+
+  .label {
+    padding: .5rem 1rem .7rem;
+    background: white;
+    cursor: pointer;
+
+    text-transform: uppercase;
+    letter-spacing: 5px;
+    color: #BBBBBB;
+    font-size: .8rem;
+    white-space: nowrap;
+
+    &:hover {
+      background: #F4F4F4;
+      color: #AAAAAA;
+    }
+
+    &.selected {
+      background: #DDDDDD;
+      color: #666666;
+    }
+  }
+}
+
+</style>

package/src-admin/components/InformationBar.vue

@@ -3,6 +3,7 @@
     v-show="visible"
     id="information-bar"
     :class="{mobile, rail}"
+    :style="widthStyle"
   >
     <div :class="['toggleButton', {rail}]">
       <v-app-bar-nav-icon
@@ -40,6 +41,7 @@ export default class InformationBar extends Vue {
   visible = false
   mobile = false
   rail = false
+  width = 300
 
   created () {
     this.$events.on(SidebarEvent.STATUS, ({payload: {information, informationRailed, mobile}}) => {
@@ -69,15 +71,15 @@ export default class InformationBar extends Vue {
 
     const elTop = document.createElement('div')
     document.body.appendChild(elTop)
-    moveChildren(this.$el.querySelector('#information-bar__children .top'), elTop)
+    moveChildren(this.getTopContainer(), elTop)
 
     const elBottom = document.createElement('div')
     document.body.appendChild(elBottom)
-    moveChildren(this.$el.querySelector('#information-bar__children .bottom'), elBottom)
+    moveChildren(this.getBottomContainer(), elBottom)
 
     this.$nextTick(() => {
-      moveChildren(elTop, document.querySelector('#information-bar__children .top'))
-      moveChildren(elBottom, document.querySelector('#information-bar__children .bottom'))
+      moveChildren(elTop, this.getTopContainer())
+      moveChildren(elBottom, this.getBottomContainer())
       this.$nextTick(() => {
         this.$events.dispatch(new SidebarEvent(SidebarEvent.STATUS, new SidebarState(sidebarService)))
       })
@@ -86,7 +88,8 @@ export default class InformationBar extends Vue {
 
   @Watch('rail')
   railChanged () {
-    this.$el.style.marginRight = this.rail ? '-240px' : 0
+    const right = `calc(-${this.width}px - 3rem + 60px)`
+    this.$el.style.marginRight = this.rail ? right : 0
   }
 
   toggleRail () {
@@ -98,6 +101,7 @@ export default class InformationBar extends Vue {
     const visible = this.hasSidebarItems()
 
     if (visible && !old) {
+      this.width = this.getWidthFromItems()
       sidebarService.setInformation(true)
     }
 
@@ -110,6 +114,14 @@ export default class InformationBar extends Vue {
     return this.$el.querySelector('#information-bar__children')
   }
 
+  getTopContainer () {
+    return document.querySelector('#information-bar__children .top')
+  }
+
+  getBottomContainer () {
+    return document.querySelector('#information-bar__children .bottom')
+  }
+
   hasSidebarItems () {
     return !!(this.$el.querySelector('#information-bar__children .top').children.length +
       this.$el.querySelector('#information-bar__children .bottom').children.length)
@@ -118,6 +130,33 @@ export default class InformationBar extends Vue {
   hideSidebar () {
     sidebarService.setInformation(false)
   }
+
+  getWidthFromItems () {
+    let width = 0
+
+    Array.from(this.getTopContainer().children).forEach(c => {
+      if (c.style.width !== 'auto') {
+        const w = parseInt(c.style.width)
+        width = Math.max(width, w)
+      }
+    })
+
+    Array.from(this.getBottomContainer().children).forEach(c => {
+      if (c.style.width !== 'auto') {
+        const w = parseInt(c.style.width)
+        width = Math.max(width, w)
+      }
+    })
+
+    return width
+  }
+
+  get widthStyle () {
+    return {
+      flex: `0 0 calc(${this.width}px + 3rem)`,
+      width: `calc(${this.width}px + 3rem)`
+    }
+  }
 }
 </script>
 
@@ -126,8 +165,6 @@ export default class InformationBar extends Vue {
 #information-bar {
   position: relative;
 
-  flex: 0 0 300px;
-  width: 300px;
   height: 100vh;
   overflow-x: hidden;
   overflow-y: auto;

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>