@bildvitta/quasar-ui-asteroid 3.17.0-beta.21 → 3.17.0-beta.22

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

@@ -1,59 +1,59 @@
-type: component
-
-meta:
-  desc: Componente semelhante ao QBtnDropdown porém utilizando o QasBtn e QSeparator para aplicar estilos padrões do Design System.
-
-props:
-  buttons-props-list:
-    desc: Lista de propriedades repassadas para os botões.
-    default: []
-    type: Array
-    examples: ["[{ color: 'white', icon: 'sym_r_person' }]"]
-
-  disable:
-    desc: Desabilita o componente como um todo.
-    default: false
-    type: Boolean
-
-  dropdown-icon:
-    desc: Ícone a direita do dropdown.
-    default: sym_r_more_vert
-    type: String
-
-  menu:
-    desc: Model do menu de dropdown.
-    default: false
-    type: Boolean
-    model: true
-
-  use-menu-padding:
-    desc: Habilita o espaçamento dentro do menu de 16px (q-pa-md).
-    default: false
-    type: Boolean
-
-  use-split:
-    desc: Divide o componente em 2 ações, o primeiro (direita) é um botão padrão, o segundo (esquerda) é um botão com ícone que abre o dropdown, criando uma separação com o QSeparator.
-    default: false
-    type: Boolean
-
-slots:
-  default:
-    desc: Slot para passar o conteúdo do dropdown (menu).
-  bottom-[buttons-props-list-key]:
-    desc: Slot unitário para acessar abaixo de cada botão (normalmente utilizado para tooltip).
-
-events:
-  '@click -> function (event)':
-    desc: Caso não tenha "useSplit", o evento é disparado ao clicar no componente como um todo, caso tenha "useSplit", o evento é disparado ao clicar no botão a esquerda.
-    params:
-      event:
-        desc: Evento nativo de click.
-        type: Object
-
-  '@update:menu -> function (isMenuOpened)':
-    desc: Retorna toda vez que o menu é aberto ou fechado
-    params:
-      isMenuOpened:
-        desc: Estado do menu.
-        default: false
-        type: Boolean
+type: component
+
+meta:
+  desc: Componente semelhante ao QBtnDropdown porém utilizando o QasBtn e QSeparator para aplicar estilos padrões do Design System.
+
+props:
+  buttons-props-list:
+    desc: Lista de propriedades repassadas para os botões.
+    default: []
+    type: Array
+    examples: ["[{ color: 'white', icon: 'sym_r_person' }]"]
+
+  disable:
+    desc: Desabilita o componente como um todo.
+    default: false
+    type: Boolean
+
+  dropdown-icon:
+    desc: Ícone a direita do dropdown.
+    default: sym_r_more_vert
+    type: String
+
+  menu:
+    desc: Model do menu de dropdown.
+    default: false
+    type: Boolean
+    model: true
+
+  use-menu-padding:
+    desc: Habilita o espaçamento dentro do menu de 16px (q-pa-md).
+    default: false
+    type: Boolean
+
+  use-split:
+    desc: Divide o componente em 2 ações, o primeiro (direita) é um botão padrão, o segundo (esquerda) é um botão com ícone que abre o dropdown, criando uma separação com o QSeparator.
+    default: false
+    type: Boolean
+
+slots:
+  default:
+    desc: Slot para passar o conteúdo do dropdown (menu).
+  bottom-[buttons-props-list-key]:
+    desc: Slot unitário para acessar abaixo de cada botão (normalmente utilizado para tooltip).
+
+events:
+  '@click -> function (event)':
+    desc: Caso não tenha "useSplit", o evento é disparado ao clicar no componente como um todo, caso tenha "useSplit", o evento é disparado ao clicar no botão a esquerda.
+    params:
+      event:
+        desc: Evento nativo de click.
+        type: Object
+
+  '@update:menu -> function (isMenuOpened)':
+    desc: Retorna toda vez que o menu é aberto ou fechado
+    params:
+      isMenuOpened:
+        desc: Estado do menu.
+        default: false
+        type: Boolean

package/src/components/card/QasCard.vue

@@ -1,132 +1,132 @@
-<template>
-  <div class="qas-card">
-    <qas-box class="rounded-borders-right" v-bind="boxProps">
-      <q-card class="column full-height overflow-hidden shadow-0">
-        <div class="full-width items-center justify-between no-wrap row">
-          <component :is="titleComponent" class="ellipsis text-h5 text-no-decoration" :class="titleClasses" :to="route">
-            <slot name="title">
-              {{ props.title }}
-            </slot>
-          </component>
-
-          <qas-actions-menu v-if="hasActions" v-bind="formattedActionsMenuProps" />
-        </div>
-
-        <div class="q-my-sm qas-card__content">
-          <slot name="default" />
-        </div>
-
-        <div class="q-mt-auto">
-          <q-separator v-if="hasFooter" class="q-mb-sm" />
-
-          <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>
-    </qas-box>
-  </div>
-</template>
-
-<script setup>
-import { computed, useSlots, inject } from 'vue'
-
-import { colors } from 'quasar'
-
-defineOptions({ name: 'QasCard' })
-
-const props = defineProps({
-  actionsMenuProps: {
-    type: Object,
-    default: () => ({})
-  },
-
-  expansionProps: {
-    type: Object,
-    default: () => ({})
-  },
-
-  route: {
-    type: Object,
-    default: () => ({})
-  },
-
-  statusColor: {
-    type: String,
-    default: ''
-  },
-
-  title: {
-    type: String,
-    default: ''
-  }
-})
-
-// consts
-const isInsideBox = inject('isBox', false)
-
-// computeds
-const boxProps = computed(() => {
-  return {
-    outlined: isInsideBox,
-    unelevated: isInsideBox,
-    spacingY: 'sm',
-    style: style.value
-  }
-})
-
-const hasActions = computed(() => !!Object.keys(props.actionsMenuProps).length)
-
-const hasExpansion = computed(() => !!Object.keys(props.expansionProps).length)
-
-const hasRoute = computed(() => !!Object.keys(props.route).length)
-
-const titleClasses = computed(() => {
-  return {
-    'qas-card__router ': hasRoute.value
-  }
-})
-
-const titleComponent = computed(() => hasRoute.value ? 'router-link' : 'h5')
-
-const style = computed(() => {
-  if (!props.statusColor) return
-
-  const { getPaletteColor } = colors
-
-  return {
-    borderLeft: `4px solid ${getPaletteColor(props.statusColor)} !important`
-  }
-})
-
-const slots = useSlots()
-
-const hasFooterSlot = computed(() => !!slots.footer)
-
-const hasFooter = computed(() => hasFooterSlot.value || hasExpansion.value)
-
-const formattedActionsMenuProps = computed(() => {
-  return {
-    ...props.actionsMenuProps,
-    useLabel: false
-  }
-})
-</script>
-
-<style lang="scss">
-.qas-card {
-  &__content {
-    max-width: 100%;
-  }
-
-  &__router {
-    &:hover {
-      color: $primary;
-    }
-  }
-}
-</style>
+<template>
+  <div class="qas-card">
+    <qas-box class="rounded-borders-right" v-bind="boxProps">
+      <q-card class="column full-height overflow-hidden shadow-0">
+        <div class="full-width items-center justify-between no-wrap row">
+          <component :is="titleComponent" class="ellipsis text-h5 text-no-decoration" :class="titleClasses" :to="route">
+            <slot name="title">
+              {{ props.title }}
+            </slot>
+          </component>
+
+          <qas-actions-menu v-if="hasActions" v-bind="formattedActionsMenuProps" />
+        </div>
+
+        <div class="q-my-sm qas-card__content">
+          <slot name="default" />
+        </div>
+
+        <div class="q-mt-auto">
+          <q-separator v-if="hasFooter" class="q-mb-sm" />
+
+          <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>
+    </qas-box>
+  </div>
+</template>
+
+<script setup>
+import { computed, useSlots, inject } from 'vue'
+
+import { colors } from 'quasar'
+
+defineOptions({ name: 'QasCard' })
+
+const props = defineProps({
+  actionsMenuProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  expansionProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  route: {
+    type: Object,
+    default: () => ({})
+  },
+
+  statusColor: {
+    type: String,
+    default: ''
+  },
+
+  title: {
+    type: String,
+    default: ''
+  }
+})
+
+// consts
+const isInsideBox = inject('isBox', false)
+
+// computeds
+const boxProps = computed(() => {
+  return {
+    outlined: isInsideBox,
+    unelevated: isInsideBox,
+    spacingY: 'sm',
+    style: style.value
+  }
+})
+
+const hasActions = computed(() => !!Object.keys(props.actionsMenuProps).length)
+
+const hasExpansion = computed(() => !!Object.keys(props.expansionProps).length)
+
+const hasRoute = computed(() => !!Object.keys(props.route).length)
+
+const titleClasses = computed(() => {
+  return {
+    'qas-card__router ': hasRoute.value
+  }
+})
+
+const titleComponent = computed(() => hasRoute.value ? 'router-link' : 'h5')
+
+const style = computed(() => {
+  if (!props.statusColor) return
+
+  const { getPaletteColor } = colors
+
+  return {
+    borderLeft: `4px solid ${getPaletteColor(props.statusColor)} !important`
+  }
+})
+
+const slots = useSlots()
+
+const hasFooterSlot = computed(() => !!slots.footer)
+
+const hasFooter = computed(() => hasFooterSlot.value || hasExpansion.value)
+
+const formattedActionsMenuProps = computed(() => {
+  return {
+    ...props.actionsMenuProps,
+    useLabel: false
+  }
+})
+</script>
+
+<style lang="scss">
+.qas-card {
+  &__content {
+    max-width: 100%;
+  }
+
+  &__router {
+    &:hover {
+      color: $primary;
+    }
+  }
+}
+</style>

package/src/components/card/QasCard.yml

@@ -1,44 +1,44 @@
-type: component
-
-meta:
-  desc: Componente de card.
-
-props:
-  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
-
-  title:
-    desc: Título principal do card.
-    default: ''
-    type: String 
-
-slots:
-  default:
-    desc: Slot para acessar conteúdo principal do card.
-
-  title:
-    desc: Slot para acessar conteúdo do título do card.
-
-  footer:
-    desc: Slot para acessar o footer do card.
-
-  expansion-content:
-    desc: Slot para acessar o conteúdo dentro do "QExpansionItem".
+type: component
+
+meta:
+  desc: Componente de card.
+
+props:
+  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
+
+  title:
+    desc: Título principal do card.
+    default: ''
+    type: String 
+
+slots:
+  default:
+    desc: Slot para acessar conteúdo principal do card.
+
+  title:
+    desc: Slot para acessar conteúdo do título do card.
+
+  footer:
+    desc: Slot para acessar o footer do card.
+
+  expansion-content:
+    desc: Slot para acessar o conteúdo dentro do "QExpansionItem".

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

@@ -1,95 +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>
+<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>