chore(docs): eslint migration + extractor updates

Migrate docs to eslint flat config (build-script console override); doc
extractor points at configs/eslint.
This commit is contained in:
2026-06-07 16:30:14 +07:00
parent 23a2795523
commit 96ac895f7a
30 changed files with 1934 additions and 864 deletions
+12 -31
View File
@@ -13,49 +13,30 @@ watch(showSource, async (show) => {
if (show && !highlighted.value) {
await highlightReactive(props.source, 'vue');
}
}, { immediate: false });
});
</script>
<template>
<div class="border border-(--color-border) rounded-lg overflow-hidden">
<div class="rounded-xl border border-(--border) overflow-hidden">
<!-- Live demo -->
<div class="p-6 bg-(--color-bg-soft)">
<div class="p-8 bg-(--bg-subtle) flex items-center justify-center min-h-32">
<component :is="component" />
</div>
<!-- Source toggle bar -->
<div class="flex items-center border-t border-(--color-border) bg-(--color-bg)">
<div class="flex items-center border-t border-(--border) bg-(--bg-elevated)">
<button
class="flex items-center gap-1.5 px-4 py-2 text-xs font-medium text-(--color-text-mute) hover:text-(--color-text) transition-colors cursor-pointer"
type="button"
class="flex items-center gap-1.5 px-4 py-2.5 text-xs font-medium text-(--fg-muted) hover:text-(--fg) transition-colors cursor-pointer"
@click="showSource = !showSource"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="16 18 22 12 16 6" />
<polyline points="8 6 2 12 8 18" />
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="16 18 22 12 16 6" /><polyline points="8 6 2 12 8 18" />
</svg>
{{ showSource ? 'Hide source' : 'View source' }}
<svg
xmlns="http://www.w3.org/2000/svg"
width="12"
height="12"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="transition-transform"
:class="showSource ? 'rotate-180' : ''"
xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="transition-transform" :class="showSource ? 'rotate-180' : ''"
>
<polyline points="6 9 12 15 18 9" />
</svg>
@@ -63,8 +44,8 @@ watch(showSource, async (show) => {
</div>
<!-- Source code -->
<div v-if="showSource" class="border-t border-(--color-border)">
<div class="overflow-x-auto text-sm" v-html="highlighted" />
<div v-if="showSource" class="border-t border-(--border) bg-(--bg-subtle)">
<div class="overflow-x-auto text-[13px] [&_pre]:p-4 [&_pre]:m-0 [&_pre]:bg-transparent!" v-html="highlighted" />
</div>
</div>
</template>