@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
211 lines (210 loc) • 7.23 kB
JavaScript
import { DtIconLink2 as E } from "@dialpad/dialtone-icons/vue3";
import f from "./message-input-button.js";
import { DialtoneLocalization as N } from "../../localization/index.js";
import { resolveComponent as r, createBlock as T, openBlock as B, withCtx as a, createVNode as l, createElementVNode as A, toDisplayString as u, withKeys as L, withModifiers as p, createTextVNode as d } from "vue";
import { _ as g } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import v from "../stack/stack.js";
import O from "../button/button.js";
import S from "../input/input.js";
import x from "../popover/popover.js";
const D = {
compatConfig: { MODE: 3 },
name: "MessageInputLink",
components: {
DtPopover: x,
DtInput: S,
DtButton: O,
DtStack: v,
DtIconLink2: E,
DtRecipeMessageInputButton: f
},
props: {
open: {
type: Boolean,
default: !1
},
linkButtonOptions: {
type: Object,
required: !0
},
isSelectionActive: {
type: Function,
default: () => {
}
}
},
emits: ["set-link", "remove-link", "opened"],
data() {
return {
linkText: "",
linkInput: "",
isOpen: !1,
i18n: new N()
};
},
computed: {
anchorButtonLabel() {
return this.i18n.$ta("DIALTONE_MESSAGE_INPUT_LINK_BUTTON_LABEL");
},
textInputLabel() {
return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_TEXT_LABEL");
},
linkInputLabel() {
return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_LINK_LABEL");
},
linkInputPlaceHolder() {
return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_LINK_PLACEHOLDER");
},
removeButtonLabel() {
return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_REMOVE_LABEL");
},
cancelButtonLabel() {
return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_CANCEL_LABEL");
},
confirmButtonLabel() {
return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_CONFIRM_LABEL");
}
},
watch: {
open: {
immediate: !0,
handler(o) {
this.isOpen = o;
}
}
},
methods: {
setInitialValues(o, t) {
this.linkText = o, this.linkInput = t;
}
}
}, M = { class: "d-recipe-message-input__link-dialog-title" };
function C(o, t, k, K, e, n) {
const b = r("dt-icon-link2"), c = r("dt-recipe-message-input-button"), _ = r("dt-input"), s = r("dt-button"), m = r("dt-stack"), I = r("dt-popover");
return B(), T(I, {
open: e.isOpen,
placement: "bottom-start",
"content-class": "d-recipe-message-input__link-popover",
"data-qa": "dt-message-input-link-popover",
"show-close-button": !1,
onOpened: t[12] || (t[12] = (i) => o.$emit("opened", i))
}, {
anchor: a(() => [
l(c, {
"aria-label": n.anchorButtonLabel["aria-label"],
"tooltip-text": n.anchorButtonLabel["tooltip-text"],
"keyboard-shortcut-text": k.linkButtonOptions.keyboardShortcutText,
"data-qa": "message-input-link-btn",
"is-active": k.isSelectionActive("link"),
onClick: t[0] || (t[0] = (i) => e.isOpen = !0)
}, {
icon: a(() => [
l(b, {
class: "d-recipe-message-input__button-stack-icon",
size: "200"
})
]),
_: 1
}, 8, ["aria-label", "tooltip-text", "keyboard-shortcut-text", "is-active"])
]),
content: a(() => [
l(m, { gap: "500" }, {
default: a(() => [
A("div", M, u(e.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_DIALOG_TITLE")), 1),
l(_, {
modelValue: e.linkText,
"onUpdate:modelValue": t[1] || (t[1] = (i) => e.linkText = i),
"input-aria-label": n.textInputLabel,
size: "xs",
"data-qa": "dt-message-input-link-text-input",
label: n.textInputLabel,
"input-wrapper-class": "d-recipe-message-input__link-input",
onClick: t[2] || (t[2] = p(() => {
}, ["stop"])),
onFocus: t[3] || (t[3] = p(() => {
}, ["stop"])),
onKeydown: t[4] || (t[4] = L((i) => o.$emit("set-link", e.linkText, e.linkInput), ["enter"]))
}, null, 8, ["modelValue", "input-aria-label", "label"]),
l(_, {
modelValue: e.linkInput,
"onUpdate:modelValue": t[5] || (t[5] = (i) => e.linkInput = i),
"input-aria-label": n.linkInputLabel,
size: "xs",
"data-qa": "dt-message-input-link-input",
placeholder: n.linkInputPlaceHolder,
label: n.linkInputLabel,
"input-wrapper-class": "d-recipe-message-input__link-input",
onClick: t[6] || (t[6] = p(() => {
}, ["stop"])),
onFocus: t[7] || (t[7] = p(() => {
}, ["stop"])),
onKeydown: t[8] || (t[8] = L((i) => o.$emit("set-link", e.linkText, e.linkInput), ["enter"]))
}, null, 8, ["modelValue", "input-aria-label", "placeholder", "label"]),
l(m, {
direction: "row",
class: "d-recipe-message-input__link-dialog-buttons"
}, {
default: a(() => [
l(s, {
"aria-label": n.removeButtonLabel,
title: n.removeButtonLabel,
importance: "clear",
kind: "danger",
size: "md",
"data-qa": "dt-message-input-link-remove-btn",
onClick: t[9] || (t[9] = (i) => o.$emit("remove-link", e.linkText, e.linkInput))
}, {
default: a(() => [
d(u(n.removeButtonLabel), 1)
]),
_: 1
}, 8, ["aria-label", "title"]),
l(m, {
direction: "row",
gap: "400"
}, {
default: a(() => [
l(s, {
"aria-label": n.cancelButtonLabel,
title: n.cancelButtonLabel,
importance: "clear",
kind: "muted",
size: "md",
"data-qa": "dt-message-input-link-cancel-btn",
onClick: t[10] || (t[10] = (i) => e.isOpen = !1)
}, {
default: a(() => [
d(u(n.cancelButtonLabel), 1)
]),
_: 1
}, 8, ["aria-label", "title"]),
l(s, {
size: "md",
"aria-label": n.confirmButtonLabel,
title: n.confirmButtonLabel,
"data-qa": "dt-message-input-link-confirm-btn",
onClick: t[11] || (t[11] = (i) => o.$emit("set-link", e.linkText, e.linkInput))
}, {
default: a(() => [
d(u(n.confirmButtonLabel), 1)
]),
_: 1
}, 8, ["aria-label", "title"])
]),
_: 1
})
]),
_: 1
})
]),
_: 1
})
]),
_: 1
}, 8, ["open"]);
}
const F = /* @__PURE__ */ g(D, [["render", C]]);
export {
F as default
};
//# sourceMappingURL=message-input-link.js.map