rimecms 0.26.6 → 0.26.8

package/dist/fields/tree/component/TreeBlock.svelte

@@ -1,121 +1,121 @@
 <script lang="ts">
-	import type { TreeBlock } from '../../../core/types/doc.js';
-	import RenderFields from '../../../panel/components/fields/RenderFields.svelte';
-	import { useOnce } from '../../../panel/util/once.svelte.js';
-	import { GripVertical } from '@lucide/svelte';
-	import { extractFieldName } from '../util.js';
-	import TreeBlockComp from './TreeBlock.svelte';
-	import TreeBlockActions from './TreeBlockActions.svelte';
-	import type { TreeBlockProps } from './props.js';
-
-	const { config, treeKey, treeState, form, sorting = false, path }: TreeBlockProps = $props();
-
-	const depth = $derived(
-		path
-			.replace(`${treeState.path}.`, '')
-			.split('.')
-			.filter((str) => str !== '_children').length
-	);
-	const position = $derived(parseInt(path.split('.').pop() || '0'));
-	const itemValue = $derived(form.getValue<TreeBlock>(path));
-	const parentPath = $derived(path.split('.').slice(0, -1).join('.'));
-	const parentPathFormated = $derived.by(() => {
-		if (depth === 1) return '';
-		const [, relativePath] = extractFieldName(parentPath);
-		return (
-			relativePath
-				.split('.')
-				.filter((str) => str !== '_children')
-				.map((str) => parseInt(str) + 1)
-				.join('.') + '.'
-		);
-	});
-	let isOpen = $state(true);
-
-	const { once } = useOnce();
-
-	once(() => {
-		if (!itemValue) {
-			isOpen = true;
-		} else if (itemValue) {
-			isOpen = (localStorage.getItem(`${itemValue.id}:open`) || 'false') === 'true';
-		}
-	});
-
-	const toggleBlock = (e: MouseEvent) => {
-		if (e && e.stopPropagation) {
-			e.stopPropagation();
-		}
-		isOpen = !isOpen;
-		if (itemValue) {
-			localStorage.setItem(`${itemValue.id}:open`, isOpen.toString());
-		}
-	};
-
-	const renderBlockTitle = (position: string) => {
-		if (config.renderTitle) {
-			try {
-				const title = config.renderTitle({ position, values: itemValue || {} });
-				if (title) return title;
-			} catch (err) {
-				console.error(`Can't render title in treeBlock`, err);
-			}
-		}
-		return `${position} - ${config.label || config.name}`;
-	};
-
-	// $effect(() => {
-	// 	if (initialPath !== path) {
-	// 		form.setValue(path, itemValue);
-	// 		initialPath = path;
-	// 	}
-	// });
+  import type { TreeBlock } from '../../../core/types/doc.js';
+  import RenderFields from '../../../panel/components/fields/RenderFields.svelte';
+  import { useOnce } from '../../../panel/util/once.svelte.js';
+  import { GripVertical } from '@lucide/svelte';
+  import { extractFieldName } from '../util.js';
+  import TreeBlockComp from './TreeBlock.svelte';
+  import TreeBlockActions from './TreeBlockActions.svelte';
+  import type { TreeBlockProps } from './props.js';
+
+  const { config, treeKey, treeState, form, sorting = false, path }: TreeBlockProps = $props();
+
+  const depth = $derived(
+    path
+      .replace(`${treeState.path}.`, '')
+      .split('.')
+      .filter((str) => str !== '_children').length
+  );
+  const position = $derived(parseInt(path.split('.').pop() || '0'));
+  const itemValue = $derived(form.getValue<TreeBlock>(path));
+  const parentPath = $derived(path.split('.').slice(0, -1).join('.'));
+  const parentPathFormated = $derived.by(() => {
+    if (depth === 1) return '';
+    const [, relativePath] = extractFieldName(parentPath);
+    return (
+      relativePath
+        .split('.')
+        .filter((str) => str !== '_children')
+        .map((str) => parseInt(str) + 1)
+        .join('.') + '.'
+    );
+  });
+  let isOpen = $state(true);
+
+  const { once } = useOnce();
+
+  once(() => {
+    if (!itemValue) {
+      isOpen = true;
+    } else if (itemValue) {
+      isOpen = (localStorage.getItem(`${itemValue.id}:open`) || 'false') === 'true';
+    }
+  });
+
+  const toggleBlock = (e: MouseEvent) => {
+    if (e && e.stopPropagation) {
+      e.stopPropagation();
+    }
+    isOpen = !isOpen;
+    if (itemValue) {
+      localStorage.setItem(`${itemValue.id}:open`, isOpen.toString());
+    }
+  };
+
+  const renderBlockTitle = (position: string) => {
+    if (config.renderTitle) {
+      try {
+        const title = config.renderTitle({ position, values: itemValue || {} });
+        if (title) return title;
+      } catch (err) {
+        console.error(`Can't render title in treeBlock`, err);
+      }
+    }
+    return `${position} - ${config.label || config.name}`;
+  };
+
+  // $effect(() => {
+  // 	if (initialPath !== path) {
+  // 		form.setValue(path, itemValue);
+  // 		initialPath = path;
+  // 	}
+  // });
 </script>
 
 <div
-	data-path={path}
-	data-tree-children={itemValue?._children.length || 0}
-	data-sorting={sorting}
-	class="rz-tree-item"
+  data-path={path}
+  data-tree-children={itemValue?._children.length || 0}
+  data-sorting={sorting}
+  class="rz-tree-item"
 >
-	<div class="rz-tree-item__grip">
-		<GripVertical size={15} />
-	</div>
-
-	<div class="rz-tree-item__content" class:rz-tree-item__content--closed={!isOpen}>
-		<header class="rz-tree-item__header">
-			<button type="button" onclick={toggleBlock} class="rz-tree-item__title-button">
-				<div class="rz-tree-item__title">
-					{renderBlockTitle(`${parentPathFormated}${position + 1}`)}
-				</div>
-			</button>
-
-			<TreeBlockActions deleteItem={() => treeState.deleteItem(parentPath, position)} />
-		</header>
-
-		<div class="rz-tree-item__fields" class:rz-tree-item__fields--hidden={!isOpen}>
-			<RenderFields fields={config.fields} {path} {form} />
-		</div>
-	</div>
-
-	{#if depth <= config.maxDepth}
-		<div data-path={path} data-tree-depth={depth} data-tree-key={treeKey} class="rz-tree__list">
-			{#if itemValue && itemValue._children && itemValue._children.length}
-				{#each itemValue._children as child, index (child.id)}
-					<TreeBlockComp
-						{treeState}
-						{form}
-						{sorting}
-						{treeKey}
-						path="{path}._children.{index}"
-						{config}
-					/>
-				{/each}
-			{/if}
-		</div>
-	{:else}
-		<div class="rz-tree-item__list-placeholder"></div>
-	{/if}
+  <div class="rz-tree-item__grip">
+    <GripVertical size={15} />
+  </div>
+
+  <div class="rz-tree-item__content" class:rz-tree-item__content--closed={!isOpen}>
+    <header class="rz-tree-item__header">
+      <button type="button" onclick={toggleBlock} class="rz-tree-item__title-button">
+        <div class="rz-tree-item__title">
+          {renderBlockTitle(`${parentPathFormated}${position + 1}`)}
+        </div>
+      </button>
+
+      <TreeBlockActions deleteItem={() => treeState.deleteItem(parentPath, position)} />
+    </header>
+
+    <div class="rz-tree-item__fields" class:rz-tree-item__fields--hidden={!isOpen}>
+      <RenderFields fields={config.fields} {path} {form} />
+    </div>
+  </div>
+
+  {#if depth <= config.maxDepth}
+    <div data-path={path} data-tree-depth={depth} data-tree-key={treeKey} class="rz-tree__list">
+      {#if itemValue && itemValue._children && itemValue._children.length}
+        {#each itemValue._children as child, index (child.id)}
+          <TreeBlockComp
+            {treeState}
+            {form}
+            {sorting}
+            {treeKey}
+            path="{path}._children.{index}"
+            {config}
+          />
+        {/each}
+      {/if}
+    </div>
+  {:else}
+    <div class="rz-tree-item__list-placeholder"></div>
+  {/if}
 </div>
 
 <style>/**************************************/
@@ -125,87 +125,87 @@
 /**************************************/
 
 .rz-tree-item {
-		position: relative;
-	}
+    position: relative;
+  }
 
 .rz-tree-item__grip {
-		cursor: grab;
-		position: absolute;
-		top: 1rem;
-		left: -1rem;
-	}
+    cursor: grab;
+    position: absolute;
+    top: 1rem;
+    left: -1rem;
+  }
 
 .rz-tree-item__header:hover {
-		> :global(.rz-tree-item-actions) {
-			opacity: 1;
-			pointer-events: all;
-		}
-	}
+    > :global(.rz-tree-item-actions) {
+      opacity: 1;
+      pointer-events: all;
+    }
+  }
 
 .rz-tree-item__header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		border: var(--rz-border);
-		border-radius: var(--rz-radius-md) var(--rz-radius-md) 0 0;
-		padding: var(--rz-size-2) var(--rz-size-2) var(--rz-size-2) var(--rz-size-4);
-		height: var(--rz-row-height);
-		flex-direction: row;
-		background-color: hsl(var(--rz-row-bg));
-		width: 100%;
-	}
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border: var(--rz-border);
+    border-radius: var(--rz-radius-md) var(--rz-radius-md) 0 0;
+    padding: var(--rz-size-2) var(--rz-size-2) var(--rz-size-2) var(--rz-size-4);
+    height: var(--rz-row-height);
+    flex-direction: row;
+    background-color: hsl(var(--rz-row-bg));
+    width: 100%;
+  }
 
 .rz-tree-item__content--closed {
-		.rz-tree-item__header {
-			border-radius: var(--rz-radius-md);
-		}
-		&:global(:has(.rz-field-error)) {
-			box-shadow:
-		0 0 0 var(--rz-ring-offset, 0px) hsl(var(--rz-ring-offset-bg, var(--rz-gray-6)) / 1),
-		0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-alert) / var(--rz-ring-opacity, 1));
-		}
-	}
+    .rz-tree-item__header {
+      border-radius: var(--rz-radius-md);
+    }
+    &:global(:has(.rz-field-error)) {
+      box-shadow:
+    0 0 0 var(--rz-ring-offset, 0px) hsl(var(--rz-ring-offset-bg, var(--rz-gray-6)) / 1),
+    0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-alert) / var(--rz-ring-opacity, 1));
+    }
+  }
 
 .rz-tree-item__content + .rz-tree-item__list-placeholder,
-	.rz-tree-item__content + .rz-tree__list {
-		margin-top: 1rem;
-		min-height: 5px;
-	}
+  .rz-tree-item__content + .rz-tree__list {
+    margin-top: 1rem;
+    min-height: 5px;
+  }
 
 .rz-tree-item__title {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: var(--rz-size-2);
-	}
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--rz-size-2);
+  }
 
 .rz-tree-item__fields {
-		--rz-fields-padding: var(--rz-size-4);
-		background-color: var(--rz-collapse-fields-content-bg);
-		border: var(--rz-border);
-		border-top: none;
-		border-radius: 0 0 var(--rz-radius-md) (--rz-radius-md);
-		padding-top: max(var(--rz-fields-padding), var(--rz-size-4));
-		padding-bottom: max(var(--rz-fields-padding), var(--rz-size-4));
-		flex: 1;
-	}
+    --rz-fields-padding: var(--rz-size-4);
+    background-color: var(--rz-collapse-fields-content-bg);
+    border: var(--rz-border);
+    border-top: none;
+    border-radius: 0 0 var(--rz-radius-md) (--rz-radius-md);
+    padding-top: max(var(--rz-fields-padding), var(--rz-size-4));
+    padding-bottom: max(var(--rz-fields-padding), var(--rz-size-4));
+    flex: 1;
+  }
 
 .rz-tree-item__fields--hidden {
-		display: none;
-	}
+    display: none;
+  }
 
 .rz-tree-item[data-sorting='true'] .rz-tree-item__grip {
-		display: none;
-	}
+    display: none;
+  }
 
 .rz-tree-item__content--closed:has(:global(.rz-field-error)) {
-		box-shadow:
-		0 0 0 var(--rz-ring-offset, 0px) hsl(var(--rz-ring-offset-bg, var(--rz-gray-6)) / 1),
-		0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-alert) / var(--rz-ring-opacity, 1));
-	}
+    box-shadow:
+    0 0 0 var(--rz-ring-offset, 0px) hsl(var(--rz-ring-offset-bg, var(--rz-gray-6)) / 1),
+    0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-alert) / var(--rz-ring-opacity, 1));
+  }
 
 :global(.rz-tree-item-actions) {
-		opacity: 0;
-		pointer-events: none;
-	}
+    opacity: 0;
+    pointer-events: none;
+  }
 </style>

package/dist/fields/tree/component/TreeBlockActions.svelte

@@ -1,23 +1,23 @@
 <script lang="ts">
-	import { Trash2 } from '@lucide/svelte';
-	import { Button } from '../../../panel/components/ui/button/index.js';
+  import { Trash2 } from '@lucide/svelte';
+  import { Button } from '../../../panel/components/ui/button/index.js';
 
-	type Props = {
-		deleteItem: () => void;
-	};
+  type Props = {
+    deleteItem: () => void;
+  };
 
-	const { deleteItem }: Props = $props();
+  const { deleteItem }: Props = $props();
 </script>
 
 <div class="rz-tree-item-actions">
-	<Button variant="ghost" size="icon-sm" onclick={deleteItem}>
-		<Trash2 size={11} />
-	</Button>
+  <Button variant="ghost" size="icon-sm" onclick={deleteItem}>
+    <Trash2 size={11} />
+  </Button>
 </div>
 
 <style>
-	.rz-tree-item-actions {
-		display: flex;
-		gap: var(--rz-size-2);
-	}
+  .rz-tree-item-actions {
+    display: flex;
+    gap: var(--rz-size-2);
+  }
 </style>

package/dist/fields/tree/index.js

@@ -13,7 +13,7 @@ export class TreeBuilder extends FormFieldBuilder {
         this.field.defaultValue = [];
         this.field.isEmpty = (value) => !value || (Array.isArray(value) && value.length === 0);
         this.field.fields = [text('path').hidden(), number('position').hidden()];
-        this.field.maxDepth = 50;
+        this.field.maxDepth = 8;
         this.field.addItemLabel = 'Add an item';
     }
     get component() {
@@ -54,7 +54,8 @@ export class TreeBuilder extends FormFieldBuilder {
         this.field.fields = this.field.fields.map((field) => {
             // If it's a "position" or "path" field do not set as localized
             // as it's a treeBlock property
-            if (field instanceof FormFieldBuilder && ['position', 'path', 'locale'].includes(field.raw.name)) {
+            if (field instanceof FormFieldBuilder &&
+                ['position', 'path', 'locale'].includes(field.raw.name)) {
                 return field;
             }
             // For all others fields set as localized

package/dist/live.d.ts

@@ -1,3 +1,3 @@
-import LiveProvider from './panel/components/sections/live/Provider.svelte';
 import LiveConsumer from './panel/components/sections/live/Consumer.svelte';
-export { LiveProvider, LiveConsumer };
+import LiveProvider from './panel/components/sections/live/Provider.svelte';
+export { LiveConsumer, LiveProvider };

package/dist/live.js

@@ -1,3 +1,3 @@
-import LiveProvider from './panel/components/sections/live/Provider.svelte';
 import LiveConsumer from './panel/components/sections/live/Consumer.svelte';
-export { LiveProvider, LiveConsumer };
+import LiveProvider from './panel/components/sections/live/Provider.svelte';
+export { LiveConsumer, LiveProvider };

package/dist/panel/components/Root.svelte

@@ -1,62 +1,62 @@
 <script lang="ts">
-	import { page } from '$app/state';
-	import type { User } from '../../core/collections/auth/types.js';
-	import type { BuiltConfigClient } from '../../core/config/types.js';
-	import Nav from './ui/nav/Nav.svelte';
-	import { Toaster } from './ui/sonner';
-	import { setConfigContext } from '../context/config.svelte.js';
-	import createContext from '../context/createContext.svelte.js';
-	import { setLocaleContext } from '../context/locale.svelte.js';
-	import { setUserContext } from '../context/user.svelte.js';
-	import type { Route } from '../types.js';
-	import { onMount, type Snippet } from 'svelte';
-	import { API_PROXY, setAPIProxyContext } from '../context/api-proxy.svelte.js';
+  import { page } from '$app/state';
+  import type { User } from '../../core/collections/auth/types.js';
+  import type { BuiltConfigClient } from '../../core/config/types.js';
+  import Nav from './ui/nav/Nav.svelte';
+  import { Toaster } from './ui/sonner';
+  import { setConfigContext } from '../context/config.svelte.js';
+  import createContext from '../context/createContext.svelte.js';
+  import { setLocaleContext } from '../context/locale.svelte.js';
+  import { setUserContext } from '../context/user.svelte.js';
+  import type { Route } from '../types.js';
+  import { onMount, type Snippet } from 'svelte';
+  import { API_PROXY, setAPIProxyContext } from '../context/api-proxy.svelte.js';
 
-	type Props = {
-		routes: Record<string, Route[]>;
-		children: Snippet;
-		locale: string | undefined;
-		config: BuiltConfigClient;
-		user: User;
-	};
-	const { config, routes, children, locale: initialeLocale, user }: Props = $props();
+  type Props = {
+    routes: Record<string, Route[]>;
+    children: Snippet;
+    locale: string | undefined;
+    config: BuiltConfigClient;
+    user: User;
+  };
+  const { config, routes, children, locale: initialeLocale, user }: Props = $props();
 
-	let isCollapsed = $state(false);
-	let localeCollapsed = $state<string | null>(null);
+  let isCollapsed = $state(false);
+  let localeCollapsed = $state<string | null>(null);
 
-	// svelte-ignore state_referenced_locally
-	setConfigContext(config);
-	// svelte-ignore state_referenced_locally
-	setUserContext(user);
-	createContext('title', '[untitled]');
-	setAPIProxyContext(API_PROXY.ROOT);
+  // svelte-ignore state_referenced_locally
+  setConfigContext(config);
+  // svelte-ignore state_referenced_locally
+  setUserContext(user);
+  createContext('title', '[untitled]');
+  setAPIProxyContext(API_PROXY.ROOT);
 
-	const locale = $derived(setLocaleContext(initialeLocale));
+  const locale = $derived(setLocaleContext(initialeLocale));
 
-	function onResize() {
-		if (window.innerWidth < 1024) {
-			isCollapsed = true;
-		} else {
-			if (!localeCollapsed || localeCollapsed === 'false') {
-				isCollapsed = false;
-				localeCollapsed = 'false';
-			}
-		}
-	}
+  function onResize() {
+    if (window.innerWidth < 1024) {
+      isCollapsed = true;
+    } else {
+      if (!localeCollapsed || localeCollapsed === 'false') {
+        isCollapsed = false;
+        localeCollapsed = 'false';
+      }
+    }
+  }
 
-	const setCollapsed = (bool: boolean) => {
-		isCollapsed = bool;
-		localeCollapsed = bool.toString();
-		localStorage.setItem('rz-panel-collapsed', bool.toString());
-	};
+  const setCollapsed = (bool: boolean) => {
+    isCollapsed = bool;
+    localeCollapsed = bool.toString();
+    localStorage.setItem('rz-panel-collapsed', bool.toString());
+  };
 
-	onMount(() => {
-		localeCollapsed = localStorage.getItem('rz-panel-collapsed');
-		if (localeCollapsed) {
-			setCollapsed(localeCollapsed === 'true');
-		}
-		onResize();
-	});
+  onMount(() => {
+    localeCollapsed = localStorage.getItem('rz-panel-collapsed');
+    if (localeCollapsed) {
+      setCollapsed(localeCollapsed === 'true');
+    }
+    onResize();
+  });
 </script>
 
 <svelte:window on:resize={onResize} />
@@ -64,28 +64,28 @@
 <Toaster />
 
 <div class="rz-panel-root">
-	<Nav {setCollapsed} {routes} {isCollapsed} />
-	{#key `${page.url}${locale.code || ''}`}
-		<div class="rz-panel-root__right" class:rz-panel-root__right--navCollapsed={isCollapsed}>
-			{@render children()}
-		</div>
-	{/key}
+  <Nav {setCollapsed} {routes} {isCollapsed} />
+  {#key `${page.url}${locale.code || ''}`}
+    <div class="rz-panel-root__right" class:rz-panel-root__right--navCollapsed={isCollapsed}>
+      {@render children()}
+    </div>
+  {/key}
 </div>
 
 <style>
-	.rz-panel-root {
-		container-type: inline-size;
-		container-name: rz-panel;
-		font-family: var(--rz-font-sans);
-		background-color: hsl(var(--rz-color-bg));
-		min-height: 100vh;
-	}
+  .rz-panel-root {
+    container-type: inline-size;
+    container-name: rz-panel;
+    font-family: var(--rz-font-sans);
+    background-color: hsl(var(--rz-color-bg));
+    min-height: 100vh;
+  }
 
-	.rz-panel-root__right {
-		margin-left: var(--rz-size-72);
-	}
+  .rz-panel-root__right {
+    margin-left: var(--rz-size-72);
+  }
 
-	.rz-panel-root__right--navCollapsed {
-		margin-left: var(--rz-size-20);
-	}
+  .rz-panel-root__right--navCollapsed {
+    margin-left: var(--rz-size-20);
+  }
 </style>