@xleddyl/443-components-vue 0.8.1 → 0.8.3

package/dist/editor/RichTextEditor.vue

@@ -53,16 +53,42 @@
          </template>
       </div>
 
-      <form v-if="linkOpen" class="k-editor-link" @submit.prevent="applyLink">
+      <form
+         v-if="linkOpen"
+         class="k-editor-link"
+         @submit.prevent="applyLink"
+         @keydown.esc.stop.prevent="closeLink(true)"
+      >
+         <span v-if="linkTypes.length > 1" class="k-editor-link-type">
+            <select
+               v-model="linkType"
+               class="k-field k-field-sm"
+               :aria-label="text.linkType"
+               @change="focusLinkInput"
+            >
+               <option v-for="type in linkTypes" :key="type" :value="type">
+                  {{ linkTypeLabels[type] }}
+               </option>
+            </select>
+            <Icon name="chevron-up-down" class="k-editor-link-type-icon" />
+         </span>
          <input
             ref="linkInputRef"
             v-model="linkUrl"
-            class="k-field k-field-sm"
-            type="url"
-            inputmode="url"
-            placeholder="https://"
-            :aria-label="text.linkUrl"
-            @keydown.esc.stop.prevent="closeLink(true)"
+            class="k-field k-field-sm k-editor-link-target"
+            :type="linkInput.type"
+            :inputmode="linkInput.inputmode"
+            :autocomplete="linkInput.autocomplete"
+            :placeholder="linkInput.placeholder"
+            :aria-label="linkInput.label"
+         />
+         <input
+            v-if="linkNeedsText"
+            v-model="linkText"
+            class="k-field k-field-sm k-editor-link-text"
+            type="text"
+            :placeholder="text.linkText"
+            :aria-label="text.linkText"
          />
          <Button type="submit" size="xs" :label="text.applyLink" />
          <Button
@@ -97,6 +123,7 @@ import StarterKit from "@tiptap/starter-kit";
 import { EditorContent, useEditor } from "@tiptap/vue-3";
 import { computed, nextTick, onBeforeUnmount, ref, useId, useTemplateRef, watch } from "vue";
 import Button from "../components/core/Button.vue";
+import Icon from "../components/core/Icon.vue";
 import { useFieldControl } from "../composables/useField";
 import { useRovingTabStops } from "../internal/core/roving";
 import LiveRegion from "../internal/core/LiveRegion.vue";
@@ -125,6 +152,7 @@ const props = defineProps({
   headingLabel: { type: String, required: false, default: "level" },
   toolbar: { type: Array, required: false },
   extensions: { type: Array, required: false, default: () => [] },
+  linkTypes: { type: Array, required: false, default: () => ["url"] },
   messages: { type: Object, required: false }
 });
 const model = defineModel({ type: [String, Object, null], ...{ default: null } });
@@ -140,6 +168,40 @@ const toolbarRef = useTemplateRef("toolbarRef");
 const linkInputRef = useTemplateRef("linkInputRef");
 const linkOpen = ref(false);
 const linkUrl = ref("");
+const linkText = ref("");
+const linkType = ref("url");
+const linkNeedsText = ref(false);
+const linkPrefixes = { url: "", email: "mailto:", phone: "tel:" };
+const linkTypeLabels = computed(() => ({
+  url: text.value.linkTypeUrl,
+  email: text.value.linkTypeEmail,
+  phone: text.value.linkTypePhone
+}));
+const linkInput = computed(() => {
+  if (linkType.value === "email")
+    return {
+      type: "email",
+      inputmode: "email",
+      autocomplete: "email",
+      placeholder: "name@example.com",
+      label: text.value.linkEmail
+    };
+  if (linkType.value === "phone")
+    return {
+      type: "tel",
+      inputmode: "tel",
+      autocomplete: "tel",
+      placeholder: "+",
+      label: text.value.linkPhone
+    };
+  return {
+    type: "url",
+    inputmode: "url",
+    autocomplete: "url",
+    placeholder: "https://",
+    label: text.value.linkUrl
+  };
+});
 const editable = computed(() => !props.readonly && !control.disabled.value);
 const showToolbar = computed(() => editable.value);
 function serialize(current) {
@@ -338,6 +400,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 +424,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) => {
@@ -379,10 +453,26 @@ function toggleLink() {
     closeLink();
     return;
   }
-  linkUrl.value = editor.value?.getAttributes("link").href ?? "";
+  const current = editor.value;
+  const href = current?.getAttributes("link").href ?? "";
+  const detected = detectLinkType(href);
+  linkType.value = props.linkTypes.includes(detected) ? detected : props.linkTypes[0] ?? "url";
+  linkUrl.value = href.slice(linkPrefixes[detected].length);
+  linkText.value = "";
+  linkNeedsText.value = Boolean(
+    current && current.state.selection.empty && !current.isActive("link")
+  );
   linkOpen.value = true;
+  focusLinkInput();
+}
+function focusLinkInput() {
   nextTick(() => linkInputRef.value?.focus());
 }
+function detectLinkType(href) {
+  if (/^mailto:/i.test(href)) return "email";
+  if (/^tel:/i.test(href)) return "phone";
+  return "url";
+}
 function closeLink(toButton = false) {
   linkOpen.value = false;
   if (!toButton) {
@@ -394,6 +484,8 @@ function closeLink(toButton = false) {
 function normalizeUrl(value) {
   const trimmed = value.trim();
   if (/^(https?:|mailto:|tel:|\/|#)/i.test(trimmed)) return trimmed;
+  if (linkType.value === "email") return `mailto:${trimmed}`;
+  if (linkType.value === "phone") return `tel:${trimmed.replace(/[^\d+]/g, "")}`;
   return `https://${trimmed}`;
 }
 function applyLink() {
@@ -403,7 +495,13 @@ function applyLink() {
     removeLink();
     return;
   }
-  current.chain().focus().extendMarkRange("link").setLink({ href: normalizeUrl(linkUrl.value) }).run();
+  const href = normalizeUrl(linkUrl.value);
+  if (linkNeedsText.value) {
+    const label = linkText.value.trim() || linkUrl.value.trim();
+    current.chain().focus().insertContent({ type: "text", text: label, marks: [{ type: "link", attrs: { href } }] }).unsetMark("link").run();
+  } else {
+    current.chain().focus().extendMarkRange("link").setLink({ href }).run();
+  }
   linkOpen.value = false;
 }
 function removeLink() {

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

@@ -1,6 +1,6 @@
 import type { Editor } from '@tiptap/vue-3';
 import type { Extensions } from '@tiptap/vue-3';
-import type { EditorFormat, EditorHeadingLabel, EditorHeadingLevel, EditorMessages, EditorToolbar, EditorValue } from './types';
+import type { EditorFormat, EditorHeadingLabel, EditorHeadingLevel, EditorLinkType, EditorMessages, EditorToolbar, EditorValue } from './types';
 declare const __VLS_export: import("vue").DefineComponent<{
     format?: EditorFormat;
     placeholder?: string | undefined;
@@ -17,6 +17,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     headingLabel?: EditorHeadingLabel;
     toolbar?: EditorToolbar;
     extensions?: Extensions;
+    linkTypes?: EditorLinkType[];
     messages?: Partial<EditorMessages>;
     modelValue?: EditorValue;
     key?: PropertyKey | undefined;
@@ -231,6 +232,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     headingLabel?: EditorHeadingLabel;
     toolbar?: EditorToolbar;
     extensions?: Extensions;
+    linkTypes?: EditorLinkType[];
     messages?: Partial<EditorMessages>;
     modelValue?: EditorValue;
     key?: PropertyKey | undefined;
@@ -429,10 +431,11 @@ declare const __VLS_export: import("vue").DefineComponent<{
 }>, {
     invalid: boolean;
     format: EditorFormat;
-    headings: EditorHeadingLevel[];
     minHeight: string;
+    headings: EditorHeadingLevel[];
     headingLabel: EditorHeadingLabel;
     extensions: Extensions;
+    linkTypes: EditorLinkType[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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 {
@@ -125,6 +131,27 @@
    width: auto;
 }
 
+.k-editor-link-type {
+   position: relative;
+   display: inline-flex;
+   flex: 0 0 auto;
+   align-items: center;
+}
+
+.k-editor-link .k-editor-link-type > .k-field {
+   flex: 0 0 auto;
+   padding-right: 1.75rem;
+   cursor: pointer;
+}
+
+.k-editor-link-type-icon {
+   --k-icon-size: 0.875rem;
+   position: absolute;
+   right: 0.5rem;
+   color: var(--k-text-dimmed);
+   pointer-events: none;
+}
+
 .k-editor-content {
    flex: 1;
    min-width: 0;
@@ -161,7 +188,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 +207,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,6 @@ 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 EditorLinkType = 'url' | 'email' | 'phone';
+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

@@ -1,7 +1,10 @@
 <template>
    <div
       class="k-data-grid"
-      :class="[`k-data-grid-${density}`, { 'is-loading': loading, 'is-auto-height': autoHeight }]"
+      :class="[
+  `k-data-grid-${density}`,
+  { 'is-loading': loading, 'is-auto-height': autoHeight, 'is-fill': fill && !autoHeight }
+]"
    >
       <GridToolbar
          v-if="toolbar"
@@ -23,7 +26,7 @@
          role="region"
          :aria-label="label ?? text.label"
          :aria-busy="loading ? 'true' : void 0"
-         :style="autoHeight ? void 0 : { height }"
+         :style="autoHeight || fill ? void 0 : { height }"
       >
          <AgGridVue
             v-if="mounted"
@@ -31,23 +34,25 @@
             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"
+            :get-row-id="rowIdGetter"
             :loading="loading"
             :locale-text="gridLocaleText"
-            :context="cellContext"
-            :overlay-no-rows-template="noRowsTemplate"
-            :overlay-loading-template="loadingTemplate"
+            :context="gridContext"
+            :overlay-no-rows-template="gridOptions?.overlayNoRowsTemplate ?? noRowsTemplate"
+            :overlay-loading-template="gridOptions?.overlayLoadingTemplate ?? loadingTemplate"
             :quick-filter-text="serverPagination ? void 0 : query"
-            :row-selection="rowSelection"
+            :row-selection="gridRowSelection"
             :pagination="paginated"
             :pagination-page-size="pageSize"
             :pagination-page-size-selector="false"
             :suppress-pagination-panel="true"
-            :auto-size-strategy="autoSizeStrategy"
+            :auto-size-strategy="gridAutoSizeStrategy"
             :dom-layout="autoHeight ? 'autoHeight' : 'normal'"
-            :tooltip-show-delay="600"
+            :row-height="rowHeight ?? gridOptions?.rowHeight"
+            :header-height="headerHeight ?? gridOptions?.headerHeight"
+            :tooltip-show-delay="gridOptions?.tooltipShowDelay ?? 600"
             :suppress-cell-focus="false"
             v-on="gridEvents"
          />
@@ -69,6 +74,9 @@
             class="k-data-grid-pager"
             size="sm"
             compact
+            :show-edges="showEdges"
+            :show-jump="showJump"
+            :loading="loading"
             :total="totalRows"
             :page="page"
             :page-size="pageSize"
@@ -91,7 +99,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";
@@ -102,18 +110,24 @@ 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 {
+  registerGridEditorModules,
+  registerGridFilterModules,
+  registerGridModules
+} from "./modules";
 import { getGridTheme } from "./theme";
 registerGridModules();
 const props = defineProps({
   rows: { type: Array, required: false, default: () => [] },
   columns: { type: Array, required: true },
   rowIdKey: { type: String, required: false },
+  getRowId: { type: Function, required: false },
   storageKey: { type: String, required: false },
   density: { type: String, required: false, default: "normal" },
   selectable: { type: [Boolean, String], required: false, default: false },
   loading: { type: Boolean, required: false },
   height: { type: String, required: false, default: "28rem" },
+  fill: { type: Boolean, required: false },
   autoHeight: { type: Boolean, required: false },
   label: { type: String, required: false },
   toolbar: { type: Boolean, required: false, default: false },
@@ -124,17 +138,39 @@ const props = defineProps({
   searchDebounce: { type: Number, required: false, default: 0 },
   serverSort: { type: Boolean, required: false },
   pagination: { type: Boolean, required: false },
+  showEdges: { type: Boolean, required: false },
+  showJump: { type: Boolean, required: false },
   serverPagination: { type: Boolean, required: false },
   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 },
-  gridOptions: { 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 },
+  editable: { 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();
+function hasEditableColumn() {
+  return props.editable || Boolean(props.gridOptions?.defaultColDef?.editable) || props.columns.some((column) => Boolean(column.editable));
+}
+if (hasEditableColumn()) registerGridEditorModules();
+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,
@@ -163,8 +199,10 @@ const gridLocaleText = computed(() => ({
   previousPage: text.value.previousPage,
   noRowsToShow: text.value.noRows,
   loadingOoo: text.value.loading,
+  ...props.gridOptions?.localeText,
   ...props.localeText
 }));
+const gridContext = computed(() => ({ ...props.gridOptions?.context, ...cellContext.value }));
 const live = useLiveMessage();
 let announcedCount = null;
 const theme = computed(() => getGridTheme(props.density));
@@ -187,8 +225,8 @@ const noRowsTemplate = computed(
 const loadingTemplate = computed(
   () => `<div class="k-data-grid-overlay"><span class="k-spinner k-spinner-md" aria-hidden="true"></span></div>`
 );
-const rowSelection = computed(() => {
-  if (!props.selectable) return void 0;
+const gridRowSelection = computed(() => {
+  if (!props.selectable) return props.gridOptions?.rowSelection;
   return {
     mode: props.selectable === "single" ? "singleRow" : "multiRow",
     enableClickSelection: false
@@ -197,10 +235,12 @@ 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),
-  cellRenderer: renderCell
+  cellRenderer: renderCell,
+  ...props.gridOptions?.defaultColDef
 }));
 function isEmpty(value) {
   return value === null || value === void 0 || value === "";
@@ -223,12 +263,20 @@ function renderCell(params) {
 }
 const storageName = computed(() => props.storageKey ? `k-grid:${props.storageKey}` : null);
 const hasStoredState = ref(false);
-const autoSizeStrategy = computed(
-  () => hasStoredState.value ? void 0 : { type: "fitGridWidth", defaultMinWidth: 100 }
-);
-function getRowId(params) {
+const gridAutoSizeStrategy = computed(() => {
+  if (hasStoredState.value) return void 0;
+  if (props.gridOptions && "autoSizeStrategy" in props.gridOptions)
+    return props.gridOptions.autoSizeStrategy;
+  return { type: "fitGridWidth", defaultMinWidth: 100 };
+});
+function getRowIdByKey(params) {
   return String(params.data[props.rowIdKey]);
 }
+const rowIdGetter = computed(() => {
+  if (props.getRowId) return props.getRowId;
+  if (props.rowIdKey) return getRowIdByKey;
+  return props.gridOptions?.getRowId;
+});
 function readStoredState() {
   if (!storageName.value) return null;
   const stored = readStorageJson(storageName.value);
@@ -247,8 +295,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;
@@ -281,9 +349,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;
@@ -301,6 +382,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,15 +1,17 @@
-import type { ColDef, GridApi, GridOptions, RowClickedEvent } from 'ag-grid-community';
+import type { FilterChangedEvent, FilterModel, ColDef, GetRowIdParams, 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<({
         rows?: T[];
         columns: ColDef<T>[];
         rowIdKey?: keyof T & string;
+        getRowId?: (params: GetRowIdParams<T>) => string;
         storageKey?: string;
         density?: GridDensity;
         selectable?: GridSelection;
         loading?: boolean;
         height?: string;
+        fill?: boolean;
         autoHeight?: boolean;
         label?: string;
         toolbar?: boolean;
@@ -20,24 +22,34 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         searchDebounce?: number;
         serverSort?: boolean;
         pagination?: boolean;
+        showEdges?: boolean;
+        showJump?: boolean;
         serverPagination?: boolean;
         total?: number;
         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;
+        editable?: 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 : {});
@@ -53,7 +65,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>