fix/skyline components

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))
+  })
+})

packages/taro-components/src/components/span/readme.md

@@ -0,0 +1,8 @@
+# taro-span-core
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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 />
+  }
+}

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 支持。

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 支持。

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
+  }
 }
 
 /** 截图组件。

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 }

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 支持。

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 支持。

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

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'
 

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>>

packages/taro-weapp/src/components-react.ts

@@ -21,3 +21,4 @@ export const GridView = 'grid-view'
 export const StickyHeader = 'sticky-header'
 export const StickySection = 'sticky-section'
 export const Snapshot = 'snapshot'
+export const Span = 'span'

packages/taro-weapp/src/components.ts

@@ -16,7 +16,9 @@ export const components = {
     'user-select': _false
   },
   Text: {
-    'user-select': _false
+    'user-select': _false,
+    overflow: 'visible',
+    'max-lines': ''
   },
   Map: {
     polygons: '[]',
@@ -152,16 +154,23 @@ export const components = {
   },
   StickySection: {
     'push-pinned-header': _true,
+    padding: '[0, 0, 0, 0]'
   },
   GridView: {
     type: "'aligned'",
     'cross-axis-count': '2',
     'max-cross-axis-extent': _zero,
     'main-axis-gap': _zero,
     'cross-axis-gap': _zero,
+    padding: '[0, 0, 0, 0]'
+  },
+  ListView: {
+    padding: '[0, 0, 0, 0]'
+  },
+  StickyHeader: {
+    'offset-top': '0',
+    padding: '[0, 0, 0, 0]'
   },
-  ListView: {},
-  StickyHeader: {},
   Swiper: {
     'snap-to-edge': _false,
     'easing-function': "'default'"
@@ -422,5 +431,8 @@ export const components = {
     'object-fit': "'contain'",
     bindError: _empty
   },
-  Snapshot: {}
+  Snapshot: {
+    mode: "'view'",
+  },
+  Span: {}
 }

packages/taro-webpack5-runner/src/__tests__/__snapshots__/babel.spec.ts.snap

@@ -85,7 +85,9 @@ require("./runtime");
                 "user-select": _false
             },
             Text: {
-                "user-select": _false
+                "user-select": _false,
+                overflow: "visible",
+                "max-lines": ""
             },
             Map: {
                 polygons: "[]",
@@ -220,17 +222,24 @@ require("./runtime");
                 bindRefresherStatusChange: _empty
             },
             StickySection: {
-                "push-pinned-header": _true
+                "push-pinned-header": _true,
+                padding: "[0, 0, 0, 0]"
             },
             GridView: {
                 type: "'aligned'",
                 "cross-axis-count": "2",
                 "max-cross-axis-extent": _zero,
                 "main-axis-gap": _zero,
-                "cross-axis-gap": _zero
+                "cross-axis-gap": _zero,
+                padding: "[0, 0, 0, 0]"
+            },
+            ListView: {
+                padding: "[0, 0, 0, 0]"
+            },
+            StickyHeader: {
+                "offset-top": "0",
+                padding: "[0, 0, 0, 0]"
             },
-            ListView: {},
-            StickyHeader: {},
             Swiper: {
                 "snap-to-edge": _false,
                 "easing-function": "'default'"
@@ -485,7 +494,10 @@ require("./runtime");
                 "object-fit": "'contain'",
                 bindError: _empty
             },
-            Snapshot: {}
+            Snapshot: {
+                mode: "'view'"
+            },
+            Span: {}
         };
         const hostConfig = {
             initNativeApi: initNativeApi,

packages/taro-webpack5-runner/src/__tests__/__snapshots__/compiler-macros.spec.ts.snap

@@ -85,7 +85,9 @@ require("./runtime");
                 "user-select": _false
             },
             Text: {
-                "user-select": _false
+                "user-select": _false,
+                overflow: "visible",
+                "max-lines": ""
             },
             Map: {
                 polygons: "[]",
@@ -220,17 +222,24 @@ require("./runtime");
                 bindRefresherStatusChange: _empty
             },
             StickySection: {
-                "push-pinned-header": _true
+                "push-pinned-header": _true,
+                padding: "[0, 0, 0, 0]"
             },
             GridView: {
                 type: "'aligned'",
                 "cross-axis-count": "2",
                 "max-cross-axis-extent": _zero,
                 "main-axis-gap": _zero,
-                "cross-axis-gap": _zero
+                "cross-axis-gap": _zero,
+                padding: "[0, 0, 0, 0]"
+            },
+            ListView: {
+                padding: "[0, 0, 0, 0]"
+            },
+            StickyHeader: {
+                "offset-top": "0",
+                padding: "[0, 0, 0, 0]"
             },
-            ListView: {},
-            StickyHeader: {},
             Swiper: {
                 "snap-to-edge": _false,
                 "easing-function": "'default'"
@@ -485,7 +494,10 @@ require("./runtime");
                 "object-fit": "'contain'",
                 bindError: _empty
             },
-            Snapshot: {}
+            Snapshot: {
+                mode: "'view'"
+            },
+            Span: {}
         };
         const hostConfig = {
             initNativeApi: initNativeApi,