@type-dom/ui 0.1.3 → 0.2.1

package/README.md

@@ -1,134 +1,134 @@
-## 项目说明
-
-> 这是一个基于前端框架TypeDom创建的UI组件库。
-> 框架基于TypeDom框架开发，TypeDom框架基于TypeScript开发。
-> 对标 element-plus 的组件开发。
-
-## 安装
-
-> npm install @type-dom/ui
-
-## 框架介绍
-
-    1、技术栈
-        –	type-dom框架
-        –	webpack
-        –	typescript
-        –	抽象类
-        –	实体类
-    2、项目结构
-        –	src
-            –	components
-                -   basic
-                -   data
-                -   feedback
-                -   form
-                -   navigation
-                -   other
-            –   constants
-            -   hooks
-            - locale
-            - styles
-            - theme-chalk   
-            - utils
-            - index.ts
-        -   test
-
-# type-dom UI组件库
-
-## basic 基础组件（共8项，完成8项）
-
-    Button 按钮 ✔️
-    Container 容器 ✔️
-        td-header
-        td-aside
-        td-main
-        td-footer
-    Icon 图标 ✔️
-    Layout 布局 ✔️
-        Row
-        Col
-    Link 链接 ✔️
-    Text 文本 ✔️
-    Scrollbar 滚动条 ✔️
-    Space 间距 ✔️
-
-## data 数据组件（共23项，完成12项）
-
-    Avatar 头像 ✔️
-    Badge 徽章 ✔️
-    Calendar 日历
-    Card 卡片 ✔️
-    Carousel 走马灯
-    Collapse 折叠面板 ✔️
-    Descriptions 描述列表 ✔️
-    Empty 空状态 ✔️
-    Image 图片 ✔️
-    Infinite Scroll 无限滚动
-    Pagination 分页
-    Progress 进度条 ✔️
-    Result 结果 ✔️
-    Skeleton 骨架屏
-    Table 表格
-    Virtualized Table 虚拟化表
-    Tag 标签 ✔️
-    Timeline 时间线
-    Tree 树形控件
-    TreeSelect 树形选择
-    Virtualized Tree 虚拟化树形控件
-    Statistic 统计组件 ✔️
-    Segmented 分段控制器 ✔️
-
-## form 表单组件（共20项，完成7项）
-
-    Autocomplete 自动补全输入框
-    Cascader 级联选择器
-    Checkbox 多选框 ✔️
-    ColorPicker 颜色选择器
-    DatePicker 日期选择器
-    DateTimePicker 日期时间选择器
-    Form 表单 ⚠️
-    Input 输入框 ✔️
-    Input Number 数字输入框 ✔️
-    Input Tag 标签输入框
-    Radio 单选框 ✔️
-    Rate 评分 ✔️
-    Select 选择器 🔄 
-    Virtualized Select 虚拟化选择器
-    Slider 滑块 ✔️
-    Switch 开关 ✔️
-    TimePicker 时间选择器
-    TimeSelect 时间选择
-    Transfer 穿梭框
-    Upload 上传 ⚠️
-
-
-## feedback 反馈组件（共10项，完成8项）
-
-    Alert 提示 ✔️
-    Dialog 对话框 ✔️
-    Drawer 抽屉
-    Loading 加载
-    Message 消息提示 ✔️
-    Message Box 消息弹出框 ✔️
-    Notification 通知 ✔️
-    Popconfirm 气泡确认框 ✔️
-    Popover 弹出框 ✔️
-    Tooltip 文字提示 ✔️
-
-## navigation 导航组件（共9项，完成2项）
-
-    Affix 固钉 ⚠️
-    Anchor 锚点 ⚠️
-    Backtop 回到顶部 ✔️
-    Breadcrumb 面包屑 ✔️
-    Dropdown 下拉菜单
-    Menu 菜单 🔄 
-    Page Header 页头
-    Steps 步骤条
-    Tabs 标签页 🔄 
-
-## other 其它组件
-
-    Divider 分割线 ✔️
-    Watermark 水印
+## 项目说明
+
+> 这是一个基于前端框架TypeDom创建的UI组件库。
+> 框架基于TypeDom框架开发，TypeDom框架基于TypeScript开发。
+> 对标 element-plus 的组件开发。
+
+## 安装
+
+> npm install @type-dom/ui
+
+## 框架介绍
+
+    1、技术栈
+        –	type-dom框架
+        –	webpack
+        –	typescript
+        –	抽象类
+        –	实体类
+    2、项目结构
+        –	src
+            –	components
+                -   basic
+                -   data
+                -   feedback
+                -   form
+                -   navigation
+                -   other
+            –   constants
+            -   hooks
+            - locale
+            - styles
+            - theme-chalk   
+            - utils
+            - index.ts
+        -   test
+
+# type-dom UI组件库
+
+## basic 基础组件（共8项，完成8项）
+
+    Button 按钮 ✔️
+    Container 容器 ✔️
+        td-header
+        td-aside
+        td-main
+        td-footer
+    Icon 图标 ✔️
+    Layout 布局 ✔️
+        Row
+        Col
+    Link 链接 ✔️
+    Text 文本 ✔️
+    Scrollbar 滚动条 ✔️
+    Space 间距 ✔️
+
+## data 数据组件（共23项，完成12项）
+
+    Avatar 头像 ✔️
+    Badge 徽章 ✔️
+    Calendar 日历
+    Card 卡片 ✔️
+    Carousel 走马灯
+    Collapse 折叠面板 ✔️
+    Descriptions 描述列表 ✔️
+    Empty 空状态 ✔️
+    Image 图片 ✔️
+    Infinite Scroll 无限滚动
+    Pagination 分页
+    Progress 进度条 ✔️
+    Result 结果 ✔️
+    Skeleton 骨架屏
+    Table 表格
+    Virtualized Table 虚拟化表
+    Tag 标签 ✔️
+    Timeline 时间线
+    Tree 树形控件
+    TreeSelect 树形选择
+    Virtualized Tree 虚拟化树形控件
+    Statistic 统计组件 ✔️
+    Segmented 分段控制器 ✔️
+
+## form 表单组件（共20项，完成7项）
+
+    Autocomplete 自动补全输入框
+    Cascader 级联选择器
+    Checkbox 多选框 ✔️
+    ColorPicker 颜色选择器
+    DatePicker 日期选择器
+    DateTimePicker 日期时间选择器
+    Form 表单 ⚠️
+    Input 输入框 ✔️
+    Input Number 数字输入框 ✔️
+    Input Tag 标签输入框
+    Radio 单选框 ✔️
+    Rate 评分 ✔️
+    Select 选择器 🔄 
+    Virtualized Select 虚拟化选择器
+    Slider 滑块 ✔️
+    Switch 开关 ✔️
+    TimePicker 时间选择器
+    TimeSelect 时间选择
+    Transfer 穿梭框
+    Upload 上传 ⚠️
+
+
+## feedback 反馈组件（共10项，完成8项）
+
+    Alert 提示 ✔️
+    Dialog 对话框 ✔️
+    Drawer 抽屉
+    Loading 加载
+    Message 消息提示 ✔️
+    Message Box 消息弹出框 ✔️
+    Notification 通知 ✔️
+    Popconfirm 气泡确认框 ✔️
+    Popover 弹出框 ✔️
+    Tooltip 文字提示 ✔️
+
+## navigation 导航组件（共9项，完成2项）
+
+    Affix 固钉 ⚠️
+    Anchor 锚点 ⚠️
+    Backtop 回到顶部 ✔️
+    Breadcrumb 面包屑 ✔️
+    Dropdown 下拉菜单
+    Menu 菜单 🔄 
+    Page Header 页头
+    Steps 步骤条
+    Tabs 标签页 🔄 
+
+## other 其它组件
+
+    Divider 分割线 ✔️
+    Watermark 水印

package/package.json

@@ -1,22 +1,28 @@
 {
   "name": "@type-dom/ui",
-  "version": "0.1.3",
+  "version": "0.2.1",
+  "type": "module",
+  "main": "./src/index.js",
+  "module": "./src/index.js",
+  "types": "./src/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "development": "./src/index.ts",
+      "types": "./src/index.d.ts",
+      "import": "./src/index.js",
+      "default": "./src/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!**/*.tsbuildinfo"
+  ],
   "dependencies": {
+    "tslib": "^2.3.0",
     "lodash": "^4.17.21",
-    "sass-embedded": "^1.86.3",
-    "@type-dom/async-validator": "*",
-    "@type-dom/color": "*",
-    "@type-dom/css-type": "*",
-    "@type-dom/framework": "*",
-    "@type-dom/popper": "*",
-    "@type-dom/router": "*",
-    "@type-dom/signals": "*",
-    "@type-dom/svgs": "*",
-    "@type-dom/utils": "*"
+    "sass-embedded": "^1.86.3"
   },
-  "type": "commonjs",
-  "main": "./src/index.js",
-  "types": "./src/index.d.ts",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

package/src/components/base/index.d.ts

@@ -1,2 +0,0 @@
-export { TdTeleport } from './td-teleport/td-teleport.class';
-export type * from './td-teleport/td-teleport.interface';

package/src/components/base/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdTeleport = void 0;
-var td_teleport_class_1 = require("./td-teleport/td-teleport.class");
-Object.defineProperty(exports, "TdTeleport", { enumerable: true, get: function () { return td_teleport_class_1.TdTeleport; } });

package/src/components/base/style/css.d.ts

@@ -1 +0,0 @@
-import '@type-dom/theme-chalk/base.css';

package/src/components/base/style/css.js

@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("@type-dom/theme-chalk/base.css");

package/src/components/base/style/index.d.ts

@@ -1 +0,0 @@
-import '../../../theme-chalk/base.scss';

package/src/components/base/style/index.js

@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("../../../theme-chalk/base.scss");

package/src/components/base/td-teleport/td-teleport.class.d.ts

@@ -1,7 +0,0 @@
-import { TypeFragment } from '@type-dom/framework';
-import { ITdTeleport, TeleportProps } from './td-teleport.interface';
-export declare class TdTeleport extends TypeFragment implements ITdTeleport {
-    className: 'TdTeleport';
-    constructor(params?: TeleportProps);
-    setup(): void;
-}

package/src/components/base/td-teleport/td-teleport.class.js

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdTeleport = void 0;
-const framework_1 = require("@type-dom/framework");
-class TdTeleport extends framework_1.TypeFragment {
-    constructor(params = {}) {
-        super();
-        this.className = 'TdTeleport';
-        this.props = this.useParams(params);
-    }
-    setup() {
-        var _a, _b;
-        const props = this.props;
-        if (props.disabled) {
-            this.slotChildren(this.props.slot || ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default));
-        }
-        else {
-            this.addChild(new framework_1.Teleport({
-                to: props.to,
-                slot: this.props.slot || ((_b = props.slots) === null || _b === void 0 ? void 0 : _b.default),
-            }));
-        }
-    }
-}
-exports.TdTeleport = TdTeleport;

package/src/components/base/td-teleport/td-teleport.interface.d.ts

@@ -1,9 +0,0 @@
-import { ITypeFragment, TypeFragmentProps } from '@type-dom/framework';
-import { MaybeRef } from '@type-dom/signals';
-export interface ITdTeleport extends ITypeFragment {
-    className: 'TdTeleport';
-}
-export interface TeleportProps extends TypeFragmentProps {
-    to?: MaybeRef<string | HTMLElement>;
-    disabled?: boolean;
-}

package/src/components/base/td-teleport/td-teleport.interface.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/src/components/basic/index.d.ts

@@ -1,28 +0,0 @@
-export { TdButton } from './td-button/td-button.class';
-export type * from './td-button/td-button.interface';
-export { TdButtonGroup } from './td-button-group/td-button-group.class';
-export type * from './td-button-group/td-button-group.interface';
-export { TdIcon } from './td-icon/td-icon.class';
-export type * from './td-icon/td-icon.interface';
-export { TdContainer } from './td-container/td-container.class';
-export type * from './td-container/td-container.interface';
-export { TdHeader } from './td-container/td-header/td-header.class';
-export type * from './td-container/td-header/td-header.interface';
-export { TdAside } from './td-container/td-aside/td-aside.class';
-export type * from './td-container/td-aside/td-aside.interface';
-export { TdMain } from './td-container/td-main/td-main.class';
-export type * from './td-container/td-main/td-main.interface';
-export { TdFooter } from './td-container/td-footer/td-footer.class';
-export type { ITdFooter } from './td-container/td-footer/td-footer.interface';
-export { TdScrollbar } from './td-scrollbar/td-scrollbar.class';
-export type * from './td-scrollbar/td-scrollbar.interface';
-export { TdRow } from './td-layout/td-row/td-row.class';
-export type * from './td-layout/td-row/td-row.interface';
-export { TdCol } from './td-layout/td-col/td-col.class';
-export type * from './td-layout/td-col/td-col.interface';
-export { TdLink } from './td-link/td-link.class';
-export type * from './td-link/td-link.interface';
-export { TdText } from './td-text/td-text.class';
-export type * from './td-text/td-text.interface';
-export { TdSpace } from './td-space/td-space.class';
-export type * from './td-space/td-space.interface';

package/src/components/basic/index.js

@@ -1,53 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdSpace = exports.TdText = exports.TdLink = exports.TdCol = exports.TdRow = exports.TdScrollbar = exports.TdFooter = exports.TdMain = exports.TdAside = exports.TdHeader = exports.TdContainer = exports.TdIcon = exports.TdButtonGroup = exports.TdButton = void 0;
-//  button
-var td_button_class_1 = require("./td-button/td-button.class");
-Object.defineProperty(exports, "TdButton", { enumerable: true, get: function () { return td_button_class_1.TdButton; } });
-var td_button_group_class_1 = require("./td-button-group/td-button-group.class");
-Object.defineProperty(exports, "TdButtonGroup", { enumerable: true, get: function () { return td_button_group_class_1.TdButtonGroup; } });
-// icon
-var td_icon_class_1 = require("./td-icon/td-icon.class");
-Object.defineProperty(exports, "TdIcon", { enumerable: true, get: function () { return td_icon_class_1.TdIcon; } });
-var td_container_class_1 = require("./td-container/td-container.class");
-Object.defineProperty(exports, "TdContainer", { enumerable: true, get: function () { return td_container_class_1.TdContainer; } });
-var td_header_class_1 = require("./td-container/td-header/td-header.class");
-Object.defineProperty(exports, "TdHeader", { enumerable: true, get: function () { return td_header_class_1.TdHeader; } });
-var td_aside_class_1 = require("./td-container/td-aside/td-aside.class");
-Object.defineProperty(exports, "TdAside", { enumerable: true, get: function () { return td_aside_class_1.TdAside; } });
-var td_main_class_1 = require("./td-container/td-main/td-main.class");
-Object.defineProperty(exports, "TdMain", { enumerable: true, get: function () { return td_main_class_1.TdMain; } });
-var td_footer_class_1 = require("./td-container/td-footer/td-footer.class");
-Object.defineProperty(exports, "TdFooter", { enumerable: true, get: function () { return td_footer_class_1.TdFooter; } });
-// scrollbar
-var td_scrollbar_class_1 = require("./td-scrollbar/td-scrollbar.class");
-Object.defineProperty(exports, "TdScrollbar", { enumerable: true, get: function () { return td_scrollbar_class_1.TdScrollbar; } });
-// layout
-var td_row_class_1 = require("./td-layout/td-row/td-row.class");
-Object.defineProperty(exports, "TdRow", { enumerable: true, get: function () { return td_row_class_1.TdRow; } });
-var td_col_class_1 = require("./td-layout/td-col/td-col.class");
-Object.defineProperty(exports, "TdCol", { enumerable: true, get: function () { return td_col_class_1.TdCol; } });
-// link
-var td_link_class_1 = require("./td-link/td-link.class");
-Object.defineProperty(exports, "TdLink", { enumerable: true, get: function () { return td_link_class_1.TdLink; } });
-// text
-var td_text_class_1 = require("./td-text/td-text.class");
-Object.defineProperty(exports, "TdText", { enumerable: true, get: function () { return td_text_class_1.TdText; } });
-// space
-var td_space_class_1 = require("./td-space/td-space.class");
-Object.defineProperty(exports, "TdSpace", { enumerable: true, get: function () { return td_space_class_1.TdSpace; } });
-// // list
-// export { TdList } from './td-list/td-list.class';
-// export type { ITdList, ITdListItem } from './td-list/td-list.interface';
-// // menu
-// export { TdMenu } from './td-menu/td-menu.class';
-// export type { ITdMenu, ITdMenuItem } from './td-menu/td-menu.interface';
-// // pagination
-// export { TdPagination } from './td-pagination/td-pagination.class';
-// export type { ITdPagination } from './td-pagination/td-pagination.interface';
-// // progress
-// export { TdProgress } from './td-progress/td-progress.class';
-// export type { ITdProgress } from './td-progress/td-progress.interface';
-// // radio
-// export { TdRadio } from './td-radio/td-radio.class';
-// export type { ITdRadio } from './td-radio/td-radio.interface';

package/src/components/basic/td-button/button-custom.d.ts

@@ -1,4 +0,0 @@
-import { TinyColor } from '@type-dom/color';
-import { TdButtonProps } from './td-button.interface';
-export declare function darken(color: TinyColor, amount?: number): string;
-export declare function useButtonCustomStyle(props: TdButtonProps): import("@type-dom/signals").Computed<Record<string, string>>;

package/src/components/basic/td-button/button-custom.js

@@ -1,97 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.darken = darken;
-exports.useButtonCustomStyle = useButtonCustomStyle;
-// import { computed } from 'vue'
-// import { TinyColor } from '@ctrl/tinycolor'
-// import { useNamespace } from '@element-plus/hooks'
-// import { useFormDisabled } from '@element-plus/components/form'
-const color_1 = require("@type-dom/color");
-const signals_1 = require("@type-dom/signals");
-const use_namespace_1 = require("../../../hooks/use-namespace");
-const use_form_common_props_1 = require("../../form/td-form/hooks/use-form-common-props");
-function darken(color, amount = 20) {
-    return color.mix('#141414', amount).toString();
-}
-function useButtonCustomStyle(props) {
-    // console.log('useButtonCustomStyle . props is ', props);
-    const _disabled = (0, use_form_common_props_1.useFormDisabled)();
-    const ns = (0, use_namespace_1.useNamespace)('button');
-    // calculate hover & active color by custom color
-    // only work when custom color
-    return (0, signals_1.computed)(() => {
-        let styles = {};
-        let buttonColor = props.color;
-        if (buttonColor) {
-            const match = buttonColor === null || buttonColor === void 0 ? void 0 : buttonColor.match(/var\((.*?)\)/);
-            if (match) {
-                buttonColor = window
-                    .getComputedStyle(window.document.documentElement)
-                    .getPropertyValue(match[1]);
-            }
-            // console.log('buttonColor is ', buttonColor);
-            const color = new color_1.TinyColor(buttonColor);
-            const activeBgColor = props.dark
-                ? color.tint(20).toString()
-                : darken(color, 20);
-            if (props.plain) {
-                styles = ns.cssVarBlock({
-                    'bg-color': props.dark
-                        ? darken(color, 90)
-                        : color.tint(90).toString(),
-                    'text-color': buttonColor,
-                    'border-color': props.dark
-                        ? darken(color, 50)
-                        : color.tint(50).toString(),
-                    'hover-text-color': `var(${ns.cssVarName('color-white')})`,
-                    'hover-bg-color': buttonColor,
-                    'hover-border-color': buttonColor,
-                    'active-bg-color': activeBgColor,
-                    'active-text-color': `var(${ns.cssVarName('color-white')})`,
-                    'active-border-color': activeBgColor,
-                });
-                if (_disabled.get()) {
-                    styles[ns.cssVarBlockName('disabled-bg-color')] = props.dark
-                        ? darken(color, 90)
-                        : color.tint(90).toString();
-                    styles[ns.cssVarBlockName('disabled-text-color')] = props.dark
-                        ? darken(color, 50)
-                        : color.tint(50).toString();
-                    styles[ns.cssVarBlockName('disabled-border-color')] = props.dark
-                        ? darken(color, 80)
-                        : color.tint(80).toString();
-                }
-            }
-            else {
-                const hoverBgColor = props.dark
-                    ? darken(color, 30)
-                    : color.tint(30).toString();
-                const textColor = color.isDark()
-                    ? `var(${ns.cssVarName('color-white')})`
-                    : `var(${ns.cssVarName('color-black')})`;
-                styles = ns.cssVarBlock({
-                    'bg-color': buttonColor,
-                    'text-color': textColor,
-                    'border-color': buttonColor,
-                    'hover-bg-color': hoverBgColor,
-                    'hover-text-color': textColor,
-                    'hover-border-color': hoverBgColor,
-                    'active-bg-color': activeBgColor,
-                    'active-border-color': activeBgColor,
-                });
-                if (_disabled.get()) {
-                    const disabledButtonColor = props.dark
-                        ? darken(color, 50)
-                        : color.tint(50).toString();
-                    styles[ns.cssVarBlockName('disabled-bg-color')] = disabledButtonColor;
-                    styles[ns.cssVarBlockName('disabled-text-color')] = props.dark
-                        ? 'rgba(255, 255, 255, 0.5)'
-                        : `var(${ns.cssVarName('color-white')})`;
-                    styles[ns.cssVarBlockName('disabled-border-color')] =
-                        disabledButtonColor;
-                }
-            }
-        }
-        return styles;
-    });
-}

package/src/components/basic/td-button/constants.d.ts

@@ -1,8 +0,0 @@
-import { InjectionKey } from '@type-dom/framework';
-import { MaybeRef } from '@type-dom/signals';
-import { TdButtonProps } from './td-button.interface';
-export interface ButtonGroupContext {
-    size?: MaybeRef<TdButtonProps['size']>;
-    type?: MaybeRef<TdButtonProps['type']>;
-}
-export declare const buttonGroupContextKey: InjectionKey<ButtonGroupContext>;

package/src/components/basic/td-button/constants.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buttonGroupContextKey = void 0;
-exports.buttonGroupContextKey = Symbol('buttonGroupContextKey');

package/src/components/basic/td-button/style/css.d.ts

@@ -1,2 +0,0 @@
-import '../../../base/style/css';
-import '../../../../theme-chalk/el-button.css';

package/src/components/basic/td-button/style/css.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("../../../base/style/css");
-require("../../../../theme-chalk/el-button.css");

package/src/components/basic/td-button/style/index.d.ts

@@ -1,2 +0,0 @@
-import '../../../base/style/index';
-import '../../../../theme-chalk/button.scss';

package/src/components/basic/td-button/style/index.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("../../../base/style/index");
-require("../../../../theme-chalk/button.scss");

package/src/components/basic/td-button/td-button.abstract.d.ts

@@ -1,10 +0,0 @@
-import { TypeHtml } from '@type-dom/framework';
-import { ITdButtonAbstract, TdButtonProps } from './td-button.interface';
-import './style/index';
-export declare abstract class TdButtonAbstract extends TypeHtml implements ITdButtonAbstract {
-    abstract className: 'TdButton' | string;
-    props: TdButtonProps;
-    dom?: HTMLElement;
-    protected constructor(params?: TdButtonProps);
-    setup(): void;
-}