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

package/package.json

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

package/src/components/app-menu/QasAppMenu.vue

@@ -279,7 +279,7 @@ export default {
   }
 
   &__select {
-    border-radius: 4px;
+    border-radius: var(--qas-generic-border-radius);
   }
 
   &__item {

package/src/components/badge/QasBadge.vue

@@ -0,0 +1,34 @@
+<template>
+  <q-badge v-bind="$props" :aria-multiline="multiLine" class="q-px-sm q-py-xs text-caption">
+    <slot />
+  </q-badge>
+</template>
+
+<script>
+export default {
+  name: 'QasBadge',
+
+  inheritAttrs: false,
+
+  props: {
+    color: {
+      type: String,
+      default: 'light-blue-2'
+    },
+
+    label: {
+      type: String,
+      default: ''
+    },
+
+    multiLine: {
+      type: Boolean
+    },
+
+    textColor: {
+      type: String,
+      default: 'grey-9'
+    }
+  }
+}
+</script>

package/src/components/badge/QasBadge.yml

@@ -0,0 +1,28 @@
+type: component
+
+meta:
+  desc: Componente wrapper do QBadge do quasar.
+
+props:
+  color:
+    desc: Cor da badge.
+    default: light-blue-2
+    type: String
+
+  label:
+    desc: Texto do badge.
+    type: String
+
+  multi-line:
+    desc: Habilita o texto a quebrar.
+    default: false
+    type: Boolean
+
+  text-color:
+    desc: Cor do texto.
+    default: grey-9
+    type: String
+
+slots:
+  default:
+    desc: Slot do conteúdo do badge.

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

@@ -1,17 +1,17 @@
 <template>
   <qas-input ref="input" v-bind="attributes" v-model="currentValue" :unmasked-value="false" @blur="validateDateTimeOnBlur" @focus="resetError" @update:model-value="updateModelValue">
     <template #append>
-      <q-icon v-if="!useTimeOnly" class="cursor-pointer" name="sym_r_event">
+      <qas-btn v-if="!useTimeOnly" color="grey-9" dense :disable="$attrs.readonly" flat icon="sym_r_event" rounded>
         <q-popup-proxy ref="dateProxy" transition-hide="scale" transition-show="scale">
-          <q-date v-model="currentValue" v-bind="dateProps" :mask="maskDate" @update:model-value="updateModelValue" />
+          <q-date v-model="currentValue" v-bind="defaultDateProps" :mask="maskDate" @update:model-value="updateModelValue" />
         </q-popup-proxy>
-      </q-icon>
+      </qas-btn>
 
-      <q-icon v-if="!useDateOnly" class="cursor-pointer q-ml-md" name="sym_r_access_time">
+      <qas-btn v-if="!useDateOnly" class="q-ml-sm" color="grey-9" dense :disable="$attrs.readonly" flat icon="sym_r_access_time" rounded>
         <q-popup-proxy ref="timeProxy" transition-hide="scale" transition-show="scale">
-          <q-time v-model="currentValue" v-bind="timeProps" format24h :mask="maskDate" @update:model-value="updateModelValue" />
+          <q-time v-model="currentValue" v-bind="defaultTimeProps" format24h :mask="maskDate" @update:model-value="updateModelValue" />
         </q-popup-proxy>
-      </q-icon>
+      </qas-btn>
     </template>
   </qas-input>
 </template>
@@ -88,6 +88,27 @@ export default {
       }
     },
 
+    defaultDateProps () {
+      return {
+        ...this.defaultDateTimeProps,
+        ...this.dateProps
+      }
+    },
+
+    defaultTimeProps () {
+      return {
+        ...this.defaultDateTimeProps,
+        ...this.timeProps
+      }
+    },
+
+    defaultDateTimeProps () {
+      return {
+        readonly: this.$attrs.readonly,
+        disable: this.$attrs.disable
+      }
+    },
+
     inputElement () {
       return this.$refs.input
     },

package/src/components/filters/QasFilters.vue

@@ -4,44 +4,46 @@
       <div v-if="showSearch" class="col-12 col-md-6">
         <slot :filter="filter" name="search">
           <q-form v-if="useSearch" @submit.prevent="filter()">
-            <qas-input v-model="search" class="bg-white q-px-sm qas-filters__input rounded-borders-sm shadow-2" data-cy="filters-search-input" :debounce="debounce" dense hide-bottom-space input-class="ellipsis text-grey-8" :outlined="false" :placeholder="searchPlaceholder" type="search">
-              <template #prepend>
-                <q-icon v-if="useSearchOnType" color="grey-8" name="sym_r_search" />
-                <qas-btn v-else color="grey-9" flat icon="sym_r_search" padding="0" @click="filter()" />
-              </template>
-
-              <template #append>
-                <qas-btn v-if="hasSearch" class="q-mr-sm" color="grey-9" flat icon="sym_r_clear" padding="0" size="sm" @click="clearSearch" />
-
-                <qas-btn v-if="useFilterButton" :color="filterButtonColor" data-cy="filters-btn" flat icon="sym_r_tune" padding="0">
-                  <q-menu anchor="center right" class="full-width" max-width="270px" self="top right">
-                    <div v-if="isFetching" class="q-pa-xl text-center">
-                      <q-spinner color="grey" size="2em" />
-                    </div>
-
-                    <div v-else-if="hasFetchError" class="q-pa-xl text-center">
-                      <q-icon color="negative" name="sym_r_warning" size="2em" />
-                    </div>
-
-                    <q-form v-else class="q-gutter-y-md q-pa-md" @submit.prevent="filter()">
-                      <div v-for="(field, index) in fields" :key="index">
-                        <qas-field v-model="filters[field.name]" :data-cy="`filters-${field.name}-field`" :field="field" v-bind="fieldsProps[field.name]" />
+            <div class="qas-filters__input-content">
+              <qas-input v-model="search" class="bg-white q-px-sm rounded-borders-sm shadow-2" data-cy="filters-search-input" :debounce="debounce" dense hide-bottom-space input-class="ellipsis text-grey-8" :outlined="false" :placeholder="searchPlaceholder" type="search">
+                <template #prepend>
+                  <q-icon v-if="useSearchOnType" color="grey-8" name="sym_r_search" />
+                  <qas-btn v-else color="grey-9" flat icon="sym_r_search" padding="0" @click="filter()" />
+                </template>
+
+                <template #append>
+                  <qas-btn v-if="hasSearch" class="q-mr-sm" color="grey-9" flat icon="sym_r_clear" padding="0" size="sm" @click="clearSearch" />
+
+                  <qas-btn v-if="useFilterButton" :color="filterButtonColor" data-cy="filters-btn" flat icon="sym_r_tune" padding="0">
+                    <q-menu anchor="center right" class="full-width" max-width="270px" self="top right">
+                      <div v-if="isFetching" class="q-pa-xl text-center">
+                        <q-spinner color="grey" size="2em" />
                       </div>
 
-                      <div class="q-col-gutter-x-md q-mt-xl row">
-                        <div class="col-6">
-                          <qas-btn class="full-width" data-cy="filters-clear-btn" label="Limpar" outline size="12px" @click="clearFilters" />
+                      <div v-else-if="hasFetchError" class="q-pa-xl text-center">
+                        <q-icon color="negative" name="sym_r_warning" size="2em" />
+                      </div>
+
+                      <q-form v-else class="q-gutter-y-md q-pa-md" @submit.prevent="filter()">
+                        <div v-for="(field, index) in fields" :key="index">
+                          <qas-field v-model="filters[field.name]" :data-cy="`filters-${field.name}-field`" :field="field" v-bind="fieldsProps[field.name]" />
                         </div>
 
-                        <div class="col-6">
-                          <qas-btn class="full-width" color="primary" data-cy="filters-submit-btn" label="Filtrar" size="12px" type="submit" />
+                        <div class="q-col-gutter-x-md q-mt-xl row">
+                          <div class="col-6">
+                            <qas-btn class="full-width" data-cy="filters-clear-btn" label="Limpar" outline size="12px" @click="clearFilters" />
+                          </div>
+
+                          <div class="col-6">
+                            <qas-btn class="full-width" color="primary" data-cy="filters-submit-btn" label="Filtrar" size="12px" type="submit" />
+                          </div>
                         </div>
-                      </div>
-                    </q-form>
-                  </q-menu>
-                </qas-btn>
-              </template>
-            </qas-input>
+                      </q-form>
+                    </q-menu>
+                  </qas-btn>
+                </template>
+              </qas-input>
+            </div>
           </q-form>
         </slot>
       </div>
@@ -225,6 +227,7 @@ export default {
   created () {
     this.fetchFilters()
     this.watchOnceFields()
+    this.handleSearchModelOnCreate()
   },
 
   methods: {
@@ -322,8 +325,9 @@ export default {
     },
 
     updateValues () {
-      const { filters, search } = this.mx_context
-      this.search = search || ''
+      this.setSearch()
+
+      const { filters } = this.mx_context
 
       for (const key in filters) {
         this.filters[key] = parseValue(this.normalizeValues(filters[key], this.fields[key]?.multiple))
@@ -343,6 +347,15 @@ export default {
           watchOnce()
         }
       })
+    },
+
+    handleSearchModelOnCreate () {
+      !this.useFilterButton && this.setSearch()
+    },
+
+    setSearch () {
+      const { search } = this.mx_context
+      this.search = search || ''
     }
   }
 }
@@ -351,41 +364,43 @@ export default {
 <style lang="scss">
 // TODO rever
 .qas-filters {
-  .q-field::before {
-    border: 2px solid transparent;
-    border-radius: 4px;
-    bottom: 0;
-    content: '';
-    left: 0;
-    pointer-events: none;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transition: border-color var(--qas-generic-transition);
-  }
+  &__input-content {
+    .q-field {
+      &::before {
+        border: 2px solid transparent;
+        border-radius: var(--qas-generic-border-radius);
+        bottom: 0;
+        content: '';
+        left: 0;
+        pointer-events: none;
+        position: absolute;
+        right: 0;
+        top: 0;
+        transition: border-color var(--qas-generic-transition);
+      }
 
-  .q-field--focused::before {
-    border-color: var(--q-primary);
-    color: var(--q-primary);
-  }
+      &--dense .q-field__prepend {
+        padding-right: var(--qas-spacing-xs);
+      }
 
-  .q-field--dense .q-field__prepend {
-    padding-right: var(--qas-spacing-xs);
-  }
+      &--dense .q-field__append {
+        padding-left: var(--qas-spacing-sm);
+      }
 
-  .q-field--dense .q-field__append {
-    padding-left: var(--qas-spacing-sm);
-  }
+      &--focused::before {
+        border-color: var(--q-primary);
+        color: var(--q-primary);
+      }
 
-  &__input {
-    .q-field__control::before,
-    .q-field__control::after {
-      display: none;
-    }
+      &__control::after,
+      &__control::before {
+        display: none !important;
+      }
 
-    .q-field__native {
-      padding-bottom: var(--qas-spacing-sm);
-      padding-top: var(--qas-spacing-sm);
+      &__native {
+        padding-bottom: var(--qas-spacing-sm);
+        padding-top: var(--qas-spacing-sm);
+      }
     }
   }
 }

package/src/components/search-box/QasSearchBox.vue

@@ -153,7 +153,6 @@ export default {
 
     defaultFuseOptions () {
       return {
-        threshold: 0.1,
         ignoreLocation: true,
 
         ...this.fuseOptions

package/src/components/search-box/QasSearchBox.yml

@@ -34,7 +34,7 @@ props:
     examples: ["{ keys: ['label'] }"]
     default:
       ignoreLocation: true
-      threshold: 0.1
+      threshold: 0.6
 
   height:
     desc: Define altura do box quando a lista não está vazia.

package/src/components/select/QasSelect.vue

@@ -105,7 +105,6 @@ export default {
       return {
         ignoreLocation: true,
         keys: ['label', 'value'],
-        threshold: 0.1,
 
         ...this.fuseOptions
       }

package/src/components/select/QasSelect.yml

@@ -27,7 +27,7 @@ props:
     default:
       ignoreLocation: true
       keys: [label, value]
-      threshold: 0.1
+      threshold: 0.6
 
   label-key:
     desc: O componente internamente espera receber na propriedade "options" um array de objeto contendo "label" e "value", caso o seu objeto não tenha "label" mas um "name" por exemplo, você pode definir esta prop "label-key" como "name".

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,7 +57,8 @@ export default {
     return {
       maxPossibleWidth: '',
       showDialog: false,
-      textWidth: ''
+      textWidth: '',
+      observer: null
     }
   },
 
@@ -98,6 +96,11 @@ export default {
 
   mounted () {
     this.truncateText()
+    this.observeContentChange()
+  },
+
+  unmounted () {
+    this.observer.disconnect()
   },
 
   methods: {
@@ -110,6 +113,18 @@ export default {
 
     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/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/vue-plugin.js

@@ -5,6 +5,7 @@ import QasAppBar from './components/app-bar/QasAppBar.vue'
 import QasAppMenu from './components/app-menu/QasAppMenu.vue'
 import QasAppUser from './components/app-user/QasAppUser.vue'
 import QasAvatar from './components/avatar/QasAvatar.vue'
+import QasBadge from './components/badge/QasBadge.vue'
 import QasBox from './components/box/QasBox.vue'
 import QasBreakline from './components/breakline/QasBreakline.vue'
 import QasBtn from './components/btn/QasBtn.vue'
@@ -45,6 +46,7 @@ import QasSignaturePad from './components/signature-pad/QasSignaturePad.vue'
 import QasSignatureUploader from './components/signature-uploader/QasSignatureUploader.vue'
 import QasSingleView from './components/single-view/QasSingleView.vue'
 import QasSortable from './components/sortable/QasSortable.vue'
+import QasStatus from './components/status/QasStatus.vue'
 import QasTableGenerator from './components/table-generator/QasTableGenerator.vue'
 import QasTabsGenerator from './components/tabs-generator/QasTabsGenerator.vue'
 import QasTextTruncate from './components/text-truncate/QasTextTruncate.vue'
@@ -80,6 +82,7 @@ function install (app) {
   app.component('QasAppMenu', QasAppMenu)
   app.component('QasAppUser', QasAppUser)
   app.component('QasAvatar', QasAvatar)
+  app.component('QasBadge', QasBadge)
   app.component('QasBox', QasBox)
   app.component('QasBreakline', QasBreakline)
   app.component('QasBtn', QasBtn)
@@ -120,6 +123,7 @@ function install (app) {
   app.component('QasSignatureUploader', QasSignatureUploader)
   app.component('QasSingleView', QasSingleView)
   app.component('QasSortable', QasSortable)
+  app.component('QasStatus', QasStatus)
   app.component('QasTableGenerator', QasTableGenerator)
   app.component('QasTabsGenerator', QasTabsGenerator)
   app.component('QasTextTruncate', QasTextTruncate)
@@ -156,6 +160,7 @@ export {
   QasAppMenu,
   QasAppUser,
   QasAvatar,
+  QasBadge,
   QasBox,
   QasBreakline,
   QasBtn,
@@ -196,6 +201,7 @@ export {
   QasSignatureUploader,
   QasSingleView,
   QasSortable,
+  QasStatus,
   QasTableGenerator,
   QasTabsGenerator,
   QasTextTruncate,