@afeefa/vue-app 0.0.297 → 0.0.299

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

@@ -1 +1 @@
-0.0.297
+0.0.299

package/package.json

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

package/src/components/index.js

@@ -18,6 +18,7 @@ import NestedEditForm from './form/NestedEditForm'
 import ListFilterDate from './list/filters/ListFilterDate'
 import ListFilterPage from './list/filters/ListFilterPage'
 import ListFilterSearch from './list/filters/ListFilterSearch'
+import ListFilterSearch2 from './list/filters/ListFilterSearch2'
 import ListFilterSearchSelect from './list/filters/ListFilterSearchSelect'
 import ListFilterSelect from './list/filters/ListFilterSelect'
 
@@ -38,6 +39,7 @@ Vue.component('FormFieldSelect', FormFieldSelect)
 Vue.component('FormFieldSelect2', FormFieldSelect2)
 Vue.component('ListFilterPage', ListFilterPage)
 Vue.component('ListFilterSearch', ListFilterSearch)
+Vue.component('ListFilterSearch2', ListFilterSearch2)
 Vue.component('ListFilterSelect', ListFilterSelect)
 Vue.component('ListFilterSearchSelect', ListFilterSearchSelect)
 Vue.component('ListFilterDate', ListFilterDate)

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

@@ -0,0 +1,96 @@
+<template>
+  <a-row gap="4">
+    <a-text-field
+      ref="input"
+      v-model="filter.value"
+      :maxWidth="$attrs.maxWidth || maxWidth_"
+      :label="label_"
+      :debounce="500"
+      v-bind="$attrs"
+      clearable
+      hide-details
+      @keyup.esc="clearValue"
+      v-on="$listeners"
+    />
+
+    <a-radio-group
+      v-model="filters.qfield.value"
+      :options="qFieldOptions"
+      row
+      hide-details
+    />
+  </a-row>
+</template>
+
+
+<script>
+import { Component, Mixins } from '@a-vue'
+import { ListFilterMixin } from '../ListFilterMixin'
+
+@Component({
+  props: [{
+    translateOption: {
+      default: () => title => title
+    }
+  }]
+})
+export default class ListFilterSearch2 extends Mixins(ListFilterMixin) {
+  name_ = 'q'
+  maxWidth_ = 200
+
+  clearValue (e) {
+    if (this.filter.value) {
+      e.stopPropagation()
+      this.filter.value = null
+    }
+  }
+
+  setFocus (force) {
+    this.$refs.input.setFocus(force)
+  }
+
+  hasQFieldOptions () {
+    return this.filters.qfield && this.filters.qfield.hasOptions()
+  }
+
+  get qFieldOptions () {
+    return this.filters.qfield.options.map(o => ({
+      ...o,
+      itemText: this.translateOption(o.title),
+      itemValue: o.value
+    }))
+  }
+
+  get label_ () {
+    const label = this.label || 'Suche'
+
+    if (this.hasQFieldOptions() && !this.filters.qfield.hasDefaultValueSet()) {
+      const selected = this.qFieldOptions.filter(o => o.value === this.filters.qfield.value)[0]
+      if (selected) {
+        const qFieldTitle = this.translateOption(selected.title)
+        return `${label} (${qFieldTitle})`
+      }
+    }
+
+    return label
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+::v-deep() {
+  .v-text-field .v-label {
+    max-width: unset;
+  }
+
+  .v-radio {
+    margin-right: 14px !important;
+    margin-top: -4px;
+  }
+
+  .v-input--selection-controls__input {
+    margin-right: 3px;
+  }
+}
+</style>