@afeefa/vue-app 0.0.320 → 0.0.321

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

@@ -1 +1 @@
-0.0.320
+0.0.321

package/package.json

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

package/src/components/list/ListFilterBar.vue

@@ -99,6 +99,8 @@
             >
               Alles zurücksetzen
             </v-btn>
+
+            <slot name="append" />
           </a-row>
         </div>
       </div>

package/src/components/mixins/ComponentWidthMixin.js

@@ -42,7 +42,7 @@ export class ComponentWidthMixin extends Vue {
     }
 
     if (maxWidth) {
-      styles.push(`max-width: ${this.cwm_toPixel_(maxWidth)}; background: yellow`)
+      styles.push(`max-width: ${this.cwm_toPixel_(maxWidth)}`)
     }
 
     return styles.join(' ')

package/src/utils/deep-merge.js

@@ -0,0 +1,20 @@
+/**
+ * Recursively merges source into target.
+ * Returns a new object without mutating target or source.
+ * Arrays and non-plain-objects are overwritten (not merged).
+ */
+export function deepMerge (target, source) {
+  const result = { ...target }
+  for (const key of Object.keys(source)) {
+    if (
+      result[key] && typeof result[key] === 'object' && !Array.isArray(result[key]) &&
+      source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])
+    ) {
+      result[key] = deepMerge(result[key], source[key])
+    } else {
+      result[key] = source[key]
+    }
+  }
+  return result
+}
+

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

@@ -2,9 +2,17 @@
   <div>
     <a-context-menu>
       <template #activator>
-        <div class="contextButton">
-          {{ selectedColumns.length }}/{{ Object.keys(columns_).length }}
-        </div>
+        <v-btn
+          class="columnsButton"
+          title="Spalten wählen"
+        >
+          <v-icon color="#BBBBBB">
+            {{ mdiViewColumn }}
+          </v-icon>
+          <div class="ml-1">
+            {{ selectedColumns.length }}/{{ Object.keys(columns_).length }}
+          </div>
+        </v-btn>
       </template>
 
       <a-draggable-checkbox-group
@@ -30,11 +38,14 @@
 
 <script>
 import { Component, Vue } from '@a-vue'
+import { mdiViewColumn } from '@mdi/js'
 
 @Component({
   props: ['columns', 'storageKey', {drag: false}]
 })
 export default class ListColumnSelector extends Vue {
+  mdiViewColumn = mdiViewColumn
+
   columns_ = {}
   selectedColumns = []
 
@@ -54,9 +65,10 @@ export default class ListColumnSelector extends Vue {
   }
 
   columnSelected () {
-    for (const key in this.columns) {
-      this.columns[key].visible = this.selectedColumns.includes(key)
+    for (const key in this.columns_) {
+      this.columns_[key].visible = this.selectedColumns.includes(key)
     }
+    this.$emit('update:columns', this.columns_)
     this.saveColumnConfiguration()
   }
 
@@ -126,8 +138,13 @@ export default class ListColumnSelector extends Vue {
 
 
 <style lang="scss" scoped>
-.contextButton {
-  font-size: .7rem;
-  cursor: pointer;
+.columnsButton {
+  padding: 0 8px 0 5px !important;
+  height: 2.2rem !important;
+
+  div {
+    font-size: .8rem;
+    color: #666666;
+  }
 }
 </style>