Enable Svelte Action

[julien-blanchon]

Describe the feature in detail (code, mocks, or screenshots encouraged)

I would like to use custom made Svelte Motion transition (https://svelte-motion.gradientdescent.de/animation). I would be super conveniant to be able to pass the use:action to component directly without delegation.

Something like the use:useAction of svelte-material-ui would be great.

For reference:

• https://github.com/hperrin/svelte-material-ui/blob/19ea8edba225a22fbfbeeb76030a0d0f9ee1f8e5/packages/common/README.md?plain=1#L263-L292
• https://github.com/hperrin/svelte-material-ui/blob/19ea8edba225a22fbfbeeb76030a0d0f9ee1f8e5/packages/common/src/internal/useActions.ts#L30-L80

What type of pull request would this be?

New Feature

Provide relevant links or additional information.

No response

[julien-blanchon]

Typically this lead to such ugly code :{

<script lang="ts">
    import { Button } from '$lib/components/external/shadcn-ui/button/index.js';
    import { Input } from '$lib/components/external/shadcn-ui/input/index.js';
    import { Label } from '$lib/components/external/shadcn-ui/label/index.js';
    import * as Popover from '$lib/components/external/shadcn-ui/popover/index.js';
    import { Motion, AnimatePresence, type Variants, type Transition } from 'svelte-motion';
    import { Popover as PopoverPrimitive } from 'bits-ui';

    let open: boolean = false;

    const transition = {
        duration: 1,
        ease: [0.32, 0.72, 0, 1]
    } as Transition;

    const variants = {
        open: {
            opacity: 1,
            scale: 1,
            filter: 'blur(0px)',
            height: 'auto'
        },
        closed: {
            opacity: 0.6,
            scale: 0,
            filter: 'blur(2px)',
            height: 0
        }
    } as Variants;
</script>

<Popover.Root portal={null} bind:open>
    <Popover.Trigger asChild let:builder>
        <Button builders={[builder]} variant="outline">Open</Button>
    </Popover.Trigger>
    <PopoverPrimitive.Content asChild let:builder>
        <AnimatePresence show={open}>
            <Motion
                layoutId="popover"
                initial="closed"
                animate={open ? 'open' : 'closed'}
                {variants}
                {transition}
                style={{
                    transformOrigin: 'top'
                }}
                let:motion
            >
                <div
                    use:motion
                    use:builder.action
                    {...builder}
                    class="z-50 w-80 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none"
                >
                    <div class="grid gap-4">
                        <div class="space-y-2">
                            <h4 class="font-medium leading-none">Dimensions</h4>
                            <p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
                        </div>
                        <div class="grid gap-2">
                            <div class="grid grid-cols-3 items-center gap-4">
                                <Label for="width">Width</Label>
                                <Input id="width" value="100%" class="col-span-2 h-8" />
                            </div>
                            <div class="grid grid-cols-3 items-center gap-4">
                                <Label for="maxWidth">Max. width</Label>
                                <Input id="maxWidth" value="300px" class="col-span-2 h-8" />
                            </div>
                            <div class="grid grid-cols-3 items-center gap-4">
                                <Label for="height">Height</Label>
                                <Input id="height" value="25px" class="col-span-2 h-8" />
                            </div>
                            <div class="grid grid-cols-3 items-center gap-4">
                                <Label for="maxHeight">Max. height</Label>
                                <Input id="maxHeight" value="none" class="col-span-2 h-8" />
                            </div>
                        </div>
                    </div>
                </div>
            </Motion>
        </AnimatePresence>
    </PopoverPrimitive.Content>
</Popover.Root>