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

package/src/composables/private/index.js

@@ -1,4 +1,5 @@
-export { default as useView } from './use-view'
+export { default as useAuthUser } from './use-auth-user'
+export { default as useErrorMessage } from './use-error-message'
 export { default as useGenerator } from './use-generator'
 export { default as useToggleVisibility } from './use-toggle-visibility'
-export { default as useAuthUser } from './use-auth-user'
+export { default as useView } from './use-view'

package/src/composables/private/use-error-message.js

@@ -0,0 +1,28 @@
+import { computed } from 'vue'
+
+export const baseErrorProps = {
+  errorMessage: {
+    type: String,
+    default: ''
+  },
+
+  error: {
+    type: Boolean
+  }
+}
+
+/**
+ * Composable para lidar com mensagens de erro
+ *
+ * @param {baseErrorProps} props
+ */
+export default function useErrorMessage (props) {
+  const labelClasses = computed(() => ({ 'text-negative': props.error }))
+
+  const color = computed(() => (props.error ? 'negative' : 'grey-10'))
+
+  return {
+    labelClasses,
+    color
+  }
+}

package/src/composables/use-default-filters.js

@@ -15,10 +15,25 @@ const defaultFiltersHooks = {
  * 2 - Se o filtro já estiver na query, então utiliza ele.
  * 3 - Se o filtro já estiver salvo no LocalStorage, então utiliza ele.
  *
- * @param {Object} to - Rota de destino.
- * @param {Object} _from - Rota de origem.
- * @param {Function} next - Função de redirecionamento.
- * @param {Array} queryList='company' - Lista de filtros a serem aplicados.
+ * Comportamento entre mesma entidade variando telas com multiple: true|false:
+ * 1 - Se minha tela atual for de múltiplos registros e a próxima for de um único registro,
+ * então o filtro será aplicado apenas no primeiro item.
+ * 2 - Se minha tela atual for de um único registro e a próxima for de múltiplos registros,
+ * então o filtro será aplicado em todos os registros.
+ * 3 - Se minha tela atual e a próxima forem de múltiplos registros, então o filtro será aplicado
+ * em todos os registros.
+ *
+ * @param {object} to - Rota de destino.
+ * @param {object} _from - Rota de origem.
+ * @param {function} next - Função de redirecionamento.
+ * @param {array|object} queryList='company' - Lista de filtros a serem aplicados.
+ *
+ * @example
+ * ```js
+ * setDefaultFiltersBeforeEnter(to, from, next)
+ * setDefaultFiltersBeforeEnter(to, from, next, ['company', 'properties'])
+ * setDefaultFiltersBeforeEnter(to, from, next, { company: false, properties: true // multiple })
+ * ```
  */
 export function setDefaultFiltersBeforeEnter (to, _from, next, queryList = ['company']) {
   const { getDefaultFiltersFromStorage, setFilterQuery } = useDefaultFilters()
@@ -26,31 +41,48 @@ export function setDefaultFiltersBeforeEnter (to, _from, next, queryList = ['com
   const { query } = to
   const newQuery = { ...query }
 
+  const isQueryListArray = Array.isArray(queryList)
+  const normalizedQueryList = isQueryListArray ? {} : queryList
+
+  // normaliza sempre o queryList para um objeto
+  if (isQueryListArray) {
+    queryList.forEach(name => { normalizedQueryList[name] = false })
+  }
+
   // recupera os filtros padrão do LocalStorage
   const defaultFiltersFromStorage = getDefaultFiltersFromStorage()
 
-  queryList.forEach(name => {
+  for (const key in normalizedQueryList) {
+    const filterQueryValue = filterQuery.value[key]
+
     // 1. se o filtro já estiver salvo no estado, então utiliza ele
-    if (filterQuery.value[name]) {
-      newQuery[name] = filterQuery.value[name]
-      return
+    if (filterQueryValue) {
+      // se normalizedQueryList[key] for "true" (multiple) então utiliza o filtro completo
+      if (normalizedQueryList[key]) {
+        newQuery[key] = filterQueryValue
+        continue
+      }
+
+      // filterQueryValue é um array, então pega o primeiro item
+      newQuery[key] = Array.isArray(filterQueryValue) ? filterQueryValue?.at(0) : filterQueryValue
+      continue
     }
 
     // 2. se o filtro já estiver na query, então utiliza ele
-    if (query[name]) {
-      setFilterQuery(query[name], name)
+    if (query[key]) {
+      setFilterQuery(query[key], key)
 
-      return
+      continue
     }
 
-    const storedFilter = defaultFiltersFromStorage[name]
+    const storedFilter = defaultFiltersFromStorage[key]
 
     // 3. se o filtro já estiver salvo no LocalStorage, então utiliza ele
     if (storedFilter) {
-      setFilterQuery(storedFilter, name)
-      newQuery[name] = storedFilter
+      setFilterQuery(storedFilter, key)
+      newQuery[key] = storedFilter
     }
-  })
+  }
 
   /**
    * Verifica se houve mudanças na query antes de redirecionar, sem essa validação

package/src/css/components/field.scss

@@ -7,8 +7,21 @@
     transition: transform var(--qas-generic-transition);
   }
 
+  &--standard &__control:hover::before {
+    border-color: var(--q-primary-contrast) !important;
+  }
+
+  &--standard &__control::after {
+    height: 1px;
+  }
+
+  &--outlined &__control::after,
+  &--outlined.q-field--highlighted &__control::after {
+    border-width: 1px !important;
+  }
+
   .q-field__label {
-    will-change: transform;
+    will-change: transform, font-size;
   }
 
   &__label,
@@ -16,6 +29,22 @@
     @include set-typography($body2);
   }
 
+  // pega o ícone imediato dos append e prepend, não os do q-chip por exemplo.
+  &--error {
+    .q-field__input,
+    .q-field__label,
+    .q-field__native,
+    .q-field__marginal > .q-icon,
+    .q-field__marginal > .qas-btn .q-icon,
+    .q-field__marginal > button.q-icon {
+      color: $negative !important;
+    }
+
+    .q-field__bottom {
+      @include set-error-message;
+    }
+  }
+
   &--dense {
     .q-textarea {
       height: 100%;
@@ -42,9 +71,10 @@
   // Somente fields com label
   &--float.q-field--labeled,
   &--focused.q-field--labeled {
+    will-change: transform, font-size;
     transition: transform var(--qas-generic-transition), font-size var(--qas-generic-transition);
 
-    &:not(&.qas-select--filter):not(&.qas-select--has-icon) .q-field__label {
+    &:not(&.qas-select--filter):not(&.qas-select--has-icon):not(&.qas-input--has-icon) .q-field__label {
       transform: translateY(-10px) scale(0.85) !important;
     }
 
@@ -60,6 +90,7 @@
   }
 
   .q-field__label {
+    color: $grey-8;
     transition: transform var(--qas-generic-transition), font-size var(--qas-generic-transition);
   }
 
@@ -85,4 +116,40 @@
     background-color: white;
     border-radius: $generic-border-radius;
   }
+
+  // logica referente ao modo filtro
+  &.qas-search-input,
+  &.qas-select--filter {
+    .q-field__control::before {
+      transition: border var(--qas-generic-transition);
+    }
+
+    &:not(&.q-field--error):not(&.q-field--highlighted):hover {
+      .q-field__control::after {
+        border-color: var(--q-primary-contrast);
+      }
+    }
+
+    .q-field__control {
+      border-radius: $generic-border-radius;
+    }
+
+    .q-field__control::before {
+      border: 0;
+    }
+  }
+
+  &.qas-search-input--shadow,
+  &.qas-select--filter-shadow {
+    .q-field__control {
+      box-shadow: $shadow-2;
+    }
+  }
+
+  &.qas-search-input--border,
+  &.qas-select--filter-border {
+    .q-field__control {
+      @extend .bordered;
+    }
+  }
 }

package/src/css/components/index.scss

@@ -1,10 +1,8 @@
 @import './base';
 @import './button';
-@import './checkbox';
 @import './editor';
 @import './field';
 @import './item';
-@import './radio';
+@import './menu.scss';
 @import './scrollbar';
 @import './tabs';
-@import './toggle';

package/src/css/components/item.scss

@@ -1,5 +1,6 @@
 .q-item {
   font-size: 16px;
+  min-height: 36px;
 
   &:not(.disabled) {
     font-weight: 600;
@@ -26,11 +27,11 @@
   }
 
   &--clickable:not(&--active) {
-    color: $grey-10;
+    color: $grey-10 !important;
     transition: var(--qas-generic-transition);
 
     &:not(&.q-router-link--active):hover {
-      color: var(--q-primary-contrast);
+      color: var(--q-primary-contrast) !important;
     }
   }
 

package/src/css/components/menu.scss

@@ -0,0 +1,21 @@
+.qas-menu {
+  border-radius: $generic-border-radius;
+
+  .q-list {
+    padding: var(--qas-spacing-sm) var(--qas-spacing-md);
+
+    .q-item {
+      padding-left: 0;
+      padding-right: 0;
+      min-height: 36px !important;
+
+      .q-icon {
+        font-size: 18px !important;
+      }
+    }
+
+    .q-item + .q-item {
+      border-top: 1px solid $border-grey;
+    }
+  }
+}

package/src/css/mixins/index.scss

@@ -1,3 +1,4 @@
 @import './set-button';
 @import './set-brand';
 @import './set-typography';
+@import './set-error-message';

package/src/css/mixins/set-error-message.scss

@@ -0,0 +1,8 @@
+@import '../variables/typography.scss';
+
+@mixin set-error-message ($important: false) {
+  @include set-typography($caption, $important);
+
+  padding-top: if($important, var(--qas-spacing-sm) !important, var(--qas-spacing-sm));
+  color: if($important, $negative !important, $negative);
+}

package/src/css/plugins/notify.scss

@@ -1,54 +1,40 @@
 .q-notification {
+  $root: &;
+
   &:not(.boot-notification).qas-notification {
     margin-top: 80px;
-    max-width: 560px;
+    max-width: 740px;
   }
 
+
   &.qas-notification {
-    &--error::before,
-    &--success::before {
-      border-radius: var(--qas-generic-border-radius) 0 0 var(--qas-generic-border-radius);
-      bottom: 0;
-      content: '';
-      left: calc(var(--qas-spacing-md) * -1);
-      position: relative;
-      top: 0;
-      width: 4px;
-    }
+    box-shadow: none;
 
-    &--error::before {
-      background-color: var(--q-negative);
+    &--error #{$root}__progress {
+      background-color: $negative;
     }
 
-    &--success::before {
-      background-color: var(--q-positive);
+    &--success #{$root}__progress {
+      background-color: $positive;
     }
 
     .q-notification__actions {
-      align-self: start;
+      align-self: self-start;
       padding-top: var(--qas-spacing-xs);
+    }
 
-      .q-btn {
-        color: white !important;
-        height: var(--qas-spacing-md);
-        min-height: auto;
-        min-width: auto;
-        padding: 0;
-        text-align: center;
-        text-transform: none;
-        width: var(--qas-spacing-md);
-
-        &__content {
-          height: var(--qas-spacing-md);
-
-          span {
-            align-self: center;
-            height: var(--qas-spacing-md);
-            line-height: 0.9;
-            width: var(--qas-spacing-md);
-          }
-        }
-      }
+    .q-notification__badge {
+      @include set-typography($caption);
+
+      box-shadow: none;
+    }
+
+    .q-btn {
+      @include set-button(tertiary, true, true, 'white');
+
+      // o quasar não usa um ícone, mas sim um label "x", por isto o font-size e font-weight.
+      font-size: 24px;
+      font-weight: 400;
     }
 
     .q-notification__content {
@@ -56,6 +42,20 @@
         margin-right: var(--qas-spacing-sm);
       }
     }
+
+    .q-notification__progress {
+      border-radius: 0 0 var(--qas-generic-border-radius) var(--qas-generic-border-radius);
+      left: calc(var(--qas-spacing-md) * -1);
+      right: calc(var(--qas-spacing-md) * -1);
+      opacity: 1;
+    }
+
+    .q-notification__message {
+      @include set-typography($body1);
+
+      padding-top: var(--qas-spacing-md);
+      padding-bottom: var(--qas-spacing-md);
+    }
   }
 
   &.boot-notification {

package/src/css/variables/scrollbar.scss

@@ -1,6 +1,6 @@
 :root {
   --qas-scrollbar-size: 9px;
-  --qas-scrollbar-background: #E0E0E0;
+  --qas-scrollbar-background: transparent;
   --qas-scrollbar-thumb-background: var(--q-primary);
   --qas-scrollbar-thumb-background-hover: var(--q-primary-contrast);
   --qas-scrollbar-border-radius: calc(var(--qas-generic-border-radius) * 2);

package/src/enums/Status.js

@@ -7,12 +7,12 @@
  * @enum
  * @type {{
  * Info: 'yellow-14',
- * Error: 'red-14'
+ * Error: 'negative'
  * }}
 */
 export const StatusColor = {
-  Info: 'yellow-14',
-  Error: 'red-14'
+  Info: 'primary',
+  Error: 'negative'
 }
 
 /**

package/src/helpers/colors.js

@@ -0,0 +1,137 @@
+/**
+ * Converte uma cor RGBA para RGB, mesclando com um fundo.
+ *
+ * @param {string} rgba - Cor em formato rgba, por exemplo, "rgba(15, 83, 175, 0.03)".
+ * @param {object} background - Objeto com as propriedades r, g e b para a cor de fundo (default: branco).
+ *
+ * @example
+ * ```js
+ * convertRgbaToRgb('rgba(15, 83, 175, 0.03)') // { r: 15, g: 83, b: 175 }
+ * ```
+ */
+export function convertRgbaToRgb (rgba, background = { r: 255, g: 255, b: 255 }) {
+  // Extrai os valores com uma expressão regular
+  const match = rgba.match(/rgba?\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/)
+
+  if (!match) return background
+
+  const r = parseInt(match[1], 10)
+  const g = parseInt(match[2], 10)
+  const b = parseInt(match[3], 10)
+  const a = parseFloat(match[4])
+
+  return {
+    r: Math.round(r * a + background.r * (1 - a)),
+    g: Math.round(g * a + background.g * (1 - a)),
+    b: Math.round(b * a + background.b * (1 - a))
+  }
+}
+
+/**
+ * Função que converte uma cor hexadecimal para um objeto RGB.
+ *
+ * @param {string} hex - A cor em formato hexadecimal, por exemplo, "#ff0000" ou "ff0000".
+ *
+ * @example
+ * ```js
+ * convertHexToRgb('#ff0000') // { r: 255, g: 0, b: 0 }
+ * convertHexToRgb('ff0000') // { r: 255, g: 0, b: 0 }
+ * ```
+ */
+export function convertHexToRgb (hex) {
+  // Remove o '#' se existir
+  let cleanHex = hex.startsWith('#') ? hex.slice(1) : hex
+
+  // Se for o formato curto, expande para 6 dígitos
+  if (cleanHex.length === 3) {
+    cleanHex = cleanHex.split('').map(item => item + item).join('')
+  }
+
+  // Converte o hexadecimal para inteiro
+  const bigint = parseInt(cleanHex, 16)
+
+  // Extrai os valores de r, g, b
+  const r = (bigint >> 16) & 255
+  const g = (bigint >> 8) & 255
+  const b = bigint & 255
+
+  return { r, g, b }
+}
+
+/**
+ * converte um rgb em string para objeto rgb
+ *
+ * @param {string} color - A cor em formato rgb, por exemplo, "rgb(255, 0, 0)".
+ *
+ * @example
+ * ```js
+ * getRgb('rgb(255, 0, 0)') // { r: 255, g: 0, b: 0 }
+ * ```
+ */
+function getRgb (color) {
+  // Extrai os valores com uma expressão regular
+  const match = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/)
+
+  if (!match) return {}
+
+  const r = parseInt(match[1], 10)
+  const g = parseInt(match[2], 10)
+  const b = parseInt(match[3], 10)
+
+  return { r, g, b }
+}
+
+/**
+ * função que recebe uma cor como parâmetro string, e retorna sempre um rgb,
+ * os possíveis formatos de entrada são:
+ * - rgb
+ * - rgba
+ * - hex
+ *
+ * @example
+ *
+ * ```js
+ * convertToRgb('#ff0000') // { r: 255, g: 0, b: 0 }
+ * convertToRgb('rgba(255, 0, 0, 0.5)') // { r: 255, g: 0, b: 0 }
+ * convertToRgb('rgb(255, 0, 0)') // { r: 255, g: 0, b: 0 }
+ * ```
+ *
+ */
+export function convertToRgb (color) {
+  if (!color) return {}
+
+  // Verifica se a cor está no formato hex
+  if (isHex(color)) return convertHexToRgb(color)
+
+  // Verifica se a cor está no formato rgba
+  if (isRgba(color)) return convertRgbaToRgb(color)
+
+  // Se não for nenhum dos formatos conhecidos, retorna a cor original
+  return getRgb(color)
+}
+
+export function isRgba (color) {
+  return color.startsWith('rgba')
+}
+
+export function isHex (color) {
+  return color.startsWith('#')
+}
+
+export function isRgb (color) {
+  return color.startsWith('rgb') && !isRgba(color)
+}
+
+/**
+ * função para retornar css vars do asteroid
+ *
+ * @param {string} name - nome da variável css
+ *
+ * @example
+ * ```js
+ * getCssVar('background-color') // #ff0000
+ * ```
+ */
+export function getCssVar (name) {
+  return getComputedStyle(document.documentElement).getPropertyValue(`--qas-${name}`)
+}

package/src/helpers/index.js

@@ -19,6 +19,7 @@ export { default as isLocalDevelopment } from './is-local-development.js'
 export { default as promiseHandler } from './promise-handler.js'
 export { default as setScrollOnGrab } from './set-scroll-on-grab.js'
 export { default as getPlaceholder } from './get-placeholder.js'
+export { default as setScrollGradient } from './set-scroll-gradient.js'
 
 export * from './filters.js'
 export * from './images.js'