diff options
40 files changed, 352 insertions, 304 deletions
diff --git a/components.d.ts b/components.d.ts index 178523d..700696c 100644 --- a/components.d.ts +++ b/components.d.ts @@ -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']; } } diff --git a/scripts/create-tool.mjs b/scripts/create-tool.mjs index a6e16f3..94b7025 100644 --- a/scripts/create-tool.mjs +++ b/scripts/create-tool.mjs @@ -29,9 +29,9 @@ createToolFile( `${toolName}.vue`, ` <template> - <n-card> + <div> Lorem ipsum - </n-card> + </div> </template> <script setup lang="ts"> diff --git a/src/components/ColoredCard.vue b/src/components/ColoredCard.vue index eb29e40..911d1e0 100644 --- a/src/components/ColoredCard.vue +++ b/src/components/ColoredCard.vue @@ -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"> diff --git a/src/components/TextareaCopyable.vue b/src/components/TextareaCopyable.vue index ac4f38f..38288d4 100644 --- a/src/components/TextareaCopyable.vue +++ b/src/components/TextareaCopyable.vue @@ -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> diff --git a/src/components/ToolCard.vue b/src/components/ToolCard.vue index d8a0910..c0f8581 100644 --- a/src/components/ToolCard.vue +++ b/src/components/ToolCard.vue @@ -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 { diff --git a/src/tools/base64-file-converter/base64-file-converter.vue b/src/tools/base64-file-converter/base64-file-converter.vue index f3516e1..5524109 100644 --- a/src/tools/base64-file-converter/base64-file-converter.vue +++ b/src/tools/base64-file-converter/base64-file-converter.vue @@ -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"> diff --git a/src/tools/base64-string-converter/base64-string-converter.vue b/src/tools/base64-string-converter/base64-string-converter.vue index 033d19b..be4a635 100644 --- a/src/tools/base64-string-converter/base64-string-converter.vue +++ b/src/tools/base64-string-converter/base64-string-converter.vue @@ -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"> diff --git a/src/tools/basic-auth-generator/basic-auth-generator.vue b/src/tools/basic-auth-generator/basic-auth-generator.vue index 67534cc..3cab019 100644 --- a/src/tools/basic-auth-generator/basic-auth-generator.vue +++ b/src/tools/basic-auth-generator/basic-auth-generator.vue @@ -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> diff --git a/src/tools/bcrypt/bcrypt.vue b/src/tools/bcrypt/bcrypt.vue index f633455..a091fb7 100644 --- a/src/tools/bcrypt/bcrypt.vue +++ b/src/tools/bcrypt/bcrypt.vue @@ -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"> diff --git a/src/tools/benchmark-builder/benchmark-builder.vue b/src/tools/benchmark-builder/benchmark-builder.vue index 5690c84..9943e06 100644 --- a/src/tools/benchmark-builder/benchmark-builder.vue +++ b/src/tools/benchmark-builder/benchmark-builder.vue @@ -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)"> diff --git a/src/tools/bip39-generator/bip39-generator.vue b/src/tools/bip39-generator/bip39-generator.vue index fbfd39c..418ae0e 100644 --- a/src/tools/bip39-generator/bip39-generator.vue +++ b/src/tools/bip39-generator/bip39-generator.vue @@ -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> diff --git a/src/tools/case-converter/case-converter.vue b/src/tools/case-converter/case-converter.vue index 1bf8409..854eb91 100644 --- a/src/tools/case-converter/case-converter.vue +++ b/src/tools/case-converter/case-converter.vue @@ -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"> diff --git a/src/tools/chronometer/chronometer.vue b/src/tools/chronometer/chronometer.vue index 1849038..d3cd425 100644 --- a/src/tools/chronometer/chronometer.vue +++ b/src/tools/chronometer/chronometer.vue @@ -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> diff --git a/src/tools/color-converter/color-converter.vue b/src/tools/color-converter/color-converter.vue index 24b889c..fff7607 100644 --- a/src/tools/color-converter/color-converter.vue +++ b/src/tools/color-converter/color-converter.vue @@ -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"> diff --git a/src/tools/crontab-generator/crontab-generator.vue b/src/tools/crontab-generator/crontab-generator.vue index 5028204..978943d 100644 --- a/src/tools/crontab-generator/crontab-generator.vue +++ b/src/tools/crontab-generator/crontab-generator.vue @@ -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"> diff --git a/src/tools/device-information/device-information.vue b/src/tools/device-information/device-information.vue index d099125..09beced 100644 --- a/src/tools/device-information/device-information.vue +++ b/src/tools/device-information/device-information.vue @@ -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; diff --git a/src/tools/encryption/encryption.vue b/src/tools/encryption/encryption.vue index 7284635..881dfa2 100644 --- a/src/tools/encryption/encryption.vue +++ b/src/tools/encryption/encryption.vue @@ -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"> diff --git a/src/tools/eta-calculator/eta-calculator.vue b/src/tools/eta-calculator/eta-calculator.vue index 79a14d7..8ee23f5 100644 --- a/src/tools/eta-calculator/eta-calculator.vue +++ b/src/tools/eta-calculator/eta-calculator.vue @@ -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> diff --git a/src/tools/hash-text/hash-text.vue b/src/tools/hash-text/hash-text.vue index 50a9c33..b57d89c 100644 --- a/src/tools/hash-text/hash-text.vue +++ b/src/tools/hash-text/hash-text.vue @@ -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> diff --git a/src/tools/html-entities/html-entities.vue b/src/tools/html-entities/html-entities.vue index 889626b..eb4a5f3 100644 --- a/src/tools/html-entities/html-entities.vue +++ b/src/tools/html-entities/html-entities.vue @@ -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"> diff --git a/src/tools/html-wysiwyg-editor/editor/editor.vue b/src/tools/html-wysiwyg-editor/editor/editor.vue index 346cb10..4c8ca36 100644 --- a/src/tools/html-wysiwyg-editor/editor/editor.vue +++ b/src/tools/html-wysiwyg-editor/editor/editor.vue @@ -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> - - <editor-content class="editor-content" :editor="editor" /> - </n-card> + <c-card v-if="editor" important:p0> + <menu-bar class="editor-header" :editor="editor" /> + <n-divider style="margin-top: 0" /> + + <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; } diff --git a/src/tools/http-status-codes/http-status-codes.vue b/src/tools/http-status-codes/http-status-codes.vue index fbb0069..992fbc1 100644 --- a/src/tools/http-status-codes/http-status-codes.vue +++ b/src/tools/http-status-codes/http-status-codes.vue @@ -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> diff --git a/src/tools/integer-base-converter/integer-base-converter.vue b/src/tools/integer-base-converter/integer-base-converter.vue index df7e3ba..c480f4a 100644 --- a/src/tools/integer-base-converter/integer-base-converter.vue +++ b/src/tools/integer-base-converter/integer-base-converter.vue @@ -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> diff --git a/src/tools/jwt-parser/jwt-parser.vue b/src/tools/jwt-parser/jwt-parser.vue index 0e81feb..c103d63 100644 --- a/src/tools/jwt-parser/jwt-parser.vue +++ b/src/tools/jwt-parser/jwt-parser.vue @@ -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"> diff --git a/src/tools/keycode-info/keycode-info.vue b/src/tools/keycode-info/keycode-info.vue index 169117a..bc11667 100644 --- a/src/tools/keycode-info/keycode-info.vue +++ b/src/tools/keycode-info/keycode-info.vue @@ -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> diff --git a/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue b/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue index 27125d5..bb2e737 100644 --- a/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue +++ b/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue @@ -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"> diff --git a/src/tools/mac-address-lookup/mac-address-lookup.vue b/src/tools/mac-address-lookup/mac-address-lookup.vue index f3d9cd5..c157dda 100644 --- a/src/tools/mac-address-lookup/mac-address-lookup.vue +++ b/src/tools/mac-address-lookup/mac-address-lookup.vue @@ -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"> diff --git a/src/tools/math-evaluator/math-evaluator.vue b/src/tools/math-evaluator/math-evaluator.vue index a525087..a8b359b 100644 --- a/src/tools/math-evaluator/math-evaluator.vue +++ b/src/tools/math-evaluator/math-evaluator.vue @@ -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> diff --git a/src/tools/mime-types/mime-types.vue b/src/tools/mime-types/mime-types.vue index eb08124..f19c183 100644 --- a/src/tools/mime-types/mime-types.vue +++ b/src/tools/mime-types/mime-types.vue @@ -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> diff --git a/src/tools/qr-code-generator/qr-code-generator.vue b/src/tools/qr-code-generator/qr-code-generator.vue index 7878edd..427b96b 100644 --- a/src/tools/qr-code-generator/qr-code-generator.vue +++ b/src/tools/qr-code-generator/qr-code-generator.vue @@ -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"> diff --git a/src/tools/random-port-generator/random-port-generator.vue b/src/tools/random-port-generator/random-port-generator.vue index d9305e6..77df439 100644 --- a/src/tools/random-port-generator/random-port-generator.vue +++ b/src/tools/random-port-generator/random-port-generator.vue @@ -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"> diff --git a/src/tools/roman-numeral-converter/roman-numeral-converter.vue b/src/tools/roman-numeral-converter/roman-numeral-converter.vue index b56d7c8..d21728e 100644 --- a/src/tools/roman-numeral-converter/roman-numeral-converter.vue +++ b/src/tools/roman-numeral-converter/roman-numeral-converter.vue @@ -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> diff --git a/src/tools/text-statistics/text-statistics.vue b/src/tools/text-statistics/text-statistics.vue index 326b2b9..aa4d684 100644 --- a/src/tools/text-statistics/text-statistics.vue +++ b/src/tools/text-statistics/text-statistics.vue @@ -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"> diff --git a/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue b/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue index 0e4edcc..aa551f5 100644 --- a/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue +++ b/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue @@ -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> diff --git a/src/tools/token-generator/token-generator.tool.vue b/src/tools/token-generator/token-generator.tool.vue index 56177b4..79f3065 100644 --- a/src/tools/token-generator/token-generator.tool.vue +++ b/src/tools/token-generator/token-generator.tool.vue @@ -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> diff --git a/src/tools/url-encoder/url-encoder.vue b/src/tools/url-encoder/url-encoder.vue index dcd8a95..33e5ee5 100644 --- a/src/tools/url-encoder/url-encoder.vue +++ b/src/tools/url-encoder/url-encoder.vue @@ -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"> diff --git a/src/tools/url-parser/url-parser.vue b/src/tools/url-parser/url-parser.vue index 3b18ca1..ac80f61 100644 --- a/src/tools/url-parser/url-parser.vue +++ b/src/tools/url-parser/url-parser.vue @@ -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"> diff --git a/src/tools/user-agent-parser/user-agent-result-cards.vue b/src/tools/user-agent-parser/user-agent-result-cards.vue index 9376f88..ba30925 100644 --- a/src/tools/user-agent-parser/user-agent-result-cards.vue +++ b/src/tools/user-agent-parser/user-agent-result-cards.vue @@ -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> diff --git a/src/ui/c-card/c-card.theme.ts b/src/ui/c-card/c-card.theme.ts new file mode 100644 index 0000000..c9cdd6b --- /dev/null +++ b/src/ui/c-card/c-card.theme.ts @@ -0,0 +1,12 @@ +import { defineThemes } from '../theme/theme.models'; + +export const { useTheme } = defineThemes({ + dark: { + backgroundColor: '#232323', + borderColor: '#282828', + }, + light: { + backgroundColor: '#ffffff', + borderColor: '#efeff5', + }, +}); diff --git a/src/ui/c-card/c-card.vue b/src/ui/c-card/c-card.vue new file mode 100644 index 0000000..11d86fd --- /dev/null +++ b/src/ui/c-card/c-card.vue @@ -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> |