slicejs-web-framework 1.0.21 → 1.0.22
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.
|
@@ -9,11 +9,127 @@ export default class Debugger extends HTMLElement {
|
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
async enableDebugMode() {
|
|
12
|
-
const html = await slice.controller.fetchText('Debugger', true, true, "/Slice/Components/Structural/Debugger/Debugger.html" );
|
|
12
|
+
//const html = await slice.controller.fetchText('Debugger', true, true, "/Slice/Components/Structural/Debugger/Debugger.html" );
|
|
13
|
+
|
|
14
|
+
const html = `
|
|
15
|
+
<div id="debugger-container">
|
|
16
|
+
<div class="debugger-header">
|
|
17
|
+
<div id="close-debugger">[×]</div>
|
|
18
|
+
<h3>Component Details</h3>
|
|
19
|
+
</div>
|
|
20
|
+
<div id="component-details">
|
|
21
|
+
<ul class="component-details-list"></ul>
|
|
22
|
+
<div class="component-details-table"></div>
|
|
23
|
+
</div>
|
|
24
|
+
</div>`
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
13
30
|
this.innerHTML = html;
|
|
14
|
-
const css = await slice.controller.fetchText('Debugger', true, true, "/Slice/Components/Structural/Debugger/Debugger.css"
|
|
31
|
+
//const css = await slice.controller.fetchText('Debugger', true, true, "/Slice/Components/Structural/Debugger/Debugger.css");
|
|
32
|
+
const css = `
|
|
33
|
+
#debugger-container {
|
|
34
|
+
font-family: var(--font-family);
|
|
35
|
+
display: none;
|
|
36
|
+
position: fixed;
|
|
37
|
+
top: 20px;
|
|
38
|
+
left: 20px;
|
|
39
|
+
padding: 10px;
|
|
40
|
+
border: var(--slice-border) solid var(--primary-color);
|
|
41
|
+
background-color: var(--primary-background-color);
|
|
42
|
+
z-index: 1000;
|
|
43
|
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
44
|
+
border-radius: 8px;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
#debugger-container.active {
|
|
48
|
+
display: block;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.slice_thead td {
|
|
52
|
+
font-weight: bold;
|
|
53
|
+
background-color: var(--primary-color);
|
|
54
|
+
color: var(--primary-color-contrast);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
#close-debugger {
|
|
58
|
+
cursor: pointer;
|
|
59
|
+
position: absolute;
|
|
60
|
+
top: 10px;
|
|
61
|
+
right: 10px;
|
|
62
|
+
font-size: 14px;
|
|
63
|
+
color: var(--danger-color);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
h3 {
|
|
67
|
+
color: var(--primary-color);
|
|
68
|
+
margin-bottom: 10px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
#component-details {
|
|
72
|
+
color: var(--font-primary-color);
|
|
73
|
+
}
|
|
74
|
+
.component-details-table {
|
|
75
|
+
overflow: scroll;
|
|
76
|
+
input {
|
|
77
|
+
outline: none;
|
|
78
|
+
border-bottom: 1px solid var(--tertiary-background-color);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
.component-details-table::-webkit-scrollbar {
|
|
82
|
+
width: 5px;
|
|
83
|
+
height: 5px;
|
|
84
|
+
}
|
|
85
|
+
.component-details-table::-webkit-scrollbar-thumb {
|
|
86
|
+
background: var(--secondary-color);
|
|
87
|
+
border-radius: var(--border-radius-slice);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
#component-details table {
|
|
91
|
+
width: 100%;
|
|
92
|
+
border-collapse: collapse;
|
|
93
|
+
margin-top: 10px;
|
|
94
|
+
/* border: 1px solid var(--primary-color); */
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.debugger-header {
|
|
98
|
+
border-bottom: 1px solid var(--primary-color);
|
|
99
|
+
user-select: none;
|
|
100
|
+
cursor: grab;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.debugger-header:active {
|
|
104
|
+
cursor: grabbing;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
#component-details th,
|
|
108
|
+
#component-details td {
|
|
109
|
+
padding: 10px;
|
|
110
|
+
text-align: left;
|
|
111
|
+
border-bottom: 1px solid var(--primary-color);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
input {
|
|
115
|
+
border: 0px;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.slice_component-details td,
|
|
119
|
+
input {
|
|
120
|
+
background-color: var(--secondary-background-color);
|
|
121
|
+
color: var(--font-primary-color);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* Estilo para las filas impares, solo para mejorar la legibilidad */
|
|
125
|
+
#component-details tr:nth-child(odd) {
|
|
126
|
+
background-color: #f9f9f9;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
`
|
|
130
|
+
|
|
15
131
|
slice.stylesManager.registerComponentStyles('Debugger', css);
|
|
16
|
-
|
|
132
|
+
|
|
17
133
|
this.debuggerContainer = this.querySelector('#debugger-container');
|
|
18
134
|
this.closeDebugger = this.querySelector('#close-debugger');
|
|
19
135
|
this.componentDetails = this.querySelector('#component-details');
|
package/package.json
CHANGED