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

package/dist/vetur/asteroid-attributes.json

@@ -123,6 +123,10 @@
     "description": "Esconde o rótulo (label) do botão quando o tamanho da tela for pequeno.",
     "type": "boolean"
   },
+  "qas-btn/label": {
+    "description": "Rótulo do botão.",
+    "type": "string"
+  },
   "qas-card/bg-image-position": {
     "description": "Posição da imagem \"background-position\".",
     "type": "string"

package/dist/vetur/asteroid-tags.json

@@ -71,7 +71,8 @@
   },
   "qas-btn": {
     "attributes": [
-      "hide-label-on-small-screen"
+      "hide-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."
   },

package/package.json

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

package/src/components/actions/QasActions.vue

@@ -11,13 +11,9 @@
 </template>
 
 <script>
-import { screenMixin } from '../../mixins'
-
 export default {
   name: 'QasActions',
 
-  mixins: [screenMixin],
-
   props: {
     align: {
       default: 'end',
@@ -37,7 +33,7 @@ export default {
       return [
         `justify-${this.align}`,
         `q-col-gutter-${this.gutter}`,
-        this.mx_isSmall ? 'column reverse' : 'row'
+        this.$qas.screen.isSmall ? 'column reverse' : 'row'
       ]
     }
   }

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

@@ -44,14 +44,11 @@
 </template>
 
 <script>
-import { screenMixin } from '../../mixins'
 import { isLocalDevelopment } from '../../helpers'
 
 export default {
   name: 'QasAppMenu',
 
-  mixins: [screenMixin],
-
   props: {
     items: {
       default: () => [],
@@ -153,7 +150,7 @@ export default {
     },
 
     beforeHide () {
-      if (this.mx_isLarge) {
+      if (this.$qas.screen.isLarge) {
         this.model = true
         this.miniMode = !this.miniMode
       }

package/src/components/btn/QasBtn.vue

@@ -9,35 +9,34 @@
 </template>
 
 <script>
-import { screenMixin } from '../../mixins'
-
 export default {
   name: 'QasBtn',
 
-  mixins: [screenMixin],
-
   props: {
     hideLabelOnSmallScreen: {
       type: Boolean
+    },
+
+    label: {
+      type: String,
+      default: ''
     }
   },
 
   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)
+      return !!(this.label || this.$slots.default)
     },
 
     showLabel () {
-      return this.hasLabel && !(this.hideLabelOnSmallScreen && this.mx_isSmall)
+      return this.hasLabel && !(this.hideLabelOnSmallScreen && this.$qas.screen.isSmall)
     },
 
     slots () {

package/src/components/btn/QasBtn.yml

@@ -10,4 +10,7 @@ props:
   hide-label-on-small-screen:
     desc: Esconde o rótulo (label) do botão quando o tamanho da tela for pequeno.
     type: Boolean
-    default: 'false'
+
+  label:
+    desc: Rótulo do botão.
+    type: String

package/src/components/dialog/QasDialog.vue

@@ -39,8 +39,6 @@
 import QasBtn from '../btn/QasBtn.vue'
 import QasActions from '../actions/QasActions.vue'
 
-import screenMixin from '../../mixins/screen'
-
 export default {
   name: 'QasDialog',
 
@@ -49,8 +47,6 @@ export default {
     QasActions
   },
 
-  mixins: [screenMixin],
-
   props: {
     actionsProps: {
       default: () => ({}),
@@ -133,8 +129,8 @@ export default {
 
     style () {
       return {
-        maxWidth: this.maxWidth || (this.mx_isSmall ? '' : '600px'),
-        minWidth: this.minWidth || (this.mx_isSmall ? '' : '400px')
+        maxWidth: this.maxWidth || (this.$qas.screen.isSmall ? '' : '600px'),
+        minWidth: this.minWidth || (this.$qas.screen.isSmall ? '' : '400px')
       }
     },
 

package/src/components/form-view/QasFormView.vue

@@ -42,7 +42,7 @@ import { NotifyError, NotifySuccess } from '../../plugins'
 import QasBtn from '../btn/QasBtn.vue'
 import QasDialog from '../dialog/QasDialog.vue'
 
-import { viewMixin, screenMixin } from '../../mixins'
+import { viewMixin } from '../../mixins'
 
 export default {
   name: 'QasFormView',
@@ -52,7 +52,7 @@ export default {
     QasDialog
   },
 
-  mixins: [viewMixin, screenMixin],
+  mixins: [viewMixin],
 
   props: {
     cancelButton: {
@@ -146,7 +146,7 @@ export default {
 
   computed: {
     cancelButtonClass () {
-      return this.mx_isSmall && 'order-last'
+      return this.$qas.screen.isSmall && 'order-last'
     },
 
     fetchURL () {
@@ -174,7 +174,7 @@ export default {
     },
 
     saveButtonClass () {
-      return this.mx_isSmall && 'order-first'
+      return this.$qas.screen.isSmall && 'order-first'
     },
 
     isCancelButtonDisabled () {

package/src/components/gallery/QasGallery.vue

@@ -17,9 +17,9 @@
           </div>
         </template>
         <template #description>
-          <q-carousel v-model="imageIndex" animated :arrows="!mx_isSmall" control-text-color="primary" :fullscreen="mx_isSmall" :height="carouselImageHeight" :next-icon="carouselNextIcon" :prev-icon="carouselPreviousIcon" swipeable :thumbnails="showThumbnails">
+          <q-carousel v-model="imageIndex" animated :arrows="!$qas.screen.isSmall" control-text-color="primary" :fullscreen="$qas.screen.isSmall" :height="carouselImageHeight" :next-icon="carouselNextIcon" :prev-icon="carouselPreviousIcon" swipeable :thumbnails="showThumbnails">
             <q-carousel-slide v-for="(image, index) in clonedImages" :key="index" class="bg-no-repeat bg-size-contain" :img-src="image" :name="index">
-              <div v-if="mx_isSmall" class="full-width justify-end row">
+              <div v-if="$qas.screen.isSmall" class="full-width justify-end row">
                 <qas-btn dense flat icon="o_close" @click="toggleCarouselDialog" />
               </div>
             </q-carousel-slide>
@@ -31,13 +31,9 @@
 </template>
 
 <script>
-import screenMixin from '../../mixins/screen'
-
 export default {
   name: 'QasGallery',
 
-  mixins: [screenMixin],
-
   props: {
     carouselNextIcon: {
       type: String,
@@ -94,13 +90,13 @@ export default {
         return this.height || 'auto'
       }
 
-      return this.mx_isSmall ? '90px' : '120px'
+      return this.$qas.screen.isSmall ? '90px' : '120px'
     },
 
     galleryColumnsClasses () {
       if (this.isSingleImage) return 'col-12'
 
-      return this.mx_isSmall ? 'col-6' : 'col-2'
+      return this.$qas.screen.isSmall ? 'col-6' : 'col-2'
     },
 
     hideShowMore () {

package/src/components/profile/QasProfile.vue

@@ -25,7 +25,6 @@
 
 <script>
 import filterObject from '../../helpers/filter-object'
-import screenMixin from '../../mixins/screen'
 
 import QasAvatar from '../avatar/QasAvatar.vue'
 import QasBox from '../box/QasBox.vue'
@@ -40,8 +39,6 @@ export default {
     QasGridGenerator
   },
 
-  mixins: [screenMixin],
-
   props: {
     columns: {
       type: Object,
@@ -82,7 +79,7 @@ export default {
 
   computed: {
     directionClasses () {
-      return this.mx_untilMedium ? 'col' : 'row items-center'
+      return this.$qas.screen.untilMedium ? 'col' : 'row items-center'
     },
 
     userAvatarImage () {
@@ -90,7 +87,7 @@ export default {
     },
 
     avatarSize () {
-      return this.mx_isSmall ? '145px' : '188px'
+      return this.$qas.screen.isSmall ? '145px' : '188px'
     }
   },
 

package/src/components/select-list/QasSelectList.vue

@@ -24,7 +24,6 @@
 
 <script>
 import { sortBy } from 'lodash-es'
-import { screenMixin } from '../../mixins'
 
 import QasBtn from '../btn/QasBtn.vue'
 import QasSearchBox from '../search-box/QasSearchBox.vue'
@@ -37,8 +36,6 @@ export default {
     QasSearchBox
   },
 
-  mixins: [screenMixin],
-
   props: {
     deleteOnly: {
       type: Boolean
@@ -144,9 +141,9 @@ export default {
       const isSelected = this.values.includes(value)
 
       return {
-        dense: this.mx_isSmall,
+        dense: this.$qas.screen.isSmall,
         hideLabelOnSmallScreen: true,
-        icon: !this.mx_isSmall ? undefined : isSelected ? 'o_close' : 'o_add',
+        icon: !this.$qas.screen.isSmall ? undefined : isSelected ? 'o_close' : 'o_add',
         label: isSelected ? 'Remover' : 'Adicionar',
         outline: isSelected,
         size: 'sm'

package/src/components/signature-uploader/QasSignatureUploader.vue

@@ -38,7 +38,6 @@
 import QasDialog from '../dialog/QasDialog.vue'
 import QasUploader from '../uploader/QasUploader.vue'
 import QasSignaturePad from '../signature-pad/QasSignaturePad.vue'
-import { screenMixin } from '../../mixins'
 import { base64ToBlob } from '../../helpers'
 import { NotifyError } from '../../plugins'
 
@@ -51,8 +50,6 @@ export default {
     QasSignaturePad
   },
 
-  mixins: [screenMixin],
-
   props: {
     dialogProps: {
       type: Object,
@@ -118,18 +115,18 @@ export default {
 
     signaturePadWidth () {
       const sizes = {
-        [this.mx_isSmall]: { width: '100%' },
-        [this.mx_isMedium]: { width: '570px' },
-        [this.mx_isLarge]: { width: '350px' }
+        [this.$qas.screen.isSmall]: { width: '100%' },
+        [this.$qas.screen.isMedium]: { width: '570px' },
+        [this.$qas.screen.isLarge]: { width: '350px' }
       }
       return sizes.true
     },
 
     signaturePadHeight () {
       const sizes = {
-        [this.mx_isSmall]: '250',
-        [this.mx_isMedium]: '400',
-        [this.mx_isLarge]: '250'
+        [this.$qas.screen.isSmall]: '250',
+        [this.$qas.screen.isMedium]: '400',
+        [this.$qas.screen.isLarge]: '250'
       }
 
       return sizes.true

package/src/components/table-generator/QasTableGenerator.vue

@@ -16,13 +16,10 @@
 import { extend } from 'quasar'
 import { humanize } from '../../helpers/filters'
 import { setScrollOnGrab } from '../../helpers'
-import screenMixin from '../../mixins/screen'
 
 export default {
   name: 'QasTableGenerator',
 
-  mixins: [screenMixin],
-
   props: {
     columns: {
       default: () => [],
@@ -149,7 +146,7 @@ export default {
     },
 
     tableClass () {
-      return this.mx_isSmall && 'qas-table-generator--mobile'
+      return this.$qas.screen.isSmall && 'qas-table-generator--mobile'
     },
 
     hasScrollOnGrab () {

package/src/components/text-truncate/QasTextTruncate.vue

@@ -18,7 +18,6 @@
 </template>
 
 <script>
-import screenMixin from '../../mixins/screen'
 import QasDialog from '../dialog/QasDialog.vue'
 
 export default {
@@ -28,8 +27,6 @@ export default {
     QasDialog
   },
 
-  mixins: [screenMixin],
-
   props: {
     dialogProps: {
       type: Object,
@@ -69,7 +66,7 @@ export default {
 
   computed: {
     truncateTextClass () {
-      return (this.isTruncated || this.mx_isSmall) && 'ellipsis q-pr-sm'
+      return (this.isTruncated || this.$qas.screen.isSmall) && 'ellipsis q-pr-sm'
     },
 
     isTruncated () {

package/src/components/transfer/QasTransfer.vue

@@ -49,7 +49,6 @@
 </template>
 
 <script>
-import { screenMixin } from '../../mixins'
 import { extend } from 'quasar'
 
 import QasBtn from '../btn/QasBtn.vue'
@@ -65,8 +64,6 @@ export default {
     QasSearchBox
   },
 
-  mixins: [screenMixin],
-
   props: {
     emitValue: {
       type: Boolean
@@ -124,15 +121,15 @@ export default {
 
   computed: {
     actionsClass () {
-      return !this.mx_isSmall && 'column'
+      return !this.$qas.screen.isSmall && 'column'
     },
 
     gutterClass () {
-      return `q-col-gutter-${this.mx_untilLarge ? 'md' : 'xl'}`
+      return `q-col-gutter-${this.$qas.screen.untilLarge ? 'md' : 'xl'}`
     },
 
     iconClass () {
-      return !this.mx_isSmall && 'qas-transfer__icon'
+      return !this.$qas.screen.isSmall && 'qas-transfer__icon'
     },
 
     searchBoxProps () {

package/src/composables/useForm.js

@@ -0,0 +1,3 @@
+import { useRoute } from 'vue-router'
+
+console.log(useRoute(), '>>>')

package/src/css/design-system/button.scss

@@ -0,0 +1,6 @@
+// Definições seguindo:
+// https://www.figma.com/file/JfDthOZoULYMlRJM2IQ8Oi/Design-System?node-id=665%3A163
+
+$button-font-size: 0.875rem;
+$button-line-height: 1.5rem;
+$button-font-weight: 500;

package/src/css/design-system/index.scss

@@ -0,0 +1,2 @@
+@import './button';
+@import 'typography';

package/src/css/design-system/typography.scss

@@ -0,0 +1,91 @@
+// Definições seguindo:
+// https://www.figma.com/file/JfDthOZoULYMlRJM2IQ8Oi/Design-System?node-id=665%3A163
+
+// headings
+$h1: (
+  size: 6rem,
+  line-height: 6rem,
+  letter-spacing: 0,
+  weight: 800
+);
+
+$h2: (
+  size: 3.75rem,
+  line-height: 3.75rem,
+  letter-spacing: 0,
+  weight: 700
+);
+
+$h3: (
+  size: 3rem,
+  line-height: 3.125rem,
+  letter-spacing: 0,
+  weight: 600
+);
+
+$h4: (
+  size: 2.125rem,
+  line-height: 2.5rem,
+  letter-spacing: 0,
+  weight: 800
+);
+
+$h5: (
+  size: 2rem,
+  line-height: 2.5rem,
+  letter-spacing: 0,
+  weight: 700
+);
+
+$h6: (
+  size: 1.25rem,
+  line-height: 2rem,
+  letter-spacing: 0,
+  weight: 600
+);
+
+// subtitles
+$subtitle1: (
+  size: 1rem,
+  line-height: 1.75rem,
+  letter-spacing: 0,
+  weight: 700
+);
+
+$subtitle2: (
+  size: 0.875rem,
+  line-height: 1.375rem,
+  letter-spacing: 0,
+  weight: 600
+);
+
+// body
+$body1: (
+  size: 1rem,
+  line-height: 1.5rem,
+  letter-spacing: 0,
+  weight: 500
+);
+
+$body2: (
+  size: 0.875rem,
+  line-height: 1.25rem,
+  letter-spacing: 0,
+  weight: 400
+);
+
+// overline
+$overline: (
+  size: 0.75rem,
+  line-height: 2rem,
+  letter-spacing: 0.25rem,
+  weight: 600
+);
+
+// caption
+$caption: (
+  size: 0.75rem,
+  line-height: 1.25rem,
+  letter-spacing: 0,
+  weight: 700
+);

package/src/index.scss

@@ -28,3 +28,4 @@ $generic-border-radius: var(--qas-generic-border-radius);
 
 // Design System
 @import './css/design-system';
+@import './css/design-system/index';

package/src/mixins/index.js

@@ -2,7 +2,6 @@ import contextMixin from './context.js'
 import formMixin from './form.js'
 import generatorMixin from './generator.js'
 import passwordMixin from './password.js'
-import screenMixin from './screen.js'
 import viewMixin from './view.js'
 
 export {
@@ -10,6 +9,5 @@ export {
   formMixin,
   generatorMixin,
   passwordMixin,
-  viewMixin,
-  screenMixin
+  viewMixin
 }

package/src/plugins/screen/Screen.js

@@ -2,10 +2,15 @@ import { Screen, Platform } from 'quasar'
 
 export default () => {
   const screensModel = {
+    // até 599px
     isSmall: () => Screen.xs,
+    // de 600 até 1023px
     isMedium: () => Screen.sm,
+    // de 600 até 1023px
     isLarge: () => Screen.gt.sm,
+    // de 0 até 599px
     untilMedium: () => Screen.lt.sm,
+    // de 0 ate 1023px
     untilLarge: () => Screen.lt.md,
 
     // Plataforma

package/src/mixins/screen.js

@@ -1,34 +0,0 @@
-export default {
-  // TODO: Esses nomes precisam ser alterados para algo mais inteligente.
-
-  computed: {
-    mx_isSmall () {
-      // until 599
-      return this.$q.screen.xs
-    },
-
-    mx_isMedium () {
-      // from 600 until 1023
-      return this.$q.screen.sm
-    },
-
-    mx_isLarge () {
-      // from 1024 until the limit
-      return this.$q.screen.gt.sm
-    },
-
-    mx_untilMedium () {
-      // from 0 until 599
-      return this.$q.screen.lt.sm
-    },
-
-    mx_untilLarge () {
-      // from 0 until 1023
-      return this.$q.screen.lt.md
-    },
-
-    mx_isMobile () {
-      return this.$q.platform.is.mobile
-    }
-  }
-}