@xleddyl/443-components-vue 0.8.2 → 0.8.4

package/dist/composables/useForm.d.ts

@@ -1,7 +1,12 @@
 import type { App, ComputedRef, MaybeRefOrGetter, Ref, UnwrapRef } from 'vue';
 import type { IssueKeyResolver, StandardSchemaIssue, StandardSchemaV1 } from '../internal/forms/standard-schema';
+import type { MessageParams } from '../locale/types';
 export type { IssuePath as FormIssuePath, StandardSchemaIssue, StandardSchemaResult, StandardSchemaV1, } from '../internal/forms/standard-schema';
-export type FieldValidationResult = string | undefined | null | boolean;
+export interface FieldValidationMessage {
+    message: string;
+    params?: MessageParams;
+}
+export type FieldValidationResult = string | FieldValidationMessage | undefined | null | boolean;
 export interface FieldDefinition<T = unknown> {
     initial?: T | (() => T);
     label?: string;
@@ -11,6 +16,7 @@ export interface FieldDefinition<T = unknown> {
     minLength?: number;
     maxLength?: number;
     pattern?: RegExp;
+    isEmpty?: (value: T) => boolean;
     schema?: StandardSchemaV1;
     validate?: (value: T, values: Record<string, unknown>) => FieldValidationResult | Promise<FieldValidationResult>;
     messages?: Partial<FormMessages>;
@@ -40,6 +46,7 @@ export interface FormTranslateContext {
     name?: string;
     label?: string;
     kind: 'error' | 'warning';
+    params?: MessageParams;
 }
 export type FormTranslateMessage = (message: string, context: FormTranslateContext) => string;
 export interface FormConfig {
@@ -54,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

@@ -20,6 +20,7 @@ import {
   schemaIssues
 } from "../internal/forms/standard-schema.mjs";
 import { FORM_CONFIG_KEY, FORM_KEY } from "../internal/keys.mjs";
+import { formatLocaleMessage } from "../locale/index.mjs";
 import { useLocale } from "./useLocale.mjs";
 function localeFormMessages(t) {
   return {
@@ -32,11 +33,17 @@ function localeFormMessages(t) {
     invalid: () => t("form.invalid")
   };
 }
+function isPlainObject(value) {
+  if (value === null || typeof value !== "object") return false;
+  const prototype = Object.getPrototypeOf(value);
+  return prototype === Object.prototype || prototype === null;
+}
 export function isEmptyValue(value) {
   if (value === null || value === void 0) return true;
   if (typeof value === "string") return value.trim() === "";
   if (Array.isArray(value)) return value.length === 0;
   if (typeof value === "number") return Number.isNaN(value);
+  if (isPlainObject(value)) return Object.values(value).every(isEmptyValue);
   return false;
 }
 function cloneValue(value) {
@@ -98,10 +105,10 @@ 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 } = useLocale();
+  const { t, locale } = useLocale();
   const config = hasInjectionContext() && inject(FORM_CONFIG_KEY, null) || null;
   const messages = computed(() => ({
     ...localeFormMessages(t),
@@ -109,22 +116,28 @@ export function useForm(options) {
     ...options.messages
   }));
   const translator = options.translateMessage ?? config?.translateMessage;
-  const translate = (message, context) => translator && message ? translator(message, context) : message;
+  const translate = (message, context) => {
+    if (!message) return message;
+    if (translator) return translator(message, context);
+    return context.params ? formatLocaleMessage(locale.value.code, message, context.params) : 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;
+    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({});
@@ -173,11 +186,16 @@ 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 };
-    const own = (message) => translate(message, { name, label: definition.label, kind: "error" });
+    const own = (message, params) => translate(message, {
+      name,
+      label: definition.label,
+      kind: "error",
+      ...params ? { params } : {}
+    });
     const context = {
       label: definition.label,
       value,
@@ -186,7 +204,7 @@ export function useForm(options) {
       minLength: definition.minLength,
       maxLength: definition.maxLength
     };
-    if (isEmptyValue(value)) {
+    if (definition.isEmpty ? definition.isEmpty(value) : isEmptyValue(value)) {
       if (definition.required) return fieldMessages.required(context);
     } else {
       if (typeof value === "number") {
@@ -217,6 +235,8 @@ export function useForm(options) {
     if (!definition.validate) return runSchema();
     return chain(definition.validate(value, target()), (result) => {
       if (typeof result === "string" && result) return own(result);
+      if (result && typeof result === "object" && result.message)
+        return own(result.message, result.params);
       if (result === false) return fieldMessages.invalid(context);
       return runSchema();
     });
@@ -376,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),
     () => {
@@ -407,7 +467,9 @@ export function useForm(options) {
     });
   }
   return {
-    schema,
+    get schema() {
+      return schema.value;
+    },
     get values() {
       return target();
     },
@@ -429,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/composables/useOverlay.d.ts

@@ -1,6 +1,6 @@
 import type { AllowedComponentProps, Component, VNodeProps } from 'vue';
 import type { OverlayContext, OverlayEntry, OverlayKind, OverlayOptions } from '../internal/overlays/stack';
-export type { OverlayContext, OverlayKind, OverlayOptions };
+export type { OverlayContext, OverlayEntry, OverlayKind, OverlayOptions };
 export type OverlayComponentProps<C> = C extends new (...args: never[]) => {
     $props: infer P;
 } ? Omit<P, keyof VNodeProps | keyof AllowedComponentProps> : Record<string, unknown>;

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) {
@@ -391,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) {
@@ -406,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() {
@@ -415,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;
@@ -433,6 +435,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     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

@@ -131,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;

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 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"
@@ -33,23 +36,23 @@
             :row-data="rows"
             :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'"
             :row-height="rowHeight ?? gridOptions?.rowHeight"
             :header-height="headerHeight ?? gridOptions?.headerHeight"
-            :tooltip-show-delay="600"
+            :tooltip-show-delay="gridOptions?.tooltipShowDelay ?? 600"
             :suppress-cell-focus="false"
             v-on="gridEvents"
          />
@@ -71,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"
@@ -104,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 { registerGridFilterModules, 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 },
@@ -126,6 +138,8 @@ 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] },
@@ -135,7 +149,8 @@ const props = defineProps({
   rowHeight: { type: Number, required: false },
   headerHeight: { type: Number, required: false },
   headerText: { type: Function, required: false },
-  filterable: { type: Boolean, required: false }
+  filterable: { type: Boolean, required: false },
+  editable: { type: Boolean, required: false }
 });
 const emit = defineEmits(["rowClick", "selectionChange", "sortChange", "filterChange", "copy"]);
 const query = defineModel("query", { type: String, ...{ default: "" } });
@@ -143,6 +158,10 @@ 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;
@@ -180,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));
@@ -204,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
@@ -218,7 +239,8 @@ const defaultColDef = computed(() => ({
   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 === "";
@@ -241,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);

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

@@ -1,15 +1,17 @@
-import type { FilterChangedEvent, FilterModel, 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,6 +22,8 @@ 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[];
@@ -30,6 +34,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         headerHeight?: number;
         headerText?: (field: string, column: ColDef<T>) => string | undefined;
         filterable?: boolean;
+        editable?: boolean;
     } & {
         query?: string;
         page?: number;