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

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

@@ -1,54 +1,54 @@
-<template>
-  <qas-dialog v-bind="defaultDialogProps" />
-</template>
-
-<script setup>
-import { promiseHandler } from '../../../helpers'
-import useDelete, { baseProps } from '../composables/use-delete'
-
-import { inject } from 'vue'
-
-defineOptions({ name: 'PvGalleryDeleteDialog' })
-
-const props = defineProps({
-  ...baseProps,
-
-  payload: {
-    type: Array,
-    default: () => []
-  },
-
-  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>
+<template>
+  <qas-dialog v-bind="defaultDialogProps" />
+</template>
+
+<script setup>
+import { promiseHandler } from '../../../helpers'
+import useDelete, { baseProps } from '../composables/use-delete'
+
+import { inject } from 'vue'
+
+defineOptions({ name: 'PvGalleryDeleteDialog' })
+
+const props = defineProps({
+  ...baseProps,
+
+  payload: {
+    type: Array,
+    default: () => []
+  },
+
+  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

@@ -1,153 +1,153 @@
-<template>
-  <qas-box class="bg-white qas-gallery-card" :class="classes" v-bind="boxProps">
-    <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="props.card.name" name="name">
-            {{ props.card.name }}
-          </slot>
-        </div>
-
-        <div v-if="hasActions">
-          <slot name="actions">
-            <qas-actions-menu v-bind="defaultActionsMenuProps" />
-          </slot>
-        </div>
-      </slot>
-    </header>
-
-    <div class="qas-gallery-card__image">
-      <slot name="image">
-        <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="props.errorIcon">
-                    <q-icon :name="props.errorIcon" size="sm" />
-                  </div>
-                </slot>
-
-                <slot name="image-error">
-                  <div>
-                    {{ props.errorMessage }}
-                  </div>
-                </slot>
-              </div>
-            </div>
-          </template>
-        </q-img>
-      </slot>
-    </div>
-
-    <div v-if="hasBottom" class="q-mt-md">
-      <slot name="bottom">
-        <qas-grid-generator v-if="hasGridGenerator" v-bind="props.gridGeneratorProps" />
-      </slot>
-    </div>
-  </qas-box>
-</template>
-
-<script setup>
-import { computed, useSlots, inject } 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: ''
-  },
-
-  gridGeneratorProps: {
-    type: Object,
-    default: () => ({})
-  },
-
-  imageProps: {
-    type: Object,
-    default: () => ({})
-  }
-})
-
-const slots = useSlots()
-
-const isInsideBox = inject('isBox', false)
-
-const boxProps = {
-  outlined: isInsideBox,
-  unelevated: isInsideBox
-}
-
-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">
-.qas-gallery-card {
-  &__image {
-    height: 180px;
-  }
-}
-</style>
+<template>
+  <qas-box class="bg-white qas-gallery-card" :class="classes" v-bind="boxProps">
+    <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="props.card.name" name="name">
+            {{ props.card.name }}
+          </slot>
+        </div>
+
+        <div v-if="hasActions">
+          <slot name="actions">
+            <qas-actions-menu v-bind="defaultActionsMenuProps" />
+          </slot>
+        </div>
+      </slot>
+    </header>
+
+    <div class="qas-gallery-card__image">
+      <slot name="image">
+        <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="props.errorIcon">
+                    <q-icon :name="props.errorIcon" size="sm" />
+                  </div>
+                </slot>
+
+                <slot name="image-error">
+                  <div>
+                    {{ props.errorMessage }}
+                  </div>
+                </slot>
+              </div>
+            </div>
+          </template>
+        </q-img>
+      </slot>
+    </div>
+
+    <div v-if="hasBottom" class="q-mt-md">
+      <slot name="bottom">
+        <qas-grid-generator v-if="hasGridGenerator" v-bind="props.gridGeneratorProps" />
+      </slot>
+    </div>
+  </qas-box>
+</template>
+
+<script setup>
+import { computed, useSlots, inject } 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: ''
+  },
+
+  gridGeneratorProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  imageProps: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const slots = useSlots()
+
+const isInsideBox = inject('isBox', false)
+
+const boxProps = {
+  outlined: isInsideBox,
+  unelevated: isInsideBox
+}
+
+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">
+.qas-gallery-card {
+  &__image {
+    height: 180px;
+  }
+}
+</style>

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

@@ -1,61 +1,61 @@
-type: component
-
-meta:
-  desc: Componente de card de galeria (utilizado no QasUploader, QasGallery e nos produtos).
-
-props:
-  actions-menu-props:
-    desc: Propriedades repassadas para o QasActionsMenu.
-    default: {}
-    type: Object
-
-  error-icon:
-    desc: Ícone que aparecerá quando uma imagem falhar ao carregar.
-    default: ''
-    type: String
-
-  error-message:
-    desc: Texto que aparecerá quando uma imagem falhar ao carregar.
-    default: ''
-    type: String
-
-  card:
-    desc: Informações do card, como name (nome) e url.
-    default: {}
-    type: Object
-    examples: ["{ name: 'meu nome', url: 'minha-url-da-imagem' }"]
-
-  disable:
-    desc: Propriedade que aplica estilos de desabilitado.
-    type: Boolean
-
-  grid-generator-props:
-    desc: Propriedades repassadas para o QasGridGenerator.
-    type: Boolean
-
-  image-props:
-    desc: Propriedades repassadas para o QImg.
-    default: {}
-    type: Object
-
-slots:
-  actions:
-    desc: Slot para ações do cabeçalho.
-
-  bottom:
-    desc: Slot para acessar o conteúdo abaixo da imagem.
-
-  image:
-    desc: Slot para acessar o conteúdo da imagem (onde fica o QasGridGenerator).
-
-  image-error:
-    desc: Slot para acessar o conteúdo da imagem quando existe algum erro com a imagem.
-
-  image-error-icon:
-    desc: Slot para acessar o conteúdo de ícone quando existe algum erro com a imagem.
-
-  header:
-    desc: Slot para acessar o conteúdo do cabeçalho.
-
-  name:
-    desc: Slot para acessar o conteúdo do nome, acima da imagem.
+type: component
+
+meta:
+  desc: Componente de card de galeria (utilizado no QasUploader, QasGallery e nos produtos).
+
+props:
+  actions-menu-props:
+    desc: Propriedades repassadas para o QasActionsMenu.
+    default: {}
+    type: Object
+
+  error-icon:
+    desc: Ícone que aparecerá quando uma imagem falhar ao carregar.
+    default: ''
+    type: String
+
+  error-message:
+    desc: Texto que aparecerá quando uma imagem falhar ao carregar.
+    default: ''
+    type: String
+
+  card:
+    desc: Informações do card, como name (nome) e url.
+    default: {}
+    type: Object
+    examples: ["{ name: 'meu nome', url: 'minha-url-da-imagem' }"]
+
+  disable:
+    desc: Propriedade que aplica estilos de desabilitado.
+    type: Boolean
+
+  grid-generator-props:
+    desc: Propriedades repassadas para o QasGridGenerator.
+    type: Boolean
+
+  image-props:
+    desc: Propriedades repassadas para o QImg.
+    default: {}
+    type: Object
+
+slots:
+  actions:
+    desc: Slot para ações do cabeçalho.
+
+  bottom:
+    desc: Slot para acessar o conteúdo abaixo da imagem.
+
+  image:
+    desc: Slot para acessar o conteúdo da imagem (onde fica o QasGridGenerator).
+
+  image-error:
+    desc: Slot para acessar o conteúdo da imagem quando existe algum erro com a imagem.
+
+  image-error-icon:
+    desc: Slot para acessar o conteúdo de ícone quando existe algum erro com a imagem.
+
+  header:
+    desc: Slot para acessar o conteúdo do cabeçalho.
+
+  name:
+    desc: Slot para acessar o conteúdo do nome, acima da imagem.