fds-vue-core 6.2.8 → 6.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fds-vue-core",
-  "version": "6.2.8",
+  "version": "6.2.11",
   "description": "FDS Vue Core Component Library",
   "type": "module",
   "main": "./dist/fds-vue-core.cjs.js",
@@ -64,9 +64,11 @@
     "@types/node": "22.16.5",
     "@vitejs/plugin-vue": "6.0.6",
     "@vitest/browser": "3.2.4",
+    "dotenv": "^17.4.2",
     "eslint-plugin-storybook": "10.1.10",
-    "fg-devkit": "1.6.1",
+    "fg-devkit": "1.6.8",
     "storybook": "10.2.12",
+    "tsx": "^4.21.0",
     "vite": "7.3.2",
     "vite-plugin-dts": "4.5.4",
     "vite-plugin-vue-devtools": "8.1.1",

package/src/components/FdsWeekCalendar/FdsWeekCalendar.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { addWeeks, getISODay, getISOWeek, isBefore, isSameDay, isSameWeek, startOfISOWeek, subWeeks } from 'date-fns'
 import { computed, ref, watch } from 'vue'
+import { useFdsI18n } from '../../plugin/useFdsI18n'
+
 import FdsButtonIcon from '../Buttons/FdsButtonIcon/FdsButtonIcon.vue'
 import FdsSpinner from '../FdsSpinner/FdsSpinner.vue'
-import WeekDay from './WeekDay.vue'
 import type { FdsWeekCalendarProps, WeekDateRange } from './types'
 import {
   checkIfDateIsBeforeToday,
@@ -13,6 +14,7 @@ import {
   getOverlappingMonths,
   getStartAndEndRangeFromWeek,
 } from './weekCalendar.utils'
+import WeekDay from './WeekDay.vue'
 
 const props = withDefaults(defineProps<FdsWeekCalendarProps>(), {
   loading: undefined,
@@ -34,6 +36,8 @@ const emit = defineEmits<{
   (e: 'increment-week'): void
 }>()
 
+const { locale, t } = useFdsI18n()
+
 const currentWeek = ref(props.minWeek ?? startOfISOWeek(new Date()))
 const selectedDay = ref<Date | null>(props.selected ?? null)
 const slideDirection = ref<'left' | 'right'>('left')
@@ -42,7 +46,10 @@ const weekToRender = computed(() => getDaysInWeek(currentWeek.value))
 const visibleWeekDays = computed(() => weekToRender.value.filter((day) => getISODay(day) <= 5))
 const lastWeek = computed(() => getDaysOfLastWeek(subWeeks(currentWeek.value, 1)))
 
-const weekText = computed(() => `${getOverlappingMonths(currentWeek.value)} (vecka ${getISOWeek(currentWeek.value)})`)
+const weekText = computed(
+  () =>
+    `${getOverlappingMonths(currentWeek.value, locale.value)} (${t('FdsWeekCalendar.week')} ${getISOWeek(currentWeek.value)})`,
+)
 
 const lastDayOfPreviousWeek = computed(() => lastWeek.value[lastWeek.value.length - 1])
 const disableLastWeekInteraction = computed(
@@ -173,13 +180,13 @@ const isTodayDate = (weekDay: Date) => isSameDay(weekDay, new Date())
           <FdsButtonIcon
             icon="arrowLeft"
             :disabled="disableLastWeekInteraction"
-            aria-label="Previous week"
+            :aria-label="t('FdsWeekCalendar.previousWeek')"
             @click="decrementWeek"
           />
           <FdsButtonIcon
             icon="arrowRight"
             :disabled="disableNextWeekInteraction"
-            aria-label="Next week"
+            :aria-label="t('FdsWeekCalendar.nextWeek')"
             @click="incrementWeek"
           />
         </div>

package/src/components/FdsWeekCalendar/WeekDay.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { format } from 'date-fns'
-import { sv } from 'date-fns/locale'
 import { computed } from 'vue'
+import { useFdsI18n } from '../../plugin/useFdsI18n'
 import FdsMeta from '../Typography/FdsMeta/FdsMeta.vue'
 
 const props = withDefaults(
@@ -22,6 +22,8 @@ const emit = defineEmits<{
   (e: 'select-date', date: Date | null): void
 }>()
 
+const { locale, t } = useFdsI18n()
+
 const classes = computed(() => [
   'box-border flex h-[64px] w-full max-w-[100px] flex-1 basis-0 flex-col items-center justify-center border-2 border-transparent px-1 py-1 transition-colors cursor-pointer',
   props.disabled ? '' : 'hover:border-2 hover:border-blue-500 border-solid',
@@ -47,7 +49,7 @@ const onClick = () => {
 }
 
 const weekdayLabel = computed(() => {
-  const value = format(props.date, 'EEE', { locale: sv })
+  const value = new Intl.DateTimeFormat(locale.value, { weekday: 'short' }).format(props.date)
   return value.charAt(0).toUpperCase() + value.slice(1).replace('.', '')
 })
 </script>
@@ -56,7 +58,7 @@ const weekdayLabel = computed(() => {
   <button type="button" :class="classes" :disabled="disabled" @click="onClick">
     <span :class="dayNumberClasses">{{ format(date, 'd') }}</span>
     <span :class="weekdayLabelClasses">
-      <FdsMeta v-if="isToday">Idag</FdsMeta>
+      <FdsMeta v-if="isToday">{{ t('FdsWeekCalendar.today') }}</FdsMeta>
       <FdsMeta v-else>{{ weekdayLabel }}</FdsMeta>
     </span>
   </button>

package/src/components/FdsWeekCalendar/weekCalendar.utils.ts

@@ -1,14 +1,4 @@
-import {
-  addDays,
-  format,
-  isAfter,
-  isSameDay,
-  isSameMonth,
-  startOfDay,
-  startOfISOWeek,
-  subDays,
-} from 'date-fns'
-import { sv } from 'date-fns/locale'
+import { addDays, format, isAfter, isSameDay, isSameMonth, startOfDay, startOfISOWeek, subDays } from 'date-fns'
 import type { WeekDateRange } from './types'
 
 const capitalizeFirstLetter = (value: string): string => {
@@ -16,17 +6,19 @@ const capitalizeFirstLetter = (value: string): string => {
   return value.charAt(0).toUpperCase() + value.slice(1)
 }
 
-export const getOverlappingMonths = (week: Date): string => {
+export const getOverlappingMonths = (week: Date, locale = 'sv-SE'): string => {
   const startDayMonth = startOfISOWeek(week)
   const endDayMonth = addDays(startDayMonth, 6)
+  const shortMonthFormatter = new Intl.DateTimeFormat(locale, { month: 'short' })
+  const longMonthFormatter = new Intl.DateTimeFormat(locale, { month: 'long' })
 
   if (!isSameMonth(startDayMonth, endDayMonth)) {
-    return `${capitalizeFirstLetter(format(startDayMonth, 'MMM', { locale: sv }).replace('.', ''))} - ${capitalizeFirstLetter(
-      format(endDayMonth, 'MMM', { locale: sv }).replace('.', ''),
+    return `${capitalizeFirstLetter(shortMonthFormatter.format(startDayMonth).replace('.', ''))} - ${capitalizeFirstLetter(
+      shortMonthFormatter.format(endDayMonth).replace('.', ''),
     )}`
   }
 
-  return capitalizeFirstLetter(format(startOfISOWeek(week), 'MMMM', { locale: sv }))
+  return capitalizeFirstLetter(longMonthFormatter.format(startOfISOWeek(week)))
 }
 
 export const getDaysInWeek = (weekStart: Date): Date[] => {

package/src/components/FdsWizard/FdsWizard.vue

@@ -12,6 +12,7 @@ const props = withDefaults(defineProps<FdsWizardProps>(), {
   disableStepJump: false,
   activeRouteName: undefined,
   dataTestid: undefined,
+  wizardClass: 'max-w-[480px]',
 })
 
 const emit = defineEmits<{
@@ -457,7 +458,7 @@ defineSlots<{
 
 <template>
   <div v-bind="rootAttrs">
-    <nav class="max-w-[480px] mx-auto">
+    <nav :class="wizardClass" class="mx-auto">
       <header class="mb-6">
         <h1 ref="mainHeader" tabindex="-1">
           {{ mainHeading }}

package/src/components/FdsWizard/types.ts

@@ -38,5 +38,6 @@ export interface FdsWizardProps<
   disableStepJump?: boolean
   activeRouteName?: string
   dataTestid?: string
+  wizardClass?: string
   onGo?: ((payload: FdsWizardGoPayload) => void) | Array<(payload: FdsWizardGoPayload) => void>
 }

package/src/index.ts

@@ -65,6 +65,7 @@ import { useRouteScrollPositions } from './composables/useRouteScrollPositions'
 import { useViewportBreakpoint } from './composables/useViewportBreakpoint'
 import { capitalizeFirstLetter } from './helpers/capitalizeFirstLetter'
 import { useFileSizeValidation, useFileValidation } from './helpers/fileValidation'
+import { FDS_VUE_CORE_I18N_KEY, type FdsI18nLike } from './plugin/i18n'
 
 // Export individual components
 export {
@@ -137,9 +138,19 @@ export {
 // Export logos
 export * from './assets/logos'
 
+export interface FdsVueCorePluginOptions {
+  i18n?: FdsI18nLike
+}
+
+export { FDS_VUE_CORE_I18N_KEY } from './plugin/i18n'
+
 // Export component library plugin
 const FdsVueCorePlugin: Plugin = {
-  install(app: App) {
+  install(app: App, options?: FdsVueCorePluginOptions) {
+    if (options?.i18n) {
+      app.provide(FDS_VUE_CORE_I18N_KEY, options.i18n)
+    }
+
     // Register all components globally
     app.component('FdsTreeView', FdsTreeView)
     // Register button variants with direct names

package/src/lang/en.json

@@ -0,0 +1,6 @@
+{
+  "FdsWeekCalendar.nextWeek": "Next week",
+  "FdsWeekCalendar.previousWeek": "Previous week",
+  "FdsWeekCalendar.today": "Today",
+  "FdsWeekCalendar.week": "week"
+}

package/src/lang/sv.json

@@ -0,0 +1,6 @@
+{
+  "FdsWeekCalendar.nextWeek": "Nästa vecka",
+  "FdsWeekCalendar.previousWeek": "Föregående vecka",
+  "FdsWeekCalendar.today": "Idag",
+  "FdsWeekCalendar.week": "vecka"
+}

package/src/plugin/i18n.ts

@@ -0,0 +1,15 @@
+import type { InjectionKey } from 'vue'
+
+export type FdsI18nTranslate = (key: string, ...args: unknown[]) => unknown
+type FdsI18nLocale = string | { value: string }
+
+export interface FdsI18nLike {
+  t?: FdsI18nTranslate
+  locale?: FdsI18nLocale
+  global?: {
+    t?: FdsI18nTranslate
+    locale?: FdsI18nLocale
+  }
+}
+
+export const FDS_VUE_CORE_I18N_KEY: InjectionKey<FdsI18nLike | undefined> = Symbol('fds-vue-core:i18n')

package/src/plugin/useFdsI18n.ts

@@ -0,0 +1,40 @@
+import { computed, inject } from 'vue'
+import en from '../lang/en.json'
+import sv from '../lang/sv.json'
+import { FDS_VUE_CORE_I18N_KEY, type FdsI18nLike } from './i18n'
+
+const translations = {
+  en,
+  sv,
+} as const
+type FdsDictionary = Record<string, string>
+
+export const useFdsI18n = () => {
+  const i18n = inject<FdsI18nLike | undefined>(FDS_VUE_CORE_I18N_KEY, undefined)
+
+  const locale = computed(() => {
+    const locale = i18n?.global?.locale ?? i18n?.locale
+    if (typeof locale === 'string') return locale
+    if (locale && typeof locale === 'object' && 'value' in locale && typeof locale.value === 'string') {
+      return locale.value
+    }
+    return 'sv-SE'
+  })
+
+  const activeLanguage = computed(() => locale.value.toLowerCase().split('-')[0])
+  const dictionary = computed<FdsDictionary>(() => {
+    const currentDictionary = translations[activeLanguage.value as keyof typeof translations]
+    return (currentDictionary ?? translations.sv) as FdsDictionary
+  })
+
+  const t = (key: string): string => {
+    const value = dictionary.value[key]
+    return typeof value === 'string' ? value : ''
+  }
+
+  return {
+    i18n,
+    locale,
+    t,
+  }
+}