@fkui/vue 6.4.0 → 6.6.0

package/dist/types/cypress.d.ts

@@ -205,6 +205,47 @@ export declare class FDatepickerFieldPageobject implements BasePageObject {
     highlightedDay(): DefaultCypressChainable;
 }
 
+/**
+ * Cypress pageobject for`FDetailsPanel`.
+ *
+ * @public
+ */
+export declare class FDetailsPanelPageObject implements BasePageObject {
+    /** Base selector */
+    readonly selector: string;
+    protected constructor(selector: string);
+    /**
+     * Get a selector based on the panel name.
+     */
+    protected static nameSelector(name: string): string;
+    /**
+     * Get details panel based on its `name` prop.
+     *
+     * @param name - Name given to panel.
+     */
+    static fromName(name: string): FDetailsPanelPageObject;
+    /**
+     * Panel element.
+     */
+    el(): DefaultCypressChainable;
+    /**
+     * Content in header slot (as defined by consumer).
+     */
+    header(): Cypress.Chainable<JQuery<HTMLElement>>;
+    /**
+     * Content in content slot (as defined by consumer).
+     */
+    content(): Cypress.Chainable<JQuery<HTMLElement>>;
+    /**
+     * Content in footer slot (as defined by consumer).
+     */
+    footer(): Cypress.Chainable<JQuery<HTMLElement>>;
+    /**
+     * Default submit button.
+     */
+    closeButton(): Cypress.Chainable<JQuery<HTMLButtonElement>>;
+}
+
 /**
  * @public
  */
@@ -362,6 +403,30 @@ export declare class FInteractiveTablePageObject implements BasePageObject {
      * @param selector - table selector.
      */
     constructor(selector: string);
+    /**
+     * Get table cell (typically `<td>` but can be `<th>` if row headers are
+     * present).
+     *
+     * Both row and column are 1-indexed, i.e. 1:1 selects the first cell in the
+     * first row.
+     *
+     * Neither the marker for expandable rows or the checkbox for selectable
+     * rows are included in the column count, i.e. `1` always refers to the
+     * first column with content.
+     *
+     * For expandable rows the row count depend on whenever a row is expanded or
+     * not. If the first row is collapsed the second row refers to the next
+     * parent row while if the first row is expanded the second row refers to
+     * the first expanded row under the first row.
+     *
+     * @public
+     * @param descriptor - Row and column number of cell (1-indexed).
+     * @returns The cell element.
+     */
+    cell(descriptor: {
+        row: number;
+        col: number;
+    }): Cypress.Chainable<JQuery<HTMLTableCellElement>>;
     caption(): DefaultCypressChainable;
     bodyRow(): DefaultCypressChainable;
     row(index: number): DefaultCypressChainable;
@@ -481,6 +546,40 @@ export declare class FMessageBoxPageObject implements BasePageObject {
     typeOfMessage(): Cypress.Chainable<string>;
 }
 
+/**
+ * Cypress pageobject for`FMinimizablePanel`.
+ *
+ * @public
+ */
+export declare class FMinimizablePanelPageObject implements BasePageObject {
+    /** Base selector */
+    readonly selector: string;
+    /**
+     * @param selector - panel selector.
+     */
+    constructor(selector: string);
+    /**
+     * Panel element.
+     */
+    el(): DefaultCypressChainable;
+    /**
+     * Content in header slot (as defined by consumer).
+     */
+    header(): Cypress.Chainable<JQuery<HTMLElement>>;
+    /**
+     * Content in content slot (as defined by consumer).
+     */
+    content(): Cypress.Chainable<JQuery<HTMLElement>>;
+    /**
+     * Content in footer slot (as defined by consumer).
+     */
+    footer(): Cypress.Chainable<JQuery<HTMLElement>>;
+    /**
+     * Toggle button.
+     */
+    toggleButton(): Cypress.Chainable<JQuery<HTMLButtonElement>>;
+}
+
 /**
  * @public
  */
@@ -846,8 +945,8 @@ export declare class FWizardStepHeaderPageobject implements BasePageObject {
     successIcon: () => DefaultCypressChainable;
     stepNumber: () => Cypress.Chainable<string>;
     stepOf: () => DefaultCypressChainable;
-    title: () => DefaultCypressChainable;
     constructor(selector: string);
+    title(): DefaultCypressChainable;
 }
 
 /**

package/dist/types/index.d.ts

@@ -135,22 +135,24 @@ update: () => any;
 onUpdate?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-declare const __VLS_component_4: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{}>, {
+declare const __VLS_component_4: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_component_5: DefineComponent<__VLS_Props_3, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_3> & Readonly<{}>, {
 min: string;
 max: string;
 initial: string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-declare const __VLS_component_5: DefineComponent<ExtractPropTypes<    {
+declare const __VLS_component_6: DefineComponent<ExtractPropTypes<    {
 /**
-* Unique (per-table) identifier.
+* Unique (per-table) identifier. Typically set to the row
+* property displayed but any unique string can be used.
 *
-* Typically set to the row property displayed but any unique string can
-* be used.
+* Only required when used with `FSortFilterDataset`.
 */
 name: {
 type: StringConstructor;
-required: true;
+default: undefined;
 };
 /**
 * If set to true, display the column, set to false to hide it.
@@ -226,14 +228,14 @@ validator(value: string): value is FTableColumnType;
 };
 }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
 /**
-* Unique (per-table) identifier.
+* Unique (per-table) identifier. Typically set to the row
+* property displayed but any unique string can be used.
 *
-* Typically set to the row property displayed but any unique string can
-* be used.
+* Only required when used with `FSortFilterDataset`.
 */
 name: {
 type: StringConstructor;
-required: true;
+default: undefined;
 };
 /**
 * If set to true, display the column, set to false to hide it.
@@ -309,14 +311,17 @@ validator(value: string): value is FTableColumnType;
 };
 }>> & Readonly<{}>, {
 type: "text" | "date" | "action" | "numeric";
+name: string;
 description: string;
 shrink: boolean;
 expand: boolean;
 visible: boolean;
 rowHeader: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {
+element: unknown;
+}, any>;
 
-declare const __VLS_component_6: DefineComponent<IPopupListboxProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+declare const __VLS_component_7: DefineComponent<IPopupListboxProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 close: () => any;
 }, string, PublicProps, Readonly<IPopupListboxProps> & Readonly<{
 onClose?: (() => any) | undefined;
@@ -346,11 +351,24 @@ declare type __VLS_PrettifyLocal_5<T> = {
     [K in keyof T]: T[K];
 } & {};
 
+declare type __VLS_PrettifyLocal_6<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
 declare type __VLS_Props = {
     layout: string;
 };
 
 declare type __VLS_Props_2 = {
+    /**
+     * Screenreader context for toggle button.
+     *
+     * Default value of `fkui.minimizable-panel.context`.
+     */
+    context?: string;
+};
+
+declare type __VLS_Props_3 = {
     /**
      * Minimal size of pane.
      *
@@ -374,7 +392,7 @@ declare type __VLS_Props_2 = {
     initial?: string;
 };
 
-declare type __VLS_Props_3 = {
+declare type __VLS_Props_4 = {
     id: string;
     isOpen: boolean;
     options: string[];
@@ -422,7 +440,15 @@ declare function __VLS_template_3(): {
 declare function __VLS_template_4(): {
     attrs: Partial<{}>;
     slots: {
-        default?(_: {}): any;
+        default?(_: {
+            isOpen: boolean;
+            header: "header";
+            footer: "footer";
+            content: "content";
+        }): any;
+        icon?(_: {
+            isOpen: boolean;
+        }): any;
     };
     refs: {};
     rootEl: any;
@@ -438,6 +464,17 @@ declare function __VLS_template_5(): {
 };
 
 declare function __VLS_template_6(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        element: unknown;
+    };
+    rootEl: any;
+};
+
+declare function __VLS_template_7(): {
     attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
@@ -462,6 +499,8 @@ declare type __VLS_TemplateResult_5 = ReturnType<typeof __VLS_template_5>;
 
 declare type __VLS_TemplateResult_6 = ReturnType<typeof __VLS_template_6>;
 
+declare type __VLS_TemplateResult_7 = ReturnType<typeof __VLS_template_7>;
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
@@ -498,6 +537,12 @@ declare type __VLS_WithTemplateSlots_6<T, S> = T & {
     };
 };
 
+declare type __VLS_WithTemplateSlots_7<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 /* Excluded from this release type: actionFromKeyboardEvent */
 
 /**
@@ -952,6 +997,14 @@ align: string;
 export { _default as FValidationForm }
 export { _default as IValidationForm }
 
+/**
+ * @public
+ */
+export declare type DetailsPanelCloseCallback<T> = (data: {
+    item: T;
+    reason: string;
+}) => void;
+
 /* Excluded from this release type: dispatchComponentUnmountEvent */
 
 /**
@@ -4152,6 +4205,9 @@ export declare const FDataTable: <T extends object>(__VLS_props: NonNullable<Awa
     attrs: any;
     slots: {
         caption?(_: {}): any;
+        default?(_: {
+            row: {};
+        }): any;
         default?(_: {
             row: T;
         }): any;
@@ -5230,6 +5286,34 @@ highlight: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 }, {}, string, ComponentProvideOptions, true, {}, any>;
 
+export declare const FDetailsPanel: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal_3<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal_3<Pick<Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>, never> & {
+        /**
+         * Name of this panel. Used when referencing the panel in useDetailsPanel.
+         */
+        name: string;
+        /**
+         * An optional identifier to prevent other panels with the same identifier
+         * from being open at the same time.
+         */
+        exclusive?: string;
+    } & Partial<{}>> & PublicProps;
+    expose(exposed: ShallowUnwrapRef<    {}>): void;
+    attrs: any;
+    slots: {
+        default?(_: {
+            item: T;
+            close: (reason?: string) => void;
+            header: "header";
+            footer: "footer";
+            content: "content";
+        }): any;
+    };
+    emit: {};
+}>) => VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+
 export declare const FDialogueTree: DefineComponent<ExtractPropTypes<    {
 /**
 * Current dialogue question
@@ -7860,8 +7944,8 @@ export declare function findHTMLElementFromVueRef(ref: unknown): HTMLElement | u
  */
 export declare function findParentByName(vm: ComponentPublicInstance | undefined | null, name: string): ComponentPublicInstance | undefined;
 
-export declare const FInteractiveTable: <T extends object, K extends keyof T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal_3<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal_3<Pick<Partial<{
+export declare const FInteractiveTable: <T extends object, K extends keyof T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal_4<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal_4<Pick<Partial<{
         modelValue: T[] | undefined;
         scroll: TableScroll;
         keyAttribute: string;
@@ -7914,8 +7998,8 @@ export declare const FInteractiveTable: <T extends object, K extends keyof T>(__
     slots: {
         'row-description'?(_: {}): any;
         caption?(_: {}): any;
-        'checkbox-description'?(_: {
-            row: T;
+        default?(_: {
+            row: {};
         }): any;
         default?(_: {
             row: T;
@@ -7929,6 +8013,9 @@ export declare const FInteractiveTable: <T extends object, K extends keyof T>(__
         default?(_: {
             row: T;
         }): any;
+        'checkbox-description'?(_: {
+            row: T;
+        }): any;
         expandable?(_: {
             expandableRow: T;
             parentRow: T;
@@ -8287,8 +8374,8 @@ export declare interface FLayoutRightPanelInteface {
  */
 export declare const FLayoutRightPanelService: FLayoutRightPanelInteface;
 
-export declare const FList: <T extends object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal_4<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal_4<Pick<Partial<{
+export declare const FList: <T extends object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal_5<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal_5<Pick<Partial<{
         elementId: string;
         modelValue: T[] | undefined;
         checkbox: boolean;
@@ -8577,9 +8664,9 @@ default: string;
 validator(value: string): boolean;
 };
 }>> & Readonly<{}>, {
+layout: "standard" | "short";
 banner: boolean;
 provideScreenReaderContext: boolean;
-layout: "standard" | "short";
 }, {}, {
 FIcon: DefineComponent<ExtractPropTypes<    {
 name: {
@@ -8718,6 +8805,8 @@ align: string;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 }, {}, string, ComponentProvideOptions, true, {}, any>;
 
+export declare const FMinimizablePanel: __VLS_WithTemplateSlots_4<typeof __VLS_component_4, __VLS_TemplateResult_4["slots"]>;
+
 /**
  * Level: Ready
  */
@@ -9899,9 +9988,9 @@ required: false;
 default: typeof parseNumber;
 };
 }>> & Readonly<{}>, {
+decimals: number;
 formatter: FormatFunction<number>;
 parser: ParseFunction<number>;
-decimals: number;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 /**
@@ -10531,6 +10620,13 @@ formatter: FormatFunction<string>;
  */
 export declare type FormatFunction<TModel> = (modelValue: TModel) => string | undefined;
 
+/**
+ * FormatPlugin: A Vue directive plugin for formatting text based on a provided format definition.
+ *
+ * @public
+ */
+export declare const FormatPlugin: Plugin_2;
+
 /**
  * @public
  */
@@ -11255,9 +11351,9 @@ required: false;
 default: typeof parsePercent;
 };
 }>> & Readonly<{}>, {
+decimals: number;
 formatter: FormatFunction<number>;
 parser: ParseFunction<number>;
-decimals: number;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 export declare const FPersonnummerTextField: DefineComponent<ExtractPropTypes<    {
@@ -13330,7 +13426,7 @@ id: string;
 disabled: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
-export declare const FResizePane: __VLS_WithTemplateSlots_4<typeof __VLS_component_4, __VLS_TemplateResult_4["slots"]>;
+export declare const FResizePane: __VLS_WithTemplateSlots_5<typeof __VLS_component_5, __VLS_TemplateResult_5["slots"]>;
 
 export declare const FSearchTextField: DefineComponent<ExtractPropTypes<    {
 id: {
@@ -14145,8 +14241,8 @@ rotate: string;
 }, {}, string, ComponentProvideOptions, true, {}, any>;
 }, {}, string, ComponentProvideOptions, true, {}, any>;
 
-export declare const FSortFilterDataset: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal_5<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal_5<Pick<Partial<{
+export declare const FSortFilterDataset: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal_6<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal_6<Pick<Partial<{
         data: T[];
         defaultSortAttribute: string;
         showSort: boolean;
@@ -14303,14 +14399,14 @@ rotate: string;
 }, {}, string, ComponentProvideOptions, true, {}, any>;
 }, {}, string, ComponentProvideOptions, true, {}, any>;
 
-export declare const FTableColumn: __VLS_WithTemplateSlots_5<typeof __VLS_component_5, __VLS_TemplateResult_5["slots"]>;
+export declare const FTableColumn: __VLS_WithTemplateSlots_6<typeof __VLS_component_6, __VLS_TemplateResult_6["slots"]>;
 
 /**
  * @public
  */
 export declare interface FTableColumnData {
     id: string;
-    name: string;
+    name?: string;
     title: string;
     description?: string;
     size: FTableColumnSize;
@@ -16849,10 +16945,10 @@ rotate: string;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 }, {}, string, ComponentProvideOptions, true, {}, any>;
 
-export declare const IComboboxDropdown: DefineComponent<__VLS_Props_3, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+export declare const IComboboxDropdown: DefineComponent<__VLS_Props_4, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 select: (option: string) => any;
 close: () => any;
-}, string, PublicProps, Readonly<__VLS_Props_3> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_4> & Readonly<{
 onSelect?: ((option: string) => any) | undefined;
 onClose?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
@@ -17347,7 +17443,7 @@ export declare interface IPopupErrorData {
     arrowOffset: number;
 }
 
-export declare const IPopupListbox: __VLS_WithTemplateSlots_6<typeof __VLS_component_6, __VLS_TemplateResult_6["slots"]>;
+export declare const IPopupListbox: __VLS_WithTemplateSlots_7<typeof __VLS_component_7, __VLS_TemplateResult_7["slots"]>;
 
 declare interface IPopupListboxProps {
     isOpen: boolean;
@@ -18203,6 +18299,24 @@ export declare function useCombobox(inputRef: Readonly<ShallowRef<HTMLInputEleme
     closeDropdown: () => void;
 };
 
+/**
+ * @public
+ */
+export declare interface UseDetailsPanel<T = unknown> {
+    open(item: T, options?: {
+        onClose?: DetailsPanelCloseCallback<T>;
+    }): void;
+    close(): void;
+}
+
+/**
+ * Get a API object to access details panels (FDetailsPanel).
+ *
+ * @public
+ * @param name - Name of panel.
+ */
+export declare function useDetailsPanel<T = unknown>(name: string): UseDetailsPanel<T>;
+
 /**
  * Composable to get access to modal functions.
  *

package/dist/types/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.52.2"
+      "packageVersion": "7.52.4"
     }
   ]
 }

package/htmlvalidate/configs/recommended.js

@@ -13,5 +13,6 @@ module.exports = {
         "fkui/required-max-length": "error",
         "fkui/ftextfield-formatter-validation": "error",
         "fkui/no-template-modal": "error",
+        "fkui/ftablecolumn-name": "error",
     },
 };

package/htmlvalidate/elements/components.js

@@ -186,6 +186,24 @@ module.exports = defineMetadata({
         inherit: "f-text-field#tooltip",
     },
 
+    "f-details-panel": {
+        flow: true,
+        attributes: {
+            name: {
+                required: true,
+                enum: ["/.+/"],
+            },
+            exclude: {
+                enum: ["/.+/"],
+            },
+        },
+        slots: ["default", "icon"],
+    },
+
+    "f-details-panel#icon": {
+        permittedContent: ["f-icon"],
+    },
+
     "f-calendar": {
         flow: true,
         slots: ["default"],
@@ -430,6 +448,31 @@ module.exports = defineMetadata({
         inherit: "f-label#description",
     },
 
+    "f-minimizable-panel": {
+        flow: true,
+        attributes: {
+            context: {
+                enum: ["/.+/"],
+            },
+        },
+        slots: ["default", "icon"],
+    },
+
+    "ce-minimizable-panel": {
+        flow: true,
+        attributes: {
+            context: {
+                enum: ["/.+/"],
+            },
+            openPrefix: {
+                enum: ["/.+/"],
+            },
+            closePrefix: {
+                enum: ["/.+/"],
+            },
+        },
+    },
+
     "f-page-layout": {
         flow: true,
         attributes: {
@@ -507,7 +550,7 @@ module.exports = defineMetadata({
             description: ["/.+/"],
             type: ["text", "date", "numeric", "action"],
         },
-        requiredAttributes: ["name", "title"],
+        requiredAttributes: ["title"],
         permittedContent: ["@phrasing", "button", "f-badge"],
     },
 

package/htmlvalidate/rules/ftablecolumn-name.rule.js

@@ -0,0 +1,58 @@
+const { Rule } = require("html-validate/node");
+const { getDocumentationUrl } = require("./common");
+
+class FTableColumnName extends Rule {
+    documentation() {
+        return {
+            description:
+                "`<f-sort-filter-dataset>` requires `name` attribute to be set for each `<f-table-column>` with a unique value.",
+            url: getDocumentationUrl(
+                "/components/table-and-list/fsortfilterdataset.html",
+            ),
+        };
+    }
+
+    setup() {
+        this.on("dom:ready", (event) => {
+            const sorters = event.document.querySelectorAll(
+                "f-sort-filter-dataset",
+            );
+
+            for (const sorter of sorters) {
+                this.validateSorterColumns(sorter);
+            }
+        });
+    }
+
+    validateSorterColumns(sorter) {
+        const columns = sorter.querySelectorAll("f-table-column");
+        const seenNames = new Set();
+
+        for (const column of columns) {
+            const hasName = column.hasAttribute("name");
+            if (!hasName) {
+                this.report(
+                    column,
+                    '<f-table-column> is missing required "name" attribute.',
+                );
+                continue;
+            }
+
+            const { value: name, valueLocation } = column.getAttribute("name");
+            if (name.length === 0) {
+                // Empty name attribute already handled by component rules.
+                continue;
+            }
+            if (seenNames.has(name)) {
+                this.report({
+                    location: valueLocation,
+                    message: `"${name}" is not unique.`,
+                });
+            }
+
+            seenNames.add(name);
+        }
+    }
+}
+
+module.exports = FTableColumnName;

package/htmlvalidate/rules/index.js

@@ -4,6 +4,7 @@ const PreferFIcon = require("./prefer-ficon.rule");
 const requiredmaxlength = require("./requiredmaxlength.rule");
 const ftextfieldFormatterValidation = require("./ftextfieldFormatterValidation.rule");
 const NoTemplateModal = require("./no-template-modal.rule");
+const FTableColumnName = require("./ftablecolumn-name.rule");
 
 module.exports = {
     "fkui/button-group": buttongroup,
@@ -12,4 +13,5 @@ module.exports = {
     "fkui/required-max-length": requiredmaxlength,
     "fkui/ftextfield-formatter-validation": ftextfieldFormatterValidation,
     "fkui/no-template-modal": NoTemplateModal,
+    "fkui/ftablecolumn-name": FTableColumnName,
 };