@fkui/vue 6.27.0 → 6.28.0

package/dist/types/cypress.d.ts

@@ -430,7 +430,7 @@ export declare class FInteractiveTablePageObject implements BasePageObject {
      * 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
+     * Neither the marker for expandable rows or the radio/checkbox for selectable
      * rows are included in the column count, i.e. `1` always refers to the
      * first column with content.
      *
@@ -454,7 +454,7 @@ export declare class FInteractiveTablePageObject implements BasePageObject {
     /**
      * Get table header cell (`<th>` in `<thead>`).
      *
-     * Neither the marker for expandable rows or the checkbox for selectable
+     * Neither the marker for expandable rows or the radio/checkbox for selectable
      * rows are included in the column count, i.e. `1` always refers to the
      * first column with content.
      *
@@ -466,7 +466,7 @@ export declare class FInteractiveTablePageObject implements BasePageObject {
     /**
      * Get all table headers (`<th>` in `<thead>`).
      *
-     * Includes the headers for checkboxes in selectable rows and markers in expandable rows.
+     * Includes the headers for radios/checkboxes in selectable rows and markers in expandable rows.
      */
     headersRow(): DefaultCypressChainable;
     /**
@@ -491,17 +491,34 @@ export declare class FInteractiveTablePageObject implements BasePageObject {
      * parent row while if the first row is expanded the second row refers to
      * the first expanded row under the first row.
      *
-     * Requires a `selectable` table.
+     * Requires a `selectable` table of type `multi`.
      *
      * @public
+     * @deprecated Use ´.selectable()´ instead. Deprecated since v6.28.0.
      * @param row - Row number (1-indexed).
      * @returns Page object for `FCheckboxField`.
      */
     checkbox(row: number): FCheckboxFieldPageObject;
+    /**
+     * Get selectable input element (checkbox or radio) in given row.
+     *
+     * 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.
+     *
+     * Requires a `selectable` table.
+     *
+     * @public
+     * @since v6.28.0
+     * @param row - Row number (1-indexed).
+     * @returns Input element.
+     */
+    selectable(row: number): DefaultCypressChainable;
     /**
      * Get sort order icon in given column.
      *
-     * Index includes the columns for checkboxes in selectable rows and markers in expandable rows.
+     * Index includes the columns for radios/checkboxes in selectable rows and markers in expandable rows.
      *
      * @param index - Column index (0-indexed).
      * @param order - Column sort order.
@@ -934,7 +951,7 @@ export declare class FTableColumnPageObject implements BasePageObject {
      */
     tableRowHeaderContent(): DefaultCypressChainable;
     /**
-     * @deprecated Use ´FInteractiveTablePageObject.checkbox()´ instead. Deprecated since v6.11.0.
+     * @deprecated Use ´FInteractiveTablePageObject.selectable()´ instead. Deprecated since v6.11.0.
      */
     checkbox(): FCheckboxFieldPageObject;
 }

package/dist/types/index.d.ts

@@ -2177,6 +2177,7 @@ expandedClass(): string;
 hasOutsideSlot(): boolean;
 haveNotifications(): boolean;
 screenReaderNotificationText(): string;
+notificationTitle(): string;
 }, {
 onClickHeadingButton(event: MouseEvent): void;
 }, ComponentOptions, ComponentOptionsMixin, "toggle"[], "toggle", PublicProps, Readonly<ExtractPropTypes<    {
@@ -3101,103 +3102,71 @@ flip: string;
 rotate: string;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
-declare const __VLS_export_23: <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<ExtractPublicPropTypes<    {
-    /**
-    * The rows to be listed.
-    * The rows will be listed in the given array order.
-    */
-    rows: {
-    type: PropType<T[]>;
-    required: boolean;
-    };
-    /**
-    * When enabled hovering over a row will be highlighted.
-    */
-    hover: {
-    type: BooleanConstructor;
-    };
-    /**
-    * Unique attribute in rows.
-    */
-    keyAttribute: {
-    type: StringConstructor;
-    required: boolean;
-    default: undefined;
-    };
-    /**
-    * Attribute of expandable content in rows.
-    * If provided, the table can contain expandable rows.
-    */
-    expandableAttribute: {
-    type: StringConstructor;
-    default: string;
-    };
-    /**
-    * Element id for aria-describedby on expandable rows to describe expanded content.
-    */
-    expandableDescribedby: {
-    type: StringConstructor;
-    default: string;
-    };
-    /**
-    * When enabled the table rows will be selectable.
-    *
-    * The current set of selected rows can be accessed with `v-model`.
-    *
-    * The `select` and `unselect` events will be emitted when a row is selected
-    * or deselected.
-    */
-    selectable: {
-    type: BooleanConstructor;
-    };
-    /**
-    * When enabled alternating rows will use a different background color.
-    */
-    striped: {
-    type: BooleanConstructor;
-    };
-    /**
-    * Enable scrolling inside table.
-    *
-    * Can be one of the following values:
-    *
-    * - `"horizontal"`: Enables horizontal scrolling
-    * - `"vertical"`: Does nothing (deprecated)
-    * - `"both"`: Acts as horizontal (deprecated)
-    * - `"none"`: Disables scrolling (default)
-    */
-    scroll: {
-    type: PropType<TableScroll>;
-    default: TableScroll;
-    validator(value: string): boolean;
-    };
-    /**
-    * Enable showing the active row.
-    */
-    showActive: {
-    type: BooleanConstructor;
-    required: boolean;
-    default: boolean;
-    };
-    /**
-    * Currently selected rows.
-    * Requires `selectable` to be set.
-    */
-    modelValue: {
-    type: PropType<T[] | undefined>;
-    required: boolean;
-    default: undefined;
-    };
-    /**
-    * Current active row.
-    */
-    active: {
-    type: PropType<T | undefined>;
-    required: boolean;
-    default: undefined;
-    };
-    }> & {
+declare const __VLS_export_23: <T extends object, KeyAttribute extends AnyPropertyOf<T> = AnyPropertyOf<T>, ExpandableAttribute extends ArrayPropertyOf<T> = ArrayPropertyOf<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<{
+        /**
+         * The rows to be listed.
+         * The rows will be listed in the given array order.
+         */
+        rows: T[];
+        /**
+         * When enabled hovering over a row will be highlighted.
+         */
+        hover?: boolean;
+        /**
+         * Unique attribute in rows.
+         */
+        keyAttribute?: KeyAttribute;
+        /**
+         * Attribute of expandable content in rows.
+         * If provided, the table can contain expandable rows.
+         */
+        expandableAttribute?: ExpandableAttribute;
+        /**
+         * Element id for aria-describedby on expandable rows to describe expanded content.
+         */
+        expandableDescribedby?: string;
+        /**
+         * When set the table rows will be selectable.
+         *
+         * For multiselect, set value to `"multi"` (or `true`).
+         * For single select, set value to `"single"`.
+         *
+         * The current set of selected rows can be accessed with `v-model`.
+         *
+         * The `select` and `unselect` events will be emitted when a row is selected
+         * or deselected.
+         */
+        selectable?: boolean | "single" | "multi";
+        /**
+         * When enabled alternating rows will use a different background color.
+         */
+        striped?: boolean;
+        /**
+         * Enable scrolling inside table.
+         *
+         * Can be one of the following values:
+         *
+         * - `"horizontal"`: Enables horizontal scrolling
+         * - `"vertical"`: Does nothing (deprecated)
+         * - `"both"`: Acts as horizontal (deprecated)
+         * - `"none"`: Disables scrolling (default)
+         */
+        scroll?: TableScroll;
+        /**
+         * Enable showing the active row.
+         */
+        showActive?: boolean;
+        /**
+         * Currently selected rows.
+         * Requires `selectable` to be set.
+         */
+        modelValue?: T[];
+        /**
+         * Current active row.
+         */
+        active?: T;
+    } & {
         onSelect?: ((row: T) => any) | undefined;
         onCollapse?: ((row: T) => any) | undefined;
         "onUpdate:modelValue"?: ((rows: T[]) => any) | undefined;
@@ -3221,6 +3190,18 @@ declare const __VLS_export_23: <T extends object, K extends keyof T>(__VLS_props
         'checkbox-description'?: (props: {
             row: T;
         }) => any;
+    } & {
+        'selectable-description'?: (props: {
+            row: T;
+        }) => any;
+    } & {
+        'checkbox-description'?: (props: {
+            row: T;
+        }) => any;
+    } & {
+        'selectable-description'?: (props: {
+            row: T;
+        }) => any;
     } & {
         default?: (props: {
             row: T;
@@ -3231,7 +3212,7 @@ declare const __VLS_export_23: <T extends object, K extends keyof T>(__VLS_props
         }) => any;
     } & {
         expandable?: (props: {
-            expandableRow: T;
+            expandableRow: T[ExpandableAttribute] extends any[] ? T[ExpandableAttribute][number] : never;
             parentRow: T;
         }) => any;
     } & {
@@ -17249,7 +17230,7 @@ export declare function ActivateItemInjected<T>(): ActivateItemInterface<T>;
 export declare interface ActivateItemInterface<T> {
     registerCallbackAfterItemAdd(callback: ActivateItemCallback<T>): void;
     registerCallbackBeforeItemDelete(callback: ActivateItemCallback<T>): void;
-    setNestedKey(key: keyof T): void;
+    setNestedKey(key: keyof T | null | undefined): void;
 }
 
 /**
@@ -17260,6 +17241,12 @@ export declare interface ActivateItemInterface<T> {
  */
 export declare type AnimationCallback = (expand: boolean) => void | Promise<void>;
 
+declare type AnyPropertyOf<T> = keyof T;
+
+declare type ArrayPropertyOf<T> = {
+    [K in keyof T]: IsArray<T[K], K>;
+}[keyof T];
+
 /**
  * @public
  */
@@ -18261,6 +18248,8 @@ declare interface IPopupListboxProps {
 
 export declare const IPopupMenu: typeof __VLS_export_74;
 
+declare type IsArray<T, U> = T extends any[] | undefined ? U : never;
+
 /**
  * @public
  */

package/htmlvalidate/configs/recommended.js

@@ -9,9 +9,10 @@ module.exports = {
     rules: {
         "fkui/button-group": "error",
         "fkui/class-deprecated": "error",
+        "fkui/slot-deprecated": "error",
         "fkui/prefer-ficon": "error",
         "fkui/required-max-length": "error",
-        "fkui/finteractivetable-checkbox-description": "error",
+        "fkui/finteractivetable-selectable-description": "error",
         "fkui/ftextfield-formatter-validation": "error",
         "fkui/no-template-modal": "error",
         "fkui/ftablecolumn-name": "error",

package/htmlvalidate/elements/components.js

@@ -448,6 +448,7 @@ module.exports = defineMetadata({
             "caption",
             "row-description",
             "checkbox-description",
+            "selectable-description",
             "empty",
             "expandable",
         ],

package/htmlvalidate/rules/common.js

@@ -12,4 +12,22 @@ function getDocumentationUrl(path) {
     return `${homepage}${path}`;
 }
 
-module.exports = { getDocumentationUrl };
+/**
+ * @internal
+ * @param {import("html-validate").HtmlElement} element
+ * @returns {string[]}
+ */
+function getSlots(element) {
+    return Object.fromEntries(
+        element.childElements
+            .filter((it) => it.is("template"))
+            .map((it) => {
+                const key = it.attributes.find((jt) =>
+                    jt.key.startsWith("#"),
+                )?.key;
+                return [key, it];
+            }),
+    );
+}
+
+module.exports = { getDocumentationUrl, getSlots };

package/htmlvalidate/rules/finteractivetable-selectable-description.rule.js

@@ -0,0 +1,57 @@
+const {
+    Rule,
+    TextClassification,
+    classifyNodeText,
+} = require("html-validate/node");
+const { getDocumentationUrl, getSlots } = require("./common");
+
+/**
+ * @param {import("html-validate").ElementReadyEvent} event
+ * @returns {boolean}
+ */
+function isRelevant(event) {
+    return event.target.is("f-interactive-table");
+}
+
+class FInteractiveTableSelectableDescription extends Rule {
+    documentation() {
+        return {
+            description:
+                "`#selectable-description` slot must implemented and non-empty when `selectable` is enabled",
+            url: getDocumentationUrl("/components/table-and-list/table.html"),
+        };
+    }
+
+    setup() {
+        this.on("element:ready", isRelevant, (event) => {
+            const { target } = event;
+            const selectable = target.getAttribute("selectable");
+            if (!selectable) {
+                return;
+            }
+            const slots = getSlots(target);
+            const selectableDescription = slots["#selectable-description"];
+            if (!selectableDescription) {
+                this.report({
+                    node: target,
+                    location: selectable.keyLocation,
+                    message:
+                        "#selectable-description slot must be implemented when selectable is enabled",
+                });
+                return;
+            }
+
+            const textContent = classifyNodeText(selectableDescription);
+            if (textContent === TextClassification.EMPTY_TEXT) {
+                this.report({
+                    node: selectableDescription,
+                    location: selectableDescription.location,
+                    message:
+                        "#selectable-description cannot be empty when selectable is enabled",
+                });
+            }
+        });
+    }
+}
+
+module.exports = FInteractiveTableSelectableDescription;

package/htmlvalidate/rules/index.js

@@ -1,20 +1,22 @@
 const buttongroup = require("./buttongroup.rule");
 const classdeprecated = require("./classdeprecated.rule");
-const FInteractiveTableCheckboxDescription = require("./finteractivetable-checkbox-description.rule");
+const FInteractiveTableSelectableDescription = require("./finteractivetable-selectable-description.rule");
 const FTableColumnName = require("./ftablecolumn-name.rule");
 const ftextfieldFormatterValidation = require("./ftextfieldFormatterValidation.rule");
 const NoTemplateModal = require("./no-template-modal.rule");
 const PreferFIcon = require("./prefer-ficon.rule");
 const requiredmaxlength = require("./requiredmaxlength.rule");
+const slotdeprecated = require("./slotdeprecated.rule");
 
 module.exports = {
     "fkui/button-group": buttongroup,
     "fkui/class-deprecated": classdeprecated,
     "fkui/prefer-ficon": PreferFIcon,
     "fkui/required-max-length": requiredmaxlength,
-    "fkui/finteractivetable-checkbox-description":
-        FInteractiveTableCheckboxDescription,
+    "fkui/finteractivetable-selectable-description":
+        FInteractiveTableSelectableDescription,
     "fkui/ftextfield-formatter-validation": ftextfieldFormatterValidation,
     "fkui/no-template-modal": NoTemplateModal,
     "fkui/ftablecolumn-name": FTableColumnName,
+    "fkui/slot-deprecated": slotdeprecated,
 };

package/htmlvalidate/rules/slotdeprecated.rule.js

@@ -0,0 +1,85 @@
+const { Rule } = require("html-validate/node");
+const { getDocumentationUrl, getSlots } = require("./common");
+
+/**
+ * @typedef {import("html-validate").RuleDocumentation} RuleDocumentation
+ */
+
+/**
+ * @typedef {Object} Entry
+ * @property {string} slot
+ * @property {string} component
+ * @property {string} [replacement]
+ * @property {string} [additionalMessage]
+ * @property {string} url
+ */
+
+/** @type {Entry[]} */
+const deprecatedSlots = [
+    {
+        slot: "#checkbox-description",
+        component: "f-interactive-table",
+        replacement: "selectable-description",
+        url: "/components/table-and-list/table.html",
+    },
+];
+
+/**
+ * @param {import("html-validate").ElementReadyEvent} event
+ * @returns {boolean}
+ */
+function isRelevant(event) {
+    return deprecatedSlots
+        .map((it) => it.component)
+        .includes(event.target.tagName);
+}
+
+/**
+ * @extends {Rule<Entry, void>}
+ */
+class SlotDeprecated extends Rule {
+    /**
+     * @param {Entry} context
+     * @returns {RuleDocumentation}
+     */
+    documentation(context) {
+        const { url, replacement, additionalMessage } = context;
+        const message = replacement
+            ? `Slot \`${context.slot}\` is deprecated and should be replaced with \`${replacement}\``
+            : `Slot \`${context.slot}\` is deprecated.`;
+        return {
+            description: additionalMessage
+                ? `${message}\n\n${additionalMessage}`
+                : message,
+            url: getDocumentationUrl(url),
+        };
+    }
+
+    setup() {
+        this.on("element:ready", isRelevant, (event) => {
+            const { target } = event;
+            const slots = getSlots(target);
+            const entries = deprecatedSlots.filter((it) =>
+                target.is(it.component),
+            );
+
+            for (const entry of entries) {
+                const description = slots[entry.slot];
+                if (!description) {
+                    continue;
+                }
+
+                this.report({
+                    node: target,
+                    location: description.location,
+                    message: entry.replacement
+                        ? `slot "{{ slot }}" is deprecated and replaced with "{{ replacement }}"`
+                        : `slot "{{ slot }}" is deprecated`,
+                    context: entry,
+                });
+            }
+        });
+    }
+}
+
+module.exports = SlotDeprecated;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fkui/vue",
-  "version": "6.27.0",
+  "version": "6.28.0",
   "description": "Vue implementation of FKUI components",
   "keywords": [
     "fkui",
@@ -60,9 +60,9 @@
     "unit:watch": "jest --watch"
   },
   "peerDependencies": {
-    "@fkui/date": "^6.27.0",
-    "@fkui/design": "^6.27.0",
-    "@fkui/logic": "^6.27.0",
+    "@fkui/date": "^6.28.0",
+    "@fkui/design": "^6.28.0",
+    "@fkui/logic": "^6.28.0",
     "fk-icons": "^4.30.1",
     "html-validate": ">= 7.9.0",
     "vue": "^3.5.0"
@@ -79,5 +79,5 @@
     "node": ">= 20",
     "npm": ">= 7"
   },
-  "gitHead": "1634a325b0102a6aa74fee4b8767d9236a958b31"
+  "gitHead": "fe2ffaeb55b9e9f560cc6f660740bc3480f77cd8"
 }

package/htmlvalidate/rules/finteractivetable-checkbox-description.rule.js

@@ -1,73 +0,0 @@
-const {
-    Rule,
-    TextClassification,
-    classifyNodeText,
-} = require("html-validate/node");
-const { getDocumentationUrl } = require("./common");
-
-/**
- * @param {import("html-validate").ElementReadyEvent} event
- * @returns {boolean}
- */
-function isRelevant(event) {
-    return event.target.is("f-interactive-table");
-}
-
-/**
- * @param {import("html-validate").HtmlElement} element
- * @returns {string[]}
- */
-function getSlots(element) {
-    return Object.fromEntries(
-        element.childElements
-            .filter((it) => it.is("template"))
-            .map((it) => {
-                const key = it.attributes.find((jt) =>
-                    jt.key.startsWith("#"),
-                )?.key;
-                return [key, it];
-            }),
-    );
-}
-
-class FInteractiveTableCheckboxDescription extends Rule {
-    documentation() {
-        return {
-            description:
-                "`#checkbox-description` slot must implemented and non-empty when `selectable` is enabled",
-            url: getDocumentationUrl("/components/table-and-list/table.html"),
-        };
-    }
-
-    setup() {
-        this.on("element:ready", isRelevant, (event) => {
-            const { target } = event;
-            const selectable = target.getAttribute("selectable");
-            if (!selectable) {
-                return;
-            }
-            const slots = getSlots(target);
-            const checkboxDescription = slots["#checkbox-description"];
-            if (!checkboxDescription) {
-                this.report({
-                    node: target,
-                    location: selectable.keyLocation,
-                    message:
-                        "#checkbox-description slot must be implemented when selectable is enabled",
-                });
-                return;
-            }
-            const textContent = classifyNodeText(checkboxDescription);
-            if (textContent === TextClassification.EMPTY_TEXT) {
-                this.report({
-                    node: checkboxDescription,
-                    location: checkboxDescription.location,
-                    message:
-                        "#checkbox-description cannot be empty when selectable is enabled",
-                });
-            }
-        });
-    }
-}
-
-module.exports = FInteractiveTableCheckboxDescription;