ant-design-x-vue
Version:
Craft AI-driven interfaces effortlessly
272 lines (271 loc) • 8.24 kB
JavaScript
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
};