@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
109 lines (108 loc) • 6.13 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue2 = require("@dialpad/dialtone-icons/vue2");
const message_input_button = require("./message_input_button.vue.cjs");
const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
const popover = require("../../../components/popover/popover.vue.cjs");
const input = require("../../../components/input/input.vue.cjs");
const button = require("../../../components/button/button.vue.cjs");
const stack = require("../../../components/stack/stack.vue.cjs");
const _sfc_main = {
name: "MessageInputLink",
components: {
DtPopover: popover.default,
DtInput: input.default,
DtButton: button.default,
DtStack: stack.default,
DtIconLink2: vue2.DtIconLink2,
DtRecipeMessageInputButton: message_input_button.default
},
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__ */ _pluginVue2_normalizer.default(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const DtRecipeMessageInputLink = __component__.exports;
exports.default = DtRecipeMessageInputLink;
//# sourceMappingURL=message_input_link.vue.cjs.map