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

package/src/components/table-generator/QasTableGenerator.yml

@@ -1,94 +1,94 @@
-type: component
-
-meta:
-  desc: Componente para criação de tabela dinâmica usando o `QTable` do quasar.
-
-props:
-  columns:
-    desc: Colunas que vão ter na tabela.
-    default: []
-    type: Array
-
-  empty-result-text:
-    desc: Quando uma célula da tabela está vazia (null, undefined, ''), esta prop define qual será o valor padrão.
-    default: '-'
-    type: String
-
-  fields:
-    desc: Lista de field contendo informações necessárias para a criação da tabela.
-    default: {}
-    type: Object
-    examples: ["{ email: { name: 'email', type: 'email', label: 'E-mail' } }"]
-
-  header-props:
-    desc: Propriedades repassadas para o componente `QasHeader`.
-    default: {}
-    type: Object
-    examples: ["{ description: 'Descrição', labelProps: { label: 'Titulo do header'} }"]
-
-  results:
-    desc: Lista com resultados para serem mostrados na tabela.
-    default: {}
-    type: Object
-    examples: ["{ name: { dense: true, onClick: () => alert('Estou sendo clicado') } }"]
-
-  row-key:
-    desc: Propriedade de cada linha que define a chave única de cada linha.
-    default: name
-    type: String
-
-  row-route-fn:
-    desc: Usado quando há a necessidade de alteração de rota ao clicar em um item da tabela(a linha passa ser um <a> habilitando a opção de abrir em uma nova aba).
-    type: Function
-    examples: ["(row) => ({ path: 'table-generator', params: { id: row.uuid } })"]
-
-  use-box:
-    desc: Controla se o componente vai usar QasBox ou div.
-    default: true
-    type: Boolean
-
-  use-external-link:
-    desc: Usado em conjunto com a prop "row-route-fn" quando há a necessidade da rota ser um link externo.
-    default: false
-    type: Boolean
-
-  use-scroll-on-grab:
-    desc: Adiciona scroll pelo mouse ao arrastar tabela em todas as telas (Celular, Desktop).
-    default: true
-    type: Boolean
-
-  use-sticky-header:
-    desc: Usado para manter o header da tabela (thead) fixo.
-    default: false
-    type: Boolean
-
-  sticky-header-table-height:
-    desc: Usado para definir a altura máxima da tabela e exibir o scroll vertical quando a propriedade "use-sticky-header" é utilizada.
-    default: 528px
-    type: String
-
-slots:
-  body:
-    desc: Acesso direto dentro do `tbody`.
-    scope:
-      row:
-        desc: Payload da linha da tabela.
-        default: {}
-        type: Object
-
-  parent-header:
-    desc: 'Acesso ao slot do header dentro container'
-
-events:
-  '@row-click -> function(event, row, index)':
-    desc: Dispara ao clicar em uma linha. Não funciona usando slots personalizados (body, row e item).
-    params:
-      event:
-        desc: Evento do click.
-        type: Event
-      row:
-        desc: Payload da linha da tabela.
-        type: Object
-      index:
-        desc: Índice da linha.
-        type: Number
+type: component
+
+meta:
+  desc: Componente para criação de tabela dinâmica usando o `QTable` do quasar.
+
+props:
+  columns:
+    desc: Colunas que vão ter na tabela.
+    default: []
+    type: Array
+
+  empty-result-text:
+    desc: Quando uma célula da tabela está vazia (null, undefined, ''), esta prop define qual será o valor padrão.
+    default: '-'
+    type: String
+
+  fields:
+    desc: Lista de field contendo informações necessárias para a criação da tabela.
+    default: {}
+    type: Object
+    examples: ["{ email: { name: 'email', type: 'email', label: 'E-mail' } }"]
+
+  header-props:
+    desc: Propriedades repassadas para o componente `QasHeader`.
+    default: {}
+    type: Object
+    examples: ["{ description: 'Descrição', labelProps: { label: 'Titulo do header'} }"]
+
+  results:
+    desc: Lista com resultados para serem mostrados na tabela.
+    default: {}
+    type: Object
+    examples: ["{ name: { dense: true, onClick: () => alert('Estou sendo clicado') } }"]
+
+  row-key:
+    desc: Propriedade de cada linha que define a chave única de cada linha.
+    default: name
+    type: String
+
+  row-route-fn:
+    desc: Usado quando há a necessidade de alteração de rota ao clicar em um item da tabela(a linha passa ser um <a> habilitando a opção de abrir em uma nova aba).
+    type: Function
+    examples: ["(row) => ({ path: 'table-generator', params: { id: row.uuid } })"]
+
+  use-box:
+    desc: Controla se o componente vai usar QasBox ou div.
+    default: true
+    type: Boolean
+
+  use-external-link:
+    desc: Usado em conjunto com a prop "row-route-fn" quando há a necessidade da rota ser um link externo.
+    default: false
+    type: Boolean
+
+  use-scroll-on-grab:
+    desc: Adiciona scroll pelo mouse ao arrastar tabela em todas as telas (Celular, Desktop).
+    default: true
+    type: Boolean
+
+  use-sticky-header:
+    desc: Usado para manter o header da tabela (thead) fixo.
+    default: false
+    type: Boolean
+
+  sticky-header-table-height:
+    desc: Usado para definir a altura máxima da tabela e exibir o scroll vertical quando a propriedade "use-sticky-header" é utilizada.
+    default: 528px
+    type: String
+
+slots:
+  body:
+    desc: Acesso direto dentro do `tbody`.
+    scope:
+      row:
+        desc: Payload da linha da tabela.
+        default: {}
+        type: Object
+
+  parent-header:
+    desc: 'Acesso ao slot do header dentro container'
+
+events:
+  '@row-click -> function(event, row, index)':
+    desc: Dispara ao clicar em uma linha. Não funciona usando slots personalizados (body, row e item).
+    params:
+      event:
+        desc: Evento do click.
+        type: Event
+      row:
+        desc: Payload da linha da tabela.
+        type: Object
+      index:
+        desc: Índice da linha.
+        type: Number

package/src/components/tabs-generator/QasTabsGenerator.vue

@@ -1,196 +1,196 @@
-<template>
-  <div class="qas-tabs-generator">
-    <q-tabs v-model="model" active-color="primary" align="left" :breakpoint="0" content-class="text-grey-8" dense inline-label left-icon="sym_r_chevron_left" outside-arrows right-icon="sym_r_chevron_right">
-      <slot v-for="(tab, key) in formattedTabs" :item="tab" :name="`tab-${tab.value}`">
-        <component :is="tabComponent" :key="key" v-bind="getTabProps(tab)" class="text-body1" :name="tab.value" no-caps :ripple="false">
-          <slot :item="tab" :name="`tab-after-${tab.value}`">
-            <q-icon v-if="tab.icon" :name="tab.icon" size="sm" />
-
-            <qas-status v-if="tab.status" :color="tab.status" />
-
-            <div class="q-ml-xs">
-              {{ getFormattedLabel(tab) }}
-            </div>
-          </slot>
-        </component>
-      </slot>
-    </q-tabs>
-  </div>
-</template>
-
-<script setup>
-import QasStatus from '../status/QasStatus.vue'
-
-import { decimal } from '../../helpers'
-
-import { computed } from 'vue'
-import { extend } from 'quasar'
-
-defineOptions({ name: 'QasTabsGenerator' })
-
-const props = defineProps({
-  counters: {
-    default: () => ({}),
-    type: Object
-  },
-
-  modelValue: {
-    default: '',
-    type: [String, Number]
-  },
-
-  tabs: {
-    default: () => ({}),
-    required: true,
-    type: [Object, Array]
-  },
-
-  useRouteTab: {
-    type: Boolean
-  }
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-// computed
-const model = computed({
-  get () {
-    return props.modelValue
-  },
-
-  set (value) {
-    const currentTab = Array.isArray(props.tabs)
-      ? props.tabs.find(tab => tab?.value === value)
-      : formattedTabs.value[value]
-
-    if (currentTab?.disabled) return
-
-    emit('update:modelValue', value)
-  }
-})
-
-const formattedTabs = computed(() => {
-  const tabs = extend(true, {}, props.tabs)
-
-  for (const key in tabs) {
-    if (typeof tabs[key] === 'string') {
-      tabs[key] = { label: tabs[key], value: key }
-    }
-  }
-
-  return tabs
-})
-
-const tabComponent = computed(() => props.useRouteTab ? 'q-route-tab' : 'q-tab')
-
-// functions
-function getFormattedLabel ({ label, counter, value }) {
-  const normalizedCount = props.counters[value] || counter
-
-  if (!normalizedCount) return label
-
-  const countString = String(decimal(normalizedCount))
-
-  return `${label} (${countString.padStart(2, '0')})`
-}
-
-function getTabProps (tab) {
-  const { icon, label, ...payload } = tab
-
-  return payload
-}
-</script>
-
-<style lang="scss">
-.qas-tabs-generator {
-  .q-tabs {
-    &--scrollable {
-      .q-tab {
-        &:first-child {
-          padding-left: var(--qas-spacing-xs);
-        }
-
-        &:last-child {
-          padding-right: var(--qas-spacing-xs);
-        }
-      }
-    }
-
-    .q-tab {
-      &--inactive {
-        opacity: 1;
-      }
-
-      &__content {
-        position: relative;
-
-        &::before {
-          background: var(--q-primary);
-          bottom: 0;
-          content: '';
-          height: 2px;
-          left: 0;
-          position: absolute;
-          right: 0;
-          transform: scale(0);
-          transition: transform var(--qas-generic-transition);
-        }
-      }
-
-      &--active {
-        font-weight: 600;
-
-        .q-tab__content {
-          position: relative;
-
-          &::before {
-            transform: scale(100%);
-          }
-        }
-      }
-
-      &:not(.q-tabs--scrollable .q-tab):first-child {
-        padding-left: 0;
-      }
-
-      &:not(.q-tabs--scrollable .q-tab):last-child {
-        padding-right: 0;
-      }
-
-      &:not(&--active) {
-        transition: color var(--qas-generic-transition);
-
-        &:not([disabled]):hover {
-          color: var(--q-primary-contrast) !important;
-        }
-      }
-
-      &__icon {
-        font-size: 24px;
-      }
-
-      &__arrow--faded {
-        color: $grey-6;
-        opacity: 1 !important;
-      }
-
-      &__indicator {
-        display: none;
-      }
-    }
-
-    &__arrow:not(&--faded) {
-      color: $grey-10;
-      transition: color var(--qas-generic-transition);
-
-      &:hover {
-        color: var(--q-primary-contrast);
-      }
-    }
-  }
-
-  .q-focus-helper {
-    display: none;
-  }
-}
-</style>
+<template>
+  <div class="qas-tabs-generator">
+    <q-tabs v-model="model" active-color="primary" align="left" :breakpoint="0" content-class="text-grey-8" dense inline-label left-icon="sym_r_chevron_left" outside-arrows right-icon="sym_r_chevron_right">
+      <slot v-for="(tab, key) in formattedTabs" :item="tab" :name="`tab-${tab.value}`">
+        <component :is="tabComponent" :key="key" v-bind="getTabProps(tab)" class="text-body1" :name="tab.value" no-caps :ripple="false">
+          <slot :item="tab" :name="`tab-after-${tab.value}`">
+            <q-icon v-if="tab.icon" :name="tab.icon" size="sm" />
+
+            <qas-status v-if="tab.status" :color="tab.status" />
+
+            <div class="q-ml-xs">
+              {{ getFormattedLabel(tab) }}
+            </div>
+          </slot>
+        </component>
+      </slot>
+    </q-tabs>
+  </div>
+</template>
+
+<script setup>
+import QasStatus from '../status/QasStatus.vue'
+
+import { decimal } from '../../helpers'
+
+import { computed } from 'vue'
+import { extend } from 'quasar'
+
+defineOptions({ name: 'QasTabsGenerator' })
+
+const props = defineProps({
+  counters: {
+    default: () => ({}),
+    type: Object
+  },
+
+  modelValue: {
+    default: '',
+    type: [String, Number]
+  },
+
+  tabs: {
+    default: () => ({}),
+    required: true,
+    type: [Object, Array]
+  },
+
+  useRouteTab: {
+    type: Boolean
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+// computed
+const model = computed({
+  get () {
+    return props.modelValue
+  },
+
+  set (value) {
+    const currentTab = Array.isArray(props.tabs)
+      ? props.tabs.find(tab => tab?.value === value)
+      : formattedTabs.value[value]
+
+    if (currentTab?.disabled) return
+
+    emit('update:modelValue', value)
+  }
+})
+
+const formattedTabs = computed(() => {
+  const tabs = extend(true, {}, props.tabs)
+
+  for (const key in tabs) {
+    if (typeof tabs[key] === 'string') {
+      tabs[key] = { label: tabs[key], value: key }
+    }
+  }
+
+  return tabs
+})
+
+const tabComponent = computed(() => props.useRouteTab ? 'q-route-tab' : 'q-tab')
+
+// functions
+function getFormattedLabel ({ label, counter, value }) {
+  const normalizedCount = props.counters[value] || counter
+
+  if (!normalizedCount) return label
+
+  const countString = String(decimal(normalizedCount))
+
+  return `${label} (${countString.padStart(2, '0')})`
+}
+
+function getTabProps (tab) {
+  const { icon, label, ...payload } = tab
+
+  return payload
+}
+</script>
+
+<style lang="scss">
+.qas-tabs-generator {
+  .q-tabs {
+    &--scrollable {
+      .q-tab {
+        &:first-child {
+          padding-left: var(--qas-spacing-xs);
+        }
+
+        &:last-child {
+          padding-right: var(--qas-spacing-xs);
+        }
+      }
+    }
+
+    .q-tab {
+      &--inactive {
+        opacity: 1;
+      }
+
+      &__content {
+        position: relative;
+
+        &::before {
+          background: var(--q-primary);
+          bottom: 0;
+          content: '';
+          height: 2px;
+          left: 0;
+          position: absolute;
+          right: 0;
+          transform: scale(0);
+          transition: transform var(--qas-generic-transition);
+        }
+      }
+
+      &--active {
+        font-weight: 600;
+
+        .q-tab__content {
+          position: relative;
+
+          &::before {
+            transform: scale(100%);
+          }
+        }
+      }
+
+      &:not(.q-tabs--scrollable .q-tab):first-child {
+        padding-left: 0;
+      }
+
+      &:not(.q-tabs--scrollable .q-tab):last-child {
+        padding-right: 0;
+      }
+
+      &:not(&--active) {
+        transition: color var(--qas-generic-transition);
+
+        &:not([disabled]):hover {
+          color: var(--q-primary-contrast) !important;
+        }
+      }
+
+      &__icon {
+        font-size: 24px;
+      }
+
+      &__arrow--faded {
+        color: $grey-6;
+        opacity: 1 !important;
+      }
+
+      &__indicator {
+        display: none;
+      }
+    }
+
+    &__arrow:not(&--faded) {
+      color: $grey-10;
+      transition: color var(--qas-generic-transition);
+
+      &:hover {
+        color: var(--q-primary-contrast);
+      }
+    }
+  }
+
+  .q-focus-helper {
+    display: none;
+  }
+}
+</style>

package/src/components/tabs-generator/QasTabsGenerator.yml

@@ -1,53 +1,53 @@
-type: component
-
-mixins:
-  - quasar/dist/api/QTabs.json
-
-meta:
-  desc: Componente para gerar tabs dinamicamente, implementa o QTab e QTabs.
-
-props:
-  counters:
-    desc: Contador que ficará junto a label "Todos (24)"
-    default: {}
-    type: Object
-    examples: ["{ all: 24 }"]
-
-  model-value:
-    desc: Model do componente, controla qual é a tab atual selecionada.
-    type: [String, Number]
-    model: true
-
-  tabs:
-    desc: Objeto ou Array contendo todas as tabs a serem geradas.
-    default: {}
-    type: [Object, Array]
-    examples: ["{ tab1: 'tab1', tab2: 'tab2' }"]
-
-  useRouteTab:
-    desc: Quando "true" será utilizado o componente "QRouteTab" do Quasar (https://quasar.dev/vue-components/tabs#qroutetab-api).
-    default: false
-    type: Boolean
-
-slots:
-  'tab-[nome-da-chave]':
-    desc: Slot dinâmico gerado a partir das chave passada na prop "tabs", substitui todo o "q-tab".
-    scope:
-      item:
-        desc: Objeto com informações da tab atual
-        type: Object
-
-  'tab-after-[nome-da-chave]':
-    desc: Slot dinâmico gerado a partir das chave passada na prop "tabs", substitui o conteúdo dentro do "q-tab".
-    scope:
-      item:
-        desc: Objeto com informações da tab atual
-        type: Object
-
-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: String
+type: component
+
+mixins:
+  - quasar/dist/api/QTabs.json
+
+meta:
+  desc: Componente para gerar tabs dinamicamente, implementa o QTab e QTabs.
+
+props:
+  counters:
+    desc: Contador que ficará junto a label "Todos (24)"
+    default: {}
+    type: Object
+    examples: ["{ all: 24 }"]
+
+  model-value:
+    desc: Model do componente, controla qual é a tab atual selecionada.
+    type: [String, Number]
+    model: true
+
+  tabs:
+    desc: Objeto ou Array contendo todas as tabs a serem geradas.
+    default: {}
+    type: [Object, Array]
+    examples: ["{ tab1: 'tab1', tab2: 'tab2' }"]
+
+  useRouteTab:
+    desc: Quando "true" será utilizado o componente "QRouteTab" do Quasar (https://quasar.dev/vue-components/tabs#qroutetab-api).
+    default: false
+    type: Boolean
+
+slots:
+  'tab-[nome-da-chave]':
+    desc: Slot dinâmico gerado a partir das chave passada na prop "tabs", substitui todo o "q-tab".
+    scope:
+      item:
+        desc: Objeto com informações da tab atual
+        type: Object
+
+  'tab-after-[nome-da-chave]':
+    desc: Slot dinâmico gerado a partir das chave passada na prop "tabs", substitui o conteúdo dentro do "q-tab".
+    scope:
+      item:
+        desc: Objeto com informações da tab atual
+        type: Object
+
+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: String