@fkui/vue 6.6.0 → 6.7.1

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.6.0",
+  "version": "6.7.1",
   "description": "Vue implementation of FKUI components",
   "keywords": [
     "fkui",
@@ -60,9 +60,9 @@
     "unit:watch": "jest --watch"
   },
   "peerDependencies": {
-    "@fkui/date": "^6.6.0",
-    "@fkui/design": "^6.6.0",
-    "@fkui/logic": "^6.6.0",
+    "@fkui/date": "^6.7.0",
+    "@fkui/design": "^6.7.1",
+    "@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": "1db311c19765c07c3804cf2b034399cdbb419f46"
+  "gitHead": "05d2236591164ac5d328dee0331643d3544df402"
 }