@bildvitta/quasar-ui-asteroid 3.0.0-beta.17 → 3.0.0-beta.18

package/dist/api/QasFormGenerator.json

@@ -38,16 +38,44 @@
         "{ email: { name: 'email', type: 'email', label: 'E-mail' } }"
       ]
     },
+    "fieldset": {
+      "desc": "Lista para agrupar elementos por rótulo (label).",
+      "default": {},
+      "type": "Object",
+      "examples": [
+        "{ personalInformation: { label: 'Informações pessoais', fields: [name, email] } }"
+      ]
+    },
+    "fieldset-gutter": {
+      "desc": "Espaçamento entre rótulos (label).",
+      "default": "lg",
+      "type": [
+        "String",
+        "Boolean"
+      ],
+      "examples": [
+        "xs",
+        "sm",
+        "md",
+        "lg",
+        "xl",
+        false
+      ]
+    },
     "gutter": {
       "desc": "Espaçamento entre colunas.",
       "default": "md",
-      "type": "String",
+      "type": [
+        "String",
+        "Boolean"
+      ],
       "examples": [
         "xs",
         "sm",
         "md",
         "lg",
-        "xl"
+        "xl",
+        false
       ]
     },
     "model-value": {
@@ -78,6 +106,9 @@
       }
     }
   },
+  "legend-[nome-da-chave]": {
+    "desc": "Acessa o slot de um rótulo (label)."
+  },
   "events": {
     "@update:model-value -> function(value)": {
       "desc": "Dispara quando o model-value altera, também usado para v-model.",

package/dist/api/QasSelect.json

@@ -63,7 +63,8 @@
         "Array",
         "Object",
         "String",
-        "Number"
+        "Number",
+        "Boolean"
       ],
       "examples": [
         "v-model=\"value\""
@@ -114,7 +115,8 @@
             "Array",
             "Object",
             "String",
-            "Number"
+            "Number",
+            "Boolean"
           ]
         }
       }

package/dist/asteroid.cjs.js

@@ -1,5 +1,5 @@
 /*!
-* @bildvitta/quasar-ui-asteroid v3.0.0-beta.17
+* @bildvitta/quasar-ui-asteroid v3.0.0-beta.18
 * (c) 2022 Bild & Vitta <systemteam@bild.com.br>
 * Released under the MIT License.
 */
@@ -3894,7 +3894,7 @@ const _hoisted_4$7 = {
   key: 1,
   class: "q-uploader__subtitle"
 };
-const _hoisted_5$5 = ["multiple"];
+const _hoisted_5$5 = ["accept", "multiple"];
 const _hoisted_6$3 = { class: "col-12 q-col-gutter-md row" };
 const _hoisted_7$3 = { class: "col items-center no-wrap row" };
 const _hoisted_8$2 = {
@@ -3966,6 +3966,7 @@ function render$q(_ctx, _cache, $props, $setup, $data, $options) {
                 : vue.createCommentVNode("v-if", true),
               vue.createElementVNode("input", {
                 ref: "hiddenInput",
+                accept: $options.attributes.accept,
                 class: "qas-uploader__input",
                 multiple: $options.isMultiple,
                 type: "file"
@@ -5151,7 +5152,9 @@ var generatorMixin = {
     gutter: {
       default: 'md',
       type: [String, Boolean],
-      validator: value => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      validator: value => {
+        return typeof value === 'boolean' || ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      }
     }
   },
 
@@ -5200,7 +5203,13 @@ var generatorMixin = {
     },
 
     mx_handleColumnsByIndex (index, isGridGenerator) {
-      const fields = isGridGenerator ? this.fields : this.groupedFields.visible;
+      const fields = isGridGenerator ? this.fields : {};
+
+      if (!isGridGenerator) {
+        for (const key in this.normalizedFields) {
+          Object.assign(fields, this.normalizedFields[key].fields.visible);
+        }
+      }
 
       if (!Array.isArray(fields)) {
         index = Object.keys(fields).findIndex(field => field === index);
@@ -5250,6 +5259,19 @@ var script$l = {
       default: () => ({}),
       required: true,
       type: Object
+    },
+
+    fieldset: {
+      default: () => ({}),
+      type: Object
+    },
+
+    fieldsetGutter: {
+      default: 'lg',
+      type: [String, Boolean],
+      validator: value => {
+        return typeof value === 'boolean' || ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      }
     }
   },
 
@@ -5259,6 +5281,8 @@ var script$l = {
     groupedFields () {
       const fields = { hidden: {}, visible: {} };
 
+      if (this.hasFieldset) return fields
+
       for (const key in this.fields) {
         const field = this.fields[key];
         fields[field.type === 'hidden' ? 'hidden' : 'visible'][key] = field;
@@ -5275,6 +5299,56 @@ var script$l = {
       }
 
       return fields
+    },
+
+    normalizedFields () {
+      if (!this.hasFieldset) {
+        return {
+          default: {
+            fields: this.groupedFields
+          }
+        }
+      }
+
+      const fields = {};
+
+      for (const fieldsetKey in this.fieldset) {
+        const fieldsetItem = this.fieldset[fieldsetKey];
+
+        fields[fieldsetKey] = {
+          label: fieldsetItem.label,
+          fields: { hidden: {}, visible: {} }
+        };
+
+        for (const fieldName of fieldsetItem.fields) {
+          const field = this.fields[fieldName];
+
+          Object.assign(
+            fields[fieldsetKey].fields[
+              field.type === 'hidden' ? 'hidden' : 'visible'
+            ],
+            {
+              [fieldName]: field
+            }
+          );
+        }
+      }
+
+      return fields
+    },
+
+    hasFieldset () {
+      return !!Object.keys(this.fieldset).length
+    },
+
+    fieldsetClasses () {
+      const classes = ['row'];
+
+      if (this.fieldsetGutter) {
+        classes.push(`q-col-gutter-${this.fieldsetGutter}`);
+      }
+
+      return classes
     }
   },
 
@@ -5289,40 +5363,59 @@ var script$l = {
 };
 
 function render$l(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_qas_label = vue.resolveComponent("qas-label");
   const _component_qas_field = vue.resolveComponent("qas-field");
 
-  return (vue.openBlock(), vue.createElementBlock("div", null, [
-    vue.createElementVNode("div", {
-      class: vue.normalizeClass(_ctx.mx_classes)
-    }, [
-      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.groupedFields.visible, (field, key) => {
-        return (vue.openBlock(), vue.createElementBlock("div", {
-          key: key,
-          class: vue.normalizeClass(_ctx.mx_getFieldClass(key))
-        }, [
-          vue.renderSlot(_ctx.$slots, `field-${field.name}`, { field: field }, () => [
-            vue.createVNode(_component_qas_field, vue.mergeProps($props.fieldsProps[field.name], {
-              error: $props.errors[key],
-              field: field,
-              "model-value": $props.modelValue[field.name],
-              "onUpdate:modelValue": $event => ($options.updateModelValue(field.name, $event))
-            }), null, 16 /* FULL_PROPS */, ["error", "field", "model-value", "onUpdate:modelValue"])
-          ])
-        ], 2 /* CLASS */))
-      }), 128 /* KEYED_FRAGMENT */))
-    ], 2 /* CLASS */),
-    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.groupedFields.hidden, (field, key) => {
-      return (vue.openBlock(), vue.createElementBlock("div", { key: key }, [
-        vue.renderSlot(_ctx.$slots, `field-${field.name}`, { field: field }, () => [
-          vue.createVNode(_component_qas_field, vue.mergeProps($props.fieldsProps[field.name], {
-            field: field,
-            "model-value": $props.modelValue[field.name],
-            "onUpdate:modelValue": $event => ($options.updateModelValue(field.name, $event))
-          }), null, 16 /* FULL_PROPS */, ["field", "model-value", "onUpdate:modelValue"])
+  return (vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass($options.fieldsetClasses)
+  }, [
+    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.normalizedFields, (fieldsetItem, fieldsetItemKey) => {
+      return (vue.openBlock(), vue.createElementBlock("div", {
+        key: fieldsetItemKey,
+        class: "full-width"
+      }, [
+        (fieldsetItem.label)
+          ? vue.renderSlot(_ctx.$slots, `legend-${fieldsetItemKey}`, { key: 0 }, () => [
+              vue.createVNode(_component_qas_label, {
+                label: fieldsetItem.label
+              }, null, 8 /* PROPS */, ["label"])
+            ])
+          : vue.createCommentVNode("v-if", true),
+        vue.createElementVNode("div", null, [
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(_ctx.mx_classes)
+          }, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(fieldsetItem.fields.visible, (field, key) => {
+              return (vue.openBlock(), vue.createElementBlock("div", {
+                key: key,
+                class: vue.normalizeClass(_ctx.mx_getFieldClass(key))
+              }, [
+                vue.renderSlot(_ctx.$slots, `field-${field.name}`, { field: field }, () => [
+                  vue.createVNode(_component_qas_field, vue.mergeProps($props.fieldsProps[field.name], {
+                    error: $props.errors[key],
+                    field: field,
+                    "model-value": $props.modelValue[field.name],
+                    "onUpdate:modelValue": $event => ($options.updateModelValue(field.name, $event))
+                  }), null, 16 /* FULL_PROPS */, ["error", "field", "model-value", "onUpdate:modelValue"])
+                ])
+              ], 2 /* CLASS */))
+            }), 128 /* KEYED_FRAGMENT */))
+          ], 2 /* CLASS */),
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(fieldsetItem.fields.hidden, (field, key) => {
+            return (vue.openBlock(), vue.createElementBlock("div", { key: key }, [
+              vue.renderSlot(_ctx.$slots, `field-${field.name}`, { field: field }, () => [
+                vue.createVNode(_component_qas_field, vue.mergeProps($props.fieldsProps[field.name], {
+                  field: field,
+                  "model-value": $props.modelValue[field.name],
+                  "onUpdate:modelValue": $event => ($options.updateModelValue(field.name, $event))
+                }), null, 16 /* FULL_PROPS */, ["field", "model-value", "onUpdate:modelValue"])
+              ])
+            ]))
+          }), 128 /* KEYED_FRAGMENT */))
         ])
       ]))
     }), 128 /* KEYED_FRAGMENT */))
-  ]))
+  ], 2 /* CLASS */))
 }
 
 script$l.render = render$l;
@@ -5790,7 +5883,6 @@ var script$k = {
   data () {
     return {
       cachedResult: {},
-      hasResult: false,
       isSubmitting: false,
       showDialog: false,
       ignoreRouterGuard: false,
@@ -5847,16 +5939,6 @@ var script$k = {
   },
 
   watch: {
-    mx_fields (fields) {
-      const models = { ...this.getModelsByFields(fields), ...this.modelValue };
-
-      this.$emit('update:modelValue', models);
-
-      if (!this.hasResult && this.useDialogOnUnsavedChanges) {
-        this.cachedResult = quasar.extend(true, {}, models);
-      }
-    },
-
     isSubmitting (value) {
       this.$emit('update:submitting', value);
     }
@@ -5926,37 +6008,33 @@ var script$k = {
 
         const { errors, fields, metadata, result } = response.data;
 
+        const modelValue = { ...this.getModelsByFields(fields), ...this.modelValue };
+
         this.mx_setErrors(errors);
         this.mx_setFields(fields);
         this.mx_setMetadata(metadata);
 
         this.mx_updateModels({
-          errors: errors,
+          errors,
           fields: this.mx_fields,
           metadata
         });
 
+        result && Object.assign(modelValue, result);
+
         this.$qas.logger.group(
           `QasFormView - fetch -> resposta da action ${this.entity}/fetchSingle`, [response]
         );
 
-        if (result) {
-          this.hasResult = true;
-
-          this.$nextTick(() => {
-            const modelValue = { ...this.modelValue, ...result };
-
-            this.$emit('update:modelValue', modelValue);
-
-            this.$qas.logger.group('QasFormView - fetch -> modelValue', [modelValue]);
-          });
-
-          this.cachedResult = this.useDialogOnUnsavedChanges && quasar.extend(true, {}, result);
-
+        if (this.useDialogOnUnsavedChanges) {
+          this.cachedResult = quasar.extend(true, {}, result || modelValue);
           this.$qas.logger.group('QasFormView - fetch -> cachedResult', [this.cachedResult]);
         }
 
+        this.$emit('update:modelValue', modelValue);
         this.$emit('fetch-success', response, this.modelValue);
+
+        this.$qas.logger.group('QasFormView - fetch -> modelValue', [modelValue]);
       } catch (error) {
         this.mx_fetchError(error);
         this.$emit('fetch-error', error);
@@ -8367,7 +8445,7 @@ var script$7 = {
 
     modelValue: {
       default: () => [],
-      type: [Array, Object, String, Number]
+      type: [Array, Object, String, Number, Boolean]
     },
 
     noOptionLabel: {
@@ -8401,7 +8479,6 @@ var script$7 = {
   computed: {
     attributes () {
       return {
-        bottomSlots: true,
         clearable: this.isSearchable,
         emitValue: true,
         mapOptions: true,
@@ -9935,7 +10012,7 @@ script.__file = "src/components/transfer/QasTransfer.vue";
 
 var name = "@bildvitta/quasar-ui-asteroid";
 var description = "Asteroid";
-var version$1 = "3.0.0-beta.17";
+var version$1 = "3.0.0-beta.18";
 var author = "Bild & Vitta <systemteam@bild.com.br>";
 var license = "MIT";
 var main = "dist/asteroid.cjs.min.js";