@bildvitta/quasar-ui-asteroid 3.14.0-beta.0 → 3.14.0-beta.1

package/package.json

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

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

@@ -9,7 +9,9 @@
             </q-item-section>
 
             <q-item-section>
-              <div>{{ item.label }}</div>
+              <div>
+                {{ item.label }}
+              </div>
             </q-item-section>
           </q-item>
         </slot>
@@ -86,7 +88,7 @@ const { deleteBtnProps, hasDelete } = useDelete()
 const fullList = computed(() => {
   return {
     ...props.list,
-    ...deleteBtnProps
+    ...deleteBtnProps.value
   }
 })
 
@@ -189,20 +191,20 @@ function onClick (item = {}) {
 
 // ------------------------------- composables ---------------------------------
 function useDelete () {
-  const deleteBtnProps = {}
-
   const hasDelete = computed(() => !!Object.keys(props.deleteProps).length)
 
-  if (hasDelete.value) {
-    Object.assign(deleteBtnProps, {
-      delete: {
-        color: 'grey-10',
-        icon: props.deleteIcon,
-        label: props.deleteLabel,
-        handler: () => qas.delete(props.deleteProps)
-      }
-    })
-  }
+  const deleteBtnProps = computed(() => {
+    return {
+      ...(hasDelete.value && {
+        delete: {
+          color: 'grey-10',
+          icon: props.deleteIcon,
+          label: props.deleteLabel,
+          handler: () => qas.delete(props.deleteProps)
+        }
+      })
+    }
+  })
 
   return {
     deleteBtnProps,

package/src/components/alert/QasAlert.vue

@@ -5,7 +5,7 @@
 
       <div class="text-body1 text-white">
         <slot>
-          {{ text }}
+          {{ props.text }}
         </slot>
       </div>
 

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

@@ -5,9 +5,9 @@
 
       <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">
+          <img v-if="props.brand" :alt="props.title" class="qas-app-bar__brand" :src="props.brand">
 
-          <span v-else class="ellipsis text-bold text-primary">{{ title }}</span>
+          <span v-else class="ellipsis text-bold text-primary">{{ props.title }}</span>
 
           <q-badge v-if="hasDevelopmentBadge" class="q-ml-sm" color="red" :label="developmentBadgeLabel" />
         </router-link>
@@ -54,7 +54,7 @@ const props = defineProps({
   }
 })
 
-const emits = defineEmits(['sign-out', 'toggle-menu'])
+const emit = defineEmits(['sign-out', 'toggle-menu'])
 
 const router = useRouter()
 const screen = useScreen()
@@ -93,11 +93,11 @@ const hasUser = computed(() => !!Object.keys(defaultAppUserProps.value.user || {
 const routerLinkClass = computed(() => screen.isSmall && 'justify-center')
 
 function signOut () {
-  emits('sign-out')
+  emit('sign-out')
 }
 
 function toggleMenuDrawer () {
-  emits('toggle-menu')
+  emit('toggle-menu')
 }
 </script>
 

package/src/components/app-menu/QasAppMenu.vue

@@ -6,9 +6,9 @@
           <!-- Brand -->
           <div v-if="!screen.untilLarge" class="q-mb-xl q-pt-xl qas-app-menu__label" :class="classes.spacedItem">
             <router-link class="column flex items-center justify-center relative-position text-no-decoration" :to="rootRoute">
-              <q-img v-if="normalizedBrand" :alt="title" class="qas-app-menu__brand qas-app-menu__label" fit="contain" height="27px" img-class="qas-app-menu__brand-img" no-spinner :src="normalizedBrand" />
+              <q-img v-if="normalizedBrand" :alt="props.title" class="qas-app-menu__brand qas-app-menu__label" fit="contain" height="27px" img-class="qas-app-menu__brand-img" no-spinner :src="normalizedBrand" />
 
-              <span v-else-if="!isMiniMode" class="ellipsis text-bold text-primary text-subtitle2">{{ title }}</span>
+              <span v-else-if="!isMiniMode" class="ellipsis text-bold text-primary text-subtitle2">{{ props.title }}</span>
 
               <q-badge v-if="hasDevelopmentBadge" class="q-mt-sm" color="red" :label="developmentBadgeLabel" />
             </router-link>
@@ -30,8 +30,8 @@
           </div>
 
           <!-- List -->
-          <q-list v-if="items.length" class="q-mt-xl qas-app-menu__menu text-grey-10">
-            <template v-for="(menuItem, index) in items">
+          <q-list v-if="props.items.length" class="q-mt-xl qas-app-menu__menu text-grey-10">
+            <template v-for="(menuItem, index) in props.items">
               <div v-if="hasChildren(menuItem)" :key="`children-${index}`" class="qas-app-menu__content" :class="classes.content">
                 <q-item class="ellipsis items-center q-py-none qas-app-menu__item qas-app-menu__item--label-mini text-weight-bold">
                   <div class="ellipsis qas-app-menu__label text-grey-10 text-subtitle2" :class="classes.spacedItem">
@@ -146,7 +146,7 @@ const props = defineProps({
   }
 })
 
-const emits = defineEmits(['sign-out', 'update:modelValue'])
+const emit = defineEmits(['sign-out', 'update:modelValue'])
 
 const screen = useScreen()
 const router = useRouter()
@@ -159,7 +159,7 @@ const isMini = ref(screen.isLarge)
 const composableParams = {
   props,
   onMenuUpdate: setHasOpenedMenu,
-  onSignOut: () => emits('sign-out')
+  onSignOut: () => emit('sign-out')
 }
 
 const { defaultAppUserProps, showAppUser } = useAppUser(composableParams)
@@ -172,7 +172,7 @@ const model = computed({
   },
 
   set (value) {
-    emits('update:modelValue', value)
+    emit('update:modelValue', value)
   }
 })
 
@@ -195,7 +195,7 @@ const classes = computed(() => {
 
 // métodos
 function closeDrawer () {
-  emits('update:modelValue', false)
+  emit('update:modelValue', false)
 }
 
 function getNormalizedPath (path) {

package/src/components/app-menu/private/PvAppMenuDropdown.vue

@@ -2,7 +2,7 @@
   <div class="pv-app-menu-dropdown">
     <qas-btn-dropdown v-bind="defaultButtonDropdownProps">
       <q-list>
-        <q-item v-for="item in modules" :key="item" :active="isActive(item)" active-class="text-primary" :href="item.value">
+        <q-item v-for="item in props.modules" :key="item" :active="isActive(item)" active-class="text-primary" :href="item.value">
           <q-item-section v-if="item.icon" avatar>
             <q-icon :name="item.icon" />
           </q-item-section>

package/src/components/app-user/QasAppUser.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="cursor-pointer items-center no-wrap q-gutter-sm qas-app-user row" data-cy="app-user">
     <div class="relative-position">
-      <qas-avatar :image="user.photo" :size="avatarSize" :title="userName" />
+      <qas-avatar :image="props.user.photo" :size="props.avatarSize" :title="userName" />
 
       <q-badge v-if="hasNotifications" color="red" floating>
-        {{ notifications.count }}
+        {{ props.notifications.count }}
       </q-badge>
     </div>
 
@@ -14,26 +14,26 @@
       </div>
 
       <div class="ellipsis qas-app-user__email text-grey-8">
-        {{ user.email }}
+        {{ props.user.email }}
       </div>
     </div>
 
-    <q-menu class="shadow-2 text-grey-10" max-height="400px" v-bind="menuProps" @hide="onMenuHide">
+    <q-menu class="shadow-2 text-grey-10" max-height="400px" v-bind="props.menuProps" @hide="onMenuHide">
       <div class="q-pb-sm q-pt-md q-px-md qas-app-user__menu">
-        <qas-avatar class="q-mb-md" :image="user.photo" size="64px" :title="userName" />
+        <qas-avatar class="q-mb-md" :image="props.user.photo" size="64px" :title="userName" />
 
         <div class="ellipsis qas-app-user__menu-name">
           {{ userName }}
         </div>
 
         <div class="ellipsis">
-          {{ user.email }}
+          {{ props.user.email }}
         </div>
 
         <qas-select v-if="hasCompaniesSelect" v-bind="defaultCompanyProps" v-model="companiesModel" class="q-my-md" data-cy="app-user-companies-select" @update:model-value="setCompanies" />
 
         <q-list class="q-mt-md">
-          <q-item v-close-popup :active="false" class="qas-app-user__menu-item" clickable :to="user.to">
+          <q-item v-close-popup :active="false" class="qas-app-user__menu-item" clickable :to="props.user.to">
             <q-item-section avatar>
               <q-icon name="sym_r_person" />
             </q-item-section>
@@ -54,7 +54,7 @@
 
             <q-item-section side>
               <q-badge color="red">
-                {{ notifications.count }}
+                {{ props.notifications.count }}
               </q-badge>
             </q-item-section>
           </q-item>
@@ -111,7 +111,7 @@ const props = defineProps({
   }
 })
 
-const emits = defineEmits(['sign-out'])
+const emit = defineEmits(['sign-out'])
 
 // vindo direto do boot api.js
 const axios = inject('axios')
@@ -142,7 +142,7 @@ watch(() => props.companyProps.modelValue, value => {
 
 // métodos
 function signOut () {
-  emits('sign-out')
+  emit('sign-out')
 }
 
 async function setCompanies (value) {

package/src/components/avatar/QasAvatar.vue

@@ -1,8 +1,8 @@
 <template>
   <q-avatar class="text-bold" v-bind="attributes">
-    <q-img v-if="hasImage" :alt="title" :ratio="1" spinner-color="primary" spinner-size="16px" :src="image" @error="onImageLoadedError" />
+    <q-img v-if="hasImage" :alt="props.title" :ratio="1" spinner-color="primary" spinner-size="16px" :src="props.image" @error="onImageLoadedError" />
     <template v-else-if="hasTitle">{{ firstLetter }}</template>
-    <q-icon v-else :name="icon" />
+    <q-icon v-else :name="props.icon" />
   </q-avatar>
 </template>
 

package/src/components/breakline/QasBreakline.vue

@@ -1,16 +1,14 @@
 <template>
-  <component :is="tag" v-for="(line, index) in lines" :key="index" v-bind="$attrs">
+  <component :is="props.tag" v-for="(line, index) in lines" :key="index" v-bind="attrs">
     {{ line }}
   </component>
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, useAttrs, useSlots } from 'vue'
 import { getSlotChildrenText } from '../../helpers'
 
-defineOptions({
-  name: 'QasBreakline'
-})
+defineOptions({ name: 'QasBreakline' })
 
 const props = defineProps({
   split: {
@@ -29,7 +27,8 @@ const props = defineProps({
   }
 })
 
-const slots = defineSlots()
+const attrs = useAttrs()
+const slots = useSlots()
 
 const lines = computed(() => {
   const text = props.text || getSlotChildrenText(slots.default())

package/src/components/btn-dropdown/QasBtnDropdown.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="qas-btn-dropdown" :class="classes">
-    <div v-if="hasLeftButton" :class="leftSideClasses">
+  <div class="qas-btn-dropdown" :class="classes.parent">
+    <div v-if="hasLeftButton" :class="classes.leftSide">
       <slot name="left-button">
-        <qas-btn variant="tertiary" v-bind="defaultButtonProps" @click="$emit('click', $event)">
+        <qas-btn variant="tertiary" v-bind="defaultButtonProps" @click="onClick">
           <q-menu v-if="hasMenuOnLeftSide" v-model="isMenuOpened" anchor="bottom right" auto-close self="top right" @update:model-value="onUpdateMenuValue">
-            <div :class="menuContentClasses">
+            <div :class="classes.menuContent">
               <slot />
             </div>
           </q-menu>
@@ -14,10 +14,10 @@
 
     <q-separator v-if="hasSeparator" class="q-mr-sm qas-btn-dropdown__separator self-center" dark vertical />
 
-    <div v-if="useSplit">
-      <qas-btn color="grey-10" :icon="dropdownIcon" variant="tertiary">
+    <div v-if="props.useSplit">
+      <qas-btn color="grey-10" :icon="props.dropdownIcon" variant="tertiary">
         <q-menu v-if="hasDefaultSlot" anchor="bottom right" auto-close self="top right">
-          <div :class="menuContentClasses">
+          <div :class="classes.menuContent">
             <slot />
           </div>
         </q-menu>
@@ -26,120 +26,99 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'QasBtnDropdown',
-
-  inheritAttrs: false,
-
-  props: {
-    buttonProps: {
-      default: () => ({}),
-      type: Object
-    },
+<script setup>
+import useScreen from '../../composables/use-screen'
 
-    dropdownIcon: {
-      default: 'sym_r_more_vert',
-      type: String
-    },
-
-    useSplit: {
-      type: Boolean
-    },
+import { ref, watch, computed, useSlots } from 'vue'
 
-    useMenuPadding: {
-      type: Boolean
-    },
+defineOptions({
+  name: 'QasBtnDropdown',
+  inheritAttrs: false
+})
 
-    menu: {
-      type: Boolean
-    }
+const props = defineProps({
+  buttonProps: {
+    default: () => ({}),
+    type: Object
   },
 
-  emits: ['click', 'update:menu'],
+  dropdownIcon: {
+    default: 'sym_r_more_vert',
+    type: String
+  },
 
-  data () {
-    return {
-      isMenuOpened: false
-    }
+  useSplit: {
+    type: Boolean
   },
 
-  computed: {
-    classes () {
-      return {
-        'flex inline items-center': this.useSplit
-      }
-    },
+  useMenuPadding: {
+    type: Boolean
+  },
 
-    leftSideClasses () {
-      return {
-        'q-mr-sm': this.useSplit
-      }
-    },
+  menu: {
+    type: Boolean
+  }
+})
 
-    menuContentClasses () {
-      return {
-        'q-pa-md': this.useMenuPadding
-      }
-    },
+const emit = defineEmits(['click', 'update:menu'])
 
-    hasDefaultSlot () {
-      return !!this.$slots.default
-    },
+const slots = useSlots()
+const screen = useScreen()
 
-    hasMenuOnLeftSide () {
-      return this.hasDefaultSlot && !this.useSplit
-    },
+const isMenuOpened = ref(false)
 
-    defaultButtonProps () {
-      const {
-        icon,
-        iconRight,
-        color,
-        ...defaultProps
-      } = this.buttonProps
+const defaultButtonProps = computed(() => {
+  const {
+    icon,
+    iconRight,
+    color,
+    ...defaultProps
+  } = props.buttonProps
 
-      const defaultIconRight = iconRight || this.dropdownIcon
+  const defaultIconRight = iconRight || props.dropdownIcon
 
-      return {
-        useLabelOnSmallScreen: false,
+  return {
+    useLabelOnSmallScreen: false,
 
-        ...defaultProps,
+    ...defaultProps,
 
-        color: color || (!this.useSplit ? 'grey-10' : 'primary'),
-        ...(!this.useSplit && { iconRight: defaultIconRight }),
-        ...(this.useSplit && { icon })
-      }
-    },
+    color: color || (!props.useSplit ? 'grey-10' : 'primary'),
+    ...(!props.useSplit && { iconRight: defaultIconRight }),
+    ...(props.useSplit && { icon })
+  }
+})
 
-    isSmall () {
-      return this.$qas.screen.isSmall
+const classes = computed(() => {
+  return {
+    parent: {
+      'flex inline items-center': props.useSplit
     },
 
-    hasLeftButton () {
-      return !this.isSmall || !this.useSplit
+    leftSide: {
+      'q-mr-sm': props.useSplit
     },
 
-    hasSeparator () {
-      return !this.isSmall && this.useSplit
+    menuContent: {
+      'q-pa-md': props.useMenuPadding
     }
-  },
+  }
+})
 
-  watch: {
-    menu: {
-      handler (value) {
-        this.isMenuOpened = value
-      },
+const hasDefaultSlot = computed(() => !!slots.default)
+const hasLeftButton = computed(() => !screen.isSmall || !props.useSplit)
+const hasMenuOnLeftSide = computed(() => hasDefaultSlot.value && !props.useSplit)
+const hasSeparator = computed(() => !screen.isSmall && props.useSplit)
 
-      immediate: true
-    }
-  },
+watch(() => props.menu, value => {
+  isMenuOpened.value = value
+}, { immediate: true })
 
-  methods: {
-    onUpdateMenuValue (value) {
-      this.$emit('update:menu', value)
-    }
-  }
+function onUpdateMenuValue (value) {
+  emit('update:menu', value)
+}
+
+function onClick (event) {
+  emit('click', event)
 }
 </script>
 

package/src/components/card/QasCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="col-12 col-lg-3 col-md-4 col-sm-6">
     <q-card class="border-radius-lg column full-height overflow-hidden" :class="cardClasses">
-      <header v-if="useHeader" class="overflow-hidden relative-position w-full">
+      <header v-if="props.useHeader" class="overflow-hidden relative-position w-full">
         <slot name="header">
           <q-carousel v-model="slideImage" animated class="cursor-pointer" height="205px" infinite :navigation="hasImages" navigation-icon="sym_r_fiber_manual_record" swipeable>
             <template #navigation-icon="{ active, btnProps, onClick }">
@@ -30,84 +30,66 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'QasCard',
-
-  props: {
-    imagePosition: {
-      type: String,
-      default: 'center'
-    },
-
-    gutter: {
-      type: String,
-      default: 'sm'
-    },
-
-    images: {
-      default: () => [],
-      type: Array
-    },
-
-    outlined: {
-      type: Boolean
-    },
-
-    unelevated: {
-      type: Boolean
-    },
-
-    useHeader: {
-      type: Boolean
-    }
+<script setup>
+import { Spacing } from '../../enums/Spacing'
+
+import { ref, computed, useSlots } from 'vue'
+
+defineOptions({ name: 'QasCard' })
+
+const props = defineProps({
+  imagePosition: {
+    type: String,
+    default: 'center'
+  },
+
+  gutter: {
+    type: String,
+    default: Spacing.Sm,
+    validator: value => Object.values(Spacing).includes(value)
+  },
+
+  images: {
+    default: () => [],
+    type: Array
   },
 
-  data () {
-    return {
-      slideImage: 0
-    }
+  outlined: {
+    type: Boolean
   },
 
-  computed: {
-    imagePositionClass () {
-      return `bg-position-${this.imagePosition}`
-    },
-
-    cardClasses () {
-      return {
-        'shadow-2': !this.unelevated,
-        'border-primary': this.outlined,
-        'no-shadow': this.outlined,
-        'bg-white': this.outlined
-      }
-    },
-
-    gutterClass () {
-      return `q-col-gutter-${this.gutter}`
-    },
-
-    hasActionsSlot () {
-      return !!this.$slots.actions
-    },
-
-    hasImages () {
-      return this.images.length > 1
-    },
-
-    imagesLength () {
-      return this.images?.length
-    },
-
-    imagesList () {
-      return this.imagesLength && this.images.slice(0, 3)
-    }
+  unelevated: {
+    type: Boolean
   },
 
-  methods: {
-    getNavigationIcon (active, { icon }) {
-      return active ? 'sym_r_radio_button_checked' : icon
-    }
+  useHeader: {
+    type: Boolean
   }
+})
+
+const slots = useSlots()
+
+const slideImage = ref(0)
+
+const cardClasses = computed(() => {
+  return {
+    'shadow-2': !props.unelevated,
+    'border-primary': props.outlined,
+    'no-shadow': props.outlined,
+    'bg-white': props.outlined
+  }
+})
+
+const imagePositionClass = computed(() => `bg-position-${props.imagePosition}`)
+const gutterClass = computed(() => `q-col-gutter-${props.gutter}`)
+
+const hasActionsSlot = computed(() => !!slots.actions)
+const hasImages = computed(() => props.images.length > 1)
+
+const imagesLength = computed(() => props.images?.length)
+const imagesList = computed(() => imagesLength.value && props.images.slice(0, 3))
+
+function getNavigationIcon (active, { icon }) {
+  return active ? 'sym_r_radio_button_checked' : icon
 }
 </script>