@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
195 lines (194 loc) • 8.37 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue3 = require("@dialpad/dialtone-icons/vue3");
const message_input_button = require("./message_input_button.vue.cjs");
const vue = require("vue");
const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.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 = {
compatConfig: { MODE: 3 },
name: "MessageInputLink",
components: {
DtPopover: popover.default,
DtInput: input.default,
DtButton: button.default,
DtStack: stack.default,
DtIconLink2: vue3.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;
}
}
};
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 = vue.resolveComponent("dt-icon-link2");
const _component_dt_recipe_message_input_button = vue.resolveComponent("dt-recipe-message-input-button");
const _component_dt_input = vue.resolveComponent("dt-input");
const _component_dt_button = vue.resolveComponent("dt-button");
const _component_dt_stack = vue.resolveComponent("dt-stack");
const _component_dt_popover = vue.resolveComponent("dt-popover");
return vue.openBlock(), vue.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: vue.withCtx(() => [
vue.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: vue.withCtx(() => [
vue.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: vue.withCtx(() => [
vue.createVNode(_component_dt_stack, { gap: "500" }, {
default: vue.withCtx(() => [
$props.linkButtonOptions.dialogTitle.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, vue.toDisplayString($props.linkButtonOptions.dialogTitle), 1)) : vue.createCommentVNode("", true),
vue.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] = vue.withModifiers(() => {
}, ["stop"])),
onFocus: _cache[3] || (_cache[3] = vue.withModifiers(() => {
}, ["stop"])),
onKeydown: _cache[4] || (_cache[4] = vue.withKeys(($event) => _ctx.$emit("set-link", $data.linkText, $data.linkInput), ["enter"]))
}, null, 8, ["modelValue", "input-aria-label", "label"]),
vue.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] = vue.withModifiers(() => {
}, ["stop"])),
onFocus: _cache[7] || (_cache[7] = vue.withModifiers(() => {
}, ["stop"])),
onKeydown: _cache[8] || (_cache[8] = vue.withKeys(($event) => _ctx.$emit("set-link", $data.linkText, $data.linkInput), ["enter"]))
}, null, 8, ["modelValue", "input-aria-label", "placeholder", "label"]),
vue.createVNode(_component_dt_stack, {
direction: "row",
class: "d-recipe-message-input__link-dialog-buttons"
}, {
default: vue.withCtx(() => [
vue.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: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString($props.linkButtonOptions.removeLabel), 1)
]),
_: 1
}, 8, ["aria-label"]),
vue.createVNode(_component_dt_stack, {
direction: "row",
gap: "400"
}, {
default: vue.withCtx(() => [
vue.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: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString($props.linkButtonOptions.cancelLabel), 1)
]),
_: 1
}, 8, ["aria-label"]),
vue.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: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString($props.linkButtonOptions.confirmLabel), 1)
]),
_: 1
}, 8, ["aria-label"])
]),
_: 1
})
]),
_: 1
})
]),
_: 1
})
]),
_: 1
}, 8, ["open", "visually-hidden-close-label"]);
}
const DtRecipeMessageInputLink = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = DtRecipeMessageInputLink;
//# sourceMappingURL=message_input_link.vue.cjs.map