windmill-components 1.89.0 → 1.103.0

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

@@ -1,145 +0,0 @@
-<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 = '';
-$: rawCode && parseJson();
-let jsonError = '';
-function parseJson() {
-    try {
-        $app.css = JSON.parse(rawCode ?? '');
-        jsonError = '';
-    }
-    catch (e) {
-        jsonError = e.message;
-    }
-}
-function switchTab(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>
-
-<div class="w-full text-lg font-semibold text-center text-gray-600 p-2">Global Styling</div>
-<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/dist/components/apps/editor/componentsPanel/CssSettings.svelte.d.ts

@@ -1,14 +0,0 @@
-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/dist/components/apps/editor/componentsPanel/ListItem.svelte

@@ -1,52 +0,0 @@
-<script>import { slide } from 'svelte/transition';
-import { ChevronDown } from 'lucide-svelte';
-import { isOpenStore } from './store';
-import { createEventDispatcher, onMount } from 'svelte';
-export let title;
-export let prefix = undefined;
-export let openByDefault = false;
-export let wrapperClasses = '';
-export let toggleClasses = '';
-export let contentWrapperClasses = '';
-export let isOpen = false;
-const dispatch = createEventDispatcher();
-$: storeTitle = prefix + title;
-$: isOpen = prefix ? $isOpenStore[storeTitle] : true;
-$: dispatch('open', isOpen);
-onMount(() => {
-    if (prefix !== undefined && !(prefix + title in $isOpenStore)) {
-        $isOpenStore[prefix + title] = openByDefault;
-    }
-});
-</script>
-
-<section class="pt-1 pb-2 px-1 {wrapperClasses}">
-	{#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 {toggleClasses}"
-		>
-			<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 {contentWrapperClasses}">
-				<slot />
-			</div>
-		{/if}
-	{:else}
-		<h1 class="text-sm font-semibold text-left px-2 py-1 text-gray-600">
-			<slot name="title">
-				{title}
-			</slot>
-		</h1>
-		<div class="px-2">
-			<slot />
-		</div>
-	{/if}
-</section>

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

@@ -1,27 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        title: string;
-        prefix?: string | undefined;
-        openByDefault?: boolean | undefined;
-        wrapperClasses?: string | undefined;
-        toggleClasses?: string | undefined;
-        contentWrapperClasses?: string | undefined;
-        isOpen?: boolean | 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/dist/components/apps/editor/componentsPanel/QuickStyleMenu.svelte

@@ -1,211 +0,0 @@
-<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';
-import ListItem from './ListItem.svelte';
-export let value = '';
-export let properties;
-export let componentType = undefined;
-export let componentProperty = undefined;
-const { app } = getContext('AppViewerContext');
-const styleStore = createStyleStore(properties);
-setContext(STYLE_STORE_KEY, styleStore);
-let multiValues = initiateMultiValues();
-let mounted = false;
-let isOpen = {};
-$: 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();
-}
-function formatKebabCase(text) {
-    text = text.toLowerCase().replace(/-/, ' ');
-    if (text.length) {
-        text = text[0].toUpperCase() + text.slice(1);
-    }
-    return text;
-}
-onMount(() => {
-    parseStyle();
-    mounted = true;
-});
-</script>
-
-<div class="pb-2 pt-1">
-	{#each properties as property}
-		{#each Object.keys(property) as group (group)}
-			{@const prefix = `${componentType}_${componentProperty}_${group}`}
-			<ListItem
-				bind:isOpen={isOpen[prefix]}
-				title={group}
-				{prefix}
-				openByDefault={true}
-				wrapperClasses="!px-0 !pt-0"
-				toggleClasses="border-b border-gray-300 !rounded-b-none !py-0
-				{isOpen[prefix] ? '!bg-gray-100 hover:!bg-gray-200' : ''}"
-			>
-				<svelte:fragment slot="title">
-					<span class="font-semibold text-gray-600 capitalize">
-						{group}
-					</span>
-				</svelte:fragment>
-				<div class="flex justify-start items-center flex-wrap gap-x-4 gap-y-1 pt-3">
-					{#each property[group] as p}
-						{@const {
-							prop: { prop },
-							index
-						} = styleStore.getProp(p)}
-						{#if prop !== undefined && index !== undefined}
-							<div class="pb-2 pt-1">
-								<div class="text-sm font-medium text-gray-600 pb-0.5">
-									{formatKebabCase(prop.key)}
-								</div>
-								<div class="flex items-center gap-1">
-									{#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} inline bind:value={$styleStore.style[index].value} />
-									{/if}
-								</div>
-							</div>
-						{/if}
-					{/each}
-				</div>
-			</ListItem>
-		{/each}
-	{/each}
-</div>

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

@@ -1,21 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import { type PropertyGroup } from './quickStyleProperties';
-import type { TypedComponent } from '../component';
-declare const __propDef: {
-    props: {
-        value?: string | undefined;
-        properties: PropertyGroup[];
-        componentType?: TypedComponent['type'] | undefined;
-        componentProperty?: string | undefined;
-    };
-    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/dist/components/apps/editor/componentsPanel/QuickStyleProperty.svelte

@@ -1,131 +0,0 @@
-<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"
-				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-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/dist/components/apps/editor/componentsPanel/QuickStyleProperty.svelte.d.ts

@@ -1,21 +0,0 @@
-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 {};

package/dist/components/apps/editor/componentsPanel/componentDefaultProps.d.ts

@@ -1,3 +0,0 @@
-import type { Aligned } from '../../types';
-declare const defaultAlignement: Aligned;
-export { defaultAlignement };

package/dist/components/apps/editor/componentsPanel/componentDefaultProps.js

@@ -1,5 +0,0 @@
-const defaultAlignement = {
-    horizontalAlignment: 'center',
-    verticalAlignment: 'center'
-};
-export { defaultAlignement };