fds-vue-core 8.3.2 → 8.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fds-vue-core",
-  "version": "8.3.2",
+  "version": "8.4.0",
   "description": "FDS Vue Core Component Library",
   "type": "module",
   "main": "./dist/fds-vue-core.cjs.js",
@@ -45,7 +45,8 @@
     }
   },
   "peerDependencies": {
-    "vue": "^3.5.25"
+    "vue": "^3.5.25",
+    "vue-router": "^4.0.0"
   },
   "dependencies": {
     "axios": "1.18.1",
@@ -68,6 +69,7 @@
     "@vitejs/plugin-vue": "6.0.8",
     "@vitest/browser": "3.2.7",
     "fg-devkit": "1.12.7",
+    "happy-dom": "^20.11.1",
     "storybook": "10.5.4",
     "tsx": "4.23.1",
     "vite": "7.3.5",
@@ -75,7 +77,8 @@
     "vite-plugin-vue-devtools": "8.2.1",
     "vitest": "4.1.10",
     "vue": "3.5.40",
-    "vue-i18n": "11.4.6"
+    "vue-i18n": "11.4.6",
+    "vue-router": "^4.6.3"
   },
   "knip": {
     "ignoreBinaries": [
@@ -102,6 +105,7 @@
     "yalc:publish": "pnpm build && yalc publish",
     "yalc:push": "pnpm build && yalc push",
     "serve:playground": "pnpm --dir playground-consumer dev",
-    "lint-check": "pnpm exec fgd lint ."
+    "lint-check": "pnpm exec fgd lint .",
+    "test:unit": "vitest run --project unit"
   }
 }

package/src/components/FdsDrawer/FdsDrawer.stories.ts

@@ -0,0 +1,155 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import FdsButtonPrimary from '../Buttons/FdsButtonPrimary/FdsButtonPrimary.vue'
+import FdsDrawer from './FdsDrawer.vue'
+
+const meta: Meta<typeof FdsDrawer> = {
+  title: 'FDS/FdsDrawer',
+  component: FdsDrawer,
+  tags: ['autodocs'],
+  argTypes: {
+    heading: { control: { type: 'text' } },
+    size: { control: { type: 'select' }, options: ['sm', 'md', 'lg', 'xl'] },
+    strict: { control: { type: 'boolean' } },
+    lockScroll: { control: { type: 'boolean' } },
+    info: { control: { type: 'select' }, options: ['valid', 'invalid', 'warning'] },
+    open: { control: { type: 'boolean' } },
+  },
+  args: {
+    heading: 'Drawer heading',
+    size: 'md',
+    strict: false,
+    lockScroll: false,
+    info: undefined,
+    open: false,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const createDrawerStory = (args: any) => {
+  const open = ref(args.open ?? false)
+  const handleClose = () => {
+    open.value = false
+  }
+  const handleOpen = () => {
+    open.value = true
+  }
+  return { args, open, handleClose, handleOpen }
+}
+
+const drawerTransform = (storyContext: {
+  args?: {
+    heading?: string
+    size?: string
+    open?: boolean
+    lockScroll?: boolean
+    info?: string
+    strict?: boolean
+  }
+}) => {
+  const args = storyContext?.args || {}
+  const attrs = []
+
+  if (args.heading) attrs.push(`heading="${args.heading}"`)
+  if (args.size && args.size !== 'md') attrs.push(`size="${args.size}"`)
+  if (args.open) attrs.push(':open="true"')
+  if (args.lockScroll) attrs.push('lockScroll')
+  if (args.info) attrs.push(`info="${args.info}"`)
+  if (args.strict) attrs.push('strict')
+  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
+
+  return `<FdsDrawer${attrsStr} @close="handleClose">
+  <p>This is the drawer content. You can add any content here.</p>
+</FdsDrawer>`
+}
+
+export const Default: Story = {
+  render: (args: Story['args']) => ({
+    components: { FdsDrawer, FdsButtonPrimary },
+    setup: () => createDrawerStory(args),
+    template: `
+      <div>
+        <FdsButtonPrimary text="Open Drawer" @click="handleOpen" />
+        <FdsDrawer v-bind="args" :open="open" @close="handleClose">
+          <p>This is the drawer content. You can add any content here.</p>
+        </FdsDrawer>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        transform: drawerTransform,
+      },
+    },
+  },
+}
+
+export const Strict: Story = {
+  render: (args: Story['args']) => ({
+    components: { FdsDrawer, FdsButtonPrimary },
+    setup: () => createDrawerStory(args),
+    template: `
+      <div>
+        <FdsButtonPrimary text="Open Drawer" @click="handleOpen" />
+        <FdsDrawer v-bind="args" :open="open" @close="handleClose">
+          <p>This is a strict drawer. You cannot close it by clicking the backdrop or pressing Escape.</p>
+          <p>Use lockScroll and programmatic close from your own actions when needed.</p>
+        </FdsDrawer>
+      </div>
+    `,
+  }),
+  args: {
+    strict: true,
+  },
+}
+
+export const LargeSize: Story = {
+  render: (args: Story['args']) => ({
+    components: { FdsDrawer, FdsButtonPrimary },
+    setup: () => createDrawerStory(args),
+    template: `
+      <div>
+        <FdsButtonPrimary text="Open Drawer" @click="handleOpen" />
+        <FdsDrawer v-bind="args" :open="open" @close="handleClose">
+          <p>This is a large drawer with more space for content.</p>
+          <p>You can add multiple paragraphs and other content here.</p>
+        </FdsDrawer>
+      </div>
+    `,
+  }),
+  args: {
+    size: 'xl',
+  },
+}
+
+export const LongContent: Story = {
+  render: (args: Story['args']) => ({
+    components: { FdsDrawer, FdsButtonPrimary },
+    setup: () => createDrawerStory(args),
+    template: `
+      <div>
+        <FdsButtonPrimary text="Open Drawer" @click="handleOpen" />
+        <FdsDrawer v-bind="args" :open="open" @close="handleClose">
+          <p>This is the first paragraph of content.</p>
+          <p>This is the second paragraph with more information about the topic at hand.</p>
+          <p>Here is a third paragraph that provides additional context and details.</p>
+          <p>And yet another paragraph to demonstrate the scrolling behavior.</p>
+          <p>This paragraph continues to show how the content flows in the drawer.</p>
+          <p>More content is added here to make the drawer longer and more scrollable.</p>
+          <p>Another paragraph to show the sticky close button in action.</p>
+          <p>This content should be long enough to require scrolling.</p>
+          <p>The header with the close button should remain sticky at the top as you scroll.</p>
+          <p>This is the final paragraph to complete the long content example.</p>
+        </FdsDrawer>
+      </div>
+    `,
+  }),
+  args: {
+    heading: 'Long Content Drawer',
+    size: 'md',
+    lockScroll: true,
+  },
+}

package/src/components/FdsDrawer/FdsDrawer.vue

@@ -0,0 +1,283 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch, type Slot } from 'vue'
+import { useFdsI18n } from '../../plugin/useFdsI18n'
+import FdsButtonIcon from '../Buttons/FdsButtonIcon/FdsButtonIcon.vue'
+import FdsIcon from '../FdsIcon/FdsIcon.vue'
+import type { FdsDrawerProps } from './types'
+
+const props = withDefaults(defineProps<FdsDrawerProps>(), {
+  open: false,
+  heading: '',
+  size: 'md',
+  strict: false,
+  lockScroll: false,
+  info: undefined,
+  dataTestid: undefined,
+})
+
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'update:open', value: boolean): void
+}>()
+
+const isOpen = ref(props.open)
+let cleanupFocusTrap: (() => void) | null = null
+const previouslyFocusedElement = ref<HTMLElement | null>(null)
+
+const { t } = useFdsI18n()
+
+const drawerOuterClasses = computed(() => ['fixed top-0 left-0 w-full h-full z-100'])
+
+const drawerInnerClasses = computed(() => [
+  'bg-white shadow-lg z-[99999] overflow-hidden flex flex-col',
+  // Mobile: bottom sheet
+  'fixed bottom-0 left-0 right-0 max-h-[90vh] rounded-t-lg',
+  // Desktop: right panel
+  'md:top-0 md:right-0 md:bottom-auto md:left-auto md:h-full md:max-h-none md:rounded-none md:w-full',
+  {
+    'md:max-w-[320px]': props.size === 'sm',
+    'md:max-w-[400px]': props.size === 'md',
+    'md:max-w-[480px]': props.size === 'lg',
+    'md:max-w-[588px]': props.size === 'xl',
+  },
+])
+
+const headerClasses = computed(() => ['shrink-0 flex justify-between bg-white p-6', 'rounded-t-lg md:rounded-none'])
+
+const contentClasses = computed(() => ['flex-1 min-h-0 overflow-auto px-6 pb-6 mb-0-last-child'])
+
+const headerTitleClasses = computed(() => ['m-0'])
+
+const iconName = computed(() => {
+  if (props.info === 'valid') return 'check'
+  if (props.info === 'invalid' || props.info === 'warning') return 'alert'
+  return null
+})
+
+const iconClasses = computed(() => [
+  {
+    'fill-green-600': props.info === 'valid',
+    'fill-red-600': props.info === 'invalid',
+    'fill-yellow-600': props.info === 'warning',
+  },
+])
+
+const closeLabel = computed(() => t('FdsDrawer.closeDrawer'))
+
+const setHtmlOverflow = (value: 'auto' | 'hidden') => {
+  if (typeof document === 'undefined') return
+  const htmlEl = document.documentElement
+  if (htmlEl) {
+    htmlEl.style.overflow = value
+  }
+}
+
+const handleBackdropClick = () => {
+  handleClose()
+}
+
+const restoreFocus = () => {
+  if (previouslyFocusedElement.value) {
+    previouslyFocusedElement.value.focus()
+    previouslyFocusedElement.value = null
+  }
+}
+
+const handleClose = () => {
+  if (props.strict) {
+    return
+  }
+  isOpen.value = false
+  setHtmlOverflow('auto')
+
+  emit('close')
+  emit('update:open', false)
+}
+
+const handleKeyDown = (e: KeyboardEvent) => {
+  if (isOpen.value && e.code === 'Escape') {
+    handleClose()
+  }
+}
+
+const getTabList = (drawer: Element) =>
+  drawer.querySelectorAll(
+    'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])',
+  )
+
+const trapFocus = () => {
+  if (!isOpen.value) return
+
+  nextTick(() => {
+    const drawer = document.querySelector('.fds-drawer-inner')
+    if (!drawer) return
+
+    const tabList = getTabList(drawer)
+
+    if (tabList.length > 0) {
+      ;(tabList[0] as HTMLElement).focus()
+    }
+
+    const handleTabKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab') return
+
+      const currentTabList = getTabList(drawer)
+      if (currentTabList.length === 0) return
+
+      const firstFocusableEl = currentTabList[0] as HTMLElement
+      const lastFocusableEl = currentTabList[currentTabList.length - 1] as HTMLElement
+      const isTabOrderReversed = e.shiftKey
+
+      if (isTabOrderReversed && document.activeElement === firstFocusableEl) {
+        lastFocusableEl.focus()
+        e.preventDefault()
+      } else if (!isTabOrderReversed && document.activeElement === lastFocusableEl) {
+        firstFocusableEl.focus()
+        e.preventDefault()
+      }
+    }
+
+    drawer.addEventListener('keydown', handleTabKey as EventListener, true)
+
+    cleanupFocusTrap = () => {
+      drawer.removeEventListener('keydown', handleTabKey as EventListener, true)
+    }
+  })
+}
+
+watch(
+  () => props.open,
+  (newValue) => {
+    isOpen.value = newValue
+    if (newValue) {
+      previouslyFocusedElement.value = document.activeElement as HTMLElement
+      if (props.lockScroll) {
+        setHtmlOverflow('hidden')
+      }
+      trapFocus()
+    } else {
+      setHtmlOverflow('auto')
+      if (cleanupFocusTrap) {
+        cleanupFocusTrap()
+        cleanupFocusTrap = null
+      }
+    }
+  },
+)
+
+onMounted(() => {
+  document.addEventListener('keydown', handleKeyDown, true)
+
+  if (props.open) {
+    previouslyFocusedElement.value = document.activeElement as HTMLElement
+
+    if (props.lockScroll) {
+      setHtmlOverflow('hidden')
+    }
+    trapFocus()
+  }
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', handleKeyDown, true)
+  setHtmlOverflow('auto')
+  if (cleanupFocusTrap) {
+    cleanupFocusTrap()
+  }
+})
+
+const drawerAttrs = computed(() => {
+  const attrs: Record<string, string> = {}
+  if (props.dataTestid) {
+    attrs['data-testid'] = props.dataTestid
+  }
+  return attrs
+})
+
+defineSlots<{
+  default?: Slot
+}>()
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="fds-drawer" :duration="{ enter: 280, leave: 180 }" @after-leave="restoreFocus">
+      <div v-if="isOpen" @click="handleBackdropClick" :class="drawerOuterClasses">
+        <!-- Backdrop -->
+        <div class="fds-drawer-backdrop fixed top-0 left-0 w-full h-full bg-black/34 z-99"></div>
+
+        <!-- Drawer Inner -->
+        <div
+          class="fds-drawer-inner"
+          :class="drawerInnerClasses"
+          role="dialog"
+          aria-modal="true"
+          v-bind="drawerAttrs"
+          @click.stop
+        >
+          <div :class="headerClasses">
+            <div class="flex items-center gap-2 min-w-0">
+              <FdsIcon v-if="iconName" :name="iconName" :size="24" :class="iconClasses" />
+              <h3 tabindex="-1" :class="headerTitleClasses">
+                {{ heading }}
+              </h3>
+            </div>
+            <div>
+              <FdsButtonIcon
+                v-if="!strict"
+                icon="cross"
+                :size="28"
+                @click="handleClose()"
+                v-bind="{ 'aria-label': closeLabel }"
+                class="ml-4 shrink-0"
+              />
+            </div>
+          </div>
+
+          <!-- Content -->
+          <div :class="contentClasses">
+            <slot />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+/* Slide + fade — mobile: bottom sheet, desktop (md+): right panel */
+.fds-drawer-enter-active .fds-drawer-inner,
+.fds-drawer-leave-active .fds-drawer-inner {
+  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.fds-drawer-leave-active .fds-drawer-inner {
+  transition-duration: 180ms;
+}
+
+.fds-drawer-enter-from .fds-drawer-inner,
+.fds-drawer-leave-to .fds-drawer-inner {
+  transform: translateY(100%);
+}
+
+.fds-drawer-enter-active .fds-drawer-backdrop,
+.fds-drawer-leave-active .fds-drawer-backdrop {
+  transition: opacity 280ms ease;
+}
+
+.fds-drawer-leave-active .fds-drawer-backdrop {
+  transition-duration: 180ms;
+}
+
+.fds-drawer-enter-from .fds-drawer-backdrop,
+.fds-drawer-leave-to .fds-drawer-backdrop {
+  opacity: 0;
+}
+
+@media (min-width: 768px) {
+  .fds-drawer-enter-from .fds-drawer-inner,
+  .fds-drawer-leave-to .fds-drawer-inner {
+    transform: translateX(100%);
+  }
+}
+</style>

package/src/components/FdsDrawer/types.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from 'vue'
+
+export interface FdsDrawerProps extends /* @vue-ignore */ HTMLAttributes {
+  open?: boolean
+  heading?: string
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  strict?: boolean
+  lockScroll?: boolean
+  info?: 'valid' | 'invalid' | 'warning'
+  dataTestid?: string
+  onClose?: (value: boolean) => void
+}

package/src/composables/useRouteFilters.spec.ts

@@ -0,0 +1,157 @@
+import { describe, expect, it, vi } from 'vitest'
+import { createApp, nextTick } from 'vue'
+import { createMemoryHistory, createRouter, type RouteRecordRaw } from 'vue-router'
+import { useRouteFilters, type UseRouteFiltersReturn, type UseRouteFiltersSchema } from './useRouteFilters'
+
+const routes: RouteRecordRaw[] = [{ path: '/', component: { template: '<div />' } }]
+
+const flushPromises = () => new Promise<void>((resolve) => setTimeout(resolve, 0))
+
+type TestSchema = UseRouteFiltersSchema<
+  { status: string[]; active: boolean; count: number },
+  { status: string[]; active: boolean }
+>
+
+const mountWithRoute = async (initialQuery: Record<string, string | string[]> = {}, schema?: Partial<TestSchema>) => {
+  const router = createRouter({ history: createMemoryHistory(), routes })
+  await router.push({ path: '/', query: initialQuery })
+  await router.isReady()
+
+  const replaceSpy = vi.spyOn(router, 'replace')
+  let composable!: UseRouteFiltersReturn<
+    { status: string[]; active: boolean; count: number },
+    { status: string[]; active: boolean }
+  >
+
+  const resolvedSchema: TestSchema = {
+    filter: { status: [] as string[], active: false as boolean, count: 0 },
+    draft: { status: [] as string[], active: false as boolean },
+    sort: {},
+    search: '',
+    page: 0,
+    ...schema,
+  }
+
+  const app = createApp({
+    setup() {
+      composable = useRouteFilters(resolvedSchema)
+      return () => null
+    },
+  })
+
+  app.use(router)
+  app.mount(document.createElement('div'))
+  await nextTick()
+
+  return { composable, router, replaceSpy, app }
+}
+
+describe('useRouteFilters', () => {
+  it('initializes filter from route query with typed defaults', async () => {
+    const { composable, app } = await mountWithRoute({
+      status: ['open', 'closed'],
+      active: 'true',
+      count: '3',
+    })
+
+    expect(composable.filter.status).toEqual(['open', 'closed'])
+    expect(composable.filter.active).toBe(true)
+    expect(composable.filter.count).toBe(3)
+
+    app.unmount()
+  })
+
+  it('syncs filter to route and back without looping', async () => {
+    const { composable, router, replaceSpy, app } = await mountWithRoute({ active: 'true' })
+
+    replaceSpy.mockClear()
+    composable.filter.active = true
+    await nextTick()
+    await flushPromises()
+    expect(replaceSpy).not.toHaveBeenCalled()
+
+    composable.filter.status = ['open']
+    await nextTick()
+    await flushPromises()
+    expect(router.currentRoute.value.query).toMatchObject({
+      status: ['open'],
+      active: 'true',
+    })
+
+    await router.replace({ query: { status: ['new'], active: 'false' } })
+    await nextTick()
+    expect(composable.filter.status).toEqual(['new'])
+    expect(composable.filter.active).toBe(false)
+
+    app.unmount()
+  })
+
+  it('reset keeps unrelated query params and clear removes managed ones', async () => {
+    const { composable, router, app } = await mountWithRoute({
+      tab: 'details',
+      active: 'true',
+      _search: 'foo',
+      _page: '5',
+    })
+
+    await composable.reset()
+    await flushPromises()
+    expect(composable.filter.active).toBe(false)
+    expect(composable.search.value).toBe('')
+    expect(composable.page.value).toBe(0)
+    expect(router.currentRoute.value.query).toEqual({ tab: 'details' })
+
+    composable.filter.active = true
+    composable.search.value = 'bar'
+    await nextTick()
+    await flushPromises()
+
+    await composable.clear()
+    await flushPromises()
+    expect(router.currentRoute.value.query).toEqual({})
+
+    app.unmount()
+  })
+
+  it('draft apply and cancel keep URL in sync only after apply', async () => {
+    const { composable, router, app } = await mountWithRoute({ status: ['active'] })
+
+    composable.draft.open()
+    composable.draft.state.status = ['changed']
+    await nextTick()
+    await flushPromises()
+    expect(router.currentRoute.value.query.status).toEqual(['active'])
+    expect(composable.filter.status).toEqual(['active'])
+
+    composable.draft.cancel()
+    expect(composable.draft.state.status).toEqual(['active'])
+
+    composable.draft.state.status = ['applied']
+    composable.draft.apply()
+    await nextTick()
+    await flushPromises()
+    expect(composable.filter.status).toEqual(['applied'])
+    expect(router.currentRoute.value.query.status).toEqual(['applied'])
+
+    app.unmount()
+  })
+
+  it('sort toggle cycles none → desc → asc → none', async () => {
+    const { composable, app } = await mountWithRoute()
+
+    composable.sort.toggle('name')
+    expect(composable.sort.value).toBe('-name')
+
+    composable.sort.toggle('name')
+    expect(composable.sort.value).toBe('+name')
+
+    composable.sort.toggle('name')
+    expect(composable.sort.value).toBe('')
+
+    composable.sort.toggle('created')
+    composable.sort.toggle('name')
+    expect(composable.sort.value).toBe('-name')
+
+    app.unmount()
+  })
+})