@type-dom/ui 0.0.9 → 0.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +44 -44
  2. package/package.json +2 -7
  3. package/src/components/basic/td-icon/td-icon.class.js +11 -11
  4. package/src/components/data/td-collapse-item/td-collapse-item.class.js +8 -9
  5. package/src/components/feedback/index.d.ts +2 -0
  6. package/src/components/feedback/index.js +3 -2
  7. package/src/components/feedback/td-loading/td-loading.class.d.ts +2 -0
  8. package/src/components/feedback/td-loading/td-loading.class.js +6 -0
  9. package/src/components/feedback/td-message-box/td-message-box.class.d.ts +4 -4
  10. package/src/components/feedback/td-notification/td-notification.style.js +6 -6
  11. package/src/components/form/td-checkbox/td-checkbox.style.js +2 -2
  12. package/src/components/form/td-input/widget/utils.js +8 -8
  13. package/src/components/form/td-switch/widget/td-switch-core.js +4 -4
  14. package/src/styles/var.d.ts +1 -1
  15. package/src/styles/var.js +2 -2
package/README.md CHANGED
@@ -1,44 +1,44 @@
1
- ## 项目说明
2
-
3
- > 这是一个基于自建前端框架TypeDom创建的ui组件库。
4
-
5
- ## 安装
6
-
7
- > npm install @type-dom/ui
8
-
9
- ## 框架介绍
10
-
11
- 1、技术栈
12
- – type-dom框架
13
- – webpack
14
- – typescript
15
- – 抽象类
16
- – 实体类
17
- 2、项目结构
18
- – src
19
- – lib
20
- - basic
21
- - data
22
- - feedback
23
- - form
24
- - navigation
25
- - other
26
- - styles
27
- –
28
- - test
29
-
30
- # type-dom 自定义组件
31
-
32
- ## basic 基础组件
33
-
34
- ### button 按钮组件
35
-
36
- ## data 数据组件
37
-
38
- ## form 表单组件
39
-
40
- ## feedback 反馈组件
41
-
42
- ## navigation 导航组件
43
-
44
- ## other 其它组件
1
+ ## 项目说明
2
+
3
+ > 这是一个基于自建前端框架TypeDom创建的ui组件库。
4
+
5
+ ## 安装
6
+
7
+ > npm install @type-dom/ui
8
+
9
+ ## 框架介绍
10
+
11
+ 1、技术栈
12
+ – type-dom框架
13
+ – webpack
14
+ – typescript
15
+ – 抽象类
16
+ – 实体类
17
+ 2、项目结构
18
+ – src
19
+ – lib
20
+ - basic
21
+ - data
22
+ - feedback
23
+ - form
24
+ - navigation
25
+ - other
26
+ - styles
27
+ –
28
+ - test
29
+
30
+ # type-dom 自定义组件
31
+
32
+ ## basic 基础组件
33
+
34
+ ### button 按钮组件
35
+
36
+ ## data 数据组件
37
+
38
+ ## form 表单组件
39
+
40
+ ## feedback 反馈组件
41
+
42
+ ## navigation 导航组件
43
+
44
+ ## other 其它组件
package/package.json CHANGED
@@ -1,9 +1,8 @@
1
1
  {
2
2
  "name": "@type-dom/ui",
3
- "version": "0.0.9",
3
+ "version": "0.0.10",
4
4
  "dependencies": {
5
- "@type-dom/svgs": "*",
6
- "tslib": "^2.3.0"
5
+ "@type-dom/svgs": "*"
7
6
  },
8
7
  "type": "commonjs",
9
8
  "main": "./src/index.js",
@@ -12,9 +11,5 @@
12
11
  "type": "git",
13
12
  "url": "git+https://github.com/type-dom/ui.git"
14
13
  },
15
- "publishConfig": {
16
- "access": "public",
17
- "registry": "https://registry.npmjs.org/"
18
- },
19
14
  "types": "./src/index.d.ts"
20
15
  }
package/src/components/basic/td-icon/td-icon.class.js CHANGED
@@ -24,17 +24,17 @@ class TdIcon extends ui_abstract_1.UI {
24
24
  // 首次创建时，添加style标签；避免重复创建
25
25
  if (!TdIcon.initCalled) {
26
26
  TdIcon.initCalled = true;
27
- const cssText = `
28
- /* 选择所有带有 data-v-366071 属性的元素 */
29
- /* 在这里添加您的样式规则 */
30
- @keyframes rotating-${framework_1.vHash} {
31
- 0% {
32
- transform: rotateZ(0deg);
33
- }
34
- 100% {
35
- transform: rotateZ(360deg);
36
- }
37
- }
27
+ const cssText = `
28
+ /* 选择所有带有 data-v-366071 属性的元素 */
29
+ /* 在这里添加您的样式规则 */
30
+ @keyframes rotating-${framework_1.vHash} {
31
+ 0% {
32
+ transform: rotateZ(0deg);
33
+ }
34
+ 100% {
35
+ transform: rotateZ(360deg);
36
+ }
37
+ }
38
38
  `;
39
39
  (0, framework_1.createStyle)(cssText);
40
40
  // createClass('td-icon', $tdIcon);
package/src/components/data/td-collapse-item/td-collapse-item.class.js CHANGED
@@ -43,7 +43,7 @@ class TdCollapseItem extends ui_abstract_1.UI {
43
43
  fontSize: td_collapse_style_1.$collapse.headerFontSize,
44
44
  fontWeight: 500,
45
45
  // transition: border-bottom-color getCssVar('transition-duration'),
46
- transition: 'border-bottom-color ' + var_1.$transitionDuration,
46
+ transition: 'border-bottom-color ' + var_1.$transitionDurationDefault,
47
47
  outline: 'none'
48
48
  },
49
49
  events: {
@@ -54,8 +54,7 @@ class TdCollapseItem extends ui_abstract_1.UI {
54
54
  // keydown.space.enter.stop.prevent: () => {
55
55
  // },
56
56
  keydown: (event) => {
57
- if (event.key === 'Enter' ||
58
- event.key === ' ') {
57
+ if ((event === null || event === void 0 ? void 0 : event.key) === 'Enter' || (event === null || event === void 0 ? void 0 : event.key) === ' ') {
59
58
  event === null || event === void 0 ? void 0 : event.preventDefault();
60
59
  event === null || event === void 0 ? void 0 : event.stopPropagation();
61
60
  this.handleEnterClick();
@@ -81,7 +80,7 @@ class TdCollapseItem extends ui_abstract_1.UI {
81
80
  styleObj: {
82
81
  margin: '0 8px 0 auto',
83
82
  // transition: transform getCssVar('transition-duration'),
84
- transition: 'transform ' + var_1.$transitionDuration,
83
+ transition: 'transform ' + var_1.$transitionDurationDefault,
85
84
  fontWeight: 300
86
85
  }
87
86
  });
@@ -122,7 +121,7 @@ class TdCollapseItem extends ui_abstract_1.UI {
122
121
  this.wrapper.addChild(this.content);
123
122
  this.transition = new td_collapse_transition_class_1.TdCollapseTransition({
124
123
  parent: this,
125
- childNodes: [this.wrapper]
124
+ slot: this.wrapper
126
125
  });
127
126
  this.addChild(this.transition);
128
127
  this.props = this.useParams(params);
@@ -168,7 +167,7 @@ class TdCollapseItem extends ui_abstract_1.UI {
168
167
  // });
169
168
  this.transition.showSlot(false);
170
169
  this.headerBtn.style.setObj({
171
- transition: 'transform ' + var_1.$transitionDuration
170
+ transition: 'transform ' + var_1.$transitionDurationDefault,
172
171
  });
173
172
  this.arrowIcon.style.setObj({
174
173
  transform: 'rotate(0deg)'
@@ -195,11 +194,11 @@ class TdCollapseItem extends ui_abstract_1.UI {
195
194
  }
196
195
  handleFocus() {
197
196
  setTimeout(() => {
198
- if (!this.isClick) {
199
- this.focusing = true;
197
+ if (this.isClick) {
198
+ this.isClick = false;
200
199
  }
201
200
  else {
202
- this.isClick = false;
201
+ this.focusing = true;
203
202
  }
204
203
  }, 50);
205
204
  }
package/src/components/feedback/index.d.ts CHANGED
@@ -9,3 +9,5 @@ export { TdMessageBox } from './td-message-box/td-message-box.class';
9
9
  export type * from './td-message-box/td-message-box.interface';
10
10
  export { TdNotification } from './td-notification/td-notification.class';
11
11
  export type * from './td-notification/td-notification.interface';
12
+ export { TdLoading } from './td-loading/td-loading.class';
13
+ export type * from './td-loading/td-loading.interface';
package/src/components/feedback/index.js CHANGED
@@ -2,7 +2,7 @@
2
2
  // export { Dialog } from './dialog/dialog.class';
3
3
  // export { MessageBox } from './message-box/message-box';
4
4
  Object.defineProperty(exports, "__esModule", { value: true });
5
- exports.TdNotification = exports.TdMessageBox = exports.TdMessage = exports.TdDialog = exports.TdAlert = void 0;
5
+ exports.TdLoading = exports.TdNotification = exports.TdMessageBox = exports.TdMessage = exports.TdDialog = exports.TdAlert = void 0;
6
6
  const tslib_1 = require("tslib");
7
7
  var td_alert_class_1 = require("./td-alert/td-alert.class");
8
8
  Object.defineProperty(exports, "TdAlert", { enumerable: true, get: function () { return td_alert_class_1.TdAlert; } });
@@ -16,4 +16,5 @@ Object.defineProperty(exports, "TdMessageBox", { enumerable: true, get: function
16
16
  // export * from './td-message/td-message.style';
17
17
  var td_notification_class_1 = require("./td-notification/td-notification.class");
18
18
  Object.defineProperty(exports, "TdNotification", { enumerable: true, get: function () { return td_notification_class_1.TdNotification; } });
19
- // export { TdMessageBox } from './td-message-box/td-message-box';
19
+ var td_loading_class_1 = require("./td-loading/td-loading.class");
20
+ Object.defineProperty(exports, "TdLoading", { enumerable: true, get: function () { return td_loading_class_1.TdLoading; } });
package/src/components/feedback/td-loading/td-loading.class.d.ts CHANGED
@@ -9,4 +9,6 @@ export declare class TdLoading extends UI<undefined> implements ITdLoading {
9
9
  private spinner;
10
10
  private spinnerText?;
11
11
  constructor(params?: ITdLoadingConfig);
12
+ static service(params: ITdLoadingConfig): TdLoading;
13
+ close(): void;
12
14
  }
package/src/components/feedback/td-loading/td-loading.class.js CHANGED
@@ -61,5 +61,11 @@ class TdLoading extends ui_abstract_1.UI {
61
61
  this.addChild(this.transition);
62
62
  this.props = this.useParams(params);
63
63
  }
64
+ static service(params) {
65
+ return new TdLoading(params);
66
+ }
67
+ close() {
68
+ // todo close
69
+ }
64
70
  }
65
71
  exports.TdLoading = TdLoading;
package/src/components/feedback/td-message-box/td-message-box.class.d.ts CHANGED
@@ -27,11 +27,11 @@ export declare class TdMessageBox extends UI<undefined> implements ITdMessageBox
27
27
  constructor(params?: ITdMessageBoxConfig);
28
28
  mounted(): void;
29
29
  beforeDestroy(): void;
30
- static show(params?: ITdMessageBoxConfig): Promise<IMessageBoxInputData | undefined>;
30
+ static show(params?: ITdMessageBoxConfig): Promise<IMessageBoxInputData>;
31
31
  static alert(message: string, title?: string, params?: ITdMessageBoxConfig): void;
32
- static confirm(message: string, title?: string, params?: ITdMessageBoxConfig): Promise<IMessageBoxInputData | undefined>;
33
- static prompt(message: string, title?: string, params?: ITdMessageBoxConfig): Promise<IMessageBoxInputData | undefined>;
34
- promise(input?: TdInput): Promise<IMessageBoxInputData | undefined>;
32
+ static confirm(message: string, title?: string, params?: ITdMessageBoxConfig): Promise<IMessageBoxInputData>;
33
+ static prompt(message: string, title?: string, params?: ITdMessageBoxConfig): Promise<IMessageBoxInputData>;
34
+ promise(input?: TdInput): Promise<IMessageBoxInputData>;
35
35
  doClose(): void;
36
36
  handleWrapperClick(): void;
37
37
  handleInputEnter: (e: KeyboardEvent) => void;
package/src/components/feedback/td-notification/td-notification.style.js CHANGED
@@ -52,27 +52,27 @@ exports.$notificationStyle = {
52
52
  boxShadow: exports.$notification.shadow,
53
53
  // transition: opacity getCssVar('transition-duration'),
54
54
  transition: 'opacity ' +
55
- var_1.$transitionDuration +
55
+ var_1.$transitionDurationDefault +
56
56
  ', ' +
57
57
  // transform getCssVar('transition-duration'),
58
58
  'transform ' +
59
- var_1.$transitionDuration +
59
+ var_1.$transitionDurationDefault +
60
60
  ', ' +
61
61
  // top getCssVar('transition-duration'),
62
62
  'top ' +
63
- var_1.$transitionDuration +
63
+ var_1.$transitionDurationDefault +
64
64
  ', ' +
65
65
  // left getCssVar('transition-duration'),
66
66
  'left ' +
67
- var_1.$transitionDuration +
67
+ var_1.$transitionDurationDefault +
68
68
  ', ' +
69
69
  // right getCssVar('transition-duration'), top 0.4s,
70
70
  'right ' +
71
- var_1.$transitionDuration +
71
+ var_1.$transitionDurationDefault +
72
72
  ', ' +
73
73
  // bottom getCssVar('transition-duration'),
74
74
  'bottom ' +
75
- var_1.$transitionDuration +
75
+ var_1.$transitionDurationDefault +
76
76
  ', ',
77
77
  overflowWrap: 'break-word',
78
78
  overflow: 'hidden',
package/src/components/form/td-checkbox/td-checkbox.style.js CHANGED
@@ -106,8 +106,8 @@ exports.$checkboxInnerStyle = {
106
106
  backgroundColor: var_1.$bgColor.default,
107
107
  // z-index: getCssVar('index-normal'),
108
108
  zIndex: var_1.$zIndex.normal,
109
- transition: `border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
110
- background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
109
+ transition: `border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
110
+ background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
111
111
  outline 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46)`
112
112
  };
113
113
  exports.$checkboxInnerAfterStyle = {
package/src/components/form/td-input/widget/utils.js CHANGED
@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.calcTextareaHeight = calcTextareaHeight;
4
4
  const utils_1 = require("@type-dom/utils");
5
5
  let hiddenTextarea = undefined;
6
- const HIDDEN_STYLE = `
7
- height:0 !important;
8
- visibility:hidden !important;
9
- ${utils_1.isFireFox ? '' : 'overflow:hidden !important;'}
10
- position:absolute !important;
11
- z-index:-1000 !important;
12
- top:0 !important;
13
- right:0 !important;
6
+ const HIDDEN_STYLE = `
7
+ height:0 !important;
8
+ visibility:hidden !important;
9
+ ${utils_1.isFireFox ? '' : 'overflow:hidden !important;'}
10
+ position:absolute !important;
11
+ z-index:-1000 !important;
12
+ top:0 !important;
13
+ right:0 !important;
14
14
  `;
15
15
  const CONTEXT_STYLE = [
16
16
  'letter-spacing',
package/src/components/form/td-switch/widget/td-switch-core.js CHANGED
@@ -28,9 +28,9 @@ class TdSwitchCore extends framework_1.TypeSpan {
28
28
  // transition: border-color var(--el-transition-duration), background-color var(--el-transition-duration);
29
29
  transition: var_1.$borderColor.base +
30
30
  ' ' +
31
- var_1.$transitionDuration +
31
+ var_1.$transitionDurationDefault +
32
32
  ', background-color ' +
33
- var_1.$transitionDuration,
33
+ var_1.$transitionDurationDefault,
34
34
  // minWidth: map.get($switch-core-width, 'default');
35
35
  minWidth: td_switch_style_1.$switchCoreWidth[(params === null || params === void 0 ? void 0 : params.size) || 'default'],
36
36
  // height: map.get($switch-core-height, 'default');
@@ -42,7 +42,7 @@ class TdSwitchCore extends framework_1.TypeSpan {
42
42
  styleObj: {
43
43
  width: '100%',
44
44
  // transition: all getCssVar('transition-duration'),
45
- transition: 'all ' + var_1.$transitionDuration,
45
+ transition: 'all ' + var_1.$transitionDurationDefault,
46
46
  // height: map.get($switch-button-size, 'default'),
47
47
  height: td_switch_style_1.$switchButtonSize[(params === null || params === void 0 ? void 0 : params.size) || 'default'],
48
48
  display: 'flex',
@@ -108,7 +108,7 @@ class TdSwitchCore extends framework_1.TypeSpan {
108
108
  // borderRadius: var(--el-border-radius-circle),
109
109
  borderRadius: var_1.$borderRadius.circle,
110
110
  // transition: all var(--el-transition-duration),
111
- transition: 'all ' + var_1.$transitionDuration,
111
+ transition: 'all ' + var_1.$transitionDurationDefault,
112
112
  width: td_switch_style_1.$switchButtonSize[(params === null || params === void 0 ? void 0 : params.size) || 'default'],
113
113
  // width: map.get($switch-button-size, 'default');
114
114
  height: td_switch_style_1.$switchButtonSize[(params === null || params === void 0 ? void 0 : params.size) || 'default'],
package/src/styles/var.d.ts CHANGED
@@ -196,7 +196,7 @@ export declare const $paddingHorizontalMap: {
196
196
  default: string;
197
197
  small: string;
198
198
  };
199
- export declare const $transitionDuration = "0.3s";
199
+ export declare const $transitionDurationDefault = "0.3s";
200
200
  export declare const $transitionDurationFast = "0.2s";
201
201
  export declare const $colorPrimaryRgb = "64, 158, 255";
202
202
  export declare const $colorDangerRgb = "245, 108, 108";
package/src/styles/var.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- 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;
3
+ exports.$svgMonochromeGrey = exports.$border = exports.$ellipsisStyle = exports.$scrollbar = exports.$colorDangerRgb = exports.$colorPrimaryRgb = exports.$transitionDurationFast = exports.$transitionDurationDefault = 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;
4
4
  exports.setColorMixLevel = setColorMixLevel;
5
5
  /**
6
6
  * scss/var
@@ -271,7 +271,7 @@ exports.$paddingHorizontalMap = {
271
271
  default: '16px',
272
272
  small: '12px',
273
273
  };
274
- exports.$transitionDuration = '0.3s';
274
+ exports.$transitionDurationDefault = '0.3s';
275
275
  exports.$transitionDurationFast = '0.2s';
276
276
  exports.$colorPrimaryRgb = '64, 158, 255';
277
277
  exports.$colorDangerRgb = '245, 108, 108';