update js defination,use Partical insted of IView

doric-cli/target/$.ts

@@ -36,7 +36,7 @@ class __$__ extends Panel {
                     width: 1,
                 },
                 gravity: Gravity.Center,
-            } as IVLayout)
+            })
             .in(rootView)
     }
 

doric-demo/src/AnimatorDemo.ts

@@ -1,4 +1,4 @@
-import { animate, Group, Panel, gravity, Color, AnimationSet, vlayout, scroller, layoutConfig, IVLayout, modal, IText, network, View, stack, IHLayout, hlayout, IView, text, TranslationAnimation, ScaleAnimation, RotationAnimation, FillMode } from "doric";
+import { animate, Group, Panel, gravity, Color, vlayout, layoutConfig, modal, stack, hlayout, text, } from "doric";
 import { title, colors, box } from "./utils";
 
 function thisLabel(str: string) {
@@ -175,7 +175,7 @@ class AnimatorDemo extends Panel {
                                     });
                                 }
                             }),
-                        ]).apply({ space: 10 } as IHLayout),
+                        ]).apply({ space: 10 }),
                     ],
                     { space: 10 }
                 ),

doric-demo/src/ComplicatedAnimations.ts

@@ -1,4 +1,4 @@
-import { animate, Group, Panel, gravity, Color, AnimationSet, vlayout, scroller, layoutConfig, IVLayout, modal, IText, network, View, stack, IHLayout, hlayout, IView, text, TranslationAnimation, ScaleAnimation, RotationAnimation, FillMode, TimingFunction } from "doric";
+import { Group, Panel, gravity, Color, AnimationSet, vlayout, layoutConfig, modal, stack, hlayout, text, TranslationAnimation, ScaleAnimation, RotationAnimation, TimingFunction } from "doric";
 import { title, colors, box } from "./utils";
 
 function thisLabel(str: string) {

doric-demo/src/Counter.ts

@@ -1,4 +1,4 @@
-import { text, vlayout, ViewHolder, VMPanel, ViewModel, Gravity, NativeCall, Text, Color, log, logw, loge, Group, LayoutSpec, layoutConfig, IVLayout, } from "doric"
+import { text, vlayout, ViewHolder, VMPanel, ViewModel, Gravity, NativeCall, Text, Color, log, logw, loge, Group, LayoutSpec, layoutConfig, } from "doric"
 
 interface CountModel {
     count: number

doric-demo/src/DraggableDemo.ts

@@ -1,4 +1,4 @@
-import { Panel, Group, vlayout, layoutConfig, draggable, Color, Text, Draggable, modal, Gravity, stack, text } from "doric";
+import { Panel, Group, vlayout, layoutConfig, draggable, Color, Text, modal, Gravity, stack, text } from "doric";
 import { title } from "./utils";
 @Entry
 class DraggableDemo extends Panel {

doric-demo/src/EffectsDemo.ts

@@ -1,5 +1,5 @@
 
-import { Group, Panel, Text, text, Color, Stack, vlayout, hlayout, scroller, layoutConfig, Gravity, GradientColor, GradientOrientation } from "doric";
+import { Group, Panel, Text, text, Color, Stack, vlayout, hlayout, scroller, layoutConfig, Gravity, GradientOrientation } from "doric";
 import { colors } from "./utils";
 
 
@@ -28,7 +28,7 @@ function label(str: string) {
 
 @Entry
 class EffectsDemo extends Panel {
-    
+
     build(rootView: Group) {
         scroller(
             vlayout(
@@ -431,7 +431,7 @@ class EffectsDemo extends Panel {
                                     box().apply({
                                         width: 100,
                                         height: 100,
-                                        backgroundColor: { 
+                                        backgroundColor: {
                                             start: colors[0],
                                             end: Color.WHITE,
                                             orientation: GradientOrientation.TOP_BOTTOM
@@ -453,7 +453,7 @@ class EffectsDemo extends Panel {
                                     box().apply({
                                         width: 100,
                                         height: 100,
-                                        backgroundColor: { 
+                                        backgroundColor: {
                                             start: colors[0],
                                             end: Color.WHITE,
                                             orientation: GradientOrientation.TR_BL
@@ -475,7 +475,7 @@ class EffectsDemo extends Panel {
                                     box().apply({
                                         width: 100,
                                         height: 100,
-                                        backgroundColor: { 
+                                        backgroundColor: {
                                             start: colors[0],
                                             end: Color.WHITE,
                                             orientation: GradientOrientation.RIGHT_LEFT
@@ -497,7 +497,7 @@ class EffectsDemo extends Panel {
                                     box().apply({
                                         width: 100,
                                         height: 100,
-                                        backgroundColor: { 
+                                        backgroundColor: {
                                             start: colors[0],
                                             end: Color.WHITE,
                                             orientation: GradientOrientation.BR_TL
@@ -519,7 +519,7 @@ class EffectsDemo extends Panel {
                                     box().apply({
                                         width: 100,
                                         height: 100,
-                                        backgroundColor: { 
+                                        backgroundColor: {
                                             start: colors[0],
                                             end: Color.WHITE,
                                             orientation: GradientOrientation.BOTTOM_TOP
@@ -541,7 +541,7 @@ class EffectsDemo extends Panel {
                                     box().apply({
                                         width: 100,
                                         height: 100,
-                                        backgroundColor: { 
+                                        backgroundColor: {
                                             start: colors[0],
                                             end: Color.WHITE,
                                             orientation: GradientOrientation.BL_TR
@@ -563,7 +563,7 @@ class EffectsDemo extends Panel {
                                     box().apply({
                                         width: 100,
                                         height: 100,
-                                        backgroundColor: { 
+                                        backgroundColor: {
                                             start: colors[0],
                                             end: Color.WHITE,
                                             orientation: GradientOrientation.LEFT_RIGHT
@@ -585,7 +585,7 @@ class EffectsDemo extends Panel {
                                     box().apply({
                                         width: 100,
                                         height: 100,
-                                        backgroundColor: { 
+                                        backgroundColor: {
                                             start: colors[0],
                                             end: Color.WHITE,
                                             orientation: GradientOrientation.TL_BR

doric-demo/src/FlexDemo.ts

@@ -1,6 +1,5 @@
 
-import { Group, Panel, text, gravity, Color, LayoutSpec, vlayout, hlayout, scroller, IVLayout, IHLayout, layoutConfig, stack, Gravity, flexlayout, image, ScaleType } from "doric";
+import { Group, Panel, Color, LayoutSpec, scroller, layoutConfig, flexlayout, image, ScaleType, Align, FlexDirection, Wrap } from "doric";
-import { FlexDirection, Wrap, Justify, Align, FlexTypedValue, OverFlow } from "doric/lib/src/util/flexbox";
 import { icon_refresh } from "./utils";
 
 @Entry

doric-demo/src/FlowLayoutDemo.ts

@@ -1,4 +1,4 @@
-import { Group, Panel, flowlayout, layoutConfig, FlowLayoutItem, text, Color, IFlowLayout, LayoutSpec, Gravity, flowItem } from "doric";
+import { Group, Panel, flowlayout, layoutConfig, FlowLayoutItem, text, Color, LayoutSpec, Gravity, flowItem } from "doric";
 import { colors, label } from "./utils";
 
 const imageUrls = [

doric-demo/src/Gobang.ts

@@ -1,4 +1,4 @@
-import { Stack, hlayout, Group, Color, stack, layoutConfig, LayoutSpec, vlayout, IVLayout, Text, ViewHolder, ViewModel, VMPanel, scroller, modal, text, gravity, Gravity, IHLayout, takeNonNull, View, log, popover } from "doric";
+import { Stack, hlayout, Group, Color, stack, layoutConfig, LayoutSpec, vlayout, Text, ViewHolder, ViewModel, VMPanel, scroller, modal, text, gravity, Gravity, View, popover } from "doric";
 import { colors } from "./utils";
 
 enum State {

doric-demo/src/ImageDemo.ts

@@ -1,4 +1,4 @@
-import { Group, Panel, coordinator, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, scroller, layoutConfig, image, IView, IVLayout, ScaleType, Image } from "doric";
+import { Group, Panel, coordinator, text, gravity, Color, LayoutSpec, log, vlayout, scroller, layoutConfig, image, ScaleType, Image } from "doric";
 import { colors, label } from "./utils";
 import { img_base64 } from "./image_base64";
 const imageUrl = 'https://img.zcool.cn/community/01e75b5da933daa801209e1ffa4649.jpg@1280w_1l_2o_100sh.jpg'

doric-demo/src/InputDemo.ts

@@ -1,4 +1,4 @@
-import { Panel, Group, scroller, vlayout, layoutConfig, LayoutSpec, Input, Gravity, log, input } from "doric";
+import { Panel, Group, scroller, vlayout, layoutConfig, LayoutSpec, Input, Gravity, log } from "doric";
 import { title, colors } from "./utils";
 @Entry
 class InputDemo extends Panel {

doric-demo/src/LayoutDemo.ts

@@ -1,5 +1,5 @@
 
-import { Group, Panel, text, gravity, Color, LayoutSpec, vlayout, hlayout, scroller, IVLayout, IHLayout, layoutConfig, stack, Gravity } from "doric";
+import { Group, Panel, text, gravity, Color, LayoutSpec, vlayout, hlayout, scroller, layoutConfig, stack, Gravity } from "doric";
 
 const colors = [
     "#f0932b",

doric-demo/src/ListDemo.ts

@@ -1,4 +1,4 @@
-import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, refreshable, Refreshable, ListItem, layoutConfig } from "doric";
+import { Group, Panel, List, text, gravity, Color, LayoutSpec, list, listItem, log, vlayout, Gravity, hlayout, Text, refreshable, Refreshable, ListItem, layoutConfig } from "doric";
 import { rotatedArrow, colors } from "./utils";
 @Entry
 class ListPanel extends Panel {

doric-demo/src/ModalDemo.ts

@@ -1,4 +1,4 @@
-import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, scroller, layoutConfig, image, IView, IVLayout, ScaleType, IText, modal } from "doric";
+import { Group, Panel, text, Color, LayoutSpec, vlayout, Gravity, scroller, layoutConfig, modal, Text } from "doric";
 import { colors, label } from "./utils";
 
 @Entry
@@ -27,7 +27,7 @@ class ModalDemo extends Panel {
                         onClick: () => {
                             modal(context).toast('This is a toast.')
                         }
-                    } as IText),
+                    }),
                     label('toast on top'),
                     label('Click me').apply({
                         width: 200,
@@ -39,7 +39,7 @@ class ModalDemo extends Panel {
                         onClick: () => {
                             modal(context).toast('This is a toast.', Gravity.Top)
                         }
-                    } as IText),
+                    }),
 
                     label('toast on center'),
                     label('Click me').apply({
@@ -52,7 +52,7 @@ class ModalDemo extends Panel {
                         onClick: () => {
                             modal(context).toast('This is a toast.', Gravity.Center)
                         }
-                    } as IText),
+                    } as Partial<Text>),
                     text({
                         text: "Alert",
                         layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
@@ -78,7 +78,7 @@ class ModalDemo extends Panel {
                                 modal(context).toast('Clicked OK.')
                             })
                         }
-                    } as IText),
+                    }),
                     text({
                         text: "Confirm",
                         layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
@@ -109,7 +109,7 @@ class ModalDemo extends Panel {
                                     modal(context).toast('Clicked Cancel.')
                                 })
                         }
-                    } as IText),
+                    }),
                     text({
                         text: "Prompt",
                         layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
@@ -140,7 +140,7 @@ class ModalDemo extends Panel {
                                     modal(context).toast(`Clicked Cancel.Input:${e}`)
                                 })
                         }
-                    } as IText),
+                    }),
                 ],
                 {
                     layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),

doric-demo/src/NavigatorDemo.ts

@@ -1,4 +1,4 @@
-import { Panel, scroller, vlayout, text, layoutConfig, LayoutSpec, Color, gravity, IVLayout, Group, IText, navigator, modal } from "doric";
+import { Panel, scroller, vlayout, text, layoutConfig, LayoutSpec, Color, gravity, Group, navigator, modal } from "doric";
 import { colors, label } from "./utils";
 @Entry
 class NaivgatorDemo extends Panel {
@@ -35,7 +35,7 @@ class NaivgatorDemo extends Panel {
                                 },
                             })
                         },
-                    } as IText)
+                    })
                 ),
             label('POP').apply({
                 width: 200,
@@ -47,7 +47,7 @@ class NaivgatorDemo extends Panel {
                 onClick: () => {
                     navigator(context).pop()
                 },
-            } as IText),
+            }),
             label('OpenURL').apply({
                 width: 200,
                 height: 50,
@@ -58,12 +58,12 @@ class NaivgatorDemo extends Panel {
                 onClick: () => {
                     navigator(context).openUrl("https://doric.pub")
                 },
-            } as IText),
+            }),
         ]).apply({
             layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
             gravity: gravity().center(),
             space: 10,
-        } as IVLayout)).apply({
+        })).apply({
             layoutConfig: layoutConfig().most(),
         }).in(root)
     }

doric-demo/src/NetworkDemo.ts

@@ -1,4 +1,4 @@
-import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, scroller, layoutConfig, image, IView, IVLayout, ScaleType, modal, IText, network } from "doric";
+import { Group, Panel, gravity, Color, LayoutSpec, vlayout, scroller, layoutConfig, modal, network } from "doric";
 import { title, label, colors } from "./utils";
 
 @Entry
@@ -22,12 +22,12 @@ class NetworkDemo extends Panel {
                         modal(context).toast('Catched:' + JSON.stringify(e))
                     })
                 }
-            } as IText),
+            }),
         ]).apply({
             layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
             gravity: gravity().center(),
             space: 10,
-        } as IVLayout)).apply({
+        })).apply({
             layoutConfig: layoutConfig().most(),
         }).in(rootView)
     }

doric-demo/src/NotchDemo.ts

@@ -1,4 +1,4 @@
-import { Group, Panel, gravity, Color, LayoutSpec, vlayout, scroller, layoutConfig, IVLayout, IText, notch, modal, Gravity, log } from "doric";
+import { Group, Panel, gravity, Color, LayoutSpec, vlayout, scroller, layoutConfig, notch, modal, Gravity, log } from "doric";
 import { title, label, colors } from "./utils";
 
 @Entry
@@ -15,21 +15,21 @@ class NotchDemo extends Panel {
                 layoutConfig: layoutConfig().just(),
                 onClick: () => {
                     notch(context).inset()
-                    .then((inset) => {
+                        .then((inset) => {
-                        let result = "top: " + inset.top + "\n" + "left: " + inset.left + "\n" + "bottom: " + inset.bottom + "\n" + "right: " + inset.right
+                            let result = "top: " + inset.top + "\n" + "left: " + inset.left + "\n" + "bottom: " + inset.bottom + "\n" + "right: " + inset.right
-                        modal(context).toast(result, Gravity.Bottom)
+                            modal(context).toast(result, Gravity.Bottom)
-                        log(result)
+                            log(result)
-                    })
+                        })
-                    .catch(() => {
+                        .catch(() => {
 
-                    })
+                        })
                 }
-            } as IText),
+            }),
         ]).apply({
             layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
             gravity: gravity().center(),
             space: 10,
-        } as IVLayout)).apply({
+        })).apply({
             layoutConfig: layoutConfig().most(),
         }).in(rootView)
     }

doric-demo/src/NotificationDemo.ts

@@ -1,4 +1,4 @@
-import { Group, Panel, navbar, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, scroller, layoutConfig, image, IView, IVLayout, ScaleType, modal, IText, network, navigator, notification } from "doric";
+import { Group, Panel, gravity, Color, LayoutSpec, vlayout, scroller, layoutConfig, modal, notification } from "doric";
 import { title, label, colors } from "./utils";
 
 @Entry
@@ -24,7 +24,7 @@ class NotificationDemo extends Panel {
                         }
                     })
                 }
-            } as IText),
+            }),
             label('Subscribe').apply({
                 width: 200,
                 height: 50,
@@ -43,7 +43,7 @@ class NotificationDemo extends Panel {
                         this.subscribeId = e
                     })
                 }
-            } as IText),
+            }),
             label('Unsubscribe').apply({
                 width: 200,
                 height: 50,
@@ -58,12 +58,12 @@ class NotificationDemo extends Panel {
                         })
                     }
                 }
-            } as IText),
+            }),
         ]).apply({
             layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
             gravity: gravity().center(),
             space: 10,
-        } as IVLayout)).apply({
+        })).apply({
             layoutConfig: layoutConfig().most(),
         }).in(rootView)
     }

doric-demo/src/PopoverDemo.ts

@@ -1,4 +1,4 @@
-import { Group, Panel, popover, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, scroller, layoutConfig, image, IView, IVLayout, ScaleType, modal, IText, network } from "doric";
+import { Group, Panel, popover, text, gravity, Color, LayoutSpec, vlayout, Gravity, scroller, layoutConfig, modal, } from "doric";
 import { title, label, colors } from "./utils";
 
 @Entry
@@ -32,12 +32,12 @@ class PopoverDemo extends Panel {
                         }, 3000)
                     }))
                 }
-            } as IText),
+            }),
         ]).apply({
             layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
             gravity: gravity().center(),
             space: 10,
-        } as IVLayout)).apply({
+        })).apply({
             layoutConfig: layoutConfig().most(),
         }).in(rootView)
     }

doric-demo/src/RefreshableDemo.ts

@@ -1,4 +1,4 @@
-import { refreshable, Group, Panel, pullable, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, scroller, layoutConfig, image, IView, IVLayout, ScaleType, modal, IText, network, navigator, stack, Image } from "doric";
+import { refreshable, Group, Panel, pullable, gravity, Color, LayoutSpec, log, vlayout, Image, layoutConfig, stack, image } from "doric";
 import { title, label, colors, icon_refresh } from "./utils";
 
 @Entry
@@ -47,7 +47,7 @@ class RefreshableDemo extends Panel {
                     onClick: () => {
                         refreshView.setRefreshing(context, true)
                     }
-                } as IText),
+                }),
                 label('stop Refresh').apply({
                     width: 300,
                     height: 50,
@@ -58,7 +58,7 @@ class RefreshableDemo extends Panel {
                     onClick: () => {
                         refreshView.setRefreshing(context, false)
                     }
-                } as IText),
+                }),
 
                 label('Enable Refresh').apply({
                     width: 300,
@@ -70,7 +70,7 @@ class RefreshableDemo extends Panel {
                     onClick: () => {
                         refreshView.setRefreshable(context, true)
                     }
-                } as IText),
+                }),
 
                 label('Disable Refresh').apply({
                     width: 300,
@@ -82,12 +82,12 @@ class RefreshableDemo extends Panel {
                     onClick: () => {
                         refreshView.setRefreshable(context, false)
                     }
-                } as IText),
+                }),
             ]).apply({
                 layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
                 gravity: gravity().centerX(),
                 space: 10,
-            } as IVLayout))
+            }))
         }).apply({
             backgroundColor: Color.YELLOW
         }).in(rootView)

doric-demo/src/StatusBarDemo.ts

@@ -1,4 +1,4 @@
-import { Group, Panel, gravity, Color, LayoutSpec, vlayout, scroller, layoutConfig, IVLayout, IText, statusbar, StatusBarMode } from "doric";
+import { Group, Panel, gravity, Color, LayoutSpec, vlayout, scroller, layoutConfig, statusbar, StatusBarMode } from "doric";
 import { title, label, colors } from "./utils";
 
 @Entry
@@ -16,7 +16,7 @@ class StatusBarDemo extends Panel {
                 onClick: () => {
                     statusbar(context).setHidden(false)
                 }
-            } as IText),
+            }),
             label('hide').apply({
                 width: 200,
                 height: 50,
@@ -27,18 +27,18 @@ class StatusBarDemo extends Panel {
                 onClick: () => {
                     statusbar(context).setHidden(true)
                 }
-            } as IText),
+            }),
             label('light').apply({
                 width: 200,
                 height: 50,
                 backgroundColor: colors[0],
                 textSize: 30,
                 textColor: Color.WHITE,
-                layoutConfig: layoutConfig().just().configMargin({top: 30}),
+                layoutConfig: layoutConfig().just().configMargin({ top: 30 }),
                 onClick: () => {
                     statusbar(context).setMode(StatusBarMode.LIGHT)
                 }
-            } as IText),
+            }),
             label('dark').apply({
                 width: 200,
                 height: 50,
@@ -49,18 +49,18 @@ class StatusBarDemo extends Panel {
                 onClick: () => {
                     statusbar(context).setMode(StatusBarMode.DARK)
                 }
-            } as IText),
+            }),
             label('white').apply({
                 width: 200,
                 height: 50,
                 backgroundColor: colors[0],
                 textSize: 30,
                 textColor: Color.WHITE,
-                layoutConfig: layoutConfig().just().configMargin({top: 30}),
+                layoutConfig: layoutConfig().just().configMargin({ top: 30 }),
                 onClick: () => {
                     statusbar(context).setColor(Color.parse("#ffffff"))
                 }
-            } as IText),
+            }),
             label('black').apply({
                 width: 200,
                 height: 50,
@@ -71,12 +71,12 @@ class StatusBarDemo extends Panel {
                 onClick: () => {
                     statusbar(context).setColor(Color.parse("#000000"))
                 }
-            } as IText),
+            }),
         ]).apply({
             layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
             gravity: gravity().center(),
             space: 10,
-        } as IVLayout)).apply({
+        })).apply({
             layoutConfig: layoutConfig().most(),
         }).in(rootView)
     }

doric-demo/src/StickDemo.ts

@@ -1,4 +1,4 @@
-import { Panel, Group, scroller, vlayout, image, layoutConfig, LayoutSpec, Input, Gravity, log, stack, hlayout, text, IHLayout, CENTER, slider, slideItem, modal, Slider, Text, Color, View, Stack, animate, flowlayout, FlowLayoutItem, NestedSlider, ScaleType } from "doric";
+import { Panel, Group, scroller, vlayout, image, layoutConfig, LayoutSpec, Input, Gravity, log, stack, hlayout, text, CENTER, slider, slideItem, modal, Slider, Text, Color, View, Stack, animate, flowlayout, FlowLayoutItem, NestedSlider, ScaleType } from "doric";
 import { title, colors } from "./utils";
 
 function tab(idx: number, title: string, sliderView: Slider) {
@@ -52,7 +52,7 @@ class StickDemo extends Panel {
                     ]).apply({
                         layoutConfig: layoutConfig().most(),
                         gravity: Gravity.Center,
-                    } as IHLayout),
+                    }),
                     this.indicator,
                 ]).apply({
                     layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST),

doric-demo/src/StorageDemo.ts

@@ -1,4 +1,4 @@
-import { storage, Panel, scroller, vlayout, text, layoutConfig, LayoutSpec, Color, gravity, IVLayout, Group, IText, modal, Text, log, loge } from "doric";
+import { storage, Panel, scroller, vlayout, text, layoutConfig, LayoutSpec, Color, gravity, Group, modal, Text, log, loge } from "doric";
 import { colors, label } from "./utils";
 const storedKey = 'StoredKey'
 const zone = 'StorageDemo'
@@ -53,7 +53,7 @@ class StorageDemo extends Panel {
                         })
                     })
                 },
-            } as IText),
+            }),
             label('remove value').apply({
                 width: 200,
                 height: 50,
@@ -66,7 +66,7 @@ class StorageDemo extends Panel {
                         this.update()
                     })
                 },
-            } as IText),
+            }),
             label('clear values').apply({
                 width: 200,
                 height: 50,
@@ -79,12 +79,12 @@ class StorageDemo extends Panel {
                         this.update()
                     })
                 },
-            } as IText),
+            }),
         ]).apply({
             layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
             gravity: gravity().center(),
             space: 10,
-        } as IVLayout)).apply({
+        })).apply({
             layoutConfig: layoutConfig().most(),
         }).in(root)
         this.update()

doric-js/bundle/doric-lib.es5.js

@@ -1767,7 +1767,12 @@ var Image = /** @class */ (function (_super) {
     ], Image.prototype, "placeHolderImage", void 0);
     __decorate$4([
         Property,
-        __metadata$4("design:type", Color)
+        __metadata$4("design:type", Color
+        /**
+         * Display while image is failed to load
+         * It can be file name in local path
+         */
+        )
     ], Image.prototype, "placeHolderColor", void 0);
     __decorate$4([
         Property,
@@ -2233,6 +2238,85 @@ function pullable(v, config) {
     return v;
 }
 
+var ValueType;
+(function (ValueType) {
+    ValueType[ValueType["Undefined"] = 0] = "Undefined";
+    ValueType[ValueType["Point"] = 1] = "Point";
+    ValueType[ValueType["Percent"] = 2] = "Percent";
+    ValueType[ValueType["Auto"] = 3] = "Auto";
+})(ValueType || (ValueType = {}));
+var FlexTypedValue = /** @class */ (function () {
+    function FlexTypedValue(type) {
+        this.value = 0;
+        this.type = type;
+    }
+    FlexTypedValue.percent = function (v) {
+        var ret = new FlexTypedValue(ValueType.Percent);
+        ret.value = v;
+        return ret;
+    };
+    FlexTypedValue.point = function (v) {
+        var ret = new FlexTypedValue(ValueType.Point);
+        ret.value = v;
+        return ret;
+    };
+    FlexTypedValue.prototype.toModel = function () {
+        return {
+            type: this.type,
+            value: this.value,
+        };
+    };
+    FlexTypedValue.Auto = new FlexTypedValue(ValueType.Auto);
+    return FlexTypedValue;
+}());
+(function (FlexDirection) {
+    FlexDirection[FlexDirection["COLUMN"] = 0] = "COLUMN";
+    FlexDirection[FlexDirection["COLUMN_REVERSE"] = 1] = "COLUMN_REVERSE";
+    FlexDirection[FlexDirection["ROW"] = 2] = "ROW";
+    FlexDirection[FlexDirection["ROW_REVERSE"] = 3] = "ROW_REVERSE";
+})(exports.FlexDirection || (exports.FlexDirection = {}));
+(function (Align) {
+    Align[Align["AUTO"] = 0] = "AUTO";
+    Align[Align["FLEX_START"] = 1] = "FLEX_START";
+    Align[Align["CENTER"] = 2] = "CENTER";
+    Align[Align["FLEX_END"] = 3] = "FLEX_END";
+    Align[Align["STRETCH"] = 4] = "STRETCH";
+    Align[Align["BASELINE"] = 5] = "BASELINE";
+    Align[Align["SPACE_BETWEEN"] = 6] = "SPACE_BETWEEN";
+    Align[Align["SPACE_AROUND"] = 7] = "SPACE_AROUND";
+})(exports.Align || (exports.Align = {}));
+(function (Justify) {
+    Justify[Justify["FLEX_START"] = 0] = "FLEX_START";
+    Justify[Justify["CENTER"] = 1] = "CENTER";
+    Justify[Justify["FLEX_END"] = 2] = "FLEX_END";
+    Justify[Justify["SPACE_BETWEEN"] = 3] = "SPACE_BETWEEN";
+    Justify[Justify["SPACE_AROUND"] = 4] = "SPACE_AROUND";
+    Justify[Justify["SPACE_EVENLY"] = 5] = "SPACE_EVENLY";
+})(exports.Justify || (exports.Justify = {}));
+(function (Direction) {
+    Direction[Direction["INHERIT"] = 0] = "INHERIT";
+    Direction[Direction["LTR"] = 1] = "LTR";
+    Direction[Direction["RTL"] = 2] = "RTL";
+})(exports.Direction || (exports.Direction = {}));
+(function (PositionType) {
+    PositionType[PositionType["RELATIVE"] = 0] = "RELATIVE";
+    PositionType[PositionType["ABSOLUTE"] = 1] = "ABSOLUTE";
+})(exports.PositionType || (exports.PositionType = {}));
+(function (Wrap) {
+    Wrap[Wrap["NO_WRAP"] = 0] = "NO_WRAP";
+    Wrap[Wrap["WRAP"] = 1] = "WRAP";
+    Wrap[Wrap["WRAP_REVERSE"] = 2] = "WRAP_REVERSE";
+})(exports.Wrap || (exports.Wrap = {}));
+(function (OverFlow) {
+    OverFlow[OverFlow["VISIBLE"] = 0] = "VISIBLE";
+    OverFlow[OverFlow["HIDDEN"] = 1] = "HIDDEN";
+    OverFlow[OverFlow["SCROLL"] = 2] = "SCROLL";
+})(exports.OverFlow || (exports.OverFlow = {}));
+(function (Display) {
+    Display[Display["FLEX"] = 0] = "FLEX";
+    Display[Display["NONE"] = 1] = "NONE";
+})(exports.Display || (exports.Display = {}));
+
 var __extends$9 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -3248,6 +3332,7 @@ exports.CENTER_Y = CENTER_Y;
 exports.Color = Color;
 exports.Draggable = Draggable;
 exports.FlexLayout = FlexLayout;
+exports.FlexTypedValue = FlexTypedValue;
 exports.FlowLayout = FlowLayout;
 exports.FlowLayoutItem = FlowLayoutItem;
 exports.Gravity = Gravity;

doric-js/bundle/doric-lib.js

@@ -1317,7 +1317,12 @@ __decorate$4([
 ], Image.prototype, "placeHolderImage", void 0);
 __decorate$4([
     Property,
-    __metadata$4("design:type", Color)
+    __metadata$4("design:type", Color
+    /**
+     * Display while image is failed to load
+     * It can be file name in local path
+     */
+    )
 ], Image.prototype, "placeHolderColor", void 0);
 __decorate$4([
     Property,
@@ -1678,6 +1683,84 @@ function pullable(v, config) {
     return v;
 }
 
+var ValueType;
+(function (ValueType) {
+    ValueType[ValueType["Undefined"] = 0] = "Undefined";
+    ValueType[ValueType["Point"] = 1] = "Point";
+    ValueType[ValueType["Percent"] = 2] = "Percent";
+    ValueType[ValueType["Auto"] = 3] = "Auto";
+})(ValueType || (ValueType = {}));
+class FlexTypedValue {
+    constructor(type) {
+        this.value = 0;
+        this.type = type;
+    }
+    static percent(v) {
+        const ret = new FlexTypedValue(ValueType.Percent);
+        ret.value = v;
+        return ret;
+    }
+    static point(v) {
+        const ret = new FlexTypedValue(ValueType.Point);
+        ret.value = v;
+        return ret;
+    }
+    toModel() {
+        return {
+            type: this.type,
+            value: this.value,
+        };
+    }
+}
+FlexTypedValue.Auto = new FlexTypedValue(ValueType.Auto);
+(function (FlexDirection) {
+    FlexDirection[FlexDirection["COLUMN"] = 0] = "COLUMN";
+    FlexDirection[FlexDirection["COLUMN_REVERSE"] = 1] = "COLUMN_REVERSE";
+    FlexDirection[FlexDirection["ROW"] = 2] = "ROW";
+    FlexDirection[FlexDirection["ROW_REVERSE"] = 3] = "ROW_REVERSE";
+})(exports.FlexDirection || (exports.FlexDirection = {}));
+(function (Align) {
+    Align[Align["AUTO"] = 0] = "AUTO";
+    Align[Align["FLEX_START"] = 1] = "FLEX_START";
+    Align[Align["CENTER"] = 2] = "CENTER";
+    Align[Align["FLEX_END"] = 3] = "FLEX_END";
+    Align[Align["STRETCH"] = 4] = "STRETCH";
+    Align[Align["BASELINE"] = 5] = "BASELINE";
+    Align[Align["SPACE_BETWEEN"] = 6] = "SPACE_BETWEEN";
+    Align[Align["SPACE_AROUND"] = 7] = "SPACE_AROUND";
+})(exports.Align || (exports.Align = {}));
+(function (Justify) {
+    Justify[Justify["FLEX_START"] = 0] = "FLEX_START";
+    Justify[Justify["CENTER"] = 1] = "CENTER";
+    Justify[Justify["FLEX_END"] = 2] = "FLEX_END";
+    Justify[Justify["SPACE_BETWEEN"] = 3] = "SPACE_BETWEEN";
+    Justify[Justify["SPACE_AROUND"] = 4] = "SPACE_AROUND";
+    Justify[Justify["SPACE_EVENLY"] = 5] = "SPACE_EVENLY";
+})(exports.Justify || (exports.Justify = {}));
+(function (Direction) {
+    Direction[Direction["INHERIT"] = 0] = "INHERIT";
+    Direction[Direction["LTR"] = 1] = "LTR";
+    Direction[Direction["RTL"] = 2] = "RTL";
+})(exports.Direction || (exports.Direction = {}));
+(function (PositionType) {
+    PositionType[PositionType["RELATIVE"] = 0] = "RELATIVE";
+    PositionType[PositionType["ABSOLUTE"] = 1] = "ABSOLUTE";
+})(exports.PositionType || (exports.PositionType = {}));
+(function (Wrap) {
+    Wrap[Wrap["NO_WRAP"] = 0] = "NO_WRAP";
+    Wrap[Wrap["WRAP"] = 1] = "WRAP";
+    Wrap[Wrap["WRAP_REVERSE"] = 2] = "WRAP_REVERSE";
+})(exports.Wrap || (exports.Wrap = {}));
+(function (OverFlow) {
+    OverFlow[OverFlow["VISIBLE"] = 0] = "VISIBLE";
+    OverFlow[OverFlow["HIDDEN"] = 1] = "HIDDEN";
+    OverFlow[OverFlow["SCROLL"] = 2] = "SCROLL";
+})(exports.OverFlow || (exports.OverFlow = {}));
+(function (Display) {
+    Display[Display["FLEX"] = 0] = "FLEX";
+    Display[Display["NONE"] = 1] = "NONE";
+})(exports.Display || (exports.Display = {}));
+
 var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -2460,6 +2543,7 @@ exports.CENTER_Y = CENTER_Y;
 exports.Color = Color;
 exports.Draggable = Draggable;
 exports.FlexLayout = FlexLayout;
+exports.FlexTypedValue = FlexTypedValue;
 exports.FlowLayout = FlowLayout;
 exports.FlowLayoutItem = FlowLayoutItem;
 exports.Gravity = Gravity;

doric-js/bundle/doric-vm.js

@@ -2776,7 +2776,12 @@ __decorate$4([
 ], Image.prototype, "placeHolderImage", void 0);
 __decorate$4([
     Property,
-    __metadata$4("design:type", Color)
+    __metadata$4("design:type", Color
+    /**
+     * Display while image is failed to load
+     * It can be file name in local path
+     */
+    )
 ], Image.prototype, "placeHolderColor", void 0);
 __decorate$4([
     Property,
@@ -3137,6 +3142,84 @@ function pullable(v, config) {
     return v;
 }
 
+var ValueType;
+(function (ValueType) {
+    ValueType[ValueType["Undefined"] = 0] = "Undefined";
+    ValueType[ValueType["Point"] = 1] = "Point";
+    ValueType[ValueType["Percent"] = 2] = "Percent";
+    ValueType[ValueType["Auto"] = 3] = "Auto";
+})(ValueType || (ValueType = {}));
+class FlexTypedValue {
+    constructor(type) {
+        this.value = 0;
+        this.type = type;
+    }
+    static percent(v) {
+        const ret = new FlexTypedValue(ValueType.Percent);
+        ret.value = v;
+        return ret;
+    }
+    static point(v) {
+        const ret = new FlexTypedValue(ValueType.Point);
+        ret.value = v;
+        return ret;
+    }
+    toModel() {
+        return {
+            type: this.type,
+            value: this.value,
+        };
+    }
+}
+FlexTypedValue.Auto = new FlexTypedValue(ValueType.Auto);
+(function (FlexDirection) {
+    FlexDirection[FlexDirection["COLUMN"] = 0] = "COLUMN";
+    FlexDirection[FlexDirection["COLUMN_REVERSE"] = 1] = "COLUMN_REVERSE";
+    FlexDirection[FlexDirection["ROW"] = 2] = "ROW";
+    FlexDirection[FlexDirection["ROW_REVERSE"] = 3] = "ROW_REVERSE";
+})(exports.FlexDirection || (exports.FlexDirection = {}));
+(function (Align) {
+    Align[Align["AUTO"] = 0] = "AUTO";
+    Align[Align["FLEX_START"] = 1] = "FLEX_START";
+    Align[Align["CENTER"] = 2] = "CENTER";
+    Align[Align["FLEX_END"] = 3] = "FLEX_END";
+    Align[Align["STRETCH"] = 4] = "STRETCH";
+    Align[Align["BASELINE"] = 5] = "BASELINE";
+    Align[Align["SPACE_BETWEEN"] = 6] = "SPACE_BETWEEN";
+    Align[Align["SPACE_AROUND"] = 7] = "SPACE_AROUND";
+})(exports.Align || (exports.Align = {}));
+(function (Justify) {
+    Justify[Justify["FLEX_START"] = 0] = "FLEX_START";
+    Justify[Justify["CENTER"] = 1] = "CENTER";
+    Justify[Justify["FLEX_END"] = 2] = "FLEX_END";
+    Justify[Justify["SPACE_BETWEEN"] = 3] = "SPACE_BETWEEN";
+    Justify[Justify["SPACE_AROUND"] = 4] = "SPACE_AROUND";
+    Justify[Justify["SPACE_EVENLY"] = 5] = "SPACE_EVENLY";
+})(exports.Justify || (exports.Justify = {}));
+(function (Direction) {
+    Direction[Direction["INHERIT"] = 0] = "INHERIT";
+    Direction[Direction["LTR"] = 1] = "LTR";
+    Direction[Direction["RTL"] = 2] = "RTL";
+})(exports.Direction || (exports.Direction = {}));
+(function (PositionType) {
+    PositionType[PositionType["RELATIVE"] = 0] = "RELATIVE";
+    PositionType[PositionType["ABSOLUTE"] = 1] = "ABSOLUTE";
+})(exports.PositionType || (exports.PositionType = {}));
+(function (Wrap) {
+    Wrap[Wrap["NO_WRAP"] = 0] = "NO_WRAP";
+    Wrap[Wrap["WRAP"] = 1] = "WRAP";
+    Wrap[Wrap["WRAP_REVERSE"] = 2] = "WRAP_REVERSE";
+})(exports.Wrap || (exports.Wrap = {}));
+(function (OverFlow) {
+    OverFlow[OverFlow["VISIBLE"] = 0] = "VISIBLE";
+    OverFlow[OverFlow["HIDDEN"] = 1] = "HIDDEN";
+    OverFlow[OverFlow["SCROLL"] = 2] = "SCROLL";
+})(exports.OverFlow || (exports.OverFlow = {}));
+(function (Display) {
+    Display[Display["FLEX"] = 0] = "FLEX";
+    Display[Display["NONE"] = 1] = "NONE";
+})(exports.Display || (exports.Display = {}));
+
 var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -4054,6 +4137,7 @@ exports.CENTER_Y = CENTER_Y;
 exports.Color = Color;
 exports.Draggable = Draggable;
 exports.FlexLayout = FlexLayout;
+exports.FlexTypedValue = FlexTypedValue;
 exports.FlowLayout = FlowLayout;
 exports.FlowLayoutItem = FlowLayoutItem;
 exports.Gravity = Gravity;

doric-js/index.d.ts

@@ -111,6 +111,7 @@ declare module 'doric/lib/src/util/index.util' {
     export * from 'doric/lib/src/util/log';
     export * from 'doric/lib/src/util/types';
     export * from 'doric/lib/src/util/uniqueId';
+    export * from 'doric/lib/src/util/flexbox';
 }
 
 declare module 'doric/lib/src/pattern/index.pattern' {
@@ -127,63 +128,6 @@ declare module 'doric/lib/src/ui/view' {
     import { IAnimation } from "doric/lib/src/ui/animation";
     import { FlexConfig } from "doric/lib/src/util/flexbox";
     export function Property(target: Object, propKey: string): void;
-    export interface IView {
-            width?: number;
-            height?: number;
-            backgroundColor?: Color | GradientColor;
-            corners?: number | {
-                    leftTop?: number;
-                    rightTop?: number;
-                    leftBottom?: number;
-                    rightBottom?: number;
-            };
-            border?: {
-                    width: number;
-                    color: Color;
-            };
-            shadow?: {
-                    color: Color;
-                    opacity: number;
-                    radius: number;
-                    offsetX: number;
-                    offsetY: number;
-            };
-            /**
-                * float [0,..1]
-                */
-            alpha?: number;
-            hidden?: boolean;
-            padding?: {
-                    left?: number;
-                    right?: number;
-                    top?: number;
-                    bottom?: number;
-            };
-            layoutConfig?: LayoutConfig;
-            onClick?: Function;
-            identifier?: string;
-            /**++++++++++transform++++++++++*/
-            translationX?: number;
-            translationY?: number;
-            scaleX?: number;
-            scaleY?: number;
-            /**
-                * float [0,..1]
-                */
-            pivotX?: number;
-            /**
-                * float [0,..1]
-                */
-            pivotY?: number;
-            /**
-                * rotation*PI
-                */
-            rotation?: number;
-            /**
-                * Only affected when its superview or itself is FlexLayout.
-                */
-            flexConfig?: FlexConfig;
-    }
     export type NativeViewModel = {
             id: string;
             type: string;
@@ -191,7 +135,7 @@ declare module 'doric/lib/src/ui/view' {
                     [index: string]: Model;
             };
     };
-    export abstract class View implements Modeling, IView {
+    export abstract class View implements Modeling {
             width: number;
             height: number;
             x: number;
@@ -214,6 +158,9 @@ declare module 'doric/lib/src/ui/view' {
                     offsetX: number;
                     offsetY: number;
             };
+            /**
+                * float [0,..1]
+                */
             alpha?: number;
             hidden?: boolean;
             viewId: string;
@@ -252,7 +199,7 @@ declare module 'doric/lib/src/ui/view' {
             toModel(): NativeViewModel;
             let(block: (it: this) => void): void;
             also(block: (it: this) => void): this;
-            apply(config: IView): this;
+            apply(config: Partial<this>): this;
             in(group: Group): this;
             nativeChannel(context: BridgeContext, name: string): (args?: any) => Promise<any>;
             getWidth(context: BridgeContext): Promise<number>;
@@ -266,12 +213,20 @@ declare module 'doric/lib/src/ui/view' {
             /**++++++++++transform++++++++++*/
             translationX?: number;
             translationY?: number;
+            /**
+                * float [0,..1]
+                */
             scaleX?: number;
             scaleY?: number;
             pivotX?: number;
             pivotY?: number;
+            /**
+                * rotation*PI
+                */
             rotation?: number;
-            /**----------transform----------*/
+            /**
+                * Only affected when its superview or itself is FlexLayout.
+                */
             flexConfig?: FlexConfig;
             doAnimation(context: BridgeContext, animation: IAnimation): Promise<void>;
     }
@@ -435,11 +390,9 @@ declare module 'doric/lib/src/ui/animation' {
 }
 
 declare module 'doric/lib/src/widget/layouts' {
-    import { Group, IView, View } from "doric/lib/src/ui/view";
+    import { Group, View } from "doric/lib/src/ui/view";
     import { Gravity } from "doric/lib/src/util/gravity";
-    export interface IStack extends IView {
+    export class Stack extends Group {
-    }
-    export class Stack extends Group implements IStack {
     }
     export class Root extends Stack {
     }
@@ -447,32 +400,24 @@ declare module 'doric/lib/src/widget/layouts' {
         space?: number;
         gravity?: Gravity;
     }
-    export interface IVLayout extends IView {
+    export class VLayout extends LinearLayout {
-        space?: number;
-        gravity?: Gravity;
     }
-    export class VLayout extends LinearLayout implements IVLayout {
+    export class HLayout extends LinearLayout {
     }
-    export interface IHLayout extends IView {
+    export function stack(views: View[], config?: Partial<Stack>): Stack;
-        space?: number;
+    export function hlayout(views: View[], config?: Partial<HLayout>): HLayout;
-        gravity?: Gravity;
+    export function vlayout(views: View[], config?: Partial<VLayout>): VLayout;
-    }
-    export class HLayout extends LinearLayout implements IHLayout {
-    }
-    export function stack(views: View[], config?: IStack): Stack;
-    export function hlayout(views: View[], config?: IHLayout): HLayout;
-    export function vlayout(views: View[], config?: IVLayout): VLayout;
     export class FlexLayout extends Group {
     }
-    export function flexlayout(views: View[], config?: IView): FlexLayout;
+    export function flexlayout(views: View[], config?: Partial<FlexLayout>): FlexLayout;
     export {};
 }
 
 declare module 'doric/lib/src/widget/text' {
-    import { IView, View } from "doric/lib/src/ui/view";
+    import { View } from "doric/lib/src/ui/view";
     import { Color } from "doric/lib/src/util/color";
     import { Gravity } from "doric/lib/src/util/gravity";
-    export interface IText extends IView {
+    export class Text extends View {
         text?: string;
         textColor?: Color;
         textSize?: number;
@@ -487,33 +432,18 @@ declare module 'doric/lib/src/widget/text' {
         underline?: boolean;
         htmlText?: string;
     }
-    export class Text extends View implements IText {
+    export function text(config: Partial<Text>): Text;
-        text?: string;
-        textColor?: Color;
-        textSize?: number;
-        maxLines?: number;
-        textAlignment?: Gravity;
-        fontStyle?: "normal" | "bold" | "italic" | "bold_italic";
-        font?: string;
-        maxWidth?: number;
-        maxHeight?: number;
-        lineSpacing?: number;
-        strikethrough?: boolean;
-        underline?: boolean;
-        htmlText?: string;
-    }
-    export function text(config: IText): Text;
 }
 
 declare module 'doric/lib/src/widget/image' {
-    import { IView, View } from "doric/lib/src/ui/view";
+    import { View } from "doric/lib/src/ui/view";
     import { Color } from "doric/lib/src/util/color";
     export enum ScaleType {
             ScaleToFill = 0,
             ScaleAspectFit = 1,
             ScaleAspectFill = 2
     }
-    export interface IImage extends IView {
+    export class Image extends View {
             imageUrl?: string;
             /**
                 * Read image from local path
@@ -557,54 +487,19 @@ declare module 'doric/lib/src/widget/image' {
                     height: number;
             } | undefined) => void;
     }
-    export class Image extends View implements IImage {
+    export function image(config: Partial<Image>): Image;
-            imageUrl?: string;
-            imagePath?: string;
-            imageRes?: string;
-            imageBase64?: string;
-            scaleType?: ScaleType;
-            isBlur?: boolean;
-            placeHolderImage?: string;
-            placeHolderColor?: Color;
-            errorImage?: string;
-            errorColor?: Color;
-            loadCallback?: (image: {
-                    width: number;
-                    height: number;
-            } | undefined) => void;
-    }
-    export function image(config: IImage): Image;
 }
 
 declare module 'doric/lib/src/widget/list' {
-    import { View, Superview, IView, NativeViewModel } from "doric/lib/src/ui/view";
+    import { View, Superview, NativeViewModel } from "doric/lib/src/ui/view";
-    import { Stack, IStack } from "doric/lib/src/widget/layouts";
+    import { Stack } from "doric/lib/src/widget/layouts";
-    export interface IListItem extends IStack {
+    export class ListItem extends Stack {
-        identifier?: string;
-    }
-    export class ListItem extends Stack implements IListItem {
         /**
           * Set to reuse native view
           */
         identifier?: string;
     }
-    export interface IList extends IView {
+    export class List extends Superview {
-        renderItem: (index: number) => ListItem;
-        itemCount: number;
-        batchCount?: number;
-        onLoadMore?: () => void;
-        loadMore?: boolean;
-        loadMoreView?: ListItem;
-        onScroll?: (offset: {
-            x: number;
-            y: number;
-        }) => void;
-        onScrollEnd?: (offset: {
-            x: number;
-            y: number;
-        }) => void;
-    }
-    export class List extends Superview implements IList {
         allSubviews(): IterableIterator<ListItem> | ListItem[];
         itemCount: number;
         renderItem: (index: number) => ListItem;
@@ -624,31 +519,21 @@ declare module 'doric/lib/src/widget/list' {
         isDirty(): boolean;
         toModel(): NativeViewModel;
     }
-    export function list(config: IList): List;
+    export function list(config: Partial<List>): List;
-    export function listItem(item: View | View[], config?: IListItem): ListItem;
+    export function listItem(item: View | View[], config?: Partial<ListItem>): ListItem;
 }
 
 declare module 'doric/lib/src/widget/slider' {
-    import { Superview, View, IView } from "doric/lib/src/ui/view";
+    import { Superview, View } from "doric/lib/src/ui/view";
-    import { Stack, IStack } from "doric/lib/src/widget/layouts";
+    import { Stack } from "doric/lib/src/widget/layouts";
     import { BridgeContext } from "doric/lib/src/runtime/global";
-    export interface ISlideItem extends IStack {
+    export class SlideItem extends Stack {
-        identifier?: string;
-    }
-    export class SlideItem extends Stack implements ISlideItem {
         /**
           * Set to reuse native view
           */
         identifier?: string;
     }
-    export interface ISlider extends IView {
+    export class Slider extends Superview {
-        renderPage: (index: number) => SlideItem;
-        itemCount: number;
-        batchCount?: number;
-        onPageSlided?: (index: number) => void;
-        loop?: boolean;
-    }
-    export class Slider extends Superview implements ISlider {
         allSubviews(): IterableIterator<SlideItem>;
         itemCount: number;
         renderPage: (index: number) => SlideItem;
@@ -659,22 +544,15 @@ declare module 'doric/lib/src/widget/slider' {
         slidePage(context: BridgeContext, page: number, smooth?: boolean): Promise<any>;
         getSlidedPage(context: BridgeContext): Promise<number>;
     }
-    export function slider(config: ISlider): Slider;
+    export function slider(config: Partial<Slider>): Slider;
-    export function slideItem(item: View | View[], config?: ISlideItem): SlideItem;
+    export function slideItem(item: View | View[], config?: Partial<SlideItem>): SlideItem;
 }
 
 declare module 'doric/lib/src/widget/scroller' {
-    import { Superview, View, IView, NativeViewModel } from 'doric/lib/src/ui/view';
+    import { Superview, View, NativeViewModel } from 'doric/lib/src/ui/view';
     import { BridgeContext } from 'doric/lib/src/runtime/global';
-    export function scroller(content: View, config?: IScroller): Scroller;
+    export function scroller(content: View, config?: Partial<Scroller>): Scroller;
-    export interface IScroller extends IView {
+    export class Scroller extends Superview {
-        content?: View;
-        contentOffset?: {
-            x: number;
-            y: number;
-        };
-    }
-    export class Scroller extends Superview implements IScroller {
         content: View;
         contentOffset?: {
             x: number;
@@ -702,19 +580,12 @@ declare module 'doric/lib/src/widget/scroller' {
 }
 
 declare module 'doric/lib/src/widget/refreshable' {
-    import { View, Superview, IView, NativeViewModel } from "doric/lib/src/ui/view";
+    import { View, Superview, NativeViewModel } from "doric/lib/src/ui/view";
-    import { List } from "doric/lib/src/widget/list";
-    import { Scroller } from "doric/lib/src/widget/scroller";
     import { BridgeContext } from "doric/lib/src/runtime/global";
-    export interface IRefreshable extends IView {
+    export class Refreshable extends Superview {
         content: View;
         header?: View;
         onRefresh?: () => void;
-    }
-    export class Refreshable extends Superview implements IRefreshable {
-        content: List | Scroller;
-        header?: View;
-        onRefresh?: () => void;
         allSubviews(): View[];
         setRefreshable(context: BridgeContext, refreshable: boolean): Promise<any>;
         setRefreshing(context: BridgeContext, refreshing: boolean): Promise<any>;
@@ -722,7 +593,7 @@ declare module 'doric/lib/src/widget/refreshable' {
         isRefreshing(context: BridgeContext): Promise<boolean>;
         toModel(): NativeViewModel;
     }
-    export function refreshable(config: IRefreshable): Refreshable;
+    export function refreshable(config: Partial<Refreshable>): Refreshable;
     export interface IPullable {
         startAnimation(): void;
         stopAnimation(): void;
@@ -732,37 +603,15 @@ declare module 'doric/lib/src/widget/refreshable' {
 }
 
 declare module 'doric/lib/src/widget/flowlayout' {
-    import { Stack, IStack } from 'doric/lib/src/widget/layouts';
+    import { Stack } from 'doric/lib/src/widget/layouts';
-    import { IView, Superview, View, NativeViewModel } from 'doric/lib/src/ui/view';
+    import { Superview, View, NativeViewModel } from 'doric/lib/src/ui/view';
-    export interface IFlowLayoutItem extends IStack {
+    export class FlowLayoutItem extends Stack {
-        identifier?: string;
-    }
-    export class FlowLayoutItem extends Stack implements IFlowLayoutItem {
         /**
          * Set to reuse native view
          */
         identifier?: string;
     }
-    export interface IFlowLayout extends IView {
+    export class FlowLayout extends Superview {
-        renderItem: (index: number) => FlowLayoutItem;
-        itemCount: number;
-        batchCount?: number;
-        columnCount?: number;
-        columnSpace?: number;
-        rowSpace?: number;
-        loadMore?: boolean;
-        onLoadMore?: () => void;
-        loadMoreView?: FlowLayoutItem;
-        onScroll?: (offset: {
-            x: number;
-            y: number;
-        }) => void;
-        onScrollEnd?: (offset: {
-            x: number;
-            y: number;
-        }) => void;
-    }
-    export class FlowLayout extends Superview implements IFlowLayout {
         allSubviews(): IterableIterator<FlowLayoutItem> | FlowLayoutItem[];
         columnCount: number;
         columnSpace?: number;
@@ -785,27 +634,16 @@ declare module 'doric/lib/src/widget/flowlayout' {
         isDirty(): boolean;
         toModel(): NativeViewModel;
     }
-    export function flowlayout(config: IFlowLayout): FlowLayout;
+    export function flowlayout(config: Partial<FlowLayout>): FlowLayout;
-    export function flowItem(item: View | View[], config?: IFlowLayoutItem): FlowLayoutItem;
+    export function flowItem(item: View | View[], config?: Partial<FlowLayoutItem>): FlowLayoutItem;
 }
 
 declare module 'doric/lib/src/widget/input' {
-    import { View, IView } from "doric/lib/src/ui/view";
+    import { View } from "doric/lib/src/ui/view";
     import { Color } from "doric/lib/src/util/color";
     import { Gravity } from "doric/lib/src/util/gravity";
     import { BridgeContext } from "doric/lib/src/runtime/global";
-    export interface IInput extends IView {
+    export class Input extends View {
-        text?: string;
-        textColor?: Color;
-        textSize?: number;
-        hintText?: string;
-        hintTextColor?: Color;
-        multilines?: boolean;
-        textAlignment?: Gravity;
-        onTextChange?: (text: string) => void;
-        onFocusChange?: (focused: boolean) => void;
-    }
-    export class Input extends View implements IInput {
         text?: string;
         textColor?: Color;
         textSize?: number;
@@ -820,7 +658,7 @@ declare module 'doric/lib/src/widget/input' {
         requestFocus(context: BridgeContext): Promise<any>;
         releaseFocus(context: BridgeContext): Promise<any>;
     }
-    export function input(config: IInput): Input;
+    export function input(config: Partial<Input>): Input;
 }
 
 declare module 'doric/lib/src/widget/nestedSlider' {
@@ -836,20 +674,17 @@ declare module 'doric/lib/src/widget/nestedSlider' {
 
 declare module 'doric/lib/src/widget/draggable' {
     import { View } from "doric/lib/src/ui/view";
-    import { IStack, Stack } from "doric/lib/src/widget/layouts";
+    import { Stack } from "doric/lib/src/widget/layouts";
-    export interface IDraggable extends IStack {
+    export class Draggable extends Stack {
         onDrag?: (x: number, y: number) => void;
     }
-    export class Draggable extends Stack implements IDraggable {
+    export function draggable(views: View | View[], config?: Partial<Draggable>): Draggable;
-        onDrag?: (x: number, y: number) => void;
-    }
-    export function draggable(views: View | View[], config?: IDraggable): Draggable;
 }
 
 declare module 'doric/lib/src/widget/switch' {
-    import { View, IView } from "doric/lib/src/ui/view";
+    import { View } from "doric/lib/src/ui/view";
     import { Color } from "doric/lib/src/util/color";
-    export interface ISwitch extends IView {
+    export class Switch extends View {
             /**
                 * True is on ,false is off,defalut is off.
                 */
@@ -858,21 +693,11 @@ declare module 'doric/lib/src/widget/switch' {
                 * Switch change callback
                 */
             onSwitch?: (state: boolean) => void;
-            onTintColor?: Color;
-            offTintColor?: Color;
-            thumbTintColor?: Color;
-    }
-    export class Switch extends View {
-            /**
-                * True is on ,false is off,defalut is off.
-                */
-            state?: boolean;
-            onSwitch?: (state: boolean) => void;
             offTintColor?: Color;
             onTintColor?: Color;
             thumbTintColor?: Color;
     }
-    export function switchView(config: ISwitch): Switch;
+    export function switchView(config: Partial<Switch>): Switch;
 }
 
 declare module 'doric/lib/src/native/modal' {
@@ -1249,84 +1074,6 @@ declare module 'doric/lib/src/util/uniqueId' {
     export function uniqueId(prefix: string): string;
 }
 
-declare module 'doric/lib/src/pattern/candies' {
-    export function take<T>(target: T): (block: (p: T) => void) => void;
-    export function takeNonNull<T, R>(target?: T): (block: (p: T) => R) => R | undefined;
-    export function takeNull<T, R>(target?: T): (block: () => R) => R | undefined;
-    export function takeLet<T, R>(target: T): (block: (p: T) => R | undefined) => R | undefined;
-    export function takeAlso<T>(target: T): (block: (p: T) => void) => T;
-    export function takeIf<T>(target: T): (predicate: (t: T) => boolean) => T | undefined;
-    export function takeUnless<T>(target: T): (predicate: (t: T) => boolean) => T | undefined;
-    export function repeat(action: (count: number) => void): (times: number) => void;
-}
-
-declare module 'doric/lib/src/pattern/provider' {
-    export type Observer<T> = (v: T) => void;
-    export type Updater<T> = (v: T) => T;
-    export interface IObservable<T> {
-        addObserver(observer: Observer<T | undefined>): void;
-        removeObserver(observer: Observer<T | undefined>): void;
-        update(updater: Updater<T | undefined>): void;
-    }
-    export class Observable<M> implements IObservable<M> {
-        constructor(provider: IProvider, clz: {
-            new (...args: any[]): M;
-        });
-        addObserver(observer: Observer<M | undefined>): void;
-        removeObserver(observer: Observer<M | undefined>): void;
-        update(updater: Updater<M | undefined>): void;
-    }
-    export interface IProvider {
-        provide(obj: Object): void;
-        acquire<T>(clz: {
-            new (...args: any[]): T;
-        }): T | undefined;
-        remove<T>(clz: {
-            new (...args: any[]): T;
-        }): void;
-        clear(): void;
-        observe<T>(clz: {
-            new (...args: any[]): T;
-        }): Observable<T>;
-    }
-    export class Provider implements IProvider {
-        provide(obj: Object): void;
-        acquire<T>(clz: {
-            new (...args: any[]): T;
-        }): T | undefined;
-        remove<T>(clz: new (...args: any[]) => T): void;
-        clear(): void;
-        observe<T>(clz: new (...args: any[]) => T): Observable<T>;
-    }
-}
-
-declare module 'doric/lib/src/pattern/mvvm' {
-    import { Group } from "doric/lib/src/ui/view";
-    import { Panel } from "doric/lib/src/ui/panel";
-    export abstract class ViewHolder {
-        abstract build(root: Group): void;
-    }
-    export type Setter<M> = (state: M) => void;
-    export abstract class ViewModel<M extends Object, V extends ViewHolder> {
-        constructor(obj: M, v: V);
-        getState(): M;
-        getViewHolder(): V;
-        updateState(setter: Setter<M>): void;
-        attach(view: Group): void;
-        abstract onAttached(state: M, vh: V): void;
-        abstract onBind(state: M, vh: V): void;
-    }
-    export type ViewModelClass<M, V extends ViewHolder> = new (m: M, v: V) => ViewModel<M, V>;
-    export type ViewHolderClass<V> = new () => V;
-    export abstract class VMPanel<M extends Object, V extends ViewHolder> extends Panel {
-        abstract getViewModelClass(): ViewModelClass<M, V>;
-        abstract getState(): M;
-        abstract getViewHolderClass(): ViewHolderClass<V>;
-        getViewModel(): ViewModel<M, V> | undefined;
-        build(root: Group): void;
-    }
-}
-
 declare module 'doric/lib/src/util/flexbox' {
     import { Modeling } from "doric/lib/src/util/types";
     enum ValueType {
@@ -1452,3 +1199,81 @@ declare module 'doric/lib/src/util/flexbox' {
     export {};
 }
 
+declare module 'doric/lib/src/pattern/candies' {
+    export function take<T>(target: T): (block: (p: T) => void) => void;
+    export function takeNonNull<T, R>(target?: T): (block: (p: T) => R) => R | undefined;
+    export function takeNull<T, R>(target?: T): (block: () => R) => R | undefined;
+    export function takeLet<T, R>(target: T): (block: (p: T) => R | undefined) => R | undefined;
+    export function takeAlso<T>(target: T): (block: (p: T) => void) => T;
+    export function takeIf<T>(target: T): (predicate: (t: T) => boolean) => T | undefined;
+    export function takeUnless<T>(target: T): (predicate: (t: T) => boolean) => T | undefined;
+    export function repeat(action: (count: number) => void): (times: number) => void;
+}
+
+declare module 'doric/lib/src/pattern/provider' {
+    export type Observer<T> = (v: T) => void;
+    export type Updater<T> = (v: T) => T;
+    export interface IObservable<T> {
+        addObserver(observer: Observer<T | undefined>): void;
+        removeObserver(observer: Observer<T | undefined>): void;
+        update(updater: Updater<T | undefined>): void;
+    }
+    export class Observable<M> implements IObservable<M> {
+        constructor(provider: IProvider, clz: {
+            new (...args: any[]): M;
+        });
+        addObserver(observer: Observer<M | undefined>): void;
+        removeObserver(observer: Observer<M | undefined>): void;
+        update(updater: Updater<M | undefined>): void;
+    }
+    export interface IProvider {
+        provide(obj: Object): void;
+        acquire<T>(clz: {
+            new (...args: any[]): T;
+        }): T | undefined;
+        remove<T>(clz: {
+            new (...args: any[]): T;
+        }): void;
+        clear(): void;
+        observe<T>(clz: {
+            new (...args: any[]): T;
+        }): Observable<T>;
+    }
+    export class Provider implements IProvider {
+        provide(obj: Object): void;
+        acquire<T>(clz: {
+            new (...args: any[]): T;
+        }): T | undefined;
+        remove<T>(clz: new (...args: any[]) => T): void;
+        clear(): void;
+        observe<T>(clz: new (...args: any[]) => T): Observable<T>;
+    }
+}
+
+declare module 'doric/lib/src/pattern/mvvm' {
+    import { Group } from "doric/lib/src/ui/view";
+    import { Panel } from "doric/lib/src/ui/panel";
+    export abstract class ViewHolder {
+        abstract build(root: Group): void;
+    }
+    export type Setter<M> = (state: M) => void;
+    export abstract class ViewModel<M extends Object, V extends ViewHolder> {
+        constructor(obj: M, v: V);
+        getState(): M;
+        getViewHolder(): V;
+        updateState(setter: Setter<M>): void;
+        attach(view: Group): void;
+        abstract onAttached(state: M, vh: V): void;
+        abstract onBind(state: M, vh: V): void;
+    }
+    export type ViewModelClass<M, V extends ViewHolder> = new (m: M, v: V) => ViewModel<M, V>;
+    export type ViewHolderClass<V> = new () => V;
+    export abstract class VMPanel<M extends Object, V extends ViewHolder> extends Panel {
+        abstract getViewModelClass(): ViewModelClass<M, V>;
+        abstract getState(): M;
+        abstract getViewHolderClass(): ViewHolderClass<V>;
+        getViewModel(): ViewModel<M, V> | undefined;
+        build(root: Group): void;
+    }
+}
+

doric-js/lib/src/ui/view.d.ts

@@ -5,64 +5,6 @@ import { LayoutConfig } from '../util/layoutconfig';
 import { IAnimation } from "./animation";
 import { FlexConfig } from "../util/flexbox";
 export declare function Property(target: Object, propKey: string): void;
-export interface IView {
-    width?: number;
-    height?: number;
-    backgroundColor?: Color | GradientColor;
-    corners?: number | {
-        leftTop?: number;
-        rightTop?: number;
-        leftBottom?: number;
-        rightBottom?: number;
-    };
-    border?: {
-        width: number;
-        color: Color;
-    };
-    shadow?: {
-        color: Color;
-        opacity: number;
-        radius: number;
-        offsetX: number;
-        offsetY: number;
-    };
-    /**
-     * float [0,..1]
-     */
-    alpha?: number;
-    hidden?: boolean;
-    padding?: {
-        left?: number;
-        right?: number;
-        top?: number;
-        bottom?: number;
-    };
-    layoutConfig?: LayoutConfig;
-    onClick?: Function;
-    identifier?: string;
-    /**++++++++++transform++++++++++*/
-    translationX?: number;
-    translationY?: number;
-    scaleX?: number;
-    scaleY?: number;
-    /**
-     * float [0,..1]
-     */
-    pivotX?: number;
-    /**
-     * float [0,..1]
-     */
-    pivotY?: number;
-    /**
-     * rotation*PI
-     */
-    rotation?: number;
-    /**----------transform----------*/
-    /**
-     * Only affected when its superview or itself is FlexLayout.
-     */
-    flexConfig?: FlexConfig;
-}
 export declare type NativeViewModel = {
     id: string;
     type: string;
@@ -70,7 +12,7 @@ export declare type NativeViewModel = {
         [index: string]: Model;
     };
 };
-export declare abstract class View implements Modeling, IView {
+export declare abstract class View implements Modeling {
     width: number;
     height: number;
     x: number;
@@ -93,6 +35,9 @@ export declare abstract class View implements Modeling, IView {
         offsetX: number;
         offsetY: number;
     };
+    /**
+     * float [0,..1]
+     */
     alpha?: number;
     hidden?: boolean;
     viewId: string;
@@ -135,7 +80,7 @@ export declare abstract class View implements Modeling, IView {
     toModel(): NativeViewModel;
     let(block: (it: this) => void): void;
     also(block: (it: this) => void): this;
-    apply(config: IView): this;
+    apply(config: Partial<this>): this;
     in(group: Group): this;
     nativeChannel(context: BridgeContext, name: string): (args?: any) => Promise<any>;
     getWidth(context: BridgeContext): Promise<number>;
@@ -149,12 +94,21 @@ export declare abstract class View implements Modeling, IView {
     /**++++++++++transform++++++++++*/
     translationX?: number;
     translationY?: number;
+    /**
+     * float [0,..1]
+     */
     scaleX?: number;
     scaleY?: number;
     pivotX?: number;
     pivotY?: number;
+    /**
+     * rotation*PI
+     */
     rotation?: number;
     /**----------transform----------*/
+    /**
+     * Only affected when its superview or itself is FlexLayout.
+     */
     flexConfig?: FlexConfig;
     doAnimation(context: BridgeContext, animation: IAnimation): Promise<void>;
 }

doric-js/lib/src/util/index.util.d.ts

@@ -4,3 +4,4 @@ export * from './layoutconfig';
 export * from './log';
 export * from './types';
 export * from './uniqueId';
+export * from './flexbox';

doric-js/lib/src/util/index.util.js

@@ -19,3 +19,4 @@ export * from './layoutconfig';
 export * from './log';
 export * from './types';
 export * from './uniqueId';
+export * from './flexbox';

doric-js/lib/src/widget/draggable.d.ts

@@ -1,9 +1,6 @@
 import { View } from "../ui/view";
-import { IStack, Stack } from "../widget/layouts";
+import { Stack } from "../widget/layouts";
-export interface IDraggable extends IStack {
+export declare class Draggable extends Stack {
     onDrag?: (x: number, y: number) => void;
 }
-export declare class Draggable extends Stack implements IDraggable {
+export declare function draggable(views: View | View[], config?: Partial<Draggable>): Draggable;
-    onDrag?: (x: number, y: number) => void;
-}
-export declare function draggable(views: View | View[], config?: IDraggable): Draggable;

doric-js/lib/src/widget/flowlayout.d.ts

@@ -1,34 +1,12 @@
-import { Stack, IStack } from './layouts';
+import { Stack } from './layouts';
-import { IView, Superview, View, NativeViewModel } from '../ui/view';
+import { Superview, View, NativeViewModel } from '../ui/view';
-export interface IFlowLayoutItem extends IStack {
+export declare class FlowLayoutItem extends Stack {
-    identifier?: string;
-}
-export declare class FlowLayoutItem extends Stack implements IFlowLayoutItem {
     /**
     * Set to reuse native view
     */
     identifier?: string;
 }
-export interface IFlowLayout extends IView {
+export declare class FlowLayout extends Superview {
-    renderItem: (index: number) => FlowLayoutItem;
-    itemCount: number;
-    batchCount?: number;
-    columnCount?: number;
-    columnSpace?: number;
-    rowSpace?: number;
-    loadMore?: boolean;
-    onLoadMore?: () => void;
-    loadMoreView?: FlowLayoutItem;
-    onScroll?: (offset: {
-        x: number;
-        y: number;
-    }) => void;
-    onScrollEnd?: (offset: {
-        x: number;
-        y: number;
-    }) => void;
-}
-export declare class FlowLayout extends Superview implements IFlowLayout {
     private cachedViews;
     private ignoreDirtyCallOnce;
     allSubviews(): IterableIterator<FlowLayoutItem> | FlowLayoutItem[];
@@ -55,5 +33,5 @@ export declare class FlowLayout extends Superview implements IFlowLayout {
     private renderBunchedItems;
     toModel(): NativeViewModel;
 }
-export declare function flowlayout(config: IFlowLayout): FlowLayout;
+export declare function flowlayout(config: Partial<FlowLayout>): FlowLayout;
-export declare function flowItem(item: View | View[], config?: IFlowLayoutItem): FlowLayoutItem;
+export declare function flowItem(item: View | View[], config?: Partial<FlowLayoutItem>): FlowLayoutItem;

doric-js/lib/src/widget/image.d.ts

@@ -1,11 +1,11 @@
-import { IView, View } from "../ui/view";
+import { View } from "../ui/view";
 import { Color } from "../util/color";
 export declare enum ScaleType {
     ScaleToFill = 0,
     ScaleAspectFit = 1,
     ScaleAspectFill = 2
 }
-export interface IImage extends IView {
+export declare class Image extends View {
     imageUrl?: string;
     /**
      * Read image from local path
@@ -49,20 +49,4 @@ export interface IImage extends IView {
         height: number;
     } | undefined) => void;
 }
-export declare class Image extends View implements IImage {
+export declare function image(config: Partial<Image>): Image;
-    imageUrl?: string;
-    imagePath?: string;
-    imageRes?: string;
-    imageBase64?: string;
-    scaleType?: ScaleType;
-    isBlur?: boolean;
-    placeHolderImage?: string;
-    placeHolderColor?: Color;
-    errorImage?: string;
-    errorColor?: Color;
-    loadCallback?: (image: {
-        width: number;
-        height: number;
-    } | undefined) => void;
-}
-export declare function image(config: IImage): Image;

doric-js/lib/src/widget/image.js

@@ -63,7 +63,12 @@ __decorate([
 ], Image.prototype, "placeHolderImage", void 0);
 __decorate([
     Property,
-    __metadata("design:type", Color)
+    __metadata("design:type", Color
+    /**
+     * Display while image is failed to load
+     * It can be file name in local path
+     */
+    )
 ], Image.prototype, "placeHolderColor", void 0);
 __decorate([
     Property,

doric-js/lib/src/widget/input.d.ts

@@ -1,19 +1,8 @@
-import { View, IView } from "../ui/view";
+import { View } from "../ui/view";
 import { Color } from "../util/color";
 import { Gravity } from "../util/gravity";
 import { BridgeContext } from "../runtime/global";
-export interface IInput extends IView {
+export declare class Input extends View {
-    text?: string;
-    textColor?: Color;
-    textSize?: number;
-    hintText?: string;
-    hintTextColor?: Color;
-    multilines?: boolean;
-    textAlignment?: Gravity;
-    onTextChange?: (text: string) => void;
-    onFocusChange?: (focused: boolean) => void;
-}
-export declare class Input extends View implements IInput {
     text?: string;
     textColor?: Color;
     textSize?: number;
@@ -28,4 +17,4 @@ export declare class Input extends View implements IInput {
     requestFocus(context: BridgeContext): Promise<any>;
     releaseFocus(context: BridgeContext): Promise<any>;
 }
-export declare function input(config: IInput): Input;
+export declare function input(config: Partial<Input>): Input;

doric-js/lib/src/widget/layouts.d.ts

@@ -1,8 +1,6 @@
-import { Group, IView, View } from "../ui/view";
+import { Group, View } from "../ui/view";
 import { Gravity } from "../util/gravity";
-export interface IStack extends IView {
+export declare class Stack extends Group {
-}
-export declare class Stack extends Group implements IStack {
 }
 export declare class Root extends Stack {
 }
@@ -10,22 +8,14 @@ declare class LinearLayout extends Group {
     space?: number;
     gravity?: Gravity;
 }
-export interface IVLayout extends IView {
+export declare class VLayout extends LinearLayout {
-    space?: number;
-    gravity?: Gravity;
 }
-export declare class VLayout extends LinearLayout implements IVLayout {
+export declare class HLayout extends LinearLayout {
 }
-export interface IHLayout extends IView {
+export declare function stack(views: View[], config?: Partial<Stack>): Stack;
-    space?: number;
+export declare function hlayout(views: View[], config?: Partial<HLayout>): HLayout;
-    gravity?: Gravity;
+export declare function vlayout(views: View[], config?: Partial<VLayout>): VLayout;
-}
-export declare class HLayout extends LinearLayout implements IHLayout {
-}
-export declare function stack(views: View[], config?: IStack): Stack;
-export declare function hlayout(views: View[], config?: IHLayout): HLayout;
-export declare function vlayout(views: View[], config?: IVLayout): VLayout;
 export declare class FlexLayout extends Group {
 }
-export declare function flexlayout(views: View[], config?: IView): FlexLayout;
+export declare function flexlayout(views: View[], config?: Partial<FlexLayout>): FlexLayout;
 export {};

doric-js/lib/src/widget/list.d.ts

@@ -1,31 +1,12 @@
-import { View, Superview, IView, NativeViewModel } from "../ui/view";
+import { View, Superview, NativeViewModel } from "../ui/view";
-import { Stack, IStack } from "./layouts";
+import { Stack } from "./layouts";
-export interface IListItem extends IStack {
+export declare class ListItem extends Stack {
-    identifier?: string;
-}
-export declare class ListItem extends Stack implements IListItem {
     /**
      * Set to reuse native view
      */
     identifier?: string;
 }
-export interface IList extends IView {
+export declare class List extends Superview {
-    renderItem: (index: number) => ListItem;
-    itemCount: number;
-    batchCount?: number;
-    onLoadMore?: () => void;
-    loadMore?: boolean;
-    loadMoreView?: ListItem;
-    onScroll?: (offset: {
-        x: number;
-        y: number;
-    }) => void;
-    onScrollEnd?: (offset: {
-        x: number;
-        y: number;
-    }) => void;
-}
-export declare class List extends Superview implements IList {
     private cachedViews;
     private ignoreDirtyCallOnce;
     allSubviews(): IterableIterator<ListItem> | ListItem[];
@@ -49,5 +30,5 @@ export declare class List extends Superview implements IList {
     private renderBunchedItems;
     toModel(): NativeViewModel;
 }
-export declare function list(config: IList): List;
+export declare function list(config: Partial<List>): List;
-export declare function listItem(item: View | View[], config?: IListItem): ListItem;
+export declare function listItem(item: View | View[], config?: Partial<ListItem>): ListItem;

doric-js/lib/src/widget/refreshable.d.ts

@@ -1,16 +1,9 @@
-import { View, Superview, IView, NativeViewModel } from "../ui/view";
+import { View, Superview, NativeViewModel } from "../ui/view";
-import { List } from "./list";
-import { Scroller } from "./scroller";
 import { BridgeContext } from "../runtime/global";
-export interface IRefreshable extends IView {
+export declare class Refreshable extends Superview {
     content: View;
     header?: View;
     onRefresh?: () => void;
-}
-export declare class Refreshable extends Superview implements IRefreshable {
-    content: List | Scroller;
-    header?: View;
-    onRefresh?: () => void;
     allSubviews(): View[];
     setRefreshable(context: BridgeContext, refreshable: boolean): Promise<any>;
     setRefreshing(context: BridgeContext, refreshing: boolean): Promise<any>;
@@ -18,7 +11,7 @@ export declare class Refreshable extends Superview implements IRefreshable {
     isRefreshing(context: BridgeContext): Promise<boolean>;
     toModel(): NativeViewModel;
 }
-export declare function refreshable(config: IRefreshable): Refreshable;
+export declare function refreshable(config: Partial<Refreshable>): Refreshable;
 export interface IPullable {
     startAnimation(): void;
     stopAnimation(): void;

doric-js/lib/src/widget/scroller.d.ts

@@ -1,14 +1,7 @@
-import { Superview, View, IView, NativeViewModel } from '../ui/view';
+import { Superview, View, NativeViewModel } from '../ui/view';
 import { BridgeContext } from '../runtime/global';
-export declare function scroller(content: View, config?: IScroller): Scroller;
+export declare function scroller(content: View, config?: Partial<Scroller>): Scroller;
-export interface IScroller extends IView {
+export declare class Scroller extends Superview {
-    content?: View;
-    contentOffset?: {
-        x: number;
-        y: number;
-    };
-}
-export declare class Scroller extends Superview implements IScroller {
     content: View;
     contentOffset?: {
         x: number;

doric-js/lib/src/widget/slider.d.ts

@@ -1,23 +1,13 @@
-import { Superview, View, IView } from "../ui/view";
+import { Superview, View } from "../ui/view";
-import { Stack, IStack } from "./layouts";
+import { Stack } from "./layouts";
 import { BridgeContext } from "../runtime/global";
-export interface ISlideItem extends IStack {
+export declare class SlideItem extends Stack {
-    identifier?: string;
-}
-export declare class SlideItem extends Stack implements ISlideItem {
     /**
      * Set to reuse native view
      */
     identifier?: string;
 }
-export interface ISlider extends IView {
+export declare class Slider extends Superview {
-    renderPage: (index: number) => SlideItem;
-    itemCount: number;
-    batchCount?: number;
-    onPageSlided?: (index: number) => void;
-    loop?: boolean;
-}
-export declare class Slider extends Superview implements ISlider {
     private cachedViews;
     private ignoreDirtyCallOnce;
     allSubviews(): IterableIterator<SlideItem>;
@@ -32,5 +22,5 @@ export declare class Slider extends Superview implements ISlider {
     slidePage(context: BridgeContext, page: number, smooth?: boolean): Promise<any>;
     getSlidedPage(context: BridgeContext): Promise<number>;
 }
-export declare function slider(config: ISlider): Slider;
+export declare function slider(config: Partial<Slider>): Slider;
-export declare function slideItem(item: View | View[], config?: ISlideItem): SlideItem;
+export declare function slideItem(item: View | View[], config?: Partial<SlideItem>): SlideItem;

doric-js/lib/src/widget/switch.d.ts

@@ -1,6 +1,6 @@
-import { View, IView } from "../ui/view";
+import { View } from "../ui/view";
 import { Color } from "../util/color";
-export interface ISwitch extends IView {
+export declare class Switch extends View {
     /**
      * True is on ,false is off,defalut is off.
      */
@@ -9,18 +9,8 @@ export interface ISwitch extends IView {
      * Switch change callback
      */
     onSwitch?: (state: boolean) => void;
-    onTintColor?: Color;
-    offTintColor?: Color;
-    thumbTintColor?: Color;
-}
-export declare class Switch extends View {
-    /**
-     * True is on ,false is off,defalut is off.
-     */
-    state?: boolean;
-    onSwitch?: (state: boolean) => void;
     offTintColor?: Color;
     onTintColor?: Color;
     thumbTintColor?: Color;
 }
-export declare function switchView(config: ISwitch): Switch;
+export declare function switchView(config: Partial<Switch>): Switch;

doric-js/lib/src/widget/text.d.ts

@@ -1,7 +1,7 @@
-import { IView, View } from "../ui/view";
+import { View } from "../ui/view";
 import { Color } from "../util/color";
 import { Gravity } from "../util/gravity";
-export interface IText extends IView {
+export declare class Text extends View {
     text?: string;
     textColor?: Color;
     textSize?: number;
@@ -16,19 +16,4 @@ export interface IText extends IView {
     underline?: boolean;
     htmlText?: string;
 }
-export declare class Text extends View implements IText {
+export declare function text(config: Partial<Text>): Text;
-    text?: string;
-    textColor?: Color;
-    textSize?: number;
-    maxLines?: number;
-    textAlignment?: Gravity;
-    fontStyle?: "normal" | "bold" | "italic" | "bold_italic";
-    font?: string;
-    maxWidth?: number;
-    maxHeight?: number;
-    lineSpacing?: number;
-    strikethrough?: boolean;
-    underline?: boolean;
-    htmlText?: string;
-}
-export declare function text(config: IText): Text;

doric-js/src/ui/view.es5.ts

@@ -37,56 +37,6 @@ export function Property(target: View, propKey: string) {
     })
 }
 
-export interface IView {
-    width?: number
-    height?: number
-    backgroundColor?: Color | GradientColor
-    corners?: number | { leftTop?: number; rightTop?: number; leftBottom?: number; rightBottom?: number }
-    border?: { width: number; color: Color; }
-    shadow?: { color: Color; opacity: number; radius: number; offsetX: number; offsetY: number }
-    /**
-     * float [0,..1]
-     */
-    alpha?: number
-    hidden?: boolean
-    padding?: {
-        left?: number,
-        right?: number,
-        top?: number,
-        bottom?: number,
-    }
-    layoutConfig?: LayoutConfig
-    onClick?: Function
-    identifier?: string
-
-    /**++++++++++transform++++++++++*/
-    translationX?: number
-
-    translationY?: number
-
-    scaleX?: number
-
-    scaleY?: number
-    /**
-     * float [0,..1]
-     */
-    pivotX?: number
-    /**
-     * float [0,..1]
-     */
-    pivotY?: number
-    /**
-     * rotation*PI
-     */
-    rotation?: number
-    /**----------transform----------*/
-
-    /**
-     * Only affected when its superview or itself is FlexLayout.
-     */
-    flexConfig?: FlexConfig
-}
-
 export type NativeViewModel = {
     id: string;
     type: string;
@@ -95,7 +45,7 @@ export type NativeViewModel = {
     };
 }
 
-export abstract class View implements Modeling, IView {
+export abstract class View implements Modeling {
     private __dirty_props__!: { [index: string]: Model | undefined }
 
     @Property
@@ -276,7 +226,7 @@ export abstract class View implements Modeling, IView {
         return this
     }
 
-    apply(config: IView) {
+    apply(config: Partial<this>) {
         for (let key in config) {
             Reflect.set(this, key, Reflect.get(config, key, config), this)
         }

doric-js/src/ui/view.ts

@@ -26,56 +26,6 @@ export function Property(target: Object, propKey: string) {
     Reflect.defineMetadata(propKey, true, target)
 }
 
-export interface IView {
-    width?: number
-    height?: number
-    backgroundColor?: Color | GradientColor
-    corners?: number | { leftTop?: number; rightTop?: number; leftBottom?: number; rightBottom?: number }
-    border?: { width: number; color: Color; }
-    shadow?: { color: Color; opacity: number; radius: number; offsetX: number; offsetY: number }
-    /**
-     * float [0,..1]
-     */
-    alpha?: number
-    hidden?: boolean
-    padding?: {
-        left?: number,
-        right?: number,
-        top?: number,
-        bottom?: number,
-    }
-    layoutConfig?: LayoutConfig
-    onClick?: Function
-    identifier?: string
-
-    /**++++++++++transform++++++++++*/
-    translationX?: number
-
-    translationY?: number
-
-    scaleX?: number
-
-    scaleY?: number
-    /**
-     * float [0,..1]
-     */
-    pivotX?: number
-    /**
-     * float [0,..1]
-     */
-    pivotY?: number
-    /**
-     * rotation*PI
-     */
-    rotation?: number
-    /**----------transform----------*/
-
-    /**
-     * Only affected when its superview or itself is FlexLayout.
-     */
-    flexConfig?: FlexConfig
-}
-
 export type NativeViewModel = {
     id: string;
     type: string;
@@ -84,7 +34,7 @@ export type NativeViewModel = {
     };
 }
 
-export abstract class View implements Modeling, IView {
+export abstract class View implements Modeling {
     @Property
     width: number = 0
 
@@ -108,7 +58,9 @@ export abstract class View implements Modeling, IView {
 
     @Property
     shadow?: { color: Color; opacity: number; radius: number; offsetX: number; offsetY: number }
-
+    /**
+     * float [0,..1]
+     */
     @Property
     alpha?: number
 
@@ -271,7 +223,7 @@ export abstract class View implements Modeling, IView {
         return this
     }
 
-    apply(config: IView) {
+    apply(config: Partial<this>) {
         for (let key in config) {
             Reflect.set(this, key, Reflect.get(config, key, config), this)
         }
@@ -327,7 +279,9 @@ export abstract class View implements Modeling, IView {
 
     @Property
     translationY?: number
-
+    /**
+     * float [0,..1]
+     */
     @Property
     scaleX?: number
 
@@ -339,11 +293,15 @@ export abstract class View implements Modeling, IView {
 
     @Property
     pivotY?: number
-
+    /**
+     * rotation*PI
+     */
     @Property
     rotation?: number
     /**----------transform----------*/
-
+    /**
+     * Only affected when its superview or itself is FlexLayout.
+     */
     @Property
     flexConfig?: FlexConfig
 

doric-js/src/util/index.util.ts

@@ -18,4 +18,5 @@ export * from './gravity'
 export * from './layoutconfig'
 export * from './log'
 export * from './types'
-export * from './uniqueId'
+export * from './uniqueId'
+export * from './flexbox'

doric-js/src/widget/draggable.ts

@@ -14,19 +14,15 @@
  * limitations under the License.
  */
 import { Property, View } from "../ui/view"
-import { IStack, Stack } from "../widget/layouts"
+import { Stack } from "../widget/layouts"
 import { layoutConfig } from "../util/layoutconfig"
 
-export interface IDraggable extends IStack {
+export class Draggable extends Stack {
-    onDrag?: (x: number, y: number) => void
-}
-
-export class Draggable extends Stack implements IDraggable {
     @Property
     onDrag?: (x: number, y: number) => void
 }
 
-export function draggable(views: View | View[], config?: IDraggable) {
+export function draggable(views: View | View[], config?: Partial<Draggable>) {
     const ret = new Draggable
     ret.layoutConfig = layoutConfig().fit()
     if (views instanceof View) {

doric-js/src/widget/flowlayout.ts

@@ -13,15 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Stack, IStack } from './layouts'
+import { Stack } from './layouts'
-import { Property, IView, Superview, View, NativeViewModel } from '../ui/view'
+import { Property, Superview, View, NativeViewModel } from '../ui/view'
 import { layoutConfig } from '../util/index.util'
 
-export interface IFlowLayoutItem extends IStack {
+export class FlowLayoutItem extends Stack {
-    identifier?: string
-}
-
-export class FlowLayoutItem extends Stack implements IFlowLayoutItem {
     /**
     * Set to reuse native view
     */
@@ -29,32 +25,7 @@ export class FlowLayoutItem extends Stack implements IFlowLayoutItem {
     identifier?: string
 }
 
-
+export class FlowLayout extends Superview {
-export interface IFlowLayout extends IView {
-    renderItem: (index: number) => FlowLayoutItem
-
-    itemCount: number
-
-    batchCount?: number
-
-    columnCount?: number
-
-    columnSpace?: number
-
-    rowSpace?: number
-
-    loadMore?: boolean
-
-    onLoadMore?: () => void
-
-    loadMoreView?: FlowLayoutItem
-
-    onScroll?: (offset: { x: number, y: number }) => void
-
-    onScrollEnd?: (offset: { x: number, y: number }) => void
-}
-
-export class FlowLayout extends Superview implements IFlowLayout {
     private cachedViews: Map<string, FlowLayoutItem> = new Map
     private ignoreDirtyCallOnce = false
 
@@ -135,7 +106,7 @@ export class FlowLayout extends Superview implements IFlowLayout {
     }
 }
 
-export function flowlayout(config: IFlowLayout) {
+export function flowlayout(config: Partial<FlowLayout>) {
     const ret = new FlowLayout
     for (let key in config) {
         Reflect.set(ret, key, Reflect.get(config, key, config), ret)
@@ -143,7 +114,7 @@ export function flowlayout(config: IFlowLayout) {
     return ret
 }
 
-export function flowItem(item: View | View[], config?: IFlowLayoutItem) {
+export function flowItem(item: View | View[], config?: Partial<FlowLayoutItem>) {
     return (new FlowLayoutItem).also((it) => {
         it.layoutConfig = layoutConfig().fit()
         if (item instanceof View) {

doric-js/src/widget/image.ts

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { IView, View, Property } from "../ui/view"
+import { View, Property } from "../ui/view"
 import { layoutConfig } from "../util/layoutconfig"
 import { Color } from "../util/color"
 
@@ -23,13 +23,16 @@ export enum ScaleType {
     ScaleAspectFill,
 }
 
-export interface IImage extends IView {
+export class Image extends View {
+    @Property
     imageUrl?: string
+
     /** 
      * Read image from local path
      * For android,it based on assets dir.
      * For iOS,it based on main bundle dir.
     */
+    @Property
     imagePath?: string
 
     /** 
@@ -37,67 +40,41 @@ export interface IImage extends IView {
      * For android,it will try to read from drawable.
      * For iOS,it will try to read from Image.Assets.
      */
+    @Property
     imageRes?: string
 
+    @Property
     imageBase64?: string
+
+    @Property
     scaleType?: ScaleType
+
+    @Property
     isBlur?: boolean
     /**
      * Display while image is loading 
      * Local file name
      */
+    @Property
     placeHolderImage?: string
-
     /**
      * Display while image is loading 
      * Color
      * This priority is lower than placeHolderImage
      */
+    @Property
     placeHolderColor?: Color
-
     /**
      * Display while image is failed to load 
      * It can be file name in local path
      */
+    @Property
     errorImage?: string
-
     /**
      * Display while image is failed to load  
      * Color
      * This priority is lower than errorImage
      */
-    errorColor?: Color
-    loadCallback?: (image: { width: number; height: number } | undefined) => void
-}
-
-export class Image extends View implements IImage {
-    @Property
-    imageUrl?: string
-
-    @Property
-    imagePath?: string
-
-    @Property
-    imageRes?: string
-
-    @Property
-    imageBase64?: string
-
-    @Property
-    scaleType?: ScaleType
-
-    @Property
-    isBlur?: boolean
-
-    @Property
-    placeHolderImage?: string
-
-    @Property
-    placeHolderColor?: Color
-
-    @Property
-    errorImage?: string
-
     @Property
     errorColor?: Color
 
@@ -105,7 +82,7 @@ export class Image extends View implements IImage {
     loadCallback?: (image: { width: number; height: number } | undefined) => void
 }
 
-export function image(config: IImage) {
+export function image(config: Partial<Image>) {
     const ret = new Image
     ret.layoutConfig = layoutConfig().fit()
     for (let key in config) {

doric-js/src/widget/input.ts

@@ -13,25 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { View, IView, Property } from "../ui/view";
+import { View, Property } from "../ui/view";
 import { Color } from "../util/color";
 import { Gravity } from "../util/gravity";
 import { BridgeContext } from "../runtime/global";
 import { layoutConfig } from "../util/index.util";
 
-export interface IInput extends IView {
+export class Input extends View {
-    text?: string
-    textColor?: Color
-    textSize?: number
-    hintText?: string
-    hintTextColor?: Color
-    multilines?: boolean
-    textAlignment?: Gravity
-    onTextChange?: (text: string) => void
-    onFocusChange?: (focused: boolean) => void
-}
-
-export class Input extends View implements IInput {
 
     @Property
     text?: string
@@ -80,7 +68,7 @@ export class Input extends View implements IInput {
     }
 }
 
-export function input(config: IInput) {
+export function input(config: Partial<Input>) {
     const ret = new Input
     ret.layoutConfig = layoutConfig().just()
     for (let key in config) {

doric-js/src/widget/layouts.ts

@@ -13,14 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Group, Property, IView, View } from "../ui/view";
+import { Group, Property, View } from "../ui/view";
 import { Gravity } from "../util/gravity";
 import { layoutConfig } from "../util/layoutconfig";
 
-export interface IStack extends IView {
+export class Stack extends Group {
-}
-
-export class Stack extends Group implements IStack {
 }
 
 export class Root extends Stack {
@@ -34,24 +31,13 @@ class LinearLayout extends Group {
     gravity?: Gravity
 }
 
-export interface IVLayout extends IView {
+export class VLayout extends LinearLayout {
-    space?: number
-    gravity?: Gravity
 }
 
-export class VLayout extends LinearLayout implements IVLayout {
+export class HLayout extends LinearLayout {
 }
 
-
+export function stack(views: View[], config?: Partial<Stack>) {
-export interface IHLayout extends IView {
-    space?: number
-    gravity?: Gravity
-}
-
-export class HLayout extends LinearLayout implements IHLayout {
-}
-
-export function stack(views: View[], config?: IStack) {
     const ret = new Stack
     ret.layoutConfig = layoutConfig().fit()
     for (let v of views) {
@@ -65,7 +51,7 @@ export function stack(views: View[], config?: IStack) {
     return ret
 }
 
-export function hlayout(views: View[], config?: IHLayout) {
+export function hlayout(views: View[], config?: Partial<HLayout>) {
     const ret = new HLayout
     ret.layoutConfig = layoutConfig().fit()
     for (let v of views) {
@@ -79,7 +65,7 @@ export function hlayout(views: View[], config?: IHLayout) {
     return ret
 }
 
-export function vlayout(views: View[], config?: IVLayout) {
+export function vlayout(views: View[], config?: Partial<VLayout>) {
     const ret = new VLayout
     ret.layoutConfig = layoutConfig().fit()
     for (let v of views) {
@@ -98,7 +84,7 @@ export function vlayout(views: View[], config?: IVLayout) {
 export class FlexLayout extends Group {
 }
 
-export function flexlayout(views: View[], config?: IView) {
+export function flexlayout(views: View[], config?: Partial<FlexLayout>) {
     const ret = new FlexLayout
     ret.layoutConfig = layoutConfig().fit()
     for (let v of views) {

doric-js/src/widget/list.ts

@@ -14,15 +14,12 @@
  * limitations under the License.
  */
 
-import { View, Property, Superview, IView, NativeViewModel } from "../ui/view";
+import { View, Property, Superview, NativeViewModel } from "../ui/view";
-import { Stack, IStack } from "./layouts";
+import { Stack } from "./layouts";
-import { layoutConfig, LayoutSpec } from "../util/layoutconfig";
+import { layoutConfig } from "../util/layoutconfig";
 
-export interface IListItem extends IStack {
-    identifier?: string
-}
 
-export class ListItem extends Stack implements IListItem {
+export class ListItem extends Stack {
     /**
      * Set to reuse native view
      */
@@ -30,25 +27,7 @@ export class ListItem extends Stack implements IListItem {
     identifier?: string
 }
 
-export interface IList extends IView {
+export class List extends Superview {
-    renderItem: (index: number) => ListItem
-
-    itemCount: number
-
-    batchCount?: number
-
-    onLoadMore?: () => void
-
-    loadMore?: boolean
-
-    loadMoreView?: ListItem
-
-    onScroll?: (offset: { x: number, y: number }) => void
-
-    onScrollEnd?: (offset: { x: number, y: number }) => void
-}
-
-export class List extends Superview implements IList {
     private cachedViews: Map<string, ListItem> = new Map
     private ignoreDirtyCallOnce = false
 
@@ -120,7 +99,7 @@ export class List extends Superview implements IList {
     }
 }
 
-export function list(config: IList) {
+export function list(config: Partial<List>) {
     const ret = new List
     for (let key in config) {
         Reflect.set(ret, key, Reflect.get(config, key, config), ret)
@@ -128,7 +107,7 @@ export function list(config: IList) {
     return ret
 }
 
-export function listItem(item: View | View[], config?: IListItem) {
+export function listItem(item: View | View[], config?: Partial<ListItem>) {
     return (new ListItem).also((it) => {
         it.layoutConfig = layoutConfig().fit()
         if (item instanceof View) {

doric-js/src/widget/refreshable.ts

@@ -1,18 +1,12 @@
-import { View, Property, Superview, IView, NativeViewModel } from "../ui/view";
+import { View, Property, Superview, NativeViewModel } from "../ui/view";
 import { List } from "./list";
 import { Scroller } from "./scroller";
 import { BridgeContext } from "../runtime/global";
 import { layoutConfig } from "../util/layoutconfig";
 
-export interface IRefreshable extends IView {
+export class Refreshable extends Superview {
-    content: View
-    header?: View
-    onRefresh?: () => void
-}
 
-export class Refreshable extends Superview implements IRefreshable {
+    content!: View
-
-    content!: List | Scroller
 
     header?: View
 
@@ -50,7 +44,7 @@ export class Refreshable extends Superview implements IRefreshable {
     }
 }
 
-export function refreshable(config: IRefreshable) {
+export function refreshable(config: Partial<Refreshable>) {
     const ret = new Refreshable
     ret.layoutConfig = layoutConfig().fit()
     for (let key in config) {

doric-js/src/widget/scroller.ts

@@ -13,11 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Superview, View, IView, NativeViewModel, Property } from '../ui/view'
+import { Superview, View, NativeViewModel, Property } from '../ui/view'
 import { layoutConfig } from '../util/layoutconfig'
 import { BridgeContext } from '../runtime/global'
 
-export function scroller(content: View, config?: IScroller) {
+export function scroller(content: View, config?: Partial<Scroller>) {
     return (new Scroller).also(v => {
         v.layoutConfig = layoutConfig().fit()
         if (config) {
@@ -29,12 +29,8 @@ export function scroller(content: View, config?: IScroller) {
     })
 }
 
-export interface IScroller extends IView {
-    content?: View
-    contentOffset?: { x: number, y: number }
-}
 
-export class Scroller extends Superview implements IScroller {
+export class Scroller extends Superview {
     content!: View
 
     @Property

doric-js/src/widget/slider.ts

@@ -13,17 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Superview, View, Property, IView } from "../ui/view";
+import { Superview, View, Property } from "../ui/view";
-import { Stack, IStack } from "./layouts";
+import { Stack } from "./layouts";
 import { layoutConfig } from "../util/layoutconfig";
 import { BridgeContext } from "../runtime/global";
 
 
-export interface ISlideItem extends IStack {
-    identifier?: string
-}
 
-export class SlideItem extends Stack implements ISlideItem {
+export class SlideItem extends Stack {
     /**
      * Set to reuse native view
      */
@@ -31,15 +28,7 @@ export class SlideItem extends Stack implements ISlideItem {
     identifier?: string
 }
 
-export interface ISlider extends IView {
+export class Slider extends Superview {
-    renderPage: (index: number) => SlideItem
-    itemCount: number
-    batchCount?: number
-    onPageSlided?: (index: number) => void
-    loop?: boolean
-}
-
-export class Slider extends Superview implements ISlider {
     private cachedViews: Map<string, SlideItem> = new Map
 
     private ignoreDirtyCallOnce = false
@@ -96,7 +85,7 @@ export class Slider extends Superview implements ISlider {
 
 }
 
-export function slider(config: ISlider) {
+export function slider(config: Partial<Slider>) {
     const ret = new Slider
     for (let key in config) {
         Reflect.set(ret, key, Reflect.get(config, key, config), ret)
@@ -104,7 +93,7 @@ export function slider(config: ISlider) {
     return ret
 }
 
-export function slideItem(item: View | View[], config?: ISlideItem) {
+export function slideItem(item: View | View[], config?: Partial<SlideItem>) {
     return (new SlideItem).also((it) => {
         it.layoutConfig = layoutConfig().most()
         if (item instanceof View) {

doric-js/src/widget/switch.ts

@@ -13,35 +13,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { View, Property, IView } from "../ui/view";
+import { View, Property } from "../ui/view";
 import { Color } from "../util/color";
 import { layoutConfig } from "../util/index.util";
 
-export interface ISwitch extends IView {
-    /**
-     * True is on ,false is off,defalut is off.
-     */
-    state?: boolean
-    /**
-     * Switch change callback
-     */
-    onSwitch?: (state: boolean) => void
-
-
-    onTintColor?: Color
-
-    offTintColor?: Color
-
-    thumbTintColor?: Color
-}
-
 export class Switch extends View {
     /**
      * True is on ,false is off,defalut is off.
      */
     @Property
     state?: boolean
-
+    /**
+     * Switch change callback
+     */
     @Property
     onSwitch?: (state: boolean) => void
 
@@ -55,7 +39,7 @@ export class Switch extends View {
     thumbTintColor?: Color
 }
 
-export function switchView(config: ISwitch) {
+export function switchView(config: Partial<Switch>) {
     const ret = new Switch
     ret.layoutConfig = layoutConfig().just()
     ret.width = 50

doric-js/src/widget/text.ts

@@ -13,28 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { IView, View, Property } from "../ui/view"
+import { View, Property } from "../ui/view"
 import { Color } from "../util/color"
 import { Gravity } from "../util/gravity"
 import { layoutConfig } from "../util/layoutconfig"
 
-export interface IText extends IView {
+export class Text extends View {
-    text?: string
-    textColor?: Color
-    textSize?: number
-    maxLines?: number
-    textAlignment?: Gravity
-    fontStyle?: "normal" | "bold" | "italic" | "bold_italic"
-    font?: string
-    maxWidth?: number
-    maxHeight?: number
-    lineSpacing?: number
-    strikethrough?: boolean
-    underline?: boolean
-    htmlText?: string
-}
-
-export class Text extends View implements IText {
     @Property
     text?: string
 
@@ -75,7 +59,7 @@ export class Text extends View implements IText {
     htmlText?: string
 }
 
-export function text(config: IText) {
+export function text(config: Partial<Text>) {
     const ret = new Text
     ret.layoutConfig = layoutConfig().fit()
     for (let key in config) {