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

package/src/css/opacity.scss

@@ -3,7 +3,3 @@
     opacity: #{'0.' + $index} !important;
   }
 }
-
-.opaque {
-  opacity: 1;
-}

package/src/css/set-brand.scss

@@ -0,0 +1,15 @@
+@mixin set-brand($name, $color) {
+  :root {
+    --q-#{$name}: #{$color};
+  }
+
+  .text-#{$name} {
+    color: $color !important;
+    color: var(--q-#{$name}) !important;
+  }
+
+  .bg-#{$name} {
+    background: $color !important;
+    background: var(--q-#{$name}) !important;
+  }
+}

package/src/css/transitions.scss

@@ -2,7 +2,7 @@
 .fade-enter-active,
 .fade-leave-active {
   transform: translateY(0);
-  transition: opacity .3s, transform .3s;
+  transition: opacity 0.3s, transform 0.3s;
 }
 
 .fade-enter,

package/src/helpers/add-counter-suffix.js

@@ -0,0 +1,3 @@
+export default function (label, counter) {
+  return counter ? `${label} (${counter})` : label
+}

package/src/helpers/filter-object.js

@@ -1,10 +1,10 @@
 /**
  * Function to filter specific field inside a fields
+ * Função para filtrar propriedades espessificas dentro de um objeto
  *
- * @param {object} fields object of fields
- * @param {array} models array of model that you filter
- * @throws {Error} Argument models must be an array of model
- * @returns {object} filtered object
+ * @param {object} fields objeto com propriedades
+ * @param {array} models array de string com nomes das proproiedades que serão filtradas
+ * @returns {object} objeto com propriedades filtradas
  *
  * @example
  * filterObject({
@@ -13,8 +13,10 @@
  * }, ['name'])
  */
 export default function (fields = {}, models) {
-  if (!models.length) {
-    throw new Error('Please provide an array of model')
+  if (!models.length) return fields
+
+  if (!Object.keys(fields).length) {
+    return {}
   }
 
   if (!Object.keys(fields).length) {

package/src/helpers/filters.js

@@ -1,5 +1,3 @@
-import Vue from 'vue'
-
 import { format, parseISO, isMatch } from 'date-fns'
 import { ptBR } from 'date-fns/locale'
 
@@ -15,8 +13,7 @@ function __format (value, token, options = {}) {
 
 // Asset
 function asset (value) {
-  const environment = Vue.prototype.$environment
-  const bucketURL = process.env.BUCKET_URL || (environment ? environment.bucketURL : location.origin)
+  const bucketURL = process.env.BUCKET_URL || location.origin
 
   return value ? `${bucketURL}/${value}` : ''
 }
@@ -59,6 +56,11 @@ function squareArea (value = 0, suffix = 'm²') {
   return value ? `${value} ${suffix}` : ''
 }
 
+function formatPercent (value = 0, places = 2) {
+  value = Number(value)
+  return value ? value.toLocaleString('pt-BR', { style: 'percent', minimumFractionDigits: places }) : ''
+}
+
 function formatCompanyDocument (value) {
   return value.replace(/^(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/g, '$1.$2.$3/$4-$5')
 }
@@ -111,6 +113,7 @@ function humanize (field = {}, value) {
     case 'datetime': return dateTime(value)
     case 'time': return time(value)
     case 'radio': return selectLabel(field.options, value)
+    case 'percent': return formatPercent(value)
     default: return value
   }
 }
@@ -143,6 +146,7 @@ export {
   decimal,
   formatCompanyDocument,
   formatDocument,
+  formatPercent,
   formatPersonalDocument,
   formatPhone,
   formatPostalCode,

package/src/helpers/get-slot-children-text.js

@@ -0,0 +1,15 @@
+// https://stackoverflow.com/a/64167032/977687
+
+export default function getSlotChildrenText (children) {
+  return children.map(node => {
+    if (!node.children || typeof node.children === 'string') {
+      return node.children || ''
+    } else if (Array.isArray(node.children)) {
+      return getSlotChildrenText(node.children)
+    } else if (node.children.default) {
+      return getSlotChildrenText(node.children.default())
+    }
+
+    return undefined
+  }).join('')
+}

package/src/helpers/images.js

@@ -0,0 +1,28 @@
+function getImageSize (image) {
+  return new Promise((resolve, reject) => {
+    image.addEventListener('load', () => {
+      resolve({ width: image.naturalWidth, height: image.naturalHeight })
+    })
+
+    image.addEventListener('error', reject)
+  })
+}
+
+function getResizeDimensions (sizeLimit, width, height) {
+  const factor = sizeLimit / Math.max(width, height)
+
+  if (factor < 1) {
+    width *= factor
+    height *= factor
+  }
+
+  return {
+    width: Math.round(width),
+    height: Math.round(height)
+  }
+}
+
+export {
+  getImageSize,
+  getResizeDimensions
+}

package/src/helpers/index.js

@@ -1,59 +1,11 @@
-import base64ToBlob from './base64ToBlob.js'
-import constructObject from './constructObject.js'
-import filterObject from './filter-object.js'
-import greatestCommonDivisor from './greatestCommonDivisor.js'
-import isLocalDevelopment from './isLocalDevelopment.js'
-import { history, handleHistory } from './historyHandler.js'
-
-import {
-  asset,
-  booleanLabel,
-  date,
-  dateTime,
-  decimal,
-  formatCompanyDocument,
-  formatDocument,
-  formatPersonalDocument,
-  formatPhone,
-  formatPostalCode,
-  handleMasks,
-  humanDate,
-  humanize,
-  money,
-  optionLabel,
-  parseValue,
-  percent,
-  squareArea
-} from './filters.js'
-
-export {
-  // filters
-  asset,
-  booleanLabel,
-  constructObject,
-  date,
-  dateTime,
-  decimal,
-  formatCompanyDocument,
-  formatDocument,
-  formatPersonalDocument,
-  formatPhone,
-  formatPostalCode,
-  handleMasks,
-  humanDate,
-  humanize,
-  money,
-  optionLabel,
-  parseValue,
-  percent,
-  squareArea,
-
-  // history
-  handleHistory,
-  history,
-
-  base64ToBlob,
-  filterObject,
-  greatestCommonDivisor,
-  isLocalDevelopment
-}
+export { default as addCounterSuffix } from './add-counter-suffix.js'
+export { default as getSlotChildrenText } from './get-slot-children-text.js'
+export { default as setScrollOnGrab } from './set-scroll-on-grab.js'
+export { default as isLocalDevelopment } from './is-local-development.js'
+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 * from './filters.js'
+export * from './images.js'

package/src/helpers/set-scroll-on-grab.js

@@ -0,0 +1,61 @@
+export default function (element) {
+  setStyle()
+
+  let isDown = false
+  let startX
+  let scrollLeft
+
+  element.addEventListener('mousedown', onMouseDown)
+  element.addEventListener('mouseleave', onMouseLeave)
+  element.addEventListener('mouseup', onMouseUp)
+  element.addEventListener('mousemove', onMouseMove)
+
+  function onMouseDown (event) {
+    isDown = true
+    element.classList.add('active')
+    startX = event.pageX - element.offsetLeft
+    scrollLeft = element.scrollLeft
+  }
+
+  function onMouseLeave () {
+    isDown = false
+    element.classList.remove('active')
+
+    setStyle()
+  }
+
+  function onMouseUp () {
+    isDown = false
+    element.classList.remove('active')
+
+    setStyle()
+  }
+
+  function onMouseMove (event) {
+    if (!isDown) return
+
+    event.preventDefault()
+
+    setStyle('grabbing')
+
+    const x = event.pageX - element.offsetLeft
+    const walk = (x - startX) * 3 // scroll-fast
+    element.scrollLeft = scrollLeft - walk
+  }
+
+  function setStyle (model = 'grab') {
+    element.style.cursor = model
+  }
+
+  function destroyEvents () {
+    element.removeEventListener('mousedown', onMouseDown)
+    element.removeEventListener('mouseleave', onMouseLeave)
+    element.removeEventListener('mouseup', onMouseUp)
+    element.removeEventListener('mousemove', onMouseMove)
+  }
+
+  return {
+    element,
+    destroyEvents
+  }
+}

package/src/index.cjs.js

@@ -0,0 +1 @@
+export * from './vue-plugin'

package/src/index.esm.js

@@ -0,0 +1,4 @@
+import * as VuePlugin from './vue-plugin'
+
+export * from './vue-plugin'
+export default VuePlugin

package/src/index.scss

@@ -1,31 +1,29 @@
-@import 'quasar/src/css/variables.sass';
+@import 'quasar/src/css/variables';
 
 // Quasar variables
-$primary: var(--q-color-primary);
-$primary-contrast: var(--q-color-primary-contrast);
-
-$secondary: var(--q-color-secondary);
-$secondary-contrast: var(--q-color-secondary-contrast);
+$primary: var(--q-primary);
+$primary-contrast: var(--q-primary-contrast);
+$secondary: var(--q-secondary);
+$secondary-contrast: var(--q-secondary-contrast);
 
 // Asteroid variables
 :root {
-  --qas-background-color: #f5f5f5;
-  --qas-generic-border-radius: 8px;
+  --qas-background-color: #fcfcff;
 }
 
 $background-color: var(--qas-background-color);
-$generic-border-radius: var(--qas-generic-border-radius);
 
-@import './css/background.scss';
-@import './css/border.scss';
-@import './css/border-radius.scss';
-@import './css/container.scss';
-@import './css/fonts.scss';
-@import './css/line-height.scss';
-@import './css/opacity.scss';
-@import './css/shadow.scss';
-@import './css/text.scss';
-@import './css/transitions.scss';
-@import './css/unset.scss';
+@import './css/background';
+@import './css/border';
+@import './css/border-radius';
+@import './css/container';
+@import './css/fonts';
+@import './css/line-height';
+@import './css/opacity';
+@import './css/shadow';
+@import './css/text';
+@import './css/transitions';
+@import './css/unset';
 
-@import './css/design-system.scss';
+// Design System
+@import './css/design-system';

package/src/index.umd.js

@@ -0,0 +1,2 @@
+import * as VuePlugin from './vue-plugin'
+export default VuePlugin

package/src/mixins/context.js

@@ -1,6 +1,6 @@
 export default {
   computed: {
-    context () {
+    mx_context () {
       const { limit, ordering, page, search, ...filters } = this.$route.query
       return { filters, limit, ordering, page: page ? parseInt(page) : 1, search }
     }

package/src/mixins/dialog-router.js

@@ -0,0 +1,17 @@
+export default {
+  methods: {
+    mx_dialogRouter (route) {
+      this.$refs.dialogRouter.show(route)
+    },
+
+    mx_reload () {
+      if (this.$refs.listView) {
+        this.$refs.listView.refresh()
+      }
+
+      if (this.$refs.singleView) {
+        this.$refs.singleView.fetchSingle()
+      }
+    }
+  }
+}

package/src/mixins/form.js

@@ -1,19 +1,11 @@
 export default {
   computed: {
-    $_isEditMode () {
-      return ['replace', 'update'].includes(this.$_mode)
+    mx_isEditMode () {
+      return ['replace', 'update'].includes(this.mx_mode)
     },
 
-    $_mode () {
-      return this.$_resolvedRoute.name.endsWith('Edit') ? 'replace' : 'create'
-    },
-
-    $_resolvedRoute () {
-      if (this.route && Object.keys(this.route).length) {
-        return this.route
-      }
-
-      return this.$route
+    mx_mode () {
+      return this.$route.name.endsWith('Edit') ? 'replace' : 'create'
     }
   }
 }

package/src/mixins/generator.js

@@ -12,15 +12,15 @@ export default {
       type: Object
     },
 
-    // TODO: Validar entrada e mudar documentação para seletor.
     gutter: {
       default: 'md',
-      type: [String, Boolean]
+      type: [String, Boolean],
+      validator: value => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
     }
   },
 
   computed: {
-    classes () {
+    mx_classes () {
       const classes = ['row']
 
       if (this.gutter) {
@@ -32,7 +32,7 @@ export default {
   },
 
   methods: {
-    breakpoint (columns) {
+    mx_getBreakpoint (columns) {
       const classes = []
       const profiles = { col: 'col', xs: 'col-xs', sm: 'col-sm', md: 'col-md', lg: 'col-lg', xl: 'col-xl' }
       const { fieldProps, classes: renamedClasses, ...formattedColumns } = columns || {}
@@ -45,25 +45,25 @@ export default {
       return [...classes, renamedClasses]
     },
 
-    getFieldClass (index, isGridGenerator) {
+    mx_getFieldClass (index, isGridGenerator) {
       if (typeof this.columns === 'string') {
         return irregularClasses.includes(this.columns) ? this.columns : `col-${this.columns}`
       }
 
       return Array.isArray(this.columns)
-        ? this.handleColumnsByIndex(index, isGridGenerator)
-        : this.handleColumnsByField(index, isGridGenerator)
+        ? this.mx_handleColumnsByIndex(index, isGridGenerator)
+        : this.mx_handleColumnsByField(index, isGridGenerator)
     },
 
-    handleColumnsByField (index, isGridGenerator) {
+    mx_handleColumnsByField (index, isGridGenerator) {
       if (!this.columns[index]) {
-        return this.setDefaultColumnClass(isGridGenerator)
+        return this.mx_setDefaultColumnClass(isGridGenerator)
       }
 
-      return this.breakpoint(this.columns[index])
+      return this.mx_getBreakpoint(this.columns[index])
     },
 
-    handleColumnsByIndex (index, isGridGenerator) {
+    mx_handleColumnsByIndex (index, isGridGenerator) {
       const fields = isGridGenerator ? this.fields : this.groupedFields.visible
 
       if (!Array.isArray(fields)) {
@@ -73,13 +73,13 @@ export default {
       const length = this.columns.length
 
       if (!length) {
-        return this.setDefaultColumnClass(isGridGenerator)
+        return this.mx_setDefaultColumnClass(isGridGenerator)
       }
 
-      return this.breakpoint(this.columns[index])
+      return this.mx_getBreakpoint(this.columns[index])
     },
 
-    setDefaultColumnClass (isGridGenerator) {
+    mx_setDefaultColumnClass (isGridGenerator) {
       return isGridGenerator ? 'col-6 col-xs-12 col-sm-4' : 'col-6'
     }
   }

package/src/mixins/index.js

@@ -1,21 +1,15 @@
 import contextMixin from './context.js'
 import formMixin from './form.js'
 import generatorMixin from './generator.js'
-import mapMarkersMixin from './map-markers.js'
 import passwordMixin from './password.js'
 import screenMixin from './screen.js'
-import unsavedChangesMixin from './unsaved-changes.js'
-import uploaderMixin from './uploader.js'
 import viewMixin from './view.js'
 
 export {
   contextMixin,
   formMixin,
   generatorMixin,
-  mapMarkersMixin,
   passwordMixin,
-  screenMixin,
-  unsavedChangesMixin,
-  uploaderMixin,
-  viewMixin
+  viewMixin,
+  screenMixin
 }

package/src/mixins/password.js

@@ -1,19 +1,81 @@
+const levels = {
+  0: {
+    color: 'negative',
+    label: 'Muito fraco',
+    progress: 0.05,
+    textClass: 'text-negative'
+  },
+
+  1: {
+    color: 'warning',
+    label: 'Fraco',
+    progress: 0.25,
+    textClass: 'text-warning'
+  },
+
+  2: {
+    color: 'warning',
+    label: 'Bom',
+    progress: 0.5,
+    textClass: 'text-warning'
+  },
+
+  3: {
+    color: 'positive',
+    label: 'Forte',
+    progress: 0.75,
+    textClass: 'text-positive'
+  },
+
+  4: {
+    color: 'positive',
+    label: 'Muito forte',
+    progress: 1,
+    textClass: 'text-positive'
+  }
+}
+
 export default {
   props: {
-    pattern: {
-      default: '',
-      type: [RegExp, String]
+    levels: {
+      default: () => levels,
+      type: Object
     },
 
-    weak: {
-      default: 5,
-      type: Number
-    }
-  },
+    // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength
+    minlength: {
+      default: 8,
+      type: [Number, String]
+    },
+
+    specials: {
+      default: /[!@#$%^&*()_+\-=[\]{}|;:'",<.>/?`~]/g,
+      type: RegExp
+    },
+
+    trackColor: {
+      default: 'blue-grey-1',
+      type: String
+    },
+
+    useLowercase: {
+      default: true,
+      type: Boolean
+    },
+
+    useNumbers: {
+      default: true,
+      type: Boolean
+    },
+
+    useSpecial: {
+      default: true,
+      type: Boolean
+    },
 
-  methods: {
-    onSuccess () {
-      this.$emit('password-success')
+    useUppercase: {
+      default: true,
+      type: Boolean
     }
   }
 }

package/src/mixins/screen.js

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