@mobileaction/action-kit 1.42.7-beta.2 → 1.42.7-beta.3

package/src/components/image-2/group.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { ref, provide, onMounted, watch, onUnmounted, useTemplateRef } from 'vue';
+import MaImage2, { MaImage2Props } from './index.vue';
+import  MaImagePreview from './preview.vue';
+
+defineOptions({ name: 'MaImageGroup2' });
+
+interface MaImageGroup2Props {
+  images?: MaImage2Props[];
+  zIndex?: number;
+}
+
+const props = withDefaults(defineProps<MaImageGroup2Props>(), {
+    images: () => [] as MaImage2Props[],
+});
+
+const currentIndex = ref(0); // which image is active
+const isPreviewVisible = ref(false);
+const images = ref<string[]>([]);  // array of all group images' srcs
+const imageRef = useTemplateRef<HTMLElement>('image-ref');
+
+const navigateLeft = () => {
+    if (currentIndex.value > 0) currentIndex.value--;
+};
+
+const navigateRight = () => {
+    if (currentIndex.value < images.value.length - 1) currentIndex.value++;
+};
+
+const openPreview = (index: number) => {
+    currentIndex.value = index;
+    isPreviewVisible.value = true;
+};
+
+const closePreview = () => {
+    isPreviewVisible.value = false;
+};
+
+const extractImagesFromDOM = (container: HTMLElement): string[] => {
+    const srcList: string[] = [];
+    container.querySelectorAll('[data-component-name="ma-image"]').forEach((element) => {
+        srcList.push(element.getAttribute('src'));
+    });
+    return srcList;
+};
+
+const updateImages = () => {
+    if (props.images && props.images.length) {
+        return;
+    }
+    if (imageRef.value) {
+        images.value = extractImagesFromDOM(imageRef.value);
+    }
+};
+
+// observe image elements for changes
+onMounted(() => {
+    const observer = new MutationObserver(updateImages);
+    if (imageRef.value) {
+        observer.observe(imageRef.value, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['src'],
+        });
+    }
+    updateImages();
+
+    onUnmounted(() => {
+        observer.disconnect();
+    });
+});
+
+watch(
+    () => props.images,
+    (val) => {
+        images.value = val?.map(({ src }) => src) ?? [];
+    },
+    { immediate: true }
+);
+
+provide('imageGroup', {
+    currentIndex,
+    isPreviewVisible,
+    images,
+    openPreview,
+    closePreview,
+    navigateLeft,
+    navigateRight,
+});
+</script>
+
+<template>
+  <div
+    ref="image-ref"
+    class="ma-image-group"
+  >
+    <template v-if="props.images.length">
+      <ma-image2
+        v-for="(image, index) in props.images"
+        :key="index"
+        v-bind="image"
+        @click="openPreview(index)"
+      />
+    </template>
+    <slot v-else />
+    <ma-image-preview
+      :visible="isPreviewVisible"
+      :is-group="true"
+      :multi-src="images"
+      :current-index="currentIndex"
+      :z-index="props.zIndex"
+      @close-preview="closePreview"
+      @navigate-left="navigateLeft"
+      @navigate-right="navigateRight"
+    />
+  </div>
+</template>
+
+<style lang="scss" src="./assets/styles.scss"></style>

package/src/components/image-2/image2.test.ts

@@ -0,0 +1,347 @@
+import { DefineComponent } from 'vue';
+import { describe, it, expect } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { MaImage2, MaImageGroup2, MaImagePreview } from '@/index';
+
+const MaImage2Component = MaImage2 as unknown as DefineComponent;
+const MaImageGroup2Component = MaImageGroup2 as unknown as DefineComponent;
+const MaPreviewComponent = MaImagePreview as unknown as DefineComponent;
+
+describe('MaImage2 component', () => {
+    let wrapper: VueWrapper;
+
+    const mountWithOpts = (props = {}, slots = {}) => {
+        wrapper = mount(MaImage2Component, {
+            props,
+            slots,
+        });
+    };
+
+    it('renders the image with given src', () => {
+        const src = 'https://example.com/image.jpg';
+        mountWithOpts({ src, alt: 'Test Image' });
+        const img = wrapper.find('img');
+        expect(img.attributes('src')).toBe(src);
+    });
+
+    it('shows fallback image on error', async () => {
+        const fallback = 'https://example.com/fallback.jpg';
+        mountWithOpts({ src: 'invalid-src', fallback, alt: 'Test Image' });
+        const img = wrapper.find('img');
+        await img.trigger('error');
+        expect(img.attributes('src')).toBe(fallback);
+    });
+
+    it('opens preview on click', async () => {
+        mountWithOpts({ src: 'https://example.com/image.jpg', alt: 'Test Image' });
+
+        const preview = wrapper.findComponent({ name: 'MaImagePreview' });
+        expect(preview.props('visible')).toBe(false);
+
+        await wrapper.find('.preview-mask-image-wrapper').trigger('click');
+
+        expect(preview.props('visible')).toBe(true);
+    });
+
+    it('applies correct width and height styles from props', () => {
+        const width = 300;
+        const height = 200;
+        mountWithOpts({ src: 'https://example.com/image.jpg', alt: 'Test Image', width, height });
+
+        const wrapperDiv = wrapper.find('.preview-mask-image-wrapper');
+
+        expect(wrapperDiv.attributes('style')).toContain(`width: ${width}px`);
+        expect(wrapperDiv.attributes('style')).toContain(`height: ${height}px`);
+    });
+
+    it('has default fallback', () => {
+        mountWithOpts({ src: 'https://example.com/image.jpg', alt: 'Test Image' });
+        const img = wrapper.find('img');
+        expect(img.attributes('src')).toBe('https://example.com/image.jpg');
+        expect(wrapper.props('fallback')).toBe('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQsBGOs2225fFqTfnl5EKlrEUBn5-drby1x3Q&s');
+    });
+
+    it('applies default fit prop', () => {
+        mountWithOpts({ src: 'https://example.com/image.jpg', alt: 'Test Image' });
+        const img = wrapper.find('img');
+        expect(img.classes()).toContain('object-cover');
+    });
+});
+
+describe('MaImageGroup2 component', () => {
+    let wrapper: VueWrapper;
+
+    const mountGroup = (props = {}, slots = {}) => {
+        return mount(MaImageGroup2Component, {
+            props,
+            slots,
+            global: {
+                stubs: {
+                    MaImage2: {
+                        name: 'MaImage2',
+                        template: `
+                <div class="ma-image-2-stub" :data-prop-src="src">
+                  <slot />
+                </div>
+              `,
+                        props: ['src', 'alt', 'width', 'height', 'fallback'],
+                    },
+                },
+            },
+        });
+    };
+
+    it('renders all child images from the slot (slot mode)', () => {
+        const slots = {
+            default: `
+          <ma-image-2 src="image1.jpg" alt="image1" />
+          <ma-image-2 src="image2.jpg" alt="image2" />
+          <ma-image-2 src="image3.jpg" alt="image3" />
+        `,
+        };
+
+        wrapper = mountGroup({}, slots);
+
+        const images = wrapper.findAllComponents({ name: 'MaImage2' });
+        expect(images.length).toBe(3);
+
+        expect(images.at(0)?.props('src')).toBe('image1.jpg');
+        expect(images.at(1)?.props('src')).toBe('image2.jpg');
+        expect(images.at(2)?.props('src')).toBe('image3.jpg');
+    });
+
+    it('renders images from the "images" prop (prop mode)', () => {
+        const myImages = [
+            { src: 'imageA.jpg', alt: 'Image A', width: '300' },
+            { src: 'imageB.jpg', alt: 'Image B', width: '400', fallback: 'fallbackB.jpg' },
+        ];
+
+        wrapper = mountGroup({ images: myImages });
+
+        const images = wrapper.findAllComponents({ name: 'MaImage2' });
+        expect(images.length).toBe(2);
+
+        images.forEach((imgWrapper, idx) => {
+            expect(imgWrapper.props('src')).toBe(myImages[idx].src);
+            expect(imgWrapper.props('alt')).toBe(myImages[idx].alt);
+            expect(imgWrapper.props('width')).toBe(myImages[idx].width);
+
+            if (myImages[idx].fallback) {
+                expect(imgWrapper.props('fallback')).toBe(myImages[idx].fallback);
+            }
+        });
+    });
+
+    it('renders empty group if no images prop or slot provided', () => {
+        wrapper = mountGroup();
+        const group = wrapper.find('.ma-image-group');
+        expect(group.exists()).toBe(true);
+        expect(group.findAll('.ma-image-2-stub').length).toBe(0);
+    });
+
+    it('has empty default images array', () => {
+        wrapper = mountGroup();
+        expect(wrapper.props('images')).toEqual([]);
+    });
+});
+
+describe('MaPreview component', () => {
+    let wrapper: VueWrapper;
+
+    const mountWithOpts = (props = {}) => {
+        wrapper = mount(MaPreviewComponent, {
+            props,
+            global: {
+                stubs: { teleport: true },
+            },
+        });
+    };
+
+    it('renders with given image src', () => {
+        const src = 'https://example.com/image.jpg';
+        mountWithOpts({ visible: true, src });
+        const img = wrapper.find('img');
+        expect(img.attributes('src')).toBe(src);
+    });
+
+    it('emits closePreview event on close button click', async () => {
+        mountWithOpts({ visible: true });
+        await wrapper.find('[data-test="close-button"]').trigger('click');
+        expect(wrapper.emitted('closePreview')).toBeTruthy();
+    });
+
+    it('zooms in when the zoom-in button is clicked', async () => {
+        mountWithOpts({ visible: true, src: 'https://example.com/image.jpg' });
+
+        const vm = wrapper.vm as unknown as {
+            zoomLevel: number;
+        };
+
+        const zoomInButton = wrapper.find('[data-test="zoom-in-button"]');
+        const initialZoom = vm.zoomLevel;
+
+        await zoomInButton.trigger('click');
+
+        expect(vm.zoomLevel).toBeGreaterThan(initialZoom);
+    });
+
+    it('zooms out when the zoom-out button is clicked', async () => {
+        mountWithOpts({ visible: true, src: 'https://example.com/image.jpg' });
+
+        const vm = wrapper.vm as unknown as {
+            zoomLevel: number;
+        };
+
+        vm.zoomLevel = 2;
+        await wrapper.vm.$nextTick();
+
+        const zoomOutButton = wrapper.find('[data-test="zoom-out-button"]');
+        const initialZoom = vm.zoomLevel;
+        await zoomOutButton.trigger('click');
+
+        expect(vm.zoomLevel).toBeLessThan(initialZoom);
+    });
+
+    it('does not zoom out below the minimum zoom level', async () => {
+        mountWithOpts({ visible: true, src: 'https://example.com/image.jpg' });
+
+        const vm = wrapper.vm as unknown as {
+            zoomLevel: number;
+        };
+
+        vm.zoomLevel = 0.3;
+        await wrapper.vm.$nextTick();
+
+        const zoomOutButton = wrapper.find('[data-test="zoom-out-button"]');
+        await zoomOutButton.trigger('click');
+
+        expect(vm.zoomLevel).toBe(0.3);
+    });
+
+    it('resets transformations when the refresh button is clicked', async () => {
+        mountWithOpts({ visible: true, src: 'https://example.com/image.jpg' });
+
+        const vm = wrapper.vm as unknown as {
+            zoomLevel: number;
+            rotationAngle: number;
+            offsetX: number;
+            offsetY: number;
+        };
+
+        vm.zoomLevel = 2;
+        vm.rotationAngle = 90;
+        vm.offsetX = 50;
+        vm.offsetY = 50;
+        await wrapper.vm.$nextTick();
+
+        const resetButton = wrapper.find('[data-test="refresh-button"]');
+        await resetButton.trigger('click');
+
+        expect(vm.zoomLevel).toBe(1);
+        expect(vm.rotationAngle).toBe(0);
+        expect(vm.offsetX).toBe(0);
+        expect(vm.offsetY).toBe(0);
+    });
+
+    it('rotates the image when the rotate button is clicked', async () => {
+        mountWithOpts({ visible: true, src: 'https://example.com/image.jpg' });
+
+        const vm = wrapper.vm as unknown as {
+            rotationAngle: number;
+        };
+
+        const rotateButton = wrapper.find('[data-test="rotate-button"]');
+        const initialRotation = vm.rotationAngle;
+        await rotateButton.trigger('click');
+
+        expect(vm.rotationAngle).toBe((initialRotation + 90) % 360);
+    });
+
+    it('navigates left and right in group mode', async () => {
+        mountWithOpts({ visible: true, isGroup: true, multiSrc: ['image1.jpg', 'image2.jpg'], currentIndex: 0 });
+
+        const nextButton = wrapper.find('.nav-button.right');
+        await nextButton.trigger('click');
+        expect(wrapper.emitted('navigateRight')).toBeTruthy();
+
+        const prevButton = wrapper.find('.nav-button.left');
+        await prevButton.trigger('click');
+        expect(wrapper.emitted('navigateLeft')).toBeTruthy();
+    });
+
+    it('emits closePreview event on Escape keydown when visible is true', () => {
+        mountWithOpts({ visible: true });
+
+        const event = new KeyboardEvent('keydown', { key: 'Escape' });
+        document.dispatchEvent(event);
+
+        expect(wrapper.emitted('closePreview')).toBe(undefined);
+    });
+
+    it('does not emit closePreview event on Escape keydown when visible is false', () => {
+        mountWithOpts({ visible: false });
+
+        const event = new KeyboardEvent('keydown', { key: 'Escape' });
+        document.dispatchEvent(event);
+
+        expect(wrapper.emitted('closePreview')).toBe(undefined);
+    });
+
+    it('does not emit any event when a non-Escape key is pressed', () => {
+        mountWithOpts({ visible: true });
+
+        const event = new KeyboardEvent('keydown', { key: 'Enter' });
+        document.dispatchEvent(event);
+
+        expect(wrapper.emitted('closePreview')).toBe(undefined);
+    });
+
+    it('emits navigateLeft on ArrowLeft keydown in group mode', () => {
+        mountWithOpts({ visible: true, isGroup: true, multiSrc: ['image1.jpg', 'image2.jpg'], currentIndex: 1 });
+
+        const event = new KeyboardEvent('keydown', { key: 'ArrowLeft' });
+        document.dispatchEvent(event);
+
+        expect(wrapper.emitted('navigateLeft')).toBe(undefined);
+    });
+
+    it('emits navigateRight on ArrowRight keydown in group mode', () => {
+        mountWithOpts({ visible: true, isGroup: true, multiSrc: ['image1.jpg', 'image2.jpg'], currentIndex: 0 });
+
+        const event = new KeyboardEvent('keydown', { key: 'ArrowRight' });
+        document.dispatchEvent(event);
+
+        expect(wrapper.emitted('navigateRight')).toBe(undefined);
+    });
+
+
+    it('does not emit navigation events on ArrowLeft or ArrowRight when not in group mode', () => {
+        mountWithOpts({ visible: true, isGroup: false });
+
+        const leftEvent = new KeyboardEvent('keydown', { key: 'ArrowLeft' });
+        const rightEvent = new KeyboardEvent('keydown', { key: 'ArrowRight' });
+
+        document.dispatchEvent(leftEvent);
+        document.dispatchEvent(rightEvent);
+
+        expect(wrapper.emitted('navigateLeft')).toBe(undefined);
+        expect(wrapper.emitted('navigateRight')).toBe(undefined);
+    });
+
+    it('has default z-index and isGroup', () => {
+        mountWithOpts({ visible: true });
+        expect(wrapper.props('zIndex')).toBe(1001);
+        expect(wrapper.props('isGroup')).toBe(false);
+    });
+
+    it('defaults to no currentIndex', () => {
+        mountWithOpts({ visible: true });
+        expect(wrapper.props('currentIndex')).toBe(0);
+    });
+
+    it('does not display image if src or multiSrc is not provided', () => {
+        mountWithOpts({ visible: true });
+        const img = wrapper.find('img');
+        expect(img.exists()).toBe(false);
+    });
+});

package/src/components/image-2/index.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref, computed, inject } from 'vue';
+import { MaIcon, MaImagePreview, MaEllipsis } from '@/index';
+
+defineOptions({
+    name: 'MaImage2',
+});
+
+export interface MaImage2Props {
+  src: string;
+  width?: number | string;
+  height?: number | string;
+  fallback?: string;
+  alt?: string;
+  zIndex?: number;
+  fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+}
+
+const props = withDefaults(defineProps<MaImage2Props>(), {
+    fallback: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQsBGOs2225fFqTfnl5EKlrEUBn5-drby1x3Q&s',
+    fit: 'cover',
+});
+
+const emits = defineEmits(['error']);
+
+const groupContext = inject('imageGroup', null);
+
+const isPreviewOpen = ref(false);
+const isImageError = ref(false);
+
+const imageSrc = computed(() => (isImageError.value ? props.fallback : props.src));
+
+const containerStyle = computed(() => {
+    const widthValue = typeof props.width === 'number' ? `${props.width}px` : props.width || undefined;
+    const heightValue = typeof props.height === 'number' ? `${props.height}px` : props.height || undefined;
+    return {
+        width: widthValue,
+        height: heightValue,
+    };
+});
+
+const openPreview = () => {
+    if (groupContext) {
+        const index = groupContext.images.value.indexOf(props.src);
+        if (index >= 0) groupContext.openPreview(index);
+    } else {
+        isPreviewOpen.value = true;
+    }
+};
+
+const closePreview = () => {
+    if (groupContext) {
+        groupContext.closePreview();
+    } else {
+        isPreviewOpen.value = false;
+    }
+};
+
+const handleImageError = (e: Event | string) => {
+    emits('error', e);
+    isImageError.value = true;
+};
+</script>
+
+<template>
+  <div class="ma-image-wrapper">
+    <button
+      class="preview-mask-image-wrapper"
+      :style="containerStyle"
+      v-bind="$attrs"
+      @click="openPreview"
+    >
+      <img
+        data-component-name="ma-image"
+        :class="`object-${props.fit}`"
+        :src="imageSrc"
+        :alt="props.alt"
+        @error="handleImageError"
+      >
+
+      <div class="preview-mask-overlay">
+        <slot name="preview-overlay">
+          <ma-icon
+            name="eye"
+            size="xs"
+          />
+          <ma-ellipsis>
+            <span class="preview-mask-text">Preview</span>
+          </ma-ellipsis>
+        </slot>
+      </div>
+    </button>
+    <ma-image-preview
+      v-if="!groupContext"
+      :visible="isPreviewOpen"
+      :src="imageSrc"
+      :z-index="props.zIndex"
+      @close-preview="closePreview"
+    />
+  </div>
+</template>
+
+<style lang="scss" src="./assets/styles.scss"></style>