@shwfed/nuxt 0.10.1 → 0.10.2
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/module.json +1 -1
- package/dist/runtime/components/markdown.d.vue.ts +25 -0
- package/dist/runtime/components/markdown.vue +42 -0
- package/dist/runtime/components/markdown.vue.d.ts +25 -0
- package/dist/runtime/components/ui/markdown/Markdown.d.vue.ts +25 -0
- package/dist/runtime/components/ui/markdown/Markdown.vue +128 -0
- package/dist/runtime/components/ui/markdown/Markdown.vue.d.ts +25 -0
- package/dist/runtime/components/ui/markdown/schema.d.ts +26 -0
- package/dist/runtime/components/ui/markdown/schema.js +8 -0
- package/dist/runtime/components/ui/markdown-configurator/MarkdownConfiguratorDialog.d.vue.ts +27 -0
- package/dist/runtime/components/ui/markdown-configurator/MarkdownConfiguratorDialog.vue +288 -0
- package/dist/runtime/components/ui/markdown-configurator/MarkdownConfiguratorDialog.vue.d.ts +27 -0
- package/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { Effect } from 'effect';
|
|
2
|
+
import type { MarkdownConfigInput } from './ui/markdown/Markdown.vue.js';
|
|
3
|
+
export { MarkdownConfigC, MarkdownStyleC } from './ui/markdown/Markdown.vue.js';
|
|
4
|
+
export type { MarkdownConfig, MarkdownConfigInput } from './ui/markdown/Markdown.vue.js';
|
|
5
|
+
declare const _default: typeof __VLS_export;
|
|
6
|
+
export default _default;
|
|
7
|
+
declare const __VLS_export: import("vue").DefineComponent<{
|
|
8
|
+
config?: MarkdownConfigInput | Effect.Effect<MarkdownConfigInput | undefined>;
|
|
9
|
+
context?: Record<string, unknown>;
|
|
10
|
+
}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
11
|
+
"update:config": (args_0: Readonly<{
|
|
12
|
+
locale?: import("../utils/coders.js").LocaleValue;
|
|
13
|
+
inline?: boolean;
|
|
14
|
+
style?: string;
|
|
15
|
+
}>) => any;
|
|
16
|
+
}, string, import("vue").PublicProps, Readonly<{
|
|
17
|
+
config?: MarkdownConfigInput | Effect.Effect<MarkdownConfigInput | undefined>;
|
|
18
|
+
context?: Record<string, unknown>;
|
|
19
|
+
}> & Readonly<{
|
|
20
|
+
"onUpdate:config"?: ((args_0: Readonly<{
|
|
21
|
+
locale?: import("../utils/coders.js").LocaleValue;
|
|
22
|
+
inline?: boolean;
|
|
23
|
+
style?: string;
|
|
24
|
+
}>) => any) | undefined;
|
|
25
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { Effect } from "effect";
|
|
3
|
+
import { computed } from "vue";
|
|
4
|
+
import UiMarkdown from "./ui/markdown/Markdown.vue";
|
|
5
|
+
defineOptions({
|
|
6
|
+
inheritAttrs: false
|
|
7
|
+
});
|
|
8
|
+
const props = defineProps({
|
|
9
|
+
config: { type: null, required: false },
|
|
10
|
+
context: { type: Object, required: false }
|
|
11
|
+
});
|
|
12
|
+
const emit = defineEmits(["update:config"]);
|
|
13
|
+
const defaultConfig = {};
|
|
14
|
+
function isMarkdownConfigEffect(value) {
|
|
15
|
+
return typeof value === "object" && value !== null && "pipe" in value && typeof value.pipe === "function";
|
|
16
|
+
}
|
|
17
|
+
const config = computed(() => {
|
|
18
|
+
if (!props.config) {
|
|
19
|
+
return Effect.succeed(defaultConfig);
|
|
20
|
+
}
|
|
21
|
+
if (isMarkdownConfigEffect(props.config)) {
|
|
22
|
+
return props.config.pipe(Effect.map((config2) => config2 ?? defaultConfig));
|
|
23
|
+
}
|
|
24
|
+
return Effect.succeed(props.config);
|
|
25
|
+
});
|
|
26
|
+
function handleConfigUpdate(config2) {
|
|
27
|
+
emit("update:config", config2);
|
|
28
|
+
}
|
|
29
|
+
</script>
|
|
30
|
+
|
|
31
|
+
<script>
|
|
32
|
+
export { MarkdownConfigC, MarkdownStyleC } from "./ui/markdown/Markdown.vue";
|
|
33
|
+
</script>
|
|
34
|
+
|
|
35
|
+
<template>
|
|
36
|
+
<UiMarkdown
|
|
37
|
+
v-bind="$attrs"
|
|
38
|
+
:config="config"
|
|
39
|
+
:context="props.context"
|
|
40
|
+
@update:config="handleConfigUpdate"
|
|
41
|
+
/>
|
|
42
|
+
</template>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { Effect } from 'effect';
|
|
2
|
+
import type { MarkdownConfigInput } from './ui/markdown/Markdown.vue.js';
|
|
3
|
+
export { MarkdownConfigC, MarkdownStyleC } from './ui/markdown/Markdown.vue.js';
|
|
4
|
+
export type { MarkdownConfig, MarkdownConfigInput } from './ui/markdown/Markdown.vue.js';
|
|
5
|
+
declare const _default: typeof __VLS_export;
|
|
6
|
+
export default _default;
|
|
7
|
+
declare const __VLS_export: import("vue").DefineComponent<{
|
|
8
|
+
config?: MarkdownConfigInput | Effect.Effect<MarkdownConfigInput | undefined>;
|
|
9
|
+
context?: Record<string, unknown>;
|
|
10
|
+
}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
11
|
+
"update:config": (args_0: Readonly<{
|
|
12
|
+
locale?: import("../utils/coders.js").LocaleValue;
|
|
13
|
+
inline?: boolean;
|
|
14
|
+
style?: string;
|
|
15
|
+
}>) => any;
|
|
16
|
+
}, string, import("vue").PublicProps, Readonly<{
|
|
17
|
+
config?: MarkdownConfigInput | Effect.Effect<MarkdownConfigInput | undefined>;
|
|
18
|
+
context?: Record<string, unknown>;
|
|
19
|
+
}> & Readonly<{
|
|
20
|
+
"onUpdate:config"?: ((args_0: Readonly<{
|
|
21
|
+
locale?: import("../utils/coders.js").LocaleValue;
|
|
22
|
+
inline?: boolean;
|
|
23
|
+
style?: string;
|
|
24
|
+
}>) => any) | undefined;
|
|
25
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { Effect } from 'effect';
|
|
2
|
+
import { type MarkdownConfigInput } from './schema.js';
|
|
3
|
+
export { MarkdownConfigC, MarkdownStyleC } from './schema.js';
|
|
4
|
+
export type { MarkdownConfig, MarkdownConfigInput } from './schema.js';
|
|
5
|
+
declare const _default: typeof __VLS_export;
|
|
6
|
+
export default _default;
|
|
7
|
+
declare const __VLS_export: import("vue").DefineComponent<{
|
|
8
|
+
config: Effect.Effect<MarkdownConfigInput | undefined>;
|
|
9
|
+
context?: Record<string, unknown>;
|
|
10
|
+
}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
11
|
+
"update:config": (args_0: Readonly<{
|
|
12
|
+
locale?: import("../../../utils/coders.js").LocaleValue;
|
|
13
|
+
inline?: boolean;
|
|
14
|
+
style?: string;
|
|
15
|
+
}>) => any;
|
|
16
|
+
}, string, import("vue").PublicProps, Readonly<{
|
|
17
|
+
config: Effect.Effect<MarkdownConfigInput | undefined>;
|
|
18
|
+
context?: Record<string, unknown>;
|
|
19
|
+
}> & Readonly<{
|
|
20
|
+
"onUpdate:config"?: ((args_0: Readonly<{
|
|
21
|
+
locale?: import("../../../utils/coders.js").LocaleValue;
|
|
22
|
+
inline?: boolean;
|
|
23
|
+
style?: string;
|
|
24
|
+
}>) => any) | undefined;
|
|
25
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { useNuxtApp } from "#app";
|
|
3
|
+
import { useCheating } from "#imports";
|
|
4
|
+
import { Icon } from "@iconify/vue";
|
|
5
|
+
import { computedAsync } from "@vueuse/core";
|
|
6
|
+
import { Effect } from "effect";
|
|
7
|
+
import { computed, ref, watch } from "vue";
|
|
8
|
+
import { useI18n } from "vue-i18n";
|
|
9
|
+
import { getLocalizedText } from "../../../utils/coders";
|
|
10
|
+
import { Button } from "../button";
|
|
11
|
+
import { Skeleton } from "../skeleton";
|
|
12
|
+
import MarkdownConfiguratorDialog from "../markdown-configurator/MarkdownConfiguratorDialog.vue";
|
|
13
|
+
import { MarkdownConfigC } from "./schema";
|
|
14
|
+
const defaultConfig = {};
|
|
15
|
+
const props = defineProps({
|
|
16
|
+
config: { type: null, required: true },
|
|
17
|
+
context: { type: Object, required: false }
|
|
18
|
+
});
|
|
19
|
+
const emit = defineEmits(["update:config"]);
|
|
20
|
+
const resolvedConfig = computedAsync(async () => MarkdownConfigC.parse(await props.config.pipe(Effect.runPromise) ?? defaultConfig));
|
|
21
|
+
const displayConfig = ref(defaultConfig);
|
|
22
|
+
const { $dsl, $md } = useNuxtApp();
|
|
23
|
+
const { t, locale } = useI18n();
|
|
24
|
+
const isCheating = useCheating();
|
|
25
|
+
const isConfiguratorOpen = ref(false);
|
|
26
|
+
function normalizeStyle(value) {
|
|
27
|
+
const style = {};
|
|
28
|
+
if (!value || typeof value !== "object" || Array.isArray(value)) {
|
|
29
|
+
return style;
|
|
30
|
+
}
|
|
31
|
+
for (const [key, entry] of Object.entries(value)) {
|
|
32
|
+
if (typeof entry === "string" || typeof entry === "number") {
|
|
33
|
+
Reflect.set(style, key, entry);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
return style;
|
|
37
|
+
}
|
|
38
|
+
const renderedStyle = computed(() => {
|
|
39
|
+
if (!displayConfig.value.style) {
|
|
40
|
+
return {};
|
|
41
|
+
}
|
|
42
|
+
try {
|
|
43
|
+
return normalizeStyle($dsl.evaluate`${displayConfig.value.style}`(props.context ?? {}));
|
|
44
|
+
} catch {
|
|
45
|
+
return {};
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
const markdownSource = computed(() => getLocalizedText(displayConfig.value.locale, locale.value) ?? "");
|
|
49
|
+
const renderedMarkdown = computed(() => {
|
|
50
|
+
if (markdownSource.value.trim().length === 0) {
|
|
51
|
+
return "";
|
|
52
|
+
}
|
|
53
|
+
if (displayConfig.value.inline) {
|
|
54
|
+
return $md.inline`${markdownSource.value}`(props.context);
|
|
55
|
+
}
|
|
56
|
+
return $md.block`${markdownSource.value}`(props.context);
|
|
57
|
+
});
|
|
58
|
+
function handleConfiguratorConfirm(nextConfig) {
|
|
59
|
+
displayConfig.value = nextConfig;
|
|
60
|
+
emit("update:config", nextConfig);
|
|
61
|
+
}
|
|
62
|
+
watch(resolvedConfig, (value) => {
|
|
63
|
+
if (!value) {
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
displayConfig.value = value;
|
|
67
|
+
}, { immediate: true });
|
|
68
|
+
</script>
|
|
69
|
+
|
|
70
|
+
<script>
|
|
71
|
+
export { MarkdownConfigC, MarkdownStyleC } from "./schema";
|
|
72
|
+
</script>
|
|
73
|
+
|
|
74
|
+
<template>
|
|
75
|
+
<div
|
|
76
|
+
:class="[
|
|
77
|
+
'relative p-1 -m-1 border border-dashed',
|
|
78
|
+
isCheating ? 'border-(--primary)/20 rounded hover:border-(--primary)/40 transition-colors duration-150 group cursor-pointer' : 'border-transparent'
|
|
79
|
+
]"
|
|
80
|
+
:style="renderedStyle"
|
|
81
|
+
>
|
|
82
|
+
<Button
|
|
83
|
+
v-if="isCheating"
|
|
84
|
+
data-slot="markdown-configurator-trigger"
|
|
85
|
+
variant="ghost"
|
|
86
|
+
size="sm"
|
|
87
|
+
type="button"
|
|
88
|
+
class="absolute right-3 top-3 z-20 bg-white/90 shadow-xs backdrop-blur-sm hover:bg-white"
|
|
89
|
+
:aria-label="t('markdown-open-configurator')"
|
|
90
|
+
:title="t('markdown-open-configurator')"
|
|
91
|
+
@click="isConfiguratorOpen = true"
|
|
92
|
+
>
|
|
93
|
+
<Icon icon="fluent:settings-20-regular" />
|
|
94
|
+
</Button>
|
|
95
|
+
|
|
96
|
+
<MarkdownConfiguratorDialog
|
|
97
|
+
v-if="resolvedConfig !== void 0"
|
|
98
|
+
v-model:open="isConfiguratorOpen"
|
|
99
|
+
:config="displayConfig"
|
|
100
|
+
:context="props.context"
|
|
101
|
+
@confirm="handleConfiguratorConfirm"
|
|
102
|
+
/>
|
|
103
|
+
|
|
104
|
+
<Skeleton
|
|
105
|
+
v-if="resolvedConfig === void 0"
|
|
106
|
+
class="absolute inset-0 z-10 w-full h-full"
|
|
107
|
+
/>
|
|
108
|
+
|
|
109
|
+
<div
|
|
110
|
+
data-slot="markdown-content"
|
|
111
|
+
v-html="renderedMarkdown"
|
|
112
|
+
/>
|
|
113
|
+
</div>
|
|
114
|
+
</template>
|
|
115
|
+
|
|
116
|
+
<i18n lang="json">
|
|
117
|
+
{
|
|
118
|
+
"zh": {
|
|
119
|
+
"markdown-open-configurator": "打开 Markdown 配置"
|
|
120
|
+
},
|
|
121
|
+
"ja": {
|
|
122
|
+
"markdown-open-configurator": "Markdown 設定を開く"
|
|
123
|
+
},
|
|
124
|
+
"en": {
|
|
125
|
+
"markdown-open-configurator": "Open markdown configurator"
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
</i18n>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { Effect } from 'effect';
|
|
2
|
+
import { type MarkdownConfigInput } from './schema.js';
|
|
3
|
+
export { MarkdownConfigC, MarkdownStyleC } from './schema.js';
|
|
4
|
+
export type { MarkdownConfig, MarkdownConfigInput } from './schema.js';
|
|
5
|
+
declare const _default: typeof __VLS_export;
|
|
6
|
+
export default _default;
|
|
7
|
+
declare const __VLS_export: import("vue").DefineComponent<{
|
|
8
|
+
config: Effect.Effect<MarkdownConfigInput | undefined>;
|
|
9
|
+
context?: Record<string, unknown>;
|
|
10
|
+
}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
11
|
+
"update:config": (args_0: Readonly<{
|
|
12
|
+
locale?: import("../../../utils/coders.js").LocaleValue;
|
|
13
|
+
inline?: boolean;
|
|
14
|
+
style?: string;
|
|
15
|
+
}>) => any;
|
|
16
|
+
}, string, import("vue").PublicProps, Readonly<{
|
|
17
|
+
config: Effect.Effect<MarkdownConfigInput | undefined>;
|
|
18
|
+
context?: Record<string, unknown>;
|
|
19
|
+
}> & Readonly<{
|
|
20
|
+
"onUpdate:config"?: ((args_0: Readonly<{
|
|
21
|
+
locale?: import("../../../utils/coders.js").LocaleValue;
|
|
22
|
+
inline?: boolean;
|
|
23
|
+
style?: string;
|
|
24
|
+
}>) => any) | undefined;
|
|
25
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import z from 'zod';
|
|
2
|
+
import type { LocaleValue } from '../../../utils/coders.js';
|
|
3
|
+
export declare const MarkdownStyleC: z.ZodOptional<z.ZodString>;
|
|
4
|
+
export declare const MarkdownConfigC: z.ZodReadonly<z.ZodObject<{
|
|
5
|
+
locale: z.ZodOptional<z.ZodReadonly<z.ZodArray<z.ZodObject<{
|
|
6
|
+
locale: z.ZodEnum<{
|
|
7
|
+
zh: "zh";
|
|
8
|
+
ja: "ja";
|
|
9
|
+
en: "en";
|
|
10
|
+
ko: "ko";
|
|
11
|
+
}>;
|
|
12
|
+
message: z.ZodString;
|
|
13
|
+
}, z.core.$strip>>>>;
|
|
14
|
+
inline: z.ZodOptional<z.ZodBoolean>;
|
|
15
|
+
style: z.ZodOptional<z.ZodString>;
|
|
16
|
+
}, z.core.$strict>>;
|
|
17
|
+
export type MarkdownConfig = Readonly<{
|
|
18
|
+
locale?: LocaleValue;
|
|
19
|
+
inline?: boolean;
|
|
20
|
+
style?: string;
|
|
21
|
+
}>;
|
|
22
|
+
export type MarkdownConfigInput = Readonly<{
|
|
23
|
+
locale?: LocaleValue;
|
|
24
|
+
inline?: boolean;
|
|
25
|
+
style?: string;
|
|
26
|
+
}>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import z from "zod";
|
|
2
|
+
import { localeC } from "../../../utils/coders.js";
|
|
3
|
+
export const MarkdownStyleC = z.string().optional().describe("\u8FD4\u56DE Markdown \u5BB9\u5668\u6837\u5F0F\u5BF9\u8C61\u7684 CEL \u8868\u8FBE\u5F0F\uFF0C\u53EF\u76F4\u63A5\u8BBF\u95EE\u5F53\u524D\u6E32\u67D3\u4E0A\u4E0B\u6587\u53D8\u91CF\u3002");
|
|
4
|
+
export const MarkdownConfigC = z.object({
|
|
5
|
+
locale: localeC.optional().describe("Markdown \u5185\u5BB9\u7684\u672C\u5730\u5316\u6587\u672C\uFF0C\u652F\u6301 Markdown \u6E32\u67D3\u4E0E {{ expression }} \u8BED\u6CD5\u3002"),
|
|
6
|
+
inline: z.boolean().optional().describe("\u4E3A true \u65F6\u4EE5\u5185\u8054\u6A21\u5F0F\u6E32\u67D3\uFF1B\u7559\u7A7A\u6216 false \u65F6\u6309\u5757\u7EA7\u6A21\u5F0F\u6E32\u67D3\u3002"),
|
|
7
|
+
style: MarkdownStyleC
|
|
8
|
+
}).strict().readonly();
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { type LocaleValue } from '../../../utils/coders.js';
|
|
2
|
+
import { type MarkdownConfig } from '../markdown/schema.js';
|
|
3
|
+
type __VLS_Props = {
|
|
4
|
+
config: MarkdownConfig;
|
|
5
|
+
context?: Record<string, unknown>;
|
|
6
|
+
};
|
|
7
|
+
type __VLS_ModelProps = {
|
|
8
|
+
'open'?: boolean;
|
|
9
|
+
};
|
|
10
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
11
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
12
|
+
"update:open": (value: boolean) => any;
|
|
13
|
+
confirm: (args_0: Readonly<{
|
|
14
|
+
locale?: LocaleValue;
|
|
15
|
+
inline?: boolean;
|
|
16
|
+
style?: string;
|
|
17
|
+
}>) => any;
|
|
18
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
19
|
+
"onUpdate:open"?: ((value: boolean) => any) | undefined;
|
|
20
|
+
onConfirm?: ((args_0: Readonly<{
|
|
21
|
+
locale?: LocaleValue;
|
|
22
|
+
inline?: boolean;
|
|
23
|
+
style?: string;
|
|
24
|
+
}>) => any) | undefined;
|
|
25
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
26
|
+
declare const _default: typeof __VLS_export;
|
|
27
|
+
export default _default;
|
|
@@ -0,0 +1,288 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { useNuxtApp } from "#app";
|
|
3
|
+
import { ref, watch } from "vue";
|
|
4
|
+
import { useI18n } from "vue-i18n";
|
|
5
|
+
import { hasVisibleLocaleValue } from "../../../utils/coders";
|
|
6
|
+
import { Button } from "../button";
|
|
7
|
+
import {
|
|
8
|
+
Dialog,
|
|
9
|
+
DialogDescription,
|
|
10
|
+
DialogFooter,
|
|
11
|
+
DialogHeader,
|
|
12
|
+
DialogScrollContent,
|
|
13
|
+
DialogTitle
|
|
14
|
+
} from "../dialog";
|
|
15
|
+
import Locale from "../locale/Locale.vue";
|
|
16
|
+
import { Switch } from "../switch";
|
|
17
|
+
import { Textarea } from "../textarea";
|
|
18
|
+
import { MarkdownConfigC } from "../markdown/schema";
|
|
19
|
+
const MARKDOWN_EXPRESSION_EXAMPLE = "{{ expression }}";
|
|
20
|
+
const STYLE_EXAMPLE = '{"display": "grid", "gap": "8px"}';
|
|
21
|
+
const props = defineProps({
|
|
22
|
+
config: { type: Object, required: true },
|
|
23
|
+
context: { type: Object, required: false }
|
|
24
|
+
});
|
|
25
|
+
const emit = defineEmits(["confirm"]);
|
|
26
|
+
const open = defineModel("open", { type: Boolean, ...{
|
|
27
|
+
default: false
|
|
28
|
+
} });
|
|
29
|
+
const { $dsl } = useNuxtApp();
|
|
30
|
+
const { t } = useI18n();
|
|
31
|
+
const draftLocale = ref();
|
|
32
|
+
const draftInline = ref(false);
|
|
33
|
+
const draftStyle = ref("");
|
|
34
|
+
const styleError = ref("");
|
|
35
|
+
function resetDraftState(config) {
|
|
36
|
+
draftLocale.value = config.locale;
|
|
37
|
+
draftInline.value = config.inline === true;
|
|
38
|
+
draftStyle.value = config.style ?? "";
|
|
39
|
+
styleError.value = "";
|
|
40
|
+
}
|
|
41
|
+
function discardChanges() {
|
|
42
|
+
resetDraftState(props.config);
|
|
43
|
+
open.value = false;
|
|
44
|
+
}
|
|
45
|
+
function handleOpenChange(value) {
|
|
46
|
+
if (value) {
|
|
47
|
+
open.value = true;
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
discardChanges();
|
|
51
|
+
}
|
|
52
|
+
function normalizeLocale(value) {
|
|
53
|
+
if (!hasVisibleLocaleValue(value)) {
|
|
54
|
+
return void 0;
|
|
55
|
+
}
|
|
56
|
+
return value;
|
|
57
|
+
}
|
|
58
|
+
function normalizeStyle(value) {
|
|
59
|
+
const trimmedValue = value.trim();
|
|
60
|
+
return trimmedValue.length > 0 ? trimmedValue : void 0;
|
|
61
|
+
}
|
|
62
|
+
function updateDraftStyle(value) {
|
|
63
|
+
draftStyle.value = typeof value === "string" ? value : String(value);
|
|
64
|
+
}
|
|
65
|
+
function isStyleObject(value) {
|
|
66
|
+
return !!value && typeof value === "object" && !Array.isArray(value);
|
|
67
|
+
}
|
|
68
|
+
function validateStyle(style) {
|
|
69
|
+
styleError.value = "";
|
|
70
|
+
if (!style) {
|
|
71
|
+
return true;
|
|
72
|
+
}
|
|
73
|
+
try {
|
|
74
|
+
const result = $dsl.evaluate`${style}`(props.context ?? {});
|
|
75
|
+
if (isStyleObject(result)) {
|
|
76
|
+
return true;
|
|
77
|
+
}
|
|
78
|
+
} catch {
|
|
79
|
+
styleError.value = t("style-error");
|
|
80
|
+
return false;
|
|
81
|
+
}
|
|
82
|
+
styleError.value = t("style-error");
|
|
83
|
+
return false;
|
|
84
|
+
}
|
|
85
|
+
function confirmChanges() {
|
|
86
|
+
const normalizedStyle = normalizeStyle(draftStyle.value);
|
|
87
|
+
if (!validateStyle(normalizedStyle)) {
|
|
88
|
+
return;
|
|
89
|
+
}
|
|
90
|
+
const nextConfig = {};
|
|
91
|
+
const localeValue = normalizeLocale(draftLocale.value);
|
|
92
|
+
if (localeValue) {
|
|
93
|
+
nextConfig.locale = localeValue;
|
|
94
|
+
}
|
|
95
|
+
if (draftInline.value) {
|
|
96
|
+
nextConfig.inline = true;
|
|
97
|
+
}
|
|
98
|
+
if (normalizedStyle) {
|
|
99
|
+
nextConfig.style = normalizedStyle;
|
|
100
|
+
}
|
|
101
|
+
emit("confirm", MarkdownConfigC.parse(nextConfig));
|
|
102
|
+
open.value = false;
|
|
103
|
+
}
|
|
104
|
+
watch(() => props.config, (value) => {
|
|
105
|
+
resetDraftState(value);
|
|
106
|
+
}, { immediate: true });
|
|
107
|
+
</script>
|
|
108
|
+
|
|
109
|
+
<template>
|
|
110
|
+
<Dialog
|
|
111
|
+
:open="open"
|
|
112
|
+
@update:open="handleOpenChange"
|
|
113
|
+
>
|
|
114
|
+
<DialogScrollContent
|
|
115
|
+
class="w-[calc(100%-2rem)] max-w-3xl p-0"
|
|
116
|
+
:show-close-button="true"
|
|
117
|
+
>
|
|
118
|
+
<DialogHeader class="gap-1 border-b border-zinc-200 px-6 py-5">
|
|
119
|
+
<DialogTitle class="text-xl font-semibold text-zinc-800">
|
|
120
|
+
{{ t("configure-markdown") }}
|
|
121
|
+
</DialogTitle>
|
|
122
|
+
<DialogDescription class="text-sm text-zinc-500">
|
|
123
|
+
{{ t("configure-markdown-description") }}
|
|
124
|
+
</DialogDescription>
|
|
125
|
+
</DialogHeader>
|
|
126
|
+
|
|
127
|
+
<div class="flex flex-col gap-6 px-6 py-5">
|
|
128
|
+
<section
|
|
129
|
+
data-slot="markdown-configurator-locale-section"
|
|
130
|
+
class="flex flex-col gap-3"
|
|
131
|
+
>
|
|
132
|
+
<div class="flex flex-col gap-1">
|
|
133
|
+
<p class="text-xs font-medium text-zinc-500">
|
|
134
|
+
{{ t("locale") }}
|
|
135
|
+
</p>
|
|
136
|
+
<p class="text-sm text-zinc-500">
|
|
137
|
+
{{ t("locale-description", { expression: MARKDOWN_EXPRESSION_EXAMPLE }) }}
|
|
138
|
+
</p>
|
|
139
|
+
</div>
|
|
140
|
+
|
|
141
|
+
<Locale
|
|
142
|
+
data-slot="markdown-configurator-locale"
|
|
143
|
+
:model-value="draftLocale"
|
|
144
|
+
:multiline="true"
|
|
145
|
+
@update:model-value="draftLocale = $event"
|
|
146
|
+
/>
|
|
147
|
+
</section>
|
|
148
|
+
|
|
149
|
+
<section
|
|
150
|
+
data-slot="markdown-configurator-render-mode"
|
|
151
|
+
class="flex flex-col gap-3"
|
|
152
|
+
>
|
|
153
|
+
<div class="flex flex-col gap-1">
|
|
154
|
+
<p class="text-xs font-medium text-zinc-500">
|
|
155
|
+
{{ t("render-mode") }}
|
|
156
|
+
</p>
|
|
157
|
+
<p class="text-sm text-zinc-500">
|
|
158
|
+
{{ t("render-mode-description") }}
|
|
159
|
+
</p>
|
|
160
|
+
</div>
|
|
161
|
+
|
|
162
|
+
<label class="flex items-center justify-between gap-4 rounded-md border border-zinc-200 px-4 py-3">
|
|
163
|
+
<div class="flex flex-col gap-1">
|
|
164
|
+
<span class="text-sm font-medium text-zinc-800">
|
|
165
|
+
{{ t("inline") }}
|
|
166
|
+
</span>
|
|
167
|
+
<span
|
|
168
|
+
data-slot="markdown-configurator-render-mode-value"
|
|
169
|
+
class="text-xs text-zinc-500"
|
|
170
|
+
>
|
|
171
|
+
{{ draftInline ? t("inline-enabled") : t("block-enabled") }}
|
|
172
|
+
</span>
|
|
173
|
+
</div>
|
|
174
|
+
|
|
175
|
+
<Switch
|
|
176
|
+
data-slot="markdown-configurator-inline-switch"
|
|
177
|
+
:model-value="draftInline"
|
|
178
|
+
@update:model-value="draftInline = $event === true"
|
|
179
|
+
/>
|
|
180
|
+
</label>
|
|
181
|
+
</section>
|
|
182
|
+
|
|
183
|
+
<section
|
|
184
|
+
data-slot="markdown-configurator-style-section"
|
|
185
|
+
class="flex flex-col gap-3"
|
|
186
|
+
>
|
|
187
|
+
<div class="flex flex-col gap-1">
|
|
188
|
+
<p class="text-xs font-medium text-zinc-500">
|
|
189
|
+
{{ t("style") }}
|
|
190
|
+
</p>
|
|
191
|
+
<p class="text-sm text-zinc-500">
|
|
192
|
+
{{ t("style-description") }}
|
|
193
|
+
</p>
|
|
194
|
+
</div>
|
|
195
|
+
|
|
196
|
+
<Textarea
|
|
197
|
+
data-slot="markdown-configurator-style-input"
|
|
198
|
+
:model-value="draftStyle"
|
|
199
|
+
:aria-invalid="styleError ? 'true' : void 0"
|
|
200
|
+
:placeholder="STYLE_EXAMPLE"
|
|
201
|
+
class="min-h-20 font-mono text-sm"
|
|
202
|
+
@update:model-value="updateDraftStyle"
|
|
203
|
+
/>
|
|
204
|
+
|
|
205
|
+
<p
|
|
206
|
+
v-if="styleError"
|
|
207
|
+
data-slot="markdown-configurator-style-error"
|
|
208
|
+
class="text-xs text-red-500"
|
|
209
|
+
>
|
|
210
|
+
{{ styleError }}
|
|
211
|
+
</p>
|
|
212
|
+
</section>
|
|
213
|
+
</div>
|
|
214
|
+
|
|
215
|
+
<DialogFooter class="border-t border-zinc-200 px-6 py-4">
|
|
216
|
+
<Button
|
|
217
|
+
data-slot="markdown-configurator-cancel"
|
|
218
|
+
type="button"
|
|
219
|
+
variant="ghost"
|
|
220
|
+
@click="discardChanges"
|
|
221
|
+
>
|
|
222
|
+
{{ t("cancel") }}
|
|
223
|
+
</Button>
|
|
224
|
+
<Button
|
|
225
|
+
data-slot="markdown-configurator-confirm"
|
|
226
|
+
type="button"
|
|
227
|
+
variant="primary"
|
|
228
|
+
@click="confirmChanges"
|
|
229
|
+
>
|
|
230
|
+
{{ t("confirm") }}
|
|
231
|
+
</Button>
|
|
232
|
+
</DialogFooter>
|
|
233
|
+
</DialogScrollContent>
|
|
234
|
+
</Dialog>
|
|
235
|
+
</template>
|
|
236
|
+
|
|
237
|
+
<i18n lang="json">
|
|
238
|
+
{
|
|
239
|
+
"zh": {
|
|
240
|
+
"configure-markdown": "配置 Markdown",
|
|
241
|
+
"configure-markdown-description": "编辑 Markdown 文案、渲染模式和容器样式。",
|
|
242
|
+
"locale": "文案",
|
|
243
|
+
"locale-description": "支持 Markdown 编辑和 {expression} 语法。",
|
|
244
|
+
"render-mode": "渲染模式",
|
|
245
|
+
"render-mode-description": "关闭时按 block 渲染,开启后按 inline 渲染。",
|
|
246
|
+
"inline": "Inline",
|
|
247
|
+
"inline-enabled": "当前使用 inline 模式",
|
|
248
|
+
"block-enabled": "当前使用 block 模式",
|
|
249
|
+
"style": "容器样式",
|
|
250
|
+
"style-description": "填写返回样式对象的 CEL 表达式,使用当前 Markdown 上下文求值。",
|
|
251
|
+
"style-error": "样式表达式必须返回对象",
|
|
252
|
+
"cancel": "取消",
|
|
253
|
+
"confirm": "确认"
|
|
254
|
+
},
|
|
255
|
+
"ja": {
|
|
256
|
+
"configure-markdown": "Markdown を設定",
|
|
257
|
+
"configure-markdown-description": "Markdown テキスト、描画モード、コンテナスタイルを編集します。",
|
|
258
|
+
"locale": "テキスト",
|
|
259
|
+
"locale-description": "Markdown と {expression} 構文をサポートします。",
|
|
260
|
+
"render-mode": "描画モード",
|
|
261
|
+
"render-mode-description": "オフでは block、オンでは inline で描画します。",
|
|
262
|
+
"inline": "Inline",
|
|
263
|
+
"inline-enabled": "現在は inline モードです",
|
|
264
|
+
"block-enabled": "現在は block モードです",
|
|
265
|
+
"style": "コンテナスタイル",
|
|
266
|
+
"style-description": "現在の Markdown コンテキストで評価される CEL スタイル式を入力します。",
|
|
267
|
+
"style-error": "スタイル式はオブジェクトを返す必要があります",
|
|
268
|
+
"cancel": "キャンセル",
|
|
269
|
+
"confirm": "確認"
|
|
270
|
+
},
|
|
271
|
+
"en": {
|
|
272
|
+
"configure-markdown": "Configure markdown",
|
|
273
|
+
"configure-markdown-description": "Edit markdown content, render mode, and container style.",
|
|
274
|
+
"locale": "Content",
|
|
275
|
+
"locale-description": "Supports markdown editing and {expression} syntax.",
|
|
276
|
+
"render-mode": "Render mode",
|
|
277
|
+
"render-mode-description": "Off renders as block, on renders as inline.",
|
|
278
|
+
"inline": "Inline",
|
|
279
|
+
"inline-enabled": "Currently using inline mode",
|
|
280
|
+
"block-enabled": "Currently using block mode",
|
|
281
|
+
"style": "Container style",
|
|
282
|
+
"style-description": "Provide a CEL expression that returns a style object using the current markdown context.",
|
|
283
|
+
"style-error": "Style expression must return an object",
|
|
284
|
+
"cancel": "Cancel",
|
|
285
|
+
"confirm": "Confirm"
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
</i18n>
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { type LocaleValue } from '../../../utils/coders.js';
|
|
2
|
+
import { type MarkdownConfig } from '../markdown/schema.js';
|
|
3
|
+
type __VLS_Props = {
|
|
4
|
+
config: MarkdownConfig;
|
|
5
|
+
context?: Record<string, unknown>;
|
|
6
|
+
};
|
|
7
|
+
type __VLS_ModelProps = {
|
|
8
|
+
'open'?: boolean;
|
|
9
|
+
};
|
|
10
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
11
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
12
|
+
"update:open": (value: boolean) => any;
|
|
13
|
+
confirm: (args_0: Readonly<{
|
|
14
|
+
locale?: LocaleValue;
|
|
15
|
+
inline?: boolean;
|
|
16
|
+
style?: string;
|
|
17
|
+
}>) => any;
|
|
18
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
19
|
+
"onUpdate:open"?: ((value: boolean) => any) | undefined;
|
|
20
|
+
onConfirm?: ((args_0: Readonly<{
|
|
21
|
+
locale?: LocaleValue;
|
|
22
|
+
inline?: boolean;
|
|
23
|
+
style?: string;
|
|
24
|
+
}>) => any) | undefined;
|
|
25
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
26
|
+
declare const _default: typeof __VLS_export;
|
|
27
|
+
export default _default;
|