fds-vue-core 2.1.4 → 2.1.6

package/src/components/FdsSearchSelect/FdsSearchSelect.vue

@@ -0,0 +1,621 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useBoldQuery } from '@/composables/useBoldQuery'
+import { isPidString, useIsPid } from '@/composables/useIsPid'
+import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
+import FdsPagination from '@/components/FdsPagination/FdsPagination.vue'
+import FdsSpinner from '@/components/FdsSpinner/FdsSpinner.vue'
+import FdsInput from '@/components/Form/FdsInput/FdsInput.vue'
+import type { FdsSearchSelectProps } from './types'
+
+const props = withDefaults(defineProps<FdsSearchSelectProps>(), {
+  items: () => [],
+  page: undefined,
+  totalPages: undefined,
+  totalCount: undefined,
+  loading: false,
+  searchFields: () => [],
+  preserveOrder: false,
+  initialValue: '',
+  disabled: false,
+  dropdownAbsolute: false,
+  labelLeft: false,
+  label: '',
+  meta: undefined,
+  singleItemLabel: '',
+  searchContext: () => ({ context: '', linkWord: '' }),
+  valid: undefined,
+  invalidMessage: '',
+  noResultPrompt: '',
+  borderless: false,
+  marginless: false,
+  maxListHeight: undefined,
+  locale: 'sv',
+  clearTrigger: false,
+})
+
+const searchFields = computed(() => props.searchFields ?? [])
+
+const emit = defineEmits<{
+  (e: 'searchSelected', value: Record<string, unknown> | null): void
+  (e: 'paginate', value: number): void
+  (e: 'total', value: number): void
+  (e: 'change', value: string): void
+}>()
+
+const dropdownVisible = ref(false)
+const singleItemName = ref('')
+const searchTerm = ref('')
+const matchingItems = ref<Array<Record<string, unknown>>>([])
+const displayedItems = ref<Array<Record<string, unknown>>>([])
+const selectedItem = ref<Record<string, unknown> | null>(null)
+const focusedIndex = ref<number>(-1)
+const valid = ref<string | undefined>(props.valid)
+
+// Use prop.totalCount if provided, otherwise calculate from items.length
+const totalCount = computed(() => {
+  if (props.totalCount !== undefined) {
+    return props.totalCount
+  }
+  return props.items?.length || 0
+})
+
+watch(
+  () => props.valid,
+  (newValue) => {
+    valid.value = newValue
+  },
+)
+
+const componentRef = ref<HTMLElement | null>(null)
+const inputId = `searchSelectInput-${Math.random().toString(36).slice(2, 9)}`
+
+const hasInputValue = computed(() => searchTerm.value.length > 0)
+
+const listWrapperClasses = computed(() => [
+  'rounded-md box-border overflow-hidden z-4 w-full bg-white mt-2',
+  props.marginless ? 'mb-0' : 'mb-8',
+  props.borderless ? 'shadow-lg border-none' : 'border border-gray-200',
+  props.dropdownAbsolute ? 'absolute right-0 z-50' : 'relative',
+  props.maxListHeight && 'overflow-y-scroll',
+])
+
+const listItemClasses = computed(() => [
+  'block m-0',
+  'outline-none! hover:bg-blue_t-100 active:bg-blue_t-200',
+  props.borderless && 'border-b border-blue_t-200',
+])
+
+const listWrapperStyle = computed(() => {
+  if (!props.maxListHeight) return null
+
+  // Convert to number in case it's passed as a string
+  const maxHeight = typeof props.maxListHeight === 'string' ? parseInt(props.maxListHeight, 10) : props.maxListHeight
+
+  return { maxHeight: `${maxHeight}px` }
+})
+
+const sortResponse = (response: Array<Record<string, unknown>>) => {
+  if (!response.length) return []
+  const firstItem = response[0] ?? {}
+  const allKeys = [...searchFields.value, ...Object.keys(firstItem).filter((k) => !searchFields.value.includes(k))]
+  return response.map((item) => {
+    const sorted: Record<string, unknown> = {}
+    allKeys.forEach((key) => {
+      sorted[key] = item[key] || `${key}: den här uppgiften saknas.`
+    })
+    return sorted
+  })
+}
+
+const matchesSearchTerm = (item: Record<string, unknown>): boolean => {
+  if (!searchTerm.value) return true
+
+  // When mask is active, use unmasked value (digits only) for searching
+  // This ensures we can search even when user has partially typed a PID
+  const searchValue = isPid.value ? searchTerm.value.replace(/\D/g, '') : searchTerm.value
+
+  const searchLower = searchValue.toLowerCase()
+  const pidRegex = /^\d{8}[a-zA-Z0-9]{4}$/
+
+  // If search term matches PID pattern (unmasked), include all items
+  if (pidRegex.test(searchValue)) return true
+
+  // Check if any searchFields field contains the search term
+  // For PID fields, also check unmasked version
+  return searchFields.value.some((key) => {
+    const value = item[key]
+    if (!value) return false
+
+    const stringValue = String(value)
+    const valueLower = stringValue.toLowerCase()
+    const unmaskedValue = stringValue.replace(/\D/g, '')
+
+    // Check both masked and unmasked versions
+    return valueLower.includes(searchLower) || (unmaskedValue.length > 0 && unmaskedValue.includes(searchValue))
+  })
+}
+
+const filterAndPaginate = () => {
+  if (!props.items?.length) {
+    matchingItems.value = []
+    displayedItems.value = []
+    emit('total', 0)
+    return
+  }
+
+  // Filter items based on search term
+  let sourceData = props.items ?? []
+  if (props.preserveOrder && sourceData.length) {
+    sourceData = sortResponse(sourceData)
+  }
+
+  const matchedArray = sourceData.filter((item) => matchesSearchTerm(item))
+  matchingItems.value = matchedArray
+
+  // Never paginate internally - just show all filtered items
+  // Parent component is responsible for pagination if needed
+  displayedItems.value = matchedArray
+
+  emit('total', matchingItems.value.length)
+}
+
+const handleClear = () => {
+  searchTerm.value = ''
+  selectedItem.value = null
+  valid.value = 'null'
+  emit('searchSelected', null)
+  dropdownVisible.value = false
+  filterAndPaginate()
+}
+
+watch(
+  () => props.clearTrigger,
+  (value) => value && handleClear(),
+)
+
+watch(
+  () => props.items,
+  () => {
+    filterAndPaginate()
+  },
+  { immediate: true },
+)
+
+const formatPidWithDash = (value: string): string => {
+  // Only format if it looks like a personnummer
+  if (!isPidString(value)) {
+    // If it's not a PID, remove any trailing dash that might be left
+    return value.replace(/-$/, '')
+  }
+
+  // Remove all non-digits
+  const digits = value.replace(/\D/g, '')
+
+  // Only add dash if there are digits after the first 8
+  if (digits.length > 8) {
+    return `${digits.substring(0, 8)}-${digits.substring(8)}`
+  }
+
+  // If exactly 8 digits or less, return without dash
+  return digits
+}
+
+const debounce = <T extends (...args: any[]) => void>(fn: T, delay: number) => {
+  let timeout: ReturnType<typeof setTimeout>
+  return (...args: Parameters<T>) => {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => fn(...args), delay)
+  }
+}
+
+const debouncedEmitChange = debounce((value: string) => {
+  const formattedValue = formatPidWithDash(value)
+  emit('change', formattedValue)
+}, 500)
+
+watch(
+  () => searchTerm.value,
+  (newValue) => {
+    filterAndPaginate()
+    if (selectedItem.value === null) {
+      debouncedEmitChange(newValue)
+    }
+  },
+)
+
+watch(
+  () => props.page,
+  () => {
+    filterAndPaginate()
+  },
+)
+
+// Reset focused index when items change
+watch(
+  () => displayedItems.value,
+  () => {
+    focusedIndex.value = -1
+  },
+)
+
+const onClickOutside = (e: PointerEvent) => {
+  const target = e.target as Element
+  if (componentRef.value?.contains(target)) return
+
+  dropdownVisible.value = false
+  if (props.initialValue === searchTerm.value && props.initialValue.length) {
+    valid.value = 'true'
+  } else if (searchTerm.value.length > 0 && selectedItem.value === null) {
+    valid.value = 'false'
+  }
+}
+
+const totalPages = computed(() => {
+  // Only return totalPages if both page and totalPages props are provided
+  if (props.page !== undefined && props.totalPages !== undefined) {
+    return props.totalPages
+  }
+  return null
+})
+
+const handleInput = (e: Event) => {
+  const target = e.target as HTMLInputElement
+  const { value } = target
+
+  searchTerm.value = value
+  dropdownVisible.value = true
+  selectedItem.value = null
+  focusedIndex.value = -1
+  valid.value = 'null'
+  filterAndPaginate()
+}
+
+// Personnummer detection using composable
+const { isPid } = useIsPid(searchTerm)
+
+// Bold query matches using composable
+const { boldQuery } = useBoldQuery(searchTerm)
+
+// Mask configuration for personnummer (yyyymmdd-nnnn)
+const pidMask = computed(() => {
+  if (isPid.value) {
+    return '00000000-0000'
+  }
+  return undefined
+})
+
+const handleMatchingString = (item: Record<string, unknown>): string => {
+  const values = searchFields.value.map((key) => String(item[key] || ''))
+
+  let result = ''
+  if (values.length === 1) {
+    result = values[0] || ''
+  } else {
+    // Format PID if second value is 12 digits
+    if (values[1]?.length === 12 && parseInt(values[1])) {
+      values[1] = formatPidWithDash(values[1])
+    }
+
+    if (props.preserveOrder) {
+      // Combine first two values, then join remaining with <br>
+      const combined = `${values[0]} (${values[1]})`
+      const rest = values.slice(2).join('<br>')
+      result = rest ? `${combined}<br>${rest}` : combined
+    } else {
+      result = `${values.join(' (')})`
+    }
+  }
+
+  if (searchTerm.value) {
+    const formattedTerm = formatPidWithDash(searchTerm.value)
+    if (formattedTerm !== searchTerm.value) {
+      searchTerm.value = formattedTerm
+    }
+
+    const escaped = formattedTerm.replace(/[()]/g, '\\$&')
+    if (new RegExp(escaped, 'i').test(result)) {
+      return boldQuery(result)
+    }
+  }
+
+  return result
+}
+
+const handlePagination = (payload: { target: { id: string }; detail: number }) => {
+  const newPage = payload.detail
+  emit('paginate', newPage)
+}
+
+const selectItem = (item: Record<string, unknown>) => {
+  selectedItem.value = item
+  valid.value = 'true'
+  emit('searchSelected', item)
+}
+
+const handleClick = (e: MouseEvent | KeyboardEvent, item: Record<string, unknown>) => {
+  const keyEvent = e as KeyboardEvent
+  if (keyEvent.key === 'Enter' || keyEvent.code === 'Space' || e.type === 'mouseup') {
+    // Prevent event from bubbling and triggering other handlers
+    e.preventDefault()
+    e.stopPropagation()
+
+    const firstField = searchFields.value[0]
+    searchTerm.value = (firstField ? (item[firstField] as string) : '') || ''
+    selectItem(item)
+    focusedIndex.value = -1
+    dropdownVisible.value = false
+
+    // Focus input after a short delay to prevent dropdown from reopening
+    setTimeout(() => {
+      const input = document.getElementById(inputId) as HTMLInputElement
+      if (input) {
+        input.focus()
+      }
+    }, 100)
+  }
+}
+
+const handleInputFocus = () => {
+  // Only open dropdown if an item hasn't been selected and there are items to show
+  if (!selectedItem.value && displayedItems.value.length > 0) {
+    dropdownVisible.value = true
+  }
+}
+
+const handleListKeyDown = (e: KeyboardEvent) => {
+  // Handle keyboard events when focus is anywhere in the list (including radio buttons)
+  // Only handle if the target is a radio button or list item
+  const target = e.target as HTMLElement
+  const isRadioButton = target.tagName === 'INPUT' && (target as HTMLInputElement).type === 'radio'
+  const isListItem = target.closest('li[role="option"]')
+  if (isRadioButton || isListItem) {
+    handleInputKeyDown(e)
+  }
+}
+
+const handleInputKeyDown = (e: KeyboardEvent) => {
+  if (!dropdownVisible.value && displayedItems.value.length > 0) {
+    if (e.key === 'ArrowDown' || e.key === 'Enter') {
+      e.preventDefault()
+      dropdownVisible.value = true
+      focusedIndex.value = 0
+      setTimeout(() => {
+        const firstRadioButton = document.getElementById(`search-select-radio-0`) as HTMLInputElement
+        if (firstRadioButton) {
+          firstRadioButton.focus()
+          firstRadioButton.setAttribute('checked', 'true')
+        }
+      }, 0)
+      return
+    }
+  }
+
+  if (!dropdownVisible.value) return
+
+  switch (e.key) {
+    case 'ArrowDown':
+      e.preventDefault()
+      e.stopPropagation()
+      if (focusedIndex.value < displayedItems.value.length - 1) {
+        focusedIndex.value++
+      } else {
+        focusedIndex.value = 0
+      }
+      break
+
+    case 'ArrowUp':
+      e.preventDefault()
+      e.stopPropagation()
+      if (focusedIndex.value > 0) {
+        focusedIndex.value--
+      } else {
+        focusedIndex.value = displayedItems.value.length - 1
+      }
+      break
+
+    case 'Enter':
+      e.preventDefault()
+      if (focusedIndex.value >= 0 && focusedIndex.value < displayedItems.value.length) {
+        const focusedItem = displayedItems.value[focusedIndex.value]
+        if (focusedItem) {
+          handleClick(e, focusedItem)
+        }
+      } else if (displayedItems.value.length === 1) {
+        const onlyItem = displayedItems.value[0]
+        if (onlyItem) {
+          handleClick(e, onlyItem)
+        }
+      }
+      break
+
+    case 'Escape':
+      e.preventDefault()
+      dropdownVisible.value = false
+      focusedIndex.value = -1
+      const input = document.getElementById(inputId) as HTMLInputElement
+      input?.focus()
+      break
+
+    case 'Tab':
+      // Let default tab behavior handle focus navigation
+      // When list is open, first list-item has tabindex="0" so Tab will go there
+      // When list is closed, Tab will go to next element normally
+      if (!dropdownVisible.value) {
+        dropdownVisible.value = false
+        focusedIndex.value = -1
+      }
+      break
+  }
+}
+
+onMounted(() => {
+  if (props.initialValue) {
+    searchTerm.value = props.initialValue
+    valid.value = 'true'
+  }
+
+  window.addEventListener('mouseup', onClickOutside as EventListener)
+
+  nextTick(() => {
+    const input = document.getElementById(inputId)
+    if (input) {
+      input.addEventListener('keydown', handleInputKeyDown)
+      input.addEventListener('focus', handleInputFocus)
+    }
+  })
+
+  filterAndPaginate()
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('mouseup', onClickOutside as EventListener)
+  const input = document.getElementById(inputId)
+  if (input) {
+    input.removeEventListener('keydown', handleInputKeyDown)
+    input.removeEventListener('focus', handleInputFocus)
+  }
+})
+</script>
+
+<template>
+  <div
+    ref="componentRef"
+    class="fds-search-select block mb-6"
+  >
+    <div class="relative block">
+      <div
+        v-if="!singleItemName.length"
+        class="relative"
+      >
+        <div class="relative">
+          <FdsInput
+            :label="label"
+            :meta="meta ?? undefined"
+            :labelLeft="labelLeft"
+            class="relative mb-0! w-full!"
+            :valid="valid"
+            :invalidMessage="invalidMessage"
+            :disabled="disabled"
+            :locale="locale"
+            type="search"
+            :value="searchTerm"
+            :id="inputId"
+            :clearButton="!!searchTerm"
+            :mask="pidMask"
+            :maskOptions="{ lazy: true }"
+            @input="handleInput"
+            @clearInput="handleClear"
+          />
+          <FdsIcon
+            v-if="!disabled && !hasInputValue"
+            name="search"
+            :size="24"
+            class="absolute right-3 bottom-6 translate-y-1/2 fill-blue-500"
+          />
+        </div>
+      </div>
+      <div v-else>
+        <div class="font-bold mb-2 tracking-wide">{{ singleItemLabel }}</div>
+        <div>{{ singleItemName }}</div>
+      </div>
+
+      <!-- Dropdown List -->
+      <div
+        v-if="dropdownVisible && !singleItemName.length && !disabled"
+        :class="listWrapperClasses"
+        :style="listWrapperStyle"
+        aria-haspopup="listbox"
+        aria-expanded="false"
+        aria-controls="select-dropdown"
+      >
+        <!-- Loading -->
+        <div
+          v-if="loading"
+          class="flex justify-center p-4"
+        >
+          <FdsSpinner
+            color="blue"
+            size="48px"
+          />
+        </div>
+
+        <!-- Results -->
+        <template v-else-if="displayedItems && displayedItems.length">
+          <!-- Header -->
+          <div
+            v-if="searchTerm && searchTerm.length"
+            class="block m-0 font-light p-6 border-b border-gray-200 rounded-t-md"
+          >
+            {{ 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"
+          >
+            {{ totalCount }} {{ searchContext.context }}
+          </div>
+
+          <!-- List -->
+          <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"
+              :id="`search-select-item-${index}`"
+              class="block m-0 hover:outline-none focus:outline-2 focus:outline-blue-500 -outline-offset-2"
+              :class="[focusedIndex === index && 'outline-dashed outline-2 outline-blue-500 -outline-offset-2 ']"
+              role="option"
+              :aria-selected="focusedIndex === index"
+              :tabindex="dropdownVisible && focusedIndex === index ? 0 : -1"
+              @mouseup="(e) => handleClick(e, item)"
+              @mouseenter="focusedIndex = index"
+              @keydown.enter="(e) => handleClick(e, item)"
+              @keydown.space.prevent="(e) => handleClick(e, item)"
+            >
+              <input
+                type="radio"
+                :id="`search-select-radio-${index}`"
+                name="social-account"
+                class="absolute left-0 opacity-0"
+                :checked="focusedIndex === index"
+                :key="`radio-${index}-${focusedIndex}`"
+                tabindex="-1"
+              />
+              <label
+                :for="`search-select-radio-${index}`"
+                class="block p-4 text-gray-700 cursor-pointer no-underline"
+                :class="listItemClasses"
+                v-html="handleMatchingString(item)"
+              ></label>
+            </li>
+          </ul>
+
+          <!-- Pagination -->
+          <FdsPagination
+            v-if="page !== undefined && totalPages !== null && totalPages > 1"
+            :current="page"
+            :max="totalPages"
+            @paginate="handlePagination"
+            class="my-4! px-2"
+          />
+        </template>
+
+        <!-- No Results -->
+        <ul
+          v-else-if="!loading"
+          class="block m-0 list-none p-0"
+        >
+          <li class="p-4">
+            {{ noResultPrompt }}
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/FdsSearchSelect/types.ts

@@ -0,0 +1,25 @@
+export interface FdsSearchSelectProps {
+  items: Array<Record<string, unknown>>
+  page?: number
+  totalPages?: number
+  totalCount?: number
+  loading?: boolean
+  searchFields?: string[]
+  preserveOrder?: boolean
+  initialValue?: string
+  disabled?: boolean
+  dropdownAbsolute?: boolean
+  labelLeft?: boolean
+  label?: string
+  meta?: string | null
+  singleItemLabel?: string
+  searchContext?: { context: string; linkWord: string }
+  valid?: string
+  invalidMessage?: string
+  noResultPrompt?: string
+  borderless?: boolean
+  marginless?: boolean
+  maxListHeight?: number | string
+  locale?: 'sv' | 'en'
+  clearTrigger?: boolean
+}

package/src/components/FdsSpinner/FdsSpinner.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import FdsSpinner from './FdsSpinner.vue'
+
+const meta: Meta<typeof FdsSpinner> = {
+  title: 'FDS/FdsSpinner',
+  component: FdsSpinner,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: { type: 'text' } },
+    color: { control: { type: 'inline-radio' }, options: ['inherit', 'black', 'white', 'blue'] },
+    label: { control: { type: 'text' } },
+    labelPosition: { control: { type: 'inline-radio' }, options: ['right', 'bottom'] },
+  },
+  args: {
+    size: '48px',
+    color: 'inherit',
+    label: '',
+    labelPosition: 'bottom',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Basic: Story = {
+  render: (args) => ({
+    components: { FdsSpinner },
+    setup: () => ({ args }),
+    template: '<FdsSpinner v-bind="args" />',
+  }),
+}