fds-vue-core 2.1.11 → 2.1.16

package/src/components/FdsSticker/FdsSticker.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, type Slot } from 'vue'
 import type { FdsStickerProps } from './types'
 
 const props = withDefaults(defineProps<FdsStickerProps>(), {
   variant: 'blue',
   bullet: false,
+  ariaLive: undefined,
 })
 
 const stickerClasses = computed(() => [
@@ -31,14 +32,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 :class="stickerClasses" :aria-live="ariaLive">
+    <span v-if="bullet" :class="bulletDotClasses"></span>
     <slot />
   </span>
 </template>

package/src/components/FdsSticker/types.ts

@@ -1,4 +1,5 @@
 export interface FdsStickerProps {
   variant?: 'blue' | 'green' | 'red' | 'yellow' | 'gray' | 't_blue'
   bullet?: boolean
+  ariaLive?: 'polite' | 'assertive' | 'off'
 }

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/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/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/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,8 +1,14 @@
 <script setup lang="ts">
+import { computed, useAttrs, type Slot } from 'vue'
 import { useHasSlot } from '../../../composables/useHasSlots'
-import { computed } from 'vue'
 import type { FdsRadioProps } from './types'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
+const attrs = useAttrs()
+
 // Support v-model for selected value in a radio group (string|number)
 const modelValue = defineModel<string | number>({ default: undefined, required: false })
 
@@ -14,6 +20,7 @@ const props = withDefaults(defineProps<FdsRadioProps>(), {
   name: undefined,
   id: undefined,
   required: false,
+  dataTestid: undefined,
 })
 
 const emit = defineEmits<{
@@ -51,16 +58,22 @@ 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',
 ])
+
+const inputAttrs = computed(() => ({
+  ...attrs,
+  'data-testid': props.dataTestid ?? (attrs['data-testid'] as string | undefined),
+}))
+
+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 }]">
       <input
+        v-bind="inputAttrs"
         :id="inputId"
         :name="name"
         :value="value"

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

@@ -10,4 +10,6 @@ export interface FdsRadioProps {
   onKeydown?: ((event: KeyboardEvent) => void) | Array<(event: KeyboardEvent) => void>
   onBlur?: ((event: FocusEvent) => void) | Array<(event: FocusEvent) => void>
   onChange?: ((event: Event) => void) | Array<(event: Event) => void>
+  onInput?: ((event: Event) => void) | Array<(event: Event) => void>
+  dataTestid?: string
 }

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" />`,

package/src/components/Table/FdsTable/FdsTable.stories.ts

@@ -56,7 +56,7 @@ const sampleData = [
 ]
 
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTable, FdsTableHead },
     setup: () => ({ args, sampleData }),
     template: `
@@ -93,7 +93,7 @@ export const Default: Story = {
 
 export const Bordered: Story = {
   args: { bordered: true },
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTable, FdsTableHead },
     setup: () => ({ args, sampleData }),
     template: `
@@ -130,7 +130,7 @@ export const Bordered: Story = {
 
 export const Compact: Story = {
   args: { compact: true },
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTable, FdsTableHead },
     setup: () => ({ args, sampleData }),
     template: `

package/src/components/Table/FdsTableHead/FdsTableHead.stories.ts

@@ -21,7 +21,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTableHead },
     setup: () => ({ args }),
     template: `
@@ -42,7 +42,7 @@ export const Default: Story = {
 }
 
 export const Sortable: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTableHead },
     setup: () => ({ args }),
     template: `
@@ -64,7 +64,7 @@ export const Sortable: Story = {
 
 export const SortedAsc: Story = {
   args: { icon: 'ascending' },
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTableHead },
     setup: () => ({ args }),
     template: `
@@ -86,7 +86,7 @@ export const SortedAsc: Story = {
 
 export const SortedDesc: Story = {
   args: { icon: 'descending' },
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTableHead },
     setup: () => ({ args }),
     template: `
@@ -108,7 +108,7 @@ export const SortedDesc: Story = {
 
 export const CenterAligned: Story = {
   args: { align: 'center' },
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTableHead },
     setup: () => ({ args }),
     template: `
@@ -130,7 +130,7 @@ export const CenterAligned: Story = {
 
 export const RightAligned: Story = {
   args: { align: 'right' },
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTableHead },
     setup: () => ({ args }),
     template: `

package/src/components/Table/FdsTableHead/FdsTableHead.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 FdsIcon from '../../FdsIcon/FdsIcon.vue'
 import type { FdsTableHeadProps } from './types'
 
@@ -25,28 +25,22 @@ const iconName = computed(() => props.icon)
 
 defineEmits<{
   (e: 'sort'): void
+  (e: 'click', ev: MouseEvent): void
+}>()
+
+defineSlots<{
+  default?: Slot
 }>()
 </script>
 
 <template>
   <th class="fds-table-head">
-    <button
-      v-if="iconName"
-      :class="headerClasses"
-      @click="$emit('sort')"
-    >
+    <button v-if="iconName" :class="headerClasses" @click="$emit('sort')">
       <span v-if="hasSlot"><slot /></span>
       <span v-else>{{ heading }}</span>
-      <FdsIcon
-        :name="iconName"
-        size="24px"
-        class="fill-blue-500"
-      />
+      <FdsIcon :name="iconName" size="24px" class="fill-blue-500" />
     </button>
-    <div
-      v-else
-      :class="headerClasses"
-    >
+    <div v-else :class="headerClasses">
       <span v-if="hasSlot"><slot /></span>
       <span v-else>{{ heading }}</span>
     </div>

package/src/components/Table/FdsTableHead/types.ts

@@ -2,4 +2,5 @@ export interface FdsTableHeadProps {
   heading?: string
   align?: 'left' | 'center' | 'right'
   icon?: 'sort' | 'ascending' | 'descending'
+  onClick?: () => void
 }

package/src/components/Tabs/FdsTabs/FdsTabs.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import FdsTabs from './FdsTabs.vue'
 import FdsTabsItem from '../FdsTabsItem/FdsTabsItem.vue'
+import FdsTabs from './FdsTabs.vue'
 
 const meta: Meta<typeof FdsTabs> = {
   title: 'FDS/FdsTabs',
@@ -33,7 +33,7 @@ const tabsTransform = (storyContext: { args?: { block?: boolean; variant?: strin
 }
 
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTabs, FdsTabsItem },
     setup: () => ({ args }),
     template: `
@@ -54,7 +54,7 @@ export const Default: Story = {
 }
 
 export const Secondary: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTabs, FdsTabsItem },
     setup: () => ({ args }),
     template: `
@@ -84,7 +84,7 @@ export const Secondary: Story = {
 }
 
 export const Block: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTabs, FdsTabsItem },
     setup: () => ({ args }),
     template: `
@@ -114,7 +114,7 @@ export const Block: Story = {
 }
 
 export const WithDisabled: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTabs, FdsTabsItem },
     setup: () => ({ args }),
     template: `
@@ -139,7 +139,7 @@ export const WithDisabled: Story = {
 }
 
 export const WithRouterLinks: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTabs, FdsTabsItem },
     setup: () => ({ args }),
     template: `
@@ -166,7 +166,7 @@ export const WithRouterLinks: Story = {
 }
 
 export const WithExactMatch: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTabs, FdsTabsItem },
     setup: () => ({ args }),
     template: `
@@ -193,7 +193,7 @@ export const WithExactMatch: Story = {
 }
 
 export const WithAnchorLinks: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTabs, FdsTabsItem },
     setup: () => ({ args }),
     template: `
@@ -220,7 +220,7 @@ export const WithAnchorLinks: Story = {
 }
 
 export const WithButtons: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTabs, FdsTabsItem },
     setup: () => ({ args }),
     template: `

package/src/components/Tabs/FdsTabs/FdsTabs.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, provide } from 'vue'
+import { computed, provide, type Slot } from 'vue'
 import type { FdsTabsProps } from './types'
 
 const props = withDefaults(defineProps<FdsTabsProps>(), {
@@ -18,6 +18,10 @@ const tabsClasses = computed(() => [
 
 provide('tabsVariant', props.variant)
 provide('tabsBlock', props.block)
+
+defineSlots<{
+  default?: Slot
+}>()
 </script>
 
 <template>