windmill-components 1.13.25 → 1.22.0

package/components/Badge.svelte

@@ -1,13 +1,7 @@
-<script>"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.tooltip = exports.twTextColor = exports.twBgColor = void 0;
-const Tooltip_svelte_1 = __importDefault(require("./Tooltip.svelte"));
-exports.twBgColor = 'bg-blue-200';
-exports.twTextColor = 'text-gray-700';
-exports.tooltip = undefined;
+<script>import Tooltip from './Tooltip.svelte';
+export let twBgColor = 'bg-blue-200';
+export let twTextColor = 'text-gray-700';
+export let tooltip = undefined;
 </script>
 
 <span class="{twBgColor} {twTextColor} text-2xs rounded px-1 whitespace-nowrap">

package/components/Button.svelte

@@ -1,14 +1,9 @@
-<script>"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.disabled = exports.category = void 0;
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-const svelte_1 = require("svelte");
-const svelte_awesome_1 = __importDefault(require("svelte-awesome"));
-exports.disabled = false;
-const dispatch = (0, svelte_1.createEventDispatcher)();
+<script>import { faArchive, faEdit, faList, faPlay, faShare, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher } from 'svelte';
+import Icon from 'svelte-awesome';
+export let category;
+export let disabled = false;
+const dispatch = createEventDispatcher();
 </script>
 
 <button
@@ -54,32 +49,41 @@ const dispatch = (0, svelte_1.createEventDispatcher)();
 </button>
 
 <style>
-	.delete, .archive {
+	.delete, 
+	.archive {
     background-color: transparent
 }
-.delete:hover, .archive:hover {
+.delete:hover, 
+	.archive:hover {
     --tw-bg-opacity: 1;
     background-color: rgb(220 38 38 / var(--tw-bg-opacity))
 }
-	.delete, .archive {
+	.delete, 
+	.archive {
     font-weight: 400;
     --tw-text-opacity: 1;
     color: rgb(220 38 38 / var(--tw-text-opacity))
 }
-	.delete:hover, .archive:hover {
+	.delete:hover, 
+	.archive:hover {
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity))
 }
-	.delete, .archive {
+	.delete, 
+	.archive {
     border-radius: 0.25rem;
     --tw-border-opacity: 1;
     border-color: rgb(220 38 38 / var(--tw-border-opacity))
 }
-	.delete:hover, .archive:hover {
+	.delete:hover, 
+	.archive:hover {
     border-color: transparent
 }
 
-	.edit:hover, .play:hover, .list:hover, .share:hover {
+	.edit:hover, 
+	.play:hover, 
+	.list:hover, 
+	.share:hover {
     --tw-bg-opacity: 1;
     background-color: rgb(59 130 246 / var(--tw-bg-opacity));
     --tw-text-opacity: 1;

package/components/ButtonAndDropdown.svelte

@@ -1,15 +1,9 @@
-<script>"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.dropdownItems = void 0;
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-const svelte_1 = require("svelte");
-const svelte_awesome_1 = __importDefault(require("svelte-awesome"));
-const Dropdown_svelte_1 = __importDefault(require("./Dropdown.svelte"));
-exports.dropdownItems = [];
-const dispatch = (0, svelte_1.createEventDispatcher)();
+<script>import { faSortDown } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher } from 'svelte';
+import Icon from 'svelte-awesome';
+import Dropdown from './Dropdown.svelte';
+export let dropdownItems = [];
+const dispatch = createEventDispatcher();
 </script>
 
 <div class="bg-blue-500 rounded-sm {$$props.class} inline-block py-0 my-0 ">

package/components/CenteredModal.svelte

@@ -0,0 +1,30 @@
+<script>import { SettingsService } from '../gen';
+export let subtitle = undefined;
+export let title = 'Welcome to Windmill (beta)';
+let version = '';
+SettingsService.backendVersion().then((x) => {
+    version = x;
+});
+</script>
+
+<div class="flex justify-center min-h-screen bg-gray-50 pt-10">
+	<div class="w-10/12 md:w-7/12 lg:w-6/12 xl:4/12 m-auto">
+		<h1 class="justify-center text-center font-medium pb-2 text-gray-700">
+			{title}
+		</h1>
+		{#if subtitle}
+			<p class="justify-center text-center font-medium pb-2 text-gray-700 text-xs">
+				{subtitle}
+			</p>
+		{/if}
+		<div class="border rounded-md py-12 px-16 shadow-md bg-white">
+			<slot />
+		</div>
+
+		<!-- empty row to make the form a little bit above vertical centering-->
+		<div class="py-12" />
+	</div>
+	<div class="absolute top-0 right-0 text-2xs text-gray-500 italic px-3 py-1">
+		windmill.dev backend v. <span class="font-mono">{version}</span>
+	</div>
+</div>

package/components/CenteredModal.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        subtitle?: string | undefined;
+        title?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type CenteredModalProps = typeof __propDef.props;
+export declare type CenteredModalEvents = typeof __propDef.events;
+export declare type CenteredModalSlots = typeof __propDef.slots;
+export default class CenteredModal extends SvelteComponentTyped<CenteredModalProps, CenteredModalEvents, CenteredModalSlots> {
+}
+export {};

package/components/ChevronButton.svelte

@@ -1,12 +1,7 @@
-<script>"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.viewOptions = exports.text = void 0;
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-const svelte_awesome_1 = __importDefault(require("svelte-awesome"));
-exports.viewOptions = false;
+<script>import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import Icon from 'svelte-awesome';
+export let text;
+export let viewOptions = false;
 </script>
 
 <button

package/components/DisplayResult.svelte

@@ -1,14 +1,9 @@
-<script>"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.result = void 0;
-const svelte_highlight_1 = require("svelte-highlight");
-const github_1 = __importDefault(require("svelte-highlight/styles/github"));
-const languages_1 = require("svelte-highlight/languages");
-const TableCustom_svelte_1 = __importDefault(require("./TableCustom.svelte"));
-let resultKind = inferResultKind(exports.result);
+<script>import { Highlight } from 'svelte-highlight';
+import github from 'svelte-highlight/styles/github';
+import { json } from 'svelte-highlight/languages';
+import TableCustom from './TableCustom.svelte';
+export let result;
+let resultKind = inferResultKind(result);
 function isArray(obj) {
     return Object.prototype.toString.call(obj) === '[object Array]';
 }
@@ -55,52 +50,58 @@ function inferResultKind(result) {
 <svelte:head>
 	{@html github}
 </svelte:head>
-{#if Object.keys(result).length > 0}<div>
-		The result keys are: <b>{Object.keys(result).join(', ')}</b>
-	</div>
-{/if}
-{#if resultKind == 'table-col'}
-	<div class="grid grid-flow-col-dense border border-gray-200 rounded-md ">
-		{#each Object.keys(result) as col}
-			<div class="flex flex-col  min-w-full">
-				<div class="px-12 text-left uppercase border-b bg-gray-50 overflow-hidden rounded-t-md ">
-					{col}
-				</div>
-				{#each result[col] as item}
-					<div class="px-12 text-left">{item}</div>
-				{/each}
-			</div>
-		{/each}
-	</div>
-{:else if resultKind == 'table-row'}<div
-		class="grid grid-flow-col-dense border border-gray-200 rounded-md "
-	>
-		<TableCustom>
-			<tbody slot="body">
-				{#each asListOfList(Object.values(result)[0]) as row}
-					<tr>
-						{#each row as v}
-							<td>{v ?? ''}</td>
+{#if result}
+	{#if Object.keys(result).length > 0}<div>
+			The result keys are: <b>{Object.keys(result).join(', ')}</b>
+		</div>
+	{/if}
+	{#if resultKind == 'table-col'}
+		<div class="grid grid-flow-col-dense border border-gray-200 rounded-md ">
+			{#each Object.keys(result) as col}
+				<div class="flex flex-col  min-w-full">
+					<div class="px-12 text-left uppercase border-b bg-gray-50 overflow-hidden rounded-t-md ">
+						{col}
+					</div>
+					{#if Array.isArray(result[col])}
+						{#each result[col] as item}
+							<div class="px-12 text-left">
+								{typeof item === 'string' ? item : JSON.stringify(item)}
+							</div>
 						{/each}
-					</tr>
-				{/each}
-			</tbody>
-		</TableCustom>
-	</div>
-{:else if resultKind == 'png'}
-	<div class="h-full">
-		Result is an image: <img
-			alt="png rendered"
-			class="w-auto h-full"
-			src="data:image/png;base64,{result.png}"
-		/>
-	</div>
-{:else if resultKind == 'file'}
-	<div>
-		Result is a file: <a
-			download="windmill.file"
-			href="data:application/octet-stream;base64,{result.file}">Download</a
+					{/if}
+				</div>
+			{/each}
+		</div>
+	{:else if resultKind == 'table-row'}<div
+			class="grid grid-flow-col-dense border border-gray-200 rounded-md "
 		>
-	</div>
-{:else}<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
+			<TableCustom>
+				<tbody slot="body">
+					{#each asListOfList(Object.values(result)[0]) as row}
+						<tr>
+							{#each row as v}
+								<td>{v ?? ''}</td>
+							{/each}
+						</tr>
+					{/each}
+				</tbody>
+			</TableCustom>
+		</div>
+	{:else if resultKind == 'png'}
+		<div class="h-full">
+			Result is an image: <img
+				alt="png rendered"
+				class="w-auto h-full"
+				src="data:image/png;base64,{result.png}"
+			/>
+		</div>
+	{:else if resultKind == 'file'}
+		<div>
+			Result is a file: <a
+				download="windmill.file"
+				href="data:application/octet-stream;base64,{result.file}">Download</a
+			>
+		</div>
+	{:else}<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
+	{/if}
 {/if}

package/components/Dropdown.svelte

@@ -1,21 +1,16 @@
-<script>"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.relative = exports.name = exports.dropdownItems = void 0;
-const utils_1 = require("$lib/utils");
-const svelte_1 = require("svelte");
-const svelte_awesome_1 = __importDefault(require("svelte-awesome"));
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
+<script>import { clickOutside } from '../utils';
+import { createEventDispatcher } from 'svelte';
+import Icon from 'svelte-awesome';
+import { faEllipsisH } from '@fortawesome/free-solid-svg-icons';
 let open = false;
-exports.name = undefined;
+export let dropdownItems;
+export let name = undefined;
 // The dropdown is positioned versus its first relatively positioned partent
 // By default, the dropdown is positioned relative to its button
 // 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
-exports.relative = true;
-const dispatch = (0, svelte_1.createEventDispatcher)();
+export let relative = true;
+const dispatch = createEventDispatcher();
 function openMenu() {
     open = true;
 }