[DEPRECATED] uni-app-types #

/**
 * @desc 触发事件的组件的一些属性值集合
 */
export interface BaseEventTarget {
  /**
   * @desc 事件源组件的id
   */
  id?: string;
  /**
   * @desc 事件源组件上由 data- 开头的自定义属性组成的集合
   */
  dataset?: Record<string, any>;
  [key: string]: any;
}

/**
 * @desc 当前组件的一些属性值集合
 */
export interface BaseEventCurrentTarget extends BaseEventTarget {}

/**
 * @desc 基础事件
 */
export interface BaseEvent {
  /**
   * @desc 事件类型
   */
  type?: string;
  /**
   * @desc 事件生成时的时间戳
   */
  timeStamp?: number;
  /**
   * @desc 触发事件的组件的一些属性值集合
   */
  target?: BaseEventTarget;
  /**
   * @desc 当前组件的一些属性值集合
   */
  currentTarget?: BaseEventCurrentTarget;
  /**
   * @desc 事件标记数据
   */
  mark?: Record<string, any>;
  [key: string]: any;
}

/**
 * @desc 自定义事件
 */
export interface CustomEvent<T = Record<string, any>> extends BaseEvent {
  /**
   * @desc 额外信息
   */
  detail?: T;
  [key: string]: any;
}

/**
 * @desc 当前停留在屏幕中的触摸点信息
 */
export interface TouchEventTouch {
  /**
   * @desc 标志符
   */
  identifier?: number;
  /**
   * @desc 距离文档左上角的横向距离
   */
  pageX?: number;
  /**
   * @desc 距离文档左上角的纵向距离
   */
  pageY?: number;
  /**
   * @desc 距离页面可显示区域（屏幕除去导航条）左上角的横向距离
   */
  clientX?: number;
  /**
   * @desc 距离页面可显示区域（屏幕除去导航条）左上角的纵向距离
   */
  clientY?: number;
}

/**
 * @desc 当前停留在 canvas 中的触摸点信息
 */
export interface TouchEventCanvasTouch {
  /**
   * @desc 标志符
   */
  identifier?: number;
  /**
   * @desc 距离 canvas 左上角的横向距离
   */
  x?: number;
  /**
   * @desc 距离 canvas 左上角的纵向距离
   */
  y?: number;
}

/**
 * @desc 当前变化的屏幕触摸点信息
 */
export interface TouchEventChangedTouch extends TouchEventTouch {}

/**
 * @desc 当前变化的 canvas 触摸点信息
 */
export interface TouchEventCanvasChangedTouch extends TouchEventCanvasTouch {}

/**
 * @desc 触摸事件
 */
export interface TouchEvent<T = TouchEventTouch, D = TouchEventChangedTouch> extends BaseEvent {
  touches: T[];
  changedTouches: D[];
}

/**
 * @desc 包装元素，不会在页面中做任何渲染，只接受控制属性
 * @desc 支持在 template 模板中嵌套 template 和 block
 * @desc 在不同的平台表现存在一定差异，推荐统一使用 template
 */
export type Block = Component;

export interface ViewProps {
  /**
   * @desc 指定按下去的样式类
   * @desc 当 hover-class="none" 时，没有点击态效果
   * @desc 默认为 none
   */
  hoverClass: string;
  /**
   * @desc 指定是否阻止本节点的祖先节点出现点击态
   * @desc 默认为 false
   */
  hoverStopPropagation: boolean;
  /**
   * @desc 按住后多久出现点击态
   * @desc 单位为毫秒
   * @desc 默认为 50
   */
  hoverStartTime: number;
  /**
   * @desc 手指松开后点击态保留时间
   * @desc 单位为毫秒
   * @desc 默认为 400
   */
  hoverStayTime: number;
}

/**
 * @desc 视图容器，和 div 类似，用于包裹各种元素内容
 * @desc 包裹文字建议使用 text
 * @desc 如果使用 div，会编译成 view
 */
export type View = Component<Partial<ViewProps>>;

export interface ScrollViewProps {
  /**
   * @desc 是否允许横向滚动
   * @desc 默认为 false
   */
  scrollX: boolean;
  /**
   * @desc 是否允许纵向滚动
   * @desc 默认为 false
   */
  scrollY: boolean;
  /**
   * @desc 距顶部/左边多远时触发 scrolltoupper 事件
   * @desc 单位为 px
   * @desc 默认为 50
   */
  upperThreshold: number | string;
  /**
   * @desc 距底部/右边多远时触发 scrolltolower 事件
   * @desc 单位为 px
   * @desc 默认为 50
   */
  lowerThreshold: number | string;
  /**
   * @desc 设置纵向滚动条位置
   * @desc 优先级低于 scroll-into-view
   */
  scrollTop: number | string;
  /**
   * @decs 设置横向滚动条位置
   * @desc 优先级低于 scroll-into-view
   */
  scrollLeft: number | string;
  /**
   * @desc 值应为某子元素 id，id 不能以数字开头
   * @desc 设置哪个方向可滚动，则在哪个方向滚动到该元素
   * @desc 优先级高于 scroll-top / scroll-left
   */
  scrollIntoView: string;
  /**
   * @desc 在设置滚动条位置时是否使用动画过渡
   * @desc 默认为 false
   */
  scrollWithAnimation: boolean;
  /**
   * @desc 是否允许 iOS 点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部
   * @desc 只支持纵向
   * @desc 默认为 false
   */
  enableBackToTop: boolean;
  /**
   * @desc 控制是否出现滚动条
   * @desc 默认为 false
   */
  showScrollbar: boolean;
  /**
   * @desc 是否开启自定义下拉刷新
   * @desc 默认为 false
   */
  refresherEnabled: boolean;
  /**
   * @desc 设置自定义下拉刷新阈值
   * @desc 默认为 45
   */
  refresherThreshold: number;
  /**
   * @desc 设置自定义下拉刷新默认样式
   * @desc none 不使用默认样式
   * @desc 默认为 black
   */
  refresherDefaultStyle: 'black' | 'white' | 'none';
  /**
   * @desc 自定义下拉刷新区域背景颜色
   * @desc 默认为 #FFF
   */
  refresherBackground: string;
  /**
   * @desc 设置当前下拉刷新状态
   * @desc true 下拉刷新已经被触发
   * @desc false 下拉刷新未被触发
   * @desc 默认为 false
   */
  refresherTriggered: boolean;
  /**
   * @desc 是否启用 flexbox 布局
   * @desc 开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其子节点
   * @desc 默认为 false
   */
  enableFlex: boolean;
  /**
   * @desc 是否开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效
   * @desc 安卓下可参考 CSS overflow-anchor 属性
   * @desc 默认为 false
   */
  scrollAnchoring: boolean;
  /**
   * @desc 滚动到顶部/左边时触发
   */
  onScrolltoupper: (event: BaseEvent) => void;
  /**
   * @desc 滚动到底部/右边时触发
   */
  onScrolltolower: (event: BaseEvent) => void;
  /**
   * @desc 滚动时触发
   */
  onScroll: (
    event: CustomEvent<{
      scrollLeft: number;
      scrollTop: number;
      scrollHeight: number;
      scrollWidth: number;
      deltaX: number;
      deltaY: number;
    }>,
  ) => void;
  /**
   * @desc 自定义下拉刷新控件被下拉时触发
   */
  onRefresherpulling: (event: BaseEvent) => void;
  /**
   * @desc 自定义下拉刷新被触发时触发
   */
  onRefresherrefresh: (event: BaseEvent) => void;
  /**
   * @desc 自定义下拉刷新被复位时触发
   */
  onRefresherrestore: (event: BaseEvent) => void;
  /**
   * @desc 自定义下拉刷新被中止时触发
   */
  onRefresherabort: (event: BaseEvent) => void;
}

/**
 * @desc 可滚动视图区域，用于区域滚动
 * @desc 在 webview 渲染的页面中，区域滚动的性能不及页面滚动
 * @desc 纵向滚动时，需要给 scroll-view 一个固定高度，通过 css 设置 height
 * @desc 横向滚动时，需要给 scroll-view 添加 white-space: nowrap; 样式
 * @desc scroll-view 是区域滚动，不会触发页面滚动，无法触发 pages.json 配置的下拉刷新、页面触底onReachBottomDistance、titleNView 的 transparent 透明渐变
 */
export type ScrollView = Component<Partial<ScrollViewProps>>;

/**
 * @desc 导致变更的原因
 * @desc autoplay 自动播放
 * @desc touch 用户滑动
 * @desc 空字符串 其它原因
 */
export type SwiperSource = 'autoplay' | 'touch' | '';

/**
 * @desc swiper 切换缓动动画类型
 */
export type SwiperEasingFunction =
  | 'default'
  | 'linear'
  | 'easeInCubic'
  | 'easeOutCubic'
  | 'easeInOutCubic';

export interface SwiperProps {
  /**
   * @desc 是否显示面板指示点
   * @desc 默认为 false
   */
  indicatorDots: boolean;
  /**
   * @desc 指示点颜色
   * @desc 默认为 rgba(0, 0, 0, 0.3)
   */
  indicatorColor: string;
  /**
   * @desc 当前选中的指示点颜色
   * @desc 默认为 #000000
   */
  indicatorActiveColor: string;
  /**
   * @desc swiper-item 可见时的 class
   */
  activeClass: string;
  /**
   * @desc acceleration 设置为 true 时且处于滑动过程中，中间若干屏处于可见时的 class
   */
  changingClass: boolean;
  /**
   * @desc 是否自动切换
   * @desc 默认为 false
   */
  autoplay: boolean;
  /**
   * @desc 当前所在滑块的下标
   * @desc 默认为 0
   */
  current: number;
  /**
   * @desc 当前所在滑块的 item-id ，不能与 current 被同时指定
   */
  currentItemId: string;
  /**
   * @desc 自动切换时间间隔
   * @desc 默认为 5000
   */
  interval: number;
  /**
   * @desc 滑动动画时长
   * @desc 默认为 500
   */
  duration: number;
  /**
   * @desc 是否采用衔接滑动，即播放到末尾后重新回到开头
   * @desc 默认为 false
   */
  circular: boolean;
  /**
   * @desc 滑动方向是否为纵向
   * @desc 默认为 false
   */
  vertical: boolean;
  /**
   * @desc 前边距，可用于露出前一项的一小部分
   * @desc 接受 px 和 rpx 值
   * @desc 默认为 0px
   */
  previousMargin: string;
  /**
   * @desc 后边距，可用于露出后一项的一小部分
   * @desc 接受 px 和 rpx 值
   * @desc 默认为 0px
   */
  nextMargin: string;
  /**
   * @desc 当开启时，会根据滑动速度，连续滑动多屏
   * @desc 默认 false
   */
  acceleration: boolean;
  /**
   * @desc 是否禁用代码变动触发 swiper 切换时使用动画
   * @desc 默认为 false
   */
  disableProgrammaticAnimation: boolean;
  /**
   * @desc 同时显示的滑块数量
   * @desc 默认为 1
   */
  displayMultipleItems: number;
  /**
   * @desc 是否跳过未显示的滑块布局
   * @desc 设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息
   * @desc 默认为 false
   */
  skipHiddenItemLayout: boolean;
  /**
   * @desc 是否禁止用户 touch 操作
   * @desc 默认为 false
   */
  disableTouch: boolean;
  /**
   * @desc 是否监听用户的触摸事件
   * @desc 只在初始化时有效，不支持动态修改
   * @desc 默认为 true
   */
  touchable: boolean;
  /**
   * @desc 指定 swiper 切换缓动动画类型
   * @desc 默认为 default
   */
  easingFunction: SwiperEasingFunction;
  /**
   * @desc current 改变时触发
   */
  onChange: (
    event: CustomEvent<{
      /**
       * @desc 当前所在滑块的下标
       */
      current: number;
      /**
       * @desc 导致变更的原因
       * @desc autoplay 自动播放
       * @desc touch 用户滑动
       * @desc 空字符串 其它原因
       */
      source: SwiperSource;
    }>,
  ) => void;
  /**
   * @desc swiper-item 位置改变时触发
   */
  onTransition: (
    event: CustomEvent<{
      dx?: number;
      dy?: number;
    }>,
  ) => void;
  /**
   * @desc 动画结束时触发
   */
  onAnimationfinish: (
    event: CustomEvent<{
      /**
       * @desc 当前所在滑块的下标
       */
      current: number;
      /**
       * @desc 导致变更的原因
       * @desc autoplay 自动播放
       * @desc touch 用户滑动
       * @desc 空字符串其它原因
       */
      source: SwiperSource;
    }>,
  ) => void;
}

/**
 * @desc 滑块视图容器，一般用于左右滑动或上下滑动，比如 banner 轮播图
 * @desc 注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换
 * @desc swiper 下的每个 swiper-item 是一个滑动切换区域，不能停留在 2 个滑动区域之间
 */
export type Swiper = Component<Partial<SwiperProps>>;

export interface SwiperItemProps {
  /**
   * @desc 标识符
   */
  itemId: string;
}

/**
 * @desc swiper 直接子组件，宽高自动设置为父组件的 100%
 * @desc 不能被子组件自动撑开
 */
export type SwiperItem = Component<Partial<SwiperItemProps>>;

/**
 * @desc 屏幕方向
 * @desc landscape 横向
 * @desc portrait 纵向
 */
export type MatchMediaOrientation = 'landscape' | 'portrait';

export interface MatchMediaProps {
  /**
   * @desc 页面最小宽度
   * @desc 单位为 px
   */
  minWidth: number;
  /**
   * @desc 页面最大宽度
   * @desc 单位为 px
   */
  maxWidth: number;
  /**
   * @desc 页面宽度
   * @desc 单位为 px
   */
  width: number;
  /**
   * @desc 页面最小高度
   * @desc 单位为 px
   */
  minHeight: number;
  /**
   * @desc 页面最大高度
   * @desc 单位为 px
   */
  maxHeight: number;
  /**
   * @desc 页面高度
   * @desc 单位为 px
   */
  height: number;
  /**
   * @desc 屏幕方向
   * @desc landscape 横向
   * @desc portrait 纵向
   */
  orientation: MatchMediaOrientation;
}

/**
 * @desc media query 匹配检测节点
 * @desc 类似于网页开发中使用媒体查询来适配大屏小屏，这是一个可适配不同屏幕的基本视图组件
 * @desc 可以指定一组 media query 媒体查询规则，满足查询条件时，这个组件才会被展示
 */
export type MatchMedia = Component<Partial<MatchMediaProps>>;

export interface MovableAreaProps {
  /**
   * @desc 当里面的 movable-view 设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个 movable-area
   * @desc 默认为 false
   */
  scaleArea: boolean;
}

/**
 * @desc 可拖动区域
 * @desc movable-area 指代可拖动的范围，在其中内嵌 movable-view 组件用于指示可拖动的区域
 * @desc 即手指/鼠标按住 movable-view 拖动或双指缩放，但拖不出 movable-area 规定的范围
 * @desc 也可以不拖动，而使用代码来触发 movable-view 在 movable-area 里的移动缩放
 * @desc 默认宽高为 10px
 */
export type MovableArea = Component<Partial<MovableAreaProps>>;

/**
 * @desc movable-view 的移动方向
 */
export type MovableViewDirection = 'all' | 'vertical' | 'horizontal' | 'none';

/**
 * @desc movable-view 产生移动的原因
 * @desc touch 拖动
 * @desc touch-out-of-bounds 超出移动范围
 * @desc out-of-bounds 超出移动范围后的回弹
 * @desc friction 惯性
 * @desc 空字符串 setData
 */
export type MovableViewSource = 'touch' | 'touch-out-of-bounds' | 'out-of-bounds' | 'friction' | '';

export interface MovableViewProps {
  /**
   * @desc movable-view 的移动方向
   * @desc 默认为 none
   */
  direction: MovableViewDirection;
  /**
   * @desc 是否带有惯性
   * @desc 默认为 false
   */
  inertia: boolean;
  /**
   * @desc 超过可移动区域后，是否还可以移动
   * @desc 默认为 false
   */
  outOfBounds: boolean;
  /**
   * @desc 定义 x 轴方向的偏移
   * @desc 如果 x 的值不在可移动范围内，会自动移动到可移动范围
   * @desc 改变 x 的值会触发动画
   */
  x: string | number;
  /**
   * @desc 定义 y 轴方向的偏移
   * @desc 如果 y 的值不在可移动范围内，会自动移动到可移动范围
   * @desc 改变 y 的值会触发动画
   */
  y: string | number;
  /**
   * @desc 阻尼系数，用于控制 x 或 y 改变时的动画和过界回弹的动画
   * @desc 值越大移动越快
   * @desc 默认为 20
   */
  damping: number;
  /**
   * @desc 摩擦系数，用于控制惯性滑动的动画
   * @desc 值越大摩擦力越大，滑动越快停止
   * @desc 必须大于 0，否则会被设置成默认值
   * @desc 默认为 2
   */
  friction: number;
  /**
   * @desc 是否禁用
   * @desc 默认为 false
   */
  disabled: boolean;
  /**
   * @desc 是否支持双指缩放
   * @desc 默认缩放手势生效区域是在 movable-view 内
   * @desc 默认为 false
   */
  scale: boolean;
  /**
   * @desc 定义缩放倍数最小值
   * @desc 默认为 0.5
   */
  scaleMin: number;
  /**
   * @desc 定义缩放倍数最大值
   * @desc 默认为 10
   */
  scaleMax: number;
  /**
   * @desc 定义缩放倍数
   * @desc 取值范围为 0.5 - 10
   * @desc 默认为 1
   */
  scaleValue: number;
  /**
   * @desc 是否使用动画
   * @desc 默认为 true
   */
  animation: boolean;
  /**
   * @desc 拖动过程中触发
   */
  onChange: (
    event: CustomEvent<{
      x: number;
      y: number;
      /**
       * @desc movable-view 产生移动的原因
       * @desc touch 拖动
       * @desc touch-out-of-bounds 超出移动范围
       * @desc out-of-bounds 超出移动范围后的回弹
       * @desc friction 惯性
       * @desc 空字符串 setData
       */
      source: MovableViewChangeSource;
    }>,
  ) => void;
  /**
   * @desc 缩放过程中触发
   */
  onScale: (
    event: CustomEvent<{
      x: number;
      y: number;
      /**
       * @desc 是否支持双指缩放
       * @desc 默认缩放手势生效区域是在 movable-view 内
       */
      scale: boolean;
    }>,
  ) => void;
}

/**
 * @desc 可移动的视图容器，在页面中可以拖拽滑动或双指缩放
 * @desc movable-area 直接子组件
 */
export type MovableView = Component<Partial<MovableViewProps>>;

export interface CoverViewProps {
  /**
   * @desc 设置顶部滚动偏移量
   * @desc 仅在设置了 overflow-y: scroll 成为滚动元素后生效
   */
  scrollTop: number | string;
}

/**
 * @desc 覆盖在原生组件之上的文本视图
 * @desc app-vue 和小程序框架，渲染引擎是 webview
 * @desc 为了优化体验，部分组件如 map、video、textarea、canvas 通过原生控件实现，原生组件层级高于前端组件
 * @desc 为了能正常覆盖原生组件，设计了 cover-view
 */
export type CoverView = Component<Partial<CoverViewProps>>;

export interface CoverImageProps {
  /**
   * @desc 图片路径
   * @desc 支持本地路径、网络路径
   * @desc 不支持 base64 格式
   */
  src: string;
  /**
   * @desc 图片加载成功时触发
   */
  onLoad: (event: BaseEvent) => void;
  /**
   * @desc 图片加载失败时触发
   */
  onError: (event: BaseEvent) => void;
}

/**
 * @desc 覆盖在原生组件之上的图片视图
 * @desc 可覆盖的原生组件同 cover-view
 * @desc 支持嵌套在 cover-view 里
 */
export type CoverImage = Component<Partial<CoverImageProps>>;

/**
 * @desc 图标属性
 */
export interface IconProps {
  /**
   * @desc 类型
   */
  type: string;
  /**
   * @desc 大小
   * @desc 单位为 px
   * @desc 默认为 23
   */
  size: number;
  /**
   * @desc 颜色
   */
  color: string;
}

/**
 * @desc 图标
 */
export type Icon = Component<Partial<IconProps>>;

/**
 * @desc 显示连续空格
 * @desc ensp 中文字符空格一半大小
 * @desc emsp 中文字符空格大小
 * @desc nbsp 根据字体设置的空格大小
 */
export type TextSpace = 'ensp' | 'emsp' | 'nbsp';

/**
 * @desc 文本组件属性
 */
export interface TextProps {
  /**
   * @desc 文本是否可选
   * @desc 默认为 false
   */
  selectable: boolean;
  /**
   * @desc 文本是否可选，可能会使文本节点显示为 inline-block
   * @desc 默认为 false
   */
  userSelect: boolean;
  /**
   * @desc 显示连续空格
   * @desc ensp 中文字符空格一半大小
   * @desc emsp 中文字符空格大小
   * @desc nbsp 根据字体设置的空格大小
   * @desc 没有默认值
   */
  space: TextSpace;
  /**
   * @desc 是否解码
   * @desc 默认为 false
   */
  decode: boolean;
}

/**
 * @desc 文本组件
 * @desc 用于包裹文本内容
 */
export type Text = Component<Partial<TextProps>>;

/**
 * @desc 显示连续空格
 */
export type RichTextSpace = 'ensp' | 'emsp' | 'nbsp';

/**
 * @desc 文本节点
 */
export type RichTextTextNode = {
  type: 'text';
  text: string;
};

/**
 * @desc 元素节点
 */
export type RichTextNodeNode = {
  type?: 'node';
  name: string;
  attrs?: Record<string, any>;
  children?: Array<RichTextTextNode | RichTextNodeNode>;
};

/**
 * @desc 节点
 */
export type RichTextNode = RichTextTextNode | RichTextNodeNode;

/**
 * @desc 富文本属性
 */
export interface RichTextProps {
  /**
   * @desc 节点列表
   * @desc
   */
  nodes: RichTextNode[] | string;
  /**
   * @desc 显示连续空格
   * @desc 没有默认值
   */
  space: RichTextSpace;
  /**
   * @desc 富文本是否可以长按选中
   * @desc 默认为 true
   */
  selectable: boolean;
  /**
   * @desc 是否阻止长按图片时弹起默认菜单
   * @desc 只在初始化时有效，不支持动态修改
   * @desc 默认为 false
   */
  imageMenuPrevent: boolean;
  /**
   * @desc 富文本中的图片是否可点击预览
   * @desc 在不设置的情况下，若 rich-text 未监听点击事件，则默认开启
   * @desc 未显示设置 preview 时会进行点击默认预览判断，建议显示设置 preview
   */
  preview: boolean;
  /**
   * @desc 拦截点击事件，支持 a 和 img 标签
   */
  onItemclick: (event: CustomEvent<{ node: RichTextNode }>) => void;
}

/**
 * @desc 富文本
 * */
export type RichText = Component<Partial<RichTextProps>>;

/**
 * @desc 动画播放方式
 * @desc backwards 动画从头播
 * @desc forwards 动画从上次结束点接着播
 */
export type ProgressActiveMode = 'backwards' | 'forwards';

/**
 * @desc 进度条属性
 */
export interface ProgressProps {
  /**
   * @desc 百分比
   * @desc 取值范围为 0 - 100
   * @desc 没有默认值
   */
  percent: number;
  /**
   * @desc 是否在进度条右侧显示百分比
   * @desc 默认为 false
   */
  showInfo: boolean;
  /**
   * @desc 圆角大小
   * @desc 默认为 0
   */
  borderRadius: number | string;
  /**
   * @desc 进度条右侧显示的百分比字体大小
   * @desc 默认为 16
   */
  fontSize: number | string;
  /**
   * @desc 进度条线的宽度
   * @desc 单位为 px
   * @desc 默认为 6
   */
  strokeWidth: number;
  /**
   * @desc 已选择的进度条的颜色
   * @desc 默认为 #09bb07，百度默认为 #e6e6e6
   */
  activeColor: string;
  /**
   * @desc 未选择的进度条的颜色
   * @desc 默认为 #ebebeb
   */
  backgroundColor: string;
  /**
   * @desc 是否显示进度条从左往右的动画
   * @desc 默认为 false
   */
  active: boolean;
  /**
   * @desc 动画播放方式
   * @desc backwards 动画从头播
   * @desc forwards 动画从上次结束点接着播
   * @desc 默认为 backwards
   */
  activeMode: ProgressActiveMode;
  /**
   * @desc 进度增加 1% 所需时间
   * @desc 单位为 ms
   * @desc 默认为 30
   */
  duration: number;
  /**
   * @desc 动画完成时触发
   */
  onActiveend: (event: BaseEvent) => void;
}

/**
 * @desc 进度条
 */
export type Progress = Component<Partial<ProgressProps>>;

/**
 * @desc 按钮的大小
 * @desc default 默认
 * @desc mini 小
 */
export type ButtonSize = 'default' | 'mini';

/**
 * @desc 按钮的样式类型，如想在多端统一颜色，请用 default 然后自行写样式
 * @desc primary 微信小程序、360 小程序为绿色，APP、H5、百度小程序、支付宝小程序、飞书小程序、快应用为蓝色，字节跳动小程序为红色，QQ 小程序为浅蓝色
 * @desc default 白色
 * @desc warn 红色
 */
export type ButtonType = 'primary' | 'default' | 'warn';

/**
 * @desc 用于 form 组件，点击分别会触发 form 组件的 submit / reset 事件
 * @desc submit 点击会触发 form 的 submit 事件
 * @desc reset 点击会触发 form 的 reset 事件
 */
export type ButtonFormType = 'submit' | 'reset';

/**
 * @desc 开放能力
 * @desc feedback 打开“意见反馈”页面，用户可提交反馈内容并上传日志
 * @desc share 触发用户转发
 * @desc getUserInfo 获取用户信息，可以从 `@getuserinfo` 回调中获取到用户信息
 * @desc contact 打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以从 `@contact` 回调中获得具体信息
 * @desc getPhoneNumber 获取用户手机号，可以从 `@getphonenumber` 回调中获取到用户信息
 * @desc launchApp 小程序中打开APP，可以通过 `app-parameter` 属性设定向 APP 传的参数
 * @desc openSetting 打开授权设置页
 * @desc chooseAvatar 获取用户头像，可以从 `@chooseavatar` 回调中获取到头像信息
 * @desc getAuthorize 支持小程序授权
 * @desc lifestyle 关注生活号
 * @desc contactShare 分享到通讯录好友
 * @desc openGroupProfile 呼起 QQ 群资料卡页面，可以通过 group-id 属性设定需要打开的群资料卡的群号，同时 manifest.json 中必须配置 groupIdList
 * @desc openGuildProfile 呼起频道页面，可以通过 guild-id 属性设定需要打开的频道 ID
 * @desc openPublicProfile 打开公众号资料卡，可以通过 public-id 属性设定需要打开的公众号资料卡的号码，同时 manifest.json 中必须配置 publicIdList
 * @desc shareMessageToFriend 在自定义开放数据域组件中，向指定好友发起分享
 * @desc addFriend 添加好友，对方需要通过该小程序进行授权，允许被加好友后才能调用成功用户授权
 * @desc addColorSign 添加彩签，点击后添加状态有用户提示，无回调
 * @desc addGroupApp 添加群应用（只有管理员或群主有权操作），添加后给 button 绑定 `@addgroupapp` 事件接收回调数据
 * @desc addToFavorites 收藏当前页面，点击按钮后会触发 Page.onAddToFavorites 方法
 * @desc chooseAddress 选择用户收货地址，可以从 `@chooseaddress` 回调中获取到用户选择的地址信息
 * @desc chooseInvoiceTitle 选择用户发票抬头，可以从 `@chooseinvoicetitle` 回调中获取到用户选择发票抬头信息
 * @desc login 登录，可以从 `@login` 回调中确认是否登录成功
 * @desc subscribe 订阅类模板消息，需要用户授权才可发送
 * @desc favorite 触发用户收藏
 * @desc watchLater 触发用户稍后再看
 * @desc openProfile 触发打开用户主页
 */
export type ButtonOpenType =
  | 'feedback'
  | 'share'
  | 'getUserInfo'
  | 'contact'
  | 'getPhoneNumber'
  | 'launchApp'
  | 'openSetting'
  | 'chooseAvatar'
  | 'getAuthorize'
  | 'lifestyle'
  | 'contactShare'
  | 'openGroupProfile'
  | 'openGuildProfile'
  | 'openPublicProfile'
  | 'shareMessageToFriend'
  | 'addFriend'
  | 'addColorSign'
  | 'addGroupApp'
  | 'addToFavorites'
  | 'chooseAddress'
  | 'chooseInvoiceTitle'
  | 'login'
  | 'subscribe'
  | 'favorite'
  | 'watchLater'
  | 'openProfile';

/**
 * @desc 返回用户信息的语言
 * @desc zh_CN 简体中文
 * @desc zh_TW 繁体中文
 * @desc en 英文
 */
export type ButtonLang = 'zh_CN' | 'zh_TW' | 'en';

export interface ButtonProps {
  /**
   * @desc 按钮的大小
   * @desc default 默认
   * @desc mini 小
   * @desc 默认为 default
   */
  size: ButtonSize;
  /**
   * @desc 按钮的样式类型
   * @desc primary 微信小程序、360 小程序为绿色，APP、H5、百度小程序、支付宝小程序、飞书小程序、快应用为蓝色，字节跳动小程序为红色，QQ 小程序为浅蓝色
   * @desc default 白色
   * @desc warn 红色
   * @desc 默认为 default
   */
  type: ButtonType;
  /**
   * @desc 按钮是否镂空，背景色透明
   * @desc 默认为 false
   */
  plain: boolean;
  /**
   * @desc 是否禁用
   */
  disabled: boolean;
  /**
   * @desc 是否带 loading 图标
   * @desc 默认为 false
   */
  loading: boolean;
  /**
   * @desc 用于 form 组件，点击分别会触发 form 组件的 submit / reset 事件
   * @desc submit 点击会触发 form 的 submit 事件
   * @desc reset 点击会触发 form 的 reset 事件
   * @desc 没有默认值
   */
  formType: ButtonFormType;
  /**
   * @desc 开放能力
   * @desc feedback 打开“意见反馈”页面，用户可提交反馈内容并上传日志
   * @desc share 触发用户转发
   * @desc getUserInfo 获取用户信息，可以从 `@getuserinfo` 回调中获取到用户信息
   * @desc contact 打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以从 `@contact` 回调中获得具体信息
   * @desc getPhoneNumber 获取用户手机号，可以从 `@getphonenumber` 回调中获取到用户信息
   * @desc launchApp 小程序中打开APP，可以通过 `app-parameter` 属性设定向 APP 传的参数
   * @desc openSetting 打开授权设置页
   * @desc chooseAvatar 获取用户头像，可以从 `@chooseavatar` 回调中获取到头像信息
   * @desc getAuthorize 支持小程序授权
   * @desc lifestyle 关注生活号
   * @desc contactShare 分享到通讯录好友
   * @desc openGroupProfile 呼起 QQ 群资料卡页面，可以通过 group-id 属性设定需要打开的群资料卡的群号，同时 manifest.json 中必须配置 groupIdList
   * @desc openGuildProfile 呼起频道页面，可以通过 guild-id 属性设定需要打开的频道 ID
   * @desc openPublicProfile 打开公众号资料卡，可以通过 public-id 属性设定需要打开的公众号资料卡的号码，同时 manifest.json 中必须配置 publicIdList
   * @desc shareMessageToFriend 在自定义开放数据域组件中，向指定好友发起分享
   * @desc addFriend 添加好友，对方需要通过该小程序进行授权，允许被加好友后才能调用成功用户授权
   * @desc addColorSign 添加彩签，点击后添加状态有用户提示，无回调
   * @desc addGroupApp 添加群应用（只有管理员或群主有权操作），添加后给 button 绑定 `@addgroupapp` 事件接收回调数据
   * @desc addToFavorites 收藏当前页面，点击按钮后会触发 Page.onAddToFavorites 方法
   * @desc chooseAddress 选择用户收货地址，可以从 `@chooseaddress` 回调中获取到用户选择的地址信息
   * @desc chooseInvoiceTitle 选择用户发票抬头，可以从 `@chooseinvoicetitle` 回调中获取到用户选择发票抬头信息
   * @desc login 登录，可以从 `@login` 回调中确认是否登录成功
   * @desc subscribe 订阅类模板消息，需要用户授权才可发送
   * @desc favorite 触发用户收藏
   * @desc watchLater 触发用户稍后再看
   * @desc openProfile 触发打开用户主页
   */
  openType: ButtonOpenType;
  /**
   * @desc 指定按下去的样式类
   * @desc 当 hover-class="none" 时，没有点击态效果
   * @desc 默认为 button-hover
   */
  hoverClass: string;
  /**
   * @desc 按住后多久出现点击态
   * @desc 单位为 ms
   * @desc 默认为 20
   */
  hoverStartTime: number;
  /**
   * @desc 手指松开后点击态保留时间
   * @desc 单位为 ms
   * @desc 默认为 70
   */
  hoverStayTime: number;
  /**
   * @desc 打开 APP 时，向 APP 传递的参数
   * @desc open-type="launchApp" 时有效
   */
  appParameter: string;
  /**
   * @desc 指定是否阻止本节点的祖先节点出现点击态
   * @desc 默认为 false
   */
  hoverStopPropagation: boolean;
  /**
   * @desc 返回用户信息的语言
   * @desc zh_CN 简体中文
   * @desc zh_TW 繁体中文
   * @desc en 英文
   * @desc 默认为 en
   */
  lang: ButtonLang;
  /**
   * @desc 会话来源
   * @desc open-type="contact" 时有效
   */
  sessionFrom: string;
  /**
   * @desc 会话内消息卡片标题
   * @desc open-type="contact" 时有效
   * @desc 默认为当前标题
   */
  sendMessageTitle: string;
  /**
   * @desc 会话内消息卡片点击跳转小程序路径
   * @desc open-type="contact" 时有效
   * @desc 默认为当前分享路径
   */
  sendMessagePath: string;
  /**
   * @desc 会话内消息卡片图片
   * @desc open-type="contact" 时有效
   * @desc 默认为截图
   */
  sendMessageImg: string;
  /**
   * @desc 是否显示会话内消息卡片
   * @desc 设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息
   * @desc open-type="contact" 时有效
   * @desc 默认为 false
   */
  showMessageCard: boolean;
  /**
   * @desc 打开群资料卡时，传递的群号
   * @desc open-type="openGroupProfile" 时有效
   */
  groupId: string;
  /**
   * @desc 打开频道页面时，传递的频道号
   * @desc open-type="openGuildProfile" 时有效
   */
  guildId: string;
  /**
   * @desc 打开公众号资料卡时，传递的号码
   * @desc open-type="openPublicProfile" 时有效
   */
  publicId: string;
  /**
   * @desc 获取用户手机号时回调
   * @desc open-type="getPhoneNumber" 时有效
   */
  onGetphonenumber: (
    event: CustomEvent<{
      /**
       * @desc 错误信息
       */
      errMsg?: string;
      /**
       * @desc 动态令牌
       */
      code?: string;
      /**
       * @desc 包括敏感数据在内的完整用户信息的加密数据
       */
      encryptedData?: string;
      /**
       * @desc 加密算法的初始向量
       */
      iv?: string;
      /**
       * @desc 敏感数据对应的云 ID，开通云开发的小程序才会返回，可通过云调用直接获取开放数据
       */
      cloudID?: string;
    }>,
  ) => void;
  /**
   * @desc 使用开放能力发生错误时回调
   */
  onError: (event: BaseEvent) => void;
  /**
   * @desc 在打开授权设置页并关闭后回调
   * @desc open-type="openSetting" 时有效
   */
  onOpensetting: (
    event: CustomEvent<{
      authSetting: Record<string, any>;
    }>,
  ) => void;
  /**
   * @desc 从小程序成功打开 APP 回调
   * @desc open-type="launchApp" 时有效
   */
  onLaunchapp: (event: BaseEvent) => void;
  /**
   * @desc 获取用户头像回调
   * @desc open-type="chooseAvatar" 时有效
   */
  onChooseavatar: (event: BaseEvent) => void;
  /**
   * @desc 添加群应用回调
   * @desc open-type="addGroupApp" 时有效
   */
  onAddgroupapp: (event: BaseEvent) => void;
  /**
   * @desc 用户编辑并选择收货地址回调
   * @desc open-type="chooseAddress" 时有效
   */
  onChooseaddress: (event: BaseEvent) => void;
  /**
   * @desc 用户选择发票抬头回调
   * @desc open-type="chooseInvoiceTitle" 时有效
   */
  onChooseinvoicetitle: (event: BaseEvent) => void;
  /**
   * @desc 订阅消息授权回调
   * @desc open-type="subscribe" 时有效
   */
  onSubscribe: (event: BaseEvent) => void;
  /**
   * @desc 登录回调
   * @desc open-type="login" 时有效
   */
  onLogin: (event: BaseEvent) => void;
}

/**
 * @desc 按钮
 */
export type Button = Component<Partial<ButtonProps>>;