mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-19 00:01:25 +02:00
style: auto-format codebase with Prettier
Applied formatting to 1487+ files using pnpm format:write - TypeScript/JavaScript files - Svelte components - Astro pages - JSON configs - Markdown docs 13 files still need manual review (Astro JSX comments)
This commit is contained in:
parent
0241f5554c
commit
d36b321d9d
3952 changed files with 661498 additions and 739751 deletions
|
|
@ -23,7 +23,7 @@
|
|||
description,
|
||||
disabled = false,
|
||||
indeterminate = false,
|
||||
class: className = ''
|
||||
class: className = '',
|
||||
}: Props = $props();
|
||||
|
||||
let inputElement: HTMLInputElement | null = $state(null);
|
||||
|
|
@ -53,11 +53,23 @@
|
|||
/>
|
||||
<div class="checkbox-box">
|
||||
{#if indeterminate}
|
||||
<svg class="checkbox-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
||||
<svg
|
||||
class="checkbox-icon"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="3"
|
||||
>
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
</svg>
|
||||
{:else if checked}
|
||||
<svg class="checkbox-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
||||
<svg
|
||||
class="checkbox-icon"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="3"
|
||||
>
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -67,14 +67,14 @@
|
|||
metadata,
|
||||
actions,
|
||||
badge,
|
||||
class: className = ''
|
||||
class: className = '',
|
||||
}: Props = $props();
|
||||
|
||||
const variantClasses: Record<CardVariant, string> = {
|
||||
default: 'bg-menu border border-theme',
|
||||
elevated: 'bg-menu border border-theme shadow-md',
|
||||
outlined: 'bg-transparent border-2 border-theme',
|
||||
ghost: 'bg-transparent border-transparent hover:bg-menu-hover'
|
||||
ghost: 'bg-transparent border-transparent hover:bg-menu-hover',
|
||||
};
|
||||
|
||||
const isClickable = $derived(interactive || !!onclick);
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
class="data-card rounded-xl p-4 transition-colors {variantClasses[variant]} {isClickable
|
||||
? 'cursor-pointer hover:bg-menu-hover'
|
||||
: ''} {className}"
|
||||
onclick={onclick}
|
||||
{onclick}
|
||||
onkeydown={(e) => {
|
||||
if (isClickable && onclick && (e.key === 'Enter' || e.key === ' ')) {
|
||||
e.preventDefault();
|
||||
|
|
@ -139,7 +139,10 @@
|
|||
{#if actions}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<div class="data-card__actions flex-shrink-0 flex items-center gap-1" onclick={(e) => e.stopPropagation()}>
|
||||
<div
|
||||
class="data-card__actions flex-shrink-0 flex items-center gap-1"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{@render actions()}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
autocomplete,
|
||||
class: className = '',
|
||||
id = `input-${Math.random().toString(36).slice(2, 9)}`,
|
||||
name
|
||||
name,
|
||||
}: Props = $props();
|
||||
|
||||
function handleInput(e: Event) {
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
? 'border-red-500 focus:ring-red-500/50'
|
||||
: 'border-theme'}"
|
||||
/>
|
||||
|
||||
|
||||
{#if error}
|
||||
<p class="text-sm text-red-500">{error}</p>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@
|
|||
expanded = $bindable(false),
|
||||
collapsible = true,
|
||||
compact = false,
|
||||
class: className = ''
|
||||
class: className = '',
|
||||
}: Props = $props();
|
||||
|
||||
// Group shortcuts by category
|
||||
|
|
@ -116,7 +116,12 @@
|
|||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
|
|
@ -162,14 +167,9 @@
|
|||
<button
|
||||
type="button"
|
||||
class="w-full flex items-center justify-center p-2 hover:bg-menu-hover rounded-lg transition-colors group relative"
|
||||
title={title}
|
||||
{title}
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5 text-theme-secondary"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<svg class="w-5 h-5 text-theme-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
|
|
|
|||
|
|
@ -60,14 +60,14 @@
|
|||
loading = false,
|
||||
disabled = false,
|
||||
align = 'end',
|
||||
class: className = ''
|
||||
class: className = '',
|
||||
}: Props = $props();
|
||||
|
||||
const alignClasses: Record<string, string> = {
|
||||
start: 'justify-start',
|
||||
center: 'justify-center',
|
||||
end: 'justify-end',
|
||||
between: 'justify-between'
|
||||
between: 'justify-between',
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
</Button>
|
||||
{/if}
|
||||
{#if confirmLabel && onConfirm}
|
||||
<Button variant={confirmVariant} onclick={onConfirm} {loading} disabled={disabled}>
|
||||
<Button variant={confirmVariant} onclick={onConfirm} {loading} {disabled}>
|
||||
{confirmLabel}
|
||||
</Button>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -69,22 +69,22 @@
|
|||
breadcrumb,
|
||||
actions,
|
||||
tabs,
|
||||
class: className = ''
|
||||
class: className = '',
|
||||
}: Props = $props();
|
||||
|
||||
const sizeClasses: Record<HeaderSize, { container: string; title: string }> = {
|
||||
sm: {
|
||||
container: 'py-3',
|
||||
title: 'text-lg'
|
||||
title: 'text-lg',
|
||||
},
|
||||
md: {
|
||||
container: 'py-4',
|
||||
title: 'text-xl'
|
||||
title: 'text-xl',
|
||||
},
|
||||
lg: {
|
||||
container: 'py-6',
|
||||
title: 'text-2xl'
|
||||
}
|
||||
title: 'text-2xl',
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
disabled = false,
|
||||
required = false,
|
||||
class: className = '',
|
||||
id = `select-${Math.random().toString(36).slice(2, 9)}`
|
||||
id = `select-${Math.random().toString(36).slice(2, 9)}`,
|
||||
}: Props = $props();
|
||||
|
||||
function handleChange(e: Event) {
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
required = false,
|
||||
autoResize = false,
|
||||
class: className = '',
|
||||
id = `textarea-${Math.random().toString(36).slice(2, 9)}`
|
||||
id = `textarea-${Math.random().toString(36).slice(2, 9)}`,
|
||||
}: Props = $props();
|
||||
|
||||
let textareaElement: HTMLTextAreaElement | null = $state(null);
|
||||
|
|
@ -90,7 +90,9 @@
|
|||
{required}
|
||||
oninput={handleInput}
|
||||
onchange={handleChange}
|
||||
class="textarea-input {error || isOverLimit ? 'textarea-input--error' : ''} {autoResize ? 'textarea-input--auto-resize' : ''}"
|
||||
class="textarea-input {error || isOverLimit ? 'textarea-input--error' : ''} {autoResize
|
||||
? 'textarea-input--auto-resize'
|
||||
: ''}"
|
||||
></textarea>
|
||||
|
||||
<div class="textarea-footer">
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
const sizeClasses = {
|
||||
sm: { track: 'h-6 w-10', thumb: 'h-4 w-4 top-1 left-1', translate: 'translate-x-4' },
|
||||
md: { track: 'h-8 w-14', thumb: 'h-6 w-6 top-1 left-1', translate: 'translate-x-6' }
|
||||
md: { track: 'h-8 w-14', thumb: 'h-6 w-6 top-1 left-1', translate: 'translate-x-6' },
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -31,7 +31,8 @@
|
|||
{disabled}
|
||||
>
|
||||
<span
|
||||
class="absolute {sizeClasses[size].thumb} rounded-full bg-white shadow-md transition-transform {isOn
|
||||
class="absolute {sizeClasses[size]
|
||||
.thumb} rounded-full bg-white shadow-md transition-transform {isOn
|
||||
? sizeClasses[size].translate
|
||||
: 'translate-x-0'}"
|
||||
></span>
|
||||
|
|
|
|||
|
|
@ -63,18 +63,20 @@
|
|||
onSecondaryAction,
|
||||
variant = 'default',
|
||||
icon,
|
||||
class: className = ''
|
||||
class: className = '',
|
||||
}: Props = $props();
|
||||
|
||||
const variantClasses: Record<EmptyStateVariant, string> = {
|
||||
default: 'py-12 px-6',
|
||||
compact: 'py-6 px-4',
|
||||
centered: 'py-16 px-8'
|
||||
centered: 'py-16 px-8',
|
||||
};
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="empty-state flex flex-col items-center justify-center text-center {variantClasses[variant]} {className}"
|
||||
class="empty-state flex flex-col items-center justify-center text-center {variantClasses[
|
||||
variant
|
||||
]} {className}"
|
||||
>
|
||||
<!-- Icon -->
|
||||
{#if icon}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
height = '20px',
|
||||
borderRadius = '4px',
|
||||
circle = false,
|
||||
class: className = ''
|
||||
class: className = '',
|
||||
}: Props = $props();
|
||||
|
||||
const computedRadius = $derived(circle ? '50%' : borderRadius);
|
||||
|
|
|
|||
|
|
@ -31,15 +31,12 @@
|
|||
lineHeight = '16px',
|
||||
gap = '8px',
|
||||
lastLineWidth = '70%',
|
||||
class: className = ''
|
||||
class: className = '',
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="skeleton-text {className}" style="display: flex; flex-direction: column; gap: {gap};">
|
||||
{#each Array(lines) as _, i}
|
||||
<SkeletonBox
|
||||
width={i === lines - 1 ? lastLineWidth : '100%'}
|
||||
height={lineHeight}
|
||||
/>
|
||||
<SkeletonBox width={i === lines - 1 ? lastLineWidth : '100%'} height={lineHeight} />
|
||||
{/each}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -93,9 +93,7 @@
|
|||
}
|
||||
|
||||
// Calculate progress percentage for styling
|
||||
const progressPercent = $derived(
|
||||
audioDuration > 0 ? (currentTime / audioDuration) * 100 : 0
|
||||
);
|
||||
const progressPercent = $derived(audioDuration > 0 ? (currentTime / audioDuration) * 100 : 0);
|
||||
</script>
|
||||
|
||||
<div class="rounded-2xl border border-theme bg-content p-4">
|
||||
|
|
@ -133,7 +131,12 @@
|
|||
{@render skipBackIcon()}
|
||||
{:else}
|
||||
<svg class="h-6 w-6 text-theme" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.066 11.2a1 1 0 000 1.6l5.334 4A1 1 0 0019 16V8a1 1 0 00-1.6-.8l-5.333 4zM4.066 11.2a1 1 0 000 1.6l5.334 4A1 1 0 0011 16V8a1 1 0 00-1.6-.8l-5.334 4z" />
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12.066 11.2a1 1 0 000 1.6l5.334 4A1 1 0 0019 16V8a1 1 0 00-1.6-.8l-5.333 4zM4.066 11.2a1 1 0 000 1.6l5.334 4A1 1 0 0011 16V8a1 1 0 00-1.6-.8l-5.334 4z"
|
||||
/>
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
|
|
@ -148,7 +151,8 @@
|
|||
>
|
||||
{#if isLoading}
|
||||
<svg class="h-6 w-6 animate-spin" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
|
|
@ -163,14 +167,12 @@
|
|||
<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
|
||||
</svg>
|
||||
{/if}
|
||||
{:else if playIcon}
|
||||
{@render playIcon()}
|
||||
{:else}
|
||||
{#if playIcon}
|
||||
{@render playIcon()}
|
||||
{:else}
|
||||
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
{/if}
|
||||
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
|
|
@ -186,7 +188,12 @@
|
|||
{@render skipForwardIcon()}
|
||||
{:else}
|
||||
<svg class="h-6 w-6 text-theme" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.933 12.8a1 1 0 000-1.6L6.6 7.2A1 1 0 005 8v8a1 1 0 001.6.8l5.333-4zM19.933 12.8a1 1 0 000-1.6l-5.333-4A1 1 0 0013 8v8a1 1 0 001.6.8l5.333-4z" />
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M11.933 12.8a1 1 0 000-1.6L6.6 7.2A1 1 0 005 8v8a1 1 0 001.6.8l5.333-4zM19.933 12.8a1 1 0 000-1.6l-5.333-4A1 1 0 0013 8v8a1 1 0 001.6.8l5.333-4z"
|
||||
/>
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -28,13 +28,7 @@
|
|||
onClick?: () => void;
|
||||
}
|
||||
|
||||
let {
|
||||
tag,
|
||||
removable = false,
|
||||
clickable = false,
|
||||
onRemove,
|
||||
onClick
|
||||
}: Props = $props();
|
||||
let { tag, removable = false, clickable = false, onRemove, onClick }: Props = $props();
|
||||
|
||||
// Get tag color from either style.color (new format) or color (old format)
|
||||
const tagColor = $derived(tag.style?.color || tag.color || '#3b82f6');
|
||||
|
|
@ -84,7 +78,12 @@
|
|||
aria-label="Remove tag"
|
||||
>
|
||||
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue