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

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

@@ -0,0 +1,270 @@
+import { ComponentType } from 'react'
+import { StandardProps, CommonEventFunction } from './common'
+interface ShareElementProps extends StandardProps {
+  /** 映射标记
+   * @supported weapp
+   * @deprecated 使用mapkey替换key
+   */
+  key?: string
+  /** 映射标记
+   * @supported weapp
+   * @unique
+   */
+  mapkey?: string
+  /** 映射标记
+   * @supported alipay
+   */
+  name?: string
+  /** 是否进行动画
+   * @default false
+   * @supported weapp, alipay
+   */
+  transform?: boolean
+  /** 动画时长，单位毫秒
+   * @default 300
+   * @supported weapp, alipay
+   */
+  duration?: number
+  /** css缓动函数
+   * @default ease-out
+   * @supported weapp, alipay
+   */
+  easingFunction?: string
+  /** 手势返回时是否进行动画
+   * @supported weapp
+   * @default false
+   */
+  transitionOnGesture?: boolean
+  /** 指定 push 阶段的飞跃物
+   * @supported weapp
+   * @default "to"
+   */
+  shuttleOnPush?: 'from' | 'to' | 'from' | 'to'
+  /** 指定 pop 阶段的飞跃物
+   * @supported weapp
+   * @default "to"
+   */
+  shuttleOnPop?: string
+  /** 动画插值曲线
+   * @supported weapp
+   * @default "materialRectArc"
+   */
+  rectTweenType?:
+    | 'materialRectArc'
+    | 'materialRectCenterArc'
+    | 'linear'
+    | 'elasticIn'
+    | 'elasticOut'
+    | 'elasticInOut'
+    | 'bounceIn'
+    | 'bounceOut'
+    | 'bounceInOut'
+    | 'cubic-bezier(x1, y1, x2, y2)'
+  /** 动画帧回调
+   * @supported weapp
+   */
+  onFrameWorklet?: string
+}
+/** 共享元素
+ *
+ * 共享元素是一种动画形式，类似于 [`flutter Hero`](https://flutterchina.club/animations/hero-animations/) 动画，表现为元素像是在页面间穿越一样。该组件需与 [`PageContainer`](/docs/components/viewContainer/page-container) 组件结合使用。
+ * 使用时需在当前页放置 `ShareElement` 组件，同时在 `PageContainer` 容器中放置对应的 `ShareElement` 组件，对应关系通过属性值 key 映射。当设置 `PageContainer` `显示时，transform` 属性为 `true` 的共享元素会产生动画。当前页面容器退出时，会产生返回动画。
+ * @classification skyline
+ * @supported weapp, alipay
+ * @example_react
+ * ```tsx
+ * // index.js
+ * import { useState, useCallback } from 'react'
+ * import { View, Button, PageContainer, ShareElement } from 'vite-plugin-taro-runtime/components'
+ *
+ * import './index.scss'
+ *
+ * const contacts = [
+ *   { id: 1, name: 'Frank', img: 'frank.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
+ *   { id: 2, name: 'Susan', img: 'susan.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
+ *   { id: 3, name: 'Emma', img: 'emma.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
+ *   { id: 4, name: 'Scott', img: 'scott.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
+ *   { id: 5, name: 'Bob', img: 'bob.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
+ *   { id: 6, name: 'Olivia', img: 'olivia.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
+ *   { id: 7, name: 'Anne', img: 'anne.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
+ *   { id: 8, name: 'sunny', img: 'olivia.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' }
+ * ]
+ *
+ * export default function () {
+ *   const [show, setShow] = useState(false)
+ *   const [contact, setContact] = useState(contacts[0])
+ *   const [transformIdx, setTransformIdx] = useState(0)
+ *
+ *   const onBeforeEnter = useCallback((res) => {
+ *     console.log('onBeforeEnter: ', res)
+ *   }, [])
+ *   const onEnter = useCallback((res) => {
+ *     console.log('onEnter: ', res)
+ *   }, [])
+ *   const onAfterEnter = useCallback((res) => {
+ *     console.log('onAfterEnter: ', res)
+ *   }, [])
+ *   const onBeforeLeave = useCallback((res) => {
+ *     console.log('onBeforeLeave: ', res)
+ *   }, [])
+ *   const onLeave = useCallback((res) => {
+ *     console.log('onLeave: ', res)
+ *   }, [])
+ *   const onAfterLeave = useCallback((res) => {
+ *     console.log('onAfterLeave: ', res)
+ *   }, [])
+ *
+ *   const showNext = (e, index) => {
+ *     setShow(true)
+ *     setContact(contacts[index])
+ *     setTransformIdx(index)
+ *   }
+ *
+ *   const showPrev = useCallback(() => {
+ *     setShow(false)
+ *   }, [])
+ *
+ *   return (
+ *     <View>
+ *       <View className="screen screen1">
+ *         {
+ *           contacts.map((item, index) => (
+ *             <View key={item.id} className="contact" onClick={e => showNext(e, index)}>
+ *               <ShareElement duration={300} className="name" key="name" transform={transformIdx === index}>
+ *                 {item.name}
+ *               </ShareElement>
+ *               <View className="list">
+ *                 <View>Phone: {item.phone}</View>
+ *                 <View>Mobile: {item.mobile}</View>
+ *                 <View>Email: {item.email}</View>
+ *               </View>
+ *             </View>
+ *           ))
+ *         }
+ *       </View>
+ *       <PageContainer
+ *         show={show}
+ *         overlay={false}
+ *         closeOnSlideDown
+ *         duration={300}
+ *         position='center'
+ *         onBeforeEnter={onBeforeEnter}
+ *         onEnter={onEnter}
+ *         onAfterEnter={onAfterEnter}
+ *         onBeforeLeave={onBeforeLeave}
+ *         onLeave={onLeave}
+ *         onAfterLeave={onAfterLeave}
+ *       >
+ *         <View className="screen screen2">
+ *           <View className="contact">
+ *             <ShareElement className="name" key="name" duration={300} transform>
+ *               {contact.name}
+ *             </ShareElement>
+ *             <View className={`paragraph ${show ? 'enter' : ''}`}>
+ *               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nisl enim, sodales non augue efficitur, sagittis
+ *               varius neque. Fusce dolor turpis, maximus eu volutpat quis, pellentesque et ligula. Ut vehicula metus in nibh
+ *               mollis ornare. Etiam aliquam lacinia malesuada. Vestibulum dignissim mollis quam a tristique. Maecenas neque
+ *               mauris, malesuada vitae magna eu, congue consectetur risus. Etiam vitae pulvinar ex. Maecenas suscipit mi ac
+ *               imperdiet pretium. Aliquam velit mauris, euismod quis elementum sed, malesuada non dui. Nunc rutrum sagittis
+ *               ligula in dapibus. Cras suscipit ut augue eget mollis. Donec auctor feugiat ipsum id viverra. Vestibulum eu nisi
+ *               risus. Vestibulum eleifend dignissim.
+ *
+ *             </View>
+ *             <Button className="screen2-button" onClick={showPrev} hidden={!show} hoverClass="none">Click Me</Button>
+ *           </View>
+ *         </View>
+ *       </PageContainer>
+ *     </View>
+ *   )
+ * }
+ * ```
+ * ```scss
+ * \/** index.scss *\/
+ * page {
+ *   color: #333;
+ *   background-color: #ddd;
+ *   overflow: hidden;
+ * }
+ *
+ * button {
+ *   border: 0 solid #0010ae;
+ *   background-color: #1f2afe;
+ *   color: #fff;
+ *   font-size: 120%;
+ *   padding: 8px 16px;
+ *   outline-width: 0;
+ *   -webkit-appearance: none;
+ *   box-shadow: 0 8px 17px rgba(0, 0, 0, 0.2);
+ * }
+ *
+ * .screen {
+ *   position: absolute;
+ *   top: 0;
+ *   bottom: 0;
+ *   left: 0;
+ *   right: 0;
+ *   padding: 16px;
+ *   -webkit-overflow-scrolling: touch;
+ * }
+ *
+ * .contact {
+ *   position: relative;
+ *   padding: 16px;
+ *   background-color: #fff;
+ *   width: 100%;
+ *   height: 100%;
+ *   box-sizing: border-box;
+ * }
+ *
+ * .avatar {
+ *   position: absolute;
+ *   top: 16px;
+ *   left: 16px;
+ *   font-size: 0;
+ * }
+ *
+ * .name {
+ *   height: 65px;
+ *   font-size: 2em;
+ *   font-weight: bold;
+ *   text-align: center;
+ *   margin: 10px 0;
+ * }
+ *
+ * .list {
+ *   padding-top: 8px;
+ *   padding-left: 32px;
+ * }
+ *
+ * .screen1 {
+ *   overflow-y: scroll;
+ *   padding: 0;
+ * }
+ *
+ * .screen1 .contact {
+ *   margin: 16px;
+ *   height: auto;
+ *   width: auto;
+ *   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
+ * }
+ *
+ * .screen2-button {
+ *   display: block;
+ *   margin: 24px auto;
+ * }
+ *
+ * .paragraph {
+ *   -webkit-transition: transform ease-in-out 300ms;
+ *   transition: transform ease-in-out 300ms;
+ *   -webkit-transform: scale(0.6);
+ *   transform: scale(0.6);
+ * }
+ *
+ * .enter.paragraph {
+ *   transform: none;
+ * }
+ * ```
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/share-element.html
+ */
+declare const ShareElement: ComponentType<ShareElementProps>
+export { ShareElement, ShareElementProps }

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

@@ -0,0 +1,145 @@
+import { ComponentType } from 'react'
+import { StandardProps, CommonEventFunction, FormItemProps } from './common'
+interface SliderProps extends StandardProps, FormItemProps {
+  /** 最小值
+   * @default 0
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf
+   */
+  min?: number
+  /** 最大值
+   * @default 100
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf
+   */
+  max?: number
+  /** 步长，取值必须大于 0，并且可被(max - min)整除
+   * @default 1
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf
+   */
+  step?: number
+  /** 是否禁用
+   * @default false
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf
+   */
+  disabled?: boolean
+  /** 当前取值
+   * @default 0
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf
+   */
+  value?: number
+  /** 设置 React 非受控状态下的初始取值
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf
+   * @unique
+   */
+  defaultValue?: string
+  /** 背景条的颜色（请使用 backgroundColor）
+   * @default "#e9e9e9"
+   * @supported weapp, tt, qq, jd, harmony
+   */
+  color?: string
+  /** 已选择的颜色（请使用 activeColor）
+   * @default "#1aad19"
+   * @supported weapp, tt, qq, jd, harmony
+   */
+  selectedColor?: string
+  /** 已选择的颜色
+   * @default "#1aad19"
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf
+   */
+  activeColor?: string
+  /** 背景条的颜色
+   * @default "#e9e9e9"
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf
+   */
+  backgroundColor?: string
+  /** 滑块的大小，取值范围为 12 - 28
+   * @default 28
+   *  @supported weapp, swan, tt, qq, jd, h5, harmony, harmony_hybrid, ascf
+   */
+  blockSize?: number
+  /** 滑块的颜色
+   * @default "#ffffff"
+   * @supported weapp, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf
+   */
+  blockColor?: string
+  /** 是否显示当前 value
+   * @default false
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf
+   */
+  showValue?: boolean
+  /** 组件名字，用于表单提交获取数据。
+   * @supported alipay
+   */
+  name?: string
+  /** 轨道线条高度。
+   * @default 4
+   * @supported alipay
+   */
+  trackSize?: string
+  /** 滑块大小。
+   * @default 22
+   * @supported alipay
+   */
+  handleSize?: string
+  /** 滑块填充色，同 CSS 色值。
+   * @supported alipay
+   */
+  handleColor?: string
+  /** 无障碍访问，（属性）元素的额外描述
+   * @supported qq
+   */
+  ariaLabel?: string
+  /** 完成一次拖动后触发的事件
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf
+   */
+  onChange?: CommonEventFunction<SliderProps.onChangeEventDetail>
+  /** 拖动过程中触发的事件
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf
+   */
+  onChanging?: CommonEventFunction<SliderProps.onChangeEventDetail>
+}
+declare namespace SliderProps {
+  interface onChangeEventDetail {
+    value
+  }
+}
+/** 滑动选择器
+ * @classification forms
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf
+ * @example_react
+ * ```tsx
+ * export default class PageView extends Component {
+ *   constructor() {
+ *     super(...arguments)
+ *   }
+ *
+ *   render() {
+ *     return (
+ *       <View className='components-page'>
+ *         <Text>设置 step</Text>
+ *         <Slider step={1} value={50}/>
+ *         <Text>显示当前 value</Text>
+ *         <Slider step={1} value={50} showValue/>
+ *         <Text>设置最小/最大值</Text>
+ *         <Slider step={1} value={100} showValue min={50} max={200}/>
+ *       </View>
+ *     )
+ *   }
+ * }
+ * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="components-page">
+ *     <text>设置 step</text>
+ *     <slider step="1" value="50"/>
+ *     <text>显示当前 value</text>
+ *     <slider step="1" value="50" :show-value="true" />
+ *     <text>设置最小/最大值</text>
+ *     <slider step="1" value="100" :show-value="true" min="50" max="200"/>
+ *   </view>
+ * </template>
+ * ```
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/slider.html
+ */
+declare const Slider: ComponentType<SliderProps>
+export { Slider, SliderProps }

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

@@ -0,0 +1,42 @@
+import { StandardProps } from './common'
+
+import type { ComponentType, ReactNode } from 'react'
+
+interface SlotProps extends StandardProps {
+  /** 指定插入的 slot 位置
+   * @default none
+   * @supported weapp, swan, alipay, tt, jd, qq
+   */
+  name?: string
+  /** scoped slot 传入数据源
+   * @default none
+   * @supported swan
+   */
+  varName?: string
+}
+
+/** slot 插槽
+ * @classification viewContainer
+ * @supported weapp, swan, alipay, tt, jd, qq, h5, harmony_hybrid
+ * @example
+ * ```tsx
+ * import { Slot, View, Text } from 'vite-plugin-taro-runtime/components'
+ *
+ * export default class SlotView extends Component {
+ *   render () {
+ *     return (
+ *       <View>
+ *         <custom-component>
+ *           <Slot name='title'>
+ *            <Text>Hello, world!</Text>
+ *           </Slot>
+ *         </custom-component>
+ *       </View>
+ *     )
+ *   }
+ * }
+ * ```
+ */
+declare const Slot: ComponentType<SlotProps>
+
+export { Slot, SlotProps }

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

@@ -0,0 +1,25 @@
+import { ComponentType } from 'react'
+import { StandardProps } from './common'
+
+interface SnapshotProps extends StandardProps {
+  /**
+   * 渲染模式
+   * @supported weapp
+   * @default 'view'
+   *
+   * 可选值:
+   * - view: 以真实节点渲染
+   * - picture: 对子节点生成的内容截图渲染
+   */
+  mode: 'view' | 'picture'
+}
+
+/**
+ * 截图组件
+ * 支持将其子节点的渲染结果导出成图片，该组件需配合 snapshot 接口使用。 目前仅在 Skyline 渲染引擎 下支持。
+ * @classification skyline
+ * @supported weapp
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/snapshot.html
+ */
+declare const Snapshot: ComponentType<SnapshotProps>
+export { Snapshot, SnapshotProps }

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

@@ -0,0 +1,14 @@
+import { ComponentType } from 'react'
+
+import { StandardProps } from './common'
+
+interface SpanProps extends StandardProps { }
+
+/**
+ * 用于支持内联文本和 image / navigator 的混排
+ * @classification skyline
+ * @supported weapp
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/span.html
+ */
+declare const Span: ComponentType<SpanProps>
+export { Span, SpanProps }

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

@@ -0,0 +1,31 @@
+import { ComponentType } from 'react'
+import { StandardProps } from './common'
+interface StickyHeaderProps extends StandardProps {
+   /**
+    * 吸顶时与顶部的距(px)
+    * @supported weapp
+    * @default 0
+    */
+   offsetTop?: number
+   /**
+    * 长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距
+    * @supported weapp
+    * @default [0, 0, 0, 0]
+    */
+   padding?: [number, number, number, number]
+  /**
+   * 吸顶状态变化事件，仅支持非 worklet 的组件方法作为回调。event.detail = { isStickOnTop }，当 sticky-header 吸顶时为 true，否则为 false。
+   * @supported weapp
+   * @version >=3.6.2
+   */
+  onStickOnTopChange?: CommonEventFunction
+}
+
+/**
+ * 吸顶布局容器，仅支持作为 scroll-view 自定义模式下的直接子节点或 sticky-section 组件直接子节点。仅 Skyline 支持。
+ * @classification skyline
+ * @supported weapp, harmony
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/sticky-header.html
+ */
+declare const StickyHeader: ComponentType<StickyHeaderProps>
+export { StickyHeader, StickyHeaderProps }

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

@@ -0,0 +1,23 @@
+import { ComponentType } from 'react'
+import { StandardProps } from './common'
+interface StickySectionProps extends StandardProps {
+  /** 吸顶元素重叠时是否继续上推
+   * @supported weapp
+   * @default true
+   */
+  pushPinnedHeader?: boolean
+  /**
+   * 长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距
+   * @supported weapp
+   * @default [0, 0, 0, 0]
+   */
+  padding?: [number, number, number, number]
+}
+/**
+ * 吸顶布局容器，仅支持作为 scroll-view 自定义模式下的直接子节点。仅 Skyline 支持。
+ * @classification skyline
+ * @supported weapp, harmony
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/sticky-section.html
+ */
+declare const StickySection: ComponentType<StickySectionProps>
+export { StickySection, StickySectionProps }