@forsakringskassan/vue-lib-template 1.6.1 → 1.6.2

package/files/docs/guide/cat-info.md

@@ -2,14 +2,14 @@
 title: Kattinformation
 status: Draft
 layout: component
-component: FcCatInfoComponent
+component: FcCatInfo
 ---
 
 Komponenten kan visa kattdata i visningsläge eller i ett redigerbart läge.
 Den hämtar kattdata från ett mockat backend.
 
 ```import live-example
-FcCatInfoComponentLiveExample.vue
+cat-info-live-example.vue
 ```
 
 ## Tänk på att
@@ -24,5 +24,5 @@ FcCatInfoComponentLiveExample.vue
 ## API
 
 ::: api
-vue:FcCatInfoComponent
+vue:cat-info
 :::

package/files/docs/package.json

@@ -13,7 +13,7 @@
     "@fkui/icon-lib-default": "6.60.0",
     "@fkui/vue": "6.60.0",
     "@forsakringskassan/apimock-express": "4.2.1",
-    "@forsakringskassan/docs-generator": "3.15.0",
+    "@forsakringskassan/docs-generator": "3.16.0",
     "@tsconfig/node24": "24.0.5",
     "@tsconfig/recommended": "1.0.13",
     "http-server": "14.1.1",

package/files/etc/lib.api.md

@@ -12,7 +12,7 @@ import { PublicProps } from 'vue';
 // Warning: (ae-forgotten-export) The symbol "__VLS_export" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
-export const FcCatInfoComponent: typeof __VLS_export;
+export const FcCatInfo: typeof __VLS_export;
 
 // (No @packageDocumentation comment for this package)
 

package/files/etc/selectors.api.md

@@ -5,7 +5,7 @@
 ```ts
 
 // @public
-export function FcCatInfoComponentSelectors(selector?: string): Readonly<{
+export function FcCatInfoSelectors(selector?: string): Readonly<{
     readonly selector: string;
     loadingContainer(): string;
     viewContainer(): string;

package/files/package.json

@@ -97,29 +97,29 @@
     "@forsakringskassan/commitlint-config": "4.2.8",
     "@forsakringskassan/cypress-config": "1.10.0",
     "@forsakringskassan/cypress-visual-regression": "5.2.0",
-    "@forsakringskassan/docs-generator": "3.15.0",
-    "@forsakringskassan/docs-live-example": "3.0.2",
-    "@forsakringskassan/eslint-config": "15.11.4",
-    "@forsakringskassan/eslint-config-cli": "15.11.0",
-    "@forsakringskassan/eslint-config-cypress": "15.11.0",
+    "@forsakringskassan/docs-generator": "3.16.0",
+    "@forsakringskassan/docs-live-example": "3.0.3",
+    "@forsakringskassan/eslint-config": "15.11.12",
+    "@forsakringskassan/eslint-config-cli": "15.11.11",
+    "@forsakringskassan/eslint-config-cypress": "15.11.10",
     "@forsakringskassan/eslint-config-jest": "15.11.1",
-    "@forsakringskassan/eslint-config-typescript": "15.11.2",
-    "@forsakringskassan/eslint-config-typescript-typeinfo": "15.11.2",
-    "@forsakringskassan/eslint-config-vitest": "15.11.0",
-    "@forsakringskassan/eslint-config-vue": "15.11.5",
+    "@forsakringskassan/eslint-config-typescript": "15.11.10",
+    "@forsakringskassan/eslint-config-typescript-typeinfo": "15.11.7",
+    "@forsakringskassan/eslint-config-vitest": "15.11.11",
+    "@forsakringskassan/eslint-config-vue": "15.11.11",
     "@forsakringskassan/prettier-config": "3.7.11",
-    "@forsakringskassan/stylelint-config": "3.5.0",
-    "@forsakringskassan/vite-lib-config": "5.12.5",
-    "@forsakringskassan/vitest-config-jsdom": "5.0.0",
-    "@forsakringskassan/vue-lib-template": "1.6.1",
+    "@forsakringskassan/stylelint-config": "3.5.1",
+    "@forsakringskassan/vite-lib-config": "5.13.0",
+    "@forsakringskassan/vitest-config-jsdom": "5.0.1",
+    "@forsakringskassan/vue-lib-template": "1.6.2",
     "@html-validate/release-scripts": "7.6.12",
-    "@types/node": "24.19.0",
+    "@types/node": "24.19.1",
     "@typescript/native": "npm:typescript@7.0.2",
     "@vue/server-renderer": "3.5.43",
     "@vue/test-utils": "2.5.1",
     "cloneman": "1.26.0",
     "core-js": "3.50.0",
-    "cypress": "16.1.0",
+    "cypress": "16.1.1",
     "html-validate": "11.16.1",
     "html-validate-markdown": "6.0.0",
     "html-validate-vue": "9.3.1",
@@ -128,10 +128,10 @@
     "npm-run-all2": "9.0.3",
     "rimraf": "6.1.3",
     "typescript": "npm:@typescript/typescript6@6.0.2",
-    "vite": "8.3.1",
-    "vitest": "5.0.2",
+    "vite": "8.3.2",
+    "vitest": "5.0.3",
     "vue": "3.5.43",
-    "vue-tsc": "3.3.11"
+    "vue-tsc": "3.3.12"
   },
   "peerDependencies": {
     "@fkui/design": "^6.0.0",

package/files/project-guide/development.md

@@ -11,24 +11,24 @@ To get up and running quickly:
 
 ## Architecture: Three Layers
 
-We recommend separating Appearance, Logic, and Types into three distinct layers to keep the codebase maintainable. You can find an example component, [`FcCatInfoComponent`](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/FcCatInfo/FcCatInfoComponent.vue), which demonstrates how this structure can be applied in practice:
+We recommend separating Appearance, Logic, and Types into three distinct layers to keep the codebase maintainable. You can find an example component, [`FcCatInfo`](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/cat-info/cat-info.vue), which demonstrates how this structure can be applied in practice:
 
 ### 1. Type Layer
 
-In the example [cat-types.ts](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/FcCatInfo/cat-types.ts), we define _what_ the data is using TypeScript interfaces.
+In the example [cat-types.ts](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/cat-info/cat-types.ts), we define _what_ the data is using TypeScript interfaces.
 
 - **Why?** It ensures that both the logic and the component know exactly which fields (e.g., `name`, `age`) exist.
 
 ### 2. Logic Layer
 
-In the example [cat-info-logic.ts](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/FcCatInfo/cat-info-logic.ts), we create a so-called "composable" (a function that starts with `use...`, e.g., `useCatInfo`).
+In the example [cat-info-logic.ts](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/cat-info/cat-info-logic.ts), we create a so-called "composable" (a function that starts with `use...`, e.g., `useCatInfo`).
 
 - This is where we handle API calls, state (loading, error), and calculations.
 - **Why?** It makes the logic easy to test with Vitest without needing to start a full browser.
 
 ### 3. UI Layer
 
-Refer to [FcCatInfoComponent.vue](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/FcCatInfo/FcCatInfoComponent.vue) for the actual Vue component. This should be "thin".
+Refer to [cat-info.vue](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/cat-info/cat-info.vue) for the actual Vue component. This should be "thin".
 
 - It imports the logic from `useCatInfo`.
 - It uses components from `@fkui/vue` (such as `FCard` or `FLoader`) to follow the design system.
@@ -36,19 +36,19 @@ Refer to [FcCatInfoComponent.vue](https://github.com/Forsakringskassan/vue-lib-t
 
 ## Implementation Flow
 
-1. **Create the files**: Create `MyComponent.vue`, `my-component-logic.ts`, and `my-component-types.ts`.
+1. **Create the files**: Create `my-component.vue`, `my-component-logic.ts`, and `my-component-types.ts`.
 2. **Implement logic**: Create your `useMyComponent` function and export it.
 3. **Build UI**: Import the logic into the `.vue` file and connect variables to the template.
 4. **Export**: Open `src/components/index.ts` and add:
 
     ```typescript
-    export { default as MyComponent } from "./MyComponent.vue";
+    export { default as FcMyComponent } from "./my-component.vue";
     ```
 
 ## Styling
 
 - For small amounts of styling, it is perfectly fine to use `<style lang="scss"></style>` directly within the `.vue` file.
-- For more extensive styles, create a dedicated SCSS file for the component (e.g., `MyComponent.scss`) and import it in the `.vue` file.
+- For more extensive styles, create a dedicated SCSS file for the component (e.g., `my-component.scss`) and import it in the `.vue` file.
 - Use `style.scss` for styles that should apply to the entire library.
 
 ## Common commands
@@ -82,7 +82,7 @@ You can run a specific example file directly by passing a name to the start comm
 npm start catinfo
 ```
 
-This uses fuzzy search to find and start the best matching file in `src/examples/` (e.g., `CatInfoExample.vue`).
+This uses fuzzy search to find and start the best matching file in `src/examples/` (e.g., `cat-info-example.vue`).
 
 ## API URL configuration
 

package/files/project-guide/documentation.md

@@ -15,7 +15,7 @@ Put the component page in `docs/components/` and give it the same base name as t
 title: Cat information
 status: Draft
 layout: component
-component: FcCatInfoComponent
+component: FcCatInfo
 ---
 ```
 
@@ -29,21 +29,21 @@ A standard runnable example is included with an `import` fence:
 
 ````md
 ```import
-CatInfoExample.vue
+my-component-example.vue
 ```
 ````
 
-The corresponding example is [`FcCatInfoComponentExample.vue`](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/FcCatInfo/examples/FcCatInfoComponentExample.vue). Keep the example focused on a realistic use case and make its initial state useful without extra setup.
+The corresponding example is [`cat-info-example.vue`](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/cat-info/examples/cat-info-example.vue). Keep the example focused on a realistic use case and make its initial state useful without extra setup.
 
-Prefer a live example when the documentation needs interactive controls or a richer demonstration. Include a file ending in `LiveExample.vue` with the `live-example` variant:
+Prefer a live example when the documentation needs interactive controls or a richer demonstration. Include a kebab-case file ending in `-live-example.vue` with the `live-example` variant:
 
 ````md
 ```import live-example
-FcCatInfoComponentLiveExample.vue
+cat-info-live-example.vue
 ```
 ````
 
-The reference implementation shows this pattern in [FcCatInfoComponentLiveExample.vue](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/FcCatInfo/examples/FcCatInfoComponentLiveExample.vue) and its [documentation page](https://github.com/Forsakringskassan/vue-lib-template/blob/main/docs/guide/index.md).
+The reference implementation shows this pattern in [cat-info-live-example.vue](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/cat-info/examples/cat-info-live-example.vue) and its [documentation page](https://github.com/Forsakringskassan/vue-lib-template/blob/main/docs/guide/cat-info.md).
 
 See the [docs-live-example README](https://github.com/Forsakringskassan/docs-live-example/blob/main/README.md) for the implementation details behind interactive examples.
 
@@ -70,10 +70,10 @@ Add the Vue API block for every component page:
 ## API
 
 ::: api
-vue:FcCatInfoComponent
+vue:cat-info
 :::
 ```
 
-The component name must match the Vue component passed to the generator. Public props, events, slots, and documented types are extracted from the component source and its declarations. Keep public API comments accurate because they are part of the generated documentation.
+The component name must match the Vue SFC's base filename. Public props, events, slots, and documented types are extracted from the component source and its declarations. Keep public API comments accurate because they are part of the generated documentation.
 
 If the component has translation keys, add the corresponding translation API block. Do not add empty sections for features the component does not use.

package/files/project-guide/index.md

@@ -31,12 +31,12 @@ Here are the most important locations you need to know:
 
 The `vue-lib-template` template repository, which this component library is based on, contains a small cat information component that demonstrates the recommended structure. It is useful as a starting point when creating a new component:
 
-- [Component](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/FcCatInfo/FcCatInfoComponent.vue)
-- [Runnable example](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/FcCatInfo/examples/FcCatInfoComponentExample.vue)
-- [Live-example](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/FcCatInfo/examples/FcCatInfoComponentLiveExample.vue)
-- [Unit tests](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/FcCatInfo/cat-info-logic.spec.ts)
-- [Cypress component tests](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/FcCatInfo/FcCatInfoComponent.cy.ts)
-- [Cypress selectors](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/selectors/guide/FcCatInfoComponent.selectors.ts)
+- [Component](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/cat-info/cat-info.vue)
+- [Runnable example](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/cat-info/examples/cat-info-example.vue)
+- [Live example](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/cat-info/examples/cat-info-live-example.vue)
+- [Unit tests](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/cat-info/cat-info-logic.spec.ts)
+- [Cypress component tests](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/cat-info/cat-info.cy.ts)
+- [Cypress selectors](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/selectors/guide/cat-info.selectors.ts)
 - [API mock](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/mocks/guide/cat-api.mock.mts)
 - [Mock registration](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/mocks/index.mts)
 

package/files/project-guide/testing.md

@@ -10,7 +10,7 @@ Use Vitest for composables, business rules, data transformations. Keep these tes
 
 Run tests with `npm run unit`.
 
-The cat information logic is tested in [`cat-info-logic.spec.ts`](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/FcCatInfo/cat-info-logic.spec.ts). It mocks the API module and verifies loading, successful data, errors, and updates:
+The cat information logic is tested in [`cat-info-logic.spec.ts`](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/cat-info/cat-info-logic.spec.ts). It mocks the API module and verifies loading, successful data, errors, and updates:
 
 ```ts
 import { expect, it, vi } from "vitest";
@@ -71,7 +71,7 @@ See the [apimock-express README](https://github.com/Forsakringskassan/apimock-ex
 
 ## Cypress component tests
 
-Use Cypress for user-visible component behavior: rendering, loading states, form interaction, emitted actions, error states, and accessibility-related behavior. The current example is [`FcCatInfoComponent.cy.ts`](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/FcCatInfo/FcCatInfoComponent.cy.ts).
+Use Cypress for user-visible component behavior: rendering, loading states, form interaction, emitted actions, error states, and accessibility-related behavior. The current example is [`cat-info.cy.ts`](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/cat-info/cat-info.cy.ts).
 
 The current package does not define a dedicated Cypress npm script, so run Cypress through `npx`:
 
@@ -81,7 +81,7 @@ The current package does not define a dedicated Cypress npm script, so run Cypre
 Mount the component with realistic props and wait for state changes through visible behavior:
 
 ```ts
-cy.mount(FcCatInfoComponent, {
+cy.mount(FcCatInfo, {
     props: {
         catId: testCat.id,
         isEditable: false,
@@ -96,7 +96,7 @@ Do not use arbitrary timeouts to wait for the API. Assert on a loading element,
 
 ### Selectors
 
-Keep reusable selectors in a `selectors/` file instead of scattering CSS selectors through specs. The [`FcCatInfoComponent` selector helper](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/selectors/guide/FcCatInfoComponent.selectors.ts) uses [`data-test`](https://designsystem.forsakringskassan.se/latest/functions/plugins/testplugin.html) attributes and supports scoping a component instance.
+Keep reusable selectors in a `selectors/` file instead of scattering CSS selectors through specs. The [`FcCatInfoSelectors` helper](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/selectors/guide/cat-info.selectors.ts) uses [`data-test`](https://designsystem.forsakringskassan.se/latest/functions/plugins/testplugin.html) attributes and supports scoping a component instance.
 
 Selectors should describe stable test targets.
 

package/files/src/components/guide/README.md

@@ -1,6 +1,6 @@
 # Component guide
 
-This directory contains an example component, `FcCatInfoComponent`, that demonstrates the setup and conventions used by this template.
+This directory contains an example component, `FcCatInfo`, that demonstrates the setup and conventions used by this template.
 It includes the component, selectors, tests, mock data, related support files, and belonging documentation in `docs/guide`.
 
 This guide will stay in sync when you update to later versions of your template,

package/files/src/components/guide/{FcCatInfo → cat-info}/cat-data.ts

@@ -1,7 +1,7 @@
 import type { Cat } from "./cat-types";
 
 /**
- * Mock cat data for the FcCatInfoComponent
+ * Mock cat data for the FcCatInfo
  */
 
 export const cats: Cat[] = [

package/files/src/components/guide/{FcCatInfo → cat-info}/cat-info-logic.ts

@@ -4,7 +4,7 @@ import { catGetById } from "./cat-api";
 import type { Cat } from "./cat-types";
 
 /**
- * Business logic for the FcCatInfoComponent.
+ * Business logic for the FcCatInfo.
  * Manages fetching and updating cat information from mock backend.
  */
 export function useCatInfo(): {

package/files/src/components/guide/{FcCatInfo/FcCatInfoComponent.cy.ts → cat-info/cat-info.cy.ts}

@@ -1,15 +1,15 @@
 import { FLoaderSelectors } from "@fkui/vue/selectors";
-import { FcCatInfoComponentSelectors } from "../../../selectors/guide/FcCatInfoComponent.selectors";
-import FcCatInfoComponent from "./FcCatInfoComponent.vue";
+import { FcCatInfoSelectors } from "../../../selectors/guide/cat-info.selectors";
 import { cats } from "./cat-data";
+import FcCatInfo from "./cat-info.vue";
 
-describe("FcCatInfoComponent", () => {
+describe("FcCatInfo", () => {
     const testCat = cats[0];
-    const catInfoSelectors = FcCatInfoComponentSelectors();
+    const catInfoSelectors = FcCatInfoSelectors();
     const loaderSelectors = FLoaderSelectors();
 
     it("verifies loading text", () => {
-        cy.mount(FcCatInfoComponent, {
+        cy.mount(FcCatInfo, {
             props: {
                 catId: testCat.id,
             },
@@ -23,7 +23,7 @@ describe("FcCatInfoComponent", () => {
     });
 
     it("verifies all fields in view mode have correct data", () => {
-        cy.mount(FcCatInfoComponent, {
+        cy.mount(FcCatInfo, {
             props: {
                 catId: testCat.id,
                 isEditable: false,
@@ -44,7 +44,7 @@ describe("FcCatInfoComponent", () => {
     });
 
     it("verifies all fields in edit mode have correct data", () => {
-        cy.mount(FcCatInfoComponent, {
+        cy.mount(FcCatInfo, {
             props: {
                 catId: testCat.id,
                 isEditable: true,

package/files/src/components/guide/{FcCatInfo/FcCatInfoComponent.vue → cat-info/cat-info.vue}

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { FCard, FLoader } from "@fkui/vue";
-import CatInfoEdit from "./CatInfoEdit.vue";
-import CatInfoShow from "./CatInfoShow.vue";
+import CatInfoEdit from "./cat-info-edit.vue";
 import { useCatInfo } from "./cat-info-logic.js";
+import CatInfoShow from "./cat-info-show.vue";
 import { type Cat } from "./cat-types.js";
 
 interface Props {

package/files/src/components/guide/{FcCatInfo/examples/FcCatInfoComponentExample.vue → cat-info/examples/cat-info-example.vue}

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import FcCatInfoComponent from "../FcCatInfoComponent.vue";
+import FcCatInfo from "../cat-info.vue";
 
 const selectedCatId = ref("whiskers-001");
 const isEditable = ref(false);
@@ -8,7 +8,7 @@ const isEditable = ref(false);
 
 <template>
     <div class="cat-example__component">
-        <fc-cat-info-component :cat-id="selectedCatId" :is-editable />
+        <fc-cat-info :cat-id="selectedCatId" :is-editable />
     </div>
 </template>
 

package/files/src/components/guide/{FcCatInfo/examples/FcCatInfoComponentLiveExample.vue → cat-info/examples/cat-info-live-example.vue}

@@ -2,11 +2,11 @@
 import { defineComponent } from "vue";
 import { FCheckboxField, FSelectField } from "@fkui/vue";
 import { LiveExample } from "@forsakringskassan/docs-live-example";
-import FcCatInfoComponent from "../FcCatInfoComponent.vue";
 import { getCatIds } from "../cat-data.js";
+import FcCatInfo from "../cat-info.vue";
 
 export default defineComponent({
-    name: "FcCatInfoComponentLiveExample",
+    name: "FcCatInfoLiveExample",
     components: { LiveExample, FSelectField, FCheckboxField },
     data() {
         return {
@@ -17,14 +17,14 @@ export default defineComponent({
     },
     computed: {
         components(): object {
-            return { FcCatInfoComponent };
+            return { FcCatInfo };
         },
         editableAttr(): string {
             return this.isEditable ? " is-editable" : "";
         },
         template(): string {
             return /* HTML */ `
-                <fc-cat-info-component cat-id="${this.selectedCatId}" ${this.editableAttr} />
+                <fc-cat-info cat-id="${this.selectedCatId}" ${this.editableAttr} />
             `;
         },
     },

package/files/src/components/guide/cat-info/index.ts

@@ -0,0 +1 @@
+export { default as FcCatInfo } from "./cat-info.vue";

package/files/src/components/guide/index.ts

@@ -1 +1 @@
-export { FcCatInfoComponent } from "./FcCatInfo";
+export { FcCatInfo } from "./cat-info";

package/files/src/mocks/guide/cat-api.mock.mts

@@ -1,6 +1,6 @@
 import { defineMock } from "@forsakringskassan/apimock-express/helpers";
-import { cats } from "../../components/guide/FcCatInfo/cat-data.ts";
-import type { Cat } from "../../components/guide/FcCatInfo/cat-types.ts";
+import { cats } from "../../components/guide/cat-info/cat-data.ts";
+import type { Cat } from "../../components/guide/cat-info/cat-types.ts";
 
 export default defineMock<Cat | { error: string }>({
     meta: {

package/files/src/selectors/guide/{FcCatInfoComponent.selectors.spec.ts → cat-info.selectors.spec.ts}

@@ -1,12 +1,12 @@
 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";
+import { catGetById } from "../../components/guide/cat-info/cat-api";
+import { cats } from "../../components/guide/cat-info/cat-data";
+import FcCatInfo from "../../components/guide/cat-info/cat-info.vue";
+import { FcCatInfoSelectors } from "./cat-info.selectors";
 
-vi.mock(import("../../components/guide/FcCatInfo/cat-api"));
+vi.mock(import("../../components/guide/cat-info/cat-api"));
 
 beforeEach(() => {
     vi.mocked(catGetById).mockResolvedValue(cats[0]);
@@ -14,10 +14,10 @@ beforeEach(() => {
 
 it("should use the default selector", () => {
     expect.assertions(2);
-    const wrapper = mount(FcCatInfoComponent, {
+    const wrapper = mount(FcCatInfo, {
         props: { catId: cats[0].id },
     });
-    const { selector } = FcCatInfoComponentSelectors();
+    const { selector } = FcCatInfoSelectors();
 
     expect(selector).toBe(":scope");
     expect(wrapper.find(selector).exists()).toBe(true);
@@ -25,13 +25,11 @@ it("should use the default selector", () => {
 
 it("should find the component with an explicit selector", () => {
     expect.assertions(2);
-    const wrapper = mount(FcCatInfoComponent, {
+    const wrapper = mount(FcCatInfo, {
         attrs: { "data-test": "my-cat-info" },
         props: { catId: cats[0].id },
     });
-    const { selector } = FcCatInfoComponentSelectors(
-        '[data-test="my-cat-info"]',
-    );
+    const { selector } = FcCatInfoSelectors('[data-test="my-cat-info"]');
 
     expect(selector).toBe('[data-test="my-cat-info"]');
     expect(wrapper.find(selector).exists()).toBe(true);
@@ -39,10 +37,10 @@ it("should find the component with an explicit selector", () => {
 
 it("should find the loading container", () => {
     expect.assertions(1);
-    const wrapper = mount(FcCatInfoComponent, {
+    const wrapper = mount(FcCatInfo, {
         props: { catId: cats[0].id },
     });
-    const { loadingContainer } = FcCatInfoComponentSelectors();
+    const { loadingContainer } = FcCatInfoSelectors();
 
     expect(wrapper.get(loadingContainer()).text()).toContain(
         "Hämtar kattinformation...",
@@ -51,10 +49,10 @@ it("should find the loading container", () => {
 
 it("should find all view mode elements", async () => {
     expect.assertions(5);
-    const wrapper = mount(FcCatInfoComponent, {
+    const wrapper = mount(FcCatInfo, {
         props: { catId: cats[0].id, isEditable: false },
     });
-    const selectors = FcCatInfoComponentSelectors();
+    const selectors = FcCatInfoSelectors();
 
     await vi.waitFor(() => {
         if (!wrapper.find(selectors.viewContainer()).exists()) {
@@ -72,13 +70,13 @@ it("should find all view mode elements", async () => {
 
 it("should find all edit mode inputs", async () => {
     expect.assertions(6);
-    const wrapper = mount(FcCatInfoComponent, {
+    const wrapper = mount(FcCatInfo, {
         props: { catId: cats[0].id, isEditable: true },
         global: {
             plugins: [TestPlugin, ValidationPlugin],
         },
     });
-    const selectors = FcCatInfoComponentSelectors();
+    const selectors = FcCatInfoSelectors();
 
     await vi.waitFor(() => {
         if (!wrapper.find(selectors.editContainer()).exists()) {

package/files/src/selectors/guide/{FcCatInfoComponent.selectors.ts → cat-info.selectors.ts}

@@ -1,11 +1,11 @@
 /**
- * Selectors for `FcCatInfoComponent`.
+ * Selectors for `FcCatInfo`.
  *
  * @public
- * @param selector - The selector for the FcCatInfoComponent.
- * @returns An object with selector methods for the FcCatInfoComponent.
+ * @param selector - The selector for the FcCatInfo.
+ * @returns An object with selector methods for the FcCatInfo.
  */
-export function FcCatInfoComponentSelectors(selector: string = ":scope") {
+export function FcCatInfoSelectors(selector: string = ":scope") {
     return Object.freeze({
         /**
          * The base selector for the component.

package/files/src/selectors/guide/index.ts

@@ -1 +1 @@
-export { FcCatInfoComponentSelectors } from "./FcCatInfoComponent.selectors";
+export { FcCatInfoSelectors } from "./cat-info.selectors";

package/index.js

@@ -7,7 +7,7 @@
 
         const options = {
             ...packageJson.cloneman,
-            fileHash: "39a7dd9881d3b98fbcef96ca841b1f279216253ae4198de7f1cd3974c578d14f",
+            fileHash: "bc371200203939f7aac70cb6735d6cefd6aeaf428f0e4ff6916992a8e4919ae3",
             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.6.1",
+  "version": "1.6.2",
   "description": "Vue library template based on Cloneman",
   "keywords": [
     "template",
@@ -72,19 +72,19 @@
       "project-guide/testing.md",
       "README.md",
       "renovate.json",
-      "src/components/guide/FcCatInfo/cat-api.spec.ts",
-      "src/components/guide/FcCatInfo/cat-api.ts",
-      "src/components/guide/FcCatInfo/cat-data.ts",
-      "src/components/guide/FcCatInfo/cat-info-logic.spec.ts",
-      "src/components/guide/FcCatInfo/cat-info-logic.ts",
-      "src/components/guide/FcCatInfo/cat-types.ts",
-      "src/components/guide/FcCatInfo/CatInfoEdit.vue",
-      "src/components/guide/FcCatInfo/CatInfoShow.vue",
-      "src/components/guide/FcCatInfo/examples/FcCatInfoComponentExample.vue",
-      "src/components/guide/FcCatInfo/examples/FcCatInfoComponentLiveExample.vue",
-      "src/components/guide/FcCatInfo/FcCatInfoComponent.cy.ts",
-      "src/components/guide/FcCatInfo/FcCatInfoComponent.vue",
-      "src/components/guide/FcCatInfo/index.ts",
+      "src/components/guide/cat-info/cat-api.spec.ts",
+      "src/components/guide/cat-info/cat-api.ts",
+      "src/components/guide/cat-info/cat-data.ts",
+      "src/components/guide/cat-info/cat-info-edit.vue",
+      "src/components/guide/cat-info/cat-info-logic.spec.ts",
+      "src/components/guide/cat-info/cat-info-logic.ts",
+      "src/components/guide/cat-info/cat-info-show.vue",
+      "src/components/guide/cat-info/cat-info.cy.ts",
+      "src/components/guide/cat-info/cat-info.vue",
+      "src/components/guide/cat-info/cat-types.ts",
+      "src/components/guide/cat-info/examples/cat-info-example.vue",
+      "src/components/guide/cat-info/examples/cat-info-live-example.vue",
+      "src/components/guide/cat-info/index.ts",
       "src/components/guide/index.ts",
       "src/components/guide/README.md",
       "src/components/index.ts",
@@ -95,8 +95,8 @@
       "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/cat-info.selectors.spec.ts",
+      "src/selectors/guide/cat-info.selectors.ts",
       "src/selectors/guide/index.ts",
       "src/selectors/index.ts",
       "src/style.scss",
@@ -127,6 +127,8 @@
       "cypress/tsconfig.json",
       "cypress/types/mocha.d.ts",
       "docs/build.mts",
+      "docs/guide/cat-info.md",
+      "docs/guide/index.md",
       "docs/package.json",
       "docs/src/bundle-mocks.ts",
       "docs/src/global.d.ts",
@@ -140,6 +142,27 @@
       "LICENSE.md",
       "README.md",
       "renovate.json",
+      "src/components/guide/cat-info/cat-api.spec.ts",
+      "src/components/guide/cat-info/cat-api.ts",
+      "src/components/guide/cat-info/cat-data.ts",
+      "src/components/guide/cat-info/cat-info-edit.vue",
+      "src/components/guide/cat-info/cat-info-logic.spec.ts",
+      "src/components/guide/cat-info/cat-info-logic.ts",
+      "src/components/guide/cat-info/cat-info-show.vue",
+      "src/components/guide/cat-info/cat-info.cy.ts",
+      "src/components/guide/cat-info/cat-info.vue",
+      "src/components/guide/cat-info/cat-types.ts",
+      "src/components/guide/cat-info/examples/cat-info-example.vue",
+      "src/components/guide/cat-info/examples/cat-info-live-example.vue",
+      "src/components/guide/cat-info/index.ts",
+      "src/components/guide/index.ts",
+      "src/components/guide/README.md",
+      "src/mocks/guide/cat-api-mock.spec.ts",
+      "src/mocks/guide/cat-api.mock.mts",
+      "src/mocks/guide/index.mts",
+      "src/selectors/guide/cat-info.selectors.spec.ts",
+      "src/selectors/guide/cat-info.selectors.ts",
+      "src/selectors/guide/index.ts",
       "tsconfig.cypress.json",
       "tsconfig.json",
       "tsconfig.lib.json",
@@ -191,7 +214,11 @@
       "src/AwesomeComponent.cy.ts",
       "src/AwesomeComponent.vue",
       "src/AwesomeComponentLogic.spec.ts",
-      "src/awesome-component-logic.ts"
+      "src/awesome-component-logic.ts",
+      "docs/guide/**",
+      "src/components/guide/**",
+      "src/mocks/guide/**",
+      "src/selectors/guide/**"
     ],
     "uninstallDependencies": [
       "@forsakringskassan/cypress-axe",

package/files/src/components/guide/FcCatInfo/index.ts

@@ -1 +0,0 @@
-export { default as FcCatInfoComponent } from "./FcCatInfoComponent.vue";