§10.2 seguia diciendo que la familia chart "no tiene prop ni provider y resuelve leyendo getComputedStyle(node).direction". Eso lo cerro 43a788083: los cinco que necesitan direccion declaran dir?: Direction y resuelven por createChartRtl(eidos, () => dir) -> activeEidosDir. Verificado por grep que no queda un solo getComputedStyle(...).direction en la familia. La linea me indujo a repetirlo. El registro historico de §9.20 se queda como estaba — describe lo que era cierto entonces —; lo corregido es lo que apunta hacia adelante. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>alpha-0.1-dir-prefs
parent
64df3d7b37
commit
b41669c438
@ -0,0 +1,35 @@
|
||||
<script lang="ts">
|
||||
/**
|
||||
* Eidos `<MediaPlayer.RestartButton>` — composes `<IconButton>` (ghost) via
|
||||
* soma's `child`; size from the player's eidos context. Opt-in: `AudioLayout`
|
||||
* does not compose it, so no existing bar grows a button.
|
||||
*/
|
||||
import * as MediaPlayer from '$soma/components/media-player';
|
||||
import { IconButton } from '$uix/eidos/components/icon-button';
|
||||
import { RotateCcw } from '$uix/eidos/components/icon';
|
||||
import { getMediaPlayerEidosCtx } from './context';
|
||||
import type { MediaPlayerRestartButtonProps } from './types';
|
||||
|
||||
let { children, child: outerChild, ...rest }: MediaPlayerRestartButtonProps = $props();
|
||||
const ctx = getMediaPlayerEidosCtx();
|
||||
const size = $derived(ctx?.size ?? 'md');
|
||||
</script>
|
||||
|
||||
<MediaPlayer.RestartButton {...rest}>
|
||||
{#snippet child({ props })}
|
||||
{@const p = props as Record<string, unknown>}
|
||||
{#if outerChild}
|
||||
{@render outerChild({ props })}
|
||||
{:else}
|
||||
<IconButton
|
||||
{...props}
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
{size}
|
||||
aria-label={p['aria-label'] as string}
|
||||
>
|
||||
{#if children}{@render children()}{:else}<RotateCcw {size} />{/if}
|
||||
</IconButton>
|
||||
{/if}
|
||||
{/snippet}
|
||||
</MediaPlayer.RestartButton>
|
||||
@ -0,0 +1,43 @@
|
||||
<script lang="ts">
|
||||
/**
|
||||
* Eidos `<MediaPlayer.SkipButton>` — composes `<IconButton>` (ghost) via
|
||||
* soma's `child`; size from the player's eidos context. SkipBack / SkipForward
|
||||
* glyph by `direction`, mirrored under RTL by the recipe like the other
|
||||
* directional glyphs.
|
||||
*/
|
||||
import * as MediaPlayer from '$soma/components/media-player';
|
||||
import { IconButton } from '$uix/eidos/components/icon-button';
|
||||
import { SkipBack, SkipForward } from '$uix/eidos/components/icon';
|
||||
import { getMediaPlayerEidosCtx } from './context';
|
||||
import type { MediaPlayerSkipButtonProps } from './types';
|
||||
|
||||
let {
|
||||
direction = 'next',
|
||||
children,
|
||||
child: outerChild,
|
||||
...rest
|
||||
}: MediaPlayerSkipButtonProps = $props();
|
||||
const ctx = getMediaPlayerEidosCtx();
|
||||
const size = $derived(ctx?.size ?? 'md');
|
||||
</script>
|
||||
|
||||
<MediaPlayer.SkipButton {direction} {...rest}>
|
||||
{#snippet child({ props })}
|
||||
{@const p = props as Record<string, unknown>}
|
||||
{#if outerChild}
|
||||
{@render outerChild({ props })}
|
||||
{:else}
|
||||
<IconButton
|
||||
{...props}
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
{size}
|
||||
aria-label={p['aria-label'] as string}
|
||||
>
|
||||
{#if children}{@render children()}{:else if direction === 'previous'}<SkipBack
|
||||
{size}
|
||||
/>{:else}<SkipForward {size} />{/if}
|
||||
</IconButton>
|
||||
{/if}
|
||||
{/snippet}
|
||||
</MediaPlayer.SkipButton>
|
||||
@ -0,0 +1,35 @@
|
||||
<script lang="ts">
|
||||
import { readableActive, writableActive } from '$libs/reactive';
|
||||
import { mergeProps } from '../../../props';
|
||||
import { createId } from '$active-uix/id';
|
||||
import { MediaPlayerRestartButtonProvider } from '../media-player-provider.svelte';
|
||||
import type { MediaPlayerRestartButtonProps } from '../types';
|
||||
|
||||
const uid = $props.id();
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
id = createId(uid, 'media-player-restart-button'),
|
||||
disabled = false,
|
||||
children,
|
||||
child,
|
||||
...restProps
|
||||
}: MediaPlayerRestartButtonProps = $props();
|
||||
|
||||
const state = MediaPlayerRestartButtonProvider.create({
|
||||
id: readableActive(() => id),
|
||||
ref: writableActive(
|
||||
() => ref,
|
||||
(v) => (ref = v)
|
||||
),
|
||||
disabled: readableActive(() => disabled)
|
||||
});
|
||||
|
||||
const mergedProps = $derived(mergeProps(restProps, state.props));
|
||||
</script>
|
||||
|
||||
{#if child}
|
||||
{@render child({ props: mergedProps })}
|
||||
{:else}
|
||||
<button {...mergedProps}>{@render children?.()}</button>
|
||||
{/if}
|
||||
@ -0,0 +1,37 @@
|
||||
<script lang="ts">
|
||||
import { readableActive, writableActive } from '$libs/reactive';
|
||||
import { mergeProps } from '../../../props';
|
||||
import { createId } from '$active-uix/id';
|
||||
import { MediaPlayerSkipButtonProvider } from '../media-player-provider.svelte';
|
||||
import type { MediaPlayerSkipButtonProps } from '../types';
|
||||
|
||||
const uid = $props.id();
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
id = createId(uid, 'media-player-skip-button'),
|
||||
direction = 'next',
|
||||
disabled = false,
|
||||
children,
|
||||
child,
|
||||
...restProps
|
||||
}: MediaPlayerSkipButtonProps = $props();
|
||||
|
||||
const state = MediaPlayerSkipButtonProvider.create({
|
||||
id: readableActive(() => id),
|
||||
ref: writableActive(
|
||||
() => ref,
|
||||
(v) => (ref = v)
|
||||
),
|
||||
direction: readableActive(() => direction),
|
||||
disabled: readableActive(() => disabled)
|
||||
});
|
||||
|
||||
const mergedProps = $derived(mergeProps(restProps, state.props));
|
||||
</script>
|
||||
|
||||
{#if child}
|
||||
{@render child({ props: mergedProps })}
|
||||
{:else}
|
||||
<button {...mergedProps}>{@render children?.()}</button>
|
||||
{/if}
|
||||
Loading…
Reference in new issue