@bildvitta/quasar-ui-asteroid 3.18.0-beta.0 → 3.18.0-beta.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.18.0-beta.0",
+  "version": "3.18.0-beta.2",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",

package/src/components/actions-menu/QasActionsMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="hasList" class="qas-actions-menu" data-cy="actions-menu">
     <qas-btn-dropdown v-bind="btnDropdownProps">
-      <q-list data-cy="actions-menu-list">
+      <q-list data-cy="actions-menu-list" separator>
         <slot v-for="(item, key) in formattedList.dropdownList" :item="item" :name="key">
           <q-item v-bind="getItemProps(item)" :key="key" active-class="primary" clickable data-cy="actions-menu-list-item" @click="setClickHandler(item)">
             <q-item-section avatar>
@@ -9,9 +9,9 @@
             </q-item-section>
 
             <q-item-section>
-              <div>
+              <q-item-label>
                 {{ item.label }}
-              </div>
+              </q-item-label>
             </q-item-section>
           </q-item>
         </slot>

package/src/components/alert/QasAlert.vue

@@ -1,110 +1,237 @@
 <template>
-  <div v-if="show" class="inline-block">
-    <div class="bg-dark flex justify-between no-wrap q-pa-md qas-alert relative-position">
-      <div class="qas-alert__border-left" :class="borderClass" />
-
-      <div class="text-body1 text-white">
-        <slot>
-          {{ props.text }}
-        </slot>
+  <div class="inline-block qas-alert">
+    <qas-box v-if="displayAlert" v-bind="defaultBoxProps">
+      <div class="flex items-center no-wrap">
+        <div class="flex items-center no-wrap text-body1 text-grey-8">
+          <q-icon v-bind="iconProps" />
+
+          <component
+            :is="textComponent"
+            v-if="useRegex"
+            class="q-ml-sm"
+          />
+
+          <span
+            v-else
+            class="q-ml-sm"
+          >
+            <slot>
+              {{ props.text }}
+            </slot>
+          </span>
+        </div>
+
+        <qas-btn v-if="useCloseButton" class="q-ml-sm" color="grey-10" icon="sym_r_close" variant="tertiary" @click="close" />
       </div>
-
-      <qas-btn
-        class="q-ml-xs qas-alert__close"
-        color="white"
-        icon="sym_r_close"
-        :use-hover-on-white-color="false"
-        @click="close"
-      />
-    </div>
+    </qas-box>
   </div>
 </template>
 
 <script setup>
-import { LocalStorage } from 'quasar'
 import { Status, StatusColor } from '../../enums/Status'
-import { computed, watch, ref } from 'vue'
+
+import { LocalStorage } from 'quasar'
+import { QasBtn } from 'asteroid'
+import { RouterLink } from 'vue-router'
+import { h, computed, inject } from 'vue'
 
 defineOptions({ name: 'QasAlert' })
 
 const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    default: true
+  buttonProps: {
+    type: Object,
+    default: () => ({})
   },
 
-  text: {
+  routerLinkProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  status: {
     type: String,
-    default: ''
+    default: Status.Info,
+    validator: value => Object.values(Status).includes(value)
   },
 
   storageKey: {
     type: String,
-    default: ''
+    default: 'default'
   },
 
-  status: {
+  text: {
     type: String,
-    default: Status.Info,
-    validator: value => Object.values(Status).includes(value)
+    required: true
+  },
+
+  useBox: {
+    type: Boolean,
+    default: undefined
+  },
+
+  useCloseButton: {
+    type: Boolean
   },
 
   usePersistentModelOnClose: {
     type: Boolean
+  },
+
+  useRegex: {
+    type: Boolean
   }
 })
 
-const emit = defineEmits(['update:modelValue'])
+// models
+const model = defineModel({ type: Boolean, default: true })
 
-const model = ref(props.modelValue)
+// globals
+const isBox = inject('isBox', false)
 
-watch(() => props.modelValue, value => {
-  model.value = value
-})
+// composables
+const { displayAlert, close } = useStorageClosed()
 
-const colorByStatus = computed(() => {
+// computeds
+const iconProps = computed(() => {
   const status = Object.keys(Status).find(key => Status[key] === props.status)
-  return StatusColor[status]
+  const isErrorStatus = props.status === Status.Error
+
+  return {
+    color: StatusColor[status],
+    name: isErrorStatus ? 'sym_r_error' : 'sym_r_info',
+    size: 'sm'
+  }
 })
 
-const borderClass = computed(() => `bg-${colorByStatus.value}`)
+/**
+ * Por padrão, quando este componente estiver dentro de um QasBox, ele não terá
+ * shadow, terá padding e não terá margin.
+ */
+const defaultBoxProps = computed(() => {
+  const hasBoxProps = props.useBox !== undefined
 
-const storageClosedKey = computed(() => `alert-${props.storageKey}-closed`)
+  const useBox = hasBoxProps ? props.useBox : !isBox
 
-const isClosed = computed(() => {
-  return props.usePersistentModelOnClose && LocalStorage.getItem(storageClosedKey.value)
+  return {
+    unelevated: !useBox,
+    useSpacing: useBox
+  }
 })
 
-const show = computed(() => !isClosed.value && model.value)
+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-alert__link'
+      },
+      {
+        default: () => routerLabel
+      }
+    )
+  }
 
-function close () {
-  if (props.usePersistentModelOnClose) {
-    LocalStorage.set(storageClosedKey.value, true)
+  const getQasBtnRender = () => {
+    return h(
+      QasBtn,
+      {
+        variant: 'tertiary',
+        label: routerLabel,
+        ...props.buttonProps
+      }
+    )
   }
 
-  model.value = false
+  /**
+   * Cria um render do router link ou QasBtn
+   *
+   * @example
+   *
+   * ```html
+   * <router-link
+   *  class="text-primary text-subtitle1 qas-alert__link"
+   *  :to="props.route"
+   * >
+   *  Clique aqui
+   * </router-link>
+   * ```
+   */
+  const renderComponent = hasButtonProps ? getQasBtnRender() : getRouterLinkRender()
+
+  splitted.splice(index, 1, renderComponent)
+
+  return h(
+    'span',
+    splitted
+  )
+})
+
+// composable definitions
+function useStorageClosed () {
+  // computeds
+  const storageClosedKey = computed(() => `alert-${props.storageKey}-closed`)
 
-  emit('update:modelValue', model.value)
-}
+  const displayAlert = computed(() => {
+    const isClosed = props.usePersistentModelOnClose && LocalStorage.getItem(storageClosedKey.value)
+
+    return !isClosed && model.value
+  })
+
+  // functions
+  function close () {
+    if (props.usePersistentModelOnClose) LocalStorage.set(storageClosedKey.value, true)
+
+    model.value = false
+  }
 
+  return {
+    displayAlert,
+    close
+  }
+}
 </script>
 
 <style lang="scss">
 .qas-alert {
-  border-radius: var(--qas-generic-border-radius);
-
-  &__border-left {
-    border-radius: var(--qas-generic-border-radius) 0 0 var(--qas-generic-border-radius);
-    bottom: 0;
-    content: '';
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 4px;
-  }
-
-  &__close {
-    top: calc(var(--qas-spacing-sm) * -1);
+  &__link {
+    text-decoration: none;
   }
 }
 </style>

package/src/components/alert/QasAlert.yml

@@ -1,18 +1,20 @@
 type: component
 
 meta:
-  desc: Cria um seção para alertar sobre um conteúdo.
+  desc: Componente para alerta de informações.
 
 props:
+  buttonProps:
+    desc: Props do componente QasBtn.
+    default:
+      variant: primary
+    type: Object
+
   model-value:
     desc: Model do componente, controla se o componente aparece ou não.
     default: true
     type: Boolean
 
-  text:
-    desc: Texto do componente.
-    type: String
-
   status:
     desc: Status do alerta.
     type: String
@@ -22,10 +24,30 @@ props:
     desc: Chave a ser salva no localStorage, necessário caso esteja usando mais de um QasAlert na aplicação e ambos estejam com a prop "use-persist-model-on-close" ativada.
     type: String
 
+  router-link-props:
+    desc: Propriedades do componente RouterLink.
+    default: {}
+    type: Object
+
+  text:
+    desc: Texto a ser exibido.
+    type: String
+    default: ''
+
+  use-box:
+    desc: Controla se vai ter ou não box (componente tem um controle interno que lida automaticamente, serve para a maioria dos casos).
+    type: Boolean
+    default: undefined
+
   use-persistent-model-on-close:
     desc: Habilita salvar o model em localStorage ao fechar o alerta para não aparecer novamente.
     type: Boolean
 
+  use-regex:
+    desc: Faz a busca pelos "[]" dentro da propriedade "text" para substituir pelo QasBtn ou RouterLink.
+    default: true
+    type: Boolean
+
 slots:
   default:
     desc: 'Slot para acessar o conteúdo gerado pela prop "text"'

package/src/components/app-bar/QasAppBar.vue

@@ -67,6 +67,8 @@ const defaultAppUserProps = computed(() => {
       self: 'top end'
     },
 
+    useDataOnSmallScreen: false,
+
     onSignOut: signOut,
     onToggleNotifications: toggleNotifications,
     ...props.appUserProps