windmill-components 1.87.0 → 1.89.0

package/package/components/apps/editor/component/ComponentWrapper.svelte

@@ -0,0 +1,63 @@
+<script>import { getContext } from 'svelte';
+import { dfs, selectId } from '../appUtils';
+export let id;
+export let type;
+const { app, connectingInput, selectedComponent, focusedGrid } = getContext('AppViewerContext');
+const { manuallyOpened } = getContext('ContextPanel');
+function selectComponent(e, id) {
+    if (!$connectingInput.opened) {
+        selectId(e, id, selectedComponent, $app);
+        if ($focusedGrid?.parentComponentId != id) {
+            $focusedGrid = undefined;
+        }
+    }
+}
+// Prevent interaction with the component when connecting an input
+// We let the event bubble up if the component is a container, so we can select a tab for example
+function preventInteraction(event, isContainer = false) {
+    if ($connectingInput.opened && !isContainer) {
+        event.stopPropagation();
+    }
+}
+function onPointerDown(e) {
+    if (!$connectingInput.opened) {
+        selectComponent(e, id);
+    }
+    else {
+        const allIdsInPath = dfs($app.grid, id, $app.subgrids ?? {}) ?? [];
+        allIdsInPath.forEach((id) => {
+            $manuallyOpened[id] = true;
+        });
+        e.stopPropagation();
+    }
+}
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<div
+	class={$$props.class}
+	on:pointerover={(e) => {
+		if ($connectingInput.opened && $connectingInput.hoveredComponent !== id) {
+			$connectingInput.hoveredComponent = id
+		}
+		e.stopPropagation()
+	}}
+	on:pointerleave={(e) => {
+		if ($connectingInput.opened) {
+			$connectingInput.hoveredComponent = undefined
+			e.stopPropagation()
+		}
+	}}
+	on:focus={(e) => {
+		if ($connectingInput.opened) {
+			e.stopPropagation()
+		}
+	}}
+	on:pointerdown={onPointerDown}
+	on:click|capture={(event) => preventInteraction(event, type === 'tabscomponent')}
+	on:drag|capture={preventInteraction}
+	on:pointerup|capture={(event) => preventInteraction(event, type === 'tabscomponent')}
+>
+	<slot />
+</div>

package/package/components/apps/editor/component/ComponentWrapper.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        id: string;
+        type: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ComponentWrapperProps = typeof __propDef.props;
+export type ComponentWrapperEvents = typeof __propDef.events;
+export type ComponentWrapperSlots = typeof __propDef.slots;
+export default class ComponentWrapper extends SvelteComponentTyped<ComponentWrapperProps, ComponentWrapperEvents, ComponentWrapperSlots> {
+}
+export {};

package/package/components/apps/editor/component/README.md

@@ -0,0 +1,19 @@
+# How to add new components
+
+1. [**`components.ts`**](./components.ts):
+   1. Create a type for the new component and add it to the `AppComponent` union
+      type
+   1. Add the component to the `components` record
+1. [**`sets.ts`**](./sets.ts):
+   1. Add the component to one of the component sets: `layout`, `buttons`,
+      `inputs` or `display` _(this controls which group the component will be
+      placed in in the **Insert** menu)_
+1. [**`quickStyleProperties.ts`**](../componentsPanel/quickStyleProperties.ts):
+   1. Add the component to the `quickStyleProperties` record
+   1. _(optional)_ Add the CSS properties that could be applied to the component
+      parts
+1. [**`Component.svelte`**](./Component.svelte):
+   1. Add the new component in the Svelte `if` statement
+1. [**`default-codes.ts`**](./default-codes.ts):
+   1. _(optional)_ Add the default code associated with the new component to the
+      `DEFAULT_CODES` record