windmill-components 1.86.0 → 1.89.0

package/components/apps/editor/settingsPanel/triggerLists/TriggerBadgesList.svelte

@@ -1,157 +0,0 @@
-<script>import { Button } from '../../../../common';
-import { classNames } from '../../../../../utils';
-import { Plus, X } from 'lucide-svelte';
-import { getContext } from 'svelte';
-import { getAllRecomputeIdsForComponent } from '../../appUtils';
-export let inputDependencies = [];
-export let inlineScript;
-export let onClick = false;
-export let onLoad = false;
-export let id = undefined;
-export let recomputeOnInputChanged = false;
-const colors = {
-    red: 'text-red-800 border-red-600 bg-red-100',
-    green: 'text-green-800 border-green-600 bg-green-100',
-    indigo: 'text-indigo-800 border-indigo-600 bg-indigo-100',
-    blue: 'text-blue-800 border-blue-600 bg-blue-100'
-};
-let badgeClass = 'inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium border';
-const { app, worldStore } = getContext('AppViewerContext');
-const { connectingInput } = getContext('AppViewerContext');
-let addingDependency = false;
-function applyConnection() {
-    if (!$connectingInput.opened && $connectingInput.input !== undefined && addingDependency) {
-        if ($connectingInput.input.connection) {
-            const x = {
-                id: $connectingInput.input.connection.componentId,
-                key: $connectingInput.input.connection.path
-            };
-            if (!inlineScript) {
-                return;
-            }
-            if (inlineScript.refreshOn?.find((y) => y.id === x.id && y.key === x.key)) {
-                return;
-            }
-            if (!inlineScript.refreshOn) {
-                inlineScript.refreshOn = [x];
-            }
-            else {
-                inlineScript.refreshOn.push(x);
-            }
-            inlineScript = JSON.parse(JSON.stringify(inlineScript));
-            addingDependency = false;
-        }
-        $connectingInput = {
-            opened: false,
-            input: undefined,
-            hoveredComponent: undefined
-        };
-        $app = $app;
-        $worldStore = $worldStore;
-    }
-}
-$: frontendDependencies =
-    inlineScript?.language === 'frontend'
-        ? inlineScript?.refreshOn?.map((x) => `${x.id} - ${x.key}`) ?? []
-        : undefined;
-$: $connectingInput && applyConnection();
-$: recomputedBadges = getAllRecomputeIdsForComponent($app, id);
-function deleteDep(index) {
-    if (inlineScript) {
-        inlineScript.refreshOn?.splice(index, 1);
-    }
-    inlineScript = inlineScript;
-}
-</script>
-
-<div class="flex w-full flex-col items-start gap-2 mt-2 mb-1">
-	{#if recomputedBadges.length === 0 && !onLoad && !onClick && inputDependencies?.length === 0 && !frontendDependencies}
-		<p class="text-xs font-semibold text-slate-800">
-			This script has no triggers. It will never run.
-		</p>
-	{:else}
-		<div class="text-sm font-semibold text-gray-800">Triggered by</div>
-
-		{#if onLoad || onClick}
-			<div class="w-full">
-				<div class="text-xs font-semibold text-slate-800 mb-1">Events</div>
-				<div class="flex flex-row gap-2 flex-wrap">
-					{#if onLoad}
-						<span class={classNames(badgeClass, colors['green'])}>Start</span>
-						<span class={classNames(badgeClass, colors['green'])}>Refresh</span>
-					{/if}
-					{#if onClick}
-						<span class={classNames(badgeClass, colors['green'])}>Click</span>
-					{/if}
-				</div>
-			</div>
-		{/if}
-		{#if inputDependencies.length > 0 && (recomputeOnInputChanged ?? true)}
-			<div class="w-full">
-				<div class="flex justify-between items-center mb-1">
-					<div class="text-xs font-semibold text-slate-800">Change on values</div>
-				</div>
-				<div class="flex flex-row gap-2 flex-wrap">
-					{#each inputDependencies as label}
-						<span class={classNames(badgeClass, colors['blue'])}>
-							{label}
-						</span>
-					{/each}
-				</div>
-			</div>
-		{/if}
-
-		{#if recomputedBadges?.length > 0}
-			<div class="w-full">
-				<div class="text-xs font-semibold text-slate-800 mb-1">Computation of</div>
-				<div class="flex flex-row gap-2 flex-wrap">
-					{#each recomputedBadges as badge}
-						<span class={classNames(badgeClass, colors['indigo'])}>{badge}</span>
-					{/each}
-				</div>
-			</div>
-		{/if}
-	{/if}
-
-	{#if frontendDependencies && recomputeOnInputChanged}
-		<div class="w-full">
-			<div class="flex justify-between items-center">
-				<div class="text-xs font-semibold text-slate-800 mb-1">Change on values</div>
-				{#if inlineScript?.language === 'frontend'}
-					<Button
-						variant="border"
-						size="xs"
-						color="light"
-						btnClasses="!px-1 !py-0.5"
-						on:click={() => {
-							addingDependency = true
-							$connectingInput = {
-								opened: true,
-								input: undefined,
-								hoveredComponent: undefined
-							}
-						}}
-					>
-						<div class="flex flex-row gap-1 items-center">
-							Add dependency
-							<Plus size={14} />
-						</div>
-					</Button>
-				{/if}
-			</div>
-			<div class="flex flex-row gap-2 flex-wrap">
-				{#each frontendDependencies as label, index}
-					<span class={classNames(badgeClass, colors['red'])}>
-						{label}
-						<button
-							on:click={() => deleteDep(index)}
-							class="bg-red-300 cursor-pointer hover:bg-red-400 ml-1 rounded-md"
-						>
-							<X size={18} class="p-0.5" />
-						</button>
-					</span>
-				{/each}
-			</div>
-		</div>
-	{/if}
-</div>

package/components/apps/types.d.ts

@@ -1,164 +0,0 @@
-import type { Schema } from '../../common';
-import type { Preview } from '../../gen';
-import type { History } from '../../history';
-import type { Writable } from 'svelte/store';
-import type { AppComponent, components } from './editor/component/components';
-import type { AppInput, ConnectedAppInput, ConnectedInput, EvalAppInput, ResultAppInput, RowAppInput, StaticAppInput, UploadAppInput, UserAppInput } from './inputType';
-import type { World } from './rx';
-import type { FilledItem } from './svelte-grid/types';
-export type HorizontalAlignment = 'left' | 'center' | 'right';
-export type VerticalAlignment = 'top' | 'center' | 'bottom';
-export type Aligned = {
-    horizontalAlignment: HorizontalAlignment;
-    verticalAlignment: VerticalAlignment;
-};
-export interface GeneralAppInput {
-    onlyStatic?: boolean;
-    tooltip?: string;
-    placeholder?: string;
-}
-export type ComponentCssProperty = {
-    class?: string;
-    style?: string;
-};
-export type ComponentCustomCSS<T extends keyof typeof components> = Partial<(typeof components)[T]['customCss']>;
-export type Configuration = StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput | EvalAppInput | UploadAppInput | ResultAppInput;
-export type StaticConfiguration = GeneralAppInput & StaticAppInput;
-export type RichConfigurationT<T> = (T & {
-    type: AppInput['type'];
-}) | {
-    type: 'oneOf';
-    selected: string;
-    tooltip?: string;
-    labels?: Record<string, string>;
-    configuration: Record<string, Record<string, T>>;
-};
-export type RichConfiguration = RichConfigurationT<Configuration>;
-export type RichConfigurations = Record<string, RichConfiguration>;
-export type StaticRichConfigurations = Record<string, RichConfigurationT<GeneralAppInput & (StaticAppInput | EvalAppInput)>>;
-export interface BaseAppComponent extends Partial<Aligned> {
-    id: ComponentID;
-    componentInput: AppInput | undefined;
-    configuration: RichConfigurations;
-    customCss?: Record<string, ComponentCssProperty>;
-    numberOfSubgrids?: number;
-}
-export type ComponentSet = {
-    title: string;
-    components: Readonly<AppComponent['type'][]>;
-};
-type SectionID = string;
-export type AppSection = {
-    components: AppComponent[];
-    id: SectionID;
-};
-export type GridItem = FilledItem<AppComponent>;
-export type InlineScript = {
-    content: string;
-    language: Preview.language | 'frontend';
-    path?: string;
-    schema?: Schema;
-    refreshOn?: {
-        id: string;
-        key: string;
-    }[];
-};
-export type AppCssItemName = 'viewer' | 'grid' | AppComponent['type'];
-export type App = {
-    grid: GridItem[];
-    fullscreen: boolean;
-    norefreshbar?: boolean;
-    unusedInlineScripts: Array<{
-        name: string;
-        inlineScript: InlineScript;
-    }>;
-    hiddenInlineScripts: Array<{
-        name: string;
-        inlineScript: InlineScript | undefined;
-        fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
-        autoRefresh?: boolean;
-        doNotRecomputeOnInputChanged?: boolean;
-        recomputeOnInputChanged?: boolean;
-        noBackendValue?: any;
-    }>;
-    css?: Partial<Record<AppCssItemName, Record<string, ComponentCssProperty>>>;
-    subgrids?: Record<string, GridItem[]>;
-};
-export type ConnectingInput = {
-    opened: boolean;
-    input?: ConnectedInput;
-    sourceName?: string;
-    hoveredComponent: string | undefined;
-};
-export type AppViewerContext = {
-    worldStore: Writable<World>;
-    app: Writable<App>;
-    summary: Writable<string>;
-    initialized: Writable<{
-        initializedComponents: string[];
-        initialized: boolean;
-    }>;
-    selectedComponent: Writable<string[] | undefined>;
-    mode: Writable<EditorMode>;
-    connectingInput: Writable<ConnectingInput>;
-    breakpoint: Writable<EditorBreakpoint>;
-    runnableComponents: Writable<Record<string, {
-        autoRefresh: boolean;
-        refreshOnStart?: boolean;
-        cb: (inlineScript?: InlineScript) => Promise<void>;
-    }>>;
-    staticExporter: Writable<Record<string, () => any>>;
-    appPath: string;
-    workspace: string;
-    onchange: (() => void) | undefined;
-    isEditor: boolean;
-    jobs: Writable<{
-        job: string;
-        component: string;
-        result?: string;
-        error?: string;
-    }[]>;
-    noBackend: boolean;
-    errorByComponent: Writable<Record<string, {
-        error: string;
-        componentId: string;
-    }>>;
-    openDebugRun: Writable<((componentID: string) => void) | undefined>;
-    focusedGrid: Writable<FocusedGrid | undefined>;
-    stateId: Writable<number>;
-    parentWidth: Writable<number>;
-    state: Writable<Record<string, any>>;
-    componentControl: Writable<Record<string, {
-        left?: () => boolean;
-        right?: (skipTableActions?: boolean | undefined) => string | boolean;
-        setTab?: (index: number) => void;
-        agGrid?: {
-            api: any;
-            columnApi: any;
-        };
-        setCode?: (value: string) => void;
-    }>>;
-    hoverStore: Writable<string | undefined>;
-    allIdsInPath: Writable<string[]>;
-};
-export type AppEditorContext = {
-    history: History<App> | undefined;
-    pickVariableCallback: Writable<((path: string) => void) | undefined>;
-    ontextfocus: Writable<(() => void) | undefined>;
-    selectedComponentInEditor: Writable<string | undefined>;
-    movingcomponents: Writable<string[] | undefined>;
-};
-export type FocusedGrid = {
-    parentComponentId: string;
-    subGridIndex: number;
-};
-export type EditorMode = 'dnd' | 'preview';
-export type EditorBreakpoint = 'sm' | 'lg';
-export declare const IS_APP_PUBLIC_CONTEXT_KEY: "isAppPublicContext";
-type ComponentID = string;
-export type ContextPanelContext = {
-    search: Writable<string>;
-    manuallyOpened: Writable<Record<string, boolean>>;
-    hasResult: Writable<Record<string, boolean>>;
-};
-export {};

package/components/common/actionRow/ActionRow.svelte

@@ -1,32 +0,0 @@
-<script>export let applyPageWidth = false;
-export let stickToTop = false;
-$: wide = applyPageWidth ? 'max-w-6xl mx-auto px-4 sm:px-6 md:px-8' : '';
-let scrollY = 0;
-</script>
-
-<svelte:window bind:scrollY />
-
-<div
-	class={'bg-white py-3 ' +
-		(stickToTop ? 'lg:sticky lg:top-0 z-[500] border-b border-gray-200 border-opacity-0 duration-300 '
-			+ (scrollY >= 30 ? 'border-opacity-100 ' : '') : '')
-			+ ($$props.class || '')}
->
-	<div class={'w-full flex flex-wrap justify-between items-center gap-4 ' + wide}>
-		<div class="flex flex-wrap items-center gap-2">
-			{#if $$slots.left}
-				<slot name="left" />
-			{/if}
-		</div>
-		<div class="flex flex-wrap items-center gap-2">
-			{#if $$slots.middle}
-				<slot name="middle" />
-			{/if}
-		</div>
-		<div class="flex flex-wrap items-center gap-2">
-			{#if $$slots.right}
-				<slot name="right" />
-			{/if}
-		</div>
-	</div>
-</div>

package/components/common/button/Button.svelte

@@ -1,135 +0,0 @@
-<script>import { createEventDispatcher } from 'svelte';
-import Icon from 'svelte-awesome';
-import { ButtonType } from './model';
-import { goto } from '$app/navigation';
-import { Loader2 } from 'lucide-svelte';
-import { twMerge } from 'tailwind-merge';
-import ButtonDropdown from './ButtonDropdown.svelte';
-import { MenuItem } from '@rgossiaux/svelte-headlessui';
-export let size = 'md';
-export let spacingSize = size;
-export let color = 'blue';
-export let variant = 'contained';
-export let btnClasses = '';
-export let wrapperClasses = '';
-export let disabled = false;
-export let href = undefined;
-export let target = '_self';
-export let iconOnly = false;
-export let startIcon = undefined;
-export let endIcon = undefined;
-export let element = undefined;
-export let id = '';
-export let nonCaptureEvent = false;
-export let buttonType = 'button';
-export let loading = false;
-export let title = undefined;
-export let style = '';
-export let dropdownItems = undefined;
-const dispatch = createEventDispatcher();
-// Order of classes: border, border modifier, bg, bg modifier, text, text modifier, everything else
-const colorVariants = {
-    none: {
-        border: '',
-        contained: ''
-    },
-    blue: {
-        border: 'border-frost-500 hover:border-frost-700 focus:border-frost-700 bg-white hover:bg-frost-100 focus:bg-frost-100 text-frost-500 hover:text-frost-700 focus:text-frost-700 focus:ring-frost-300',
-        contained: 'bg-frost-500 hover:bg-frost-700 focus:bg-frost-700 text-white focus:ring-frost-300'
-    },
-    red: {
-        border: 'border-red-600 hover:border-red-700 bg-white hover:bg-red-100 text-red-600 hover:text-red-700 focus:ring-red-300',
-        contained: 'bg-red-600 hover:bg-red-700 text-white focus:ring-red-300'
-    },
-    green: {
-        border: 'border-green-600 hover:border-green-700 bg-white hover:bg-green-100 text-green-600 hover:text-green-700 focus:ring-green-300',
-        contained: 'bg-green-600 hover:bg-green-700 text-white focus:ring-green-300'
-    },
-    dark: {
-        border: 'border-gray-800 hover:border-gray-900 focus:border-gray-900 bg-white hover:bg-gray-200 focus:bg-gray-200 text-gray-800 hover:text-gray-900 focus:text-gray-900 focus:ring-gray-300',
-        contained: 'bg-gray-700 hover:bg-gray-900 focus:bg-gray-900 text-white focus:ring-gray-300'
-    },
-    gray: {
-        border: 'border-gray-600 hover:border-gray-900 focus:border-gray-900 bg-white hover:bg-gray-200 focus:bg-gray-200 text-gray-800 hover:text-gray-900 focus:text-gray-900 focus:ring-gray-300',
-        contained: 'bg-gray-700/90 hover:bg-gray-900/90 focus:bg-gray-900/90 text-white focus:ring-gray-300'
-    },
-    light: {
-        border: 'border border-gray-300 bg-white hover:bg-gray-100 focus:bg-gray-100 text-gray-700 hover:text-gray-800 focus:text-gray-800 focus:ring-gray-300',
-        contained: 'bg-white border-gray-300  hover:bg-gray-100 focus:bg-gray-100 text-gray-700 focus:ring-gray-300'
-    }
-};
-$: buttonProps = {
-    id,
-    class: twMerge(colorVariants?.[color]?.[variant], variant === 'border' ? 'border' : '', ButtonType.FontSizeClasses[size], ButtonType.SpacingClasses[spacingSize][variant], 'focus:ring-2 font-semibold', dropdownItems ? 'rounded-l-md h-full' : 'rounded-md', 'justify-center items-center text-center whitespace-nowrap inline-flex', btnClasses, disabled ? '!bg-gray-300 !text-gray-600 !cursor-not-allowed' : '', 'transition-all'),
-    href,
-    target,
-    tabindex: disabled ? -1 : 0,
-    type: buttonType,
-    title,
-    ...$$restProps
-};
-async function onClick(event) {
-    if (!nonCaptureEvent) {
-        event.preventDefault();
-        event.stopPropagation();
-        dispatch('click', event);
-        if (href) {
-            if (href.startsWith('http') || target == '_blank') {
-                window.open(href, target);
-            }
-            else {
-                loading = true;
-                await goto(href);
-                loading = false;
-            }
-        }
-    }
-}
-$: isSmall = size === 'xs' || size === 'sm';
-$: startIconClass = twMerge(iconOnly ? undefined : isSmall ? 'mr-1' : 'mr-2', startIcon?.classes);
-$: endIconClass = twMerge(iconOnly ? undefined : isSmall ? 'ml-1' : 'ml-2', endIcon?.classes);
-</script>
-
-<div class="{dropdownItems ? 'flex flex-row divide-x divide-frost-600' : ''} {wrapperClasses}">
-	<svelte:element
-		this={href ? 'a' : 'button'}
-		bind:this={element}
-		on:pointerdown
-		on:click={onClick}
-		on:focus
-		on:blur
-		{...buttonProps}
-		disabled={disabled || loading}
-		type="submit"
-		{style}
-	>
-		{#if loading}
-			<Loader2 class="animate-spin mr-1" size={14} />
-		{:else if startIcon}
-			<Icon data={startIcon.icon} class={startIconClass} scale={ButtonType.IconScale[size]} />
-		{/if}
-
-		{#if !iconOnly}
-			<slot />
-		{/if}
-		{#if endIcon}
-			<Icon data={endIcon.icon} class={endIconClass} scale={ButtonType.IconScale[size]} />
-		{/if}
-	</svelte:element>
-
-	{#if dropdownItems}
-		<div class={twMerge(buttonProps.class, 'rounded-r-md rounded-l-none m-0 p-0 h-auto')}>
-			<ButtonDropdown>
-				<svelte:fragment slot="items">
-					{#each dropdownItems as item}
-						<MenuItem on:click={item.onClick} href={item.href}>
-							<div class="!text-gray-700 px-4 py-2 my-1 cursor-pointer hover:bg-gray-100 !text-sm">
-								{item.label}
-							</div>
-						</MenuItem>
-					{/each}
-				</svelte:fragment>
-			</ButtonDropdown>
-		</div>
-	{/if}
-</div>

package/components/common/button/Button.svelte.d.ts

@@ -1,49 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import Icon from 'svelte-awesome';
-import { ButtonType } from './model';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        size?: ButtonType.Size | undefined;
-        spacingSize?: ButtonType.Size | undefined;
-        color?: "none" | "blue" | "gray" | "red" | "green" | "dark" | "light" | undefined;
-        variant?: ButtonType.Variant | undefined;
-        btnClasses?: string | undefined;
-        wrapperClasses?: string | undefined;
-        disabled?: boolean | undefined;
-        href?: string | undefined;
-        target?: ButtonType.Target | undefined;
-        iconOnly?: boolean | undefined;
-        startIcon?: ButtonType.Icon | undefined;
-        endIcon?: ButtonType.Icon | undefined;
-        element?: ButtonType.Element | undefined;
-        id?: string | undefined;
-        nonCaptureEvent?: boolean | undefined;
-        buttonType?: "button" | "submit" | "reset" | undefined;
-        loading?: boolean | undefined;
-        title?: string | undefined;
-        style?: string | undefined;
-        dropdownItems?: {
-            label: string;
-            onClick?: (() => void) | undefined;
-            href?: string | undefined;
-        }[] | undefined;
-    };
-    events: {
-        pointerdown: PointerEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
-        click: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ButtonProps = typeof __propDef.props;
-export type ButtonEvents = typeof __propDef.events;
-export type ButtonSlots = typeof __propDef.slots;
-export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
-}
-export {};

package/components/common/drawer/Drawer.svelte

@@ -1,158 +0,0 @@
-<script>import { onMount } from 'svelte';
-import { createEventDispatcher } from 'svelte';
-import { browser } from '$app/environment';
-export let open = false;
-export let duration = 0.3;
-export let placement = 'right';
-export let size = '600px';
-export let alwaysOpen = false;
-$: durationMs = duration * 1000;
-export function toggleDrawer() {
-    open = !open;
-}
-export function openDrawer() {
-    open = true;
-}
-export function closeDrawer() {
-    open = false;
-    setTimeout(() => {
-        dispatch('afterClose');
-    }, durationMs);
-}
-export function isOpen() {
-    return open;
-}
-let mounted = false;
-const dispatch = createEventDispatcher();
-$: style = `--duration: ${duration}s; --size: ${size};`;
-function scrollLock(open) {
-    if (browser) {
-        const body = document.querySelector('body');
-        if (mounted && body) {
-            body.style.overflowY = open ? 'hidden' : 'auto';
-        }
-    }
-}
-$: scrollLock(open);
-function handleClickAway() {
-    dispatch('clickAway');
-    open = false;
-}
-function onKeyDown(event) {
-    if (open) {
-        switch (event.key) {
-            case 'Escape':
-                event.preventDefault();
-                event.stopPropagation();
-                event.stopImmediatePropagation();
-                open = false;
-                break;
-        }
-    }
-}
-$: open ? dispatch('open') : dispatch('close');
-let timeout = true;
-$: !open ? setTimeout(() => (timeout = true), durationMs) : (timeout = false);
-onMount(() => {
-    mounted = true;
-});
-</script>
-
-<svelte:window on:keydown={onKeyDown} />
-
-<aside
-	class="drawer {$$props.class ?? ''} {$$props.positionClass ?? ''}"
-	class:open
-	class:close={!open && timeout}
-	{style}
->
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<div class="overlay {$$props.positionClass ?? ''}" on:click={handleClickAway} />
-	<div class="panel {placement} {$$props.positionClass}" class:size>
-		{#if open || !timeout || alwaysOpen}
-			<slot {open} />
-		{/if}
-	</div>
-</aside>
-
-<style>
-	.drawer {
-		position: fixed;
-		top: 0;
-		left: 0;
-		height: 100%;
-		width: 100%;
-		z-index: -1;
-		transition: z-index var(--duration) step-end;
-		overflow: clip;
-	}
-
-	.drawer.open {
-		height: 100%;
-		width: 100%;
-		z-index: 1002;
-		transition: z-index var(--duration) step-start;
-	}
-
-	.overlay {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background: rgba(100, 100, 100, 0.5);
-		opacity: 0;
-		z-index: 2;
-		transition: opacity var(--duration) ease;
-	}
-
-	.drawer.open > .overlay {
-		opacity: 1;
-	}
-
-	.drawer.close > .panel {
-		height: 0;
-		overflow: hidden;
-	}
-
-	.panel {
-		position: fixed;
-		width: 100%;
-		background: white;
-		z-index: 3;
-		transition: transform var(--duration) ease;
-	}
-
-	.panel.left {
-		left: 0;
-		transform: translate(-100%, 0);
-	}
-
-	.panel.right {
-		right: 0;
-		transform: translate(100%, 0);
-	}
-
-	.panel.top {
-		top: 0;
-		transform: translate(0, -100%);
-	}
-
-	.panel.bottom {
-		bottom: 0;
-		transform: translate(0, 100%);
-	}
-
-	.panel.left.size,
-	.panel.right.size {
-		max-width: var(--size);
-	}
-
-	.panel.top.size,
-	.panel.bottom.size {
-		max-height: var(--size);
-	}
-
-	.drawer.open > .panel {
-		transform: translate(0, 0);
-	}</style>