parent
d3efdb5c30
commit
5895f9d8b8
@ -0,0 +1,27 @@
|
||||
// Meter — eidos compound API, disciplined option C.
|
||||
//
|
||||
// import { Meter } from '$uix/eidos/components/meter';
|
||||
//
|
||||
// <Meter value={72} low={30} high={90}>
|
||||
// <Meter.Indicator />
|
||||
// </Meter>
|
||||
import MeterRoot from './meter.svelte';
|
||||
import Indicator from './meter-indicator.svelte';
|
||||
|
||||
type MeterNamespace = typeof MeterRoot & {
|
||||
Indicator: typeof Indicator;
|
||||
};
|
||||
|
||||
const Meter = MeterRoot as MeterNamespace;
|
||||
Meter.Indicator = Indicator;
|
||||
|
||||
export { Meter };
|
||||
|
||||
export default Meter;
|
||||
|
||||
export type {
|
||||
MeterProps,
|
||||
MeterIndicatorProps as IndicatorProps,
|
||||
MeterSize,
|
||||
MeterZone
|
||||
} from './types';
|
||||
@ -0,0 +1,10 @@
|
||||
<script lang="ts">
|
||||
import { Indicator as SomaMeterIndicator } from '$soma/components/meter';
|
||||
import type { MeterIndicatorProps } from './types';
|
||||
|
||||
let { children, ...rest }: MeterIndicatorProps = $props();
|
||||
</script>
|
||||
|
||||
<SomaMeterIndicator {...rest}>
|
||||
{@render children?.()}
|
||||
</SomaMeterIndicator>
|
||||
@ -0,0 +1,47 @@
|
||||
[data-meter] {
|
||||
--_meter-height: var(--meter-height-md);
|
||||
--_meter-radius: var(--meter-radius-md);
|
||||
--_meter-indicator-bg: var(--meter-indicator-bg-optimum);
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
inline-size: 100%;
|
||||
block-size: var(--_meter-height);
|
||||
border-radius: var(--_meter-radius);
|
||||
background: var(--meter-track-bg);
|
||||
}
|
||||
|
||||
[data-meter][data-size='sm'] {
|
||||
--_meter-height: var(--meter-height-sm);
|
||||
--_meter-radius: var(--meter-radius-sm);
|
||||
}
|
||||
|
||||
[data-meter][data-size='lg'] {
|
||||
--_meter-height: var(--meter-height-lg);
|
||||
--_meter-radius: var(--meter-radius-lg);
|
||||
}
|
||||
|
||||
[data-meter][data-state='below'] {
|
||||
--_meter-indicator-bg: var(--meter-indicator-bg-below);
|
||||
}
|
||||
|
||||
[data-meter][data-state='above'] {
|
||||
--_meter-indicator-bg: var(--meter-indicator-bg-above);
|
||||
}
|
||||
|
||||
[data-meter-indicator] {
|
||||
display: block;
|
||||
inline-size: calc(var(--soma-meter-value-pct, 0) * 1%);
|
||||
block-size: 100%;
|
||||
border-radius: inherit;
|
||||
background: var(--_meter-indicator-bg);
|
||||
transition:
|
||||
inline-size var(--meter-transition-duration) var(--meter-transition-ease),
|
||||
background var(--meter-transition-duration) var(--meter-transition-ease);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
[data-meter-indicator] {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
<script lang="ts">
|
||||
/**
|
||||
* Eidos `<Meter>` — visual wrapper over Soma's meter primitive.
|
||||
* Soma owns ARIA value state and zone classification; Eidos adds `size`.
|
||||
*/
|
||||
import { ActiveEidos } from '$uix/eidos';
|
||||
import { Provider as SomaMeterProvider } from '$soma/components/meter';
|
||||
import type { MeterProps } from './types';
|
||||
|
||||
let { size = 'md', children, ...rest }: MeterProps = $props();
|
||||
|
||||
const eidos = ActiveEidos.require();
|
||||
const resolvedSize = $derived(eidos.resolve(size, 'md'));
|
||||
</script>
|
||||
|
||||
<SomaMeterProvider {...rest} data-size={resolvedSize}>
|
||||
{@render children?.()}
|
||||
</SomaMeterProvider>
|
||||
@ -0,0 +1,22 @@
|
||||
import type {
|
||||
IndicatorProps as SomaMeterIndicatorProps,
|
||||
MeterZone,
|
||||
ProviderProps as SomaMeterProviderProps
|
||||
} from '$soma/components/meter';
|
||||
import type { ResponsiveProp, Size } from '$uix/eidos/lib/types';
|
||||
|
||||
export type MeterSize = Extract<Size, 'sm' | 'md' | 'lg'>;
|
||||
|
||||
/**
|
||||
* Props for the eidos `<Meter>`.
|
||||
*
|
||||
* Extends Soma's meter with visual sizing only. Zone state (`below`,
|
||||
* `optimum`, `above`) is owned by Soma and emitted through `data-state`.
|
||||
*/
|
||||
export type MeterProps = SomaMeterProviderProps & {
|
||||
/** Visual size. Accepts a responsive map resolved by ActiveEidos. @default 'md' */
|
||||
size?: ResponsiveProp<MeterSize>;
|
||||
};
|
||||
|
||||
export type MeterIndicatorProps = SomaMeterIndicatorProps;
|
||||
export type { MeterZone };
|
||||
@ -0,0 +1,27 @@
|
||||
// Progress — eidos compound API, disciplined option C.
|
||||
//
|
||||
// import { Progress } from '$uix/eidos/components/progress';
|
||||
//
|
||||
// <Progress value={64}>
|
||||
// <Progress.Indicator />
|
||||
// </Progress>
|
||||
import ProgressRoot from './progress.svelte';
|
||||
import Indicator from './progress-indicator.svelte';
|
||||
|
||||
type ProgressNamespace = typeof ProgressRoot & {
|
||||
Indicator: typeof Indicator;
|
||||
};
|
||||
|
||||
const Progress = ProgressRoot as ProgressNamespace;
|
||||
Progress.Indicator = Indicator;
|
||||
|
||||
export { Progress };
|
||||
|
||||
export default Progress;
|
||||
|
||||
export type {
|
||||
ProgressProps,
|
||||
ProgressIndicatorProps as IndicatorProps,
|
||||
ProgressSize,
|
||||
ProgressState
|
||||
} from './types';
|
||||
@ -0,0 +1,10 @@
|
||||
<script lang="ts">
|
||||
import { Indicator as SomaProgressIndicator } from '$soma/components/progress';
|
||||
import type { ProgressIndicatorProps } from './types';
|
||||
|
||||
let { children, ...rest }: ProgressIndicatorProps = $props();
|
||||
</script>
|
||||
|
||||
<SomaProgressIndicator {...rest}>
|
||||
{@render children?.()}
|
||||
</SomaProgressIndicator>
|
||||
@ -0,0 +1,63 @@
|
||||
[data-progress] {
|
||||
--_progress-height: var(--progress-height-md);
|
||||
--_progress-radius: var(--progress-radius-md);
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
inline-size: 100%;
|
||||
block-size: var(--_progress-height);
|
||||
border-radius: var(--_progress-radius);
|
||||
background: var(--progress-track-bg);
|
||||
}
|
||||
|
||||
[data-progress][data-size='sm'] {
|
||||
--_progress-height: var(--progress-height-sm);
|
||||
--_progress-radius: var(--progress-radius-sm);
|
||||
}
|
||||
|
||||
[data-progress][data-size='lg'] {
|
||||
--_progress-height: var(--progress-height-lg);
|
||||
--_progress-radius: var(--progress-radius-lg);
|
||||
}
|
||||
|
||||
[data-progress-indicator] {
|
||||
display: block;
|
||||
inline-size: calc(var(--soma-progress-value-pct, 0) * 1%);
|
||||
block-size: 100%;
|
||||
border-radius: inherit;
|
||||
background: var(--progress-indicator-bg);
|
||||
transition:
|
||||
inline-size var(--progress-transition-duration) var(--progress-transition-ease),
|
||||
background var(--progress-transition-duration) var(--progress-transition-ease);
|
||||
}
|
||||
|
||||
[data-progress][data-state='loaded'] [data-progress-indicator] {
|
||||
background: var(--progress-indicator-bg-loaded);
|
||||
}
|
||||
|
||||
[data-progress][data-state='indeterminate'] [data-progress-indicator] {
|
||||
inline-size: var(--progress-indeterminate-width);
|
||||
animation: progress-indeterminate var(--progress-indeterminate-duration)
|
||||
var(--progress-indeterminate-ease) infinite;
|
||||
}
|
||||
|
||||
@keyframes progress-indeterminate {
|
||||
from {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(300%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
[data-progress-indicator] {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
[data-progress][data-state='indeterminate'] [data-progress-indicator] {
|
||||
animation: none;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
<script lang="ts">
|
||||
/**
|
||||
* Eidos `<Progress>` — visual wrapper over Soma's progressbar.
|
||||
* Soma owns ARIA value state and `data-state`; Eidos adds `size`.
|
||||
*/
|
||||
import { ActiveEidos } from '$uix/eidos';
|
||||
import { Provider as SomaProgressProvider } from '$soma/components/progress';
|
||||
import type { ProgressProps } from './types';
|
||||
|
||||
let { size = 'md', children, ...rest }: ProgressProps = $props();
|
||||
|
||||
const eidos = ActiveEidos.require();
|
||||
const resolvedSize = $derived(eidos.resolve(size, 'md'));
|
||||
</script>
|
||||
|
||||
<SomaProgressProvider {...rest} data-size={resolvedSize}>
|
||||
{@render children?.()}
|
||||
</SomaProgressProvider>
|
||||
@ -0,0 +1,23 @@
|
||||
import type {
|
||||
IndicatorProps as SomaProgressIndicatorProps,
|
||||
ProgressState,
|
||||
ProviderProps as SomaProgressProviderProps
|
||||
} from '$soma/components/progress';
|
||||
import type { ResponsiveProp, Size } from '$uix/eidos/lib/types';
|
||||
|
||||
export type ProgressSize = Extract<Size, 'sm' | 'md' | 'lg'>;
|
||||
|
||||
/**
|
||||
* Props for the eidos `<Progress>`.
|
||||
*
|
||||
* Extends Soma's progressbar with visual sizing only. Completion state
|
||||
* (`indeterminate`, `loading`, `loaded`) is owned by Soma and emitted through
|
||||
* `data-state`.
|
||||
*/
|
||||
export type ProgressProps = SomaProgressProviderProps & {
|
||||
/** Visual size. Accepts a responsive map resolved by ActiveEidos. @default 'md' */
|
||||
size?: ResponsiveProp<ProgressSize>;
|
||||
};
|
||||
|
||||
export type ProgressIndicatorProps = SomaProgressIndicatorProps;
|
||||
export type { ProgressState };
|
||||
Loading…
Reference in new issue