diff options
Diffstat (limited to 'src')
40 files changed, 222 insertions, 246 deletions
diff --git a/src/components/ColoredCard.vue b/src/components/ColoredCard.vue index 911d1e0..9aaf167 100644 --- a/src/components/ColoredCard.vue +++ b/src/components/ColoredCard.vue @@ -1,8 +1,6 @@ <template> <c-card class="colored-card"> - <n-space justify="space-between" align="center"> - <n-icon class="icon" size="40" :component="icon" /> - </n-space> + <n-icon class="icon" size="40" :component="icon" /> <n-h3 class="title"> <n-ellipsis>{{ title }}</n-ellipsis> </n-h3> diff --git a/src/components/TextareaCopyable.vue b/src/components/TextareaCopyable.vue index 38288d4..17f90e2 100644 --- a/src/components/TextareaCopyable.vue +++ b/src/components/TextareaCopyable.vue @@ -21,9 +21,9 @@ <span>{{ tooltipText }}</span> </n-tooltip> </c-card> - <n-space v-if="copyPlacement === 'outside'" justify="center" mt-4> + <div v-if="copyPlacement === 'outside'" mt-4 flex justify-center> <c-button @click="onCopyClicked"> {{ tooltipText }} </c-button> - </n-space> + </div> </div> </template> diff --git a/src/components/ToolCard.vue b/src/components/ToolCard.vue index 64dc113..db67914 100644 --- a/src/components/ToolCard.vue +++ b/src/components/ToolCard.vue @@ -1,9 +1,9 @@ <template> <router-link :to="tool.path"> <c-card class="tool-card"> - <n-space justify="space-between" align="center"> + <div flex items-center justify-between> <n-icon class="icon" size="40" :component="tool.icon" /> - <n-space align="center"> + <div flex items-center gap-8px> <n-tag v-if="tool.isNew" size="small" @@ -17,8 +17,8 @@ </n-tag> <favorite-button :tool="tool" /> - </n-space> - </n-space> + </div> + </div> <n-h3 class="title"> <n-ellipsis>{{ tool.name }}</n-ellipsis> </n-h3> diff --git a/src/layouts/base.layout.vue b/src/layouts/base.layout.vue index 631f547..dff1535 100644 --- a/src/layouts/base.layout.vue +++ b/src/layouts/base.layout.vue @@ -43,9 +43,9 @@ const tools = computed<ToolCategory[]>(() => [ </router-link> <div class="sider-content"> - <n-space v-if="styleStore.isSmallScreen" justify="center"> + <div v-if="styleStore.isSmallScreen" flex justify-center> <navbar-buttons /> - </n-space> + </div> <collapsible-tool-menu :tools-by-category="tools" /> diff --git a/src/layouts/tool.layout.vue b/src/layouts/tool.layout.vue index 6cccbb0..ae385d0 100644 --- a/src/layouts/tool.layout.vue +++ b/src/layouts/tool.layout.vue @@ -29,7 +29,7 @@ useHead(head); <base-layout> <div class="tool-layout"> <div class="tool-header"> - <n-space align="center" justify="space-between" :wrap="false"> + <div flex flex-nowrap items-center justify-between> <n-h1> {{ route.meta.name }} </n-h1> @@ -37,7 +37,7 @@ useHead(head); <div> <favorite-button :tool="{name: route.meta.name} as Tool" /> </div> - </n-space> + </div> <div class="separator" /> diff --git a/src/tools/basic-auth-generator/basic-auth-generator.vue b/src/tools/basic-auth-generator/basic-auth-generator.vue index 6764748..7e0660b 100644 --- a/src/tools/basic-auth-generator/basic-auth-generator.vue +++ b/src/tools/basic-auth-generator/basic-auth-generator.vue @@ -18,9 +18,9 @@ </n-scrollbar> </n-statistic> </c-card> - <n-space justify="center" mt-5> + <div mt-5 flex justify-center> <c-button @click="copy">Copy header</c-button> - </n-space> + </div> </div> </template> diff --git a/src/tools/bcrypt/bcrypt.vue b/src/tools/bcrypt/bcrypt.vue index c0c86f6..eb366fa 100644 --- a/src/tools/bcrypt/bcrypt.vue +++ b/src/tools/bcrypt/bcrypt.vue @@ -15,9 +15,9 @@ <c-input-text :value="hashed" readonly text-center /> - <n-space justify="center" mt-5> + <div mt-5 flex justify-center> <c-button @click="copy"> Copy hash </c-button> - </n-space> + </div> </c-card> <c-card title="Compare string with hash"> diff --git a/src/tools/benchmark-builder/benchmark-builder.vue b/src/tools/benchmark-builder/benchmark-builder.vue index 3a6182f..be350f2 100644 --- a/src/tools/benchmark-builder/benchmark-builder.vue +++ b/src/tools/benchmark-builder/benchmark-builder.vue @@ -1,6 +1,6 @@ <template> <n-scrollbar style="flex: 1" x-scrollable> - <n-space :wrap="false" style="flex: 1" justify="center" :size="12" mb-5> + <div mb-5 flex flex-1 flex-nowrap justify-center gap-12px> <div v-for="(suite, index) of suites" :key="index"> <c-card style="width: 294px"> <c-input-text @@ -17,7 +17,7 @@ </n-form-item> </c-card> - <n-space justify="center"> + <div flex justify-center> <c-button v-if="suites.length > 1" variant="text" @click="suites.splice(index, 1)"> <n-icon :component="Trash" depth="3" mr-2 size="18" /> Delete suite @@ -29,14 +29,14 @@ <n-icon :component="Plus" depth="3" mr-2 size="18" /> Add suite </c-button> - </n-space> + </div> </div> - </n-space> + </div> </n-scrollbar> <div style="flex: 0 0 100%"> <div style="max-width: 600px; margin: 0 auto"> - <n-space justify="center"> + <div mx-auto max-w-sm flex justify-center gap-3> <c-input-text v-model:value="unit" placeholder="Unit (eg: ms)" label="Unit" label-position="left" mb-4 /> <c-button @@ -48,7 +48,7 @@ " >Reset suites</c-button > - </n-space> + </div> <n-table> <thead> @@ -70,10 +70,10 @@ </tr> </tbody> </n-table> - <n-space justify="center" mt-5> + <div mt-5 flex justify-center gap-3> <c-button @click="copyAsMarkdown">Copy as markdown table</c-button> <c-button @click="copyAsBulletList">Copy as bullet list</c-button> - </n-space> + </div> </div> </div> </template> diff --git a/src/tools/benchmark-builder/dynamic-values.vue b/src/tools/benchmark-builder/dynamic-values.vue index 189be9e..5e349fc 100644 --- a/src/tools/benchmark-builder/dynamic-values.vue +++ b/src/tools/benchmark-builder/dynamic-values.vue @@ -1,6 +1,6 @@ <template> <div> - <n-space v-for="(value, index) of values" :key="index" :wrap="false" style="margin-bottom: 5px" :size="5"> + <div v-for="(value, index) of values" :key="index" mb-2 flex flex-nowrap gap-2> <n-input-number :ref="refs.set" v-model:value="values[index]" @@ -17,7 +17,7 @@ </template> Delete value </n-tooltip> - </n-space> + </div> <c-button @click="addValue"> <n-icon :component="Plus" depth="3" mr-2 size="18" /> diff --git a/src/tools/chronometer/chronometer.vue b/src/tools/chronometer/chronometer.vue index 0c8eb09..bcd01a2 100644 --- a/src/tools/chronometer/chronometer.vue +++ b/src/tools/chronometer/chronometer.vue @@ -3,12 +3,12 @@ <c-card> <div class="duration">{{ formatMs(counter) }}</div> </c-card> - <n-space justify="center" mt-5> + <div mt-5 flex justify-center gap-3> <c-button v-if="!isRunning" type="primary" @click="resume">Start</c-button> <c-button v-else type="warning" @click="pause">Stop</c-button> <c-button @click="counter = 0">Reset</c-button> - </n-space> + </div> </div> </template> diff --git a/src/tools/crontab-generator/crontab-generator.vue b/src/tools/crontab-generator/crontab-generator.vue index 6f8572d..d2559d7 100644 --- a/src/tools/crontab-generator/crontab-generator.vue +++ b/src/tools/crontab-generator/crontab-generator.vue @@ -16,7 +16,7 @@ <n-divider /> - <n-space justify="center"> + <div flex justify-center> <n-form :show-feedback="false" label-width="170" label-placement="left"> <n-form-item label="Verbose"> <n-switch v-model:value="cronstrueConfig.verbose" /> @@ -28,7 +28,7 @@ <n-switch v-model:value="cronstrueConfig.dayOfWeekStartIndexZero" /> </n-form-item> </n-form> - </n-space> + </div> </c-card> <c-card> <pre> @@ -42,8 +42,8 @@ * * * * * * command</pre > - <n-space v-if="styleStore.isSmallScreen" vertical> - <c-card v-for="{ symbol, meaning, example, equivalent } in helpers" :key="symbol" important:border-none> + <div v-if="styleStore.isSmallScreen"> + <c-card v-for="{ symbol, meaning, example, equivalent } in helpers" :key="symbol" mb-3 important:border-none> <div> Symbol: <strong>{{ symbol }}</strong> </div> @@ -60,7 +60,7 @@ Equivalent: <strong>{{ equivalent }}</strong> </div> </c-card> - </n-space> + </div> <n-table v-else size="small"> <thead> <tr> diff --git a/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue b/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue index e66e920..ea6e242 100644 --- a/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue +++ b/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue @@ -14,9 +14,9 @@ <textarea-copyable :value="dockerCompose" language="yaml" /> - <n-space justify="center" mt-5> + <div mt-5 flex justify-center> <c-button :disabled="dockerCompose === ''" secondary @click="download"> Download docker-compose.yml </c-button> - </n-space> + </div> <div v-if="notComposable.length > 0"> <n-alert title="This options are not translatable to docker-compose" type="info" mt-5> diff --git a/src/tools/encryption/encryption.vue b/src/tools/encryption/encryption.vue index d4f6e34..4da451c 100644 --- a/src/tools/encryption/encryption.vue +++ b/src/tools/encryption/encryption.vue @@ -1,7 +1,7 @@ <template> <c-card title="Encrypt"> - <n-space item-style="flex: 1 1 0"> - <n-form-item label="Your text:" :show-feedback="false"> + <div flex gap-3> + <n-form-item label="Your text:" :show-feedback="false" flex-1> <n-input v-model:value="cypherInput" type="textarea" @@ -13,7 +13,7 @@ spellcheck="false" /> </n-form-item> - <n-space vertical> + <div flex flex-1 flex-col gap-2> <c-input-text v-model:value="cypherSecret" label="Your secret key:" clearable raw-text /> <n-form-item label="Encryption algorithm:" :show-feedback="false"> @@ -22,8 +22,8 @@ :options="Object.keys(algos).map((label) => ({ label, value: label }))" /> </n-form-item> - </n-space> - </n-space> + </div> + </div> <n-form-item label="Your text encrypted:" :show-feedback="false" mt-5> <n-input :value="cypherOutput" @@ -39,8 +39,8 @@ </n-form-item> </c-card> <c-card title="Decrypt"> - <n-space item-style="flex: 1 1 0"> - <n-form-item label="Your encrypted text:" :show-feedback="false"> + <div flex gap-3> + <n-form-item label="Your encrypted text:" :show-feedback="false" flex-1> <n-input v-model:value="decryptInput" type="textarea" @@ -52,7 +52,7 @@ spellcheck="false" /> </n-form-item> - <n-space vertical> + <div flex flex-1 flex-col gap-2> <c-input-text v-model:value="decryptSecret" label="Your secret key:" clearable raw-text /> <n-form-item label="Encryption algorithm:" :show-feedback="false"> @@ -61,8 +61,8 @@ :options="Object.keys(algos).map((label) => ({ label, value: label }))" /> </n-form-item> - </n-space> - </n-space> + </div> + </div> <n-form-item label="Your decrypted text:" :show-feedback="false" mt-5> <n-input :value="decryptOutput" diff --git a/src/tools/eta-calculator/eta-calculator.vue b/src/tools/eta-calculator/eta-calculator.vue index 8ee23f5..59bccda 100644 --- a/src/tools/eta-calculator/eta-calculator.vue +++ b/src/tools/eta-calculator/eta-calculator.vue @@ -6,46 +6,40 @@ {{ endAt }}. </n-text> <n-divider /> - <n-space item-style="flex:1 1 0"> - <div> - <n-space item-style="flex:1 1 0"> - <n-form-item label="Amount of element to consume"> - <n-input-number v-model:value="unitCount" :min="1" /> - </n-form-item> - <n-form-item label="The consumption started at"> - <n-date-picker v-model:value="startedAt" type="datetime" /> - </n-form-item> - </n-space> + <div flex gap-2> + <n-form-item label="Amount of element to consume" flex-1> + <n-input-number v-model:value="unitCount" :min="1" /> + </n-form-item> + <n-form-item label="The consumption started at" flex-1> + <n-date-picker v-model:value="startedAt" type="datetime" /> + </n-form-item> + </div> - <n-form-item label="Amount of unit consumed by time span" :show-feedback="false"> - <n-input-number v-model:value="unitPerTimeSpan" :min="1" /> - <span style="margin: 0 10px">in</span> - <n-input-group> - <n-input-number v-model:value="timeSpan" :min="1" /> - <n-select - v-model:value="timeSpanUnitMultiplier" - :options="[ - { label: 'milliseconds', value: 1 }, - { label: 'seconds', value: 1000 }, - { label: 'minutes', value: 1000 * 60 }, - { label: 'hours', value: 1000 * 60 * 60 }, - { label: 'days', value: 1000 * 60 * 60 * 24 }, - ]" - ></n-select> - </n-input-group> - </n-form-item> + <n-form-item label="Amount of unit consumed by time span" :show-feedback="false"> + <n-input-number v-model:value="unitPerTimeSpan" :min="1" /> + <span mx-3>in</span> + <n-input-group> + <n-input-number v-model:value="timeSpan" :min="1" /> + <n-select + v-model:value="timeSpanUnitMultiplier" + :options="[ + { label: 'milliseconds', value: 1 }, + { label: 'seconds', value: 1000 }, + { label: 'minutes', value: 1000 * 60 }, + { label: 'hours', value: 1000 * 60 * 60 }, + { label: 'days', value: 1000 * 60 * 60 * 24 }, + ]" + ></n-select> + </n-input-group> + </n-form-item> - <n-divider /> - <n-space vertical> - <c-card> - <n-statistic label="Total duration">{{ formatMsDuration(durationMs) }}</n-statistic> - </c-card> - <c-card> - <n-statistic label="It will end ">{{ endAt }}</n-statistic> - </c-card> - </n-space> - </div> - </n-space> + <n-divider /> + <c-card mb-2> + <n-statistic label="Total duration">{{ formatMsDuration(durationMs) }}</n-statistic> + </c-card> + <c-card> + <n-statistic label="It will end ">{{ endAt }}</n-statistic> + </c-card> </div> </template> diff --git a/src/tools/hmac-generator/hmac-generator.vue b/src/tools/hmac-generator/hmac-generator.vue index 46b0f1f..f0fc239 100644 --- a/src/tools/hmac-generator/hmac-generator.vue +++ b/src/tools/hmac-generator/hmac-generator.vue @@ -6,15 +6,15 @@ <n-form-item label="Secret key"> <n-input v-model:value="secret" placeholder="Enter the secret key..." /> </n-form-item> - <n-space item-style="flex:1 1 0"> - <n-form-item label="Hashing function"> + <div flex gap-2> + <n-form-item label="Hashing function" flex-1> <n-select v-model:value="hashFunction" placeholder="Select an hashing function..." :options="Object.keys(algos).map((label) => ({ label, value: label }))" /> </n-form-item> - <n-form-item label="Output encoding"> + <n-form-item label="Output encoding" flex-1> <n-select v-model:value="encoding" placeholder="Select the result encoding..." @@ -38,13 +38,13 @@ ]" /> </n-form-item> - </n-space> + </div> <n-form-item label="HMAC of your text"> <n-input readonly :value="hmac" type="textarea" placeholder="The result of the HMAC..." /> </n-form-item> - <n-space justify="center"> + <div flex justify-center> <c-button @click="copy()">Copy HMAC</c-button> - </n-space> + </div> </div> </template> diff --git a/src/tools/html-entities/html-entities.vue b/src/tools/html-entities/html-entities.vue index eb4a5f3..0c75975 100644 --- a/src/tools/html-entities/html-entities.vue +++ b/src/tools/html-entities/html-entities.vue @@ -19,9 +19,9 @@ /> </n-form-item> - <n-space justify="center"> + <div flex justify-center> <c-button @click="copyEscaped"> Copy </c-button> - </n-space> + </div> </c-card> <c-card title="Unescape html entities"> <n-form-item label="Your escaped string :"> @@ -43,9 +43,9 @@ /> </n-form-item> - <n-space justify="center"> + <div flex justify-center> <c-button @click="copyUnescaped"> Copy </c-button> - </n-space> + </div> </c-card> </template> diff --git a/src/tools/html-wysiwyg-editor/editor/menu-bar.vue b/src/tools/html-wysiwyg-editor/editor/menu-bar.vue index ff21b69..b54d97b 100644 --- a/src/tools/html-wysiwyg-editor/editor/menu-bar.vue +++ b/src/tools/html-wysiwyg-editor/editor/menu-bar.vue @@ -1,10 +1,10 @@ <template> - <n-space align="center" :size="0"> + <div flex items-center> <template v-for="(item, index) in items"> <n-divider v-if="item.type === 'divider'" :key="`divider${index}`" vertical /> <menu-bar-item v-else-if="item.type === 'button'" :key="index" v-bind="item" /> </template> - </n-space> + </div> </template> <script setup lang="ts"> diff --git a/src/tools/http-status-codes/http-status-codes.vue b/src/tools/http-status-codes/http-status-codes.vue index 992fbc1..9f827f5 100644 --- a/src/tools/http-status-codes/http-status-codes.vue +++ b/src/tools/http-status-codes/http-status-codes.vue @@ -21,10 +21,8 @@ <n-h2> {{ category }} </n-h2> <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> + <n-text strong block text-lg> {{ code }} {{ name }} </n-text> + <n-text block depth="3">{{ description }} {{ type !== 'HTTP' ? `For ${type}.` : '' }}</n-text> </c-card> </div> </div> diff --git a/src/tools/ipv4-range-expander/ipv4-range-expander.vue b/src/tools/ipv4-range-expander/ipv4-range-expander.vue index 7f89a6a..f1b8dc6 100644 --- a/src/tools/ipv4-range-expander/ipv4-range-expander.vue +++ b/src/tools/ipv4-range-expander/ipv4-range-expander.vue @@ -1,61 +1,56 @@ <template> <div> - <n-space item-style="flex:1 1 0"> - <div> - <div mb-4 flex gap-4> - <c-input-text - v-model:value="rawStartAddress" - label="Start address" - placeholder="Start IPv4 address..." - :validation="startIpValidation" - clearable - /> + <div mb-4 flex gap-4> + <c-input-text + v-model:value="rawStartAddress" + label="Start address" + placeholder="Start IPv4 address..." + :validation="startIpValidation" + clearable + /> - <c-input-text - v-model:value="rawEndAddress" - label="End address" - placeholder="End IPv4 address..." - :validation="endIpValidation" - clearable - /> - </div> + <c-input-text + v-model:value="rawEndAddress" + label="End address" + placeholder="End IPv4 address..." + :validation="endIpValidation" + clearable + /> + </div> - <n-table v-if="showResult" data-test-id="result"> - <thead> - <tr> - <th scope="col"> </th> - <th scope="col">old value</th> - <th scope="col">new value</th> - </tr> - </thead> - <tbody> - <result-row - v-for="{ label, getOldValue, getNewValue } in calculatedValues" - :key="label" - :label="label" - :old-value="getOldValue(result)" - :new-value="getNewValue(result)" - /> - </tbody> - </n-table> - <n-alert - v-else-if="startIpValidation.isValid && endIpValidation.isValid" - title="Invalid combination of start and end IPv4 address" - type="error" - > - <n-space vertical> - <n-text depth="3"> - The end IPv4 address is lower than the start IPv4 address. This is not valid and no result could be - calculated. In the most cases the solution to solve this problem is to change start and end address. - </n-text> - <c-button @click="onSwitchStartEndClicked"> - <n-icon mr-2 :component="Exchange" depth="3" size="22" /> - Switch start and end IPv4 address - </c-button> - </n-space> - </n-alert> - </div> - </n-space> + <n-table v-if="showResult" data-test-id="result"> + <thead> + <tr> + <th scope="col"> </th> + <th scope="col">old value</th> + <th scope="col">new value</th> + </tr> + </thead> + <tbody> + <result-row + v-for="{ label, getOldValue, getNewValue } in calculatedValues" + :key="label" + :label="label" + :old-value="getOldValue(result)" + :new-value="getNewValue(result)" + /> + </tbody> + </n-table> + <n-alert + v-else-if="startIpValidation.isValid && endIpValidation.isValid" + title="Invalid combination of start and end IPv4 address" + type="error" + > + <n-text depth="3" my-3 block> + The end IPv4 address is lower than the start IPv4 address. This is not valid and no result could be calculated. + In the most cases the solution to solve this problem is to change start and end address. + </n-text> + + <c-button @click="onSwitchStartEndClicked"> + <n-icon mr-2 :component="Exchange" depth="3" size="22" /> + Switch start and end IPv4 address + </c-button> + </n-alert> </div> </template> diff --git a/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue b/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue index 1767fc9..ca9f424 100644 --- a/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue +++ b/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue @@ -23,7 +23,7 @@ </tbody> </n-table> - <n-space style="margin-top: 14px" justify="space-between"> + <div mt-3 flex items-center justify-between> <c-button @click="switchToBlock({ count: -1 })"> <n-icon :component="ArrowLeft" /> Previous block @@ -32,7 +32,7 @@ Next block <n-icon :component="ArrowRight" /> </c-button> - </n-space> + </div> </div> </div> </template> diff --git a/src/tools/json-diff/diff-viewer/diff-viewer.vue b/src/tools/json-diff/diff-viewer/diff-viewer.vue index c77d407..8d17e6b 100644 --- a/src/tools/json-diff/diff-viewer/diff-viewer.vue +++ b/src/tools/json-diff/diff-viewer/diff-viewer.vue @@ -1,10 +1,10 @@ <template> <div v-if="showResults"> - <n-space justify="center"> + <div flex justify-center> <n-form-item label="Only show differences" label-placement="left"> <n-switch v-model:value="onlyShowDifferences" /> </n-form-item> - </n-space> + </div> <c-card data-test-id="diff-result"> <n-text v-if="jsonAreTheSame" depth="3" block text-center italic> The provided JSONs are the same </n-text> diff --git a/src/tools/json-viewer/json-viewer.vue b/src/tools/json-viewer/json-viewer.vue index 60ae66c..7e95db1 100644 --- a/src/tools/json-viewer/json-viewer.vue +++ b/src/tools/json-viewer/json-viewer.vue @@ -1,13 +1,13 @@ <template> <div style="flex: 0 0 100%"> - <n-space style="margin: 0 auto; max-width: 600px" justify="center"> + <div style="margin: 0 auto; max-width: 600px" flex justify-center gap-3> <n-form-item label="Sort keys :" label-placement="left" label-width="100"> <n-switch v-model:value="sortKeys" /> </n-form-item> <n-form-item label="Indent size :" label-placement="left" label-width="100" :show-feedback="false"> <n-input-number v-model:value="indentSize" min="0" max="10" style="width: 100px" /> </n-form-item> - </n-space> + </div> </div> <n-form-item diff --git a/src/tools/jwt-parser/jwt-parser.vue b/src/tools/jwt-parser/jwt-parser.vue index c103d63..7a987b6 100644 --- a/src/tools/jwt-parser/jwt-parser.vue +++ b/src/tools/jwt-parser/jwt-parser.vue @@ -10,20 +10,12 @@ <th colspan="2" class="table-header">{{ section.title }}</th> <tr v-for="{ claim, claimDescription, friendlyValue, value } in decodedJWT[section.key]" :key="claim + value"> <td class="claims"> - <n-space> - <n-text strong>{{ claim }}</n-text> - <template v-if="claimDescription"> - <n-text depth="3">({{ claimDescription }})</n-text> - </template> - </n-space> + <n-text strong>{{ claim }}</n-text> + <n-text v-if="claimDescription" depth="3" ml-2>({{ claimDescription }})</n-text> </td> <td> - <n-space> - <n-text>{{ value }}</n-text> - <template v-if="friendlyValue"> - <n-text depth="3">({{ friendlyValue }})</n-text> - </template> - </n-space> + <n-text>{{ value }}</n-text> + <n-text v-if="friendlyValue" ml-2 depth="3">({{ friendlyValue }})</n-text> </td> </tr> </template> diff --git a/src/tools/list-converter/list-converter.vue b/src/tools/list-converter/list-converter.vue index f8da070..7258dc3 100644 --- a/src/tools/list-converter/list-converter.vue +++ b/src/tools/list-converter/list-converter.vue @@ -1,6 +1,6 @@ <template> <div style="flex: 0 0 100%"> - <n-space item-style="flex: 1 1 0" style="margin: 0 auto; max-width: 600px" justify="center"> + <div style="margin: 0 auto; max-width: 600px"> <c-card> <div flex> <div> @@ -73,7 +73,7 @@ </div> </div> </c-card> - </n-space> + </div> </div> <format-transformer input-label="Your input data" diff --git a/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue b/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue index bb2e737..9e3b186 100644 --- a/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue +++ b/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue @@ -18,9 +18,9 @@ <n-input :value="loremIpsumText" type="textarea" placeholder="Your lorem ipsum..." readonly autosize mt-5 /> - <n-space justify="center" mt-5> + <div mt-5 flex justify-center> <c-button autofocus @click="copy"> Copy </c-button> - </n-space> + </div> </c-card> </template> diff --git a/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue b/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue index 73fbd25..95527d0 100644 --- a/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue +++ b/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue @@ -25,10 +25,10 @@ <n-progress :percentage="(100 * interval) / 30" :color="theme.primaryColor" :show-indicator="false" /> <div style="text-align: center">Next in {{ String(Math.floor(30 - interval)).padStart(2, '0') }}s</div> </div> - <n-space justify="center" vertical align="center" style="margin-top: 10px"> + <div mt-4 flex flex-col items-center justify-center gap-3> <n-image :src="qrcode"></n-image> <c-button :href="keyUri" target="_blank">Open Key URI in new tab</c-button> - </n-space> + </div> </div> <div style="max-width: 350px"> <input-copyable diff --git a/src/tools/otp-code-generator-and-validator/token-display.vue b/src/tools/otp-code-generator-and-validator/token-display.vue index 6eadcb2..532cbe7 100644 --- a/src/tools/otp-code-generator-and-validator/token-display.vue +++ b/src/tools/otp-code-generator-and-validator/token-display.vue @@ -1,10 +1,10 @@ <template> <div> - <n-space class="labels" item-style="flex: 1 1 0" w-full align="center"> - <div style="text-align: left">Previous</div> - <div style="text-align: center">Current OTP</div> - <div style="text-align: right">Next</div> - </n-space> + <div class="labels" w-full flex items-center> + <div flex-1 text-left>Previous</div> + <div flex-1 text-center>Current OTP</div> + <div flex-1 text-right>Next</div> + </div> <n-input-group> <n-tooltip trigger="hover" placement="bottom"> <template #trigger> @@ -63,7 +63,6 @@ const { tokens } = toRefs(props); .labels { div { - text-align: center; padding: 0 2px 6px 2px; line-height: 1.25; } diff --git a/src/tools/qr-code-generator/qr-code-generator.vue b/src/tools/qr-code-generator/qr-code-generator.vue index 427b96b..12fcf11 100644 --- a/src/tools/qr-code-generator/qr-code-generator.vue +++ b/src/tools/qr-code-generator/qr-code-generator.vue @@ -26,10 +26,10 @@ </n-form> </n-gi> <n-gi> - <n-space justify="center" align="center" vertical> + <div flex flex-col items-center gap-3> <n-image :src="qrcode" width="200" /> <c-button @click="download"> Download qr-code </c-button> - </n-space> + </div> </n-gi> </n-grid> </c-card> diff --git a/src/tools/random-port-generator/random-port-generator.vue b/src/tools/random-port-generator/random-port-generator.vue index 77df439..8e3ecb6 100644 --- a/src/tools/random-port-generator/random-port-generator.vue +++ b/src/tools/random-port-generator/random-port-generator.vue @@ -3,10 +3,10 @@ <div class="port"> {{ port }} </div> - <n-space justify="center"> + <div flex justify-center gap-3> <c-button @click="copy"> Copy </c-button> <c-button @click="refreshPort"> Refresh </c-button> - </n-space> + </div> </c-card> </template> diff --git a/src/tools/roman-numeral-converter/roman-numeral-converter.vue b/src/tools/roman-numeral-converter/roman-numeral-converter.vue index cc5ce93..1146865 100644 --- a/src/tools/roman-numeral-converter/roman-numeral-converter.vue +++ b/src/tools/roman-numeral-converter/roman-numeral-converter.vue @@ -1,7 +1,7 @@ <template> <div> <c-card title="Arabic to roman"> - <n-space align="center" justify="space-between"> + <div flex items-center justify-between> <n-form-item v-bind="validationNumeral as any"> <n-input-number v-model:value="inputNumeral" :min="1" style="width: 200px" :show-button="false" /> </n-form-item> @@ -11,17 +11,17 @@ <c-button autofocus :disabled="validationNumeral.validationStatus === 'error'" @click="copyRoman"> Copy </c-button> - </n-space> + </div> </c-card> <c-card title="Roman to arabic" mt-5> - <n-space align="center" justify="space-between"> + <div flex items-center justify-between> <c-input-text v-model:value="inputRoman" style="width: 200px" :validation="validationRoman" /> <div class="result"> {{ outputNumeral }} </div> <c-button :disabled="!validationRoman.isValid" @click="copyArabic"> Copy </c-button> - </n-space> + </div> </c-card> </div> </template> diff --git a/src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue b/src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue index a2202c9..80f71b2 100644 --- a/src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue +++ b/src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue @@ -1,12 +1,12 @@ <template> <div style="flex: 0 0 100%"> - <n-space item-style="flex: 1 1 0" style="margin: 0 auto; max-width: 600px" justify="center"> + <div item-style="flex: 1 1 0" style="max-width: 600px" mx-auto flex gap-3> <n-form-item label="Bits :" v-bind="bitsValidationAttrs as any" label-placement="left" label-width="100"> <n-input-number v-model:value="bits" min="256" max="16384" step="8" /> </n-form-item> <c-button @click="refreshCerts">Refresh key-pair</c-button> - </n-space> + </div> </div> <div> diff --git a/src/tools/slugify-string/slugify-string.vue b/src/tools/slugify-string/slugify-string.vue index c4c3bd1..c140e21 100644 --- a/src/tools/slugify-string/slugify-string.vue +++ b/src/tools/slugify-string/slugify-string.vue @@ -13,9 +13,9 @@ ></n-input> </n-form-item> - <n-space justify="center"> + <div flex justify-center> <c-button :disabled="slug.length === 0" @click="copy">Copy slug</c-button> - </n-space> + </div> </div> </template> diff --git a/src/tools/sql-prettify/sql-prettify.vue b/src/tools/sql-prettify/sql-prettify.vue index 9f1e4fe..b8d4aa4 100644 --- a/src/tools/sql-prettify/sql-prettify.vue +++ b/src/tools/sql-prettify/sql-prettify.vue @@ -1,7 +1,7 @@ <template> <div style="flex: 0 0 100%"> - <n-space item-style="flex:1 1 0" style="margin: 0 auto; max-width: 600px" :vertical="styleStore.isSmallScreen"> - <n-form-item label="Dialect" label-width="500"> + <div mx-auto style="max-width: 600px" flex gap-2 :class="{ 'flex-col': styleStore.isSmallScreen }"> + <n-form-item label="Dialect" label-width="500" flex-1> <n-select v-model:value="config.language" :options="[ @@ -21,7 +21,7 @@ ]" /> </n-form-item> - <n-form-item label="Keyword case"> + <n-form-item label="Keyword case" flex-1> <n-select v-model:value="config.keywordCase" :options="[ @@ -31,7 +31,7 @@ ]" /> </n-form-item> - <n-form-item label="Indent style"> + <n-form-item label="Indent style" flex-1> <n-select v-model:value="config.indentStyle" :options="[ @@ -41,7 +41,7 @@ ]" /> </n-form-item> - </n-space> + </div> </div> <n-form-item label="Your SQL query"> diff --git a/src/tools/svg-placeholder-generator/svg-placeholder-generator.vue b/src/tools/svg-placeholder-generator/svg-placeholder-generator.vue index dacc700..0ff61a6 100644 --- a/src/tools/svg-placeholder-generator/svg-placeholder-generator.vue +++ b/src/tools/svg-placeholder-generator/svg-placeholder-generator.vue @@ -1,24 +1,24 @@ <template> <div> <n-form label-placement="left" label-width="100"> - <n-space item-style="flex:1 1 0"> - <n-form-item label="Width (in px)"> + <div flex gap-3> + <n-form-item label="Width (in px)" flex-1> <n-input-number v-model:value="width" placeholder="SVG width..." min="1" /> </n-form-item> - <n-form-item label="Background"> + <n-form-item label="Background" flex-1> <n-color-picker v-model:value="bgColor" :modes="['hex']" /> </n-form-item> - </n-space> - <n-space item-style="flex:1 1 0"> - <n-form-item label="Height (in px)"> + </div> + <div flex gap-3> + <n-form-item label="Height (in px)" flex-1> <n-input-number v-model:value="height" placeholder="SVG height..." min="1" /> </n-form-item> - <n-form-item label="Text color"> + <n-form-item label="Text color" flex-1> <n-color-picker v-model:value="fgColor" :modes="['hex']" /> </n-form-item> - </n-space> - <n-space item-style="flex:1 1 0"> - <n-form-item label="Font size"> + </div> + <div flex gap-3> + <n-form-item label="Font size" flex-1> <n-input-number v-model:value="fontSize" placeholder="Font size..." min="1" /> </n-form-item> @@ -29,8 +29,9 @@ label-position="left" label-width="100px" label-align="right" + flex-1 /> - </n-space> + </div> <n-form-item label="Use exact size" label-placement="left"> <n-switch v-model:value="useExactSize" /> </n-form-item> @@ -43,16 +44,14 @@ <textarea-copyable :value="base64" copy-placement="none" /> </n-form-item> - <n-space justify="center"> + <div flex justify-center gap-3> <c-button @click="copySVG()">Copy svg</c-button> <c-button @click="copyBase64()">Copy base64</c-button> <c-button @click="download()">Download svg</c-button> - </n-space> + </div> </div> - <n-space vertical justify="start"> - <img :src="base64" alt="Image" /> - </n-space> + <img :src="base64" alt="Image" /> </template> <script setup lang="ts"> diff --git a/src/tools/text-statistics/text-statistics.vue b/src/tools/text-statistics/text-statistics.vue index aa4d684..a03915c 100644 --- a/src/tools/text-statistics/text-statistics.vue +++ b/src/tools/text-statistics/text-statistics.vue @@ -2,12 +2,12 @@ <c-card> <n-input v-model:value="text" type="textarea" placeholder="Your text..." rows="5" /> - <n-space justify="space-around" mt-5> - <n-statistic label="Character count" :value="text.length" /> - <n-statistic label="Word count" :value="text === '' ? 0 : text.split(/\s+/).length" /> - <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> + <div mt-5 flex> + <n-statistic label="Character count" :value="text.length" flex-1 /> + <n-statistic label="Word count" :value="text === '' ? 0 : text.split(/\s+/).length" flex-1 /> + <n-statistic label="Line count" :value="text === '' ? 0 : text.split(/\r\n|\r|\n/).length" flex-1 /> + <n-statistic label="Byte size" :value="formatBytes(getStringSizeInBytes(text))" flex-1 /> + </div> </c-card> </template> 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 4b12adb..9ded4ff 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 @@ -8,16 +8,16 @@ mb-5 /> - <n-space v-if="natoText" vertical> - <n-text>Your text in NATO phonetic alphabet</n-text> + <div v-if="natoText"> + <n-text mb-1 block>Your text in NATO phonetic alphabet</n-text> <c-card> {{ natoText }} </c-card> - <n-space justify="center"> + <div mt-3 flex justify-center> <c-button autofocus @click="copy"> Copy NATO string </c-button> - </n-space> - </n-space> + </div> + </div> </div> </template> diff --git a/src/tools/token-generator/token-generator.tool.vue b/src/tools/token-generator/token-generator.tool.vue index 79f3065..bdfb4da 100644 --- a/src/tools/token-generator/token-generator.tool.vue +++ b/src/tools/token-generator/token-generator.tool.vue @@ -2,7 +2,7 @@ <div> <c-card> <n-form label-placement="left" label-width="140"> - <n-space justify="center" item-style="padding: 0" :size="0"> + <div flex justify-center> <div> <n-form-item label="Uppercase (ABC...)"> <n-switch v-model:value="withUppercase" /> @@ -22,7 +22,7 @@ <n-switch v-model:value="withSymbols" /> </n-form-item> </div> - </n-space> + </div> </n-form> <n-form-item :label="`Length (${length})`" label-placement="left"> @@ -42,10 +42,10 @@ spellcheck="false" /> - <n-space justify="center" mt-5> + <div mt-5 flex justify-center gap-3> <c-button @click="copy"> Copy </c-button> <c-button @click="refreshToken"> Refresh </c-button> - </n-space> + </div> </c-card> </div> </template> diff --git a/src/tools/url-encoder/url-encoder.vue b/src/tools/url-encoder/url-encoder.vue index 33e5ee5..4f89986 100644 --- a/src/tools/url-encoder/url-encoder.vue +++ b/src/tools/url-encoder/url-encoder.vue @@ -23,9 +23,9 @@ /> </n-form-item> - <n-space justify="center"> + <div flex justify-center> <c-button @click="copyEncoded"> Copy </c-button> - </n-space> + </div> </c-card> <c-card title="Decode"> <n-form-item @@ -51,9 +51,9 @@ /> </n-form-item> - <n-space justify="center"> + <div flex justify-center> <c-button @click="copyDecoded"> Copy </c-button> - </n-space> + </div> </c-card> </template> 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 ba30925..20226c1 100644 --- a/src/tools/user-agent-parser/user-agent-result-cards.vue +++ b/src/tools/user-agent-parser/user-agent-result-cards.vue @@ -12,7 +12,7 @@ </template> </n-page-header> - <n-space mt-5> + <div mt-5 flex gap-2> <span v-for="{ label, getValue } in content" :key="label"> <n-tooltip v-if="getValue(userAgentInfo)" trigger="hover"> <template #trigger> @@ -23,12 +23,12 @@ {{ label }} </n-tooltip> </span> - </n-space> - <n-space vertical> + </div> + <div flex flex-col> <span v-for="{ label, getValue, undefinedFallback } in content" :key="label"> <n-text v-if="getValue(userAgentInfo) === undefined" depth="3">{{ undefinedFallback }}</n-text> </span> - </n-space> + </div> </c-card> </n-gi> </n-grid> diff --git a/src/tools/uuid-generator/uuid-generator.vue b/src/tools/uuid-generator/uuid-generator.vue index b2c7413..de9cbf2 100644 --- a/src/tools/uuid-generator/uuid-generator.vue +++ b/src/tools/uuid-generator/uuid-generator.vue @@ -1,9 +1,9 @@ <template> - <n-space vertical :size="20"> - <n-space align="center" justify="center"> + <div> + <div flex items-center justify-center gap-3> Quantity : <n-input-number v-model:value="count" :min="1" :max="50" placeholder="UUID quantity" /> - </n-space> + </div> <n-input style="text-align: center; font-family: monospace" @@ -16,13 +16,14 @@ autocorrect="off" autocapitalize="off" spellcheck="false" + my-3 /> - <n-space justify="center"> + <div flex justify-center gap-3> <c-button autofocus @click="copy"> Copy </c-button> <c-button @click="refreshUUIDs"> Refresh </c-button> - </n-space> - </n-space> + </div> + </div> </template> <script setup lang="ts"> |