windmill-components 1.46.3 → 1.55.0

package/components/common/alert/Alert.svelte

@@ -3,6 +3,8 @@ import { faCheckCircle, faInfoCircle, faWarning } from '@fortawesome/free-solid-
 import Icon from 'svelte-awesome';
 export let type = 'info';
 export let title;
+export let notRounded = false;
+export let size = 'sm';
 const icons = {
     info: faInfoCircle,
     warning: faWarning,
@@ -11,25 +13,25 @@ const icons = {
 };
 const classes = {
     info: {
-        bgClass: 'bg-blue-50',
+        bgClass: 'bg-blue-50 border-blue-200 border',
         iconClass: 'text-blue-500',
         titleClass: 'text-blue-800',
         descriptionClass: 'text-blue-700'
     },
     warning: {
-        bgClass: 'bg-yellow-50',
+        bgClass: 'bg-yellow-50 border-yellow-200 border',
         iconClass: 'text-yellow-500',
         titleClass: 'text-yellow-800',
         descriptionClass: 'text-yellow-700'
     },
     error: {
-        bgClass: 'bg-red-50',
+        bgClass: 'bg-red-50 border-red-200 border',
         iconClass: 'text-red-500',
         titleClass: 'text-red-800',
         descriptionClass: 'text-red-700'
     },
     success: {
-        bgClass: 'bg-green-50',
+        bgClass: 'bg-green-50 border-green-200 border',
         iconClass: 'text-green-500',
         titleClass: 'text-green-800',
         descriptionClass: 'text-green-700'
@@ -37,15 +39,36 @@ const classes = {
 };
 </script>
 
-<div class={classNames('rounded-md p-4', classes[type].bgClass, $$props.class)}>
+<div
+	class={classNames(
+		notRounded ? '' : 'rounded-md',
+		size === 'sm' ? 'p-4' : 'p-2 ',
+		classes[type].bgClass,
+		$$props.class
+	)}
+>
 	<div class="flex">
 		<div class="flex h-8 w-8 items-center justify-center rounded-full">
 			<Icon data={icons[type]} class={classes[type].iconClass} />
 		</div>
 
 		<div class="ml-2 w-full">
-			<span class={classNames('text-sm font-medium', classes[type].titleClass)}>{title}</span>
-			<div class={classNames('mt-2 text-sm', classes[type].descriptionClass)}>
+			<span
+				class={classNames(
+					size === 'sm' ? 'text-sm' : 'text-xs ',
+					'font-medium',
+					classes[type].titleClass
+				)}
+			>
+				{title}
+			</span>
+			<div
+				class={classNames(
+					size === 'sm' ? 'text-sm' : 'text-xs ',
+					'mt-2',
+					classes[type].descriptionClass
+				)}
+			>
 				<slot />
 			</div>
 		</div>

package/components/common/alert/Alert.svelte.d.ts

@@ -5,6 +5,8 @@ declare const __propDef: {
         [x: string]: any;
         type?: AlertType | undefined;
         title: string;
+        notRounded?: boolean | undefined;
+        size?: "xs" | "sm" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -13,9 +15,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type AlertProps = typeof __propDef.props;
-export declare type AlertEvents = typeof __propDef.events;
-export declare type AlertSlots = typeof __propDef.slots;
+export type AlertProps = typeof __propDef.props;
+export type AlertEvents = typeof __propDef.events;
+export type AlertSlots = typeof __propDef.slots;
 export default class Alert extends SvelteComponentTyped<AlertProps, AlertEvents, AlertSlots> {
 }
 export {};

package/components/common/alert/model.d.ts

@@ -1 +1 @@
-export declare type AlertType = 'success' | 'error' | 'warning' | 'info';
+export type AlertType = 'success' | 'error' | 'warning' | 'info';

package/components/common/badge/Badge.svelte

@@ -6,9 +6,8 @@ export let color = 'gray';
 export let large = false;
 export let href = '';
 export let rounded = false;
-export let index = false;
 export let dismissable = false;
-export let baseClass = 'text-center -mb-0.5';
+export let baseClass = 'text-center';
 export let capitalize = false;
 export let icon = undefined;
 let defaulIconProps = {
@@ -40,15 +39,12 @@ const hovers = {
     indigo: 'hover:bg-indigo-200 dark:hover:bg-indigo-300'
 };
 $: badgeClass = classNames(baseClass, large ? 'text-sm font-medium' : 'text-xs font-semibold', colors[color], href &&
-    (color.startsWith(ColorModifier) ? hovers[color.replace(ColorModifier, '')] : hovers[color]), rounded ? 'rounded-full px-2 py-1' : 'rounded px-2.5 py-0.5', index
-    ? 'absolute flex justify-center items-center font-bold overflow-hidden border-2 border-white dark:border-gray-900' +
-        (large ? 'w-7 h-7 -top-3.5 -right-3.5' : 'w-6 h-6 -top-3 -right-3')
-    : '', $$props.class);
+    (color.startsWith(ColorModifier) ? hovers[color.replace(ColorModifier, '')] : hovers[color]), rounded ? 'rounded-full px-2 py-1' : 'rounded px-2.5 py-0.5', $$props.class);
 $: iconProps = icon ? { ...defaulIconProps, ...icon } : { data: undefined };
 const handleHide = () => (hidden = !hidden);
 </script>
 
-<span class="inline-flex justify-center items-center whitespace-nowrap">
+<span on:click on:keydown class="inline-flex justify-center items-center whitespace-nowrap">
 	<svelte:element
 		this={href ? 'a' : 'span'}
 		{href}

package/components/common/badge/Badge.svelte.d.ts

@@ -7,22 +7,24 @@ declare const __propDef: {
         large?: boolean | undefined;
         href?: string | undefined;
         rounded?: boolean | undefined;
-        index?: boolean | undefined;
         dismissable?: boolean | undefined;
         baseClass?: string | undefined;
         capitalize?: boolean | undefined;
         icon?: BadgeIconProps | undefined;
     };
     events: {
+        click: MouseEvent;
+        keydown: KeyboardEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         default: {};
     };
 };
-export declare type BadgeProps = typeof __propDef.props;
-export declare type BadgeEvents = typeof __propDef.events;
-export declare type BadgeSlots = typeof __propDef.slots;
+export type BadgeProps = typeof __propDef.props;
+export type BadgeEvents = typeof __propDef.events;
+export type BadgeSlots = typeof __propDef.slots;
 export default class Badge extends SvelteComponentTyped<BadgeProps, BadgeEvents, BadgeSlots> {
 }
 export {};

package/components/common/badge/model.d.ts

@@ -1,7 +1,7 @@
 import type { IconProps } from 'svelte-awesome/components/Icon.svelte';
-declare type BaseColor = 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'indigo';
+type BaseColor = 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'indigo';
 export declare const ColorModifier = "dark-";
-export declare type BadgeColor = BaseColor | `${typeof ColorModifier}${BaseColor}`;
+export type BadgeColor = BaseColor | `${typeof ColorModifier}${BaseColor}`;
 export interface BadgeIconProps extends IconProps {
     position?: 'left' | 'right';
 }

package/components/common/breadcrumb/Breadcrumb.svelte.d.ts

@@ -14,9 +14,9 @@ declare const __propDef: {
         separator: {};
     };
 };
-export declare type BreadcrumbProps = typeof __propDef.props;
-export declare type BreadcrumbEvents = typeof __propDef.events;
-export declare type BreadcrumbSlots = typeof __propDef.slots;
+export type BreadcrumbProps = typeof __propDef.props;
+export type BreadcrumbEvents = typeof __propDef.events;
+export type BreadcrumbSlots = typeof __propDef.slots;
 export default class Breadcrumb extends SvelteComponentTyped<BreadcrumbProps, BreadcrumbEvents, BreadcrumbSlots> {
 }
 export {};

package/components/common/button/Button.svelte

@@ -3,6 +3,7 @@ import { classNames } from '../../../utils';
 import Icon from 'svelte-awesome';
 import { ButtonType } from './model';
 import { goto } from '$app/navigation';
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 export let size = 'md';
 export let spacingSize = size;
 export let color = 'blue';
@@ -17,6 +18,8 @@ export let endIcon = undefined;
 export let element = undefined;
 export let id = '';
 export let nonCaptureEvent = false;
+export let buttonType = 'button';
+export let loading = false;
 const dispatch = createEventDispatcher();
 // Order of classes: border, border modifier, bg, bg modifier, text, text modifier, everything else
 const colorVariants = {
@@ -36,6 +39,10 @@ const colorVariants = {
         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'
@@ -43,13 +50,13 @@ const colorVariants = {
 };
 $: buttonProps = {
     id,
-    class: classNames(colorVariants[color][variant], variant === 'border' ? 'border' : '', ButtonType.FontSizeClasses[size], ButtonType.SpacingClasses[spacingSize], 'focus:ring-4 font-semibold', 'rounded-md', 'justify-center items-center text-center whitespace-nowrap inline-flex', btnClasses, disabled ? 'bg-gray-300' : ''),
-    disabled,
+    class: classNames(colorVariants[color][variant], variant === 'border' ? 'border' : '', ButtonType.FontSizeClasses[size], ButtonType.SpacingClasses[spacingSize], 'focus:ring-2 font-semibold', 'rounded-md', 'justify-center items-center text-center whitespace-nowrap inline-flex', btnClasses, disabled ? 'bg-gray-300' : ''),
     href,
     target,
-    tabindex: disabled ? -1 : 0
+    tabindex: disabled ? -1 : 0,
+    type: buttonType
 };
-function onClick(event) {
+async function onClick(event) {
     if (!nonCaptureEvent) {
         event.preventDefault();
         dispatch('click', event);
@@ -58,7 +65,9 @@ function onClick(event) {
                 window.open(href, target);
             }
             else {
-                goto(href);
+                loading = true;
+                await goto(href);
+                loading = false;
             }
         }
     }
@@ -75,10 +84,19 @@ $: endIconClass = classNames(iconOnly ? undefined : isSmall ? 'ml-1' : 'ml-2', e
 	on:focus
 	on:blur
 	{...buttonProps}
+	disabled={disabled || loading}
+	type="submit"
 >
-	{#if startIcon}
+	{#if loading}
+		<Icon
+			data={faSpinner}
+			class={`animate-spin ${startIconClass}`}
+			scale={ButtonType.IconScale[size]}
+		/>
+	{:else if startIcon}
 		<Icon data={startIcon.icon} class={startIconClass} scale={ButtonType.IconScale[size]} />
 	{/if}
+
 	{#if !iconOnly}
 		<slot />
 	{/if}

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

@@ -5,7 +5,7 @@ declare const __propDef: {
     props: {
         size?: ButtonType.Size | undefined;
         spacingSize?: ButtonType.Size | undefined;
-        color?: ButtonType.Color | undefined;
+        color?: "blue" | "gray" | "red" | "green" | "dark" | "light" | undefined;
         variant?: ButtonType.Variant | undefined;
         btnClasses?: string | undefined;
         disabled?: boolean | undefined;
@@ -17,6 +17,8 @@ declare const __propDef: {
         element?: ButtonType.Element | undefined;
         id?: string | undefined;
         nonCaptureEvent?: boolean | undefined;
+        buttonType?: "reset" | "submit" | "button" | undefined;
+        loading?: boolean | undefined;
     };
     events: {
         focus: FocusEvent;
@@ -29,9 +31,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type ButtonProps = typeof __propDef.props;
-export declare type ButtonEvents = typeof __propDef.events;
-export declare type ButtonSlots = typeof __propDef.slots;
+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/button/ButtonPopup.svelte

@@ -12,6 +12,7 @@ export let href = undefined;
 export let target = '_self';
 export let startIcon = undefined;
 export let endIcon = undefined;
+export let spacingSize = size;
 let ref;
 setContext(ButtonType.ItemContextKey, { size, color });
 $: separator = color === 'red' || color === 'blue' ? 'border-gray-200' : 'border-gray-400';
@@ -19,7 +20,8 @@ $: commonProps = {
     size,
     color,
     variant,
-    disabled
+    disabled,
+    spacingSize
 };
 </script>
 

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

@@ -4,7 +4,7 @@ import { ButtonType } from '..';
 declare const __propDef: {
     props: {
         size?: ButtonType.Size | undefined;
-        color?: ButtonType.Color | undefined;
+        color?: "blue" | "gray" | "red" | "green" | "dark" | "light" | undefined;
         variant?: ButtonType.Variant | undefined;
         mainClasses?: string | undefined;
         toggleClasses?: string | undefined;
@@ -13,6 +13,7 @@ declare const __propDef: {
         target?: ButtonType.Target | undefined;
         startIcon?: ButtonType.Icon | undefined;
         endIcon?: ButtonType.Icon | undefined;
+        spacingSize?: ButtonType.Size | undefined;
     };
     events: {
         click: CustomEvent<any>;
@@ -25,9 +26,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type ButtonPopupProps = typeof __propDef.props;
-export declare type ButtonPopupEvents = typeof __propDef.events;
-export declare type ButtonPopupSlots = typeof __propDef.slots;
+export type ButtonPopupProps = typeof __propDef.props;
+export type ButtonPopupEvents = typeof __propDef.events;
+export type ButtonPopupSlots = typeof __propDef.slots;
 export default class ButtonPopup extends SvelteComponentTyped<ButtonPopupProps, ButtonPopupEvents, ButtonPopupSlots> {
 }
 export {};

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

@@ -19,9 +19,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type ButtonPopupItemProps = typeof __propDef.props;
-export declare type ButtonPopupItemEvents = typeof __propDef.events;
-export declare type ButtonPopupItemSlots = typeof __propDef.slots;
+export type ButtonPopupItemProps = typeof __propDef.props;
+export type ButtonPopupItemEvents = typeof __propDef.events;
+export type ButtonPopupItemSlots = typeof __propDef.slots;
 export default class ButtonPopupItem extends SvelteComponentTyped<ButtonPopupItemProps, ButtonPopupItemEvents, ButtonPopupItemSlots> {
 }
 export {};

package/components/common/button/model.d.ts

@@ -1,6 +1,7 @@
+export declare const BUTTON_COLORS: readonly ["blue", "red", "dark", "light", "green", "gray"];
 export declare namespace ButtonType {
     type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    type Color = 'blue' | 'red' | 'dark' | 'light' | 'green';
+    type Color = typeof BUTTON_COLORS[number];
     type Variant = 'contained' | 'border';
     type Target = '_self' | '_blank';
     type Element = HTMLButtonElement | HTMLAnchorElement;

package/components/common/button/model.js

@@ -1,3 +1,4 @@
+export const BUTTON_COLORS = ['blue', 'red', 'dark', 'light', 'green', 'gray'];
 export var ButtonType;
 (function (ButtonType) {
     ButtonType.FontSizeClasses = {
@@ -10,7 +11,7 @@ export var ButtonType;
     ButtonType.SpacingClasses = {
         xs: 'px-3 py-1.5',
         sm: 'px-3 py-1.5',
-        md: 'px-4 py-2',
+        md: 'px-3 py-1.5',
         lg: 'px-4 py-2',
         xl: 'px-4 py-2'
     };

package/components/common/confirmationModal/ConfirmationModal.svelte.d.ts

@@ -15,9 +15,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type ConfirmationModalProps = typeof __propDef.props;
-export declare type ConfirmationModalEvents = typeof __propDef.events;
-export declare type ConfirmationModalSlots = typeof __propDef.slots;
+export type ConfirmationModalProps = typeof __propDef.props;
+export type ConfirmationModalEvents = typeof __propDef.events;
+export type ConfirmationModalSlots = typeof __propDef.slots;
 export default class ConfirmationModal extends SvelteComponentTyped<ConfirmationModalProps, ConfirmationModalEvents, ConfirmationModalSlots> {
 }
 export {};

package/components/common/confirmationModal/UnsavedConfirmationModal.svelte.d.ts

@@ -1,14 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type UnsavedConfirmationModalProps = typeof __propDef.props;
-export declare type UnsavedConfirmationModalEvents = typeof __propDef.events;
-export declare type UnsavedConfirmationModalSlots = typeof __propDef.slots;
+export type UnsavedConfirmationModalProps = typeof __propDef.props;
+export type UnsavedConfirmationModalEvents = typeof __propDef.events;
+export type UnsavedConfirmationModalSlots = typeof __propDef.slots;
 export default class UnsavedConfirmationModal extends SvelteComponentTyped<UnsavedConfirmationModalProps, UnsavedConfirmationModalEvents, UnsavedConfirmationModalSlots> {
 }
 export {};

package/components/common/drawer/Drawer.svelte

@@ -4,6 +4,7 @@ export let open = false;
 export let duration = 0.3;
 export let placement = 'right';
 export let size = '600px';
+$: durationMs = duration * 1000;
 export function toggleDrawer() {
     open = !open;
 }
@@ -12,6 +13,9 @@ export function openDrawer() {
 }
 export function closeDrawer() {
     open = false;
+    setTimeout(() => {
+        dispatch('afterClose');
+    }, durationMs);
 }
 export function isOpen() {
     return open;
@@ -42,7 +46,7 @@ function onKeyDown(event) {
 }
 $: open ? dispatch('open') : dispatch('close');
 let timeout = true;
-$: !open ? setTimeout(() => (timeout = true), duration * 1000) : (timeout = false);
+$: !open ? setTimeout(() => (timeout = true), durationMs) : (timeout = false);
 onMount(() => {
     mounted = true;
     scrollLock(open);

package/components/common/drawer/Drawer.svelte.d.ts

@@ -21,9 +21,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type DrawerProps = typeof __propDef.props;
-export declare type DrawerEvents = typeof __propDef.events;
-export declare type DrawerSlots = typeof __propDef.slots;
+export type DrawerProps = typeof __propDef.props;
+export type DrawerEvents = typeof __propDef.events;
+export type DrawerSlots = typeof __propDef.slots;
 export default class Drawer extends SvelteComponentTyped<DrawerProps, DrawerEvents, DrawerSlots> {
     get toggleDrawer(): () => void;
     get openDrawer(): () => void;

package/components/common/drawer/DrawerContent.svelte

@@ -1,33 +1,42 @@
-<script>import { faClose } from '@fortawesome/free-solid-svg-icons';
+<script>import { classNames } from '../../../utils';
+import { faClose } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
-import Icon from 'svelte-awesome';
+import { Icon } from 'svelte-awesome';
 import Button from '../button/Button.svelte';
 export let title = undefined;
 export let overflow_y = true;
+export let noPadding = false;
+export let forceOverflowVisible = false;
 const dispatch = createEventDispatcher();
 </script>
 
 <div class="flex flex-col divide-y h-screen max-h-screen">
-	<div class="flex justify-between items-center py-2 px-6 gap-x-2">
-		<Button
-			variant="border"
-			size="lg"
-			color="dark"
-			on:click={() => {
-				dispatch('close')
-			}}
-		>
-			<Icon data={faClose} />
-		</Button>
-		<span class="font-bold truncate">{title}</span>
-		<div class="flex flex-row">
-			{#if $$slots.submission}
-				<slot name="submission" class="sticky" />
-			{/if}
+	<div class="flex justify-between w-wull items-center px-2 py-2 ">
+		<div class="flex items-center gap-2">
+			<button
+				on:click={() => dispatch('close')}
+				class="hover:bg-gray-200 bg-gray-100 rounded-full w-8 h-8 flex items-center justify-center transition-all"
+			>
+				<Icon data={faClose} class="text-gray-500" />
+			</button>
+
+			<span class="font-semibold truncate text-gray-800">{title}</span>
 		</div>
+		{#if $$slots.actions}
+			<div class="flex gap-1 items-center justify-end">
+				<slot name="actions" />
+			</div>
+		{/if}
 	</div>
 
-	<div class="py-2 px-6 grow h-full max-h-full" class:overflow-y-auto={overflow_y}>
+	<div
+		class={classNames(
+			noPadding ? '' : 'p-4',
+			'grow h-full max-h-full',
+			forceOverflowVisible ? '!overflow-visible' : ''
+		)}
+		class:overflow-y-auto={overflow_y}
+	>
 		<slot />
 	</div>
 </div>

package/components/common/drawer/DrawerContent.svelte.d.ts

@@ -3,6 +3,8 @@ declare const __propDef: {
     props: {
         title?: string | undefined;
         overflow_y?: boolean | undefined;
+        noPadding?: boolean | undefined;
+        forceOverflowVisible?: boolean | undefined;
     };
     events: {
         close: CustomEvent<any>;
@@ -10,15 +12,13 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        submission: {
-            class: string;
-        };
+        actions: {};
         default: {};
     };
 };
-export declare type DrawerContentProps = typeof __propDef.props;
-export declare type DrawerContentEvents = typeof __propDef.events;
-export declare type DrawerContentSlots = typeof __propDef.slots;
+export type DrawerContentProps = typeof __propDef.props;
+export type DrawerContentEvents = typeof __propDef.events;
+export type DrawerContentSlots = typeof __propDef.slots;
 export default class DrawerContent extends SvelteComponentTyped<DrawerContentProps, DrawerContentEvents, DrawerContentSlots> {
 }
 export {};

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

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  KbdEvents */
 /** @typedef {typeof __propDef.slots}  KbdSlots */
 export default class Kbd extends SvelteComponentTyped<{
-    [x: string]: any;
+    [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -15,7 +15,7 @@ export type KbdSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: any;
+        [x: string]: never;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/common/languageIcons/LanguageIcon.svelte

@@ -1,13 +1,17 @@
-<script>import { BashIcon, GoIcon, PythonIcon, TypeScriptIcon } from './';
+<script>import MySQLIcon from '../../icons/Mysql.svelte';
+import PostgresIcon from '../../icons/PostgresIcon.svelte';
+import { BashIcon, GoIcon, PythonIcon, TypeScriptIcon } from './';
 export let lang;
-export let width = 16;
-export let height = 16;
+export let width = 30;
+export let height = 30;
 export let scale = 1;
 const langToComponent = {
     go: GoIcon,
     python3: PythonIcon,
     deno: TypeScriptIcon,
-    bash: BashIcon
+    bash: BashIcon,
+    pgsql: PostgresIcon,
+    mysql: MySQLIcon
 };
 </script>
 

package/components/common/languageIcons/LanguageIcon.svelte.d.ts

@@ -3,7 +3,7 @@ import type { SupportedLanguage } from '../../../common';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        lang: SupportedLanguage;
+        lang: SupportedLanguage | 'pgsql' | 'mysql';
         width?: number | undefined;
         height?: number | undefined;
         scale?: number | undefined;
@@ -13,9 +13,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type LanguageIconProps = typeof __propDef.props;
-export declare type LanguageIconEvents = typeof __propDef.events;
-export declare type LanguageIconSlots = typeof __propDef.slots;
+export type LanguageIconProps = typeof __propDef.props;
+export type LanguageIconEvents = typeof __propDef.events;
+export type LanguageIconSlots = typeof __propDef.slots;
 export default class LanguageIcon extends SvelteComponentTyped<LanguageIconProps, LanguageIconEvents, LanguageIconSlots> {
 }
 export {};

package/components/common/menu/Menu.svelte

@@ -1,6 +1,6 @@
 <script>import { classNames } from '../../../utils';
 import { onMount } from 'svelte';
-import { scale } from 'svelte/transition';
+export let noMinW = false;
 let show = false;
 let menu;
 export let placement = 'bottom-start';
@@ -34,15 +34,16 @@ const placementsClasses = {
 </script>
 
 <div class="relative" bind:this={menu}>
-	<div on:click={() => (show = !show)} on:click>
-		<slot name="trigger" />
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<div on:click={() => (show = !show)} class="cursor-pointer hover:bg-gray-100/30">
+		<slot class="triggerable" name="trigger" />
 	</div>
-
 	{#if show}
 		<div
 			class={classNames(
-				'z-50 absolute mt-2 w-60 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none',
-				placementsClasses[placement]
+				'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'
 			)}
 			role="menu"
 			tabindex="-1"