@@ -209,11 +228,10 @@ defineExpose({
transition: 0.3s ease all;
padding: 1rem;
-
label {
padding: 8px 12px;
color: #fff;
- background-color: #9C9FB9;
+ background-color: #9c9fb9;
transition: 0.3s ease all;
}
diff --git a/src/runtime/common/Sets.vue b/src/runtime/common/Sets.vue
index 90c324d..3ce6c14 100644
--- a/src/runtime/common/Sets.vue
+++ b/src/runtime/common/Sets.vue
@@ -1,33 +1,33 @@
@@ -66,7 +68,6 @@ watch(() => props.data, () => {
justify-content: center;
align-items: center;
transform: translate(-50%, -50%);
-
}
}
@@ -76,7 +77,7 @@ watch(() => props.data, () => {
}
._overlay::before {
- content: "";
+ content: '';
top: 0;
left: 0;
position: absolute;
@@ -86,4 +87,4 @@ watch(() => props.data, () => {
height: 100%;
transition: 0.3s ease all;
}
-
\ No newline at end of file
+
diff --git a/src/runtime/common/index.ts b/src/runtime/common/index.ts
index 8b7fd96..bf98cc7 100644
--- a/src/runtime/common/index.ts
+++ b/src/runtime/common/index.ts
@@ -1,5 +1,5 @@
-import Sets from "./Sets.vue"
-import Single from "./Single.vue"
+import Sets from './Sets.vue';
+import Single from './Single.vue';
-export {Sets, Single}
-export default {Sets, Single}
\ No newline at end of file
+export { Sets, Single };
+export default { Sets, Single };
diff --git a/src/runtime/index.ts b/src/runtime/index.ts
index 575af50..247e2cb 100644
--- a/src/runtime/index.ts
+++ b/src/runtime/index.ts
@@ -1,4 +1,4 @@
-import SixDropzone from './Dropzone.vue'
+import SixDropzone from './Dropzone.vue';
-export {SixDropzone}
-export default SixDropzone
\ No newline at end of file
+export { SixDropzone };
+export default SixDropzone;
diff --git a/src/runtime/utils.ts b/src/runtime/utils.ts
index 3989224..3550f93 100644
--- a/src/runtime/utils.ts
+++ b/src/runtime/utils.ts
@@ -1,52 +1,52 @@
-export const backgroundImage = async (file: File | any, evt: HTMLElement) => {
- if (!file) return;
- const reader = new FileReader();
- reader.onloadend = () => {
- evt.style.backgroundImage = `url(${reader.result})`;
- };
- reader.readAsDataURL(file);
+export const backgroundImage = (file: File, element: HTMLElement): void => {
+ if (!file) return;
+ const reader = new FileReader();
+ reader.onloadend = () => {
+ element.style.backgroundImage = `url(${reader.result})`;
+ };
+ reader.readAsDataURL(file);
};
export const imageUrlToBase64 = async (url: string): Promise
=> {
- try {
- const data = await fetch(url);
- const blob = await data.blob();
- return new Promise((resolve, reject) => {
- const reader = new FileReader();
- reader.readAsDataURL(blob);
- reader.onloadend = () => resolve(reader.result as string);
- reader.onerror = reject;
- });
- } catch (error) {
- console.error('Error fetching image:', error);
- throw error;
- }
+ try {
+ const data = await fetch(url);
+ const blob = await data.blob();
+ return new Promise((resolve, reject) => {
+ const reader = new FileReader();
+ reader.readAsDataURL(blob);
+ reader.onloadend = () => resolve(reader.result as string);
+ reader.onerror = reject;
+ });
+ } catch (error) {
+ console.error('Error fetching image:', error);
+ throw error;
+ }
};
-export const dataURLtoFile = (dataurl: string, filename: string): File => {
- const arr = dataurl.split(','),
- mime = arr[0].match(/:(.*?);/)?.[1] || '',
- bstr = atob(arr[arr.length - 1]),
- n = bstr.length,
- u8arr = new Uint8Array(n);
+export const dataURLtoFile = (dataUrl: string, filename: string): File => {
+ const arr = dataUrl.split(',');
+ const mime = arr[0].match(/:(.*?);/)?.[1] || '';
+ const bstr = atob(arr[arr.length - 1]);
+ const n = bstr.length;
+ const u8arr = new Uint8Array(n);
- for (let i = 0; i < n; i++) {
- u8arr[i] = bstr.charCodeAt(i);
- }
- return new File([u8arr], filename, {type: mime});
+ for (let i = 0; i < n; i++) {
+ u8arr[i] = bstr.charCodeAt(i);
+ }
+ return new File([u8arr], filename, { type: mime });
};
-export const isFileAccepted = (file: File, accept: string | string[]) => {
- if (!accept) return true;
+export const isFileAccepted = (file: File, accept: string | string[]): boolean => {
+ if (!accept) return true;
- const acceptedTypes = Array.isArray(accept)
- ? accept
- : accept.split(',').map(type => type.trim());
+ const acceptedTypes = Array.isArray(accept)
+ ? accept
+ : accept.split(',').map((type) => type.trim());
- return acceptedTypes.some(type => {
- if (type.startsWith('.')) {
- return file.name.endsWith(type);
- }
- return file.type.startsWith(type.replace('/*', ''));
- });
-};
\ No newline at end of file
+ return acceptedTypes.some((type) => {
+ if (type.startsWith('.')) {
+ return file.name.endsWith(type);
+ }
+ return file.type.startsWith(type.replace('/*', ''));
+ });
+};
diff --git a/test/dropzone.test.ts b/test/dropzone.test.ts
index 431c573..e1a2e00 100644
--- a/test/dropzone.test.ts
+++ b/test/dropzone.test.ts
@@ -3,375 +3,375 @@ import { mount } from '`@vue/test-utils`';
import Dropzone from '../src/runtime/Dropzone.vue';
describe('Dropzone', () => {
- afterEach(() => {
- vi.restoreAllMocks();
+ afterEach(() => {
+ vi.restoreAllMocks();
+ });
+ describe('props', () => {
+ it('should render with default props', () => {
+ const wrapper = mount(Dropzone, {
+ props: {
+ id: 'test-dropzone',
+ },
+ });
+
+ expect(wrapper.find('input').attributes('id')).toBe('test-dropzone');
+ expect(wrapper.find('label').text()).toBe('Select File');
});
- describe('props', () => {
- it('should render with default props', () => {
- const wrapper = mount(Dropzone, {
- props: {
- id: 'test-dropzone'
- }
- });
-
- expect(wrapper.find('input').attributes('id')).toBe('test-dropzone');
- expect(wrapper.find('label').text()).toBe('Select File');
- });
-
- it('should render with custom label', () => {
- const wrapper = mount(Dropzone, {
- props: {
- id: 'test-dropzone',
- label: 'Custom Label'
- }
- });
-
- expect(wrapper.find('label').text()).toBe('Custom Label');
- });
-
- it('should render with multiple attribute', () => {
- const wrapper = mount(Dropzone, {
- props: {
- id: 'test-dropzone',
- multiple: true
- }
- });
-
- expect(wrapper.find('input').attributes('multiple')).toBeDefined();
- });
-
- it('should render with accept attribute', () => {
- const wrapper = mount(Dropzone, {
- props: {
- id: 'test-dropzone',
- accept: 'image/*'
- }
- });
-
- expect(wrapper.find('input').attributes('accept')).toBe('image/*');
- });
-
- it('should render with array accept attribute', () => {
- const wrapper = mount(Dropzone, {
- props: {
- id: 'test-dropzone',
- accept: ['image/jpeg', 'image/png']
- }
- });
-
- expect(wrapper.find('input').attributes('accept')).toBe('image/jpeg,image/png');
- });
-
- it('should render error messages when provided', () => {
- const wrapper = mount(Dropzone, {
- props: {
- id: 'test-dropzone',
- errorMessages: 'File is required'
- }
- });
-
- expect(wrapper.find('.messages__message').text()).toBe('File is required');
- });
+
+ it('should render with custom label', () => {
+ const wrapper = mount(Dropzone, {
+ props: {
+ id: 'test-dropzone',
+ label: 'Custom Label',
+ },
+ });
+
+ expect(wrapper.find('label').text()).toBe('Custom Label');
+ });
+
+ it('should render with multiple attribute', () => {
+ const wrapper = mount(Dropzone, {
+ props: {
+ id: 'test-dropzone',
+ multiple: true,
+ },
+ });
+
+ expect(wrapper.find('input').attributes('multiple')).toBeDefined();
+ });
+
+ it('should render with accept attribute', () => {
+ const wrapper = mount(Dropzone, {
+ props: {
+ id: 'test-dropzone',
+ accept: 'image/*',
+ },
+ });
+
+ expect(wrapper.find('input').attributes('accept')).toBe('image/*');
+ });
+
+ it('should render with array accept attribute', () => {
+ const wrapper = mount(Dropzone, {
+ props: {
+ id: 'test-dropzone',
+ accept: ['image/jpeg', 'image/png'],
+ },
+ });
+
+ expect(wrapper.find('input').attributes('accept')).toBe('image/jpeg,image/png');
+ });
+
+ it('should render error messages when provided', () => {
+ const wrapper = mount(Dropzone, {
+ props: {
+ id: 'test-dropzone',
+ errorMessages: 'File is required',
+ },
+ });
+
+ expect(wrapper.find('.messages__message').text()).toBe('File is required');
+ });
+ });
+
+ describe('events', () => {
+ it('should emit update:modelValue when file is selected', async () => {
+ const wrapper = mount(Dropzone, {
+ props: {
+ id: 'test-dropzone',
+ },
+ });
+
+ const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
+ const input = wrapper.find('input');
+
+ // Create a mock FileList
+ const mockFileList = {
+ 0: file,
+ 1: null,
+ length: 1,
+ item: (index: number) => (index === 0 ? file : null),
+ } as unknown as FileList;
+
+ Object.defineProperty(input.element, 'files', {
+ value: mockFileList,
+ writable: false,
+ });
+
+ await input.trigger('change');
+
+ expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+ });
+
+ it('should emit change event when file is selected', async () => {
+ const wrapper = mount(Dropzone, {
+ props: {
+ id: 'test-dropzone',
+ },
+ });
+
+ const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
+ const input = wrapper.find('input');
+
+ // Create a mock FileList
+ const mockFileList = {
+ 0: file,
+ 1: null,
+ length: 1,
+ item: (index: number) => (index === 0 ? file : null),
+ } as unknown as FileList;
+
+ Object.defineProperty(input.element, 'files', {
+ value: mockFileList,
+ writable: false,
+ });
+
+ await input.trigger('change');
+
+ expect(wrapper.emitted('change')).toBeTruthy();
});
- describe('events', () => {
- it('should emit update:modelValue when file is selected', async () => {
- const wrapper = mount(Dropzone, {
- props: {
- id: 'test-dropzone'
- }
- });
-
- const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
- const input = wrapper.find('input');
-
- // Create a mock FileList
- const mockFileList = {
- 0: file,
- 1: null,
- length: 1,
- item: (index: number) => index === 0 ? file : null
- } as unknown as FileList;
-
- Object.defineProperty(input.element, 'files', {
- value: mockFileList,
- writable: false
- });
-
- await input.trigger('change');
-
- expect(wrapper.emitted('update:modelValue')).toBeTruthy();
- });
-
- it('should emit change event when file is selected', async () => {
- const wrapper = mount(Dropzone, {
- props: {
- id: 'test-dropzone'
- }
- });
-
- const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
- const input = wrapper.find('input');
-
- // Create a mock FileList
- const mockFileList = {
- 0: file,
- 1: null,
- length: 1,
- item: (index: number) => index === 0 ? file : null
- } as unknown as FileList;
-
- Object.defineProperty(input.element, 'files', {
- value: mockFileList,
- writable: false
- });
-
- await input.trigger('change');
-
- expect(wrapper.emitted('change')).toBeTruthy();
- });
-
- it('should emit update:modelValue when file is dropped', async () => {
- const wrapper = mount(Dropzone, {
- props: {
- id: 'test-dropzone'
- }
- });
-
- const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
- const dropzone = wrapper.find('.dropzone');
-
- await dropzone.trigger('dragenter', {
- dataTransfer: {
- files: [file]
- }
- });
-
- expect(wrapper.emitted('update:modelValue')).toBeTruthy();
- });
-
- it('should emit change event when file is dropped', async () => {
- const wrapper = mount(Dropzone, {
- props: {
- id: 'test-dropzone'
- }
- });
-
- const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
- const dropzone = wrapper.find('.dropzone');
-
- await dropzone.trigger('dragenter', {
- dataTransfer: {
- files: [file]
- }
- });
-
- expect(wrapper.emitted('change')).toBeTruthy();
- });
+ it('should emit update:modelValue when file is dropped', async () => {
+ const wrapper = mount(Dropzone, {
+ props: {
+ id: 'test-dropzone',
+ },
+ });
+
+ const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
+ const dropzone = wrapper.find('.dropzone');
+
+ await dropzone.trigger('dragenter', {
+ dataTransfer: {
+ files: [file],
+ },
+ });
+
+ expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+ });
+
+ it('should emit change event when file is dropped', async () => {
+ const wrapper = mount(Dropzone, {
+ props: {
+ id: 'test-dropzone',
+ },
+ });
+
+ const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
+ const dropzone = wrapper.find('.dropzone');
+
+ await dropzone.trigger('dragenter', {
+ dataTransfer: {
+ files: [file],
+ },
+ });
+
+ expect(wrapper.emitted('change')).toBeTruthy();
+ });
+ });
+
+ describe('multiple files', () => {
+ it('should handle multiple files when multiple is true', async () => {
+ const wrapper = mount(Dropzone, {
+ props: {
+ id: 'test-dropzone',
+ multiple: true,
+ },
+ });
+
+ const files = [
+ new File(['test1'], 'test1.jpg', { type: 'image/jpeg' }),
+ new File(['test2'], 'test2.jpg', { type: 'image/jpeg' }),
+ ];
+ const input = wrapper.find('input');
+
+ // Create a mock FileList
+ const mockFileList = {
+ 0: files[0],
+ 1: files[1],
+ 2: null,
+ length: 2,
+ item: (index: number) => files[index] || null,
+ } as unknown as FileList;
+
+ Object.defineProperty(input.element, 'files', {
+ value: mockFileList,
+ writable: false,
+ });
+
+ await input.trigger('change');
+
+ const emitted = wrapper.emitted('update:modelValue');
+ expect(emitted).toBeTruthy();
+ expect(Array.isArray(emitted![0][0])).toBe(true);
+ });
+
+ it('should handle single file when multiple is false', async () => {
+ const wrapper = mount(Dropzone, {
+ props: {
+ id: 'test-dropzone',
+ multiple: false,
+ },
+ });
+
+ const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
+ const input = wrapper.find('input');
+
+ // Create a mock FileList
+ const mockFileList = {
+ 0: file,
+ 1: null,
+ length: 1,
+ item: (index: number) => (index === 0 ? file : null),
+ } as unknown as FileList;
+
+ Object.defineProperty(input.element, 'files', {
+ value: mockFileList,
+ writable: false,
+ });
+
+ await input.trigger('change');
+
+ const emitted = wrapper.emitted('update:modelValue');
+ expect(emitted).toBeTruthy();
+ expect(Array.isArray(emitted![0][0])).toBe(false);
});
+ });
- describe('multiple files', () => {
- it('should handle multiple files when multiple is true', async () => {
- const wrapper = mount(Dropzone, {
- props: {
- id: 'test-dropzone',
- multiple: true
- }
- });
-
- const files = [
- new File(['test1'], 'test1.jpg', { type: 'image/jpeg' }),
- new File(['test2'], 'test2.jpg', { type: 'image/jpeg' })
- ];
- const input = wrapper.find('input');
-
- // Create a mock FileList
- const mockFileList = {
- 0: files[0],
- 1: files[1],
- 2: null,
- length: 2,
- item: (index: number) => files[index] || null
- } as unknown as FileList;
-
- Object.defineProperty(input.element, 'files', {
- value: mockFileList,
- writable: false
- });
-
- await input.trigger('change');
-
- const emitted = wrapper.emitted('update:modelValue');
- expect(emitted).toBeTruthy();
- expect(Array.isArray(emitted![0][0])).toBe(true);
- });
-
- it('should handle single file when multiple is false', async () => {
- const wrapper = mount(Dropzone, {
- props: {
- id: 'test-dropzone',
- multiple: false
- }
- });
-
- const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
- const input = wrapper.find('input');
-
- // Create a mock FileList
- const mockFileList = {
- 0: file,
- 1: null,
- length: 1,
- item: (index: number) => index === 0 ? file : null
- } as unknown as FileList;
-
- Object.defineProperty(input.element, 'files', {
- value: mockFileList,
- writable: false
- });
-
- await input.trigger('change');
-
- const emitted = wrapper.emitted('update:modelValue');
- expect(emitted).toBeTruthy();
- expect(Array.isArray(emitted![0][0])).toBe(false);
- });
+ describe('exposed methods', () => {
+ it('should expose addFile method', () => {
+ const wrapper = mount(Dropzone, {
+ props: {
+ id: 'test-dropzone',
+ },
+ });
+
+ expect(wrapper.vm.addFile).toBeDefined();
});
- describe('exposed methods', () => {
- it('should expose addFile method', () => {
- const wrapper = mount(Dropzone, {
- props: {
- id: 'test-dropzone'
- }
- });
-
- expect(wrapper.vm.addFile).toBeDefined();
- });
-
- it('should expose clearFile method', () => {
- const wrapper = mount(Dropzone, {
- props: {
- id: 'test-dropzone'
- }
- });
-
- expect(wrapper.vm.clearFile).toBeDefined();
- });
-
- it('should clear file when clearFile is called', async () => {
- const wrapper = mount(Dropzone, {
- props: {
- id: 'test-dropzone',
- modelValue: new File(['test'], 'test.jpg', { type: 'image/jpeg' })
- }
- });
-
- await wrapper.vm.clearFile();
-
- expect(wrapper.emitted('update:modelValue')).toBeTruthy();
- expect(wrapper.emitted('update:modelValue')![0][0]).toBeNull();
- });
+ it('should expose clearFile method', () => {
+ const wrapper = mount(Dropzone, {
+ props: {
+ id: 'test-dropzone',
+ },
+ });
+
+ expect(wrapper.vm.clearFile).toBeDefined();
});
- describe('drag and drop', () => {
- it('should add active class on drag enter', async () => {
- const wrapper = mount(Dropzone, {
- props: {
- id: 'test-dropzone'
- }
- });
-
- const dropzone = wrapper.find('.dropzone');
- const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
-
- await dropzone.trigger('dragenter', {
- dataTransfer: {
- files: [file]
- }
- });
-
- expect(dropzone.classes()).toContain('active-dropzone');
- });
-
- it('should filter files based on accept prop', async () => {
- const wrapper = mount(Dropzone, {
- props: {
- id: 'test-dropzone',
- accept: 'image/jpeg'
- }
- });
-
- const files = [
- new File(['test1'], 'test1.jpg', { type: 'image/jpeg' }),
- new File(['test2'], 'test2.png', { type: 'image/png' })
- ];
- const dropzone = wrapper.find('.dropzone');
-
- await dropzone.trigger('dragenter', {
- dataTransfer: {
- files: files
- }
- });
-
- const emitted = wrapper.emitted('update:modelValue');
- expect(emitted).toBeTruthy();
- });
+ it('should clear file when clearFile is called', async () => {
+ const wrapper = mount(Dropzone, {
+ props: {
+ id: 'test-dropzone',
+ modelValue: new File(['test'], 'test.jpg', { type: 'image/jpeg' }),
+ },
+ });
+
+ await wrapper.vm.clearFile();
+
+ expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+ expect(wrapper.emitted('update:modelValue')![0][0]).toBeNull();
+ });
+ });
+
+ describe('drag and drop', () => {
+ it('should add active class on drag enter', async () => {
+ const wrapper = mount(Dropzone, {
+ props: {
+ id: 'test-dropzone',
+ },
+ });
+
+ const dropzone = wrapper.find('.dropzone');
+ const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
+
+ await dropzone.trigger('dragenter', {
+ dataTransfer: {
+ files: [file],
+ },
+ });
+
+ expect(dropzone.classes()).toContain('active-dropzone');
});
- describe('slots', () => {
- it('should render default slot content', () => {
- const wrapper = mount(Dropzone, {
- props: {
- id: 'test-dropzone'
- },
- slots: {
- default: 'Custom Content
'
- }
- });
-
- expect(wrapper.find('.custom-content').text()).toBe('Custom Content');
- });
-
- it('should render icon slot content', () => {
- const wrapper = mount(Dropzone, {
- props: {
- id: 'test-dropzone',
- modelValue: new File(['test'], 'test.jpg', { type: 'image/jpeg' })
- },
- slots: {
- icon: 'Custom Icon
'
- }
- });
-
- expect(wrapper.find('.custom-icon').text()).toBe('Custom Icon');
- });
+ it('should filter files based on accept prop', async () => {
+ const wrapper = mount(Dropzone, {
+ props: {
+ id: 'test-dropzone',
+ accept: 'image/jpeg',
+ },
+ });
+
+ const files = [
+ new File(['test1'], 'test1.jpg', { type: 'image/jpeg' }),
+ new File(['test2'], 'test2.png', { type: 'image/png' }),
+ ];
+ const dropzone = wrapper.find('.dropzone');
+
+ await dropzone.trigger('dragenter', {
+ dataTransfer: {
+ files: files,
+ },
+ });
+
+ const emitted = wrapper.emitted('update:modelValue');
+ expect(emitted).toBeTruthy();
+ });
+ });
+
+ describe('slots', () => {
+ it('should render default slot content', () => {
+ const wrapper = mount(Dropzone, {
+ props: {
+ id: 'test-dropzone',
+ },
+ slots: {
+ default: 'Custom Content
',
+ },
+ });
+
+ expect(wrapper.find('.custom-content').text()).toBe('Custom Content');
});
- describe('modelValue', () => {
- it('should sync with modelValue prop', async () => {
- const wrapper = mount(Dropzone, {
- props: {
- id: 'test-dropzone',
- modelValue: new File(['test'], 'test.jpg', { type: 'image/jpeg' })
- }
- });
-
- expect(wrapper.vm.dropzoneFile).toBeDefined();
- });
-
- it('should update when modelValue changes', async () => {
- const wrapper = mount(Dropzone, {
- props: {
- id: 'test-dropzone'
- }
- });
-
- await wrapper.setProps({
- modelValue: new File(['test'], 'test.jpg', { type: 'image/jpeg' })
- });
-
- expect(wrapper.vm.dropzoneFile).toBeDefined();
- });
+ it('should render icon slot content', () => {
+ const wrapper = mount(Dropzone, {
+ props: {
+ id: 'test-dropzone',
+ modelValue: new File(['test'], 'test.jpg', { type: 'image/jpeg' }),
+ },
+ slots: {
+ icon: 'Custom Icon
',
+ },
+ });
+
+ expect(wrapper.find('.custom-icon').text()).toBe('Custom Icon');
+ });
+ });
+
+ describe('modelValue', () => {
+ it('should sync with modelValue prop', async () => {
+ const wrapper = mount(Dropzone, {
+ props: {
+ id: 'test-dropzone',
+ modelValue: new File(['test'], 'test.jpg', { type: 'image/jpeg' }),
+ },
+ });
+
+ expect(wrapper.vm.dropzoneFile).toBeDefined();
+ });
+
+ it('should update when modelValue changes', async () => {
+ const wrapper = mount(Dropzone, {
+ props: {
+ id: 'test-dropzone',
+ },
+ });
+
+ await wrapper.setProps({
+ modelValue: new File(['test'], 'test.jpg', { type: 'image/jpeg' }),
+ });
+
+ expect(wrapper.vm.dropzoneFile).toBeDefined();
});
+ });
});
diff --git a/test/module.test.ts b/test/module.test.ts
index bd2df5a..f3e2db5 100644
--- a/test/module.test.ts
+++ b/test/module.test.ts
@@ -1,9 +1,9 @@
import { describe, it, expect } from 'vitest';
describe('module', () => {
- it('should be importable', async () => {
- const module = await import('../src/module');
- expect(module).toBeDefined();
- expect(module.default).toBeDefined();
- });
+ it('should be importable', async () => {
+ const module = await import('../src/module');
+ expect(module).toBeDefined();
+ expect(module.default).toBeDefined();
+ });
});
diff --git a/test/utils.test.ts b/test/utils.test.ts
index 6c42f37..f404ddc 100644
--- a/test/utils.test.ts
+++ b/test/utils.test.ts
@@ -1,126 +1,132 @@
import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { backgroundImage, imageUrlToBase64, dataURLtoFile, isFileAccepted } from '../src/runtime/utils';
+import {
+ backgroundImage,
+ imageUrlToBase64,
+ dataURLtoFile,
+ isFileAccepted,
+} from '../src/runtime/utils';
describe('utils', () => {
- describe('backgroundImage', () => {
- it('should set background image on element', async () => {
- const mockFile = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
- const mockElement = { style: { backgroundImage: '' } };
-
- backgroundImage(mockFile, mockElement as any);
-
- // Wait for FileReader to complete
- await new Promise(resolve => setTimeout(resolve, 100));
-
- expect(mockElement.style.backgroundImage).toContain('url(');
- });
-
- it('should return early if file is null', () => {
- const mockElement = { style: { backgroundImage: '' } };
-
- backgroundImage(null, mockElement as any);
-
- expect(mockElement.style.backgroundImage).toBe('');
- });
+ describe('backgroundImage', () => {
+ it('should set background image on element', async () => {
+ const mockFile = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
+ const mockElement = { style: { backgroundImage: '' } };
+
+ backgroundImage(mockFile, mockElement as any);
+
+ // Wait for FileReader to complete
+ await new Promise((resolve) => setTimeout(resolve, 100));
+
+ expect(mockElement.style.backgroundImage).toContain('url(');
+ });
+
+ it('should return early if file is null', () => {
+ const mockElement = { style: { backgroundImage: '' } };
+
+ backgroundImage(null, mockElement as any);
+
+ expect(mockElement.style.backgroundImage).toBe('');
+ });
+ });
+
+ describe('imageUrlToBase64', () => {
+ it('should convert image URL to base64', async () => {
+ // Mock fetch
+ global.fetch = vi.fn(() =>
+ Promise.resolve({
+ blob: () => Promise.resolve(new Blob(['test'], { type: 'image/jpeg' })),
+ } as Response)
+ );
+
+ const result = await imageUrlToBase64('https://example.com/image.jpg');
+
+ expect(result).toContain('data:');
+ expect(result).toContain('base64');
+
+ vi.restoreAllMocks();
+ });
+
+ it('should throw error on fetch failure', async () => {
+ global.fetch = vi.fn(() => Promise.reject(new Error('Network error')));
+
+ await expect(imageUrlToBase64('https://example.com/image.jpg')).rejects.toThrow();
+
+ vi.restoreAllMocks();
+ });
+ });
+
+ describe('dataURLtoFile', () => {
+ it('should convert data URL to File', () => {
+ const dataURL = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBD';
+ const filename = 'test.jpg';
+
+ const file = dataURLtoFile(dataURL, filename);
+
+ expect(file).toBeInstanceOf(File);
+ expect(file.name).toBe(filename);
+ expect(file.type).toBe('image/jpeg');
});
- describe('imageUrlToBase64', () => {
- it('should convert image URL to base64', async () => {
- // Mock fetch
- global.fetch = vi.fn(() =>
- Promise.resolve({
- blob: () => Promise.resolve(new Blob(['test'], { type: 'image/jpeg' }))
- } as Response)
- );
-
- const result = await imageUrlToBase64('https://example.com/image.jpg');
-
- expect(result).toContain('data:');
- expect(result).toContain('base64');
-
- vi.restoreAllMocks();
- });
-
- it('should throw error on fetch failure', async () => {
- global.fetch = vi.fn(() => Promise.reject(new Error('Network error')));
-
- await expect(imageUrlToBase64('https://example.com/image.jpg')).rejects.toThrow();
-
- vi.restoreAllMocks();
- });
+ it('should handle different MIME types', () => {
+ const pngDataURL =
+ 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==';
+ const filename = 'test.png';
+
+ const file = dataURLtoFile(pngDataURL, filename);
+
+ expect(file.type).toBe('image/png');
+ });
+
+ it('should handle data URL without MIME type', () => {
+ const dataURL = 'data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==';
+ const filename = 'test.txt';
+
+ const file = dataURLtoFile(dataURL, filename);
+
+ expect(file.name).toBe(filename);
+ });
+ });
+
+ describe('isFileAccepted', () => {
+ it('should accept file when accept is empty', () => {
+ const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
+
+ expect(isFileAccepted(file, '')).toBe(true);
+ });
+
+ it('should accept file by MIME type', () => {
+ const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
+
+ expect(isFileAccepted(file, 'image/jpeg')).toBe(true);
+ expect(isFileAccepted(file, 'image/*')).toBe(true);
+ });
+
+ it('should accept file by extension', () => {
+ const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
+
+ expect(isFileAccepted(file, '.jpg')).toBe(true);
+ expect(isFileAccepted(file, '.png')).toBe(false);
});
- describe('dataURLtoFile', () => {
- it('should convert data URL to File', () => {
- const dataURL = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBD';
- const filename = 'test.jpg';
-
- const file = dataURLtoFile(dataURL, filename);
-
- expect(file).toBeInstanceOf(File);
- expect(file.name).toBe(filename);
- expect(file.type).toBe('image/jpeg');
- });
-
- it('should handle different MIME types', () => {
- const pngDataURL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==';
- const filename = 'test.png';
-
- const file = dataURLtoFile(pngDataURL, filename);
-
- expect(file.type).toBe('image/png');
- });
-
- it('should handle data URL without MIME type', () => {
- const dataURL = 'data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==';
- const filename = 'test.txt';
-
- const file = dataURLtoFile(dataURL, filename);
-
- expect(file.name).toBe(filename);
- });
+ it('should handle array of accepted types', () => {
+ const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
+
+ expect(isFileAccepted(file, ['image/jpeg', 'image/png'])).toBe(true);
+ expect(isFileAccepted(file, ['.jpg', '.png'])).toBe(true);
+ expect(isFileAccepted(file, ['.png', '.gif'])).toBe(false);
});
- describe('isFileAccepted', () => {
- it('should accept file when accept is empty', () => {
- const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
-
- expect(isFileAccepted(file, '')).toBe(true);
- });
-
- it('should accept file by MIME type', () => {
- const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
-
- expect(isFileAccepted(file, 'image/jpeg')).toBe(true);
- expect(isFileAccepted(file, 'image/*')).toBe(true);
- });
-
- it('should accept file by extension', () => {
- const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
-
- expect(isFileAccepted(file, '.jpg')).toBe(true);
- expect(isFileAccepted(file, '.png')).toBe(false);
- });
-
- it('should handle array of accepted types', () => {
- const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
-
- expect(isFileAccepted(file, ['image/jpeg', 'image/png'])).toBe(true);
- expect(isFileAccepted(file, ['.jpg', '.png'])).toBe(true);
- expect(isFileAccepted(file, ['.png', '.gif'])).toBe(false);
- });
-
- it('should handle comma-separated string', () => {
- const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
-
- expect(isFileAccepted(file, 'image/jpeg, image/png')).toBe(true);
- expect(isFileAccepted(file, '.jpg, .png')).toBe(true);
- });
-
- it('should reject file with different MIME type', () => {
- const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
-
- expect(isFileAccepted(file, 'application/pdf')).toBe(false);
- });
+ it('should handle comma-separated string', () => {
+ const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
+
+ expect(isFileAccepted(file, 'image/jpeg, image/png')).toBe(true);
+ expect(isFileAccepted(file, '.jpg, .png')).toBe(true);
+ });
+
+ it('should reject file with different MIME type', () => {
+ const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
+
+ expect(isFileAccepted(file, 'application/pdf')).toBe(false);
});
+ });
});
diff --git a/tsconfig.json b/tsconfig.json
index e0e8ab7..e52e337 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,4 +12,4 @@
"types": ["node", "vue"]
},
"include": ["src/**/*.ts", "src/**/*.vue"]
-}
\ No newline at end of file
+}
diff --git a/vitest.config.ts b/vitest.config.ts
index 33960c3..d2b5aa0 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,28 +1,28 @@
-import { defineConfig } from 'vitest/config'
-import { join } from 'node:path'
-import { fileURLToPath } from 'node:url'
-import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vitest/config';
+import { join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import vue from '@vitejs/plugin-vue';
-const __dirname = fileURLToPath(new URL('.', import.meta.url))
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
export default defineConfig({
- plugins: [vue()],
- resolve: {
- alias: {
- // Resolve imports de Nuxt 4 dentro da lib
- '#imports': join(__dirname, 'src'),
- '#runtime': join(__dirname, 'src/runtime'),
- '#modules': join(__dirname, 'src/module.ts')
- }
+ plugins: [vue()],
+ resolve: {
+ alias: {
+ // Resolve imports de Nuxt 4 dentro da lib
+ '#imports': join(__dirname, 'src'),
+ '#runtime': join(__dirname, 'src/runtime'),
+ '#modules': join(__dirname, 'src/module.ts'),
},
- test: {
- globals: true,
- environment: 'happy-dom', // ambiente leve para testes de Vue/Nuxt
- include: ['test/**/*.test.ts'], // apenas arquivos de teste da lib
- exclude: ['playground/**', 'test/e2e/**'], // ignora playground e testes e2e
- coverage: {
- reporter: ['text', 'lcov'],
- exclude: ['playground/**', 'test/e2e/**']
- }
- }
-})
\ No newline at end of file
+ },
+ test: {
+ globals: true,
+ environment: 'happy-dom', // ambiente leve para testes de Vue/Nuxt
+ include: ['test/**/*.test.ts'], // apenas arquivos de teste da lib
+ exclude: ['playground/**', 'test/e2e/**'], // ignora playground e testes e2e
+ coverage: {
+ reporter: ['text', 'lcov'],
+ exclude: ['playground/**', 'test/e2e/**'],
+ },
+ },
+});
-