@ray-js/smart-ui 2.2.2-beta-5 → 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

@@ -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-5",
+  "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": {