@bildvitta/quasar-ui-asteroid 3.8.0-beta.1 → 3.8.0-beta.2

package/src/components/label/QasLabel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-bold text-subtitle2" :class="labelClass">
+  <div class="text-subtitle2" :class="classes">
     <slot :label-with-suffix="labelWithSuffix">{{ labelWithSuffix }}</slot>
   </div>
 </template>
@@ -23,17 +23,30 @@ export default {
 
     margin: {
       default: 'sm',
-      type: String
+      type: String,
+      validator: value => {
+        const marginList = ['none', 'auto', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl']
+
+        return marginList.includes(value)
+      }
+    },
+
+    color: {
+      type: String,
+      default: 'grey-9'
     }
   },
 
   computed: {
-    labelClass () {
-      return `q-mb-${this.margin}`
-    },
-
     labelWithSuffix () {
       return addCounterSuffix(this.label, parseFloat(this.count))
+    },
+
+    classes () {
+      return [
+        `q-mb-${this.margin}`,
+        `text-${this.color}`
+      ]
     }
   }
 }

package/src/components/nested-fields/QasNestedFields.vue

@@ -7,12 +7,12 @@
     <div ref="inputContent">
       <component :is="componentTag" v-bind="componentProps">
         <div v-for="(row, index) in nested" :id="`row-${index}`" :key="`row-${index}`" class="full-width">
-          <div v-if="!row[destroyKey]" :key="index" class="col-12 q-mt-md">
+          <div :key="index" class="col-12 q-mt-md">
             <div>
-              <div class="flex items-center justify-between q-py-md">
+              <header class="flex items-center q-py-md" :class="headerClasses">
                 <qas-label v-if="!useSingleLabel" :label="getRowLabel(index)" />
                 <qas-actions-menu v-if="hasBlockActions(row)" v-bind="actionsMenuProps" :list="getActionsList(index, row)" />
-              </div>
+              </header>
 
               <div ref="formGenerator" class="col-12 justify-between q-col-gutter-x-md row">
                 <slot :errors="transformedErrors" :fields="children" :index="index" name="fields" :update-value="updateValuesFromInput">
@@ -70,7 +70,6 @@ import QasLabel from '../label/QasLabel.vue'
 import { TransitionGroup } from 'vue'
 
 import { constructObject } from '../../helpers'
-import { extend } from 'quasar'
 
 export default {
   name: 'QasNestedFields',
@@ -242,7 +241,7 @@ export default {
 
   data () {
     return {
-      nested: [],
+      destroyKeyList: {},
       hasDestroyAlways: true
     }
   },
@@ -290,18 +289,22 @@ export default {
 
     showAddFirstInputButton () {
       return this.useFirstInputButton && !this.nested.length
+    },
+
+    headerClasses () {
+      return this.useSingleLabel ? 'justify-end' : 'justify-between'
+    },
+
+    nested () {
+      return this.modelValue.filter(item => !item[this.destroyKey])
+    },
+
+    hasDestroyKeyList () {
+      return !!Object.keys(this.destroyKeyList).length
     }
   },
 
   watch: {
-    modelValue: {
-      handler (value) {
-        this.nested = extend(true, [], value)
-      },
-      deep: true,
-      immediate: true
-    },
-
     rowObject: {
       handler () {
         this.setDefaultNestedValue()
@@ -364,18 +367,7 @@ export default {
 
       this.$qas.logger.group('QasNestedFields - add', [payload])
 
-      return this.updateModelValue()
-    },
-
-    setFocus () {
-      const { formGenerator } = this.$refs
-      const firstElementToBeFocused = formGenerator.pop().querySelector('input, select, textarea')
-
-      return firstElementToBeFocused?.focus && firstElementToBeFocused.focus()
-    },
-
-    updateModelValue (value) {
-      return this.$emit('update:modelValue', value || this.nested)
+      this.updateModelValue()
     },
 
     /*
@@ -387,19 +379,35 @@ export default {
     * ao invés de adicionar a flag [destroyKey]
     */
     destroy (index, row) {
-      !row[this.identifierItemKey] || this.useRemoveOnDestroy
-        ? this.nested.splice(index, 1)
-        : this.nested.splice(index, 1, { [this.destroyKey]: true, ...row })
+      const [removedRow] = this.nested.splice(index, 1)
+
+      if (!this.useRemoveOnDestroy && row[this.identifierItemKey]) {
+        this.destroyKeyList[row[this.identifierItemKey]] = { row: removedRow, index }
+      }
 
       this.$qas.logger.group('QasNestedFields - destroy', [{ index, row }])
 
-      return this.updateModelValue()
+      this.updateModelValue()
+    },
+
+    updateModelValue () {
+      const nested = [...this.nested]
+
+      if (this.hasDestroyKeyList) {
+        for (const key in this.destroyKeyList) {
+          const { row, index } = this.destroyKeyList[key]
+
+          nested.splice(index, 0, { ...row, [this.destroyKey]: true })
+        }
+      }
+
+      this.$emit('update:modelValue', nested)
     },
 
     updateValuesFromInput (value, index) {
       this.nested.splice(index, 1, value)
 
-      return this.updateModelValue(null, index)
+      return this.updateModelValue()
     },
 
     setDefaultNestedValue () {
@@ -419,6 +427,15 @@ export default {
       })
     },
 
+    async setFocus () {
+      await this.$nextTick()
+
+      const { formGenerator } = this.$refs
+      const firstElementToBeFocused = formGenerator.pop().querySelector('input, select, textarea')
+
+      return firstElementToBeFocused?.focus && firstElementToBeFocused.focus()
+    },
+
     getRowLabel (rowKey) {
       if (this.rowLabel) {
         return this.useIndexLabel ? `${this.rowLabel} ${rowKey + 1}` : this.rowLabel

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

@@ -1,19 +1,6 @@
 <template>
   <div>
-    <qas-uploader ref="uploader" v-model="model" :label="uploadLabel" v-bind="$attrs" :readonly="readonly" :use-resize="false">
-      <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="headerClass" @click="openDialog">
-          <div class="col column items-start justify-center">
-            <div v-if="uploadLabel" class="q-uploader__title">{{ uploadLabel }}</div>
-          </div>
-
-          <qas-btn v-if="!readonly" color="white" icon="sym_r_add" :use-hover-on-white-color="false" variant="tertiary" @click="openDialog" />
-
-          <qas-btn ref="forceUpload" class="hidden" @click="upload(scope)" />
-          <qas-btn ref="buttonCleanFiles" class="hidden" @click="scope.removeUploadedFiles" />
-        </div>
-      </template>
-    </qas-uploader>
+    <qas-uploader ref="uploader" v-model="model" :add-button-fn="openDialog" :use-resize="false" v-bind="defaultUploaderProps" />
 
     <qas-dialog v-model="isOpenedDialog" v-bind="defaultDialogProps">
       <template #header>
@@ -30,7 +17,6 @@
 </template>
 
 <script>
-import QasBtn from '../btn/QasBtn.vue'
 import QasDialog from '../dialog/QasDialog.vue'
 import QasUploader from '../uploader/QasUploader.vue'
 import QasSignaturePad from '../signature-pad/QasSignaturePad.vue'
@@ -41,19 +27,20 @@ export default {
   name: 'QasSignatureUploader',
 
   components: {
-    QasBtn,
     QasDialog,
     QasUploader,
     QasSignaturePad
   },
 
+  inheritAttrs: false,
+
   props: {
     dialogProps: {
       type: Object,
       default: () => ({})
     },
 
-    uploadLabel: {
+    modelValue: {
       default: '',
       type: String
     },
@@ -63,18 +50,14 @@ export default {
       type: String
     },
 
-    modelValue: {
-      default: '',
-      type: String
-    },
-
     type: {
       default: 'image/png',
       type: String
     },
 
-    readonly: {
-      type: Boolean
+    uploaderProps: {
+      type: Object,
+      default: () => ({})
     }
   },
 
@@ -82,27 +65,20 @@ export default {
 
   data () {
     return {
-      isOpenedDialog: false,
+      base64: '',
       isEmpty: true,
-      base64: ''
+      isOpenedDialog: false
     }
   },
 
   computed: {
-    model: {
-      get () {
-        return this.modelValue
-      },
-
-      set (value) {
-        this.$emit('update:modelValue', value)
+    defaultUploaderProps () {
+      return {
+        addButtonLabel: 'Adicionar assinatura',
+        ...this.uploaderProps
       }
     },
 
-    headerClass () {
-      return `q-pa-${this.readonly ? 'md' : 'sm'}`
-    },
-
     defaultDialogProps () {
       return {
         maxWidth: '620px',
@@ -114,13 +90,14 @@ export default {
       }
     },
 
-    signaturePadWidth () {
-      const sizes = {
-        [this.$qas.screen.isSmall]: { width: '100%' },
-        [this.$qas.screen.isMedium]: { width: '570px' },
-        [this.$qas.screen.isLarge]: { width: '350px' }
+    model: {
+      get () {
+        return this.modelValue
+      },
+
+      set (value) {
+        this.$emit('update:modelValue', value)
       }
-      return sizes.true
     },
 
     signaturePadHeight () {
@@ -131,12 +108,30 @@ export default {
       }
 
       return sizes.true
+    },
+
+    signaturePadWidth () {
+      const sizes = {
+        [this.$qas.screen.isSmall]: { width: '100%' },
+        [this.$qas.screen.isMedium]: { width: '570px' },
+        [this.$qas.screen.isLarge]: { width: '350px' }
+      }
+
+      return sizes.true
+    },
+
+    uploaderScope () {
+      return this.$refs?.uploader?.uploader
     }
   },
 
   methods: {
     NotifyError,
 
+    closeSignature () {
+      this.isOpenedDialog = false
+    },
+
     openDialog () {
       if (this.readonly) return
 
@@ -144,31 +139,24 @@ export default {
     },
 
     getSignatureData () {
-      this.$refs.buttonCleanFiles.$el.click()
-      this.base64 = this.$refs.signaturePadModal.getSignatureData()
-      this.$refs.forceUpload.$el.click()
-      this.closeSignature()
-    },
+      this.uploaderScope.removeUploadedFiles()
 
-    closeSignature () {
-      this.isOpenedDialog = false
-    },
+      this.base64 = this.$refs.signaturePadModal.getSignatureData()
 
-    removeSignature () {
-      this.$refs.buttonCleanFiles.$el.click()
-      this.$emit('update:modelValue')
+      this.upload(this.uploaderScope)
+      this.closeSignature()
     },
 
-    upload (scope) {
+    upload () {
       try {
         const fileName = this.signatureLabel.split(' ').join('-')
         const extension = this.type.split('/').pop() || 'png'
         const blob = base64ToBlob(this.base64)
         const file = new File([blob], `${fileName}.${extension}`, { type: this.type })
 
-        scope.addFiles([file])
+        this.uploaderScope.addFiles([file])
       } catch {
-        NotifyError('Ops! Erro ao enviar sua assinatura.')
+        NotifyError('Falha ao carregar assinatura.')
       }
     }
   }

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

@@ -13,11 +13,6 @@ props:
     desc: Model do componente, retorna url da imagem upada, usando para v-model.
     type: String
 
-  readonly:
-    desc: Controla se o componente vai ser apenas para visualização ou pode também fazer upload.
-    default: image/png
-    type: String
-
   signature-label:
     desc: Rótulo do componente de assinatura.
     default: {}
@@ -27,10 +22,11 @@ props:
     desc: Tipo da imagem gerada.
     default: image/png
     type: String
-
-  upload-label:
-    desc: Rótulo do uploader.
-    type: String
+  
+  uploader-props:
+    desc: Propriedades repassadas para o QasUploader.
+    default: {}
+    type: Object
 
 events:
   '@update:model-value -> function(value)':

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

@@ -1,6 +1,6 @@
 <template>
   <qas-box class="q-px-lg q-py-md">
-    <q-table ref="table" class="bg-white qas-table-generator text-grey-8" :class="tableClass" v-bind="attributes">
+    <q-table ref="table" class="bg-white qas-table-generator text-grey-8" v-bind="attributes">
       <template v-for="(_, name) in slots" #[name]="context">
         <slot :name="name" v-bind="context" />
       </template>
@@ -65,6 +65,15 @@ export default {
 
     useExternalLink: {
       type: Boolean
+    },
+
+    useStickyHeader: {
+      type: Boolean
+    },
+
+    stickyHeaderTableHeight: {
+      default: '528px',
+      type: String
     }
   },
 
@@ -110,12 +119,14 @@ export default {
 
     attributes () {
       const attributes = {
+        class: this.tableClass,
         columns: this.columnsByFields,
-        rows: this.resultsByFields,
         flat: true,
         hideBottom: true,
         pagination: { rowsPerPage: 0 },
         rowKey: this.rowKey,
+        rows: this.resultsByFields,
+        style: this.tableStyle,
 
         // Eventos.
         onRowClick: this.$attrs.onRowClick && this.onRowClick
@@ -196,7 +207,16 @@ export default {
     },
 
     tableClass () {
-      return this.$qas.screen.isSmall && 'qas-table-generator--mobile'
+      return {
+        'qas-table-generator--mobile': this.$qas.screen.isSmall,
+        'qas-table-generator--sticky-header': this.useStickyHeader
+      }
+    },
+
+    tableStyle () {
+      return {
+        maxHeight: this.useStickyHeader ? this.stickyHeaderTableHeight : 'initial'
+      }
     },
 
     hasScrollOnGrab () {
@@ -339,5 +359,21 @@ export default {
       margin-left: 10px;
     }
   }
+
+  &--sticky-header {
+    .q-table thead tr {
+      th {
+        position: sticky;
+        z-index: 1;
+      }
+
+      &:first-child {
+        th {
+          background-color: white;
+          top: 0;
+        }
+      }
+    }
+  }
 }
 </style>

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

@@ -46,6 +46,16 @@ props:
     default: false
     type: Boolean
 
+  use-sticky-header:
+    desc: Usado para manter o header da tabela (thead) fixo.
+    default: false
+    type: Boolean
+
+  sticky-header-table-height:
+    desc: Usado para definir a altura máxima da tabela e exibir o scroll vertical quando a propriedade "use-sticky-header" é utilizada.
+    default: 528px
+    type: String
+
 slots:
   body:
     desc: Acesso direto dentro do `tbody`.