goblin-magic 1.0.3

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 (88) hide show
  1. package/.editorconfig +9 -0
  2. package/.zou-flow +2 -0
  3. package/eslint.config.js +65 -0
  4. package/magicNavigation.js +7 -0
  5. package/package.json +45 -0
  6. package/widgets/dialog/widget.js +78 -0
  7. package/widgets/element-helpers/element-has-direct-text.js +9 -0
  8. package/widgets/element-helpers/is-empty-area-element.js +17 -0
  9. package/widgets/element-helpers/is-flat-element.js +52 -0
  10. package/widgets/get-modifiers/get-modifiers.js +34 -0
  11. package/widgets/input-group/styles.js +74 -0
  12. package/widgets/input-group/widget.js +24 -0
  13. package/widgets/magic-action/styles.js +45 -0
  14. package/widgets/magic-action/widget.js +44 -0
  15. package/widgets/magic-background/bg-alps.jpg +0 -0
  16. package/widgets/magic-background/bg-fur.png +0 -0
  17. package/widgets/magic-background/bg-milkyway.png +0 -0
  18. package/widgets/magic-background/bg-space.jpg +0 -0
  19. package/widgets/magic-background/bg-synth.jpg +0 -0
  20. package/widgets/magic-background/bg-white.png +0 -0
  21. package/widgets/magic-background/styles.js +81 -0
  22. package/widgets/magic-background/widget.js +20 -0
  23. package/widgets/magic-box/styles.js +10 -0
  24. package/widgets/magic-box/widget.js +28 -0
  25. package/widgets/magic-box-old/styles.js +111 -0
  26. package/widgets/magic-box-old/widget.js +30 -0
  27. package/widgets/magic-button/styles.js +156 -0
  28. package/widgets/magic-button/widget.js +89 -0
  29. package/widgets/magic-checkbox/styles.js +116 -0
  30. package/widgets/magic-checkbox/widget.js +68 -0
  31. package/widgets/magic-color-field/styles.js +22 -0
  32. package/widgets/magic-color-field/widget.js +68 -0
  33. package/widgets/magic-date-field/styles.js +9 -0
  34. package/widgets/magic-date-field/widget.js +145 -0
  35. package/widgets/magic-datetime-field/styles.js +11 -0
  36. package/widgets/magic-datetime-field/widget.js +95 -0
  37. package/widgets/magic-dialog/styles.js +39 -0
  38. package/widgets/magic-dialog/widget.js +116 -0
  39. package/widgets/magic-div/styles.js +22 -0
  40. package/widgets/magic-div/widget.js +20 -0
  41. package/widgets/magic-emoji/styles.js +14 -0
  42. package/widgets/magic-emoji/widget.js +33 -0
  43. package/widgets/magic-emoji-picker/styles.js +21 -0
  44. package/widgets/magic-emoji-picker/widget.js +44 -0
  45. package/widgets/magic-inplace-input/styles.js +55 -0
  46. package/widgets/magic-inplace-input/widget.js +26 -0
  47. package/widgets/magic-input/styles.js +50 -0
  48. package/widgets/magic-input/widget.js +397 -0
  49. package/widgets/magic-label/styles.js +20 -0
  50. package/widgets/magic-label/widget.js +24 -0
  51. package/widgets/magic-navigation/service.js +1306 -0
  52. package/widgets/magic-navigation/styles.js +103 -0
  53. package/widgets/magic-navigation/view-context.js +15 -0
  54. package/widgets/magic-navigation/widget.js +540 -0
  55. package/widgets/magic-number-field/styles.js +10 -0
  56. package/widgets/magic-number-field/widget.js +103 -0
  57. package/widgets/magic-panel/styles.js +61 -0
  58. package/widgets/magic-panel/widget.js +63 -0
  59. package/widgets/magic-radio/styles.js +93 -0
  60. package/widgets/magic-radio/widget.js +74 -0
  61. package/widgets/magic-scroll/styles.js +22 -0
  62. package/widgets/magic-scroll/widget.js +20 -0
  63. package/widgets/magic-select/styles.js +16 -0
  64. package/widgets/magic-select/widget.js +134 -0
  65. package/widgets/magic-table/reducer.js +63 -0
  66. package/widgets/magic-table/styles.js +170 -0
  67. package/widgets/magic-table/widget.js +627 -0
  68. package/widgets/magic-tag/styles.js +32 -0
  69. package/widgets/magic-tag/widget.js +32 -0
  70. package/widgets/magic-text-field/styles.js +58 -0
  71. package/widgets/magic-text-field/widget.js +66 -0
  72. package/widgets/magic-time-field/styles.js +8 -0
  73. package/widgets/magic-time-field/widget.js +142 -0
  74. package/widgets/magic-timer/styles.js +30 -0
  75. package/widgets/magic-timer/widget.js +162 -0
  76. package/widgets/magic-zen/styles.js +61 -0
  77. package/widgets/magic-zen/widget.js +42 -0
  78. package/widgets/main-tabs/styles.js +106 -0
  79. package/widgets/main-tabs/widget.js +23 -0
  80. package/widgets/menu/styles.js +156 -0
  81. package/widgets/menu/test-menu.html +154 -0
  82. package/widgets/menu/widget.js +575 -0
  83. package/widgets/movable/widget.js +80 -0
  84. package/widgets/splitter/styles.js +57 -0
  85. package/widgets/splitter/widget.js +40 -0
  86. package/widgets/tab-layout/styles.js +31 -0
  87. package/widgets/tab-layout/widget.js +59 -0
  88. package/widgets/with-computed-size/widget.js +52 -0
package/widgets/menu/styles.js ADDED
@@ -0,0 +1,156 @@
1
+ export default function styles() {
2
+ const menuItem = {
3
+ 'width': '100%',
4
+ 'backgroundColor': 'transparent',
5
+ 'border': 'none',
6
+ 'borderRadius': '2px',
7
+ 'display': 'flex',
8
+ 'flexDirection': 'row',
9
+ 'alignItems': 'center',
10
+ 'textAlign': 'left',
11
+ 'padding': '6px 8px',
12
+ 'color': 'var(--text-color)',
13
+ 'fontSize': '14px',
14
+ 'outline': '1px solid transparent',
15
+ '&:not(:disabled):hover': {
16
+ // outlineColor: 'color-mix(in srgb, var(--text-color), transparent 30%)',
17
+ // backgroundColor: 'color-mix(in srgb, var(--text-color), transparent 90%)',
18
+ backgroundColor:
19
+ 'color-mix(in srgb, var(--button-accent-color), transparent 80%)',
20
+ outlineColor:
21
+ 'color-mix(in srgb, var(--button-accent-color), transparent 20%)',
22
+ },
23
+ '&:disabled': {
24
+ color: 'rgb(170,170,170)',
25
+ },
26
+
27
+ '&:focus-visible': {
28
+ boxShadow: '0px 0px 3px var(--text-color)',
29
+ outlineColor: 'color-mix(in srgb, var(--text-color), transparent 20%)',
30
+ },
31
+
32
+ '& > :first-child:not(:last-child)': {
33
+ marginRight: '6px',
34
+ minWidth: '18px',
35
+ },
36
+ };
37
+
38
+ const menuItemRight = {
39
+ 'flexGrow': 1,
40
+ 'display': 'flex',
41
+ 'justifyContent': 'flex-end',
42
+ 'width': '20px',
43
+
44
+ '& svg': {
45
+ minWidth: '12px',
46
+ },
47
+ };
48
+
49
+ const menuTitle = {
50
+ 'color': 'color-mix(in srgb, var(--text-color), transparent 40%)',
51
+ 'fontWeight': 'bold',
52
+ 'fontSize': '14px',
53
+ 'padding': '4px 6px',
54
+
55
+ 'display': 'flex',
56
+ 'flexDirection': 'row',
57
+ 'alignItems': 'center',
58
+ 'gap': '6px',
59
+
60
+ '& > hr': {
61
+ opacity: '0.3',
62
+ flexGrow: 1,
63
+ position: 'relative',
64
+ top: '1px',
65
+ },
66
+ };
67
+
68
+ const menuDialog = {
69
+ '::backdrop': {
70
+ backgroundColor: 'transparent',
71
+ },
72
+
73
+ '&[open]': {
74
+ border: 'none',
75
+ backgroundColor: 'transparent',
76
+ maxWidth: 'none',
77
+ maxHeight: 'none',
78
+ margin: '0',
79
+ padding: '0',
80
+ width: '100%',
81
+ height: '100%',
82
+ },
83
+ };
84
+
85
+ const menuPosition = {
86
+ position: 'absolute',
87
+ };
88
+
89
+ const menuContent = {
90
+ 'position': 'relative',
91
+ 'width': 'fit-content',
92
+ 'border':
93
+ '1px solid color-mix(in srgb, var(--text-color), transparent 50%)',
94
+ 'borderRadius': '5px',
95
+ // backgroundColor: 'rgba(255,255,255,0.3)',
96
+ 'backgroundColor': 'rgba(25,45,70,0.5)',
97
+ '@media (prefers-color-scheme: light)': {
98
+ backgroundColor: 'rgba(232,241,252,0.5)',
99
+ },
100
+ 'display': 'flex',
101
+ 'flexDirection': 'column',
102
+ 'boxShadow': '0 0 20px rgba(0, 0, 0, 0.2)',
103
+ 'color': 'var(--text-color)',
104
+
105
+ '&::before': {
106
+ content: "''",
107
+ position: 'absolute',
108
+ width: '100%',
109
+ height: '100%',
110
+ borderRadius: '5px',
111
+ backdropFilter: 'blur(10px)',
112
+ zIndex: -1,
113
+ },
114
+ };
115
+
116
+ const submenu = {
117
+ 'position': 'relative',
118
+
119
+ '& .content': {
120
+ ...menuContent,
121
+ 'display': 'none',
122
+ 'position': 'absolute',
123
+ 'left': '100%',
124
+ 'top': 0,
125
+ 'width': 'max-content',
126
+
127
+ '&[data-position~="top"]': {
128
+ top: 'unset',
129
+ bottom: 0,
130
+ },
131
+ },
132
+ ':hover .content': {
133
+ display: 'flex',
134
+ },
135
+ };
136
+
137
+ const menuHr = {
138
+ width: 'calc(100% - 20px)',
139
+ opacity: '0.5',
140
+ margin: '3px 0',
141
+ alignSelf: 'center',
142
+ };
143
+
144
+ return {
145
+ submenu,
146
+ menuItem,
147
+ menuItemRight,
148
+ menuTitle,
149
+ menuDialog,
150
+ menuPosition,
151
+ menuContent,
152
+ menuHr,
153
+ };
154
+ }
155
+
156
+ /******************************************************************************/
package/widgets/menu/test-menu.html ADDED
@@ -0,0 +1,154 @@
1
+ <!DOCTYPE html>
2
+ <html lang="">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title></title>
6
+ <style>
7
+ * {
8
+ box-sizing: border-box;
9
+ }
10
+
11
+ body {
12
+ margin: 0;
13
+ }
14
+
15
+ .viewport {
16
+ position: absolute;
17
+ height: 100vh;
18
+ width: 100%;
19
+ display: flex;
20
+ flex-direction: column-reverse;
21
+ border-bottom: 1px solid red;
22
+ z-index: -1;
23
+ }
24
+
25
+ main {
26
+ height: 500px;
27
+ overflow: auto;
28
+ border-bottom: 3px solid green;
29
+ position: relative;
30
+ }
31
+
32
+ .content {
33
+ height: 1200px;
34
+ }
35
+
36
+ .anchor-position {
37
+ width: 100px;
38
+ height: 100px;
39
+ resize: both;
40
+ overflow: auto;
41
+ display: flex;
42
+ flex-direction: column;
43
+ justify-content: flex-end;
44
+ align-items: flex-end;
45
+ }
46
+
47
+ .dialog-button {
48
+ anchor-name: --button;
49
+ }
50
+
51
+ dialog {
52
+ /* position: absolute; */
53
+ /* inset: 0; */
54
+ /* width: 100%; */
55
+ /* height: 100%; */
56
+ }
57
+
58
+ dialog::backdrop {
59
+ background-color: rgba(0, 128, 255, 0.1);
60
+ }
61
+
62
+ .menu-dialog {
63
+ background-color: rgba(0, 0, 0, 0.1);
64
+ margin: 0;
65
+ padding: 0;
66
+ border: none;
67
+ outline: none;
68
+ max-width: 100%;
69
+ max-height: 100%;
70
+
71
+ min-height: min-content;
72
+ background-color: rgba(0, 255, 0, 0.1);
73
+ position: absolute;
74
+ position-anchor: --button;
75
+ position-area: bottom span-right;
76
+ position-try-fallbacks: flip-block;
77
+ overflow: visible;
78
+ }
79
+
80
+ .menu-content {
81
+ width: max-content;
82
+ max-width: 100vw;
83
+ float: right;
84
+ background-color: rgba(0, 0, 0, 0.1);
85
+ border: 1px solid black;
86
+ border-radius: 5px;
87
+ padding: 10px;
88
+ }
89
+
90
+ .menu-item {
91
+ padding: 5px;
92
+ }
93
+ </style>
94
+ </head>
95
+ <body>
96
+ <main>
97
+ <div class="viewport">100vh</div>
98
+ <div class="content">
99
+ <div class="anchor-position">
100
+ <label>
101
+ <input type="checkbox" class="modal-checkbox" checked />
102
+ modal
103
+ </label>
104
+ <label>
105
+ <input type="checkbox" class="position-checkbox" checked />
106
+ fixed
107
+ </label>
108
+ <button class="dialog-button">Button</button>
109
+
110
+ <dialog class="menu-dialog">
111
+ <div class="menu-content">
112
+ <h3>Dialog content</h3>
113
+ <div class="menu-item">Open</div>
114
+ <div class="menu-item">Open in new window</div>
115
+ <div class="menu-item">Copy</div>
116
+ <div class="menu-item">Cut</div>
117
+ </div>
118
+ </dialog>
119
+ </div>
120
+ </div>
121
+ </main>
122
+ <script>
123
+ const dialog = document.querySelector('.menu-dialog');
124
+ const button = document.querySelector('.dialog-button');
125
+ const modalCheckbox = document.querySelector('.modal-checkbox');
126
+
127
+ button.addEventListener('click', (event) => {
128
+ if (dialog.open) {
129
+ dialog.close();
130
+ } else {
131
+ if (modalCheckbox.checked) {
132
+ dialog.showModal();
133
+ } else {
134
+ dialog.show();
135
+ }
136
+ }
137
+ });
138
+ dialog.addEventListener('click', (event) => {
139
+ if (event.target === dialog) {
140
+ dialog.close();
141
+ }
142
+ });
143
+
144
+ const positionCheckbox = document.querySelector('.position-checkbox');
145
+ positionCheckbox.addEventListener('change', (event) => {
146
+ if (event.target.checked) {
147
+ dialog.style.position = 'fixed';
148
+ } else {
149
+ dialog.style.position = 'absolute';
150
+ }
151
+ });
152
+ </script>
153
+ </body>
154
+ </html>