@stacksjs/hello-world-stx 0.75.330 → 0.75.334

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/README.md +7 -0
  2. package/dist/bundle.js +474 -0
  3. package/dist/bundle.js.map +23 -0
  4. package/dist/custom-elements.d.ts +153 -0
  5. package/dist/custom-elements.json +927 -0
  6. package/dist/index.d.ts +13 -0
  7. package/dist/index.js +13 -0
  8. package/dist/runtime.js +309 -0
  9. package/dist/ssr.d.ts +27 -0
  10. package/dist/ssr.js +388 -0
  11. package/dist/stacks-context-menu-item.d.ts +27 -0
  12. package/dist/stacks-context-menu-item.js +85 -0
  13. package/dist/stacks-context-menu.d.ts +24 -0
  14. package/dist/stacks-context-menu.js +35 -0
  15. package/dist/stacks-desktop-icon.d.ts +33 -0
  16. package/dist/stacks-desktop-icon.js +114 -0
  17. package/dist/stacks-feature-button.d.ts +26 -0
  18. package/dist/stacks-feature-button.js +56 -0
  19. package/dist/stacks-input-group.d.ts +28 -0
  20. package/dist/stacks-input-group.js +68 -0
  21. package/dist/stacks-login-form.d.ts +28 -0
  22. package/dist/stacks-login-form.js +85 -0
  23. package/dist/stacks-login-screen.d.ts +26 -0
  24. package/dist/stacks-login-screen.js +77 -0
  25. package/dist/stacks-notification-popup.d.ts +26 -0
  26. package/dist/stacks-notification-popup.js +85 -0
  27. package/dist/stacks-package-item.d.ts +26 -0
  28. package/dist/stacks-package-item.js +49 -0
  29. package/dist/stacks-start-menu-item.d.ts +28 -0
  30. package/dist/stacks-start-menu-item.js +99 -0
  31. package/dist/stacks-start-menu.d.ts +26 -0
  32. package/dist/stacks-start-menu.js +85 -0
  33. package/dist/stacks-taskbar.d.ts +24 -0
  34. package/dist/stacks-taskbar.js +63 -0
  35. package/dist/stacks-window.d.ts +31 -0
  36. package/dist/stacks-window.js +104 -0
  37. package/package.json +4 -4
@@ -0,0 +1,49 @@
1
+ import { StxElement, defineComponent } from './runtime.js';
2
+
3
+ /** PackageItem web component generated from PackageItem.stx. */
4
+ export class PackageItem extends StxElement {
5
+
6
+ render(__helpers) {
7
+ const { escape: __escape, raw: __raw, values: __values, entries: __entries } = __helpers;
8
+ const { emoji, title, description } = this._props();
9
+ let out = "";
10
+ out += `<div class="package-item">
11
+ <div class="package-emoji">`;
12
+ out += __escape(emoji);
13
+ out += `</div>
14
+ <div class="package-title">`;
15
+ out += __escape(title);
16
+ out += `</div>
17
+ <div class="package-desc">`;
18
+ out += __escape(description);
19
+ out += `</div>
20
+ </div>`;
21
+ return out;
22
+ }
23
+
24
+ }
25
+
26
+ defineComponent(PackageItem, {
27
+ "tag": "stacks-package-item",
28
+ "template": "<div class=\"package-item\">\n <div class=\"package-emoji\">{{ emoji }}</div>\n <div class=\"package-title\">{{ title }}</div>\n <div class=\"package-desc\">{{ description }}</div>\n </div>",
29
+ "styles": "",
30
+ "shadowMode": false,
31
+ "progressive": true,
32
+ "properties": {
33
+ "emoji": {
34
+ "type": "string",
35
+ "reflect": true
36
+ },
37
+ "title": {
38
+ "type": "string",
39
+ "reflect": true
40
+ },
41
+ "description": {
42
+ "type": "string",
43
+ "reflect": true
44
+ }
45
+ },
46
+ "eventTypes": [],
47
+ "bindings": []
48
+ });
49
+ export default PackageItem;
@@ -0,0 +1,28 @@
1
+ export interface StartMenuItemProps {
2
+ icon?: string
3
+ label?: string
4
+ onclick?: string
5
+ url?: string
6
+ highlighted?: boolean
7
+ }
8
+
9
+ export interface StartMenuItemEventMap {
10
+
11
+ }
12
+
13
+ export interface StartMenuItem extends Required<Pick<StartMenuItemProps, Exclude<keyof StartMenuItemProps, keyof HTMLElement>>> {}
14
+
15
+ export declare class StartMenuItem extends HTMLElement {
16
+
17
+ readonly updateComplete: Promise<void>
18
+ requestUpdate(): Promise<void>
19
+ emit<T = unknown>(name: string, detail?: T, options?: CustomEventInit<T>): boolean
20
+ }
21
+
22
+ declare global {
23
+ interface HTMLElementTagNameMap {
24
+ "stacks-start-menu-item": StartMenuItem
25
+ }
26
+ }
27
+
28
+ export default StartMenuItem
@@ -0,0 +1,99 @@
1
+ import { StxElement, defineComponent } from './runtime.js';
2
+
3
+ /** StartMenuItem web component generated from StartMenuItem.stx. */
4
+ export class StartMenuItem extends StxElement {
5
+
6
+ render(__helpers) {
7
+ const { escape: __escape, raw: __raw, values: __values, entries: __entries } = __helpers;
8
+ const { icon = "\uD83D\uDCC4", label, onclick, url, highlighted = false } = this._props();
9
+ let out = "";
10
+ if (url) {
11
+ out += `
12
+ <button
13
+ class="start-menu-item `;
14
+ out += __escape(highlighted ? "highlighted" : "");
15
+ out += `"
16
+ onclick="window.open('`;
17
+ out += __escape(url);
18
+ out += `', '_blank')"
19
+ >
20
+ <span class="start-menu-item-icon">`;
21
+ out += __escape(icon);
22
+ out += `</span>
23
+ <span class="start-menu-item-label">`;
24
+ out += __escape(label);
25
+ out += `</span>
26
+ </button>
27
+ `;
28
+ } else if (onclick) {
29
+ out += `
30
+ <button
31
+ class="start-menu-item `;
32
+ out += __escape(highlighted ? "highlighted" : "");
33
+ out += `"
34
+ onclick="`;
35
+ out += __escape(onclick);
36
+ out += `"
37
+ >
38
+ <span class="start-menu-item-icon">`;
39
+ out += __escape(icon);
40
+ out += `</span>
41
+ <span class="start-menu-item-label">`;
42
+ out += __escape(label);
43
+ out += `</span>
44
+ </button>
45
+ `;
46
+ } else {
47
+ out += `<button
48
+ class="start-menu-item `;
49
+ out += __escape(highlighted ? "highlighted" : "");
50
+ out += `"
51
+ >
52
+ <span class="start-menu-item-icon">`;
53
+ out += __escape(icon);
54
+ out += `</span>
55
+ <span class="start-menu-item-label">`;
56
+ out += __escape(label);
57
+ out += `</span>
58
+ </button>
59
+ `;
60
+ }
61
+ return out;
62
+ }
63
+
64
+ }
65
+
66
+ defineComponent(StartMenuItem, {
67
+ "tag": "stacks-start-menu-item",
68
+ "template": "@if (url)\n <button\n class=\"start-menu-item {{ highlighted ? 'highlighted' : '' }}\"\n onclick=\"window.open('{{ url }}', '_blank')\"\n >\n <span class=\"start-menu-item-icon\">{{ icon }}</span>\n <span class=\"start-menu-item-label\">{{ label }}</span>\n </button>\n @elseif (onclick)\n <button\n class=\"start-menu-item {{ highlighted ? 'highlighted' : '' }}\"\n onclick=\"{{ onclick }}\"\n >\n <span class=\"start-menu-item-icon\">{{ icon }}</span>\n <span class=\"start-menu-item-label\">{{ label }}</span>\n </button>\n @else\n <button\n class=\"start-menu-item {{ highlighted ? 'highlighted' : '' }}\"\n >\n <span class=\"start-menu-item-icon\">{{ icon }}</span>\n <span class=\"start-menu-item-label\">{{ label }}</span>\n </button>\n @endif",
69
+ "styles": "",
70
+ "shadowMode": false,
71
+ "progressive": true,
72
+ "properties": {
73
+ "icon": {
74
+ "type": "string",
75
+ "default": "📄",
76
+ "reflect": true
77
+ },
78
+ "label": {
79
+ "type": "string",
80
+ "reflect": true
81
+ },
82
+ "onclick": {
83
+ "type": "string",
84
+ "reflect": true
85
+ },
86
+ "url": {
87
+ "type": "string",
88
+ "reflect": true
89
+ },
90
+ "highlighted": {
91
+ "type": "boolean",
92
+ "default": false,
93
+ "reflect": true
94
+ }
95
+ },
96
+ "eventTypes": [],
97
+ "bindings": []
98
+ });
99
+ export default StartMenuItem;
@@ -0,0 +1,26 @@
1
+ export interface StartMenuProps {
2
+ id?: string
3
+ userName?: string
4
+ userImage?: string
5
+ }
6
+
7
+ export interface StartMenuEventMap {
8
+
9
+ }
10
+
11
+ export interface StartMenu extends Required<Pick<StartMenuProps, Exclude<keyof StartMenuProps, keyof HTMLElement>>> {}
12
+
13
+ export declare class StartMenu extends HTMLElement {
14
+
15
+ readonly updateComplete: Promise<void>
16
+ requestUpdate(): Promise<void>
17
+ emit<T = unknown>(name: string, detail?: T, options?: CustomEventInit<T>): boolean
18
+ }
19
+
20
+ declare global {
21
+ interface HTMLElementTagNameMap {
22
+ "stacks-start-menu": StartMenu
23
+ }
24
+ }
25
+
26
+ export default StartMenu
@@ -0,0 +1,85 @@
1
+ import { StxElement, defineComponent } from './runtime.js';
2
+
3
+ /** StartMenu web component generated from StartMenu.stx. */
4
+ export class StartMenu extends StxElement {
5
+
6
+ render(__helpers) {
7
+ const { escape: __escape, raw: __raw, values: __values, entries: __entries } = __helpers;
8
+ const { id = "start-menu", userName = "Developer", userImage = "\uD83D\uDC64" } = this._props();
9
+ let out = "";
10
+ out += '<div class="start-menu" id="';
11
+ out += __escape(id);
12
+ out += `" style="display: none;">
13
+ <div class="start-menu-header">
14
+ <div class="start-menu-user-image">`;
15
+ out += __escape(userImage);
16
+ out += `</div>
17
+ <div class="start-menu-user-name">`;
18
+ out += __escape(userName);
19
+ out += `</div>
20
+ </div>
21
+
22
+ <div class="start-menu-content">
23
+ <div class="start-menu-left">
24
+ <div class="start-menu-pinned">
25
+ <slot name="pinned-items" />
26
+ </div>
27
+ <div class="start-menu-separator"></div>
28
+ <slot name="all-programs">
29
+ <button class="start-menu-item all-programs">
30
+ <span>All Programs</span>
31
+ <span class="arrow">▸</span>
32
+ </button>
33
+ </slot>
34
+ </div>
35
+
36
+ <div class="start-menu-right">
37
+ <slot name="right-items" />
38
+ </div>
39
+ </div>
40
+
41
+ <div class="start-menu-footer">
42
+ <slot name="footer">
43
+ <button class="start-menu-footer-btn" onclick="showLoginScreen()">
44
+ <span class="footer-icon">\uD83D\uDD11</span>
45
+ <span>Log Off</span>
46
+ </button>
47
+ <button class="start-menu-footer-btn" onclick="window.location.reload()">
48
+ <span class="footer-icon">\uD83D\uDD04</span>
49
+ <span>Restart</span>
50
+ </button>
51
+ </slot>
52
+ </div>
53
+ </div>`;
54
+ return out;
55
+ }
56
+
57
+ }
58
+
59
+ defineComponent(StartMenu, {
60
+ "tag": "stacks-start-menu",
61
+ "template": "<div class=\"start-menu\" id=\"{{ id }}\" style=\"display: none;\">\n <div class=\"start-menu-header\">\n <div class=\"start-menu-user-image\">{{ userImage }}</div>\n <div class=\"start-menu-user-name\">{{ userName }}</div>\n </div>\n\n <div class=\"start-menu-content\">\n <div class=\"start-menu-left\">\n <div class=\"start-menu-pinned\">\n <slot name=\"pinned-items\" />\n </div>\n <div class=\"start-menu-separator\"></div>\n <slot name=\"all-programs\">\n <button class=\"start-menu-item all-programs\">\n <span>All Programs</span>\n <span class=\"arrow\">▸</span>\n </button>\n </slot>\n </div>\n\n <div class=\"start-menu-right\">\n <slot name=\"right-items\" />\n </div>\n </div>\n\n <div class=\"start-menu-footer\">\n <slot name=\"footer\">\n <button class=\"start-menu-footer-btn\" onclick=\"showLoginScreen()\">\n <span class=\"footer-icon\">🔑</span>\n <span>Log Off</span>\n </button>\n <button class=\"start-menu-footer-btn\" onclick=\"window.location.reload()\">\n <span class=\"footer-icon\">🔄</span>\n <span>Restart</span>\n </button>\n </slot>\n </div>\n </div>",
62
+ "styles": "",
63
+ "shadowMode": false,
64
+ "progressive": true,
65
+ "properties": {
66
+ "id": {
67
+ "type": "string",
68
+ "default": "start-menu",
69
+ "reflect": true
70
+ },
71
+ "userName": {
72
+ "type": "string",
73
+ "default": "Developer",
74
+ "reflect": true
75
+ },
76
+ "userImage": {
77
+ "type": "string",
78
+ "default": "👤",
79
+ "reflect": true
80
+ }
81
+ },
82
+ "eventTypes": [],
83
+ "bindings": []
84
+ });
85
+ export default StartMenu;
@@ -0,0 +1,24 @@
1
+ export interface TaskbarProps {
2
+ showStartMenu?: boolean
3
+ }
4
+
5
+ export interface TaskbarEventMap {
6
+
7
+ }
8
+
9
+ export interface Taskbar extends Required<Pick<TaskbarProps, Exclude<keyof TaskbarProps, keyof HTMLElement>>> {}
10
+
11
+ export declare class Taskbar extends HTMLElement {
12
+
13
+ readonly updateComplete: Promise<void>
14
+ requestUpdate(): Promise<void>
15
+ emit<T = unknown>(name: string, detail?: T, options?: CustomEventInit<T>): boolean
16
+ }
17
+
18
+ declare global {
19
+ interface HTMLElementTagNameMap {
20
+ "stacks-taskbar": Taskbar
21
+ }
22
+ }
23
+
24
+ export default Taskbar
@@ -0,0 +1,63 @@
1
+ import { StxElement, defineComponent } from './runtime.js';
2
+
3
+ /** Taskbar web component generated from Taskbar.stx. */
4
+ export class Taskbar extends StxElement {
5
+
6
+ render(__helpers) {
7
+ const { escape: __escape, raw: __raw, values: __values, entries: __entries } = __helpers;
8
+ const { showStartMenu = true } = this._props();
9
+ let out = "";
10
+ out += `<div class="taskbar">
11
+ `;
12
+ if (showStartMenu) {
13
+ out += `
14
+ <button class="start-button" onclick="toggleStartMenu()">
15
+ <div class="start-button-flag">
16
+ <div class="flag-red"></div>
17
+ <div class="flag-green"></div>
18
+ <div class="flag-blue"></div>
19
+ <div class="flag-yellow"></div>
20
+ </div>
21
+ <span>Start</span>
22
+ </button>
23
+ `;
24
+ }
25
+ out += `<div class="quick-launch">
26
+ <slot name="quick-launch" />
27
+ </div>
28
+
29
+ <div class="taskbar-windows" id="taskbar-windows">
30
+ <slot name="taskbar-windows" />
31
+ </div>
32
+
33
+ <div class="system-tray">
34
+ <slot name="system-tray">
35
+ <button class="tray-icon" onclick="toggleNotificationPopup()">\uD83D\uDD14</button>
36
+ <button class="tray-icon" onclick="window.open('https://github.com/stacksjs/stacks', '_blank')">\uD83D\uDCBB</button>
37
+ <button class="tray-icon" onclick="window.open('https://stacksjs.com/discord', '_blank')">\uD83D\uDCAC</button>
38
+ </slot>
39
+ <div class="clock" id="clock"></div>
40
+ </div>
41
+ </div>`;
42
+ return out;
43
+ }
44
+
45
+ }
46
+
47
+ defineComponent(Taskbar, {
48
+ "tag": "stacks-taskbar",
49
+ "template": "<div class=\"taskbar\">\n @if (showStartMenu)\n <button class=\"start-button\" onclick=\"toggleStartMenu()\">\n <div class=\"start-button-flag\">\n <div class=\"flag-red\"></div>\n <div class=\"flag-green\"></div>\n <div class=\"flag-blue\"></div>\n <div class=\"flag-yellow\"></div>\n </div>\n <span>Start</span>\n </button>\n @endif\n\n <div class=\"quick-launch\">\n <slot name=\"quick-launch\" />\n </div>\n\n <div class=\"taskbar-windows\" id=\"taskbar-windows\">\n <slot name=\"taskbar-windows\" />\n </div>\n\n <div class=\"system-tray\">\n <slot name=\"system-tray\">\n <button class=\"tray-icon\" onclick=\"toggleNotificationPopup()\">🔔</button>\n <button class=\"tray-icon\" onclick=\"window.open('https://github.com/stacksjs/stacks', '_blank')\">💻</button>\n <button class=\"tray-icon\" onclick=\"window.open('https://stacksjs.com/discord', '_blank')\">💬</button>\n </slot>\n <div class=\"clock\" id=\"clock\"></div>\n </div>\n </div>",
50
+ "styles": "",
51
+ "shadowMode": false,
52
+ "progressive": true,
53
+ "properties": {
54
+ "showStartMenu": {
55
+ "type": "boolean",
56
+ "default": true,
57
+ "reflect": true
58
+ }
59
+ },
60
+ "eventTypes": [],
61
+ "bindings": []
62
+ });
63
+ export default Taskbar;
@@ -0,0 +1,31 @@
1
+ export interface WindowProps {
2
+ id?: string
3
+ icon?: string
4
+ title?: string
5
+ left?: string
6
+ top?: string
7
+ width?: string
8
+ height?: string
9
+ style?: string
10
+ }
11
+
12
+ export interface WindowEventMap {
13
+
14
+ }
15
+
16
+ export interface Window extends Required<Pick<WindowProps, Exclude<keyof WindowProps, keyof HTMLElement>>> {}
17
+
18
+ export declare class Window extends HTMLElement {
19
+
20
+ readonly updateComplete: Promise<void>
21
+ requestUpdate(): Promise<void>
22
+ emit<T = unknown>(name: string, detail?: T, options?: CustomEventInit<T>): boolean
23
+ }
24
+
25
+ declare global {
26
+ interface HTMLElementTagNameMap {
27
+ "stacks-window": Window
28
+ }
29
+ }
30
+
31
+ export default Window
@@ -0,0 +1,104 @@
1
+ import { StxElement, defineComponent } from './runtime.js';
2
+
3
+ /** Window web component generated from Window.stx. */
4
+ export class Window extends StxElement {
5
+
6
+ render(__helpers) {
7
+ const { escape: __escape, raw: __raw, values: __values, entries: __entries } = __helpers;
8
+ const { id, icon = "\uD83D\uDCC4", title, left = "100px", top = "80px", width = "600px", height = "500px", style = "" } = this._props();
9
+ let out = "";
10
+ out += '<div id="window-';
11
+ out += __escape(id);
12
+ out += '" class="window" style="';
13
+ if (style) {
14
+ out += __escape(style);
15
+ } else {
16
+ out += "left: ";
17
+ out += __escape(left);
18
+ out += "; top: ";
19
+ out += __escape(top);
20
+ out += "; width: ";
21
+ out += __escape(width);
22
+ out += "; height: ";
23
+ out += __escape(height);
24
+ out += ";";
25
+ }
26
+ out += `">
27
+ <div class="window-titlebar">
28
+ <div class="window-icon">`;
29
+ out += __escape(icon);
30
+ out += `</div>
31
+ <div class="window-title">`;
32
+ out += __escape(title);
33
+ out += `</div>
34
+ <div class="window-controls">
35
+ <button class="minimize window-control" onclick="minimizeWindow('`;
36
+ out += __escape(id);
37
+ out += `')">_</button>
38
+ <button class="maximize window-control" onclick="toggleMaximizeWindow('`;
39
+ out += __escape(id);
40
+ out += `')">□</button>
41
+ <button class="close window-control" onclick="closeWindow('`;
42
+ out += __escape(id);
43
+ out += `')">×</button>
44
+ </div>
45
+ </div>
46
+ <div class="window-content">
47
+ <slot />
48
+ </div>
49
+ </div>`;
50
+ return out;
51
+ }
52
+
53
+ }
54
+
55
+ defineComponent(Window, {
56
+ "tag": "stacks-window",
57
+ "template": "<div id=\"window-{{ id }}\" class=\"window\" style=\"@if(style){{ style }}@else left: {{ left }}; top: {{ top }}; width: {{ width }}; height: {{ height }};@endif\">\n <div class=\"window-titlebar\">\n <div class=\"window-icon\">{{ icon }}</div>\n <div class=\"window-title\">{{ title }}</div>\n <div class=\"window-controls\">\n <button class=\"minimize window-control\" onclick=\"minimizeWindow('{{ id }}')\">_</button>\n <button class=\"maximize window-control\" onclick=\"toggleMaximizeWindow('{{ id }}')\">□</button>\n <button class=\"close window-control\" onclick=\"closeWindow('{{ id }}')\">×</button>\n </div>\n </div>\n <div class=\"window-content\">\n <slot />\n </div>\n </div>",
58
+ "styles": "",
59
+ "shadowMode": false,
60
+ "progressive": true,
61
+ "properties": {
62
+ "id": {
63
+ "type": "string",
64
+ "reflect": true
65
+ },
66
+ "icon": {
67
+ "type": "string",
68
+ "default": "📄",
69
+ "reflect": true
70
+ },
71
+ "title": {
72
+ "type": "string",
73
+ "reflect": true
74
+ },
75
+ "left": {
76
+ "type": "string",
77
+ "default": "100px",
78
+ "reflect": true
79
+ },
80
+ "top": {
81
+ "type": "string",
82
+ "default": "80px",
83
+ "reflect": true
84
+ },
85
+ "width": {
86
+ "type": "string",
87
+ "default": "600px",
88
+ "reflect": true
89
+ },
90
+ "height": {
91
+ "type": "string",
92
+ "default": "500px",
93
+ "reflect": true
94
+ },
95
+ "style": {
96
+ "type": "string",
97
+ "default": "",
98
+ "reflect": true
99
+ }
100
+ },
101
+ "eventTypes": [],
102
+ "bindings": []
103
+ });
104
+ export default Window;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@stacksjs/hello-world-stx",
3
3
  "type": "module",
4
- "version": "0.75.330",
4
+ "version": "0.75.334",
5
5
  "description": "Your STX component library description",
6
6
  "author": "Chris Breuer",
7
7
  "contributors": [
@@ -37,11 +37,11 @@
37
37
  "dist"
38
38
  ],
39
39
  "scripts": {
40
- "dev": "bunx --bun vite -c ../../../core/vite-config/src/components.ts",
41
- "build": "bunx --bun vite build -c ../../../core/vite-config/src/components.ts",
40
+ "dev": "../../../../../buddy dev:components",
41
+ "build": "bun build.ts",
42
42
  "prepublishOnly": "bun run build"
43
43
  },
44
44
  "devDependencies": {
45
- "stacks": "^0.75.330"
45
+ "stacks": "^0.75.334"
46
46
  }
47
47
  }