@bildvitta/quasar-ui-asteroid 3.17.0-beta.21 → 3.17.0-beta.23

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.17.0-beta.21",
+  "version": "3.17.0-beta.23",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",

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

@@ -37,6 +37,11 @@ import Sortable from 'sortablejs'
 defineOptions({ name: 'QasBoardGenerator' })
 
 const props = defineProps({
+  beforeUpdatePosition: {
+    type: Function,
+    default: undefined
+  },
+
   headers: {
     type: Array,
     default: () => []
@@ -132,10 +137,11 @@ const emit = defineEmits([
   'fetch-column-error',
   'fetch-columns-success',
   'fetch-columns-error',
-  'update-success'
+  'update-success',
+  'update-error'
 ])
 
-defineExpose({ fetchColumns, fetchColumn, reset })
+defineExpose({ fetchColumns, fetchColumn, reset, cancelDrop })
 
 // Inject
 const axios = inject('axios')
@@ -392,6 +398,20 @@ function getItemsByHeader (header) {
   return hasColumnsLength.value ? columnsResultsModel.value[getKeyByHeader(header)] : []
 }
 
+function getColumnItemById (id) {
+  return Object.values(columnsResultsModel.value).flat().find(item => item[props.itemIdKey] === id)
+}
+
+/**
+ * Recupera o payload do header por id:
+ *
+ * @example getHeaderById('2024-02-15')
+ * @returns {Object} // { date: '2024-02-15'... }
+ */
+function getHeaderById (id) {
+  return props.headers.find(header => String(getKeyByHeader(header)) === String(id))
+}
+
 /**
 * Pegar key com base na chave identificador, exemplo:
 * header -> { date: '2024-02-12', ... }
@@ -479,7 +499,7 @@ function handleElementsList () {
 }
 
 /**
- * Descricao:
+ * Descrição:
  * Seta a instancia do sortable, no qual varia de acordo com as props passadas.
  *
  * @param {HTMLElement} element
@@ -531,6 +551,20 @@ function onDropCard (event) {
 
   onConfirmDrop.value = () => confirmDrop(event)
 
+  if (typeof props.beforeUpdatePosition === 'function') {
+    props.beforeUpdatePosition({
+      event,
+      cancel: onCancelDrop.value,
+      getItem: () => getColumnItemById(event.item.id),
+      getColumnTo: () => getHeaderById(event.to.dataset.headerKey),
+      getColumnFrom: () => getHeaderById(event.from.dataset.headerKey),
+      openConfirmDialog,
+      update: () => confirmDrop(event)
+    })
+
+    return
+  }
+
   hasConfirmDialogProps.value
     ? openConfirmDialog()
     : confirmDrop(event)
@@ -617,8 +651,7 @@ function removeItemFromList ({ headerKey, itemId }) {
 }
 
 /**
- * Descricao:
- * Metodo que realiza a request de update
+ * Método que realiza a request de update
  *
  * @param {{
  *  newHeaderKey: string - ID da coluna de destino,
@@ -650,6 +683,8 @@ async function updatePosition ({ newHeaderKey, oldHeaderKey, itemId, event }) {
   if (error) {
     onCancelDrop.value()
 
+    emit('update-error', error)
+
     return
   }
 
@@ -663,7 +698,7 @@ async function updatePosition ({ newHeaderKey, oldHeaderKey, itemId, event }) {
 
   closeConfirmDialog()
 
-  emit('update-success')
+  emit('update-success', data.data)
 }
 
 function setItemList ({ headerKey, data, index }) {

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
@@ -158,8 +198,22 @@ events:
 
   '@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.
 

package/src/components/stepper/QasStepper.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="qas-stepper" :class="classes">
-    <q-stepper ref="stepper" v-model="model" active-color="primary" active-icon="none" animated :contracted="screen.untilLarge" done-color="primary" done-icon="none" flat :header-class="headerClass" inactive-color="grey-6" keep-alive>
+    <q-stepper ref="stepper" v-model="model" v-bind="stepperProps">
       <template v-for="(_, name) in $slots" #[name]="context">
         <slot :name="name" v-bind="getContext(context)" />
       </template>
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, ref, useAttrs } from 'vue'
 import { Spacing } from '../../enums/Spacing'
 import { gutterValidator } from '../../helpers/private/gutter-validator'
 import useScreen from '../../composables/use-screen'
@@ -35,6 +35,8 @@ const props = defineProps({
 
 const stepper = ref(null)
 
+const attrs = useAttrs()
+
 const screen = useScreen()
 
 const emit = defineEmits(['update:modelValue'])
@@ -53,7 +55,27 @@ const model = computed({
 
 const classes = computed(() => ({ 'qas-stepper--disable': props.disable }))
 
-const headerClass = computed(() => `text-subtitle1 q-pb-${props.spacing}`)
+const stepperProps = computed(() => {
+  const defaultProps = {
+    contracted: screen.untilLarge,
+    doneColor: 'primary',
+    flat: true,
+    animated: true,
+    activeColor: 'primary',
+    errorIcon: 'sym_r_close',
+    errorColor: 'white',
+    headerClass: `text-subtitle1 q-pb-${props.spacing}`,
+    inactiveColor: attrs['header-nav'] || attrs.headerNav ? 'grey-10' : 'grey-6'
+  }
+
+  return {
+    activeIcon: 'none',
+    doneIcon: 'none',
+    keepAlive: true,
+    ...attrs,
+    ...defaultProps
+  }
+})
 
 function getContext (context) {
   return {
@@ -87,6 +109,31 @@ function previous () {
 
     &__tab {
       padding: 0;
+
+      &--active {
+        .q-icon {
+          font-size: 14px;
+          color: white;
+        }
+
+        .q-stepper__dot {
+          background-color: var(--q-primary) !important;
+        }
+      }
+
+      &:not(.q-stepper__tab--active).q-stepper__tab--error-with-icon  {
+        .q-stepper__title {
+          color: $grey-10;
+        }
+
+        .q-stepper__dot {
+          background-color: $negative !important;
+        }
+
+        .q-icon {
+          font-size: 14px;
+        }
+      }
     }
 
     &__caption {

package/src/components/stepper-form-view/QasStepperFormView.vue

@@ -1,7 +1,7 @@
 <template>
   <qas-stepper ref="stepper" v-model="model" v-bind="stepperProps">
     <template #default>
-      <q-step v-for="(step, stepIndex) in props.steps" :key="stepIndex" :done="isDone(stepIndex)" :name="getStepName(stepIndex)" v-bind="stepPropsList[stepIndex]">
+      <q-step v-for="(step, stepIndex) in props.steps" :key="stepIndex" :done="isDone(stepIndex)" :name="getStepName({ step, stepIndex })" v-bind="stepPropsList[stepIndex]">
         <component :is="step.component" />
       </q-step>
     </template>
@@ -30,7 +30,9 @@ const props = defineProps({
   }
 })
 
-const model = defineModel({ type: Number, default: 1 })
+defineExpose({ setStepProps })
+
+const model = defineModel({ type: [Number, String], default: 1 })
 
 const values = ref({})
 const stepPropsList = ref([])
@@ -68,8 +70,8 @@ function isDone (stepIndex) {
   return model.value > stepIndex + 1
 }
 
-function getStepName (stepIndex) {
-  return stepIndex + 1
+function getStepName ({ step, stepIndex }) {
+  return step.name || stepIndex + 1
 }
 
 provide('stepper', {

package/src/components/uploader/QasUploader.vue

@@ -3,18 +3,20 @@
     <q-uploader ref="uploader" auto-upload class="bg-transparent" :class="uploaderClasses" v-bind="attributes" :factory="factory" flat :max-files="maxFiles" method="PUT" @factory-failed="factoryFailed" @uploaded="uploaded" @uploading="updateUploading(true)">
       <template #header="scope">
         <slot name="header" :scope="scope">
-          <div class="flex items-center justify-between">
-            <div>
-              <qas-label v-bind="labelProps" />
-
-              <div v-if="errorMessage" class="q-mt-xs text-caption text-negative">
-                {{ errorMessage }}
+          <qas-header class="q-mb-none" v-bind="getHeaderProps(scope)">
+            <template #description>
+              <div :class="headerDescriptionClasses">
+                {{ headerProps.description }}
               </div>
-            </div>
+            </template>
+
+            <template v-for="(_, name) in $slots" #[getHeaderSlotName(name)]="context">
+              <slot :name v-bind="context" />
+            </template>
+          </qas-header>
 
-            <div v-if="hasAddFile">
-              <qas-btn color="primary" icon="sym_r_add" :label="addButtonLabel" :use-label-on-small-screen="false" variant="tertiary" @click="onAddButtonClick(scope)" />
-            </div>
+          <div v-if="errorMessage" class="q-mt-xs text-caption text-negative">
+            {{ errorMessage }}
           </div>
 
           <!-- ------------------------------------ tags hidden -------------------------------------- -->
@@ -24,15 +26,13 @@
       </template>
 
       <template #list="scope">
-        <div v-if="hasGalleryCardSection(getFilesList(scope.files, scope))" class="q-col-gutter-lg q-mt-sm row">
+        <div v-if="hasGalleryCardSection(getFilesList(scope.files, scope))" class="q-col-gutter-lg row">
           <div v-for="(file, key, index) in getFilesList(scope.files, scope)" :key="index" :class="columnClasses">
             <pv-uploader-gallery-card v-bind="getUploaderGalleryCardProps({ key, scope, file, index })" />
           </div>
         </div>
 
-        <div v-else class="q-mt-lg">
-          <qas-empty-result-text />
-        </div>
+        <qas-empty-result-text v-else />
       </template>
     </q-uploader>
 
@@ -42,6 +42,7 @@
 
 <script>
 import PvUploaderGalleryCard from './private/PvUploaderGalleryCard.vue'
+import QasHeader from '../header/QasHeader.vue'
 
 import { uid, extend } from 'quasar'
 import { NotifyError } from '../../plugins'
@@ -53,7 +54,8 @@ export default {
   name: 'QasUploader',
 
   components: {
-    PvUploaderGalleryCard
+    PvUploaderGalleryCard,
+    QasHeader
   },
 
   inheritAttrs: false,
@@ -125,6 +127,11 @@ export default {
       type: Object
     },
 
+    headerProps: {
+      type: Object,
+      default: () => ({})
+    },
+
     label: {
       type: String,
       default: ''
@@ -199,6 +206,12 @@ export default {
       return this.$attrs
     },
 
+    headerDescriptionClasses () {
+      return {
+        'text-negative': this.error
+      }
+    },
+
     columnClasses () {
       const irregularClasses = ['col']
       const columns = this.defaultColumns
@@ -290,15 +303,6 @@ export default {
       return this.$attrs.multiple || this.$attrs.multiple === ''
     },
 
-    labelProps () {
-      return {
-        label: this.label,
-        margin: 'none',
-
-        ...(this.error && { color: 'negative' })
-      }
-    },
-
     self () {
       return this
     },
@@ -613,6 +617,48 @@ export default {
       const emptyModel = this.isMultiple ? [] : this.useObjectModel ? {} : ''
 
       this.$emit('update:modelValue', emptyModel)
+    },
+
+    getHeaderSlotName (name) {
+      return name.replace('header-', '')
+    },
+
+    getHeaderProps (scope) {
+      const { labelProps, actionsMenuProps, ...othersHeaderProps } = this.headerProps
+
+      const { list, ...othersActionsMenuProps } = actionsMenuProps || {}
+
+      return {
+        spacing: 'lg',
+
+        labelProps: {
+          label: this.label,
+
+          margin: 'none',
+
+          ...labelProps,
+
+          ...(this.error && { color: 'negative' })
+        },
+
+        ...(this.hasAddFile && {
+          actionsMenuProps: {
+            list: {
+              add: {
+                icon: 'sym_r_add',
+                label: this.addButtonLabel,
+                handler: () => this.onAddButtonClick(scope)
+              },
+
+              ...list
+            },
+
+            ...othersActionsMenuProps
+          }
+        }),
+
+        ...othersHeaderProps
+      }
     }
   }
 }

package/src/components/uploader/QasUploader.yml

@@ -83,8 +83,13 @@ props:
     default: {}
     type: Object
 
+  header-props:
+    desc: Propriedades repassadas para o componente "QasHeader".
+    default: {}
+    type: Object
+
   label:
-    desc: Label do componente, repassado para o componente "QasLabel".
+    desc: Label do componente.
     type: String
 
   max-files:
@@ -158,6 +163,15 @@ slots:
         default: {}
         type: Object
 
+  header-actions:
+    desc: Acessa o slot actions do "QasHeader".
+
+  header-description:
+    desc: Acessa o slot description do "QasHeader".
+
+  header-label:
+    desc: Acessa o slot label do "QasHeader".
+
   list:
     desc: Acesso ao conteúdo onde fica a listagem de arquivos.
     scope: