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

package/package.json

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

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

@@ -81,6 +81,13 @@ export default {
        */
       btnPropsDefaults: {
         size: 'sm'
+      },
+
+      /**
+       * @see QasTextTruncate.vue - Injetando os valores padrões para o QasTextTruncate.
+       */
+      textTruncatePropsDefaults: {
+        typography: 'body2'
       }
     }
   },
@@ -577,10 +584,11 @@ export default {
         }
       }
 
+      line-height: 100% !important;
       padding-bottom: var(--qas-spacing-sm);;
       padding-left: 0;
-      padding-top: 0;
       padding-right: var(--qas-spacing-md);
+      padding-top: 0;
     }
 
     td,
@@ -601,6 +609,10 @@ export default {
       z-index: 0;
       padding-right: var(--qas-spacing-md);
 
+      * {
+        line-height: 100% !important;
+      }
+
       &::before {
         position: absolute;
         content: '';

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

@@ -1,6 +1,6 @@
 <template>
   <div ref="parent" :class="classes">
-    <div class="no-wrap row text-no-wrap">
+    <div class="items-center no-wrap row text-no-wrap">
       <!-- "data-table-hover" habilita o hover no texto dentro do QasTableGenerator -->
       <div ref="truncate" class="ellipsis" data-table-hover>
         <slot>
@@ -51,6 +51,8 @@ import {
   onMounted,
   onUnmounted,
   ref,
+  inject,
+  isRef,
   watch
 } from 'vue'
 
@@ -100,7 +102,7 @@ const props = defineProps({
 
   typography: {
     type: String,
-    default: 'body1'
+    default: undefined
   },
 
   list: {
@@ -121,6 +123,9 @@ const props = defineProps({
   }
 })
 
+// globals
+const injectedDefaults = inject('textTruncatePropsDefaults', {}) // Inject reativo ou não reativo com fallback vazio
+
 // template refs
 const truncate = ref(null)
 const parent = ref(null)
@@ -158,7 +163,25 @@ const {
 useMutationObserver({ truncate, callbackFn: truncateText })
 
 // computeds
-const classes = computed(() => [`text-${props.color}`, `text-${props.typography}`])
+/**
+ * Seta os valores padrões, dando prioridade:
+ *  1. Props
+ *  2. Injetado (pode ser reativo ou não reativo)
+ *  3. Caso esteja dentro do QasBox, seta o size para 'sm' se for primary ou secondary.
+ *  4. Hardcoded (tertiary, md, primary)
+ */
+const textTruncatePropsDefaults = computed(() => {
+  const defaultProps = isRef(injectedDefaults) ? injectedDefaults.value : injectedDefaults
+
+  return {
+    typography: 'body1',
+    ...defaultProps
+  }
+})
+
+const defaultTypography = computed(() => props.typography || textTruncatePropsDefaults.value.typography)
+
+const classes = computed(() => [`text-${props.color}`, `text-${defaultTypography.value}`])
 
 const formattedText = computed(() => props.list.length || props.text ? displayText.value : props.emptyText)
 

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

@@ -1,5 +1,6 @@
 <template>
-  <div class="qas-toggle-visibility">
+  <!-- "data-no-grab" para prevenir o click drag  -->
+  <div class="qas-toggle-visibility" data-no-grab>
     <!-- "data-table-ignore-tr-hover" é para desabilitar o hover do tr no QasTableGenerator -->
     <div :aria-expanded="isVisible" aria-label="Alternar visibilidade do conteúdo" class="cursor-pointer items-center no-wrap qas-toggle-visibility__container row" data-table-ignore-tr-hover role="button" :style @click.prevent.stop="toggleVisibility">
       <div class="ellipsis qas-toggle-visibility__content">

package/src/css/components/button.scss

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

package/src/helpers/set-scroll-on-grab.js

@@ -49,10 +49,13 @@ export default function (element, options = {}, cancelMouseDownTarget) {
   function onMouseEnter (event) {
     /**
      * closest busca ancestral mais próximo de um elemento, ou seja, verifica se no event que recebo, tenho a classe no qual nao se deve aplicar o grab.
-     */
-    const targetElement = cancelMouseDownTarget ? event.target.closest(`.${cancelMouseDownTarget}`) : null
+    */
 
-    if (!!cancelMouseDownTarget && !!targetElement) return null
+    const elementListToCancel = ['button', `.${cancelMouseDownTarget}`, '[data-no-grab]']
+
+    const canCancelMouseDownTarget = elementListToCancel.some(tag => event.target.closest(tag))
+
+    if (canCancelMouseDownTarget) return
 
     onEnter()