@bifrostui/react 2.0.0-alpha.20 → 2.0.0-alpha.22

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 (14) hide show
  1. package/dist/Dialog/Dialog.js +19 -12
  2. package/dist/Dialog/Dialog.types.d.ts +9 -0
  3. package/dist/Dialog/index.css +19 -45
  4. package/dist/Tabs/Tabs.css +0 -1
  5. package/dist/Tabs/index.css +0 -1
  6. package/dist/Toast/Toast.types.d.ts +1 -1
  7. package/es/Dialog/Dialog.js +19 -12
  8. package/es/Dialog/Dialog.types.d.ts +9 -0
  9. package/es/Dialog/index.css +19 -45
  10. package/es/Modal/Modal.miniapp.d.ts +1 -1
  11. package/es/Tabs/Tabs.css +0 -1
  12. package/es/Tabs/index.css +0 -1
  13. package/es/Toast/Toast.types.d.ts +1 -1
  14. package/package.json +5 -5
package/dist/Dialog/Dialog.js CHANGED
@@ -82,7 +82,9 @@ const Dialog = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
82
82
  placeholder,
83
83
  InputProps,
84
84
  className,
85
- theme
85
+ theme,
86
+ okButtonProps,
87
+ cancelButtonProps
86
88
  } = _a, others = __objRest(_a, [
87
89
  "open",
88
90
  "onOk",
@@ -95,7 +97,9 @@ const Dialog = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
95
97
  "placeholder",
96
98
  "InputProps",
97
99
  "className",
98
- "theme"
100
+ "theme",
101
+ "okButtonProps",
102
+ "cancelButtonProps"
99
103
  ]);
100
104
  const inputRef = (0, import_react.useRef)(null);
101
105
  const titleId = (0, import_utils.useUniqueId)();
@@ -118,20 +122,23 @@ const Dialog = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
118
122
  };
119
123
  const actionsNode = /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-actions` }, !isAlertMode && /* @__PURE__ */ import_react.default.createElement(
120
124
  import_Button.Button,
121
- {
122
- variant: "text",
125
+ __spreadValues({
126
+ variant: "subtle",
127
+ color: "primary",
128
+ size: "full",
123
129
  onClick: handleCancel,
124
- className: `${prefixCls}-actions-btn`
125
- },
130
+ className: `${prefixCls}-actions-btn-cancel`
131
+ }, cancelButtonProps),
126
132
  cancelText || cancel
127
133
  ), /* @__PURE__ */ import_react.default.createElement(
128
134
  import_Button.Button,
129
- {
130
- variant: "text",
135
+ __spreadValues({
136
+ variant: "contained",
131
137
  color: "primary",
138
+ size: "full",
132
139
  onClick: handleOk,
133
- className: `${prefixCls}-actions-btn`
134
- },
140
+ className: `${prefixCls}-actions-btn-ok`
141
+ }, okButtonProps),
135
142
  okText || ok
136
143
  ));
137
144
  const inputNode = isPromptMode && /* @__PURE__ */ import_react.default.createElement(
@@ -148,12 +155,12 @@ const Dialog = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
148
155
  const ariaDescribedBy = content ? contentId : void 0;
149
156
  return /* @__PURE__ */ import_react.default.createElement(
150
157
  import_Modal.default,
151
- __spreadProps(__spreadValues({}, others), {
158
+ __spreadValues({
152
159
  open,
153
160
  ref,
154
161
  className: (0, import_clsx.default)(prefixCls, `${prefixCls}-${type}`, className),
155
162
  onClose: handleCancel
156
- }),
163
+ }, others),
157
164
  /* @__PURE__ */ import_react.default.createElement(
158
165
  "div",
159
166
  {
package/dist/Dialog/Dialog.types.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import React, { ReactNode } from 'react';
2
2
  import { ModalProps } from '../Modal/Modal.types';
3
3
  import { InputProps } from '../Input/Input.types';
4
+ import { ButtonProps } from '../Button/Button.types';
4
5
  import { ThemeProps } from '../ThemeProvider/ThemeProvider.types';
5
6
  /**
6
7
  * 对话框类型
@@ -29,6 +30,14 @@ export interface DialogProps extends Omit<ModalProps, 'title' | 'content'> {
29
30
  * 透传给内部Input组件的属性
30
31
  */
31
32
  InputProps?: Partial<InputProps>;
33
+ /**
34
+ * 透传给内部Button组件的属性
35
+ */
36
+ okButtonProps?: Partial<ButtonProps>;
37
+ /**
38
+ * 透传给内部Button组件的属性
39
+ */
40
+ cancelButtonProps?: Partial<ButtonProps>;
32
41
  /**
33
42
  * 确认按钮文本内容
34
43
  */
package/dist/Dialog/index.css CHANGED
@@ -1,17 +1,9 @@
1
1
  :root,
2
2
  page,
3
3
  xhs-page {
4
- --bui-dialog-max-width: 300px;
5
- --bui-dialog-border-radius: var(--bui-shape-radius-drawer);
6
- --bui-dialog-title-padding: 0 40px 9px;
7
- --bui-dialog-content-padding: 0 24px;
8
- --bui-dialog-actions-margin: 15px 0 0 0;
9
- --bui-dialog-button-height: 53px;
10
- --bui-dialog-button-line-height: 25px;
11
- --bui-dialog-button-padding: 12px 0 13px;
12
- --bui-dialog-button-font-size: 17px;
13
- --bui-dialog-button-border-left: 1px solid rgba(0, 0, 0, 0.05);
14
- --bui-dialog-button-active-bg-color: rgba(54, 57, 64, 0.05);
4
+ --bui-dialog-width: 300px;
5
+ --bui-dialog-border-radius: var(--bui-radius-8);
6
+ --bui-dialog-padding: 24px;
15
7
  }
16
8
  .bui-dialog {
17
9
  display: flex;
@@ -19,60 +11,42 @@ xhs-page {
19
11
  justify-content: center;
20
12
  }
21
13
  .bui-dialog-container {
22
- padding-top: 21px;
23
- min-width: var(--bui-dialog-max-width);
14
+ padding: var(--bui-dialog-padding);
15
+ position: relative;
16
+ width: var(--bui-dialog-width);
24
17
  margin: 0 auto;
25
18
  border-radius: var(--bui-dialog-border-radius);
26
19
  background-clip: padding-box;
27
20
  background-color: var(--bui-color-bg-view);
28
- line-height: 21px;
29
21
  }
30
22
  .bui-dialog-title {
31
- padding: var(--bui-dialog-title-padding);
23
+ padding-bottom: 12px;
32
24
  font-size: var(--bui-title-size-2);
33
25
  text-align: center;
34
26
  color: var(--bui-color-fg-default);
35
- font-weight: var(--bui-font-weight-medium);
36
- }
37
- .bui-dialog-title + .bui-dialog-actions {
38
- margin-top: var(--bui-spacing-sm);
27
+ font-weight: var(--bui-font-weight-semibold);
28
+ line-height: 1.4;
29
+ margin: 0;
39
30
  }
40
31
  .bui-dialog-content {
41
- padding: var(--bui-dialog-content-padding);
32
+ padding-bottom: 18px;
42
33
  color: var(--bui-color-fg-muted);
43
34
  font-size: var(--bui-title-size-4);
44
35
  text-align: center;
36
+ line-height: 1.5;
45
37
  }
46
38
  .bui-dialog-content:first-child {
47
39
  padding-top: 0;
48
40
  }
41
+ .bui-dialog-content:last-child {
42
+ padding-bottom: 0;
43
+ }
49
44
  .bui-dialog-actions {
50
- margin: var(--bui-dialog-actions-margin);
51
- border-top: 1px solid rgba(0, 0, 0, 0.05);
52
45
  display: flex;
53
- }
54
- .bui-dialog-actions-btn {
55
- flex: 1;
56
- display: block;
57
- width: 100%;
58
- height: var(--bui-dialog-button-height);
59
- line-height: var(--bui-dialog-button-line-height);
60
- padding: var(--bui-dialog-button-padding);
61
- font-size: var(--bui-dialog-button-font-size);
62
- border: 0;
63
- outline: 0;
64
- border-left: var(--bui-dialog-button-border-left);
65
- border-radius: 0;
66
- text-align: center;
67
- box-sizing: border-box;
68
- }
69
- .bui-dialog-actions-btn:first-child {
70
- border: none;
71
- }
72
- .bui-dialog-actions-btn:active {
73
- background-color: var(--bui-dialog-button-active-bg-color);
46
+ gap: var(--bui-spacing-lg);
47
+ align-items: center;
48
+ justify-content: center;
74
49
  }
75
50
  .bui-dialog-input {
76
- width: calc(100% - 48px);
77
- margin: 14px 24px 0;
51
+ margin-bottom: 18px;
78
52
  }
package/dist/Tabs/Tabs.css CHANGED
@@ -55,7 +55,6 @@ xhs-page {
55
55
  background: var(--bui-tabs-indicator-bg);
56
56
  border-radius: var(--bui-tabs-indicator-border-radius);
57
57
  box-shadow: var(--bui-tabs-indicator-box-shadow);
58
- z-index: 1;
59
58
  pointer-events: none;
60
59
  transition: left 0.3s ease-in-out;
61
60
  }
package/dist/Tabs/index.css CHANGED
@@ -55,7 +55,6 @@ xhs-page {
55
55
  background: var(--bui-tabs-indicator-bg);
56
56
  border-radius: var(--bui-tabs-indicator-border-radius);
57
57
  box-shadow: var(--bui-tabs-indicator-box-shadow);
58
- z-index: 1;
59
58
  pointer-events: none;
60
59
  transition: left 0.3s ease-in-out;
61
60
  }
package/dist/Toast/Toast.types.d.ts CHANGED
@@ -46,7 +46,7 @@ export interface ToastProps extends FadeProps {
46
46
  * 渲染Toast的根容器
47
47
  * @default document.body
48
48
  */
49
- container?: HTMLElement | (() => HTMLElement);
49
+ container?: HTMLElement | (() => HTMLElement) | null;
50
50
  /**
51
51
  * 关闭时的回调函数
52
52
  */
package/es/Dialog/Dialog.js CHANGED
@@ -52,7 +52,9 @@ const Dialog = /* @__PURE__ */ React.forwardRef((props, ref) => {
52
52
  placeholder,
53
53
  InputProps,
54
54
  className,
55
- theme
55
+ theme,
56
+ okButtonProps,
57
+ cancelButtonProps
56
58
  } = _a, others = __objRest(_a, [
57
59
  "open",
58
60
  "onOk",
@@ -65,7 +67,9 @@ const Dialog = /* @__PURE__ */ React.forwardRef((props, ref) => {
65
67
  "placeholder",
66
68
  "InputProps",
67
69
  "className",
68
- "theme"
70
+ "theme",
71
+ "okButtonProps",
72
+ "cancelButtonProps"
69
73
  ]);
70
74
  const inputRef = useRef(null);
71
75
  const titleId = useUniqueId();
@@ -88,20 +92,23 @@ const Dialog = /* @__PURE__ */ React.forwardRef((props, ref) => {
88
92
  };
89
93
  const actionsNode = /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-actions` }, !isAlertMode && /* @__PURE__ */ React.createElement(
90
94
  Button,
91
- {
92
- variant: "text",
95
+ __spreadValues({
96
+ variant: "subtle",
97
+ color: "primary",
98
+ size: "full",
93
99
  onClick: handleCancel,
94
- className: `${prefixCls}-actions-btn`
95
- },
100
+ className: `${prefixCls}-actions-btn-cancel`
101
+ }, cancelButtonProps),
96
102
  cancelText || cancel
97
103
  ), /* @__PURE__ */ React.createElement(
98
104
  Button,
99
- {
100
- variant: "text",
105
+ __spreadValues({
106
+ variant: "contained",
101
107
  color: "primary",
108
+ size: "full",
102
109
  onClick: handleOk,
103
- className: `${prefixCls}-actions-btn`
104
- },
110
+ className: `${prefixCls}-actions-btn-ok`
111
+ }, okButtonProps),
105
112
  okText || ok
106
113
  ));
107
114
  const inputNode = isPromptMode && /* @__PURE__ */ React.createElement(
@@ -118,12 +125,12 @@ const Dialog = /* @__PURE__ */ React.forwardRef((props, ref) => {
118
125
  const ariaDescribedBy = content ? contentId : void 0;
119
126
  return /* @__PURE__ */ React.createElement(
120
127
  Modal,
121
- __spreadProps(__spreadValues({}, others), {
128
+ __spreadValues({
122
129
  open,
123
130
  ref,
124
131
  className: clsx(prefixCls, `${prefixCls}-${type}`, className),
125
132
  onClose: handleCancel
126
- }),
133
+ }, others),
127
134
  /* @__PURE__ */ React.createElement(
128
135
  "div",
129
136
  {
package/es/Dialog/Dialog.types.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import React, { ReactNode } from 'react';
2
2
  import { ModalProps } from '../Modal/Modal.types';
3
3
  import { InputProps } from '../Input/Input.types';
4
+ import { ButtonProps } from '../Button/Button.types';
4
5
  import { ThemeProps } from '../ThemeProvider/ThemeProvider.types';
5
6
  /**
6
7
  * 对话框类型
@@ -29,6 +30,14 @@ export interface DialogProps extends Omit<ModalProps, 'title' | 'content'> {
29
30
  * 透传给内部Input组件的属性
30
31
  */
31
32
  InputProps?: Partial<InputProps>;
33
+ /**
34
+ * 透传给内部Button组件的属性
35
+ */
36
+ okButtonProps?: Partial<ButtonProps>;
37
+ /**
38
+ * 透传给内部Button组件的属性
39
+ */
40
+ cancelButtonProps?: Partial<ButtonProps>;
32
41
  /**
33
42
  * 确认按钮文本内容
34
43
  */
package/es/Dialog/index.css CHANGED
@@ -1,17 +1,9 @@
1
1
  :root,
2
2
  page,
3
3
  xhs-page {
4
- --bui-dialog-max-width: 300px;
5
- --bui-dialog-border-radius: var(--bui-shape-radius-drawer);
6
- --bui-dialog-title-padding: 0 40px 9px;
7
- --bui-dialog-content-padding: 0 24px;
8
- --bui-dialog-actions-margin: 15px 0 0 0;
9
- --bui-dialog-button-height: 53px;
10
- --bui-dialog-button-line-height: 25px;
11
- --bui-dialog-button-padding: 12px 0 13px;
12
- --bui-dialog-button-font-size: 17px;
13
- --bui-dialog-button-border-left: 1px solid rgba(0, 0, 0, 0.05);
14
- --bui-dialog-button-active-bg-color: rgba(54, 57, 64, 0.05);
4
+ --bui-dialog-width: 300px;
5
+ --bui-dialog-border-radius: var(--bui-radius-8);
6
+ --bui-dialog-padding: 24px;
15
7
  }
16
8
  .bui-dialog {
17
9
  display: flex;
@@ -19,60 +11,42 @@ xhs-page {
19
11
  justify-content: center;
20
12
  }
21
13
  .bui-dialog-container {
22
- padding-top: 21px;
23
- min-width: var(--bui-dialog-max-width);
14
+ padding: var(--bui-dialog-padding);
15
+ position: relative;
16
+ width: var(--bui-dialog-width);
24
17
  margin: 0 auto;
25
18
  border-radius: var(--bui-dialog-border-radius);
26
19
  background-clip: padding-box;
27
20
  background-color: var(--bui-color-bg-view);
28
- line-height: 21px;
29
21
  }
30
22
  .bui-dialog-title {
31
- padding: var(--bui-dialog-title-padding);
23
+ padding-bottom: 12px;
32
24
  font-size: var(--bui-title-size-2);
33
25
  text-align: center;
34
26
  color: var(--bui-color-fg-default);
35
- font-weight: var(--bui-font-weight-medium);
36
- }
37
- .bui-dialog-title + .bui-dialog-actions {
38
- margin-top: var(--bui-spacing-sm);
27
+ font-weight: var(--bui-font-weight-semibold);
28
+ line-height: 1.4;
29
+ margin: 0;
39
30
  }
40
31
  .bui-dialog-content {
41
- padding: var(--bui-dialog-content-padding);
32
+ padding-bottom: 18px;
42
33
  color: var(--bui-color-fg-muted);
43
34
  font-size: var(--bui-title-size-4);
44
35
  text-align: center;
36
+ line-height: 1.5;
45
37
  }
46
38
  .bui-dialog-content:first-child {
47
39
  padding-top: 0;
48
40
  }
41
+ .bui-dialog-content:last-child {
42
+ padding-bottom: 0;
43
+ }
49
44
  .bui-dialog-actions {
50
- margin: var(--bui-dialog-actions-margin);
51
- border-top: 1px solid rgba(0, 0, 0, 0.05);
52
45
  display: flex;
53
- }
54
- .bui-dialog-actions-btn {
55
- flex: 1;
56
- display: block;
57
- width: 100%;
58
- height: var(--bui-dialog-button-height);
59
- line-height: var(--bui-dialog-button-line-height);
60
- padding: var(--bui-dialog-button-padding);
61
- font-size: var(--bui-dialog-button-font-size);
62
- border: 0;
63
- outline: 0;
64
- border-left: var(--bui-dialog-button-border-left);
65
- border-radius: 0;
66
- text-align: center;
67
- box-sizing: border-box;
68
- }
69
- .bui-dialog-actions-btn:first-child {
70
- border: none;
71
- }
72
- .bui-dialog-actions-btn:active {
73
- background-color: var(--bui-dialog-button-active-bg-color);
46
+ gap: var(--bui-spacing-lg);
47
+ align-items: center;
48
+ justify-content: center;
74
49
  }
75
50
  .bui-dialog-input {
76
- width: calc(100% - 48px);
77
- margin: 14px 24px 0;
51
+ margin-bottom: 18px;
78
52
  }
package/es/Modal/Modal.miniapp.d.ts CHANGED
@@ -12,5 +12,5 @@ declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
12
12
  keepMounted?: boolean;
13
13
  } & import("@bifrostui/types").ICommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
14
14
  ref?: React.Ref<HTMLDivElement>;
15
- }, keyof import("@bifrostui/types").ICommonProps | "open" | "container" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
15
+ }, "open" | "container" | keyof import("@bifrostui/types").ICommonProps | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
16
16
  export default Modal;
package/es/Tabs/Tabs.css CHANGED
@@ -55,7 +55,6 @@ xhs-page {
55
55
  background: var(--bui-tabs-indicator-bg);
56
56
  border-radius: var(--bui-tabs-indicator-border-radius);
57
57
  box-shadow: var(--bui-tabs-indicator-box-shadow);
58
- z-index: 1;
59
58
  pointer-events: none;
60
59
  transition: left 0.3s ease-in-out;
61
60
  }
package/es/Tabs/index.css CHANGED
@@ -55,7 +55,6 @@ xhs-page {
55
55
  background: var(--bui-tabs-indicator-bg);
56
56
  border-radius: var(--bui-tabs-indicator-border-radius);
57
57
  box-shadow: var(--bui-tabs-indicator-box-shadow);
58
- z-index: 1;
59
58
  pointer-events: none;
60
59
  transition: left 0.3s ease-in-out;
61
60
  }
package/es/Toast/Toast.types.d.ts CHANGED
@@ -46,7 +46,7 @@ export interface ToastProps extends FadeProps {
46
46
  * 渲染Toast的根容器
47
47
  * @default document.body
48
48
  */
49
- container?: HTMLElement | (() => HTMLElement);
49
+ container?: HTMLElement | (() => HTMLElement) | null;
50
50
  /**
51
51
  * 关闭时的回调函数
52
52
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bifrostui/react",
3
- "version": "2.0.0-alpha.20",
3
+ "version": "2.0.0-alpha.22",
4
4
  "description": "React components for building mobile application",
5
5
  "homepage": "http://bui.taopiaopiao.com",
6
6
  "license": "MIT",
@@ -43,10 +43,10 @@
43
43
  "clsx": "^2.1.1",
44
44
  "dayjs": "^1.11.7",
45
45
  "swiper": "^8.1.5",
46
- "@bifrostui/icons": "2.0.0-alpha.20",
47
- "@bifrostui/styles": "2.0.0-alpha.20",
48
- "@bifrostui/utils": "2.0.0-alpha.20",
49
- "@bifrostui/types": "2.0.0-alpha.20"
46
+ "@bifrostui/icons": "2.0.0-alpha.22",
47
+ "@bifrostui/styles": "2.0.0-alpha.22",
48
+ "@bifrostui/utils": "2.0.0-alpha.22",
49
+ "@bifrostui/types": "2.0.0-alpha.22"
50
50
  },
51
51
  "peerDependencies": {
52
52
  "@tarojs/components": "^3.0.0",