@bildvitta/quasar-ui-asteroid 3.0.0-beta.11 → 3.0.0-beta.14

package/dist/api/QasFormView.json

@@ -4,6 +4,14 @@
     "desc": "Componente para C.R.U.D. responsável pela pela criação (Create) e edição (Update)."
   },
   "props": {
+    "before-submit": {
+      "desc": "Callback para controlar como funciona o comportamento do submit.",
+      "default": null,
+      "type": "Function",
+      "examples": [
+        "beforeSubmit({ payload, resolve })"
+      ]
+    },
     "cancel-button-label": {
       "desc": "Rótulo do botão \"cancelar\".",
       "default": "Cancelar",

package/dist/asteroid.cjs.css

@@ -1 +1 @@
-@import"https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,700;1,400;1,700&display=swap";:root{--qas-background-color: #f5f5f5;--qas-generic-border-radius: 8px}h1{font-size:6rem;font-weight:800;letter-spacing:0;line-height:6rem;margin:0}h2{font-size:3.75rem;font-weight:700;letter-spacing:0;line-height:3.75rem;margin:0}h3{font-size:3rem;font-weight:600;letter-spacing:0;line-height:2.5rem;margin:0}h4{font-size:2.125rem;font-weight:800;letter-spacing:0;line-height:2.5rem;margin:0}h5{font-size:1.5rem;font-weight:700;letter-spacing:0;line-height:2rem;margin:0}h6{font-size:1.25rem;font-weight:600;letter-spacing:0;line-height:2rem;margin:0}body{background-color:var(--qas-background-color)}.q-field--outlined .q-field__inner{background-color:#fff;border-radius:var(--qas-generic-border-radius)}.q-radio__inner::before{color:var(--q-primary)}.q-tabs__arrow{color:var(--q-primary)}.bg-no-repeat{background-repeat:no-repeat !important}.bg-size-contain{background-size:contain !important}.bg-size-cover{background-size:cover !important}.bg-position-bottom{background-position:bottom !important}.bg-position-center{background-position:center !important}.bg-position-left{background-position:left !important}.bg-position-right{background-position:right !important}.bg-position-top{background-position:top !important}.border-secondary-contrast:not(.border-top):not(.border-left):not(.border-bottom):not(.border-right),.border-secondary:not(.border-top):not(.border-left):not(.border-bottom):not(.border-right),.border-primary-contrast:not(.border-top):not(.border-left):not(.border-bottom):not(.border-right),.border-primary:not(.border-top):not(.border-left):not(.border-bottom):not(.border-right){border-width:1px !important}.border-primary{border:0 solid var(--q-primary) !important}.border-primary-contrast{border:0 solid var(--q-primary-contrast) !important}.border-secondary{border:0 solid var(--q-secondary) !important}.border-secondary-contrast{border:0 solid var(--q-secondary-contrast) !important}.border-top{border-top-width:1px !important}.border-left{border-left-width:1px !important}.border-bottom{border-bottom-width:1px !important}.border-right{border-right-width:1px !important}.rounded-borders-sm{border-radius:calc(var(--qas-generic-border-radius) / 2) !important}.rounded-borders-lg{border-radius:calc(var(--qas-generic-border-radius) * 2) !important}.rounded-borders-top{border-bottom-left-radius:0 !important;border-bottom-right-radius:0 !important}.rounded-borders-right{border-bottom-left-radius:0 !important;border-top-left-radius:0 !important}.rounded-borders-bottom{border-top-left-radius:0 !important;border-top-right-radius:0 !important}.rounded-borders-left{border-bottom-right-radius:0 !important;border-top-right-radius:0 !important}.container,.container-xs,.container-sm,.container-md,.container-lg,.container-xl{margin-left:auto;margin-right:auto;max-width:1280px;width:calc(100% - 80px)}.container.spaced,.container-xs.spaced,.container-sm.spaced,.container-md.spaced,.container-lg.spaced,.container-xl.spaced{padding-bottom:20px;padding-top:20px}@media(max-width: 599px){.container,.container-xs,.container-sm,.container-md,.container-lg,.container-xl{width:calc(100% - 20px)}}.container-xs{max-width:599px !important}.container-sm{max-width:1023px !important}.container-md{max-width:1439px !important}.container-lg{max-width:1919px !important}body{font-family:Inter,system-ui,sans-serif}.qs-lh-xs{line-height:.85 !important}.qs-lh-sm{line-height:1 !important}.qs-lh-md{line-height:1.15 !important}.qs-lh-lg{line-height:1.3 !important}.qs-lh-xl{line-height:1.5 !important}.opacity-10{opacity:0.1 !important}.opacity-20{opacity:0.2 !important}.opacity-30{opacity:0.3 !important}.opacity-40{opacity:0.4 !important}.opacity-50{opacity:0.5 !important}.opacity-60{opacity:0.6 !important}.opacity-70{opacity:0.7 !important}.opacity-80{opacity:0.8 !important}.opacity-90{opacity:0.9 !important}.text-baseline{vertical-align:baseline !important}.text-break{word-break:break-all !important}.text-underline{text-decoration:underline !important}.text-no-decoration{text-decoration:none !important}.unset{all:unset}a.unset,button.unset{cursor:pointer}.qas-alert{border-style:solid;border-width:0 10px}.qas-app-bar__toolbar{height:70px}.qas-app-bar__brand{height:24px;margin-right:8px;position:relative;top:4px}.qas-app-bar__user{background-color:var(--qas-background-color);transition:background-color .3s cubic-bezier(0.25, 0.8, 0.5, 1)}.qas-app-bar__user:focus,.qas-app-bar__user:hover{background-color:rgba(255,255,255,.2)}.qas-app-bar__user-data{max-width:180px}.qas-app-bar__user-menu{width:260px}@media(max-width: 599px){.qas-app-bar__user-data{display:none}}.qas-actions-menu__list{width:265px;z-index:1}.q-expansion-item--expanded .q-item:not(.qas-app-menu--active.q-item){background-color:#fafafa}.qas-list-items .q-list>.q-item{padding:24px 16px}.qas-map__draw{height:300px;width:100%}.qas-nested-fields__actions{height:56px}.qas-signature-pad__canvas{border:1px solid rgba(0,0,0,.12)}.qas-table-generator .q-table th{font-weight:bold}.qas-table-generator--mobile{margin:0 -10px}.qas-table-generator--mobile .q-table{margin-left:10px}.qas-transfer__icon{transform:rotate(-90deg)}.qas-uploader__input{display:none}
+@import"https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,700;1,400;1,700&display=swap";:root{--qas-background-color: #f5f5f5;--qas-generic-border-radius: 8px}h1{font-size:6rem;font-weight:800;letter-spacing:0;line-height:6rem;margin:0}h2{font-size:3.75rem;font-weight:700;letter-spacing:0;line-height:3.75rem;margin:0}h3{font-size:3rem;font-weight:600;letter-spacing:0;line-height:2.5rem;margin:0}h4{font-size:2.125rem;font-weight:800;letter-spacing:0;line-height:2.5rem;margin:0}h5{font-size:1.5rem;font-weight:700;letter-spacing:0;line-height:2rem;margin:0}h6{font-size:1.25rem;font-weight:600;letter-spacing:0;line-height:2rem;margin:0}body{background-color:var(--qas-background-color)}.q-field--outlined .q-field__inner{background-color:#fff;border-radius:var(--qas-generic-border-radius)}.q-radio__inner::before{color:var(--q-primary)}.q-tabs__arrow{color:var(--q-primary)}.bg-no-repeat{background-repeat:no-repeat !important}.bg-size-contain{background-size:contain !important}.bg-size-cover{background-size:cover !important}.bg-position-bottom{background-position:bottom !important}.bg-position-center{background-position:center !important}.bg-position-left{background-position:left !important}.bg-position-right{background-position:right !important}.bg-position-top{background-position:top !important}.border-secondary-contrast:not(.border-top):not(.border-left):not(.border-bottom):not(.border-right),.border-secondary:not(.border-top):not(.border-left):not(.border-bottom):not(.border-right),.border-primary-contrast:not(.border-top):not(.border-left):not(.border-bottom):not(.border-right),.border-primary:not(.border-top):not(.border-left):not(.border-bottom):not(.border-right){border-width:1px !important}.border-primary{border:0 solid var(--q-primary) !important}.border-primary-contrast{border:0 solid var(--q-primary-contrast) !important}.border-secondary{border:0 solid var(--q-secondary) !important}.border-secondary-contrast{border:0 solid var(--q-secondary-contrast) !important}.border-top{border-top-width:1px !important}.border-left{border-left-width:1px !important}.border-bottom{border-bottom-width:1px !important}.border-right{border-right-width:1px !important}.rounded-borders-sm{border-radius:calc(var(--qas-generic-border-radius) / 2) !important}.rounded-borders-lg{border-radius:calc(var(--qas-generic-border-radius) * 2) !important}.rounded-borders-top{border-bottom-left-radius:0 !important;border-bottom-right-radius:0 !important}.rounded-borders-right{border-bottom-left-radius:0 !important;border-top-left-radius:0 !important}.rounded-borders-bottom{border-top-left-radius:0 !important;border-top-right-radius:0 !important}.rounded-borders-left{border-bottom-right-radius:0 !important;border-top-right-radius:0 !important}.container,.container-xs,.container-sm,.container-md,.container-lg,.container-xl{margin-left:auto;margin-right:auto;max-width:1280px;width:calc(100% - 80px)}.container.spaced,.container-xs.spaced,.container-sm.spaced,.container-md.spaced,.container-lg.spaced,.container-xl.spaced{padding-bottom:20px;padding-top:20px}@media(max-width: 599px){.container,.container-xs,.container-sm,.container-md,.container-lg,.container-xl{width:calc(100% - 20px)}}.container-xs{max-width:599px !important}.container-sm{max-width:1023px !important}.container-md{max-width:1439px !important}.container-lg{max-width:1919px !important}body{font-family:Inter,system-ui,sans-serif}.qs-lh-xs{line-height:.85 !important}.qs-lh-sm{line-height:1 !important}.qs-lh-md{line-height:1.15 !important}.qs-lh-lg{line-height:1.3 !important}.qs-lh-xl{line-height:1.5 !important}.opacity-10{opacity:0.1 !important}.opacity-20{opacity:0.2 !important}.opacity-30{opacity:0.3 !important}.opacity-40{opacity:0.4 !important}.opacity-50{opacity:0.5 !important}.opacity-60{opacity:0.6 !important}.opacity-70{opacity:0.7 !important}.opacity-80{opacity:0.8 !important}.opacity-90{opacity:0.9 !important}.text-baseline{vertical-align:baseline !important}.text-break{word-break:break-all !important}.text-underline{text-decoration:underline !important}.text-no-decoration{text-decoration:none !important}.unset{all:unset}a.unset,button.unset{cursor:pointer}.qas-actions-menu__list{width:265px;z-index:1}.qas-app-bar__toolbar{height:70px}.qas-app-bar__brand{height:24px;margin-right:8px;position:relative;top:4px}.qas-app-bar__user{background-color:var(--qas-background-color);transition:background-color .3s cubic-bezier(0.25, 0.8, 0.5, 1)}.qas-app-bar__user:focus,.qas-app-bar__user:hover{background-color:rgba(255,255,255,.2)}.qas-app-bar__user-data{max-width:180px}.qas-app-bar__user-menu{width:260px}@media(max-width: 599px){.qas-app-bar__user-data{display:none}}.qas-alert{border-style:solid;border-width:0 10px}.q-expansion-item--expanded .q-item:not(.qas-app-menu--active.q-item){background-color:#fafafa}.qas-list-items .q-list>.q-item{padding:24px 16px}.qas-map__draw{height:300px;width:100%}.qas-nested-fields__actions{height:56px}.qas-signature-pad__canvas{border:1px solid rgba(0,0,0,.12)}.qas-table-generator .q-table th{font-weight:bold}.qas-table-generator--mobile{margin:0 -10px}.qas-table-generator--mobile .q-table{margin-left:10px}.qas-transfer__icon{transform:rotate(-90deg)}.qas-uploader__input{display:none}

package/dist/asteroid.cjs.js

@@ -1,5 +1,5 @@
 /*!
-* @bildvitta/quasar-ui-asteroid v3.0.0-beta.11
+* @bildvitta/quasar-ui-asteroid v3.0.0-beta.14
 * (c) 2022 Bild & Vitta <systemteam@bild.com.br>
 * Released under the MIT License.
 */
@@ -474,6 +474,20 @@ function getGreatestCommonDivisor (first, second) {
   return first
 }
 
+function camelizeFieldsName (fields) {
+  for (const field in fields) {
+    const currentField = fields[field];
+
+    currentField.name = humps.camelize(currentField.name);
+
+    if (Object.keys(currentField.children || {}).length) {
+      camelizeFieldsName(currentField.children);
+    }
+  }
+
+  return fields
+}
+
 // Private
 function __format (value, token, options = {}) {
   if (!value) {
@@ -2454,7 +2468,7 @@ var Logger = () => {
     group (message, payload = [], { error } = {}) {
       if (!isDebugEnabled) return
 
-      console.group(normalizeMessage(message), getStyle(error));
+      console.groupCollapsed(normalizeMessage(message), getStyle(error));
 
       for (const item of payload) {
         if (typeof item === 'string') {
@@ -2943,7 +2957,7 @@ var script$u = {
 
   watch: {
     mask () {
-      const input = this.inputReference.$el?.querySelector('input');
+      const input = this.getInput();
 
       requestAnimationFrame(() => {
         input.selectionStart = input.value ? input.value.length : '';
@@ -2977,12 +2991,30 @@ var script$u = {
     },
 
     toggleMask (first, second) {
+      if (!this.modelValue.length) return
+
       const length = first.split('#').length - 2;
       return this.modelValue?.length > length ? second : first
     },
 
     validate (value) {
       return this.inputReference.validate(value)
+    },
+
+    onPaste (event) {
+      if (!this.mask) return
+
+      const value = event.clipboardData.getData('text');
+      const input = this.getInput();
+
+      requestAnimationFrame(() => {
+        this.$emit('update:modelValue', value);
+        input.selectionStart = input.value ? input.value.length : '';
+      });
+    },
+
+    getInput () {
+      return this.inputReference.$el?.querySelector('input')
     }
   }
 };
@@ -3001,7 +3033,8 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
       "error-message": _ctx.errorMessageData,
       mask: $options.mask,
       outlined: $props.outlined,
-      "unmasked-value": $props.unmaskedValue
+      "unmasked-value": $props.unmaskedValue,
+      onPaste: $options.onPaste
     }), vue.createSlots({ _: 2 /* DYNAMIC */ }, [
       vue.renderList(_ctx.$slots, (_, name) => {
         return {
@@ -3011,7 +3044,7 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         }
       })
-    ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["modelValue", "error", "error-message", "mask", "outlined", "unmasked-value"])
+    ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["modelValue", "error", "error-message", "mask", "outlined", "unmasked-value", "onPaste"])
   ]))
 }
 
@@ -4935,6 +4968,8 @@ function render$m(_ctx, _cache, $props, $setup, $data, $options) {
                               ($options.hasSearch)
                                 ? (vue.openBlock(), vue.createBlock(_component_qas_btn, {
                                     key: 0,
+                                    color: "grey-9",
+                                    flat: "",
                                     icon: "o_clear",
                                     unelevated: "",
                                     onClick: $options.clearSearch
@@ -4943,6 +4978,8 @@ function render$m(_ctx, _cache, $props, $setup, $data, $options) {
                               (!$options.debounce)
                                 ? (vue.openBlock(), vue.createBlock(_component_qas_btn, {
                                     key: 1,
+                                    color: "grey-9",
+                                    flat: "",
                                     icon: "o_search",
                                     type: "submit",
                                     unelevated: "",
@@ -5368,11 +5405,9 @@ var viewMixin = {
     },
 
     mx_setFields (fields = {}) {
-      for (const field in fields) {
-        fields[field].name = humps.camelize(fields[field].name);
-      }
+      const camelizedFields = camelizeFieldsName(fields);
 
-      this.mx_fields = vue.markRaw(fields);
+      this.mx_fields = vue.markRaw(camelizedFields);
     },
 
     mx_setMetadata (metadata = {}) {
@@ -5466,6 +5501,11 @@ var script$k = {
     useSubmitButton: {
       default: true,
       type: Boolean
+    },
+
+    beforeSubmit: {
+      default: null,
+      type: Function
     }
   },
 
@@ -5713,17 +5753,35 @@ var script$k = {
       });
     },
 
-    async submit (event) {
-      if (this.disable) return null
-
+    /**
+     * Se existe a propriedade com callback "beforeSubmit", então o controle de quando e como chamar o método "submit"
+     * está sendo controlado fora do QasFormView, se não existir a propriedade "beforeSubmit", então o controle do método
+     * submit é feito pelo próprio QasFormView, chamado pelo evento @submit.
+    */
+    submitHandler (event) {
       if (event) {
         event.preventDefault();
       }
 
+      const hasBeforeSubmit = typeof this.beforeSubmit === 'function';
+
+      if (hasBeforeSubmit) {
+        return this.beforeSubmit({
+          payload: { id: this.id, payload: this.modelValue, url: this.url },
+          resolve: payload => this.submit(payload)
+        })
+      }
+
+      this.submit();
+    },
+
+    async submit (externalPayload = {}) {
+      if (this.disable) return null
+
       this.isSubmitting = true;
 
       try {
-        const payload = { id: this.id, payload: this.modelValue, url: this.url };
+        const payload = { id: this.id, payload: this.modelValue, url: this.url, ...externalPayload };
 
         this.$qas.logger.group(
           `QasFormView - submit -> payload do ${this.entity}/${this.mode}`, [payload]
@@ -5797,7 +5855,7 @@ function render$k(_ctx, _cache, $props, $setup, $data, $options) {
         : vue.createCommentVNode("v-if", true),
       vue.createVNode(_component_q_form, {
         ref: "form",
-        onSubmit: $options.submit
+        onSubmit: $options.submitHandler
       }, {
         default: vue.withCtx(() => [
           vue.renderSlot(_ctx.$slots, "default"),
@@ -7021,13 +7079,7 @@ var script$c = {
     },
 
     children () {
-      const field = quasar.extend(true, {}, this.field);
-
-      for (const key in field?.children) {
-        field.children[key].name = humps.camelize(field?.children[key].name);
-      }
-
-      return field?.children
+      return this.field?.children
     },
 
     showDestroyBtn () {
@@ -7064,13 +7116,8 @@ var script$c = {
     modelValue: {
       handler (value) {
         this.nested = quasar.extend(true, [], value);
-      },
-      immediate: true
-    },
 
-    field: {
-      handler () {
-        !this.modelValue.length && this.setDefaultNestedValue();
+        if (!this.nested.length) return this.setDefaultNestedValue()
       },
       immediate: true
     }
@@ -7355,6 +7402,14 @@ const { hasPreviousRoute, history: history$1, getPreviousRoute } = useHistory();
 var script$b = {
   name: 'QasPageHeader',
 
+  mixins: [
+    quasar.createMetaMixin(function () {
+      return {
+        title: this.title
+      }
+    })
+  ],
+
   props: {
     breadcrumbs: {
       default: '',
@@ -7417,12 +7472,6 @@ var script$b = {
 
       return lastIndex === index ? 'text-grey-7' : 'text-primary'
     }
-  },
-
-  meta () {
-    return {
-      title: this.title
-    }
   }
 };
 
@@ -9461,7 +9510,7 @@ script.__file = "src/components/transfer/QasTransfer.vue";
 
 var name = "@bildvitta/quasar-ui-asteroid";
 var description = "Asteroid";
-var version$1 = "3.0.0-beta.11";
+var version$1 = "3.0.0-beta.14";
 var author = "Bild & Vitta <systemteam@bild.com.br>";
 var license = "MIT";
 var main = "dist/asteroid.cjs.min.js";