@bildvitta/quasar-ui-asteroid 3.20.0-beta.1 → 3.20.0-beta.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.20.0-beta.1",
+  "version": "3.20.0-beta.2",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "./src/asteroid.js",

package/src/components/actions-menu/QasActionsMenu.vue

@@ -86,6 +86,10 @@ const props = defineProps({
     type: String
   },
 
+  useDropdownAlways: {
+    type: Boolean
+  },
+
   useLabel: {
     default: true,
     type: Boolean
@@ -209,7 +213,13 @@ const formattedList = computed(() => {
    */
   const payload = { dropdownList: {}, buttonsList: {} }
 
-  if ((!hasSplitName.value || screen.isSmall) && !isSingle.value) {
+  /**
+   * Se a prop "useDropdownAlways" for true, significa que sempre usaremos o dropdown,
+   * mesmo que tenha apenas 1 item na lista ou que não tenha splitName.
+   * Também se não tiver splitName e a tela for pequena (mobile/tablet) e não for
+   * single, usaremos o dropdown.
+   */
+  if (props.useDropdownAlways || ((!hasSplitName.value || screen.isSmall) && !isSingle.value)) {
     const { buttonsList } = useOptionsActions({ color: DEFAULT_COLOR, props })
 
     payload.buttonsList = buttonsList.value

package/src/components/actions-menu/QasActionsMenu.yml

@@ -49,6 +49,11 @@ props:
     type: String
     examples: [visibility]
 
+  use-dropdown-always:
+    desc: Força o uso do dropdown mesmo caso tenha apenas 1 item na lista de ações.
+    default: false
+    type: Boolean
+
   use-tooltip:
     desc: Controla se vai ter o tooltip caso passe nas regras de exibição de tooltip
 

package/src/components/table-generator/QasTableGenerator.vue

@@ -36,6 +36,14 @@
           </component>
         </q-td>
       </template>
+
+      <template v-for="(column, index) in columnsWithTooltip" :key="index" #[`header-cell-${column.name}`]="context">
+        <q-th :props="context">
+          {{ context.col.label }}
+
+          <qas-tip class="q-pl-xs" :text="column.tooltip" />
+        </q-th>
+      </template>
     </q-table>
 
     <qas-empty-result-text v-if="!hasResults" />
@@ -45,9 +53,10 @@
 <script>
 import PvTableGeneratorTd from './private/PvTableGeneratorTd.vue'
 import QasBox from '../box/QasBox.vue'
+import QasCheckbox from '../checkbox/QasCheckbox.vue'
 import QasEmptyResultText from '../empty-result-text/QasEmptyResultText.vue'
 import QasHeader from '../header/QasHeader.vue'
-import QasCheckbox from '../checkbox/QasCheckbox.vue'
+import QasTip from '../tip/QasTip.vue'
 
 import { isEmpty, humanize, setScrollOnGrab, setScrollGradient } from '../../helpers'
 
@@ -61,7 +70,8 @@ export default {
     QasBox,
     QasEmptyResultText,
     QasHeader,
-    QasCheckbox
+    QasCheckbox,
+    QasTip
   },
 
   provide () {
@@ -70,7 +80,7 @@ export default {
        * @see QasBtn.vue - Injetando os valores padrões para o QasBtn.
        */
       btnPropsDefaults: {
-        size: 'md'
+        size: 'sm'
       }
     }
   },
@@ -146,6 +156,10 @@ export default {
       default: true
     },
 
+    useMultiline: {
+      type: Boolean
+    },
+
     useObjectSelectedModel: {
       type: Boolean
     },
@@ -287,7 +301,11 @@ export default {
      * caso tenha a prop "actionsMenuProps" é adicionado automaticamente a coluna "actions" como ultimo item
      */
     normalizedColumns () {
-      return this.hasActionsMenu ? [...this.columns, { name: 'actions' }] : this.columns
+      return this.hasActionsMenu ? [...this.columns, { name: 'actions', label: 'Ações' }] : this.columns
+    },
+
+    columnsWithTooltip () {
+      return this.normalizedColumns.filter(column => column.tooltip)
     },
 
     hasFields () {
@@ -301,6 +319,10 @@ export default {
 
       const mappedResults = results.map((result, index) => {
         for (const key in result) {
+          if (this.fields[key]?.type === 'object') {
+            continue
+          }
+
           const humanizedResult = humanize(this.fields[key], result[key])
           const formattedResult = isEmpty({ value: humanizedResult }) ? this.emptyResultText : humanizedResult
 
@@ -322,7 +344,8 @@ export default {
       return {
         'qas-table-generator--mobile': this.$qas.screen.isSmall,
         'qas-table-generator--sticky-header': this.useStickyHeader,
-        'qas-table-generator--has-actions': this.hasActionsMenu
+        'qas-table-generator--has-actions': this.hasActionsMenu,
+        'qas-table-generator--multiline': this.useMultiline
       }
     },
 
@@ -539,7 +562,7 @@ export default {
     }
 
     th {
-      @include set-typography($subtitle1);
+      @include set-typography($subtitle2);
 
       color: $grey-10;
 
@@ -554,18 +577,10 @@ export default {
         }
       }
 
-      border: 0 !important;
-      padding-bottom: 0;
+      padding-bottom: var(--qas-spacing-sm);;
       padding-left: 0;
       padding-top: 0;
-
-      &:not(:last-child) {
-        padding-right: var(--qas-spacing-md);
-      }
-
-      &:last-child {
-        padding-right: 0;
-      }
+      padding-right: var(--qas-spacing-md);
     }
 
     td,
@@ -576,7 +591,7 @@ export default {
     }
 
     td {
-      @include set-typography($body1);
+      @include set-typography($body2);
 
       height: 40px;
       padding-bottom: var(--qas-spacing-sm);
@@ -584,14 +599,7 @@ export default {
       padding-top: var(--qas-spacing-sm);
       position: relative;
       z-index: 0;
-
-      &:not(:last-child) {
-        padding-right: var(--qas-spacing-md);
-      }
-
-      &:last-child {
-        padding-right: 0;
-      }
+      padding-right: var(--qas-spacing-md);
 
       &::before {
         position: absolute;
@@ -648,18 +656,22 @@ export default {
     }
   }
 
+  &--multiline {
+    @media (min-width: $breakpoint-sm) {
+      .q-table td {
+        *:not(.qas-btn, .qas-btn *, .q-badge, .q-badge *){
+          white-space: normal;
+          overflow-wrap: anywhere;
+        }
+      }
+    }
+  }
+
   .q-table__container {
     margin-left: calc(var(--qas-spacing-md) * -1);
     margin-right: calc(var(--qas-spacing-md) * -1);
   }
 
-  &--has-actions {
-    td:last-child #{$root}__td-item {
-      display: flex;
-      justify-content: flex-end;
-    }
-  }
-
   &--mobile {
     margin: 0 -10px;
 

package/src/components/table-generator/QasTableGenerator.yml

@@ -99,6 +99,11 @@ props:
     default: true
     type: Boolean
 
+  use-multiline:
+    desc: Usado para permitir que o conteúdo da célula quebre linha (não permite scroll na tabela a partir de tablet).
+    default: false
+    type: Boolean
+
   use-object-selected-model:
     desc: Usado para definir o modelo de seleção como um array de objeto ao invés de um array de string.
     default: false

package/src/components/toggle-visibility/QasToggleVisibility.vue

@@ -21,12 +21,15 @@
       </div>
 
       <qas-btn class="q-ml-sm qas-toggle-visibility__button" :icon />
+
+      <qas-tooltip :text="tooltipText" />
     </div>
   </div>
 </template>
 
 <script setup>
 import QasBtn from '../btn/QasBtn.vue'
+import QasTooltip from '../tooltip/QasTooltip.vue'
 
 import { useToggleVisibility } from '../../composables/private'
 
@@ -54,6 +57,16 @@ const props = defineProps({
   width: {
     type: String,
     default: '140px'
+  },
+
+  visibleTooltip: {
+    type: String,
+    default: 'Ocultar conteúdo'
+  },
+
+  hiddenTooltip: {
+    type: String,
+    default: 'Visualizar conteúdo'
   }
 })
 
@@ -64,6 +77,7 @@ const {
 
 const icon = computed(() => isVisible.value ? 'sym_r_visibility' : 'sym_r_visibility_off')
 const style = computed(() => ({ width: props.width }))
+const tooltipText = computed(() => isVisible.value ? props.visibleTooltip : props.hiddenTooltip)
 </script>
 
 <style lang="scss">

package/src/components/toggle-visibility/QasToggleVisibility.yml

@@ -25,6 +25,16 @@ props:
     default: '140px'
     type: String
 
+  visible-tooltip:
+    desc: Texto do tooltip exibido quando o conteúdo está visível.
+    default: 'Ocultar conteúdo'
+    type: String
+
+  hidden-tooltip:
+    desc: Texto do tooltip exibido quando o conteúdo está oculto.
+    default: 'Exibir conteúdo'
+    type: String
+
 slots:
   default:
     desc: Slot para inserir conteúdo a ser oculto/exibido.

package/src/components/tooltip/QasTooltip.vue

@@ -1,10 +1,12 @@
 <template>
   <q-tooltip v-bind="tooltipProps" class="bg-grey-10 text-caption">
-    {{ props.text }}
+    <qas-breakline :text="props.text" />
   </q-tooltip>
 </template>
 
 <script setup>
+import QasBreakline from '../breakline/QasBreakline.vue'
+
 defineOptions({ name: 'QasTooltip' })
 
 const props = defineProps({
@@ -18,6 +20,7 @@ const props = defineProps({
 const tooltipProps = {
   anchor: 'center right',
   self: 'center left',
-  offset: [5, 5]
+  offset: [5, 5],
+  maxWidth: '300px'
 }
 </script>

package/src/css/components/button.scss

@@ -14,7 +14,7 @@
     padding: var(--qas-spacing-xs) var(--qas-spacing-md) !important;
 
     .q-icon {
-      font-size: 16px !important;
+      font-size: 18fpx !important;
     }
 
     &.qas-btn--icon-only.qas-btn--primary,

package/src/helpers/filters.js

@@ -88,6 +88,8 @@ function formatCompanyDocument (value) {
 }
 
 function formatDocument (value) {
+  if (!value) return ''
+
   return value.length < 12
     ? formatPersonalDocument(value)
     : formatCompanyDocument(value)