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

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

@@ -1,63 +1,54 @@
 <template>
-  <qas-dialog v-bind="mx_defaultDialogProps" />
+  <qas-dialog v-bind="defaultDialogProps" />
 </template>
 
-<script>
-import { getAction } from '@bildvitta/store-adapter'
-
-import QasDialog from '../../dialog/QasDialog.vue'
+<script setup>
 import { promiseHandler } from '../../../helpers'
-import { deleteMixin } from '../../../mixins'
-
-export default {
-  name: 'PvGalleryDeleteDialog',
+import useDelete, { baseProps } from '../composables/use-delete'
 
-  components: {
-    QasDialog
-  },
+import { inject } from 'vue'
 
-  mixins: [deleteMixin],
+defineOptions({ name: 'PvGalleryDeleteDialog' })
 
-  props: {
-    payload: {
-      type: Array,
-      default: () => []
-    },
+const props = defineProps({
+  ...baseProps,
 
-    modelKey: {
-      type: String,
-      default: ''
-    }
+  payload: {
+    type: Array,
+    default: () => []
   },
 
-  emits: [
-    'success',
-    'error',
-    'cancel'
-  ],
-
-  methods: {
-    // chamado no mixin
-    async destroy () {
-      const { data, error } = await promiseHandler(
-        getAction.call(this, {
-          entity: this.entity,
-          key: 'update',
-          payload: {
-            id: this.mx_id,
-            url: this.url,
-            payload: { [this.modelKey]: this.payload }
-          }
-        }),
-        {
-          errorMessage: 'Ops! Não foi possível deletar o item.',
-          successMessage: 'Item deletado com sucesso!'
-        }
-      )
-
-      if (data) return this.$emit('success', data)
-      if (error) return this.$emit('error', error)
-    }
+  modelKey: {
+    type: String,
+    default: ''
   }
+})
+
+const emit = defineEmits(['success', 'error', 'cancel'])
+
+const qas = inject('qas')
+
+const { defaultDialogProps, id } = useDelete({ props, emit, destroyFn: destroy })
+
+async function destroy () {
+  const { data, error } = await promiseHandler(
+    qas.getAction({
+      entity: props.entity,
+      key: 'update',
+      payload: {
+        id: id.value,
+        url: props.url,
+        payload: { [props.modelKey]: props.payload }
+      }
+    }),
+    {
+      errorMessage: 'Ops! Não foi possível deletar o item.',
+      successMessage: 'Item deletado com sucesso!'
+    }
+  )
+
+  if (data) return emit('success', data)
+
+  if (error) emit('error', error)
 }
 </script>

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

@@ -3,8 +3,8 @@
     <header class="flat items-center no-wrap row" :class="headerClasses">
       <slot name="header">
         <div class="ellipsis q-mr-xs qas-gallery__name text-subtitle1">
-          <slot v-if="card.name" name="name">
-            {{ card.name }}
+          <slot v-if="props.card.name" name="name">
+            {{ props.card.name }}
           </slot>
         </div>
 
@@ -18,19 +18,19 @@
 
     <div class="qas-gallery-card__image">
       <slot name="image">
-        <q-img class="rounded-borders" height="100%" :src="card.url" v-bind="imageProps">
+        <q-img class="rounded-borders" height="100%" :src="props.card.url" v-bind="props.imageProps">
           <template #error>
             <div :class="errorClasses">
               <div class="text-center">
                 <slot name="image-error-icon">
-                  <div v-if="errorIcon">
-                    <q-icon :name="errorIcon" size="sm" />
+                  <div v-if="props.errorIcon">
+                    <q-icon :name="props.errorIcon" size="sm" />
                   </div>
                 </slot>
 
                 <slot name="image-error">
                   <div>
-                    {{ errorMessage }}
+                    {{ props.errorMessage }}
                   </div>
                 </slot>
               </div>
@@ -42,112 +42,99 @@
 
     <div v-if="hasBottom" class="q-mt-md">
       <slot name="bottom">
-        <qas-grid-generator v-if="hasGridGenerator" v-bind="gridGeneratorProps" />
+        <qas-grid-generator v-if="hasGridGenerator" v-bind="props.gridGeneratorProps" />
       </slot>
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'QasGalleryCard',
-
-  props: {
-    actionsMenuProps: {
-      type: Object,
-      default: () => ({})
-    },
-
-    card: {
-      type: Object,
-      default: () => ({})
-    },
-
-    disable: {
-      type: Boolean
-    },
-
-    errorIcon: {
-      type: String,
-      default: ''
-    },
-
-    errorMessage: {
-      type: String,
-      default: ''
-    },
-
-    gridGeneratorProps: {
-      type: Object,
-      default: () => ({})
-    },
-
-    imageProps: {
-      type: Object,
-      default: () => ({})
-    }
+<script setup>
+import { computed, useSlots } from 'vue'
+
+defineOptions({ name: 'QasGalleryCard' })
+
+const props = defineProps({
+  actionsMenuProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  card: {
+    type: Object,
+    default: () => ({})
+  },
+
+  disable: {
+    type: Boolean
+  },
+
+  errorIcon: {
+    type: String,
+    default: ''
+  },
+
+  errorMessage: {
+    type: String,
+    default: ''
   },
 
-  computed: {
-    classes () {
-      return {
-        'text-grey-6': this.disable
-      }
-    },
-
-    defaultActionsMenuProps () {
-      const { buttonProps } = this.actionsMenuProps
-
-      return {
-        useLabel: false,
-        ...this.actionsMenuProps,
-
-        buttonProps: {
-          disable: this.disable,
-          ...buttonProps
-        }
-      }
-    },
-
-    hasActions () {
-      return !!Object.keys(this.actionsMenuProps).length || this.hasActionsSlot
-    },
-
-    hasActionsSlot () {
-      return !!this.$slots.actions
-    },
-
-    hasBottom () {
-      return !!this.$slots.bottom || this.hasGridGenerator
-    },
-
-    hasGridGenerator () {
-      return !!Object.keys(this.gridGeneratorProps).length
-    },
-
-    headerClasses () {
-      return {
-        'justify-between': this.card.name,
-        'justify-right': !this.card.name,
-        'text-grey-10': !this.disable,
-        'q-mb-md': this.hasActions || this.card.name
-      }
-    },
-
-    errorClasses () {
-      return [
-        'bg-grey-4',
-        'flex',
-        'full-height',
-        'full-width',
-        'items-center',
-        'justify-center',
-        'text-grey-10',
-        'text-subtitle2'
-      ]
+  gridGeneratorProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  imageProps: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const slots = useSlots()
+
+const errorClasses = [
+  'bg-grey-4',
+  'flex',
+  'full-height',
+  'full-width',
+  'items-center',
+  'justify-center',
+  'text-grey-10',
+  'text-subtitle2'
+]
+
+const classes = computed(() => {
+  return {
+    'text-grey-6': props.disable
+  }
+})
+
+const headerClasses = computed(() => {
+  return {
+    'justify-between': props.card.name,
+    'justify-right': !props.card.name,
+    'text-grey-10': !props.disable,
+    'q-mb-md': hasActions.value || props.card.name
+  }
+})
+
+const defaultActionsMenuProps = computed(() => {
+  const { buttonProps } = props.actionsMenuProps
+
+  return {
+    useLabel: false,
+    ...props.actionsMenuProps,
+
+    buttonProps: {
+      disable: props.disable,
+      ...buttonProps
     }
   }
-}
+})
+
+const hasActionsSlot = computed(() => !!slots.actions)
+const hasActions = computed(() => !!Object.keys(props.actionsMenuProps).length || hasActionsSlot.value)
+const hasGridGenerator = computed(() => !!Object.keys(props.gridGeneratorProps).length)
+const hasBottom = computed(() => !!slots.bottom || hasGridGenerator.value)
 </script>
 
 <style lang="scss">

package/src/components/grid-generator/QasGridGenerator.vue

@@ -3,13 +3,13 @@
     <div v-for="(field, key) in fieldsByResult" :key="key" :class="getFieldClass({ index: key, isGridGenerator: true })">
       <slot :field="field" :name="`field-${field.name}`">
         <slot :field="field" name="header">
-          <header :class="headerClass" :data-cy="`grid-generator-${field.name}-field`">
+          <header :class="props.headerClass" :data-cy="`grid-generator-${field.name}-field`">
             {{ field.label }}
           </header>
         </slot>
 
         <slot :field="field" name="content">
-          <div :class="contentClass" :data-cy="`grid-generator-${field.name}-result`">
+          <div :class="props.contentClass" :data-cy="`grid-generator-${field.name}-result`">
             {{ field.formattedResult }}
           </div>
         </slot>

package/src/components/header-actions/QasHeaderActions.vue

@@ -2,77 +2,62 @@
   <div class="justify-between no-wrap q-col-gutter-x-md q-mb-xl row text-body1 text-grey-8" :class="containerClass">
     <div :class="leftClass">
       <slot name="left">
-        {{ text }}
+        {{ props.text }}
       </slot>
     </div>
 
     <div v-if="hasRightSide" class="col-3 col-md-3 col-sm-4 justify-end row">
       <slot name="right">
-        <qas-actions-menu v-if="hasDefaultActionsMenu" v-bind="actionsMenuProps" />
+        <qas-actions-menu v-if="hasDefaultActionsMenu" v-bind="props.actionsMenuProps" />
 
-        <qas-btn v-if="hasDefaultButton" :use-label-on-small-screen="false" v-bind="buttonProps" />
+        <qas-btn v-if="hasDefaultButton" :use-label-on-small-screen="false" v-bind="props.buttonProps" />
       </slot>
     </div>
   </div>
 </template>
 
-<script>
-const AlignTypes = {
-  Start: 'start',
-  Center: 'center',
-  End: 'end'
-}
+<script setup>
+import { FlexAlign } from '../../enums/Align'
 
-export default {
-  name: 'QasHeaderActions',
+import { computed, useSlots } from 'vue'
 
-  props: {
-    actionsMenuProps: {
-      type: Object,
-      default: () => ({})
-    },
+defineOptions({ name: 'QasHeaderActions' })
 
-    alignColumns: {
-      default: AlignTypes.Center,
-      type: String,
-      validator: value => Object.values(AlignTypes).includes(value)
-    },
+const props = defineProps({
+  actionsMenuProps: {
+    type: Object,
+    default: () => ({})
+  },
 
-    buttonProps: {
-      default: () => ({}),
-      type: Object
-    },
+  alignColumns: {
+    default: FlexAlign.Center,
+    type: String,
+    validator: value => Object.values(FlexAlign).includes(value)
+  },
 
-    text: {
-      type: String,
-      default: ''
-    }
+  buttonProps: {
+    default: () => ({}),
+    type: Object
   },
 
-  computed: {
-    containerClass () {
-      return `items-${this.alignColumns}`
-    },
+  text: {
+    type: String,
+    default: ''
+  }
+})
 
-    hasDefaultButton () {
-      return !!Object.keys(this.buttonProps).length
-    },
+const slots = useSlots()
 
-    hasDefaultActionsMenu () {
-      return !!Object.keys(this.actionsMenuProps).length
-    },
+// computed
+const containerClass = computed(() => `items-${props.alignColumns}`)
+const leftClass = computed(() => hasRightSide.value ? 'col-9 col-md-9 col-sm-8' : 'col-12')
 
-    hasRightSlot () {
-      return !!this.$slots.right
-    },
+const hasDefaultButton = computed(() => !!Object.keys(props.buttonProps).length)
+const hasDefaultActionsMenu = computed(() => !!Object.keys(props.actionsMenuProps).length)
 
-    hasRightSide () {
-      return this.hasRightSlot || this.hasDefaultActionsMenu || this.hasDefaultButton
-    },
+const hasRightSide = computed(() => {
+  const hasRightSlot = !!slots.right
 
-    leftClass () {
-      return this.hasRightSide ? 'col-9 col-md-9 col-sm-8' : 'col-12'
-    }
-  }
-}
+  return hasRightSlot || hasDefaultActionsMenu.value || hasDefaultButton.value
+})
 </script>

package/src/components/header-actions/QasHeaderActions.yml

@@ -13,7 +13,7 @@ props:
     desc: Alinhamento vertical das colunas.
     default: center
     type: String
-    examples: [start, center, end]
+    examples: [start, center, end, between, around]
 
   button-props:
     desc: Propriedades do QasBtn.

package/src/components/infinite-scroll/QasInfiniteScroll.vue

@@ -62,7 +62,7 @@ const props = defineProps({
 
 defineExpose({ refresh, remove })
 
-const emits = defineEmits(['update:list'])
+const emit = defineEmits(['update:list'])
 
 const axios = inject('axios')
 
@@ -97,7 +97,7 @@ const model = computed({
   },
 
   set (newList) {
-    emits('update:list', newList)
+    emit('update:list', newList)
   }
 })
 

package/src/components/label/QasLabel.vue

@@ -4,70 +4,58 @@
   </div>
 </template>
 
-<script>
-import { addCounterSuffix, getRequiredLabel } from '../../helpers'
+<script setup>
 import { Spacing } from '../../enums/Spacing'
+import { addCounterSuffix, getRequiredLabel } from '../../helpers'
 
-export default {
-  name: 'QasLabel',
-
-  props: {
-    color: {
-      type: String,
-      default: 'grey-10'
-    },
-
-    count: {
-      default: 0,
-      type: [Number, String]
-    },
+import { computed } from 'vue'
 
-    label: {
-      default: '',
-      type: String
-    },
+defineOptions({ name: 'QasLabel' })
 
-    margin: {
-      default: Spacing.Md,
-      type: String,
-      validator: value => {
-        const availableSpacings = Object.values(Spacing)
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'grey-10'
+  },
 
-        return availableSpacings.includes(value)
-      }
-    },
+  count: {
+    default: 0,
+    type: [Number, String]
+  },
 
-    required: {
-      type: Boolean
-    },
+  label: {
+    default: '',
+    type: String
+  },
 
-    typography: {
-      default: 'h4',
-      type: String,
-      validator: value => {
-        const availableTypography = ['h4', 'h5']
+  margin: {
+    default: Spacing.Md,
+    type: String,
+    validator: value => Object.values(Spacing).includes(value)
+  },
 
-        return availableTypography.includes(value)
-      }
-    }
+  required: {
+    type: Boolean
   },
 
-  computed: {
-    labelWithSuffix () {
-      return addCounterSuffix(this.label, parseFloat(this.count))
-    },
+  typography: {
+    default: 'h4',
+    type: String,
+    validator: value => ['h4', 'h5'].includes(value)
+  }
+})
 
-    formattedLabel () {
-      return getRequiredLabel({ label: this.labelWithSuffix, required: this.required })
-    },
+const classes = computed(() => {
+  return [
+    `q-mb-${props.margin}`,
+    `text-${props.color}`,
+    `text-${props.typography}`
+  ]
+})
 
-    classes () {
-      return [
-        `q-mb-${this.margin}`,
-        `text-${this.color}`,
-        `text-${this.typography}`
-      ]
-    }
-  }
-}
+const labelWithSuffix = computed(() => addCounterSuffix(props.label, parseFloat(props.count)))
+
+const formattedLabel = computed(() => {
+  return getRequiredLabel({ label: labelWithSuffix.value, required: props.required })
+})
 </script>