@bildvitta/quasar-ui-asteroid 2.16.0 → 3.0.0-alpha.2

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/QasActions.yml

@@ -0,0 +1,24 @@
+type: component
+
+meta:
+  desc: Área de ações para páginas que lidam com botões primários e secundários, como um formulário ou caixa de diálogo.
+
+props:
+  align:
+    desc: Alinhamento dos elementos.
+    default: end
+    type: String
+    examples: [start, end, between, around, center]
+
+  gutter:
+    desc: Espaçamento entre os elementos.
+    default: md
+    type: String
+    examples: ['xs', 'sm', 'md', 'lg', 'xl']
+
+slots:
+  primary:
+    desc: 'Slot para ação primaria (ex: botão de salvar), em telas menores que sm, se torna o primeiro elemento.'
+
+  secondary:
+    desc: 'Slot para ação secundaria (ex: botão de cancelar), em telas menores que sm, se torna o segundo elemento.'

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

@@ -1,5 +1,7 @@
 <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>
+    <span>{{ label }}</span>
+
     <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">
@@ -12,13 +14,22 @@
             </q-item-section>
           </q-item>
         </slot>
+
+        <qas-delete v-if="hasDelete" v-bind="deleteProps" class="text-negative" clickable tag="q-item" @success="onDeleteSuccess">
+          <q-item-section>
+            <div class="flex items-center justify-center q-gutter-x-sm text-bold">
+              <q-icon :name="deleteIcon" />
+              <div>{{ deleteLabel }}</div>
+            </div>
+          </q-item-section>
+        </qas-delete>
       </q-list>
     </q-menu>
   </qas-btn>
 </template>
 
 <script>
-import QasBtn from '../btn/QasBtn'
+import QasBtn from '../btn/QasBtn.vue'
 
 export default {
   name: 'QasActionsMenu',
@@ -28,8 +39,13 @@ export default {
   },
 
   props: {
+    icon: {
+      default: 'o_settings',
+      type: String
+    },
+
     label: {
-      default: 'Settings',
+      default: 'Configurações',
       type: String
     },
 
@@ -38,13 +54,27 @@ export default {
       type: Object
     },
 
-    hideLabel: {
-      type: Boolean
+    deleteLabel: {
+      type: String,
+      default: 'Excluir'
     },
 
-    icon: {
-      default: 'o_settings',
-      type: String
+    deleteIcon: {
+      type: String,
+      default: 'o_delete'
+    },
+
+    deleteProps: {
+      default: () => ({}),
+      type: Object
+    }
+  },
+
+  emits: ['delete-success'],
+
+  computed: {
+    hasDelete () {
+      return !!Object.keys(this.deleteProps).length
     }
   },
 
@@ -54,12 +84,10 @@ export default {
         const { handler, ...filtered } = item
         item.handler(filtered)
       }
-    }
-  },
+    },
 
-  computed: {
-    labelValue () {
-      return this.hideLabel ? '' : this.label
+    onDeleteSuccess () {
+      this.$emit('delete-success')
     }
   }
 }
@@ -70,7 +98,6 @@ export default {
   &__list {
     width: 265px;
     z-index: 1;
-
   }
 }
 </style>

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

@@ -0,0 +1,63 @@
+type: component
+
+meta:
+  desc: Componente para abrir um menu de ação a partir de um botão, muito utilizado em tela de edição.
+
+props:
+  icon:
+    desc: Ícone do botão.
+    default: o_settings
+    type: String
+    examples: [start, end, between, around, center]
+
+  label:
+    desc: Rotulo do botão.
+    default: Configurações
+    type: String
+
+  list:
+    desc: Lista de items que vão ser criados dentro do menu de ações.
+    default: '{}'
+    type: Object
+    examples: [
+      "{
+        delete: {
+          icon: 'o_visibility',
+          label: 'Visualizar',
+          handler: () => alert('handler ativado')
+        }
+      }"
+    ]
+
+  delete-label:
+    desc: Rótulo do botão de deletar.
+    default: Excluir
+    type: String
+
+  delete-icon:
+    desc: Ícone do botão de deletar.
+    default: o_delete
+    type: String
+
+  delete-props:
+    desc: Props para repassar para o componente "QasDelete", caso seja um objeto vazio, o componente não vai adicionar a opção de deletar por padrão.
+    default: {}
+    type: Object
+
+slots:
+  '[nome-da-chave]':
+    desc: 'Slot dinâmico gerado a partir das chaves dentro do objeto da prop "list"'
+    tag: Escopo
+    scope:
+      item:
+        desc: Escopo que retorna o item atual, valor depende do que foi passado na prop list.
+        default: '{}'
+        type: Object
+        examples: [
+          "
+          {
+            icon: 'o_delete',
+            label: 'Delete',
+            }
+          "
+        ]

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: {
+    modelValue: {
+      default: true,
+      type: Boolean
+    },
+
+    text: {
+      default: '',
+      type: String
+    },
+
+    color: {
+      type: String,
+      default: 'primary'
+    },
+
+    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/alert/QasAlert.yml

@@ -0,0 +1,33 @@
+type: component
+
+meta:
+  desc: Cria um seção para alertar sobre um conteúdo.
+
+props:
+  model-value:
+    desc: Model do componente, controla se o componente aparece ou não.
+    default: true
+    type: Boolean
+
+  title:
+    desc: Título do componente.
+    type: String
+
+  text:
+    desc: Texto do componente.
+    type: String
+
+slots:
+  default:
+    desc: 'Slot para acessar o conteúdo gerado pela prop "text"'
+
+  header:
+    desc: 'Slot para acessar o conteúdo gerado pela prop "title"'
+
+events:
+  '@update:model-value -> function(value)':
+    desc: Dispara quando o model-value altera, também usado para v-model.
+    params:
+      value:
+        desc: Novo valor do model.
+        type: Boolean

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

@@ -1,19 +1,18 @@
 <template>
-  <q-header v-bind="$attrs" class="bg-white shadow-primary" height-hint="70" v-on="$listeners">
-    <q-toolbar class="qas-toolbar" color="bg-white">
+  <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 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">
+          <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>
 
-      <!-- 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>
@@ -23,16 +22,16 @@
       <div class="items-center no-wrap q-gutter-md row">
         <slot name="tools" />
 
-        <div v-if="isAuth" class="cursor-pointer items-center q-mr-sm qas-toolbar__user rounded-borders row text-grey-9" :title="user.name || user.givenName">
+        <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="q-px-sm qas-toolbar__user-data qs-lh-lg text-caption">
+          <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>
 
-          <q-menu anchor="bottom end" content-class="shadow-primary" max-height="400px" :offset="[0, 5]" self="top end">
-            <div class="qas-toolbar__user-menu">
+          <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" />
@@ -60,8 +59,8 @@
 </template>
 
 <script>
-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',
@@ -98,6 +97,8 @@ export default {
     }
   },
 
+  emits: ['sign-out', 'toggle-menu'],
+
   data () {
     return {
       menuDrawer: true
@@ -157,12 +158,14 @@ 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;
   }

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

@@ -0,0 +1,51 @@
+type: component
+
+meta:
+  desc: Cria um seção para alertar sobre um conteúdo.
+
+props:
+  is-auth:
+    desc: Controla se mostra ou não o menu de usuário.
+    type: Boolean
+
+  title:
+    desc: Título do header, normalmente usado como título da aplicação.
+    type: String
+
+  notifications:
+    desc: Ícone de notificação que fica ao lado do menu de usuário.
+    type: Object
+    default: {}
+
+  user:
+    desc: Informações de usuário para ser usado no menu.
+    type: Object
+    default: {}
+    examples: [
+      "
+      {
+        photo: 'minha-img',
+        name: 'Eduardo Lima',
+        email: 'eduardolima@gmail.com'
+      }
+      "
+    ]
+
+slots:
+  user:
+    desc: Slot para acessar o menu de usuário
+    scope:
+      user:
+        desc: Informações de usuário para ser usado no menu, valor vai depender da prop "user".
+        type: Object
+        default: {}
+
+  tools:
+    desc: Slot para acessar o header após o elemento de notificações.
+
+events:
+  '@sign-out -> function()':
+    desc: Dispara quando o botão de "sair" é clicado.
+
+  '@toggle-menu -> function()':
+    desc: Dispara quando o botão de "hambúrguer" é clicado para abrir o menu lateral.

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

@@ -1,5 +1,5 @@
 <template>
-  <q-drawer v-model="model" class="qas-app-menu" :mini="miniMode" :width="230" v-on="$listeners" @before-hide="beforeHide" @mini-state="setMiniState">
+  <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">
@@ -7,7 +7,7 @@
             Você está no modulo:
           </div>
 
-          <qas-select v-model="module" :options="defaultModules" @input="redirectHandler(currentModelOption)" />
+          <qas-select v-model="module" :options="defaultModules" @update:model-value="redirectHandler(currentModelOption)" />
         </div>
 
         <q-list class="text-grey-9 text-weight-medium">
@@ -36,7 +36,8 @@
       </div>
 
       <div class="q-mx-md">
-        <img v-if="!isMini" alt="modular logo" class="block q-mb-md q-mx-auto" src="../../assets/logo-modular.svg">
+        <!-- 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>
@@ -52,17 +53,12 @@ export default {
   mixins: [screenMixin],
 
   props: {
-    itemClass: {
-      default: '',
-      type: [Array, Object, String]
-    },
-
     items: {
       default: () => [],
       type: Array
     },
 
-    value: {
+    modelValue: {
       default: true,
       type: Boolean
     },
@@ -78,6 +74,8 @@ export default {
     }
   },
 
+  emits: ['update:modelValue'],
+
   data () {
     return {
       miniMode: false,
@@ -113,11 +111,11 @@ export default {
 
     model: {
       get () {
-        return this.value
+        return this.modelValue
       },
 
       set (value) {
-        return this.$emit('input', value)
+        return this.$emit('update:modelValue', value)
       }
     },
 
@@ -155,7 +153,7 @@ export default {
     },
 
     beforeHide () {
-      if (this.$_isLarge) {
+      if (this.mx_isLarge) {
         this.model = true
         this.miniMode = !this.miniMode
       }

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

@@ -0,0 +1,32 @@
+type: component
+
+meta:
+  desc: Menu lateral.
+
+props:
+  model-value:
+    desc: Model do componente, controla quando o menu lateral é aberto e fechado.
+    default: true
+    type: Boolean
+
+  items:
+    desc: Itens do menu.
+    type: Array
+    default: []
+
+  title:
+    desc: Título que vai ficar no label do select de módulos.
+    type: String
+
+  modules:
+    desc: Lista de módulos que o usuário tem acesso para navegar.
+    type: Array
+    default: []
+
+events:
+  '@update:model-value -> function(value)':
+    desc: Dispara quando o model-value altera, também usado para v-model.
+    params:
+      value:
+        desc: Novo valor do model.
+        type: Boolean

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,9 +8,11 @@
 
 <script>
 export default {
+  name: 'QasAvatar',
+
   props: {
     color: {
-      default: 'primary',
+      default: '',
       type: String
     },
 
@@ -29,7 +31,7 @@ export default {
     },
 
     textColor: {
-      default: '',
+      default: 'primary',
       type: String
     },
 
@@ -46,20 +48,26 @@ export default {
   },
 
   computed: {
-    classes () {
-      if (this.hasImage) return
+    avatarClass () {
+      if (this.hasImage) {
+        return null
+      }
 
-      const contrastColor = this.textColor ? this.textColor : this.contrastColor
+      const contrastColor = this.color ? this.color : this.contrastColor
+      // const contrastColor = this.textColor ? this.textColor : this.contrastColor
 
       return [
         this.dark
-          ? `bg-${this.color} text-${contrastColor}`
-          : `bg-${contrastColor} text-${this.color}`
+          ? `bg-${this.textColor} text-${contrastColor}`
+          : `bg-${contrastColor} text-${this.textColor}`
+          // ? `bg-${this.color} text-${contrastColor}`
+          // : `bg-${contrastColor} text-${this.color}`
       ]
     },
 
     contrastColor () {
-      return `${this.color}-contrast`
+      return `${this.textColor}-contrast`
+      // return `${this.color}-contrast`
     },
 
     firstLetter () {