mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-24 00:36:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(ui): replaced naive ui cards with custom ones

Browse source
This commit is contained in:
Corentin Thomasset 2023-04-20 20:49:28 +02:00 • committed by Corentin THOMASSET
parent bb32513bd3
commit f080933d2a
40 changed files with 351 additions and 303 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/ColoredCard.vue
View file

@ -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">

4
src/components/TextareaCopyable.vue
View file

@ -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>

12
src/components/ToolCard.vue
View file

@ -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 />&nbsp;
</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 {

8
src/tools/base64-file-converter/base64-file-converter.vue
View file

@ -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">

8
src/tools/base64-string-converter/base64-string-converter.vue
View file

@ -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">

4
src/tools/basic-auth-generator/basic-auth-generator.vue
View file

@ -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>

8
src/tools/bcrypt/bcrypt.vue
View file

@ -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">

4
src/tools/benchmark-builder/benchmark-builder.vue
View file

@ -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)">

102
src/tools/bip39-generator/bip39-generator.vue
View file

@ -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>

4
src/tools/case-converter/case-converter.vue
View file

@ -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">

4
src/tools/chronometer/chronometer.vue
View file

@ -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>

4
src/tools/color-converter/color-converter.vue
View file

@ -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">

12
src/tools/crontab-generator/crontab-generator.vue
View file

@ -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">

28
src/tools/device-information/device-information.vue
View file

@ -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;

8
src/tools/encryption/encryption.vue
View file

@ -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">

8
src/tools/eta-calculator/eta-calculator.vue
View file

@ -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>

4
src/tools/hash-text/hash-text.vue
View file

@ -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>

8
src/tools/html-entities/html-entities.vue
View file

@ -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">

18
src/tools/html-wysiwyg-editor/editor/editor.vue
View file

@ -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;
}

14
src/tools/http-status-codes/http-status-codes.vue
View file

@ -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>

4
src/tools/integer-base-converter/integer-base-converter.vue
View file

@ -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>

4
src/tools/jwt-parser/jwt-parser.vue
View file

@ -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">

4
src/tools/keycode-info/keycode-info.vue
View file

@ -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>

4
src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue
View file

@ -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">

4
src/tools/mac-address-lookup/mac-address-lookup.vue
View file

@ -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">

4
src/tools/math-evaluator/math-evaluator.vue
View file

@ -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>

8
src/tools/mime-types/mime-types.vue
View file

@ -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>

4
src/tools/qr-code-generator/qr-code-generator.vue
View file

@ -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">

4
src/tools/random-port-generator/random-port-generator.vue
View file

@ -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">

8
src/tools/roman-numeral-converter/roman-numeral-converter.vue
View file

@ -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>

4
src/tools/text-statistics/text-statistics.vue
View file

@ -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">

4
src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue
View file

@ -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>

4
src/tools/token-generator/token-generator.tool.vue
View file

@ -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>

8
src/tools/url-encoder/url-encoder.vue
View file

@ -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">

4
src/tools/url-parser/url-parser.vue
View file

@ -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">

4
src/tools/user-agent-parser/user-agent-result-cards.vue
View file

@ -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
View 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
View 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>