feat(field-editor): modernize field editor with non-blocking modal and viewport clamping

- Completed rewrite of `element_ae_obj_field_editor.svelte` to Svelte 5 + Tailwind v4
- Set `display_modal = true`, `modal_blocking = false`, and `modal_placement = 'center'` as new defaults
- Implemented trigger-relative modal positioning with automatic viewport boundary clamping to prevent off-screen rendering
- Migrated all 12 call sites across core and events modules (Session, Presenter, Location, Exhibit, etc.)
- Removed legacy datetime-to-local manual conversion logic from views as the component now handles it natively
- Retired Skeleton-based legacy component
- Updated testing page and documentation to reflect the new standardized primitive
This commit is contained in:
Scott Idem
2026-06-17 18:01:08 -04:00
parent ea413bbb9b
commit d06dcae94b
14 changed files with 527 additions and 1075 deletions

View File

@@ -27,7 +27,7 @@ import { db_core } from '$lib/ae_core/db_core';
import { ae_util } from '$lib/ae_utils/ae_utils';
import type { ae_DataStore } from '$lib/types/ae_types';
import AE_DataStore_Form from '$lib/elements/element_data_store_form.svelte';
import AE_Field_Editor from '$lib/elements/element_ae_obj_field_editor_new.svelte';
import AE_Field_Editor from '$lib/elements/element_ae_obj_field_editor.svelte';
let account_map = new SvelteMap<string, string>();
@@ -544,8 +544,6 @@ function content_preview(ds: ae_DataStore): string {
edit_label="Code"
current_value={ds.code ?? ''}
placeholder="store_code"
display_modal={true}
modal_blocking={false}
on_success={() => do_search(false)}>
<span class="font-mono" class:opacity-40={!ds.enable}>{ds.code}</span>
{#if !ds.enable}<span class="badge preset-tonal-error ml-1 text-[9px]">off</span>{/if}
@@ -560,8 +558,6 @@ function content_preview(ds: ae_DataStore): string {
edit_label="Name"
current_value={ds.name ?? ''}
placeholder="Display name"
display_modal={true}
modal_blocking={false}
on_success={() => do_search(false)} />
</td>
<td class="px-3 py-2">
@@ -573,8 +569,6 @@ function content_preview(ds: ae_DataStore): string {
current_value={ds.type ?? 'text'}
field_type="select"
select_options={ds_type_options}
display_modal={true}
modal_blocking={false}
on_success={() => do_search(false)}>
<span class="badge {type_badge(ds.type)} font-mono text-[9px] uppercase">{ds.type ?? '?'}</span>
</AE_Field_Editor>

View File

@@ -13,7 +13,7 @@ import { liveQuery } from 'dexie';
import type { key_val } from '$lib/stores/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
import Element_ae_obj_field_editor from '$lib/elements/element_ae_obj_field_editor_new.svelte';
import Element_ae_obj_field_editor from '$lib/elements/element_ae_obj_field_editor.svelte';
import { core_func } from '$lib/ae_core/ae_core_functions';
import {
ae_snip,