@xleddyl/443-components-vue 0.8.2 → 0.8.4

package/dist/grid/cells/DateCell.vue

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

package/dist/grid/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

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

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

package/dist/locale/de.mjs

@@ -40,7 +40,10 @@ export const de = {
       maxItems: "W\xE4hle h\xF6chstens {count} Eintrag | W\xE4hle h\xF6chstens {count} Eintr\xE4ge",
       pattern: "Ung\xFCltiges Format",
       invalid: "Ung\xFCltiger Wert",
-      requiredHint: "(erforderlich)"
+      requiredHint: "(erforderlich)",
+      optional: "Optional",
+      characterCount: "{count} von {max} Zeichen",
+      characterLimitReached: "Zeichenlimit erreicht"
     },
     editor: {
       bold: "Fett",
@@ -59,6 +62,13 @@ export const de = {
       linkUrl: "Link-URL",
       applyLink: "\xDCbernehmen",
       removeLink: "Link entfernen",
+      linkType: "Linktyp",
+      linkTypeUrl: "Webadresse",
+      linkTypeEmail: "E-Mail",
+      linkTypePhone: "Telefon",
+      linkEmail: "E-Mail-Adresse",
+      linkPhone: "Telefonnummer",
+      linkText: "Linktext",
       characters: "{count} Zeichen | {count} Zeichen",
       limit: "{count} von {max} Zeichen",
       limitReached: "Zeichenlimit erreicht"

package/dist/locale/en.mjs

@@ -40,7 +40,10 @@ export const en = {
       maxItems: "Select at most {count} item | Select at most {count} items",
       pattern: "Invalid format",
       invalid: "Invalid value",
-      requiredHint: "(required)"
+      requiredHint: "(required)",
+      optional: "Optional",
+      characterCount: "{count} of {max} characters",
+      characterLimitReached: "Character limit reached"
     },
     editor: {
       bold: "Bold",
@@ -59,6 +62,13 @@ export const en = {
       linkUrl: "Link URL",
       applyLink: "Apply",
       removeLink: "Remove link",
+      linkType: "Link type",
+      linkTypeUrl: "Web address",
+      linkTypeEmail: "Email",
+      linkTypePhone: "Phone",
+      linkEmail: "Email address",
+      linkPhone: "Phone number",
+      linkText: "Link text",
       characters: "{count} character | {count} characters",
       limit: "{count} of {max} characters",
       limitReached: "Character limit reached"

package/dist/locale/it.mjs

@@ -40,7 +40,10 @@ export const it = {
       maxItems: "Seleziona al massimo {count} elemento | Seleziona al massimo {count} elementi",
       pattern: "Formato non valido",
       invalid: "Valore non valido",
-      requiredHint: "(obbligatorio)"
+      requiredHint: "(obbligatorio)",
+      optional: "Facoltativo",
+      characterCount: "{count} di {max} caratteri",
+      characterLimitReached: "Limite di caratteri raggiunto"
     },
     editor: {
       bold: "Grassetto",
@@ -59,6 +62,13 @@ export const it = {
       linkUrl: "URL del link",
       applyLink: "Applica",
       removeLink: "Rimuovi link",
+      linkType: "Tipo di link",
+      linkTypeUrl: "Indirizzo web",
+      linkTypeEmail: "Email",
+      linkTypePhone: "Telefono",
+      linkEmail: "Indirizzo email",
+      linkPhone: "Numero di telefono",
+      linkText: "Testo del link",
       characters: "{count} carattere | {count} caratteri",
       limit: "{count} di {max} caratteri",
       limitReached: "Limite di caratteri raggiunto"

package/dist/locale/types.d.ts

@@ -39,6 +39,9 @@ export interface KMessages {
         pattern: string;
         invalid: string;
         requiredHint: string;
+        optional: string;
+        characterCount: string;
+        characterLimitReached: string;
     };
     editor: {
         bold: string;
@@ -57,6 +60,13 @@ export interface KMessages {
         linkUrl: string;
         applyLink: string;
         removeLink: string;
+        linkType: string;
+        linkTypeUrl: string;
+        linkTypeEmail: string;
+        linkTypePhone: string;
+        linkEmail: string;
+        linkPhone: string;
+        linkText: string;
         characters: string;
         limit: string;
         limitReached: string;

package/dist/styles/core/button.css

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

package/dist/styles/core/form-field.css

@@ -37,6 +37,12 @@
    color: var(--k-danger-text);
 }
 
+.k-form-field-optional {
+   font-size: 0.75rem;
+   font-weight: var(--k-font-weight, 400);
+   color: var(--k-text-muted);
+}
+
 .k-form-field-hint {
    margin-left: auto;
    font-size: 0.75rem;

package/dist/styles/core/input.css

@@ -134,3 +134,32 @@
 .k-input.has-trail .k-field {
    padding-right: 2.125rem;
 }
+
+.k-field-counter {
+   font-size: 0.75rem;
+   line-height: 1;
+   color: var(--k-text-muted);
+   white-space: nowrap;
+   pointer-events: none;
+}
+
+.k-field-counter.is-over {
+   color: var(--k-danger-text);
+}
+
+.k-input > .k-field-counter {
+   position: absolute;
+   right: 0.6875rem;
+}
+
+.k-input.has-trail > .k-field-counter {
+   right: 2.125rem;
+}
+
+.k-input.has-counter .k-field {
+   padding-right: calc(var(--k-input-counter-chars) * 0.5rem + 1rem);
+}
+
+.k-input.has-counter.has-trail .k-field {
+   padding-right: calc(var(--k-input-counter-chars) * 0.5rem + 2.5rem);
+}

package/dist/styles/core/textarea.css

@@ -37,3 +37,13 @@
 .k-textarea-box.has-trail .k-textarea {
    padding-right: 2.125rem;
 }
+
+.k-textarea-box > .k-field-counter {
+   position: absolute;
+   right: 1.25rem;
+   bottom: 0.5rem;
+}
+
+.k-textarea-box.has-counter .k-textarea {
+   padding-bottom: 1.5rem;
+}

package/dist/styles/forms/calendar.css

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

package/dist/styles/forms/choice.css

@@ -25,6 +25,12 @@
    gap: 0.5rem 1.25rem;
 }
 
+.k-choice-group.has-columns > .k-choice-group-items {
+   display: grid;
+   grid-template-columns: repeat(var(--k-choice-columns), minmax(0, 1fr));
+   gap: 0.625rem 1.25rem;
+}
+
 .k-radio-group-card > .k-choice-group-items {
    gap: 0.5rem;
 }

package/dist/styles/layout/separator.css

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

package/dist/styles/shared.css

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

package/package.json

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