mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-10-23 04:52:14 +00:00
Compare commits
2 Commits
v2023.11.1
...
card-hover
| Author | SHA1 | Date | |
|---|---|---|---|
|
e9e0884789 | ||
|
|
e0c7771e8f |
@@ -1,5 +0,0 @@
|
||||
node_modules
|
||||
playwright-report
|
||||
coverage
|
||||
dist
|
||||
test-results
|
||||
2
.github/workflows/ci.yml
vendored
2
.github/workflows/ci.yml
vendored
@@ -11,7 +11,7 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
|
||||
- uses: actions/checkout@v3
|
||||
- run: corepack enable
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
|
||||
2
.github/workflows/codeql-analysis.yml
vendored
2
.github/workflows/codeql-analysis.yml
vendored
@@ -37,7 +37,7 @@ jobs:
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
|
||||
uses: actions/checkout@v3
|
||||
|
||||
# Initializes the CodeQL tools for scanning.
|
||||
- name: Initialize CodeQL
|
||||
|
||||
16
.github/workflows/docker-nightly-release.yml
vendored
16
.github/workflows/docker-nightly-release.yml
vendored
@@ -12,7 +12,7 @@ jobs:
|
||||
outputs:
|
||||
should_run: ${{ steps.should_run.outputs.should_run }}
|
||||
steps:
|
||||
- uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
|
||||
- uses: actions/checkout@v3
|
||||
- name: print latest_commit
|
||||
run: echo ${{ github.sha }}
|
||||
|
||||
@@ -28,7 +28,7 @@ jobs:
|
||||
if: ${{ needs.check_date.outputs.should_run != 'false' }}
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
|
||||
- uses: actions/checkout@v3
|
||||
- run: corepack enable
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
@@ -54,29 +54,29 @@ jobs:
|
||||
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: Login to GitHub Container Registry
|
||||
uses: docker/login-action@v3
|
||||
uses: docker/login-action@v2
|
||||
with:
|
||||
registry: ghcr.io
|
||||
username: ${{ github.repository_owner }}
|
||||
password: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
- name: Login to Docker Hub
|
||||
uses: docker/login-action@v3
|
||||
uses: docker/login-action@v2
|
||||
with:
|
||||
username: ${{ secrets.DOCKERHUB_USERNAME }}
|
||||
password: ${{ secrets.DOCKERHUB_TOKEN }}
|
||||
|
||||
- name: Set up QEMU
|
||||
uses: docker/setup-qemu-action@v3
|
||||
uses: docker/setup-qemu-action@v2
|
||||
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@v3
|
||||
uses: docker/setup-buildx-action@v2
|
||||
|
||||
- name: Build and push
|
||||
uses: docker/build-push-action@v5
|
||||
uses: docker/build-push-action@v4
|
||||
with:
|
||||
context: .
|
||||
file: ./Dockerfile
|
||||
|
||||
4
.github/workflows/e2e-tests.yml
vendored
4
.github/workflows/e2e-tests.yml
vendored
@@ -6,13 +6,13 @@ on:
|
||||
- main
|
||||
jobs:
|
||||
test:
|
||||
timeout-minutes: 10
|
||||
timeout-minutes: 60
|
||||
runs-on: ubuntu-latest
|
||||
strategy:
|
||||
matrix:
|
||||
shard: [1/3, 2/3, 3/3]
|
||||
steps:
|
||||
- uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
- run: corepack enable
|
||||
|
||||
|
||||
14
.github/workflows/releases.yml
vendored
14
.github/workflows/releases.yml
vendored
@@ -13,29 +13,29 @@ jobs:
|
||||
run: echo "RELEASE_VERSION=${GITHUB_REF#refs/tags/v}" >> $GITHUB_ENV
|
||||
|
||||
- name: Checkout
|
||||
uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: Login to GitHub Container Registry
|
||||
uses: docker/login-action@v3
|
||||
uses: docker/login-action@v2
|
||||
with:
|
||||
registry: ghcr.io
|
||||
username: ${{ github.repository_owner }}
|
||||
password: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
- name: Login to Docker Hub
|
||||
uses: docker/login-action@v3
|
||||
uses: docker/login-action@v2
|
||||
with:
|
||||
username: ${{ secrets.DOCKERHUB_USERNAME }}
|
||||
password: ${{ secrets.DOCKERHUB_TOKEN }}
|
||||
|
||||
- name: Set up QEMU
|
||||
uses: docker/setup-qemu-action@v3
|
||||
uses: docker/setup-qemu-action@v2
|
||||
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@v3
|
||||
uses: docker/setup-buildx-action@v2
|
||||
|
||||
- name: Build and push
|
||||
uses: docker/build-push-action@v5
|
||||
uses: docker/build-push-action@v4
|
||||
with:
|
||||
context: .
|
||||
file: ./Dockerfile
|
||||
@@ -55,7 +55,7 @@ jobs:
|
||||
run: echo "RELEASE_VERSION=${GITHUB_REF#refs/tags/v}" >> $GITHUB_ENV
|
||||
|
||||
- name: Checkout
|
||||
uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- run: corepack enable
|
||||
|
||||
|
||||
59
CHANGELOG.md
59
CHANGELOG.md
@@ -2,65 +2,6 @@
|
||||
|
||||
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
||||
|
||||
## Version 2023.11.01-e164afb
|
||||
|
||||
### Features
|
||||
- **command-palette**: clear prompt on palette close (#708) (d013696)
|
||||
- **command-palette**: added about page in command palette (99b1eb9)
|
||||
- **new tool**: random MAC address generator (#657) (cc3425d)
|
||||
- **case-converter**: added mocking case (#705) (681f7bf)
|
||||
- **date-converter**: added excel date time format (#704) (f5eb7a8)
|
||||
- **i18n**: token generator (#688) (02e68d3)
|
||||
- **i18n**: home page (#687) (00562ed)
|
||||
- **i18n**: support for i18n in .ts files (#683) (ebb4ec4)
|
||||
- **i18n**: tool card (#682) (84a4a64)
|
||||
- **i18n**: about page (#680) (a2b53c2)
|
||||
- **i18n**: 404 page (#679) (35563b8)
|
||||
- **new tool**: text to ascii converter (#669) (b2ad4f7)
|
||||
- **new tool**: ULID generator (#623) (5c4d775)
|
||||
- **new tool**: add wifi qr code generator (#599) (0eedce6)
|
||||
- **new tool**: iban validation and parser (#591) (3a63837)
|
||||
- **new tool**: text diff and comparator (#588) (81bfe57)
|
||||
|
||||
### Bug fixes
|
||||
- **deps**: fix issue on slugify (#593) (#673) (720201a)
|
||||
- **deps**: update dependency monaco-editor to ^0.43.0 (#620) (e371ef7)
|
||||
- **deps**: update dependency sql-formatter to v13 (#606) (c7d4562)
|
||||
|
||||
### Refactoring
|
||||
- **ui**: better ui demo preview menu (#664) (015c673)
|
||||
- **color-converter**: improved color-converter UX (#701) (abb8335)
|
||||
- **docker**: improved docker config (#700) (020e9cb)
|
||||
- **c-table**: added description on c-table for accessibility (b408df8)
|
||||
- **ci**: reduced timeout in e2e (#666) (88b8818)
|
||||
- **ui**: new c-table ui component (#665) (ee4c853)
|
||||
- **ui**: removed n-page-header component in user-agent parser (#663) (cbf58fd)
|
||||
- **ui**: removed n-p components in about page (#662) (a757a51)
|
||||
- **ui**: switched naive tooltip components to custom ones (#661) (025f556)
|
||||
- **spelling**: minor corrections to phrasing/spelling (#596) (8a30b6b)
|
||||
- **i18n**: merge tools scoped locales with global ones (#612) (233d556)
|
||||
- **c-key-value-list**: got rid of table for layout (#611) (7ab9204)
|
||||
- **CI**: run e2e against built app and no longer vercel (#610) (18dd140)
|
||||
- **bcrypt**: fix typo (#604) (e18bae1)
|
||||
|
||||
### Chores
|
||||
- **deps**: clean unused dependencies (#709) (e164afb)
|
||||
- **deps**: update docker/setup-qemu-action action to v3 (#627) (4365226)
|
||||
- **deps**: update docker/setup-buildx-action action to v3 (#626) (57ecda1)
|
||||
- **deps**: update docker/login-action action to v3 (#625) (d8d7a3b)
|
||||
- **deps**: update docker/build-push-action action to v5 (#624) (d36b18f)
|
||||
- **deps**: update dependency node to v18.18.2 (#674) (eea9f91)
|
||||
- **deps**: update dependency node to v18.18.0 (#636) (2d2dffb)
|
||||
- **deps**: update actions/checkout action to v4 (#613) (4972159)
|
||||
- **deps**: update dependency unplugin-icons to ^0.17.0 (#609) (f035f48)
|
||||
- **deps**: update dependency @intlify/unplugin-vue-i18n to ^0.13.0 (#597) (d1dff42)
|
||||
- **deps**: update dependency @antfu/eslint-config to ^0.41.0 (#585) (a9cd91c)
|
||||
- **deps**: update dependency typescript to ~5.2.0 (#587) (f3e14fc)
|
||||
|
||||
### Doc
|
||||
- **readme**: added contributors list (#622) (557b304)
|
||||
- **hosting**: added cloudron in the other hosting solutions section (#589) (06c3547)
|
||||
|
||||
## Version 2023.08.21-6f93cba
|
||||
|
||||
### Features
|
||||
|
||||
@@ -1,16 +1,13 @@
|
||||
# build stage
|
||||
FROM node:lts-alpine AS build-stage
|
||||
# Set environment variables for non-interactive npm installs
|
||||
ENV NPM_CONFIG_LOGLEVEL warn
|
||||
ENV CI true
|
||||
WORKDIR /app
|
||||
COPY package.json pnpm-lock.yaml ./
|
||||
RUN npm install -g pnpm && pnpm i --frozen-lockfile
|
||||
COPY . .
|
||||
RUN npm install -g pnpm
|
||||
RUN pnpm i --frozen-lockfile
|
||||
RUN pnpm build
|
||||
|
||||
# production stage
|
||||
FROM nginxinc/nginx-unprivileged:stable-alpine AS production-stage
|
||||
FROM nginx:stable-alpine AS production-stage
|
||||
COPY --from=build-stage /app/dist /usr/share/nginx/html
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
EXPOSE 80
|
||||
|
||||
@@ -105,20 +105,12 @@ pnpm run script:create-new-tool my-tool-name
|
||||
|
||||
It will create a directory in `src/tools` with the correct files, and a the import in `src/tools/index.ts`. You will just need to add the imported tool in the proper category and develop the tool.
|
||||
|
||||
## Contributors
|
||||
|
||||
Big thanks to all the people who have already contributed!
|
||||
|
||||
[](https://github.com/corentinth/it-tools/graphs/contributors)
|
||||
|
||||
## Credits
|
||||
|
||||
Coded with ❤️ by [Corentin Thomasset](//corentin-thomasset.fr).
|
||||
|
||||
This project is continuously deployed using [vercel.com](https://vercel.com).
|
||||
|
||||
Contributor graph is generated using [contrib.rocks](https://contrib.rocks/preview?repo=corentinth/it-tools).
|
||||
|
||||
<a href="https://www.producthunt.com/posts/it-tools?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-it-tools" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=345793&theme=light" alt="IT Tools - Collection of handy online tools for devs, with great UX | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
|
||||
<a href="https://www.producthunt.com/posts/it-tools?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-it-tools" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=345793&theme=light&period=daily" alt="IT Tools - Collection of handy online tools for devs, with great UX | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
|
||||
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
---
|
||||
to: src/ui/<%= h.changeCase.param(name) %>/<%= h.changeCase.param(name) %>.demo.vue
|
||||
---
|
||||
<template>
|
||||
<<%= h.changeCase.param(name) %> />
|
||||
</template>
|
||||
@@ -1,13 +0,0 @@
|
||||
---
|
||||
to: src/ui/<%= h.changeCase.param(name) %>/<%= h.changeCase.param(name) %>.vue
|
||||
---
|
||||
<script lang="ts" setup>
|
||||
const props = withDefaults(defineProps<{ prop?: string }>(), { prop: '' });
|
||||
const { prop } = toRefs(props);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
{{ prop }}
|
||||
</div>
|
||||
</template>
|
||||
11
components.d.ts
vendored
11
components.d.ts
vendored
@@ -25,8 +25,6 @@ declare module '@vue/runtime-core' {
|
||||
CaseConverter: typeof import('./src/tools/case-converter/case-converter.vue')['default']
|
||||
CButton: typeof import('./src/ui/c-button/c-button.vue')['default']
|
||||
'CButton.demo': typeof import('./src/ui/c-button/c-button.demo.vue')['default']
|
||||
CButtonsSelect: typeof import('./src/ui/c-buttons-select/c-buttons-select.vue')['default']
|
||||
'CButtonsSelect.demo': typeof import('./src/ui/c-buttons-select/c-buttons-select.demo.vue')['default']
|
||||
CCard: typeof import('./src/ui/c-card/c-card.vue')['default']
|
||||
'CCard.demo': typeof import('./src/ui/c-card/c-card.demo.vue')['default']
|
||||
CDiffEditor: typeof import('./src/ui/c-diff-editor/c-diff-editor.vue')['default']
|
||||
@@ -49,8 +47,6 @@ declare module '@vue/runtime-core' {
|
||||
CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default']
|
||||
CSelect: typeof import('./src/ui/c-select/c-select.vue')['default']
|
||||
'CSelect.demo': typeof import('./src/ui/c-select/c-select.demo.vue')['default']
|
||||
CTable: typeof import('./src/ui/c-table/c-table.vue')['default']
|
||||
'CTable.demo': typeof import('./src/ui/c-table/c-table.demo.vue')['default']
|
||||
CTextCopyable: typeof import('./src/ui/c-text-copyable/c-text-copyable.vue')['default']
|
||||
'CTextCopyable.demo': typeof import('./src/ui/c-text-copyable/c-text-copyable.demo.vue')['default']
|
||||
CTooltip: typeof import('./src/ui/c-tooltip/c-tooltip.vue')['default']
|
||||
@@ -92,7 +88,6 @@ declare module '@vue/runtime-core' {
|
||||
IconMdiDownload: typeof import('~icons/mdi/download')['default']
|
||||
IconMdiEye: typeof import('~icons/mdi/eye')['default']
|
||||
IconMdiEyeOff: typeof import('~icons/mdi/eye-off')['default']
|
||||
IconMdiHeart: typeof import('~icons/mdi/heart')['default']
|
||||
IconMdiPause: typeof import('~icons/mdi/pause')['default']
|
||||
IconMdiPlay: typeof import('~icons/mdi/play')['default']
|
||||
IconMdiRecord: typeof import('~icons/mdi/record')['default']
|
||||
@@ -115,7 +110,6 @@ declare module '@vue/runtime-core' {
|
||||
KeycodeInfo: typeof import('./src/tools/keycode-info/keycode-info.vue')['default']
|
||||
ListConverter: typeof import('./src/tools/list-converter/list-converter.vue')['default']
|
||||
LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default']
|
||||
MacAddressGenerator: typeof import('./src/tools/mac-address-generator/mac-address-generator.vue')['default']
|
||||
MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default']
|
||||
MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default']
|
||||
MenuBar: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar.vue')['default']
|
||||
@@ -150,6 +144,8 @@ declare module '@vue/runtime-core' {
|
||||
NLayout: typeof import('naive-ui')['NLayout']
|
||||
NLayoutSider: typeof import('naive-ui')['NLayoutSider']
|
||||
NMenu: typeof import('naive-ui')['NMenu']
|
||||
NP: typeof import('naive-ui')['NP']
|
||||
NPageHeader: typeof import('naive-ui')['NPageHeader']
|
||||
NProgress: typeof import('naive-ui')['NProgress']
|
||||
NScrollbar: typeof import('naive-ui')['NScrollbar']
|
||||
NSlider: typeof import('naive-ui')['NSlider']
|
||||
@@ -157,6 +153,7 @@ declare module '@vue/runtime-core' {
|
||||
NSwitch: typeof import('naive-ui')['NSwitch']
|
||||
NTable: typeof import('naive-ui')['NTable']
|
||||
NTag: typeof import('naive-ui')['NTag']
|
||||
NTooltip: typeof import('naive-ui')['NTooltip']
|
||||
NUpload: typeof import('naive-ui')['NUpload']
|
||||
NUploadDragger: typeof import('naive-ui')['NUploadDragger']
|
||||
OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
|
||||
@@ -179,7 +176,6 @@ declare module '@vue/runtime-core' {
|
||||
TextareaCopyable: typeof import('./src/components/TextareaCopyable.vue')['default']
|
||||
TextDiff: typeof import('./src/tools/text-diff/text-diff.vue')['default']
|
||||
TextStatistics: typeof import('./src/tools/text-statistics/text-statistics.vue')['default']
|
||||
TextToBinary: typeof import('./src/tools/text-to-binary/text-to-binary.vue')['default']
|
||||
TextToNatoAlphabet: typeof import('./src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue')['default']
|
||||
TokenDisplay: typeof import('./src/tools/otp-code-generator-and-validator/token-display.vue')['default']
|
||||
'TokenGenerator.tool': typeof import('./src/tools/token-generator/token-generator.tool.vue')['default']
|
||||
@@ -187,7 +183,6 @@ declare module '@vue/runtime-core' {
|
||||
TomlToYaml: typeof import('./src/tools/toml-to-yaml/toml-to-yaml.vue')['default']
|
||||
'Tool.layout': typeof import('./src/layouts/tool.layout.vue')['default']
|
||||
ToolCard: typeof import('./src/components/ToolCard.vue')['default']
|
||||
UlidGenerator: typeof import('./src/tools/ulid-generator/ulid-generator.vue')['default']
|
||||
UrlEncoder: typeof import('./src/tools/url-encoder/url-encoder.vue')['default']
|
||||
UrlParser: typeof import('./src/tools/url-parser/url-parser.vue')['default']
|
||||
UserAgentParser: typeof import('./src/tools/user-agent-parser/user-agent-parser.vue')['default']
|
||||
|
||||
@@ -1,51 +1,5 @@
|
||||
home:
|
||||
categories:
|
||||
newestTools: Newest tools
|
||||
favoriteTools: 'Your favorite tools'
|
||||
allTools: 'All the tools'
|
||||
subtitle: 'Handy tools for developers'
|
||||
toggleMenu: 'Toggle menu'
|
||||
home: Home
|
||||
uiLib: 'UI Lib'
|
||||
buyMeACoffee: 'Buy me a coffee'
|
||||
follow:
|
||||
title: 'You like it-tools?'
|
||||
p1: 'Give us a star on'
|
||||
githubRepository: 'IT-Tools GitHub repository'
|
||||
p2: 'or follow us on'
|
||||
twitterAccount: 'IT-Tools Twitter account'
|
||||
thankYou: 'Thank you !'
|
||||
nav:
|
||||
github: 'GitHub repository'
|
||||
githubRepository: 'IT-Tools GitHub repository'
|
||||
twitter: 'Twitter account'
|
||||
twitterAccount: 'IT Tools Twitter account'
|
||||
about: 'About IT-Tools'
|
||||
aboutLabel: 'About'
|
||||
darkMode: 'Dark mode'
|
||||
lightMode: 'Light mode'
|
||||
mode: 'Toggle dark/light mode'
|
||||
about:
|
||||
h1: 'About IT-Tools'
|
||||
h1p1: 'This wonderful website, made with ❤ by'
|
||||
h1p2: ', 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!'
|
||||
h1p3: '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'
|
||||
h1p4: 'sponsoring me'
|
||||
h2: Technologies
|
||||
h2p1: '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'
|
||||
h2p2: 'file of the repository.'
|
||||
h3: 'Found a bug? A tool is missing?'
|
||||
h3p1: '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'
|
||||
h3p2: 'issues section'
|
||||
h3p3: 'in the GitHub repository.'
|
||||
h3p4: 'And if you found a bug, or something doesn''''t work as expected, please file a bug report in the'
|
||||
h3p5: 'issues section'
|
||||
h3p6: 'in the GitHub repository.'
|
||||
404:
|
||||
notFound: '404 Not Found'
|
||||
sorry: 'Sorry, this page does not seem to exist'
|
||||
maybe: 'Maybe the cache is doing tricky things, try force-refreshing?'
|
||||
backHome: 'Back home'
|
||||
toolCard:
|
||||
new: New
|
||||
|
||||
allTheTools: All the tools
|
||||
yourFavoriteTools: Your favorite tools
|
||||
|
||||
22
package.json
22
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "it-tools",
|
||||
"version": "2023.11.1-e164afb",
|
||||
"version": "2023.8.21-6f93cba",
|
||||
"description": "Collection of handy online tools for developers, with great UX. ",
|
||||
"keywords": [
|
||||
"productivity",
|
||||
@@ -30,17 +30,16 @@
|
||||
"coverage": "vitest run --coverage",
|
||||
"typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
|
||||
"lint": "eslint src --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore",
|
||||
"script:create:tool": "node scripts/create-tool.mjs",
|
||||
"script:create:ui": "hygen generator ui-component",
|
||||
"script:create-new-tool": "node scripts/create-tool.mjs",
|
||||
"release": "node ./scripts/release.mjs"
|
||||
},
|
||||
"dependencies": {
|
||||
"@it-tools/bip39": "^0.0.4",
|
||||
"@it-tools/oggen": "^1.3.0",
|
||||
"@sindresorhus/slugify": "^2.2.1",
|
||||
"@tiptap/pm": "2.1.6",
|
||||
"@tiptap/starter-kit": "2.1.6",
|
||||
"@tiptap/vue-3": "2.0.3",
|
||||
"@sindresorhus/slugify": "^2.2.0",
|
||||
"@tiptap/pm": "^2.1.6",
|
||||
"@tiptap/starter-kit": "^2.1.6",
|
||||
"@tiptap/vue-3": "^2.0.3",
|
||||
"@vicons/material": "^0.12.0",
|
||||
"@vicons/tabler": "^0.12.0",
|
||||
"@vueuse/core": "^10.3.0",
|
||||
@@ -67,17 +66,17 @@
|
||||
"lodash": "^4.17.21",
|
||||
"mathjs": "^11.9.1",
|
||||
"mime-types": "^2.1.35",
|
||||
"monaco-editor": "^0.43.0",
|
||||
"naive-ui": "^2.35.0",
|
||||
"monaco-editor": "^0.41.0",
|
||||
"naive-ui": "^2.34.3",
|
||||
"netmask": "^2.0.2",
|
||||
"node-forge": "^1.3.1",
|
||||
"oui": "^12.0.52",
|
||||
"pinia": "^2.0.34",
|
||||
"plausible-tracker": "^0.3.8",
|
||||
"qrcode": "^1.5.1",
|
||||
"randombytes": "^2.1.0",
|
||||
"sql-formatter": "^13.0.0",
|
||||
"ua-parser-js": "^1.0.35",
|
||||
"ulid": "^2.3.0",
|
||||
"unicode-emoji-json": "^0.4.0",
|
||||
"unplugin-auto-import": "^0.16.4",
|
||||
"uuid": "^9.0.0",
|
||||
@@ -104,6 +103,7 @@
|
||||
"@types/node": "^18.15.11",
|
||||
"@types/node-forge": "^1.3.2",
|
||||
"@types/qrcode": "^1.5.0",
|
||||
"@types/randombytes": "^2.0.0",
|
||||
"@types/ua-parser-js": "^0.7.36",
|
||||
"@types/uuid": "^9.0.0",
|
||||
"@unocss/eslint-config": "^0.55.0",
|
||||
@@ -113,9 +113,9 @@
|
||||
"@vue/runtime-dom": "^3.3.4",
|
||||
"@vue/test-utils": "^2.3.2",
|
||||
"@vue/tsconfig": "^0.4.0",
|
||||
"c8": "^8.0.0",
|
||||
"consola": "^3.0.2",
|
||||
"eslint": "^8.47.0",
|
||||
"hygen": "^6.2.11",
|
||||
"jsdom": "^22.0.0",
|
||||
"less": "^4.1.3",
|
||||
"prettier": "^3.0.0",
|
||||
|
||||
2160
pnpm-lock.yaml
generated
2160
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,4 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { FavoriteFilled } from '@vicons/material';
|
||||
|
||||
import { useToolStore } from '@/tools/tools.store';
|
||||
import type { Tool } from '@/tools/tools.types';
|
||||
|
||||
@@ -24,15 +26,18 @@ function toggleFavorite(event: MouseEvent) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
@@ -13,11 +13,14 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : 'Copy to cli
|
||||
<template>
|
||||
<c-input-text v-model:value="value">
|
||||
<template #suffix>
|
||||
<c-tooltip :tooltip="tooltipText">
|
||||
<c-button circle variant="text" size="small" @click="copy()">
|
||||
<icon-mdi-content-copy />
|
||||
</c-button>
|
||||
</c-tooltip>
|
||||
<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>
|
||||
</template>
|
||||
</c-input-text>
|
||||
</template>
|
||||
|
||||
@@ -7,43 +7,56 @@ const { isDarkTheme } = toRefs(styleStore);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<c-tooltip :tooltip="$t('home.nav.github')" position="bottom">
|
||||
<c-button
|
||||
circle
|
||||
variant="text"
|
||||
href="https://github.com/CorentinTh/it-tools"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
:aria-label="$t('home.nav.githubRepository')"
|
||||
>
|
||||
<n-icon size="25" :component="BrandGithub" />
|
||||
</c-button>
|
||||
</c-tooltip>
|
||||
<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="$t('home.nav.twitter')" position="bottom">
|
||||
<c-button
|
||||
circle
|
||||
variant="text"
|
||||
href="https://twitter.com/ittoolsdottech"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
:aria-label="$t('home.nav.twitterAccount')"
|
||||
>
|
||||
<n-icon size="25" :component="BrandTwitter" />
|
||||
</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="$t('home.nav.about')" position="bottom">
|
||||
<c-button circle variant="text" to="/about" :aria-label="$t('home.nav.aboutLabel')">
|
||||
<n-icon size="25" :component="InfoCircle" />
|
||||
</c-button>
|
||||
</c-tooltip>
|
||||
<c-tooltip :tooltip="isDarkTheme ? $t('home.nav.lightMode') : $t('home.nav.darkMode')" position="bottom">
|
||||
<c-button circle variant="text" :aria-label="$t('home.nav.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>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
@@ -11,7 +11,17 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : initialText)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<c-tooltip :tooltip="tooltipText">
|
||||
<span cursor-pointer font-mono @click="copy()">{{ value }}</span>
|
||||
</c-tooltip>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<span class="value" @click="copy()">{{ value }}</span>
|
||||
</template>
|
||||
{{ tooltipText }}
|
||||
</n-tooltip>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.value {
|
||||
cursor: pointer;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -40,7 +40,7 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
|
||||
|
||||
<template>
|
||||
<div style="overflow-x: hidden; width: 100%">
|
||||
<c-card relative>
|
||||
<c-card class="result-card">
|
||||
<n-scrollbar
|
||||
x-scrollable
|
||||
trigger="none"
|
||||
@@ -50,13 +50,16 @@ 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>
|
||||
<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>
|
||||
<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>
|
||||
</c-card>
|
||||
<div v-if="copyPlacement === 'outside'" mt-4 flex justify-center>
|
||||
<c-button @click="copy()">
|
||||
@@ -71,4 +74,25 @@ 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>
|
||||
|
||||
@@ -1,19 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import { useThemeVars } from 'naive-ui';
|
||||
import FavoriteButton from './FavoriteButton.vue';
|
||||
import { useAppTheme } from '@/ui/theme/themes';
|
||||
import type { Tool } from '@/tools/tools.types';
|
||||
|
||||
const props = defineProps<{ tool: Tool & { category: string } }>();
|
||||
const { tool } = toRefs(props);
|
||||
const theme = useThemeVars();
|
||||
|
||||
const appTheme = useAppTheme();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<router-link :to="tool.path">
|
||||
<c-card class="tool-card">
|
||||
<c-card class="tool-card" shadow>
|
||||
<div flex items-center justify-between>
|
||||
<n-icon class="icon" size="40" :component="tool.icon" />
|
||||
<div flex items-center gap-8px>
|
||||
@@ -26,21 +23,20 @@ const appTheme = useAppTheme();
|
||||
:bordered="false"
|
||||
:color="{ color: theme.primaryColor, textColor: theme.tagColor }"
|
||||
>
|
||||
{{ $t('toolCard.new') }}
|
||||
New
|
||||
</n-tag>
|
||||
|
||||
<FavoriteButton :tool="tool" />
|
||||
</div>
|
||||
</div>
|
||||
<n-h3 class="title">
|
||||
<n-ellipsis>{{ tool.name }}</n-ellipsis>
|
||||
<n-h3 class="title" truncate>
|
||||
{{ tool.name }}
|
||||
</n-h3>
|
||||
|
||||
<div class="description">
|
||||
<n-ellipsis :line-clamp="2" :tooltip="false" style="min-height: 44.78px">
|
||||
<div line-clamp-2 style="min-height: 44.78px">
|
||||
{{ tool.description }}
|
||||
<br>
|
||||
</n-ellipsis>
|
||||
</div>
|
||||
</div>
|
||||
</c-card>
|
||||
</router-link>
|
||||
@@ -52,16 +48,14 @@ a {
|
||||
}
|
||||
|
||||
.tool-card {
|
||||
transition: border-color ease 0.5s;
|
||||
border-width: 2px !important;
|
||||
color: transparent;
|
||||
|
||||
&:hover {
|
||||
border-color: v-bind('appTheme.primary.colorHover');
|
||||
}
|
||||
position: relative;
|
||||
border-radius: 15px;
|
||||
border: none;
|
||||
|
||||
.icon {
|
||||
opacity: 0.6;
|
||||
opacity: 0.4;
|
||||
color: v-bind('theme.textColorBase');
|
||||
}
|
||||
|
||||
@@ -74,5 +68,46 @@ a {
|
||||
color: v-bind('theme.textColorBase');
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
--mask-radius: 20em;
|
||||
|
||||
border-radius: 15px;
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
display: block;
|
||||
height: calc(100% - 4px) ;
|
||||
width: calc(100% - 4px) ;
|
||||
background: #18a05818;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
border: 2px solid transparent;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
-webkit-mask: radial-gradient(
|
||||
var(--mask-radius) var(--mask-radius) at 45px 45px,
|
||||
#000 1%,
|
||||
transparent 50%
|
||||
);
|
||||
|
||||
mask: radial-gradient(
|
||||
var(--mask-radius) var(--mask-radius) at 45px 45px,
|
||||
#000 1%,
|
||||
transparent 50%
|
||||
);
|
||||
|
||||
will-change: mask;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
--mask-radius: 50em;
|
||||
border: 2px solid #18a058;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -41,7 +41,7 @@ const tools = computed<ToolCategory[]>(() => [
|
||||
</div>
|
||||
<div class="divider" />
|
||||
<div class="subtitle">
|
||||
{{ $t('home.subtitle') }}
|
||||
Handy tools for developers
|
||||
</div>
|
||||
</div>
|
||||
</RouterLink>
|
||||
@@ -88,23 +88,24 @@ const tools = computed<ToolCategory[]>(() => [
|
||||
<c-button
|
||||
circle
|
||||
variant="text"
|
||||
:aria-label="$t('home.toggleMenu')"
|
||||
aria-label="Toggle menu"
|
||||
@click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed"
|
||||
>
|
||||
<NIcon size="25" :component="Menu2" />
|
||||
</c-button>
|
||||
|
||||
<c-tooltip tooltip="Home" position="bottom">
|
||||
<c-button to="/" circle variant="text" :aria-label="$t('home.home')">
|
||||
<NIcon size="25" :component="Home2" />
|
||||
</c-button>
|
||||
</c-tooltip>
|
||||
<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="UI Lib" position="bottom">
|
||||
<c-button v-if="config.app.env === 'development'" to="/c-lib" circle variant="text" :aria-label="$t('home.uiLib')">
|
||||
<icon-mdi:brush-variant text-20px />
|
||||
</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>
|
||||
|
||||
<command-palette />
|
||||
|
||||
@@ -112,20 +113,23 @@ const tools = computed<ToolCategory[]>(() => [
|
||||
<NavbarButtons v-if="!styleStore.isSmallScreen" />
|
||||
</div>
|
||||
|
||||
<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' })"
|
||||
>
|
||||
{{ $t('home.buyMeACoffee') }}
|
||||
<NIcon v-if="!styleStore.isSmallScreen" :component="Heart" ml-2 />
|
||||
</c-button>
|
||||
</c-tooltip>
|
||||
<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>
|
||||
</div>
|
||||
<slot />
|
||||
</template>
|
||||
|
||||
@@ -9,7 +9,6 @@ import SunIcon from '~icons/mdi/white-balance-sunny';
|
||||
import GithubIcon from '~icons/mdi/github';
|
||||
import BugIcon from '~icons/mdi/bug-outline';
|
||||
import DiceIcon from '~icons/mdi/dice-5';
|
||||
import InfoIcon from '~icons/mdi/information-outline';
|
||||
|
||||
export const useCommandPaletteStore = defineStore('command-palette', () => {
|
||||
const toolStore = useToolStore();
|
||||
@@ -62,14 +61,6 @@ export const useCommandPaletteStore = defineStore('command-palette', () => {
|
||||
keywords: ['report', 'issue', 'bug', 'problem', 'error'],
|
||||
icon: BugIcon,
|
||||
},
|
||||
{
|
||||
name: 'About',
|
||||
description: 'Learn more about IT-Tools.',
|
||||
to: '/about',
|
||||
category: 'Pages',
|
||||
keywords: ['about', 'learn', 'more', 'info', 'information'],
|
||||
icon: InfoIcon,
|
||||
},
|
||||
];
|
||||
|
||||
const { searchResult } = useFuzzySearch({
|
||||
|
||||
@@ -37,7 +37,6 @@ function open() {
|
||||
|
||||
function close() {
|
||||
isModalOpen.value = false;
|
||||
searchPrompt.value = '';
|
||||
}
|
||||
|
||||
const selectedOptionIndex = ref(0);
|
||||
|
||||
@@ -11,17 +11,17 @@ useHead({ title: 'Page not found - IT Tools' });
|
||||
</span>
|
||||
|
||||
<h1 m-0 mt-3>
|
||||
{{ $t('404.notFound') }}
|
||||
404 Not Found
|
||||
</h1>
|
||||
<div mt-4 op-60>
|
||||
{{ $t('404.sorry') }}
|
||||
Sorry, this page does not seem to exist
|
||||
</div>
|
||||
<div mb-8 op-60>
|
||||
{{ $t('404.maybe') }}
|
||||
Maybe the cache is doing tricky things, try force-refreshing?
|
||||
</div>
|
||||
|
||||
<c-button to="/">
|
||||
{{ $t('404.backHome') }}
|
||||
Back home
|
||||
</c-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -7,57 +7,79 @@ const { tracker } = useTracker();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div mx-auto mt-50px max-w-600px>
|
||||
<h1>{{ $t('about.h1') }}</h1>
|
||||
<p text-justify>
|
||||
{{ $t('about.h1p1') }}
|
||||
<div class="about-page">
|
||||
<n-h1>About</n-h1>
|
||||
<n-p>
|
||||
This wonderful website, made with ❤ by
|
||||
<c-link href="https://github.com/CorentinTh" target="_blank" rel="noopener">
|
||||
Corentin Thomasset
|
||||
</c-link>{{ $t('about.h1p2') }}
|
||||
</p>
|
||||
<p text-justify>
|
||||
{{ $t('about.h1p3') }}
|
||||
</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>
|
||||
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
|
||||
<c-link
|
||||
href="https://www.buymeacoffee.com/cthmsst"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
@click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
|
||||
>
|
||||
{{ $t('about.h1p4') }}
|
||||
sponsoring me
|
||||
</c-link>.
|
||||
</p>
|
||||
</n-p>
|
||||
|
||||
<h2>{{ $t('about.h2') }}</h2>
|
||||
<p text-justify>
|
||||
{{ $t('about.h2p1') }}
|
||||
<n-h2>Technologies</n-h2>
|
||||
<n-p>
|
||||
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>
|
||||
{{ $t('about.h2p2') }}
|
||||
</p>
|
||||
file of the repository.
|
||||
</n-p>
|
||||
|
||||
<h2>{{ $t('about.h3') }}</h2>
|
||||
<p text-justify>
|
||||
{{ $t('about.h3p1') }}
|
||||
<n-h2>Found a bug? A tool is missing?</n-h2>
|
||||
<n-p>
|
||||
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
|
||||
href="https://github.com/CorentinTh/it-tools/issues/new/choose"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
>
|
||||
{{ $t('about.h3p2') }}
|
||||
issues section
|
||||
</c-link>
|
||||
{{ $t('about.h3p3') }}
|
||||
</p>
|
||||
<p text-justify>
|
||||
{{ $t('about.h3p4') }}
|
||||
in the GitHub repository.
|
||||
</n-p>
|
||||
<n-p>
|
||||
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"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
>
|
||||
{{ $t('about.h3p5') }}
|
||||
issues section
|
||||
</c-link>
|
||||
{{ $t('about.h3p6') }}
|
||||
</p>
|
||||
in the GitHub repository.
|
||||
</n-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>
|
||||
|
||||
@@ -1,99 +1,39 @@
|
||||
<script setup lang="ts">
|
||||
import { Heart } from '@vicons/tabler';
|
||||
import { useHead } from '@vueuse/head';
|
||||
import ColoredCard from '../components/ColoredCard.vue';
|
||||
import ToolCard from '../components/ToolCard.vue';
|
||||
import { useToolStore } from '@/tools/tools.store';
|
||||
import { config } from '@/config';
|
||||
|
||||
const toolStore = useToolStore();
|
||||
|
||||
useHead({ title: 'IT Tools - Handy online tools for developers' });
|
||||
const { t } = useI18n();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<div class="grid-wrapper">
|
||||
<n-grid v-if="config.showBanner" x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
|
||||
<n-gi>
|
||||
<ColoredCard :title="$t('home.follow.title')" :icon="Heart">
|
||||
{{ $t('home.follow.p1') }}
|
||||
<a
|
||||
href="https://github.com/CorentinTh/it-tools"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
:aria-label="$t('home.follow.githubRepository')"
|
||||
>GitHub</a>
|
||||
{{ $t('home.follow.p2') }}
|
||||
<a
|
||||
href="https://twitter.com/ittoolsdottech"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
:aria-label="$t('home.follow.twitterAccount')"
|
||||
>Twitter</a>{{ $t('home.follow.thankYou') }}
|
||||
<n-icon :component="Heart" />
|
||||
</ColoredCard>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
<div class="home-page" m-auto mt-50px max-w-1800px>
|
||||
<div my-8 />
|
||||
|
||||
<transition name="height">
|
||||
<div v-if="toolStore.favoriteTools.length > 0">
|
||||
<n-h3>{{ $t('home.categories.favoriteTools') }}</n-h3>
|
||||
<n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
|
||||
<n-gi v-for="tool in toolStore.favoriteTools" :key="tool.name">
|
||||
<ToolCard :tool="tool" />
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<div v-if="toolStore.newTools.length > 0">
|
||||
<n-h3>{{ t('home.categories.newestTools') }}</n-h3>
|
||||
<n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
|
||||
<n-gi v-for="tool in toolStore.newTools" :key="tool.name">
|
||||
<ToolCard :tool="tool" />
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
<div v-if="toolStore.favoriteTools.length > 0">
|
||||
<div mb-2 mt-6 text-lg font-semibold>
|
||||
{{ $t('home.categories.yourFavoriteTools') }}
|
||||
</div>
|
||||
<div grid-cols="1 sm:2 md:2 lg:3 xl:4" grid gap-12px>
|
||||
<tool-card v-for="tool in toolStore.favoriteTools" :key="tool.name" :tool="tool" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<n-h3>{{ $t('home.categories.allTools') }}</n-h3>
|
||||
<n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
|
||||
<n-gi v-for="tool in toolStore.tools" :key="tool.name">
|
||||
<transition>
|
||||
<ToolCard :tool="tool" />
|
||||
</transition>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
<div v-if="toolStore.newTools.length > 0">
|
||||
<div mb-2 mt-6 text-lg font-semibold>
|
||||
{{ $t('home.categories.newestTools') }}
|
||||
</div>
|
||||
<div grid-cols="1 sm:2 md:2 lg:3 xl:4" grid gap-12px>
|
||||
<tool-card v-for="tool in toolStore.newTools" :key="tool.name" :tool="tool" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div mb-2 mt-6 text-lg font-semibold>
|
||||
{{ $t('home.categories.allTheTools') }}
|
||||
</div>
|
||||
<div grid-cols="1 sm:2 md:2 lg:3 xl:4" grid gap-12px>
|
||||
<tool-card v-for="tool in toolStore.tools" :key="tool.name" :tool="tool" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.home-page {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.n-h3 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
::v-deep(.n-grid) {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.height-enter-active,
|
||||
.height-leave-active {
|
||||
transition: all 0.5s ease-in-out;
|
||||
overflow: hidden;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.height-enter-from,
|
||||
.height-leave-to {
|
||||
max-height: 42px;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -29,9 +29,3 @@ export const i18nPlugin: Plugin = {
|
||||
app.use(i18n);
|
||||
},
|
||||
};
|
||||
|
||||
export const translate = function (localeKey: string) {
|
||||
// @ts-expect-error global
|
||||
const hasKey = i18n.global.te(localeKey, i18n.global.locale);
|
||||
return hasKey ? i18n.global.t(localeKey) : localeKey;
|
||||
};
|
||||
|
||||
@@ -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,8 +131,26 @@ function copyAsBulletList() {
|
||||
</c-button>
|
||||
</div>
|
||||
|
||||
<c-table :data="results" :headers="header" />
|
||||
|
||||
<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>
|
||||
<div mt-5 flex justify-center gap-3>
|
||||
<c-button @click="copyAsMarkdown()">
|
||||
Copy as markdown table
|
||||
|
||||
@@ -39,11 +39,14 @@ function onInputEnter(index: number) {
|
||||
autofocus
|
||||
@keydown.enter="onInputEnter(index)"
|
||||
/>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<c-button @click="addValue">
|
||||
|
||||
@@ -73,13 +73,6 @@ const formats = computed(() => [
|
||||
label: 'Snakecase:',
|
||||
value: snakeCase(input.value, baseConfig),
|
||||
},
|
||||
{
|
||||
label: 'Mockingcase:',
|
||||
value: noCase(input.value, baseConfig)
|
||||
.split('')
|
||||
.map((char, index) => (index % 2 === 0 ? char.toUpperCase() : char.toLowerCase()))
|
||||
.join(''),
|
||||
},
|
||||
]);
|
||||
|
||||
const inputLabelAlignmentConfig = {
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
import { expect, test } from '@playwright/test';
|
||||
|
||||
test.describe('Tool - Color converter', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/color-converter');
|
||||
});
|
||||
|
||||
test('Has title', async ({ page }) => {
|
||||
await expect(page).toHaveTitle('Color converter - IT Tools');
|
||||
});
|
||||
|
||||
test('Color is converted from its name to other formats', async ({ page }) => {
|
||||
await page.getByTestId('input-name').fill('olive');
|
||||
|
||||
expect(await page.getByTestId('input-name').inputValue()).toEqual('olive');
|
||||
expect(await page.getByTestId('input-hex').inputValue()).toEqual('#808000');
|
||||
expect(await page.getByTestId('input-rgb').inputValue()).toEqual('rgb(128, 128, 0)');
|
||||
expect(await page.getByTestId('input-hsl').inputValue()).toEqual('hsl(60, 100%, 25%)');
|
||||
expect(await page.getByTestId('input-hwb').inputValue()).toEqual('hwb(60 0% 50%)');
|
||||
expect(await page.getByTestId('input-cmyk').inputValue()).toEqual('device-cmyk(0% 0% 100% 50%)');
|
||||
expect(await page.getByTestId('input-lch').inputValue()).toEqual('lch(52.15% 56.81 99.57)');
|
||||
});
|
||||
});
|
||||
@@ -1,13 +0,0 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { removeAlphaChannelWhenOpaque } from './color-converter.models';
|
||||
|
||||
describe('color-converter models', () => {
|
||||
describe('removeAlphaChannelWhenOpaque', () => {
|
||||
it('remove alpha channel of an hex color when it is opaque (alpha = 1)', () => {
|
||||
expect(removeAlphaChannelWhenOpaque('#000000ff')).toBe('#000000');
|
||||
expect(removeAlphaChannelWhenOpaque('#ffffffFF')).toBe('#ffffff');
|
||||
expect(removeAlphaChannelWhenOpaque('#000000FE')).toBe('#000000FE');
|
||||
expect(removeAlphaChannelWhenOpaque('#00000000')).toBe('#00000000');
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,52 +0,0 @@
|
||||
import { type Colord, colord } from 'colord';
|
||||
import { withDefaultOnError } from '@/utils/defaults';
|
||||
import { useValidation } from '@/composable/validation';
|
||||
|
||||
export { removeAlphaChannelWhenOpaque, buildColorFormat };
|
||||
|
||||
function removeAlphaChannelWhenOpaque(hexColor: string) {
|
||||
return hexColor.replace(/^(#(?:[0-9a-f]{3}){1,2})ff$/i, '$1');
|
||||
}
|
||||
|
||||
function buildColorFormat({
|
||||
label,
|
||||
parse = value => colord(value),
|
||||
format,
|
||||
placeholder,
|
||||
invalidMessage = `Invalid ${label.toLowerCase()} format.`,
|
||||
type = 'text',
|
||||
}: {
|
||||
label: string
|
||||
parse?: (value: string) => Colord
|
||||
format: (value: Colord) => string
|
||||
placeholder?: string
|
||||
invalidMessage?: string
|
||||
type?: 'text' | 'color-picker'
|
||||
}) {
|
||||
const value = ref('');
|
||||
|
||||
return {
|
||||
type,
|
||||
label,
|
||||
parse: (v: string) => withDefaultOnError(() => parse(v), undefined),
|
||||
format,
|
||||
placeholder,
|
||||
value,
|
||||
validation: useValidation({
|
||||
source: value,
|
||||
rules: [
|
||||
{
|
||||
message: invalidMessage,
|
||||
validator: v => withDefaultOnError(() => {
|
||||
if (v === '') {
|
||||
return true;
|
||||
}
|
||||
|
||||
return parse(v).isValid();
|
||||
}, false),
|
||||
},
|
||||
],
|
||||
}),
|
||||
|
||||
};
|
||||
}
|
||||
@@ -1,103 +1,87 @@
|
||||
<script setup lang="ts">
|
||||
import type { Colord } from 'colord';
|
||||
import { colord, extend } from 'colord';
|
||||
import _ from 'lodash';
|
||||
|
||||
import cmykPlugin from 'colord/plugins/cmyk';
|
||||
import hwbPlugin from 'colord/plugins/hwb';
|
||||
import namesPlugin from 'colord/plugins/names';
|
||||
import lchPlugin from 'colord/plugins/lch';
|
||||
import { buildColorFormat } from './color-converter.models';
|
||||
import InputCopyable from '../../components/InputCopyable.vue';
|
||||
|
||||
extend([cmykPlugin, hwbPlugin, namesPlugin, lchPlugin]);
|
||||
|
||||
const formats = {
|
||||
picker: buildColorFormat({
|
||||
label: 'color picker',
|
||||
format: (v: Colord) => v.toHex(),
|
||||
type: 'color-picker',
|
||||
}),
|
||||
hex: buildColorFormat({
|
||||
label: 'hex',
|
||||
format: (v: Colord) => v.toHex(),
|
||||
placeholder: 'e.g. #ff0000',
|
||||
}),
|
||||
rgb: buildColorFormat({
|
||||
label: 'rgb',
|
||||
format: (v: Colord) => v.toRgbString(),
|
||||
placeholder: 'e.g. rgb(255, 0, 0)',
|
||||
}),
|
||||
hsl: buildColorFormat({
|
||||
label: 'hsl',
|
||||
format: (v: Colord) => v.toHslString(),
|
||||
placeholder: 'e.g. hsl(0, 100%, 50%)',
|
||||
}),
|
||||
hwb: buildColorFormat({
|
||||
label: 'hwb',
|
||||
format: (v: Colord) => v.toHwbString(),
|
||||
placeholder: 'e.g. hwb(0, 0%, 0%)',
|
||||
}),
|
||||
lch: buildColorFormat({
|
||||
label: 'lch',
|
||||
format: (v: Colord) => v.toLchString(),
|
||||
placeholder: 'e.g. lch(53.24, 104.55, 40.85)',
|
||||
}),
|
||||
cmyk: buildColorFormat({
|
||||
label: 'cmyk',
|
||||
format: (v: Colord) => v.toCmykString(),
|
||||
placeholder: 'e.g. cmyk(0, 100%, 100%, 0)',
|
||||
}),
|
||||
name: buildColorFormat({
|
||||
label: 'name',
|
||||
format: (v: Colord) => v.toName({ closest: true }) ?? 'Unknown',
|
||||
placeholder: 'e.g. red',
|
||||
}),
|
||||
};
|
||||
const name = ref('');
|
||||
const hex = ref('#1ea54cff');
|
||||
const rgb = ref('');
|
||||
const hsl = ref('');
|
||||
const hwb = ref('');
|
||||
const cmyk = ref('');
|
||||
const lch = ref('');
|
||||
|
||||
updateColorValue(colord('#1ea54c'));
|
||||
function onInputUpdated(value: string, omit: string) {
|
||||
try {
|
||||
const color = colord(value);
|
||||
|
||||
function updateColorValue(value: Colord | undefined, omitLabel?: string) {
|
||||
if (value === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!value.isValid()) {
|
||||
return;
|
||||
}
|
||||
|
||||
_.forEach(formats, ({ value: valueRef, format }, key) => {
|
||||
if (key !== omitLabel) {
|
||||
valueRef.value = format(value);
|
||||
if (omit !== 'name') {
|
||||
name.value = color.toName({ closest: true }) ?? '';
|
||||
}
|
||||
});
|
||||
if (omit !== 'hex') {
|
||||
hex.value = color.toHex();
|
||||
}
|
||||
if (omit !== 'rgb') {
|
||||
rgb.value = color.toRgbString();
|
||||
}
|
||||
if (omit !== 'hsl') {
|
||||
hsl.value = color.toHslString();
|
||||
}
|
||||
if (omit !== 'hwb') {
|
||||
hwb.value = color.toHwbString();
|
||||
}
|
||||
if (omit !== 'cmyk') {
|
||||
cmyk.value = color.toCmykString();
|
||||
}
|
||||
if (omit !== 'lch') {
|
||||
lch.value = color.toLchString();
|
||||
}
|
||||
}
|
||||
catch {
|
||||
//
|
||||
}
|
||||
}
|
||||
|
||||
onInputUpdated(hex.value, 'hex');
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<c-card>
|
||||
<template v-for="({ label, parse, placeholder, validation, type }, key) in formats" :key="key">
|
||||
<input-copyable
|
||||
v-if="type === 'text'"
|
||||
v-model:value="formats[key].value.value"
|
||||
:test-id="`input-${key}`"
|
||||
:label="`${label}:`"
|
||||
label-position="left"
|
||||
label-width="100px"
|
||||
label-align="right"
|
||||
:placeholder="placeholder"
|
||||
:validation="validation"
|
||||
raw-text
|
||||
clearable
|
||||
mt-2
|
||||
@update:value="(v:string) => updateColorValue(parse(v), key)"
|
||||
/>
|
||||
|
||||
<n-form-item v-else-if="type === 'color-picker'" :label="`${label}:`" label-width="100" label-placement="left" :show-feedback="false">
|
||||
<n-form label-width="100" label-placement="left">
|
||||
<n-form-item label="color picker:">
|
||||
<n-color-picker
|
||||
v-model:value="formats[key].value.value"
|
||||
v-model:value="hex"
|
||||
placement="bottom-end"
|
||||
@update:value="(v:string) => updateColorValue(parse(v), key)"
|
||||
@update:value="(v: string) => onInputUpdated(v, 'hex')"
|
||||
/>
|
||||
</n-form-item>
|
||||
</template>
|
||||
<n-form-item label="color name:">
|
||||
<InputCopyable v-model:value="name" @update:value="(v: string) => onInputUpdated(v, 'name')" />
|
||||
</n-form-item>
|
||||
<n-form-item label="hex:">
|
||||
<InputCopyable v-model:value="hex" @update:value="(v: string) => onInputUpdated(v, 'hex')" />
|
||||
</n-form-item>
|
||||
<n-form-item label="rgb:">
|
||||
<InputCopyable v-model:value="rgb" @update:value="(v: string) => onInputUpdated(v, 'rgb')" />
|
||||
</n-form-item>
|
||||
<n-form-item label="hsl:">
|
||||
<InputCopyable v-model:value="hsl" @update:value="(v: string) => onInputUpdated(v, 'hsl')" />
|
||||
</n-form-item>
|
||||
<n-form-item label="hwb:">
|
||||
<InputCopyable v-model:value="hwb" @update:value="(v: string) => onInputUpdated(v, 'hwb')" />
|
||||
</n-form-item>
|
||||
<n-form-item label="lch:">
|
||||
<InputCopyable v-model:value="lch" @update:value="(v: string) => onInputUpdated(v, 'lch')" />
|
||||
</n-form-item>
|
||||
<n-form-item label="cmyk:">
|
||||
<InputCopyable v-model:value="cmyk" @update:value="(v: string) => onInputUpdated(v, 'cmyk')" />
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</c-card>
|
||||
</template>
|
||||
|
||||
@@ -167,8 +167,34 @@ const cronValidationRules = [
|
||||
</div>
|
||||
</c-card>
|
||||
</div>
|
||||
|
||||
<c-table v-else :data="helpers" />
|
||||
<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-card>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -29,6 +29,5 @@ test.describe('Date time converter - json to yaml', () => {
|
||||
expect((await page.getByTestId('Timestamp').inputValue()).trim()).toEqual('1681333824000');
|
||||
expect((await page.getByTestId('UTC format').inputValue()).trim()).toEqual('Wed, 12 Apr 2023 21:10:24 GMT');
|
||||
expect((await page.getByTestId('Mongo ObjectID').inputValue()).trim()).toEqual('64371e400000000000000000');
|
||||
expect((await page.getByTestId('Excel date/time').inputValue()).trim()).toEqual('45028.88222222222');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,8 +1,5 @@
|
||||
import { describe, expect, test } from 'vitest';
|
||||
import {
|
||||
dateToExcelFormat,
|
||||
excelFormatToDate,
|
||||
isExcelFormat,
|
||||
isISO8601DateTimeString,
|
||||
isISO9075DateString,
|
||||
isMongoObjectId,
|
||||
@@ -142,39 +139,4 @@ describe('date-time-converter models', () => {
|
||||
expect(isMongoObjectId('')).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('isExcelFormat', () => {
|
||||
test('an Excel format string is a floating number that can be negative', () => {
|
||||
expect(isExcelFormat('0')).toBe(true);
|
||||
expect(isExcelFormat('1')).toBe(true);
|
||||
expect(isExcelFormat('1.1')).toBe(true);
|
||||
expect(isExcelFormat('-1.1')).toBe(true);
|
||||
expect(isExcelFormat('-1')).toBe(true);
|
||||
|
||||
expect(isExcelFormat('')).toBe(false);
|
||||
expect(isExcelFormat('foo')).toBe(false);
|
||||
expect(isExcelFormat('1.1.1')).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('dateToExcelFormat', () => {
|
||||
test('a date in Excel format is the number of days since 01/01/1900', () => {
|
||||
expect(dateToExcelFormat(new Date('2016-05-20T00:00:00.000Z'))).toBe('42510');
|
||||
expect(dateToExcelFormat(new Date('2016-05-20T12:00:00.000Z'))).toBe('42510.5');
|
||||
expect(dateToExcelFormat(new Date('2023-10-31T09:26:06.421Z'))).toBe('45230.39312987268');
|
||||
expect(dateToExcelFormat(new Date('1970-01-01T00:00:00.000Z'))).toBe('25569');
|
||||
expect(dateToExcelFormat(new Date('1800-01-01T00:00:00.000Z'))).toBe('-36522');
|
||||
});
|
||||
});
|
||||
|
||||
describe('excelFormatToDate', () => {
|
||||
test('a date in Excel format is the number of days since 01/01/1900', () => {
|
||||
expect(excelFormatToDate('0')).toEqual(new Date('1899-12-30T00:00:00.000Z'));
|
||||
expect(excelFormatToDate('1')).toEqual(new Date('1899-12-31T00:00:00.000Z'));
|
||||
expect(excelFormatToDate('2')).toEqual(new Date('1900-01-01T00:00:00.000Z'));
|
||||
expect(excelFormatToDate('4242.4242')).toEqual(new Date('1911-08-12T10:10:50.880Z'));
|
||||
expect(excelFormatToDate('42738.22626859954')).toEqual(new Date('2017-01-03T05:25:49.607Z'));
|
||||
expect(excelFormatToDate('-1000')).toEqual(new Date('1897-04-04T00:00:00.000Z'));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -9,9 +9,6 @@ export {
|
||||
isTimestamp,
|
||||
isUTCDateString,
|
||||
isMongoObjectId,
|
||||
dateToExcelFormat,
|
||||
excelFormatToDate,
|
||||
isExcelFormat,
|
||||
};
|
||||
|
||||
const ISO8601_REGEX
|
||||
@@ -24,8 +21,6 @@ const RFC3339_REGEX
|
||||
|
||||
const RFC7231_REGEX = /^[A-Za-z]{3},\s[0-9]{2}\s[A-Za-z]{3}\s[0-9]{4}\s[0-9]{2}:[0-9]{2}:[0-9]{2}\sGMT$/;
|
||||
|
||||
const EXCEL_FORMAT_REGEX = /^-?\d+(\.\d+)?$/;
|
||||
|
||||
function createRegexMatcher(regex: RegExp) {
|
||||
return (date?: string) => !_.isNil(date) && regex.test(date);
|
||||
}
|
||||
@@ -38,8 +33,6 @@ const isUnixTimestamp = createRegexMatcher(/^[0-9]{1,10}$/);
|
||||
const isTimestamp = createRegexMatcher(/^[0-9]{1,13}$/);
|
||||
const isMongoObjectId = createRegexMatcher(/^[0-9a-fA-F]{24}$/);
|
||||
|
||||
const isExcelFormat = createRegexMatcher(EXCEL_FORMAT_REGEX);
|
||||
|
||||
function isUTCDateString(date?: string) {
|
||||
if (_.isNil(date)) {
|
||||
return false;
|
||||
@@ -52,11 +45,3 @@ function isUTCDateString(date?: string) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function dateToExcelFormat(date: Date) {
|
||||
return String(((date.getTime()) / (1000 * 60 * 60 * 24)) + 25569);
|
||||
}
|
||||
|
||||
function excelFormatToDate(excelFormat: string | number) {
|
||||
return new Date((Number(excelFormat) - 25569) * 86400 * 1000);
|
||||
}
|
||||
|
||||
@@ -14,9 +14,6 @@ import {
|
||||
} from 'date-fns';
|
||||
import type { DateFormat, ToDateMapper } from './date-time-converter.types';
|
||||
import {
|
||||
dateToExcelFormat,
|
||||
excelFormatToDate,
|
||||
isExcelFormat,
|
||||
isISO8601DateTimeString,
|
||||
isISO9075DateString,
|
||||
isMongoObjectId,
|
||||
@@ -88,12 +85,6 @@ const formats: DateFormat[] = [
|
||||
toDate: objectId => new Date(Number.parseInt(objectId.substring(0, 8), 16) * 1000),
|
||||
formatMatcher: date => isMongoObjectId(date),
|
||||
},
|
||||
{
|
||||
name: 'Excel date/time',
|
||||
fromDate: date => dateToExcelFormat(date),
|
||||
toDate: excelFormatToDate,
|
||||
formatMatcher: isExcelFormat,
|
||||
},
|
||||
];
|
||||
|
||||
const formatIndex = ref(6);
|
||||
|
||||
@@ -6,9 +6,13 @@ const { icon, title, action, isActive } = toRefs(props);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<c-tooltip :tooltip="title">
|
||||
<c-button circle variant="text" :type="isActive?.() ? 'primary' : 'default'" @click="action">
|
||||
<n-icon :component="icon" />
|
||||
</c-button>
|
||||
</c-tooltip>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
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';
|
||||
import { tool as textDiff } from './text-diff';
|
||||
@@ -77,7 +74,7 @@ import { tool as xmlFormatter } from './xml-formatter';
|
||||
export const toolsByCategory: ToolCategory[] = [
|
||||
{
|
||||
name: 'Crypto',
|
||||
components: [tokenGenerator, hashText, bcrypt, uuidGenerator, ulidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator, passwordStrengthAnalyser],
|
||||
components: [tokenGenerator, hashText, bcrypt, uuidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator, passwordStrengthAnalyser],
|
||||
},
|
||||
{
|
||||
name: 'Converter',
|
||||
@@ -90,7 +87,6 @@ export const toolsByCategory: ToolCategory[] = [
|
||||
colorConverter,
|
||||
caseConverter,
|
||||
textToNatoAlphabet,
|
||||
textToBinary,
|
||||
yamlToJson,
|
||||
yamlToToml,
|
||||
jsonToYaml,
|
||||
@@ -141,7 +137,7 @@ export const toolsByCategory: ToolCategory[] = [
|
||||
},
|
||||
{
|
||||
name: 'Network',
|
||||
components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, macAddressGenerator, ipv6UlaGenerator],
|
||||
components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, ipv6UlaGenerator],
|
||||
},
|
||||
{
|
||||
name: 'Math',
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
import { Devices } from '@vicons/tabler';
|
||||
import { defineTool } from '../tool';
|
||||
|
||||
export const tool = defineTool({
|
||||
name: 'MAC address generator',
|
||||
path: '/mac-address-generator',
|
||||
description: 'Enter the quantity and prefix. MAC addresses will be generated in your chosen case (uppercase or lowercase)',
|
||||
keywords: ['mac', 'address', 'generator', 'random', 'prefix'],
|
||||
component: () => import('./mac-address-generator.vue'),
|
||||
icon: Devices,
|
||||
createdAt: new Date('2023-11-31'),
|
||||
});
|
||||
@@ -1,11 +0,0 @@
|
||||
import { expect, test } from '@playwright/test';
|
||||
|
||||
test.describe('Tool - MAC address generator', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/mac-address-generator');
|
||||
});
|
||||
|
||||
test('Has correct title', async ({ page }) => {
|
||||
await expect(page).toHaveTitle('MAC address generator - IT Tools');
|
||||
});
|
||||
});
|
||||
@@ -1,103 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import _ from 'lodash';
|
||||
import { generateRandomMacAddress } from './mac-adress-generator.models';
|
||||
import { computedRefreshable } from '@/composable/computedRefreshable';
|
||||
import { useCopy } from '@/composable/copy';
|
||||
import { usePartialMacAddressValidation } from '@/utils/macAddress';
|
||||
|
||||
const amount = useStorage('mac-address-generator-amount', 1);
|
||||
const macAddressPrefix = useStorage('mac-address-generator-prefix', '64:16:7F');
|
||||
|
||||
const prefixValidation = usePartialMacAddressValidation(macAddressPrefix);
|
||||
|
||||
const casesTransformers = [
|
||||
{ label: 'Uppercase', value: (value: string) => value.toUpperCase() },
|
||||
{ label: 'Lowercase', value: (value: string) => value.toLowerCase() },
|
||||
];
|
||||
const caseTransformer = ref(casesTransformers[0].value);
|
||||
|
||||
const separators = [
|
||||
{
|
||||
label: ':',
|
||||
value: ':',
|
||||
},
|
||||
{
|
||||
label: '-',
|
||||
value: '-',
|
||||
},
|
||||
{
|
||||
label: '.',
|
||||
value: '.',
|
||||
},
|
||||
{
|
||||
label: 'None',
|
||||
value: '',
|
||||
},
|
||||
];
|
||||
const separator = useStorage('mac-address-generator-separator', separators[0].value);
|
||||
|
||||
const [macAddresses, refreshMacAddresses] = computedRefreshable(() => {
|
||||
if (!prefixValidation.isValid) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const ids = _.times(amount.value, () => caseTransformer.value(generateRandomMacAddress({
|
||||
prefix: macAddressPrefix.value,
|
||||
separator: separator.value,
|
||||
})));
|
||||
return ids.join('\n');
|
||||
});
|
||||
|
||||
const { copy } = useCopy({ source: macAddresses, text: 'MAC addresses copied to the clipboard' });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex flex-col justify-center gap-2>
|
||||
<div flex items-center>
|
||||
<label w-150px pr-12px text-right> Quantity:</label>
|
||||
<n-input-number v-model:value="amount" min="1" max="100" flex-1 />
|
||||
</div>
|
||||
|
||||
<c-input-text
|
||||
v-model:value="macAddressPrefix"
|
||||
label="MAC address prefix:"
|
||||
placeholder="Set a prefix, e.g. 64:16:7F"
|
||||
clearable
|
||||
label-position="left"
|
||||
spellcheck="false"
|
||||
:validation="prefixValidation"
|
||||
raw-text
|
||||
label-width="150px"
|
||||
label-align="right"
|
||||
/>
|
||||
|
||||
<c-buttons-select
|
||||
v-model:value="caseTransformer"
|
||||
:options="casesTransformers"
|
||||
label="Case:"
|
||||
label-width="150px"
|
||||
label-align="right"
|
||||
/>
|
||||
|
||||
<c-buttons-select
|
||||
v-model:value="separator"
|
||||
:options="separators"
|
||||
label="Separator:"
|
||||
label-width="150px"
|
||||
label-align="right"
|
||||
/>
|
||||
|
||||
<c-card mt-5 flex data-test-id="ulids">
|
||||
<pre m-0 m-x-auto>{{ macAddresses }}</pre>
|
||||
</c-card>
|
||||
|
||||
<div flex justify-center gap-2>
|
||||
<c-button data-test-id="refresh" @click="refreshMacAddresses()">
|
||||
Refresh
|
||||
</c-button>
|
||||
<c-button @click="copy()">
|
||||
Copy
|
||||
</c-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,43 +0,0 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { generateRandomMacAddress, splitPrefix } from './mac-adress-generator.models';
|
||||
|
||||
describe('mac-adress-generator models', () => {
|
||||
describe('splitPrefix', () => {
|
||||
it('a mac address prefix is splitted around non hex characters', () => {
|
||||
expect(splitPrefix('')).toEqual([]);
|
||||
expect(splitPrefix('01')).toEqual(['01']);
|
||||
expect(splitPrefix('01:')).toEqual(['01']);
|
||||
expect(splitPrefix('01:23')).toEqual(['01', '23']);
|
||||
expect(splitPrefix('01-23')).toEqual(['01', '23']);
|
||||
});
|
||||
|
||||
it('when a prefix contains only hex characters, they are grouped by 2', () => {
|
||||
expect(splitPrefix('0123')).toEqual(['01', '23']);
|
||||
expect(splitPrefix('012345')).toEqual(['01', '23', '45']);
|
||||
expect(splitPrefix('0123456')).toEqual(['01', '23', '45', '06']);
|
||||
});
|
||||
});
|
||||
|
||||
describe('generateRandomMacAddress', () => {
|
||||
const createRandomByteGenerator = () => {
|
||||
let i = 0;
|
||||
return () => (i++).toString(16).padStart(2, '0');
|
||||
};
|
||||
|
||||
it('generates a random mac address', () => {
|
||||
expect(generateRandomMacAddress({ getRandomByte: createRandomByteGenerator() })).toBe('00:01:02:03:04:05');
|
||||
});
|
||||
|
||||
it('generates a random mac address with a prefix', () => {
|
||||
expect(generateRandomMacAddress({ prefix: 'ff:ee:aa', getRandomByte: createRandomByteGenerator() })).toBe('ff:ee:aa:00:01:02');
|
||||
expect(generateRandomMacAddress({ prefix: 'ff:ee:a', getRandomByte: createRandomByteGenerator() })).toBe('ff:ee:0a:00:01:02');
|
||||
});
|
||||
|
||||
it('generates a random mac address with a prefix and a different separator', () => {
|
||||
expect(generateRandomMacAddress({ prefix: 'ff-ee-aa', separator: '-', getRandomByte: createRandomByteGenerator() })).toBe('ff-ee-aa-00-01-02');
|
||||
expect(generateRandomMacAddress({ prefix: 'ff:ee:aa', separator: '-', getRandomByte: createRandomByteGenerator() })).toBe('ff-ee-aa-00-01-02');
|
||||
expect(generateRandomMacAddress({ prefix: 'ff-ee:aa', separator: '-', getRandomByte: createRandomByteGenerator() })).toBe('ff-ee-aa-00-01-02');
|
||||
expect(generateRandomMacAddress({ prefix: 'ff ee:aa', separator: '-', getRandomByte: createRandomByteGenerator() })).toBe('ff-ee-aa-00-01-02');
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,18 +0,0 @@
|
||||
import _ from 'lodash';
|
||||
|
||||
export { splitPrefix, generateRandomMacAddress };
|
||||
|
||||
function splitPrefix(prefix: string): string[] {
|
||||
const base = prefix.match(/[^0-9a-f]/i) === null ? prefix.match(/.{1,2}/g) ?? [] : prefix.split(/[^0-9a-f]/i);
|
||||
|
||||
return base.filter(Boolean).map(byte => byte.padStart(2, '0'));
|
||||
}
|
||||
|
||||
function generateRandomMacAddress({ prefix: rawPrefix = '', separator = ':', getRandomByte = () => _.random(0, 255).toString(16).padStart(2, '0') }: { prefix?: string; separator?: string; getRandomByte?: () => string } = {}) {
|
||||
const prefix = splitPrefix(rawPrefix);
|
||||
|
||||
const randomBytes = _.times(6 - prefix.length, getRandomByte);
|
||||
const bytes = [...prefix, ...randomBytes];
|
||||
|
||||
return bytes.join(separator);
|
||||
}
|
||||
@@ -61,16 +61,19 @@ const secretValidationRules = [
|
||||
:validation-rules="secretValidationRules"
|
||||
>
|
||||
<template #suffix>
|
||||
<c-tooltip tooltip="Generate a new random secret">
|
||||
<c-button circle variant="text" size="small" @click="refreshSecret">
|
||||
<icon-mdi-refresh />
|
||||
</c-button>
|
||||
</c-tooltip>
|
||||
<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>
|
||||
</template>
|
||||
</c-input-text>
|
||||
|
||||
<div>
|
||||
<TokenDisplay :tokens="tokens" />
|
||||
<TokenDisplay :tokens="tokens" style="margin-top: 2px" />
|
||||
|
||||
<n-progress :percentage="(100 * interval) / 30" :color="theme.primaryColor" :show-indicator="false" />
|
||||
<div style="text-align: center">
|
||||
|
||||
@@ -11,7 +11,7 @@ const { tokens } = toRefs(props);
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div mb-5px w-full flex items-center>
|
||||
<div class="labels" w-full flex items-center>
|
||||
<div flex-1 text-left>
|
||||
Previous
|
||||
</div>
|
||||
@@ -22,24 +22,60 @@ const { tokens } = toRefs(props);
|
||||
Next
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
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'),
|
||||
});
|
||||
@@ -1,25 +0,0 @@
|
||||
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');
|
||||
});
|
||||
});
|
||||
@@ -1,32 +0,0 @@
|
||||
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');
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,22 +0,0 @@
|
||||
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('');
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
<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>
|
||||
@@ -1,11 +1,11 @@
|
||||
import { ArrowsShuffle } from '@vicons/tabler';
|
||||
import { defineTool } from '../tool';
|
||||
import { translate } from '@/plugins/i18n.plugin';
|
||||
|
||||
export const tool = defineTool({
|
||||
name: translate('tools.token-generator.title'),
|
||||
name: 'Token generator',
|
||||
path: '/token-generator',
|
||||
description: translate('tools.token-generator.description'),
|
||||
description:
|
||||
'Generate random string with the chars you want: uppercase or lowercase letters, numbers and/or symbols.',
|
||||
keywords: ['token', 'random', 'string', 'alphanumeric', 'symbols', 'number', 'letters', 'lowercase', 'uppercase'],
|
||||
component: () => import('./token-generator.tool.vue'),
|
||||
icon: ArrowsShuffle,
|
||||
|
||||
@@ -6,10 +6,4 @@ tools:
|
||||
uppercase: Uppercase (ABC...)
|
||||
lowercase: Lowercase (abc...)
|
||||
numbers: Numbers (123...)
|
||||
symbols: Symbols (!-;...)
|
||||
length: Length
|
||||
tokenPlaceholder: 'The token...'
|
||||
copied: Token copied to the clipboard
|
||||
button:
|
||||
copy: Copy
|
||||
refresh: Refresh
|
||||
symbols: Symbols (!-;...)
|
||||
@@ -21,7 +21,7 @@ const [token, refreshToken] = computedRefreshable(() =>
|
||||
}),
|
||||
);
|
||||
|
||||
const { copy } = useCopy({ source: token, text: t('tools.token-generator.copied') });
|
||||
const { copy } = useCopy({ source: token, text: 'Token copied to the clipboard' });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -51,14 +51,14 @@ const { copy } = useCopy({ source: token, text: t('tools.token-generator.copied'
|
||||
</div>
|
||||
</n-form>
|
||||
|
||||
<n-form-item :label="`${t('tools.token-generator.length')} (${length})`" label-placement="left">
|
||||
<n-form-item :label="`Length (${length})`" label-placement="left">
|
||||
<n-slider v-model:value="length" :step="1" :min="1" :max="512" />
|
||||
</n-form-item>
|
||||
|
||||
<c-input-text
|
||||
v-model:value="token"
|
||||
multiline
|
||||
:placeholder="t('tools.token-generator.tokenPlaceholder')"
|
||||
placeholder="The token..."
|
||||
readonly
|
||||
rows="3"
|
||||
autosize
|
||||
@@ -67,10 +67,10 @@ const { copy } = useCopy({ source: token, text: t('tools.token-generator.copied'
|
||||
|
||||
<div mt-5 flex justify-center gap-3>
|
||||
<c-button @click="copy()">
|
||||
{{ t('tools.token-generator.button.copy') }}
|
||||
Copy
|
||||
</c-button>
|
||||
<c-button @click="refreshToken">
|
||||
{{ t('tools.token-generator.button.refresh') }}
|
||||
Refresh
|
||||
</c-button>
|
||||
</div>
|
||||
</c-card>
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
import { SortDescendingNumbers } from '@vicons/tabler';
|
||||
import { defineTool } from '../tool';
|
||||
|
||||
export const tool = defineTool({
|
||||
name: 'ULID generator',
|
||||
path: '/ulid-generator',
|
||||
description: 'Generate random Universally Unique Lexicographically Sortable Identifier (ULID).',
|
||||
keywords: ['ulid', 'generator', 'random', 'id', 'alphanumeric', 'identity', 'token', 'string', 'identifier', 'unique'],
|
||||
component: () => import('./ulid-generator.vue'),
|
||||
icon: SortDescendingNumbers,
|
||||
createdAt: new Date('2023-09-11'),
|
||||
});
|
||||
@@ -1,23 +0,0 @@
|
||||
import { expect, test } from '@playwright/test';
|
||||
|
||||
const ULID_REGEX = /[0-9A-Z]{26}/;
|
||||
|
||||
test.describe('Tool - ULID generator', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/ulid-generator');
|
||||
});
|
||||
|
||||
test('Has correct title', async ({ page }) => {
|
||||
await expect(page).toHaveTitle('ULID generator - IT Tools');
|
||||
});
|
||||
|
||||
test('the refresh button generates a new ulid', async ({ page }) => {
|
||||
const ulid = await page.getByTestId('ulids').textContent();
|
||||
expect(ulid?.trim()).toMatch(ULID_REGEX);
|
||||
|
||||
await page.getByTestId('refresh').click();
|
||||
const newUlid = await page.getByTestId('ulids').textContent();
|
||||
expect(ulid?.trim()).not.toBe(newUlid?.trim());
|
||||
expect(newUlid?.trim()).toMatch(ULID_REGEX);
|
||||
});
|
||||
});
|
||||
@@ -1,46 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ulid } from 'ulid';
|
||||
import _ from 'lodash';
|
||||
import { computedRefreshable } from '@/composable/computedRefreshable';
|
||||
import { useCopy } from '@/composable/copy';
|
||||
|
||||
const amount = useStorage('ulid-generator-amount', 1);
|
||||
const formats = [{ label: 'Raw', value: 'raw' }, { label: 'JSON', value: 'json' }] as const;
|
||||
const format = useStorage<typeof formats[number]['value']>('ulid-generator-format', formats[0].value);
|
||||
|
||||
const [ulids, refreshUlids] = computedRefreshable(() => {
|
||||
const ids = _.times(amount.value, () => ulid());
|
||||
|
||||
if (format.value === 'json') {
|
||||
return JSON.stringify(ids, null, 2);
|
||||
}
|
||||
|
||||
return ids.join('\n');
|
||||
});
|
||||
|
||||
const { copy } = useCopy({ source: ulids, text: 'ULIDs copied to the clipboard' });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex flex-col justify-center gap-2>
|
||||
<div flex items-center>
|
||||
<label w-75px> Quantity:</label>
|
||||
<n-input-number v-model:value="amount" min="1" max="100" flex-1 />
|
||||
</div>
|
||||
|
||||
<c-buttons-select v-model:value="format" :options="formats" label="Format: " label-width="75px" />
|
||||
|
||||
<c-card mt-5 flex data-test-id="ulids">
|
||||
<pre m-0 m-x-auto>{{ ulids }}</pre>
|
||||
</c-card>
|
||||
|
||||
<div flex justify-center gap-2>
|
||||
<c-button data-test-id="refresh" @click="refreshUlids()">
|
||||
Refresh
|
||||
</c-button>
|
||||
<c-button @click="copy()">
|
||||
Copy
|
||||
</c-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -14,18 +14,25 @@ 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>
|
||||
<div flex items-center gap-3>
|
||||
<n-icon size="30" :component="icon" :depth="3" />
|
||||
<span text-lg>{{ heading }}</span>
|
||||
</div>
|
||||
<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 mt-5 flex gap-2>
|
||||
<span v-for="{ label, getValue } in content" :key="label">
|
||||
<c-tooltip v-if="getValue(userAgentInfo)" :tooltip="label">
|
||||
<n-tag type="success" size="large" round :bordered="false">
|
||||
{{ getValue(userAgentInfo) }}
|
||||
</n-tag>
|
||||
</c-tooltip>
|
||||
<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>
|
||||
</span>
|
||||
</div>
|
||||
<div flex flex-col>
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const optionsA = [
|
||||
{ label: 'Option A', value: 'a' },
|
||||
{ label: 'Option B', value: 'b', tooltip: 'This is a tooltip' },
|
||||
{ label: 'Option C', value: 'c' },
|
||||
];
|
||||
const valueA = ref('a');
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<c-buttons-select v-model:value="valueA" :options="optionsA" label="Label: " />
|
||||
<c-buttons-select v-model:value="valueA" :options="optionsA" label="Label: " label-position="left" mt-2 />
|
||||
<c-buttons-select v-model:value="valueA" :options="optionsA" label="Label: " label-position="left" mt-2 />
|
||||
</template>
|
||||
@@ -1,5 +0,0 @@
|
||||
import type { CSelectOption } from '../c-select/c-select.types';
|
||||
|
||||
export type CButtonSelectOption<T> = CSelectOption<T> & {
|
||||
tooltip?: string
|
||||
};
|
||||
@@ -1,59 +0,0 @@
|
||||
<script setup lang="ts" generic="T extends unknown">
|
||||
import type { CLabelProps } from '../c-label/c-label.types';
|
||||
import type { CButtonSelectOption } from './c-buttons-select.types';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
options?: CButtonSelectOption<T>[] | string[]
|
||||
value?: T
|
||||
size?: 'small' | 'medium' | 'large'
|
||||
} & CLabelProps >(),
|
||||
{
|
||||
options: () => [],
|
||||
value: undefined,
|
||||
labelPosition: 'left',
|
||||
size: 'medium',
|
||||
},
|
||||
);
|
||||
|
||||
const emits = defineEmits(['update:value']);
|
||||
|
||||
const { options: rawOptions, size } = toRefs(props);
|
||||
|
||||
const options = computed(() => {
|
||||
return rawOptions.value.map((option: string | CButtonSelectOption<T>) => {
|
||||
if (typeof option === 'string') {
|
||||
return { label: option, value: option };
|
||||
}
|
||||
|
||||
return option;
|
||||
});
|
||||
});
|
||||
|
||||
const value = useVModel(props, 'value', emits);
|
||||
|
||||
function selectOption(option: CButtonSelectOption<T>) {
|
||||
// @ts-expect-error vue template generic is a bit flacky thanks to withDefaults
|
||||
value.value = option.value;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<c-label v-bind="props">
|
||||
<div class="flex gap-2">
|
||||
<c-tooltip
|
||||
v-for="option in options" :key="option.value"
|
||||
:tooltip="option.tooltip"
|
||||
>
|
||||
<c-button
|
||||
:test-id="option.value"
|
||||
:size="size"
|
||||
:type="option.value === value ? 'primary' : 'default'"
|
||||
@click="selectOption(option)"
|
||||
>
|
||||
{{ option.label }}
|
||||
</c-button>
|
||||
</c-tooltip>
|
||||
</div>
|
||||
</c-label>
|
||||
</template>
|
||||
@@ -1,20 +0,0 @@
|
||||
<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>
|
||||
@@ -1,4 +0,0 @@
|
||||
export type HeaderConfiguration = (string | {
|
||||
key: string
|
||||
label?: string
|
||||
})[] | Record<string, string>;
|
||||
@@ -1,65 +0,0 @@
|
||||
<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>
|
||||
@@ -1,7 +1,3 @@
|
||||
<script lang="ts" setup>
|
||||
const positions = ['top', 'bottom', 'left', 'right'] as const;
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<c-tooltip>
|
||||
@@ -18,18 +14,4 @@ const positions = ['top', 'bottom', 'left', 'right'] as const;
|
||||
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>
|
||||
|
||||
@@ -1,30 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
const props = withDefaults(defineProps<{ tooltip?: string; position?: 'top' | 'bottom' | 'left' | 'right' }>(), {
|
||||
tooltip: undefined,
|
||||
position: 'top',
|
||||
});
|
||||
const { tooltip, position } = toRefs(props);
|
||||
const props = withDefaults(defineProps<{ tooltip?: string }>(), { tooltip: '' });
|
||||
const { tooltip } = toRefs(props);
|
||||
|
||||
const targetRef = ref();
|
||||
const isTargetHovered = useElementHover(targetRef);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div relative inline-block>
|
||||
<div class="relative" inline-block>
|
||||
<div ref="targetRef">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="tooltip || $slots.tooltip"
|
||||
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="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="{
|
||||
'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
|
||||
|
||||
@@ -4,8 +4,10 @@ import { demoRoutes } from './demo.routes';
|
||||
|
||||
<template>
|
||||
<div grid grid-cols-5 gap-2>
|
||||
<c-button v-for="{ name } of demoRoutes" :key="name" :to="{ name }">
|
||||
{{ name }}
|
||||
</c-button>
|
||||
<c-card v-for="{ name } of demoRoutes" :key="name" :title="String(name)">
|
||||
<c-button :to="{ name }">
|
||||
{{ name }}
|
||||
</c-button>
|
||||
</c-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -12,7 +12,7 @@ const componentName = computed(() => _.startCase(String(route.name).replace(/^c-
|
||||
<h1>c-lib components</h1>
|
||||
|
||||
<div flex>
|
||||
<div w-200px b-r b-gray b-op-10 b-r-solid pr-4>
|
||||
<div w-30 b-r b-gray b-op-10 b-r-solid pr-4>
|
||||
<c-button
|
||||
v-for="{ name } of demoRoutes"
|
||||
:key="name"
|
||||
@@ -20,7 +20,6 @@ const componentName = computed(() => _.startCase(String(route.name).replace(/^c-
|
||||
:to="{ name }"
|
||||
w-full
|
||||
important:justify-start
|
||||
important:text-left
|
||||
:type="route.name === name ? 'primary' : 'default'"
|
||||
>
|
||||
{{ name }}
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
import type { RouteRecordRaw } from 'vue-router';
|
||||
import DemoHome from './demo-home.page.vue';
|
||||
|
||||
const demoPages = import.meta.glob('../*/*.demo.vue', { eager: true });
|
||||
const demoPages = import.meta.glob('../*/*.demo.vue');
|
||||
|
||||
export const demoRoutes = Object.keys(demoPages).map((demoComponentPath) => {
|
||||
const [, , fileName] = demoComponentPath.split('/');
|
||||
const demoComponentName = fileName.split('.').shift();
|
||||
export const demoRoutes = Object.keys(demoPages).map((path) => {
|
||||
const [, , fileName] = path.split('/');
|
||||
const name = fileName.split('.').shift();
|
||||
|
||||
return {
|
||||
path: demoComponentName,
|
||||
name: demoComponentName,
|
||||
component: () => import(/* @vite-ignore */ demoComponentPath),
|
||||
path: name,
|
||||
name,
|
||||
component: () => import(/* @vite-ignore */ path),
|
||||
} as RouteRecordRaw;
|
||||
});
|
||||
|
||||
|
||||
@@ -15,18 +15,4 @@ function macAddressValidation(value: Ref) {
|
||||
});
|
||||
}
|
||||
|
||||
const partialMacAddressValidationRules = [
|
||||
{
|
||||
message: 'Invalid partial MAC address',
|
||||
validator: (value: string) => value.trim().match(/^([0-9a-f]{2}[:\-. ]){0,5}([0-9a-f]{0,2})$/i),
|
||||
},
|
||||
];
|
||||
|
||||
function usePartialMacAddressValidation(value: Ref) {
|
||||
return useValidation({
|
||||
source: value,
|
||||
rules: partialMacAddressValidationRules,
|
||||
});
|
||||
}
|
||||
|
||||
export { macAddressValidation, macAddressValidationRules, usePartialMacAddressValidation, partialMacAddressValidationRules };
|
||||
export { macAddressValidation, macAddressValidationRules };
|
||||
|
||||
@@ -20,6 +20,5 @@ export default defineConfig({
|
||||
shortcuts: {
|
||||
'pretty-scrollbar': 'scrollbar scrollbar-rounded scrollbar-thumb-color-gray-300 scrollbar-track-color-gray-100 dark:scrollbar-thumb-color-#424242 dark:scrollbar-track-color-#686868',
|
||||
'divider': 'h-1px bg-current op-10',
|
||||
'bg-surface': 'bg-#ffffff dark:bg-#232323',
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user