@bildvitta/quasar-ui-asteroid 3.14.0-beta.0 → 3.14.0-beta.2

package/src/components/delete/QasDelete.vue

@@ -1,110 +1,100 @@
 <template>
-  <component v-bind="attributes" :is="tag" @click.stop.prevent="onDelete">
-    <template v-for="(_, name) in $slots" #[name]="context">
+  <component v-bind="attributes" :is="props.tag" @click.stop.prevent="onDelete">
+    <template v-for="(_, name) in slots" #[name]="context">
       <slot :name="name" v-bind="context || {}" />
     </template>
   </component>
 </template>
 
-<script>
-import QasBtn from '../btn/QasBtn.vue'
+<script setup>
+import { inject, computed, useAttrs, useSlots } from 'vue'
+import { useRoute } from 'vue-router'
 
-export default {
+defineOptions({
   name: 'QasDelete',
+  inheritAttrs: false
+})
 
-  components: {
-    QasBtn
+const props = defineProps({
+  customId: {
+    default: '',
+    type: [Number, String]
   },
 
-  inheritAttrs: false,
-
-  props: {
-    customId: {
-      default: '',
-      type: [Number, String]
-    },
+  dialogProps: {
+    default: () => ({}),
+    type: Object
+  },
 
-    dialogProps: {
-      default: () => ({}),
-      type: Object
-    },
+  entity: {
+    required: true,
+    type: String
+  },
 
-    entity: {
-      required: true,
-      type: String
-    },
+  tag: {
+    default: 'qas-btn',
+    type: String
+  },
 
-    tag: {
-      default: 'qas-btn',
-      type: String
-    },
+  url: {
+    default: '',
+    type: String
+  },
 
-    url: {
-      default: '',
-      type: String
-    },
+  deleting: {
+    type: Boolean
+  },
 
-    deleting: {
-      type: Boolean
-    },
+  useAutoDeleteRoute: {
+    default: true,
+    type: Boolean
+  },
 
-    useAutoDeleteRoute: {
-      default: true,
-      type: Boolean
-    },
+  redirectRoute: {
+    type: [Object, String],
+    default: ''
+  }
+})
 
-    redirectRoute: {
-      type: [Object, String],
-      default: ''
-    }
-  },
+const emit = defineEmits(['success', 'error', 'update:deleting'])
 
-  emits: [
-    'success',
-    'error',
-    'update:deleting'
-  ],
-
-  computed: {
-    attributes () {
-      return {
-        ...this.$attrs,
-        color: this.isButton ? 'grey-10' : this.$attrs.color
-      }
-    },
+const slots = useSlots()
+const attrs = useAttrs()
+const route = useRoute()
 
-    id () {
-      return this.customId || this.$route.params.id
-    },
+// global
+const qas = inject('qas')
 
-    isButton () {
-      return this.tag === 'qas-btn'
-    }
-  },
+const id = computed(() => props.customId || route.params.id)
+const isButton = computed(() => props.tag === 'qas-btn')
 
-  methods: {
-    onDelete () {
-      this.$qas.delete({
-        deleteActionParams: {
-          entity: this.entity,
-          id: this.id,
-          url: this.url
-        },
+const attributes = computed(() => {
+  return {
+    ...attrs,
+    color: isButton.value ? 'grey-10' : attrs.color
+  }
+})
+
+function onDelete () {
+  qas.delete({
+    deleteActionParams: {
+      entity: props.entity,
+      id: id.value,
+      url: props.url
+    },
 
-        dialogProps: this.dialogProps,
+    dialogProps: props.dialogProps,
 
-        useAutoDeleteRoute: this.useAutoDeleteRoute,
+    useAutoDeleteRoute: props.useAutoDeleteRoute,
 
-        redirectRoute: this.redirectRoute,
+    redirectRoute: props.redirectRoute,
 
-        // callbacks
-        onDelete: isDeleting => this.$emit('update:deleting', isDeleting),
+    // callbacks
+    onDelete: isDeleting => emit('update:deleting', isDeleting),
 
-        onDeleteError: error => this.$emit('error', error),
+    onDeleteError: error => emit('error', error),
 
-        onDeleteSuccess: response => this.$emit('success', response)
-      })
-    }
-  }
+    onDeleteSuccess: response => emit('success', response)
+  })
 }
 </script>

package/src/components/dialog/QasDialog.vue

@@ -1,10 +1,10 @@
 <template>
-  <q-dialog ref="dialogRef" 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="props.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-h5" data-cy="dialog-title">{{ card.title }}</h5>
+            <h5 class="text-h5" data-cy="dialog-title">{{ props.card.title }}</h5>
 
             <qas-btn v-if="isInfoDialog" v-close-popup color="grey-10" data-cy="dialog-close-btn" icon="sym_r_close" variant="tertiary" />
           </div>
@@ -14,14 +14,14 @@
       <section class="text-body1 text-grey-8">
         <component :is="mainComponent.is" ref="form" v-bind="mainComponent.props">
           <slot name="description">
-            <component :is="descriptionComponent" data-cy="dialog-description">{{ card.description }}</component>
+            <component :is="descriptionComponent" data-cy="dialog-description">{{ props.card.description }}</component>
           </slot>
 
           <div v-if="!isInfoDialog">
             <slot name="actions">
               <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" />
+                  <qas-btn v-close-popup="!props.useForm" class="full-width" data-cy="dialog-ok-btn" variant="primary" v-bind="defaultOk" />
                 </template>
 
                 <template v-if="hasCancel" #secondary>
@@ -107,7 +107,7 @@ const props = defineProps({
   }
 })
 
-const emits = defineEmits([
+const emit = defineEmits([
   // model
   'update:modelValue',
 
@@ -130,7 +130,7 @@ const { dialogRef, onDialogHide } = useDialogPluginComponent()
 // QForm template
 const form = ref(null)
 
-const composablesParams = { emits, form, props, screen, slots }
+const composablesParams = { emit, form, props, screen, slots }
 
 const { defaultCancel, hasCancel } = useCancel(composablesParams)
 const { defaultOk, hasOk, onOk } = useOk(composablesParams)
@@ -174,7 +174,7 @@ const defaultActionsProps = computed(() => {
 })
 
 function updateModelValue (value) {
-  emits('update:modelValue', value)
+  emit('update:modelValue', value)
 }
 </script>
 

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

@@ -3,13 +3,13 @@ import { computed } from 'vue'
 /**
  * @param {{
  *  props: { cancel: object },
- *  emits: (event: 'cancel') => void
+ *  emit: (event: 'cancel') => void
  * }} config
  */
 export default function useCancel (config = {}) {
   const {
     props,
-    emits
+    emit
   } = config
 
   const defaultCancel = computed(() => {
@@ -30,7 +30,7 @@ export default function useCancel (config = {}) {
   function onCancel () {
     props.cancel.onClick?.()
 
-    emits('cancel')
+    emit('cancel')
   }
 
   return {

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

@@ -6,7 +6,7 @@ import { QForm } from 'quasar'
  *  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,
+ *  emit: (event: 'validate', payload: Promise<boolean> | boolean) => void,
  *  onOk: Function
  * }} config
  */
@@ -17,7 +17,7 @@ export default function useDynamicComponents (config = {}) {
     hasOk,
 
     onOk = () => {},
-    emits
+    emit
   } = config
 
   const mainComponent = computed(() => {
@@ -58,12 +58,12 @@ export default function useDynamicComponents (config = {}) {
         }
       }
 
-      emits('validate', isAllComponentValid)
+      emit('validate', isAllComponentValid)
 
       return
     }
 
-    emits('validate', form.value.validate())
+    emit('validate', form.value.validate())
   }
 
   /**

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

@@ -3,13 +3,13 @@ import { computed } from 'vue'
 /**
  * @param {{
  *  props: { ok: object, useForm: boolean },
- *  emits: (event: 'ok') => void
+ *  emit: (event: 'ok') => void
  * }} config
  */
 export default function useOk (config = {}) {
   const {
     props,
-    emits
+    emit
   } = config
 
   const defaultOk = computed(() => {
@@ -33,7 +33,7 @@ export default function useOk (config = {}) {
   function onOk () {
     props.ok.onClick?.()
 
-    emits('ok')
+    emit('ok')
   }
 
   return {

package/src/components/dialog-router/QasDialogRouter.vue

@@ -2,84 +2,85 @@
   <q-dialog ref="dialog" persistent @hide="onDialogHide">
     <q-card class="full-width" style="max-width: 80vw;">
       <q-card-section>
-        <component :is="component" v-if="component" :route="route" :use-boundary="false" @hide="hide" />
+        <component :is="component" v-if="component" :route="normalizedRoute" :use-boundary="false" @hide="hide" />
       </q-card-section>
     </q-card>
   </q-dialog>
 </template>
 
-<script>
-import { markRaw } from 'vue'
-import { Loading, extend } from 'quasar'
+<script setup>
 import { NotifyError } from '../../plugins'
 
-export default {
-  name: 'QasDialogRouter',
+import { Loading, extend } from 'quasar'
+import { ref, markRaw } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 
-  emits: ['error', 'hide'],
+defineOptions({ name: 'QasDialogRouter' })
 
-  expose: ['show', 'hide'],
+const emit = defineEmits(['error', 'hide'])
 
-  data () {
-    return {
-      component: null,
-      parentRoute: '',
-      route: null
-    }
-  },
-
-  methods: {
-    hide () {
-      this.$refs.dialog.hide()
-    },
-
-    onDialogHide () {
-      if (history && this.parentRoute) {
-        history.replaceState(null, null, this.parentRoute)
-      }
-
-      this.component = ''
-      this.parentRoute = ''
-      this.route = null
-
-      this.$emit('hide')
-    },
-
-    resolveRoute (path) {
-      return this.$router.resolve(path)
-    },
-
-    async show (route) {
-      this.parentRoute = this.$route.fullPath
-      this.route = this.resolveRoute(route)
-
-      if (history) {
-        history.replaceState(null, null, this.route.fullPath)
-      }
-
-      try {
-        Loading.show()
-
-        const component = markRaw(
-          extend(true, {}, [...this.route.matched].pop().components.default)
-        )
-
-        if (typeof component.value !== 'function') {
-          this.component = component
-          this.$refs.dialog.show()
-        } else {
-          const componentFn = (await component()).default
-          this.component = componentFn
-
-          this.$refs.dialog.show()
-        }
-      } catch (error) {
-        NotifyError('Ops! Erro ao carregar item.')
-        this.$emit('error', error)
-      } finally {
-        Loading.hide()
-      }
+defineExpose({ show, hide })
+
+const router = useRouter()
+const route = useRoute()
+
+// template refs
+const dialog = ref(null)
+
+const component = ref(null)
+const parentRoute = ref('')
+const normalizedRoute = ref(null)
+
+// functions
+function hide () {
+  dialog.value.hide()
+}
+
+function onDialogHide () {
+  if (history && parentRoute.value) {
+    history.replaceState(null, null, parentRoute.value)
+  }
+
+  component.value = ''
+  parentRoute.value = ''
+  normalizedRoute.value = null
+
+  emit('hide')
+}
+
+function getResolvedRoute (path) {
+  return router.resolve(path)
+}
+
+async function show (routeParam) {
+  parentRoute.value = route.fullPath
+  normalizedRoute.value = getResolvedRoute(routeParam)
+
+  if (history) {
+    history.replaceState(null, null, normalizedRoute.value.fullPath)
+  }
+
+  try {
+    Loading.show()
+
+    const component = markRaw(
+      extend(true, {}, [...normalizedRoute.value.matched].pop().components.default)
+    )
+
+    if (typeof component.value !== 'function') {
+      component.value = component
+      dialog.value.show()
+    } else {
+      const componentFn = (await component()).default
+      component.value = componentFn
+
+      dialog.value.show()
     }
+  } catch (error) {
+    NotifyError('Ops! Erro ao carregar item.')
+    emit('error', error)
+  } finally {
+    Loading.hide()
   }
 }
 </script>

package/src/components/empty-result-text/QasEmptyResultText.vue

@@ -1,20 +1,18 @@
 <template>
   <div class="text-body1 text-grey-8">
     <slot>
-      {{ text }}
+      {{ props.text }}
     </slot>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'QasEmptyResultText',
+<script setup>
+defineOptions({ name: 'QasEmptyResultText' })
 
-  props: {
-    text: {
-      default: 'Não há itens para serem exibidos.',
-      type: String
-    }
+const props = defineProps({
+  text: {
+    default: 'Não há itens para serem exibidos.',
+    type: String
   }
-}
+})
 </script>

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

@@ -10,14 +10,14 @@
         <div :class="classes">
           <div v-for="(field, key) in fieldsetItem.fields.visible" :key="key" :class="getFieldClass({ index: key, fields: normalizedFields })">
             <slot :field="field" :name="`field-${field.name}`">
-              <qas-field :disable="isFieldDisabled(field)" v-bind="fieldsProps[field.name]" :error="errors[key]" :field="field" :model-value="modelValue[field.name]" @update:model-value="updateModelValue({ key: field.name, value: $event })" />
+              <qas-field :disable="isFieldDisabled(field)" v-bind="props.fieldsProps[field.name]" :error="props.errors[key]" :field="field" :model-value="props.modelValue[field.name]" @update:model-value="updateModelValue({ key: field.name, value: $event })" />
             </slot>
           </div>
         </div>
 
         <div v-for="(field, key) in fieldsetItem.fields.hidden" :key="key">
           <slot :field="field" :name="`field-${field.name}`">
-            <qas-field :disable="isFieldDisabled(field)" v-bind="fieldsProps[field.name]" :field="field" :model-value="modelValue[field.name]" @update:model-value="updateModelValue({ key: field.name, value: $event })" />
+            <qas-field :disable="isFieldDisabled(field)" v-bind="props.fieldsProps[field.name]" :field="field" :model-value="props.modelValue[field.name]" @update:model-value="updateModelValue({ key: field.name, value: $event })" />
           </slot>
         </div>
       </div>