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

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/useForm.js

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

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/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/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,8 +24,8 @@ $background-color: var(--qas-background-color);
 @import './css/opacity';
 @import './css/shadow';
 @import './css/text';
-@import './css/transitions';
 @import './css/unset';
 
 // 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/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,35 @@
+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
+    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%);
-}

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
-    }
-  }
-}

package/src/store/history.js

@@ -1,43 +0,0 @@
-import { reactive } from 'vue'
-import { findLastIndex } from 'lodash-es'
-
-const history = reactive({ hasPreviousRoute: false, list: [] })
-
-function getPreviousRoute (currentRoute) {
-  const index = findLastIndex(history.list, item => item.name === currentRoute.name)
-
-  if (~index) {
-    history.list.splice(index, 1)
-  }
-
-  history.hasPreviousRoute = history.list.length > 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)
-  history.hasPreviousRoute = history.list.length > 1
-}
-
-function destroyRoutes (routes) {
-  if (!history.list.length) return null
-
-  routes.forEach(route => {
-    const index = history.list.findIndex(item => item.name === route)
-
-    if (~index) {
-      history.list.splice(index, 1)
-    }
-  })
-}
-
-export {
-  history,
-  getPreviousRoute,
-  addRoute,
-  destroyRoutes
-}

package/src/store/index.js

@@ -1 +0,0 @@
-export * from './history.js'