@dialpad/dialtone/dist/vue3/components/emoji_picker/modules/emoji_search.vue.cjs

Dialpad's Dialtone design system monorepo

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const vue3 = require("@dialpad/dialtone-icons/vue3");
const input = require("../../input/input.vue.cjs");
const button = require("../../button/button.vue.cjs");
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 = vue.ref(null);
    function clearSearch() {
      emits("update:modelValue", "");
      focusSearchInput();
    }
    function focusSearchInput() {
      searchInput.value.focus();
    }
    vue.onMounted(() => {
      focusSearchInput();
    });
    __expose({
      focusSearchInput
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        vue.createVNode(vue.unref(input.default), {
          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] = vue.withKeys(($event) => _ctx.$emit("focus-tabset"), ["up"])),
            _cache[2] || (_cache[2] = vue.withKeys(vue.withModifiers(($event) => _ctx.$emit("focus-emoji-selector"), ["prevent"]), ["down"])),
            _cache[3] || (_cache[3] = vue.withKeys(($event) => _ctx.$emit("select-first-emoji"), ["enter"]))
          ]
        }, vue.createSlots({
          leftIcon: vue.withCtx(() => [
            vue.createVNode(vue.unref(vue3.DtIconSearch), { size: "200" })
          ]),
          _: 2
        }, [
          __props.modelValue.length > 0 ? {
            name: "rightIcon",
            fn: vue.withCtx(() => [
              vue.createVNode(vue.unref(button.default), {
                importance: "clear",
                size: "xs",
                class: "d-emoji-picker__search-x-button",
                circle: "",
                kind: "muted",
                onClick: clearSearch
              }, {
                icon: vue.withCtx(() => [
                  vue.createVNode(vue.unref(vue3.DtIconClose), { size: "200" })
                ]),
                _: 1
              })
            ]),
            key: "0"
          } : void 0
        ]), 1032, ["placeholder", "model-value"])
      ]);
    };
  }
};
exports.default = _sfc_main;
//# sourceMappingURL=emoji_search.vue.cjs.map