mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-05-09 07:35:01 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge branch 'main' into tools/mac-address-generator

Browse source
This commit is contained in:
Istvan Olah 2023-10-16 11:20:41 +03:00 • committed by GitHub
commit f4d5bb8cb0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
32 changed files with 774 additions and 332 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/components/FavoriteButton.vue
View file

@ -1,6 +1,4 @@
<script setup lang="ts">
import { FavoriteFilled } from '@vicons/material';
import { useToolStore } from '@/tools/tools.store';
import type { Tool } from '@/tools/tools.types';
@ -26,18 +24,15 @@ function toggleFavorite(event: MouseEvent) {
</script>
<template>
<n-tooltip trigger="hover">
<template #trigger>
<c-button
variant="text"
circle
:type="buttonType"
:style="{ opacity: isFavorite ? 1 : 0.2 }"
@click="toggleFavorite"
>
<n-icon :component="FavoriteFilled" />
</c-button>
</template>
{{ isFavorite ? 'Remove from favorites' : 'Add to favorites' }}
</n-tooltip>
<c-tooltip :tooltip="isFavorite ? 'Remove from favorites' : 'Add to favorites' ">
<c-button
variant="text"
circle
:type="buttonType"
:style="{ opacity: isFavorite ? 1 : 0.2 }"
@click="toggleFavorite"
>
<icon-mdi-heart />
</c-button>
</c-tooltip>
</template>

13
src/components/InputCopyable.vue
View file

@ -13,14 +13,11 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : 'Copy to cli
<template>
<c-input-text v-model:value="value">
<template #suffix>
<n-tooltip trigger="hover">
<template #trigger>
<c-button circle variant="text" size="small" @click="copy()">
<icon-mdi-content-copy />
</c-button>
</template>
{{ tooltipText }}
</n-tooltip>
<c-tooltip :tooltip="tooltipText">
<c-button circle variant="text" size="small" @click="copy()">
<icon-mdi-content-copy />
</c-button>
</c-tooltip>
</template>
</c-input-text>
</template>

83
src/components/NavbarButtons.vue
View file

@ -7,56 +7,43 @@ const { isDarkTheme } = toRefs(styleStore);
</script>
<template>
<n-tooltip trigger="hover">
<template #trigger>
<c-button
circle
variant="text"
href="https://github.com/CorentinTh/it-tools"
target="_blank"
rel="noopener noreferrer"
aria-label="IT-Tools' GitHub repository"
>
<n-icon size="25" :component="BrandGithub" />
</c-button>
</template>
Github repository
</n-tooltip>
<c-tooltip tooltip="Github repository" position="bottom">
<c-button
circle
variant="text"
href="https://github.com/CorentinTh/it-tools"
target="_blank"
rel="noopener noreferrer"
aria-label="IT-Tools' GitHub repository"
>
<n-icon size="25" :component="BrandGithub" />
</c-button>
</c-tooltip>
<n-tooltip trigger="hover">
<template #trigger>
<c-button
circle
variant="text"
href="https://twitter.com/ittoolsdottech"
rel="noopener"
target="_blank"
aria-label="IT Tools' Twitter account"
>
<n-icon size="25" :component="BrandTwitter" />
</c-button>
</template>
IT Tools' Twitter account
</n-tooltip>
<c-tooltip tooltip="Twitter account" position="bottom">
<c-button
circle
variant="text"
href="https://twitter.com/ittoolsdottech"
rel="noopener"
target="_blank"
aria-label="IT Tools' Twitter account"
>
<n-icon size="25" :component="BrandTwitter" />
</c-button>
</c-tooltip>
<n-tooltip trigger="hover">
<template #trigger>
<c-button circle variant="text" to="/about" aria-label="About">
<n-icon size="25" :component="InfoCircle" />
</c-button>
</template>
About
</n-tooltip>
<n-tooltip trigger="hover">
<template #trigger>
<c-button circle variant="text" aria-label="Toggle dark/light mode" @click="() => styleStore.toggleDark()">
<n-icon v-if="isDarkTheme" size="25" :component="Sun" />
<n-icon v-else size="25" :component="Moon" />
</c-button>
</template>
<span v-if="isDarkTheme">Light mode</span>
<span v-else>Dark mode</span>
</n-tooltip>
<c-tooltip tooltip="About IT-Tools" position="bottom">
<c-button circle variant="text" to="/about" aria-label="About">
<n-icon size="25" :component="InfoCircle" />
</c-button>
</c-tooltip>
<c-tooltip :tooltip="isDarkTheme ? 'Light mode' : 'Dark mode'" position="bottom">
<c-button circle variant="text" aria-label="Toggle dark/light mode" @click="() => styleStore.toggleDark()">
<n-icon v-if="isDarkTheme" size="25" :component="Sun" />
<n-icon v-else size="25" :component="Moon" />
</c-button>
</c-tooltip>
</template>
<style lang="less" scoped>

16
src/components/SpanCopyable.vue
View file

@ -11,17 +11,7 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : initialText)
</script>
<template>
<n-tooltip trigger="hover">
<template #trigger>
<span class="value" @click="copy()">{{ value }}</span>
</template>
{{ tooltipText }}
</n-tooltip>
<c-tooltip :tooltip="tooltipText">
<span cursor-pointer font-mono @click="copy()">{{ value }}</span>
</c-tooltip>
</template>
<style scoped lang="less">
.value {
cursor: pointer;
font-family: monospace;
}
</style>

40
src/components/TextareaCopyable.vue
View file

@ -40,7 +40,7 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
<template>
<div style="overflow-x: hidden; width: 100%">
<c-card class="result-card">
<c-card relative>
<n-scrollbar
x-scrollable
trigger="none"
@ -50,16 +50,13 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
<n-code :code="value" :language="language" :trim="false" data-test-id="area-content" />
</n-config-provider>
</n-scrollbar>
<n-tooltip v-if="value" trigger="hover">
<template #trigger>
<div class="copy-button" :class="[copyPlacement]">
<c-button circle important:h-10 important:w-10 @click="copy()">
<n-icon size="22" :component="Copy" />
</c-button>
</div>
</template>
<span>{{ tooltipText }}</span>
</n-tooltip>
<div absolute right-10px top-10px>
<c-tooltip v-if="value" :tooltip="tooltipText" position="left">
<c-button circle important:h-10 important:w-10 @click="copy()">
<n-icon size="22" :component="Copy" />
</c-button>
</c-tooltip>
</div>
</c-card>
<div v-if="copyPlacement === 'outside'" mt-4 flex justify-center>
<c-button @click="copy()">
@ -74,25 +71,4 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
padding-bottom: 10px;
margin-bottom: -10px;
}
.result-card {
position: relative;
.copy-button {
position: absolute;
opacity: 1;
&.top-right {
top: 10px;
right: 10px;
}
&.bottom-right {
bottom: 10px;
right: 10px;
}
&.outside,
&.none {
display: none;
}
}
}
</style>

52
src/layouts/base.layout.vue
View file

@ -94,18 +94,17 @@ const tools = computed<ToolCategory[]>(() => [
<NIcon size="25" :component="Menu2" />
</c-button>
<n-tooltip trigger="hover">
<template #trigger>
<c-button to="/" circle variant="text" aria-label="Home">
<NIcon size="25" :component="Home2" />
</c-button>
</template>
Home
</n-tooltip>
<c-tooltip tooltip="Home" position="bottom">
<c-button to="/" circle variant="text" aria-label="Home">
<NIcon size="25" :component="Home2" />
</c-button>
</c-tooltip>
<c-button v-if="config.app.env === 'development'" to="/c-lib" circle variant="text" aria-label="UI Lib">
<icon-mdi:brush-variant text-20px />
</c-button>
<c-tooltip tooltip="UI Lib" position="bottom">
<c-button v-if="config.app.env === 'development'" to="/c-lib" circle variant="text" aria-label="UI Lib">
<icon-mdi:brush-variant text-20px />
</c-button>
</c-tooltip>
<command-palette />
@ -113,23 +112,20 @@ const tools = computed<ToolCategory[]>(() => [
<NavbarButtons v-if="!styleStore.isSmallScreen" />
</div>
<n-tooltip trigger="hover">
<template #trigger>
<c-button
round
href="https://www.buymeacoffee.com/cthmsst"
rel="noopener"
target="_blank"
class="support-button"
:bordered="false"
@click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
>
Buy me a coffee
<NIcon v-if="!styleStore.isSmallScreen" :component="Heart" ml-2 />
</c-button>
</template>
❤ Support IT Tools development !
</n-tooltip>
<c-tooltip position="bottom" tooltip="Support IT Tools development">
<c-button
round
href="https://www.buymeacoffee.com/cthmsst"
rel="noopener"
target="_blank"
class="support-button"
:bordered="false"
@click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
>
Buy me a coffee
<NIcon v-if="!styleStore.isSmallScreen" :component="Heart" ml-2 />
</c-button>
</c-tooltip>
</div>
<slot />
</template>

44
src/pages/About.vue
View file

@ -7,17 +7,17 @@ const { tracker } = useTracker();
</script>
<template>
<div class="about-page">
<n-h1>About</n-h1>
<n-p>
<div mx-auto mt-50px max-w-600px>
<h1>About IT-Tools</h1>
<p text-justify>
This wonderful website, made with ❤ by
<c-link href="https://github.com/CorentinTh" target="_blank" rel="noopener">
Corentin Thomasset
</c-link>,
aggregates useful tools for developer and people working in IT. If you find it useful, please feel free to share
it to people you think may find it useful too and don't forget to bookmark it in your shortcut bar!
</n-p>
<n-p>
</p>
<p text-justify>
IT Tools is open-source (under the MIT license) and free, and will always be, but it costs me money to host and
renew the domain name. If you want to support my work, and encourage me to add more tools, please consider
supporting by
@ -29,20 +29,20 @@ const { tracker } = useTracker();
>
sponsoring me
</c-link>.
</n-p>
</p>
<n-h2>Technologies</n-h2>
<n-p>
<h2>Technologies</h2>
<p text-justify>
IT Tools is made in Vue.js (Vue 3) with the the Naive UI component library and is hosted and continuously deployed
by Vercel. Third-party open-source libraries are used in some tools, you may find the complete list in the
<c-link href="https://github.com/CorentinTh/it-tools/blob/main/package.json" rel="noopener" target="_blank">
package.json
</c-link>
file of the repository.
</n-p>
</p>
<n-h2>Found a bug? A tool is missing?</n-h2>
<n-p>
<h2>Found a bug? A tool is missing?</h2>
<p text-justify>
If you need a tool that is currently not present here, and you think can be useful, you are welcome to submit a
feature request in the
<c-link
@ -53,8 +53,8 @@ const { tracker } = useTracker();
issues section
</c-link>
in the GitHub repository.
</n-p>
<n-p>
</p>
<p text-justify>
And if you found a bug, or something doesn't work as expected, please file a bug report in the
<c-link
href="https://github.com/CorentinTh/it-tools/issues/new/choose"
@ -64,22 +64,6 @@ const { tracker } = useTracker();
issues section
</c-link>
in the GitHub repository.
</n-p>
</p>
</div>
</template>
<style scoped lang="less">
.about-page {
max-width: 600px;
margin: 50px auto;
box-sizing: border-box;
.n-h2 {
margin-bottom: 0px;
}
.n-p {
text-align: justify;
}
}
</style>

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

@ -51,11 +51,11 @@ const results = computed(() => {
const { copy } = useCopy({ createToast: false });
const header = {
position: 'Position',
title: 'Suite',
size: 'Samples',
mean: 'Mean',
variance: 'Variance',
position: 'Position',
};
function copyAsMarkdown() {
@ -131,26 +131,8 @@ function copyAsBulletList() {
</c-button>
</div>
<n-table>
<thead>
<tr>
<th>{{ header.position }}</th>
<th>{{ header.title }}</th>
<th>{{ header.size }}</th>
<th>{{ header.mean }}</th>
<th>{{ header.variance }}</th>
</tr>
</thead>
<tbody>
<tr v-for="{ title, size, mean, variance, position } of results" :key="title">
<td>{{ position }}</td>
<td>{{ title }}</td>
<td>{{ size }}</td>
<td>{{ mean }}</td>
<td>{{ variance }}</td>
</tr>
</tbody>
</n-table>
<c-table :data="results" :headers="header" />
<div mt-5 flex justify-center gap-3>
<c-button @click="copyAsMarkdown()">
Copy as markdown table

13
src/tools/benchmark-builder/dynamic-values.vue
View file

@ -39,14 +39,11 @@ function onInputEnter(index: number) {
autofocus
@keydown.enter="onInputEnter(index)"
/>
<n-tooltip>
<template #trigger>
<c-button circle variant="text" @click="values.splice(index, 1)">
<n-icon :component="Trash" depth="3" size="18" />
</c-button>
</template>
Delete value
</n-tooltip>
<c-tooltip tooltip="Delete this value">
<c-button circle variant="text" @click="values.splice(index, 1)">
<n-icon :component="Trash" depth="3" size="18" />
</c-button>
</c-tooltip>
</div>
<c-button @click="addValue">

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

@ -167,34 +167,8 @@ const cronValidationRules = [
</div>
</c-card>
</div>
<n-table v-else size="small">
<thead>
<tr>
<th class="text-left" scope="col">
Symbol
</th>
<th class="text-left" scope="col">
Meaning
</th>
<th class="text-left" scope="col">
Example
</th>
<th class="text-left" scope="col">
Equivalent
</th>
</tr>
</thead>
<tbody>
<tr v-for="{ symbol, meaning, example, equivalent } in helpers" :key="symbol">
<td>{{ symbol }}</td>
<td>{{ meaning }}</td>
<td>
<code>{{ example }}</code>
</td>
<td>{{ equivalent }}</td>
</tr>
</tbody>
</n-table>
<c-table v-else :data="helpers" />
</c-card>
</template>

14
src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue
View file

@ -6,13 +6,9 @@ const { icon, title, action, isActive } = toRefs(props);
</script>
<template>
<n-tooltip trigger="hover">
<template #trigger>
<c-button circle variant="text" :type="isActive?.() ? 'primary' : 'default'" @click="action">
<n-icon :component="icon" />
</c-button>
</template>
{{ title }}
</n-tooltip>
<c-tooltip :tooltip="title">
<c-button circle variant="text" :type="isActive?.() ? 'primary' : 'default'" @click="action">
<n-icon :component="icon" />
</c-button>
</c-tooltip>
</template>

2
src/tools/index.ts
View file

@ -2,6 +2,7 @@ import { tool as base64FileConverter } from './base64-file-converter';
import { tool as base64StringConverter } from './base64-string-converter';
import { tool as basicAuthGenerator } from './basic-auth-generator';
import { tool as macAddressGenerator } from './mac-address-generator';
import { tool as textToBinary } from './text-to-binary';
import { tool as ulidGenerator } from './ulid-generator';
import { tool as ibanValidatorAndParser } from './iban-validator-and-parser';
import { tool as stringObfuscator } from './string-obfuscator';
@ -89,6 +90,7 @@ export const toolsByCategory: ToolCategory[] = [
colorConverter,
caseConverter,
textToNatoAlphabet,
textToBinary,
yamlToJson,
yamlToToml,
jsonToYaml,

15
src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
View file

@ -61,19 +61,16 @@ const secretValidationRules = [
:validation-rules="secretValidationRules"
>
<template #suffix>
<n-tooltip trigger="hover">
<template #trigger>
<c-button circle variant="text" size="small" @click="refreshSecret">
<icon-mdi-refresh />
</c-button>
</template>
Generate secret token
</n-tooltip>
<c-tooltip tooltip="Generate a new random secret">
<c-button circle variant="text" size="small" @click="refreshSecret">
<icon-mdi-refresh />
</c-button>
</c-tooltip>
</template>
</c-input-text>
<div>
<TokenDisplay :tokens="tokens" style="margin-top: 2px" />
<TokenDisplay :tokens="tokens" />
<n-progress :percentage="(100 * interval) / 30" :color="theme.primaryColor" :show-indicator="false" />
<div style="text-align: center">

76
src/tools/otp-code-generator-and-validator/token-display.vue
View file

@ -11,7 +11,7 @@ const { tokens } = toRefs(props);
<template>
<div>
<div class="labels" w-full flex items-center>
<div mb-5px w-full flex items-center>
<div flex-1 text-left>
Previous
</div>
@ -22,60 +22,24 @@ const { tokens } = toRefs(props);
Next
</div>
</div>
<n-input-group>
<n-tooltip trigger="hover" placement="bottom">
<template #trigger>
<c-button important:h-12 data-test-id="previous-otp" @click.prevent="copyPrevious(tokens.previous)">
{{ tokens.previous }}
</c-button>
</template>
<div>{{ previousCopied ? 'Copied !' : 'Copy previous OTP' }}</div>
</n-tooltip>
<n-tooltip trigger="hover" placement="bottom">
<template #trigger>
<c-button
data-test-id="current-otp"
class="current-otp"
important:h-12
@click.prevent="copyCurrent(tokens.current)"
>
{{ tokens.current }}
</c-button>
</template>
<div>{{ currentCopied ? 'Copied !' : 'Copy current OTP' }}</div>
</n-tooltip>
<n-tooltip trigger="hover" placement="bottom">
<template #trigger>
<c-button important:h-12 data-test-id="next-otp" @click.prevent="copyNext(tokens.next)">
{{
tokens.next
}}
</c-button>
</template>
<div>{{ nextCopied ? 'Copied !' : 'Copy next OTP' }}</div>
</n-tooltip>
</n-input-group>
<div flex items-center>
<c-tooltip :tooltip="previousCopied ? 'Copied !' : 'Copy previous OTP'" position="bottom" flex-1>
<c-button data-test-id="previous-otp" w-full important:h-12 important:rounded-r-none important:font-mono @click.prevent="copyPrevious(tokens.previous)">
{{ tokens.previous }}
</c-button>
</c-tooltip>
<c-tooltip :tooltip="currentCopied ? 'Copied !' : 'Copy current OTP'" position="bottom" flex-1 flex-basis-5xl>
<c-button
data-test-id="current-otp" w-full important:border-x="1px solid gray op-40" important:h-12 important:rounded-0 important:text-22px @click.prevent="copyCurrent(tokens.current)"
>
{{ tokens.current }}
</c-button>
</c-tooltip>
<c-tooltip :tooltip="nextCopied ? 'Copied !' : 'Copy next OTP'" position="bottom" flex-1>
<c-button data-test-id="next-otp" w-full important:h-12 important:rounded-l-none @click.prevent="copyNext(tokens.next)">
{{ tokens.next }}
</c-button>
</c-tooltip>
</div>
</div>
</template>
<style scoped lang="less">
.current-otp {
font-size: 22px;
flex: 1 0 35% !important;
}
.n-button {
height: 45px;
}
.labels {
div {
padding: 0 2px 6px 2px;
line-height: 1.25;
}
}
.n-input-group > * {
flex: 1 0 0;
}
</style>

12
src/tools/text-to-binary/index.ts Normal file
View file

@ -0,0 +1,12 @@
import { Binary } from '@vicons/tabler';
import { defineTool } from '../tool';
export const tool = defineTool({
name: 'Text to ASCII binary',
path: '/text-to-binary',
description: 'Convert text to its ASCII binary representation and vice versa.',
keywords: ['text', 'to', 'binary', 'converter', 'encode', 'decode', 'ascii'],
component: () => import('./text-to-binary.vue'),
icon: Binary,
createdAt: new Date('2023-10-15'),
});

25
src/tools/text-to-binary/text-to-binary.e2e.spec.ts Normal file
View file

@ -0,0 +1,25 @@
import { expect, test } from '@playwright/test';
test.describe('Tool - Text to ASCII binary', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/text-to-binary');
});
test('Has correct title', async ({ page }) => {
await expect(page).toHaveTitle('Text to ASCII binary - IT Tools');
});
test('Text to binary conversion', async ({ page }) => {
await page.getByTestId('text-to-binary-input').fill('it-tools');
const binary = await page.getByTestId('text-to-binary-output').inputValue();
expect(binary).toEqual('01101001 01110100 00101101 01110100 01101111 01101111 01101100 01110011');
});
test('Binary to text conversion', async ({ page }) => {
await page.getByTestId('binary-to-text-input').fill('01101001 01110100 00101101 01110100 01101111 01101111 01101100 01110011');
const text = await page.getByTestId('binary-to-text-output').inputValue();
expect(text).toEqual('it-tools');
});
});

32
src/tools/text-to-binary/text-to-binary.models.test.ts Normal file
View file

@ -0,0 +1,32 @@
import { describe, expect, it } from 'vitest';
import { convertAsciiBinaryToText, convertTextToAsciiBinary } from './text-to-binary.models';
describe('text-to-binary', () => {
describe('convertTextToAsciiBinary', () => {
it('a text string is converted to its ascii binary representation', () => {
expect(convertTextToAsciiBinary('A')).toBe('01000001');
expect(convertTextToAsciiBinary('hello')).toBe('01101000 01100101 01101100 01101100 01101111');
expect(convertTextToAsciiBinary('')).toBe('');
});
it('the separator between octets can be changed', () => {
expect(convertTextToAsciiBinary('hello', { separator: '' })).toBe('0110100001100101011011000110110001101111');
});
});
describe('convertAsciiBinaryToText', () => {
it('an ascii binary string is converted to its text representation', () => {
expect(convertAsciiBinaryToText('01101000 01100101 01101100 01101100 01101111')).toBe('hello');
expect(convertAsciiBinaryToText('01000001')).toBe('A');
expect(convertTextToAsciiBinary('')).toBe('');
});
it('the given binary string is cleaned before conversion', () => {
expect(convertAsciiBinaryToText(' 01000 001garbage')).toBe('A');
});
it('throws an error if the given binary string as no complete octet', () => {
expect(() => convertAsciiBinaryToText('010000011')).toThrow('Invalid binary string');
expect(() => convertAsciiBinaryToText('1')).toThrow('Invalid binary string');
});
});
});

22
src/tools/text-to-binary/text-to-binary.models.ts Normal file
View file

@ -0,0 +1,22 @@
export { convertTextToAsciiBinary, convertAsciiBinaryToText };
function convertTextToAsciiBinary(text: string, { separator = ' ' }: { separator?: string } = {}): string {
return text
.split('')
.map(char => char.charCodeAt(0).toString(2).padStart(8, '0'))
.join(separator);
}
function convertAsciiBinaryToText(binary: string): string {
const cleanBinary = binary.replace(/[^01]/g, '');
if (cleanBinary.length % 8) {
throw new Error('Invalid binary string');
}
return cleanBinary
.split(/(\d{8})/)
.filter(Boolean)
.map(binary => String.fromCharCode(Number.parseInt(binary, 2)))
.join('');
}

42
src/tools/text-to-binary/text-to-binary.vue Normal file
View file

@ -0,0 +1,42 @@
<script setup lang="ts">
import { convertAsciiBinaryToText, convertTextToAsciiBinary } from './text-to-binary.models';
import { withDefaultOnError } from '@/utils/defaults';
import { useCopy } from '@/composable/copy';
import { isNotThrowing } from '@/utils/boolean';
const inputText = ref('');
const binaryFromText = computed(() => convertTextToAsciiBinary(inputText.value));
const { copy: copyBinary } = useCopy({ source: binaryFromText });
const inputBinary = ref('');
const textFromBinary = computed(() => withDefaultOnError(() => convertAsciiBinaryToText(inputBinary.value), ''));
const inputBinaryValidationRules = [
{
validator: (value: string) => isNotThrowing(() => convertAsciiBinaryToText(value)),
message: 'Binary should be a valid ASCII binary string with multiples of 8 bits',
},
];
const { copy: copyText } = useCopy({ source: textFromBinary });
</script>
<template>
<c-card title="Text to ASCII binary">
<c-input-text v-model:value="inputText" multiline placeholder="e.g. 'Hello world'" label="Enter text to convert to binary" autosize autofocus raw-text test-id="text-to-binary-input" />
<c-input-text v-model:value="binaryFromText" label="Binary from your text" multiline raw-text readonly mt-2 placeholder="The binary representation of your text will be here" test-id="text-to-binary-output" />
<div mt-2 flex justify-center>
<c-button :disabled="!binaryFromText" @click="copyBinary()">
Copy binary to clipboard
</c-button>
</div>
</c-card>
<c-card title="ASCII binary to text">
<c-input-text v-model:value="inputBinary" multiline placeholder="e.g. '01001000 01100101 01101100 01101100 01101111'" label="Enter binary to convert to text" autosize raw-text :validation-rules="inputBinaryValidationRules" test-id="binary-to-text-input" />
<c-input-text v-model:value="textFromBinary" label="Text from your binary" multiline raw-text readonly mt-2 placeholder="The text representation of your binary will be here" test-id="binary-to-text-output" />
<div mt-2 flex justify-center>
<c-button :disabled="!textFromBinary" @click="copyText()">
Copy text to clipboard
</c-button>
</div>
</c-card>
</template>

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

@ -14,25 +14,18 @@ const { userAgentInfo, sections } = toRefs(props);
<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">
<c-card h-full>
<n-page-header>
<template #title>
{{ heading }}
</template>
<template v-if="icon" #avatar>
<n-icon size="30" :component="icon" :depth="3" />
</template>
</n-page-header>
<div flex items-center gap-3>
<n-icon size="30" :component="icon" :depth="3" />
<span text-lg>{{ heading }}</span>
</div>
<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>
<n-tag type="success" size="large" round :bordered="false">
{{ getValue(userAgentInfo) }}
</n-tag>
</template>
{{ label }}
</n-tooltip>
<c-tooltip v-if="getValue(userAgentInfo)" :tooltip="label">
<n-tag type="success" size="large" round :bordered="false">
{{ getValue(userAgentInfo) }}
</n-tag>
</c-tooltip>
</span>
</div>
<div flex flex-col>

20
src/ui/c-table/c-table.demo.vue Normal file
View file

@ -0,0 +1,20 @@
<script lang="ts" setup>
const data = ref([
{ name: 'John', age: 20 },
{ name: 'Jane', age: 24 },
{ name: 'Joe', age: 30 },
]);
</script>
<template>
<c-table :data="data" mb-2 />
<c-table :data="data" hide-headers mb-2 />
<c-table :data="data" :headers="['age', 'name']" mb-2 />
<c-table :data="data" :headers="['age', { key: 'name', label: 'Full name' }]" mb-2 />
<c-table :data="data" :headers="{ name: 'full name' }" mb-2 />
<c-table :data="data" :headers="['age', 'name']">
<template #age="{ value }">
{{ value }}yo
</template>
</c-table>
</template>

4
src/ui/c-table/c-table.types.ts Normal file
View file

@ -0,0 +1,4 @@
export type HeaderConfiguration = (string | {
key: string
label?: string
})[] | Record<string, string>;

65
src/ui/c-table/c-table.vue Normal file
View file

@ -0,0 +1,65 @@
<script lang="ts" setup>
import _ from 'lodash';
import type { HeaderConfiguration } from './c-table.types';
const props = withDefaults(defineProps<{ data?: Record<string, unknown>[]; headers?: HeaderConfiguration ; hideHeaders?: boolean; description?: string }>(), { data: () => [], headers: undefined, hideHeaders: false, description: 'Data table' });
const { data, headers: rawHeaders, hideHeaders } = toRefs(props);
const headers = computed(() => {
if (rawHeaders.value) {
if (Array.isArray(rawHeaders.value)) {
return rawHeaders.value.map((value) => {
if (typeof value === 'string') {
return { key: value, label: value };
}
const { key, label } = value;
return {
key,
label: label ?? key,
};
});
}
return _.map(rawHeaders.value, (value, key) => ({
key, label: value,
}));
}
return _.chain(data.value)
.map(row => Object.keys(row))
.flatten()
.uniq()
.map(key => ({ key, label: key }))
.value();
});
</script>
<template>
<div class="relative overflow-x-auto rounded">
<table class="w-full border-collapse text-left text-sm text-gray-500 dark:text-gray-400" role="table" :aria-label="description">
<thead v-if="!hideHeaders" class="bg-#ffffff uppercase text-gray-700 dark:bg-#333333 dark:text-gray-400">
<tr>
<th v-for="header in headers" :key="header.key" scope="col" class="px-6 py-3 text-xs">
{{ header.label }}
</th>
</tr>
</thead>
<tbody>
<tr
v-for="(row, i) in data" :key="i" border-b="1px solid dark:#282828 #efeff5" class="bg-white dark:bg-#232323"
:class="{
'important:border-b-none': i === data.length - 1,
}"
>
<td v-for="header in headers" :key="header.key" class="px-6 py-4">
<slot :name="header" :row="row" :headers="headers" :value="row[header.key]">
{{ row[header.key] }}
</slot>
</td>
</tr>
</tbody>
</table>
</div>
</template>

18
src/ui/c-tooltip/c-tooltip.demo.vue
View file

@ -1,3 +1,7 @@
<script lang="ts" setup>
const positions = ['top', 'bottom', 'left', 'right'] as const;
</script>
<template>
<div>
<c-tooltip>
@ -14,4 +18,18 @@
Hover me
</c-tooltip>
</div>
<div mt-5>
<h2>Tooltip positions</h2>
<div class="flex flex-wrap gap-4">
<div v-for="position in positions" :key="position">
<c-tooltip :position="position" :tooltip="`Tooltip ${position}`">
<c-button>
{{ position }}
</c-button>
</c-tooltip>
</div>
</div>
</div>
</template>

15
src/ui/c-tooltip/c-tooltip.vue
View file

@ -1,23 +1,30 @@
<script setup lang="ts">
const props = withDefaults(defineProps<{ tooltip?: string }>(), { tooltip: '' });
const { tooltip } = toRefs(props);
const props = withDefaults(defineProps<{ tooltip?: string; position?: 'top' | 'bottom' | 'left' | 'right' }>(), {
tooltip: undefined,
position: 'top',
});
const { tooltip, position } = toRefs(props);
const targetRef = ref();
const isTargetHovered = useElementHover(targetRef);
</script>
<template>
<div class="relative" inline-block>
<div relative inline-block>
<div ref="targetRef">
<slot />
</div>
<div
v-if="tooltip || $slots.tooltip"
class="absolute bottom-100% left-50% z-10 mb-5px whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s -translate-x-1/2"
class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s"
:class="{
'op-0 scale-0': isTargetHovered === false,
'op-100 scale-100': isTargetHovered,
'bottom-100% left-50% -translate-x-1/2 mb-5px': position === 'top',
'top-100% left-50% -translate-x-1/2 mt-5px': position === 'bottom',
'right-100% top-50% -translate-y-1/2 mr-5px': position === 'left',
'left-100% top-50% -translate-y-1/2 ml-5px': position === 'right',
}"
>
<slot