From e540a82d98872fd244eebf4cca66161ccee676f8 Mon Sep 17 00:00:00 2001
From: Adrian Ortiz <desarrollador3@en-trega.com>
Date: Sat, 7 Sep 2024 12:32:51 -0600
Subject: [PATCH] fix

---
 .../border-generator.e2e.spec.ts              |   8 +-
 .../border-generator.service.test.ts          |   4 +-
 .../border-generator/border-generator.vue     | 156 +++++++++---------
 3 files changed, 82 insertions(+), 86 deletions(-)

diff --git a/src/tools/border-generator/border-generator.e2e.spec.ts b/src/tools/border-generator/border-generator.e2e.spec.ts
index 8c09252f..2e3bee70 100644
--- a/src/tools/border-generator/border-generator.e2e.spec.ts
+++ b/src/tools/border-generator/border-generator.e2e.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 test.describe('Tool - Border generator', () => {
   test.beforeEach(async ({ page }) => {
@@ -8,8 +8,4 @@ test.describe('Tool - 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
index 6bcfc44c..20c54344 100644
--- a/src/tools/border-generator/border-generator.service.test.ts
+++ b/src/tools/border-generator/border-generator.service.test.ts
@@ -1,6 +1,6 @@
-import { expect, describe, it } from 'vitest';
+// 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.vue b/src/tools/border-generator/border-generator.vue
index 9fe836f2..c8181444 100644
--- a/src/tools/border-generator/border-generator.vue
+++ b/src/tools/border-generator/border-generator.vue
@@ -1,84 +1,9 @@
-<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-generator.service';
+import { generateCSSOutput } from './border-generator.service';
 
 export default defineComponent({
   name: 'BorderRadiusViewer',
@@ -117,7 +42,6 @@ export default defineComponent({
       { 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}`,
@@ -125,7 +49,8 @@ export default defineComponent({
 
     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};`,
+        `border: ${borderWidth.value}px ${borderStyle.value} ${borderColor.value};
+border-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() {
@@ -211,3 +136,78 @@ n-color-picker {
   width: 100%;
 }
 </style>
+<template>
+  <div class="container">
+    <div class="square" :style="styleObject"></div>
+
+    <NCard title="Border Radius and Style Editor" class="controls">
+      <NForm>
+        <NFormItem label="Units">
+          <NSelect v-model:value="unit" :options="unitOptions" @update:value="updateCSSOutput" />
+        </NFormItem>
+
+        <div class="radius-controls">
+          <NFormItem label="Top Left" class="half-slider">
+            <NSlider
+              v-model:value="borders.topLeft.value"
+              :min="0"
+              :max="borders.topLeft.max"
+              :step="1"
+              @update:value="updateCSSOutput"
+            />
+            <span>{{ borders.topLeft.value + unit }}</span>
+          </NFormItem>
+          <NFormItem label="Top Right" class="half-slider">
+            <NSlider
+              v-model:value="borders.topRight.value"
+              :min="0"
+              :max="borders.topRight.max"
+              :step="1"
+              @update:value="updateCSSOutput"
+            />
+            <span>{{ borders.topRight.value + unit }}</span>
+          </NFormItem>
+        </div>
+        <div class="radius-controls">
+          <NFormItem label="Bottom Left" class="half-slider">
+            <NSlider
+              v-model:value="borders.bottomLeft.value"
+              :min="0"
+              :max="borders.bottomLeft.max"
+              :step="1"
+              @update:value="updateCSSOutput"
+            />
+            <span>{{ borders.bottomLeft.value + unit }}</span>
+          </NFormItem>
+          <NFormItem label="Bottom Right" class="half-slider">
+            <NSlider
+              v-model:value="borders.bottomRight.value"
+              :min="0"
+              :max="borders.bottomRight.max"
+              :step="1"
+              @update:value="updateCSSOutput"
+            />
+            <span>{{ borders.bottomRight.value + unit }}</span>
+          </NFormItem>
+        </div>
+        <div class="border-controls">
+          <NFormItem label="Border Width" class="border-width-slider">
+            <NSlider v-model:value="borderWidth" :min="0" :max="100" :step="1" @update:value="updateCSSOutput" />
+            <span>{{ borderWidth + 'px' }}</span>
+          </NFormItem>
+          <NFormItem label="Border Style" class="border-style-select">
+            <NSelect v-model:value="borderStyle" :options="borderStyles" @update:value="updateCSSOutput" />
+          </NFormItem>
+        </div>
+
+        <NFormItem label="Border Color">
+          <NColorPicker v-model:value="borderColor" @update:value="updateCSSOutput" />
+        </NFormItem>
+
+        <NFormItem label="CSS Properties">
+          <TextareaCopyable :value="cssOutput" language="css" />
+        </NFormItem>
+      </NForm>
+    </NCard>
+  </div>
+</template>