@bildvitta/quasar-ui-asteroid 3.17.0-beta.20 → 3.17.0-beta.21

package/src/components/gallery/QasGallery.yml

@@ -1,188 +1,188 @@
-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:
-  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']
-
-  dialog-props:
-    desc: Props para ser repassada para o componente "QasDialog" (utilizado para dialog de remover imagem).
-    default: {}
-    type: Object
-
-  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
-
-  gallery-card-props:
-    desc: Propriedades repassadas para o QasGalleryCard
-    default: {}
-    type: Object
-
-  initial-size:
-    desc: Quantidade de imagens iniciais.
-    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:
-  actions:
-    desc: Slot para ações do cabeçalho.
-    scope:
-      index:
-        desc: index atual.
-        default: 0
-        type: Number
-
-      image:
-        desc: imagem atual.
-        default: {}
-        type: Object
-
-  bottom:
-    desc: Slot para acessar o conteúdo abaixo da imagem.
-    scope:
-      index:
-        desc: index atual.
-        default: 0
-        type: Number
-
-      image:
-        desc: imagem atual.
-        default: {}
-        type: Object
-
-
-  default:
-    desc: Slot para todo conteúdo onde fica o botão "mostrar mais".
-
-  image:
-    desc: Slot para acessar o conteúdo da imagem (onde fica o QasGridGenerator).
-    scope:
-      index:
-        desc: index atual.
-        default: 0
-        type: Number
-
-      image:
-        desc: imagem atual.
-        default: {}
-        type: Object
-
-  header:
-    desc: Slot para acessar o conteúdo do cabeçalho.
-    scope:
-      index:
-        desc: index atual.
-        default: 0
-        type: Number
-
-      image:
-        desc: imagem atual.
-        default: {}
-        type: Object
-
-  name:
-    desc: Slot para acessar o conteúdo do nome, acima da imagem.
-    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
-
-selectors:
-  gallery-btn-show-more:
-    desc: Seletor do botão "mostrar mais".
-    examples: ['data-cy="gallery-btn-show-more"']
-
-  gallery-carousel:
-    desc: Seletor do carousel.
-    examples: ['data-cy="gallery-carousel"']
-
-  'gallery-carousel-slide-[index]':
-    desc: Seletor pelo index do slide do carousel.
-    examples: ['data-cy="gallery-carousel-slide-0"', 'data-cy="gallery-carousel-slide-1"']
-
-  'gallery-image-[index]':
-    desc: Seletor pelo index da imagem da galeria.
-    examples: ['data-cy="gallery-image-0"', 'data-cy="gallery-image-1"']
+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:
+  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']
+
+  dialog-props:
+    desc: Props para ser repassada para o componente "QasDialog" (utilizado para dialog de remover imagem).
+    default: {}
+    type: Object
+
+  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
+
+  gallery-card-props:
+    desc: Propriedades repassadas para o QasGalleryCard
+    default: {}
+    type: Object
+
+  initial-size:
+    desc: Quantidade de imagens iniciais.
+    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:
+  actions:
+    desc: Slot para ações do cabeçalho.
+    scope:
+      index:
+        desc: index atual.
+        default: 0
+        type: Number
+
+      image:
+        desc: imagem atual.
+        default: {}
+        type: Object
+
+  bottom:
+    desc: Slot para acessar o conteúdo abaixo da imagem.
+    scope:
+      index:
+        desc: index atual.
+        default: 0
+        type: Number
+
+      image:
+        desc: imagem atual.
+        default: {}
+        type: Object
+
+
+  default:
+    desc: Slot para todo conteúdo onde fica o botão "mostrar mais".
+
+  image:
+    desc: Slot para acessar o conteúdo da imagem (onde fica o QasGridGenerator).
+    scope:
+      index:
+        desc: index atual.
+        default: 0
+        type: Number
+
+      image:
+        desc: imagem atual.
+        default: {}
+        type: Object
+
+  header:
+    desc: Slot para acessar o conteúdo do cabeçalho.
+    scope:
+      index:
+        desc: index atual.
+        default: 0
+        type: Number
+
+      image:
+        desc: imagem atual.
+        default: {}
+        type: Object
+
+  name:
+    desc: Slot para acessar o conteúdo do nome, acima da imagem.
+    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
+
+selectors:
+  gallery-btn-show-more:
+    desc: Seletor do botão "mostrar mais".
+    examples: ['data-cy="gallery-btn-show-more"']
+
+  gallery-carousel:
+    desc: Seletor do carousel.
+    examples: ['data-cy="gallery-carousel"']
+
+  'gallery-carousel-slide-[index]':
+    desc: Seletor pelo index do slide do carousel.
+    examples: ['data-cy="gallery-carousel-slide-0"', 'data-cy="gallery-carousel-slide-1"']
+
+  'gallery-image-[index]':
+    desc: Seletor pelo index da imagem da galeria.
+    examples: ['data-cy="gallery-image-0"', 'data-cy="gallery-image-1"']

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

@@ -1,54 +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
-  }
-}
+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

@@ -1,92 +1,92 @@
-<template>
-  <div class="pv-gallery-carousel-dialog">
-    <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-10" icon="sym_r_close" variant="tertiary" @click="close" />
-        </div>
-      </template>
-
-      <template #description>
-        <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>
-        </q-carousel>
-      </template>
-    </qas-dialog>
-  </div>
-</template>
-
-<script setup>
-import { useScreen } from '../../../composables'
-
-import { computed } from 'vue'
-
-defineOptions({ name: 'PvGalleryCarouselDialog' })
-
-const props = defineProps({
-  images: {
-    type: Array,
-    default: () => []
-  },
-
-  imageIndex: {
-    type: Number,
-    default: 0
-  },
-
-  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>
-
-<style lang="scss">
-.pv-gallery-carousel-dialog {
-  // https://quasar.dev/style/sass-scss-variables#caveat: $
-
-  &__carousel .q-carousel__control .q-btn {
-    @include set-button(
-      tertiary,
-      true,
-      false,
-      primary
-    );
-  }
-}
-</style>
+<template>
+  <div class="pv-gallery-carousel-dialog">
+    <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-10" icon="sym_r_close" variant="tertiary" @click="close" />
+        </div>
+      </template>
+
+      <template #description>
+        <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>
+        </q-carousel>
+      </template>
+    </qas-dialog>
+  </div>
+</template>
+
+<script setup>
+import { useScreen } from '../../../composables'
+
+import { computed } from 'vue'
+
+defineOptions({ name: 'PvGalleryCarouselDialog' })
+
+const props = defineProps({
+  images: {
+    type: Array,
+    default: () => []
+  },
+
+  imageIndex: {
+    type: Number,
+    default: 0
+  },
+
+  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>
+
+<style lang="scss">
+.pv-gallery-carousel-dialog {
+  // https://quasar.dev/style/sass-scss-variables#caveat: $
+
+  &__carousel .q-carousel__control .q-btn {
+    @include set-button(
+      tertiary,
+      true,
+      false,
+      primary
+    );
+  }
+}
+</style>