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

package/src/components/page-header/QasPageHeader.vue

@@ -16,7 +16,9 @@
 
 <script>
 import { castArray } from 'lodash-es'
-import { history, getPreviousRoute } from '../../store/history'
+import { useHistory } from '../../composables'
+
+const { hasPreviousRoute, history, getPreviousRoute } = useHistory()
 
 export default {
   name: 'QasPageHeader',
@@ -45,7 +47,7 @@ export default {
 
   computed: {
     hasPreviousRoute () {
-      return history.hasPreviousRoute
+      return hasPreviousRoute.value
     },
 
     transformedBreadcrumbs () {

package/src/components/password-input/QasPasswordInput.vue

@@ -1,17 +1,19 @@
 <template>
-  <qas-input v-model="model" bottom-slots :type="type">
-    <template #append>
-      <q-icon class="cursor-pointer" :color="iconColor" :name="icon" @click="toggle" />
-    </template>
-
-    <template v-for="(_, name) in $slots" #[name]="context">
-      <slot :name="name" v-bind="context || {}" />
-    </template>
-
-    <template v-if="useStrengthChecker" #hint>
-      <qas-password-strength-checker v-bind="strengthCheckerProps" :password="model" />
-    </template>
-  </qas-input>
+  <div>
+    <qas-input v-model="model" bottom-slots v-bind="$attrs" remove-error-on-type :type="type">
+      <template #append>
+        <q-icon class="cursor-pointer" :color="iconColor" :name="icon" @click="toggle" />
+      </template>
+
+      <template v-for="(_, name) in $slots" #[name]="context">
+        <slot :name="name" v-bind="context || {}" />
+      </template>
+
+      <template v-if="!hideStrengthChecker" #hint>
+        <qas-password-strength-checker v-bind="strengthCheckerProps" :password="model" />
+      </template>
+    </qas-input>
+  </div>
 </template>
 
 <script>
@@ -28,9 +30,8 @@ export default {
   mixins: [passwordMixin],
 
   props: {
-    useStrengthChecker: {
-      type: Boolean,
-      default: true
+    hideStrengthChecker: {
+      type: Boolean
     },
 
     iconColor: {
@@ -48,7 +49,6 @@ export default {
 
   data () {
     return {
-      key: 'error',
       toggleType: true
     }
   },
@@ -78,15 +78,6 @@ export default {
     }
   },
 
-  watch: {
-    modelValue () {
-      if (this.$attrs.error) {
-        this.$attrs.error = false
-        this.$attrs.errorMessage = ''
-      }
-    }
-  },
-
   methods: {
     toggle () {
       this.toggleType = !this.toggleType

package/src/components/password-input/QasPasswordInput.yml

@@ -5,7 +5,7 @@ meta:
 
 mixins:
   - '@bildvitta/quasar-ui-asteroid/dist/api/QasInput.json'
-
+  - quasar/dist/api/QInput.json
 props:
   use-strength-checker:
     desc: Controla exibição do componente `QasStrenghtChecker`.

package/src/components/search-box/QasSearchBox.vue

@@ -125,6 +125,7 @@ export default {
         this.fuse = new Fuse(value, this.defaultFuseOptions)
 
         this.setResults(this.search)
+        this.updateResultsModel(value)
       },
 
       deep: true
@@ -141,7 +142,7 @@ export default {
 
     searchResults: {
       handler (value) {
-        this.$emit('update:results', value.map(result => result.item || result))
+        this.updateResultsModel(value)
       },
       immediate: true
     }
@@ -158,6 +159,10 @@ export default {
       this.searchResults = value
         ? this.fuse.search(value)
         : this.list
+    },
+
+    updateResultsModel (value) {
+      this.$emit('update:results', value.map(result => result.item || result))
     }
   }
 }

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

@@ -119,15 +119,17 @@ export default {
       immediate: true
     },
 
-    modelValue (value) {
-      this.values = [...value]
+    modelValue: {
+      handler (value) {
+        this.values = [...value]
+      },
+
+      immediate: true
     }
   },
 
   created () {
-    this.values = [...this.modelValue]
-
-    this.handleOptions()
+    this.handleList()
   },
 
   methods: {
@@ -155,7 +157,7 @@ export default {
       return this.values.includes(item.value) ? this.remove(item) : this.add(item)
     },
 
-    handleOptions () {
+    handleList () {
       if (this.modelValue.length) {
         return this.sortList()
       }
@@ -186,8 +188,8 @@ export default {
 
     sortList () {
       this.sortedList = this.deleteOnly
-        ? this.list.filter(option => this.modelValue.includes(option.value))
-        : sortBy(this.list, option => !this.modelValue.includes(option.value))
+        ? this.list.filter(item => this.modelValue.includes(item.value))
+        : sortBy(this.list, item => !this.modelValue.includes(item.value))
     },
 
     updateModel (model) {

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

@@ -15,13 +15,15 @@
       </template>
     </qas-uploader>
 
-    <qas-dialog v-model="isOpenedDialog">
+    <qas-dialog v-model="isOpenedDialog" v-bind="defaultDialogProps">
       <template #header>
         <div class="text-bold text-center">Insira sua assinatura digital no campo abaixo</div>
       </template>
 
       <template #description>
-        <qas-signature-pad ref="signaturePadModal" v-model:empty="isEmpty" height="250" />
+        <div :style="signaturePadWidth">
+          <qas-signature-pad ref="signaturePadModal" v-model:empty="isEmpty" :height="signaturePadHeight" />
+        </div>
       </template>
 
       <template #actions>
@@ -36,6 +38,7 @@
 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'
 
@@ -48,7 +51,14 @@ export default {
     QasSignaturePad
   },
 
+  mixins: [screenMixin],
+
   props: {
+    dialogProps: {
+      type: Object,
+      default: () => ({})
+    },
+
     uploadLabel: {
       default: '',
       type: String
@@ -97,6 +107,32 @@ export default {
 
     headerClass () {
       return `q-pa-${this.readonly ? 'md' : 'sm'}`
+    },
+
+    defaultDialogProps () {
+      return {
+        maxWidth: '620px',
+        ...this.dialogProps
+      }
+    },
+
+    signaturePadWidth () {
+      const sizes = {
+        [this.mx_isSmall]: { width: '100%' },
+        [this.mx_isMedium]: { width: '570px' },
+        [this.mx_isLarge]: { width: '350px' }
+      }
+      return sizes.true
+    },
+
+    signaturePadHeight () {
+      const sizes = {
+        [this.mx_isSmall]: '250',
+        [this.mx_isMedium]: '400',
+        [this.mx_isLarge]: '250'
+      }
+
+      return sizes.true
     }
   },
 

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

@@ -4,6 +4,11 @@ meta:
 desc: Componente que implementa o "QasUploader" e "QasSignaturePad" para fazer upload de assinatura.
 
 props:
+  dialog-props:
+    desc: Repassa propriedades para o "QasDialog".
+    type: Object
+    default: { maxWidth: '620px' }
+
   upload-label:
     desc: Rótulo do uploader.
     type: String

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

@@ -190,8 +190,8 @@ export default {
     },
 
     getFullTableWidth () {
-      const tableElemet = this.getTableElement()
-      return tableElemet?.getBoundingClientRect?.()?.width
+      const tableElement = this.getTableElement()
+      return tableElement?.getBoundingClientRect?.()?.width
     },
 
     getContainerTableWidth () {

package/src/components/transfer/QasTransfer.vue

@@ -4,10 +4,10 @@
     <div class="col-12 col-sm">
       <qas-label :label="label" :quantity="optionsList.length" />
 
-      <qas-search-box form-mode :list="optionsList" v-bind="searchBoxProps">
-        <template #default="{ results }">
+      <qas-search-box v-model:results="firstResults" :list="optionsList" outlined v-bind="searchBoxProps">
+        <template #default>
           <q-list separator>
-            <q-item v-for="(item, index) in results" :key="index" :class="getItemClass(item, true)" clickable @click="onSelectQueue(item, true)">
+            <q-item v-for="(item, index) in firstResults" :key="index" :class="getItemClass(item, true)" clickable @click="onSelectQueue(item, true)">
               <slot name="item-first-column">
                 <q-item-section>{{ getItemLabel(item) }}</q-item-section>
               </slot>
@@ -33,10 +33,10 @@
     <div class="col-12 col-sm">
       <qas-label label="Selecionadas" :quantity="selectedList.length" />
 
-      <qas-search-box v-bind="searchBoxProps" empty-list-height="300px" form-mode label="Selecionadas" :list="selectedList">
-        <template #default="{ results }">
+      <qas-search-box v-model:results="secondResults" v-bind="searchBoxProps" empty-list-height="300px" label="Selecionadas" :list="selectedList" outlined>
+        <template #default>
           <q-list separator>
-            <q-item v-for="(item, index) in results" :key="index" :class="getItemClass(item)" clickable @click="onSelectQueue(item)">
+            <q-item v-for="(item, index) in secondResults" :key="index" :class="getItemClass(item)" clickable @click="onSelectQueue(item)">
               <slot name="item-second-column">
                 <q-item-section>{{ getItemLabel(item) }}</q-item-section>
               </slot>
@@ -116,7 +116,9 @@ export default {
       firstQueue: [],
       optionsList: [],
       secondQueue: [],
-      selectedList: []
+      selectedList: [],
+      firstResults: [],
+      secondResults: []
     }
   },
 

package/src/components/uploader/QasUploader.vue

@@ -62,7 +62,6 @@ import { NotifyError } from '../../plugins'
 import { getImageSize, getResizeDimensions } from '../../helpers/images'
 
 import Pica from 'pica'
-import api from 'axios'
 
 export default {
   name: 'QasUploader',
@@ -257,7 +256,7 @@ export default {
       this.isFetching = true
 
       try {
-        const { data } = await api.post('/upload-credentials/', {
+        const { data } = await this.$axios.post('/upload-credentials/', {
           entity: this.entity,
           filename
         })

package/src/composables/index.js

@@ -0,0 +1 @@
+export { default as useHistory } from './useHistory.js'

package/src/composables/useHistory.js

@@ -0,0 +1,46 @@
+import { reactive, computed } from 'vue'
+import { findLastIndex } from 'lodash-es'
+
+const history = reactive({ list: [] })
+
+export default function () {
+  const hasPreviousRoute = computed(() => history.list.length > 1)
+
+  function getPreviousRoute (currentRoute) {
+    const index = findLastIndex(history.list, item => item.name === currentRoute.name)
+
+    if (~index) {
+      history.list.splice(index, 1)
+    }
+
+    return history.list[history.list.length - 1]
+  }
+
+  function addRoute (route) {
+    const routeExistsInList = history.list?.[history.list?.length - 1]?.name === route.name
+
+    if (routeExistsInList) return
+
+    history.list.push(route)
+  }
+
+  function destroyRoutes (routes) {
+    if (!history.list.length) return null
+
+    routes.forEach(route => {
+      const index = history.list.findIndex(item => item.name === route.name)
+
+      if (~index) {
+        history.list.splice(index, 1)
+      }
+    })
+  }
+
+  return {
+    history,
+    hasPreviousRoute,
+    getPreviousRoute,
+    addRoute,
+    destroyRoutes
+  }
+}

package/src/directives/Test.js

@@ -0,0 +1,13 @@
+export default {
+  name: 'test',
+
+  bind (element, { arg: argument, value }) {
+    if (element && argument) {
+      element.dataset.test = argument
+    }
+
+    if (element && value) {
+      element.dataset.testKey = value
+    }
+  }
+}

package/src/helpers/filter-list-by-handle.js

@@ -0,0 +1,31 @@
+/**
+ * Função para filtrar um array de objeto, usando a logica na propriedade `handle
+ * e adicionando o que tem dentro da propriedade `item`.
+ *
+ * @param {Object[]} list Array de objetos, contendo `handle` e `item`.
+ * @returns {Array}
+ *
+ * @example
+ * filterListByHandle(
+ * [
+ *  {
+ *    handle: true,
+ *    item: 'item 1'
+ *  },
+ *  {
+ *    handle: false,
+ *    item: 'item 2'
+ *  }
+ * ) // retorna ['item 1']
+ */
+export default function (list = []) {
+  const formattedList = []
+
+  list.forEach(itemList => {
+    if (itemList.handle) {
+      formattedList.push(itemList.item)
+    }
+  })
+
+  return formattedList
+}

package/src/helpers/filter-object-to-array.js

@@ -0,0 +1,29 @@
+/**
+ * Função para filtrar um objeto, transformando cada chave em um item do array caso
+ * o valor referente a chave seja true.
+ *
+ * @param {Object} object Objeto contendo propriedades a serem adicionadas.
+ * @returns {string[]}
+ *
+ * @example
+ * filterObjectToArray(
+ *  {
+ *    item1: true,
+ *    item2: false,
+ *    item3: '',
+ *    item4: 'str',
+ *  }
+ * ) // retorna: ['item1', 'item4']
+ */
+
+export default function (object = {}) {
+  const list = []
+
+  for (const key in object) {
+    if (object[key]) {
+      list.push(key)
+    }
+  }
+
+  return list
+}

package/src/helpers/filter-object.js

@@ -1,9 +1,8 @@
 /**
- * Function to filter specific field inside a fields
- * Função para filtrar propriedades espessificas dentro de um objeto
+ * Função para filtrar propriedades especificas dentro de um objeto
  *
  * @param {object} fields objeto com propriedades
- * @param {array} models array de string com nomes das proproiedades que serão filtradas
+ * @param {array} models array de string com nomes das propriedades que serão filtradas
  * @returns {object} objeto com propriedades filtradas
  *
  * @example

package/src/helpers/index.js

@@ -6,6 +6,8 @@ export { default as base64ToBlob } from './base-64-to-blob.js'
 export { default as constructObject } from './construct-object.js'
 export { default as filterObject } from './filter-object.js'
 export { default as getGreatestCommonDivisor } from './get-greatest-common-divisor.js'
+export { default as filterObjectToArray } from './filter-object-to-array.js'
+export { default as filterListByHandle } from './filter-list-by-handle.js'
 
 export * from './filters.js'
 export * from './images.js'

package/src/index.scss

@@ -8,10 +8,12 @@ $secondary-contrast: var(--q-secondary-contrast);
 
 // Asteroid variables
 :root {
-  --qas-background-color: #fcfcff;
+  --qas-background-color: #f5f5f5;
+  --qas-generic-border-radius: 8px;
 }
 
 $background-color: var(--qas-background-color);
+$generic-border-radius: var(--qas-generic-border-radius);
 
 @import './css/background';
 @import './css/border';
@@ -22,7 +24,6 @@ $background-color: var(--qas-background-color);
 @import './css/opacity';
 @import './css/shadow';
 @import './css/text';
-@import './css/transitions';
 @import './css/unset';
 
 // Design System

package/src/mixins/view.js

@@ -111,6 +111,8 @@ export default {
 
     mx_updateModels (models) {
       for (const key in models) {
+        if (!models[key]) continue
+
         this.$emit(`update:${key}`, models[key])
       }
     }

package/src/pages/Forbidden.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="fixed-center text-center">
+    <p class="q-my-lg text-faded">Ops, você não tem permissão para acessar esta página <strong>(403).</strong></p>
+    <q-btn color="primary" flat @click="$router.push('/')">Voltar</q-btn>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Forbidden'
+}
+</script>

package/src/pages/NotFound.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="fixed-center text-center">
+    <p class="q-my-lg text-faded">Ops, nada aqui... <strong>(404)</strong></p>
+    <q-btn color="primary" flat @click="$router.push('/')">Voltar</q-btn>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NotFound'
+}
+</script>

package/src/plugins/index.js

@@ -1,9 +1,11 @@
 import Dialog from './dialog/Dialog.js'
 import NotifyError from './notify-error/NotifyError.js'
 import NotifySuccess from './notify-success/NotifySuccess.js'
+import Screen from './screen/Screen.js'
 
 export {
   Dialog,
   NotifyError,
+  Screen,
   NotifySuccess
 }

package/src/plugins/screen/Screen.js

@@ -0,0 +1,30 @@
+import { Screen, Platform } from 'quasar'
+
+export default () => {
+  const screensModel = {
+    isSmall: () => Screen.xs,
+    isMedium: () => Screen.sm,
+    isLarge: () => Screen.gt.sm,
+    untilMedium: () => Screen.lt.sm,
+    untilLarge: () => Screen.lt.md,
+
+    // Plataforma
+    isMobile: () => Platform.is.mobile || false
+  }
+
+  const screens = {}
+
+  for (const key in screensModel) {
+    // infelizmente esta é a única forma que conseguimos para que nossa função se tornasse reativa na view
+    // é como o próprio quasar implementa
+    Object.defineProperty(screens, key, {
+      get () {
+        return screensModel[key]()
+      },
+
+      enumerable: true
+    })
+  }
+
+  return screens
+}

package/src/plugins/screen/Screen.yml

@@ -0,0 +1,16 @@
+type: component
+
+meta:
+  desc: Plugin que implementa o "Screen" do quasar.
+
+inject:
+  'this.$qas.screen':
+    type: Object
+    debugger: true
+    default:
+      isSmall: false
+      isMedium: false
+      isLarge: false
+      untilMedium: false
+      untilLarge: false
+      isMobile: false

package/src/vue-plugin.js

@@ -50,14 +50,19 @@ import QasUploader from './components/uploader/QasUploader.vue'
 import VueGoogleMaps from '@fawmi/vue-google-maps'
 import { Notify, Quasar, Dialog as QuasarDialog } from 'quasar'
 
+// Plugins
 import {
   Dialog,
   NotifyError,
-  NotifySuccess
+  NotifySuccess,
+  Screen
 } from './plugins'
 
 import packageInfo from '../package.json'
 
+// Directives
+import Test from './directives/Test.js'
+
 const version = packageInfo.version
 
 function install (app) {
@@ -119,8 +124,11 @@ function install (app) {
   app.config.globalProperties.$qas = {
     dialog: Dialog,
     error: NotifyError,
-    success: NotifySuccess
+    success: NotifySuccess,
+    screen: Screen()
   }
+
+  app.directive(Test.name, Test)
 }
 
 export {
@@ -176,10 +184,11 @@ export {
   QasTransfer,
   QasUploader,
 
-  // plugin
+  // plugins
   Dialog,
   NotifyError,
   NotifySuccess,
+  Screen,
 
   install
 }

package/src/css/transitions.scss

@@ -1,12 +0,0 @@
-// Fade
-.fade-enter-active,
-.fade-leave-active {
-  transform: translateY(0);
-  transition: opacity 0.3s, transform 0.3s;
-}
-
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-  transform: translateY(-100%);
-}