diff options
Diffstat (limited to 'src/tools/token-generator/token-generator.tool.vue')
| -rw-r--r-- | src/tools/token-generator/token-generator.tool.vue | 116 |
1 files changed, 71 insertions, 45 deletions
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"> |