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

package/src/components/select/QasSelect.vue

@@ -1,11 +1,5 @@
 <template>
-  <q-select v-model="model" v-bind="attributes" v-on="listeners" @filter="filterOptions">
-    <slot v-for="(slot, key) in $slots" :slot="key" :name="key" />
-
-    <template v-for="(slot, key) in $scopedSlots" :slot="key" slot-scope="scope">
-      <slot :name="key" v-bind="scope" />
-    </template>
-
+  <q-select v-model="model" v-bind="attributes" @filter="filterOptions">
     <template #append>
       <slot name="append">
         <q-icon v-if="searchable" name="o_search" />
@@ -21,11 +15,19 @@
         </q-item>
       </slot>
     </template>
+
+    <template v-for="(_, name) in $slots" #[name]="context">
+      <slot :name="name" v-bind="context || {}" />
+    </template>
   </q-select>
 </template>
 
 <script>
+import Fuse from 'fuse.js'
+
 export default {
+  name: 'QasSelect',
+
   props: {
     fuseOptions: {
       default: () => ({}),
@@ -37,31 +39,33 @@ export default {
       type: String
     },
 
-    options: {
-      default: () => [],
-      type: Array
-    },
-
-    value: {
+    modelValue: {
       default: () => [],
       type: [Array, Object, String, Number]
     },
 
-    valueKey: {
-      default: '',
-      type: String
-    },
-
     noOptionLabel: {
       default: 'Nenhum resultado foi encontrado.',
       type: String
     },
 
+    options: {
+      default: () => [],
+      type: Array
+    },
+
     searchable: {
       type: Boolean
+    },
+
+    valueKey: {
+      default: '',
+      type: String
     }
   },
 
+  emits: ['update:modelValue'],
+
   data () {
     return {
       filteredOptions: [],
@@ -70,20 +74,18 @@ export default {
   },
 
   computed: {
-    model: {
-      get () {
-        return this.value
-      },
-
-      set (value) {
-        this.$emit('input', value)
-      }
-    },
+    attributes () {
+      return {
+        clearable: this.searchable,
+        emitValue: true,
+        mapOptions: true,
+        outlined: true,
 
-    listeners () {
-      const { input, ...events } = this.$listeners
+        ...this.$attrs,
 
-      return events
+        options: this.filteredOptions,
+        useInput: this.searchable
+      }
     },
 
     defaultFuseOptions () {
@@ -110,19 +112,13 @@ export default {
       return this.options.map(item => this.renameKey(item))
     },
 
-    isMultiple () {
-      return this.$attrs.multiple || this.$attrs.multiple === ''
-    },
+    model: {
+      get () {
+        return this.modelValue
+      },
 
-    attributes () {
-      return {
-        emitValue: true,
-        mapOptions: true,
-        outlined: true,
-        clearable: this.searchable,
-        ...this.$attrs,
-        options: this.filteredOptions,
-        useInput: this.searchable
+      set (value) {
+        this.$emit('update:modelValue', value)
       }
     }
   },
@@ -140,13 +136,13 @@ export default {
 
         this.filteredOptions = this.formattedResult
       },
+
       immediate: true
     }
   },
 
   async created () {
     if (this.searchable) {
-      const Fuse = (await import('fuse.js')).default
       this.fuse = new Fuse(this.options, this.defaultFuseOptions)
     }
   },
@@ -166,7 +162,10 @@ export default {
     },
 
     renameKey (item) {
-      const mapKeys = { label: this.labelKey, value: this.valueKey }
+      const mapKeys = {
+        label: this.labelKey,
+        value: this.valueKey
+      }
 
       for (const newKey in mapKeys) {
         if (!item.hasOwnProperty.call(newKey)) {

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

@@ -1,9 +1,9 @@
 <template>
-  <qas-search-box v-bind="$attrs" class="q-pa-md" :fuse-options="fuseOptions" :list="sortedOptions">
+  <qas-search-box class="q-pa-md" :fuse-options="fuseOptions" :list="sortedList">
     <template #default="{ results }">
       <q-list separator>
-        <q-item v-for="(result, index) in results" :key="index">
-          <slot name="item" v-bind="self">
+        <q-item v-for="result in results" :key="result.value">
+          <slot name="item" v-bind="slotData">
             <slot name="item-section" :result="result">
               <q-item-section class="items-start text-bold">
                 <div :class="labelClass" @click="redirectRoute(result)">{{ result.label }}</div>
@@ -11,8 +11,8 @@
             </slot>
 
             <q-item-section avatar>
-              <slot name="item-action" v-bind="self">
-                <qas-btn hide-mobile-label v-bind="setButtonProps(result)" size="sm" @click="handleClick(result)" />
+              <slot name="item-action" v-bind="slotData">
+                <qas-btn v-bind="getButtonProps(result)" @click="handleClick(result)" />
               </slot>
             </q-item-section>
           </slot>
@@ -23,17 +23,22 @@
 </template>
 
 <script>
-import { sortBy } from 'lodash'
+import { sortBy } from 'lodash-es'
+import { screenMixin } from '../../mixins'
 
-import QasBtn from '../btn/QasBtn'
-import QasSearchBox from '../search-box/QasSearchBox'
+import QasBtn from '../btn/QasBtn.vue'
+import QasSearchBox from '../search-box/QasSearchBox.vue'
 
 export default {
+  name: 'QasSelectList',
+
   components: {
     QasBtn,
     QasSearchBox
   },
 
+  mixins: [screenMixin],
+
   props: {
     deleteOnly: {
       type: Boolean
@@ -44,40 +49,41 @@ export default {
       type: Object
     },
 
-    options: {
+    list: {
       default: () => [],
       type: Array
     },
 
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+
     to: {
       default: () => ({}),
       type: Object
     },
 
     toIdentifier: {
-      type: String,
-      default: 'value'
-    },
-
-    value: {
-      type: Array,
-      default: () => []
+      default: 'value',
+      type: String
     }
   },
 
+  emits: [
+    'added',
+    'update:modelValue',
+    'removed'
+  ],
+
   data () {
     return {
-      sortedOptions: [],
+      sortedList: [],
       values: []
     }
   },
 
   computed: {
-    // TODO: parar de usar "mobile".
-    isMobile () {
-      return this.$q.screen.xs
-    },
-
     isRedirectEnabled () {
       return Object.keys(this.to).length
     },
@@ -86,29 +92,34 @@ export default {
       return this.isRedirectEnabled ? 'cursor-pointer' : ''
     },
 
-    self () {
-      return this
+    slotData () {
+      return {
+        add: this.add,
+        handleClick: this.handleClick,
+        remove: this.remove,
+        updateModel: this.updateModel
+      }
     }
   },
 
   watch: {
-    options: {
+    list: {
       handler (value) {
-        if (!this.sortedOptions.length) {
-          this.sortedOptions = value
+        if (!this.sortedList.length) {
+          this.sortedList = value
         }
       },
 
       immediate: true
     },
 
-    value (value) {
+    modelValue (value) {
       this.values = [...value]
     }
   },
 
   created () {
-    this.values = [...this.value]
+    this.values = [...this.modelValue]
 
     this.handleOptions()
   },
@@ -121,18 +132,31 @@ export default {
       this.$emit('added', item)
     },
 
+    getButtonProps ({ value }) {
+      const isSelected = this.values.includes(value)
+
+      return {
+        dense: this.mx_isSmall,
+        hideLabelOnSmallScreen: true,
+        icon: !this.mx_isSmall ? undefined : isSelected ? 'o_close' : 'o_add',
+        label: isSelected ? 'Remover' : 'Adicionar',
+        outline: isSelected,
+        size: 'sm'
+      }
+    },
+
     handleClick (item) {
       return this.values.includes(item.value) ? this.remove(item) : this.add(item)
     },
 
     handleOptions () {
-      if (this.value.length) {
-        return this.sortOptions()
+      if (this.modelValue.length) {
+        return this.sortList()
       }
 
-      const unwatch = this.$watch('value', value => {
-        if (!this.sortedOptions.length) {
-          this.sortOptions()
+      const unwatch = this.$watch('modelValue', () => {
+        if (!this.sortedList.length) {
+          this.sortList()
           unwatch()
         }
       })
@@ -154,25 +178,14 @@ export default {
       this.$emit('removed', item, index)
     },
 
-    setButtonProps ({ value }) {
-      const isSelected = this.values.includes(value)
-
-      return {
-        dense: this.isMobile,
-        icon: !this.isMobile ? undefined : isSelected ? 'o_close' : 'o_add',
-        label: isSelected ? 'Remover' : 'Adicionar',
-        outline: isSelected
-      }
-    },
-
-    sortOptions () {
-      this.sortedOptions = this.deleteOnly
-        ? this.options.filter(option => this.value.includes(option.value))
-        : sortBy(this.options, option => !this.value.includes(option.value))
+    sortList () {
+      this.sortedList = this.deleteOnly
+        ? this.options.filter(option => this.modelValue.includes(option.value))
+        : sortBy(this.options, option => !this.modelValue.includes(option.value))
     },
 
-    updateModel () {
-      this.$emit('input', this.values)
+    updateModel (model) {
+      this.$emit('update:modelValue', model || this.values)
     }
   }
 }

package/src/components/signature-pad/QasSignaturePad.vue

@@ -1,25 +1,27 @@
 <template>
   <div ref="signatureContainer" class="qas-signature-pad relative-position">
     <canvas :id="canvasId" :ref="$attrs.ref" class="qas-signature-pad__canvas rounded-borders vertical-bottom" :height="height" />
-    <q-btn v-if="!isEmpty" class="absolute q-mb-sm q-mr-sm qas-signature-pad__clear" color="primary" dense icon="o_delete" round @click="clearSignature" />
+    <qas-btn v-if="!empty" class="absolute-bottom-right q-mb-sm q-mr-sm" color="primary" dense icon="o_delete" round @click="clearSignature" />
   </div>
 </template>
 
 <script>
-import SignaturePad from 'signature_pad'
 import { uid } from 'quasar'
-import { isEqual } from 'lodash'
+import { isEqual } from 'lodash-es'
+import SignaturePad from 'signature_pad'
 
+import QasBtn from '../btn/QasBtn.vue'
 export default {
-  props: {
-    options: {
-      default: () => ({}),
-      type: Object
-    },
+  name: 'QasSignaturePad',
 
-    type: {
-      default: 'image/png',
-      type: String
+  components: {
+    QasBtn
+  },
+
+  props: {
+    empty: {
+      type: Boolean,
+      default: true
     },
 
     height: {
@@ -27,62 +29,81 @@ export default {
       type: String
     },
 
-    isEmpty: {
-      type: Boolean,
-      default: true
+    signatureOptions: {
+      default: () => ({}),
+      type: Object
+    },
+
+    type: {
+      default: 'image/png',
+      type: String
     }
   },
 
+  emits: ['update:empty'],
+
+  expose: ['clearSignature', 'saveSignature', 'updateEmptyModel'],
+
   data () {
     return {
+      canvasId: uid(),
+      hasEndStrokeEvent: false,
       signaturePad: null,
-      canvasId: uid()
+      SignaturePad: null
     }
   },
 
   watch: {
-    options (newValue, oldValue) {
+    async signatureOptions (newValue, oldValue) {
       if (isEqual(newValue, oldValue)) return
 
-      this.setupSignaturePad()
-      this.isEmptyEmitter()
+      await this.setupSignaturePad()
+      this.updateEmptyModel()
     }
   },
 
-  destroyed () {
-    window.removeEventListener('resize', this.setCanvasWidth)
-  },
-
-  mounted () {
+  async mounted () {
     window.addEventListener('resize', this.setCanvasWidth)
     this.setCanvasWidth()
+
     this.setupSignaturePad()
   },
 
-  methods: {
-    setupSignaturePad () {
-      this.signaturePad = new SignaturePad(document.getElementById(this.canvasId), this.options)
-      this.signaturePad.onEnd = this.isEmptyEmitter
-      this.clearSignature()
-    },
-
-    saveSignature () {
-      return this.signaturePad.toDataURL(this.type)
-    },
+  unmounted () {
+    window.removeEventListener('resize', this.setCanvasWidth)
+    this.signaturePad.off()
+  },
 
+  methods: {
     clearSignature () {
       this.signaturePad.clear()
-      this.isEmptyEmitter()
+      this.updateEmptyModel()
     },
 
-    isEmptyEmitter () {
-      this.$emit('update:isEmpty', this.signaturePad.isEmpty())
+    saveSignature () {
+      return this.signaturePad.toDataURL(this.type)
     },
 
     setCanvasWidth () {
       const signatureContainer = this.$refs.signatureContainer
       const canvasElement = signatureContainer.querySelector('canvas')
       canvasElement.setAttribute('width', signatureContainer.offsetWidth)
+    },
+
+    setupSignaturePad () {
+      const canvasElement = document.getElementById(this.canvasId)
+      this.signaturePad = new SignaturePad(canvasElement, this.signatureOptions)
+
+      if (!this.hasEndStrokeEvent) {
+        this.signaturePad.addEventListener('endStroke', this.updateEmptyModel)
+      }
+
+      this.hasEndStrokeEvent = true
+      this.clearSignature()
+    },
+
+    updateEmptyModel () {
+      this.$emit('update:empty', this.signaturePad.isEmpty())
     }
   }
 }
@@ -90,11 +111,6 @@ export default {
 
 <style lang="scss">
 .qas-signature-pad {
-  &__clear {
-    bottom: 0;
-    right: 0;
-  }
-
   &__canvas {
     border: 1px solid $grey-3;
   }

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

@@ -1,10 +1,10 @@
 <template>
   <div>
-    <qas-uploader ref="uploader" v-model="uploader" :label="uploadLabel" :readonly="readonly" v-bind="$attrs" :use-resize="false">
+    <qas-uploader ref="uploader" v-model="model" :label="uploadLabel" :readonly="readonly" :use-resize="false" v-bind="$attrs">
       <template #header="{ scope }">
-        <div class="cursor-pointer flex flex-center full-width justify-between no-border no-wrap q-gutter-xs text-white transparent" :class="headerClasses" @click="openDialog">
+        <div class="cursor-pointer flex flex-center full-width justify-between no-border no-wrap q-gutter-xs text-white transparent" :class="headerClass" @click="openDialog">
           <div class="col column items-start justify-center">
-            <div v-if="scope.label" class="q-uploader__title">{{ scope.label }}</div>
+            <div v-if="uploadLabel" class="q-uploader__title">{{ uploadLabel }}</div>
           </div>
 
           <q-btn v-if="!readonly" dense flat icon="o_add" round @click="openDialog" />
@@ -21,7 +21,7 @@
       </template>
 
       <template #description>
-        <qas-signature-pad ref="signaturePadModal" height="250" :is-empty.sync="isEmpty" />
+        <qas-signature-pad ref="signaturePadModal" v-model:empty="isEmpty" height="250" />
       </template>
 
       <template #actions>
@@ -40,6 +40,8 @@ import { base64ToBlob } from '../../helpers'
 import { NotifyError } from '../../plugins'
 
 export default {
+  name: 'QasSignatureUploader',
+
   components: {
     QasDialog,
     QasUploader,
@@ -57,7 +59,7 @@ export default {
       type: String
     },
 
-    value: {
+    modelValue: {
       default: '',
       type: String
     },
@@ -72,6 +74,8 @@ export default {
     }
   },
 
+  emits: ['update:modelValue'],
+
   data () {
     return {
       isOpenedDialog: false,
@@ -81,24 +85,22 @@ export default {
   },
 
   computed: {
-    uploader: {
+    model: {
       get () {
-        return this.value
+        return this.modelValue
       },
 
       set (value) {
-        this.$emit('input', value)
+        this.$emit('update:modelValue', value)
       }
     },
 
-    headerClasses () {
+    headerClass () {
       return `q-pa-${this.readonly ? 'md' : 'sm'}`
     }
   },
 
   methods: {
-    base64ToBlob,
-
     NotifyError,
 
     openDialog () {
@@ -120,7 +122,7 @@ export default {
 
     removeSignature () {
       this.$refs.buttonCleanFiles.$el.click()
-      this.$emit('input')
+      this.$emit('update:modelValue')
     },
 
     upload (scope) {
@@ -131,7 +133,7 @@ export default {
         const file = new File([blob], `${fileName}.${extension}`, { type: this.type })
 
         scope.addFiles([file])
-      } catch (error) {
+      } catch {
         NotifyError('Ops! Erro ao enviar sua assinatura.')
       }
     }