@xleddyl/443-components-vue 0.8.0 → 0.8.2

package/dist/components/overlays/Modal.vue

@@ -4,6 +4,7 @@
       v-model:open="open"
       prefix="k-modal"
       :root-class="[`k-modal-${size}`, { 'is-sheet': sheet && size !== 'fullscreen' }]"
+      :style="sizeStyle"
       :title="title"
       :description="description"
       :label="label"
@@ -26,7 +27,7 @@
 <script setup>
 import { computed, useTemplateRef } from "vue";
 import DialogFrame from "../../internal/overlays/DialogFrame.vue";
-defineProps({
+const props = defineProps({
   title: { type: String, required: false },
   description: { type: String, required: false },
   label: { type: String, required: false },
@@ -37,8 +38,14 @@ defineProps({
   sheet: { type: Boolean, required: false, default: true },
   flush: { type: Boolean, required: false },
   loading: { type: Boolean, required: false },
-  beforeClose: { type: Function, required: false }
+  beforeClose: { type: Function, required: false },
+  width: { type: String, required: false },
+  minHeight: { type: String, required: false }
 });
+const sizeStyle = computed(() => ({
+  "--k-modal-custom-width": props.width,
+  "--k-modal-min-height": props.minHeight
+}));
 const slots = defineSlots();
 const slotNames = computed(() => Object.keys(slots));
 const emit = defineEmits(["open", "close", "afterLeave"]);

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

@@ -13,6 +13,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     flush?: boolean;
     loading?: boolean;
     beforeClose?: DialogBeforeClose;
+    width?: string;
+    minHeight?: string;
     open?: boolean | undefined;
     key?: PropertyKey | undefined;
     prefix?: "k-modal" | "k-drawer" | undefined;
@@ -234,6 +236,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     flush?: boolean;
     loading?: boolean;
     beforeClose?: DialogBeforeClose;
+    width?: string;
+    minHeight?: string;
     open?: boolean | undefined;
     key?: PropertyKey | undefined;
     prefix?: "k-modal" | "k-drawer" | undefined;

package/dist/components/templates/DashboardLayout.vue

@@ -10,6 +10,7 @@
       :close-label="closeLabel"
       :skip-label="skipLabel"
       :fluid="fluid"
+      :fill="fill"
       :topbar="hasDesktopTopbar"
       :storage-key="storageKey || void 0"
       :shortcut="shortcut"
@@ -193,6 +194,7 @@ const props = defineProps({
   storageKey: { type: [String, Boolean], required: false, default: "k-sidebar-collapsed" },
   shortcut: { type: [String, Boolean], required: false, default: "mod+b" },
   fluid: { type: Boolean, required: false },
+  fill: { type: Boolean, required: false },
   viewTransition: { type: Boolean, required: false, default: true },
   navLabel: { type: String, required: false },
   sidebarLabel: { type: String, required: false },

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

@@ -34,6 +34,7 @@ declare const __VLS_export: <T = unknown>(__VLS_props: NonNullable<Awaited<typeo
         storageKey?: string | false;
         shortcut?: string | false;
         fluid?: boolean;
+        fill?: boolean;
         viewTransition?: boolean;
         navLabel?: string;
         sidebarLabel?: string;
@@ -61,6 +62,7 @@ declare const __VLS_export: <T = unknown>(__VLS_props: NonNullable<Awaited<typeo
         readonly closeLabel?: string | undefined;
         readonly skipLabel?: string | undefined;
         readonly fluid?: boolean | undefined;
+        readonly fill?: boolean | undefined;
         readonly topbar?: boolean | undefined;
         readonly storageKey?: string | false | undefined;
         readonly shortcut?: string | false | undefined;

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

@@ -36,12 +36,12 @@ declare const __VLS_base: import("vue").DefineComponent<{
     key?: PropertyKey | undefined;
     loading?: boolean;
     prefix?: "k-modal" | "k-drawer" | undefined;
+    size?: import("../overlays/types").ModalSize;
     label?: string;
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     description?: string;
-    size?: import("../overlays/types").ModalSize;
     dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
@@ -145,6 +145,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     color?: string | undefined;
     id?: string | undefined;
     lang?: string | undefined;
+    width?: string;
     tabindex?: (string | number) | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -241,6 +242,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     rootClass?: unknown;
     hideClose?: boolean;
     closedby?: import("../../index.ts").DialogClosedBy;
+    minHeight?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
     open: () => any;
@@ -273,12 +275,12 @@ declare const __VLS_base: import("vue").DefineComponent<{
     key?: PropertyKey | undefined;
     loading?: boolean;
     prefix?: "k-modal" | "k-drawer" | undefined;
+    size?: import("../overlays/types").ModalSize;
     label?: string;
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     description?: string;
-    size?: import("../overlays/types").ModalSize;
     dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
@@ -382,6 +384,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     color?: string | undefined;
     id?: string | undefined;
     lang?: string | undefined;
+    width?: string;
     tabindex?: (string | number) | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -478,6 +481,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     rootClass?: unknown;
     hideClose?: boolean;
     closedby?: import("../../index.ts").DialogClosedBy;
+    minHeight?: string;
 }> & Readonly<{
     onClose?: (() => any) | undefined;
     onOpen?: (() => any) | undefined;

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

@@ -129,6 +129,7 @@ export interface KAppConfig {
         collapsible?: boolean;
         storageKey?: string | false;
         fluid?: boolean;
+        fill?: boolean;
         breadcrumbs?: boolean;
     };
     auth?: {

package/dist/composables/useForm.d.ts

@@ -1,4 +1,4 @@
-import type { ComputedRef, MaybeRefOrGetter, Ref, UnwrapRef } from 'vue';
+import type { App, ComputedRef, MaybeRefOrGetter, Ref, UnwrapRef } from 'vue';
 import type { IssueKeyResolver, StandardSchemaIssue, StandardSchemaV1 } from '../internal/forms/standard-schema';
 export type { IssuePath as FormIssuePath, StandardSchemaIssue, StandardSchemaResult, StandardSchemaV1, } from '../internal/forms/standard-schema';
 export type FieldValidationResult = string | undefined | null | boolean;
@@ -36,6 +36,16 @@ export interface FormMessages {
     pattern: (context: FormMessageContext) => string;
     invalid: (context: FormMessageContext) => string;
 }
+export interface FormTranslateContext {
+    name?: string;
+    label?: string;
+    kind: 'error' | 'warning';
+}
+export type FormTranslateMessage = (message: string, context: FormTranslateContext) => string;
+export interface FormConfig {
+    messages?: Partial<FormMessages>;
+    translateMessage?: FormTranslateMessage;
+}
 export type FormValidationTrigger = 'submit' | 'blur' | 'input';
 export type FormIssueKey = IssueKeyResolver;
 export type FormMessageMap = Record<string, string | undefined>;
@@ -50,6 +60,7 @@ export interface UseFormOptions<S extends FormSchema = FormSchema, V extends obj
     warnings?: FormWarnings<V>;
     issueKey?: FormIssueKey;
     messages?: Partial<FormMessages>;
+    translateMessage?: FormTranslateMessage;
     validateOn?: FormValidationTrigger;
     onSubmit?: (values: V) => unknown;
     onInvalid?: (errors: FormErrors<S>) => unknown;
@@ -94,4 +105,8 @@ export interface UseFormReturn<S extends FormSchema = FormSchema, V extends obje
 export declare function isEmptyValue(value: unknown): boolean;
 export declare function useForm<S extends FormSchema = FormSchema, V extends object = FormValues<S>>(options: UseFormOptions<S, V>): UseFormReturn<S, V>;
 export declare function useFormContext(): FormContext | null;
+export declare function provideFormConfig(config: FormConfig): FormConfig;
+export declare function createFormConfig(config: FormConfig): {
+    install(app: App): void;
+};
 export declare function provideForm(form: FormContext): FormContext;

package/dist/composables/useForm.mjs

@@ -1,5 +1,6 @@
 import {
   computed,
+  hasInjectionContext,
   inject,
   isRef,
   provide,
@@ -18,7 +19,7 @@ import {
   keyPath,
   schemaIssues
 } from "../internal/forms/standard-schema.mjs";
-import { FORM_KEY } from "../internal/keys.mjs";
+import { FORM_CONFIG_KEY, FORM_KEY } from "../internal/keys.mjs";
 import { useLocale } from "./useLocale.mjs";
 function localeFormMessages(t) {
   return {
@@ -101,7 +102,19 @@ export function useForm(options) {
   const schemaNames = Object.keys(schema);
   const external = options.values !== void 0;
   const { t } = useLocale();
-  const messages = computed(() => ({ ...localeFormMessages(t), ...options.messages }));
+  const config = hasInjectionContext() && inject(FORM_CONFIG_KEY, null) || null;
+  const messages = computed(() => ({
+    ...localeFormMessages(t),
+    ...config?.messages,
+    ...options.messages
+  }));
+  const translator = options.translateMessage ?? config?.translateMessage;
+  const translate = (message, context) => translator && message ? translator(message, context) : message;
+  const translateIssues = (issues, kind) => issues.map((issue) => {
+    const name = issue.path.map(String).join(".") || void 0;
+    const label = name ? schema[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])]));
@@ -153,7 +166,7 @@ export function useForm(options) {
     if (!validator) return groupIssues([]);
     return chain(
       validator["~standard"].validate(cloneValue(target())),
-      (result) => groupIssues(schemaIssues(result.issues ?? []), issueKey)
+      (result) => groupIssues(translateIssues(schemaIssues(result.issues ?? []), "error"), issueKey)
     );
   }
   async function runValidator() {
@@ -164,6 +177,7 @@ export function useForm(options) {
     if (!definition) return void 0;
     const value = readValue(name);
     const fieldMessages = { ...messages.value, ...definition.messages };
+    const own = (message) => translate(message, { name, label: definition.label, kind: "error" });
     const context = {
       label: definition.label,
       value,
@@ -197,12 +211,12 @@ export function useForm(options) {
       if (!definition.schema) return void 0;
       return chain(definition.schema["~standard"].validate(value), (result) => {
         const issues = result.issues ?? [];
-        return issues.length ? issues[0].message || fieldMessages.invalid(context) : void 0;
+        return issues.length ? issues[0].message && own(issues[0].message) || fieldMessages.invalid(context) : void 0;
       });
     };
     if (!definition.validate) return runSchema();
     return chain(definition.validate(value, target()), (result) => {
-      if (typeof result === "string" && result) return result;
+      if (typeof result === "string" && result) return own(result);
       if (result === false) return fieldMessages.invalid(context);
       return runSchema();
     });
@@ -373,7 +387,7 @@ export function useForm(options) {
     let warningRun = 0;
     const applyWarnings = (result) => {
       const list = Array.isArray(result) ? schemaIssues(result) : Object.entries(result ?? {}).filter((entry) => Boolean(entry[1])).map(([key, message]) => ({ message, path: keyPath(key) }));
-      const grouped = groupIssues(list, issueKey);
+      const grouped = groupIssues(translateIssues(list, "warning"), issueKey);
       replaceEntries(warnings, grouped.fields);
       rootWarnings.value = grouped.root;
     };
@@ -423,6 +437,17 @@ export function useForm(options) {
 export function useFormContext() {
   return inject(FORM_KEY, null);
 }
+export function provideFormConfig(config) {
+  provide(FORM_CONFIG_KEY, config);
+  return config;
+}
+export function createFormConfig(config) {
+  return {
+    install(app) {
+      app.provide(FORM_CONFIG_KEY, config);
+    }
+  };
+}
 export function provideForm(form) {
   provide(FORM_KEY, form);
   return form;

package/dist/editor/RichTextEditor.vue

@@ -338,6 +338,16 @@ const defaultToolbar = computed(() => [
     }
   ]
 ]);
+const optionalItems = computed(() => [
+  mark(
+    "underline",
+    text.value.underline,
+    "U",
+    "is-underline",
+    "underline",
+    () => editor.value?.chain().focus().toggleUnderline().run()
+  )
+]);
 function isToolbarGroups(toolbar) {
   return toolbar.some((entry) => Array.isArray(entry));
 }
@@ -352,7 +362,9 @@ function splitToolbar(toolbar) {
 }
 const groups = computed(() => {
   if (!props.toolbar) return defaultToolbar.value.filter((group) => group.length);
-  const byId = new Map(defaultToolbar.value.flat().map((item) => [item.id, item]));
+  const byId = new Map(
+    [...defaultToolbar.value.flat(), ...optionalItems.value].map((item) => [item.id, item])
+  );
   const headingItems = defaultToolbar.value[1] ?? [];
   return splitToolbar(props.toolbar).map(
     (group) => group.flatMap((entry) => {

package/dist/editor/RichTextEditor.vue.d.ts

@@ -429,8 +429,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
 }>, {
     invalid: boolean;
     format: EditorFormat;
-    headings: EditorHeadingLevel[];
     minHeight: string;
+    headings: EditorHeadingLevel[];
     headingLabel: EditorHeadingLabel;
     extensions: Extensions;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/editor/rich-text-editor.css

@@ -90,7 +90,13 @@
 
 .k-editor-glyph-text.is-strike {
    text-decoration: line-through;
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
+}
+
+.k-editor-glyph-text.is-underline {
+   text-decoration: underline;
+   text-underline-offset: 2px;
+   font-weight: var(--k-font-weight-strong, 600);
 }
 
 .k-editor-glyph-text.is-mono {
@@ -100,7 +106,7 @@
 
 .k-editor-glyph-text.is-tabular {
    font-variant-numeric: tabular-nums;
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
 }
 
 .k-editor-glyph-text.is-quote {
@@ -161,7 +167,7 @@
 .k-editor-prose h3,
 .k-editor-prose h4 {
    margin: 1.25em 0 0.5em;
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--k-text);
@@ -180,7 +186,7 @@
 }
 
 .k-editor-prose strong {
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    color: var(--k-text);
 }
 

package/dist/editor/types.d.ts

@@ -5,5 +5,5 @@ export type EditorValue = string | JSONContent | null;
 export type EditorMessages = KMessages['editor'];
 export type EditorHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export type EditorHeadingLabel = 'level' | 'relative';
-export type EditorToolbarItem = 'undo' | 'redo' | 'headings' | `h${EditorHeadingLevel}` | 'bold' | 'italic' | 'strike' | 'code' | 'bulletList' | 'orderedList' | 'blockquote' | 'link' | '|';
+export type EditorToolbarItem = 'undo' | 'redo' | 'headings' | `h${EditorHeadingLevel}` | 'bold' | 'italic' | 'underline' | 'strike' | 'code' | 'bulletList' | 'orderedList' | 'blockquote' | 'link' | '|';
 export type EditorToolbar = EditorToolbarItem[] | EditorToolbarItem[][];

package/dist/grid/DataGrid.vue

@@ -27,10 +27,11 @@
       >
          <AgGridVue
             v-if="mounted"
+            v-bind="gridOptions"
             class="k-data-grid-ag"
             :theme="theme"
             :row-data="rows"
-            :column-defs="columns"
+            :column-defs="columnDefs"
             :default-col-def="defaultColDef"
             :get-row-id="props.rowIdKey ? getRowId : void 0"
             :loading="loading"
@@ -46,6 +47,8 @@
             :suppress-pagination-panel="true"
             :auto-size-strategy="autoSizeStrategy"
             :dom-layout="autoHeight ? 'autoHeight' : 'normal'"
+            :row-height="rowHeight ?? gridOptions?.rowHeight"
+            :header-height="headerHeight ?? gridOptions?.headerHeight"
             :tooltip-show-delay="600"
             :suppress-cell-focus="false"
             v-on="gridEvents"
@@ -90,7 +93,7 @@
 
 <script setup>
 import { AgGridVue } from "ag-grid-vue3";
-import { computed, onMounted, ref, shallowRef, watch } from "vue";
+import { computed, nextTick, onMounted, ref, shallowRef, watch } from "vue";
 import Pagination from "../components/data/Pagination.vue";
 import Spinner from "../components/core/Spinner.vue";
 import { useCopy } from "../composables/useCopy";
@@ -101,7 +104,7 @@ import { useLiveMessage } from "../internal/core/live";
 import { readStorageJson, removeStorage, writeStorageJson } from "../internal/core/storage";
 import GridToolbar from "./GridToolbar.vue";
 import { escapeHtml } from "../internal/core/text";
-import { registerGridModules } from "./modules";
+import { registerGridFilterModules, registerGridModules } from "./modules";
 import { getGridTheme } from "./theme";
 registerGridModules();
 const props = defineProps({
@@ -127,12 +130,28 @@ const props = defineProps({
   total: { type: Number, required: false, default: 0 },
   pageSizes: { type: Array, required: false, default: () => [10, 25, 50, 100] },
   messages: { type: Object, required: false },
-  localeText: { type: Object, required: false }
+  localeText: { type: Object, required: false },
+  gridOptions: { type: Object, required: false },
+  rowHeight: { type: Number, required: false },
+  headerHeight: { type: Number, required: false },
+  headerText: { type: Function, required: false },
+  filterable: { type: Boolean, required: false }
 });
-const emit = defineEmits(["rowClick", "selectionChange", "sortChange", "copy"]);
+const emit = defineEmits(["rowClick", "selectionChange", "sortChange", "filterChange", "copy"]);
 const query = defineModel("query", { type: String, ...{ default: "" } });
 const page = defineModel("page", { type: Number, ...{ default: 1 } });
 const pageSize = defineModel("pageSize", { type: Number, ...{ default: 25 } });
+const sort = defineModel("sort", { type: null, ...{ default: void 0 } });
+if (props.filterable) registerGridFilterModules();
+const columnDefs = computed(() => {
+  const headerText = props.headerText;
+  if (!headerText) return props.columns;
+  return props.columns.map((column) => {
+    if (column.headerName !== void 0 || !column.field) return column;
+    const headerName = headerText(String(column.field), column);
+    return headerName === void 0 ? column : { ...column, headerName };
+  });
+});
 const { locale, t } = useLocale();
 const text = computed(() => ({
   ...locale.value.messages.grid,
@@ -195,6 +214,7 @@ const rowSelection = computed(() => {
 const defaultColDef = computed(() => ({
   sortable: true,
   resizable: true,
+  filter: props.filterable || void 0,
   minWidth: 80,
   comparator: props.serverSort ? () => 0 : void 0,
   valueFormatter: (params) => isEmpty(params.value) ? "-" : String(params.value),
@@ -245,8 +265,28 @@ function onGridReady(event) {
   api.value = event.api;
   const stored = readStoredState();
   if (stored?.length) event.api.applyColumnState({ state: stored, applyOrder: true });
+  applySort();
   syncPagination();
 }
+function sameSort(a, b) {
+  return (a?.column ?? null) === (b?.column ?? null) && (a?.direction ?? null) === (b?.direction ?? null);
+}
+function readSort(current) {
+  const sorted = current.getColumnState().filter((column) => column.sort).sort((a, b) => (a.sortIndex ?? 0) - (b.sortIndex ?? 0))[0];
+  return sorted?.sort ? { column: sorted.colId, direction: sorted.sort } : null;
+}
+function applySort() {
+  const current = api.value;
+  if (!current || sort.value === void 0) return;
+  if (sameSort(readSort(current), sort.value)) return;
+  const target = sort.value;
+  current.applyColumnState({
+    state: target ? [{ colId: target.column, sort: target.direction }] : [],
+    defaultState: { sort: null }
+  });
+}
+watch(sort, applySort);
+watch(columnDefs, () => nextTick(applySort));
 function syncPagination() {
   const current = api.value;
   if (!current || props.serverPagination) return;
@@ -279,9 +319,22 @@ function onSelectionChanged(event) {
   emit("selectionChange", rows);
 }
 function onSortChanged(event) {
-  if (!props.serverSort) return;
-  const sorted = event.api.getColumnState().find((column) => column.sort);
-  emit("sortChange", sorted?.sort ? { column: sorted.colId, direction: sorted.sort } : null);
+  const change = readSort(event.api);
+  if (!sameSort(change, sort.value)) sort.value = change;
+  if (props.serverSort) emit("sortChange", change);
+}
+const columnFilterModules = [
+  "TextFilterModule",
+  "NumberFilterModule",
+  "DateFilterModule",
+  "BigIntFilterModule",
+  "CustomFilterModule",
+  "SetFilterModule",
+  "MultiFilterModule"
+];
+function onFilterChanged(event) {
+  if (!columnFilterModules.some((name) => event.api.isModuleRegistered(name))) return;
+  emit("filterChange", event.api.getFilterModel(), event);
 }
 async function onCellContextMenu(event) {
   if (!event.node || !event.column) return;
@@ -299,6 +352,7 @@ const gridEvents = {
   rowClicked: (event) => emit("rowClick", event),
   selectionChanged: onSelectionChanged,
   sortChanged: onSortChanged,
+  filterChanged: onFilterChanged,
   cellContextMenu: onCellContextMenu,
   paginationChanged: syncPagination,
   modelUpdated: onModelUpdated,

package/dist/grid/DataGrid.vue.d.ts

@@ -1,4 +1,4 @@
-import type { ColDef, GridApi, RowClickedEvent } from 'ag-grid-community';
+import type { FilterChangedEvent, FilterModel, ColDef, GridApi, GridOptions, RowClickedEvent } from 'ag-grid-community';
 import type { GridDensity, GridMessages, GridSelection, GridSortChange } from './types';
 declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<({
@@ -25,18 +25,26 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         pageSizes?: number[];
         messages?: Partial<GridMessages>;
         localeText?: Record<string, string>;
+        gridOptions?: GridOptions<T>;
+        rowHeight?: number;
+        headerHeight?: number;
+        headerText?: (field: string, column: ColDef<T>) => string | undefined;
+        filterable?: boolean;
     } & {
         query?: string;
         page?: number;
         pageSize?: number;
+        sort?: GridSortChange | null | undefined;
     }) & {
         onCopy?: ((text: string) => any) | undefined;
         "onUpdate:page"?: ((value: number) => any) | undefined;
         "onUpdate:pageSize"?: ((value: number) => any) | undefined;
         onRowClick?: ((event: RowClickedEvent<T, any>) => any) | undefined;
+        "onUpdate:sort"?: ((value: GridSortChange | null | undefined) => any) | undefined;
         "onUpdate:query"?: ((value: string) => any) | undefined;
         onSelectionChange?: ((rows: T[]) => any) | undefined;
         onSortChange?: ((change: GridSortChange | null) => any) | undefined;
+        onFilterChange?: ((model: FilterModel, event: FilterChangedEvent<T, any>) => any) | undefined;
     } & Partial<import("vue").HTMLAttributes & import("vue").ReservedProps>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -52,7 +60,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
             api: GridApi<T> | null;
         }) => any;
     };
-    emit: (((evt: "copy", text: string) => void) & ((evt: "rowClick", event: RowClickedEvent<T, any>) => void) & ((evt: "selectionChange", rows: T[]) => void) & ((evt: "sortChange", change: GridSortChange | null) => void)) & (((event: "update:page", value: number) => void) & ((event: "update:pageSize", value: number) => void) & ((event: "update:query", value: string) => void));
+    emit: (((evt: "copy", text: string) => void) & ((evt: "rowClick", event: RowClickedEvent<T, any>) => void) & ((evt: "selectionChange", rows: T[]) => void) & ((evt: "sortChange", change: GridSortChange | null) => void) & ((evt: "filterChange", model: FilterModel, event: FilterChangedEvent<T, any>) => void)) & (((event: "update:page", value: number) => void) & ((event: "update:pageSize", value: number) => void) & ((event: "update:sort", value: GridSortChange | null | undefined) => void) & ((event: "update:query", value: string) => void));
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/grid/cells/DateCell.vue

@@ -1,12 +1,18 @@
 <template>
-   <time v-if="formatted" class="k-data-grid-date k-tabular" :datetime="iso">{{ formatted }}</time>
+   <time
+      v-if="formatted"
+      class="k-data-grid-date k-tabular"
+      :datetime="iso"
+      :title="params.relative ? absolute : void 0"
+      >{{ formatted }}</time
+   >
    <EmptyCell v-else :context="cellContext" />
 </template>
 
 <script setup>
 import { computed } from "vue";
 import EmptyCell from "./EmptyCell.vue";
-import { dateTimeFormat } from "../../internal/core/intl";
+import { dateTimeFormat, formatRelativeTime } from "../../internal/core/intl";
 const props = defineProps({
   params: { type: Object, required: true }
 });
@@ -19,11 +25,20 @@ const date = computed(() => {
 const locale = computed(
   () => props.params.locale ?? props.params.context?.locale
 );
-const formatted = computed(
+const absolute = computed(
   () => date.value ? dateTimeFormat(locale.value, props.params.options ?? { dateStyle: "medium" }).format(
     date.value
   ) : ""
 );
+const formatted = computed(() => {
+  const relative = props.params.relative;
+  if (!date.value || !relative) return absolute.value;
+  return formatRelativeTime(
+    date.value,
+    locale.value,
+    relative === true ? { numeric: "auto" } : relative
+  );
+});
 const iso = computed(() => date.value?.toISOString());
 const cellContext = computed(() => props.params.context);
 </script>

package/dist/grid/data-grid.css

@@ -144,7 +144,7 @@
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    line-height: 1.2;
    color: var(--k-badge-tone);
    background: color-mix(in oklab, var(--k-badge-tone) 12%, transparent);

package/dist/grid/index.d.ts

@@ -5,6 +5,6 @@ export { default as DateCell } from './cells/DateCell.vue';
 export { default as BadgeCell } from './cells/BadgeCell.vue';
 export { default as ImageCell } from './cells/ImageCell.vue';
 export { default as LinkCell } from './cells/LinkCell.vue';
-export { registerGridModules } from './modules';
+export { registerGridFilterModules, registerGridModules } from './modules';
 export { createGridTheme } from './theme';
 export type * from './types';

package/dist/grid/index.mjs

@@ -5,5 +5,5 @@ export { default as DateCell } from "./cells/DateCell.vue";
 export { default as BadgeCell } from "./cells/BadgeCell.vue";
 export { default as ImageCell } from "./cells/ImageCell.vue";
 export { default as LinkCell } from "./cells/LinkCell.vue";
-export { registerGridModules } from "./modules.mjs";
+export { registerGridFilterModules, registerGridModules } from "./modules.mjs";
 export { createGridTheme } from "./theme.mjs";

package/dist/grid/modules.d.ts

@@ -1 +1,2 @@
 export declare function registerGridModules(): void;
+export declare function registerGridFilterModules(): void;

package/dist/grid/modules.mjs

@@ -6,16 +6,19 @@ import {
   ColumnApiModule,
   ColumnAutoSizeModule,
   CsvExportModule,
+  DateFilterModule,
   DragAndDropModule,
   EventApiModule,
   LocaleModule,
   ModuleRegistry,
+  NumberFilterModule,
   PaginationModule,
   QuickFilterModule,
   RenderApiModule,
   RowApiModule,
   RowAutoHeightModule,
   RowSelectionModule,
+  TextFilterModule,
   TooltipModule
 } from "ag-grid-community";
 let registered = false;
@@ -42,3 +45,9 @@ export function registerGridModules() {
     TooltipModule
   ]);
 }
+let filtersRegistered = false;
+export function registerGridFilterModules() {
+  if (filtersRegistered) return;
+  filtersRegistered = true;
+  ModuleRegistry.registerModules([TextFilterModule, NumberFilterModule, DateFilterModule]);
+}