@ray-js/smart-ui 1.0.0-beta.1 → 1.0.1-beta-1

package/README.md

@@ -1,3 +1,56 @@
+English | [简体中文](./README-zh_CN.md)
+
 # @ray-js/smart-ui
 
-`@ray-js/smart-ui` 是 `@tuya-miniapp/smart-ui` 的 `React` 规范适配中间层，提供了一整套基于 `Ray` 框架且符合智能小程序移动端设计规范的 `React` 组件，且内置了完善的 TS 类型。
+## Introduction
+
+`@ray-js/smart-ui` is a React component library based on the `Ray` framework and `@tuya-miniapp/smart-ui`, aimed at providing lightweight and reliable UI components that adhere to the design specifications for smart mini programs on mobile devices. By combining the `Ray` specification adaptation layer and built-in comprehensive TypeScript types, we offer a complete set of React components suitable for smart mini programs, allowing developers to quickly build mobile applications that meet design standards.
+
+## Preview
+
+Scan the QR code below with your smart mini program to experience the component library demo.
+
+<img src="./explorer.png" width="200" height="200" style="margin-top: 10px;" >
+
+## Before Getting Started
+
+Before using Smart UI, make sure you have already studied the [Ray Development Overview](https://developer.tuya.com/en/miniapp/develop/ray/guide/overview) and [Ray Component Introduction](https://developer.tuya.com/en/miniapp/develop/ray/framework/component) from the smart mini program official documentation.
+
+## Installation
+
+```bash
+# Install via yarn (recommended)
+yarn add @ray-js/smart-ui
+
+# Install via npm
+npm i @ray-js/smart-ui
+```
+
+## Using Components
+
+Using the button component as an example:
+
+```jsx
+import { Button } from '@ray-js/smart-ui';
+
+export default function Demo() {
+  return <Button type="info">Info Button</Button>;
+}
+```
+
+## Preview in Developer Tools
+
+```bash
+# Install project dependencies
+$ yarn
+```
+
+Open [Tuya MiniApp Tools](https://developer.tuya.com/cn/miniapp/devtools/tools), add the `apps/smart-ui-demo` directory, and you can preview the demo.
+
+## Base Library Version
+
+@ray-js/smart-ui provides stable support starting from the smart mini program base library version `2.19.0` and `@ray-js/ray@^1.5.1`.
+
+## Open Source License
+
+This project is licensed under the [MIT](https://en.wikipedia.org/wiki/MIT_License) license. Feel free to enjoy and contribute to the open source community.

package/dist/@types/action-sheet/index.d.ts

@@ -0,0 +1,115 @@
+import { VantOpenTypeCamelCaseProps, VantComponent, VantEventHandler } from '../base';
+import { VantTransitionEvents } from '../transition';
+export interface VantAction extends Omit<VantOpenTypeCamelCaseProps, 'businessId'> {
+    /**
+     * 标题
+     */
+    name?: string;
+    /**
+     * 二级标题
+     */
+    subname?: string;
+    /**
+     * 选项文字颜色
+     */
+    color?: string;
+    /**
+     * 是否为加载状态
+     */
+    loading?: boolean;
+    /**
+     * 是否为选中状态
+     */
+    checked?: boolean;
+    /**
+     * 是否为禁用状态
+     */
+    disabled?: boolean;
+    /**
+     * 为对应列添加额外的 `class` 类名
+     */
+    className?: string;
+}
+export interface VantActionSheetProps {
+    /**
+     * 是否显示动作面板
+     */
+    show?: boolean;
+    /**
+     * 菜单选项
+     *
+     * @default []
+     */
+    actions?: VantAction[];
+    /**
+     * 标题
+     */
+    title?: string;
+    /**
+     * 选项上方的描述信息
+     */
+    description?: string;
+    /**
+     * `z-index` 层级
+     *
+     * @default 100
+     */
+    zIndex?: number;
+    /**
+     * 取消按钮文字
+     */
+    cancelText?: string;
+    /**
+     * 确认按钮文字
+     */
+    confirmText?: string;
+    /**
+     * 是否显示遮罩层
+     */
+    overlay?: boolean;
+    /**
+     * 是否显示圆角
+     *
+     * @default true
+     */
+    round?: boolean;
+    /**
+     * 是否在点击选项后关闭
+     *
+     * @default true
+     */
+    closeOnClickAction?: boolean;
+    /**
+     * 点击遮罩是否关闭菜单
+     */
+    closeOnClickOverlay?: boolean;
+    /**
+     * 是否为 `iPhoneX` 留出底部安全距离
+     *
+     * @default true
+     */
+    safeAreaInsetBottom?: boolean;
+}
+export interface VantActionSheetEvents extends VantTransitionEvents {
+    /**
+     * 选中选项时触发，禁用或加载状态下不会触发
+     */
+    onSelect?: VantEventHandler<VantAction>;
+    /**
+     * 关闭时触发
+     */
+    onClose?: VantEventHandler;
+    /**
+     * 取消按钮点击时触发
+     */
+    onCancel?: VantEventHandler;
+    /**
+     * 确认按钮点击时触发
+     */
+    onConfirm?: VantEventHandler;
+    /**
+     * 点击遮罩层时触发
+     */
+    onClickOverlay?: VantEventHandler;
+}
+export type VantActionSheet = VantComponent<VantActionSheetProps, VantActionSheetEvents>;

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

@@ -0,0 +1,120 @@
+import { VantComponent, VantEventHandler } from '../base';
+export interface VantAreaList {
+    province_list: Record<number, string>;
+    city_list: Record<number, string>;
+    county_list: Record<number, string>;
+}
+export interface VantAreaProps {
+    /**
+     * 当前选中的省市区`code`
+     */
+    value?: string;
+    /**
+     * 顶部栏标题
+     */
+    title?: string;
+    /**
+     * 省市区数据
+     */
+    'area-list'?: VantAreaList;
+    /**
+     * 省市区显示列数，3-省市区，2-省市，1-省
+     *
+     * @default 3
+     */
+    'columns-num'?: string | number;
+    /**
+     * 列占位提示文字
+     *
+     * @default []
+     */
+    'columns-placeholder'?: string[];
+    /**
+     * 是否显示加载状态
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * 选项高度
+     *
+     * @default 44
+     */
+    'item-height'?: number;
+    /**
+     * 可见的选项个数
+     *
+     * @default 6
+     */
+    'visible-item-count'?: number;
+    /**
+     * 确认按钮文字
+     *
+     * @default '确认'
+     */
+    'confirm-button-text'?: string;
+    /**
+     * 取消按钮文字
+     *
+     * @default '取消'
+     */
+    'cancel-button-text'?: string;
+    /**
+     * 是否显示顶部栏
+     *
+     * @default true
+     *
+     * @since `v1.10.3`
+     */
+    'show-toolbar'?: boolean;
+}
+/**
+ * 选中列数据
+ */
+export interface VantAreaColumn {
+    /**
+     * 被选中的地区编码
+     */
+    code: string;
+    /**
+     * 被选中的地区名称
+     */
+    name: string;
+}
+/**
+ * 基础事件详情
+ */
+export interface VantAreaBaseEventDetail {
+    /**
+     * 每个数据对应一列选项中被选中项的序号
+     */
+    index: number[];
+    /**
+     *  每个数据对应一列选项中被选中的数据
+     */
+    values: VantAreaColumn[];
+}
+/**
+ * `bind:change`事件详情
+ */
+export interface VantAreaChangeEventDetail extends VantAreaBaseEventDetail {
+    /**
+     * Picker 实例
+     */
+    picker: Record<string, any>;
+}
+export interface VantAreaEvents {
+    /**
+     * 点击右上方完成按钮
+     */
+    'bind:confirm'?: VantEventHandler<VantAreaBaseEventDetail>;
+    /**
+     * 点击取消按钮时
+     */
+    'bind:cancel'?: VantEventHandler<VantAreaBaseEventDetail>;
+    /**
+     * 选项改变时触发
+     */
+    'bind:change'?: VantEventHandler<VantAreaChangeEventDetail>;
+}
+export type VantArea = VantComponent<VantAreaProps, VantAreaEvents>;

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

@@ -0,0 +1,2 @@
+"use strict";
+exports.__esModule = true;

package/dist/@types/base/component.d.ts

@@ -0,0 +1,11 @@
+export interface ComponentBase {
+    /**
+     * 标识符
+     */
+    id?: string;
+    /**
+     * css 类名
+     */
+    className?: string;
+}
+export type VantComponent<Props = {}, Events = {}, EC = {}, Slot = {}> = ComponentBase & Props & Events & EC & Slot;

package/dist/@types/base/component.js

@@ -0,0 +1,2 @@
+"use strict";
+exports.__esModule = true;

package/dist/@types/base/events.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="miniprogram-api-typings" />
+/**
+ * 普通事件类型
+ */
+export interface VantEvent<Detail = unknown> extends WechatMiniprogram.BaseEvent {
+    detail: Detail;
+}
+/**
+ * 触摸事件类型
+ */
+export interface VantTouchEvent<Detail = unknown> extends Omit<WechatMiniprogram.TouchEvent, 'detail'>, VantEvent<Detail> {
+}
+/**
+ * 普通事件处理类型
+ */
+export type VantEventHandler<Detail = unknown> = (event: VantEvent<Detail>) => void;
+/**
+ * Touch 事件处理类型
+ */
+export type VantTouchEventHandler<Detail = unknown> = (event: VantTouchEvent<Detail>) => void;
+/**
+ * 触摸坐标详情
+ */
+export interface TouchPositionDetail {
+    x: number;
+    y: number;
+}

package/dist/@types/base/events.js

@@ -0,0 +1,2 @@
+"use strict";
+exports.__esModule = true;

package/dist/@types/base/external-class-name.d.ts

@@ -0,0 +1,12 @@
+export interface VantBaseExternalClassName {
+    /**
+     * 根节点样式类
+     */
+    customClass?: string;
+}
+export interface VantBaseLoadingExternalClassName {
+    /**
+     * 加载样式类
+     */
+    loadingClass?: string;
+}

package/dist/@types/base/external-class-name.js

@@ -0,0 +1,2 @@
+"use strict";
+exports.__esModule = true;

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

@@ -0,0 +1,4 @@
+export * from './component';
+export * from './events';
+export * from './external-class-name';
+export * from './open-type';

package/dist/{card → @types/base}/index.js

@@ -13,12 +13,8 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 exports.__esModule = true;
-exports.Card = void 0;
-var Card_1 = __importDefault(require("./Card"));
-var Card = Card_1["default"];
-exports.Card = Card;
-__exportStar(require("./PropTypes"), exports);
+__exportStar(require("./component"), exports);
+__exportStar(require("./events"), exports);
+__exportStar(require("./external-class-name"), exports);
+__exportStar(require("./open-type"), exports);

package/dist/@types/base/open-type.d.ts

@@ -0,0 +1,175 @@
+/// <reference types="miniprogram-api-typings" />
+export type WechatOpenType = 
+/**
+ * 打开客服会话，如果用户在会话中点击消息卡片后返回小程序
+ *
+ * 可以从 `bindcontact` 回调中获得具体信息
+ *
+ * [具体说明](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html)
+ *
+ * （*小程序插件中不能使用*）
+ */
+'contact'
+/**
+ * 触发用户转发
+ *
+ * 使用前建议先阅读[使用指引](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#使用指引)
+ */
+ | 'share'
+/**
+ * 获取用户手机号
+ *
+ * 可以从 `bindgetphonenumber` 回调中获取到用户信息
+ *
+ * [具体说明](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html)
+ *
+ * （*小程序插件中不能使用*）
+ */
+ | 'getPhoneNumber'
+/**
+ * 获取用户信息
+ *
+ * 可以从 `bindgetuserinfo` 回调中获取到用户信息
+ *
+ * （*小程序插件中不能使用*）
+ */
+ | 'getUserInfo'
+/**
+ * 打开 `APP`
+ *
+ * 以通过 `app-parameter` 属性设定向APP传的参数[具体说明](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html)
+ */
+ | 'launchApp'
+/**
+ * 打开授权设置页
+ */
+ | 'openSetting'
+/**
+ * 打开“意见反馈”页面
+ *
+ * 用户可提交反馈内容并上传[日志](https://developers.weixin.qq.com/miniprogram/dev/api/base/debug/wx.getLogManager.html)
+ *
+ * 开发者可以登录小程序[管理后台](https://mp.weixin.qq.com)后进入左侧菜单“客服反馈”页面获取到反馈内容
+ */
+ | 'feedback'
+/**
+ * 获取用户头像，可以从 `bindchooseavatar` 回调中获取到头像信息
+ */
+ | 'chooseAvatar';
+export interface VantOpenTypeProps {
+    /**
+     * 打开 `APP` 时，向 `APP` 传递的参数
+     *
+     * @requires `'launchApp'`
+     */
+    appParameter?: string;
+    /**
+     * 指定返回用户信息的语言
+     *
+     * @requires `'getUserInfo'`
+     *
+     * `zh_CN` 简体中文
+     *
+     * `zh_TW` 繁体中文
+     *
+     * `en` 英文
+     *
+     * @default 'en'
+     */
+    lang?: 'zh_CN' | 'zh_TW' | 'en';
+    /**
+     * 会话来源
+     *
+     * @requires `'contact'`
+     */
+    sessionFrom?: string;
+    /**
+     * 客服消息子商户 `id`
+     *
+     * @requires `'contact'`
+     */
+    businessId?: number;
+    /**
+     * 会话内消息卡片标题
+     *
+     * @requires `'contact'`
+     *
+     * @default 当前标题
+     */
+    sendMessageTitle?: string;
+    /**
+     * 会话内消息卡片点击跳转小程序路径
+     *
+     * @requires `'contact'`
+     *
+     * @default 当前分享路径
+     */
+    sendMessagePath?: string;
+    /**
+     * sendMessageImg
+     *
+     * @requires `'contact'`
+     *
+     * @default '截图'
+     */
+    sendMessageImg?: string;
+    /**
+     * 显示会话内消息卡片
+     *
+     * @requires `'contact'`
+     *
+     * @default false
+     */
+    showMessageCard?: string;
+}
+export interface VantOpenTypeCamelCaseProps {
+    appParameter?: VantOpenTypeProps['appParameter'];
+    lang?: VantOpenTypeProps['lang'];
+    sessionFrom?: VantOpenTypeProps['sessionFrom'];
+    businessId?: VantOpenTypeProps['businessId'];
+    sendMessageTitle?: VantOpenTypeProps['sendMessageTitle'];
+    sendMessagePath?: VantOpenTypeProps['sendMessagePath'];
+    sendMessageImg?: VantOpenTypeProps['sendMessageImg'];
+    showMessageCard?: VantOpenTypeProps['showMessageCard'];
+}
+export interface VantOpenTypeEvents {
+    /**
+     * 用户点击该按钮时，会返回获取到的用户信息，
+     * 从返回参数的`detail`中获取到的值同`wx.getUserInfo`
+     *
+     * @platform WeChat only
+     */
+    onGetuserinfo?: (event: WechatMiniprogram.ButtonGetUserInfo) => void;
+    /**
+     * 客服消息回调
+     *
+     * @platform WeChat only
+     */
+    onContact?: (event: WechatMiniprogram.ButtonContact) => void;
+    /**
+     * 获取用户手机号回调
+     *
+     * @platform WeChat only
+     */
+    onGetphonenumber?: (event: WechatMiniprogram.ButtonGetPhoneNumber) => void;
+    /**
+     * 当使用开放能力时，发生错误的回调
+     *
+     * @platform WeChat only
+     */
+    onError?: (event: WechatMiniprogram.ButtonError) => void;
+    /**
+     * 在打开授权设置页后回调
+     *
+     * @platform WeChat only
+     */
+    onOpensetting?: (event: WechatMiniprogram.ButtonOpenSetting) => void;
+    /**
+     * 打开 APP 成功的回调
+     *
+     * `openType="launchApp"`时有效
+     *
+     * @platform WeChat only
+     */
+    onLaunchapp?: (event: WechatMiniprogram.ButtonLaunchApp) => void;
+}

package/dist/@types/base/open-type.js

@@ -0,0 +1,2 @@
+"use strict";
+exports.__esModule = true;

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

@@ -0,0 +1,58 @@
+import { VantComponent } from '../base';
+export interface VantBatteryProps {
+    /**
+     * 横向展示还是竖向展示
+     *
+     * @default 'vertical'
+     */
+    type?: 'horizontal' | 'vertical';
+    /**
+     * 大小
+     *
+     * @default 10
+     */
+    size?: number;
+    /**
+     * 值
+     *
+     * @default 70
+     */
+    value?: number;
+    /**
+     * 进度条颜色，传入对象格式可以定义渐变色
+     *
+     * @default '#1989fa'
+     */
+    color?: string | Record<string, string>;
+    /**
+     * 电量高的颜色
+     *
+     * @default '#70CF98'
+     */
+    'high-color'?: string;
+    /**
+     * 电量中的颜色
+     *
+     * @default '#F5A623'
+     */
+    'middle-color'?: string;
+    /**
+     * 电量低的颜色
+     *
+     * @default '#FF4444'
+     */
+    'low-color'?: string;
+    /**
+     * 电量背景色
+     *
+     * @default 'rgba(0, 0, 0, .5)'
+     */
+    'background-color'?: string;
+    /**
+     * 电量颜色计算规则回调函数，返回计算后的颜色值即可
+     *
+     * @default null
+     */
+    'on-calc-color'?: () => string;
+}
+export type VantBattery = VantComponent<VantBatteryProps>;

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

@@ -0,0 +1,2 @@
+"use strict";
+exports.__esModule = true;