mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-04-20 14:56:17 -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
|
|
@ -3,7 +3,7 @@ require('@rushstack/eslint-patch/modern-module-resolution');
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
root: true,
|
root: true,
|
||||||
extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-typescript/recommended'],
|
extends: ['plugin:vue/vue3-essential', 'eslint:recommended', 'plugin:vue/vue3-recommended', '@vue/eslint-config-typescript/recommended'],
|
||||||
env: {
|
env: {
|
||||||
'vue/setup-compiler-macros': true,
|
'vue/setup-compiler-macros': true,
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,10 @@ const themeOverrides = computed(() => styleStore.isDarkTheme ? darkThemeOverride
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<n-config-provider :theme="theme" :theme-overrides="themeOverrides">
|
<n-config-provider
|
||||||
|
:theme="theme"
|
||||||
|
:theme-overrides="themeOverrides"
|
||||||
|
>
|
||||||
<n-global-style />
|
<n-global-style />
|
||||||
<n-message-provider placement="bottom">
|
<n-message-provider placement="bottom">
|
||||||
<component :is="layout">
|
<component :is="layout">
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,28 @@
|
||||||
<template>
|
<template>
|
||||||
<n-layout has-sider>
|
<n-layout has-sider>
|
||||||
<n-layout-sider bordered collapse-mode="width" :collapsed-width="0" :width="240" :collapsed="isMenuCollapsed"
|
<n-layout-sider
|
||||||
@collapse="isMenuCollapsed = true" @expand="isMenuCollapsed = false" :show-trigger="false"
|
bordered
|
||||||
:native-scrollbar="false" :position="siderPosition">
|
collapse-mode="width"
|
||||||
<slot name="sider" />
|
:collapsed-width="0"
|
||||||
</n-layout-sider>
|
:width="240"
|
||||||
<n-layout class="content">
|
:collapsed="isMenuCollapsed"
|
||||||
<slot name="content" />
|
:show-trigger="false"
|
||||||
<div class="overlay" v-show="isSmallScreen && !isMenuCollapsed" @click="isMenuCollapsed = true" />
|
:native-scrollbar="false"
|
||||||
</n-layout>
|
:position="siderPosition"
|
||||||
|
@collapse="isMenuCollapsed = true"
|
||||||
|
@expand="isMenuCollapsed = false"
|
||||||
|
>
|
||||||
|
<slot name="sider" />
|
||||||
|
</n-layout-sider>
|
||||||
|
<n-layout class="content">
|
||||||
|
<slot name="content" />
|
||||||
|
<div
|
||||||
|
v-show="isSmallScreen && !isMenuCollapsed"
|
||||||
|
class="overlay"
|
||||||
|
@click="isMenuCollapsed = true"
|
||||||
|
/>
|
||||||
</n-layout>
|
</n-layout>
|
||||||
|
</n-layout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
||||||
|
|
@ -32,19 +32,30 @@ function onSelect(path: string) {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="search-bar">
|
<div class="search-bar">
|
||||||
<n-auto-complete :options="options" v-model:value="queryString" :input-props="{ autocomplete: 'disabled' }"
|
<n-auto-complete
|
||||||
:on-select="onSelect">
|
v-model:value="queryString"
|
||||||
<template #default="{ handleInput, handleBlur, handleFocus, value: slotValue }">
|
:options="options"
|
||||||
<n-input round clearable placeholder="Search a tool..." :value="slotValue" @input="handleInput"
|
:input-props="{ autocomplete: 'disabled' }"
|
||||||
@focus="handleFocus" @blur="handleBlur">
|
:on-select="onSelect"
|
||||||
<template #prefix>
|
>
|
||||||
<n-icon :component="SearchRound" />
|
<template #default="{ handleInput, handleBlur, handleFocus, value: slotValue }">
|
||||||
</template>
|
<n-input
|
||||||
</n-input>
|
round
|
||||||
</template>
|
clearable
|
||||||
</n-auto-complete>
|
placeholder="Search a tool..."
|
||||||
</div>
|
:value="slotValue"
|
||||||
|
@input="handleInput"
|
||||||
|
@focus="handleFocus"
|
||||||
|
@blur="handleBlur"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<n-icon :component="SearchRound" />
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
</template>
|
||||||
|
</n-auto-complete>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,24 @@
|
||||||
<template>
|
<template>
|
||||||
<router-link :to="tool.path">
|
<router-link :to="tool.path">
|
||||||
<n-card class="tool-card">
|
<n-card class="tool-card">
|
||||||
<n-icon class="icon" size="40" :component="tool.icon" />
|
<n-icon
|
||||||
<n-h3 class="title">
|
class="icon"
|
||||||
<n-ellipsis>{{ tool.name }}</n-ellipsis>
|
size="40"
|
||||||
</n-h3>
|
:component="tool.icon"
|
||||||
<div class="description">
|
/>
|
||||||
<n-ellipsis :line-clamp="2" :tooltip="false">{{ tool.description }}</n-ellipsis>
|
<n-h3 class="title">
|
||||||
</div>
|
<n-ellipsis>{{ tool.name }}</n-ellipsis>
|
||||||
</n-card>
|
</n-h3>
|
||||||
</router-link>
|
<div class="description">
|
||||||
|
<n-ellipsis
|
||||||
|
:line-clamp="2"
|
||||||
|
:tooltip="false"
|
||||||
|
>
|
||||||
|
{{ tool.description }}
|
||||||
|
</n-ellipsis>
|
||||||
|
</div>
|
||||||
|
</n-card>
|
||||||
|
</router-link>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
||||||
|
|
@ -32,84 +32,199 @@ const m = toolsByCategory.map(category => ({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<menu-layout class="menu-layout" :class="{ isSmallScreen: styleStore.isSmallScreen }">
|
<menu-layout
|
||||||
|
class="menu-layout"
|
||||||
|
:class="{ isSmallScreen: styleStore.isSmallScreen }"
|
||||||
|
>
|
||||||
|
<template #sider>
|
||||||
|
<router-link
|
||||||
|
to="/"
|
||||||
|
class="hero-wrapper"
|
||||||
|
>
|
||||||
|
<hero-gradient class="gradient" />
|
||||||
|
<div class="text-wrapper">
|
||||||
|
<div class="title">
|
||||||
|
IT - TOOLS
|
||||||
|
</div>
|
||||||
|
<div class="divider" />
|
||||||
|
<div class="subtitle">
|
||||||
|
Handy tools for developers
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</router-link>
|
||||||
|
|
||||||
<template v-slot:sider>
|
<div class="sider-content">
|
||||||
<router-link to="/" class="hero-wrapper">
|
<n-space
|
||||||
<hero-gradient class="gradient" />
|
v-if="styleStore.isSmallScreen"
|
||||||
<div class="text-wrapper">
|
justify="center"
|
||||||
<div class="title">IT - TOOLS</div>
|
>
|
||||||
<div class="divider" />
|
<n-button
|
||||||
<div class="subtitle">Handy tools for developers</div>
|
size="large"
|
||||||
</div>
|
circle
|
||||||
</router-link>
|
quaternary
|
||||||
|
tag="a"
|
||||||
|
href="https://github.com/CorentinTh/it-tools"
|
||||||
|
rel="noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<n-icon
|
||||||
|
size="25"
|
||||||
|
:component="BrandGithub"
|
||||||
|
/>
|
||||||
|
</n-button>
|
||||||
|
<n-button
|
||||||
|
size="large"
|
||||||
|
circle
|
||||||
|
quaternary
|
||||||
|
tag="a"
|
||||||
|
href="https://twitter.com/cthmsst"
|
||||||
|
rel="noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<n-icon
|
||||||
|
size="25"
|
||||||
|
:component="BrandTwitter"
|
||||||
|
/>
|
||||||
|
</n-button>
|
||||||
|
<n-button
|
||||||
|
size="large"
|
||||||
|
circle
|
||||||
|
quaternary
|
||||||
|
@click="styleStore.isDarkTheme = !styleStore.isDarkTheme"
|
||||||
|
>
|
||||||
|
<n-icon
|
||||||
|
v-if="styleStore.isDarkTheme"
|
||||||
|
size="25"
|
||||||
|
:component="Sun"
|
||||||
|
/>
|
||||||
|
<n-icon
|
||||||
|
v-else
|
||||||
|
size="25"
|
||||||
|
:component="Moon"
|
||||||
|
/>
|
||||||
|
</n-button>
|
||||||
|
</n-space>
|
||||||
|
|
||||||
<div class="sider-content">
|
<n-menu
|
||||||
<n-space v-if="styleStore.isSmallScreen" justify="center">
|
v-model:value="activeKey"
|
||||||
<n-button size="large" circle quaternary tag="a" href="https://github.com/CorentinTh/it-tools"
|
:value="route.name"
|
||||||
rel="noopener" target="_blank">
|
class="menu"
|
||||||
<n-icon size="25" :component="BrandGithub" />
|
:collapsed-width="64"
|
||||||
</n-button>
|
:collapsed-icon-size="22"
|
||||||
<n-button size="large" circle quaternary tag="a" href="https://twitter.com/cthmsst" rel="noopener"
|
:options="m"
|
||||||
target="_blank">
|
:indent="20"
|
||||||
<n-icon size="25" :component="BrandTwitter" />
|
/>
|
||||||
</n-button>
|
</div>
|
||||||
<n-button size="large" circle quaternary @click="styleStore.isDarkTheme = !styleStore.isDarkTheme">
|
</template>
|
||||||
<n-icon size="25" v-if="styleStore.isDarkTheme" :component="Sun" />
|
|
||||||
<n-icon size="25" v-else :component="Moon" />
|
|
||||||
</n-button>
|
|
||||||
</n-space>
|
|
||||||
|
|
||||||
<n-menu :value="route.name" class="menu" :collapsed-width="64" :collapsed-icon-size="22" :options="m"
|
<template #content>
|
||||||
v-model:value="activeKey" :indent="20" />
|
<div class="navigation">
|
||||||
|
<n-button
|
||||||
|
:size="styleStore.isSmallScreen ? 'medium' : 'large'"
|
||||||
|
circle
|
||||||
|
quaternary
|
||||||
|
aria-label="Toogle menu"
|
||||||
|
@click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed"
|
||||||
|
>
|
||||||
|
<n-icon
|
||||||
|
size="25"
|
||||||
|
:component="Menu2"
|
||||||
|
/>
|
||||||
|
</n-button>
|
||||||
|
|
||||||
</div>
|
<router-link
|
||||||
|
to="/"
|
||||||
|
#="{ navigate, href }"
|
||||||
|
custom
|
||||||
|
>
|
||||||
|
<n-button
|
||||||
|
tag="a"
|
||||||
|
:href="href"
|
||||||
|
:size="styleStore.isSmallScreen ? 'medium' : 'large'"
|
||||||
|
circle
|
||||||
|
quaternary
|
||||||
|
aria-label="Home"
|
||||||
|
@click="navigate"
|
||||||
|
>
|
||||||
|
<n-icon
|
||||||
|
size="25"
|
||||||
|
:component="Home2"
|
||||||
|
/>
|
||||||
|
</n-button>
|
||||||
|
</router-link>
|
||||||
|
|
||||||
|
<search-bar />
|
||||||
|
|
||||||
|
|
||||||
</template>
|
<n-button
|
||||||
|
type="primary"
|
||||||
<template v-slot:content>
|
tag="a"
|
||||||
<div class="navigation">
|
href="https://github.com/sponsors/CorentinTh"
|
||||||
<n-button :size="styleStore.isSmallScreen ? 'medium' : 'large'" circle quaternary
|
rel="noopener"
|
||||||
@click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed" aria-label="Toogle menu">
|
target="_blank"
|
||||||
<n-icon size="25" :component="Menu2" />
|
>
|
||||||
</n-button>
|
<n-icon
|
||||||
|
v-if="!styleStore.isSmallScreen"
|
||||||
<router-link to="/" #="{ navigate, href }" custom>
|
:component="Heart"
|
||||||
<n-button tag="a" :href="href" @click="navigate"
|
style="margin-right: 5px;"
|
||||||
:size="styleStore.isSmallScreen ? 'medium' : 'large'" circle quaternary aria-label="Home">
|
/>
|
||||||
<n-icon size="25" :component="Home2" />
|
Sponsor
|
||||||
</n-button>
|
</n-button>
|
||||||
</router-link>
|
<n-button
|
||||||
|
v-if="!styleStore.isSmallScreen"
|
||||||
<search-bar />
|
size="large"
|
||||||
|
circle
|
||||||
|
quaternary
|
||||||
<n-button type="primary" tag="a" href="https://github.com/sponsors/CorentinTh" rel="noopener"
|
tag="a"
|
||||||
target="_blank">
|
href="https://github.com/CorentinTh/it-tools"
|
||||||
<n-icon :component="Heart" style="margin-right: 5px;" v-if="!styleStore.isSmallScreen" />
|
rel="noopener"
|
||||||
Sponsor
|
target="_blank"
|
||||||
</n-button>
|
aria-label="Github repository"
|
||||||
<n-button size="large" circle quaternary tag="a" href="https://github.com/CorentinTh/it-tools"
|
>
|
||||||
rel="noopener" target="_blank" v-if="!styleStore.isSmallScreen" aria-label="Github repository">
|
<n-icon
|
||||||
<n-icon size="25" :component="BrandGithub" />
|
size="25"
|
||||||
</n-button>
|
:component="BrandGithub"
|
||||||
<n-button size="large" circle quaternary tag="a" href="https://twitter.com/cthmsst" rel="noopener"
|
/>
|
||||||
target="_blank" v-if="!styleStore.isSmallScreen" aria-label="Twitter account">
|
</n-button>
|
||||||
<n-icon size="25" :component="BrandTwitter" />
|
<n-button
|
||||||
</n-button>
|
v-if="!styleStore.isSmallScreen"
|
||||||
<n-button size="large" circle quaternary @click="styleStore.isDarkTheme = !styleStore.isDarkTheme"
|
size="large"
|
||||||
v-if="!styleStore.isSmallScreen" aria-label="Toogle theme">
|
circle
|
||||||
<n-icon size="25" v-if="styleStore.isDarkTheme" :component="Sun" />
|
quaternary
|
||||||
<n-icon size="25" v-else :component="Moon" />
|
tag="a"
|
||||||
</n-button>
|
href="https://twitter.com/cthmsst"
|
||||||
|
rel="noopener"
|
||||||
</div>
|
target="_blank"
|
||||||
<slot />
|
aria-label="Twitter account"
|
||||||
|
>
|
||||||
</template>
|
<n-icon
|
||||||
|
size="25"
|
||||||
</menu-layout>
|
:component="BrandTwitter"
|
||||||
|
/>
|
||||||
|
</n-button>
|
||||||
|
<n-button
|
||||||
|
v-if="!styleStore.isSmallScreen"
|
||||||
|
size="large"
|
||||||
|
circle
|
||||||
|
quaternary
|
||||||
|
aria-label="Toogle theme"
|
||||||
|
@click="styleStore.isDarkTheme = !styleStore.isDarkTheme"
|
||||||
|
>
|
||||||
|
<n-icon
|
||||||
|
v-if="styleStore.isDarkTheme"
|
||||||
|
size="25"
|
||||||
|
:component="Sun"
|
||||||
|
/>
|
||||||
|
<n-icon
|
||||||
|
v-else
|
||||||
|
size="25"
|
||||||
|
:component="Moon"
|
||||||
|
/>
|
||||||
|
</n-button>
|
||||||
|
</div>
|
||||||
|
<slot />
|
||||||
|
</template>
|
||||||
|
</menu-layout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|
|
||||||
|
|
@ -24,17 +24,19 @@ useHead(head)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<base-layout>
|
<base-layout>
|
||||||
<div class="tool-layout">
|
<div class="tool-layout">
|
||||||
<div class="tool-header">
|
<div class="tool-header">
|
||||||
<n-h1>{{ route.meta.name }}</n-h1>
|
<n-h1>{{ route.meta.name }}</n-h1>
|
||||||
<div class="separator" />
|
<div class="separator" />
|
||||||
<div class="description">{{ route.meta.description }}</div>
|
<div class="description">
|
||||||
</div>
|
{{ route.meta.description }}
|
||||||
|
|
||||||
<slot />
|
|
||||||
</div>
|
</div>
|
||||||
</base-layout>
|
</div>
|
||||||
|
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</base-layout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|
|
||||||
|
|
@ -3,25 +3,31 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="e404-wrapper">
|
<div class="e404-wrapper">
|
||||||
<n-result
|
<n-result
|
||||||
status="404"
|
status="404"
|
||||||
title="404 Not Found"
|
title="404 Not Found"
|
||||||
description="Sorry, this page does not seem to extist"
|
description="Sorry, this page does not seem to extist"
|
||||||
|
>
|
||||||
|
<template #footer>
|
||||||
|
<router-link
|
||||||
|
to="/"
|
||||||
|
#="{ navigate, href }"
|
||||||
|
custom
|
||||||
>
|
>
|
||||||
<template #footer>
|
<n-button
|
||||||
<router-link to="/" #="{ navigate, href }" custom>
|
tag="a"
|
||||||
<n-button
|
:href="href"
|
||||||
tag="a"
|
secondary
|
||||||
:href="href"
|
type="success"
|
||||||
secondary
|
@click="navigate"
|
||||||
@click="navigate"
|
>
|
||||||
type="success"
|
Back home
|
||||||
>Back home</n-button>
|
</n-button>
|
||||||
</router-link>
|
</router-link>
|
||||||
</template>
|
</template>
|
||||||
</n-result>
|
</n-result>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,13 +4,20 @@ import ToolCard from '../components/ToolCard.vue';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="home-page">
|
<div class="home-page">
|
||||||
<n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
|
<n-grid
|
||||||
<n-gi v-for="tool in toolsWithCategory" :key="tool.name">
|
x-gap="12"
|
||||||
<tool-card :tool="tool" />
|
y-gap="12"
|
||||||
</n-gi>
|
cols="1 400:2 800:3 1200:4 2000:8"
|
||||||
</n-grid>
|
>
|
||||||
</div>
|
<n-gi
|
||||||
|
v-for="tool in toolsWithCategory"
|
||||||
|
:key="tool.name"
|
||||||
|
>
|
||||||
|
<tool-card :tool="tool" />
|
||||||
|
</n-gi>
|
||||||
|
</n-grid>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,39 @@
|
||||||
<template>
|
<template>
|
||||||
<n-card title="Text to base64">
|
<n-card title="Text to base64">
|
||||||
<n-input v-model:value="textInput" type="textarea" placeholder="Put your string here..." />
|
<n-input
|
||||||
<n-input :value="textBase64" type="textarea" readonly />
|
v-model:value="textInput"
|
||||||
|
type="textarea"
|
||||||
|
placeholder="Put your string here..."
|
||||||
|
/>
|
||||||
|
<n-input
|
||||||
|
:value="textBase64"
|
||||||
|
type="textarea"
|
||||||
|
readonly
|
||||||
|
/>
|
||||||
<n-space justify="center">
|
<n-space justify="center">
|
||||||
<n-button @click="copyTextBase64()" secondary>Copy</n-button>
|
<n-button
|
||||||
|
secondary
|
||||||
|
@click="copyTextBase64()"
|
||||||
|
>
|
||||||
|
Copy
|
||||||
|
</n-button>
|
||||||
</n-space>
|
</n-space>
|
||||||
</n-card>
|
</n-card>
|
||||||
|
|
||||||
<n-card title="File to base64">
|
<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>
|
<n-upload-dragger>
|
||||||
<div style="margin-bottom: 12px">
|
<div style="margin-bottom: 12px">
|
||||||
<n-icon size="35" :depth="3" :component="Upload" />
|
<n-icon
|
||||||
|
size="35"
|
||||||
|
:depth="3"
|
||||||
|
:component="Upload"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<n-text style="font-size: 14px">
|
<n-text style="font-size: 14px">
|
||||||
Click or drag a file to this area to upload
|
Click or drag a file to this area to upload
|
||||||
|
|
@ -19,12 +41,20 @@
|
||||||
</n-upload-dragger>
|
</n-upload-dragger>
|
||||||
</n-upload>
|
</n-upload>
|
||||||
|
|
||||||
<n-input :value="fileBase64" type="textarea" readonly />
|
<n-input
|
||||||
|
:value="fileBase64"
|
||||||
|
type="textarea"
|
||||||
|
readonly
|
||||||
|
/>
|
||||||
<n-space justify="center">
|
<n-space justify="center">
|
||||||
<n-button @click="copyFileBase64()" secondary>Copy</n-button>
|
<n-button
|
||||||
|
secondary
|
||||||
|
@click="copyFileBase64()"
|
||||||
|
>
|
||||||
|
Copy
|
||||||
|
</n-button>
|
||||||
</n-space>
|
</n-space>
|
||||||
</n-card>
|
</n-card>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
||||||
|
|
@ -1,47 +1,69 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<n-card>
|
<n-card>
|
||||||
<n-grid cols="3" x-gap="12">
|
<n-grid
|
||||||
<n-gi span="1">
|
cols="3"
|
||||||
<n-form-item label="Language:">
|
x-gap="12"
|
||||||
<n-select v-model:value="language"
|
>
|
||||||
:options="Object.keys(languages).map(label => ({ label, value: label }))" />
|
<n-gi span="1">
|
||||||
</n-form-item>
|
<n-form-item label="Language:">
|
||||||
</n-gi>
|
<n-select
|
||||||
<n-gi span="2">
|
v-model:value="language"
|
||||||
<n-form-item label="Entropy (seed):" :feedback="entropyValidation.message"
|
:options="Object.keys(languages).map(label => ({ label, value: label }))"
|
||||||
:validation-status="entropyValidation.status">
|
/>
|
||||||
<n-input-group>
|
</n-form-item>
|
||||||
<n-input v-model:value="entropy" placeholder="Your string..." />
|
</n-gi>
|
||||||
<n-button @click="refreshEntropy">
|
<n-gi span="2">
|
||||||
<n-icon size="22">
|
<n-form-item
|
||||||
<Refresh />
|
label="Entropy (seed):"
|
||||||
</n-icon>
|
:feedback="entropyValidation.message"
|
||||||
</n-button>
|
:validation-status="entropyValidation.status"
|
||||||
<n-button @click="copyEntropy">
|
>
|
||||||
<n-icon size="22">
|
<n-input-group>
|
||||||
<Copy />
|
<n-input
|
||||||
</n-icon>
|
v-model:value="entropy"
|
||||||
</n-button>
|
placeholder="Your string..."
|
||||||
</n-input-group>
|
/>
|
||||||
|
<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-button @click="copyPassphrase">
|
||||||
</n-gi>
|
<n-icon
|
||||||
</n-grid>
|
size="22"
|
||||||
<n-form-item label="Passphrase (mnemonic):" :feedback="mnemonicValidation.message"
|
:component="Copy"
|
||||||
:validation-status="mnemonicValidation.status">
|
/>
|
||||||
<n-input-group>
|
</n-button>
|
||||||
<n-input style="text-align: center; flex: 1;" v-model:value="passphrase"
|
</n-input-group>
|
||||||
placeholder="Your mnemonic..." autocomplete="off" autocorrect="off" autocapitalize="off"
|
</n-form-item>
|
||||||
spellcheck="false" />
|
</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>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
||||||
|
|
@ -1,30 +1,57 @@
|
||||||
<template>
|
<template>
|
||||||
<n-card>
|
<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-form-item label="color picker:">
|
||||||
<n-color-picker v-model:value="hex" @update:value="(v: string) => onInputUpdated(v, 'hex')"
|
<n-color-picker
|
||||||
placement="bottom-end" />
|
v-model:value="hex"
|
||||||
|
placement="bottom-end"
|
||||||
|
@update:value="(v: string) => onInputUpdated(v, 'hex')"
|
||||||
|
/>
|
||||||
</n-form-item>
|
</n-form-item>
|
||||||
<n-form-item label="color name:">
|
<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>
|
||||||
<n-form-item label="hex:">
|
<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>
|
||||||
<n-form-item label="rgb:">
|
<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>
|
||||||
<n-form-item label="hsl:">
|
<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>
|
||||||
<n-form-item label="hwb:">
|
<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>
|
||||||
<n-form-item label="lch:">
|
<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>
|
||||||
<n-form-item label="cmyk:">
|
<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-item>
|
||||||
</n-form>
|
</n-form>
|
||||||
</n-card>
|
</n-card>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<n-card>
|
<n-card>
|
||||||
<n-form-item class="cron" :show-label="false" :feedback="cronValidation.message"
|
<n-form-item
|
||||||
:validation-status="cronValidation.status">
|
class="cron"
|
||||||
<n-input v-model:value="cron" size="large" placeholder="* * * * *" />
|
:show-label="false"
|
||||||
|
:feedback="cronValidation.message"
|
||||||
|
:validation-status="cronValidation.status"
|
||||||
|
>
|
||||||
|
<n-input
|
||||||
|
v-model:value="cron"
|
||||||
|
size="large"
|
||||||
|
placeholder="* * * * *"
|
||||||
|
/>
|
||||||
</n-form-item>
|
</n-form-item>
|
||||||
<div class="cron-string">
|
<div class="cron-string">
|
||||||
{{ cronString }}
|
{{ cronString }}
|
||||||
|
|
@ -11,8 +19,11 @@
|
||||||
<n-divider />
|
<n-divider />
|
||||||
|
|
||||||
<n-space justify="center">
|
<n-space justify="center">
|
||||||
|
<n-form
|
||||||
<n-form :show-feedback="false" label-width="170" label-placement="left">
|
:show-feedback="false"
|
||||||
|
label-width="170"
|
||||||
|
label-placement="left"
|
||||||
|
>
|
||||||
<n-form-item label="Verbose">
|
<n-form-item label="Verbose">
|
||||||
<n-switch v-model:value="cronstrueConfig.verbose" />
|
<n-switch v-model:value="cronstrueConfig.verbose" />
|
||||||
</n-form-item>
|
</n-form-item>
|
||||||
|
|
@ -41,16 +52,28 @@
|
||||||
<n-table size="small">
|
<n-table size="small">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th class="text-left" scope="col">
|
<th
|
||||||
|
class="text-left"
|
||||||
|
scope="col"
|
||||||
|
>
|
||||||
Symbol
|
Symbol
|
||||||
</th>
|
</th>
|
||||||
<th class="text-left" scope="col">
|
<th
|
||||||
|
class="text-left"
|
||||||
|
scope="col"
|
||||||
|
>
|
||||||
Meaning
|
Meaning
|
||||||
</th>
|
</th>
|
||||||
<th class="text-left" scope="col">
|
<th
|
||||||
|
class="text-left"
|
||||||
|
scope="col"
|
||||||
|
>
|
||||||
Example
|
Example
|
||||||
</th>
|
</th>
|
||||||
<th class="text-left" scope="col">
|
<th
|
||||||
|
class="text-left"
|
||||||
|
scope="col"
|
||||||
|
>
|
||||||
Equivalent
|
Equivalent
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
@ -152,7 +175,6 @@
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</n-table>
|
</n-table>
|
||||||
|
|
||||||
</n-card>
|
</n-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,31 +1,50 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<n-card>
|
<n-card>
|
||||||
<n-space justify="center">
|
<n-space justify="center">
|
||||||
<n-form-item label="Use current date-time ?" label-placement="left" :show-feedback="false">
|
<n-form-item
|
||||||
<n-switch v-model:value="useCurrentDate" />
|
label="Use current date-time ?"
|
||||||
</n-form-item>
|
label-placement="left"
|
||||||
</n-space>
|
:show-feedback="false"
|
||||||
<n-form-item :feedback="inputInvalid ? 'Invalid date for the current format' : ''"
|
>
|
||||||
:validation-status="inputInvalid ? 'error' : undefined">
|
<n-switch v-model:value="useCurrentDate" />
|
||||||
<n-input-group style="flex-grow: 1;">
|
</n-form-item>
|
||||||
<n-select v-model:value="inputFormat" style="width: 200px;"
|
</n-space>
|
||||||
:options="formats.map(({ name }, i) => ({ label: name, value: i }))"
|
<n-form-item
|
||||||
:disabled="useCurrentDate" />
|
: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"
|
<n-input
|
||||||
placeholder="Your date string..." />
|
v-model:value="inputDate"
|
||||||
</n-input-group>
|
:on-input="onDateInputChanged"
|
||||||
</n-form-item>
|
:disabled="useCurrentDate"
|
||||||
<n-divider style="margin-top: 0;"></n-divider>
|
placeholder="Your date string..."
|
||||||
<div v-for="{ name, fromDate } in formats" :key="name" style="margin: 5px 0;">
|
/>
|
||||||
<n-input-group>
|
</n-input-group>
|
||||||
<n-input-group-label style="width: 150px;">{{ name }}</n-input-group-label>
|
</n-form-item>
|
||||||
<n-input :value="fromDate(date)" />
|
<n-divider style="margin-top: 0;" />
|
||||||
</n-input-group>
|
<div
|
||||||
</div>
|
v-for="{ name, fromDate } in formats"
|
||||||
</n-card>
|
:key="name"
|
||||||
</div>
|
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>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
||||||
|
|
@ -1,81 +1,105 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<n-card title="Encrypt">
|
<n-card title="Encrypt">
|
||||||
<n-space item-style="flex: 1 1 0">
|
<n-space item-style="flex: 1 1 0">
|
||||||
<n-form-item label="Your text:" :show-feedback="false">
|
<n-form-item
|
||||||
<n-input
|
label="Your text:"
|
||||||
v-model:value="cypherInput"
|
:show-feedback="false"
|
||||||
type="textarea"
|
>
|
||||||
placeholder="The string to cypher"
|
<n-input
|
||||||
:autosize="{ minRows: 4 }"
|
v-model:value="cypherInput"
|
||||||
/>
|
type="textarea"
|
||||||
</n-form-item>
|
placeholder="The string to cypher"
|
||||||
<n-space vertical>
|
:autosize="{ minRows: 4 }"
|
||||||
<n-form-item label="Your secret key:" :show-feedback="false">
|
/>
|
||||||
<n-input v-model:value="cypherSecret" />
|
</n-form-item>
|
||||||
</n-form-item>
|
<n-space vertical>
|
||||||
<n-form-item label="Encryption algorithm:" :show-feedback="false">
|
<n-form-item
|
||||||
<n-select
|
label="Your secret key:"
|
||||||
v-model:value="cypherAlgo"
|
:show-feedback="false"
|
||||||
:options="Object.keys(algos).map(label => ({ label, value: label }))"
|
>
|
||||||
/>
|
<n-input v-model:value="cypherSecret" />
|
||||||
</n-form-item>
|
</n-form-item>
|
||||||
</n-space>
|
<n-form-item
|
||||||
</n-space>
|
label="Encryption algorithm:"
|
||||||
<br />
|
:show-feedback="false"
|
||||||
<n-form-item label="Yout text encrypted:" :show-feedback="false">
|
>
|
||||||
<n-input
|
<n-select
|
||||||
:value="cypherOutput"
|
v-model:value="cypherAlgo"
|
||||||
type="textarea"
|
:options="Object.keys(algos).map(label => ({ label, value: label }))"
|
||||||
placeholder="Your string hash"
|
/>
|
||||||
:autosize="{ minRows: 2 }"
|
</n-form-item>
|
||||||
readonly
|
</n-space>
|
||||||
autocomplete="off"
|
</n-space>
|
||||||
autocorrect="off"
|
<br>
|
||||||
autocapitalize="off"
|
<n-form-item
|
||||||
spellcheck="false"
|
label="Yout text encrypted:"
|
||||||
/>
|
:show-feedback="false"
|
||||||
</n-form-item>
|
>
|
||||||
</n-card>
|
<n-input
|
||||||
<br />
|
:value="cypherOutput"
|
||||||
<n-card title="Decrypt">
|
type="textarea"
|
||||||
<n-space item-style="flex: 1 1 0">
|
placeholder="Your string hash"
|
||||||
<n-form-item label="Your encrypted text:" :show-feedback="false">
|
:autosize="{ minRows: 2 }"
|
||||||
<n-input
|
readonly
|
||||||
v-model:value="decryptInput"
|
autocomplete="off"
|
||||||
type="textarea"
|
autocorrect="off"
|
||||||
placeholder="The string to cypher"
|
autocapitalize="off"
|
||||||
:autosize="{ minRows: 4 }"
|
spellcheck="false"
|
||||||
/>
|
/>
|
||||||
</n-form-item>
|
</n-form-item>
|
||||||
<n-space vertical>
|
</n-card>
|
||||||
<n-form-item label="Your secret key:" :show-feedback="false">
|
<br>
|
||||||
<n-input v-model:value="decryptSecret" />
|
<n-card title="Decrypt">
|
||||||
</n-form-item>
|
<n-space item-style="flex: 1 1 0">
|
||||||
<n-form-item label="Encryption algorithm:" :show-feedback="false">
|
<n-form-item
|
||||||
<n-select
|
label="Your encrypted text:"
|
||||||
v-model:value="decryptAlgo"
|
:show-feedback="false"
|
||||||
:options="Object.keys(algos).map(label => ({ label, value: label }))"
|
>
|
||||||
/>
|
<n-input
|
||||||
</n-form-item>
|
v-model:value="decryptInput"
|
||||||
</n-space>
|
type="textarea"
|
||||||
</n-space>
|
placeholder="The string to cypher"
|
||||||
<br />
|
:autosize="{ minRows: 4 }"
|
||||||
<n-form-item label="Yout decrypted text:" :show-feedback="false">
|
/>
|
||||||
<n-input
|
</n-form-item>
|
||||||
:value="decryptOutput"
|
<n-space vertical>
|
||||||
type="textarea"
|
<n-form-item
|
||||||
placeholder="Your string hash"
|
label="Your secret key:"
|
||||||
:autosize="{ minRows: 2 }"
|
:show-feedback="false"
|
||||||
readonly
|
>
|
||||||
autocomplete="off"
|
<n-input v-model:value="decryptSecret" />
|
||||||
autocorrect="off"
|
</n-form-item>
|
||||||
autocapitalize="off"
|
<n-form-item
|
||||||
spellcheck="false"
|
label="Encryption algorithm:"
|
||||||
/>
|
:show-feedback="false"
|
||||||
</n-form-item>
|
>
|
||||||
</n-card>
|
<n-select
|
||||||
</div>
|
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>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<memo />
|
<memo />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
||||||
|
|
@ -1,39 +1,45 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<n-card>
|
<n-card>
|
||||||
<n-input
|
<n-input
|
||||||
v-model:value="clearText"
|
v-model:value="clearText"
|
||||||
type="textarea"
|
type="textarea"
|
||||||
placeholder="Your string..."
|
placeholder="Your string..."
|
||||||
:autosize="{ minRows: 3 }"
|
:autosize="{ minRows: 3 }"
|
||||||
/>
|
/>
|
||||||
<br />
|
<br>
|
||||||
<br />
|
<br>
|
||||||
<n-select
|
<n-select
|
||||||
v-model:value="algo"
|
v-model:value="algo"
|
||||||
:options="Object.keys(algos).map(label => ({ label, value: label }))"
|
:options="Object.keys(algos).map(label => ({ label, value: label }))"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<br />
|
<br>
|
||||||
<n-input
|
<n-input
|
||||||
style="text-align: center;"
|
style="text-align: center;"
|
||||||
:value="hashedText"
|
:value="hashedText"
|
||||||
type="textarea"
|
type="textarea"
|
||||||
placeholder="Your string hash"
|
placeholder="Your string hash"
|
||||||
:autosize="{ minRows: 1 }"
|
:autosize="{ minRows: 1 }"
|
||||||
readonly
|
readonly
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
autocorrect="off"
|
autocorrect="off"
|
||||||
autocapitalize="off"
|
autocapitalize="off"
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
/>
|
/>
|
||||||
<br />
|
<br>
|
||||||
<br />
|
<br>
|
||||||
<n-space justify="center">
|
<n-space justify="center">
|
||||||
<n-button @click="copy" secondary autofocus>Copy</n-button>
|
<n-button
|
||||||
</n-space>
|
secondary
|
||||||
</n-card>
|
autofocus
|
||||||
</div>
|
@click="copy"
|
||||||
|
>
|
||||||
|
Copy
|
||||||
|
</n-button>
|
||||||
|
</n-space>
|
||||||
|
</n-card>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
||||||
|
|
@ -1,54 +1,95 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<n-card>
|
<n-card>
|
||||||
<n-input-group>
|
<n-input-group>
|
||||||
<n-input-group-label style="width: 200px;">Input number:</n-input-group-label>
|
<n-input-group-label style="width: 200px;">
|
||||||
<n-input-number v-model:value="inputNumber" min="0" />
|
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-group-label style="width: 200px;">
|
||||||
<n-input-number v-model:value="inputBase" max="64" min="2" style="width: 100px;" />
|
Input base:
|
||||||
</n-input-group>
|
</n-input-group-label>
|
||||||
<n-divider></n-divider>
|
<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>
|
||||||
<n-input-group-label style="width: 200px;">Binary (2):</n-input-group-label>
|
<n-input-group-label style="width: 200px;">
|
||||||
<n-input :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 2 })"
|
Binary (2):
|
||||||
readonly />
|
</n-input-group-label>
|
||||||
</n-input-group>
|
<n-input
|
||||||
|
:value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 2 })"
|
||||||
|
readonly
|
||||||
|
/>
|
||||||
|
</n-input-group>
|
||||||
|
|
||||||
<n-input-group>
|
<n-input-group>
|
||||||
<n-input-group-label style="width: 200px;">Octale (8):</n-input-group-label>
|
<n-input-group-label style="width: 200px;">
|
||||||
<n-input :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 8 })"
|
Octale (8):
|
||||||
readonly />
|
</n-input-group-label>
|
||||||
</n-input-group>
|
<n-input
|
||||||
|
:value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 8 })"
|
||||||
|
readonly
|
||||||
|
/>
|
||||||
|
</n-input-group>
|
||||||
|
|
||||||
<n-input-group>
|
<n-input-group>
|
||||||
<n-input-group-label style="width: 200px;">Decimal (10):</n-input-group-label>
|
<n-input-group-label style="width: 200px;">
|
||||||
<n-input :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 10 })"
|
Decimal (10):
|
||||||
readonly />
|
</n-input-group-label>
|
||||||
</n-input-group>
|
<n-input
|
||||||
|
:value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 10 })"
|
||||||
|
readonly
|
||||||
|
/>
|
||||||
|
</n-input-group>
|
||||||
|
|
||||||
<n-input-group>
|
<n-input-group>
|
||||||
<n-input-group-label style="width: 200px;">Hexadecimal (16):</n-input-group-label>
|
<n-input-group-label style="width: 200px;">
|
||||||
<n-input :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 16 })"
|
Hexadecimal (16):
|
||||||
readonly />
|
</n-input-group-label>
|
||||||
</n-input-group>
|
<n-input
|
||||||
|
:value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 16 })"
|
||||||
|
readonly
|
||||||
|
/>
|
||||||
|
</n-input-group>
|
||||||
|
|
||||||
<n-input-group>
|
<n-input-group>
|
||||||
<n-input-group-label style="width: 200px;">Base64 (64):</n-input-group-label>
|
<n-input-group-label style="width: 200px;">
|
||||||
<n-input :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 64 })"
|
Base64 (64):
|
||||||
readonly />
|
</n-input-group-label>
|
||||||
</n-input-group>
|
<n-input
|
||||||
<n-input-group>
|
:value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 64 })"
|
||||||
<n-input-group-label style="width: 90px;">Custom:</n-input-group-label>
|
readonly
|
||||||
<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 })"
|
</n-input-group>
|
||||||
readonly />
|
<n-input-group>
|
||||||
</n-input-group>
|
<n-input-group-label style="width: 90px;">
|
||||||
</n-card>
|
Custom:
|
||||||
</div>
|
</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>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
||||||
|
|
@ -1,30 +1,84 @@
|
||||||
<template>
|
<template>
|
||||||
<n-card>
|
<n-card>
|
||||||
<n-form-item label="Paragraphs" :show-feedback="false" label-width="200" label-placement="left">
|
<n-form-item
|
||||||
<n-slider v-model:value="paragraphs" :step="1" :min="1" :max="20" />
|
label="Paragraphs"
|
||||||
</n-form-item>
|
:show-feedback="false"
|
||||||
<n-form-item label="Sentences per paragraph" :show-feedback="false" label-width="200" label-placement="left">
|
label-width="200"
|
||||||
<n-slider v-model:value="sentences" range :step="1" :min="1" :max="50" />
|
label-placement="left"
|
||||||
</n-form-item>
|
>
|
||||||
<n-form-item label="Words per sentence" :show-feedback="false" label-width="200" label-placement="left">
|
<n-slider
|
||||||
<n-slider v-model:value="words" range :step="1" :min="1" :max="50" />
|
v-model:value="paragraphs"
|
||||||
</n-form-item>
|
:step="1"
|
||||||
<n-form-item label="Start with lorem ipsum ?" :show-feedback="false" label-width="200" label-placement="left">
|
:min="1"
|
||||||
<n-switch v-model:value="startWithLoremIpsum" />
|
:max="20"
|
||||||
</n-form-item>
|
/>
|
||||||
<n-form-item label="As html ?" :show-feedback="false" label-width="200" label-placement="left">
|
</n-form-item>
|
||||||
<n-switch v-model:value="asHTML" />
|
<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 />
|
<n-input
|
||||||
<br>
|
:value="loremIpsumText"
|
||||||
<br>
|
type="textarea"
|
||||||
<n-space justify="center">
|
placeholder="Your lorem ipsum..."
|
||||||
<n-button @click="copy" secondary autofocus>Copy</n-button>
|
autosize
|
||||||
</n-space>
|
readonly
|
||||||
</n-card>
|
/>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<n-space justify="center">
|
||||||
|
<n-button
|
||||||
|
secondary
|
||||||
|
autofocus
|
||||||
|
@click="copy"
|
||||||
|
>
|
||||||
|
Copy
|
||||||
|
</n-button>
|
||||||
|
</n-space>
|
||||||
|
</n-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
||||||
|
|
@ -1,27 +1,56 @@
|
||||||
<template>
|
<template>
|
||||||
<n-card>
|
<n-card>
|
||||||
<n-grid cols="3" x-gap="12">
|
<n-grid
|
||||||
|
cols="3"
|
||||||
|
x-gap="12"
|
||||||
|
>
|
||||||
<n-gi span="2">
|
<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-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>
|
||||||
<n-form-item label="Foreground color:">
|
<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>
|
||||||
<n-form-item label="Background color:">
|
<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>
|
||||||
<n-form-item label="Error resistance:">
|
<n-form-item label="Error resistance:">
|
||||||
<n-select v-model:value="errorCorrectionLevel"
|
<n-select
|
||||||
:options="errorCorrectionLevels.map((value) => ({ label: value, value }))" />
|
v-model:value="errorCorrectionLevel"
|
||||||
|
:options="errorCorrectionLevels.map((value) => ({ label: value, value }))"
|
||||||
|
/>
|
||||||
</n-form-item>
|
</n-form-item>
|
||||||
</n-form>
|
</n-form>
|
||||||
</n-gi>
|
</n-gi>
|
||||||
<n-gi>
|
<n-gi>
|
||||||
<n-space justify="center" align="center" vertical>
|
<n-space
|
||||||
<n-image :src="qrcode" width="200" />
|
justify="center"
|
||||||
<n-button @click="download" secondary>Download qr-code</n-button>
|
align="center"
|
||||||
|
vertical
|
||||||
|
>
|
||||||
|
<n-image
|
||||||
|
:src="qrcode"
|
||||||
|
width="200"
|
||||||
|
/>
|
||||||
|
<n-button
|
||||||
|
secondary
|
||||||
|
@click="download"
|
||||||
|
>
|
||||||
|
Download qr-code
|
||||||
|
</n-button>
|
||||||
</n-space>
|
</n-space>
|
||||||
</n-gi>
|
</n-gi>
|
||||||
</n-grid>
|
</n-grid>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,23 @@
|
||||||
<template>
|
<template>
|
||||||
<n-card>
|
<n-card>
|
||||||
<div class="port">{{ port }}</div>
|
<div class="port">
|
||||||
<n-space justify="center">
|
{{ port }}
|
||||||
<n-button @click="copy" secondary>Copy</n-button>
|
</div>
|
||||||
<n-button @click="refreshPort" secondary>Refresh</n-button>
|
<n-space justify="center">
|
||||||
</n-space>
|
<n-button
|
||||||
</n-card>
|
secondary
|
||||||
|
@click="copy"
|
||||||
|
>
|
||||||
|
Copy
|
||||||
|
</n-button>
|
||||||
|
<n-button
|
||||||
|
secondary
|
||||||
|
@click="refreshPort"
|
||||||
|
>
|
||||||
|
Refresh
|
||||||
|
</n-button>
|
||||||
|
</n-space>
|
||||||
|
</n-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,51 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<n-card title="Arabic to roman">
|
<n-card title="Arabic to roman">
|
||||||
<n-space align="center" justify="space-between">
|
<n-space
|
||||||
<n-input-number
|
align="center"
|
||||||
v-model:value="inputNumeral"
|
justify="space-between"
|
||||||
:min="1"
|
>
|
||||||
style="width: 200px;"
|
<n-input-number
|
||||||
:show-button="false"
|
v-model:value="inputNumeral"
|
||||||
/>
|
:min="1"
|
||||||
<div class="result">{{ outputRoman }}</div>
|
style="width: 200px;"
|
||||||
<n-button @click="copyRoman" secondary autofocus>Copy</n-button>
|
:show-button="false"
|
||||||
</n-space>
|
/>
|
||||||
</n-card>
|
<div class="result">
|
||||||
<br />
|
{{ outputRoman }}
|
||||||
<n-card title="Roman to arabic">
|
</div>
|
||||||
<n-space align="center" justify="space-between">
|
<n-button
|
||||||
<n-input v-model:value="inputRoman" style="width: 200px;" />
|
secondary
|
||||||
<div class="result">{{ outputNumeral }}</div>
|
autofocus
|
||||||
<n-button @click="copyArabic" secondary autofocus>Copy</n-button>
|
@click="copyRoman"
|
||||||
</n-space>
|
>
|
||||||
</n-card>
|
Copy
|
||||||
</div>
|
</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>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,30 @@
|
||||||
<template>
|
<template>
|
||||||
<n-card>
|
<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>
|
||||||
<br>
|
<br>
|
||||||
<n-space justify="space-around">
|
<n-space justify="space-around">
|
||||||
<n-statistic label="Character count" :value="text.length" />
|
<n-statistic
|
||||||
<n-statistic label="Word count" :value="text.split(/\s+/).length" />
|
label="Character count"
|
||||||
<n-statistic label="Line count" :value="text.split(/\r\n|\r|\n/).length" />
|
:value="text.length"
|
||||||
<n-statistic label="Byte size" :value="formatBytes(getStringSizeInBytes(text))" />
|
/>
|
||||||
|
<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-space>
|
||||||
</n-card>
|
</n-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,54 +1,80 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<n-card>
|
<n-card>
|
||||||
<n-form label-placement="left" label-width="140">
|
<n-form
|
||||||
<n-space justify="center" item-style="padding: 0" :size="0">
|
label-placement="left"
|
||||||
<div>
|
label-width="140"
|
||||||
<n-form-item label="Uppercase (ABC...)">
|
>
|
||||||
<n-switch v-model:value="withUppercase" />
|
<n-space
|
||||||
</n-form-item>
|
justify="center"
|
||||||
|
item-style="padding: 0"
|
||||||
<n-form-item label="Lowercase (abc...)">
|
:size="0"
|
||||||
<n-switch v-model:value="withLowercase" />
|
>
|
||||||
</n-form-item>
|
<div>
|
||||||
</div>
|
<n-form-item label="Uppercase (ABC...)">
|
||||||
|
<n-switch v-model:value="withUppercase" />
|
||||||
<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-form-item>
|
||||||
|
|
||||||
<n-input
|
<n-form-item label="Lowercase (abc...)">
|
||||||
style="text-align: center;"
|
<n-switch v-model:value="withLowercase" />
|
||||||
v-model:value="token"
|
</n-form-item>
|
||||||
type="textarea"
|
</div>
|
||||||
placeholder="The token..."
|
|
||||||
:autosize="{ minRows: 1 }"
|
<div>
|
||||||
readonly
|
<n-form-item label="Numbers (012...)">
|
||||||
autocomplete="off"
|
<n-switch v-model:value="withNumbers" />
|
||||||
autocorrect="off"
|
</n-form-item>
|
||||||
autocapitalize="off"
|
|
||||||
spellcheck="false"
|
<n-form-item label="Symbols (;-!...)">
|
||||||
/>
|
<n-switch v-model:value="withSymbols" />
|
||||||
<br />
|
</n-form-item>
|
||||||
<br />
|
</div>
|
||||||
<n-space justify="center">
|
</n-space>
|
||||||
<n-button @click="copy" secondary autofocus>Copy</n-button>
|
</n-form>
|
||||||
<n-button @click="refreshToken" secondary>Refresh</n-button>
|
|
||||||
</n-space>
|
<n-form-item
|
||||||
</n-card>
|
:label="`Length (${length})`"
|
||||||
</div>
|
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>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
||||||
|
|
@ -1,38 +1,72 @@
|
||||||
<template>
|
<template>
|
||||||
<n-space item-style="flex:1">
|
<n-space item-style="flex:1">
|
||||||
<n-card title="Encode">
|
<n-card title="Encode">
|
||||||
<n-form-item label="Your string :" :feedback="encodedValidation.message"
|
<n-form-item
|
||||||
:validation-status="encodedValidation.status">
|
label="Your string :"
|
||||||
<n-input v-model:value="encodeInput" type="textarea" placeholder="The string to encode"
|
:feedback="encodedValidation.message"
|
||||||
:autosize="{ minRows: 3 }" />
|
:validation-status="encodedValidation.status"
|
||||||
</n-form-item>
|
>
|
||||||
|
<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-form-item label="Your string encoded :">
|
||||||
<n-input :value="encodeOutput" type="textarea" readonly placeholder="Your string encoded"
|
<n-input
|
||||||
:autosize="{ minRows: 3 }" />
|
:value="encodeOutput"
|
||||||
</n-form-item>
|
type="textarea"
|
||||||
|
readonly
|
||||||
|
placeholder="Your string encoded"
|
||||||
|
:autosize="{ minRows: 3 }"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
<n-space justify="center">
|
<n-space justify="center">
|
||||||
<n-button @click="copyEncoded" secondary>Copy</n-button>
|
<n-button
|
||||||
</n-space>
|
secondary
|
||||||
</n-card>
|
@click="copyEncoded"
|
||||||
<n-card title="Encode">
|
>
|
||||||
<n-form-item label="Your encode string :" :feedback="decodeValidation.message"
|
Copy
|
||||||
:validation-status="decodeValidation.status">
|
</n-button>
|
||||||
<n-input v-model:value="decodeInput" type="textarea" placeholder="The string to decode"
|
</n-space>
|
||||||
:autosize="{ minRows: 3 }" />
|
</n-card>
|
||||||
</n-form-item>
|
<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-form-item label="Your string decoded :">
|
||||||
<n-input :value="decodeOutput" type="textarea" readonly placeholder="Your string decoded"
|
<n-input
|
||||||
:autosize="{ minRows: 3 }" />
|
:value="decodeOutput"
|
||||||
</n-form-item>
|
type="textarea"
|
||||||
|
readonly
|
||||||
|
placeholder="Your string decoded"
|
||||||
|
:autosize="{ minRows: 3 }"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
<n-space justify="center">
|
<n-space justify="center">
|
||||||
<n-button @click="copyDecoded" secondary>Copy</n-button>
|
<n-button
|
||||||
</n-space>
|
secondary
|
||||||
</n-card>
|
@click="copyDecoded"
|
||||||
</n-space>
|
>
|
||||||
|
Copy
|
||||||
|
</n-button>
|
||||||
|
</n-space>
|
||||||
|
</n-card>
|
||||||
|
</n-space>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
||||||
|
|
@ -1,31 +1,49 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<n-card>
|
<n-card>
|
||||||
<n-space align="center" justify="center">
|
<n-space
|
||||||
Quantity :
|
align="center"
|
||||||
<n-input-number v-model:value="count" :min="1" :max="50" />
|
justify="center"
|
||||||
</n-space>
|
>
|
||||||
<br />
|
Quantity :
|
||||||
<n-input
|
<n-input-number
|
||||||
style="text-align: center; font-family: monospace;"
|
v-model:value="count"
|
||||||
:value="uuids"
|
:min="1"
|
||||||
type="textarea"
|
:max="50"
|
||||||
placeholder="Your uuids"
|
/>
|
||||||
:autosize="{ minRows: 1 }"
|
</n-space>
|
||||||
readonly
|
<br>
|
||||||
autocomplete="off"
|
<n-input
|
||||||
autocorrect="off"
|
style="text-align: center; font-family: monospace;"
|
||||||
autocapitalize="off"
|
:value="uuids"
|
||||||
spellcheck="false"
|
type="textarea"
|
||||||
/>
|
placeholder="Your uuids"
|
||||||
<br />
|
:autosize="{ minRows: 1 }"
|
||||||
<br />
|
readonly
|
||||||
<n-space justify="center">
|
autocomplete="off"
|
||||||
<n-button @click="copy" secondary autofocus>Copy</n-button>
|
autocorrect="off"
|
||||||
<n-button @click="refreshUUIDs" secondary>Refresh</n-button>
|
autocapitalize="off"
|
||||||
</n-space>
|
spellcheck="false"
|
||||||
</n-card>
|
/>
|
||||||
</div>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,7 @@
|
||||||
"baseUrl": ".",
|
"baseUrl": ".",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@/*": ["./src/*"]
|
"@/*": ["./src/*"]
|
||||||
}
|
},
|
||||||
|
"types": ["naive-ui/volar"]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue