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

package/src/components/grid-item/QasGridItem.vue

@@ -1,89 +1,89 @@
-<template>
-  <div :class="classes.container">
-    <header v-bind="headerProps">
-      <slot name="header">
-        {{ props.label }}
-      </slot>
-    </header>
-
-    <div v-bind="contentProps">
-      <slot name="content">
-        {{ props.value }}
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { useScreen } from '../../composables'
-
-import { computed } from 'vue'
-
-defineOptions({ name: 'QasGridItem' })
-
-const props = defineProps({
-  label: {
-    type: String,
-    default: ''
-  },
-
-  useEllipsis: {
-    default: true,
-    type: Boolean
-  },
-
-  useInline: {
-    type: Boolean
-  },
-
-  value: {
-    type: [String, Number, Boolean],
-    default: ''
-  }
-})
-
-const screen = useScreen()
-
-// computed
-const hasEllipsis = computed(() => props.useEllipsis && !screen.isSmall)
-
-const classes = computed(() => {
-  const isInline = props.useInline && !screen.isSmall
-
-  return {
-    container: {
-      flex: isInline,
-      'q-col-gutter-x-md': isInline,
-      'justify-between': isInline,
-      'col-12': isInline,
-      'no-wrap': isInline
-    },
-
-    header: {
-      'text-caption': !isInline,
-      'text-body1': isInline
-    },
-
-    content: {
-      'text-body1': !isInline,
-      'text-grey-10': !isInline,
-      'text-subtitle1': isInline,
-      ellipsis: hasEllipsis.value
-    }
-  }
-})
-
-const headerProps = computed(() => {
-  return {
-    class: classes.value.header,
-    ...(hasEllipsis.value && { title: props.label })
-  }
-})
-
-const contentProps = computed(() => {
-  return {
-    class: classes.value.content,
-    ...(hasEllipsis.value && { title: props.value })
-  }
-})
-</script>
+<template>
+  <div :class="classes.container">
+    <header v-bind="headerProps">
+      <slot name="header">
+        {{ props.label }}
+      </slot>
+    </header>
+
+    <div v-bind="contentProps">
+      <slot name="content">
+        {{ props.value }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useScreen } from '../../composables'
+
+import { computed } from 'vue'
+
+defineOptions({ name: 'QasGridItem' })
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: ''
+  },
+
+  useEllipsis: {
+    default: true,
+    type: Boolean
+  },
+
+  useInline: {
+    type: Boolean
+  },
+
+  value: {
+    type: [String, Number, Boolean],
+    default: ''
+  }
+})
+
+const screen = useScreen()
+
+// computed
+const hasEllipsis = computed(() => props.useEllipsis && !screen.isSmall)
+
+const classes = computed(() => {
+  const isInline = props.useInline && !screen.isSmall
+
+  return {
+    container: {
+      flex: isInline,
+      'q-col-gutter-x-md': isInline,
+      'justify-between': isInline,
+      'col-12': isInline,
+      'no-wrap': isInline
+    },
+
+    header: {
+      'text-caption': !isInline,
+      'text-body1': isInline
+    },
+
+    content: {
+      'text-body1': !isInline,
+      'text-grey-10': !isInline,
+      'text-subtitle1': isInline,
+      ellipsis: hasEllipsis.value
+    }
+  }
+})
+
+const headerProps = computed(() => {
+  return {
+    class: classes.value.header,
+    ...(hasEllipsis.value && { title: props.label })
+  }
+})
+
+const contentProps = computed(() => {
+  return {
+    class: classes.value.content,
+    ...(hasEllipsis.value && { title: props.value })
+  }
+})
+</script>

package/src/components/grid-item/QasGridItem.yml

@@ -1,22 +1,22 @@
-type: component
-
-meta:
-  desc: Componente para renderizar chave/valor comumente utilizado junto ao QasGridGenerator.
-
-props:
-  label:
-    desc: Rótulo do header.
-    default: ''
-    type: String
-
-  value:
-    desc: Valor do conteúdo.
-    default: ''
-    type: [String, Number, Boolean]
-
-slots:
-  content:
-    desc: Slot para o conteúdo (value).
-
-  header:
-    desc: Slot para o header (label).
+type: component
+
+meta:
+  desc: Componente para renderizar chave/valor comumente utilizado junto ao QasGridGenerator.
+
+props:
+  label:
+    desc: Rótulo do header.
+    default: ''
+    type: String
+
+  value:
+    desc: Valor do conteúdo.
+    default: ''
+    type: [String, Number, Boolean]
+
+slots:
+  content:
+    desc: Slot para o conteúdo (value).
+
+  header:
+    desc: Slot para o header (label).

package/src/components/header/QasHeader.vue

@@ -1,152 +1,152 @@
-<template>
-  <div :class="containerClasses">
-    <div v-if="hasLabelSection" class="full-width items-center justify-between no-wrap row" :class="labelSectionClasses">
-      <div class="items-center q-col-gutter-sm row">
-        <slot name="label">
-          <qas-label v-if="hasLabel" v-bind="defaultLabelProps" />
-        </slot>
-
-        <div v-if="hasBadges" class="col-auto items-center q-col-gutter-sm row">
-          <div v-for="(badge, badgeIndex) in props.badges" :key="badgeIndex">
-            <qas-badge v-bind="badge" />
-          </div>
-        </div>
-      </div>
-
-      <div v-if="hasActionsSection" class="text-right">
-        <slot name="actions">
-          <component :is="actionsComponent.is" v-if="hasActionsComponent" v-bind="actionsComponent.props" />
-        </slot>
-      </div>
-    </div>
-
-    <div class="items-start no-wrap q-col-gutter-sm row" :class="descriptionSectionClasses">
-      <div v-if="hasDescriptionSection" class="text-body1 text-grey-8">
-        <slot name="description">
-          {{ props.description }}
-        </slot>
-      </div>
-
-      <div v-if="!hasLabelSection" class="justify-end row text-right">
-        <slot name="actions">
-          <component :is="actionsComponent.is" v-if="hasActionsComponent" v-bind="actionsComponent.props" />
-        </slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { Spacing } from '../../enums/Spacing'
-import { gutterValidator } from '../../helpers/private/gutter-validator'
-
-import { computed, useSlots } from 'vue'
-
-defineOptions({ name: 'QasHeader' })
-
-const props = defineProps({
-  actionsMenuProps: {
-    type: Object,
-    default: () => ({})
-  },
-
-  badges: {
-    type: Array,
-    default: () => []
-  },
-
-  buttonProps: {
-    default: () => ({}),
-    type: Object
-  },
-
-  description: {
-    type: String,
-    default: ''
-  },
-
-  filtersProps: {
-    default: () => ({}),
-    type: Object
-  },
-
-  labelProps: {
-    type: Object,
-    default: () => ({})
-  },
-
-  spacing: {
-    default: Spacing.Md,
-    type: String,
-    validator: gutterValidator
-  }
-})
-
-const slots = useSlots()
-
-// computed
-const containerClasses = computed(() => `q-mb-${props.spacing}`)
-
-const labelSectionClasses = computed(() => {
-  return {
-    'q-mb-xs': hasBadges.value
-  }
-})
-
-const descriptionSectionClasses = computed(() => {
-  return {
-    'justify-between': hasDescriptionSection.value,
-    'justify-end': hasActionsSection.value && !hasDescriptionSection.value
-  }
-})
-
-const defaultLabelProps = computed(() => {
-  return {
-    margin: 'none',
-    ...props.labelProps
-  }
-})
-
-const actionsComponent = computed(() => {
-  const component = {
-    [hasDefaultButton.value]: {
-      is: 'qas-btn',
-      props: {
-        ...props.buttonProps,
-        useLabelOnSmallScreen: false
-      }
-    },
-
-    [hasDefaultActionsMenu.value]: {
-      is: 'qas-actions-menu',
-      props: props.actionsMenuProps
-    },
-
-    [hasDefaultFilters.value]: {
-      is: 'qas-filters',
-      props: {
-        useSearch: false,
-        useChip: false,
-        useSpacing: false,
-        ...props.filtersProps
-      }
-    }
-  }
-
-  return component.true
-})
-
-const hasActionsComponent = computed(() => {
-  return hasDefaultButton.value || hasDefaultActionsMenu.value || hasDefaultFilters.value
-})
-
-const hasActionsSection = computed(() => !!slots.actions || hasActionsComponent.value)
-
-const hasBadges = computed(() => !!props.badges.length)
-const hasLabel = computed(() => !!Object.keys(props.labelProps).length)
-const hasDefaultButton = computed(() => !!Object.keys(props.buttonProps).length)
-const hasDefaultFilters = computed(() => !!Object.keys(props.filtersProps).length)
-const hasDefaultActionsMenu = computed(() => !!Object.keys(props.actionsMenuProps).length)
-const hasDescriptionSection = computed(() => props.description || slots.description)
-const hasLabelSection = computed(() => hasLabel.value || slots.label || hasBadges.value)
-</script>
+<template>
+  <div :class="containerClasses">
+    <div v-if="hasLabelSection" class="full-width items-center justify-between no-wrap row" :class="labelSectionClasses">
+      <div class="items-center q-col-gutter-sm row">
+        <slot name="label">
+          <qas-label v-if="hasLabel" v-bind="defaultLabelProps" />
+        </slot>
+
+        <div v-if="hasBadges" class="col-auto items-center q-col-gutter-sm row">
+          <div v-for="(badge, badgeIndex) in props.badges" :key="badgeIndex">
+            <qas-badge v-bind="badge" />
+          </div>
+        </div>
+      </div>
+
+      <div v-if="hasActionsSection" class="text-right">
+        <slot name="actions">
+          <component :is="actionsComponent.is" v-if="hasActionsComponent" v-bind="actionsComponent.props" />
+        </slot>
+      </div>
+    </div>
+
+    <div class="items-start no-wrap q-col-gutter-sm row" :class="descriptionSectionClasses">
+      <div v-if="hasDescriptionSection" class="text-body1 text-grey-8">
+        <slot name="description">
+          {{ props.description }}
+        </slot>
+      </div>
+
+      <div v-if="!hasLabelSection" class="justify-end row text-right">
+        <slot name="actions">
+          <component :is="actionsComponent.is" v-if="hasActionsComponent" v-bind="actionsComponent.props" />
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Spacing } from '../../enums/Spacing'
+import { gutterValidator } from '../../helpers/private/gutter-validator'
+
+import { computed, useSlots } from 'vue'
+
+defineOptions({ name: 'QasHeader' })
+
+const props = defineProps({
+  actionsMenuProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  badges: {
+    type: Array,
+    default: () => []
+  },
+
+  buttonProps: {
+    default: () => ({}),
+    type: Object
+  },
+
+  description: {
+    type: String,
+    default: ''
+  },
+
+  filtersProps: {
+    default: () => ({}),
+    type: Object
+  },
+
+  labelProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  spacing: {
+    default: Spacing.Md,
+    type: String,
+    validator: gutterValidator
+  }
+})
+
+const slots = useSlots()
+
+// computed
+const containerClasses = computed(() => `q-mb-${props.spacing}`)
+
+const labelSectionClasses = computed(() => {
+  return {
+    'q-mb-xs': hasBadges.value
+  }
+})
+
+const descriptionSectionClasses = computed(() => {
+  return {
+    'justify-between': hasDescriptionSection.value,
+    'justify-end': hasActionsSection.value && !hasDescriptionSection.value
+  }
+})
+
+const defaultLabelProps = computed(() => {
+  return {
+    margin: 'none',
+    ...props.labelProps
+  }
+})
+
+const actionsComponent = computed(() => {
+  const component = {
+    [hasDefaultButton.value]: {
+      is: 'qas-btn',
+      props: {
+        ...props.buttonProps,
+        useLabelOnSmallScreen: false
+      }
+    },
+
+    [hasDefaultActionsMenu.value]: {
+      is: 'qas-actions-menu',
+      props: props.actionsMenuProps
+    },
+
+    [hasDefaultFilters.value]: {
+      is: 'qas-filters',
+      props: {
+        useSearch: false,
+        useChip: false,
+        useSpacing: false,
+        ...props.filtersProps
+      }
+    }
+  }
+
+  return component.true
+})
+
+const hasActionsComponent = computed(() => {
+  return hasDefaultButton.value || hasDefaultActionsMenu.value || hasDefaultFilters.value
+})
+
+const hasActionsSection = computed(() => !!slots.actions || hasActionsComponent.value)
+
+const hasBadges = computed(() => !!props.badges.length)
+const hasLabel = computed(() => !!Object.keys(props.labelProps).length)
+const hasDefaultButton = computed(() => !!Object.keys(props.buttonProps).length)
+const hasDefaultFilters = computed(() => !!Object.keys(props.filtersProps).length)
+const hasDefaultActionsMenu = computed(() => !!Object.keys(props.actionsMenuProps).length)
+const hasDescriptionSection = computed(() => props.description || slots.description)
+const hasLabelSection = computed(() => hasLabel.value || slots.label || hasBadges.value)
+</script>

package/src/components/header/QasHeader.yml

@@ -1,50 +1,50 @@
-type: component
-
-meta:
-  desc: Componente para cabeçalho composto por label (título), badges, descrição e ação.
-
-props:
-  actions-menu-props:
-    desc: Propriedades do QasActionsMenu.
-    default: {}
-    type: Object
-
-  badges:
-    desc: Adiciona badges ao lado do titulo (QasLabel), caso não tenha titulo fica somente as bages acima da descrição.
-    default: []
-    type: Array
-
-  button-props:
-    desc: Propriedades do QasBtn.
-    default: {}
-    type: Object
-
-  description:
-    desc: Descrição da seção a esquerda.
-    type: String
-
-  filters-props:
-    desc: Propriedades do QasFilters.
-    default: {}
-    type: Object
-
-  label-props:
-    desc: Propriedades repassadas para o componente QasLabel.
-    type: Object
-    default: {}
-
-  spacing:
-    desc: Espaçamento entre o componente e o conteúdo abaixo.
-    default: xl
-    type: String
-    examples: [none, xs, sm, md, lg, xl, '2xl', '3xl', '4xl', '5xl']
-
-slots:
-  actions:
-    desc: slot para acessar seção da direita (ações).
-
-  description:
-    desc: slot para acessar seção de descrição.
-
-  label:
-    desc: slot para acessar o label (título).
+type: component
+
+meta:
+  desc: Componente para cabeçalho composto por label (título), badges, descrição e ação.
+
+props:
+  actions-menu-props:
+    desc: Propriedades do QasActionsMenu.
+    default: {}
+    type: Object
+
+  badges:
+    desc: Adiciona badges ao lado do titulo (QasLabel), caso não tenha titulo fica somente as bages acima da descrição.
+    default: []
+    type: Array
+
+  button-props:
+    desc: Propriedades do QasBtn.
+    default: {}
+    type: Object
+
+  description:
+    desc: Descrição da seção a esquerda.
+    type: String
+
+  filters-props:
+    desc: Propriedades do QasFilters.
+    default: {}
+    type: Object
+
+  label-props:
+    desc: Propriedades repassadas para o componente QasLabel.
+    type: Object
+    default: {}
+
+  spacing:
+    desc: Espaçamento entre o componente e o conteúdo abaixo.
+    default: xl
+    type: String
+    examples: [none, xs, sm, md, lg, xl, '2xl', '3xl', '4xl', '5xl']
+
+slots:
+  actions:
+    desc: slot para acessar seção da direita (ações).
+
+  description:
+    desc: slot para acessar seção de descrição.
+
+  label:
+    desc: slot para acessar o label (título).