@afeefa/vue-app 0.0.204 → 0.0.206

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

@@ -1 +1 @@
-0.0.204
+0.0.206

package/package.json

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

package/src/components/ACheckboxGroup.vue

@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <v-label v-if="$attrs.label">
+      {{ $attrs.label }}
+    </v-label>
+
+    <a-row
+      :vertical="vertical"
+      :gap="vertical ? 0 : 4"
+    >
+      <a-checkbox
+        v-for="option in options_"
+        :key="option.itemValue"
+        :label="option.itemText"
+        :value="isChecked(option.itemValue)"
+        hide-details
+        @input="checked(option.itemValue, $event)"
+      >
+        <template #label>
+          <div v-html="option.itemText" />
+        </template>
+      </a-checkbox>
+    </a-row>
+
+    <div
+      v-if="errorMessages.length"
+      class="mt-1 error--text v-messages"
+    >
+      {{ errorMessages[0] }}
+    </div>
+  </div>
+</template>
+
+
+<script>
+import { Component, Vue, Watch, Inject } from '@a-vue'
+
+@Component({
+  props: ['value', 'options', 'validator', {vertical: false}]
+})
+export default class ACheckboxGroup extends Vue {
+  value_ = []
+  options_ = []
+  errorMessages = []
+  hasError = false
+
+  @Inject({ from: 'form', default: null }) form
+
+  created () {
+    this.form && this.form.register(this)
+    this.value_ = this.value || []
+    this.init()
+  }
+
+  checked (key, value) {
+    if (value) {
+      if (!this.isChecked(key)) {
+        this.value_.push(key)
+      }
+    } else {
+      this.value_ = this.value_.filter(v => v !== key)
+    }
+    this.$emit('input', this.value_)
+    this.validate()
+  }
+
+  isChecked (key) {
+    return this.value_.includes(key)
+  }
+
+  @Watch('options')
+  optionsChanged () {
+    this.init()
+  }
+
+  @Watch('value')
+  valueChanged (value) {
+    this.value_ = value || []
+  }
+
+  async init () {
+    const options = typeof this.options === 'function' ? this.options() : this.options
+
+    if (options instanceof Promise) {
+      this.options_ = await options
+    } else {
+      this.options_ = options
+    }
+
+    this.$nextTick(() => {
+      this.validate()
+    })
+  }
+
+  validate () {
+    this.errorMessages = []
+    if (this.validator) {
+      const rules = this.validator.getRules(this.$attrs.label)
+      for (const rule of rules) {
+        const message = rule(this.value_)
+        if (typeof message === 'string') {
+          this.errorMessages.push(message)
+          break
+        }
+      }
+    }
+
+    this.hasError = !!this.errorMessages.length // VForm will watch the hasError prop
+    return !this.errorMessages.length
+  }
+}
+</script>

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

@@ -0,0 +1,30 @@
+<template>
+  <a-checkbox-group
+    v-model="model[name]"
+    :label="label || name"
+    :options="_options"
+    :validator="validator"
+    v-bind="$attrs"
+    v-on="$listeners"
+  />
+</template>
+
+<script>
+import { Component, Mixins } from '@a-vue'
+import { FormFieldMixin } from '../FormFieldMixin'
+
+@Component
+export default class FormFieldCheckboxGroup extends Mixins(FormFieldMixin) {
+  options = null
+
+  created () {
+    if (this.fieldHasOptionsRequest() || this.fieldHasOptions()) {
+      this.options = this.getSelectOptions()
+    }
+  }
+
+  get _options () {
+    return this.$attrs.options || this.options || []
+  }
+}
+</script>

package/src/components/index.js

@@ -4,6 +4,7 @@ import EditForm from './form/EditForm'
 import EditModal from './form/EditModal'
 import FormFieldCategory from './form/fields/FormFieldCategory'
 import FormFieldCheckbox from './form/fields/FormFieldCheckbox'
+import FormFieldCheckboxGroup from './form/fields/FormFieldCheckboxGroup'
 import FormFieldDate from './form/fields/FormFieldDate'
 import FormFieldRadioGroup from './form/fields/FormFieldRadioGroup'
 import FormFieldRichTextArea from './form/fields/FormFieldRichTextArea'
@@ -26,6 +27,7 @@ Vue.component('FormFieldText', FormFieldText)
 Vue.component('FormFieldTextArea', FormFieldTextArea)
 Vue.component('FormFieldRichTextArea', FormFieldRichTextArea)
 Vue.component('FormFieldRadioGroup', FormFieldRadioGroup)
+Vue.component('FormFieldCheckboxGroup', FormFieldCheckboxGroup)
 Vue.component('FormFieldCategory', FormFieldCategory)
 Vue.component('FormFieldCheckbox', FormFieldCheckbox)
 Vue.component('FormFieldDate', FormFieldDate)

package/src/components/popup-menu/PopupMenuList.vue

@@ -104,19 +104,35 @@ export default class PopupMenuList extends Vue {
     if (!filterTerm) {
       return this.items
     } else {
-      return this.items.filter(item => {
-        // find parent only if it has no children
+      const selectableItems = [] // this list of children is shown instead of the root list in case of max 5 selectable filter results
+
+      const items = this.items.filter(item => {
+        // count parent only if it has no children
         const itemFound = item.title.toLowerCase().includes(filterTerm.toLowerCase())
         if (itemFound && !item.children?.length) {
+          selectableItems.push(item)
           return true
         }
 
-        // find a child
-        const childFound = item.children?.some(item => {
-          return item.title.toLowerCase().includes(filterTerm.toLowerCase())
+        // find all filtered children
+        const filteredChildren = item.children?.filter(item => {
+          if (item.title.toLowerCase().includes(filterTerm.toLowerCase())) {
+            selectableItems.push(item)
+            return true
+          }
+          return false
         })
-        return childFound
+
+        // count parent only if it has min 1 filtered child
+        return filteredChildren?.length || false
       })
+
+      // return the list of children instead the root list
+      if (selectableItems.length <= 5) {
+        return selectableItems
+      }
+
+      return items
     }
   }
 

package/src-admin/components/detail/EditableDetailProperty.vue

@@ -52,9 +52,12 @@
     </template>
 
     <div v-else>
-      <div v-if="labelEmpty">
+      <a-row
+        v-if="labelEmpty"
+        gap="1"
+      >
         <x-icon :color="xColorEmpty" /> {{ labelEmpty }}
-      </div>
+      </a-row>
 
       <a-icon-button
         v-if="buttonCreate"