From 52df553294c9b8fd7cb4662eab2538e2a466ba54 Mon Sep 17 00:00:00 2001
From: Adrian Ortiz <desarrollador3@en-trega.com>
Date: Sat, 7 Sep 2024 11:36:53 -0600
Subject: [PATCH] feature: add border generator module.

---
 .../border-generator.e2e.spec.ts              |  15 ++
 .../border-generator.service.test.ts          |   6 +
 .../border-generator.service.ts               |  15 ++
 .../border-generator/border-generator.vue     | 214 ++++++++++++++++++
 src/tools/border-generator/index.ts           |  13 ++
 src/tools/index.ts                            |  27 ++-
 6 files changed, 287 insertions(+), 3 deletions(-)
 create mode 100644 src/tools/border-generator/border-generator.e2e.spec.ts
 create mode 100644 src/tools/border-generator/border-generator.service.test.ts
 create mode 100644 src/tools/border-generator/border-generator.service.ts
 create mode 100644 src/tools/border-generator/border-generator.vue
 create mode 100644 src/tools/border-generator/index.ts

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..8c09252f
--- /dev/null
+++ b/src/tools/border-generator/border-generator.e2e.spec.ts
@@ -0,0 +1,15 @@
+import { test, expect } 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');
+  });
+
+  test('', async ({ page }) => {
+
+  });
+});
\ No newline at end of file
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..6bcfc44c
--- /dev/null
+++ b/src/tools/border-generator/border-generator.service.test.ts
@@ -0,0 +1,6 @@
+import { expect, describe, it } from 'vitest';
+// import { } from './border-generator.service';
+//
+// describe('border-generator', () => {
+//
+// })
\ No newline at end of file
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..2ab77ee2
--- /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..f14d46d2
--- /dev/null
+++ b/src/tools/border-generator/border-generator.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="container">
+    <div class="square" :style="styleObject"></div>
+
+    <n-card title="Border Radius and Style Editor" class="controls">
+      <n-form>
+        <n-form-item label="Units">
+          <n-select v-model:value="unit" :options="unitOptions" @update:value="updateCSSOutput" />
+        </n-form-item>
+
+        <div class="radius-controls">
+          <n-form-item label="Top Left" class="half-slider">
+            <n-slider
+              :min="0"
+              :max="borders.topLeft.max"
+              v-model:value="borders.topLeft.value"
+              @update:value="updateCSSOutput"
+              :step="1"
+            />
+            <span>{{ borders.topLeft.value + unit }}</span>
+          </n-form-item>
+          <n-form-item label="Top Right" class="half-slider">
+            <n-slider
+              :min="0"
+              :max="borders.topRight.max"
+              v-model:value="borders.topRight.value"
+              @update:value="updateCSSOutput"
+              :step="1"
+            />
+            <span>{{ borders.topRight.value + unit }}</span>
+          </n-form-item>
+        </div>
+        <div class="radius-controls">
+          <n-form-item label="Bottom Left" class="half-slider">
+            <n-slider
+              :min="0"
+              :max="borders.bottomLeft.max"
+              v-model:value="borders.bottomLeft.value"
+              @update:value="updateCSSOutput"
+              :step="1"
+            />
+            <span>{{ borders.bottomLeft.value + unit }}</span>
+          </n-form-item>
+          <n-form-item label="Bottom Right" class="half-slider">
+            <n-slider
+              :min="0"
+              :max="borders.bottomRight.max"
+              v-model:value="borders.bottomRight.value"
+              @update:value="updateCSSOutput"
+              :step="1"
+            />
+            <span>{{ borders.bottomRight.value + unit }}</span>
+          </n-form-item>
+        </div>
+        <div class="border-controls">
+          <n-form-item label="Border Width" class="border-width-slider">
+            <n-slider :min="0" :max="100" v-model:value="borderWidth" @update:value="updateCSSOutput" :step="1" />
+            <span>{{ borderWidth + 'px' }}</span>
+          </n-form-item>
+          <n-form-item label="Border Style" class="border-style-select">
+            <n-select v-model:value="borderStyle" :options="borderStyles" @update:value="updateCSSOutput" />
+          </n-form-item>
+        </div>
+
+        <n-form-item label="Border Color">
+          <n-color-picker v-model:value="borderColor" @update:value="updateCSSOutput" />
+        </n-form-item>
+
+        <n-form-item label="CSS Properties">
+          <TextareaCopyable :value="cssOutput" language="css" />
+        </n-form-item>
+      </n-form>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed } from 'vue';
+import { NSlider, NForm, NFormItem, NSelect, NCard, NColorPicker } from 'naive-ui';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+import { Borders } from './border-radius-viewer.service';
+
+export default defineComponent({
+  name: 'BorderRadiusViewer',
+  components: {
+    NSlider,
+    NForm,
+    NFormItem,
+    NSelect,
+    NCard,
+    NColorPicker,
+    TextareaCopyable,
+  },
+  setup() {
+    const borders = ref<Borders>({
+      topLeft: { label: 'Top Left', value: 0, max: 100 },
+      topRight: { label: 'Top Right', value: 0, max: 100 },
+      bottomLeft: { label: 'Bottom Left', value: 0, max: 100 },
+      bottomRight: { label: 'Bottom Right', value: 0, max: 100 },
+    });
+    const unit = ref('px');
+    const borderWidth = ref<number>(0);
+    const borderStyle = ref('solid');
+    const borderColor = ref('#000000');
+    const unitOptions = [
+      { label: 'Pixels (px)', value: 'px' },
+      { label: 'Percentage (%)', value: '%' },
+    ];
+    const borderStyles = [
+      { label: 'Solid', value: 'solid' },
+      { label: 'Dashed', value: 'dashed' },
+      { label: 'Dotted', value: 'dotted' },
+      { label: 'Double', value: 'double' },
+      { label: 'Groove', value: 'groove' },
+      { label: 'Ridge', value: 'ridge' },
+      { label: 'Inset', value: 'inset' },
+      { label: 'Outset', value: 'outset' },
+      { label: 'None', value: 'none' },
+    ];
+
+    const styleObject = computed(() => ({
+      border: `${borderWidth.value}px ${borderStyle.value} ${borderColor.value}`,
+      borderRadius: `${borders.value.topLeft.value}${unit.value} ${borders.value.topRight.value}${unit.value} ${borders.value.bottomRight.value}${unit.value} ${borders.value.bottomLeft.value}${unit.value}`,
+    }));
+
+    const cssOutput = computed(
+      () =>
+        `border: ${borderWidth.value}px ${borderStyle.value} ${borderColor.value};\nborder-radius: ${borders.value.topLeft.value}${unit.value} ${borders.value.topRight.value}${unit.value} ${borders.value.bottomRight.value}${unit.value} ${borders.value.bottomLeft.value}${unit.value};`,
+    );
+
+    function updateCSSOutput() {
+      // Forces update computed properties
+    }
+
+    return {
+      borders,
+      unit,
+      borderWidth,
+      borderStyle,
+      borderColor,
+      unitOptions,
+      borderStyles,
+      cssOutput,
+      updateCSSOutput,
+      styleObject,
+    };
+  },
+});
+</script>
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.square {
+  width: 250px;
+  height: 250px;
+  background-color: #f3f3f3;
+}
+
+.controls {
+  width: 100%;
+}
+
+.radius-controls,
+.border-controls {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  gap: 20px;
+}
+
+.half-slider,
+.border-width-slider {
+  position: relative;
+  padding: 10px 0;
+  width: 60%;
+}
+
+.half-slider span,
+.border-width-slider span {
+  position: absolute;
+  right: 0;
+  top: 30px;
+  background-color: #fff;
+  padding: 2px 6px;
+  border-radius: 5px;
+  font-size: 0.9em;
+  color: #333;
+}
+
+.border-style-select {
+  width: 30%;
+}
+
+n-slider {
+  width: calc(100% - 60px);
+}
+
+.controls .n-form-item__label {
+  min-width: 70px;
+  text-align: right;
+}
+
+n-select,
+n-color-picker {
+  width: 100%;
+}
+</style>
+
diff --git a/src/tools/border-generator/index.ts b/src/tools/border-generator/index.ts
new file mode 100644
index 00000000..dcb371c8
--- /dev/null
+++ b/src/tools/border-generator/index.ts
@@ -0,0 +1,13 @@
+import { Square } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Border Generator',
+  path: '/border-radius-viewer',
+  description: 'Generate a complete CSS border properties.',
+  keywords: ['border', 'radius', 'viewer'],
+  component: () => import('./border-radius-viewer.vue'),
+  icon: Square,
+  createdAt: new Date('2024-09-06'),
+});
+
diff --git a/src/tools/index.ts b/src/tools/index.ts
index c9003fe8..c0de1f7c 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';
@@ -89,7 +90,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',
@@ -135,6 +148,7 @@ export const toolsByCategory: ToolCategory[] = [
       httpStatusCodes,
       jsonDiff,
       safelinkDecoder,
+      borderGenerator,
     ],
   },
   {
@@ -160,7 +174,14 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Network',
-    components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, macAddressGenerator, ipv6UlaGenerator],
+    components: [
+      ipv4SubnetCalculator,
+      ipv4AddressConverter,
+      ipv4RangeExpander,
+      macAddressLookup,
+      macAddressGenerator,
+      ipv6UlaGenerator,
+    ],
   },
   {
     name: 'Math',
@@ -190,5 +211,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) => ({ category: name, ...tool })),
 );