@type-dom/ui 0.1.2 → 0.1.3

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,7 +1,9 @@
 {
   "name": "@type-dom/ui",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "dependencies": {
+    "lodash": "^4.17.21",
+    "sass-embedded": "^1.86.3",
     "@type-dom/async-validator": "*",
     "@type-dom/color": "*",
     "@type-dom/css-type": "*",

package/src/components/data/td-progress/td-progress.class.js

@@ -51,11 +51,11 @@ class TdProgress extends framework_1.TypeDiv {
         const trackPath = (0, signals_1.computed)(() => {
             const r = radius.get();
             const isDashboard = props.type === 'dashboard';
-            return `
-          M 50 50
-          m 0 ${isDashboard ? '' : '-'}${r}
-          a ${r} ${r} 0 1 1 0 ${isDashboard ? '-' : ''}${r * 2}
-          a ${r} ${r} 0 1 1 0 ${isDashboard ? '' : '-'}${r * 2}
+            return `
+          M 50 50
+          m 0 ${isDashboard ? '' : '-'}${r}
+          a ${r} ${r} 0 1 1 0 ${isDashboard ? '-' : ''}${r * 2}
+          a ${r} ${r} 0 1 1 0 ${isDashboard ? '' : '-'}${r * 2}
           `;
         });
         const perimeter = (0, signals_1.computed)(() => 2 * Math.PI * radius.get());

package/src/hooks/use-deprecated/index.js

@@ -6,8 +6,8 @@ const utils_1 = require("@type-dom/utils");
 const useDeprecated = ({ from, replacement, scope, version, ref, type = 'API' }, condition) => {
     (0, signals_1.watch)(() => (0, signals_1.unref)(condition), (val) => {
         if (val) {
-            (0, utils_1.debugWarn)(scope, `[${type}] ${from} is about to be deprecated in version ${version}, please use ${replacement} instead.
-For more detail, please visit: ${ref}
+            (0, utils_1.debugWarn)(scope, `[${type}] ${from} is about to be deprecated in version ${version}, please use ${replacement} instead.
+For more detail, please visit: ${ref}
 `);
         }
     }, {

package/src/hooks/use-id/index.js

@@ -19,10 +19,10 @@ const useId = (deterministicId) => {
     // const idInjection = defaultIdInjection;
     const idInjection = (0, exports.useIdInjection)();
     if (!utils_1.isClient && idInjection === defaultIdInjection) {
-        console.warn('IdInjection', `Looks like you are using server rendering, you must provide a id provider to ensure the hydration process to be succeed
-usage: app.provide(ID_INJECTION_KEY, {
-  prefix: number,
-  current: number,
+        console.warn('IdInjection', `Looks like you are using server rendering, you must provide a id provider to ensure the hydration process to be succeed
+usage: app.provide(ID_INJECTION_KEY, {
+  prefix: number,
+  current: number,
 })`);
     }
     // NOTE: Here we use `computedEager` to calculate the id value immediately, avoiding inconsistent id generation due to the lazy feature of `computed` when server rendering.

package/src/hooks/use-z-index/index.js

@@ -35,7 +35,7 @@ const useZIndex = (zIndexOverrides) => {
         return currentZIndex.get();
     };
     if (!utils_1.isClient && !(0, framework_1.inject)(exports.ZINDEX_INJECTION_KEY)) {
-        (0, utils_1.debugWarn)('ZIndexInjection', `Looks like you are using server rendering, you must provide a z-index provider to ensure the hydration process to be succeed
+        (0, utils_1.debugWarn)('ZIndexInjection', `Looks like you are using server rendering, you must provide a z-index provider to ensure the hydration process to be succeed
 usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
     }
     return {

package/src/theme-chalk/affix.scss

@@ -1,7 +1,7 @@
-@use 'mixins/mixins' as *;
-
-@include b(affix) {
-  @include m(fixed) {
-    position: fixed;
-  }
-}
+@use 'mixins/mixins' as *;
+
+@include b(affix) {
+  @include m(fixed) {
+    position: fixed;
+  }
+}

package/src/theme-chalk/alert.scss

@@ -1,115 +1,115 @@
-@use 'mixins/mixins' as *;
-@use 'mixins/var' as *;
-@use 'common/var' as *;
-
-@include b(alert) {
-  @include set-component-css-var('alert', $alert);
-
-  width: 100%;
-  padding: getCssVar('alert', 'padding');
-  margin: 0;
-  box-sizing: border-box;
-  border-radius: getCssVar('alert', 'border-radius-base');
-  position: relative;
-  background-color: getCssVar('color', 'white');
-  overflow: hidden;
-  opacity: 1;
-  display: flex;
-  align-items: center;
-  transition: opacity getCssVar('transition-duration', 'fast');
-
-  @include when(light) {
-    .#{$namespace}-alert__close-btn {
-      color: getCssVar('text-color', 'placeholder');
-    }
-  }
-
-  @include when(dark) {
-    .#{$namespace}-alert__close-btn {
-      color: getCssVar('color', 'white');
-    }
-    .#{$namespace}-alert__description {
-      color: getCssVar('color', 'white');
-    }
-  }
-
-  @include when(center) {
-    justify-content: center;
-  }
-
-  @each $type in (success, info, warning, error) {
-    @include m($type) {
-      @include css-var-from-global(
-        ('alert', 'bg-color'),
-        ('color', $type, 'light-9')
-      );
-
-      &.is-light {
-        background-color: getCssVar('alert', 'bg-color');
-        color: getCssVar('color', $type);
-
-        .#{$namespace}-alert__description {
-          color: getCssVar('color', $type);
-        }
-      }
-
-      &.is-dark {
-        background-color: getCssVar('color', $type);
-        color: getCssVar('color', 'white');
-      }
-    }
-  }
-
-  @include e(content) {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  & .#{$namespace}-alert__icon {
-    font-size: getCssVar('alert', 'icon-size');
-    width: getCssVar('alert', 'icon-size');
-    margin-right: 8px;
-
-    @include when(big) {
-      font-size: getCssVar('alert', 'icon-large-size');
-      width: getCssVar('alert', 'icon-large-size');
-      margin-right: 12px;
-    }
-  }
-
-  @include e(title) {
-    font-size: getCssVar('alert', 'title-font-size');
-    line-height: 24px;
-
-    &.with-description {
-      font-size: getCssVar('alert', 'title-with-description-font-size');
-    }
-  }
-
-  & .#{$namespace}-alert__description {
-    font-size: getCssVar('alert', 'description-font-size');
-    margin: 0;
-  }
-
-  & .#{$namespace}-alert__close-btn {
-    font-size: getCssVar('alert', 'close-font-size');
-    opacity: 1;
-    position: absolute;
-    top: 12px;
-    right: 16px;
-    cursor: pointer;
-
-    @include when(customed) {
-      font-style: normal;
-      font-size: getCssVar('alert', 'close-customed-font-size');
-      line-height: 24px;
-      top: 8px;
-    }
-  }
-}
-
-.#{$namespace}-alert-fade-enter-from,
-.#{$namespace}-alert-fade-leave-active {
-  opacity: 0;
-}
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(alert) {
+  @include set-component-css-var('alert', $alert);
+
+  width: 100%;
+  padding: getCssVar('alert', 'padding');
+  margin: 0;
+  box-sizing: border-box;
+  border-radius: getCssVar('alert', 'border-radius-base');
+  position: relative;
+  background-color: getCssVar('color', 'white');
+  overflow: hidden;
+  opacity: 1;
+  display: flex;
+  align-items: center;
+  transition: opacity getCssVar('transition-duration', 'fast');
+
+  @include when(light) {
+    .#{$namespace}-alert__close-btn {
+      color: getCssVar('text-color', 'placeholder');
+    }
+  }
+
+  @include when(dark) {
+    .#{$namespace}-alert__close-btn {
+      color: getCssVar('color', 'white');
+    }
+    .#{$namespace}-alert__description {
+      color: getCssVar('color', 'white');
+    }
+  }
+
+  @include when(center) {
+    justify-content: center;
+  }
+
+  @each $type in (success, info, warning, error) {
+    @include m($type) {
+      @include css-var-from-global(
+        ('alert', 'bg-color'),
+        ('color', $type, 'light-9')
+      );
+
+      &.is-light {
+        background-color: getCssVar('alert', 'bg-color');
+        color: getCssVar('color', $type);
+
+        .#{$namespace}-alert__description {
+          color: getCssVar('color', $type);
+        }
+      }
+
+      &.is-dark {
+        background-color: getCssVar('color', $type);
+        color: getCssVar('color', 'white');
+      }
+    }
+  }
+
+  @include e(content) {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  & .#{$namespace}-alert__icon {
+    font-size: getCssVar('alert', 'icon-size');
+    width: getCssVar('alert', 'icon-size');
+    margin-right: 8px;
+
+    @include when(big) {
+      font-size: getCssVar('alert', 'icon-large-size');
+      width: getCssVar('alert', 'icon-large-size');
+      margin-right: 12px;
+    }
+  }
+
+  @include e(title) {
+    font-size: getCssVar('alert', 'title-font-size');
+    line-height: 24px;
+
+    &.with-description {
+      font-size: getCssVar('alert', 'title-with-description-font-size');
+    }
+  }
+
+  & .#{$namespace}-alert__description {
+    font-size: getCssVar('alert', 'description-font-size');
+    margin: 0;
+  }
+
+  & .#{$namespace}-alert__close-btn {
+    font-size: getCssVar('alert', 'close-font-size');
+    opacity: 1;
+    position: absolute;
+    top: 12px;
+    right: 16px;
+    cursor: pointer;
+
+    @include when(customed) {
+      font-style: normal;
+      font-size: getCssVar('alert', 'close-customed-font-size');
+      line-height: 24px;
+      top: 8px;
+    }
+  }
+}
+
+.#{$namespace}-alert-fade-enter-from,
+.#{$namespace}-alert-fade-leave-active {
+  opacity: 0;
+}

package/src/theme-chalk/anchor-link.scss

@@ -1,41 +1,41 @@
-@use 'sass:map';
-
-@use 'mixins/mixins' as *;
-@use 'mixins/var' as *;
-@use 'common/var' as *;
-
-@include b(anchor) {
-  @include e(item) {
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-  }
-
-  @include e(link) {
-    font-size: getCssVar('anchor-font-size');
-    line-height: getCssVar('anchor-line-height');
-    padding: 4px 0;
-    color: getCssVar('anchor-color');
-    transition: color getCssVar('transition-duration');
-    white-space: nowrap;
-    text-decoration: none;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    max-width: 100%;
-    outline: none;
-    cursor: pointer;
-
-    &:hover,
-    &:focus {
-      color: getCssVar('anchor-color');
-    }
-
-    @include when(active) {
-      color: getCssVar('anchor-active-color');
-    }
-  }
-
-  & .#{$namespace}-anchor__list .#{$namespace}-anchor__item a {
-    display: inline-block;
-  }
-}
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(anchor) {
+  @include e(item) {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  @include e(link) {
+    font-size: getCssVar('anchor-font-size');
+    line-height: getCssVar('anchor-line-height');
+    padding: 4px 0;
+    color: getCssVar('anchor-color');
+    transition: color getCssVar('transition-duration');
+    white-space: nowrap;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 100%;
+    outline: none;
+    cursor: pointer;
+
+    &:hover,
+    &:focus {
+      color: getCssVar('anchor-color');
+    }
+
+    @include when(active) {
+      color: getCssVar('anchor-active-color');
+    }
+  }
+
+  & .#{$namespace}-anchor__list .#{$namespace}-anchor__item a {
+    display: inline-block;
+  }
+}