@afeefa/vue-app 0.0.317 → 0.0.319

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

@@ -1 +1 @@
-0.0.317
+0.0.319

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.317",
+  "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

@@ -1,5 +1,8 @@
 <template>
-  <div :class="['a-search-select', widthClass]">
+  <div
+    :class="['a-search-select', widthClass]"
+    :style="cwm_widthStyle"
+  >
     <div
       class="activator"
       @click="open"
@@ -26,7 +29,7 @@
       <div
         v-if="isOpen"
         class="controls"
-        :style="cwm_widthStyle"
+        :style="cwm_popupWidthStyle"
       >
         <div class="background elevation-6" />
 
@@ -71,7 +74,7 @@
         :filters.sync="filters"
         :count.sync="count"
         :isLoading.sync="isLoading"
-        :style="cwm_widthStyle"
+        :style="cwm_popupWidthStyle"
         @onLoad="onLoad"
         @enter="selectItem"
         @backtab="setFocusToSearchInput"
@@ -358,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 () {

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

@@ -1,223 +0,0 @@
-<template>
-  <div>
-    <a-table
-      v-if="selectedItems.length"
-      :style="selectedWidthStyle"
-    >
-      <a-table-header
-        v-if="hasHeader"
-        small
-      >
-        <div
-          v-for="(column, index) in selectedColumns"
-          :key="index"
-        >
-          {{ column.header }}
-        </div>
-      </a-table-header>
-
-      <a-table-row
-        v-for="(item, index) in selectedItems"
-        :key="item.id"
-        :selected="isClicked(item)"
-      >
-        <template v-for="(column, index2) in selectedColumns">
-          <v-icon
-            v-if="column.icon"
-            :key="'icon' + index2"
-            :color="column.icon.color"
-            class="selectedIcon"
-            size="1.5rem"
-            v-text="column.icon.icon"
-          />
-
-          <div
-            v-else
-            :key="'text' + index2"
-            class="selectedContent"
-          >
-            {{ column.text(item) }}
-          </div>
-        </template>
-
-        <div>
-          <a-context-menu
-            :ref="'editItem' + index"
-            @open="clickedItem = item"
-            @close="clickedItem = null"
-          >
-            <a-context-menu-item @click="removeItem(item, index)">
-              <v-icon>$trashCanIcon</v-icon>
-              Löschen
-            </a-context-menu-item>
-          </a-context-menu>
-        </div>
-      </a-table-row>
-    </a-table>
-
-    <div v-else>
-      {{ isEmptyText }}
-    </div>
-
-    <a-search-select
-      :listAction="selectableConfig.listAction"
-      :selectedItems="selectableSelectedItems"
-      :width="selectableWidth"
-      @select="addItem"
-    >
-      <template #activator>
-        <a-icon-button
-          small
-          icon="$plusIcon"
-          :text="selectableConfig.addButtonTitle || 'Hinzufügen'"
-          class="mt-4"
-        />
-      </template>
-
-      <template #filters>
-        <a-row gap="4">
-          <list-filter-search
-            :focus="true"
-            maxWidth="100%"
-            label="Suche Berater:in"
-          />
-
-          <list-filter-page
-            :has="{page_size: false, page_number: true}"
-            :totalVisible="0"
-          />
-        </a-row>
-      </template>
-
-      <template #row="{ model, on }">
-        <template
-          v-for="(column, index) in selectableColumns"
-          v-on="on"
-        >
-          <v-icon
-            v-if="column.icon"
-            :key="'icon' + index"
-            :color="column.icon.color"
-            class="selectableIcon"
-            size="1.5rem"
-            v-on="on"
-            v-text="column.icon.icon"
-          />
-
-          <div
-            v-else
-            :key="'text' + index"
-            class="selectableContent"
-            v-on="on"
-          >
-            {{ column.text(model) }}
-          </div>
-        </template>
-      </template>
-    </a-search-select>
-  </div>
-</template>
-
-
-<script>
-import { Component, Vue } from '@a-vue'
-
-@Component({
-  props: [
-    'value',
-    'selectedConfig',
-    'selectedWidth',
-    'selectableConfig',
-    'selectableWidth'
-  ]
-})
-export default class SearchSelectFormField extends Vue {
-  clickedItem = null
-
-  get hasHeader () {
-    return this.selectedColumns.some(c => !!c.header)
-  }
-
-  get selectedItems () {
-    return this.value
-  }
-
-  get selectableSelectedItems () {
-    return this.value.map(this.selectedConfig.selectedToSelectableItem)
-  }
-
-  get isEmptyText () {
-    return this.selectedConfig.isEmptyText
-  }
-
-  isClicked (selectedItem) {
-    return selectedItem === this.clickedItem
-  }
-
-  get selectedColumns () {
-    return this.selectedConfig.columns
-  }
-
-  get selectableColumns () {
-    return this.selectableConfig.columns
-  }
-
-  addItem (selectableItem) {
-    const selectedItem = this.selectedConfig.newSelectedItem(selectableItem)
-    const selectedItems = [...this.value, selectedItem]
-    if (this.$listeners.add) {
-      this.$emit('add', selectedItems)
-    } else {
-      this.$emit('input', selectedItems)
-    }
-  }
-
-  async removeItem (selectedItem, rowIndex) {
-    const removeDialog = this.selectedConfig.removeDialog(selectedItem)
-    const dialog = {
-      anchor: this.$refs['editItem' + rowIndex], // is array [component]
-      ...removeDialog,
-      yesButton: 'Löschen',
-      yesColor: 'red white--text'
-    }
-
-    const selectedItems = this.value.filter(i => i !== selectedItem)
-    if (this.$listeners.remove) {
-      this.$emit('remove', selectedItems, dialog)
-    } else {
-      this.$emit('input', selectedItems)
-    }
-  }
-
-  get selectedWidthStyle () {
-    if (!this.selectedWidth) {
-      return ''
-    }
-
-    let width = this.selectedWidth
-    if (!isNaN(width)) {
-      width = width + 'px'
-    }
-    return `width: ${width};`
-  }
-}
-</script>
-
-
-<style scoped lang="scss">
-.selectedIcon:deep() {
-  padding-right: .3rem !important;
-}
-
-.selectableIcon:deep() {
-  padding-right: 2rem !important;
-}
-
-.selectedContent:deep() {
-  width: 100%;
-}
-
-.selectableContent:deep() {
-  width: 100%;
-}
-</style>