@bildvitta/quasar-ui-asteroid 2.12.0 → 2.12.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
-  "version": "2.12.0",
+  "version": "2.12.4",
   "description": "",
   "main": "./src/index.js",
   "scripts": {

package/src/components/actions-menu/QasActionsMenu.vue

@@ -59,7 +59,7 @@ export default {
 
   computed: {
     labelValue () {
-      return !this.hideLabel && this.label
+      return this.hideLabel ? '' : this.label
     }
   }
 }

package/src/components/app-menu/QasAppMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <q-drawer v-model="model" content-class="bg-primary-contrast" :mini="miniMode" :width="230" @before-hide="beforeHide">
-    <q-list class="text-primary" padding>
+    <q-list class="text-primary">
       <div v-for="(header, index) in items" :key="index">
         <q-expansion-item v-if="hasChildren(header)" :active-class="activeSecondaryItemClasses" :default-opened="shouldExpand(header)" expand-icon="o_keyboard_arrow_down" expand-separator :icon="header.icon" :label="header.label" :to="header.to">
           <q-item v-for="(item, itemIndex) in header.children" :key="itemIndex" v-ripple :active-class="activeItemClasses" clickable :to="item.to">

package/src/components/decimal-input/QasDecimalInput.vue

@@ -1,5 +1,7 @@
 <template>
-  <q-input v-bind="$attrs" fill-mask="0" :mask="mask" reverse-fill-mask :value="inputValue" v-on="events" @input="input" />
+  <div>
+    <q-input v-bind="$attrs" fill-mask="0" :mask="mask" reverse-fill-mask :value="inputValue" v-on="events" @input="input" />
+  </div>
 </template>
 
 <script>

package/src/components/filters/QasFilters.vue

@@ -41,7 +41,7 @@
     </div>
 
     <div v-if="badges && hasActiveFilters" class="q-mt-md">
-      <q-chip v-for="(filterItem, key) in activeFilters" :key="key" color="grey-4" dense removable size="md" text-color="grey-8" @remove="removeFilter(filterItem)">{{ filterItem.label }} = "{{ filterItem.value }}"</q-chip>
+      <q-chip v-for="(filterItem, key) in activeFilters" :key="key" color="grey-4" dense removable size="md" text-color="grey-8" @remove="removeFilter(filterItem)">{{ filterItem.label }} = "{{ getChipValue(filterItem.value) }}"</q-chip>
     </div>
 
     <slot :context="context" :filter="filter" :filters="activeFilters" :removeFilter="removeFilter" />
@@ -122,7 +122,7 @@ export default {
         const hasField = fields.includes(key)
 
         if (hasField) {
-          const value = humanize(this.fields[key], filters[key])
+          const value = humanize(this.fields[key], this.normalizeValues(filters[key], this.fields[key]?.multiple))
           const { label, name } = this.fields[key]
 
           activeFilters[key] = { label, name, value }
@@ -188,7 +188,7 @@ export default {
 
   created () {
     this.fetchFilters()
-    this.updateValues()
+    this.watchOnceFields()
   },
 
   methods: {
@@ -252,6 +252,10 @@ export default {
       this.$router.push({ query })
     },
 
+    getChipValue (value) {
+      return Array.isArray(value) ? value.join(', ') : value
+    },
+
     removeFilter ({ name }) {
       const query = { ...this.$route.query }
 
@@ -266,8 +270,23 @@ export default {
       this.search = search || ''
 
       for (const key in filters) {
-        this.$set(this.filters, key, parseValue(filters[key]))
+        this.$set(this.filters, key, parseValue(this.normalizeValues(filters[key], this.fields[key]?.multiple)))
       }
+    },
+
+    normalizeValues (value, isMultiple) {
+      if (Array.isArray(value)) return value
+
+      return isMultiple ? [value] : value
+    },
+
+    watchOnceFields () {
+      const watchOnce = this.$watch('fields', values => {
+        if (Object.keys(values).length) {
+          this.updateValues()
+          watchOnce()
+        }
+      })
     }
   }
 }

package/src/helpers/filters.js

@@ -96,6 +96,8 @@ function handleMasks (value) {
 
 // Labels
 function humanize (field = {}, value) {
+  if (!value) return value
+  
   const mappedMasks = handleMasks(value)
 
   if (mappedMasks[field.mask]) {