diff --git a/src/tools/border-generator/border-generator.e2e.spec.ts b/src/tools/border-generator/border-generator.e2e.spec.ts new file mode 100644 index 00000000..ec0e5355 --- /dev/null +++ b/src/tools/border-generator/border-generator.e2e.spec.ts @@ -0,0 +1,11 @@ +import { expect, test } from '@playwright/test'; + +test.describe('Tool - Border generator', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/border-generator'); + }); + + test('Has correct title', async ({ page }) => { + await expect(page).toHaveTitle('Border Generator - IT Tools'); + }); +}); diff --git a/src/tools/border-generator/border-generator.service.test.ts b/src/tools/border-generator/border-generator.service.test.ts new file mode 100644 index 00000000..ff1725d4 --- /dev/null +++ b/src/tools/border-generator/border-generator.service.test.ts @@ -0,0 +1,39 @@ +import { describe, expect, it } from 'vitest'; +import { generateCSSOutput } from './border-generator.service'; +import type { Borders } from './border-generator.service'; + +describe('border-generator service', () => { + describe('generateCSSOutput', () => { + it('generates correct CSS with default values', () => { + const borders: Borders = { + topLeft: { label: 'Top Left', value: 10, max: 100 }, + topRight: { label: 'Top Right', value: 10, max: 100 }, + bottomRight: { label: 'Bottom Right', value: 10, max: 100 }, + bottomLeft: { label: 'Bottom Left', value: 10, max: 100 }, + }; + + const cssOutput = generateCSSOutput(borders, 1, 'solid', 'px'); + + expect(cssOutput).toEqual('border: 1px solid #000000; border-radius: 10px 10px 10px 10px;'); + }); + + it('generates correct CSS with custom values', () => { + const borders: Borders = { + topLeft: { label: 'Top Left', value: 20, max: 100 }, + topRight: { label: 'Top Right', value: 15, max: 100 }, + bottomRight: { label: 'Bottom Right', value: 5, max: 100 }, + bottomLeft: { label: 'Bottom Left', value: 25, max: 100 }, + }; + + const cssOutput = generateCSSOutput(borders, 2, 'dashed', '%'); + + expect(cssOutput).toEqual('border: 2px dashed #000000; border-radius: 20% 15% 5% 25%;'); + }); + + it('throws an error when borders are missing', () => { + const borders = {} as Borders; + + expect(() => generateCSSOutput(borders, 1, 'solid', 'px')).toThrowError(); + }); + }); +}); diff --git a/src/tools/border-generator/border-generator.service.ts b/src/tools/border-generator/border-generator.service.ts new file mode 100644 index 00000000..56d6db67 --- /dev/null +++ b/src/tools/border-generator/border-generator.service.ts @@ -0,0 +1,15 @@ +export interface Border { + label: string + value: number + max: number +} + +export interface Borders { + [key: string]: Border +} + +// Asegúrate de que esta función esté correctamente exportada +export function generateCSSOutput(borders: Borders, borderWidth: number, borderStyle: string, unit: string): string { + const { topLeft, topRight, bottomRight, bottomLeft } = borders; + return `border: ${borderWidth}px ${borderStyle} #000000; border-radius: ${topLeft.value}${unit} ${topRight.value}${unit} ${bottomRight.value}${unit} ${bottomLeft.value}${unit};`; +} diff --git a/src/tools/border-generator/border-generator.vue b/src/tools/border-generator/border-generator.vue new file mode 100644 index 00000000..e32bbae7 --- /dev/null +++ b/src/tools/border-generator/border-generator.vue @@ -0,0 +1,214 @@ + + + + + diff --git a/src/tools/border-generator/index.ts b/src/tools/border-generator/index.ts new file mode 100644 index 00000000..97a95e45 --- /dev/null +++ b/src/tools/border-generator/index.ts @@ -0,0 +1,12 @@ +import { Square } from '@vicons/tabler'; +import { defineTool } from '../tool'; + +export const tool = defineTool({ + name: 'Border Generator', + path: '/border-generator', + description: 'Generate a complete CSS border properties.', + keywords: ['border', 'generator', 'css'], + component: () => import('./border-generator.vue'), + icon: Square, + createdAt: new Date('2024-09-06'), +}); diff --git a/src/tools/index.ts b/src/tools/index.ts index 388cfaf4..d0715e84 100644 --- a/src/tools/index.ts +++ b/src/tools/index.ts @@ -1,6 +1,7 @@ import { tool as base64FileConverter } from './base64-file-converter'; import { tool as base64StringConverter } from './base64-string-converter'; import { tool as basicAuthGenerator } from './basic-auth-generator'; +import { tool as borderGenerator } from './border-generator'; import { tool as emailNormalizer } from './email-normalizer'; import { tool as asciiTextDrawer } from './ascii-text-drawer'; @@ -91,7 +92,19 @@ import { tool as yamlViewer } from './yaml-viewer'; export const toolsByCategory: ToolCategory[] = [ { name: 'Crypto', - components: [tokenGenerator, hashText, bcrypt, uuidGenerator, ulidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator, passwordStrengthAnalyser, pdfSignatureChecker], + components: [ + tokenGenerator, + hashText, + bcrypt, + uuidGenerator, + ulidGenerator, + cypher, + bip39, + hmacGenerator, + rsaKeyPairGenerator, + passwordStrengthAnalyser, + pdfSignatureChecker, + ], }, { name: 'Converter', @@ -137,6 +150,7 @@ export const toolsByCategory: ToolCategory[] = [ httpStatusCodes, jsonDiff, safelinkDecoder, + borderGenerator, ], }, { @@ -164,7 +178,14 @@ export const toolsByCategory: ToolCategory[] = [ }, { name: 'Network', - components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, macAddressGenerator, ipv6UlaGenerator], + components: [ + ipv4SubnetCalculator, + ipv4AddressConverter, + ipv4RangeExpander, + macAddressLookup, + macAddressGenerator, + ipv6UlaGenerator, + ], }, { name: 'Math', @@ -194,5 +215,5 @@ export const toolsByCategory: ToolCategory[] = [ export const tools = toolsByCategory.flatMap(({ components }) => components); export const toolsWithCategory = toolsByCategory.flatMap(({ components, name }) => - components.map(tool => ({ category: name, ...tool })), + components.map(tool => ({ ...tool, category: name })), );