@bildvitta/quasar-ui-asteroid 2.11.1 → 2.12.3

package/package.json

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

package/src/components/{settings-menu/QasSettingsMenu.stories.js → actions-menu/QasActionsMenu.stories.js}

@@ -1,14 +1,14 @@
-import QasSettingsMenu from './QasSettingsMenu.vue'
+import QasActionsMenu from './QasActionsMenu.vue'
 import { Notify } from 'quasar'
 
 export default {
-  component: QasSettingsMenu,
-  title: 'Components/SettingsMenu',
+  component: QasActionsMenu,
+  title: 'Components/ActionsMenu',
 
   parameters: {
     docs: {
       description: {
-        component: 'Settings menu.'
+        component: 'Actions menu.'
       }
     }
   },
@@ -19,7 +19,15 @@ export default {
     },
 
     list: {
-      description: 'Settings list as an object containing `label`, `icon`, `props` and `handle` click event.'
+      description: 'Actions list as an object containing `label`, `icon`, `props` and `handler` click event.'
+    },
+
+    hideLabel: {
+      description: 'Controls label visibility.'
+    },
+
+    icon: {
+      description: 'Icon button.'
     },
 
     // slots
@@ -41,23 +49,23 @@ export default {
 }
 
 const Template = (args, { argTypes }) => ({
-  components: { QasSettingsMenu },
+  components: { QasActionsMenu },
   props: Object.keys(argTypes),
   template:
-    '<qas-settings-menu v-bind="$props" />'
+    '<qas-actions-menu v-bind="$props" />'
 })
 
 export const Default = Template.bind({})
 Default.args = {
   block: {
-    handle: () => Notify.create('Block clicked!'),
+    handler: () => Notify.create('Block clicked!'),
     icon: 'o_locked',
     label: 'Block'
   },
 
   list: {
     delete: {
-      handle: () => Notify.create('Delete clicked!'),
+      handler: () => Notify.create('Delete clicked!'),
       icon: 'o_delete',
       label: 'Delete'
     }

package/src/components/{settings-menu/QasSettingsMenu.vue → actions-menu/QasActionsMenu.vue}

@@ -1,7 +1,7 @@
 <template>
-  <qas-btn class="qas-settings-menu" color="primary" v-bind="$attrs" hide-mobile-label icon="o_settings" :label="label" outline v-on="$listeners">
-    <q-menu class="qas-settings-menu__menu">
-      <q-list class="qas-settings-menu__list" separator>
+  <qas-btn class="qas-actions-menu" color="primary" v-bind="$attrs" hide-mobile-label :icon="icon" :label="labelValue" outline v-on="$listeners">
+    <q-menu class="qas-actions-menu__menu">
+      <q-list class="qas-actions-menu__list" separator>
         <slot v-for="(item, key) in list" :item="item" :name="key">
           <q-item :key="key" class="text-bold text-primary" clickable v-bind="item.props" @click="onClick(item)">
             <q-item-section>
@@ -21,6 +21,8 @@
 import QasBtn from '../btn/QasBtn'
 
 export default {
+  name: 'QasActionsMenu',
+
   components: {
     QasBtn
   },
@@ -34,23 +36,37 @@ export default {
     list: {
       default: () => ({}),
       type: Object
+    },
+
+    hideLabel: {
+      type: Boolean
+    },
+
+    icon: {
+      default: 'o_settings',
+      type: String
     }
   },
 
   methods: {
     onClick (item) {
-      // TODO: Alterar para "handler".
-      if (typeof item.handle === 'function') {
-        const { handle, ...filtered } = item
-        item.handle(filtered)
+      if (typeof item.handler === 'function') {
+        const { handler, ...filtered } = item
+        item.handler(filtered)
       }
     }
+  },
+
+  computed: {
+    labelValue () {
+      return this.hideLabel ? '' : this.label
+    }
   }
 }
 </script>
 
 <style lang="scss">
-.qas-settings-menu {
+.qas-actions-menu {
   &__list {
     width: 265px;
     z-index: 1;

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/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]) {

package/src/index.js

@@ -1,5 +1,6 @@
 import { version } from '../package.json'
 
+import QasActionsMenu from './components/actions-menu/QasActionsMenu'
 import QasAppBar from './components/app-bar/QasAppBar'
 import QasAppMenu from './components/app-menu/QasAppMenu'
 import QasAppsMenu from './components/apps-menu/QasAppsMenu'
@@ -37,7 +38,6 @@ import QasResizer from './components/resizer/QasResizer'
 import QasSearchBox from './components/search-box/QasSearchBox'
 import QasSelect from './components/select/QasSelect'
 import QasSelectList from './components/select-list/QasSelectList'
-import QasSettingsMenu from './components/settings-menu/QasSettingsMenu'
 import QasSignaturePad from './components/signature-pad/QasSignaturePad'
 import QasSignatureUploader from './components/signature-uploader/QasSignatureUploader'
 import QasSingleView from './components/single-view/QasSingleView'
@@ -73,6 +73,7 @@ export {
   NotifyError,
   NotifySuccess,
 
+  QasActionsMenu,
   QasAppBar,
   QasAppMenu,
   QasAppsMenu,
@@ -110,7 +111,6 @@ export {
   QasSearchBox,
   QasSelect,
   QasSelectList,
-  QasSettingsMenu,
   QasSignaturePad,
   QasSignatureUploader,
   QasSingleView,
@@ -132,6 +132,7 @@ export default {
   NotifyError,
   NotifySuccess,
 
+  QasActionsMenu,
   QasAppBar,
   QasAppMenu,
   QasAppsMenu,
@@ -169,7 +170,6 @@ export default {
   QasSearchBox,
   QasSelect,
   QasSelectList,
-  QasSettingsMenu,
   QasSignaturePad,
   QasSignatureUploader,
   QasSingleView,
@@ -190,6 +190,7 @@ export default {
       success: NotifySuccess
     }
 
+    Vue.component('QasActionsMenu', QasActionsMenu)
     Vue.component('QasAppBar', QasAppBar)
     Vue.component('QasAppMenu', QasAppMenu)
     Vue.component('QasAppsMenu', QasAppsMenu)
@@ -227,7 +228,6 @@ export default {
     Vue.component('QasSearchBox', QasSearchBox)
     Vue.component('QasSelect', QasSelect)
     Vue.component('QasSelectList', QasSelectList)
-    Vue.component('QasSettingsMenu', QasSettingsMenu)
     Vue.component('QasSignaturePad', QasSignaturePad)
     Vue.component('QasSignatureUploader', QasSignatureUploader)
     Vue.component('QasSingleView', QasSingleView)