@nextcloud/vue/dist/Components/NcEmojiPicker.mjs

Nextcloud vue components

import "../assets/index15.css";
import a from "./NcPopover.mjs";
import n from "./NcTextField.mjs";
import { t as i } from "../chunks/l10n-9a5a6afc.mjs";
import { Emoji as l, Picker as c, EmojiIndex as u } from "emoji-mart-vue-fast";
import m from "emoji-mart-vue-fast/data/all.json";
import { n as p } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
let s;
const f = { search: i("Search emoji"), notfound: i("No emoji found"), categories: { search: i("Search results"), recent: i("Frequently used"), smileys: i("Smileys & Emotion"), people: i("People & Body"), nature: i("Animals & Nature"), foods: i("Food & Drink"), activity: i("Activities"), places: i("Travel & Places"), objects: i("Objects"), symbols: i("Symbols"), flags: i("Flags"), custom: i("Custom") } }, h = { name: "NcEmojiPicker", components: { NcPopover: a, NcTextField: n, Emoji: l, Picker: c }, props: { activeSet: { type: String, default: "native" }, showPreview: { type: Boolean, default: !1 }, allowUnselect: { type: Boolean, default: !1 }, selectedEmoji: { type: String, default: "" }, previewFallbackEmoji: { type: String, default: "grinning" }, previewFallbackName: { type: String, default: i("Pick an emoji") }, closeOnSelect: { type: Boolean, default: !0 }, container: { type: [String, Object, Element, Boolean], default: "body" } }, emits: ["select", "select-data", "unselect"], setup() {
  return s || (s = new u(m)), { emojiIndex: s, i18n: f };
}, data() {
  return { search: "", open: !1 };
}, computed: { native() {
  return this.activeSet === "native";
} }, methods: { t: i, clearSearch() {
  var t, r;
  this.search = "";
  const e = (r = (t = this.$refs.search) == null ? void 0 : t.$refs.inputField) == null ? void 0 : r.$refs.input;
  e && e.focus();
}, select(e) {
  this.$emit("select", e.native), this.$emit("select-data", e), this.closeOnSelect && (this.open = !1);
}, unselect() {
  this.$emit("unselect");
}, afterShow() {
  var t, r;
  this.$refs.picker.$el.addEventListener("keydown", this.checkKeyEvent);
  const e = (r = (t = this.$refs.search) == null ? void 0 : t.$refs.inputField) == null ? void 0 : r.$refs.input;
  e && e.focus();
}, afterHide() {
  this.$refs.picker.$el.removeEventListener("keydown", this.checkKeyEvent);
}, checkKeyEvent(e) {
  if (e.key !== "Tab")
    return;
  const t = this.$refs.picker.$el.querySelectorAll("button, input"), r = t.length - 1;
  if (t.length <= 1) {
    e.preventDefault();
    return;
  }
  e.shiftKey === !1 && e.target === t[r] ? (e.preventDefault(), t[0].focus()) : e.shiftKey === !0 && e.target === t[0] && (e.preventDefault(), t[r].focus());
} } };
var d = function() {
  var e = this, t = e._self._c;
  return t("NcPopover", e._g(e._b({ attrs: { shown: e.open, container: e.container }, on: { "update:shown": function(r) {
    e.open = r;
  }, "after-show": e.afterShow, "after-hide": e.afterHide }, scopedSlots: e._u([{ key: "trigger", fn: function() {
    return [e._t("default")];
  }, proxy: !0 }], null, !0) }, "NcPopover", e.$attrs, !1), e.$listeners), [t("Picker", e._b({ ref: "picker", attrs: { "auto-focus": !1, color: "var(--color-primary-element)", data: e.emojiIndex, emoji: e.previewFallbackEmoji, i18n: e.i18n, native: e.native, "emoji-size": 20, "per-line": 8, "picker-styles": { width: "320px" }, "show-preview": e.showPreview, title: e.previewFallbackName }, on: { select: e.select }, scopedSlots: e._u([{ key: "searchTemplate", fn: function(r) {
    return [t("NcTextField", { ref: "search", staticClass: "search", attrs: { value: e.search, label: e.t("Search"), "label-visible": !0, placeholder: e.i18n.search, "trailing-button-icon": "close", "trailing-button-label": e.t("Clear search"), "show-trailing-button": e.search !== "" }, on: { "update:value": [function(o) {
      e.search = o;
    }, function(o) {
      return r.onSearch(e.search);
    }], "trailing-button-click": function(o) {
      e.clearSearch(), r.onSearch(e.search);
    } } })];
  } }, e.allowUnselect && e.selectedEmoji ? { key: "customCategory", fn: function() {
    return [t("div", { staticClass: "emoji-mart-category-label" }, [t("h3", { staticClass: "emoji-mart-category-label" }, [e._v(" " + e._s(e.t("Selected")) + " ")])]), t("Emoji", { staticClass: "emoji-selected", attrs: { data: e.emojiIndex, emoji: e.selectedEmoji, size: 32 }, on: { click: e.unselect } }), t("Emoji", { staticClass: "emoji-delete", attrs: { data: e.emojiIndex, emoji: ":x:", size: 10 }, on: { click: e.unselect } })];
  }, proxy: !0 } : null], null, !0) }, "Picker", e.$attrs, !1))], 1);
}, v = [], y = p(h, d, v, !1, null, "b69b7291", null, null);
const E = y.exports;
export {
  E as default
};