@bildvitta/quasar-ui-asteroid 3.0.0-beta.7 → 3.0.0

package/dist/vetur/asteroid-tags.json

@@ -27,7 +27,6 @@
   },
   "qas-app-bar": {
     "attributes": [
-      "is-auth",
       "notifications",
       "title",
       "user"
@@ -72,17 +71,18 @@
   },
   "qas-btn": {
     "attributes": [
-      "hide-label-on-small-screen",
+      "use-label-on-small-screen",
       "label"
     ],
     "description": "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."
   },
   "qas-card": {
     "attributes": [
-      "bg-image-position",
-      "form-mode",
       "gutter",
       "images",
+      "image-position",
+      "outlined",
+      "unelevated",
       "use-header"
     ],
     "description": "Componente de card."
@@ -106,13 +106,13 @@
   "qas-date-time-input": {
     "attributes": [
       "date-mask",
-      "date-only",
       "date-props",
-      "gmt",
       "model-value",
       "time-mask",
-      "time-only",
-      "time-props"
+      "time-props",
+      "use-time-only",
+      "use-date-only",
+      "use-iso"
     ],
     "description": "Componente de input data e hora, implementa o \"QasInput\"."
   },
@@ -149,8 +149,9 @@
       "model-value",
       "ok",
       "persistent",
-      "use-close-icon",
-      "use-form"
+      "use-close-button",
+      "use-form",
+      "use-validation-at-once"
     ],
     "description": "Componente de dialog."
   },
@@ -165,11 +166,11 @@
   "qas-filters": {
     "attributes": [
       "entity",
-      "force-refetch",
       "search-placeholder",
       "url",
       "use-badges",
       "use-filter-button",
+      "use-force-refetch",
       "use-search-on-type",
       "use-search"
     ],
@@ -181,6 +182,8 @@
       "error",
       "fields-props",
       "fields",
+      "fieldset",
+      "fieldset-gutter",
       "gutter",
       "model-value",
       "order"
@@ -189,10 +192,11 @@
   },
   "qas-form-view": {
     "attributes": [
-      "cancel-button",
+      "before-fetch",
+      "before-submit",
+      "cancel-button-label",
       "cancel-route",
       "custom-id",
-      "dialog",
       "disable",
       "entity",
       "errors",
@@ -202,12 +206,15 @@
       "metadata",
       "mode",
       "model-value",
-      "read-only",
       "route",
-      "show-dialog-on-unsaved-changes",
-      "submit-button",
+      "submit-button-label",
       "submitting",
-      "url"
+      "url",
+      "use-actions",
+      "use-boundary",
+      "use-cancel-button",
+      "use-dialog-on-unsaved-changes",
+      "use-submit-button"
     ],
     "description": "Componente para C.R.U.D. responsável pela pela criação (Create) e edição (Update)."
   },
@@ -232,8 +239,8 @@
       "fields",
       "gutter",
       "header-class",
-      "hide-empty-result",
-      "result"
+      "result",
+      "use-empty-result"
     ],
     "description": "Componente para criação de textos dinâmicos."
   },
@@ -243,7 +250,7 @@
       "error",
       "model-value",
       "outlined",
-      "remove-error-on-type",
+      "use-remove-error-on-type",
       "unmasked-value"
     ],
     "description": "Componente para input que implementa o \"QInput\" repassando propriedades, slots e eventos."
@@ -268,17 +275,14 @@
     "attributes": [
       "icon-props",
       "list",
-      "redirect-key",
-      "redirect-on-icon",
-      "to",
+      "use-clickable-item",
       "use-section-actions"
     ],
     "description": "Componente para listagem."
   },
   "qas-list-view": {
     "attributes": [
-      "dialog",
-      "disable-refresh",
+      "before-fetch",
       "entity",
       "errors",
       "fetching",
@@ -287,7 +291,10 @@
       "metadata",
       "results",
       "url",
-      "use-filter"
+      "use-boundary",
+      "use-filter",
+      "use-refresh",
+      "use-results-area-only"
     ],
     "description": "Componente para C.R.U.D. responsável pela parte de listagem (Read)."
   },
@@ -303,14 +310,15 @@
   "qas-nested-fields": {
     "attributes": [
       "add-input-label",
-      "btn-destroy-props",
-      "btn-duplicate-props",
+      "button-destroy-props",
+      "button-duplicate-props",
       "destroy-key",
       "errors",
       "field",
       "fields-props",
       "form-columns",
       "form-gutter",
+      "identifier-item-key",
       "model-value",
       "row-label",
       "row-object",
@@ -326,13 +334,13 @@
   },
   "qas-numeric-input": {
     "attributes": [
-      "allow-negative",
-      "allow-positive",
       "autonumeric-props",
       "decimal-places",
       "mode",
       "model-value",
-      "preset"
+      "preset",
+      "use-negative",
+      "use-positive"
     ],
     "description": "Componente de input para decimal, inteiro, dinheiro e porcentagem."
   },
@@ -399,13 +407,19 @@
   "qas-search-box": {
     "attributes": [
       "empty-list-height",
+      "empty-result-text",
+      "entity",
+      "fetching",
       "fuse-options",
       "height",
+      "lazy-loading-props",
       "list",
       "model-value",
+      "name",
       "placeholder",
       "results",
-      "use-empty-slot"
+      "use-empty-slot",
+      "use-lazy-loading"
     ],
     "description": "Componente para pesquisa utilizando Fuse.js."
   },
@@ -415,21 +429,24 @@
       "fuse-options",
       "list",
       "model-value",
-      "param-key",
-      "redirect-key",
-      "to"
+      "use-clickable-label"
     ],
     "description": "Componente para selecionar dentro de uma lista com pesquisa utilizando o `QasSearchBox`."
   },
   "qas-select": {
     "attributes": [
+      "entity",
+      "fetching",
       "fuse-options",
       "label-key",
+      "lazy-loading-props",
       "model-value",
+      "name",
       "no-option-label",
       "options",
-      "searchable",
-      "value-key"
+      "value-key",
+      "use-search",
+      "use-lazy-loading"
     ],
     "description": "Componente para select que implementa o \"QSelect\" repassando propriedades, slots e eventos."
   },
@@ -437,7 +454,7 @@
     "attributes": [
       "empty",
       "height",
-      "signature_options",
+      "signature-options",
       "type"
     ],
     "description": "Componente para assinatura que gera uma imagem."
@@ -455,15 +472,16 @@
   },
   "qas-single-view": {
     "attributes": [
+      "before-fetch",
       "custom-id",
-      "dialog",
       "entity",
       "errors",
       "fields",
       "fetching",
       "metadata",
       "result",
-      "url"
+      "url",
+      "use-boundary"
     ],
     "description": "Componente para C.R.U.D. responsável pela visualização (Read) ou conhecido também como \"show\"."
   },
@@ -536,7 +554,8 @@
       "readonly",
       "size-limit",
       "use-resize",
-      "uploading"
+      "uploading",
+      "useObjectModel"
     ],
     "description": "Componente para upload com auto redimensionamento que implementa o \"QField\" e \"QUploader\"."
   }

package/package.json

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

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

@@ -1,5 +1,5 @@
 <template>
-  <qas-btn class="qas-actions-menu" color="primary" hide-label-on-small-screen :icon="icon" :label="label" outline padding="md">
+  <qas-btn class="qas-actions-menu" color="primary" :icon="icon" :label="label" outline padding="md" use-label-on-small-screen>
     <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">
@@ -13,7 +13,7 @@
           </q-item>
         </slot>
 
-        <qas-delete v-if="hasDelete" v-bind="deleteProps" class="text-negative" clickable tag="q-item" @success="onDeleteSuccess">
+        <qas-delete v-if="hasDelete" v-bind="deleteProps" class="text-negative" clickable tag="q-item">
           <q-item-section>
             <div class="flex items-center justify-center q-gutter-x-sm">
               <q-icon :name="deleteIcon" size="sm" />
@@ -68,8 +68,6 @@ export default {
     }
   },
 
-  emits: ['delete-success'],
-
   computed: {
     hasDelete () {
       return !!Object.keys(this.deleteProps).length
@@ -82,10 +80,6 @@ export default {
         const { handler, ...filtered } = item
         item.handler(filtered)
       }
-    },
-
-    onDeleteSuccess () {
-      this.$emit('delete-success')
     }
   }
 }

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

@@ -3,7 +3,7 @@
     <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,19 +14,19 @@
       </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>
 
@@ -34,10 +34,10 @@
             <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,10 +4,6 @@ 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
-
   notifications:
     desc: Ícone de notificação que fica ao lado do menu de usuário.
     type: Object

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/btn/QasBtn.vue

@@ -13,13 +13,14 @@ export default {
   name: 'QasBtn',
 
   props: {
-    hideLabelOnSmallScreen: {
+    useLabelOnSmallScreen: {
+      default: true,
       type: Boolean
     },
 
     label: {
-      type: String,
-      default: ''
+      default: '',
+      type: String
     }
   },
 
@@ -31,12 +32,8 @@ export default {
       }
     },
 
-    hasLabel () {
-      return !!this.label
-    },
-
     showLabel () {
-      return this.hasLabel && !(this.hideLabelOnSmallScreen && this.$qas.screen.isSmall)
+      return this.useLabelOnSmallScreen || !this.$qas.screen.isSmall
     },
 
     slots () {

package/src/components/btn/QasBtn.yml

@@ -7,8 +7,9 @@ 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:
+  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
 
   label:

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' : 'shadow-14'
+      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,6 +15,19 @@ 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