refactor(ui): replaced naive ui cards with custom ones
This commit is contained in:
Corentin Thomasset
parent
bb32513bd3
commit
23587747e1
261
components.d.ts
vendored
261
components.d.ts
vendored
@ -5,138 +5,139 @@
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
import '@vue/runtime-core'
|
||||
|
||||
export {}
|
||||
export {};
|
||||
|
||||
declare module '@vue/runtime-core' {
|
||||
export interface GlobalComponents {
|
||||
'404.page': typeof import('./src/pages/404.page.vue')['default']
|
||||
About: typeof import('./src/pages/About.vue')['default']
|
||||
App: typeof import('./src/App.vue')['default']
|
||||
'Base.layout': typeof import('./src/layouts/base.layout.vue')['default']
|
||||
Base64FileConverter: typeof import('./src/tools/base64-file-converter/base64-file-converter.vue')['default']
|
||||
Base64StringConverter: typeof import('./src/tools/base64-string-converter/base64-string-converter.vue')['default']
|
||||
BasicAuthGenerator: typeof import('./src/tools/basic-auth-generator/basic-auth-generator.vue')['default']
|
||||
Bcrypt: typeof import('./src/tools/bcrypt/bcrypt.vue')['default']
|
||||
BenchmarkBuilder: typeof import('./src/tools/benchmark-builder/benchmark-builder.vue')['default']
|
||||
Bip39Generator: typeof import('./src/tools/bip39-generator/bip39-generator.vue')['default']
|
||||
CaseConverter: typeof import('./src/tools/case-converter/case-converter.vue')['default']
|
||||
CButton: typeof import('./src/ui/c-button/c-button.vue')['default']
|
||||
ChmodCalculator: typeof import('./src/tools/chmod-calculator/chmod-calculator.vue')['default']
|
||||
Chronometer: typeof import('./src/tools/chronometer/chronometer.vue')['default']
|
||||
CLink: typeof import('./src/ui/c-link/c-link.vue')['default']
|
||||
CollapsibleToolMenu: typeof import('./src/components/CollapsibleToolMenu.vue')['default']
|
||||
ColorConverter: typeof import('./src/tools/color-converter/color-converter.vue')['default']
|
||||
ColoredCard: typeof import('./src/components/ColoredCard.vue')['default']
|
||||
CopyableIpLike: typeof import('./src/tools/ipv4-subnet-calculator/copyable-ip-like.vue')['default']
|
||||
CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default']
|
||||
DateTimeConverter: typeof import('./src/tools/date-time-converter/date-time-converter.vue')['default']
|
||||
DeviceInformation: typeof import('./src/tools/device-information/device-information.vue')['default']
|
||||
DockerRunToDockerComposeConverter: typeof import('./src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue')['default']
|
||||
DynamicValues: typeof import('./src/tools/benchmark-builder/dynamic-values.vue')['default']
|
||||
Editor: typeof import('./src/tools/html-wysiwyg-editor/editor/editor.vue')['default']
|
||||
Encryption: typeof import('./src/tools/encryption/encryption.vue')['default']
|
||||
EtaCalculator: typeof import('./src/tools/eta-calculator/eta-calculator.vue')['default']
|
||||
FavoriteButton: typeof import('./src/components/FavoriteButton.vue')['default']
|
||||
FormatTransformer: typeof import('./src/components/FormatTransformer.vue')['default']
|
||||
GitMemo: typeof import('./src/tools/git-memo/git-memo.md')['default']
|
||||
HashText: typeof import('./src/tools/hash-text/hash-text.vue')['default']
|
||||
HmacGenerator: typeof import('./src/tools/hmac-generator/hmac-generator.vue')['default']
|
||||
'Home.page': typeof import('./src/pages/Home.page.vue')['default']
|
||||
HtmlEntities: typeof import('./src/tools/html-entities/html-entities.vue')['default']
|
||||
HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default']
|
||||
HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
|
||||
InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
|
||||
IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
|
||||
Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default']
|
||||
Ipv4RangeExpander: typeof import('./src/tools/ipv4-range-expander/ipv4-range-expander.vue')['default']
|
||||
Ipv4SubnetCalculator: typeof import('./src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue')['default']
|
||||
Ipv6UlaGenerator: typeof import('./src/tools/ipv6-ula-generator/ipv6-ula-generator.vue')['default']
|
||||
JsonMinify: typeof import('./src/tools/json-minify/json-minify.vue')['default']
|
||||
JsonToYaml: typeof import('./src/tools/json-to-yaml-converter/json-to-yaml.vue')['default']
|
||||
JsonViewer: typeof import('./src/tools/json-viewer/json-viewer.vue')['default']
|
||||
JwtParser: typeof import('./src/tools/jwt-parser/jwt-parser.vue')['default']
|
||||
KeycodeInfo: typeof import('./src/tools/keycode-info/keycode-info.vue')['default']
|
||||
LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default']
|
||||
MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default']
|
||||
MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default']
|
||||
MenuBar: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar.vue')['default']
|
||||
MenuBarItem: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue')['default']
|
||||
MenuIconItem: typeof import('./src/components/MenuIconItem.vue')['default']
|
||||
MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
|
||||
MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
|
||||
MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
|
||||
NAlert: typeof import('naive-ui')['NAlert']
|
||||
NAutoComplete: typeof import('naive-ui')['NAutoComplete']
|
||||
NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
|
||||
NButton: typeof import('naive-ui')['NButton']
|
||||
NCard: typeof import('naive-ui')['NCard']
|
||||
NCheckbox: typeof import('naive-ui')['NCheckbox']
|
||||
NCode: typeof import('naive-ui')['NCode']
|
||||
NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
|
||||
NColorPicker: typeof import('naive-ui')['NColorPicker']
|
||||
NConfigProvider: typeof import('naive-ui')['NConfigProvider']
|
||||
NDatePicker: typeof import('naive-ui')['NDatePicker']
|
||||
NDivider: typeof import('naive-ui')['NDivider']
|
||||
NDynamicInput: typeof import('naive-ui')['NDynamicInput']
|
||||
NEllipsis: typeof import('naive-ui')['NEllipsis']
|
||||
NForm: typeof import('naive-ui')['NForm']
|
||||
NFormItem: typeof import('naive-ui')['NFormItem']
|
||||
NGi: typeof import('naive-ui')['NGi']
|
||||
NGrid: typeof import('naive-ui')['NGrid']
|
||||
NH1: typeof import('naive-ui')['NH1']
|
||||
NH2: typeof import('naive-ui')['NH2']
|
||||
NH3: typeof import('naive-ui')['NH3']
|
||||
NIcon: typeof import('naive-ui')['NIcon']
|
||||
NImage: typeof import('naive-ui')['NImage']
|
||||
NInput: typeof import('naive-ui')['NInput']
|
||||
NInputGroup: typeof import('naive-ui')['NInputGroup']
|
||||
NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
|
||||
NInputNumber: typeof import('naive-ui')['NInputNumber']
|
||||
NLayout: typeof import('naive-ui')['NLayout']
|
||||
NLayoutSider: typeof import('naive-ui')['NLayoutSider']
|
||||
NMenu: typeof import('naive-ui')['NMenu']
|
||||
NP: typeof import('naive-ui')['NP']
|
||||
NPageHeader: typeof import('naive-ui')['NPageHeader']
|
||||
NProgress: typeof import('naive-ui')['NProgress']
|
||||
NScrollbar: typeof import('naive-ui')['NScrollbar']
|
||||
NSelect: typeof import('naive-ui')['NSelect']
|
||||
NSlider: typeof import('naive-ui')['NSlider']
|
||||
NSpace: typeof import('naive-ui')['NSpace']
|
||||
NStatistic: typeof import('naive-ui')['NStatistic']
|
||||
NSwitch: typeof import('naive-ui')['NSwitch']
|
||||
NTable: typeof import('naive-ui')['NTable']
|
||||
NTag: typeof import('naive-ui')['NTag']
|
||||
NText: typeof import('naive-ui')['NText']
|
||||
NTooltip: typeof import('naive-ui')['NTooltip']
|
||||
NUpload: typeof import('naive-ui')['NUpload']
|
||||
NUploadDragger: typeof import('naive-ui')['NUploadDragger']
|
||||
OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
|
||||
QrCodeGenerator: typeof import('./src/tools/qr-code-generator/qr-code-generator.vue')['default']
|
||||
RandomPortGenerator: typeof import('./src/tools/random-port-generator/random-port-generator.vue')['default']
|
||||
ResultRow: typeof import('./src/tools/ipv4-range-expander/result-row.vue')['default']
|
||||
RomanNumeralConverter: typeof import('./src/tools/roman-numeral-converter/roman-numeral-converter.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default']
|
||||
SearchBar: typeof import('./src/components/SearchBar.vue')['default']
|
||||
SearchBarItem: typeof import('./src/components/SearchBarItem.vue')['default']
|
||||
SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default']
|
||||
SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default']
|
||||
SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default']
|
||||
SvgPlaceholderGenerator: typeof import('./src/tools/svg-placeholder-generator/svg-placeholder-generator.vue')['default']
|
||||
TemperatureConverter: typeof import('./src/tools/temperature-converter/temperature-converter.vue')['default']
|
||||
TextareaCopyable: typeof import('./src/components/TextareaCopyable.vue')['default']
|
||||
TextStatistics: typeof import('./src/tools/text-statistics/text-statistics.vue')['default']
|
||||
TextToNatoAlphabet: typeof import('./src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue')['default']
|
||||
TokenDisplay: typeof import('./src/tools/otp-code-generator-and-validator/token-display.vue')['default']
|
||||
'TokenGenerator.tool': typeof import('./src/tools/token-generator/token-generator.tool.vue')['default']
|
||||
'Tool.layout': typeof import('./src/layouts/tool.layout.vue')['default']
|
||||
ToolCard: typeof import('./src/components/ToolCard.vue')['default']
|
||||
UrlEncoder: typeof import('./src/tools/url-encoder/url-encoder.vue')['default']
|
||||
UrlParser: typeof import('./src/tools/url-parser/url-parser.vue')['default']
|
||||
UserAgentParser: typeof import('./src/tools/user-agent-parser/user-agent-parser.vue')['default']
|
||||
UserAgentResultCards: typeof import('./src/tools/user-agent-parser/user-agent-result-cards.vue')['default']
|
||||
UuidGenerator: typeof import('./src/tools/uuid-generator/uuid-generator.vue')['default']
|
||||
YamlToJson: typeof import('./src/tools/yaml-to-json-converter/yaml-to-json.vue')['default']
|
||||
'404.page': typeof import('./src/pages/404.page.vue')['default'];
|
||||
About: typeof import('./src/pages/About.vue')['default'];
|
||||
App: typeof import('./src/App.vue')['default'];
|
||||
'Base.layout': typeof import('./src/layouts/base.layout.vue')['default'];
|
||||
Base64FileConverter: typeof import('./src/tools/base64-file-converter/base64-file-converter.vue')['default'];
|
||||
Base64StringConverter: typeof import('./src/tools/base64-string-converter/base64-string-converter.vue')['default'];
|
||||
BasicAuthGenerator: typeof import('./src/tools/basic-auth-generator/basic-auth-generator.vue')['default'];
|
||||
Bcrypt: typeof import('./src/tools/bcrypt/bcrypt.vue')['default'];
|
||||
BenchmarkBuilder: typeof import('./src/tools/benchmark-builder/benchmark-builder.vue')['default'];
|
||||
Bip39Generator: typeof import('./src/tools/bip39-generator/bip39-generator.vue')['default'];
|
||||
CaseConverter: typeof import('./src/tools/case-converter/case-converter.vue')['default'];
|
||||
CButton: typeof import('./src/ui/c-button/c-button.vue')['default'];
|
||||
CCard: typeof import('./src/ui/c-card/c-card.vue')['default'];
|
||||
ChmodCalculator: typeof import('./src/tools/chmod-calculator/chmod-calculator.vue')['default'];
|
||||
Chronometer: typeof import('./src/tools/chronometer/chronometer.vue')['default'];
|
||||
CLink: typeof import('./src/ui/c-link/c-link.vue')['default'];
|
||||
CollapsibleToolMenu: typeof import('./src/components/CollapsibleToolMenu.vue')['default'];
|
||||
ColorConverter: typeof import('./src/tools/color-converter/color-converter.vue')['default'];
|
||||
ColoredCard: typeof import('./src/components/ColoredCard.vue')['default'];
|
||||
CopyableIpLike: typeof import('./src/tools/ipv4-subnet-calculator/copyable-ip-like.vue')['default'];
|
||||
CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default'];
|
||||
DateTimeConverter: typeof import('./src/tools/date-time-converter/date-time-converter.vue')['default'];
|
||||
DeviceInformation: typeof import('./src/tools/device-information/device-information.vue')['default'];
|
||||
DockerRunToDockerComposeConverter: typeof import('./src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue')['default'];
|
||||
DynamicValues: typeof import('./src/tools/benchmark-builder/dynamic-values.vue')['default'];
|
||||
Editor: typeof import('./src/tools/html-wysiwyg-editor/editor/editor.vue')['default'];
|
||||
Encryption: typeof import('./src/tools/encryption/encryption.vue')['default'];
|
||||
EtaCalculator: typeof import('./src/tools/eta-calculator/eta-calculator.vue')['default'];
|
||||
FavoriteButton: typeof import('./src/components/FavoriteButton.vue')['default'];
|
||||
FormatTransformer: typeof import('./src/components/FormatTransformer.vue')['default'];
|
||||
GitMemo: typeof import('./src/tools/git-memo/git-memo.md')['default'];
|
||||
HashText: typeof import('./src/tools/hash-text/hash-text.vue')['default'];
|
||||
HmacGenerator: typeof import('./src/tools/hmac-generator/hmac-generator.vue')['default'];
|
||||
'Home.page': typeof import('./src/pages/Home.page.vue')['default'];
|
||||
HtmlEntities: typeof import('./src/tools/html-entities/html-entities.vue')['default'];
|
||||
HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default'];
|
||||
HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default'];
|
||||
InputCopyable: typeof import('./src/components/InputCopyable.vue')['default'];
|
||||
IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default'];
|
||||
Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default'];
|
||||
Ipv4RangeExpander: typeof import('./src/tools/ipv4-range-expander/ipv4-range-expander.vue')['default'];
|
||||
Ipv4SubnetCalculator: typeof import('./src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue')['default'];
|
||||
Ipv6UlaGenerator: typeof import('./src/tools/ipv6-ula-generator/ipv6-ula-generator.vue')['default'];
|
||||
JsonMinify: typeof import('./src/tools/json-minify/json-minify.vue')['default'];
|
||||
JsonToYaml: typeof import('./src/tools/json-to-yaml-converter/json-to-yaml.vue')['default'];
|
||||
JsonViewer: typeof import('./src/tools/json-viewer/json-viewer.vue')['default'];
|
||||
JwtParser: typeof import('./src/tools/jwt-parser/jwt-parser.vue')['default'];
|
||||
KeycodeInfo: typeof import('./src/tools/keycode-info/keycode-info.vue')['default'];
|
||||
LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default'];
|
||||
MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default'];
|
||||
MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default'];
|
||||
MenuBar: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar.vue')['default'];
|
||||
MenuBarItem: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue')['default'];
|
||||
MenuIconItem: typeof import('./src/components/MenuIconItem.vue')['default'];
|
||||
MenuLayout: typeof import('./src/components/MenuLayout.vue')['default'];
|
||||
MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default'];
|
||||
MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default'];
|
||||
NAlert: typeof import('naive-ui')['NAlert'];
|
||||
NAutoComplete: typeof import('naive-ui')['NAutoComplete'];
|
||||
NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default'];
|
||||
NButton: typeof import('naive-ui')['NButton'];
|
||||
NCard: typeof import('naive-ui')['NCard'];
|
||||
NCheckbox: typeof import('naive-ui')['NCheckbox'];
|
||||
NCode: typeof import('naive-ui')['NCode'];
|
||||
NCollapseTransition: typeof import('naive-ui')['NCollapseTransition'];
|
||||
NColorPicker: typeof import('naive-ui')['NColorPicker'];
|
||||
NConfigProvider: typeof import('naive-ui')['NConfigProvider'];
|
||||
NDatePicker: typeof import('naive-ui')['NDatePicker'];
|
||||
NDivider: typeof import('naive-ui')['NDivider'];
|
||||
NDynamicInput: typeof import('naive-ui')['NDynamicInput'];
|
||||
NEllipsis: typeof import('naive-ui')['NEllipsis'];
|
||||
NForm: typeof import('naive-ui')['NForm'];
|
||||
NFormItem: typeof import('naive-ui')['NFormItem'];
|
||||
NGi: typeof import('naive-ui')['NGi'];
|
||||
NGrid: typeof import('naive-ui')['NGrid'];
|
||||
NH1: typeof import('naive-ui')['NH1'];
|
||||
NH2: typeof import('naive-ui')['NH2'];
|
||||
NH3: typeof import('naive-ui')['NH3'];
|
||||
NIcon: typeof import('naive-ui')['NIcon'];
|
||||
NImage: typeof import('naive-ui')['NImage'];
|
||||
NInput: typeof import('naive-ui')['NInput'];
|
||||
NInputGroup: typeof import('naive-ui')['NInputGroup'];
|
||||
NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel'];
|
||||
NInputNumber: typeof import('naive-ui')['NInputNumber'];
|
||||
NLayout: typeof import('naive-ui')['NLayout'];
|
||||
NLayoutSider: typeof import('naive-ui')['NLayoutSider'];
|
||||
NMenu: typeof import('naive-ui')['NMenu'];
|
||||
NP: typeof import('naive-ui')['NP'];
|
||||
NPageHeader: typeof import('naive-ui')['NPageHeader'];
|
||||
NProgress: typeof import('naive-ui')['NProgress'];
|
||||
NScrollbar: typeof import('naive-ui')['NScrollbar'];
|
||||
NSelect: typeof import('naive-ui')['NSelect'];
|
||||
NSlider: typeof import('naive-ui')['NSlider'];
|
||||
NSpace: typeof import('naive-ui')['NSpace'];
|
||||
NStatistic: typeof import('naive-ui')['NStatistic'];
|
||||
NSwitch: typeof import('naive-ui')['NSwitch'];
|
||||
NTable: typeof import('naive-ui')['NTable'];
|
||||
NTag: typeof import('naive-ui')['NTag'];
|
||||
NText: typeof import('naive-ui')['NText'];
|
||||
NTooltip: typeof import('naive-ui')['NTooltip'];
|
||||
NUpload: typeof import('naive-ui')['NUpload'];
|
||||
NUploadDragger: typeof import('naive-ui')['NUploadDragger'];
|
||||
OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default'];
|
||||
QrCodeGenerator: typeof import('./src/tools/qr-code-generator/qr-code-generator.vue')['default'];
|
||||
RandomPortGenerator: typeof import('./src/tools/random-port-generator/random-port-generator.vue')['default'];
|
||||
ResultRow: typeof import('./src/tools/ipv4-range-expander/result-row.vue')['default'];
|
||||
RomanNumeralConverter: typeof import('./src/tools/roman-numeral-converter/roman-numeral-converter.vue')['default'];
|
||||
RouterLink: typeof import('vue-router')['RouterLink'];
|
||||
RouterView: typeof import('vue-router')['RouterView'];
|
||||
RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default'];
|
||||
SearchBar: typeof import('./src/components/SearchBar.vue')['default'];
|
||||
SearchBarItem: typeof import('./src/components/SearchBarItem.vue')['default'];
|
||||
SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default'];
|
||||
SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default'];
|
||||
SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default'];
|
||||
SvgPlaceholderGenerator: typeof import('./src/tools/svg-placeholder-generator/svg-placeholder-generator.vue')['default'];
|
||||
TemperatureConverter: typeof import('./src/tools/temperature-converter/temperature-converter.vue')['default'];
|
||||
TextareaCopyable: typeof import('./src/components/TextareaCopyable.vue')['default'];
|
||||
TextStatistics: typeof import('./src/tools/text-statistics/text-statistics.vue')['default'];
|
||||
TextToNatoAlphabet: typeof import('./src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue')['default'];
|
||||
TokenDisplay: typeof import('./src/tools/otp-code-generator-and-validator/token-display.vue')['default'];
|
||||
'TokenGenerator.tool': typeof import('./src/tools/token-generator/token-generator.tool.vue')['default'];
|
||||
'Tool.layout': typeof import('./src/layouts/tool.layout.vue')['default'];
|
||||
ToolCard: typeof import('./src/components/ToolCard.vue')['default'];
|
||||
UrlEncoder: typeof import('./src/tools/url-encoder/url-encoder.vue')['default'];
|
||||
UrlParser: typeof import('./src/tools/url-parser/url-parser.vue')['default'];
|
||||
UserAgentParser: typeof import('./src/tools/user-agent-parser/user-agent-parser.vue')['default'];
|
||||
UserAgentResultCards: typeof import('./src/tools/user-agent-parser/user-agent-result-cards.vue')['default'];
|
||||
UuidGenerator: typeof import('./src/tools/uuid-generator/uuid-generator.vue')['default'];
|
||||
YamlToJson: typeof import('./src/tools/yaml-to-json-converter/yaml-to-json.vue')['default'];
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,9 +29,9 @@ createToolFile(
|
||||
`${toolName}.vue`,
|
||||
`
|
||||
<template>
|
||||
<n-card>
|
||||
<div>
|
||||
Lorem ipsum
|
||||
</n-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-card class="colored-card">
|
||||
<c-card class="colored-card">
|
||||
<n-space justify="space-between" align="center">
|
||||
<n-icon class="icon" size="40" :component="icon" />
|
||||
</n-space>
|
||||
@ -12,7 +12,7 @@
|
||||
<slot />
|
||||
</n-ellipsis>
|
||||
</div>
|
||||
</n-card>
|
||||
</c-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div style="overflow-x: hidden; width: 100%">
|
||||
<n-card class="result-card">
|
||||
<c-card class="result-card">
|
||||
<n-scrollbar
|
||||
x-scrollable
|
||||
trigger="none"
|
||||
@ -20,7 +20,7 @@
|
||||
</template>
|
||||
<span>{{ tooltipText }}</span>
|
||||
</n-tooltip>
|
||||
</n-card>
|
||||
</c-card>
|
||||
<n-space v-if="copyPlacement === 'outside'" justify="center" mt-4>
|
||||
<c-button @click="onCopyClicked"> {{ tooltipText }} </c-button>
|
||||
</n-space>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<router-link :to="tool.path">
|
||||
<n-card class="tool-card">
|
||||
<c-card class="tool-card">
|
||||
<n-space justify="space-between" align="center">
|
||||
<n-icon class="icon" size="40" :component="tool.icon" />
|
||||
<n-space align="center">
|
||||
@ -29,7 +29,7 @@
|
||||
<br />
|
||||
</n-ellipsis>
|
||||
</div>
|
||||
</n-card>
|
||||
</c-card>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
@ -37,11 +37,14 @@
|
||||
import type { Tool } from '@/tools/tools.types';
|
||||
import { useThemeVars } from 'naive-ui';
|
||||
import { toRefs } from 'vue';
|
||||
import { useAppTheme } from '@/ui/theme/themes';
|
||||
import FavoriteButton from './FavoriteButton.vue';
|
||||
|
||||
const props = defineProps<{ tool: Tool & { category: string } }>();
|
||||
const { tool } = toRefs(props);
|
||||
const theme = useThemeVars();
|
||||
|
||||
const appTheme = useAppTheme();
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@ -50,8 +53,11 @@ a {
|
||||
}
|
||||
|
||||
.tool-card {
|
||||
transition: border-color ease 0.5s;
|
||||
border-width: 2px !important;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--n-color-target);
|
||||
border-color: v-bind('appTheme.primary.colorHover');
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-card title="Base64 to file">
|
||||
<c-card title="Base64 to file">
|
||||
<n-form-item
|
||||
:feedback="base64InputValidation.message"
|
||||
:validation-status="base64InputValidation.status"
|
||||
@ -12,9 +12,9 @@
|
||||
Download file
|
||||
</c-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</c-card>
|
||||
|
||||
<n-card title="File to base64">
|
||||
<c-card title="File to base64">
|
||||
<n-upload v-model:file-list="fileList" :show-file-list="true" :on-before-upload="onUpload" list-type="image">
|
||||
<n-upload-dragger>
|
||||
<div mb-2>
|
||||
@ -28,7 +28,7 @@
|
||||
<n-space justify="center">
|
||||
<c-button @click="copyFileBase64()"> Copy </c-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</c-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-card title="String to base64">
|
||||
<c-card title="String to base64">
|
||||
<n-form-item label="String to encode">
|
||||
<n-input v-model:value="textInput" type="textarea" placeholder="Put your string here..." rows="5" />
|
||||
</n-form-item>
|
||||
@ -17,9 +17,9 @@
|
||||
<n-space justify="center">
|
||||
<c-button @click="copyTextBase64()"> Copy base64 </c-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</c-card>
|
||||
|
||||
<n-card title="Base64 to string">
|
||||
<c-card title="Base64 to string">
|
||||
<n-form-item label="Base64 string to decode" v-bind="b64Validation.attrs">
|
||||
<n-input v-model:value="base64Input" type="textarea" placeholder="Your base64 string..." rows="5" />
|
||||
</n-form-item>
|
||||
@ -31,7 +31,7 @@
|
||||
<n-space justify="center">
|
||||
<c-button @click="copyText()"> Copy decoded string </c-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</c-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -13,13 +13,13 @@
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-card>
|
||||
<c-card>
|
||||
<n-statistic label="Authorization header:" class="header">
|
||||
<n-scrollbar x-scrollable style="max-width: 550px; margin-bottom: -10px; padding-bottom: 10px" trigger="none">
|
||||
{{ header }}
|
||||
</n-scrollbar>
|
||||
</n-statistic>
|
||||
</n-card>
|
||||
</c-card>
|
||||
<n-space justify="center" mt-5>
|
||||
<c-button @click="copy">Copy header</c-button>
|
||||
</n-space>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-card title="Hash">
|
||||
<c-card title="Hash">
|
||||
<n-form label-width="120">
|
||||
<n-form-item label="Your string: " label-placement="left">
|
||||
<n-input
|
||||
@ -19,9 +19,9 @@
|
||||
<n-space justify="center" mt-5>
|
||||
<c-button @click="copy"> Copy hash </c-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</c-card>
|
||||
|
||||
<n-card title="Compare string with hash">
|
||||
<c-card title="Compare string with hash">
|
||||
<n-form label-width="120">
|
||||
<n-form-item label="Your string: " label-placement="left">
|
||||
<n-input
|
||||
@ -49,7 +49,7 @@
|
||||
</div>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</n-card>
|
||||
</c-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<n-scrollbar style="flex: 1" x-scrollable>
|
||||
<n-space :wrap="false" style="flex: 1" justify="center" :size="0" mb-5>
|
||||
<div v-for="(suite, index) of suites" :key="index">
|
||||
<n-card style="width: 292px; margin: 0 8px 5px">
|
||||
<c-card style="width: 292px; margin: 0 8px 5px">
|
||||
<n-form-item label="Suite name:" :show-feedback="false" label-placement="left">
|
||||
<n-input v-model:value="suite.title" placeholder="Suite name..." />
|
||||
</n-form-item>
|
||||
@ -11,7 +11,7 @@
|
||||
<n-form-item label="Suite values" :show-feedback="false">
|
||||
<dynamic-values v-model:values="suite.data" />
|
||||
</n-form-item>
|
||||
</n-card>
|
||||
</c-card>
|
||||
|
||||
<n-space justify="center">
|
||||
<c-button v-if="suites.length > 1" variant="text" @click="suites.splice(index, 1)">
|
||||
|
||||
@ -1,59 +1,57 @@
|
||||
<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..." />
|
||||
<c-button @click="refreshEntropy">
|
||||
<n-icon size="22">
|
||||
<Refresh />
|
||||
</n-icon>
|
||||
</c-button>
|
||||
<c-button @click="copyEntropy">
|
||||
<n-icon size="22">
|
||||
<Copy />
|
||||
</n-icon>
|
||||
</c-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-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..." />
|
||||
<c-button @click="refreshEntropy">
|
||||
<n-icon size="22">
|
||||
<Refresh />
|
||||
</n-icon>
|
||||
</c-button>
|
||||
<c-button @click="copyEntropy">
|
||||
<n-icon size="22">
|
||||
<Copy />
|
||||
</n-icon>
|
||||
</c-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"
|
||||
/>
|
||||
|
||||
<c-button @click="copyPassphrase">
|
||||
<n-icon size="22" :component="Copy" />
|
||||
</c-button>
|
||||
</n-input-group>
|
||||
</n-form-item>
|
||||
</n-card>
|
||||
<c-button @click="copyPassphrase">
|
||||
<n-icon size="22" :component="Copy" />
|
||||
</c-button>
|
||||
</n-input-group>
|
||||
</n-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-card>
|
||||
<c-card>
|
||||
<n-form label-width="120" label-placement="left" :show-feedback="false">
|
||||
<n-form-item label="Your string:">
|
||||
<n-input v-model:value="input" />
|
||||
@ -41,7 +41,7 @@
|
||||
<input-copyable :value="snakeCase(input, baseConfig)" />
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</n-card>
|
||||
</c-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-card>
|
||||
<c-card>
|
||||
<div class="duration">{{ formatMs(counter) }}</div>
|
||||
</n-card>
|
||||
</c-card>
|
||||
<n-space justify="center" mt-5>
|
||||
<c-button v-if="!isRunning" secondary type="primary" @click="resume">Start</c-button>
|
||||
<c-button v-else secondary type="warning" @click="pause">Stop</c-button>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-card>
|
||||
<c-card>
|
||||
<n-form label-width="100" label-placement="left">
|
||||
<n-form-item label="color picker:">
|
||||
<n-color-picker
|
||||
@ -30,7 +30,7 @@
|
||||
<input-copyable v-model:value="cmyk" :on-input="(v: string) => onInputUpdated(v, 'cmyk')" />
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</n-card>
|
||||
</c-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-card>
|
||||
<c-card>
|
||||
<n-form-item
|
||||
class="cron"
|
||||
:show-label="false"
|
||||
@ -27,8 +27,8 @@
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</n-space>
|
||||
</n-card>
|
||||
<n-card>
|
||||
</c-card>
|
||||
<c-card>
|
||||
<pre>
|
||||
┌──────────── [optional] seconds (0 - 59)
|
||||
| ┌────────── minute (0 - 59)
|
||||
@ -41,7 +41,7 @@
|
||||
>
|
||||
|
||||
<n-space v-if="styleStore.isSmallScreen" vertical>
|
||||
<n-card v-for="{ symbol, meaning, example, equivalent } in helpers" :key="symbol" embedded :bordered="false">
|
||||
<c-card v-for="{ symbol, meaning, example, equivalent } in helpers" :key="symbol" important:border-none>
|
||||
<div>
|
||||
Symbol: <strong>{{ symbol }}</strong>
|
||||
</div>
|
||||
@ -57,7 +57,7 @@
|
||||
<div>
|
||||
Equivalent: <strong>{{ equivalent }}</strong>
|
||||
</div>
|
||||
</n-card>
|
||||
</c-card>
|
||||
</n-space>
|
||||
<n-table v-else size="small">
|
||||
<thead>
|
||||
@ -79,7 +79,7 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</n-table>
|
||||
</n-card>
|
||||
</c-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,22 +1,20 @@
|
||||
<template>
|
||||
<n-card v-for="{ name, information } in sections" :key="name" :title="name">
|
||||
<c-card v-for="{ name, information } in sections" :key="name" :title="name">
|
||||
<n-grid cols="1 400:2" x-gap="12" y-gap="12">
|
||||
<n-gi v-for="{ label, value: { value } } in information" :key="label" class="information">
|
||||
<n-card :bordered="false" embedded>
|
||||
<div class="label">
|
||||
{{ label }}
|
||||
</div>
|
||||
<div class="label">
|
||||
{{ label }}
|
||||
</div>
|
||||
|
||||
<div class="value">
|
||||
<n-ellipsis v-if="value">
|
||||
{{ value }}
|
||||
</n-ellipsis>
|
||||
<div v-else class="undefined-value">unknown</div>
|
||||
</div>
|
||||
</n-card>
|
||||
<div class="value">
|
||||
<n-ellipsis v-if="value">
|
||||
{{ value }}
|
||||
</n-ellipsis>
|
||||
<div v-else class="undefined-value">unknown</div>
|
||||
</div>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
</n-card>
|
||||
</c-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -81,6 +79,10 @@ const sections = [
|
||||
|
||||
<style lang="less" scoped>
|
||||
.information {
|
||||
padding: 14px 16px;
|
||||
border-radius: 4px;
|
||||
background-color: #aaaaaa11;
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-card title="Encrypt">
|
||||
<c-card title="Encrypt">
|
||||
<n-space item-style="flex: 1 1 0">
|
||||
<n-form-item label="Your text:" :show-feedback="false">
|
||||
<n-input
|
||||
@ -34,8 +34,8 @@
|
||||
spellcheck="false"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-card>
|
||||
<n-card title="Decrypt">
|
||||
</c-card>
|
||||
<c-card title="Decrypt">
|
||||
<n-space item-style="flex: 1 1 0">
|
||||
<n-form-item label="Your encrypted text:" :show-feedback="false">
|
||||
<n-input
|
||||
@ -70,7 +70,7 @@
|
||||
spellcheck="false"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-card>
|
||||
</c-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -37,12 +37,12 @@
|
||||
|
||||
<n-divider />
|
||||
<n-space vertical>
|
||||
<n-card>
|
||||
<c-card>
|
||||
<n-statistic label="Total duration">{{ formatMsDuration(durationMs) }}</n-statistic>
|
||||
</n-card>
|
||||
<n-card>
|
||||
</c-card>
|
||||
<c-card>
|
||||
<n-statistic label="It will end ">{{ endAt }}</n-statistic>
|
||||
</n-card>
|
||||
</c-card>
|
||||
</n-space>
|
||||
</div>
|
||||
</n-space>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-card>
|
||||
<c-card>
|
||||
<n-input v-model:value="clearText" type="textarea" placeholder="Your string to hash..." rows="3" />
|
||||
|
||||
<n-divider />
|
||||
@ -35,7 +35,7 @@
|
||||
<input-copyable :value="hashText(algo, clearText)" readonly />
|
||||
</n-input-group>
|
||||
</div>
|
||||
</n-card>
|
||||
</c-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-card title="Escape html entities">
|
||||
<c-card title="Escape html entities">
|
||||
<n-form-item label="Your string :">
|
||||
<n-input
|
||||
v-model:value="escapeInput"
|
||||
@ -22,8 +22,8 @@
|
||||
<n-space justify="center">
|
||||
<c-button @click="copyEscaped"> Copy </c-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
<n-card title="Unescape html entities">
|
||||
</c-card>
|
||||
<c-card title="Unescape html entities">
|
||||
<n-form-item label="Your escaped string :">
|
||||
<n-input
|
||||
v-model:value="unescapeInput"
|
||||
@ -46,7 +46,7 @@
|
||||
<n-space justify="center">
|
||||
<c-button @click="copyUnescaped"> Copy </c-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</c-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<n-card v-if="editor" class="editor">
|
||||
<template #header>
|
||||
<menu-bar class="editor-header" :editor="editor" />
|
||||
<n-divider style="margin-top: 0" />
|
||||
</template>
|
||||
<c-card v-if="editor" important:p0>
|
||||
<menu-bar class="editor-header" :editor="editor" />
|
||||
<n-divider style="margin-top: 0" />
|
||||
|
||||
<editor-content class="editor-content" :editor="editor" />
|
||||
</n-card>
|
||||
<div px8 pb6>
|
||||
<editor-content class="editor-content" :editor="editor" />
|
||||
</div>
|
||||
</c-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -34,10 +34,6 @@ tryOnBeforeUnmount(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
::v-deep(.n-card-header) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::v-deep(.ProseMirror-focused) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@ -20,14 +20,12 @@
|
||||
<div v-for="{ codes, category } of codesByCategoryFiltered" :key="category" mb-8>
|
||||
<n-h2> {{ category }} </n-h2>
|
||||
|
||||
<n-space vertical :size="20">
|
||||
<n-card v-for="{ code, description, name, type } of codes" :key="code">
|
||||
<n-space align="center">
|
||||
<n-text strong text-lg> {{ code }} {{ name }} </n-text>
|
||||
</n-space>
|
||||
<n-text depth="3">{{ description }} {{ type !== 'HTTP' ? `For ${type}.` : '' }}</n-text>
|
||||
</n-card>
|
||||
</n-space>
|
||||
<c-card v-for="{ code, description, name, type } of codes" :key="code" mb-2>
|
||||
<n-space align="center">
|
||||
<n-text strong text-lg> {{ code }} {{ name }} </n-text>
|
||||
</n-space>
|
||||
<n-text depth="3">{{ description }} {{ type !== 'HTTP' ? `For ${type}.` : '' }}</n-text>
|
||||
</c-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-card>
|
||||
<c-card>
|
||||
<div v-if="styleStore.isSmallScreen">
|
||||
<n-input-group>
|
||||
<n-input-group-label style="flex: 0 0 120px"> Input number: </n-input-group-label>
|
||||
@ -75,7 +75,7 @@
|
||||
:placeholder="`Base ${outputBase} will be here...`"
|
||||
/>
|
||||
</n-input-group>
|
||||
</n-card>
|
||||
</c-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-card>
|
||||
<c-card>
|
||||
<n-form-item label="JWT to decode" :feedback="validation.message" :validation-status="validation.status">
|
||||
<n-input v-model:value="rawJwt" type="textarea" placeholder="Put your token here..." rows="5" />
|
||||
</n-form-item>
|
||||
@ -29,7 +29,7 @@
|
||||
</template>
|
||||
</tbody>
|
||||
</n-table>
|
||||
</n-card>
|
||||
</c-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-card style="text-align: center; padding: 40px 0; margin-bottom: 26px">
|
||||
<c-card style="text-align: center; padding: 40px 0; margin-bottom: 26px">
|
||||
<n-h2 v-if="event">{{ event.key }}</n-h2>
|
||||
<n-text strong depth="3">Press the key on your keyboard you want to get info about this key</n-text>
|
||||
</n-card>
|
||||
</c-card>
|
||||
|
||||
<n-input-group v-for="({ label, value, placeholder }, i) of fields" :key="i" style="margin-bottom: 5px">
|
||||
<n-input-group-label style="flex: 0 0 150px"> {{ label }} </n-input-group-label>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-card>
|
||||
<c-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>
|
||||
@ -21,7 +21,7 @@
|
||||
<n-space justify="center" mt-5>
|
||||
<c-button autofocus @click="copy"> Copy </c-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</c-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -14,13 +14,13 @@
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="Vendor info:">
|
||||
<n-card>
|
||||
<c-card>
|
||||
<n-text v-if="details">
|
||||
<div v-for="(detail, index) of details.split('\n')" :key="index">{{ detail }}</div>
|
||||
</n-text>
|
||||
|
||||
<n-text v-else depth="3" italic>Unknown vendor for this address</n-text>
|
||||
</n-card>
|
||||
</c-card>
|
||||
</n-form-item>
|
||||
|
||||
<n-space justify="center">
|
||||
|
||||
@ -12,9 +12,9 @@
|
||||
spellcheck="false"
|
||||
/>
|
||||
|
||||
<n-card v-if="result !== ''" title="Result " mt-5>
|
||||
<c-card v-if="result !== ''" title="Result " mt-5>
|
||||
{{ result }}
|
||||
</n-card>
|
||||
</c-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-card>
|
||||
<c-card>
|
||||
<n-h2 style="margin-bottom: 0">Mime type to extension</n-h2>
|
||||
<div style="opacity: 0.8">Now witch file extensions are associated to a mime-type</div>
|
||||
<n-form-item>
|
||||
@ -27,9 +27,9 @@
|
||||
</n-tag>
|
||||
</div>
|
||||
</div>
|
||||
</n-card>
|
||||
</c-card>
|
||||
|
||||
<n-card>
|
||||
<c-card>
|
||||
<n-h2 style="margin-bottom: 0">File extension to mime type</n-h2>
|
||||
<div style="opacity: 0.8">Now witch mime type is associated to a file extension</div>
|
||||
<n-form-item>
|
||||
@ -51,7 +51,7 @@
|
||||
</n-tag>
|
||||
</div>
|
||||
</div>
|
||||
</n-card>
|
||||
</c-card>
|
||||
|
||||
<div>
|
||||
<n-table>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-card>
|
||||
<c-card>
|
||||
<n-grid x-gap="12" y-gap="12" cols="1 600:3">
|
||||
<n-gi span="2">
|
||||
<n-form label-width="130" label-placement="left">
|
||||
@ -32,7 +32,7 @@
|
||||
</n-space>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
</n-card>
|
||||
</c-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-card>
|
||||
<c-card>
|
||||
<div class="port">
|
||||
{{ port }}
|
||||
</div>
|
||||
@ -7,7 +7,7 @@
|
||||
<c-button @click="copy"> Copy </c-button>
|
||||
<c-button @click="refreshPort"> Refresh </c-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</c-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-card title="Arabic to roman">
|
||||
<c-card title="Arabic to roman">
|
||||
<n-space align="center" justify="space-between">
|
||||
<n-form-item v-bind="validationNumeral">
|
||||
<n-input-number v-model:value="inputNumeral" :min="1" style="width: 200px" :show-button="false" />
|
||||
@ -12,8 +12,8 @@
|
||||
Copy
|
||||
</c-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
<n-card title="Roman to arabic" mt-5>
|
||||
</c-card>
|
||||
<c-card title="Roman to arabic" mt-5>
|
||||
<n-space align="center" justify="space-between">
|
||||
<n-form-item v-bind="validationRoman">
|
||||
<n-input v-model:value="inputRoman" style="width: 200px" />
|
||||
@ -23,7 +23,7 @@
|
||||
</div>
|
||||
<c-button :disabled="validationRoman.validationStatus === 'error'" @click="copyArabic"> Copy </c-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</c-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-card>
|
||||
<c-card>
|
||||
<n-input v-model:value="text" type="textarea" placeholder="Your text..." rows="5" />
|
||||
|
||||
<n-space justify="space-around" mt-5>
|
||||
@ -8,7 +8,7 @@
|
||||
<n-statistic label="Line count" :value="text === '' ? 0 : text.split(/\r\n|\r|\n/).length" />
|
||||
<n-statistic label="Byte size" :value="formatBytes(getStringSizeInBytes(text))" />
|
||||
</n-space>
|
||||
</n-card>
|
||||
</c-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -6,9 +6,9 @@
|
||||
|
||||
<n-space v-if="natoText" vertical>
|
||||
<n-text>Your text in NATO phonetic alphabet</n-text>
|
||||
<n-card>
|
||||
<c-card>
|
||||
{{ natoText }}
|
||||
</n-card>
|
||||
</c-card>
|
||||
|
||||
<n-space justify="center">
|
||||
<c-button autofocus @click="copy"> Copy NATO string </c-button>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-card>
|
||||
<c-card>
|
||||
<n-form label-placement="left" label-width="140">
|
||||
<n-space justify="center" item-style="padding: 0" :size="0">
|
||||
<div>
|
||||
@ -46,7 +46,7 @@
|
||||
<c-button @click="copy"> Copy </c-button>
|
||||
<c-button @click="refreshToken"> Refresh </c-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</c-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-card title="Encode">
|
||||
<c-card title="Encode">
|
||||
<n-form-item
|
||||
label="Your string :"
|
||||
:feedback="encodedValidation.message"
|
||||
@ -26,8 +26,8 @@
|
||||
<n-space justify="center">
|
||||
<c-button @click="copyEncoded"> Copy </c-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
<n-card title="Decode">
|
||||
</c-card>
|
||||
<c-card title="Decode">
|
||||
<n-form-item
|
||||
label="Your encoded string :"
|
||||
:feedback="decodeValidation.message"
|
||||
@ -54,7 +54,7 @@
|
||||
<n-space justify="center">
|
||||
<c-button @click="copyDecoded"> Copy </c-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</c-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-card>
|
||||
<c-card>
|
||||
<n-form-item label="Your url to parse:" :feedback="validation.message" :validation-status="validation.status">
|
||||
<n-input v-model:value="urlToParse" placeholder="Your url to parse..." />
|
||||
</n-form-item>
|
||||
@ -23,7 +23,7 @@
|
||||
<input-copyable :value="v" readonly />
|
||||
</n-input-group>
|
||||
</n-form>
|
||||
</n-card>
|
||||
</c-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div>
|
||||
<n-grid :x-gap="12" :y-gap="8" cols="1 s:2" responsive="screen">
|
||||
<n-gi v-for="{ heading, icon, content } in sections" :key="heading">
|
||||
<n-card style="height: 100%">
|
||||
<c-card h-full>
|
||||
<n-page-header>
|
||||
<template #title>
|
||||
{{ heading }}
|
||||
@ -29,7 +29,7 @@
|
||||
<n-text v-if="getValue(userAgentInfo) === undefined" depth="3">{{ undefinedFallback }}</n-text>
|
||||
</span>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</c-card>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
</div>
|
||||
|
||||
12
src/ui/c-card/c-card.theme.ts
Normal file
12
src/ui/c-card/c-card.theme.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { defineThemes } from '../theme/theme.models';
|
||||
|
||||
export const { useTheme } = defineThemes({
|
||||
dark: {
|
||||
backgroundColor: '#232323',
|
||||
borderColor: '#282828',
|
||||
},
|
||||
light: {
|
||||
backgroundColor: '#ffffff',
|
||||
borderColor: '#efeff5',
|
||||
},
|
||||
});
|
||||
35
src/ui/c-card/c-card.vue
Normal file
35
src/ui/c-card/c-card.vue
Normal file
@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="c-card">
|
||||
<div v-if="title" class="c-card-title">
|
||||
{{ title }}
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useTheme } from './c-card.theme';
|
||||
|
||||
const props = defineProps<{
|
||||
title?: string;
|
||||
}>();
|
||||
|
||||
const { title } = toRefs(props);
|
||||
|
||||
const theme = useTheme();
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.c-card {
|
||||
background-color: v-bind('theme.backgroundColor');
|
||||
border: 1px solid v-bind('theme.borderColor');
|
||||
border-radius: 4px;
|
||||
padding: 20px 24px;
|
||||
|
||||
&-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user