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

Dialpad's Dialtone design system monorepo

import { DtIconLink2 } from "@dialpad/dialtone-icons/vue3";
import DtRecipeMessageInputButton from "./message_input_button.vue.js";
import { resolveComponent, openBlock, createBlock, withCtx, createVNode, createElementBlock, toDisplayString, createCommentVNode, withModifiers, withKeys, createTextVNode } from "vue";
import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.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 = {
  compatConfig: { MODE: 3 },
  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;
    }
  }
};
const _hoisted_1 = {
  key: 0,
  class: "d-recipe-message-input__link-dialog-title"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_dt_icon_link2 = resolveComponent("dt-icon-link2");
  const _component_dt_recipe_message_input_button = resolveComponent("dt-recipe-message-input-button");
  const _component_dt_input = resolveComponent("dt-input");
  const _component_dt_button = resolveComponent("dt-button");
  const _component_dt_stack = resolveComponent("dt-stack");
  const _component_dt_popover = resolveComponent("dt-popover");
  return openBlock(), createBlock(_component_dt_popover, {
    open: $data.isOpen,
    placement: "bottom-start",
    "content-class": "d-recipe-message-input__link-popover",
    "visually-hidden-close": true,
    "visually-hidden-close-label": $props.linkButtonOptions.visuallyHiddenCloseText,
    "data-qa": "dt-message-input-link-popover",
    "show-close-button": false,
    onOpened: _cache[12] || (_cache[12] = ($event) => _ctx.$emit("opened", $event))
  }, {
    anchor: withCtx(() => [
      createVNode(_component_dt_recipe_message_input_button, {
        "aria-label": $props.linkButtonOptions.ariaLabel,
        "tooltip-text": $props.linkButtonOptions.tooltipText,
        "keyboard-shortcut-text": $props.linkButtonOptions.keyboardShortcutText,
        "data-qa": "message-input-link-btn",
        "is-active": $props.isSelectionActive("link"),
        onClick: _cache[0] || (_cache[0] = ($event) => $data.isOpen = true)
      }, {
        icon: withCtx(() => [
          createVNode(_component_dt_icon_link2, {
            class: "d-recipe-message-input__button-stack-icon",
            size: "200"
          })
        ]),
        _: 1
      }, 8, ["aria-label", "tooltip-text", "keyboard-shortcut-text", "is-active"])
    ]),
    content: withCtx(() => [
      createVNode(_component_dt_stack, { gap: "500" }, {
        default: withCtx(() => [
          $props.linkButtonOptions.dialogTitle.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString($props.linkButtonOptions.dialogTitle), 1)) : createCommentVNode("", true),
          createVNode(_component_dt_input, {
            modelValue: $data.linkText,
            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => $data.linkText = $event),
            "input-aria-label": $props.linkButtonOptions.textLabel,
            size: "xs",
            "data-qa": "dt-message-input-link-text-input",
            label: $props.linkButtonOptions.textLabel,
            "input-wrapper-class": "d-recipe-message-input__link-input",
            onClick: _cache[2] || (_cache[2] = withModifiers(() => {
            }, ["stop"])),
            onFocus: _cache[3] || (_cache[3] = withModifiers(() => {
            }, ["stop"])),
            onKeydown: _cache[4] || (_cache[4] = withKeys(($event) => _ctx.$emit("set-link", $data.linkText, $data.linkInput), ["enter"]))
          }, null, 8, ["modelValue", "input-aria-label", "label"]),
          createVNode(_component_dt_input, {
            modelValue: $data.linkInput,
            "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => $data.linkInput = $event),
            "input-aria-label": $props.linkButtonOptions.linkLabel,
            size: "xs",
            "data-qa": "dt-message-input-link-input",
            placeholder: $props.linkButtonOptions.linkPlaceholder,
            label: $props.linkButtonOptions.linkLabel,
            "input-wrapper-class": "d-recipe-message-input__link-input",
            onClick: _cache[6] || (_cache[6] = withModifiers(() => {
            }, ["stop"])),
            onFocus: _cache[7] || (_cache[7] = withModifiers(() => {
            }, ["stop"])),
            onKeydown: _cache[8] || (_cache[8] = withKeys(($event) => _ctx.$emit("set-link", $data.linkText, $data.linkInput), ["enter"]))
          }, null, 8, ["modelValue", "input-aria-label", "placeholder", "label"]),
          createVNode(_component_dt_stack, {
            direction: "row",
            class: "d-recipe-message-input__link-dialog-buttons"
          }, {
            default: withCtx(() => [
              createVNode(_component_dt_button, {
                "aria-label": $props.linkButtonOptions.removeLabel,
                importance: "clear",
                kind: "danger",
                size: "md",
                "data-qa": "dt-message-input-link-remove-btn",
                onClick: _cache[9] || (_cache[9] = ($event) => _ctx.$emit("remove-link", $data.linkText, $data.linkInput))
              }, {
                default: withCtx(() => [
                  createTextVNode(toDisplayString($props.linkButtonOptions.removeLabel), 1)
                ]),
                _: 1
              }, 8, ["aria-label"]),
              createVNode(_component_dt_stack, {
                direction: "row",
                gap: "400"
              }, {
                default: withCtx(() => [
                  createVNode(_component_dt_button, {
                    "aria-label": $props.linkButtonOptions.cancelLabel,
                    importance: "clear",
                    kind: "muted",
                    size: "md",
                    "data-qa": "dt-message-input-link-cancel-btn",
                    onClick: _cache[10] || (_cache[10] = ($event) => $data.isOpen = false)
                  }, {
                    default: withCtx(() => [
                      createTextVNode(toDisplayString($props.linkButtonOptions.cancelLabel), 1)
                    ]),
                    _: 1
                  }, 8, ["aria-label"]),
                  createVNode(_component_dt_button, {
                    size: "md",
                    "aria-label": $props.linkButtonOptions.confirmLabel,
                    "data-qa": "dt-message-input-link-confirm-btn",
                    onClick: _cache[11] || (_cache[11] = ($event) => _ctx.$emit("set-link", $data.linkText, $data.linkInput))
                  }, {
                    default: withCtx(() => [
                      createTextVNode(toDisplayString($props.linkButtonOptions.confirmLabel), 1)
                    ]),
                    _: 1
                  }, 8, ["aria-label"])
                ]),
                _: 1
              })
            ]),
            _: 1
          })
        ]),
        _: 1
      })
    ]),
    _: 1
  }, 8, ["open", "visually-hidden-close-label"]);
}
const DtRecipeMessageInputLink = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  DtRecipeMessageInputLink as default
};
//# sourceMappingURL=message_input_link.vue.js.map