vuemoji-picker/dist/index.cjs.map

Vue 2 and 3 lightweight emoji picker.

{"version":3,"sources":["../src/index.ts","../src/components/VuemojiPicker.ts","../src/utils/dark-mode.ts","../src/utils/h-demi.ts","../src/utils/to-dashes.ts","../src/composables/useDatabase.ts"],"sourcesContent":["import VuemojiPicker from './components/VuemojiPicker'\n\nexport interface VuemojiPickerStyle {\n  width?: string\n  height?: string\n  background?: string\n  borderColor?: string\n  borderSize?: string\n  buttonActiveBackground?: string\n  buttonHoverBackground?: string\n  categoryEmojiPadding?: string\n  categoryEmojiSize?: string\n  categoryFontColor?: string\n  categoryFontSize?: string\n  emojiPadding?: string\n  emojiSize?: string\n  indicatorColor?: string\n  indicatorHeight?: string\n  inputBorderColor?: string\n  inputBorderRadius?: string\n  inputFontColor?: string\n  inputFontSize?: string\n  inputLineHeight?: string\n  inputPadding?: string\n  inputPlaceholderColor?: string\n  numColumns?: string\n  outlineColor?: string\n  outlineSize?: string\n  skintoneBorderRadius?: string\n}\n\nexport * from './composables/useDatabase'\n\nexport {\n  VuemojiPicker,\n}\n\nexport type {\n  CustomEmoji,\n  DatabaseConstructorOptions,\n  EmojiClickEventDetail,\n  EmojiSkin,\n  I18n,\n  I18nCategories,\n  NativeEmoji,\n  PickerConstructorOptions,\n  SkinTone,\n  SkinToneChangeEventDetail,\n} from 'emoji-picker-element/shared'\n","import type {\n  EmojiClickEvent,\n  PickerConstructorOptions,\n  SkinToneChangeEvent,\n} from 'emoji-picker-element/shared'\nimport type { PropType } from 'vue-demi'\nimport type { VuemojiPickerStyle } from '../'\nimport Picker from 'emoji-picker-element/picker'\n\nimport { defineComponent, isVue2, Vue2 } from 'vue-demi'\nimport isDarkMode from '../utils/dark-mode'\nimport h from '../utils/h-demi'\nimport toDashes from '../utils/to-dashes'\n\nif (isVue2)\n  Vue2.config.ignoredElements.push('emoji-picker')\n\nexport default defineComponent({\n  props: {\n    isDark: {\n      type: Boolean,\n      required: false,\n      default: isDarkMode(),\n    },\n    skinToneEmoji: String,\n    customEmoji: Array as PropType<PickerConstructorOptions['customEmoji']>,\n    dataSource: String,\n    locale: String,\n    customCategorySorting: Function as PropType<(a: string, b: string) => number>,\n    i18n: Object as PropType<PickerConstructorOptions['i18n']>,\n    pickerStyle: Object as PropType<VuemojiPickerStyle>,\n  },\n  emits: ['emojiClick', 'skinToneChange'],\n  data: () => ({\n    picker: new Picker(),\n  }),\n  watch: {\n    $props: {\n      handler() {\n        this.updatePickerProps()\n      },\n      deep: true,\n    },\n  },\n  mounted() {\n    const root = this.$refs.root as HTMLDivElement\n    this.updatePickerProps()\n    root.appendChild(this.picker)\n    this.picker.addEventListener('emoji-click', this.handleClick)\n    this.picker.addEventListener('skin-tone-change', this.handleSkinToneChange)\n  },\n  beforeUnmount() {\n    this.picker.removeEventListener('emoji-click', this.handleClick)\n    this.picker.removeEventListener('skin-tone-change', this.handleSkinToneChange)\n  },\n  methods: {\n    handleClick(event: EmojiClickEvent) {\n      this.$emit('emojiClick', event.detail)\n    },\n    handleSkinToneChange(event: SkinToneChangeEvent) {\n      this.$emit('skinToneChange', event.detail)\n    },\n    updatePickerProps() {\n      const {\n        skinToneEmoji,\n        dataSource,\n        locale,\n        customEmoji,\n        i18n,\n        customCategorySorting,\n        isDark,\n      } = this.$props\n      if (skinToneEmoji)\n        this.picker.skinToneEmoji = skinToneEmoji\n\n      if (dataSource)\n        this.picker.dataSource = dataSource\n\n      if (locale)\n        this.picker.locale = locale\n\n      if (customEmoji)\n        this.picker.customEmoji = customEmoji\n\n      if (i18n)\n        this.picker.i18n = i18n\n\n      if (customCategorySorting)\n        this.picker.customCategorySorting = customCategorySorting\n\n      this.picker.classList.toggle('dark', isDark)\n      this.picker.classList.toggle('light', !isDark)\n      this.updatePickerStyle()\n    },\n    updatePickerStyle() {\n      if (this.pickerStyle && typeof this.pickerStyle === 'object') {\n        Object.keys(this.pickerStyle).forEach((key) => {\n          if (key === 'height' && this.pickerStyle?.height)\n            this.picker.style.setProperty('height', this.pickerStyle.height)\n\n          else if (key === 'width' && this.pickerStyle?.width)\n            this.picker.style.setProperty('width', this.pickerStyle.width)\n\n          else\n            // @ts-expect-error: type\n            this.picker.style.setProperty(`--${toDashes(key)}`, this.pickerStyle[key])\n        })\n      }\n    },\n  },\n  render() {\n    return h('div', {\n      ref: 'root',\n    })\n  },\n})\n","export default function isDarkMode() {\n  return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches\n}\n","import { h as hDemi, isVue2 } from 'vue-demi'\n\ninterface Options {\n  props?: object\n  domProps?: object\n  on?: object\n}\n\nfunction adaptOnsV3(ons: object) {\n  if (!ons)\n    return null\n  return Object.entries(ons).reduce((ret, [key, handler]) => {\n    key = key.charAt(0).toUpperCase() + key.slice(1)\n    key = `on${key}`\n    return { ...ret, [key]: handler }\n  }, {})\n}\n\nfunction h(type: string | object, options: Options & any = {}, chidren?: any) {\n  if (isVue2)\n    return hDemi(type, options, chidren)\n\n  const { props, domProps, on, ...extraOptions } = options\n\n  const ons = adaptOnsV3(on)\n  const params = { ...extraOptions, ...props, ...domProps, ...ons }\n  return hDemi(type, params, chidren)\n}\n\nexport default h\n","export default function toDashes(key: string) {\n  return key.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`)\n}\n","import type { Emoji, NativeEmoji } from 'emoji-picker-element/shared'\nimport Database from 'emoji-picker-element/database'\nimport { type MaybeRef, onMounted, ref, unref, watchEffect } from 'vue-demi'\n\nexport function useDatabase() {\n  return new Database()\n}\n\nfunction useMounted() {\n  const isMounted = ref(false)\n  onMounted(() => {\n    isMounted.value = true\n  })\n  return isMounted\n}\n\n/**\n * Returns all emoji matching the given search query, ordered by order.\n */\nexport function useEmojiBySearchQuery(query: MaybeRef<string>) {\n  const db = useDatabase()\n  const isMounted = useMounted()\n  const result = ref<Emoji[]>([])\n  const loading = ref(false)\n\n  watchEffect(async () => {\n    if (!isMounted.value)\n      return\n\n    loading.value = true\n    result.value = []\n    try {\n      result.value = await db.getEmojiBySearchQuery(unref(query))\n    }\n    catch {}\n    finally {\n      loading.value = false\n    }\n  })\n\n  return {\n    result,\n    loading,\n  }\n}\n\n/**\n * Returns all emoji belonging to a group, ordered by order. Only returns native emoji; custom emoji don't belong to a group.\n */\nexport function useEmojiByGroup(group: MaybeRef<number>) {\n  const db = useDatabase()\n  const isMounted = useMounted()\n  const result = ref<NativeEmoji[]>([])\n  const loading = ref(false)\n\n  watchEffect(async () => {\n    if (!isMounted.value)\n      return\n\n    loading.value = true\n    result.value = []\n    try {\n      result.value = await db.getEmojiByGroup(unref(group))\n    }\n    catch {}\n    loading.value = false\n  })\n\n  return {\n    result,\n    loading,\n  }\n}\n\n/**\n * Return a single emoji matching the shortcode, or null if not found.\n */\nexport function useEmojiByShortcode(shortcode: MaybeRef<string>) {\n  const db = useDatabase()\n  const isMounted = useMounted()\n  const result = ref<Emoji | null>(null)\n  const loading = ref(false)\n\n  watchEffect(async () => {\n    if (!isMounted.value)\n      return\n\n    loading.value = true\n    result.value = null\n    try {\n      result.value = await db.getEmojiByShortcode(unref(shortcode))\n    }\n    catch {}\n    loading.value = false\n  })\n\n  return {\n    result,\n    loading,\n  }\n}\n\n/**\n * Return a single native emoji matching the unicode string, or a custom emoji matching the name, or null if not found.\n */\nexport function useEmojiByUnicodeOrName(unicodeOrName: MaybeRef<string>) {\n  const db = useDatabase()\n  const isMounted = useMounted()\n  const result = ref<Emoji | null>(null)\n  const loading = ref(false)\n\n  watchEffect(async () => {\n    if (!isMounted.value)\n      return\n\n    loading.value = true\n    result.value = null\n    try {\n      result.value = await db.getEmojiByUnicodeOrName(unref(unicodeOrName))\n    }\n    catch {}\n    loading.value = false\n  })\n\n  return {\n    result,\n    loading,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACOA,oBAAmB;AAEnB,IAAAA,mBAA8C;;;ACT/B,SAAR,aAA8B;AACnC,SAAO,OAAO,cAAc,OAAO,WAAW,8BAA8B,EAAE;AAChF;;;ACFA,sBAAmC;AAQnC,SAAS,WAAW,KAAa;AAC/B,MAAI,CAAC;AACH,WAAO;AACT,SAAO,OAAO,QAAQ,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK,OAAO,MAAM;AACzD,UAAM,IAAI,OAAO,CAAC,EAAE,YAAY,IAAI,IAAI,MAAM,CAAC;AAC/C,UAAM,KAAK,GAAG;AACd,WAAO,EAAE,GAAG,KAAK,CAAC,GAAG,GAAG,QAAQ;AAAA,EAClC,GAAG,CAAC,CAAC;AACP;AAEA,SAAS,EAAE,MAAuB,UAAyB,CAAC,GAAG,SAAe;AAC5E,MAAI;AACF,eAAO,gBAAAC,GAAM,MAAM,SAAS,OAAO;AAErC,QAAM,EAAE,OAAO,UAAU,IAAI,GAAG,aAAa,IAAI;AAEjD,QAAM,MAAM,WAAW,EAAE;AACzB,QAAM,SAAS,EAAE,GAAG,cAAc,GAAG,OAAO,GAAG,UAAU,GAAG,IAAI;AAChE,aAAO,gBAAAA,GAAM,MAAM,QAAQ,OAAO;AACpC;AAEA,IAAO,iBAAQ;;;AC7BA,SAAR,SAA0B,KAAa;AAC5C,SAAO,IAAI,QAAQ,UAAU,OAAK,IAAI,EAAE,YAAY,CAAC,EAAE;AACzD;;;AHYA,IAAI;AACF,wBAAK,OAAO,gBAAgB,KAAK,cAAc;AAEjD,IAAO,4BAAQ,kCAAgB;AAAA,EAC7B,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS,WAAW;AAAA,IACtB;AAAA,IACA,eAAe;AAAA,IACf,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,uBAAuB;AAAA,IACvB,MAAM;AAAA,IACN,aAAa;AAAA,EACf;AAAA,EACA,OAAO,CAAC,cAAc,gBAAgB;AAAA,EACtC,MAAM,OAAO;AAAA,IACX,QAAQ,IAAI,cAAAC,QAAO;AAAA,EACrB;AAAA,EACA,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,UAAU;AACR,aAAK,kBAAkB;AAAA,MACzB;AAAA,MACA,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,UAAU;AACR,UAAM,OAAO,KAAK,MAAM;AACxB,SAAK,kBAAkB;AACvB,SAAK,YAAY,KAAK,MAAM;AAC5B,SAAK,OAAO,iBAAiB,eAAe,KAAK,WAAW;AAC5D,SAAK,OAAO,iBAAiB,oBAAoB,KAAK,oBAAoB;AAAA,EAC5E;AAAA,EACA,gBAAgB;AACd,SAAK,OAAO,oBAAoB,eAAe,KAAK,WAAW;AAC/D,SAAK,OAAO,oBAAoB,oBAAoB,KAAK,oBAAoB;AAAA,EAC/E;AAAA,EACA,SAAS;AAAA,IACP,YAAY,OAAwB;AAClC,WAAK,MAAM,cAAc,MAAM,MAAM;AAAA,IACvC;AAAA,IACA,qBAAqB,OAA4B;AAC/C,WAAK,MAAM,kBAAkB,MAAM,MAAM;AAAA,IAC3C;AAAA,IACA,oBAAoB;AAClB,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,IAAI,KAAK;AACT,UAAI;AACF,aAAK,OAAO,gBAAgB;AAE9B,UAAI;AACF,aAAK,OAAO,aAAa;AAE3B,UAAI;AACF,aAAK,OAAO,SAAS;AAEvB,UAAI;AACF,aAAK,OAAO,cAAc;AAE5B,UAAI;AACF,aAAK,OAAO,OAAO;AAErB,UAAI;AACF,aAAK,OAAO,wBAAwB;AAEtC,WAAK,OAAO,UAAU,OAAO,QAAQ,MAAM;AAC3C,WAAK,OAAO,UAAU,OAAO,SAAS,CAAC,MAAM;AAC7C,WAAK,kBAAkB;AAAA,IACzB;AAAA,IACA,oBAAoB;AAClB,UAAI,KAAK,eAAe,OAAO,KAAK,gBAAgB,UAAU;AAC5D,eAAO,KAAK,KAAK,WAAW,EAAE,QAAQ,CAAC,QAAQ;AAC7C,cAAI,QAAQ,YAAY,KAAK,aAAa;AACxC,iBAAK,OAAO,MAAM,YAAY,UAAU,KAAK,YAAY,MAAM;AAAA,mBAExD,QAAQ,WAAW,KAAK,aAAa;AAC5C,iBAAK,OAAO,MAAM,YAAY,SAAS,KAAK,YAAY,KAAK;AAAA;AAI7D,iBAAK,OAAO,MAAM,YAAY,KAAK,SAAS,GAAG,CAAC,IAAI,KAAK,YAAY,GAAG,CAAC;AAAA,QAC7E,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAAA,EACA,SAAS;AACP,WAAO,eAAE,OAAO;AAAA,MACd,KAAK;AAAA,IACP,CAAC;AAAA,EACH;AACF,CAAC;;;AIlHD,sBAAqB;AACrB,IAAAC,mBAAkE;AAE3D,SAAS,cAAc;AAC5B,SAAO,IAAI,gBAAAC,QAAS;AACtB;AAEA,SAAS,aAAa;AACpB,QAAM,gBAAY,sBAAI,KAAK;AAC3B,kCAAU,MAAM;AACd,cAAU,QAAQ;AAAA,EACpB,CAAC;AACD,SAAO;AACT;AAKO,SAAS,sBAAsB,OAAyB;AAC7D,QAAM,KAAK,YAAY;AACvB,QAAM,YAAY,WAAW;AAC7B,QAAM,aAAS,sBAAa,CAAC,CAAC;AAC9B,QAAM,cAAU,sBAAI,KAAK;AAEzB,oCAAY,YAAY;AACtB,QAAI,CAAC,UAAU;AACb;AAEF,YAAQ,QAAQ;AAChB,WAAO,QAAQ,CAAC;AAChB,QAAI;AACF,aAAO,QAAQ,MAAM,GAAG,0BAAsB,wBAAM,KAAK,CAAC;AAAA,IAC5D,QACM;AAAA,IAAC,UACP;AACE,cAAQ,QAAQ;AAAA,IAClB;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AAKO,SAAS,gBAAgB,OAAyB;AACvD,QAAM,KAAK,YAAY;AACvB,QAAM,YAAY,WAAW;AAC7B,QAAM,aAAS,sBAAmB,CAAC,CAAC;AACpC,QAAM,cAAU,sBAAI,KAAK;AAEzB,oCAAY,YAAY;AACtB,QAAI,CAAC,UAAU;AACb;AAEF,YAAQ,QAAQ;AAChB,WAAO,QAAQ,CAAC;AAChB,QAAI;AACF,aAAO,QAAQ,MAAM,GAAG,oBAAgB,wBAAM,KAAK,CAAC;AAAA,IACtD,QACM;AAAA,IAAC;AACP,YAAQ,QAAQ;AAAA,EAClB,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AAKO,SAAS,oBAAoB,WAA6B;AAC/D,QAAM,KAAK,YAAY;AACvB,QAAM,YAAY,WAAW;AAC7B,QAAM,aAAS,sBAAkB,IAAI;AACrC,QAAM,cAAU,sBAAI,KAAK;AAEzB,oCAAY,YAAY;AACtB,QAAI,CAAC,UAAU;AACb;AAEF,YAAQ,QAAQ;AAChB,WAAO,QAAQ;AACf,QAAI;AACF,aAAO,QAAQ,MAAM,GAAG,wBAAoB,wBAAM,SAAS,CAAC;AAAA,IAC9D,QACM;AAAA,IAAC;AACP,YAAQ,QAAQ;AAAA,EAClB,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AAKO,SAAS,wBAAwB,eAAiC;AACvE,QAAM,KAAK,YAAY;AACvB,QAAM,YAAY,WAAW;AAC7B,QAAM,aAAS,sBAAkB,IAAI;AACrC,QAAM,cAAU,sBAAI,KAAK;AAEzB,oCAAY,YAAY;AACtB,QAAI,CAAC,UAAU;AACb;AAEF,YAAQ,QAAQ;AAChB,WAAO,QAAQ;AACf,QAAI;AACF,aAAO,QAAQ,MAAM,GAAG,4BAAwB,wBAAM,aAAa,CAAC;AAAA,IACtE,QACM;AAAA,IAAC;AACP,YAAQ,QAAQ;AAAA,EAClB,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":["import_vue_demi","hDemi","Picker","import_vue_demi","Database"]}