@bildvitta/quasar-ui-asteroid 3.7.0-beta.1 → 3.7.0-beta.3

package/src/components/dialog/QasDialog.vue

@@ -21,7 +21,7 @@
 
       <footer v-if="!isInfoDialog">
         <slot name="actions">
-          <qas-actions v-bind="actionsProps" :use-equal-width="hasAllActions" :use-full-width="hasSingleAction">
+          <qas-actions v-bind="formattedActionsProps">
             <template v-if="hasOk" #primary>
               <qas-btn v-close-popup="!useForm" class="full-width" variant="primary" v-bind="defaultOk" @click="submitHandler" />
             </template>
@@ -172,6 +172,20 @@ export default {
 
     isInfoDialog () {
       return !this.hasOk && !this.hasCancel
+    },
+
+    formattedActionsProps () {
+      const { useFullWidth, useEqualWidth } = this.actionsProps
+
+      if (useFullWidth || useEqualWidth) {
+        return this.actionsProps
+      }
+
+      return {
+        useFullWidth: this.hasSingleAction,
+        useEqualWidth: this.hasAllActions,
+        ...this.actionsProps
+      }
     }
   },
 

package/src/components/input/QasInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-input ref="input" v-model="model" bottom-slots :error="errorData" v-bind="$attrs" :error-message="errorMessageData" :mask="mask" :outlined="outlined" :unmasked-value="unmaskedValue" @paste="onPaste">
+  <q-input ref="input" v-model="model" bottom-slots :error="errorData" v-bind="$attrs" :error-message="errorMessage" :mask="mask" :outlined="outlined" :unmasked-value="unmaskedValue" @paste="onPaste">
     <template v-for="(_, name) in $slots" #[name]="context">
       <slot :name="name" v-bind="context || {}" />
     </template>
@@ -47,7 +47,6 @@ export default {
   data () {
     return {
       errorData: false,
-      messageErrorData: '',
       mask: ''
     }
   },
@@ -107,14 +106,6 @@ export default {
         this.errorData = value
       },
 
-      immediate: true
-    },
-
-    errorMessage: {
-      handler (value) {
-        this.errorMessageData = value
-      },
-
       immediate: true
     }
   },
@@ -156,7 +147,6 @@ export default {
     handleErrors () {
       if (this.useRemoveErrorOnType && this.error) {
         this.errorData = false
-        this.errorMessageData = ''
       }
     },
 

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

@@ -11,7 +11,7 @@
             <div>
               <div class="flex items-center justify-between q-py-md">
                 <qas-label v-if="!useSingleLabel" :label="getRowLabel(index)" />
-                <qas-actions-menu v-if="hasBlockActions(row)" :list="getActionsList(index, row)" :use-label-on-small-screen="false" />
+                <qas-actions-menu v-if="hasBlockActions(row)" v-bind="actionsMenuProps" :list="getActionsList(index, row)" />
               </div>
 
               <div ref="formGenerator" class="col-12 justify-between q-col-gutter-x-md row">
@@ -24,7 +24,7 @@
                 </slot>
 
                 <div v-if="hasInlineActions(row)" class="flex items-center qas-nested-fields__actions">
-                  <qas-actions-menu :list="getActionsList(index, row)" :use-label-on-small-screen="false" />
+                  <qas-actions-menu v-bind="actionsMenuProps" :list="getActionsList(index, row)" />
                 </div>
               </div>
 

package/src/components/numeric-input/QasNumericInput.vue

@@ -55,7 +55,6 @@ export default {
     },
 
     useNegative: {
-      default: true,
       type: Boolean
     },
 

package/src/components/numeric-input/QasNumericInput.yml

@@ -35,7 +35,7 @@ props:
 
   use-negative:
     desc: Controla se pode ou não números negativos.
-    default: true
+    default: false
     type: Boolean
 
   use-positive:

package/src/components/password-input/QasPasswordInput.vue

@@ -1,7 +1,11 @@
 <template>
-  <qas-input v-model="model" :bottom-slots="hasBottomSlots" v-bind="$attrs" :type="type" use-remove-error-on-type>
+  <qas-input v-model="model" class="qas-password-input" :hide-bottom-space="hideBottomSpace" v-bind="$attrs" :type="type" use-remove-error-on-type>
+    <template #prepend>
+      <q-icon color="grey-8" name="sym_r_lock" />
+    </template>
+
     <template #append>
-      <q-icon class="cursor-pointer" :color="iconColor" :name="icon" @click="toggle" />
+      <qas-btn color="primary" :icon="icon" variant="tertiary" @click="toggle" />
     </template>
 
     <template v-for="(_, name) in $slots" #[name]="context">
@@ -9,7 +13,7 @@
     </template>
 
     <template v-if="hasStrengthChecker" #hint>
-      <qas-password-strength-checker v-bind="strengthCheckerProps" :password="model" />
+      <qas-password-strength-checker v-bind="strengthCheckerProps" :password="model" @update:current-level="updateCurrentLevel" />
     </template>
   </qas-input>
 </template>
@@ -37,18 +41,13 @@ export default {
       type: Boolean
     },
 
-    iconColor: {
-      type: String,
-      default: 'primary'
-    },
-
     modelValue: {
       type: String,
       default: ''
     }
   },
 
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'update:currentLevel'],
 
   data () {
     return {
@@ -72,7 +71,12 @@ export default {
     },
 
     strengthCheckerProps () {
-      const { modelValue, ...props } = this.$props
+      const {
+        modelValue,
+        useStrengthChecker,
+        ...props
+      } = this.$props
+
       return props
     },
 
@@ -86,12 +90,20 @@ export default {
 
     hasStrengthChecker () {
       return this.useStrengthChecker && this.hasBottomSlots
+    },
+
+    hideBottomSpace () {
+      return this.$attrs.error || !!this.model.length
     }
   },
 
   methods: {
     toggle () {
       this.toggleType = !this.toggleType
+    },
+
+    updateCurrentLevel (currentLevel) {
+      this.$emit('update:currentLevel', currentLevel)
     }
   }
 }

package/src/components/password-input/QasPasswordInput.yml

@@ -7,10 +7,11 @@ mixins:
   - '@bildvitta/quasar-ui-asteroid/dist/api/QasInput.json'
   - quasar/dist/api/QInput.json
 props:
-  icon-color:
-    desc: Cor do ícone do input.
-    default: primary
-    type: String
+  current-level:
+    desc: model que tem o valor atual do level.
+    default: 0
+    type: Number
+    model: true
 
   levels:
     desc: Níveis de força da senha, é um objeto de objeto.
@@ -101,3 +102,10 @@ events:
       value:
         desc: Novo valor do v-model
         type: Boolean
+
+  '@update:current-level -> function (level)':
+    desc: Dispara toda vez que o level (score) é atualizado.
+    params:
+      level:
+        desc: Novo valor do v-model:currentLevel
+        type: Boolean

package/src/components/password-strength-checker/QasPasswordStrengthChecker.vue

@@ -1,8 +1,8 @@
 <template>
   <div v-if="length">
     <slot :level="level">
-      <q-linear-progress :color="level.color" :track-color="trackColor" :value="level.progress" />
-      <div class="text-caption" :class="level.textClass">{{ level.label }}</div>
+      <q-linear-progress :color="level.color" rounded :track-color="trackColor" :value="level.progress" />
+      <div class="q-mt-sm text-subtitle2" :class="level.textClass">{{ level.label }}</div>
     </slot>
   </div>
 </template>
@@ -16,18 +16,13 @@ export default {
   mixins: [passwordMixin],
 
   props: {
-    modelValue: {
-      default: false,
-      type: Boolean
-    },
-
     password: {
       default: '',
       type: String
     }
   },
 
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'update:currentLevel'],
 
   computed: {
     length () {
@@ -64,18 +59,12 @@ export default {
   },
 
   watch: {
-    password () {
-      this.emitValue()
-    }
-  },
-
-  created () {
-    this.emitValue()
-  },
+    score: {
+      handler (score) {
+        this.$emit('update:currentLevel', score)
+      },
 
-  methods: {
-    emitValue () {
-      this.$emit('update:modelValue', this.score === 4)
+      immediate: true
     }
   }
 }

package/src/components/password-strength-checker/QasPasswordStrengthChecker.yml

@@ -4,6 +4,12 @@ meta:
   desc: Componente para checar nível de força da senha.
 
 props:
+  current-level:
+    desc: model que tem o valor atual do level.
+    default: 0
+    type: Number
+    model: true
+
   levels:
     desc: Níveis de força da senha, é um objeto de objeto.
     type: [Object, Boolean]
@@ -44,12 +50,6 @@ props:
     desc: Senha para ser usado nas validações.
     type: String
 
-  model-value:
-    desc: Model do componente, retorna se passou ou não na validação de senha.
-    type: Boolean
-    examples: [v-model="value"]
-    model: true
-
   minlength:
     desc: Número mínimo de caracteres.
     default: 8
@@ -95,9 +95,9 @@ slots:
         type: Object
 
 events:
-  '@update:model-value -> function (value)':
-    desc: Dispara toda vez que o model é atualizado, também utilizado para v-model.
+  '@update:current-level -> function (level)':
+    desc: Dispara toda vez que o level (score) é atualizado.
     params:
-      value:
-        desc: Novo valor do v-model
+      level:
+        desc: Novo valor do v-model:currentLevel
         type: Boolean

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

@@ -1,11 +1,17 @@
 <template>
   <qas-box class="q-px-lg q-py-md">
     <q-table ref="table" class="bg-white qas-table-generator text-grey-8" :class="tableClass" v-bind="attributes">
-      <template v-for="(_, name) in $slots" #[name]="context">
-        <slot v-if="hasBodySlot" name="body" :props="context" />
+      <template v-for="(_, name) in slots" #[name]="context">
+        <slot :name="name" v-bind="context" />
+      </template>
 
-        <q-td v-else :key="name">
-          <slot :name="name" v-bind="context || {}" />
+      <template v-for="(fieldName, index) in bodyCellNameSlots" :key="index" #[`body-cell-${fieldName}`]="context">
+        <q-td>
+          <component :is="tdChildComponent" v-bind="getTdChildComponentProps(context.row)">
+            <slot :name="`body-cell-${fieldName}`" v-bind="context || {}">
+              {{ context.row?.[fieldName] }}
+            </slot>
+          </component>
         </q-td>
       </template>
     </q-table>
@@ -26,6 +32,11 @@ export default {
       type: Array
     },
 
+    rowRouteFn: {
+      type: Function,
+      default: undefined
+    },
+
     fields: {
       default: () => ({}),
       type: [Array, Object]
@@ -50,6 +61,10 @@ export default {
     useScrollOnGrab: {
       type: Boolean,
       default: true
+    },
+
+    useExternalLink: {
+      type: Boolean
     }
   },
 
@@ -63,6 +78,36 @@ export default {
   },
 
   computed: {
+    tdChildComponent () {
+      if (this.useExternalLink) return 'a'
+
+      return this.rowRouteFn ? 'router-link' : 'span'
+    },
+
+    bodyCellNameSlots () {
+      if (this.hasBodyCellSlot) return []
+
+      return this.columns.length
+        ? this.columns.map(column => typeof column === 'object' ? column.name : column)
+        : Object.keys(this.fields)
+    },
+
+    slots () {
+      const slots = {}
+
+      for (const slotKey in this.$slots) {
+        if (slotKey.includes('body-cell-')) continue
+
+        slots[slotKey] = this.$slots[slotKey]
+      }
+
+      return slots
+    },
+
+    hasBodyCellSlot () {
+      return !!this.$slots['body-cell']
+    },
+
     attributes () {
       const attributes = {
         columns: this.columnsByFields,
@@ -123,14 +168,6 @@ export default {
       return columns
     },
 
-    hasBodySlot () {
-      return !!this.$slots.body
-    },
-
-    hasTbodySlot () {
-      return !!this.$slots.tbody
-    },
-
     hasFields () {
       return Object.keys(this.fields).length
     },
@@ -164,6 +201,10 @@ export default {
 
     hasScrollOnGrab () {
       return !!Object.keys(this.scrollOnGrab).length
+    },
+
+    isScrolling () {
+      return this.hasScrollOnGrab && this.scrollOnGrab.haveMoved()
     }
   },
 
@@ -223,11 +264,6 @@ export default {
       }
     },
 
-    onRowClick () {
-      if (this.hasScrollOnGrab && this.scrollOnGrab.haveMoved()) return
-      this.$attrs.onRowClick(...arguments)
-    },
-
     setObserver () {
       this.elementToObserve = this.getTableElement()
       this.resizeObserver = new ResizeObserver(entries => {
@@ -239,6 +275,27 @@ export default {
 
     destroyObserver () {
       this.resizeObserver.unobserve(this.elementToObserve)
+    },
+
+    getTdChildComponentProps (row) {
+      if (!this.rowRouteFn) return
+
+      return {
+        class: 'text-no-decoration text-grey-8 flex full-width items-center full-height',
+        [this.useExternalLink ? 'href' : 'to']: this.rowRouteFn(row),
+        onClick: this.onRowClickHandler,
+        ...(this.useExternalLink && { target: '_blank' })
+      }
+    },
+
+    onRowClickHandler (event) {
+      if (this.isScrolling) return event.preventDefault()
+    },
+
+    onRowClick () {
+      if (this.isScrolling) return
+
+      this.$attrs.onRowClick(...arguments)
     }
   }
 }

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

@@ -36,6 +36,16 @@ props:
     default: true
     type: Boolean
 
+  row-route-fn:
+    desc: Usado quando há a necessidade de alteração de rota ao clicar em um item da tabela(a linha passa ser um <a> habilitando a opção de abrir em uma nova aba).
+    type: Function
+    examples: ["() => ({ name: 'UsersList' })"]
+
+  use-external-link:
+    desc: Usado em conjunto com a prop "row-route-fn" quando há a necessidade da rota ser um link externo.
+    default: false
+    type: Boolean
+
 slots:
   body:
     desc: Acesso direto dentro do `tbody`.

package/src/css/components/button.scss

@@ -1,6 +1,7 @@
 .qas-btn {
   $root: &;
 
+  box-shadow: none;
   min-height: 48px !important;
   padding: var(--qas-spacing-xs) var(--qas-spacing-lg) !important;
   text-transform: initial !important;

package/src/css/variables/index.scss

@@ -1,4 +1,5 @@
 @import './button';
+@import './separator';
 @import './shadow';
 @import './spacing';
 @import './typography';

package/src/css/variables/separator.scss

@@ -0,0 +1,2 @@
+$separator-color         : $grey-4;
+$separator-dark-color    : $grey-6;

package/src/mixins/password.js

@@ -37,6 +37,11 @@ const levels = {
 
 export default {
   props: {
+    currentLevel: {
+      default: 0,
+      type: Number
+    },
+
     levels: {
       default: () => levels,
       type: Object

package/src/plugins/delete/Delete.js

@@ -0,0 +1,89 @@
+import { Dialog, NotifySuccess, NotifyError } from 'asteroid'
+import { Loading } from 'quasar'
+import { getAction } from '@bildvitta/store-adapter'
+import { useHistory } from '../../composables'
+
+export default function (config = {}) {
+  const {
+    dialogProps = {},
+    deleteActionParams = {},
+    useAutoDeleteRoute,
+
+    // callbacks
+    onDelete = () => {},
+    onDeleteError = () => {},
+    onDeleteSuccess = () => {},
+    deleteAction
+  } = config
+
+  const { entity, id, url } = deleteActionParams
+
+  const defaultDialogProps = {
+    card: { description: 'Tem certeza que deseja excluir este item?' },
+
+    ok: { label: 'Excluir', onClick: () => destroy.call(this) },
+
+    ...dialogProps
+  }
+
+  const defaultNotifyMessages = {
+    error: 'Não conseguimos excluir as informações. Por favor, tente novamente em alguns minutos.',
+    success: 'Informações excluídas com sucesso.'
+  }
+
+  async function destroy () {
+    Loading.show()
+
+    try {
+      onDelete(true)
+
+      const hasDeleteAction = typeof deleteAction === 'function'
+
+      const payload = { id, url }
+      const destroyActionParams = { entity, key: 'destroy', payload }
+
+      const response = hasDeleteAction
+        ? await deleteAction(payload)
+        : await getAction.call(this, destroyActionParams)
+
+      NotifySuccess(defaultNotifyMessages.success)
+
+      if (useAutoDeleteRoute) {
+        const { destroyRoutes, history } = useHistory()
+
+        // remove todas rotas que possuem o id do item excluído.
+        const routesToBeDeleted = getRoutesToBeDeletedById(history.list)
+        destroyRoutes(routesToBeDeleted)
+      }
+
+      // cria um evento para notificar que o item foi excluído no "window".
+      createDeleteSuccessEvent()
+
+      onDeleteSuccess(response)
+    } catch (error) {
+      onDeleteError(error)
+
+      NotifyError(defaultNotifyMessages.error)
+    } finally {
+      onDelete(false)
+
+      Loading.hide()
+    }
+  }
+
+  function getRoutesToBeDeletedById (routes = []) {
+    return routes.filter(({ params }) => params.id === id)
+  }
+
+  function createDeleteSuccessEvent () {
+    const event = new CustomEvent('delete-success', {
+      bubbles: false,
+      cancelable: false,
+      detail: deleteActionParams
+    })
+
+    window.dispatchEvent(event)
+  }
+
+  Dialog(defaultDialogProps)
+}

package/src/plugins/delete/Delete.yml

@@ -0,0 +1,71 @@
+type: component
+
+meta:
+  desc: Plugin que implementa a action `destroy` do `StoreModule` adicionando comportamento de confirmação antes de excluir, este mesmo plugin é utilizado no componente `QasDelete`.
+
+inject:
+  'this.$qas.delete(config)':
+    params:
+      config:
+        type: Object
+        desc: Objeto de configuração do plugin.
+        params:
+          dialogProps:
+            type: Object
+            desc: Propriedades repassadas para o "QasDialog".
+
+          deleteActionParams:
+            type: Object
+            desc: Propriedades de configuração da action destroy.
+            params:
+              entity:
+                type: String
+                desc: entidade da store.
+                default: ''
+
+              id:
+                type: String
+                desc: Identificador (id, uuid, slug) do item a ser deletado.
+                default: ''
+
+              url:
+                type: String
+                desc: URL do endpoint do item a ser deletado.
+                default: ''
+
+          'onDelete -> function (isDeleting)':
+            type: Function
+            desc: Este callback é chamado quando inicializa a ação de deleção e quando finaliza, independente se der erro ou sucesso.
+            params:
+              isDeleting:
+                type: Boolean
+                desc: Retorna "true" caso esteja ocorrendo a ação de deleção e "false" quando finalizada.
+                default: false
+
+          'onDeleteError -> function (error)':
+            type: Function
+            desc: Este callback é chamado quando a ação de deleção é finalizada com erro.
+            params:
+              error:
+                type: Object
+                desc: Objeto de retorno de erro
+                default: {}
+
+          'onDeleteSuccess -> function (response)':
+            type: Function
+            desc: Este callback é chamado quando a ação de deleção é finalizada com sucesso.
+            params:
+              error:
+                type: Object
+                desc: Objeto de resposta da API
+                default: {}
+
+          'deleteAction -> function (deleteActionParams) || undefined':
+            type: [Function, undefined]
+            desc: Quando utilizado este plugin fora de componentes vue, não temos acesso ao contexto "this", neste caso é necessário passar a action "destroy" que deseja executar, é neste momento que o callback é chamado / utilizado, caso esteja dentro do componente vue, não repasse esse callback.
+            params:
+              error:
+                type: Object
+                desc: Objeto deleteActionParams enviado anteriormente como configuração do plugin Delete.
+                default: {}
+                examples: ["{ ..., deleteAction: params => useUsers.destroy(params) }"]

package/src/plugins/dialog/Dialog.yml

@@ -1,7 +1,7 @@
 type: component
 
 meta:
-  desc: Plugin que implementa o "QNotify" do quasar para notificações de sucesso.
+  desc: Plugin que implementa o `QasDialog`.
 
 inject:
   'this.$qas.dialog(config)':

package/src/plugins/index.js

@@ -1,3 +1,4 @@
+import Delete from './delete/Delete.js'
 import Dialog from './dialog/Dialog.js'
 import Logger from './logger/Logger.js'
 import NotifyError from './notify-error/NotifyError.js'
@@ -5,6 +6,7 @@ import NotifySuccess from './notify-success/NotifySuccess.js'
 import Screen from './screen/Screen.js'
 
 export {
+  Delete,
   Dialog,
   Logger,
   NotifyError,