diff options
Diffstat (limited to 'src/tools')
17 files changed, 836 insertions, 430 deletions
diff --git a/src/tools/base64-converter/base64-converter.vue b/src/tools/base64-converter/base64-converter.vue index 3354cc4..fe16e90 100644 --- a/src/tools/base64-converter/base64-converter.vue +++ b/src/tools/base64-converter/base64-converter.vue @@ -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"> diff --git a/src/tools/bip39-generator/bip39-generator.vue b/src/tools/bip39-generator/bip39-generator.vue index 2cffcbb..f81ce8f 100644 --- a/src/tools/bip39-generator/bip39-generator.vue +++ b/src/tools/bip39-generator/bip39-generator.vue @@ -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"> diff --git a/src/tools/color-converter/color-converter.vue b/src/tools/color-converter/color-converter.vue index 7df61cc..807ef99 100644 --- a/src/tools/color-converter/color-converter.vue +++ b/src/tools/color-converter/color-converter.vue @@ -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> diff --git a/src/tools/crontab-generator/crontab-generator.vue b/src/tools/crontab-generator/crontab-generator.vue index a77a3f5..25c71c9 100644 --- a/src/tools/crontab-generator/crontab-generator.vue +++ b/src/tools/crontab-generator/crontab-generator.vue @@ -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> diff --git a/src/tools/date-time-converter/date-time-converter.vue b/src/tools/date-time-converter/date-time-converter.vue index 720e450..00e5e41 100644 --- a/src/tools/date-time-converter/date-time-converter.vue +++ b/src/tools/date-time-converter/date-time-converter.vue @@ -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"> diff --git a/src/tools/encryption/encryption.vue b/src/tools/encryption/encryption.vue index 415aadc..efe2be9 100644 --- a/src/tools/encryption/encryption.vue +++ b/src/tools/encryption/encryption.vue @@ -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"> diff --git a/src/tools/git-memo/git-memo.vue b/src/tools/git-memo/git-memo.vue index 5848ac4..063db8f 100644 --- a/src/tools/git-memo/git-memo.vue +++ b/src/tools/git-memo/git-memo.vue @@ -1,7 +1,7 @@ <template> - <div> - <memo /> - </div> + <div> + <memo /> + </div> </template> <script setup lang="ts"> diff --git a/src/tools/hash-text/hash-text.vue b/src/tools/hash-text/hash-text.vue index 7eacbf7..a71ae67 100644 --- a/src/tools/hash-text/hash-text.vue +++ b/src/tools/hash-text/hash-text.vue @@ -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"> diff --git a/src/tools/integer-base-converter/integer-base-converter.vue b/src/tools/integer-base-converter/integer-base-converter.vue index 5508b42..223ca00 100644 --- a/src/tools/integer-base-converter/integer-base-converter.vue +++ b/src/tools/integer-base-converter/integer-base-converter.vue @@ -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"> diff --git a/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue b/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue index a25e84a..b9c62c1 100644 --- a/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue +++ b/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue @@ -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> - - <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-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> + + <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"> diff --git a/src/tools/qr-code-generator/qr-code-generator.vue b/src/tools/qr-code-generator/qr-code-generator.vue index e23f00a..8f2161d 100644 --- a/src/tools/qr-code-generator/qr-code-generator.vue +++ b/src/tools/qr-code-generator/qr-code-generator.vue @@ -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> diff --git a/src/tools/random-port-generator/random-port-generator.vue b/src/tools/random-port-generator/random-port-generator.vue index d6ab5d6..16d9458 100644 --- a/src/tools/random-port-generator/random-port-generator.vue +++ b/src/tools/random-port-generator/random-port-generator.vue @@ -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"> diff --git a/src/tools/roman-numeral-converter/roman-numeral-converter.vue b/src/tools/roman-numeral-converter/roman-numeral-converter.vue index 4b7a1a2..7f47e09 100644 --- a/src/tools/roman-numeral-converter/roman-numeral-converter.vue +++ b/src/tools/roman-numeral-converter/roman-numeral-converter.vue @@ -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"> diff --git a/src/tools/text-statistics/text-statistics.vue b/src/tools/text-statistics/text-statistics.vue index 1563c43..90504ce 100644 --- a/src/tools/text-statistics/text-statistics.vue +++ b/src/tools/text-statistics/text-statistics.vue @@ -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> diff --git a/src/tools/token-generator/token-generator.tool.vue b/src/tools/token-generator/token-generator.tool.vue index ce9c5d6..28de838 100644 --- a/src/tools/token-generator/token-generator.tool.vue +++ b/src/tools/token-generator/token-generator.tool.vue @@ -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-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> - <div> - <n-form-item label="Numbers (012...)"> - <n-switch v-model:value="withNumbers" /> - </n-form-item> + <n-form-item label="Lowercase (abc...)"> + <n-switch v-model:value="withLowercase" /> + </n-form-item> + </div> - <n-form-item label="Symbols (;-!...)"> - <n-switch v-model:value="withSymbols" /> - </n-form-item> - </div> - </n-space> - </n-form> + <div> + <n-form-item label="Numbers (012...)"> + <n-switch v-model:value="withNumbers" /> + </n-form-item> - <n-form-item :label="`Length (${length})`" label-placement="left"> - <n-slider v-model:value="length" :step="1" :min="1" :max="512" /> + <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 - 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-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"> diff --git a/src/tools/url-encoder/url-encoder.vue b/src/tools/url-encoder/url-encoder.vue index 45bddc8..c3ed6ba 100644 --- a/src/tools/url-encoder/url-encoder.vue +++ b/src/tools/url-encoder/url-encoder.vue @@ -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-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-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 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-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-space justify="center"> + <n-button + secondary + @click="copyDecoded" + > + Copy + </n-button> + </n-space> + </n-card> + </n-space> </template> <script setup lang="ts"> diff --git a/src/tools/uuid-generator/uuid-generator.vue b/src/tools/uuid-generator/uuid-generator.vue index 61dc6bf..fb723b8 100644 --- a/src/tools/uuid-generator/uuid-generator.vue +++ b/src/tools/uuid-generator/uuid-generator.vue @@ -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"> |