@bildvitta/quasar-ui-asteroid 3.5.0 → 3.6.0-beta.1

package/src/components/signature-pad/QasSignaturePad.vue

@@ -1,7 +1,7 @@
 <template>
   <div ref="signatureContainer" class="qas-signature-pad relative-position">
     <canvas :id="canvasId" :ref="$attrs.ref" class="qas-signature-pad__canvas rounded-borders vertical-bottom" :height="height" />
-    <qas-btn v-if="!empty" class="absolute-bottom-right q-mb-sm q-mr-sm" color="primary" dense icon="sym_r_delete" round @click="clearSignature" />
+    <qas-btn v-if="!empty" class="absolute-bottom-right q-mb-sm q-mr-sm" icon="sym_r_delete" variant="primary" @click="clearSignature" />
   </div>
 
   <div>

package/src/components/signature-uploader/QasSignatureUploader.vue

@@ -7,7 +7,7 @@
             <div v-if="uploadLabel" class="q-uploader__title">{{ uploadLabel }}</div>
           </div>
 
-          <qas-btn v-if="!readonly" color="white" dense flat icon="sym_r_add" round @click="openDialog" />
+          <qas-btn v-if="!readonly" color="white" icon="sym_r_add" :use-hover-on-white-color="false" variant="tertiary" @click="openDialog" />
 
           <qas-btn ref="forceUpload" class="hidden" @click="upload(scope)" />
           <qas-btn ref="buttonCleanFiles" class="hidden" @click="scope.removeUploadedFiles" />

package/src/components/{tabs-generator/private/PvTabsGeneratorStatus.vue → status/QasStatus.vue}

@@ -1,17 +1,17 @@
 <template>
-  <div class="pv-tabs-generator-status" :class="backgroundClass" />
+  <div aria-live="polite" class="qas-status" :class="backgroundClass" role="status" />
 </template>
 
 <script>
 export default {
-  name: 'PvTabsGeneratorStatus',
+  name: 'QasStatus',
 
   inheritAttrs: false,
 
   props: {
     color: {
       type: String,
-      default: ''
+      default: 'light-blue-2'
     }
   },
 
@@ -24,7 +24,7 @@ export default {
 </script>
 
 <style lang="scss">
-.pv-tabs-generator-status {
+.qas-status {
   border-radius: 100%;
   height: 16px;
   width: 16px;

package/src/components/status/QasStatus.yml

@@ -0,0 +1,10 @@
+type: component
+
+meta:
+  desc: Componente que gera um status circular com a cor do status.
+
+props:
+  color:
+    desc: cor dos status.
+    default: light-blue-2
+    type: String

package/src/components/tabs-generator/QasTabsGenerator.vue

@@ -6,7 +6,7 @@
           <slot :item="tab" :name="`tab-after-${tab.value}`">
             <q-icon v-if="tab.icon" :name="tab.icon" size="sm" />
 
-            <pv-tabs-generator-status v-if="tab.status" :color="tab.status" />
+            <qas-status v-if="tab.status" :color="tab.status" />
 
             <div class="q-ml-xs">
               {{ getFormattedLabel(tab) }}
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import PvTabsGeneratorStatus from './private/PvTabsGeneratorStatus.vue'
+import QasStatus from '../status/QasStatus.vue'
 
 import { extend } from 'quasar'
 
@@ -27,7 +27,7 @@ export default {
   name: 'QasTabsGenerator',
 
   components: {
-    PvTabsGeneratorStatus
+    QasStatus
   },
 
   props: {

package/src/components/text-truncate/QasTextTruncate.vue

@@ -4,16 +4,13 @@
       <div ref="truncate" :class="truncateTextClass">
         <slot>{{ text }}</slot>
       </div>
-      <div v-if="isTruncated" class="cursor-pointer text-primary" @click.stop="toggleDialog">{{ seeMoreLabel }}</div>
+
+      <div v-if="isTruncated" class="cursor-pointer text-primary" @click.stop="toggleDialog">
+        {{ seeMoreLabel }}
+      </div>
     </div>
 
-    <qas-dialog v-model="showDialog" v-bind="defaultDialogProps">
-      <template #description>
-        <slot>
-          <div>{{ text }}</div>
-        </slot>
-      </template>
-    </qas-dialog>
+    <qas-dialog v-model="showDialog" v-bind="defaultDialogProps" aria-label="Diálogo de texto completo" role="dialog" />
   </div>
 </template>
 
@@ -60,11 +57,17 @@ export default {
     return {
       maxPossibleWidth: '',
       showDialog: false,
-      textWidth: ''
+      textWidth: '',
+      textContent: '',
+      observer: null
     }
   },
 
   computed: {
+    description () {
+      return this.text || this.textContent
+    },
+
     truncateTextClass () {
       return (this.isTruncated || this.$qas.screen.isSmall) && 'ellipsis q-pr-sm'
     },
@@ -84,7 +87,7 @@ export default {
         ...this.dialogProps,
         card: {
           title: this.dialogTitle,
-          description: this.text
+          description: this.description
         }
       }
     }
@@ -98,18 +101,37 @@ export default {
 
   mounted () {
     this.truncateText()
+    this.observeContentChange()
+  },
+
+  unmounted () {
+    this.observer.disconnect()
   },
 
   methods: {
     truncateText () {
       this.$refs.parent.style.maxWidth = '100%'
       this.textWidth = this.$refs.truncate.clientWidth
+      this.textContent = this.$refs.truncate?.innerHTML
+
       this.maxPossibleWidth = this.maxWidth || this.$refs.truncate.parentElement.clientWidth * 0.90
       this.$refs.parent.style.maxWidth = `${this.maxPossibleWidth}px`
     },
 
     toggleDialog () {
       this.showDialog = !this.showDialog
+    },
+
+    observeContentChange () {
+      const element = this.$refs.truncate
+      const config = { childList: true, subtree: true, characterData: true }
+
+      const callback = mutationList => {
+        mutationList.forEach(() => this.truncateText())
+      }
+
+      this.observer = new MutationObserver(callback)
+      this.observer.observe(element, config)
     }
   }
 }

package/src/components/transfer/QasTransfer.vue

@@ -19,12 +19,12 @@
 
     <div class="col-12 col-sm-auto items-center justify-center q-col-gutter-md row" :class="actionsClass">
       <div>
-        <qas-btn :class="iconClass" dense :disabled="!firstQueue.length" flat icon="sym_r_arrow_circle_down" rounded @click="setSelectedFromClick(true)" />
+        <qas-btn :class="iconClass" color="primary" :disabled="!firstQueue.length" icon="sym_r_arrow_circle_down" variant="tertiary" @click="setSelectedFromClick(true)" />
         <q-tooltip anchor="top middle" self="center middle">Selecionar</q-tooltip>
       </div>
       <div>
         <div>
-          <qas-btn :class="iconClass" dense :disabled="!secondQueue.length" flat icon="sym_r_arrow_circle_up" rounded @click="setSelectedFromClick()" />
+          <qas-btn :class="iconClass" color="primary" :disabled="!secondQueue.length" icon="sym_r_arrow_circle_up" variant="tertiary" @click="setSelectedFromClick()" />
           <q-tooltip anchor="bottom middle" self="center middle">Remover</q-tooltip>
         </div>
       </div>

package/src/components/tree-generator/QasTreeGenerator.vue

@@ -8,7 +8,8 @@
           </span>
 
           <span v-if="hasMenuButton(node)" class="q-ml-sm">
-            <qas-btn dense flat icon="sym_r_more_vert" round @click.stop>
+            <!-- TODO: rever para o uso QasActionsMenu -->
+            <qas-btn color="grey-9" icon="sym_r_more_vert" variant="tertiary" @click.stop>
               <q-menu auto-close>
                 <q-list separator>
                   <q-item v-if="useAddButton" v-ripple class="qas-tree-generator__item" clickable @click="handleTreeFormDialog(node, true, tree)">

package/src/components/uploader/QasUploader.vue

@@ -13,13 +13,15 @@
               </div>
             </div>
 
-            <qas-btn v-if="showAddFile" ref="buttonUpload" color="white" dense flat icon="sym_r_add" round @click="$refs.hiddenInput.click()" />
+            <qas-btn v-if="showAddFile" ref="buttonUpload" color="white" icon="sym_r_add" :use-hover-on-white-color="false" variant="tertiary" @click="$refs.hiddenInput.click()" />
 
             <input ref="hiddenInput" :accept="attributes.accept" class="qas-uploader__input" :multiple="isMultiple" type="file">
 
-            <qas-btn ref="buttonCleanFiles" class="hidden" color="white" @click="scope.removeUploadedFiles" />
-            <qas-btn v-if="scope.canUpload" color="white" dense flat icon="sym_r_cloud_upload" round @click="scope.upload" />
-            <qas-btn v-if="scope.isUploading" color="white" dense flat icon="sym_r_clear" round @click="scope.abort" />
+            <qas-btn ref="buttonCleanFiles" class="hidden" @click="scope.removeUploadedFiles" />
+
+            <qas-btn v-if="scope.canUpload" color="white" icon="sym_r_cloud_upload" :use-hover-on-white-color="false" variant="tertiary" @click="scope.upload" />
+
+            <qas-btn v-if="scope.isUploading" color="white" icon="sym_r_clear" :use-hover-on-white-color="false" variant="tertiary" @click="scope.abort" />
           </div>
         </slot>
       </template>
@@ -37,7 +39,7 @@
                 </div>
                 <div class="items-center q-ml-sm row">
                   <q-icon v-if="file.isFailed" color="negative" name="sym_r_warning" size="20px" />
-                  <qas-btn v-if="!scope.readonly" dense flat icon="sym_r_delete" round @click="removeItem(index, scope, file)" />
+                  <qas-btn v-if="!scope.readonly" color="grey-9" icon="sym_r_delete" variant="tertiary" @click="removeItem(index, scope, file)" />
                 </div>
               </div>
             </div>

package/src/css/components/button.scss

@@ -0,0 +1,101 @@
+.qas-btn {
+  $root: &;
+
+  min-height: 48px !important;
+  padding: var(--qas-spacing-xs) var(--qas-spacing-lg) !important;
+  text-transform: initial !important;
+  transition: color var(--qas-generic-transition), background-color var(--qas-generic-transition);
+
+  .q-icon {
+    font-size: 24px !important;
+  }
+
+  &:disabled {
+    opacity: 1 !important;
+  }
+
+  &:not(&--primary):not(:disabled):not(&--no-hover-on-white.qas-btn--tertiary-white):hover {
+    color: var(--q-primary-contrast) !important;
+  }
+
+  &--primary {
+    background-color: var(--q-primary) !important;
+    color: white !important;
+
+    &:disabled {
+      background-color: $grey-4 !important;
+      color: $grey-8 !important;
+    }
+
+    &:not(:disabled):hover {
+      background-color: var(--q-primary-contrast) !important;
+    }
+  }
+
+  &--secondary {
+    border: 1px solid currentColor !important;
+    color: var(--q-primary) !important;
+    position: relative;
+
+    &:disabled {
+      color: $grey-8 !important;
+    }
+  }
+
+  &--primary,
+  &--secondary {
+    &-icon-only {
+      height: 48px !important;
+      min-width: auto !important;
+      padding: 0 !important;
+      width: 48px !important;
+    }
+  }
+
+  &--tertiary {
+    min-height: 24px !important;
+    padding: 0 !important;
+
+    &:disabled {
+      color: $grey-8 !important;
+    }
+
+    &-grey-9 {
+      color: $grey-9 !important;
+    }
+
+    &-primary {
+      color: var(--q-primary) !important;
+    }
+
+    &-white {
+      color: white !important;
+    }
+
+    &-icon-only {
+      height: 24px !important;
+      min-width: auto !important;
+      padding: 0 !important;
+      width: 24px !important;
+    }
+  }
+
+  &.q-btn {
+    &::before {
+      display: none;
+    }
+  }
+
+  .q-icon.on-left {
+    margin-right: var(--qas-spacing-xs);
+  }
+
+  .q-icon.on-right {
+    margin-left: var(--qas-spacing-xs);
+  }
+
+  .q-ripple,
+  .q-focus-helper {
+    display: none;
+  }
+}

package/src/css/components/index.scss

@@ -1,4 +1,5 @@
 @import './base';
+@import './button';
 @import './field';
 @import './item';
 @import './radio';

package/src/css/mixins/index.scss

@@ -1,2 +1,3 @@
+@import './set-button';
 @import './set-brand';
 @import './set-typography';

package/src/css/mixins/set-button.scss

@@ -0,0 +1,16 @@
+@mixin set-button($variant, $icon-only: false, $no-hover-on-white: false, $color: false) {
+  @extend .qas-btn;
+  @extend .qas-btn--#{$variant};
+
+  @if $variant == tertiary and $color {
+    @extend .qas-btn--tertiary-#{$color};
+  }
+
+  @if $icon-only {
+    @extend .qas-btn--#{$variant}-icon-only;
+  }
+
+  @if $no-hover-on-white {
+    @extend .qas-btn--no-hover-on-white;
+  }
+}

package/src/css/plugins/notify.scss

@@ -2,6 +2,27 @@
   margin-top: 80px;
   max-width: 560px;
 
+  &.qas-notification {
+    &--error::before,
+    &--success::before {
+      border-radius: var(--qas-generic-border-radius) 0 0 var(--qas-generic-border-radius);
+      bottom: 0;
+      content: '';
+      left: calc(var(--qas-spacing-md) * -1);
+      position: relative;
+      top: 0;
+      width: 4px;
+    }
+
+    &--error::before {
+      background-color: var(--q-negative);
+    }
+
+    &--success::before {
+      background-color: var(--q-positive);
+    }
+  }
+
   &__content {
     .q-icon {
       margin-right: var(--qas-spacing-sm);

package/src/css/variables/button.scss

@@ -1,3 +1,4 @@
 $button-font-size: 1rem;
-$button-line-height: 1.5rem;
+$button-line-height: 16px;
 $button-font-weight: 600;
+$button-border-radius: 32px;

package/src/css/variables/spacing.scss

@@ -1,11 +1,8 @@
 @use 'sass:map';
 
-/*
-* O único valor que de fato é alterado diferente do padrão do Quasar é o tamanho "lg"
-*/
 $space-base   : 16px;
-$space-x-base : $space-base;
-$space-y-base : $space-base;
+$space-x-base : $space-base; // 16px
+$space-y-base : $space-base; // 16px
 
 $space-none : (
   x: 0,
@@ -13,38 +10,50 @@ $space-none : (
 );
 
 $space-xs: (
-  x: ($space-x-base * 0.25),
-  y: ($space-y-base * 0.25)
+  x: ($space-x-base * 0.25), // 4px
+  y: ($space-y-base * 0.25) // 4px
 );
 
 $space-sm: (
-  x: ($space-x-base * 0.5),
-  y: ($space-y-base * 0.5)
+  x: ($space-x-base * 0.5), // 8px
+  y: ($space-y-base * 0.5) // 8px
 );
 
 $space-md: (
-  x: $space-x-base,
-  y: $space-y-base
+  x: $space-x-base, // 16px
+  y: $space-y-base // 16px
 );
 
 $space-lg: (
-  x: ($space-x-base * 1.5),
-  y: ($space-y-base * 1.5)
+  x: ($space-x-base * 1.5), // 24px
+  y: ($space-y-base * 1.5) // 24px
 );
 
 // O tamanho original seria "16px * 3" ou "48px", alterado para ter "32px"
 $space-xl: (
-  x: ($space-x-base * 2),
-  y: ($space-y-base * 2)
+  x: ($space-x-base * 2), // 32px
+  y: ($space-y-base * 2) // 32px
+);
+
+$space-2xl: (
+  x: ($space-x-base * 2.5), // 40px
+  y: ($space-y-base * 2.5) // 40px
+);
+
+$space-3xl: (
+  x: ($space-x-base * 3), // 48px
+  y: ($space-y-base * 3) // 48px
 );
 
 $spaces: (
-  none: $space-none,
-  xs: $space-xs,
-  sm: $space-sm,
-  md: $space-md,
-  lg: $space-lg,
-  xl: $space-xl
+  none: $space-none, // 0px
+  xs: $space-xs, // 4px
+  sm: $space-sm, // 8px
+  md: $space-md, // 16px
+  lg: $space-lg, // 24px
+  xl: $space-xl, // 32px
+  2xl: $space-2xl, // 40px
+  3xl: $space-3xl // 48px
 );
 
 $flex-gutter-xs : map.get($space-xs, 'x');
@@ -52,14 +61,18 @@ $flex-gutter-sm : map.get($space-sm, 'x');
 $flex-gutter-md : map.get($space-md, 'x');
 $flex-gutter-lg : map.get($space-lg, 'x');
 $flex-gutter-xl : map.get($space-xl, 'x');
+$flex-gutter-2xl : map.get($space-2xl, 'x');
+$flex-gutter-3xl : map.get($space-3xl, 'x');
 
 $flex-gutter: (
-  none: 0,
-  xs: $flex-gutter-xs,
-  sm: $flex-gutter-sm,
-  md: $flex-gutter-md,
-  lg: $flex-gutter-lg,
-  xl: $flex-gutter-xl
+  none: 0, // 0px
+  xs: $flex-gutter-xs, // 4px
+  sm: $flex-gutter-sm, // 8px
+  md: $flex-gutter-md, // 16px
+  lg: $flex-gutter-lg, // 24px
+  xl: $flex-gutter-xl, // 32px
+  2xl: $flex-gutter-2xl, // 48px
+  3xl: $flex-gutter-3xl // 40px
 );
 
 :root {

package/src/css/variables/typography.scss

@@ -10,7 +10,7 @@
 // headings
 $h1: (
   size: 3rem,
-  line-height: 1.5rem,
+  line-height: 3rem,
   letter-spacing: 0,
   weight: 800,
   margin: 0
@@ -18,7 +18,7 @@ $h1: (
 
 $h2: (
   size: 2rem,
-  line-height: 1.5rem,
+  line-height: 2rem,
   letter-spacing: 0,
   weight: 700,
   margin: 0
@@ -34,7 +34,7 @@ $h3: (
 
 $h4: (
   size: 1.125rem,
-  line-height: 1.5rem,
+  line-height: 1.125rem,
   letter-spacing: 0,
   weight: 600,
   margin: 0
@@ -42,7 +42,7 @@ $h4: (
 
 $h5: (
   size: 1rem,
-  line-height: 1.5rem,
+  line-height: 1rem,
   letter-spacing: 0,
   weight: 600,
   margin: 0
@@ -50,7 +50,7 @@ $h5: (
 
 $h6: (
   size: 0.875rem,
-  line-height: 1.5rem,
+  line-height: 0.875rem,
   letter-spacing: 0,
   weight: 600,
   margin: 0
@@ -59,14 +59,14 @@ $h6: (
 // subtitles
 $subtitle1: (
   size: 1rem,
-  line-height: 1.5rem,
+  line-height: 1rem,
   letter-spacing: 0,
   weight: 600
 );
 
 $subtitle2: (
   size: 0.875rem,
-  line-height: 1.5rem,
+  line-height: 0.875rem,
   letter-spacing: 0,
   weight: 600
 );
@@ -74,14 +74,14 @@ $subtitle2: (
 // body
 $body1: (
   size: 1rem,
-  line-height: 1.5rem,
+  line-height: 1rem,
   letter-spacing: 0,
   weight: 400
 );
 
 $body2: (
   size: 0.875rem,
-  line-height: 1.5rem,
+  line-height: 0.875rem,
   letter-spacing: 0,
   weight: 400
 );
@@ -89,7 +89,7 @@ $body2: (
 // overline
 $overline: (
   size: 0.875rem,
-  line-height: 1.5rem,
+  line-height: 0.875rem,
   letter-spacing: 0.25rem,
   weight: 600
 );
@@ -97,7 +97,7 @@ $overline: (
 // caption
 $caption: (
   size: 0.75rem,
-  line-height: 1.5rem,
+  line-height: 0.75rem,
   letter-spacing: 0,
   weight: 400
 );

package/src/index.scss

@@ -11,7 +11,7 @@ $accent: var(--q-accent);
 :root {
   --qas-background-color: #fbfbfb;
   --qas-border-grey: #{$grey-4};
-  --qas-generic-border-radius: 8px;
+  --qas-generic-border-radius: 4px;
   --qas-generic-transition: 300ms;
 }
 

package/src/mixins/view.js

@@ -96,7 +96,7 @@ export default {
 
       const redirect = status >= 500
         ? 'ServerError'
-        : ({ 401: 'Unauthorized', 403: 'Forbidden', 404: 'NotFound' })[status]
+        : ({ 403: 'Forbidden', 404: 'NotFound' })[status]
 
       // caso exista um desses status será redirecionado sem aparecer o "notify"
       if (redirect) {