@dcrackel/hematournamentui 1.0.712 → 1.0.714

package/src/stories/Organisms/ComplexInputs/ImageCropper/ImageCropper.stories.js

@@ -1,31 +1,31 @@
-import GenericImageCropper from './ImageCropper.vue';
-
-export default {
-  title: 'Organisms/ComplexInputs/ImageCropper',
-  component: GenericImageCropper,
-  tags: ['autodocs'],
-  args: { urlToImage: '', isProfile: true, disabled: false },
-  argTypes: {
-    urlToImage: { control: 'text' },
-    uploadImageName: { control: 'text' },
-    uploadServer: { control: 'text' },
-    imageServer: { control: 'text' },
-    isProfile: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    'update:url': { action: 'update:url' },
-    'update:uploading': { action: 'update:uploading' },
-    'error:load': { action: 'error:load' },
-    'error:upload': { action: 'error:upload' }
-  }
-};
-
-export const Default = {
-  args: {
-    urlToImage: '',
-    isProfile: true
-  }
-};
-
-export const Disabled = {
-  args: { urlToImage: '', isProfile: true, disabled: true }
-};
+import GenericImageCropper from './ImageCropper.vue';
+
+export default {
+  title: 'Organisms/ComplexInputs/ImageCropper',
+  component: GenericImageCropper,
+  tags: ['autodocs'],
+  args: { urlToImage: '', isProfile: true, disabled: false },
+  argTypes: {
+    urlToImage: { control: 'text' },
+    uploadImageName: { control: 'text' },
+    uploadServer: { control: 'text' },
+    imageServer: { control: 'text' },
+    isProfile: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    'update:url': { action: 'update:url' },
+    'update:uploading': { action: 'update:uploading' },
+    'error:load': { action: 'error:load' },
+    'error:upload': { action: 'error:upload' }
+  }
+};
+
+export const Default = {
+  args: {
+    urlToImage: '',
+    isProfile: true
+  }
+};
+
+export const Disabled = {
+  args: { urlToImage: '', isProfile: true, disabled: true }
+};

package/src/stories/Organisms/ComplexInputs/ImageCropper/ImageCropper.test.js

@@ -1,109 +1,109 @@
-import { afterEach, describe, expect, it } from 'vitest';
-import { enableAutoUnmount, mount } from '@vue/test-utils';
-import ImageCropper from './ImageCropper.vue';
-
-enableAutoUnmount(afterEach);
-
-const mountCropper = props =>
-  mount(ImageCropper, {
-    props: {
-      urlToImage: 'https://images.example/profile.png',
-      imageServer: 'https://images.example/',
-      uploadImageName: 'profile',
-      isProfile: true,
-      ...props
-    },
-    global: { stubs: { AvatarCropper: true } }
-  });
-
-describe('ImageCropper upload draft events', () => {
-  it('emits a successful upload URL and previews it with a fresh cache key', async () => {
-    const wrapper = mountCropper({ uploadImageName: 'new-profile' });
-    wrapper.vm.handleUploading();
-    wrapper.vm.handleUploaded({ response: { status: 201 } });
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.emitted('update:url')).toEqual([['https://images.example/new-profile.png']]);
-    expect(wrapper.emitted('update:uploading')).toEqual([[true], [false]]);
-    const preview = new URL(wrapper.find('img').attributes('src'));
-    expect(preview.pathname).toBe('/new-profile.png');
-    expect(preview.searchParams.has('preview')).toBe(true);
-    await wrapper.setProps({ urlToImage: 'https://images.example/new-profile.png' });
-    expect(wrapper.find('img').attributes('src')).toBe(preview.href);
-  });
-
-  it('refreshes the preview even when an upload overwrites the existing URL', async () => {
-    const wrapper = mountCropper();
-    wrapper.vm.handleUploaded({ response: { status: 200 } });
-    await wrapper.vm.$nextTick();
-    expect(wrapper.find('img').attributes('src')).toContain('/profile.png?preview=');
-    expect(wrapper.emitted('update:url')).toEqual([['https://images.example/profile.png']]);
-  });
-
-  it('keeps the previous image and reports unsuccessful responses separately', () => {
-    const wrapper = mountCropper();
-    wrapper.vm.handleUploading();
-    wrapper.vm.handleUploaded({ response: { status: 500 } });
-    expect(wrapper.vm.uploading).toBe(false);
-    expect(wrapper.vm.localImageUrl).toBe('https://images.example/profile.png');
-    expect(wrapper.emitted('update:url')).toBeUndefined();
-    expect(wrapper.emitted('error:upload')[0][0]).toMatchObject({ message: 'Image upload failed.', status: 500 });
-  });
-
-  it('reports malformed upload responses without crashing or emitting an edit', () => {
-    const wrapper = mountCropper();
-    wrapper.vm.handleUploaded(undefined);
-    expect(wrapper.emitted('update:url')).toBeUndefined();
-    expect(wrapper.emitted('error:upload')).toHaveLength(1);
-  });
-
-  it('rejects unsafe uploaded URLs', () => {
-    const wrapper = mountCropper({ imageServer: 'javascript:' });
-    wrapper.vm.handleUploaded({ response: { status: 200 } });
-    expect(wrapper.emitted('update:url')).toBeUndefined();
-    expect(wrapper.emitted('error:upload')[0][0].message).toContain('valid image URL');
-  });
-
-  it('shows a placeholder on image-load failure and leaves the draft URL intact', async () => {
-    const wrapper = mountCropper();
-    await wrapper.find('img').trigger('error');
-    expect(wrapper.emitted('update:url')).toBeUndefined();
-    expect(wrapper.emitted('error:load')[0][0]).toMatchObject({ url: 'https://images.example/profile.png' });
-    expect(wrapper.find('img').attributes('src')).not.toBe('https://images.example/profile.png');
-    expect(wrapper.vm.localImageUrl).toBe('https://images.example/profile.png');
-    expect(wrapper.vm.showCropper).toBe(false);
-  });
-
-  it('reconciles authoritative URL changes after a failed preview', async () => {
-    const wrapper = mountCropper();
-    await wrapper.find('img').trigger('error');
-    await wrapper.setProps({ urlToImage: 'https://images.example/confirmed.png' });
-    expect(wrapper.find('img').attributes('src')).toBe('https://images.example/confirmed.png');
-  });
-
-  it('reports the cropper upload error and releases the busy state', () => {
-    const wrapper = mountCropper();
-    wrapper.vm.handleUploading();
-    wrapper.vm.handlerError({ type: 'upload', message: 'Upload rejected', context: { response: { status: 413 } } });
-    expect(wrapper.emitted('error:upload')).toEqual([[{ message: 'Upload rejected', status: 413 }]]);
-    expect(wrapper.vm.uploading).toBe(false);
-    expect(wrapper.emitted('update:url')).toBeUndefined();
-  });
-
-  it('reports rejected upload requests and releases the busy state', async () => {
-    const wrapper = mountCropper();
-    const response = Promise.reject(new Error('Network unavailable'));
-    wrapper.vm.handleUploading({ response });
-    await wrapper.vm.$nextTick();
-    expect(wrapper.vm.uploading).toBe(false);
-    expect(wrapper.emitted('error:upload')[0][0].message).toBe('Network unavailable');
-    expect(wrapper.emitted('update:url')).toBeUndefined();
-  });
-
-  it('disables the native image selector and guards programmatic opening', () => {
-    const wrapper = mountCropper({ disabled: true });
-    expect(wrapper.find('button').attributes('disabled')).toBeDefined();
-    wrapper.vm.setShowCropper();
-    expect(wrapper.vm.showCropper).toBe(false);
-  });
-});
+import { afterEach, describe, expect, it } from 'vitest';
+import { enableAutoUnmount, mount } from '@vue/test-utils';
+import ImageCropper from './ImageCropper.vue';
+
+enableAutoUnmount(afterEach);
+
+const mountCropper = props =>
+  mount(ImageCropper, {
+    props: {
+      urlToImage: 'https://images.example/profile.png',
+      imageServer: 'https://images.example/',
+      uploadImageName: 'profile',
+      isProfile: true,
+      ...props
+    },
+    global: { stubs: { AvatarCropper: true } }
+  });
+
+describe('ImageCropper upload draft events', () => {
+  it('emits a successful upload URL and previews it with a fresh cache key', async () => {
+    const wrapper = mountCropper({ uploadImageName: 'new-profile' });
+    wrapper.vm.handleUploading();
+    wrapper.vm.handleUploaded({ response: { status: 201 } });
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted('update:url')).toEqual([['https://images.example/new-profile.png']]);
+    expect(wrapper.emitted('update:uploading')).toEqual([[true], [false]]);
+    const preview = new URL(wrapper.find('img').attributes('src'));
+    expect(preview.pathname).toBe('/new-profile.png');
+    expect(preview.searchParams.has('preview')).toBe(true);
+    await wrapper.setProps({ urlToImage: 'https://images.example/new-profile.png' });
+    expect(wrapper.find('img').attributes('src')).toBe(preview.href);
+  });
+
+  it('refreshes the preview even when an upload overwrites the existing URL', async () => {
+    const wrapper = mountCropper();
+    wrapper.vm.handleUploaded({ response: { status: 200 } });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find('img').attributes('src')).toContain('/profile.png?preview=');
+    expect(wrapper.emitted('update:url')).toEqual([['https://images.example/profile.png']]);
+  });
+
+  it('keeps the previous image and reports unsuccessful responses separately', () => {
+    const wrapper = mountCropper();
+    wrapper.vm.handleUploading();
+    wrapper.vm.handleUploaded({ response: { status: 500 } });
+    expect(wrapper.vm.uploading).toBe(false);
+    expect(wrapper.vm.localImageUrl).toBe('https://images.example/profile.png');
+    expect(wrapper.emitted('update:url')).toBeUndefined();
+    expect(wrapper.emitted('error:upload')[0][0]).toMatchObject({ message: 'Image upload failed.', status: 500 });
+  });
+
+  it('reports malformed upload responses without crashing or emitting an edit', () => {
+    const wrapper = mountCropper();
+    wrapper.vm.handleUploaded(undefined);
+    expect(wrapper.emitted('update:url')).toBeUndefined();
+    expect(wrapper.emitted('error:upload')).toHaveLength(1);
+  });
+
+  it('rejects unsafe uploaded URLs', () => {
+    const wrapper = mountCropper({ imageServer: 'javascript:' });
+    wrapper.vm.handleUploaded({ response: { status: 200 } });
+    expect(wrapper.emitted('update:url')).toBeUndefined();
+    expect(wrapper.emitted('error:upload')[0][0].message).toContain('valid image URL');
+  });
+
+  it('shows a placeholder on image-load failure and leaves the draft URL intact', async () => {
+    const wrapper = mountCropper();
+    await wrapper.find('img').trigger('error');
+    expect(wrapper.emitted('update:url')).toBeUndefined();
+    expect(wrapper.emitted('error:load')[0][0]).toMatchObject({ url: 'https://images.example/profile.png' });
+    expect(wrapper.find('img').attributes('src')).not.toBe('https://images.example/profile.png');
+    expect(wrapper.vm.localImageUrl).toBe('https://images.example/profile.png');
+    expect(wrapper.vm.showCropper).toBe(false);
+  });
+
+  it('reconciles authoritative URL changes after a failed preview', async () => {
+    const wrapper = mountCropper();
+    await wrapper.find('img').trigger('error');
+    await wrapper.setProps({ urlToImage: 'https://images.example/confirmed.png' });
+    expect(wrapper.find('img').attributes('src')).toBe('https://images.example/confirmed.png');
+  });
+
+  it('reports the cropper upload error and releases the busy state', () => {
+    const wrapper = mountCropper();
+    wrapper.vm.handleUploading();
+    wrapper.vm.handlerError({ type: 'upload', message: 'Upload rejected', context: { response: { status: 413 } } });
+    expect(wrapper.emitted('error:upload')).toEqual([[{ message: 'Upload rejected', status: 413 }]]);
+    expect(wrapper.vm.uploading).toBe(false);
+    expect(wrapper.emitted('update:url')).toBeUndefined();
+  });
+
+  it('reports rejected upload requests and releases the busy state', async () => {
+    const wrapper = mountCropper();
+    const response = Promise.reject(new Error('Network unavailable'));
+    wrapper.vm.handleUploading({ response });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.uploading).toBe(false);
+    expect(wrapper.emitted('error:upload')[0][0].message).toBe('Network unavailable');
+    expect(wrapper.emitted('update:url')).toBeUndefined();
+  });
+
+  it('disables the native image selector and guards programmatic opening', () => {
+    const wrapper = mountCropper({ disabled: true });
+    expect(wrapper.find('button').attributes('disabled')).toBeDefined();
+    wrapper.vm.setShowCropper();
+    expect(wrapper.vm.showCropper).toBe(false);
+  });
+});

package/src/stories/Organisms/ComplexInputs/ImageCropper/ImageCropper.vue

@@ -1,192 +1,192 @@
-<template>
-  <section class="flex w-full justify-center" :aria-busy="uploading" :inert="disabled">
-    <button
-      v-if="!uploading"
-      type="button"
-      :disabled="disabled"
-      :aria-label="isProfile ? 'Change profile image' : 'Change image'"
-      class="flex items-center justify-center"
-      @click="setShowCropper"
-    >
-      <img
-        :src="displayedUrl"
-        :class="getClasses"
-        :style="customStyle"
-        :alt="isProfile ? 'Profile image' : 'Uploaded image'"
-        @error="onImageError"
-      />
-    </button>
-    <div v-if="uploading" :class="getSkeletonClass" role="status" aria-label="Uploading image" />
-    <avatar-cropper
-      v-model="showCropper"
-      :upload-url="`${uploadServer}${uploadImageName}`"
-      :cropper-options="cropperOptions"
-      @uploading="handleUploading"
-      @uploaded="handleUploaded"
-      @completed="handleCompleted"
-      @error="handlerError"
-    />
-  </section>
-</template>
-
-<script>
-import AvatarCropper from 'vue-avatar-cropper';
-import SelectAnProfile from '../../../../assets/select-profile.png';
-import SelectAnImage from '../../../../assets/select-tournament.png';
-import loading from '../../../../assets/loading-spinner.gif';
-
-function getImageErrorStatus(error, xhr) {
-  return error?.context?.response?.status ?? xhr?.status;
-}
-
-export default {
-  name: 'GenericImageCropper',
-  emits: ['update:url', 'update:uploading', 'error:load', 'error:upload'],
-  props: {
-    urlToImage: {
-      type: String,
-      default: SelectAnImage
-    },
-    customClass: {
-      type: String,
-      default: ''
-    },
-    customSkeletonClass: {
-      type: String,
-      default: ''
-    },
-    customStyle: {
-      type: Object,
-      default: () => ({})
-    },
-    uploadImageName: {
-      type: String,
-      default: 'default-image'
-    },
-    uploadServer: {
-      type: String,
-      default: ''
-    },
-    imageServer: {
-      type: String,
-      default: ''
-    },
-    isProfile: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    cropperOptions: {
-      type: Object,
-      default: () => ({
-        aspectRatio: 3 / 2,
-        autoCropArea: 1,
-        viewMode: 1,
-        movable: true,
-        zoomable: true
-      })
-    }
-  },
-  components: {
-    AvatarCropper
-  },
-  data() {
-    return {
-      loading,
-      showCropper: false,
-      uploading: false,
-      localImageUrl: this.urlToImage,
-      imageLoadFailed: false,
-      previewVersion: 0,
-      message: ''
-    };
-  },
-  computed: {
-    displayedUrl() {
-      const fallback = this.isProfile ? SelectAnProfile : SelectAnImage;
-      if (this.imageLoadFailed || !this.localImageUrl) return fallback;
-      if (!this.previewVersion) return this.localImageUrl;
-      const preview = new URL(this.localImageUrl, document.baseURI);
-      preview.searchParams.set('preview', this.previewVersion);
-      return preview.href;
-    },
-    getClasses() {
-      return this.customClass
-        ? this.customClass
-        : 'h-52 w-80 border-2 border-dashed rounded-lg bg-contain bg-contain bg-center bg-no-repeat';
-    },
-    getSkeletonClass() {
-      return this.customSkeletonClass
-        ? this.customSkeletonClass
-        : 'border-2 h-52 w-80 border-dashed rounded-lg bg-quaternaryHighlight animate-pulse';
-    }
-  },
-  watch: {
-    urlToImage(url) {
-      if (url === this.localImageUrl) return;
-      this.localImageUrl = url;
-      this.imageLoadFailed = false;
-      this.previewVersion = 0;
-    }
-  },
-  methods: {
-    setShowCropper() {
-      if (this.disabled || this.uploading) return;
-      this.showCropper = true;
-    },
-    setUploading(uploading) {
-      this.uploading = uploading;
-      this.$emit('update:uploading', uploading);
-    },
-    handleUploading(event) {
-      this.setUploading(true);
-      // The cropper exposes the request promise but does not emit rejected fetches.
-      event?.response?.catch?.(error => {
-        this.handlerError({ type: 'upload', message: error?.message || 'Image upload failed.' });
-      });
-    },
-    handleUploaded(response) {
-      const status = response?.response?.status;
-      if (!(status >= 200 && status < 300)) {
-        this.handlerError({ message: 'Image upload failed.', context: { response: response?.response } });
-        return;
-      }
-      const url = `${this.imageServer}${this.uploadImageName}.png`;
-      if (!this.isValidImageUrl(url)) {
-        this.handlerError({ message: 'The upload did not provide a valid image URL.' });
-        return;
-      }
-      this.localImageUrl = url;
-      this.imageLoadFailed = false;
-      this.previewVersion = Date.now();
-      this.$emit('update:url', url);
-      this.setUploading(false);
-    },
-    handleCompleted() {
-      this.message = 'Upload completed.';
-    },
-    handlerError(message, type, xhr) {
-      this.setUploading(false);
-      this.message = typeof message === 'string' ? message : message?.message || 'Image upload failed.';
-      const eventName = (message?.type ?? type) === 'load' ? 'error:load' : 'error:upload';
-      this.$emit(eventName, { message: this.message, status: getImageErrorStatus(message, xhr) });
-    },
-    isValidImageUrl(url) {
-      if (typeof url !== 'string' || !url.trim()) return false;
-      try {
-        return ['http:', 'https:'].includes(new URL(url, document.baseURI).protocol);
-      } catch {
-        return false;
-      }
-    },
-    onImageError() {
-      if (this.imageLoadFailed) return;
-      this.imageLoadFailed = true;
-      this.$emit('error:load', { message: 'Could not load the image.', url: this.localImageUrl });
-    }
-  }
-};
-</script>
+<template>
+  <section class="flex w-full justify-center" :aria-busy="uploading" :inert="disabled">
+    <button
+      v-if="!uploading"
+      type="button"
+      :disabled="disabled"
+      :aria-label="isProfile ? 'Change profile image' : 'Change image'"
+      class="flex items-center justify-center"
+      @click="setShowCropper"
+    >
+      <img
+        :src="displayedUrl"
+        :class="getClasses"
+        :style="customStyle"
+        :alt="isProfile ? 'Profile image' : 'Uploaded image'"
+        @error="onImageError"
+      />
+    </button>
+    <div v-if="uploading" :class="getSkeletonClass" role="status" aria-label="Uploading image" />
+    <avatar-cropper
+      v-model="showCropper"
+      :upload-url="`${uploadServer}${uploadImageName}`"
+      :cropper-options="cropperOptions"
+      @uploading="handleUploading"
+      @uploaded="handleUploaded"
+      @completed="handleCompleted"
+      @error="handlerError"
+    />
+  </section>
+</template>
+
+<script>
+import AvatarCropper from 'vue-avatar-cropper';
+import SelectAnProfile from '../../../../assets/select-profile.png';
+import SelectAnImage from '../../../../assets/select-tournament.png';
+import loading from '../../../../assets/loading-spinner.gif';
+
+function getImageErrorStatus(error, xhr) {
+  return error?.context?.response?.status ?? xhr?.status;
+}
+
+export default {
+  name: 'GenericImageCropper',
+  emits: ['update:url', 'update:uploading', 'error:load', 'error:upload'],
+  props: {
+    urlToImage: {
+      type: String,
+      default: SelectAnImage
+    },
+    customClass: {
+      type: String,
+      default: ''
+    },
+    customSkeletonClass: {
+      type: String,
+      default: ''
+    },
+    customStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    uploadImageName: {
+      type: String,
+      default: 'default-image'
+    },
+    uploadServer: {
+      type: String,
+      default: ''
+    },
+    imageServer: {
+      type: String,
+      default: ''
+    },
+    isProfile: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    cropperOptions: {
+      type: Object,
+      default: () => ({
+        aspectRatio: 3 / 2,
+        autoCropArea: 1,
+        viewMode: 1,
+        movable: true,
+        zoomable: true
+      })
+    }
+  },
+  components: {
+    AvatarCropper
+  },
+  data() {
+    return {
+      loading,
+      showCropper: false,
+      uploading: false,
+      localImageUrl: this.urlToImage,
+      imageLoadFailed: false,
+      previewVersion: 0,
+      message: ''
+    };
+  },
+  computed: {
+    displayedUrl() {
+      const fallback = this.isProfile ? SelectAnProfile : SelectAnImage;
+      if (this.imageLoadFailed || !this.localImageUrl) return fallback;
+      if (!this.previewVersion) return this.localImageUrl;
+      const preview = new URL(this.localImageUrl, document.baseURI);
+      preview.searchParams.set('preview', this.previewVersion);
+      return preview.href;
+    },
+    getClasses() {
+      return this.customClass
+        ? this.customClass
+        : 'h-52 w-80 border-2 border-dashed rounded-lg bg-contain bg-contain bg-center bg-no-repeat';
+    },
+    getSkeletonClass() {
+      return this.customSkeletonClass
+        ? this.customSkeletonClass
+        : 'border-2 h-52 w-80 border-dashed rounded-lg bg-quaternaryHighlight animate-pulse';
+    }
+  },
+  watch: {
+    urlToImage(url) {
+      if (url === this.localImageUrl) return;
+      this.localImageUrl = url;
+      this.imageLoadFailed = false;
+      this.previewVersion = 0;
+    }
+  },
+  methods: {
+    setShowCropper() {
+      if (this.disabled || this.uploading) return;
+      this.showCropper = true;
+    },
+    setUploading(uploading) {
+      this.uploading = uploading;
+      this.$emit('update:uploading', uploading);
+    },
+    handleUploading(event) {
+      this.setUploading(true);
+      // The cropper exposes the request promise but does not emit rejected fetches.
+      event?.response?.catch?.(error => {
+        this.handlerError({ type: 'upload', message: error?.message || 'Image upload failed.' });
+      });
+    },
+    handleUploaded(response) {
+      const status = response?.response?.status;
+      if (!(status >= 200 && status < 300)) {
+        this.handlerError({ message: 'Image upload failed.', context: { response: response?.response } });
+        return;
+      }
+      const url = `${this.imageServer}${this.uploadImageName}.png`;
+      if (!this.isValidImageUrl(url)) {
+        this.handlerError({ message: 'The upload did not provide a valid image URL.' });
+        return;
+      }
+      this.localImageUrl = url;
+      this.imageLoadFailed = false;
+      this.previewVersion = Date.now();
+      this.$emit('update:url', url);
+      this.setUploading(false);
+    },
+    handleCompleted() {
+      this.message = 'Upload completed.';
+    },
+    handlerError(message, type, xhr) {
+      this.setUploading(false);
+      this.message = typeof message === 'string' ? message : message?.message || 'Image upload failed.';
+      const eventName = (message?.type ?? type) === 'load' ? 'error:load' : 'error:upload';
+      this.$emit(eventName, { message: this.message, status: getImageErrorStatus(message, xhr) });
+    },
+    isValidImageUrl(url) {
+      if (typeof url !== 'string' || !url.trim()) return false;
+      try {
+        return ['http:', 'https:'].includes(new URL(url, document.baseURI).protocol);
+      } catch {
+        return false;
+      }
+    },
+    onImageError() {
+      if (this.imageLoadFailed) return;
+      this.imageLoadFailed = true;
+      this.$emit('error:load', { message: 'Could not load the image.', url: this.localImageUrl });
+    }
+  }
+};
+</script>