@bildvitta/quasar-ui-asteroid 3.13.0-beta.8 → 3.13.0

package/src/components/btn/QasBtn.vue

@@ -2,150 +2,147 @@
   <q-btn ref="button" class="qas-btn" v-bind="attributes">
     <slot />
 
-    <template v-for="(_, name) in slots" #[name]="context">
+    <template v-for="(_, name) in nonDefaultSlots" #[name]="context">
       <slot :name="name" v-bind="context || {}" />
     </template>
   </q-btn>
 </template>
 
-<script>
-export default {
+<script setup>
+import { useScreen } from '../../composables'
+
+import { computed, useAttrs, useSlots } from 'vue'
+
+defineOptions({
   name: 'QasBtn',
+  inheritAttrs: false
+})
+
+const props = defineProps({
+  color: {
+    default: 'primary',
+    type: String,
+    validator: value => ['grey-10', 'primary', 'white'].includes(value)
+  },
 
-  inheritAttrs: false,
-
-  props: {
-    color: {
-      default: 'primary',
-      type: String,
-      validator: value => ['grey-9', 'primary', 'white'].includes(value)
-    },
-
-    icon: {
-      type: String,
-      default: undefined
-    },
-
-    iconRight: {
-      type: String,
-      default: undefined
-    },
-
-    useLabelOnSmallScreen: {
-      default: true,
-      type: Boolean
-    },
-
-    label: {
-      default: '',
-      type: String
-    },
-
-    variant: {
-      type: String,
-      default: 'tertiary',
-      validator: value => {
-        const variants = ['primary', 'secondary', 'tertiary']
-
-        return variants.includes(value)
-      }
-    },
-
-    useEllipsis: {
-      type: Boolean
-    },
-
-    useHoverOnWhiteColor: {
-      default: true,
-      type: Boolean
-    }
+  icon: {
+    default: undefined,
+    type: String
+  },
+
+  iconRight: {
+    default: undefined,
+    type: String
+  },
+
+  useLabelOnSmallScreen: {
+    default: true,
+    type: Boolean
   },
 
-  computed: {
-    attributes () {
-      const {
-        dense,
-        fab,
-        fabMini,
-        flat,
-        glossy,
-        noWrap,
-        outline,
-        padding,
-        push,
-        ripple,
-        round,
-        size,
-        square,
-        stack,
-        stretch,
-        textColor,
-        unelevated,
-        class: externalClass,
-        ...attributes
-      } = this.$attrs
-
-      return {
-        ...(this.showLabel && { label: this.label }),
-
-        ...attributes,
-        icon: this.icon,
-        iconRight: this.iconRight,
-        class: [this.classes, externalClass]
-      }
-    },
-
-    hasIconOnly () {
-      return (
-        (!this.label || !this.showLabel) &&
-        ((this.icon && !this.iconRight) || (this.iconRight && !this.icon))
-      )
-    },
-
-    classes () {
-      return {
-        'qas-btn--primary': this.isPrimary,
-        'qas-btn--secondary': this.isSecondary,
-        'qas-btn--tertiary': this.isTertiary,
-
-        // color
-        [`qas-btn--tertiary-${this.color}`]: this.isTertiary,
-
-        // icon
-        'qas-btn--icon-only': this.hasIconOnly,
-
-        'qas-btn--primary-icon-only': this.hasIconOnly && this.isPrimary,
-        'qas-btn--secondary-icon-only': this.hasIconOnly && this.isSecondary,
-        'qas-btn--tertiary-icon-only': this.hasIconOnly && this.isTertiary,
-
-        // hover
-        'qas-btn--no-hover-on-white': !this.useHoverOnWhiteColor,
-
-        // ellipsis
-        'qas-btn--ellipsis': this.useEllipsis
-      }
-    },
-
-    isPrimary () {
-      return this.variant === 'primary'
-    },
-
-    isSecondary () {
-      return this.variant === 'secondary'
-    },
-
-    isTertiary () {
-      return this.variant === 'tertiary'
-    },
-
-    showLabel () {
-      return this.useLabelOnSmallScreen || !this.$qas.screen.isSmall
-    },
-
-    slots () {
-      const { default: _, ...slots } = this.$slots
-      return slots
+  label: {
+    default: '',
+    type: String
+  },
+
+  variant: {
+    default: 'tertiary',
+    type: String,
+    validator: value => {
+      const variants = ['primary', 'secondary', 'tertiary']
+
+      return variants.includes(value)
     }
+  },
+
+  useEllipsis: {
+    type: Boolean
+  },
+
+  useHoverOnWhiteColor: {
+    default: true,
+    type: Boolean
   }
-}
+})
+
+const attrs = useAttrs()
+const slots = useSlots()
+const screen = useScreen()
+
+// variantes
+const isPrimary = computed(() => props.variant === 'primary')
+const isSecondary = computed(() => props.variant === 'secondary')
+const isTertiary = computed(() => props.variant === 'tertiary')
+
+const showLabel = computed(() => props.useLabelOnSmallScreen || !screen.isSmall)
+
+const hasIconOnly = computed(() => {
+  return (
+    (!props.label || !showLabel.value) &&
+    ((props.icon && !props.iconRight) || (props.iconRight && !props.icon))
+  )
+})
+
+const classes = computed(() => {
+  return {
+    'qas-btn--primary': isPrimary.value,
+    'qas-btn--secondary': isSecondary.value,
+    'qas-btn--tertiary': isTertiary.value,
+
+    // color
+    [`qas-btn--tertiary-${props.color}`]: isTertiary.value,
+
+    // icon
+    'qas-btn--icon-only': hasIconOnly.value,
+
+    'qas-btn--primary-icon-only': hasIconOnly.value && isPrimary.value,
+    'qas-btn--secondary-icon-only': hasIconOnly.value && isSecondary.value,
+    'qas-btn--tertiary-icon-only': hasIconOnly.value && isTertiary.value,
+
+    // hover
+    'qas-btn--no-hover-on-white': !props.useHoverOnWhiteColor,
+
+    // ellipsis
+    'qas-btn--ellipsis': props.useEllipsis
+  }
+})
+
+const attributes = computed(() => {
+  const {
+    dense,
+    fab,
+    fabMini,
+    flat,
+    glossy,
+    noWrap,
+    outline,
+    padding,
+    push,
+    ripple,
+    round,
+    size,
+    square,
+    stack,
+    stretch,
+    textColor,
+    unelevated,
+    class: externalClass,
+    ...attributesPayload
+  } = attrs
+
+  return {
+    ...(showLabel.value && { label: props.label }),
+
+    ...attributesPayload,
+    icon: props.icon,
+    iconRight: props.iconRight,
+    class: [classes.value, externalClass]
+  }
+})
+
+const nonDefaultSlots = computed(() => {
+  const { default: _, ...nonDefaults } = slots
+
+  return nonDefaults
+})
 </script>

package/src/components/btn/QasBtn.yml

@@ -8,10 +8,10 @@ meta:
 
 props:
   color:
-    desc: Cor do botão, sendo possível alterar somente quando a variante for "tertiary", podendo ser "primary", "grey-9" ou "white".
+    desc: Cor do botão, sendo possível alterar somente quando a variante for "tertiary", podendo ser "primary", "grey-10" ou "white".
     default: primary
     type: String
-    examples: ['grey-9', 'primary', 'white']
+    examples: ['grey-10', 'primary', 'white']
 
   icon:
     desc: Ícone a esquerda.
@@ -45,4 +45,4 @@ props:
     desc: Variantes do botão, que define para qual comportamento o botão será usado, podendo ser "primary", "secondary" ou "tertiary".
     default: tertiary
     type: String
-    examples: ['primary', 'secondary', 'tertiary']
+    examples: ['primary', 'secondary', 'tertiary']

package/src/components/btn-dropdown/QasBtnDropdown.vue

@@ -15,7 +15,7 @@
     <q-separator v-if="hasSeparator" class="q-mr-sm qas-btn-dropdown__separator self-center" dark vertical />
 
     <div v-if="useSplit">
-      <qas-btn color="grey-9" :icon="dropdownIcon" variant="tertiary">
+      <qas-btn color="grey-10" :icon="dropdownIcon" variant="tertiary">
         <q-menu v-if="hasDefaultSlot" anchor="bottom right" auto-close self="top right">
           <div :class="menuContentClasses">
             <slot />
@@ -106,7 +106,7 @@ export default {
 
         ...defaultProps,
 
-        color: color || (!this.useSplit ? 'grey-9' : 'primary'),
+        color: color || (!this.useSplit ? 'grey-10' : 'primary'),
         ...(!this.useSplit && { iconRight: defaultIconRight }),
         ...(this.useSplit && { icon })
       }

package/src/components/chart-view/QasChartView.vue

@@ -1,9 +1,9 @@
 <template>
   <qas-header-actions v-if="hasHeaderActions" align-columns="end">
     <template #left>
-      <div v-if="title" class="text-grey-9 text-h3">
+      <h3 v-if="title" class="text-h3">
         {{ title }}
-      </div>
+      </h3>
 
       <div v-if="subtitle" class="text-body1 text-grey-8">
         {{ subtitle }}

package/src/components/date/QasDate.vue

@@ -559,7 +559,7 @@ export default {
       justify-content: space-between;
 
       .q-btn {
-        @include set-button(tertiary, false, false, grey-9);
+        @include set-button(tertiary, false, false, grey-10);
         @include set-typography($subtitle2);
 
         .q-icon {
@@ -592,7 +592,7 @@ export default {
           color: $primary !important;
         }
 
-        @include set-button(tertiary, false, false, grey-9);
+        @include set-button(tertiary, false, false, grey-10);
       }
     }
 
@@ -601,7 +601,7 @@ export default {
     }
 
     &__calendar-days-container {
-      color: $grey-9;
+      color: $grey-10;
       min-height: auto;
 
       .q-btn {

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

@@ -1,13 +1,13 @@
 <template>
   <qas-input ref="input" v-bind="attributes" v-model="currentValue" inputmode="numeric" :unmasked-value="false" @blur="validateDateTimeOnBlur" @focus="resetError" @update:model-value="updateModelValue">
     <template #append>
-      <qas-btn v-if="!useTimeOnly" color="grey-9" :disable="$attrs.readonly" icon="sym_r_event" variant="tertiary">
+      <qas-btn v-if="!useTimeOnly" color="grey-10" :disable="$attrs.readonly" icon="sym_r_event" variant="tertiary">
         <q-popup-proxy ref="dateProxy" transition-hide="scale" transition-show="scale" v-bind="datePopupProxyProps">
           <qas-date v-model="currentValue" v-bind="defaultDateProps" :mask="maskDate" width="290px" @update:model-value="updateModelValue" />
         </q-popup-proxy>
       </qas-btn>
 
-      <qas-btn v-if="!useDateOnly" class="q-ml-sm" color="grey-9" :disable="$attrs.readonly" icon="sym_r_access_time">
+      <qas-btn v-if="!useDateOnly" class="q-ml-sm" color="grey-10" :disable="$attrs.readonly" icon="sym_r_access_time">
         <q-popup-proxy ref="timeProxy" transition-hide="scale" transition-show="scale" v-bind="timePopupProxyProps">
           <q-time v-model="currentValue" v-bind="defaultTimeProps" format24h :mask="maskDate" @update:model-value="updateModelValue" />
         </q-popup-proxy>

package/src/components/delete/QasDelete.vue

@@ -69,7 +69,7 @@ export default {
     attributes () {
       return {
         ...this.$attrs,
-        color: this.isButton ? 'grey-9' : this.$attrs.color
+        color: this.isButton ? 'grey-10' : this.$attrs.color
       }
     },