@oiij/emoji-picker 0.0.13 → 0.0.15

package/README.md

@@ -1,12 +1,90 @@
-# Use EmojiPicker
+# Use EmojiPicker 🚀
 
 [![NPM version](https://img.shields.io/npm/v/@oiij/emoji-picker)](https://www.npmjs.com/package/@oiij/emoji-picker)
-[![MIT-license](https://img.shields.io/npm/l/@oiij/emoji-picker)](https://github.com/Eiog/@oiij/emoji-picker/blob/main/LICENSE)
+[![MIT-license](https://img.shields.io/npm/l/@oiij/emoji-picker)](https://github.com/oiij/use/blob/main/packages/emoji-picker/LICENSE)
 
-## Usage
+## 项目简介 📦
+
+Use EmojiPicker 是一个功能完善的表情选择器组件，为 Vue 3 应用提供丰富的表情符号选择功能，帮助用户快速选择和插入表情。
+
+## 功能特点 ✨
+
+### 表情丰富 😊
+
+- 🎭 提供大量表情符号
+- 🔍 支持搜索和分类
+- 🎨 可自定义主题和样式
+
+### 模块化设计 🧩
+
+- 📁 采用模块化架构，组件独立封装
+- 📦 支持按需导入，减小打包体积
+- 🔧 清晰的文件结构，易于维护和扩展
+
+### 类型安全 🔒
+
+- 📝 完整的 TypeScript 类型定义
+- 💡 提供准确的类型推断和代码提示
+- 🎯 支持 Vue 3 的 Composition API 类型系统
+
+### 轻量高效 ⚡
+
+- 🚀 核心代码精简，无额外依赖
+- 🏃 优化的性能表现，最小化运行时开销
+- 📦 支持 Tree Shaking，进一步减小打包体积
+
+## 安装 📥
+
+### 使用 pnpm 🐱
 
 ```bash
 pnpm add @oiij/emoji-picker
 ```
 
-[在线文档](https://oiij-use.vercel.app/examples/emoji-picker/started)
+### 使用 npm 📦
+
+```bash
+npm install @oiij/emoji-picker
+```
+
+### 使用 yarn 🧶
+
+```bash
+yarn add @oiij/emoji-picker
+```
+
+## 快速开始 🌟
+
+### 基础使用
+
+```vue
+<script setup>
+import { UseEmojiPicker } from '@oiij/emoji-picker'
+</script>
+
+<template>
+  <UseEmojiPicker />
+</template>
+```
+
+## 在线文档 📚
+
+[在线文档](https://oiij-use.vercel.app/emoji-picker/emoji-picker) 📖
+
+## 贡献指南 🤝
+
+欢迎贡献代码、报告问题或提出新功能建议！
+
+1. Fork 本仓库 🍴
+2. 创建您的特性分支 (`git checkout -b feature/amazing-feature`) 🌿
+3. 提交您的更改 (`git commit -m 'Add some amazing feature'`) 💾
+4. 推送到分支 (`git push origin feature/amazing-feature`) 🚀
+5. 打开一个 Pull Request 📥
+
+## 许可证 📄
+
+本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情 📑
+
+## 联系方式 📞
+
+- GitHub: [https://github.com/Eiog/@oiij/emoji-picker](https://github.com/Eiog/@oiij/emoji-picker) 🌟

package/dist/index.d.mts

@@ -1,65 +1,230 @@
 import * as _vueuse_core0 from "@vueuse/core";
 import { Picker } from "emoji-mart";
-import * as vue0 from "vue";
+import * as vue from "vue";
 import { MaybeRefOrGetter, TemplateRef } from "vue";
 
 //#region src/index.d.ts
+/**
+ * 表情结果类型
+ */
 type EmojiResult = {
+  /**
+   * 表情 ID
+   */
   id: string;
+  /**
+   * 表情名称
+   */
   name: string;
+  /**
+   * 原生表情
+   */
   native: string;
+  /**
+   * 统一编码
+   */
   unified: string;
+  /**
+   * 关键词
+   */
   keywords: string[];
+  /**
+   * 短代码
+   */
   shortcodes: string;
 };
+/**
+ * 表情选择器选项类型
+ */
 type EmojiPickerOptions = {
+  /**
+   * 父元素
+   */
   parent?: HTMLElement;
+  /**
+   * 表情数据
+   */
   data?: object;
+  /**
+   * 国际化配置
+   */
   i18n?: object;
+  /**
+   * 分类
+   */
   categories?: ('frequent' | 'people' | 'nature' | 'food' | 'activity' | 'places' | 'objects' | 'symbols' | 'flags')[];
+  /**
+   * 自定义表情
+   */
   custom?: [];
+  /**
+   * 选择表情回调
+   */
   onEmojiSelect?: (emoji: EmojiResult) => void;
+  /**
+   * 点击外部回调
+   */
   onClickOutside?: () => void;
+  /**
+   * 添加自定义表情回调
+   */
   onAddCustomEmoji?: (emoji: EmojiResult) => void;
+  /**
+   * 是否自动聚焦
+   */
   autoFocus?: boolean;
+  /**
+   * 分类图标
+   */
   categoryIcons?: object;
+  /**
+   * 动态宽度
+   */
   dynamicWidth?: boolean;
+  /**
+   * 表情按钮颜色
+   */
   emojiButtonColors?: string[];
+  /**
+   * 表情按钮圆角
+   */
   emojiButtonRadius?: string;
+  /**
+   * 表情按钮大小
+   */
   emojiButtonSize?: number;
+  /**
+   * 表情大小
+   */
   emojiSize?: number;
+  /**
+   * 表情版本
+   */
   emojiVersion?: 1 | 2 | 3 | 4 | 5 | 11 | 12 | 12.1 | 13 | 13.1 | 14 | 15;
+  /**
+   * 排除表情
+   */
   exceptEmojis?: [];
+  /**
+   * 图标样式
+   */
   icons?: 'aut' | 'outline' | 'solid';
+  /**
+   * 语言
+   */
   locale?: 'en' | 'ar' | 'be' | 'cs' | 'de' | 'es' | 'fa' | 'fi' | 'fr' | 'hi' | 'it' | 'ja' | 'ko' | 'nl' | 'pl' | 'pt' | 'ru' | 'sa' | 'tr' | 'uk' | 'vi' | 'zh';
+  /**
+   * 最大常用行数
+   */
   maxFrequentRows?: number;
+  /**
+   * 导航位置
+   */
   navPosition?: 'top' | 'bottom' | 'none';
+  /**
+   * 无国家旗帜
+   */
   noCountryFlags?: boolean;
+  /**
+   * 无结果表情
+   */
   noResultsEmoji?: string;
+  /**
+   * 每行数量
+   */
   perLine?: number;
+  /**
+   * 预览表情
+   */
   previewEmoji?: 'point_up' | 'point_down';
+  /**
+   * 预览位置
+   */
   previewPosition?: 'top' | 'bottom' | 'none';
+  /**
+   * 搜索位置
+   */
   searchPosition?: 'sticky' | 'static' | 'none';
+  /**
+   * 表情集
+   */
   set?: 'native' | 'apple' | 'facebook' | 'google' | 'twitter';
+  /**
+   * 肤色
+   */
   skin?: 1 | 2 | 3 | 4 | 5 | 6;
+  /**
+   * 肤色位置
+   */
   skinTonePosition?: 'preview' | 'search' | 'none';
+  /**
+   * 主题
+   */
   theme?: 'auto' | 'light' | 'dark';
+  /**
+   * 获取精灵图 URL
+   */
   getSpritesheetURL?: string;
 };
+/**
+ * 使用表情选择器选项类型
+ */
 type UseEmojiPickerOptions = {
+  /**
+   * 是否开启暗黑模式
+   */
   darkMode?: MaybeRefOrGetter<boolean>;
+  /**
+   * 语言
+   */
   language?: MaybeRefOrGetter<'zh' | 'en'>;
+  /**
+   * 表情选择器选项
+   */
   emojiPickerOptions?: EmojiPickerOptions;
 };
+/**
+ * 使用表情选择器
+ *
+ * @param templateRef - 表情选择器容器的模板引用
+ * @param options - 表情选择器选项
+ * @returns 表情选择器实例和工具方法
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useEmojiPicker } from '@oiij/emoji-picker'
+ *
+ * const pickerRef = ref()
+ * const { emojiPickerInst, setDarkMode } = useEmojiPicker(pickerRef, {
+ *   darkMode: false,
+ *   language: 'zh',
+ *   emojiPickerOptions: {
+ *     onEmojiSelect: (emoji) => {
+ *       console.log('选择了表情', emoji)
+ *     }
+ *   }
+ * })
+ * </script>
+ *
+ * <template>
+ *   <div ref="pickerRef"></div>
+ * </template>
+ * ```
+ */
 declare function useEmojiPicker(templateRef: TemplateRef<HTMLElement>, options?: UseEmojiPickerOptions): {
-  templateRef: Readonly<vue0.ShallowRef<HTMLElement | null>>;
-  darkMode: vue0.Ref<boolean | undefined, boolean | undefined>;
-  language: vue0.Ref<"zh" | "en" | undefined, "zh" | "en" | undefined>;
-  emojiPickerInst: vue0.ShallowRef<Picker | null, Picker | null>;
-  updateTheme: (darkMode?: boolean) => void;
-  updateLanguage: (language?: "zh" | "en") => void;
+  templateRef: Readonly<vue.ShallowRef<HTMLElement | null>>;
+  darkMode: vue.Ref<boolean | undefined, boolean | undefined>;
+  language: vue.Ref<"zh" | "en" | undefined, "zh" | "en" | undefined>;
+  emojiPickerInst: vue.ShallowRef<Picker | null, Picker | null>;
+  setDarkMode: (darkMode?: boolean) => void;
+  setLanguage: (language?: "zh" | "en") => void;
   onRender: _vueuse_core0.EventHookOn<[Picker]>;
 };
+/**
+ * 使用表情选择器返回值类型
+ */
 type UseEmojiPickerReturns = ReturnType<typeof useEmojiPicker>;
 //#endregion
 export { EmojiPickerOptions, EmojiResult, UseEmojiPickerOptions, UseEmojiPickerReturns, useEmojiPicker };

package/dist/index.mjs

@@ -2,7 +2,6 @@ import data from "@emoji-mart/data";
 import { createEventHook, watchOnce } from "@vueuse/core";
 import { Picker } from "emoji-mart";
 import { onUnmounted, ref, shallowRef, toValue, watch, watchEffect } from "vue";
-
 //#region ../_utils/custom-watch.ts
 function watchRefOrGetter(value, callback) {
 	const refValue = ref(toValue(value));
@@ -14,13 +13,42 @@ function watchRefOrGetter(value, callback) {
 	});
 	return refValue;
 }
-
 //#endregion
 //#region src/index.ts
+/**
+* 使用表情选择器
+*
+* @param templateRef - 表情选择器容器的模板引用
+* @param options - 表情选择器选项
+* @returns 表情选择器实例和工具方法
+*
+* @example
+* ```vue
+* <script setup>
+* import { ref } from 'vue'
+* import { useEmojiPicker } from '@oiij/emoji-picker'
+*
+* const pickerRef = ref()
+* const { emojiPickerInst, setDarkMode } = useEmojiPicker(pickerRef, {
+*   darkMode: false,
+*   language: 'zh',
+*   emojiPickerOptions: {
+*     onEmojiSelect: (emoji) => {
+*       console.log('选择了表情', emoji)
+*     }
+*   }
+* })
+* <\/script>
+*
+* <template>
+*   <div ref="pickerRef"></div>
+* </template>
+* ```
+*/
 function useEmojiPicker(templateRef, options) {
 	const { darkMode, language, emojiPickerOptions } = options ?? {};
-	const darkModeRef = watchRefOrGetter(darkMode, updateTheme);
-	const languageRef = watchRefOrGetter(language, updateLanguage);
+	const darkModeRef = watchRefOrGetter(darkMode, () => setDarkMode());
+	const languageRef = watchRefOrGetter(language, () => setLanguage());
 	const _options = {
 		data,
 		emojiButtonRadius: "6px",
@@ -38,27 +66,35 @@ function useEmojiPicker(templateRef, options) {
 	};
 	const emojiPickerInst = shallowRef(null);
 	const onRenderEvent = createEventHook();
-	function updateTheme(darkMode) {
-		if (darkMode) darkModeRef.value = darkMode;
+	/**
+	* 更新主题
+	*
+	* @param darkMode - 是否开启暗黑模式
+	*/
+	function setDarkMode(darkMode) {
+		if (darkMode !== void 0) darkModeRef.value = darkMode;
 		_options.theme = darkModeRef.value ? "dark" : "light";
 		destroy();
 		render();
 	}
-	function updateLanguage(language) {
-		if (language) languageRef.value = language;
+	/**
+	* 更新语言
+	*
+	* @param language - 语言
+	*/
+	function setLanguage(language) {
+		if (language !== void 0) languageRef.value = language;
 		_options.locale = languageRef.value ?? "zh";
 		destroy();
 		render();
 	}
 	function render() {
-		if (templateRef.value) {
-			if (!emojiPickerInst.value) {
-				emojiPickerInst.value = new Picker({
-					parent: templateRef.value,
-					..._options
-				});
-				onRenderEvent.trigger(emojiPickerInst.value);
-			}
+		if (templateRef.value && !emojiPickerInst.value) {
+			emojiPickerInst.value = new Picker({
+				parent: templateRef.value,
+				..._options
+			});
+			onRenderEvent.trigger(emojiPickerInst.value);
 		}
 	}
 	function destroy() {
@@ -74,11 +110,10 @@ function useEmojiPicker(templateRef, options) {
 		darkMode: darkModeRef,
 		language: languageRef,
 		emojiPickerInst,
-		updateTheme,
-		updateLanguage,
+		setDarkMode,
+		setLanguage,
 		onRender: onRenderEvent.on
 	};
 }
-
 //#endregion
-export { useEmojiPicker };
+export { useEmojiPicker };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oiij/emoji-picker",
   "type": "module",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "A Vue Composable for emoji-picker",
   "author": "oiij",
   "license": "MIT",
@@ -26,15 +26,15 @@
   ],
   "peerDependencies": {
     "@emoji-mart/data": "^1.2.1",
-    "@vueuse/core": "^14.1.0",
+    "@vueuse/core": "^14.2.1",
     "emoji-mart": "^5.6.0",
-    "vue": "^3.5.27"
+    "vue": "^3.5.30"
   },
   "devDependencies": {
     "@emoji-mart/data": "^1.2.1",
-    "@vueuse/core": "^14.1.0",
+    "@vueuse/core": "^14.2.1",
     "emoji-mart": "^5.6.0",
-    "vue": "^3.5.27"
+    "vue": "^3.5.30"
   },
   "publishConfig": {
     "access": "public"