@dialpad/dialtone-vue 3.109.0 → 3.109.2

package/dist/message_input.js

@@ -0,0 +1,551 @@
+import { D as v, a as L, R as B, b as F } from "./rich_text_editor-G1GLwWlk.js";
+import { t as D, w as I, x as E } from "./emoji-ppApZXjY.js";
+import { _ as T } from "./emoji_picker-XHD9NN0X.js";
+import { _ as x, D as O } from "./tooltip-Ooi51wOv.js";
+import { resolveComponent as r, openBlock as u, createElementBlock as k, normalizeClass as S, withKeys as _, withModifiers as V, createElementVNode as d, normalizeStyle as M, createVNode as l, mergeProps as j, renderSlot as R, createBlock as c, withCtx as s, createCommentVNode as m, withDirectives as q, toDisplayString as g, vShow as z, createSlots as A } from "vue";
+const U = {
+  name: "DtRecipeMessageInput",
+  components: {
+    DtButton: D,
+    DtEmojiPicker: T,
+    DtIcon: I,
+    DtInput: E,
+    DtPopover: v,
+    DtRichTextEditor: L,
+    DtTooltip: O
+  },
+  mixins: [],
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Value of the input. The object format should match TipTap's JSON
+     * document structure: https://tiptap.dev/guide/output#option-1-json
+     */
+    modelValue: {
+      type: [Object, String],
+      default: ""
+    },
+    /**
+     * Whether the input is editable
+     */
+    editable: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Descriptive label for the input element
+     */
+    inputAriaLabel: {
+      type: String,
+      required: !0,
+      default: ""
+    },
+    /**
+     * Additional class name for the input element. Only accepts a String value
+     * because this is passed to the editor via options. For multiple classes,
+     * join them into one string, e.g. "d-p8 d-hmx96"
+     */
+    inputClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Whether the input should receive focus after the component has been
+     * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.
+     * - `start`  Sets the focus to the beginning of the input
+     * - `end`    Sets the focus to the end of the input
+     * - `all`    Selects the whole contents of the input
+     * - `Number` Sets the focus to a specific position in the input
+     * - `true`   Defaults to `start`
+     * - `false`  Disables autofocus
+     * @values true, false, start, end, all, number
+     */
+    autoFocus: {
+      type: [Boolean, String, Number],
+      default: !1,
+      validator(t) {
+        return typeof t == "string" ? B.includes(t) : !0;
+      }
+    },
+    /**
+     * The output format that the editor uses when emitting the "@input" event.
+     * One of `text`, `json`, `html`. See https://tiptap.dev/guide/output for
+     * examples.
+     * @values text, json, html
+     */
+    outputFormat: {
+      type: String,
+      default: "text",
+      validator(t) {
+        return F.includes(t);
+      }
+    },
+    /**
+     * Enables the Link extension and optionally passes configurations to it
+     */
+    link: {
+      type: [Boolean, Object],
+      default: !1
+    },
+    /**
+     * Placeholder text
+     */
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Disable Send Button
+     */
+    disableSend: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Content area needs to dynamically adjust height based on the conversation area height.
+     * can be vh|px|rem|em|%
+     */
+    maxHeight: {
+      type: String,
+      default: "unset"
+    },
+    // Emoji picker props
+    showEmojiPicker: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Props to pass into the emoji picker.
+     */
+    emojiPickerProps: {
+      type: Object,
+      default: () => ({}),
+      validate(t) {
+        return [
+          "searchNoResultsLabel",
+          "searchResultsLabel",
+          "searchPlaceholderLabel",
+          "skinSelectorButtonTooltipLabel",
+          "tabSetLabels"
+        ].every((e) => t[e] != null);
+      }
+    },
+    /**
+     * Emoji button tooltip label
+     */
+    emojiTooltipMessage: {
+      type: String,
+      default: "Emoji"
+    },
+    // Aria label for buttons
+    /**
+     * Emoji button aria label
+     */
+    emojiButtonAriaLabel: {
+      type: String,
+      default: "emoji button"
+    },
+    /**
+     * Enable character Limit warning
+     */
+    showCharacterLimit: {
+      type: [Boolean, Object],
+      default: () => ({ count: 1500, warning: 500, message: "" })
+    },
+    showImagePicker: {
+      type: [Boolean, Object],
+      default: () => ({ tooltipLabel: "Attach Image", ariaLabel: "image button" })
+    },
+    /**
+     * Send button defaults.
+     */
+    showSend: {
+      type: [Boolean, Object],
+      default: () => ({ icon: "send" })
+    },
+    /**
+     * Cancel button defaults.
+     */
+    showCancel: {
+      type: [Boolean, Object],
+      default: () => ({ text: "Cancel" })
+    }
+  },
+  emits: [
+    /**
+     * Fires when send button is clicked
+     *
+     * @event submit
+     * @type {String}
+     */
+    "submit",
+    /**
+     * Fires when media is selected from image button
+     *
+     * @event select-media
+     * @type {Array}
+     */
+    "select-media",
+    /**
+     * Fires when media is dropped into the message input
+     *
+     * @event add-media
+     * @type {Array}
+     */
+    "add-media",
+    /**
+     * Fires when cancel button is pressed (only on edit mode)
+     *
+     * @event cancel
+     * @type {Boolean}
+     */
+    "cancel",
+    /**
+     * Fires when skin tone is selected from the emoji picker
+     *
+     * @event skin-tone
+     * @type {String}
+     */
+    "skin-tone",
+    /**
+     * Fires when emoji is selected from the emoji picker
+     *
+     * @event selected-emoji
+     * @type {String}
+     */
+    "selected-emoji",
+    /**
+     * Native focus event
+     * @event input
+     * @type {String|JSON}
+     */
+    "focus",
+    /**
+     * Native blur event
+     * @event input
+     * @type {String|JSON}
+     */
+    "blur",
+    /**
+     * Native input event
+     * @event input
+     * @type {String|JSON}
+     */
+    "input"
+  ],
+  data() {
+    return {
+      internalInputValue: this.modelValue,
+      // internal input content
+      hasFocus: !1,
+      imagePickerFocus: !1,
+      emojiPickerFocus: !1,
+      sendButtonFocus: !1,
+      emojiPickerOpened: !1
+    };
+  },
+  computed: {
+    inputLength() {
+      return this.internalInputValue.length;
+    },
+    displayCharacterLimitWarning() {
+      return !!this.showCharacterLimit && this.showCharacterLimit.count - this.inputLength <= this.showCharacterLimit.warning;
+    },
+    characterLimitTooltipEnabled() {
+      return this.showCharacterLimit.message && this.showCharacterLimit.count - this.inputLength < 0;
+    },
+    isSendDisabled() {
+      return this.inputLength === 0 || this.disableSend || this.showCharacterLimit && this.inputLength > this.showCharacterLimit.count;
+    },
+    computedCloseButtonProps() {
+      return {
+        ariaLabel: "Close"
+      };
+    },
+    emojiPickerHovered() {
+      return this.emojiPickerFocus || this.emojiPickerOpened;
+    },
+    sendButtonKind() {
+      return this.isSendDisabled ? "muted" : "default";
+    }
+  },
+  watch: {
+    modelValue(t) {
+      this.internalInputValue = t;
+    }
+  },
+  methods: {
+    onDrag(t) {
+      t.stopPropagation(), t.preventDefault();
+    },
+    onDrop(t) {
+      t.stopPropagation(), t.preventDefault();
+      const e = t.dataTransfer, b = Array.from(e.files).map((a) => a.name);
+      this.$emit("add-media", b);
+    },
+    onSkinTone(t) {
+      this.$emit("skin-tone", t);
+    },
+    onSelectEmoji(t) {
+      if (!t) {
+        this.emojiPickerOpened = !1;
+        return;
+      }
+      this.$refs.richTextEditor.editor.commands.insertContent({
+        type: "emoji",
+        attrs: {
+          code: t.shortname
+        }
+      }), this.emojiPickerOpened = !1, this.$emit("selected-emoji", t);
+    },
+    onSelectImage() {
+      this.$refs.messageInputImageUpload.$refs.input.click();
+    },
+    onImageUpload(t) {
+      this.$emit("select-media", t);
+    },
+    toggleEmojiPicker() {
+      this.emojiPickerOpened = !this.emojiPickerOpened;
+    },
+    onSend() {
+      this.isSendDisabled || this.$emit("submit", this.internalInputValue);
+    },
+    onCancel() {
+      this.$emit("cancel");
+    },
+    onFocus(t) {
+      this.hasFocus = !0, this.$refs.richTextEditor.focusEditor(), this.$emit("focus", t);
+    },
+    onBlur(t) {
+      this.hasFocus = !1, this.$emit("blur", t);
+    },
+    onInput(t) {
+      this.$emit("input", t);
+    }
+  }
+}, H = { class: "d-d-flex d-jc-space-between d-mx8 d-my4" }, N = { class: "d-d-flex" }, K = { class: "d-d-flex" }, W = { key: 0 };
+function X(t, e, n, b, a, i) {
+  const w = r("dt-rich-text-editor"), p = r("dt-icon"), f = r("dt-button"), P = r("dt-input"), h = r("dt-tooltip"), C = r("dt-emoji-picker"), y = r("dt-popover");
+  return u(), k("div", {
+    "data-qa": "dt-message-input",
+    role: "presentation",
+    class: S([
+      "d-d-flex",
+      "d-fd-column",
+      "d-bar8",
+      "d-baw1",
+      "d-ba",
+      "d-c-text",
+      { "d-bc-black-500 d-bs-sm": a.hasFocus, "d-bc-default": !a.hasFocus }
+    ]),
+    onClick: e[15] || (e[15] = (o) => t.$refs.richTextEditor.focusEditor()),
+    onDragEnter: e[16] || (e[16] = (...o) => i.onDrag && i.onDrag(...o)),
+    onDragOver: e[17] || (e[17] = (...o) => i.onDrag && i.onDrag(...o)),
+    onDrop: e[18] || (e[18] = (...o) => i.onDrop && i.onDrop(...o)),
+    onKeydown: e[19] || (e[19] = _(V((...o) => i.onSend && i.onSend(...o), ["exact"]), ["enter"]))
+  }, [
+    d("div", {
+      class: "d-of-auto d-mx16 d-mt8 d-mb4",
+      style: M({ "max-height": n.maxHeight })
+    }, [
+      l(w, j({
+        ref: "richTextEditor",
+        modelValue: a.internalInputValue,
+        "onUpdate:modelValue": e[0] || (e[0] = (o) => a.internalInputValue = o),
+        editable: n.editable,
+        "input-aria-label": n.inputAriaLabel,
+        "input-class": n.inputClass,
+        "output-format": n.outputFormat,
+        "auto-focus": n.autoFocus,
+        link: n.link,
+        placeholder: n.placeholder
+      }, t.$attrs, {
+        onFocus: i.onFocus,
+        onBlur: i.onBlur,
+        onInput: e[1] || (e[1] = (o) => i.onInput(o))
+      }), null, 16, ["modelValue", "editable", "input-aria-label", "input-class", "output-format", "auto-focus", "link", "placeholder", "onFocus", "onBlur"])
+    ], 4),
+    R(t.$slots, "middle"),
+    d("section", H, [
+      d("div", N, [
+        n.showImagePicker ? (u(), c(h, {
+          key: 0,
+          placement: "top-start",
+          message: n.showImagePicker.tooltipLabel,
+          offset: [-4, -4]
+        }, {
+          anchor: s(() => [
+            l(f, {
+              "data-qa": "dt-message-input-image-btn",
+              size: "sm",
+              circle: "",
+              kind: a.imagePickerFocus ? "default" : "muted",
+              importance: "clear",
+              "aria-label": n.showImagePicker.ariaLabel,
+              onClick: i.onSelectImage,
+              onMouseenter: e[2] || (e[2] = (o) => a.imagePickerFocus = !0),
+              onMouseleave: e[3] || (e[3] = (o) => a.imagePickerFocus = !1),
+              onFocus: e[4] || (e[4] = (o) => a.imagePickerFocus = !0),
+              onBlur: e[5] || (e[5] = (o) => a.imagePickerFocus = !1)
+            }, {
+              icon: s(() => [
+                l(p, {
+                  name: "image",
+                  size: "300"
+                })
+              ]),
+              _: 1
+            }, 8, ["kind", "aria-label", "onClick"]),
+            l(P, {
+              ref: "messageInputImageUpload",
+              "data-qa": "dt-message-input-image-input",
+              type: "file",
+              class: "d-ps-absolute",
+              multiple: "",
+              hidden: "",
+              onInput: i.onImageUpload
+            }, null, 8, ["onInput"])
+          ]),
+          _: 1
+        }, 8, ["message"])) : m("", !0),
+        n.showEmojiPicker ? (u(), c(y, {
+          key: 1,
+          "data-qa": "dt-message-input-emoji-picker-popover",
+          open: a.emojiPickerOpened,
+          "initial-focus-element": "#searchInput",
+          padding: "none",
+          onOpened: e[10] || (e[10] = (o) => {
+            a.emojiPickerOpened = o;
+          })
+        }, {
+          anchor: s(() => [
+            l(h, {
+              message: n.emojiTooltipMessage,
+              offset: [0, -4]
+            }, {
+              anchor: s(() => [
+                l(f, {
+                  "data-qa": "dt-message-input-emoji-picker-btn",
+                  size: "sm",
+                  circle: "",
+                  kind: i.emojiPickerHovered ? "default" : "muted",
+                  importance: "clear",
+                  "aria-label": n.emojiButtonAriaLabel,
+                  offset: [0, 0],
+                  onClick: i.toggleEmojiPicker,
+                  onMouseenter: e[6] || (e[6] = (o) => a.emojiPickerFocus = !0),
+                  onMouseleave: e[7] || (e[7] = (o) => a.emojiPickerFocus = !1),
+                  onFocus: e[8] || (e[8] = (o) => a.emojiPickerFocus = !0),
+                  onBlur: e[9] || (e[9] = (o) => a.emojiPickerFocus = !1)
+                }, {
+                  icon: s(() => [
+                    l(p, {
+                      name: i.emojiPickerHovered ? "very-satisfied" : "satisfied",
+                      size: "300"
+                    }, null, 8, ["name"])
+                  ]),
+                  _: 1
+                }, 8, ["kind", "aria-label", "onClick"])
+              ]),
+              _: 1
+            }, 8, ["message"])
+          ]),
+          content: s(() => [
+            l(C, j(n.emojiPickerProps, {
+              onSkinTone: i.onSkinTone,
+              onSelectedEmoji: i.onSelectEmoji
+            }), null, 16, ["onSkinTone", "onSelectedEmoji"])
+          ]),
+          _: 1
+        }, 8, ["open"])) : m("", !0)
+      ]),
+      d("div", K, [
+        n.showCharacterLimit ? (u(), c(h, {
+          key: 0,
+          class: "dt-message-input--remaining-char-tooltip",
+          placement: "top-end",
+          enabled: i.characterLimitTooltipEnabled,
+          message: n.showCharacterLimit.message,
+          offset: [10, -8]
+        }, {
+          anchor: s(() => [
+            q(d("p", {
+              class: "d-fc-error d-mr16 dt-message-input--remaining-char",
+              "data-qa": "dt-message-input-character-limit"
+            }, g(n.showCharacterLimit.count - i.inputLength), 513), [
+              [z, i.displayCharacterLimitWarning]
+            ])
+          ]),
+          _: 1
+        }, 8, ["enabled", "message"])) : m("", !0),
+        n.showCancel ? (u(), c(f, {
+          key: 1,
+          "data-qa": "dt-message-input-cancel-button",
+          class: "dt-message-input--cancel-button",
+          size: "sm",
+          kind: "muted",
+          importance: "clear",
+          "aria-label": n.showCancel.ariaLabel,
+          onClick: i.onCancel
+        }, {
+          default: s(() => [
+            d("p", null, g(n.showCancel.text), 1)
+          ]),
+          _: 1
+        }, 8, ["aria-label", "onClick"])) : m("", !0),
+        n.showSend ? (u(), c(h, {
+          key: 2,
+          placement: "top-end",
+          enabled: !n.showSend,
+          message: n.showSend.tooltipLabel,
+          show: !i.isSendDisabled && a.sendButtonFocus,
+          offset: [6, -8]
+        }, {
+          anchor: s(() => [
+            l(f, {
+              "data-qa": "dt-message-input-send-btn",
+              size: "sm",
+              kind: i.sendButtonKind,
+              circle: !!n.showSend.icon,
+              importance: "primary",
+              class: S({
+                "message-input-button__disabled d-fc-muted": i.isSendDisabled
+              }),
+              "aria-label": n.showSend.ariaLabel,
+              "aria-disabled": i.isSendDisabled,
+              onClick: i.onSend,
+              onMouseenter: e[11] || (e[11] = (o) => a.sendButtonFocus = !0),
+              onMouseleave: e[12] || (e[12] = (o) => a.sendButtonFocus = !1),
+              onFocus: e[13] || (e[13] = (o) => a.sendButtonFocus = !0),
+              onBlur: e[14] || (e[14] = (o) => a.sendButtonFocus = !1)
+            }, A({
+              default: s(() => [
+                n.showSend.text ? (u(), k("p", W, g(n.showSend.text), 1)) : m("", !0)
+              ]),
+              _: 2
+            }, [
+              n.showSend.icon ? {
+                name: "icon",
+                fn: s(() => [
+                  l(p, {
+                    name: n.showSend.icon,
+                    size: "300"
+                  }, null, 8, ["name"])
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["kind", "circle", "class", "aria-label", "aria-disabled", "onClick"])
+          ]),
+          _: 1
+        }, 8, ["enabled", "message", "show"])) : m("", !0)
+      ])
+    ])
+  ], 34);
+}
+const $ = /* @__PURE__ */ x(U, [["render", X]]);
+export {
+  $ as DtRecipeMessageInput,
+  L as DtRichTextEditor,
+  B as RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,
+  F as RICH_TEXT_EDITOR_OUTPUT_FORMATS
+};