fds-vue-core 2.1.10 → 2.1.15

package/src/components/FdsSearchSelect/FdsSearchSelect.stories.ts

@@ -158,7 +158,7 @@ const mockItems = [
 ]
 
 export const WithItems: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsSearchSelect },
     setup: () => {
       const selected = ref<Record<string, unknown> | null>(null)
@@ -184,7 +184,7 @@ export const WithItems: Story = {
 }
 
 export const WithSelectedEarlier: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsSearchSelect },
     setup: () => {
       const selected = ref<Record<string, unknown> | null>(null)
@@ -209,7 +209,7 @@ export const WithSelectedEarlier: Story = {
 }
 
 export const SingleOrganization: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsSearchSelect },
     setup: () => {
       const selected = ref<Record<string, unknown> | null>(null)
@@ -240,7 +240,7 @@ export const SingleOrganization: Story = {
 }
 
 export const WithValidation: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsSearchSelect },
     setup: () => {
       const selected = ref<Record<string, unknown> | null>(null)
@@ -268,7 +268,7 @@ export const WithValidation: Story = {
 }
 
 export const WithLabelLeft: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsSearchSelect },
     setup: () => {
       const selected = ref<Record<string, unknown> | null>(null)
@@ -296,7 +296,7 @@ export const WithLabelLeft: Story = {
 }
 
 export const WithAbsoluteList: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsSearchSelect },
     setup: () => {
       const selected = ref<Record<string, unknown> | null>(null)
@@ -323,7 +323,7 @@ export const WithAbsoluteList: Story = {
 }
 
 export const Disabled: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsSearchSelect },
     setup: () => ({ args }),
     template: '<FdsSearchSelect v-bind="args" :items="args.items" />',
@@ -336,7 +336,7 @@ export const Disabled: Story = {
 }
 
 export const EnglishLocale: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsSearchSelect },
     setup: () => {
       const selected = ref<Record<string, unknown> | null>(null)
@@ -368,7 +368,7 @@ export const EnglishLocale: Story = {
 }
 
 export const WithPagination: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsSearchSelect },
     setup: () => {
       const selected = ref<Record<string, unknown> | null>(null)

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/FdsSpinner/FdsSpinner.stories.ts

@@ -23,7 +23,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Basic: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsSpinner },
     setup: () => ({ args }),
     template: '<FdsSpinner v-bind="args" />',

package/src/components/FdsSticker/FdsSticker.stories.ts

@@ -1,10 +1,32 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import FdsSticker from './FdsSticker.vue'
 
+const stickerTransform = (
+  _src: string,
+  storyContext: { args?: { variant?: string; bullet?: boolean; default?: string } },
+) => {
+  const args = storyContext?.args || {}
+  const attrs = []
+
+  if (args.variant && args.variant !== 'blue') attrs.push(`variant="${args.variant}"`)
+  if (args.bullet) attrs.push(`:bullet="true"`)
+
+  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
+  const content = args.default || ''
+  return `<FdsSticker${attrsStr}>${content}</FdsSticker>`
+}
+
 const meta: Meta<typeof FdsSticker> = {
   title: 'FDS/FdsSticker',
   component: FdsSticker,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      source: {
+        transform: stickerTransform,
+      },
+    },
+  },
   argTypes: {
     variant: {
       control: { type: 'radio' },
@@ -27,31 +49,12 @@ const meta: Meta<typeof FdsSticker> = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-const stickerTransform = (storyContext: { args?: { variant?: string; bullet?: boolean; default?: string } }) => {
-  const args = storyContext?.args || {}
-  const attrs = []
-
-  if (args.variant && args.variant !== 'blue') attrs.push(`variant="${args.variant}"`)
-  if (args.bullet) attrs.push(':bullet="true"')
-
-  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
-  const content = args.default || ''
-  return `<FdsSticker${attrsStr}>${content}</FdsSticker>`
-}
-
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsSticker },
     setup: () => ({ args }),
     template: `<FdsSticker v-bind="args">{{ args.default }}</FdsSticker>`,
   }),
-  parameters: {
-    docs: {
-      source: {
-        transform: stickerTransform,
-      },
-    },
-  },
   args: {
     variant: 'blue',
     default: 'Stick it!',

package/src/components/FdsSticker/FdsSticker.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, type Slot } from 'vue'
 import type { FdsStickerProps } from './types'
 
 const props = withDefaults(defineProps<FdsStickerProps>(), {
@@ -31,14 +31,15 @@ const bulletDotClasses = computed(() => [
   props.variant === 'gray' && 'bg-gray-400',
   props.variant === 't_blue' && 'bg-blue-200 border border-blue-300',
 ])
+
+defineSlots<{
+  default?: Slot
+}>()
 </script>
 
 <template>
   <span :class="stickerClasses">
-    <span
-      v-if="bullet"
-      :class="bulletDotClasses"
-    ></span>
+    <span v-if="bullet" :class="bulletDotClasses"></span>
     <slot />
   </span>
 </template>

package/src/components/FdsTreeView/FdsTreeView.stories.ts

@@ -128,7 +128,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Basic: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTreeView },
     setup: () => ({ args }),
     template: '<FdsTreeView v-bind="args" />',

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/FdsTruncatedText/FdsTruncatedText.stories.ts

@@ -1,5 +1,5 @@
-import { ref } from 'vue'
 import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
 import FdsTruncatedText from './FdsTruncatedText.vue'
 
 const meta: Meta<typeof FdsTruncatedText> = {
@@ -29,7 +29,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: NonNullable<Story['args']>) => ({
     components: { FdsTruncatedText },
     setup: () => {
       const open = ref(args.open)
@@ -43,7 +43,7 @@ export const Default: Story = {
 }
 
 export const WithSlot: Story = {
-  render: (args) => ({
+  render: (args: NonNullable<Story['args']>) => ({
     components: { FdsTruncatedText },
     setup: () => {
       const open = ref(args.open)
@@ -61,7 +61,7 @@ export const WithSlot: Story = {
 }
 
 export const Open: Story = {
-  render: (args) => ({
+  render: (args: NonNullable<Story['args']>) => ({
     components: { FdsTruncatedText },
     setup: () => {
       const open = ref(args.open)

package/src/components/FdsTruncatedText/FdsTruncatedText.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { computed, onMounted, ref, watch, type Slot } from 'vue'
 import { useHasSlot } from '../../composables/useHasSlots'
-import { computed, onMounted, ref, watch } from 'vue'
 import FdsButtonMinor from '../Buttons/FdsButtonMinor/FdsButtonMinor.vue'
 import type { FdsTruncatedTextProps } from './types'
 
@@ -54,6 +54,10 @@ onMounted(() => {
     }
   }
 })
+
+defineSlots<{
+  default?: Slot
+}>()
 </script>
 
 <template>
@@ -66,12 +70,7 @@ onMounted(() => {
     >
       <slot />
     </div>
-    <div
-      v-else
-      ref="contentRef"
-      :class="['content', { open: isOpen }]"
-      :style="{ maxWidth: `${containerWidth}px` }"
-    >
+    <div v-else ref="contentRef" :class="['content', { open: isOpen }]" :style="{ maxWidth: `${containerWidth}px` }">
       {{ content }}
     </div>
     <FdsButtonMinor

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

@@ -36,7 +36,7 @@ export const Default: Story = {
     checked: false,
     label: 'Checkbox label',
   },
-  render: (args) => ({
+  render: (args: NonNullable<Story['args']>) => ({
     components: { FdsCheckbox },
     setup() {
       const checked = ref(args.checked)
@@ -65,7 +65,7 @@ export const Checked: Story = {
   args: {
     checked: true,
   },
-  render: (args) => ({
+  render: (args: NonNullable<Story['args']>) => ({
     components: { FdsCheckbox },
     setup() {
       const checked = ref(args.checked)
@@ -97,7 +97,7 @@ export const Indeterminate: Story = {
   args: {
     indeterminate: true,
   },
-  render: (args) => ({
+  render: (args: NonNullable<Story['args']>) => ({
     components: { FdsCheckbox },
     setup() {
       const checked = ref(args.checked)
@@ -130,7 +130,7 @@ export const Disabled: Story = {
     disabled: true,
     checked: true,
   },
-  render: (args) => ({
+  render: (args: NonNullable<Story['args']>) => ({
     components: { FdsCheckbox },
     setup() {
       const checked = ref(args.checked)

package/src/components/Form/FdsCheckbox/FdsCheckbox.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { computed, nextTick, watch, type Slot } from 'vue'
 import { useHasSlot } from '../../../composables/useHasSlots'
-import { computed, nextTick, watch } from 'vue'
 import type { FdsCheckboxProps } from './types'
 
 // Support v-model as boolean (single checkbox) or array (checkbox group)
@@ -119,15 +119,15 @@ watch(
   },
   { immediate: true },
 )
+
+defineSlots<{
+  default?: Slot
+}>()
 </script>
 
 <template>
   <div :class="wrapperClasses">
-    <label
-      :for="inputId"
-      :class="[innerWrapperClasses, { 'cursor-not-allowed': disabled }]"
-      v-bind="$attrs"
-    >
+    <label :for="inputId" :class="[innerWrapperClasses, { 'cursor-not-allowed': disabled }]" v-bind="$attrs">
       <input
         :id="inputId"
         :name="name"

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/FdsInput.stories.ts

@@ -112,7 +112,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Basic: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsInput },
     setup: () => ({ args }),
     template: '<FdsInput v-bind="args" />',
@@ -140,7 +140,7 @@ export const WithVModel: Story = {
 }
 
 export const WithMeta: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsInput },
     setup: () => ({ args }),
     template: '<FdsInput v-bind="args" meta="Detta är hjälptext som visas under labeln" />',
@@ -184,7 +184,7 @@ export const WithValidation: Story = {
 }
 
 export const Disabled: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsInput },
     setup: () => ({ args }),
     template: '<FdsInput v-bind="args" />',
@@ -197,7 +197,7 @@ export const Disabled: Story = {
 }
 
 export const Required: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsInput },
     setup: () => ({ args }),
     template: '<FdsInput v-bind="args" />',
@@ -210,7 +210,7 @@ export const Required: Story = {
 }
 
 export const WithLabelLeft: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsInput },
     setup: () => ({ args }),
     template: '<FdsInput v-bind="args" />',

package/src/components/Form/FdsInput/FdsInput.vue

@@ -32,6 +32,8 @@ const emit = defineEmits<{
   (e: 'input', ev: Event): void
   (e: 'clearInput'): void
   (e: 'update:value', value: string): void
+  (e: 'keyup', ev: KeyboardEvent): void
+  (e: 'keyup.enter', ev: KeyboardEvent): void
 }>()
 
 const autoId = `fds-input-${Math.random().toString(36).slice(2, 9)}`
@@ -170,13 +172,10 @@ watch(
           :for="inputId"
           class="block font-bold text-gray-900 cursor-pointer"
           :class="{ 'mb-0': meta, 'mb-1': !meta }"
-          >{{ label }}</label
-        >
-        <div
-          v-if="meta"
-          class="font-thin"
-          :class="{ 'mb-1': !labelLeft }"
         >
+          {{ label }}
+        </label>
+        <div v-if="meta" class="font-thin" :class="{ 'mb-1': !labelLeft }">
           {{ meta }}
         </div>
       </div>
@@ -196,17 +195,16 @@ watch(
             :class="inputClasses"
             v-bind="$attrs"
             @input="$emit('input', $event)"
+            @keyup="
+              (ev) => {
+                $emit('keyup', ev)
+                if (ev.key === 'Enter') $emit('keyup.enter', ev)
+              }
+            "
           />
           <div :class="validationIconClasses">
-            <FdsIcon
-              v-if="isInvalid"
-              name="alert"
-              class="fill-red-600"
-            />
-            <FdsIcon
-              v-if="isValid"
-              name="bigSuccess"
-            />
+            <FdsIcon v-if="isInvalid" name="alert" class="fill-red-600" />
+            <FdsIcon v-if="isValid" name="bigSuccess" />
             <FdsButtonIcon
               v-if="clearButton && !!internalValue && !disabled"
               icon="cross"
@@ -223,10 +221,7 @@ watch(
         </div>
       </div>
     </div>
-    <div
-      v-if="showInvalidMessage"
-      class="text-red-600 font-bold mt-1"
-    >
+    <div v-if="showInvalidMessage" class="text-red-600 font-bold mt-1">
       {{ invalidMessage }}
     </div>
   </div>

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/FdsRadio.stories.ts

@@ -28,7 +28,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: NonNullable<Story['args']>) => ({
     components: { FdsRadio },
     setup() {
       const checked = ref(args.checked)

package/src/components/Form/FdsRadio/FdsRadio.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { computed, type Slot } from 'vue'
 import { useHasSlot } from '../../../composables/useHasSlots'
-import { computed } from 'vue'
 import type { FdsRadioProps } from './types'
 
 // Support v-model for selected value in a radio group (string|number)
@@ -51,15 +51,15 @@ const inputClasses = computed(() => [
   'peer z-2 bg-white min-w-[20px] min-h-[20px] focus-visible:outline-none rounded-full accent-blue-500',
   props.disabled && 'cursor-not-allowed',
 ])
+
+defineSlots<{
+  default?: Slot
+}>()
 </script>
 
 <template>
   <div :class="wrapperClasses">
-    <label
-      :for="inputId"
-      :class="[innerWrapperClasses, { 'cursor-not-allowed': disabled }]"
-      v-bind="$attrs"
-    >
+    <label :for="inputId" :class="[innerWrapperClasses, { 'cursor-not-allowed': disabled }]" v-bind="$attrs">
       <input
         :id="inputId"
         :name="name"

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/components/Form/FdsSelect/FdsSelect.stories.ts

@@ -37,7 +37,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsSelect },
     setup: () => ({ args }),
     template: `<FdsSelect v-bind="args" />`,
@@ -46,7 +46,7 @@ export const Default: Story = {
 
 export const Disabled: Story = {
   args: { disabled: true },
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsSelect },
     setup: () => ({ args }),
     template: `<FdsSelect v-bind="args" />`,
@@ -58,7 +58,7 @@ export const Invalid: Story = {
     valid: 'false',
     invalidMessage: 'Välj ett giltigt alternativ',
   },
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsSelect },
     setup: () => ({ args }),
     template: `<FdsSelect v-bind="args" />`,
@@ -70,7 +70,7 @@ export const Valid: Story = {
     valid: 'true',
     modelValue: 'option1',
   },
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsSelect },
     setup: () => ({ args }),
     template: `<FdsSelect v-bind="args" />`,

package/src/components/Form/FdsSelect/FdsSelect.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, useSlots } from 'vue'
+import { computed, useSlots, type Slot } from 'vue'
 import FdsIcon from '../../FdsIcon/FdsIcon.vue'
 import type { FdsSelectProps } from './types'
 
@@ -64,6 +64,10 @@ function handleChange(ev: Event) {
   emit('change', ev)
   emit('input', ev)
 }
+
+defineSlots<{
+  default?: Slot
+}>()
 </script>
 
 <template>

package/src/components/Form/FdsTextarea/FdsTextarea.stories.ts

@@ -35,7 +35,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTextarea },
     setup: () => ({ args }),
     template: `<FdsTextarea v-bind="args" />`,
@@ -44,7 +44,7 @@ export const Default: Story = {
 
 export const Disabled: Story = {
   args: { disabled: true },
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTextarea },
     setup: () => ({ args }),
     template: `<FdsTextarea v-bind="args" />`,