@dialpad/dialtone/dist/vue2/recipes/conversation_view/message_input/message_input_link.vue.js

Dialpad's Dialtone design system monorepo

import { DtIconLink2 } from "@dialpad/dialtone-icons/vue2";
import DtRecipeMessageInputButton from "./message_input_button.vue.js";
import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
import DtPopover from "../../../components/popover/popover.vue.js";
import DtInput from "../../../components/input/input.vue.js";
import DtButton from "../../../components/button/button.vue.js";
import DtStack from "../../../components/stack/stack.vue.js";
const _sfc_main = {
  name: "MessageInputLink",
  components: {
    DtPopover,
    DtInput,
    DtButton,
    DtStack,
    DtIconLink2,
    DtRecipeMessageInputButton
  },
  props: {
    open: {
      type: Boolean,
      default: false
    },
    linkButtonOptions: {
      type: Object,
      required: true
    },
    isSelectionActive: {
      type: Function,
      default: () => {
      }
    }
  },
  emits: ["set-link", "remove-link", "opened"],
  data() {
    return {
      linkText: "",
      linkInput: "",
      isOpen: false
    };
  },
  watch: {
    open: {
      immediate: true,
      handler(value) {
        this.isOpen = value;
      }
    }
  },
  methods: {
    setInitialValues(linkText, linkInput) {
      this.linkText = linkText;
      this.linkInput = linkInput;
    }
  }
};
var _sfc_render = function render() {
  var _vm = this, _c = _vm._self._c;
  return _c("dt-popover", { attrs: { "open": _vm.isOpen, "placement": "bottom-start", "content-class": "d-recipe-message-input__link-popover", "visually-hidden-close": true, "visually-hidden-close-label": _vm.linkButtonOptions.visuallyHiddenCloseText, "data-qa": "dt-message-input-link-popover", "show-close-button": false }, on: { "opened": function($event) {
    return _vm.$emit("opened", $event);
  } }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
    return [_c("dt-recipe-message-input-button", { attrs: { "aria-label": _vm.linkButtonOptions.ariaLabel, "tooltip-text": _vm.linkButtonOptions.tooltipText, "keyboard-shortcut-text": _vm.linkButtonOptions.keyboardShortcutText, "data-qa": "message-input-link-btn", "is-active": _vm.isSelectionActive("link") }, on: { "click": function($event) {
      _vm.isOpen = true;
    } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
      return [_c("dt-icon-link2", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
    }, proxy: true }]) })];
  }, proxy: true }, { key: "content", fn: function() {
    return [_c("dt-stack", { attrs: { "gap": "500" } }, [_vm.linkButtonOptions.dialogTitle.length > 0 ? _c("div", { staticClass: "d-recipe-message-input__link-dialog-title" }, [_vm._v(" " + _vm._s(_vm.linkButtonOptions.dialogTitle) + " ")]) : _vm._e(), _c("dt-input", { attrs: { "input-aria-label": _vm.linkButtonOptions.textLabel, "size": "xs", "data-qa": "dt-message-input-link-text-input", "label": _vm.linkButtonOptions.textLabel, "input-wrapper-class": "d-recipe-message-input__link-input" }, on: { "click": function($event) {
      $event.stopPropagation();
    }, "focus": function($event) {
      $event.stopPropagation();
    }, "keydown": function($event) {
      if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
      return _vm.$emit("set-link", _vm.linkText, _vm.linkInput);
    } }, nativeOn: { "click": function($event) {
      $event.stopPropagation();
    } }, model: { value: _vm.linkText, callback: function($$v) {
      _vm.linkText = $$v;
    }, expression: "linkText" } }), _c("dt-input", { attrs: { "input-aria-label": _vm.linkButtonOptions.linkLabel, "size": "xs", "data-qa": "dt-message-input-link-input", "placeholder": _vm.linkButtonOptions.linkPlaceholder, "label": _vm.linkButtonOptions.linkLabel, "input-wrapper-class": "d-recipe-message-input__link-input" }, on: { "click": function($event) {
      $event.stopPropagation();
    }, "focus": function($event) {
      $event.stopPropagation();
    }, "keydown": function($event) {
      if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
      return _vm.$emit("set-link", _vm.linkText, _vm.linkInput);
    } }, nativeOn: { "click": function($event) {
      $event.stopPropagation();
    } }, model: { value: _vm.linkInput, callback: function($$v) {
      _vm.linkInput = $$v;
    }, expression: "linkInput" } }), _c("dt-stack", { staticClass: "d-recipe-message-input__link-dialog-buttons", attrs: { "direction": "row" } }, [_c("dt-button", { attrs: { "aria-label": _vm.linkButtonOptions.removeLabel, "importance": "clear", "kind": "danger", "size": "md", "data-qa": "dt-message-input-link-remove-btn" }, on: { "click": function($event) {
      return _vm.$emit("remove-link", _vm.linkText, _vm.linkInput);
    } } }, [_vm._v(" " + _vm._s(_vm.linkButtonOptions.removeLabel) + " ")]), _c("dt-stack", { attrs: { "direction": "row", "gap": "400" } }, [_c("dt-button", { attrs: { "aria-label": _vm.linkButtonOptions.cancelLabel, "importance": "clear", "kind": "muted", "size": "md", "data-qa": "dt-message-input-link-cancel-btn" }, on: { "click": function($event) {
      _vm.isOpen = false;
    } } }, [_vm._v(" " + _vm._s(_vm.linkButtonOptions.cancelLabel) + " ")]), _c("dt-button", { attrs: { "size": "md", "aria-label": _vm.linkButtonOptions.confirmLabel, "data-qa": "dt-message-input-link-confirm-btn" }, on: { "click": function($event) {
      return _vm.$emit("set-link", _vm.linkText, _vm.linkInput);
    } } }, [_vm._v(" " + _vm._s(_vm.linkButtonOptions.confirmLabel) + " ")])], 1)], 1)], 1)];
  }, proxy: true }]) });
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
  _sfc_main,
  _sfc_render,
  _sfc_staticRenderFns
);
const DtRecipeMessageInputLink = __component__.exports;
export {
  DtRecipeMessageInputLink as default
};
//# sourceMappingURL=message_input_link.vue.js.map