@bildvitta/quasar-ui-asteroid 2.14.0 → 3.0.0-alpha.1

package/src/components/numeric-input/QasNumericInput.vue

@@ -1,22 +1,24 @@
 <template>
-  <div>
-    <q-field v-model="model" v-bind="$attrs">
-      <template #control="{ emitValue, floatingLabel, id, value: modelValue }">
-        <input v-show="floatingLabel" :id="id" ref="input" class="q-field__input" :model-value="modelValue" @input="emitValue($event.target.value)">
-      </template>
-    </q-field>
-  </div>
+  <q-field v-model="model">
+    <template #control="{ emitValue, floatingLabel, id, value }">
+      <input v-show="floatingLabel" :id="id" ref="input" class="q-field__input" :model-value="value" @input="emitValue($event.target.value)">
+    </template>
+  </q-field>
 </template>
 
 <script>
+import AutoNumeric from 'autonumeric'
+
 const defaultModes = {
-  integer: ['commaDecimalCharDotSeparator', 'integer'],
   decimal: 'commaDecimalCharDotSeparator',
-  percent: 'percentageEU2dec',
-  money: 'Brazilian'
+  integer: ['commaDecimalCharDotSeparator', 'integer'],
+  money: 'Brazilian',
+  percent: 'percentageEU2dec'
 }
 
 export default {
+  name: 'QasNumericInput',
+
   props: {
     allowNegative: {
       default: true,
@@ -44,19 +46,21 @@ export default {
       validator: value => ['integer', 'decimal', 'percent', 'money'].includes(value)
     },
 
-    preset: {
-      default: false,
-      type: [Boolean, String]
-    },
-
-    value: {
+    modelValue: {
       default: '',
       validator (value) {
         return typeof value === 'number' || typeof value === 'string' || value === '' || value === null
       }
+    },
+
+    preset: {
+      default: false,
+      type: [Boolean, String]
     }
   },
 
+  emits: ['update:modelValue'],
+
   data () {
     return {
       autoNumeric: null
@@ -70,17 +74,16 @@ export default {
 
     model: {
       get () {
-        return this.value
+        return this.modelValue
       },
 
       set () {
-        this.$emit('input', this.autoNumeric.getNumber())
+        this.$emit('update:modelValue', this.autoNumeric.getNumber())
       }
     }
   },
 
   async created () {
-    const AutoNumeric = (await import('autonumeric')).default
     const autoNumericPredefinedOptions = AutoNumeric.getPredefinedOptions()
 
     let option = this.preset || this.defaultMode
@@ -110,12 +113,12 @@ export default {
     Object.assign(options, this.autonumericProps)
 
     this.$nextTick(() => {
-      this.$refs.input.value = this.value
+      this.$refs.input.value = this.modelValue
       this.autoNumeric = new AutoNumeric(this.$refs.input, options)
     })
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.autoNumeric.remove()
   }
 }

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

@@ -6,28 +6,29 @@
         {{ title }}
       </q-toolbar-title>
 
-      <q-breadcrumbs v-if="!noBreadcrumbs" class="text-caption text-grey-6">
-        <q-breadcrumbs-el v-for="item in transformedBreadcrumbs" :key="item.label" :label="item.label" :to="item.route" />
+      <q-breadcrumbs v-if="useBreadcrumbs" class="text-caption" separator-color="grey-7">
+        <q-breadcrumbs-el v-for="(item, index) in transformedBreadcrumbs" :key="item.label" :class="getBreadcrumbsClass(index)" :label="item.label" :to="item.route" />
       </q-breadcrumbs>
     </div>
-
     <slot />
   </q-toolbar>
 </template>
 
 <script>
-import { castArray, get } from 'lodash'
-import { history, handleHistory } from '../../helpers/historyHandler'
+import { castArray } from 'lodash-es'
+import { history, getPreviousRoute } from '../../store/history'
 
 export default {
+  name: 'QasPageHeader',
+
   props: {
     breadcrumbs: {
       default: '',
       type: [Array, Boolean, String]
     },
 
-    noBreadcrumbs: {
-      default: false,
+    useBreadcrumbs: {
+      default: true,
       type: Boolean
     },
 
@@ -60,8 +61,10 @@ export default {
           item.route = { name: item.routeName }
         }
 
-        if (this.$history && get(item, 'route.name')) {
-          const previous = this.$history.find(history => history.name === item.route.name)
+        const historyList = history.list
+
+        if (historyList.length && item?.route?.name) {
+          const previous = historyList.find(history => history.name === item.route.name)
           item.route.query = previous ? previous.query : null
         }
 
@@ -72,7 +75,13 @@ export default {
 
   methods: {
     back () {
-      this.$router.push(handleHistory().getPreviousRoute(this.$route))
+      this.$router.push(getPreviousRoute(this.$route))
+    },
+
+    getBreadcrumbsClass (index) {
+      const lastIndex = this.transformedBreadcrumbs.length - 1
+
+      return lastIndex === index ? 'text-grey-7' : 'text-primary'
     }
   },
 

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

@@ -1,17 +1,15 @@
 <template>
-  <q-input ref="mask" v-model="model" v-bind="$attrs" bottom-slots :type="type" v-on="events">
-    <template v-if="!hideStrengthChecker" #hint>
-      <qas-password-strength-checker v-bind="$props" @password-success="onSuccess" />
-    </template>
-
+  <q-input v-model="model" bottom-slots :type="type">
     <template #append>
       <q-icon class="cursor-pointer" :color="iconColor" :name="icon" @click="toggle" />
     </template>
 
-    <slot v-for="(slot, key) in $slots" :slot="key" :name="key" />
+    <template v-for="(_, name) in $slots" #[name]="context">
+      <slot :name="name" v-bind="context || {}" />
+    </template>
 
-    <template v-for="(slot, key) in $scopedSlots" :slot="key" slot-scope="scope">
-      <slot :name="key" v-bind="scope" />
+    <template v-if="!hideStrengthChecker" #hint>
+      <qas-password-strength-checker v-bind="strengthCheckerProps" :password="model" />
     </template>
   </q-input>
 </template>
@@ -21,6 +19,8 @@ import passwordMixin from '../../mixins/password.js'
 import QasPasswordStrengthChecker from '../password-strength-checker/QasPasswordStrengthChecker.vue'
 
 export default {
+  name: 'QasPasswordInput',
+
   components: {
     QasPasswordStrengthChecker
   },
@@ -37,46 +37,48 @@ export default {
       default: 'primary'
     },
 
-    value: {
+    modelValue: {
       type: String,
       default: ''
     }
   },
 
+  emits: ['update:modelValue'],
+
   data () {
     return {
+      key: 'error',
       toggleType: true
     }
   },
 
   computed: {
-    events () {
-      const { input, ...events } = this.$listeners
-
-      return events
-    },
-
     icon () {
       return this.toggleType ? 'o_visibility_off' : 'o_visibility'
     },
 
     model: {
       get () {
-        return this.value
+        return this.modelValue
       },
 
       set (value) {
-        return this.$emit('input', value)
+        return this.$emit('update:modelValue', value)
       }
     },
 
+    strengthCheckerProps () {
+      const { modelValue, ...props } = this.$props
+      return props
+    },
+
     type () {
       return this.toggleType ? 'password' : 'text'
     }
   },
 
   watch: {
-    value () {
+    modelValue () {
       if (this.$attrs.error) {
         this.$attrs.error = false
         this.$attrs.errorMessage = ''

package/src/components/password-strength-checker/QasPasswordStrengthChecker.vue

@@ -1,7 +1,9 @@
 <template>
   <div v-if="length">
-    <q-linear-progress :color="option.color" rounded :track-color="trackColor" :value="option.progress" />
-    <div class="q-mt-xs text-subtitle2" :class="option.textClass">{{ option.label }}</div>
+    <slot :level="level">
+      <q-linear-progress :color="level.color" :track-color="trackColor" :value="level.progress" />
+      <div class="text-caption" :class="level.textClass">{{ level.label }}</div>
+    </slot>
   </div>
 </template>
 
@@ -9,56 +11,75 @@
 import passwordMixin from '../../mixins/password.js'
 
 export default {
+  name: 'QasPasswordStrengthChecker',
+
   mixins: [passwordMixin],
 
   props: {
-    trackColor: {
-      default: 'blue-grey-1',
-      type: String
+    modelValue: {
+      default: false,
+      type: Boolean
     },
 
-    value: {
+    password: {
       default: '',
       type: String
     }
   },
 
+  emits: ['update:model-value'],
+
   computed: {
     length () {
-      return (this.value || '').length
+      return this.password.length
     },
 
-    option () {
-      if (this.value.match(this.pattern)) {
-        return {
-          color: 'positive',
-          label: 'Forte',
-          progress: 1,
-          textClass: 'text-positive'
-        }
-      }
+    level () {
+      return this.levelsValues[this.score]
+    },
 
-      if (this.length >= this.weak) {
-        return {
-          color: 'warning',
-          label: 'Fraca',
-          progress: 0.5,
-          textClass: 'text-warning'
-        }
-      }
+    levelsValues () {
+      return Object.values(this.levels)
+    },
+
+    score () {
+      let score = 0
+
+      if (this.length >= parseInt(this.minlength)) {
+        score += this.useLowercase
+          ? (this.password.match(/[a-z]/g) ? 1 : 0)
+          : 1
 
-      return {
-        color: 'negative',
-        label: 'Muito fraca',
-        progress: 0.25,
-        textClass: 'text-negative'
+        score += this.useNumbers
+          ? (this.password.match(/[0-9]/g) ? 1 : 0)
+          : 1
+
+        score += this.useSpecial
+          ? (this.password.match(this.specials) ? 1 : 0)
+          : 1
+
+        score += this.useUppercase
+          ? (this.password.match(/[A-Z]/g) ? 1 : 0)
+          : 1
       }
+
+      return score
     }
   },
 
   watch: {
-    isSuccess (value) {
-      value && this.onSuccess()
+    password () {
+      this.emitValue()
+    }
+  },
+
+  created () {
+    this.emitValue()
+  },
+
+  methods: {
+    emitValue () {
+      this.$emit('update:model-value', this.score === 4)
     }
   }
 }

package/src/components/profile/QasProfile.vue

@@ -4,7 +4,7 @@
       <div class="col-lg-5 col-xs-12">
         <div class="no-wrap q-col-gutter-md" :class="directionClasses">
           <div class="justify-center lg:q-mb-none md:q-mr-lg row xs:q-mb-md">
-            <qas-avatar :image="userAvatarImage" :size="getAvatarSize" :title="title" />
+            <qas-avatar :image="userAvatarImage" :size="avatarSize" :title="title" />
           </div>
           <slot>
             <h6 class="text-bold text-h6">{{ title }}</h6>
@@ -13,7 +13,11 @@
         </div>
       </div>
       <slot name="grid">
-        <qas-grid-generator class="col-lg-7 col-xs-12 items-center" :columns="columns" :fields="filterObject(fields, list)" hide-empty-result :result="result" />
+        <qas-grid-generator class="col-lg-7 col-xs-12 items-center" :columns="columns" :fields="filterObject(fields, list)" hide-empty-result :result="result">
+          <template v-for="(_, name) in $slots" #[name]="context">
+            <slot :name="name" v-bind="context || {}" />
+          </template>
+        </qas-grid-generator>
       </slot>
     </div>
   </component>
@@ -23,11 +27,13 @@
 import filterObject from '../../helpers/filter-object'
 import screenMixin from '../../mixins/screen'
 
-import QasAvatar from '../avatar/QasAvatar'
-import QasBox from '../box/QasBox'
-import QasGridGenerator from '../grid-generator/QasGridGenerator'
+import QasAvatar from '../avatar/QasAvatar.vue'
+import QasBox from '../box/QasBox.vue'
+import QasGridGenerator from '../grid-generator/QasGridGenerator.vue'
 
 export default {
+  name: 'QasProfile',
+
   components: {
     QasAvatar,
     QasBox,
@@ -47,10 +53,6 @@ export default {
       default: () => ({})
     },
 
-    hideStatus: {
-      type: Boolean
-    },
-
     list: {
       type: Array,
       default: () => ([])
@@ -80,15 +82,15 @@ export default {
 
   computed: {
     directionClasses () {
-      return this.$_untilMedium ? 'col' : 'row items-center'
+      return this.mx_untilMedium ? 'col' : 'row items-center'
     },
 
     userAvatarImage () {
       return this.result.image
     },
 
-    getAvatarSize () {
-      return this.$_isSmall ? '145px' : '188px'
+    avatarSize () {
+      return this.mx_isSmall ? '145px' : '188px'
     }
   },
 

package/src/components/resizer/QasResizer.vue

@@ -40,7 +40,7 @@ export default {
 
     imageParameters () {
       const parameters = {
-        bucket: this.$environment?.bucket,
+        bucket: process.env.BUCKET,
         key: this.source,
         edits: {}
       }

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

@@ -1,5 +1,5 @@
 <template>
-  <qas-box v-bind="$attrs">
+  <qas-box>
     <q-input v-model="search" clearable :disable="!list.length" outlined :placeholder="placeholder">
       <template #append>
         <q-icon color="primary" name="o_search" />
@@ -7,9 +7,9 @@
     </q-input>
 
     <div class="overflow-auto q-mt-xs relative-position" :style="contentStyle">
-      <slot v-if="hasResults" :results="results" />
+      <slot v-if="hasResults" :results="normalizedResults" />
 
-      <slot v-else-if="!hideEmptySlot" name="empty">
+      <slot v-else-if="useEmptySlot" name="empty-result">
         <div class="absolute-center text-center">
           <q-icon class="q-mb-sm text-center" color="primary" name="o_search" size="38px" />
           <div>Não há resultados disponíveis.</div>
@@ -20,11 +20,13 @@
 </template>
 
 <script>
-import QasBox from '../box/QasBox.vue'
-
 import Fuse from 'fuse.js'
 
+import QasBox from '../box/QasBox.vue'
+
 export default {
+  name: 'QasSearchBox',
+
   components: {
     QasBox
   },
@@ -45,26 +47,29 @@ export default {
       type: String
     },
 
-    hideEmptySlot: {
-      type: Boolean
-    },
-
     list: {
       default: () => [],
       type: Array
     },
 
+    modelValue: {
+      default: '',
+      type: String
+    },
+
     placeholder: {
       default: 'Pesquisar',
       type: String
     },
 
-    value: {
-      default: '',
-      type: String
+    useEmptySlot: {
+      default: true,
+      type: Boolean
     }
   },
 
+  emits: ['empty-result', 'update:modelValue'],
+
   data () {
     return {
       fuse: null,
@@ -94,6 +99,10 @@ export default {
 
     hasResults () {
       return !!this.results.length
+    },
+
+    normalizedResults () {
+      return this.results.map(result => result?.item) || []
     }
   },
 
@@ -103,32 +112,39 @@ export default {
     },
 
     hasResults (value) {
-      !value && this.$emit('emptyResult')
+      !value && this.$emit('empty-result')
     },
 
-    list (value) {
-      this.fuse.list = value
-      this.setResults(this.search)
+    list: {
+      handler (value) {
+        this.fuse.list = value
+        this.setResults(this.search)
+      },
+
+      deep: true
     },
 
     search: {
       handler (value) {
         this.setResults(value)
-        this.$emit('input', value)
+        this.$emit('update:modelValue', value)
       },
 
       immediate: true
     }
   },
 
-  created () {
-    this.search = this.value
+  async created () {
+    this.search = this.modelValue
     this.fuse = new Fuse(this.list, this.defaultFuseOptions)
+    this.setResults()
   },
 
   methods: {
     setResults (value) {
-      this.results = value ? this.fuse.search(value) : this.list
+      this.results = value
+        ? this.fuse.search(value)
+        : this.list.map(listItem => ({ item: listItem }))
     }
   }
 }