windmill-components 1.305.6 → 1.305.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/package/components/apps/components/buttons/AppButton.svelte +7 -3
  2. package/package/components/apps/components/display/AppDownload.svelte +12 -8
  3. package/package/components/apps/components/display/AppHtml.svelte +6 -23
  4. package/package/components/apps/components/display/AppHtml.svelte.d.ts +0 -2
  5. package/package/components/apps/components/display/AppMenu.svelte +13 -9
  6. package/package/components/apps/components/display/AppStatCard.svelte +6 -4
  7. package/package/components/apps/components/helpers/eval.js +1 -1
  8. package/package/components/apps/components/icon.js +0 -2
  9. package/package/components/apps/components/inputs/AppTextInput.svelte +27 -11
  10. package/package/components/apps/editor/SettingsPanel.svelte +5 -3
  11. package/package/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte +1 -0
  12. package/package/utils.js +1 -1
  13. package/package.json +1 -1
package/package/components/apps/components/buttons/AppButton.svelte CHANGED
@@ -43,11 +43,11 @@ if (controls) {
43
43
  $componentControl[id] = controls;
44
44
  }
45
45
  let runnableComponent;
46
+ let confirmedCallback = undefined;
46
47
  let beforeIconComponent;
47
48
  let afterIconComponent;
48
49
  $: resolvedConfig.beforeIcon && beforeIconComponent && handleBeforeIcon();
49
50
  $: resolvedConfig.afterIcon && afterIconComponent && handleAfterIcon();
50
- let confirmedCallback = undefined;
51
51
  async function handleBeforeIcon() {
52
52
  if (resolvedConfig.beforeIcon) {
53
53
  beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon, beforeIconComponent, 14, undefined, undefined);
@@ -180,13 +180,17 @@ let css = initCss($app.css?.buttoncomponent, customCss);
180
180
  {loading}
181
181
  >
182
182
  {#if resolvedConfig.beforeIcon}
183
- <div class="min-w-4" bind:this={beforeIconComponent} />
183
+ {#key resolvedConfig.beforeIcon}
184
+ <div class="min-w-4" bind:this={beforeIconComponent} />
185
+ {/key}
184
186
  {/if}
185
187
  {#if resolvedConfig.label?.toString() && resolvedConfig.label?.toString()?.length > 0}
186
188
  <div>{resolvedConfig.label.toString()}</div>
187
189
  {/if}
188
190
  {#if resolvedConfig.afterIcon}
189
- <div class="min-w-4" bind:this={afterIconComponent} />
191
+ {#key resolvedConfig.afterIcon}
192
+ <div class="min-w-4" bind:this={afterIconComponent} />
193
+ {/key}
190
194
  {/if}
191
195
  </Button>
192
196
  {/key}
package/package/components/apps/components/display/AppDownload.svelte CHANGED
@@ -23,16 +23,16 @@ const { app, worldStore } = getContext('AppViewerContext');
23
23
  initOutput($worldStore, id, {});
24
24
  let beforeIconComponent;
25
25
  let afterIconComponent;
26
- $: resolvedConfig.beforeIcon && handleBeforeIcon();
27
- $: resolvedConfig.afterIcon && handleAfterIcon();
26
+ $: resolvedConfig.beforeIcon && beforeIconComponent && handleBeforeIcon();
27
+ $: resolvedConfig.afterIcon && afterIconComponent && handleAfterIcon();
28
28
  async function handleBeforeIcon() {
29
29
  if (resolvedConfig.beforeIcon) {
30
- beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon);
30
+ beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon, beforeIconComponent, 14, undefined, undefined);
31
31
  }
32
32
  }
33
33
  async function handleAfterIcon() {
34
34
  if (resolvedConfig.afterIcon) {
35
- afterIconComponent = await loadIcon(resolvedConfig.afterIcon);
35
+ afterIconComponent = await loadIcon(resolvedConfig.afterIcon, afterIconComponent, 14, undefined, undefined);
36
36
  }
37
37
  }
38
38
  let css = initCss($app.css?.downloadcomponent, customCss);
@@ -87,14 +87,18 @@ let css = initCss($app.css?.downloadcomponent, customCss);
87
87
  nonCaptureEvent
88
88
  >
89
89
  <span class="truncate inline-flex gap-2 items-center">
90
- {#if resolvedConfig.beforeIcon && beforeIconComponent}
91
- <svelte:component this={beforeIconComponent} size={14} />
90
+ {#if resolvedConfig.beforeIcon}
91
+ {#key resolvedConfig.beforeIcon}
92
+ <div class="min-w-4" bind:this={beforeIconComponent} />
93
+ {/key}
92
94
  {/if}
93
95
  {#if resolvedConfig.label && resolvedConfig.label?.length > 0}
94
96
  <div>{resolvedConfig.label}</div>
95
97
  {/if}
96
- {#if resolvedConfig.afterIcon && afterIconComponent}
97
- <svelte:component this={afterIconComponent} size={14} />
98
+ {#if resolvedConfig.afterIcon}
99
+ {#key resolvedConfig.afterIcon}
100
+ <div class="min-w-4" bind:this={afterIconComponent} />
101
+ {/key}
98
102
  {/if}
99
103
  </span>
100
104
  </Button>
package/package/components/apps/components/display/AppHtml.svelte CHANGED
@@ -2,21 +2,18 @@
2
2
  import { initOutput } from '../../editor/appUtils';
3
3
  import { initCss } from '../../utils';
4
4
  import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
5
- import { twMerge } from 'tailwind-merge';
6
5
  import ResolveStyle from '../helpers/ResolveStyle.svelte';
7
6
  export let id;
8
7
  export let componentInput;
9
8
  export let initializing = undefined;
10
9
  export let customCss = undefined;
11
10
  export let render;
12
- const { app, worldStore, mode } = getContext('AppViewerContext');
11
+ const { app, worldStore } = getContext('AppViewerContext');
13
12
  const outputs = initOutput($worldStore, id, {
14
13
  result: undefined,
15
14
  loading: false
16
15
  });
17
16
  let result = undefined;
18
- let h = undefined;
19
- let w = undefined;
20
17
  let css = initCss($app.css?.htmlcomponent, customCss);
21
18
  </script>
22
19
 
@@ -35,8 +32,6 @@ let css = initCss($app.css?.htmlcomponent, customCss);
35
32
  e?.preventDefault()
36
33
  }}
37
34
  class="h-full w-full"
38
- bind:clientHeight={h}
39
- bind:clientWidth={w}
40
35
  >
41
36
  <RunnableWrapper
42
37
  {outputs}
@@ -47,22 +42,10 @@ let css = initCss($app.css?.htmlcomponent, customCss);
47
42
  bind:initializing
48
43
  bind:result
49
44
  >
50
- {#key result}
51
- <iframe
52
- frameborder="0"
53
- style="height: {h}px; width: {w}px; {css?.container?.style ?? ''}"
54
- class={twMerge('p-0', css?.container?.class, 'wm-html')}
55
- title="sandbox"
56
- srcdoc={result
57
- ? '<base target="_parent" /><scr' +
58
- `ipt type="application/javascript" src="/tailwind.js"></script>` +
59
- result
60
- : ''}
61
- />
62
- {/key}
63
- <!-- svelte-ignore a11y-click-events-have-key-events -->
64
- {#if $mode == 'dnd'}
65
- <div on:click|stopPropagation class="absolute top-0 h-full w-full" />
66
- {/if}
45
+ <div class="w-full h-full overflow-auto">
46
+ {#key result}
47
+ {@html result}
48
+ {/key}
49
+ </div>
67
50
  </RunnableWrapper>
68
51
  </div>
package/package/components/apps/components/display/AppHtml.svelte.d.ts CHANGED
@@ -10,8 +10,6 @@ declare const __propDef: {
10
10
  render: boolean;
11
11
  };
12
12
  events: {
13
- click: MouseEvent;
14
- } & {
15
13
  [evt: string]: CustomEvent<any>;
16
14
  };
17
15
  slots: {};
package/package/components/apps/components/display/AppMenu.svelte CHANGED
@@ -25,19 +25,19 @@ let outputs = initOutput($worldStore, id, {
25
25
  }
26
26
  });
27
27
  const resolvedConfig = initConfig(components['menucomponent'].initialData.configuration, configuration);
28
+ let css = initCss($app.css?.menucomponent, customCss);
28
29
  let beforeIconComponent;
29
30
  let afterIconComponent;
30
- let css = initCss($app.css?.menucomponent, customCss);
31
- $: resolvedConfig.beforeIcon && handleBeforeIcon();
32
- $: resolvedConfig.afterIcon && handleAfterIcon();
31
+ $: resolvedConfig.beforeIcon && beforeIconComponent && handleBeforeIcon();
32
+ $: resolvedConfig.afterIcon && afterIconComponent && handleAfterIcon();
33
33
  async function handleBeforeIcon() {
34
34
  if (resolvedConfig.beforeIcon) {
35
- beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon);
35
+ beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon, beforeIconComponent, 14, undefined, undefined);
36
36
  }
37
37
  }
38
38
  async function handleAfterIcon() {
39
39
  if (resolvedConfig.afterIcon) {
40
- afterIconComponent = await loadIcon(resolvedConfig.afterIcon);
40
+ afterIconComponent = await loadIcon(resolvedConfig.afterIcon, afterIconComponent, 14, undefined, undefined);
41
41
  }
42
42
  }
43
43
  </script>
@@ -86,14 +86,18 @@ async function handleAfterIcon() {
86
86
  nonCaptureEvent
87
87
  >
88
88
  <span class="truncate inline-flex gap-2 items-center">
89
- {#if resolvedConfig.beforeIcon && beforeIconComponent}
90
- <svelte:component this={beforeIconComponent} size={14} />
89
+ {#if resolvedConfig.beforeIcon}
90
+ {#key resolvedConfig.beforeIcon}
91
+ <div class="min-w-4" bind:this={beforeIconComponent} />
92
+ {/key}
91
93
  {/if}
92
94
  {#if resolvedConfig.label && resolvedConfig.label?.length > 0}
93
95
  <div>{resolvedConfig.label}</div>
94
96
  {/if}
95
- {#if resolvedConfig.afterIcon && afterIconComponent}
96
- <svelte:component this={afterIconComponent} size={14} />
97
+ {#if resolvedConfig.afterIcon}
98
+ {#key resolvedConfig.afterIcon}
99
+ <div class="min-w-4" bind:this={afterIconComponent} />
100
+ {/key}
97
101
  {/if}
98
102
  </span>
99
103
  </Button>
package/package/components/apps/components/display/AppStatCard.svelte CHANGED
@@ -18,10 +18,10 @@ let resolvedConfig = initConfig(components['statcomponent'].initialData.configur
18
18
  initOutput($worldStore, id, {});
19
19
  let css = initCss($app.css?.statcomponent, customCss);
20
20
  let iconComponent;
21
- $: isIcon && resolvedConfig?.media?.configuration?.icon?.icon && handleIcon();
21
+ $: isIcon && resolvedConfig?.media?.configuration?.icon?.icon && iconComponent && handleIcon();
22
22
  async function handleIcon() {
23
23
  if (resolvedConfig?.media?.configuration?.icon?.icon) {
24
- iconComponent = await loadIcon(resolvedConfig.media.configuration.icon.icon);
24
+ iconComponent = await loadIcon(resolvedConfig?.media?.configuration?.icon?.icon, iconComponent, 34, undefined, undefined);
25
25
  }
26
26
  }
27
27
  $: isIcon = resolvedConfig.media?.selected == 'icon';
@@ -66,8 +66,10 @@ $: isIcon = resolvedConfig.media?.selected == 'icon';
66
66
  style={css?.media?.style}
67
67
  >
68
68
  {#if isIcon}
69
- {#if resolvedConfig?.media && iconComponent}
70
- <svelte:component this={iconComponent} size={24} />
69
+ {#if resolvedConfig?.media}
70
+ {#key resolvedConfig.media}
71
+ <div class="min-w-4 text-primary" bind:this={iconComponent} />
72
+ {/key}
71
73
  {/if}
72
74
  {:else}
73
75
  <Loader loading={resolvedConfig?.media?.configuration?.image?.source == undefined}>
package/package/components/apps/components/helpers/eval.js CHANGED
@@ -108,7 +108,7 @@ export async function eval_like(text, context = {}, state, editor, controlCompon
108
108
  window.open(x, '_blank');
109
109
  }
110
110
  else {
111
- await newTab(x);
111
+ window.location.href = x;
112
112
  }
113
113
  }, (id, index) => {
114
114
  controlComponents[id]?.setTab?.(index);
package/package/components/apps/components/icon.js CHANGED
@@ -23,8 +23,6 @@ export async function loadIcon(name, parent, size, strokeWidth, color) {
23
23
  }
24
24
  }
25
25
  }
26
- else {
27
- }
28
26
  }
29
27
  catch (error) {
30
28
  console.error(error);
package/package/components/apps/components/inputs/AppTextInput.svelte CHANGED
@@ -46,16 +46,16 @@ let css = initCss($app.css?.[appCssKey], customCss);
46
46
  $: classInput = twMerge('windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2', css?.input?.class ?? '', resolvedConfig.disabled ? 'placeholder:text-gray-400 dark:placeholder:text-gray-600' : '', 'wm-text-input');
47
47
  let beforeIconComponent;
48
48
  let afterIconComponent;
49
- $: resolvedConfig.beforeIcon && handleBeforeIcon();
50
- $: resolvedConfig.afterIcon && handleAfterIcon();
49
+ $: resolvedConfig.beforeIcon && beforeIconComponent && handleBeforeIcon();
50
+ $: resolvedConfig.afterIcon && afterIconComponent && handleAfterIcon();
51
51
  async function handleBeforeIcon() {
52
52
  if (resolvedConfig.beforeIcon) {
53
- beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon);
53
+ beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon, beforeIconComponent, 14, undefined, undefined);
54
54
  }
55
55
  }
56
56
  async function handleAfterIcon() {
57
57
  if (resolvedConfig.afterIcon) {
58
- afterIconComponent = await loadIcon(resolvedConfig.afterIcon);
58
+ afterIconComponent = await loadIcon(resolvedConfig.afterIcon, afterIconComponent, 14, undefined, undefined);
59
59
  }
60
60
  }
61
61
  </script>
@@ -103,14 +103,20 @@ async function handleAfterIcon() {
103
103
  <AlignWrapper {render} {verticalAlignment}>
104
104
  <div class="relative w-full">
105
105
  <div class="absolute top-1/2 -translate-y-1/2 left-2">
106
- {#if resolvedConfig.beforeIcon && beforeIconComponent}
107
- <svelte:component this={beforeIconComponent} size={14} />
106
+ {#if resolvedConfig.beforeIcon}
107
+ {#key resolvedConfig.beforeIcon}
108
+ <div class="min-w-4" bind:this={beforeIconComponent} />
109
+ {/key}
108
110
  {/if}
109
111
  </div>
110
112
 
111
113
  {#if inputType === 'password'}
112
114
  <input
113
- class={twMerge(classInput, beforeIconComponent && 'pl-8', afterIconComponent && 'pr-8')}
115
+ class={twMerge(
116
+ classInput,
117
+ resolvedConfig.beforeIcon ? '!pl-8' : '',
118
+ resolvedConfig.afterIcon ? '!pr-8' : ''
119
+ )}
114
120
  style={css?.input?.style ?? ''}
115
121
  on:pointerdown|stopPropagation={(e) =>
116
122
  !$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
@@ -122,7 +128,11 @@ async function handleAfterIcon() {
122
128
  />
123
129
  {:else if inputType === 'text'}
124
130
  <input
125
- class={twMerge(classInput, beforeIconComponent && 'pl-8', afterIconComponent && 'pr-8')}
131
+ class={twMerge(
132
+ classInput,
133
+ resolvedConfig.beforeIcon ? '!pl-8' : '',
134
+ resolvedConfig.afterIcon ? '!pr-8' : ''
135
+ )}
126
136
  style={css?.input?.style ?? ''}
127
137
  on:pointerdown|stopPropagation={(e) =>
128
138
  !$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
@@ -134,7 +144,11 @@ async function handleAfterIcon() {
134
144
  />
135
145
  {:else if inputType === 'email'}
136
146
  <input
137
- class={twMerge(classInput, beforeIconComponent && 'pl-8', afterIconComponent && 'pr-8')}
147
+ class={twMerge(
148
+ classInput,
149
+ resolvedConfig.beforeIcon != undefined ? '!pl-8' : '',
150
+ resolvedConfig.afterIcon ? '!pr-8' : ''
151
+ )}
138
152
  style={css?.input?.style ?? ''}
139
153
  on:pointerdown|stopPropagation={(e) =>
140
154
  !$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
@@ -147,8 +161,10 @@ async function handleAfterIcon() {
147
161
  {/if}
148
162
 
149
163
  <div class="absolute top-1/2 -translate-y-1/2 right-2">
150
- {#if resolvedConfig.afterIcon && afterIconComponent}
151
- <svelte:component this={afterIconComponent} size={14} />
164
+ {#if resolvedConfig.afterIcon}
165
+ {#key resolvedConfig.afterIcon}
166
+ <div class="min-w-4" bind:this={afterIconComponent} />
167
+ {/key}
152
168
  {/if}
153
169
  </div>
154
170
  </div>
package/package/components/apps/editor/SettingsPanel.svelte CHANGED
@@ -7,12 +7,14 @@ import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
7
7
  import BackgroundScriptSettings from './settingsPanel/script/BackgroundScriptSettings.svelte';
8
8
  import Recompute from './settingsPanel/Recompute.svelte';
9
9
  const { selectedComponent, app, stateId } = getContext('AppViewerContext');
10
+ let firstComponent = $selectedComponent?.[0];
11
+ $: $selectedComponent?.[0] != firstComponent && (firstComponent = $selectedComponent?.[0]);
10
12
  $: hiddenInlineScript = $app?.hiddenInlineScripts
11
13
  ?.map((x, i) => ({ script: x, index: i }))
12
14
  .find(({ script, index }) => $selectedComponent?.includes(BG_PREFIX + index));
13
- $: componentSettings = findComponentSettings($app, $selectedComponent?.[0]);
14
- $: tableActionSettings = findTableActionSettings($app, $selectedComponent?.[0]);
15
- $: menuItemsSettings = findMenuItemsSettings($app, $selectedComponent?.[0]);
15
+ $: componentSettings = findComponentSettings($app, firstComponent);
16
+ $: tableActionSettings = findTableActionSettings($app, firstComponent);
17
+ $: menuItemsSettings = findMenuItemsSettings($app, firstComponent);
16
18
  function findTableActionSettings(app, id) {
17
19
  return allItems(app.grid, app.subgrids)
18
20
  .map((x) => {
package/package/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte CHANGED
@@ -80,6 +80,7 @@ function select(label) {
80
80
  {label === componentInput.value ? 'text-blue-600 bg-blue-50 pointer-events-none' : ''}"
81
81
  >
82
82
  <img
83
+ class="dark:invert"
83
84
  loading="lazy"
84
85
  src="https://cdn.jsdelivr.net/npm/lucide-static@0.367.0/icons/{label}.svg"
85
86
  />
package/package/utils.js CHANGED
@@ -624,7 +624,7 @@ export function cleanValueProperties(obj) {
624
624
  }
625
625
  export function orderedJsonStringify(obj, space) {
626
626
  const allKeys = new Set();
627
- JSON.stringify(obj, (key, value) => (allKeys.add(key), value));
627
+ JSON.stringify(obj, (key, value) => (value != undefined && value != null && allKeys.add(key), value));
628
628
  return JSON.stringify(obj, Array.from(allKeys).sort(), space);
629
629
  }
630
630
  function sortObjectKeys(obj) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "windmill-components",
3
- "version": "1.305.6",
3
+ "version": "1.305.7",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build": "vite build",