@bildvitta/quasar-ui-asteroid 3.17.0 → 3.18.0-beta.1

package/src/helpers/set-scroll-gradient.js

@@ -0,0 +1,261 @@
+import { uid } from 'quasar'
+import { convertToRgb } from './colors'
+
+/**
+ * @typedef {'start'|'end'} Direction
+ */
+
+/**
+ * Helper para adicionar um gradiente de scroll em um elemento.
+ *
+ * @param {object} config
+ * @param {object} config.styles
+ * @param {string} config.styles.color - precisa ser uma cor RGB|HEX|RGBA
+ * @param {string} config.styles.size - tamanho do gradient (mudar somente quando for necessário)
+ * @param {'y'|'x'} config.orientation - direção do scroll (vertical ou horizontal)
+ */
+export default function setScrollGradient (config = {}) {
+  const { styles, orientation = 'y' } = config
+  const { color = '#FFFFFF', size = '40px' } = styles || {}
+
+  const { r, g, b } = convertToRgb(color) || {}
+  const rgbParam = `${r}, ${g}, ${b}`
+
+  const isVertical = orientation === 'y'
+
+  let uuid = ''
+  let resizeObserver = null
+
+  // functions
+  /**
+   * Toda vez que "initializeScrollGradient" for chamado, remove o gradient anterior
+   * e cria um novo.
+   *
+   * @param {HTMLElement} element
+   */
+  function initializeScrollGradient (element) {
+    // remove o gradient anterior caso exista
+    removeScrollGradient(element)
+
+    uuid = uid()
+
+    // cria os spans de gradiente
+    createSpan({ direction: 'start', element })
+    createSpan({ direction: 'end', element })
+
+    // verifica se o elemento tem scroll no final
+    if (hasEndScroll(element)) toggleSpan('end', true)
+
+    // adiciona o listener de scroll
+    element.addEventListener('scroll', () => toggleSpanByScrollPosition(element))
+    setResizeObserver(element)
+  }
+
+  /**
+   * Remove:
+   * - event listener
+   * - resize observer
+   * - spans
+   * - uuid
+   *
+   * @parm {HTMLElement} element
+   */
+  function removeScrollGradient (element) {
+    if (!uuid) return
+
+    element.removeEventListener('scroll', () => toggleSpanByScrollPosition(element))
+    resizeObserver?.unobserve(element)
+
+    // remove scroll gradient spans
+    const scrollSpanTop = getSpan('start')
+    const scrollSpanBottom = getSpan('end')
+
+    if (scrollSpanTop) scrollSpanTop.remove()
+    if (scrollSpanBottom) scrollSpanBottom.remove()
+
+    uuid = ''
+  }
+
+  /**
+   * mostra ou esconde o span do gradient.
+   *
+   * @param {Direction} direction
+   * @param {boolean} show
+   */
+  function toggleSpan (direction, show) {
+    const span = getSpan(direction)
+
+    if (!span) return
+
+    span.style.display = show ? 'block' : 'none'
+  }
+
+  /**
+   * @param {Direction} direction
+   */
+  function getSpan (direction) {
+    return document.getElementById(`scroll-gradient-${direction}-${uuid}`)
+  }
+
+  /**
+   * cria o span do gradient.
+   *
+   * @param {{
+   *  direction: Direction,
+   *  element: HTMLElement
+   * }}
+   */
+  function createSpan ({ direction, element }) {
+    const span = document.createElement('span')
+
+    // styles
+    Object.assign(span.style, {
+      pointerEvents: 'none',
+      height: isVertical ? size : '100%',
+      display: 'none',
+      position: 'absolute',
+      width: isVertical ? '100%' : size,
+      zIndex: 1,
+      backgroundImage: (
+        `linear-gradient(
+          to ${getDirection(direction)},
+          rgba(${rgbParam}, 0) 0%,
+          rgba(${rgbParam}, 0.9) 51%,
+          rgb(${rgbParam}) 75%)`
+      )
+    })
+
+    // atributos
+    span.setAttribute('id', `scroll-gradient-${direction}-${uuid}`)
+    span.setAttribute('role', 'presentation') // remove semântica
+    span.setAttribute('tabindex', '-1') // remove do foco
+    span.setAttribute('aria-hidden', 'true') // remove do leitor de tela
+
+    // adiciona span como irmão do elemento acima (top) ou abaixo dele (bottom)
+    element.parentNode.insertBefore(span, direction === 'start' ? element.previousSibling : element.nextSibling)
+
+    // seta posição após inserir o elemento no DOM
+    setSpanPosition({ direction, element })
+  }
+
+  /**
+   * seta a posição do span de acordo com a posição do elemento.
+   *
+   * @param {{
+   *  direction: 'start'|'end',
+   *  element: HTMLElement
+   * }}
+   */
+  function setSpanPosition ({ direction, element }) {
+    const span = getSpan(direction)
+
+    if (!span) return
+
+    const elementRect = element.getBoundingClientRect()
+    const parentRect = element.parentElement.getBoundingClientRect()
+
+    /**
+     * diferença entre o bottom do pai e o bottom do filho, valor positivo significa
+     * que há espaço livre abaixo do filho.
+     */
+    const distance = {
+      end: isVertical ? (parentRect.bottom - elementRect.bottom) : (parentRect.right - elementRect.right),
+      start: isVertical ? (elementRect.top - parentRect.top) : (elementRect.left - parentRect.left)
+    }
+
+    span.style[getDirection(direction)] = `${distance[direction]}px`
+  }
+
+  /**
+   * controla se o gradient deve ser mostrado ou não de acordo com a posição do scroll.
+   *
+   * @param {HTMLElement} element
+   */
+  function toggleSpanByScrollPosition (element) {
+    const {
+      scrollTop,
+      scrollHeight,
+      clientHeight,
+      scrollLeft,
+      scrollWidth,
+      clientWidth
+    } = element
+
+    // Pequena tolerância para lidar com problemas de precisão de ponto flutuante
+    const tolerance = 2
+
+    const isScrollAtStart = isVertical ? scrollTop === 0 : scrollLeft === 0
+    const isScrollAtEnd = isVertical
+      ? scrollTop + clientHeight >= scrollHeight - tolerance
+      : scrollLeft + clientWidth >= scrollWidth - tolerance
+
+    toggleSpan('start', !isScrollAtStart)
+    toggleSpan('end', !isScrollAtEnd)
+  }
+
+  function setResizeObserver (element) {
+    let previousSize = isVertical ? element.offsetHeight : element.offsetWidth
+
+    resizeObserver = new ResizeObserver(entries => {
+      entries.forEach(entry => {
+        // obtém o elemento que foi redimensionado
+        const entryElement = entry.target
+
+        // obtém o novo tamanho
+        const currentSize = isVertical ? entryElement.offsetHeight : entryElement.offsetWidth
+
+        // verifica se o elemento tem scroll no final
+        if (!hasEndScroll(entryElement)) {
+          toggleSpan('end', false)
+
+          return
+        }
+
+        // verifica se a altura ou width realmente mudou
+        if (previousSize !== currentSize) {
+          // atualiza posição do gradient
+          setSpanPosition({ direction: 'start', element })
+          setSpanPosition({ direction: 'end', element })
+
+          // controla se deve ou não mostrar o gradient
+          toggleSpanByScrollPosition(element)
+
+          previousSize = currentSize
+        }
+      })
+    })
+
+    resizeObserver.observe(element)
+  }
+
+  /**
+   * verifica se o elemento final (bottom|right) tem scroll.
+   *
+   * @param {HTMLElement} element
+   */
+  function hasEndScroll (element) {
+    return isVertical
+      ? element.scrollHeight > element.clientHeight
+      : element.scrollWidth > element.clientWidth
+  }
+
+  /**
+   * retorna a direção do gradient de acordo com a orientação do elemento.
+   * - se a orientação for vertical, a direção será "top" ou "bottom".
+   * - se a orientação for horizontal, a direção será "left" ou "right".
+   *
+   * @param {Direction} direction
+   */
+  function getDirection (direction) {
+    return isVertical
+      ? (direction === 'start' ? 'top' : 'bottom')
+      : (direction === 'start' ? 'left' : 'right')
+  }
+
+  return {
+    initializeScrollGradient,
+    removeScrollGradient,
+    uuid,
+    resizeObserver
+  }
+}

package/src/plugins/notify-error/NotifyError.js

@@ -8,6 +8,7 @@ export default (message, caption) => {
     caption,
     classes: 'qas-notification qas-notification--error',
     message,
-    type: 'error'
+    type: 'error',
+    icon: 'sym_r_cancel'
   })
 }

package/src/plugins/notify-success/NotifySuccess.js

@@ -8,6 +8,7 @@ export default (message, caption) => {
     caption,
     classes: 'qas-notification qas-notification--success',
     message,
-    type: 'success'
+    type: 'success',
+    icon: 'sym_r_check_circle'
   })
 }

package/src/vue-plugin.js

@@ -24,6 +24,7 @@ import QasDialog from './components/dialog/QasDialog.vue'
 import QasDialogRouter from './components/dialog-router/QasDialogRouter.vue'
 import QasDrawer from './components/drawer/QasDrawer.vue'
 import QasEmptyResultText from './components/empty-result-text/QasEmptyResultText.vue'
+import QasErrorMessage from './components/error-message/QasErrorMessage.vue'
 import QasExpansionItem from './components/expansion-item/QasExpansionItem.vue'
 import QasField from './components/field/QasField.vue'
 import QasFilters from './components/filters/QasFilters.vue'
@@ -37,7 +38,6 @@ import QasGridItem from './components/grid-item/QasGridItem.vue'
 import QasHeader from './components/header/QasHeader.vue'
 import QasInfiniteScroll from './components/infinite-scroll/QasInfiniteScroll.vue'
 import QasInput from './components/input/QasInput.vue'
-import QasInfo from './components/info/QasInfo.vue'
 import QasLabel from './components/label/QasLabel.vue'
 import QasLayout from './components/layout/QasLayout.vue'
 import QasListItems from './components/list-items/QasListItems.vue'
@@ -123,6 +123,7 @@ async function install (app) {
   app.component('QasDialogRouter', QasDialogRouter)
   app.component('QasDrawer', QasDrawer)
   app.component('QasEmptyResultText', QasEmptyResultText)
+  app.component('QasErrorMessage', QasErrorMessage)
   app.component('QasExpansionItem', QasExpansionItem)
   app.component('QasField', QasField)
   app.component('QasFilters', QasFilters)
@@ -136,7 +137,6 @@ async function install (app) {
   app.component('QasHeader', QasHeader)
   app.component('QasInfiniteScroll', QasInfiniteScroll)
   app.component('QasInput', QasInput)
-  app.component('QasInfo', QasInfo)
   app.component('QasLabel', QasLabel)
   app.component('QasLayout', QasLayout)
   app.component('QasListItems', QasListItems)
@@ -224,6 +224,7 @@ export {
   QasDialogRouter,
   QasDrawer,
   QasEmptyResultText,
+  QasErrorMessage,
   QasExpansionItem,
   QasField,
   QasFilters,
@@ -237,7 +238,6 @@ export {
   QasHeader,
   QasInfiniteScroll,
   QasInput,
-  QasInfo,
   QasLabel,
   QasLayout,
   QasListItems,

package/src/components/info/QasInfo.vue

@@ -1,155 +0,0 @@
-<template>
-  <div class="flex items-center no-wrap qas-info text-body1 text-grey-8">
-    <qas-avatar v-bind="defaultAvatarProps" />
-
-    <component
-      :is="textComponent"
-      v-if="useRegex"
-      class="q-ml-sm"
-    />
-
-    <span
-      v-else
-      class="q-ml-sm"
-    >
-      {{ props.text }}
-    </span>
-  </div>
-</template>
-
-<script setup>
-import { h, computed } from 'vue'
-import { RouterLink } from 'vue-router'
-import { QasBtn } from 'asteroid'
-
-defineOptions({ name: 'QasInfo' })
-
-const props = defineProps({
-  avatarProps: {
-    type: Object,
-    default: () => ({})
-  },
-
-  buttonProps: {
-    type: Object,
-    default: () => ({})
-  },
-
-  routerLinkProps: {
-    type: Object,
-    default: () => ({})
-  },
-
-  text: {
-    type: String,
-    required: true
-  },
-
-  useRegex: {
-    type: Boolean,
-    default: true
-  }
-})
-
-const defaultAvatarProps = computed(() => {
-  return {
-    color: 'red-14',
-    ...props.avatarProps,
-    icon: 'sym_r_priority_high',
-    size: 'sm'
-  }
-})
-
-const textComponent = computed(() => {
-  /**
-   * regex para encontrar caracteres que estiverem dentro de [].
-   */
-  const regex = /\[.*?\]/g
-
-  const [content] = props.text.match(regex)
-
-  /**
-   * dado o texto: Para saber mais, [Clique aqui].
-   *
-   * retorna: 'Clique aqui'
-   */
-  const routerLabel = content.replaceAll(/[[\]]/g, '')
-
-  /**
-   * dado o texto: Para saber mais, [Clique aqui].
-   *
-   * retorna: 'Para saber mais, $.'
-   */
-  const replacedText = props.text.replaceAll(regex, '$')
-
-  /**
-   * É necessário usar o regex ao invés de '$' para ele não remover o carácter
-   * ao fazer o split
-   *
-   * dado o texto: 'Para saber mais, [Clique aqui].'
-   *
-   * retorna: ['Para saber mais,', '$', '.']
-   *
-   */
-  const splitted = replacedText.split(/(\$)/)
-
-  const index = splitted.findIndex(item => item === '$')
-
-  const hasButtonProps = !!Object.keys(props.buttonProps).length
-
-  const getRouterLinkRender = () => {
-    return h(
-      RouterLink,
-      {
-        ...props.routerLinkProps,
-        class: 'text-primary text-subtitle1 qas-info__link'
-      },
-      {
-        default: () => routerLabel
-      }
-    )
-  }
-
-  const getQasBtnRender = () => {
-    return h(
-      QasBtn,
-      {
-        variant: 'tertiary',
-        label: routerLabel,
-        ...props.buttonProps
-      }
-    )
-  }
-
-  /**
-   * Cria um render do router link ou QasBtn
-   *
-   * @example
-   *
-   * ```html
-   * <router-link
-   *  class="text-primary text-subtitle1 qas-info__link"
-   *  :to="props.route"
-   * >
-   *  Clique aqui
-   * </router-link>
-   * ```
-   */
-  const renderComponent = hasButtonProps ? getQasBtnRender() : getRouterLinkRender()
-
-  splitted.splice(index, 1, renderComponent)
-
-  return h(
-    'span',
-    splitted
-  )
-})
-</script>
-
-<style lang="scss">
-.qas-info {
-  &__link {
-    text-decoration: none;
-  }
-}
-</style>

package/src/components/info/QasInfo.yml

@@ -1,34 +0,0 @@
-type: component
-
-meta:
-  desc: Componente para informações.
-
-props:
-  avatar-props:
-    desc: Props do componente QasAvatar.
-    default:
-      color: 'red-14'
-      icon: 'sym_r_priority_high'
-      size: 'sm'
-    type: Object
-
-  buttonProps:
-    desc: Props do componente QasBtn.
-    default:
-      variant: primary
-    type: Object
-
-  router-link-props:
-    desc: Propriedades do componente RouterLink.
-    default: {}
-    type: Object
-
-  text:
-    desc: Texto a ser exibido.
-    type: String
-    default: ''
-
-  use-regex:
-    desc: Faz a busca pelos "[]" dentro da propriedade "text" para substituir pelo QasBtn ou RouterLink.
-    default: true
-    type: Boolean

package/src/css/components/checkbox.scss

@@ -1,14 +0,0 @@
-.q-checkbox {
-  &__label {
-    @include set-typography($body1);
-
-    padding-left: var(--qas-spacing-sm) !important;
-  }
-
-  &.disabled {
-    .q-checkbox__label,
-    .q-checkbox__inner {
-      color: $grey-6;
-    }
-  }
-}

package/src/css/components/radio.scss

@@ -1,18 +0,0 @@
-.q-radio {
-  &__label {
-    @include set-typography($body2);
-
-    padding-left: var(--qas-spacing-sm) !important;
-  }
-
-  &__inner::before {
-    color: $primary;
-  }
-
-  &.disabled {
-    .q-radio__label,
-    .q-radio__inner {
-      color: $grey-6;
-    }
-  }
-}

package/src/css/components/toggle.scss

@@ -1,13 +0,0 @@
-.q-toggle {
-  &__label {
-    @include set-typography($body2);
-
-    padding-left: var(--qas-spacing-sm) !important;
-  }
-
-  &.disabled {
-    .q-toggle__label {
-      color: $grey-6;
-    }
-  }
-}