@fkui/vue 6.5.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,13 +135,15 @@ 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. Typically set to the row
 * property displayed but any unique string can be used.
@@ -319,7 +321,7 @@ rowHeader: boolean;
 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;
@@ -349,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.
      *
@@ -377,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[];
@@ -425,13 +440,30 @@ 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;
 };
 
 declare function __VLS_template_5(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare function __VLS_template_6(): {
     attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
@@ -442,7 +474,7 @@ declare function __VLS_template_5(): {
     rootEl: any;
 };
 
-declare function __VLS_template_6(): {
+declare function __VLS_template_7(): {
     attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
@@ -467,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;
@@ -503,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 */
 
 /**
@@ -957,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 */
 
 /**
@@ -5238,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
@@ -7868,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;
@@ -8298,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;
@@ -8588,9 +8664,9 @@ default: string;
 validator(value: string): boolean;
 };
 }>> & Readonly<{}>, {
+layout: "standard" | "short";
 banner: boolean;
 provideScreenReaderContext: boolean;
-layout: "standard" | "short";
 }, {}, {
 FIcon: DefineComponent<ExtractPropTypes<    {
 name: {
@@ -8729,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
  */
@@ -9910,9 +9988,9 @@ required: false;
 default: typeof parseNumber;
 };
 }>> & Readonly<{}>, {
+decimals: number;
 formatter: FormatFunction<number>;
 parser: ParseFunction<number>;
-decimals: number;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 /**
@@ -10542,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
  */
@@ -11266,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<    {
@@ -13341,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: {
@@ -14156,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;
@@ -14314,7 +14399,7 @@ 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
@@ -16860,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, {
@@ -17358,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;
@@ -18214,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.3"
+      "packageVersion": "7.52.4"
     }
   ]
 }

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: {

package/package.json

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