@fkui/vue 6.5.0 → 6.7.0

package/dist/types/tsdoc-metadata.json

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

package/htmlvalidate/configs/recommended.js

@@ -11,8 +11,10 @@ module.exports = {
         "fkui/class-deprecated": "error",
         "fkui/prefer-ficon": "error",
         "fkui/required-max-length": "error",
+        "fkui/finteractivetable-checkbox-description": "error",
         "fkui/ftextfield-formatter-validation": "error",
         "fkui/no-template-modal": "error",
         "fkui/ftablecolumn-name": "error",
+        "vue/prefer-slot-shorthand": "off",
     },
 };

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: {
@@ -465,6 +508,10 @@ module.exports = defineMetadata({
         },
     },
 
+    "f-fixed-pane": {
+        flow: true,
+    },
+
     "f-sort-filter-dataset": {
         flow: true,
         interactive: true,
@@ -499,6 +546,23 @@ module.exports = defineMetadata({
         inherit: "f-label#description",
     },
 
+    "f-table-button": {
+        flow: false,
+        interactive: true,
+        attributes: {
+            icon: {
+                enum: ["/.+/"],
+            },
+            label: {
+                boolean: true,
+            },
+        },
+        textContent: "accessible",
+        permittedContent: ["span", "template"],
+        permittedDescendants: [{ exclude: ["@interactive"] }],
+        requiredAncestors: ["f-table-column"],
+    },
+
     "f-table-column": {
         flow: false,
         attributes: {
@@ -508,7 +572,7 @@ module.exports = defineMetadata({
             type: ["text", "date", "numeric", "action"],
         },
         requiredAttributes: ["title"],
-        permittedContent: ["@phrasing", "button", "f-badge"],
+        permittedContent: ["@phrasing", "button", "f-badge", "f-table-button"],
     },
 
     "f-tooltip": {

package/htmlvalidate/rules/classdeprecated.rule.js

@@ -1,25 +1,55 @@
 const { Rule, DOMTokenList } = require("html-validate");
 const { getDocumentationUrl } = require("./common");
 
+/**
+ * @typedef {import("html-validate").RuleDocumentation} RuleDocumentation
+ */
+
+/**
+ * @typedef {Object} Entry
+ * @property {string} name
+ * @property {string} [replacement]
+ * @property {string} [additionalMessage]
+ * @property {string} url
+ */
+
+/** @type {Entry[]} */
 const deprecatedClasses = [
     {
         name: "navbar",
-        description:
-            "`.navbar` and related classes are deprecated and should be replaced with Vue components `FPageHeader` and `FNavigationMenu` or their HTML and style.",
+        additionalMessage:
+            "It should be replaced with the Vue components `FPageHeader` and `FNavigationMenu`.",
         url: "/components/page-layout/fpageheader.html",
     },
     {
         name: "button--text",
-        description:
-            "`.button--text` class is deprecated and should be replaced with `button--discrete`",
+        replacement: "button--tertiary",
+        url: "/components/button.html",
+    },
+    {
+        name: "button--discrete",
+        replacement: "button--tertiary",
         url: "/components/button.html",
     },
 ];
 
+/**
+ * @extends {Rule<Entry, void>}
+ */
 class ClassDeprecated extends Rule {
-    documentation({ description, url }) {
+    /**
+     * @param {Entry} context
+     * @returns {RuleDocumentation}
+     */
+    documentation(context) {
+        const { url, replacement, additionalMessage } = context;
+        const message = replacement
+            ? `Class \`${context.name}\` is deprecated and should be replaced with \`${replacement}\``
+            : `Class \`${context.name}\` is deprecated.`;
         return {
-            description,
+            description: additionalMessage
+                ? `${message}\n\n${additionalMessage}`
+                : message,
             url: getDocumentationUrl(url),
         };
     }
@@ -35,16 +65,18 @@ class ClassDeprecated extends Rule {
             const tokens = new DOMTokenList(event.value, valueLocation);
 
             for (const { item, location } of tokens.iterator()) {
-                for (const deprecatedClass of deprecatedClasses) {
-                    if (deprecatedClass.name !== item) {
+                for (const entry of deprecatedClasses) {
+                    if (entry.name !== item) {
                         continue;
                     }
 
                     this.report({
                         node: event.target,
                         location,
-                        message: "`.{{ name }}` class is deprecated.",
-                        context: deprecatedClass,
+                        message: entry.replacement
+                            ? `class "{{ name }}" is deprecated and replaced with "{{ replacement }}"`
+                            : `class "{{ name }}" is deprecated`,
+                        context: entry,
                     });
                 }
             }

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

@@ -0,0 +1,73 @@
+const {
+    Rule,
+    classifyNodeText,
+    TextClassification,
+} = 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;

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 FInteractiveTableCheckboxDescription = require("./finteractivetable-checkbox-description.rule");
 const FTableColumnName = require("./ftablecolumn-name.rule");
 
 module.exports = {
@@ -11,6 +12,8 @@ module.exports = {
     "fkui/class-deprecated": classdeprecated,
     "fkui/prefer-ficon": PreferFIcon,
     "fkui/required-max-length": requiredmaxlength,
+    "fkui/finteractivetable-checkbox-description":
+        FInteractiveTableCheckboxDescription,
     "fkui/ftextfield-formatter-validation": ftextfieldFormatterValidation,
     "fkui/no-template-modal": NoTemplateModal,
     "fkui/ftablecolumn-name": FTableColumnName,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fkui/vue",
-  "version": "6.5.0",
+  "version": "6.7.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.7.0",
+    "@fkui/design": "^6.7.0",
+    "@fkui/logic": "^6.7.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": "eab8f6660158999d279372b664a88f541eaf8063"
 }