@oiij/emoji-picker 0.0.11 → 0.0.12

package/dist/index.d.mts

@@ -1,6 +1,7 @@
+import * as _vueuse_core0 from "@vueuse/core";
 import { Picker } from "emoji-mart";
 import * as vue0 from "vue";
-import { ComputedRef, TemplateRef } from "vue";
+import { MaybeRefOrGetter, TemplateRef } from "vue";
 
 //#region src/index.d.ts
 type EmojiResult = {
@@ -45,11 +46,20 @@ type EmojiPickerOptions = {
   theme?: 'auto' | 'light' | 'dark';
   getSpritesheetURL?: string;
 };
-declare function useEmojiPicker(templateRef: TemplateRef<HTMLElement>, darkMode?: ComputedRef<boolean>, language?: ComputedRef<'zh' | 'en'>, options?: EmojiPickerOptions): {
+type UseEmojiPickerOptions = {
+  darkMode?: MaybeRefOrGetter<boolean>;
+  language?: MaybeRefOrGetter<'zh' | 'en'>;
+  emojiPickerOptions?: EmojiPickerOptions;
+};
+declare function useEmojiPicker(templateRef: TemplateRef<HTMLElement>, options?: UseEmojiPickerOptions): {
   templateRef: Readonly<vue0.ShallowRef<HTMLElement | null>>;
-  emojiPicker: vue0.ShallowRef<Picker | null, Picker | null>;
-  onRender: (fn: (editor: Picker) => void) => void;
+  darkModeRef: vue0.Ref<boolean | undefined, boolean | undefined>;
+  languageRef: vue0.Ref<"zh" | "en" | undefined, "zh" | "en" | undefined>;
+  emojiPickerInst: vue0.ShallowRef<Picker | null, Picker | null>;
+  updateTheme: (darkMode?: boolean) => void;
+  updateLanguage: (language?: "zh" | "en") => void;
+  onRender: _vueuse_core0.EventHookOn<[Picker]>;
 };
-type EmojiPickerReturns = ReturnType<typeof useEmojiPicker>;
+type UseEmojiPickerReturns = ReturnType<typeof useEmojiPicker>;
 //#endregion
-export { EmojiPickerOptions, EmojiPickerReturns, EmojiResult, useEmojiPicker };
+export { EmojiPickerOptions, EmojiResult, UseEmojiPickerOptions, UseEmojiPickerReturns, useEmojiPicker };

package/dist/index.mjs

@@ -1,9 +1,26 @@
 import data from "@emoji-mart/data";
+import { createEventHook, watchOnce } from "@vueuse/core";
 import { Picker } from "emoji-mart";
-import { onMounted, onUnmounted, shallowRef, watch } from "vue";
+import { onUnmounted, ref, shallowRef, toValue, watch, watchEffect } from "vue";
 
+//#region ../_utils/custom-watch.ts
+function watchRefOrGetter(value, callback) {
+	const refValue = ref(toValue(value));
+	watchEffect(() => {
+		refValue.value = toValue(value);
+	});
+	watch(refValue, (val) => {
+		callback?.(val);
+	});
+	return refValue;
+}
+
+//#endregion
 //#region src/index.ts
-function useEmojiPicker(templateRef, darkMode, language, options) {
+function useEmojiPicker(templateRef, options) {
+	const { darkMode, language, emojiPickerOptions } = options ?? {};
+	const darkModeRef = watchRefOrGetter(darkMode, updateTheme);
+	const languageRef = watchRefOrGetter(language, updateLanguage);
 	const _options = {
 		data,
 		emojiButtonRadius: "6px",
@@ -15,51 +32,51 @@ function useEmojiPicker(templateRef, darkMode, language, options) {
 			"rgba(255,213,143,.7)",
 			"rgba(211,209,255,.7)"
 		],
-		theme: darkMode?.value ? "dark" : "light",
-		locale: language?.value,
-		...options
+		theme: darkModeRef.value ? "dark" : "light",
+		locale: languageRef.value,
+		...emojiPickerOptions
 	};
-	const emojiPicker = shallowRef(null);
-	let onRender = null;
+	const emojiPickerInst = shallowRef(null);
+	const onRenderEvent = createEventHook();
+	function updateTheme(darkMode) {
+		if (darkMode) darkModeRef.value = darkMode;
+		_options.theme = darkModeRef.value ? "dark" : "light";
+		destroy();
+		render();
+	}
+	function updateLanguage(language) {
+		if (language) languageRef.value = language;
+		_options.locale = languageRef.value ?? "zh";
+		destroy();
+		render();
+	}
 	function render() {
-		if (templateRef.value && !emojiPicker.value) {
-			emojiPicker.value = new Picker({
-				parent: templateRef.value,
-				..._options
-			});
-			if (typeof onRender === "function") onRender(emojiPicker.value);
+		if (templateRef.value) {
+			if (!emojiPickerInst.value) {
+				emojiPickerInst.value = new Picker({
+					parent: templateRef.value,
+					..._options
+				});
+				onRenderEvent.trigger(emojiPickerInst.value);
+			}
 		}
 	}
 	function destroy() {
-		if (!templateRef.value) return;
-		templateRef.value.innerHTML = "";
-		emojiPicker.value = null;
+		emojiPickerInst.value = null;
+		if (templateRef.value) templateRef.value.innerHTML = "";
 	}
-	watch(templateRef, () => {
-		render();
-	});
-	watch(() => darkMode?.value, (v) => {
-		destroy();
-		_options.theme = v ? "dark" : "light";
-		render();
-	});
-	watch(() => language?.value, (v) => {
-		destroy();
-		_options.locale = v ?? "zh";
-		render();
-	});
-	onMounted(() => {
-		render();
-	});
+	watchOnce(templateRef, render);
 	onUnmounted(() => {
 		destroy();
 	});
 	return {
 		templateRef,
-		emojiPicker,
-		onRender: (fn) => {
-			onRender = fn;
-		}
+		darkModeRef,
+		languageRef,
+		emojiPickerInst,
+		updateTheme,
+		updateLanguage,
+		onRender: onRenderEvent.on
 	};
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oiij/emoji-picker",
   "type": "module",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "A Vue Composable for emoji-picker",
   "author": "oiij",
   "license": "MIT",
@@ -28,13 +28,13 @@
     "@emoji-mart/data": "^1.2.1",
     "@vueuse/core": "^14.1.0",
     "emoji-mart": "^5.6.0",
-    "vue": "^3.5.26"
+    "vue": "^3.5.27"
   },
   "devDependencies": {
     "@emoji-mart/data": "^1.2.1",
     "@vueuse/core": "^14.1.0",
     "emoji-mart": "^5.6.0",
-    "vue": "^3.5.26"
+    "vue": "^3.5.27"
   },
   "publishConfig": {
     "access": "public"