windmill-components 1.46.3 → 1.55.0

package/components/common/menu/Menu.svelte.d.ts

@@ -1,23 +1,24 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        noMinW?: boolean | undefined;
         placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end" | undefined;
     };
     events: {
-        click: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        trigger: {};
+        trigger: {
+            class: string;
+        };
         default: {
             close: () => void;
         };
     };
 };
-export declare type MenuProps = typeof __propDef.props;
-export declare type MenuEvents = typeof __propDef.events;
-export declare type MenuSlots = typeof __propDef.slots;
+export type MenuProps = typeof __propDef.props;
+export type MenuEvents = typeof __propDef.events;
+export type MenuSlots = typeof __propDef.slots;
 export default class Menu extends SvelteComponentTyped<MenuProps, MenuEvents, MenuSlots> {
 }
 export {};

package/components/common/menu/MenuItem.svelte

@@ -1,3 +1,4 @@
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div on:click class="py-1">
 	<span
 		class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900"

package/components/common/menu/MenuItem.svelte.d.ts

@@ -1,7 +1,9 @@
 /** @typedef {typeof __propDef.props}  MenuItemProps */
 /** @typedef {typeof __propDef.events}  MenuItemEvents */
 /** @typedef {typeof __propDef.slots}  MenuItemSlots */
-export default class MenuItem extends SvelteComponentTyped<{}, {
+export default class MenuItem extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
     click: MouseEvent;
 } & {
     [evt: string]: CustomEvent<any>;
@@ -14,7 +16,9 @@ export type MenuItemEvents = typeof __propDef.events;
 export type MenuItemSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        [x: string]: never;
+    };
     events: {
         click: MouseEvent;
     } & {

package/components/common/popup/Popup.svelte

@@ -131,17 +131,6 @@ onDestroy(removeAllListeners);
 			<div class={innerClasses}>
 				<slot />
 			</div>
-			{#if !disableInstruction && focusableElements?.length}
-				<div
-					class="flex justify-center items-center font-semibold
-					text-xs text-gray-700 p-1 border-x border-b rounded-b bg-gray-100"
-				>
-					Use
-					<Kbd class="!bg-gray-200 !border-gray-300 !px-1 !py-0 !rounded-sm">↑</Kbd>
-					and
-					<Kbd class="!bg-gray-200 !border-gray-300 !px-1 !py-0 !rounded-sm">↓</Kbd>
-				</div>
-			{/if}
 		</div>
 	{/if}
 </div>

package/components/common/popup/Popup.svelte.d.ts

@@ -17,9 +17,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type PopupProps = typeof __propDef.props;
-export declare type PopupEvents = typeof __propDef.events;
-export declare type PopupSlots = typeof __propDef.slots;
+export type PopupProps = typeof __propDef.props;
+export type PopupEvents = typeof __propDef.events;
+export type PopupSlots = typeof __propDef.slots;
 export default class Popup extends SvelteComponentTyped<PopupProps, PopupEvents, PopupSlots> {
     get ref(): HTMLElement;
     /**accessor*/

package/components/common/skeleton/Skeleton.svelte.d.ts

@@ -12,9 +12,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type SkeletonProps = typeof __propDef.props;
-export declare type SkeletonEvents = typeof __propDef.events;
-export declare type SkeletonSlots = typeof __propDef.slots;
+export type SkeletonProps = typeof __propDef.props;
+export type SkeletonEvents = typeof __propDef.events;
+export type SkeletonSlots = typeof __propDef.slots;
 export default class Skeleton extends SvelteComponentTyped<SkeletonProps, SkeletonEvents, SkeletonSlots> {
 }
 export {};

package/components/common/skeleton/SkeletonElement.svelte.d.ts

@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type SkeletonElementProps = typeof __propDef.props;
-export declare type SkeletonElementEvents = typeof __propDef.events;
-export declare type SkeletonElementSlots = typeof __propDef.slots;
+export type SkeletonElementProps = typeof __propDef.props;
+export type SkeletonElementEvents = typeof __propDef.events;
+export type SkeletonElementSlots = typeof __propDef.slots;
 export default class SkeletonElement extends SvelteComponentTyped<SkeletonElementProps, SkeletonElementEvents, SkeletonElementSlots> {
 }
 export {};

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

@@ -1,8 +1,8 @@
 export declare const HEIGHT_UNIT: 16;
-export declare type SkeletonLayout = (SkeletonGap | SkeletonRow)[];
+export type SkeletonLayout = (SkeletonGap | SkeletonRow)[];
 /** **Gap**: number of height units. *(1 unit = 16px)* */
-export declare type SkeletonGap = number;
-export declare type SkeletonRow = SkeletonElement[] | ISkeletonRow;
+export type SkeletonGap = number;
+export type SkeletonRow = SkeletonElement[] | ISkeletonRow;
 export interface ISkeletonRow {
     /** Number of elements in the row.
      * All elements will have the same width and height of the row. */
@@ -10,7 +10,7 @@ export interface ISkeletonRow {
     /** **Height**: number of height units. *(1 unit = 16px)* */
     h: number;
 }
-export declare type SkeletonElement = number | ISkeletonElement;
+export type SkeletonElement = number | ISkeletonElement;
 export interface ISkeletonElement {
     /** **Height**: number of height units. *(1 unit = 16px)* */
     h: number;

package/components/common/table/AppRow.svelte

@@ -0,0 +1,77 @@
+<script>import Dropdown from '../../Dropdown.svelte';
+import SharedBadge from '../../SharedBadge.svelte';
+import { AppService } from '../../../gen';
+import { userStore, workspaceStore } from '../../../stores';
+import { faEdit, faEye, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher } from 'svelte';
+import Button from '../button/Button.svelte';
+import Row from './Row.svelte';
+export let app;
+export let marked;
+export let starred;
+let { summary, path, extra_perms, canWrite, workspace_id } = app;
+const dispatch = createEventDispatcher();
+</script>
+
+<Row
+	href={`/apps/get/${path}`}
+	kind="app"
+	{marked}
+	{path}
+	{summary}
+	workspaceId={workspace_id ?? $workspaceStore ?? ''}
+	{starred}
+	on:change
+>
+	<svelte:fragment slot="badges">
+		<SharedBadge {canWrite} extraPerms={extra_perms} />
+	</svelte:fragment>
+	<svelte:fragment slot="actions">
+		<span class="hidden md:inline-flex gap-x-1">
+			{#if !$userStore?.operator}
+				{#if canWrite}
+					<div>
+						<Button
+							color="light"
+							size="xs"
+							variant="border"
+							startIcon={{ icon: faEdit }}
+							href="/apps/edit/{path}"
+						>
+							Edit
+						</Button>
+					</div>
+				{/if}
+			{/if}
+			<Button
+				href="/apps/get/{path}"
+				color="dark"
+				size="xs"
+				spacingSize="md"
+				startIcon={{ icon: faEye }}
+			>
+				View
+			</Button>
+		</span>
+		<Dropdown
+			placement="bottom-end"
+			dropdownItems={[
+				{
+					displayName: 'View app',
+					icon: faEye,
+					href: `/apps/get/${path}`
+				},
+				{
+					displayName: 'Delete',
+					icon: faTrashAlt,
+					action: async () => {
+						await AppService.deleteApp({ workspace: $workspaceStore ?? '', path })
+						dispatch('change')
+					},
+					type: 'delete',
+					disabled: !canWrite
+				}
+			]}
+		/>
+	</svelte:fragment>
+</Row>

package/components/common/table/AppRow.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import { type ListableApp } from '../../../gen';
+declare const __propDef: {
+    props: {
+        app: ListableApp & {
+            canWrite: boolean;
+        };
+        marked: string | undefined;
+        starred: boolean;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppRowProps = typeof __propDef.props;
+export type AppRowEvents = typeof __propDef.events;
+export type AppRowSlots = typeof __propDef.slots;
+export default class AppRow extends SvelteComponentTyped<AppRowProps, AppRowEvents, AppRowSlots> {
+}
+export {};

package/components/common/table/FlowRow.svelte

@@ -0,0 +1,141 @@
+<script>import Dropdown from '../../Dropdown.svelte';
+import SharedBadge from '../../SharedBadge.svelte';
+import { FlowService } from '../../../gen';
+import { userStore, workspaceStore } from '../../../stores';
+import { sendUserToast } from '../../../utils';
+import { faArchive, faCalendarAlt, faCodeFork, faEdit, faEye, faList, faPlay, faShare } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher } from 'svelte';
+import Button from '../button/Button.svelte';
+import Row from './Row.svelte';
+export let flow;
+export let marked;
+export let starred;
+export let shareModal;
+let { summary, path, extra_perms, canWrite, workspace_id } = flow;
+const dispatch = createEventDispatcher();
+async function archiveFlow(path) {
+    try {
+        await FlowService.archiveFlowByPath({ workspace: $workspaceStore, path });
+        dispatch('change');
+        sendUserToast(`Archived flow ${path}`);
+    }
+    catch (err) {
+        sendUserToast(`Could not archive this flow ${err.body}`, true);
+    }
+}
+</script>
+
+<Row
+	href={`/flows/run/${path}`}
+	kind="flow"
+	workspaceId={workspace_id ?? $workspaceStore ?? ''}
+	{marked}
+	{path}
+	{summary}
+	{starred}
+	on:change
+>
+	<svelte:fragment slot="badges">
+		<SharedBadge {canWrite} extraPerms={extra_perms} />
+	</svelte:fragment>
+	<svelte:fragment slot="actions">
+		<span class="hidden md:inline-flex gap-x-1">
+			{#if !$userStore?.operator}
+				{#if canWrite}
+					<div>
+						<Button
+							color="light"
+							size="xs"
+							variant="border"
+							startIcon={{ icon: faEdit }}
+							href="/flows/edit/{path}"
+						>
+							Edit
+						</Button>
+					</div>
+				{:else}
+					<div>
+						<Button
+							color="light"
+							size="xs"
+							variant="border"
+							startIcon={{ icon: faCodeFork }}
+							href="/flows/add?template={path}"
+						>
+							Fork
+						</Button>
+					</div>
+				{/if}
+			{/if}
+
+			<Button
+				href="/flows/get/{path}"
+				color="light"
+				variant="border"
+				size="xs"
+				spacingSize="md"
+				startIcon={{ icon: faEye }}
+			>
+				Detail
+			</Button>
+			<Button
+				href="/flows/run/{path}"
+				color="dark"
+				size="xs"
+				spacingSize="md"
+				endIcon={{ icon: faPlay }}
+			>
+				Run
+			</Button>
+		</span>
+
+		<Dropdown
+			placement="bottom-end"
+			dropdownItems={[
+				{
+					displayName: 'View flow',
+					icon: faEye,
+					href: `/flows/get/${path}`
+				},
+				{
+					displayName: 'Edit',
+					icon: faEdit,
+					href: `/flows/edit/${path}`,
+					disabled: !canWrite
+				},
+				{
+					displayName: 'Use as template/Fork',
+					icon: faCodeFork,
+					href: `/flows/add?template=${path}`
+				},
+				{
+					displayName: 'View runs',
+					icon: faList,
+					href: `/runs/${path}`
+				},
+				{
+					displayName: 'Schedule',
+					icon: faCalendarAlt,
+					href: `/schedule/add?path=${path}&isFlow=true`
+				},
+				{
+					displayName: 'Share',
+					icon: faShare,
+					action: () => {
+						shareModal.openDrawer && shareModal.openDrawer(path)
+					},
+					disabled: !canWrite
+				},
+				{
+					displayName: 'Archive',
+					icon: faArchive,
+					action: () => {
+						path ? archiveFlow(path) : null
+					},
+					type: 'delete',
+					disabled: !canWrite
+				}
+			]}
+		/>
+	</svelte:fragment>
+</Row>

package/components/common/table/FlowRow.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type ShareModal from '../../ShareModal.svelte';
+import { type Flow } from '../../../gen';
+declare const __propDef: {
+    props: {
+        flow: import("../../../gen").OpenFlow & import("../../../gen").FlowMetadata & {
+            canWrite: boolean;
+        };
+        marked: string | undefined;
+        starred: boolean;
+        shareModal: ShareModal;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowRowProps = typeof __propDef.props;
+export type FlowRowEvents = typeof __propDef.events;
+export type FlowRowSlots = typeof __propDef.slots;
+export default class FlowRow extends SvelteComponentTyped<FlowRowProps, FlowRowEvents, FlowRowSlots> {
+}
+export {};

package/components/common/table/LanguageBadge.svelte

@@ -0,0 +1,32 @@
+<script>import { Script } from '../../../gen';
+import { classNames } from '../../../utils';
+import Badge from '../badge/Badge.svelte';
+import { LanguageIcon } from '../languageIcons';
+export let language;
+const languageLabel = {
+    [Script.language.PYTHON3]: 'Python',
+    [Script.language.DENO]: 'TypeScript',
+    [Script.language.GO]: 'Go',
+    [Script.language.BASH]: 'Bash'
+}[language];
+const baseClassByLanguage = {
+    [Script.language.PYTHON3]: 'border border-[#ffe082] !bg-white',
+    [Script.language.DENO]: 'border border-blue-200 !bg-white',
+    [Script.language.GO]: 'border border-[#80cbc4] !bg-white',
+    [Script.language.BASH]: 'border border-gray-400 !bg-white'
+}[language];
+const colorByLanguage = {
+    [Script.language.PYTHON3]: 'gray',
+    [Script.language.DENO]: 'gray',
+    [Script.language.GO]: 'gray',
+    [Script.language.BASH]: 'gray'
+}[language];
+</script>
+
+<Badge
+	color={colorByLanguage}
+	baseClass={classNames(baseClassByLanguage, 'flex gap-1 items-center')}
+>
+	<LanguageIcon lang={language} width={12} height={12} />
+	{languageLabel}
+</Badge>

package/components/common/table/LanguageBadge.svelte.d.ts

@@ -0,0 +1,24 @@
+/** @typedef {typeof __propDef.props}  LanguageBadgeProps */
+/** @typedef {typeof __propDef.events}  LanguageBadgeEvents */
+/** @typedef {typeof __propDef.slots}  LanguageBadgeSlots */
+export default class LanguageBadge extends SvelteComponentTyped<{
+    language: Script.language;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type LanguageBadgeProps = typeof __propDef.props;
+export type LanguageBadgeEvents = typeof __propDef.events;
+export type LanguageBadgeSlots = typeof __propDef.slots;
+import { Script } from "../../../gen";
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        language: Script.language;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/common/table/Row.svelte

@@ -0,0 +1,58 @@
+<script>import Star from '../../Star.svelte';
+import { createEventDispatcher } from 'svelte';
+import RowIcon from './RowIcon.svelte';
+export let marked;
+export let starred;
+export let canFavorite = true;
+const dispatch = createEventDispatcher();
+export let kind = 'script';
+export let summary = undefined;
+export let path;
+export let href;
+export let workspaceId;
+const color = {
+    script: 'hover:bg-blue-50 hover:border-blue-200',
+    flow: 'hover:bg-[#f0fdfa] hover:border-[#99f6e4]',
+    app: 'hover:bg-[#fff7ed] hover:border-orange-300'
+}[kind];
+</script>
+
+<a
+	class="hover:bg-gray-50 cursor-pointer w-full flex items-center p-4 gap-4 {color} rounded-md"
+	{href}
+>
+	<RowIcon {kind} />
+
+	<div class="w-full min-w-0 ">
+		<div class="text-gray-900 flex-wrap text-md font-semibold mb-1 truncate">
+			{#if marked}
+				{@html marked}
+			{:else}
+				{!summary || summary.length == 0 ? path : summary}
+			{/if}
+		</div>
+		<div class="text-gray-600 text-xs truncate">
+			{path}
+		</div>
+	</div>
+	<div class="w-96 hidden lg:flex flex-row max-w-xs gap-1 items-start flex-wrap">
+		<slot name="badges" />
+	</div>
+
+	<div class="flex gap-1 items-center justify-end">
+		<slot name="actions" />
+	</div>
+	{#if canFavorite}
+		<div class="text-left text-sm font-semibold text-gray-900">
+			<Star
+				{kind}
+				{path}
+				{starred}
+				workspace_id={workspaceId}
+				on:starred={() => {
+					dispatch('change')
+				}}
+			/>
+		</div>
+	{/if}
+</a>

package/components/common/table/Row.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        marked: string | undefined;
+        starred: boolean;
+        canFavorite?: boolean | undefined;
+        kind?: "flow" | "script" | "app" | undefined;
+        summary?: string | undefined;
+        path: string;
+        href: string;
+        workspaceId: string;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        badges: {};
+        actions: {};
+    };
+};
+export type RowProps = typeof __propDef.props;
+export type RowEvents = typeof __propDef.events;
+export type RowSlots = typeof __propDef.slots;
+export default class Row extends SvelteComponentTyped<RowProps, RowEvents, RowSlots> {
+}
+export {};

package/components/common/table/RowIcon.svelte

@@ -0,0 +1,28 @@
+<script>import { classNames } from '../../../utils';
+import { faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
+import { Code2, LayoutDashboard, Wind } from 'lucide-svelte';
+import Icon from 'svelte-awesome';
+export let kind;
+const color = {
+    script: 'bg-blue-50 border-blue-200',
+    flow: 'bg-[#f0fdfa] border-[#99f6e4]',
+    app: 'bg-[#fff7ed] border-orange-300'
+}[kind];
+const iconColor = {
+    script: '#60A5FA',
+    flow: '#14b8a6',
+    app: '#fb923c'
+}[kind];
+</script>
+
+<div class={classNames('rounded-md p-1 flex justify-center items-center border', color)}>
+	{#if kind === 'flow'}
+		<span class="ml-1 mb-0.5 -mt-0.5">
+			<Icon data={faBarsStaggered} scale={1.1} class="mr-0.5 text-[#14b8a6]" />
+		</span>
+	{:else if kind === 'app'}
+		<LayoutDashboard size={24} color={iconColor} />
+	{:else if kind === 'script'}
+		<Code2 size={24} color={iconColor} />
+	{/if}
+</div>

package/components/common/table/RowIcon.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        kind: 'script' | 'flow' | 'app';
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RowIconProps = typeof __propDef.props;
+export type RowIconEvents = typeof __propDef.events;
+export type RowIconSlots = typeof __propDef.slots;
+export default class RowIcon extends SvelteComponentTyped<RowIconProps, RowIconEvents, RowIconSlots> {
+}
+export {};