feat(primitives): media-editor components, category reorg, perf + type cleanup
Reorganize components into category folders (forms/canvas/overlays/etc.); add the media-editor headless family (timeline, curve-editor, waveform, crop, color picker, etc.); apply perf fixes (O(1) collection lookups, plain-object drag state, gesture-leak teardown, shallowRef color state, rect caching) and replace source `any` with proper types.
This commit is contained in:
@@ -0,0 +1,42 @@
|
||||
<script lang="ts">
|
||||
import type { PrimitiveProps } from '../../internal/primitive';
|
||||
|
||||
/**
|
||||
* The base ("before") layer of the comparison — the full, unclipped content
|
||||
* that sits underneath. Rendered inside `CompareSliderRoot` and absolutely
|
||||
* positioned to fill it (`inset: 0`). Put the original image / view here; the
|
||||
* `CompareSliderAfter` layer is drawn on top and clipped to reveal it.
|
||||
*/
|
||||
export interface CompareSliderBeforeProps extends PrimitiveProps {}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Primitive } from '../../internal/primitive';
|
||||
import { useForwardExpose } from '@robonen/vue';
|
||||
import { useCompareSliderContext } from './context';
|
||||
|
||||
const { as = 'div' } = defineProps<CompareSliderBeforeProps>();
|
||||
const ctx = useCompareSliderContext();
|
||||
const { forwardRef } = useForwardExpose();
|
||||
|
||||
// Stable shape: same keys in the same order for a monomorphic style object.
|
||||
const style = {
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
right: '0',
|
||||
bottom: '0',
|
||||
left: '0',
|
||||
} as const;
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Primitive
|
||||
:ref="forwardRef"
|
||||
:as="as"
|
||||
:style="style"
|
||||
:data-disabled="ctx.disabled.value ? '' : undefined"
|
||||
:data-orientation="ctx.orientation.value"
|
||||
>
|
||||
<slot />
|
||||
</Primitive>
|
||||
</template>
|
||||
Reference in New Issue
Block a user