@afeefa/vue-app 0.0.89 → 0.0.91

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

@@ -1 +1 @@
-0.0.89
+0.0.91

package/package.json

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

package/src/components/AGrid.vue

@@ -1,23 +1,18 @@
 <template>
-  <div :class="['a-grid', widthClass, colsClass, gapClass, evenClass, breakMobileClass]">
+  <div :class="['a-grid', colsClass, gapClass, evenClass, breakMobileClass]">
     <slot />
   </div>
 </template>
 
 
 <script>
-import { Component, Vue } from '@a-vue'
+import { Component, Mixins } from '@a-vue'
+import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
 
 @Component({
-  props: ['fullWidth', 'gap', 'hGap', 'vGap', 'cols', 'even', 'breakMobile']
+  props: ['gap', 'hGap', 'vGap', 'cols', {even: false}, 'breakMobile']
 })
-export default class AGrid extends Vue {
-  get widthClass () {
-    if (this.fullWidth !== undefined) {
-      return 'full'
-    }
-  }
-
+export default class AGrid extends Mixins(ComponentWidthMixin) {
   get breakMobileClass () {
     if (this.breakMobile !== undefined) {
       return 'breakMobile'
@@ -30,7 +25,7 @@ export default class AGrid extends Vue {
   }
 
   get evenClass () {
-    if (this.even !== undefined) {
+    if (this.even) {
       return 'even'
     }
   }
@@ -60,35 +55,12 @@ export default class AGrid extends Vue {
 .a-grid {
   display: grid;
 
-  &.full {
-    width: 100%;
-  }
-
-  &.cols-2 {
-    grid-template-columns: auto auto;
-    &.even {
-      grid-template-columns: 1fr 1fr;
-    }
-  }
-
-  &.cols-3 {
-    grid-template-columns: auto auto auto;
-    &.even {
-      grid-template-columns: 1fr 1fr 1fr;
-    }
-  }
-
-  &.cols-4 {
-    grid-template-columns: repeat(4, auto);
-    &.even {
-      grid-template-columns: repeat(4, 1fr);
-    }
-  }
-
-  &.cols-5 {
-    grid-template-columns: repeat(5, auto);
-    &.even {
-      grid-template-columns: repeat(5, 1fr);
+  @for $i from 1 through 8 {
+    &.cols-#{$i} {
+      grid-template-columns: repeat(#{$i}, auto);
+      &.even {
+        grid-template-columns: repeat(#{$i}, 1fr);
+      }
     }
   }
 
@@ -100,6 +72,5 @@ export default class AGrid extends Vue {
       }
     }
   }
-
 }
 </style>

package/src/components/ARow.vue

@@ -1,21 +1,30 @@
 <template>
-  <div :class="['a-row', widthClass, alignClass, gapClass, directionClass, justifyClass]">
+  <div
+    :class="['a-row', directionClass, gapClass, classes]"
+    :style="cwm_widthStyle"
+  >
     <slot />
   </div>
 </template>
 
 
 <script>
-import { Component, Vue } from '@a-vue'
+import { Component, Mixins } from '@a-vue'
+import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
 
 @Component({
-  props: ['fullWidth', 'gap', 'start', 'stretch', 'center', 'vertical', 'right']
+  props: [
+    { vertical: false },
+    'gap'
+  ]
 })
-export default class ARow extends Vue {
-  get widthClass () {
-    if (this.fullWidth !== undefined) {
-      return 'full'
-    }
+export default class ARow extends Mixins(ComponentWidthMixin) {
+  get classes () {
+    const classes = {}
+    Object.keys(this.$attrs).forEach(cssClass => {
+      classes[cssClass] = true
+    })
+    return classes
   }
 
   get gapClass () {
@@ -24,33 +33,11 @@ export default class ARow extends Vue {
     }
   }
 
-  get alignClass () {
-    if (this.start !== undefined) {
-      return 'start'
-    }
-
-    if (this.stretch !== undefined) {
-      return 'stretch'
-    }
-
-    if (this.vertical !== undefined) {
-      return this.center !== undefined ? 'center' : 'start'
-    }
-
-    return 'center'
-  }
-
   get directionClass () {
-    if (this.vertical !== undefined) {
+    if (this.vertical) {
       return 'vertical'
     }
   }
-
-  get justifyClass () {
-    if (this.right !== undefined) {
-      return 'right'
-    }
-  }
 }
 </script>
 
@@ -58,29 +45,11 @@ export default class ARow extends Vue {
 <style scoped lang="scss">
 .a-row {
   display: flex;
-
-  &.full {
-    width: 100%;
-  }
+  align-items: center;
 
   &.vertical {
     flex-direction: column;
-  }
-
-  &.center {
-    align-items: center;
-  }
-
-  &.start {
-    align-items: flex-start;
-  }
-
-  &.stretch {
-    align-items: stretch;
-  }
-
-  &.right {
-    justify-content: flex-end;
+    align-items: start;
   }
 }
 </style>

package/src/components/form/EditModal.vue

@@ -27,8 +27,9 @@
         <slot name="after-form-fields" />
 
         <a-row
-          class="mt-8 gap-2"
-          right
+          mt-8
+          gap-2
+          justify-end
         >
           <v-btn
             small

package/src-admin/components/App.vue

@@ -84,8 +84,8 @@
 
     <v-main id="v-main">
       <a-row
-        start
         class="topbar"
+        align-start
       >
         <v-app-bar-nav-icon
           class="sidebarToggleButton mr-2 ml-3"

package/src-admin/components/NotFound.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="notFound">
     <a-row
-      vertical
-      center
       class="content"
+      vertical
+      align-center
     >
       <div class="logo">
         <slot />
@@ -11,7 +11,7 @@
 
       <a-row
         vertical
-        center
+        align-center
       >
         <div class="mt-0">
           {{ title || '404 - Not Found' }}

package/src-admin/components/Splash.vue

@@ -1,9 +1,9 @@
 <template>
   <v-app class="splash">
     <a-row
-      vertical
-      center
       class="content"
+      vertical
+      align-center
     >
       <div class="logo">
         <slot />
@@ -11,8 +11,8 @@
 
       <a-row
         vertical
-        center
-        fullWidth
+        align-center
+        width="100%"
       >
         <v-progress-linear
           :size="45"

package/src-admin/components/app/AppBarButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="project-buttons gap-3">
+  <div>
     <slot />
   </div>
 </template>
@@ -8,11 +8,7 @@
 import { Component, Vue } from '@a-vue'
 
 @Component({
-  props: {
-    prepend: {
-      type: Boolean
-    }
-  }
+  props: [{ prepend: false }]
 })
 export default class AppBarButton extends Vue {
   mounted () {
@@ -39,10 +35,3 @@ export default class AppBarButton extends Vue {
   }
 }
 </script>
-
-<style scoped>
-.project-buttons {
-  display: flex;
-  align-items: center;
-}
-</style>

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

@@ -1,8 +1,6 @@
 <template>
   <a-row
-    fullWidth
     vertical
-    start
     gap="10"
   >
     <slot />

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

@@ -27,6 +27,7 @@
           </v-btn>
         </div>
       </template>
+
       <span v-if="disabled">
         <template v-if="!valid">
           Daten berichtigen,<br>um zu speichern

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

@@ -4,12 +4,15 @@
       <v-btn
         :class="'a-btn-standard removeButton-' + dialogId"
         fab
-        x-small
+        small
         :color="(hover ? 'red' : 'grey lighten-3')"
         :title="title"
         @click="remove"
       >
-        <v-icon class="white--hover">
+        <v-icon
+          class="white--hover"
+          size="1.3rem"
+        >
           $trashCanIcon
         </v-icon>
       </v-btn>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="listView">
     <div
-      v-if="filtersActivated"
+      v-if="$has.filters"
       class="filters"
     >
       <slot
@@ -69,16 +69,14 @@
       </template>
     </template>
 
-    <div
-      v-else-if="!isLoading"
-      class="nothing-found"
-    >
-      <div v-if="filtersActivated">
+    <div v-else-if="!isLoading">
+      <div v-if="$has.filters">
         Nichts gefunden. <a
           href=""
           @click.prevent="resetFilters()"
         >Filter zurücksetzen</a>
       </div>
+
       <div v-else>
         Nichts gefunden.
       </div>
@@ -93,18 +91,10 @@ import { ListViewMixin } from '@a-vue/components/list/ListViewMixin'
 import { LoadingEvent } from '@a-vue/events'
 
 @Component({
-  props: {
-    rowAttributes: {},
-    rowClasses: {},
-    rowListeners: {},
-    filtersActivated: {
-      type: Boolean,
-      default: true
-    }
-  }
+  props: ['rowAttributes', 'rowClasses', 'rowListeners']
 })
 export default class ListView extends Mixins(ListViewMixin) {
-  $hasOptions = ['icon']
+  $hasOptions = ['icon', 'filters']
 
   @Watch('isLoading')
   isLoadingChanged () {

package/src-admin/styles.scss

@@ -74,140 +74,16 @@
   box-shadow: none !important;
 }
 
-// @for $i from 1 through 10 {
-//   .gap-{$i} {
-//     gap: 0.25rem * $i;
-//   }
-// }
-
-.gap-0 {
-  gap: 0;
-}
-
-.gap-1 {
-  gap: 4px;
-}
-
-.gap-2 {
-  gap: 8px;
-}
-
-.gap-3 {
-  gap: 12px;
-}
-
-.gap-4 {
-  gap: 16px;
-}
-
-.gap-5 {
-  gap: 20px;
-}
-
-.gap-6 {
-  gap: 24px;
-}
-
-.gap-7 {
-  gap: 28px;
-}
-
-.gap-8 {
-  gap: 32px;
-}
-
-.gap-9 {
-  gap: 36px;
-}
-
-.gap-10 {
-  gap: 40px;
-}
-
-.h-gap-0 {
-  column-gap: 0;
-}
-
-.h-gap-1 {
-  column-gap: 4px;
-}
-
-.h-gap-2 {
-  column-gap: 8px;
-}
-
-.h-gap-3 {
-  column-gap: 12px;
-}
-
-.h-gap-4 {
-  column-gap: 16px;
-}
-
-.h-gap-5 {
-  column-gap: 20px;
-}
-
-.h-gap-6 {
-  column-gap: 24px;
-}
-
-.h-gap-7 {
-  column-gap: 28px;
-}
-
-.h-gap-8 {
-  column-gap: 32px;
-}
-
-.h-gap-9 {
-  column-gap: 36px;
-}
-
-.h-gap-10 {
-  column-gap: 40px;
-}
-
-.v-gap-0 {
-  row-gap: 0;
-}
-
-.v-gap-1 {
-  row-gap: 4px;
-}
-
-.v-gap-2 {
-  row-gap: 8px;
-}
-
-.v-gap-3 {
-  row-gap: 12px;
-}
-
-.v-gap-4 {
-  row-gap: 16px;
-}
-
-.v-gap-5 {
-  row-gap: 20px;
-}
-
-.v-gap-6 {
-  row-gap: 24px;
-}
-
-.v-gap-7 {
-  row-gap: 28px;
-}
-
-.v-gap-8 {
-  row-gap: 32px;
-}
+@for $i from 1 through 16 {
+  .gap-#{$i} {
+    gap: 4px * $i;
+  }
 
-.v-gap-9 {
-  row-gap: 36px;
-}
+  .h-gap-#{$i} {
+    column-gap: 4px * $i;
+  }
 
-.v-gap-10 {
-  row-gap: 40px;
+  .v-gap-#{$i} {
+    row-gap: 4px * $i;
+  }
 }