diff options
Diffstat (limited to 'src')
38 files changed, 219 insertions, 172 deletions
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> |