@bildvitta/quasar-ui-asteroid 3.4.0 → 3.5.0-beta.1

package/src/components/nested-fields/QasNestedFields.vue

@@ -11,11 +11,7 @@
             <div>
               <div class="flex items-center justify-between q-py-xs">
                 <qas-label v-if="!useSingleLabel" :label="getRowLabel(index)" />
-
-                <div v-if="hasBlockActions(row)" class="q-gutter-x-sm">
-                  <qas-btn v-if="useDuplicate" v-bind="buttonDuplicateProps" @click="add(row)" />
-                  <qas-btn v-if="showDestroyBtn" v-bind="buttonDestroyProps" @click="destroy(index, row)" />
-                </div>
+                <qas-actions-menu v-if="hasBlockActions(row)" :list="getActionsList(index, row)" :use-label-on-small-screen="false" />
               </div>
 
               <div ref="formGenerator" class="col-12 justify-between q-col-gutter-x-md row">
@@ -28,12 +24,7 @@
                 </slot>
 
                 <div v-if="hasInlineActions(row)" class="flex items-center qas-nested-fields__actions">
-                  <div class="col-auto">
-                    <qas-btn v-if="useDuplicate" color="primary" flat icon="o_content_copy" round @click="add(row)" />
-                  </div>
-                  <div class="col-auto">
-                    <qas-btn v-if="showDestroyBtn" color="negative" flat icon="o_cancel" round @click="destroy(index, row)" />
-                  </div>
+                  <qas-actions-menu :list="getActionsList(index, row)" :use-label-on-small-screen="false" />
                 </div>
               </div>
 
@@ -47,18 +38,22 @@
 
       <div v-if="useAdd" class="q-mt-md">
         <slot :add="add" name="add-input">
-          <div v-if="useInlineActions" class="cursor-pointer items-center q-col-gutter-x-md q-mt-md row" @click="add()">
+          <div v-if="showAddFirstInputButton" class="text-left">
+            <qas-btn class="q-px-sm" color="dark" flat @click="add()">{{ addFirstInputLabel }}</qas-btn>
+          </div>
+
+          <div v-else-if="useInlineActions" class="cursor-pointer items-center q-col-gutter-x-md q-mt-md row" @click="add()">
             <div class="col">
               <qas-input class="disabled no-pointer-events" hide-bottom-space :label="addInputLabel" outlined @focus="add()" />
             </div>
 
             <div class="col-auto">
-              <qas-btn color="green" flat icon="o_add_circle_outline" round />
+              <qas-btn color="dark" flat icon="o_add_circle_outline" round />
             </div>
           </div>
 
-          <div v-else class="q-mt-lg">
-            <qas-btn class="full-width q-py-md" icon="o_add" outline @click="add()">{{ addInputLabel }}</qas-btn>
+          <div v-else class="text-left">
+            <qas-btn class="q-px-sm" color="dark" flat icon="o_add" @click="add()">{{ addInputLabel }}</qas-btn>
           </div>
         </slot>
       </div>
@@ -67,6 +62,7 @@
 </template>
 
 <script>
+import QasActionsMenu from '../actions-menu/QasActionsMenu.vue'
 import QasBtn from '../btn/QasBtn.vue'
 import QasFormGenerator from '../form-generator/QasFormGenerator.vue'
 import QasInput from '../input/QasInput.vue'
@@ -80,27 +76,38 @@ export default {
   name: 'QasNestedFields',
 
   components: {
+    QasActionsMenu,
     QasBtn,
     QasFormGenerator,
     QasInput,
     QasLabel,
 
-    // vue
+    // Vue
     TransitionGroup
   },
 
   props: {
+    actionsMenuProps: {
+      type: Object,
+      default: () => ({})
+    },
+
+    addFirstInputLabel: {
+      type: String,
+      default: 'Clique aqui para adicionar'
+    },
+
     addInputLabel: {
       type: String,
-      default: 'Inserir novo campo'
+      default: 'Adicionar'
     },
 
     buttonDestroyProps: {
       type: Object,
       default: () => {
         return {
-          label: 'Remover',
-          icon: 'o_cancel',
+          label: 'Excluir',
+          icon: 'o_delete',
           flat: true,
           dense: true
         }
@@ -190,7 +197,8 @@ export default {
     },
 
     useDestroyAlways: {
-      type: Boolean
+      type: Boolean,
+      default: undefined
     },
 
     useDuplicate: {
@@ -198,6 +206,11 @@ export default {
       default: true
     },
 
+    useFirstInputButton: {
+      type: Boolean,
+      default: true
+    },
+
     useIndexLabel: {
       type: Boolean
     },
@@ -215,6 +228,11 @@ export default {
       default: true
     },
 
+    useStartsEmpty: {
+      default: true,
+      type: Boolean
+    },
+
     modelValue: {
       type: Array,
       default: () => []
@@ -225,25 +243,35 @@ export default {
 
   data () {
     return {
-      nested: []
+      nested: [],
+      hasDestroyAlways: true
     }
   },
 
   computed: {
-    fieldLabel () {
-      return this.field?.label
+    children () {
+      return this.field?.children
     },
 
-    fieldName () {
-      return this.field?.name
+    componentTag () {
+      return this.useAnimation ? 'transition-group' : 'div'
     },
 
-    children () {
-      return this.field?.children
+    componentProps () {
+      if (!this.useAnimation) return {}
+
+      return {
+        tag: 'div',
+        enterActiveClass: 'animated slideInDown'
+      }
     },
 
-    showDestroyBtn () {
-      return this.nested.filter(item => !item[this.destroyKey]).length > 1 || this.useDestroyAlways
+    fieldLabel () {
+      return this.field?.label
+    },
+
+    fieldName () {
+      return this.field?.name
     },
 
     formClasses () {
@@ -253,21 +281,16 @@ export default {
       }
     },
 
-    transformedErrors () {
-      return Array.isArray(this.errors) ? this.errors : constructObject(this.fieldName, this.errors)
+    showDestroyBtn () {
+      return this.nested.filter(item => !item[this.destroyKey]).length > 1 || this.useDestroyAlways
     },
 
-    componentTag () {
-      return this.useAnimation ? 'transition-group' : 'div'
+    transformedErrors () {
+      return Array.isArray(this.errors) ? this.errors : constructObject(this.fieldName, this.errors)
     },
 
-    componentProps () {
-      if (!this.useAnimation) return {}
-
-      return {
-        tag: 'div',
-        enterActiveClass: 'animated slideInDown'
-      }
+    showAddFirstInputButton () {
+      return this.useFirstInputButton && !this.nested.length
     }
   },
 
@@ -282,13 +305,49 @@ export default {
 
     rowObject: {
       handler () {
-        if (!this.nested.length) return this.setDefaultNestedValue()
+        this.setDefaultNestedValue()
+      },
+      immediate: true
+    },
+
+    useDestroyAlways: {
+      handler (value) {
+        this.hasDestroyAlways = value ?? this.useStartsEmpty
       },
       immediate: true
     }
   },
 
   methods: {
+    getActionsList (index, row) {
+      const list = {}
+
+      if (this.useDuplicate) {
+        list.duplicate = {
+          ...this.buttonDuplicateProps,
+          handler: () => this.add(row)
+        }
+      }
+
+      if (this.showDestroyBtn) {
+        list.destroy = {
+          ...this.buttonDestroyProps,
+          handler: () => this.destroy(index, row)
+        }
+      }
+
+      for (const key in this.actionsMenuProps.list) {
+        const { handler, ...content } = this.actionsMenuProps.list[key] || {}
+
+        list[key] = {
+          handler: payload => handler?.({ payload, row, index }),
+          ...content
+        }
+      }
+
+      return list
+    },
+
     add (row = {}) {
       const payload = { ...this.rowObject, ...row }
       const hasIdentifierKey = payload[this.identifierItemKey]
@@ -345,6 +404,7 @@ export default {
     },
 
     setDefaultNestedValue () {
+      if (this.nested.length || this.useStartsEmpty) return
       this.nested.splice(0, 0, { ...this.rowObject })
     },
 

package/src/components/nested-fields/QasNestedFields.yml

@@ -4,14 +4,24 @@ meta:
   desc: Componente para gerar dinamicamente campos nested.
 
 props:
+  actions-menu-props:
+    desc: Repassa as propriedades para o componente QasActionsMenu.
+    default: {}
+    type: Object
+
+  add-first-input-label:
+    desc: Rótulo do input para adicionar o primeiro campo.
+    default: Clique aqui para adicionar
+    type: String
+
   add-input-label:
     desc: Rótulo do input de adicionar novos campos.
-    default: Inserir novo campo
-    type: Boolean
+    default: Adicionar
+    type: String
 
   button-destroy-props:
     desc: Props do botão de excluir linha contendo os campos.
-    default: "{ label: 'Remover', o_cancel, flat: true, dense: true }"
+    default: "{ label: 'Excluir', icon: 'o_delete', flat: true, dense: true }"
     debugger: true
     type: Object
 
@@ -76,17 +86,17 @@ props:
     model: true
 
   row-label:
-    desc: Rótulo entre cada linha (row).
+    desc: Rótulo entre cada linha.
     type: String
 
   row-object:
-    desc: Objeto contendo valores iniciais do model de cada linha (row).
+    desc: Objeto contendo valores iniciais do model de cada linha.
     default: {}
     type: Object
     examples: ["{ name: '', cities: [] }"]
 
   use-add:
-    desc: Controla quando vai ter seção de "adicionar" novas rows (linhas).
+    desc: Controla quando vai ter seção de "adicionar" novas linhas.
     default: true
     type: Boolean
 
@@ -96,7 +106,7 @@ props:
     type: Boolean
 
   use-destroy-always:
-    desc: Controla o botão de remover em todas linhas (row), incluindo a primeira.
+    desc: Controla o botão de remover em todas linhas, incluindo a primeira.
     type: Boolean
 
   use-duplicate:
@@ -104,20 +114,30 @@ props:
     default: true
     type: Boolean
 
+  use-first-input-button:
+    desc: Controla se vai ter um botão diferente para adicionar o primeiro campo.
+    default: true
+    type: Boolean
+
   use-index-label:
     desc: Se tiver "rowLabel" esta prop controla se cada label da linha vai ter o index como sufixo.
     type: Boolean
 
   use-inline-actions:
-    desc: Controla o comportamento referente aos estilos das ações de duplicar/adicionar/remover
+    desc: Controla o comportamento referente aos estilos das ações de duplicar/adicionar/remover.
     type: Boolean
 
   use-single-label:
-    desc: Se o valor for "true", então vai exibir apenas uma label referente a todas linhas (row) e não uma por linha
+    desc: Exibe apenas uma label referente a todas linhas, e não uma por linha.
     type: Boolean
 
   use-remove-on-destroy:
-    desc: Se o valor for "true" o valor do model será removido senão será adicionar uma flag como `destroyed` por exemplo.
+    desc: O valor do model será removido senão será adicionar uma flag como `destroyed` por exemplo.
+    default: true
+    type: Boolean
+
+  use-starts-empty:
+    desc: O componente iniciará sem nenhuma linha.
     default: true
     type: Boolean
 

package/src/components/option-group/QasOptionGroup.vue

@@ -0,0 +1,54 @@
+<template>
+  <q-option-group v-model="model" :options="options" v-bind="attributes">
+    <template v-for="(_, name) in $slots" #[name]="context">
+      <slot :name="name" v-bind="context || {}" />
+    </template>
+  </q-option-group>
+</template>
+
+<script>
+export default {
+  name: 'QasOptionGroup',
+
+  inheritAttrs: false,
+
+  props: {
+    options: {
+      default: () => [],
+      type: Array
+    },
+
+    type: {
+      type: String,
+      default: 'radio',
+      validator: value => ['radio', 'checkbox', 'toggle'].includes(value)
+    },
+
+    modelValue: {
+      default: '',
+      type: [String, Number, Array, Boolean]
+    }
+  },
+
+  emits: ['update:modelValue'],
+
+  computed: {
+    attributes () {
+      return {
+        ...this.$attrs,
+        inline: !this.$qas.screen.isSmall
+      }
+    },
+
+    model: {
+      get () {
+        return this.modelValue
+      },
+
+      set (value) {
+        return this.$emit('update:modelValue', value)
+      }
+    }
+  }
+}
+</script>

package/src/components/option-group/QasOptionGroup.yml

@@ -0,0 +1,30 @@
+type: component
+
+meta:
+  desc: Componente wrapper do [QOptionGroup](https://quasar.dev/vue-components/option-group#introduction).
+
+props:
+  options:
+    desc: Opções contendo objetos com chaves "label" e "value".
+    default: []
+    type: Array
+
+  model-value:
+    desc: Model do componente, usado para v-model.
+    default: []
+    type: [String, Number, Array, Boolean]
+    examples: [v-model"value"]
+    model: true
+
+  type:
+    desc: Tipo de componente, podendo ser radio, checkbox ou toggle.
+    default: 'radio'
+    type: String
+
+events:
+  '@update:model-value -> function (value)':
+    desc: Dispara toda vez que o model é atualizado, também utilizado para v-model.
+    params:
+      value:
+        desc: Novo valor do v-model
+        type: String

package/src/components/pagination/QasPagination.vue

@@ -0,0 +1,27 @@
+<template>
+  <q-pagination v-bind="defaultProps" />
+</template>
+
+<script>
+export default {
+  name: 'QasPagination',
+
+  computed: {
+    defaultProps () {
+      const { modelValue, ...attributes } = this.$attrs
+
+      return {
+        activeColor: 'primary',
+        activeDesign: 'flat',
+        boundaryNumbers: true,
+        color: 'grey-7',
+        directionLinks: true,
+        maxPages: modelValue < 3 ? 3 : 6,
+        modelValue,
+
+        ...attributes
+      }
+    }
+  }
+}
+</script>

package/src/components/pagination/QasPagination.yml

@@ -0,0 +1,4 @@
+type: component
+
+meta:
+  desc: Componente para paginação de listagens.

package/src/components/select/QasSelect.vue

@@ -68,10 +68,6 @@ export default {
     valueKey: {
       default: '',
       type: String
-    },
-
-    useSearch: {
-      type: Boolean
     }
   },
 
@@ -112,7 +108,7 @@ export default {
     },
 
     isSearchable () {
-      return this.useSearch || this.useLazyLoading
+      return this.hasFuse || this.useLazyLoading
     },
 
     defaultOptions () {
@@ -127,6 +123,17 @@ export default {
       return this.mx_isFetching || this.$attrs.loading
     },
 
+    hasFuse () {
+      /*
+      * quantidade de option que precisa ter para o fuse funcionar automaticamente
+      * sem necessidade de passar prop manualmente
+      */
+      const autoFuseQuantity = 10
+      const hasAutoFuseSearch = this.options.length >= autoFuseQuantity && !this.useLazyLoading
+
+      return hasAutoFuseSearch
+    },
+
     model: {
       get () {
         return this.modelValue
@@ -147,7 +154,7 @@ export default {
       handler () {
         if (this.useLazyLoading && this.mx_hasFilteredOptions) return
 
-        if (this.fuse) this.setFuse()
+        if (this.fuse || this.hasFuse) this.setFuse()
 
         this.mx_filteredOptions = this.defaultOptions
       },
@@ -163,7 +170,7 @@ export default {
 
   methods: {
     setFuse () {
-      if (this.useSearch) {
+      if (this.hasFuse) {
         this.fuse = new Fuse(this.defaultOptions, this.defaultFuseOptions)
       }
     },
@@ -173,7 +180,7 @@ export default {
         await this.mx_filterOptionsByStore(value)
       }
 
-      if (!this.useLazyLoading && this.useSearch) {
+      if (!this.useLazyLoading && this.hasFuse) {
         this.filterOptionsByFuse(value)
       }
 

package/src/components/select/QasSelect.yml

@@ -71,10 +71,6 @@ props:
     type: String
     examples: [value-key="uuid"]
 
-  use-search:
-    desc: Controla se vai ou não ter campo de busca no select.
-    type: Boolean
-
   use-lazy-loading:
     desc: Controla a busca pela store "fetchFieldOptions".
     default: false

package/src/components/table-generator/QasTableGenerator.vue

@@ -1,5 +1,5 @@
 <template>
-  <qas-box class="q-mb-xl q-px-lg q-py-md">
+  <qas-box class="q-px-lg q-py-md">
     <q-table ref="table" class="bg-transparent qas-table-generator" :class="tableClass" v-bind="attributes">
       <template v-for="(_, name) in $slots" #[name]="context">
         <slot v-if="hasBodySlot" name="body" :props="context" />
@@ -70,7 +70,10 @@ export default {
         flat: true,
         hideBottom: true,
         pagination: { rowsPerPage: 0 },
-        rowKey: this.rowKey
+        rowKey: this.rowKey,
+
+        // Eventos.
+        onRowClick: this.$attrs.onRowClick && this.onRowClick
       }
 
       return attributes
@@ -220,6 +223,11 @@ export default {
       }
     },
 
+    onRowClick () {
+      if (this.hasScrollOnGrab && this.scrollOnGrab.haveMoved()) return
+      this.$attrs.onRowClick(...arguments)
+    },
+
     setObserver () {
       this.elementToObserve = this.getTableElement()
       this.resizeObserver = new ResizeObserver(entries => {

package/src/components/table-generator/QasTableGenerator.yml

@@ -44,3 +44,17 @@ slots:
         desc: Payload da linha da tabela.
         default: {}
         type: Object
+
+events:
+  '@row-click -> function(event, row, index)':
+    desc: Dispara ao clicar em uma linha. Não funciona usando slots personalizados (body, row e item).
+    params:
+      event:
+        desc: Evento do click.
+        type: Event
+      row:
+        desc: Payload da linha da tabela.
+        type: Object
+      index:
+        desc: Índice da linha.
+        type: Number

package/src/components/text-truncate/QasTextTruncate.vue

@@ -4,7 +4,7 @@
       <div ref="truncate" :class="truncateTextClass">
         <slot>{{ text }}</slot>
       </div>
-      <div v-if="isTruncated" class="cursor-pointer text-primary" @click="toggleDialog">{{ seeMoreLabel }}</div>
+      <div v-if="isTruncated" class="cursor-pointer text-primary" @click.stop="toggleDialog">{{ seeMoreLabel }}</div>
     </div>
 
     <qas-dialog v-model="showDialog" v-bind="defaultDialogProps">

package/src/css/components/item.scss

@@ -1,6 +1,10 @@
 .q-item {
   font-size: 16px;
 
+  &:not(.disabled) {
+    font-weight: 600;
+  }
+
   &.q-router-link--active {
     background-color: transparent !important;
     font-weight: 600;

package/src/css/plugins/index.scss

@@ -0,0 +1 @@
+@import './notify';

package/src/css/plugins/notify.scss

@@ -0,0 +1,40 @@
+.q-notification {
+  margin-top: 80px;
+
+  &__content {
+    .q-icon {
+      margin-right: var(--qas-spacing-sm);
+    }
+  }
+
+  &__actions {
+    align-self: start;
+    padding-top: var(--qas-spacing-xs);
+
+    .q-btn {
+      color: white;
+      height: var(--qas-spacing-md);
+      min-height: auto;
+      min-width: auto;
+      padding: 0;
+      text-align: center;
+      text-transform: none;
+      width: var(--qas-spacing-md);
+
+      &__content {
+        height: var(--qas-spacing-md);
+
+        span {
+          align-self: center;
+          height: var(--qas-spacing-md);
+          line-height: 0.9;
+          width: var(--qas-spacing-md);
+        }
+      }
+    }
+  }
+
+  @media (max-width: $breakpoint-xs) {
+    margin-top: 40px;
+  }
+}

package/src/css/variables/button.scss

@@ -1,3 +1,3 @@
-$button-font-size: 0.875rem;
+$button-font-size: 1rem;
 $button-line-height: 1.5rem;
-$button-font-weight: 500;
+$button-font-weight: 600;