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

package/package.json

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

package/src/components/board-generator/QasBoardGenerator.vue

@@ -0,0 +1,267 @@
+<template>
+  <qas-grabbable class="qas-board-generator" use-scroll-bar>
+    <div class="no-wrap q-col-gutter-sm q-px-xl row">
+      <div v-for="(header, index) in results" :key="index" class="q-mr-sm">
+        <qas-box class="q-mb-md">
+          <slot :context="header" name="header-column" />
+        </qas-box>
+
+        <div ref="columnContainer" class="qas-board-generator__column secondary-scroll" :style="containerStyle">
+          <slot v-for="item in getItemsByHeader(header)" :context="item" name="column-item" />
+
+          <div class="full-width justify-center q-mb-md q-mt-sm row">
+            <qas-btn v-if="hasSeeMore(header)" icon="sym_r_add" label="Ver mais" :use-label-on-small-screen="false" variant="tertiary" @click="fetchColumn(header)" />
+
+            <q-spinner v-if="columnsLoading[getKeyByHeader(header)]" color="grey-4" size="3em" />
+
+            <qas-empty-result-text v-if="hasEmptyResultText(header)" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </qas-grabbable>
+</template>
+
+<script setup>
+import { ref, watch, computed, onMounted, shallowRef, inject } from 'vue'
+import promiseHandler from '../../helpers/promise-handler'
+
+defineOptions({ name: 'QasBoardGenerator' })
+
+const columnContainer = ref(null)
+const columnsPagination = ref({})
+const columnsLoading = ref({})
+
+const axios = inject('axios')
+
+const props = defineProps({
+  results: {
+    type: Array,
+    default: () => []
+  },
+
+  columnIdKey: {
+    type: String,
+    required: true
+  },
+
+  columnParams: {
+    type: Object,
+    default: () => ({})
+  },
+
+  columnUrl: {
+    type: String,
+    required: true
+  },
+
+  modelValue: {
+    type: Object,
+    default: () => ({})
+  },
+
+  height: {
+    type: String,
+    default: ''
+  },
+
+  limitPerColumn: {
+    type: Number,
+    default: 12
+  },
+
+  columnWidth: {
+    type: String,
+    default: '288px'
+  },
+
+  useShallowRef: {
+    type: Boolean,
+    default: true
+  }
+})
+
+watch(
+  () => props.results,
+  () => {
+    reset()
+    setColumnHeightContainer()
+    setColumnsPagination()
+    fetchColumns()
+  }
+)
+
+watch(columnContainer, setColumnHeightContainer)
+
+onMounted(() => {
+  setColumnsPagination()
+  fetchColumns()
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+defineExpose({ fetchColumns, fetchColumn, reset })
+
+const columnsModel = computed({
+  get () {
+    return props.modelValue
+  },
+
+  set (newValues) {
+    emit('update:modelValue', newValues)
+  }
+})
+
+const hasColumnsLength = computed(() => Object.keys(columnsModel.value).length)
+
+const containerStyle = computed(() => `width: ${props.columnWidth};`)
+
+/*
+* Setar o tamanho do container do board, onde deverá ser a altura passada via prop, ou o default será ocupar o maximo
+* de espaço que ele conseguir considerando a altura do container em relação ao topo.
+*/
+function setColumnHeightContainer () {
+  columnContainer.value?.forEach(columnElement => {
+    const heightToTop = columnElement?.getBoundingClientRect()?.top
+    const paddingSpacing = 60
+    const value = heightToTop + paddingSpacing
+
+    columnElement.style.setProperty('height', props.height ? props.height : `calc(100vh - ${value}px)`)
+  })
+}
+
+/*
+* Bater API pra cada header
+*/
+async function fetchColumns () {
+  props.results.forEach(header => fetchColumn(header))
+}
+
+/*
+* Busca a coluna com base no header recebido.
+*/
+async function fetchColumn (header) {
+  const headerKey = getKeyByHeader(header)
+  const { limit, offset } = columnsPagination.value[headerKey] || {}
+
+  const { data: response, error } = await promiseHandler(
+    axios.get(`${props.columnUrl}/${headerKey}`, {
+      params: {
+        ...props.columnParams,
+        limit,
+        offset
+      }
+    }),
+    {
+      onLoading: value => {
+        columnsLoading.value[headerKey] = value
+      },
+      useLoading: false,
+      errorMessage: 'Não conseguimos buscar as colunas do board. Por favor, tente novamente em alguns minutos.'
+    }
+  )
+
+  if (error) return
+
+  /*
+  * exemplo de como columnsModel irá ficar:
+  *
+  * {
+  *  '2024-02-15': [...],
+  *  '2024-02-16': [...]
+  * }
+  *
+  * onde cada item do objeto é uma coluna no board. O mesmo vale para "columnsLoading" e "columnPagination", organizando
+  * os loadings e o controle de paginação por chave identificadora do header.
+  */
+  const newColumnValues = [
+    ...columnsModel.value[headerKey] || [],
+    ...response.data?.results || []
+  ]
+
+  columnsModel.value[headerKey] = props.useShallowRef ? shallowRef(newColumnValues) : newColumnValues
+
+  columnsPagination.value[headerKey].offset = columnsModel.value[headerKey].length
+  columnsPagination.value[headerKey].count = response.data?.count
+}
+
+function getItemsByHeader (header) {
+  return hasColumnsLength.value ? columnsModel.value[getKeyByHeader(header)] : []
+}
+
+/**
+* Pegar key com base na chave identificador, exemplo:
+* header -> { date: '2024-02-12', ... }
+* columnIdKey -> 'date'
+* retorno -> '2024-02-12'
+*
+* Onde esta chave será o "id" da coluna, sendo usado para bater a API, lidar com paginação, loading, etc.
+*
+* @example getKeyByHeader({ date: '2024-02-12', ... })
+* @returns {string} // '2024-02-12'
+*/
+function getKeyByHeader (header = {}) {
+  return header[props.columnIdKey]
+}
+
+/*
+* Para cada header, irá ser criado um item com sua chave identificadora para lidar com paginação e loading.
+* columnsPagination -> { '2024-02-15': { limit: 12, offset: 0 }, '2024-02-16': { limit: 12, offset: 0 }, ... }
+* columnsLoading ->{ '2024-02-15': false, '2024-02-16': false, ... }
+*/
+function setColumnsPagination () {
+  columnsPagination.value = {}
+  columnsLoading.value = {}
+
+  props.results.forEach(header => {
+    const headerKey = getKeyByHeader(header)
+
+    columnsPagination.value[headerKey] = { limit: props.limitPerColumn, offset: 0 }
+    columnsLoading.value[headerKey] = false
+  })
+}
+
+function hasEmptyResultText (header) {
+  return !columnsLoading.value[getKeyByHeader(header)] && !getItemsByHeader(header)?.length
+}
+
+/*
+* Valida se o tamanho dos itens da coluna é menor que o valor total de itens que o back retorna e
+* se a coluna não está em carregamento.
+*/
+function hasSeeMore (header) {
+  const headerKey = getKeyByHeader(header)
+  const hasMorePagination = columnsModel.value[headerKey]?.length < columnsPagination.value[headerKey]?.count
+
+  return hasMorePagination && !columnsLoading.value[headerKey]
+}
+
+function reset () {
+  columnsModel.value = {}
+  columnsPagination.value = {}
+  columnsLoading.value = {}
+}
+</script>
+
+<style lang="scss">
+.qas-board-generator {
+  max-height: 100vh;
+
+  &__column {
+    overflow-x: hidden;
+    scrollbar-width: none;
+
+    &:hover {
+      scrollbar-width: thin;
+
+      &::-webkit-scrollbar {
+        display: block;
+      }
+    }
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+</style>

package/src/components/board-generator/QasBoardGenerator.yml

@@ -0,0 +1,83 @@
+type: component
+
+meta:
+  desc: Componente usado para board de colunas.
+
+props:
+  results:
+    desc: Lista de itens sendo cada um o header de cada coluna.
+    default: []
+    type: Array
+
+  column-id-key:
+    desc: chave que será o id usado para ser o identificador da coluna.
+    type: String
+    required: true
+
+  column-params:
+    desc: parâmetros customizados caso precise passar para as APIs das colunas.
+    type: Object
+    default: {}
+
+  column-url:
+    desc: URL usada para as APIs das colunas.
+    type: String
+    required: true
+
+  column-width:
+    desc: Largura da coluna
+    type: String
+    default: 288
+  
+  height:
+    desc: Altura do container do board. Caso não seja passado um height, o calculo é feito para ocupar a maior altura possível da página.
+    type: String
+
+  limit:
+    desc: Quantidade de itens da coluna por busca na API.
+    type: Number
+    default: 12
+
+  use-shallow-ref:
+    desc: Define se os valores dos itens das colunas irá ser atribuido utilizando o "shallowRef", onde somente a primeira camada do model será reativa.(https://vuejs.org/api/reactivity-advanced.html#shallowref)
+    type: Boolean
+    default: true
+
+  model-value:
+    desc: Model do componente, usado para o v-model.
+    default: {}
+    type: Object
+    examples: [v-model="value"]
+    model: true
+
+slots:
+  header-column:
+    desc: Slot para acessar o card do header de cada coluna.
+    scope:
+      context:
+        desc: Informações de cada item do header que foi fornecido através do "results".
+        type: Object
+        default: {}
+
+  column-item:
+    desc: Slot para acessar o item da coluna.
+    scope:
+      context:
+        desc: Informações de cada item da coluna que foi buscado através da API.
+        type: Object
+        default: {}
+
+events:
+  '@update:model-value -> function(value)':
+    desc: Dispara quando o model-value altera, também usado para v-model.
+    params:
+      value:
+        desc: Novo valor do model.
+        type: Object
+
+methods:
+  'fetchColumns: () => void':
+    desc: Busca todas colunas com base nos headers fornecidos.
+
+  'fetchColumn: (header) => void':
+    desc: Busca uma coluna especifica com base no header fornecido.

package/src/components/card/QasCard.vue

@@ -1,95 +1,106 @@
 <template>
-  <div class="col-12 col-lg-3 col-md-4 col-sm-6">
-    <q-card class="border-radius-lg column full-height overflow-hidden" :class="cardClasses">
-      <header v-if="props.useHeader" class="full-width overflow-hidden relative-position">
-        <slot name="header">
-          <q-carousel v-model="slideImage" animated class="cursor-pointer" height="205px" infinite :navigation="hasImages" navigation-icon="sym_r_fiber_manual_record" swipeable>
-            <template #navigation-icon="{ active, btnProps, onClick }">
-              <qas-btn color="white" :icon="getNavigationIcon(active, btnProps)" variant="tertiary" @click="onClick" />
-            </template>
-
-            <q-carousel-slide v-for="(item, index) in imagesList" :key="index" class="bg-no-repeat" :class="imagePositionClass" :img-src="item" :name="index" />
-          </q-carousel>
-
-          <div class="absolute-top flex items-center q-pa-md">
-            <slot name="carousel-header" />
-          </div>
-        </slot>
-      </header>
+  <div class="qas-card">
+    <q-card class="column full-height overflow-hidden q-px-md q-py-sm rounded-borders-right rounded-borders-sm shadow-2" :style="style">
+      <div class="items-center justify-between row">
+        <component :is="titleComponent" class="text-h4 text-no-decoration" :class="titleClasses" :to="route">
+          <slot name="title">
+            {{ props.title }}
+          </slot>
+        </component>
+
+        <qas-actions-menu v-if="hasActions" :list="actionsMenuProps" :use-label="false" />
+      </div>
+
+      <div class="q-my-sm">
+        <slot name="default" />
+      </div>
 
-      <q-card-section class="col-grow column full-width justify-between">
-        <div class="full-width" :class="gutterClass">
-          <slot />
-        </div>
-      </q-card-section>
+      <div class="q-mt-auto">
+        <q-separator v-if="hasFooter" class="q-mb-sm" />
 
-      <div v-if="hasActionsSlot" class="border-grey border-top overflow-hidden row">
-        <slot name="actions" />
+        <slot name="footer">
+          <q-expansion-item v-if="hasExpansion" class="full-width" dense expand-icon-class="text-primary" header-class="q-pa-none text-primary" :label="props.expansionProps.label">
+            <slot name="expansion-content">
+              {{ props.expansionProps.content }}
+            </slot>
+          </q-expansion-item>
+        </slot>
       </div>
     </q-card>
   </div>
 </template>
 
 <script setup>
-import { Spacing } from '../../enums/Spacing'
+import { computed, useSlots } from 'vue'
 
-import { ref, computed, useSlots } from 'vue'
+import { colors } from 'quasar'
 
 defineOptions({ name: 'QasCard' })
 
 const props = defineProps({
-  imagePosition: {
-    type: String,
-    default: 'center'
+  actionsMenuProps: {
+    type: Object,
+    default: () => ({})
   },
 
-  gutter: {
-    type: String,
-    default: Spacing.Sm,
-    validator: value => Object.values(Spacing).includes(value)
+  expansionProps: {
+    type: Object,
+    default: () => ({})
   },
 
-  images: {
-    default: () => [],
-    type: Array
+  route: {
+    type: Object,
+    default: () => ({})
   },
 
-  outlined: {
-    type: Boolean
+  statusColor: {
+    type: String,
+    default: ''
   },
 
-  unelevated: {
-    type: Boolean
-  },
+  title: {
+    type: String,
+    default: ''
+  }
+})
+
+const hasActions = computed(() => !!Object.keys(props.actionsMenuProps).length)
+
+const hasExpansion = computed(() => !!Object.keys(props.expansionProps).length)
 
-  useHeader: {
-    type: Boolean
+const hasRoute = computed(() => !!Object.keys(props.route).length)
+
+const titleClasses = computed(() => {
+  return {
+    'qas-card__router ': hasRoute.value
   }
 })
 
-const slots = useSlots()
+const titleComponent = computed(() => hasRoute.value ? 'router-link' : 'div')
 
-const slideImage = ref(0)
+const style = computed(() => {
+  if (!props.statusColor) return
+
+  const { getPaletteColor } = colors
 
-const cardClasses = computed(() => {
   return {
-    'shadow-2': !props.unelevated,
-    'border-primary': props.outlined,
-    'no-shadow': props.outlined,
-    'bg-white': props.outlined
+    borderLeft: `4px solid ${getPaletteColor(props.statusColor)}`
   }
 })
 
-const imagePositionClass = computed(() => `bg-position-${props.imagePosition}`)
-const gutterClass = computed(() => `q-col-gutter-${props.gutter}`)
+const slots = useSlots()
 
-const hasActionsSlot = computed(() => !!slots.actions)
-const hasImages = computed(() => props.images.length > 1)
+const hasFooterSlot = computed(() => !!slots.footer)
 
-const imagesLength = computed(() => props.images?.length)
-const imagesList = computed(() => imagesLength.value && props.images.slice(0, 3))
+const hasFooter = computed(() => hasFooterSlot.value || hasExpansion.value)
+</script>
 
-function getNavigationIcon (active, { icon }) {
-  return active ? 'sym_r_radio_button_checked' : icon
+<style lang="scss">
+.qas-card {
+  &__router {
+    &:hover {
+      color: $primary;
+    }
+  }
 }
-</script>
+</style>

package/src/components/card/QasCard.yml

@@ -4,43 +4,41 @@ meta:
   desc: Componente de card.
 
 props:
-  gutter:
-    desc: Espaçamento dentro <q-card-section /> onde fica o slot "default".
-    default: sm
+  actions-menu-props:
+    desc: Propriedades repassadas para o QasActionsMenu.
+    default: {}
+    type: Object
+
+  expansion-props:
+    desc: Conteúdo que ficará dentro do "QExpansionItem", sendo separado por "label" e "content".
+    type: Object
+    default: {}
+
+  route:
+    desc: Rota que será utilizada ao clicar no título.
+    default: {}
+    type: Object
+
+  status-color:
+    desc: Insere uma borda na esquerda para indicar o status do card.
+    default: ''
+    examples: [red-14, blue-8, green-9]
     type: String
-    examples: [xs, sm, md, lg, xl]
 
-  images:
-    desc: Imagens do carousel.
-    default: []
-    type: Array
-
-  image-position:
-    desc: Posição da imagem "background-position".
-    default: center
-    type: String
-
-  outlined:
-    desc: Insere uma borda sólida em volta do componente.
-    type: Boolean
-
-  unelevated:
-    desc: Remove a sombra do componente.
-    type: Boolean
-
-  use-header:
-    desc: Controla se vai ter ou não o header com carousel.
-    type: Boolean
+  title:
+    desc: Título principal do card.
+    default: ''
+    type: String 
 
 slots:
-  actions:
-    desc: Slot para acessar conteúdo de ações como botão.
+  default:
+    desc: Slot para acessar conteúdo principal do card.
 
-  carousel-header:
-    desc: Slot para acessar usar de header do "<q-carousel />".
+  title:
+    desc: Slot para acessar conteúdo do título do card.
 
-  default:
-    desc: Slot para acessar conteúdo dentro do "<q-card-section />".
+  footer:
+    desc: Slot para acessar o footer do card.
 
-  header:
-    desc: Slot para acessar área no lugar do "<q-carousel />".
+  expansion-content:
+    desc: Slot para acessar o conteúdo dentro do "QExpansionItem".

package/src/components/card-image/QasCardImage.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="col-12 col-lg-3 col-md-4 col-sm-6">
+    <q-card class="border-radius-lg column full-height overflow-hidden" :class="cardClasses">
+      <header v-if="props.useHeader" class="full-width overflow-hidden relative-position">
+        <slot name="header">
+          <q-carousel v-model="slideImage" animated class="cursor-pointer" height="205px" infinite :navigation="hasImages" navigation-icon="sym_r_fiber_manual_record" swipeable>
+            <template #navigation-icon="{ active, btnProps, onClick }">
+              <qas-btn color="white" :icon="getNavigationIcon(active, btnProps)" variant="tertiary" @click="onClick" />
+            </template>
+
+            <q-carousel-slide v-for="(item, index) in imagesList" :key="index" class="bg-no-repeat" :class="imagePositionClass" :img-src="item" :name="index" />
+          </q-carousel>
+
+          <div class="absolute-top flex items-center q-pa-md">
+            <slot name="carousel-header" />
+          </div>
+        </slot>
+      </header>
+
+      <q-card-section class="col-grow column full-width justify-between">
+        <div class="full-width" :class="gutterClass">
+          <slot />
+        </div>
+      </q-card-section>
+
+      <div v-if="hasActionsSlot" class="border-grey border-top overflow-hidden row">
+        <slot name="actions" />
+      </div>
+    </q-card>
+  </div>
+</template>
+
+<script setup>
+import { Spacing } from '../../enums/Spacing'
+
+import { ref, computed, useSlots } from 'vue'
+
+defineOptions({ name: 'QasCardImage' })
+
+const props = defineProps({
+  imagePosition: {
+    type: String,
+    default: 'center'
+  },
+
+  gutter: {
+    type: String,
+    default: Spacing.Sm,
+    validator: value => Object.values(Spacing).includes(value)
+  },
+
+  images: {
+    default: () => [],
+    type: Array
+  },
+
+  outlined: {
+    type: Boolean
+  },
+
+  unelevated: {
+    type: Boolean
+  },
+
+  useHeader: {
+    type: Boolean
+  }
+})
+
+const slots = useSlots()
+
+const slideImage = ref(0)
+
+const cardClasses = computed(() => {
+  return {
+    'shadow-2': !props.unelevated,
+    'border-primary': props.outlined,
+    'no-shadow': props.outlined,
+    'bg-white': props.outlined
+  }
+})
+
+const imagePositionClass = computed(() => `bg-position-${props.imagePosition}`)
+const gutterClass = computed(() => `q-col-gutter-${props.gutter}`)
+
+const hasActionsSlot = computed(() => !!slots.actions)
+const hasImages = computed(() => props.images.length > 1)
+
+const imagesLength = computed(() => props.images?.length)
+const imagesList = computed(() => imagesLength.value && props.images.slice(0, 3))
+
+function getNavigationIcon (active, { icon }) {
+  return active ? 'sym_r_radio_button_checked' : icon
+}
+</script>

package/src/components/card-image/QasCardImage.yml

@@ -0,0 +1,48 @@
+type: component
+
+meta:
+  desc: Componente de card utilizando imagens.
+
+props:
+  gutter:
+    desc: Espaçamento dentro <q-card-section /> onde fica o slot "default".
+    default: sm
+    type: String
+    examples: [xs, sm, md, lg, xl]
+
+  images:
+    desc: Imagens do carousel.
+    default: []
+    type: Array
+
+  image-position:
+    desc: Posição da imagem "background-position".
+    default: center
+    type: String
+
+  outlined:
+    desc: Insere uma borda sólida em volta do componente.
+    type: Boolean
+
+  unelevated:
+    desc: Remove a sombra do componente.
+    type: Boolean
+
+  use-header:
+    desc: Controla se vai ter ou não o header com carousel.
+    type: Boolean
+
+slots:
+  actions:
+    desc: Slot para acessar conteúdo de ações como botão.
+
+  carousel-header:
+    desc: Slot para acessar usar de header do "<q-carousel />".
+
+  default:
+    desc: Slot para acessar conteúdo dentro do "<q-card-section />".
+
+  header:
+    desc: Slot para acessar área no lugar do "<q-carousel />".
+
+

package/src/components/dialog-router/QasDialogRouter.yml

@@ -15,7 +15,7 @@ events:
     desc: Dispara quando o QasDialog é fechado.
 
 methods:
-  '@show (route) => undefined':
+  '@show: (route) => void':
     desc: Função para abrir o a pagina dentro do dialog.
     route:
       value:

package/src/components/option-group/QasOptionGroup.vue

@@ -35,8 +35,8 @@ export default {
   computed: {
     attributes () {
       return {
-        ...this.$attrs,
-        inline: !this.$qas.screen.isSmall
+        inline: !this.$qas.screen.isSmall,
+        ...this.$attrs
       }
     },
 

package/src/components/select-list-dialog/QasSelectListDialog.yml

@@ -98,11 +98,11 @@ events:
         type: Array
 
 methods:
-  'add ({ options = [], value }) => undefined':
+  'add: ({ options = [], value }) => void':
     desc: Adiciona itens a lista de selecionados, é preciso adicionar quais opções são referentes ao model.
 
-  'remove (value) => undefined':
+  'remove: (value) => void':
     desc: remove um item da lista de selecionados passando o valor referente a ele na lista.
 
-  'removeAll () => undefined':
+  'removeAll: () => void':
     desc: remove todos os itens da lista de selecionados.

package/src/components/signature-pad/QasSignaturePad.yml

@@ -29,11 +29,11 @@ slots:
   default:
     desc: Usado para conseguir recuperar as função internas do componente.
     scope:
-      'clearSignature () => undefined':
+      'clearSignature: () => void':
         desc: Limpa a assinatura.
         type: Function
 
-      'getSignatureData () => String':
+      'getSignatureData: () => String':
         desc: 'Obtém a assinatura em formato de imagem com "tipo" de acordo com o que foi passado para o componente (ex: "image/png"). Utiliza o HTMLCanvasElement.toDataURL()'
         type: Function
 
@@ -46,8 +46,8 @@ events:
         type: Boolean
 
 methods:
-  'clearSignature () => undefined':
+  'clearSignature: () => void':
     desc: Limpa a assinatura.
 
-  'getSignatureData () => String':
+  'getSignatureData: () => String':
     desc: 'Obtém a assinatura em formato de imagem com "tipo" de acordo com o que foi passado para o componente (ex: "image/png"). Utiliza o HTMLCanvasElement.toDataURL()'

package/src/vue-plugin.js

@@ -6,11 +6,13 @@ import QasAppMenu from './components/app-menu/QasAppMenu.vue'
 import QasAppUser from './components/app-user/QasAppUser.vue'
 import QasAvatar from './components/avatar/QasAvatar.vue'
 import QasBadge from './components/badge/QasBadge.vue'
+import QasBoardGenerator from './components/board-generator/QasBoardGenerator.vue'
 import QasBox from './components/box/QasBox.vue'
 import QasBreakline from './components/breakline/QasBreakline.vue'
 import QasBtn from './components/btn/QasBtn.vue'
 import QasBtnDropdown from './components/btn-dropdown/QasBtnDropdown.vue'
 import QasCard from './components/card/QasCard.vue'
+import QasCardImage from './components/card-image/QasCardImage.vue'
 import QasCheckboxGroup from './components/checkbox-group/QasCheckboxGroup.vue'
 import QasCopy from './components/copy/QasCopy.vue'
 import QasDate from './components/date/QasDate.vue'
@@ -94,11 +96,13 @@ async function install (app) {
   app.component('QasAppUser', QasAppUser)
   app.component('QasAvatar', QasAvatar)
   app.component('QasBadge', QasBadge)
+  app.component('QasBoardGenerator', QasBoardGenerator)
   app.component('QasBox', QasBox)
   app.component('QasBreakline', QasBreakline)
   app.component('QasBtn', QasBtn)
   app.component('QasBtnDropdown', QasBtnDropdown)
   app.component('QasCard', QasCard)
+  app.component('QasCardImage', QasCardImage)
   app.component('QasCheckboxGroup', QasCheckboxGroup)
   app.component('QasCopy', QasCopy)
   app.component('QasDate', QasDate)
@@ -184,6 +188,7 @@ export {
   QasAppUser,
   QasAvatar,
   QasBadge,
+  QasBoardGenerator,
   QasBox,
   QasBreakline,
   QasBtn,