@papu1337/builder 0.0.4 → 1.0.1

package/dist/builder/canvas/canvas.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import type { ElementEntry } from "../../service";
+  import type { SvelteMap } from "svelte/reactivity";
+  import { dndzone } from "svelte-dnd-action";
+  import { GLOBAL_KEY } from "../../service";
+  import { frameWidth, viewport } from "../viewport.svelte";
+
+  import "./styles.css";
+
+  interface CanvasProps {
+    ComponentsInstance: SvelteMap<string, ElementEntry>;
+    selectComponent: (component: ElementEntry | null) => void;
+    GlobalSettings: ElementEntry | null;
+    handleDragAndDrop: (items: { id: string; value: ElementEntry }[]) => void;
+    getSelectedComponent: () => ElementEntry | null;
+    mode: "edit" | "view";
+  }
+
+  let {
+    ComponentsInstance,
+    selectComponent,
+    GlobalSettings,
+    handleDragAndDrop,
+    getSelectedComponent,
+    mode,
+  }: CanvasProps = $props();
+  const globalSettings = $derived(GlobalSettings?.settings.values);
+
+  let items = $state(
+    untrack(() =>
+      Array.from(ComponentsInstance, ([id, value]) => ({ id, value })).filter(
+        (item) => item.id !== GLOBAL_KEY,
+      ),
+    ),
+  );
+
+  $effect(() => {
+    items = Array.from(ComponentsInstance, ([id, value]) => ({
+      id,
+      value,
+    })).filter((item) => item.id !== GLOBAL_KEY);
+  });
+
+  const handleDnd = (e: CustomEvent) => {
+    items = e.detail.items;
+    if (e.type === "finalize") {
+      handleDragAndDrop(items);
+    }
+  };
+</script>
+
+<section class="canvas-root">
+  <div
+    role="button"
+    tabindex="0"
+    class="canvas-container"
+    style="max-width: {frameWidth()}px; padding-top: {globalSettings?.paddingTop}px; padding-bottom: {globalSettings?.paddingBottom}px; padding-left: {globalSettings?.paddingLeft}px; padding-right: {globalSettings?.paddingRight}px; background: {globalSettings?.background};"
+    onclick={(e) => {
+      e.stopPropagation();
+      selectComponent(null);
+    }}
+    onkeydown={(e) => e.key === "Enter" && selectComponent(null)}
+  >
+    <div
+      class="components-wrapper"
+      use:dndzone={{ items }}
+      onconsider={handleDnd}
+      onfinalize={handleDnd}
+    >
+      {#each items as item (item.id)}
+        <div
+          role="button"
+          tabindex="0"
+          onclick={(e) => {
+            e.stopPropagation();
+            selectComponent(item.value);
+          }}
+          onkeydown={(e) => e.key === "Enter" && selectComponent(item.value)}
+          class={`canvas-item ${item.value.id === getSelectedComponent()?.id ? "selected" : ""}`}
+        >
+          <div
+            class="canvas-item-content"
+            style={mode === "edit" && !viewport.preview ? "pointer-events: none;" : ""}
+          >
+            <item.value.component settings={item.value.settings.values} />
+          </div>
+        </div>
+      {/each}
+    </div>
+  </div>
+</section>

package/dist/builder/canvas/canvas.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { ElementEntry } from "../../service";
+import type { SvelteMap } from "svelte/reactivity";
+import "./styles.css";
+interface CanvasProps {
+    ComponentsInstance: SvelteMap<string, ElementEntry>;
+    selectComponent: (component: ElementEntry | null) => void;
+    GlobalSettings: ElementEntry | null;
+    handleDragAndDrop: (items: {
+        id: string;
+        value: ElementEntry;
+    }[]) => void;
+    getSelectedComponent: () => ElementEntry | null;
+    mode: "edit" | "view";
+}
+declare const Canvas: import("svelte").Component<CanvasProps, {}, "">;
+type Canvas = ReturnType<typeof Canvas>;
+export default Canvas;

package/dist/builder/canvas/styles.css

@@ -0,0 +1,63 @@
+.canvas-root {
+	flex: 1;
+	background-color: var(--bg-base);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: flex-start;
+	box-sizing: border-box;
+	height: 100%;
+	overflow-y: auto;
+	padding: 28px 24px 40px;
+}
+
+.canvas-container {
+	flex: none;
+	width: 100%;
+	max-width: 1040px;
+	margin: 0 auto;
+	border-radius: 14px;
+	overflow: hidden;
+	box-shadow: var(--shadow-lg);
+	box-sizing: border-box;
+	color: #fff;
+}
+
+.components-wrapper {
+	position: relative;
+	min-height: 200px;
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	container-type: inline-size;
+	container-name: page;
+}
+
+.canvas-item {
+	display: block;
+	width: 100%;
+	position: relative;
+	cursor: pointer;
+	background: transparent;
+	border: none;
+	padding: 0;
+	text-align: left;
+	box-sizing: border-box;
+	outline: 2px dashed transparent;
+	outline-offset: -2px;
+	transition: outline-color 0.15s ease;
+}
+
+.canvas-item:hover {
+	outline-color: rgba(46, 107, 55, 0.45);
+}
+
+.canvas-item.selected {
+	outline-color: var(--accent);
+	outline-style: solid;
+}
+
+.canvas-item-content {
+	max-width: 100%;
+	overflow: visible;
+}

package/dist/builder/createBuilder.svelte.d.ts

@@ -0,0 +1,9 @@
+export interface CreateBuilderOptions {
+    data?: unknown;
+    save?: (state: unknown) => void | Promise<void>;
+    translate?: ((text: string, targetLang: string) => Promise<string>) | null;
+}
+export interface BuilderInstance {
+    destroy(): void;
+}
+export declare function createBuilder(target: HTMLElement, options?: CreateBuilderOptions): BuilderInstance;

package/dist/builder/createBuilder.svelte.js

@@ -0,0 +1,17 @@
+import { mount, unmount } from 'svelte';
+import BuilderView from './BuilderView.svelte';
+export function createBuilder(target, options = {}) {
+    const instance = mount(BuilderView, {
+        target,
+        props: {
+            data: options.data,
+            save: options.save,
+            translate: options.translate ?? null
+        }
+    });
+    return {
+        destroy() {
+            unmount(instance);
+        }
+    };
+}

package/dist/builder/index.d.ts

@@ -0,0 +1,8 @@
+import LeftBar from './leftbar/leftBar.svelte';
+import TopBar from './topbar/TopBar.svelte';
+import Canvas from './canvas/canvas.svelte';
+import RightBar from './rightbar/rightBar.svelte';
+export { LeftBar, TopBar, Canvas, RightBar };
+export { default as BuilderView } from './BuilderView.svelte';
+export { createBuilder } from './createBuilder.svelte';
+export type { CreateBuilderOptions, BuilderInstance } from './createBuilder.svelte';

package/dist/builder/index.js

@@ -0,0 +1,7 @@
+import LeftBar from './leftbar/leftBar.svelte';
+import TopBar from './topbar/TopBar.svelte';
+import Canvas from './canvas/canvas.svelte';
+import RightBar from './rightbar/rightBar.svelte';
+export { LeftBar, TopBar, Canvas, RightBar };
+export { default as BuilderView } from './BuilderView.svelte';
+export { createBuilder } from './createBuilder.svelte';