@king-design/vue 3.6.2 → 3.8.0-beta.0

package/components/sender/sender.d.ts

@@ -0,0 +1,104 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+import type { Events } from '../types';
+import type { FileCardListItem } from '../fileCard';
+import type { RequestError } from '../upload';
+export type SenderType = 'text' | 'image';
+export interface SenderAttachment extends FileCardListItem {
+    uid?: number | string;
+    raw?: File;
+    relativePath?: string;
+    /** 进行中的 XHR，用于删除时 abort */
+    request?: {
+        abort(): void;
+    } | null;
+}
+export interface SenderUploadProps {
+    accept?: string;
+    multiple?: boolean;
+    directory?: boolean;
+    limit?: number;
+    maxSize?: number;
+    autoUpload?: boolean;
+    action?: string;
+    timeout?: number;
+    name?: string;
+    headers?: Record<string | number, string>;
+    data?: Record<string, any> | ((file: SenderAttachment) => Record<string, any>);
+    mapAttachment?: (file: File, attachment: SenderAttachment) => Partial<SenderAttachment>;
+    withCredentials?: boolean;
+    beforeUpload?: (file: SenderAttachment, files: SenderAttachment[]) => boolean | Promise<boolean>;
+    beforeRemove?: (file: SenderAttachment, files: SenderAttachment[]) => boolean | Promise<boolean>;
+}
+export interface SendButtonSlotParams {
+    generating: boolean;
+    disabled: boolean;
+    loading: boolean;
+    send: () => void;
+    stopGenerate: () => void;
+}
+export interface MessageSendPayload {
+    value: string;
+    attachments: SenderAttachment[];
+}
+export interface SenderProps {
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    generating?: boolean;
+    loading?: boolean;
+    type?: SenderType;
+    dragFile?: boolean;
+    pasteFile?: boolean;
+    /** 整个输入外框 `k-sender` 的宽度，数字会按 `px` 处理 */
+    width?: number | string;
+    /** 整个输入外框 `k-sender-shell` 的最大高度（非文本域单宽），未传时默认 300 */
+    maxHeight?: number | string;
+    attachments?: SenderAttachment[];
+    uploadProps?: SenderUploadProps;
+    showAttachmentsButton?: boolean;
+    submitOnEnter?: boolean;
+    clearOnSend?: boolean;
+}
+export interface SenderEvents {
+    messageSend: [MessageSendPayload];
+    stopGenerate: [];
+    pressEnter: [KeyboardEvent];
+    focus: [FocusEvent];
+    blur: [FocusEvent];
+    attachmentClick: [SenderAttachment, MouseEvent];
+    attachmentDelete: [SenderAttachment, MouseEvent];
+    uploadProgress: [ProgressEvent, SenderAttachment];
+    uploadSuccess: [any, SenderAttachment];
+    uploadError: [Error | RequestError, SenderAttachment];
+}
+export interface SenderBlocks {
+    header: null;
+    beforeInput: null;
+    footer: null;
+    configure: null;
+    attachmentsButton: null;
+    sendButton: SendButtonSlotParams;
+}
+export declare class Sender extends Component<SenderProps, SenderEvents, SenderBlocks> {
+    static template: string | import('intact-vue-next').Template<any>;
+    static typeDefs: Required<TypeDefs<SenderProps>>;
+    static defaults: () => Partial<SenderProps>;
+    static events: Events<SenderEvents>;
+    private config;
+    private textareaRef;
+    private fileInputRef;
+    private input;
+    private autoResize;
+    private upload;
+    private dragController;
+    private pasteController;
+    focus(): void;
+    blur(): void;
+    /** 主动触发发送，等价于点击发送按钮。生成中时不会触发。 */
+    submit(): void;
+    /** 清空输入框与附件列表，并中止进行中的上传；不影响 generating / loading 等受控状态。 */
+    clear(): void;
+    /** 主动触发停止生成，等价于点击生成中的停止按钮。 */
+    stopGenerate(): void;
+}

package/components/sender/sender.js

@@ -0,0 +1,111 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component, createRef } from 'intact-vue-next';
+import template from './sender.vdt';
+import { useConfigContext } from '../config';
+import { useSenderInput } from './useSenderInput';
+import { useSenderUpload } from './useSenderUpload';
+import { useAutoResize } from './useAutoResize';
+import { useSenderDrag } from './useSenderDrag';
+import { useSenderPaste } from './useSenderPaste';
+var typeDefs = {
+  value: String,
+  placeholder: String,
+  disabled: Boolean,
+  readonly: Boolean,
+  generating: Boolean,
+  loading: Boolean,
+  type: ['text', 'image'],
+  dragFile: Boolean,
+  pasteFile: Boolean,
+  width: [String, Number],
+  maxHeight: [String, Number],
+  attachments: Array,
+  uploadProps: Object,
+  showAttachmentsButton: Boolean,
+  submitOnEnter: Boolean,
+  clearOnSend: Boolean
+};
+var defaults = function defaults() {
+  return {
+    value: '',
+    placeholder: undefined,
+    disabled: false,
+    readonly: false,
+    generating: false,
+    loading: false,
+    type: 'text',
+    dragFile: false,
+    pasteFile: false,
+    width: 640,
+    maxHeight: undefined,
+    attachments: undefined,
+    uploadProps: undefined,
+    showAttachmentsButton: true,
+    submitOnEnter: true,
+    clearOnSend: true
+  };
+};
+var events = {
+  messageSend: true,
+  stopGenerate: true,
+  pressEnter: true,
+  focus: true,
+  blur: true,
+  attachmentClick: true,
+  attachmentDelete: true,
+  uploadProgress: true,
+  uploadSuccess: true,
+  uploadError: true
+};
+export var Sender = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Sender, _Component);
+  function Sender() {
+    var _context;
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.config = useConfigContext();
+    _this.textareaRef = createRef();
+    _this.fileInputRef = createRef();
+    _this.input = useSenderInput(_this.textareaRef);
+    _this.autoResize = useAutoResize(_this.textareaRef);
+    _this.upload = useSenderUpload(_this.fileInputRef);
+    _this.dragController = useSenderDrag(_this.upload.addFiles);
+    _this.pasteController = useSenderPaste(_this.upload.addFiles);
+    return _this;
+  }
+  var _proto = Sender.prototype;
+  _proto.focus = function focus() {
+    var _this$textareaRef$val;
+    (_this$textareaRef$val = this.textareaRef.value) == null || _this$textareaRef$val.focus();
+  };
+  _proto.blur = function blur() {
+    var _this$textareaRef$val2;
+    (_this$textareaRef$val2 = this.textareaRef.value) == null || _this$textareaRef$val2.blur();
+  }
+  /** 主动触发发送，等价于点击发送按钮。生成中时不会触发。 */;
+  _proto.submit = function submit() {
+    this.input.send();
+  }
+  /** 清空输入框与附件列表，并中止进行中的上传；不影响 generating / loading 等受控状态。 */;
+  _proto.clear = function clear() {
+    this.set('value', '');
+    var attachments = this.get('attachments');
+    if (attachments && attachments.length > 0) {
+      void this.upload.clearAttachments();
+    }
+  }
+  /** 主动触发停止生成，等价于点击生成中的停止按钮。 */;
+  _proto.stopGenerate = function stopGenerate() {
+    if (!this.get('generating')) return;
+    this.input.stopGenerate();
+  };
+  return Sender;
+}(Component);
+Sender.template = template;
+Sender.typeDefs = typeDefs;
+Sender.defaults = defaults;
+Sender.events = events;

package/components/sender/sender.vdt.js

@@ -0,0 +1,230 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { createElementVNode as _$ce, className as _$cn, createUnknownComponentVNode as _$cc, createVNode as _$cv, extend as _$ex, EMPTY_OBJ as _$em, noop as _$no, createCommentVNode as _$ccv } from 'intact-vue-next';
+import { FileCardList } from '../fileCard';
+import { Icon } from '../icon';
+import { addStyle, getRestProps } from '../utils';
+import { makeStyles } from './styles';
+import { senderSendIcon, senderStopIcon, senderAttachSvg } from './icons';
+import { _$ } from '../../i18n';
+import { isInvalid, isNumber, noop } from 'intact-shared';
+var _$tmp0 = {
+  'aria-hidden': 'true'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _this = this,
+    _classNameObj,
+    _$cn2,
+    _$cn3,
+    _$cn4;
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _$blocks = {};
+  var __$blocks = {};
+  var _this$input = this.input,
+    isFocus = _this$input.isFocus,
+    isDisabled = _this$input.isDisabled,
+    isGenerating = _this$input.isGenerating,
+    isLoading = _this$input.isLoading,
+    isSendButtonDisabled = _this$input.isSendButtonDisabled,
+    handleKeydown = _this$input.handleKeydown,
+    handleInput = _this$input.handleInput,
+    handleFocus = _this$input.handleFocus,
+    handleBlur = _this$input.handleBlur,
+    handleSendClick = _this$input.handleSendClick,
+    send = _this$input.send,
+    stopGenerate = _this$input.stopGenerate;
+  var _this$upload = this.upload,
+    getAcceptAttr = _this$upload.getAcceptAttr,
+    isMultiple = _this$upload.isMultiple,
+    onInputChange = _this$upload.onInputChange,
+    pickFiles = _this$upload.pickFiles,
+    removeAttachment = _this$upload.removeAttachment;
+  var dragController = this.dragController;
+  var handlePaste = this.pasteController.handlePaste;
+  var _this$get = this.get(),
+    className = _this$get.className,
+    style = _this$get.style,
+    value = _this$get.value,
+    placeholder = _this$get.placeholder,
+    readonly = _this$get.readonly,
+    width = _this$get.width,
+    maxHeight = _this$get.maxHeight,
+    type = _this$get.type,
+    enableDragFile = _this$get.dragFile,
+    attachments = _this$get.attachments,
+    showAttachmentsButton = _this$get.showAttachmentsButton,
+    uploadProps = _this$get.uploadProps;
+  var k = this.config.k;
+  var isEmptySlot = function isEmptySlot(value) {
+    if (isInvalid(value) || value === undefined || value === null || value === '') return true;
+    if (Array.isArray(value)) return value.every(function (item) {
+      return isEmptySlot(item);
+    });
+    if (value && value.type === 1) return isEmptySlot(value.children);
+    return false;
+  };
+  var renderSlot = function renderSlot(name) {
+    return $blocks[name] ? $blocks[name](noop) : undefined;
+  };
+  var headerSlot = renderSlot('header');
+  var footerSlot = renderSlot('footer');
+  var beforeInputSlot = renderSlot('beforeInput');
+  var configureSlot = renderSlot('configure');
+  var attachmentsButtonSlot = renderSlot('attachmentsButton');
+  var hasHeaderSlot = !isEmptySlot(headerSlot);
+  var hasFooterSlot = !isEmptySlot(footerSlot);
+  var hasBeforeInputSlot = !isEmptySlot(beforeInputSlot);
+  var hasConfigureSlot = !isEmptySlot(configureSlot);
+  var hasAttachmentsButtonSlot = !isEmptySlot(attachmentsButtonSlot);
+  var disabled = isDisabled();
+  var generating = isGenerating();
+  var loading = isLoading();
+  var sendDisabled = isSendButtonDisabled();
+  var list = attachments || [];
+  var hasAttachments = list.length > 0;
+  var limit = uploadProps && uploadProps.limit;
+  var reachLimit = limit !== undefined && limit !== null && list.length >= Number(limit);
+  var isImage = type === 'image';
+  var isDirectory = !!(uploadProps && uploadProps.directory);
+
+  // 文本模式下，所有附件统一按「文件卡」呈现，避免引入额外的文件夹展示语义。
+  // 图片模式下把 type 交给 FileCard 自动识别（基于 name/src），避免业务透传 MIME 干扰媒体类型判断。
+  var renderItems = isImage ? _mapInstanceProperty(list).call(list, function (it) {
+    return _extends({}, it, {
+      type: undefined
+    });
+  }) : _mapInstanceProperty(list).call(list, function (it) {
+    return _extends({}, it, {
+      type: 'file'
+    });
+  });
+
+  // 图片模式即便没有附件也要展示 FileCardList，用来承载末尾的虚线 + 框。
+  var showAttachmentsArea = isImage || hasAttachments;
+  // 图片模式下不展示左下默认附件按钮，由 FileCardList 末尾的 + 框替代；用户自定义 slot 仍可保留。
+  var showDefaultAttachBtn = !isImage && !$blocks.attachmentsButton && showAttachmentsButton !== false;
+  var showAttachSlot = !isImage && hasAttachmentsButtonSlot;
+  var showToolbarLeft = showAttachSlot || showDefaultAttachBtn;
+  var onAttachmentClick = function onAttachmentClick(item, e) {
+    _this.trigger('attachmentClick', item, e);
+  };
+  var onAttachmentDelete = function onAttachmentDelete(item, e) {
+    _this.trigger('attachmentDelete', item, e);
+    removeAttachment(item);
+  };
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-sender"] = true, _classNameObj[k + "-sender-" + type] = true, _classNameObj[k + "-sender-disabled"] = disabled, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
+
+  // 整个输入外框 k-sender 的宽度
+  if (width != null) {
+    style = addStyle(style, {
+      width: isNumber(width) ? width + "px" : width
+    });
+  }
+
+  // 整个输入外框 k-sender-shell 的最大高度（与 props maxHeight 一致）；未传时走 styles 中默认 300
+  var shellStyle = maxHeight != null ? {
+    maxHeight: isNumber(maxHeight) ? maxHeight + "px" : maxHeight
+  } : undefined;
+  var placeholderText = placeholder != null ? placeholder : _$('输入对话内容（Enter发送， Shift + Enter 换行）');
+  var defaultSendButton = _$ce(2, 'button', _$ce(2, 'img', null, 1, _$cn(k + "-sender-send-icon"), {
+    'src': generating ? senderStopIcon : senderSendIcon,
+    'alt': '',
+    'draggable': false
+  }), 2, _$cn(k + "-sender-send-btn"), {
+    'type': 'button',
+    'disabled': !generating && sendDisabled,
+    'ev-click': handleSendClick,
+    'title': generating ? _$('停止生成') : _$('发送'),
+    'aria-label': generating ? _$('停止生成') : _$('发送')
+  });
+  var defaultAttachButton = _$ce(2, 'button', null, 1, _$cn(k + "-sender-attach-btn"), {
+    'type': 'button',
+    'disabled': disabled,
+    'ev-click': pickFiles,
+    'title': isDirectory ? _$('上传文件夹') : _$('上传附件'),
+    'aria-label': isDirectory ? _$('上传文件夹') : _$('上传附件'),
+    'innerHTML': senderAttachSvg
+  });
+
+  // type='image' 末尾的虚线 + 框，与 Upload 画廊的 + 卡片视觉等效；点击触发文件选择。
+  var imageAddBox = _$ce(2, 'div', _$cc(Icon, {
+    'className': _$cn(k + "-icon-add-bold"),
+    'size': 'large'
+  }), 2, _$cn((_$cn2 = {}, _$cn2[k + "-sender-image-add"] = true, _$cn2[k + "-sender-image-add-disabled"] = disabled, _$cn2)), {
+    'ev-click': disabled ? undefined : pickFiles,
+    'role': 'button',
+    'title': _$('上传图片'),
+    'aria-label': _$('上传图片')
+  });
+  var sendButtonSlotParams = {
+    generating: generating,
+    disabled: sendDisabled,
+    loading: loading,
+    send: send,
+    stopGenerate: stopGenerate
+  };
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this), {
+    'style': style
+  }), [hasHeaderSlot ? _$ce(2, 'div', headerSlot, 0, _$cn(k + "-sender-header")) : undefined, _$ce(2, 'div', [showAttachmentsArea ? _$ce(2, 'div', isImage ? _$cc(FileCardList, {
+    'items': renderItems,
+    'deleteable': true,
+    'overflow': 'scrollY',
+    'ev-click': onAttachmentClick,
+    'ev-delete': onAttachmentDelete,
+    '$blocks': function ($blocks) {
+      var _$blocks = {},
+        __$blocks = _$ex({}, $blocks);
+      return (_$blocks['extension'] = function ($super) {
+        return !disabled && !reachLimit ? imageAddBox : undefined;
+      }, __$blocks['extension'] = function ($super, data) {
+        var block = $blocks['extension'];
+        var callBlock = function callBlock() {
+          return _$blocks['extension'].call($this, $super, data);
+        };
+        return block ? block.call($this, callBlock, data) : callBlock();
+      }), __$blocks;
+    }.call($this, _$em)
+  }) : _$cc(FileCardList, {
+    'items': renderItems,
+    'deleteable': true,
+    'overflow': 'scrollY',
+    'ev-click': onAttachmentClick,
+    'ev-delete': onAttachmentDelete
+  }), 2, _$cn((_$cn3 = {}, _$cn3[k + "-sender-attachments"] = true, _$cn3[k + "-sender-attachments-" + type] = true, _$cn3))) : undefined, hasBeforeInputSlot ? _$ce(2, 'div', beforeInputSlot, 0, _$cn(k + "-sender-before-input")) : undefined, _$ce(2, 'div', _$ce(256, 'textarea', null, 1, _$cn(k + "-sender-input"), {
+    'rows': 1,
+    'value': value,
+    'placeholder': placeholderText,
+    'disabled': disabled,
+    'readOnly': readonly,
+    'ev-input': handleInput,
+    'ev-keydown': handleKeydown,
+    'ev-paste': handlePaste,
+    'ev-focus': handleFocus,
+    'ev-blur': handleBlur
+  }, null, this.textareaRef), 2, _$cn(k + "-sender-input-area")), _$ce(2, 'div', [showToolbarLeft ? _$ce(2, 'div', showAttachSlot ? attachmentsButtonSlot : showDefaultAttachBtn ? defaultAttachButton : undefined, 0, _$cn(k + "-sender-toolbar-left")) : undefined, hasConfigureSlot ? _$ce(2, 'div', configureSlot, 0, _$cn(k + "-sender-toolbar-middle")) : undefined, _$ce(2, 'div', $blocks.sendButton ? (_$blocks['sendButton'] = function ($super) {
+    return null;
+  }, __$blocks['sendButton'] = function ($super, data) {
+    var block = $blocks['sendButton'];
+    var callBlock = function callBlock() {
+      return _$blocks['sendButton'].call($this, $super, data);
+    };
+    return block ? block.call($this, callBlock, data) : callBlock();
+  }, __$blocks['sendButton'](_$no, sendButtonSlotParams)) : defaultSendButton, 0, _$cn(k + "-sender-toolbar-right"))], 0, _$cn(k + "-sender-toolbar")), _$ccv(' 放末尾，避免挡住 attachments + input-area 等相邻选择器，且 absolute 不影响布局 '), _$ce(64, 'input', null, 1, _$cn(k + "-sender-file-input"), {
+    'type': 'file',
+    'accept': getAcceptAttr(),
+    'multiple': isMultiple(),
+    'directory': isDirectory ? '' : undefined,
+    'webkitdirectory': isDirectory ? '' : undefined,
+    'ev-change': onInputChange
+  }, null, this.fileInputRef)], 0, _$cn((_$cn4 = {}, _$cn4[k + "-sender-shell"] = true, _$cn4[k + "-sender-active"] = isFocus.value && !disabled, _$cn4)), {
+    'style': shellStyle
+  }), hasFooterSlot ? _$ce(2, 'div', footerSlot, 0, _$cn(k + "-sender-footer")) : undefined, enableDragFile && dragController.dragOver.value ? _$ce(2, 'div', _$ce(2, 'div', [_$cc(Icon, {
+    'className': _$cn(k + "-icon-upload"),
+    'size': 'large'
+  }), _$ce(2, 'div', _$('文件拖动到此处即可上传'), 0, _$cn(k + "-sender-drag-text"))], 4, _$cn(k + "-sender-drag-card")), 2, _$cn(k + "-sender-drag-mask"), _$tmp0) : undefined]);
+}
+;

package/components/sender/styles.d.ts

@@ -0,0 +1,5 @@
+import '../../styles/global';
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/components/sender/styles.js

@@ -0,0 +1,56 @@
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+import { cache } from '../utils';
+// 用于复用的渐变色：默认态半透明，hover/active 实色，与设计稿一致。
+var SENDER_GRADIENT_DEFAULT = 'linear-gradient(101.07deg, rgba(0, 221, 221, 0.5) -7.07%, rgba(83, 112, 255, 0.5) 48.92%, rgba(113, 47, 255, 0.5) 104.92%)';
+var SENDER_GRADIENT_ACTIVE = 'linear-gradient(101.07deg, #00DDDD -7.07%, #5370FF 48.92%, #712FFF 104.92%)';
+var defaults = {
+  radius: '12px',
+  // 输入框外框（k-sender-shell）统一 12，区块间距在下方用 margin 控制
+  padding: '12px',
+  // 与 useAutoResize 中 SHELL_MAX_FALLBACK 一致
+  shellMaxH: '300px',
+  gapHeaderToShell: '4px',
+  gapShellToFooter: '4px',
+  // 区块间距：附件↔上插槽 8；附件/上插槽↔文字区 16；文字区↔工具条 8
+  gapAttachToTop: '8px',
+  gapTopToInput: '16px',
+  gapInputToToolbar: '8px',
+  bg: '#FFFFFF',
+  color: theme.color.text,
+  placeholderColor: theme.color.placeholder,
+  disabledBg: theme.color.disabledBg,
+  disabledColor: theme.color.disabled,
+  fontSize: theme.fontSize,
+  lineHeight: 1.5,
+  gradientDefault: SENDER_GRADIENT_DEFAULT,
+  gradientActive: SENDER_GRADIENT_ACTIVE,
+  sendButtonSize: '32px',
+  attachButtonSize: '16px',
+  attachIconColor: '#868A9C',
+  attachIconHoverColor: theme.color.primary,
+  // type='image' 末尾的 + 框，尺寸和 FileCard image default 对齐
+  imageAddSize: '64px',
+  imageAddRadius: '4px',
+  imageAddBg: '#FFFFFF',
+  imageAddBorder: '1px dashed #D0D5E0',
+  imageAddColor: '#868A9C',
+  dragMaskBg: 'rgba(255, 255, 255, 0.72)',
+  dragCardColor: '#5370FF',
+  dragCardTextColor: theme.color.text,
+  // 与 FileCardList 一致的滚动条样式
+  scrollbarThumb: 'rgba(63, 68, 81, 0.26)',
+  scrollbarThumbHover: 'rgba(63, 68, 81, 0.42)'
+};
+var sender;
+setDefault(function () {
+  sender = deepDefaults(theme, {
+    sender: defaults
+  }).sender;
+  makeStyles == null || makeStyles.clearCache();
+});
+export var makeStyles = cache(function makeStyles(k) {
+  return /*#__PURE__*/css("position:relative;display:flex;flex-direction:column;box-sizing:border-box;.", k, "-sender-header,.", k, "-sender-footer{box-sizing:border-box;flex:0 0 auto;}.", k, "-sender-header{margin-bottom:", sender.gapHeaderToShell, ";}.", k, "-sender-footer{margin-top:", sender.gapShellToFooter, ";}.", k, "-sender-shell{position:relative;display:flex;flex-direction:column;box-sizing:border-box;max-height:", sender.shellMaxH, ";padding:", sender.padding, ";background:", sender.bg, ";border-radius:", sender.radius, ";transition:background ", theme.transition.middle, ";min-width:0;overflow:hidden;}.", k, "-sender-shell::before{content:'';position:absolute;inset:0;padding:1px;border-radius:inherit;background:", sender.gradientDefault, ";-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none;transition:background ", theme.transition.middle, ",opacity ", theme.transition.middle, ";}.", k, "-sender-shell:hover::before,.", k, "-sender-shell.", k, "-sender-active::before{background:", sender.gradientActive, ";}&.", k, "-sender-disabled .", k, "-sender-shell::before{opacity:0.5;}&.", k, "-sender-disabled .", k, "-sender-shell{background:", sender.disabledBg, ";}.", k, "-sender-attachments{padding:0;box-sizing:border-box;min-width:0;flex:0 0 auto;}.", k, "-sender-attachments-image .", k, "-file-card-list{min-width:0;}.", k, "-sender-before-input{margin-bottom:", sender.gapTopToInput, ";padding:0;box-sizing:border-box;flex:0 0 auto;}.", k, "-sender-attachments+.", k, "-sender-before-input{margin-top:", sender.gapAttachToTop, ";}.", k, "-sender-attachments+.", k, "-sender-input-area{margin-top:", sender.gapTopToInput, ";}.", k, "-sender-input-area{position:relative;display:flex;flex:0 0 auto;min-height:0;margin-bottom:", sender.gapInputToToolbar, ";padding:0;box-sizing:border-box;}.", k, "-sender-input{flex:1 1 auto;width:100%;min-width:0;min-height:0;border:none;outline:none;resize:none;background:transparent;color:", sender.color, ";font-family:inherit;font-size:", sender.fontSize, ";line-height:", sender.lineHeight, ";padding:0;scrollbar-width:thin;scrollbar-color:transparent transparent;}.", k, "-sender-input::-webkit-scrollbar{width:8px;}.", k, "-sender-input::-webkit-scrollbar-track{background:transparent;}.", k, "-sender-input::-webkit-scrollbar-thumb{border-radius:999px;border:2px solid transparent;background:transparent;background-clip:content-box;}.", k, "-sender-input:hover{scrollbar-color:", sender.scrollbarThumb, " transparent;}.", k, "-sender-input:hover::-webkit-scrollbar-thumb{background:", sender.scrollbarThumb, ";background-clip:content-box;}.", k, "-sender-input:hover::-webkit-scrollbar-thumb:hover{background:", sender.scrollbarThumbHover, ";background-clip:content-box;}.", k, "-sender-input::placeholder{color:", sender.placeholderColor, ";}&.", k, "-sender-disabled .", k, "-sender-input{color:", sender.disabledColor, ";cursor:not-allowed;}.", k, "-sender-toolbar{display:flex;gap:8px;padding:0;box-sizing:border-box;flex:0 0 auto;}.", k, "-sender-toolbar-left{display:flex;align-items:center;gap:8px;margin-top:8px;flex:0 0 auto;}.", k, "-sender-toolbar-right{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto;}.", k, "-sender-toolbar-middle{flex:1 1 auto;min-width:0;display:flex;align-items:flex-end;gap:8px;}.", k, "-sender-attach-btn{display:inline-flex;align-items:center;justify-content:center;width:", sender.attachButtonSize, ";height:", sender.attachButtonSize, ";border-radius:50%;background:transparent;border:none;padding:0;cursor:pointer;color:", sender.attachIconColor, ";transition:color ", theme.transition.small, ",background ", theme.transition.small, ";}.", k, "-sender-attach-btn:hover{color:", sender.attachIconHoverColor, ";}.", k, "-sender-attach-btn:disabled,&.", k, "-sender-disabled .", k, "-sender-attach-btn{color:", theme.color.disabled, ";cursor:not-allowed;background:transparent;}.", k, "-sender-attach-btn svg{display:block;}.", k, "-sender-send-btn{display:inline-flex;align-items:center;justify-content:center;width:", sender.sendButtonSize, ";height:", sender.sendButtonSize, ";background:transparent;border:none;padding:0;cursor:pointer;transition:filter ", theme.transition.small, ";}.", k, "-sender-send-btn:disabled{cursor:not-allowed;filter:opacity(0.5);}.", k, "-sender-send-btn:not(:disabled):hover{filter:opacity(0.85);}.", k, "-sender-send-icon{display:block;width:32px;height:32px;pointer-events:none;filter:drop-shadow(0 4px 8px rgba(83, 112, 255, 0.32));}.", k, "-sender-image-add{display:inline-flex;align-items:center;justify-content:center;width:", sender.imageAddSize, ";height:", sender.imageAddSize, ";box-sizing:border-box;flex:0 0 auto;border-radius:", sender.imageAddRadius, ";border:", sender.imageAddBorder, ";background:", sender.imageAddBg, ";color:", sender.imageAddColor, ";cursor:pointer;transition:border-color ", theme.transition.small, ",color ", theme.transition.small, ";}.", k, "-sender-image-add:hover{border-color:", theme.color.primary, ";color:", theme.color.primary, ";}.", k, "-sender-image-add-disabled,.", k, "-sender-image-add-disabled:hover{cursor:not-allowed;border-color:", theme.color.border, ";color:", theme.color.disabled, ";}.", k, "-sender-file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;top:-9999px;left:-9999px;}.", k, "-sender-drag-mask{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;background:", sender.dragMaskBg, ";backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}.", k, "-sender-drag-card{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:", sender.dragCardColor, ";}.", k, "-sender-drag-card .", k, "-icon{color:", sender.dragCardColor, ";font-size:32px;line-height:1;}.", k, "-sender-drag-text{color:", sender.dragCardTextColor, ";font-size:14px;font-weight:500;line-height:20px;}");
+});

package/components/sender/useAutoResize.d.ts

@@ -0,0 +1,4 @@
+import { RefObject } from 'intact-vue-next';
+export declare function useAutoResize(textareaRef: RefObject<HTMLTextAreaElement>): {
+    adjust: () => void;
+};

package/components/sender/useAutoResize.js

@@ -0,0 +1,99 @@
+import _Number$isFinite from "@babel/runtime-corejs3/core-js/number/is-finite";
+import { useInstance, onMounted, onUpdated, nextTick } from 'intact-vue-next';
+import { useConfigContext } from '../config';
+// textarea 高度自适应：textarea 默认高 text=64、image=32；maxHeight 约束整个输入外框而非 textarea 本身。
+var SHELL_MAX_FALLBACK = 300;
+var TEXTAREA_MIN_TEXT = 64;
+var TEXTAREA_MIN_IMAGE = 20;
+export function useAutoResize(textareaRef) {
+  var instance = useInstance();
+  var _useConfigContext = useConfigContext(),
+    k = _useConfigContext.k;
+  var shell = null;
+  var scheduled = false;
+  function getShell(el) {
+    if (shell && shell.contains(el)) return shell;
+    shell = el.closest("." + k + "-sender-shell");
+    return shell;
+  }
+  function getShellMaxHeight(shell) {
+    var parsed = parseFloat(getComputedStyle(shell).maxHeight);
+    return _Number$isFinite(parsed) ? parsed : SHELL_MAX_FALLBACK;
+  }
+  /**
+   * textarea 高暂置 0 时，外框中除可拉伸输入行以外的纵向占位（px）。
+   * maxHeight 是整框高度，需要减去这部分，才能得到 textarea 的可滚动上限。
+   */
+  function measureNonInputBlockHeight(el, shell) {
+    var h0 = el.style.height;
+    var min0 = el.style.minHeight;
+    var max0 = el.style.maxHeight;
+    var ov0 = el.style.overflow;
+    el.style.height = '0px';
+    el.style.minHeight = '0px';
+    el.style.maxHeight = 'none';
+    el.style.overflow = 'hidden';
+    var h = shell.offsetHeight;
+    el.style.height = h0;
+    el.style.minHeight = min0;
+    el.style.maxHeight = max0;
+    el.style.overflow = ov0;
+    return h;
+  }
+  function adjust() {
+    var el = textareaRef.value;
+    if (!el) return;
+    var shell = getShell(el);
+    if (!shell) return;
+    var isImage = instance.get('type') === 'image';
+    var min = isImage ? TEXTAREA_MIN_IMAGE : TEXTAREA_MIN_TEXT;
+    /** 整框最大高度（props 或默认 300），从实际 CSS 读取，支持 50vh 等合法 CSS 值 */
+    var shellMax = getShellMaxHeight(shell);
+    var nonInputH = measureNonInputBlockHeight(el, shell);
+    var max = Math.max(8, shellMax - nonInputH);
+    el.style.height = 'auto';
+    var scroll = el.scrollHeight;
+    var next = Math.min(Math.max(min, scroll), max);
+    var nextHeight = next + "px";
+    var nextOverflowY = scroll > max ? 'auto' : 'hidden';
+    if (el.style.height !== nextHeight) {
+      el.style.height = nextHeight;
+    }
+    if (el.style.overflowY !== nextOverflowY) {
+      el.style.overflowY = nextOverflowY;
+    }
+  }
+  function scheduleAdjust() {
+    if (scheduled) return;
+    scheduled = true;
+    nextTick(function () {
+      scheduled = false;
+      adjust();
+    });
+  }
+  onMounted(function () {
+    scheduleAdjust();
+  });
+  onUpdated(function () {
+    scheduleAdjust();
+  });
+  instance.watch('value', scheduleAdjust, {
+    inited: true,
+    presented: true
+  });
+  instance.watch('maxHeight', scheduleAdjust, {
+    inited: true,
+    presented: true
+  });
+  instance.watch('type', scheduleAdjust, {
+    inited: true,
+    presented: true
+  });
+  instance.watch('attachments', scheduleAdjust, {
+    inited: true,
+    presented: true
+  });
+  return {
+    adjust: adjust
+  };
+}

package/components/sender/useSenderDrag.d.ts

@@ -0,0 +1,6 @@
+import type { State } from '../../hooks/useState';
+type AddFiles = (fileList: FileList | File[]) => void;
+export declare function useSenderDrag(addFiles: AddFiles): {
+    dragOver: State<boolean>;
+};
+export {};