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

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 (6) hide show
  1. package/dist/previewBridge.global.js +1 -1
  2. package/package.json +1 -1
  3. package/src/components/AddBlockPlaceholder.svelte +42 -33
  4. package/src/components/BlockWrapper.svelte +2 -2
  5. package/src/components/EditableBlock.svelte +5 -0
  6. package/src/utils/notify.js +1 -0
package/dist/previewBridge.global.js CHANGED
@@ -1 +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)}})})();})();
1
+ (()=>{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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@websline/cms-view-utils",
3
- "version": "1.0.0-alpha.4",
3
+ "version": "1.0.0-alpha.5",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "src",
package/src/components/AddBlockPlaceholder.svelte CHANGED
@@ -3,9 +3,15 @@
3
3
 
4
4
  let {
5
5
  class: className,
6
- color = "#000fff",
7
- textColor = "#F1F1F2",
8
- label = "Ersten Block hinzufügen",
6
+ color = "#dadad8",
7
+ hoverColor = "#E7E5E1",
8
+ hoverBorderColor = "#D1CECA",
9
+ textColor = "#121110",
10
+ iconBackgroundColor = "#FFFFFF",
11
+ iconColor = "#121110",
12
+ label = "Hier das erste Element einfügen",
13
+ sublabel = "Füge über den Button einen neuen Block hinzu,um mit dem Bearbeiten der Page zu beginnen.",
14
+ sublabelColor = "#92908D",
9
15
  } = $props();
10
16
 
11
17
  const handleClick = () => {
@@ -13,37 +19,40 @@
13
19
  };
14
20
  </script>
15
21
 
16
- <button
17
- class={`group relative block min-h-32 w-full cursor-pointer rounded-lg transition-all duration-150 ${className}`}
18
- style={`--block-color: ${color}; --block-text: ${textColor};`}
19
- onclick={handleClick}>
20
- <div
21
- class="absolute inset-0 rounded-lg border-2 border-dashed transition-all duration-150 group-hover:opacity-60"
22
- style="border-color: var(--block-color); opacity: 0.25;">
23
- </div>
24
-
25
- <div
26
- class="absolute inset-0 rounded-lg transition-all duration-150 group-hover:opacity-10"
27
- style="background: var(--block-color); opacity: 0;">
28
- </div>
29
-
30
- <div class="relative flex h-full w-full flex-col items-center justify-center gap-2">
22
+ <div>
23
+ <button
24
+ class={`group relative flex min-h-32 w-full cursor-pointer items-center justify-center rounded-lg transition-all duration-300 ${className}`}
25
+ 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};`}
26
+ onclick={handleClick}>
31
27
  <div
32
- class="flex h-10 w-10 items-center justify-center rounded-full border transition-all duration-150 group-hover:scale-110"
33
- style="border-color: var(--block-color); color: var(--block-color);">
34
- <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
28
+ 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)]">
29
+ <svg
30
+ width="24"
31
+ height="24"
32
+ viewBox="0 0 24 24"
33
+ fill="none"
34
+ xmlns="http://www.w3.org/2000/svg">
35
+ <path
36
+ class="fill-[var(--block-icon-background)]"
37
+ 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"
38
+ fill="#FFFFFF" />
35
39
  <path
36
- d="M12 5V19M5 12H19"
37
- stroke="currentColor"
38
- stroke-width="2"
39
- stroke-linecap="round" />
40
+ class="stroke-[var(--block-icon-color)]"
41
+ d="M12.0231 6.6665L12.0092 17.3332M6.66675 11.9998H17.3334"
42
+ stroke="#121110"
43
+ stroke-width="1.5"
44
+ stroke-linecap="round"
45
+ stroke-linejoin="round" />
40
46
  </svg>
41
- </div>
42
47
 
43
- <span
44
- class="text-sm transition-opacity duration-150 group-hover:opacity-100"
45
- style="color: var(--block-color);">
46
- {label}
47
- </span>
48
- </div>
49
- </button>
48
+ <span
49
+ class="text-sm text-[var(--block-text)] transition-opacity duration-300 group-hover:opacity-100">
50
+ {label}
51
+ </span>
52
+ <span
53
+ class="text-sm text-[var(--sublabel-color)] transition-opacity duration-300 group-hover:opacity-100">
54
+ {sublabel}
55
+ </span>
56
+ </div>
57
+ </button>
58
+ </div>
package/src/components/BlockWrapper.svelte CHANGED
@@ -34,8 +34,8 @@
34
34
 
35
35
  let spacingClass = $derived(
36
36
  [
37
- spacingMap.top[spacingTop] ?? spacingMap.top.m,
38
- spacingMap.bottom[spacingBottom] ?? spacingMap.bottom.m,
37
+ spacingMap.top[spacingTop] ?? spacingMap.top.none,
38
+ spacingMap.bottom[spacingBottom] ?? spacingMap.bottom.none,
39
39
  ].join(" "),
40
40
  );
41
41
 
package/src/components/EditableBlock.svelte CHANGED
@@ -52,6 +52,11 @@
52
52
  draftBlockUuid: block.uuid,
53
53
  });
54
54
  break;
55
+ case CMS_ACTIONS.position:
56
+ notifyCMS(EVENTS.BLOCK_POSITION, {
57
+ draftBlockUuid: block.uuid,
58
+ });
59
+ break;
55
60
  case CMS_ACTIONS.showBlock:
56
61
  notifyCMS(EVENTS.BLOCK_SHOW, {
57
62
  draftBlockUuid: block.uuid,
package/src/utils/notify.js CHANGED
@@ -2,6 +2,7 @@ const EVENTS = {
2
2
  BLOCK_ADD: "BLOCK_ADD",
3
3
  BLOCK_DELETE: "BLOCK_DELETE",
4
4
  BLOCK_EDIT: "BLOCK_EDIT",
5
+ BLOCK_POSITION: "BLOCK_POSITION",
5
6
  BLOCK_SHOW: "BLOCK_SHOW",
6
7
  BLOCK_HIDE: "BLOCK_HIDE",
7
8
  SLUG_CHANGED: "SLUG_CHANGED",