fix(weapp): support skyline components

NervJS#14698
TheKonka · Feb 23, 2024 · 3215675 · 3215675
1 parent 18dfb18
commit 3215675
Show file tree

Hide file tree

Showing 48 changed files with 1,936 additions and 1,160 deletions.
diff --git a/packages/taro-components/__tests__/span.spec.tsx b/packages/taro-components/__tests__/span.spec.tsx
@@ -0,0 +1,25 @@
+import { h } from '@stencil/core'
+import { newSpecPage, SpecPage } from '@stencil/core/testing'
+
+import { Span } from '../src/components/span/span'
+import { printUnimplementedWarning } from './utils'
+
+const logError = jest.fn()
+console.error = logError
+
+describe('Span', () => {
+  let page: SpecPage
+
+  it('unimplemented', async () => {
+    page = await newSpecPage({
+      components: [Span],
+      template: () => <taro-span-core />,
+    })
+    await page.waitForChanges()
+
+    expect(page.root).toEqualHtml(`
+      <taro-span-core></taro-span-core>
+    `)
+    expect(logError).toHaveBeenCalledWith(printUnimplementedWarning(page.root))
+  })
+})
diff --git a/packages/taro-components/src/components/span/readme.md b/packages/taro-components/src/components/span/readme.md
@@ -0,0 +1,8 @@
+# taro-span-core
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/taro-components/src/components/span/span.tsx b/packages/taro-components/src/components/span/span.tsx
@@ -0,0 +1,16 @@
+import { Component, ComponentInterface, h, Host } from '@stencil/core'
+
+import { notSupport } from '../../utils'
+
+@Component({
+  tag: 'taro-span-core',
+})
+export class Span implements ComponentInterface {
+  componentDidLoad() {
+    notSupport('Span', this)
+  }
+
+  render() {
+    return <Host />
+  }
+}
diff --git a/packages/taro-components/types/GridView.d.ts b/packages/taro-components/types/GridView.d.ts
@@ -5,7 +5,7 @@ interface GridViewProps extends StandardProps {
    * @supported weapp
    * @default "aligned"
    */
-  type: string
+  type: keyof GridViewProps.Type
   /** 交叉轴元素数量
    * @supported weapp
    * @default 2
@@ -26,6 +26,21 @@ interface GridViewProps extends StandardProps {
    * @default 0
    */
   maxCrossAxisExtent?: number
+  /**
+   * 长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距
+   * @supported weapp
+   * @default [0, 0, 0, 0]
+   */
+  padding?: [number, number, number, number]
+}
+
+declare namespace GridViewProps {
+  interface Type {
+    /** 瀑布流，根据子元素高度自动布局 */
+    masonry
+    /** 每行高度由同一行中最大高度子节点决定 */
+    aligned
+  }
 }
 /**
  * 网格布局容器，仅支持作为 scroll-view 自定义模式下的直接子节点或 sticky-section 组件直接子节点。仅 Skyline 支持。

diff --git a/packages/taro-components/types/ListView.d.ts b/packages/taro-components/types/ListView.d.ts
@@ -1,6 +1,13 @@
 import { ComponentType } from 'react'
 import { StandardProps } from './common'
-interface ListViewProps extends StandardProps {}
+interface ListViewProps extends StandardProps {
+   /**
+    * 长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距
+    * @supported weapp
+    * @default [0, 0, 0, 0]
+    */
+   padding?: [number, number, number, number]
+}
 
 /**
  * 列表布局容器，仅支持作为 scroll-view 自定义模式下的直接子节点或 sticky-section 组件直接子节点。仅 Skyline 支持。

diff --git a/packages/taro-components/types/Snapshot.d.ts b/packages/taro-components/types/Snapshot.d.ts
@@ -3,7 +3,21 @@ import { ComponentType } from 'react'
 import { StandardProps } from './common'
 
 interface SnapshotProps extends StandardProps {
-  id: string
+  /**
+   * 渲染模式
+   * @supported weapp
+   * @default 'view'
+   */
+  mode: keyof SnapshotProps.Mode
+}
+
+declare namespace SnapshotProps {
+  interface Mode {
+    /** 以真实节点渲染 */
+    view
+    /** 对子节点生成的内容截图渲染 */
+    picture
+  }
 }
 
 /** 截图组件。

diff --git a/packages/taro-components/types/Span.d.ts b/packages/taro-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 }
diff --git a/packages/taro-components/types/StickyHeader.d.ts b/packages/taro-components/types/StickyHeader.d.ts
@@ -1,6 +1,19 @@
 import { ComponentType } from 'react'
 import { StandardProps } from './common'
-interface StickyHeaderProps extends StandardProps {}
+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]
+}
 
 /**
  * 吸顶布局容器，仅支持作为 scroll-view 自定义模式下的直接子节点或 sticky-section 组件直接子节点。仅 Skyline 支持。

diff --git a/packages/taro-components/types/StickySection.d.ts b/packages/taro-components/types/StickySection.d.ts
@@ -6,6 +6,12 @@ interface StickySectionProps extends StandardProps {
    * @default true
    */
   pushPinnedHeader?: boolean
+  /**
+   * 长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距
+   * @supported weapp
+   * @default [0, 0, 0, 0]
+   */
+  padding?: [number, number, number, number]
 }
 /**
  * 吸顶布局容器，仅支持作为 scroll-view 自定义模式下的直接子节点。仅 Skyline 支持。

diff --git a/packages/taro-components/types/Text.d.ts b/packages/taro-components/types/Text.d.ts
@@ -25,6 +25,12 @@ interface TextProps extends StandardProps {
    * @supported alipay
    */
   numberOfLines?: number
+  /**
+   * 文本溢出处理
+   * @supported weapp-skyline
+   * @default 'visible'
+   */
+  overflow?: keyof TextProps.Overflow
   /** 限制文本最大行数
    * @supported weapp
    */
@@ -40,6 +46,16 @@ declare namespace TextProps {
     /** 根据字体设置的空格大小 */
     nbsp
   }
+  interface Overflow {
+    /** 修剪文本 */
+    clip
+    /** 淡出 */
+    fade
+    /** 显示省略号 */
+    ellipsis
+    /** 文本不截断 */
+    visible
+  }
 }
 /** 文本
  * @classification base

diff --git a/packages/taro-components/types/index.d.ts b/packages/taro-components/types/index.d.ts
@@ -45,6 +45,7 @@ export { GridView } from './GridView'
 export { ListView } from './ListView'
 export { ShareElement } from './ShareElement'
 export { Snapshot } from './SnapShot'
+export { Span } from './Span'
 export { StickyHeader } from './StickyHeader'
 export { StickySection } from './StickySection'
 

diff --git a/packages/taro-components/types/index.vue3.d.ts b/packages/taro-components/types/index.vue3.d.ts
@@ -66,6 +66,7 @@ import { ShareElementProps } from './ShareElement'
 import { SliderProps } from './Slider'
 import { SlotProps } from './Slot'
 import { SnapshotProps } from './SnapShot'
+import { SpanProps } from './Span'
 import { StickyHeaderProps } from './StickyHeader'
 import { StickySectionProps } from './StickySection'
 import { SwiperProps } from './Swiper'
@@ -144,6 +145,7 @@ export declare const Textarea: VueComponentType<TextareaProps>
 export declare const GridView: VueComponentType<GridViewProps>
 export declare const ListView: VueComponentType<ListViewProps>
 export declare const Snapshot: VueComponentType<SnapshotProps>
+export declare const Span: VueComponentType<SpanProps>
 export declare const ShareElement: VueComponentType<ShareElementProps>
 export declare const StickyHeader: VueComponentType<StickyHeaderProps>
 export declare const StickySection: VueComponentType<StickySectionProps>
@@ -266,6 +268,8 @@ declare global {
       'taro-share-element-core': ElementAttrs<TransformReact2VueType<ShareElementProps>>
       'snapshot': ElementAttrs<TransformReact2VueType<SnapshotProps>>
       'taro-snapshot-core': ElementAttrs<TransformReact2VueType<SnapshotProps>>
+      'span': ElementAttrs<TransformReact2VueType<SpanProps>>
+      'taro-span-core': ElementAttrs<TransformReact2VueType<SpanProps>>
       'sticky-header': ElementAttrs<TransformReact2VueType<StickyHeaderProps>>
       'taro-sticky-header-core': ElementAttrs<TransformReact2VueType<StickyHeaderProps>>
       'sticky-section': ElementAttrs<TransformReact2VueType<StickySectionProps>>

diff --git a/packages/taro-mini-runner/src/__tests__/__snapshots__/alipay.spec.ts.snap b/packages/taro-mini-runner/src/__tests__/__snapshots__/alipay.spec.ts.snap
@@ -974,7 +974,7 @@ require("./taro");
 </template>
 
 <template name="tmpl_0_6">
-  <text selectable="{{xs.b(i.p1,!1)}}" space="{{i.p2}}" decode="{{xs.b(i.p0,!1)}}" style="{{i.st}}" class="{{i.cl}}" onTap="eh" onTouchMove="eh" onTouchEnd="eh" onTouchCancel="eh" onLongTap="eh"  id="{{i.uid||i.sid}}" data-sid="{{i.sid}}">
+  <text selectable="{{xs.b(i.p1,!1)}}" space="{{i.p2}}" decode="{{xs.b(i.p0,!1)}}" onTouchStart="eh" onTouchMove="eh" onTouchEnd="eh" onTouchCancel="eh" onLongTap="eh" style="{{i.st}}" class="{{i.cl}}" onTap="eh"  id="{{i.uid||i.sid}}" data-sid="{{i.sid}}">
     <block a:for="{{i.cn}}" a:key="sid">
       <template is="{{xs.a(0, item.nn)}}" data="{{i:item}}" />
     </block>