"use strict";
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