feat(Drawer): add default padding classes for content snippet
This commit is contained in:
@@ -85,8 +85,8 @@ $effect(() => {
|
|||||||
{/snippet}
|
{/snippet}
|
||||||
</IconButton>
|
</IconButton>
|
||||||
{/snippet}
|
{/snippet}
|
||||||
{#snippet content()}
|
{#snippet content({ className })}
|
||||||
<div class="flex flex-col gap-6 px-2 py-4">
|
<div class={cn(className, 'flex flex-col gap-6')}>
|
||||||
{#each controlManager.controls as control (control.id)}
|
{#each controlManager.controls as control (control.id)}
|
||||||
<ComboControlV2
|
<ComboControlV2
|
||||||
control={control.instance}
|
control={control.instance}
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ import type { Snippet } from 'svelte';
|
|||||||
interface Props {
|
interface Props {
|
||||||
isOpen?: boolean;
|
isOpen?: boolean;
|
||||||
trigger?: Snippet<[{ isOpen: boolean; onClick: () => void }]>;
|
trigger?: Snippet<[{ isOpen: boolean; onClick: () => void }]>;
|
||||||
content?: Snippet<[{ isOpen: boolean }]>;
|
content?: Snippet<[{ isOpen: boolean; className?: string }]>;
|
||||||
contentClassName?: string;
|
contentClassName?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -35,7 +35,7 @@ function handleClick() {
|
|||||||
</Button>
|
</Button>
|
||||||
{/if}
|
{/if}
|
||||||
</DrawerTrigger>
|
</DrawerTrigger>
|
||||||
<DrawerContent class={cn('min-h-60', contentClassName)}>
|
<DrawerContent>
|
||||||
{@render content?.({ isOpen })}
|
{@render content?.({ isOpen, className: cn('min-h-60 px-2 pt-4 pb-8', contentClassName) })}
|
||||||
</DrawerContent>
|
</DrawerContent>
|
||||||
</DrawerRoot>
|
</DrawerRoot>
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { ResponsiveManager } from '$shared/lib';
|
import type { ResponsiveManager } from '$shared/lib';
|
||||||
|
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
||||||
import {
|
import {
|
||||||
Drawer,
|
Drawer,
|
||||||
IconButton,
|
IconButton,
|
||||||
@@ -36,10 +37,9 @@ const responsive = getContext<ResponsiveManager>('responsive');
|
|||||||
</IconButton>
|
</IconButton>
|
||||||
{/snippet}
|
{/snippet}
|
||||||
|
|
||||||
{#snippet content({ isOpen })}
|
{#snippet content({ isOpen, className })}
|
||||||
<div class="px-2 py-4">
|
<div class={cn(className, 'flex flex-col gap-6')}>
|
||||||
<SelectComparedFonts {sliderPos} />
|
<SelectComparedFonts {sliderPos} />
|
||||||
</div>
|
|
||||||
<TypographyControls
|
<TypographyControls
|
||||||
{sliderPos}
|
{sliderPos}
|
||||||
{isDragging}
|
{isDragging}
|
||||||
@@ -48,6 +48,7 @@ const responsive = getContext<ResponsiveManager>('responsive');
|
|||||||
containerWidth={container?.clientWidth}
|
containerWidth={container?.clientWidth}
|
||||||
staticPosition
|
staticPosition
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
{/snippet}
|
{/snippet}
|
||||||
</Drawer>
|
</Drawer>
|
||||||
{:else}
|
{:else}
|
||||||
|
|||||||
@@ -116,7 +116,7 @@ $effect(() => {
|
|||||||
out:fade={{ duration: 300, delay: 300 }}
|
out:fade={{ duration: 300, delay: 300 }}
|
||||||
>
|
>
|
||||||
{#if staticPosition}
|
{#if staticPosition}
|
||||||
<div class="flex flex-col gap-6 px-2 py-4">
|
<div class="flex flex-col gap-6">
|
||||||
<Input
|
<Input
|
||||||
class="p-6"
|
class="p-6"
|
||||||
bind:value={comparisonStore.text}
|
bind:value={comparisonStore.text}
|
||||||
|
|||||||
Reference in New Issue
Block a user