fds-vue-core 6.2.0 → 6.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fds-vue-core",
-  "version": "6.2.0",
+  "version": "6.2.2",
   "description": "FDS Vue Core Component Library",
   "type": "module",
   "bin": {
@@ -51,6 +51,29 @@
   "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",
+    "commit": "git-cz",
+    "commit:vuln": "node scripts/vuln-commit.mjs",
+    "vuln-commit": "node scripts/vuln-commit.mjs",
+    "cz:config": "node -e \"console.log(require('./scripts/cz/.cz-config.cjs'))\""
+  },
   "config": {
     "commitizen": {
       "path": "./scripts/cz/cz-adapter.cjs"
@@ -108,26 +131,20 @@
       "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",
-    "commit": "git-cz",
-    "commit:vuln": "node scripts/vuln-commit.mjs",
-    "vuln-commit": "node scripts/vuln-commit.mjs",
-    "cz:config": "node -e \"console.log(require('./scripts/cz/.cz-config.cjs'))\""
-  }
-}
+  "pnpm": {
+    "overrides": {
+      "minimatch": "^10.2.3",
+      "flatted": "^3.4.2",
+      "lodash": ">=4.18.0",
+      "tmp": "^0.2.4",
+      "follow-redirects@<=1.15.11": ">=1.16.0"
+    },
+    "onlyBuiltDependencies": [
+      "@parcel/watcher",
+      "core-js-pure",
+      "esbuild",
+      "vue-demi"
+    ]
+  },
+  "packageManager": "pnpm@10.17.1"
+}

package/src/components/FdsWeekCalendar/FdsWeekCalendar.vue

@@ -1,5 +1,15 @@
 <script setup lang="ts">
-import { addWeeks, format, getISOWeek, isSameDay, isSameWeek, startOfISOWeek, subWeeks } from 'date-fns'
+import {
+  addWeeks,
+  format,
+  getISODay,
+  getISOWeek,
+  isBefore,
+  isSameDay,
+  isSameWeek,
+  startOfISOWeek,
+  subWeeks,
+} from 'date-fns'
 import { computed, ref, watch } from 'vue'
 import FdsButtonIcon from '../Buttons/FdsButtonIcon/FdsButtonIcon.vue'
 import FdsSpinner from '../FdsSpinner/FdsSpinner.vue'
@@ -10,7 +20,6 @@ import {
   checkIfDateIsEnabled,
   getDaysInWeek,
   getDaysOfLastWeek,
-  getDaysOfNextWeek,
   getOverlappingMonths,
   getStartAndEndRangeFromWeek,
 } from './weekCalendar.utils'
@@ -21,7 +30,7 @@ const props = withDefaults(defineProps<FdsWeekCalendarProps>(), {
   disablePreviousWeek: false,
   disableNextWeek: false,
   enableHorizontalAnimation: true,
-  initialWeek: undefined,
+  minWeek: undefined,
   maxDate: undefined,
   previewOtherDays: false,
   selected: null,
@@ -35,12 +44,12 @@ const emit = defineEmits<{
   (e: 'increment-week'): void
 }>()
 
-const currentWeek = ref(props.initialWeek ?? startOfISOWeek(new Date()))
+const currentWeek = ref(props.minWeek ?? startOfISOWeek(new Date()))
 const selectedDay = ref<Date | null>(props.selected ?? null)
 const slideDirection = ref<'left' | 'right'>('left')
 
 const weekToRender = computed(() => getDaysInWeek(currentWeek.value))
-const nextWeek = computed(() => getDaysOfNextWeek(addWeeks(currentWeek.value, 1)))
+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)})`)
@@ -49,13 +58,13 @@ const lastDayOfPreviousWeek = computed(() => lastWeek.value[lastWeek.value.lengt
 const disableLastWeekInteraction = computed(
   () =>
     !!props.disablePreviousWeek ||
-    (!!lastDayOfPreviousWeek.value && checkIfDateIsBeforeToday(lastDayOfPreviousWeek.value)),
+    (!!lastDayOfPreviousWeek.value && checkIfDateIsBeforeToday(lastDayOfPreviousWeek.value)) ||
+    (!!props.minWeek && isBefore(subWeeks(currentWeek.value, 1), startOfISOWeek(props.minWeek))),
 )
 const disableNextWeekInteraction = computed(
   () =>
     !!props.disableNextWeek || (!!props.maxDate && isSameWeek(currentWeek.value, props.maxDate, { weekStartsOn: 1 })),
 )
-const trailingPreviewDay = computed(() => nextWeek.value[0])
 const transitionClasses = computed(() => {
   if (!props.enableHorizontalAnimation) {
     return {
@@ -85,7 +94,7 @@ const transitionClasses = computed(() => {
 })
 
 watch(
-  weekToRender,
+  visibleWeekDays,
   (week) => {
     const { endDate, startDate } = getStartAndEndRangeFromWeek(week)
     if (!startDate || !endDate) return
@@ -95,7 +104,7 @@ watch(
 )
 
 watch(
-  () => props.initialWeek,
+  () => props.minWeek,
   (newWeek) => {
     if (!newWeek) {
       currentWeek.value = startOfISOWeek(new Date())
@@ -174,7 +183,7 @@ const isTodayDate = (weekDay: Date) => isSameDay(weekDay, new Date())
           :leave-to-class="transitionClasses.leaveToClass"
         >
           <div :key="currentWeek.toISOString()" class="flex flex-row flex-nowrap items-center justify-start gap-x-px">
-            <template v-for="(weekDay, index) in weekToRender" :key="`current-${weekDay.toISOString()}-${index}`">
+            <template v-for="(weekDay, index) in visibleWeekDays" :key="`current-${weekDay.toISOString()}-${index}`">
               <WeekDay
                 :date="weekDay"
                 :disabled="isWeekDayDisabled(weekDay)"
@@ -183,14 +192,6 @@ const isTodayDate = (weekDay: Date) => isSameDay(weekDay, new Date())
                 @select-date="onHandleSelectedDay"
               />
             </template>
-            <WeekDay
-              v-if="trailingPreviewDay"
-              :date="trailingPreviewDay"
-              :disabled="isWeekDayDisabled(trailingPreviewDay)"
-              :selected="!!selectedDay && isSameDay(trailingPreviewDay, selectedDay)"
-              :is-today="isTodayDate(trailingPreviewDay)"
-              @select-date="onHandleSelectedDay"
-            />
           </div>
         </Transition>
       </div>

package/src/components/FdsWeekCalendar/WeekDay.vue

@@ -19,11 +19,11 @@ const props = withDefaults(
 )
 
 const emit = defineEmits<{
-  (e: 'select-date', date: Date): void
+  (e: 'select-date', date: Date | null): void
 }>()
 
 const classes = computed(() => [
-  'box-border flex h-[64px] w-[calc(100%/7.5)] shrink-0 flex-col items-center justify-center border-transparent px-1 py-1 transition-colors cursor-pointer',
+  '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',
   props.disabled ? '' : 'active:bg-blue_t-100 border-transparent',
   props.disabled ? '' : 'focus:outline-none',
@@ -43,7 +43,7 @@ const weekdayLabelClasses = computed(() => [
 
 const onClick = () => {
   if (props.disabled) return
-  emit('select-date', props.date)
+  emit('select-date', props.selected ? null : props.date)
 }
 
 const weekdayLabel = computed(() => {

package/src/components/FdsWeekCalendar/types.ts

@@ -16,7 +16,7 @@ export interface FdsWeekCalendarProps extends /* @vue-ignore */ HTMLAttributes {
   disablePreviousWeek?: boolean
   disableNextWeek?: boolean
   enableHorizontalAnimation?: boolean
-  initialWeek?: Date
+  minWeek?: Date
   maxDate?: Date
   previewOtherDays?: boolean
   selected?: Date | null
@@ -24,4 +24,5 @@ export interface FdsWeekCalendarProps extends /* @vue-ignore */ HTMLAttributes {
   onDecrementWeek?: () => void
   onIncrementWeek?: () => void
   onSelectDate?: (date: string | null) => void
+  onChangeDateRange?: (dateRange: WeekDateRange, week?: Date) => void
 }

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

@@ -42,8 +42,6 @@ export const getDaysInWeek = (weekStart: Date): Date[] => {
 
 export const getDaysOfLastWeek = (week: Date): Date[] => getDaysInWeek(week)
 
-export const getDaysOfNextWeek = (week: Date): Date[] => getDaysInWeek(week)
-
 export const getStartAndEndRangeFromWeek = (week: Date[]): Partial<WeekDateRange> => {
   const lastDay = week.at(-1)
   const firstDay = week.at(0)