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

package/src/components/chart-view/QasChartView.yml

@@ -1,109 +1,109 @@
-type: component
-
-meta:
-  desc: Componente responsável pela renderização de gráficos
-
-props:
-  before-fetch:
-    desc: Callback para controlar o fetch de dados interno do componente.
-    default: null
-    type: Function
-    examples: ['beforeFetch({ payload, resolve, done })']
-
-  box-props:
-    desc: Propriedades do "QasBox" que envolve o conteúdo.
-    default: {}
-    type: Object
-
-  colors-list:
-    desc: Lista de cores personalizadas para utilizar nos gráficos
-    default: []
-    type: Array,
-    examples: ['#34B53A', '#016DD9', '#FFB200', '#F62D1B']
-
-  entity:
-    desc: Entidade da store, por exemplo se tiver que trabalhar com modulo de usuários, teremos o model "users" na store, que vai ser nossa "entity".
-    required: true
-    type: String
-
-  fetching:
-    model: true
-    desc: Model de fetching, utilizado para saber se o componente está fazendo fetching de dados.
-    type: Boolean
-    examples: [v-model:fetching="isFetching"]
-
-  filters-props:
-    desc: Repassa as props para o componente "QasFilters".
-    default: {}
-    type: Object
-
-  height:
-    desc: Define a altura do gráfico.
-    default: 380px
-    type: String
-
-  max-doughnut-slices:
-    desc: Define o máximo de fatias que o gráfico de Doughnut poderá ter. Passando o número máximo definido, o gráfico irá exibir uma fatia chamada "Outros".
-    default: 15
-    type: Number
-
-  options:
-    desc: Opções do chart.js que serão mescladas com as opções padrões pré definidas.
-    default: {}
-    type: Object
-
-  subtitle:
-    desc: Define um subtítulo para o gráfico.
-    type: String
-
-  title:
-    desc: Define um título para o gráfico.
-    type: String
-
-  type:
-    desc: Tipo de exibição do gráfico.
-    default: bar
-    type: String
-    examples: [bar, doughnut, line]
-
-  url:
-    desc: Envia como parâmetro para a action "fetchList" do modulo correspondente a "entity".
-    type: String
-
-  use-box:
-    desc: Controla se o componente vai ter o QasBox englobando ou não.
-    default: true
-    type: Boolean
-
-  use-filter-button:
-    desc: Controla se o componente vai usar ou não o componente "QasFilters".
-    type: Boolean
-
-slots:
-  default:
-    desc: 'Slot para ter o conteúdo principal (dentro do main).'
-
-  empty-results:
-    desc: 'Slot acessar quando a listagem está vazia.'
-
-events:
-  '@fetch-error -> function(value)':
-    desc: Dispara quando a action "fetchList" cai em uma exceção.
-    params:
-      value:
-        desc: Retorna todos os dados "cru" respondido na exceção do fetch.
-        type: Object
-
-  '@fetch-success -> function(value)':
-    desc: Dispara quando a action "fetchList" é executada com sucesso.
-    params:
-      value:
-        desc: Retorna todos os dados "cru" respondido pelo fetch.
-        type: Object
-
-  '@update:fetching -> function(value)':
-    desc: Dispara logo antes da action "fetchList" e ao cair no bloco "finally", ou seja, quando começar o fetching e após terminar.
-    params:
-      value:
-        desc: Retorna se está ou não fazendo fetching de dados.
-        type: Boolean
+type: component
+
+meta:
+  desc: Componente responsável pela renderização de gráficos
+
+props:
+  before-fetch:
+    desc: Callback para controlar o fetch de dados interno do componente.
+    default: null
+    type: Function
+    examples: ['beforeFetch({ payload, resolve, done })']
+
+  box-props:
+    desc: Propriedades do "QasBox" que envolve o conteúdo.
+    default: {}
+    type: Object
+
+  colors-list:
+    desc: Lista de cores personalizadas para utilizar nos gráficos
+    default: []
+    type: Array,
+    examples: ['#34B53A', '#016DD9', '#FFB200', '#F62D1B']
+
+  entity:
+    desc: Entidade da store, por exemplo se tiver que trabalhar com modulo de usuários, teremos o model "users" na store, que vai ser nossa "entity".
+    required: true
+    type: String
+
+  fetching:
+    model: true
+    desc: Model de fetching, utilizado para saber se o componente está fazendo fetching de dados.
+    type: Boolean
+    examples: [v-model:fetching="isFetching"]
+
+  filters-props:
+    desc: Repassa as props para o componente "QasFilters".
+    default: {}
+    type: Object
+
+  height:
+    desc: Define a altura do gráfico.
+    default: 380px
+    type: String
+
+  max-doughnut-slices:
+    desc: Define o máximo de fatias que o gráfico de Doughnut poderá ter. Passando o número máximo definido, o gráfico irá exibir uma fatia chamada "Outros".
+    default: 15
+    type: Number
+
+  options:
+    desc: Opções do chart.js que serão mescladas com as opções padrões pré definidas.
+    default: {}
+    type: Object
+
+  subtitle:
+    desc: Define um subtítulo para o gráfico.
+    type: String
+
+  title:
+    desc: Define um título para o gráfico.
+    type: String
+
+  type:
+    desc: Tipo de exibição do gráfico.
+    default: bar
+    type: String
+    examples: [bar, doughnut, line]
+
+  url:
+    desc: Envia como parâmetro para a action "fetchList" do modulo correspondente a "entity".
+    type: String
+
+  use-box:
+    desc: Controla se o componente vai ter o QasBox englobando ou não.
+    default: true
+    type: Boolean
+
+  use-filter-button:
+    desc: Controla se o componente vai usar ou não o componente "QasFilters".
+    type: Boolean
+
+slots:
+  default:
+    desc: 'Slot para ter o conteúdo principal (dentro do main).'
+
+  empty-results:
+    desc: 'Slot acessar quando a listagem está vazia.'
+
+events:
+  '@fetch-error -> function(value)':
+    desc: Dispara quando a action "fetchList" cai em uma exceção.
+    params:
+      value:
+        desc: Retorna todos os dados "cru" respondido na exceção do fetch.
+        type: Object
+
+  '@fetch-success -> function(value)':
+    desc: Dispara quando a action "fetchList" é executada com sucesso.
+    params:
+      value:
+        desc: Retorna todos os dados "cru" respondido pelo fetch.
+        type: Object
+
+  '@update:fetching -> function(value)':
+    desc: Dispara logo antes da action "fetchList" e ao cair no bloco "finally", ou seja, quando começar o fetching e após terminar.
+    params:
+      value:
+        desc: Retorna se está ou não fazendo fetching de dados.
+        type: Boolean

package/src/components/chart-view/config/charts/bar.js

@@ -1,45 +1,45 @@
-import { textColor } from '../defaults'
-import { legendPluginConfig, tooltipPluginConfig, zoomPluginConfig } from '../plugins'
-
-export const bar = {
-  barPercentage: 0.7,
-  borderSkipped: true,
-  borderWidth: 2,
-  color: textColor,
-  maintainAspectRatio: false,
-  plugins: {
-    legend: legendPluginConfig,
-    tooltip: tooltipPluginConfig,
-    zoom: zoomPluginConfig
-  },
-  responsive: true,
-  scales: {
-    x: {
-      border: {
-        display: false
-      },
-
-      grid: {
-        display: false
-      },
-
-      ticks: {
-        padding: 8
-      }
-    },
-
-    y: {
-      border: {
-        display: false
-      },
-
-      grid: {
-        display: false
-      },
-
-      ticks: {
-        stepSize: 1
-      }
-    }
-  }
-}
+import { textColor } from '../defaults'
+import { legendPluginConfig, tooltipPluginConfig, zoomPluginConfig } from '../plugins'
+
+export const bar = {
+  barPercentage: 0.7,
+  borderSkipped: true,
+  borderWidth: 2,
+  color: textColor,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: legendPluginConfig,
+    tooltip: tooltipPluginConfig,
+    zoom: zoomPluginConfig
+  },
+  responsive: true,
+  scales: {
+    x: {
+      border: {
+        display: false
+      },
+
+      grid: {
+        display: false
+      },
+
+      ticks: {
+        padding: 8
+      }
+    },
+
+    y: {
+      border: {
+        display: false
+      },
+
+      grid: {
+        display: false
+      },
+
+      ticks: {
+        stepSize: 1
+      }
+    }
+  }
+}

package/src/components/chart-view/config/charts/doughnut.js

@@ -1,43 +1,43 @@
-import { tooltipPluginConfig } from '../plugins'
-import { percent } from '../../../../helpers'
-
-function getPercentFormat (value, context) {
-  const total = context.dataset.data.reduce((accumulator, currentValue, index) => {
-    if (context.chart._hiddenIndices?.[index]) return accumulator
-
-    return accumulator + currentValue
-  }, 0)
-
-  const percentage = (value * 100) / total
-  const places = percentage % 1 ? 2 : 0
-
-  return percentage >= 5 ? percent(percentage, places) : ''
-}
-
-export const doughnut = {
-  borderSkipped: true,
-  borderWidth: 1,
-  maintainAspectRatio: false,
-  responsive: true,
-  plugins: {
-    datalabels: {
-      color: 'white',
-      font: {
-        weight: 600
-      },
-      formatter: getPercentFormat
-    },
-
-    legend: {
-      align: 'center',
-      labels: {
-        padding: 16,
-        pointStyle: 'circle',
-        usePointStyle: true
-      },
-      position: 'bottom'
-    },
-
-    tooltip: tooltipPluginConfig
-  }
-}
+import { tooltipPluginConfig } from '../plugins'
+import { percent } from '../../../../helpers'
+
+function getPercentFormat (value, context) {
+  const total = context.dataset.data.reduce((accumulator, currentValue, index) => {
+    if (context.chart._hiddenIndices?.[index]) return accumulator
+
+    return accumulator + currentValue
+  }, 0)
+
+  const percentage = (value * 100) / total
+  const places = percentage % 1 ? 2 : 0
+
+  return percentage >= 5 ? percent(percentage, places) : ''
+}
+
+export const doughnut = {
+  borderSkipped: true,
+  borderWidth: 1,
+  maintainAspectRatio: false,
+  responsive: true,
+  plugins: {
+    datalabels: {
+      color: 'white',
+      font: {
+        weight: 600
+      },
+      formatter: getPercentFormat
+    },
+
+    legend: {
+      align: 'center',
+      labels: {
+        padding: 16,
+        pointStyle: 'circle',
+        usePointStyle: true
+      },
+      position: 'bottom'
+    },
+
+    tooltip: tooltipPluginConfig
+  }
+}

package/src/components/chart-view/config/charts/index.js

@@ -1,9 +1,9 @@
-import { bar } from './bar'
-import { doughnut } from './doughnut'
-import { line } from './line'
-
-export default {
-  bar,
-  doughnut,
-  line
-}
+import { bar } from './bar'
+import { doughnut } from './doughnut'
+import { line } from './line'
+
+export default {
+  bar,
+  doughnut,
+  line
+}

package/src/components/chart-view/config/charts/line.js

@@ -1,57 +1,57 @@
-import { textColor } from '../defaults'
-import { legendPluginConfig, tooltipPluginConfig, zoomPluginConfig } from '../plugins'
-
-export const line = {
-  borderSkipped: true,
-  borderWidth: 2,
-  color: textColor,
-  maintainAspectRatio: false,
-  pointStyle: false,
-  responsive: true,
-
-  layout: {
-    padding: {
-      left: -24
-    }
-  },
-
-  plugins: {
-    legend: legendPluginConfig,
-    tooltip: tooltipPluginConfig,
-    zoom: zoomPluginConfig
-  },
-
-  scales: {
-    x: {
-      border: {
-        display: false
-      },
-
-      grid: {
-        color: '#E0E0E0'
-      },
-
-      ticks: {
-        padding: 8
-      }
-    },
-
-    y: {
-      beginAtZero: true,
-      offset: true,
-
-      border: {
-        display: false
-      },
-
-      grid: {
-        color: '#E0E0E0'
-      },
-
-      ticks: {
-        padding: 24,
-        stepSize: 1
-      }
-    }
-  }
-}
+import { textColor } from '../defaults'
+import { legendPluginConfig, tooltipPluginConfig, zoomPluginConfig } from '../plugins'
+
+export const line = {
+  borderSkipped: true,
+  borderWidth: 2,
+  color: textColor,
+  maintainAspectRatio: false,
+  pointStyle: false,
+  responsive: true,
+
+  layout: {
+    padding: {
+      left: -24
+    }
+  },
+
+  plugins: {
+    legend: legendPluginConfig,
+    tooltip: tooltipPluginConfig,
+    zoom: zoomPluginConfig
+  },
+
+  scales: {
+    x: {
+      border: {
+        display: false
+      },
+
+      grid: {
+        color: '#E0E0E0'
+      },
+
+      ticks: {
+        padding: 8
+      }
+    },
+
+    y: {
+      beginAtZero: true,
+      offset: true,
+
+      border: {
+        display: false
+      },
+
+      grid: {
+        color: '#E0E0E0'
+      },
+
+      ticks: {
+        padding: 24,
+        stepSize: 1
+      }
+    }
+  }
+}

package/src/components/chart-view/config/defaults/colors.js

@@ -1,19 +1,19 @@
-export const colors = [
-  '#1976D2',
-  '#90CAF9',
-  '#2962FF',
-  '#004198',
-  '#00C853',
-  '#651FFF',
-  '#26C6DA',
-  '#1976D2',
-  '#2196F3',
-  '#536DFE',
-  '#26A69A',
-  '#3F51B5',
-  '#43A047',
-  '#7E57C2',
-  '#8BC34A'
-]
-
-export const textColor = '#616161'
+export const colors = [
+  '#1976D2',
+  '#90CAF9',
+  '#2962FF',
+  '#004198',
+  '#00C853',
+  '#651FFF',
+  '#26C6DA',
+  '#1976D2',
+  '#2196F3',
+  '#536DFE',
+  '#26A69A',
+  '#3F51B5',
+  '#43A047',
+  '#7E57C2',
+  '#8BC34A'
+]
+
+export const textColor = '#616161'

package/src/components/chart-view/config/defaults/font.js

@@ -1,5 +1,5 @@
-export const font = {
-  family: 'Nunito',
-  size: 12,
-  weight: '600'
-}
+export const font = {
+  family: 'Nunito',
+  size: 12,
+  weight: '600'
+}

package/src/components/chart-view/config/defaults/index.js

@@ -1,2 +1,2 @@
-export * from './colors'
-export * from './font'
+export * from './colors'
+export * from './font'

package/src/components/chart-view/config/index.js

@@ -1,3 +1,3 @@
-export { default as charts } from './charts'
-export * from './defaults'
-export * from './plugins'
+export { default as charts } from './charts'
+export * from './defaults'
+export * from './plugins'

package/src/components/chart-view/config/plugins/index.js

@@ -1,3 +1,3 @@
-export * from './legend'
-export * from './tooltip'
-export * from './zoom'
+export * from './legend'
+export * from './tooltip'
+export * from './zoom'

package/src/components/chart-view/config/plugins/legend.js

@@ -1,9 +1,9 @@
-export const legendPluginConfig = {
-  labels: {
-    boxHeight: 4,
-    boxWidth: 16,
-    padding: 24
-  },
-
-  position: 'bottom'
-}
+export const legendPluginConfig = {
+  labels: {
+    boxHeight: 4,
+    boxWidth: 16,
+    padding: 24
+  },
+
+  position: 'bottom'
+}

package/src/components/chart-view/config/plugins/tooltip.js

@@ -1,15 +1,15 @@
-export const tooltipPluginConfig = {
-  backgroundColor: '#212121',
-  boxPadding: 4,
-  callbacks: {
-    title: function (items) {
-      return items.map(item => item.dataset.tooltips[item.dataIndex] || item.label)
-    }
-  },
-  caretSize: 0,
-  cornerRadius: 4,
-  displayColors: false,
-  padding: 12,
-  titleColor: '#fff',
-  titleMarginBottom: 8
-}
+export const tooltipPluginConfig = {
+  backgroundColor: '#212121',
+  boxPadding: 4,
+  callbacks: {
+    title: function (items) {
+      return items.map(item => item.dataset.tooltips[item.dataIndex] || item.label)
+    }
+  },
+  caretSize: 0,
+  cornerRadius: 4,
+  displayColors: false,
+  padding: 12,
+  titleColor: '#fff',
+  titleMarginBottom: 8
+}