@afeefa/vue-app 0.0.121 → 0.0.122

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

@@ -1 +1 @@
-0.0.121
+0.0.122

package/package.json

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

package/src/components/ASearchSelect.vue

@@ -2,12 +2,13 @@
   <div :class="['a-search-select', widthClass]">
     <div
       class="activator"
-      style="width: max-content;"
       @click="open"
     >
       <slot
         v-if="!autoOpen"
         name="activator"
+        :open="open"
+        :close="close"
       >
         <a-icon class="contextButton">
           $dotsHorizontalIcon
@@ -15,6 +16,12 @@
       </slot>
     </div>
 
+    <v-overlay
+      :value="isOpen"
+      :z-index="299"
+      :opacity="0"
+    />
+
     <div :class="panelCssClass">
       <div
         v-if="isOpen"
@@ -24,7 +31,7 @@
         <div class="background elevation-6" />
 
         <search-select-filters
-          v-if="filtersInitialized"
+          v-if="filtersInitialized && showFilters"
           :filters="filters"
           :count="count"
         >
@@ -32,6 +39,9 @@
             name="filters"
             :filters="filters"
             :count="count"
+            :onSearchInputKey="{
+              'keydown': searchFilterKeyDown
+            }"
           />
         </search-select-filters>
 
@@ -39,7 +49,7 @@
           absolute
           top
           left
-          class="loadingIndicator"
+          :class="['loadingIndicator', {showFilters}]"
           :isLoading="isLoading"
         />
       </div>
@@ -48,21 +58,23 @@
     <div :class="listCssClass">
       <search-select-list
         v-if="isOpen"
+        ref="list"
         :listAction="listAction"
         :q="q"
         :selectedItems="selectedItems"
         :events="false"
         :history="false"
         :filterSource="filterSource"
-        :loadOnlyIfKeyword="_loadOnlyIfKeyword"
+        :loadOnlyIfKeyword="loadOnlyIfKeyword"
         :filters.sync="filters"
         :count.sync="count"
         :isLoading.sync="isLoading"
         :style="cwm_widthStyle"
+        @onLoad="onLoad"
+        @enter="selectItem"
+        @backtab="setFocusToSearchInput"
       >
         <template #header>
-          <div />
-
           <slot name="header" />
         </template>
 
@@ -101,9 +113,13 @@ import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
   props: [
     'listAction',
     'q',
-    'width',
-    'loadOnlyIfKeyword',
     {
+      diffXControls: '-1rem',
+      diffYControls: '-1rem',
+      getSearchInput: {
+        default: () => () => {}
+      },
+      loadOnlyIfKeyword: false,
       autoOpen: false,
       closeOnSelect: true,
       selectedItems: []
@@ -123,6 +139,7 @@ export default class ASearchSelect extends Mixins(ComponentWidthMixin, UsesPosit
   isLoading = false
   filters = []
   count = 0
+  showFilters = false
 
   mounted () {
     if (this.autoOpen) {
@@ -173,10 +190,6 @@ export default class ASearchSelect extends Mixins(ComponentWidthMixin, UsesPosit
     return container.querySelector('.' + this.listCssClass)
   }
 
-  get _loadOnlyIfKeyword () {
-    return this.loadOnlyIfKeyword === undefined || this.loadOnlyIfKeyword
-  }
-
   positionize () {
     const position = new PositionConfig()
       .setAnchor(this, '.activator')
@@ -186,7 +199,7 @@ export default class ASearchSelect extends Mixins(ComponentWidthMixin, UsesPosit
       )
       .anchorTop().targetTop()
       .anchorLeft().targetLeft()
-      .diffX('-1rem').diffY('-1rem')
+      .diffX(this.diffXControls).diffY(this.diffYControls)
       .onPosition(this.onListPositionChanged)
 
     this.urp_registerPositionWatcher(position)
@@ -216,6 +229,10 @@ export default class ASearchSelect extends Mixins(ComponentWidthMixin, UsesPosit
   }
 
   open () {
+    this.showFilters = false
+
+    this.$emit('beforeOpen')
+
     window.addEventListener('mousedown', this.onClickOutside)
 
     const container = this.getContainer()
@@ -253,6 +270,13 @@ export default class ASearchSelect extends Mixins(ComponentWidthMixin, UsesPosit
     this.$emit('close')
   }
 
+  selectItem (model) {
+    if (this.closeOnSelect) {
+      this.close()
+    }
+    this.$emit('select', model)
+  }
+
   selectHandler (model) {
     return event => {
       if (this.closeOnSelect) {
@@ -266,6 +290,7 @@ export default class ASearchSelect extends Mixins(ComponentWidthMixin, UsesPosit
 
   coe_cancelOnEsc () {
     this.close()
+    return false // stop esc propagation
   }
 
   onClickOutside (e) {
@@ -300,12 +325,42 @@ export default class ASearchSelect extends Mixins(ComponentWidthMixin, UsesPosit
     const controls = this.popUp.querySelector('.controls')
     const list = this.listPopUp.querySelector('.searchSelectList')
     const padding = '.5rem'
+    const vPadding = this.showFilters ? '.5rem' : '0px'
 
     const top = Math.min(0, list.offsetTop - controls.offsetTop)
     background.style.left = `calc(0px - ${padding})`
-    background.style.top = `calc(${top}px - ${padding})`
+    background.style.top = `calc(${top}px - ${vPadding})`
     background.style.width = `calc(${list.offsetWidth}px + 2 * ${padding})`
-    background.style.height = `calc(${controls.clientHeight}px + ${list.clientHeight}px + 3 * ${padding})`
+    background.style.height = `calc(${controls.clientHeight}px + ${list.clientHeight}px + 2 * ${padding} + ${vPadding})`
+  }
+
+  onLoad ({models, meta}) {
+    this.showFilters = meta.used_filters.page_size < meta.count_all
+    if (!this.showFilters) {
+      this.setFocusToList()
+    }
+  }
+
+  setFocusToList () {
+    this.$refs.list.setFocus()
+  }
+
+  setFocusToSearchInput () {
+    const searchInput = this.getSearchInput()
+    if (searchInput) {
+      searchInput.setFocus(true)
+    }
+  }
+
+  setWidth (width) {
+    this.cwm_width_ = width
+  }
+
+  searchFilterKeyDown (event) {
+    if (['Tab', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
+      this.setFocusToList()
+      event.preventDefault()
+    }
   }
 }
 </script>
@@ -315,16 +370,23 @@ export default class ASearchSelect extends Mixins(ComponentWidthMixin, UsesPosit
 .background {
   background: white;
   position: absolute;
-  z-index: -1;
+  z-index: 300;
 }
 
 .controls {
   width: 400px;
   position: absolute;
-  z-index: 300;
+  z-index: 301;
   display: block;
+
   padding: 0 .5rem;
 
+  > .searchSelectFilters {
+    padding: .5rem 0;
+    position: relative;
+    z-index: 302;
+  }
+
   :deep(.a-row) {
     overflow: unset;
   }
@@ -344,6 +406,7 @@ export default class ASearchSelect extends Mixins(ComponentWidthMixin, UsesPosit
     &:not(.selected) {
       cursor: pointer;
     }
+
     &.selected {
       pointer-events: none;
     }
@@ -351,7 +414,13 @@ export default class ASearchSelect extends Mixins(ComponentWidthMixin, UsesPosit
 }
 
 .loadingIndicator {
-  margin: -.5rem;
+  z-index: 303;
+  margin: 0 -.5rem;
   width: calc(100% + 1rem);
+  transition: none;
+
+  &.showFilters {
+    margin-top: -.5rem;
+  }
 }
 </style>

package/src/components/ATableRow.vue

@@ -46,6 +46,7 @@ export default class ATableRow extends Vue {
   > * {
     padding: .15rem;
     padding-right: 1.5rem;
+
     &:last-child {
       padding-right: .1rem;
     }
@@ -54,8 +55,10 @@ export default class ATableRow extends Vue {
 
   &.border {
     border-bottom: 1px solid #E5E5E5;
+
     > * {
       padding: .4rem 1.5rem .4rem .4rem;
+
       &:last-child {
         padding-right: .4rem;
       }
@@ -70,6 +73,10 @@ export default class ATableRow extends Vue {
     background: #F4F4F4;
   }
 
+  &.active {
+    background: #EEEEFF;
+  }
+
   &:last-child {
     border: none;
   }

package/src/components/ATextField.vue

@@ -153,8 +153,8 @@ export default class ATextField extends Mixins(ComponentWidthMixin) {
     this.setFocus()
   }
 
-  setFocus () {
-    const focus = this.focus || false
+  setFocus (force = false) {
+    const focus = this.focus || force // set focus if this.focus or else if forced from outside
     if (focus) {
       // if run in a v-dialog, the dialog background would
       // steal the focus without requestAnimationFrame
@@ -165,8 +165,8 @@ export default class ATextField extends Mixins(ComponentWidthMixin) {
   }
 
   get validationRules () {
-    if (this.$attrs.rules) {
-      return this.$attrs.rules
+    if (this.rules) {
+      return this.rules
     }
     const label = this.$attrs.label
     return (this.validator && this.validator.getRules(label)) || []

package/src/components/form/EditForm.vue

@@ -1,5 +1,6 @@
 <template>
   <v-form
+    ref="form"
     v-model="valid"
     autocomplete="off"
     @submit.prevent
@@ -33,7 +34,6 @@ export default class EditForm extends Vue {
   lastJson = null
   forcedUnchange = false
 
-
   created () {
     this.reset()
   }
@@ -94,8 +94,8 @@ export default class EditForm extends Vue {
     if (this.forcedUnchange) {
       return false
     }
-    // console.log(this.json)
     // console.log(this.lastJson)
+    // console.log(this.json)
     return this.json !== this.lastJson
   }
 

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

@@ -1,42 +1,70 @@
 <template>
-  <div>
-    <a-search-select
-      :listConfig="listConfig"
-      :q="q"
-      v-on="$listeners"
-    >
-      <template #activator>
-        <slot name="activator" />
-      </template>
-
-      <template #filters="{filters, count}">
-        <slot
-          name="filters"
-          :filters="filters"
-          :count="count"
+  <a-search-select
+    ref="select"
+    :listAction="listAction"
+    :selectedItems="selectedItems"
+    :getSearchInput="() => $refs.searchInput"
+    diffXControls="-.5rem"
+    diffYControls="-.5rem"
+    @select="itemSelected"
+    @close="focusInput"
+    @beforeOpen="calculateSelectorSize"
+  >
+    <template #activator="{open}">
+      <a-text-field
+        ref="input"
+        v-model="inputModel"
+        readonly
+        :label="label"
+        :rules="validationRules"
+        placeholder="Mausklick oder Space-Taste zum Auswählen"
+        @keydown.space.prevent="open"
+        @keydown.down.prevent="open"
+        @keydown.enter.prevent="open"
+      />
+    </template>
+
+    <template #filters="{onSearchInputKey}">
+      <a-row gap="4">
+        <list-filter-search
+          ref="searchInput"
+          :focus="true"
+          tabindex="1"
+          maxWidth="100%"
+          :label="'Suche ' + label"
+          v-on="onSearchInputKey"
         />
-      </template>
 
-      <template #row="{ model, on }">
-        <slot
-          name="row"
-          :model="model"
-          :on="on"
+        <list-filter-page
+          :has="{page_size: false, page_number: true}"
+          :totalVisible="0"
         />
-      </template>
-    </a-search-select>
-
-    <v-input
-      ref="input"
-      v-model="model[name]"
-      :rules="validationRules"
-    />
-  </div>
+      </a-row>
+    </template>
+
+    <template #row="{ model, on }">
+      <v-icon
+        :color="model.getIcon().color"
+        size="1.5rem"
+        class="mr-2"
+        v-on="on"
+        v-text="model.getIcon().icon"
+      />
+
+      <div
+        style="width:100%;"
+        v-on="on"
+      >
+        {{ model.getTitle() }}
+      </div>
+    </template>
+  </a-search-select>
 </template>
 
 <script>
 import { Component, Mixins } from '@a-vue'
 import { FormFieldMixin } from '../FormFieldMixin'
+import { ListAction } from '@a-vue/api-resources/ApiActions'
 
 @Component({
   props: ['value', 'q', 'listConfig']
@@ -44,8 +72,43 @@ import { FormFieldMixin } from '../FormFieldMixin'
 export default class FormFieldSearchSelect extends Mixins(FormFieldMixin) {
   mounted () {
     if (this.validator) {
-      this.$refs.input.validate(true)
+      this.$refs.input.validate()
     }
   }
+
+  get inputModel () {
+    return (this.model[this.name] && this.model[this.name].getTitle()) || null
+  }
+
+  calculateSelectorSize () {
+    const input = this.$refs.input.$el
+    const inputWidth = input.offsetWidth
+    this.$refs.select.setWidth(`calc(${inputWidth}px + 1rem)`)
+  }
+
+  get selectedItems () {
+    return [this.model[this.name]].filter(a => a)
+  }
+
+  get listAction () {
+    return ListAction.fromRequest(this.field.getOptionsRequest())
+  }
+
+  itemSelected (model) {
+    this.model[this.name] = model
+    this.$emit('select', model)
+  }
+
+  focusInput () {
+    this.$refs.input.setFocus(true)
+  }
 }
 </script>
+
+
+<style lang="scss" scoped>
+.selectedItem,
+:deep(.a-table-row) {
+  cursor: pointer;
+}
+</style>

package/src/components/list/ListViewMixin.js

@@ -1,5 +1,6 @@
 import { Component, Vue, Watch } from '@a-vue'
 import { ListAction } from '@a-vue/api-resources/ApiActions'
+import { sleep } from '@a-vue/utils/timeout'
 import { ListViewModel } from '@afeefa/api-resources-client'
 
 import { CurrentRouteFilterSource } from './CurrentRouteFilterSource'
@@ -10,10 +11,10 @@ import { FilterSourceType } from './FilterSourceType'
     'models', 'meta', // given, if already loaded
     'listAction',
     'filterHistoryKey',
-    'loadOnlyIfKeyword',
     'checkBeforeLoad',
     {
       filterSource: FilterSourceType.QUERY_STRING,
+      loadOnlyIfKeyword: false,
       events: true,
       history: true
     }
@@ -75,6 +76,8 @@ export class ListViewMixin extends Vue {
         models: this.models_,
         meta: this.meta_
       })
+
+      this._listLoaded()
     } else {
       this.load()
     }
@@ -96,6 +99,9 @@ export class ListViewMixin extends Vue {
   _filtersInitialized () {
   }
 
+  _listLoaded () {
+  }
+
   filtersChanged () {
     this.load()
   }
@@ -116,10 +122,6 @@ export class ListViewMixin extends Vue {
     return this.meta_.count_search || 0
   }
 
-  get _loadOnlyIfKeyword () {
-    return this.loadOnlyIfKeyword
-  }
-
   async load () {
     if (this.checkBeforeLoad) {
       const canLoad = await this.checkBeforeLoad()
@@ -131,7 +133,7 @@ export class ListViewMixin extends Vue {
       }
     }
 
-    if (this._loadOnlyIfKeyword && !this.filters.q.value) {
+    if (this.loadOnlyIfKeyword && !this.filters.q.value) {
       this.models_ = []
       this.meta_ = {}
       this.$emit('update:count', 0)
@@ -148,6 +150,8 @@ export class ListViewMixin extends Vue {
       .dispatchGlobalLoadingEvents(this.events)
       .load()
 
+    // await sleep(1)
+
     if (!models) { // error happened
       this.isLoading = false
       this.$emit('update:isLoading', false)
@@ -170,5 +174,7 @@ export class ListViewMixin extends Vue {
       models,
       meta
     })
+
+    this._listLoaded()
   }
 }

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

@@ -1,5 +1,6 @@
 <template>
   <a-text-field
+    ref="input"
     v-model="filter.value"
     :maxWidth="$attrs.maxWidth || maxWidth_"
     :label="label || 'Suche'"
@@ -8,6 +9,7 @@
     clearable
     hide-details
     @keyup.esc="clearValue"
+    v-on="$listeners"
   />
 </template>
 
@@ -27,5 +29,9 @@ export default class ListFilterSearch extends Mixins(ListFilterMixin) {
       this.filter.value = null
     }
   }
+
+  setFocus (force) {
+    this.$refs.input.setFocus(force)
+  }
 }
 </script>

package/src/components/search-select/SearchSelectList.vue

@@ -1,5 +1,14 @@
 <template>
-  <div :class="['searchSelectList', {isLoading}]">
+  <div
+    :class="['searchSelectList', {isLoading}]"
+    tabindex="0"
+    @keydown.down.prevent="keydown"
+    @keydown.up.prevent="keyup"
+    @keydown.enter="keyenter"
+    @keydown.tab.prevent.exact="keyenter"
+    @keydown.space.prevent="keyenter"
+    @keydown.tab.shift.prevent="$emit('backtab')"
+  >
     <template v-if="models_.length">
       <a-table v-bind="$attrs">
         <a-table-header
@@ -10,10 +19,10 @@
         </a-table-header>
 
         <a-table-row
-          v-for="model in models_"
+          v-for="(model, index) in models_"
           :key="model.id"
           small
-          :class="{selected: isSelected(model)}"
+          :class="['row-' + index, {selected: isSelected(model), active: activeModelIndex === index}]"
         >
           <slot
             name="row"
@@ -46,13 +55,15 @@ import { ListViewMixin } from '@a-vue/components/list/ListViewMixin'
   props: ['q', 'selectedItems']
 })
 export default class SearchSelectList extends Mixins(ListViewMixin) {
+  activeModelIndex = -1
+
   get hasHeader () {
     return this.$slots.header && this.$slots.header.length > 1
   }
 
   get showNotFound () {
     if (!this.models_.length && !this.isLoading) {
-      if (this._loadOnlyIfKeyword && !this.filters.q.value) {
+      if (this.loadOnlyIfKeyword && !this.filters.q.value) {
         return false
       }
       return true
@@ -68,11 +79,67 @@ export default class SearchSelectList extends Mixins(ListViewMixin) {
       this.filters.q.value = this.q
     }
   }
+
+  setFocus () {
+    this.$el.focus()
+
+    if (this.models_.length) {
+      this.activeModelIndex = Math.max(0, this.findActiveIndexForSelectedModel())
+    }
+  }
+
+  keydown () {
+    this.activeModelIndex++
+    if (this.activeModelIndex > this.models_.length - 1) {
+      this.activeModelIndex = 0
+    }
+
+    const row = this.$el.querySelector('.row-' + this.activeModelIndex)
+    if (row) {
+      row.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+    }
+  }
+
+  keyup () {
+    this.activeModelIndex--
+    if (this.activeModelIndex < 0) {
+      this.activeModelIndex = this.models_.length - 1
+    }
+
+    const row = this.$el.querySelector('.row-' + this.activeModelIndex)
+    if (row) {
+      row.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+    }
+  }
+
+  keyenter () {
+    const model = this.models_[this.activeModelIndex]
+    if (model) {
+      this.$emit('enter', model)
+    }
+  }
+
+  _listLoaded () {
+    this.activeModelIndex = this.findActiveIndexForSelectedModel()
+  }
+
+  findActiveIndexForSelectedModel () {
+    for (const [index, model] of this.models_.entries()) {
+      if (this.isSelected(model)) {
+        return index
+      }
+    }
+    return -1
+  }
 }
 </script>
 
 
 <style scoped lang="scss">
+.searchSelectList {
+  outline: none;
+}
+
 .isLoading {
   opacity: .6;
 }

package/src-admin/components/FlyingContext.vue

@@ -13,7 +13,7 @@ import { randomCssClass } from '@a-vue/utils/random'
 import { CancelOnEscMixin } from '@a-vue/services/escape/CancelOnEscMixin'
 
 @Component({
-  props: [{show: false}]
+  props: [{show: false}, 'beforeClose']
 })
 export default class FlyingContext extends Mixins(CancelOnEscMixin) {
   isVisible = false
@@ -62,8 +62,15 @@ export default class FlyingContext extends Mixins(CancelOnEscMixin) {
     this.$events.off(FlyingContextEvent.HIDE_ALL, this.onHide)
   }
 
-  onHide () {
+  async onHide () {
     if (this.isVisible) {
+      if (this.beforeClose) {
+        const result = await this.beforeClose()
+        if (!result) {
+          return
+        }
+      }
+
       this.$el.appendChild(this.getContent())
       this.coe_unwatchCancel() // hide context -> do not watch esc any more
       this.isVisible = false

package/src-admin/components/FlyingContextContainer.vue

@@ -45,6 +45,12 @@ export default class FlyingContextContainer extends Vue {
   domChanged () {
     const container = this.getChildrenContainer()
     this.visible = !!container.children.length
+
+    if (this.visible) {
+      document.documentElement.style.overflow = 'hidden'
+    } else {
+      document.documentElement.style.overflow = 'auto'
+    }
   }
 
   hide () {
@@ -58,6 +64,10 @@ export default class FlyingContextContainer extends Vue {
   }
 
   onClickOutside (e) {
+    if (!this.visible) {
+      return
+    }
+
     // check if trigger is clicked
     let parent = e.target
     while (parent) {
@@ -100,8 +110,8 @@ export default class FlyingContextContainer extends Vue {
   }
 
   .v-navigation-drawer__border {
-     background-color: rgba(0, 0, 0, .12);
-     left: 0;
+    background-color: rgba(0, 0, 0, .12);
+    left: 0;
   }
 
   .closeButton {

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

@@ -61,7 +61,6 @@
 
     <a-search-select
       :listAction="selectableConfig.listAction"
-      :loadOnlyIfKeyword="false"
       :selectedItems="selectableSelectedItems"
       :width="selectableWidth"
       @select="addItem"

package/src-admin/styles.scss

@@ -63,6 +63,10 @@
   color: #616161 !important;
 }
 
+.theme--light.v-input--is-focused fieldset {
+  border-color: #1976D2;
+}
+
 .theme--light.v-btn.v-btn--disabled,
 .theme--light.v-btn.v-btn--disabled span,
 .theme--light.v-btn.v-btn--disabled .v-icon,