@bildvitta/quasar-ui-asteroid 3.0.0-beta.2 → 3.0.0-beta.20

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

@@ -1,9 +1,9 @@
 <template>
-  <q-header class="bg-white qas-app-bar shadow-primary" height-hint="70">
+  <q-header class="bg-white qas-app-bar shadow-14" 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" />
+      <qas-btn color="grey-7" dense flat icon="o_menu" round @click="toggleMenuDrawer" />
 
       <q-toolbar-title class="flex">
         <div class="cursor-pointer" @click="goToRoot">
@@ -14,30 +14,30 @@
       </q-toolbar-title>
 
       <div v-if="hasNotifications" class="q-mr-md">
-        <q-btn class="q-mr-md" dense icon="o_notifications" round unelevated>
+        <qas-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>
+        </qas-btn>
       </div>
 
       <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-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 v-if="hasUser" class="cursor-pointer items-center q-mr-sm qas-app-bar__user rounded-borders row text-grey-9" :title="userName">
+          <qas-avatar class="rounded-borders-left" color="white" dark :image="user.photo" rounded size="42px" text-color="primary" :title="userName" />
 
           <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">{{ userName }}</div>
             <div class="ellipsis text-bold">{{ user.email }}</div>
           </div>
 
-          <q-menu anchor="bottom end" class="shadow-primary" max-height="400px" :offset="[0, 5]" self="top end">
+          <q-menu anchor="bottom end" class="shadow-14" 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" />
+                  <qas-avatar :image="user.photo" size="145px" :title="userName" />
                 </button>
 
-                <div class="ellipsis q-mt-lg qs-lh-sm text-bold text-subtitle1">{{ user.name || user.givenName }}</div>
+                <div class="ellipsis q-mt-lg qs-lh-sm text-bold text-subtitle1">{{ userName }}</div>
                 <div class="ellipsis q-mt-xs text-caption">{{ user.email }}</div>
 
                 <div class="q-mt-sm">
@@ -76,10 +76,6 @@ export default {
       type: String
     },
 
-    isAuth: {
-      type: Boolean
-    },
-
     title: {
       type: String,
       default: ''
@@ -134,6 +130,14 @@ export default {
 
     showTitle () {
       return this.title && !this.brand
+    },
+
+    hasUser () {
+      return !!Object.keys(this.user).length
+    },
+
+    userName () {
+      return this.user.name || this.user.givenName
     }
   },
 

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

@@ -4,19 +4,15 @@ 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: {}
 
+  title:
+    desc: Título do header, normalmente usado como título da aplicação.
+    type: String
+
   user:
     desc: Informações de usuário para ser usado no menu.
     type: Object

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

@@ -35,23 +35,19 @@
         </q-list>
       </div>
 
-      <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 v-if="brandMenu" class="q-mx-md">
+        <img v-if="!isMini" :alt="title" class="block q-mb-md q-mx-auto" :src="brandMenu">
       </div>
     </div>
   </q-drawer>
 </template>
 
 <script>
-import { screenMixin } from '../../mixins'
 import { isLocalDevelopment } from '../../helpers'
 
 export default {
   name: 'QasAppMenu',
 
-  mixins: [screenMixin],
-
   props: {
     items: {
       default: () => [],
@@ -68,6 +64,11 @@ export default {
       type: String
     },
 
+    brandMenu: {
+      default: '',
+      type: String
+    },
+
     modules: {
       default: () => [],
       type: Array
@@ -153,7 +154,7 @@ export default {
     },
 
     beforeHide () {
-      if (this.mx_isLarge) {
+      if (this.$qas.screen.isLarge) {
         this.model = true
         this.miniMode = !this.miniMode
       }

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

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

package/src/components/avatar/QasAvatar.vue

@@ -54,20 +54,16 @@ export default {
       }
 
       const contrastColor = this.color ? this.color : this.contrastColor
-      // const contrastColor = this.textColor ? this.textColor : this.contrastColor
 
       return [
         this.dark
           ? `bg-${this.textColor} text-${contrastColor}`
           : `bg-${contrastColor} text-${this.textColor}`
-          // ? `bg-${this.color} text-${contrastColor}`
-          // : `bg-${contrastColor} text-${this.color}`
       ]
     },
 
     contrastColor () {
       return `${this.textColor}-contrast`
-      // return `${this.color}-contrast`
     },
 
     firstLetter () {

package/src/components/box/QasBox.vue

@@ -22,7 +22,7 @@ export default {
     boxClass () {
       return {
         'border-primary-contrast': this.outlined,
-        'shadow-primary': !this.unelevated
+        'shadow-14': !this.unelevated
       }
     }
   }

package/src/components/btn/QasBtn.vue

@@ -1,6 +1,6 @@
 <template>
   <q-btn color="primary" no-caps unelevated v-bind="attributes">
-    <slot v-if="showLabel" />
+    <slot />
 
     <template v-for="(_, name) in slots" #[name]="context">
       <slot :name="name" v-bind="context || {}" />
@@ -9,35 +9,31 @@
 </template>
 
 <script>
-import { screenMixin } from '../../mixins'
-
 export default {
   name: 'QasBtn',
 
-  mixins: [screenMixin],
-
   props: {
-    hideLabelOnSmallScreen: {
+    useLabelOnSmallScreen: {
+      default: true,
       type: Boolean
+    },
+
+    label: {
+      default: '',
+      type: String
     }
   },
 
   computed: {
     attributes () {
-      const { label, ...attributes } = this.$attrs
-
       return {
-        ...(this.showLabel && { label }),
-        ...attributes
+        ...(this.showLabel && { label: this.label }),
+        ...this.$attrs
       }
     },
 
-    hasLabel () {
-      return !!(this.$attrs.label || this.$slots.default)
-    },
-
     showLabel () {
-      return this.hasLabel && !(this.hideLabelOnSmallScreen && this.mx_isSmall)
+      return this.useLabelOnSmallScreen || !this.$qas.screen.isSmall
     },
 
     slots () {

package/src/components/btn/QasBtn.yml

@@ -7,7 +7,11 @@ meta:
   desc: O mesmo botão do Quasar (QBtn), mas com o nosso estilo, tem acesso a todas propriedades do componente do quasar. Tem a função de criar gatilhos para ações. Eles podem ser utilizados isoladamente ou ​​como parte de outros componentes de padrões maiores, como formulários, caixas de diálogo e feedbacks.
 
 props:
-  hide-label-on-small-screen:
-    desc: Esconde o rótulo (label) do botão quando o tamanho da tela for pequeno.
+  use-label-on-small-screen:
+    desc: Esconde o rótulo (label) do botão quando o tamanho da tela for pequeno (esta propriedade só funciona se o "rotulo") for passado via propriedade "label".
+    default: true
     type: Boolean
-    default: 'false'
+
+  label:
+    desc: Rótulo do botão.
+    type: String

package/src/components/card/QasCard.vue

@@ -8,7 +8,7 @@
               <qas-btn color="white" dense flat :icon="getNavigationIcon(active, btnProps)" round size="sm" @click="onClick" />
             </template>
 
-            <q-carousel-slide v-for="(item, index) in imagesList" :key="index" class="bg-no-repeat" :class="bgImagePositionClass" :img-src="item" :name="index" />
+            <q-carousel-slide v-for="(item, index) in imagesList" :key="index" class="bg-no-repeat" :class="imagePositionClass" :img-src="item" :name="index" />
           </q-carousel>
 
           <div class="absolute-top flex items-center q-pa-md">
@@ -35,15 +35,11 @@ export default {
   name: 'QasCard',
 
   props: {
-    bgImagePosition: {
+    imagePosition: {
       type: String,
       default: 'center'
     },
 
-    formMode: {
-      type: Boolean
-    },
-
     gutter: {
       type: String,
       default: 'sm'
@@ -54,6 +50,14 @@ export default {
       type: Array
     },
 
+    outlined: {
+      type: Boolean
+    },
+
+    unelevated: {
+      type: Boolean
+    },
+
     useHeader: {
       type: Boolean
     }
@@ -66,12 +70,17 @@ export default {
   },
 
   computed: {
-    bgImagePositionClass () {
-      return `bg-position-${this.bgImagePosition}`
+    imagePositionClass () {
+      return `bg-position-${this.imagePosition}`
     },
 
     cardClasses () {
-      return this.formMode ? 'bg-white border-primary no-shadow' : 'box-shadow-1'
+      return {
+        'shadow-14': !this.unelevated,
+        'border-primary': this.outlined,
+        'no-shadow': this.outlined,
+        'bg-white': this.outlined
+      }
     },
 
     gutterClass () {

package/src/components/card/QasCard.yml

@@ -4,15 +4,6 @@ meta:
   desc: Componente de card.
 
 props:
-  bg-image-position:
-    desc: Posição da imagem "background-position".
-    default: center
-    type: String
-
-  form-mode:
-    desc: Modo de formulário, altera o estilo quando está em uma pagina de formulário.
-    type: Boolean
-
   gutter:
     desc: Espaçamento dentro <q-card-section /> onde fica o slot "default".
     default: sm
@@ -24,13 +15,26 @@ props:
     default: []
     type: Array
 
+  image-position:
+    desc: Posição da imagem "background-position".
+    default: center
+    type: String
+
+  outlined:
+    desc: Insere uma borda sólida em volta do componente.
+    type: Boolean
+
+  unelevated:
+    desc: Remove a sombra do componente.
+    type: Boolean
+
   use-header:
     desc: Controla se vai ter ou não o header com carousel.
     type: Boolean
 
 slots:
-  header:
-    desc: Slot para acessar área no lugar do "<q-carousel />".
+  actions:
+    desc: Slot para acessar conteúdo de ações como botão.
 
   carousel-header:
     desc: Slot para acessar usar de header do "<q-carousel />".
@@ -38,5 +42,5 @@ slots:
   default:
     desc: Slot para acessar conteúdo dentro do "<q-card-section />".
 
-  actions:
-    desc: Slot para acessar conteúdo de ações como botão.
+  header:
+    desc: Slot para acessar área no lugar do "<q-carousel />".

package/src/components/checkbox-group/QasCheckboxGroup.yml

@@ -4,10 +4,10 @@ meta:
   desc: Componente para gerar dinamicamente checkbox agrupados.
 
 props:
-  options:
-    desc: Opções para gerar os checkbox.
-    default: []
-    type: Array
+  inline:
+    desc: Controla se o componente vai aparece em linha ou em bloco.
+    default: true
+    type: Boolean
 
   model-value:
     desc: Model do componente, usado para v-model.
@@ -16,10 +16,11 @@ props:
     examples: [v-model"value"]
     model: true
 
-  inline:
-    desc: Controla se o componente vai aparece em linha ou em bloco.
-    default: true
-    type: Boolean
+  options:
+    desc: Opções para gerar os checkbox.
+    default: []
+    type: Array
+
 
 events:
   '@update:model-value -> function(value)':

package/src/components/copy/QasCopy.vue

@@ -2,7 +2,7 @@
   <span>
     <slot>{{ text }}</slot>
 
-    <qas-btn class="q-ml-xs" color="grey-5" flat :icon="icon" :loading="isLoading" round :size="size" @click="copy">
+    <qas-btn class="q-ml-xs" color="grey-7" flat :icon="icon" :loading="isLoading" round :size="size" @click="copy">
       <q-tooltip>Copiar</q-tooltip>
     </qas-btn>
   </span>

package/src/components/copy/QasCopy.yml

@@ -9,12 +9,13 @@ props:
     type: String
     default: o_file_copy
 
+  text:
+    desc: Texto a ser copiado.
+    type: String
+
   size:
     desc: Tamanho do botão.
     type: String
     default: xs
     examples: [xs, sm, md, lg, xl]
 
-  text:
-    desc: Texto a ser copiado.
-    type: String

package/src/components/date-time-input/QasDateTimeInput.vue

@@ -1,21 +1,19 @@
 <template>
-  <div>
-    <qas-input ref="input" v-bind="attributes" v-model="currentValue" :unmasked-value="false" @update:model-value="updateModelValue">
-      <template #append>
-        <q-icon v-if="!timeOnly" class="cursor-pointer" name="o_event">
-          <q-popup-proxy ref="dateProxy" transition-hide="scale" transition-show="scale">
-            <q-date v-model="currentValue" v-bind="dateProps" :mask="maskDate" @update:model-value="updateModelValue" />
-          </q-popup-proxy>
-        </q-icon>
-
-        <q-icon v-if="!dateOnly" class="cursor-pointer q-ml-md" name="o_access_time">
-          <q-popup-proxy ref="timeProxy" transition-hide="scale" transition-show="scale">
-            <q-time v-model="currentValue" v-bind="timeProps" format24h :mask="maskDate" @update:model-value="updateModelValue" />
-          </q-popup-proxy>
-        </q-icon>
-      </template>
-    </qas-input>
-  </div>
+  <qas-input ref="input" v-bind="attributes" v-model="currentValue" :unmasked-value="false" @update:model-value="updateModelValue">
+    <template #append>
+      <q-icon v-if="!useTimeOnly" class="cursor-pointer" name="o_event">
+        <q-popup-proxy ref="dateProxy" transition-hide="scale" transition-show="scale">
+          <q-date v-model="currentValue" v-bind="dateProps" :mask="maskDate" @update:model-value="updateModelValue" />
+        </q-popup-proxy>
+      </q-icon>
+
+      <q-icon v-if="!useDateOnly" class="cursor-pointer q-ml-md" name="o_access_time">
+        <q-popup-proxy ref="timeProxy" transition-hide="scale" transition-show="scale">
+          <q-time v-model="currentValue" v-bind="timeProps" format24h :mask="maskDate" @update:model-value="updateModelValue" />
+        </q-popup-proxy>
+      </q-icon>
+    </template>
+  </qas-input>
 </template>
 
 <script>
@@ -33,33 +31,33 @@ export default {
       type: String
     },
 
-    dateOnly: {
-      type: Boolean
-    },
-
     dateProps: {
       default: () => ({}),
       type: Object
     },
 
-    gmt: {
-      type: Boolean
-    },
-
     timeMask: {
       default: 'HH:mm',
       type: String
     },
 
-    timeOnly: {
-      type: Boolean
-    },
-
     timeProps: {
       default: () => ({}),
       type: Object
     },
 
+    useIso: {
+      type: Boolean
+    },
+
+    useTimeOnly: {
+      type: Boolean
+    },
+
+    useDateOnly: {
+      type: Boolean
+    },
+
     modelValue: {
       default: '',
       type: String
@@ -96,16 +94,16 @@ export default {
     maskDate () {
       const mask = []
 
-      if (!this.timeOnly) { mask.push(this.dateMask) }
-      if (!this.dateOnly) { mask.push(this.timeMask) }
+      if (!this.useTimeOnly) { mask.push(this.dateMask) }
+      if (!this.useDateOnly) { mask.push(this.timeMask) }
 
       return mask.join(' ')
     }
   },
 
   watch: {
-    value (current, original) {
-      if (!current || this.timeOnly) {
+    modelValue (current, original) {
+      if (!current || this.useTimeOnly) {
         this.currentValue = current
         return
       }
@@ -131,18 +129,18 @@ export default {
 
     updateModelValue (value) {
       this.currentValue = value
-      const valueLength = value.replace(/_/g, '').length
+      const valueLength = value?.replace?.(/_/g, '')?.length
 
       if (value === '' || valueLength === this.mask.length) {
-        this.lastValue = this.timeOnly ? value : this.toISOString(value)
+        this.lastValue = this.useTimeOnly ? value : this.toISOString(value)
         this.$emit('update:modelValue', this.lastValue)
       }
 
-      if (this.dateOnly) {
+      if (this.useDateOnly) {
         this.$refs.dateProxy.hide()
       }
 
-      if (this.timeOnly) {
+      if (this.useTimeOnly) {
         this.$refs.timeProxy.hide()
       }
     },
@@ -152,11 +150,11 @@ export default {
         return ''
       }
 
-      if (this.dateOnly && !this.gmt) {
+      if (this.useDateOnly && !this.useIso) {
         return dateFn(date.extractDate(value, this.maskDate), 'yyyy-MM-dd')
       }
 
-      if (this.timeOnly && !this.gmt) {
+      if (this.useTimeOnly && !this.useIso) {
         return date.extractDate(value, 'HH:MM')
       }
 
@@ -164,14 +162,14 @@ export default {
     },
 
     toMask (value) {
-      if (!value || this.timeOnly) {
+      if (!value || this.useTimeOnly) {
         return value || ''
       }
 
       const newDate = new Date(value).toISOString()
 
       return date.formatDate(
-        this.dateOnly ? newDate.slice(0, 23) : newDate,
+        this.useDateOnly ? newDate.slice(0, 23) : newDate,
         this.maskDate
       )
     }

package/src/components/date-time-input/QasDateTimeInput.yml

@@ -12,38 +12,38 @@ props:
     default: DD/MM/YYYY
     type: String
 
-  date-only:
-    desc: Habilita o componente para usar somente data.
-    type: Boolean
-
   date-props:
     desc: Propriedades do QDate (https://quasar.dev/vue-components/date#introduction).
     default: {}
     type: Object
 
-  gmt:
-    desc: Utilizado para se usar junto da prop "date-only" ou "time-only", caso "gmt" for "true", o model sempre vai ser retornado no padrão ISO 8601, independente ser apenas um campo somente de data ou hora.
-    type: Boolean
+  model-value:
+    desc: Model do componente, usado para v-model.
+    default: ''
+    type: String
+    model: true
 
   time-mask:
     desc: Máscara do componente de input de hora.
     default: HH:mm
     type: String
 
-  time-only:
-    desc: Habilita o componente para usar somente hora.
-    type: Boolean
-
   time-props:
     desc: Propriedades do QTime (https://quasar.dev/vue-components/time#introduction).
     default: {}
     type: Object
 
-  model-value:
-    desc: Model do componente, usado para v-model.
-    default: ''
-    type: String
-    model: true
+  use-time-only:
+    desc: Habilita o componente para usar somente hora.
+    type: Boolean
+
+  use-date-only:
+    desc: Habilita o componente para usar somente data.
+    type: Boolean
+
+  use-iso:
+    desc: Utilizado para se usar junto da prop "date-only" ou "time-only", caso "useIso" for "true", o model sempre vai ser retornado no padrão ISO 8601, independente ser apenas um campo somente de data ou hora.
+    type: Boolean
 
 events:
   '@update:model-value -> function (value)':