windmill-components 1.352.5 → 1.352.7

package/package/assets/app.css

@@ -28,33 +28,6 @@
 		list-style-type: '- ';
 		padding-left: 3rem;
 	}
-	.splitpanes--vertical > .splitpanes__pane {
-		transition: none !important;
-	}
-
-	.splitpanes--horizontal > .splitpanes__pane {
-		transition: none !important;
-	}
-
-	.monaco-workbench > .notifications-toasts.visible {
-		display: none !important;
-	}
-
-	.monaco-editor .suggest-widget {
-		z-index: 10001 !important;
-	}
-
-	.nowrap pre code.hljs {
-		whitespace: normal !important;
-	}
-
-	.z5000 {
-		z-index: 5000 !important;
-	}
-
-	.foo {
-		color: red !important;
-	}
 	.autocomplete-list-item-create {
 		@apply !text-primary-inverse !bg-surface-inverse;
 	}
@@ -74,25 +47,23 @@
 	.autocomplete-list {
 		@apply !bg-surface;
 	}
-	pre code.hljs {
-		overflow: visible !important;
-	}
 
-	svelte-virtual-list-row {
-		overflow: visible !important;
+	.ol-overlaycontainer-stopevent {
+		@apply flex flex-col justify-start items-end;
 	}
-
-	svelte-virtual-list-contents > * + * {
-		border-top-width: 1px !important;
-		border-bottom-width: 0px !important;
+	.ol-control button {
+		@apply w-7 h-7 center-center bg-surface border text-secondary 
+		rounded mt-1 mr-1 shadow duration-200 hover:bg-surface-hover focus:bg-surface-hover;
 	}
 
-	.monaco-editor textarea:focus {
-		box-shadow: none !important;
+	/* Components */
+	.component-wrapper {
+		@apply rounded-component border overflow-hidden border-gray-300 dark:border-gray-600;
 	}
 
-	.Template-editor span.mtk20 {
-		color: black !important;
+	.app-editor-input {
+		@apply rounded-component border border-gray-300 dark:border-gray-500 focus:border-gray-300 focus:dark:border-gray-500 focus:!ring-1 focus:!ring-blue-300;
+		@apply placeholder:text-gray-400 dark:placeholder:text-gray-600;
 	}
 }
 
@@ -117,6 +88,47 @@
 	}
 }
 
+.splitpanes--vertical > .splitpanes__pane {
+	transition: none !important;
+}
+
+.splitpanes--horizontal > .splitpanes__pane {
+	transition: none !important;
+}
+
+.monaco-workbench > .notifications-toasts.visible {
+	display: none !important;
+}
+
+.monaco-editor .suggest-widget {
+	z-index: 10001 !important;
+}
+
+.z5000 {
+	z-index: 5000 !important;
+}
+
+.foo {
+	color: red !important;
+}
+
+svelte-virtual-list-row {
+	overflow: visible !important;
+}
+
+svelte-virtual-list-contents > * + * {
+	border-top-width: 1px !important;
+	border-bottom-width: 0px !important;
+}
+
+.monaco-editor textarea:focus {
+	box-shadow: none !important;
+}
+
+.Template-editor span.mtk20 {
+	color: black !important;
+}
+
 .grid-cell-centered {
 	display: flex;
 	align-items: center;
@@ -129,21 +141,3 @@
 .grid-cell-centered .selected-item {
 	margin-top: -4px;
 }
-
-.ol-overlaycontainer-stopevent {
-	@apply flex flex-col justify-start items-end;
-}
-.ol-control button {
-	@apply w-7 h-7 center-center bg-surface border text-secondary 
-	rounded mt-1 mr-1 shadow duration-200 hover:bg-surface-hover focus:bg-surface-hover;
-}
-
-/* Components */
-.component-wrapper {
-	@apply rounded-component border overflow-hidden border-gray-300 dark:border-gray-600;
-}
-
-.app-editor-input {
-	@apply rounded-component border border-gray-300 dark:border-gray-500 focus:border-gray-300 focus:dark:border-gray-500 focus:!ring-1 focus:!ring-blue-300;
-	@apply placeholder:text-gray-400 dark:placeholder:text-gray-600;
-}

package/package/components/DisplayResult.svelte

@@ -19,6 +19,7 @@ import Popover from './Popover.svelte';
 import DownloadCsv from './table/DownloadCsv.svelte';
 import { convertJsonToCsv } from './table/tableUtils';
 import Tooltip from './Tooltip.svelte';
+import HighlightTheme from './HighlightTheme.svelte';
 export let result;
 export let requireHtmlApproval = false;
 export let filename = undefined;
@@ -260,6 +261,7 @@ let globalForceJson = false;
 let seeS3PreviewFileFromList = '';
 </script>
 
+<HighlightTheme />
 {#if is_render_all}
 	<div class="flex flex-col w-full gap-6">
 		{#if !noControls}

package/package/components/EditableSchemaForm.svelte

@@ -231,48 +231,50 @@ let editor = undefined;
 									<div class="flex flex-row gap-2">
 										{argName}
 										{#if !uiOnly}
-											<Popup
-												floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
-												containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
-												let:close
-											>
-												<svelte:fragment slot="button">
-													<Button
-														color="light"
-														size="xs2"
-														nonCaptureEvent
-														startIcon={{ icon: Pen }}
-														iconOnly
-													/>
-												</svelte:fragment>
-												<Label label="Name">
-													<div class="flex flex-col gap-2">
-														<input
-															type="text"
-															class="w-full !bg-surface"
-															value={argName}
-															id={argName + i}
-															on:keydown={(event) => {
-																if (event.key === 'Enter') {
-																	renameProperty(argName, argName + i)
-																	close(null)
-																}
-															}}
-														/>
+											<div on:click|stopPropagation|preventDefault>
+												<Popup
+													floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
+													containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
+													let:close
+												>
+													<svelte:fragment slot="button">
 														<Button
-															variant="border"
 															color="light"
-															size="xs"
-															on:click={() => {
-																renameProperty(argName, argName + i)
-																close(null)
-															}}
-														>
-															Rename
-														</Button>
-													</div>
-												</Label>
-											</Popup>
+															size="xs2"
+															nonCaptureEvent
+															startIcon={{ icon: Pen }}
+															iconOnly
+														/>
+													</svelte:fragment>
+													<Label label="Name">
+														<div class="flex flex-col gap-2">
+															<input
+																type="text"
+																class="w-full !bg-surface"
+																value={argName}
+																id={argName + i}
+																on:keydown={(event) => {
+																	if (event.key === 'Enter') {
+																		renameProperty(argName, argName + i)
+																		close(null)
+																	}
+																}}
+															/>
+															<Button
+																variant="border"
+																color="light"
+																size="xs"
+																on:click={() => {
+																	renameProperty(argName, argName + i)
+																	close(null)
+																}}
+															>
+																Rename
+															</Button>
+														</div>
+													</Label>
+												</Popup>
+											</div>
 										{/if}
 									</div>
 

package/package/components/EditableSchemaForm.svelte.d.ts

@@ -23,6 +23,7 @@ declare const __propDef: {
         deleteField?: ((key: string) => void) | undefined;
     };
     events: {
+        click: MouseEvent;
         change: CustomEvent<any>;
         delete: CustomEvent<any>;
     } & {

package/package/components/EditorBar.svelte

@@ -4,7 +4,6 @@
 <script>import { ResourceService, VariableService } from '../gen';
 import { workspaceStore } from '../stores';
 import ItemPicker from './ItemPicker.svelte';
-import ResourceEditor from './ResourceEditor.svelte';
 import VariableEditor from './VariableEditor.svelte';
 import Button from './common/button/Button.svelte';
 import HighlightCode from './HighlightCode.svelte';
@@ -27,6 +26,7 @@ import ScriptGen from './copilot/ScriptGen.svelte';
 import { getResetCode } from '../script_helpers';
 import CodeCompletionStatus from './copilot/CodeCompletionStatus.svelte';
 import Popover from './Popover.svelte';
+import ResourceEditorDrawer from './ResourceEditorDrawer.svelte';
 export let lang;
 export let editor;
 export let websocketAlive;
@@ -470,7 +470,7 @@ $res = json_decode(curl_exec($ch));`)
 			await ResourceService.listResourceType({ workspace: $workspaceStore ?? 'NO_W' })}
 	/>
 {/if}
-<ResourceEditor bind:this={resourceEditor} on:refresh={resourcePicker.openDrawer} />
+<ResourceEditorDrawer bind:this={resourceEditor} on:refresh={resourcePicker.openDrawer} />
 <VariableEditor bind:this={variableEditor} on:create={variablePicker.openDrawer} />
 
 <div class="flex justify-between items-center overflow-y-auto w-full p-0.5">

package/package/components/FlowGraphViewerStep.svelte

@@ -13,11 +13,14 @@ import { hubBaseUrlStore } from '../stores';
 import { twMerge } from 'tailwind-merge';
 import FlowModuleScript from './flows/content/FlowModuleScript.svelte';
 import { Copy } from 'lucide-svelte';
+import HighlightTheme from './HighlightTheme.svelte';
 export let schema = undefined;
 export let stepDetail = undefined;
 let codeViewer;
 </script>
 
+<HighlightTheme />
+
 <Drawer bind:this={codeViewer} size="900px">
 	<DrawerContent title={'Expanded Code'} on:close={codeViewer.closeDrawer}>
 		{#if stepDetail && typeof stepDetail != 'string'}

package/package/components/FlowViewer.svelte

@@ -8,6 +8,7 @@ import FlowGraphViewer from './FlowGraphViewer.svelte';
 import { Clipboard } from 'lucide-svelte';
 import YAML from 'yaml';
 import { yaml } from 'svelte-highlight/languages';
+import HighlightTheme from './HighlightTheme.svelte';
 export let flow;
 export let initialOpen = undefined;
 export let noSide = false;
@@ -30,6 +31,8 @@ function toAny(x) {
 }
 </script>
 
+<HighlightTheme />
+
 <Tabs bind:selected={tab}>
 	{#if !noGraph}
 		<Tab value="ui">Graph</Tab>

package/package/components/HighlightCode.svelte

@@ -11,6 +11,7 @@ import php from 'svelte-highlight/languages/php';
 import { Button } from './common';
 import { copyToClipboard } from '../utils';
 import { ClipboardCopy } from 'lucide-svelte';
+import HighlightTheme from './HighlightTheme.svelte';
 export let code = '';
 export let language;
 export let lines = false;
@@ -51,6 +52,8 @@ function getLang(lang) {
 $: lang = getLang(language);
 </script>
 
+<HighlightTheme />
+
 <div class="relative overflow-x-auto">
 	<Button
 		wrapperClasses="absolute top-2 right-2 z-20"

package/package/components/HighlightTheme.svelte

@@ -0,0 +1,318 @@
+<script>"use strict";
+</script>
+
+<style global>
+	:global(pre) :global(code.hljs) {
+		display: block;
+		overflow-x: auto;
+		padding: 1em;
+		overflow: visible !important;
+	}
+
+	:global(code.hljs) {
+		padding: 3px 5px;
+	}
+
+	:global(.dark) :global(.hljs) {
+		background: #2e3440;
+	}
+	:global(.dark) :global(.hljs),
+	:global(.dark) :global(.hljs-subst) {
+		color: #d8dee9;
+	}
+	:global(.dark) :global(.hljs-selector-tag) {
+		color: #81a1c1;
+	}
+	:global(.dark) :global(.hljs-selector-id) {
+		color: #8fbcbb;
+		font-weight: bold;
+	}
+	:global(.dark) :global(.hljs-selector-class) {
+		color: #8fbcbb;
+	}
+	:global(.dark) :global(.hljs-selector-attr) {
+		color: #8fbcbb;
+	}
+	:global(.dark) :global(.hljs-property) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.hljs-selector-pseudo) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.hljs-addition) {
+		background-color: rgba(163, 190, 140, 0.5);
+	}
+	:global(.dark) :global(.hljs-deletion) {
+		background-color: rgba(191, 97, 106, 0.5);
+	}
+	:global(.dark) :global(.hljs-built_in),
+	:global(.dark) :global(.hljs-type) {
+		color: #8fbcbb;
+	}
+	:global(.dark) :global(.hljs-class) {
+		color: #8fbcbb;
+	}
+	:global(.dark) :global(.hljs-function) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.hljs-title.hljs-function),
+	:global(.dark) :global(.hljs-function) > :global(.hljs-title) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.hljs-keyword),
+	:global(.dark) :global(.hljs-literal),
+	:global(.dark) :global(.hljs-symbol) {
+		color: #81a1c1;
+	}
+	:global(.dark) :global(.hljs-number) {
+		color: #b48ead;
+	}
+	:global(.dark) :global(.hljs-regexp) {
+		color: #ebcb8b;
+	}
+	:global(.dark) :global(.hljs-string) {
+		color: #a3be8c;
+	}
+	:global(.dark) :global(.hljs-title) {
+		color: #8fbcbb;
+	}
+	:global(.dark) :global(.hljs-params) {
+		color: #d8dee9;
+	}
+	:global(.dark) :global(.hljs-bullet) {
+		color: #81a1c1;
+	}
+	:global(.dark) :global(.hljs-code) {
+		color: #8fbcbb;
+	}
+	:global(.dark) :global(.hljs-emphasis) {
+		font-style: italic;
+	}
+	:global(.dark) :global(.hljs-formula) {
+		color: #8fbcbb;
+	}
+	:global(.dark) :global(.hljs-strong) {
+		font-weight: bold;
+	}
+	:global(.dark) :global(.hljs-link:hover) {
+		-webkit-text-decoration: underline;
+		text-decoration: underline;
+	}
+	:global(.dark) :global(.hljs-quote) {
+		color: #4c566a;
+	}
+	:global(.dark) :global(.hljs-comment) {
+		color: #4c566a;
+	}
+	:global(.dark) :global(.hljs-doctag) {
+		color: #8fbcbb;
+	}
+	:global(.dark) :global(.hljs-meta),
+	:global(.dark) :global(.hljs-meta) :global(.hljs-keyword) {
+		color: #5e81ac;
+	}
+	:global(.dark) :global(.hljs-meta) :global(.hljs-string) {
+		color: #a3be8c;
+	}
+	:global(.dark) :global(.hljs-attr) {
+		color: #8fbcbb;
+	}
+	:global(.dark) :global(.hljs-attribute) {
+		color: #d8dee9;
+	}
+	:global(.dark) :global(.hljs-name) {
+		color: #81a1c1;
+	}
+	:global(.dark) :global(.hljs-section) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.hljs-tag) {
+		color: #81a1c1;
+	}
+	:global(.dark) :global(.hljs-variable) {
+		color: #d8dee9;
+	}
+	:global(.dark) :global(.hljs-template-variable) {
+		color: #d8dee9;
+	}
+	:global(.dark) :global(.hljs-template-tag) {
+		color: #5e81ac;
+	}
+	:global(.dark) :global(.language-abnf) :global(.hljs-attribute) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.language-abnf) :global(.hljs-symbol) {
+		color: #ebcb8b;
+	}
+	:global(.dark) :global(.language-apache) :global(.hljs-attribute) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.language-apache) :global(.hljs-section) {
+		color: #81a1c1;
+	}
+	:global(.dark) :global(.language-arduino) :global(.hljs-built_in) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.language-aspectj) :global(.hljs-meta) {
+		color: #d08770;
+	}
+	:global(.dark) :global(.language-aspectj) > :global(.hljs-title) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.language-bnf) :global(.hljs-attribute) {
+		color: #8fbcbb;
+	}
+	:global(.dark) :global(.language-clojure) :global(.hljs-name) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.language-clojure) :global(.hljs-symbol) {
+		color: #ebcb8b;
+	}
+	:global(.dark) :global(.language-coq) :global(.hljs-built_in) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.language-cpp) :global(.hljs-meta) :global(.hljs-string) {
+		color: #8fbcbb;
+	}
+	:global(.dark) :global(.language-css) :global(.hljs-built_in) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.language-css) :global(.hljs-keyword) {
+		color: #d08770;
+	}
+	:global(.dark) :global(.language-diff) :global(.hljs-meta) {
+		color: #8fbcbb;
+	}
+	:global(.dark) :global(.language-ebnf) :global(.hljs-attribute) {
+		color: #8fbcbb;
+	}
+	:global(.dark) :global(.language-glsl) :global(.hljs-built_in) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.language-groovy) :global(.hljs-meta:not(:first-child)) {
+		color: #d08770;
+	}
+	:global(.dark) :global(.language-haxe) :global(.hljs-meta) {
+		color: #d08770;
+	}
+	:global(.dark) :global(.language-java) :global(.hljs-meta) {
+		color: #d08770;
+	}
+	:global(.dark) :global(.language-ldif) :global(.hljs-attribute) {
+		color: #8fbcbb;
+	}
+	:global(.dark) :global(.language-lisp) :global(.hljs-name) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.language-lua) :global(.hljs-built_in) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.language-moonscript) :global(.hljs-built_in) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.language-nginx) :global(.hljs-attribute) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.language-nginx) :global(.hljs-section) {
+		color: #5e81ac;
+	}
+	:global(.dark) :global(.language-pf) :global(.hljs-built_in) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.language-processing) :global(.hljs-built_in) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.language-scss) :global(.hljs-keyword) {
+		color: #81a1c1;
+	}
+	:global(.dark) :global(.language-stylus) :global(.hljs-keyword) {
+		color: #81a1c1;
+	}
+	:global(.dark) :global(.language-swift) :global(.hljs-meta) {
+		color: #d08770;
+	}
+	:global(.dark) :global(.language-vim) :global(.hljs-built_in) {
+		color: #88c0d0;
+		font-style: italic;
+	}
+	:global(.dark) :global(.language-yaml) :global(.hljs-meta) {
+		color: #d08770;
+	}
+
+	:global(.hljs) {
+		color: #24292e;
+		background: #ffffff;
+	}
+	:global(.hljs-doctag),
+	:global(.hljs-keyword),
+	:global(.hljs-meta) :global(.hljs-keyword),
+	:global(.hljs-template-tag),
+	:global(.hljs-template-variable),
+	:global(.hljs-type),
+	:global(.hljs-variable.language_) {
+		color: #d73a49;
+	}
+	:global(.hljs-title),
+	:global(.hljs-title.class_),
+	:global(.hljs-title.class_.inherited__),
+	:global(.hljs-title.function_) {
+		color: #6f42c1;
+	}
+	:global(.hljs-attr),
+	:global(.hljs-attribute),
+	:global(.hljs-literal),
+	:global(.hljs-meta),
+	:global(.hljs-number),
+	:global(.hljs-operator),
+	:global(.hljs-variable),
+	:global(.hljs-selector-attr),
+	:global(.hljs-selector-class),
+	:global(.hljs-selector-id) {
+		color: #005cc5;
+	}
+	:global(.hljs-regexp),
+	:global(.hljs-string),
+	:global(.hljs-meta) :global(.hljs-string) {
+		color: #032f62;
+	}
+	:global(.hljs-built_in),
+	:global(.hljs-symbol) {
+		color: #e36209;
+	}
+	:global(.hljs-comment),
+	:global(.hljs-code),
+	:global(.hljs-formula) {
+		color: #6a737d;
+	}
+	:global(.hljs-name),
+	:global(.hljs-quote),
+	:global(.hljs-selector-tag),
+	:global(.hljs-selector-pseudo) {
+		color: #22863a;
+	}
+	:global(.hljs-subst) {
+		color: #24292e;
+	}
+	:global(.hljs-section) {
+		color: #005cc5;
+		font-weight: bold;
+	}
+	:global(.hljs-bullet) {
+		color: #735c0f;
+	}
+	:global(.hljs-emphasis) {
+		color: #24292e;
+		font-style: italic;
+	}
+	:global(.hljs-strong) {
+		color: #24292e;
+		font-weight: bold;
+	}
+	:global(.hljs-addition) {
+		color: #22863a;
+		background-color: #f0fff4;
+	}
+	:global(.hljs-deletion) {
+		color: #b31d28;
+		background-color: #ffeef0;
+	}</style>

package/package/components/HighlightTheme.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type HighlightThemeProps = typeof __propDef.props;
+export type HighlightThemeEvents = typeof __propDef.events;
+export type HighlightThemeSlots = typeof __propDef.slots;
+export default class HighlightTheme extends SvelteComponent<HighlightThemeProps, HighlightThemeEvents, HighlightThemeSlots> {
+}
+export {};

package/package/components/JobArgs.svelte

@@ -8,6 +8,7 @@ import DataTable from './table/DataTable.svelte';
 import Cell from './table/Cell.svelte';
 import Head from './table/Head.svelte';
 import Row from './table/Row.svelte';
+import HighlightTheme from './HighlightTheme.svelte';
 export let args;
 export let argLabel = undefined;
 let jsonViewer;
@@ -85,6 +86,8 @@ ${Object.entries(args)
 	</DataTable>
 </div>
 
+<HighlightTheme />
+
 <Drawer bind:this={jsonViewer} size="900px">
 	<DrawerContent title="Expanded Args" on:close={jsonViewer.closeDrawer}>
 		<svelte:fragment slot="actions">