@oiij/emoji-picker 0.0.8 → 0.0.9

package/dist/{index.d.cts → index.d.mts}

@@ -1,6 +1,6 @@
-import * as vue0 from "vue";
-import { ComputedRef } from "vue";
 import { Picker } from "emoji-mart";
+import * as vue0 from "vue";
+import { ComputedRef, TemplateRef } from "vue";
 
 //#region src/index.d.ts
 interface EmojiResult {
@@ -45,8 +45,8 @@ interface EmojiPickerOptions {
   theme?: 'auto' | 'light' | 'dark';
   getSpritesheetURL?: string;
 }
-declare function useEmojiPicker(darkMode?: ComputedRef<boolean>, language?: ComputedRef<'zh' | 'en'>, options?: EmojiPickerOptions): {
-  domRef: vue0.Ref<HTMLElement | undefined, HTMLElement | undefined>;
+declare function useEmojiPicker(templateRef: TemplateRef<HTMLElement>, darkMode?: ComputedRef<boolean>, language?: ComputedRef<'zh' | 'en'>, options?: EmojiPickerOptions): {
+  templateRef: Readonly<vue0.ShallowRef<HTMLElement | null>>;
   emojiPicker: vue0.ShallowRef<Picker | null, Picker | null>;
   onRender: (fn: (editor: Picker) => void) => void;
 };

package/dist/{index.js → index.mjs}

@@ -1,9 +1,9 @@
 import data from "@emoji-mart/data";
 import { Picker } from "emoji-mart";
-import { onMounted, onUnmounted, ref, shallowRef, watch } from "vue";
+import { onMounted, onUnmounted, shallowRef, watch } from "vue";
 
 //#region src/index.ts
-function useEmojiPicker(darkMode, language, options) {
+function useEmojiPicker(templateRef, darkMode, language, options) {
 	const _options = {
 		data,
 		emojiButtonRadius: "6px",
@@ -19,24 +19,23 @@ function useEmojiPicker(darkMode, language, options) {
 		locale: language?.value,
 		...options
 	};
-	const domRef = ref();
 	const emojiPicker = shallowRef(null);
 	let onRender = null;
 	function render() {
-		if (domRef.value && !emojiPicker.value) {
+		if (templateRef.value && !emojiPicker.value) {
 			emojiPicker.value = new Picker({
-				parent: domRef.value,
+				parent: templateRef.value,
 				..._options
 			});
 			if (typeof onRender === "function") onRender(emojiPicker.value);
 		}
 	}
 	function destroy() {
-		if (!domRef.value) return;
-		domRef.value.innerHTML = "";
+		if (!templateRef.value) return;
+		templateRef.value.innerHTML = "";
 		emojiPicker.value = null;
 	}
-	watch(domRef, () => {
+	watch(templateRef, () => {
 		render();
 	});
 	watch(() => darkMode?.value, (v) => {
@@ -56,7 +55,7 @@ function useEmojiPicker(darkMode, language, options) {
 		destroy();
 	});
 	return {
-		domRef,
+		templateRef,
 		emojiPicker,
 		onRender: (fn) => {
 			onRender = fn;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oiij/emoji-picker",
   "type": "module",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "A Vue Composable for emoji-picker",
   "author": "oiij",
   "license": "MIT",
@@ -15,16 +15,9 @@
     "@oiij/use"
   ],
   "sideEffects": false,
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    }
-  },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
   "files": [
     "LICENSE",
     "README.md",
@@ -33,15 +26,15 @@
   ],
   "peerDependencies": {
     "@emoji-mart/data": "^1.2.1",
-    "@vueuse/core": "^14.0.0",
+    "@vueuse/core": "^14.1.0",
     "emoji-mart": "^5.6.0",
-    "vue": "^3.5.22"
+    "vue": "^3.5.25"
   },
   "devDependencies": {
     "@emoji-mart/data": "^1.2.1",
-    "@vueuse/core": "^14.0.0",
+    "@vueuse/core": "^14.1.0",
     "emoji-mart": "^5.6.0",
-    "vue": "^3.5.22"
+    "vue": "^3.5.25"
   },
   "publishConfig": {
     "access": "public"

package/dist/index.cjs

@@ -1,94 +0,0 @@
-//#region rolldown:runtime
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-
-//#endregion
-let __emoji_mart_data = require("@emoji-mart/data");
-__emoji_mart_data = __toESM(__emoji_mart_data);
-let emoji_mart = require("emoji-mart");
-emoji_mart = __toESM(emoji_mart);
-let vue = require("vue");
-vue = __toESM(vue);
-
-//#region src/index.ts
-function useEmojiPicker(darkMode, language, options) {
-	const _options = {
-		data: __emoji_mart_data.default,
-		emojiButtonRadius: "6px",
-		emojiButtonColors: [
-			"rgba(155,223,88,.7)",
-			"rgba(149,211,254,.7)",
-			"rgba(247,233,34,.7)",
-			"rgba(238,166,252,.7)",
-			"rgba(255,213,143,.7)",
-			"rgba(211,209,255,.7)"
-		],
-		theme: darkMode?.value ? "dark" : "light",
-		locale: language?.value,
-		...options
-	};
-	const domRef = (0, vue.ref)();
-	const emojiPicker = (0, vue.shallowRef)(null);
-	let onRender = null;
-	function render() {
-		if (domRef.value && !emojiPicker.value) {
-			emojiPicker.value = new emoji_mart.Picker({
-				parent: domRef.value,
-				..._options
-			});
-			if (typeof onRender === "function") onRender(emojiPicker.value);
-		}
-	}
-	function destroy() {
-		if (!domRef.value) return;
-		domRef.value.innerHTML = "";
-		emojiPicker.value = null;
-	}
-	(0, vue.watch)(domRef, () => {
-		render();
-	});
-	(0, vue.watch)(() => darkMode?.value, (v) => {
-		destroy();
-		_options.theme = v ? "dark" : "light";
-		render();
-	});
-	(0, vue.watch)(() => language?.value, (v) => {
-		destroy();
-		_options.locale = v ?? "zh";
-		render();
-	});
-	(0, vue.onMounted)(() => {
-		render();
-	});
-	(0, vue.onUnmounted)(() => {
-		destroy();
-	});
-	return {
-		domRef,
-		emojiPicker,
-		onRender: (fn) => {
-			onRender = fn;
-		}
-	};
-}
-
-//#endregion
-exports.useEmojiPicker = useEmojiPicker;

package/dist/index.d.ts

@@ -1,55 +0,0 @@
-import { Picker } from "emoji-mart";
-import * as vue0 from "vue";
-import { ComputedRef } from "vue";
-
-//#region src/index.d.ts
-interface EmojiResult {
-  id: string;
-  name: string;
-  native: string;
-  unified: string;
-  keywords: string[];
-  shortcodes: string;
-}
-interface 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';
-  getSpritesheetURL?: string;
-}
-declare function useEmojiPicker(darkMode?: ComputedRef<boolean>, language?: ComputedRef<'zh' | 'en'>, options?: EmojiPickerOptions): {
-  domRef: vue0.Ref<HTMLElement | undefined, HTMLElement | undefined>;
-  emojiPicker: vue0.ShallowRef<Picker | null, Picker | null>;
-  onRender: (fn: (editor: Picker) => void) => void;
-};
-type EmojiPickerReturns = ReturnType<typeof useEmojiPicker>;
-//#endregion
-export { EmojiPickerOptions, EmojiPickerReturns, EmojiResult, useEmojiPicker };