mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-04-22 07:46:15 -04:00
fix
This commit is contained in:
Adrian Ortiz
parent
45a87ce157
commit
e540a82d98
3 changed files with 82 additions and 86 deletions
|
|
@ -1,4 +1,4 @@
|
||||||
import { test, expect } from '@playwright/test';
|
import { expect, test } from '@playwright/test';
|
||||||
|
|
||||||
test.describe('Tool - Border generator', () => {
|
test.describe('Tool - Border generator', () => {
|
||||||
test.beforeEach(async ({ page }) => {
|
test.beforeEach(async ({ page }) => {
|
||||||
|
|
@ -8,8 +8,4 @@ test.describe('Tool - Border generator', () => {
|
||||||
test('Has correct title', async ({ page }) => {
|
test('Has correct title', async ({ page }) => {
|
||||||
await expect(page).toHaveTitle('Border generator - IT Tools');
|
await expect(page).toHaveTitle('Border generator - IT Tools');
|
||||||
});
|
});
|
||||||
|
|
||||||
test('', async ({ page }) => {
|
|
||||||
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import { expect, describe, it } from 'vitest';
|
// import { expect, describe, it } from 'vitest';
|
||||||
// import { } from './border-generator.service';
|
// import { } from './border-generator.service';
|
||||||
//
|
//
|
||||||
// describe('border-generator', () => {
|
// describe('border-generator', () => {
|
||||||
|
|
|
||||||
|
|
@ -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">
|
<script lang="ts">
|
||||||
import { defineComponent, ref, computed } from 'vue';
|
import { defineComponent, ref, computed } from 'vue';
|
||||||
import { NSlider, NForm, NFormItem, NSelect, NCard, NColorPicker } from 'naive-ui';
|
import { NSlider, NForm, NFormItem, NSelect, NCard, NColorPicker } from 'naive-ui';
|
||||||
import TextareaCopyable from '@/components/TextareaCopyable.vue';
|
import TextareaCopyable from '@/components/TextareaCopyable.vue';
|
||||||
import { Borders } from './border-generator.service';
|
import { Borders } from './border-generator.service';
|
||||||
|
import { generateCSSOutput } from './border-generator.service';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'BorderRadiusViewer',
|
name: 'BorderRadiusViewer',
|
||||||
|
|
@ -117,7 +42,6 @@ export default defineComponent({
|
||||||
{ label: 'Outset', value: 'outset' },
|
{ label: 'Outset', value: 'outset' },
|
||||||
{ label: 'None', value: 'none' },
|
{ label: 'None', value: 'none' },
|
||||||
];
|
];
|
||||||
|
|
||||||
const styleObject = computed(() => ({
|
const styleObject = computed(() => ({
|
||||||
border: `${borderWidth.value}px ${borderStyle.value} ${borderColor.value}`,
|
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}`,
|
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(
|
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() {
|
function updateCSSOutput() {
|
||||||
|
|
@ -211,3 +136,78 @@ n-color-picker {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue