@websline/cms-view-utils 1.2.4 → 1.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/cms-view-utils",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "type": "module",
   "files": [
     "src",

package/src/components/AddBlockPlaceholder.svelte

@@ -6,6 +6,7 @@
 		class: className,
 		color = "#dadad8",
 		countBlockItems = 0,
+		disabled = false,
 		hoverBorderColor = "#D1CECA",
 		hoverColor = "#E7E5E1",
 		iconBackgroundColor = "#FFFFFF",
@@ -45,6 +46,8 @@
 	);
 
 	const handleClick = () => {
+		if (disabled) return;
+
 		notifyCMS(EVENTS.BLOCK_ADD, {
 			position: countBlockItems,
 		});
@@ -53,8 +56,10 @@
 
 <div>
 	<button
+		{disabled}
 		class={tw(
-			"group relative flex min-h-32 w-full cursor-pointer items-center justify-center rounded-lg transition-all duration-300",
+			"group relative flex min-h-32 w-full items-center justify-center rounded-lg transition-all duration-300",
+			disabled ? "cursor-not-allowed opacity-40" : "cursor-pointer",
 			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};`}

package/src/components/EditableBlock.svelte

@@ -7,6 +7,7 @@
 	import ImageText from "./skeleton/ImageText.svelte";
 
 	let {
+		autoTranslate,
 		barPosition,
 		block,
 		children,
@@ -45,9 +46,11 @@
 
 		switch (action) {
 			case CMS_ACTIONS.add:
+				if (autoTranslate) return;
 				notifyCMS(EVENTS.BLOCK_ADD, { position });
 				break;
 			case CMS_ACTIONS.delete:
+				if (isSynced) return;
 				notifyCMS(EVENTS.BLOCK_DELETE, {
 					draftBlockUuid: block.uuid,
 				});
@@ -64,6 +67,7 @@
 				});
 				break;
 			case CMS_ACTIONS.position:
+				if (autoTranslate) return;
 				notifyCMS(EVENTS.BLOCK_POSITION, {
 					draftBlockUuid: block.uuid,
 				});
@@ -79,6 +83,7 @@
 	};
 
 	let blockVisible = $derived(block?.meta?.visibility?.enabled);
+	let isSynced = $derived(autoTranslate && block?.meta?.sync?.isSynced);
 
 	let isHovered = $state(false);
 	let isActive = $state(false);
@@ -211,7 +216,10 @@
 		class:opacity-0={!toolbarVisible}>
 		<button
 			aria-label={t.addAria}
-			class="relative cursor-pointer"
+			class={[
+				"cursor-pointer",
+				(autoTranslate || isSynced) && "pointer-events-none opacity-40",
+			]}
 			onmouseenter={() => showTooltip("add")}
 			onmouseleave={hideTooltip}
 			onclick={(event) => handleClick(event, CMS_ACTIONS.add)}>
@@ -294,7 +302,7 @@
 
 		<!-- <button
 			aria-label="copy block"
-			class="cursor-pointer"
+			class={["cursor-pointer", isSynced && "pointer-events-none opacity-40"]}
 			onclick={(event) => handleClick(event, CMS_ACTIONS.copy)}>
 			<svg
 				width="24"
@@ -313,7 +321,10 @@
 
 		<button
 			aria-label={t.positionAria}
-			class="relative cursor-pointer"
+			class={[
+				"cursor-pointer",
+				(autoTranslate || isSynced) && "pointer-events-none opacity-40",
+			]}
 			onmouseenter={() => showTooltip("position")}
 			onmouseleave={hideTooltip}
 			onclick={(event) => handleClick(event, CMS_ACTIONS.position)}>
@@ -341,7 +352,7 @@
 
 		<button
 			aria-label={t.deleteAria}
-			class="relative cursor-pointer"
+			class={["cursor-pointer", isSynced && "pointer-events-none opacity-40"]}
 			onmouseenter={() => showTooltip("delete")}
 			onmouseleave={hideTooltip}
 			onclick={(event) => handleClick(event, CMS_ACTIONS.delete)}>