windmill-components 1.352.9 → 1.362.0

package/package/components/sidebar/MenuButton.svelte

@@ -1,15 +1,23 @@
 <script>import { twMerge } from 'tailwind-merge';
 import Popover from '../Popover.svelte';
+import { createEventDispatcher } from 'svelte';
 export let label = undefined;
 export let icon = undefined;
 export let isCollapsed;
 export let disabled = false;
 export let lightMode = false;
+export let stopPropagationOnClick = false;
+export let shortcut = "";
+let dispatch = createEventDispatcher();
 </script>
 
 {#if !disabled}
 	<Popover appearTimeout={0} disappearTimeout={0} class="w-full" disablePopup={!isCollapsed}>
 		<button
+			on:click={(e) => {
+				if (stopPropagationOnClick) e.preventDefault()
+				dispatch('click')
+			}}
 			class={twMerge(
 				'group flex items-center px-2 py-2 font-light rounded-md h-8 gap-3 w-full',
 				lightMode
@@ -44,6 +52,9 @@ export let lightMode = false;
 					)}
 				>
 					{label}
+					<span class="pl-2 text-xs dark:text-secondary light:text-secondary-inverse font-semibold">
+						{shortcut}
+					</span>
 				</span>
 			{/if}
 		</button>

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

@@ -7,8 +7,12 @@ declare const __propDef: {
         isCollapsed: boolean;
         disabled?: boolean | undefined;
         lightMode?: boolean | undefined;
+        stopPropagationOnClick?: boolean | undefined;
+        shortcut?: string | undefined;
     };
     events: {
+        click: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/sidebar/changelogs.js

@@ -1,9 +1,44 @@
 const changelogs = [
+    {
+        label: 'OneOf Inputs',
+        href: 'https://www.windmill.dev/changelog/oneof-inputs',
+        date: '2024-06-17'
+    },
+    {
+        label: 'Tracking relative imports to avoid dependency hell',
+        href: 'https://www.windmill.dev/changelog/track-relative-imports',
+        date: '2024-06-10'
+    },
+    {
+        label: 'Windmill Customer Portal',
+        href: 'https://www.windmill.dev/changelog/customer-portal',
+        date: '2024-06-04'
+    },
+    {
+        label: 'Secondary Storage',
+        href: 'https://www.windmill.dev/changelog/secondary-storage',
+        date: '2024-05-31'
+    },
+    {
+        label: 'Allow User Resources in Apps with a toggle',
+        href: 'https://www.windmill.dev/changelog/user-resources-in-apps',
+        date: '2024-05-27'
+    },
+    {
+        label: 'Windmill AI now supports GPT-4o',
+        href: 'https://www.windmill.dev/changelog/windmill-ai-gpt-4o',
+        date: '2024-05-27'
+    },
     {
         label: 'Concurrency Limit Observability',
         href: 'https://www.windmill.dev/changelog/concurrency-limit-observability',
         date: '2024-05-15'
     },
+    {
+        label: 'Full Height Components',
+        href: 'https://www.windmill.dev/changelog/full-height-components',
+        date: '2024-05-15'
+    },
     {
         label: 'PHP Support',
         href: 'https://www.windmill.dev/changelog/php-support',

package/package/components/wizards/AppPicker.svelte

@@ -0,0 +1,68 @@
+<script>import { getContext, onMount } from 'svelte';
+import Select from '../apps/svelte-select/lib/Select.svelte';
+import { SELECT_INPUT_DEFAULT_STYLE } from '../../defaults';
+import DarkModeObserver from '../DarkModeObserver.svelte';
+import { userStore, workspaceStore } from '../../stores';
+import { AppService } from '../../gen';
+import { canWrite } from '../../utils';
+import Alert from '../common/alert/Alert.svelte';
+export let value = '';
+export let selecteValue = value;
+let darkMode = false;
+const { appPath } = getContext('AppViewerContext');
+let apps = [];
+async function loadApps() {
+    apps = (await AppService.listApps({ workspace: $workspaceStore, includeDraftOnly: true })).map((app) => {
+        return {
+            canWrite: canWrite(app.path, app.extra_perms, $userStore) &&
+                app.workspace_id == $workspaceStore &&
+                !$userStore?.operator,
+            ...app
+        };
+    });
+}
+onMount(() => {
+    loadApps();
+    if (selecteValue === '') {
+        selecteValue = appPath;
+        value = appPath;
+    }
+});
+</script>
+
+<DarkModeObserver bind:darkMode />
+
+<div class="flex flex-col gap-2 w-full">
+	<Select
+		class="grow shrink max-w-full"
+		on:change={(e) => {
+			value = e.detail.value
+		}}
+		on:clear={() => {
+			value = ''
+		}}
+		bind:value={selecteValue}
+		items={apps.map((app) => {
+			return {
+				value: app.path,
+				label: app.path === appPath ? `${app.path} (current app)` : app.path
+			}
+		})}
+		placeholder="Pick an app"
+		inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
+		containerStyles={darkMode
+			? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
+			: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
+		portal={false}
+	/>
+	{#if !appPath}
+		<Alert title="Current app not selectable" size="xs" type="warning" collapsible>
+			Current app is not selectable until you have deployed this app at least once.
+		</Alert>
+	{/if}
+	{#if appPath && appPath === value}
+		<div class="text-2xs">
+			The current app is selected. If the path changes, the path needs to be updated manually.
+		</div>
+	{/if}
+</div>

package/package/components/wizards/AppPicker.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: string | undefined;
+        selecteValue?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppPickerProps = typeof __propDef.props;
+export type AppPickerEvents = typeof __propDef.events;
+export type AppPickerSlots = typeof __propDef.slots;
+export default class AppPicker extends SvelteComponent<AppPickerProps, AppPickerEvents, AppPickerSlots> {
+}
+export {};

package/package/components/wizards/NavbarWizard.svelte

@@ -0,0 +1,131 @@
+<script>import { Popup } from '../common';
+import { offset, flip, shift } from 'svelte-floating-ui/dom';
+import Label from '../Label.svelte';
+import { getContext } from 'svelte';
+import Section from '../Section.svelte';
+import IconSelectInput from '../apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte';
+import InputsSpecEditor from '../apps/editor/settingsPanel/InputsSpecEditor.svelte';
+import Alert from '../common/alert/Alert.svelte';
+import OneOfInputSpecsEditor from '../apps/editor/settingsPanel/OneOfInputSpecsEditor.svelte';
+export let value;
+const { selectedComponent } = getContext('AppViewerContext');
+</script>
+
+<Popup
+	floatingConfig={{
+		strategy: 'fixed',
+		placement: 'left-end',
+		middleware: [offset(8), flip(), shift()]
+	}}
+	containerClasses="border rounded-lg shadow-lg bg-surface p-4"
+>
+	<svelte:fragment slot="button">
+		<slot name="trigger" />
+	</svelte:fragment>
+
+	{#if value}
+		<Section label="Navbar item" class="flex flex-col gap-2 w-80 overflow-y-auto max-h-screen">
+			<InputsSpecEditor
+				key={'Label'}
+				bind:componentInput={value.label}
+				id={$selectedComponent?.[0] ?? ''}
+				userInputEnabled={false}
+				shouldCapitalize={true}
+				resourceOnly={false}
+				fieldType={value.label?.['fieldType']}
+				subFieldType={value.label?.['subFieldType']}
+				format={value.label?.['format']}
+				selectOptions={value.label?.['selectOptions']}
+				fileUpload={value.label?.['fileUpload']}
+				placeholder={value.label?.['placeholder']}
+				customTitle={value.label?.['customTitle']}
+				displayType={false}
+			/>
+
+			<OneOfInputSpecsEditor
+				key={'Link'}
+				bind:oneOf={value.path}
+				id={$selectedComponent?.[0] ?? ''}
+				shouldCapitalize={true}
+				resourceOnly={false}
+				inputSpecsConfiguration={value.path?.['configuration']}
+				labels={value.path?.['labels']}
+				tooltip={value.path?.['tooltip']}
+			/>
+
+			<Alert size="xs" title="Link Behavior" collapsible>
+				<ul class="list-disc">
+					<li>
+						If you select an app, there are two cases:
+						<div class="ml-2">
+							<ul class="list-disc">
+								<li>
+									You selected the current app itself: Clicking on the link will highlight the item,
+									and set the app in the output. Note that adding query params or an hash lets you
+									distinguish between different items. Also note that query params can be retrieved
+									from the context: `ctx.query`.
+								</li>
+								<li>
+									You selected another app: Clicking on the link navigates to the selected app
+									without reloading the page. In the editor, it will open in a new tab.
+								</li>
+							</ul>
+						</div>
+					</li>
+					<li>
+						If you select an external link, clicking on the link will navigate to the selected link
+						in a new tab.
+					</li>
+				</ul>
+			</Alert>
+
+			<InputsSpecEditor
+				key={'Disabled'}
+				bind:componentInput={value.disabled}
+				id={$selectedComponent?.[0] ?? ''}
+				userInputEnabled={false}
+				shouldCapitalize={true}
+				resourceOnly={false}
+				fieldType={value.disabled?.['fieldType']}
+				subFieldType={value.disabled?.['subFieldType']}
+				format={value.disabled?.['format']}
+				selectOptions={value.disabled?.['selectOptions']}
+				fileUpload={value.disabled?.['fileUpload']}
+				placeholder={value.disabled?.['placeholder']}
+				customTitle={value.disabled?.['customTitle']}
+				displayType={false}
+			/>
+			<InputsSpecEditor
+				key={'Hidden'}
+				bind:componentInput={value.hidden}
+				id={$selectedComponent?.[0] ?? ''}
+				userInputEnabled={false}
+				shouldCapitalize={true}
+				resourceOnly={false}
+				fieldType={value.hidden?.['fieldType']}
+				subFieldType={value.hidden?.['subFieldType']}
+				format={value.hidden?.['format']}
+				selectOptions={value.hidden?.['selectOptions']}
+				fileUpload={value.hidden?.['fileUpload']}
+				placeholder={value.hidden?.['placeholder']}
+				customTitle={value.hidden?.['customTitle']}
+				displayType={false}
+			/>
+
+			<Label label="Icon" class="w-full">
+				<IconSelectInput
+					bind:value={value.icon}
+					floatingConfig={{
+						strategy: 'fixed',
+						placement: 'left-end',
+						middleware: [offset(8), flip(), shift()]
+					}}
+					shouldUsePortal={false}
+				/>
+			</Label>
+			<Label label="Caption">
+				<input type="text" bind:value={value.caption} />
+			</Label>
+		</Section>
+	{/if}
+</Popup>

package/package/components/wizards/NavbarWizard.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { NavbarItem } from '../apps/editor/component';
+declare const __propDef: {
+    props: {
+        value: NavbarItem;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        trigger: {};
+    };
+};
+export type NavbarWizardProps = typeof __propDef.props;
+export type NavbarWizardEvents = typeof __propDef.events;
+export type NavbarWizardSlots = typeof __propDef.slots;
+export default class NavbarWizard extends SvelteComponent<NavbarWizardProps, NavbarWizardEvents, NavbarWizardSlots> {
+}
+export {};

package/package/defaults.d.ts

@@ -1,5 +1,5 @@
 export declare const SELECT_INPUT_DEFAULT_STYLE: {
     readonly inputStyles: "border-radius: 0;";
     readonly containerStyles: "--height: 34px; --padding: 0 0 0 8px; --font-size: 0.875rem;";
-    readonly containerStylesDark: "--height: 34px; --padding: 0 0 0 8px; --font-size: 0.875rem; --background: #3b4252; --disabled-background: #2a2f3a; --list-background: #3b4252;--item-is-active-bg:#434c5e;--item-hover-bg:#4c566a;";
+    readonly containerStylesDark: "--height: 34px; --padding: 0 0 0 8px; border-color: #4b5563; --font-size: 0.875rem; --disabled-border-color: #3e4c60; --background: #2e3440; --disabled-background: transparent; --list-background: #3b4252;--item-is-active-bg:#434c5e;--item-hover-bg:#4c566a;";
 };

package/package/defaults.js

@@ -1,5 +1,5 @@
 export const SELECT_INPUT_DEFAULT_STYLE = {
     inputStyles: 'border-radius: 0;',
     containerStyles: '--height: 34px; --padding: 0 0 0 8px; --font-size: 0.875rem;',
-    containerStylesDark: '--height: 34px; --padding: 0 0 0 8px; --font-size: 0.875rem; --background: #3b4252; --disabled-background: #2a2f3a; --list-background: #3b4252;--item-is-active-bg:#434c5e;--item-hover-bg:#4c566a;'
+    containerStylesDark: '--height: 34px; --padding: 0 0 0 8px; border-color: #4b5563; --font-size: 0.875rem; --disabled-border-color: #3e4c60; --background: #2e3440; --disabled-background: transparent; --list-background: #3b4252;--item-is-active-bg:#434c5e;--item-hover-bg:#4c566a;'
 };