@afeefa/vue-app 0.0.338 → 0.0.340

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

@@ -1 +1 @@
-0.0.338
+0.0.340

package/package.json

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

package/src/components/ADraggableCheckboxGroup.vue

@@ -20,20 +20,22 @@
             <div class="drag-handle">
               <a-icon
                 size="1.5rem"
-                :icon="{icon: '$dragIcon', color: '#CCCCCC'}"
+                :icon="{ icon: '$dragIcon', color: '#CCCCCC' }"
               />
             </div>
 
-            <a-checkbox
-              :label="option.itemText"
-              :value="isChecked(option.itemValue)"
-              hide-details
-              @input="checked(option.itemValue, $event)"
-            >
-              <template #label>
-                <div v-html="option.itemText" />
-              </template>
-            </a-checkbox>
+            <div class="checkbox">
+              <a-checkbox
+                :label="option.itemText"
+                :value="isChecked(option.itemValue)"
+                hide-details
+                @input="checked(option.itemValue, $event)"
+              >
+                <template #label>
+                  <div v-html="option.itemText" />
+                </template>
+              </a-checkbox>
+            </div>
           </div>
         </div>
       </draggable>
@@ -48,7 +50,6 @@
   </div>
 </template>
 
-
 <script>
 import { Component, Vue, Watch, Inject } from '@a-vue'
 import draggable from 'vuedraggable'
@@ -163,6 +164,10 @@ export default class ACheckboxGroup extends Vue {
   height: 20px;
 }
 
+.checkbox {
+  flex-grow: 2;
+}
+
 .drag-handle:active {
   cursor: grabbing;
 }

package/src/components/ASelect.vue

@@ -6,20 +6,19 @@
     :valueComparator="compareValues"
     :style="cwm_widthStyle"
     :multiple="multiple"
-    v-bind="{...$attrs, dense, outlined}"
+    v-bind="{ ...$attrs, dense, outlined }"
     v-on="$listeners"
     @change="selectedItemTitleChanged"
   />
 </template>
 
-
 <script>
 import { Component, Mixins, Watch } from '@a-vue'
 import { Model } from '@afeefa/api-resources-client'
 import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
 
 @Component({
-  props: ['validator', 'defaultValue', 'items', {dense: true, outlined: true, multiple: false}]
+  props: ['validator', 'defaultValue', 'items', { dense: true, outlined: true, multiple: false }]
 })
 export default class ASelect extends Mixins(ComponentWidthMixin) {
   items_ = []
@@ -51,7 +50,10 @@ export default class ASelect extends Mixins(ComponentWidthMixin) {
   @Watch('$attrs.value')
   selectedItemTitleChanged () {
     this.$nextTick(() => {
-      const title = this.$refs.select?.selectedItems[0]?.itemTitle
+      const selectedItems = this.$refs.select?.selectedItems ?? []
+      const title = this.multiple
+        ? selectedItems.map(item => item.itemTitle).join(', ')
+        : selectedItems[0]?.itemTitle
       this.$emit('selectedItemTitleChanged', title)
     })
   }
@@ -115,7 +117,6 @@ export default class ASelect extends Mixins(ComponentWidthMixin) {
 }
 </script>
 
-
 <style lang="scss">
 .v-application .v-select-list .v-list-item__action {
   margin: 0;

package/src/components/form/fields/{FormFieldSelect2.vue → FormFieldAutoComplete.vue}

@@ -19,12 +19,12 @@ import { FormFieldMixin } from '../FormFieldMixin'
 import { ComponentWidthMixin } from '../../mixins/ComponentWidthMixin'
 
 @Component
-export default class FormFieldSelect2 extends Mixins(FormFieldMixin, ComponentWidthMixin) {
+export default class FormFieldAutoComplete extends Mixins(FormFieldMixin, ComponentWidthMixin) {
   asyncItems = null
 
   created () {
     if (this.fieldHasOptionsRequest()) {
-      this.asyncItems = q => this.getSelectOptions({q})
+      this.asyncItems = q => this.getSelectOptions({ q })
     }
   }
 

package/src/components/index.js

@@ -10,7 +10,7 @@ import FormFieldRadioGroup from './form/fields/FormFieldRadioGroup'
 import FormFieldRichTextArea from './form/fields/FormFieldRichTextArea'
 import FormFieldSearchSelect from './form/fields/FormFieldSearchSelect'
 import FormFieldSelect from './form/fields/FormFieldSelect'
-import FormFieldSelect2 from './form/fields/FormFieldSelect2'
+import FormFieldAutoComplete from './form/fields/FormFieldAutoComplete'
 import FormFieldText from './form/fields/FormFieldText'
 import FormFieldTextArea from './form/fields/FormFieldTextArea'
 import FormFieldTime from './form/fields/FormFieldTime'
@@ -37,7 +37,7 @@ Vue.component('FormFieldDate', FormFieldDate)
 Vue.component('FormFieldTime', FormFieldTime)
 Vue.component('FormFieldSearchSelect', FormFieldSearchSelect)
 Vue.component('FormFieldSelect', FormFieldSelect)
-Vue.component('FormFieldSelect2', FormFieldSelect2)
+Vue.component('FormFieldAutoComplete', FormFieldAutoComplete)
 Vue.component('ListFilterPage', ListFilterPage)
 Vue.component('ListFilterSearch', ListFilterSearch)
 Vue.component('ListFilterSearch2', ListFilterSearch2)

package/src/components/list/ListFilterBar.vue

@@ -63,7 +63,7 @@
             gap="6"
             class="mt-3"
           >
-            <list-filter-page :has="{page: false}" />
+            <list-filter-page :has="{ page: false }" />
 
             <a-radio-group
               v-model="dragMode"
@@ -75,7 +75,7 @@
                 <v-radio value="grab">
                   <template #label>
                     <a-icon
-                      :icon="{icon: grabIcon}"
+                      :icon="{ icon: grabIcon }"
                       class="ml-n1 mr-1"
                     /> Liste verschieben
                   </template>
@@ -83,7 +83,7 @@
                 <v-radio value="select">
                   <template #label>
                     <a-icon
-                      :icon="{icon: selectIcon}"
+                      :icon="{ icon: selectIcon }"
                       class="ml-n1 mr-1"
                     /> Text auswählen
                   </template>
@@ -124,14 +124,13 @@
 
     <list-filter-page
       class="mt-4"
-      :has="{page_size: false}"
+      :has="{ page_size: false }"
       v2
       :totalVisible="9"
     />
   </div>
 </template>
 
-
 <script>
 import { Component, Vue } from '@a-vue'
 import { ListFilterEvent } from '@a-vue/events'
@@ -184,7 +183,7 @@ export default class ListFilterBar extends Vue {
     return Object.values(this.filters).filter(f => !f.hasDefaultValueSet()).length - minus
   }
 
-  listFilterChanged ({payload: {name, label, value}}) {
+  listFilterChanged ({ payload: { name, label, value } }) {
     this.setSelectedFilter(name, label, value)
   }
 
@@ -226,7 +225,6 @@ export default class ListFilterBar extends Vue {
 }
 </script>
 
-
 <style lang="scss" scoped>
 .filterToggle {
   padding: 0 0 0 5px !important;
@@ -245,6 +243,14 @@ export default class ListFilterBar extends Vue {
   gap: 4px;
 }
 
+// Filter oben bündig ausrichten, damit eine höher gewachsene Zelle
+// (z.B. Multi-Select mit mehreren Chips) die Nachbarn in derselben
+// Grid-Zeile nicht mitstreckt (Grid-Default align-items: stretch).
+
+::v-deep(.a-grid) {
+  align-items: start;
+}
+
 ::v-deep(.aPagination) {
   margin-top: 14px;
 }