Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update emoji list to emoji v15.0. #58

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Update emoji list to emoji v15.0. #58

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
eeceeb5
Update emoji list to emoji v15.0.
lushangkan Aug 16, 2023
d574ada
Remove debug code residues
lushangkan Aug 17, 2023
c430646
Fix unsupported skin tone.
lushangkan Aug 19, 2023
9facf5e
Modify emojis.json to fix some emoji's skin tone issues.
lushangkan Aug 20, 2023
4040093
Update emojis.json
lushangkan Aug 20, 2023
7a823b4
Add option to hide selected emoji and customize search input class
lushangkan Aug 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
module.exports = {
extends: ['plugin:vue/vue3-recommended', 'prettier'],
rules: {
'vue/multi-word-component-names': 0,
'vue/no-reserved-component-names': 'off',
'vue/multi-word-component-names': 'off',
},
parser: 'vue-eslint-parser',
parserOptions: {
Expand Down
62 changes: 41 additions & 21 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,25 +54,26 @@ function onSelectEmoji(emoji) {

## Options (`props`)

| Prop | Type | Default Value | Description |
| :------------------------- | :------ | :------------ | :------------------------------------------------------------------------------------------ |
| native | Boolean | false | Load native emoji instead of image. |
| hide-search | Boolean | true | Show/hide search input. |
| hide-group-icons | Boolean | false | Show/hide header group icons. |
| hide-group-names | Boolean | false | Show/hide group names. |
| disable-sticky-group-names | Boolean | false | Disable sticky for group names |
| disable-skin-tones | Boolean | false | Disable skin tones. |
| disabled-groups | Array | [] | Disable any group/category. See [Available groups](#available-groups) |
| group-names | Object | {} | Change any group name. See [Default group names](#default-group-names) |
| static-texts | Object | Object | See [static-texts](#propsstatic-texts) table |
| pickerType | string | '' | Choose picker type, possible options: `input`, `textarea` (Popup with input/textarea), `''` |
| mode | string | 'insert' | Choose insert mode, possible options: `prepend`, `insert`, `append` |
| offset | Number | '6' | Choose emoji popup offset |
| additional-groups | Object | {} | Add additional customized groups, keys are the group names translated from snake_case |
| group-order | Array | [] | Override ordering of groups |
| group-icons | Object | {} | Override group icons by passing svg's on keys |
| display-recent | Boolean | false | Display Recently used emojis |
| theme | String | 'light' | Available options, 'light', 'dark', and 'auto' |
| Prop | Type | Default Value | Description |
| :------------------------- | :------ | :----------------- | :------------------------------------------------------------------------------------------ |
| native | Boolean | false | Load native emoji instead of image. |
| hide-search | Boolean | true | Show/hide search input. |
| hide-group-icons | Boolean | false | Show/hide header group icons. |
| hide-group-names | Boolean | false | Show/hide group names. |
| disable-sticky-group-names | Boolean | false | Disable sticky for group names |
| disable-skin-tones | Boolean | false | Disable skin tones. |
| disabled-groups | Array | [] | Disable any group/category. See [Available groups](#available-groups) |
| group-names | Object | {} | Change any group name. See [Default group names](#default-group-names) |
| static-texts | Object | Object | See [static-texts](#propsstatic-texts) table |
| pickerType | string | '' | Choose picker type, possible options: `input`, `textarea` (Popup with input/textarea), `''` |
| mode | string | 'insert' | Choose insert mode, possible options: `prepend`, `insert`, `append` |
| offset | Number | '6' | Choose emoji popup offset |
| additional-groups | Object | {} | Add additional customized groups, keys are the group names translated from snake_case |
| group-order | Array | [] | Override ordering of groups |
| group-icons | Object | {} | Override group icons by passing svg's on keys |
| display-recent | Boolean | false | Display Recently used emojis |
| theme | String | 'light' | Available options, 'light', 'dark', and 'auto' |
| emoji-list | Object | Default emoji list | Customize the emoji list to search for emoji in other languages |

## Static text option (`props['static-texts']`)

Expand Down Expand Up @@ -112,7 +113,8 @@ function onChangeText(text) { /* do something */ }

```json
[
"smileys_people",
"smileys_emotion",
"people_body",
"animals_nature",
"food_drink",
"activities",
Expand All @@ -127,7 +129,9 @@ function onChangeText(text) { /* do something */ }

```json
{
"smileys_people": "Smiles & People",
"recent": "Recently used",
"smileys_emotion": "Smiles & Emotion",
"people_body": "People & Body",
"animals_nature": "Animals & Nature",
"food_drink": "Food & Drink",
"activities": "Activities",
Expand Down Expand Up @@ -179,3 +183,19 @@ To see any existing emoji's see `src/data/emojis.json`
:group-names="{ my_custom_group: 'Frequently used' }"
/>
```

## Custom emoji list

Customize the emoji list to search for emoji in other languages

```vue
<template>
<picker :emoji-list="CustomEmojis" />
</template>

<script setup>
import CustomEmojis from './path/to/cutsom_emojis.json'
</script>
```

_Project icon from lucide_
22 changes: 11 additions & 11 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,22 +46,22 @@
"devDependencies": {
"@babel/types": "^7.15.6",
"@types/node": "^16.11.7",
"@typescript-eslint/parser": "^5.5.0",
"@vitejs/plugin-vue": "^1.2.5",
"@vitest/coverage-c8": "^0.24.5",
"@typescript-eslint/parser": "^6.4.0",
"@vitejs/plugin-vue": "^4.2.3",
"@vitest/coverage-c8": "^0.33.0",
"@vue/compiler-sfc": "^3.0.5",
"eslint": "^8.3.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-vue": "^8.1.1",
"husky": "^7.0.4",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-vue": "^9.17.0",
"husky": "^8.0.3",
"lint-staged": ">=10",
"prettier": "^2.5.0",
"prettier": "^3.0.1",
"sass": "^1.43.2",
"typescript": "^4.3.2",
"vite": "^2.4.2",
"vitest": "^0.24.5",
"vue-eslint-parser": "^8.0.1",
"vue-tsc": "^0.0.24"
"vite": "^4.4.9",
"vitest": "^0.34.1",
"vue-eslint-parser": "^9.3.1",
"vue-tsc": "^1.8.8"
},
"lint-staged": {
"*.{js,ts,vue}": "npm run lint:fix",
Expand Down
7 changes: 5 additions & 2 deletions src/components/Header.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@ import { snakeToCapitalizedCase } from '../helpers'
/**
* Group/Category Images
*/
import smileys_people from '../svgs/groups/smileys_people.svg'
import smileys_emotion from '../svgs/groups/smileys_emotion.svg'
import people_body from '../svgs/groups/people_body.svg'
import animals_nature from '../svgs/groups/animals_nature.svg'
import food_drink from '../svgs/groups/food_drink.svg'
import activities from '../svgs/groups/activities.svg'
Expand All @@ -49,6 +50,7 @@ import flags from '../svgs/groups/flags.svg'
import recent from '../svgs/groups/recent.svg'

export default defineComponent({
// eslint-disable-next-line vue/no-reserved-component-names
name: 'Header',
setup(props) {
const { state, updateSearch, updateActiveGroup } = inject('store') as Store
Expand Down Expand Up @@ -93,7 +95,8 @@ export default defineComponent({
hasGroupIcons,
placeholder,
icons: {
smileys_people,
smileys_emotion,
people_body,
animals_nature,
food_drink,
activities,
Expand Down
16 changes: 12 additions & 4 deletions src/components/Picker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
/**
* External dependencies
*/
import { defineComponent, provide, ref, PropType, toRaw } from 'vue'
import { defineComponent, provide, ref, PropType, type Ref } from 'vue'

/**
* Internal dependencies
Expand All @@ -21,6 +21,9 @@ import Store from '../store'
import PickerRoot from './Root.vue'
import { ColorTheme } from '../types'

//Def emoji list
import Emojis from '../data/emojis.json'

export default defineComponent({
name: 'Picker',
components: {
Expand Down Expand Up @@ -99,17 +102,21 @@ export default defineComponent({
type: String as PropType<ColorTheme>,
default: 'light',
},
emojiList: {
type: Object,
default: () => Emojis,
},
},
emits: ['update:text', 'select'],
setup(props, { emit }) {
const input = ref(props.text)
const input = <Ref<string | undefined>>ref(props.text)

/**
* Handle text change event
* @param text - text value
*/
function onChangeText(text: string | undefined) {
input.value = text || ''
input.value = <string>text || ''
emit('update:text', input.value)
}

Expand Down Expand Up @@ -138,6 +145,7 @@ export default defineComponent({
groupOrder: props.groupOrder,
groupIcons: props.groupIcons,
colorTheme: COLOR_THEMES.includes(props.theme) ? props.theme : 'light',
emojiList: props.emojiList,
})

/**
Expand All @@ -150,7 +158,7 @@ export default defineComponent({
*/

return {
type: props.pickerType,
type: <string>props.pickerType,
input,
onChangeText,
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/Root.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ import { createPopper } from '@popperjs/core'
/**
* Internal dependencies
*/
import smileys_people from '../svgs/groups/smileys_people.svg'
import smileys_emotion from '../svgs/groups/smileys_emotion.svg'
import Body from './Body.vue'
import Header from './Header.vue'
import Footer from './Footer.vue'
Expand Down Expand Up @@ -200,7 +200,7 @@ export default defineComponent({
* Return vars
*/
return {
face: smileys_people,
face: smileys_emotion,
open,
onSelect,
input,
Expand Down
3 changes: 2 additions & 1 deletion src/constant.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ export const EMOJI_REMOTE_SRC =
// ./data/groups.json
export const GROUP_NAMES: GroupNames = {
recent: 'Recently used',
smileys_people: 'Smiles & People',
smileys_emotion: 'Smiles & Emotion',
people_body: 'People & Body',
animals_nature: 'Animals & Nature',
food_drink: 'Food & Drink',
activities: 'Activities',
Expand Down
Loading