ant-design-x-vue-next/es/sender/Sender.mjs

Ant Design X for Vue — community continuation aligned with @ant-design/x

import { defineComponent as Qe, useSlots as Ue, computed as a, ref as $, watch as We, createVNode as u, nextTick as Ye, mergeProps as Ze } from "vue";
import { Input as et, Flex as tt } from "ant-design-vue";
import { b as g } from "../chunks/module-chunk.mjs";
import nt from "../_util/pick-attrs.mjs";
import ot from "../_util/hooks/use-x-component-config.mjs";
import "../x-provider/index.mjs";
import { SenderHeaderContextProvider as lt } from "./context.mjs";
import { ActionButtonContextProvider as st } from "./components/ActionButton/context.mjs";
import at from "./components/ClearButton.mjs";
import ie from "./components/LoadingButton.mjs";
import re from "./components/SendButton.mjs";
import ut from "./components/SlotTextArea.mjs";
import ce from "./components/SpeechButton/index.mjs";
import it from "./style/index.mjs";
import rt from "./useSpeech.mjs";
import ct from "../_util/getValue.mjs";
import ft from "../x-provider/hooks/use-x-provider-context.mjs";
const kt = /* @__PURE__ */ Qe({
  name: "AXSender",
  __name: "Sender",
  props: {
    onKeyPress: {
      type: Function
    },
    onFocus: null,
    onBlur: null,
    prefixCls: null,
    defaultValue: null,
    value: null,
    loading: {
      type: Boolean,
      default: void 0
    },
    placeholder: null,
    readOnly: {
      type: Boolean
    },
    submitType: {
      type: [String, Boolean],
      default: "enter"
    },
    disabled: {
      type: Boolean,
      default: void 0
    },
    sendDisabled: {
      type: Boolean,
      default: void 0
    },
    slotConfig: null,
    skill: null,
    onSubmit: {
      type: Function
    },
    onChange: {
      type: Function
    },
    onCancel: null,
    onKeyDown: {
      type: Function
    },
    onPaste: {
      type: Function
    },
    onPasteFile: {
      type: Function
    },
    components: null,
    styles: {
      default: () => ({})
    },
    rootClassName: null,
    classNames: {
      default: () => ({})
    },
    style: null,
    className: null,
    actions: {
      type: [Function, Boolean],
      default: void 0
    },
    suffix: {
      type: [Function, Boolean],
      default: void 0
    },
    allowSpeech: null,
    prefix: {
      type: Function
    },
    footer: {
      type: Function
    },
    header: {
      type: Function
    },
    autoSize: {
      default: () => ({
        maxRows: 8
      })
    }
  },
  emits: ["update:value"],
  setup(fe, {
    expose: de,
    emit: pe
  }) {
    function ve(e, t, n) {
      return ct(e, t) || n;
    }
    const _ = {
      SendButton: re,
      ClearButton: at,
      LoadingButton: ie,
      SpeechButton: ce
    }, d = fe, me = pe, {
      prefixCls: ye,
      styles: p,
      classNames: v,
      className: ge,
      rootClassName: Ce,
      style: he,
      defaultValue: xe,
      value: B,
      placeholder: z,
      readOnly: M,
      submitType: X,
      onSubmit: N,
      sendDisabled: m,
      loading: F,
      components: Se,
      onCancel: be,
      onChange: j,
      actions: S,
      suffix: D,
      onKeyPress: L,
      onKeyDown: q,
      disabled: P,
      allowSpeech: C,
      prefix: k,
      footer: I,
      header: w,
      onPaste: R,
      onPasteFile: H,
      autoSize: $e,
      slotConfig: dt,
      skill: pt,
      ...Ne
    } = d, c = Ue(), {
      direction: De,
      getPrefixCls: Pe
    } = ft(), i = a(() => Pe("sender", ye)), V = $(null), h = $(null), s = $(null), r = a(() => {
      var e;
      return !!((e = d.slotConfig) != null && e.length || d.skill);
    }), l = ot("sender"), G = a(() => `${i.value}-input`), [Ie, _e, Be] = it(i.value), Fe = a(() => {
      var e;
      return g(i.value, l.value.className, (e = l.value.classNames) == null ? void 0 : e.root, v.root, ge, Ce, _e.value, Be, {
        [`${i.value}-rtl`]: De.value === "rtl",
        [`${i.value}-disabled`]: P
      });
    }), ke = a(() => {
      var e;
      return {
        ...l.value.style,
        ...he,
        ...((e = l.value.styles) == null ? void 0 : e.root) || {},
        ...p.root || {}
      };
    }), we = () => {
      var e, t, n;
      if (r.value) {
        const o = (e = s.value) == null ? void 0 : e.nativeElement;
        return o && typeof o == "object" && "value" in o ? o.value ?? null : o ?? null;
      }
      return ((n = (t = h.value) == null ? void 0 : t.resizableTextArea) == null ? void 0 : n.textArea) ?? null;
    }, Re = a(() => `${i.value}-actions-btn`), J = a(() => `${i.value}-actions-list`), y = $(B ?? xe ?? ""), O = (e) => {
      y.value = e;
    };
    We(() => B, () => {
      O(B);
    });
    const x = (e, t, n, o) => {
      O(e), me("update:value", e), j && j(e, t, n, o);
    }, Ve = (e, t, n, o) => {
      x(e, t, n, o);
    }, {
      speechPermission: Ke,
      triggerSpeech: Q,
      recording: Ae
    } = rt((e) => {
      x(`${y.value} ${e}`);
    }, () => C), Ee = ve(Se, ["input"], et.TextArea), Te = a(() => nt(Ne, {
      attr: !0,
      aria: !0,
      data: !0
    })), ze = a(() => ({
      ...Te.value,
      ref: h
    })), K = () => {
      var n;
      if (r.value && s.value) {
        const o = s.value.getValue();
        (m !== void 0 ? !m : !!(o.value || (n = d.slotConfig) != null && n.length)) && !!N && N(o.value, o.slotConfig, o.skill);
        return;
      }
      (m !== void 0 ? !m : !!(y.value && !F)) && !!N && N(y.value);
    }, U = () => {
      if (r.value && s.value) {
        s.value.clear();
        return;
      }
      x("");
    }, Me = () => {
      var t, n, o;
      if (m !== void 0)
        return m;
      const e = (n = (t = s.value) == null ? void 0 : t.getValue) == null ? void 0 : n.call(t);
      return !(e != null && e.value || (o = d.slotConfig) != null && o.length);
    }, Xe = () => {
      var t, n, o;
      const e = (n = (t = s.value) == null ? void 0 : t.getValue) == null ? void 0 : n.call(t);
      return !(e != null && e.value) && !((o = d.slotConfig) != null && o.length) && !d.skill;
    }, A = $(!1), je = () => {
      A.value = !0;
    }, Le = () => {
      A.value = !1;
    }, W = (e) => {
      const t = e.key === "Enter" && !A.value;
      switch (X) {
        case "enter":
          t && !e.shiftKey && (e.preventDefault(), K());
          break;
        case "shiftEnter":
          t && e.shiftKey && (e.preventDefault(), K());
          break;
      }
      L && L(e);
    }, qe = (e) => {
      var n;
      const t = (n = e.clipboardData) == null ? void 0 : n.files;
      t != null && t.length && H && (H(t[0], t), e.preventDefault()), R == null || R(e);
    }, He = (e) => {
      var t, n, o;
      if (e.target !== ((t = V.value) == null ? void 0 : t.querySelector(`.${G.value}`)) && e.preventDefault(), r.value) {
        (n = s.value) == null || n.focus({
          cursor: "end"
        });
        return;
      }
      (o = h.value) == null || o.focus();
    }, Y = a(() => {
      let e = u(tt, {
        class: `${J.value}-presets`
      }, {
        default: () => [C && u(ce, typeof C == "object" ? {
          audioIcon: C.audioIcon,
          audioDisabledIcon: C.audioDisabledIcon,
          audioRecordingIcon: C.audioRecordingIcon
        } : {}, null), F ? u(ie, null, null) : u(re, null, null)]
      });
      const t = {
        components: _
      };
      return c.suffix ? e = c.suffix({
        ori: e,
        info: t
      }) : D !== void 0 ? typeof D == "function" ? e = D(e, t) : e = D : c.actions ? e = c.actions({
        ori: e,
        info: t
      }) : typeof S == "function" ? e = S(e, t) : (S || S === !1) && (e = S), e;
    }), Ge = a(() => ({
      prefixCls: Re.value,
      onSend: K,
      onSendDisabled: r.value ? Me() : m !== void 0 ? m : !y.value,
      onClear: U,
      onClearDisabled: r.value ? Xe() : !y.value,
      onCancel: be,
      onCancelDisabled: !F,
      onSpeech: () => Q(!1),
      onSpeechDisabled: !Ke.value,
      speechRecording: Ae.value,
      disabled: P
    })), Z = a(() => {
      let e = null;
      const t = {
        components: _
      };
      return c.footer ? e = c.footer({
        info: t
      }) : typeof I == "function" ? e = I({
        components: _
      }) : I && (e = I), e;
    }), ee = a(() => c.header ? c.header() : typeof w == "function" ? w() : w), te = a(() => c.prefix ? c.prefix() : typeof k == "function" ? k() : k);
    return de({
      nativeElement: V,
      get inputElement() {
        return we();
      },
      focus: (e) => {
        var t, n;
        if (r.value) {
          (t = s.value) == null || t.focus(e);
          return;
        }
        (n = h.value) == null || n.focus(e);
      },
      blur: () => {
        var e, t;
        if (r.value) {
          (e = s.value) == null || e.blur();
          return;
        }
        (t = h.value) == null || t.blur();
      },
      insert: (e, t, n, o) => {
        var ne, oe, le, se;
        if (r.value) {
          if (typeof e == "string") {
            (ne = s.value) == null || ne.insert(e);
            return;
          }
          (oe = s.value) == null || oe.insert(e, t, n, o);
          return;
        }
        const b = typeof e == "string" ? e : "";
        if (!b) return;
        const f = (se = (le = h.value) == null ? void 0 : le.resizableTextArea) == null ? void 0 : se.textArea, E = y.value ?? "";
        if (f && typeof f.selectionStart == "number") {
          const T = f.selectionStart, Je = f.selectionEnd ?? T, Oe = `${E.slice(0, T)}${b}${E.slice(Je)}`;
          x(Oe), Ye(() => {
            var ue;
            const ae = T + b.length;
            f.focus(), f.setSelectionRange(ae, ae), o || (ue = f.scrollIntoView) == null || ue.call(f, {
              block: "nearest"
            });
          });
          return;
        }
        x(`${E}${b}`);
      },
      clear: () => {
        var e;
        if (r.value) {
          (e = s.value) == null || e.clear();
          return;
        }
        U();
      },
      getValue: () => {
        var e;
        return (e = s.value) == null ? void 0 : e.getValue();
      }
    }), () => Ie(u("div", {
      ref: V,
      class: Fe.value,
      style: ke.value
    }, [ee.value && u(lt, {
      value: {
        prefixCls: i.value
      }
    }, {
      default: () => [ee.value]
    }), u(st, {
      value: Ge.value
    }, {
      default: () => {
        var e, t;
        return [u("div", {
          class: g(`${i.value}-content`, (e = l.value.classNames) == null ? void 0 : e.content, v.content),
          style: {
            ...((t = l.value.styles) == null ? void 0 : t.content) || {},
            ...p.content || {}
          },
          onMousedown: He
        }, [te.value && u("div", {
          class: g(`${i.value}-prefix`, l.value.classNames.prefix, v.prefix),
          style: {
            ...l.value.styles.prefix,
            ...p.prefix
          }
        }, [te.value]), r.value ? u(ut, {
          ref: s,
          prefixCls: i.value,
          slotConfig: d.slotConfig,
          skill: d.skill,
          disabled: P,
          readOnly: M,
          placeholder: z,
          submitType: X,
          style: {
            ...l.value.styles.input,
            ...p.input
          },
          class: g(l.value.classNames.input, v.input),
          onChange: Ve,
          onKeyPress: W,
          onKeyDown: q
        }, null) : u(Ee, Ze(ze.value, {
          disabled: P,
          style: {
            ...l.value.styles.input,
            ...p.input
          },
          class: g(G.value, l.value.classNames.input, v.input),
          autoSize: $e,
          value: y.value,
          onChange: (n) => {
            x(n.target.value, n), Q(!0);
          },
          onPressEnter: W,
          onCompositionstart: je,
          onCompositionend: Le,
          onKeydown: q,
          placeholder: z,
          onPaste: qe,
          bordered: !1,
          readOnly: M
        }), null), Y.value && u("div", {
          class: g(J.value, l.value.classNames.suffix, l.value.classNames.actions, v.suffix, v.actions),
          style: {
            ...l.value.styles.actions,
            ...l.value.styles.suffix,
            ...p.actions,
            ...p.suffix
          }
        }, [Y.value])]), Z.value && u("div", {
          class: g(`${i.value}-footer`, l.value.classNames.footer, v.footer),
          style: {
            ...l.value.styles.footer,
            ...p.footer
          }
        }, [Z.value])];
      }
    })]));
  }
});
export {
  kt as default
};