@afeefa/vue-app 0.0.318 → 0.0.319

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

@@ -1 +1 @@
-0.0.318
+0.0.319

package/package.json

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

package/src/components/ARow.vue

@@ -54,5 +54,9 @@ export default class ARow extends Mixins(ComponentWidthMixin) {
     flex-direction: column;
     align-items: start;
   }
+
+  &.even > * {
+    flex: 1;
+  }
 }
 </style>

package/src/components/ASearchSelect.vue

@@ -29,7 +29,7 @@
       <div
         v-if="isOpen"
         class="controls"
-        :style="cwm_widthStyle"
+        :style="cwm_popupWidthStyle"
       >
         <div class="background elevation-6" />
 
@@ -74,7 +74,7 @@
         :filters.sync="filters"
         :count.sync="count"
         :isLoading.sync="isLoading"
-        :style="cwm_widthStyle"
+        :style="cwm_popupWidthStyle"
         @onLoad="onLoad"
         @enter="selectItem"
         @backtab="setFocusToSearchInput"
@@ -361,8 +361,8 @@ export default class ASearchSelect extends Mixins(ComponentWidthMixin, UsesPosit
     }
   }
 
-  setWidth (width) {
-    this.cwm_width_ = width
+  setPopupWidth (width) {
+    this.cwm_popupWidth_ = width
   }
 
   searchFilterKeyDown (event) {

package/src/components/ASelect.vue

@@ -121,10 +121,13 @@ export default class ASelect extends Mixins(ComponentWidthMixin) {
   margin: 0;
   margin-right: .5rem;
 }
-
 </style>
 
 <style lang="scss" scoped>
+.v-select {
+  flex: unset;
+}
+
 .v-text-field :deep(.v-input__icon--clear) { // always show clear icon, https://github.com/vuetifyjs/vuetify/pull/15876
   opacity: 1;
 }

package/src/components/ATextField.vue

@@ -248,4 +248,9 @@ export default class ATextField extends Mixins(ComponentWidthMixin) {
 .v-text-field :deep(.v-input__icon--clear) { // always show clear icon, https://github.com/vuetifyjs/vuetify/pull/15876
   opacity: 1;
 }
+
+.v-text-field {
+  flex: unset;
+  max-width: unset;
+}
 </style>

package/src/components/form/fields/FormFieldSearchSelect.vue

@@ -4,8 +4,8 @@
     :listAction="listAction"
     :selectedItems="selectedItems"
     :getSearchInput="() => $refs.searchInput"
-    diffXControls="-.5rem"
-    diffYControls="-.5rem"
+    diffXControls="1rem"
+    diffYControls="1rem"
     v-bind="$attrs"
     @select="itemSelected"
     @close="focusInput"
@@ -38,7 +38,6 @@
           ref="searchInput"
           :focus="true"
           tabindex="1"
-          maxWidth="100%"
           :label="'Suche ' + label"
           v-on="onSearchInputKey"
         />
@@ -116,7 +115,7 @@ export default class FormFieldSearchSelect extends Mixins(FormFieldMixin) {
     const input = this.$refs.input?.$el
     if (input) {
       const inputWidth = input.offsetWidth
-      this.$refs.select.setWidth(`calc(${inputWidth}px + 1rem)`)
+      this.$refs.select.setPopupWidth(`calc(${inputWidth}px - 2rem)`)
     }
   }
 

package/src/components/list/ListFilterBar.vue

@@ -23,8 +23,8 @@
 
       <list-filter-search2
         label="Suche"
-        maxWidth="220"
         focus
+        width="200"
         :translateOption="title => {
           return title
             .replace('Sprint', $t('SPRINT'))

package/src/components/list/ListFilterMixin.js

@@ -7,7 +7,6 @@ import { ListFilterEvent } from '@a-vue/events'
 export class ListFilterMixin extends Vue {
   displayValue = null
   name_ = null
-  maxWidth_ = null
 
   @Watch('displayValue')
   displayValueChanged () {

package/src/components/list/filters/ListFilterSearch.vue

@@ -3,7 +3,6 @@
     <a-text-field
       ref="input"
       v-model="filter.value"
-      :maxWidth="$attrs.maxWidth || maxWidth_"
       :label="label_"
       :debounce="500"
       v-bind="$attrs"
@@ -52,7 +51,6 @@ import { ListFilterMixin } from '../ListFilterMixin'
 @Component
 export default class ListFilterSearch extends Mixins(ListFilterMixin) {
   name_ = 'q'
-  maxWidth_ = 200
 
   clearValue (e) {
     if (this.filter.value) {

package/src/components/list/filters/ListFilterSearch2.vue

@@ -3,7 +3,6 @@
     <a-text-field
       ref="input"
       v-model="filter.value"
-      :maxWidth="$attrs.maxWidth || maxWidth_"
       :label="label_"
       :debounce="500"
       v-bind="$attrs"
@@ -36,7 +35,6 @@ import { ListFilterMixin } from '../ListFilterMixin'
 })
 export default class ListFilterSearch2 extends Mixins(ListFilterMixin) {
   name_ = 'q'
-  maxWidth_ = 200
 
   clearValue (e) {
     if (this.filter.value) {

package/src/components/list/filters/ListFilterSearchSelect.vue

@@ -5,8 +5,8 @@
     :specialItems="specialItems"
     :selectedItems="selectedItems"
     :getSearchInput="() => $refs.searchInput"
-    diffXControls="-.5rem"
-    diffYControls="-.5rem"
+    diffXControls="1rem"
+    diffYControls="1rem"
     v-bind="$attrs"
     @select="itemSelected"
     @close="focusInput"
@@ -23,7 +23,6 @@
         :clearable="!!selectedItems.length"
         appendIcon="$dropdown"
         hide-details
-        :maxWidth="$attrs.maxWidth"
         @keydown.space.prevent="open"
         @keydown.down.prevent="open"
         @keydown.enter.prevent="open"
@@ -37,7 +36,6 @@
           ref="searchInput"
           :focus="true"
           tabindex="1"
-          maxWidth="100%"
           :label="'Suche ' + label"
           v-on="onSearchInputKey"
         />
@@ -149,7 +147,7 @@ export default class ListFilterSearchSelect extends Mixins(ListFilterMixin) {
   calculateSelectorSize () {
     const input = this.$refs.input.$el
     const inputWidth = input.offsetWidth
-    this.$refs.select.setWidth(`calc(${inputWidth}px + 1rem)`)
+    this.$refs.select.setPopupWidth(`calc(${inputWidth}px - 2rem)`)
   }
 
   get selectedItems () {

package/src/components/mixins/ComponentWidthMixin.js

@@ -1,53 +1,48 @@
 import { Component, Vue } from '@a-vue'
 
 @Component({
-  props: ['maxWidth', 'width']
+  props: ['maxWidth', 'width', 'popupWidth']
 })
 export class ComponentWidthMixin extends Vue {
   cwm_maxWidth_ = null
   cwm_width_ = null
+  cwm_popupWidth_ = null
 
   get cwm_width () {
-    let width = this.width || this.cwm_width_
-
-    if (width) {
-      if (!isNaN(width)) {
-        width = width + 'px'
-      }
-      return width
-    }
+    return this.cwm_toPixel_(this.width || this.cwm_width_)
   }
 
   get cwm_maxWidth () {
-    let maxWidth = this.maxWidth || this.cwm_maxWidth_
+    return this.cwm_toPixel_(this.maxWidth || this.cwm_maxWidth_)
+  }
 
-    if (maxWidth) {
-      if (!isNaN(maxWidth)) {
-        maxWidth = maxWidth + 'px'
-      }
-      return maxWidth
+  get cwm_widthStyle () {
+    return this.cwm_getWidthStyle_(
+      this.width || this.cwm_width_,
+      this.maxWidth || this.cwm_maxWidth_
+    )
+  }
+
+  get cwm_popupWidthStyle () {
+    return this.cwm_getWidthStyle_(this.popupWidth || this.cwm_popupWidth_ || this.width || this.cwm_width_)
+  }
+
+  cwm_toPixel_ (value) {
+    if (value && !isNaN(value)) {
+      return value + 'px'
     }
+    return value
   }
 
-  get cwm_widthStyle () {
+  cwm_getWidthStyle_ (width, maxWidth) {
     const styles = []
 
-    let width = this.width || this.cwm_width_
-
     if (width) {
-      if (!isNaN(width)) {
-        width = width + 'px'
-      }
-      styles.push(`width: ${width};`)
+      styles.push(`width: ${this.cwm_toPixel_(width)};`)
     }
 
-    let maxWidth = this.maxWidth || this.cwm_maxWidth_
-
     if (maxWidth) {
-      if (!isNaN(maxWidth)) {
-        maxWidth = maxWidth + 'px'
-      }
-      styles.push(`max-width: ${maxWidth};`)
+      styles.push(`max-width: ${this.cwm_toPixel_(maxWidth)}; background: yellow`)
     }
 
     return styles.join(' ')

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

@@ -57,22 +57,33 @@ export default class AppBarNavigation extends Vue {
 
   initLinks () {
     const sections = document.querySelectorAll('.collapsible-section')
-    this.links = Array.from(sections).map(s => {
-      const label = s.getAttribute('label')
-      const slug = label
-        .toLowerCase()
-        .replace(/[^\w]+/g, '-') // Sonderzeichen -> Bindestriche
-        .replace(/^-+|-+$/g, '') // führende/trailing -
-        .substring(0, 50) // Sicherheitslimit
-
-      s.id = slug
-
-      return {
-        id: s.id,
-        label,
-        slug
-      }
-    })
+    const seenLabels = new Set()
+
+    this.links = Array.from(sections)
+      .filter(s => { // wenn aus versehen mehrere sections mit gleichem label bestehen, z.b. in popups
+        const label = s.getAttribute('label')
+        if (seenLabels.has(label)) {
+          return false
+        }
+        seenLabels.add(label)
+        return true
+      })
+      .map(s => {
+        const label = s.getAttribute('label')
+        const slug = label
+          .toLowerCase()
+          .replace(/[^\w]+/g, '-') // Sonderzeichen -> Bindestriche
+          .replace(/^-+|-+$/g, '') // führende/trailing -
+          .substring(0, 50) // Sicherheitslimit
+
+        s.id = slug
+
+        return {
+          id: s.id,
+          label,
+          slug
+        }
+      })
   }
 
   scrollToSection (id) {

package/src-admin/components/controls/SearchSelectNavigator.vue

@@ -3,8 +3,8 @@
     ref="select"
     :listAction="listAction"
     :getSearchInput="() => $refs.searchInput"
-    diffXControls="-.5rem"
-    diffYControls="-.5rem"
+    diffXControls="1rem"
+    diffYControls="1rem"
     v-bind="$attrs"
     @select="itemSelected"
     @close="focusInput"
@@ -31,7 +31,6 @@
           ref="searchInput"
           :focus="true"
           tabindex="1"
-          maxWidth="100%"
           :label="'Suche ' + label"
           v-on="onSearchInputKey"
         />
@@ -93,7 +92,7 @@ export default class SearchSelectNavigator extends Vue {
   calculateSelectorSize () {
     const input = this.$refs.input.$el
     const inputWidth = input.offsetWidth
-    this.$refs.select.setWidth(`calc(${inputWidth}px + 1rem)`)
+    this.$refs.select.setPopupWidth(`calc(${inputWidth}px - 2rem)`)
   }
 
   get listAction () {