@bildvitta/quasar-ui-asteroid 3.13.0-beta.8 → 3.13.0

package/src/components/dialog/QasDialog.vue

@@ -1,25 +1,25 @@
 <template>
-  <q-dialog ref="dialog" class="qas-dialog" data-cy="dialog" :persistent="persistent" v-bind="dialogProps" @update:model-value="updateModelValue">
+  <q-dialog ref="dialogRef" class="qas-dialog" data-cy="dialog" :persistent="persistent" v-bind="dialogProps" @update:model-value="updateModelValue">
     <div class="bg-white q-pa-lg" :style="style">
       <header v-if="hasHeader" class="q-mb-lg">
         <slot name="header">
           <div class="items-center justify-between row">
-            <h5 class="text-grey-9 text-h5" data-cy="dialog-title">{{ card.title }}</h5>
+            <h5 class="text-h5" data-cy="dialog-title">{{ card.title }}</h5>
 
-            <qas-btn v-if="isInfoDialog" v-close-popup color="grey-9" data-cy="dialog-close-btn" icon="sym_r_close" variant="tertiary" />
+            <qas-btn v-if="isInfoDialog" v-close-popup color="grey-10" data-cy="dialog-close-btn" icon="sym_r_close" variant="tertiary" />
           </div>
         </slot>
       </header>
 
       <section class="text-body1 text-grey-8">
-        <component :is="componentTag" ref="form" v-bind="componentProps">
+        <component :is="mainComponent.is" ref="form" v-bind="mainComponent.props">
           <slot name="description">
-            <component :is="descriptionComponentTag" data-cy="dialog-description">{{ card.description }}</component>
+            <component :is="descriptionComponent" data-cy="dialog-description">{{ card.description }}</component>
           </slot>
 
           <div v-if="!isInfoDialog">
             <slot name="actions">
-              <qas-actions v-bind="formattedActionsProps">
+              <qas-actions v-bind="defaultActionsProps">
                 <template v-if="hasOk" #primary>
                   <qas-btn v-close-popup="!useForm" class="full-width" data-cy="dialog-ok-btn" variant="primary" v-bind="defaultOk" />
                 </template>
@@ -36,254 +36,145 @@
   </q-dialog>
 </template>
 
-<script>
-import QasBtn from '../btn/QasBtn.vue'
+<script setup>
 import QasActions from '../actions/QasActions.vue'
+import QasBtn from '../btn/QasBtn.vue'
+
+import useCancel from './composables/use-cancel'
+import useDynamicComponents from './composables/use-dynamic-components'
+import useOk from './composables/use-ok'
+import { useScreen } from '../../composables'
 
-export default {
-  name: 'QasDialog',
+import { computed, ref, useAttrs, useSlots } from 'vue'
+import { useDialogPluginComponent } from 'quasar'
+
+defineOptions({ name: 'QasDialog' })
+
+const props = defineProps({
+  actionsProps: {
+    default: () => ({}),
+    type: Object
+  },
 
-  components: {
-    QasBtn,
-    QasActions
+  cancel: {
+    default: () => ({}),
+    type: [Object, Boolean]
   },
 
-  props: {
-    actionsProps: {
-      default: () => ({}),
-      type: Object
-    },
-
-    cancel: {
-      default: () => ({}),
-      type: [Object, Boolean]
-    },
-
-    card: {
-      default: () => ({}),
-      type: Object
-    },
-
-    maxWidth: {
-      default: '',
-      type: String
-    },
-
-    minWidth: {
-      default: '',
-      type: String
-    },
-
-    ok: {
-      default: () => ({}),
-      type: [Object, Boolean]
-    },
-
-    persistent: {
-      default: true,
-      type: Boolean
-    },
-
-    useForm: {
-      type: Boolean
-    },
-
-    modelValue: {
-      type: Boolean
-    },
-
-    usePlugin: {
-      type: Boolean
-    },
-
-    useFullMaxWidth: {
-      type: Boolean
-    },
-
-    useValidationAllAtOnce: {
-      type: Boolean
-    }
+  card: {
+    default: () => ({}),
+    type: Object
   },
 
-  emits: [
-    // model
-    'update:modelValue',
-
-    // actions
-    'validate',
-    'ok',
-    'cancel'
-  ],
-
-  computed: {
-    defaultCancel () {
-      return {
-        label: 'Cancelar',
-        outline: true,
-
-        ...this.cancel,
-
-        onClick: this.onCancel
-      }
-    },
-
-    defaultOk () {
-      const { onClick, ...attrs } = this.ok
-
-      return {
-        label: 'Ok',
-        type: this.ok?.type || this.useForm ? 'submit' : 'button',
-
-        ...attrs,
-
-        // adiciona somente se não estiver usando useForm pois o controle ficará no submit.
-        ...(!this.useForm && { onClick: this.onOk })
-      }
-    },
-
-    style () {
-      return {
-        ...(this.useFullMaxWidth && { width: '100%' }),
-        maxWidth: this.maxWidth || '470px',
-        minWidth: this.minWidth || (this.$qas.screen.isSmall ? '' : '366px')
-      }
-    },
-
-    componentTag () {
-      return this.useForm ? 'q-form' : 'div'
-    },
-
-    componentProps () {
-      /**
-       * adiciona evento de submit caso useForm seja true,
-       * uma vez que somente o q-form possui este evento.
-      */
-      return {
-        ...(this.useForm && { onSubmit: this.onSubmit })
-      }
-    },
-
-    dialogProps () {
-      return {
-        ...(!this.usePlugin && { modelValue: this.modelValue }),
-        ...this.$attrs
-      }
-    },
-
-    hasOk () {
-      return typeof this.ok === 'boolean' ? this.ok : !!Object.keys(this.ok)
-    },
-
-    hasCancel () {
-      return typeof this.cancel === 'boolean' ? this.cancel : !!Object.keys(this.cancel)
-    },
-
-    hasAllActions () {
-      return this.hasOk && this.hasCancel
-    },
-
-    hasSingleAction () {
-      return (this.hasOk && !this.hasCancel) || (!this.hasOk && this.hasCancel)
-    },
-
-    hasHeaderSlot () {
-      return !!this.$slots.header
-    },
-
-    hasHeader () {
-      return this.hasHeaderSlot || this.card.title
-    },
-
-    isInfoDialog () {
-      return !this.hasOk && !this.hasCancel
-    },
-
-    formattedActionsProps () {
-      const { useFullWidth, useEqualWidth } = this.actionsProps
-
-      if (useFullWidth || useEqualWidth) {
-        return this.actionsProps
-      }
-
-      return {
-        useFullWidth: this.hasSingleAction,
-        useEqualWidth: this.hasAllActions,
-        ...this.actionsProps
-      }
-    },
-
-    hasRenderFunction () {
-      const description = this.card.description
-
-      return typeof description === 'object' && description !== null && !Array.isArray(description)
-    },
-
-    descriptionComponentTag () {
-      return this.hasRenderFunction ? this.card.description : 'div'
-    }
+  maxWidth: {
+    default: '',
+    type: String
   },
 
-  methods: {
-    async submitHandler () {
-      if (!this.useForm) return
-
-      if (this.useValidationAllAtOnce) {
-        let isAllComponentValid = true
-        const components = this.$refs.form.getValidationComponents() || []
-
-        for (const component of components) {
-          const isValid = component?.validate?.()
-
-          if (!isValid) {
-            isAllComponentValid = false
-          }
-        }
-
-        this.$emit('validate', isAllComponentValid)
-
-        return
-      }
-
-      this.$emit('validate', await this.$refs.form.validate())
-    },
-
-    // método para funcionar como plugin
-    show () {
-      this.$refs.dialog.show()
-    },
-
-    // método para funcionar como plugin
-    hide () {
-      this.$refs.dialog.hide()
-    },
-
-    updateModelValue (value) {
-      this.$emit('update:modelValue', value)
-    },
-
-    onOk () {
-      this.ok?.onClick?.()
-      this.$emit('ok')
-    },
-
-    onCancel () {
-      this.cancel?.onClick?.()
-      this.$emit('cancel')
-    },
-
-    /**
-     * Sem este método, ao clicar enter com a prop useForm ativada a tela era recarregada,
-     * e a ação de click do botão não era chamada pois ele não esta dentro do form.
-    */
-    onSubmit (event) {
-      event.preventDefault()
-
-      if (this.hasOk) {
-        this.onOk()
-        this.submitHandler()
-      }
-    }
+  minWidth: {
+    default: '',
+    type: String
+  },
+
+  ok: {
+    default: () => ({}),
+    type: [Object, Boolean]
+  },
+
+  persistent: {
+    default: true,
+    type: Boolean
+  },
+
+  useForm: {
+    type: Boolean
+  },
+
+  modelValue: {
+    type: Boolean
+  },
+
+  usePlugin: {
+    type: Boolean
+  },
+
+  useFullMaxWidth: {
+    type: Boolean
+  },
+
+  useValidationAllAtOnce: {
+    type: Boolean
+  }
+})
+
+const emits = defineEmits([
+  // model
+  'update:modelValue',
+
+  // actions
+  'cancel',
+  'ok',
+  'validate',
+
+  // eventos do plugin
+  ...useDialogPluginComponent.emits
+])
+
+const attrs = useAttrs()
+const screen = useScreen()
+const slots = useSlots()
+
+// usado para o plugin
+const { dialogRef, onDialogHide } = useDialogPluginComponent()
+
+// QForm template
+const form = ref(null)
+
+const composablesParams = { emits, form, props, screen, slots }
+
+const { defaultCancel, hasCancel } = useCancel(composablesParams)
+const { defaultOk, hasOk, onOk } = useOk(composablesParams)
+const { descriptionComponent, mainComponent } = useDynamicComponents({ ...composablesParams, onOk, hasOk })
+
+const dialogProps = computed(() => {
+  return {
+    ...(!props.usePlugin && { modelValue: props.modelValue }),
+    ...attrs,
+
+    onHide: onDialogHide
   }
+})
+
+const style = computed(() => {
+  return {
+    ...(props.useFullMaxWidth && { width: '100%' }),
+
+    maxWidth: props.maxWidth || '470px',
+    minWidth: props.minWidth || (screen.isSmall ? '' : '366px')
+  }
+})
+
+const hasHeader = computed(() => !!slots.header || props.card.title)
+const isInfoDialog = computed(() => !hasOk.value && !hasCancel.value)
+
+const defaultActionsProps = computed(() => {
+  const { useFullWidth, useEqualWidth } = props.actionsProps
+
+  if (useFullWidth || useEqualWidth) return props.actionsProps
+
+  const hasAllActions = hasOk.value && hasCancel.value
+  const hasSingleAction = (hasOk.value && !hasCancel.value) || (!hasOk.value && hasCancel.value)
+
+  return {
+    useFullWidth: hasSingleAction,
+    useEqualWidth: hasAllActions,
+
+    ...props.actionsProps
+  }
+})
+
+function updateModelValue (value) {
+  emits('update:modelValue', value)
 }
 </script>
 

package/src/components/dialog/composables/use-cancel.js

@@ -0,0 +1,40 @@
+import { computed } from 'vue'
+
+/**
+ * @param {{
+ *  props: { cancel: object },
+ *  emits: (event: 'cancel') => void
+ * }} config
+ */
+export default function useCancel (config = {}) {
+  const {
+    props,
+    emits
+  } = config
+
+  const defaultCancel = computed(() => {
+    return {
+      label: 'Cancelar',
+      outline: true,
+
+      ...props.cancel,
+
+      onClick: onCancel
+    }
+  })
+
+  const hasCancel = computed(() => {
+    return typeof props.cancel === 'boolean' ? props.cancel : !!Object.keys(props.cancel)
+  })
+
+  function onCancel () {
+    props.cancel.onClick?.()
+
+    emits('cancel')
+  }
+
+  return {
+    defaultCancel,
+    hasCancel
+  }
+}

package/src/components/dialog/composables/use-dynamic-components.js

@@ -0,0 +1,86 @@
+import { computed } from 'vue'
+import { QForm } from 'quasar'
+
+/**
+ * @param {{
+ *  props: { card: object, useForm: boolean, useValidationAllAtOnce: boolean },
+ *  form: import('vue').Ref<HTMLInputElement | null>,
+ *  hasOk: import('vue').ComputedRef<boolean>,
+ *  emits: (event: 'validate', payload: Promise<boolean> | boolean) => void,
+ *  onOk: Function
+ * }} config
+ */
+export default function useDynamicComponents (config = {}) {
+  const {
+    props,
+    form,
+    hasOk,
+
+    onOk = () => {},
+    emits
+  } = config
+
+  const mainComponent = computed(() => {
+    return {
+      is: props.useForm ? QForm : 'div',
+
+      /**
+       * adiciona evento de submit caso useForm seja true,
+       * uma vez que somente o q-form possui este evento.
+       */
+      props: {
+        ...(props.useForm && { onSubmit })
+      }
+    }
+  })
+
+  const hasRenderFunction = computed(() => {
+    const description = props.card.description
+
+    return typeof description === 'object' && description !== null && !Array.isArray(description)
+  })
+
+  const descriptionComponent = computed(() => hasRenderFunction.value ? props.card.description : 'div')
+
+  // métodos
+  function submitHandler () {
+    if (!props.useForm) return
+
+    if (props.useValidationAllAtOnce) {
+      let isAllComponentValid = true
+      const components = form.value.getValidationComponents() || []
+
+      for (const component of components) {
+        const isValid = component?.validate?.()
+
+        if (!isValid) {
+          isAllComponentValid = false
+        }
+      }
+
+      emits('validate', isAllComponentValid)
+
+      return
+    }
+
+    emits('validate', form.value.validate())
+  }
+
+  /**
+   * Sem este método, ao clicar enter com a prop useForm ativada a tela era recarregada,
+   * e a ação de click do botão não era chamada pois ele não esta dentro do form.
+   */
+  function onSubmit (event) {
+    event.preventDefault()
+
+    if (hasOk.value) {
+      onOk()
+      submitHandler()
+    }
+  }
+
+  return {
+    mainComponent,
+    descriptionComponent
+  }
+}

package/src/components/dialog/composables/use-ok.js

@@ -0,0 +1,45 @@
+import { computed } from 'vue'
+
+/**
+ * @param {{
+ *  props: { ok: object, useForm: boolean },
+ *  emits: (event: 'ok') => void
+ * }} config
+ */
+export default function useOk (config = {}) {
+  const {
+    props,
+    emits
+  } = config
+
+  const defaultOk = computed(() => {
+    const { onClick, ...attrs } = props.ok
+
+    return {
+      label: 'Ok',
+      type: (props.ok?.type || props.useForm) ? 'submit' : 'button',
+
+      ...attrs,
+
+      // adiciona somente se não estiver usando useForm pois o controle ficará no submit.
+      ...(!props.useForm && { onClick: onOk })
+    }
+  })
+
+  const hasOk = computed(() => {
+    return typeof props.ok === 'boolean' ? props.ok : !!Object.keys(props.ok)
+  })
+
+  function onOk () {
+    props.ok.onClick?.()
+
+    emits('ok')
+  }
+
+  return {
+    defaultOk,
+    hasOk,
+
+    onOk
+  }
+}

package/src/components/filters/QasFilters.vue

@@ -177,7 +177,7 @@ export default {
     },
 
     filterButtonColor () {
-      return this.hasActiveFilters ? 'primary' : 'grey-9'
+      return this.hasActiveFilters ? 'primary' : 'grey-10'
     },
 
     filterButtonProps () {

package/src/components/filters/private/PvFiltersButton.vue

@@ -44,8 +44,8 @@ export default {
   props: {
     color: {
       type: String,
-      default: 'grey-9',
-      validator: value => ['grey-9', 'primary', 'white'].includes(value)
+      default: 'grey-10',
+      validator: value => ['grey-10', 'primary', 'white'].includes(value)
     },
 
     error: {

package/src/components/form-generator/QasFormGenerator.yml

@@ -8,7 +8,7 @@ props:
     desc: Colunas do grid de cada campo.
     default: col-6
     type: [Array, String, Object]
-    examples: ["{ name: { sm: 6, md: 12 } }", "[{ sm: 6, md: 12 }]"]
+    examples: ["[{ sm: 6, md: 12 }]", "{ name: { sm: 6, md: 12 } }", "12"]
 
   disable:
     desc: Deixa os campos desabilitados enviando a prop "disable" para cada campo.

package/src/components/gallery/QasGallery.vue

@@ -198,7 +198,7 @@ export default {
         list: {
           destroy: {
             label: 'Excluir',
-            color: 'grey-9',
+            color: 'grey-10',
             icon: 'sym_r_delete',
 
             handler: () => this.onDestroy(image, index)

package/src/components/gallery/private/PvGalleryCarouselDialog.vue

@@ -3,7 +3,7 @@
     <qas-dialog v-model="model" :cancel="false" class="q-pa-xl" max-width="1100px" :ok="false" :persistent="false" use-full-max-width>
       <template #header>
         <div class="text-right">
-          <qas-btn v-close-popup color="grey-9" icon="sym_r_close" variant="tertiary" @click="close" />
+          <qas-btn v-close-popup color="grey-10" icon="sym_r_close" variant="tertiary" @click="close" />
         </div>
       </template>
 
@@ -11,7 +11,7 @@
         <q-carousel v-model="imageIndexModel" animated :arrows="!$qas.screen.isSmall" class="pv-gallery-carousel-dialog__carousel" control-text-color="primary" data-cy="gallery-carousel" :fullscreen="$qas.screen.isSmall" :height="carouselImageHeight" next-icon="sym_r_chevron_right" prev-icon="sym_r_chevron_left" swipeable :thumbnails="!isSingleImage">
           <q-carousel-slide v-for="(image, index) in images" :key="index" class="bg-no-repeat bg-size-contain" :data-cy="`gallery-carousel-slide-${index}`" :img-src="image.url" :name="index">
             <div v-if="$qas.screen.isSmall" class="full-width justify-end row">
-              <qas-btn color="grey-9" icon="sym_r_close" variant="tertiary" @click="close" />
+              <qas-btn color="grey-10" icon="sym_r_close" variant="tertiary" @click="close" />
             </div>
           </q-carousel-slide>
         </q-carousel>

package/src/components/gallery-card/QasGalleryCard.vue

@@ -129,7 +129,7 @@ export default {
       return {
         'justify-between': this.card.name,
         'justify-right': !this.card.name,
-        'text-grey-9': !this.disable,
+        'text-grey-10': !this.disable,
         'q-mb-md': this.hasActions || this.card.name
       }
     },
@@ -142,7 +142,7 @@ export default {
         'full-width',
         'items-center',
         'justify-center',
-        'text-grey-9',
+        'text-grey-10',
         'text-subtitle2'
       ]
     }

package/src/components/label/QasLabel.vue

@@ -14,7 +14,7 @@ export default {
   props: {
     color: {
       type: String,
-      default: 'grey-9'
+      default: 'grey-10'
     },
 
     count: {

package/src/components/label/QasLabel.yml

@@ -6,7 +6,7 @@ meta:
 props:
   color:
     desc: Cor do texto.
-    default: grey-9
+    default: grey-10
     type: String
 
   count: