@xleddyl/443-components-vue 0.8.2 → 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) {
@@ -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;

package/dist/grid/cells/ImageCell.vue

@@ -2,7 +2,8 @@
    <img
       v-if="src"
       class="k-data-grid-image"
-      :class="{ 'is-rounded': params.rounded }"
+      :class="{ 'is-rounded': params.rounded, 'is-contain': params.fit === 'contain' }"
+      :style="sizeStyle"
       :src="src"
       :alt="alt"
       loading="lazy"
@@ -12,6 +13,7 @@
       v-else
       class="k-data-grid-image is-empty"
       :class="{ 'is-rounded': params.rounded }"
+      :style="sizeStyle"
       aria-hidden="true"
    >
       <Icon name="photo" />
@@ -28,5 +30,8 @@ const src = computed(() => {
   const raw = props.params.value;
   return typeof raw === "string" && raw ? raw : "";
 });
+const sizeStyle = computed(
+  () => props.params.size ? { "--k-grid-image-size": props.params.size } : void 0
+);
 const alt = computed(() => props.params.alt?.(props.params.data) ?? "");
 </script>

package/dist/grid/data-grid.css

@@ -33,6 +33,16 @@
    min-height: 8rem;
 }
 
+.k-data-grid.is-fill {
+   flex: 1 1 0%;
+   height: 100%;
+   min-height: 0;
+}
+
+.k-data-grid.is-fill > .k-data-grid-body {
+   flex: 1 1 0%;
+}
+
 .k-data-grid-ag {
    height: 100%;
 }
@@ -174,8 +184,8 @@
 
 .k-data-grid-image {
    display: block;
-   width: 1.75rem;
-   height: 1.75rem;
+   width: var(--k-grid-image-size, 1.75rem);
+   height: var(--k-grid-image-size, 1.75rem);
    object-fit: cover;
    background: var(--k-fill);
    border-radius: var(--k-radius-sm);
@@ -188,6 +198,10 @@
    --k-icon-size: 1rem;
 }
 
+.k-data-grid-image.is-contain {
+   object-fit: contain;
+}
+
 .k-data-grid-image.is-rounded {
    border-radius: var(--k-radius-full);
 }

package/dist/grid/index.d.ts

@@ -2,9 +2,10 @@ export { default as DataGrid } from './DataGrid.vue';
 export { default as GridToolbar } from './GridToolbar.vue';
 export { default as BooleanCell } from './cells/BooleanCell.vue';
 export { default as DateCell } from './cells/DateCell.vue';
+export { default as EmptyCell } from './cells/EmptyCell.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 { registerGridFilterModules, registerGridModules } from './modules';
+export { registerGridEditorModules, registerGridFilterModules, registerGridModules, } from './modules';
 export { createGridTheme } from './theme';
 export type * from './types';

package/dist/grid/index.mjs

@@ -2,8 +2,13 @@ export { default as DataGrid } from "./DataGrid.vue";
 export { default as GridToolbar } from "./GridToolbar.vue";
 export { default as BooleanCell } from "./cells/BooleanCell.vue";
 export { default as DateCell } from "./cells/DateCell.vue";
+export { default as EmptyCell } from "./cells/EmptyCell.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 { registerGridFilterModules, registerGridModules } from "./modules.mjs";
+export {
+  registerGridEditorModules,
+  registerGridFilterModules,
+  registerGridModules
+} from "./modules.mjs";
 export { createGridTheme } from "./theme.mjs";

package/dist/grid/modules.d.ts

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

package/dist/grid/modules.mjs

@@ -1,5 +1,13 @@
 import {
   CellApiModule,
+  CheckboxEditorModule,
+  CustomEditorModule,
+  DateEditorModule,
+  LargeTextEditorModule,
+  NumberEditorModule,
+  SelectEditorModule,
+  TextEditorModule,
+  UndoRedoEditModule,
   CellStyleModule,
   ClientSideRowModelApiModule,
   ClientSideRowModelModule,
@@ -51,3 +59,18 @@ export function registerGridFilterModules() {
   filtersRegistered = true;
   ModuleRegistry.registerModules([TextFilterModule, NumberFilterModule, DateFilterModule]);
 }
+let editorsRegistered = false;
+export function registerGridEditorModules() {
+  if (editorsRegistered) return;
+  editorsRegistered = true;
+  ModuleRegistry.registerModules([
+    TextEditorModule,
+    LargeTextEditorModule,
+    NumberEditorModule,
+    DateEditorModule,
+    CheckboxEditorModule,
+    SelectEditorModule,
+    CustomEditorModule,
+    UndoRedoEditModule
+  ]);
+}

package/dist/grid/theme.mjs

@@ -17,7 +17,7 @@ export function createGridTheme(density) {
     headerBackgroundColor: "var(--k-grid-header-background, var(--k-subtle))",
     headerTextColor: "var(--k-grid-header-text, var(--k-text-muted))",
     headerFontFamily: "var(--k-grid-header-font, var(--k-font-sans))",
-    headerFontSize: 12,
+    headerFontSize: "var(--k-grid-header-font-size, 12px)",
     headerFontWeight: "var(--k-grid-header-font-weight, var(--k-font-weight-medium, 500))",
     headerRowBorder: { color: "var(--k-line)" },
     headerColumnBorder: false,

package/dist/grid/types.d.ts

@@ -45,9 +45,12 @@ export interface BadgeCellParams {
     labels?: Record<string, string>;
     defaultTone?: Tone;
 }
+export type ImageCellFit = 'cover' | 'contain';
 export interface ImageCellParams<T = unknown> {
     alt?: (data: T | undefined) => string;
     rounded?: boolean;
+    fit?: ImageCellFit;
+    size?: string;
 }
 export interface LinkCellParams<T = unknown> {
     href?: (value: unknown, data: T | undefined) => string;

package/dist/internal/forms/counter.d.ts

@@ -0,0 +1,18 @@
+interface CharacterCounterOptions {
+    enabled: () => boolean | undefined;
+    value: () => unknown;
+    attrs: Record<string, unknown>;
+}
+export interface CharacterCounterState {
+    id: string;
+    visible: boolean;
+    length: number;
+    max: number;
+    atLimit: boolean;
+    text: string;
+    label: string;
+    limitMessage: string;
+    width: number;
+}
+export declare function useCharacterCounter(options: CharacterCounterOptions): () => CharacterCounterState;
+export {};

package/dist/internal/forms/counter.mjs

@@ -0,0 +1,31 @@
+import { useId } from "vue";
+import { useLocale } from "../../composables/useLocale.mjs";
+function readLimit(attrs) {
+  const raw = attrs.maxlength ?? attrs.maxLength;
+  if (raw === void 0 || raw === null || raw === "" || raw === false) return void 0;
+  const limit = Number(raw);
+  return Number.isFinite(limit) && limit >= 0 ? Math.trunc(limit) : void 0;
+}
+export function useCharacterCounter(options) {
+  const { t } = useLocale();
+  const id = useId();
+  return () => {
+    const max = readLimit(options.attrs);
+    const visible = Boolean(options.enabled()) && max !== void 0;
+    const value = options.value();
+    const length = value === null || value === void 0 ? 0 : String(value).length;
+    const limit = max ?? 0;
+    const atLimit = visible && length >= limit;
+    return {
+      id,
+      visible,
+      length,
+      max: limit,
+      atLimit,
+      text: `${length} / ${limit}`,
+      label: visible ? t("form.characterCount", { count: length, max: limit }) : "",
+      limitMessage: atLimit ? t("form.characterLimitReached") : "",
+      width: String(limit).length * 2 + 3
+    };
+  };
+}

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

@@ -208,9 +208,9 @@ declare const __VLS_export: import("vue").DefineComponent<{
     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;
-    sheet?: boolean;
     onOpen?: ((() => any) & (() => any)) | undefined;
     closeLabel?: string;
     rootClass?: unknown;
@@ -431,9 +431,9 @@ declare const __VLS_export: import("vue").DefineComponent<{
     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;
-    sheet?: boolean;
     onOpen?: ((() => any) & (() => any)) | undefined;
     closeLabel?: string;
     rootClass?: unknown;