@pb33f/cowboy-components 0.1.14 → 0.1.15
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.
- package/dist/components/percent-bar/percent-bar.js +1 -1
- package/dist/components/problem-list/problem-item.css.js +9 -0
- package/dist/components/problem-list/problem-item.d.ts +1 -1
- package/dist/components/problem-list/problem-item.js +5 -3
- package/dist/components/problem-list/problem-mainview.css.js +16 -2
- package/dist/components/problem-list/problem-mainview.d.ts +2 -2
- package/dist/components/problem-list/problem-mainview.js +9 -6
- package/dist/components/problems-overview/diagnostic-evaluation.css.js +11 -2
- package/dist/components/problems-overview/problem-overview-group.css.js +27 -2
- package/dist/components/problems-overview/problem-overview-group.js +3 -2
- package/dist/components/problems-overview/problem-statistics.css.js +24 -1
- package/dist/components/problems-overview/problem-statistics.js +11 -11
- package/dist/components/render-json-path/render-json-path.js +2 -2
- package/dist/components/the-doctor/the-doctor.css.js +1 -1
- package/dist/cowboy-components.umd.cjs +152 -68
- package/package.json +1 -1
|
@@ -40,7 +40,7 @@ let PercentBar = class PercentBar extends LitElement {
|
|
|
40
40
|
return html `
|
|
41
41
|
<div class="bar">
|
|
42
42
|
<svg xmlns="http://www.w3.org/2000/svg" style="height: ${this.height}px" class="${clazz}">
|
|
43
|
-
|
|
43
|
+
${nodes.map((node) => {
|
|
44
44
|
count++;
|
|
45
45
|
let width = 1.5;
|
|
46
46
|
if (count == 50) {
|
|
@@ -18,7 +18,7 @@ export declare class ProblemItem extends LitElement {
|
|
|
18
18
|
parent: ProblemList;
|
|
19
19
|
resultIndex: number;
|
|
20
20
|
constructor();
|
|
21
|
-
renderMessage(sl: boolean): TemplateResult;
|
|
21
|
+
renderMessage(sl: boolean, sls?: boolean): TemplateResult;
|
|
22
22
|
select(select: boolean, scroll?: boolean): void;
|
|
23
23
|
selectSibling(select: boolean, scroll?: boolean): void;
|
|
24
24
|
updated(): void;
|
|
@@ -20,13 +20,13 @@ let ProblemItem = class ProblemItem extends LitElement {
|
|
|
20
20
|
this.selectedSibling = false;
|
|
21
21
|
this.problemLabelView = ProblemLabelView.JSONPath;
|
|
22
22
|
}
|
|
23
|
-
renderMessage(sl) {
|
|
23
|
+
renderMessage(sl, sls = false) {
|
|
24
24
|
let render = html ``;
|
|
25
25
|
switch (this.problemLabelView) {
|
|
26
26
|
case ProblemLabelView.JSONPath:
|
|
27
27
|
render = html `
|
|
28
28
|
<pb33f-render-json-path path="${this.problem}"
|
|
29
|
-
.selected=${sl}
|
|
29
|
+
.selected=${sl && !sls}
|
|
30
30
|
class="${this.selectedSibling ? 'selectedPath' : ''}"></pb33f-render-json-path>`;
|
|
31
31
|
break;
|
|
32
32
|
case ProblemLabelView.RuleViolation:
|
|
@@ -72,6 +72,7 @@ let ProblemItem = class ProblemItem extends LitElement {
|
|
|
72
72
|
render() {
|
|
73
73
|
let selectedClass = "";
|
|
74
74
|
let sl = false;
|
|
75
|
+
let sls = false;
|
|
75
76
|
if (this.selected) {
|
|
76
77
|
selectedClass = "selected";
|
|
77
78
|
sl = true;
|
|
@@ -79,6 +80,7 @@ let ProblemItem = class ProblemItem extends LitElement {
|
|
|
79
80
|
if (this.selectedSibling) {
|
|
80
81
|
selectedClass = "selected-sibling";
|
|
81
82
|
sl = true;
|
|
83
|
+
sls = true;
|
|
82
84
|
}
|
|
83
85
|
return html `
|
|
84
86
|
<div @click="${this.selectedProblem}" class="problem ${selectedClass}">
|
|
@@ -89,7 +91,7 @@ let ProblemItem = class ProblemItem extends LitElement {
|
|
|
89
91
|
${this.line}:${this.column}
|
|
90
92
|
</div>
|
|
91
93
|
<div class="problem-message">
|
|
92
|
-
${this.renderMessage(sl)}
|
|
94
|
+
${this.renderMessage(sl, sls)}
|
|
93
95
|
</div>
|
|
94
96
|
</div>`;
|
|
95
97
|
}
|
|
@@ -24,6 +24,7 @@ export default css `
|
|
|
24
24
|
.main-view-carousel{
|
|
25
25
|
padding: 0;
|
|
26
26
|
width: 100%;
|
|
27
|
+
position: relative;
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
.problem {
|
|
@@ -59,8 +60,21 @@ export default css `
|
|
|
59
60
|
display: block;
|
|
60
61
|
}
|
|
61
62
|
|
|
62
|
-
|
|
63
|
-
|
|
63
|
+
.problem-count {
|
|
64
|
+
position: absolute;
|
|
65
|
+
right: 2px;
|
|
66
|
+
bottom: 5px;
|
|
67
|
+
font-size: 0.7rem;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.problem-count strong {
|
|
71
|
+
color: var(--secondary-color);
|
|
72
|
+
font-family: var(--font-stack-bold), monospace;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.problem-count em {
|
|
76
|
+
font-family: var(--font-stack-bold), monospace;
|
|
77
|
+
font-style: normal;
|
|
64
78
|
}
|
|
65
79
|
|
|
66
80
|
.carousel-message {
|
|
@@ -11,8 +11,8 @@ export declare class ProblemMainView extends LitElement {
|
|
|
11
11
|
selectedIndex: number;
|
|
12
12
|
private manualChange;
|
|
13
13
|
constructor();
|
|
14
|
-
showRuleDocs(): void;
|
|
15
|
-
howToFix(): void;
|
|
14
|
+
showRuleDocs(source: string): void;
|
|
15
|
+
howToFix(source: string): void;
|
|
16
16
|
slideChanged(event: CustomEvent): void;
|
|
17
17
|
selectSlide(index: number): void;
|
|
18
18
|
render(): TemplateResult<1>;
|
|
@@ -22,23 +22,23 @@ let ProblemMainView = class ProblemMainView extends LitElement {
|
|
|
22
22
|
this.selectedIndex = 0;
|
|
23
23
|
this.manualChange = false;
|
|
24
24
|
}
|
|
25
|
-
showRuleDocs() {
|
|
25
|
+
showRuleDocs(source) {
|
|
26
26
|
this.dispatchEvent(new CustomEvent(OpenProblemDrawer, {
|
|
27
27
|
bubbles: true,
|
|
28
28
|
composed: true,
|
|
29
29
|
detail: {
|
|
30
30
|
type: ProblemDrawerEventType.RULE_DOCS,
|
|
31
|
-
rule:
|
|
31
|
+
rule: source
|
|
32
32
|
}
|
|
33
33
|
}));
|
|
34
34
|
}
|
|
35
|
-
howToFix() {
|
|
35
|
+
howToFix(source) {
|
|
36
36
|
this.dispatchEvent(new CustomEvent(OpenProblemDrawer, {
|
|
37
37
|
bubbles: true,
|
|
38
38
|
composed: true,
|
|
39
39
|
detail: {
|
|
40
40
|
type: ProblemDrawerEventType.HOW_TO_FIX,
|
|
41
|
-
rule:
|
|
41
|
+
rule: source
|
|
42
42
|
}
|
|
43
43
|
}));
|
|
44
44
|
}
|
|
@@ -74,6 +74,9 @@ let ProblemMainView = class ProblemMainView extends LitElement {
|
|
|
74
74
|
<sl-carousel-item>
|
|
75
75
|
<div class="main-view-carousel">
|
|
76
76
|
${this.renderProblem(problemItem.problemObject)}
|
|
77
|
+
<div class="problem-count">Problem
|
|
78
|
+
<strong>${problemItem.idx}</strong> of
|
|
79
|
+
<em>${this.problems.length}</em></div>
|
|
77
80
|
</div>
|
|
78
81
|
</sl-carousel-item>
|
|
79
82
|
`;
|
|
@@ -106,8 +109,8 @@ let ProblemMainView = class ProblemMainView extends LitElement {
|
|
|
106
109
|
</div>
|
|
107
110
|
</div>
|
|
108
111
|
<div class="source">
|
|
109
|
-
<div>Rule: <a @click="${this.showRuleDocs}" href="#">${problem.source}</a></div>
|
|
110
|
-
<sl-icon-button @click=${this.howToFix} name="question-square" class="button-icon">
|
|
112
|
+
<div>Rule: <a @click="${() => { this.showRuleDocs(problem.source); }}" href="#" data-name="${problem.source}">${problem.source}</a></div>
|
|
113
|
+
<sl-icon-button @click=${() => { this.howToFix(problem.source); }} name="question-square" class="button-icon">
|
|
111
114
|
</sl-icon-button>
|
|
112
115
|
</div>`;
|
|
113
116
|
}
|
|
@@ -171,8 +171,17 @@ export default css `
|
|
|
171
171
|
text-shadow: 0 0 1rem var(--warn-400);
|
|
172
172
|
}
|
|
173
173
|
}
|
|
174
|
-
|
|
175
|
-
|
|
174
|
+
|
|
175
|
+
@media only screen and (max-width: 1100px) {
|
|
176
|
+
.score {
|
|
177
|
+
width: 50px;
|
|
178
|
+
height: 50px;
|
|
179
|
+
line-height: 50px;
|
|
180
|
+
}
|
|
181
|
+
.score span {
|
|
182
|
+
font-size: 1.1rem;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
176
185
|
|
|
177
186
|
|
|
178
187
|
`;
|
|
@@ -78,7 +78,32 @@ export default css `
|
|
|
78
78
|
margin-top: 10px;
|
|
79
79
|
min-width: 100px;
|
|
80
80
|
}
|
|
81
|
-
|
|
82
|
-
|
|
81
|
+
.action-buttons a {
|
|
82
|
+
display: none;
|
|
83
|
+
font-size: 0.7rem;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
@media only screen and (max-width: 1100px) {
|
|
88
|
+
.group-rank {
|
|
89
|
+
display: none;
|
|
90
|
+
}
|
|
91
|
+
.violations {
|
|
92
|
+
display: none;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.action-buttons sl-button {
|
|
96
|
+
display: none;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.action-buttons a {
|
|
100
|
+
display: inline-block;
|
|
101
|
+
margin-left: 10px;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.problem-overview-group {
|
|
105
|
+
flex-direction: column;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
83
108
|
|
|
84
109
|
`;
|
|
@@ -52,12 +52,12 @@ let ProblemOverviewGroup = class ProblemOverviewGroup extends LitElement {
|
|
|
52
52
|
<pb33f-percent-bar value="${this.violationPercent}"></pb33f-percent-bar>`;
|
|
53
53
|
let clazz = "";
|
|
54
54
|
if (this.rank == 1) {
|
|
55
|
-
clazz = "error";
|
|
55
|
+
//clazz = "error";
|
|
56
56
|
pc = html `
|
|
57
57
|
<pb33f-percent-bar value="${this.violationPercent}"></pb33f-percent-bar>`;
|
|
58
58
|
}
|
|
59
59
|
if (this.rank == 2) {
|
|
60
|
-
clazz = "warn";
|
|
60
|
+
//clazz = "warn";
|
|
61
61
|
pc = html `
|
|
62
62
|
<pb33f-percent-bar value="${this.violationPercent}"></pb33f-percent-bar>`;
|
|
63
63
|
}
|
|
@@ -88,6 +88,7 @@ let ProblemOverviewGroup = class ProblemOverviewGroup extends LitElement {
|
|
|
88
88
|
</div>
|
|
89
89
|
<div class="action-buttons">
|
|
90
90
|
<sl-button @click="${this.selectRule}">${this.totalViolations} ></sl-button>
|
|
91
|
+
<a href="#" @click="${this.selectRule}">View ${this.totalViolations} violations ></a>
|
|
91
92
|
</div>
|
|
92
93
|
</div>`;
|
|
93
94
|
}
|
|
@@ -40,7 +40,30 @@ export default css `
|
|
|
40
40
|
.statistics sl-card:first-child {
|
|
41
41
|
margin-left: 0;
|
|
42
42
|
}
|
|
43
|
+
|
|
44
|
+
@media only screen and (max-width: 1100px) {
|
|
45
|
+
.total {
|
|
46
|
+
display: none;
|
|
47
|
+
}
|
|
48
|
+
.rules {
|
|
49
|
+
display: none;
|
|
50
|
+
}
|
|
51
|
+
.categories {
|
|
52
|
+
display: none;
|
|
53
|
+
}
|
|
54
|
+
.tags {
|
|
55
|
+
display: none;
|
|
56
|
+
}
|
|
57
|
+
.enums {
|
|
58
|
+
display: none;
|
|
59
|
+
}
|
|
60
|
+
.parameters {
|
|
61
|
+
display: none;
|
|
62
|
+
}
|
|
63
|
+
.refs {
|
|
64
|
+
display: none;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
43
67
|
|
|
44
|
-
|
|
45
68
|
|
|
46
69
|
`;
|
|
@@ -29,47 +29,47 @@ let ProblemStatisticsComponent = class ProblemStatisticsComponent extends LitEle
|
|
|
29
29
|
}
|
|
30
30
|
return html `
|
|
31
31
|
<div class="statistics">
|
|
32
|
-
<sl-card class="card-small">
|
|
32
|
+
<sl-card class="card-small size">
|
|
33
33
|
<pb33f-document-statistic label="Size"
|
|
34
34
|
postFix="kb"
|
|
35
35
|
value="${this.drDiagnostics?.statistics.filesizeKb}">
|
|
36
36
|
</pb33f-document-statistic>
|
|
37
37
|
</sl-card>
|
|
38
38
|
|
|
39
|
-
<sl-card class="card-small">
|
|
39
|
+
<sl-card class="card-small version">
|
|
40
40
|
<pb33f-document-statistic label="Version"
|
|
41
41
|
value="${this.drDiagnostics?.statistics.version}">
|
|
42
42
|
</pb33f-document-statistic>
|
|
43
43
|
</sl-card>
|
|
44
44
|
|
|
45
|
-
<sl-card class="card-small">
|
|
45
|
+
<sl-card class="card-small" schemas>
|
|
46
46
|
<pb33f-document-statistic label="Schemas"
|
|
47
47
|
value="${this.drDiagnostics?.statistics.schemas}">
|
|
48
48
|
</pb33f-document-statistic>
|
|
49
49
|
</sl-card>
|
|
50
50
|
|
|
51
|
-
<sl-card class="card-small">
|
|
51
|
+
<sl-card class="card-small parameters">
|
|
52
52
|
<pb33f-document-statistic label="Parameters"
|
|
53
53
|
value="${this.drDiagnostics?.statistics.parameters}">
|
|
54
54
|
</pb33f-document-statistic>
|
|
55
55
|
</sl-card>
|
|
56
56
|
|
|
57
|
-
<sl-card class="card-small">
|
|
57
|
+
<sl-card class="card-small operations">
|
|
58
58
|
<pb33f-document-statistic label="Operations"
|
|
59
59
|
value="${this.drDiagnostics?.statistics.operations}">
|
|
60
60
|
</pb33f-document-statistic>
|
|
61
61
|
</sl-card>
|
|
62
|
-
<sl-card class="card-small">
|
|
62
|
+
<sl-card class="card-small refs">
|
|
63
63
|
<pb33f-document-statistic label="Refs"
|
|
64
64
|
value="${this.drDiagnostics?.statistics.references}">
|
|
65
65
|
</pb33f-document-statistic>
|
|
66
66
|
</sl-card>
|
|
67
|
-
<sl-card class="card-small">
|
|
67
|
+
<sl-card class="card-small enums">
|
|
68
68
|
<pb33f-document-statistic label="Enums"
|
|
69
69
|
value="${this.drDiagnostics?.statistics.enums}">
|
|
70
70
|
</pb33f-document-statistic>
|
|
71
71
|
</sl-card>
|
|
72
|
-
<sl-card class="card-small">
|
|
72
|
+
<sl-card class="card-small tags">
|
|
73
73
|
<pb33f-document-statistic label="Tags"
|
|
74
74
|
value="${this.drDiagnostics?.statistics.tags}">
|
|
75
75
|
</pb33f-document-statistic>
|
|
@@ -77,17 +77,17 @@ let ProblemStatisticsComponent = class ProblemStatisticsComponent extends LitEle
|
|
|
77
77
|
</div>
|
|
78
78
|
<h3>Violation Statistics</h3>
|
|
79
79
|
<div class="statistics">
|
|
80
|
-
<sl-card class="card-basic">
|
|
80
|
+
<sl-card class="card-basic total">
|
|
81
81
|
<pb33f-problem-statistic label="Total"
|
|
82
82
|
value="${totalViolations}">
|
|
83
83
|
</pb33f-problem-statistic>
|
|
84
84
|
</sl-card>
|
|
85
|
-
<sl-card class="card-basic">
|
|
85
|
+
<sl-card class="card-basic rules">
|
|
86
86
|
<pb33f-problem-statistic label="Rules"
|
|
87
87
|
value="${rulesViolated}">
|
|
88
88
|
</pb33f-problem-statistic>
|
|
89
89
|
</sl-card>
|
|
90
|
-
<sl-card class="card-basic">
|
|
90
|
+
<sl-card class="card-basic categories">
|
|
91
91
|
<pb33f-problem-statistic label="Categories"
|
|
92
92
|
value="${categoriesViolated}">
|
|
93
93
|
</pb33f-problem-statistic>
|
|
@@ -8,8 +8,8 @@ import { LitElement, html } from 'lit';
|
|
|
8
8
|
import { customElement, property } from 'lit/decorators.js';
|
|
9
9
|
import { unsafeHTML } from "lit/directives/unsafe-html.js";
|
|
10
10
|
import renderJsonPathCss from "./render-json-path.css.js";
|
|
11
|
-
const bracketRegex = /(\{)([\w
|
|
12
|
-
const pathRegex = /(\[)(["']?)([\w${}
|
|
11
|
+
const bracketRegex = /(\{)([\w.\-_$:]+)(})|(:)([\w.\-_$:]+)/g;
|
|
12
|
+
const pathRegex = /(\[)(["']?)([\w${}:.\-_/\\]+)(['"]?)(])/g;
|
|
13
13
|
let RenderJSONPathComponent = class RenderJSONPathComponent extends LitElement {
|
|
14
14
|
constructor() {
|
|
15
15
|
super();
|