@bildvitta/quasar-ui-asteroid 3.0.0-beta.2 → 3.0.0-beta.20

package/src/components/uploader/QasUploader.yml

@@ -39,6 +39,13 @@ props:
     default: undefined
     type: Number
 
+  model-value:
+    desc: Model do componente, caso seja múltiplo, retorna um array de string, senão somente uma string.
+    default: true
+    type: [Array, String]
+    examples: [v-model="value"]
+    model: true
+
   pica-resize-options:
     desc: Opções para a biblioteca "pica" que é responsável por fazer o redimensionamento antes do upload (https://github.com/nodeca/pica).
     type: Object
@@ -48,6 +55,11 @@ props:
       unsharpRadius: 0.6
       unsharpThreshold: 1
 
+  readonly:
+    desc: O componente não faz mais upload, apenas exibe.
+    default: true
+    type: Number
+
   size-limit:
     desc: Se o tamanho da imagem for menor ou igual ao passado nesta prop, não será feito um redimensionamento.
     default: 1280
@@ -58,24 +70,17 @@ props:
     default: true
     type: Number
 
-  readonly:
-    desc: O componente não faz mais upload, apenas exibe.
-    default: true
-    type: Number
-
-  model-value:
-    desc: Model do componente, caso seja múltiplo, retorna um array de string, senão somente uma string.
-    default: true
-    type: [Array, String]
-    examples: [v-model="value"]
-    model: true
-
   uploading:
     desc: Model que retorna se o componente está fazendo algum upload.
     type: Boolean
     examples: [v-model:uploading="isUploading"]
     model: true
 
+  useObjectModel:
+    desc: Controla se a model retornará um array de objetos.
+    type: Boolean
+    model: true
+
 slots:
   header:
     desc: Acesso ao header do <q-uploader />.

package/src/composables/index.js

@@ -1 +1 @@
-export { default as useHistory } from './useHistory.js'
+export { default as useHistory } from './use-history.js'

package/src/css/components/base.scss

@@ -0,0 +1,3 @@
+body {
+  background-color: $background-color;
+}

package/src/css/components/field.scss

@@ -0,0 +1,4 @@
+.q-field--outlined .q-field__inner {
+  background-color: white;
+  border-radius: $generic-border-radius;
+}

package/src/css/components/index.scss

@@ -0,0 +1,4 @@
+@import './base';
+@import './field';
+@import './radio';
+@import './tabs';

package/src/css/components/radio.scss

@@ -0,0 +1,3 @@
+.q-radio__inner::before {
+  color: $primary;
+}

package/src/css/components/tabs.scss

@@ -0,0 +1,3 @@
+.q-tabs__arrow {
+  color: $primary;
+}

package/src/css/mixins/index.scss

@@ -0,0 +1 @@
+@import './set-brand';

package/src/css/utils/index.scss

@@ -0,0 +1,9 @@
+@import './background';
+@import './border';
+@import './border-radius';
+@import './container';
+@import './fonts';
+@import './line-height';
+@import './opacity';
+@import './text';
+@import './unset';

package/src/css/variables/button.scss

@@ -0,0 +1,3 @@
+$button-font-size: 0.875rem;
+$button-line-height: 1.5rem;
+$button-font-weight: 500;

package/src/css/variables/index.scss

@@ -0,0 +1,3 @@
+@import './button';
+@import './shadow';
+@import './typography';

package/src/css/variables/shadow.scss

@@ -0,0 +1,33 @@
+$shadow-color: $accent;
+
+$elevation-umbra: $shadow-color;
+$elevation-penumbra: $shadow-color;
+$elevation-ambient: $shadow-color;
+
+// Embossed
+$shadow-2: (
+  0 1px 5px $elevation-umbra,
+  0 2px 2px $elevation-penumbra,
+  0 3px 1px -2px $elevation-ambient
+);
+
+// Shallow
+$shadow-6: (
+  0 3px 5px -1px $elevation-umbra,
+  0 6px 10px $elevation-penumbra,
+  0 1px 18px $elevation-ambient
+);
+
+// Overhead
+$shadow-14: (
+  0 7px 9px -4px $elevation-umbra,
+  0 14px 21px 2px $elevation-penumbra,
+  0 5px 26px 4px $elevation-ambient
+);
+
+// levite
+$shadow-20: (
+  0 10px 13px -6px $elevation-umbra,
+  0 20px 31px 3px $elevation-penumbra,
+  0 8px 38px 7px $elevation-ambient
+);

package/src/css/variables/typography.scss

@@ -0,0 +1,139 @@
+// Definições seguindo:
+// https://www.figma.com/file/JfDthOZoULYMlRJM2IQ8Oi/Design-System?node-id=665%3A163
+
+// Quasar:
+// https://github.com/quasarframework/quasar/blob/dev/ui/src/css/variables.sass
+// https://github.com/quasarframework/quasar/blob/dev/ui/src/css/core/typography.sass
+
+@use 'sass:map';
+
+// headings
+$h1: (
+  size: 6rem,
+  line-height: 6rem,
+  letter-spacing: 0,
+  weight: 800,
+  margin: 0
+);
+
+$h2: (
+  size: 3.75rem,
+  line-height: 3.75rem,
+  letter-spacing: 0,
+  weight: 700,
+  margin: 0
+);
+
+$h3: (
+  size: 3rem,
+  line-height: 2.5rem,
+  letter-spacing: 0,
+  weight: 600,
+  margin: 0
+);
+
+$h4: (
+  size: 2.125rem,
+  line-height: 2.5rem,
+  letter-spacing: 0,
+  weight: 800,
+  margin: 0
+);
+
+$h5: (
+  size: 1.5rem,
+  line-height: 2rem,
+  letter-spacing: 0,
+  weight: 700,
+  margin: 0
+);
+
+$h6: (
+  size: 1.25rem,
+  line-height: 2rem,
+  letter-spacing: 0,
+  weight: 600,
+  margin: 0
+);
+
+// subtitles
+$subtitle1: (
+  size: 1rem,
+  line-height: 1.75rem,
+  letter-spacing: 0,
+  weight: 700
+);
+
+$subtitle2: (
+  size: 0.875rem,
+  line-height: 1.375rem,
+  letter-spacing: 0,
+  weight: 600
+);
+
+// body
+$body1: (
+  size: 1rem,
+  line-height: 1.5rem,
+  letter-spacing: 0,
+  weight: 500
+);
+
+$body2: (
+  size: 0.875rem,
+  line-height: 1.25rem,
+  letter-spacing: 0,
+  weight: 400
+);
+
+// overline
+$overline: (
+  size: 0.75rem,
+  line-height: 2rem,
+  letter-spacing: 0.25rem,
+  weight: 600
+);
+
+// caption
+$caption: (
+  size: 0.75rem,
+  line-height: 1.25rem,
+  letter-spacing: 0,
+  weight: 700
+);
+
+$headings: (
+  'h1': $h1,
+  'h2': $h2,
+  'h3': $h3,
+  'h4': $h4,
+  'h5': $h5,
+  'h6': $h6,
+  'subtitle1': $subtitle1,
+  'subtitle2': $subtitle2,
+  'body1': $body1,
+  'body2': $body2,
+  'overline': $overline,
+  'caption': $caption
+);
+
+// adiciona tags com mesmo estilo do css
+$h-tags: (
+  h1: map.get($headings, 'h1'),
+  h2: map.get($headings, 'h2'),
+  h3: map.get($headings, 'h3'),
+  h4: map.get($headings, 'h4'),
+  h5: map.get($headings, 'h5'),
+  h6: map.get($headings, 'h6')
+);
+
+// sobrescreve as tags do html para adicionar "margin"
+@each $heading, $value in $h-tags {
+  #{$heading} {
+    font-size: map.get($value, 'size');
+    font-weight: map.get($value, 'weight');
+    letter-spacing: map.get($value, 'letter-spacing');
+    line-height: map.get($value, 'line-height');
+    margin: map.get($value, 'margin');
+  }
+}

package/src/helpers/camelize-fields-name.js

@@ -0,0 +1,15 @@
+import { camelize } from 'humps'
+
+export default function camelizeFieldsName (fields) {
+  for (const field in fields) {
+    const currentField = fields[field]
+
+    currentField.name = camelize(currentField.name)
+
+    if (Object.keys(currentField.children || {}).length) {
+      camelizeFieldsName(currentField.children)
+    }
+  }
+
+  return fields
+}

package/src/helpers/filters.js

@@ -114,6 +114,8 @@ function humanize (field = {}, value) {
     case 'time': return time(value)
     case 'radio': return selectLabel(field.options, value)
     case 'percent': return formatPercent(value)
+    case 'money': return money(value)
+    case 'decimal': return decimal(value)
     default: return value
   }
 }

package/src/helpers/get-normalized-options.js

@@ -0,0 +1,20 @@
+/**
+ * param {options: object[], label: string, value: string} object
+ *
+ * @example getNormalizedOptions({
+ *  options: [{ name: 'Test 1', uuid: '1' }, { name: 'Test 2', uuid: '2' }],
+ *  label: 'name'
+ *  value: 'uuid'
+ * }) // retorna [{ label: 'Test 1', value: '1' }, { label: 'Test 2', value: '2' }]
+ */
+export default ({ options = [], label, value }) => {
+  return options.map(option => {
+    const { [label]: labelKey, [value]: valueKey, ...payload } = option
+
+    return {
+      label: option[label],
+      value: option[value],
+      ...payload
+    }
+  })
+}

package/src/helpers/handle-process.js

@@ -0,0 +1,13 @@
+/**
+ * @param {function} processEnv função que retorna o process.env.
+ * @param {string} defaultValue valor default caso não exista a process.env
+ *
+ * @example handleProcess(() => process.env.MY_ENV, 'meu-valor-default')
+ */
+export default (processEnv = () => {}, defaultValue) => {
+  try {
+    return processEnv() || defaultValue
+  } catch {
+    return defaultValue
+  }
+}

package/src/helpers/index.js

@@ -8,6 +8,9 @@ export { default as filterObject } from './filter-object.js'
 export { default as getGreatestCommonDivisor } from './get-greatest-common-divisor.js'
 export { default as filterObjectToArray } from './filter-object-to-array.js'
 export { default as filterListByHandle } from './filter-list-by-handle.js'
+export { default as camelizeFieldsName } from './camelize-fields-name.js'
+export { default as getNormalizedOptions } from './get-normalized-options.js'
+export { default as handleProcess } from './handle-process.js'
 
 export * from './filters.js'
 export * from './images.js'

package/src/index.scss

@@ -5,6 +5,7 @@ $primary: var(--q-primary);
 $primary-contrast: var(--q-primary-contrast);
 $secondary: var(--q-secondary);
 $secondary-contrast: var(--q-secondary-contrast);
+$accent: var(--q-accent);
 
 // Asteroid variables
 :root {
@@ -15,16 +16,14 @@ $secondary-contrast: var(--q-secondary-contrast);
 $background-color: var(--qas-background-color);
 $generic-border-radius: var(--qas-generic-border-radius);
 
-@import './css/background';
-@import './css/border';
-@import './css/border-radius';
-@import './css/container';
-@import './css/fonts';
-@import './css/line-height';
-@import './css/opacity';
-@import './css/shadow';
-@import './css/text';
-@import './css/unset';
+// variables
+@import './css/variables/index';
 
-// Design System
-@import './css/design-system';
+// components
+@import './css/components/index';
+
+// utils
+@import './css/utils/index';
+
+// mixins
+@import './css/mixins/index'

package/src/mixins/generator.js

@@ -15,7 +15,9 @@ export default {
     gutter: {
       default: 'md',
       type: [String, Boolean],
-      validator: value => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      validator: value => {
+        return typeof value === 'boolean' || ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      }
     }
   },
 
@@ -64,7 +66,13 @@ export default {
     },
 
     mx_handleColumnsByIndex (index, isGridGenerator) {
-      const fields = isGridGenerator ? this.fields : this.groupedFields.visible
+      const fields = isGridGenerator ? this.fields : {}
+
+      if (!isGridGenerator) {
+        for (const key in this.normalizedFields) {
+          Object.assign(fields, this.normalizedFields[key].fields.visible)
+        }
+      }
 
       if (!Array.isArray(fields)) {
         index = Object.keys(fields).findIndex(field => field === index)

package/src/mixins/index.js

@@ -1,15 +1,15 @@
 import contextMixin from './context.js'
 import formMixin from './form.js'
 import generatorMixin from './generator.js'
+import searchFilterMixin from './search-filter.js'
 import passwordMixin from './password.js'
-import screenMixin from './screen.js'
 import viewMixin from './view.js'
 
 export {
   contextMixin,
   formMixin,
   generatorMixin,
+  searchFilterMixin,
   passwordMixin,
-  viewMixin,
-  screenMixin
+  viewMixin
 }

package/src/mixins/search-filter.js

@@ -0,0 +1,227 @@
+import { decamelize } from 'humps'
+import { isEqual } from 'lodash'
+import { getNormalizedOptions } from '../helpers'
+
+export default {
+  props: {
+    entity: {
+      default: '',
+      type: String
+    },
+
+    lazyLoadingProps: {
+      default: () => ({}),
+      type: Object
+    },
+
+    name: {
+      default: '',
+      type: String
+    },
+
+    useLazyLoading: {
+      type: Boolean
+    },
+
+    fetching: {
+      type: Boolean
+    }
+  },
+
+  emits: [
+    'update:modelValue',
+    'update:fetching',
+    'fetch-options-success',
+    'fetch-options-error'
+  ],
+
+  data () {
+    return {
+      mx_filteredOptions: [],
+      mx_hasFetchError: false,
+      mx_isFetching: false,
+      mx_isScrolling: false,
+      mx_search: '',
+      mx_fetchCount: 0,
+      mx_pagination: {
+        page: 1,
+        lastPage: null,
+        hasCount: true,
+        hasNextPage: false
+      }
+    }
+  },
+
+  computed: {
+    mx_defaultLazyLoadingProps () {
+      const {
+        url,
+        params,
+        decamelizeFieldName
+      } = this.lazyLoadingProps
+
+      const defaultParams = { limit: 48 }
+
+      return {
+        url: url || '',
+        params: {
+          ...defaultParams,
+          ...params
+        },
+        decamelizeFieldName: decamelizeFieldName === undefined ? true : decamelizeFieldName
+      }
+    },
+
+    mx_hasFilteredOptions () {
+      return !!this.mx_filteredOptions.length
+    },
+
+    mx_isFilterByFuse () {
+      return !this.useLazyLoading
+    }
+  },
+
+  watch: {
+    lazyLoadingProps: {
+      handler (value, oldValue) {
+        if (isEqual(value, oldValue)) return
+
+        this.mx_filterOptionsByStore('')
+        this.$emit('update:modelValue', '')
+      }
+    }
+  },
+
+  methods: {
+    async mx_filterOptionsByStore (search) {
+      this.mx_resetFilter(search)
+      await this.mx_setFetchOptions()
+    },
+
+    mx_resetFilter (search) {
+      this.mx_filteredOptions = []
+      this.mx_search = search
+      this.mx_pagination = {
+        page: 1,
+        lastPage: null,
+        hasCount: true,
+        hasNextPage: false
+      }
+    },
+
+    async mx_onVirtualScroll ({ index, ref }) {
+      const lastIndex = this.mx_filteredOptions.length - 1
+
+      if (index === lastIndex && this.mx_canFetchOptions()) {
+        await this.mx_loadMoreOptions()
+
+        this.$nextTick(() => {
+          ref.reset()
+          ref.refresh(lastIndex)
+        })
+      }
+    },
+
+    async mx_loadMoreOptions () {
+      this.mx_isScrolling = true
+
+      const options = await this.mx_fetchOptions()
+      this.mx_filteredOptions.push(...options)
+
+      // this is to prevent the virtual-scroll event to be fired again
+      this.$nextTick(() => {
+        this.mx_isScrolling = false
+      })
+    },
+
+    async mx_fetchOptions () {
+      this.mx_fetchCount++
+
+      try {
+        if (!this.entity) this.mx_setMissingPropsMessage('entity')
+        if (!this.name) this.mx_setMissingPropsMessage('name')
+
+        this.mx_hasFetchError = false
+        this.mx_isFetching = true
+
+        this.$emit('update:fetching', true)
+
+        const { url, params, decamelizeFieldName } = this.mx_defaultLazyLoadingProps
+
+        const { data } = await this.$store.dispatch(`${this.entity}/fetchFieldOptions`, {
+          url,
+          field: decamelizeFieldName ? decamelize(this.name, { separator: '-' }) : this.name,
+          params: {
+            ...params,
+            search: this.mx_search,
+            offset: (this.mx_pagination.page - 1) * params.limit
+          }
+        })
+
+        const { results, count, hasNextPage } = data
+        const hasCount = count !== undefined
+
+        this.mx_pagination = {
+          page: this.mx_pagination.page + 1,
+          lastPage: hasCount ? Math.ceil(count / params.limit) : null,
+          hasCount,
+          hasNextPage
+        }
+
+        this.$emit('fetch-options-success', data)
+
+        return this.mx_handleOptions(results)
+      } catch (error) {
+        this.$qas.logger.group(
+          `Mixin: searchFilterMixin - mx_fetchOptions -> exceção da action ${this.entity}/fetchFieldOptions`,
+          [error],
+          { error: true }
+        )
+
+        this.mx_hasFetchError = true
+        this.$emit('fetch-options-error', error)
+
+        return []
+      } finally {
+        this.mx_isFetching = false
+        this.$emit('update:fetching', false)
+      }
+    },
+
+    async mx_setFetchOptions () {
+      this.mx_filteredOptions = await this.mx_fetchOptions()
+    },
+
+    mx_canFetchOptions () {
+      const { lastPage, page, hasCount, hasNextPage } = this.mx_pagination
+
+      const hasMorePages = hasCount ? lastPage && page <= lastPage : hasNextPage
+
+      return hasMorePages && !this.mx_isFetching && !this.mx_isScrolling && this.useLazyLoading
+    },
+
+    mx_handleOptions (options) {
+      if (this.labelKey && this.valueKey) {
+        return getNormalizedOptions({
+          options,
+          label: this.labelKey,
+          value: this.valueKey
+        })
+      }
+
+      return options
+    },
+
+    mx_getMissingPropsMessage (prop) {
+      return `A propriedade "${prop}" é obrigatória quando a propriedade "useLazyLoading" está ativa.`
+    },
+
+    mx_setMissingPropsMessage (prop) {
+      throw new Error(this.mx_getMissingPropsMessage(prop))
+    },
+
+    mx_getNormalizedFuseResults (results = []) {
+      return results.map(({ item }) => item)
+    }
+  }
+}