@pb33f/cowboy-components 0.0.7 → 0.0.8
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/attention-box/attention-box.css.js +13 -0
- package/dist/components/attention-box/attention-box.js +7 -3
- package/dist/components/changelog/changelog.js +1 -3
- package/dist/components/changelog/release.css.js +2 -2
- package/dist/components/http-method/http-method.js +1 -1
- package/dist/components/kv-view/kv-view.d.ts +0 -1
- package/dist/components/kv-view/kv-view.js +6 -2
- package/dist/components/render-operation-path/render-operation-path.css.d.ts +2 -0
- package/dist/components/render-operation-path/render-operation-path.css.js +25 -0
- package/dist/components/render-operation-path/render-operation-path.d.ts +7 -0
- package/dist/components/render-operation-path/render-operation-path.js +51 -0
- package/dist/cowboy-components.d.ts +12 -12
- package/dist/cowboy-components.js +12 -12
- package/dist/cowboy-components.umd.cjs +182 -42
- package/dist/css/cowboy-components.css +393 -0
- package/dist/css/pb33f-theme.css +195 -0
- package/dist/css/syntax.css.d.ts +2 -0
- package/dist/css/syntax.css.js +129 -0
- package/dist/style.css +1 -1
- package/package.json +7 -7
|
@@ -1,6 +1,19 @@
|
|
|
1
1
|
import { css } from "lit";
|
|
2
2
|
export default css `
|
|
3
|
+
|
|
4
|
+
sl-alert::part(message) {
|
|
5
|
+
padding-bottom: var(--global-padding);
|
|
6
|
+
color: var(--font-color-sub1);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
sl-alert.error::part(message) {
|
|
10
|
+
color: var(--error-font-color);
|
|
11
|
+
}
|
|
3
12
|
|
|
13
|
+
sl-alert.warning::part(message) {
|
|
14
|
+
color: var(--warn-300);
|
|
15
|
+
}
|
|
16
|
+
|
|
4
17
|
.attention {
|
|
5
18
|
margin-top: var(--global-space);
|
|
6
19
|
margin-bottom: var(--global-space);
|
|
@@ -6,8 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
6
6
|
};
|
|
7
7
|
import { LitElement, html } from 'lit';
|
|
8
8
|
import { customElement, property } from 'lit/decorators.js';
|
|
9
|
-
import attentionBoxCss from "./attention-box.css";
|
|
10
|
-
import alertsCss from "../../css/alerts.css";
|
|
9
|
+
import attentionBoxCss from "./attention-box.css.js";
|
|
10
|
+
import alertsCss from "../../css/alerts.css.js";
|
|
11
11
|
export var AttentionType;
|
|
12
12
|
(function (AttentionType) {
|
|
13
13
|
AttentionType["Context"] = "context";
|
|
@@ -41,11 +41,15 @@ let AttentionBox = class AttentionBox extends LitElement {
|
|
|
41
41
|
if (this.type === AttentionType.Danger) {
|
|
42
42
|
this.type = AttentionType.Error;
|
|
43
43
|
}
|
|
44
|
+
let header = html ``;
|
|
45
|
+
if (this.headerText != '') {
|
|
46
|
+
header = html `<strong>${this.headerText}</strong>`;
|
|
47
|
+
}
|
|
44
48
|
return html `
|
|
45
49
|
<div class='attention ${this.type}'>
|
|
46
50
|
<sl-alert class="${this.type}" open>
|
|
47
51
|
<sl-icon slot="icon" name="${this.getIcon()}"></sl-icon>
|
|
48
|
-
|
|
52
|
+
${header}
|
|
49
53
|
<slot></slot>
|
|
50
54
|
</sl-alert>
|
|
51
55
|
</div>
|
|
@@ -61,10 +61,8 @@ let ChangelogComponent = class ChangelogComponent extends LitElement {
|
|
|
61
61
|
if (i == 0) {
|
|
62
62
|
latest = true;
|
|
63
63
|
}
|
|
64
|
-
console.log(Date.parse(summary.published_at));
|
|
65
|
-
console.log(new Date(summary.published_at));
|
|
66
64
|
items.push(html `
|
|
67
|
-
<pb33f-timeline-item>
|
|
65
|
+
<pb33f-timeline-item id="release_${summary.name}">
|
|
68
66
|
<span slot="icon">${icon}</span>
|
|
69
67
|
<span slot="time" class="${milestone ? `major` : null}">${summary.publish_date}</span>
|
|
70
68
|
<div slot="content">
|
|
@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
6
6
|
};
|
|
7
7
|
import { customElement, property } from "lit/decorators.js";
|
|
8
8
|
import { html, LitElement } from "lit";
|
|
9
|
-
import { ExchangeMethod } from "../../model/exchange_method";
|
|
9
|
+
import { ExchangeMethod } from "../../model/exchange_method.js";
|
|
10
10
|
import httpMethodCss from "./http-method.css.js";
|
|
11
11
|
let HttpMethodComponent = class HttpMethodComponent extends LitElement {
|
|
12
12
|
constructor() {
|
|
@@ -10,17 +10,21 @@ import { LitElement } from "lit";
|
|
|
10
10
|
import { html } from "lit";
|
|
11
11
|
import kvViewComponentCss from "./kv-view.css.js";
|
|
12
12
|
import Prism from 'prismjs';
|
|
13
|
+
Prism.manual = true;
|
|
13
14
|
import 'prismjs/components/prism-json.js';
|
|
14
|
-
import 'prismjs/themes/prism-okaidia.css';
|
|
15
15
|
import { unsafeHTML } from "lit/directives/unsafe-html.js";
|
|
16
16
|
import prismCss from "../../css/prism.css.js";
|
|
17
17
|
import sharedCss from "../../css/shared.css.js";
|
|
18
|
+
import syntaxCss from "../../css/syntax.css.js";
|
|
19
|
+
// @ts-ignore
|
|
20
|
+
document.removeEventListener('DOMContentLoaded', Prism.highlightAll);
|
|
18
21
|
let KVViewComponent = class KVViewComponent extends LitElement {
|
|
19
22
|
constructor() {
|
|
20
23
|
super();
|
|
21
24
|
this._data = new Map();
|
|
22
25
|
this.keyLabel = 'Key';
|
|
23
26
|
this.valueLabel = 'Value';
|
|
27
|
+
// tslint:disable
|
|
24
28
|
}
|
|
25
29
|
set data(value) {
|
|
26
30
|
if (value && value.size > 0) {
|
|
@@ -82,7 +86,7 @@ let KVViewComponent = class KVViewComponent extends LitElement {
|
|
|
82
86
|
return html `${output}`;
|
|
83
87
|
}
|
|
84
88
|
};
|
|
85
|
-
KVViewComponent.styles = [prismCss, sharedCss, kvViewComponentCss];
|
|
89
|
+
KVViewComponent.styles = [prismCss, sharedCss, syntaxCss, kvViewComponentCss];
|
|
86
90
|
__decorate([
|
|
87
91
|
property()
|
|
88
92
|
], KVViewComponent.prototype, "keyLabel", void 0);
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { css } from "lit";
|
|
2
|
+
export default css `
|
|
3
|
+
:host {
|
|
4
|
+
color: var(--font-color);
|
|
5
|
+
font-family: var(--font-stack), monospace;
|
|
6
|
+
font-size: 0.9rem;
|
|
7
|
+
}
|
|
8
|
+
.bracket {
|
|
9
|
+
color: var(--secondary-color);
|
|
10
|
+
font-weight: bold;
|
|
11
|
+
font-family: var(--font-stack), monospace;
|
|
12
|
+
text-shadow: 0 0 10px var(--secondary-color);
|
|
13
|
+
}
|
|
14
|
+
.param {
|
|
15
|
+
color: var(--primary-color);
|
|
16
|
+
font-family: var(--font-stack), monospace;
|
|
17
|
+
text-shadow: 0 0 10px var(--primary-color);
|
|
18
|
+
font-weight: bold;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.param:hover {
|
|
22
|
+
//text-decoration: underline;
|
|
23
|
+
//cursor: pointer;
|
|
24
|
+
}
|
|
25
|
+
`;
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { LitElement, html } from 'lit';
|
|
8
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
9
|
+
import { unsafeHTML } from "lit/directives/unsafe-html.js";
|
|
10
|
+
import renderOperationPathCss from "./render-operation-path.css.js";
|
|
11
|
+
let PathRenderComponent = class PathRenderComponent extends LitElement {
|
|
12
|
+
constructor() {
|
|
13
|
+
super(...arguments);
|
|
14
|
+
this.path = "/";
|
|
15
|
+
}
|
|
16
|
+
replaceBrackets() {
|
|
17
|
+
const regex = /(\{)([\w]+)(\})/gm;
|
|
18
|
+
let m;
|
|
19
|
+
let returnString = this.path;
|
|
20
|
+
while ((m = regex.exec(this.path)) !== null) {
|
|
21
|
+
// This is necessary to avoid infinite loops with zero-width matches
|
|
22
|
+
if (m.index === regex.lastIndex) {
|
|
23
|
+
regex.lastIndex++;
|
|
24
|
+
}
|
|
25
|
+
// The result can be accessed through the `m`-variable.
|
|
26
|
+
m.forEach((match, groupIndex) => {
|
|
27
|
+
if (groupIndex === 1) {
|
|
28
|
+
returnString = returnString.replaceAll(match, '<span class="bracket">' + match + '</span>');
|
|
29
|
+
}
|
|
30
|
+
if (groupIndex === 2) {
|
|
31
|
+
returnString = returnString.replaceAll(match, '<span class="param">' + match + '</span>');
|
|
32
|
+
}
|
|
33
|
+
if (groupIndex === 3) {
|
|
34
|
+
returnString = returnString.replaceAll(match, '<span class="bracket">' + match + '</span>');
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
return html `${unsafeHTML(returnString)}`;
|
|
39
|
+
}
|
|
40
|
+
render() {
|
|
41
|
+
return html `${this.replaceBrackets()}`;
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
PathRenderComponent.styles = renderOperationPathCss;
|
|
45
|
+
__decorate([
|
|
46
|
+
property()
|
|
47
|
+
], PathRenderComponent.prototype, "path", void 0);
|
|
48
|
+
PathRenderComponent = __decorate([
|
|
49
|
+
customElement('path-render')
|
|
50
|
+
], PathRenderComponent);
|
|
51
|
+
export { PathRenderComponent };
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import './css/cowboy-components.css';
|
|
2
2
|
import './css/pb33f-theme.css';
|
|
3
|
-
import './components/terminal/terminal-example.
|
|
4
|
-
import './components/theme-switcher/theme-switcher.
|
|
5
|
-
import './components/header/header.
|
|
6
|
-
import './components/kv-view/kv-view.
|
|
7
|
-
import './components/http-property-view/http-property-view.
|
|
8
|
-
import './components/timeline/timeline.
|
|
9
|
-
import './components/timeline/timeline-item.
|
|
10
|
-
import './components/http-method/http-method.
|
|
11
|
-
import './components/mailing-list/mailing-list.
|
|
12
|
-
import './components/changelog/changelog.
|
|
13
|
-
import './components/changelog/release.
|
|
14
|
-
import './components/attention-box/attention-box.
|
|
3
|
+
import './components/terminal/terminal-example.js';
|
|
4
|
+
import './components/theme-switcher/theme-switcher.js';
|
|
5
|
+
import './components/header/header.js';
|
|
6
|
+
import './components/kv-view/kv-view.js';
|
|
7
|
+
import './components/http-property-view/http-property-view.js';
|
|
8
|
+
import './components/timeline/timeline.js';
|
|
9
|
+
import './components/timeline/timeline-item.js';
|
|
10
|
+
import './components/http-method/http-method.js';
|
|
11
|
+
import './components/mailing-list/mailing-list.js';
|
|
12
|
+
import './components/changelog/changelog.js';
|
|
13
|
+
import './components/changelog/release.js';
|
|
14
|
+
import './components/attention-box/attention-box.js';
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import './css/cowboy-components.css';
|
|
2
2
|
import './css/pb33f-theme.css';
|
|
3
|
-
import './components/terminal/terminal-example.
|
|
4
|
-
import './components/theme-switcher/theme-switcher.
|
|
5
|
-
import './components/header/header.
|
|
6
|
-
import './components/kv-view/kv-view.
|
|
7
|
-
import './components/http-property-view/http-property-view.
|
|
8
|
-
import './components/timeline/timeline.
|
|
9
|
-
import './components/timeline/timeline-item.
|
|
10
|
-
import './components/http-method/http-method.
|
|
11
|
-
import './components/mailing-list/mailing-list.
|
|
12
|
-
import './components/changelog/changelog.
|
|
13
|
-
import './components/changelog/release.
|
|
14
|
-
import './components/attention-box/attention-box.
|
|
3
|
+
import './components/terminal/terminal-example.js';
|
|
4
|
+
import './components/theme-switcher/theme-switcher.js';
|
|
5
|
+
import './components/header/header.js';
|
|
6
|
+
import './components/kv-view/kv-view.js';
|
|
7
|
+
import './components/http-property-view/http-property-view.js';
|
|
8
|
+
import './components/timeline/timeline.js';
|
|
9
|
+
import './components/timeline/timeline-item.js';
|
|
10
|
+
import './components/http-method/http-method.js';
|
|
11
|
+
import './components/mailing-list/mailing-list.js';
|
|
12
|
+
import './components/changelog/changelog.js';
|
|
13
|
+
import './components/changelog/release.js';
|
|
14
|
+
import './components/attention-box/attention-box.js';
|
|
15
15
|
// Set the base path to the folder you copied Shoelace's assets to
|
|
16
16
|
import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
|
|
17
17
|
setBasePath('/shoelace');
|