@afeefa/vue-app 0.0.227 → 0.0.229

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

@@ -1 +1 @@
-0.0.227
+0.0.229

package/package.json

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

package/src/components/ACheckbox.vue

@@ -38,5 +38,6 @@ export default class ACheckbox extends Vue {
 <style lang="scss" scoped>
 .v-input--checkbox {
   margin: 0;
+  padding: 0;
 }
 </style>

package/src/components/ARadioGroup.vue

@@ -7,8 +7,11 @@
     v-bind="$attrs"
     @change="$emit('input', $event)"
   >
-    <template v-for="option in options_">
+    <slot v-if="$slots.default" />
+
+    <template v-else>
       <v-radio
+        v-for="option in options_"
         :key="option.itemText"
         :value="option.itemValue"
       >

package/src-admin/components/index.js

@@ -15,12 +15,9 @@ import EditFormButtons from './form/EditFormButtons'
 import RemoveButton from './form/RemoveButton'
 import RemoveDialog from './form/RemoveDialog'
 import HSeparator from './HSeparator'
-import ListCard from './list/ListCard'
 import ListColumnHeader from './list/ListColumnHeader'
 import ListColumnSelector from './list/ListColumnSelector'
-import ListContent from './list/ListContent'
-import ListMeta from './list/ListMeta'
-import ListTitle from './list/ListTitle'
+import ListConfig from './list/ListConfig'
 import ListView from './list/ListView'
 import ModelCount from './model/ModelCount'
 import ModelIcon from './model/ModelIcon'
@@ -30,11 +27,8 @@ import Start from './Start'
 import StickyFooter from './StickyFooter'
 import CollapseTransition from './transitions/CollapseTransition'
 
-Vue.component('ListCard', ListCard)
 Vue.component('ListColumnHeader', ListColumnHeader)
-Vue.component('ListContent', ListContent)
-Vue.component('ListMeta', ListMeta)
-Vue.component('ListTitle', ListTitle)
+Vue.component('ListConfig', ListConfig)
 Vue.component('ListView', ListView)
 Vue.component('ListColumnSelector', ListColumnSelector)
 

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

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <div
+      v-if="bulkSelection"
+      class="mb-4"
+    >
+      <label>Mehrfachauswahl</label>
+      <a-checkbox
+        v-model="bulkSelection_"
+        hide-details
+        label="Mehrere auswählen"
+        @input="updateList"
+      />
+    </div>
+
+    <label>Auswahlmodus</label>
+    <a-radio-group
+      v-model="dragMode"
+      @input="updateList"
+    >
+      <template #default>
+        <v-radio value="grab">
+          <template #label>
+            <a-icon
+              :icon="{icon: grabIcon}"
+              class="mr-2"
+            /> Liste verschieben
+          </template>
+        </v-radio>
+        <v-radio value="select">
+          <template #label>
+            <a-icon
+              :icon="{icon: selectIcon}"
+              class="mr-2"
+            /> Text auswählen
+          </template>
+        </v-radio>
+      </template>
+    </a-radio-group>
+  </div>
+</template>
+
+<script>
+import { Component, Vue } from '@a-vue'
+import { mdiTextRecognition, mdiHandBackRight } from '@mdi/js'
+
+@Component({
+  props: [{
+    bulkSelection: false
+  }]
+})
+export default class ListConfig extends Vue {
+  bulkSelection_ = false
+  dragMode = 'grab'
+
+  grabIcon = mdiHandBackRight
+  selectIcon = mdiTextRecognition
+
+  created () {
+    this.bulkSelection_ = this.listView._bulkSelection
+    this.dragMode = this.listView._dragMode
+  }
+
+  get listView () {
+    let parent = this.$parent
+    while (parent) {
+      if (parent.LIST_VIEW) {
+        return parent
+      }
+      parent = parent.$parent
+    }
+    return null
+  }
+
+  updateList () {
+    this.listView.setBulkSelection(this.bulkSelection_)
+    this.listView.setDragMode(this.dragMode)
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.contextButton {
+  font-size: .7rem;
+  cursor: pointer;
+}
+
+label {
+  color: gray;
+}
+</style>

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

@@ -29,10 +29,10 @@
       </template>
 
       <template v-else-if="$scopedSlots['model-table']">
-        <div class="a-table-wrapper">
+        <div :class="['a-table-wrapper', _dragMode]">
           <a-table>
             <a-table-header>
-              <div v-if="bulkselection" />
+              <div v-if="_bulkSelection" />
 
               <div v-if="$has.icon">
                 <slot name="header-icon" />
@@ -54,14 +54,14 @@
                 @click="emitFlyingContext(model)"
               >
                 <div
-                  v-if="bulkselection"
+                  v-if="_bulkSelection"
                   class="pr-2"
                 >
                   <a-checkbox
                     :value="isSelected(model)"
                     hide-details
                     class="pa-0"
-                    @input="selectClient(model)"
+                    @input="selectModel(model)"
                   />
                 </div>
 
@@ -90,7 +90,7 @@
                   subModel: true
                 }"
               >
-                <div v-if="bulkselection" />
+                <div v-if="_bulkSelection" />
 
                 <div v-if="$has.icon" />
 
@@ -167,7 +167,8 @@ import { LoadingEvent } from '@a-vue/events'
     'rowClasses',
     'rowListeners',
     {
-      bulkselection: false,
+      bulkSelection: false,
+      dragMode: 'grab',
       getSubModels: {
         default: () => model => []
       }
@@ -186,16 +187,41 @@ export default class ListView extends Mixins(ListViewMixin) {
 
   selectedModels = []
 
+  dragMode_ = null
+  bulkSelection_ = null
+
+  setDragMode (mode) {
+    this.dragMode_ = mode
+  }
+
+  get _dragMode () {
+    return this.dragMode_ || this.dragMode
+  }
+
+  setBulkSelection (mode) {
+    this.bulkSelection_ = mode
+  }
+
+  get _bulkSelection () {
+    return this.bulkSelection_ || this.bulkSelection
+  }
+
   isSelected (model) {
     return this.selectedModels.includes(model)
   }
 
-  selectClient (model) {
+  selectModel (model) {
     if (!this.isSelected(model)) {
       this.selectedModels.push(model)
     } else {
       this.selectedModels = this.selectedModels.filter(m => m !== model)
     }
+    this.$emit('update:selectedModels', this.selectedModels)
+  }
+
+  _listLoaded () {
+    this.selectedModels = []
+    this.$emit('update:selectedModels', this.selectedModels)
   }
 
   @Watch('isLoading')
@@ -269,6 +295,10 @@ export default class ListView extends Mixins(ListViewMixin) {
   }
 
   startShifting (event) {
+    if (this._dragMode !== 'grab') {
+      return
+    }
+
     this.scrollContainerX = this.getScrollParent(this.$el.querySelector('.a-table-wrapper'), 'h')
     this.scrollContainerY = this.getScrollParent(this.$el.querySelector('.a-table-wrapper'), 'v')
 
@@ -352,7 +382,10 @@ export default class ListView extends Mixins(ListViewMixin) {
   overflow-x: auto;
   overflow-y: hidden;
   padding-bottom: 1rem;
-  cursor: grab;
+
+  &.grab {
+    cursor: grab;
+  }
 }
 
 .filters:not(:empty) {

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

@@ -1,12 +0,0 @@
-<template>
-  <div class="listCard">
-    <slot />
-  </div>
-</template>
-
-
-<style lang="scss" scoped>
-.listCard {
-  margin-bottom: 1rem;
-}
-</style>

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

@@ -1,13 +0,0 @@
-<template>
-  <div class="listContent">
-    <slot />
-  </div>
-</template>
-
-
-<style lang="scss" scoped>
-.listContent {
-  background: #F4F4F4;
-  padding: .5rem;
-}
-</style>

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

@@ -1,13 +0,0 @@
-<template>
-  <div class="listMeta">
-    <slot />
-  </div>
-</template>
-
-
-<style lang="scss" scoped>
-.listMeta {
-  color: gray;
-  font-size: .7rem;
-}
-</style>

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

@@ -1,24 +0,0 @@
-<template>
-  <router-link
-    v-if="link"
-    :to="link"
-  >
-    <h3>
-      <slot />
-    </h3>
-  </router-link>
-
-  <h3 v-else>
-    <slot />
-  </h3>
-</template>
-
-<script>
-import { Component, Vue } from '@a-vue'
-
-@Component({
-  props: ['link']
-})
-export default class ListTitle extends Vue {
-}
-</script>