rimecms 0.26.7 → 0.26.9

package/dist/fields/combobox/component/ComboBox.svelte

@@ -1,103 +1,103 @@
 <script lang="ts">
-	import { t__ } from '../../../core/i18n/index.js';
-	import type { OptionWithIcon } from '../../types.js';
-	import { Field } from '../../../panel';
-	import { root } from '../../../panel/components/fields/root.svelte.js';
-	import { Button } from '../../../panel/components/ui/button/index.js';
-	import * as Command from '../../../panel/components/ui/command/index.js';
-	import * as Popover from '../../../panel/components/ui/popover/index.js';
-	import { Check, ChevronsUpDown } from '@lucide/svelte';
-	import './combobox.css';
-	import type { ComboBoxProps } from './props';
+  import { t__ } from '../../../core/i18n/index.js';
+  import type { OptionWithIcon } from '../../types.js';
+  import { Field } from '../../../panel';
+  import { root } from '../../../panel/components/fields/root.svelte.js';
+  import { Button } from '../../../panel/components/ui/button/index.js';
+  import * as Command from '../../../panel/components/ui/command/index.js';
+  import * as Popover from '../../../panel/components/ui/popover/index.js';
+  import { Check, ChevronsUpDown } from '@lucide/svelte';
+  import './combobox.css';
+  import type { ComboBoxProps } from './props';
 
-	const { path, config, form }: ComboBoxProps = $props();
+  const { path, config, form }: ComboBoxProps = $props();
 
-	const field = $derived(form.useField(path, config));
-	const options = $derived(config.options);
+  const field = $derived(form.useField(path, config));
+  const options = $derived(config.options);
 
-	let search = $state('');
-	let open = $state(false);
-	let selected = $derived<OptionWithIcon | undefined>(options.find((o) => o.value === field.value));
+  let search = $state('');
+  let open = $state(false);
+  let selected = $derived<OptionWithIcon | undefined>(options.find((o) => o.value === field.value));
 </script>
 
 {#snippet label(option: OptionWithIcon)}
-	<span class="rz-combobox__option-label">
-		{#if option.icon}
-			{@const Icon = option.icon}
-			<Icon size="12" />
-		{/if}
-		{option?.label}
-	</span>
+  <span class="rz-combobox__option-label">
+    {#if option.icon}
+      {@const Icon = option.icon}
+      <Icon size="12" />
+    {/if}
+    {option?.label}
+  </span>
 {/snippet}
 
 <fieldset class="rz-combobox-field {config.className || ''}" use:root={field}>
-	<Field.Label {config} for={path || config.name} />
+  <Field.Label {config} for={path || config.name} />
 
-	<Popover.Root bind:open>
-		<Popover.Trigger>
-			{#snippet child({ props })}
-				<Button
-					variant="outline"
-					role="combobox"
-					aria-expanded={open}
-					class="rz-combobox__trigger"
-					{...props}
-				>
-					{#if selected}
-						{@render label(selected)}
-					{:else}
-						{t__('fields.select')}
-					{/if}
-					<ChevronsUpDown class="rz-combobox__chevron" />
-				</Button>
-			{/snippet}
-		</Popover.Trigger>
-		<Popover.Portal>
-			<Popover.Content class="rz-combobox__content">
-				<Command.Root>
-					{#if options.length > 4}
-						<Command.Input
-							bind:value={search}
-							placeholder={t__('common.search')}
-							class="rz-combobox__search"
-						/>
-					{/if}
-					<Command.Empty>Nothing found.</Command.Empty>
-					<Command.Group>
-						{#each options as option, index (index)}
-							<Command.Item
-								class="rz-combobox__item"
-								value={option.value}
-								onSelect={() => {
-									selected = option;
-									field.value = option.value;
-									search = '';
-									open = false;
-								}}
-							>
-								{@render label(option)}
-								<Check
-									class={`rz-combobox__check ${selected?.value !== option.value ? 'rz-combobox__check--hidden' : ''}`}
-								/>
-							</Command.Item>
-						{/each}
-					</Command.Group>
-				</Command.Root>
-			</Popover.Content>
-		</Popover.Portal>
-	</Popover.Root>
-	<Field.Hint {config} />
-	<Field.Error error={field.error} />
+  <Popover.Root bind:open>
+    <Popover.Trigger>
+      {#snippet child({ props })}
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          class="rz-combobox__trigger"
+          {...props}
+        >
+          {#if selected}
+            {@render label(selected)}
+          {:else}
+            {t__('fields.select')}
+          {/if}
+          <ChevronsUpDown class="rz-combobox__chevron" />
+        </Button>
+      {/snippet}
+    </Popover.Trigger>
+    <Popover.Portal>
+      <Popover.Content class="rz-combobox__content">
+        <Command.Root>
+          {#if options.length > 4}
+            <Command.Input
+              bind:value={search}
+              placeholder={t__('common.search')}
+              class="rz-combobox__search"
+            />
+          {/if}
+          <Command.Empty>Nothing found.</Command.Empty>
+          <Command.Group>
+            {#each options as option, index (index)}
+              <Command.Item
+                class="rz-combobox__item"
+                value={option.value}
+                onSelect={() => {
+                  selected = option;
+                  field.value = option.value;
+                  search = '';
+                  open = false;
+                }}
+              >
+                {@render label(option)}
+                <Check
+                  class={`rz-combobox__check ${selected?.value !== option.value ? 'rz-combobox__check--hidden' : ''}`}
+                />
+              </Command.Item>
+            {/each}
+          </Command.Group>
+        </Command.Root>
+      </Popover.Content>
+    </Popover.Portal>
+  </Popover.Root>
+  <Field.Hint {config} />
+  <Field.Error error={field.error} />
 </fieldset>
 
 <style>
-	.rz-combobox-field :global {
-		.rz-combobox__trigger.rz-button {
-			min-width: 200px;
-			height: var(--rz-size-11);
-			justify-content: space-between;
-			border: 1px solid var(--rz-input-border-color);
-			background-color: hsl(var(--rz-input-bg));
-		}
-	}
+  .rz-combobox-field :global {
+    .rz-combobox__trigger.rz-button {
+      min-width: 200px;
+      height: var(--rz-size-11);
+      justify-content: space-between;
+      border: 1px solid var(--rz-input-border-color);
+      background-color: hsl(var(--rz-input-bg));
+    }
+  }
 </style>

package/dist/fields/combobox/component/combobox.css

@@ -1,41 +1,41 @@
 .rz-combobox__chevron {
-	margin-left: var(--rz-size-2);
-	height: var(--rz-size-4);
-	width: var(--rz-size-4);
-	flex-shrink: 0;
-	opacity: 0.5;
+  margin-left: var(--rz-size-2);
+  height: var(--rz-size-4);
+  width: var(--rz-size-4);
+  flex-shrink: 0;
+  opacity: 0.5;
 }
 
 .rz-combobox__content {
-	width: 200px;
-	max-height: calc(var(--rz-size-80) - 2px);
-	overflow-y: auto;
-	border-radius: var(--rz-radius-md);
-	background-color: var(--rz-popover-bg);
-	padding: 0;
-	.rz-command-input {
-		padding-top: 0;
-		padding-bottom: 0;
-	}
+  width: 200px;
+  max-height: calc(var(--rz-size-80) - 2px);
+  overflow-y: auto;
+  border-radius: var(--rz-radius-md);
+  background-color: var(--rz-popover-bg);
+  padding: 0;
+  .rz-command-input {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
 }
 
 .rz-combobox__item {
-	height: var(--rz-size-11);
-	justify-content: space-between;
+  height: var(--rz-size-11);
+  justify-content: space-between;
 }
 
 .rz-combobox__check {
-	margin-right: var(--rz-size-2);
-	height: var(--rz-size-4);
-	width: var(--rz-size-4);
+  margin-right: var(--rz-size-2);
+  height: var(--rz-size-4);
+  width: var(--rz-size-4);
 }
 
 .rz-combobox__check--hidden {
-	visibility: hidden;
+  visibility: hidden;
 }
 
 .rz-combobox__option-label {
-	display: flex;
-	align-items: center;
-	gap: var(--rz-size-3);
+  display: flex;
+  align-items: center;
+  gap: var(--rz-size-3);
 }

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

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { getLocaleContext } from '../../../panel/context/locale.svelte';
+  import { getLocaleContext } from '../../../panel/context/locale.svelte';
 
-	type Props = { value: Date | undefined };
-	const { value }: Props = $props();
+  type Props = { value: Date | undefined };
+  const { value }: Props = $props();
 
-	const locale = getLocaleContext();
+  const locale = getLocaleContext();
 </script>
 
 {#if value}
-	{locale.dateFormat(value)}
+  {locale.dateFormat(value)}
 {/if}

package/dist/fields/date/component/Date.svelte

@@ -1,111 +1,111 @@
 <script lang="ts">
-	import { Field } from '../../../panel/components/fields/index.js';
-	import { root } from '../../../panel/components/fields/root.svelte.js';
-	import { Button } from '../../../panel/components/ui/button/index.js';
-	import { Calendar } from '../../../panel/components/ui/calendar/index.js';
-	import * as Dialog from '../../../panel/components/ui/dialog/index.js';
-	import { type DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
-	import { getLocaleContext } from '../../../panel/context/locale.svelte';
-	import { CalendarDate, getLocalTimeZone, type DateValue } from '@internationalized/date';
-	import { Calendar as CalendarIcon } from '@lucide/svelte';
-	import type { DateField } from '../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/index.js';
+  import { Calendar } from '../../../panel/components/ui/calendar/index.js';
+  import * as Dialog from '../../../panel/components/ui/dialog/index.js';
+  import { type DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
+  import { getLocaleContext } from '../../../panel/context/locale.svelte';
+  import { CalendarDate, getLocalTimeZone, type DateValue } from '@internationalized/date';
+  import { Calendar as CalendarIcon } from '@lucide/svelte';
+  import type { DateField } from '../index.js';
 
-	type Props = { path: string; config: DateField; form: DocumentFormContext };
+  type Props = { path: string; config: DateField; form: DocumentFormContext };
 
-	const { path, config, form }: Props = $props();
-	const locale = getLocaleContext();
-	const timeZone = getLocalTimeZone();
-	let dialogOpen = $state(false);
-	const field = $derived(form.useField(path, config));
+  const { path, config, form }: Props = $props();
+  const locale = getLocaleContext();
+  const timeZone = getLocalTimeZone();
+  let dialogOpen = $state(false);
+  const field = $derived(form.useField(path, config));
 
-	// Derive date from field.value
-	const date = $derived.by(() => {
-		return field.value instanceof Date ? field.value : null;
-	});
+  // Derive date from field.value
+  const date = $derived.by(() => {
+    return field.value instanceof Date ? field.value : null;
+  });
 
-	// Derive calendarDate from date
-	const calendarDate = $derived.by(() => {
-		if (date) {
-			return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
-		}
-		return undefined;
-	});
+  // Derive calendarDate from date
+  const calendarDate = $derived.by(() => {
+    if (date) {
+      return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
+    }
+    return undefined;
+  });
 
-	// Handle calendar selection changes
-	function handleCalendarChange(newCalendarDate: DateValue | undefined) {
-		if (newCalendarDate) {
-			const newDate = newCalendarDate.toDate(timeZone);
-			// Only update if the date actually changed
-			if (!date || date.getTime() !== newDate.getTime()) {
-				field.value = newDate;
-			}
-		} else if (field.value !== null) {
-			field.value = null;
-		}
-	}
+  // Handle calendar selection changes
+  function handleCalendarChange(newCalendarDate: DateValue | undefined) {
+    if (newCalendarDate) {
+      const newDate = newCalendarDate.toDate(timeZone);
+      // Only update if the date actually changed
+      if (!date || date.getTime() !== newDate.getTime()) {
+        field.value = newDate;
+      }
+    } else if (field.value !== null) {
+      field.value = null;
+    }
+  }
 
-	const dateLabel = $derived(date ? locale.dateFormat(date) : 'Select a date');
+  const dateLabel = $derived(date ? locale.dateFormat(date) : 'Select a date');
 </script>
 
 <fieldset class="rz-date-field {config.className || ''}" use:root={field}>
-	<Field.Label {config} for={path || config.name} />
+  <Field.Label {config} for={path || config.name} />
 
-	<Button
-		id="foo"
-		variant="secondary"
-		data-empty={!calendarDate ? '' : null}
-		data-error={field.error ? '' : null}
-		class="rz-date__button"
-		disabled={!field.editable}
-		onclick={() => (dialogOpen = true)}
-	>
-		<CalendarIcon class="rz-date__icon" />
-		{dateLabel}
-	</Button>
+  <Button
+    id="foo"
+    variant="secondary"
+    data-empty={!calendarDate ? '' : null}
+    data-error={field.error ? '' : null}
+    class="rz-date__button"
+    disabled={!field.editable}
+    onclick={() => (dialogOpen = true)}
+  >
+    <CalendarIcon class="rz-date__icon" />
+    {dateLabel}
+  </Button>
 
-	<Dialog.Root bind:open={dialogOpen}>
-		<Dialog.Content size="sm" class="rz-date__dialog-content">
-			<Calendar
-				type="single"
-				value={calendarDate}
-				onValueChange={handleCalendarChange}
-				initialFocus
-			/>
-		</Dialog.Content>
-	</Dialog.Root>
-	<Field.Hint {config} />
-	<Field.Error error={field.error} />
+  <Dialog.Root bind:open={dialogOpen}>
+    <Dialog.Content size="sm" class="rz-date__dialog-content">
+      <Calendar
+        type="single"
+        value={calendarDate}
+        onValueChange={handleCalendarChange}
+        initialFocus
+      />
+    </Dialog.Content>
+  </Dialog.Root>
+  <Field.Hint {config} />
+  <Field.Error error={field.error} />
 </fieldset>
 
 <style>
-	.rz-date-field :global {
-		.rz-dialog-content.rz-date__dialog-content {
-			width: 100px;
-			padding: 12rem;
-		}
-		.rz-date__button.rz-button {
-			width: 200px;
-			justify-content: flex-start;
-			border: var(--rz-border);
-			padding-left: var(--rz-size-3);
-			padding-right: var(--rz-size-3);
-			height: var(--rz-input-height);
-			text-align: left;
-			font-weight: normal;
-		}
+  .rz-date-field :global {
+    .rz-dialog-content.rz-date__dialog-content {
+      width: 100px;
+      padding: 12rem;
+    }
+    .rz-date__button.rz-button {
+      width: 200px;
+      justify-content: flex-start;
+      border: var(--rz-border);
+      padding-left: var(--rz-size-3);
+      padding-right: var(--rz-size-3);
+      height: var(--rz-input-height);
+      text-align: left;
+      font-weight: normal;
+    }
 
-		.rz-date__button[data-empty] {
-			color: hsl(var(--rz-color-fg) / 0.7);
-		}
+    .rz-date__button[data-empty] {
+      color: hsl(var(--rz-color-fg) / 0.7);
+    }
 
-		.rz-date__button[data-error] {
-			border-color: var(--rz-color-alert);
-		}
+    .rz-date__button[data-error] {
+      border-color: var(--rz-color-alert);
+    }
 
-		.rz-date__icon {
-			margin-right: var(--rz-size-2);
-			height: var(--rz-size-4);
-			width: var(--rz-size-4);
-		}
-	}
+    .rz-date__icon {
+      margin-right: var(--rz-size-2);
+      height: var(--rz-size-4);
+      width: var(--rz-size-4);
+    }
+  }
 </style>

package/dist/fields/email/component/Email.svelte

@@ -1,73 +1,73 @@
 <script lang="ts">
-	import { Field } from '../../../panel/components/fields/index.js';
-	import { root } from '../../../panel/components/fields/root.svelte.js';
-	import { Input } from '../../../panel/components/ui/input/index.js';
-	import { capitalize } from '../../../util/string.js';
-	import { Mail } from '@lucide/svelte';
-	import type { EmailFieldProps } from './props';
+  import { Field } from '../../../panel/components/fields/index.js';
+  import { root } from '../../../panel/components/fields/root.svelte.js';
+  import { Input } from '../../../panel/components/ui/input/index.js';
+  import { capitalize } from '../../../util/string.js';
+  import { Mail } from '@lucide/svelte';
+  import type { EmailFieldProps } from './props';
 
-	const { path, config, form }: EmailFieldProps = $props();
+  const { path, config, form }: EmailFieldProps = $props();
 
-	const field = $derived(form.useField(path || config.name, config));
-	let showError = $state(false);
+  const field = $derived(form.useField(path || config.name, config));
+  let showError = $state(false);
 
-	// Actions
-	const onInput = (event: Event) => {
-		showError = false;
-		field.value = (event.target as HTMLInputElement).value;
-	};
+  // Actions
+  const onInput = (event: Event) => {
+    showError = false;
+    field.value = (event.target as HTMLInputElement).value;
+  };
 
-	const onBlur = () => {
-		showError = true;
-	};
+  const onBlur = () => {
+    showError = true;
+  };
 </script>
 
 <fieldset
-	data-compact={config.layout === 'compact' ? '' : null}
-	class="{config.className} rz-email-field"
-	use:root={field}
+  data-compact={config.layout === 'compact' ? '' : null}
+  class="{config.className} rz-email-field"
+  use:root={field}
 >
-	<Field.Label {config} for={path || config.name} />
-	<div class="rz-email-field-wrapper">
-		<Input
-			icon={Mail}
-			id={path || config.name}
-			name={path || config.name}
-			autocomplete="off"
-			placeholder={config.placeholder || capitalize(config.label || config.name)}
-			data-error={showError && field.error ? '' : null}
-			value={field.value}
-			onblur={onBlur}
-			oninput={onInput}
-		/>
-	</div>
-	<Field.Hint {config} />
-	<Field.Error error={(showError && field.error) || false} />
+  <Field.Label {config} for={path || config.name} />
+  <div class="rz-email-field-wrapper">
+    <Input
+      icon={Mail}
+      id={path || config.name}
+      name={path || config.name}
+      autocomplete="off"
+      placeholder={config.placeholder || capitalize(config.label || config.name)}
+      data-error={showError && field.error ? '' : null}
+      value={field.value}
+      onblur={onBlur}
+      oninput={onInput}
+    />
+  </div>
+  <Field.Hint {config} />
+  <Field.Error error={(showError && field.error) || false} />
 </fieldset>
 
 <style>
-	.rz-email-field[data-compact] :global {
-		label {
-			display: none;
-		}
-		.rz-field-error {
-			top: var(--rz-size-1);
-			right: var(--rz-size-1);
-		}
-		.rz-input {
-			font-size: var(--rz-text-md);
-		}
-	}
+  .rz-email-field[data-compact] :global {
+    label {
+      display: none;
+    }
+    .rz-field-error {
+      top: var(--rz-size-1);
+      right: var(--rz-size-1);
+    }
+    .rz-input {
+      font-size: var(--rz-text-md);
+    }
+  }
 
-	.rz-email-field-wrapper {
-		position: relative;
-		display: flex;
-		align-items: center;
+  .rz-email-field-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
 
-		: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);
+    }
+  }
 </style>