fds-vue-core 2.0.89 → 2.1.1

package/dist/global-components.d.ts

@@ -1,38 +1,38 @@
 declare module '@vue/runtime-core' {
-    interface GlobalComponents {
-        FdsTreeView: typeof import('./components/FdsTreeView/FdsTreeView.vue')['default'];
-        FdsButtonPrimary: typeof import('./components/Buttons/FdsButtonPrimary/FdsButtonPrimary.vue')['default'];
-        FdsButtonSecondary: typeof import('./components/Buttons/FdsButtonSecondary/FdsButtonSecondary.vue')['default'];
-        FdsButtonMinor: typeof import('./components/Buttons/FdsButtonMinor/FdsButtonMinor.vue')['default'];
-        FdsButtonIcon: typeof import('./components/Buttons/FdsButtonIcon/FdsButtonIcon.vue')['default'];
-        FdsButtonCopy: typeof import('./components/Buttons/FdsButtonCopy/FdsButtonCopy.vue')['default'];
-        FdsButtonDownload: typeof import('./components/Buttons/FdsButtonDownload/FdsButtonDownload.vue')['default'];
-        FdsIcon: typeof import('./components/FdsIcon/FdsIcon.vue')['default'];
-        FdsSpinner: typeof import('./components/FdsSpinner/FdsSpinner.vue')['default'];
-        FdsRadio: typeof import('./components/Form/FdsRadio/FdsRadio.vue')['default'];
-        FdsInput: typeof import('./components/Form/FdsInput/FdsInput.vue')['default'];
-        FdsCheckbox: typeof import('./components/Form/FdsCheckbox/FdsCheckbox.vue')['default'];
-        FdsTextarea: typeof import('./components/Form/FdsTextarea/FdsTextarea.vue')['default'];
-        FdsSelect: typeof import('./components/Form/FdsSelect/FdsSelect.vue')['default'];
-        FdsTable: typeof import('./components/Table/FdsTable/FdsTable.vue')['default'];
-        FdsTableHead: typeof import('./components/Table/FdsTableHead/FdsTableHead.vue')['default'];
-        FdsBlockContent: typeof import('./components/Blocks/FdsBlockContent/FdsBlockContent.vue')['default'];
-        FdsBlockInfo: typeof import('./components/Blocks/FdsBlockInfo/FdsBlockInfo.vue')['default'];
-        FdsBlockAlert: typeof import('./components/Blocks/FdsBlockAlert/FdsBlockAlert.vue')['default'];
-        FdsBlockExpander: typeof import('./components/Blocks/FdsBlockExpander/FdsBlockExpander.vue')['default'];
-        FdsBlockLink: typeof import('./components/Blocks/FdsBlockLink/FdsBlockLink.vue')['default'];
-        FdsSticker: typeof import('./components/FdsSticker/FdsSticker.vue')['default'];
-        FdsTabs: typeof import('./components/Tabs/FdsTabs/FdsTabs.vue')['default'];
-        FdsTabsItem: typeof import('./components/Tabs/FdsTabsItem/FdsTabsItem.vue')['default'];
-        FdsModal: typeof import('./components/FdsModal/FdsModal.vue')['default'];
-        FdsPagination: typeof import('./components/FdsPagination/FdsPagination.vue')['default'];
-        FdsSearchSelect: typeof import('./components/FdsSearchSelect/FdsSearchSelect.vue')['default'];
-        FdsTruncatedText: typeof import('./components/FdsTruncatedText/FdsTruncatedText.vue')['default'];
-        FdsHeading: typeof import('./components/Typography/FdsHeading/FdsHeading.vue')['default'];
-        FdsSeparator: typeof import('./components/Typography/FdsSeparator/FdsSeparator.vue')['default'];
-        FdsText: typeof import('./components/Typography/FdsText/FdsText.vue')['default'];
-        FdsListHeading: typeof import('./components/Typography/FdsListHeading/FdsListHeading.vue')['default'];
-    }
+  export interface GlobalComponents {
+    FdsTreeView: (typeof import('../src/components/FdsTreeView/FdsTreeView.vue'))['default']
+    FdsButtonPrimary: (typeof import('../src/components/Buttons/FdsButtonPrimary/FdsButtonPrimary.vue'))['default']
+    FdsButtonSecondary: (typeof import('../src/components/Buttons/FdsButtonSecondary/FdsButtonSecondary.vue'))['default']
+    FdsButtonMinor: (typeof import('../src/components/Buttons/FdsButtonMinor/FdsButtonMinor.vue'))['default']
+    FdsButtonIcon: (typeof import('../src/components/Buttons/FdsButtonIcon/FdsButtonIcon.vue'))['default']
+    FdsButtonCopy: (typeof import('../src/components/Buttons/FdsButtonCopy/FdsButtonCopy.vue'))['default']
+    FdsButtonDownload: (typeof import('../src/components/Buttons/FdsButtonDownload/FdsButtonDownload.vue'))['default']
+    FdsIcon: (typeof import('../src/components/FdsIcon/FdsIcon.vue'))['default']
+    FdsSpinner: (typeof import('../src/components/FdsSpinner/FdsSpinner.vue'))['default']
+    FdsRadio: (typeof import('../src/components/Form/FdsRadio/FdsRadio.vue'))['default']
+    FdsInput: (typeof import('../src/components/Form/FdsInput/FdsInput.vue'))['default']
+    FdsCheckbox: (typeof import('../src/components/Form/FdsCheckbox/FdsCheckbox.vue'))['default']
+    FdsTextarea: (typeof import('../src/components/Form/FdsTextarea/FdsTextarea.vue'))['default']
+    FdsSelect: (typeof import('../src/components/Form/FdsSelect/FdsSelect.vue'))['default']
+    FdsTable: (typeof import('../src/components/Table/FdsTable/FdsTable.vue'))['default']
+    FdsTableHead: (typeof import('../src/components/Table/FdsTableHead/FdsTableHead.vue'))['default']
+    FdsBlockContent: (typeof import('../src/components/Blocks/FdsBlockContent/FdsBlockContent.vue'))['default']
+    FdsBlockInfo: (typeof import('../src/components/Blocks/FdsBlockInfo/FdsBlockInfo.vue'))['default']
+    FdsBlockAlert: (typeof import('../src/components/Blocks/FdsBlockAlert/FdsBlockAlert.vue'))['default']
+    FdsBlockExpander: (typeof import('../src/components/Blocks/FdsBlockExpander/FdsBlockExpander.vue'))['default']
+    FdsBlockLink: (typeof import('../src/components/Blocks/FdsBlockLink/FdsBlockLink.vue'))['default']
+    FdsSticker: (typeof import('../src/components/FdsSticker/FdsSticker.vue'))['default']
+    FdsTabs: (typeof import('../src/components/Tabs/FdsTabs/FdsTabs.vue'))['default']
+    FdsTabsItem: (typeof import('../src/components/Tabs/FdsTabsItem/FdsTabsItem.vue'))['default']
+    FdsModal: (typeof import('../src/components/FdsModal/FdsModal.vue'))['default']
+    FdsPagination: (typeof import('../src/components/FdsPagination/FdsPagination.vue'))['default']
+    FdsSearchSelect: (typeof import('../src/components/FdsSearchSelect/FdsSearchSelect.vue'))['default']
+    FdsTruncatedText: (typeof import('../src/components/FdsTruncatedText/FdsTruncatedText.vue'))['default']
+    FdsHeading: (typeof import('../src/components/Typography/FdsHeading/FdsHeading.vue'))['default']
+    FdsSeparator: (typeof import('../src/components/Typography/FdsSeparator/FdsSeparator.vue'))['default']
+    FdsText: (typeof import('../src/components/Typography/FdsText/FdsText.vue'))['default']
+    FdsListHeading: (typeof import('../src/components/Typography/FdsListHeading/FdsListHeading.vue'))['default']
+  }
 }
-export {};
-//# sourceMappingURL=global-components.d.ts.map
+
+export {}

package/dist/index.d.ts

@@ -1,80 +1,2 @@
-import './style.css';
-import './global-components';
-import FdsTreeView from './components/FdsTreeView/FdsTreeView.vue';
-import FdsButtonPrimary from './components/Buttons/FdsButtonPrimary/FdsButtonPrimary.vue';
-import FdsButtonSecondary from './components/Buttons/FdsButtonSecondary/FdsButtonSecondary.vue';
-import FdsButtonMinor from './components/Buttons/FdsButtonMinor/FdsButtonMinor.vue';
-import FdsButtonIcon from './components/Buttons/FdsButtonIcon/FdsButtonIcon.vue';
-import FdsButtonCopy from './components/Buttons/FdsButtonCopy/FdsButtonCopy.vue';
-import FdsButtonDownload from './components/Buttons/FdsButtonDownload/FdsButtonDownload.vue';
-import FdsIcon from './components/FdsIcon/FdsIcon.vue';
-import FdsSpinner from './components/FdsSpinner/FdsSpinner.vue';
-import FdsRadio from './components/Form/FdsRadio/FdsRadio.vue';
-import FdsInput from './components/Form/FdsInput/FdsInput.vue';
-import FdsCheckbox from './components/Form/FdsCheckbox/FdsCheckbox.vue';
-import FdsTextarea from './components/Form/FdsTextarea/FdsTextarea.vue';
-import FdsSelect from './components/Form/FdsSelect/FdsSelect.vue';
-import FdsTable from './components/Table/FdsTable/FdsTable.vue';
-import FdsTableHead from './components/Table/FdsTableHead/FdsTableHead.vue';
-import FdsBlockContent from './components/Blocks/FdsBlockContent/FdsBlockContent.vue';
-import FdsBlockInfo from './components/Blocks/FdsBlockInfo/FdsBlockInfo.vue';
-import FdsBlockAlert from './components/Blocks/FdsBlockAlert/FdsBlockAlert.vue';
-import FdsBlockExpander from './components/Blocks/FdsBlockExpander/FdsBlockExpander.vue';
-import FdsBlockLink from './components/Blocks/FdsBlockLink/FdsBlockLink.vue';
-import FdsSticker from './components/FdsSticker/FdsSticker.vue';
-import FdsTabs from './components/Tabs/FdsTabs/FdsTabs.vue';
-import FdsTabsItem from './components/Tabs/FdsTabsItem/FdsTabsItem.vue';
-import FdsModal from './components/FdsModal/FdsModal.vue';
-import FdsPagination from './components/FdsPagination/FdsPagination.vue';
-import FdsSearchSelect from './components/FdsSearchSelect/FdsSearchSelect.vue';
-import FdsTruncatedText from './components/FdsTruncatedText/FdsTruncatedText.vue';
-import FdsHeading from './components/Typography/FdsHeading/FdsHeading.vue';
-import FdsSeparator from './components/Typography/FdsSeparator/FdsSeparator.vue';
-import FdsText from './components/Typography/FdsText/FdsText.vue';
-import FdsListHeading from './components/Typography/FdsListHeading/FdsListHeading.vue';
-import useTreeState from './components/FdsTreeView/useTreeState';
-import { useIsPid, isPidString } from './composables/useIsPid';
-import { useBoldQuery } from './composables/useBoldQuery';
-export { FdsTreeView, FdsButtonPrimary, FdsButtonSecondary, FdsButtonMinor, FdsButtonIcon, FdsButtonCopy, FdsButtonDownload, FdsIcon, FdsSpinner, FdsCheckbox, FdsRadio, FdsInput, FdsTextarea, FdsSelect, FdsTable, FdsTableHead, FdsBlockContent, FdsBlockInfo, FdsBlockAlert, FdsBlockExpander, FdsBlockLink, FdsSticker, FdsTabs, FdsTabsItem, FdsModal, FdsPagination, FdsSearchSelect, FdsTruncatedText, FdsHeading, FdsSeparator, FdsText, FdsListHeading, };
-export { useTreeState, useIsPid, isPidString, useBoldQuery };
-type AppLike = {
-    component: (name: string, comp: unknown) => unknown;
-};
-declare const FdsVueCorePlugin: {
-    install(app: AppLike): void;
-};
-export default FdsVueCorePlugin;
-export type { FdsTreeNode, FdsTreeViewProps, FdsNodeShape, FdsTreeViewStyles, } from './components/FdsTreeView/types';
-export type { FdsButtonBaseProps } from './components/Buttons/ButtonBaseProps';
-export type { FdsIconButtonProps } from './components/Buttons/FdsButtonIcon/types';
-export type { FdsCopyButtonProps } from './components/Buttons/FdsButtonCopy/types';
-import type { FdsButtonBaseProps } from './components/Buttons/ButtonBaseProps';
-export type FdsButtonPrimaryProps = FdsButtonBaseProps;
-export type FdsButtonSecondaryProps = FdsButtonBaseProps;
-export type FdsButtonMinorProps = FdsButtonBaseProps;
-export type FdsButtonDownloadProps = FdsButtonBaseProps;
-export type { FdsInputProps } from './components/Form/FdsInput/types';
-export type { FdsTextareaProps } from './components/Form/FdsTextarea/types';
-export type { FdsSelectProps } from './components/Form/FdsSelect/types';
-export type { FdsCheckboxProps } from './components/Form/FdsCheckbox/types';
-export type { FdsRadioProps } from './components/Form/FdsRadio/types';
-export type { FdsTableProps } from './components/Table/FdsTable/types';
-export type { FdsTableHeadProps } from './components/Table/FdsTableHead/types';
-export type { FdsContentBlockProps } from './components/Blocks/FdsBlockContent/types';
-export type { FdsBlockInfoProps } from './components/Blocks/FdsBlockInfo/types';
-export type { FdsAlertBlockProps } from './components/Blocks/FdsBlockAlert/types';
-export type { FdsExpanderBlockProps } from './components/Blocks/FdsBlockExpander/types';
-export type { FdsInteractionBlockProps } from './components/Blocks/FdsBlockLink/types';
-export type { FdsTabsProps } from './components/Tabs/FdsTabs/types';
-export type { FdsTabsItemProps } from './components/Tabs/FdsTabsItem/types';
-export type { FdsHeadingProps } from './components/Typography/FdsHeading/types';
-export type { FdsTextProps } from './components/Typography/FdsText/types';
-export type { FdsListHeadingProps } from './components/Typography/FdsListHeading/types';
-export type { FdsIconProps, FdsIconName } from './components/FdsIcon/types';
-export type { FdsSpinnerProps } from './components/FdsSpinner/types';
-export type { FdsModalProps } from './components/FdsModal/types';
-export type { FdsPaginationProps } from './components/FdsPagination/types';
-export type { FdsSearchSelectProps } from './components/FdsSearchSelect/types';
-export type { FdsTruncatedTextProps } from './components/FdsTruncatedText/types';
-export type { FdsStickerProps } from './components/FdsSticker/types';
-//# sourceMappingURL=index.d.ts.map
+import './global-components'
+export {}

package/dist/slot-styles.css

@@ -17,7 +17,7 @@ input[type='search']::-ms-clear {
 
 /* Compact styling */
 .fds-table-wrapper.fds-table-wrapper--compact td,
-.fds-table-wrapper.fds-table-wrapper--compact th:not(.fds-table-head) { 
+.fds-table-wrapper.fds-table-wrapper--compact th:not(.fds-table-head) {
   padding: 0.5rem;
 }
 

package/dist/tokens.css

@@ -1,4 +1,3 @@
-
 /* Tailwind CSS v4 @theme - alla tokens för att fungera som Tailwind utilities */
 @theme {
   --font-main: 'IBM-Plex-Sans', 'Arial', sans-serif;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fds-vue-core",
-  "version": "2.0.89",
+  "version": "2.1.1",
   "description": "FDS Vue Core Component Library",
   "type": "module",
   "main": "./dist/fds-vue-core.cjs.js",
@@ -20,11 +20,18 @@
     "./fonts.css": "./dist/fonts.css",
     "./FdsTable.css": "./dist/FdsTable.css",
     "./FdsInput.css": "./dist/FdsInput.css",
-    "./tailwind.preset.cjs": "./tailwind.preset.cjs"
+    "./tailwind.preset.cjs": "./tailwind.preset.cjs",
+    "./tsconfig.base.json": "./configs/tsconfig.base.json",
+    "./eslint.config.base.js": "./configs/eslint.config.base.js",
+    "./prettier.config.js": "./configs/prettier.config.js",
+    "./vscode-settings.json": "./configs/vscode-settings.json"
   },
   "files": [
     "dist",
-    "tailwind.preset.cjs"
+    "src",
+    "tailwind.preset.cjs",
+    "configs",
+    "tsconfig.base.json"
   ],
   "license": "UNLICENSED",
   "keywords": [
@@ -39,15 +46,17 @@
   },
   "scripts": {
     "serve": "vite",
-    "build": "vite build && npm run build:types && cp ./src/tokens.css ./dist/tokens.css && cp ./src/slot-styles.css ./dist/slot-styles.css && cp ./src/apply.css ./dist/apply.css && cp ./src/fonts.css ./dist/fonts.css && cp -r ./public/assets ./dist/assets",
+    "build": "vite build && npm run build:types && cp ./src/tokens.css ./dist/tokens.css && cp ./src/slot-styles.css ./dist/slot-styles.css && cp ./src/apply.css ./dist/apply.css && cp ./src/fonts.css ./dist/fonts.css && sed 's|\\./components|../src/components|g' ./src/global-components.ts > ./dist/global-components.d.ts && node -e \"const fs=require('fs'); const content=fs.readFileSync('./dist/index.d.ts','utf8'); fs.writeFileSync('./dist/index.d.ts','import \\\\'./global-components\\\\'\\n'+content);\" && cp -r ./public/assets ./dist/assets",
     "build:types": "vue-tsc --project tsconfig.build.json",
     "preview": "vite preview",
-    "type-check": "vue-tsc --noEmit",
     "lint": "eslint . --fix",
+    "lint:ts": "vue-tsc --noEmit --project tsconfig.app.json && vue-tsc --noEmit --project tsconfig.node.json",
     "format": "prettier --write src/",
     "prepublishOnly": "npm run build",
     "storybook": "STORYBOOK=true storybook dev -p 6006",
-    "build-storybook": "STORYBOOK=true storybook build"
+    "build-storybook": "STORYBOOK=true storybook build",
+    "sync:peers": "node scripts/sync-peers-from-dev.mjs",
+    "postinstall": "test -f scripts/sync-peers-from-dev.mjs && node scripts/sync-peers-from-dev.mjs || true"
   },
   "peerDependencies": {
     "vue": "^3.5.0"

package/src/App.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import FdsTreeView from '@/components/FdsTreeView/FdsTreeView.vue'
+import type { FdsTreeNode } from '@/components/FdsTreeView/types'
+import { ref } from 'vue'
+
+// Mock tree data
+const mockTreeData: FdsTreeNode<Record<string, unknown>>[] = [
+  {
+    nodeId: 'root-1',
+    title: 'Documents',
+    children: [
+      {
+        nodeId: 'doc-1',
+        title: 'Work',
+        children: [
+          {
+            nodeId: 'work-1',
+            title: 'Projects',
+            children: [
+              {
+                nodeId: 'proj-1',
+                title: 'Project Alpha',
+                data: { type: 'project', status: 'active' },
+              },
+              {
+                nodeId: 'proj-2',
+                title: 'Project Beta',
+                data: { type: 'project', status: 'completed' },
+              },
+              {
+                nodeId: 'proj-3',
+                title: 'Project Gamma',
+                data: { type: 'project', status: 'planning', person_name: 'Anna Sjöström' },
+              },
+            ],
+          },
+          {
+            nodeId: 'work-2',
+            title: 'Reports',
+            children: [],
+          },
+        ],
+      },
+      {
+        nodeId: 'doc-2',
+        title: 'Personal',
+        children: [
+          { nodeId: 'pers-1', title: 'Photos', data: { type: 'folder', count: 150 } },
+          { nodeId: 'pers-2', title: 'Videos', data: { type: 'folder', count: 25 } },
+          { nodeId: 'pers-3', title: 'Music', data: { type: 'folder', count: 500 } },
+        ],
+      },
+    ],
+  },
+  {
+    nodeId: 'root-2',
+    title: 'Applications',
+    children: [
+      {
+        nodeId: 'app-1',
+        title: 'Development',
+        children: [
+          { nodeId: 'dev-1', title: 'VS Code', data: { type: 'app', category: 'editor' } },
+          { nodeId: 'dev-2', title: 'Terminal', data: { type: 'app', category: 'utility' } },
+          { nodeId: 'dev-3', title: 'Git', data: { type: 'app', category: 'version-control' } },
+        ],
+      },
+      {
+        nodeId: 'app-2',
+        title: 'Design',
+        children: [
+          { nodeId: 'design-1', title: 'Figma', data: { type: 'app', category: 'design' } },
+          { nodeId: 'design-2', title: 'Sketch', data: { type: 'app', category: 'design' } },
+        ],
+      },
+    ],
+  },
+  {
+    nodeId: 'root-3',
+    title: 'Settings',
+    children: [
+      { nodeId: 'set-1', title: 'General', data: { type: 'setting', category: 'preferences' } },
+      { nodeId: 'set-2', title: 'Privacy', data: { type: 'setting', category: 'security' } },
+      { nodeId: 'set-3', title: 'Notifications', data: { type: 'setting', category: 'alerts' } },
+    ],
+  },
+]
+
+const treeData: FdsTreeNode<Record<string, unknown>> = {
+  nodeId: 'root',
+  title: 'Root',
+  children: mockTreeData,
+  data: { type: 'root' },
+}
+
+type SelectedShape = Pick<FdsTreeNode, 'nodeId' | 'title' | 'data' | 'children'>
+const selectedNodes = ref<SelectedShape[]>([])
+</script>
+
+<template>
+  <div class="app p-8">
+    <div class="border border-gray-200 rounded-lg p-4 mb-8">
+      <h2 class="text-lg font-semibold mb-4">FDS Tree View Test</h2>
+      <FdsTreeView
+        :data="treeData"
+        :expandAllChildrenOnParentCheck="true"
+        :expandChildrenOnParentCheck="true"
+        :horizontalScroll="true"
+        :indentation="36"
+        :nodeCollapseIcon="'arrowUp'"
+        :nodeExpandIcon="'arrowDown'"
+        :searchEnabled="true"
+        :searchExpandNodes="true"
+        :searchHighlighting="true"
+        :searchLabel="'Sök noder'"
+        :searchMatchParams="['title']"
+        :showIndeterminate="true"
+        :showIndeterminateOnlyOnChildrenSelection="true"
+        :titleTemplate="'[[title]] ([[nodeId]])'"
+        :searchResultNoMatchesTitle="'Inga resultat hittades'"
+        :searchResultNoMatchesBody="'Pröva sök på något annat'"
+        :searchCountTemplate="'[[filteredNodes]] av [[totalNodes]] avdelningar'"
+        :searchCountTemplateUnfiltered="'[[totalNodes]] avdelningar'"
+        :popoverLabels="{
+          parentAndChildren: 'Denna och alla underliggande',
+          parent: 'Endast denna nivå',
+        }"
+        :searchInputTriggerLength="2"
+        v-model:selectedNodes="selectedNodes"
+      />
+    </div>
+  </div>
+</template>

package/src/apply.css

@@ -0,0 +1,60 @@
+@import './tokens.css';
+
+/** Create stencil components for this */
+@layer components {
+  h1,
+  .h1 {
+    @apply font-heading text-2xl sm:text-4xl lg:text-6xl/tight font-extrabold mb-3 mt-0;
+  }
+  h2,
+  .h2 {
+    @apply font-heading text-xl sm:text-3xl font-extrabold mt-4 mb-4;
+  }
+  .h2--small {
+    @apply font-heading text-xl font-extrabold mt-4 mb-4;
+  }
+
+  h3,
+  .h3 {
+    @apply font-heading text-xl font-extrabold mt-4 mb-4;
+  }
+
+  .h3--small {
+    @apply font-heading text-lg font-extrabold mt-4 mb-2;
+  }
+  h1:focus,
+  h2:focus,
+  h3:focus {
+    @apply focus:outline-0;
+  }
+
+  .label {
+    @apply font-bold mb-2! tracking-wide;
+  }
+  p {
+    @apply mb-4;
+  }
+  li:not(:last-child) {
+    @apply mb-2;
+  }
+  .link,
+  .html a {
+    @apply text-blue-600 hover:text-blue-700 active:text-blue-800 underline focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500;
+  }
+
+  .capitalize-first::first-letter {
+    text-transform: uppercase;
+  }
+}
+
+@layer utilities {
+  /** Override browser background color when autocomplete field */
+  input:not(input[type='checkbox'], input[type='radio']),
+  textarea {
+    box-shadow: 0 0 0 1000px #fff inset !important;
+  }
+  /** Style active router link in main nav */
+  .nav-items .router-link-active {
+    @apply bg-blue-100 text-blue-700 font-bold;
+  }
+}