aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--components.d.ts3
-rw-r--r--package.json2
-rw-r--r--pnpm-lock.yaml21
-rw-r--r--src/composable/copy.ts8
-rw-r--r--src/tools/emoji-picker/emoji-card.vue42
-rw-r--r--src/tools/emoji-picker/emoji-grid.vue12
-rw-r--r--src/tools/emoji-picker/emoji-picker.vue85
-rw-r--r--src/tools/emoji-picker/emoji.types.ts8
-rw-r--r--src/tools/emoji-picker/index.ts12
-rw-r--r--src/tools/index.ts3
-rw-r--r--src/tools/json-diff/diff-viewer/diff-viewer.models.tsx2
11 files changed, 192 insertions, 6 deletions
diff --git a/components.d.ts b/components.d.ts
index 64bb5f3..1171046 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -53,6 +53,9 @@ declare module '@vue/runtime-core' {
DockerRunToDockerComposeConverter: typeof import('./src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue')['default']
DynamicValues: typeof import('./src/tools/benchmark-builder/dynamic-values.vue')['default']
Editor: typeof import('./src/tools/html-wysiwyg-editor/editor/editor.vue')['default']
+ EmojiCard: typeof import('./src/tools/emoji-picker/emoji-card.vue')['default']
+ EmojiGrid: typeof import('./src/tools/emoji-picker/emoji-grid.vue')['default']
+ EmojiPicker: typeof import('./src/tools/emoji-picker/emoji-picker.vue')['default']
Encryption: typeof import('./src/tools/encryption/encryption.vue')['default']
EtaCalculator: typeof import('./src/tools/eta-calculator/eta-calculator.vue')['default']
FavoriteButton: typeof import('./src/components/FavoriteButton.vue')['default']
diff --git a/package.json b/package.json
index f4b95ce..3abdc53 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
"cronstrue": "^2.26.0",
"crypto-js": "^4.1.1",
"date-fns": "^2.29.3",
+ "emojilib": "^3.0.10",
"figue": "^1.2.0",
"fuse.js": "^6.6.2",
"highlight.js": "^11.7.0",
@@ -74,6 +75,7 @@
"sql-formatter": "^8.2.0",
"ts-pattern": "^4.2.2",
"ua-parser-js": "^1.0.35",
+ "unicode-emoji-json": "^0.4.0",
"unplugin-auto-import": "^0.16.4",
"uuid": "^8.3.2",
"vue": "^3.3.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 836e4a2..b9e3413 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -65,6 +65,9 @@ dependencies:
date-fns:
specifier: ^2.29.3
version: 2.29.3
+ emojilib:
+ specifier: ^3.0.10
+ version: 3.0.10
figue:
specifier: ^1.2.0
version: 1.2.0
@@ -128,6 +131,9 @@ dependencies:
ua-parser-js:
specifier: ^1.0.35
version: 1.0.35
+ unicode-emoji-json:
+ specifier: ^0.4.0
+ version: 0.4.0
unplugin-auto-import:
specifier: ^0.16.4
version: 0.16.4(@vueuse/core@10.1.2)(rollup@2.79.1)
@@ -4932,6 +4938,10 @@ packages:
/emoji-regex@8.0.0:
resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+ /emojilib@3.0.10:
+ resolution: {integrity: sha512-VQtCRroFykPTJaoEBEGFg5tI+rEluabjuaVDDbSftDtiRJ5GuqRG/LGV1mmDzkJP4bh5rzuEBOafMN68/YXQcQ==}
+ dev: false
+
/encode-utf8@1.0.3:
resolution: {integrity: sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw==}
dev: false
@@ -8454,6 +8464,10 @@ packages:
engines: {node: '>=4'}
dev: true
+ /unicode-emoji-json@0.4.0:
+ resolution: {integrity: sha512-lVNOwh2AnmbwqtSrEVjAWKQoVzWgyWmXVqPuPkPfKb0tnA0+uYN/4ILCTdy9IRj/+3drAVhmjwjNJQr2dhCwnA==}
+ dev: false
+
/unicode-match-property-ecmascript@2.0.0:
resolution: {integrity: sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==}
engines: {node: '>=4'}
@@ -8655,6 +8669,7 @@ packages:
/update-browserslist-db@1.0.10(browserslist@4.21.5):
resolution: {integrity: sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==}
+ hasBin: true
peerDependencies:
browserslist: '>= 4.21.0'
dependencies:
@@ -8665,6 +8680,7 @@ packages:
/update-browserslist-db@1.0.11(browserslist@4.21.9):
resolution: {integrity: sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==}
+ hasBin: true
peerDependencies:
browserslist: '>= 4.21.0'
dependencies:
@@ -8795,6 +8811,7 @@ packages:
/vite@4.3.9(@types/node@18.15.11)(less@4.1.3):
resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==}
engines: {node: ^14.18.0 || >=16.0.0}
+ hasBin: true
peerDependencies:
'@types/node': '>= 14'
less: '*'
@@ -8828,6 +8845,7 @@ packages:
/vitest@0.32.0(jsdom@19.0.0)(less@4.1.3):
resolution: {integrity: sha512-SW83o629gCqnV3BqBnTxhB10DAwzwEx3z+rqYZESehUB+eWsJxwcBQx7CKy0otuGMJTYh7qCVuUX23HkftGl/Q==}
engines: {node: '>=v14.18.0'}
+ hasBin: true
peerDependencies:
'@edge-runtime/vm': '*'
'@vitest/browser': '*'
@@ -8902,6 +8920,7 @@ packages:
/vue-demi@0.13.11(vue@3.3.4):
resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
engines: {node: '>=12'}
+ hasBin: true
requiresBuild: true
peerDependencies:
'@vue/composition-api': ^1.0.0-rc.1
@@ -8916,6 +8935,7 @@ packages:
/vue-demi@0.14.1(vue@3.3.4):
resolution: {integrity: sha512-rt+yuCtXvscYot9SQQj3WKZJVSriPNqVkpVBNEHPzSgBv7QIYzsS410VqVgvx8f9AAPgjg+XPKvmV3vOqqkJQQ==}
engines: {node: '>=12'}
+ hasBin: true
requiresBuild: true
peerDependencies:
'@vue/composition-api': ^1.0.0-rc.1
@@ -8990,6 +9010,7 @@ packages:
/vue-tsc@1.8.1(typescript@4.9.3):
resolution: {integrity: sha512-GxBQrcb0Qvyrj1uZqnTXQyWbXdNDRY2MTa+r7ESgjhf+WzBSdxZfkS3KD/C3WhKYG+aN8hf44Hp5Gqzb6PehAA==}
+ hasBin: true
peerDependencies:
typescript: '*'
dependencies:
diff --git a/src/composable/copy.ts b/src/composable/copy.ts
index 6c1eca0..fcc7b40 100644
--- a/src/composable/copy.ts
+++ b/src/composable/copy.ts
@@ -1,14 +1,14 @@
import { type MaybeRef, get, useClipboard } from '@vueuse/core';
import { useMessage } from 'naive-ui';
-export function useCopy({ source, text = 'Copied to the clipboard' }: { source: MaybeRef<unknown>; text?: string }) {
- const { copy } = useClipboard({ source: computed(() => String(get(source))) });
+export function useCopy({ source, text = 'Copied to the clipboard' }: { source?: MaybeRef<unknown>; text?: string } = {}) {
+ const { copy } = useClipboard(source ? { source: computed(() => String(get(source))) } : {});
const message = useMessage();
return {
- async copy() {
+ async copy(content?: string, { notificationMessage }: { notificationMessage?: string } = {}) {
await copy();
- message.success(text);
+ message.success(notificationMessage ?? text);
},
};
}
diff --git a/src/tools/emoji-picker/emoji-card.vue b/src/tools/emoji-picker/emoji-card.vue
new file mode 100644
index 0000000..7cddec0
--- /dev/null
+++ b/src/tools/emoji-picker/emoji-card.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { EmojiInfo } from './emoji.types';
+import { useCopy } from '@/composable/copy';
+
+const props = (defineProps<{ emojiInfo: EmojiInfo }>());
+const { emojiInfo } = toRefs(props);
+
+const { copy } = useCopy();
+</script>
+
+<template>
+ <c-card flex items-center gap-3 important:py-8px important:pl-10px important:pr-5px>
+ <div cursor-pointer text-30px @click="copy(emojiInfo.emoji, { notificationMessage: `Emoji ${emojiInfo.emoji} copied to the clipboard` })">
+ {{ emojiInfo.emoji }}
+ </div>
+
+ <div min-w-0 flex-1>
+ <div truncate font-bold>
+ {{ emojiInfo.title }}
+ </div>
+
+ <!-- <div>
+ <c-link>
+ {{ emojiInfo.codePoints }}
+ </c-link>
+ </div>
+ <div />
+ <div rounded op-70>
+ Unicode: <span border="1px solid current op-30" b-rd-xl px-12px py-4px>{{ emojiInfo.unicode }}</span>
+ </div> -->
+
+ <div flex gap-2 font-mono text-xs op-70>
+ <span cursor-pointer transition hover:text-primary @click="copy(emojiInfo.codePoints, { notificationMessage: `Code points '${emojiInfo.codePoints}' copied to the clipboard` })">
+ {{ emojiInfo.codePoints }}
+ </span>
+ <span cursor-pointer truncate transition hover:text-primary @click="copy(emojiInfo.unicode, { notificationMessage: `Unicode '${emojiInfo.unicode}' copied to the clipboard` })">
+ {{ emojiInfo.unicode }}
+ </span>
+ </div>
+ </div>
+ </c-card>
+</template>
diff --git a/src/tools/emoji-picker/emoji-grid.vue b/src/tools/emoji-picker/emoji-grid.vue
new file mode 100644
index 0000000..9bae22e
--- /dev/null
+++ b/src/tools/emoji-picker/emoji-grid.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { EmojiInfo } from './emoji.types';
+
+const props = withDefaults(defineProps<{ emojiInfos?: EmojiInfo[] }>(), { emojiInfos: () => [] });
+const { emojiInfos } = toRefs(props);
+</script>
+
+<template>
+ <div grid grid-cols-1 gap-2 lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 xl:grid-cols-6>
+ <emoji-card v-for="emojiInfo in emojiInfos" :key="emojiInfo.name" :emoji-info="emojiInfo" flex items-center gap-3 />
+ </div>
+</template>
diff --git a/src/tools/emoji-picker/emoji-picker.vue b/src/tools/emoji-picker/emoji-picker.vue
new file mode 100644
index 0000000..750695f
--- /dev/null
+++ b/src/tools/emoji-picker/emoji-picker.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import emojiUnicodeData from 'unicode-emoji-json';
+import emojiKeywords from 'emojilib';
+import _ from 'lodash';
+import type { EmojiInfo } from './emoji.types';
+import { useFuzzySearch } from '@/composable/fuzzySearch';
+
+const escapeUnicode = ({ emoji }: { emoji: string }) => emoji.split('').map(unit => `\\u${unit.charCodeAt(0).toString(16).padStart(4, '0')}`).join('');
+const getEmojiCodePoints = ({ emoji }: { emoji: string }) => emoji.codePointAt(0) ? `0x${emoji.codePointAt(0)?.toString(16)}` : undefined;
+
+const emojis = _.map(emojiUnicodeData, (emojiInfo, emoji) => ({
+ ...emojiInfo,
+ emoji,
+ title: _.capitalize(emojiInfo.name),
+ keywords: emojiKeywords[emoji as keyof typeof emojiKeywords],
+ codePoints: getEmojiCodePoints({ emoji }),
+ unicode: escapeUnicode({ emoji }),
+}));
+
+const emojisGroups: { emojiInfos: EmojiInfo[]; group: string }[] = _
+ .chain(emojis)
+ .groupBy('group')
+ .map((emojiInfos, group) => ({ group, emojiInfos }))
+ .value();
+
+const searchQuery = ref('');
+
+const { searchResult } = useFuzzySearch({
+ search: searchQuery,
+ data: emojis,
+ options: {
+ keys: ['group', { name: 'name', weight: 3 }, 'keywords', 'unicode', 'codePoints', 'emoji'],
+ threshold: 0.3,
+ useExtendedSearch: true,
+ isCaseSensitive: false,
+ },
+});
+</script>
+
+<template>
+ <div mx-auto max-w-2400px important:flex-1>
+ <div flex items-center gap-3>
+ <c-input-text
+ v-model:value="searchQuery"
+ placeholder="Search emojis (e.g. 'smile')..."
+ mx-auto max-w-600px
+ >
+ <template #prefix>
+ <icon-mdi-search mr-6px color-black op-70 dark:color-white />
+ </template>
+ </c-input-text>
+ </div>
+
+ <div v-if="searchQuery.trim().length > 0">
+ <div
+ v-if="searchResult.length === 0"
+ mt-4
+ text-20px
+ font-bold
+ >
+ No results
+ </div>
+
+ <div v-else>
+ <div mt-4 text-20px font-bold>
+ Search result
+ </div>
+
+ <emoji-grid :emoji-infos="searchResult" />
+ </div>
+ </div>
+
+ <div
+ v-for="{ group, emojiInfos } in emojisGroups"
+ v-else
+ :key="group"
+ >
+ <div mt-4 text-20px font-bold>
+ {{ group }}
+ </div>
+
+ <emoji-grid :emoji-infos="emojiInfos" />
+ </div>
+ </div>
+</template>
diff --git a/src/tools/emoji-picker/emoji.types.ts b/src/tools/emoji-picker/emoji.types.ts
new file mode 100644
index 0000000..4fc85ea
--- /dev/null
+++ b/src/tools/emoji-picker/emoji.types.ts
@@ -0,0 +1,8 @@
+import type emojiUnicodeData from 'unicode-emoji-json';
+
+export type EmojiInfo = {
+ title: string
+ emoji: string
+ codePoints: string | undefined
+ unicode: string
+} & typeof emojiUnicodeData['\uD83E\uDD10'];
diff --git a/src/tools/emoji-picker/index.ts b/src/tools/emoji-picker/index.ts
new file mode 100644
index 0000000..ef01b2d
--- /dev/null
+++ b/src/tools/emoji-picker/index.ts
@@ -0,0 +1,12 @@
+import { MoodSmile } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+ name: 'Emoji picker',
+ path: '/emoji-picker',
+ description: 'Copy and paste emojis easily and get the unicode and code points value of each emoji.',
+ keywords: ['emoji', 'picker', 'unicode', 'copy', 'paste'],
+ component: () => import('./emoji-picker.vue'),
+ icon: MoodSmile,
+ createdAt: new Date('2023-08-07'),
+});
diff --git a/src/tools/index.ts b/src/tools/index.ts
index fb05045..0cfc173 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -1,6 +1,7 @@
import { tool as base64FileConverter } from './base64-file-converter';
import { tool as base64StringConverter } from './base64-string-converter';
import { tool as basicAuthGenerator } from './basic-auth-generator';
+import { tool as emojiPicker } from './emoji-picker';
import { tool as passwordStrengthAnalyser } from './password-strength-analyser';
import { tool as yamlToToml } from './yaml-to-toml';
import { tool as jsonToToml } from './json-to-toml';
@@ -144,7 +145,7 @@ export const toolsByCategory: ToolCategory[] = [
},
{
name: 'Text',
- components: [loremIpsumGenerator, textStatistics],
+ components: [loremIpsumGenerator, textStatistics, emojiPicker],
},
{
name: 'Data',
diff --git a/src/tools/json-diff/diff-viewer/diff-viewer.models.tsx b/src/tools/json-diff/diff-viewer/diff-viewer.models.tsx
index d2117df..1d340ed 100644
--- a/src/tools/json-diff/diff-viewer/diff-viewer.models.tsx
+++ b/src/tools/json-diff/diff-viewer/diff-viewer.models.tsx
@@ -112,7 +112,7 @@ function Value({ value, status }: { value: unknown; status: string }) {
const { copy } = useCopy({ source: formatedValue });
return (
- <span class={['value', status]} onClick={copy}>
+ <span class={['value', status]} onClick={() => copy()}>
{formatedValue}
</span>
);
generated by cgit v1.2.3 (git 2.39.1) at 2025-07-28 09:09:45 +0000