@codemonster-ru/vue-codeblock 1.1.0 → 1.1.1
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/README.md +14 -0
- package/dist/index.css +1 -1
- package/dist/index.umd.cjs +8 -8
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -122,6 +122,13 @@ Main CSS custom properties:
|
|
|
122
122
|
- `--vcb-background-color`
|
|
123
123
|
- `--vcb-text-color`
|
|
124
124
|
- `--vcb-border-color`
|
|
125
|
+
- `--vcb-border-radius`
|
|
126
|
+
- `--vcb-header-background-color`
|
|
127
|
+
- `--vcb-header-border-color`
|
|
128
|
+
- `--vcb-header-padding`
|
|
129
|
+
- `--vcb-code-background-color`
|
|
130
|
+
- `--vcb-action-background-color`
|
|
131
|
+
- `--vcb-action-border-color`
|
|
125
132
|
- `--vcb-padding`
|
|
126
133
|
- `--vcb-font-size`
|
|
127
134
|
- `--vcb-line-height`
|
|
@@ -143,6 +150,13 @@ Example:
|
|
|
143
150
|
}
|
|
144
151
|
```
|
|
145
152
|
|
|
153
|
+
The default styles are tuned to feel closer to a documentation surface:
|
|
154
|
+
|
|
155
|
+
- the outer container stays close to the page background
|
|
156
|
+
- separation comes mostly from border and header chrome
|
|
157
|
+
- the code area does not introduce a heavy extra panel by default
|
|
158
|
+
- light and dark themes follow the same surface logic
|
|
159
|
+
|
|
146
160
|
## Notes
|
|
147
161
|
|
|
148
162
|
- The built-in highlighter is lightweight and regex-based by design.
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.vcb{display:grid;gap:var(--vcb-gap, 0);border:1px solid var(--vcb-border-color, var(--vf-color-border, #
|
|
1
|
+
.vcb{display:grid;gap:var(--vcb-gap, 0);border:1px solid var(--vcb-border-color, color-mix(in srgb, var(--vf-color-border, rgba(15, 23, 42, .12)) 92%, #cbd5e1));border-radius:var(--vcb-border-radius, var(--vf-radius-control, var(--vf-radius-surface, var(--vf-radius, .625rem))));background:var(--vcb-background-color, var(--vf-color-bg, #ffffff));color:var(--vcb-text-color, var(--vf-color-text, #1f232b));font-family:var(--vcb-font-family, var(--vf-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace));font-size:var(--vcb-font-size, var(--vf-font-size-sm, .8125rem));line-height:var(--vcb-line-height, var(--vf-line-height-normal, 1.5));overflow:hidden}.vcb__header{display:flex;align-items:center;justify-content:space-between;gap:var(--vcb-header-gap, .75rem);min-height:0;padding:var(--vcb-header-padding, .4rem .75rem);border-bottom:1px solid var(--vcb-header-border-color, color-mix(in srgb, var(--vf-color-border, rgba(15, 23, 42, .12)) 78%, transparent));background:var(--vcb-header-background-color, var(--vcb-background-color, var(--vf-color-bg, #ffffff)));opacity:var(--vcb-header-opacity, .9)}.vcb__meta{display:inline-flex;align-items:center;gap:var(--vcb-meta-gap, .55rem);color:var(--vcb-meta-color, var(--vf-color-muted, #616773));font-size:var(--vcb-meta-font-size, var(--vf-font-size-sm, .75rem));letter-spacing:0}.vcb__filename{color:var(--vcb-filename-color, var(--vf-color-text, #1f232b));font-weight:var(--vcb-filename-font-weight, var(--vf-font-weight-semibold, 600))}.vcb__actions{display:inline-flex;align-items:center;gap:var(--vcb-actions-gap, .45rem)}.vcb__copy{border:1px solid var(--vcb-action-border-color, color-mix(in srgb, var(--vf-color-border, rgba(15, 23, 42, .12)) 80%, transparent));border-radius:var(--vcb-action-border-radius, var(--vf-radius-control-tight, .375rem));background:var(--vcb-action-background-color, var(--vf-color-bg, #ffffff));color:var(--vcb-action-text-color, var(--vf-color-text, #1f232b));padding:var(--vcb-action-padding, .125rem .5rem);font-size:var(--vcb-action-font-size, var(--vf-font-size-sm, .75rem));font-weight:var(--vcb-action-font-weight, var(--vf-text-body-font-weight, 400));opacity:var(--vcb-action-opacity, .88)}.vcb__pre{margin:0;padding:var(--vcb-padding, var(--vf-prose-code-block-padding, .75rem .9rem));background:var(--vcb-code-background-color, transparent);overflow:auto;white-space:pre}.vcb__pre_wrap{white-space:pre-wrap;word-break:break-word}.vcb__line{display:flex;align-items:baseline;gap:var(--vcb-line-gap, .7rem)}.vcb__line-number{text-align:right;color:var(--vcb-line-number-color, var(--vf-color-muted, #616773));min-width:var(--vcb-line-number-min-width, 2.1rem);-webkit-user-select:none;user-select:none}.vcb__line-content{white-space:inherit}.vcb__token_keyword{color:var(--vcb-token-keyword-color, var(--vf-color-help, #8553a1))}.vcb__token_string{color:var(--vcb-token-string-color, var(--vf-color-success, #2e7d32))}.vcb__token_number{color:var(--vcb-token-number-color, var(--vf-color-warn, #9f8400))}.vcb__token_comment{color:var(--vcb-token-comment-color, var(--vf-color-muted, #616773))}.vcb__token_variable{color:var(--vcb-token-variable-color, var(--vf-color-text, #1f232b))}.vcb__token_identifier{color:var(--vcb-token-identifier-color, var(--vf-color-info, #0069ba))}.vcb__token_function{color:var(--vcb-token-function-color, var(--vf-color-primary, #0e639c))}.vcb__token_property{color:var(--vcb-token-property-color, var(--vf-color-primary, #0e639c))}.vcb__token_operator{color:var(--vcb-token-operator-color, var(--vf-color-danger, #c72e39))}.vcb__token_tag{color:var(--vcb-token-tag-color, var(--vf-color-primary, #0e639c))}.vcb__token_selector{color:var(--vcb-token-selector-color, var(--vf-color-primary, #0e639c))}.vcb__token_component{color:var(--vcb-token-component-color, var(--vf-color-info, #0069ba))}.vcb__token_attribute{color:var(--vcb-token-attribute-color, var(--vf-color-help, #8553a1))}.vcb__token_directive{color:var(--vcb-token-directive-color, var(--vf-color-help, #8553a1))}.vcb[data-theme=dark],:root[data-theme=dark] .vcb:not([data-theme=light]),[data-theme=dark] .vcb:not([data-theme=light]){--vcb-background-color: var( --vcb-dark-background-color, var(--vf-color-bg, #1e1e1e) );--vcb-text-color: var(--vcb-dark-text-color, var(--vf-color-text, #d4d4d4));--vcb-border-color: var( --vcb-dark-border-color, color-mix(in srgb, var(--vf-color-border, #3c3c3c) 88%, black) );--vcb-header-border-color: var( --vcb-dark-header-border-color, color-mix(in srgb, var(--vf-color-border, #3c3c3c) 72%, transparent) );--vcb-header-background-color: var( --vcb-dark-header-background-color, transparent );--vcb-meta-color: var(--vcb-dark-meta-color, var(--vf-color-muted, #9da0a6));--vcb-filename-color: var( --vcb-dark-filename-color, var(--vf-color-text, #d4d4d4) );--vcb-action-border-color: var( --vcb-dark-action-border-color, color-mix(in srgb, var(--vf-color-border, #3c3c3c) 76%, transparent) );--vcb-action-background-color: var( --vcb-dark-action-background-color, color-mix(in srgb, var(--vf-color-surface, #252526) 72%, transparent) );--vcb-action-text-color: var( --vcb-dark-action-text-color, var(--vf-color-text, #d4d4d4) );--vcb-line-number-color: var( --vcb-dark-line-number-color, var(--vf-color-muted, #9da0a6) );--vcb-token-keyword-color: var( --vcb-dark-token-keyword-color, var(--vf-color-help, #c586c0) );--vcb-token-string-color: var( --vcb-dark-token-string-color, var(--vf-color-success, #6a9955) );--vcb-token-number-color: var( --vcb-dark-token-number-color, var(--vf-color-warn, #d7ba7d) );--vcb-token-comment-color: var(--vcb-dark-token-comment-color, #6a9955);--vcb-token-variable-color: var( --vcb-dark-token-variable-color, var(--vf-color-text, #d4d4d4) );--vcb-token-tag-color: var( --vcb-dark-token-tag-color, var(--vf-color-primary, #569cd6) );--vcb-token-selector-color: var( --vcb-dark-token-selector-color, var(--vf-color-warn, #d7ba7d) );--vcb-token-component-color: var( --vcb-dark-token-component-color, var(--vf-color-info, #4ec9b0) );--vcb-token-attribute-color: var(--vcb-dark-token-attribute-color, #9cdcfe);--vcb-token-directive-color: var(--vcb-dark-token-directive-color, #c586c0);--vcb-token-identifier-color: var(--vcb-dark-token-identifier-color, #9cdcfe);--vcb-token-function-color: var( --vcb-dark-token-function-color, var(--vf-color-contrast, #dcdcaa) );--vcb-token-property-color: var(--vcb-dark-token-property-color, #9cdcfe);--vcb-token-operator-color: var(--vcb-dark-token-operator-color, #d4d4d4)}.vcb[data-theme=light],:root:not([data-theme=dark]) .vcb:not([data-theme=dark]),[data-theme=light] .vcb,[data-vf-theme=light] .vcb,:root:not([data-vf-theme=dark]) .vcb:not([data-theme=dark]){box-shadow:var(--vcb-shadow, 0 1px 2px rgba(15, 23, 42, .04))}.vcb_disabled{opacity:var(--vcb-disabled-opacity, .6)}
|
package/dist/index.umd.cjs
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
(function(h,
|
|
2
|
-
/*$vite$:1*/`,document.head.appendChild(N);const o=e=>e.replaceAll("&","&").replaceAll("<","<").replaceAll(">",">"),W=e=>e.replaceAll(""",'"').replaceAll("'","'").replaceAll("<","<").replaceAll(">",">").replaceAll("&","&"),B=e=>o(e),
|
|
1
|
+
(function(h,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],i):(h=typeof globalThis<"u"?globalThis:h||self,i(h.VueCodeBlock={},h.Vue))})(this,(function(h,i){"use strict";var N=document.createElement("style");N.textContent=`.vcb{display:grid;gap:var(--vcb-gap, 0);border:1px solid var(--vcb-border-color, color-mix(in srgb, var(--vf-color-border, rgba(15, 23, 42, .12)) 92%, #cbd5e1));border-radius:var(--vcb-border-radius, var(--vf-radius-control, var(--vf-radius-surface, var(--vf-radius, .625rem))));background:var(--vcb-background-color, var(--vf-color-bg, #ffffff));color:var(--vcb-text-color, var(--vf-color-text, #1f232b));font-family:var(--vcb-font-family, var(--vf-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace));font-size:var(--vcb-font-size, var(--vf-font-size-sm, .8125rem));line-height:var(--vcb-line-height, var(--vf-line-height-normal, 1.5));overflow:hidden}.vcb__header{display:flex;align-items:center;justify-content:space-between;gap:var(--vcb-header-gap, .75rem);min-height:0;padding:var(--vcb-header-padding, .4rem .75rem);border-bottom:1px solid var(--vcb-header-border-color, color-mix(in srgb, var(--vf-color-border, rgba(15, 23, 42, .12)) 78%, transparent));background:var(--vcb-header-background-color, var(--vcb-background-color, var(--vf-color-bg, #ffffff)));opacity:var(--vcb-header-opacity, .9)}.vcb__meta{display:inline-flex;align-items:center;gap:var(--vcb-meta-gap, .55rem);color:var(--vcb-meta-color, var(--vf-color-muted, #616773));font-size:var(--vcb-meta-font-size, var(--vf-font-size-sm, .75rem));letter-spacing:0}.vcb__filename{color:var(--vcb-filename-color, var(--vf-color-text, #1f232b));font-weight:var(--vcb-filename-font-weight, var(--vf-font-weight-semibold, 600))}.vcb__actions{display:inline-flex;align-items:center;gap:var(--vcb-actions-gap, .45rem)}.vcb__copy{border:1px solid var(--vcb-action-border-color, color-mix(in srgb, var(--vf-color-border, rgba(15, 23, 42, .12)) 80%, transparent));border-radius:var(--vcb-action-border-radius, var(--vf-radius-control-tight, .375rem));background:var(--vcb-action-background-color, var(--vf-color-bg, #ffffff));color:var(--vcb-action-text-color, var(--vf-color-text, #1f232b));padding:var(--vcb-action-padding, .125rem .5rem);font-size:var(--vcb-action-font-size, var(--vf-font-size-sm, .75rem));font-weight:var(--vcb-action-font-weight, var(--vf-text-body-font-weight, 400));opacity:var(--vcb-action-opacity, .88)}.vcb__pre{margin:0;padding:var(--vcb-padding, var(--vf-prose-code-block-padding, .75rem .9rem));background:var(--vcb-code-background-color, transparent);overflow:auto;white-space:pre}.vcb__pre_wrap{white-space:pre-wrap;word-break:break-word}.vcb__line{display:flex;align-items:baseline;gap:var(--vcb-line-gap, .7rem)}.vcb__line-number{text-align:right;color:var(--vcb-line-number-color, var(--vf-color-muted, #616773));min-width:var(--vcb-line-number-min-width, 2.1rem);-webkit-user-select:none;user-select:none}.vcb__line-content{white-space:inherit}.vcb__token_keyword{color:var(--vcb-token-keyword-color, var(--vf-color-help, #8553a1))}.vcb__token_string{color:var(--vcb-token-string-color, var(--vf-color-success, #2e7d32))}.vcb__token_number{color:var(--vcb-token-number-color, var(--vf-color-warn, #9f8400))}.vcb__token_comment{color:var(--vcb-token-comment-color, var(--vf-color-muted, #616773))}.vcb__token_variable{color:var(--vcb-token-variable-color, var(--vf-color-text, #1f232b))}.vcb__token_identifier{color:var(--vcb-token-identifier-color, var(--vf-color-info, #0069ba))}.vcb__token_function{color:var(--vcb-token-function-color, var(--vf-color-primary, #0e639c))}.vcb__token_property{color:var(--vcb-token-property-color, var(--vf-color-primary, #0e639c))}.vcb__token_operator{color:var(--vcb-token-operator-color, var(--vf-color-danger, #c72e39))}.vcb__token_tag{color:var(--vcb-token-tag-color, var(--vf-color-primary, #0e639c))}.vcb__token_selector{color:var(--vcb-token-selector-color, var(--vf-color-primary, #0e639c))}.vcb__token_component{color:var(--vcb-token-component-color, var(--vf-color-info, #0069ba))}.vcb__token_attribute{color:var(--vcb-token-attribute-color, var(--vf-color-help, #8553a1))}.vcb__token_directive{color:var(--vcb-token-directive-color, var(--vf-color-help, #8553a1))}.vcb[data-theme=dark],:root[data-theme=dark] .vcb:not([data-theme=light]),[data-theme=dark] .vcb:not([data-theme=light]){--vcb-background-color: var( --vcb-dark-background-color, var(--vf-color-bg, #1e1e1e) );--vcb-text-color: var(--vcb-dark-text-color, var(--vf-color-text, #d4d4d4));--vcb-border-color: var( --vcb-dark-border-color, color-mix(in srgb, var(--vf-color-border, #3c3c3c) 88%, black) );--vcb-header-border-color: var( --vcb-dark-header-border-color, color-mix(in srgb, var(--vf-color-border, #3c3c3c) 72%, transparent) );--vcb-header-background-color: var( --vcb-dark-header-background-color, transparent );--vcb-meta-color: var(--vcb-dark-meta-color, var(--vf-color-muted, #9da0a6));--vcb-filename-color: var( --vcb-dark-filename-color, var(--vf-color-text, #d4d4d4) );--vcb-action-border-color: var( --vcb-dark-action-border-color, color-mix(in srgb, var(--vf-color-border, #3c3c3c) 76%, transparent) );--vcb-action-background-color: var( --vcb-dark-action-background-color, color-mix(in srgb, var(--vf-color-surface, #252526) 72%, transparent) );--vcb-action-text-color: var( --vcb-dark-action-text-color, var(--vf-color-text, #d4d4d4) );--vcb-line-number-color: var( --vcb-dark-line-number-color, var(--vf-color-muted, #9da0a6) );--vcb-token-keyword-color: var( --vcb-dark-token-keyword-color, var(--vf-color-help, #c586c0) );--vcb-token-string-color: var( --vcb-dark-token-string-color, var(--vf-color-success, #6a9955) );--vcb-token-number-color: var( --vcb-dark-token-number-color, var(--vf-color-warn, #d7ba7d) );--vcb-token-comment-color: var(--vcb-dark-token-comment-color, #6a9955);--vcb-token-variable-color: var( --vcb-dark-token-variable-color, var(--vf-color-text, #d4d4d4) );--vcb-token-tag-color: var( --vcb-dark-token-tag-color, var(--vf-color-primary, #569cd6) );--vcb-token-selector-color: var( --vcb-dark-token-selector-color, var(--vf-color-warn, #d7ba7d) );--vcb-token-component-color: var( --vcb-dark-token-component-color, var(--vf-color-info, #4ec9b0) );--vcb-token-attribute-color: var(--vcb-dark-token-attribute-color, #9cdcfe);--vcb-token-directive-color: var(--vcb-dark-token-directive-color, #c586c0);--vcb-token-identifier-color: var(--vcb-dark-token-identifier-color, #9cdcfe);--vcb-token-function-color: var( --vcb-dark-token-function-color, var(--vf-color-contrast, #dcdcaa) );--vcb-token-property-color: var(--vcb-dark-token-property-color, #9cdcfe);--vcb-token-operator-color: var(--vcb-dark-token-operator-color, #d4d4d4)}.vcb[data-theme=light],:root:not([data-theme=dark]) .vcb:not([data-theme=dark]),[data-theme=light] .vcb,[data-vf-theme=light] .vcb,:root:not([data-vf-theme=dark]) .vcb:not([data-theme=dark]){box-shadow:var(--vcb-shadow, 0 1px 2px rgba(15, 23, 42, .04))}.vcb_disabled{opacity:var(--vcb-disabled-opacity, .6)}
|
|
2
|
+
/*$vite$:1*/`,document.head.appendChild(N);const o=e=>e.replaceAll("&","&").replaceAll("<","<").replaceAll(">",">"),W=e=>e.replaceAll(""",'"').replaceAll("'","'").replaceAll("<","<").replaceAll(">",">").replaceAll("&","&"),B=e=>o(e),s=(e,c)=>`<span class="vcb__token ${e}">${c}</span>`,I="\\b\\d(?:[\\d_]*\\d)?(?:\\.\\d(?:[\\d_]*\\d)?)?\\b",R="\\b-?\\d(?:[\\d_]*\\d)?(?:\\.\\d(?:[\\d_]*\\d)?)?(?:px|rem|em|%|vh|vw|fr|s|ms|deg)?\\b",L=e=>e.startsWith(":")||e.startsWith("@")||e.startsWith("#")||e.startsWith("v-"),O=e=>/^[A-Z]/.test(e),F=e=>{let c=0,r=s("vcb__token_string",o("`"));for(;c<e.length-1;){const t=e.indexOf("${",c),a=t===-1?e.length-1:t,n=e.slice(c,a);if(n&&(r+=s("vcb__token_string",o(n))),t===-1)break;r+=o("${");let d=t+2,l=1;for(;d<e.length&&l>0;){const v=e[d];v==="{"?l+=1:v==="}"&&(l-=1),d+=1}const b=e.slice(t+2,d-1);r+=E(b),r+=o("}"),c=d}return r+=s("vcb__token_string",o("`")),r},E=e=>T(e),U=e=>{if(e.length<2)return s("vcb__token_string",e);const c=e[0],r=W(e.slice(1,-1)),t=E(r),a=c==='"'?""":"'";return`${a}${t}${a}`},S=(e,c,r,t,a)=>{const n=r?E(W(e)):s("vcb__token_string",o(e)),d=c==='"'?""":"'";return`${t?d:""}${n}${a?d:""}`},V=e=>e.replaceAll(/{{\s*([\s\S]*?)\s*}}/g,(c,r)=>{const t=E(r);return`${o("{{ ")}${t}${o(" }}")}`}),M=e=>e.replaceAll(/(\s+)([:@#]?[\w-]+(?::[\w-]+)?)(\s*=\s*)?("[^"]*"|'[^']*')?/g,(c,r,t,a="",n="")=>`${o(r)}${s(L(t)?"vcb__token_directive":"vcb__token_attribute",o(t))}${o(a)}${n?L(t)?U(n):s("vcb__token_string",o(n)):""}`),z=e=>{const c=e.match(/^(\s*)<([/\w-]+)([\s\S]*)$/);if(!c)return o(e);const[,r,t,a]=c,n=t.startsWith("/"),d=n?t.slice(1):t,l=O(d)?"vcb__token_component":"vcb__token_tag";return`${o(r)}${o(n?"</":"<")}${s(l,o(d))}${M(String(a))}`},G=e=>{if(e.startsWith("<!--")&&e.endsWith("-->"))return s("vcb__token_comment",o(e));const c=e.startsWith("</"),r=e.endsWith("/>"),a=e.slice(c?2:1,e.length-(r?2:1)).match(/^([\w-]+)([\s\S]*)$/);if(!a)return o(e);const[,n,d]=a,l=O(n)?"vcb__token_component":"vcb__token_tag";return`${o(c?"</":"<")}${s(l,o(n))}${M(d)}${o(r?"/>":">")}`},J=e=>o(e).replaceAll(/"(?:[^"\\]|\\.)*"(?=\s*:)?/g,r=>s("vcb__token_string",r)).replaceAll(/\b(true|false|null)\b/g,r=>s("vcb__token_keyword",r)).replaceAll(/\b-?\d(?:[\d_]*\d)?(?:\.\d(?:[\d_]*\d)?)?(?:[eE][+-]?\d(?:[\d_]*\d)?)?\b/g,r=>s("vcb__token_number",r)),Q=(e,c)=>{for(let r=c-1;r>=0;r-=1){const t=e[r];if(!/\s/.test(t))return t}return""},P=(e,c)=>{for(let r=c;r<e.length;r+=1){const t=e[r];if(!/\s/.test(t))return t}return""},K=(e,c)=>{let r=c;for(;r>0&&/\s/.test(e[r-1]);)r-=1;return e.slice(0,r).match(/([A-Za-z_$][\w$]*)\s*$/)?.[1]??""},X=(e,c,r)=>{const t=Q(e,r),a=P(e,r+c.length),n=K(e,r),d=e.slice(0,r);return t==="."||/\?\.\s*$/.test(d)||a===":"&&["{",",",""].includes(t)?"vcb__token_property":a==="("?"vcb__token_function":/^[A-Z]/.test(c)||["import","from","new","class","extends"].includes(n)?"vcb__token_identifier":"vcb__token_variable"},T=e=>{const c=new RegExp(`(//.*$)|((["'\`])(?:\\\\.|(?!\\3).)*\\3)|\\b(const|let|var|function|return|if|else|for|while|class|new|import|export|from|await|async|try|catch|throw|true|false|null|undefined)\\b|(=>|\\?\\?|\\?|:|\\.|[{}()[\\],])|${I}|\\b[A-Za-z_$][\\w$]*\\b`,"g");let r=0,t="";for(const a of e.matchAll(c)){const n=a[0]??"",d=a.index??0;t+=o(e.slice(r,d)),a[1]?t+=s("vcb__token_comment",o(n)):a[2]?t+=n.startsWith("`")&&n.includes("${")?F(n):s("vcb__token_string",o(n)):a[4]?t+=s("vcb__token_keyword",o(n)):a[5]?t+=s("vcb__token_operator",o(n)):/^\d/.test(n)?t+=s("vcb__token_number",o(n)):t+=s(X(e,n,d),o(n)),r=d+n.length}return t+=o(e.slice(r)),t},Y=(e,c)=>{let r=null;for(let t=c+1;t<e.length;t+=1){const a=e[t];if(r){a===r&&e[t-1]!=="\\"&&(r=null);continue}if(a==='"'||a==="'"){r=a;continue}if(a===">")return t}return-1},w=e=>{if(!e.trim())return o(e);let c=0,r="";for(;c<e.length;){const t=e.indexOf("<",c);if(t===-1){r+=V(o(e.slice(c)));break}r+=V(o(e.slice(c,t)));const a=Y(e,t);if(a===-1){r+=o(e.slice(t));break}r+=G(e.slice(t,a+1)),c=a+1}return r},ee=e=>{const c=e.match(/^(\s*)(npm)(\s+)(run)(\s+)([^\s].*)$/);if(c){const[,l,b,v,u,m,f]=c;return`${o(l)}${s("vcb__token_keyword",o(b))}${o(v)}${s("vcb__token_function",o(u))}${o(m)}${s("vcb__token_variable",o(f))}`}const r=l=>{const b=/(\s+)|((["'])(?:\\.|(?!\3).)*\3)|(\$[A-Za-z_][A-Za-z0-9_]*)|(@[A-Za-z0-9._/-]+|[A-Za-z0-9._-]+\/[A-Za-z0-9._/@-]+)|(-{1,2}[A-Za-z][\w-]*)(?:=(\S+))?|([^\s]+)/g;let v=0,u="";for(const m of l.matchAll(b)){const f=m[0]??"",x=m.index??0;u+=o(l.slice(v,x)),m[1]?u+=o(f):m[2]?u+=s("vcb__token_string",o(f)):m[4]?u+=s("vcb__token_variable",o(f)):m[5]?u+=s("vcb__token_string",o(f)):m[6]?(u+=s("vcb__token_directive",o(m[6])),m[7]&&(u+=`${o("=")}${s(m[7].startsWith("@")||m[7].includes("/")?"vcb__token_string":"vcb__token_variable",o(m[7]))}`)):m[8]?u+=s("vcb__token_variable",o(f)):u+=o(f),v=x+f.length}return u+=o(l.slice(v)),u},t=e.match(/^(\s*)(npm|pnpm|yarn|bun)(\s+)(i|install|add|remove|rm|uninstall|create|dlx|exec|x)(\s+)(.+)$/);if(t){const[,l,b,v,u,m,f]=t;return`${o(l)}${s("vcb__token_keyword",o(b))}${o(v)}${s("vcb__token_function",o(u))}${o(m)}${r(f)}`}const a=/(#[^\n]*$)|((["'])(?:\\.|(?!\3).)*\3)|(\$[A-Za-z_][A-Za-z0-9_]*)|(@[A-Za-z0-9._/-]+)|(^\s*[A-Za-z][\w-]*\b)|(\s-[A-Za-z-]+\b|\s--[A-Za-z-]+\b)/g;let n=0,d="";for(const l of e.matchAll(a)){const b=l[0]??"",v=l.index??0;if(d+=o(e.slice(n,v)),l[1])d+=s("vcb__token_comment",o(b));else if(l[2])d+=s("vcb__token_string",o(b));else if(l[4])d+=s("vcb__token_variable",o(b));else if(l[5])d+=s("vcb__token_string",o(b));else if(l[6])d+=s("vcb__token_keyword",o(b.trimStart()));else if(l[7]){const u=b.match(/^\s*/)?.[0]??"";d+=`${o(u)}${s("vcb__token_directive",o(b.trimStart()))}`}else d+=o(b);n=v+b.length}return d+=o(e.slice(n)),d},D=e=>{const c=new RegExp(`(\\/\\*.*?\\*\\/)|((["'])(?:\\\\.|(?!\\3).)*\\3)|(#[0-9A-Fa-f]{3,8})|(@[A-Za-z-]+)|([A-Za-z_-][\\w-]*)(?=\\s*\\()|${R}|\\b[A-Za-z_-][\\w-]*\\b`,"g");let r=0,t="";for(const a of e.matchAll(c)){const n=a[0]??"",d=a.index??0;t+=o(e.slice(r,d)),a[1]?t+=s("vcb__token_comment",o(n)):a[2]?t+=s("vcb__token_string",o(n)):/^#[0-9A-Fa-f]{3,8}$/.test(n)?t+=s("vcb__token_number",o(n)):n.startsWith("@")?t+=s("vcb__token_keyword",o(n)):P(e,d+n.length)==="("?t+=s("vcb__token_function",o(n)):/^-?\d/.test(n)?t+=s("vcb__token_number",o(n)):t+=s("vcb__token_variable",o(n)),r=d+n.length}return t+=o(e.slice(r)),t},te=e=>{const c=e.match(/^(\s*)(\/\*.*\*\/)(\s*)$/);if(c)return`${o(c[1])}${s("vcb__token_comment",o(c[2]))}${o(c[3])}`;const r=e.match(/^(\s*)([^{}][^{}]*?)(\s*)(\{|\})\s*$/);if(r){const[,a,n,d,l]=r,b=n.trim(),v=b===":root"||b.startsWith(".")||b.startsWith("#")||/^[A-Za-z_-][\w-]*$/.test(b)?"vcb__token_selector":"vcb__token_variable";return`${o(a)}${s(v,o(b))}${o(d)}${o(l)}`}const t=e.match(/^(\s*)(--?[A-Za-z_][\w-]*|[A-Za-z_][\w-]*)(\s*:\s*)(.*)$/);if(t){const[,a,n,d,l]=t;return`${o(a)}${s("vcb__token_property",o(n))}${o(d)}${D(l)}`}return D(e)},H=(e,c,r=!0)=>{if(!r)return B(c);const t=e.toLowerCase();return t.includes("json")?J(c):t.includes("vue")||t.includes("html")?w(c):t.includes("js")||t.includes("ts")||t.includes("javascript")||t.includes("typescript")?T(c):t.includes("bash")||t.includes("shell")||t==="sh"?ee(c):t.includes("css")||t.includes("scss")||t.includes("sass")?te(c):B(c)},oe=(e,c)=>{const r=(e||"").replace(/\r\n/g,`
|
|
3
3
|
`).split(`
|
|
4
|
-
`);let t=!1,a=null,
|
|
5
|
-
`)},j=(e,
|
|
4
|
+
`);let t=!1,a=null,n=null;return r.map(d=>{const l=d;if(!c)return B(l);const b=o(l),v=b.trim();if(!v)return b;if(/^<script\b/i.test(v)){a="script";const f=v.includes(">");return t=!f,f?w(l):z(l)}if(/^<template\b/i.test(v)){a="template";const f=v.includes(">");return t=!f,f?w(l):z(l)}if(/^<style\b/i.test(v)){a="style";const f=v.includes(">");return t=!f,f?w(l):z(l)}if(/^<\/script>/i.test(v)||/^<\/template>/i.test(v)||/^<\/style>/i.test(v))return a=null,t=!1,w(l);const u=v.startsWith("<")&&!v.startsWith("</"),m=v.includes(">");if(u){const f=m?w(l):z(l);return t=!m,f}if(t){if(v===">"||v==="/>")return t=!1,n=null,b;if(n){const k=n,y=l.indexOf(n.quote);if(y===-1)return S(l,k.quote,k.directive,!1,!1);const A=l.slice(0,y),g=l.slice(y+1),_=o(g);return n=null,g.includes(">")&&(t=!1),`${S(A,k.quote,k.directive,!1,!0)}${_}`}const f=l.match(/^(\s+)([:@#]?[\w-]+(?::[\w-]+)?)(\s*=\s*)(["'])([\s\S]*)$/);if(f){const[,k,y,A,g,_]=f,$=L(y),p=_.indexOf(g),C=`${k}${s($?"vcb__token_directive":"vcb__token_attribute",y)}${o(A)}`;if(p===-1)return n={quote:g,directive:$},`${C}${S(_,g,$,!0,!1)}`;const me=_.slice(0,p),q=_.slice(p+1);return q.includes(">")&&(t=!1),`${C}${S(me,g,$,!0,!0)}${o(q)}`}const x=M(b);return m&&(t=!1),x}return a==="script"?T(l):w(l)}).join(`
|
|
5
|
+
`)},j=(e,c,r=!0)=>{const t=e.toLowerCase();return t.includes("vue")||t.includes("html")?oe(c,r):(c||"").replace(/\r\n/g,`
|
|
6
6
|
`).split(`
|
|
7
7
|
`).map(a=>H(e,a,r)).join(`
|
|
8
|
-
`)},re=["data-theme","aria-label"],
|
|
9
|
-
`)),
|
|
10
|
-
`):[""]),
|
|
11
|
-
`)),f=
|
|
8
|
+
`)},re=["data-theme","aria-label"],ce={key:0,class:"vcb__header"},ne={key:0,class:"vcb__meta"},ae={key:0,class:"vcb__filename"},le={class:"vcb__language"},ie={class:"vcb__actions"},se=["disabled"],de={key:0,class:"vcb__line-number"},ve=["innerHTML"],Z=i.defineComponent({name:"VcbCodeBlock",__name:"CodeBlock",props:{code:{default:""},language:{default:"plaintext"},filename:{default:""},showHeader:{type:Boolean,default:!0},showLineNumbers:{type:Boolean,default:!1},copyable:{type:Boolean,default:!0},copyLabel:{default:"Copy"},copiedLabel:{default:"Copied"},copiedDuration:{default:1200},languageLabel:{default:"Language"},disabled:{type:Boolean,default:!1},wrap:{type:Boolean,default:!1},highlight:{type:Boolean,default:!0},maxHeight:{default:""},ariaLabel:{default:"Code block"},theme:{default:"inherit"}},emits:["copy"],setup(e,{emit:c}){const r=e,t=c,a=i.ref(!1),n=i.ref(null),d=i.ref("light");let l=null,b=null;const v=i.computed(()=>r.code.replace(/\r\n/g,`
|
|
9
|
+
`)),u=i.computed(()=>v.value?v.value.split(`
|
|
10
|
+
`):[""]),m=i.computed(()=>j(r.language,v.value,r.highlight).split(`
|
|
11
|
+
`)),f=i.computed(()=>r.theme==="inherit"?d.value:r.theme),x=i.computed(()=>{if(r.maxHeight)return{maxHeight:r.maxHeight}}),k=async()=>{if(!r.disabled)try{typeof navigator<"u"&&navigator.clipboard?.writeText&&await navigator.clipboard.writeText(v.value)}finally{t("copy",{text:v.value}),a.value=!0,l&&clearTimeout(l),l=setTimeout(()=>{a.value=!1,l=null},r.copiedDuration)}},y=_=>_==="dark"?"dark":"light",A=(_,$)=>{let p=_?.parentElement??null;for(;p;){if(p.hasAttribute($))return y(p.getAttribute($));p=p.parentElement}return null},g=()=>{r.theme==="inherit"&&(d.value=A(n.value,"data-theme")??A(n.value,"data-vf-theme")??"light")};return i.onMounted(()=>{g(),!(typeof MutationObserver>"u"||!n.value)&&(b=new MutationObserver(()=>{g()}),b.observe(document.documentElement,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["data-theme","data-vf-theme"]}))}),i.onBeforeUnmount(()=>{l&&(clearTimeout(l),l=null),b&&(b.disconnect(),b=null)}),(_,$)=>(i.openBlock(),i.createElementBlock("section",{ref_key:"rootElement",ref:n,class:i.normalizeClass(["vcb",{vcb_disabled:e.disabled}]),"data-theme":f.value,"aria-label":e.ariaLabel},[e.showHeader||_.$slots.actions?(i.openBlock(),i.createElementBlock("header",ce,[e.showHeader?(i.openBlock(),i.createElementBlock("div",ne,[e.filename?(i.openBlock(),i.createElementBlock("span",ae,i.toDisplayString(e.filename),1)):i.createCommentVNode("",!0),i.createElementVNode("span",le,i.toDisplayString(e.languageLabel)+": "+i.toDisplayString(e.language),1)])):i.createCommentVNode("",!0),i.createElementVNode("div",ie,[i.renderSlot(_.$slots,"actions"),e.copyable?(i.openBlock(),i.createElementBlock("button",{key:0,type:"button",class:"vcb__copy",disabled:e.disabled,onClick:k},i.toDisplayString(a.value?e.copiedLabel:e.copyLabel),9,se)):i.createCommentVNode("",!0)])])):i.createCommentVNode("",!0),i.createElementVNode("pre",{class:i.normalizeClass(["vcb__pre",{vcb__pre_wrap:e.wrap}]),style:i.normalizeStyle(x.value)},[i.createElementVNode("code",null,[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(u.value,(p,C)=>(i.openBlock(),i.createElementBlock("span",{key:C,class:"vcb__line"},[e.showLineNumbers?(i.openBlock(),i.createElementBlock("span",de,i.toDisplayString(C+1),1)):i.createCommentVNode("",!0),i.createElementVNode("span",{class:"vcb__line-content",innerHTML:m.value[C]??""},null,8,ve)]))),128))])],6)],10,re))}}),be=["plaintext","text","txt","js","javascript","ts","typescript","vue","html","json","bash","shell","sh","css","scss","sass"],fe={install(e){e.component("CodeBlock",Z),e.component("VueCodeBlock",Z)}};h.CodeBlock=Z,h.SUPPORTED_CODE_BLOCK_LANGUAGES=be,h.default=fe,h.escapeCodeHtml=o,h.highlightCodeBlock=j,h.highlightCodeLine=H,Object.defineProperties(h,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codemonster-ru/vue-codeblock",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "Standalone Vue code block component with syntax highlighting and light/dark theming.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Kirill Kolesnikov",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"access": "public"
|
|
49
49
|
},
|
|
50
50
|
"scripts": {
|
|
51
|
-
"dev": "vite",
|
|
51
|
+
"dev": "vite --force",
|
|
52
52
|
"build": "vite build",
|
|
53
53
|
"format": "prettier --write .",
|
|
54
54
|
"typecheck": "vue-tsc --noEmit",
|