@nextcloud/vue
Version:
Nextcloud vue components
281 lines (280 loc) • 10 kB
JavaScript
import '../assets/NcEmojiPicker-B5dclDLD.css';
import { Emoji, Picker, EmojiIndex } from "emoji-mart-vue-fast";
import { r as register, z as t40, A as t35, o as t15, B as t6, a as t } from "./_l10n-JYjUKekn.mjs";
import { g as getCurrentSkinTone, s as setCurrentSkinTone } from "./emoji-V6ytyzoR.mjs";
import { C as Color } from "./GenColors-BWE946ht.mjs";
import data from "emoji-mart-vue-fast/data/all.json";
import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
import NcButton from "../Components/NcButton.mjs";
import { N as NcColorPicker } from "./NcColorPicker-Ddm2gbz0.mjs";
import { N as NcPopover } from "./NcPopover-DbeCmze0.mjs";
import { N as NcTextField } from "./NcTextField-CmXmPZ4h.mjs";
register(t6, t15, t35, t40);
const _sfc_main$1 = {
name: "CircleIcon",
emits: ["click"],
props: {
title: {
type: String
},
fillColor: {
type: String,
default: "currentColor"
},
size: {
type: Number,
default: 24
}
}
};
var _sfc_render$1 = function render() {
var _vm = this, _c = _vm._self._c;
return _c("span", _vm._b({ staticClass: "material-design-icon circle-icon", attrs: { "aria-hidden": _vm.title ? null : true, "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
return _vm.$emit("click", $event);
} } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
};
var _sfc_staticRenderFns$1 = [];
var __component__$1 = /* @__PURE__ */ normalizeComponent(
_sfc_main$1,
_sfc_render$1,
_sfc_staticRenderFns$1,
false,
null,
null
);
const IconCircle = __component__$1.exports;
let emojiIndex;
const i18n = {
search: t("Search emoji"),
notfound: t("No emoji found"),
categories: {
search: t("Search results"),
recent: t("Frequently used"),
smileys: t("Smileys & Emotion"),
people: t("People & Body"),
nature: t("Animals & Nature"),
foods: t("Food & Drink"),
activity: t("Activities"),
places: t("Travel & Places"),
objects: t("Objects"),
symbols: t("Symbols"),
flags: t("Flags"),
custom: t("Custom")
}
};
const skinTonePalette = [
new Color(255, 222, 52, t("Neutral skin color")),
new Color(228, 205, 166, t("Light skin tone")),
new Color(250, 221, 192, t("Medium light skin tone")),
new Color(174, 129, 87, t("Medium skin tone")),
new Color(158, 113, 88, t("Medium dark skin tone")),
new Color(96, 79, 69, t("Dark skin tone"))
];
const _sfc_main = {
name: "NcEmojiPicker",
components: {
Emoji,
IconCircle,
NcButton,
NcColorPicker,
NcPopover,
NcTextField,
Picker
},
props: {
/**
* The emoji-set
*/
activeSet: {
type: String,
default: "native"
},
/**
* Show preview section when hovering emoji
*/
showPreview: {
type: Boolean,
default: false
},
/**
* Allow unselecting the selected emoji
*/
allowUnselect: {
type: Boolean,
default: false
},
/**
* Selected emoji to allow unselecting
*/
selectedEmoji: {
type: String,
default: ""
},
/**
* The fallback emoji in the preview section
*/
previewFallbackEmoji: {
type: String,
default: "grinning"
},
/**
* The fallback text in the preview section
*/
previewFallbackName: {
type: String,
default: t("Pick an emoji")
},
/**
* Whether to close the emoji picker after picking one
*/
closeOnSelect: {
type: Boolean,
default: true
},
/**
* Selector for the popover container
*/
container: {
type: [String, Object, Element, Boolean],
default: "body"
}
},
emits: [
"select",
"select-data",
"unselect"
],
setup() {
if (!emojiIndex) {
emojiIndex = new EmojiIndex(data);
}
return {
// Non-reactive constants
emojiIndex,
skinTonePalette,
i18n
};
},
data() {
const currentSkinTone = getCurrentSkinTone();
return {
/**
* The current active color from the skin tone palette
*/
currentColor: skinTonePalette[currentSkinTone - 1],
/**
* The current active skin tone
* @type {1|2|3|4|5|6}
*/
currentSkinTone,
search: "",
open: false
};
},
computed: {
native() {
return this.activeSet === "native";
}
},
methods: {
t,
clearSearch() {
var _a, _b;
this.search = "";
const input = (_b = (_a = this.$refs.search) == null ? void 0 : _a.$refs.inputField) == null ? void 0 : _b.$refs.input;
if (input) {
input.focus();
}
},
/**
* Update the current skin tone by the result of the color picker
* @param {string} color Color set
*/
onChangeSkinTone(color) {
const index = this.skinTonePalette.findIndex((tone) => tone.color.toLowerCase() === color.toLowerCase());
if (index > -1) {
this.currentSkinTone = index + 1;
this.currentColor = this.skinTonePalette[index];
setCurrentSkinTone(this.currentSkinTone);
}
},
select(emojiObject) {
this.$emit("select", emojiObject.native);
this.$emit("select-data", emojiObject);
if (this.closeOnSelect) {
this.open = false;
}
},
unselect() {
this.$emit("unselect");
},
afterShow() {
var _a, _b;
const picker = this.$refs.picker;
picker.$el.addEventListener("keydown", this.checkKeyEvent);
const input = (_b = (_a = this.$refs.search) == null ? void 0 : _a.$refs.inputField) == null ? void 0 : _b.$refs.input;
if (input) {
input.focus();
}
},
afterHide() {
const picker = this.$refs.picker;
picker.$el.removeEventListener("keydown", this.checkKeyEvent);
},
checkKeyEvent(event) {
if (event.key !== "Tab") {
return;
}
const picker = this.$refs.picker;
const focusableList = picker.$el.querySelectorAll(
"button, input"
);
const last = focusableList.length - 1;
if (focusableList.length <= 1) {
event.preventDefault();
return;
}
if (event.shiftKey === false && event.target === focusableList[last]) {
event.preventDefault();
focusableList[0].focus();
} else if (event.shiftKey === true && event.target === focusableList[0]) {
event.preventDefault();
focusableList[last].focus();
}
}
}
};
var _sfc_render = function render2() {
var _vm = this, _c = _vm._self._c;
return _c("NcPopover", _vm._g(_vm._b({ attrs: { "shown": _vm.open, "container": _vm.container, "popup-role": "dialog" }, on: { "update:shown": function($event) {
_vm.open = $event;
}, "after-show": _vm.afterShow, "after-hide": _vm.afterHide }, scopedSlots: _vm._u([{ key: "trigger", fn: function(slotProps) {
return [_vm._t("default", null, null, slotProps)];
} }], null, true) }, "NcPopover", _vm.$attrs, false), _vm.$listeners), [_c("Picker", _vm._b({ ref: "picker", attrs: { "auto-focus": false, "color": "var(--color-primary-element)", "data": _vm.emojiIndex, "emoji": _vm.previewFallbackEmoji, "i18n": _vm.i18n, "native": _vm.native, "emoji-size": 20, "per-line": 8, "picker-styles": { width: "320px" }, "show-preview": _vm.showPreview, "skin": _vm.currentSkinTone, "show-skin-tones": false, "title": _vm.previewFallbackName, "role": "dialog", "aria-modal": "true", "aria-label": _vm.t("Emoji picker") }, on: { "select": _vm.select }, scopedSlots: _vm._u([{ key: "searchTemplate", fn: function(slotProps) {
return [_c("div", { staticClass: "search__wrapper" }, [_c("NcTextField", { ref: "search", staticClass: "search", attrs: { "value": _vm.search, "label": _vm.t("Search"), "label-visible": true, "placeholder": _vm.i18n.search, "trailing-button-icon": "close", "trailing-button-label": _vm.t("Clear search"), "show-trailing-button": _vm.search !== "" }, on: { "update:value": [function($event) {
_vm.search = $event;
}, function($event) {
return slotProps.onSearch(_vm.search);
}], "trailing-button-click": function($event) {
_vm.clearSearch();
slotProps.onSearch(_vm.search);
} } }), _c("NcColorPicker", { attrs: { "palette-only": "", "container": _vm.container, "palette": _vm.skinTonePalette, "value": _vm.currentColor.color }, on: { "update:value": _vm.onChangeSkinTone } }, [_c("NcButton", { attrs: { "aria-label": _vm.t("Skin tone"), "type": "tertiary-no-background" }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_c("IconCircle", { style: { color: _vm.currentColor.color }, attrs: { "title": _vm.currentColor.name, "size": 20 } })];
}, proxy: true }], null, true) })], 1)], 1)];
} }, _vm.allowUnselect && _vm.selectedEmoji ? { key: "customCategory", fn: function() {
return [_c("div", { staticClass: "emoji-mart-category-label" }, [_c("h3", { staticClass: "emoji-mart-category-label" }, [_vm._v(" " + _vm._s(_vm.t("Selected")) + " ")])]), _c("Emoji", { staticClass: "emoji-selected", attrs: { "data": _vm.emojiIndex, "emoji": _vm.selectedEmoji, "native": true, "size": 32 }, on: { "click": _vm.unselect } }), _c("Emoji", { staticClass: "emoji-delete", attrs: { "data": _vm.emojiIndex, "emoji": ":x:", "native": true, "size": 10 }, on: { "click": _vm.unselect } })];
}, proxy: true } : null], null, true) }, "Picker", _vm.$attrs, false))], 1);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns,
false,
null,
"ed4adfc3"
);
const NcEmojiPicker = __component__.exports;
export {
NcEmojiPicker as N
};