@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
83 lines (82 loc) • 2.82 kB
JavaScript
import { ref, onMounted, openBlock, createElementBlock, createVNode, unref, withKeys, withModifiers, createSlots, withCtx } from "vue";
import { DtIconSearch, DtIconClose } from "@dialpad/dialtone-icons/vue3";
import DtInput from "../../input/input.vue.js";
import DtButton from "../../button/button.vue.js";
const _hoisted_1 = { class: "d-emoji-picker__search d-emoji-picker__alignment" };
const _sfc_main = {
__name: "emoji_search",
props: {
searchPlaceholderLabel: {
type: String,
required: true
},
modelValue: {
type: String,
default: ""
}
},
emits: ["update:modelValue", "focus-emoji-selector", "focus-tabset", "select-first-emoji"],
setup(__props, { expose: __expose, emit: __emit }) {
const emits = __emit;
const searchInput = ref(null);
function clearSearch() {
emits("update:modelValue", "");
focusSearchInput();
}
function focusSearchInput() {
searchInput.value.focus();
}
onMounted(() => {
focusSearchInput();
});
__expose({
focusSearchInput
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
createVNode(unref(DtInput), {
id: "searchInput",
ref_key: "searchInput",
ref: searchInput,
placeholder: __props.searchPlaceholderLabel,
"model-value": __props.modelValue,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event)),
onKeydown: [
_cache[1] || (_cache[1] = withKeys(($event) => _ctx.$emit("focus-tabset"), ["up"])),
_cache[2] || (_cache[2] = withKeys(withModifiers(($event) => _ctx.$emit("focus-emoji-selector"), ["prevent"]), ["down"])),
_cache[3] || (_cache[3] = withKeys(($event) => _ctx.$emit("select-first-emoji"), ["enter"]))
]
}, createSlots({
leftIcon: withCtx(() => [
createVNode(unref(DtIconSearch), { size: "200" })
]),
_: 2
}, [
__props.modelValue.length > 0 ? {
name: "rightIcon",
fn: withCtx(() => [
createVNode(unref(DtButton), {
importance: "clear",
size: "xs",
class: "d-emoji-picker__search-x-button",
circle: "",
kind: "muted",
onClick: clearSearch
}, {
icon: withCtx(() => [
createVNode(unref(DtIconClose), { size: "200" })
]),
_: 1
})
]),
key: "0"
} : void 0
]), 1032, ["placeholder", "model-value"])
]);
};
}
};
export {
_sfc_main as default
};
//# sourceMappingURL=emoji_search.vue.js.map