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

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

@@ -1,30 +1,30 @@
-type: component
-
-meta:
-  desc: Componente wrapper do [QOptionGroup](https://quasar.dev/vue-components/option-group#introduction).
-
-props:
-  options:
-    desc: Opções contendo objetos com chaves "label" e "value".
-    default: []
-    type: Array
-
-  model-value:
-    desc: Model do componente, usado para v-model.
-    default: []
-    type: [String, Number, Array, Boolean]
-    examples: [v-model"value"]
-    model: true
-
-  type:
-    desc: Tipo de componente, podendo ser radio, checkbox ou toggle.
-    default: 'radio'
-    type: String
-
-events:
-  '@update:model-value -> function (value)':
-    desc: Dispara toda vez que o model é atualizado, também utilizado para v-model.
-    params:
-      value:
-        desc: Novo valor do v-model
-        type: String
+type: component
+
+meta:
+  desc: Componente wrapper do [QOptionGroup](https://quasar.dev/vue-components/option-group#introduction).
+
+props:
+  options:
+    desc: Opções contendo objetos com chaves "label" e "value".
+    default: []
+    type: Array
+
+  model-value:
+    desc: Model do componente, usado para v-model.
+    default: []
+    type: [String, Number, Array, Boolean]
+    examples: [v-model"value"]
+    model: true
+
+  type:
+    desc: Tipo de componente, podendo ser radio, checkbox ou toggle.
+    default: 'radio'
+    type: String
+
+events:
+  '@update:model-value -> function (value)':
+    desc: Dispara toda vez que o model é atualizado, também utilizado para v-model.
+    params:
+      value:
+        desc: Novo valor do v-model
+        type: String

package/src/components/page-header/QasPageHeader.vue

@@ -1,143 +1,143 @@
-<template>
-  <div>
-    <q-toolbar class="justify-between q-mb-md q-px-none qas-page-header">
-      <div class="ellipsis">
-        <q-toolbar-title v-if="props.title" class="text-h3">
-          {{ props.title }}
-        </q-toolbar-title>
-
-        <q-breadcrumbs v-if="props.useBreadcrumbs" class="text-caption" gutter="xs" separator-color="grey-8">
-          <q-breadcrumbs-el v-if="props.useHomeIcon" class="qas-page-header__breadcrumbs-el text-grey-8" icon="sym_r_home" :to="homeRoute" />
-
-          <q-breadcrumbs-el v-for="(item, index) in normalizedBreadcrumbs" :key="index" class="ellipsis inline-block qas-page-header__breadcrumbs-el" :label="item.label" :to="item.route" />
-        </q-breadcrumbs>
-      </div>
-
-      <slot />
-    </q-toolbar>
-
-    <div>
-      <slot name="bottom">
-        <qas-header v-if="hasHeader" v-bind="props.headerProps" />
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import QasHeader from '../header/QasHeader.vue'
-
-import { castArray } from 'lodash-es'
-import { computed } from 'vue'
-import { useMeta } from 'quasar'
-import { useRouter } from 'vue-router'
-
-defineOptions({ name: 'QasPageHeader' })
-
-const props = defineProps({
-  breadcrumbs: {
-    default: '',
-    type: [Array, String]
-  },
-
-  headerProps: {
-    default: () => ({}),
-    type: Object
-  },
-
-  root: {
-    default: '',
-    type: [Object, String]
-  },
-
-  title: {
-    default: '',
-    type: String
-  },
-
-  useBreadcrumbs: {
-    default: true,
-    type: Boolean
-  },
-
-  useHomeIcon: {
-    default: true,
-    type: Boolean
-  }
-})
-
-const router = useRouter()
-
-// meta tag
-useMeta(() => ({ title: props.title }))
-
-// computed
-const transformedBreadcrumbs = computed(() => {
-  const list = [...castArray(props.breadcrumbs || props.title)]
-
-  props.root && list.unshift(props.root)
-
-  return list.map(item => {
-    if (item && typeof item === 'string') {
-      return { label: item }
-    }
-
-    if (!item.route && item.routeName) {
-      item.route = { name: item.routeName }
-    }
-
-    return item
-  })
-})
-
-const normalizedBreadcrumbs = computed(() => {
-  const breadcrumbsSize = transformedBreadcrumbs.value.length
-
-  if (breadcrumbsSize < 5) return transformedBreadcrumbs.value
-
-  const [first, second] = transformedBreadcrumbs.value
-  const last = transformedBreadcrumbs.value.at(-1)
-
-  const beforeLast = {
-    ...transformedBreadcrumbs.value.at(-2),
-    label: '...'
-  }
-
-  return [
-    first,
-    second,
-    beforeLast,
-    last
-  ]
-})
-
-const hasHeader = computed(() => !!Object.keys(props.headerProps).length)
-
-const homeRoute = computed(() => router.hasRoute('Root') ? { name: 'Root' } : '/')
-</script>
-
-<style lang="scss">
-.qas-page-header {
-  &__breadcrumbs-el {
-    max-width: 180px;
-    transition: color var(--qas-generic-transition);
-
-    &.q-breadcrumbs__el:not(.q-router-link--exact-active):hover {
-      color: var(--qas-primary-contrast) !important;
-    }
-
-    .q-breadcrumbs__el-icon {
-      font-size: 16px;
-    }
-  }
-
-  // aplica cor "grey-8" a todos os .q-breadcrumbs__el que não uma classe .q-breadcrumbs--last como pai
-  .q-breadcrumbs__el:not(.q-breadcrumbs--last .q-breadcrumbs__el) {
-    color: $grey-8;
-  }
-
-  .q-breadcrumbs--last {
-    color: var(--q-primary);
-  }
-}
-</style>
+<template>
+  <div>
+    <q-toolbar class="justify-between q-mb-md q-px-none qas-page-header">
+      <div class="ellipsis">
+        <q-toolbar-title v-if="props.title" class="text-h3">
+          {{ props.title }}
+        </q-toolbar-title>
+
+        <q-breadcrumbs v-if="props.useBreadcrumbs" class="text-caption" gutter="xs" separator-color="grey-8">
+          <q-breadcrumbs-el v-if="props.useHomeIcon" class="qas-page-header__breadcrumbs-el text-grey-8" icon="sym_r_home" :to="homeRoute" />
+
+          <q-breadcrumbs-el v-for="(item, index) in normalizedBreadcrumbs" :key="index" class="ellipsis inline-block qas-page-header__breadcrumbs-el" :label="item.label" :to="item.route" />
+        </q-breadcrumbs>
+      </div>
+
+      <slot />
+    </q-toolbar>
+
+    <div>
+      <slot name="bottom">
+        <qas-header v-if="hasHeader" v-bind="props.headerProps" />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import QasHeader from '../header/QasHeader.vue'
+
+import { castArray } from 'lodash-es'
+import { computed } from 'vue'
+import { useMeta } from 'quasar'
+import { useRouter } from 'vue-router'
+
+defineOptions({ name: 'QasPageHeader' })
+
+const props = defineProps({
+  breadcrumbs: {
+    default: '',
+    type: [Array, String]
+  },
+
+  headerProps: {
+    default: () => ({}),
+    type: Object
+  },
+
+  root: {
+    default: '',
+    type: [Object, String]
+  },
+
+  title: {
+    default: '',
+    type: String
+  },
+
+  useBreadcrumbs: {
+    default: true,
+    type: Boolean
+  },
+
+  useHomeIcon: {
+    default: true,
+    type: Boolean
+  }
+})
+
+const router = useRouter()
+
+// meta tag
+useMeta(() => ({ title: props.title }))
+
+// computed
+const transformedBreadcrumbs = computed(() => {
+  const list = [...castArray(props.breadcrumbs || props.title)]
+
+  props.root && list.unshift(props.root)
+
+  return list.map(item => {
+    if (item && typeof item === 'string') {
+      return { label: item }
+    }
+
+    if (!item.route && item.routeName) {
+      item.route = { name: item.routeName }
+    }
+
+    return item
+  })
+})
+
+const normalizedBreadcrumbs = computed(() => {
+  const breadcrumbsSize = transformedBreadcrumbs.value.length
+
+  if (breadcrumbsSize < 5) return transformedBreadcrumbs.value
+
+  const [first, second] = transformedBreadcrumbs.value
+  const last = transformedBreadcrumbs.value.at(-1)
+
+  const beforeLast = {
+    ...transformedBreadcrumbs.value.at(-2),
+    label: '...'
+  }
+
+  return [
+    first,
+    second,
+    beforeLast,
+    last
+  ]
+})
+
+const hasHeader = computed(() => !!Object.keys(props.headerProps).length)
+
+const homeRoute = computed(() => router.hasRoute('Root') ? { name: 'Root' } : '/')
+</script>
+
+<style lang="scss">
+.qas-page-header {
+  &__breadcrumbs-el {
+    max-width: 180px;
+    transition: color var(--qas-generic-transition);
+
+    &.q-breadcrumbs__el:not(.q-router-link--exact-active):hover {
+      color: var(--qas-primary-contrast) !important;
+    }
+
+    .q-breadcrumbs__el-icon {
+      font-size: 16px;
+    }
+  }
+
+  // aplica cor "grey-8" a todos os .q-breadcrumbs__el que não uma classe .q-breadcrumbs--last como pai
+  .q-breadcrumbs__el:not(.q-breadcrumbs--last .q-breadcrumbs__el) {
+    color: $grey-8;
+  }
+
+  .q-breadcrumbs--last {
+    color: var(--q-primary);
+  }
+}
+</style>

package/src/components/page-header/QasPageHeader.yml

@@ -1,42 +1,42 @@
-type: component
-
-mixins:
-  - quasar/dist/api/QToolbar.json
-
-meta:
-  desc: Componente para cabeçalho de páginas com breadcrumbs e botão de voltar baseado no histórico de navegação dentro da aplicação.
-
-props:
-  breadcrumbs:
-    desc: Configurações do QBreadcrumbs (https://quasar.dev/vue-components/breadcrumbs#introduction).
-    type: [Array, String]
-
-  title:
-    desc: Título do cabeçalho.
-    type: String
-
-  header-props:
-    desc: Propriedades do QasHeaderActions.
-    default: {}
-    type: Object
-
-  root:
-    desc: Rota raiz do breadcrumbs.
-    type: [Object, String]
-
-  use-breadcrumbs:
-    desc: Habilita ou não o breadcrumbs.
-    default: true
-    type: Boolean
-
-  use-home-icon:
-    desc: Habilita o ícone de início como primeiro nível do breadcrumbs.
-    default: true
-    type: Boolean
-
-slots:
-  bottom:
-    desc: slot para acessar abaixo do titulo e breadcrumbs.
-
-  default:
-    desc: slot para acessar lado direito do titulo e breadcrumbs.
+type: component
+
+mixins:
+  - quasar/dist/api/QToolbar.json
+
+meta:
+  desc: Componente para cabeçalho de páginas com breadcrumbs e botão de voltar baseado no histórico de navegação dentro da aplicação.
+
+props:
+  breadcrumbs:
+    desc: Configurações do QBreadcrumbs (https://quasar.dev/vue-components/breadcrumbs#introduction).
+    type: [Array, String]
+
+  title:
+    desc: Título do cabeçalho.
+    type: String
+
+  header-props:
+    desc: Propriedades do QasHeaderActions.
+    default: {}
+    type: Object
+
+  root:
+    desc: Rota raiz do breadcrumbs.
+    type: [Object, String]
+
+  use-breadcrumbs:
+    desc: Habilita ou não o breadcrumbs.
+    default: true
+    type: Boolean
+
+  use-home-icon:
+    desc: Habilita o ícone de início como primeiro nível do breadcrumbs.
+    default: true
+    type: Boolean
+
+slots:
+  bottom:
+    desc: slot para acessar abaixo do titulo e breadcrumbs.
+
+  default:
+    desc: slot para acessar lado direito do titulo e breadcrumbs.

package/src/components/pagination/QasPagination.vue

@@ -1,71 +1,71 @@
-<template>
-  <q-pagination v-bind="defaultProps" />
-</template>
-
-<script setup>
-import { computed, useAttrs } from 'vue'
-
-defineOptions({ name: 'QasPagination' })
-
-const attrs = useAttrs()
-
-const defaultProps = computed(() => {
-  const { modelValue, ...attributes } = attrs
-
-  return {
-    activeColor: 'primary',
-    activeDesign: 'flat',
-    boundaryNumbers: true,
-    class: 'qas-pagination',
-    color: 'grey-8',
-    directionLinks: true,
-    iconNext: 'sym_r_chevron_right',
-    iconPrev: 'sym_r_chevron_left',
-    maxPages: 3,
-    modelValue,
-
-    ...attributes
-  }
-})
-</script>
-
-<style lang="scss">
-.qas-pagination {
-  // https://quasar.dev/style/sass-scss-variables#caveat: $
-
-  .q-pagination__content .q-btn {
-    @include set-button(
-      tertiary,
-      false,
-      false,
-      grey-10
-    );
-
-    min-width: 24px !important;
-
-    &.text-primary {
-      color: var(--q-primary) !important;
-    }
-  }
-
-  .q-pagination__middle + .q-btn,
-  .q-btn + .q-pagination__middle,
-  .q-btn + .q-btn {
-    margin-left: var(--qas-spacing-md) !important;
-  }
-
-  .q-pagination__content > .q-btn,
-  .q-pagination__middle > .q-btn {
-    margin-left: 0;
-    margin-top: 0;
-  }
-
-  @media (max-width: $breakpoint-xs) {
-    .q-pagination__middle + .q-btn,
-    .q-btn + .q-pagination__middle,
-    .q-btn + .q-btn {
-      margin-left: var(--qas-spacing-sm) !important;
-    }
-  }
-}
-</style>
+<template>
+  <q-pagination v-bind="defaultProps" />
+</template>
+
+<script setup>
+import { computed, useAttrs } from 'vue'
+
+defineOptions({ name: 'QasPagination' })
+
+const attrs = useAttrs()
+
+const defaultProps = computed(() => {
+  const { modelValue, ...attributes } = attrs
+
+  return {
+    activeColor: 'primary',
+    activeDesign: 'flat',
+    boundaryNumbers: true,
+    class: 'qas-pagination',
+    color: 'grey-8',
+    directionLinks: true,
+    iconNext: 'sym_r_chevron_right',
+    iconPrev: 'sym_r_chevron_left',
+    maxPages: 3,
+    modelValue,
+
+    ...attributes
+  }
+})
+</script>
+
+<style lang="scss">
+.qas-pagination {
+  // https://quasar.dev/style/sass-scss-variables#caveat: $
+
+  .q-pagination__content .q-btn {
+    @include set-button(
+      tertiary,
+      false,
+      false,
+      grey-10
+    );
+
+    min-width: 24px !important;
+
+    &.text-primary {
+      color: var(--q-primary) !important;
+    }
+  }
+
+  .q-pagination__middle + .q-btn,
+  .q-btn + .q-pagination__middle,
+  .q-btn + .q-btn {
+    margin-left: var(--qas-spacing-md) !important;
+  }
+
+  .q-pagination__content > .q-btn,
+  .q-pagination__middle > .q-btn {
+    margin-left: 0;
+    margin-top: 0;
+  }
+
+  @media (max-width: $breakpoint-xs) {
+    .q-pagination__middle + .q-btn,
+    .q-btn + .q-pagination__middle,
+    .q-btn + .q-btn {
+      margin-left: var(--qas-spacing-sm) !important;
+    }
+  }
+}
+</style>

package/src/components/pagination/QasPagination.yml

@@ -1,4 +1,4 @@
-type: component
-
-meta:
-  desc: Componente para paginação de listagens.
+type: component
+
+meta:
+  desc: Componente para paginação de listagens.