@bildvitta/quasar-ui-asteroid 3.17.0-beta.2 → 3.17.0-beta.4

package/package.json

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

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

@@ -1,31 +1,35 @@
 <template>
-  <div :class="classes">
-    <div v-for="(field, key) in fieldsByResult" :key="key" :class="getContainerClass({ key })">
-      <slot :field="field" :name="`field-${field.name}`">
-        <qas-grid-item :use-ellipsis="props.useEllipsis" :use-inline="props.useInline">
-          <template #header>
-            <slot :field="field" :name="`header-field-${field.name}`">
-              <slot :field="field" name="header">
-                <div :class="headerClass" :data-cy="`grid-generator-${field.name}-field`" :title="getTitle(field, 'label')">
-                  {{ field.label }}
-                </div>
+  <component :is="component.is" v-bind="component.props">
+    <qas-header v-if="hasHeader" v-bind="props.headerProps" />
+
+    <div :class="classes">
+      <div v-for="(field, key) in fieldsByResult" :key="key" :class="getContainerClass({ key })">
+        <slot :field="field" :name="`field-${field.name}`">
+          <qas-grid-item :use-ellipsis="props.useEllipsis" :use-inline="props.useInline">
+            <template #header>
+              <slot :field="field" :name="`header-field-${field.name}`">
+                <slot :field="field" name="header">
+                  <div :class="headerClass" :data-cy="`grid-generator-${field.name}-field`" :title="getTitle(field, 'label')">
+                    {{ field.label }}
+                  </div>
+                </slot>
               </slot>
-            </slot>
-          </template>
-
-          <template #content>
-            <slot :field="field" :name="`content-field-${field.name}`">
-              <slot :field="field" name="content">
-                <div :class="contentClass" :data-cy="`grid-generator-${field.name}-result`" :title="getTitle(field, 'formattedResult')">
-                  {{ field.formattedResult }}
-                </div>
+            </template>
+
+            <template #content>
+              <slot :field="field" :name="`content-field-${field.name}`">
+                <slot :field="field" name="content">
+                  <div :class="contentClass" :data-cy="`grid-generator-${field.name}-result`" :title="getTitle(field, 'formattedResult')">
+                    {{ field.formattedResult }}
+                  </div>
+                </slot>
               </slot>
-            </slot>
-          </template>
-        </qas-grid-item>
-      </slot>
+            </template>
+          </qas-grid-item>
+        </slot>
+      </div>
     </div>
-  </div>
+  </component>
 </template>
 
 <script setup>
@@ -44,6 +48,11 @@ const screen = useScreen()
 const props = defineProps({
   ...baseProps,
 
+  boxProps: {
+    type: Object,
+    default: () => ({})
+  },
+
   contentClass: {
     default: '',
     type: [Array, Object, String]
@@ -54,6 +63,11 @@ const props = defineProps({
     type: [Array, Object, String]
   },
 
+  headerProps: {
+    type: Object,
+    default: () => ({})
+  },
+
   emptyResultText: {
     default: '-',
     type: String
@@ -64,6 +78,10 @@ const props = defineProps({
     type: Object
   },
 
+  useBox: {
+    type: Boolean
+  },
+
   useEmptyResult: {
     default: true,
     type: Boolean
@@ -85,6 +103,7 @@ const { classes, getFieldClass } = useGenerator({ props })
 // computed
 const hasResult = computed(() => Object.keys(props.result).length)
 const hasFields = computed(() => Object.keys(props.fields).length)
+const hasHeader = computed(() => Object.keys(props.headerProps).length)
 
 const contentClass = computed(() => {
   return [
@@ -96,6 +115,13 @@ const contentClass = computed(() => {
   ]
 })
 
+const component = computed(() => {
+  return {
+    is: props.useBox ? 'qas-box' : 'div',
+    props: props.useBox ? props.boxProps : {}
+  }
+})
+
 const headerClass = computed(() => {
   return [
     props.headerClass,

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

@@ -4,6 +4,11 @@ meta:
   desc: Componente para criação de textos dinâmicos.
 
 props:
+  box-props:
+    desc: Propriedades do "QasBox" que envolve o conteúdo.
+    default: {}
+    type: Object
+
   columns:
     desc: Colunas do grid de cada campo.
     default: col-6
@@ -41,6 +46,11 @@ props:
     default: 'text-bold'
     type: [Array, Object, String]
 
+  header-props:
+    desc: Propriedades do "QasHeader".
+    default: {}
+    type: Object
+
   result:
     desc: Resultado contendo todas informações para serem exibidas na tela.
     default: {}
@@ -52,6 +62,11 @@ props:
     default: true
     type: Boolean
 
+  use-box:
+    desc: Controla se o componente vai ter o QasBox englobando ou não.
+    default: false
+    type: Boolean
+
   use-ellipsis:
     desc: Adiciona a classe "ellipsis" para o elemento do conteúdo.
     default: true

package/src/components/select/QasSelect.vue

@@ -30,6 +30,34 @@
       </qas-badge>
     </template>
 
+    <template v-if="useCustomOptions" #option="scope">
+      <q-item v-bind="scope.itemProps" class="qas-select__option">
+        <q-item-section>
+          <div class="items-center q-gutter-x-sm row">
+            <q-item-label>
+              {{ scope.opt.label }}
+            </q-item-label>
+
+            <div v-for="(badge, index) in getFilteredBadgeList(scope.opt)" :key="index">
+              <qas-badge v-if="hasBadge(badge)" v-bind="getBadgeProps(badge)" />
+            </div>
+          </div>
+
+          <div v-if="scope.opt.caption">
+            <div class="items-center q-col-gutter-x-sm row">
+              <q-item-label v-for="(caption, index) in getCaptionArray(scope.opt.caption)" :key="index" caption class="items-center q-mt-xs row">
+                <div>
+                  {{ caption }}
+                </div>
+
+                <q-separator v-if="hasSeparator({ caption: getCaptionArray(scope.opt.caption), index })" class="q-ml-sm" vertical />
+              </q-item-label>
+            </div>
+          </div>
+        </q-item-section>
+      </q-item>
+    </template>
+
     <template v-for="(_, name) in $slots" #[name]="context">
       <slot :name="name" v-bind="context || {}" />
     </template>
@@ -50,6 +78,11 @@ export default {
   mixins: [searchFilterMixin],
 
   props: {
+    badgeProps: {
+      default: () => ({}),
+      type: Object
+    },
+
     fuseOptions: {
       default: () => ({}),
       type: Object
@@ -83,6 +116,10 @@ export default {
       type: Boolean
     },
 
+    useCustomOptions: {
+      type: Boolean
+    },
+
     useFetchOptionsOnCreate: {
       default: true,
       type: Boolean
@@ -328,6 +365,51 @@ export default {
         : this.options[0]
 
       this.$emit('update:modelValue', modelValue)
+    },
+
+    getFilteredBadgeList (payload = {}) {
+      const { label, value, disable, caption, ...rest } = payload
+
+      const badgeList = []
+
+      /**
+       * Exemplo de estrutura percorrida:
+       *
+       * @example
+       * {
+       *   isTester: true,
+       *   isOwner: false
+       * }
+       */
+      for (const [key, val] of Object.entries(rest)) {
+        if (key in this.badgeProps) {
+          badgeList.push({ [key]: val })
+        }
+      }
+
+      return badgeList
+    },
+
+    getBadgeProps (badge) {
+      const model = Object.keys(badge)[0]
+
+      const isFunction = typeof this.badgeProps[model] === 'function'
+
+      return isFunction ? this.badgeProps[model](badge[model]).props : this.badgeProps[model]
+    },
+
+    hasBadge (badge) {
+      const model = Object.keys(badge)[0]
+
+      return badge[model] || this.badgeProps[model](badge[model]).show
+    },
+
+    getCaptionArray (caption) {
+      return Array.isArray(caption) ? caption : [caption]
+    },
+
+    hasSeparator ({ caption, index }) {
+      return index !== caption.length - 1
     }
   }
 }
@@ -353,6 +435,10 @@ export default {
     }
   }
 
+  &__option:hover .q-item__label--caption {
+    color: var(--q-primary);
+  }
+
   &--closed {
     .q-field__native span {
       white-space: nowrap;

package/src/components/select/QasSelect.yml

@@ -7,6 +7,12 @@ meta:
   desc: Componente para select que implementa o "QSelect" repassando propriedades, slots e eventos.
 
 props:
+  badge-list:
+    desc: Configuração das badges no qual cada key é um callback com o valor booleano retornado pelo back.
+    default: {}
+    examples: ["{ isTester: () => { return { color: 'grey-8', label: 'Tester', textColor: 'white' }} }"]
+    type: Object
+
   entity:
     desc: Entidade enviada para a action "fetchFieldOptions" (usar somente quando "useLazyLoading" estiver habilitada).
     default: ''

package/src/css/components/item.scss

@@ -27,13 +27,17 @@
 
   &--clickable:not(&--active) {
     color: $grey-10;
-    transition: color 300ms;
+    transition: var(--qas-generic-transition);
 
     &:not(&.q-router-link--active):hover {
       color: var(--q-primary-contrast);
     }
   }
 
+  &__label--caption {
+    transition: var(--qas-generic-transition);
+  }
+
   &__section--avatar {
     min-width: 0;
   }