@oiij/emoji-picker 0.0.14 → 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 CHANGED
@@ -1,90 +1,250 @@
1
- # Use EmojiPicker 🚀
1
+ # @oiij/emoji-picker
2
2
 
3
3
  [![NPM version](https://img.shields.io/npm/v/@oiij/emoji-picker)](https://www.npmjs.com/package/@oiij/emoji-picker)
4
4
  [![MIT-license](https://img.shields.io/npm/l/@oiij/emoji-picker)](https://github.com/oiij/use/blob/main/packages/emoji-picker/LICENSE)
5
5
 
6
- ## 项目简介 📦
6
+ ## 简介
7
7
 
8
- Use EmojiPicker 是一个功能完善的表情选择器组件,为 Vue 3 应用提供丰富的表情符号选择功能,帮助用户快速选择和插入表情。
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
- - 📝 完整的 TypeScript 类型定义
27
- - 💡 提供准确的类型推断和代码提示
28
- - 🎯 支持 Vue 3 的 Composition API 类型系统
25
+ - 🌓 支持暗黑模式切换
26
+ - 🔄 自动重建选择器应用主题
29
27
 
30
- ### 轻量高效
28
+ ### 🔒 类型安全
31
29
 
32
- - 🚀 核心代码精简,无额外依赖
33
- - 🏃 优化的性能表现,最小化运行时开销
34
- - 📦 支持 Tree Shaking,进一步减小打包体积
35
-
36
- ## 安装 📥
30
+ - 📝 完整的 TypeScript 类型定义
31
+ - 💡 提供准确的类型推断和代码提示
32
+ - 支持 Vue 3 的 Composition API 类型系统
37
33
 
38
- ### 使用 pnpm 🐱
34
+ ## 安装
39
35
 
40
36
  ```bash
37
+ # 使用 pnpm
41
38
  pnpm add @oiij/emoji-picker
42
- ```
43
-
44
- ### 使用 npm 📦
45
39
 
46
- ```bash
40
+ # 使用 npm
47
41
  npm install @oiij/emoji-picker
48
- ```
49
-
50
- ### 使用 yarn 🧶
51
42
 
52
- ```bash
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 { UseEmojiPicker } from '@oiij/emoji-picker'
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
- <UseEmojiPicker />
73
+ <div ref="picker" />
67
74
  </template>
68
75
  ```
69
76
 
70
- ## 在线文档 📚
77
+ ### 响应式配置
71
78
 
72
- [在线文档](https://oiij-use.vercel.app/emoji-picker/emoji-picker) 📖
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
- 1. Fork 本仓库 🍴
79
- 2. 创建您的特性分支 (`git checkout -b feature/amazing-feature`) 🌿
80
- 3. 提交您的更改 (`git commit -m 'Add some amazing feature'`) 💾
81
- 4. 推送到分支 (`git push origin feature/amazing-feature`) 🚀
82
- 5. 打开一个 Pull Request 📥
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
- 本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情 📑
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
- - GitHub: [https://github.com/Eiog/@oiij/emoji-picker](https://github.com/Eiog/@oiij/emoji-picker) 🌟
250
+ [在线文档](https://oiij-use.vercel.app/emoji-picker/emoji-picker)
package/dist/index.d.mts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as _vueuse_core0 from "@vueuse/core";
2
2
  import { Picker } from "emoji-mart";
3
- import * as vue0 from "vue";
3
+ import * as vue from "vue";
4
4
  import { MaybeRefOrGetter, TemplateRef } from "vue";
5
5
 
6
6
  //#region src/index.d.ts
@@ -197,7 +197,7 @@ type UseEmojiPickerOptions = {
197
197
  * import { useEmojiPicker } from '@oiij/emoji-picker'
198
198
  *
199
199
  * const pickerRef = ref()
200
- * const { emojiPickerInst, updateTheme } = useEmojiPicker(pickerRef, {
200
+ * const { emojiPickerInst, setDarkMode } = useEmojiPicker(pickerRef, {
201
201
  * darkMode: false,
202
202
  * language: 'zh',
203
203
  * emojiPickerOptions: {
@@ -214,13 +214,13 @@ type UseEmojiPickerOptions = {
214
214
  * ```
215
215
  */
216
216
  declare function useEmojiPicker(templateRef: TemplateRef<HTMLElement>, options?: UseEmojiPickerOptions): {
217
- templateRef: Readonly<vue0.ShallowRef<HTMLElement | null>>;
218
- darkMode: vue0.Ref<boolean | undefined, boolean | undefined>;
219
- language: vue0.Ref<"zh" | "en" | undefined, "zh" | "en" | undefined>;
220
- emojiPickerInst: vue0.ShallowRef<Picker | null, Picker | null>;
221
- updateTheme: (darkMode?: boolean) => void;
222
- updateLanguage: (language?: "zh" | "en") => void;
223
- onRender: _vueuse_core0.EventHookOn<[Picker]>;
217
+ templateRef: Readonly<vue.ShallowRef<HTMLElement | null>>;
218
+ darkMode: vue.Ref<boolean | undefined, boolean | undefined>;
219
+ language: vue.Ref<"zh" | "en" | undefined, "zh" | "en" | undefined>;
220
+ emojiPickerInst: vue.ShallowRef<Picker | null, Picker | null>;
221
+ setDarkMode: (darkMode?: boolean) => void;
222
+ setLanguage: (language?: "zh" | "en") => void;
223
+ onRendered: _vueuse_core0.EventHookOn<[Picker]>;
224
224
  };
225
225
  /**
226
226
  * 使用表情选择器返回值类型
package/dist/index.mjs CHANGED
@@ -2,8 +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
-
6
- //#region ../_utils/custom-watch.ts
5
+ //#region src/_utils.ts
7
6
  function watchRefOrGetter(value, callback) {
8
7
  const refValue = ref(toValue(value));
9
8
  watchEffect(() => {
@@ -14,7 +13,6 @@ function watchRefOrGetter(value, callback) {
14
13
  });
15
14
  return refValue;
16
15
  }
17
-
18
16
  //#endregion
19
17
  //#region src/index.ts
20
18
  /**
@@ -31,7 +29,7 @@ function watchRefOrGetter(value, callback) {
31
29
  * import { useEmojiPicker } from '@oiij/emoji-picker'
32
30
  *
33
31
  * const pickerRef = ref()
34
- * const { emojiPickerInst, updateTheme } = useEmojiPicker(pickerRef, {
32
+ * const { emojiPickerInst, setDarkMode } = useEmojiPicker(pickerRef, {
35
33
  * darkMode: false,
36
34
  * language: 'zh',
37
35
  * emojiPickerOptions: {
@@ -49,8 +47,8 @@ function watchRefOrGetter(value, callback) {
49
47
  */
50
48
  function useEmojiPicker(templateRef, options) {
51
49
  const { darkMode, language, emojiPickerOptions } = options ?? {};
52
- const darkModeRef = watchRefOrGetter(darkMode, updateTheme);
53
- const languageRef = watchRefOrGetter(language, updateLanguage);
50
+ const darkModeRef = watchRefOrGetter(darkMode, () => setDarkMode());
51
+ const languageRef = watchRefOrGetter(language, () => setLanguage());
54
52
  const _options = {
55
53
  data,
56
54
  emojiButtonRadius: "6px",
@@ -67,14 +65,14 @@ function useEmojiPicker(templateRef, options) {
67
65
  ...emojiPickerOptions
68
66
  };
69
67
  const emojiPickerInst = shallowRef(null);
70
- const onRenderEvent = createEventHook();
68
+ const onRenderedEvent = createEventHook();
71
69
  /**
72
70
  * 更新主题
73
71
  *
74
72
  * @param darkMode - 是否开启暗黑模式
75
73
  */
76
- function updateTheme(darkMode) {
77
- if (darkMode !== void 0 && darkMode !== darkModeRef.value) darkModeRef.value = darkMode;
74
+ function setDarkMode(darkMode) {
75
+ if (darkMode !== void 0) darkModeRef.value = darkMode;
78
76
  _options.theme = darkModeRef.value ? "dark" : "light";
79
77
  destroy();
80
78
  render();
@@ -84,8 +82,8 @@ function useEmojiPicker(templateRef, options) {
84
82
  *
85
83
  * @param language - 语言
86
84
  */
87
- function updateLanguage(language) {
88
- if (language !== void 0 && language !== languageRef.value) languageRef.value = language;
85
+ function setLanguage(language) {
86
+ if (language !== void 0) languageRef.value = language;
89
87
  _options.locale = languageRef.value ?? "zh";
90
88
  destroy();
91
89
  render();
@@ -96,7 +94,7 @@ function useEmojiPicker(templateRef, options) {
96
94
  parent: templateRef.value,
97
95
  ..._options
98
96
  });
99
- onRenderEvent.trigger(emojiPickerInst.value);
97
+ onRenderedEvent.trigger(emojiPickerInst.value);
100
98
  }
101
99
  }
102
100
  function destroy() {
@@ -112,11 +110,10 @@ function useEmojiPicker(templateRef, options) {
112
110
  darkMode: darkModeRef,
113
111
  language: languageRef,
114
112
  emojiPickerInst,
115
- updateTheme,
116
- updateLanguage,
117
- onRender: onRenderEvent.on
113
+ setDarkMode,
114
+ setLanguage,
115
+ onRendered: onRenderedEvent.on
118
116
  };
119
117
  }
120
-
121
118
  //#endregion
122
- export { useEmojiPicker };
119
+ export { useEmojiPicker };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@oiij/emoji-picker",
3
3
  "type": "module",
4
- "version": "0.0.14",
4
+ "version": "0.0.16",
5
5
  "description": "A Vue Composable for emoji-picker",
6
6
  "author": "oiij",
7
7
  "license": "MIT",
@@ -26,15 +26,15 @@
26
26
  ],
27
27
  "peerDependencies": {
28
28
  "@emoji-mart/data": "^1.2.1",
29
- "@vueuse/core": "^14.1.0",
29
+ "@vueuse/core": "^14.2.1",
30
30
  "emoji-mart": "^5.6.0",
31
- "vue": "^3.5.27"
31
+ "vue": "^3.5.30"
32
32
  },
33
33
  "devDependencies": {
34
34
  "@emoji-mart/data": "^1.2.1",
35
- "@vueuse/core": "^14.1.0",
35
+ "@vueuse/core": "^14.2.1",
36
36
  "emoji-mart": "^5.6.0",
37
- "vue": "^3.5.27"
37
+ "vue": "^3.5.30"
38
38
  },
39
39
  "publishConfig": {
40
40
  "access": "public"