rimecms 0.26.7 → 0.26.9

package/dist/fields/blocks/component/Blocks.svelte

@@ -1,134 +1,134 @@
 <script lang="ts">
-	import { t__ } from '../../../core/i18n/index.js';
-	import type { GenericBlock } from '../../../core/types/doc.js';
-	import type { BlocksFieldBlock } from '../../types';
-	import { Field } from '../../../panel/components/fields/index.js';
-	import { root } from '../../../panel/components/fields/root.svelte.js';
-	import Button from '../../../panel/components/ui/button/button.svelte';
-	import { getLocaleContext } from '../../../panel/context/locale.svelte';
-	import { useSortable } from '../../../panel/util/Sortable.js';
-	import { capitalize } from '../../../util/string.js';
-	import { Download } from '@lucide/svelte';
-	import Sortable from 'sortablejs';
-	import { onDestroy } from 'svelte';
-	import AddBlockButton from './AddBlockButton.svelte';
-	import Block from './Block.svelte';
-	import type { BlocksProps } from './props.js';
-
-	const { path, config, form }: BlocksProps = $props();
-
-	let blockList: HTMLElement;
-
-	const field = $derived(form.useField(path, config));
-	const blockState = $derived(form.useBlocks(path));
-	const hasBlocks = $derived(blockState.blocks && blockState.blocks.length);
-	let sortingInitialized = $state(false);
-	let sorting = $state(false);
-	let sortableInstance = $state<any>(null);
-	let blocksComponents: ReturnType<typeof Block>[] = $state([]);
-
-	const locale = getLocaleContext();
-
-	// svelte-ignore state_referenced_locally
-	const sortableOptions: Sortable.Options = {
-		handle: '.rz-block__grip',
-		group: path,
-		animation: 150,
-		onStart: () => (sorting = true),
-		onUnchoose: () => (sorting = false),
-		onEnd: function (evt) {
-			const { oldIndex, newIndex } = evt;
-			if (oldIndex !== undefined && newIndex !== undefined) {
-				blockState.moveBlock(oldIndex, newIndex);
-			}
-			sorting = false;
-		}
-	};
-
-	const add = (options: Omit<GenericBlock, 'id' | 'path'>) => {
-		blockState.addBlock({
-			...options,
-			position: blockState.blocks.length
-		});
-	};
-
-	const shouldInit = $derived(!sortingInitialized && blockState.blocks.length > 0);
-	const { sortable } = useSortable(sortableOptions);
-
-	$effect(() => {
-		if (shouldInit) {
-			sortableInstance = sortable(blockList);
-			sortingInitialized = true;
-		}
-	});
-
-	function getConfigByBlockType(type: string): BlocksFieldBlock {
-		const blockConfig = config.blocks.find((b) => type === b.name);
-		if (!blockConfig) {
-			throw new Error(`Block configuration not found for type: ${type}`);
-		}
-		return blockConfig.block;
-	}
-
-	function collapseAll() {
-		blocksComponents.forEach((comp) => comp.setCollapse(true));
-	}
-	function expandAll() {
-		blocksComponents.forEach((comp) => comp.setCollapse(false));
-	}
-
-	onDestroy(() => {
-		if (sortableInstance) sortableInstance.destroy();
-	});
+  import { t__ } from '../../../core/i18n/index.js';
+  import type { GenericBlock } from '../../../core/types/doc.js';
+  import type { BlocksFieldBlock } from '../../types';
+  import { Field } from '../../../panel/components/fields/index.js';
+  import { root } from '../../../panel/components/fields/root.svelte.js';
+  import Button from '../../../panel/components/ui/button/button.svelte';
+  import { getLocaleContext } from '../../../panel/context/locale.svelte';
+  import { useSortable } from '../../../panel/util/Sortable.js';
+  import { capitalize } from '../../../util/string.js';
+  import { Download } from '@lucide/svelte';
+  import Sortable from 'sortablejs';
+  import { onDestroy } from 'svelte';
+  import AddBlockButton from './AddBlockButton.svelte';
+  import Block from './Block.svelte';
+  import type { BlocksProps } from './props.js';
+
+  const { path, config, form }: BlocksProps = $props();
+
+  let blockList: HTMLElement;
+
+  const field = $derived(form.useField(path, config));
+  const blockState = $derived(form.useBlocks(path));
+  const hasBlocks = $derived(blockState.blocks && blockState.blocks.length);
+  let sortingInitialized = $state(false);
+  let sorting = $state(false);
+  let sortableInstance = $state<any>(null);
+  let blocksComponents: ReturnType<typeof Block>[] = $state([]);
+
+  const locale = getLocaleContext();
+
+  // svelte-ignore state_referenced_locally
+  const sortableOptions: Sortable.Options = {
+    handle: '.rz-block__grip',
+    group: path,
+    animation: 150,
+    onStart: () => (sorting = true),
+    onUnchoose: () => (sorting = false),
+    onEnd: function (evt) {
+      const { oldIndex, newIndex } = evt;
+      if (oldIndex !== undefined && newIndex !== undefined) {
+        blockState.moveBlock(oldIndex, newIndex);
+      }
+      sorting = false;
+    }
+  };
+
+  const add = (options: Omit<GenericBlock, 'id' | 'path'>) => {
+    blockState.addBlock({
+      ...options,
+      position: blockState.blocks.length
+    });
+  };
+
+  const shouldInit = $derived(!sortingInitialized && blockState.blocks.length > 0);
+  const { sortable } = useSortable(sortableOptions);
+
+  $effect(() => {
+    if (shouldInit) {
+      sortableInstance = sortable(blockList);
+      sortingInitialized = true;
+    }
+  });
+
+  function getConfigByBlockType(type: string): BlocksFieldBlock {
+    const blockConfig = config.blocks.find((b) => type === b.name);
+    if (!blockConfig) {
+      throw new Error(`Block configuration not found for type: ${type}`);
+    }
+    return blockConfig.block;
+  }
+
+  function collapseAll() {
+    blocksComponents.forEach((comp) => comp.setCollapse(true));
+  }
+  function expandAll() {
+    blocksComponents.forEach((comp) => comp.setCollapse(false));
+  }
+
+  onDestroy(() => {
+    if (sortableInstance) sortableInstance.destroy();
+  });
 </script>
 
 <fieldset class="rz-field-blocks {config.className || ''}" use:root={field}>
-	<Field.Error error={field.error} />
-
-	<header class="rz-blocks__header">
-		<div>
-			<h3 class="rz-blocks__title">
-				{config.label ? config.label : capitalize(config.name)}
-				{#if config.localized}
-					<sup>{locale.code}</sup>
-				{/if}
-			</h3>
-			<Field.Hint {config} />
-		</div>
-		{#if hasBlocks}
-			<div class="rz-blocks__actions">
-				<Button onclick={collapseAll} size="xs" variant="outline">Collapse all</Button>
-				<Button onclick={expandAll} size="xs" variant="outline">Expand all</Button>
-			</div>
-		{/if}
-	</header>
-
-	<div class="rz-blocks__list" data-empty={!hasBlocks ? '' : null} bind:this={blockList}>
-		{#if hasBlocks}
-			{#each blockState.blocks as block, index (block.id)}
-				<Block
-					bind:this={blocksComponents[index]}
-					deleteBlock={() => blockState.deleteBlock(index)}
-					duplicateBlock={() => blockState.duplicateBlock(index)}
-					{form}
-					{sorting}
-					path="{path}.{index}:{block.type}"
-					config={getConfigByBlockType(block.type)}
-				/>
-			{/each}
-		{/if}
-	</div>
-
-	<div class="rz-blocks__actions-bottom">
-		<AddBlockButton addBlock={add} {config} />
-
-		{#if locale && locale.code !== locale.defaultCode && config.localized}
-			<Button icon={Download} size="sm" onclick={field.setValueFromDefaultLocale} variant="text">
-				{t__('fields.get_data_from')}
-				{locale.defaultCode}
-			</Button>
-		{/if}
-	</div>
+  <Field.Error error={field.error} />
+
+  <header class="rz-blocks__header">
+    <div>
+      <h3 class="rz-blocks__title">
+        {config.label ? config.label : capitalize(config.name)}
+        {#if config.localized}
+          <sup>{locale.code}</sup>
+        {/if}
+      </h3>
+      <Field.Hint {config} />
+    </div>
+    {#if hasBlocks}
+      <div class="rz-blocks__actions">
+        <Button onclick={collapseAll} size="xs" variant="outline">Collapse all</Button>
+        <Button onclick={expandAll} size="xs" variant="outline">Expand all</Button>
+      </div>
+    {/if}
+  </header>
+
+  <div class="rz-blocks__list" data-empty={!hasBlocks ? '' : null} bind:this={blockList}>
+    {#if hasBlocks}
+      {#each blockState.blocks as block, index (block.id)}
+        <Block
+          bind:this={blocksComponents[index]}
+          deleteBlock={() => blockState.deleteBlock(index)}
+          duplicateBlock={() => blockState.duplicateBlock(index)}
+          {form}
+          {sorting}
+          path="{path}.{index}:{block.type}"
+          config={getConfigByBlockType(block.type)}
+        />
+      {/each}
+    {/if}
+  </div>
+
+  <div class="rz-blocks__actions-bottom">
+    <AddBlockButton addBlock={add} {config} />
+
+    {#if locale && locale.code !== locale.defaultCode && config.localized}
+      <Button icon={Download} size="sm" onclick={field.setValueFromDefaultLocale} variant="text">
+        {t__('fields.get_data_from')}
+        {locale.defaultCode}
+      </Button>
+    {/if}
+  </div>
 </fieldset>
 
 <style>/**************************************/
@@ -138,42 +138,42 @@
 /**************************************/
 
 .rz-blocks__title {
-		font-variation-settings: 'wght' 500;
-		font-weight: 500;
-	}
+    font-variation-settings: 'wght' 500;
+    font-weight: 500;
+  }
 
 sup {
-		font-size: var(--rz-text-2xs);
-		text-transform: uppercase;
-	}
+    font-size: var(--rz-text-2xs);
+    text-transform: uppercase;
+  }
 
 .rz-blocks__actions {
-		/* translate: 0 calc(-1 * var(--rz-size-2)); */
-		display: flex;
-		align-items: end;
-		gap: var(--rz-size-2);
-	}
+    /* translate: 0 calc(-1 * var(--rz-size-2)); */
+    display: flex;
+    align-items: end;
+    gap: var(--rz-size-2);
+  }
 
 .rz-blocks__list {
-		display: grid;
-		gap: var(--rz-size-4);
+    display: grid;
+    gap: var(--rz-size-4);
 
-		&:not([data-empty]) {
-			margin-bottom: var(--rz-size-4);
-		}
-	}
+    &:not([data-empty]) {
+      margin-bottom: var(--rz-size-4);
+    }
+  }
 
 .rz-blocks__header {
-		display: flex;
-		justify-content: space-between;
-		margin-bottom: var(--rz-size-4);
-	}
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: var(--rz-size-4);
+  }
 
 .rz-blocks__actions-bottom {
-		display: flex;
-		gap: var(--rz-size-3);
-		padding-right: var(--rz-size-3);
-		align-items: center;
-		justify-content: space-between;
-	}
+    display: flex;
+    gap: var(--rz-size-3);
+    padding-right: var(--rz-size-3);
+    align-items: center;
+    justify-content: space-between;
+  }
 </style>

package/dist/fields/blocks/component/Cell.svelte

@@ -1,23 +1,23 @@
 <script lang="ts">
-	type Dic = Record<string, any>;
+  type Dic = Record<string, any>;
 
-	type Props = {
-		value: Dic | null;
-	};
+  type Props = {
+    value: Dic | null;
+  };
 
-	const { value }: Props = $props();
+  const { value }: Props = $props();
 
-	const blockCount = $derived(value ? value.length : 0);
-	const blockLabel = $derived(blockCount === 1 ? 'block' : 'blocks');
+  const blockCount = $derived(value ? value.length : 0);
+  const blockLabel = $derived(blockCount === 1 ? 'block' : 'blocks');
 </script>
 
 <div class="rz-blocks-cell">
-	{blockCount}
-	{blockLabel}
+  {blockCount}
+  {blockLabel}
 </div>
 
 <style>
-	.rz-blocks-cell {
-		min-width: var(--rz-size-24);
-	}
+  .rz-blocks-cell {
+    min-width: var(--rz-size-24);
+  }
 </style>

package/dist/fields/blocks/component/ToggleBlockButton.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { ChevronDown, ChevronUp } from '@lucide/svelte';
+  import { ChevronDown, ChevronUp } from '@lucide/svelte';
 
-	type Props = { toggle: any; isOpen: boolean };
-	const { toggle, isOpen }: Props = $props();
+  type Props = { toggle: any; isOpen: boolean };
+  const { toggle, isOpen }: Props = $props();
 </script>
 
 <button class="rz-toggle-block" type="button" onclick={toggle}>
-	{#if isOpen}
-		<ChevronUp size="12" />
-	{:else}
-		<ChevronDown size="12" />
-	{/if}
+  {#if isOpen}
+    <ChevronUp size="12" />
+  {:else}
+    <ChevronDown size="12" />
+  {/if}
 </button>
 
 <style>
-	button {
-		padding: var(--rz-size-2);
-	}
+  button {
+    padding: var(--rz-size-2);
+  }
 </style>

package/dist/fields/checkbox/component/Checkbox.svelte

@@ -1,68 +1,68 @@
 <script lang="ts">
-	import { Field } from '../../../panel/components/fields/index.js';
-	import { root } from '../../../panel/components/fields/root.svelte.js';
-	import { Checkbox } from '../../../panel/components/ui/checkbox/index.js';
-	import { slugify } from '../../../util/string.js';
-	import type { CheckboxProps } from './props';
+  import { Field } from '../../../panel/components/fields/index.js';
+  import { root } from '../../../panel/components/fields/root.svelte.js';
+  import { Checkbox } from '../../../panel/components/ui/checkbox/index.js';
+  import { slugify } from '../../../util/string.js';
+  import type { CheckboxProps } from './props';
 
-	const { path, config, form }: CheckboxProps = $props();
+  const { path, config, form }: CheckboxProps = $props();
 
-	const field = $derived(form.useField<boolean>(path, config));
+  const field = $derived(form.useField<boolean>(path, config));
 
-	const onCheckedChange = (bool: boolean) => {
-		field.value = bool;
-	};
+  const onCheckedChange = (bool: boolean) => {
+    field.value = bool;
+  };
 
-	const checkboxErrorClass = $derived(field.error ? 'rz-checkbox--error' : '');
-	const inputId = $derived(`${form.key}-${slugify(path)}`);
+  const checkboxErrorClass = $derived(field.error ? 'rz-checkbox--error' : '');
+  const inputId = $derived(`${form.key}-${slugify(path)}`);
 </script>
 
 <fieldset class="rz-checkbox-field {config.className || ''}" use:root={field}>
-	<div>
-		<Checkbox
-			class="rz-checkbox-field__input {checkboxErrorClass}"
-			checked={field.value}
-			{onCheckedChange}
-			id={inputId}
-		/>
-		<Field.LabelFor {config} for={inputId} />
-	</div>
-	<Field.Hint {config} />
+  <div>
+    <Checkbox
+      class="rz-checkbox-field__input {checkboxErrorClass}"
+      checked={field.value}
+      {onCheckedChange}
+      id={inputId}
+    />
+    <Field.LabelFor {config} for={inputId} />
+  </div>
+  <Field.Hint {config} />
 </fieldset>
 
 <style>
-	.rz-checkbox-field {
-		margin-top: var(--rz-size-3);
-		margin-bottom: var(--rz-size-3);
+  .rz-checkbox-field {
+    margin-top: var(--rz-size-3);
+    margin-bottom: var(--rz-size-3);
 
-		:global {
-			.rz-field-hint {
-				margin-left: var(--rz-size-7);
-			}
-		}
-	}
+    :global {
+      .rz-field-hint {
+        margin-left: var(--rz-size-7);
+      }
+    }
+  }
 
-	.rz-checkbox-field > div {
-		display: flex;
-		align-items: center;
-		gap: var(--rz-size-2);
-	}
+  .rz-checkbox-field > div {
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-2);
+  }
 
-	:global {
-		.rz-render-fields__field[data-type='checkbox']
-			+ .rz-render-fields__field[data-type='checkbox'] {
-			.rz-checkbox-field {
-				margin-top: 0;
-			}
-		}
-	}
+  :global {
+    .rz-render-fields__field[data-type='checkbox']
+      + .rz-render-fields__field[data-type='checkbox'] {
+      .rz-checkbox-field {
+        margin-top: 0;
+      }
+    }
+  }
 
-	.rz-checkbox-field__input {
-		width: var(--rz-size-5);
-		height: var(--rz-size-5);
-	}
+  .rz-checkbox-field__input {
+    width: var(--rz-size-5);
+    height: var(--rz-size-5);
+  }
 
-	.rz-checkbox--error {
-		background-color: hsl(var(--rz-color-alert));
-	}
+  .rz-checkbox--error {
+    background-color: hsl(var(--rz-color-alert));
+  }
 </style>