@bildvitta/quasar-ui-asteroid 3.13.0-beta.8 → 3.13.0

package/package.json

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

package/src/components/actions/QasActions.vue

@@ -10,58 +10,65 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'QasActions',
-
-  props: {
-    align: {
-      default: 'end',
-      type: String,
-      validator: value => ['start', 'around', 'between', 'center', 'end'].includes(value)
-    },
-
-    gutter: {
-      default: '',
-      type: String,
-      validator: value => !value || ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
-    },
-
-    useFullWidth: {
-      type: Boolean
-    },
-
-    useEqualWidth: {
-      type: Boolean
-    }
-  },
+<script setup>
+import useScreen from '../../composables/use-screen'
+import { FlexAlign } from '../../enums/Align'
+import { Spacing } from '../../enums/Spacing'
 
-  computed: {
-    classes () {
-      return [
-        `justify-${this.align}`,
-        `q-col-gutter-${this.defaultGutter}`,
-        (this.$qas.screen.isSmall || this.useFullWidth) ? 'column reverse' : 'row'
-      ]
-    },
+import { computed, useSlots } from 'vue'
 
-    defaultGutter () {
-      return this.gutter || this.$qas.screen.isSmall ? 'md' : 'lg'
-    },
+defineOptions({ name: 'QasActions' })
 
-    columnClasses () {
-      if (this.useEqualWidth) return 'col-12 col-sm-6'
+const props = defineProps({
+  align: {
+    default: FlexAlign.End,
+    type: String,
+    validator: value => Object.values(FlexAlign).includes(value)
+  },
 
-      return this.useFullWidth ? 'col-12' : 'col-12 col-sm-auto'
-    },
+  gutter: {
+    default: '',
+    type: String,
+    validator: value => !value || Object.values(Spacing).includes(value)
+  },
 
-    hasPrimarySlot () {
-      return !!this.$slots.primary
-    },
+  useFullWidth: {
+    type: Boolean
+  },
 
-    hasSecondarySlot () {
-      return !!this.$slots.secondary
-    }
+  useEqualWidth: {
+    type: Boolean
   }
-}
+})
+
+const slots = useSlots()
+const screen = useScreen()
+
+const defaultGutter = computed(() => {
+  return props.gutter || (screen.isSmall ? 'md' : 'lg')
+})
+
+const classes = computed(() => {
+  const isSmallOrFullWidth = screen.isSmall || props.useFullWidth
+
+  return [
+    // alinhamento
+    `justify-${props.align}`,
+
+    // espaçamento
+    `q-col-gutter-${defaultGutter.value}`,
+
+    // disposição
+    isSmallOrFullWidth ? 'column reverse' : 'row'
+  ]
+})
+
+const columnClasses = computed(() => {
+  if (props.useEqualWidth) return 'col-12 col-sm-6'
+
+  return props.useFullWidth ? 'col-12' : 'col-12 col-sm-auto'
+})
+
+const hasPrimarySlot = computed(() => !!slots.primary)
+const hasSecondarySlot = computed(() => !!slots.secondary)
 </script>

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

@@ -1,9 +1,9 @@
 <template>
-  <div v-if="hasActions" class="qas-actions-menu">
+  <div v-if="hasActions" class="qas-actions-menu" data-cy="actions-menu">
     <component :is="component.is" v-bind="component.props" variant="tertiary" @click.stop.prevent>
-      <q-list v-if="isBtnDropdown">
+      <q-list v-if="isBtnDropdown" data-cy="actions-menu-list">
         <slot v-for="(item, key) in actions" :item="item" :name="key">
-          <q-item v-bind="item.props" :key="key" clickable @click="onClick(item)">
+          <q-item v-bind="item.props" :key="key" clickable data-cy="actions-menu-list-item" @click="onClick(item)">
             <q-item-section avatar>
               <q-icon :name="item.icon" />
             </q-item-section>
@@ -22,193 +22,191 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import QasBtn from '../btn/QasBtn.vue'
 import QasBtnDropdown from '../btn-dropdown/QasBtnDropdown.vue'
 
-export default {
-  name: 'QasActionsMenu',
+import useScreen from '../../composables/use-screen'
 
-  components: {
-    QasBtn,
-    QasBtnDropdown
-  },
+import { computed, inject } from 'vue'
 
-  props: {
-    buttonProps: {
-      default: () => ({}),
-      type: Object
-    },
+defineOptions({ name: 'QasActionsMenu' })
 
-    deleteLabel: {
-      type: String,
-      default: 'Excluir'
-    },
+const qas = inject('qas')
 
-    deleteIcon: {
-      type: String,
-      default: 'sym_r_delete'
-    },
+const props = defineProps({
+  buttonProps: {
+    default: () => ({}),
+    type: Object
+  },
 
-    deleteProps: {
-      default: () => ({}),
-      type: Object
-    },
+  deleteLabel: {
+    default: 'Excluir',
+    type: String
+  },
 
-    dropdownIcon: {
-      default: 'sym_r_more_vert',
-      type: String
-    },
+  deleteIcon: {
+    default: 'sym_r_delete',
+    type: String
+  },
 
-    list: {
-      default: () => ({}),
-      type: Object
-    },
+  deleteProps: {
+    default: () => ({}),
+    type: Object
+  },
 
-    splitName: {
-      type: String,
-      default: ''
-    },
+  dropdownIcon: {
+    default: 'sym_r_more_vert',
+    type: String
+  },
 
-    useLabel: {
-      default: true,
-      type: Boolean
-    },
+  list: {
+    default: () => ({}),
+    type: Object
+  },
 
-    useTooltip: {
-      type: Boolean
-    }
+  splitName: {
+    default: '',
+    type: String
   },
 
-  computed: {
-    actions () {
-      const list = { ...this.fullList }
+  useLabel: {
+    default: true,
+    type: Boolean
+  },
 
-      if (this.hasSplit && list[this.splitName] && this.isBtnDropdown) {
-        this.isSmall
-          ? Object.assign(list, { [this.splitName]: list[this.splitName] })
-          : delete list[this.splitName]
-      }
+  useTooltip: {
+    type: Boolean
+  }
+})
 
-      return list
-    },
+const screen = useScreen()
+const { deleteBtnProps, hasDelete } = useDelete()
 
-    fullList () {
-      return {
-        ...this.list,
-        ...(this.hasDelete && {
-          delete: {
-            color: 'grey-9',
-            icon: this.deleteIcon,
-            label: this.deleteLabel,
-            handler: () => this.$qas.delete(this.deleteProps)
-          }
-        })
-      }
-    },
+const fullList = computed(() => {
+  return {
+    ...props.list,
+    ...deleteBtnProps
+  }
+})
 
-    component () {
-      const is = this.isBtnDropdown ? 'qas-btn-dropdown' : 'qas-btn'
+const hasSplit = computed(() => !!props.splitName)
 
-      return {
-        is,
-        props: {
-          ...(this.isBtnDropdown ? this.btnDropdownProps : this.btnProps),
-          ...(this.hasDelete && this.deleteProps)
-        }
-      }
-    },
+// --------------------------------- actions -----------------------------------
+const actions = computed(() => {
+  const list = { ...fullList.value }
 
-    firstItemKey () {
-      return Object.keys(this.actions)?.[0]
-    },
+  if (hasSplit.value && list[props.splitName] && isBtnDropdown.value) {
+    screen.isSmall
+      ? Object.assign(list, { [props.splitName]: list[props.splitName] })
+      : delete list[props.splitName]
+  }
 
-    hasActions () {
-      return !!Object.keys(this.actions).length
-    },
+  return list
+})
 
-    hasDelete () {
-      return !!Object.keys(this.deleteProps).length
-    },
+const hasActions = computed(() => !!Object.keys(actions.value).length)
+const firstItemKey = computed(() => Object.keys(actions.value)?.[0])
 
-    hasSplit () {
-      return !!this.splitName
-    },
+// -------------------------------- tooltip ------------------------------------
+const tooltipLabel = computed(() => actions.value[firstItemKey.value]?.label)
+const hasTooltip = computed(() => {
+  return !isBtnDropdown.value && !props.useLabel && props.useTooltip
+})
 
-    isBtnDropdown () {
-      return Object.keys(this.fullList || {}).length > 1
-    },
+// --------------------------------- button ------------------------------------
+const defaultButtonProps = computed(() => {
+  const { label, variant, ...buttonProps } = props.buttonProps
 
-    hasTooltip () {
-      return !this.isBtnDropdown && !this.useLabel && this.useTooltip
-    },
+  return {
+    useHoverOnWhiteColor: true,
+    useLabelOnSmallScreen: false,
+    ...buttonProps
+  }
+})
 
-    tooltipLabel () {
-      return this.actions[this.firstItemKey]?.label
-    },
+const btnDropdownProps = computed(() => {
+  const { icon, label } = fullList.value[props.splitName] || {}
 
-    defaultButtonProps () {
-      const { label, variant, ...buttonProps } = this.buttonProps
+  const {
+    icon: defaultIcon,
+    ...defaultBtnProps
+  } = defaultButtonProps.value
 
-      return {
-        useHoverOnWhiteColor: true,
-        useLabelOnSmallScreen: false,
-        ...buttonProps
-      }
+  return {
+    buttonProps: {
+      ...(props.useLabel && { label: hasSplit.value ? label : 'Opções' }),
+      ...defaultBtnProps,
+      icon: icon || defaultIcon
     },
 
-    btnDropdownProps () {
-      const { icon, label } = this.fullList[this.splitName] || {}
+    dropdownIcon: props.dropdownIcon,
+    useSplit: hasSplit.value,
 
-      const {
-        icon: defaultIcon,
-        ...defaultButtonProps
-      } = this.defaultButtonProps
+    onClick: () => onClick(fullList.value[props.splitName])
+  }
+})
+
+const btnProps = computed(() => {
+  const { color, icon } = actions.value[firstItemKey.value] || {}
+  const { color: defaultColor, ...defaultBtnProps } = defaultButtonProps.value
+
+  return {
+    color: color || defaultColor,
+    icon,
+    label: props.useLabel ? tooltipLabel.value : '',
+    onClick,
+    ...defaultBtnProps
+  }
+})
 
-      return {
-        buttonProps: {
-          ...(this.useLabel && { label: this.hasSplit ? label : 'Opções' }),
-          ...defaultButtonProps,
-          icon: icon || defaultIcon
-        },
+const isBtnDropdown = computed(() => Object.keys(fullList.value || {}).length > 1)
 
-        dropdownIcon: this.dropdownIcon,
-        useSplit: this.hasSplit,
+// -------------------------------- component ----------------------------------
+const component = computed(() => {
+  const is = isBtnDropdown.value ? QasBtnDropdown : QasBtn
 
-        // evento
-        onClick: () => this.onClick(this.fullList[this.splitName])
-      }
-    },
+  return {
+    is,
+    props: {
+      ...(isBtnDropdown.value ? btnDropdownProps.value : btnProps.value),
+      ...(hasDelete.value && props.deleteProps)
+    }
+  }
+})
 
-    btnProps () {
-      const { color, icon } = this.actions[this.firstItemKey] || {}
-      const { color: defaultColor, ...defaultButtonProps } = this.defaultButtonProps
+// --------------------------------- methods -----------------------------------
+function onClick (item = {}) {
+  if (!isBtnDropdown.value) {
+    item = actions.value[firstItemKey.value]
+  }
 
-      return {
-        color: color || defaultColor,
-        icon,
-        label: this.useLabel ? this.tooltipLabel : '',
-        onClick: this.onClick,
-        ...defaultButtonProps
-      }
-    },
+  if (typeof item.handler === 'function') {
+    const { handler, ...filtered } = item
+    item.handler(filtered)
+  }
+}
 
-    isSmall () {
-      return this.$qas.screen.isSmall
-    }
-  },
+// ------------------------------- composables ---------------------------------
+function useDelete () {
+  const deleteBtnProps = {}
 
-  methods: {
-    onClick (item = {}) {
-      if (!this.isBtnDropdown) {
-        item = this.actions[this.firstItemKey]
-      }
+  const hasDelete = computed(() => !!Object.keys(props.deleteProps).length)
 
-      if (typeof item.handler === 'function') {
-        const { handler, ...filtered } = item
-        item.handler(filtered)
+  if (hasDelete.value) {
+    Object.assign(deleteBtnProps, {
+      delete: {
+        color: 'grey-10',
+        icon: props.deleteIcon,
+        label: props.deleteLabel,
+        handler: () => qas.delete(props.deleteProps)
       }
-    }
+    })
+  }
+
+  return {
+    deleteBtnProps,
+    hasDelete
   }
 }
 </script>

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

@@ -70,3 +70,16 @@ slots:
             }
           "
         ]
+
+selectors:
+  'actions-menu':
+    desc: Seletor do componente.
+    examples: ['data-cy="actions-menu"']
+
+  'actions-menu-list':
+    desc: Seletor da lista de ações.
+    examples: ['data-cy="actions-menu-list"']
+
+  'actions-menu-list-item':
+    desc: Seletor para cada item da lista de ações.
+    examples: ['data-cy="actions-menu-list-item"']

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

@@ -1,12 +1,14 @@
 <template>
   <q-header class="qas-app-bar shadow-2" height-hint="56">
-    <q-toolbar class="bg-white qas-app-bar__toolbar text-grey-9">
-      <qas-btn color="grey-9" icon="sym_r_menu" variant="tertiary" @click="toggleMenuDrawer" />
+    <q-toolbar class="bg-white qas-app-bar__toolbar text-grey-10">
+      <qas-btn color="grey-10" icon="sym_r_menu" variant="tertiary" @click="toggleMenuDrawer" />
 
       <q-toolbar-title>
         <router-link class="flex items-center no-wrap text-no-decoration" :class="routerLinkClass" :to="rootRoute">
           <img v-if="brand" :alt="title" class="qas-app-bar__brand" :src="brand">
+
           <span v-else class="ellipsis text-bold text-primary">{{ title }}</span>
+
           <q-badge v-if="hasDevelopmentBadge" class="q-ml-sm" color="red" :label="developmentBadgeLabel" />
         </router-link>
       </q-toolbar-title>
@@ -18,114 +20,84 @@
   </q-header>
 </template>
 
-<script>
+<script setup>
 import QasAppUser from '../app-user/QasAppUser.vue'
 import QasBtn from '../btn/QasBtn.vue'
 
-export default {
-  name: 'QasAppBar',
+import { useScreen } from '../../composables'
 
-  components: {
-    QasAppUser,
-    QasBtn
-  },
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
 
-  props: {
-    appUserProps: {
-      type: Object,
-      required: true,
-      default: () => ({})
-    },
+defineOptions({ name: 'QasAppBar' })
 
-    brand: {
-      default: '',
-      type: String
-    },
+const props = defineProps({
+  appUserProps: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
 
-    notifications: {
-      default: () => ({}),
-      type: Object
-    },
+  brand: {
+    default: '',
+    type: String
+  },
 
-    title: {
-      required: true,
-      type: String
-    }
+  notifications: {
+    default: () => ({}),
+    type: Object
   },
 
-  emits: ['sign-out', 'toggle-menu'],
+  title: {
+    required: true,
+    type: String
+  }
+})
 
-  data () {
-    return {
-      menuDrawer: true
-    }
-  },
+const emits = defineEmits(['sign-out', 'toggle-menu'])
 
-  computed: {
-    appUserMenuProps () {
-      return {
-        anchor: 'bottom end',
-        offset: [0, 5],
-        self: 'top end'
-      }
-    },
+const router = useRouter()
+const screen = useScreen()
 
-    defaultAppUserProps () {
-      return {
-        menuProps: {
-          anchor: 'bottom end',
-          offset: [0, 5],
-          self: 'top end'
-        },
-
-        onSignOut: this.signOut,
-        ...this.appUserProps
-      }
+const defaultAppUserProps = computed(() => {
+  return {
+    menuProps: {
+      anchor: 'bottom end',
+      offset: [0, 5],
+      self: 'top end'
     },
 
-    developmentBadgeLabel () {
-      const hosts = {
-        localhost: 'Local',
-        '.dev.': 'Develop'
-      }
+    onSignOut: signOut,
+    ...props.appUserProps
+  }
+})
 
-      if (process.env.DEV) {
-        return hosts.localhost
-      }
+const rootRoute = router.hasRoute('Root') ? { name: 'Root' } : { path: '/' }
 
-      const current = Object.keys(hosts).find(
-        host => location.hostname.includes(host)
-      )
+const developmentBadgeLabel = computed(() => {
+  const hosts = {
+    localhost: 'Local',
+    '.dev.': 'Develop'
+  }
 
-      return current ? hosts[current] : ''
-    },
+  if (process.env.DEV) return hosts.localhost
 
-    hasDevelopmentBadge () {
-      return !!this.developmentBadgeLabel
-    },
+  const current = Object.keys(hosts).find(host => location.hostname.includes(host))
 
-    hasUser () {
-      return !!Object.keys(this.defaultAppUserProps.user || {}).length
-    },
+  return current ? hosts[current] : ''
+})
 
-    rootRoute () {
-      return this.$router.hasRoute('Root') ? { name: 'Root' } : { path: '/' }
-    },
+const hasDevelopmentBadge = computed(() => !!developmentBadgeLabel.value)
+const hasUser = computed(() => !!Object.keys(defaultAppUserProps.value.user || {}).length)
 
-    routerLinkClass () {
-      return this.$qas.screen.isSmall && 'justify-center'
-    }
-  },
+const routerLinkClass = computed(() => screen.isSmall && 'justify-center')
 
-  methods: {
-    signOut () {
-      this.$emit('sign-out')
-    },
+function signOut () {
+  emits('sign-out')
+}
 
-    toggleMenuDrawer () {
-      this.$emit('toggle-menu')
-    }
-  }
+function toggleMenuDrawer () {
+  emits('toggle-menu')
 }
 </script>
 
@@ -136,7 +108,7 @@ export default {
   }
 
   &__brand {
-    max-width: 164px;
+    max-width: 115px;
   }
 }
 </style>