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

package/src/components/gallery/QasGallery.vue

@@ -2,8 +2,8 @@
   <div class="qas-gallery">
     <div class="q-col-gutter-md row">
       <div v-for="(image, index) in getInitialImages()" :key="index" :class="galleryColumnsClasses" :data-cy="`gallery-image-${index}`">
-        <qas-gallery-card v-bind="getGalleryCardProps({ image, index })">
-          <template v-for="(_, name) in $slots" #[name]="context">
+        <qas-gallery-card :key="galleryCardCountToReRender" v-bind="getGalleryCardProps({ image, index })">
+          <template v-for="(_, name) in slots" #[name]="context">
             <slot v-bind="context" :image="image" :index="index" :name="name" />
           </template>
         </qas-gallery-card>
@@ -11,7 +11,7 @@
 
       <slot>
         <div v-if="!hideShowMore" class="full-width text-center">
-          <qas-btn color="primary" data-cy="gallery-btn-show-more" :label="showMoreLabel" variant="tertiary" @click="showMore" />
+          <qas-btn color="primary" data-cy="gallery-btn-show-more" :label="props.showMoreLabel" variant="tertiary" @click="showMore" />
         </div>
       </slot>
 
@@ -22,243 +22,222 @@
   </div>
 </template>
 
-<script>
-import QasBtn from '../btn/QasBtn.vue'
-import PvGalleryDeleteDialog from './private/PvGalleryDeleteDialog.vue'
+<script setup>
 import PvGalleryCarouselDialog from './private/PvGalleryCarouselDialog.vue'
-import { extend } from 'quasar'
-import { deleteMixin } from '../../mixins'
-
-export default {
-  name: 'QasGallery',
-
-  components: {
-    PvGalleryCarouselDialog,
-    PvGalleryDeleteDialog,
-    QasBtn
-  },
-
-  mixins: [deleteMixin],
-
-  props: {
-    carouselNextIcon: {
-      type: String,
-      default: 'sym_r_chevron_right'
-    },
+import PvGalleryDeleteDialog from './private/PvGalleryDeleteDialog.vue'
+import QasBtn from '../btn/QasBtn.vue'
 
-    carouselPreviousIcon: {
-      type: String,
-      default: 'sym_r_chevron_left'
-    },
+import { baseProps } from './composables/use-delete'
+import { useScreen } from '../../composables'
 
-    galleryCardProps: {
-      type: Object,
-      default: () => ({})
-    },
+import { extend } from 'quasar'
+import { ref, computed, watch, useSlots } from 'vue'
 
-    initialSize: {
-      type: Number,
-      default: 4,
-      validator: value => {
-        const acceptableValues = [1, 2, 3, 4, 6, 12]
+defineOptions({ name: 'QasGallery' })
 
-        return acceptableValues.includes(value)
-      }
-    },
+const props = defineProps({
+  ...baseProps,
 
-    showMoreLabel: {
-      type: String,
-      default: 'Ver mais'
-    },
+  galleryCardProps: {
+    type: Object,
+    default: () => ({})
+  },
 
-    useLoadAll: {
-      type: Boolean
-    },
+  initialSize: {
+    type: Number,
+    default: 4,
+    validator: value => [1, 2, 3, 4, 6, 12].includes(value)
+  },
 
-    useDestroy: {
-      type: Boolean
-    },
+  showMoreLabel: {
+    type: String,
+    default: 'Ver mais'
+  },
 
-    useObjectModel: {
-      type: Boolean
-    },
+  useLoadAll: {
+    type: Boolean
+  },
 
-    modelValue: {
-      type: Array,
-      default: () => []
-    },
+  useDestroy: {
+    type: Boolean
+  },
 
-    modelKey: {
-      type: String,
-      default: ''
-    }
+  useObjectModel: {
+    type: Boolean
   },
 
-  emits: [
-    'delete-error',
-    'delete-success',
-    'update:modelValue'
-  ],
-
-  data () {
-    return {
-      carouselDialog: false,
-      imageIndex: 0,
-      displayedImages: this.initialSize,
-      showDeleteDialog: false,
-      currentModel: [],
-      imageToBeDestroyed: { index: null }
-    }
+  modelValue: {
+    type: Array,
+    default: () => []
   },
 
-  computed: {
-    galleryColumnsClasses () {
-      const size = 12 / this.initialSize
-      const col = `col-${size}`
+  modelKey: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits([
+  'delete-error',
+  'delete-success',
+  'update:modelValue'
+])
+
+const screen = useScreen()
+const slots = useSlots()
+
+const carouselDialog = ref(false)
+const imageIndex = ref(0)
+const displayedImages = ref(props.initialSize)
+const showDeleteDialog = ref(false)
+const currentModel = ref([])
+const imageToBeDestroyed = ref({ index: null })
+
+// contador para key
+const galleryCardCountToReRender = ref(1)
+
+// computed
+const galleryColumnsClasses = computed(() => {
+  const size = 12 / props.initialSize
+  const col = `col-${size}`
+
+  return screen.isSmall ? 'col-12' : col
+})
+
+const clonedImages = computed(() => extend(true, [], props.modelValue))
+
+const normalizedImages = computed(() => {
+  if (props.useObjectModel) return clonedImages.value
+
+  return clonedImages.value.map(url => ({ url }))
+})
+
+const hideShowMore = computed(() => {
+  return (normalizedImages.value.length <= displayedImages.value) || props.useLoadAll
+})
+
+const deleteGalleryDialogProps = computed(() => {
+  return {
+    customId: props.customId,
+    dialogProps: props.dialogProps,
+    entity: props.entity,
+    modelKey: props.modelKey,
+    payload: currentModel.value,
+    url: props.url
+  }
+})
 
-      return this.$qas.screen.isSmall ? 'col-12' : col
-    },
+watch(() => normalizedImages.value, value => {
+  currentModel.value = extend(true, [], value)
+}, { immediate: true })
 
-    hideShowMore () {
-      return (this.normalizedImages.length <= this.displayedImages) || this.useLoadAll
-    },
+// functions
+function getActionsMenuProps ({ image, index }) {
+  if (!props.useDestroy) return {}
 
-    normalizedImages () {
-      if (!this.useObjectModel) {
-        return this.clonedImages.map(url => ({ url }))
-      }
+  return {
+    useLabel: false,
 
-      return this.clonedImages
+    buttonProps: {
+      disable: isDestroyDisabled(image)
     },
 
-    clonedImages () {
-      return extend(true, [], this.modelValue)
-    },
+    list: {
+      destroy: {
+        label: 'Excluir',
+        color: 'grey-10',
+        icon: 'sym_r_delete',
 
-    deleteGalleryDialogProps () {
-      return {
-        customId: this.customId,
-        dialogProps: this.dialogProps,
-        entity: this.entity,
-        modelKey: this.modelKey,
-        payload: this.currentModel,
-        url: this.url
+        handler: () => onDelete(image, index)
       }
     }
-  },
-
-  watch: {
-    normalizedImages: {
-      handler (value) {
-        this.currentModel = extend(true, [], value)
-      },
-
-      immediate: true
-    }
-  },
-
-  methods: {
-    toggleCarouselDialog (index) {
-      this.imageIndex = index
-      this.carouselDialog = !this.carouselDialog
-    },
-
-    showMore () {
-      this.displayedImages += this.displayedImages
-    },
-
-    onError (error) {
-      const index = this.normalizedImages.findIndex(image => image.url === error)
+  }
+}
 
-      if (~index) {
-        this.normalizedImages.splice(index, 1)
-        this.$forceUpdate()
-      }
-    },
+function getGalleryCardProps ({ image, index }) {
+  return {
+    actionsMenuProps: getActionsMenuProps({ image, index }),
+    card: image,
+    imageProps: getImageProps({ image, index }),
 
-    getGalleryCardProps ({ image, index }) {
-      return {
-        card: image,
-        imageProps: this.getImageProps({ image, index }),
-        actionsMenuProps: this.getActionsMenuProps({ image, index }),
-        ...this.galleryCardProps
-      }
-    },
+    ...props.galleryCardProps
+  }
+}
 
-    getActionsMenuProps ({ image, index }) {
-      if (!this.useDestroy) return {}
+function getImageProps ({ image, index }) {
+  return {
+    class: 'cursor-pointer',
 
-      return {
-        useLabel: false,
+    onClick: () => toggleCarouselDialog(index),
+    onError: () => onError(image.url)
+  }
+}
 
-        buttonProps: {
-          disable: this.isDestroyDisabled(image)
-        },
+function getInitialImages () {
+  return props.useLoadAll
+    ? normalizedImages.value
+    : normalizedImages.value.slice(0, displayedImages.value)
+}
 
-        list: {
-          destroy: {
-            label: 'Excluir',
-            color: 'grey-10',
-            icon: 'sym_r_delete',
+function isDestroyDisabled (image) {
+  return 'destroyable' in image && !image.destroyable
+}
 
-            handler: () => this.onDestroy(image, index)
-          }
-        }
-      }
-    },
+function resetCurrentModel () {
+  currentModel.value = extend(true, [], normalizedImages.value)
+}
 
-    getImageProps ({ image, index }) {
-      return {
-        class: 'cursor-pointer',
+function onError (error) {
+  const index = normalizedImages.value.findIndex(image => image.url === error)
 
-        onClick: () => this.toggleCarouselDialog(index),
-        onError: () => this.onError(image.url)
-      }
-    },
+  if (~index) {
+    normalizedImages.value.splice(index, 1)
 
-    getInitialImages () {
-      return this.useLoadAll
-        ? this.normalizedImages
-        : this.normalizedImages.slice(0, this.displayedImages)
-    },
+    /**
+     * Posteriormente no Options API estava sendo usado "this.$forceUpdate()"
+     * porém agora estamos usando uma forma mais apropriada que é atualizar através de key
+     * com contadores.
+     */
+    galleryCardCountToReRender.value += 1
+  }
+}
 
-    onDestroy (image, index) {
-      if (this.isDestroyDisabled(image)) return
+function onDeleteError (error) {
+  resetCurrentModel()
 
-      this.imageToBeDestroyed.index = index
+  emit(
+    'delete-error',
+    { data: error, index: imageToBeDestroyed.value.index }
+  )
+}
 
-      this.currentModel.splice(this.imageToBeDestroyed.index, 1)
+function onDelete (image, index) {
+  if (isDestroyDisabled(image)) return
 
-      this.showDeleteDialog = !this.showDeleteDialog
-    },
+  imageToBeDestroyed.value.index = index
 
-    isDestroyDisabled (image) {
-      return 'destroyable' in image && !image.destroyable
-    },
+  currentModel.value.splice(imageToBeDestroyed.value.index, 1)
 
-    onDeleteSuccess () {
-      this.normalizedImages.splice(this.imageToBeDestroyed.index, 1)
+  showDeleteDialog.value = !showDeleteDialog.value
+}
 
-      this.$emit('update:modelValue', this.normalizedImages)
+function onDeleteSuccess () {
+  normalizedImages.value.splice(imageToBeDestroyed.value.index, 1)
 
-      this.$emit(
-        'delete-success',
-        { data: this.normalizedImages, index: this.imageToBeDestroyed.index }
-      )
-    },
+  emit('update:modelValue', normalizedImages.value)
 
-    resetCurrentModel () {
-      this.currentModel = extend(true, [], this.normalizedImages)
-    },
+  emit(
+    'delete-success',
+    { data: normalizedImages.value, index: imageToBeDestroyed.value.index }
+  )
+}
 
-    onDeleteError (error) {
-      this.resetCurrentModel()
+function toggleCarouselDialog (index) {
+  imageIndex.value = index
+  carouselDialog.value = !carouselDialog.value
+}
 
-      this.$emit(
-        'delete-error',
-        { data: error, index: this.imageToBeDestroyed.index }
-      )
-    }
-  }
+function showMore () {
+  displayedImages.value += displayedImages.value
 }
 </script>

package/src/components/gallery/composables/use-delete.js

@@ -0,0 +1,54 @@
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+export const baseProps = {
+  customId: {
+    default: '',
+    type: [Number, String]
+  },
+
+  dialogProps: {
+    default: () => ({}),
+    type: Object
+  },
+
+  entity: {
+    default: '',
+    type: String
+  },
+
+  url: {
+    default: '',
+    type: String
+  }
+}
+
+export default function useDelete ({ props, destroyFn, emit }) {
+  const route = useRoute()
+
+  const defaultDialogProps = computed(() => {
+    return {
+      card: {
+        description: 'Tem certeza que deseja excluir este item?'
+      },
+
+      ok: {
+        label: 'Excluir',
+        onClick: destroyFn
+      },
+
+      cancel: {
+        onClick: () => emit('cancel')
+      },
+
+      ...props.dialogProps
+    }
+  })
+
+  const id = computed(() => props.customId || route.params.id)
+
+  return {
+    defaultDialogProps,
+    id
+  }
+}

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

@@ -8,9 +8,9 @@
       </template>
 
       <template #description>
-        <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">
+        <q-carousel v-model="imageIndexModel" animated :arrows="!screen.isSmall" class="pv-gallery-carousel-dialog__carousel" control-text-color="primary" data-cy="gallery-carousel" :fullscreen="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 props.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="screen.isSmall" class="full-width justify-end row">
               <qas-btn color="grey-10" icon="sym_r_close" variant="tertiary" @click="close" />
             </div>
           </q-carousel-slide>
@@ -20,66 +20,59 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'PvGalleryCarouselDialog',
+<script setup>
+import { useScreen } from '../../../composables'
 
-  props: {
-    images: {
-      type: Array,
-      default: () => []
-    },
+import { computed } from 'vue'
 
-    imageIndex: {
-      type: Number,
-      default: 0
-    },
+defineOptions({ name: 'PvGalleryCarouselDialog' })
 
-    modelValue: {
-      type: Boolean
-    }
+const props = defineProps({
+  images: {
+    type: Array,
+    default: () => []
   },
 
-  emits: [
-    'update:modelValue',
-    'update:imageIndex'
-  ],
-
-  computed: {
-    model: {
-      get () {
-        return this.modelValue
-      },
-
-      set (value) {
-        return this.$emit('update:modelValue', value)
-      }
-    },
-
-    imageIndexModel: {
-      get () {
-        return this.imageIndex
-      },
-
-      set (value) {
-        return this.$emit('update:imageIndex', value)
-      }
-    },
-
-    carouselImageHeight () {
-      return 'calc((500/976) * 100vh)'
-    },
-
-    isSingleImage () {
-      return this.images.length === 1
-    }
+  imageIndex: {
+    type: Number,
+    default: 0
   },
 
-  methods: {
-    close () {
-      this.$emit('update:modelValue', false)
-    }
+  modelValue: {
+    type: Boolean
   }
+})
+
+const emit = defineEmits(['update:modelValue', 'update:imageIndex'])
+
+const screen = useScreen()
+
+const carouselImageHeight = 'calc((500/976) * 100vh)'
+
+const model = computed({
+  get () {
+    return props.modelValue
+  },
+
+  set (value) {
+    emit('update:modelValue', value)
+  }
+})
+
+const imageIndexModel = computed({
+  get () {
+    return props.imageIndex
+  },
+
+  set (value) {
+    return emit('update:imageIndex', value)
+  }
+})
+
+const isSingleImage = props.images.length === 1
+
+function close () {
+  emit('update:modelValue', false)
 }
 </script>