mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-04-26 01:36:15 -04:00
refactor(style): updated linter config
This commit is contained in:
Corentin Thomasset
parent
39746e07c5
commit
6b58ec554a
27 changed files with 1144 additions and 571 deletions
|
|
@ -1,17 +1,39 @@
|
|||
<template>
|
||||
<n-card title="Text to base64">
|
||||
<n-input v-model:value="textInput" type="textarea" placeholder="Put your string here..." />
|
||||
<n-input :value="textBase64" type="textarea" readonly />
|
||||
<n-input
|
||||
v-model:value="textInput"
|
||||
type="textarea"
|
||||
placeholder="Put your string here..."
|
||||
/>
|
||||
<n-input
|
||||
:value="textBase64"
|
||||
type="textarea"
|
||||
readonly
|
||||
/>
|
||||
<n-space justify="center">
|
||||
<n-button @click="copyTextBase64()" secondary>Copy</n-button>
|
||||
<n-button
|
||||
secondary
|
||||
@click="copyTextBase64()"
|
||||
>
|
||||
Copy
|
||||
</n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
|
||||
<n-card title="File to base64">
|
||||
<n-upload :show-file-list="true" :on-before-upload="onUpload" list-type="image" v-model:file-list="fileList">
|
||||
<n-upload
|
||||
v-model:file-list="fileList"
|
||||
:show-file-list="true"
|
||||
:on-before-upload="onUpload"
|
||||
list-type="image"
|
||||
>
|
||||
<n-upload-dragger>
|
||||
<div style="margin-bottom: 12px">
|
||||
<n-icon size="35" :depth="3" :component="Upload" />
|
||||
<n-icon
|
||||
size="35"
|
||||
:depth="3"
|
||||
:component="Upload"
|
||||
/>
|
||||
</div>
|
||||
<n-text style="font-size: 14px">
|
||||
Click or drag a file to this area to upload
|
||||
|
|
@ -19,12 +41,20 @@
|
|||
</n-upload-dragger>
|
||||
</n-upload>
|
||||
|
||||
<n-input :value="fileBase64" type="textarea" readonly />
|
||||
<n-input
|
||||
:value="fileBase64"
|
||||
type="textarea"
|
||||
readonly
|
||||
/>
|
||||
<n-space justify="center">
|
||||
<n-button @click="copyFileBase64()" secondary>Copy</n-button>
|
||||
<n-button
|
||||
secondary
|
||||
@click="copyFileBase64()"
|
||||
>
|
||||
Copy
|
||||
</n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
|
|
@ -1,47 +1,69 @@
|
|||
<template>
|
||||
<div>
|
||||
<n-card>
|
||||
<n-grid cols="3" x-gap="12">
|
||||
<n-gi span="1">
|
||||
<n-form-item label="Language:">
|
||||
<n-select v-model:value="language"
|
||||
:options="Object.keys(languages).map(label => ({ label, value: label }))" />
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi span="2">
|
||||
<n-form-item label="Entropy (seed):" :feedback="entropyValidation.message"
|
||||
:validation-status="entropyValidation.status">
|
||||
<n-input-group>
|
||||
<n-input v-model:value="entropy" placeholder="Your string..." />
|
||||
<n-button @click="refreshEntropy">
|
||||
<n-icon size="22">
|
||||
<Refresh />
|
||||
</n-icon>
|
||||
</n-button>
|
||||
<n-button @click="copyEntropy">
|
||||
<n-icon size="22">
|
||||
<Copy />
|
||||
</n-icon>
|
||||
</n-button>
|
||||
</n-input-group>
|
||||
<div>
|
||||
<n-card>
|
||||
<n-grid
|
||||
cols="3"
|
||||
x-gap="12"
|
||||
>
|
||||
<n-gi span="1">
|
||||
<n-form-item label="Language:">
|
||||
<n-select
|
||||
v-model:value="language"
|
||||
:options="Object.keys(languages).map(label => ({ label, value: label }))"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi span="2">
|
||||
<n-form-item
|
||||
label="Entropy (seed):"
|
||||
:feedback="entropyValidation.message"
|
||||
:validation-status="entropyValidation.status"
|
||||
>
|
||||
<n-input-group>
|
||||
<n-input
|
||||
v-model:value="entropy"
|
||||
placeholder="Your string..."
|
||||
/>
|
||||
<n-button @click="refreshEntropy">
|
||||
<n-icon size="22">
|
||||
<Refresh />
|
||||
</n-icon>
|
||||
</n-button>
|
||||
<n-button @click="copyEntropy">
|
||||
<n-icon size="22">
|
||||
<Copy />
|
||||
</n-icon>
|
||||
</n-button>
|
||||
</n-input-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
<n-form-item
|
||||
label="Passphrase (mnemonic):"
|
||||
:feedback="mnemonicValidation.message"
|
||||
:validation-status="mnemonicValidation.status"
|
||||
>
|
||||
<n-input-group>
|
||||
<n-input
|
||||
v-model:value="passphrase"
|
||||
style="text-align: center; flex: 1;"
|
||||
placeholder="Your mnemonic..."
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
/>
|
||||
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
<n-form-item label="Passphrase (mnemonic):" :feedback="mnemonicValidation.message"
|
||||
:validation-status="mnemonicValidation.status">
|
||||
<n-input-group>
|
||||
<n-input style="text-align: center; flex: 1;" v-model:value="passphrase"
|
||||
placeholder="Your mnemonic..." autocomplete="off" autocorrect="off" autocapitalize="off"
|
||||
spellcheck="false" />
|
||||
|
||||
<n-button @click="copyPassphrase">
|
||||
<n-icon size="22" :component="Copy" />
|
||||
</n-button>
|
||||
</n-input-group>
|
||||
</n-form-item>
|
||||
</n-card>
|
||||
</div>
|
||||
<n-button @click="copyPassphrase">
|
||||
<n-icon
|
||||
size="22"
|
||||
:component="Copy"
|
||||
/>
|
||||
</n-button>
|
||||
</n-input-group>
|
||||
</n-form-item>
|
||||
</n-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
|
|
@ -1,30 +1,57 @@
|
|||
<template>
|
||||
<n-card>
|
||||
<n-form label-width="100" label-placement="left">
|
||||
<n-form
|
||||
label-width="100"
|
||||
label-placement="left"
|
||||
>
|
||||
<n-form-item label="color picker:">
|
||||
<n-color-picker v-model:value="hex" @update:value="(v: string) => onInputUpdated(v, 'hex')"
|
||||
placement="bottom-end" />
|
||||
<n-color-picker
|
||||
v-model:value="hex"
|
||||
placement="bottom-end"
|
||||
@update:value="(v: string) => onInputUpdated(v, 'hex')"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="color name:">
|
||||
<n-input v-model:value="name" :on-input="(v: string) => onInputUpdated(v, 'name')" />
|
||||
<n-input
|
||||
v-model:value="name"
|
||||
:on-input="(v: string) => onInputUpdated(v, 'name')"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="hex:">
|
||||
<n-input v-model:value="hex" :on-input="(v: string) => onInputUpdated(v, 'hex')" />
|
||||
<n-input
|
||||
v-model:value="hex"
|
||||
:on-input="(v: string) => onInputUpdated(v, 'hex')"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="rgb:">
|
||||
<n-input v-model:value="rgb" :on-input="(v: string) => onInputUpdated(v, 'rgb')" />
|
||||
<n-input
|
||||
v-model:value="rgb"
|
||||
:on-input="(v: string) => onInputUpdated(v, 'rgb')"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="hsl:">
|
||||
<n-input v-model:value="hsl" :on-input="(v: string) => onInputUpdated(v, 'hsl')" />
|
||||
<n-input
|
||||
v-model:value="hsl"
|
||||
:on-input="(v: string) => onInputUpdated(v, 'hsl')"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="hwb:">
|
||||
<n-input v-model:value="hwb" :on-input="(v: string) => onInputUpdated(v, 'hwb')" />
|
||||
<n-input
|
||||
v-model:value="hwb"
|
||||
:on-input="(v: string) => onInputUpdated(v, 'hwb')"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="lch:">
|
||||
<n-input v-model:value="lch" :on-input="(v: string) => onInputUpdated(v, 'lch')" />
|
||||
<n-input
|
||||
v-model:value="lch"
|
||||
:on-input="(v: string) => onInputUpdated(v, 'lch')"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="cmyk:">
|
||||
<n-input v-model:value="cmyk" :on-input="(v: string) => onInputUpdated(v, 'cmyk')" />
|
||||
<n-input
|
||||
v-model:value="cmyk"
|
||||
:on-input="(v: string) => onInputUpdated(v, 'cmyk')"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</n-card>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,16 @@
|
|||
<template>
|
||||
<n-card>
|
||||
<n-form-item class="cron" :show-label="false" :feedback="cronValidation.message"
|
||||
:validation-status="cronValidation.status">
|
||||
<n-input v-model:value="cron" size="large" placeholder="* * * * *" />
|
||||
<n-form-item
|
||||
class="cron"
|
||||
:show-label="false"
|
||||
:feedback="cronValidation.message"
|
||||
:validation-status="cronValidation.status"
|
||||
>
|
||||
<n-input
|
||||
v-model:value="cron"
|
||||
size="large"
|
||||
placeholder="* * * * *"
|
||||
/>
|
||||
</n-form-item>
|
||||
<div class="cron-string">
|
||||
{{ cronString }}
|
||||
|
|
@ -11,8 +19,11 @@
|
|||
<n-divider />
|
||||
|
||||
<n-space justify="center">
|
||||
|
||||
<n-form :show-feedback="false" label-width="170" label-placement="left">
|
||||
<n-form
|
||||
:show-feedback="false"
|
||||
label-width="170"
|
||||
label-placement="left"
|
||||
>
|
||||
<n-form-item label="Verbose">
|
||||
<n-switch v-model:value="cronstrueConfig.verbose" />
|
||||
</n-form-item>
|
||||
|
|
@ -41,16 +52,28 @@
|
|||
<n-table size="small">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left" scope="col">
|
||||
<th
|
||||
class="text-left"
|
||||
scope="col"
|
||||
>
|
||||
Symbol
|
||||
</th>
|
||||
<th class="text-left" scope="col">
|
||||
<th
|
||||
class="text-left"
|
||||
scope="col"
|
||||
>
|
||||
Meaning
|
||||
</th>
|
||||
<th class="text-left" scope="col">
|
||||
<th
|
||||
class="text-left"
|
||||
scope="col"
|
||||
>
|
||||
Example
|
||||
</th>
|
||||
<th class="text-left" scope="col">
|
||||
<th
|
||||
class="text-left"
|
||||
scope="col"
|
||||
>
|
||||
Equivalent
|
||||
</th>
|
||||
</tr>
|
||||
|
|
@ -152,7 +175,6 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</n-table>
|
||||
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,31 +1,50 @@
|
|||
<template>
|
||||
<div>
|
||||
<n-card>
|
||||
<n-space justify="center">
|
||||
<n-form-item label="Use current date-time ?" label-placement="left" :show-feedback="false">
|
||||
<n-switch v-model:value="useCurrentDate" />
|
||||
</n-form-item>
|
||||
</n-space>
|
||||
<n-form-item :feedback="inputInvalid ? 'Invalid date for the current format' : ''"
|
||||
:validation-status="inputInvalid ? 'error' : undefined">
|
||||
<n-input-group style="flex-grow: 1;">
|
||||
<n-select v-model:value="inputFormat" style="width: 200px;"
|
||||
:options="formats.map(({ name }, i) => ({ label: name, value: i }))"
|
||||
:disabled="useCurrentDate" />
|
||||
<div>
|
||||
<n-card>
|
||||
<n-space justify="center">
|
||||
<n-form-item
|
||||
label="Use current date-time ?"
|
||||
label-placement="left"
|
||||
:show-feedback="false"
|
||||
>
|
||||
<n-switch v-model:value="useCurrentDate" />
|
||||
</n-form-item>
|
||||
</n-space>
|
||||
<n-form-item
|
||||
:feedback="inputInvalid ? 'Invalid date for the current format' : ''"
|
||||
:validation-status="inputInvalid ? 'error' : undefined"
|
||||
>
|
||||
<n-input-group style="flex-grow: 1;">
|
||||
<n-select
|
||||
v-model:value="inputFormat"
|
||||
style="width: 200px;"
|
||||
:options="formats.map(({ name }, i) => ({ label: name, value: i }))"
|
||||
:disabled="useCurrentDate"
|
||||
/>
|
||||
|
||||
<n-input v-model:value="inputDate" :on-input="onDateInputChanged" :disabled="useCurrentDate"
|
||||
placeholder="Your date string..." />
|
||||
</n-input-group>
|
||||
</n-form-item>
|
||||
<n-divider style="margin-top: 0;"></n-divider>
|
||||
<div v-for="{ name, fromDate } in formats" :key="name" style="margin: 5px 0;">
|
||||
<n-input-group>
|
||||
<n-input-group-label style="width: 150px;">{{ name }}</n-input-group-label>
|
||||
<n-input :value="fromDate(date)" />
|
||||
</n-input-group>
|
||||
</div>
|
||||
</n-card>
|
||||
</div>
|
||||
<n-input
|
||||
v-model:value="inputDate"
|
||||
:on-input="onDateInputChanged"
|
||||
:disabled="useCurrentDate"
|
||||
placeholder="Your date string..."
|
||||
/>
|
||||
</n-input-group>
|
||||
</n-form-item>
|
||||
<n-divider style="margin-top: 0;" />
|
||||
<div
|
||||
v-for="{ name, fromDate } in formats"
|
||||
:key="name"
|
||||
style="margin: 5px 0;"
|
||||
>
|
||||
<n-input-group>
|
||||
<n-input-group-label style="width: 150px;">
|
||||
{{ name }}
|
||||
</n-input-group-label>
|
||||
<n-input :value="fromDate(date)" />
|
||||
</n-input-group>
|
||||
</div>
|
||||
</n-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
|
|
@ -1,81 +1,105 @@
|
|||
<template>
|
||||
<div>
|
||||
<n-card title="Encrypt">
|
||||
<n-space item-style="flex: 1 1 0">
|
||||
<n-form-item label="Your text:" :show-feedback="false">
|
||||
<n-input
|
||||
v-model:value="cypherInput"
|
||||
type="textarea"
|
||||
placeholder="The string to cypher"
|
||||
:autosize="{ minRows: 4 }"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-space vertical>
|
||||
<n-form-item label="Your secret key:" :show-feedback="false">
|
||||
<n-input v-model:value="cypherSecret" />
|
||||
</n-form-item>
|
||||
<n-form-item label="Encryption algorithm:" :show-feedback="false">
|
||||
<n-select
|
||||
v-model:value="cypherAlgo"
|
||||
:options="Object.keys(algos).map(label => ({ label, value: label }))"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-space>
|
||||
</n-space>
|
||||
<br />
|
||||
<n-form-item label="Yout text encrypted:" :show-feedback="false">
|
||||
<n-input
|
||||
:value="cypherOutput"
|
||||
type="textarea"
|
||||
placeholder="Your string hash"
|
||||
:autosize="{ minRows: 2 }"
|
||||
readonly
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-card>
|
||||
<br />
|
||||
<n-card title="Decrypt">
|
||||
<n-space item-style="flex: 1 1 0">
|
||||
<n-form-item label="Your encrypted text:" :show-feedback="false">
|
||||
<n-input
|
||||
v-model:value="decryptInput"
|
||||
type="textarea"
|
||||
placeholder="The string to cypher"
|
||||
:autosize="{ minRows: 4 }"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-space vertical>
|
||||
<n-form-item label="Your secret key:" :show-feedback="false">
|
||||
<n-input v-model:value="decryptSecret" />
|
||||
</n-form-item>
|
||||
<n-form-item label="Encryption algorithm:" :show-feedback="false">
|
||||
<n-select
|
||||
v-model:value="decryptAlgo"
|
||||
:options="Object.keys(algos).map(label => ({ label, value: label }))"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-space>
|
||||
</n-space>
|
||||
<br />
|
||||
<n-form-item label="Yout decrypted text:" :show-feedback="false">
|
||||
<n-input
|
||||
:value="decryptOutput"
|
||||
type="textarea"
|
||||
placeholder="Your string hash"
|
||||
:autosize="{ minRows: 2 }"
|
||||
readonly
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-card>
|
||||
</div>
|
||||
<div>
|
||||
<n-card title="Encrypt">
|
||||
<n-space item-style="flex: 1 1 0">
|
||||
<n-form-item
|
||||
label="Your text:"
|
||||
:show-feedback="false"
|
||||
>
|
||||
<n-input
|
||||
v-model:value="cypherInput"
|
||||
type="textarea"
|
||||
placeholder="The string to cypher"
|
||||
:autosize="{ minRows: 4 }"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-space vertical>
|
||||
<n-form-item
|
||||
label="Your secret key:"
|
||||
:show-feedback="false"
|
||||
>
|
||||
<n-input v-model:value="cypherSecret" />
|
||||
</n-form-item>
|
||||
<n-form-item
|
||||
label="Encryption algorithm:"
|
||||
:show-feedback="false"
|
||||
>
|
||||
<n-select
|
||||
v-model:value="cypherAlgo"
|
||||
:options="Object.keys(algos).map(label => ({ label, value: label }))"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-space>
|
||||
</n-space>
|
||||
<br>
|
||||
<n-form-item
|
||||
label="Yout text encrypted:"
|
||||
:show-feedback="false"
|
||||
>
|
||||
<n-input
|
||||
:value="cypherOutput"
|
||||
type="textarea"
|
||||
placeholder="Your string hash"
|
||||
:autosize="{ minRows: 2 }"
|
||||
readonly
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-card>
|
||||
<br>
|
||||
<n-card title="Decrypt">
|
||||
<n-space item-style="flex: 1 1 0">
|
||||
<n-form-item
|
||||
label="Your encrypted text:"
|
||||
:show-feedback="false"
|
||||
>
|
||||
<n-input
|
||||
v-model:value="decryptInput"
|
||||
type="textarea"
|
||||
placeholder="The string to cypher"
|
||||
:autosize="{ minRows: 4 }"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-space vertical>
|
||||
<n-form-item
|
||||
label="Your secret key:"
|
||||
:show-feedback="false"
|
||||
>
|
||||
<n-input v-model:value="decryptSecret" />
|
||||
</n-form-item>
|
||||
<n-form-item
|
||||
label="Encryption algorithm:"
|
||||
:show-feedback="false"
|
||||
>
|
||||
<n-select
|
||||
v-model:value="decryptAlgo"
|
||||
:options="Object.keys(algos).map(label => ({ label, value: label }))"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-space>
|
||||
</n-space>
|
||||
<br>
|
||||
<n-form-item
|
||||
label="Yout decrypted text:"
|
||||
:show-feedback="false"
|
||||
>
|
||||
<n-input
|
||||
:value="decryptOutput"
|
||||
type="textarea"
|
||||
placeholder="Your string hash"
|
||||
:autosize="{ minRows: 2 }"
|
||||
readonly
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<memo />
|
||||
</div>
|
||||
<div>
|
||||
<memo />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
|
|
@ -1,39 +1,45 @@
|
|||
<template>
|
||||
<div>
|
||||
<n-card>
|
||||
<n-input
|
||||
v-model:value="clearText"
|
||||
type="textarea"
|
||||
placeholder="Your string..."
|
||||
:autosize="{ minRows: 3 }"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<n-select
|
||||
v-model:value="algo"
|
||||
:options="Object.keys(algos).map(label => ({ label, value: label }))"
|
||||
/>
|
||||
<div>
|
||||
<n-card>
|
||||
<n-input
|
||||
v-model:value="clearText"
|
||||
type="textarea"
|
||||
placeholder="Your string..."
|
||||
:autosize="{ minRows: 3 }"
|
||||
/>
|
||||
<br>
|
||||
<br>
|
||||
<n-select
|
||||
v-model:value="algo"
|
||||
:options="Object.keys(algos).map(label => ({ label, value: label }))"
|
||||
/>
|
||||
|
||||
<br />
|
||||
<n-input
|
||||
style="text-align: center;"
|
||||
:value="hashedText"
|
||||
type="textarea"
|
||||
placeholder="Your string hash"
|
||||
:autosize="{ minRows: 1 }"
|
||||
readonly
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<n-space justify="center">
|
||||
<n-button @click="copy" secondary autofocus>Copy</n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</div>
|
||||
<br>
|
||||
<n-input
|
||||
style="text-align: center;"
|
||||
:value="hashedText"
|
||||
type="textarea"
|
||||
placeholder="Your string hash"
|
||||
:autosize="{ minRows: 1 }"
|
||||
readonly
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
/>
|
||||
<br>
|
||||
<br>
|
||||
<n-space justify="center">
|
||||
<n-button
|
||||
secondary
|
||||
autofocus
|
||||
@click="copy"
|
||||
>
|
||||
Copy
|
||||
</n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
|
|
@ -1,54 +1,95 @@
|
|||
<template>
|
||||
<div>
|
||||
<n-card>
|
||||
<n-input-group>
|
||||
<n-input-group-label style="width: 200px;">Input number:</n-input-group-label>
|
||||
<n-input-number v-model:value="inputNumber" min="0" />
|
||||
<div>
|
||||
<n-card>
|
||||
<n-input-group>
|
||||
<n-input-group-label style="width: 200px;">
|
||||
Input number:
|
||||
</n-input-group-label>
|
||||
<n-input-number
|
||||
v-model:value="inputNumber"
|
||||
min="0"
|
||||
/>
|
||||
|
||||
<n-input-group-label style="width: 200px;">Input base:</n-input-group-label>
|
||||
<n-input-number v-model:value="inputBase" max="64" min="2" style="width: 100px;" />
|
||||
</n-input-group>
|
||||
<n-divider></n-divider>
|
||||
<n-input-group-label style="width: 200px;">
|
||||
Input base:
|
||||
</n-input-group-label>
|
||||
<n-input-number
|
||||
v-model:value="inputBase"
|
||||
max="64"
|
||||
min="2"
|
||||
style="width: 100px;"
|
||||
/>
|
||||
</n-input-group>
|
||||
<n-divider />
|
||||
|
||||
|
||||
|
||||
<n-input-group>
|
||||
<n-input-group-label style="width: 200px;">Binary (2):</n-input-group-label>
|
||||
<n-input :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 2 })"
|
||||
readonly />
|
||||
</n-input-group>
|
||||
<n-input-group>
|
||||
<n-input-group-label style="width: 200px;">
|
||||
Binary (2):
|
||||
</n-input-group-label>
|
||||
<n-input
|
||||
:value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 2 })"
|
||||
readonly
|
||||
/>
|
||||
</n-input-group>
|
||||
|
||||
<n-input-group>
|
||||
<n-input-group-label style="width: 200px;">Octale (8):</n-input-group-label>
|
||||
<n-input :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 8 })"
|
||||
readonly />
|
||||
</n-input-group>
|
||||
<n-input-group>
|
||||
<n-input-group-label style="width: 200px;">
|
||||
Octale (8):
|
||||
</n-input-group-label>
|
||||
<n-input
|
||||
:value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 8 })"
|
||||
readonly
|
||||
/>
|
||||
</n-input-group>
|
||||
|
||||
<n-input-group>
|
||||
<n-input-group-label style="width: 200px;">Decimal (10):</n-input-group-label>
|
||||
<n-input :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 10 })"
|
||||
readonly />
|
||||
</n-input-group>
|
||||
<n-input-group>
|
||||
<n-input-group-label style="width: 200px;">
|
||||
Decimal (10):
|
||||
</n-input-group-label>
|
||||
<n-input
|
||||
:value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 10 })"
|
||||
readonly
|
||||
/>
|
||||
</n-input-group>
|
||||
|
||||
<n-input-group>
|
||||
<n-input-group-label style="width: 200px;">Hexadecimal (16):</n-input-group-label>
|
||||
<n-input :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 16 })"
|
||||
readonly />
|
||||
</n-input-group>
|
||||
<n-input-group>
|
||||
<n-input-group-label style="width: 200px;">
|
||||
Hexadecimal (16):
|
||||
</n-input-group-label>
|
||||
<n-input
|
||||
:value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 16 })"
|
||||
readonly
|
||||
/>
|
||||
</n-input-group>
|
||||
|
||||
<n-input-group>
|
||||
<n-input-group-label style="width: 200px;">Base64 (64):</n-input-group-label>
|
||||
<n-input :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 64 })"
|
||||
readonly />
|
||||
</n-input-group>
|
||||
<n-input-group>
|
||||
<n-input-group-label style="width: 90px;">Custom:</n-input-group-label>
|
||||
<n-input-number style="width: 110px;" v-model:value="outputBase" max="64" min="2" />
|
||||
<n-input :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: outputBase })"
|
||||
readonly />
|
||||
</n-input-group>
|
||||
</n-card>
|
||||
</div>
|
||||
<n-input-group>
|
||||
<n-input-group-label style="width: 200px;">
|
||||
Base64 (64):
|
||||
</n-input-group-label>
|
||||
<n-input
|
||||
:value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 64 })"
|
||||
readonly
|
||||
/>
|
||||
</n-input-group>
|
||||
<n-input-group>
|
||||
<n-input-group-label style="width: 90px;">
|
||||
Custom:
|
||||
</n-input-group-label>
|
||||
<n-input-number
|
||||
v-model:value="outputBase"
|
||||
style="width: 110px;"
|
||||
max="64"
|
||||
min="2"
|
||||
/>
|
||||
<n-input
|
||||
:value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: outputBase })"
|
||||
readonly
|
||||
/>
|
||||
</n-input-group>
|
||||
</n-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
|
|
@ -1,30 +1,84 @@
|
|||
<template>
|
||||
<n-card>
|
||||
<n-form-item label="Paragraphs" :show-feedback="false" label-width="200" label-placement="left">
|
||||
<n-slider v-model:value="paragraphs" :step="1" :min="1" :max="20" />
|
||||
</n-form-item>
|
||||
<n-form-item label="Sentences per paragraph" :show-feedback="false" label-width="200" label-placement="left">
|
||||
<n-slider v-model:value="sentences" range :step="1" :min="1" :max="50" />
|
||||
</n-form-item>
|
||||
<n-form-item label="Words per sentence" :show-feedback="false" label-width="200" label-placement="left">
|
||||
<n-slider v-model:value="words" range :step="1" :min="1" :max="50" />
|
||||
</n-form-item>
|
||||
<n-form-item label="Start with lorem ipsum ?" :show-feedback="false" label-width="200" label-placement="left">
|
||||
<n-switch v-model:value="startWithLoremIpsum" />
|
||||
</n-form-item>
|
||||
<n-form-item label="As html ?" :show-feedback="false" label-width="200" label-placement="left">
|
||||
<n-switch v-model:value="asHTML" />
|
||||
</n-form-item>
|
||||
<n-card>
|
||||
<n-form-item
|
||||
label="Paragraphs"
|
||||
:show-feedback="false"
|
||||
label-width="200"
|
||||
label-placement="left"
|
||||
>
|
||||
<n-slider
|
||||
v-model:value="paragraphs"
|
||||
:step="1"
|
||||
:min="1"
|
||||
:max="20"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item
|
||||
label="Sentences per paragraph"
|
||||
:show-feedback="false"
|
||||
label-width="200"
|
||||
label-placement="left"
|
||||
>
|
||||
<n-slider
|
||||
v-model:value="sentences"
|
||||
range
|
||||
:step="1"
|
||||
:min="1"
|
||||
:max="50"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item
|
||||
label="Words per sentence"
|
||||
:show-feedback="false"
|
||||
label-width="200"
|
||||
label-placement="left"
|
||||
>
|
||||
<n-slider
|
||||
v-model:value="words"
|
||||
range
|
||||
:step="1"
|
||||
:min="1"
|
||||
:max="50"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item
|
||||
label="Start with lorem ipsum ?"
|
||||
:show-feedback="false"
|
||||
label-width="200"
|
||||
label-placement="left"
|
||||
>
|
||||
<n-switch v-model:value="startWithLoremIpsum" />
|
||||
</n-form-item>
|
||||
<n-form-item
|
||||
label="As html ?"
|
||||
:show-feedback="false"
|
||||
label-width="200"
|
||||
label-placement="left"
|
||||
>
|
||||
<n-switch v-model:value="asHTML" />
|
||||
</n-form-item>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<n-input :value="loremIpsumText" type="textarea" placeholder="Your lorem ipsum..." autosize readonly />
|
||||
<br>
|
||||
<br>
|
||||
<n-space justify="center">
|
||||
<n-button @click="copy" secondary autofocus>Copy</n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
<n-input
|
||||
:value="loremIpsumText"
|
||||
type="textarea"
|
||||
placeholder="Your lorem ipsum..."
|
||||
autosize
|
||||
readonly
|
||||
/>
|
||||
<br>
|
||||
<br>
|
||||
<n-space justify="center">
|
||||
<n-button
|
||||
secondary
|
||||
autofocus
|
||||
@click="copy"
|
||||
>
|
||||
Copy
|
||||
</n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
|
|
@ -1,27 +1,56 @@
|
|||
<template>
|
||||
<n-card>
|
||||
<n-grid cols="3" x-gap="12">
|
||||
<n-grid
|
||||
cols="3"
|
||||
x-gap="12"
|
||||
>
|
||||
<n-gi span="2">
|
||||
<n-form label-width="130" label-placement="left">
|
||||
<n-form
|
||||
label-width="130"
|
||||
label-placement="left"
|
||||
>
|
||||
<n-form-item label="Text:">
|
||||
<n-input v-model:value="text" placeholder="Your link or text..." />
|
||||
<n-input
|
||||
v-model:value="text"
|
||||
placeholder="Your link or text..."
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="Foreground color:">
|
||||
<n-color-picker v-model:value="foreground" :modes="['hex']" />
|
||||
<n-color-picker
|
||||
v-model:value="foreground"
|
||||
:modes="['hex']"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="Background color:">
|
||||
<n-color-picker v-model:value="background" :modes="['hex']" />
|
||||
<n-color-picker
|
||||
v-model:value="background"
|
||||
:modes="['hex']"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="Error resistance:">
|
||||
<n-select v-model:value="errorCorrectionLevel"
|
||||
:options="errorCorrectionLevels.map((value) => ({ label: value, value }))" />
|
||||
<n-select
|
||||
v-model:value="errorCorrectionLevel"
|
||||
:options="errorCorrectionLevels.map((value) => ({ label: value, value }))"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</n-gi>
|
||||
</n-form>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-space justify="center" align="center" vertical>
|
||||
<n-image :src="qrcode" width="200" />
|
||||
<n-button @click="download" secondary>Download qr-code</n-button>
|
||||
<n-space
|
||||
justify="center"
|
||||
align="center"
|
||||
vertical
|
||||
>
|
||||
<n-image
|
||||
:src="qrcode"
|
||||
width="200"
|
||||
/>
|
||||
<n-button
|
||||
secondary
|
||||
@click="download"
|
||||
>
|
||||
Download qr-code
|
||||
</n-button>
|
||||
</n-space>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,23 @@
|
|||
<template>
|
||||
<n-card>
|
||||
<div class="port">{{ port }}</div>
|
||||
<n-space justify="center">
|
||||
<n-button @click="copy" secondary>Copy</n-button>
|
||||
<n-button @click="refreshPort" secondary>Refresh</n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
<n-card>
|
||||
<div class="port">
|
||||
{{ port }}
|
||||
</div>
|
||||
<n-space justify="center">
|
||||
<n-button
|
||||
secondary
|
||||
@click="copy"
|
||||
>
|
||||
Copy
|
||||
</n-button>
|
||||
<n-button
|
||||
secondary
|
||||
@click="refreshPort"
|
||||
>
|
||||
Refresh
|
||||
</n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
|
|
@ -1,26 +1,51 @@
|
|||
<template>
|
||||
<div>
|
||||
<n-card title="Arabic to roman">
|
||||
<n-space align="center" justify="space-between">
|
||||
<n-input-number
|
||||
v-model:value="inputNumeral"
|
||||
:min="1"
|
||||
style="width: 200px;"
|
||||
:show-button="false"
|
||||
/>
|
||||
<div class="result">{{ outputRoman }}</div>
|
||||
<n-button @click="copyRoman" secondary autofocus>Copy</n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
<br />
|
||||
<n-card title="Roman to arabic">
|
||||
<n-space align="center" justify="space-between">
|
||||
<n-input v-model:value="inputRoman" style="width: 200px;" />
|
||||
<div class="result">{{ outputNumeral }}</div>
|
||||
<n-button @click="copyArabic" secondary autofocus>Copy</n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</div>
|
||||
<div>
|
||||
<n-card title="Arabic to roman">
|
||||
<n-space
|
||||
align="center"
|
||||
justify="space-between"
|
||||
>
|
||||
<n-input-number
|
||||
v-model:value="inputNumeral"
|
||||
:min="1"
|
||||
style="width: 200px;"
|
||||
:show-button="false"
|
||||
/>
|
||||
<div class="result">
|
||||
{{ outputRoman }}
|
||||
</div>
|
||||
<n-button
|
||||
secondary
|
||||
autofocus
|
||||
@click="copyRoman"
|
||||
>
|
||||
Copy
|
||||
</n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
<br>
|
||||
<n-card title="Roman to arabic">
|
||||
<n-space
|
||||
align="center"
|
||||
justify="space-between"
|
||||
>
|
||||
<n-input
|
||||
v-model:value="inputRoman"
|
||||
style="width: 200px;"
|
||||
/>
|
||||
<div class="result">
|
||||
{{ outputNumeral }}
|
||||
</div>
|
||||
<n-button
|
||||
secondary
|
||||
autofocus
|
||||
@click="copyArabic"
|
||||
>
|
||||
Copy
|
||||
</n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
|
|
@ -1,13 +1,30 @@
|
|||
<template>
|
||||
<n-card>
|
||||
<n-input v-model:value="text" type="textarea" placeholder="Your text..." rows="5" />
|
||||
<n-input
|
||||
v-model:value="text"
|
||||
type="textarea"
|
||||
placeholder="Your text..."
|
||||
rows="5"
|
||||
/>
|
||||
<br>
|
||||
<br>
|
||||
<n-space justify="space-around">
|
||||
<n-statistic label="Character count" :value="text.length" />
|
||||
<n-statistic label="Word count" :value="text.split(/\s+/).length" />
|
||||
<n-statistic label="Line count" :value="text.split(/\r\n|\r|\n/).length" />
|
||||
<n-statistic label="Byte size" :value="formatBytes(getStringSizeInBytes(text))" />
|
||||
<n-statistic
|
||||
label="Character count"
|
||||
:value="text.length"
|
||||
/>
|
||||
<n-statistic
|
||||
label="Word count"
|
||||
:value="text.split(/\s+/).length"
|
||||
/>
|
||||
<n-statistic
|
||||
label="Line count"
|
||||
:value="text.split(/\r\n|\r|\n/).length"
|
||||
/>
|
||||
<n-statistic
|
||||
label="Byte size"
|
||||
:value="formatBytes(getStringSizeInBytes(text))"
|
||||
/>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,54 +1,80 @@
|
|||
<template>
|
||||
<div>
|
||||
<n-card>
|
||||
<n-form label-placement="left" label-width="140">
|
||||
<n-space justify="center" item-style="padding: 0" :size="0">
|
||||
<div>
|
||||
<n-form-item label="Uppercase (ABC...)">
|
||||
<n-switch v-model:value="withUppercase" />
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="Lowercase (abc...)">
|
||||
<n-switch v-model:value="withLowercase" />
|
||||
</n-form-item>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<n-form-item label="Numbers (012...)">
|
||||
<n-switch v-model:value="withNumbers" />
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="Symbols (;-!...)">
|
||||
<n-switch v-model:value="withSymbols" />
|
||||
</n-form-item>
|
||||
</div>
|
||||
</n-space>
|
||||
</n-form>
|
||||
|
||||
<n-form-item :label="`Length (${length})`" label-placement="left">
|
||||
<n-slider v-model:value="length" :step="1" :min="1" :max="512" />
|
||||
<div>
|
||||
<n-card>
|
||||
<n-form
|
||||
label-placement="left"
|
||||
label-width="140"
|
||||
>
|
||||
<n-space
|
||||
justify="center"
|
||||
item-style="padding: 0"
|
||||
:size="0"
|
||||
>
|
||||
<div>
|
||||
<n-form-item label="Uppercase (ABC...)">
|
||||
<n-switch v-model:value="withUppercase" />
|
||||
</n-form-item>
|
||||
|
||||
<n-input
|
||||
style="text-align: center;"
|
||||
v-model:value="token"
|
||||
type="textarea"
|
||||
placeholder="The token..."
|
||||
:autosize="{ minRows: 1 }"
|
||||
readonly
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<n-space justify="center">
|
||||
<n-button @click="copy" secondary autofocus>Copy</n-button>
|
||||
<n-button @click="refreshToken" secondary>Refresh</n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</div>
|
||||
<n-form-item label="Lowercase (abc...)">
|
||||
<n-switch v-model:value="withLowercase" />
|
||||
</n-form-item>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<n-form-item label="Numbers (012...)">
|
||||
<n-switch v-model:value="withNumbers" />
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="Symbols (;-!...)">
|
||||
<n-switch v-model:value="withSymbols" />
|
||||
</n-form-item>
|
||||
</div>
|
||||
</n-space>
|
||||
</n-form>
|
||||
|
||||
<n-form-item
|
||||
:label="`Length (${length})`"
|
||||
label-placement="left"
|
||||
>
|
||||
<n-slider
|
||||
v-model:value="length"
|
||||
:step="1"
|
||||
:min="1"
|
||||
:max="512"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-input
|
||||
v-model:value="token"
|
||||
style="text-align: center;"
|
||||
type="textarea"
|
||||
placeholder="The token..."
|
||||
:autosize="{ minRows: 1 }"
|
||||
readonly
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
/>
|
||||
<br>
|
||||
<br>
|
||||
<n-space justify="center">
|
||||
<n-button
|
||||
secondary
|
||||
autofocus
|
||||
@click="copy"
|
||||
>
|
||||
Copy
|
||||
</n-button>
|
||||
<n-button
|
||||
secondary
|
||||
@click="refreshToken"
|
||||
>
|
||||
Refresh
|
||||
</n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
|
|
@ -1,38 +1,72 @@
|
|||
<template>
|
||||
<n-space item-style="flex:1">
|
||||
<n-card title="Encode">
|
||||
<n-form-item label="Your string :" :feedback="encodedValidation.message"
|
||||
:validation-status="encodedValidation.status">
|
||||
<n-input v-model:value="encodeInput" type="textarea" placeholder="The string to encode"
|
||||
:autosize="{ minRows: 3 }" />
|
||||
</n-form-item>
|
||||
<n-space item-style="flex:1">
|
||||
<n-card title="Encode">
|
||||
<n-form-item
|
||||
label="Your string :"
|
||||
:feedback="encodedValidation.message"
|
||||
:validation-status="encodedValidation.status"
|
||||
>
|
||||
<n-input
|
||||
v-model:value="encodeInput"
|
||||
type="textarea"
|
||||
placeholder="The string to encode"
|
||||
:autosize="{ minRows: 3 }"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="Your string encoded :">
|
||||
<n-input :value="encodeOutput" type="textarea" readonly placeholder="Your string encoded"
|
||||
:autosize="{ minRows: 3 }" />
|
||||
</n-form-item>
|
||||
<n-form-item label="Your string encoded :">
|
||||
<n-input
|
||||
:value="encodeOutput"
|
||||
type="textarea"
|
||||
readonly
|
||||
placeholder="Your string encoded"
|
||||
:autosize="{ minRows: 3 }"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-space justify="center">
|
||||
<n-button @click="copyEncoded" secondary>Copy</n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
<n-card title="Encode">
|
||||
<n-form-item label="Your encode string :" :feedback="decodeValidation.message"
|
||||
:validation-status="decodeValidation.status">
|
||||
<n-input v-model:value="decodeInput" type="textarea" placeholder="The string to decode"
|
||||
:autosize="{ minRows: 3 }" />
|
||||
</n-form-item>
|
||||
<n-space justify="center">
|
||||
<n-button
|
||||
secondary
|
||||
@click="copyEncoded"
|
||||
>
|
||||
Copy
|
||||
</n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
<n-card title="Encode">
|
||||
<n-form-item
|
||||
label="Your encode string :"
|
||||
:feedback="decodeValidation.message"
|
||||
:validation-status="decodeValidation.status"
|
||||
>
|
||||
<n-input
|
||||
v-model:value="decodeInput"
|
||||
type="textarea"
|
||||
placeholder="The string to decode"
|
||||
:autosize="{ minRows: 3 }"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="Your string decoded :">
|
||||
<n-input :value="decodeOutput" type="textarea" readonly placeholder="Your string decoded"
|
||||
:autosize="{ minRows: 3 }" />
|
||||
</n-form-item>
|
||||
<n-form-item label="Your string decoded :">
|
||||
<n-input
|
||||
:value="decodeOutput"
|
||||
type="textarea"
|
||||
readonly
|
||||
placeholder="Your string decoded"
|
||||
:autosize="{ minRows: 3 }"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-space justify="center">
|
||||
<n-button @click="copyDecoded" secondary>Copy</n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</n-space>
|
||||
<n-space justify="center">
|
||||
<n-button
|
||||
secondary
|
||||
@click="copyDecoded"
|
||||
>
|
||||
Copy
|
||||
</n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</n-space>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
|
|
@ -1,31 +1,49 @@
|
|||
<template>
|
||||
<div>
|
||||
<n-card>
|
||||
<n-space align="center" justify="center">
|
||||
Quantity :
|
||||
<n-input-number v-model:value="count" :min="1" :max="50" />
|
||||
</n-space>
|
||||
<br />
|
||||
<n-input
|
||||
style="text-align: center; font-family: monospace;"
|
||||
:value="uuids"
|
||||
type="textarea"
|
||||
placeholder="Your uuids"
|
||||
:autosize="{ minRows: 1 }"
|
||||
readonly
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<n-space justify="center">
|
||||
<n-button @click="copy" secondary autofocus>Copy</n-button>
|
||||
<n-button @click="refreshUUIDs" secondary>Refresh</n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</div>
|
||||
<div>
|
||||
<n-card>
|
||||
<n-space
|
||||
align="center"
|
||||
justify="center"
|
||||
>
|
||||
Quantity :
|
||||
<n-input-number
|
||||
v-model:value="count"
|
||||
:min="1"
|
||||
:max="50"
|
||||
/>
|
||||
</n-space>
|
||||
<br>
|
||||
<n-input
|
||||
style="text-align: center; font-family: monospace;"
|
||||
:value="uuids"
|
||||
type="textarea"
|
||||
placeholder="Your uuids"
|
||||
:autosize="{ minRows: 1 }"
|
||||
readonly
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
/>
|
||||
<br>
|
||||
<br>
|
||||
<n-space justify="center">
|
||||
<n-button
|
||||
secondary
|
||||
autofocus
|
||||
@click="copy"
|
||||
>
|
||||
Copy
|
||||
</n-button>
|
||||
<n-button
|
||||
secondary
|
||||
@click="refreshUUIDs"
|
||||
>
|
||||
Refresh
|
||||
</n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue