@forsakringskassan/vue-lib-template 1.2.11 → 1.4.0

package/files/cypress/support/main.scss

@@ -6,6 +6,7 @@
 
 @use "@fkui/design/src/fonts";
 @use "@fkui/design/src/fkui";
+@use "../../src/theme";
 
 :root {
     --f-logo-image-small: hotpink;

package/files/docs/build.mts

@@ -1,19 +1,34 @@
 /* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
 
 import path from "node:path";
-import { fileURLToPath } from "node:url";
 import {
+    type Processor,
     Generator,
+    extractMarkdownProcessor,
     frontMatterFileReader,
+    manifestProcessor,
     vueFileReader,
 } from "@forsakringskassan/docs-generator";
 import pkg from "../package.json" with { type: "json" };
 
+function teleportTarget(): Processor {
+    return {
+        after: "generate-docs",
+        name: "fkui:teleport",
+        async handler(context) {
+            context.addTemplateBlock("body:end", "teleport-target", {
+                filename: "partials/teleport.html",
+            });
+        },
+    };
+}
+
 const docs = new Generator(import.meta.url, {
     site: { name: pkg.name, lang: "sv" },
     outputFolder: path.resolve(import.meta.dirname, "public"),
     exampleFolders: [path.resolve(import.meta.dirname, "../src")],
     setupPath: path.resolve(import.meta.dirname, "src/setup.ts"),
+    templateFolders: ["./templates"],
     vendor: [
         { package: "vue", alias: "vue/dist/vue.esm-bundler.js" },
         {
@@ -24,6 +39,13 @@ const docs = new Generator(import.meta.url, {
         "@fkui/logic",
         "@fkui/vue",
     ],
+    processors: [
+        extractMarkdownProcessor({
+            outputFolder: path.join(import.meta.dirname, "../dist/docs"),
+        }),
+        manifestProcessor(),
+        teleportTarget(),
+    ],
 });
 
 docs.compileScript("main", "./src/main.js", {
@@ -34,9 +56,8 @@ docs.compileStyle("main", "./src/main.scss", {
     appendTo: "head",
 });
 
-const styleUrl = import.meta.resolve(`../dist/esm/style.css`);
-const stylePath = fileURLToPath(styleUrl); // workaround for https://github.com/Forsakringskassan/docs-generator/issues/499
-docs.compileStyle("lib", stylePath, {
+const styleUrl = new URL(import.meta.resolve(`../dist/esm/style.css`));
+docs.compileStyle("lib", styleUrl, {
     appendTo: "head",
 });
 
@@ -44,9 +65,8 @@ docs.compileScript("mocks", "./src/bundle-mocks.mjs", {
     appendTo: "head",
 });
 
-const mswUrl = import.meta.resolve("msw/mockServiceWorker.js");
-const mswPath = fileURLToPath(mswUrl); // workaround for https://github.com/Forsakringskassan/docs-generator/issues/499
-docs.compileWorker("msw", mswPath);
+const mswUrl = new URL(import.meta.resolve("msw/mockServiceWorker.js"));
+docs.compileWorker("mock-service-worker", mswUrl);
 
 await docs.build([
     {

package/files/docs/package.json

@@ -7,14 +7,14 @@
     "start": "http-server public"
   },
   "devDependencies": {
-    "@fkui/icon-lib-default": "6.58.0",
-    "@fkui/vue": "6.58.0",
+    "@fkui/icon-lib-default": "6.59.0",
+    "@fkui/vue": "6.59.0",
     "@forsakringskassan/apimock-express": "4.1.0",
-    "@forsakringskassan/docs-generator": "3.10.1",
+    "@forsakringskassan/docs-generator": "3.12.0",
     "@tsconfig/node24": "24.0.5",
     "@tsconfig/recommended": "1.0.13",
     "http-server": "14.1.1",
     "msw": "2.15.0",
-    "vue": "3.5.42"
+    "vue": "3.5.43"
   }
 }

package/files/docs/src/bundle-mocks.mjs

@@ -11,12 +11,13 @@ const handlers = [
 const worker = setupWorker(...handlers);
 // eslint-disable-next-line no-undef -- technical debt
 const rootUrl = document.documentElement.dataset["rootUrl"];
-const url = `${rootUrl}/msw.js`;
+const url = `${rootUrl}/mock-service-worker.js`;
 
 // Used in setup.ts
 // eslint-disable-next-line unicorn/no-global-object-property-assignment, no-undef -- technical debt
 window.bundleMocks = worker.start({
     serviceWorker: {
         url,
+        options: { type: "module" },
     },
 });

package/files/docs/src/main.scss

@@ -1,20 +1,8 @@
 @use "@forsakringskassan/docs-generator/style.css";
-@use "@fkui/theme-default" as theme with (
-    $global: false
-);
-@use "@fkui/font-default" as font with (
-    $global: false
-);
 @use "@fkui/design";
 @use "@fkui/design/lib/fonts.css";
 @use "@forsakringskassan/docs-live-example";
-
-@include font.font-face;
-
-:root {
-    @include theme.auto;
-    @include font.font-family;
-}
+@use "../../src/theme";
 
 html,
 body {

package/files/docs/templates/partials/teleport.html

@@ -0,0 +1 @@
+<div id="teleport-target" class="user-theme"></div>

package/files/package.json

@@ -20,6 +20,13 @@
       "types": "./dist/types/index.d.ts",
       "import": "./dist/esm/index.esm.js"
     },
+    "./docs": {
+      "types": "./dist/docs/index.d.mts",
+      "import": "./dist/docs/index.mjs"
+    },
+    "./docs/links.json": {
+      "default": "./dist/docs/links.json"
+    },
     "./selectors": {
       "types": "./dist/types/selectors.d.ts",
       "import": "./dist/esm/selectors.esm.js"
@@ -57,7 +64,7 @@
     "postpublish": "release-postpublish",
     "start": "vite --",
     "start:docs": "npm start -w docs",
-    "stylelint": "stylelint \"src/**/*.{css,scss}\"",
+    "stylelint": "stylelint \"src/**/*.{css,scss,vue}\"",
     "stylelint:fix": "npm run stylelint -- --fix",
     "pretest": "npm run lint",
     "test": "vitest run",
@@ -80,51 +87,51 @@
   "devDependencies": {
     "@babel/core": "7.29.7",
     "@babel/preset-env": "7.29.7",
-    "@fkui/design": "6.58.0",
-    "@fkui/font-default": "6.58.0",
-    "@fkui/icon-lib-default": "6.58.0",
-    "@fkui/logic": "6.58.0",
-    "@fkui/test-utils": "6.58.0",
-    "@fkui/theme-default": "6.58.0",
-    "@fkui/vue": "6.58.0",
+    "@fkui/design": "6.59.0",
+    "@fkui/font-default": "6.59.0",
+    "@fkui/icon-lib-default": "6.59.0",
+    "@fkui/logic": "6.59.0",
+    "@fkui/test-utils": "6.59.0",
+    "@fkui/theme-default": "6.59.0",
+    "@fkui/vue": "6.59.0",
     "@forsakringskassan/apimock-express": "4.1.0",
     "@forsakringskassan/commitlint-config": "4.2.8",
     "@forsakringskassan/cypress-config": "1.10.0",
     "@forsakringskassan/cypress-visual-regression": "5.2.0",
-    "@forsakringskassan/docs-generator": "3.10.1",
+    "@forsakringskassan/docs-generator": "3.12.0",
     "@forsakringskassan/docs-live-example": "3.0.2",
-    "@forsakringskassan/eslint-config": "15.9.10",
-    "@forsakringskassan/eslint-config-cli": "15.9.3",
-    "@forsakringskassan/eslint-config-cypress": "15.9.9",
-    "@forsakringskassan/eslint-config-jest": "15.9.2",
-    "@forsakringskassan/eslint-config-typescript": "15.9.8",
-    "@forsakringskassan/eslint-config-typescript-typeinfo": "15.9.8",
-    "@forsakringskassan/eslint-config-vitest": "15.9.4",
-    "@forsakringskassan/eslint-config-vue": "15.9.8",
-    "@forsakringskassan/prettier-config": "3.7.8",
-    "@forsakringskassan/stylelint-config": "3.4.6",
+    "@forsakringskassan/eslint-config": "15.11.0",
+    "@forsakringskassan/eslint-config-cli": "15.11.0",
+    "@forsakringskassan/eslint-config-cypress": "15.11.0",
+    "@forsakringskassan/eslint-config-jest": "15.11.0",
+    "@forsakringskassan/eslint-config-typescript": "15.11.0",
+    "@forsakringskassan/eslint-config-typescript-typeinfo": "15.11.0",
+    "@forsakringskassan/eslint-config-vitest": "15.11.0",
+    "@forsakringskassan/eslint-config-vue": "15.11.0",
+    "@forsakringskassan/prettier-config": "3.7.10",
+    "@forsakringskassan/stylelint-config": "3.5.0",
     "@forsakringskassan/vite-lib-config": "5.12.4",
     "@forsakringskassan/vitest-config-jsdom": "5.0.0",
-    "@forsakringskassan/vue-lib-template": "1.2.11",
-    "@html-validate/release-scripts": "7.6.11",
-    "@types/node": "24.13.4",
+    "@forsakringskassan/vue-lib-template": "1.4.0",
+    "@html-validate/release-scripts": "7.6.12",
+    "@types/node": "24.13.6",
     "@typescript/native": "npm:typescript@7.0.2",
-    "@vue/server-renderer": "3.5.42",
-    "@vue/test-utils": "2.5.0",
-    "cloneman": "1.24.1",
+    "@vue/server-renderer": "3.5.43",
+    "@vue/test-utils": "2.5.1",
+    "cloneman": "1.25.0",
     "core-js": "3.50.0",
-    "cypress": "16.0.0",
-    "html-validate": "11.15.0",
+    "cypress": "16.1.0",
+    "html-validate": "11.16.0",
     "html-validate-markdown": "6.0.0",
     "html-validate-vue": "9.3.1",
     "mocha-junit-reporter": "2.2.1",
-    "npm-pkg-lint": "5.2.5",
+    "npm-pkg-lint": "5.3.1",
     "npm-run-all2": "9.0.3",
     "rimraf": "6.1.3",
     "typescript": "npm:@typescript/typescript6@6.0.2",
     "vite": "8.3.0",
-    "vitest": "5.0.0",
-    "vue": "3.5.42",
+    "vitest": "5.0.1",
+    "vue": "3.5.43",
     "vue-tsc": "3.3.11"
   },
   "peerDependencies": {

package/files/src/local.scss

@@ -1,19 +1,7 @@
-@use "@fkui/theme-default" as theme with (
-    $global: false
-);
-@use "@fkui/font-default" as font with (
-    $global: false
-);
 @use "@fkui/design";
 @use "@fkui/design/lib/fonts.css";
 @use "@forsakringskassan/docs-live-example";
-
-@include font.font-face;
-
-:root {
-    @include theme.auto;
-    @include font.font-family;
-}
+@use "theme";
 
 html,
 body {

package/files/src/selectors/guide/FcCatInfoComponent.selectors.spec.ts

@@ -0,0 +1,111 @@
+import { TestPlugin, ValidationPlugin } from "@fkui/vue";
+import { mount } from "@vue/test-utils";
+import { beforeEach, expect, it, vi } from "vitest";
+import FcCatInfoComponent from "../../components/guide/FcCatInfo/FcCatInfoComponent.vue";
+import { catGetById } from "../../components/guide/FcCatInfo/cat-api";
+import { cats } from "../../components/guide/FcCatInfo/cat-data";
+import { FcCatInfoComponentSelectors } from "./FcCatInfoComponent.selectors";
+
+vi.mock(import("../../components/guide/FcCatInfo/cat-api"));
+
+beforeEach(() => {
+    vi.mocked(catGetById).mockResolvedValue(cats[0]);
+});
+
+it("should use the default selector", () => {
+    expect.assertions(2);
+    const wrapper = mount(FcCatInfoComponent, {
+        props: { catId: cats[0].id },
+    });
+    const { selector } = FcCatInfoComponentSelectors();
+
+    expect(selector).toBe(":scope");
+    expect(wrapper.find(selector).exists()).toBe(true);
+});
+
+it("should find the component with an explicit selector", () => {
+    expect.assertions(2);
+    const wrapper = mount(FcCatInfoComponent, {
+        attrs: { "data-test": "my-cat-info" },
+        props: { catId: cats[0].id },
+    });
+    const { selector } = FcCatInfoComponentSelectors(
+        '[data-test="my-cat-info"]',
+    );
+
+    expect(selector).toBe('[data-test="my-cat-info"]');
+    expect(wrapper.find(selector).exists()).toBe(true);
+});
+
+it("should find the loading container", () => {
+    expect.assertions(1);
+    const wrapper = mount(FcCatInfoComponent, {
+        props: { catId: cats[0].id },
+    });
+    const { loadingContainer } = FcCatInfoComponentSelectors();
+
+    expect(wrapper.get(loadingContainer()).text()).toContain(
+        "Hämtar kattinformation...",
+    );
+});
+
+it("should find all view mode elements", async () => {
+    expect.assertions(5);
+    const wrapper = mount(FcCatInfoComponent, {
+        props: { catId: cats[0].id, isEditable: false },
+    });
+    const selectors = FcCatInfoComponentSelectors();
+
+    await vi.waitFor(() => {
+        if (!wrapper.find(selectors.viewContainer()).exists()) {
+            throw new Error("View container has not been rendered yet");
+        }
+    });
+
+    const view = wrapper.get(selectors.viewContainer());
+    expect(view.text()).toContain(cats[0].name);
+    expect(view.text()).toContain(`${cats[0].age} år`);
+    expect(view.text()).toContain(cats[0].breed);
+    expect(view.text()).toContain(cats[0].color);
+    expect(view.text()).toContain(cats[0].favoriteFood);
+});
+
+it("should find all edit mode inputs", async () => {
+    expect.assertions(6);
+    const wrapper = mount(FcCatInfoComponent, {
+        props: { catId: cats[0].id, isEditable: true },
+        global: {
+            plugins: [TestPlugin, ValidationPlugin],
+        },
+    });
+    const selectors = FcCatInfoComponentSelectors();
+
+    await vi.waitFor(() => {
+        if (!wrapper.find(selectors.editContainer()).exists()) {
+            throw new Error("Edit container has not been rendered yet");
+        }
+    });
+
+    expect(wrapper.find(selectors.editContainer()).exists()).toBe(true);
+
+    expect(
+        wrapper.get<HTMLInputElement>(selectors.nameInput()).element.value,
+    ).toBe(cats[0].name);
+
+    expect(
+        wrapper.get<HTMLInputElement>(selectors.ageInput()).element.value,
+    ).toBe(cats[0].age.toString());
+
+    expect(
+        wrapper.get<HTMLInputElement>(selectors.breedInput()).element.value,
+    ).toBe(cats[0].breed);
+
+    expect(
+        wrapper.get<HTMLInputElement>(selectors.colorInput()).element.value,
+    ).toBe(cats[0].color);
+
+    expect(
+        wrapper.get<HTMLInputElement>(selectors.favoriteFoodInput()).element
+            .value,
+    ).toBe(cats[0].favoriteFood);
+});

package/files/src/theme.scss

@@ -0,0 +1,28 @@
+/**
+ * Theme selection.
+ *
+ * This file can be customized to set theme and related features for:
+ *
+ * - Local builds (`npm start`)
+ * - Cypress component tests
+ * - Documentation
+ *
+ * It is not included in the production build.
+ *
+ * --- This notice must be kept ---
+ */
+
+@use "@fkui/theme-default" as theme with (
+    $global: false
+);
+
+@use "@fkui/font-default" as font with (
+    $global: false
+);
+
+@include font.font-face;
+
+:root {
+    @include theme.auto;
+    @include font.font-family;
+}

package/index.js

@@ -7,7 +7,7 @@
 
         const options = {
             ...packageJson.cloneman,
-            fileHash: "c8696b477625b5dc20f234843d09017230ad3dbd962739042e8d0f82b0166b2a",
+            fileHash: "06d2b6a7e26a9d5b9df47375fe9fc0d856d30afd18da47362ccf24b6fa6c1468",
             filesDir: path.join(import.meta.dirname, "files"),
             hooksDir: path.join(import.meta.dirname, "hooks"),
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forsakringskassan/vue-lib-template",
-  "version": "1.2.11",
+  "version": "1.4.0",
   "description": "Vue library template based on Cloneman",
   "keywords": [
     "template",
@@ -54,6 +54,7 @@
       "docs/src/main.js",
       "docs/src/main.scss",
       "docs/src/setup.ts",
+      "docs/templates/partials/teleport.html",
       "docs/tsconfig.json",
       "eslint.config.mjs",
       "etc/lib.api.md",
@@ -91,10 +92,12 @@
       "src/mocks/guide/cat-api.mock.mts",
       "src/mocks/guide/index.mts",
       "src/mocks/index.mts",
+      "src/selectors/guide/FcCatInfoComponent.selectors.spec.ts",
       "src/selectors/guide/FcCatInfoComponent.selectors.ts",
       "src/selectors/guide/index.ts",
       "src/selectors/index.ts",
       "src/style.scss",
+      "src/theme.scss",
       "src/vite-dev/app.vue",
       "tsconfig.cypress.json",
       "tsconfig.json",
@@ -141,6 +144,14 @@
       "tsconfig.selectors.json",
       "vite.config.mts"
     ],
+    "partiallyManagedFiles": [
+      {
+        "filename": "src/theme.scss",
+        "include": {
+          "above": "--- This notice must be kept ---"
+        }
+      }
+    ],
     "removeFiles": [
       "api-extractor.json",
       "index.html",