@websline/cms-view-utils 1.0.0-alpha.3 → 1.0.0-alpha.5

package/dist/previewBridge.global.js

@@ -1 +1 @@
-(()=>{var e={BLOCK_ADD:"BLOCK_ADD",BLOCK_DELETE:"BLOCK_DELETE",BLOCK_EDIT:"BLOCK_EDIT",BLOCK_SHOW:"BLOCK_SHOW",BLOCK_HIDE:"BLOCK_HIDE",SLUG_CHANGED:"SLUG_CHANGED",SLUG_ON_LOAD:"SLUG_ON_LOAD",IFRAME_DOM_LOADED:"IFRAME_DOM_LOADED",CURRENT_BLOCK_EDIT:"CURRENT_BLOCK_EDIT",SCROLL_TO_BLOCK:"SCROLL_TO_BLOCK"},_=(r,L={})=>{r&&window.parent!==window&&window.parent.postMessage({type:r,payload:L},"*")};(function(){if(window.parent===window||window.__PREVIEW_BRIDGE_INITIALIZED__)return;window.__PREVIEW_BRIDGE_INITIALIZED__=!0;let r=t=>t.metaKey||t.ctrlKey||t.shiftKey,L=t=>{let n=t.target.closest("a[href]");if(!n||n.target==="_blank"||r(t))return;let o=new URL(n.href,window.location.origin);o.origin===window.location.origin&&(t.preventDefault(),t.stopPropagation(),_(e.SLUG_CHANGED,{slug:o.pathname}))};document.addEventListener("click",L,!0),_(e.SLUG_ON_LOAD,{slug:window.location.pathname}),window.addEventListener("load",()=>{_(e.IFRAME_DOM_LOADED)});let c=t=>{let n=`[data-cms-block-id="${t}"]`,o=0,i=10,a=setInterval(()=>{let E=document.querySelector(n);E&&(E.scrollIntoView({behavior:"smooth",block:"center"}),clearInterval(a)),++o>=i&&clearInterval(a)},100)};window.addEventListener("message",t=>{let{type:n,payload:o}=t.data||{};if(n&&n===e.SCROLL_TO_BLOCK){let{draftBlockUuid:i}=o||{};if(!i)return;c(i)}})})();})();
+(()=>{var e={BLOCK_ADD:"BLOCK_ADD",BLOCK_DELETE:"BLOCK_DELETE",BLOCK_EDIT:"BLOCK_EDIT",BLOCK_POSITION:"BLOCK_POSITION",BLOCK_SHOW:"BLOCK_SHOW",BLOCK_HIDE:"BLOCK_HIDE",SLUG_CHANGED:"SLUG_CHANGED",SLUG_ON_LOAD:"SLUG_ON_LOAD",IFRAME_DOM_LOADED:"IFRAME_DOM_LOADED",CURRENT_BLOCK_EDIT:"CURRENT_BLOCK_EDIT",SCROLL_TO_BLOCK:"SCROLL_TO_BLOCK"},_=(r,L={})=>{r&&window.parent!==window&&window.parent.postMessage({type:r,payload:L},"*")};(function(){if(window.parent===window||window.__PREVIEW_BRIDGE_INITIALIZED__)return;window.__PREVIEW_BRIDGE_INITIALIZED__=!0;let r=t=>t.metaKey||t.ctrlKey||t.shiftKey,L=t=>{let n=t.target.closest("a[href]");if(!n||n.target==="_blank"||r(t))return;let o=new URL(n.href,window.location.origin);o.origin===window.location.origin&&(t.preventDefault(),t.stopPropagation(),_(e.SLUG_CHANGED,{slug:o.pathname}))};document.addEventListener("click",L,!0),_(e.SLUG_ON_LOAD,{slug:window.location.pathname}),window.addEventListener("load",()=>{_(e.IFRAME_DOM_LOADED)});let E=t=>{let n=`[data-cms-block-id="${t}"]`,o=0,i=10,O=setInterval(()=>{let a=document.querySelector(n);a&&(a.scrollIntoView({behavior:"smooth",block:"center"}),clearInterval(O)),++o>=i&&clearInterval(O)},100)};window.addEventListener("message",t=>{let{type:n,payload:o}=t.data||{};if(n&&n===e.SCROLL_TO_BLOCK){let{draftBlockUuid:i}=o||{};if(!i)return;E(i)}})})();})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/cms-view-utils",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.5",
   "type": "module",
   "files": [
     "src",
@@ -18,6 +18,9 @@
   "dependencies": {
     "jsonwebtoken": "^9.0.3"
   },
+  "devDependencies": {
+    "tsup": "^8.5.1"
+  },
   "peerDependencies": {
     "svelte": "^5.0.0"
   },

package/src/components/AddBlockPlaceholder.svelte

@@ -3,9 +3,15 @@
 
 	let {
 		class: className,
-		color = "#000fff",
-		textColor = "#F1F1F2",
-		label = "Ersten Block hinzufügen",
+		color = "#dadad8",
+		hoverColor = "#E7E5E1",
+		hoverBorderColor = "#D1CECA",
+		textColor = "#121110",
+		iconBackgroundColor = "#FFFFFF",
+		iconColor = "#121110",
+		label = "Hier das erste Element einfügen",
+		sublabel = "Füge über den Button einen neuen Block hinzu,um mit dem Bearbeiten der Page zu beginnen.",
+		sublabelColor = "#92908D",
 	} = $props();
 
 	const handleClick = () => {
@@ -13,37 +19,40 @@
 	};
 </script>
 
-<button
-	class={`group relative block min-h-32 w-full cursor-pointer rounded-lg transition-all duration-150 ${className}`}
-	style={`--block-color: ${color}; --block-text: ${textColor};`}
-	onclick={handleClick}>
-	<div
-		class="absolute inset-0 rounded-lg border-2 border-dashed transition-all duration-150 group-hover:opacity-60"
-		style="border-color: var(--block-color); opacity: 0.25;">
-	</div>
-
-	<div
-		class="absolute inset-0 rounded-lg transition-all duration-150 group-hover:opacity-10"
-		style="background: var(--block-color); opacity: 0;">
-	</div>
-
-	<div class="relative flex h-full w-full flex-col items-center justify-center gap-2">
+<div>
+	<button
+		class={`group relative flex min-h-32 w-full cursor-pointer items-center justify-center rounded-lg transition-all duration-300 ${className}`}
+		style={`--block-color: ${color}; --block-hover-color: ${hoverColor}; --block-hover-border-color: ${hoverBorderColor}; --block-text: ${textColor}; --block-icon-background: ${iconBackgroundColor}; --block-icon-color: ${iconColor}; --sublabel-color: ${sublabelColor};`}
+		onclick={handleClick}>
 		<div
-			class="flex h-10 w-10 items-center justify-center rounded-full border transition-all duration-150 group-hover:scale-110"
-			style="border-color: var(--block-color); color: var(--block-color);">
-			<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+			class="relative mx-auto flex max-w-md flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-[var(--block-color)] px-6 py-8 text-center transition-colors duration-300 group-hover:border-[var(--block-hover-border-color)] group-hover:bg-[var(--block-hover-color)]">
+			<svg
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg">
+				<path
+					class="fill-[var(--block-icon-background)]"
+					d="M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z"
+					fill="#FFFFFF" />
 				<path
-					d="M12 5V19M5 12H19"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round" />
+					class="stroke-[var(--block-icon-color)]"
+					d="M12.0231 6.6665L12.0092 17.3332M6.66675 11.9998H17.3334"
+					stroke="#121110"
+					stroke-width="1.5"
+					stroke-linecap="round"
+					stroke-linejoin="round" />
 			</svg>
-		</div>
 
-		<span
-			class="text-sm transition-opacity duration-150 group-hover:opacity-100"
-			style="color: var(--block-color);">
-			{label}
-		</span>
-	</div>
-</button>
+			<span
+				class="text-sm text-[var(--block-text)] transition-opacity duration-300 group-hover:opacity-100">
+				{label}
+			</span>
+			<span
+				class="text-sm text-[var(--sublabel-color)] transition-opacity duration-300 group-hover:opacity-100">
+				{sublabel}
+			</span>
+		</div>
+	</button>
+</div>

package/src/components/BlockWrapper.svelte

@@ -3,18 +3,18 @@
 
 	const defaultSpacingValues = {
 		bottom: {
-			none: "pb-0",
-			s: "pb-4",
-			m: "pb-12",
-			l: "pb-24",
-			xl: "pb-30",
+			none: "mb-0",
+			s: "mb-4",
+			m: "mb-12",
+			l: "mb-24",
+			xl: "mb-30",
 		},
 		top: {
-			none: "pt-0",
-			s: "pt-4",
-			m: "pt-12",
-			l: "pt-24",
-			xl: "pt-30",
+			none: "mt-0",
+			s: "mt-4",
+			m: "mt-12",
+			l: "mt-24",
+			xl: "mt-30",
 		},
 	};
 
@@ -34,8 +34,8 @@
 
 	let spacingClass = $derived(
 		[
-			spacingMap.top[spacingTop] ?? spacingMap.top.m,
-			spacingMap.bottom[spacingBottom] ?? spacingMap.bottom.m,
+			spacingMap.top[spacingTop] ?? spacingMap.top.none,
+			spacingMap.bottom[spacingBottom] ?? spacingMap.bottom.none,
 		].join(" "),
 	);
 

package/src/components/EditableBlock.svelte

@@ -52,6 +52,11 @@
 					draftBlockUuid: block.uuid,
 				});
 				break;
+			case CMS_ACTIONS.position:
+				notifyCMS(EVENTS.BLOCK_POSITION, {
+					draftBlockUuid: block.uuid,
+				});
+				break;
 			case CMS_ACTIONS.showBlock:
 				notifyCMS(EVENTS.BLOCK_SHOW, {
 					draftBlockUuid: block.uuid,

package/src/components/PageContent.svelte

@@ -0,0 +1,7 @@
+<script>
+	let { children, class: className } = $props();
+</script>
+
+<section class={`grid${className ? ` ${className}` : ""}`} data-cms-page-content>
+	{@render children?.()}
+</section>

package/src/components/Picture.svelte

@@ -1,6 +1,6 @@
 <script>
 	let {
-		className = "",
+		class: className,
 		decoding = "async",
 		image,
 		loading = "lazy",
@@ -82,6 +82,6 @@
 			height={data.fallbackFormat.height}
 			{loading}
 			{decoding}
-			class={`h-full w-full object-cover ${className}`} />
+			class={`h-full w-full object-cover${className ? ` ${className}` : ""}`} />
 	</picture>
 {/if}

package/src/index.js

@@ -3,4 +3,5 @@ export { isValid } from "./utils/blockValidation.js";
 export { default as AddBlockPlaceholder } from "./components/AddBlockPlaceholder.svelte";
 export { default as BlockWrapper } from "./components/BlockWrapper.svelte";
 export { default as EditableBlock } from "./components/EditableBlock.svelte";
+export { default as PageContent } from "./components/PageContent.svelte";
 export { default as Picture } from "./components/Picture.svelte";

package/src/utils/notify.js

@@ -2,6 +2,7 @@ const EVENTS = {
 	BLOCK_ADD: "BLOCK_ADD",
 	BLOCK_DELETE: "BLOCK_DELETE",
 	BLOCK_EDIT: "BLOCK_EDIT",
+	BLOCK_POSITION: "BLOCK_POSITION",
 	BLOCK_SHOW: "BLOCK_SHOW",
 	BLOCK_HIDE: "BLOCK_HIDE",
 	SLUG_CHANGED: "SLUG_CHANGED",