@bildvitta/quasar-ui-asteroid 3.2.0 → 3.3.0-beta.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.2.0",
+  "version": "3.3.0-beta.1",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",

package/src/components/checkbox-group/QasCheckboxGroup.yml

@@ -21,11 +21,11 @@ props:
     default: []
     type: Array
 
-
 events:
   '@update:model-value -> function(value)':
     desc: Dispara quando o model-value altera, também usado para v-model.
     params:
       value:
         desc: Novo valor do model.
-        type: []
+        default: []
+        type: Array

package/src/components/dialog/QasDialog.vue

@@ -104,6 +104,10 @@ export default {
       type: Boolean
     },
 
+    useFullMaxWidth: {
+      type: Boolean
+    },
+
     useValidationAllAtOnce: {
       type: Boolean
     }
@@ -133,6 +137,7 @@ export default {
 
     style () {
       return {
+        ...(this.useFullMaxWidth && { width: '100%' }),
         maxWidth: this.maxWidth || (this.$qas.screen.isSmall ? '' : '600px'),
         minWidth: this.minWidth || (this.$qas.screen.isSmall ? '' : '400px')
       }

package/src/components/dialog/QasDialog.yml

@@ -60,6 +60,10 @@ props:
     desc: Define se a tag onde fica a descrição no dialog vai ser um "<q-form />" ou "<div />".
     type: Boolean
 
+  use-full-max-width:
+    desc: propriedade para utilizar `100% do maxWidth`.
+    type: Boolean
+
   use-validation-at-once:
     desc: Valida todos os campos de uma única vez, ao invés de ser um por vez (que é o padrão).
     type: Boolean

package/src/components/gallery/QasGallery.vue

@@ -1,39 +1,60 @@
 
 <template>
-  <qas-box class="gallery">
+  <div class="qas-gallery">
     <div class="q-col-gutter-md row">
-      <div v-for="(image, index) in initialImages()" :key="index" :class="galleryColumnsClasses">
-        <q-img class="cursor-pointer rounded-borders" :height="imageHeight" :src="image" @click="toggleCarouselDialog(index)" @error="onError(image)" />
+      <div v-for="(image, index) in getInitialImages()" :key="index" :class="galleryColumnsClasses" :data-cy="`gallery-image-${index}`">
+        <div class="bg-white q-pa-md rounded-borders shadow-2">
+          <div class="flat items-center justify-between no-wrap q-mb-xs row text-grey-9">
+            <div class="ellipsis q-mr-xs qas-gallery__name">
+              <slot v-if="image.name" :image="image" :index="index" name="header">
+                {{ image.name }}
+              </slot>
+            </div>
+
+            <div v-if="useDestroy">
+              <slot :destroy="onDestroy" :image="image" :index="index" name="destroy">
+                <qas-btn color="grey-9" dense :disabled="isDestroyDisabled(image)" flat round size="sm" @click="onDestroy(image, index)">
+                  <q-icon name="o_delete" size="xs" />
+                </qas-btn>
+              </slot>
+            </div>
+          </div>
+
+          <q-img class="cursor-pointer rounded-borders" height="150px" :src="image.url" @click="toggleCarouselDialog(index)" @error="onError(image.url)" />
+        </div>
       </div>
+
       <slot>
         <div v-if="!hideShowMore" class="full-width text-center">
-          <qas-btn class="text-weight-bolder" color="primary" flat @click="showMore">{{ showMoreLabel }}</qas-btn>
+          <qas-btn color="primary" data-cy="gallery-btn-show-more" flat :label="showMoreLabel" @click="showMore" />
         </div>
       </slot>
-      <qas-dialog v-model="carouselDialog" :cancel="false" class="q-pa-xl" min-width="1100px" :ok="false" :persistent="false">
-        <template #header>
-          <div class="text-right">
-            <qas-btn v-close-popup dense flat icon="o_close" rounded @click="toggleCarouselDialog" />
-          </div>
-        </template>
-        <template #description>
-          <q-carousel v-model="imageIndex" animated :arrows="!$qas.screen.isSmall" control-text-color="primary" :fullscreen="$qas.screen.isSmall" :height="carouselImageHeight" :next-icon="carouselNextIcon" :prev-icon="carouselPreviousIcon" swipeable :thumbnails="showThumbnails">
-            <q-carousel-slide v-for="(image, index) in clonedImages" :key="index" class="bg-no-repeat bg-size-contain" :img-src="image" :name="index">
-              <div v-if="$qas.screen.isSmall" class="full-width justify-end row">
-                <qas-btn dense flat icon="o_close" @click="toggleCarouselDialog" />
-              </div>
-            </q-carousel-slide>
-          </q-carousel>
-        </template>
-      </qas-dialog>
+
+      <pv-gallery-carousel-dialog v-model="carouselDialog" v-model:imageIndex="imageIndex" :images="normalizedImages" />
+
+      <pv-gallery-delete-dialog v-model="showDeleteDialog" v-bind="deleteGalleryDialogProps" @cancel="resetCurrentModel" @error="onDeleteError" @success="onDeleteSuccess" />
     </div>
-  </qas-box>
+  </div>
 </template>
 
 <script>
+import QasBtn from '../btn/QasBtn.vue'
+import PvGalleryDeleteDialog from './private/PvGalleryDeleteDialog.vue'
+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,
@@ -45,24 +66,14 @@ export default {
       default: 'o_chevron_left'
     },
 
-    height: {
-      type: String,
-      default: ''
-    },
-
     initialSize: {
       type: Number,
-      default: 6
-    },
+      default: 4,
+      validator: value => {
+        const acceptableValues = [1, 2, 3, 4, 6, 12]
 
-    images: {
-      type: Array,
-      default: () => []
-    },
-
-    loadSize: {
-      type: Number,
-      default: 6
+        return acceptableValues.includes(value)
+      }
     },
 
     showMoreLabel: {
@@ -72,81 +83,162 @@ export default {
 
     useLoadAll: {
       type: Boolean
+    },
+
+    useDestroy: {
+      type: Boolean
+    },
+
+    useObjectModel: {
+      type: Boolean
+    },
+
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+
+    modelKey: {
+      type: String,
+      default: ''
     }
   },
 
+  emits: [
+    'delete-error',
+    'delete-success',
+    'update:modelValue'
+  ],
+
   data () {
     return {
       carouselDialog: false,
-      clonedImages: [],
-      imageIndex: [],
-      displayedImages: this.initialSize
+      imageIndex: 0,
+      displayedImages: this.initialSize,
+      showDeleteDialog: false,
+      currentModel: [],
+      imageToBeDestroyed: { index: null }
     }
   },
 
   computed: {
-    imageHeight () {
-      if (this.isSingleImage) {
-        return this.height || 'auto'
-      }
-
-      return this.$qas.screen.isSmall ? '90px' : '120px'
-    },
-
     galleryColumnsClasses () {
-      if (this.isSingleImage) return 'col-12'
+      const size = 12 / this.initialSize
+      const col = `col-${size}`
 
-      return this.$qas.screen.isSmall ? 'col-6' : 'col-2'
+      return this.$qas.screen.isSmall ? 'col-12' : col
     },
 
     hideShowMore () {
-      return (this.clonedImages.length <= this.displayedImages) || this.useLoadAll
+      return (this.normalizedImages.length <= this.displayedImages) || this.useLoadAll
     },
 
-    carouselImageHeight () {
-      return 'calc((500/976) * 100vh)'
+    normalizedImages () {
+      if (!this.useObjectModel) {
+        return this.clonedImages.map(url => ({ url }))
+      }
+
+      return this.clonedImages
     },
 
-    showThumbnails () {
-      return !this.isSingleImage
+    clonedImages () {
+      return extend(true, [], this.modelValue)
     },
 
-    isSingleImage () {
-      return this.clonedImages.length === 1
+    deleteGalleryDialogProps () {
+      return {
+        customId: this.customId,
+        dialogProps: this.dialogProps,
+        entity: this.entity,
+        modelKey: this.modelKey,
+        payload: this.currentModel,
+        url: this.url
+      }
     }
   },
 
   watch: {
-    images: {
+    normalizedImages: {
       handler (value) {
-        this.clonedImages = [...value]
+        this.currentModel = extend(true, [], value)
       },
+
       immediate: true
     }
   },
 
   methods: {
-    toggleCarouselDialog (image) {
-      this.imageIndex = image
+    toggleCarouselDialog (index) {
+      this.imageIndex = index
       this.carouselDialog = !this.carouselDialog
     },
 
     showMore () {
-      this.displayedImages += this.loadSize
+      this.displayedImages += this.displayedImages
     },
 
     onError (error) {
-      const index = this.clonedImages.findIndex(image => image === error)
+      const index = this.normalizedImages.findIndex(image => image.url === error)
 
       if (~index) {
-        this.clonedImages.splice(index, 1)
+        this.normalizedImages.splice(index, 1)
         this.$forceUpdate()
       }
     },
 
-    initialImages () {
-      return this.useLoadAll ? this.clonedImages : this.clonedImages.slice(0, this.displayedImages)
+    getInitialImages () {
+      return this.useLoadAll
+        ? this.normalizedImages
+        : this.normalizedImages.slice(0, this.displayedImages)
+    },
+
+    onDestroy (image, index) {
+      if (this.isDestroyDisabled(image)) return
+
+      this.imageToBeDestroyed.index = index
+
+      this.currentModel.splice(this.imageToBeDestroyed.index, 1)
+
+      this.showDeleteDialog = !this.showDeleteDialog
+    },
+
+    isDestroyDisabled (image) {
+      return 'destroyable' in image && !image.destroyable
+    },
+
+    onDeleteSuccess () {
+      this.normalizedImages.splice(this.imageToBeDestroyed.index, 1)
+
+      this.$emit('update:modelValue', this.normalizedImages)
+
+      this.$emit(
+        'delete-success',
+        { data: this.normalizedImages, index: this.imageToBeDestroyed.index }
+      )
+    },
+
+    resetCurrentModel () {
+      this.currentModel = extend(true, [], this.normalizedImages)
+    },
+
+    onDeleteError (error) {
+      this.resetCurrentModel()
+
+      this.$emit(
+        'delete-error',
+        { data: error, index: this.imageToBeDestroyed.index }
+      )
     }
   }
 }
 </script>
+
+<!-- TODO rever tipografia -->
+<style lang="scss">
+.qas-gallery {
+  &__name {
+    font-size: 16px;
+    font-weight: 600;
+  }
+}
+</style>

package/src/components/gallery/QasGallery.yml

@@ -3,49 +3,129 @@ type: component
 mixins:
   - '@bildvitta/quasar-ui-asteroid/dist/api/QasBox.json'
 
-
 meta:
   desc: Componente para galeria, mostrando images dentro de um "QasDialog" ao clicar nelas.
 
 props:
-  carousel-next-icon:
-    desc: Ícone dentro do carousel para passar para próxima imagem.
-    default: o_chevron_right
+  custom-id:
+    desc: Por padrão, o componente vai pegar o "id" que vem como parâmetro na url, caso queira que o id seja diferente da url, use esta prop (utilizado para remover imagem, custom-id referente ao model e não a imagem).
     type: String
+    examples: ['my-custom-id']
 
-  carousel-previous-icon:
-    desc: Ícone dentro do carousel para passar para a imagem anterior.
-    default: o_chevron_left
-    type: String
+  dialog-props:
+    desc: Props para ser repassada para o componente "QasDialog" (utilizado para dialog de remover imagem).
+    default: {}
+    type: Object
 
-  height:
-    desc: Altura da imagem (fora do dialog).
+  entity:
+    desc: Entidade da store, por exemplo se tiver que trabalhar com modulo de usuários, teremos o model "users" na store, que vai ser nossa "entity" (utilizado para remover imagem).
     type: String
 
-  images:
-    desc: Imagens a serem exibidas.
-    default: 6
-    type: Number
-
   initial-size:
     desc: Quantidade de imagens iniciais.
     default: 6
     type: Number
 
-  load-size:
-    desc: Quantidade de fotos carregadas por vez.
-    default: 6
-    type: Number
-
   show-more-label:
     desc: Rótulo do botão de "mostrar mais".
     default: Ver mais
     type: String
 
+  model-value:
+    desc: Model do componente, usado para v-model.
+    default: []
+    type: Array
+    examples: [v-model"value"]
+    model: true
+
+  model-key:
+    desc: Chave identificadora do model, usada para identificar qual campo ela é referente.
+    default: ''
+    type: String
+    examples: [photos]
+
+  url:
+    desc: Envia como parâmetro para a action "update" do modulo correspondente a "entity" (utilizado para remover imagem).
+    type: String
+
+  use-destroy:
+    desc: Usado para habilitar botão de remover imagem da galeroa.
+    type: Boolean
+
   use-load-all:
     desc: Carrega todas imagens de uma única vez.
     type: Boolean
 
+  use-object-model:
+    desc: Usado para definir o model como objeto.
+    type: Boolean
+
 slots:
   default:
     desc: Slot para todo conteúdo onde fica o botão "mostrar mais".
+
+  destroy:
+    desc: Slot para o ícone de remover.
+    scope:
+      destroy:
+        desc: Função para remover e atualizar o model.
+        default: undefined
+        type: Function
+
+      index:
+        desc: index atual.
+        default: 0
+        type: Number
+
+      image:
+        desc: imagem atual.
+        default: {}
+        type: Object
+
+  header:
+    desc: Slot para o header.
+    scope:
+      index:
+        desc: index atual.
+        default: 0
+        type: Number
+
+      image:
+        desc: imagem atual.
+        default: {}
+        type: Object
+
+events:
+  '@update:model-value -> function(value)':
+    desc: Dispara quando o model-value altera, também usado para v-model.
+    params:
+      value:
+        desc: Novo valor do model.
+        default: []
+        type: Array
+
+  'delete-success -> function({ data, index })':
+    desc: Dispara quando deleta uma imagem da galeria com sucesso.
+    params:
+      data:
+        desc: Novo valor do v-model.
+        default: []
+        type: Array
+
+      index:
+        desc: Index da imagem deletada.
+        default: []
+        type: Array
+
+  'delete-error -> function({ data, index })':
+    desc: Dispara ocorre uma falha ao deletar uma imagem da galeria.
+    params:
+      data:
+        desc: Valor retornado no erro.
+        default: []
+        type: Array
+
+      index:
+        desc: Index da imagem que seria deletada.
+        default: []
+        type: Array

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

@@ -0,0 +1,82 @@
+<template>
+  <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 dense flat icon="o_close" rounded @click="close" />
+      </div>
+    </template>
+
+    <template #description>
+      <q-carousel v-model="imageIndexModel" animated :arrows="!$qas.screen.isSmall" control-text-color="primary" data-cy="gallery-carousel" :fullscreen="$qas.screen.isSmall" :height="carouselImageHeight" next-icon="o_chevron_right" prev-icon="o_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 dense flat icon="o_close" @click="close" />
+          </div>
+        </q-carousel-slide>
+      </q-carousel>
+    </template>
+  </qas-dialog>
+</template>
+
+<script>
+export default {
+  name: 'PvGalleryCarouselDialog',
+
+  props: {
+    images: {
+      type: Array,
+      default: () => []
+    },
+
+    imageIndex: {
+      type: Number,
+      default: 0
+    },
+
+    modelValue: {
+      type: Boolean
+    }
+  },
+
+  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
+    }
+  },
+
+  methods: {
+    close () {
+      this.$emit('update:modelValue', false)
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,63 @@
+<template>
+  <qas-dialog v-bind="mx_defaultDialogProps" />
+</template>
+
+<script>
+import { getAction } from '@bildvitta/store-adapter'
+
+import QasDialog from '../../dialog/QasDialog.vue'
+import { promiseHandler } from '../../../helpers'
+import { deleteMixin } from '../../../mixins'
+
+export default {
+  name: 'PvGalleryDeleteDialog',
+
+  components: {
+    QasDialog
+  },
+
+  mixins: [deleteMixin],
+
+  props: {
+    payload: {
+      type: Array,
+      default: () => []
+    },
+
+    modelKey: {
+      type: String,
+      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)
+    }
+  }
+}
+</script>

package/src/mixins/delete.js

@@ -0,0 +1,49 @@
+export default {
+  props: {
+    customId: {
+      default: '',
+      type: [Number, String]
+    },
+
+    dialogProps: {
+      default: () => ({}),
+      type: Object
+    },
+
+    entity: {
+      default: '',
+      type: String
+    },
+
+    url: {
+      default: '',
+      type: String
+    }
+  },
+
+  computed: {
+    mx_defaultDialogProps () {
+      return {
+        card: {
+          title: 'Confirmar',
+          description: 'Tem certeza que deseja excluir este item?'
+        },
+
+        ok: {
+          label: 'Excluir',
+          onClick: this.destroy
+        },
+
+        cancel: {
+          onClick: () => this.$emit('cancel')
+        },
+
+        ...this.dialogProps
+      }
+    },
+
+    mx_id () {
+      return this.customId || this.$route.params.id
+    }
+  }
+}

package/src/mixins/index.js

@@ -4,9 +4,11 @@ import generatorMixin from './generator.js'
 import searchFilterMixin from './search-filter.js'
 import passwordMixin from './password.js'
 import viewMixin from './view.js'
+import deleteMixin from './delete.js'
 
 export {
   contextMixin,
+  deleteMixin,
   formMixin,
   generatorMixin,
   searchFilterMixin,