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

package/components/notification/notification.d.ts

@@ -0,0 +1,39 @@
+import { Component, VNode, TypeDefs, Children } from 'intact-vue-next';
+export interface NotificationProps {
+    title?: Children;
+    content?: Children;
+    duration?: number;
+    type?: 'info' | 'error' | 'success' | 'warning' | '';
+    closable?: boolean;
+    icon?: string | VNode;
+    position?: 'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft' | 'top' | 'bottom';
+    className?: string;
+    onClick?: (e: MouseEvent) => void;
+    onClose?: () => void;
+}
+export declare class Notification extends Component<NotificationProps> {
+    static template: string | import('intact-vue-next').Template<any>;
+    static typeDefs: Required<TypeDefs<NotificationProps>>;
+    static defaults: () => Partial<NotificationProps>;
+    static classNamePrefix: string;
+    /**
+     * 显示通知
+     * @param props 通知配置对象
+     * @returns 返回通知的唯一 ID，可用于调用 close 方法关闭通知
+     */
+    static notice(props: Partial<NotificationProps>): number;
+    /**
+     * 关闭指定 ID 的通知
+     * @param id 通知的唯一 ID，由 notice 方法返回
+     */
+    static close(id: number): void;
+    static info(props: Partial<NotificationProps>): number;
+    static error(props: Partial<NotificationProps>): number;
+    static success(props: Partial<NotificationProps>): number;
+    static warning(props: Partial<NotificationProps>): number;
+    private delayClose;
+    private config;
+    onClick(e: MouseEvent): void;
+    onCloseClick(e: MouseEvent): void;
+    close(): void;
+}

package/components/notification/notification.js

@@ -0,0 +1,183 @@
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
+import _Symbol from "@babel/runtime-corejs3/core-js/symbol";
+import _getIteratorMethod from "@babel/runtime-corejs3/core-js/get-iterator-method";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof _Symbol !== "undefined" && _getIteratorMethod(o) || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { var _context2; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context2 = Object.prototype.toString.call(o)).call(_context2, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import _Map from "@babel/runtime-corejs3/core-js/map";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _entriesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/entries";
+import { __decorate } from "tslib";
+import { Component, VNode, render, createVNode as h } from 'intact-vue-next';
+import template from './notification.vdt';
+import { Notifications } from './notifications';
+import { useDelayClose } from '../../hooks/useDelayClose';
+import { bind } from '../utils';
+import { useConfigContext } from '../config';
+var typeDefs = {
+  title: [String, VNode],
+  content: [String, VNode],
+  duration: Number,
+  type: ['info', 'error', 'success', 'warning', ''],
+  closable: Boolean,
+  icon: [String, VNode],
+  position: ['topRight', 'topLeft', 'bottomRight', 'bottomLeft', 'top', 'bottom'],
+  className: String,
+  onClick: Function,
+  onClose: Function
+};
+var id = 0;
+var defaults = function defaults() {
+  return {
+    duration: 4500,
+    type: '',
+    closable: true,
+    position: 'topRight'
+  };
+};
+// 按位置维护多个容器实例
+var notificationsMap = new _Map();
+// 存储 notificationId -> { position, key } 的映射，用于通过 id 关闭通知
+var notificationIdMap = new _Map();
+export var Notification = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Notification, _Component);
+  function Notification() {
+    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.delayClose = useDelayClose(_this.close, _this.get('duration'));
+    _this.config = useConfigContext();
+    return _this;
+  }
+  /**
+   * 显示通知
+   * @param props 通知配置对象
+   * @returns 返回通知的唯一 ID，可用于调用 close 方法关闭通知
+   */
+  Notification.notice = function notice(props) {
+    var _props$type, _props$duration;
+    var notificationId = id++;
+    var key = notificationId;
+    var finalProps = _extends({}, props, {
+      key: key,
+      type: (_props$type = props.type) != null ? _props$type : '',
+      duration: (_props$duration = props.duration) != null ? _props$duration : 4500,
+      position: props.position || 'topRight'
+    });
+    var position = finalProps.position;
+    // 存储 notificationId 到 position 和 key 的映射
+    notificationIdMap.set(notificationId, {
+      position: position,
+      key: key
+    });
+    // 如果该位置的容器不存在，创建并挂载
+    if (!notificationsMap.has(position)) {
+      var container = document.createElement('div');
+      document.body.append(container);
+      // @ts-ignore 类型实例化过深
+      render(h(Notifications, {
+        ref: function ref(i) {
+          if (i) {
+            notificationsMap.set(position, i);
+            // 设置清理回调
+            i.__cleanup = function () {
+              notificationsMap.delete(position);
+              render(null, container);
+              container.remove();
+            };
+          }
+        },
+        classNamePrefix: Notification.classNamePrefix,
+        position: position
+      }), container);
+    }
+    // @ts-ignore 类型实例化过深
+    notificationsMap.get(position).notice(h(Notification, finalProps));
+    return notificationId;
+  }
+  /**
+   * 关闭指定 ID 的通知
+   * @param id 通知的唯一 ID，由 notice 方法返回
+   */;
+  Notification.close = function close(id) {
+    var notificationInfo = notificationIdMap.get(id);
+    if (!notificationInfo) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.warn("Notification with id " + id + " does not exist.");
+      }
+      return;
+    }
+    var position = notificationInfo.position,
+      key = notificationInfo.key;
+    var notifications = notificationsMap.get(position);
+    if (notifications) {
+      notifications.delete(key);
+    }
+    // 从映射中移除
+    notificationIdMap.delete(id);
+  };
+  Notification.info = function info(props) {
+    return Notification.notice(_extends({}, props, {
+      type: 'info'
+    }));
+  };
+  Notification.error = function error(props) {
+    return Notification.notice(_extends({}, props, {
+      type: 'error'
+    }));
+  };
+  Notification.success = function success(props) {
+    return Notification.notice(_extends({}, props, {
+      type: 'success'
+    }));
+  };
+  Notification.warning = function warning(props) {
+    return Notification.notice(_extends({}, props, {
+      type: 'warning'
+    }));
+  };
+  var _proto = Notification.prototype;
+  _proto.onClick = function onClick(e) {
+    var onClick = this.get('onClick');
+    if (onClick) {
+      onClick(e);
+    }
+  };
+  _proto.onCloseClick = function onCloseClick(e) {
+    e.stopPropagation(); // 阻止事件冒泡，避免触发外层的 onClick
+    this.close();
+  };
+  _proto.close = function close() {
+    var onClose = this.get('onClose');
+    if (onClose) {
+      onClose();
+    }
+    var position = this.get('position') || 'topRight';
+    var key = this.get('key');
+    // 从 notificationIdMap 中移除对应的映射
+    for (var _iterator = _createForOfIteratorHelperLoose(_entriesInstanceProperty(notificationIdMap).call(notificationIdMap)), _step; !(_step = _iterator()).done;) {
+      var _step$value = _step.value,
+        notificationId = _step$value[0],
+        info = _step$value[1];
+      if (info.position === position && info.key === key) {
+        notificationIdMap.delete(notificationId);
+        break;
+      }
+    }
+    notificationsMap.get(position).delete(key);
+  };
+  return Notification;
+}(Component);
+Notification.template = template;
+Notification.typeDefs = typeDefs;
+Notification.defaults = defaults;
+Notification.classNamePrefix = void 0;
+__decorate([bind], Notification.prototype, "onClick", null);
+__decorate([bind], Notification.prototype, "onCloseClick", null);
+__decorate([bind], Notification.prototype, "close", null);

package/components/notification/notification.vdt.js

@@ -0,0 +1,56 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, createUnknownComponentVNode as _$cc } from 'intact-vue-next';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { getRestProps } from '../utils';
+import { makeNotificationStyles } from './styles';
+import { theme } from '../../styles/theme';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj, _$cn2;
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _this$get = this.get(),
+    type = _this$get.type,
+    title = _this$get.title,
+    content = _this$get.content,
+    children = _this$get.children,
+    closable = _this$get.closable,
+    icon = _this$get.icon,
+    classNamePrefix = _this$get.classNamePrefix,
+    position = _this$get.position,
+    className = _this$get.className;
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-notification"] = true, _classNameObj[className] = className, _classNameObj[k + "-" + type] = type && (type === 'info' || type === 'error' || type === 'success' || type === 'warning'), _classNameObj[k + "-position-" + (position || 'topRight')] = true, _classNameObj[makeNotificationStyles(k)] = true, _classNameObj);
+  var iconMap = {
+    info: k + "-icon-information-fill",
+    warning: k + "-icon-warning-fill",
+    success: k + "-icon-success-fill",
+    error: k + "-icon-error-fill"
+  };
+
+  // type 优先级大于 icon，如果 type 存在且是四种类型之一，使用 type 对应的 icon
+  // 否则如果 icon 有值，使用自定义 icon
+  var hasIcon = type && iconMap[type] || icon;
+  var iconName = type && iconMap[type] ? iconMap[type] : typeof icon === 'string' ? icon : null;
+  var iconColor = type ? theme.color[type === 'error' ? 'danger' : type] : 'default';
+  return _$cv('div', _extends({}, getRestProps(this), {
+    'className': _$cn(classNameObj),
+    'ev-mouseenter': this.delayClose.onMouseEnter,
+    'ev-mouseleave': this.delayClose.onMouseLeave,
+    'ev-click': this.onClick
+  }), _$ce(2, 'div', [_$ce(2, 'div', [hasIcon && iconName ? _$ce(2, 'div', _$cc(Icon, {
+    'className': _$cn(iconName),
+    'color': iconColor
+  }), 2, _$cn(k + "-notification-icon")) : hasIcon && !iconName ? _$ce(2, 'div', icon, 0, _$cn(k + "-notification-icon")) : undefined, _$ce(2, 'div', [title ? _$ce(2, 'div', title, 0, _$cn(k + "-notification-title")) : undefined, content || children ? _$ce(2, 'div', content || children, 0, _$cn(k + "-notification-body")) : undefined], 0, _$cn(k + "-notification-content"))], 0, _$cn((_$cn2 = {}, _$cn2[k + "-notification-wrapper"] = true, _$cn2[k + "-with-icon"] = hasIcon, _$cn2))), closable ? _$cc(Button, {
+    'type': 'none',
+    'icon': true,
+    'className': _$cn(k + "-notification-close"),
+    'ev-click': this.onCloseClick,
+    'children': _$cc(Icon, {
+      'className': _$cn(k + "-icon-close"),
+      'hoverable': true
+    })
+  }) : undefined], 0, _$cn(k + "-notification-container")));
+}
+;

package/components/notification/notifications.d.ts

@@ -0,0 +1,16 @@
+import { Component, VNodeComponentClass, TypeDefs } from 'intact-vue-next';
+import type { Notification } from './notification';
+export interface NotificationsProps {
+    classNamePrefix?: string;
+    position?: 'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft' | 'top' | 'bottom';
+}
+export declare class Notifications extends Component {
+    static template: string | import('intact-vue-next').Template<any>;
+    static typeDefs: Required<TypeDefs<NotificationsProps>>;
+    private notifications;
+    private config;
+    __cleanup?: () => void;
+    notice(notification: VNodeComponentClass<Notification>): void;
+    delete(key: number | string): void;
+    onAfterLeave(): void;
+}

package/components/notification/notifications.js

@@ -0,0 +1,51 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js/instance/find-index";
+import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
+import { Component } from 'intact-vue-next';
+import template from './notifications.vdt';
+import { useConfigContext } from '../config';
+var typeDefs = {
+  classNamePrefix: String,
+  position: ['topRight', 'topLeft', 'bottomRight', 'bottomLeft', 'top', 'bottom']
+};
+export var Notifications = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Notifications, _Component);
+  function Notifications() {
+    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.notifications = [];
+    _this.config = useConfigContext();
+    _this.__cleanup = void 0;
+    return _this;
+  }
+  var _proto = Notifications.prototype;
+  _proto.notice = function notice(notification) {
+    this.notifications.push(notification);
+    this.forceUpdate();
+  };
+  _proto.delete = function _delete(key) {
+    var notifications = this.notifications;
+    var index = _findIndexInstanceProperty(notifications).call(notifications, function (notification) {
+      return notification.key === key;
+    });
+    if (process.env.NODE_ENV !== 'production' && !~index) {
+      throw new Error('You are removing a notification that does not exist.');
+    }
+    _spliceInstanceProperty(notifications).call(notifications, index, 1);
+    this.forceUpdate();
+  };
+  _proto.onAfterLeave = function onAfterLeave() {
+    // 当离开动画完成后，如果该位置 通知列表为空，则清理容器
+    if (this.notifications.length === 0 && this.__cleanup) {
+      this.__cleanup();
+    }
+  };
+  return Notifications;
+}(Component);
+Notifications.template = template;
+Notifications.typeDefs = typeDefs;

package/components/notification/notifications.vdt.js

@@ -0,0 +1,24 @@
+import { createUnknownComponentVNode as _$cc, createElementVNode as _$ce, map as _$ma, className as _$cn } from 'intact-vue-next';
+import { TransitionGroup } from 'intact-vue-next';
+import { makeNotificationsStyles } from './styles';
+import { ConfigProvider } from '../config';
+export default function ($props, $blocks, $__proto__) {
+  var _$cn2;
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var k = this.get('classNamePrefix') || this.config.k;
+  var position = this.get('position') || 'topRight';
+  return _$cc(ConfigProvider, {
+    'value': {
+      classNamePrefix: k
+    },
+    'children': _$ce(2, 'div', _$cc(TransitionGroup, {
+      'onAfterLeave': this.onAfterLeave.bind(this),
+      'children': _$ma(this.notifications, function ($value, $key) {
+        return $value;
+      }, $this)
+    }), 2, _$cn((_$cn2 = {}, _$cn2[k + "-notifications"] = true, _$cn2[makeNotificationsStyles(k, position)] = true, _$cn2)))
+  });
+}
+;

package/components/notification/styles.d.ts

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

package/components/notification/styles.js

@@ -0,0 +1,110 @@
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+import { cache } from '../utils';
+var defaults = {
+  get transition() {
+    return theme.transition.large;
+  },
+  top: "24px",
+  right: "24px",
+  left: "24px",
+  bottom: "24px",
+  leftTransform: "translateX(-100%)",
+  rightTransform: "translateX(100%)",
+  topTransform: "translateY(-100%)",
+  bottomTransform: "translateY(100%)",
+  bgColor: '#fff',
+  get borderRadius() {
+    return theme.borderRadius;
+  },
+  gap: "8px",
+  boxShadow: '0px 4px 32px 4px #00000014',
+  padding: "12px",
+  get fontSize() {
+    return theme.default.fontSize;
+  },
+  get contentColor() {
+    return theme.color.text;
+  },
+  get titleColor() {
+    return theme.color.title;
+  },
+  minWidth: '320px',
+  width: '360px',
+  maxWidth: '400px',
+  titleFontSize: '14px',
+  titleFontWeight: '500',
+  titleMarginBottom: '8px',
+  bodyLineHeight: '1.5',
+  icon: {
+    fontSize: "20px"
+  },
+  close: {
+    right: "12px",
+    top: "12px",
+    width: "20px",
+    height: "20px"
+  }
+};
+var notification;
+setDefault(function () {
+  notification = deepDefaults(theme, {
+    notification: defaults
+  }).notification;
+  makeNotificationsStyles == null || makeNotificationsStyles.clearCache();
+  makeNotificationStyles == null || makeNotificationStyles.clearCache();
+});
+export var makeNotificationsStyles = cache(function makeNotificationsStyles(k, position) {
+  // 位置配置
+  var positions = {
+    topRight: {
+      top: notification.top,
+      right: notification.right,
+      left: '',
+      bottom: '',
+      transform: ''
+    },
+    topLeft: {
+      top: notification.top,
+      left: notification.left,
+      right: '',
+      bottom: '',
+      transform: ''
+    },
+    bottomRight: {
+      bottom: notification.top,
+      right: notification.right,
+      left: '',
+      top: '',
+      transform: ''
+    },
+    bottomLeft: {
+      bottom: notification.top,
+      left: notification.left,
+      right: '',
+      top: '',
+      transform: ''
+    },
+    top: {
+      top: notification.top,
+      left: '50%',
+      right: '',
+      bottom: '',
+      transform: 'translateX(-50%)'
+    },
+    bottom: {
+      bottom: notification.top,
+      left: '50%',
+      right: '',
+      top: '',
+      transform: 'translateX(-50%)'
+    }
+  };
+  var pos = positions[position] || positions.topRight;
+  return /*#__PURE__*/css("position:fixed;", pos.top ? "top: " + pos.top + ";" : '', " ", pos.bottom ? "bottom: " + pos.bottom + ";" : '', " ", pos.left ? "left: " + pos.left + ";" : '', " ", pos.right ? "right: " + pos.right + ";" : '', " ", pos.transform ? "transform: " + pos.transform + ";" : '', " width:auto;pointer-events:none;z-index:", theme.maxZIndex + 1, ";");
+});
+export var makeNotificationStyles = cache(function makeNotificationStyles(k) {
+  return /*#__PURE__*/css(".", k, "-notification-container{display:flex;flex-direction:column;position:relative;box-shadow:", notification.boxShadow, ";border-radius:", notification.borderRadius, ";margin-bottom:", notification.gap, ";pointer-events:all;min-width:", notification.minWidth, ";max-width:", notification.maxWidth, ";width:", notification.width, ";background:", notification.bgColor, ";}.", k, "-notification-wrapper{position:relative;display:flex;gap:", notification.gap, ";padding:", notification.padding, ";}.", k, "-notification-icon{.", k, "-icon{font-size:", notification.icon.fontSize, ";}}.", k, "-notification-content{flex:1;display:flex;flex-direction:column;}.", k, "-notification-title{font-size:", notification.titleFontSize, ";font-weight:", notification.titleFontWeight, ";color:", notification.titleColor, ";margin-bottom:", notification.titleMarginBottom, ";line-height:", notification.bodyLineHeight, ";}.", k, "-notification-body{font-size:", notification.fontSize, ";color:", notification.contentColor, ";line-height:", notification.bodyLineHeight, ";word-break:break-word;word-wrap:break-word;}.", k, "-notification-close{position:absolute;right:", notification.close.right, ";top:", notification.close.top, ";width:", notification.close.width, ";height:", notification.close.height, ";}&.", k, "-position-topRight.transition-enter-from,&.", k, "-position-bottomRight.transition-enter-from,&.", k, "-position-topRight.transition-leave-to,&.", k, "-position-bottomRight.transition-leave-to{opacity:0;transform:", notification.rightTransform, ";}&.", k, "-position-topLeft.transition-enter-from,&.", k, "-position-bottomLeft.transition-enter-from,&.", k, "-position-topLeft.transition-leave-to,&.", k, "-position-bottomLeft.transition-leave-to{opacity:0;transform:", notification.leftTransform, ";}&.", k, "-position-top.transition-enter-from,&.", k, "-position-top.transition-leave-to{opacity:0;transform:", notification.topTransform, ";}&.", k, "-position-bottom.transition-enter-from,&.", k, "-position-bottom.transition-leave-to{opacity:0;transform:", notification.bottomTransform, ";}&.transition-enter-active,&.transition-leave-active{transition:transform ", notification.transition, ",opacity ", notification.transition, ";}&.transition-move{transition:transform ", notification.transition, ";}");
+});

package/components/radio/index.d.ts

@@ -1,6 +1,6 @@
 import { Component, TypeDefs } from 'intact-vue-next';
-import type { CommonInputHTMLAttributes, Events } from '../types';
-export interface RadioProps<Value = false, True = true> extends CommonInputHTMLAttributes {
+import type { CommonFormElementAttributes, Events } from '../types';
+export interface RadioProps<Value = false, True = true> extends CommonFormElementAttributes {
     disabled?: boolean;
     value?: Value | True;
     trueValue?: True;
@@ -11,7 +11,7 @@ export interface RadioEvents<True = true> {
 }
 export declare class Radio<Value = false, True = true> extends Component<RadioProps<Value, True>, RadioEvents<True>> {
     static template: string | import('intact-vue-next').Template<any>;
-    static typeDefs: Required<TypeDefs<Omit<RadioProps<false, true>, keyof CommonInputHTMLAttributes>>>;
+    static typeDefs: Required<TypeDefs<Omit<RadioProps<false, true>, keyof CommonFormElementAttributes>>>;
     static defaults: () => Partial<RadioProps<false, true>>;
     static events: Events<RadioEvents<true>>;
     private elementRef;

package/components/select/styles.js

@@ -157,7 +157,7 @@ export var makeStyles = cache(function makeStyles(k) {
 });
 export var makeMenuStyles = cache(function makeMenuStyles(k) {
   var searchable = select.searchable;
-  return /*#__PURE__*/css("min-width:auto;max-height:", select.menuMaxHeight, ";overflow:auto;&:not([class*=\"-active\"]){transition:left ", select.transition, ",top ", select.transition, ";}.", k, "-select-empty{padding:", select.empty.padding, ";color:", select.empty.color, ";text-align:center;}.", k, "-select-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;&.", k, "-active{color:", select.activeColor, ";}}&.", k, "-card{display:flex;height:", select.card.height, ";.", k, "-tabs{border:none;overflow:auto;}.", k, "-select-group{flex:1;overflow:auto;}.", k, "-select-option.", k, "-hover{background:", select.card.itemHoverBgColor, ";color:", select.card.itemHoverColor, ";}}&.", k, "-searchable{max-height:none;padding:", searchable.padding, ";.", k, "-select-option{padding:", searchable.optionPadding, ";}}.", k, "-select-header{display:flex;padding:", searchable.header.padding, ";border-bottom:", searchable.border, ";margin-bottom:", searchable.header.gap, ";}.", k, "-select-op{white-space:nowrap;.", k, "-btn{padding:", searchable.header.btnPadding, ";margin-left:", searchable.header.btnGap, ";}}.", k, "-select-body{max-height:", select.menuMaxHeight, ";overflow:auto;}.", k, "-select-footer{border-top:", searchable.border, ";padding:", searchable.footer.padding, ";text-align:right;margin-top:", searchable.footer.gap, ";.", k, "-btn{margin-left:", searchable.footer.btnGap, ";}}.", k, "-select-option{.", k, "-checkbox{margin:0 -", getRight(searchable.optionPadding), " 0 -", getLeft(searchable.optionPadding), ";padding:", searchable.optionPadding, ";}}.", k, "-select-checkmark{float:right;height:100%;font-size:", select.multiple.checkmark.fontSize, ";}");
+  return /*#__PURE__*/css("min-width:auto;max-height:", select.menuMaxHeight, ";overflow:auto;&:not([class*=\"-active\"]){transition:left ", select.transition, ",top ", select.transition, ";}.", k, "-select-empty{padding:", select.empty.padding, ";color:", select.empty.color, ";text-align:center;}.", k, "-select-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;&.", k, "-active{color:", select.activeColor, ";}}&.", k, "-card{display:flex;height:", select.card.height, ";.", k, "-tabs{border:none;border-top-right-radius:0;border-bottom-right-radius:0;overflow:auto;}.", k, "-select-group{flex:1;overflow:auto;}.", k, "-select-option.", k, "-hover{background:", select.card.itemHoverBgColor, ";color:", select.card.itemHoverColor, ";}}&.", k, "-searchable{max-height:none;padding:", searchable.padding, ";.", k, "-select-option{padding:", searchable.optionPadding, ";}}.", k, "-select-header{display:flex;padding:", searchable.header.padding, ";border-bottom:", searchable.border, ";margin-bottom:", searchable.header.gap, ";}.", k, "-select-op{white-space:nowrap;.", k, "-btn{padding:", searchable.header.btnPadding, ";margin-left:", searchable.header.btnGap, ";}}.", k, "-select-body{max-height:", select.menuMaxHeight, ";overflow:auto;}.", k, "-select-footer{border-top:", searchable.border, ";padding:", searchable.footer.padding, ";text-align:right;margin-top:", searchable.footer.gap, ";.", k, "-btn{margin-left:", searchable.footer.btnGap, ";}}.", k, "-select-option{.", k, "-checkbox{margin:0 -", getRight(searchable.optionPadding), " 0 -", getLeft(searchable.optionPadding), ";padding:", searchable.optionPadding, ";}}.", k, "-select-checkmark{float:right;height:100%;font-size:", select.multiple.checkmark.fontSize, ";}");
 });
 export var makeGroupStyles = cache(function makeGroupStyles(k) {
   return /*#__PURE__*/css(".", k, "-select-group-label{color:", select.group.labelColor, ";padding:", select.group.labelPadding, ";}");

package/components/sender/icons.d.ts

@@ -0,0 +1,3 @@
+export declare const senderSendIcon: string;
+export declare const senderStopIcon: string;
+export declare const senderAttachSvg: string;

package/components/sender/icons.js

@@ -0,0 +1,17 @@
+// 内联 SVG 资源：data URL 形式，与 fileCard 中的占位图保持一致策略，避免下游打包额外处理 SVG 资源。
+// 三个发送态共用同一张图，hover/disabled 通过 CSS opacity 切换；附件用 currentColor，hover 时由 CSS 改色。
+// 设计为 32×32 可点击主形（与 sendButtonSize 一致）；原先 48×48 导出版本中间才是 32px 圆，用 img 外溢对齐容易「撑不满 / 对不齐」。
+// 将图形坐标归一到 viewBox 0 0 32 32，阴影用组件侧 CSS filter，与原有 SVG feDropShadow 观感接近且不占画布。
+var SEND_SVG = ['<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">', '<rect width="32" height="32" rx="16" fill="url(#b)"/>',
+// 路径由原 48 稿中 path 平移 (-8, -4) 到 0..32 坐标系
+'<path d="M22.3337 9.6666L17.9003 22.3333L16.0003 16L9.667 14.1L22.3337 9.6666Z" fill="white" stroke="white" stroke-linejoin="round"/>', '<defs>', '<linearGradient id="b" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">', '<stop stop-color="#00DDDD"/>', '<stop offset="0.538462" stop-color="#5370FF"/>', '<stop offset="1" stop-color="#712FFF"/>', '</linearGradient>', '</defs>', '</svg>'].join('');
+var STOP_SVG = ['<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">', '<rect width="32" height="32" rx="16" fill="url(#b)"/>', '<rect x="10" y="10" width="12" height="12" rx="2" fill="white"/>', '<defs>', '<linearGradient id="b" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">', '<stop stop-color="#00DDDD"/>', '<stop offset="0.538462" stop-color="#5370FF"/>', '<stop offset="1" stop-color="#712FFF"/>', '</linearGradient>', '</defs>', '</svg>'].join('');
+// 附件回形针 16x16，stroke 用 currentColor，方便用 CSS color 控制颜色变化。
+var ATTACH_SVG = ['<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">', '<path d="M8.23567 3.18836L3.28591 8.13812C2.11433 9.30969 2.11433 11.2092 3.28591 12.3808C4.45747 13.5523 6.35697 13.5523 7.52854 12.3808L13.4211 6.48819C14.2021 5.70716 14.2021 4.44082 13.4211 3.65975C12.6401 2.87871 11.3737 2.87871 10.5927 3.65975L4.70014 9.55232C4.3096 9.94286 4.3096 10.576 4.70014 10.9665C5.09064 11.3571 5.7238 11.3571 6.11434 10.9665L11.0641 6.01679" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/>', '</svg>'].join('');
+function toDataUrl(svg) {
+  return "data:image/svg+xml;charset=UTF-8," + encodeURIComponent(svg);
+}
+export var senderSendIcon = toDataUrl(SEND_SVG);
+export var senderStopIcon = toDataUrl(STOP_SVG);
+// 附件用 innerHTML 注入，因为 currentColor 在 <img src> 形式下无法继承 color。
+export var senderAttachSvg = ATTACH_SVG;

package/components/sender/index.d.ts

@@ -0,0 +1 @@
+export * from './sender';

package/components/sender/index.js

@@ -0,0 +1 @@
+export * from './sender';

package/components/sender/index.spec.d.ts

@@ -0,0 +1 @@
+export {};