@king-design/react 3.6.2 → 3.7.0

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-react';
+import { TransitionGroup } from 'intact-react';
+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/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/table/styles.js

@@ -91,7 +91,7 @@ setDefault(function () {
 });
 export { table };
 export var makeStyles = cache(function makeStyles(k) {
-  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";position:relative;z-index:0;.", k, "-table-wrapper{border-bottom:", table.border, ";overflow:auto;border-radius:", table.borderRadius, ";}table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";z-index:2;tr{height:", table.thead.height, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}tfoot{z-index:2;tr{td{border-top:", table.border, ";border-bottom-color:transparent;}}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";line-height:normal;&:before{display:none;content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&:not(.", k, "-hidden)~th:not(.", k, "-hidden):before{display:block;}&.", k, "-fixed-right:before{left:-2px;}}.", k, "-table-title{display:inline-flex;align-items:center;max-width:100%;color:", table.thead.color, ";}.", k, "-table-title-text{flex:1;display:inline-flex;line-height:1.4;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.", k, "-fixed-left,.", k, "-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.", k, "-fixed-left:after{right:-11px;}.", k, "-fixed-right:after{left:-11px;}&.", k, "-scroll-left .", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.", k, "-scroll-right .", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.", k, "-scroll-middle{.", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.", k, "-fixed-right+.", k, "-fixed-right:after{display:none;}.", k, "-table-affix-header{position:sticky;top:0;left:0;.", k, "-affix-wrapper{overflow:hidden;}&.", k, "-fixed{position:relative;}}&.", k, "-border,&.", k, "-grid{.", k, "-table-wrapper{border-top:", table.border, ";border-left:", table.border, ";border-right:", table.border, ";}}&.", k, "-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.", k, "-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.", k, "-table-group{margin-left:", table.group.gap, ";}.", k, "-table-check{.", k, "-checkbox,.", k, "-radio{position:relative;top:-1px;}}.", k, "-column-sortable{cursor:pointer;}.", k, "-column-sort{.", k, "-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin:0 0 1px ", _sortInstanceProperty(table).gap, ";}&.", k, "-desc .", k, "-icon.", k, "-desc,&.", k, "-asc .", k, "-icon.", k, "-asc{color:", _sortInstanceProperty(table).enabledColor, ";}}.", k, "-table-spin.", k, "-overlay{z-index:2;}.", k, "-table-empty{text-align:center;}tr.", k, "-expand{td{padding:0;background:#fdfcff;}}&.", k, "-with-expand{tr:not(.", k, "-expand){td{border-bottom:none;}}}.", k, "-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.", k, "-selected td{background:", table.selectedBgColor, ";}.", k, "-hidden{display:none;}.", k, "-table-arrow{width:", table.arrow.width, "!important;margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.", k, "-spreaded{.", k, "-table-arrow{transform:rotate(90deg);}}.", k, "-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.", k, "-dragging{opacity:", table.draggingOpacity, ";}.", k, "-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.", k, "-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {
+  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";position:relative;z-index:0;.", k, "-table-wrapper{border-bottom:", table.border, ";overflow:auto;border-radius:", table.borderRadius, ";}table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";z-index:2;tr{height:", table.thead.height, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}tfoot{z-index:2;tr{td{border-top:", table.border, ";border-bottom-color:transparent;}}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";line-height:normal;&:before{display:none;content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&.", k, "-fixed-right:before{left:-2px;}}&:not(.", k, "-grid){th:not(.", k, "-hidden)~th:not(.", k, "-hidden):before{display:block;}}.", k, "-table-title{display:inline-flex;align-items:center;max-width:100%;color:", table.thead.color, ";}.", k, "-table-title-text{flex:1;display:inline-flex;line-height:1.4;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.", k, "-fixed-left,.", k, "-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.", k, "-fixed-left:after{right:-11px;}.", k, "-fixed-right:after{left:-11px;}&.", k, "-scroll-left .", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.", k, "-scroll-right .", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.", k, "-scroll-middle{.", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.", k, "-fixed-right+.", k, "-fixed-right:after{display:none;}.", k, "-table-affix-header{position:sticky;top:0;left:0;.", k, "-affix-wrapper{overflow:hidden;}&.", k, "-fixed{position:relative;}}&.", k, "-border,&.", k, "-grid{.", k, "-table-wrapper{border-top:", table.border, ";border-left:", table.border, ";border-right:", table.border, ";}}&.", k, "-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.", k, "-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.", k, "-table-group{margin-left:", table.group.gap, ";}.", k, "-table-check{.", k, "-checkbox,.", k, "-radio{position:relative;top:-1px;}}.", k, "-column-sortable{cursor:pointer;}.", k, "-column-sort{.", k, "-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin:0 0 1px ", _sortInstanceProperty(table).gap, ";}&.", k, "-desc .", k, "-icon.", k, "-desc,&.", k, "-asc .", k, "-icon.", k, "-asc{color:", _sortInstanceProperty(table).enabledColor, ";}}.", k, "-table-spin.", k, "-overlay{z-index:2;}.", k, "-table-empty{text-align:center;}tr.", k, "-expand{td{padding:0;background:#fdfcff;}}&.", k, "-with-expand{tr:not(.", k, "-expand){td{border-bottom:none;}}}.", k, "-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.", k, "-selected td{background:", table.selectedBgColor, ";}.", k, "-hidden{display:none;}.", k, "-table-arrow{width:", table.arrow.width, "!important;margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.", k, "-spreaded{.", k, "-table-arrow{transform:rotate(90deg);}}.", k, "-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.", k, "-dragging{opacity:", table.draggingOpacity, ";}.", k, "-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.", k, "-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {
     return /*#__PURE__*/css(".", k, "-align-", type, "{text-align:", type, ";}");
   }), ">.", k, "-pagination{margin:16px 0;}&.", k, "-fix-header{min-height:0;.", k, "-table-wrapper{height:100%;}thead{position:sticky;top:0;}}&.", k, "-fix-footer{min-height:0;.", k, "-table-wrapper{height:100%;}tfoot{position:sticky;bottom:0;}}.", k, "-table-phantom{position:static;}");
 });

package/components/tabs/useActiveBar.js

@@ -13,6 +13,7 @@ export function useActiveBar() {
     var element = findDomFromVNode(instance.$lastInput, true);
     var k = instance.config.k;
     var activeTab = element.querySelector("." + k + "-tab." + k + "-active");
+    var vertical = instance.get('vertical');
     if (!activeTab) {
       var oldStyles = styles.value;
       if (oldStyles) {
@@ -21,14 +22,17 @@ export function useActiveBar() {
           width: '0'
         } : {
           top: oldStyles.top,
-          width: '0'
+          height: '0'
         });
       } else {
-        styles.set(null);
+        styles.set(vertical ? {
+          height: '0'
+        } : {
+          width: '0'
+        });
       }
       return;
     }
-    var vertical = instance.get('vertical');
     if (!vertical) {
       var width = activeTab.offsetWidth;
       var left = activeTab.offsetLeft;

package/components/tag/base.d.ts

@@ -3,6 +3,7 @@ import { Sizes } from '../../styles/utils';
 import type { Events, Colors } from '../types';
 export interface TagProps {
     type?: Colors;
+    color?: Colors | 'purple' | 'teal' | 'blue' | 'yellow' | string;
     closable?: boolean;
     closed?: boolean;
     disabled?: boolean;
@@ -21,5 +22,6 @@ export declare class Tag<T extends TagProps = TagProps, E extends TagEvents = Ta
     static defaults: () => Partial<TagProps>;
     static events: Events<TagEvents>;
     private config;
+    private tagColor;
     private onClose;
 }

package/components/tag/base.js

@@ -6,8 +6,10 @@ import { bind } from '../utils';
 import template from './index.vdt';
 import { sizes } from '../../styles/utils';
 import { useConfigContext } from '../config';
+import { useColor } from './useColor';
 export var typeDefs = {
   type: ['default', 'primary', 'danger', 'success', 'warning'],
+  color: String,
   closable: Boolean,
   closed: Boolean,
   disabled: Boolean,
@@ -34,6 +36,7 @@ export var Tag = /*#__PURE__*/function (_Component) {
     }
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.config = useConfigContext();
+    _this.tagColor = useColor();
     return _this;
   }
   var _proto = Tag.prototype;

package/components/tag/index.spec.js

@@ -4,6 +4,7 @@ import ClosableDemo from '~/components/tag/demos/closable';
 import { mount, unmount, wait, dispatchEvent, getElement } from '../../test/utils';
 import TagsDemo from '~/components/tag/demos/tags';
 import DraggableDemo from '~/components/tag/demos/draggable';
+import ColorDemo from '~/components/tag/demos/color';
 describe('Tag', function () {
   afterEach(function () {
     return unmount();
@@ -149,4 +150,20 @@ describe('Tag', function () {
       }
     }, _callee4);
   })));
+  it('should support color property', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var _mount4, instance, element;
+    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          _mount4 = mount(ColorDemo), instance = _mount4[0], element = _mount4[1];
+          _context5.next = 3;
+          return wait();
+        case 3:
+          expect(element.innerHTML).to.matchSnapshot();
+        case 4:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  })));
 });

package/components/tag/index.vdt.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import { createUnknownComponentVNode as _$cc, createVNode as _$cv, className as _$cn, noop as _$no } from 'intact-react';
 import { Icon } from '../icon';
-import { getRestProps } from '../utils';
+import { addStyle, getRestProps } from '../utils';
 import { makeStyles } from './styles';
 import { Transition } from 'intact-react';
 export default function ($props, $blocks, $__proto__) {
@@ -19,14 +19,21 @@ export default function ($props, $blocks, $__proto__) {
     disabled = _this$get.disabled,
     closable = _this$get.closable,
     closed = _this$get.closed,
-    size = _this$get.size;
+    size = _this$get.size,
+    style = _this$get.style;
   var k = this.config.k;
-  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-tag"] = !$props.className, _classNameObj[className] = className, _classNameObj[k + "-" + type] = type !== 'default', _classNameObj[k + "-" + size] = size !== 'default', _classNameObj[k + "-" + border] = border, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-closable"] = closable, _classNameObj[makeStyles(k)] = true, _classNameObj[$props.className] = $props.className, _classNameObj);
+  var _this$tagColor = this.tagColor,
+    colorClassName = _this$tagColor.colorClassName,
+    customStyle = _this$tagColor.customStyle,
+    iconColor = _this$tagColor.iconColor;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-tag"] = !$props.className, _classNameObj[className] = className, _classNameObj[k + "-" + colorClassName.value] = colorClassName.value, _classNameObj[k + "-" + size] = size !== 'default', _classNameObj[k + "-" + border] = border, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-closable"] = closable, _classNameObj[makeStyles(k)] = true, _classNameObj[$props.className] = $props.className, _classNameObj);
   return _$cc(Transition, {
     'name': $props.name || k + "-scale",
     'children': !closed ? _$cv('div', _extends({
       'className': _$cn(classNameObj)
-    }, getRestProps(this)), [(_$blocks['body'] = function ($super) {
+    }, getRestProps(this), {
+      'style': addStyle(style, customStyle.value)
+    }), [(_$blocks['body'] = function ($super) {
       return children;
     }, __$blocks['body'] = function ($super, data) {
       var block = $blocks['body'];
@@ -37,7 +44,7 @@ export default function ($props, $blocks, $__proto__) {
     }, __$blocks['body'](_$no)), (_$blocks['_close'] = function ($super) {
       return closable ? _$cc(Icon, {
         'className': _$cn(k + "-tag-close ion-ios-close-empty"),
-        'color': type,
+        'color': iconColor.value,
         'hoverable': !disabled,
         'ev-click': this.onClose
       }) : undefined;

package/components/tag/styles.d.ts

@@ -3,6 +3,10 @@ type TypeStyles = {
     color: string;
     bgColor: string;
 };
+type ColorStyles = {
+    color: string;
+    bgColor: string;
+};
 declare const defaults: {
     readonly border: string;
     readonly borderRadius: string;
@@ -62,6 +66,11 @@ declare const defaults: {
     warning: TypeStyles;
     danger: TypeStyles;
     success: TypeStyles;
+} & {
+    blue: ColorStyles;
+    purple: ColorStyles;
+    teal: ColorStyles;
+    yellow: ColorStyles;
 };
 declare let tag: typeof defaults;
 export { tag };

package/components/tag/styles.js

@@ -5,6 +5,7 @@ import { theme, setDefault } from '../../styles/theme';
 import '../../styles/global';
 import { cache } from '../utils';
 var types = ['primary', 'warning', 'danger', 'success', 'disabled'];
+var colors = ['purple', 'teal', 'blue', 'yellow'];
 var defaults = deepDefaults({
   get border() {
     return "1px solid " + theme.color.border;
@@ -91,6 +92,16 @@ var defaults = deepDefaults({
     }
   };
   return memo;
+}, {}), colors.reduce(function (memo, color) {
+  memo[color] = {
+    get color() {
+      return theme.color[color];
+    },
+    get bgColor() {
+      return palette(theme.color[color], -4);
+    }
+  };
+  return memo;
 }, {}));
 var tag;
 setDefault(function () {
@@ -102,7 +113,9 @@ setDefault(function () {
 });
 export { tag };
 export var makeStyles = cache(function makeStyles(k) {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;padding:", tag.padding, ";border:", tag.border, ";border-radius:", tag.borderRadius, ";font-size:", tag.fontSize, ";height:", tag.height, ";.", k, "-tag-close{font-size:", tag.close.fontSize, ";margin-left:", tag.close.gap, ";width:", tag.close.width, ";}&.", k, "-none{border:none;background:", tag.none.bgColor, ";}", _mapInstanceProperty(types).call(types, function (t) {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;padding:", tag.padding, ";border:", tag.border, ";border-radius:", tag.borderRadius, ";font-size:", tag.fontSize, ";height:", tag.height, ";.", k, "-tag-close{font-size:", tag.close.fontSize, ";margin-left:", tag.close.gap, ";width:", tag.close.width, ";}&.", k, "-none{border:none;background:", tag.none.bgColor, ";}", _mapInstanceProperty(colors).call(colors, function (c) {
+    return /*#__PURE__*/css("&.", k, "-", c, "{color:", tag[c].color, ";border-color:", tag[c].color, ";background:", tag[c].bgColor, ";}");
+  }), " ", _mapInstanceProperty(types).call(types, function (t) {
     var styles = tag[t];
     return /*#__PURE__*/css("&.", k, "-", t, "{color:", styles.color, ";border-color:", styles.color, ";background:", styles.bgColor, ";}");
   }), " ", _mapInstanceProperty(sizes).call(sizes, function (s) {

package/components/tag/useColor.d.ts

@@ -0,0 +1,7 @@
+export declare function getIconColorValue(color: string | undefined, disabled: boolean | undefined): string | undefined;
+export declare function useColor(): {
+    effectiveColor: import("../../hooks/useState").State<string | undefined>;
+    colorClassName: import("../../hooks/useState").State<string | undefined>;
+    customStyle: import("../../hooks/useState").State<Record<string, string>>;
+    iconColor: import("../../hooks/useState").State<string | undefined>;
+};

package/components/tag/useColor.js

@@ -0,0 +1,71 @@
+var _context;
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
+import { useInstance } from 'intact-react';
+import { palette } from '../../styles/utils';
+import { useState } from '../../hooks/useState';
+import { useReceive } from '../../hooks/useReceive';
+import { theme } from '../../styles/theme';
+// type 支持的颜色
+var TYPE_COLORS = ['default', 'primary', 'danger', 'success', 'warning'];
+// color 支持的扩展内置颜色
+var EXTENDED_COLORS = ['purple', 'teal', 'blue', 'yellow'];
+// 所有内置颜色
+var BUILT_IN_COLORS = _concatInstanceProperty(_context = []).call(_context, TYPE_COLORS, EXTENDED_COLORS);
+export function getIconColorValue(color, disabled) {
+  if (disabled) return theme.color.disabled;
+  if (!color || color === 'default') return 'default';
+  if (_includesInstanceProperty(BUILT_IN_COLORS).call(BUILT_IN_COLORS, color)) {
+    var themeColor = theme.color[color];
+    return themeColor;
+  }
+  return color;
+}
+export function useColor() {
+  var instance = useInstance();
+  var effectiveColor = useState(undefined);
+  var colorClassName = useState(undefined);
+  var customStyle = useState({});
+  var iconColor = useState(undefined);
+  function updateColor() {
+    var _instance$get = instance.get(),
+      color = _instance$get.color,
+      type = _instance$get.type,
+      disabled = _instance$get.disabled;
+    var _effectiveColor = color || (_includesInstanceProperty(TYPE_COLORS).call(TYPE_COLORS, type) ? type : undefined); // color优先
+    effectiveColor.set(_effectiveColor);
+    var isBuiltIn = _effectiveColor ? _includesInstanceProperty(BUILT_IN_COLORS).call(BUILT_IN_COLORS, _effectiveColor) : false;
+    // 内置颜色 - 更新 colorClassName
+    if (_effectiveColor && isBuiltIn && _effectiveColor !== 'default') {
+      colorClassName.set(_effectiveColor);
+    } else {
+      colorClassName.set(undefined);
+    }
+    // 自定义颜色 - 更新 customStyle
+    if (_effectiveColor && !isBuiltIn && !disabled) {
+      var bgColor = palette(_effectiveColor, -4);
+      customStyle.set({
+        color: _effectiveColor,
+        borderColor: _effectiveColor,
+        backgroundColor: bgColor
+      });
+    } else {
+      customStyle.set({});
+    }
+    // 更新 iconColor
+    if (!_effectiveColor && !disabled) {
+      iconColor.set('default');
+    } else {
+      var _iconColor = getIconColorValue(_effectiveColor, disabled);
+      iconColor.set(_iconColor);
+    }
+  }
+  useReceive(['color', 'type', 'disabled'], updateColor);
+  updateColor();
+  return {
+    effectiveColor: effectiveColor,
+    colorClassName: colorClassName,
+    customStyle: customStyle,
+    iconColor: iconColor
+  };
+}