@ray-js/smart-ui 2.2.2-beta-6 → 2.2.2-beta-7

package/README-zh_CN.md

@@ -0,0 +1,56 @@
+[English](./README.md) | 简体中文
+
+# @ray-js/smart-ui
+
+## 介绍
+
+`@ray-js/smart-ui` 是一个基于 `Ray` 框架和 `@tuya-miniapp/smart-ui` 的 React 组件库，旨在提供符合智能小程序移动端设计规范的轻量、可靠的 UI 组件。通过结合 `Ray` 的规范适配中间层和内置的完善 TS 类型，我们提供了一整套适用于智能小程序的 React 组件，让开发者能够快速构建符合设计规范的移动端应用。
+
+## 预览
+
+扫描下方智能小程序二维码，体验组件库示例。
+
+<img src="https://images.tuyacn.com/content-platform/hestia/1716260412b7f2ae02271.png" width="200" height="200">
+
+## 使用之前
+
+使用 Smart UI 前，请确保你已经学习过智能小程序官方的 [Ray 开发概述](https://developer.tuya.com/cn/miniapp/develop/ray/guide/overview) 和 [Ray 组件介绍](https://developer.tuya.com/cn/miniapp/develop/ray/framework/component)。
+
+## 安装
+
+```bash
+# 通过 yarn 安装（推荐）
+yarn add @ray-js/smart-ui
+
+# 通过 npm 安装
+npm i @ray-js/smart-ui
+```
+
+## 使用组件
+
+以按钮组件为例
+
+```jsx
+import { Button } from '@ray-js/smart-ui';
+
+export default function Demo() {
+  return <Button type="info">信息按钮</Button>;
+}
+```
+
+## 在开发者工具中预览
+
+```bash
+# 安装项目依赖
+$ yarn
+```
+
+打开 [Tuya MiniApp Tools](https://developer.tuya.com/cn/miniapp/devtools/tools)，把 `example` 目录添加进去就可以预览示例了。
+
+## 基础库版本
+
+@ray-js/smart-ui 从智能小程序基础库 `2.19.0` 版本 `@ray-js/ray@^1.5.1` 及 IDE `0.6.5` 开始提供稳定的支持。
+
+## 开源协议
+
+本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源。

package/dist/@types/circle/index.d.ts

@@ -1,58 +1,73 @@
 import { SmartComponent } from '../base';
+import { ReactNode, CSSProperties } from 'react';
 export interface SmartCircleProps {
     /**
-     * 目标进度
-     *
-     * @default 0
+     * canvasId，可选，默认会随机生成一个
      */
-    percent?: number;
+    canvasId?: string;
     /**
-     * 指定`canvas`类型
+     * 子元素
+     * 默认值：undefined
      */
-    type?: '2d';
+    children?: ReactNode;
     /**
-     * 圆环直径，默认 `100px`
-     *
-     * @default '100px'
+     * 类名
+     * 默认值：undefined
      */
-    size?: string;
+    className?: string;
     /**
-     * 进度条颜色，传入对象格式可以定义渐变色
-     *
-     * @default '#1989fa'
+     * 样式 (v2.1.7)
+     * 默认值：undefined
      */
-    color?: string | Record<string, string>;
+    customStyle?: CSSProperties;
     /**
-     * 轨道颜色
-     *
-     * @default '#fff'
+     * 填充颜色
+     * 默认值：'#007AFF'
      */
-    'layer-color'?: string;
+    fillColor?: string;
     /**
-     * 填充颜色
+     * 遮罩颜色
+     * 默认值：'#ffffff'
+     */
+    maskColor?: string;
+    /**
+     * 样式风格
+     * 可选值：`basic`、`angle`、`angle2`
+     */
+    mode?: 'basic' | 'angle' | 'angle2';
+    /**
+     * 百分比
+     * 默认值：0
+     */
+    percent?: number;
+    /**
+     * 是否圆形
+     * 默认值：true
      */
-    fill?: string;
+    round?: boolean;
+    /**
+     * 尺寸
+     * 默认值：'100px'
+     */
+    size?: string;
     /**
-     * 动画速度（单位为 value/s）
-     *
-     * @default 50
+     * 样式 (已废弃 v2.1.7)
+     * 默认值：undefined
      */
-    speed?: number;
+    style?: CSSProperties;
     /**
-     * 文字
+     * 滑槽颜色
+     * 默认值：'#d3d3d3'
      */
-    text?: string;
+    trackColor?: string;
     /**
-     * 进度条宽度
-     *
-     * @default 4
+     * 滑槽宽度
+     * 默认值：'10px'
      */
-    'stroke-width'?: number;
+    trackWidth?: string;
     /**
-     * 是否顺时针增加
-     *
-     * @default true
+     * 渐变色
      */
-    clockwise?: boolean;
+    fillColorStops?: Record<string, string>;
 }
 export type SmartCircle = SmartComponent<SmartCircleProps>;

package/dist/@types/config-provider/theme-vars.d.ts

@@ -1,4 +1,4 @@
-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' | 'popoverBackgroundColor' | 'popoverBoxShadow' | 'popoverPadding' | 'popoverBorderRadius';
+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';
 type IconThemeVars = 'iconColor';
 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';
 type BottomSheetThemeVars = 'bottomSheetWidth' | 'bottomSheetMinHeight' | 'bottomSheetMaxHeight' | 'bottomSheetPadding' | 'bottomSheetIconMargin' | 'bottomSheetHeaderHeight' | 'bottomSheetHeaderColor' | 'bottomSheetHeaderFontSize' | 'bottomSheetHeaderFontWeight' | 'bottomSheetFontColor';
@@ -42,8 +42,9 @@ type IndexBarThemeVars = 'indexBarIndexFontSize' | 'indexBarIndexLineHeight';
 type SkeletonThemeVars = 'skeletonPadding' | 'skeletonRowHeight' | 'skeletonRowBackgroundColor' | 'skeletonRowMarginTop' | 'skeletonAvatarBackgroundColor' | 'skeletonAnimationDuration';
 type CascaderThemeVars = 'cascaderHeaderHeight' | 'cascaderHeaderPadding' | 'cascaderTitleFontSize' | 'cascaderTitleLineHeight' | 'cascaderCloseIconSize' | 'cascaderCloseIconColor' | 'cascaderSelectedIconSize' | 'cascaderTabsHeight' | 'cascaderActiveColor' | 'cascaderOptionsHeight' | 'cascaderOptionDisabledColor' | 'cascaderTabColor' | 'cascaderUnselectedTabColor' | 'cascaderTabInactiveColor' | 'cascaderTextColor';
 type CustomKeyboardThemeVars = 'customKeyboardBgColor' | 'customKeyboardTextColor' | 'customKeyboardBorderColor' | 'customKeyboardPlaceholderColor' | 'customKeyboardPopupBgColor' | 'customKeyboardPopupItemColor' | 'customKeyboardPopupConfirmColor' | 'customKeyboardPopupTextColor' | 'customKeyboardPopupHoverColor';
+type PopoverThemeVars = 'popoverBackgroundColor' | 'popoverBoxShadow' | 'popoverPadding' | 'popoverBorderRadius';
 /**
  * 主题变量
  */
-export type ThemeVars = Record<CommonThemeVars | IconThemeVars | ActionSheetThemeVars | BottomSheetThemeVars | ButtonThemeVars | CalendarThemeVars | CellThemeVars | CheckboxThemeVars | CircleThemeVars | CollapseThemeVars | CountDownThemeVars | DialogThemeVars | FieldThemeVars | ImageThemeVars | LoadingThemeVars | NavBarThemeVars | NoticeBarThemeVars | NotifyThemeVars | OverlayThemeVars | PickerThemeVars | PopupThemeVars | ProgressThemeVars | RadioThemeVars | RateThemeVars | SwitchThemeVars | SearchThemeVars | SidebarThemeVars | SliderThemeVars | StepperThemeVars | StepsThemeVars | TabbarThemeVars | TabThemeVars | TagThemeVars | ToastThemeVars | GridThemeVars | DividerThemeVars | EmptyThemeVars | TreeSelectThemeVars | DropdownMenuThemeVars | IndexAnchorThemeVars | IndexBarThemeVars | SkeletonThemeVars | CascaderThemeVars | CustomKeyboardThemeVars, string>;
+export type ThemeVars = Record<CommonThemeVars | IconThemeVars | ActionSheetThemeVars | BottomSheetThemeVars | ButtonThemeVars | CalendarThemeVars | CellThemeVars | CheckboxThemeVars | CircleThemeVars | CollapseThemeVars | CountDownThemeVars | DialogThemeVars | FieldThemeVars | ImageThemeVars | LoadingThemeVars | NavBarThemeVars | NoticeBarThemeVars | NotifyThemeVars | OverlayThemeVars | PickerThemeVars | PopupThemeVars | ProgressThemeVars | RadioThemeVars | RateThemeVars | SwitchThemeVars | SearchThemeVars | SidebarThemeVars | SliderThemeVars | StepperThemeVars | StepsThemeVars | TabbarThemeVars | TabThemeVars | TagThemeVars | ToastThemeVars | GridThemeVars | DividerThemeVars | EmptyThemeVars | TreeSelectThemeVars | DropdownMenuThemeVars | IndexAnchorThemeVars | IndexBarThemeVars | SkeletonThemeVars | CascaderThemeVars | CustomKeyboardThemeVars | PopoverThemeVars, string>;
 export {};

package/dist/@types/index.d.ts

@@ -60,3 +60,4 @@ export { SmartTreeSelect, SmartTreeSelectEvents, SmartTreeSelectExternalClassNam
 export { SmartCascader, SmartCascaderProps } from './cascader';
 export { SmartBattery, SmartBatteryProps } from './battery';
 export { SmartCustomKeyboard, SmartCustomKeyboardProps, SmartCustomKeyboardEvents, } from './custom-keyboard';
+export { SmartPopover, SmartPopoverEvents, SmartPopoverExternalClassName, SmartPopoverProps, } from './popover';

package/dist/@types/popover/index.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { SmartBaseExternalClassName, SmartComponent, SmartEventHandler } from '../base';
+import { SmartTransitionEvents } from '../transition';
+export interface SmartPopoverProps {
+    placement?: 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom';
+    show?: boolean;
+    customStyle?: React.CSSProperties;
+    zIndex?: number;
+    duration?: number;
+}
+export interface SmartPopoverEvents extends SmartTransitionEvents {
+    onClose?: SmartEventHandler;
+    onShowChange?: SmartEventHandler;
+}
+export type SmartPopoverExternalClassName = SmartBaseExternalClassName;
+export type SmartPopover = SmartComponent<SmartPopoverProps, SmartPopoverEvents, SmartPopoverExternalClassName>;

package/dist/@types/popover/index.js

@@ -0,0 +1 @@
+export {};

package/dist/circle/index.js

@@ -5,13 +5,13 @@ function Circle(props) {
     // @ts-ignore 属性修改，breaking change 向下兼容
     , Object.assign({ 
         // @ts-ignore 属性修改，breaking change 向下兼容
-        size: props.size, 
+        size: props.size || '100px', 
         // @ts-ignore 属性修改，breaking change 向下兼容
-        trackWidth: props['stroke-width'], 
+        trackWidth: props['stroke-width'] || 10, 
         // @ts-ignore 属性修改，breaking change 向下兼容
-        trackColor: props['layer-color'], 
+        trackColor: props['layer-color'] || '#d3d3d3', 
         // @ts-ignore 属性修改，breaking change 向下兼容
-        fillColor: props.color, 
+        fillColor: props.color || '#007AFF', 
         // @ts-ignore 属性修改，breaking change 向下兼容
         percent: props.value, customStyle: props.style }, props)));
 }

package/dist/index.d.ts

@@ -59,3 +59,4 @@ export { SmartTreeSelect, SmartTreeSelectEvents, SmartTreeSelectExternalClassNam
 export { SmartCascader, SmartCascaderProps, Cascader } from './cascader';
 export { SmartBattery, SmartBatteryProps, Battery } from './battery';
 export { SmartCustomKeyboard, SmartCustomKeyboardProps, SmartCustomKeyboardEvents, CustomKeyboard, } from './custom-keyboard';
+export { Popover, SmartPopoverEvents, SmartPopoverExternalClassName, SmartPopoverProps, } from './popover';

package/dist/index.js

@@ -58,3 +58,4 @@ export { TreeSelect, } from './tree-select';
 export { Cascader } from './cascader';
 export { Battery } from './battery';
 export { CustomKeyboard, } from './custom-keyboard';
+export { Popover, } from './popover';

package/dist/popover/Popover.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (props: Record<string, any>) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/popover/Popover.js

@@ -0,0 +1,4 @@
+// @ts-ignore
+import Popover from '@tuya-miniapp/smart-ui/dist/popover/index';
+import { withReactProps } from '../common/withReactProps';
+export default withReactProps(Popover);

package/dist/popover/PropTypes.d.ts

@@ -0,0 +1,2 @@
+import { SmartPopover, SmartPopoverProps, SmartPopoverEvents, SmartPopoverExternalClassName } from '../@types';
+export { SmartPopover, SmartPopoverProps, SmartPopoverEvents, SmartPopoverExternalClassName };

package/dist/popover/PropTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/popover/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { SmartPopover } from './PropTypes';
+declare const Popover: import("react").FC<SmartPopover>;
+export { Popover };
+export { SmartPopover, SmartPopoverEvents, SmartPopoverExternalClassName, SmartPopoverProps, } from './PropTypes';

package/dist/popover/index.js

@@ -0,0 +1,3 @@
+import _Popover from './Popover';
+const Popover = _Popover;
+export { Popover };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/smart-ui",
-  "version": "2.2.2-beta-6",
+  "version": "2.2.2-beta-7",
   "description": "轻量、可靠的智能小程序 UI 组件库",
   "scripts": {
     "syncMiniappData": "node ./build/syncMiniappData.js",
@@ -10,7 +10,8 @@
   },
   "main": "dist/index.js",
   "files": [
-    "dist"
+    "dist",
+    "README-zh_CN.md"
   ],
   "publishConfig": {
     "access": "public",
@@ -35,7 +36,7 @@
   },
   "dependencies": {
     "@ray-js/components-ty-slider": "^0.3.1",
-    "@tuya-miniapp/smart-ui": "2.3.0-beta-4",
+    "@tuya-miniapp/smart-ui": "2.3.0-beta-9",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {