vue3-emoji-picker-ru

Vue3 Emoji Picker RU / Vue3 Эмодзи Пикер RU. Live preview

A Vue 3 emoji picker component with built-in Russian localization and custom localization support. / Компонент выбора эмодзи для Vue 3 со встроенной русской локализацией и поддержкой кастомной локализации.

Features / Особенности

• 🎨 Multiple Themes - Light, Dark, Auto themes
• 🌍 Multi-language Support - Built-in English, Russian + custom localization
• 🔍 Smart Search - Search emojis in multiple languages
• 📱 Responsive Design - Works on all devices
• ⚡ Vue 3 Compatible - Built for Vue 3 Composition API
• 🎯 Customizable - Extensive customization options
• 📦 TypeScript Support - Full TypeScript definitions

Installation / Установка:

npm install vue3-emoji-picker-ru

// or
yarn add vue3-emoji-picker-ru

Important note: If you're using TypeScript, don't forget to add type declarations. See vue3-emoji-picker-ru.d.ts for the complete type definitions. Важно: Если вы используете TypeScript, не забудьте добавить декларации типов. См. vue3-emoji-picker-ru.d.ts для полных определений типов.

TypeScript Setup / Настройка TypeScript

Create a types.d.ts file in your project root and add: / Создайте файл types.d.ts в корне вашего проекта и добавьте:

declare module 'vue3-emoji-picker-ru' {
  import { DefineComponent } from 'vue'

  export interface EmojiExt {
    i: string
    n: string[]
    r: string
    t: string
    u: string
  }

  export interface CustomLocaleOptions {
    locale: string
    configPath?: string
    emojisPath?: string
  }

  const EmojiPicker: DefineComponent<any>
  export default EmojiPicker
}

declare module 'vue3-emoji-picker-ru/css' {
  const content: string
  export default content
}

Or copy the complete type definitions from types.d.ts.example / Или скопируйте полные определения типов из types.d.ts.example

Usage / Использование:

// import picker component / импорт компонента пикера
import EmojiPicker from 'vue3-emoji-picker-ru'

// import css / импорт стилей
import 'vue3-emoji-picker-ru/css'
// or import directly: / или импорт напрямую:
// import'node_modules/vue3-emoji-picker-ru/dist/style.css'

// use picker component / использование компонента пикера
<EmojiPicker :native="true" @select="onSelectEmoji" />

// with localization / с локализацией
<EmojiPicker locale="ru" @select="onSelectEmoji" />

// with custom localization / с кастомной локализацией
<EmojiPicker
  locale="my-lang"
  :custom-locale="{
    locale: 'my-lang',
    configPath: '/my-locales/config.json',
    emojisPath: '/my-locales/emojis.json',
  }"
  @select="onSelectEmoji"
/>

// event callback / обработчик события
function onSelectEmoji(emoji) {
  console.log(emoji)
  /*
    // result / результат
    { 
        i: "😚", 
        n: ["kissing face"], 
        r: "1f61a", // with skin tone / с тоном кожи
        t: "neutral", // skin tone / тон кожи
        u: "1f61a" // without tone / без тона
    }
    */
}

Options (props) / Опции (пропсы)

Static text option (props['static-texts']) / Опция статического текста

Example / Пример: :static-texts="{ placeholder: 'Search emoji'}"

Events / Callbacks / События / Обработчики

@select

This event fires when an emoji gets selected/clicked. / Это событие срабатывает при выборе/клике на эмодзи.
Event callback will receive selected emoji in the first argument. / Обработчик события получит выбранный эмодзи в первом аргументе.

<EmojiPicker @select="onSelectEmoji" />

function onSelectEmoji(emoji) { /* do something */ }

@update:text

This event fires when input text gets changed. / Это событие срабатывает при изменении текста в поле ввода.
Event callback will receive the text in the first argument. / Обработчик события получит текст в первом аргументе.

<EmojiPicker @update:text="onChangeText" />

function onChangeText(text) { /* do something */ }

Available groups / Доступные группы

[
  "smileys_people",
  "animals_nature",
  "food_drink",
  "activities",
  "travel_places",
  "objects",
  "symbols",
  "flags"
]

Default group names / Названия групп по умолчанию

{
  "smileys_people": "Smiles & People",
  "animals_nature": "Animals & Nature",
  "food_drink": "Food & Drink",
  "activities": "Activities",
  "travel_places": "Travel places",
  "objects": "Objects",
  "symbols": "Symbols",
  "flags": "Flags",
  "recent": "Recently used"
}

Overriding group names / Переопределение названий групп

<picker :group-names="{ smileys_people: 'My customized group name' }" />

Overriding group icons / Переопределение иконок групп

<template>
  <picker :group-icons="{ smileys_people: customSVG }" />
</template>

<script setup>
import customSVG from './path/to/svg'
</script>

Override group order / Переопределение порядка групп

This will make it so flags is first and then any other non-defined group will follow. / Это сделает так, что флаги будут первыми, а затем последуют любые другие неопределенные группы.

<picker :group-order="['flags']" />

Add additional groups / Добавление дополнительных групп

To see any existing emoji's see src/data/emojis.json / Чтобы увидеть любые существующие эмодзи, см. src/data/emojis.json

<picker
  :additional-groups="{
    my_custom_group: [
      { n: ['grinning face', 'grinning'], u: '1f600' },
      { n: ['grinning face with smiling eyes', 'grin'], u: '1f601' },
    ],
  }"
  :group-names="{ my_custom_group: 'Frequently used' }"
/>

Localization / Локализация

Built-in Languages / Встроенные языки

<!-- English (default) -->
<picker @select="onSelect" />

<!-- Russian -->
<picker locale="ru" @select="onSelect" />

<!-- German -->
<picker locale="de" @select="onSelect" />

Supported Languages / Поддерживаемые языки

Custom Localization / Кастомная локализация

You can specify custom paths for localization files: / Вы можете указать кастомные пути для файлов локализации:

<template>
  <picker
    locale="my-lang"
    :custom-locale="customLocaleOptions"
    @select="onSelect"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { CustomLocaleOptions } from 'vue3-emoji-picker-ru'

const customLocaleOptions: CustomLocaleOptions = {
  locale: 'my-lang',
  configPath: '/my-locales/config.json', // Path to config file / Путь к файлу конфигурации
  emojisPath: '/my-locales/emojis.json', // Path to emojis file / Путь к файлу эмодзи
}

function onSelect(emoji: any) {
  console.log('Selected emoji:', emoji)
}
</script>

Localization Files Structure / Структура файлов локализации

1. Configuration File / Файл конфигурации

Create a config file (e.g., /my-locales/config.json):

{
  "locale": "my-lang",
  "groupNames": {
    "recent": "Recently used",
    "smileys_people": "Smiles & People",
    "animals_nature": "Animals & Nature",
    "food_drink": "Food & Drink",
    "activities": "Activities",
    "travel_places": "Travel places",
    "objects": "Objects",
    "symbols": "Symbols",
    "flags": "Flags"
  },
  "staticTexts": {
    "placeholder": "Search emoji",
    "skinTone": "Skin tone",
    "noResults": "No emoji found!"
  }
}

2. Emojis Translation File / Файл переводов смайлов

Create an emojis file (e.g., /my-locales/emojis.json):

{
  "smileys_people": [
    {
      "n": ["grinning face", "grinning", "улыбающееся лицо", "улыбка"],
      "u": "1f600"
    },
    {
      "n": ["dog face", "dog", "собачья морда", "собака"],
      "u": "1f436"
    }
  ]
}

New Props / Новые пропсы

Custom Locale Options / Опции кастомной локализации

interface CustomLocaleOptions {
  locale: string // Language code
  configPath?: string // Path to config file
  emojisPath?: string // Path to emojis file
}

Examples / Примеры

CDN Localization / Локализация с CDN

<picker
  locale="es"
  :custom-locale="{
    locale: 'es',
    configPath: 'https://cdn.example.com/locales/es/config.json',
    emojisPath: 'https://cdn.example.com/locales/es/emojis.json',
  }"
  @select="onSelect"
/>

API Localization / Локализация через API

<picker
  locale="dynamic"
  :custom-locale="{
    locale: 'dynamic',
    configPath: '/api/locales/config',
    emojisPath: '/api/locales/emojis',
  }"
  @select="onSelect"
/>

Local Files / Локальные файлы

<picker
  locale="custom"
  :custom-locale="{
    locale: 'custom',
    configPath: '/assets/locales/my-lang/config.json',
    emojisPath: '/assets/locales/my-lang/emojis.json',
  }"
  @select="onSelect"
/>

Search in Multiple Languages / Поиск на нескольких языках

The search works across all languages in the emoji names array:

// English search
'smile' // finds 😊

// Russian search
'улыбка' // finds 😊

// Any language
'смайл' // finds 😊

Fallback System / Система отката

• If custom files are not found, falls back to English / Если кастомные файлы не найдены, откатывается на английский
• If built-in locale is not available, falls back to English / Если встроенная локаль недоступна, откатывается на английский
• Console warnings for debugging / Предупреждения в консоли для отладки

Migration / Миграция

No migration needed for existing code. New functionality is additive: / Миграция не требуется для существующего кода. Новая функциональность является дополнительной:

Before / До:

<picker locale="de" />

After (optional) / После (опционально):

<picker
  locale="de"
  :custom-locale="{ locale: 'de', configPath: '/custom/de.json' }"
/>

For detailed documentation, see CUSTOM_LOCALIZATION.md / Для подробной документации см. CUSTOM_LOCALIZATION.md