20231018-3-alert ✅

README.md

@@ -1971,3 +1971,49 @@ component TestDrawer inherits Window {
 ```
 
 ![image-20231018200348306](E:\Rust\try\surrealism-ui\README\imgs\image-20231018200348306.png)
+
+### SURAlert
+
+SURAlert is used to display important prompt information on the page
+
+#### properties
+
+* `private property <Themes> theme` : Surrealism theme ⛔
+* `in-out property <string> content` :  alert content you want to display
+* `in-out property <bool> is-show` : show the alert or not
+* `in property <ResType> res-type` : result type👍
+
+#### functions
+
+* `public function open()` : open alert
+* `public function close()` : close alert
+
+#### example
+
+```
+import {SURButton, SURAlert} from "../../index.slint";
+import {Themes,ResType} from "../../themes/index.slint";
+
+component TestAlert inherits Window {
+  height: 400px;
+  width: 600px;
+  background: #535353;
+ 
+  SURButton {
+    
+    content: "show";
+    clicked => {
+      p.open();
+      debug("sds1")
+    }
+  }
+ 
+
+  p:=SURAlert { 
+    res-type:ResType.Success ;
+    content:"this is a success message!";
+  }
+}
+```
+
+![image-20231018203824259](E:\Rust\try\surrealism-ui\README\imgs\image-20231018203824259.png)

index.slint

@@ -25,6 +25,7 @@ import { SURDialog } from "./src/dialog/index.slint";
 import { SURMenu,MenuData } from "./src/menu/index.slint";
 import { SURSwitch} from "./src/switch/index.slint";
 import { SURDrawer } from "./src/drawer/index.slint";
+import { SURAlert } from "./src/alert/index.slint";
 
 export { 
   SURText,
@@ -61,5 +62,6 @@ export {
   MenuData,
   TipPosition,
   SURSwitch,
-  SURDrawer
+  SURDrawer,
+  SURAlert
 }

src/alert/alert.slint

@@ -0,0 +1,106 @@
+/**
+* ============================================
+* @author:syf20020816@outlook.com
+* @since:20231018
+* @version:0.1.7
+* @type:interface
+* @description:
+* # SURAlert
+* SURAlert is used to display important prompt information on the page
+* ## properties
+* - private property <Themes> theme : Surrealism theme ⛔
+* - in-out property <string> content :  alert content you want to display
+* - in-out property <bool> is-show : show the alert or not
+* - in property <ResType> res-type : result type👍
+* ## functions
+* - public function open() : open alert
+* - public function close() : close alert
+* ============================================
+*/
+
+import { SURCard } from "../card/index.slint";
+import { SURText } from "../text/index.slint";
+import { SURIcon } from "../icon/index.slint";
+import { IconSources,Themes,ResType } from "../../themes/index.slint";
+export component Alert inherits Window{
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  padding-bottom: 0;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  always-on-top:true;
+  opacity: 1;
+  visible: is-show;
+  z: 1111;
+  private property <Themes> theme : Success;
+  in-out property <string> content : "this is a alert message!";
+  in-out property <bool> is-show : false;
+  in property <ResType> res-type:ResType.Success;
+  public function open() {
+      root.is-show = true;
+  }
+  public function close() {
+    root.is-show = false;
+  }
+  init => {
+    if(res-type==ResType.Primary){
+      root.theme = Themes.Primary;
+      root.icon = IconSources.icons.Smiling-face;
+      root.content = "This is a primary message!";
+    }else if (res-type==ResType.Success){
+      root.theme = Themes.Success;
+      root.content = "This is a success message!";
+      root.icon = IconSources.icons.Success;
+    }else if (res-type==ResType.Info){
+      root.theme = Themes.Info;
+      root.icon = IconSources.icons.Info;
+      root.content = "This is a info message!";
+    }else if (res-type==ResType.Error){
+      root.theme = Themes.Error;
+      root.icon = IconSources.icons.Close-one;
+      root.content = "This is a error message!"
+    }else if (res-type==ResType.Warning){
+      root.theme = Themes.Warning;
+      root.icon = IconSources.icons.Attention;
+      root.content = "This is a warning message!"
+    }else{
+      root.theme = Themes.Light;
+      root.icon = IconSources.icons.Help;
+      root.content = "This is a help message!"
+    }
+  }
+  alert:=SURCard { 
+    y: 6px;
+    clip: true;
+    width: parent.width * 0.86;
+    theme: root.theme;
+    HorizontalLayout {
+      alignment: LayoutAlignment.start;
+      icon-view:=Rectangle{
+        icon:=SURIcon { 
+          theme: root.theme;
+          icon: root.icon;
+          height: 18px;
+          width: 18px;
+        }
+      }
+      info:=SURText { 
+        theme: root.theme;
+        content: root.content;
+        width: parent.width - 60px;
+        horizontal-alignment: left;
+      }
+      close-view:=Rectangle{
+        close:=SURIcon{
+          icon: IconSources.icons.Close-one;
+          theme: root.theme;
+          clicked => {
+            root.close();
+          }
+        }
+      }
+    }
+  }
+}

src/alert/index.slint

@@ -0,0 +1,2 @@
+import {Alert } from "./alert.slint";
+export { Alert as SURAlert }

tests/src/alert.slint

@@ -0,0 +1,24 @@
+import {SURButton, SURAlert} from "../../index.slint";
+import {Themes,ResType} from "../../themes/index.slint";
+
+component TestAlert inherits Window {
+  height: 400px;
+  width: 600px;
+  background: #535353;
+
+  SURButton {
+
+    content: "show";
+    clicked => {
+      p.open();
+
+      debug("sds1")
+    }
+  }
+
+
+  p:=SURAlert { 
+    res-type:ResType.Success ;
+    content:"this is a success message!";
+  }
+}