@c2n/code-viewer 0.0.6 → 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/code-viewer.js +19 -8
- package/package.json +18 -6
- package/react.d.ts +24 -0
- package/react.js +3 -0
- package/types/src/code-viewer.d.ts +18 -1
- package/types/src/code-viewer.d.ts.map +1 -1
- package/vue.d.ts +38 -0
- package/vue.js +3 -0
package/dist/code-viewer.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { LitElement, html, nothing, unsafeCSS } from "lit";
|
|
2
|
-
import {
|
|
2
|
+
import { property, state } from "lit/decorators.js";
|
|
3
|
+
import { customElement } from "@c2n/core/element-helper.js";
|
|
3
4
|
import { classMap } from "lit/directives/class-map.js";
|
|
4
5
|
import { unsafeHTML } from "lit/directives/unsafe-html.js";
|
|
5
6
|
import { Task } from "@lit/task";
|
|
@@ -8,7 +9,7 @@ import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
|
|
|
8
9
|
import { bundledLanguages } from "shiki/langs";
|
|
9
10
|
import { bundledThemes } from "shiki/themes";
|
|
10
11
|
//#region src/code-viewer.scss?inline
|
|
11
|
-
var code_viewer_default = "/* ex : var((width: 24px), width, c2-checkbox) returns var(--c2-checkbox-width, 24px) */\n:host {\n display: block;\n min-width: 0;\n}\n\n:host([inline]) {\n display: inline;\n}\n\n.c2-code-viewer {\n display: flex;\n flex-direction: column;\n min-width: 0;\n overflow: clip;\n position: relative;\n background: var(--c2-code-viewer--background,var(--cv-bg,var(--shiki-light-bg)));\n color: var(--c2-code-viewer--color,var(--cv-fg,var(--shiki-light)));\n box-shadow: var(--c2-code-viewer--box-shadow);\n border-top: var(--c2-code-viewer--border-top,1px solid rgb(213, 213, 213));\n border-right: var(--c2-code-viewer--border-right,1px solid rgb(213, 213, 213));\n border-bottom: var(--c2-code-viewer--border-bottom,1px solid rgb(213, 213, 213));\n border-left: var(--c2-code-viewer--border-left,1px solid rgb(213, 213, 213));\n border-top-left-radius: var(--c2-code-viewer--border-top-left-radius,8px);\n border-top-right-radius: var(--c2-code-viewer--border-top-right-radius,8px);\n border-bottom-left-radius: var(--c2-code-viewer--border-bottom-left-radius,8px);\n border-bottom-right-radius: var(--c2-code-viewer--border-bottom-right-radius,8px);\n font-family: var(--c2-code-viewer--font-family,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);\n font-size: var(--c2-code-viewer--font-size,13px);\n line-height: var(--c2-code-viewer--line-height,1.6);\n}\n\n.c2-code-viewer-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding-top: var(--c2-code-viewer__header--padding-top,6px);\n padding-right: var(--c2-code-viewer__header--padding-right,8px);\n padding-bottom: var(--c2-code-viewer__header--padding-bottom,6px);\n padding-left: var(--c2-code-viewer__header--padding-left,16px);\n background: var(--c2-code-viewer__header--background,rgba(127, 127, 127, 0.08));\n color: var(--c2-code-viewer__header--color);\n font-family: var(--c2-code-viewer__header--font-family,var(--c2-code-viewer--font-family,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace));\n font-size: var(--c2-code-viewer__header--font-size,12px);\n border-bottom: var(--c2-code-viewer__header--border-bottom,1px solid rgba(127, 127, 127, 0.2));\n}\n.c2-code-viewer-header slot[name=title] {\n display: block;\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.c2-code-viewer-header[hidden] {\n display: none;\n}\n\n.c2-code-viewer-body {\n position: relative;\n min-width: 0;\n max-height: var(--c2-code-viewer--max-height);\n overflow: auto;\n}\n.c2-code-viewer-body > .c2-code-viewer-copy {\n position: absolute;\n top: 8px;\n right: 8px;\n opacity: 0;\n transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.c2-code-viewer-body:hover > .c2-code-viewer-copy, .c2-code-viewer-body:focus-within > .c2-code-viewer-copy,\n.c2-code-viewer-body > .c2-code-viewer-copy.is-copied {\n opacity: 1;\n}\n\n.c2-code-viewer-copy {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n box-sizing: border-box;\n width: var(--c2-code-viewer__copy--size,28px);\n height: var(--c2-code-viewer__copy--size,28px);\n padding: 0;\n border: none;\n border-radius: var(--c2-code-viewer__copy--border-radius,6px);\n background: var(--c2-code-viewer__copy--background);\n color: var(--c2-code-viewer__copy--color);\n opacity: 0.7;\n cursor: pointer;\n transition: background 250ms cubic-bezier(0.2, 0, 0, 1), opacity 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.c2-code-viewer-copy svg,\n.c2-code-viewer-copy ::slotted(*) {\n width: var(--c2-code-viewer__copy--icon-size,14px);\n height: var(--c2-code-viewer__copy--icon-size,14px);\n}\n.c2-code-viewer-copy:hover {\n background: var(--c2-code-viewer__copy__hover--background,rgba(127, 127, 127, 0.15));\n opacity: 1;\n}\n.c2-code-viewer-copy:focus-visible {\n outline: 2px solid rgba(2, 101, 220, 0.4);\n outline-offset: 1px;\n opacity: 1;\n}\n.c2-code-viewer-copy.is-copied {\n color: var(--c2-code-viewer__copy__copied--color,rgb(34, 197, 94));\n opacity: 1;\n}\n\npre.shiki {\n margin: 0;\n box-sizing: border-box;\n min-width: 100%;\n width: max-content;\n background: transparent;\n color: inherit;\n font: inherit;\n tab-size: var(--c2-code-viewer--tab-size,2);\n padding-top: var(--c2-code-viewer--padding-top,12px);\n padding-right: var(--c2-code-viewer--padding-right,16px);\n padding-bottom: var(--c2-code-viewer--padding-bottom,12px);\n padding-left: var(--c2-code-viewer--padding-left,16px);\n}\npre.shiki code {\n display: block;\n font: inherit;\n}\npre.shiki .line {\n display: inline-block;\n width: 100%;\n box-sizing: border-box;\n min-height: 1lh;\n}\npre.shiki .line.highlighted {\n background: var(--c2-code-viewer__line__highlighted--background,rgba(99, 102, 241, 0.
|
|
12
|
+
var code_viewer_default = "/* ex : var((width: 24px), width, c2-checkbox) returns var(--c2-checkbox-width, 24px) */\n:host {\n display: block;\n min-width: 0;\n}\n\n:host([inline]) {\n display: inline;\n}\n\n.c2-code-viewer {\n display: flex;\n flex-direction: column;\n min-width: 0;\n overflow: clip;\n position: relative;\n background: var(--c2-code-viewer--background,var(--cv-bg,var(--shiki-light-bg)));\n color: var(--c2-code-viewer--color,var(--cv-fg,var(--shiki-light)));\n box-shadow: var(--c2-code-viewer--box-shadow);\n border-top: var(--c2-code-viewer--border-top,1px solid rgb(213, 213, 213));\n border-right: var(--c2-code-viewer--border-right,1px solid rgb(213, 213, 213));\n border-bottom: var(--c2-code-viewer--border-bottom,1px solid rgb(213, 213, 213));\n border-left: var(--c2-code-viewer--border-left,1px solid rgb(213, 213, 213));\n border-top-left-radius: var(--c2-code-viewer--border-top-left-radius,8px);\n border-top-right-radius: var(--c2-code-viewer--border-top-right-radius,8px);\n border-bottom-left-radius: var(--c2-code-viewer--border-bottom-left-radius,8px);\n border-bottom-right-radius: var(--c2-code-viewer--border-bottom-right-radius,8px);\n font-family: var(--c2-code-viewer--font-family,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);\n font-size: var(--c2-code-viewer--font-size,13px);\n line-height: var(--c2-code-viewer--line-height,1.6);\n}\n\n.c2-code-viewer-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding-top: var(--c2-code-viewer__header--padding-top,6px);\n padding-right: var(--c2-code-viewer__header--padding-right,8px);\n padding-bottom: var(--c2-code-viewer__header--padding-bottom,6px);\n padding-left: var(--c2-code-viewer__header--padding-left,16px);\n background: var(--c2-code-viewer__header--background,rgba(127, 127, 127, 0.08));\n color: var(--c2-code-viewer__header--color);\n font-family: var(--c2-code-viewer__header--font-family,var(--c2-code-viewer--font-family,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace));\n font-size: var(--c2-code-viewer__header--font-size,12px);\n border-bottom: var(--c2-code-viewer__header--border-bottom,1px solid rgba(127, 127, 127, 0.2));\n}\n.c2-code-viewer-header slot[name=title] {\n display: block;\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.c2-code-viewer-header[hidden] {\n display: none;\n}\n\n.terminal-dots {\n display: inline-flex;\n gap: 6px;\n}\n.terminal-dots i {\n width: 10px;\n height: 10px;\n border-radius: 999px;\n}\n.terminal-dots .close {\n background: var(--c2-code-viewer__terminal__dot__close--color,#ff5f57);\n}\n.terminal-dots .minimize {\n background: var(--c2-code-viewer__terminal__dot__minimize--color,#febc2e);\n}\n.terminal-dots .maximize {\n background: var(--c2-code-viewer__terminal__dot__maximize--color,#28c840);\n}\n\n.terminal-language {\n flex: 1;\n color: inherit;\n opacity: 0.7;\n}\n\n.c2-code-viewer-body {\n position: relative;\n min-width: 0;\n max-height: var(--c2-code-viewer--max-height);\n overflow: auto;\n}\n.c2-code-viewer-body > .c2-code-viewer-copy {\n position: absolute;\n top: 8px;\n right: 8px;\n opacity: 0;\n transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.c2-code-viewer-body:hover > .c2-code-viewer-copy, .c2-code-viewer-body:focus-within > .c2-code-viewer-copy,\n.c2-code-viewer-body > .c2-code-viewer-copy.is-copied {\n opacity: 1;\n}\n\n.c2-code-viewer-copy {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n box-sizing: border-box;\n width: var(--c2-code-viewer__copy--size,28px);\n height: var(--c2-code-viewer__copy--size,28px);\n padding: 0;\n border: none;\n border-radius: var(--c2-code-viewer__copy--border-radius,6px);\n background: var(--c2-code-viewer__copy--background);\n color: var(--c2-code-viewer__copy--color);\n opacity: 0.7;\n cursor: pointer;\n transition: background 250ms cubic-bezier(0.2, 0, 0, 1), opacity 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.c2-code-viewer-copy svg,\n.c2-code-viewer-copy ::slotted(*) {\n width: var(--c2-code-viewer__copy--icon-size,14px);\n height: var(--c2-code-viewer__copy--icon-size,14px);\n}\n.c2-code-viewer-copy:hover {\n background: var(--c2-code-viewer__copy__hover--background,rgba(127, 127, 127, 0.15));\n opacity: 1;\n}\n.c2-code-viewer-copy:focus-visible {\n outline: 2px solid rgba(2, 101, 220, 0.4);\n outline-offset: 1px;\n opacity: 1;\n}\n.c2-code-viewer-copy.is-copied {\n color: var(--c2-code-viewer__copy__copied--color,rgb(34, 197, 94));\n opacity: 1;\n}\n\npre.shiki {\n margin: 0;\n box-sizing: border-box;\n min-width: 100%;\n width: max-content;\n background: transparent;\n color: inherit;\n font: inherit;\n tab-size: var(--c2-code-viewer--tab-size,2);\n padding-top: var(--c2-code-viewer--padding-top,12px);\n padding-right: var(--c2-code-viewer--padding-right,16px);\n padding-bottom: var(--c2-code-viewer--padding-bottom,12px);\n padding-left: var(--c2-code-viewer--padding-left,16px);\n}\npre.shiki code {\n display: block;\n font: inherit;\n}\npre.shiki .line {\n display: inline-block;\n width: 100%;\n box-sizing: border-box;\n min-height: 1lh;\n}\npre.shiki .line.highlighted {\n background: var(--c2-code-viewer__line__highlighted--background,rgba(99, 102, 241, 0.01));\n border-left: var(--c2-code-viewer__line__highlighted--border-left,3px solid rgb(99, 102, 241));\n margin-left: calc(-1 * var(--c2-code-viewer--padding-left,16px));\n padding-left: calc(var(--c2-code-viewer--padding-left,16px) - 3px);\n width: calc(100% + var(--c2-code-viewer--padding-left,16px) + var(--c2-code-viewer--padding-right,16px));\n margin-right: calc(-1 * var(--c2-code-viewer--padding-right,16px));\n}\npre.shiki.has-line-numbers .line::before {\n counter-increment: line;\n content: counter(line);\n display: inline-block;\n min-width: var(--c2-code-viewer__line-numbers--min-width,2ch);\n margin-right: var(--c2-code-viewer__line-numbers--gap,16px);\n text-align: right;\n color: var(--c2-code-viewer__line-numbers--color);\n opacity: 0.45;\n user-select: none;\n}\npre.shiki .diff-marker {\n user-select: none;\n}\n\n:host([wrap]) pre.shiki {\n width: 100%;\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n.c2-code-viewer-inline {\n font-family: var(--c2-code-viewer--font-family,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);\n font-size: 0.9em;\n color: var(--c2-code-viewer--color,var(--cv-fg,var(--shiki-light)));\n background: var(--c2-code-viewer--background,var(--cv-bg,var(--shiki-light-bg)));\n padding: 0.1em 0.4em;\n border-radius: 4px;\n border-top: var(--c2-code-viewer--border-top,1px solid rgb(213, 213, 213));\n border-right: var(--c2-code-viewer--border-right,1px solid rgb(213, 213, 213));\n border-bottom: var(--c2-code-viewer--border-bottom,1px solid rgb(213, 213, 213));\n border-left: var(--c2-code-viewer--border-left,1px solid rgb(213, 213, 213));\n}\n\n.dual span {\n color: var(--shiki-light);\n}\n\n:host([color-scheme=dark]) .c2-code-viewer,\n:host([color-scheme=dark]) .c2-code-viewer-inline {\n background: var(--c2-code-viewer--background,var(--cv-bg,var(--shiki-dark-bg)));\n color: var(--c2-code-viewer--color,var(--cv-fg,var(--shiki-dark)));\n}\n:host([color-scheme=dark]) .dual span {\n color: var(--shiki-dark);\n}\n\n@media (prefers-color-scheme: dark) {\n :host(:not([color-scheme=light])) .c2-code-viewer,\n :host(:not([color-scheme=light])) .c2-code-viewer-inline {\n background: var(--c2-code-viewer--background,var(--cv-bg,var(--shiki-dark-bg)));\n color: var(--c2-code-viewer--color,var(--cv-fg,var(--shiki-dark)));\n }\n :host(:not([color-scheme=light])) .dual span {\n color: var(--shiki-dark);\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .c2-code-viewer-copy,\n .c2-code-viewer-body > .c2-code-viewer-copy {\n transition: none;\n }\n}";
|
|
12
13
|
//#endregion
|
|
13
14
|
//#region src/shiki.ts
|
|
14
15
|
var CSS_VARIABLES_THEME = "css-variables";
|
|
@@ -156,6 +157,7 @@ var CodeViewer = class CodeViewer extends LitElement {
|
|
|
156
157
|
this.startLine = 1;
|
|
157
158
|
this.highlightLines = "";
|
|
158
159
|
this.copyable = false;
|
|
160
|
+
this.variant = "code";
|
|
159
161
|
this.slotCode = "";
|
|
160
162
|
this.hasTitle = false;
|
|
161
163
|
this.highlighted = void 0;
|
|
@@ -288,17 +290,25 @@ var CodeViewer = class CodeViewer extends LitElement {
|
|
|
288
290
|
data-language=${normalizeLang(this.language)}
|
|
289
291
|
>${this.renderCode()}</code
|
|
290
292
|
>`;
|
|
293
|
+
const terminal = this.variant === "terminal";
|
|
294
|
+
const showCopy = this.copyable || terminal;
|
|
291
295
|
return html`
|
|
292
296
|
${source}
|
|
293
|
-
<div
|
|
297
|
+
<div
|
|
298
|
+
class=${classMap({
|
|
294
299
|
"c2-code-viewer": true,
|
|
295
|
-
"has-title": this.hasTitle
|
|
296
|
-
|
|
297
|
-
|
|
300
|
+
"has-title": this.hasTitle || terminal,
|
|
301
|
+
"is-terminal": terminal
|
|
302
|
+
})}
|
|
303
|
+
style=${this.highlighted?.style || nothing}
|
|
304
|
+
>
|
|
305
|
+
<div class="c2-code-viewer-header" ?hidden=${!this.hasTitle && !terminal}>
|
|
306
|
+
${terminal ? html`<span class="terminal-dots" aria-hidden="true"><i class="close"></i><i class="minimize"></i><i class="maximize"></i></span>` : nothing}
|
|
298
307
|
<slot name="title" @slotchange=${this.handleSlotChange}></slot>
|
|
299
|
-
${this.
|
|
308
|
+
${terminal && !this.hasTitle ? html`<span class="terminal-language">${normalizeLang(this.language)}</span>` : nothing}
|
|
309
|
+
${showCopy ? this.renderCopyButton() : nothing}
|
|
300
310
|
</div>
|
|
301
|
-
<div class="c2-code-viewer-body">${this.renderCode()} ${
|
|
311
|
+
<div class="c2-code-viewer-body">${this.renderCode()} ${showCopy && !this.hasTitle && !terminal ? this.renderCopyButton() : nothing}</div>
|
|
302
312
|
</div>
|
|
303
313
|
`;
|
|
304
314
|
}
|
|
@@ -333,6 +343,7 @@ __decorate([property({
|
|
|
333
343
|
type: Boolean,
|
|
334
344
|
reflect: true
|
|
335
345
|
})], CodeViewer.prototype, "copyable", void 0);
|
|
346
|
+
__decorate([property({ reflect: true })], CodeViewer.prototype, "variant", void 0);
|
|
336
347
|
__decorate([state()], CodeViewer.prototype, "slotCode", void 0);
|
|
337
348
|
__decorate([state()], CodeViewer.prototype, "hasTitle", void 0);
|
|
338
349
|
__decorate([state()], CodeViewer.prototype, "highlighted", void 0);
|
package/package.json
CHANGED
|
@@ -1,18 +1,30 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@c2n/code-viewer",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.8",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/code-viewer.js",
|
|
6
6
|
"exports": {
|
|
7
7
|
".": {
|
|
8
|
-
"
|
|
9
|
-
"
|
|
8
|
+
"types": "./types/src/code-viewer.d.ts",
|
|
9
|
+
"default": "./dist/code-viewer.js"
|
|
10
|
+
},
|
|
11
|
+
"./react": {
|
|
12
|
+
"types": "./react.d.ts",
|
|
13
|
+
"default": "./react.js"
|
|
14
|
+
},
|
|
15
|
+
"./vue": {
|
|
16
|
+
"types": "./vue.d.ts",
|
|
17
|
+
"default": "./vue.js"
|
|
10
18
|
},
|
|
11
19
|
"./custom-elements.json": "./custom-elements.json"
|
|
12
20
|
},
|
|
13
21
|
"files": [
|
|
14
22
|
"dist",
|
|
15
|
-
"types"
|
|
23
|
+
"types",
|
|
24
|
+
"react.d.ts",
|
|
25
|
+
"react.js",
|
|
26
|
+
"vue.d.ts",
|
|
27
|
+
"vue.js"
|
|
16
28
|
],
|
|
17
29
|
"keywords": [
|
|
18
30
|
"code-viewer",
|
|
@@ -48,7 +60,7 @@
|
|
|
48
60
|
}
|
|
49
61
|
},
|
|
50
62
|
"dependencies": {
|
|
51
|
-
"@c2n/core": "0.0.
|
|
63
|
+
"@c2n/core": "0.0.8",
|
|
52
64
|
"@lit/task": "1.0.3",
|
|
53
65
|
"lit": "3.3.3",
|
|
54
66
|
"shiki": "4.4.3"
|
|
@@ -58,5 +70,5 @@
|
|
|
58
70
|
"@types/hast": "^3.0.5"
|
|
59
71
|
},
|
|
60
72
|
"customElements": "custom-elements.json",
|
|
61
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "be59cbccee1d33ca248e39f69b05c0b595ec6c6d"
|
|
62
74
|
}
|
package/react.d.ts
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
// GENERATED by @c2n/framework-types. Do not edit by hand.
|
|
2
|
+
//
|
|
3
|
+
// JSX types for the custom elements of @c2n/code-viewer. Import once, anywhere in the program:
|
|
4
|
+
//
|
|
5
|
+
// import '@c2n/code-viewer/react'
|
|
6
|
+
//
|
|
7
|
+
// Register the elements at module scope before React renders, or React writes an object prop as an
|
|
8
|
+
// attribute and it stringifies.
|
|
9
|
+
|
|
10
|
+
import type { DetailedHTMLProps, HTMLAttributes } from 'react'
|
|
11
|
+
import type { CodeViewer } from '@c2n/code-viewer'
|
|
12
|
+
|
|
13
|
+
/** Standard React host-element attributes plus the element's own public properties. */
|
|
14
|
+
type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
|
|
15
|
+
|
|
16
|
+
declare module 'react' {
|
|
17
|
+
namespace JSX {
|
|
18
|
+
interface IntrinsicElements {
|
|
19
|
+
'c2-code-viewer': C2Props<CodeViewer>
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export {}
|
package/react.js
ADDED
|
@@ -1,7 +1,18 @@
|
|
|
1
1
|
import { LitElement, type PropertyValues } from 'lit';
|
|
2
|
+
import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
|
|
2
3
|
import { Task } from '@lit/task';
|
|
3
4
|
import { type HighlightResult, type ThemeName } from './shiki';
|
|
4
5
|
export type { ThemeName } from './shiki';
|
|
6
|
+
/** Events fired by {@link CodeViewer}, keyed for `addEventListener`. */
|
|
7
|
+
export interface CodeViewerEventMap {
|
|
8
|
+
'code-copy': CustomEvent<{
|
|
9
|
+
code: string;
|
|
10
|
+
}>;
|
|
11
|
+
}
|
|
12
|
+
export interface CodeViewer {
|
|
13
|
+
addEventListener: TypedAddEventListener<CodeViewer, CodeViewerEventMap>;
|
|
14
|
+
removeEventListener: TypedRemoveEventListener<CodeViewer, CodeViewerEventMap>;
|
|
15
|
+
}
|
|
5
16
|
/**
|
|
6
17
|
* Syntax-highlighted source code powered by shiki. Grammars and themes are loaded on demand into one shared
|
|
7
18
|
* highlighter, so many viewers on a page cost one engine. The raw code renders immediately as plain text (also on the
|
|
@@ -61,12 +72,15 @@ export type { ThemeName } from './shiki';
|
|
|
61
72
|
* @cssproperty {background} --c2-code-viewer__copy--background
|
|
62
73
|
* @cssproperty {background} [--c2-code-viewer__copy__hover--background=rgba(127, 127, 127, 0.15)]
|
|
63
74
|
* @cssproperty {color} [--c2-code-viewer__copy__copied--color=rgb(34, 197, 94)]
|
|
75
|
+
* @cssproperty {color} [--c2-code-viewer__terminal__dot__close--color=#ff5f57]
|
|
76
|
+
* @cssproperty {color} [--c2-code-viewer__terminal__dot__minimize--color=#febc2e]
|
|
77
|
+
* @cssproperty {color} [--c2-code-viewer__terminal__dot__maximize--color=#28c840]
|
|
64
78
|
*
|
|
65
79
|
* @cssproperty {pixel} [--c2-code-viewer__line-numbers--min-width=2ch]
|
|
66
80
|
* @cssproperty {pixel} [--c2-code-viewer__line-numbers--gap=16px]
|
|
67
81
|
* @cssproperty {color} --c2-code-viewer__line-numbers--color - Defaults to the foreground at 45% opacity.
|
|
68
82
|
*
|
|
69
|
-
* @cssproperty {background} [--c2-code-viewer__line__highlighted--background=rgba(99, 102, 241, 0.
|
|
83
|
+
* @cssproperty {background} [--c2-code-viewer__line__highlighted--background=rgba(99, 102, 241, 0.01)]
|
|
70
84
|
* @cssproperty {border} [--c2-code-viewer__line__highlighted--border-left=3px solid rgb(99, 102, 241)]
|
|
71
85
|
*
|
|
72
86
|
* @cssproperty {color} [--c2-code-viewer__theme--foreground=#24292e] - `css-variables` theme only.
|
|
@@ -100,6 +114,7 @@ export declare class CodeViewer extends LitElement {
|
|
|
100
114
|
wrap: boolean;
|
|
101
115
|
/** Render as an inline `<code>` fragment (no frame, no header). */
|
|
102
116
|
inline: boolean;
|
|
117
|
+
/** Show a line-number gutter. */
|
|
103
118
|
lineNumbers: boolean;
|
|
104
119
|
/** First line number when `line-numbers` is on. */
|
|
105
120
|
startLine: number;
|
|
@@ -107,6 +122,8 @@ export declare class CodeViewer extends LitElement {
|
|
|
107
122
|
highlightLines: string;
|
|
108
123
|
/** Show a copy-to-clipboard button. */
|
|
109
124
|
copyable: boolean;
|
|
125
|
+
/** `terminal` adds window controls, a language label and an always-visible copy action. */
|
|
126
|
+
variant: 'code' | 'terminal';
|
|
110
127
|
private slotCode;
|
|
111
128
|
private hasTitle;
|
|
112
129
|
private highlighted;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code-viewer.d.ts","sourceRoot":"","sources":["../../src/code-viewer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;
|
|
1
|
+
{"version":3,"file":"code-viewer.d.ts","sourceRoot":"","sources":["../../src/code-viewer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAG/E,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAGhG,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAEhC,OAAO,EAA0C,KAAK,eAAe,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAA;AAEtG,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAIxC,wEAAwE;AACxE,MAAM,WAAW,kBAAkB;IACjC,WAAW,EAAE,WAAW,CAAC;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CAC3C;AAED,MAAM,WAAW,UAAU;IACzB,gBAAgB,EAAE,qBAAqB,CAAC,UAAU,EAAE,kBAAkB,CAAC,CAAA;IACvE,mBAAmB,EAAE,wBAAwB,CAAC,UAAU,EAAE,kBAAkB,CAAC,CAAA;CAC9E;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiFG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,0BAAoB;IAE1C,2HAA2H;IAC/G,IAAI,EAAE,MAAM,GAAG,SAAS,CAAY;IAEhD;;;OAGG;IAC0B,QAAQ,SAAc;IAEnD,4CAA4C;IAChC,KAAK,EAAE,SAAS,CAAiB;IAE7C,oGAAoG;IAC7D,SAAS,EAAE,SAAS,GAAG,SAAS,CAAY;IAEnF,4FAA4F;IACpC,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAS;IAEvG,8DAA8D;IAClB,IAAI,UAAQ;IAExD,mEAAmE;IACvB,MAAM,UAAQ;IAE1D,iCAAiC;IACsC,WAAW,UAAQ;IAE1F,mDAAmD;IACE,SAAS,SAAI;IAElE,mDAAmD;IACP,cAAc,SAAK;IAE/D,uCAAuC;IACK,QAAQ,UAAQ;IAE5D,2FAA2F;IAC9D,OAAO,EAAE,MAAM,GAAG,UAAU,CAAS;IAEzD,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,QAAQ,CAAQ;IACxB,OAAO,CAAC,WAAW,CAAyC;IAC5D,OAAO,CAAC,MAAM,CAAQ;IAE/B,OAAO,CAAC,WAAW,CAA2C;IAE9D,+CAA+C;IAC/C,WAAoB,kBAAkB,aAErC;IAEQ,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAQxF,kEAAkE;IAClE,IAAI,MAAM,IAAI,MAAM,CAInB;IAED,OAAO,KAAK,gBAAgB,GAY3B;IAED,SAAS,CAAC,aAAa;;;OAWrB;IAEO,UAAU,CAAC,OAAO,EAAE,cAAc;IAKlC,YAAY;IAIrB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,UAAU;IAYlB,kDAAkD;IAC5C,IAAI;IASV,OAAO,CAAC,gBAAgB;IAwBxB,OAAO,CAAC,UAAU;IAUT,MAAM;CAgChB;AAED,+FAA+F;AAC/F,wBAAgB,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAM3C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,UAAU,CAAA;KAC7B;CACF"}
|
package/vue.d.ts
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
// GENERATED by @c2n/framework-types. Do not edit by hand.
|
|
2
|
+
//
|
|
3
|
+
// Vue template types for the custom elements of @c2n/code-viewer. Import once, anywhere in the program:
|
|
4
|
+
//
|
|
5
|
+
// import '@c2n/code-viewer/vue'
|
|
6
|
+
//
|
|
7
|
+
// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
|
|
8
|
+
// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
|
|
9
|
+
|
|
10
|
+
import type { DefineComponent, HTMLAttributes } from 'vue'
|
|
11
|
+
import type { CodeViewer, CodeViewerEventMap } from '@c2n/code-viewer'
|
|
12
|
+
|
|
13
|
+
/** The element's own public properties, plus every attribute Vue understands on a host element. */
|
|
14
|
+
type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
|
|
15
|
+
|
|
16
|
+
declare module 'vue' {
|
|
17
|
+
interface GlobalComponents {
|
|
18
|
+
'c2-code-viewer': DefineComponent<
|
|
19
|
+
C2Props<CodeViewer> & {
|
|
20
|
+
'dark-theme'?: unknown
|
|
21
|
+
'color-scheme'?: unknown
|
|
22
|
+
'line-numbers'?: unknown
|
|
23
|
+
'start-line'?: unknown
|
|
24
|
+
'highlight-lines'?: unknown
|
|
25
|
+
onCodeCopy?: (event: CodeViewerEventMap['code-copy']) => void
|
|
26
|
+
}
|
|
27
|
+
>
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
declare module '@vue/runtime-dom' {
|
|
32
|
+
interface HTMLAttributes {
|
|
33
|
+
/** Vue's own definition omits it, and slotting a plain element into a component needs it. */
|
|
34
|
+
slot?: string
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
export {}
|
package/vue.js
ADDED