@bildvitta/quasar-ui-asteroid 3.15.0-beta.13 → 3.15.0-beta.15

package/package.json

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

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

@@ -47,7 +47,7 @@ import {
 import { Bar as BarChart, Doughnut as DoughnutChart, Line as LineChart } from 'vue-chartjs'
 
 // Configurações padrões
-import { charts, colors, font } from './config'
+import { charts, colors as defaultColors, font } from './config'
 
 // Plugins
 import zoomPlugin from 'chartjs-plugin-zoom'
@@ -79,6 +79,11 @@ export default {
       type: Function
     },
 
+    colorsList: {
+      type: Array,
+      default: () => []
+    },
+
     entity: {
       required: true,
       type: String
@@ -161,6 +166,7 @@ export default {
 
       const [dataset] = this.data
       const labels = this.getXAxisData(dataset.data.map(item => item.x))
+      const colors = this.colorsList.length ? this.colorsList : defaultColors
 
       const datasets = this.data.map(({ label, data }, index) => {
         const backgroundColor = this.isDoughnut ? colors : colors.at(index)

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

@@ -10,6 +10,12 @@ props:
     type: Function
     examples: ['beforeFetch({ payload, resolve, done })']
 
+  colors-list:
+    desc: Lista de cores personalizadas para utilizar nos gráficos
+    default: []
+    type: Array,
+    examples: ['#34B53A', '#016DD9', '#FFB200', '#F62D1B']
+
   entity:
     desc: Entidade da store, por exemplo se tiver que trabalhar com modulo de usuários, teremos o model "users" na store, que vai ser nossa "entity".
     required: true

package/src/components/expansion-item/QasExpansionItem.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="qas-expansion-item" :class="errorClasses">
+    <qas-box class="qas-expansion-item__box">
+      <q-expansion-item header-class="text-bold q-mt-sm q-pa-none" :label="props.label">
+        <template #header>
+          <slot name="header">
+            <div class="full-width">
+              <div class="items-center q-col-gutter-sm row">
+                <slot name="label">
+                  <h5 class="col-auto text-h5 text-weight-medium">
+                    {{ props.label }}
+                  </h5>
+                </slot>
+
+                <div class="col-auto items-center q-col-gutter-sm row">
+                  <div v-for="(badge, badgeIndex) in props.badges" :key="badgeIndex" class="col-auto">
+                    <qas-badge v-bind="badge" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </slot>
+        </template>
+
+        <q-separator class="q-my-md" />
+
+        <slot name="content">
+          <qas-grid-generator v-if="hasGridGenerator" v-bind="gridGeneratorProps" use-inline />
+        </slot>
+      </q-expansion-item>
+    </qas-box>
+
+    <div v-if="hasError" class="q-pt-sm qas-expansion-item__error-message text-caption text-negative">
+      {{ props.errorMessage }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+defineOptions({ name: 'QasExpansionItem' })
+
+const props = defineProps({
+  badges: {
+    type: Array,
+    default: () => []
+  },
+
+  error: {
+    type: Boolean
+  },
+
+  errorMessage: {
+    type: String,
+    default: ''
+  },
+
+  label: {
+    type: String,
+    default: ''
+  },
+
+  gridGeneratorProps: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const hasError = computed(() => props.error || !!props.errorMessage)
+
+const errorClasses = computed(() => ({ 'qas-expansion-item--error': hasError.value }))
+
+const hasGridGenerator = computed(() => !!Object.keys(props.gridGeneratorProps).length)
+</script>
+
+<style lang="scss">
+.qas-expansion-item {
+  $root: &;
+
+  &--error {
+    #{$root}__box {
+      border: 2px solid $negative;
+    }
+
+    #{$root}__error-message {
+      padding-left: 12px; // espaçamento igual ao de erro do quasar.
+    }
+  }
+
+  .q-item {
+    margin-top: 0;
+    min-height: auto;
+  }
+
+  .q-item:hover {
+    color: initial !important;
+  }
+}
+</style>

package/src/components/expansion-item/QasExpansionItem.yml

@@ -0,0 +1,35 @@
+type: component
+
+meta:
+  desc: Componente de card expansivo, wrapper do QExpansionItem(https://quasar.dev/vue-components/expansion-item)
+
+props:
+  badges:
+    desc: Lista de badges que serão exibidas na parte superior do card.
+    type: Array
+
+  error:
+    desc: Booleano que caso seja true o card passa a ter uma borda vermelha.
+    type: Boolean
+
+  error-message:
+    desc: Mensagem de erro onde será exibida na parte inferior do card.
+    type: String
+
+  label:
+    desc: Titulo exibido na parte superior do card.
+    type: String
+
+  grid-generator-props:
+    desc: Propriedades que serão repassadas para o QasGridGenerator.
+    type: Object
+
+slots:
+  header:
+    desc: 'Slot para substituir o conteúdo do header'
+
+  label:
+    desc: 'Slot para substituir o conteúdo da label do header.'
+
+  content:
+    desc: 'Slot para substituir o conteúdo principal do card.'

package/src/components/grid-generator/QasGridGenerator.vue

@@ -40,7 +40,7 @@ const props = defineProps({
   },
 
   headerClass: {
-    default: 'text-bold',
+    default: '',
     type: [Array, Object, String]
   },
 
@@ -77,37 +77,24 @@ const hasResult = computed(() => Object.keys(props.result).length)
 const hasFields = computed(() => Object.keys(props.fields).length)
 
 const contentClass = computed(() => {
-  if (!props.useEllipsis || (screen.isSmall && props.useEllipsis)) return props.contentClass
-
-  if (Array.isArray(props.contentClass)) {
-    return [...props.contentClass, 'ellipsis']
-  }
+  return [
+    props.contentClass,
 
-  if (typeof props.contentClass === 'string') {
-    return `${props.contentClass} ellipsis`
-  }
-
-  return {
-    ...props.contentClass,
-    ellipsis: true
-  }
+    {
+      ellipsis: !screen.isSmall && props.useEllipsis
+    }
+  ]
 })
 
 const headerClass = computed(() => {
-  if (!props.useEllipsis || (screen.isSmall && props.useEllipsis)) return props.headerClass
+  return [
+    props.headerClass,
 
-  if (Array.isArray(props.headerClass)) {
-    return [...props.headerClass, 'ellipsis']
-  }
-
-  if (typeof props.headerClass === 'string') {
-    return `${props.headerClass} ellipsis`
-  }
-
-  return {
-    ...props.headerClass,
-    ellipsis: true
-  }
+    {
+      ellipsis: !screen.isSmall && props.useEllipsis,
+      'text-bold': screen.isSmall || !props.useInline
+    }
+  ]
 })
 
 const classes = computed(() => {

package/src/vue-plugin.js

@@ -23,6 +23,7 @@ import QasDialog from './components/dialog/QasDialog.vue'
 import QasDialogRouter from './components/dialog-router/QasDialogRouter.vue'
 import QasDrawer from './components/drawer/QasDrawer.vue'
 import QasEmptyResultText from './components/empty-result-text/QasEmptyResultText.vue'
+import QasExpansionItem from './components/expansion-item/QasExpansionItem.vue'
 import QasField from './components/field/QasField.vue'
 import QasFilters from './components/filters/QasFilters.vue'
 import QasFormGenerator from './components/form-generator/QasFormGenerator.vue'
@@ -115,6 +116,7 @@ async function install (app) {
   app.component('QasDialogRouter', QasDialogRouter)
   app.component('QasDrawer', QasDrawer)
   app.component('QasEmptyResultText', QasEmptyResultText)
+  app.component('QasExpansionItem', QasExpansionItem)
   app.component('QasField', QasField)
   app.component('QasFilters', QasFilters)
   app.component('QasFormGenerator', QasFormGenerator)
@@ -208,6 +210,7 @@ export {
   QasDialogRouter,
   QasDrawer,
   QasEmptyResultText,
+  QasExpansionItem,
   QasField,
   QasFilters,
   QasFormGenerator,