Skip to content

Commit 7ad8ea9

Browse files
MengobsMengobs
committed
feature: menu
1 parent c1b5833 commit 7ad8ea9

7 files changed

Lines changed: 109 additions & 18 deletions

File tree

‎assets/index.css‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,32 @@
1414
font-family: "PingFangSC-Bold";
1515
src: url(./PingFangSC-Semibold.woff2);
1616
}
17-
div[tooltip] {
17+
div[menu] {
1818
display: inline-flex;
19-
align-items: center;
19+
flex-direction: column;
2020
justify-content: center;
2121
width: auto;
2222
height: auto;
23-
padding: 3px 6px;
24-
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 0 0 rgba(0, 0, 0, 0.12);
25-
background: rgba(246, 246, 246, 0.72);
23+
border: outset 0.5px rgba(0, 0, 0, 0.06);
24+
box-shadow: inset 0 0.5px 1px rgba(255, 255, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.15), 0 8px 15px rgba(0, 0, 0, 0.18);
25+
border-radius: 8px;
26+
overflow: hidden;
27+
background: rgba(246, 246, 246, 0.6);
28+
backdrop-filter: blur(30px) saturate(200%);
29+
padding: 5px 5px;
2630
}
27-
div[tooltip] p {
31+
div[menu] p {
2832
margin: 0;
2933
font-family: "SFPro-Medium", "PingFangSC-Medium";
30-
font-size: 11px;
34+
font-size: 13px;
35+
line-height: 16px;
36+
height: 16px;
37+
display: flex;
38+
align-items: center;
39+
padding: 3px 10px;
40+
}
41+
div[menu] p:hover {
42+
background: #0a82ff;
43+
color: white;
44+
border-radius: 5px;
3145
}/*# sourceMappingURL=index.css.map */

‎assets/index.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/index.scss‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,37 @@ $iter: 1;
1717
$iter: $iter + 1;
1818
}
1919

20-
div[tooltip] {
20+
div[menu] {
2121
display: inline-flex;
22-
align-items: center;
22+
flex-direction: column;
2323
justify-content: center;
2424
width: auto;
2525
height: auto;
26-
padding: 3px 6px;
27-
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 0 0 rgba(0, 0, 0, 0.12);
28-
background: rgba(246, 246, 246, 0.72);
26+
border: outset 0.5px rgba(0, 0, 0, 0.06);
27+
box-shadow: inset 0 0.5px 1px rgba(255, 255, 255, 0.5),
28+
0 2px 4px rgba(0, 0, 0, 0.15),
29+
0 8px 15px rgba(0, 0, 0, 0.18);
30+
border-radius: 8px;
31+
overflow: hidden;
32+
background: rgba(246, 246, 246, 0.6);
33+
backdrop-filter: blur(30px) saturate(200%);
34+
padding: 5px 5px;
35+
// gap: 6px;
2936

3037
p {
3138
margin: 0;
3239
font-family: "SFPro-Medium", "PingFangSC-Medium";
33-
font-size: 11px;
40+
font-size: 13px;
41+
line-height: 16px;
42+
height: 16px;
43+
display: flex;
44+
align-items: center;
45+
padding: 3px 10px;
46+
47+
&:hover {
48+
background: #0a82ff;
49+
color: white;
50+
border-radius: 5px;
51+
}
3452
}
3553
}

‎docs/overrides/js/webswift.js‎

Lines changed: 3 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/main.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
2-
* WebSwift Version 1.0
2+
* WebSwift Version 1.2
33
4-
* MIT License. Copyright 2025 CodeCrafter-TL.
4+
* MIT License. Copyright 2025 - 2026 Mengobs.
55
*/
66

77
export * from "./button";
@@ -12,4 +12,5 @@ export * from "./switch";
1212
export * from "./progress";
1313
export * from "./input";
1414
export * from "./notification";
15-
export * from "./tooltip";
15+
export * from "./tooltip";
16+
export * from "./menu";

‎src/menu.ts‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { initElement } from "./core/element";
2+
3+
export class Menu extends initElement({
4+
name: "swift-menu",
5+
template: `<slot></slot>`,
6+
style: `:host {
7+
display: inline-flex;
8+
flex-direction: column;
9+
justify-content: center;
10+
width: auto;
11+
height: auto;
12+
border: outset 0.5px rgba(0, 0, 0, 0.06);
13+
box-shadow: inset 0 0.5px 1px rgba(255, 255, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.15), 0 8px 15px rgba(0, 0, 0, 0.18);
14+
border-radius: 8px;
15+
overflow: hidden;
16+
background: rgba(246, 246, 246, 0.6);
17+
backdrop-filter: blur(30px) saturate(200%);
18+
padding: 5px 5px;
19+
}
20+
:host ::slotted(p) {
21+
margin: 0;
22+
font-family: "SFPro-Medium", "PingFangSC-Medium";
23+
font-size: 13px;
24+
line-height: 16px;
25+
height: 16px;
26+
display: flex;
27+
align-items: center;
28+
padding: 3px 10px;
29+
}
30+
:host ::slotted(p:hover) {
31+
background: #0a82ff;
32+
color: #fff;
33+
border-radius: 5px;
34+
}`,
35+
props: {
36+
width: "auto",
37+
},
38+
syncProps: ["width"],
39+
setup(shadow) {
40+
setTimeout(()=>{
41+
let width = this.width;
42+
if (width == "auto") {
43+
this.style.width = width;
44+
} else {
45+
this.style.width = width + "px";
46+
}
47+
});
48+
}
49+
}) {}
50+
51+
Menu.define();

‎test.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,11 @@
4141
<p slot="text">Notification Text<br />Notification Text</p>
4242
<p slot="time">now</p>
4343
</swift-notification>
44+
<swift-menu width="200">
45+
<p>Hello World</p>
46+
<p>WebSwift</p>
47+
<p>Author: Mengobs</p>
48+
</swift-menu>
4449

4550
<script src="./dist/webswift.js"></script>
4651
</body>

0 commit comments

Comments
 (0)