@xleddyl/443-components-vue 0.8.3 → 0.8.4

package/README.md

@@ -110,20 +110,22 @@ Input tokens, declared only on the outermost root so nested roots inherit them:
 
 A few component tokens are unset by default and only exist to be overridden on a root (or any ancestor). Unset, every one keeps the library look. The full list with defaults is in [CONVENTIONS.md](./CONVENTIONS.md#tokens):
 
-| Area     | Tokens                                                                                                                                                                                                                          |
-| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Type     | `--k-font-weight` (400), `--k-font-weight-medium` (500), `--k-font-weight-strong` (600), `--k-font-weight-display` (650)                                                                                                        |
-| Buttons  | `--k-btn-highlight`, `--k-btn-shadow` (`0 0 #0000` for a flat button), `--k-btn-border`, `--k-btn-padding-x`, `--k-btn-font-size`, `--k-btn-icon-size`, `--k-press-scale` (0.97)                                                |
-| Fields   | `--k-field-padding-x`                                                                                                                                                                                                           |
-| Overlays | `--k-modal-radius`, `--k-modal-shadow`, `--k-drawer-radius`, `--k-drawer-shadow`, `--k-popover-radius`, `--k-popover-shadow`, `--k-toast-radius`, `--k-toast-shadow`, `--k-scrim-blur` (3px)                                    |
-| Tooltip  | `--k-tooltip-background`, `--k-tooltip-text`, `--k-tooltip-border`, `--k-tooltip-radius`, `--k-tooltip-shadow`, `--k-tooltip-padding`                                                                                           |
-| Shell    | `--k-sidebar-width` (15rem), `--k-sidebar-rail-width`, `--k-topbar-height` (3rem), `--k-shell-inset`, `--k-shell-padding`, `--k-shell-content`                                                                                  |
-| Switch   | `--k-switch-track-width`, `--k-switch-track-height`, `--k-switch-thumb-size` (md size)                                                                                                                                          |
-| Badge    | `--k-badge-radius`, `--k-badge-font`, `--k-badge-font-size`, `--k-badge-font-weight`, `--k-badge-text-transform`, `--k-badge-letter-spacing`                                                                                    |
-| DataGrid | `--k-grid-header-background`, `--k-grid-header-text`, `--k-grid-header-font`, `--k-grid-header-font-weight`, `--k-grid-header-font-size` (12px), `--k-grid-font-size` (13px), `--k-grid-radius`, `--k-grid-selected-background` |
-| Charts   | `--k-chart-1` to `--k-chart-8` (series palette)                                                                                                                                                                                 |
-
-Some tokens are meant for one element: set `--k-btn-tone`, `--k-btn-on-tone` and `--k-btn-tone-text` on a button for a brand tone outside `Tone` (a lime fill with green text), and `--k-badge-background`, `--k-badge-color` and `--k-badge-border-color` on a badge for a custom pill color. `variant="subtle"` is a borderless tinted fill (`--k-fill` for the neutral tone).
+| Area      | Tokens                                                                                                                                                                                                                                    |
+| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Type      | `--k-font-weight` (400), `--k-font-weight-medium` (500), `--k-font-weight-strong` (600), `--k-font-weight-display` (650)                                                                                                                  |
+| Buttons   | `--k-btn-highlight`, `--k-btn-shadow` (`0 0 #0000` for a flat button), `--k-btn-border`, `--k-btn-hover-background`, `--k-btn-active-background`, `--k-btn-padding-x`, `--k-btn-font-size`, `--k-btn-icon-size`, `--k-press-scale` (0.97) |
+| Fields    | `--k-field-padding-x`                                                                                                                                                                                                                     |
+| Overlays  | `--k-modal-radius`, `--k-modal-shadow`, `--k-drawer-radius`, `--k-drawer-shadow`, `--k-popover-radius`, `--k-popover-shadow`, `--k-toast-radius`, `--k-toast-shadow`, `--k-scrim-blur` (3px)                                              |
+| Tooltip   | `--k-tooltip-background`, `--k-tooltip-text`, `--k-tooltip-border`, `--k-tooltip-radius`, `--k-tooltip-shadow`, `--k-tooltip-padding`                                                                                                     |
+| Shell     | `--k-sidebar-width` (15rem), `--k-sidebar-rail-width`, `--k-topbar-height` (3rem), `--k-shell-inset`, `--k-shell-padding`, `--k-shell-content`                                                                                            |
+| Switch    | `--k-switch-track-width`, `--k-switch-track-height`, `--k-switch-thumb-size` (md size)                                                                                                                                                    |
+| Separator | `--k-separator-heading-font-size` (0.9375rem)                                                                                                                                                                                             |
+| Calendar  | `--k-calendar-day-radius`, `--k-calendar-unavailable-color`, `--k-calendar-unavailable-decoration` (line-through), `--k-calendar-unavailable-opacity` (0.6)                                                                               |
+| Badge     | `--k-badge-radius`, `--k-badge-font`, `--k-badge-font-size`, `--k-badge-font-weight`, `--k-badge-text-transform`, `--k-badge-letter-spacing`                                                                                              |
+| DataGrid  | `--k-grid-header-background`, `--k-grid-header-text`, `--k-grid-header-font`, `--k-grid-header-font-weight`, `--k-grid-header-font-size` (12px), `--k-grid-font-size` (13px), `--k-grid-radius`, `--k-grid-selected-background`           |
+| Charts    | `--k-chart-1` to `--k-chart-8` (series palette)                                                                                                                                                                                           |
+
+Some tokens are meant for one element: set `--k-btn-tone`, `--k-btn-on-tone` and `--k-btn-tone-text` on a button for a brand tone outside `Tone` (a lime fill with green text), and `--k-badge-background`, `--k-badge-color` and `--k-badge-border-color` on a badge for a custom pill color. `variant="subtle"` is a borderless tinted fill (`--k-fill` for the neutral tone). For solid buttons without hover darkening, declare the fill tokens on the button so `var(--k-btn-tone)` resolves per tone: `.k-btn-solid { --k-btn-hover-background: var(--k-btn-tone); --k-btn-active-background: var(--k-btn-tone) }` (the neutral solid button rests on `--k-text`).
 
 Contrast is part of the tokens: `--k-text-muted` is the lightest text color (4.5:1), `--k-text-dimmed` is for icons and decoration (3:1), `--k-ring` is an opaque focus color (3:1 on every surface), and `--k-danger-text`, `--k-success-text`, `--k-warning-text`, `--k-info-text` color status text (4.5:1, also on soft tints). Every preset sets them for light and dark; keep the same ratios when you override them.
 
@@ -247,6 +249,8 @@ Issues are keyed by their first path segment and by their full dotted path (`blo
 
 Built-in messages follow the active language. `messages` overrides them for one form.
 
+`schema` also accepts a ref or getter (`MaybeRefOrGetter<FormSchema>`), for one form component reused with different fields, labels or rules per open, mode or language: `schema: () => (mode.value === 'edit' ? editSchema : createSchema)`. Field definitions, labels, `required` and rules follow the source (after the first submit the form validates again when they change). A field that appears starts from its `initial` and is clean; a field that disappears loses its value, error and touched state. With `values` the host owns the values, so only rules and labels change. `form.schema` always returns the current definitions.
+
 `required` treats `null`, `undefined`, blank strings, empty arrays, `NaN` and plain objects whose values are all empty (a per-language map like `{ it: '', en: '' }`) as empty. A field with another idea of empty passes `isEmpty: (value) => boolean`, which replaces the check for that field. `isEmptyValue(value)` is the default check, exported for reuse.
 
 A `validate` function returns a message, `false` (the built-in invalid message), nothing (valid), or `{ message, params }` when the message needs values: `validate: (value) => value.length > 80 ? { message: 'errors.maxLength', params: { max: 80 } } : undefined`. The params reach `translateMessage` as `context.params`; without a translator they fill the `{name}` placeholders of the message.
@@ -326,7 +330,7 @@ Composables: `useTheme`, `usePreset`, `useForm`, `useField`, `useFieldControl`,
 - `Pagination` takes `showEdges` (first and last page buttons, `firstLabel`, `lastLabel`) and `showJump` (a typed page number, `jumpLabel`). Both are off by default. `page` is clamped to the page count only when `total` is known: while `total` is `0` or `loading` is set (it also sets `aria-busy`), the page is kept, so a server reload does not reset it.
 - `FilterPills` can list active filters: options with `removable: true` render as active pills with a remove button (`removeLabel`, a `'Remove {label}'` template). Clicking the pill emits `select(value)`, the button emits `remove(value)` (and drops the value from the model when it is selected); focus moves to the next pill when the removed one disappears.
 - `Calendar` takes `dayText: (iso) => string | undefined`, a short line under each day number that is also added to the day's accessible name (availability, prices). The `#day` slot (`{ date, number, text, selected, unavailable, inMonth }`) replaces the cell content; it is decorative, so announced text still comes from `dayText`.
-- `Separator` takes `description` (or `#description`) under its label, and an `#actions` slot rendered next to them (a small add or edit button).
+- `Separator` takes `description` (or `#description`) under its label, and an `#actions` slot rendered next to them (a small add or edit button). `variant="heading"` (`SeparatorVariant`, `'label' | 'heading'`, default `'label'`) shows the label as a section title on its own (an `h3`, `level` changes it) with the description below and the actions at the end, under one line above instead of the small muted label between two lines. `:lines="false"` (default `true`) hides the lines of either variant; `--k-separator-heading-font-size` (0.9375rem) sizes the heading.
 - `Modal` takes `width` (any CSS length, overrides `size`) and `minHeight` (keeps the height steady while tabs or steps change). The size widths are tokens: `--k-modal-width-sm` (26rem), `--k-modal-width-md` (32rem), `--k-modal-width-lg` (50rem), `--k-modal-width-xl` (64rem).
 - `Tabs` items take `dot: true` for a small indicator without a number (`dotTone`, default `danger`; `dotLabel` is the hidden text, default "Needs attention").
 - `DropdownMenu` takes `matchTriggerWidth` (the menu is at least as wide as its trigger) and `minWidth` (a CSS length).
@@ -635,7 +639,7 @@ Accessibility related props and defaults:
 - `DataGrid` sort is a model: `v-model:sort` (`{ column, direction } | null`) sets the sorted column from outside (server side sort, a sort restored from the URL) and follows header clicks. Leave it unset for an uncontrolled grid. `sortChange` still fires with `serverSort`.
 - `DataGrid` takes `rowHeight` and `headerHeight` (pixels) for an exact row size on top of `density`, and `headerText: (field, column) => string | undefined` to name every column that has a `field` and no `headerName` (from your i18n).
 - `DataGrid` `filterable` registers the AG Grid text, number and date filters (`registerGridFilterModules()` does it without the prop) and turns `filter` on for every column. `filterChange(model, event)` fires with `api.getFilterModel()` whenever a column filter changes, also when the filters come from `gridOptions` or your own registered modules.
-- `DateCell` takes `relative: true` (or `Intl.RelativeTimeFormatOptions`) in `cellRendererParams` for "3 days ago"; the absolute date stays in the `title`.
+- `DateCell` takes `relative: true` (or `Intl.RelativeTimeFormatOptions`) in `cellRendererParams` for "3 days ago"; the absolute date stays in the `title`. `relativeWithin` (milliseconds, default unset: always relative) shows the absolute date instead once the value is further than that from now, in the past or the future (`relativeWithin: 7 * 86_400_000` keeps "3 days ago" and prints older dates in full).
 - `DataGrid` takes `gridOptions` for any AG Grid option it does not wrap (`rowHeight`, `onCellEditingStopped`, `onFilterChanged`, ...). A prop of `DataGrid` wins only when it is set: `getRowId`, `rowSelection` (when `selectable` is off), `autoSizeStrategy` (also `undefined` to turn it off), `tooltipShowDelay`, `overlayNoRowsTemplate` and `overlayLoadingTemplate` from `gridOptions` are used otherwise; `defaultColDef` and `localeText` are merged over the component defaults, and `context` is merged under the cell context. Handlers from both run.
 - `DataGrid` row ids: `getRowId: (params) => string` (wins), `rowIdKey` (a field of the row), or `gridOptions.getRowId`.
 - `DataGrid` `fill` makes the grid, with its toolbar and footer, fill its parent (a flex or grid item with `flex: 1; min-height: 0`, or `height: 100%` in a block with a height) instead of the fixed `height`. Ignored with `autoHeight`.

package/dist/components/layout/Separator.vue

@@ -1,18 +1,29 @@
 <template>
    <div
       class="k-separator"
-      :class="[`k-separator-${orientation}`, { 'has-label': hasContent }]"
+      :class="[
+  `k-separator-${orientation}`,
+  { 'k-separator-heading': isHeading, 'has-label': hasContent, 'no-lines': !lines }
+]"
       :role="plain ? 'none' : 'separator'"
       :aria-orientation="!plain && orientation === 'vertical' ? 'vertical' : void 0"
    >
-      <span v-if="hasText" class="k-separator-text">
-         <span v-if="label || $slots.default" class="k-separator-label">
+      <component :is="isHeading ? 'div' : 'span'" v-if="hasText" class="k-separator-text">
+         <component
+            :is="isHeading ? `h${level}` : 'span'"
+            v-if="label || $slots.default"
+            class="k-separator-label"
+         >
             <slot>{{ label }}</slot>
-         </span>
-         <span v-if="description || $slots.description" class="k-separator-description">
+         </component>
+         <component
+            :is="isHeading ? 'p' : 'span'"
+            v-if="description || $slots.description"
+            class="k-separator-description"
+         >
             <slot name="description">{{ description }}</slot>
-         </span>
-      </span>
+         </component>
+      </component>
       <span v-if="$slots.actions" class="k-separator-actions">
          <slot name="actions" />
       </span>
@@ -23,6 +34,9 @@
 import { computed, useSlots } from "vue";
 const props = defineProps({
   orientation: { type: String, required: false, default: "horizontal" },
+  variant: { type: String, required: false, default: "label" },
+  lines: { type: Boolean, required: false, default: true },
+  level: { type: Number, required: false, default: 3 },
   label: { type: String, required: false },
   description: { type: String, required: false },
   decorative: { type: Boolean, required: false }
@@ -32,5 +46,6 @@ const hasText = computed(
   () => Boolean(props.label || slots.default || props.description || slots.description)
 );
 const hasContent = computed(() => Boolean(hasText.value || slots.actions));
+const isHeading = computed(() => props.variant === "heading" && props.orientation === "horizontal");
 const plain = computed(() => props.decorative || hasContent.value);
 </script>

package/dist/components/layout/Separator.vue.d.ts

@@ -1,13 +1,17 @@
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+import type { HeadingLevel, SeparatorVariant } from './types';
+declare var __VLS_13: {}, __VLS_21: {}, __VLS_23: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_13) => any;
 } & {
-    description?: (props: typeof __VLS_3) => any;
+    description?: (props: typeof __VLS_21) => any;
 } & {
-    actions?: (props: typeof __VLS_5) => any;
+    actions?: (props: typeof __VLS_23) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{
     orientation?: "horizontal" | "vertical";
+    variant?: SeparatorVariant;
+    lines?: boolean;
+    level?: HeadingLevel;
     label?: string;
     description?: string;
     decorative?: boolean;
@@ -205,6 +209,9 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_key?: string | undefined | undefined;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     orientation?: "horizontal" | "vertical";
+    variant?: SeparatorVariant;
+    lines?: boolean;
+    level?: HeadingLevel;
     label?: string;
     description?: string;
     decorative?: boolean;
@@ -402,6 +409,9 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_key?: string | undefined | undefined;
 }> & Readonly<{}>, {
     orientation: "horizontal" | "vertical";
+    variant: SeparatorVariant;
+    level: HeadingLevel;
+    lines: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/layout/types.d.ts

@@ -45,6 +45,7 @@ export interface AccordionItem {
 export type AccordionVariant = 'separated' | 'plain' | 'card' | 'outline';
 export type AccordionContentVariant = 'text' | 'neutral';
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type SeparatorVariant = 'label' | 'heading';
 export interface AppShellContext {
     sidebarId: string;
     collapsed: Readonly<{

package/dist/components/overlays/ConfirmDialog.vue.d.ts

@@ -26,6 +26,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
+    flush?: boolean;
     dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
@@ -220,7 +221,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     onVnodeUpdated?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
     onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
-    flush?: boolean;
     sheet?: boolean;
     onClose?: (() => any) | undefined;
     onOpen?: (() => any) | undefined;
@@ -256,6 +256,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
+    flush?: boolean;
     dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
@@ -450,7 +451,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     onVnodeUpdated?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
     onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
-    flush?: boolean;
     sheet?: boolean;
     onClose?: (() => any) | undefined;
     onOpen?: (() => any) | undefined;

package/dist/components/overlays/ConfirmHost.vue.d.ts

@@ -16,6 +16,7 @@ declare const __VLS_export: import("vue").DefineComponent<Partial<NonNullable<{
     readonly style?: import("vue").StyleValue;
     readonly results?: (string | number) | undefined;
     readonly placeholder?: string | undefined | undefined;
+    readonly flush?: boolean | undefined;
     readonly dir?: string | undefined | undefined;
     readonly class?: import("vue").ClassValue;
     readonly role?: string | undefined | undefined;
@@ -210,7 +211,6 @@ declare const __VLS_export: import("vue").DefineComponent<Partial<NonNullable<{
     readonly onVnodeUpdated?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
     readonly onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     readonly onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
-    readonly flush?: boolean | undefined;
     readonly sheet?: boolean | undefined;
     readonly onClose?: (() => any) | undefined;
     readonly onOpen?: (() => any) | undefined;
@@ -242,6 +242,7 @@ declare const __VLS_export: import("vue").DefineComponent<Partial<NonNullable<{
     readonly style?: import("vue").StyleValue;
     readonly results?: (string | number) | undefined;
     readonly placeholder?: string | undefined | undefined;
+    readonly flush?: boolean | undefined;
     readonly dir?: string | undefined | undefined;
     readonly class?: import("vue").ClassValue;
     readonly role?: string | undefined | undefined;
@@ -436,7 +437,6 @@ declare const __VLS_export: import("vue").DefineComponent<Partial<NonNullable<{
     readonly onVnodeUpdated?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
     readonly onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     readonly onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
-    readonly flush?: boolean | undefined;
     readonly sheet?: boolean | undefined;
     readonly onClose?: (() => any) | undefined;
     readonly onOpen?: (() => any) | undefined;

package/dist/components/templates/SettingsModal.vue.d.ts

@@ -42,6 +42,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     description?: string;
+    flush?: boolean;
     dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
@@ -236,7 +237,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     onVnodeUpdated?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
     onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
-    flush?: boolean;
     sheet?: boolean;
     onCancel?: ((payload: Event) => void) | undefined;
     rootClass?: unknown;
@@ -281,6 +281,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     description?: string;
+    flush?: boolean;
     dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
@@ -475,7 +476,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     onVnodeUpdated?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
     onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
-    flush?: boolean;
     sheet?: boolean;
     onCancel?: ((payload: Event) => void) | undefined;
     rootClass?: unknown;

package/dist/composables/useForm.d.ts

@@ -61,7 +61,7 @@ export type FormWarningsFunction<V> = (values: V) => FormWarningsResult | Promis
 export type FormWarnings<V> = StandardSchemaV1 | Readonly<Ref<StandardSchemaV1 | undefined>> | FormWarningsFunction<V>;
 export type FormPath<V> = (keyof V & string) | (string & {});
 export interface UseFormOptions<S extends FormSchema = FormSchema, V extends object = FormValues<S>> {
-    schema?: S;
+    schema?: MaybeRefOrGetter<S>;
     values?: MaybeRefOrGetter<V>;
     validator?: MaybeRefOrGetter<StandardSchemaV1 | undefined>;
     warnings?: FormWarnings<V>;

package/dist/composables/useForm.mjs

@@ -105,8 +105,8 @@ function replaceEntries(target, next, inScope = () => true) {
   }
 }
 export function useForm(options) {
-  const schema = options.schema ?? {};
-  const schemaNames = Object.keys(schema);
+  const schema = computed(() => toValue(options.schema) ?? {});
+  const schemaNames = computed(() => Object.keys(schema.value));
   const external = options.values !== void 0;
   const { t, locale } = useLocale();
   const config = hasInjectionContext() && inject(FORM_CONFIG_KEY, null) || null;
@@ -123,19 +123,21 @@ export function useForm(options) {
   };
   const translateIssues = (issues, kind) => issues.map((issue) => {
     const name = issue.path.map(String).join(".") || void 0;
-    const label = name ? schema[name]?.label : void 0;
+    const label = name ? schema.value[name]?.label : void 0;
     return { ...issue, message: translate(issue.message, { name, label, kind }) };
   });
   const validateOn = options.validateOn ?? "submit";
   const issueKey = options.issueKey ?? defaultIssueKey;
-  const initialValues = () => Object.fromEntries(schemaNames.map((name) => [name, resolveInitial(schema[name])]));
+  const initialValues = () => Object.fromEntries(
+    schemaNames.value.map((name) => [name, resolveInitial(schema.value[name])])
+  );
   const internalValues = external ? void 0 : reactive(initialValues());
   const target = () => external ? toValue(options.values) : internalValues;
   let baseline = cloneValue(target());
   const baselineVersion = ref(0);
   const names = computed(() => {
-    if (!external) return schemaNames;
-    return [.../* @__PURE__ */ new Set([...schemaNames, ...Object.keys(target())])];
+    if (!external) return schemaNames.value;
+    return [.../* @__PURE__ */ new Set([...schemaNames.value, ...Object.keys(target())])];
   });
   const errors = reactive({});
   const warnings = reactive({});
@@ -184,7 +186,7 @@ export function useForm(options) {
     return evaluateValidator();
   }
   function evaluateRules(name) {
-    const definition = schema[name];
+    const definition = schema.value[name];
     if (!definition) return void 0;
     const value = readValue(name);
     const fieldMessages = { ...messages.value, ...definition.messages };
@@ -394,6 +396,46 @@ export function useForm(options) {
     },
     { deep: true }
   );
+  function dropErrorsWithin(name) {
+    for (const source of [ruleErrors, manualErrors, issueErrors, touched]) {
+      for (const key of Object.keys(source)) {
+        if (isWithin(key, name)) delete source[key];
+      }
+    }
+  }
+  watch(
+    schemaNames,
+    (next, previous) => {
+      const added = next.filter((name) => !previous.includes(name));
+      const removed = previous.filter((name) => !next.includes(name));
+      if (!added.length && !removed.length) return;
+      if (internalValues) {
+        for (const name of removed) delete internalValues[name];
+        for (const name of added) internalValues[name] = resolveInitial(schema.value[name]);
+      }
+      for (const name of removed) {
+        if (names.value.includes(name)) continue;
+        if (!external) delete baseline[name];
+        snapshots.delete(name);
+        fieldRuns.delete(name);
+        dropErrorsWithin(name);
+      }
+      for (const name of added) {
+        if (!external) baseline[name] = cloneValue(readValue(name));
+        snapshots.set(name, cloneValue(readValue(name)));
+      }
+      baselineVersion.value++;
+      syncErrors();
+    },
+    { flush: "sync" }
+  );
+  watch(
+    schema,
+    () => {
+      if (submitCount.value > 0) void validate();
+    },
+    { deep: 2 }
+  );
   watch(
     () => toValue(options.validator),
     () => {
@@ -425,7 +467,9 @@ export function useForm(options) {
     });
   }
   return {
-    schema,
+    get schema() {
+      return schema.value;
+    },
     get values() {
       return target();
     },
@@ -447,7 +491,7 @@ export function useForm(options) {
     setErrors,
     clearErrors,
     touch,
-    isRequired: (name) => Boolean(schema[name]?.required),
+    isRequired: (name) => Boolean(schema.value[name]?.required),
     reset,
     submit
   };

package/dist/grid/cells/DateCell.vue

@@ -3,7 +3,7 @@
       v-if="formatted"
       class="k-data-grid-date k-tabular"
       :datetime="iso"
-      :title="params.relative ? absolute : void 0"
+      :title="isRelative ? absolute : void 0"
       >{{ formatted }}</time
    >
    <EmptyCell v-else :context="cellContext" />
@@ -30,9 +30,14 @@ const absolute = computed(
     date.value
   ) : ""
 );
+const isRelative = computed(() => {
+  if (!date.value || !props.params.relative) return false;
+  const within = props.params.relativeWithin;
+  return within === void 0 || Math.abs(Date.now() - date.value.getTime()) <= within;
+});
 const formatted = computed(() => {
   const relative = props.params.relative;
-  if (!date.value || !relative) return absolute.value;
+  if (!date.value || !relative || !isRelative.value) return absolute.value;
   return formatRelativeTime(
     date.value,
     locale.value,

package/dist/grid/types.d.ts

@@ -39,6 +39,7 @@ export interface DateCellParams {
     locale?: string;
     options?: Intl.DateTimeFormatOptions;
     relative?: boolean | Intl.RelativeTimeFormatOptions;
+    relativeWithin?: number;
 }
 export interface BadgeCellParams {
     tones?: Record<string, Tone>;

package/dist/internal/overlays/OverlayView.vue.d.ts

@@ -11,6 +11,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     description?: string;
+    flush?: boolean;
     dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
@@ -207,7 +208,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     onVnodeUpdated?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
     onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
-    flush?: boolean;
     sheet?: boolean;
     onCancel?: ((payload: Event) => void) | undefined;
     side?: import("../../index.ts").DrawerSide;
@@ -234,6 +234,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     description?: string;
+    flush?: boolean;
     dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
@@ -430,7 +431,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     onVnodeUpdated?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
     onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
-    flush?: boolean;
     sheet?: boolean;
     onCancel?: ((payload: Event) => void) | undefined;
     side?: import("../../index.ts").DrawerSide;

package/dist/styles/core/button.css

@@ -141,22 +141,22 @@
 }
 
 .k-btn-solid:hover:not(:disabled, [aria-disabled='true']) {
-   background: color-mix(in oklab, var(--k-btn-tone) 90%, black);
+   background: var(--k-btn-hover-background, color-mix(in oklab, var(--k-btn-tone) 90%, black));
    box-shadow:
       inset 0 1px 0 var(--k-btn-highlight, rgb(255 255 255 / 0.22)),
       var(--k-btn-shadow, 0 2px 8px -2px color-mix(in oklab, var(--k-btn-tone) 60%, transparent));
 }
 
 .k-btn-solid:active:not(:disabled, [aria-disabled='true']) {
-   background: color-mix(in oklab, var(--k-btn-tone) 82%, black);
+   background: var(--k-btn-active-background, color-mix(in oklab, var(--k-btn-tone) 82%, black));
 }
 
 .k-btn-accent.k-btn-solid:hover:not(:disabled, [aria-disabled='true']) {
-   background: var(--k-accent-hover);
+   background: var(--k-btn-hover-background, var(--k-accent-hover));
 }
 
 .k-btn-accent.k-btn-solid:active:not(:disabled, [aria-disabled='true']) {
-   background: var(--k-accent-press);
+   background: var(--k-btn-active-background, var(--k-accent-press));
 }
 
 .k-btn-neutral.k-btn-solid {
@@ -167,12 +167,18 @@
 }
 
 .k-btn-neutral.k-btn-solid:hover:not(:disabled, [aria-disabled='true']) {
-   background: color-mix(in oklab, var(--k-text) 86%, var(--k-surface));
+   background: var(
+      --k-btn-hover-background,
+      color-mix(in oklab, var(--k-text) 86%, var(--k-surface))
+   );
    box-shadow: inset 0 1px 0 var(--k-btn-highlight, rgb(255 255 255 / 0.14));
 }
 
 .k-btn-neutral.k-btn-solid:active:not(:disabled, [aria-disabled='true']) {
-   background: color-mix(in oklab, var(--k-text) 80%, var(--k-surface));
+   background: var(
+      --k-btn-active-background,
+      color-mix(in oklab, var(--k-text) 80%, var(--k-surface))
+   );
 }
 
 .k-btn-soft {

package/dist/styles/forms/calendar.css

@@ -61,7 +61,7 @@
    place-items: center;
    width: 100%;
    height: 100%;
-   border-radius: var(--k-radius-md);
+   border-radius: var(--k-calendar-day-radius, var(--k-radius-md));
    color: var(--k-text-toned);
    font-variant-numeric: tabular-nums;
    transition:
@@ -134,14 +134,14 @@
 
 .k-calendar-day.is-in-range:first-child::before,
 .k-calendar-day.is-in-preview:first-child::before {
-   border-top-left-radius: var(--k-radius-md);
-   border-bottom-left-radius: var(--k-radius-md);
+   border-top-left-radius: var(--k-calendar-day-radius, var(--k-radius-md));
+   border-bottom-left-radius: var(--k-calendar-day-radius, var(--k-radius-md));
 }
 
 .k-calendar-day.is-in-range:last-child::before,
 .k-calendar-day.is-in-preview:last-child::before {
-   border-top-right-radius: var(--k-radius-md);
-   border-bottom-right-radius: var(--k-radius-md);
+   border-top-right-radius: var(--k-calendar-day-radius, var(--k-radius-md));
+   border-bottom-right-radius: var(--k-calendar-day-radius, var(--k-radius-md));
 }
 
 .k-calendar-day.is-selected .k-calendar-day-number,
@@ -169,9 +169,9 @@
 .k-calendar-day.is-unavailable .k-calendar-day-number,
 .k-calendar-day.is-unavailable:hover .k-calendar-day-number {
    background: transparent;
-   color: var(--k-text-dimmed);
-   text-decoration: line-through;
-   opacity: 0.6;
+   color: var(--k-calendar-unavailable-color, var(--k-text-dimmed));
+   text-decoration: var(--k-calendar-unavailable-decoration, line-through);
+   opacity: var(--k-calendar-unavailable-opacity, 0.6);
 }
 
 .k-calendar.is-disabled {

package/dist/styles/layout/separator.css

@@ -56,3 +56,52 @@
    font-size: 0.75rem;
    color: var(--k-text-muted);
 }
+
+.k-separator.no-lines {
+   background: none;
+}
+
+.k-separator.has-label.no-lines {
+   justify-content: center;
+}
+
+.k-separator.has-label.no-lines::before,
+.k-separator.has-label.no-lines::after,
+.k-separator-heading.has-label::before,
+.k-separator-heading.has-label::after {
+   display: none;
+}
+
+.k-separator-heading.has-label {
+   justify-content: flex-start;
+   padding-top: 0.75rem;
+   border-top: 1px solid var(--k-line);
+}
+
+.k-separator-heading.has-label.no-lines {
+   padding-top: 0;
+   border-top: 0;
+}
+
+.k-separator-heading .k-separator-text {
+   display: flex;
+   flex: 1;
+   align-items: flex-start;
+   gap: 0.25rem;
+   text-align: start;
+}
+
+.k-separator-heading .k-separator-label {
+   margin: 0;
+   font-size: var(--k-separator-heading-font-size, 0.9375rem);
+   font-weight: var(--k-font-weight-strong, 600);
+   line-height: 1.3;
+   color: var(--k-text);
+   white-space: normal;
+}
+
+.k-separator-heading .k-separator-description {
+   margin: 0;
+   font-size: 0.8125rem;
+   line-height: 1.4;
+}

package/dist/styles/shared.css

@@ -126,7 +126,8 @@
    .k-error-code,
    .k-error-title,
    .k-stat-value,
-   .k-settings-modal-title
+   .k-settings-modal-title,
+   .k-separator-heading .k-separator-label
 ) {
    font-family: var(--k-font-display, var(--k-font-sans));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xleddyl/443-components-vue",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "description": "Compact, scoped dashboard components for Vue and Nuxt",
   "license": "MIT",
   "author": "Edoardo Alberti (https://github.com/xleddyl)",