@fkui/vue 5.36.0

package/htmlvalidate/elements/internal-components.js

@@ -0,0 +1,240 @@
+const { defineMetadata } = require("html-validate");
+
+module.exports = defineMetadata({
+    "i-flex": {
+        flow: true,
+        attributes: {
+            gap: ["1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x"],
+            collapse: {
+                boolean: true,
+                required: false,
+            },
+            wrap: {
+                boolean: true,
+                required: false,
+            },
+            float: ["left", "center", "right"],
+        },
+        permittedContent: ["i-flex-item"],
+    },
+
+    "i-flex-item": {
+        flow: true,
+        attributes: {
+            align: ["top", "center", "bottom"],
+            grow: [],
+            shrink: [],
+        },
+        requiredAncestors: ["i-flex > i-flex-item"],
+        permittedContent: ["@flow"],
+    },
+
+    "i-calendar-day": {
+        flow: true,
+        phrasing: true,
+        permittedContent: ["@flow", "@phrasing"],
+        attributes: {
+            day: {
+                required: true,
+            },
+            enabled: {
+                boolean: true,
+            },
+            highlight: {
+                boolean: true,
+            },
+            focused: {
+                boolean: true,
+            },
+            selected: {
+                boolean: true,
+            },
+        },
+    },
+
+    "i-calendar-month": {
+        flow: true,
+        phrasing: true,
+        interactive: true,
+        permittedContent: ["template"],
+        attributes: {
+            "entry-date": {},
+            "min-date": {
+                required: true,
+            },
+            "max-date": {
+                required: true,
+            },
+            slots: ["default"],
+        },
+    },
+
+    "i-calendar-month#default": {
+        permittedContent: ["f-calendar-day", "slot"],
+    },
+
+    "i-calendar-month-grid": {
+        flow: true,
+        phrasing: true,
+        permittedContent: ["template"],
+        attributes: {
+            "hide-week-numbers": {},
+        },
+        slots: ["default"],
+    },
+
+    "i-calendar-month-grid#default": {
+        permittedContent: ["button"],
+    },
+
+    "i-calendar-navbar": {
+        flow: true,
+        phrasing: true,
+        interactive: true,
+        permittedContent: [],
+        attributes: {
+            "min-date": {
+                required: true,
+            },
+            "max-date": {
+                required: true,
+            },
+        },
+    },
+
+    "i-calendar-tab-main": {
+        flow: true,
+    },
+
+    "i-animate-expand": {
+        flow: true,
+        attributes: {
+            expanded: ["/.*/"],
+            animate: {
+                boolean: true,
+            },
+            opacity: {
+                boolean: true,
+            },
+            "use-v-show": {
+                boolean: true,
+            },
+        },
+        slots: ["default"],
+    },
+
+    "i-deprecated-calendar-year-month-item": {
+        flow: true,
+    },
+
+    "i-deprecated-calendar-month": {
+        flow: true,
+    },
+
+    "i-deprecated-calendar-year": {
+        flow: true,
+    },
+
+    "i-deprecated-calendar-month-day": {
+        flow: true,
+    },
+
+    "i-deprecated-calendar-month-week": {
+        flow: true,
+    },
+
+    "i-skip-link": {
+        inherit: "a",
+    },
+
+    "i-validation-form": {
+        deprecated: {
+            message:
+                "<i-validation-form> has been renamed to <f-validation-form>",
+            source: "fkui",
+        },
+    },
+
+    "i-popup": {
+        flow: true,
+        interactive: true,
+        permittedContent: ["@flow"],
+        attributes: {
+            "is-open": {
+                boolean: true,
+                required: true,
+            },
+            anchor: {
+                required: true,
+            },
+            "always-inline": {
+                boolean: true,
+                required: false,
+                deprecated:
+                    '`always-inline` is deprecated: use `inline="always"` instead.',
+            },
+            inline: {
+                required: false,
+                enum: ["always", "never", "auto"],
+            },
+            container: {},
+            viewport: {
+                required: false,
+            },
+            "focus-element": {
+                required: false,
+            },
+        },
+    },
+
+    "i-popup-target": {
+        flow: true,
+        interactive: true,
+    },
+
+    "i-popup-error": {
+        flow: true,
+        interactive: true,
+        permittedContent: ["@flow"],
+        attributes: {
+            "is-open": {
+                boolean: true,
+                required: true,
+            },
+            "error-message": {
+                required: false,
+            },
+            anchor: {
+                required: true,
+            },
+        },
+    },
+    "i-menu": {
+        flow: true,
+        interactive: true,
+        permittedContent: [],
+        textContent: "none",
+        attributes: {
+            items: {
+                required: true,
+            },
+            vertical: {
+                boolean: true,
+                required: false,
+            },
+        },
+    },
+
+    "i-popup-menu": {
+        inherit: "i-menu",
+        attributes: {
+            "is-open": {
+                boolean: true,
+                required: true,
+            },
+            anchor: {
+                required: false,
+            },
+        },
+    },
+});

package/htmlvalidate/elements/overrides.js

@@ -0,0 +1,9 @@
+const { defineMetadata } = require("html-validate");
+
+module.exports = defineMetadata({
+    /* override <title> element so it can be used under <f-icon> as well (and is
+     * inserted inside the <svg>) */
+    title: {
+        permittedParent: ["head", "f-icon"],
+    },
+});

package/htmlvalidate/index.d.ts

@@ -0,0 +1,4 @@
+import { type Plugin } from "html-validate";
+
+declare const plugin: Plugin;
+export = plugin;

package/htmlvalidate/index.js

@@ -0,0 +1,10 @@
+const { definePlugin } = require("html-validate");
+const pkg = require("../package.json");
+const configs = require("./configs");
+const rules = require("./rules");
+
+module.exports = definePlugin({
+    name: pkg.name,
+    configs,
+    rules,
+});

package/htmlvalidate/rules/buttongroup.rule.js

@@ -0,0 +1,42 @@
+const { Rule } = require("html-validate");
+const { getDocumentationUrl } = require("./common");
+
+class ButtonGroupRule extends Rule {
+    documentation() {
+        return {
+            description:
+                "Buttons in a FKUI button-group must have the class button-group__item ",
+            url: getDocumentationUrl("/components/button.html#gruppering"),
+        };
+    }
+
+    setup() {
+        /* listen on dom ready event */
+        this.on("dom:ready", (event) => {
+            this.reportButtonGroupViolations(event);
+        });
+    }
+
+    reportButtonGroupViolations(event) {
+        const buttonGroups = event.document.querySelectorAll(".button-group");
+
+        for (const buttonGroup of buttonGroups) {
+            this.nestedButtonsHaveGroupItems(buttonGroup);
+        }
+    }
+
+    nestedButtonsHaveGroupItems(buttonGroup) {
+        const buttons = buttonGroup.querySelectorAll("button");
+
+        for (const button of buttons) {
+            if (button.classList.contains("button-group__item") === false) {
+                this.report(
+                    button,
+                    "A button that is a direct child to a button group must have the following classes: ['button-group__item']",
+                );
+            }
+        }
+    }
+}
+
+module.exports = ButtonGroupRule;

package/htmlvalidate/rules/classdeprecated.rule.js

@@ -0,0 +1,32 @@
+const { Rule } = require("html-validate");
+const { getDocumentationUrl } = require("./common");
+
+class ClassDeprecated extends Rule {
+    documentation() {
+        return {
+            description:
+                "The class button--text is deprecated and should be replaced with button--discrete",
+            url: getDocumentationUrl("/components/button.html"),
+        };
+    }
+
+    setup() {
+        /* listen on dom ready event */
+        this.on("dom:ready", (event) => {
+            this.reportDeprecatedClass(event);
+        });
+    }
+
+    reportDeprecatedClass(event) {
+        const buttons = event.document.querySelectorAll(".button--text");
+
+        for (const button of buttons) {
+            this.report(
+                button,
+                "['button--text'] is deprecated, please use ['button--discrete'] instead",
+            );
+        }
+    }
+}
+
+module.exports = ClassDeprecated;

package/htmlvalidate/rules/common.js

@@ -0,0 +1,15 @@
+const { homepage } = require("../../package.json");
+
+/**
+ * @internal
+ * @param {string} path
+ * @returns {string}
+ */
+function getDocumentationUrl(path) {
+    if (path.startsWith("/")) {
+        path = path.slice(1);
+    }
+    return `${homepage}${path}`;
+}
+
+module.exports = { getDocumentationUrl };

package/htmlvalidate/rules/deprecated-validator.js

@@ -0,0 +1,63 @@
+const { Rule, sliceLocation } = require("html-validate");
+const { getDocumentationUrl } = require("./common");
+
+const replacements = {
+    personnummer: ["personnummerLuhn", "personnummerFormat"],
+};
+const deprecated = Object.keys(replacements);
+
+/**
+ * @param {string} text
+ * @returns {IterableIterator<{ value: string, begin: number, end: number }>}
+ */
+function* splitModifiers(text) {
+    const splitDots = /\.([^.]*)/g;
+    let match;
+    while ((match = splitDots.exec(text)) !== null) {
+        const value = match[1];
+        const end = splitDots.lastIndex;
+        const begin = end - value.length;
+        yield {
+            value,
+            begin,
+            end,
+        };
+    }
+}
+
+class DeprecatedValidator extends Rule {
+    documentation(context) {
+        return {
+            description: [
+                `The \`${context}\` validator is deprecated, replace with one or more of:`,
+                "",
+                ...replacements[context].map((it) => `  - \`${it}\``),
+            ].join("\n"),
+            url: getDocumentationUrl("/components/validering/validatorer.html"),
+        };
+    }
+
+    setup() {
+        this.on("attr", (event) => {
+            const { key, keyLocation } = event;
+            if (!key.startsWith("v-validation.")) {
+                return;
+            }
+            for (const modifier of splitModifiers(key)) {
+                const { value: validator, begin, end } = modifier;
+                if (!deprecated.includes(validator)) {
+                    continue;
+                }
+                const location = sliceLocation(keyLocation, begin, end);
+                this.report({
+                    node: event.target,
+                    context: validator,
+                    location,
+                    message: `validator "${validator}" is deprecated`,
+                });
+            }
+        });
+    }
+}
+
+module.exports = DeprecatedValidator;

package/htmlvalidate/rules/ftextfieldFormatterValidation.rule.js

@@ -0,0 +1,102 @@
+const { Rule } = require("html-validate");
+const { getDocumentationUrl } = require("./common");
+
+/**
+ * @typedef {import("html-validate").HtmlElement} HtmlElement
+ * @typedef {import("html-validate").Location} Location
+ *
+ * @typedef {object} ValidationDirective
+ * @property {string} directive Validation directive.
+ * @property {Set<string>} modifiers Validation modifiers.
+ * @property {Location} location Attribute location (key)
+ */
+
+const matchVValidation = /^v-validation($|[.])/;
+const validatorsWithFormatters = [
+    "bankAccountNumber",
+    "bankgiro",
+    "clearingnumber",
+    "date",
+    "number",
+    "personnummer",
+    "plusgiro",
+    "postalCode",
+    "organisationsnummer",
+    "percent",
+];
+
+function isRelevant(node) {
+    return node.target.tagName === "f-text-field";
+}
+
+class FtextFieldFormatterValidation extends Rule {
+    documentation() {
+        return {
+            description:
+                "FTextField is using a validator that previously provided formatting, \
+                now formatting must be provided separately using a formatter and/or parser. \
+                You can also consider switching to extended components.",
+            url: getDocumentationUrl(
+                "/components/inmatning/inmatningsfalt.html",
+            ),
+        };
+    }
+
+    setup() {
+        this.on("element:ready", isRelevant, (event) => {
+            const target = event.target;
+
+            const validationDirective = this.getValidationDirective(target);
+            if (!validationDirective) {
+                return;
+            }
+
+            const validator = this.getValidator(validationDirective);
+            if (!validator) {
+                return;
+            }
+
+            const formatter = target.getAttribute(":formatter");
+            const parser = target.getAttribute(":parser");
+            if (formatter || parser) {
+                return;
+            }
+
+            this.report(
+                target,
+                `v-validation.${validator} must be used with :formatter and/or :parser`,
+                validationDirective.location,
+            );
+        });
+    }
+
+    /**
+     * @param {HtmlElement} target
+     * @returns {ValidationDirective | null} Directive and modifiers
+     */
+    getValidationDirective(target) {
+        const elementAttrs = target.attributes;
+        const attr = elementAttrs.find((it) => matchVValidation.test(it.key));
+        if (!attr) {
+            return null;
+        }
+        const [directive, ...modifiers] = attr.key.split(".");
+        return {
+            directive,
+            modifiers: new Set(modifiers),
+            location: attr.keyLocation,
+        };
+    }
+
+    /**
+     * @param {ValidationDirective} validation
+     * @return {string}
+     */
+    getValidator(validation) {
+        return validatorsWithFormatters.find((it) => {
+            return validation.modifiers.has(it);
+        });
+    }
+}
+
+module.exports = FtextFieldFormatterValidation;

package/htmlvalidate/rules/index.js

@@ -0,0 +1,15 @@
+const buttongroup = require("./buttongroup.rule");
+const classdeprecated = require("./classdeprecated.rule");
+const DeprecatedValidator = require("./deprecated-validator");
+const PreferFIcon = require("./prefer-ficon.rule");
+const requiredmaxlength = require("./requiredmaxlength.rule");
+const ftextfieldFormatterValidation = require("./ftextfieldFormatterValidation.rule");
+
+module.exports = {
+    "fkui/button-group": buttongroup,
+    "fkui/class-deprecated": classdeprecated,
+    "fkui/deprecated-validator": DeprecatedValidator,
+    "fkui/prefer-ficon": PreferFIcon,
+    "fkui/required-max-length": requiredmaxlength,
+    "fkui/ftextfield-formatter-validation": ftextfieldFormatterValidation,
+};

package/htmlvalidate/rules/prefer-ficon.rule.js

@@ -0,0 +1,36 @@
+const { Rule } = require("html-validate/node");
+const { getDocumentationUrl } = require("./common");
+
+/**
+ * @typedef {import("html-validate/node").ElementReadyEvent} ElementReadyEvent
+ */
+
+/**
+ *
+ * @param {ElementReadyEvent} event
+ */
+function isRelevant(event) {
+    const { target } = event;
+    return target.is("svg") && target.classList.includes("icon");
+}
+
+class PreferFIcon extends Rule {
+    documentation() {
+        return {
+            description:
+                "Prefer using `<f-icon>` instead of directly using `<svg>`",
+            url: getDocumentationUrl("/components/ficon.html"),
+        };
+    }
+
+    setup() {
+        this.on("element:ready", isRelevant, () => {
+            this.report({
+                message:
+                    "Prefer using <f-icon> instead of directly using <svg>",
+            });
+        });
+    }
+}
+
+module.exports = PreferFIcon;

package/htmlvalidate/rules/requiredmaxlength.rule.js

@@ -0,0 +1,96 @@
+const { Rule } = require("html-validate");
+const { getDocumentationUrl } = require("./common");
+
+const formatters = [
+    "bankaccountnumber",
+    "bankgiro",
+    "clearingnumber",
+    "dateformat",
+    "date",
+    "email",
+    "maxlength",
+    "maxvalue",
+    "organisationsnummer",
+    "personnummer",
+    "phonenumber",
+    "plusgiro",
+    "postalCode",
+];
+const allowedTags = ["input", "f-text-field"];
+
+class RequiredMaxLength extends Rule {
+    documentation() {
+        return {
+            description: "Element is missing a maxlength-validation",
+            url: getDocumentationUrl(
+                "/components/inmatning/inmatningsfalt.html",
+            ),
+        };
+    }
+
+    setup() {
+        this.on("element:ready", (event) => {
+            const attributeKeys = [];
+            const target = event.target;
+            const elementAttrs = target.attributes;
+            const tagName = target.tagName;
+            const valueOfType = target.getAttributeValue("type");
+
+            if (!allowedTags.includes(tagName)) {
+                return;
+            }
+
+            for (let i = 0; i < elementAttrs.length; i++) {
+                attributeKeys.push(elementAttrs[i].key);
+            }
+            const validation = attributeKeys.find((attr) =>
+                attr.includes("v-validation"),
+            );
+            const maxlength =
+                attributeKeys.find((attr) => attr.includes("maxlength")) ===
+                "maxlength";
+
+            if (maxlength) {
+                return;
+            } else {
+                this.checkValidation(
+                    formatters,
+                    validation,
+                    target,
+                    valueOfType,
+                );
+            }
+        });
+    }
+
+    checkValidation(formatters, validation, target, valueOfType) {
+        if ((!valueOfType || valueOfType === "text") && validation) {
+            this.checkError(formatters, validation, target);
+        }
+
+        if (!validation) {
+            this.checkInputType(valueOfType, target);
+        }
+    }
+
+    checkError(formatters, validation, target) {
+        const validators = validation.split(".");
+        const lengthValidators = validators.filter((attrs) =>
+            formatters.includes(attrs),
+        );
+
+        if (lengthValidators.length === 0) {
+            this.report(target, `v-validation must have a maxlength-validator`);
+        }
+    }
+
+    checkInputType(valueOfType, target) {
+        if (valueOfType && valueOfType !== "text") {
+            return;
+        } else {
+            this.report(target, "v-validation.maxLength must be used");
+        }
+    }
+}
+
+module.exports = RequiredMaxLength;