windmill-components 1.472.1 → 1.472.2

package/package/components/apps/editor/componentsPanel/QuickStyleProperty.svelte

@@ -0,0 +1,143 @@
+<script>import { createEventDispatcher, getContext } from 'svelte';
+import { Button, ClearableInput, Menu } from '../../../common';
+import Popover from '../../../Popover.svelte';
+import ColorInput from '../settingsPanel/inputEditor/ColorInput.svelte';
+import { StylePropertyType, StylePropertyUnits, STYLE_STORE_KEY } from './quickStyleProperties';
+export let prop;
+export let value;
+export let inline = false;
+const styleStore = getContext(STYLE_STORE_KEY);
+const dispatch = createEventDispatcher();
+const key = prop.key;
+const type = prop.value?.['type'];
+let unit = StylePropertyUnits[0];
+let internalValue;
+function getInteralValue(value, propValue) {
+    if (!value) {
+        return '';
+    }
+    if (propValue.type === StylePropertyType.number) {
+        return value;
+    }
+    if (propValue.type === StylePropertyType.text) {
+        return +value.replace(unit, '');
+    }
+    return '';
+}
+$: internalValue = getInteralValue(value, prop.value);
+$: dispatch('change', value);
+function updateValue(next) {
+    value = next ? next + unit : '';
+}
+function updateUnit(next) {
+    value = value?.replace(unit, next) || '';
+    unit = next;
+}
+</script>
+
+<div class={inline && type !== StylePropertyType.color ? '' : 'w-full'}>
+	{#if prop.value['title']}
+		<div class="font-medium text-xs text-tertiary">
+			{prop.value['title']}
+		</div>
+	{/if}
+	<div class="flex gap-1">
+		{#if type === StylePropertyType.color}
+			<ColorInput bind:value />
+			{#each $styleStore.topColors as color}
+				<Popover placement="bottom" notClickable disappearTimeout={0} class="flex">
+					<Button
+						color="light"
+						size="xs"
+						variant="border"
+						btnClasses="!p-0 !w-[34px] !h-[34px]"
+						aria-label="Set {key} to {color}"
+						style={`background-color: ${color};`}
+						on:click={() => (value = color)}
+					/>
+					<svelte:fragment slot="text">{color}</svelte:fragment>
+				</Popover>
+			{/each}
+		{:else if type === StylePropertyType.number}
+			<ClearableInput
+				type="number"
+				inputClass={inline ? '!w-[90px]' : ''}
+				bind:value
+				step={prop.value?.['step'] || 1}
+				min={prop.value?.['min']}
+				max={prop.value?.['max']}
+			/>
+		{:else if type === StylePropertyType.unit}
+			<ClearableInput
+				wrapperClass="flex items-center {inline ? '!grow-0' : ''}"
+				inputClass="!border-r-0 !rounded-r-none {inline ? '!w-[90px]' : ''}"
+				buttonClass="!right-9"
+				type="number"
+				value={internalValue}
+				on:change={({ detail }) => updateValue(detail)}
+			>
+				<Menu
+					let:close
+					noMinW
+					wrapperClasses="h-full bg-surface rounded-r-md border-y border-r pr-0.5"
+					popupClasses="!mt-0"
+				>
+					<button
+						slot="trigger"
+						type="button"
+						class="font-normal text-xs px-1 py-1.5 w-8 rounded mt-0.5 duration-200 hover:bg-gray-200/90"
+					>
+						{unit}
+					</button>
+					<ul class="bg-surface rounded border py-1 overflow-auto">
+						{#each StylePropertyUnits as u}
+							<li class="w-full">
+								<Button
+									type="button"
+									color="light"
+									size="xs"
+									variant="contained"
+									btnClasses="!justify-start !rounded-none !w-full !px-3 !py-1.5"
+									on:click={() => {
+										updateUnit(u)
+										close()
+									}}
+								>
+									{u}
+								</Button>
+							</li>
+						{/each}
+					</ul>
+				</Menu>
+			</ClearableInput>
+		{:else if type === StylePropertyType.text}
+			{#each prop.value?.['options'] || [] as option}
+				<Popover placement="bottom" notClickable disappearTimeout={0}>
+					<Button
+						color={value === option.text ? 'dark' : 'light'}
+						size="xs"
+						variant={value === option.text ? 'contained' : 'border'}
+						btnClasses="!p-1 !min-w-[34px] !h-[34px]"
+						aria-label="Set {key} to {option.text}"
+						on:click={() => {
+							if (value === option.text) {
+								value = ''
+							} else {
+								value = option.text
+							}
+						}}
+					>
+						{#if typeof option.icon === 'string'}
+							{option.icon}
+						{:else}
+							<svelte:component this={option.icon} size={18} />
+						{/if}
+					</Button>
+					<svelte:fragment slot="text">{option.text}</svelte:fragment>
+				</Popover>
+			{:else}
+				<ClearableInput inputClass="min-w-[32px]" bind:value />
+			{/each}
+		{/if}
+	</div>
+</div>

package/package/components/apps/editor/componentsPanel/QuickStyleProperty.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import { type StyleStoreValue } from './quickStyleProperties';
+declare const __propDef: {
+    props: {
+        prop: StyleStoreValue['style'][number]['prop'];
+        value: string | undefined;
+        inline?: boolean | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type QuickStylePropertyProps = typeof __propDef.props;
+export type QuickStylePropertyEvents = typeof __propDef.events;
+export type QuickStylePropertySlots = typeof __propDef.slots;
+export default class QuickStyleProperty extends SvelteComponent<QuickStylePropertyProps, QuickStylePropertyEvents, QuickStylePropertySlots> {
+}
+export {};

package/package/components/apps/editor/componentsPanel/ThemeCodePreview.svelte

@@ -0,0 +1,28 @@
+<script>import { resolveTheme } from './themeUtils';
+import { workspaceStore } from '../../../../stores';
+import { onMount } from 'svelte';
+import SimpleEditor from '../../../SimpleEditor.svelte';
+export let theme = undefined;
+let code = undefined;
+let cssEditor = undefined;
+onMount(async () => {
+    code = await resolveTheme(theme, $workspaceStore);
+    cssEditor?.setCode(code);
+});
+</script>
+
+<div class="relative h-full">
+	<div class="absolute z-[100] left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%]">
+		<slot />
+	</div>
+	<div class="absolute top-0 left-0 right-0 bottom-0 bg-gray-100 bg-opacity-50 z-50" />
+	<SimpleEditor
+		class="h-full"
+		lang="css"
+		{code}
+		fixedOverflowWidgets={false}
+		small
+		automaticLayout
+		bind:this={cssEditor}
+	/>
+</div>

package/package/components/apps/editor/componentsPanel/ThemeCodePreview.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { AppTheme } from '../../types';
+declare const __propDef: {
+    props: {
+        theme?: AppTheme | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ThemeCodePreviewProps = typeof __propDef.props;
+export type ThemeCodePreviewEvents = typeof __propDef.events;
+export type ThemeCodePreviewSlots = typeof __propDef.slots;
+export default class ThemeCodePreview extends SvelteComponent<ThemeCodePreviewProps, ThemeCodePreviewEvents, ThemeCodePreviewSlots> {
+}
+export {};

package/package/components/apps/editor/componentsPanel/ThemeDrawer.svelte

@@ -0,0 +1,24 @@
+<script>import { Drawer, DrawerContent } from '../../../common';
+import { Highlight } from 'svelte-highlight';
+import css from 'svelte-highlight/languages/css';
+import { resolveTheme } from './themeUtils';
+import { workspaceStore } from '../../../../stores';
+import HighlightTheme from '../../../HighlightTheme.svelte';
+export let theme;
+let code = undefined;
+let codeDrawer;
+export async function openDrawer() {
+    codeDrawer.openDrawer();
+    code = await resolveTheme(theme, $workspaceStore);
+}
+</script>
+
+<HighlightTheme />
+
+<Drawer bind:this={codeDrawer}>
+	<DrawerContent title="Theme viewer" on:close={codeDrawer.closeDrawer}>
+		<div class="p-2 border rounded-sm">
+			<Highlight code={code ?? ''} language={css} />
+		</div>
+	</DrawerContent>
+</Drawer>

package/package/components/apps/editor/componentsPanel/ThemeDrawer.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { AppTheme } from '../../types';
+declare const __propDef: {
+    props: {
+        theme: AppTheme;
+        openDrawer?: (() => Promise<void>) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ThemeDrawerProps = typeof __propDef.props;
+export type ThemeDrawerEvents = typeof __propDef.events;
+export type ThemeDrawerSlots = typeof __propDef.slots;
+export default class ThemeDrawer extends SvelteComponent<ThemeDrawerProps, ThemeDrawerEvents, ThemeDrawerSlots> {
+    get openDrawer(): () => Promise<void>;
+}
+export {};

package/package/components/apps/editor/componentsPanel/ThemeList.svelte

@@ -0,0 +1,137 @@
+<script>import { listThemes, createTheme } from './themeUtils';
+import { enterpriseLicense, workspaceStore } from '../../../../stores';
+import { getContext, onMount } from 'svelte';
+import Button from '../../../common/button/Button.svelte';
+import DataTable from '../../../table/DataTable.svelte';
+import Head from '../../../table/Head.svelte';
+import Cell from '../../../table/Cell.svelte';
+import { EyeOff } from 'lucide-svelte';
+import { sendUserToast } from '../../../../toast';
+import { ResourceService } from '../../../../gen';
+import { Alert } from '../../../common';
+import ThemeRow from './ThemeRow.svelte';
+import { onDestroy } from 'svelte';
+import Skeleton from '../../../common/skeleton/Skeleton.svelte';
+const { previewTheme, app } = getContext('AppViewerContext');
+let cssString = $app?.theme?.type === 'inlined' ? $app.theme.css : undefined;
+$: type = $app?.theme?.type;
+let themes = [];
+let loading = false;
+async function getThemes() {
+    loading = true;
+    themes = await listThemes($workspaceStore);
+    loading = false;
+}
+async function addTheme(nameField) {
+    const themes = await ResourceService.listResourceNames({
+        workspace: $workspaceStore,
+        name: 'app_theme'
+    });
+    const theme = {
+        path: 'f/app_themes/theme_' + themes.length,
+        value: {
+            value: cssString ?? '',
+            name: nameField
+        }
+    };
+    const message = await createTheme($workspaceStore, theme);
+    getThemes();
+    nameField = '';
+    sendUserToast('Theme created:' + message);
+    $app.theme = {
+        type: 'path',
+        path: theme.path
+    };
+}
+let nameField = '';
+let previewThemePath = undefined;
+onMount(() => {
+    getThemes();
+});
+onDestroy(() => {
+    previewTheme.set(undefined);
+    previewThemePath = undefined;
+});
+</script>
+
+<div class="p-2 flex flex-col items-start w-auto gap-2 relative">
+	{#if $enterpriseLicense === undefined}
+		<div class="absolute top-0 left-0 w-full h-full bg-gray-50 opacity-50 z-10 bottom-0" />
+		<Alert
+			type="warning"
+			title="Themes are available in the enterprise edition."
+			class="w-full z-50"
+			size="xs"
+		>
+			Upgrade to the enterprise edition to use themes.
+		</Alert>
+	{/if}
+	<div class="w-full flex flex-row gap-2 items-center">
+		<input
+			disabled={type != 'inlined'}
+			bind:value={nameField}
+			placeholder={type == 'inlined'
+				? 'Theme name'
+				: 'Fork a theme and edit it to create a new one'}
+		/>
+		<Button
+			disabled={type != 'inlined' || nameField == ''}
+			on:click={() => addTheme(nameField)}
+			color="dark"
+			size="xs">Create theme</Button
+		>
+	</div>
+
+	{#if loading}
+		<div class="flex flex-col w-full pt-12">
+			{#each new Array(6) as _}
+				<Skeleton layout={[[2], 0.5]} />
+			{/each}
+		</div>
+	{:else if Array.isArray(themes) && themes.length > 0}
+		<div class="flex flex-row justify-end items-center w-full h-10">
+			{#if $previewTheme != undefined}
+				<Button
+					color="dark"
+					variant="border"
+					size="xs"
+					on:click={() => {
+						previewTheme.set(undefined)
+						previewThemePath = undefined
+					}}
+					startIcon={{ icon: EyeOff }}
+				>
+					Clear preview
+				</Button>
+			{/if}
+		</div>
+		<div class="w-full">
+			<DataTable size="xs">
+				<Head>
+					<tr>
+						<Cell first head>Path</Cell>
+						<Cell last head />
+					</tr>
+				</Head>
+				<tbody class="divide-y">
+					{#if themes && themes.length > 0}
+						{#each themes as row}
+							{#key row}
+								<ThemeRow
+									{row}
+									bind:previewThemePath
+									on:reloadThemes={() => {
+										getThemes()
+									}}
+									on:setCodeTab
+								/>
+							{/key}
+						{/each}
+					{:else}
+						<tr>Loading...</tr>
+					{/if}
+				</tbody>
+			</DataTable>
+		</div>
+	{/if}
+</div>

package/package/components/apps/editor/componentsPanel/ThemeList.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        setCodeTab: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ThemeListProps = typeof __propDef.props;
+export type ThemeListEvents = typeof __propDef.events;
+export type ThemeListSlots = typeof __propDef.slots;
+export default class ThemeList extends SvelteComponent<ThemeListProps, ThemeListEvents, ThemeListSlots> {
+}
+export {};

package/package/components/apps/editor/componentsPanel/ThemeNameEditor.svelte

@@ -0,0 +1,49 @@
+<script>import { updateTheme } from './themeUtils';
+import { workspaceStore } from '../../../../stores';
+import Button from '../../../common/button/Button.svelte';
+import Popover from '../../../meltComponents/Popover.svelte';
+import { Pen } from 'lucide-svelte';
+import { createEventDispatcher } from 'svelte';
+import { sendUserToast } from '../../../../toast';
+export let row;
+let editedName = row.name;
+const dispatch = createEventDispatcher();
+</script>
+
+<Popover
+	floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
+	closeOnOtherPopoverOpen
+	contentClasses="flex flex-col w-80 gap-2 p-4"
+>
+	<svelte:fragment slot="trigger">
+		<Button color="light" size="xs2" nonCaptureEvent={true}>
+			<div class="flex flex-row gap-1 items-center">
+				<Pen size={16} />
+			</div>
+		</Button>
+	</svelte:fragment>
+	<svelte:fragment slot="content" let:close>
+		<div class="leading-6 font-semibold text-xs">Edit theme name</div>
+		<div class="flex flex-row gap-2">
+			<input bind:value={editedName} />
+			<Button
+				color="dark"
+				size="xs"
+				on:click={async () => {
+					if (!$workspaceStore) return
+					await updateTheme($workspaceStore, row.path, {
+						value: {
+							...row,
+							name: editedName
+						}
+					})
+					dispatch('reloadThemes')
+					close()
+					sendUserToast('Theme name updated:\n' + editedName)
+				}}
+			>
+				Update
+			</Button>
+		</div>
+	</svelte:fragment>
+</Popover>

package/package/components/apps/editor/componentsPanel/ThemeNameEditor.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        row: {
+            name: string;
+            path: string;
+        };
+    };
+    events: {
+        reloadThemes: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ThemeNameEditorProps = typeof __propDef.props;
+export type ThemeNameEditorEvents = typeof __propDef.events;
+export type ThemeNameEditorSlots = typeof __propDef.slots;
+export default class ThemeNameEditor extends SvelteComponent<ThemeNameEditorProps, ThemeNameEditorEvents, ThemeNameEditorSlots> {
+}
+export {};

package/package/components/apps/editor/componentsPanel/ThemeRow.svelte

@@ -0,0 +1,181 @@
+<script>import { deleteTheme, getTheme, updateTheme, resolveTheme, DEFAULT_THEME } from './themeUtils';
+import { workspaceStore } from '../../../../stores';
+import { getContext } from 'svelte';
+import Button from '../../../common/button/Button.svelte';
+import Cell from '../../../table/Cell.svelte';
+import { Code, Eye, GitBranch, Pin, Save, Trash } from 'lucide-svelte';
+import { sendUserToast } from '../../../../toast';
+import Badge from '../../../common/badge/Badge.svelte';
+import { twMerge } from 'tailwind-merge';
+import { createEventDispatcher } from 'svelte';
+import ThemeNameEditor from './ThemeNameEditor.svelte';
+import ThemeDrawer from './ThemeDrawer.svelte';
+import Dropdown from '../../../DropdownV2.svelte';
+export let previewThemePath = undefined;
+export let row;
+const { previewTheme, app } = getContext('AppViewerContext');
+let cssString = $app?.theme?.type === 'inlined' ? $app.theme.css : undefined;
+$: type = $app?.theme?.type;
+const dispatch = createEventDispatcher();
+async function toggleUpdate(row) {
+    if (!$workspaceStore)
+        return;
+    try {
+        await updateTheme($workspaceStore, row.path, {
+            value: {
+                name: row.name,
+                value: cssString ?? ''
+            }
+        });
+        $app.theme = {
+            type: 'path',
+            path: row.path
+        };
+        sendUserToast('Theme updated:\n' + row.name);
+    }
+    catch (e) {
+        sendUserToast('Theme update failed:\n' + e);
+    }
+}
+async function makeDefaultTheme(path) {
+    const defaultTheme = await getTheme($workspaceStore, DEFAULT_THEME);
+    const theme = await getTheme($workspaceStore, path);
+    await updateTheme($workspaceStore, DEFAULT_THEME, {
+        value: {
+            value: theme.value ?? '',
+            name: theme.name
+        }
+    });
+    await updateTheme($workspaceStore, path, {
+        value: {
+            value: defaultTheme.value ?? '',
+            name: defaultTheme.name
+        }
+    });
+    stopPreview();
+    $app.theme = {
+        type: 'path',
+        path: DEFAULT_THEME
+    };
+    dispatch('reloadThemes');
+}
+async function toggleDelete() {
+    stopPreview();
+    if ($workspaceStore) {
+        await deleteTheme($workspaceStore, row.path);
+    }
+    dispatch('reloadThemes');
+    sendUserToast('Theme deleted:\n' + row.name);
+}
+async function preview() {
+    previewThemePath = row.path;
+    const theme = await resolveTheme({
+        type: 'path',
+        path: row.path ?? ''
+    }, $workspaceStore);
+    $previewTheme = theme ?? '';
+}
+async function fork(path) {
+    stopPreview();
+    const theme = {
+        type: 'path',
+        path: path ?? ''
+    };
+    const resolvedTheme = await resolveTheme(theme, $workspaceStore);
+    $app.theme = {
+        type: 'inlined',
+        css: resolvedTheme
+    };
+    dispatch('setCodeTab');
+}
+function stopPreview() {
+    previewThemePath = undefined;
+    $previewTheme = undefined;
+}
+function apply() {
+    stopPreview();
+    $app.theme = {
+        type: 'path',
+        path: row.path ?? ''
+    };
+}
+async function getDropdownItems() {
+    return [
+        {
+            action: () => themeDrawer?.openDrawer(),
+            icon: Code,
+            displayName: 'View code',
+            type: 'action'
+        },
+        {
+            action: () => fork(row.path),
+            icon: GitBranch,
+            displayName: 'Fork',
+            type: 'action'
+        },
+        {
+            action: () => makeDefaultTheme(row.path),
+            icon: Pin,
+            displayName: 'Make default',
+            type: 'action',
+            disabled: row.path === DEFAULT_THEME
+        },
+        {
+            action: toggleDelete,
+            icon: Trash,
+            displayName: 'Delete',
+            type: 'delete',
+            disabled: row.path === DEFAULT_THEME
+        }
+    ];
+}
+let themeDrawer;
+</script>
+
+<tr class={twMerge(previewThemePath === row.path ? 'bg-blue-200' : '', 'transition-all')}>
+	<Cell first>
+		<div class="flex flex-row gap-1 items-center">
+			<ThemeNameEditor on:reloadThemes {row} />
+			{row.name}
+		</div>
+	</Cell>
+
+	<Cell last>
+		<div class={twMerge('flex flex-row gap-1 justify-end ')}>
+			{#if row.path === DEFAULT_THEME}
+				<Badge color="blue" small>Default</Badge>
+			{/if}
+
+			{#if $app?.theme?.type === 'path' && $app.theme.path === row.path}
+				<Badge color="green" small>Active</Badge>
+			{/if}
+
+			{#if type === 'inlined'}
+				<Button
+					color="light"
+					size="xs"
+					on:click={() => toggleUpdate(row)}
+					startIcon={{ icon: Save }}
+				>
+					Update
+				</Button>
+			{/if}
+			{#if $app?.theme?.type !== 'path' || $app.theme.path !== row.path}
+				<Button color="light" size="xs" on:click={preview} startIcon={{ icon: Eye }}>
+					Preview
+				</Button>
+				<Button color="dark" size="xs2" on:click={apply}>Apply</Button>
+			{/if}
+
+			<Dropdown items={getDropdownItems} class="w-fit" />
+		</div>
+	</Cell>
+</tr>
+
+<ThemeDrawer
+	bind:this={themeDrawer}
+	theme={{
+		type: 'path',
+		path: row.path ?? ''
+	}}
+/>

package/package/components/apps/editor/componentsPanel/ThemeRow.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        previewThemePath?: string | undefined;
+        row: {
+            name: string;
+            path: string;
+        };
+    };
+    events: {
+        reloadThemes: CustomEvent<any>;
+        setCodeTab: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ThemeRowProps = typeof __propDef.props;
+export type ThemeRowEvents = typeof __propDef.events;
+export type ThemeRowSlots = typeof __propDef.slots;
+export default class ThemeRow extends SvelteComponent<ThemeRowProps, ThemeRowEvents, ThemeRowSlots> {
+}
+export {};