@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
79 lines (78 loc) • 2.93 kB
JavaScript
import { DtIconSearch, DtIconClose } from "@dialpad/dialtone-icons/vue2";
import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
import DtInput from "../../input/input.vue.js";
import DtButton from "../../button/button.vue.js";
const _sfc_main = {
name: "EmojiSearch",
components: {
DtInput,
DtIconSearch,
DtIconClose,
DtButton
},
props: {
searchPlaceholderLabel: {
type: String,
required: true
},
modelValue: {
type: String,
default: ""
}
},
mounted() {
this.focusSearchInput();
},
methods: {
updateModelValue(value) {
this.$emit("update:model-value", value);
},
focusEmojiSelector() {
this.$emit("focus-emoji-selector");
},
focusTabset() {
this.$emit("focus-tabset");
},
selectFirstEmoji() {
this.$emit("select-first-emoji");
},
clearSearch() {
this.$emit("update:model-value", "");
this.focusSearchInput();
},
focusSearchInput() {
this.$refs.searchInputRef.focus();
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("div", { staticClass: "d-emoji-picker__search d-emoji-picker__alignment" }, [_c("dt-input", { ref: "searchInputRef", attrs: { "id": "searchInput", "placeholder": _vm.searchPlaceholderLabel, "value": _vm.modelValue }, on: { "input": _vm.updateModelValue, "keydown": [function($event) {
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"])) return null;
return _vm.focusTabset.apply(null, arguments);
}, function($event) {
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"])) return null;
$event.preventDefault();
return _vm.focusEmojiSelector.apply(null, arguments);
}, function($event) {
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
return _vm.selectFirstEmoji.apply(null, arguments);
}] }, scopedSlots: _vm._u([{ key: "leftIcon", fn: function() {
return [_c("dt-icon-search", { attrs: { "size": "200" } })];
}, proxy: true }, _vm.modelValue.length > 0 ? { key: "rightIcon", fn: function() {
return [_c("dt-button", { staticClass: "d-emoji-picker__search-x-button", attrs: { "importance": "clear", "size": "xs", "circle": "", "kind": "muted" }, on: { "click": _vm.clearSearch }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_c("dt-icon-close", { attrs: { "size": "200" } })];
}, proxy: true }], null, false, 4156074325) })];
}, proxy: true } : null], null, true) })], 1);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const EmojiSearch = __component__.exports;
export {
EmojiSearch as default
};
//# sourceMappingURL=emoji_search.vue.js.map