rimecms 0.26.6 → 0.26.8

package/dist/fields/tabs/component/Tabs.svelte

@@ -1,113 +1,113 @@
 <script lang="ts">
-	import RichText from '../../rich-text/component/RichText.svelte';
-	import { RichTextFieldBuilder } from '../../rich-text/index.js';
-	import RenderFields from '../../../panel/components/fields/RenderFields.svelte';
-	import * as Tabs from '../../../panel/components/ui/tabs/index.js';
-	import type { DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
-	import type { TabBuilder, TabsField } from '../index.js';
+  import RichText from '../../rich-text/component/RichText.svelte';
+  import { RichTextFieldBuilder } from '../../rich-text/index.js';
+  import RenderFields from '../../../panel/components/fields/RenderFields.svelte';
+  import * as Tabs from '../../../panel/components/ui/tabs/index.js';
+  import type { DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
+  import type { TabBuilder, TabsField } from '../index.js';
 
-	type Props = { config: TabsField; path: string; form: DocumentFormContext };
+  type Props = { config: TabsField; path: string; form: DocumentFormContext };
 
-	const { config, path: initialPath, form }: Props = $props();
+  const { config, path: initialPath, form }: Props = $props();
 
-	const storageActiveKey = $derived(`rime.Tabs:${form.values.id || 'create'}:${initialPath}`);
-	let errorTabs = $state<string[]>([]);
-	// Path to prepend to fields inside tabs
-	const prependPath = $derived(initialPath === '' ? '' : `${initialPath}.`);
-	// Generate unique IDs for each tab to use as data attributes for error handling.
-	const tabIds = $derived(
-		config.tabs.map((tab) => `${tab.name}-${new Date().getTime().toString()}`)
-	);
+  const storageActiveKey = $derived(`rime.Tabs:${form.values.id || 'create'}:${initialPath}`);
+  let errorTabs = $state<string[]>([]);
+  // Path to prepend to fields inside tabs
+  const prependPath = $derived(initialPath === '' ? '' : `${initialPath}.`);
+  // Generate unique IDs for each tab to use as data attributes for error handling.
+  const tabIds = $derived(
+    config.tabs.map((tab) => `${tab.name}-${new Date().getTime().toString()}`)
+  );
 
-	// Retrieve active tab from localStorage, if not found use the first tab.
-	// If the stored active tab is not available in live mode, fallback to the first tab.
-	let activeTabName = $derived.by(() => {
-		let storedActiveTab = localStorage.getItem(storageActiveKey);
-		if (storedActiveTab && form.isLive) {
-			const activeTab = config.tabs.find((tab) => tab.name === storedActiveTab);
-			if (!activeTab || activeTab.raw.live === false) {
-				return config.tabs[0].name;
-			}
-		}
-		return storedActiveTab || config.tabs[0].name;
-	});
+  // Retrieve active tab from localStorage, if not found use the first tab.
+  // If the stored active tab is not available in live mode, fallback to the first tab.
+  let activeTabName = $derived.by(() => {
+    let storedActiveTab = localStorage.getItem(storageActiveKey);
+    if (storedActiveTab && form.isLive) {
+      const activeTab = config.tabs.find((tab) => tab.name === storedActiveTab);
+      if (!activeTab || activeTab.raw.live === false) {
+        return config.tabs[0].name;
+      }
+    }
+    return storedActiveTab || config.tabs[0].name;
+  });
 
-	// On live mode only show tabs with live=true
-	function isTabVisible(tab: TabBuilder) {
-		return form.isLive ? tab.raw.live === true : true;
-	}
+  // On live mode only show tabs with live=true
+  function isTabVisible(tab: TabBuilder) {
+    return form.isLive ? tab.raw.live === true : true;
+  }
 
-	function onActiveTabChange(value: string): void {
-		localStorage.setItem(storageActiveKey, value);
-		activeTabName = value;
-	}
+  function onActiveTabChange(value: string): void {
+    localStorage.setItem(storageActiveKey, value);
+    activeTabName = value;
+  }
 
-	// Emphasize tabs that includes errors
-	$effect(() => {
-		if (form.errors.length) {
-			const selector = '.rz-tabs-content:has(*[data-error])';
-			const errorsTabs = document.querySelectorAll<HTMLElement>(selector);
-			if (errorsTabs) {
-				errorTabs = Array.from(errorsTabs)
-					.map((el) => el.dataset.tabId)
-					.filter((str) => typeof str === 'string');
-			}
-		} else {
-			errorTabs = [];
-		}
-	});
+  // Emphasize tabs that includes errors
+  $effect(() => {
+    if (form.errors.length) {
+      const selector = '.rz-tabs-content:has(*[data-error])';
+      const errorsTabs = document.querySelectorAll<HTMLElement>(selector);
+      if (errorsTabs) {
+        errorTabs = Array.from(errorsTabs)
+          .map((el) => el.dataset.tabId)
+          .filter((str) => typeof str === 'string');
+      }
+    } else {
+      errorTabs = [];
+    }
+  });
 </script>
 
 <div class="rz-tabs">
-	<Tabs.Root onValueChange={onActiveTabChange} value={activeTabName}>
-		<Tabs.List>
-			{#each config.tabs as tab, index (index)}
-				{#if isTabVisible(tab)}
-					<Tabs.Trigger
-						data-error={errorTabs.includes(tabIds[index]) ? 'true' : null}
-						value={tab.name}
-					>
-						{tab.raw.label || tab.name}
-					</Tabs.Trigger>
-				{/if}
-			{/each}
-		</Tabs.List>
+  <Tabs.Root onValueChange={onActiveTabChange} value={activeTabName}>
+    <Tabs.List>
+      {#each config.tabs as tab, index (index)}
+        {#if isTabVisible(tab)}
+          <Tabs.Trigger
+            data-error={errorTabs.includes(tabIds[index]) ? 'true' : null}
+            value={tab.name}
+          >
+            {tab.raw.label || tab.name}
+          </Tabs.Trigger>
+        {/if}
+      {/each}
+    </Tabs.List>
 
-		{#each config.tabs as tab, index (index)}
-			{#if isTabVisible(tab)}
-				<Tabs.Content data-tab-id={tabIds[index]} value={tab.name}>
-					<!-- If the first and only field is a rich text field, render it directly -->
-					{#if tab.fields.length === 1 && tab.raw.fields[0].type === 'richText'}
-						{@const firstField = tab.raw.fields[0] as RichTextFieldBuilder}
-						<RichText
-							standAlone={true}
-							path="{prependPath}{tab.name}.{firstField.name}"
-							config={firstField.raw}
-							{form}
-						/>
-					{:else}
-						<!-- Otherwise, render the fields -->
-						<RenderFields fields={tab.raw.fields} path="{prependPath}{tab.name}" {form} />
-					{/if}
-				</Tabs.Content>
-			{/if}
-		{/each}
-	</Tabs.Root>
+    {#each config.tabs as tab, index (index)}
+      {#if isTabVisible(tab)}
+        <Tabs.Content data-tab-id={tabIds[index]} value={tab.name}>
+          <!-- If the first and only field is a rich text field, render it directly -->
+          {#if tab.fields.length === 1 && tab.raw.fields[0].type === 'richText'}
+            {@const firstField = tab.raw.fields[0] as RichTextFieldBuilder}
+            <RichText
+              standAlone={true}
+              path="{prependPath}{tab.name}.{firstField.name}"
+              config={firstField.raw}
+              {form}
+            />
+          {:else}
+            <!-- Otherwise, render the fields -->
+            <RenderFields fields={tab.raw.fields} path="{prependPath}{tab.name}" {form} />
+          {/if}
+        </Tabs.Content>
+      {/if}
+    {/each}
+  </Tabs.Root>
 </div>
 
 <style>
-	.rz-tabs :global {
-		.rz-tabs-content {
-			margin-top: var(--rz-size-8);
-		}
+  .rz-tabs :global {
+    .rz-tabs-content {
+      margin-top: var(--rz-size-8);
+    }
 
-		.rz-tabs-list {
-			padding-left: var(--rz-fields-padding);
-			padding-right: var(--rz-fields-padding);
-			position: sticky;
-			top: var(--rz-tabs-list-top, var(--rz-size-14));
-			margin-bottom: 0;
-			z-index: 40;
-		}
-	}
+    .rz-tabs-list {
+      padding-left: var(--rz-fields-padding);
+      padding-right: var(--rz-fields-padding);
+      position: sticky;
+      top: var(--rz-tabs-list-top, var(--rz-size-14));
+      margin-bottom: 0;
+      z-index: 40;
+    }
+  }
 </style>

package/dist/fields/text/component/Text.svelte

@@ -1,67 +1,67 @@
 <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 type { TextFieldProps } from './props.js';
+  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 type { TextFieldProps } from './props.js';
 
-	const { path, config, type = 'text', form, icon: Icon }: TextFieldProps = $props();
-	const field = $derived(form.useField(path || config.name, config));
+  const { path, config, type = 'text', form, icon: Icon }: TextFieldProps = $props();
+  const field = $derived(form.useField(path || config.name, config));
 
-	const onInput = (event: Event) => {
-		field.value = (event.target as HTMLInputElement).value;
-	};
+  const onInput = (event: Event) => {
+    field.value = (event.target as HTMLInputElement).value;
+  };
 </script>
 
 <fieldset
-	class="rz-text-field {config.className || ''}"
-	class:rz-text-field--with-icon={!!Icon}
-	data-compact={config.layout === 'compact' ? '' : null}
-	use:root={field}
+  class="rz-text-field {config.className || ''}"
+  class:rz-text-field--with-icon={!!Icon}
+  data-compact={config.layout === 'compact' ? '' : null}
+  use:root={field}
 >
-	<Field.Label {config} for={path || config.name} />
-	<div class="rz-text-field__input-wrapper">
-		<Input
-			id={path || config.name}
-			icon={Icon}
-			autocomplete="off"
-			name={path || config.name}
-			placeholder={config.placeholder || capitalize(config.name)}
-			data-error={field.error ? '' : null}
-			{type}
-			value={field.value}
-			oninput={onInput}
-		/>
-	</div>
-	<Field.Hint {config} />
-	<Field.Error error={field.error} />
+  <Field.Label {config} for={path || config.name} />
+  <div class="rz-text-field__input-wrapper">
+    <Input
+      id={path || config.name}
+      icon={Icon}
+      autocomplete="off"
+      name={path || config.name}
+      placeholder={config.placeholder || capitalize(config.name)}
+      data-error={field.error ? '' : null}
+      {type}
+      value={field.value}
+      oninput={onInput}
+    />
+  </div>
+  <Field.Hint {config} />
+  <Field.Error error={field.error} />
 </fieldset>
 
 <style>
-	.rz-text-field[data-compact] :global {
-		.rz-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-text-field[data-compact] :global {
+    .rz-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-text-field--with-icon {
-		.rz-text-field__input-wrapper {
-			position: relative;
-			display: flex;
-			align-items: center;
+  .rz-text-field--with-icon {
+    .rz-text-field__input-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>

package/dist/fields/textarea/component/TextArea.svelte

@@ -1,31 +1,31 @@
 <script lang="ts">
-	import { Field } from '../../../panel/components/fields/index.js';
-	import { root } from '../../../panel/components/fields/root.svelte.js';
-	import { dataError } from '../../../panel/util/dataError.js';
-	import type { TextAreaFieldProps } from './props.js';
+  import { Field } from '../../../panel/components/fields/index.js';
+  import { root } from '../../../panel/components/fields/root.svelte.js';
+  import { dataError } from '../../../panel/util/dataError.js';
+  import type { TextAreaFieldProps } from './props.js';
 
-	const { path, config, form }: TextAreaFieldProps = $props();
+  const { path, config, form }: TextAreaFieldProps = $props();
 
-	const field = $derived(form.useField(path || config.name, config));
+  const field = $derived(form.useField(path || config.name, config));
 
-	// Actions
-	const onInput = (event: Event) => {
-		field.value = (event.target as HTMLTextAreaElement).value;
-	};
+  // Actions
+  const onInput = (event: Event) => {
+    field.value = (event.target as HTMLTextAreaElement).value;
+  };
 </script>
 
 <fieldset use:root={field} class="rz-textarea-field {config.className || ''}">
-	<Field.Label {config} for={path || config.name} />
-	<textarea
-		use:dataError={!!field.error}
-		id={path || config.name}
-		name={path || config.name}
-		placeholder={config.placeholder}
-		value={field.value}
-		oninput={onInput}
-	></textarea>
-	<Field.Error error={field.error} />
-	<Field.Hint {config} />
+  <Field.Label {config} for={path || config.name} />
+  <textarea
+    use:dataError={!!field.error}
+    id={path || config.name}
+    name={path || config.name}
+    placeholder={config.placeholder}
+    value={field.value}
+    oninput={onInput}
+  ></textarea>
+  <Field.Error error={field.error} />
+  <Field.Hint {config} />
 </fieldset>
 
 <style>/**************************************/
@@ -35,43 +35,43 @@
 /**************************************/
 
 textarea {
-		field-sizing: content;
-		border: 1px solid var(--rz-input-border-color);
-		background-color: hsl(var(--rz-input-bg));
-		display: flex;
-		width: 100%;
-		border-radius: var(--rz-radius-md);
-		line-height: 1.5em;
-		min-height: var(--rz-size-20);
-		padding-inline: var(--rz-size-3);
-		padding-block: var(--rz-size-2);
+    field-sizing: content;
+    border: 1px solid var(--rz-input-border-color);
+    background-color: hsl(var(--rz-input-bg));
+    display: flex;
+    width: 100%;
+    border-radius: var(--rz-radius-md);
+    line-height: 1.5em;
+    min-height: var(--rz-size-20);
+    padding-inline: var(--rz-size-3);
+    padding-block: var(--rz-size-2);
 
-		&:global([data-error]) {
-			outline: none;
-			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([data-error]) {
+      outline: none;
+      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));
+    }
+  }
 
 textarea:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 
 textarea::-moz-placeholder {
-		color: hsl(var(--rz-color-fg) / 0.5);
-	}
+    color: hsl(var(--rz-color-fg) / 0.5);
+  }
 
 textarea::placeholder {
-		color: hsl(var(--rz-color-fg) / 0.5);
-	}
+    color: hsl(var(--rz-color-fg) / 0.5);
+  }
 
 textarea:focus-visible {
-		outline: none;
-		/* --rz-ring-offset: 1px; */
-		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));
-	}
+    outline: none;
+    /* --rz-ring-offset: 1px; */
+    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));
+  }
 </style>

package/dist/fields/time/component/Time.svelte

@@ -1,55 +1,55 @@
 <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 { Clock } from '@lucide/svelte';
-	import type { TimeFieldProps } 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 { Clock } from '@lucide/svelte';
+  import type { TimeFieldProps } from './props';
 
-	const { path, config, form }: TimeFieldProps = $props();
-	const field = $derived(form.useField(path || config.name, config));
+  const { path, config, form }: TimeFieldProps = $props();
+  const field = $derived(form.useField(path || config.name, config));
 
-	const onInput = (event: Event) => {
-		field.value = (event.target as HTMLInputElement).value;
-	};
+  const onInput = (event: Event) => {
+    field.value = (event.target as HTMLInputElement).value;
+  };
 </script>
 
 <fieldset class="rz-time-field {config.className || ''}" use:root={field}>
-	<Field.Label {config} for={path || config.name} />
-	<div class="rz-time-field__input-wrapper">
-		<Input
-			type="time"
-			id={path}
-			name={path}
-			data-error={field.error ? '' : null}
-			value={field.value}
-			oninput={onInput}
-		/>
-		<span class="rz-time-field__icon">
-			<Clock size="12" />
-		</span>
-	</div>
-	<Field.Hint {config} />
-	<Field.Error error={field.error} />
+  <Field.Label {config} for={path || config.name} />
+  <div class="rz-time-field__input-wrapper">
+    <Input
+      type="time"
+      id={path}
+      name={path}
+      data-error={field.error ? '' : null}
+      value={field.value}
+      oninput={onInput}
+    />
+    <span class="rz-time-field__icon">
+      <Clock size="12" />
+    </span>
+  </div>
+  <Field.Hint {config} />
+  <Field.Error error={field.error} />
 </fieldset>
 
 <style>
-	.rz-time-field__input-wrapper {
-		display: flex;
-		width: 200px;
-		position: relative;
-		:global {
-			.rz-input {
-				display: block;
-			}
-		}
-	}
+  .rz-time-field__input-wrapper {
+    display: flex;
+    width: 200px;
+    position: relative;
+    :global {
+      .rz-input {
+        display: block;
+      }
+    }
+  }
 
-	.rz-time-field__icon {
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		right: var(--rz-size-4);
-		display: flex;
-		align-items: center;
-	}
+  .rz-time-field__icon {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: var(--rz-size-4);
+    display: flex;
+    align-items: center;
+  }
 </style>

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

@@ -1,20 +1,20 @@
 <script lang="ts">
-	import Switch from '../../../panel/components/ui/switch/switch.svelte';
+  import Switch from '../../../panel/components/ui/switch/switch.svelte';
 
-	type Props = {
-		value: boolean | null;
-	};
+  type Props = {
+    value: boolean | null;
+  };
 
-	const { value }: Props = $props();
+  const { value }: Props = $props();
 </script>
 
 <div class="rz-toggle-cell">
-	<Switch disabled checked={!!value} />
+  <Switch disabled checked={!!value} />
 </div>
 
 <style>
-	.rz-toggle-cell {
-		scale: 0.8;
-		transform-origin: left;
-	}
+  .rz-toggle-cell {
+    scale: 0.8;
+    transform-origin: left;
+  }
 </style>