windmill-components 1.13.25 → 1.22.0

package/components/ShareModal.svelte

@@ -1,19 +1,14 @@
-<script>"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.openModal = exports.path = exports.kind = void 0;
-const Modal_svelte_1 = __importDefault(require("./Modal.svelte"));
-const TableCustom_svelte_1 = __importDefault(require("./TableCustom.svelte"));
-const GranularAclService_1 = require("$lib/gen/services/GranularAclService");
-const utils_1 = require("$lib/utils");
-const gen_1 = require("$lib/gen");
-const svelte_1 = require("svelte");
-const simple_svelte_autocomplete_1 = __importDefault(require("simple-svelte-autocomplete"));
-const stores_1 = require("$lib/stores");
-const dispatch = (0, svelte_1.createEventDispatcher)();
-exports.path = '';
+<script>import Modal from './Modal.svelte';
+import TableCustom from './TableCustom.svelte';
+import { GranularAclService } from '../gen/services/GranularAclService';
+import { sendUserToast } from '../utils';
+import { GroupService, UserService } from '../gen';
+import { createEventDispatcher } from 'svelte';
+import AutoComplete from 'simple-svelte-autocomplete';
+import { workspaceStore } from '../stores';
+const dispatch = createEventDispatcher();
+export let kind;
+export let path = '';
 let ownerKind = 'user';
 let owner = '';
 let newOwner = '';
@@ -23,45 +18,44 @@ let groups = [];
 let usernames = [];
 let modal;
 $: newOwner = [ownerKind === 'group' ? 'g' : 'u', owner].join('/');
-async function openModal(newPath) {
+export async function openModal(newPath) {
     if (newPath) {
-        exports.path = newPath;
+        path = newPath;
     }
     loadAcls();
     loadGroups();
     loadUsernames();
     modal.openModal();
 }
-exports.openModal = openModal;
 async function loadAcls() {
-    acls = Object.entries(await GranularAclService_1.GranularAclService.getGranularAcls({ workspace: $workspaceStore, path: exports.path, kind: exports.kind }));
+    acls = Object.entries(await GranularAclService.getGranularAcls({ workspace: $workspaceStore, path, kind }));
 }
 async function loadGroups() {
-    groups = await gen_1.GroupService.listGroupNames({ workspace: $workspaceStore });
+    groups = await GroupService.listGroupNames({ workspace: $workspaceStore });
 }
 async function loadUsernames() {
-    usernames = await gen_1.UserService.listUsernames({ workspace: $workspaceStore });
+    usernames = await UserService.listUsernames({ workspace: $workspaceStore });
 }
 async function deleteAcl(owner) {
     try {
-        await GranularAclService_1.GranularAclService.removeGranularAcls({
+        await GranularAclService.removeGranularAcls({
             workspace: $workspaceStore,
-            path: exports.path,
-            kind: exports.kind,
+            path,
+            kind,
             requestBody: { owner }
         });
         loadAcls();
         dispatch('change');
     }
     catch (err) {
-        (0, utils_1.sendUserToast)(err.toString(), true);
+        sendUserToast(err.toString(), true);
     }
 }
 async function addAcl(owner, write) {
-    await GranularAclService_1.GranularAclService.addGranularAcls({
+    await GranularAclService.addGranularAcls({
         workspace: $workspaceStore,
-        path: exports.path,
-        kind: exports.kind,
+        path,
+        kind,
         requestBody: { owner, write }
     });
     loadAcls();

package/components/SharedBadge.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.canWrite = exports.extraPerms = void 0;
-const stores_1 = require("$lib/stores");
-const Badge_svelte_1 = __importDefault(require("./Badge.svelte"));
-exports.extraPerms = {};
+<script>import { userStore } from '../stores';
+import Badge from './Badge.svelte';
+export let extraPerms = {};
+export let canWrite;
 let kind = undefined;
 let reason = '';
 $: {
     let username = $userStore?.username ?? '';
     let pgroups = $userStore?.pgroups ?? [];
     let pusername = `u/${username}`;
-    let extraPermsKeys = Object.keys(exports.extraPerms);
+    let extraPermsKeys = Object.keys(extraPerms);
     if (pusername in extraPermsKeys) {
-        if (exports.extraPerms[pusername]) {
+        if (extraPerms[pusername]) {
             kind = 'write';
         }
         else {
@@ -24,13 +19,13 @@ $: {
         reason = 'This item was shared to you personally';
     }
     else {
-        let writeGroup = pgroups.find((x) => extraPermsKeys.includes(x) && exports.extraPerms[x]);
-        if (pgroups.find((x) => x in extraPermsKeys && exports.extraPerms[x])) {
+        let writeGroup = pgroups.find((x) => extraPermsKeys.includes(x) && extraPerms[x]);
+        if (pgroups.find((x) => x in extraPermsKeys && extraPerms[x])) {
             kind = 'write';
             reason = `This item was write shared to the group ${writeGroup} which you are a member of`;
         }
         else {
-            let readGroup = pgroups.find((x) => extraPermsKeys.includes(x) && exports.extraPerms[x]);
+            let readGroup = pgroups.find((x) => extraPermsKeys.includes(x) && extraPerms[x]);
             if (pgroups.find((x) => extraPermsKeys.includes(x))) {
                 kind = 'read';
                 reason = `This item was read-only shared to the group ${readGroup} which you are a member of`;
@@ -40,10 +35,10 @@ $: {
             }
         }
     }
-    if (kind == 'read' && exports.canWrite) {
+    if (kind == 'read' && canWrite) {
         kind = undefined;
     }
-    if (kind == undefined && !exports.canWrite) {
+    if (kind == undefined && !canWrite) {
         kind = 'read';
         reason = '';
     }

package/components/StringTypeNarrowing.svelte

@@ -1,13 +1,10 @@
-<script>"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.format = exports.enum_ = exports.pattern = void 0;
-const RadioButton_svelte_1 = __importDefault(require("./RadioButton.svelte"));
-const ResourceTypePicker_svelte_1 = __importDefault(require("./ResourceTypePicker.svelte"));
+<script>import RadioButton from './RadioButton.svelte';
+import ResourceTypePicker from './ResourceTypePicker.svelte';
+export let pattern;
+export let enum_;
+export let format;
 let kind = 'none';
-let patternStr = exports.pattern ?? '';
+let patternStr = pattern ?? '';
 let resource;
 const FORMATS = [
     'email',
@@ -21,9 +18,9 @@ const FORMATS = [
     // 'ipv6',
     // 'jsonpointer'
 ];
-$: exports.format =
+$: format =
     kind == 'resource' ? (resource != undefined ? `resource-${resource}` : 'resource') : undefined;
-$: exports.pattern = patternStr == '' ? undefined : patternStr;
+$: pattern = patternStr == '' ? undefined : patternStr;
 </script>
 
 <RadioButton

package/components/Switch.svelte.d.ts

@@ -3,8 +3,8 @@
 /** @typedef {typeof __propDef.slots}  SwitchSlots */
 export default class Switch extends SvelteComponentTyped<{
     [x: string]: any;
-    checked?: boolean | undefined;
     label?: string | undefined;
+    checked?: boolean | undefined;
     horizontal?: boolean | undefined;
     textFormat?: string | undefined;
 }, {
@@ -18,8 +18,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        checked?: boolean | undefined;
         label?: string | undefined;
+        checked?: boolean | undefined;
         horizontal?: boolean | undefined;
         textFormat?: string | undefined;
     };

package/components/TableCustom.svelte

@@ -1,11 +1,8 @@
-<script>"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.showNext = exports.currentPage = exports.paginated = void 0;
-const svelte_1 = require("svelte");
-exports.paginated = false;
-exports.currentPage = 1;
-exports.showNext = true;
-const dispatch = (0, svelte_1.createEventDispatcher)();
+<script>import { createEventDispatcher } from 'svelte';
+export let paginated = false;
+export let currentPage = 1;
+export let showNext = true;
+const dispatch = createEventDispatcher();
 </script>
 
 <!-- A custom table 

package/components/TableSimple.svelte

@@ -1,11 +1,12 @@
-<script>"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.twTextSize = exports.paginated = exports.defaultText = exports.keys = exports.data = exports.headers = void 0;
-const svelte_1 = require("svelte");
-exports.defaultText = 'No data to display';
-exports.paginated = false;
-exports.twTextSize = 'text-sm md:text-base';
-const dispatch = (0, svelte_1.createEventDispatcher)();
+<script>import { createEventDispatcher } from 'svelte';
+// A table suitable if you can pass data as a list of row objects
+export let headers;
+export let data; // Object containing the data
+export let keys;
+export let defaultText = 'No data to display';
+export let paginated = false;
+export let twTextSize = 'text-sm md:text-base';
+const dispatch = createEventDispatcher();
 </script>
 
 <div class="mt-8 flex flex-col {$$props.class}">

package/components/Tabs.svelte

@@ -1,11 +1,9 @@
-<script>"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.tab = exports.dflt = exports.tabs = void 0;
-const svelte_1 = require("svelte");
-exports.dflt = 0;
-exports.tab = exports.tabs[exports.dflt][0];
-const dispatch = (0, svelte_1.createEventDispatcher)();
-$: dispatch('update', exports.tab);
+<script>import { createEventDispatcher } from 'svelte';
+export let tabs;
+export let dflt = 0;
+export let tab = tabs[dflt][0];
+const dispatch = createEventDispatcher();
+$: dispatch('update', tab);
 </script>
 
 <div class="flex flex-col sm:flex-row text-base">

package/components/Toggle.svelte

@@ -0,0 +1,34 @@
+<script>import { createEventDispatcher } from 'svelte';
+export let value;
+export let options;
+let checked = options.right.value === value;
+const id = Date.now().toString(36);
+const dispatch = createEventDispatcher();
+</script>
+
+<span>
+	<label for={id} class="inline-flex items-center cursor-pointer mt-2">
+		{#if Boolean(options.left.label)}
+			<span class="mr-2 text-sm font-medium text-gray-900">{options.left.label}</span>
+		{/if}
+		<div class="relative">
+			<input
+				type="checkbox"
+				value={false}
+				{id}
+				class="sr-only peer"
+				bind:checked
+				on:change={() => {
+					value = checked ? options.right.value : options.left.value
+					dispatch('change', value)
+				}}
+			/>
+			<div
+				class="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"
+			/>
+		</div>
+		{#if Boolean(options.right.label)}
+			<span class="ml-2 text-sm font-medium text-gray-900">{options.right.label}</span>
+		{/if}
+	</label>
+</span>

package/components/Toggle.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        value: any;
+        options: {
+            left: {
+                label?: string | undefined;
+                value: any;
+            };
+            right: {
+                label?: string | undefined;
+                value: any;
+            };
+        };
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ToggleProps = typeof __propDef.props;
+export declare type ToggleEvents = typeof __propDef.events;
+export declare type ToggleSlots = typeof __propDef.slots;
+export default class Toggle extends SvelteComponentTyped<ToggleProps, ToggleEvents, ToggleSlots> {
+}
+export {};

package/components/Tooltip.svelte

@@ -1,99 +1,66 @@
-<script>"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.direction = exports.position = void 0;
-const svelte_awesome_1 = __importDefault(require("svelte-awesome"));
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-const transition_1 = require("svelte/transition");
-exports.position = 'above';
-exports.direction = 'default';
-let viewTooltip = false;
-let mouseOnMessage = false;
-let mouseOver = false;
-// This function makes sure the tooltip does not disappear when moving the mouse to the tooltip
-// message, so that users can click links there for example
-function hideTooltip() {
-    setTimeout(function () {
-        if (!mouseOnMessage && !mouseOver) {
-            viewTooltip = false;
-        }
-        else {
-            hideTooltip();
+<script>import Icon from 'svelte-awesome';
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+import { createPopperActions } from 'svelte-popperjs';
+import { fade } from 'svelte/transition';
+const [popperRef, popperContent] = createPopperActions({
+    placement: 'auto'
+});
+const betterPreventOverflow = (options) => ({
+    name: 'preventOverflow',
+    options,
+    effect: ({ state }) => {
+        const { padding = 0 } = options;
+        state.elements.popper.style.maxWidth = `calc(100vw - ${padding * 2}px)`;
+    }
+});
+const extraOpts = {
+    modifiers: [
+        betterPreventOverflow({ padding: 50 }),
+        { name: 'offset', options: { offset: [8, 8] } },
+        {
+            name: 'arrow',
+            options: {
+                padding: 10 // 5px from the edges of the popper
+            }
         }
-    }, 300);
+    ]
+};
+let showTooltip = false;
+let timeout;
+function open() {
+    clearTimeout(timeout);
+    showTooltip = true;
+}
+function close() {
+    timeout = setTimeout(() => (showTooltip = false), 200);
 }
 </script>
 
-<div class="inline-block has-tooltip {$$props.class}">
-	{#if viewTooltip}
-		<span
-			transition:fade
-			class="tooltip rounded shadow-lg p-1 leading-4 {position === 'above' ? '-mt-8' : 'mt-6'} 
-			{viewTooltip ? 'tooltip-visible' : 'tooltip'} {direction === 'left' ? 'right-0' : ''}
-			text-2xs text-gray-700"
-			on:mouseover={() => {
-				mouseOnMessage = true
-			}}
-			on:focus={() => {}}
-			on:mouseout={() => {
-				mouseOnMessage = false
-			}}
-			on:blur={() => {}}
-			><slot />
-		</span>
-	{/if}
-	<Icon class="text-gray-500 font-thin inline-block align-middle" data={faInfoCircle} scale={0.6} />
-	<!-- Hovering on this (invisible) area triggers the apparition of the tooltip. Needed because the icon is too small-->
+<button use:popperRef on:mouseenter={open} on:mouseleave={close}>
+	<Icon class="text-gray-500 font-thin inline-block align-middle" data={faInfoCircle} scale={0.8} />
+</button>
+{#if showTooltip}
 	<div
-		class="relative w-4 h-5 -mt-5 -ml-1"
-		on:mouseover={() => {
-			viewTooltip = true
-			mouseOver = true
-		}}
-		on:focus={() => {
-			viewTooltip = true
-		}}
-		on:mouseout={() => {
-			hideTooltip()
-			mouseOver = false
-		}}
-		on:blur={() => {}}
-	/>
-</div>
+		transition:fade
+		id="tooltip"
+		use:popperContent={extraOpts}
+		on:mouseenter={open}
+		on:mouseleave={close}
+	>
+		<slot />
+		<div id="arrow" data-popper-arrow />
+	</div>
+{/if}
 
 <style>
-	.tooltip {
-
-    visibility: hidden;
-
-    position: absolute;
-
-    transition-property: opacity;
-
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-
-    transition-duration: 100ms
-}
-
-	.tooltip-visible {
-
-    visibility: visible;
-
-    position: absolute;
-
+	#tooltip {
     z-index: 50;
-
+    white-space: normal;
+    border-radius: 0.75rem;
     --tw-bg-opacity: 1;
-
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-
-    max-width: 24rem;
-
-    transition-property: opacity;
-
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-
-    transition-duration: 150ms
+    background-color: rgb(39 39 42 / var(--tw-bg-opacity));
+    padding: 1rem;
+    font-weight: 400;
+    --tw-text-opacity: 1;
+    color: rgb(209 213 219 / var(--tw-text-opacity))
 }</style>

package/components/Tooltip.svelte.d.ts

@@ -1,10 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        position?: ("above" | "below") | undefined;
-        direction?: ("default" | "left") | undefined;
-    };
+    props: {};
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/VariableEditor.svelte

@@ -1,19 +1,13 @@
-<script>"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.editVariable = exports.initNew = void 0;
-const Password_svelte_1 = __importDefault(require("./Password.svelte"));
-const utils_1 = require("$lib/utils");
-const gen_1 = require("$lib/gen");
-const AutosizedTextarea_svelte_1 = __importDefault(require("./AutosizedTextarea.svelte"));
-const Path_svelte_1 = __importDefault(require("./Path.svelte"));
-const Modal_svelte_1 = __importDefault(require("./Modal.svelte"));
-const svelte_1 = require("svelte");
-const stores_1 = require("$lib/stores");
-const Required_svelte_1 = __importDefault(require("./Required.svelte"));
-const dispatch = (0, svelte_1.createEventDispatcher)();
+<script>import Password from './Password.svelte';
+import { sendUserToast } from '../utils';
+import { VariableService } from '../gen';
+import AutosizedTextarea from './AutosizedTextarea.svelte';
+import Path from './Path.svelte';
+import Modal from './Modal.svelte';
+import { createEventDispatcher } from 'svelte';
+import { workspaceStore } from '../stores';
+import Required from './Required.svelte';
+const dispatch = createEventDispatcher();
 let path = '';
 let variable = {
     value: '',
@@ -24,19 +18,21 @@ let valid = true;
 let modal;
 let edit = false;
 let initialPath;
-function initNew() {
+let pathError = '';
+export function initNew() {
     variable = {
         value: '',
         is_secret: true,
         description: ''
     };
     edit = false;
+    initialPath = '';
+    path = '';
     modal.openModal();
 }
-exports.initNew = initNew;
-async function editVariable(path) {
+export async function editVariable(path) {
     edit = true;
-    const getV = await gen_1.VariableService.getVariable({
+    const getV = await VariableService.getVariable({
         workspace: $workspaceStore ?? '',
         path,
         decryptSecret: false
@@ -49,11 +45,10 @@ async function editVariable(path) {
     initialPath = path;
     modal.openModal();
 }
-exports.editVariable = editVariable;
 const MAX_VARIABLE_LENGTH = 3000;
 $: valid = variable.value.length < MAX_VARIABLE_LENGTH;
 async function createVariable() {
-    await gen_1.VariableService.createVariable({
+    await VariableService.createVariable({
         workspace: $workspaceStore,
         requestBody: {
             path,
@@ -62,18 +57,18 @@ async function createVariable() {
             description: variable.description
         }
     });
-    (0, utils_1.sendUserToast)(`Successfully created variable ${path}`);
+    sendUserToast(`Successfully created variable ${path}`);
     dispatch('create');
     modal.closeModal();
 }
 async function updateVariable() {
     try {
-        const getV = await gen_1.VariableService.getVariable({
+        const getV = await VariableService.getVariable({
             workspace: $workspaceStore ?? '',
             path: initialPath,
             decryptSecret: false
         });
-        await gen_1.VariableService.updateVariable({
+        await VariableService.updateVariable({
             workspace: $workspaceStore,
             path: initialPath,
             requestBody: {
@@ -83,12 +78,12 @@ async function updateVariable() {
                 description: getV.description != variable.description ? variable.description : undefined
             }
         });
-        (0, utils_1.sendUserToast)(`Successfully updated variable at ${initialPath}`);
+        sendUserToast(`Successfully updated variable at ${initialPath}`);
         dispatch('create');
         modal.closeModal();
     }
     catch (err) {
-        (0, utils_1.sendUserToast)(`Could not update variable: ${err.body}`, true);
+        sendUserToast(`Could not update variable: ${err.body}`, true);
     }
 }
 </script>
@@ -113,7 +108,13 @@ async function updateVariable() {
 		<div class="flex flex-col gap-2 ">
 			<div>
 				<div class="text-gray-700 mb-0 pb-0">path</div>
-				<Path bind:path {initialPath} namePlaceholder="my/variable" />
+				<Path
+					bind:error={pathError}
+					bind:path
+					{initialPath}
+					namePlaceholder="my/variable"
+					kind="variable"
+				/>
 			</div>
 
 			<label class="block pb-6">
@@ -151,7 +152,7 @@ async function updateVariable() {
 				createVariable()
 			}
 		}}
-		disabled={!valid}
+		disabled={!valid || pathError != ''}
 	>
 		{#if edit}
 			Save

package/components/flows/CopyFirstStepSchema.svelte

@@ -0,0 +1,10 @@
+<script>import { copyFirstStepSchema, isCopyFirstStepSchemaDisabled } from './flowStore';
+</script>
+
+<button
+	class="default-secondary-button-v2"
+	disabled={$isCopyFirstStepSchemaDisabled}
+	on:click={copyFirstStepSchema}
+>
+	Copy from step 1's schema
+</button>

package/components/flows/CopyFirstStepSchema.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CopyFirstStepSchemaProps = typeof __propDef.props;
+export declare type CopyFirstStepSchemaEvents = typeof __propDef.events;
+export declare type CopyFirstStepSchemaSlots = typeof __propDef.slots;
+export default class CopyFirstStepSchema extends SvelteComponentTyped<CopyFirstStepSchemaProps, CopyFirstStepSchemaEvents, CopyFirstStepSchemaSlots> {
+}
+export {};