fds-vue-core 2.1.4 → 2.1.6

package/dist/global-components.d.ts

@@ -1,37 +1,39 @@
 import type { DefineComponent } from 'vue'
-import type {
-  FdsTreeViewProps,
-  FdsButtonPrimaryProps,
-  FdsButtonSecondaryProps,
-  FdsButtonMinorProps,
-  FdsIconButtonProps,
-  FdsCopyButtonProps,
-  FdsButtonDownloadProps,
-  FdsIconProps,
-  FdsSpinnerProps,
-  FdsRadioProps,
-  FdsInputProps,
-  FdsCheckboxProps,
-  FdsTextareaProps,
-  FdsSelectProps,
-  FdsTableProps,
-  FdsTableHeadProps,
-  FdsContentBlockProps,
-  FdsBlockInfoProps,
-  FdsAlertBlockProps,
-  FdsExpanderBlockProps,
-  FdsInteractionBlockProps,
-  FdsStickerProps,
-  FdsTabsProps,
-  FdsTabsItemProps,
-  FdsModalProps,
-  FdsPaginationProps,
-  FdsSearchSelectProps,
-  FdsTruncatedTextProps,
-  FdsHeadingProps,
-  FdsTextProps,
-  FdsListHeadingProps,
-} from './index'
+// Import prop types directly from their source modules to avoid circular deps with index.ts
+import type { FdsTreeViewProps } from './components/FdsTreeView/types'
+import type { FdsButtonBaseProps } from './components/Buttons/ButtonBaseProps'
+import type { FdsCopyButtonProps } from './components/Buttons/FdsButtonCopy/types'
+import type { FdsIconButtonProps } from './components/Buttons/FdsButtonIcon/types'
+import type { FdsIconProps } from './components/FdsIcon/types'
+import type { FdsSpinnerProps } from './components/FdsSpinner/types'
+import type { FdsRadioProps } from './components/Form/FdsRadio/types'
+import type { FdsInputProps } from './components/Form/FdsInput/types'
+import type { FdsCheckboxProps } from './components/Form/FdsCheckbox/types'
+import type { FdsTextareaProps } from './components/Form/FdsTextarea/types'
+import type { FdsSelectProps } from './components/Form/FdsSelect/types'
+import type { FdsTableProps } from './components/Table/FdsTable/types'
+import type { FdsTableHeadProps } from './components/Table/FdsTableHead/types'
+import type { FdsContentBlockProps } from './components/Blocks/FdsBlockContent/types'
+import type { FdsBlockInfoProps } from './components/Blocks/FdsBlockInfo/types'
+import type { FdsAlertBlockProps } from './components/Blocks/FdsBlockAlert/types'
+import type { FdsExpanderBlockProps } from './components/Blocks/FdsBlockExpander/types'
+import type { FdsInteractionBlockProps } from './components/Blocks/FdsBlockLink/types'
+import type { FdsStickerProps } from './components/FdsSticker/types'
+import type { FdsTabsProps } from './components/Tabs/FdsTabs/types'
+import type { FdsTabsItemProps } from './components/Tabs/FdsTabsItem/types'
+import type { FdsModalProps } from './components/FdsModal/types'
+import type { FdsPaginationProps } from './components/FdsPagination/types'
+import type { FdsSearchSelectProps } from './components/FdsSearchSelect/types'
+import type { FdsTruncatedTextProps } from './components/FdsTruncatedText/types'
+import type { FdsHeadingProps } from './components/Typography/FdsHeading/types'
+import type { FdsTextProps } from './components/Typography/FdsText/types'
+import type { FdsListHeadingProps } from './components/Typography/FdsListHeading/types'
+
+// Derive button prop types from base props
+type FdsButtonPrimaryProps = FdsButtonBaseProps
+type FdsButtonSecondaryProps = FdsButtonBaseProps
+type FdsButtonMinorProps = FdsButtonBaseProps
+type FdsButtonDownloadProps = FdsButtonBaseProps
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "fds-vue-core",
-  "version": "2.1.4",
+  "version": "2.1.6",
   "description": "FDS Vue Core Component Library",
   "type": "module",
   "main": "./dist/fds-vue-core.cjs.js",
   "module": "./dist/fds-vue-core.es.js",
-  "types": "./dist/index.d.ts",
+  "types": "./components.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": "./components.d.ts",
       "import": "./dist/fds-vue-core.es.js",
       "require": "./dist/fds-vue-core.cjs.js"
     },
@@ -28,6 +28,8 @@
   },
   "files": [
     "dist",
+    "src",
+    "components.d.ts",
     "tailwind.preset.cjs",
     "configs",
     "scripts"
@@ -45,7 +47,7 @@
   },
   "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 ./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": "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 ./src/global-components.ts ./dist/global-components.d.ts && cp -r ./public/assets ./dist/assets",
     "build:types": "vue-tsc --project tsconfig.build.json",
     "preview": "vite preview",
     "lint": "eslint . --fix",
@@ -58,11 +60,11 @@
     "postinstall": "test -f scripts/sync-peers-from-dev.mjs && node scripts/sync-peers-from-dev.mjs || true"
   },
   "peerDependencies": {
-    "vue": "^3.5.0"
+    "vue": "^3.5.25"
   },
   "dependencies": {
     "imask": "^7.6.1",
-    "tailwindcss": "^4.1.17",
+    "tailwindcss": "^4.1.18",
     "vue-imask": "^7.6.1"
   },
   "devDependencies": {
@@ -73,33 +75,33 @@
     "@storybook/addon-onboarding": "^9.1.10",
     "@storybook/addon-vitest": "^9.1.10",
     "@storybook/vue3-vite": "^9.1.10",
-    "@tailwindcss/vite": "^4.1.17",
-    "@tsconfig/node22": "^22.0.2",
+    "@tailwindcss/vite": "^4.1.18",
+    "@tsconfig/node22": "^22.0.5",
     "@types/node": "^22.16.5",
     "@types/react": "18",
     "@types/react-dom": "18",
-    "@vitejs/plugin-vue": "^6.0.1",
+    "@vitejs/plugin-vue": "^6.0.3",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
-    "@vitest/eslint-plugin": "^1.3.20",
+    "@vitest/eslint-plugin": "^1.5.2",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.6.0",
-    "@vue/tsconfig": "^0.7.0",
-    "eslint": "^9.31.0",
+    "@vue/tsconfig": "^0.8.1",
+    "eslint": "^9.39.2",
     "eslint-plugin-storybook": "^9.1.10",
-    "eslint-plugin-vue": "~10.3.0",
+    "eslint-plugin-vue": "~10.6.2",
     "lit": "^3.3.1",
-    "playwright": "^1.56.0",
-    "prettier": "3.6.2",
-    "sass": "^1.94.0",
+    "playwright": "^1.57.0",
+    "prettier": "3.7.4",
+    "sass": "^1.96.0",
     "storybook": "^9.1.10",
     "storybook-vue-slots": "^9.1.5",
-    "typescript": "~5.8.0",
-    "vite": "^7.0.6",
+    "typescript": "~5.9.3",
+    "vite": "^7.2.7",
     "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-vue-devtools": "^8.0.0",
+    "vite-plugin-vue-devtools": "^8.0.5",
     "vitest": "^3.2.4",
-    "vue": "^3.5.18",
-    "vue-tsc": "^3.0.4"
+    "vue": "^3.5.25",
+    "vue-tsc": "^3.1.8"
   }
 }

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;
+  }
+}