@fkui/vue 6.27.0 → 6.29.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",
         ],
@@ -1480,4 +1481,44 @@ module.exports = defineMetadata({
         },
         slots: ["default"],
     },
+
+    "f-paginate-dataset": {
+        flow: true,
+        attributes: {
+            "fetch-data": {
+                allowed: allowedIfAttributeIsAbsent("items"),
+                required: false,
+            },
+            items: {
+                allowed: allowedIfAttributeIsAbsent("fetch-data"),
+                required: false,
+            },
+            "items-length": {
+                allowed: allowedIfAttributeIsAbsent("items"),
+                required: false,
+            },
+            "items-per-page": {
+                required: false,
+            },
+        },
+        slots: ["default"],
+    },
+
+    "f-paginator": {
+        flow: true,
+        attributes: {
+            "current-page": {
+                required: false,
+            },
+            "navigator-label": {
+                required: false,
+            },
+            "number-of-pages": {
+                required: false,
+            },
+            "number-of-pages-to-show": {
+                required: false,
+            },
+        },
+    },
 });

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.29.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.29.0",
+    "@fkui/design": "^6.29.0",
+    "@fkui/logic": "^6.29.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": "7152e2e334db2e8ef15828227b7a244bb5e52bc7"
 }

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;