@bildvitta/quasar-ui-asteroid 3.17.0 → 3.18.0-beta.1

package/src/components/date-time-input/QasDateTimeInput.vue

@@ -1,13 +1,13 @@
 <template>
   <qas-input ref="input" v-bind="attributes" v-model="currentValue" inputmode="numeric" :unmasked-value="false" @blur="validateDateTimeOnBlur" @focus="resetError" @update:model-value="updateModelValue">
     <template #append>
-      <qas-btn v-if="!props.useTimeOnly" color="grey-10" :disable="attrs.readonly" icon="sym_r_calendar_today" variant="tertiary">
+      <qas-btn v-if="!props.useTimeOnly" color="primary" :disable="attrs.readonly" icon="sym_r_calendar_today" variant="tertiary">
         <q-popup-proxy ref="dateProxy" transition-hide="scale" transition-show="scale" v-bind="props.datePopupProxyProps">
           <qas-date v-model="currentValue" v-bind="defaultDateProps" :mask="maskDate" width="290px" @update:model-value="updateModelValue" />
         </q-popup-proxy>
       </qas-btn>
 
-      <qas-btn v-if="!props.useDateOnly" class="q-ml-sm" color="grey-10" :disable="attrs.readonly" icon="sym_r_access_time">
+      <qas-btn v-if="!props.useDateOnly" class="q-ml-sm" color="primary" :disable="attrs.readonly" icon="sym_r_access_time">
         <q-popup-proxy ref="timeProxy" transition-hide="scale" transition-show="scale" v-bind="props.timePopupProxyProps">
           <q-time v-model="currentValue" v-bind="defaultTimeProps" format24h :mask="maskDate" @update:model-value="updateModelValue" />
         </q-popup-proxy>

package/src/components/error-message/QasErrorMessage.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="qas-error-message">
+    {{ props.message }}
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'QasErrorMessage' })
+
+const props = defineProps({
+  message: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<style lang="scss">
+// $
+.qas-error-message {
+  @include set-error-message;
+}
+</style>

package/src/components/error-message/QasErrorMessage.yml

@@ -0,0 +1,9 @@
+type: component
+
+meta:
+  desc: Componente para mensagem de erro como em inputs, radio, checkbox, uploader, etc.
+
+props:
+  message:
+    desc: Mensagem de erro que será exibida.
+    type: String

package/src/components/expansion-item/QasExpansionItem.vue

@@ -36,15 +36,15 @@
       </q-expansion-item>
     </qas-box>
 
-    <div v-if="hasError" class="q-pt-sm qas-expansion-item__error-message text-caption text-negative">
-      {{ props.errorMessage }}
-    </div>
+    <qas-error-message v-if="hasError" :message="props.errorMessage" />
   </div>
 </template>
 
 <script setup>
 import QasBox from '../box/QasBox.vue'
 
+import { baseErrorProps } from '../../composables/private/use-error-message'
+
 import { computed, provide, inject, ref, useAttrs } from 'vue'
 
 defineOptions({
@@ -53,6 +53,8 @@ defineOptions({
 })
 
 const props = defineProps({
+  ...baseErrorProps,
+
   badges: {
     type: Array,
     default: () => []
@@ -66,15 +68,6 @@ const props = defineProps({
     type: Boolean
   },
 
-  error: {
-    type: Boolean
-  },
-
-  errorMessage: {
-    type: String,
-    default: ''
-  },
-
   gridGeneratorProps: {
     type: Object,
     default: () => ({})
@@ -205,12 +198,17 @@ function setShowContent () {
   }
 
   &--error {
-    #{$root}__box {
-      border: 2px solid $negative !important;
+    #{$root}__header {
+      color: $negative;
+
+      .qas-label,
+      .qas-btn {
+        color: $negative !important;
+      }
     }
 
-    #{$root}__error-message {
-      padding-left: 12px; // espaçamento igual ao de erro do quasar.
+    #{$root}__box {
+      border: 1px solid $negative !important;
     }
   }
 

package/src/components/filters/QasFilters.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="qas-filters" :class="filtersClasses">
-    <div v-if="showFilters" class="q-col-gutter-x-md row">
-      <div v-if="showSearch" class="col-12 col-md-6">
+    <div v-if="showFilters" class="row">
+      <div v-if="showSearch" class="col-12" :class="searchContainerClasses">
         <slot :filter="filter" name="search">
           <q-form v-if="useSearch" @submit.prevent="filter()">
             <qas-search-input v-model="internalSearch" :placeholder="searchPlaceholder" :use-search-on-type="useSearchOnType" @clear="clearSearch" @filter="filter()" @update:model-value="onSearch">
@@ -20,10 +20,6 @@
           <pv-filters-button v-if="useFilterButton" ref="filtersButton" v-model="internalFilters" v-bind="filterButtonProps" />
         </slot>
       </div>
-
-      <div class="col-12 col-md-6">
-        <slot name="right-side" />
-      </div>
     </div>
 
     <div v-if="hasChip" class="q-mt-md">
@@ -59,56 +55,60 @@ export default {
   mixins: [contextMixin],
 
   props: {
-    useChip: {
-      default: true,
-      type: Boolean
-    },
-
     entity: {
       required: true,
       type: String
     },
 
-    fieldsProps: {
+    filters: {
       default: () => ({}),
       type: Object
     },
 
-    filters: {
-      default: () => ({}),
-      type: Object
+    listenerQueryKeys: {
+      type: Array,
+      default: () => []
     },
 
-    useFilterButton: {
+    searchPlaceholder: {
+      default: 'Pesquisar...',
+      type: String
+    },
+
+    url: {
+      default: '',
+      type: String
+    },
+
+    useChip: {
       default: true,
       type: Boolean
     },
 
-    useSearch: {
+    useFilterButton: {
       default: true,
       type: Boolean
     },
 
-    useSearchOnType: {
-      default: true,
+    useForceRefetch: {
       type: Boolean
     },
 
-    searchPlaceholder: {
-      default: 'Pesquisar...',
-      type: String
+    useFullContent: {
+      type: Boolean
     },
 
-    url: {
-      default: '',
-      type: String
+    useSpacing: {
+      default: true,
+      type: Boolean
     },
 
-    useForceRefetch: {
+    useSearch: {
+      default: true,
       type: Boolean
     },
 
-    useSpacing: {
+    useSearchOnType: {
       default: true,
       type: Boolean
     },
@@ -116,6 +116,11 @@ export default {
     useUpdateRoute: {
       default: true,
       type: Boolean
+    },
+
+    fieldsProps: {
+      default: () => ({}),
+      type: Object
     }
   },
 
@@ -200,6 +205,10 @@ export default {
       return formattedFieldsProps
     },
 
+    searchContainerClasses () {
+      return { 'col-md-6': !this.useFullContent }
+    },
+
     fields () {
       return getState.call(this, { entity: this.entity, key: 'filters' })
     },
@@ -265,7 +274,13 @@ export default {
   watch: {
     $route (to, from) {
       if (to.name === from.name) {
-        this.fetchFilters()
+        /**
+         * Verifica se alguma chave da query que está no "listenerQueryKeys" mudou,
+         * se sim, faz bate o fetchFilters novamente.
+        */
+        const hasQueryChanged = !!this.listenerQueryKeys.find(queryKey => to.query[queryKey] !== from.query[queryKey])
+
+        this.fetchFilters({ hasQueryChanged })
         this.useUpdateRoute && this.updateValues()
       }
     },
@@ -328,8 +343,14 @@ export default {
       this.filter()
     },
 
-    async fetchFilters () {
-      if (!this.useForceRefetch && (this.hasFields || !this.useFilterButton)) {
+    async fetchFilters ({ hasQueryChanged = false } = {}) {
+      /**
+       * - Verifica se houve mudança na query com base na prop "listenerQueryKeys"
+       * - Verifica se a prop "useForceRefetch" foi passada para fazer o fetch mesmo já contendo dados na store.
+       * - Verifica se tem fields(ou seja, já foi feito o fetch antes), ou se a prop "useFilterButton" foi passada como
+       * "false", não contendo o menu lateral.
+       */
+      if (!hasQueryChanged && !this.useForceRefetch && (this.hasFields || !this.useFilterButton)) {
         return null
       }
 

package/src/components/filters/QasFilters.yml

@@ -29,6 +29,11 @@ props:
     type: Object
     examples: [v-model:filters="filters"]
 
+  listener-query-keys:
+    desc: Chaves da query que serão ouvidas as mudanças de valores, para fazer a busca do "/filters" novamente.
+    default: []
+    type: Array
+
   search-placeholder:
     desc: Placeholder do campo de busca.
     default: Pesquisar...
@@ -52,6 +57,10 @@ props:
     desc: Força refazer o "fetch" mesmo caso já exista dados na store de filters.
     type: Boolean
 
+  use-full-content:
+    desc: Para que o componente ocupe 100%, recomendado para quando precisar utilizar grids.
+    type: Boolean
+
   use-update-route:
     desc: Habilita ou não a atualização da rota com base nos filtros.
     default: true

package/src/components/gallery/QasGallery.vue

@@ -15,7 +15,7 @@
         </div>
       </slot>
 
-      <pv-gallery-carousel-dialog v-model="carouselDialog" v-model:imageIndex="imageIndex" :images="normalizedImages" />
+      <pv-gallery-carousel-dialog v-model="carouselDialog" v-model:image-index="imageIndex" :images="normalizedImages" />
 
       <pv-gallery-delete-dialog v-model="showDeleteDialog" v-bind="deleteGalleryDialogProps" @cancel="resetCurrentModel" @error="onDeleteError" @success="onDeleteSuccess" />
     </div>
@@ -157,9 +157,8 @@ function getActionsMenuProps ({ image, index }) {
 function getGalleryCardProps ({ image, index }) {
   return {
     actionsMenuProps: getActionsMenuProps({ image, index }),
-    card: image,
     imageProps: getImageProps({ image, index }),
-
+    ...image,
     ...props.galleryCardProps
   }
 }

package/src/components/gallery-card/QasGalleryCard.vue

@@ -3,8 +3,8 @@
     <header class="flat items-center no-wrap row" :class="headerClasses">
       <slot name="header">
         <div class="ellipsis q-mr-xs qas-gallery__name text-subtitle1">
-          <slot v-if="props.card.name" name="name">
-            {{ props.card.name }}
+          <slot v-if="props.name" name="name">
+            {{ name }}
           </slot>
         </div>
 
@@ -16,9 +16,15 @@
       </slot>
     </header>
 
-    <div class="qas-gallery-card__image">
+    <div v-if="props.useVideo">
+      <slot name="video">
+        <q-video v-bind="defaultVideoProps" />
+      </slot>
+    </div>
+
+    <div v-else class="qas-gallery-card__image">
       <slot name="image">
-        <q-img class="rounded-borders" height="100%" :src="props.card.url" v-bind="props.imageProps">
+        <q-img class="rounded-borders" height="100%" :src="props.url" v-bind="props.imageProps">
           <template #error>
             <div :class="errorClasses">
               <div class="text-center">
@@ -59,11 +65,6 @@ const props = defineProps({
     default: () => ({})
   },
 
-  card: {
-    type: Object,
-    default: () => ({})
-  },
-
   disable: {
     type: Boolean
   },
@@ -86,6 +87,25 @@ const props = defineProps({
   imageProps: {
     type: Object,
     default: () => ({})
+  },
+
+  name: {
+    type: String,
+    default: ''
+  },
+
+  url: {
+    type: String,
+    default: ''
+  },
+
+  useVideo: {
+    type: Boolean
+  },
+
+  videoProps: {
+    type: Object,
+    default: () => ({})
   }
 })
 
@@ -109,6 +129,7 @@ const errorClasses = [
   'text-subtitle2'
 ]
 
+// computeds
 const classes = computed(() => {
   return {
     'text-grey-6': props.disable
@@ -117,10 +138,10 @@ const classes = computed(() => {
 
 const headerClasses = computed(() => {
   return {
-    'justify-between': props.card.name,
-    'justify-right': !props.card.name,
+    'justify-between': props.name,
+    'justify-right': !props.name,
     'text-grey-10': !props.disable,
-    'q-mb-md': hasActions.value || props.card.name
+    'q-mb-md': hasActions.value || props.name
   }
 })
 
@@ -138,6 +159,16 @@ const defaultActionsMenuProps = computed(() => {
   }
 })
 
+const defaultVideoProps = computed(() => {
+  return {
+    ratio: 16 / 9,
+
+    ...props.videoProps,
+
+    src: props.url
+  }
+})
+
 const hasActionsSlot = computed(() => !!slots.actions)
 const hasActions = computed(() => !!Object.keys(props.actionsMenuProps).length || hasActionsSlot.value)
 const hasGridGenerator = computed(() => !!Object.keys(props.gridGeneratorProps).length)

package/src/components/gallery-card/QasGalleryCard.yml

@@ -19,12 +19,6 @@ props:
     default: ''
     type: String
 
-  card:
-    desc: Informações do card, como name (nome) e url.
-    default: {}
-    type: Object
-    examples: ["{ name: 'meu nome', url: 'minha-url-da-imagem' }"]
-
   disable:
     desc: Propriedade que aplica estilos de desabilitado.
     type: Boolean
@@ -38,6 +32,25 @@ props:
     default: {}
     type: Object
 
+  name:
+    desc: Nome da imagem ou video que servirá como título.
+    default: ''
+    type: String
+
+  url:
+    desc: URL da imagem ou video.
+    default: ''
+    type: String
+
+  use-video:
+    desc: Controla se vai exibir o QVideo no lugar do QImg.
+    type: Boolean
+
+  video-props:
+    desc: Propriedades repassadas para o QVideo.
+    default: {}
+    type: Object
+
 slots:
   actions:
     desc: Slot para ações do cabeçalho.
@@ -59,3 +72,6 @@ slots:
 
   name:
     desc: Slot para acessar o conteúdo do nome, acima da imagem.
+
+  video:
+    desc: Slot para acessar o conteúdo do video (onde fica o QasGridGenerator).

package/src/components/input/QasInput.vue

@@ -1,10 +1,10 @@
 <template>
   <q-input ref="input" v-model="model" :autogrow="isTextarea" bottom-slots :class="classes" :counter="hasCounter" :dense="dense" :error="errorData" v-bind="$attrs" :error-message="errorMessage" :inputmode="defaultInputmode" :label="formattedLabel" :mask="currentMask" no-error-icon :outlined="outlined" :placeholder="placeholder" :unmasked-value="unmaskedValue" @paste="onPaste">
-    <template v-if="icon" #append>
+    <template v-if="icon" #prepend>
       <q-icon :name="icon" size="xs" />
     </template>
 
-    <template v-if="iconRight" #prepend>
+    <template v-if="iconRight" #append>
       <q-icon :name="iconRight" size="xs" />
     </template>
 
@@ -163,7 +163,7 @@ export default {
     },
 
     hasPrepend () {
-      return !!this.$slots.prepend || this.iconRight
+      return !!this.$slots.prepend || this.icon
     }
   },
 

package/src/components/label/QasLabel.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="props.typography" :class="classes">
+  <component :is="props.typography" class="qas-label" :class="classes">
     <slot :label-with-suffix="formattedLabel">{{ formattedLabel }}</slot>
   </component>
 </template>

package/src/components/list-view/QasListView.vue

@@ -22,7 +22,7 @@
           <slot v-if="mx_canShowFetchErrorSlot" name="fetch-error" />
 
           <slot v-else name="empty-results">
-            <qas-empty-result-text />
+            <qas-empty-result-text :text="emptyResultText" />
           </slot>
         </div>
 
@@ -69,6 +69,11 @@ export default {
   },
 
   props: {
+    emptyResultText: {
+      type: String,
+      default: undefined
+    },
+
     filtersProps: {
       default: () => ({}),
       type: Object

package/src/components/list-view/QasListView.yml

@@ -10,6 +10,11 @@ props:
     type: Function
     examples: ['beforeFetch({ payload, resolve, done })']
 
+  empty-result-text:
+    desc: Texto a ser exibido quando a listagem estiver vazia. Caso não seja passado nada, irá utilizar o default do QasEmptyResultText.
+    default: undefined
+    type: String
+
   entity:
     desc: Entidade da store, por exemplo se tiver que trabalhar com modulo de usuários, teremos o model "users" na store, que vai ser nossa "entity".
     required: true

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

@@ -105,7 +105,7 @@ export default {
     },
 
     buttonDestroyProps: {
-      type: Object,
+      type: [Object, Function],
       default: () => {
         return {
           color: 'grey-10',
@@ -310,6 +310,10 @@ export default {
 
     formGeneratorParentClasses () {
       return this.useInlineActions ? 'col-12 justify-between q-col-gutter-x-md row' : 'full-width'
+    },
+
+    isButtonDestroyPropsFunction () {
+      return typeof this.buttonDestroyProps === 'function'
     }
   },
 
@@ -356,6 +360,10 @@ export default {
     getDefaultActionsMenuList (index, row) {
       const list = {}
 
+      const destroyProps = this.isButtonDestroyPropsFunction
+        ? this.buttonDestroyProps({ index, row })
+        : this.buttonDestroyProps
+
       if (this.useDuplicate) {
         list.duplicate = {
           ...this.buttonDuplicateProps,
@@ -365,7 +373,7 @@ export default {
 
       if (this.showDestroyButton) {
         list.destroy = {
-          ...this.buttonDestroyProps,
+          ...destroyProps,
           handler: () => this.destroy(index, row)
         }
       }

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

@@ -5,7 +5,7 @@ meta:
 
 props:
   actions-menu-props:
-    desc: Repassa as propriedades para o componente QasActionsMenu. É possível passar um objeto com as propriedades ou uma função que recebe o 'index', 'row' e 'list' como parâmetro e retorna um objeto com as propriedades.
+    desc: Repassa as propriedades para o componente QasActionsMenu, APENAS quando se utilizar a prop useInlineActions. É possível passar um objeto com as propriedades ou uma função que recebe o 'index', 'row' e 'list' como parâmetro e retorna um objeto com as propriedades.
     default: {}
     type: [Object, Function]
 
@@ -20,10 +20,25 @@ props:
     type: String
 
   button-destroy-props:
-    desc: Props do botão de excluir linha contendo os campos.
+    desc: Props do botão de excluir linha contendo os campos, podendo ser um callback para controlar o comportamento de cada row.
     default: "{ label: 'Excluir', icon: 'sym_r_delete', flat: true, dense: true }"
     debugger: true
-    type: Object
+    params:
+      context:
+        desc: Payload da linha (row) -> index/row.
+        type: Object
+        params:
+          index:
+            desc: Índice da linha.
+            type: Number
+          row:
+            desc: Valores contendo na linha atual.
+            type: Object
+    examples: [
+      "{ label: 'Excluir este item', icon: 'sym_r_delete' }",
+      "({ index, row }) => ({ label: 'Teste', disable: !row.status })"
+    ]
+    type: [Object, Function]
 
   button-duplicate-props:
     desc: Props do botão de duplicar linha contendo os campos.

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

@@ -5,7 +5,7 @@
     </template>
 
     <template #append>
-      <qas-btn color="primary" :icon="icon" variant="tertiary" @click="toggle" />
+      <qas-btn color="primary" :disable="isButtonDisabled" :icon="icon" variant="tertiary" @click="toggle" />
     </template>
 
     <template v-for="(_, name) in $slots" #[name]="context">
@@ -57,7 +57,11 @@ export default {
 
   computed: {
     icon () {
-      return this.toggleType ? 'sym_r_visibility_off' : 'sym_r_visibility'
+      return this.toggleType ? 'sym_r_visibility' : 'sym_r_visibility_off'
+    },
+
+    isButtonDisabled () {
+      return !this.model.length
     },
 
     model: {