@oiij/emoji-picker 0.0.15 → 0.0.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +206 -46
- package/dist/index.d.mts +1 -1
- package/dist/index.mjs +4 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,90 +1,250 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @oiij/emoji-picker
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@oiij/emoji-picker)
|
|
4
4
|
[](https://github.com/oiij/use/blob/main/packages/emoji-picker/LICENSE)
|
|
5
5
|
|
|
6
|
-
##
|
|
6
|
+
## 简介
|
|
7
7
|
|
|
8
|
-
Use EmojiPicker
|
|
8
|
+
Use EmojiPicker 是基于 emoji-mart 的 Vue 3 组合式函数封装，提供便捷的表情选择器功能，帮助开发者在应用中轻松集成表情选择功能。
|
|
9
9
|
|
|
10
|
-
##
|
|
10
|
+
## 特点
|
|
11
11
|
|
|
12
|
-
### 表情丰富
|
|
12
|
+
### 😊 表情丰富
|
|
13
13
|
|
|
14
|
-
-
|
|
14
|
+
- 🍎 支持多种表情集（Apple、Google、Twitter 等）
|
|
15
15
|
- 🔍 支持搜索和分类
|
|
16
|
-
- 🎨
|
|
16
|
+
- 🎨 支持肤色选择
|
|
17
17
|
|
|
18
|
-
###
|
|
18
|
+
### 🌍 多语言支持
|
|
19
19
|
|
|
20
|
-
-
|
|
21
|
-
-
|
|
22
|
-
- 🔧 清晰的文件结构，易于维护和扩展
|
|
20
|
+
- 🗣️ 支持 20+ 种语言
|
|
21
|
+
- 🇨🇳 中文、英文等多种界面语言
|
|
23
22
|
|
|
24
|
-
###
|
|
23
|
+
### 🌙 暗黑模式
|
|
25
24
|
|
|
26
|
-
-
|
|
27
|
-
-
|
|
28
|
-
- 🎯 支持 Vue 3 的 Composition API 类型系统
|
|
25
|
+
- 🌓 支持暗黑模式切换
|
|
26
|
+
- 🔄 自动重建选择器应用主题
|
|
29
27
|
|
|
30
|
-
###
|
|
28
|
+
### 🔒 类型安全
|
|
31
29
|
|
|
32
|
-
-
|
|
33
|
-
-
|
|
34
|
-
-
|
|
35
|
-
|
|
36
|
-
## 安装 📥
|
|
30
|
+
- 📝 完整的 TypeScript 类型定义
|
|
31
|
+
- 💡 提供准确的类型推断和代码提示
|
|
32
|
+
- ⚡ 支持 Vue 3 的 Composition API 类型系统
|
|
37
33
|
|
|
38
|
-
|
|
34
|
+
## 安装
|
|
39
35
|
|
|
40
36
|
```bash
|
|
37
|
+
# 使用 pnpm
|
|
41
38
|
pnpm add @oiij/emoji-picker
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
### 使用 npm 📦
|
|
45
39
|
|
|
46
|
-
|
|
40
|
+
# 使用 npm
|
|
47
41
|
npm install @oiij/emoji-picker
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
### 使用 yarn 🧶
|
|
51
42
|
|
|
52
|
-
|
|
43
|
+
# 使用 yarn
|
|
53
44
|
yarn add @oiij/emoji-picker
|
|
54
45
|
```
|
|
55
46
|
|
|
56
|
-
##
|
|
47
|
+
## 依赖
|
|
48
|
+
|
|
49
|
+
- `vue`: ^3.0.0
|
|
50
|
+
- `@vueuse/core`: ^10.0.0
|
|
51
|
+
- `emoji-mart`: ^5.0.0
|
|
52
|
+
- `@emoji-mart/data`: ^1.0.0
|
|
53
|
+
|
|
54
|
+
## 示例
|
|
57
55
|
|
|
58
56
|
### 基础使用
|
|
59
57
|
|
|
60
58
|
```vue
|
|
61
59
|
<script setup>
|
|
62
|
-
import {
|
|
60
|
+
import { useEmojiPicker } from '@oiij/emoji-picker'
|
|
61
|
+
import { useTemplateRef } from 'vue'
|
|
62
|
+
|
|
63
|
+
const { onRendered } = useEmojiPicker(useTemplateRef('picker'), {
|
|
64
|
+
emojiPickerOptions: {
|
|
65
|
+
onEmojiSelect: (emoji) => {
|
|
66
|
+
console.log('选择了表情', emoji.native)
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
})
|
|
63
70
|
</script>
|
|
64
71
|
|
|
65
72
|
<template>
|
|
66
|
-
<
|
|
73
|
+
<div ref="picker" />
|
|
67
74
|
</template>
|
|
68
75
|
```
|
|
69
76
|
|
|
70
|
-
|
|
77
|
+
### 响应式配置
|
|
71
78
|
|
|
72
|
-
|
|
79
|
+
```vue
|
|
80
|
+
<script setup>
|
|
81
|
+
import { useEmojiPicker } from '@oiij/emoji-picker'
|
|
82
|
+
import { ref, useTemplateRef } from 'vue'
|
|
83
|
+
|
|
84
|
+
const darkMode = ref(false)
|
|
85
|
+
const language = ref<'zh' | 'en'>('zh')
|
|
86
|
+
const selectedEmoji = ref('')
|
|
87
|
+
|
|
88
|
+
const { setDarkMode, setLanguage } = useEmojiPicker(useTemplateRef('picker'), {
|
|
89
|
+
darkMode,
|
|
90
|
+
language,
|
|
91
|
+
emojiPickerOptions: {
|
|
92
|
+
onEmojiSelect: (emoji) => {
|
|
93
|
+
selectedEmoji.value = emoji.native
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
})
|
|
97
|
+
</script>
|
|
73
98
|
|
|
74
|
-
|
|
99
|
+
<template>
|
|
100
|
+
<button @click="darkMode = !darkMode">
|
|
101
|
+
切换主题
|
|
102
|
+
</button>
|
|
103
|
+
<button @click="language = language === 'zh' ? 'en' : 'zh'">
|
|
104
|
+
切换语言
|
|
105
|
+
</button>
|
|
106
|
+
<div ref="picker" />
|
|
107
|
+
<p>已选择: {{ selectedEmoji }}</p>
|
|
108
|
+
</template>
|
|
109
|
+
```
|
|
75
110
|
|
|
76
|
-
|
|
111
|
+
### 自定义配置
|
|
77
112
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
113
|
+
```vue
|
|
114
|
+
<script setup>
|
|
115
|
+
import { useEmojiPicker } from '@oiij/emoji-picker'
|
|
116
|
+
import { useTemplateRef } from 'vue'
|
|
117
|
+
|
|
118
|
+
const { onRendered } = useEmojiPicker(useTemplateRef('picker'), {
|
|
119
|
+
emojiPickerOptions: {
|
|
120
|
+
theme: 'light',
|
|
121
|
+
set: 'apple',
|
|
122
|
+
skin: 1,
|
|
123
|
+
perLine: 8,
|
|
124
|
+
maxFrequentRows: 2,
|
|
125
|
+
previewPosition: 'none',
|
|
126
|
+
searchPosition: 'sticky',
|
|
127
|
+
navPosition: 'top',
|
|
128
|
+
onEmojiSelect: (emoji) => {
|
|
129
|
+
console.log(emoji)
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
})
|
|
133
|
+
</script>
|
|
83
134
|
|
|
84
|
-
|
|
135
|
+
<template>
|
|
136
|
+
<div ref="picker" />
|
|
137
|
+
</template>
|
|
138
|
+
```
|
|
85
139
|
|
|
86
|
-
|
|
140
|
+
## API
|
|
141
|
+
|
|
142
|
+
### `useEmojiPicker(templateRef, options?)`
|
|
143
|
+
|
|
144
|
+
使用表情选择器。
|
|
145
|
+
|
|
146
|
+
#### 参数
|
|
147
|
+
|
|
148
|
+
| 参数 | 类型 | 说明 |
|
|
149
|
+
| ------------- | -------------------------- | ------------------------ |
|
|
150
|
+
| `templateRef` | `TemplateRef<HTMLElement>` | 表情选择器容器的模板引用 |
|
|
151
|
+
| `options` | `UseEmojiPickerOptions` | 表情选择器配置选项 |
|
|
152
|
+
|
|
153
|
+
#### UseEmojiPickerOptions
|
|
154
|
+
|
|
155
|
+
| 选项 | 类型 | 默认值 | 说明 |
|
|
156
|
+
| -------------------- | -------------------------------- | ------- | ------------------- |
|
|
157
|
+
| `darkMode` | `MaybeRefOrGetter<boolean>` | `false` | 是否开启暗黑模式 |
|
|
158
|
+
| `language` | `MaybeRefOrGetter<'zh' \| 'en'>` | `'zh'` | 界面语言 |
|
|
159
|
+
| `emojiPickerOptions` | `EmojiPickerOptions` | - | emoji-mart 配置选项 |
|
|
160
|
+
|
|
161
|
+
#### 返回值
|
|
162
|
+
|
|
163
|
+
| 属性 | 类型 | 说明 |
|
|
164
|
+
| ------------------------ | ---------------------------- | ------------ |
|
|
165
|
+
| `templateRef` | `TemplateRef<HTMLElement>` | 容器引用 |
|
|
166
|
+
| `darkMode` | `Ref<boolean>` | 暗黑模式状态 |
|
|
167
|
+
| `language` | `Ref<'zh' \| 'en'>` | 当前语言 |
|
|
168
|
+
| `emojiPickerInst` | `ShallowRef<Picker \| null>` | Picker 实例 |
|
|
169
|
+
| `setDarkMode(darkMode?)` | `Function` | 设置暗黑模式 |
|
|
170
|
+
| `setLanguage(language?)` | `Function` | 设置语言 |
|
|
171
|
+
| `onRendered(callback)` | `Function` | 渲染完成事件 |
|
|
172
|
+
|
|
173
|
+
## EmojiPickerOptions 配置
|
|
174
|
+
|
|
175
|
+
| 选项 | 类型 | 说明 |
|
|
176
|
+
| ----------------- | ------------------------------------------------------------ | ------------ |
|
|
177
|
+
| `onEmojiSelect` | `(emoji: EmojiResult) => void` | 选择表情回调 |
|
|
178
|
+
| `onClickOutside` | `() => void` | 点击外部回调 |
|
|
179
|
+
| `theme` | `'auto' \| 'light' \| 'dark'` | 主题 |
|
|
180
|
+
| `set` | `'native' \| 'apple' \| 'facebook' \| 'google' \| 'twitter'` | 表情集 |
|
|
181
|
+
| `skin` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | 肤色 |
|
|
182
|
+
| `locale` | `string` | 语言 |
|
|
183
|
+
| `perLine` | `number` | 每行数量 |
|
|
184
|
+
| `maxFrequentRows` | `number` | 最大常用行数 |
|
|
185
|
+
| `previewPosition` | `'top' \| 'bottom' \| 'none'` | 预览位置 |
|
|
186
|
+
| `searchPosition` | `'sticky' \| 'static' \| 'none'` | 搜索位置 |
|
|
187
|
+
| `navPosition` | `'top' \| 'bottom' \| 'none'` | 导航位置 |
|
|
188
|
+
|
|
189
|
+
## 类型定义
|
|
190
|
+
|
|
191
|
+
```ts
|
|
192
|
+
import type { MaybeRefOrGetter, TemplateRef } from 'vue'
|
|
193
|
+
|
|
194
|
+
export type EmojiResult = {
|
|
195
|
+
id: string
|
|
196
|
+
name: string
|
|
197
|
+
native: string
|
|
198
|
+
unified: string
|
|
199
|
+
keywords: string[]
|
|
200
|
+
shortcodes: string
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
export type EmojiPickerOptions = {
|
|
204
|
+
parent?: HTMLElement
|
|
205
|
+
data?: object
|
|
206
|
+
i18n?: object
|
|
207
|
+
categories?: ('frequent' | 'people' | 'nature' | 'food' | 'activity' | 'places' | 'objects' | 'symbols' | 'flags')[]
|
|
208
|
+
onEmojiSelect?: (emoji: EmojiResult) => void
|
|
209
|
+
onClickOutside?: () => void
|
|
210
|
+
autoFocus?: boolean
|
|
211
|
+
dynamicWidth?: boolean
|
|
212
|
+
emojiButtonSize?: number
|
|
213
|
+
emojiSize?: number
|
|
214
|
+
emojiVersion?: 1 | 2 | 3 | 4 | 5 | 11 | 12 | 12.1 | 13 | 13.1 | 14 | 15
|
|
215
|
+
icons?: 'aut' | 'outline' | 'solid'
|
|
216
|
+
locale?: 'en' | 'ar' | 'be' | 'cs' | 'de' | 'es' | 'fa' | 'fi' | 'fr' | 'hi' | 'it' | 'ja' | 'ko' | 'nl' | 'pl' | 'pt' | 'ru' | 'sa' | 'tr' | 'uk' | 'vi' | 'zh'
|
|
217
|
+
maxFrequentRows?: number
|
|
218
|
+
navPosition?: 'top' | 'bottom' | 'none'
|
|
219
|
+
noCountryFlags?: boolean
|
|
220
|
+
perLine?: number
|
|
221
|
+
previewPosition?: 'top' | 'bottom' | 'none'
|
|
222
|
+
searchPosition?: 'sticky' | 'static' | 'none'
|
|
223
|
+
set?: 'native' | 'apple' | 'facebook' | 'google' | 'twitter'
|
|
224
|
+
skin?: 1 | 2 | 3 | 4 | 5 | 6
|
|
225
|
+
skinTonePosition?: 'preview' | 'search' | 'none'
|
|
226
|
+
theme?: 'auto' | 'light' | 'dark'
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
export type UseEmojiPickerOptions = {
|
|
230
|
+
darkMode?: MaybeRefOrGetter<boolean>
|
|
231
|
+
language?: MaybeRefOrGetter<'zh' | 'en'>
|
|
232
|
+
emojiPickerOptions?: EmojiPickerOptions
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
export type UseEmojiPickerReturns = {
|
|
236
|
+
templateRef: TemplateRef<HTMLElement>
|
|
237
|
+
darkMode: Ref<boolean>
|
|
238
|
+
language: Ref<'zh' | 'en'>
|
|
239
|
+
emojiPickerInst: ShallowRef<Picker | null>
|
|
240
|
+
setDarkMode: (darkMode?: boolean) => void
|
|
241
|
+
setLanguage: (language?: 'zh' | 'en') => void
|
|
242
|
+
onRendered: (callback: (instance: Picker) => void) => void
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
export declare function useEmojiPicker(templateRef: TemplateRef<HTMLElement>, options?: UseEmojiPickerOptions): UseEmojiPickerReturns
|
|
246
|
+
```
|
|
87
247
|
|
|
88
|
-
##
|
|
248
|
+
## 在线文档
|
|
89
249
|
|
|
90
|
-
|
|
250
|
+
[在线文档](https://oiij-use.vercel.app/emoji-picker/emoji-picker)
|
package/dist/index.d.mts
CHANGED
|
@@ -220,7 +220,7 @@ declare function useEmojiPicker(templateRef: TemplateRef<HTMLElement>, options?:
|
|
|
220
220
|
emojiPickerInst: vue.ShallowRef<Picker | null, Picker | null>;
|
|
221
221
|
setDarkMode: (darkMode?: boolean) => void;
|
|
222
222
|
setLanguage: (language?: "zh" | "en") => void;
|
|
223
|
-
|
|
223
|
+
onRendered: _vueuse_core0.EventHookOn<[Picker]>;
|
|
224
224
|
};
|
|
225
225
|
/**
|
|
226
226
|
* 使用表情选择器返回值类型
|
package/dist/index.mjs
CHANGED
|
@@ -2,7 +2,7 @@ import data from "@emoji-mart/data";
|
|
|
2
2
|
import { createEventHook, watchOnce } from "@vueuse/core";
|
|
3
3
|
import { Picker } from "emoji-mart";
|
|
4
4
|
import { onUnmounted, ref, shallowRef, toValue, watch, watchEffect } from "vue";
|
|
5
|
-
//#region
|
|
5
|
+
//#region src/_utils.ts
|
|
6
6
|
function watchRefOrGetter(value, callback) {
|
|
7
7
|
const refValue = ref(toValue(value));
|
|
8
8
|
watchEffect(() => {
|
|
@@ -65,7 +65,7 @@ function useEmojiPicker(templateRef, options) {
|
|
|
65
65
|
...emojiPickerOptions
|
|
66
66
|
};
|
|
67
67
|
const emojiPickerInst = shallowRef(null);
|
|
68
|
-
const
|
|
68
|
+
const onRenderedEvent = createEventHook();
|
|
69
69
|
/**
|
|
70
70
|
* 更新主题
|
|
71
71
|
*
|
|
@@ -94,7 +94,7 @@ function useEmojiPicker(templateRef, options) {
|
|
|
94
94
|
parent: templateRef.value,
|
|
95
95
|
..._options
|
|
96
96
|
});
|
|
97
|
-
|
|
97
|
+
onRenderedEvent.trigger(emojiPickerInst.value);
|
|
98
98
|
}
|
|
99
99
|
}
|
|
100
100
|
function destroy() {
|
|
@@ -112,7 +112,7 @@ function useEmojiPicker(templateRef, options) {
|
|
|
112
112
|
emojiPickerInst,
|
|
113
113
|
setDarkMode,
|
|
114
114
|
setLanguage,
|
|
115
|
-
|
|
115
|
+
onRendered: onRenderedEvent.on
|
|
116
116
|
};
|
|
117
117
|
}
|
|
118
118
|
//#endregion
|