fds-vue-core 6.0.10 → 6.0.13

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "fds-vue-core",
-  "version": "6.0.10",
+  "version": "6.0.13",
   "description": "FDS Vue Core Component Library",
   "type": "module",
+  "bin": {
+    "fds-vuln-commit": "./scripts/vuln-commit.mjs"
+  },
   "main": "./dist/fds-vue-core.cjs.js",
   "module": "./dist/fds-vue-core.es.js",
   "types": "./components.d.ts",
@@ -24,7 +27,8 @@
     "./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"
+    "./vscode-settings.json": "./configs/vscode-settings.json",
+    "./vuln-commit": "./scripts/vuln-commit.mjs"
   },
   "files": [
     "dist",
@@ -45,11 +49,31 @@
   "engines": {
     "node": "^20.19.0 || >=22.12.0"
   },
+  "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 && mkdir -p ./dist/assets/img/logos && cp -r ./src/assets/img/logos/* ./dist/assets/img/logos/",
+    "build:types": "vue-tsc --project tsconfig.build.json",
+    "preview": "vite preview",
+    "lint": "eslint . --fix",
+    "lint:ts": "vue-tsc --noEmit --project tsconfig.app.json && vue-tsc --noEmit --project tsconfig.node.json",
+    "lint:all": "pnpm lint && pnpm lint:ts",
+    "format": "prettier --write src/",
+    "prepublishOnly": "npm run build",
+    "storybook": "STORYBOOK=true storybook dev -p 6006",
+    "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",
+    "yalc:publish": "npm run build && yalc publish",
+    "yalc:push": "npm run build && yalc push",
+    "serve:playground": "pnpm --dir playground-consumer dev",
+    "create:release": "bash ./scripts/release.sh",
+    "vuln-commit": "node scripts/vuln-commit.mjs"
+  },
   "peerDependencies": {
     "vue": "^3.5.25"
   },
   "dependencies": {
-    "axios": "^1.13.6",
+    "axios": "1.15.0",
     "imask": "^7.6.1",
     "tailwindcss": "^4.1.18"
   },
@@ -95,22 +119,18 @@
       "src/apply.css"
     ]
   },
-  "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 && mkdir -p ./dist/assets/img/logos && cp -r ./src/assets/img/logos/* ./dist/assets/img/logos/",
-    "build:types": "vue-tsc --project tsconfig.build.json",
-    "preview": "vite preview",
-    "lint": "eslint . --fix",
-    "lint:ts": "vue-tsc --noEmit --project tsconfig.app.json && vue-tsc --noEmit --project tsconfig.node.json",
-    "lint:all": "pnpm lint && pnpm lint:ts",
-    "format": "prettier --write src/",
-    "storybook": "STORYBOOK=true storybook dev -p 6006",
-    "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",
-    "yalc:publish": "npm run build && yalc publish",
-    "yalc:push": "npm run build && yalc push",
-    "serve:playground": "pnpm --dir playground-consumer dev",
-    "create:release": "bash ./scripts/release.sh"
-  }
-}
+  "pnpm": {
+    "overrides": {
+      "minimatch": "^10.2.3",
+      "flatted": "^3.4.2",
+      "lodash": ">=4.18.0"
+    },
+    "onlyBuiltDependencies": [
+      "@parcel/watcher",
+      "core-js-pure",
+      "esbuild",
+      "vue-demi"
+    ]
+  },
+  "packageManager": "pnpm@10.17.1"
+}

package/scripts/vuln-commit.mjs

@@ -0,0 +1,129 @@
+#!/usr/bin/env node
+
+import { execSync } from "node:child_process";
+
+function run(command) {
+  try {
+    return execSync(command, { encoding: "utf8" }).trim();
+  } catch {
+    return "";
+  }
+}
+
+function runOrThrow(command) {
+  return execSync(command, { encoding: "utf8", stdio: "inherit" });
+}
+
+function out(text = "") {
+  process.stdout.write(`${text}\n`);
+}
+
+function parseJsonAtRef(refPath) {
+  const raw = run(`git show ${refPath}`);
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+
+function readStagedFile(path) {
+  return parseJsonAtRef(`:${path}`);
+}
+
+function readHeadFile(path) {
+  return parseJsonAtRef(`HEAD:${path}`);
+}
+
+function collectDeps(pkgJson) {
+  if (!pkgJson) return {};
+  return {
+    ...(pkgJson.dependencies || {}),
+    ...(pkgJson.devDependencies || {}),
+    ...(pkgJson.peerDependencies || {}),
+    ...(pkgJson.optionalDependencies || {}),
+    ...(pkgJson.overrides || {}),
+    ...((pkgJson.pnpm && pkgJson.pnpm.overrides) || {}),
+  };
+}
+
+function normalize(version) {
+  if (typeof version !== "string") return version;
+  return version.trim();
+}
+
+function semverFrom(value) {
+  if (typeof value !== "string") return null;
+  const match = value.match(/(\d+\.\d+\.\d+)/);
+  return match ? match[1] : null;
+}
+
+function main() {
+  const stagedFiles = run("git diff --cached --name-only")
+    .split("\n")
+    .map((s) => s.trim())
+    .filter(Boolean);
+
+  const packageJsonPaths = stagedFiles.filter((p) => p.endsWith("package.json"));
+  if (packageJsonPaths.length === 0) {
+    out("No staged package.json changes found.");
+    process.exit(0);
+  }
+
+  const updates = [];
+
+  for (const path of packageJsonPaths) {
+    const stagedPkg = readStagedFile(path);
+    const headPkg = readHeadFile(path) || {};
+    if (!stagedPkg) continue;
+
+    const before = collectDeps(headPkg);
+    const after = collectDeps(stagedPkg);
+    const keys = new Set([...Object.keys(before), ...Object.keys(after)]);
+
+    for (const name of keys) {
+      const oldV = normalize(before[name]);
+      const newV = normalize(after[name]);
+      if (oldV && newV && oldV !== newV) {
+        updates.push({ name, from: oldV, to: newV, path });
+      }
+    }
+  }
+
+  if (updates.length === 0) {
+    out("No staged dependency version changes found in package.json.");
+    process.exit(0);
+  }
+
+  out("Detected staged dependency updates:\n");
+  for (const u of updates) {
+    out(`- ${u.name}: ${u.from} -> ${u.to} (${u.path})`);
+  }
+
+  const commitMessage =
+    updates.length === 1
+      ? `vuln(${updates[0].name}@${semverFrom(updates[0].from) || updates[0].from}): bump to ${semverFrom(updates[0].to) || updates[0].to}`
+      : "vuln(): updated dependencies";
+  const commitBody =
+    updates.length > 1
+      ? `updated dependencies\n${updates.map((u) => `- ${u.name}: ${u.from} -> ${u.to}`).join("\n")}`
+      : "";
+
+  const hasStagedChanges = run("git diff --cached --name-only");
+  if (!hasStagedChanges) {
+    out("\nNo staged changes to commit.");
+    process.exit(1);
+  }
+
+  const escapedMessage = commitMessage.replace(/"/g, '\\"');
+  const escapedBody = commitBody.replace(/"/g, '\\"');
+  const commitCommand = commitBody
+    ? `git commit -m "${escapedMessage}" -m "${escapedBody}"`
+    : `git commit -m "${escapedMessage}"`;
+
+  out(`\nCreating commit:\n${commitMessage}\n`);
+  runOrThrow(commitCommand);
+}
+
+main();

package/src/apply.css

@@ -39,7 +39,7 @@
   }
   .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;
+    @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 cursor-pointer;
   }
 
   .link--with-parens::before {

package/src/components/FdsSearchSelectPro/FdsSearchSelectPro.stories.ts

@@ -87,6 +87,10 @@ const meta: Meta<typeof FdsSearchSelect> = {
       control: { type: 'boolean' },
       description: 'If true, preserves the order of searchFields when displaying results',
     },
+    debounceMs: {
+      control: { type: 'number' },
+      description: 'Debounce delay in milliseconds for input/change events',
+    },
     initialValue: {
       control: { type: 'text' },
       description: 'Initial value to display in the input field',
@@ -173,6 +177,7 @@ const meta: Meta<typeof FdsSearchSelect> = {
     maxItems: undefined,
     searchFields: ['companyName', 'orgNumber'],
     preserveOrder: false,
+    debounceMs: 500,
     initialValue: '',
     displayValue: '',
     disabled: false,
@@ -450,38 +455,63 @@ export const EnglishLocale: Story = {
   },
 }
 
-export const WithPagination: Story = {
+export const ServerPaginationWithLoadMore: Story = {
+  render: (args: Story['args']) => ({
+    components: { FdsSearchSelect },
+    setup: () => {
+      const pageSize = 5
+      const allItems = Array.from({ length: 18 }, (_, i) => {
+        const index = i + 1
+        return {
+          companyName: `Company ${index}`,
+          orgNumber: String(1000000000 + index),
+          companyFqn: `Company ${index} | ${1000000000 + index}`,
+        }
+      })
+
+      const currentPage = ref(1)
+      const totalPages = Math.ceil(allItems.length / pageSize)
+      const loadingMore = ref(false)
+      const items = ref(allItems.slice(0, pageSize))
+
+      const handleLoadMore = async () => {
+        if (loadingMore.value || currentPage.value >= totalPages) return
+        loadingMore.value = true
+        await new Promise((resolve) => setTimeout(resolve, 1000))
+        currentPage.value += 1
+        items.value = allItems.slice(0, currentPage.value * pageSize)
+        loadingMore.value = false
+      }
+
+      return {
+        args,
+        items,
+        loadingMore,
+        currentPage,
+        totalPages,
+        totalCount: allItems.length,
+        handleLoadMore,
+      }
+    },
+    template: `
+      <FdsSearchSelect
+        v-bind="args"
+        :items="items"
+        :page="currentPage"
+        :totalPages="totalPages"
+        :totalCount="totalCount"
+        :loadingMore="loadingMore"
+        :autoLoadOnScroll="true"
+        :maxListHeight="320"
+        @loadMore="handleLoadMore"
+      />
+    `,
+  }),
   args: {
-    items: [
-      ...mockItems,
-      {
-        companyName: 'Company 6',
-        orgNumber: '6666666666',
-        companyFqn: 'Company 6 | 6666666666',
-      },
-      {
-        companyName: 'Company 7',
-        orgNumber: '7777777777',
-        companyFqn: 'Company 7 | 7777777777',
-      },
-      {
-        companyName: 'Company 8',
-        orgNumber: '8888888888',
-        companyFqn: 'Company 8 | 8888888888',
-      },
-      {
-        companyName: 'Company 9',
-        orgNumber: '9999999999',
-        companyFqn: 'Company 9 | 9999999999',
-      },
-      {
-        companyName: 'Company 10',
-        orgNumber: '1010101010',
-        companyFqn: 'Company 10 | 1010101010',
-      },
-    ],
     label: 'Sök organisation',
-    maxItems: 5,
+    searchFields: ['companyName', 'orgNumber'],
+    searchContext: { context: 'organisationer', linkWord: 'av' },
+    noResultPrompt: 'Inga resultat hittades',
   },
 }
 

package/src/components/FdsSearchSelectPro/FdsSearchSelectPro.vue

@@ -3,7 +3,6 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useBoldQuery } from '../../composables/useBoldQuery'
 import { isPidString, useIsPid } from '../../composables/useIsPid'
 import FdsButtonIcon from '../Buttons/FdsButtonIcon/FdsButtonIcon.vue'
-import FdsPagination from '../FdsPagination/FdsPagination.vue'
 import FdsSpinner from '../FdsSpinner/FdsSpinner.vue'
 import FdsInput from '../Form/FdsInput/FdsInput.vue'
 import type { FdsSearchSelectProProps } from './types'
@@ -35,6 +34,7 @@ const props = withDefaults(defineProps<FdsSearchSelectProProps>(), {
   loading: false,
   searchFields: () => [],
   preserveOrder: false,
+  debounceMs: 500,
   initialValue: '',
   displayValue: '',
   disabled: false,
@@ -282,22 +282,25 @@ const formatPidWithDash = (value: string): string => {
   return digits
 }
 
-const debounce = <T extends (...args: any[]) => void>(fn: T, delay: number) => {
-  let timeout: ReturnType<typeof setTimeout>
-  return (...args: Parameters<T>) => {
-    clearTimeout(timeout)
-    timeout = setTimeout(() => fn(...args), delay)
-  }
-}
+let changeTimeout: ReturnType<typeof setTimeout> | null = null
+let inputTimeout: ReturnType<typeof setTimeout> | null = null
 
-const debouncedEmitChange = debounce((value: string) => {
+const debouncedEmitChange = (value: string) => {
+  if (changeTimeout) clearTimeout(changeTimeout)
+  const delay = Math.max(0, props.debounceMs ?? 500)
+  changeTimeout = setTimeout(() => {
   const formattedValue = formatPidWithDash(value)
   emit('change', formattedValue)
-}, 500)
+  }, delay)
+}
 
-const debouncedEmitInput = debounce((ev: Event) => {
-  emit('input', ev)
-}, 500)
+const debouncedEmitInput = (ev: Event) => {
+  if (inputTimeout) clearTimeout(inputTimeout)
+  const delay = Math.max(0, props.debounceMs ?? 500)
+  inputTimeout = setTimeout(() => {
+    emit('input', ev)
+  }, delay)
+}
 
 watch(
   () => searchTerm.value,
@@ -335,14 +338,6 @@ const onClickOutside = (e: PointerEvent) => {
   }
 }
 
-const totalPages = computed(() => {
-  // Only return totalPages if both page and totalPages props are provided
-  if (props.page !== undefined && props.totalPages !== undefined) {
-    return props.totalPages
-  }
-  return null
-})
-
 const handleInput = (e: Event) => {
   const target = e.target as HTMLInputElement
   const { value } = target
@@ -432,10 +427,6 @@ const handleMatchingString = (item: Record<string, unknown>): string => {
   return result
 }
 
-const handlePagination = (_payload: { target: { id: string }; detail: number }) => {
-  emit('paginate', _payload.detail)
-}
-
 const selectItem = (item: Record<string, unknown>) => {
   selectedItem.value = item
   setValidSelectedState()
@@ -660,6 +651,8 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   window.removeEventListener('mouseup', onClickOutside as EventListener)
+  if (changeTimeout) clearTimeout(changeTimeout)
+  if (inputTimeout) clearTimeout(inputTimeout)
   const input = getInputElement()
   if (input) {
     input.removeEventListener('keydown', handleInputKeyDown)
@@ -849,14 +842,6 @@ defineExpose<{
             </li>
           </ul>
 
-          <!-- Pagination -->
-          <FdsPagination
-            v-if="page !== undefined && totalPages !== null && totalPages > 1"
-            :current="page"
-            :max="totalPages"
-            @paginate="handlePagination"
-            class="my-4! px-2"
-          />
         </template>
 
         <!-- No Results -->

package/src/components/FdsSearchSelectPro/types.ts

@@ -64,6 +64,8 @@ export interface FdsSearchSelectProProps extends Omit</* @vue-ignore */ HTMLAttr
   searchFields?: string[]
   /** Preserves and prioritizes `searchFields` order when normalizing item output. */
   preserveOrder?: boolean
+  /** Debounce delay in ms for `change` and `input` emits. */
+  debounceMs?: number
   /** Initial text value for the input field. */
   initialValue?: string
   /**

package/src/components/FdsSearchSelectPro/useSearchSelectProItems.ts

@@ -374,9 +374,14 @@ export const useSearchSelectProItems = ({
   }
 
   const hasInternalMoreItems = computed(() => matchingItems.value.length > displayedItems.value.length)
+  const hasMoreServerPages = computed(() => {
+    if (props.page === undefined || props.totalPages === undefined) return false
+    return props.page < props.totalPages
+  })
   const shouldShowLoadMore = computed(() => {
     if (isMultiple.value && showSelectedOnly.value) return false
     if (hasInternalMoreItems.value) return true
+    if (hasMoreServerPages.value) return true
     if (props.maxItems && props.maxItems > 0) return false
     return props.showLoadMore
   })

package/src/style.css

@@ -49,7 +49,7 @@
   }
   .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;
+    @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 cursor-pointer;
   }
 
   .capitalize-first::first-letter {