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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.8.0-beta.2",
+  "version": "3.8.0-beta.3",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",

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

@@ -6,34 +6,32 @@
 
     <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 :key="index" class="col-12 q-mt-md">
-            <div>
-              <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)" />
-              </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">
-                  <qas-form-generator v-model="nested[index]" :class="formClasses" :columns="formColumns" :disable="isDisabledRow(row)" :errors="transformedErrors[index]" :fields="children" :fields-props="fieldsProps" @update:model-value="updateValuesFromInput($event, index)">
-                    <template v-for="(slot, key) in $slots" #[key]="scope">
-                      <slot v-bind="scope" :disabled="isDisabledRow(row)" :errors="transformedErrors" :index="index" :name="key" />
-                    </template>
-                  </qas-form-generator>
-                </slot>
-
-                <div v-if="hasInlineActions(row)" class="flex items-center qas-nested-fields__actions">
-                  <qas-actions-menu v-bind="actionsMenuProps" :list="getActionsList(index, row)" />
-                </div>
+        <template v-for="(row, index) in nested" :key="`row-${index}`">
+          <div v-if="!row[destroyKey]" :id="`row-${index}`" class="full-width q-mt-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)" />
+            </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">
+                <qas-form-generator v-model="nested[index]" :class="formClasses" :columns="formColumns" :disable="isDisabledRow(row)" :errors="transformedErrors[index]" :fields="children" :fields-props="fieldsProps" @update:model-value="updateValuesFromInput($event, index)">
+                  <template v-for="(slot, key) in $slots" #[key]="scope">
+                    <slot v-bind="scope" :disabled="isDisabledRow(row)" :errors="transformedErrors" :index="index" :name="key" />
+                  </template>
+                </qas-form-generator>
+              </slot>
+
+              <div v-if="hasInlineActions(row)" class="flex items-center qas-nested-fields__actions">
+                <qas-actions-menu v-bind="actionsMenuProps" :list="getActionsList(index, row)" />
               </div>
+            </div>
 
-              <div class="col-12">
-                <slot :fields="children" :index="index" :model="nested[index]" name="custom-fields" :update-value="updateValuesFromInput" />
-              </div>
+            <div class="col-12">
+              <slot :fields="children" :index="index" :model="nested[index]" name="custom-fields" :update-value="updateValuesFromInput" />
             </div>
           </div>
-        </div>
+        </template>
       </component>
 
       <div v-if="useAdd" class="q-mt-md">
@@ -68,6 +66,7 @@ import QasFormGenerator from '../form-generator/QasFormGenerator.vue'
 import QasInput from '../input/QasInput.vue'
 import QasLabel from '../label/QasLabel.vue'
 import { TransitionGroup } from 'vue'
+import { extend } from 'quasar'
 
 import { constructObject } from '../../helpers'
 
@@ -241,7 +240,7 @@ export default {
 
   data () {
     return {
-      destroyKeyList: {},
+      nested: [],
       hasDestroyAlways: true
     }
   },
@@ -293,18 +292,18 @@ export default {
 
     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()
@@ -379,11 +378,9 @@ export default {
     * ao invés de adicionar a flag [destroyKey]
     */
     destroy (index, row) {
-      const [removedRow] = this.nested.splice(index, 1)
-
-      if (!this.useRemoveOnDestroy && row[this.identifierItemKey]) {
-        this.destroyKeyList[row[this.identifierItemKey]] = { row: removedRow, index }
-      }
+      !row[this.identifierItemKey] || this.useRemoveOnDestroy
+        ? this.nested.splice(index, 1)
+        : this.nested.splice(index, 1, { [this.destroyKey]: true, ...row })
 
       this.$qas.logger.group('QasNestedFields - destroy', [{ index, row }])
 
@@ -391,23 +388,13 @@ export default {
     },
 
     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)
+      this.$emit('update:modelValue', this.nested)
     },
 
     updateValuesFromInput (value, index) {
       this.nested.splice(index, 1, value)
 
-      return this.updateModelValue()
+      this.updateModelValue()
     },
 
     setDefaultNestedValue () {
@@ -436,9 +423,17 @@ export default {
       return firstElementToBeFocused?.focus && firstElementToBeFocused.focus()
     },
 
-    getRowLabel (rowKey) {
+    getRealRowIndex (index) {
+      return [...this.nested].splice(0, index).filter(item => !item[this.destroyKey]).length
+    },
+
+    getRowLabel (rowIndex) {
       if (this.rowLabel) {
-        return this.useIndexLabel ? `${this.rowLabel} ${rowKey + 1}` : this.rowLabel
+        if (!this.useIndexLabel) return this.rowLabel
+
+        const index = this.useRemoveOnDestroy ? rowIndex : this.getRealRowIndex(rowIndex)
+
+        return `${this.rowLabel} ${index + 1}`
       }
 
       return this.fieldLabel