public-repos/it-tools
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor(command-palette): adjust class order for improved styling consistency

Browse Source 
refactor(image-color-inverter): update import statements for Node.js compatibility
test(image-color-inverter): enhance tests with consistent globalThis usage
fix(image-color-inverter.service): streamline image processing logic and error handling
refactor(image-color-inverter.vue): simplify file upload handling and improve readability
refactor(index): optimize tools mapping for better performance
fix(c-select): correct input class order for consistent styling
fix(c-table): adjust header class order for improved styling consistency
This commit is contained in:
Jaydeep Solanki 2025-08-25 13:33:04 +05:30
parent 6bd9f067ed
commit 663fb318ad
8 changed files with 118 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/modules/command-palette/command-palette.vue
View File

@ -128,7 +128,7 @@ function activateOption(option: PaletteOption) {
<c-input-text ref="inputRef" v-model:value="searchPrompt" raw-text placeholder="Type to search a tool or a command..." autofocus clearable /> <c-input-text ref="inputRef" v-model:value="searchPrompt" raw-text placeholder="Type to search a tool or a command..." autofocus clearable />
<div v-for="(options, category) in filteredSearchResult" :key="category"> <div v-for="(options, category) in filteredSearchResult" :key="category">
<div ml-3 mt-3 text-sm font-bold text-primary op-60> <div ml-3 mt-3 text-sm text-primary font-bold op-60>
{{ category }} {{ category }}
</div> </div>
<command-palette-option v-for="option in options" :key="option.name" :option="option" :selected="selectedOptionIndex === getOptionIndex(option)" @activated="activateOption" /> <command-palette-option v-for="option in options" :key="option.name" :option="option" :selected="selectedOptionIndex === getOptionIndex(option)" @activated="activateOption" />

22
src/tools/image-color-inverter/image-color-inverter.e2e.spec.ts
View File

@ -1,6 +1,7 @@
import { test, expect } from '@playwright/test'; import { promises as fs } from 'node:fs';
import { promises as fs } from 'fs'; import path from 'node:path';
import path from 'path'; import process from 'node:process';
import { expect, test } from '@playwright/test';
test.describe('Tool - Image color inverter', () => { test.describe('Tool - Image color inverter', () => {
test.beforeEach(async ({ page }) => { test.beforeEach(async ({ page }) => {
@ -31,7 +32,8 @@ test.describe('Tool - Image color inverter', () => {
const errorAlert = page.locator('.n-alert--error'); const errorAlert = page.locator('.n-alert--error');
await expect(errorAlert).toBeVisible(); await expect(errorAlert).toBeVisible();
await expect(errorAlert).toContainText('File must be an image'); await expect(errorAlert).toContainText('File must be an image');
} finally { }
finally {
// Clean up // Clean up
await fs.unlink(testFilePath).catch(() => {}); await fs.unlink(testFilePath).catch(() => {});
} }
@ -39,7 +41,8 @@ test.describe('Tool - Image color inverter', () => {
test('Processes image upload successfully', async ({ page }) => { test('Processes image upload successfully', async ({ page }) => {
// Create a simple test image (1x1 pixel PNG in base64) // Create a simple test image (1x1 pixel PNG in base64)
const testImageDataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=='; const testImageDataUrl
= 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
// Create a blob from the data URL // Create a blob from the data URL
const response = await fetch(testImageDataUrl); const response = await fetch(testImageDataUrl);
@ -73,7 +76,8 @@ test.describe('Tool - Image color inverter', () => {
// Check that copy button is available // Check that copy button is available
const copyButton = page.locator('text=Copy Base64'); const copyButton = page.locator('text=Copy Base64');
await expect(copyButton).toBeVisible(); await expect(copyButton).toBeVisible();
} finally { }
finally {
// Clean up // Clean up
await fs.unlink(testFilePath).catch(() => {}); await fs.unlink(testFilePath).catch(() => {});
} }
@ -81,7 +85,8 @@ test.describe('Tool - Image color inverter', () => {
test('Clear button resets the tool', async ({ page }) => { test('Clear button resets the tool', async ({ page }) => {
// Create a simple test image // Create a simple test image
const testImageDataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=='; const testImageDataUrl
= 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
const response = await fetch(testImageDataUrl); const response = await fetch(testImageDataUrl);
const blob = await response.blob(); const blob = await response.blob();
@ -110,7 +115,8 @@ test.describe('Tool - Image color inverter', () => {
// Check that upload area is visible again // Check that upload area is visible again
const uploadArea = page.locator('text=Drag and drop an image here, or click to select'); const uploadArea = page.locator('text=Drag and drop an image here, or click to select');
await expect(uploadArea).toBeVisible(); await expect(uploadArea).toBeVisible();
} finally { }
finally {
await fs.unlink(testFilePath).catch(() => {}); await fs.unlink(testFilePath).catch(() => {});
} }
}); });

70
src/tools/image-color-inverter/image-color-inverter.service.test.ts
View File

@ -1,8 +1,8 @@
import { expect, describe, it, beforeEach } from 'vitest'; import { describe, expect, it } from 'vitest';
import { invertImageColors } from './image-color-inverter.service'; import { invertImageColors } from './image-color-inverter.service';
// Mock ImageData for Node.js environment // Mock ImageData for Node.js environment
Object.defineProperty(global, 'ImageData', { Object.defineProperty(globalThis, 'ImageData', {
value: class ImageData { value: class ImageData {
data: Uint8ClampedArray; data: Uint8ClampedArray;
width: number; width: number;
@ -14,7 +14,8 @@ Object.defineProperty(global, 'ImageData', {
this.width = data; this.width = data;
this.height = width; this.height = width;
this.data = new Uint8ClampedArray(data * width * 4); this.data = new Uint8ClampedArray(data * width * 4);
} else { }
else {
// ImageData(data, width, height) // ImageData(data, width, height)
this.data = data; this.data = data;
this.width = width; this.width = width;
@ -25,30 +26,39 @@ Object.defineProperty(global, 'ImageData', {
}); });
// Mock other browser APIs for completeness // Mock other browser APIs for completeness
Object.defineProperty(global, 'HTMLCanvasElement', { Object.defineProperty(globalThis, 'HTMLCanvasElement', {
value: class { value: class {
width = 0; width = 0;
height = 0; height = 0;
getContext() { getContext() {
return { return {
drawImage: () => {}, drawImage: () => {},
getImageData: () => new (global as any).ImageData(new Uint8ClampedArray([255, 0, 128, 255]), 1, 1), getImageData: () => new (globalThis as any).ImageData(new Uint8ClampedArray([255, 0, 128, 255]), 1, 1),
putImageData: () => {}, putImageData: () => {},
}; };
} }
toDataURL() { return 'data:image/png;base64,mock'; }
toDataURL() {
return 'data:image/png;base64,mock';
}
}, },
}); });
Object.defineProperty(global, 'Image', { Object.defineProperty(globalThis, 'Image', {
value: class { value: class {
onload: () => void = () => {}; onload: () => void = () => {};
onerror: () => void = () => {}; onerror: () => void = () => {};
width = 100;
height = 100;
set src(value: string) { set src(value: string) {
setTimeout(() => this.onload(), 0); setTimeout(() => this.onload(), 0);
} }
width = 100;
height = 100; get src(): string {
return '';
}
}, },
}); });
@ -57,28 +67,34 @@ describe('image-color-inverter service', () => {
it('should invert RGB colors while preserving alpha', () => { it('should invert RGB colors while preserving alpha', () => {
// Create test image data with known values // Create test image data with known values
const originalData = new Uint8ClampedArray([ const originalData = new Uint8ClampedArray([
255, 0, 128, 255, // Red=255, Green=0, Blue=128, Alpha=255 255,
0, 255, 64, 128, // Red=0, Green=255, Blue=64, Alpha=128 0,
128,
255, // Red=255, Green=0, Blue=128, Alpha=255
0,
255,
64,
128, // Red=0, Green=255, Blue=64, Alpha=128
]); ]);
const imageData = new (global as any).ImageData(originalData, 2, 1); const imageData = new (globalThis as any).ImageData(originalData, 2, 1);
const inverted = invertImageColors(imageData); const inverted = invertImageColors(imageData);
// Check that colors are inverted correctly // Check that colors are inverted correctly
expect(inverted.data[0]).toBe(0); // 255 - 255 = 0 expect(inverted.data[0]).toBe(0); // 255 - 255 = 0
expect(inverted.data[1]).toBe(255); // 255 - 0 = 255 expect(inverted.data[1]).toBe(255); // 255 - 0 = 255
expect(inverted.data[2]).toBe(127); // 255 - 128 = 127 expect(inverted.data[2]).toBe(127); // 255 - 128 = 127
expect(inverted.data[3]).toBe(255); // Alpha unchanged expect(inverted.data[3]).toBe(255); // Alpha unchanged
expect(inverted.data[4]).toBe(255); // 255 - 0 = 255 expect(inverted.data[4]).toBe(255); // 255 - 0 = 255
expect(inverted.data[5]).toBe(0); // 255 - 255 = 0 expect(inverted.data[5]).toBe(0); // 255 - 255 = 0
expect(inverted.data[6]).toBe(191); // 255 - 64 = 191 expect(inverted.data[6]).toBe(191); // 255 - 64 = 191
expect(inverted.data[7]).toBe(128); // Alpha unchanged expect(inverted.data[7]).toBe(128); // Alpha unchanged
}); });
it('should preserve image dimensions', () => { it('should preserve image dimensions', () => {
const originalData = new Uint8ClampedArray([255, 0, 128, 255]); const originalData = new Uint8ClampedArray([255, 0, 128, 255]);
const imageData = new (global as any).ImageData(originalData, 1, 1); const imageData = new (globalThis as any).ImageData(originalData, 1, 1);
const inverted = invertImageColors(imageData); const inverted = invertImageColors(imageData);
@ -88,10 +104,16 @@ describe('image-color-inverter service', () => {
it('should handle pure black and white pixels', () => { it('should handle pure black and white pixels', () => {
const originalData = new Uint8ClampedArray([ const originalData = new Uint8ClampedArray([
0, 0, 0, 255, // Pure black 0,
255, 255, 255, 255, // Pure white 0,
0,
255, // Pure black
255,
255,
255,
255, // Pure white
]); ]);
const imageData = new (global as any).ImageData(originalData, 2, 1); const imageData = new (globalThis as any).ImageData(originalData, 2, 1);
const inverted = invertImageColors(imageData); const inverted = invertImageColors(imageData);

7
src/tools/image-color-inverter/image-color-inverter.service.ts
View File

@ -41,7 +41,7 @@ export function invertImageFile(file: File): Promise<string> {
// Invert colors (RGB channels only, preserve alpha) // Invert colors (RGB channels only, preserve alpha)
for (let i = 0; i < data.length; i += 4) { for (let i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i]; // Red data[i] = 255 - data[i]; // Red
data[i + 1] = 255 - data[i + 1]; // Green data[i + 1] = 255 - data[i + 1]; // Green
data[i + 2] = 255 - data[i + 2]; // Blue data[i + 2] = 255 - data[i + 2]; // Blue
// data[i + 3] is alpha - keep unchanged // data[i + 3] is alpha - keep unchanged
@ -53,7 +53,8 @@ export function invertImageFile(file: File): Promise<string> {
// Convert to base64 PNG // Convert to base64 PNG
const invertedDataUrl = canvas.toDataURL('image/png'); const invertedDataUrl = canvas.toDataURL('image/png');
resolve(invertedDataUrl); resolve(invertedDataUrl);
} catch (err) { }
catch (err) {
reject(new Error(`Failed to process image: ${err}`)); reject(new Error(`Failed to process image: ${err}`));
} }
}; };
@ -76,7 +77,7 @@ export function invertImageColors(imageData: ImageData): ImageData {
// Invert RGB values while preserving alpha // Invert RGB values while preserving alpha
for (let i = 0; i < data.length; i += 4) { for (let i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i]; // Red data[i] = 255 - data[i]; // Red
data[i + 1] = 255 - data[i + 1]; // Green data[i + 1] = 255 - data[i + 1]; // Green
data[i + 2] = 255 - data[i + 2]; // Blue data[i + 2] = 255 - data[i + 2]; // Blue
// data[i + 3] is alpha - keep unchanged // data[i + 3] is alpha - keep unchanged

51
src/tools/image-color-inverter/image-color-inverter.vue
View File

@ -1,8 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { invertImageFile } from './image-color-inverter.service';
import { useCopy } from '@/composable/copy'; import { useCopy } from '@/composable/copy';
import { useDownloadFileFromBase64 } from '@/composable/downloadBase64'; import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
import { withDefaultOnError } from '@/utils/defaults'; import { withDefaultOnError } from '@/utils/defaults';
import { invertImageFile } from './image-color-inverter.service';
const originalImageSrc = ref<string>(''); const originalImageSrc = ref<string>('');
const invertedImageSrc = ref<string>(''); const invertedImageSrc = ref<string>('');
@ -11,7 +11,7 @@ const error = ref<string | null>(null);
const { copy: copyInvertedImage } = useCopy({ const { copy: copyInvertedImage } = useCopy({
source: invertedImageSrc, source: invertedImageSrc,
text: 'Inverted image base64 copied to clipboard' text: 'Inverted image base64 copied to clipboard',
}); });
const { download: downloadInvertedImage } = useDownloadFileFromBase64({ const { download: downloadInvertedImage } = useDownloadFileFromBase64({
@ -20,36 +20,39 @@ const { download: downloadInvertedImage } = useDownloadFileFromBase64({
extension: 'png', extension: 'png',
}); });
const handleFileUpload = async (file: File) => { function handleFileUpload(file: File) {
if (!file) { if (!file) {
return; return;
} }
try { error.value = null;
error.value = null; isProcessing.value = true;
isProcessing.value = true;
// Show original image // Show original image
const reader = new FileReader(); const reader = new FileReader();
reader.onload = (e) => { reader.onload = (e) => {
originalImageSrc.value = e.target?.result as string; originalImageSrc.value = e.target?.result as string;
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
// Process the image // Process the image
invertedImageSrc.value = await invertImageFile(file); invertImageFile(file)
} catch (err) { .then((result) => {
error.value = withDefaultOnError(err, 'Failed to process image'); invertedImageSrc.value = result;
} finally { })
isProcessing.value = false; .catch((err) => {
} error.value = withDefaultOnError(err, 'Failed to process image');
}; })
.finally(() => {
isProcessing.value = false;
});
}
const clearImages = () => { function clearImages() {
originalImageSrc.value = ''; originalImageSrc.value = '';
invertedImageSrc.value = ''; invertedImageSrc.value = '';
error.value = null; error.value = null;
}; }
</script> </script>
<template> <template>
@ -72,7 +75,7 @@ const clearImages = () => {
<div> <div>
<n-h3>Original Image</n-h3> <n-h3>Original Image</n-h3>
<div class="image-container"> <div class="image-container">
<img :src="originalImageSrc" alt="Original" /> <img :src="originalImageSrc" alt="Original">
</div> </div>
</div> </div>
</n-gi> </n-gi>
@ -81,7 +84,7 @@ const clearImages = () => {
<div> <div>
<n-h3>Inverted Image</n-h3> <n-h3>Inverted Image</n-h3>
<div class="image-container"> <div class="image-container">
<img :src="invertedImageSrc" alt="Inverted" /> <img :src="invertedImageSrc" alt="Inverted">
</div> </div>
<n-space style="margin-top: 12px" justify="start"> <n-space style="margin-top: 12px" justify="start">
<c-button @click="downloadInvertedImage()"> <c-button @click="downloadInvertedImage()">

2
src/tools/index.ts
View File

@ -214,5 +214,5 @@ export const toolsByCategory: ToolCategory[] = [
export const tools = toolsByCategory.flatMap(({ components }) => components); export const tools = toolsByCategory.flatMap(({ components }) => components);
export const toolsWithCategory = toolsByCategory.flatMap(({ components, name }) => export const toolsWithCategory = toolsByCategory.flatMap(({ components, name }) =>
components.map((tool) => ({ category: name, ...tool })), components.map(tool => ({ category: name, ...tool })),
); );

2
src/ui/c-select/c-select.vue
View File

@ -151,7 +151,7 @@ function onSearchInput() {
> >
<div flex-1 truncate> <div flex-1 truncate>
<slot name="displayed-value"> <slot name="displayed-value">
<input v-if="searchable && isOpen" ref="searchInputRef" v-model="searchQuery" type="text" placeholder="Search..." class="search-input" w-full lh-normal color-current @input="onSearchInput"> <input v-if="searchable && isOpen" ref="searchInputRef" v-model="searchQuery" type="text" placeholder="Search..." class="search-input" w-full color-current lh-normal @input="onSearchInput">
<span v-else-if="selectedOption" lh-normal> <span v-else-if="selectedOption" lh-normal>
{{ selectedOption.label }} {{ selectedOption.label }}
</span> </span>

2
src/ui/c-table/c-table.vue
View File

@ -39,7 +39,7 @@ const headers = computed(() => {
<template> <template>
<div class="relative overflow-x-auto rounded"> <div class="relative overflow-x-auto rounded">
<table class="w-full border-collapse text-left text-sm text-gray-500 dark:text-gray-400" role="table" :aria-label="description"> <table class="w-full border-collapse text-left text-sm text-gray-500 dark:text-gray-400" role="table" :aria-label="description">
<thead v-if="!hideHeaders" class="bg-#ffffff uppercase text-gray-700 dark:bg-#333333 dark:text-gray-400" border-b="1px solid dark:transparent #efeff5"> <thead v-if="!hideHeaders" class="bg-#ffffff text-gray-700 uppercase dark:bg-#333333 dark:text-gray-400" border-b="1px solid dark:transparent #efeff5">
<tr> <tr>
<th v-for="header in headers" :key="header.key" scope="col" class="px-6 py-3 text-xs"> <th v-for="header in headers" :key="header.key" scope="col" class="px-6 py-3 text-xs">
{{ header.label }} {{ header.label }}