@bildvitta/quasar-ui-asteroid 2.12.4 → 3.0.0-alpha.1

package/src/components/actions/QasActions.vue

@@ -0,0 +1,45 @@
+<template>
+  <div :class="classes">
+    <div class="col-12 col-sm-auto">
+      <slot name="secondary" />
+    </div>
+
+    <div class="col-12 col-sm-auto">
+      <slot name="primary" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { screenMixin } from '../../mixins'
+
+export default {
+  name: 'QasActions',
+
+  mixins: [screenMixin],
+
+  props: {
+    align: {
+      default: 'end',
+      type: String,
+      validator: value => ['start', 'around', 'between', 'center', 'end'].includes(value)
+    },
+
+    gutter: {
+      default: 'md',
+      type: String,
+      validator: value => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+    }
+  },
+
+  computed: {
+    classes () {
+      return [
+        `justify-${this.align}`,
+        `q-col-gutter-${this.gutter}`,
+        this.mx_isSmall ? 'column reverse' : 'row'
+      ]
+    }
+  }
+}
+</script>

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

@@ -1,5 +1,5 @@
 <template>
-  <qas-btn class="qas-actions-menu" color="primary" v-bind="$attrs" hide-mobile-label :icon="icon" :label="labelValue" outline v-on="$listeners">
+  <qas-btn class="qas-actions-menu" color="primary" hide-label-on-small-screen :icon="icon" :label="label" outline>
     <q-menu class="qas-actions-menu__menu">
       <q-list class="qas-actions-menu__list" separator>
         <slot v-for="(item, key) in list" :item="item" :name="key">
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import QasBtn from '../btn/QasBtn'
+import QasBtn from '../btn/QasBtn.vue'
 
 export default {
   name: 'QasActionsMenu',
@@ -28,23 +28,19 @@ export default {
   },
 
   props: {
+    icon: {
+      default: 'o_settings',
+      type: String
+    },
+
     label: {
-      default: 'Settings',
+      default: 'Configurações',
       type: String
     },
 
     list: {
       default: () => ({}),
       type: Object
-    },
-
-    hideLabel: {
-      type: Boolean
-    },
-
-    icon: {
-      default: 'o_settings',
-      type: String
     }
   },
 
@@ -55,12 +51,6 @@ export default {
         item.handler(filtered)
       }
     }
-  },
-
-  computed: {
-    labelValue () {
-      return this.hideLabel ? '' : this.label
-    }
   }
 }
 </script>
@@ -70,7 +60,6 @@ export default {
   &__list {
     width: 265px;
     z-index: 1;
-
   }
 }
 </style>

package/src/components/alert/QasAlert.vue

@@ -0,0 +1,90 @@
+<template>
+  <div v-if="model" class="q-pa-lg qas-alert relative-position rounded-borders" :class="classes">
+    <qas-btn class="absolute-top-right q-mr-md q-mt-sm" :color="color" dense flat icon="o_close" rounded @click="close" />
+
+    <div class="q-gutter-md q-mr-lg">
+      <slot name="header">
+        <h5 v-if="title" class="text-bold text-h5">{{ title }}</h5>
+      </slot>
+
+      <slot>
+        <qas-breakline tag="p" :text="text" />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import QasBreakline from '../breakline/QasBreakline.vue'
+import QasBtn from '../btn/QasBtn.vue'
+
+export default {
+  name: 'QasAlert',
+
+  components: {
+    QasBreakline,
+    QasBtn
+  },
+
+  props: {
+    color: {
+      default: 'primary',
+      type: String
+    },
+
+    modelValue: {
+      default: true,
+      type: Boolean
+    },
+
+    text: {
+      default: '',
+      type: String
+    },
+
+    title: {
+      default: '',
+      type: String
+    }
+  },
+
+  emits: ['update:modelValue'],
+
+  data () {
+    return {
+      model: true
+    }
+  },
+
+  computed: {
+    classes () {
+      return {
+        [`text-${this.color}`]: true,
+        [`bg-${this.color}-contrast`]: ['primary', 'secondary'].includes(this.color)
+      }
+    }
+  },
+
+  watch: {
+    modelValue: {
+      handler (value) {
+        this.model = value
+      },
+      immediate: true
+    }
+  },
+
+  methods: {
+    close () {
+      this.$emit('update:modelValue', false)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.qas-alert {
+  border-style: solid;
+  border-width: 0 10px;
+}
+</style>

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

@@ -1,82 +1,76 @@
 <template>
-  <q-toolbar class="qas-toolbar">
-    <q-ajax-bar color="white" position="top" size="2px" />
+  <q-header class="bg-white qas-app-bar shadow-primary" height-hint="70">
+    <q-toolbar class="qas-app-bar__toolbar" color="bg-white">
+      <q-ajax-bar color="white" position="top" size="2px" />
 
-    <q-btn dense flat icon="o_menu" round @click="toggleMenuDrawer" />
+      <q-btn color="grey-7" dense flat icon="o_menu" round @click="toggleMenuDrawer" />
 
-    <q-toolbar-title class="flex">
-      <div class="cursor-pointer" @click="goToRoot">
-        <img v-if="brand" :alt="title" class="q-mr-sm qas-toolbar__brand" :src="brand">
-        <span v-if="title" class="text-bold text-primary-contrast text-subtitle1 text-uppercase">{{ title }}</span>
-        <q-badge v-if="hasDevelopmentBadge" align="middle" class="q-ml-sm" color="negative" :label="developmentBadgeLabel" />
+      <q-toolbar-title class="flex">
+        <div class="cursor-pointer" @click="goToRoot">
+          <img v-if="brand" :alt="title" class="q-mr-sm qas-app-bar__brand" :src="brand">
+          <span v-if="showTitle" class="text-bold text-grey-9 text-subtitle1 text-uppercase">{{ title }}</span>
+          <q-badge v-if="hasDevelopmentBadge" align="middle" class="q-ml-sm" color="negative" :label="developmentBadgeLabel" />
+        </div>
+      </q-toolbar-title>
+
+      <div v-if="hasNotifications" class="q-mr-md">
+        <q-btn class="q-mr-md" dense icon="o_notifications" round unelevated>
+          <q-badge v-if="notifications" color="red" floating>{{ notifications.count }}</q-badge>
+        </q-btn>
       </div>
-    </q-toolbar-title>
 
-    <!-- TODO: Notificações. -->
-    <div v-if="hasNotifications" class="q-mr-md">
-      <q-btn class="q-mr-md" dense icon="o_notifications" round unelevated>
-        <q-badge v-if="notifications" color="red" floating>{{ notifications.count }}</q-badge>
-      </q-btn>
-    </div>
+      <div class="items-center no-wrap q-gutter-md row">
+        <slot name="tools" />
 
-    <qas-apps-menu v-if="hasApps" :apps="apps" class="q-mr-md" />
+        <div v-if="isAuth" class="cursor-pointer items-center q-mr-sm qas-app-bar__user rounded-borders row text-grey-9" :title="user.name || user.givenName">
+          <qas-avatar class="rounded-borders-left" color="white" dark :image="user.photo" rounded size="42px" text-color="primary" :title="user.name || user.givenName" />
 
-    <div class="items-center no-wrap q-gutter-md row">
-      <slot name="tools" />
+          <div class="q-px-sm qas-app-bar__user-data qs-lh-lg text-caption">
+            <div class="ellipsis">{{ user.name || user.givenName }}</div>
+            <div class="ellipsis text-bold">{{ user.email }}</div>
+          </div>
 
-      <div v-if="isAuth" class="cursor-pointer items-center q-mr-sm qas-toolbar__user rounded-borders row" :title="user.name || user.givenName">
-        <qas-avatar class="rounded-borders-left" color="white" dark :image="user.photo" rounded size="42px" text-color="primary" :title="user.name || user.givenName" />
+          <q-menu anchor="bottom end" class="shadow-primary" max-height="400px" :offset="[0, 5]" self="top end">
+            <div class="qas-app-bar__user-menu">
+              <div class="q-pa-lg text-center">
+                <button class="unset" @click="goToProfile">
+                  <qas-avatar :image="user.photo" size="145px" :title="user.name || user.givenName" />
+                </button>
 
-        <div class="q-px-sm qas-toolbar__user-data qs-lh-lg text-caption">
-          <div class="ellipsis">{{ user.name || user.givenName }}</div>
-          <div class="ellipsis text-bold">{{ user.email }}</div>
-        </div>
+                <div class="ellipsis q-mt-lg qs-lh-sm text-bold text-subtitle1">{{ user.name || user.givenName }}</div>
+                <div class="ellipsis q-mt-xs text-caption">{{ user.email }}</div>
 
-        <q-menu anchor="bottom end" content-class="shadow-primary" max-height="400px" :offset="[0, 5]" self="top end">
-          <div class="qas-toolbar__user-menu">
-            <div class="q-pa-lg text-center">
-              <button class="unset" @click="goToProfile">
-                <qas-avatar :image="user.photo" size="145px" :title="user.name || user.givenName" />
-              </button>
+                <div class="q-mt-sm">
+                  <qas-btn flat icon="o_edit" label="Editar" :to="user.to" />
+                </div>
 
-              <div class="ellipsis q-mt-lg qs-lh-sm text-bold text-subtitle1">{{ user.name || user.givenName }}</div>
-              <div class="ellipsis q-mt-xs text-caption">{{ user.email }}</div>
+                <div class="q-mt-sm">
+                  <qas-btn v-close-popup class="q-px-lg q-py-xs" dense icon="o_exit_to_app" label="Sair" outline @click="signOut" />
+                </div>
 
-              <div class="q-mt-sm">
-                <qas-btn flat icon="o_edit" label="Editar" :to="user.to" />
+                <slot name="user" :user="user" />
               </div>
-
-              <div class="q-mt-sm">
-                <qas-btn v-close-popup class="q-px-lg q-py-xs" dense icon="o_exit_to_app" label="Sair" outline @click="signOut" />
-              </div>
-
-              <slot name="user" :user="user" />
             </div>
-          </div>
-        </q-menu>
+          </q-menu>
+        </div>
       </div>
-    </div>
-  </q-toolbar>
+    </q-toolbar>
+  </q-header>
 </template>
 
 <script>
-import QasAppsMenu from '../apps-menu/QasAppsMenu'
-import QasAvatar from '../avatar/QasAvatar'
-import QasBtn from '../btn/QasBtn'
+import QasAvatar from '../avatar/QasAvatar.vue'
+import QasBtn from '../btn/QasBtn.vue'
 
 export default {
+  name: 'QasAppBar',
+
   components: {
-    QasAppsMenu,
     QasAvatar,
     QasBtn
   },
 
   props: {
-    apps: {
-      default: () => [],
-      type: Array
-    },
-
     brand: {
       default: '',
       type: String
@@ -103,6 +97,8 @@ export default {
     }
   },
 
+  emits: ['sign-out', 'toggle-menu'],
+
   data () {
     return {
       menuDrawer: true
@@ -128,16 +124,16 @@ export default {
       return current ? hosts[current] : ''
     },
 
-    hasApps () {
-      return !!this.apps.length
-    },
-
     hasDevelopmentBadge () {
       return !!this.developmentBadgeLabel
     },
 
     hasNotifications () {
       return !!Object.keys(this.notifications).length
+    },
+
+    showTitle () {
+      return this.title && !this.brand
     }
   },
 
@@ -162,18 +158,20 @@ export default {
 </script>
 
 <style lang="scss">
-.qas-toolbar {
-  height: 70px;
+.qas-app-bar {
+  &__toolbar {
+    height: 70px;
+  }
 
   &__brand {
     height: 24px;
-    margin-right: map-get($space-sm, x);
+    margin-right: 8px;
     position: relative;
     top: 4px;
   }
 
   &__user {
-    background-color: rgba(white, 0.1);
+    background-color: var(--qas-background-color);
     transition: background-color $generic-hover-transition;
 
     &:focus,

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

@@ -1,35 +1,55 @@
 <template>
-  <q-drawer v-model="model" content-class="bg-primary-contrast" :mini="miniMode" :width="230" @before-hide="beforeHide">
-    <q-list class="text-primary">
-      <div v-for="(header, index) in items" :key="index">
-        <q-expansion-item v-if="hasChildren(header)" :active-class="activeSecondaryItemClasses" :default-opened="shouldExpand(header)" expand-icon="o_keyboard_arrow_down" expand-separator :icon="header.icon" :label="header.label" :to="header.to">
-          <q-item v-for="(item, itemIndex) in header.children" :key="itemIndex" v-ripple :active-class="activeItemClasses" clickable :to="item.to">
-            <q-item-section v-if="item.icon" avatar>
-              <q-icon :name="item.icon" />
-            </q-item-section>
-            <q-item-section>
-              <q-item-label>{{ item.label }}</q-item-label>
-            </q-item-section>
-          </q-item>
-        </q-expansion-item>
-
-        <q-item v-else :key="index" v-ripple :active-class="activeItemClasses" clickable :to="header.to">
-          <q-item-section v-if="header.icon" avatar>
-            <q-icon :name="header.icon" />
-          </q-item-section>
-          <q-item-section>
-            <q-item-label>{{ header.label }}</q-item-label>
-          </q-item-section>
-        </q-item>
+  <q-drawer v-model="model" class="qas-app-menu" :mini="miniMode" :width="230" @before-hide="beforeHide" @mini-state="setMiniState">
+    <div class="column flex full-height justify-between no-wrap overflow-x-hidden">
+      <div>
+        <div v-if="displayModuleSection" class="q-ma-md">
+          <div class="q-mb-sm text-caption text-grey-7 text-weight-medium">
+            Você está no modulo:
+          </div>
+
+          <qas-select v-model="module" :options="defaultModules" @update:model-value="redirectHandler(currentModelOption)" />
+        </div>
+
+        <q-list class="text-grey-9 text-weight-medium">
+          <template v-for="(header, index) in items">
+            <q-expansion-item v-if="hasChildren(header)" :key="header.label" :ref="`item-${index}`" :active-class="activeItemClassesSecondary" :default-opened="shouldExpand(header)" expand-icon="o_keyboard_arrow_down" expand-separator group="item" :icon="header.icon" :label="header.label" :to="header.to" @click="toggleItem(index)">
+              <q-item v-for="(item, itemIndex) in header.children" :key="itemIndex" v-ripple :active-class="activeItemClasses" clickable :to="item.to">
+                <q-item-section v-if="item.icon" avatar>
+                  <q-icon :name="item.icon" />
+                </q-item-section>
+                <q-item-section>
+                  <q-item-label>{{ item.label }}</q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-expansion-item>
+
+            <q-item v-else :key="index" v-ripple :active-class="activeItemClasses" clickable :to="header.to">
+              <q-item-section v-if="header.icon" avatar>
+                <q-icon :name="header.icon" />
+              </q-item-section>
+              <q-item-section>
+                <q-item-label>{{ header.label }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-list>
       </div>
-    </q-list>
+
+      <div class="q-mx-md">
+        <!-- TODO: O Modular não é o Asteroid, então não podemos manter esse logo aqui. -->
+        <img v-if="!isMini" alt="Modular" class="block q-mb-md q-mx-auto" src="../../assets/logo-modular.svg">
+      </div>
+    </div>
   </q-drawer>
 </template>
 
 <script>
 import { screenMixin } from '../../mixins'
+import { isLocalDevelopment } from '../../helpers'
 
 export default {
+  name: 'QasAppMenu',
+
   mixins: [screenMixin],
 
   props: {
@@ -43,35 +63,88 @@ export default {
       type: Array
     },
 
-    value: {
+    modelValue: {
       default: true,
       type: Boolean
+    },
+
+    title: {
+      default: '',
+      type: String
+    },
+
+    modules: {
+      default: () => [],
+      type: Array
     }
   },
 
+  emits: ['update:modelValue'],
+
   data () {
     return {
-      miniMode: false
+      miniMode: false,
+      module: '',
+      isMini: false
     }
   },
 
   computed: {
     activeItemClasses () {
-      return 'bg-primary text-primary-contrast'
+      return 'bg-primary-contrast text-primary text-weight-bold'
+    },
+
+    activeItemClassesSecondary () {
+      return 'text-primary bg-secondary-contrast'
     },
 
-    activeSecondaryItemClasses () {
-      return 'active bg-secondary-contrast text-primary-contrast'
+    defaultModules () {
+      if (!isLocalDevelopment()) return this.modules
+
+      const defaultModules = [...this.modules]
+      const { host, protocol } = window.location
+      const value = `${protocol}//${host}`
+
+      // if app is in development mode (local) it's added a default module
+      defaultModules.unshift({
+        label: `Localhost ${this.title ? `(${this.title})` : ''}`,
+        value
+      })
+
+      return defaultModules
     },
 
     model: {
       get () {
-        return this.value
+        return this.modelValue
       },
 
       set (value) {
-        return this.$emit('input', value)
+        return this.$emit('update:modelValue', value)
       }
+    },
+
+    currentModelOption () {
+      return this.defaultModules.find(module => module?.value === this.module)
+    },
+
+    displayModuleSection () {
+      return !this.isMini && this.defaultModules.length
+    },
+
+    currentModule () {
+      const hostname = window.location.hostname
+
+      return this.defaultModules.find(module => module?.value.includes(hostname))?.value
+    }
+  },
+
+  watch: {
+    currentModule: {
+      handler (value) {
+        this.module = value
+      },
+      immediate: true
     }
   },
 
@@ -81,29 +154,43 @@ export default {
     },
 
     shouldExpand ({ children, to }) {
-      return children?.length && this.$route.matched.some(item => item.path === to.path)
+      return children?.length && this.$route.matched.some(item => item?.path === to?.path)
     },
 
     beforeHide () {
-      if (this.$_isLarge) {
+      if (this.mx_isLarge) {
         this.model = true
         this.miniMode = !this.miniMode
       }
+    },
+
+    setMiniState (value) {
+      this.isMini = value
+    },
+
+    redirectHandler ({ value }) {
+      if (!value.includes(window.location.host)) {
+        window.location.href = value
+      }
+    },
+
+    toggleItem (index) {
+      const component = this.getComponent(index)
+
+      component?.to && this.isMini && component.toggle()
+    },
+
+    getComponent (index) {
+      return this.$refs[`item-${index}`]?.[0]
     }
   }
 }
 </script>
 
 <style lang="scss">
-.q-expansion-item {
-  .active .q-expansion-item__toggle-icon {
-    color: white !important;
-    opacity: 1;
-  }
-
-  .q-expansion-item__toggle-icon {
-    color: $primary;
-    opacity: 0.2;
+.qas-app-menu {
+  .q-expansion-item--expanded .q-item:not(&--active.q-item) {
+    background-color: $grey-1;
   }
 }
 </style>

package/src/components/avatar/QasAvatar.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-avatar class="text-bold" :class="classes" rounded v-bind="$attrs" v-on="$listeners">
+  <q-avatar class="text-bold" :class="avatarClass" rounded>
     <q-img v-if="hasImage" :alt="title" :ratio="1" spinner-color="primary" spinner-size="16px" :src="image" @error="onImageLoadedError" />
     <template v-else-if="hasTitle">{{ firstLetter }}</template>
     <q-icon v-else :name="icon" />
@@ -8,6 +8,8 @@
 
 <script>
 export default {
+  name: 'QasAvatar',
+
   props: {
     color: {
       default: 'primary',
@@ -46,8 +48,10 @@ export default {
   },
 
   computed: {
-    classes () {
-      if (this.hasImage) return
+    avatarClass () {
+      if (this.hasImage) {
+        return null
+      }
 
       const contrastColor = this.textColor ? this.textColor : this.contrastColor
 

package/src/components/box/QasBox.vue

@@ -1,21 +1,29 @@
 <template>
-  <div v-bind="$attrs" class="bg-white q-px-md q-py-lg rounded-borders" :class="boxClass" v-on="$listeners">
+  <div class="bg-white q-px-md q-py-lg rounded-borders" :class="boxClass">
     <slot />
   </div>
 </template>
 
 <script>
 export default {
+  name: 'QasBox',
+
   props: {
-    // TODO: Alterar para o outlined e unelevated.
-    formMode: {
+    outlined: {
+      type: Boolean
+    },
+
+    unelevated: {
       type: Boolean
     }
   },
 
   computed: {
     boxClass () {
-      return this.formMode ? 'border-primary-contrast' : 'shadow-primary'
+      return {
+        'border-primary-contrast': this.outlined,
+        'shadow-primary': !this.unelevated
+      }
     }
   }
 }