ui: ESLint config updates (#27700)
* chore: Spacing between sibling elements in html markup * chore: Formatting and linting rules
This commit is contained in:
@@ -40,12 +40,12 @@
|
||||
</script>
|
||||
|
||||
<Collapsible.Root
|
||||
{open}
|
||||
class={cn('group/collapsible', 'my-0!', className)}
|
||||
onOpenChange={(value) => {
|
||||
open = value;
|
||||
onToggle?.();
|
||||
}}
|
||||
class={cn('group/collapsible', 'my-0!', className)}
|
||||
{open}
|
||||
>
|
||||
<Collapsible.Trigger
|
||||
class={cn(
|
||||
@@ -56,10 +56,10 @@
|
||||
<div class="flex min-w-0 items-start gap-2 text-muted-foreground">
|
||||
{#if iconUrl}
|
||||
<img
|
||||
src={iconUrl}
|
||||
alt=""
|
||||
class={cn('shrink-0 rounded-sm mt-0.75', iconClass)}
|
||||
onerror={hideBrokenIcon}
|
||||
src={iconUrl}
|
||||
/>
|
||||
{:else if IconComponent}
|
||||
<IconComponent class={cn('shrink-0 text-muted-foreground/60 mt-0.75', iconClass)} />
|
||||
|
||||
@@ -40,12 +40,12 @@
|
||||
</script>
|
||||
|
||||
<Collapsible.Root
|
||||
{open}
|
||||
class={cn('group/collapsible', 'overflow-hidden rounded-md', className)}
|
||||
onOpenChange={(value) => {
|
||||
open = value;
|
||||
onToggle?.();
|
||||
}}
|
||||
class={cn('group/collapsible', 'overflow-hidden rounded-md', className)}
|
||||
{open}
|
||||
style="background: var(--code-background); border: 1px solid color-mix(in oklch, var(--border) 30%, transparent);"
|
||||
>
|
||||
<Collapsible.Trigger
|
||||
@@ -57,10 +57,10 @@
|
||||
<div class="flex min-w-0 items-start gap-2 text-muted-foreground">
|
||||
{#if iconUrl}
|
||||
<img
|
||||
src={iconUrl}
|
||||
alt=""
|
||||
class={cn('shrink-0 rounded-sm mt-0.5', iconClass)}
|
||||
onerror={hideBrokenIcon}
|
||||
src={iconUrl}
|
||||
/>
|
||||
{:else if IconComponent}
|
||||
<IconComponent class={cn('shrink-0 text-muted-foreground/60 mt-0.5', iconClass)} />
|
||||
|
||||
@@ -867,10 +867,10 @@
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div
|
||||
bind:this={containerRef}
|
||||
onclick={handleMermaidClick}
|
||||
class="markdown-content {className}{settingsStore.config[SETTINGS_KEYS.FULL_HEIGHT_CODE_BLOCKS]
|
||||
? ' full-height-code-blocks'
|
||||
: ''}"
|
||||
onclick={handleMermaidClick}
|
||||
>
|
||||
{#each renderedBlocks as block (block.id)}
|
||||
<div class="markdown-block" {...{ [MARKDOWN_DATA_ATTRS.BLOCK_ID]: block.id }}>
|
||||
@@ -893,14 +893,16 @@
|
||||
<div class="mermaid-block-wrapper streaming-mermaid-block">
|
||||
<div class="code-block-header">
|
||||
<span class="code-language">mermaid</span>
|
||||
|
||||
<div class="code-block-actions">
|
||||
<ActionIconCopyToClipboard
|
||||
text={incompleteCodeBlock.code}
|
||||
canCopy={false}
|
||||
ariaLabel="Diagram incomplete"
|
||||
canCopy={false}
|
||||
text={incompleteCodeBlock.code}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mermaid-loading-placeholder">
|
||||
<span class="mermaid-loading-text">Generating diagram...</span>
|
||||
</div>
|
||||
@@ -909,14 +911,16 @@
|
||||
<div class="svg-block-wrapper streaming-svg-block">
|
||||
<div class="code-block-header">
|
||||
<span class="code-language">svg</span>
|
||||
|
||||
<div class="code-block-actions">
|
||||
<ActionIconCopyToClipboard
|
||||
text={incompleteCodeBlock.code}
|
||||
canCopy={false}
|
||||
ariaLabel="Diagram incomplete"
|
||||
canCopy={false}
|
||||
text={incompleteCodeBlock.code}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if liveSvgHtml}
|
||||
<div class="svg-scroll-container">
|
||||
<div class={SVG.BLOCK_CLASS}>
|
||||
@@ -933,10 +937,11 @@
|
||||
<div class="code-block-wrapper streaming-code-block relative">
|
||||
<div class="code-block-header">
|
||||
<span class="code-language">{incompleteCodeBlock.language || 'text'}</span>
|
||||
|
||||
<CodeBlockActions
|
||||
code={incompleteCodeBlock.code}
|
||||
language={incompleteCodeBlock.language || 'text'}
|
||||
disabled
|
||||
language={incompleteCodeBlock.language || 'text'}
|
||||
onPreview={(code, lang) => {
|
||||
previewCode = code;
|
||||
previewLanguage = lang;
|
||||
@@ -961,16 +966,16 @@
|
||||
</div>
|
||||
|
||||
<DialogCodePreview
|
||||
open={previewDialogOpen}
|
||||
code={previewCode}
|
||||
language={previewLanguage}
|
||||
onOpenChange={handlePreviewDialogOpenChange}
|
||||
open={previewDialogOpen}
|
||||
/>
|
||||
|
||||
<DialogMermaidPreview
|
||||
onOpenChange={handleMermaidPreviewOpenChange}
|
||||
open={mermaidPreviewOpen}
|
||||
svgHtml={mermaidPreviewSvgHtml}
|
||||
onOpenChange={handleMermaidPreviewOpenChange}
|
||||
/>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -103,22 +103,22 @@
|
||||
<div
|
||||
class="mermaid-preview-diagram transform-origin-center inline-block min-h-fit min-w-fit will-change-transform {isDragging &&
|
||||
'select-none'}"
|
||||
onpointerdown={handlePointerDown}
|
||||
onpointerleave={handlePointerUp}
|
||||
onpointermove={handlePointerMove}
|
||||
onpointerup={handlePointerUp}
|
||||
style="transform: translate({translateX}px, {translateY}px) scale({scale}); cursor: {isDragging
|
||||
? 'grabbing'
|
||||
: 'grab'};"
|
||||
onpointerdown={handlePointerDown}
|
||||
onpointermove={handlePointerMove}
|
||||
onpointerup={handlePointerUp}
|
||||
onpointerleave={handlePointerUp}
|
||||
>
|
||||
<div bind:this={svgHost}></div>
|
||||
</div>
|
||||
|
||||
<MermaidPreviewControls
|
||||
{scale}
|
||||
{svgHtml}
|
||||
onResetView={resetView}
|
||||
onZoomIn={zoomIn}
|
||||
onZoomOut={zoomOut}
|
||||
onResetView={resetView}
|
||||
{scale}
|
||||
{svgHtml}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -34,42 +34,46 @@
|
||||
>
|
||||
<div class="mermaid-preview-controls-inner flex items-center gap-1 rounded-lg bg-muted p-1">
|
||||
<button
|
||||
aria-label="Zoom out"
|
||||
class="mermaid-preview-btn flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-foreground transition-colors hover:bg-muted-foreground/15 active:bg-muted-foreground/25"
|
||||
onclick={onZoomOut}
|
||||
title="Zoom out"
|
||||
aria-label="Zoom out"
|
||||
>
|
||||
<ZoomOutIcon class="mermaid-preview-btn-icon {ICON_CLASS_DEFAULT}" />
|
||||
</button>
|
||||
|
||||
<span
|
||||
class="mermaid-preview-zoom-label min-w-[3.5rem] px-0.5 text-center text-xs font-medium text-muted-foreground tabular-nums select-none"
|
||||
>{Math.round(scale * 100)}%</span
|
||||
>
|
||||
|
||||
<button
|
||||
aria-label="Zoom in"
|
||||
class="mermaid-preview-btn flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-foreground transition-colors hover:bg-muted-foreground/15 active:bg-muted-foreground/25"
|
||||
onclick={onZoomIn}
|
||||
title="Zoom in"
|
||||
aria-label="Zoom in"
|
||||
>
|
||||
<ZoomInIcon class="mermaid-preview-btn-icon {ICON_CLASS_DEFAULT}" />
|
||||
</button>
|
||||
|
||||
<div class="mermaid-preview-controls-separator mx-1 h-5 w-px bg-border/50"></div>
|
||||
|
||||
<button
|
||||
aria-label="Reset view"
|
||||
class="mermaid-preview-btn flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-foreground transition-colors hover:bg-muted-foreground/15 active:bg-muted-foreground/25"
|
||||
onclick={onResetView}
|
||||
title="Reset view"
|
||||
aria-label="Reset view"
|
||||
>
|
||||
<RotateCcwIcon class="mermaid-preview-btn-icon {ICON_CLASS_DEFAULT}" />
|
||||
</button>
|
||||
|
||||
<div class="mermaid-preview-controls-separator mx-1 h-5 w-px bg-border/50"></div>
|
||||
|
||||
<button
|
||||
aria-label="Download SVG"
|
||||
class="mermaid-preview-btn flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-foreground transition-colors hover:bg-muted-foreground/15 active:bg-muted-foreground/25"
|
||||
onclick={downloadSvg}
|
||||
title="Download SVG"
|
||||
aria-label="Download SVG"
|
||||
>
|
||||
<Download class="mermaid-preview-btn-icon {ICON_CLASS_DEFAULT}" />
|
||||
</button>
|
||||
|
||||
@@ -129,8 +129,8 @@
|
||||
|
||||
<div
|
||||
bind:this={scrollEl}
|
||||
onscroll={handleScrollEvent}
|
||||
class="code-preview-wrapper min-w-0 max-w-full overflow-auto rounded-xl border shadow-[0_1px_2px_0_rgb(0_0_0_/_0.05)] {className}"
|
||||
onscroll={handleScrollEvent}
|
||||
style="border-color: color-mix(in oklch, var(--border) 30%, transparent); background: var(--code-background); max-height: {maxHeight}; {maxWidth
|
||||
? `max-width: ${maxWidth};`
|
||||
: ''}"
|
||||
|
||||
Reference in New Issue
Block a user