windmill-components 1.60.4 → 1.83.1

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

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ComponentCssProperty } from '../../types';
+import type { StylePropertyKey } from './quickStyleProperties';
+declare const __propDef: {
+    props: {
+        name: string;
+        value?: ComponentCssProperty | undefined;
+        forceStyle?: boolean | undefined;
+        forceClass?: boolean | undefined;
+        quickStyleProperties?: StylePropertyKey[] | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CssPropertyProps = typeof __propDef.props;
+export type CssPropertyEvents = typeof __propDef.events;
+export type CssPropertySlots = typeof __propDef.slots;
+export default class CssProperty extends SvelteComponentTyped<CssPropertyProps, CssPropertyEvents, CssPropertySlots> {
+}
+export {};

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

@@ -0,0 +1,147 @@
+<script>import { getContext } from 'svelte';
+import { LayoutDashboardIcon, MousePointer2, CurlyBraces, X } from 'lucide-svelte';
+import SimpleEditor from '../../../SimpleEditor.svelte';
+import { emptyString } from '../../../../utils';
+import { Tab, TabContent, Tabs } from '../../../common';
+import ListItem from './ListItem.svelte';
+import CssProperty from './CssProperty.svelte';
+import { ccomponents, components } from '../component';
+const STATIC_ELEMENTS = ['app'];
+const TITLE_PREFIX = 'Css.';
+const { app } = getContext('AppViewerContext');
+let rawCode = '';
+let viewJsonSchema = false;
+$: rawCode && parseJson();
+let jsonError = '';
+function parseJson() {
+    try {
+        $app.css = JSON.parse(rawCode ?? '');
+        jsonError = '';
+    }
+    catch (e) {
+        jsonError = e.message;
+    }
+}
+function switchTab(asJson) {
+    viewJsonSchema = asJson;
+    if (asJson) {
+        rawCode = JSON.stringify($app.css, null, 2);
+    }
+    else {
+        parseJson();
+    }
+}
+const entries = [
+    {
+        type: 'app',
+        name: 'App',
+        icon: LayoutDashboardIcon,
+        ids: ['viewer', 'grid', 'component'].map((id) => ({ id, forceStyle: true, forceClass: true }))
+    },
+    ...Object.entries(ccomponents).map(([type, { name, icon, customCss }]) => ({
+        type: type,
+        name,
+        icon,
+        ids: Object.entries(customCss).map(([id, v]) => ({
+            id,
+            forceStyle: v?.style != undefined,
+            forceClass: v?.['class'] != undefined
+        }))
+    }))
+];
+entries.sort((a, b) => a.name.localeCompare(b.name));
+let search = '';
+</script>
+
+<h3 class="w-full text-center text-gray-600 py-1">Global Styling</h3>
+<Tabs selected="ui" on:selected={(e) => switchTab(e.detail === 'json')} class="relative">
+	<Tab value="ui" size="xs" class="grow">
+		<div class="m-1 center-center">
+			<MousePointer2 size={16} />
+			<span class="pl-1">UI</span>
+		</div>
+	</Tab>
+	<Tab value="json" size="xs" class="grow">
+		<div class="m-1 center-center">
+			<CurlyBraces size={16} />
+			<span class="pl-1">JSON</span>
+		</div>
+	</Tab>
+	<div slot="content" class="h-full overflow-y-auto">
+		<TabContent value="ui">
+			<div class="sticky top-0 left-0 w-full bg-white p-2">
+				<div class="relative">
+					<input
+						bind:value={search}
+						class="px-2 pb-1 border border-gray-300 rounded-sm {search ? 'pr-8' : ''}"
+						placeholder="Search..."
+					/>
+					{#if search}
+						<button
+							class="absolute right-2 top-1/2 transform -translate-y-1/2 hover:bg-gray-200 rounded-full p-0.5"
+							on:click|stopPropagation|preventDefault={() => (search = '')}
+						>
+							<X size="14" />
+						</button>
+					{/if}
+				</div>
+			</div>
+			{#each search != '' ? entries.filter((x) => x.name
+							.toLowerCase()
+							.includes(search.toLowerCase())) : entries as { type, name, icon, ids } (name)}
+				{#if ids.length > 0}
+					<ListItem
+						title={name}
+						prefix={TITLE_PREFIX}
+						on:open={(e) => {
+							if ($app.css != undefined) {
+								if (e.detail && $app.css[type] == undefined) {
+									$app.css[type] = Object.fromEntries(ids.map(({ id }) => [id, {}]))
+								}
+							}
+						}}
+					>
+						<div slot="title" class="flex items-center">
+							<svelte:component this={icon} size={18} />
+							<span class="ml-1">
+								{name}
+							</span>
+						</div>
+						<div class="pb-2">
+							{#each ids as { id, forceStyle, forceClass }}
+								<div class="mb-3">
+									{#if $app?.css?.[type]}
+										<CssProperty
+											{forceClass}
+											{forceStyle}
+											name={id}
+											bind:value={$app.css[type][id]}
+										/>
+									{/if}
+								</div>
+							{/each}
+						</div>
+					</ListItem>
+				{/if}
+			{/each}
+		</TabContent>
+		<TabContent value="json">
+			{#if !emptyString(jsonError)}
+				<span class="text-red-400 text-xs mb-1 flex flex-row-reverse">
+					{jsonError}
+				</span>
+			{:else}
+				<div class="py-2" />
+			{/if}
+			<div class="h-full w-full py-1">
+				<SimpleEditor
+					autoHeight
+					class="editor"
+					lang="json"
+					bind:code={rawCode}
+					fixedOverflowWidgets={false}
+				/>
+			</div>
+		</TabContent>
+	</div>
+</Tabs>

package/components/apps/editor/componentsPanel/CssSettings.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 CssSettingsProps = typeof __propDef.props;
+export type CssSettingsEvents = typeof __propDef.events;
+export type CssSettingsSlots = typeof __propDef.slots;
+export default class CssSettings extends SvelteComponentTyped<CssSettingsProps, CssSettingsEvents, CssSettingsSlots> {
+}
+export {};

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

@@ -0,0 +1,42 @@
+<script>import { slide } from 'svelte/transition';
+import { ChevronDown } from 'lucide-svelte';
+import { isOpenStore } from './store';
+import { createEventDispatcher } from 'svelte';
+export let title;
+export let prefix = undefined;
+const dispatch = createEventDispatcher();
+$: storeTitle = prefix + title;
+$: isOpen = prefix ? $isOpenStore[storeTitle] : true;
+$: dispatch('open', isOpen);
+</script>
+
+<section class="pt-1 pb-2 px-1">
+	{#if prefix !== undefined}
+		<button
+			on:click|preventDefault={() => isOpenStore.toggle(storeTitle)}
+			class="w-full flex justify-between items-center text-gray-700 px-2 py-1 
+			rounded-sm duration-200 hover:bg-gray-100"
+		>
+			<h1 class="text-sm font-semibold text-left">
+				<slot name="title">
+					{title}
+				</slot>
+			</h1>
+			<ChevronDown class="rotate-0 duration-300 {isOpen ? '!rotate-180' : ''}" />
+		</button>
+		{#if isOpen}
+			<div transition:slide|local={{ duration: 300 }} class="px-2">
+				<slot />
+			</div>
+		{/if}
+	{:else}
+		<h1 class="text-sm font-semibold text-left px-2 py-1">
+			<slot name="title">
+				{title}
+			</slot>
+		</h1>
+		<div class="px-2">
+			<slot />
+		</div>
+	{/if}
+</section>

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

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        prefix?: string | undefined;
+    };
+    events: {
+        open: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        title: {};
+        default: {};
+    };
+};
+export type ListItemProps = typeof __propDef.props;
+export type ListItemEvents = typeof __propDef.events;
+export type ListItemSlots = typeof __propDef.slots;
+export default class ListItem extends SvelteComponentTyped<ListItemProps, ListItemEvents, ListItemSlots> {
+}
+export {};

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

@@ -0,0 +1,170 @@
+<script>import { getContext, onMount, setContext } from 'svelte';
+import parse from 'style-to-object';
+import { isValidHexColor } from '../../../../utils';
+import { createStyleStore, StylePropertyType, StylePropertyUnits, STYLE_STORE_KEY } from './quickStyleProperties';
+import QuickStyleProperty from './QuickStyleProperty.svelte';
+export let value = '';
+export let properties;
+const { app } = getContext('AppViewerContext');
+const styleStore = createStyleStore(properties);
+setContext(STYLE_STORE_KEY, styleStore);
+let multiValues = initiateMultiValues();
+let mounted = false;
+$: mounted && $styleStore && writeStyle();
+$: mounted && (!value || value) && parseStyle();
+$: $app && setTopColors();
+function parseStyle() {
+    styleStore.resetStyle();
+    if (!value) {
+        multiValues = initiateMultiValues();
+        return;
+    }
+    try {
+        const current = parse(value) || {};
+        Object.entries(current).forEach(([k, v]) => {
+            styleStore.updatePropValue(k, v);
+            const { prop, index } = styleStore.getProp(k);
+            if (Array.isArray(prop?.prop?.value) && index !== undefined) {
+                const valueArray = v.split(' ');
+                multiValues[index] = multiValues[index].map((v, i) => valueArray[i] || v);
+            }
+        });
+        setTopColors();
+    }
+    catch { }
+}
+function writeStyle() {
+    const current = parse(value) || {};
+    $styleStore.style.forEach((s) => {
+        current[s.prop.key] = convertValue(s.value);
+    });
+    const entries = Object.entries(current);
+    value = entries.reduce((style, [k, v]) => {
+        return v ? `${style} ${k}: ${v}; `.trim() : style;
+    }, '');
+}
+function convertValue(value) {
+    switch (typeof value) {
+        case 'number':
+            return value + '';
+        case 'string':
+            return value;
+        default:
+            return '';
+    }
+}
+function setTopColors() {
+    const styles = collectStyles();
+    const parsedStyles = styles.map((style) => parse(style) || {});
+    const usedColors = {};
+    parsedStyles.forEach((style) => {
+        Object.values(style).reduce((colors, v) => {
+            // TODO: support RGB and HSL colors as well
+            // Splitting is needed so colors can be extracted
+            // from values like '1px solid #000000'
+            v.split(' ').forEach((v) => {
+                if (isValidHexColor(v)) {
+                    colors[v] = (colors[v] || 0) + 1;
+                }
+            });
+            return colors;
+        }, usedColors);
+    });
+    const colors = Object.entries(usedColors)
+        .sort((a, b) => b[1] - a[1])
+        .slice(0, 3)
+        .map(([color]) => color);
+    styleStore.setTopColors(colors);
+}
+function collectStyles() {
+    const styles = [];
+    // Getting global app styles
+    Object.values($app.css || {}).forEach((element) => {
+        Object.values(element).filter(({ style }) => style && styles.push(style));
+    });
+    // Getting styles from individual components
+    $app.grid.map((component) => {
+        Object.values(component.data.customCss || {}).forEach(({ style }) => {
+            style && styles.push(style);
+        });
+    });
+    // Getting style from subgrids
+    Object.values($app.subgrids || {}).forEach((grid) => {
+        grid.map((component) => {
+            Object.values(component.data.customCss || {}).forEach(({ style }) => {
+                style && styles.push(style);
+            });
+        });
+    });
+    return styles;
+}
+function initiateMultiValues() {
+    return $styleStore.style.reduce((acc, curr, i) => {
+        if (Array.isArray(curr.prop.value)) {
+            acc[i] = Array.from({ length: curr.prop.value.length }, () => {
+                return '';
+            });
+        }
+        return acc;
+    }, {});
+}
+function setMultiValueProperty(index) {
+    if (multiValues[index].every((v) => !v || +v === 0 || StylePropertyUnits.includes(v))) {
+        $styleStore.style[index].value = '';
+        return;
+    }
+    const values = multiValues[index].map((v, i) => {
+        v = StylePropertyUnits.includes(v) ? '' : v;
+        const type = $styleStore.style[index].prop.value[i].type;
+        if (v) {
+            multiValues[index][i] = v;
+            return v;
+        }
+        else if (type === StylePropertyType.color) {
+            return '#000000';
+        }
+        else if (type === StylePropertyType.number) {
+            return 0;
+        }
+        else if (type === StylePropertyType.unit) {
+            return 0;
+        }
+        else if (type === StylePropertyType.text) {
+            const options = $styleStore.style[index].prop.value[i].options;
+            return options ? options[0].text : '';
+        }
+        else {
+            return '';
+        }
+    });
+    $styleStore.style[index].value = values.join(' ').trim();
+}
+onMount(() => {
+    parseStyle();
+    mounted = true;
+});
+</script>
+
+<div class="bg-gray-200/60 rounded-md p-2">
+	{#each $styleStore.style as { prop }, index}
+		<div class="pb-3 last:pb-0">
+			<div class="text-sm font-medium text-gray-600 pb-0.5"> {prop.key} </div>
+			<div class="flex items-center gap-1 w-full">
+				{#if Array.isArray(prop.value)}
+					<div class="flex justify-start items-center flex-wrap gap-x-4 gap-y-1">
+						{#each prop.value as value, i}
+							<QuickStyleProperty
+								prop={{ ...prop, value }}
+								inline
+								bind:value={multiValues[index][i]}
+								on:change={() => setMultiValueProperty(index)}
+							/>
+						{/each}
+					</div>
+				{:else}
+					<QuickStyleProperty {prop} bind:value={$styleStore.style[index].value} />
+				{/if}
+			</div>
+		</div>
+	{/each}
+</div>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import { type StylePropertyKey } from './quickStyleProperties';
+declare const __propDef: {
+    props: {
+        value?: string | undefined;
+        properties: StylePropertyKey[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type QuickStyleMenuProps = typeof __propDef.props;
+export type QuickStyleMenuEvents = typeof __propDef.events;
+export type QuickStyleMenuSlots = typeof __propDef.slots;
+export default class QuickStyleMenu extends SvelteComponentTyped<QuickStyleMenuProps, QuickStyleMenuEvents, QuickStyleMenuSlots> {
+}
+export {};

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

@@ -0,0 +1,130 @@
+<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;
+$: internalValue = value ? +value.replace(unit, '') : '';
+$: 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-gray-500">
+			{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 disapperTimoout={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"
+				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-white rounded-r-md border-y border-r border-gray-300 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-white 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 disapperTimoout={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/components/apps/editor/componentsPanel/QuickStyleProperty.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } 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 SvelteComponentTyped<QuickStylePropertyProps, QuickStylePropertyEvents, QuickStylePropertySlots> {
+}
+export {};