@fkui/vue 6.26.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;
     } & {
@@ -4396,9 +4377,8 @@ default: string;
 * The size of modal. 'large' and 'fullscreen' is valid.
 */
 size: {
-type: StringConstructor;
+type: PropType<(typeof sizes)[number]>;
 default: string;
-validator(value: string): boolean;
 };
 /**
 * The aria-label attribute text for the top right close button.
@@ -4467,9 +4447,8 @@ default: string;
 * The size of modal. 'large' and 'fullscreen' is valid.
 */
 size: {
-type: StringConstructor;
+type: PropType<(typeof sizes)[number]>;
 default: string;
-validator(value: string): boolean;
 };
 /**
 * The aria-label attribute text for the top right close button.
@@ -4501,7 +4480,7 @@ validator(value: string): boolean;
 }>> & Readonly<{
 [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }>, {
-size: string;
+size: "" | "small" | "medium" | "large" | "fullscreen" | "fullwidth";
 content: string;
 isOpen: boolean;
 fullscreen: boolean;
@@ -4535,9 +4514,8 @@ default: string;
 validator(value: string): boolean;
 };
 size: {
-type: StringConstructor;
+type: PropType<(typeof sizes)[number]>;
 default: string;
-validator(value: string): boolean;
 };
 focus: {
 type: PropType<"on" | "off" | "open">;
@@ -4580,9 +4558,8 @@ default: string;
 validator(value: string): boolean;
 };
 size: {
-type: StringConstructor;
+type: PropType<(typeof sizes)[number]>;
 default: string;
-validator(value: string): boolean;
 };
 focus: {
 type: PropType<"on" | "off" | "open">;
@@ -4593,7 +4570,7 @@ validator(value: string): boolean;
 onClose?: ((...args: any[]) => any) | undefined;
 }>, {
 type: "" | "warning" | "error" | "information";
-size: string;
+size: "" | "small" | "medium" | "large" | "fullscreen" | "fullwidth";
 isOpen: boolean;
 fullscreen: boolean;
 id: string;
@@ -4679,9 +4656,8 @@ default: boolean;
 * See <f-modal> `size` props.
 */
 size: {
-type: StringConstructor;
+type: PropType<(typeof sizes)[number]>;
 default: string;
-validator(value: string): boolean;
 };
 /**
 * @ignore
@@ -4803,9 +4779,8 @@ default: boolean;
 * See <f-modal> `size` props.
 */
 size: {
-type: StringConstructor;
+type: PropType<(typeof sizes)[number]>;
 default: string;
-validator(value: string): boolean;
 };
 /**
 * @ignore
@@ -4889,7 +4864,7 @@ data?: any;
 onCancel?: (() => any) | undefined;
 }>, {
 value: Record<string, any>;
-size: string;
+size: "" | "small" | "medium" | "large" | "fullscreen" | "fullwidth";
 isOpen: boolean;
 fullscreen: boolean;
 ariaCloseText: string;
@@ -4925,9 +4900,8 @@ default: string;
 validator(value: string): boolean;
 };
 size: {
-type: StringConstructor;
+type: PropType<(typeof sizes)[number]>;
 default: string;
-validator(value: string): boolean;
 };
 focus: {
 type: PropType<"on" | "off" | "open">;
@@ -4970,9 +4944,8 @@ default: string;
 validator(value: string): boolean;
 };
 size: {
-type: StringConstructor;
+type: PropType<(typeof sizes)[number]>;
 default: string;
-validator(value: string): boolean;
 };
 focus: {
 type: PropType<"on" | "off" | "open">;
@@ -4983,7 +4956,7 @@ validator(value: string): boolean;
 onClose?: ((...args: any[]) => any) | undefined;
 }>, {
 type: "" | "warning" | "error" | "information";
-size: string;
+size: "" | "small" | "medium" | "large" | "fullscreen" | "fullwidth";
 isOpen: boolean;
 fullscreen: boolean;
 id: string;
@@ -5373,9 +5346,8 @@ validator(value: string): boolean;
 * The size of modal in desktop mode.
 */
 size: {
-type: StringConstructor;
+type: PropType<(typeof sizes)[number]>;
 default: string;
-validator(value: string): boolean;
 };
 /**
 * Default behavior is that the modal will restore focus to previous element once closed.
@@ -5451,9 +5423,8 @@ validator(value: string): boolean;
 * The size of modal in desktop mode.
 */
 size: {
-type: StringConstructor;
+type: PropType<(typeof sizes)[number]>;
 default: string;
-validator(value: string): boolean;
 };
 /**
 * Default behavior is that the modal will restore focus to previous element once closed.
@@ -5470,7 +5441,7 @@ validator(value: string): boolean;
 onClose?: ((...args: any[]) => any) | undefined;
 }>, {
 type: "" | "warning" | "error" | "information";
-size: string;
+size: "" | "small" | "medium" | "large" | "fullscreen" | "fullwidth";
 isOpen: boolean;
 fullscreen: boolean;
 id: string;
@@ -16998,6 +16969,14 @@ declare const __VLS_export_9: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_
     required: boolean;
     default: string;
     };
+    /**
+    * Property for changing the "add" and "modify" modal size
+    */
+    formModalSize: {
+    type: PropType<(typeof sizes)[number]>;
+    required: boolean;
+    default: string;
+    };
     }> & {
         onCreated?: ((item: T) => any) | undefined;
         onUpdated?: ((item: T) => any) | undefined;
@@ -17251,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;
 }
 
 /**
@@ -17262,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
  */
@@ -18263,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
  */
@@ -18672,6 +18659,8 @@ export declare function setInternalKeys<T>(items: T[], key?: keyof T, nestedKey?
  */
 export declare function setRunningContext(app: App): void;
 
+declare const sizes: readonly ["", "small", "medium", "large", "fullscreen", "fullwidth"];
+
 /**
  * Represents the attributes used when sorting.
  *

package/dist/types/tsdoc-metadata.json

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

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",
         ],
@@ -1050,6 +1051,9 @@ module.exports = defineMetadata({
         attributes: {
             value: ["/.*/"],
             beforeCreate: ["/.*/"],
+            "form-modal-size": {
+                enum: ["small", "medium", "large", "fullwidth"],
+            },
         },
     },
 

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,
 };