update doc 20%

index.slint

@@ -10,7 +10,7 @@ import {SHeader} from "./src/header/index.slint";
 import {STable,STableColumn} from "./src/table/index.slint";
 import {SCollapse,SCollapseItem} from "./src/collapse/index.slint";
 import { SResult} from "./src/result/index.slint";
-import { SURAvatar } from "./src/avatar/index.slint";
+import { SAvatar } from "./src/avatar/index.slint";
 import {SLink} from "./src/link/index.slint";
 import { SDivider } from "./src/divider/index.slint";
 import { SPopup } from "./src/popup/index.slint";
@@ -44,7 +44,7 @@ export {
   SCollapse,
   SCollapseItem,
   SResult,
-  SURAvatar,
+  SAvatar,
   SLink,
   SDivider,
   SPopup,

src/alert/alert.slint

@@ -2,19 +2,34 @@
 * ============================================
 * @author:syf20020816@outlook.com
 * @since:20231018
-* @version:0.1.7
+* @version:0.3.0
 * @type:interface
 * @description:
 * # SAlert
 * SAlert is used to display important prompt information on the page
 * ## properties
-* - private property <Themes> theme : Surrealism theme ⛔
-* - in-out property <string> text :  alert text you want to display
-* - in-out property <bool> is-show : show the alert or not
-* - in property <ResultType> result-type : result type👍
+* - in property <int> font-weight :font weight;
+* - in property <length> font-size: font size;
+* - in property <brush> font-color : font color;
+* - in property <bool> font-italic : font italic;
+* - in property <string> font-family : font family;
+* - in property <TextOverflow> overflow : text overflow;
+* - in property <length> spacing : spacing among icons and text in alert;
+* - in-out property <string> text : display text in alert;
+* - in-out property <bool> is-show : is alert show or not;
+* - in property <length> alert-height : alert height;
+* - in-out property <ResultType> result-type: the result type of the alert;
+* - in property <image> close-icon : close icon;
+* - in property <length> icon-size : icon size;
 * ## functions
 * - public function open() : open alert
 * - public function close() : close alert
+* - public function success(text:string) : open success alert
+* - public function warning(text:string) : open warning alert
+* - public function error(text:string) : open error alert
+* - public function info(text:string) : open info alert
+* - public function help(text:string) : open help alert
+* - public function primary(text:string) : open primary alert 
 * ============================================
 */
 

src/avatar/avatar.slint

@@ -5,8 +5,8 @@
 * @version:0.1.0
 * @type:interface
 * @description:
-* # SURAvatar
-* SURAvatar is a avatar component that defaults to Icons.Avatar when there are no images available
+* # SAvatar
+* SAvatar is a avatar component that defaults to Icons.Avatar when there are no images available
 * ## properties
 * - in property <length> avatar-size : avatar size
 * - in property <image> avatar : avatar image

src/avatar/index.slint

@@ -1,3 +1,3 @@
 import { Avatar } from "./avatar.slint";
 
-export { Avatar as SURAvatar }
+export { Avatar as SAvatar }

src/card/card.slint

@@ -9,27 +9,29 @@
 * A very simple universal card without any layout or restrictions
 * you can add anything you want to the card
 * ## properties
-* - in property <Themes> theme : Surrealism Themes
-* - in property <length> card-height : card height 👍
-* - in property <length> card-width : card width 👍
-* - in property <PaddingType> padding-type : card padding size
-* - in property <ShadowType> shadow : card shadow type
-* - in property <BorderType> border : card border type
-* - in-out property <PaddingProps> card-padding : card padding 
+* - in property <Themes> theme : Surrealism theme;
+* - in property <length> card-height: card height (not contain padding);
+* - in property <length> card-width: card width (not contain padding);
+* - in property <PaddingType> padding-type : padding type;
+* - in property <ShadowType> shadow-type : shadow type;
+* - in property <BorderType> border-type : border type;
+* - in property <int> font-weight : font weight;
+* - in property <length> font-size: font size;
+* - in property <brush> font-color : font color;
+* - in property <bool> font-italic : font italic;
+* - in property <string> font-family : font family;
+* - in-out property <PaddingProps> card-padding : inner card padding struct;
+* - in-out property <BorderProps> card-border : inner card border struct;
+* - in-out property <ShadowProps> card-shadow : inner card shadow struct;
 * ============================================
 */
 
 
 import {ROOT_STYLES,DefaultSCardProps} from "../../themes/index.slint";
 import {Themes,PaddingType,ShadowType,BorderType,UseSurrealismFn,PaddingProps,BorderProps,ShadowProps} from "../../use/index.slint";
-enum Alignment{
-  Horizontal,
-  Vertical
-}
 
 
 export component Card inherits Rectangle{
-
   in property <Themes> theme : DefaultSCardProps.theme;
   in property <length> card-height: DefaultSCardProps.card-height;
   in property <length> card-width: DefaultSCardProps.card-width;

src/collection/collection.slint

@@ -6,9 +6,7 @@
 * @type:interface
 * @description:
 * # SCollection
-* SCollection is a grid storage box, but in reality it is not based on grid layout.
-* It achieves a flexible grid through a combination of dual for loops and horizontal and vertical layouts
-* Clicking on the pop-up layer again will close it
+* SCollection is an expandable box that can be zoomed in or out by clicking (internal can also be used)
 * ## properties (card)
 * - in property <length> font-size : font size
 * - in property <int> column-num : column number

src/dialog/dialog.slint

@@ -6,7 +6,7 @@
 * @type:interface
 * @description:
 * # SDialog
-* Dialogs are used to confirm messages or events and display text
+* SDialogs are used to confirm messages or events and display text
 * ## properties
 * - in property <string> dialog-title : dialog title;
 * - in property <length> dialog-title-size : dialog title font size;

src/icon/icon.slint

@@ -6,7 +6,7 @@
 * @type:interface
 * @description: 
 * # SIcon
-* there are 2658 different icons in SIcon from : https://github.com/bytedance/iconpark
+* this is a icon container ,  better than Image
 * ## properties:
 * - in property <Themes> theme : surrealism theme;
 * - in property <image> source : icon source;

tests/main.slint

@@ -10,7 +10,7 @@ import {TestTable} from "./src/table.slint";
 export component MyLib inherits Window {
     height: 720px;
     width: 1080px;
-    background: #d2d2d2;
+    background: #4b4b4b;
     title:"Surrealism";
     TabWidget {
       Tab {

tests/src/avatar.slint

@@ -1,4 +1,4 @@
-import {SURAvatar} from "../../index.slint";
+import {SAvatar} from "../../index.slint";
 import {ROOT-STYLES} from "../../themes/index.slint";
 
 component TestWindow inherits Window {
@@ -8,22 +8,22 @@ component TestWindow inherits Window {
   VerticalLayout {
     padding: 20px;
     spacing: 20px;
-    SURAvatar {
+    SAvatar {
     }
-    SURAvatar {
+    SAvatar {
       avatar-size : ROOT-STYLES.sur-size.small * 2;
       padding-type : Small;
       theme: Primary;
     }
-    SURAvatar {
+    SAvatar {
       theme: Warning;
     }
-    SURAvatar {
+    SAvatar {
       avatar-size : ROOT-STYLES.sur-size.small * 2;
       padding-type : Small;
       theme: Error;
     }
-    SURAvatar {
+    SAvatar {
       avatar-size : ROOT-STYLES.sur-size.large * 2;
       padding-type : Large;
       theme: Dark;

tests/src/badge.slint

@@ -1,4 +1,4 @@
-import {SBadge,SURAvatar} from "../../index.slint";
+import {SBadge,SAvatar} from "../../index.slint";
 import {Themes} from "../../use/index.slint";
 
 component TestCollection inherits Window {
@@ -10,7 +10,7 @@ component TestCollection inherits Window {
     y: 30px;
     height: avatar.height;
     width: avatar.width;
-    avatar:=SURAvatar {
+    avatar:=SAvatar {
 
     } 
     SBadge {
@@ -23,7 +23,7 @@ component TestCollection inherits Window {
     y: 120px;
     height: avatar2.height;
     width: avatar2.width;
-    avatar2:=SURAvatar {
+    avatar2:=SAvatar {
     } 
     SBadge {
       x: self.get-x(avatar2.width);
@@ -37,7 +37,7 @@ component TestCollection inherits Window {
     y: 210px;
     height: avatar3.height;
     width: avatar3.width;
-    avatar3:=SURAvatar {
+    avatar3:=SAvatar {
 
     } 
     SBadge {
@@ -53,7 +53,7 @@ component TestCollection inherits Window {
     y: 300px;
     height: avatar4.height;
     width: avatar4.width;
-    avatar4:=SURAvatar {
+    avatar4:=SAvatar {
     } 
     SBadge {
       x: self.get-x(avatar4.width);

tests/src/color.slint

@@ -8,17 +8,17 @@ global themes {
       {name:"success",c:[{color:#8FCEC4,name:"weakest"},{name:"weaker",color:#61BF84},{name:"normal",color:#38A762},{name:"deeper",color:#21964A},{name:"deepest",color:#118A3D},{name:"font",color:#e5fffb},{name:"opacity",color:#38A76288}    ]},
       {name:"info",c:[{color:#F6F6F6,name:"weakest"},{name:"weaker",color:#eaeaea},{name:"normal",color:#E0E0E0},{name:"deeper",color:#D2D2D2},{name:"deepest",color:#BDBDBD},{name:"font",color:#484848},{name:"opacity",color:#E0E0E088}]},
       {name:"warning",c:[{color:#ffd5bd,name:"weakest"},{name:"weaker",color:#FCBD99},{name:"normal",color:#F9A677},{name:"deeper",color:#F9955C},{name:"deepest",color:#F8894A},{name:"font",color:#fff4ec},{name:"opacity",color:#F9A67788}]},
-      {name:"error",c:[{color:#e9a9a7,name:"weakest"},{name:"weaker",color:#F294B3},{name:"normal",color:#EE6F9A},{name:"deeper",color:#EB5889},{name:"deepest",color:#EA467E},{name:"font",color:#ffe5e4},{name:"opacity",color:#EE6F9A88}]},
+      {name:"error",c:[{color:#e9a7a7,name:"weakest"},{name:"weaker",color:#f48989},{name:"normal",color:#ed5e5e},{name:"deeper",color:#ed4e4e},{name:"deepest",color:#ed3b3b},{name:"font",color:#ffe5e4},{name:"opacity",color:#ed4e4e88}]},
       {name:"dark",c:[{color:#707070,name:"weakest"},{name:"weaker",color:#616161},{name:"normal",color:#424242},{name:"deeper",color:#242424},{name:"deepest",color:#000000},{name:"font",color:#BDBDBD},{name:"opacity",color:#42424288}]}
     ];
 }
 
 export component TestColor inherits Window {
   height: 1400px;
-  width: 1000px;
+  width: 1100px;
   VerticalLayout {
     height: 1400px;
-    width: root.width;
+    width: root.width -100px;
     for t in themes.colors: Rectangle {
       HorizontalLayout{
         SText {