@pb33f/cowboy-components 0.1.13 → 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.
Files changed (16) hide show
  1. package/dist/components/percent-bar/percent-bar.js +2 -2
  2. package/dist/components/problem-list/problem-item.css.js +9 -0
  3. package/dist/components/problem-list/problem-item.d.ts +1 -1
  4. package/dist/components/problem-list/problem-item.js +5 -3
  5. package/dist/components/problem-list/problem-mainview.css.js +16 -2
  6. package/dist/components/problem-list/problem-mainview.d.ts +2 -2
  7. package/dist/components/problem-list/problem-mainview.js +9 -6
  8. package/dist/components/problems-overview/diagnostic-evaluation.css.js +11 -2
  9. package/dist/components/problems-overview/problem-overview-group.css.js +27 -2
  10. package/dist/components/problems-overview/problem-overview-group.js +5 -4
  11. package/dist/components/problems-overview/problem-statistics.css.js +24 -1
  12. package/dist/components/problems-overview/problem-statistics.js +11 -11
  13. package/dist/components/render-json-path/render-json-path.js +2 -2
  14. package/dist/components/the-doctor/the-doctor.css.js +1 -1
  15. package/dist/cowboy-components.umd.cjs +154 -70
  16. package/package.json +1 -1
package/dist/components/percent-bar/percent-bar.js CHANGED
@@ -39,8 +39,8 @@ let PercentBar = class PercentBar extends LitElement {
39
39
  }
40
40
  return html `
41
41
  <div class="bar">
42
- <svg xmlns="http://www.w3.org/2000/svg" style="height: ${this.height}" class="${clazz}">
43
- ${nodes.map((node) => {
42
+ <svg xmlns="http://www.w3.org/2000/svg" style="height: ${this.height}px" class="${clazz}">
43
+ ${nodes.map((node) => {
44
44
  count++;
45
45
  let width = 1.5;
46
46
  if (count == 50) {
package/dist/components/problem-list/problem-item.css.js CHANGED
@@ -165,6 +165,15 @@ export default css `
165
165
  border: none;
166
166
  color: var(--background-color);
167
167
  }
168
+
169
+ @media only screen and (max-width: 1100px) {
170
+ .icon {
171
+ display: none;
172
+ }
173
+ .location {
174
+ display: none;
175
+ }
176
+ }
168
177
 
169
178
 
170
179
  `;
package/dist/components/problem-list/problem-item.d.ts CHANGED
@@ -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;
package/dist/components/problem-list/problem-item.js CHANGED
@@ -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}&nbsp;
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
  }
package/dist/components/problem-list/problem-mainview.css.js CHANGED
@@ -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
- pb33f-render-json-path {
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 {
package/dist/components/problem-list/problem-mainview.d.ts CHANGED
@@ -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>;
package/dist/components/problem-list/problem-mainview.js CHANGED
@@ -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: this.problems[0].problemObject.source
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: this.problems[0].problemObject.source
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
  }
package/dist/components/problems-overview/diagnostic-evaluation.css.js CHANGED
@@ -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
  `;
package/dist/components/problems-overview/problem-overview-group.css.js CHANGED
@@ -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
  `;
package/dist/components/problems-overview/problem-overview-group.js CHANGED
@@ -52,14 +52,14 @@ 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
- <pb33f-percent-bar value="${this.violationPercent}" error></pb33f-percent-bar>`;
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
- <pb33f-percent-bar value="${this.violationPercent}" warning></pb33f-percent-bar>`;
62
+ <pb33f-percent-bar value="${this.violationPercent}"></pb33f-percent-bar>`;
63
63
  }
64
64
  if (!this.groupName || this.groupName === '') {
65
65
  this.groupName = 'invalid OpenAPI specification';
@@ -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} &gt;</sl-button>
91
+ <a href="#" @click="${this.selectRule}">View ${this.totalViolations} violations &gt;</a>
91
92
  </div>
92
93
  </div>`;
93
94
  }
package/dist/components/problems-overview/problem-statistics.css.js CHANGED
@@ -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
  `;
package/dist/components/problems-overview/problem-statistics.js CHANGED
@@ -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>
package/dist/components/render-json-path/render-json-path.js CHANGED
@@ -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.-_$:]+)(})|(:)([\w.-_$:]+)/g;
12
- const pathRegex = /(\[)(["']?)([\w${}:./\\]+)(['"]?)(])/g;
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();
package/dist/components/the-doctor/the-doctor.css.js CHANGED
@@ -24,7 +24,7 @@ export default css `
24
24
  position: relative;
25
25
  display: block;
26
26
  margin-left: 10px;
27
- overflow-y: hidden;
27
+ overflow: hidden;
28
28
  width: 100%;
29
29
  height: min-content;
30
30
  }