@hejiayue/x-markdown-test 0.0.1-beta.151 → 0.0.1-beta.152
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/style.css +438 -1
- package/dist/types/config.d.ts +33 -0
- package/dist/types/hooks/useMermaid.d.ts +1 -1
- package/dist/types/index.d.ts +2 -0
- package/dist/x-markdown.cjs.js +35 -1
- package/dist/x-markdown.cjs.js.map +1 -1
- package/dist/x-markdown.cjs10.js +52 -1
- package/dist/x-markdown.cjs10.js.map +1 -1
- package/dist/x-markdown.cjs11.js +57 -1
- package/dist/x-markdown.cjs11.js.map +1 -1
- package/dist/x-markdown.cjs12.js +18 -0
- package/dist/x-markdown.cjs12.js.map +1 -0
- package/dist/x-markdown.cjs14.js +92 -1
- package/dist/x-markdown.cjs14.js.map +1 -1
- package/dist/x-markdown.cjs15.js +36 -1
- package/dist/x-markdown.cjs15.js.map +1 -1
- package/dist/x-markdown.cjs16.js +9 -1
- package/dist/x-markdown.cjs16.js.map +1 -1
- package/dist/x-markdown.cjs17.js +10 -1
- package/dist/x-markdown.cjs17.js.map +1 -1
- package/dist/x-markdown.cjs18.js +11 -1
- package/dist/x-markdown.cjs18.js.map +1 -1
- package/dist/x-markdown.cjs19.js +11 -1
- package/dist/x-markdown.cjs19.js.map +1 -1
- package/dist/x-markdown.cjs2.js +86 -1
- package/dist/x-markdown.cjs2.js.map +1 -1
- package/dist/x-markdown.cjs20.js +211 -0
- package/dist/x-markdown.cjs20.js.map +1 -0
- package/dist/x-markdown.cjs22.js +13 -1
- package/dist/x-markdown.cjs22.js.map +1 -1
- package/dist/x-markdown.cjs23.js +79 -0
- package/dist/x-markdown.cjs23.js.map +1 -0
- package/dist/x-markdown.cjs25.js +409 -0
- package/dist/x-markdown.cjs25.js.map +1 -0
- package/dist/x-markdown.cjs27.js +199 -1
- package/dist/x-markdown.cjs27.js.map +1 -1
- package/dist/x-markdown.cjs28.js +135 -1
- package/dist/x-markdown.cjs28.js.map +1 -1
- package/dist/x-markdown.cjs3.js +97 -1
- package/dist/x-markdown.cjs3.js.map +1 -1
- package/dist/x-markdown.cjs30.js +11 -1
- package/dist/x-markdown.cjs30.js.map +1 -1
- package/dist/x-markdown.cjs31.js +122 -1
- package/dist/x-markdown.cjs31.js.map +1 -1
- package/dist/x-markdown.cjs32.js +11 -0
- package/dist/x-markdown.cjs32.js.map +1 -0
- package/dist/x-markdown.cjs33.js +128 -1
- package/dist/x-markdown.cjs33.js.map +1 -1
- package/dist/x-markdown.cjs4.js +153 -1
- package/dist/x-markdown.cjs4.js.map +1 -1
- package/dist/x-markdown.cjs5.js +43 -1
- package/dist/x-markdown.cjs5.js.map +1 -1
- package/dist/x-markdown.cjs6.js +27 -1
- package/dist/x-markdown.cjs6.js.map +1 -1
- package/dist/x-markdown.cjs7.js +310 -1
- package/dist/x-markdown.cjs7.js.map +1 -1
- package/dist/x-markdown.cjs8.js +30 -1
- package/dist/x-markdown.cjs8.js.map +1 -1
- package/dist/x-markdown.cjs9.js +435 -1
- package/dist/x-markdown.cjs9.js.map +1 -1
- package/dist/x-markdown.es.js +11 -28
- package/dist/x-markdown.es10.js +10 -10
- package/dist/x-markdown.es10.js.map +1 -1
- package/dist/x-markdown.es11.js +4 -5
- package/dist/x-markdown.es11.js.map +1 -1
- package/dist/x-markdown.es12.js +12 -0
- package/dist/x-markdown.es12.js.map +1 -0
- package/dist/x-markdown.es14.js +85 -29
- package/dist/x-markdown.es14.js.map +1 -1
- package/dist/x-markdown.es15.js +32 -4
- package/dist/x-markdown.es15.js.map +1 -1
- package/dist/x-markdown.es16.js +5 -5
- package/dist/x-markdown.es16.js.map +1 -1
- package/dist/x-markdown.es17.js +5 -6
- package/dist/x-markdown.es17.js.map +1 -1
- package/dist/x-markdown.es18.js +6 -6
- package/dist/x-markdown.es18.js.map +1 -1
- package/dist/x-markdown.es19.js +7 -206
- package/dist/x-markdown.es19.js.map +1 -1
- package/dist/x-markdown.es2.js +6 -7
- package/dist/x-markdown.es2.js.map +1 -1
- package/dist/x-markdown.es20.js +207 -0
- package/dist/x-markdown.es20.js.map +1 -0
- package/dist/x-markdown.es22.js +7 -72
- package/dist/x-markdown.es22.js.map +1 -1
- package/dist/x-markdown.es23.js +75 -0
- package/dist/x-markdown.es23.js.map +1 -0
- package/dist/{x-markdown.es24.js → x-markdown.es25.js} +12 -10
- package/dist/x-markdown.es25.js.map +1 -0
- package/dist/x-markdown.es27.js +182 -7
- package/dist/x-markdown.es27.js.map +1 -1
- package/dist/x-markdown.es28.js +7 -8
- package/dist/x-markdown.es28.js.map +1 -1
- package/dist/x-markdown.es3.js +7 -8
- package/dist/x-markdown.es3.js.map +1 -1
- package/dist/x-markdown.es30.js +7 -77
- package/dist/x-markdown.es30.js.map +1 -1
- package/dist/x-markdown.es31.js +112 -124
- package/dist/x-markdown.es31.js.map +1 -1
- package/dist/x-markdown.es32.js +7 -0
- package/dist/x-markdown.es32.js.map +1 -0
- package/dist/x-markdown.es33.js +124 -5
- package/dist/x-markdown.es33.js.map +1 -1
- package/dist/x-markdown.es4.js +5 -7
- package/dist/x-markdown.es4.js.map +1 -1
- package/dist/x-markdown.es5.js +9 -10
- package/dist/x-markdown.es5.js.map +1 -1
- package/dist/x-markdown.es6.js +5 -5
- package/dist/x-markdown.es6.js.map +1 -1
- package/dist/x-markdown.es7.js +61 -74
- package/dist/x-markdown.es7.js.map +1 -1
- package/dist/x-markdown.es8.js +4 -5
- package/dist/x-markdown.es8.js.map +1 -1
- package/dist/x-markdown.es9.js +22 -14
- package/dist/x-markdown.es9.js.map +1 -1
- package/package.json +3 -14
- package/dist/types/vite-plugin.d.ts +0 -29
- package/dist/vite-plugin.cjs +0 -128
- package/dist/vite-plugin.cjs.map +0 -1
- package/dist/vite-plugin.js +0 -128
- package/dist/vite-plugin.js.map +0 -1
- package/dist/x-markdown.cjs13.js +0 -2
- package/dist/x-markdown.cjs13.js.map +0 -1
- package/dist/x-markdown.cjs21.js +0 -2
- package/dist/x-markdown.cjs21.js.map +0 -1
- package/dist/x-markdown.cjs24.js +0 -2
- package/dist/x-markdown.cjs24.js.map +0 -1
- package/dist/x-markdown.cjs26.js +0 -2
- package/dist/x-markdown.cjs26.js.map +0 -1
- package/dist/x-markdown.es13.js +0 -89
- package/dist/x-markdown.es13.js.map +0 -1
- package/dist/x-markdown.es21.js +0 -11
- package/dist/x-markdown.es21.js.map +0 -1
- package/dist/x-markdown.es24.js.map +0 -1
- package/dist/x-markdown.es26.js +0 -160
- package/dist/x-markdown.es26.js.map +0 -1
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
|
|
4
|
+
|
|
5
|
+
const vue = require('vue');
|
|
6
|
+
const index = require('./x-markdown.cjs27.js');
|
|
7
|
+
const SyntaxCodeBlock = require('./x-markdown.cjs30.js');
|
|
8
|
+
|
|
9
|
+
const _hoisted_1 = { class: "x-md-code-header" };
|
|
10
|
+
const _hoisted_2 = { class: "x-md-code-header__left" };
|
|
11
|
+
const _hoisted_3 = ["title"];
|
|
12
|
+
const _hoisted_4 = { class: "x-md-code-lang" };
|
|
13
|
+
const _hoisted_5 = { class: "x-md-code-header__right" };
|
|
14
|
+
const _hoisted_6 = ["title", "disabled", "onClick"];
|
|
15
|
+
const _hoisted_7 = {
|
|
16
|
+
key: 0,
|
|
17
|
+
class: "x-md-copy-icon",
|
|
18
|
+
width: "16",
|
|
19
|
+
height: "16",
|
|
20
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
21
|
+
viewBox: "0 0 1024 1024"
|
|
22
|
+
};
|
|
23
|
+
const _hoisted_8 = {
|
|
24
|
+
key: 1,
|
|
25
|
+
class: "x-md-copy-icon",
|
|
26
|
+
width: "16",
|
|
27
|
+
height: "16",
|
|
28
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
29
|
+
viewBox: "0 0 1024 1024"
|
|
30
|
+
};
|
|
31
|
+
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
32
|
+
...{
|
|
33
|
+
name: "CodeBlock"
|
|
34
|
+
},
|
|
35
|
+
__name: "index",
|
|
36
|
+
props: {
|
|
37
|
+
code: {},
|
|
38
|
+
language: {},
|
|
39
|
+
lightTheme: { default: "vitesse-light" },
|
|
40
|
+
darkTheme: { default: "vitesse-dark" },
|
|
41
|
+
isDark: { type: Boolean, default: false },
|
|
42
|
+
colorReplacements: {},
|
|
43
|
+
codeMaxHeight: {},
|
|
44
|
+
showCodeBlockHeader: { type: Boolean, default: true },
|
|
45
|
+
enableAnimate: { type: Boolean, default: false },
|
|
46
|
+
codeBlockActions: { default: void 0 },
|
|
47
|
+
stickyCodeBlockHeader: { type: Boolean, default: true }
|
|
48
|
+
},
|
|
49
|
+
setup(__props, { expose: __expose }) {
|
|
50
|
+
const { copy, copied } = index.useClipboard({ copiedDuring: 2e3 });
|
|
51
|
+
const collapsed = vue.ref(false);
|
|
52
|
+
const syntaxCodeBlockRef = vue.ref(null);
|
|
53
|
+
const toggleCollapse = () => {
|
|
54
|
+
collapsed.value = !collapsed.value;
|
|
55
|
+
};
|
|
56
|
+
const props = __props;
|
|
57
|
+
const code = vue.computed(() => props.code.trim());
|
|
58
|
+
const language = vue.computed(() => props.language || "text");
|
|
59
|
+
const normalizedActions = vue.computed(() => {
|
|
60
|
+
return props.codeBlockActions || [];
|
|
61
|
+
});
|
|
62
|
+
const filteredActions = vue.computed(() => {
|
|
63
|
+
return normalizedActions.value.filter((action) => {
|
|
64
|
+
if (!action.show) return true;
|
|
65
|
+
return action.show(slotProps.value);
|
|
66
|
+
});
|
|
67
|
+
});
|
|
68
|
+
const slotProps = vue.computed(() => ({
|
|
69
|
+
language: language.value,
|
|
70
|
+
code: code.value,
|
|
71
|
+
copy,
|
|
72
|
+
copied: copied.value,
|
|
73
|
+
collapsed: collapsed.value,
|
|
74
|
+
toggleCollapse
|
|
75
|
+
}));
|
|
76
|
+
function renderActionIcon(action) {
|
|
77
|
+
if (!action.icon) return null;
|
|
78
|
+
if (typeof action.icon === "string") {
|
|
79
|
+
return vue.h("span", {
|
|
80
|
+
class: "x-md-action-icon",
|
|
81
|
+
innerHTML: action.icon
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
if (typeof action.icon === "function") {
|
|
85
|
+
try {
|
|
86
|
+
const result = action.icon(slotProps.value);
|
|
87
|
+
if (result && typeof result === "object" && "__v_isVNode" in result) {
|
|
88
|
+
return result;
|
|
89
|
+
}
|
|
90
|
+
} catch {
|
|
91
|
+
}
|
|
92
|
+
return vue.h(action.icon);
|
|
93
|
+
}
|
|
94
|
+
return vue.h(action.icon);
|
|
95
|
+
}
|
|
96
|
+
function handleActionClick(action) {
|
|
97
|
+
if (action.disabled) return;
|
|
98
|
+
action.onClick?.(slotProps.value);
|
|
99
|
+
}
|
|
100
|
+
__expose({
|
|
101
|
+
copy,
|
|
102
|
+
copied,
|
|
103
|
+
collapsed,
|
|
104
|
+
toggleCollapse,
|
|
105
|
+
syntaxCodeBlockRef
|
|
106
|
+
});
|
|
107
|
+
return (_ctx, _cache) => {
|
|
108
|
+
return vue.openBlock(), vue.createElementBlock("div", {
|
|
109
|
+
class: vue.normalizeClass(["x-md-code-block", { "x-md-code-block--dark": props.isDark }])
|
|
110
|
+
}, [
|
|
111
|
+
__props.showCodeBlockHeader ? (vue.openBlock(), vue.createElementBlock("div", {
|
|
112
|
+
key: 0,
|
|
113
|
+
class: vue.normalizeClass(["x-md-code-header-wrapper", [{ "x-md-code-header-wrapper--sticky": props.stickyCodeBlockHeader }, { "x-md-code-header-wrapper--collapsed": collapsed.value }]])
|
|
114
|
+
}, [
|
|
115
|
+
vue.createElementVNode("div", _hoisted_1, [
|
|
116
|
+
vue.renderSlot(_ctx.$slots, "codeHeader", {
|
|
117
|
+
language: language.value,
|
|
118
|
+
code: code.value,
|
|
119
|
+
copy: vue.unref(copy),
|
|
120
|
+
copied: vue.unref(copied),
|
|
121
|
+
collapsed: collapsed.value,
|
|
122
|
+
toggleCollapse
|
|
123
|
+
}, () => [
|
|
124
|
+
vue.createElementVNode("div", _hoisted_2, [
|
|
125
|
+
vue.createElementVNode("button", {
|
|
126
|
+
class: vue.normalizeClass(["x-md-collapse-btn", { "x-md-collapse-btn--collapsed": collapsed.value }]),
|
|
127
|
+
onClick: toggleCollapse,
|
|
128
|
+
title: collapsed.value ? "展开代码" : "折叠代码"
|
|
129
|
+
}, [..._cache[1] || (_cache[1] = [
|
|
130
|
+
vue.createElementVNode("svg", {
|
|
131
|
+
class: "x-md-collapse-icon",
|
|
132
|
+
viewBox: "0 0 24 24",
|
|
133
|
+
width: "14",
|
|
134
|
+
height: "14",
|
|
135
|
+
fill: "none",
|
|
136
|
+
stroke: "currentColor",
|
|
137
|
+
"stroke-width": "2",
|
|
138
|
+
"stroke-linecap": "round",
|
|
139
|
+
"stroke-linejoin": "round"
|
|
140
|
+
}, [
|
|
141
|
+
vue.createElementVNode("polyline", { points: "6 9 12 15 18 9" })
|
|
142
|
+
], -1)
|
|
143
|
+
])], 10, _hoisted_3),
|
|
144
|
+
vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(language.value), 1)
|
|
145
|
+
]),
|
|
146
|
+
vue.createElementVNode("div", _hoisted_5, [
|
|
147
|
+
vue.renderSlot(_ctx.$slots, "codeActions", {
|
|
148
|
+
code: code.value,
|
|
149
|
+
copy: vue.unref(copy),
|
|
150
|
+
copied: vue.unref(copied)
|
|
151
|
+
}, () => [
|
|
152
|
+
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filteredActions.value, (action) => {
|
|
153
|
+
return vue.openBlock(), vue.createElementBlock("button", {
|
|
154
|
+
key: action.key,
|
|
155
|
+
class: vue.normalizeClass(["x-md-action-btn", [action.class, { "x-md-action-btn--disabled": action.disabled }]]),
|
|
156
|
+
style: vue.normalizeStyle(action.style),
|
|
157
|
+
title: action.title,
|
|
158
|
+
disabled: action.disabled,
|
|
159
|
+
onClick: ($event) => handleActionClick(action)
|
|
160
|
+
}, [
|
|
161
|
+
action.icon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderActionIcon(action)), { key: 0 })) : vue.createCommentVNode("", true)
|
|
162
|
+
], 14, _hoisted_6);
|
|
163
|
+
}), 128)),
|
|
164
|
+
vue.createElementVNode("button", {
|
|
165
|
+
class: vue.normalizeClass(["x-md-copy-btn", { "x-md-copy-btn--copied": vue.unref(copied) }]),
|
|
166
|
+
onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(copy)(code.value))
|
|
167
|
+
}, [
|
|
168
|
+
vue.unref(copied) ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_7, [..._cache[2] || (_cache[2] = [
|
|
169
|
+
vue.createElementVNode("path", {
|
|
170
|
+
fill: "currentColor",
|
|
171
|
+
d: "M406.656 706.944 195.84 496.256a32 32 0 1 0-45.248 45.248l256 256 512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z"
|
|
172
|
+
}, null, -1)
|
|
173
|
+
])])) : (vue.openBlock(), vue.createElementBlock("svg", _hoisted_8, [..._cache[3] || (_cache[3] = [
|
|
174
|
+
vue.createElementVNode("path", {
|
|
175
|
+
fill: "currentColor",
|
|
176
|
+
d: "M768 832a128 128 0 0 1-128 128H192A128 128 0 0 1 64 832V384a128 128 0 0 1 128-128v64a64 64 0 0 0-64 64v448a64 64 0 0 0 64 64h448a64 64 0 0 0 64-64z"
|
|
177
|
+
}, null, -1),
|
|
178
|
+
vue.createElementVNode("path", {
|
|
179
|
+
fill: "currentColor",
|
|
180
|
+
d: "M384 128a64 64 0 0 0-64 64v448a64 64 0 0 0 64 64h448a64 64 0 0 0 64-64V192a64 64 0 0 0-64-64zm0-64h448a128 128 0 0 1 128 128v448a128 128 0 0 1-128 128H384a128 128 0 0 1-128-128V192A128 128 0 0 1 384 64"
|
|
181
|
+
}, null, -1)
|
|
182
|
+
])]))
|
|
183
|
+
], 2)
|
|
184
|
+
], true)
|
|
185
|
+
])
|
|
186
|
+
], true)
|
|
187
|
+
])
|
|
188
|
+
], 2)) : vue.createCommentVNode("", true),
|
|
189
|
+
vue.createElementVNode("div", {
|
|
190
|
+
class: vue.normalizeClass(["x-md-code-body", { "x-md-code-body--collapsed": collapsed.value }])
|
|
191
|
+
}, [
|
|
192
|
+
vue.createVNode(SyntaxCodeBlock.default, {
|
|
193
|
+
ref_key: "syntaxCodeBlockRef",
|
|
194
|
+
ref: syntaxCodeBlockRef,
|
|
195
|
+
code: code.value,
|
|
196
|
+
language: language.value,
|
|
197
|
+
"light-theme": props.lightTheme,
|
|
198
|
+
"dark-theme": props.darkTheme,
|
|
199
|
+
"is-dark": props.isDark,
|
|
200
|
+
"color-replacements": props.colorReplacements,
|
|
201
|
+
"code-max-height": props.codeMaxHeight,
|
|
202
|
+
"enable-animate": props.enableAnimate
|
|
203
|
+
}, null, 8, ["code", "language", "light-theme", "dark-theme", "is-dark", "color-replacements", "code-max-height", "enable-animate"])
|
|
204
|
+
], 2)
|
|
205
|
+
], 2);
|
|
206
|
+
};
|
|
207
|
+
}
|
|
208
|
+
});
|
|
209
|
+
|
|
210
|
+
exports.default = _sfc_main;
|
|
211
|
+
//# sourceMappingURL=x-markdown.cjs20.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"x-markdown.cjs20.js","sources":["../src/components/CodeBlock/index.vue"],"sourcesContent":["<template>\r\n <div class=\"x-md-code-block\" :class=\"{ 'x-md-code-block--dark': props.isDark }\">\r\n <!-- 头部区域:支持完全自定义或默认渲染 -->\r\n <div\r\n v-if=\"showCodeBlockHeader\"\r\n class=\"x-md-code-header-wrapper\"\r\n :class=\"[{'x-md-code-header-wrapper--sticky': props.stickyCodeBlockHeader }, { 'x-md-code-header-wrapper--collapsed': collapsed }]\"\r\n >\r\n <div class=\"x-md-code-header\">\r\n <slot\r\n name=\"codeHeader\"\r\n :language=\"language\"\r\n :code=\"code\"\r\n :copy=\"copy\"\r\n :copied=\"copied\"\r\n :collapsed=\"collapsed\"\r\n :toggleCollapse=\"toggleCollapse\"\r\n >\r\n <div class=\"x-md-code-header__left\">\r\n <button\r\n class=\"x-md-collapse-btn\"\r\n :class=\"{ 'x-md-collapse-btn--collapsed': collapsed }\"\r\n @click=\"toggleCollapse\"\r\n :title=\"collapsed ? '展开代码' : '折叠代码'\"\r\n >\r\n <svg\r\n class=\"x-md-collapse-icon\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"14\"\r\n height=\"14\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <polyline points=\"6 9 12 15 18 9\"></polyline>\r\n </svg>\r\n </button>\r\n <span class=\"x-md-code-lang\">{{ language }}</span>\r\n </div>\r\n <div class=\"x-md-code-header__right\">\r\n <slot name=\"codeActions\" :code=\"code\" :copy=\"copy\" :copied=\"copied\">\r\n <button\r\n v-for=\"action in filteredActions\"\r\n :key=\"action.key\"\r\n class=\"x-md-action-btn\"\r\n :class=\"[action.class, { 'x-md-action-btn--disabled': action.disabled }]\"\r\n :style=\"action.style\"\r\n :title=\"action.title\"\r\n :disabled=\"action.disabled\"\r\n @click=\"handleActionClick(action)\"\r\n >\r\n <component :is=\"renderActionIcon(action)\" v-if=\"action.icon\" />\r\n </button>\r\n <button class=\"x-md-copy-btn\" :class=\"{ 'x-md-copy-btn--copied': copied }\" @click=\"copy(code)\">\r\n <svg\r\n v-if=\"copied\"\r\n class=\"x-md-copy-icon\"\r\n width=\"16\"\r\n height=\"16\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 1024 1024\"\r\n >\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M406.656 706.944 195.84 496.256a32 32 0 1 0-45.248 45.248l256 256 512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z\"\r\n />\r\n </svg>\r\n <svg\r\n v-else\r\n class=\"x-md-copy-icon\"\r\n width=\"16\"\r\n height=\"16\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 1024 1024\"\r\n >\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M768 832a128 128 0 0 1-128 128H192A128 128 0 0 1 64 832V384a128 128 0 0 1 128-128v64a64 64 0 0 0-64 64v448a64 64 0 0 0 64 64h448a64 64 0 0 0 64-64z\"\r\n />\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M384 128a64 64 0 0 0-64 64v448a64 64 0 0 0 64 64h448a64 64 0 0 0 64-64V192a64 64 0 0 0-64-64zm0-64h448a128 128 0 0 1 128 128v448a128 128 0 0 1-128 128H384a128 128 0 0 1-128-128V192A128 128 0 0 1 384 64\"\r\n />\r\n </svg>\r\n </button>\r\n </slot>\r\n </div>\r\n </slot>\r\n </div>\r\n </div>\r\n <div class=\"x-md-code-body\" :class=\"{ 'x-md-code-body--collapsed': collapsed }\">\r\n <SyntaxCodeBlock\r\n ref=\"syntaxCodeBlockRef\"\r\n :code=\"code\"\r\n :language=\"language\"\r\n :light-theme=\"props.lightTheme\"\r\n :dark-theme=\"props.darkTheme\"\r\n :is-dark=\"props.isDark\"\r\n :color-replacements=\"props.colorReplacements\"\r\n :code-max-height=\"props.codeMaxHeight\"\r\n :enable-animate=\"props.enableAnimate\"\r\n />\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, ref, h, type VNode } from 'vue'\r\nimport { useClipboard } from '@vueuse/core'\r\nimport type { CodeBlockProps, CodeBlockAction, CodeBlockSlotProps } from './types'\r\nimport SyntaxCodeBlock from './SyntaxCodeBlock.vue'\r\n\r\ndefineOptions({\r\n name: 'CodeBlock',\r\n})\r\n\r\nconst { copy, copied } = useClipboard({ copiedDuring: 2000 })\r\n\r\nconst collapsed = ref(false)\r\n\r\nconst syntaxCodeBlockRef = ref<InstanceType<typeof SyntaxCodeBlock> | null>(null)\r\n\r\nconst toggleCollapse = () => {\r\n collapsed.value = !collapsed.value\r\n}\r\n\r\nconst props = withDefaults(defineProps<CodeBlockProps>(), {\r\n lightTheme: 'vitesse-light',\r\n darkTheme: 'vitesse-dark',\r\n isDark: false,\r\n showCodeBlockHeader: true,\r\n enableAnimate: false,\r\n codeBlockActions: undefined,\r\n stickyCodeBlockHeader: true,\r\n})\r\n\r\nconst code = computed(() => props.code.trim())\r\n\r\nconst language = computed(() => props.language || 'text')\r\n\r\nconst normalizedActions = computed<CodeBlockAction[]>(() => {\r\n return props.codeBlockActions || []\r\n})\r\n\r\nconst filteredActions = computed<CodeBlockAction[]>(() => {\r\n return normalizedActions.value.filter((action) => {\r\n if (!action.show) return true\r\n return action.show(slotProps.value)\r\n })\r\n})\r\n\r\nconst slotProps = computed<CodeBlockSlotProps>(() => ({\r\n language: language.value,\r\n code: code.value,\r\n copy,\r\n copied: copied.value,\r\n collapsed: collapsed.value,\r\n toggleCollapse,\r\n}))\r\n\r\nfunction renderActionIcon(action: CodeBlockAction): VNode | null {\r\n if (!action.icon) return null\r\n\r\n if (typeof action.icon === 'string') {\r\n return h('span', {\r\n class: 'x-md-action-icon',\r\n innerHTML: action.icon,\r\n })\r\n }\r\n\r\n if (typeof action.icon === 'function') {\r\n try {\r\n const result = (action.icon as (props: CodeBlockSlotProps) => VNode)(slotProps.value)\r\n if (result && typeof result === 'object' && '__v_isVNode' in result) {\r\n return result\r\n }\r\n } catch {\r\n // ignore\r\n }\r\n return h(action.icon as any)\r\n }\r\n\r\n return h(action.icon as any)\r\n}\r\n\r\nfunction handleActionClick(action: CodeBlockAction) {\r\n if (action.disabled) return\r\n action.onClick?.(slotProps.value)\r\n}\r\n\r\ndefineExpose({\r\n copy,\r\n copied,\r\n collapsed,\r\n toggleCollapse,\r\n syntaxCodeBlockRef,\r\n})\r\n</script>\r\n\r\n<style scoped>\r\n.x-md-code-block {\r\n border-radius: 8px;\r\n overflow: hidden;\r\n font-size: 0;\r\n background: rgba(0, 0, 0, 0.03);\r\n}\r\n\r\n.x-md-code-block.x-md-code-block--dark {\r\n background: rgba(255, 255, 255, 0.13);\r\n}\r\n\r\n.x-md-code-header-wrapper--sticky {\r\n background: #fff;\r\n position: sticky;\r\n top: 0;\r\n}\r\n\r\n.x-md-code-block.x-md-code-block--dark .x-md-code-header-wrapper--sticky {\r\n background: #1a1a1a;\r\n}\r\n\r\n.x-md-code-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 8px 16px;\r\n background: rgba(0, 0, 0, 0.05);\r\n color: #333;\r\n}\r\n\r\n.x-md-code-block .x-md-code-header-wrapper--sticky .x-md-code-header{\r\n background: rgba(235, 235, 235);\r\n border-radius: 8px 8px 0 0;\r\n}\r\n\r\n.x-md-code-block:has(.x-md-code-header-wrapper--sticky) {\r\n overflow: visible;\r\n}\r\n\r\n.x-md-code-block.x-md-code-block--dark .x-md-code-header {\r\n background: rgba(0, 0, 0, 0.25);\r\n color: #fff;\r\n}\r\n\r\n.x-md-code-block.x-md-code-block--dark .x-md-code-header-wrapper--sticky .x-md-code-header {\r\n background: rgba(44, 44, 44);\r\n}\r\n\r\n.x-md-code-block .x-md-code-header-wrapper--collapsed .x-md-code-header {\r\n border-radius: 8px;\r\n}\r\n\r\n.x-md-code-header__left,\r\n.x-md-code-header__right {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.x-md-code-lang {\r\n font-size: 12px;\r\n font-weight: 500;\r\n opacity: 0.6;\r\n text-transform: lowercase;\r\n}\r\n\r\n.x-md-copy-btn {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 28px;\r\n height: 28px;\r\n padding: 0;\r\n border: none;\r\n border-radius: 4px;\r\n background: transparent;\r\n color: inherit;\r\n cursor: pointer;\r\n opacity: 0.7;\r\n transition: all 0.2s ease;\r\n}\r\n\r\n.x-md-copy-btn:hover {\r\n opacity: 1;\r\n background: rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.x-md-code-block.x-md-code-block--dark .x-md-copy-btn:hover {\r\n background: rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.x-md-copy-btn.x-md-copy-btn--copied {\r\n opacity: 1;\r\n color: #22c55e;\r\n}\r\n\r\n.x-md-copy-icon {\r\n flex-shrink: 0;\r\n}\r\n\r\n.x-md-action-btn {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 28px;\r\n height: 28px;\r\n padding: 0;\r\n border: none;\r\n border-radius: 4px;\r\n background: transparent;\r\n color: inherit;\r\n cursor: pointer;\r\n opacity: 0.7;\r\n transition: all 0.2s ease;\r\n}\r\n\r\n.x-md-action-btn:hover {\r\n opacity: 1;\r\n background: rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.x-md-code-block.x-md-code-block--dark .x-md-action-btn:hover {\r\n background: rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.x-md-action-btn.x-md-action-btn--disabled {\r\n opacity: 0.3;\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n.x-md-action-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.x-md-action-icon :deep(svg) {\r\n width: 16px;\r\n height: 16px;\r\n flex-shrink: 0;\r\n}\r\n\r\n.x-md-collapse-btn {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 20px;\r\n height: 20px;\r\n padding: 0;\r\n border: none;\r\n border-radius: 4px;\r\n background: transparent;\r\n color: inherit;\r\n cursor: pointer;\r\n opacity: 0.5;\r\n transition: all 0.2s ease;\r\n}\r\n\r\n.x-md-collapse-btn:hover {\r\n opacity: 1;\r\n background: rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.x-md-code-block.x-md-code-block--dark .x-md-collapse-btn:hover {\r\n background: rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.x-md-collapse-icon {\r\n transition: transform 0.2s ease;\r\n}\r\n\r\n.x-md-collapse-btn--collapsed .x-md-collapse-icon {\r\n transform: rotate(-90deg);\r\n}\r\n\r\n.x-md-code-body {\r\n overflow: hidden;\r\n transition:\r\n max-height 0.3s ease,\r\n opacity 0.2s ease;\r\n}\r\n\r\n.x-md-code-body--collapsed {\r\n max-height: 0 !important;\r\n opacity: 0;\r\n}\r\n</style>"],"names":["useClipboard","ref","computed","h","_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot","_unref","_toDisplayString","_Fragment","_renderList","_normalizeStyle","_createBlock","_resolveDynamicComponent","_openBlock","_createVNode","SyntaxCodeBlock"],"mappings":"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"}
|
package/dist/x-markdown.cjs22.js
CHANGED
|
@@ -1,2 +1,14 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
|
|
4
|
+
|
|
5
|
+
const _export_sfc = (sfc, props) => {
|
|
6
|
+
const target = sfc.__vccOpts || sfc;
|
|
7
|
+
for (const [key, val] of props) {
|
|
8
|
+
target[key] = val;
|
|
9
|
+
}
|
|
10
|
+
return target;
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
exports.default = _export_sfc;
|
|
2
14
|
//# sourceMappingURL=x-markdown.cjs22.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"x-markdown.cjs22.js","sources":[
|
|
1
|
+
{"version":3,"file":"x-markdown.cjs22.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
|
|
4
|
+
|
|
5
|
+
const vue = require('vue');
|
|
6
|
+
const useHighlight = require('./x-markdown.cjs7.js');
|
|
7
|
+
|
|
8
|
+
const SHIKI_CORE_PKG = "@shikijs/core";
|
|
9
|
+
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
10
|
+
__name: "index",
|
|
11
|
+
props: {
|
|
12
|
+
raw: { default: () => ({}) },
|
|
13
|
+
isDark: { type: Boolean, default: false },
|
|
14
|
+
shikiTheme: { default: () => ["vitesse-light", "vitesse-dark"] },
|
|
15
|
+
enableAnimate: { type: Boolean, default: false }
|
|
16
|
+
},
|
|
17
|
+
setup(__props) {
|
|
18
|
+
let getTokenStyleObjectFn = null;
|
|
19
|
+
vue.onMounted(async () => {
|
|
20
|
+
const mod = await Function(`return import('${SHIKI_CORE_PKG}')`)().catch(() => {
|
|
21
|
+
return { getTokenStyleObject: () => ({}) };
|
|
22
|
+
});
|
|
23
|
+
getTokenStyleObjectFn = mod.getTokenStyleObject;
|
|
24
|
+
});
|
|
25
|
+
const props = __props;
|
|
26
|
+
const content = vue.computed(() => props.raw?.content ?? "");
|
|
27
|
+
const language = vue.computed(() => props.raw?.language || "ts");
|
|
28
|
+
const actualTheme = vue.computed(() => props.isDark ? props.shikiTheme[1] : props.shikiTheme[0]);
|
|
29
|
+
const { lines, preStyle } = useHighlight.useHighlight(content, {
|
|
30
|
+
language,
|
|
31
|
+
theme: actualTheme
|
|
32
|
+
});
|
|
33
|
+
const flatTokens = vue.computed(() => lines.value.flat());
|
|
34
|
+
const codeStyle = vue.computed(() => preStyle.value || {});
|
|
35
|
+
const normalizeStyleKeys = (style) => {
|
|
36
|
+
const normalized = {};
|
|
37
|
+
Object.entries(style).forEach(([key, value]) => {
|
|
38
|
+
const camelKey = key.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
|
|
39
|
+
normalized[camelKey] = value;
|
|
40
|
+
});
|
|
41
|
+
return normalized;
|
|
42
|
+
};
|
|
43
|
+
const getTokenStyle = (token) => {
|
|
44
|
+
if (token.htmlStyle) {
|
|
45
|
+
return normalizeStyleKeys(token.htmlStyle);
|
|
46
|
+
}
|
|
47
|
+
if (!getTokenStyleObjectFn) {
|
|
48
|
+
return {};
|
|
49
|
+
}
|
|
50
|
+
const rawStyle = getTokenStyleObjectFn(token);
|
|
51
|
+
return normalizeStyleKeys(rawStyle);
|
|
52
|
+
};
|
|
53
|
+
return (_ctx, _cache) => {
|
|
54
|
+
return vue.openBlock(), vue.createElementBlock("div", {
|
|
55
|
+
class: vue.normalizeClass(["x-md-inline-code", {
|
|
56
|
+
"x-md-inline-code--dark": props.isDark,
|
|
57
|
+
"x-md-animated-word": props.enableAnimate
|
|
58
|
+
}])
|
|
59
|
+
}, [
|
|
60
|
+
vue.createElementVNode("code", {
|
|
61
|
+
style: vue.normalizeStyle(codeStyle.value)
|
|
62
|
+
}, [
|
|
63
|
+
!flatTokens.value.length ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
|
|
64
|
+
vue.createTextVNode(vue.toDisplayString(content.value), 1)
|
|
65
|
+
], 64)) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(flatTokens.value, (token, i) => {
|
|
66
|
+
return vue.openBlock(), vue.createElementBlock("span", {
|
|
67
|
+
key: i,
|
|
68
|
+
style: vue.normalizeStyle(getTokenStyle(token)),
|
|
69
|
+
class: vue.normalizeClass({ "x-md-animated-word": props.enableAnimate })
|
|
70
|
+
}, vue.toDisplayString(token.content), 7);
|
|
71
|
+
}), 128))
|
|
72
|
+
], 4)
|
|
73
|
+
], 2);
|
|
74
|
+
};
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
exports.default = _sfc_main;
|
|
79
|
+
//# sourceMappingURL=x-markdown.cjs23.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"x-markdown.cjs23.js","sources":["../src/components/CodeLine/index.vue"],"sourcesContent":["<template>\r\n <!-- 行内代码容器 - 支持深浅色主题和语法高亮 -->\r\n <div class=\"x-md-inline-code\" :class=\"{\r\n 'x-md-inline-code--dark': props.isDark,\r\n 'x-md-animated-word': props.enableAnimate,\r\n }\">\r\n <code :style=\"codeStyle\">\r\n <!-- 无高亮时显示纯文本 -->\r\n <template v-if=\"!flatTokens.length\">{{ content }}</template>\r\n<!-- 有高亮时渲染 token -->\r\n<template v-else>\r\n <span\r\n v-for=\"(token, i) in flatTokens\"\r\n :key=\"i\"\r\n :style=\"getTokenStyle(token)\"\r\n :class=\"{ 'x-md-animated-word': props.enableAnimate }\"\r\n >{{ token.content }}</span\r\n >\r\n </template>\r\n</code>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, onMounted, type CSSProperties } from 'vue'\r\nimport { useHighlight, type HighlightToken } from '../../hooks/useHighlight'\r\nimport type { CodeLineProps } from './types'\r\n\r\nconst SHIKI_CORE_PKG = '@shikijs/core'\r\n\r\nlet getTokenStyleObjectFn: any = null\r\n\r\nonMounted(async () => {\r\n const mod = await (Function(`return import('${SHIKI_CORE_PKG}')`)())\r\n .catch(() => {\r\n return { getTokenStyleObject: () => ({}) }\r\n })\r\n getTokenStyleObjectFn = mod.getTokenStyleObject\r\n})\r\n\r\nconst props = withDefaults(defineProps<CodeLineProps>(), {\r\n raw: () => ({}),\r\n isDark: false,\r\n shikiTheme: () => ['vitesse-light', 'vitesse-dark'],\r\n enableAnimate: false,\r\n})\r\n\r\nconst content = computed(() => props.raw?.content ?? '')\r\nconst language = computed(() => props.raw?.language || 'ts')\r\nconst actualTheme = computed(() => (props.isDark ? props.shikiTheme[1] : props.shikiTheme[0]))\r\n\r\nconst { lines, preStyle } = useHighlight(content, {\r\n language,\r\n theme: actualTheme,\r\n})\r\n\r\nconst flatTokens = computed(() => lines.value.flat())\r\nconst codeStyle = computed<CSSProperties>(() => preStyle.value || {})\r\n\r\nconst normalizeStyleKeys = (style: Record<string, string | number>): CSSProperties => {\r\n const normalized: CSSProperties = {}\r\n Object.entries(style).forEach(([key, value]) => {\r\n const camelKey = key.replace(/-([a-z])/g, (_, char) => char.toUpperCase())\r\n ; (normalized as Record<string, string | number>)[camelKey] = value\r\n })\r\n return normalized\r\n}\r\n\r\nconst getTokenStyle = (token: HighlightToken): CSSProperties => {\r\n if (token.htmlStyle) {\r\n return normalizeStyleKeys(token.htmlStyle)\r\n }\r\n\r\n if (!getTokenStyleObjectFn) {\r\n return {}\r\n }\r\n\r\n const rawStyle = getTokenStyleObjectFn(token)\r\n return normalizeStyleKeys(rawStyle)\r\n}\r\n</script>\r\n<style scoped>\r\n.x-md-inline-code {\r\n display: inline-block;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n font-size: 14px;\r\n background: rgba(0, 0, 0, 0.03);\r\n vertical-align: sub;\r\n}\r\n\r\n.x-md-inline-code.x-md-inline-code--dark {\r\n background: rgba(255, 255, 255, 0.13);\r\n}\r\n\r\n.x-md-inline-code code {\r\n background: transparent !important;\r\n}\r\n</style>\r\n"],"names":["onMounted","computed","useHighlight","_createElementBlock","_createElementVNode","_Fragment","_openBlock","_renderList","_normalizeStyle","_normalizeClass","_toDisplayString"],"mappings":"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"}
|