@ray-js/smart-ui 2.4.0 → 2.4.1-beta-2
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.
- package/README-zh_CN.md +5 -1
- package/README.md +5 -1
- package/es/@types/action-sheet/index.d.ts +7 -0
- package/es/@types/bottom-sheet/index.d.ts +12 -0
- package/es/@types/config-provider/theme-vars.d.ts +3 -3
- package/es/@types/dropdown-item/index.d.ts +6 -1
- package/es/@types/popover/index.d.ts +19 -0
- package/es/@types/toast/toast.d.ts +7 -0
- package/lib/@types/action-sheet/index.d.ts +7 -0
- package/lib/@types/bottom-sheet/index.d.ts +12 -0
- package/lib/@types/config-provider/theme-vars.d.ts +3 -3
- package/lib/@types/dropdown-item/index.d.ts +6 -1
- package/lib/@types/popover/index.d.ts +19 -0
- package/lib/@types/toast/toast.d.ts +7 -0
- package/package.json +2 -2
package/README-zh_CN.md
CHANGED
|
@@ -39,7 +39,7 @@ export default function Demo() {
|
|
|
39
39
|
```
|
|
40
40
|
|
|
41
41
|
## 动态按需引入(推荐)
|
|
42
|
-
考虑到项目的按需引入以及整体体积问题,上面的引入方式会导致部分组件样式文件残留影响打包产物体积,所以我们推荐使用按需引入插件,其会自动将 `import { Button } from '@ray-js/smart-ui';` 引入方式解析成 `import Button from '@ray-js/smart-ui/es/button';`。
|
|
42
|
+
考虑到项目的按需引入以及整体体积问题,上面的引入方式会导致部分组件样式文件残留影响打包产物体积,所以我们推荐使用按需引入插件,其会自动将 `import { Button } from '@ray-js/smart-ui';` 引入方式解析成 `import { Button } from '@ray-js/smart-ui/es/button';`。
|
|
43
43
|
|
|
44
44
|
1. 环境要求
|
|
45
45
|
* \>= @ray-js/cli@1.7.4
|
|
@@ -59,6 +59,10 @@ const config: RayConfig = {
|
|
|
59
59
|
module.exports = config;
|
|
60
60
|
```
|
|
61
61
|
|
|
62
|
+
```!warning:注意
|
|
63
|
+
按需引入插件不会解析 node_modules 内的内容,所以如果引用了或者开发 SmartUI 二次封装 npm 包内部需要按需引入资源,否则会导致 SmartUI 组件库全量引入!
|
|
64
|
+
```
|
|
65
|
+
|
|
62
66
|
## 在开发者工具中预览
|
|
63
67
|
|
|
64
68
|
```bash
|
package/README.md
CHANGED
|
@@ -39,7 +39,7 @@ export default function Demo() {
|
|
|
39
39
|
```
|
|
40
40
|
|
|
41
41
|
## Dynamic Import on Demand (Recommended)
|
|
42
|
-
Considering the project’s demand for dynamic import and overall package size concerns, the above import method might leave some component style files that impact the package size. Therefore, we recommend using the on-demand import plugin, which will automatically parse `import { Button } from '@ray-js/smart-ui';` into `import Button from '@ray-js/smart-ui/es/button';`.
|
|
42
|
+
Considering the project’s demand for dynamic import and overall package size concerns, the above import method might leave some component style files that impact the package size. Therefore, we recommend using the on-demand import plugin, which will automatically parse `import { Button } from '@ray-js/smart-ui';` into `import { Button } from '@ray-js/smart-ui/es/button';`.
|
|
43
43
|
|
|
44
44
|
1. Environment Requirements
|
|
45
45
|
* \>= @ray-js/cli@1.7.4
|
|
@@ -59,6 +59,10 @@ const config: RayConfig = {
|
|
|
59
59
|
module.exports = config;
|
|
60
60
|
```
|
|
61
61
|
|
|
62
|
+
```!warning:Attention
|
|
63
|
+
On-demand plugin import will not parse contents inside node_modules. Therefore, if you reference or develop a SmartUI secondary packaging npm package, you need to import resources on demand internally; otherwise, it will lead to the full import of the SmartUI component library!
|
|
64
|
+
```
|
|
65
|
+
|
|
62
66
|
## Preview in Developer Tools
|
|
63
67
|
|
|
64
68
|
```bash
|
|
@@ -104,6 +104,13 @@ export interface SmartActionSheetProps {
|
|
|
104
104
|
* @version `1.1.0`
|
|
105
105
|
*/
|
|
106
106
|
safeAreaInsetBottomMin?: number;
|
|
107
|
+
/**
|
|
108
|
+
* 开启弹框期间是否禁用本地手势
|
|
109
|
+
*
|
|
110
|
+
* @default false
|
|
111
|
+
* @version v2.5.0
|
|
112
|
+
*/
|
|
113
|
+
nativeDisabled?: boolean;
|
|
107
114
|
}
|
|
108
115
|
export interface SmartActionSheetEvents extends SmartTransitionEvents {
|
|
109
116
|
/**
|
|
@@ -38,6 +38,18 @@ export interface SmartBottomSheetProps {
|
|
|
38
38
|
* 点击遮罩是否关闭菜单
|
|
39
39
|
*/
|
|
40
40
|
closeOnClickOverlay?: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* 开启弹框期间是否禁用本地手势
|
|
43
|
+
*
|
|
44
|
+
* @default false
|
|
45
|
+
* @version v2.5.0
|
|
46
|
+
*/
|
|
47
|
+
nativeDisabled?: boolean;
|
|
48
|
+
/**
|
|
49
|
+
* 内容区域高度,当设置此值时,组件的 max-height 将会失效
|
|
50
|
+
* @version 2.5.0
|
|
51
|
+
*/
|
|
52
|
+
contentHeight?: number | string;
|
|
41
53
|
}
|
|
42
54
|
export interface SmartBottomSheetEvents extends SmartTransitionEvents {
|
|
43
55
|
/**
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
type CommonThemeVars = 'M1' | 'M2' | 'M3' | 'M4' | 'M5' | 'B1' | 'B2' | 'B3' | 'B4' | 'B5' | 'B6' | 'B1N1' | 'B1N2' | 'B1N3' | 'B1N4' | 'B1N5' | 'B1N6' | 'B1N7' | 'B1N8' | 'B1N9' | 'B2N1' | 'B2N2' | 'B2N3' | 'B2N4' | 'B2N5' | 'B2N6' | 'B2N7' | 'B2N8' | 'B2N9' | 'B4N1' | 'B4N2' | 'B4N3' | 'B4N4' | 'B4N5' | 'B4N6' | 'B4N7' | 'B4N8' | 'B4N9' | 'B6N1' | 'B6N2' | 'B6N3' | 'B6N4' | 'B6N5' | 'B6N6' | 'B6N7' | 'B6N8' | 'B6N9' | 'black' | 'white' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'gray6' | 'gray7' | 'gray8' | 'red' | 'blue' | 'orange' | 'orangeDark' | 'orangeLight' | 'green' | 'gradientRed' | 'gradientOrange' | 'textColor' | 'activeColor' | 'activeOpacity' | 'disabledOpacity' | 'backgroundColor' | 'backgroundColorLight' | 'textLinkColor' | 'paddingBase' | 'paddingMb' | 'paddingXs' | 'paddingSm' | 'paddingMd' | 'paddingLg' | 'paddingXl' | 'fontSizeXs' | 'fontSizeSm' | 'fontSizeMd' | 'fontSizeLg' | 'fontWeightBold' | 'fontWeightBolder' | 'lineHeightXs' | 'lineHeightSm' | 'lineHeightMd' | 'lineHeightLg' | 'baseFontFamily' | 'priceIntegerFontFamily' | 'animationDurationBase' | 'animationDurationFast' | 'borderColor' | 'borderWidthBase' | 'borderRadiusSm' | 'borderRadiusMd' | 'borderRadiusLg' | 'borderRadiusMax' | 'goodsActionBackgroundColor' | 'goodsActionHeight' | 'goodsActionIconWidth' | 'goodsActionIconHeight' | 'goodsActionIconColor' | 'goodsActionIconSize' | 'goodsActionIconFontSize' | 'goodsActionIconTextColor' | 'goodsActionButtonHeight' | 'goodsActionButtonLineHeight' | 'goodsActionButtonBorderRadius' | 'goodsActionButtonWarningColor' | 'goodsActionButtonDangerColor' | 'goodsActionButtonPlainColor' | 'infoSize' | 'infoColor' | 'infoPadding' | 'infoFontSize' | 'infoFontWeight' | 'infoBorderWidth' | 'infoBackgroundColor' | 'infoDotColor' | 'infoDotSize' | 'infoFontFamily' | 'stepTextColor' | 'stepProcessTextColor' | 'stepFontSize' | 'stepLineColor' | 'stepFinishLineColor' | 'stepFinishTextColor' | 'stepIconSize' | 'stepCircleSize' | 'stepCircleColor' | 'stepHorizontalTitleFontSize' | 'hairlineTopWidth' | 'hairlineLeftWidth' | 'hairlineRightWidth' | 'hairlineBottomWidth' | 'hairlineSurroundWidth' | 'hairlineTopBottomWidth' | 'hairlineColor';
|
|
2
2
|
type IconThemeVars = 'iconColor';
|
|
3
3
|
type ActionSheetThemeVars = 'actionSheetWidth' | 'actionSheetLeft' | 'actionSheetMaxHeight' | 'actionSheetMargin' | 'actionSheetActiveColor' | 'actionSheetActiveIconColor' | 'actionSheetItemDisabledOpacity' | 'actionSheetHeaderBorderColor' | 'actionSheetHeaderHeight' | 'actionSheetHeaderColor' | 'actionSheetHeaderFontSize' | 'actionSheetHeaderFontWeight' | 'actionSheetDescriptionColor' | 'actionSheetDescriptionFontSize' | 'actionSheetDescriptionLineHeight' | 'actionSheetItemBackground' | 'actionSheetItemBorderRadius' | 'actionSheetItemIconMargin' | 'actionSheetItemIconColor' | 'actionSheetItemIconSize' | 'actionSheetItemFontSize' | 'actionSheetItemFontWeight' | 'actionSheetItemLineHeight' | 'actionSheetItemTextColor' | 'actionSheetSubnameColor' | 'actionSheetSubnameFontSize' | 'actionSheetSubnameLineHeight' | 'actionSheetConfirmTextColor' | 'actionSheetConfirmFontWeight' | 'actionSheetCancelTextColor' | 'actionSheetFooterPaddingTop' | 'actionSheetFooterPaddingColor';
|
|
4
|
-
type BottomSheetThemeVars = 'bottomSheetWidth' | 'bottomSheetMinHeight' | 'bottomSheetMaxHeight' | 'bottomSheetPadding' | 'bottomSheetIconMargin' | 'bottomSheetHeaderHeight' | 'bottomSheetHeaderColor' | 'bottomSheetHeaderFontSize' | 'bottomSheetHeaderFontWeight' | 'bottomSheetFontColor';
|
|
4
|
+
type BottomSheetThemeVars = 'bottomSheetWidth' | 'bottomSheetMinHeight' | 'bottomSheetMaxHeight' | 'bottomSheetPadding' | 'bottomSheetHeaderPadding' | 'bottomSheetIconMargin' | 'bottomSheetHeaderHeight' | 'bottomSheetHeaderColor' | 'bottomSheetHeaderFontSize' | 'bottomSheetHeaderFontWeight' | 'bottomSheetFontColor';
|
|
5
5
|
type ButtonThemeVars = 'buttonMiniHeight' | 'buttonMiniMinWidth' | 'buttonMiniFontSize' | 'buttonSmallHeight' | 'buttonSmallFontSize' | 'buttonSmallMinWidth' | 'buttonNormalFontSize' | 'buttonLargeHeight' | 'buttonDefaultColor' | 'buttonDefaultHeight' | 'buttonDefaultFontSize' | 'buttonDefaultBackgroundColor' | 'buttonDefaultBorderColor' | 'buttonPrimaryColor' | 'buttonPrimaryBackgroundColor' | 'buttonPrimaryBorderColor' | 'buttonInfoColor' | 'buttonInfoBackgroundColor' | 'buttonInfoBorderColor' | 'buttonDangerColor' | 'buttonDangerBackgroundColor' | 'buttonDangerBorderColor' | 'buttonWarningColor' | 'buttonWarningBackgroundColor' | 'buttonWarningBorderColor' | 'buttonLineHeight' | 'buttonBorderWidth' | 'buttonBorderRadius' | 'buttonRoundBorderRadius' | 'buttonPlainBackgroundColor' | 'buttonDisabledOpacity' | 'buttonFontWeight' | 'buttonPrimaryFontWeight';
|
|
6
|
-
type CalendarThemeVars = 'calendarBackgroundColor' | '
|
|
6
|
+
type CalendarThemeVars = 'calendarBackgroundColor' | 'calendarHeaderBoxShadow' | 'calendarHeaderTitleHeight' | 'calendarHeaderTitleFontSize' | 'calendarHeaderTitleFontColor' | 'calendarHeaderSubtitleFontSize' | 'calendarWeekdaysHeight' | 'calendarWeekdaysFontSize' | 'calendarWeekdaysFontColor' | 'calendarMonthTitleFontSize' | 'calendarMonthMarkColor' | 'calendarMonthMarkFontSize' | 'calendarDayHeight' | 'calendarCellItemFontSize' | 'calendarCellItemWidth' | 'calendarCellItemHeight' | 'calendarCellItemFontColor' | 'calendarCellItemBorderRadius' | 'calendarDayFontWeight' | 'calendarDaySelectBorderRadius' | 'calendarRangeEdgeColor' | 'calendarRangeEdgeBackgroundColor' | 'calendarRangeMiddleColor' | 'calendarRangeMiddleBackgroundOpacity' | 'calendarSelectedDaySize' | 'calendarSelectedDayColor' | 'calendarInfoFontSize' | 'calendarInfoLineHeight' | 'calendarSelectedDayBackgroundColor' | 'calendarDayDisabledColor' | 'calendarConfirmButtonHeight' | 'calendarConfirmButtonMargin' | 'calendarConfirmButtonLineHeight' | 'calendarTextColor' | 'calendarPopupHeight' | 'calendarHeaderSaveColor' | 'calendarHeaderIconBgColor';
|
|
7
7
|
type CellThemeVars = 'cellFontSize' | 'cellLineHeight' | 'cellVerticalPadding' | 'cellHorizontalPadding' | 'cellTextColor' | 'cellBackgroundColor' | 'cellActiveColor' | 'cellRequiredColor' | 'cellLabelColor' | 'cellLabelFontSize' | 'cellLabelLineHeight' | 'cellLabelMarginTop' | 'cellValueColor' | 'cellIconSize' | 'cellRightIconColor' | 'cellBorderColor' | 'cellBorderLeftPosition' | 'cellBorderRightPosition' | 'cellGroupBackgroundColor' | 'cellGroupTitleColor' | 'cellGroupTitlePadding' | 'cellGroupTitleFontSize' | 'cellGroupTitleLineHeight' | 'cellGroupInsetPadding' | 'cellGroupInsetBorderRadius' | 'cellGroupInsetTitlePadding';
|
|
8
8
|
type CheckboxThemeVars = 'checkboxSize' | 'checkboxBorderColor' | 'checkboxBorderRadius' | 'checkboxTransitionDuration' | 'checkboxLabelSize' | 'checkboxLabelMargin' | 'checkboxLabelColor' | 'checkboxCheckedIconColor' | 'checkboxDisabledLabelColor' | 'checkboxDisabledOpacity';
|
|
9
9
|
type CircleThemeVars = 'circleTextColor';
|
|
@@ -22,7 +22,7 @@ type PopupThemeVars = 'popupBackgroundColor' | 'popupRoundBorderRadius' | 'popup
|
|
|
22
22
|
type ProgressThemeVars = 'progressHeight' | 'progressBackgroundColor' | 'progressPivotPadding' | 'progressColor' | 'progressPivotFontSize' | 'progressPivotLineHeight' | 'progressPivotBackgroundColor' | 'progressPivotTextColor';
|
|
23
23
|
type RadioThemeVars = 'radioSize' | 'radioBorderColor' | 'radioBorderRadius' | 'radioTransitionDuration' | 'radioLabelSize' | 'radioLabelMargin' | 'radioLabelColor' | 'radioCheckedIconColor' | 'radioDisabledLabelColor' | 'radioDisabledOpacity';
|
|
24
24
|
type RateThemeVars = 'rateHorizontalPadding' | 'rateIconSize' | 'rateIconVoidColor' | 'rateIconFullColor' | 'rateIconDisabledColor' | 'rateIconGutter';
|
|
25
|
-
type SwitchThemeVars = 'switchWidth' | 'switchHeight' | 'switchNodeSize' | 'switchNodeZIndex' | 'switchNodeBackgroundColor' | 'switchNodeBoxShadow' | 'switchBackgroundColor' | 'switchOnBackgroundColor' | 'switchTransitionDuration' | 'switchDisabledOpacity' | '
|
|
25
|
+
type SwitchThemeVars = 'switchWidth' | 'switchHeight' | 'switchNodeSize' | 'switchNodeZIndex' | 'switchNodeBackgroundColor' | 'switchNodeOnBackgroundColor' | 'switchNodeBoxShadow' | 'switchBackgroundColor' | 'switchOnBackgroundColor' | 'switchTransitionDuration' | 'switchDisabledOpacity' | 'switchPadding';
|
|
26
26
|
type SearchThemeVars = 'searchBackgroundColor' | 'searchBodyBackgroundColor' | 'searchPadding' | 'searchInputHeight' | 'searchLabelPadding' | 'searchLabelColor' | 'searchLabelFontSize' | 'searchValueFontSize' | 'searchLeftIconColor' | 'searchActionPadding' | 'searchActionTextColor' | 'searchActionFontSize' | 'searchSubmitFontSize' | 'searchSubmitColor' | 'searchBtnHoverColor' | 'searchSubmitLineWidth' | 'searchSubmitLineHeight' | 'searchBtnHoverOpacity';
|
|
27
27
|
type SidebarThemeVars = 'sidebarWidth' | 'sidebarFontSize' | 'sidebarLineHeight' | 'sidebarTextColor' | 'sidebarDisabledTextColor' | 'sidebarPadding' | 'sidebarActiveColor' | 'sidebarBackgroundColor' | 'sidebarSelectedFontWeight' | 'sidebarSelectedTextColor' | 'sidebarSelectedBorderColor' | 'sidebarSelectedBackgroundColor';
|
|
28
28
|
type SliderThemeVars = 'sliderActiveBackgroundColor' | 'sliderInactiveBackgroundColor' | 'sliderDisabledOpacity' | 'sliderBarHeight' | 'sliderButtonWidth' | 'sliderButtonHeight' | 'sliderButtonBorderRadius' | 'sliderButtonBackgroundColor' | 'sliderButtonBoxShadow' | 'sliderThumbColor';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
/// <reference types="miniprogram-api-typings" />
|
|
2
|
+
import React from 'react';
|
|
3
3
|
import { SmartComponent, SmartEventHandler } from '../base';
|
|
4
4
|
export interface SmartDropdownItemOption {
|
|
5
5
|
/**
|
|
@@ -51,6 +51,11 @@ export interface SmartDropdownItemProps {
|
|
|
51
51
|
* @default false
|
|
52
52
|
*/
|
|
53
53
|
useBeforeToggle?: boolean;
|
|
54
|
+
/**
|
|
55
|
+
* 下拉菜单的滚动组件样式,可以设置高度来使下拉列表滚动
|
|
56
|
+
* @version 2.5.0
|
|
57
|
+
*/
|
|
58
|
+
scrollStyle?: React.CSSProperties;
|
|
54
59
|
}
|
|
55
60
|
/**
|
|
56
61
|
* @deprecated
|
|
@@ -2,11 +2,30 @@
|
|
|
2
2
|
import { SmartBaseExternalClassName, SmartComponent, SmartEventHandler } from '../base';
|
|
3
3
|
import { SmartTransitionEvents } from '../transition';
|
|
4
4
|
export interface SmartPopoverProps {
|
|
5
|
+
/**
|
|
6
|
+
* 弹出层的位置
|
|
7
|
+
*/
|
|
5
8
|
placement?: 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom';
|
|
9
|
+
/**
|
|
10
|
+
* 控制弹出层是否显示,并监听状态变化,值变更时更新
|
|
11
|
+
*/
|
|
6
12
|
show?: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* 自定义弹出层样式
|
|
15
|
+
*/
|
|
7
16
|
customStyle?: React.CSSProperties;
|
|
8
17
|
zIndex?: number;
|
|
18
|
+
/**
|
|
19
|
+
* 延迟关闭的时间
|
|
20
|
+
* @default 3000
|
|
21
|
+
*/
|
|
9
22
|
duration?: number;
|
|
23
|
+
/**
|
|
24
|
+
* 控制弹出层触发方式,支持 `tap`、`longpress`
|
|
25
|
+
*
|
|
26
|
+
* @default 'tap'
|
|
27
|
+
*/
|
|
28
|
+
trigger?: 'tap' | 'longpress';
|
|
10
29
|
}
|
|
11
30
|
export interface SmartPopoverSlot {
|
|
12
31
|
slot?: {
|
|
@@ -74,6 +74,13 @@ export interface SmartToastOptions {
|
|
|
74
74
|
* @version `2.1.7`
|
|
75
75
|
*/
|
|
76
76
|
width?: number;
|
|
77
|
+
/**
|
|
78
|
+
* 开启弹框期间是否禁用本地手势
|
|
79
|
+
*
|
|
80
|
+
* @default false
|
|
81
|
+
* @version v2.5.0
|
|
82
|
+
*/
|
|
83
|
+
nativeDisabled?: boolean;
|
|
77
84
|
}
|
|
78
85
|
export declare interface ToastInstance extends SmartToast {
|
|
79
86
|
setData(options: SmartToastOptions): void;
|
|
@@ -104,6 +104,13 @@ export interface SmartActionSheetProps {
|
|
|
104
104
|
* @version `1.1.0`
|
|
105
105
|
*/
|
|
106
106
|
safeAreaInsetBottomMin?: number;
|
|
107
|
+
/**
|
|
108
|
+
* 开启弹框期间是否禁用本地手势
|
|
109
|
+
*
|
|
110
|
+
* @default false
|
|
111
|
+
* @version v2.5.0
|
|
112
|
+
*/
|
|
113
|
+
nativeDisabled?: boolean;
|
|
107
114
|
}
|
|
108
115
|
export interface SmartActionSheetEvents extends SmartTransitionEvents {
|
|
109
116
|
/**
|
|
@@ -38,6 +38,18 @@ export interface SmartBottomSheetProps {
|
|
|
38
38
|
* 点击遮罩是否关闭菜单
|
|
39
39
|
*/
|
|
40
40
|
closeOnClickOverlay?: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* 开启弹框期间是否禁用本地手势
|
|
43
|
+
*
|
|
44
|
+
* @default false
|
|
45
|
+
* @version v2.5.0
|
|
46
|
+
*/
|
|
47
|
+
nativeDisabled?: boolean;
|
|
48
|
+
/**
|
|
49
|
+
* 内容区域高度,当设置此值时,组件的 max-height 将会失效
|
|
50
|
+
* @version 2.5.0
|
|
51
|
+
*/
|
|
52
|
+
contentHeight?: number | string;
|
|
41
53
|
}
|
|
42
54
|
export interface SmartBottomSheetEvents extends SmartTransitionEvents {
|
|
43
55
|
/**
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
type CommonThemeVars = 'M1' | 'M2' | 'M3' | 'M4' | 'M5' | 'B1' | 'B2' | 'B3' | 'B4' | 'B5' | 'B6' | 'B1N1' | 'B1N2' | 'B1N3' | 'B1N4' | 'B1N5' | 'B1N6' | 'B1N7' | 'B1N8' | 'B1N9' | 'B2N1' | 'B2N2' | 'B2N3' | 'B2N4' | 'B2N5' | 'B2N6' | 'B2N7' | 'B2N8' | 'B2N9' | 'B4N1' | 'B4N2' | 'B4N3' | 'B4N4' | 'B4N5' | 'B4N6' | 'B4N7' | 'B4N8' | 'B4N9' | 'B6N1' | 'B6N2' | 'B6N3' | 'B6N4' | 'B6N5' | 'B6N6' | 'B6N7' | 'B6N8' | 'B6N9' | 'black' | 'white' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'gray6' | 'gray7' | 'gray8' | 'red' | 'blue' | 'orange' | 'orangeDark' | 'orangeLight' | 'green' | 'gradientRed' | 'gradientOrange' | 'textColor' | 'activeColor' | 'activeOpacity' | 'disabledOpacity' | 'backgroundColor' | 'backgroundColorLight' | 'textLinkColor' | 'paddingBase' | 'paddingMb' | 'paddingXs' | 'paddingSm' | 'paddingMd' | 'paddingLg' | 'paddingXl' | 'fontSizeXs' | 'fontSizeSm' | 'fontSizeMd' | 'fontSizeLg' | 'fontWeightBold' | 'fontWeightBolder' | 'lineHeightXs' | 'lineHeightSm' | 'lineHeightMd' | 'lineHeightLg' | 'baseFontFamily' | 'priceIntegerFontFamily' | 'animationDurationBase' | 'animationDurationFast' | 'borderColor' | 'borderWidthBase' | 'borderRadiusSm' | 'borderRadiusMd' | 'borderRadiusLg' | 'borderRadiusMax' | 'goodsActionBackgroundColor' | 'goodsActionHeight' | 'goodsActionIconWidth' | 'goodsActionIconHeight' | 'goodsActionIconColor' | 'goodsActionIconSize' | 'goodsActionIconFontSize' | 'goodsActionIconTextColor' | 'goodsActionButtonHeight' | 'goodsActionButtonLineHeight' | 'goodsActionButtonBorderRadius' | 'goodsActionButtonWarningColor' | 'goodsActionButtonDangerColor' | 'goodsActionButtonPlainColor' | 'infoSize' | 'infoColor' | 'infoPadding' | 'infoFontSize' | 'infoFontWeight' | 'infoBorderWidth' | 'infoBackgroundColor' | 'infoDotColor' | 'infoDotSize' | 'infoFontFamily' | 'stepTextColor' | 'stepProcessTextColor' | 'stepFontSize' | 'stepLineColor' | 'stepFinishLineColor' | 'stepFinishTextColor' | 'stepIconSize' | 'stepCircleSize' | 'stepCircleColor' | 'stepHorizontalTitleFontSize' | 'hairlineTopWidth' | 'hairlineLeftWidth' | 'hairlineRightWidth' | 'hairlineBottomWidth' | 'hairlineSurroundWidth' | 'hairlineTopBottomWidth' | 'hairlineColor';
|
|
2
2
|
type IconThemeVars = 'iconColor';
|
|
3
3
|
type ActionSheetThemeVars = 'actionSheetWidth' | 'actionSheetLeft' | 'actionSheetMaxHeight' | 'actionSheetMargin' | 'actionSheetActiveColor' | 'actionSheetActiveIconColor' | 'actionSheetItemDisabledOpacity' | 'actionSheetHeaderBorderColor' | 'actionSheetHeaderHeight' | 'actionSheetHeaderColor' | 'actionSheetHeaderFontSize' | 'actionSheetHeaderFontWeight' | 'actionSheetDescriptionColor' | 'actionSheetDescriptionFontSize' | 'actionSheetDescriptionLineHeight' | 'actionSheetItemBackground' | 'actionSheetItemBorderRadius' | 'actionSheetItemIconMargin' | 'actionSheetItemIconColor' | 'actionSheetItemIconSize' | 'actionSheetItemFontSize' | 'actionSheetItemFontWeight' | 'actionSheetItemLineHeight' | 'actionSheetItemTextColor' | 'actionSheetSubnameColor' | 'actionSheetSubnameFontSize' | 'actionSheetSubnameLineHeight' | 'actionSheetConfirmTextColor' | 'actionSheetConfirmFontWeight' | 'actionSheetCancelTextColor' | 'actionSheetFooterPaddingTop' | 'actionSheetFooterPaddingColor';
|
|
4
|
-
type BottomSheetThemeVars = 'bottomSheetWidth' | 'bottomSheetMinHeight' | 'bottomSheetMaxHeight' | 'bottomSheetPadding' | 'bottomSheetIconMargin' | 'bottomSheetHeaderHeight' | 'bottomSheetHeaderColor' | 'bottomSheetHeaderFontSize' | 'bottomSheetHeaderFontWeight' | 'bottomSheetFontColor';
|
|
4
|
+
type BottomSheetThemeVars = 'bottomSheetWidth' | 'bottomSheetMinHeight' | 'bottomSheetMaxHeight' | 'bottomSheetPadding' | 'bottomSheetHeaderPadding' | 'bottomSheetIconMargin' | 'bottomSheetHeaderHeight' | 'bottomSheetHeaderColor' | 'bottomSheetHeaderFontSize' | 'bottomSheetHeaderFontWeight' | 'bottomSheetFontColor';
|
|
5
5
|
type ButtonThemeVars = 'buttonMiniHeight' | 'buttonMiniMinWidth' | 'buttonMiniFontSize' | 'buttonSmallHeight' | 'buttonSmallFontSize' | 'buttonSmallMinWidth' | 'buttonNormalFontSize' | 'buttonLargeHeight' | 'buttonDefaultColor' | 'buttonDefaultHeight' | 'buttonDefaultFontSize' | 'buttonDefaultBackgroundColor' | 'buttonDefaultBorderColor' | 'buttonPrimaryColor' | 'buttonPrimaryBackgroundColor' | 'buttonPrimaryBorderColor' | 'buttonInfoColor' | 'buttonInfoBackgroundColor' | 'buttonInfoBorderColor' | 'buttonDangerColor' | 'buttonDangerBackgroundColor' | 'buttonDangerBorderColor' | 'buttonWarningColor' | 'buttonWarningBackgroundColor' | 'buttonWarningBorderColor' | 'buttonLineHeight' | 'buttonBorderWidth' | 'buttonBorderRadius' | 'buttonRoundBorderRadius' | 'buttonPlainBackgroundColor' | 'buttonDisabledOpacity' | 'buttonFontWeight' | 'buttonPrimaryFontWeight';
|
|
6
|
-
type CalendarThemeVars = 'calendarBackgroundColor' | '
|
|
6
|
+
type CalendarThemeVars = 'calendarBackgroundColor' | 'calendarHeaderBoxShadow' | 'calendarHeaderTitleHeight' | 'calendarHeaderTitleFontSize' | 'calendarHeaderTitleFontColor' | 'calendarHeaderSubtitleFontSize' | 'calendarWeekdaysHeight' | 'calendarWeekdaysFontSize' | 'calendarWeekdaysFontColor' | 'calendarMonthTitleFontSize' | 'calendarMonthMarkColor' | 'calendarMonthMarkFontSize' | 'calendarDayHeight' | 'calendarCellItemFontSize' | 'calendarCellItemWidth' | 'calendarCellItemHeight' | 'calendarCellItemFontColor' | 'calendarCellItemBorderRadius' | 'calendarDayFontWeight' | 'calendarDaySelectBorderRadius' | 'calendarRangeEdgeColor' | 'calendarRangeEdgeBackgroundColor' | 'calendarRangeMiddleColor' | 'calendarRangeMiddleBackgroundOpacity' | 'calendarSelectedDaySize' | 'calendarSelectedDayColor' | 'calendarInfoFontSize' | 'calendarInfoLineHeight' | 'calendarSelectedDayBackgroundColor' | 'calendarDayDisabledColor' | 'calendarConfirmButtonHeight' | 'calendarConfirmButtonMargin' | 'calendarConfirmButtonLineHeight' | 'calendarTextColor' | 'calendarPopupHeight' | 'calendarHeaderSaveColor' | 'calendarHeaderIconBgColor';
|
|
7
7
|
type CellThemeVars = 'cellFontSize' | 'cellLineHeight' | 'cellVerticalPadding' | 'cellHorizontalPadding' | 'cellTextColor' | 'cellBackgroundColor' | 'cellActiveColor' | 'cellRequiredColor' | 'cellLabelColor' | 'cellLabelFontSize' | 'cellLabelLineHeight' | 'cellLabelMarginTop' | 'cellValueColor' | 'cellIconSize' | 'cellRightIconColor' | 'cellBorderColor' | 'cellBorderLeftPosition' | 'cellBorderRightPosition' | 'cellGroupBackgroundColor' | 'cellGroupTitleColor' | 'cellGroupTitlePadding' | 'cellGroupTitleFontSize' | 'cellGroupTitleLineHeight' | 'cellGroupInsetPadding' | 'cellGroupInsetBorderRadius' | 'cellGroupInsetTitlePadding';
|
|
8
8
|
type CheckboxThemeVars = 'checkboxSize' | 'checkboxBorderColor' | 'checkboxBorderRadius' | 'checkboxTransitionDuration' | 'checkboxLabelSize' | 'checkboxLabelMargin' | 'checkboxLabelColor' | 'checkboxCheckedIconColor' | 'checkboxDisabledLabelColor' | 'checkboxDisabledOpacity';
|
|
9
9
|
type CircleThemeVars = 'circleTextColor';
|
|
@@ -22,7 +22,7 @@ type PopupThemeVars = 'popupBackgroundColor' | 'popupRoundBorderRadius' | 'popup
|
|
|
22
22
|
type ProgressThemeVars = 'progressHeight' | 'progressBackgroundColor' | 'progressPivotPadding' | 'progressColor' | 'progressPivotFontSize' | 'progressPivotLineHeight' | 'progressPivotBackgroundColor' | 'progressPivotTextColor';
|
|
23
23
|
type RadioThemeVars = 'radioSize' | 'radioBorderColor' | 'radioBorderRadius' | 'radioTransitionDuration' | 'radioLabelSize' | 'radioLabelMargin' | 'radioLabelColor' | 'radioCheckedIconColor' | 'radioDisabledLabelColor' | 'radioDisabledOpacity';
|
|
24
24
|
type RateThemeVars = 'rateHorizontalPadding' | 'rateIconSize' | 'rateIconVoidColor' | 'rateIconFullColor' | 'rateIconDisabledColor' | 'rateIconGutter';
|
|
25
|
-
type SwitchThemeVars = 'switchWidth' | 'switchHeight' | 'switchNodeSize' | 'switchNodeZIndex' | 'switchNodeBackgroundColor' | 'switchNodeBoxShadow' | 'switchBackgroundColor' | 'switchOnBackgroundColor' | 'switchTransitionDuration' | 'switchDisabledOpacity' | '
|
|
25
|
+
type SwitchThemeVars = 'switchWidth' | 'switchHeight' | 'switchNodeSize' | 'switchNodeZIndex' | 'switchNodeBackgroundColor' | 'switchNodeOnBackgroundColor' | 'switchNodeBoxShadow' | 'switchBackgroundColor' | 'switchOnBackgroundColor' | 'switchTransitionDuration' | 'switchDisabledOpacity' | 'switchPadding';
|
|
26
26
|
type SearchThemeVars = 'searchBackgroundColor' | 'searchBodyBackgroundColor' | 'searchPadding' | 'searchInputHeight' | 'searchLabelPadding' | 'searchLabelColor' | 'searchLabelFontSize' | 'searchValueFontSize' | 'searchLeftIconColor' | 'searchActionPadding' | 'searchActionTextColor' | 'searchActionFontSize' | 'searchSubmitFontSize' | 'searchSubmitColor' | 'searchBtnHoverColor' | 'searchSubmitLineWidth' | 'searchSubmitLineHeight' | 'searchBtnHoverOpacity';
|
|
27
27
|
type SidebarThemeVars = 'sidebarWidth' | 'sidebarFontSize' | 'sidebarLineHeight' | 'sidebarTextColor' | 'sidebarDisabledTextColor' | 'sidebarPadding' | 'sidebarActiveColor' | 'sidebarBackgroundColor' | 'sidebarSelectedFontWeight' | 'sidebarSelectedTextColor' | 'sidebarSelectedBorderColor' | 'sidebarSelectedBackgroundColor';
|
|
28
28
|
type SliderThemeVars = 'sliderActiveBackgroundColor' | 'sliderInactiveBackgroundColor' | 'sliderDisabledOpacity' | 'sliderBarHeight' | 'sliderButtonWidth' | 'sliderButtonHeight' | 'sliderButtonBorderRadius' | 'sliderButtonBackgroundColor' | 'sliderButtonBoxShadow' | 'sliderThumbColor';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
/// <reference types="miniprogram-api-typings" />
|
|
2
|
+
import React from 'react';
|
|
3
3
|
import { SmartComponent, SmartEventHandler } from '../base';
|
|
4
4
|
export interface SmartDropdownItemOption {
|
|
5
5
|
/**
|
|
@@ -51,6 +51,11 @@ export interface SmartDropdownItemProps {
|
|
|
51
51
|
* @default false
|
|
52
52
|
*/
|
|
53
53
|
useBeforeToggle?: boolean;
|
|
54
|
+
/**
|
|
55
|
+
* 下拉菜单的滚动组件样式,可以设置高度来使下拉列表滚动
|
|
56
|
+
* @version 2.5.0
|
|
57
|
+
*/
|
|
58
|
+
scrollStyle?: React.CSSProperties;
|
|
54
59
|
}
|
|
55
60
|
/**
|
|
56
61
|
* @deprecated
|
|
@@ -2,11 +2,30 @@
|
|
|
2
2
|
import { SmartBaseExternalClassName, SmartComponent, SmartEventHandler } from '../base';
|
|
3
3
|
import { SmartTransitionEvents } from '../transition';
|
|
4
4
|
export interface SmartPopoverProps {
|
|
5
|
+
/**
|
|
6
|
+
* 弹出层的位置
|
|
7
|
+
*/
|
|
5
8
|
placement?: 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom';
|
|
9
|
+
/**
|
|
10
|
+
* 控制弹出层是否显示,并监听状态变化,值变更时更新
|
|
11
|
+
*/
|
|
6
12
|
show?: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* 自定义弹出层样式
|
|
15
|
+
*/
|
|
7
16
|
customStyle?: React.CSSProperties;
|
|
8
17
|
zIndex?: number;
|
|
18
|
+
/**
|
|
19
|
+
* 延迟关闭的时间
|
|
20
|
+
* @default 3000
|
|
21
|
+
*/
|
|
9
22
|
duration?: number;
|
|
23
|
+
/**
|
|
24
|
+
* 控制弹出层触发方式,支持 `tap`、`longpress`
|
|
25
|
+
*
|
|
26
|
+
* @default 'tap'
|
|
27
|
+
*/
|
|
28
|
+
trigger?: 'tap' | 'longpress';
|
|
10
29
|
}
|
|
11
30
|
export interface SmartPopoverSlot {
|
|
12
31
|
slot?: {
|
|
@@ -74,6 +74,13 @@ export interface SmartToastOptions {
|
|
|
74
74
|
* @version `2.1.7`
|
|
75
75
|
*/
|
|
76
76
|
width?: number;
|
|
77
|
+
/**
|
|
78
|
+
* 开启弹框期间是否禁用本地手势
|
|
79
|
+
*
|
|
80
|
+
* @default false
|
|
81
|
+
* @version v2.5.0
|
|
82
|
+
*/
|
|
83
|
+
nativeDisabled?: boolean;
|
|
77
84
|
}
|
|
78
85
|
export declare interface ToastInstance extends SmartToast {
|
|
79
86
|
setData(options: SmartToastOptions): void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ray-js/smart-ui",
|
|
3
|
-
"version": "2.4.
|
|
3
|
+
"version": "2.4.1-beta-2",
|
|
4
4
|
"description": "轻量、可靠的智能小程序 UI 组件库",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"syncMiniappData": "node ./build/syncMiniappData.js",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@ray-js/components-ty-slider": "^0.3.3",
|
|
45
|
-
"@tuya-miniapp/smart-ui": "
|
|
45
|
+
"@tuya-miniapp/smart-ui": "2.4.1-beta-5",
|
|
46
46
|
"lodash-es": "^4.17.21"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|