Merge pull request #232 from lion5/feat/gallery-inputs

feat(GalleryInputs): Introduce New Component
lion5 · Dec 3, 2024 · f78d366 · f78d366
2 parents e40c9f5 + 563652a
commit f78d366
Show file tree

Hide file tree

Showing 57 changed files with 2,200 additions and 406 deletions.
diff --git a/packages/core/src/components/cards/CardBadgeSuccess/CardBadgeSuccess.stories.ts b/packages/core/src/components/cards/CardBadgeSuccess/CardBadgeSuccess.stories.ts
@@ -0,0 +1,25 @@
+import CardBadgeSuccess from './CardBadgeSuccess.vue'
+import ItemCard from '../ItemCard/ItemCard.vue'
+import { Meta, StoryObj } from '@storybook/vue3'
+
+export default {
+  component: CardBadgeSuccess
+} as Meta<typeof CardBadgeSuccess>
+type Story = StoryObj<typeof CardBadgeSuccess>
+
+export const Default: Story = {
+  render: (args: unknown) => ({
+    components: { CardBadgeSuccess, ItemCard },
+    setup() {
+      return { args }
+    },
+    template: `
+      <ItemCard
+        style="display: grid;background-color: var(--color-primary-surface);aspect-ratio: 1/1;width: 200px;overflow: hidden;">
+        <CardBadgeSuccess v-bind="args">Badge slot text</CardBadgeSuccess>
+      </ItemCard>`
+  }),
+  args: {
+    tooltipText: 'This is a tooltip text',
+  }
+}
diff --git a/packages/core/src/components/cards/CardBadgeSuccess/CardBadgeSuccess.vue b/packages/core/src/components/cards/CardBadgeSuccess/CardBadgeSuccess.vue
@@ -0,0 +1,35 @@
+<template>
+  <CardBadgeBase class="card-badge-success">
+    <TooltipIcon
+      :id="tooltipId"
+      :tooltip-text="tooltipText"
+      style="--tooltip-right: 0; --tooltip-bottom: 100%;"
+    >
+      <template #tooltipIcon>
+        <BaseIcon icon="bi-check" />
+      </template>
+    </TooltipIcon>
+  </CardBadgeBase>
+</template>
+
+<style lang="scss" scoped>
+.card-badge-success {
+  --image-card-badge-color: var(--color-success);
+  --image-card-badge-background-color: var(--color-success-100);
+}
+</style>
+<script setup lang="ts">
+import BaseIcon from '@core/components/icons/BaseIcon.vue'
+import CardBadgeBase from '@core/components/cards/CardBadgeBase/CardBadgeBase.vue'
+import TooltipIcon from '@core/components/utils/TooltipIcon/TooltipIcon.vue'
+import { useId } from 'vue'
+
+defineProps<{
+  /**
+   * Is displayed when the user hovers over the badge
+   */
+  tooltipText: string
+}>()
+
+const tooltipId = useId()
+</script>
diff --git a/...gdrop/ImageDropArea/ImageDropArea.spec.js → ...gdrop/ImageDropArea/ImageDropArea.spec.ts b/...gdrop/ImageDropArea/ImageDropArea.spec.js → ...gdrop/ImageDropArea/ImageDropArea.spec.ts
@@ -1,16 +1,19 @@
 import { flushPromises, mount } from '@vue/test-utils'
 import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest'
 import ImageDropArea from '@core/components/dragdrop/ImageDropArea/ImageDropArea.vue'
-import { PortalImage } from '@core/components/image/models/image'
+import type { defineComponent } from 'vue'
+import { ImageForm } from '@core/models/image/imageForm'
+
+describe('ImageDropArea.vue', () => {
+  let wrapper: ReturnType<typeof defineComponent>
 
-describe('ImageDropArea', () => {
-  let wrapper
   beforeEach(() => {
     wrapper = mount(ImageDropArea)
   })
   afterEach(() => {
     wrapper.unmount()
   })
+
   describe(':props', () => {
     it(':disable - dragOver, dragLeave and drop events are listened when set to false', async () => {
       await wrapper.setProps({ disable: false })
@@ -48,12 +51,12 @@ describe('ImageDropArea', () => {
   })
   describe('@events', () => {
     it('input - is triggered only once on drop', async () => {
-      const portalImage = new PortalImage(4711)
-      vi.spyOn(PortalImage, 'fromFile').mockResolvedValueOnce(portalImage)
+      const portalImage = new ImageForm(4711)
+      vi.spyOn(ImageForm, 'fromFile').mockResolvedValueOnce(portalImage)
 
       const file = new File([''], 'test', {
         type: 'image/jpg',
-        lastModified: new Date()
+        lastModified: Date.now()
       })
 
       const dropArea = wrapper.find('.file-drop-area')
@@ -68,12 +71,12 @@ describe('ImageDropArea', () => {
     it('input - is triggered multiple times on drop when multiselect is set to true', async () => {
       await wrapper.setProps({ multiselect: true })
 
-      const portalImage = new PortalImage(4711)
-      vi.spyOn(PortalImage, 'fromFile').mockResolvedValue(portalImage)
+      const portalImage = new ImageForm(4711)
+      vi.spyOn(ImageForm, 'fromFile').mockResolvedValue(portalImage)
 
       const file = new File([''], 'test', {
         type: 'image/jpg',
-        lastModified: new Date()
+        lastModified: Date.now()
       })
 
       const dropArea = wrapper.find('.file-drop-area')

diff --git a/packages/core/src/components/dragdrop/ImageDropArea/ImageDropArea.vue b/packages/core/src/components/dragdrop/ImageDropArea/ImageDropArea.vue
@@ -20,8 +20,8 @@
 </template>
 
 <script lang="ts" setup>
-import { PortalImage } from '@core/components/image/models/image'
 import { computed, ref } from 'vue'
+import { ImageForm } from '@core/models/image/imageForm'
 
 /**
  * This is a wrapper component to allow users to drop images over the wrapped area.
@@ -52,7 +52,7 @@ const emit = defineEmits<{
   /**
    * Is emitted when images are dropped
    */
-  (e: 'input', image: PortalImage): void
+  (e: 'input', image: ImageForm): void
 }>()
 
 const draggedOver = ref(false)
@@ -70,11 +70,11 @@ const onDrop = async (event: DragEvent) => {
     /**
      * Is emitted when images are dropped
      */
-    emit('input', await PortalImage.fromFile(files[0]))
+    emit('input', await ImageForm.fromFile(files[0]))
     return
   }
   for (const file of files) {
-    emit('input', await PortalImage.fromFile(file))
+    emit('input', await ImageForm.fromFile(file))
   }
 }
 </script>

diff --git a/packages/core/src/components/image/ImageCard/ImageCard.spec.ts b/packages/core/src/components/image/ImageCard/ImageCard.spec.ts
@@ -1,14 +1,14 @@
 import { mount } from '@vue/test-utils'
 import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
-import { PortalImage } from '@core/components/image/models/image'
-import { ImageSizes } from '@core/components/image/models/imageSizes'
 import ImageCard from '@core/components/image/ImageCard/ImageCard.vue'
 import ImageModal from '@core/components/image/ImageModal/ImageModal.vue'
 import ItemCard from '@core/components/cards/ItemCard/ItemCard.vue'
+import { ImageResponse } from '@core/models/image/imageResponse'
+import { ImageSizes } from '@core/models/image/imageSizes'
 
 describe('ImageCard', () => {
   let wrapper: ReturnType<typeof mount>
-  let portalImage: PortalImage
+  let imageResponse: ImageResponse
   let aspectRatio: string
 
   beforeAll(() => {
@@ -18,12 +18,15 @@ describe('ImageCard', () => {
   })
 
   beforeEach(() => {
-    portalImage = new PortalImage(4711, 'testAltTag')
-    portalImage.sizes = new ImageSizes('original', '', '', 'mid')
+    imageResponse = new ImageResponse(
+      4711,
+      'testAltTag',
+      new ImageSizes('original', '', '', 'mid')
+    )
     aspectRatio = '16/9'
     wrapper = mount(ImageCard, {
       propsData: {
-        image: portalImage,
+        image: imageResponse,
         aspectRatio
       }
     })
@@ -32,23 +35,26 @@ describe('ImageCard', () => {
   describe(':props', () => {
     it(':image - is applied to ImageModal', async () => {
       const imageModal = wrapper.findComponent(ImageModal)
-      expect(imageModal.vm.image).toStrictEqual(portalImage)
+      expect(imageModal.vm.image).toStrictEqual(imageResponse)
     })
     it(':image - image medium size is applied to img tag when available', async () => {
       const image = wrapper.find('.media > img')
-      expect(image.attributes('src')).toBe(portalImage.sizes.mid)
+      expect(image.attributes('src')).toBe(imageResponse.sizes.mid)
     })
     it(':image - image original size is applied to img tag when medium size is not available', async () => {
-      const localPortalImage = new PortalImage()
-      localPortalImage.sizes = new ImageSizes('original')
+      const localPortalImage = new ImageResponse(
+        4711,
+        'testAltTag',
+        new ImageSizes('original')
+      )
       await wrapper.setProps({ image: localPortalImage })
 
       const image = wrapper.find('.media > img')
-      expect(image.attributes('src')).toBe(portalImage.sizes.original)
+      expect(image.attributes('src')).toBe(imageResponse.sizes.original)
     })
     it(':image - image alt is applied to img tag', async () => {
       const image = wrapper.find('.media > img')
-      expect(image.attributes('alt')).toBe(portalImage.alt)
+      expect(image.attributes('alt')).toBe(imageResponse.alt)
     })
     it(':aspectRatio - is applied to ImageModal', async () => {
       const imageModal = wrapper.findComponent(ImageModal)

diff --git a/packages/core/src/components/image/ImageCard/ImageCard.stories.ts b/packages/core/src/components/image/ImageCard/ImageCard.stories.ts
@@ -1,7 +1,7 @@
 import ImageCard from '@core/components/image/ImageCard/ImageCard.vue'
-import { PortalImage } from '@core/components/image/models/image'
-import { ImageSizes } from '@core/components/image/models/imageSizes'
 import { Meta, StoryObj } from '@storybook/vue3'
+import { ImageSizes } from '@core/models/image/imageSizes'
+import { ImageResponse } from '@core/models/image/imageResponse'
 
 /**
  * This is the base image card component. It displays a modal on click with the image in full size.
@@ -22,9 +22,7 @@ const Template = (args: unknown) => ({
 export const Default: Story = {
   render: Template,
   args: {
-    image: new PortalImage(
-      undefined,
-      undefined,
+    image: new ImageResponse(
       undefined,
       undefined,
       new ImageSizes('https://dummyimage.com/400x300/d4d4d4/fff.png')

diff --git a/packages/core/src/components/image/ImageCard/ImageCard.vue b/packages/core/src/components/image/ImageCard/ImageCard.vue
@@ -33,18 +33,18 @@
 <script lang="ts" setup>
 import ImageModal from '@core/components/image/ImageModal/ImageModal.vue'
 import ItemCard from '@core/components/cards/ItemCard/ItemCard.vue'
-import { PortalImage } from '@core/components/image/models/image'
 import { ref } from 'vue'
+import { ImageResponse } from '@core/models'
 
 /**
  * This is the base image card component. It displays a modal on click with the image in full size.
  */
 
-const props = defineProps<{
+defineProps<{
   /**
    * the image that shall be displayed
    */
-  image: PortalImage
+  image: ImageResponse
   /**
    * the aspect ratio the displayed image has (changes the card's aspect ratio)
    */
@@ -53,9 +53,6 @@ const props = defineProps<{
 
 const displayModal = ref(false)
 const showModal = () => {
-  if (props.image.busy) {
-    return
-  }
   displayModal.value = true
 }
 const hideModal = () => {

diff --git a/packages/core/src/components/image/ImageGallery/ImageGallery.spec.ts b/packages/core/src/components/image/ImageGallery/ImageGallery.spec.ts
@@ -1,11 +1,11 @@
 import { mount } from '@vue/test-utils'
 import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
-import { Gallery } from '@core/components/image/models/gallery'
-import { PortalImage } from '@core/components/image/models/image'
-import { ImageSizes } from '@core/components/image/models/imageSizes'
+import { ImageSizes } from '@core/models/image/imageSizes'
 import ImageCard from '@core/components/image/ImageCard/ImageCard.vue'
 import ImageGallery from '@core/components/image/ImageGallery/ImageGallery.vue'
 import type { defineComponent } from 'vue'
+import { Gallery } from '@core/models/image/gallery'
+import { ImageResponse } from '@core/models'
 
 describe('ImageGallery', () => {
   let wrapper: ReturnType<typeof defineComponent>
@@ -20,25 +20,19 @@ describe('ImageGallery', () => {
 
   beforeEach(() => {
     gallery = new Gallery([
-      new PortalImage(
+      new ImageResponse(
         4711,
         'testAltTag',
-        undefined,
-        undefined,
         new ImageSizes('original', '', '', 'mid')
       ),
-      new PortalImage(
+      new ImageResponse(
         4712,
         'testAltTag',
-        undefined,
-        undefined,
         new ImageSizes('original', '', '', 'mid')
       ),
-      new PortalImage(
+      new ImageResponse(
         4713,
         'testAltTag',
-        undefined,
-        undefined,
         new ImageSizes('original', '', '', 'mid')
       )
     ])

diff --git a/packages/core/src/components/image/ImageGallery/ImageGallery.stories.ts b/packages/core/src/components/image/ImageGallery/ImageGallery.stories.ts
@@ -1,8 +1,8 @@
-import { PortalImage } from '@core/components/image/models/image'
-import { ImageSizes } from '@core/components/image/models/imageSizes'
-import { Gallery } from '@core/components/image/models/gallery'
+import { ImageSizes } from '@core/models/image/imageSizes'
 import ImageGallery from '@core/components/image/ImageGallery/ImageGallery.vue'
 import { Meta, StoryObj } from '@storybook/vue3'
+import { Gallery } from '@core/models/image/gallery'
+import { ImageResponse } from '@core/models/image/imageResponse'
 
 /**
  * This all given images as cards in a grid layout.
@@ -15,46 +15,34 @@ type Story = StoryObj<typeof ImageGallery>
 export const Default: Story = {
   args: {
     gallery: new Gallery([
-      new PortalImage(
+      new ImageResponse(
         1,
         'alt',
-        undefined,
-        undefined,
         new ImageSizes('https://dummyimage.com/400x300/d4d4d4/fff.png')
       ),
-      new PortalImage(
+      new ImageResponse(
         2,
         'alt',
-        undefined,
-        undefined,
         new ImageSizes('https://dummyimage.com/400x300/d4d4d4/fff.png')
       ),
-      new PortalImage(
+      new ImageResponse(
         3,
         'alt',
-        undefined,
-        undefined,
         new ImageSizes('https://dummyimage.com/400x300/d4d4d4/fff.png')
       ),
-      new PortalImage(
+      new ImageResponse(
         4,
         'alt',
-        undefined,
-        undefined,
         new ImageSizes('https://dummyimage.com/400x300/d4d4d4/fff.png')
       ),
-      new PortalImage(
+      new ImageResponse(
         5,
         'alt',
-        undefined,
-        undefined,
         new ImageSizes('https://dummyimage.com/400x300/d4d4d4/fff.png')
       ),
-      new PortalImage(
+      new ImageResponse(
         6,
         'alt',
-        undefined,
-        undefined,
         new ImageSizes('https://dummyimage.com/400x300/d4d4d4/fff.png')
       )
     ]),

diff --git a/packages/core/src/components/image/ImageGallery/ImageGallery.vue b/packages/core/src/components/image/ImageGallery/ImageGallery.vue
@@ -9,8 +9,8 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { Gallery } from '@core/components/image/models/gallery'
 import ImageCard from '@core/components/image/ImageCard/ImageCard.vue'
+import { Gallery } from '@core/models/image/gallery'
 /**
  * This displays a gallery using the {@link ImageCard} component for each image.
  */