mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-25 17:26:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(ui): getting ride of naive ui buttons

Browse source
This commit is contained in:
Corentin Thomasset 2023-04-19 21:38:59 +02:00 • committed by Corentin THOMASSET
parent df989e24b3
commit c45bce36f9
44 changed files with 738 additions and 204 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/tools/base64-file-converter/base64-file-converter.vue
View file

@ -8,9 +8,9 @@
<n-input v-model:value="base64Input" type="textarea" placeholder="Put your base64 file string here..." rows="5" />
</n-form-item>
<n-space justify="center">
<n-button :disabled="base64Input === '' || !base64InputValidation.isValid" secondary @click="downloadFile()">
<c-button :disabled="base64Input === '' || !base64InputValidation.isValid" @click="downloadFile()">
Download file
</n-button>
</c-button>
</n-space>
</n-card>
@ -26,7 +26,7 @@
<n-input :value="fileBase64" type="textarea" readonly placeholder="File in base64 will be here" />
<n-space justify="center">
<n-button secondary @click="copyFileBase64()"> Copy </n-button>
<c-button @click="copyFileBase64()"> Copy </c-button>
</n-space>
</n-card>
</template>

4
src/tools/base64-string-converter/base64-string-converter.vue
View file

@ -15,7 +15,7 @@
</n-form-item>
<n-space justify="center">
<n-button secondary @click="copyTextBase64()"> Copy base64 </n-button>
<c-button @click="copyTextBase64()"> Copy base64 </c-button>
</n-space>
</n-card>
@ -29,7 +29,7 @@
</n-form-item>
<n-space justify="center">
<n-button secondary @click="copyText()"> Copy decoded string </n-button>
<c-button @click="copyText()"> Copy decoded string </c-button>
</n-space>
</n-card>
</template>

2
src/tools/basic-auth-generator/basic-auth-generator.vue
View file

@ -23,7 +23,7 @@
</n-card>
<br />
<n-space justify="center">
<n-button secondary @click="copy">Copy header</n-button>
<c-button @click="copy">Copy header</c-button>
</n-space>
</div>
</template>

2
src/tools/bcrypt/bcrypt.vue
View file

@ -18,7 +18,7 @@
</n-form>
<br />
<n-space justify="center">
<n-button secondary @click="copy"> Copy hash </n-button>
<c-button @click="copy"> Copy hash </c-button>
</n-space>
</n-card>

28
src/tools/benchmark-builder/benchmark-builder.vue
View file

@ -14,18 +14,17 @@
</n-card>
<n-space justify="center">
<n-button v-if="suites.length > 1" quaternary @click="suites.splice(index, 1)">
<template #icon>
<n-icon :component="Trash" depth="3" />
</template>
<c-button v-if="suites.length > 1" variant="text" @click="suites.splice(index, 1)">
<n-icon :component="Trash" depth="3" mr-2 size="18" />
Delete suite
</n-button>
<n-button quaternary @click="suites.splice(index + 1, 0, { data: [0], title: `Suite ${suites.length + 1}` })">
<template #icon>
<n-icon :component="Plus" depth="3" />
</template>
</c-button>
<c-button
variant="text"
@click="suites.splice(index + 1, 0, { data: [0], title: `Suite ${suites.length + 1}` })"
>
<n-icon :component="Plus" depth="3" mr-2 size="18" />
Add suite
</n-button>
</c-button>
</n-space>
</div>
</n-space>
@ -39,15 +38,14 @@
<n-input v-model:value="unit" placeholder="Unit (eg: ms)" />
</n-form-item>
<n-button
tertiary
<c-button
@click="
suites = [
{ title: 'Suite 1', data: [] },
{ title: 'Suite 2', data: [] },
]
"
>Reset suites</n-button
>Reset suites</c-button
>
</n-space>
@ -73,8 +71,8 @@
</n-table>
<br />
<n-space justify="center">
<n-button tertiary @click="copyAsMarkdown">Copy as markdown table</n-button>
<n-button tertiary @click="copyAsBulletList">Copy as bullet list</n-button>
<c-button @click="copyAsMarkdown">Copy as markdown table</c-button>
<c-button @click="copyAsBulletList">Copy as bullet list</c-button>
</n-space>
</div>
</div>

16
src/tools/benchmark-builder/dynamic-values.vue
View file

@ -11,22 +11,18 @@
/>
<n-tooltip>
<template #trigger>
<n-button circle quaternary @click="values.splice(index, 1)">
<template #icon>
<n-icon :component="Trash" depth="3" />
</template>
</n-button>
<c-button circle variant="text" @click="values.splice(index, 1)">
<n-icon :component="Trash" depth="3" size="18" />
</c-button>
</template>
Delete value
</n-tooltip>
</n-space>
<n-button tertiary @click="addValue">
<template #icon>
<n-icon :component="Plus" />
</template>
<c-button @click="addValue">
<n-icon :component="Plus" depth="3" mr-2 size="18" />
Add a measure
</n-button>
</c-button>
</div>
</template>

12
src/tools/bip39-generator/bip39-generator.vue
View file

@ -18,16 +18,16 @@
>
<n-input-group>
<n-input v-model:value="entropy" placeholder="Your string..." />
<n-button @click="refreshEntropy">
<c-button @click="refreshEntropy">
<n-icon size="22">
<Refresh />
</n-icon>
</n-button>
<n-button @click="copyEntropy">
</c-button>
<c-button @click="copyEntropy">
<n-icon size="22">
<Copy />
</n-icon>
</n-button>
</c-button>
</n-input-group>
</n-form-item>
</n-gi>
@ -48,9 +48,9 @@
spellcheck="false"
/>
<n-button @click="copyPassphrase">
<c-button @click="copyPassphrase">
<n-icon size="22" :component="Copy" />
</n-button>
</c-button>
</n-input-group>
</n-form-item>
</n-card>

6
src/tools/chronometer/chronometer.vue
View file

@ -5,10 +5,10 @@
</n-card>
<br />
<n-space justify="center">
<n-button v-if="!isRunning" secondary type="primary" @click="resume">Start</n-button>
<n-button v-else secondary type="warning" @click="pause">Stop</n-button>
<c-button v-if="!isRunning" secondary type="primary" @click="resume">Start</c-button>
<c-button v-else secondary type="warning" @click="pause">Stop</c-button>
<n-button secondary @click="counter = 0">Reset</n-button>
<c-button @click="counter = 0">Reset</c-button>
</n-space>
</div>
</template>

2
src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue
View file

@ -16,7 +16,7 @@
<br />
<br />
<n-space justify="center">
<n-button :disabled="dockerCompose === ''" secondary @click="download"> Download docker-compose.yml </n-button>
<c-button :disabled="dockerCompose === ''" secondary @click="download"> Download docker-compose.yml </c-button>
</n-space>
<div v-if="notComposable.length > 0">

2
src/tools/hmac-generator/hmac-generator.vue
View file

@ -43,7 +43,7 @@
<n-input readonly :value="hmac" type="textarea" placeholder="The result of the HMAC..." />
</n-form-item>
<n-space justify="center">
<n-button secondary @click="copy()">Copy HMAC</n-button>
<c-button @click="copy()">Copy HMAC</c-button>
</n-space>
</div>
</template>

4
src/tools/html-entities/html-entities.vue
View file

@ -20,7 +20,7 @@
</n-form-item>
<n-space justify="center">
<n-button secondary @click="copyEscaped"> Copy </n-button>
<c-button @click="copyEscaped"> Copy </c-button>
</n-space>
</n-card>
<n-card title="Unescape html entities">
@ -44,7 +44,7 @@
</n-form-item>
<n-space justify="center">
<n-button secondary @click="copyUnescaped"> Copy </n-button>
<c-button @click="copyUnescaped"> Copy </c-button>
</n-space>
</n-card>
</template>

8
src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue
View file

@ -1,11 +1,9 @@
<template>
<n-tooltip trigger="hover">
<template #trigger>
<n-button circle quaternary :type="isActive?.() ? 'primary' : 'default'" @click="action">
<template #icon>
<n-icon :component="icon" />
</template>
</n-button>
<c-button circle variant="text" :type="isActive?.() ? 'primary' : 'default'" @click="action">
<n-icon :component="icon" />
</c-button>
</template>
{{ title }}

10
src/tools/ipv4-range-expander/ipv4-range-expander.vue
View file

@ -39,10 +39,10 @@
The end IPv4 address is lower than the start IPv4 address. This is not valid and no result could be
calculated. In the most cases the solution to solve this problem is to change start and end address.
</n-text>
<n-button quaternary @click="onSwitchStartEndClicked">
<n-icon :component="ChangeCircleOutlined" />
&nbsp;&nbsp;Switch start and end IPv4 address
</n-button>
<c-button @click="onSwitchStartEndClicked">
<n-icon mr-2 :component="Exchange" depth="3" size="22" />
Switch start and end IPv4 address
</c-button>
</n-space>
</n-alert>
</div>
@ -52,7 +52,7 @@
<script setup lang="ts">
import { useValidation } from '@/composable/validation';
import { ChangeCircleOutlined } from '@vicons/material';
import { Exchange } from '@vicons/tabler';
import { isValidIpv4 } from '../ipv4-address-converter/ipv4-address-converter.service';
import type { Ipv4RangeExpanderResult } from './ipv4-range-expander.types';
import { calculateCidr } from './ipv4-range-expander.service';

8
src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue
View file

@ -20,14 +20,14 @@
</n-table>
<n-space style="margin-top: 14px" justify="space-between">
<n-button tertiary @click="switchToBlock({ count: -1 })">
<c-button @click="switchToBlock({ count: -1 })">
<n-icon :component="ArrowLeft" />
Previous block
</n-button>
<n-button tertiary @click="switchToBlock({ count: 1 })">
</c-button>
<c-button @click="switchToBlock({ count: 1 })">
Next block
<n-icon :component="ArrowRight" />
</n-button>
</c-button>
</n-space>
</div>
</div>

2
src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue
View file

@ -22,7 +22,7 @@
<br />
<br />
<n-space justify="center">
<n-button secondary autofocus @click="copy"> Copy </n-button>
<c-button autofocus @click="copy"> Copy </c-button>
</n-space>
</n-card>
</template>

2
src/tools/mac-address-lookup/mac-address-lookup.vue
View file

@ -24,7 +24,7 @@
</n-form-item>
<n-space justify="center">
<n-button :disabled="!details" tertiary> Copy vendor info </n-button>
<c-button :disabled="!details"> Copy vendor info </c-button>
</n-space>
</div>
</template>

6
src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
View file

@ -5,9 +5,9 @@
<template #suffix>
<n-tooltip trigger="hover">
<template #trigger>
<n-button quaternary circle @click="refreshSecret">
<c-button circle variant="text" @click="refreshSecret">
<n-icon :component="Refresh" />
</n-button>
</c-button>
</template>
Generate secret token
</n-tooltip>
@ -23,7 +23,7 @@
</div>
<n-space justify="center" vertical align="center" style="margin-top: 10px">
<n-image :src="qrcode"></n-image>
<n-button secondary tag="a" :href="keyUri" target="_blank">Open Key URI in new tab</n-button>
<c-button :href="keyUri" target="_blank">Open Key URI in new tab</c-button>
</n-space>
</div>
<div style="max-width: 350px">

17
src/tools/otp-code-generator-and-validator/token-display.vue
View file

@ -8,31 +8,30 @@
<n-input-group>
<n-tooltip trigger="hover" placement="bottom">
<template #trigger>
<n-button data-test-id="previous-otp" secondary @click.prevent="copyPrevious(tokens.previous)">{{
tokens.previous
}}</n-button>
<c-button important:h-12 data-test-id="previous-otp" @click.prevent="copyPrevious(tokens.previous)">
{{ tokens.previous }}
</c-button>
</template>
<div>{{ previousCopied ? 'Copied !' : 'Copy previous OTP' }}</div>
</n-tooltip>
<n-tooltip trigger="hover" placement="bottom">
<template #trigger>
<n-button
tertiary
type="primary"
<c-button
data-test-id="current-otp"
class="current-otp"
important:h-12
@click.prevent="copyCurrent(tokens.current)"
>
{{ tokens.current }}
</n-button>
</c-button>
</template>
<div>{{ currentCopied ? 'Copied !' : 'Copy current OTP' }}</div>
</n-tooltip>
<n-tooltip trigger="hover" placement="bottom">
<template #trigger>
<n-button secondary data-test-id="next-otp" @click.prevent="copyNext(tokens.next)">{{
<c-button important:h-12 data-test-id="next-otp" @click.prevent="copyNext(tokens.next)">{{
tokens.next
}}</n-button>
}}</c-button>
</template>
<div>{{ nextCopied ? 'Copied !' : 'Copy next OTP' }}</div>
</n-tooltip>

2
src/tools/qr-code-generator/qr-code-generator.vue
View file

@ -28,7 +28,7 @@
<n-gi>
<n-space justify="center" align="center" vertical>
<n-image :src="qrcode" width="200" />
<n-button secondary @click="download"> Download qr-code </n-button>
<c-button @click="download"> Download qr-code </c-button>
</n-space>
</n-gi>
</n-grid>

4
src/tools/random-port-generator/random-port-generator.vue
View file

@ -4,8 +4,8 @@
{{ port }}
</div>
<n-space justify="center">
<n-button secondary @click="copy"> Copy </n-button>
<n-button secondary @click="refreshPort"> Refresh </n-button>
<c-button @click="copy"> Copy </c-button>
<c-button @click="refreshPort"> Refresh </c-button>
</n-space>
</n-card>
</template>

8
src/tools/roman-numeral-converter/roman-numeral-converter.vue
View file

@ -8,9 +8,9 @@
<div class="result">
{{ outputRoman }}
</div>
<n-button secondary autofocus :disabled="validationNumeral.validationStatus === 'error'" @click="copyRoman">
<c-button autofocus :disabled="validationNumeral.validationStatus === 'error'" @click="copyRoman">
Copy
</n-button>
</c-button>
</n-space>
</n-card>
<br />
@ -22,9 +22,7 @@
<div class="result">
{{ outputNumeral }}
</div>
<n-button secondary autofocus :disabled="validationRoman.validationStatus === 'error'" @click="copyArabic">
Copy
</n-button>
<c-button :disabled="validationRoman.validationStatus === 'error'" @click="copyArabic"> Copy </c-button>
</n-space>
</n-card>
</div>

2
src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue
View file

@ -5,7 +5,7 @@
<n-input-number v-model:value="bits" min="256" max="16384" step="8" />
</n-form-item>
<n-button tertiary @click="refreshCerts">Refresh key-pair</n-button>
<c-button @click="refreshCerts">Refresh key-pair</c-button>
</n-space>
</div>

2
src/tools/slugify-string/slugify-string.vue
View file

@ -14,7 +14,7 @@
</n-form-item>
<n-space justify="center">
<n-button secondary :disabled="slug.length === 0" @click="copy">Copy slug</n-button>
<c-button :disabled="slug.length === 0" @click="copy">Copy slug</c-button>
</n-space>
</div>
</template>

6
src/tools/svg-placeholder-generator/svg-placeholder-generator.vue
View file

@ -38,9 +38,9 @@
</n-form-item>
<n-space justify="center">
<n-button secondary @click="copySVG()">Copy svg</n-button>
<n-button secondary @click="copyBase64()">Copy base64</n-button>
<n-button secondary @click="download()">Download svg</n-button>
<c-button @click="copySVG()">Copy svg</c-button>
<c-button @click="copyBase64()">Copy base64</c-button>
<c-button @click="download()">Download svg</c-button>
</n-space>
</div>

2
src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue
View file

@ -11,7 +11,7 @@
</n-card>
<n-space justify="center">
<n-button secondary autofocus @click="copy"> Copy NATO string </n-button>
<c-button autofocus @click="copy"> Copy NATO string </c-button>
</n-space>
</n-space>
</div>

4
src/tools/token-generator/token-generator.tool.vue
View file

@ -44,8 +44,8 @@
<br />
<br />
<n-space justify="center">
<n-button secondary autofocus @click="copy"> Copy </n-button>
<n-button secondary @click="refreshToken"> Refresh </n-button>
<c-button @click="copy"> Copy </c-button>
<c-button @click="refreshToken"> Refresh </c-button>
</n-space>
</n-card>
</div>

4
src/tools/url-encoder/url-encoder.vue
View file

@ -24,7 +24,7 @@
</n-form-item>
<n-space justify="center">
<n-button secondary @click="copyEncoded"> Copy </n-button>
<c-button @click="copyEncoded"> Copy </c-button>
</n-space>
</n-card>
<n-card title="Decode">
@ -52,7 +52,7 @@
</n-form-item>
<n-space justify="center">
<n-button secondary @click="copyDecoded"> Copy </n-button>
<c-button @click="copyDecoded"> Copy </c-button>
</n-space>
</n-card>
</template>

4
src/tools/uuid-generator/uuid-generator.vue
View file

@ -19,8 +19,8 @@
/>
<n-space justify="center">
<n-button secondary autofocus @click="copy"> Copy </n-button>
<n-button secondary @click="refreshUUIDs"> Refresh </n-button>
<c-button autofocus @click="copy"> Copy </c-button>
<c-button @click="refreshUUIDs"> Refresh </c-button>
</n-space>
</n-space>
</template>