rimecms 0.26.6 → 0.26.8

package/dist/fields/toggle/component/Toggle.svelte

@@ -1,49 +1,49 @@
 <script lang="ts">
-	import { Field } from '../../../panel/components/fields/index.js';
-	import { root } from '../../../panel/components/fields/root.svelte.js';
-	import { Switch } from '../../../panel/components/ui/switch/index.js';
-	import { slugify } from '../../../util/string.js';
-	import type { ToggleProps } from './props';
+  import { Field } from '../../../panel/components/fields/index.js';
+  import { root } from '../../../panel/components/fields/root.svelte.js';
+  import { Switch } from '../../../panel/components/ui/switch/index.js';
+  import { slugify } from '../../../util/string.js';
+  import type { ToggleProps } from './props';
 
-	const { path, config, form }: ToggleProps = $props();
-	const field = $derived(form.useField<boolean>(path, config));
-	const inputId = $derived(slugify(`${form.key}-${path}`));
+  const { path, config, form }: ToggleProps = $props();
+  const field = $derived(form.useField<boolean>(path, config));
+  const inputId = $derived(slugify(`${form.key}-${path}`));
 
-	const onCheckedChange = (bool: boolean) => {
-		field.value = bool;
-	};
+  const onCheckedChange = (bool: boolean) => {
+    field.value = bool;
+  };
 </script>
 
 <fieldset class="rz-toggle-field {config.className || ''}" use:root={field}>
-	<div class="rz-toggle-field-wrap">
-		<Switch
-			data-error={field.error ? '' : null}
-			checked={field.value}
-			{onCheckedChange}
-			id={inputId}
-		/>
-		<Field.LabelFor {config} for={inputId} />
-	</div>
-	<Field.Hint {config} />
+  <div class="rz-toggle-field-wrap">
+    <Switch
+      data-error={field.error ? '' : null}
+      checked={field.value}
+      {onCheckedChange}
+      id={inputId}
+    />
+    <Field.LabelFor {config} for={inputId} />
+  </div>
+  <Field.Hint {config} />
 </fieldset>
 
 <style>
-	.rz-toggle-field-wrap {
-		display: flex;
-		align-items: center;
-	}
+  .rz-toggle-field-wrap {
+    display: flex;
+    align-items: center;
+  }
 
-	.rz-toggle-field-wrap > :global(* + *) {
-		margin-left: var(--rz-size-2);
-	}
+  .rz-toggle-field-wrap > :global(* + *) {
+    margin-left: var(--rz-size-2);
+  }
 
-	.rz-toggle-field {
-		margin-block: var(--rz-size-3);
-	}
+  .rz-toggle-field {
+    margin-block: var(--rz-size-3);
+  }
 
-	.rz-toggle-field :global {
-		.rz-field-hint {
-			margin-left: var(--rz-size-8);
-		}
-	}
+  .rz-toggle-field :global {
+    .rz-field-hint {
+      margin-left: var(--rz-size-8);
+    }
+  }
 </style>

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

@@ -1,39 +1,45 @@
 <script lang="ts">
-	import type { FieldBuilder } from '../../../core/fields/builders';
-	import { emptyValuesFromFieldConfig, isFormField } from '../../../core/fields/util';
-	import type { Field } from '../../types.js';
-	import Button from '../../../panel/components/ui/button/button.svelte';
+  import type { FieldBuilder } from '../../../core/fields/builders';
+  import { emptyValuesFromFieldConfig, isFormField } from '../../../core/fields/util';
+  import type { Field } from '../../types.js';
+  import Button from '../../../panel/components/ui/button/button.svelte';
 
-	import type { Dic } from '../../../util/types';
-	import { Plus } from '@lucide/svelte';
-	import type { Snippet } from 'svelte';
+  import type { Dic } from '../../../util/types';
+  import { Plus } from '@lucide/svelte';
+  import type { Snippet } from 'svelte';
 
-	type AddItem = (emptyValues: Dic) => void;
-	type Props = {
-		size: 'default' | 'sm';
-		class: string;
-		fields: FieldBuilder<Field>[];
-		addItem: AddItem;
-		children: Snippet;
-	};
-	const { class: className, fields, addItem, size, children }: Props = $props();
+  type AddItem = (emptyValues: Dic) => void;
+  type Props = {
+    size: 'default' | 'sm';
+    class: string;
+    fields: FieldBuilder<Field>[];
+    addItem: AddItem;
+    children: Snippet;
+  };
+  const { class: className, fields, addItem, size, children }: Props = $props();
 
-	const add = () => {
-		const empty = emptyValuesFromFieldConfig(fields.map((f) => f.raw).filter(isFormField));
-		addItem(empty);
-	};
+  const add = () => {
+    const empty = emptyValuesFromFieldConfig(fields.map((f) => f.raw).filter(isFormField));
+    addItem(empty);
+  };
 </script>
 
-<Button icon={Plus} class="rz-add-item-button {className}" onclick={() => add()} variant="outline" {size}>
-	<span>
-		{@render children()}
-	</span>
+<Button
+  icon={Plus}
+  class="rz-add-item-button {className}"
+  onclick={() => add()}
+  variant="outline"
+  {size}
+>
+  <span>
+    {@render children()}
+  </span>
 </Button>
 
 <style>
-	:global {
-		.rz-add-item-button {
-			gap: var(--rz-size-2);
-		}
-	}
+  :global {
+    .rz-add-item-button {
+      gap: var(--rz-size-2);
+    }
+  }
 </style>

package/dist/fields/tree/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/tree/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/tree/component/Tree.svelte

@@ -1,158 +1,158 @@
 <script lang="ts">
-	import { t__ } from '../../../core/i18n/index.js';
-	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 type { Dic } from '../../../util/types.js';
-	import { watch } from 'runed';
-	import Sortable from 'sortablejs';
-	import { onDestroy } from 'svelte';
-	import AddItemButton from './AddItemButton.svelte';
-	import type { TreeProps } from './props.js';
-	import TreeBlock from './TreeBlock.svelte';
-
-	const { path, config, form }: TreeProps = $props();
-
-	const locale = getLocaleContext();
-
-	const treeState = $derived(form.useTree(path));
-	const field = $derived(form.useField(path, config));
-	let sortingInitialized = $state(false);
-	let sorting = $state(false);
-	let sortableInstances = $state<ReturnType<typeof Sortable.create>[]>([]);
-
-	const hasBlocks = $derived(treeState.items && treeState.items.length);
-	const key = $state(new Date().getTime().toString());
-	const nested = $derived(path.split('.').length > 1);
-	const shouldInit = $derived(!sortingInitialized && treeState.items.length > 0);
-
-	const sortableOptions: Sortable.Options = {
-		handle: '.rz-tree-item__grip',
-		animation: 150,
-		swapThreshold: 0.93,
-		group: {
-			name: `list-${key}`,
-			put: (to, _, el) => {
-				if (!el.classList.contains('rz-tree-item')) return false;
-				const targetDepth = parseInt(to.el.dataset.treeDepth || '0');
-				const childrenCount = parseInt(el.dataset.treeChildren || '0');
-				return targetDepth + childrenCount <= config.maxDepth;
-			}
-		},
-		onStart: () => (sorting = true),
-		onUnchoose: () => (sorting = false),
-		onEnd: function (evt) {
-			const { newIndex, to } = evt;
-
-			//@ts-expect-error annoying
-			const initialPath = evt.item.__attributes['data-path'];
-			//@ts-expect-error annoying
-			const targetListPath = to.__attributes['data-path'];
-			const isTargetPathRoot = targetListPath === path;
-			const targetPath = `${targetListPath}${!isTargetPathRoot ? '._children' : ''}.${newIndex}`;
-
-			if (initialPath !== targetPath) {
-				treeState.moveItem(initialPath.replace(`${path}.`, ''), targetPath.replace(`${path}.`, ''));
-				resetSortable();
-			}
-
-			sorting = false;
-		}
-	};
-
-	const resetSortable = () => {
-		destroySortable();
-		sortingInitialized = false;
-	};
-
-	const destroySortable = () => {
-		sortableInstances.forEach((instance) => instance.destroy());
-		sortableInstances = [];
-	};
-
-	const add = (emptyValues: Dic) => {
-		treeState.addItem({
-			...emptyValues
-		});
-		resetSortable();
-	};
-
-	watch(() => treeState.stamp, resetSortable);
-
-	$effect(() => {
-		if (shouldInit) {
-			const lists = document.querySelectorAll(`.rz-tree__list[data-tree-key="${key}"]`);
-			for (const [index, list] of lists.entries()) {
-				sortableInstances[index] = Sortable.create(list as HTMLElement, sortableOptions);
-			}
-			sortingInitialized = true;
-		}
-	});
-
-	onDestroy(() => {
-		destroySortable();
-	});
+  import { t__ } from '../../../core/i18n/index.js';
+  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 type { Dic } from '../../../util/types.js';
+  import { watch } from 'runed';
+  import Sortable from 'sortablejs';
+  import { onDestroy } from 'svelte';
+  import AddItemButton from './AddItemButton.svelte';
+  import type { TreeProps } from './props.js';
+  import TreeBlock from './TreeBlock.svelte';
+
+  const { path, config, form }: TreeProps = $props();
+
+  const locale = getLocaleContext();
+
+  const treeState = $derived(form.useTree(path));
+  const field = $derived(form.useField(path, config));
+  let sortingInitialized = $state(false);
+  let sorting = $state(false);
+  let sortableInstances = $state<ReturnType<typeof Sortable.create>[]>([]);
+
+  const hasBlocks = $derived(treeState.items && treeState.items.length);
+  const key = $state(new Date().getTime().toString());
+  const nested = $derived(path.split('.').length > 1);
+  const shouldInit = $derived(!sortingInitialized && treeState.items.length > 0);
+
+  const sortableOptions: Sortable.Options = {
+    handle: '.rz-tree-item__grip',
+    animation: 150,
+    swapThreshold: 0.93,
+    group: {
+      name: `list-${key}`,
+      put: (to, _, el) => {
+        if (!el.classList.contains('rz-tree-item')) return false;
+        const targetDepth = parseInt(to.el.dataset.treeDepth || '0');
+        const childrenCount = parseInt(el.dataset.treeChildren || '0');
+        return targetDepth + childrenCount <= config.maxDepth;
+      }
+    },
+    onStart: () => (sorting = true),
+    onUnchoose: () => (sorting = false),
+    onEnd: function (evt) {
+      const { newIndex, to } = evt;
+
+      //@ts-expect-error annoying
+      const initialPath = evt.item.__attributes['data-path'];
+      //@ts-expect-error annoying
+      const targetListPath = to.__attributes['data-path'];
+      const isTargetPathRoot = targetListPath === path;
+      const targetPath = `${targetListPath}${!isTargetPathRoot ? '._children' : ''}.${newIndex}`;
+
+      if (initialPath !== targetPath) {
+        treeState.moveItem(initialPath.replace(`${path}.`, ''), targetPath.replace(`${path}.`, ''));
+        resetSortable();
+      }
+
+      sorting = false;
+    }
+  };
+
+  const resetSortable = () => {
+    destroySortable();
+    sortingInitialized = false;
+  };
+
+  const destroySortable = () => {
+    sortableInstances.forEach((instance) => instance.destroy());
+    sortableInstances = [];
+  };
+
+  const add = (emptyValues: Dic) => {
+    treeState.addItem({
+      ...emptyValues
+    });
+    resetSortable();
+  };
+
+  watch(() => treeState.stamp, resetSortable);
+
+  $effect(() => {
+    if (shouldInit) {
+      const lists = document.querySelectorAll(`.rz-tree__list[data-tree-key="${key}"]`);
+      for (const [index, list] of lists.entries()) {
+        sortableInstances[index] = Sortable.create(list as HTMLElement, sortableOptions);
+      }
+      sortingInitialized = true;
+    }
+  });
+
+  onDestroy(() => {
+    destroySortable();
+  });
 </script>
 
 <fieldset class="rz-field-tree {config.className}" use:root={field}>
-	<Field.Error error={field.error} />
-
-	<Field.Label {config} />
-	<Field.Hint {config} />
-	{#key treeState.stamp}
-		<div
-			class="rz-tree__list rz-tree__list--root"
-			data-tree-key={key}
-			data-tree-depth="0"
-			data-path={path}
-			data-empty={!hasBlocks ? '' : null}
-		>
-			{#if hasBlocks}
-				{#each treeState.items as item, index (item.id)}
-					<TreeBlock {treeState} treeKey={key} path="{path}.{index}" {form} {sorting} {config} />
-				{/each}
-			{/if}
-		</div>
-	{/key}
-
-	<div class="rz-tree__actions">
-		<AddItemButton
-			addItem={add}
-			class="rz-tree__add-button"
-			size={nested ? 'sm' : 'default'}
-			fields={config.fields}
-		>
-			{config.addItemLabel}
-		</AddItemButton>
-
-		{#if locale && locale.code !== locale.defaultCode && config.localized}
-			<Button size="sm" onclick={field.setValueFromDefaultLocale} variant="secondary">
-				{t__('fields.get_data_from')}
-				{locale.defaultCode}
-			</Button>
-		{/if}
-	</div>
+  <Field.Error error={field.error} />
+
+  <Field.Label {config} />
+  <Field.Hint {config} />
+  {#key treeState.stamp}
+    <div
+      class="rz-tree__list rz-tree__list--root"
+      data-tree-key={key}
+      data-tree-depth="0"
+      data-path={path}
+      data-empty={!hasBlocks ? '' : null}
+    >
+      {#if hasBlocks}
+        {#each treeState.items as item, index (item.id)}
+          <TreeBlock {treeState} treeKey={key} path="{path}.{index}" {form} {sorting} {config} />
+        {/each}
+      {/if}
+    </div>
+  {/key}
+
+  <div class="rz-tree__actions">
+    <AddItemButton
+      addItem={add}
+      class="rz-tree__add-button"
+      size={nested ? 'sm' : 'default'}
+      fields={config.fields}
+    >
+      {config.addItemLabel}
+    </AddItemButton>
+
+    {#if locale && locale.code !== locale.defaultCode && config.localized}
+      <Button size="sm" onclick={field.setValueFromDefaultLocale} variant="secondary">
+        {t__('fields.get_data_from')}
+        {locale.defaultCode}
+      </Button>
+    {/if}
+  </div>
 </fieldset>
 
 <style>
-	.rz-tree__list :global(.rz-tree__list) {
-		margin-left: 2rem;
-	}
-
-	.rz-field-tree {
-		:global(> .rz-label) {
-			margin-bottom: var(--rz-size-5);
-		}
-	}
-	.rz-tree__list {
-		display: grid;
-		margin-left: 1rem;
-	}
-
-	.rz-tree__actions {
-		display: flex;
-		align-items: center;
-		gap: var(--rz-size-3);
-	}
+  .rz-tree__list :global(.rz-tree__list) {
+    margin-left: 2rem;
+  }
+
+  .rz-field-tree {
+    :global(> .rz-label) {
+      margin-bottom: var(--rz-size-5);
+    }
+  }
+  .rz-tree__list {
+    display: grid;
+    margin-left: 1rem;
+  }
+
+  .rz-tree__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-3);
+  }
 </style>