windmill-components 1.82.0 → 1.82.1

package/components/apps/editor/settingsPanel/StylePanel.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import { type AppComponent } from '../component';
+declare const __propDef: {
+    props: {
+        component: AppComponent | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type StylePanelProps = typeof __propDef.props;
+export type StylePanelEvents = typeof __propDef.events;
+export type StylePanelSlots = typeof __propDef.slots;
+export default class StylePanel extends SvelteComponentTyped<StylePanelProps, StylePanelEvents, StylePanelSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte

@@ -1,19 +1,18 @@
-<script>import ColorPicker, { ChromeVariant } from 'svelte-awesome-color-picker';
-export let componentInput;
+<script>import { createEventDispatcher } from 'svelte';
+import ColorPicker, { ChromeVariant } from 'svelte-awesome-color-picker';
+import { ClearableInput } from '../../../../common';
+export let value = '#fff';
+const dispatch = createEventDispatcher();
 let isOpen = false;
+$: dispatch('change', value);
 </script>
 
-<div class="color-picker-input">
-	<input
-		type="text"
-		readonly
-		value={componentInput.value}
-		on:focus|preventDefault|stopPropagation={() => (isOpen = true)}
-	/>
+<div class="color-picker-input grow">
+	<ClearableInput readonly bind:value on:focus={() => (isOpen = true)} />
 	<ColorPicker
 		bind:isOpen
-		bind:hex={componentInput.value}
-		label={componentInput.value}
+		bind:hex={value}
+		label={value}
 		canChangeMode={false}
 		components={ChromeVariant}
 		toRight
@@ -22,7 +21,7 @@ let isOpen = false;
 </div>
 
 <style global>
-	:global(.color-picker-input) :global(span) > :global(label.svelte-rogbpz) {
+	:global(.color-picker-input) :global(span) > :global(label) {
 		display: none;
 	}
 
@@ -30,6 +29,7 @@ let isOpen = false;
 		box-shadow: 0 10px 40px -5px rgba(0, 0, 0, 0.25) !important;
 		border-style: none !important;
 		border-radius: 0.375rem !important;
+		z-index: 20;
 	}
 
 	:global(.color-picker-input) :global(.slider-wrapper) {

package/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte.d.ts

@@ -1,10 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
-import type { StaticInput } from '../../../inputType';
 declare const __propDef: {
     props: {
-        componentInput: StaticInput<string>;
+        value?: string | undefined;
     };
     events: {
+        change: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte

@@ -74,7 +74,7 @@ $: componentInput && onchange?.();
 			Inconsistent labeled resource object
 		{/if}
 	{:else if fieldType === 'color'}
-		<ColorInput bind:componentInput />
+		<ColorInput bind:value={componentInput.value} />
 	{:else if fieldType === 'object'}
 		{#if format?.startsWith('resource-')}
 			<ResourcePicker

package/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte

@@ -0,0 +1,47 @@
+<script>import { fly } from 'svelte/transition';
+import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
+import { Badge, Button } from '../../../../common';
+import { secondaryMenu, SECONDARY_MENU_ID } from './';
+import { getContext } from 'svelte';
+const { selectedComponent } = getContext('AppViewerContext');
+let width;
+let lastSelected = $selectedComponent;
+$: if (lastSelected !== $selectedComponent) {
+    secondaryMenu.close();
+    lastSelected = $selectedComponent;
+}
+</script>
+
+<div
+	bind:clientWidth={width}
+	class="absolute z-50 inset-0 overflow-hidden"
+	class:pointer-events-none={!$secondaryMenu.isOpen}
+>
+	{#if $secondaryMenu.isOpen && $secondaryMenu.component}
+		<div
+			transition:fly|local={{ duration: 300, x: width, y: 0, opacity: 1 }}
+			id={SECONDARY_MENU_ID}
+			class="flex flex-col w-full h-full bg-white"
+		>
+			<div class="flex justify-between items-center bg-white gap-1 p-3">
+				<Button
+					color="light"
+					size="xs"
+					variant="border"
+					startIcon={{ icon: faChevronLeft }}
+					on:click={secondaryMenu.close}
+				>
+					Back
+				</Button>
+				<Badge color="blue">{$selectedComponent}</Badge>
+			</div>
+			<div class="relative h-full overflow-y-auto px-3 pb-3">
+				{#if typeof $secondaryMenu.component === 'string'}
+					{@html $secondaryMenu.component}
+				{:else}
+					<svelte:component this={$secondaryMenu.component} {...$secondaryMenu.props} />
+				{/if}
+			</div>
+		</div>
+	{/if}
+</div>

package/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SecondaryMenuProps = typeof __propDef.props;
+export type SecondaryMenuEvents = typeof __propDef.events;
+export type SecondaryMenuSlots = typeof __propDef.slots;
+export default class SecondaryMenu extends SvelteComponentTyped<SecondaryMenuProps, SecondaryMenuEvents, SecondaryMenuSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/secondaryMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SecondaryMenu } from './SecondaryMenu.svelte';
+export * from './menuStore';

package/components/apps/editor/settingsPanel/secondaryMenu/index.js

@@ -0,0 +1,2 @@
+export { default as SecondaryMenu } from './SecondaryMenu.svelte';
+export * from './menuStore';

package/components/apps/editor/settingsPanel/secondaryMenu/menuStore.d.ts

@@ -0,0 +1,12 @@
+import type { SvelteComponent } from 'svelte';
+export declare const SECONDARY_MENU_ID: "app-secondary-menu";
+export interface SecondaryMenuStore {
+    isOpen: boolean;
+    component?: typeof SvelteComponent | string;
+    props: Record<string, any>;
+}
+export declare const secondaryMenu: {
+    readonly subscribe: (this: void, run: import("svelte/store").Subscriber<SecondaryMenuStore>, invalidate?: ((value?: SecondaryMenuStore | undefined) => void) | undefined) => import("svelte/store").Unsubscriber;
+    readonly open: (component: SecondaryMenuStore['component'], props?: SecondaryMenuStore['props']) => void;
+    readonly close: () => void;
+};

package/components/apps/editor/settingsPanel/secondaryMenu/menuStore.js

@@ -0,0 +1,10 @@
+import { writable } from 'svelte/store';
+export const SECONDARY_MENU_ID = 'app-secondary-menu';
+const store = writable({ isOpen: false, component: undefined, props: {} });
+export const secondaryMenu = {
+    subscribe: store.subscribe,
+    open: (component, props = {}) => {
+        store.set({ isOpen: true, component, props });
+    },
+    close: () => store.set({ isOpen: false, component: undefined, props: {} })
+};

package/components/apps/types.d.ts

@@ -63,6 +63,7 @@ export type InlineScript = {
         key: string;
     }[];
 };
+export type AppCssItemName = 'viewer' | 'grid' | AppComponent['type'];
 export type App = {
     grid: GridItem[];
     fullscreen: boolean;
@@ -78,7 +79,7 @@ export type App = {
         autoRefresh?: boolean;
         doNotRecomputeOnInputChanged?: boolean;
     }>;
-    css?: Partial<Record<'viewer' | 'grid' | AppComponent['type'], Record<string, ComponentCssProperty>>>;
+    css?: Partial<Record<AppCssItemName, Record<string, ComponentCssProperty>>>;
     subgrids?: Record<string, GridItem[]>;
 };
 export type ConnectingInput = {

package/components/common/button/ButtonPopup.svelte

@@ -7,6 +7,7 @@ export let color = 'blue';
 export let variant = 'contained';
 export let mainClasses = '';
 export let toggleClasses = '';
+export let listClasses = '';
 export let disabled = false;
 export let href = undefined;
 export let target = '_self';
@@ -59,14 +60,16 @@ $: commonProps = {
 {#if ref}
 	<Popup
 		{ref}
+		let:open
+		let:close
 		options={{
 			placement: $$slots.main ? 'bottom-end' : 'bottom',
 			strategy: 'absolute',
 			modifiers: [{ name: 'offset', options: { offset: [0, 0] } }]
 		}}
 	>
-		<ul class="bg-white rounded-t border pt-1 pb-2 max-h-40 overflow-auto">
-			<slot />
+		<ul class="bg-white rounded-t border pt-1 pb-2 max-h-40 overflow-auto {listClasses}">
+			<slot {open} {close} />
 		</ul>
 	</Popup>
 {/if}

package/components/common/button/ButtonPopup.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         variant?: ButtonType.Variant | undefined;
         mainClasses?: string | undefined;
         toggleClasses?: string | undefined;
+        listClasses?: string | undefined;
         disabled?: boolean | undefined;
         href?: string | undefined;
         target?: ButtonType.Target | undefined;
@@ -24,7 +25,10 @@ declare const __propDef: {
     slots: {
         main: {};
         toggle: {};
-        default: {};
+        default: {
+            open: () => void;
+            close: () => void;
+        };
     };
 };
 export type ButtonPopupProps = typeof __propDef.props;

package/components/common/button/ButtonPopupItem.svelte

@@ -8,6 +8,7 @@ export let target = '_self';
 export let iconOnly = false;
 export let startIcon = undefined;
 export let endIcon = undefined;
+export let wrapperClasses = '';
 const props = getContext(ButtonType.ItemContextKey);
 const iconWidthClass = {
     xs: '!w-[12px]',
@@ -40,7 +41,7 @@ $: buttonProps = {
 };
 </script>
 
-<li class="mt-1">
+<li class="mt-1 {wrapperClasses}">
 	<Button {...buttonProps} on:click>
 		<slot />
 	</Button>

package/components/common/button/ButtonPopupItem.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         iconOnly?: boolean | undefined;
         startIcon?: ButtonType.Icon | undefined;
         endIcon?: ButtonType.Icon | undefined;
+        wrapperClasses?: string | undefined;
     };
     events: {
         click: CustomEvent<any>;

package/components/common/clearableInput/ClearableInput.svelte

@@ -0,0 +1,56 @@
+<script>import { createEventDispatcher } from 'svelte';
+import { fade } from 'svelte/transition';
+import { X } from 'lucide-svelte';
+export let value = '';
+export let placeholder = '';
+export let type = 'text';
+export let inputClass = '';
+export let wrapperClass = '';
+export let buttonClass = '';
+const dispatch = createEventDispatcher();
+$: isNumeric = ['number', 'range'].includes(type);
+$: dispatch('change', value);
+function handleInput(e) {
+    value = isNumeric ? +e.target.value : e.target.value;
+}
+function clear() {
+    value = '';
+}
+</script>
+
+<div class="relative grow {wrapperClass}">
+	{#if type === 'textarea'}
+		<textarea
+			{value}
+			{placeholder}
+			rows="1"
+			class="resize-y duration-200 {inputClass}"
+			{...$$restProps}
+			on:input={handleInput}
+			on:focus
+			on:blur
+		/>
+	{:else}
+		<input
+			{type}
+			{value}
+			{placeholder}
+			class="duration-200 {(type === 'number' && value ? '!pr-[26px] ' : '') + inputClass}"
+			{...$$restProps}
+			on:input={handleInput}
+			on:focus
+			on:blur
+		/>
+	{/if}
+	{#if value}
+		<button
+			transition:fade|local={{ duration: 100 }}
+			class="absolute z-10 top-1.5 right-1 rounded-full p-1 bg-white/60 duration-200 hover:bg-gray-200 {buttonClass}"
+			aria-label="Clear"
+			on:click|preventDefault|stopPropagation={clear}
+		>
+			<X size={14} />
+		</button>
+	{/if}
+	<slot />
+</div>

package/components/common/clearableInput/ClearableInput.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value?: any;
+        placeholder?: string | undefined;
+        type?: "number" | "text" | "textarea" | undefined;
+        inputClass?: string | undefined;
+        wrapperClass?: string | undefined;
+        buttonClass?: string | undefined;
+    };
+    events: {
+        focus: FocusEvent;
+        blur: FocusEvent;
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ClearableInputProps = typeof __propDef.props;
+export type ClearableInputEvents = typeof __propDef.events;
+export type ClearableInputSlots = typeof __propDef.slots;
+export default class ClearableInput extends SvelteComponentTyped<ClearableInputProps, ClearableInputEvents, ClearableInputSlots> {
+}
+export {};

package/components/common/index.d.ts

@@ -5,6 +5,7 @@ export { default as Button } from './button/Button.svelte';
 export { default as ButtonPopup } from './button/ButtonPopup.svelte';
 export { default as ButtonPopupItem } from './button/ButtonPopupItem.svelte';
 export { default as UndoRedo } from './button/UndoRedo.svelte';
+export { default as ClearableInput } from './clearableInput/ClearableInput.svelte';
 export { default as Drawer } from './drawer/Drawer.svelte';
 export { default as DrawerContent } from './drawer/DrawerContent.svelte';
 export { default as Kbd } from './kbd/Kbd.svelte';

package/components/common/index.js

@@ -5,6 +5,7 @@ export { default as Button } from './button/Button.svelte';
 export { default as ButtonPopup } from './button/ButtonPopup.svelte';
 export { default as ButtonPopupItem } from './button/ButtonPopupItem.svelte';
 export { default as UndoRedo } from './button/UndoRedo.svelte';
+export { default as ClearableInput } from './clearableInput/ClearableInput.svelte';
 export { default as Drawer } from './drawer/Drawer.svelte';
 export { default as DrawerContent } from './drawer/DrawerContent.svelte';
 export { default as Kbd } from './kbd/Kbd.svelte';

package/components/common/kbd/Kbd.svelte

@@ -1,7 +1,10 @@
+<script>export let kbdClass = '';
+</script>
+
 <span
 	class="{$$props.class} rounded border bg-white/70 px-1.5 !text-xs text-gray-600 shadow-sm font-light transition-all group-hover:border-primary-500 group-hover:text-primary-500"
 >
-	<kbd>
+	<kbd class={kbdClass}>
 		<slot />
 	</kbd>
 </span>

package/components/common/kbd/Kbd.svelte.d.ts

@@ -1,21 +1,8 @@
-/** @typedef {typeof __propDef.props}  KbdProps */
-/** @typedef {typeof __propDef.events}  KbdEvents */
-/** @typedef {typeof __propDef.slots}  KbdSlots */
-export default class Kbd extends SvelteComponentTyped<{
-    [x: string]: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type KbdProps = typeof __propDef.props;
-export type KbdEvents = typeof __propDef.events;
-export type KbdSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        kbdClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -24,4 +11,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export type KbdProps = typeof __propDef.props;
+export type KbdEvents = typeof __propDef.events;
+export type KbdSlots = typeof __propDef.slots;
+export default class Kbd extends SvelteComponentTyped<KbdProps, KbdEvents, KbdSlots> {
+}
 export {};

package/components/common/menu/Menu.svelte

@@ -4,8 +4,12 @@ let current = undefined;
 
 <script>import { classNames } from '../../../utils';
 import { onMount } from 'svelte';
+import { fade } from 'svelte/transition';
 export let noMinW = false;
 export let show = false;
+export let wrapperClasses = '';
+export let popupClasses = '';
+export let transitionDuration = 100;
 let menu;
 export let placement = 'bottom-start';
 function handleOutsideClick(event) {
@@ -40,7 +44,7 @@ const placementsClasses = {
 };
 </script>
 
-<div class="relative" bind:this={menu}>
+<div class="relative {wrapperClasses}" bind:this={menu}>
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<div
 		on:click|stopPropagation={() => {
@@ -56,10 +60,12 @@ const placementsClasses = {
 	</div>
 	{#if show}
 		<div
+			transition:fade|local={{ duration: transitionDuration }}
 			class={classNames(
 				'z-50 absolute mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none',
 				placementsClasses[placement],
-				noMinW ? 'min-w-0' : 'w-60'
+				noMinW ? 'min-w-0' : 'w-60',
+				popupClasses
 			)}
 			role="menu"
 			tabindex="-1"

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

@@ -3,7 +3,10 @@ declare const __propDef: {
     props: {
         noMinW?: boolean | undefined;
         show?: boolean | undefined;
-        placement?: "top-start" | "top-end" | "top-center" | "bottom-start" | "bottom-end" | "bottom-center" | undefined;
+        wrapperClasses?: string | undefined;
+        popupClasses?: string | undefined;
+        transitionDuration?: number | undefined;
+        placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end" | "top-center" | "bottom-center" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/common/modal/AlwaysMountedModal.svelte

@@ -0,0 +1,109 @@
+<script context="module">let onTop;
+const modals = {};
+export function getModal(id = '') {
+    return modals[id];
+}
+</script>
+
+<script>import { onDestroy } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { Badge } from '..';
+import Button from '../button/Button.svelte';
+let topDiv;
+let visible = false;
+let prevOnTop;
+export let title;
+export let style = '';
+export let id = '';
+function onKeyDown(event) {
+    if (onTop == topDiv) {
+        switch (event.key) {
+            case 'Enter':
+                event.stopPropagation();
+                event.preventDefault();
+                break;
+            case 'Escape':
+                event.stopPropagation();
+                event.preventDefault();
+                close();
+                break;
+        }
+    }
+}
+function open() {
+    if (visible) {
+        return;
+    }
+    prevOnTop = onTop;
+    onTop = topDiv;
+    window.addEventListener('keydown', onKeyDown);
+    document.body.style.overflow = 'hidden';
+    visible = true;
+    document.body.appendChild(topDiv);
+}
+function close() {
+    if (!visible) {
+        return;
+    }
+    window.removeEventListener('keydown', onKeyDown);
+    onTop = prevOnTop;
+    if (onTop == null) {
+        document.body.style.overflow = '';
+    }
+    visible = false;
+}
+modals[id] = { open, close };
+onDestroy(() => {
+    delete modals[id];
+    window.removeEventListener('keydown', onKeyDown);
+});
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div id="topModal" class:visible bind:this={topDiv} on:click={() => close()}>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<div class="relative bg-white p-4 rounded-md" on:click|stopPropagation={() => {}}>
+		<div class={twMerge('max-w-screen-lg max-h-screen-80 overflow-auto', $$props.class)} {style}>
+			<div class="flex">
+				<div class="ml-4 text-left flex-1">
+					<h3 class="text-lg font-medium text-gray-900">
+						{title}
+					</h3>
+					<div class="mt-2 text-sm text-gray-500">
+						<slot />
+					</div>
+				</div>
+			</div>
+			<div class="flex items-center space-x-2 flex-row-reverse space-x-reverse mt-4">
+				<Button
+					on:click={() => {
+						close()
+					}}
+					color="light"
+					size="sm"
+				>
+					<span class="gap-2">Cancel <Badge color="dark-gray">Escape</Badge></span>
+				</Button>
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	#topModal {
+		visibility: hidden;
+		z-index: 9999;
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: #4448;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.visible {
+		visibility: visible !important;
+	}</style>

package/components/common/modal/AlwaysMountedModal.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+export declare function getModal(id?: string): any;
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        title: string;
+        style?: string | undefined;
+        id?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AlwaysMountedModalProps = typeof __propDef.props;
+export type AlwaysMountedModalEvents = typeof __propDef.events;
+export type AlwaysMountedModalSlots = typeof __propDef.slots;
+export default class AlwaysMountedModal extends SvelteComponentTyped<AlwaysMountedModalProps, AlwaysMountedModalEvents, AlwaysMountedModalSlots> {
+}
+export {};