vite-plugin-taro-runtime 0.7.0 → 0.7.1-beta.2

package/dist/components/types/Progress.d.ts

@@ -0,0 +1,105 @@
+import { ComponentType } from 'react'
+import { StandardProps, CommonEventFunction } from './common'
+interface ProgressProps extends StandardProps {
+  /** 百分比 0~100
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf
+   */
+  percent?: number
+  /** 在进度条右侧显示百分比
+   * @default false
+   * @supported weapp, alipay, swan, qq, jd, h5, rn, harmony_hybrid, ascf
+   */
+  showInfo?: boolean
+  /** 圆角大小
+   * @default 0
+   * @supported weapp, swan, qq, jd, h5, harmony_hybrid, ascf
+   */
+  borderRadius?: number | string
+  /** 右侧百分比字体大小
+   * @default 16
+   * @supported weapp, swan, qq, jd, h5, harmony_hybrid, ascf
+   */
+  fontSize?: number | string
+  /** 进度条线的宽度
+   * @default 6
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf
+   */
+  strokeWidth?: number | string
+  /** 进度条颜色 (请使用 activeColor)
+   * @default "#09BB07"
+   * @supported weapp, swan, qq, jd, h5, harmony_hybrid, ascf
+   */
+  color?: string
+  /** 已选择的进度条的颜色
+   * @default "#09BB07"
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf
+   */
+  activeColor?: string
+  /** 未选择的进度条的颜色
+   * @default "#EBEBEB"
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf
+   */
+  backgroundColor?: string
+  /** 进度条从左往右的动画
+   * @default false
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf
+   */
+  active?: boolean
+  /** backwards: 动画从头播
+   *
+   * forwards: 动画从上次结束点接着播
+   * @default backwards
+   * @supported weapp, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf
+   */
+  activeMode?: 'backwards' | 'forwards'
+  /** 进度增加 1% 所需毫秒数
+   * @default 30
+   * @supported weapp, swan, tt, jd, h5, harmony_hybrid, ascf
+   */
+  duration?: number
+  /** 无障碍访问，（属性）元素的额外描述
+   * @supported qq
+   */
+  ariaLabel?: string
+  /** 动画完成事件
+   * @supported weapp, tt, qq, jd, h5, harmony_hybrid, ascf
+   */
+  onActiveEnd?: CommonEventFunction
+}
+/** 进度条。组件属性的长度单位默认为 px
+ * @classification base
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf
+ * @example_react
+ * ```tsx
+ * export default class PageView extends Component {
+ *   constructor() {
+ *     super(...arguments)
+ *   }
+ *
+ *   render() {
+ *     return (
+ *       <View className='components-page'>
+ *         <Progress percent={20} showInfo strokeWidth={2} />
+ *         <Progress percent={40} strokeWidth={2} active />
+ *         <Progress percent={60}  strokeWidth={2} active />
+ *         <Progress percent={80}  strokeWidth={2} active activeColor='blue' />
+ *       </View>
+ *     )
+ *   }
+ * }
+ * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="components-page">
+ *     <progress percent="20" stroke-width="2" :show-info="true" />
+ *     <progress percent="40" stroke-width="2" :active="true" />
+ *     <progress percent="60" stroke-width="2" :active="true" />
+ *     <progress percent="80" stroke-width="2" :active="true" active-color="blue" />
+ *   </view>
+ * </template>
+ * ```
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/progress.html
+ */
+declare const Progress: ComponentType<ProgressProps>
+export { Progress, ProgressProps }

package/dist/components/types/PullToRefresh.d.ts

@@ -0,0 +1,26 @@
+import { ComponentType } from 'react'
+
+interface Indicator {
+  activate?: React.ReactNode
+  deactivate?: React.ReactNode
+  release?: React.ReactNode
+  finish?: React.ReactNode
+}
+
+interface PullToRefreshProps {
+  refreshing?: boolean
+  distanceToRefresh: number
+  onRefresh: () => void
+  indicator: Indicator
+  prefixCls?: string
+  className?: string
+  style?: React.CSSProperties
+  damping: number
+}
+
+/** 下拉组件
+ * @ignore
+ */
+declare const PullToRefresh: ComponentType<PullToRefreshProps>
+
+export { PullToRefresh, PullToRefreshProps }

package/dist/components/types/Radio.d.ts

@@ -0,0 +1,187 @@
+import { ComponentType } from 'react'
+import { StandardProps, CommonEventFunction, FormItemProps } from './common'
+interface RadioProps extends StandardProps {
+  /** `<Radio/>` 标识。当该`<Radio/>` 选中时，`<RadioGroup/>`的 change 事件会携带`<Radio/>`的 value
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf
+   */
+  value?: string
+  /** 当前是否选中
+   * @default false
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf
+   */
+  checked?: boolean
+  /** 是否禁用
+   * @default false
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf
+   */
+  disabled?: boolean
+  /** Radio 的颜色，同 css 的 color
+   * @default "#09BB07"
+   * @supported weapp, alipay, swan, tt, qq, jd, rn, harmony, ascf
+   */
+  color?: string
+  /**
+   * Radio 的名字
+   * @supported h5, harmony, harmony_hybrid
+   */
+  name?: string
+  /** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
+   * @supported h5, harmony_hybrid
+   */
+  nativeProps?: Record<string, unknown>
+  /** 无障碍访问，（属性）元素的额外描述
+   * @supported qq
+   */
+  ariaLabel?: string
+  /** <radio-group/> 中的选中项发生变化时触发 change 事件
+   * @supported h5, rn, harmony, harmony_hybrid
+   */
+  onChange?: CommonEventFunction<{
+    value?: string
+  }>
+}
+/** 单选项目
+ * @classification forms
+ * @supported weapp, alipay, swan, tt, qq, h5, rn, harmony, harmony_hybrid, ascf
+ * @example_react
+ * ```tsx
+ * export default class PageRadio extends Component {
+ *   state = {
+ *     list: [
+ *       {
+ *         value: '美国',
+ *         text: '美国',
+ *         checked: false
+ *       },
+ *       {
+ *         value: '中国',
+ *         text: '中国',
+ *         checked: true
+ *       },
+ *       {
+ *         value: '巴西',
+ *         text: '巴西',
+ *         checked: false
+ *       },
+ *       {
+ *         value: '日本',
+ *         text: '日本',
+ *         checked: false
+ *       },
+ *       {
+ *         value: '英国',
+ *         text: '英国',
+ *         checked: false
+ *       },
+ *       {
+ *         value: '法国',
+ *         text: '法国',
+ *         checked: false
+ *       }
+ *     ]
+ *   }
+ *   render () {
+ *     return (
+ *       <View className='container'>
+ *         <Head title='Radio' />
+ *         <View className='page-body'>
+ *           <View className='page-section'>
+ *             <Text>默认样式</Text>
+ *             <Radio value='选中' checked>选中</Radio>
+ *             <Radio style='margin-left: 20rpx' value='未选中'>未选中</Radio>
+ *           </View>
+ *           <View className='page-section'>
+ *             <Text>推荐展示样式</Text>
+ *             <View className='radio-list'>
+ *               <RadioGroup>
+ *                 {this.state.list.map((item, i) => {
+ *                   return (
+ *                     <Label className='radio-list__label' for={i} key={i}>
+ *                       <Radio className='radio-list__radio' value={item.value} checked={item.checked}>{item.text}</Radio>
+ *                     </Label>
+ *                   )
+ *                 })}
+ *               </RadioGroup>
+ *             </View>
+ *           </View>
+ *         </View>
+ *       </View>
+ *     )
+ *   }
+ * }
+ * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="container">
+ *     <view class="page-section">
+ *       <text>默认样式</text>
+ *       <radio value="选中" :checked="true">选中</radio>
+ *       <radio style="margin-left: 20rpx;" value="未选中">未选中</radio>
+ *     </view>
+ *     <view class="page-section">
+ *       <text>推荐展示样式(Taro 团队成员):</text>
+ *         <radio-group `@change="onChange">
+ *           <label v-for="item in list" class="checkbox-list__label">
+ *             <radio class="checkbox-list__checkbox" :value="item.value" :checked="item.checked">{{ item.text }}</radio>
+ *           </label>
+ *         </radio-group>
+ *     </view>
+ *   </view>
+ * </template>
+ *
+ * <script>
+ * export default {
+ *   data() {
+ *     return {
+ *       list: [
+ *         {
+ *           value: 'yuche',
+ *           text: 'yuche',
+ *           checked: false
+ *         },
+ *         {
+ *           value: 'cjj',
+ *           text: 'cjj',
+ *           checked: false
+ *         },
+ *         {
+ *           value: 'xiexiaoli',
+ *           text: 'xiexiaoli',
+ *           checked: false
+ *         },
+ *         {
+ *           value: 'honly',
+ *           text: 'honly',
+ *           checked: false
+ *         },
+ *         {
+ *           value: 'cs',
+ *           text: 'cs',
+ *           checked: false
+ *         },
+ *         {
+ *           value: 'zhutianjian',
+ *           text: 'zhutianjian',
+ *           checked: false
+ *         },
+ *         {
+ *           value: '隔壁老李',
+ *           text: '隔壁老李',
+ *           checked: true
+ *         }
+ *       ]
+ *     }
+ *   },
+ *   methods: {
+ *     onChange: function(e) {
+ *       console.log(e.detail.value)
+ *     }
+ *   }
+ * }
+ * </script>
+ * ```
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/radio.html
+ */
+declare const Radio: ComponentType<RadioProps>
+export { Radio, RadioProps }

package/dist/components/types/RadioGroup.d.ts

@@ -0,0 +1,24 @@
+import { ComponentType } from 'react'
+import { StandardProps, CommonEventFunction, FormItemProps } from './common'
+interface RadioGroupProps extends StandardProps, FormItemProps {
+  /** 组件名字，用于表单提交获取数据。
+   * @supported alipay, tt, harmony
+   */
+  name?: string
+  /** RadioGroup 中选中项发生改变时触发 change 事件，detail = {value:[选中的radio的value的数组]}
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid, ascf
+   */
+  onChange?: CommonEventFunction
+}
+declare namespace RadioGroupProps {
+  interface onChangeEventDetail {
+    value: string[]
+  }
+}
+/** 单项选择器，内部由多个 Radio 组成。
+ * @classification forms
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/radio-group.html
+ */
+declare const RadioGroup: ComponentType<RadioGroupProps>
+export { RadioGroup, RadioGroupProps }

package/dist/components/types/RichText.d.ts

@@ -0,0 +1,166 @@
+import { ComponentType } from 'react'
+import { CommonEventFunction, StandardProps } from './common'
+interface RichTextProps extends StandardProps {
+  /** 文本是否可选，该属性会使节点显示为 block
+   * @default false
+   * @supported weapp, jd, h5, harmony_hybrid, ascf
+   */
+  userSelect?: boolean
+  /** 节点列表/ HTML String
+   * @supported weapp, jd, alipay, swan, tt, qq, h5, rn, harmony, harmony_hybrid, ascf
+   */
+  nodes?: Nodes
+  /** 显示连续空格
+   * @supported weapp, jd, alipay, tt, qq, h5, rn, harmony_hybrid, ascf
+   */
+  space?: keyof RichTextProps.TSpace
+  /** 富文本是否可以长按选中，可用于复制，粘贴，长按搜索等场景
+   * @default false（基础库 3.150.1 以前版本）true（基础库 3.150.1 及以后版本）
+   * @supported swan, h5, harmony_hybrid
+   */
+  selectable?: boolean
+  /** 阻止长按图片时弹起默认菜单（将该属性设置为image-menu-prevent或image-menu-prevent="true"），只在初始化时有效，不能动态变更；若不想阻止弹起默认菜单，则不需要设置此属性
+   * @default false
+   * @supported swan
+   */
+  imageMenuPrevent?: string
+  /** 富文本中的图片是否可点击预览。在不设置的情况下，若 rich-text 未监听点击事件，则默认开启。未显示设置 preview 时会进行点击默认预览判断，建议显示设置 preview
+   * @supported swan
+   */
+  preview?: string
+  /** 触摸。
+   * @supported alipay
+   */
+  onTap?: CommonEventFunction
+  /** 触摸动作开始。
+   * @supported alipay
+   */
+  onTouchstart?: CommonEventFunction
+  /** 触摸移动事件。
+   * @supported alipay
+   */
+  onTouchmove?: CommonEventFunction
+  /** 触摸动作被打断。
+   * @supported alipay
+   */
+  onTouchcancel?: CommonEventFunction
+  /** 触摸动作结束。
+   * @supported alipay
+   */
+  onTouchend?: CommonEventFunction
+  /** 触摸后，超过 500ms 再离开。
+   * @supported alipay
+   */
+  onLongtap?: CommonEventFunction
+  /** 布局兼容模式
+   * @supported weapp
+   * @default default
+   */
+  mode?: 'default' | 'compat' | 'aggressive' | 'inline-block' | 'web'
+}
+/** 节点类型
+ * > 现支持两种节点，通过type来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的HTML节点 元素节点：type = node*
+ */
+type Nodes = Array<RichTextProps.Text | RichTextProps.HTMLElement> | string
+declare namespace RichTextProps {
+  /** space 的合法值 */
+  interface TSpace {
+    /** 中文字符空格一半大小 */
+    ensp
+    /** 中文字符空格大小 */
+    emsp
+    /** 根据字体设置的空格大小 */
+    nbsp
+  }
+  /** 文本节点 */
+  interface Text {
+    /** 文本类型 */
+    type: 'text'
+    /** 文本字符串
+     * @remarks 支持 entities
+     * @default ""
+     */
+    text: string
+  }
+  /** 元素节点，默认为元素节点
+   * 全局支持class和style属性，不支持 id 属性。
+   */
+  interface HTMLElement {
+    /** HTML 类型 */
+    type?: 'node'
+    /** 标签名
+     * @remarks 支持部分受信任的 HTML 节点
+     */
+    name: string
+    /** 属性
+     * @remarks 支持部分受信任的属性，遵循 Pascal 命名法
+     */
+    attrs?: Object
+    /** 子节点列表
+     * @remarks 结构和 nodes 一致
+     */
+    children?: Nodes
+  }
+}
+/** 富文本
+ * @classification base
+ * @supported weapp, jd, swan, alipay, tt, h5, rn, harmony, harmony_hybrid, ascf
+ * @example_react
+ * ```tsx
+ * class App extends Components {
+ *   state = {
+ *     nodes: [{
+ *       name: 'div',
+ *       attrs: {
+ *         class: 'div_class',
+ *         style: 'line-height: 60px; color: red;'
+ *       },
+ *       children: [{
+ *         type: 'text',
+ *         text: 'Hello World!'
+ *       }]
+ *     }]
+ *   }
+ *   render () {
+ *     return (
+ *       <RichText nodes={this.state.nodes} />
+ *     )
+ *   }
+ * }
+ * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="components-page">
+ *     <rich-text :nodes="nodes"></rich-text>
+ *   </view>
+ * </template>
+ *
+ * <script>
+ * export default {
+ *   name: 'Index',
+ *   data() {
+ *     return {
+ *       nodes: [{
+ *         name: 'div',
+ *         attrs: {
+ *           class: 'div_class',
+ *           style: 'line-height: 60px; color: red;'
+ *         },
+ *         children: [{
+ *           type: 'text',
+ *           text: 'Hello World!'
+ *         }]
+ *       }]
+ *     }
+ *   },
+ *   onReady () {
+ *     console.log('onReady')
+ *   }
+ * }
+ * </script>
+ * ```
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
+ */
+declare const RichText: ComponentType<RichTextProps>
+export { RichText, RichTextProps }

package/dist/components/types/RootPortal.d.ts

@@ -0,0 +1,40 @@
+import { ComponentType } from 'react'
+import { StandardProps } from './common'
+interface RootPortalProps extends StandardProps {
+  /**
+   * 是否从页面中脱离出来
+   * @supported weapp, alipay
+   * @default true
+   */
+  enable?: boolean
+}
+/** root-portal
+ * 使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等。
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/root-portal.html
+ * @classification viewContainer
+ * @supported weapp
+ * @example_react
+ * ```tsx
+ * import { useState } from 'react'
+ * import { RootPortal, View, Button } from 'vite-plugin-taro-runtime/components'
+ *
+ * export default function RootPortalExample {
+ *   const [show, setShow] = useState(false)
+ *   const toggle = () => {
+ *     setShow(!show)
+ *   }
+ *   render () {
+ *     return (
+ *       <View>
+ *         <Button onClick={toggle}>显示root-portal</Button>
+ *         {
+ *           show && (<RootPortal><View>content</View></RootPortal>)
+ *         }
+ *       </View>
+ *     )
+ *   }
+ * }
+ * ```
+ */
+declare const RootPortal: ComponentType<RootPortalProps>
+export { RootPortal, RootPortalProps }

package/dist/components/types/RtcRoom.d.ts

@@ -0,0 +1,88 @@
+import { ComponentType } from 'react'
+import { StandardProps } from './common'
+interface RtcRoomProps extends StandardProps {
+  /** rtc-room 组件的唯一标识符
+   * @supported swan
+   */
+  id?: string
+  /** 是否开启摄像头
+   * @supported swan
+   * @default true
+   */
+  enableCamera?: boolean
+  /** 是否开启摄像头自动对焦
+   * @supported swan
+   * @default true
+   */
+  enableAutoFocus?: boolean
+  /** 是否支持双手滑动调整摄像头聚焦
+   * @supported swan
+   * @default false
+   */
+  enableZoom?: boolean
+  /** 设置前置还是后置摄像头，有效值：front、back
+   * @supported swan
+   * @default "front"
+   */
+  devicePosition?: 'front' | 'back'
+  /** 是否开启麦克风
+   * @supported swan
+   * @default true
+   */
+  enableMic?: boolean
+  /** 是否开启音频自动增益
+   * @supported swan
+   * @default false
+   */
+  enableAgc?: boolean
+  /** 是否开启音频噪声抑制
+   * @supported swan
+   * @default false
+   */
+  enableAns?: boolean
+  /** 最大码率
+   * @supported swan
+   * @default 900
+   */
+  bitrate?: number
+  /** 视频分辨率宽
+   * @supported swan
+   * @default 360
+   */
+  videoWidth?: number
+  /** 视频分辨率高
+   * @supported swan
+   * @default 640
+   */
+  videoHeight?: number
+  /** 设置远端看到的画面的镜像效果，该属性的变化不会影响到本地画面，仅影响远端看到的画面效果
+   * @supported swan
+   * @default false
+   */
+  enableRemoteMirror?: boolean
+  /** 设置本地摄像头预览画面的镜像效果，有效值：auto、enable、disable
+   * @supported swan
+   * @default "auto"
+   */
+  localMirror?: 'auto' | 'enable' | 'disable'
+  /** 设置声音输出方式，有效值：speaker、ear
+   * @supported swan
+   * @default "speaker"
+   */
+  soundMode?: 'speaker' | 'ear'
+  /** 房间状态变化事件，参考下方状态码，detail = { code, msg, userInfo }
+   * @supported swan
+   */
+  onStateChange?: CommonEventFunction
+  /** 错误事件。参考下方错误码，detail = { errMsg, errCode }
+   * @supported swan
+   */
+  onError?: CommonEventFunction
+}
+/** 实时音视频通话房间
+ * @classification media
+ * @supported swan
+ * @see https://smartprogram.baidu.com/docs/develop/component/media_rtc-room/
+ */
+declare const RtcRoom: ComponentType<RtcRoomProps>
+export { RtcRoom, RtcRoomProps }

package/dist/components/types/RtcRoomItem.d.ts

@@ -0,0 +1,23 @@
+import { ComponentType } from 'react'
+import { StandardProps } from './common'
+interface RtcRoomItemProps extends StandardProps {
+  /** rtc-room-item 组件的唯一标识符
+   * @supported swan
+   */
+  id?: string
+  /** 指定 item 展示本地 / 远端画面，有效值：local、remote ，不可动态变更
+   * @supported swan
+   */
+  type?: string
+  /** item 展示画面的用户 id
+   * @supported swan
+   */
+  userId?: number
+}
+/** 实时音视频通话画面
+ * @classification media
+ * @supported swan
+ * @see https://smartprogram.baidu.com/docs/develop/component/media_rtc-room-item/
+ */
+declare const RtcRoomItem: ComponentType<RtcRoomItemProps>
+export { RtcRoomItem, RtcRoomItemProps }

package/dist/components/types/Script.d.ts

@@ -0,0 +1,37 @@
+import { ComponentType } from 'react'
+
+import { StandardProps } from './common'
+
+interface ScriptProps extends StandardProps {
+  /** xs 文件的相对路径
+   * @supported weapp, alipay, swan, tt, qq, jd
+   */
+  src: string
+  /** xs 模块名
+   * @supported weapp, alipay, swan, tt, qq, jd
+   */
+  module: string
+}
+
+/** script 类似微信小程序的 wxs 标签，支持引用各种小程序的 xs 文件
+ * 只能在 CompileMode 中使用
+ * @classification viewContainer
+ * @supported weapp, swan, alipay, tt, jd, qq
+ * @example_react
+ * ```tsx
+ * import { Component } from 'react'
+ * import { View, Script } from 'vite-plugin-taro-runtime/components'
+ *
+ * export function Index () {
+ *   return (
+ *     <View compileMode>
+ *       <Script src="./logic.wxs" module="logic"></Script>
+ *       <Text>Hello, {logic.name}!</Text>
+ *     </View>
+ *   )
+ * }
+ * ```
+ */
+declare const Script: ComponentType<ScriptProps>
+
+export { Script, ScriptProps }