@bildvitta/quasar-ui-asteroid 3.17.0-beta.7 → 3.17.0-beta.9

package/package.json

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

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

@@ -263,9 +263,11 @@ export default {
     },
 
     parentComponentProps () {
+      const hasMinHeight = this.isFetching || this.hasDataSets
+
       return {
         class: 'relative-position',
-        style: `min-height: ${this.hasDataSets ? this.height : 'auto'}`
+        style: `min-height: ${hasMinHeight ? this.height : 'auto'}`
       }
     },
 

package/src/components/select/QasSelect.vue

@@ -1,7 +1,7 @@
 <template>
-  <q-select v-model="model" v-bind="attributes" class="qas-select" :class="componentClasses" no-error-icon :outlined="false">
-    <template v-if="isSearchable" #prepend>
-      <q-icon name="sym_r_search" />
+  <q-select v-model="model" v-bind="attributes" class="qas-select" :class="componentClasses" no-error-icon>
+    <template v-if="hasIcon" #prepend>
+      <q-icon :name="defaultIcon" />
     </template>
 
     <template #no-option>
@@ -77,6 +77,11 @@ export default {
 
   mixins: [searchFilterMixin],
 
+  inject: {
+    isBox: { default: false },
+    isDialog: { default: false }
+  },
+
   props: {
     badgeProps: {
       default: () => ({}),
@@ -88,6 +93,11 @@ export default {
       type: Object
     },
 
+    icon: {
+      type: String,
+      default: ''
+    },
+
     label: {
       type: String,
       default: ''
@@ -132,6 +142,10 @@ export default {
     useSearch: {
       type: Boolean,
       default: undefined
+    },
+
+    useFilterMode: {
+      type: Boolean
     }
   },
 
@@ -150,7 +164,7 @@ export default {
         clearable: this.isSearchable,
         emitValue: true,
         mapOptions: true,
-        outlined: true,
+        outlined: this.useFilterMode,
         dense: true,
         dropdownIcon: 'sym_r_expand_more',
         clearIcon: 'sym_r_close',
@@ -188,6 +202,10 @@ export default {
       return this.hasFuse || this.useLazyLoading
     },
 
+    isBordered () {
+      return (this.isBox || this.isDialog) && this.useFilterMode
+    },
+
     hasError () {
       return this.mx_hasFetchError || this.$attrs.error
     },
@@ -235,7 +253,13 @@ export default {
     // redesign
     componentClasses () {
       return {
-        'qas-select--has-icon': this.isSearchable || this.hasAppend,
+        ...(this.useFilterMode && {
+          'qas-select--filter rounded-borders': true,
+          'shadow-2': !this.isBordered,
+          bordered: this.isBordered
+        }),
+
+        'qas-select--has-icon': this.hasAppend || this.hasIcon,
         'qas-select--closed': !this.isPopupContentOpen,
         'qas-select--loading': this.hasLoading
       }
@@ -251,6 +275,14 @@ export default {
 
     hasAppend () {
       return !!this.$slots.append
+    },
+
+    defaultIcon () {
+      return this.icon || 'sym_r_search'
+    },
+
+    hasIcon () {
+      return this.isSearchable || !!this.icon
     }
   },
 
@@ -429,6 +461,12 @@ export default {
     }
   }
 
+  &--filter {
+    .q-field__control:before {
+      border: 0;
+    }
+  }
+
   &__menu {
     .q-item {
       font-weight: 400 !important;

package/src/components/select/QasSelect.yml

@@ -35,6 +35,11 @@ props:
       keys: [label, value]
       threshold: 0.4
 
+  icon:
+    desc: Ícone da esquerda.
+    type: String
+    default: ''
+
   label:
     desc: Label do componente.
     type: String

package/src/css/components/field.scss

@@ -44,15 +44,15 @@
   &--focused.q-field--labeled {
     transition: transform var(--qas-generic-transition), font-size var(--qas-generic-transition);
 
-    .q-field__label {
+    &:not(&.qas-select--filter):not(&.qas-select--has-icon) .q-field__label {
       transform: translateY(-10px) scale(0.85) !important;
     }
 
-    .q-field__prepend {
-      transition: transform var(--qas-generic-transition);
-      transform: translateY(6px) !important;
+    &.qas-select--filter:not(&.qas-select--has-icon) .q-field__label {
+      transform: translateY(-8px) scale(0.85) !important;
     }
 
+    .q-field__prepend,
     .q-field__append {
       transition: transform var(--qas-generic-transition);
       transform: translateY(6px) !important;
@@ -65,8 +65,8 @@
 
   &--float.qas-numeric-input--has-icon,
   &--focused.qas-numeric-input--has-icon,
-  &--float.qas-select--has-icon,
-  &--focused.qas-select--has-icon,
+  &--float.qas-select--has-icon:not(.qas-select--filter),
+  &--focused.qas-select--has-icon:not(.qas-select--filter),
   &--float.qas-input--has-icon,
   &--focused.qas-input--has-icon {
     .q-field__label {
@@ -74,6 +74,13 @@
     }
   }
 
+  &--float.qas-select--has-icon.qas-select--filter,
+  &--focused.qas-select--has-icon.qas-select--filter {
+    .q-field__label {
+      transform: translate(-24px, -8px) scale(0.85) !important;
+    }
+  }
+
   &--outlined .q-field__control {
     background-color: white;
     border-radius: $generic-border-radius;