windmill-components 1.28.6 → 1.35.0

package/components/landing/RessourceGettingStarted.svelte

@@ -0,0 +1,51 @@
+<script>
+	import { goto } from '$app/navigation'
+</script>
+
+<div class="p-4 border border-gray-300 rounded-md bg-gray-50 dark:border-gray-600 dark:bg-gray-700">
+	<div class="flex items-center">
+		<h3 class="inline-flex items-center text-lg font-medium text-gray-700 ">
+			<svg
+				class="w-6 h-6 mr-2"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path d="M12 14l9-5-9-5-9 5 9 5z" /><path
+					d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
+				/><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
+				/>
+			</svg>
+			Getting started
+		</h3>
+	</div>
+	<div class="mt-2 mb-4 text-sm text-gray-700 dark:text-gray-300">
+		Connect to apps like Slack, Google Drive or Airtable using OAuth.
+	</div>
+	<div class="flex">
+		<button
+			on:click={() => goto('resources')}
+			type="button"
+			class="inline-flex items-center text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center  dark:bg-gray-600 dark:hover:bg-gray-500 dark:focus:ring-gray-600"
+		>
+			<svg
+				class="w-4 h-4 mr-2"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+				/>
+			</svg>
+			Connect an API
+		</button>
+	</div>
+</div>

package/components/landing/RessourceGettingStarted.svelte.d.ts

@@ -0,0 +1,19 @@
+/** @typedef {typeof __propDef.props}  RessourceGettingStartedProps */
+/** @typedef {typeof __propDef.events}  RessourceGettingStartedEvents */
+/** @typedef {typeof __propDef.slots}  RessourceGettingStartedSlots */
+export default class RessourceGettingStarted extends SvelteComponentTyped<{}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type RessourceGettingStartedProps = typeof __propDef.props;
+export type RessourceGettingStartedEvents = typeof __propDef.events;
+export type RessourceGettingStartedSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/landing/ScriptBox.svelte

@@ -0,0 +1,81 @@
+<script>import { goto } from '$app/navigation';
+import { truncateHash } from '../../utils';
+export let script;
+</script>
+
+<div
+	class="border p-4 rounded-sm shadow-sm space-y-2 hover:border-blue-600 flex flex-col justify-between cursor-pointer"
+	on:click={() => goto(`/scripts/get/${script.hash}`)}
+>
+	<div class="font-bold">{script.summary || script.path}</div>
+
+	<div class="inline-flex justify-between w-full">
+		<div class="text-xs">{script.path}</div>
+
+		<span class="bg-gray-100 text-gray-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded ">
+			{truncateHash(script.hash)}
+		</span>
+	</div>
+	<div class="inline-flex space-x-1 w-full">
+		<span class="bg-blue-100 text-blue-800 text-xs font-semibold  px-2.5 py-0.5 rounded ">
+			{String(script.language).toUpperCase()}
+		</span>
+		{#if script.is_trigger}
+			<span class="bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded">
+				TRIGGER
+			</span>
+		{/if}
+	</div>
+	<div class="inline-flex space-x-2 space-x-reverse flex-row-reverse w-full">
+		<button
+			on:click|stopPropagation={() => goto(`/scripts/edit/${script.hash}?step=2`)}
+			type="button"
+			class="inline-flex items-center text-gray-700 bg-transparent border border-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+			data-dismiss-target="#alert-additional-content-5"
+			aria-label="Close"
+		>
+			<svg
+				class="w-4 h-4 mr-2"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
+				/>
+			</svg>
+			Edit
+		</button>
+
+		<button
+			on:click|stopPropagation={() => goto(`/scripts/run/${script.hash}`)}
+			type="button"
+			class="inline-flex items-center text-gray-700 bg-transparent border border-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+			data-dismiss-target="#alert-additional-content-5"
+			aria-label="Close"
+		>
+			<svg
+				class="w-4 h-4 mr-2"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
+				/><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+				/>
+			</svg>
+			Run
+		</button>
+	</div>
+</div>

package/components/landing/ScriptBox.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Script } from '../../gen';
+declare const __propDef: {
+    props: {
+        script: Script;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ScriptBoxProps = typeof __propDef.props;
+export declare type ScriptBoxEvents = typeof __propDef.events;
+export declare type ScriptBoxSlots = typeof __propDef.slots;
+export default class ScriptBox extends SvelteComponentTyped<ScriptBoxProps, ScriptBoxEvents, ScriptBoxSlots> {
+}
+export {};

package/components/landing/ScriptGettingStarted.svelte

@@ -0,0 +1,93 @@
+<script>
+	import { goto } from '$app/navigation'
+</script>
+
+<div class="p-4 border border-gray-300 rounded-md bg-gray-50 ">
+	<div class="flex items-center">
+		<h3 class="inline-flex items-center text-lg font-medium text-gray-700 ">
+			<svg
+				class="w-6 h-6 mr-2"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path d="M12 14l9-5-9-5-9 5 9 5z" /><path
+					d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
+				/><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
+				/>
+			</svg>
+			Getting started
+		</h3>
+	</div>
+	<div class="mt-2 mb-4 text-sm text-gray-700 ">
+		Create a new script or find inspiration on the Hub!
+	</div>
+	<div class="inline-flex flex-wrap gap-y-2">
+		<button
+			on:click={() => goto('scripts/add')}
+			type="button"
+			class="mr-2 inline-flex items-center text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+		>
+			<svg
+				class="w-4 h-4 mr-2"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+				/></svg
+			>
+			Create script
+		</button>
+		<button
+			on:click={() => goto('https://docs.windmill.dev/docs/getting_started/scripts')}
+			type="button"
+			class="mr-2 inline-flex items-center text-white bg-blue-600 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+		>
+			<svg
+				class="w-4 h-4 mr-2"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+				/>
+			</svg>
+			Script documentation
+		</button>
+		<button
+			on:click={() => goto('https://hub.windmill.dev/')}
+			type="button"
+			class="inline-flex items-center text-gray-700 bg-transparent border border-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+			data-dismiss-target="#alert-additional-content-5"
+			aria-label="Close"
+		>
+			<svg
+				class="w-4 h-4 mr-2"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+				/>
+			</svg>
+			Explore community scripts on WindmillHub
+		</button>
+	</div>
+</div>

package/components/landing/ScriptGettingStarted.svelte.d.ts

@@ -0,0 +1,19 @@
+/** @typedef {typeof __propDef.props}  ScriptGettingStartedProps */
+/** @typedef {typeof __propDef.events}  ScriptGettingStartedEvents */
+/** @typedef {typeof __propDef.slots}  ScriptGettingStartedSlots */
+export default class ScriptGettingStarted extends SvelteComponentTyped<{}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ScriptGettingStartedProps = typeof __propDef.props;
+export type ScriptGettingStartedEvents = typeof __propDef.events;
+export type ScriptGettingStartedSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/preview/FlowPreviewStatus.svelte

@@ -0,0 +1,28 @@
+<script>import JobStatus from '../JobStatus.svelte';
+export let job;
+</script>
+
+<div class="overflow-x-auto relative">
+	<table class="text-sm text-left text-gray-500 dark:text-gray-400">
+		<tbody>
+			<tr>
+				<th scope="row" class="py-2 pr-6 font-bold text-gray-900 whitespace-nowrap dark:text-white">
+					Status
+				</th>
+				<td class="py-2 "> <JobStatus {job} /></td>
+			</tr>
+			{#if job}
+				<tr>
+					<th scope="row" class="py-2 pr-6  font-bold text-gray-900 whitespace-nowrap ">
+						Job Id
+					</th>
+					<td class="py-2">
+						<a href="/run/{job?.id}">
+							{job?.id}
+						</a>
+					</td>
+				</tr>
+			{/if}
+		</tbody>
+	</table>
+</div>

package/components/preview/FlowPreviewStatus.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { CompletedJob, QueuedJob } from '../../gen';
+declare const __propDef: {
+    props: {
+        job: QueuedJob | CompletedJob;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowPreviewStatusProps = typeof __propDef.props;
+export declare type FlowPreviewStatusEvents = typeof __propDef.events;
+export declare type FlowPreviewStatusSlots = typeof __propDef.slots;
+export default class FlowPreviewStatus extends SvelteComponentTyped<FlowPreviewStatusProps, FlowPreviewStatusEvents, FlowPreviewStatusSlots> {
+}
+export {};

package/components/propertyPicker/ObjectViewer.svelte

@@ -1,4 +1,5 @@
-<script>import { createEventDispatcher } from 'svelte';
+<script>import { truncate } from '../../utils';
+import { createEventDispatcher } from 'svelte';
 import { getTypeAsString } from '../flows/utils';
 import { computeKey } from './utils';
 import WarningMessage from './WarningMessage.svelte';
@@ -30,16 +31,15 @@ function selectProp(key) {
 
 {#if keys.length > 0}
 	<span class:hidden={collapsed}>
-		{#if level != 0}<span class="cursor-pointer hover:bg-slate-200" on:click={collapse}>(-)</span
+		{#if level != 0}<span class="cursor-pointer hover:bg-slate-200 px-1 rounded" on:click={collapse}
+				>(-)</span
 			>{/if}
 		<ul class="w-full">
 			{#each keys as key, index}
-				<li class={getTypeAsString(json[key]) !== 'object' ? 'hover:bg-sky-100 pt-1' : 'pt-1'}>
-					{#if !isArray}
-						<span class="key mr-1">{key}:</span>
-					{:else}
-						<span class="key mr-1">{index}:</span>
-					{/if}
+				<li class="pt-1">
+					<button on:click={() => selectProp(key)} class="key rounded px-1 hover:bg-sky-100"
+						>{!isArray ? key : index}:</button
+					>
 
 					{#if getTypeAsString(json[key]) === 'object'}
 						<svelte:self
@@ -51,14 +51,14 @@ function selectProp(key) {
 							on:select
 						/>
 					{:else}
-						<button class="val {getTypeAsString(json[key])}" on:click={() => selectProp(key)}>
+						<button
+							class="val rounded px-1 hover:bg-sky-100 {getTypeAsString(json[key])}"
+							on:click={() => selectProp(key)}
+						>
 							{#if json[key] === undefined}
 								<WarningMessage />
 							{:else}
-								<span> {JSON.stringify(json[key])}</span>
-								{#if !pureViewer}
-									<button class="ml-2 default-button-secondary py-0"> Select </button>
-								{/if}
+								<span>{truncate(JSON.stringify(json[key]), 40)}</span>
 							{/if}
 						</button>
 					{/if}

package/components/propertyPicker/utils.js

@@ -43,14 +43,15 @@ const validJSExpressionRegex = new RegExp(/^(?!(?:do|if|in|for|let|new|try|var|c
 export function computeKey(key, isArray, currentPath) {
     const isIdentifierValid = validJSExpressionRegex.test(key);
     // When an identifier is not a valid JS expression, we must use the bracket notation
+    const oldKey = key;
     if (!isIdentifierValid) {
         key = `["${key}"]`;
     }
     if (isArray) {
         if (currentPath === 'step') {
-            return `${currentPath}(${key})?`;
+            return `step(${oldKey})`;
         }
-        return `${currentPath}[${key}]`;
+        return `${currentPath}[${oldKey}]`;
     }
     else {
         if (currentPath) {

package/components/script_editor/LogPanel.svelte

@@ -0,0 +1,172 @@
+<script>import { CompletedJob, Job, JobService, Preview } from '../../gen';
+import { workspaceStore } from '../../stores';
+import { displayDate } from '../../utils';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import Icon from 'svelte-awesome';
+import { check } from 'svelte-awesome/icons';
+import Tabs from '../common/tabs/Tabs.svelte';
+import Tab from '../common/tabs/Tab.svelte';
+import TabContent from '../common/tabs/TabContent.svelte';
+import DisplayResult from '../DisplayResult.svelte';
+import TableCustom from '../TableCustom.svelte';
+import Drawer from '../common/drawer/Drawer.svelte';
+import { Highlight } from 'svelte-highlight';
+import { json, python, typescript } from 'svelte-highlight/languages';
+import DrawerContent from '../common/drawer/DrawerContent.svelte';
+export let path;
+export let lang;
+export let previewIsLoading = false;
+export let previewJob;
+export let pastPreviews = [];
+export let lastSave;
+let selectedTab = 'logs';
+let drawerOpen = false;
+let drawerContent = undefined;
+function openDrawer(newContent) {
+    drawerContent = newContent;
+    drawerOpen = true;
+}
+function closeDrawer() {
+    drawerOpen = false;
+}
+</script>
+
+<Drawer bind:open={drawerOpen} size="800px">
+	<DrawerContent title={drawerContent?.title} on:close={() => closeDrawer()}>
+		{#if drawerContent?.mode === 'json'}
+			<Highlight language={json} code={JSON.stringify(drawerContent.content, null, 4)} />
+		{:else if drawerContent?.mode === 'plain'}
+			<pre class="overflow-x-auto break-all relative h-full m-2 text-xs bg-white shadow-inner p-2">
+				{drawerContent?.content}
+			</pre>
+		{:else if drawerContent?.mode === 'deno'}
+			<Highlight language={typescript} code={drawerContent?.content} />
+		{:else if drawerContent?.mode === 'python3'}
+			<Highlight language={python} code={drawerContent?.content} />
+		{/if}
+	</DrawerContent>
+</Drawer>
+
+<Tabs bind:selected={selectedTab}>
+	<Tab value="logs"><span class="text-xs">Logs</span></Tab>
+	<Tab value="results"><span class="text-xs">Results</span></Tab>
+	<Tab value="history"><span class="text-xs">History</span></Tab>
+	<Tab value="last_save"><span class="text-xs">Last save</span></Tab>
+
+	<svelte:fragment slot="content">
+		<div class="px-4">
+			<TabContent value="logs">
+				<pre class="whitespace-pre-wrap break-all relative h-full bg-gray-50 text-xs p-2">
+          {#if previewJob && previewJob.logs}
+						{previewJob.logs}
+					{:else if previewIsLoading}
+						Starting preview ...
+					{:else}
+						No preview is available yet
+					{/if}
+        </pre>
+			</TabContent>
+			<TabContent value="results">
+				<pre class="overflow-x-auto break-all relative h-full">
+          {#if previewJob && 'result' in previewJob && previewJob.result}
+						<DisplayResult result={previewJob.result} />
+					{:else if previewIsLoading}
+						Running...
+					{:else}
+						No output is available yet
+					{/if}
+        </pre>
+			</TabContent>
+			<TabContent value="history">
+				<TableCustom>
+					<tr slot="header-row">
+						<th class="text-xs">Id</th>
+						<th class="text-xs">Created at</th>
+						<th class="text-xs">Success</th>
+						<th class="text-xs">Result</th>
+						<th class="text-xs">Code</th>
+						<th class="text-xs">Logs</th>
+					</tr>
+					<tbody slot="body">
+						{#each pastPreviews as { id, created_at, success, result }}
+							<tr class="">
+								<td class="text-xs">
+									<a class="pr-3" href="/run/{id}" target="_blank">{id.substring(30)}</a>
+								</td>
+								<td class="text-xs">{displayDate(created_at)}</td>
+								<td class="text-xs">
+									{#if success}
+										<Icon class="text-green-600" data={check} scale={0.6} />
+									{:else}
+										<Icon class="text-red-700" data={faTimes} scale={0.6} />
+									{/if}
+								</td>
+								<td class="text-xs">
+									<a
+										href="#result"
+										class="text-xs"
+										on:click={() => {
+											openDrawer({ mode: 'json', content: result, title: 'Result' })
+										}}
+									>
+										{JSON.stringify(result).substring(0, 30)}...
+									</a>
+								</td>
+								<td class="text-xs">
+									<a
+										href="#code"
+										class="text-xs"
+										on:click={async () => {
+											const code = (
+												await JobService.getCompletedJob({
+													workspace: $workspaceStore ?? 'NO_W',
+													id
+												})
+											).raw_code
+
+											openDrawer({ mode: lang, content: String(code), title: `Code ${lang}` })
+										}}
+									>
+										View code
+									</a>
+								</td>
+								<td>
+									<a
+										href="#logs"
+										class="text-xs"
+										on:click={async () => {
+											const logs = (
+												await JobService.getCompletedJob({
+													workspace: $workspaceStore ?? 'NO_W',
+													id
+												})
+											).logs
+											openDrawer({ mode: 'plain', content: String(logs), title: `Code ${lang}` })
+										}}
+									>
+										View logs
+									</a>
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</TableCustom>
+			</TabContent>
+			<TabContent value="last_save">
+				{#if lastSave}
+					<a
+						href="#last_save"
+						class="text-xs"
+						on:click={() => {
+							openDrawer({ mode: lang, content: String(lastSave), title: `Code ${lang}` })
+						}}
+					>
+						View last local save for path {path}
+					</a>
+				{:else}
+					No local save
+				{/if}
+			</TabContent>
+		</div>
+	</svelte:fragment>
+</Tabs>

package/components/script_editor/LogPanel.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import { CompletedJob, Job, Preview } from '../../gen';
+declare const __propDef: {
+    props: {
+        path: string | undefined;
+        lang: Preview.language;
+        previewIsLoading?: boolean | undefined;
+        previewJob: Job | undefined;
+        pastPreviews?: CompletedJob[] | undefined;
+        lastSave: string | null;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type LogPanelProps = typeof __propDef.props;
+export declare type LogPanelEvents = typeof __propDef.events;
+export declare type LogPanelSlots = typeof __propDef.slots;
+export default class LogPanel extends SvelteComponentTyped<LogPanelProps, LogPanelEvents, LogPanelSlots> {
+}
+export {};

package/components/sidebar/MenuLink.svelte

@@ -0,0 +1,49 @@
+<script>import { classNames } from '../../utils';
+import { navigating } from '$app/stores';
+import Icon from 'svelte-awesome';
+export let label;
+export let href;
+export let icon;
+export let isCollapsed;
+export let disabled = false;
+let isSelected = false;
+navigating.subscribe(() => {
+    if (href === '/') {
+        isSelected = window.location.pathname === href;
+    }
+    else {
+        isSelected = window.location.pathname.includes(href);
+    }
+});
+</script>
+
+{#if !disabled}
+	<a
+		{href}
+		class={classNames(
+			'group flex items-center px-2 py-2 text-sm font-medium rounded-md h-8',
+			isSelected ? 'bg-gray-50 text-gray-900' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
+		)}
+		target={href.includes('http') ? '_blank' : null}
+	>
+		<Icon
+			data={icon}
+			class={classNames(
+				' flex-shrink-0 h-4 w-4',
+				isSelected ? ' text-gray-700' : 'text-white group-hover:text-gray-500',
+				isCollapsed ? '-mr-1' : 'mr-3'
+			)}
+		/>
+
+		{#if !isCollapsed}
+			<span
+				class={classNames(
+					'whitespace-pre text-white',
+					isSelected ? ' text-gray-700 font-bold' : 'text-white group-hover:text-gray-500'
+				)}
+			>
+				{label}
+			</span>
+		{/if}
+	</a>
+{/if}

package/components/sidebar/MenuLink.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+declare const __propDef: {
+    props: {
+        label: string;
+        href: string;
+        icon: IconDefinition;
+        isCollapsed: boolean;
+        disabled?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type MenuLinkProps = typeof __propDef.props;
+export declare type MenuLinkEvents = typeof __propDef.events;
+export declare type MenuLinkSlots = typeof __propDef.slots;
+export default class MenuLink extends SvelteComponentTyped<MenuLinkProps, MenuLinkEvents, MenuLinkSlots> {
+}
+export {};