windmill-components 1.37.0 → 1.46.2

package/common.d.ts

@@ -1,5 +1,6 @@
 export declare type OwnerKind = 'group' | 'user';
 export declare type ActionKind = 'Create' | 'Update' | 'Delete' | 'Execute';
+export declare type SupportedLanguage = 'deno' | 'python3' | 'go' | 'bash';
 export interface SchemaProperty {
     type: string | undefined;
     description: string;

package/components/AppConnect.svelte

@@ -19,16 +19,15 @@ const apiTokenApps = {
 <script>import { oauthStore, userStore, workspaceStore } from '../stores';
 import { faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
 import IconedResourceType from './IconedResourceType.svelte';
-import PageHeader from './PageHeader.svelte';
 import { OauthService, ResourceService, VariableService } from '../gen';
 import { page } from '$app/stores';
 import { sendUserToast, truncateRev } from '../utils';
 import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
-import Modal from './Modal.svelte';
 import Password from './Password.svelte';
 import Path from './Path.svelte';
-import { Button } from './common';
+import { Alert, Button, Drawer } from './common';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
 let manual = false;
 let value = '';
 let valueToken;
@@ -39,7 +38,7 @@ $: key = apiTokenApps[resource_type]?.key ?? 'token';
 let scopes = [];
 let extra_params = [];
 let path;
-let modal;
+let drawer;
 let resource_type = '';
 let step = 1;
 let no_back = false;
@@ -55,7 +54,7 @@ export async function open(rt) {
         scopes = connect.scopes;
         extra_params = Object.entries(connect.extra_params ?? {});
     }
-    modal.openModal();
+    drawer.openDrawer();
 }
 export function openFromOauth(rt) {
     resource_type = rt;
@@ -65,7 +64,7 @@ export function openFromOauth(rt) {
     manual = false;
     step = 3;
     no_back = true;
-    modal.openModal();
+    drawer.openDrawer();
 }
 async function loadConnects() {
     connects = await OauthService.listOAuthConnects();
@@ -141,7 +140,7 @@ async function next() {
         });
         dispatch('refresh');
         sendUserToast(`App token set at resource and variable path: ${path}`);
-        modal.closeModal();
+        drawer.closeDrawer();
     }
 }
 async function back() {
@@ -163,8 +162,8 @@ $: disabled =
         (step == 3 && pathError != '');
 </script>
 
-<Modal
-	bind:this={modal}
+<Drawer
+	bind:this={drawer}
 	on:close={() => {
 		dispatch('close')
 	}}
@@ -173,24 +172,20 @@ $: disabled =
 		loadResources()
 	}}
 >
-	<div slot="title">Connect an API</div>
-	<div slot="content">
+	<DrawerContent title="Connect an API" on:close={drawer.closeDrawer}>
 		{#if step == 1}
 			{#if resource_type && !connects[resource_type] && !connectsManual.find((x) => x[0] == resource_type)}
-				<div class="bg-red-100 border-l-4 border-red-600 text-orange-700 p-4" role="alert">
-					<p class="font-bold">No API integration for {resource_type}</p>
-					<p>
-						The resource type "{resource_type}" seems to not have an OAuth API integration. You can
-						still create this resource manually by closing this modal and pressing: "Add a
-						resource". You can also contribute to windmill and add it as an API integration if
-						relevant.
-					</p>
-				</div>
+				<Alert class="mb-4" type="error" title="Resource type not found">
+					The resource type "{resource_type}" seems to not have an OAuth API integration. You can
+					still create this resource manually by closing this modal and pressing: "Add a resource".
+					You can also contribute to windmill and add it as an API integration if relevant.
+				</Alert>
 			{/if}
-			<PageHeader title="OAuth APIs" />
+			<div class="mb-1 font-semibold text-gray-700">OAuth APIs</div>
 			<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
 				{#each Object.entries(connects).sort((a, b) => a[0].localeCompare(b[0])) as [key, values]}
 					<Button
+						size="sm"
 						variant="border"
 						color={key === resource_type ? 'blue' : 'dark'}
 						btnClasses={key === resource_type ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
@@ -203,11 +198,11 @@ $: disabled =
 							dispatch('click')
 						}}
 					>
-						<IconedResourceType name={key} after={true} />
+						<IconedResourceType name={key} after={true} width="20px" height="20px" />
 					</Button>
 				{/each}
 			</div>
-			<PageHeader title="Scopes" primary={false} />
+			<div class="mb-1 font-semibold text-gray-700 mt-6">Scopes</div>
 			{#if !manual && resource_type != ''}
 				{#each scopes as v}
 					<div class="flex flex-row max-w-md mb-2">
@@ -244,7 +239,7 @@ $: disabled =
 			{:else}
 				<p class="italic text-sm">Pick an OAuth API and customize the scopes here</p>
 			{/if}
-			<PageHeader title="Extra Params" primary={false} />
+			<div class="mb-1 font-semibold text-gray-700 mt-6">Extra params</div>
 			{#if !manual && resource_type != ''}
 				{#each extra_params as [k, v]}
 					<div class="flex flex-row max-w-md mb-2">
@@ -284,10 +279,11 @@ $: disabled =
 			{:else}
 				<p class="italic text-sm">Pick an OAuth API and customize the extra parameters here</p>
 			{/if}
-			<PageHeader title="Non OAuth APIs" />
+			<div class="mb-1 font-semibold text-gray-700 mt-6">Non OAuth APIs</div>
 			<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
 				{#each connectsManual as [key, instructions]}
 					<Button
+						size="sm"
 						variant="border"
 						color={key === resource_type ? 'blue' : 'dark'}
 						btnClasses={key === resource_type ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
@@ -297,13 +293,13 @@ $: disabled =
 							dispatch('click')
 						}}
 					>
-						<IconedResourceType name={key} after={true} />
+						<IconedResourceType name={key} after={true} width="20px" height="20px" />
 					</Button>
 				{/each}
 			</div>
 		{:else if step == 2}
 			{#if manual}
-				<PageHeader title="Instructions" />
+				<div class="mb-1 font-semibold text-gray-700 mt-6">Instructions</div>
 				<div>
 					{apiTokenApps[resource_type].instructions}
 				</div>
@@ -345,25 +341,25 @@ $: disabled =
 				</li>
 			</ul>
 		{/if}
-	</div>
-	<div slot="submission" class="flex items-center gap-4">
-		{#if step > 1 && !no_back}
-			<Button variant="border" on:click={back}>Back</Button>
-		{/if}
-		{#if isGoogleSignin}
-			<button {disabled} on:click={next}>
-				<img class="h-10 w-auto" src="/google_signin.png" alt="Google sign-in" />
-			</button>
-		{:else}
-			<Button {disabled} on:click={next}>
-				{#if step == 1 && !manual}
-					Connect
-				{:else if step == 3}
-					Add resource
-				{:else}
-					Next
-				{/if}
-			</Button>
-		{/if}
-	</div>
-</Modal>
+		<div slot="submission" class="flex items-center gap-4">
+			{#if step > 1 && !no_back}
+				<Button variant="border" on:click={back}>Back</Button>
+			{/if}
+			{#if isGoogleSignin}
+				<button {disabled} on:click={next}>
+					<img class="h-10 w-auto" src="/google_signin.png" alt="Google sign-in" />
+				</button>
+			{:else}
+				<Button {disabled} on:click={next}>
+					{#if step == 1 && !manual}
+						Connect
+					{:else if step == 3}
+						Add resource
+					{:else}
+						Next
+					{/if}
+				</Button>
+			{/if}
+		</div>
+	</DrawerContent>
+</Drawer>

package/components/ArgInfo.svelte

@@ -1,28 +1,29 @@
 <script>import { truncate } from '../utils';
-import Modal from './Modal.svelte';
 import Tooltip from './Tooltip.svelte';
 import json from 'svelte-highlight/languages/json';
 import { Highlight } from 'svelte-highlight';
 import { ResourceService } from '../gen';
 import { workspaceStore } from '../stores';
+import Drawer from './common/drawer/Drawer.svelte';
+import { DrawerContent } from './common';
+import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
 export let value;
-let resourceViewer;
-let resource;
+let jsonViewer;
+let jsonViewerContent;
 function isString(value) {
     return typeof value === 'string' || value instanceof String;
 }
 async function getResource(path) {
-    resource = await ResourceService.getResource({ workspace: $workspaceStore, path });
+    jsonViewerContent = (await ResourceService.getResource({ workspace: $workspaceStore, path }))
+        .value;
 }
-let asJson = JSON.stringify(value, null, 4);
 </script>
 
-<Modal bind:this={resourceViewer}>
-	<div slot="title">{resource.path}</div>
-	<div slot="content">
-		<Highlight language={json} code={JSON.stringify(resource.value, null, 4)} />
-	</div>
-</Modal>
+<Drawer bind:this={jsonViewer} size="800px">
+	<DrawerContent title="See JSON" on:close={jsonViewer.toggleDrawer}>
+		<Highlight language={json} code={JSON.stringify(jsonViewerContent, null, 4)} />
+	</DrawerContent>
+</Drawer>
 
 {#if value == '<function call>'}
 	{'<function call>'}<Tooltip
@@ -34,10 +35,31 @@ let asJson = JSON.stringify(value, null, 4);
 		class="text-xs text-blue-500"
 		on:click={async () => {
 			await getResource(value.substring('$res:'.length))
-			resourceViewer.openModal()
+			jsonViewer.toggleDrawer()
 		}}>{value}</button
-	>{:else if asJson.length > 40}
-	{truncate(asJson, 40)}<Tooltip>{asJson}</Tooltip>
+	>
+{:else if typeof value !== 'object'}
+	{truncate(JSON.stringify(value), 40)}
+	{#if JSON.stringify(value).length > 40}
+		<button
+			class="text-xs text-blue-500"
+			on:click={() => {
+				jsonViewerContent = value
+				jsonViewer.toggleDrawer()
+			}}>See expanded</button
+		>
+	{/if}
 {:else}
-	{asJson}
+	<div class="max-h-40 overflow-auto">
+		<ObjectViewer collapsed={false} topBrackets={true} pureViewer={true} json={value} />
+	</div>
+	{#if JSON.stringify(value).length > 120}
+		<button
+			class="text-xs text-blue-500"
+			on:click={() => {
+				jsonViewerContent = value
+				jsonViewer.toggleDrawer()
+			}}>See JSON</button
+		>
+	{/if}
 {/if}

package/components/ArgInput.svelte

@@ -1,5 +1,4 @@
-<script>import { slide } from 'svelte/transition';
-import { faChevronDown, faChevronUp, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
+<script>import { faChevronDown, faChevronUp, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { setInputCat as computeInputCat } from '../utils';
 import { Button } from './common';
 import { createEventDispatcher } from 'svelte';
@@ -11,6 +10,8 @@ import ResourcePicker from './ResourcePicker.svelte';
 import StringTypeNarrowing from './StringTypeNarrowing.svelte';
 import SchemaForm from './SchemaForm.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
+import autosize from 'svelte-autosize';
+import Toggle from './Toggle.svelte';
 export let label = '';
 export let value;
 export let defaultValue = undefined;
@@ -21,7 +22,6 @@ export let type = undefined;
 export let required = false;
 export let pattern = undefined;
 export let valid = required ? false : true;
-export let minRows = 1;
 export let maxRows = 10;
 export let enum_ = undefined;
 export let disabled = false;
@@ -29,6 +29,7 @@ export let editableSchema = false;
 export let itemsType = undefined;
 export let displayHeader = true;
 export let properties = undefined;
+export let autofocus = false;
 let seeEditable = enum_ != undefined || pattern != undefined;
 const dispatch = createEventDispatcher();
 $: maxHeight = maxRows ? `${1 + maxRows * 1.2}em` : `auto`;
@@ -53,17 +54,6 @@ $: {
         validateInput(pattern, value);
     }
 }
-$: {
-    defaultValue && recomputeRowSize(JSON.stringify(defaultValue, null, 4));
-}
-function recomputeRowSize(str) {
-    if (type == 'string') {
-        minRows = str.split('\n').length;
-    }
-    else if (type != 'string') {
-        minRows = Math.max(minRows, Math.min(str.split(/\r\n|\r|\n/).length + 1, maxRows));
-    }
-}
 export function evalValueToRaw() {
     if (value) {
         rawValue = JSON.stringify(value, null, 4);
@@ -82,6 +72,9 @@ function fileChanged(e, cb) {
         cb(undefined);
     }
 }
+export function focus() {
+    el?.focus();
+}
 function validateInput(pattern, v) {
     if (required && (v == undefined || v == null || v === '')) {
         error = 'This field is required';
@@ -119,7 +112,7 @@ export let inputCat = 'string';
 $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
 </script>
 
-<div class="flex flex-col w-full mb-2">
+<div class="flex flex-col w-full">
 	<div>
 		{#if displayHeader}
 			<FieldHeader {label} {required} {type} {contentEncoding} {format} {itemsType} />
@@ -137,10 +130,16 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				</span>
 
 				{#if seeEditable}
-					<div transition:slide class="mt-2">
+					<div class="mt-2">
 						<label class="text-gray-700">
 							Description
-							<textarea rows="1" bind:value={description} placeholder="Edit description" />
+							<textarea
+								class="mb-1"
+								use:autosize
+								rows="1"
+								bind:value={description}
+								placeholder="Field description"
+							/>
 							{#if type == 'string' && !contentEncoding && format != 'date-time'}
 								<StringTypeNarrowing bind:format bind:pattern bind:enum_ bind:contentEncoding />
 							{:else if type == 'object'}
@@ -171,6 +170,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 		<div class="flex space-x-1">
 			{#if inputCat == 'number'}
 				<input
+					{autofocus}
 					on:focus
 					{disabled}
 					type="number"
@@ -182,9 +182,8 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					on:input={() => dispatch('input', { value, isRaw: true })}
 				/>
 			{:else if inputCat == 'boolean'}
-				<input
+				<Toggle
 					{disabled}
-					type="checkbox"
 					class={valid
 						? ''
 						: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}
@@ -199,16 +198,17 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 						{#each value ?? [] as v, i}
 							<div class="flex flex-row max-w-md mt-1">
 								{#if itemsType?.type == 'number'}
-									<input type="number" bind:value={v} />
+									<input autofocus={autofocus && i == 0} type="number" bind:value={v} />
 								{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
 									<input
+										autofocus={autofocus && i == 0}
 										type="file"
 										class="my-6"
 										on:change={(x) => fileChanged(x, (val) => (value[i] = val))}
 										multiple={false}
 									/>
 								{:else}
-									<input type="text" bind:value={v} />
+									<input autofocus={autofocus && i == 0} type="text" bind:value={v} />
 								{/if}
 								<Button
 									variant="border"
@@ -260,13 +260,12 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					<textarea
 						bind:this={el}
 						on:focus
+						{autofocus}
 						{disabled}
+						use:autosize
 						style="max-height: {maxHeight}"
-						on:input={(e) => {
-							if (el) {
-								el.style.height = '5px'
-								el.style.height = el.scrollHeight + 'px'
-							}
+						on:input={() => {
+							dispatch('input', { rawValue: value, isRaw: false })
 						}}
 						class="col-span-10 {valid
 							? ''
@@ -282,7 +281,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					{/each}
 				</select>
 			{:else if inputCat == 'date'}
-				<input class="inline-block" type="datetime-local" bind:value />
+				<input {autofocus} class="inline-block" type="datetime-local" bind:value />
 			{:else if inputCat == 'sql'}
 				<div class="border rounded mb-4 w-full border-gray-700">
 					<SimpleEditor
@@ -299,6 +298,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				</div>
 			{:else if inputCat == 'base64'}
 				<input
+					{autofocus}
 					type="file"
 					class="my-6"
 					on:change={(x) => fileChanged(x, (val) => (value = val))}
@@ -313,21 +313,20 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				/>
 			{:else if inputCat == 'string'}
 				<textarea
+					{autofocus}
+					rows="1"
 					bind:this={el}
 					on:focus={() => dispatch('focus')}
 					on:blur={() => dispatch('blur')}
+					use:autosize
+					type="text"
 					{disabled}
-					style="height: 30px; max-height: {maxHeight}"
 					class="col-span-10 {valid
 						? ''
 						: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
 					placeholder={defaultValue ?? ''}
 					bind:value
-					on:input={async () => {
-						if (el) {
-							el.style.height = '30px'
-							el.style.height = el.scrollHeight + 'px'
-						}
+					on:input={() => {
 						dispatch('input', { rawValue: value, isRaw: false })
 					}}
 				/>
@@ -347,7 +346,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 			{/if}
 			<slot name="actions" />
 		</div>
-		<div class="text-right text-xs {error === '' ? 'text-white' : 'font-bold text-red-600'}">
+		<div class="text-right text-xs {error === '' ? 'text-white' : 'text-red-600'}">
 			{error === '' ? '...' : error}
 		</div>
 	</div>

package/components/ArgInput.svelte.d.ts

@@ -14,7 +14,6 @@ declare const __propDef: {
         required?: boolean | undefined;
         pattern?: undefined | string;
         valid?: boolean | undefined;
-        minRows?: number | undefined;
         maxRows?: number | undefined;
         enum_?: string[] | undefined;
         disabled?: boolean | undefined;
@@ -27,8 +26,10 @@ declare const __propDef: {
         properties?: {
             [name: string]: SchemaProperty;
         } | undefined;
+        autofocus?: boolean | undefined;
         editor?: SimpleEditor | undefined;
         evalValueToRaw?: (() => void) | undefined;
+        focus?: (() => void) | undefined;
         inputCat?: InputCat | undefined;
     };
     events: {
@@ -47,5 +48,6 @@ export declare type ArgInputEvents = typeof __propDef.events;
 export declare type ArgInputSlots = typeof __propDef.slots;
 export default class ArgInput extends SvelteComponentTyped<ArgInputProps, ArgInputEvents, ArgInputSlots> {
     get evalValueToRaw(): () => void;
+    get focus(): () => void;
 }
 export {};

package/components/ButtonAndDropdown.svelte

@@ -18,7 +18,7 @@ const dispatch = createEventDispatcher();
 		class="border-l border-gray-300 px-2 inline-block py-0 my-0"
 		on:click={() => dispatch('clickDropdown')}
 	>
-		<div slot="name" class="py-0 my-0">
+		<div class="py-0 my-0">
 			<Icon class="text-white align-top py-0 my-0" data={faSortDown} />
 		</div>
 	</Dropdown>

package/components/CenteredPage.svelte

@@ -1,5 +1,5 @@
-<div class="py-6">
-	<div class="max-w-6xl mx-auto px-4 sm:px-6 md:px-8">
+<div class="pb-6 h-fit-content">
+	<div class="max-w-6xl mx-auto px-4 sm:px-6 md:px-8 h-fit-content">
 		<slot />
 	</div>
 </div>

package/components/CronInput.svelte

@@ -9,6 +9,7 @@ export let validCRON = true;
 let preview = [];
 let cronError = '';
 export let schedule = '0 0 12 * *';
+export let disabled = false;
 let limit = 3;
 $: handleScheduleInput(schedule);
 async function handleScheduleInput(input) {
@@ -41,28 +42,31 @@ async function handleScheduleInput(input) {
 		id="cron-schedule"
 		name="cron-schedule"
 		bind:value={schedule}
+		{disabled}
 	/>
 </div>
-<div class="flex flex-row text-xs text-blue-500 gap-3 pl-28">
-	<button
-		on:click={() => {
-			schedule = '0 */15 * * *'
-			cronError = ''
-		}}>every 15 min</button
-	>
-	<button
-		on:click={() => {
-			schedule = '0 0 * * * *'
-			cronError = ''
-		}}>every hour</button
-	>
-	<button
-		on:click={() => {
-			schedule = '0 0 8 * * *'
-			cronError = ''
-		}}>once a day at 8AM</button
-	>
-</div>
+{#if !disabled}
+	<div class="flex flex-row text-xs text-blue-500 gap-3 pl-28">
+		<button
+			on:click={() => {
+				schedule = '0 */15 * * *'
+				cronError = ''
+			}}>every 15 min</button
+		>
+		<button
+			on:click={() => {
+				schedule = '0 0 * * * *'
+				cronError = ''
+			}}>every hour</button
+		>
+		<button
+			on:click={() => {
+				schedule = '0 0 8 * * *'
+				cronError = ''
+			}}>once a day at 8AM</button
+		>
+	</div>
+{/if}
 
 <CollapseLink text="preview next runs" open={true}>
 	{#if preview && preview.length > 0}

package/components/CronInput.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         validCRON?: boolean | undefined;
         schedule?: string | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/DisplayResult.svelte

@@ -41,7 +41,7 @@ function inferResultKind(result) {
             else if (keys.length == 1 && keys[0] == 'file') {
                 return 'file';
             }
-            else if (keys.length == 1 && keys[0] == 'error') {
+            else if (keys.length == 1 && keys[0] == 'error' && typeof result['error'] == 'string') {
                 return 'error';
             }
         }
@@ -57,7 +57,7 @@ function inferResultKind(result) {
 			<div class="mb-2 text-gray-500 text-sm bg-gray-50/20">
 				as JSON <input type="checkbox" bind:checked={forceJson} /></div
 			>{/if}{#if typeof result == 'object' && Object.keys(result).length > 0}<div
-				class="mb-2 text-gray-700"
+				class="mb-2 text-sm text-gray-700"
 				>The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b></div
 			>{/if}{#if !forceJson && resultKind == 'table-col'}<div
 				class="grid grid-flow-col-dense border border-gray-200 rounded-md "

package/components/Dropdown.svelte

@@ -11,9 +11,10 @@ export let name = undefined;
 // This can cause the dropdown to be hidden if it is in an overflow-hidden div.
 // In that case, set relative to false and control the dropdown positioning from the div
 export let relative = true;
+export let left = true;
 const dispatch = createEventDispatcher();
-function openMenu() {
-    open = true;
+function toggle() {
+    open = !open;
 }
 function handleClickOutsideMenu(event) {
     open = false;
@@ -25,22 +26,17 @@ function handleClickOutsideMenu(event) {
 	use:clickOutside
 	on:click_outside={handleClickOutsideMenu}
 >
-	<Button
-		color="light"
-		size="xs"
-		aria-expanded="false"
-		aria-haspopup="true"
-		btnClasses="!text-blue-500 bg-transparent"
-		on:click={openMenu}
-	>
-		{#if !name}
+	<Button color="light" size="xs" btnClasses="!text-blue-500 bg-transparent" on:click={toggle}>
+		{#if !$$slots.default}
 			<Icon data={faEllipsisH} scale={1.2} />
 		{:else}
-			{name}
+			<slot />
 		{/if}
 	</Button>
 	<div
-		class="flex flex-col z-50 origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none {open
+		class="flex flex-col z-50 origin-top-right absolute {left
+			? 'right-0'
+			: 'left-0'} mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none {open
 			? 'visible'
 			: 'hidden'}"
 		role="menu"
@@ -52,6 +48,7 @@ function handleClickOutsideMenu(event) {
 					<button
 						on:click={(event) => {
 							if (!item.disabled) {
+								event.preventDefault()
 								open = false
 								item.action && item.action(event)
 								dispatch('click', { item: item?.eventName })