@getmicdrop/svelte-components 2.0.4 → 2.0.6

package/dist/utils/imageValidation.spec.js

@@ -1,220 +1,220 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import {
-  validateImage,
-  getImageAcceptAttribute,
-  getValidationMessages,
-  MAX_FILE_SIZE,
-  MAX_DIMENSION,
-  ALLOWED_IMAGE_TYPES,
-} from './imageValidation';
-
-describe('imageValidation', () => {
-  beforeEach(() => {
-    // Mock URL.createObjectURL and URL.revokeObjectURL
-    global.URL.createObjectURL = vi.fn(() => 'mock-object-url');
-    global.URL.revokeObjectURL = vi.fn();
-  });
-
-  describe('constants', () => {
-    it('MAX_FILE_SIZE is 20MB', () => {
-      expect(MAX_FILE_SIZE).toBe(20 * 1024 * 1024);
-    });
-
-    it('MAX_DIMENSION is 8000', () => {
-      expect(MAX_DIMENSION).toBe(8000);
-    });
-
-    it('ALLOWED_IMAGE_TYPES includes common formats', () => {
-      expect(ALLOWED_IMAGE_TYPES).toContain('image/jpeg');
-      expect(ALLOWED_IMAGE_TYPES).toContain('image/png');
-      expect(ALLOWED_IMAGE_TYPES).toContain('image/webp');
-      expect(ALLOWED_IMAGE_TYPES).toContain('image/heic');
-      expect(ALLOWED_IMAGE_TYPES).toContain('image/heif');
-    });
-  });
-
-  describe('validateImage', () => {
-    it('rejects invalid file type', async () => {
-      const file = new File(['content'], 'test.gif', { type: 'image/gif' });
-      const result = await validateImage(file);
-
-      expect(result.valid).toBe(false);
-      expect(result.error).toContain('Invalid file format');
-    });
-
-    it('rejects file that is too large', async () => {
-      // Create a mock file larger than 20MB
-      const largeContent = new ArrayBuffer(21 * 1024 * 1024);
-      const file = new File([largeContent], 'large.jpg', { type: 'image/jpeg' });
-
-      const result = await validateImage(file);
-
-      expect(result.valid).toBe(false);
-      expect(result.error).toContain('File too large');
-      expect(result.error).toContain('20MB');
-    });
-
-    it('accepts valid JPEG file', async () => {
-      const file = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
-
-      // Mock Image loading
-      const mockImage = {
-        width: 100,
-        height: 100,
-        onload: null,
-        onerror: null,
-        src: '',
-      };
-      vi.spyOn(global, 'Image').mockImplementation(() => {
-        setTimeout(() => mockImage.onload?.call(mockImage), 0);
-        return mockImage;
-      });
-
-      const result = await validateImage(file);
-
-      expect(result.valid).toBe(true);
-      expect(result.error).toBe(null);
-      expect(result.dimensions).toEqual({ width: 100, height: 100 });
-    });
-
-    it('accepts valid PNG file', async () => {
-      const file = new File(['content'], 'test.png', { type: 'image/png' });
-
-      const mockImage = {
-        width: 500,
-        height: 500,
-        onload: null,
-        onerror: null,
-        src: '',
-      };
-      vi.spyOn(global, 'Image').mockImplementation(() => {
-        setTimeout(() => mockImage.onload?.call(mockImage), 0);
-        return mockImage;
-      });
-
-      const result = await validateImage(file);
-
-      expect(result.valid).toBe(true);
-    });
-
-    it('accepts valid WebP file', async () => {
-      const file = new File(['content'], 'test.webp', { type: 'image/webp' });
-
-      const mockImage = {
-        width: 200,
-        height: 200,
-        onload: null,
-        onerror: null,
-        src: '',
-      };
-      vi.spyOn(global, 'Image').mockImplementation(() => {
-        setTimeout(() => mockImage.onload?.call(mockImage), 0);
-        return mockImage;
-      });
-
-      const result = await validateImage(file);
-
-      expect(result.valid).toBe(true);
-    });
-
-    it('rejects image with dimensions too large', async () => {
-      const file = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
-
-      const mockImage = {
-        width: 9000,
-        height: 9000,
-        onload: null,
-        onerror: null,
-        src: '',
-      };
-      vi.spyOn(global, 'Image').mockImplementation(() => {
-        setTimeout(() => mockImage.onload?.call(mockImage), 0);
-        return mockImage;
-      });
-
-      const result = await validateImage(file);
-
-      expect(result.valid).toBe(false);
-      expect(result.error).toContain('dimensions too large');
-      expect(result.dimensions).toEqual({ width: 9000, height: 9000 });
-    });
-
-    it('handles image load error', async () => {
-      const file = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
-
-      const mockImage = {
-        onload: null,
-        onerror: null,
-        src: '',
-      };
-      vi.spyOn(global, 'Image').mockImplementation(() => {
-        setTimeout(() => mockImage.onerror?.(), 0);
-        return mockImage;
-      });
-
-      const result = await validateImage(file);
-
-      expect(result.valid).toBe(false);
-      expect(result.error).toContain('Failed to read image dimensions');
-    });
-
-    it('handles HEIC format', async () => {
-      const file = new File(['content'], 'test.heic', { type: 'image/heic' });
-
-      const mockImage = {
-        width: 100,
-        height: 100,
-        onload: null,
-        onerror: null,
-        src: '',
-      };
-      vi.spyOn(global, 'Image').mockImplementation(() => {
-        setTimeout(() => mockImage.onload?.call(mockImage), 0);
-        return mockImage;
-      });
-
-      const result = await validateImage(file);
-
-      expect(result.valid).toBe(true);
-    });
-  });
-
-  describe('getImageAcceptAttribute', () => {
-    it('returns accept string with all allowed types', () => {
-      const accept = getImageAcceptAttribute();
-
-      expect(accept).toContain('image/png');
-      expect(accept).toContain('image/jpeg');
-      expect(accept).toContain('image/webp');
-      expect(accept).toContain('image/heic');
-      expect(accept).toContain('image/heif');
-    });
-
-    it('returns comma-separated values', () => {
-      const accept = getImageAcceptAttribute();
-      expect(accept.split(',').length).toBeGreaterThan(1);
-    });
-  });
-
-  describe('getValidationMessages', () => {
-    it('returns formats message', () => {
-      const messages = getValidationMessages();
-      expect(messages.formats).toBe('PNG, JPG, WebP, HEIC');
-    });
-
-    it('returns maxSize message', () => {
-      const messages = getValidationMessages();
-      expect(messages.maxSize).toBe('20MB');
-    });
-
-    it('returns maxDimension message', () => {
-      const messages = getValidationMessages();
-      expect(messages.maxDimension).toBe('8000px');
-    });
-
-    it('returns aspectRatio message', () => {
-      const messages = getValidationMessages();
-      expect(messages.aspectRatio).toBe('Any');
-    });
-  });
-});
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import {
+  validateImage,
+  getImageAcceptAttribute,
+  getValidationMessages,
+  MAX_FILE_SIZE,
+  MAX_DIMENSION,
+  ALLOWED_IMAGE_TYPES,
+} from './imageValidation';
+
+describe('imageValidation', () => {
+  beforeEach(() => {
+    // Mock URL.createObjectURL and URL.revokeObjectURL
+    global.URL.createObjectURL = vi.fn(() => 'mock-object-url');
+    global.URL.revokeObjectURL = vi.fn();
+  });
+
+  describe('constants', () => {
+    it('MAX_FILE_SIZE is 20MB', () => {
+      expect(MAX_FILE_SIZE).toBe(20 * 1024 * 1024);
+    });
+
+    it('MAX_DIMENSION is 8000', () => {
+      expect(MAX_DIMENSION).toBe(8000);
+    });
+
+    it('ALLOWED_IMAGE_TYPES includes common formats', () => {
+      expect(ALLOWED_IMAGE_TYPES).toContain('image/jpeg');
+      expect(ALLOWED_IMAGE_TYPES).toContain('image/png');
+      expect(ALLOWED_IMAGE_TYPES).toContain('image/webp');
+      expect(ALLOWED_IMAGE_TYPES).toContain('image/heic');
+      expect(ALLOWED_IMAGE_TYPES).toContain('image/heif');
+    });
+  });
+
+  describe('validateImage', () => {
+    it('rejects invalid file type', async () => {
+      const file = new File(['content'], 'test.gif', { type: 'image/gif' });
+      const result = await validateImage(file);
+
+      expect(result.valid).toBe(false);
+      expect(result.error).toContain('Invalid file format');
+    });
+
+    it('rejects file that is too large', async () => {
+      // Create a mock file larger than 20MB
+      const largeContent = new ArrayBuffer(21 * 1024 * 1024);
+      const file = new File([largeContent], 'large.jpg', { type: 'image/jpeg' });
+
+      const result = await validateImage(file);
+
+      expect(result.valid).toBe(false);
+      expect(result.error).toContain('File too large');
+      expect(result.error).toContain('20MB');
+    });
+
+    it('accepts valid JPEG file', async () => {
+      const file = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
+
+      // Mock Image loading
+      const mockImage = {
+        width: 100,
+        height: 100,
+        onload: null,
+        onerror: null,
+        src: '',
+      };
+      vi.spyOn(global, 'Image').mockImplementation(() => {
+        setTimeout(() => mockImage.onload?.call(mockImage), 0);
+        return mockImage;
+      });
+
+      const result = await validateImage(file);
+
+      expect(result.valid).toBe(true);
+      expect(result.error).toBe(null);
+      expect(result.dimensions).toEqual({ width: 100, height: 100 });
+    });
+
+    it('accepts valid PNG file', async () => {
+      const file = new File(['content'], 'test.png', { type: 'image/png' });
+
+      const mockImage = {
+        width: 500,
+        height: 500,
+        onload: null,
+        onerror: null,
+        src: '',
+      };
+      vi.spyOn(global, 'Image').mockImplementation(() => {
+        setTimeout(() => mockImage.onload?.call(mockImage), 0);
+        return mockImage;
+      });
+
+      const result = await validateImage(file);
+
+      expect(result.valid).toBe(true);
+    });
+
+    it('accepts valid WebP file', async () => {
+      const file = new File(['content'], 'test.webp', { type: 'image/webp' });
+
+      const mockImage = {
+        width: 200,
+        height: 200,
+        onload: null,
+        onerror: null,
+        src: '',
+      };
+      vi.spyOn(global, 'Image').mockImplementation(() => {
+        setTimeout(() => mockImage.onload?.call(mockImage), 0);
+        return mockImage;
+      });
+
+      const result = await validateImage(file);
+
+      expect(result.valid).toBe(true);
+    });
+
+    it('rejects image with dimensions too large', async () => {
+      const file = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
+
+      const mockImage = {
+        width: 9000,
+        height: 9000,
+        onload: null,
+        onerror: null,
+        src: '',
+      };
+      vi.spyOn(global, 'Image').mockImplementation(() => {
+        setTimeout(() => mockImage.onload?.call(mockImage), 0);
+        return mockImage;
+      });
+
+      const result = await validateImage(file);
+
+      expect(result.valid).toBe(false);
+      expect(result.error).toContain('dimensions too large');
+      expect(result.dimensions).toEqual({ width: 9000, height: 9000 });
+    });
+
+    it('handles image load error', async () => {
+      const file = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
+
+      const mockImage = {
+        onload: null,
+        onerror: null,
+        src: '',
+      };
+      vi.spyOn(global, 'Image').mockImplementation(() => {
+        setTimeout(() => mockImage.onerror?.(), 0);
+        return mockImage;
+      });
+
+      const result = await validateImage(file);
+
+      expect(result.valid).toBe(false);
+      expect(result.error).toContain('Failed to read image dimensions');
+    });
+
+    it('handles HEIC format', async () => {
+      const file = new File(['content'], 'test.heic', { type: 'image/heic' });
+
+      const mockImage = {
+        width: 100,
+        height: 100,
+        onload: null,
+        onerror: null,
+        src: '',
+      };
+      vi.spyOn(global, 'Image').mockImplementation(() => {
+        setTimeout(() => mockImage.onload?.call(mockImage), 0);
+        return mockImage;
+      });
+
+      const result = await validateImage(file);
+
+      expect(result.valid).toBe(true);
+    });
+  });
+
+  describe('getImageAcceptAttribute', () => {
+    it('returns accept string with all allowed types', () => {
+      const accept = getImageAcceptAttribute();
+
+      expect(accept).toContain('image/png');
+      expect(accept).toContain('image/jpeg');
+      expect(accept).toContain('image/webp');
+      expect(accept).toContain('image/heic');
+      expect(accept).toContain('image/heif');
+    });
+
+    it('returns comma-separated values', () => {
+      const accept = getImageAcceptAttribute();
+      expect(accept.split(',').length).toBeGreaterThan(1);
+    });
+  });
+
+  describe('getValidationMessages', () => {
+    it('returns formats message', () => {
+      const messages = getValidationMessages();
+      expect(messages.formats).toBe('PNG, JPG, WebP, HEIC');
+    });
+
+    it('returns maxSize message', () => {
+      const messages = getValidationMessages();
+      expect(messages.maxSize).toBe('20MB');
+    });
+
+    it('returns maxDimension message', () => {
+      const messages = getValidationMessages();
+      expect(messages.maxDimension).toBe('8000px');
+    });
+
+    it('returns aspectRatio message', () => {
+      const messages = getValidationMessages();
+      expect(messages.aspectRatio).toBe('Any');
+    });
+  });
+});

package/dist/utils/portal.js

@@ -1,25 +1,25 @@
-/**
- * Svelte action that portals an element to a target container (default: document.body)
- * This moves the element outside of any stacking contexts, solving iOS z-index issues.
- *
- * Usage: <div use:portal>...</div>
- * Or: <div use:portal={document.getElementById('modal-root')}>...</div>
- */
-export function portal(node, target = document.body) {
-  // Move the node to the target
-  target.appendChild(node);
-
-  return {
-    update(newTarget) {
-      // If target changes, move to new target
-      newTarget = newTarget || document.body;
-      newTarget.appendChild(node);
-    },
-    destroy() {
-      // Clean up - remove the node when component is destroyed
-      if (node.parentNode) {
-        node.parentNode.removeChild(node);
-      }
-    }
-  };
-}
+/**
+ * Svelte action that portals an element to a target container (default: document.body)
+ * This moves the element outside of any stacking contexts, solving iOS z-index issues.
+ *
+ * Usage: <div use:portal>...</div>
+ * Or: <div use:portal={document.getElementById('modal-root')}>...</div>
+ */
+export function portal(node, target = document.body) {
+  // Move the node to the target
+  target.appendChild(node);
+
+  return {
+    update(newTarget) {
+      // If target changes, move to new target
+      newTarget = newTarget || document.body;
+      newTarget.appendChild(node);
+    },
+    destroy() {
+      // Clean up - remove the node when component is destroyed
+      if (node.parentNode) {
+        node.parentNode.removeChild(node);
+      }
+    }
+  };
+}