@type-dom/ui 0.0.4 → 0.0.6

package/src/constants/event.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INPUT_EVENT = exports.CHANGE_EVENT = exports.UPDATE_MODEL_EVENT = void 0;
+exports.UPDATE_MODEL_EVENT = 'update:modelValue';
+exports.CHANGE_EVENT = 'change';
+exports.INPUT_EVENT = 'input';

package/src/index.d.ts

@@ -1,6 +1,8 @@
 export * from './styles/index';
 export * from './components/basic';
+export * from './components/data';
 export * from './components/feedback';
 export * from './components/form';
 export * from './components/navigation';
 export * from './components/others';
+export * from './constants/event';

package/src/index.js

@@ -4,7 +4,9 @@ const tslib_1 = require("tslib");
 // import './styles/index.scss'; // 打包后整合在main.css文件中；
 tslib_1.__exportStar(require("./styles/index"), exports);
 tslib_1.__exportStar(require("./components/basic"), exports);
+tslib_1.__exportStar(require("./components/data"), exports);
 tslib_1.__exportStar(require("./components/feedback"), exports);
 tslib_1.__exportStar(require("./components/form"), exports);
 tslib_1.__exportStar(require("./components/navigation"), exports);
 tslib_1.__exportStar(require("./components/others"), exports);
+tslib_1.__exportStar(require("./constants/event"), exports);

package/src/styles/color-scheme.js

@@ -13,11 +13,11 @@ const colorScheme = {
                     5: '#a0cfff',
                     7: '#c6e2ff',
                     8: '#d9ecff',
-                    9: '#ecf5ff'
+                    9: '#ecf5ff',
                 },
                 dark: {
-                    2: '#337ecc'
-                }
+                    2: '#337ecc',
+                },
             },
             success: {
                 base: '#67c23a',
@@ -26,11 +26,11 @@ const colorScheme = {
                     5: '#b3e19d',
                     7: '#d1edc4',
                     8: '#e1f3d8',
-                    9: '#f0f9eb'
+                    9: '#f0f9eb',
                 },
                 dark: {
-                    2: '#529b2e'
-                }
+                    2: '#529b2e',
+                },
             },
             warning: {
                 base: '#e6a23c',
@@ -39,11 +39,11 @@ const colorScheme = {
                     5: '#f3d19e',
                     7: '#f8e3c5',
                     8: '#faecd8',
-                    9: '#fdf6ec'
+                    9: '#fdf6ec',
                 },
                 dark: {
-                    2: '#b88230'
-                }
+                    2: '#b88230',
+                },
             },
             danger: {
                 base: '#f56c6c',
@@ -52,11 +52,11 @@ const colorScheme = {
                     5: '#fab6b6',
                     7: '#fcd3d3',
                     8: '#fde2e2',
-                    9: '#fef0f0'
+                    9: '#fef0f0',
                 },
                 dark: {
-                    2: '#c45656'
-                }
+                    2: '#c45656',
+                },
             },
             // error: === danger
             info: {
@@ -66,12 +66,12 @@ const colorScheme = {
                     5: '#c8c9cc',
                     7: '#dedfe0',
                     8: '#e9e9eb',
-                    9: '#f4f4f5'
+                    9: '#f4f4f5',
                 },
                 dark: {
-                    2: '#73767a'
-                }
-            }
+                    2: '#73767a',
+                },
+            },
         },
         bgColor: var_1.$bgColor,
         textColor: var_1.$textColor,
@@ -80,9 +80,9 @@ const colorScheme = {
         boxShadow: var_1.$boxShadow,
         disabled: var_1.$disabled,
         overlay: {
-            color: var_1.$overlayColor
+            color: var_1.$overlayColor,
         },
         borderWidth: var_1.$borderWidth,
-        borderStyle: var_1.$borderStyle
-    }
+        borderStyle: var_1.$borderStyle,
+    },
 };

package/src/styles/function.js

@@ -1,6 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.bem = exports.getCssVarWithDefault = exports.getCssVar = exports.getCssVarName = exports.joinVarName = exports.hitAllSpecialNestRule = exports.containPseudoClass = exports.containWhenFlag = exports.containsModifier = exports.selectorToString = void 0;
+exports.selectorToString = selectorToString;
+exports.containsModifier = containsModifier;
+exports.containWhenFlag = containWhenFlag;
+exports.containPseudoClass = containPseudoClass;
+exports.hitAllSpecialNestRule = hitAllSpecialNestRule;
+exports.joinVarName = joinVarName;
+exports.getCssVarName = getCssVarName;
+exports.getCssVar = getCssVar;
+exports.getCssVarWithDefault = getCssVarWithDefault;
+exports.bem = bem;
 const config = require("./config");
 // BEM support Func
 function selectorToString($selector) {
@@ -9,28 +18,23 @@ function selectorToString($selector) {
     $selector = $selector.slice(2, -2);
     return $selector;
 }
-exports.selectorToString = selectorToString;
 function containsModifier($selector) {
     $selector = selectorToString($selector);
     return !!$selector.indexOf(config.$modifierSeparator);
 }
-exports.containsModifier = containsModifier;
 function containWhenFlag($selector) {
     $selector = selectorToString($selector);
     return !!$selector.indexOf('.' + config.$statePrefix);
 }
-exports.containWhenFlag = containWhenFlag;
 function containPseudoClass($selector) {
     $selector = selectorToString($selector);
     return !!$selector.indexOf(':');
 }
-exports.containPseudoClass = containPseudoClass;
 function hitAllSpecialNestRule($selector) {
-    return containsModifier($selector)
-        || containWhenFlag($selector)
-        || containPseudoClass($selector);
+    return (containsModifier($selector) ||
+        containWhenFlag($selector) ||
+        containPseudoClass($selector));
 }
-exports.hitAllSpecialNestRule = hitAllSpecialNestRule;
 // join var name
 // joinVarName(('button', 'text-color')) => '--el-button-text-color'
 function joinVarName($list) {
@@ -42,24 +46,20 @@ function joinVarName($list) {
     }
     return $name;
 }
-exports.joinVarName = joinVarName;
 // getCssVarName('button', 'text-color') => '--el-button-text-color'
 function getCssVarName(...$args) {
     return joinVarName($args);
 }
-exports.getCssVarName = getCssVarName;
 // getCssVar('button', 'text-color') => var(--el-button-text-color)
 function getCssVar(...$args) {
     // return var(#{joinVarName($args)});
     return joinVarName($args);
 }
-exports.getCssVar = getCssVar;
 // getCssVarWithDefault(('button', 'text-color'), red) => var(--el-button-text-color, red)
 function getCssVarWithDefault($args, $default) {
     // return var(#{joinVarName($args)}, #{$default});
     return joinVarName($args) || $default;
 }
-exports.getCssVarWithDefault = getCssVarWithDefault;
 // bem('block', 'element', 'modifier') => 'el-block__element--modifier'
 function bem($block, $element, $modifier) {
     let $name = config.$namespace + config.$commonSeparator + $block;
@@ -72,4 +72,3 @@ function bem($block, $element, $modifier) {
     // debug $name;
     return $name;
 }
-exports.bem = bem;

package/src/styles/index.d.ts

@@ -1 +1,2 @@
 export * from './var';
+export type { ISize } from './size';

package/src/styles/size.d.ts

@@ -1,7 +1,2 @@
 export declare const componentSizes: readonly ["", "default", "small", "large"];
-export declare const componentSizeMap: {
-    readonly large: 40;
-    readonly default: 32;
-    readonly small: 24;
-};
 export type ISize = /*'' | */ 'default' | 'small' | 'large';

package/src/styles/size.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.componentSizeMap = exports.componentSizes = void 0;
+exports.componentSizes = void 0;
 exports.componentSizes = ['', 'default', 'small', 'large'];
-exports.componentSizeMap = {
+const componentSizeMap = {
     large: 40,
     default: 32,
-    small: 24
+    small: 24,
 };

package/src/styles/transition.d.ts

@@ -0,0 +1,32 @@
+import { IStyle } from '@type-dom/css-type';
+export declare const $transitionDuration: {
+    '': string;
+    default: string;
+    fast: string;
+};
+export declare const $transitionFunction: {
+    easeInOutBezier: string;
+    fastBezier: string;
+};
+export declare const $transition: {
+    all: string;
+    fade: string;
+    mdFade: string;
+    fadeLinear: string;
+    border: string;
+    boxShadow: string;
+    color: string;
+};
+export declare const $fadeInLinearActive: IStyle;
+export declare const $fadeInLinearEnterFrom: IStyle;
+export declare const $fadeInActive: IStyle;
+export declare const $zoomInCenterEnterFrom: IStyle;
+export declare const $zoomInTopActive: IStyle;
+export declare const $zoomInTopEnterFrom: IStyle;
+export declare const $zoomInBottomActive: IStyle;
+export declare const $zoomInBottomEnterFrom: IStyle;
+export declare const $zoomInLeftActive: IStyle;
+export declare const $zoomInLeftEnterFrom: IStyle;
+export declare const $collapseTransition: IStyle;
+export declare const $collapseTransitionActive: IStyle;
+export declare const $horizontalCollapseTransition: IStyle;

package/src/styles/transition.js

@@ -0,0 +1,222 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$horizontalCollapseTransition = exports.$collapseTransitionActive = exports.$collapseTransition = exports.$zoomInLeftEnterFrom = exports.$zoomInLeftActive = exports.$zoomInBottomEnterFrom = exports.$zoomInBottomActive = exports.$zoomInTopEnterFrom = exports.$zoomInTopActive = exports.$zoomInCenterEnterFrom = exports.$fadeInActive = exports.$fadeInLinearEnterFrom = exports.$fadeInLinearActive = exports.$transition = exports.$transitionFunction = exports.$transitionDuration = void 0;
+exports.$transitionDuration = {
+    '': '0.3s',
+    default: '0.3s',
+    fast: '0.2s',
+};
+exports.$transitionFunction = {
+    easeInOutBezier: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
+    fastBezier: 'cubic-bezier(0.23, 1, 0.32, 1)',
+};
+// transition
+exports.$transition = {
+    //   'all': all getCssVar('transition-duration')
+    // getCssVar('transition-function-ease-in-out-bezier'),
+    all: 'all ' +
+        exports.$transitionDuration.default +
+        ' ' +
+        exports.$transitionFunction.easeInOutBezier,
+    //   'fade': opacity getCssVar('transition-duration')
+    // getCssVar('transition-function-fast-bezier'),
+    fade: 'opacity ' +
+        exports.$transitionDuration.default +
+        ' ' +
+        exports.$transitionFunction.fastBezier,
+    //   'md-fade': (
+    //   transform getCssVar('transition-duration')
+    // getCssVar('transition-function-fast-bezier'),
+    //   opacity getCssVar('transition-duration')
+    // getCssVar('transition-function-fast-bezier'),
+    // ),
+    mdFade: 'transform ' +
+        exports.$transitionDuration.fast +
+        ' ' +
+        exports.$transitionFunction.fastBezier +
+        ', opacity ' +
+        exports.$transitionDuration.default +
+        ' ' +
+        exports.$transitionFunction.fastBezier,
+    // 'fade-linear': opacity getCssVar('transition-duration-fast') linear,
+    fadeLinear: 'opacity ' + exports.$transitionDuration.fast + ' linear',
+    //   'border': border-color getCssVar('transition-duration-fast')
+    // getCssVar('transition-function-ease-in-out-bezier'),
+    border: 'border-color ' +
+        exports.$transitionDuration.fast +
+        ' ' +
+        exports.$transitionFunction.easeInOutBezier,
+    //   'box-shadow': box-shadow getCssVar('transition-duration-fast')
+    // getCssVar('transition-function-ease-in-out-bezier'),
+    boxShadow: 'box-shadow ' +
+        exports.$transitionDuration.fast +
+        ' ' +
+        exports.$transitionFunction.easeInOutBezier,
+    //   'color': color getCssVar('transition-duration-fast')
+    // getCssVar('transition-function-ease-in-out-bezier'),
+    color: 'color ' +
+        exports.$transitionDuration.fast +
+        ' ' +
+        exports.$transitionFunction.easeInOutBezier,
+};
+//.fade-in-linear-enter-active,
+//.fade-in-linear-leave-active {
+//  transition: getCssVar('transition-fade', 'linear');
+//}
+exports.$fadeInLinearActive = {
+    transition: exports.$transition.fadeLinear,
+};
+// .fade-in-linear-enter-from,
+//   .fade-in-linear-leave-to {
+//   opacity: 0;
+// }
+exports.$fadeInLinearEnterFrom = {
+    opacity: 0,
+};
+// .#{$namespace}-fade-in-enter-active,
+//   .#{$namespace}-fade-in-leave-active {
+//   transition: all getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
+// }
+exports.$fadeInActive = {
+    transition: 'all ' + exports.$transitionDuration.default + ' cubic-bezier(0.55, 0, 0.1, 1)',
+};
+//.#{$namespace}-zoom-in-center-enter-from,
+//.#{$namespace}-zoom-in-center-leave-active {
+//  opacity: 0;
+//  transform: scaleX(0);
+//}
+exports.$zoomInCenterEnterFrom = {
+    opacity: 0,
+    transform: 'scaleX(0)',
+};
+//.#{$namespace}-zoom-in-top-enter-active,
+//.#{$namespace}-zoom-in-top-leave-active {
+//  opacity: 1;
+//  transform: scaleY(1);
+//  transition: getCssVar('transition-md-fade');
+//  transform-origin: center top;
+//
+//  &[data-popper-placement^='top'] {
+//    transform-origin: center bottom;
+//  }
+//}
+exports.$zoomInTopActive = {
+    opacity: 1,
+    transform: 'scaleY(1)',
+    transition: exports.$transition.mdFade,
+    transformOrigin: 'center top',
+    // '&[data-popper-placement^="top"]': {
+    //   transformOrigin: 'center bottom'
+    // }
+};
+//.#{$namespace}-zoom-in-top-enter-from,
+//.#{$namespace}-zoom-in-top-leave-active {
+//  opacity: 0;
+//  transform: scaleY(0);
+//}
+exports.$zoomInTopEnterFrom = {
+    opacity: 0,
+    transform: 'scaleY(0)',
+};
+//.#{$namespace}-zoom-in-bottom-enter-active,
+//.#{$namespace}-zoom-in-bottom-leave-active {
+//  opacity: 1;
+//  transform: scaleY(1);
+//  transition: getCssVar('transition-md-fade');
+//  transform-origin: center bottom;
+//}
+exports.$zoomInBottomActive = {
+    opacity: 1,
+    transform: 'scaleY(1)',
+    transition: exports.$transition.mdFade,
+    transformOrigin: 'center bottom',
+};
+//.#{$namespace}-zoom-in-bottom-enter-from,
+//.#{$namespace}-zoom-in-bottom-leave-active {
+//  opacity: 0;
+//  transform: scaleY(0);
+//}
+exports.$zoomInBottomEnterFrom = {
+    opacity: 0,
+    transform: 'scaleY(0)',
+};
+//.#{$namespace}-zoom-in-left-enter-active,
+//.#{$namespace}-zoom-in-left-leave-active {
+//  opacity: 1;
+//  transform: scale(1, 1);
+//  transition: getCssVar('transition-md-fade');
+//  transform-origin: top left;
+//}
+exports.$zoomInLeftActive = {
+    opacity: 1,
+    transform: 'scale(1, 1)',
+    transition: exports.$transition.mdFade,
+    transformOrigin: 'top left',
+};
+//.#{$namespace}-zoom-in-left-enter-from,
+//.#{$namespace}-zoom-in-left-leave-active {
+//  opacity: 0;
+//  transform: scale(0.45, 0.45);
+//}
+exports.$zoomInLeftEnterFrom = {
+    opacity: 0,
+    transform: 'scale(0.45, 0.45)',
+};
+// .collapse-transition {
+//   transition: getCssVar('transition-duration') height ease-in-out,
+//     getCssVar('transition-duration') padding-top ease-in-out,
+//     getCssVar('transition-duration') padding-bottom ease-in-out;
+// }
+// .collapse-transition {
+//   transition: var(--el-transition-duration) height ease-in-out,var(--el-transition-duration) padding-top ease-in-out,var(--el-transition-duration) padding-bottom ease-in-out
+// }
+//
+exports.$collapseTransition = {
+    transition: exports.$transitionDuration.default +
+        ' height ease-in-out, ' +
+        exports.$transitionDuration.default +
+        ' padding-top ease-in-out, ' +
+        exports.$transitionDuration.default +
+        ' padding-bottom ease-in-out',
+};
+// .#{$namespace}-collapse-transition-leave-active,
+//   .#{$namespace}-collapse-transition-enter-active {
+//   transition: getCssVar('transition-duration') max-height ease-in-out,
+//     getCssVar('transition-duration') padding-top ease-in-out,
+//     getCssVar('transition-duration') padding-bottom ease-in-out;
+// }
+// .el-collapse-transition-leave-active,.el-collapse-transition-enter-active {
+//   transition: var(--el-transition-duration) max-height ease-in-out,
+//   var(--el-transition-duration) padding-top ease-in-out,
+//   var(--el-transition-duration) padding-bottom ease-in-out
+// }
+//
+exports.$collapseTransitionActive = {
+    transition: exports.$transitionDuration.default +
+        ' max-height ease-in-out, ' +
+        exports.$transitionDuration.default +
+        ' padding-top ease-in-out, ' +
+        exports.$transitionDuration.default +
+        ' padding-bottom ease-in-out',
+};
+// .horizontal-collapse-transition {
+//   transition: getCssVar('transition-duration') width ease-in-out,
+//     getCssVar('transition-duration') padding-left ease-in-out,
+//     getCssVar('transition-duration') padding-right ease-in-out;
+// }
+// .horizontal-collapse-transition {
+//   transition: var(--el-transition-duration) width ease-in-out,var(--el-transition-duration) padding-left ease-in-out,var(--el-transition-duration) padding-right ease-in-out
+// }
+exports.$horizontalCollapseTransition = {
+    transition: exports.$transitionDuration.default +
+        'width ease-in-out, ' +
+        exports.$transitionDuration.default +
+        ' padding-left ease-in-out, ' +
+        exports.$transitionDuration.default +
+        ' padding-right ease-in-out',
+};
+//
+// .horizontal-collapse-transition .el-sub-menu__title .el-sub-menu__icon-arrow {
+//   transition: var(--el-transition-duration-fast);
+//   opacity: 0
+// }

package/src/styles/var.d.ts

@@ -1,3 +1,4 @@
+import { IStyle, Property } from '@type-dom/css-type';
 /**
  * scss/var
  */
@@ -26,6 +27,7 @@ export declare const $borderColor: {
 };
 export declare const $fillColor: {
     '': string;
+    default: string;
     light: string;
     lighter: string;
     extraLight: string;
@@ -50,12 +52,14 @@ export declare const $borderRadius: {
 };
 export declare const $boxShadow: {
     '': string;
+    default: string;
     light: string;
     lighter: string;
     dark: string;
 };
 export declare const fontFamily: {
     '': string;
+    default: string;
 };
 export declare const $fontSizes: {
     extraLarge: string;
@@ -90,6 +94,7 @@ export declare const $commonComponentSize: {
 };
 export declare const $overlayColor: {
     '': string;
+    default: string;
     light: string;
     lighter: string;
 };
@@ -135,7 +140,7 @@ export declare const $colorError: string;
 export declare const $colorInfo: string;
 export declare function setColorMixLevel($type: IType, $number: number, $mode?: string, $mixColor?: string): void;
 export declare const $button: {
-    fontWeight: number;
+    fontWeight: Property.FontWeight;
     borderColor: string;
     bgColor: string;
     textColor: string;
@@ -194,9 +199,13 @@ export declare const $paddingHorizontalMap: {
 export declare const $transitionDuration = "0.3s";
 export declare const $transitionDurationFast = "0.2s";
 export declare const $colorPrimaryRgb = "64, 158, 255";
+export declare const $colorDangerRgb = "245, 108, 108";
 export declare const $scrollbar: {
     opacity: number;
     bgColor: string;
     hoverOpacity: number;
     hoverBgColor: string;
 };
+export declare const $ellipsisStyle: IStyle;
+export declare const $border: string;
+export declare const $svgMonochromeGrey: string;

package/src/styles/var.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.$scrollbar = exports.$colorPrimaryRgb = exports.$transitionDurationFast = exports.$transitionDuration = exports.$paddingHorizontalMap = exports.$paddingVerticalMap = exports.$borderRadiusMap = exports.$fontSizeMap = exports.$buttonTextColor = exports.$buttonBgColor = exports.$buttonBorderColor = exports.$buttonActiveShadePercent = exports.$buttonHoverTintPercent = exports.$buttonBorderWidth = exports.$button = exports.setColorMixLevel = exports.$colorInfo = exports.$colorError = exports.$colorDanger = exports.$colorWarning = exports.$colorSuccess = exports.$colorPrimary = exports.$colorBlack = exports.$colorWhite = exports.$colors = exports.$overlayColor = exports.$commonComponentSize = exports.componentSizeMap = exports.componentSizes = exports.$disabled = exports.$zIndex = exports.$fontSizes = exports.fontFamily = exports.$boxShadow = exports.$borderRadius = exports.$borderColorHover = exports.$borderStyle = exports.$borderWidth = exports.$bgColor = exports.$fillColor = exports.$borderColor = exports.$textColor = exports.$types = exports.$fontLineHeightPrimary = exports.$fontWeightPrimary = void 0;
+exports.$svgMonochromeGrey = exports.$border = exports.$ellipsisStyle = exports.$scrollbar = exports.$colorDangerRgb = exports.$colorPrimaryRgb = exports.$transitionDurationFast = exports.$transitionDuration = exports.$paddingHorizontalMap = exports.$paddingVerticalMap = exports.$borderRadiusMap = exports.$fontSizeMap = exports.$buttonTextColor = exports.$buttonBgColor = exports.$buttonBorderColor = exports.$buttonActiveShadePercent = exports.$buttonHoverTintPercent = exports.$buttonBorderWidth = exports.$button = exports.$colorInfo = exports.$colorError = exports.$colorDanger = exports.$colorWarning = exports.$colorSuccess = exports.$colorPrimary = exports.$colorBlack = exports.$colorWhite = exports.$colors = exports.$overlayColor = exports.$commonComponentSize = exports.componentSizeMap = exports.componentSizes = exports.$disabled = exports.$zIndex = exports.$fontSizes = exports.fontFamily = exports.$boxShadow = exports.$borderRadius = exports.$borderColorHover = exports.$borderStyle = exports.$borderWidth = exports.$bgColor = exports.$fillColor = exports.$borderColor = exports.$textColor = exports.$types = exports.$fontLineHeightPrimary = exports.$fontWeightPrimary = void 0;
+exports.setColorMixLevel = setColorMixLevel;
 /**
  * scss/var
  */
@@ -32,6 +33,7 @@ exports.$borderColor = {
 };
 exports.$fillColor = {
     '': '#f0f2f5',
+    default: '#f0f2f5',
     light: '#f5f7fa',
     lighter: '#fafafa',
     extraLight: '#fafcff',
@@ -59,6 +61,7 @@ exports.$borderRadius = {
 // Box-shadow
 exports.$boxShadow = {
     '': `0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08)`,
+    default: '0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08)',
     light: '0px 0px 12px rgba(0, 0, 0, 0.12)',
     lighter: '0px 0px 6px rgba(0, 0, 0, 0.12)',
     dark: '0px 16px 48px 16px rgba(0, 0, 0, 0.08),0px 12px 32px rgba(0, 0, 0, 0.12),0px 8px 16px -8px rgba(0, 0, 0, 0.16)',
@@ -66,6 +69,7 @@ exports.$boxShadow = {
 // Typography （排版）
 exports.fontFamily = {
     '': "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif",
+    default: "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif",
 };
 exports.$fontSizes = {
     extraLarge: '20px',
@@ -102,13 +106,15 @@ exports.$commonComponentSize = {
 // overlay
 exports.$overlayColor = {
     '': 'rgba(0, 0, 0, 0.8)',
+    default: 'rgba(0, 0, 0, 0.8)',
     light: 'rgba(0, 0, 0, 0.7)',
     lighter: 'rgba(0, 0, 0, 0.5)',
 };
 // mask
 const $maskColor = {
     '': 'rgba(255, 255, 255, 0.9)',
-    'extra-light': 'rgba(255, 255, 255, 0.3)',
+    default: 'rgba(255, 255, 255, 0.9)',
+    extraLight: 'rgba(255, 255, 255, 0.3)',
 };
 exports.$colors = {
     white: '#ffffff',
@@ -182,7 +188,6 @@ function setColorMixLevel($type, $number, $mode = 'light', $mixColor = exports.$
     // );
     // return $colors;
 }
-exports.setColorMixLevel = setColorMixLevel;
 // $colors.primary.light-i
 // --el-color-primary-light-i
 // 10% 53a8ff
@@ -269,6 +274,7 @@ exports.$paddingHorizontalMap = {
 exports.$transitionDuration = '0.3s';
 exports.$transitionDurationFast = '0.2s';
 exports.$colorPrimaryRgb = '64, 158, 255';
+exports.$colorDangerRgb = '245, 108, 108';
 // Scrollbar
 // css3 var in packages/theme-chalk/src/scrollbar.scss
 exports.$scrollbar = {
@@ -279,3 +285,11 @@ exports.$scrollbar = {
     // 'hover-bg-color': getCssVar('text-color-secondary'),
     hoverBgColor: exports.$textColor.secondary,
 };
+exports.$ellipsisStyle = {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+exports.$border = exports.$borderWidth + ' ' + exports.$borderStyle + ' ' + exports.$borderColor.base;
+// Svg
+exports.$svgMonochromeGrey = exports.$borderColor.base;

package/src/ui/ui.abstract.d.ts

@@ -1,8 +1,18 @@
-import { TypeHtml } from '@type-dom/framework';
-import { IUI, IUIConfig } from './ui.interface';
-export declare abstract class UI extends TypeHtml implements IUI {
-    nodeName: string;
-    dom: HTMLElement;
+import { ITypeConfig, SlotNode, TypeElement } from '@type-dom/framework';
+import { IUI, IUISlotNodes } from './ui.interface';
+export declare let componentId: number;
+export declare abstract class UI<T extends HTMLElement | undefined = HTMLElement> extends TypeElement implements IUI {
+    nodeName: 'fragment' | string;
+    dom: T;
     componentId: number;
-    protected constructor(config?: IUIConfig);
+    private slotNodes;
+    protected constructor(params: ITypeConfig | undefined, tag?: string);
+    /**
+     * 确保slot存在，不存在则创建；
+     * 要在useSlots之后调用
+     *
+     * @param name
+     */
+    getSlotNode(name?: string): SlotNode;
+    useSlots<T extends IUISlotNodes>(params?: ITypeConfig): T;
 }