@bildvitta/quasar-ui-asteroid 3.17.0-beta.20 → 3.17.0-beta.22

package/package.json

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

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:

package/src/composables/use-notifications.js

@@ -4,6 +4,8 @@ import hasParentByClassName from '../helpers/private/has-parent-by-class-name'
 import { Notify } from 'quasar'
 import { ref } from 'vue'
 
+import naveNotificationSound from '../assets/sounds/nave-notification.mp3'
+
 const callbackFunctions = {
   onNotificationReceived: []
 }
@@ -63,6 +65,8 @@ export default function () {
       timeout: 30000
     })
 
+    sendNotificationSound()
+
     /**
      * Função que é chamada quando o usuário clica na notificação, se a notificação
      * tem link, então ele vai ser redirecionado para o link em uma nova aba, caso
@@ -96,6 +100,16 @@ export default function () {
          </div>
       `)
     }
+
+    /**
+     * Função que toca o som de notificação.
+     */
+    function sendNotificationSound () {
+      const audio = new Audio(naveNotificationSound)
+
+      // o áudio agora é reproduzível; reproduza-o se as permissões permitirem
+      audio.addEventListener('canplaythrough', audio.play)
+    }
   }
 
   return {