rimecms 0.26.6 → 0.26.8

package/dist/fields/link/component/RessourceInput.svelte

@@ -1,191 +1,191 @@
 <script lang="ts">
-	import { apiUrl } from '../../../core/api/index.js';
-	import { t__ } from '../../../core/i18n/index.js';
-	import type { GenericDoc } from '../../../core/types/doc.js';
-	import * as Command from '../../../panel/components/ui/command/index.js';
-	import Tag from '../../../panel/components/ui/tag/tag.svelte';
-	import { API_PROXY, getAPIProxyContext } from '../../../panel/context/api-proxy.svelte.js';
-	import type { PrototypeSlug } from '../../../types';
-	import { toKebabCase } from '../../../util/string';
-
-	type Ressource = {
-		label: string;
-		id: string;
-		_prototype: 'area' | 'collection';
-	};
-
-	type Props = {
-		ressourceId: string | null;
-		readOnly: boolean;
-		type: PrototypeSlug;
-		error: boolean;
-	};
-
-	let { ressourceId = $bindable(), type: ressourceType, readOnly, error }: Props = $props();
-
-	let search = $state('');
-	let inputFocused = $state(false);
-	let resources = $state<Ressource[]>([]);
-	let selected = $state<Ressource | null>();
-
-	const APIProxy = getAPIProxyContext(API_PROXY.DOCUMENT);
-	let resource = $state<any>(null);
-
-	function convertDocToResource(doc: GenericDoc) {
-		return {
-			id: doc.id,
-			label: doc._prototype === 'collection' ? doc.title : doc._type,
-			_prototype: doc._prototype
-		};
-	}
-
-	// When reactiveStateValue changes, update the resource
-	$effect(() => {
-		resource = APIProxy.getRessource(apiUrl(toKebabCase(ressourceType)));
-	});
-
-	// Get resources
-	$effect(() => {
-		if (resource && resource.data) {
-			const docs = 'docs' in resource.data ? resource.data.docs : [resource.data.doc];
-			resources = docs.map(convertDocToResource);
-		}
-	});
-
-	// If none selected but it's an area resource, auto-select area
-	$effect(() => {
-		if (!selected && resources.length && resources[0]._prototype === 'area') {
-			selected = resources[0];
-		}
-	});
-
-	// On select set resourceId
-	$effect(() => {
-		if (selected) {
-			ressourceId = selected.id;
-		}
-	});
-
-	// Whenver bindable ressourceId change set internal selected
-	$effect(() => {
-		if (!ressourceId) {
-			selected = null;
-		} else {
-			if (!selected) {
-				selected = resources.find((ressource) => ressource.id === ressourceId) || null;
-			}
-		}
-	});
-
-	function removeRessource() {
-		selected = null;
-		ressourceId = null;
-	}
+  import { apiUrl } from '../../../core/api/index.js';
+  import { t__ } from '../../../core/i18n/index.js';
+  import type { GenericDoc } from '../../../core/types/doc.js';
+  import * as Command from '../../../panel/components/ui/command/index.js';
+  import Tag from '../../../panel/components/ui/tag/tag.svelte';
+  import { API_PROXY, getAPIProxyContext } from '../../../panel/context/api-proxy.svelte.js';
+  import type { PrototypeSlug } from '../../../types';
+  import { toKebabCase } from '../../../util/string';
+
+  type Ressource = {
+    label: string;
+    id: string;
+    _prototype: 'area' | 'collection';
+  };
+
+  type Props = {
+    ressourceId: string | null;
+    readOnly: boolean;
+    type: PrototypeSlug;
+    error: boolean;
+  };
+
+  let { ressourceId = $bindable(), type: ressourceType, readOnly, error }: Props = $props();
+
+  let search = $state('');
+  let inputFocused = $state(false);
+  let resources = $state<Ressource[]>([]);
+  let selected = $state<Ressource | null>();
+
+  const APIProxy = getAPIProxyContext(API_PROXY.DOCUMENT);
+  let resource = $state<any>(null);
+
+  function convertDocToResource(doc: GenericDoc) {
+    return {
+      id: doc.id,
+      label: doc._prototype === 'collection' ? doc.title : doc._type,
+      _prototype: doc._prototype
+    };
+  }
+
+  // When reactiveStateValue changes, update the resource
+  $effect(() => {
+    resource = APIProxy.getRessource(apiUrl(toKebabCase(ressourceType)));
+  });
+
+  // Get resources
+  $effect(() => {
+    if (resource && resource.data) {
+      const docs = 'docs' in resource.data ? resource.data.docs : [resource.data.doc];
+      resources = docs.map(convertDocToResource);
+    }
+  });
+
+  // If none selected but it's an area resource, auto-select area
+  $effect(() => {
+    if (!selected && resources.length && resources[0]._prototype === 'area') {
+      selected = resources[0];
+    }
+  });
+
+  // On select set resourceId
+  $effect(() => {
+    if (selected) {
+      ressourceId = selected.id;
+    }
+  });
+
+  // Whenver bindable ressourceId change set internal selected
+  $effect(() => {
+    if (!ressourceId) {
+      selected = null;
+    } else {
+      if (!selected) {
+        selected = resources.find((ressource) => ressource.id === ressourceId) || null;
+      }
+    }
+  });
+
+  function removeRessource() {
+    selected = null;
+    ressourceId = null;
+  }
 </script>
 
 <div class="rz-ressource-input">
-	<Command.Root>
-		<div
-			class="rz-ressource-input__wrapper"
-			class:rz-ressource-input__wrapper--readonly={readOnly}
-			data-focused={inputFocused ? '' : null}
-			data-error={error ? '' : null}
-		>
-			{#if selected}
-				<Tag onRemove={removeRessource} {readOnly}>
-					{selected.label}
-				</Tag>
-			{/if}
-
-			{#if !readOnly && !selected}
-				<Command.InputSelect
-					onfocus={() => (inputFocused = true)}
-					onblur={() => setTimeout(() => (inputFocused = false), 200)}
-					bind:value={search}
-					placeholder={t__('common.search_a', ressourceType)}
-				/>
-				{#if inputFocused}
-					<Command.List>
-						{#each resources as ressource, index (index)}
-							<Command.Item
-								value={ressource.label}
-								onSelect={() => {
-									selected = ressource;
-									search = '';
-								}}
-							>
-								<span>{ressource.label}</span>
-							</Command.Item>
-						{/each}
-						{#if resources.length === 0}
-							<Command.Empty>No {ressourceType}</Command.Empty>
-						{/if}
-					</Command.List>
-				{/if}
-			{/if}
-		</div>
-	</Command.Root>
+  <Command.Root>
+    <div
+      class="rz-ressource-input__wrapper"
+      class:rz-ressource-input__wrapper--readonly={readOnly}
+      data-focused={inputFocused ? '' : null}
+      data-error={error ? '' : null}
+    >
+      {#if selected}
+        <Tag onRemove={removeRessource} {readOnly}>
+          {selected.label}
+        </Tag>
+      {/if}
+
+      {#if !readOnly && !selected}
+        <Command.InputSelect
+          onfocus={() => (inputFocused = true)}
+          onblur={() => setTimeout(() => (inputFocused = false), 200)}
+          bind:value={search}
+          placeholder={t__('common.search_a', ressourceType)}
+        />
+        {#if inputFocused}
+          <Command.List>
+            {#each resources as ressource, index (index)}
+              <Command.Item
+                value={ressource.label}
+                onSelect={() => {
+                  selected = ressource;
+                  search = '';
+                }}
+              >
+                <span>{ressource.label}</span>
+              </Command.Item>
+            {/each}
+            {#if resources.length === 0}
+              <Command.Empty>No {ressourceType}</Command.Empty>
+            {/if}
+          </Command.List>
+        {/if}
+      {/if}
+    </div>
+  </Command.Root>
 </div>
 
 <style>
-	.rz-ressource-input {
-		position: relative;
-		width: 100%;
-
-		:global {
-			.rz-command {
-				width: 100%;
-				border-radius: var(--rz-radius-md);
-			}
-
-			.rz-command-list {
-				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);
-				max-height: var(--rz-size-36);
-				border: var(--rz-border);
-			}
-
-			.rz-command-input-select {
-				cursor: text;
-			}
-
-			.rz-command-item {
-				height: var(--rz-size-10);
-			}
-		}
-	}
-
-	.rz-ressource-input__wrapper {
-		background-color: hsl(var(--rz-input-bg));
-		display: flex;
-		height: var(--rz-size-11);
-		flex-wrap: wrap;
-		align-items: center;
-		gap: var(--rz-size-1);
-
-		border-top: 0;
-		padding: var(--rz-size-2) var(--rz-size-3);
-	}
-
-	.rz-ressource-input__wrapper--readonly {
-		cursor: no-drop;
-	}
-
-	.rz-ressource-input__wrapper:global([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-spot) / var(--rz-ring-opacity, 1));
-		z-index: 20;
-	}
-
-	.rz-ressource-input__wrapper:global([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));
-	}
+  .rz-ressource-input {
+    position: relative;
+    width: 100%;
+
+    :global {
+      .rz-command {
+        width: 100%;
+        border-radius: var(--rz-radius-md);
+      }
+
+      .rz-command-list {
+        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);
+        max-height: var(--rz-size-36);
+        border: var(--rz-border);
+      }
+
+      .rz-command-input-select {
+        cursor: text;
+      }
+
+      .rz-command-item {
+        height: var(--rz-size-10);
+      }
+    }
+  }
+
+  .rz-ressource-input__wrapper {
+    background-color: hsl(var(--rz-input-bg));
+    display: flex;
+    height: var(--rz-size-11);
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--rz-size-1);
+
+    border-top: 0;
+    padding: var(--rz-size-2) var(--rz-size-3);
+  }
+
+  .rz-ressource-input__wrapper--readonly {
+    cursor: no-drop;
+  }
+
+  .rz-ressource-input__wrapper:global([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-spot) / var(--rz-ring-opacity, 1));
+    z-index: 20;
+  }
+
+  .rz-ressource-input__wrapper:global([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));
+  }
 </style>

package/dist/fields/number/component/Number.svelte

@@ -1,133 +1,133 @@
 <script lang="ts">
-	import { Field } from '../../../panel/components/fields/index.js';
-	import { root } from '../../../panel/components/fields/root.svelte.js';
-	import { ChevronDown, ChevronUp } from '@lucide/svelte';
-	import './number.css';
-	import type { NumberFieldProps } from './props';
+  import { Field } from '../../../panel/components/fields/index.js';
+  import { root } from '../../../panel/components/fields/root.svelte.js';
+  import { ChevronDown, ChevronUp } from '@lucide/svelte';
+  import './number.css';
+  import type { NumberFieldProps } from './props';
 
-	const { path, config, form }: NumberFieldProps = $props();
+  const { path, config, form }: NumberFieldProps = $props();
 
-	const field = $derived(form.useField<number>(path, config));
+  const field = $derived(form.useField<number>(path, config));
 
-	const decrease = () => {
-		const minValue = config.min ?? -Infinity;
-		field.value = Math.max((field.value || 0) - 1, minValue);
-	};
+  const decrease = () => {
+    const minValue = config.min ?? -Infinity;
+    field.value = Math.max((field.value || 0) - 1, minValue);
+  };
 
-	const increase = () => {
-		const maxValue = config.max ?? Infinity;
-		field.value = Math.min((field.value || 0) + 1, maxValue);
-	};
+  const increase = () => {
+    const maxValue = config.max ?? Infinity;
+    field.value = Math.min((field.value || 0) + 1, maxValue);
+  };
 </script>
 
 {#snippet chevron(Icon: any, func: any, clss: string)}
-	<button type="button" class="rz-number-field__chevron {clss}" onclick={func}>
-		<Icon size={12} />
-	</button>
+  <button type="button" class="rz-number-field__chevron {clss}" onclick={func}>
+    <Icon size={12} />
+  </button>
 {/snippet}
 
 <fieldset class="rz-number-field {config.className || ''}" use:root={field}>
-	<Field.Label {config} for={path || config.name} />
-	<div class="rz-number-field__input-wrapper">
-		<input
-			class="rz-number-field__input"
-			min={config.min ?? undefined}
-			max={config.max ?? undefined}
-			bind:value={field.value}
-			type="number"
-		/>
-		<div class="rz-number-field__controls">
-			{@render chevron(ChevronUp, increase, 'rz-number-field__chevron--up')}
-			{@render chevron(ChevronDown, decrease, 'rz-number-field__chevron--down')}
-		</div>
-	</div>
-	<Field.Hint {config} />
-	<Field.Error error={field.error} />
+  <Field.Label {config} for={path || config.name} />
+  <div class="rz-number-field__input-wrapper">
+    <input
+      class="rz-number-field__input"
+      min={config.min ?? undefined}
+      max={config.max ?? undefined}
+      bind:value={field.value}
+      type="number"
+    />
+    <div class="rz-number-field__controls">
+      {@render chevron(ChevronUp, increase, 'rz-number-field__chevron--up')}
+      {@render chevron(ChevronDown, decrease, 'rz-number-field__chevron--down')}
+    </div>
+  </div>
+  <Field.Hint {config} />
+  <Field.Error error={field.error} />
 </fieldset>
 
 <style>
-	.rz-number-field__input-wrapper {
-		width: 6rem;
-		display: flex;
-		height: var(--rz-size-11);
-		align-items: center;
-		border-radius: var(--rz-radius-lg);
-	}
-
-	.rz-number-field__input {
-		background-color: hsl(var(--rz-input-bg));
-		height: 100%;
-		width: 100%;
-		flex: 1;
-		justify-content: center;
-		border-top-left-radius: var(--rz-radius-lg);
-		border-bottom-left-radius: var(--rz-radius-lg);
-		border: 1px solid var(--rz-input-border-color);
-		text-align: center;
-		transition: all 0.2s ease;
-	}
-
-	.rz-number-field__input:focus-visible {
-		position: relative;
-		z-index: 10;
-		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-number-field__controls {
-		display: flex;
-		flex-direction: column;
-		height: var(--rz-size-11);
-	}
-
-	.rz-number-field__chevron {
-		background-color: hsl(var(--rz-input-bg));
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: var(--rz-size-8);
-		flex: 1;
-		border-right: 1px solid var(--rz-input-border-color);
-		transition: all 0.2s ease;
-	}
-
-	.rz-number-field__chevron:hover {
-		background-color: hsl(var(--rz-gray-9));
-	}
-
-	.rz-number-field__chevron:focus-visible {
-		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));
-		position: relative;
-		z-index: 10;
-		outline: none;
-	}
-
-	.rz-number-field__chevron--up {
-		border-top: 1px solid var(--rz-input-border-color);
-		border-top-right-radius: var(--rz-radius-lg);
-		border-bottom: 1px solid var(--rz-input-border-color);
-	}
-
-	.rz-number-field__chevron--down {
-		border-bottom-right-radius: var(--rz-radius-lg);
-		border-bottom: 1px solid var(--rz-input-border-color);
-	}
-
-	/* Chrome, Safari, Edge, Opera */
-	.rz-number-field__input::-webkit-outer-spin-button,
-	.rz-number-field__input::-webkit-inner-spin-button {
-		-webkit-appearance: none;
-		margin: 0;
-	}
-
-	/* Firefox */
-	.rz-number-field__input[type='number'] {
-		-webkit-appearance: textfield;
-		        appearance: textfield;
-		-moz-appearance: textfield;
-	}
+  .rz-number-field__input-wrapper {
+    width: 6rem;
+    display: flex;
+    height: var(--rz-size-11);
+    align-items: center;
+    border-radius: var(--rz-radius-lg);
+  }
+
+  .rz-number-field__input {
+    background-color: hsl(var(--rz-input-bg));
+    height: 100%;
+    width: 100%;
+    flex: 1;
+    justify-content: center;
+    border-top-left-radius: var(--rz-radius-lg);
+    border-bottom-left-radius: var(--rz-radius-lg);
+    border: 1px solid var(--rz-input-border-color);
+    text-align: center;
+    transition: all 0.2s ease;
+  }
+
+  .rz-number-field__input:focus-visible {
+    position: relative;
+    z-index: 10;
+    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-number-field__controls {
+    display: flex;
+    flex-direction: column;
+    height: var(--rz-size-11);
+  }
+
+  .rz-number-field__chevron {
+    background-color: hsl(var(--rz-input-bg));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--rz-size-8);
+    flex: 1;
+    border-right: 1px solid var(--rz-input-border-color);
+    transition: all 0.2s ease;
+  }
+
+  .rz-number-field__chevron:hover {
+    background-color: hsl(var(--rz-gray-9));
+  }
+
+  .rz-number-field__chevron:focus-visible {
+    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));
+    position: relative;
+    z-index: 10;
+    outline: none;
+  }
+
+  .rz-number-field__chevron--up {
+    border-top: 1px solid var(--rz-input-border-color);
+    border-top-right-radius: var(--rz-radius-lg);
+    border-bottom: 1px solid var(--rz-input-border-color);
+  }
+
+  .rz-number-field__chevron--down {
+    border-bottom-right-radius: var(--rz-radius-lg);
+    border-bottom: 1px solid var(--rz-input-border-color);
+  }
+
+  /* Chrome, Safari, Edge, Opera */
+  .rz-number-field__input::-webkit-outer-spin-button,
+  .rz-number-field__input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Firefox */
+  .rz-number-field__input[type='number'] {
+    -webkit-appearance: textfield;
+            appearance: textfield;
+    -moz-appearance: textfield;
+  }
 </style>