fds-vue-core 2.1.9 → 2.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fds-vue-core",
-  "version": "2.1.9",
+  "version": "2.1.11",
   "description": "FDS Vue Core Component Library",
   "type": "module",
   "main": "./dist/fds-vue-core.cjs.js",
@@ -57,7 +57,9 @@
     "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"
+    "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"
   },
   "peerDependencies": {
     "vue": "^3.5.25"

package/src/components/Blocks/FdsBlockLink/FdsBlockLink.vue

@@ -11,6 +11,7 @@ defineOptions({
 const attrs = useAttrs()
 
 const props = withDefaults(defineProps<FdsInteractionBlockProps>(), {
+  id: undefined,
   arrow: false,
   disabled: false,
   download: undefined,
@@ -19,6 +20,7 @@ const props = withDefaults(defineProps<FdsInteractionBlockProps>(), {
   rel: undefined,
   icon: undefined,
   interactive: true,
+  dataTestid: undefined,
   as: 'router-link',
 })
 
@@ -29,6 +31,9 @@ const emit = defineEmits<{
   (e: 'click', event: Event): void
 }>()
 
+const autoId = `fds-block-link-${Math.random().toString(36).slice(2, 9)}`
+const blockLinkId = computed(() => props.id ?? autoId)
+
 const innerClasses = computed(() => [
   props.disabled ? 'cursor-not-allowed shadow-none hover:border-transparent active:bg-transparent' : 'cursor-pointer',
   !props.interactive && 'cursor-auto',
@@ -89,6 +94,7 @@ const componentType = computed(() => {
   <component
     :is="componentType"
     v-bind="componentAttrs"
+    :id="blockLinkId"
     class="box-border appearance-none text-left w-full flex items-start bg-white p-[calc(1rem-2px)] mb-3 text-blue-600 shadow-lg shadow-blue-200 rounded-2xl no-underline border-2 border-transparent transition-all duration-200 hover:border-blue-600 hover:border-2 active:border-transparent active:shadow-none active:bg-blue_t-100 focus-visible:border-blue-500 focus-visible:border-dashed focus-visible:outline-0"
     :class="innerClasses"
     :target="componentType === 'a' ? target : undefined"
@@ -98,6 +104,7 @@ const componentType = computed(() => {
     :aria-disabled="disabled"
     @click="handleClick"
     @keydown="handleKeydown"
+    :data-testid="dataTestid"
   >
     <div class="flex w-full flex-1" :class="contentClasses">
       <FdsIcon

package/src/components/Blocks/FdsBlockLink/types.ts

@@ -2,6 +2,7 @@ import type { FdsIconName } from '../../FdsIcon/types'
 
 export interface FdsInteractionBlockProps {
   label: string
+  id?: string
   arrow?: boolean
   disabled?: boolean
   download?: string
@@ -10,5 +11,6 @@ export interface FdsInteractionBlockProps {
   rel?: string
   icon?: FdsIconName
   interactive?: boolean
+  dataTestid?: string
   as?: 'button' | 'a' | 'router-link'
 }

package/src/components/Buttons/ButtonBaseProps.ts

@@ -15,4 +15,5 @@ export interface FdsButtonBaseProps {
   target?: string
   rel?: string
   type?: 'button' | 'submit' | 'reset'
+  onClick?: ((ev: MouseEvent) => void) | Array<(ev: MouseEvent) => void>
 }

package/src/components/Buttons/FdsButtonCopy/types.ts

@@ -5,4 +5,5 @@ export interface FdsCopyButtonProps {
   copiedLabel?: string
   timeoutMs?: number
   disabled?: boolean
+  onClick?: (() => void) | Array<() => void>
 }

package/src/components/Buttons/FdsButtonDownload/FdsButtonDownload.vue

@@ -1,31 +1,19 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import FdsIcon from '../../FdsIcon/FdsIcon.vue'
-import type { FdsButtonBaseProps } from '../ButtonBaseProps'
+import type { FdsButtonDownloadProps } from './types'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-interface DownloadOptions {
-  token: string
-  accept?: string
-  headerAuthKey?: string
-  headerAuthValuePrefix?: string
-  errorHandler?: (error: unknown) => void
-  onFinishCallback?: () => void
-}
-
-type FdsButtonDownloadProps = Omit<FdsButtonBaseProps, 'as' | 'icon'> & {
-  downloadOptions?: DownloadOptions
-}
-
 const props = withDefaults(defineProps<FdsButtonDownloadProps>(), {
   loading: false,
   disabled: false,
   iconPos: 'left',
   href: undefined,
   downloadOptions: undefined,
+  text: '',
 })
 
 const emit = defineEmits<{
@@ -146,7 +134,7 @@ async function handleDownload(ev: MouseEvent) {
   }
 }
 
-function onClick(ev: MouseEvent) {
+const onClick = (ev: MouseEvent) => {
   if (props.downloadOptions) {
     handleDownload(ev)
   } else {

package/src/components/Buttons/FdsButtonDownload/types.ts

@@ -0,0 +1,20 @@
+type IconPos = 'left' | 'right'
+
+export interface FdsButtonDownloadProps {
+  loading?: boolean
+  disabled?: boolean
+  iconPos?: IconPos
+  href?: string
+  downloadOptions?: DownloadOptions | undefined
+  text: string
+  onClick?: ((ev: MouseEvent) => void) | Array<(ev: MouseEvent) => void>
+}
+
+export interface DownloadOptions {
+  token: string
+  accept?: string
+  headerAuthKey?: string
+  headerAuthValuePrefix?: string
+  errorHandler?: (error: unknown) => void
+  onFinishCallback?: () => void
+}

package/src/components/Buttons/FdsButtonIcon/FdsButtonIcon.vue

@@ -23,7 +23,7 @@ const buttonClasses = computed(() => [
   props.disabled ? 'opacity-20 cursor-not-allowed' : 'cursor-pointer',
 ])
 
-function onClick(ev: MouseEvent) {
+const onClick = (ev: MouseEvent) => {
   if (props.disabled || props.loading) {
     ev.preventDefault()
     return

package/src/components/Buttons/FdsButtonIcon/types.ts

@@ -9,4 +9,5 @@ export interface FdsIconButtonProps {
   ariaLabel?: string
   id?: string
   ariaDisabled?: boolean
+  onClick?: ((ev: MouseEvent) => void) | Array<(ev: MouseEvent) => void>
 }

package/src/components/Buttons/FdsButtonMinor/FdsButtonMinor.vue

@@ -64,7 +64,7 @@ const buttonClasses = computed(() => [
 
 const iconFillClass = computed(() => (props.invert ? 'fill-white' : 'fill-blue-500'))
 
-function onClick(ev: MouseEvent) {
+const onClick = (ev: MouseEvent) => {
   if (props.disabled || props.loading) {
     ev.preventDefault()
     return

package/src/components/Buttons/FdsButtonPrimary/FdsButtonPrimary.vue

@@ -60,6 +60,11 @@ function onClick(ev: MouseEvent) {
     ev.preventDefault()
     return
   }
+  // Support both @click event and onClick prop
+  if (props.onClick) {
+    const handlers = Array.isArray(props.onClick) ? props.onClick : [props.onClick]
+    handlers.forEach((handler) => handler(ev))
+  }
   emit('click', ev)
 }
 

package/src/components/Buttons/FdsButtonSecondary/FdsButtonSecondary.vue

@@ -55,7 +55,7 @@ const buttonClasses = computed(() => [
 
 const iconFillClass = 'fill-blue-500'
 
-function onClick(ev: MouseEvent) {
+const onClick = (ev: MouseEvent) => {
   if (props.disabled || props.loading) {
     ev.preventDefault()
     return

package/src/components/FdsModal/types.ts

@@ -9,4 +9,5 @@ export interface FdsModalProps {
   lockScroll?: boolean
   info?: 'valid' | 'invalid' | 'warning'
   locale?: 'sv' | 'en'
+  onClose?: (value: boolean) => void
 }

package/src/components/FdsPagination/types.ts

@@ -3,4 +3,7 @@ export interface FdsPaginationProps {
   current: number
   max: number
   loading?: boolean
+  onPaginate?:
+    | ((payload: { target: { id: string }; detail: number }) => void)
+    | Array<(payload: { target: { id: string }; detail: number }) => void>
 }

package/src/components/FdsSearchSelect/FdsSearchSelect.vue

@@ -479,15 +479,9 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div
-    ref="componentRef"
-    class="fds-search-select block mb-6"
-  >
+  <div ref="componentRef" class="fds-search-select block mb-6">
     <div class="relative block">
-      <div
-        v-if="!singleItemName.length"
-        class="relative"
-      >
+      <div v-if="!singleItemName.length" class="relative">
         <div class="relative">
           <FdsInput
             :label="label"
@@ -530,14 +524,8 @@ onBeforeUnmount(() => {
         aria-controls="select-dropdown"
       >
         <!-- Loading -->
-        <div
-          v-if="loading"
-          class="flex justify-center p-4"
-        >
-          <FdsSpinner
-            color="blue"
-            size="48px"
-          />
+        <div v-if="loading" class="flex justify-center p-4">
+          <FdsSpinner color="blue" size="48px" />
         </div>
 
         <!-- Results -->
@@ -550,20 +538,12 @@ onBeforeUnmount(() => {
             {{ displayedItems.length }} {{ searchContext.linkWord }} {{ totalCount }}
             {{ searchContext.context }}
           </div>
-          <div
-            v-else-if="!searchTerm.length"
-            class="block m-0 font-light p-4 border-b border-gray-200 rounded-t-md"
-          >
+          <div v-else-if="!searchTerm.length" class="block m-0 font-light p-4 border-b border-gray-200 rounded-t-md">
             {{ totalCount }} {{ searchContext.context }}
           </div>
 
           <!-- List -->
-          <ul
-            class="block m-0 list-none p-0"
-            role="listbox"
-            id="select-dropdown"
-            @keydown="handleListKeyDown"
-          >
+          <ul class="block m-0 list-none p-0" role="listbox" id="select-dropdown" @keydown="handleListKeyDown">
             <li
               v-for="(item, index) in displayedItems"
               :key="index"
@@ -607,10 +587,7 @@ onBeforeUnmount(() => {
         </template>
 
         <!-- No Results -->
-        <ul
-          v-else-if="!loading"
-          class="block m-0 list-none p-0"
-        >
+        <ul v-else-if="!loading" class="block m-0 list-none p-0">
           <li class="p-4">
             {{ noResultPrompt }}
           </li>

package/src/components/FdsSearchSelect/types.ts

@@ -22,4 +22,11 @@ export interface FdsSearchSelectProps {
   maxListHeight?: number | string
   locale?: 'sv' | 'en'
   clearTrigger?: boolean
+  onChange?: ((value: string) => void) | Array<(value: string) => void>
+  onSearchSelected?:
+    | ((value: Record<string, unknown> | null) => void)
+    | Array<(value: Record<string, unknown> | null) => void>
+    | ((val: Record<string, unknown>) => void)
+  onPaginate?: ((value: number) => void) | Array<(value: number) => void>
+  onTotal?: ((value: number) => void) | Array<(value: number) => void>
 }

package/src/components/FdsTreeView/types.ts

@@ -115,7 +115,10 @@ export interface FdsTreeViewProps<T = Record<string, unknown>> {
   titleTemplate?: string
 
   /** Get the height of the search container */
-  getSearchContainerHeight?: () => number | undefined
+  onGetSearchContainerHeight?: number
+
+  /** Array of selected nodes */
+  selectedNodes?: FdsNodeShape<T>[]
 }
 
 /**

package/src/components/Form/FdsCheckbox/types.ts

@@ -7,4 +7,6 @@ export interface FdsCheckboxProps {
   name?: string | undefined
   id?: string | undefined
   required?: boolean
+  modelValue?: boolean | Array<string | number>
+  onChange?: ((value: boolean) => void) | Array<(value: boolean) => void>
 }

package/src/components/Form/FdsInput/types.ts

@@ -22,4 +22,8 @@ export interface FdsInputProps {
     placeholderChar?: string
     [key: string]: unknown
   }
+  modelValue?: string
+  onClearInput?: () => void
+  onKeyup?: ((value: KeyboardEvent) => void) | Array<(value: KeyboardEvent) => void>
+  onInput?: ((value: string | (Event & { target: HTMLInputElement })) => void) | ((value: Event) => void)
 }

package/src/components/Form/FdsRadio/types.ts

@@ -6,6 +6,7 @@ export interface FdsRadioProps {
   name?: string
   id?: string
   required?: boolean
+  modelValue?: string | number | Array<string | number>
   onKeydown?: ((event: KeyboardEvent) => void) | Array<(event: KeyboardEvent) => void>
   onBlur?: ((event: FocusEvent) => void) | Array<(event: FocusEvent) => void>
   onChange?: ((event: Event) => void) | Array<(event: Event) => void>

package/src/index.ts

@@ -129,6 +129,7 @@ export type { FdsNodeShape, FdsTreeNode, FdsTreeViewProps, FdsTreeViewStyles } f
 // Button component types
 export type { FdsButtonBaseProps } from './components/Buttons/ButtonBaseProps'
 export type { FdsCopyButtonProps } from './components/Buttons/FdsButtonCopy/types'
+export type { DownloadOptions, FdsButtonDownloadProps } from './components/Buttons/FdsButtonDownload/types'
 export type { FdsIconButtonProps } from './components/Buttons/FdsButtonIcon/types'
 
 // Button components that use FdsButtonBaseProps
@@ -136,7 +137,6 @@ import type { FdsButtonBaseProps } from './components/Buttons/ButtonBaseProps'
 export type FdsButtonPrimaryProps = FdsButtonBaseProps
 export type FdsButtonSecondaryProps = FdsButtonBaseProps
 export type FdsButtonMinorProps = FdsButtonBaseProps
-export type FdsButtonDownloadProps = FdsButtonBaseProps
 
 // Form component types
 export type { FdsCheckboxProps } from './components/Form/FdsCheckbox/types'