@elmethis/core 1.0.0-alpha.174 → 1.0.0-alpha.177
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/code/ElmCodeBlock.vue2.mjs +42 -23
- package/dist/components/code/ElmCodeBlock.vue3.mjs +14 -7
- package/dist/components/code/ElmShikiHighlighter.vue.d.ts +9 -1
- package/dist/components/code/ElmShikiHighlighter.vue2.mjs +8 -4
- package/dist/components/headings/ElmFragmentIdentifier.vue2.mjs +6 -3
- package/dist/components/inline/ElmInlineText.vue3.mjs +3 -3
- package/package.json +8 -8
|
@@ -5,6 +5,7 @@ import ElmInlineText from "../inline/ElmInlineText.vue.mjs";
|
|
|
5
5
|
import { useClipboard, useIntersectionObserver } from "@vueuse/core";
|
|
6
6
|
import ElmTooltip from "../containments/ElmTooltip.vue.mjs";
|
|
7
7
|
import ElmBlockFallback from "../fallback/ElmBlockFallback.vue.mjs";
|
|
8
|
+
import ElmDotLoadingIcon from "../icon/ElmDotLoadingIcon.vue.mjs";
|
|
8
9
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
9
10
|
__name: "ElmCodeBlock",
|
|
10
11
|
props: {
|
|
@@ -19,6 +20,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
19
20
|
loader: () => import("./ElmShikiHighlighter.vue.mjs"),
|
|
20
21
|
loadingComponent: ElmBlockFallback
|
|
21
22
|
});
|
|
23
|
+
const isRendered = ref(false);
|
|
22
24
|
const { copy, copied } = useClipboard({ source: props.code });
|
|
23
25
|
const target = ref(null);
|
|
24
26
|
const targetIsVisible = ref(false);
|
|
@@ -49,33 +51,50 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
49
51
|
text: _ctx.caption ?? _ctx.language
|
|
50
52
|
}, null, 8, ["text"])
|
|
51
53
|
], 2),
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
54
|
+
createElementVNode("div", {
|
|
55
|
+
class: normalizeClass(_ctx.$style.header__right)
|
|
56
|
+
}, [
|
|
57
|
+
createVNode(ElmTooltip, null, {
|
|
58
|
+
original: withCtx(() => [
|
|
59
|
+
createVNode(unref(Icon), {
|
|
60
|
+
class: normalizeClass(_ctx.$style["copy-icon"]),
|
|
61
|
+
onClick: _cache[0] || (_cache[0] = () => {
|
|
62
|
+
unref(copy)(_ctx.code);
|
|
63
|
+
}),
|
|
64
|
+
icon: unref(copied) ? "mdi:clipboard-check-multiple-outline" : "mdi:clipboard-multiple-outline"
|
|
65
|
+
}, null, 8, ["class", "icon"])
|
|
66
|
+
]),
|
|
67
|
+
tooltip: withCtx(() => [
|
|
68
|
+
createElementVNode("div", null, [
|
|
69
|
+
createVNode(ElmInlineText, {
|
|
70
|
+
text: unref(copied) ? "Copied to Clipboard!" : "Copy to Clipboard"
|
|
71
|
+
}, null, 8, ["text"])
|
|
72
|
+
])
|
|
73
|
+
]),
|
|
74
|
+
_: 1
|
|
75
|
+
})
|
|
76
|
+
], 2)
|
|
71
77
|
], 2),
|
|
72
78
|
createElementVNode("div", {
|
|
73
79
|
class: normalizeClass(_ctx.$style.code)
|
|
74
80
|
}, [
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
},
|
|
81
|
+
createElementVNode("div", {
|
|
82
|
+
class: normalizeClass(_ctx.$style["code-body"]),
|
|
83
|
+
style: normalizeStyle({ opacity: isRendered.value ? 1 : 0 })
|
|
84
|
+
}, [
|
|
85
|
+
createVNode(unref(AsyncElmShikiHighlighter), {
|
|
86
|
+
modelValue: isRendered.value,
|
|
87
|
+
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRendered.value = $event),
|
|
88
|
+
code: _ctx.code,
|
|
89
|
+
language: _ctx.language
|
|
90
|
+
}, null, 8, ["modelValue", "code", "language"])
|
|
91
|
+
], 6),
|
|
92
|
+
createElementVNode("div", {
|
|
93
|
+
style: normalizeStyle({ opacity: !isRendered.value ? 1 : 0 }),
|
|
94
|
+
class: normalizeClass(_ctx.$style.fallback)
|
|
95
|
+
}, [
|
|
96
|
+
createVNode(ElmDotLoadingIcon, { size: "48px" })
|
|
97
|
+
], 6)
|
|
79
98
|
], 2)
|
|
80
99
|
], 6);
|
|
81
100
|
};
|
|
@@ -3,28 +3,35 @@
|
|
|
3
3
|
try {
|
|
4
4
|
if (typeof document != "undefined") {
|
|
5
5
|
var elementStyle = document.createElement("style");
|
|
6
|
-
elementStyle.appendChild(document.createTextNode(".
|
|
6
|
+
elementStyle.appendChild(document.createTextNode("._wrapper_vcziv_1{margin-block:var(--margin-block);opacity:var(--opacity);display:flex;flex-direction:column;border-radius:.25rem;transition:background-color .4s,opacity .8s;background-color:#fff6;box-shadow:0 0 .25rem #0000001a}[data-theme=dark] ._wrapper_vcziv_1{background-color:#ffffff0d;box-shadow:0 0 .25rem #0000004d}._header_vcziv_16{box-sizing:border-box;padding:.25rem .5rem .5rem;margin:.5rem;display:flex;flex-direction:row;justify-content:space-between;font-family:Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace;border-bottom:solid 1px rgba(0,0,0,.2)}[data-theme=dark] ._header_vcziv_16{border-color:#fff3}._header__left_vcziv_30{display:flex;flex-direction:row;align-items:center;gap:.5rem}._copy-icon_vcziv_37{box-sizing:border-box;padding:.125rem;width:26px;height:26px;border-radius:.125rem;cursor:pointer;transition:background-color .2s;color:#000000b3}[data-theme=dark] ._copy-icon_vcziv_37{color:#ffffffb3}._copy-icon_vcziv_37:hover{background-color:#0000001a}[data-theme=dark] ._copy-icon_vcziv_37:hover{background-color:#ffffff1a}._header__right_vcziv_57{display:flex;flex-direction:row;align-items:center;gap:.5rem}._code_vcziv_64{position:relative;padding:.25rem 1rem 1rem;overflow-x:auto;scrollbar-width:thin;scrollbar-color:rgba(105,135,184,.3) rgba(105,135,184,.15)}._code-body_vcziv_72{transition:opacity .2s}._fallback_vcziv_76{position:absolute;top:0;left:0;height:100%;width:100%;box-sizing:border-box;padding:auto;display:flex;justify-content:center;align-items:center;transition:opacity .2s}"));
|
|
7
7
|
document.head.appendChild(elementStyle);
|
|
8
8
|
}
|
|
9
9
|
} catch (e) {
|
|
10
10
|
console.error("vite-plugin-css-injected-by-js", e);
|
|
11
11
|
}
|
|
12
12
|
})();
|
|
13
|
-
const wrapper = "
|
|
14
|
-
const header = "
|
|
15
|
-
const header__left = "
|
|
16
|
-
const
|
|
13
|
+
const wrapper = "_wrapper_vcziv_1";
|
|
14
|
+
const header = "_header_vcziv_16";
|
|
15
|
+
const header__left = "_header__left_vcziv_30";
|
|
16
|
+
const header__right = "_header__right_vcziv_57";
|
|
17
|
+
const code = "_code_vcziv_64";
|
|
18
|
+
const fallback = "_fallback_vcziv_76";
|
|
17
19
|
const style0 = {
|
|
18
20
|
wrapper,
|
|
19
21
|
header,
|
|
20
22
|
header__left,
|
|
21
|
-
"copy-icon": "_copy-
|
|
22
|
-
|
|
23
|
+
"copy-icon": "_copy-icon_vcziv_37",
|
|
24
|
+
header__right,
|
|
25
|
+
code,
|
|
26
|
+
"code-body": "_code-body_vcziv_72",
|
|
27
|
+
fallback
|
|
23
28
|
};
|
|
24
29
|
export {
|
|
25
30
|
code,
|
|
26
31
|
style0 as default,
|
|
32
|
+
fallback,
|
|
27
33
|
header,
|
|
28
34
|
header__left,
|
|
35
|
+
header__right,
|
|
29
36
|
wrapper
|
|
30
37
|
};
|
|
@@ -8,7 +8,15 @@ export interface ElmShikiHighlighterProps {
|
|
|
8
8
|
*/
|
|
9
9
|
language?: string;
|
|
10
10
|
}
|
|
11
|
-
|
|
11
|
+
type __VLS_Props = ElmShikiHighlighterProps;
|
|
12
|
+
type __VLS_PublicProps = {
|
|
13
|
+
modelValue?: boolean;
|
|
14
|
+
} & __VLS_Props;
|
|
15
|
+
declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
16
|
+
"update:modelValue": (value: boolean) => any;
|
|
17
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
18
|
+
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
|
19
|
+
}>, {
|
|
12
20
|
language: string;
|
|
13
21
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
14
22
|
export default _default;
|
|
@@ -1,15 +1,19 @@
|
|
|
1
|
-
import { defineComponent, ref, onMounted, onServerPrefetch, createElementBlock, openBlock, normalizeClass, createElementVNode } from "vue";
|
|
1
|
+
import { defineComponent, mergeModels, useModel, ref, onMounted, onServerPrefetch, createElementBlock, openBlock, normalizeClass, createElementVNode } from "vue";
|
|
2
2
|
import { getHighlighterSingleton } from "./shikiInstance.mjs";
|
|
3
3
|
const _hoisted_1 = ["innerHTML"];
|
|
4
4
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
5
5
|
__name: "ElmShikiHighlighter",
|
|
6
|
-
props: {
|
|
6
|
+
props: /* @__PURE__ */ mergeModels({
|
|
7
7
|
code: {},
|
|
8
8
|
language: { default: "txt" }
|
|
9
|
-
},
|
|
9
|
+
}, {
|
|
10
|
+
"modelValue": { type: Boolean, ...{ default: false } },
|
|
11
|
+
"modelModifiers": {}
|
|
12
|
+
}),
|
|
13
|
+
emits: ["update:modelValue"],
|
|
10
14
|
setup(__props) {
|
|
11
15
|
const props = __props;
|
|
12
|
-
const isRendered =
|
|
16
|
+
const isRendered = useModel(__props, "modelValue");
|
|
13
17
|
const html = ref(`<pre>${props.code}</pre>`);
|
|
14
18
|
const render = async () => {
|
|
15
19
|
if (!isRendered.value) {
|
|
@@ -25,9 +25,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
25
25
|
const { copy } = useClipboard();
|
|
26
26
|
onMounted(() => {
|
|
27
27
|
nextTick(() => {
|
|
28
|
-
const
|
|
29
|
-
if (
|
|
30
|
-
element.
|
|
28
|
+
const hash = window.location.hash;
|
|
29
|
+
if (hash && hash.startsWith("#")) {
|
|
30
|
+
const element = document.querySelector(hash);
|
|
31
|
+
if (element) {
|
|
32
|
+
element.scrollIntoView({ behavior: "smooth" });
|
|
33
|
+
}
|
|
31
34
|
}
|
|
32
35
|
});
|
|
33
36
|
});
|
|
@@ -3,15 +3,15 @@
|
|
|
3
3
|
try {
|
|
4
4
|
if (typeof document != "undefined") {
|
|
5
5
|
var elementStyle = document.createElement("style");
|
|
6
|
-
elementStyle.appendChild(document.createTextNode(
|
|
6
|
+
elementStyle.appendChild(document.createTextNode('._text_8qsji_1{padding:0;margin:0;color:#000000b3;color:var(--color, rgba(0, 0, 0, .7));font-size:inherit;font-size:var(--font-size, inherit);line-height:1rem;line-height:var(--font-size, 1rem);background-color:var(--background-color)}._text_8qsji_1::-moz-selection{color:#ffffffb3;background-color:#000000b3;background-color:var(--color, rgba(0, 0, 0, .7))}._text_8qsji_1::selection{color:#ffffffb3;background-color:#000000b3;background-color:var(--color, rgba(0, 0, 0, .7))}[data-theme=dark] ._text_8qsji_1{color:#ffffffb3;color:var(--color, rgba(255, 255, 255, .7))}[data-theme=dark] ._text_8qsji_1::-moz-selection{color:#000000b3;background-color:#ffffffb3;background-color:var(--color, rgba(255, 255, 255, .7))}[data-theme=dark] ._text_8qsji_1::selection{color:#000000b3;background-color:#ffffffb3;background-color:var(--color, rgba(255, 255, 255, .7))}._code_8qsji_21{margin-inline:.25rem;padding:2px .5em;font-size:calc(1rem - 2px);border-radius:.125rem;background-color:#00000013;font-family:"Source Code Pro" monospace}'));
|
|
7
7
|
document.head.appendChild(elementStyle);
|
|
8
8
|
}
|
|
9
9
|
} catch (e) {
|
|
10
10
|
console.error("vite-plugin-css-injected-by-js", e);
|
|
11
11
|
}
|
|
12
12
|
})();
|
|
13
|
-
const text = "
|
|
14
|
-
const code = "
|
|
13
|
+
const text = "_text_8qsji_1";
|
|
14
|
+
const code = "_code_8qsji_21";
|
|
15
15
|
const style0 = {
|
|
16
16
|
text,
|
|
17
17
|
code
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elmethis/core",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.177",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,12 +36,12 @@
|
|
|
36
36
|
"@chromatic-com/storybook": "^3.2.6",
|
|
37
37
|
"@notionhq/client": "^2.3.0",
|
|
38
38
|
"@storybook/addon-essentials": "^8.6.12",
|
|
39
|
-
"@storybook/addon-interactions": "^8.6.
|
|
39
|
+
"@storybook/addon-interactions": "^8.6.12",
|
|
40
40
|
"@storybook/addon-links": "^8.6.12",
|
|
41
|
-
"@storybook/addon-onboarding": "^8.6.
|
|
42
|
-
"@storybook/blocks": "^8.6.
|
|
43
|
-
"@storybook/test": "^8.6.
|
|
44
|
-
"@storybook/vue3": "^8.6.
|
|
41
|
+
"@storybook/addon-onboarding": "^8.6.12",
|
|
42
|
+
"@storybook/blocks": "^8.6.12",
|
|
43
|
+
"@storybook/test": "^8.6.12",
|
|
44
|
+
"@storybook/vue3": "^8.6.12",
|
|
45
45
|
"@storybook/vue3-vite": "^8.6.12",
|
|
46
46
|
"@types/json-schema": "^7.0.15",
|
|
47
47
|
"@types/katex": "^0.16.7",
|
|
@@ -53,9 +53,9 @@
|
|
|
53
53
|
"openapi-types": "^12.1.3",
|
|
54
54
|
"postcss": "^8.5.3",
|
|
55
55
|
"postcss-preset-env": "^10.1.5",
|
|
56
|
-
"sass": "^1.86.
|
|
56
|
+
"sass": "^1.86.3",
|
|
57
57
|
"storybook": "^8.6.12",
|
|
58
|
-
"vite": "^6.2.
|
|
58
|
+
"vite": "^6.2.5",
|
|
59
59
|
"vite-plugin-css-injected-by-js": "^3.5.2",
|
|
60
60
|
"vite-plugin-dts": "^4.5.3",
|
|
61
61
|
"vue-tsc": "^2.2.8"
|