windmill-components 1.79.0 → 1.82.1

package/components/apps/rx.d.ts

@@ -19,6 +19,8 @@ export type World = {
     connect: <T>(inputSpec: AppInput, next: (x: T) => void, id?: string) => Input<T>;
     stateId: Writable<number>;
     newOutput: <T>(id: string, name: string, previousValue: T) => Output<T>;
+    initializedOutputs: number;
+    initialized: boolean;
 };
 export declare function buildWorld(context: Record<string, any>): Writable<World>;
 export declare function buildObservableWorld(): {

package/components/apps/rx.js

@@ -24,7 +24,14 @@ export function buildWorld(context) {
         return o;
     }
     stateId.update((x) => x + 1);
-    writableWorld = writable({ outputsById, connect: newWorld.connect, stateId, newOutput });
+    writableWorld = writable({
+        outputsById,
+        connect: newWorld.connect,
+        stateId,
+        newOutput,
+        initializedOutputs: 0,
+        initialized: false
+    });
     return writableWorld;
 }
 export function buildObservableWorld() {
@@ -47,7 +54,6 @@ export function buildObservableWorld() {
                 };
             }
             const { componentId, path } = connection;
-            console.log('connection', connection);
             const input = cachedInput(next, `${componentId}-${path}-${id}`);
             const [p] = path ? path.split('.')[0].split('[') : [undefined];
             let obs = observables[`${componentId}.${p}`];

package/components/apps/svelte-grid/Grid.svelte

@@ -125,8 +125,6 @@ const handleRepaint = ({ detail }) => {
 				on:pointerup={pointerup}
 				onTop={item.id == onTopId}
 				id={item.id}
-				resizable={item[getComputedCols] && item[getComputedCols].resizable}
-				draggable={item[getComputedCols] && item[getComputedCols].draggable}
 				{xPerPx}
 				{yPerPx}
 				width={Math.min(getComputedCols, item[getComputedCols] && item[getComputedCols].w) *
@@ -136,8 +134,6 @@ const handleRepaint = ({ detail }) => {
 				top={(item[getComputedCols] && item[getComputedCols].y) * yPerPx + gapY}
 				left={(item[getComputedCols] && item[getComputedCols].x) * xPerPx + gapX}
 				item={item[getComputedCols]}
-				min={item[getComputedCols] && item[getComputedCols].min}
-				max={item[getComputedCols] && item[getComputedCols].max}
 				cols={getComputedCols}
 				{gapX}
 				{gapY}

package/components/apps/svelte-grid/Grid.svelte.d.ts

@@ -11,7 +11,7 @@ declare class __sveltets_Render<T> {
         throttleResize?: number | undefined;
         onTopId?: string | undefined;
         containerWidth?: number | undefined;
-        scroller?: undefined;
+        scroller?: HTMLElement | undefined;
         sensor?: number | undefined;
         parentWidth?: number | undefined;
     };

package/components/apps/svelte-grid/MoveResize.svelte

@@ -5,8 +5,6 @@ export let width;
 export let height;
 export let left;
 export let top;
-export let resizable;
-export let draggable;
 export let id;
 export let container;
 export let xPerPx;
@@ -14,8 +12,6 @@ export let yPerPx;
 export let gapX;
 export let gapY;
 export let item;
-export let max;
-export let min;
 export let cols;
 export let nativeContainer;
 export let onTop;
@@ -112,19 +108,23 @@ function computeRect(target) {
         rect = irect;
     }
 }
+let dragClosure = undefined;
 const pointerdown = ({ clientX, clientY, target }) => {
-    initX = clientX;
-    initY = clientY;
-    capturePos = { x: left, y: top };
-    shadow = { x: item.x, y: item.y, w: item.w, h: item.h };
-    newSize = { width, height };
-    containerFrame = getContainerFrame(container);
-    scrollElement = getScroller(container);
-    cordDiff = { x: 0, y: 0 };
-    computeRect(target);
-    active = true;
-    trans = false;
-    _scrollTop = scrollElement.scrollTop;
+    dragClosure = () => {
+        dragClosure = undefined;
+        initX = clientX;
+        initY = clientY;
+        capturePos = { x: left, y: top };
+        shadow = { x: item.x, y: item.y, w: item.w, h: item.h };
+        newSize = { width, height };
+        containerFrame = getContainerFrame(container);
+        scrollElement = getScroller(container);
+        cordDiff = { x: 0, y: 0 };
+        active = true;
+        trans = false;
+        computeRect(target);
+        _scrollTop = scrollElement.scrollTop;
+    };
     window.addEventListener('pointermove', pointermove);
     window.addEventListener('pointerup', pointerup);
 };
@@ -146,13 +146,11 @@ const update = () => {
     if (shadow) {
         shadow.x = Math.max(Math.min(gridX, cols - shadow.w), 0);
         shadow.y = Math.max(gridY, 0);
-        if (max.y) {
-            shadow.y = Math.min(shadow.y, max.y);
-        }
     }
     repaint(undefined, false);
 };
 const pointermove = (event) => {
+    dragClosure && dragClosure();
     event.preventDefault();
     event.stopPropagation();
     event.stopImmediatePropagation();
@@ -183,6 +181,7 @@ const pointermove = (event) => {
     }
 };
 const pointerup = (e) => {
+    dragClosure = undefined;
     stopAutoscroll();
     window.removeEventListener('pointerdown', pointerdown);
     window.removeEventListener('pointermove', pointermove);
@@ -214,13 +213,9 @@ const resizePointerMove = ({ pageX, pageY }) => {
         newSize.height = initSize.height + pageY - resizeInitPos.y;
         // Get max col number
         let maxWidth = cols - shadow.x;
-        maxWidth = Math.min(max.w, maxWidth) || maxWidth;
+        maxWidth = maxWidth;
         // Limit bound
-        newSize.width = Math.max(Math.min(newSize.width, maxWidth * xPerPx - gapX * 2), min.w * xPerPx - gapX * 2);
-        newSize.height = Math.max(newSize.height, min.h * yPerPx - gapY * 2);
-        if (max.h) {
-            newSize.height = Math.min(newSize.height, max.h * yPerPx - gapY * 2);
-        }
+        newSize.width = Math.min(newSize.width, maxWidth * xPerPx - gapX * 2);
         // Limit col & row
         shadow.w = Math.round((newSize.width + gapX * 2) / xPerPx);
         shadow.h = Math.round((newSize.height + gapY * 2) / yPerPx);
@@ -235,9 +230,10 @@ const resizePointerUp = (e) => {
 };
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-	draggable={false}
-	on:pointerdown={item && item.customDragger ? null : draggable && pointerdown}
+	draggable="false"
+	on:pointerdown|stopPropagation|preventDefault={pointerdown}
 	class="svlt-grid-item"
 	class:svlt-grid-active={active || (trans && rect)}
 	style="width: {active ? newSize.width : width}px; height:{active
@@ -250,9 +246,7 @@ const resizePointerUp = (e) => {
 		: `transition: transform 0.1s, opacity 0.1s; transform: translate(${left}px, ${top}px); `} "
 >
 	<slot movePointerDown={pointerdown} {resizePointerDown} />
-	{#if resizable && !item.customResizer}
-		<div class="svlt-grid-resizer" on:pointerdown={resizePointerDown} />
-	{/if}
+	<div class="svlt-grid-resizer" on:pointerdown={resizePointerDown} />
 </div>
 
 {#if (active || trans) && shadow}

package/components/apps/svelte-grid/MoveResize.svelte.d.ts

@@ -6,8 +6,6 @@ declare const __propDef: {
         height: any;
         left: any;
         top: any;
-        resizable: any;
-        draggable: any;
         id: any;
         container: any;
         xPerPx: any;
@@ -15,8 +13,6 @@ declare const __propDef: {
         gapX: any;
         gapY: any;
         item: any;
-        max: any;
-        min: any;
         cols: any;
         nativeContainer: any;
         onTop: any;

package/components/apps/svelte-grid/types.d.ts

@@ -9,13 +9,7 @@ export interface Positon {
 }
 
 interface ItemLayout extends Size, Positon {
-	fixed?: boolean
-	resizable?: boolean
-	draggable?: boolean
-	customDragger?: boolean
-	customResizer?: boolean
-	min?: Size
-	max?: Size
+	fixed: boolean
 }
 
 export type FilledItem<T> = { [width: number]: Required<ItemLayout>; data: T; id: string }

package/components/apps/svelte-grid/utils/helper.js

@@ -1,20 +1,16 @@
-import { makeMatrixFromItems } from "./matrix";
-import { findFreeSpaceForItem, normalize, adjust } from "./item";
-import { getRowsCount } from "./other";
+import { makeMatrixFromItems } from './matrix';
+import { findFreeSpaceForItem, normalize, adjust } from './item';
+import { getRowsCount } from './other';
 function makeItem(item) {
     const { min = { w: 1, h: 1 }, max } = item;
     return {
         fixed: false,
-        resizable: !item.fixed,
-        draggable: !item.fixed,
-        customDragger: false,
-        customResizer: false,
         min: {
             w: Math.max(1, min.w),
-            h: Math.max(1, min.h),
+            h: Math.max(1, min.h)
         },
         max: { ...max },
-        ...item,
+        ...item
     };
 }
 const gridHelp = {
@@ -31,6 +27,6 @@ const gridHelp = {
         let matrix = makeMatrixFromItems(items, getRowsCount(items, cols), cols);
         let position = findFreeSpaceForItem(matrix, item[cols]);
         return position;
-    },
+    }
 };
 export default gridHelp;

package/components/apps/types.d.ts

@@ -2,8 +2,8 @@ import type { Schema } from '../../common';
 import type { Preview } from '../../gen';
 import type { History } from '../../history';
 import type { Writable } from 'svelte/store';
-import type { AppComponent } from './editor/component/components';
-import type { AppInput, ConnectedAppInput, ConnectedInput, EvalAppInput, RowAppInput, StaticAppInput, UploadAppInput, UserAppInput } from './inputType';
+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';
@@ -14,38 +14,33 @@ export type Aligned = {
 };
 export interface GeneralAppInput {
     onlyStatic?: boolean;
-    evaluatedValue?: boolean;
     tooltip?: string;
+    placeholder?: string;
 }
 export type ComponentCssProperty = {
     class?: string;
     style?: string;
 };
-export type ComponentCustomCSS<T extends string = string> = Record<T, ComponentCssProperty>;
-export type Configuration = GeneralAppInput & (StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput | EvalAppInput | UploadAppInput);
-export type RichConfiguration = (Configuration & {
-    ctype?: undefined;
+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'];
 }) | {
-    ctype: 'oneOf';
+    type: 'oneOf';
     selected: string;
-    configuration: Record<string, Record<string, Configuration>>;
-} | {
-    ctype: 'group';
-    title: string;
-    configuration: Record<string, Configuration>;
+    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?: ComponentCustomCSS;
-    /**
-     * If `true` then the wrapper will allow items to flow outside of it's borders.
-     *
-     * *For example when the component has a popup like `Select`*
-     */
-    softWrap?: boolean;
+    customCss?: Record<string, ComponentCssProperty>;
     numberOfSubgrids?: number;
 }
 export type ComponentSet = {
@@ -68,9 +63,11 @@ export type InlineScript = {
         key: string;
     }[];
 };
+export type AppCssItemName = 'viewer' | 'grid' | AppComponent['type'];
 export type App = {
     grid: GridItem[];
     fullscreen: boolean;
+    norefreshbar?: boolean;
     unusedInlineScripts: Array<{
         name: string;
         inlineScript: InlineScript;
@@ -80,8 +77,9 @@ export type App = {
         inlineScript: InlineScript | undefined;
         fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
         autoRefresh?: boolean;
+        doNotRecomputeOnInputChanged?: boolean;
     }>;
-    css?: Record<'viewer' | 'grid' | AppComponent['type'], ComponentCustomCSS>;
+    css?: Partial<Record<AppCssItemName, Record<string, ComponentCssProperty>>>;
     subgrids?: Record<string, GridItem[]>;
 };
 export type ConnectingInput = {
@@ -98,7 +96,7 @@ export type AppViewerContext = {
     mode: Writable<EditorMode>;
     connectingInput: Writable<ConnectingInput>;
     breakpoint: Writable<EditorBreakpoint>;
-    runnableComponents: Writable<Record<string, () => Promise<void>>>;
+    runnableComponents: Writable<Record<string, (inlineScript?: InlineScript) => Promise<void>>>;
     staticExporter: Writable<Record<string, () => any>>;
     appPath: string;
     workspace: string;
@@ -129,6 +127,8 @@ export type AppEditorContext = {
     history: History<App> | undefined;
     pickVariableCallback: Writable<((path: string) => void) | undefined>;
     ontextfocus: Writable<(() => void) | undefined>;
+    selectedComponentInEditor: Writable<string | undefined>;
+    movingcomponent: Writable<string | undefined>;
 };
 export type FocusedGrid = {
     parentComponentId: string;

package/components/apps/utils.d.ts

@@ -1,5 +1,5 @@
 import type { Schema } from '../../common';
-import type { App, ComponentCssProperty, ComponentCustomCSS, GridItem } from './types';
+import type { App, ComponentCssProperty, GridItem } from './types';
 import type { AppInput, InputType, ResultAppInput, StaticAppInput } from './inputType';
 import type { Output } from './rx';
 export declare function allItems(grid: GridItem[], subgrids: Record<string, GridItem[]> | undefined): GridItem[];
@@ -18,4 +18,4 @@ export declare function buildExtraLib(components: Record<string, Record<string,
 export declare function getAllScriptNames(app: App): string[];
 export declare function toPascalCase(text: string): string;
 export declare function toKebabCase(text: string): string;
-export declare function concatCustomCss<T extends string = string>(appCss?: ComponentCustomCSS<T>, componentCss?: ComponentCustomCSS<T>): Record<T, ComponentCssProperty> | undefined;
+export declare function concatCustomCss<T extends Record<string, ComponentCssProperty>>(appCss?: Record<string, ComponentCssProperty>, componentCss?: T): T | undefined;

package/components/apps/utils.js

@@ -81,6 +81,8 @@ export function fieldTypeToTsType(inputType) {
             return 'array';
         case 'any':
             return 'any';
+        case 'tab-select':
+            return 'Tab';
         default:
             return 'string';
     }
@@ -171,19 +173,19 @@ export function toKebabCase(text) {
 export function concatCustomCss(appCss, componentCss) {
     if (!componentCss)
         return undefined;
-    const customStyle = {};
-    Object.keys(componentCss).forEach((key) => {
-        const k = key;
+    return Object.fromEntries(Object.entries(componentCss).map(([key, v]) => {
         // This is the general style of the component type
-        const appStyle = appCss?.[k]?.style?.trim() || '';
+        const appStyle = appCss?.[key]?.style?.trim() || '';
         const appEnding = appStyle?.endsWith(';') || !appStyle ? ' ' : '; ';
         // This is the custom style of the component instance
-        const compStyle = componentCss[k]?.style?.trim() || '';
+        const compStyle = v?.style?.trim() || '';
         const compEnding = compStyle?.endsWith(';') || !compStyle ? ' ' : ';';
-        customStyle[k] = {
-            style: (appStyle + appEnding + compStyle + compEnding).trim(),
-            class: twMerge(appCss?.[k]?.class, componentCss[k]?.class)
-        };
-    });
-    return customStyle;
+        return [
+            key,
+            {
+                style: (appStyle + appEnding + compStyle + compEnding).trim(),
+                class: twMerge(appCss?.[key]?.class, v?.class)
+            }
+        ];
+    }));
 }

package/components/common/button/ButtonPopup.svelte

@@ -7,6 +7,7 @@ export let color = 'blue';
 export let variant = 'contained';
 export let mainClasses = '';
 export let toggleClasses = '';
+export let listClasses = '';
 export let disabled = false;
 export let href = undefined;
 export let target = '_self';
@@ -59,14 +60,16 @@ $: commonProps = {
 {#if ref}
 	<Popup
 		{ref}
+		let:open
+		let:close
 		options={{
 			placement: $$slots.main ? 'bottom-end' : 'bottom',
 			strategy: 'absolute',
 			modifiers: [{ name: 'offset', options: { offset: [0, 0] } }]
 		}}
 	>
-		<ul class="bg-white rounded-t border pt-1 pb-2 max-h-40 overflow-auto">
-			<slot />
+		<ul class="bg-white rounded-t border pt-1 pb-2 max-h-40 overflow-auto {listClasses}">
+			<slot {open} {close} />
 		</ul>
 	</Popup>
 {/if}

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

@@ -8,6 +8,7 @@ declare const __propDef: {
         variant?: ButtonType.Variant | undefined;
         mainClasses?: string | undefined;
         toggleClasses?: string | undefined;
+        listClasses?: string | undefined;
         disabled?: boolean | undefined;
         href?: string | undefined;
         target?: ButtonType.Target | undefined;
@@ -24,7 +25,10 @@ declare const __propDef: {
     slots: {
         main: {};
         toggle: {};
-        default: {};
+        default: {
+            open: () => void;
+            close: () => void;
+        };
     };
 };
 export type ButtonPopupProps = typeof __propDef.props;

package/components/common/button/ButtonPopupItem.svelte

@@ -8,6 +8,7 @@ export let target = '_self';
 export let iconOnly = false;
 export let startIcon = undefined;
 export let endIcon = undefined;
+export let wrapperClasses = '';
 const props = getContext(ButtonType.ItemContextKey);
 const iconWidthClass = {
     xs: '!w-[12px]',
@@ -40,7 +41,7 @@ $: buttonProps = {
 };
 </script>
 
-<li class="mt-1">
+<li class="mt-1 {wrapperClasses}">
 	<Button {...buttonProps} on:click>
 		<slot />
 	</Button>

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

@@ -9,6 +9,7 @@ declare const __propDef: {
         iconOnly?: boolean | undefined;
         startIcon?: ButtonType.Icon | undefined;
         endIcon?: ButtonType.Icon | undefined;
+        wrapperClasses?: string | undefined;
     };
     events: {
         click: CustomEvent<any>;

package/components/common/clearableInput/ClearableInput.svelte

@@ -0,0 +1,56 @@
+<script>import { createEventDispatcher } from 'svelte';
+import { fade } from 'svelte/transition';
+import { X } from 'lucide-svelte';
+export let value = '';
+export let placeholder = '';
+export let type = 'text';
+export let inputClass = '';
+export let wrapperClass = '';
+export let buttonClass = '';
+const dispatch = createEventDispatcher();
+$: isNumeric = ['number', 'range'].includes(type);
+$: dispatch('change', value);
+function handleInput(e) {
+    value = isNumeric ? +e.target.value : e.target.value;
+}
+function clear() {
+    value = '';
+}
+</script>
+
+<div class="relative grow {wrapperClass}">
+	{#if type === 'textarea'}
+		<textarea
+			{value}
+			{placeholder}
+			rows="1"
+			class="resize-y duration-200 {inputClass}"
+			{...$$restProps}
+			on:input={handleInput}
+			on:focus
+			on:blur
+		/>
+	{:else}
+		<input
+			{type}
+			{value}
+			{placeholder}
+			class="duration-200 {(type === 'number' && value ? '!pr-[26px] ' : '') + inputClass}"
+			{...$$restProps}
+			on:input={handleInput}
+			on:focus
+			on:blur
+		/>
+	{/if}
+	{#if value}
+		<button
+			transition:fade|local={{ duration: 100 }}
+			class="absolute z-10 top-1.5 right-1 rounded-full p-1 bg-white/60 duration-200 hover:bg-gray-200 {buttonClass}"
+			aria-label="Clear"
+			on:click|preventDefault|stopPropagation={clear}
+		>
+			<X size={14} />
+		</button>
+	{/if}
+	<slot />
+</div>

package/components/common/clearableInput/ClearableInput.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value?: any;
+        placeholder?: string | undefined;
+        type?: "number" | "text" | "textarea" | undefined;
+        inputClass?: string | undefined;
+        wrapperClass?: string | undefined;
+        buttonClass?: string | undefined;
+    };
+    events: {
+        focus: FocusEvent;
+        blur: FocusEvent;
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ClearableInputProps = typeof __propDef.props;
+export type ClearableInputEvents = typeof __propDef.events;
+export type ClearableInputSlots = typeof __propDef.slots;
+export default class ClearableInput extends SvelteComponentTyped<ClearableInputProps, ClearableInputEvents, ClearableInputSlots> {
+}
+export {};

package/components/common/index.d.ts

@@ -5,6 +5,7 @@ export { default as Button } from './button/Button.svelte';
 export { default as ButtonPopup } from './button/ButtonPopup.svelte';
 export { default as ButtonPopupItem } from './button/ButtonPopupItem.svelte';
 export { default as UndoRedo } from './button/UndoRedo.svelte';
+export { default as ClearableInput } from './clearableInput/ClearableInput.svelte';
 export { default as Drawer } from './drawer/Drawer.svelte';
 export { default as DrawerContent } from './drawer/DrawerContent.svelte';
 export { default as Kbd } from './kbd/Kbd.svelte';

package/components/common/index.js

@@ -5,6 +5,7 @@ export { default as Button } from './button/Button.svelte';
 export { default as ButtonPopup } from './button/ButtonPopup.svelte';
 export { default as ButtonPopupItem } from './button/ButtonPopupItem.svelte';
 export { default as UndoRedo } from './button/UndoRedo.svelte';
+export { default as ClearableInput } from './clearableInput/ClearableInput.svelte';
 export { default as Drawer } from './drawer/Drawer.svelte';
 export { default as DrawerContent } from './drawer/DrawerContent.svelte';
 export { default as Kbd } from './kbd/Kbd.svelte';

package/components/common/kbd/Kbd.svelte

@@ -1,7 +1,10 @@
+<script>export let kbdClass = '';
+</script>
+
 <span
 	class="{$$props.class} rounded border bg-white/70 px-1.5 !text-xs text-gray-600 shadow-sm font-light transition-all group-hover:border-primary-500 group-hover:text-primary-500"
 >
-	<kbd>
+	<kbd class={kbdClass}>
 		<slot />
 	</kbd>
 </span>

package/components/common/kbd/Kbd.svelte.d.ts

@@ -1,21 +1,8 @@
-/** @typedef {typeof __propDef.props}  KbdProps */
-/** @typedef {typeof __propDef.events}  KbdEvents */
-/** @typedef {typeof __propDef.slots}  KbdSlots */
-export default class Kbd extends SvelteComponentTyped<{
-    [x: string]: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type KbdProps = typeof __propDef.props;
-export type KbdEvents = typeof __propDef.events;
-export type KbdSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        kbdClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -24,4 +11,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export type KbdProps = typeof __propDef.props;
+export type KbdEvents = typeof __propDef.events;
+export type KbdSlots = typeof __propDef.slots;
+export default class Kbd extends SvelteComponentTyped<KbdProps, KbdEvents, KbdSlots> {
+}
 export {};

package/components/common/menu/Menu.svelte

@@ -4,8 +4,12 @@ let current = undefined;
 
 <script>import { classNames } from '../../../utils';
 import { onMount } from 'svelte';
+import { fade } from 'svelte/transition';
 export let noMinW = false;
 export let show = false;
+export let wrapperClasses = '';
+export let popupClasses = '';
+export let transitionDuration = 100;
 let menu;
 export let placement = 'bottom-start';
 function handleOutsideClick(event) {
@@ -40,7 +44,7 @@ const placementsClasses = {
 };
 </script>
 
-<div class="relative" bind:this={menu}>
+<div class="relative {wrapperClasses}" bind:this={menu}>
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<div
 		on:click|stopPropagation={() => {
@@ -56,10 +60,12 @@ const placementsClasses = {
 	</div>
 	{#if show}
 		<div
+			transition:fade|local={{ duration: transitionDuration }}
 			class={classNames(
 				'z-50 absolute mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none',
 				placementsClasses[placement],
-				noMinW ? 'min-w-0' : 'w-60'
+				noMinW ? 'min-w-0' : 'w-60',
+				popupClasses
 			)}
 			role="menu"
 			tabindex="-1"