@type-dom/ui 0.0.3 → 0.0.5

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

@@ -26,9 +26,9 @@ function containPseudoClass($selector) {
 }
 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

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,6 @@
 "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.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;
 /**
  * scss/var
  */
@@ -32,6 +32,7 @@ exports.$borderColor = {
 };
 exports.$fillColor = {
     '': '#f0f2f5',
+    default: '#f0f2f5',
     light: '#f5f7fa',
     lighter: '#fafafa',
     extraLight: '#fafcff',
@@ -59,6 +60,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 +68,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 +105,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',
@@ -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;
 }

package/src/ui/ui.abstract.js

@@ -1,22 +1,50 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UI = void 0;
+exports.UI = exports.componentId = void 0;
 const framework_1 = require("@type-dom/framework");
-let componentId = 0;
-class UI extends framework_1.TypeHtml {
-    constructor(config) {
+exports.componentId = 0;
+class UI extends framework_1.TypeElement {
+    // 手动的方式设置 fragment; 实现类似 TypeFragment 类
+    constructor(params, tag = 'div') {
         super();
-        this.componentId = componentId++;
-        this.addAttrObj({
-            componentId: this.componentId
+        this.params = params !== null && params !== void 0 ? params : this.params; // setConfig  重复
+        this.componentId = exports.componentId++;
+        this.ctrl.addAttrObj({
+            componentId: this.componentId,
         });
-        if (config === null || config === void 0 ? void 0 : config.tag) {
-            this.nodeName = config.tag;
+        this.nodeName = tag;
+        if (this.nodeName === 'fragment') {
+            this.dom = undefined;
         }
         else {
-            this.nodeName = 'div';
+            this.dom = document.createElement(this.nodeName.trim());
         }
-        this.dom = document.createElement(this.nodeName.trim());
+        this.slotNodes = {
+            default: new framework_1.SlotNode('default'),
+        };
+        // todo 统一处理，还是在各个类中处理
+        this.useSlots(params);
+    }
+    /**
+     * 确保slot存在，不存在则创建；
+     * 要在useSlots之后调用
+     *
+     * @param name
+     */
+    getSlotNode(name = 'default') {
+        var _a;
+        return this.slotNodes[name] = (_a = this.slotNodes[name]) !== null && _a !== void 0 ? _a : new framework_1.SlotNode(name);
+    }
+    useSlots(params) {
+        if (params === null || params === void 0 ? void 0 : params.slot) {
+            this.getSlotNode().resetSlot(params.slot);
+        }
+        (params === null || params === void 0 ? void 0 : params.slots) &&
+            Object.keys(params.slots).forEach((key) => {
+                var _a;
+                this.getSlotNode(key).resetSlot((_a = params.slots) === null || _a === void 0 ? void 0 : _a[key]);
+            });
+        return this.slotNodes;
     }
 }
 exports.UI = UI;

package/src/ui/ui.interface.d.ts

@@ -1,8 +1,12 @@
-import { ITypeConfig, ITypeHtml } from '@type-dom/framework';
-export interface IUI extends ITypeHtml {
+import { ISlotNodes, ITypeConfig, ITypeElement, SlotNode } from '@type-dom/framework';
+export interface IUI extends ITypeElement {
     componentId?: string | number;
 }
 export interface IUIConfig extends ITypeConfig {
     tag?: string;
-    items?: IUIConfig[];
+    items?: ITypeConfig[];
+    childNodes?: undefined;
+}
+export interface IUISlotNodes extends ISlotNodes {
+    default: SlotNode;
 }

package/src/utils/types.d.ts

@@ -0,0 +1,8 @@
+export declare const isUndefined: (val: any) => val is undefined;
+export declare const isBoolean: (val: any) => val is boolean;
+export declare const isNumber: (val: any) => val is number;
+export declare const isEmpty: (val: unknown) => boolean;
+export declare const isElement: (e: unknown) => e is Element;
+export declare const isPropAbsent: (prop: unknown) => prop is null | undefined;
+export declare const isStringNumber: (val: string) => boolean;
+export declare const isWindow: (val: unknown) => val is Window;