rimecms 0.26.7 → 0.26.9

package/dist/fields/select/component/Select.svelte

@@ -1,154 +1,154 @@
 <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 * as Command from '../../../panel/components/ui/command/index.js';
-	import Tag from '../../../panel/components/ui/tag/tag.svelte';
-	import { useSortable } from '../../../panel/util/Sortable.js';
-	import { moveItem } from '../../../util/array';
-	import type { SelectFieldProps } from './props.js';
-
-	const { path, config, form }: SelectFieldProps = $props();
-
-	let listHTMLElement: HTMLElement;
-	let initialized = false;
-	let options = $derived(config.options);
-	const validValues = $derived(config.options.map((o) => o.value));
-	const field = $derived(form.useField<string | string[]>(path, config));
-
-	let isFull = $derived.by(() => {
-		if (!field.value) return false;
-		const notManyAndOneSelected = !config.many && typeof field.value === 'string';
-		const manyAndAllSelected = config.many && field.value.length === config.options.length;
-		return notManyAndOneSelected || manyAndAllSelected;
-	});
-
-	let search = $state('');
-	let inputFocused = $state(false);
-
-	const { sortable } = useSortable({
-		animation: 150,
-		draggable: '.rz-select__option',
-		onEnd: function (e) {
-			if (e.oldIndex !== undefined && e.newIndex !== undefined) {
-				onOrderChange(e.oldIndex, e.newIndex);
-			}
-		}
-	});
-
-	$effect(() => {
-		if (config.many) {
-			sortable(listHTMLElement);
-		}
-	});
-
-	$effect(() => {
-		if (config.many) {
-			if (field.value && Array.isArray(field.value) && !initialized) {
-				field.value = field.value.filter((val: string) => validValues.includes(val));
-			}
-		} else if (typeof field.value === 'string') {
-			if (field.value && !initialized) {
-				field.value = validValues.includes(field.value) ? field.value : null;
-			}
-		}
-		initialized = true;
-	});
-
-	$effect(() => {
-		if (config.many) {
-			const currentValue = $state.snapshot(field.value);
-			if (!currentValue) {
-				options = config.options;
-			} else {
-				options = config.options.filter((option) => !currentValue.includes(option.value));
-			}
-		}
-	});
-
-	const onOrderChange = (oldIndex: number, newIndex: number) => {
-		if (!Array.isArray(field.value)) return;
-		field.value = moveItem(field.value, oldIndex, newIndex);
-	};
-
-	const addValue = (val: string) => {
-		if (isFull) return;
-		if (config.many) {
-			field.value = [...(field.value || []), val];
-		} else {
-			field.value = val;
-		}
-	};
-
-	const removeValue = (val?: string) => {
-		if (config.many) {
-			field.value = [...(field.value || [])].filter((v) => v !== val);
-		} else {
-			field.value = null;
-		}
-	};
+  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 * as Command from '../../../panel/components/ui/command/index.js';
+  import Tag from '../../../panel/components/ui/tag/tag.svelte';
+  import { useSortable } from '../../../panel/util/Sortable.js';
+  import { moveItem } from '../../../util/array';
+  import type { SelectFieldProps } from './props.js';
+
+  const { path, config, form }: SelectFieldProps = $props();
+
+  let listHTMLElement: HTMLElement;
+  let initialized = false;
+  let options = $derived(config.options);
+  const validValues = $derived(config.options.map((o) => o.value));
+  const field = $derived(form.useField<string | string[]>(path, config));
+
+  let isFull = $derived.by(() => {
+    if (!field.value) return false;
+    const notManyAndOneSelected = !config.many && typeof field.value === 'string';
+    const manyAndAllSelected = config.many && field.value.length === config.options.length;
+    return notManyAndOneSelected || manyAndAllSelected;
+  });
+
+  let search = $state('');
+  let inputFocused = $state(false);
+
+  const { sortable } = useSortable({
+    animation: 150,
+    draggable: '.rz-select__option',
+    onEnd: function (e) {
+      if (e.oldIndex !== undefined && e.newIndex !== undefined) {
+        onOrderChange(e.oldIndex, e.newIndex);
+      }
+    }
+  });
+
+  $effect(() => {
+    if (config.many) {
+      sortable(listHTMLElement);
+    }
+  });
+
+  $effect(() => {
+    if (config.many) {
+      if (field.value && Array.isArray(field.value) && !initialized) {
+        field.value = field.value.filter((val: string) => validValues.includes(val));
+      }
+    } else if (typeof field.value === 'string') {
+      if (field.value && !initialized) {
+        field.value = validValues.includes(field.value) ? field.value : null;
+      }
+    }
+    initialized = true;
+  });
+
+  $effect(() => {
+    if (config.many) {
+      const currentValue = $state.snapshot(field.value);
+      if (!currentValue) {
+        options = config.options;
+      } else {
+        options = config.options.filter((option) => !currentValue.includes(option.value));
+      }
+    }
+  });
+
+  const onOrderChange = (oldIndex: number, newIndex: number) => {
+    if (!Array.isArray(field.value)) return;
+    field.value = moveItem(field.value, oldIndex, newIndex);
+  };
+
+  const addValue = (val: string) => {
+    if (isFull) return;
+    if (config.many) {
+      field.value = [...(field.value || []), val];
+    } else {
+      field.value = val;
+    }
+  };
+
+  const removeValue = (val?: string) => {
+    if (config.many) {
+      field.value = [...(field.value || [])].filter((v) => v !== val);
+    } else {
+      field.value = null;
+    }
+  };
 </script>
 
 <fieldset class="rz-field-select {config.className || ''}" use:root={field}>
-	<Field.Label for={path || config.name} {config} />
-	<Field.Error error={field.error} />
-
-	<div class="rz-select">
-		<Command.Root>
-			<div
-				bind:this={listHTMLElement}
-				class="rz-select__list"
-				class:rz-select__list--readonly={form.readOnly}
-				data-focused={inputFocused ? '' : null}
-				data-error={field.error ? '' : null}
-			>
-				{#if config.many}
-					{#each field.value || [] as val (val)}
-						{@const option = config.options.find((o) => o.value === val)}
-						{#if option}
-							<Tag onRemove={() => removeValue(option.value)} readOnly={form.readOnly}>
-								{option.label}
-							</Tag>
-						{/if}
-					{/each}
-				{:else if field.value}
-					{@const option = config.options.filter((o) => o.value === field.value)[0]}
-					{#if option}
-						<Tag onRemove={() => removeValue()} readOnly={form.readOnly}>
-							{option.label}
-						</Tag>
-					{/if}
-				{/if}
-
-				{#if !form.readOnly && !isFull}
-					<Command.InputSelect
-						name={path || config.name}
-						autocomplete="off"
-						onfocus={() => (inputFocused = true)}
-						onblur={() => setTimeout(() => (inputFocused = false), 200)}
-						bind:value={search}
-						placeholder={t__('common.search')}
-					/>
-					{#if inputFocused}
-						<Command.List>
-							{#each options as option, index (index)}
-								<Command.Item
-									value={option.value}
-									onSelect={() => {
-										addValue(option.value);
-										search = '';
-									}}
-								>
-									<span>{option.label}</span>
-								</Command.Item>
-							{/each}
-						</Command.List>
-					{/if}
-				{/if}
-			</div>
-		</Command.Root>
-	</div>
-	<Field.Hint {config} />
+  <Field.Label for={path || config.name} {config} />
+  <Field.Error error={field.error} />
+
+  <div class="rz-select">
+    <Command.Root>
+      <div
+        bind:this={listHTMLElement}
+        class="rz-select__list"
+        class:rz-select__list--readonly={form.readOnly}
+        data-focused={inputFocused ? '' : null}
+        data-error={field.error ? '' : null}
+      >
+        {#if config.many}
+          {#each field.value || [] as val (val)}
+            {@const option = config.options.find((o) => o.value === val)}
+            {#if option}
+              <Tag onRemove={() => removeValue(option.value)} readOnly={form.readOnly}>
+                {option.label}
+              </Tag>
+            {/if}
+          {/each}
+        {:else if field.value}
+          {@const option = config.options.filter((o) => o.value === field.value)[0]}
+          {#if option}
+            <Tag onRemove={() => removeValue()} readOnly={form.readOnly}>
+              {option.label}
+            </Tag>
+          {/if}
+        {/if}
+
+        {#if !form.readOnly && !isFull}
+          <Command.InputSelect
+            name={path || config.name}
+            autocomplete="off"
+            onfocus={() => (inputFocused = true)}
+            onblur={() => setTimeout(() => (inputFocused = false), 200)}
+            bind:value={search}
+            placeholder={t__('common.search')}
+          />
+          {#if inputFocused}
+            <Command.List>
+              {#each options as option, index (index)}
+                <Command.Item
+                  value={option.value}
+                  onSelect={() => {
+                    addValue(option.value);
+                    search = '';
+                  }}
+                >
+                  <span>{option.label}</span>
+                </Command.Item>
+              {/each}
+            </Command.List>
+          {/if}
+        {/if}
+      </div>
+    </Command.Root>
+  </div>
+  <Field.Hint {config} />
 </fieldset>
 
 <style>/**************************************/
@@ -158,59 +158,59 @@
 /**************************************/
 
 .rz-select {
-		margin-bottom: var(--rz-size-2);
-		position: relative;
-
-		:global(.rz-command) {
-			width: 100%;
-			border-radius: var(--rz-radius-md);
-		}
-
-		:global(.rz-command-input-select) {
-			cursor: text;
-		}
-
-		:global(.rz-command-list) {
-			background-color: hsl(var(--rz-input-bg));
-			border: var(--rz-border);
-			border-radius: var(--rz-radius-md);
-			position: absolute;
-			left: 0;
-			right: 0;
-			top: var(--rz-size-12);
-			z-index: 20;
-			box-shadow: var(--rz-shadow-md);
-		}
-
-		:global(.rz-command-item) {
-			height: var(--rz-size-10);
-		}
-	}
+    margin-bottom: var(--rz-size-2);
+    position: relative;
+
+    :global(.rz-command) {
+      width: 100%;
+      border-radius: var(--rz-radius-md);
+    }
+
+    :global(.rz-command-input-select) {
+      cursor: text;
+    }
+
+    :global(.rz-command-list) {
+      background-color: hsl(var(--rz-input-bg));
+      border: var(--rz-border);
+      border-radius: var(--rz-radius-md);
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: var(--rz-size-12);
+      z-index: 20;
+      box-shadow: var(--rz-shadow-md);
+    }
+
+    :global(.rz-command-item) {
+      height: var(--rz-size-10);
+    }
+  }
 
 .rz-select__list {
-		background-color: hsl(var(--rz-input-bg));
-		border: var(--rz-border);
-		border-radius: var(--rz-radius-md);
-		display: flex;
-		flex-wrap: wrap;
-		gap: var(--rz-size-2);
-		min-height: var(--rz-size-10);
-		padding: var(--rz-size-2) var(--rz-size-3);
-	}
+    background-color: hsl(var(--rz-input-bg));
+    border: var(--rz-border);
+    border-radius: var(--rz-radius-md);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--rz-size-2);
+    min-height: var(--rz-size-10);
+    padding: var(--rz-size-2) var(--rz-size-3);
+  }
 
 .rz-select__list[data-focused] {
-		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-ring) / 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-ring) / var(--rz-ring-opacity, 1));
+  }
 
 .rz-select__list[data-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));
+  }
 
 .rz-select__list--readonly {
-		cursor: no-drop;
-	}
+    cursor: no-drop;
+  }
 </style>

package/dist/fields/separator/component/Separator.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	type Props = { class?: string };
-	const { class: className }: Props = $props();
+  type Props = { class?: string };
+  const { class: className }: Props = $props();
 </script>
 
 <hr class="rz-separator {className}" />
 
 <style>
-	.rz-separator {
-		margin-bottom: var(--rz-size-4);
-	}
+  .rz-separator {
+    margin-bottom: var(--rz-size-4);
+  }
 </style>

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

@@ -1,11 +1,11 @@
 <script lang="ts">
-	let { value }: { value: string } = $props();
+  let { value }: { value: string } = $props();
 </script>
 
 <span class="rz-slug-cell">{value}</span>
 
 <style>
-	.rz-slug-cell {
-		font-family: var(--rz-font-mono);
-	}
+  .rz-slug-cell {
+    font-family: var(--rz-font-mono);
+  }
 </style>

package/dist/fields/slug/component/Slug.svelte

@@ -1,119 +1,119 @@
 <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 { Input } from '../../../panel/components/ui/input/index.js';
-	import type { DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
-	import { slugify } from '../../../util/string.js';
-	import { Hash } from '@lucide/svelte';
-	import type { SlugField } from '../index';
+  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 { Input } from '../../../panel/components/ui/input/index.js';
+  import type { DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
+  import { slugify } from '../../../util/string.js';
+  import { Hash } from '@lucide/svelte';
+  import type { SlugField } from '../index';
 
-	type Props = { path: string; config: SlugField; form: DocumentFormContext };
-	const { path, config, form }: Props = $props();
+  type Props = { path: string; config: SlugField; form: DocumentFormContext };
+  const { path, config, form }: Props = $props();
 
-	const field = $derived(form.useField(path, config));
-	let isFocused = false;
-	// svelte-ignore state_referenced_locally
-	const initialValue = form.getRawValue(path);
-	const initialEmpty = !initialValue;
-	const slugifySource = $derived(config.slugify ? form.useField<string>(config.slugify) : null);
+  const field = $derived(form.useField(path, config));
+  let isFocused = false;
+  // svelte-ignore state_referenced_locally
+  const initialValue = form.getRawValue(path);
+  const initialEmpty = !initialValue;
+  const slugifySource = $derived(config.slugify ? form.useField<string>(config.slugify) : null);
 
-	const slugifiedValue = $derived.by(() => {
-		if (slugifySource && slugifySource.value) {
-			return slugify(slugifySource.value);
-		}
-		return '';
-	});
+  const slugifiedValue = $derived.by(() => {
+    if (slugifySource && slugifySource.value) {
+      return slugify(slugifySource.value);
+    }
+    return '';
+  });
 
-	$effect(() => {
-		if (!isFocused && initialEmpty && slugifiedValue && field.value !== slugifiedValue) {
-			field.value = slugifiedValue;
-		}
-	});
+  $effect(() => {
+    if (!isFocused && initialEmpty && slugifiedValue && field.value !== slugifiedValue) {
+      field.value = slugifiedValue;
+    }
+  });
 
-	const onInput = (event: Event) => {
-		const inputElement = event.target as HTMLInputElement;
-		const inputValue = inputElement.value;
-		const slugifiedValue = slugify(inputValue.replace(' ', '-'));
-		if (inputValue !== slugifiedValue) {
-			inputElement.value = slugifiedValue;
-		}
-		field.value = inputElement.value;
-	};
+  const onInput = (event: Event) => {
+    const inputElement = event.target as HTMLInputElement;
+    const inputValue = inputElement.value;
+    const slugifiedValue = slugify(inputValue.replace(' ', '-'));
+    if (inputValue !== slugifiedValue) {
+      inputElement.value = slugifiedValue;
+    }
+    field.value = inputElement.value;
+  };
 
-	const classNameCompact = $derived(config.layout === 'compact' ? 'rz-slug-field--compact' : '');
-	const classNames = $derived(`rz-slug-field ${classNameCompact || ''} ${config.className}`);
+  const classNameCompact = $derived(config.layout === 'compact' ? 'rz-slug-field--compact' : '');
+  const classNames = $derived(`rz-slug-field ${classNameCompact || ''} ${config.className}`);
 </script>
 
 <fieldset class={classNames} use:root={field}>
-	<Field.Label {config} for={path || config.name} />
+  <Field.Label {config} for={path || config.name} />
 
-	<div class="rz-slug">
-		<Input
-			id={path || config.name}
-			placeholder={config.placeholder}
-			data-error={field.error ? '' : null}
-			type="text"
-			icon={Hash}
-			value={field.value}
-			name={path || config.name}
-			oninput={onInput}
-			onfocus={() => (isFocused = true)}
-			onblur={() => (isFocused = false)}
-		/>
+  <div class="rz-slug">
+    <Input
+      id={path || config.name}
+      placeholder={config.placeholder}
+      data-error={field.error ? '' : null}
+      type="text"
+      icon={Hash}
+      value={field.value}
+      name={path || config.name}
+      oninput={onInput}
+      onfocus={() => (isFocused = true)}
+      onblur={() => (isFocused = false)}
+    />
 
-		{#if config.slugify}
-			<Button
-				disabled={!field.editable}
-				onclick={() => (field.value = slugifiedValue)}
-				type="button"
-				size="sm"
-				variant="secondary"
-			>
-				{t__('fields.generate_from', config.slugify)}
-			</Button>
-		{/if}
-	</div>
-	<Field.Hint {config} />
-	<Field.Error error={field.error} />
+    {#if config.slugify}
+      <Button
+        disabled={!field.editable}
+        onclick={() => (field.value = slugifiedValue)}
+        type="button"
+        size="sm"
+        variant="secondary"
+      >
+        {t__('fields.generate_from', config.slugify)}
+      </Button>
+    {/if}
+  </div>
+  <Field.Hint {config} />
+  <Field.Error error={field.error} />
 </fieldset>
 
 <style>
-	.rz-slug {
-		position: relative;
+  .rz-slug {
+    position: relative;
 
-		:global(.rz-input) {
-			font-family: var(--rz-font-mono);
-		}
+    :global(.rz-input) {
+      font-family: var(--rz-font-mono);
+    }
 
-		:global(.rz-button) {
-			position: absolute;
-			right: var(--rz-size-1-5);
-			top: var(--rz-size-1-5);
-		}
+    :global(.rz-button) {
+      position: absolute;
+      right: var(--rz-size-1-5);
+      top: var(--rz-size-1-5);
+    }
 
-		:global(.rz-slug__icon) {
-			opacity: 0.37;
-			position: absolute;
-			left: 0.75rem;
-			top: 1rem;
-		}
-	}
+    :global(.rz-slug__icon) {
+      opacity: 0.37;
+      position: absolute;
+      left: 0.75rem;
+      top: 1rem;
+    }
+  }
 
-	.rz-slug-field--compact {
-		:global(label) {
-			display: none;
-		}
-		:global(.rz-field-error) {
-			position: absolute;
-			top: var(--rz-size-3);
-			right: calc(var(--rz-fields-padding) + var(--rz-size-40));
-		}
-		:global(.rz-input) {
-			font-size: var(--rz-text-md);
-			padding: var(--rz-size-5) 0 var(--rz-size-5) var(--rz-size-8);
-			height: var(--rz-size-11);
-		}
-	}
+  .rz-slug-field--compact {
+    :global(label) {
+      display: none;
+    }
+    :global(.rz-field-error) {
+      position: absolute;
+      top: var(--rz-size-3);
+      right: calc(var(--rz-fields-padding) + var(--rz-size-40));
+    }
+    :global(.rz-input) {
+      font-size: var(--rz-text-md);
+      padding: var(--rz-size-5) 0 var(--rz-size-5) var(--rz-size-8);
+      height: var(--rz-size-11);
+    }
+  }
 </style>