[improvement] Sku: tsx (#2801)

packages/sku/components/SkuActions.tsx

@@ -2,10 +2,25 @@ import { use } from '../../utils';
 import { inherit } from '../../utils/functional';
 import Button from '../../button';
 
+// Types
+import Vue, { CreateElement, RenderContext } from 'vue/types';
+import { DefaultSlots } from '../../utils/use/sfc';
+
+export type SkuActionsProps = {
+  buyText?: string;
+  skuEventBus: Vue;
+  showAddCartBtn?: boolean;
+};
+
 const [sfc, bem] = use('sku-actions');
 
-function SkuActions(h, props, slots, ctx) {
+function SkuActions(
-  const emit = name => () => {
+  h: CreateElement,
+  props: SkuActionsProps,
+  slots: DefaultSlots,
+  ctx: RenderContext<SkuActionsProps>
+) {
+  const emit = (name: string) => () => {
     props.skuEventBus.$emit(name);
   };
 
@@ -30,4 +45,4 @@ SkuActions.props = {
   showAddCartBtn: Boolean
 };
 
-export default sfc(SkuActions);
+export default sfc<SkuActionsProps>(SkuActions);

packages/sku/components/SkuHeader.tsx

@@ -2,9 +2,21 @@ import { use } from '../../utils';
 import { inherit } from '../../utils/functional';
 import Icon from '../../icon';
 
+// Types
+import Vue, { CreateElement, RenderContext } from 'vue/types';
+import { DefaultSlots } from '../../utils/use/sfc';
+import { SkuData, SkuGoodsData, SelectedSkuData } from '../type';
+
+export type SkuHeaderProps = {
+  sku: SkuData;
+  goods: SkuGoodsData;
+  skuEventBus: Vue;
+  selectedSku: SelectedSkuData;
+};
+
 const [sfc, bem] = use('sku-header');
 
-function getSkuImg(sku, selectedSku) {
+function getSkuImg(sku: SkuData, selectedSku: SelectedSkuData) {
   const id = selectedSku.s1;
 
   if (id) {
@@ -19,7 +31,12 @@ function getSkuImg(sku, selectedSku) {
   }
 }
 
-function SkuHeader(h, props, slots, ctx) {
+function SkuHeader(
+  h: CreateElement,
+  props: SkuHeaderProps,
+  slots: DefaultSlots,
+  ctx: RenderContext<SkuHeaderProps>
+) {
   const { sku, goods, skuEventBus, selectedSku } = props;
   const goodsImg = getSkuImg(sku, selectedSku) || goods.picture;
 
@@ -54,4 +71,4 @@ SkuHeader.props = {
   selectedSku: Object
 };
 
-export default sfc(SkuHeader);
+export default sfc<SkuHeaderProps>(SkuHeader);

packages/sku/components/SkuRow.js

@@ -1,19 +0,0 @@
-import { use } from '../../utils';
-import { inherit } from '../../utils/functional';
-
-const [sfc, bem] = use('sku-row');
-
-function SkuRow(h, props, slots, ctx) {
-  return (
-    <div class={bem()} {...inherit(ctx)}>
-      <div class={bem('title')}>{props.skuRow.k}：</div>
-      {slots.default && slots.default()}
-    </div>
-  );
-}
-
-SkuRow.props = {
-  skuRow: Object
-};
-
-export default sfc(SkuRow);

packages/sku/components/SkuRow.tsx

@@ -0,0 +1,33 @@
+import { use } from '../../utils';
+import { inherit } from '../../utils/functional';
+
+// Types
+import { CreateElement, RenderContext } from 'vue/types';
+import { DefaultSlots } from '../../utils/use/sfc';
+import { SkuTreeItemData } from '../type';
+
+export type SkuRowProps = {
+  skuRow: SkuTreeItemData;
+};
+
+const [sfc, bem] = use('sku-row');
+
+function SkuRow(
+  h: CreateElement,
+  props: SkuRowProps,
+  slots: DefaultSlots,
+  ctx: RenderContext<SkuRowProps>
+) {
+  return (
+    <div class={bem()} {...inherit(ctx)}>
+      <div class={bem('title')}>{props.skuRow.k}：</div>
+      {slots.default && slots.default()}
+    </div>
+  );
+}
+
+SkuRow.props = {
+  skuRow: Object
+};
+
+export default sfc<SkuRowProps>(SkuRow);

packages/sku/type.ts

@@ -0,0 +1,50 @@
+export type SkuData = {
+  price: string;
+  none_sku: boolean;
+  stock_num: number;
+  hide_stock: boolean;
+  collection_id: number;
+  tree: SkuTreeItemData[];
+  list: SkuListItemData[];
+  messages: SkuMessageData[];
+};
+
+export type SkuTreeItemData = {
+  k: string;
+  v: SkuTreeItemValueData[];
+  k_s: string;
+};
+
+export type SkuTreeItemValueData = {
+  id: string;
+  name: string;
+  imgUrl?: string;
+  img_url?: string;
+};
+
+export type SkuListItemData = {
+  id: number;
+  s1: string;
+  s2: string;
+  s3: string;
+  price: number;
+  stock_num: number;
+};
+
+export type SkuMessageData = {
+  name: string;
+  type: string;
+  required?: string;
+  datetime?: string;
+  multiple?: string;
+};
+
+export type SkuGoodsData = {
+  title: string;
+  picture: string;
+};
+
+export type SelectedSkuData = {
+  s1: string;
+  s2: string;
+};

packages/tab/en-US.md

@@ -165,6 +165,7 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content
 | swipeable | Whether to switch tabs with swipe gestrue in the content | `Boolean` | `false` |
 | animated | Whether to change tabs with animation | `Boolean` | `false` |
 | ellipsis | Whether to ellipsis too long title | `Boolean` | `true` |
+| lazy-render | Whether to enable tab content lazy render | `Boolean` | `true` |
 
 ### Tab API
 

packages/tab/zh-CN.md

@@ -169,6 +169,7 @@ export default {
 | swipe-threshold | 滚动阈值，标签数量超过多少个可滚动 | `Number` | `4` | - |
 | animated | 是否开启切换标签内容时的转场动画 | `Boolean` | `false` | 1.4.5 |
 | ellipsis | 是否省略过长的标题文字 | `Boolean` | `true` | 1.5.0 |
+| lazy-render | 是否开启标签页内容延迟渲染 | `Boolean` | `true` | 1.6.6 |
 
 ### Tab API
 

packages/toast/en-US.md

@@ -106,4 +106,4 @@ toast2.clear();
 | loadingType | Loading icon type, can be set to `spinner` | `String` | `circular` |
 | duration | Toast duration(ms), won't disappear if value is 0 | `Number` | `3000` |
 | className | Custom className | `String | Array | Object` | - |
-| get-container | Return the mount node for Popup | `String | () => HTMLElement` | `body` |
+| get-container | Return the mount node for Toast | `String | () => HTMLElement` | `body` |