UNPKG

ant-design-x-vue

Version:

Craft AI-driven interfaces effortlessly

272 lines (271 loc) 8.24 kB
import { defineComponent as ee, mergeDefaults as ne, toRef as te, useSlots as ae, computed as a, ref as d, watch as le, createVNode as l, mergeProps as oe } from "vue"; import { a as se, c as r } from "../attachments/Attachments2.mjs"; import { Input as ie, Flex as ue } from "ant-design-vue"; import ce from "../_util/pick-attrs.mjs"; import re from "../_util/hooks/use-x-component-config.mjs"; import "../x-provider/index.mjs"; import { SenderHeaderContextProvider as fe } from "./context.mjs"; import { ActionButtonContextProvider as de } from "./components/ActionButton/context.mjs"; import me from "./components/ClearButton.mjs"; import $ from "./components/LoadingButton.mjs"; import I from "./components/SendButton.mjs"; import B from "./components/SpeechButton/index.mjs"; import ve from "./style/index.mjs"; import ye from "./useSpeech.mjs"; import Ce from "../_util/getValue.mjs"; import he from "../x-provider/hooks/use-x-provider-context.mjs"; const ze = /* @__PURE__ */ ee({ name: "AXSender", __name: "Sender", props: ne({ onKeyPress: { type: Function }, onFocus: null, onBlur: null, prefixCls: null, defaultValue: null, value: null, loading: { type: Boolean }, placeholder: null, readOnly: { type: Boolean }, submitType: { type: [String, Boolean] }, disabled: { type: Boolean }, onSubmit: { type: Function }, onChange: { type: Function }, onCancel: null, onKeyDown: { type: Function }, onPaste: { type: Function }, onPasteFile: { type: Function }, components: null, styles: null, rootClassName: null, classNames: null, style: null, className: null, actions: { type: [Function, Boolean] }, allowSpeech: null, prefix: { type: Function }, footer: { type: Function }, header: { type: Function }, autoSize: null }, { styles: () => ({}), classNames: () => ({}), submitType: "enter", actions: void 0, disabled: void 0, autoSize: () => ({ maxRows: 8 }) }), emits: ["update:value"], setup(e, { expose: K, emit: R }) { const V = se(e, ["prefixCls", "styles", "classNames", "className", "rootClassName", "style", "defaultValue", "value", "placeholder", "readOnly", "submitType", "onSubmit", "loading", "components", "onCancel", "onChange", "actions", "onKeyPress", "onKeyDown", "disabled", "allowSpeech", "prefix", "footer", "header", "onPaste", "onPasteFile", "autoSize"]); te(e, "prefixCls"); function T(n, t, c) { return Ce(n, t) || c; } const m = { SendButton: I, ClearButton: me, LoadingButton: $, SpeechButton: B }, z = R, i = ae(), { direction: A, getPrefixCls: E } = he(), o = a(() => E("sender", e.prefixCls)), v = d(null), f = d(null), s = re("sender"), g = a(() => `${o.value}-input`), [k, O, X] = ve(o.value), L = a(() => r(o.value, s.value.className, e.className, e.rootClassName, O.value, X, { [`${o.value}-rtl`]: A.value === "rtl", [`${o.value}-disabled`]: e.disabled })), M = a(() => `${o.value}-actions-btn`), S = a(() => `${o.value}-actions-list`), u = d(e.value ?? e.defaultValue ?? ""), b = (n) => { u.value = n; }; le(() => e.value, () => { b(e.value); }); const y = (n, t) => { b(n), z("update:value", n), e.onChange && e.onChange(n, t); }, { speechPermission: j, triggerSpeech: x, recording: q } = ye((n) => { y(`${u.value} ${n}`); }, () => e.allowSpeech), H = T(e.components, ["input"], ie.TextArea), p = a(() => ce(V, { attr: !0, aria: !0, data: !0 })), G = a(() => ({ ...p.value, ref: f })), C = () => { u.value && e.onSubmit && !e.loading && e.onSubmit(u.value); }, J = () => { y(""); }, h = d(!1), Q = () => { h.value = !0; }, U = () => { h.value = !1; }, W = (n) => { const t = n.key === "Enter" && !h.value; switch (e.submitType) { case "enter": t && !n.shiftKey && (n.preventDefault(), C()); break; case "shiftEnter": t && n.shiftKey && (n.preventDefault(), C()); break; } e.onKeyPress && e.onKeyPress(n); }, Y = (n) => { var c, F; const t = (c = n.clipboardData) == null ? void 0 : c.files; t != null && t.length && e.onPasteFile && (e.onPasteFile(t[0], t), n.preventDefault()), (F = e.onPaste) == null || F.call(e, n); }, Z = (n) => { var t, c; n.target !== ((t = v.value) == null ? void 0 : t.querySelector(`.${g.value}`)) && n.preventDefault(), (c = f.value) == null || c.focus(); }, P = a(() => { let n = l(ue, { class: `${S.value}-presets` }, { default: () => [e.allowSpeech && l(B, typeof e.allowSpeech == "object" ? { audioIcon: e.allowSpeech.audioIcon, audioDisabledIcon: e.allowSpeech.audioDisabledIcon, audioRecordingIcon: e.allowSpeech.audioRecordingIcon } : {}, null), e.loading ? l($, null, null) : l(I, null, null)] }); const t = { components: m }; return i.actions ? n = i.actions({ ori: n, info: t }) : typeof e.actions == "function" ? n = e.actions(n, t) : (e.actions || e.actions === !1) && (n = e.actions), n; }), _ = a(() => ({ prefixCls: M.value, onSend: C, onSendDisabled: !u.value, onClear: J, onClearDisabled: !u.value, onCancel: e.onCancel, onCancelDisabled: !e.loading, onSpeech: () => x(!1), onSpeechDisabled: !j.value, speechRecording: q.value, disabled: e.disabled })), N = a(() => { let n = null; const t = { components: m }; return i.footer ? n = i.footer({ info: t }) : typeof e.footer == "function" ? n = e.footer({ components: m }) : e.footer && (n = e.footer), n; }), w = a(() => i.header ? i.header() : typeof e.header == "function" ? e.header() : e.header), D = a(() => i.prefix ? i.prefix() : typeof e.prefix == "function" ? e.prefix() : e.prefix); return K({ nativeElement: v.value, // @ts-expect-error focus: (n) => { var t; return (t = f.value) == null ? void 0 : t.focus(n); }, // @ts-expect-error blur: () => { var n; return (n = f.value) == null ? void 0 : n.blur(); } }), () => k(l("div", { ref: v, class: L.value, style: { ...s.value.style, ...e.style } }, [w.value && l(fe, { value: { prefixCls: o.value } }, { default: () => [w.value] }), l(de, { value: _.value }, { default: () => [l("div", { class: `${o.value}-content`, onMousedown: Z }, [D.value && l("div", { class: r(`${o.value}-prefix`, s.value.classNames.prefix, e.classNames.prefix), style: { ...s.value.styles.prefix, ...e.styles.prefix } }, [D.value]), l(H, oe(G.value, { disabled: e.disabled, style: { ...s.value.styles.input, ...e.styles.input }, class: r(g.value, s.value.classNames.input, e.classNames.input), autoSize: e.autoSize, value: u.value, onChange: (n) => { y(n.target.value, n), x(!0); }, onPressEnter: W, onCompositionstart: Q, onCompositionend: U, onKeydown: e.onKeyDown, placeholder: e.placeholder, onPaste: Y, bordered: !1, readOnly: e.readOnly }), null), P.value && l("div", { class: r(S.value, s.value.classNames.actions, e.classNames.actions), style: { ...s.value.styles.actions, ...e.styles.actions } }, [P.value])]), N.value && l("div", { class: r(`${o.value}-footer`, s.value.classNames.footer, e.classNames.footer), style: { ...s.value.styles.footer, ...e.styles.footer } }, [N.value])] })])); } }); export { ze as default };