@bildvitta/quasar-ui-asteroid 3.17.0-beta.8 → 3.17.0

package/src/components/board-generator/QasBoardGenerator.yml

@@ -4,6 +4,46 @@ meta:
   desc: Componente usado para board de colunas.
 
 props:
+  before-update-position:
+    desc: função onde será executada antes do dialog de confirmação ou atualização da posição.
+    type: function
+    default: undefined
+    params:
+      event:
+        desc: Evento do "onAdd" do sortablejs.
+        type: Object
+        default: {}
+
+      cancel:
+        desc: Cancela o drag and drop.
+        type: Function
+        default: undefined
+
+      getItem:
+        desc: Recupera o item atual a ser dropado.
+        type: Function
+        default: {}
+
+      openConfirmDialog:
+        desc: Chama o dialog de confirmação para salvar nova posição.
+        type: Function
+        default: undefined
+
+      update:
+        desc: Salva nova posição.
+        type: Function
+        default: undefined
+
+      getColumnTo:
+        desc: Recupera o payload da coluna que o item será adicionado.
+        type: Function
+        default: {}
+
+      getColumnFrom:
+        desc: Recupera o payload da coluna que o item saiu.
+        type: Function
+        default: {}
+
   column-id-key:
     desc: chave que será o id usado para ser o identificador da coluna.
     type: String
@@ -20,19 +60,33 @@ props:
     required: true
 
   column-width:
-    desc: Largura da coluna
+    desc: Largura da coluna.
     type: String
     default: 288
 
+  confirm-dialog-props:
+    desc: Propriedade repassada ao `QasDialog` para confirmar um drag and drop. Caso não seja passado, não é usado dialog de confirmação. As ações de confirmar e cancelar são feitas por padrão no componente.
+    type: Object
+    default: {}
+
+  header-box-props:
+    desc: Propriedades repassadas ao `QasBox` do header.
+    type: Object
+    default: {}
+
   headers:
     desc: Lista de itens sendo cada um o header de cada coluna.
     default: []
     type: Array
-  
+
   height:
-    desc: Altura do container do board. Caso não seja passado um height, o calculo é feito para ocupar a maior altura possível da página.
+    desc: Altura do container do board. Caso não seja passado um height, o cálculo é feito para ocupar a maior altura possível da página.
     type: String
-  
+
+  item-id-key:
+    desc: Identificador único do item a ser movido, sendo que será usado nas requisições realizadas pelo drop.
+    type: String
+
   lazy-loading-fields-keys:
     desc: Chaves dos campos que são lazy loading para o tratamento de merge das options.
     type: Array
@@ -44,7 +98,7 @@ props:
     default: 12
 
   use-mark-raw:
-    desc: Define se os valores dos itens das colunas irá ser atribuido utilizando o "markRaw", onde somente a primeira camada do model será reativa.(https://vuejs.org/api/reactivity-advanced.html#markraw)
+    desc: Define se os valores dos itens das colunas irão ser atribuídos utilizando o "markRaw", onde somente a primeira camada do model será reativa. (https://vuejs.org/api/reactivity-advanced.html#markraw)
     type: Boolean
     default: true
 
@@ -55,6 +109,30 @@ props:
     examples: [v-model:results="resultsColumns"]
     model: true
 
+  sortable-config:
+    desc: Configuração passada para a instância do SortableJS.
+    type: Object
+    default: "{ animation: 500, swapThreshold: 1, delay: 50, delayOnTouchOnly: true, emptyInsertThreshold: 0 }"
+    debugger: true
+
+  use-drag-and-drop-x:
+    desc: Controla se irá ter drag and drop no eixo X (entre colunas).
+    type: Boolean
+
+  use-drag-and-drop-y:
+    desc: Controla se irá ter drag and drop no eixo Y (mesma coluna, utilizado para ordenação de itens).
+    type: Boolean
+
+  update-position-url:
+    desc: URL usada para realizar o PATCH do drag and drop.
+    type: String
+    default: ''
+
+  update-position-params:
+    desc: Parâmetros customizados caso precise passar para a API de PATCH.
+    type: Object
+    default: {}
+
 slots:
   header-column:
     desc: Slot para acessar o card do header de cada coluna.
@@ -63,9 +141,9 @@ slots:
         desc: Fields referente à coluna atual do template.
         type: Object
         default: {}
-      
+
       header:
-        desc: Informações de cada item do header que foi fornecido através da prop "headers"
+        desc: Informações de cada item do header que foi fornecido através da prop "headers".
         type: Object
         default: {}
 
@@ -76,7 +154,7 @@ slots:
         desc: Fields referente à coluna atual do template.
         type: Object
         default: {}
-      
+
       item:
         desc: Informações de cada item da coluna que foi buscado através da API.
         type: Object
@@ -98,14 +176,14 @@ events:
         type: Object
 
       header:
-        desc: header da coluna atual.
+        desc: Header da coluna atual.
         type: Object
 
   '@update:fetch-column-error -> function(error)':
     desc: Dispara quando o "fetchColumn" cai em uma exceção.
     params:
       error:
-        desc: Retorna todos os dados "cru" respondido na exceção do fetch.
+        desc: Retorna todos os dados "crus" respondidos na exceção do fetch.
         type: Object
 
   '@update:fetch-columns-success -> function()':
@@ -115,12 +193,29 @@ events:
     desc: Dispara quando algum "fetchColumn" cai em uma exceção.
     params:
       error:
-        desc: Retorna todos os dados "cru" respondido na exceção do fetch.
+        desc: Retorna todos os dados "crus" respondidos na exceção do fetch.
+        type: Object
+
+  '@update-success -> function()':
+    desc: Dispara quando o PATCH do drag and drop é com sucesso.
+    params:
+      data:
+        desc: Retorno da API.
+        type: Object
+
+  '@update-error -> function()':
+    desc: Dispara quando o PATCH do drag and drop cai em uma exceção.
+    params:
+      error:
+        desc: Retorno da API.
         type: Object
 
 methods:
+  'cancelDrop: () => void':
+    desc: Cancela o drop e volta o item para coluna original.
+
   'fetchColumns: () => void':
     desc: Busca todas colunas com base nos headers fornecidos.
 
   'fetchColumn: (header) => void':
-    desc: Busca uma coluna especifica com base no header fornecido.
+    desc: Busca uma coluna específica com base no header fornecido.

package/src/components/card/QasCard.vue

@@ -2,14 +2,14 @@
   <div class="qas-card">
     <qas-box class="rounded-borders-right" v-bind="boxProps">
       <q-card class="column full-height overflow-hidden shadow-0">
-        <div class="items-center justify-between row">
-          <component :is="titleComponent" class="text-h4 text-no-decoration" :class="titleClasses" :to="route">
+        <div class="full-width items-center justify-between no-wrap row">
+          <component :is="titleComponent" class="ellipsis text-h5 text-no-decoration" :class="titleClasses" :to="route">
             <slot name="title">
               {{ props.title }}
             </slot>
           </component>
 
-          <qas-actions-menu v-if="hasActions" :list="props.actionsMenuProps" :use-label="false" />
+          <qas-actions-menu v-if="hasActions" v-bind="formattedActionsMenuProps" />
         </div>
 
         <div class="q-my-sm qas-card__content">
@@ -66,8 +66,10 @@ const props = defineProps({
   }
 })
 
+// consts
 const isInsideBox = inject('isBox', false)
 
+// computeds
 const boxProps = computed(() => {
   return {
     outlined: isInsideBox,
@@ -89,7 +91,7 @@ const titleClasses = computed(() => {
   }
 })
 
-const titleComponent = computed(() => hasRoute.value ? 'router-link' : 'div')
+const titleComponent = computed(() => hasRoute.value ? 'router-link' : 'h5')
 
 const style = computed(() => {
   if (!props.statusColor) return
@@ -106,6 +108,13 @@ const slots = useSlots()
 const hasFooterSlot = computed(() => !!slots.footer)
 
 const hasFooter = computed(() => hasFooterSlot.value || hasExpansion.value)
+
+const formattedActionsMenuProps = computed(() => {
+  return {
+    ...props.actionsMenuProps,
+    useLabel: false
+  }
+})
 </script>
 
 <style lang="scss">

package/src/components/chart-view/QasChartView.vue

@@ -46,8 +46,9 @@ import zoomPlugin from 'chartjs-plugin-zoom'
 import chartDataLabels from 'chartjs-plugin-datalabels'
 
 // Outras importações
-import { extend } from 'quasar'
 import { filterListByHandle } from '../../helpers'
+
+import { extend, is } from 'quasar'
 import { getAction } from '@bildvitta/store-adapter'
 
 const ChartTypes = {
@@ -131,6 +132,11 @@ export default {
       type: String
     },
 
+    urlQueryList: {
+      default: () => (['company']),
+      type: Array
+    },
+
     useBox: {
       type: Boolean,
       default: true
@@ -332,6 +338,10 @@ export default {
           ...(this.useBox && { ...this.boxProps })
         }
       }
+    },
+
+    queryFromURL () {
+      return this.getQueryFromURL(this.$route.query)
     }
   },
 
@@ -342,6 +352,10 @@ export default {
 
     isFetching (value) {
       this.$emit('update:fetching', value)
+    },
+
+    $route (to, from) {
+      this.onRouteChange(to, from)
     }
   },
 
@@ -350,16 +364,17 @@ export default {
     this.handleFetchData()
   },
 
-  unmounted () {
+  beforeUnmount () {
     this.unregisterChartJS()
   },
 
   methods: {
     handleFetchData () {
       const hasBeforeFetch = typeof this.beforeFetch === 'function'
+
       const payload = {
         url: this.url,
-        filters: this.filters
+        filters: { ...this.filters, ...this.queryFromURL }
       }
 
       if (hasBeforeFetch && !this.cancelBeforeFetch) {
@@ -435,6 +450,44 @@ export default {
         ...this.defaultChartItems,
         ...this.elementsChartItems[this.type]
       )
+    },
+
+    onRouteChange (to, from) {
+      const { query } = to
+
+      const isSameRoute = to.name === from.name
+      const hasQueryInURLQueryList = this.urlQueryList.some(urlQuery => query[urlQuery])
+
+      /**
+       * feito com função para evitar um deepEqual desnecessário, uma vez que
+       * caso "isSameRoute" seja falso, ou "hasQueryInURLQueryList" seja falso,
+       * não é necessário fazer a comparação.
+       */
+      const hasQueryChanged = () => !is.deepEqual(this.queryFromURL, this.getQueryFromURL(from.query))
+
+      /**
+       * Verifica se a rota atual é a mesma, se há uma query na URL que corresponde à queryList,
+       * e se a query correspondente à queryList foi alterada. Se todas essas condições forem
+       * verdadeiras, faz a requisição de dados.
+       */
+      if (isSameRoute && hasQueryInURLQueryList && hasQueryChanged()) this.handleFetchData()
+    },
+
+    /**
+     * "urlQueryList" é uma lista de query que o componente deve pegar da URL.
+     */
+    getQueryFromURL (query = {}) {
+      const newQuery = {}
+
+      this.urlQueryList.forEach(urlQuery => {
+        const queryValue = query[urlQuery]
+
+        if (queryValue) {
+          newQuery[urlQuery] = queryValue
+        }
+      })
+
+      return newQuery
     }
   }
 }

package/src/components/chart-view/QasChartView.yml

@@ -70,6 +70,12 @@ props:
     desc: Envia como parâmetro para a action "fetchList" do modulo correspondente a "entity".
     type: String
 
+  url-query-list:
+    desc: Lista de query que serão recuperadas da URL e enviadas como parâmetro para a action "fetchList" do modulo correspondente a "entity".
+    type: Array
+    default:
+      - company
+
   use-box:
     desc: Controla se o componente vai ter o QasBox englobando ou não.
     default: true

package/src/components/checkbox/QasCheckbox.vue

@@ -1,27 +1,38 @@
 <template>
-  <div>
+  <div class="qas-checkbox">
     <!-- Single -->
-    <q-checkbox v-if="isSingle" v-model="model" v-bind="attrs" dense>
+    <q-checkbox v-if="isSingle" v-model="model" v-bind="singleAttributes" dense>
       <slot />
     </q-checkbox>
 
     <!-- Group -->
-    <div v-else :class="classes">
-      <div v-for="(option, index) in props.options" :key="index">
-        <!-- Com children -->
-        <q-checkbox v-if="hasChildren(option)" :class="getCheckboxClass(option)" dense :label="option.label" :model-value="getModelValue(index)" @update:model-value="updateCheckbox($event, option, index)" />
+    <div v-else>
+      <div v-if="hasCheckboxLabel" class="q-mb-sm text-body1" :class="checkboxLabelClasses">
+        {{ formattedLabel }}
+      </div>
+
+      <div :class="classes">
+        <div v-for="(option, index) in props.options" :key="index">
+          <!-- Com children -->
+          <q-checkbox v-if="hasChildren(option)" :class="getCheckboxClass(option)" dense :indeterminate-value="false" :label="option.label" :model-value="getModelValue(index)" @update:model-value="updateCheckbox($event, option, index)" />
 
-        <!-- Com children -->
-        <q-option-group v-if="hasChildren(option)" class="q-ml-xs q-mt-xs" dense :inline="props.inline" :model-value="props.modelValue" :options="option.children" type="checkbox" @update:model-value="updateChildren($event, option, index)" />
+          <!-- Com children -->
+          <q-option-group v-if="hasChildren(option)" class="q-ml-xs q-mt-xs" dense :inline="props.inline" :model-value="props.modelValue" :options="option.children" type="checkbox" @update:model-value="updateChildren($event, option, index)" />
 
-        <!-- Sem children -->
-        <q-option-group v-else v-model="model" v-bind="attrs" dense :options="[option]" type="checkbox" />
+          <!-- Sem children -->
+          <q-option-group v-else v-model="model" v-bind="attrs" dense :options="[option]" type="checkbox" />
+        </div>
       </div>
     </div>
+
+    <div v-if="props.errorMessage" class="q-pt-sm qas-checkbox__error-message text-negative">
+      {{ props.errorMessage }}
+    </div>
   </div>
 </template>
 
 <script setup>
+import { getRequiredLabel } from '../../helpers'
 import { watch, computed, ref, onMounted, useAttrs } from 'vue'
 
 defineOptions({
@@ -30,6 +41,11 @@ defineOptions({
 })
 
 const props = defineProps({
+  label: {
+    default: '',
+    type: String
+  },
+
   options: {
     default: () => [],
     type: Array
@@ -43,6 +59,19 @@ const props = defineProps({
   inline: {
     default: true,
     type: Boolean
+  },
+
+  errorMessage: {
+    type: String,
+    default: ''
+  },
+
+  error: {
+    type: Boolean
+  },
+
+  required: {
+    type: Boolean
   }
 })
 
@@ -59,6 +88,8 @@ onMounted(handleParent)
 // computed
 const classes = computed(() => props.inline && 'flex q-gutter-x-sm')
 
+const hasCheckboxLabel = computed(() => !!props.label)
+
 const model = computed({
   get () {
     return props.modelValue
@@ -71,6 +102,22 @@ const model = computed({
 
 const isSingle = computed(() => !props.options.length)
 
+const singleAttributes = computed(() => {
+  return {
+    ...attrs,
+
+    label: props.label
+  }
+})
+
+const checkboxLabelClasses = computed(() => {
+  return { 'text-negative': props.error }
+})
+
+const formattedLabel = computed(() => {
+  return getRequiredLabel({ label: props.label, required: props.required })
+})
+
 // watch
 watch(() => props.options, handleParent)
 
@@ -95,7 +142,7 @@ function setGroupIntersection (value, option, index) {
   const options = option.children.map(item => item.value)
   const intersection = options.filter(item => value.includes(item))
 
-  group.value[index] = intersection.length && (intersection.length === options.length ? true : null)
+  group.value[index] = intersection.length ? (intersection.length === options.length ? true : null) : false
 }
 
 function updateCheckbox (value, option, index) {
@@ -127,3 +174,12 @@ function getModelValue (index) {
   return group.value[index]
 }
 </script>
+
+<style lang="scss">
+.qas-checkbox {
+  &__error-message {
+    // Tamanho da fonte utilizada nos errors no q-field.
+    font-size: 11px;
+  }
+}
+</style>

package/src/components/checkbox/QasCheckbox.yml

@@ -9,6 +9,11 @@ props:
     default: true
     type: Boolean
 
+  label:
+    desc: Label utilizada em casos de ser checkbox-group.
+    default: ''
+    type: String
+
   model-value:
     desc: Model do componente, usado para v-model.
     default: []
@@ -21,6 +26,19 @@ props:
     default: []
     type: Array
 
+  error:
+    desc: Booleano que caso seja true a label passa a ter a cor vermelha.
+    type: Boolean
+
+  error-message:
+    desc: Mensagem de erro exibida na parte inferior do checkbox.
+    type: String
+
+  required:
+    desc: Controla se exibirá o sufixo "*" ao lado do texto.
+    default: false
+    type: Boolean
+
 events:
   '@update:model-value -> function(value)':
     desc: Dispara quando o model-value altera, também usado para v-model.

package/src/components/copy/QasCopy.vue

@@ -1,6 +1,6 @@
 <template>
   <span>
-    <slot>{{ props.text }}</slot>
+    <slot v-if="props.useText">{{ props.text }}</slot>
 
     <qas-btn class="q-ml-xs" color="primary" :icon="props.icon" :loading="isLoading" variant="tertiary" @click.stop.prevent="copy">
       <q-tooltip>Copiar</q-tooltip>
@@ -23,13 +23,23 @@ const props = defineProps({
   text: {
     required: true,
     type: String
+  },
+
+  useText: {
+    type: Boolean,
+    default: true
+  },
+
+  rawText: {
+    default: '',
+    type: String
   }
 })
 
 const isLoading = ref(false)
 
 function copy () {
-  copyToClipboard(props.text, value => {
+  copyToClipboard(props.rawText || props.text, value => {
     isLoading.value = value
   })
 }

package/src/components/copy/QasCopy.yml

@@ -13,3 +13,11 @@ props:
     desc: Texto a ser copiado.
     type: String
 
+  use-text:
+    desc: Controla se o texto será exibo ao lado do botão ou não.
+    type: Boolean
+    default: true
+
+  raw-text:
+    desc: Caso o texto a ser copiado precise ser diferente do texto a ser exibido, utilize esta propriedade.
+    type: String