vuemoji-picker
Version:
Vue 2 and 3 lightweight emoji picker.
278 lines (271 loc) • 8.45 kB
JavaScript
;
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 __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var src_exports = {};
__export(src_exports, {
VuemojiPicker: () => VuemojiPicker_default,
useDatabase: () => useDatabase,
useEmojiByGroup: () => useEmojiByGroup,
useEmojiBySearchQuery: () => useEmojiBySearchQuery,
useEmojiByShortcode: () => useEmojiByShortcode,
useEmojiByUnicodeOrName: () => useEmojiByUnicodeOrName
});
module.exports = __toCommonJS(src_exports);
// src/components/VuemojiPicker.ts
var import_picker = __toESM(require("emoji-picker-element/picker"), 1);
var import_vue_demi2 = require("vue-demi");
// src/utils/dark-mode.ts
function isDarkMode() {
return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
}
// src/utils/h-demi.ts
var import_vue_demi = require("vue-demi");
function adaptOnsV3(ons) {
if (!ons)
return null;
return Object.entries(ons).reduce((ret, [key, handler]) => {
key = key.charAt(0).toUpperCase() + key.slice(1);
key = `on${key}`;
return { ...ret, [key]: handler };
}, {});
}
function h(type, options = {}, chidren) {
if (import_vue_demi.isVue2)
return (0, import_vue_demi.h)(type, options, chidren);
const { props, domProps, on, ...extraOptions } = options;
const ons = adaptOnsV3(on);
const params = { ...extraOptions, ...props, ...domProps, ...ons };
return (0, import_vue_demi.h)(type, params, chidren);
}
var h_demi_default = h;
// src/utils/to-dashes.ts
function toDashes(key) {
return key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
}
// src/components/VuemojiPicker.ts
if (import_vue_demi2.isVue2)
import_vue_demi2.Vue2.config.ignoredElements.push("emoji-picker");
var VuemojiPicker_default = (0, import_vue_demi2.defineComponent)({
props: {
isDark: {
type: Boolean,
required: false,
default: isDarkMode()
},
skinToneEmoji: String,
customEmoji: Array,
dataSource: String,
locale: String,
customCategorySorting: Function,
i18n: Object,
pickerStyle: Object
},
emits: ["emojiClick", "skinToneChange"],
data: () => ({
picker: new import_picker.default()
}),
watch: {
$props: {
handler() {
this.updatePickerProps();
},
deep: true
}
},
mounted() {
const root = this.$refs.root;
this.updatePickerProps();
root.appendChild(this.picker);
this.picker.addEventListener("emoji-click", this.handleClick);
this.picker.addEventListener("skin-tone-change", this.handleSkinToneChange);
},
beforeUnmount() {
this.picker.removeEventListener("emoji-click", this.handleClick);
this.picker.removeEventListener("skin-tone-change", this.handleSkinToneChange);
},
methods: {
handleClick(event) {
this.$emit("emojiClick", event.detail);
},
handleSkinToneChange(event) {
this.$emit("skinToneChange", event.detail);
},
updatePickerProps() {
const {
skinToneEmoji,
dataSource,
locale,
customEmoji,
i18n,
customCategorySorting,
isDark
} = this.$props;
if (skinToneEmoji)
this.picker.skinToneEmoji = skinToneEmoji;
if (dataSource)
this.picker.dataSource = dataSource;
if (locale)
this.picker.locale = locale;
if (customEmoji)
this.picker.customEmoji = customEmoji;
if (i18n)
this.picker.i18n = i18n;
if (customCategorySorting)
this.picker.customCategorySorting = customCategorySorting;
this.picker.classList.toggle("dark", isDark);
this.picker.classList.toggle("light", !isDark);
this.updatePickerStyle();
},
updatePickerStyle() {
if (this.pickerStyle && typeof this.pickerStyle === "object") {
Object.keys(this.pickerStyle).forEach((key) => {
if (key === "height" && this.pickerStyle?.height)
this.picker.style.setProperty("height", this.pickerStyle.height);
else if (key === "width" && this.pickerStyle?.width)
this.picker.style.setProperty("width", this.pickerStyle.width);
else
this.picker.style.setProperty(`--${toDashes(key)}`, this.pickerStyle[key]);
});
}
}
},
render() {
return h_demi_default("div", {
ref: "root"
});
}
});
// src/composables/useDatabase.ts
var import_database = __toESM(require("emoji-picker-element/database"), 1);
var import_vue_demi3 = require("vue-demi");
function useDatabase() {
return new import_database.default();
}
function useMounted() {
const isMounted = (0, import_vue_demi3.ref)(false);
(0, import_vue_demi3.onMounted)(() => {
isMounted.value = true;
});
return isMounted;
}
function useEmojiBySearchQuery(query) {
const db = useDatabase();
const isMounted = useMounted();
const result = (0, import_vue_demi3.ref)([]);
const loading = (0, import_vue_demi3.ref)(false);
(0, import_vue_demi3.watchEffect)(async () => {
if (!isMounted.value)
return;
loading.value = true;
result.value = [];
try {
result.value = await db.getEmojiBySearchQuery((0, import_vue_demi3.unref)(query));
} catch {
} finally {
loading.value = false;
}
});
return {
result,
loading
};
}
function useEmojiByGroup(group) {
const db = useDatabase();
const isMounted = useMounted();
const result = (0, import_vue_demi3.ref)([]);
const loading = (0, import_vue_demi3.ref)(false);
(0, import_vue_demi3.watchEffect)(async () => {
if (!isMounted.value)
return;
loading.value = true;
result.value = [];
try {
result.value = await db.getEmojiByGroup((0, import_vue_demi3.unref)(group));
} catch {
}
loading.value = false;
});
return {
result,
loading
};
}
function useEmojiByShortcode(shortcode) {
const db = useDatabase();
const isMounted = useMounted();
const result = (0, import_vue_demi3.ref)(null);
const loading = (0, import_vue_demi3.ref)(false);
(0, import_vue_demi3.watchEffect)(async () => {
if (!isMounted.value)
return;
loading.value = true;
result.value = null;
try {
result.value = await db.getEmojiByShortcode((0, import_vue_demi3.unref)(shortcode));
} catch {
}
loading.value = false;
});
return {
result,
loading
};
}
function useEmojiByUnicodeOrName(unicodeOrName) {
const db = useDatabase();
const isMounted = useMounted();
const result = (0, import_vue_demi3.ref)(null);
const loading = (0, import_vue_demi3.ref)(false);
(0, import_vue_demi3.watchEffect)(async () => {
if (!isMounted.value)
return;
loading.value = true;
result.value = null;
try {
result.value = await db.getEmojiByUnicodeOrName((0, import_vue_demi3.unref)(unicodeOrName));
} catch {
}
loading.value = false;
});
return {
result,
loading
};
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
VuemojiPicker,
useDatabase,
useEmojiByGroup,
useEmojiBySearchQuery,
useEmojiByShortcode,
useEmojiByUnicodeOrName
});
//# sourceMappingURL=index.cjs.map