diff --git a/src/routes/test/+page.svelte b/src/routes/test/+page.svelte index 14b20dfbc..7c83c1183 100644 --- a/src/routes/test/+page.svelte +++ b/src/routes/test/+page.svelte @@ -107,6 +107,7 @@
AlertDialog Dialog + Drawer
@@ -427,3 +428,4 @@ + diff --git a/src/routes/test/calendar/+page.svelte b/src/routes/test/calendar/+page.svelte index 6388e8169..e266a23d4 100644 --- a/src/routes/test/calendar/+page.svelte +++ b/src/routes/test/calendar/+page.svelte @@ -1,5 +1,5 @@ + +
+
+
+
+ + date-range-field +
- acel · campo de entrada de rango de fechas + + terra · campo de entrada de rango de fechas +
+
+ +
+ Locale: + {#each LOCALES as loc} + + {/each} + {LOCALES.find(l => l.id === locale)?.hint ?? ''} +
+ +
+ Date order: + {#each DATE_ORDERS as order} + + {/each} + + Time format: + {#each TIME_FORMATS as format} + + {/each} +
+ +
+
+ + +
+
+ 01 + Básico +
+

Campo de rango de fechas. Navega con Tab entre segmentos.

+ +
+ + Rango de fechas +
+ + {#snippet children({ segments })} + {#each segments as { part, value }} + {value} + {/each} + {/snippet} + + → + + {#snippet children({ segments })} + {#each segments as { part, value }} + {value} + {/each} + {/snippet} + +
+ +
+ +
+ value: + {fmt(value1)} +
+
+ + +
+
+ 02 + Pre-seleccionado +
+

Rango cargado con días 5–20 del mes actual.

+ +
+ + Rango de fechas +
+ + {#snippet children({ segments })} + {#each segments as { part, value }} + {value} + {/each} + {/snippet} + + → + + {#snippet children({ segments })} + {#each segments as { part, value }} + {value} + {/each} + {/snippet} + +
+ +
+ +
+ value: + {fmt(value2)} +
+
+ + +
+
+ 03 + Validación: 2–30 días +
+

El rango debe tener entre 2 y 30 días.

+ +
+ + Rango de fechas +
+ + {#snippet children({ segments })} + {#each segments as { part, value }} + {value} + {/each} + {/snippet} + + → + + {#snippet children({ segments })} + {#each segments as { part, value }} + {value} + {/each} + {/snippet} + +
+ +
+ +
+ value: + {fmt(value3)} +
+
+ + +
+
+ 04 + granularity="hour" +
+

Incluye hora de inicio y fin. Alterna entre 12h y 24h.

+ +
+ + Reserva de sala +
+ + {#snippet children({ segments })} + {#each segments as { part, value }} + {value} + {/each} + {/snippet} + + → + + {#snippet children({ segments })} + {#each segments as { part, value }} + {value} + {/each} + {/snippet} + +
+ +
+ +
+ value: + {fmt(value4)} +
+
+ + +
+
+ 05 + disabled / readonly +
+

Estados de interacción bloqueada.

+ +
+
+

readonly

+
+ +
+ + {#snippet children({ segments })} + {#each segments as { part, value }} + {value} + {/each} + {/snippet} + + → + + {#snippet children({ segments })} + {#each segments as { part, value }} + {value} + {/each} + {/snippet} + +
+ +
+
+ +
+

disabled

+
+ +
+ + {#snippet children({ segments })} + {#each segments as { part, value }} + {value} + {/each} + {/snippet} + + → + + {#snippet children({ segments })} + {#each segments as { part, value }} + {value} + {/each} + {/snippet} + +
+ +
+
+
+
- + + + +
+
+ 06 - Defaults vía AcelConfig + + Defaults vía TerraConfig +
+

El componente no recibe locale, dateOrder ni timeFormat directamente; los hereda del config reactivo.

+ +
- + + + + Rango desde config +
+ + {#snippet children({ segments })} + {#each segments as { part, value }} + {value} + {/each} + {/snippet} + + → + + {#snippet children({ segments })} + {#each segments as { part, value }} + {value} + {/each} + {/snippet} + +
+ - + + +
+ +
+ value: + {fmt(value6)} +
+
+ +
+
+
+ + + + + diff --git a/src/routes/test/drawer/+page.svelte b/src/routes/test/drawer/+page.svelte new file mode 100644 index 000000000..2a4a8c306 --- /dev/null +++ b/src/routes/test/drawer/+page.svelte @@ -0,0 +1,297 @@ + + + + Drawer + + +
+
+
+

Terra

+

Drawer

+

+ Primitive headless para paneles laterales o inferiores, montado sobre el stack de + overlays de Dialog. +

+
+
+ Indice general + Hub terra +
+
+ +
+
+

Lado

+
+ {#each SIDES as value} + + {/each} +
+
+ +
+
+

Básico

+

Abre un drawer usando el lado seleccionado arriba.

+ + + Open drawer + + + + {#snippet children({ side: activeSide })} +
+
+ Panel {activeSide} + + Usa el mismo comportamiento de foco, escape y dismiss que Dialog. + +
+ Close +
+
+

Este contenido recibe data-side y data-drawer-content.

+

Eso nos deja estilizar o animar en air más adelante sin tocar la semántica base.

+
+ {/snippet} + + + +
+ +
+

Controlado

+

El estado se gobierna desde fuera.

+ + + Controlled drawer + + + +
+ Controlled bottom drawer + Cerrar +
+

Ideal para mobile flows, filtros o paneles contextuales.

+ + + +
+
+
+
+ + diff --git a/src/routes/test/link-preview/+page.svelte b/src/routes/test/link-preview/+page.svelte index 0297f3d59..d4ea8e3cf 100644 --- a/src/routes/test/link-preview/+page.svelte +++ b/src/routes/test/link-preview/+page.svelte @@ -1,5 +1,5 @@ @@ -61,8 +61,8 @@
-

ContentStatic + AcelConfig

- +

ContentStatic + TerraConfig

+
Preview estático @@ -75,7 +75,7 @@
- +
diff --git a/src/routes/test/range-calendar/+page.svelte b/src/routes/test/range-calendar/+page.svelte index 923dcdb8d..aba7773d3 100644 --- a/src/routes/test/range-calendar/+page.svelte +++ b/src/routes/test/range-calendar/+page.svelte @@ -1,5 +1,5 @@ + + diff --git a/src/uix/terra/drawer/components/drawer-content.svelte b/src/uix/terra/drawer/components/drawer-content.svelte new file mode 100644 index 000000000..b1aae07a0 --- /dev/null +++ b/src/uix/terra/drawer/components/drawer-content.svelte @@ -0,0 +1,64 @@ + + + + +{#if contentState.shouldRender || forceMount} + {#if child} + {@render child({ props: mergedProps, open: contentState.root.opts.open.current, side })} + {:else} +
+ {@render children?.({ open: contentState.root.opts.open.current, side })} +
+ {/if} +{/if} diff --git a/src/uix/terra/drawer/components/drawer-description.svelte b/src/uix/terra/drawer/components/drawer-description.svelte new file mode 100644 index 000000000..0272bf091 --- /dev/null +++ b/src/uix/terra/drawer/components/drawer-description.svelte @@ -0,0 +1,8 @@ + + + diff --git a/src/uix/terra/drawer/components/drawer-overlay.svelte b/src/uix/terra/drawer/components/drawer-overlay.svelte new file mode 100644 index 000000000..e20008ac3 --- /dev/null +++ b/src/uix/terra/drawer/components/drawer-overlay.svelte @@ -0,0 +1,19 @@ + + + + {#snippet children(props)} + {@render children?.(props)} + {/snippet} + diff --git a/src/uix/terra/drawer/components/drawer-title.svelte b/src/uix/terra/drawer/components/drawer-title.svelte new file mode 100644 index 000000000..4f606d058 --- /dev/null +++ b/src/uix/terra/drawer/components/drawer-title.svelte @@ -0,0 +1,8 @@ + + + diff --git a/src/uix/terra/drawer/components/drawer-trigger.svelte b/src/uix/terra/drawer/components/drawer-trigger.svelte new file mode 100644 index 000000000..eeb992133 --- /dev/null +++ b/src/uix/terra/drawer/components/drawer-trigger.svelte @@ -0,0 +1,8 @@ + + + diff --git a/src/uix/terra/drawer/components/drawer.svelte b/src/uix/terra/drawer/components/drawer.svelte new file mode 100644 index 000000000..88f42e40a --- /dev/null +++ b/src/uix/terra/drawer/components/drawer.svelte @@ -0,0 +1,24 @@ + + +{@render children?.()} diff --git a/src/uix/terra/drawer/exports.ts b/src/uix/terra/drawer/exports.ts new file mode 100644 index 000000000..fdb8491dc --- /dev/null +++ b/src/uix/terra/drawer/exports.ts @@ -0,0 +1,20 @@ +export { default as Root } from './components/drawer.svelte'; +export { default as Trigger } from './components/drawer-trigger.svelte'; +export { default as Content } from './components/drawer-content.svelte'; +export { default as Overlay } from './components/drawer-overlay.svelte'; +export { default as Title } from './components/drawer-title.svelte'; +export { default as Description } from './components/drawer-description.svelte'; +export { default as Close } from './components/drawer-close.svelte'; +export { default as Portal } from '../base/portal/portal.svelte'; + +export type { + DrawerRootProps as RootProps, + DrawerTriggerProps as TriggerProps, + DrawerPortalProps as PortalProps, + DrawerContentProps as ContentProps, + DrawerOverlayProps as OverlayProps, + DrawerTitleProps as TitleProps, + DrawerDescriptionProps as DescriptionProps, + DrawerCloseProps as CloseProps, + DrawerSide, +} from './types'; diff --git a/src/uix/terra/drawer/index.ts b/src/uix/terra/drawer/index.ts new file mode 100644 index 000000000..4bf3bc89f --- /dev/null +++ b/src/uix/terra/drawer/index.ts @@ -0,0 +1,2 @@ +export * as Drawer from './exports'; +export * from './exports'; diff --git a/src/uix/terra/drawer/types.ts b/src/uix/terra/drawer/types.ts new file mode 100644 index 000000000..c98d99040 --- /dev/null +++ b/src/uix/terra/drawer/types.ts @@ -0,0 +1,44 @@ +import type { + DialogCloseProps, + DialogContentProps, + DialogDescriptionProps, + DialogOverlayProps, + DialogPortalProps, + DialogRootProps, + DialogTitleProps, + DialogTriggerProps, +} from '../dialog/types'; +import type { WithChild, Without } from '../utils/types'; +import type { TerraPrimitiveDivAttributes } from '../utils/attributes'; + +export type DrawerSide = 'top' | 'right' | 'bottom' | 'left'; + +export type DrawerRootProps = DialogRootProps; + +export type DrawerTriggerProps = DialogTriggerProps; + +export type DrawerPortalProps = DialogPortalProps; + +export type DrawerOverlayProps = DialogOverlayProps; + +export type DrawerContentSnippetProps = { open: boolean; side: DrawerSide }; + +export type DrawerContentPropsWithoutHTML = WithChild< + { + side?: DrawerSide; + forceMount?: boolean; + onOpenAutoFocus?: (event: Event) => void; + onCloseAutoFocus?: (event: Event) => void; + onEscapeKeydown?: (event: KeyboardEvent) => void; + }, + DrawerContentSnippetProps +>; + +export type DrawerContentProps = DrawerContentPropsWithoutHTML & + Without; + +export type DrawerTitleProps = DialogTitleProps; + +export type DrawerDescriptionProps = DialogDescriptionProps; + +export type DrawerCloseProps = DialogCloseProps; diff --git a/src/uix/terra/index.ts b/src/uix/terra/index.ts index 863d63db9..35faa530e 100644 --- a/src/uix/terra/index.ts +++ b/src/uix/terra/index.ts @@ -41,6 +41,7 @@ export * as Command from './command'; export * as AlertDialog from './alert-dialog'; export * as Dialog from './dialog'; +export * as Drawer from './drawer'; export { TerraConfig } from './base/config/exports'; export type { @@ -65,3 +66,4 @@ export * as DateRangePicker from './date-range-picker'; +