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

package/components/sender/useSenderDrag.js

@@ -0,0 +1,320 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
+import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
+import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
+import _Promise from "@babel/runtime-corejs3/core-js/promise";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { onBeforeUnmount, onMounted, useInstance } from 'intact-vue-next';
+import { useState } from '../../hooks/useState';
+var controllers = [];
+var isListening = false;
+function isFileDrag(e) {
+  var _e$dataTransfer, _context;
+  var types = (_e$dataTransfer = e.dataTransfer) == null ? void 0 : _e$dataTransfer.types;
+  return !!types && _includesInstanceProperty(_context = _Array$from(types)).call(_context, 'Files');
+}
+function getActiveController() {
+  for (var i = controllers.length - 1; i >= 0; i--) {
+    if (controllers[i].isEnabled()) {
+      return controllers[i];
+    }
+  }
+}
+function toggleGlobalListeners() {
+  var hasEnabledController = !!getActiveController();
+  if (hasEnabledController === isListening) return;
+  if (hasEnabledController) {
+    document.addEventListener('dragenter', handleDocumentDragEnter);
+    document.addEventListener('dragover', handleDocumentDragOver);
+    document.addEventListener('dragleave', handleDocumentDragLeave);
+    document.addEventListener('drop', handleDocumentDrop);
+  } else {
+    document.removeEventListener('dragenter', handleDocumentDragEnter);
+    document.removeEventListener('dragover', handleDocumentDragOver);
+    document.removeEventListener('dragleave', handleDocumentDragLeave);
+    document.removeEventListener('drop', handleDocumentDrop);
+  }
+  isListening = hasEnabledController;
+}
+function registerController(controller) {
+  unregisterController(controller);
+  controllers.push(controller);
+  toggleGlobalListeners();
+}
+function unregisterController(controller) {
+  var index = controllers.indexOf(controller);
+  if (index > -1) {
+    _spliceInstanceProperty(controllers).call(controllers, index, 1);
+  }
+  controller.reset();
+  toggleGlobalListeners();
+}
+function handleDocumentDragEnter(e) {
+  var controller = getActiveController();
+  if (!controller || !isFileDrag(e)) return;
+  controller.stopEvent(e);
+  controller.onDragEnter(e);
+}
+function handleDocumentDragOver(e) {
+  var controller = getActiveController();
+  if (!controller || !isFileDrag(e)) return;
+  controller.stopEvent(e);
+  if (e.dataTransfer) {
+    e.dataTransfer.dropEffect = 'copy'; // 让浏览器允许 drop 文件
+  }
+}
+function handleDocumentDragLeave(e) {
+  var controller = getActiveController();
+  if (!controller || !isFileDrag(e)) return;
+  controller.stopEvent(e);
+  controller.onDragLeave();
+}
+function handleDocumentDrop(e) {
+  var controller = getActiveController();
+  if (!controller || !isFileDrag(e)) return;
+  controller.onDrop(e);
+}
+function defineRelativePath(file, relativePath) {
+  if (!relativePath) return file;
+  Object.defineProperty(file, 'webkitRelativePath', {
+    value: relativePath,
+    configurable: true
+  });
+  return file;
+}
+function readFileEntry(entry, relativePath) {
+  return new _Promise(function (resolve) {
+    entry.file(function (file) {
+      return resolve(defineRelativePath(file, relativePath));
+    }, function () {
+      return resolve(null);
+    });
+  });
+}
+function readDirectoryEntries(reader) {
+  return new _Promise(function (resolve) {
+    var result = [];
+    function next() {
+      reader.readEntries(function (entries) {
+        if (!entries.length) {
+          resolve(result);
+          return;
+        }
+        result.push.apply(result, entries);
+        next();
+      }, function () {
+        return resolve(result);
+      });
+    }
+    next();
+  });
+}
+function extractEntryFiles(_x, _x2, _x3) {
+  return _extractEntryFiles.apply(this, arguments);
+}
+function _extractEntryFiles() {
+  _extractEntryFiles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(entry, directoryEnabled, parentPath) {
+    var _ref2;
+    var relativePath, file, reader, entries, groups;
+    return _regeneratorRuntime.wrap(function _callee2$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          if (parentPath === void 0) {
+            parentPath = '';
+          }
+          relativePath = parentPath ? parentPath + "/" + entry.name : entry.name;
+          if (!entry.isFile) {
+            _context3.next = 7;
+            break;
+          }
+          _context3.next = 5;
+          return readFileEntry(entry, relativePath);
+        case 5:
+          file = _context3.sent;
+          return _context3.abrupt("return", file ? [file] : []);
+        case 7:
+          if (!(!entry.isDirectory || !directoryEnabled)) {
+            _context3.next = 9;
+            break;
+          }
+          return _context3.abrupt("return", []);
+        case 9:
+          reader = entry.createReader();
+          _context3.next = 12;
+          return readDirectoryEntries(reader);
+        case 12:
+          entries = _context3.sent;
+          _context3.next = 15;
+          return _Promise.all(_mapInstanceProperty(entries).call(entries, function (item) {
+            return extractEntryFiles(item, directoryEnabled, relativePath);
+          }));
+        case 15:
+          groups = _context3.sent;
+          return _context3.abrupt("return", _concatInstanceProperty(_ref2 = []).apply(_ref2, groups));
+        case 17:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee2);
+  }));
+  return _extractEntryFiles.apply(this, arguments);
+}
+function extractDroppedFiles(_x4, _x5) {
+  return _extractDroppedFiles.apply(this, arguments);
+} // Sender 的全屏拖拽上传只负责“页面级 drop 入口”；
+// 真正的数量/类型/大小校验与上传动作仍统一复用 useSenderUpload.addFiles。
+function _extractDroppedFiles() {
+  _extractDroppedFiles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(dataTransfer, directoryEnabled) {
+    var _dataTransfer$files;
+    var items, _ref4, groups, files;
+    return _regeneratorRuntime.wrap(function _callee4$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          if (dataTransfer) {
+            _context5.next = 2;
+            break;
+          }
+          return _context5.abrupt("return", []);
+        case 2:
+          items = dataTransfer.items ? _Array$from(dataTransfer.items) : [];
+          if (!items.length) {
+            _context5.next = 10;
+            break;
+          }
+          _context5.next = 6;
+          return _Promise.all(_mapInstanceProperty(items).call(items, /*#__PURE__*/function () {
+            var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(item) {
+              var entry, file;
+              return _regeneratorRuntime.wrap(function _callee3$(_context4) {
+                while (1) switch (_context4.prev = _context4.next) {
+                  case 0:
+                    entry = item.webkitGetAsEntry == null ? void 0 : item.webkitGetAsEntry();
+                    if (!entry) {
+                      _context4.next = 3;
+                      break;
+                    }
+                    return _context4.abrupt("return", extractEntryFiles(entry, directoryEnabled));
+                  case 3:
+                    file = item.getAsFile == null ? void 0 : item.getAsFile();
+                    return _context4.abrupt("return", file ? [file] : []);
+                  case 5:
+                  case "end":
+                    return _context4.stop();
+                }
+              }, _callee3);
+            }));
+            return function (_x6) {
+              return _ref3.apply(this, arguments);
+            };
+          }()));
+        case 6:
+          groups = _context5.sent;
+          files = _concatInstanceProperty(_ref4 = []).apply(_ref4, groups);
+          if (!files.length) {
+            _context5.next = 10;
+            break;
+          }
+          return _context5.abrupt("return", files);
+        case 10:
+          return _context5.abrupt("return", (_dataTransfer$files = dataTransfer.files) != null && _dataTransfer$files.length ? _Array$from(dataTransfer.files) : []);
+        case 11:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee4);
+  }));
+  return _extractDroppedFiles.apply(this, arguments);
+}
+export function useSenderDrag(addFiles) {
+  var instance = useInstance();
+  var dragOver = useState(false);
+  function isEnabled() {
+    return !!instance.get('dragFile') && !instance.get('disabled');
+  }
+  var controller = {
+    dragOver: dragOver,
+    counter: 0,
+    isEnabled: isEnabled,
+    stopEvent: function stopEvent(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    onDragEnter: function onDragEnter() {
+      if (instance.get('disabled')) return;
+      controller.counter++;
+      if (!dragOver.value) {
+        dragOver.set(true);
+      }
+    },
+    onDragLeave: function onDragLeave() {
+      if (!controller.counter) return;
+      controller.counter--;
+      if (!controller.counter && dragOver.value) {
+        dragOver.set(false);
+      }
+    },
+    onDrop: function onDrop(e) {
+      var _instance$get, _e$dataTransfer2;
+      controller.stopEvent(e);
+      controller.reset();
+      if (instance.get('disabled')) return;
+      var directoryEnabled = !!((_instance$get = instance.get('uploadProps')) != null && _instance$get.directory);
+      var directFiles = (_e$dataTransfer2 = e.dataTransfer) == null ? void 0 : _e$dataTransfer2.files;
+      if (!directoryEnabled && directFiles != null && directFiles.length) {
+        addFiles(directFiles);
+        return;
+      }
+      void _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var files;
+        return _regeneratorRuntime.wrap(function _callee$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return extractDroppedFiles(e.dataTransfer, directoryEnabled);
+            case 2:
+              files = _context2.sent;
+              if (files.length) {
+                _context2.next = 5;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 5:
+              addFiles(files);
+            case 6:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee);
+      }))();
+    },
+    reset: function reset() {
+      controller.counter = 0;
+      if (dragOver.value) {
+        dragOver.set(false);
+      }
+    }
+  };
+  function syncController() {
+    if (isEnabled()) {
+      registerController(controller);
+    } else {
+      unregisterController(controller);
+    }
+  }
+  onMounted(syncController);
+  onBeforeUnmount(function () {
+    return unregisterController(controller);
+  });
+  instance.watch('dragFile', syncController);
+  instance.watch('disabled', function (disabled) {
+    if (disabled) {
+      controller.reset();
+    }
+    syncController();
+  });
+  return {
+    dragOver: dragOver
+  };
+}

package/components/sender/useSenderInput.d.ts

@@ -0,0 +1,16 @@
+import { RefObject } from 'intact-vue-next';
+export declare function useSenderInput(textareaRef: RefObject<HTMLTextAreaElement>): {
+    isFocus: import("../../hooks/useState").State<boolean>;
+    isDisabled: () => boolean;
+    isGenerating: () => boolean;
+    isLoading: () => boolean;
+    isSendButtonDisabled: () => boolean;
+    send: () => void;
+    stopGenerate: () => void;
+    handleKeydown: (e: KeyboardEvent) => void;
+    handleInput: (e: Event) => void;
+    handleFocus: (e: FocusEvent) => void;
+    handleBlur: (e: FocusEvent) => void;
+    handleSendClick: () => void;
+    focusTextarea: () => void | undefined;
+};

package/components/sender/useSenderInput.js

@@ -0,0 +1,101 @@
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+import { useInstance } from 'intact-vue-next';
+import { useState } from '../../hooks/useState';
+// 输入框相关的交互：focus 状态、键盘事件、发送/停止按钮的状态机。
+// 内部不维护 value，完全依赖 props 受控流。
+export function useSenderInput(textareaRef) {
+  var instance = useInstance();
+  var isFocus = useState(false);
+  function getCurrentAttachments() {
+    return instance.get('attachments') || [];
+  }
+  function getValueText() {
+    return instance.get('value') || '';
+  }
+  /** 是否因为「内容为空且没有附件」而需要禁用发送按钮 */
+  function isSendButtonAutoDisabled() {
+    var _context;
+    return !_trimInstanceProperty(_context = getValueText()).call(_context) && getCurrentAttachments().length === 0;
+  }
+  function isDisabled() {
+    return !!instance.get('disabled');
+  }
+  function isGenerating() {
+    return !!instance.get('generating');
+  }
+  function isLoading() {
+    return !!instance.get('loading');
+  }
+  /** 发送按钮的最终禁用态：业务强制 disabled 优先，其余按内容自动判定 */
+  function isSendButtonDisabled() {
+    if (isDisabled() || isLoading()) return true;
+    if (isGenerating()) return false;
+    return isSendButtonAutoDisabled();
+  }
+  // 发送消息
+  function send() {
+    if (isGenerating() || isSendButtonDisabled()) return;
+    var value = getValueText();
+    var attachments = getCurrentAttachments();
+    instance.trigger('messageSend', {
+      value: value,
+      attachments: attachments
+    });
+    // 发送后清空输入框和附件
+    if (instance.get('clearOnSend')) {
+      instance.set('value', '');
+      if (attachments.length > 0) {
+        instance.set('attachments', []);
+      }
+    }
+  }
+  function stopGenerate() {
+    instance.trigger('stopGenerate');
+  }
+  function handleKeydown(e) {
+    if (e.key !== 'Enter' || !instance.get('submitOnEnter') || isDisabled() || instance.get('readonly')) return;
+    // Shift / 中文 IME 期间不触发提交
+    if (e.shiftKey || e.isComposing || e.keyCode === 229) return;
+    e.preventDefault();
+    instance.trigger('pressEnter', e);
+    if (isGenerating()) return;
+    send();
+  }
+  function handleInput(e) {
+    var next = e.target.value;
+    instance.set('value', next);
+  }
+  function handleFocus(e) {
+    isFocus.set(true);
+    instance.trigger('focus', e);
+  }
+  function handleBlur(e) {
+    isFocus.set(false);
+    instance.trigger('blur', e);
+  }
+  function handleSendClick() {
+    if (isGenerating()) {
+      stopGenerate();
+      return;
+    }
+    send();
+  }
+  return {
+    isFocus: isFocus,
+    isDisabled: isDisabled,
+    isGenerating: isGenerating,
+    isLoading: isLoading,
+    isSendButtonDisabled: isSendButtonDisabled,
+    send: send,
+    stopGenerate: stopGenerate,
+    handleKeydown: handleKeydown,
+    handleInput: handleInput,
+    handleFocus: handleFocus,
+    handleBlur: handleBlur,
+    handleSendClick: handleSendClick,
+    focusTextarea: function focusTextarea() {
+      var _textareaRef$value;
+      return (_textareaRef$value = textareaRef.value) == null ? void 0 : _textareaRef$value.focus();
+    }
+  };
+}

package/components/sender/useSenderPaste.d.ts

@@ -0,0 +1,5 @@
+type AddFiles = (fileList: FileList | File[]) => void;
+export declare function useSenderPaste(addFiles: AddFiles): {
+    handlePaste: (e: ClipboardEvent) => void;
+};
+export {};

package/components/sender/useSenderPaste.js

@@ -0,0 +1,36 @@
+import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { useInstance } from 'intact-vue-next';
+function getClipboardFiles(e) {
+  var _clipboardData$files;
+  var clipboardData = e.clipboardData;
+  if (!clipboardData) return [];
+  var items = clipboardData.items ? _Array$from(clipboardData.items) : [];
+  if (items.length) {
+    var _context, _context2;
+    return _filterInstanceProperty(_context = _mapInstanceProperty(_context2 = _filterInstanceProperty(items).call(items, function (item) {
+      return item.kind === 'file';
+    })).call(_context2, function (item) {
+      return item.getAsFile();
+    })).call(_context, function (file) {
+      return !!file;
+    });
+  }
+  return (_clipboardData$files = clipboardData.files) != null && _clipboardData$files.length ? _Array$from(clipboardData.files) : [];
+}
+// 粘贴上传只负责把剪贴板里的文件交给统一上传入口；
+// 没有文件时保留原生粘贴文本行为。
+export function useSenderPaste(addFiles) {
+  var instance = useInstance();
+  function handlePaste(e) {
+    if (!instance.get('pasteFile') || instance.get('disabled') || instance.get('readonly')) return;
+    var files = getClipboardFiles(e);
+    if (!files.length) return;
+    e.preventDefault();
+    addFiles(files);
+  }
+  return {
+    handlePaste: handlePaste
+  };
+}

package/components/sender/useSenderUpload.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from 'intact-vue-next';
+import type { SenderAttachment } from './sender';
+export declare function useSenderUpload(fileInputRef: RefObject<HTMLInputElement>): {
+    getAcceptAttr: () => string | undefined;
+    isMultiple: () => boolean;
+    addFiles: (fileList: FileList | File[]) => Promise<void>;
+    removeAttachment: (item: SenderAttachment, runBefore?: boolean) => Promise<void>;
+    clearAttachments: () => Promise<void>;
+    onInputChange: (e: Event) => void;
+    pickFiles: () => void;
+};