fds-vue-core 2.3.1 → 2.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fds-vue-core",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "description": "FDS Vue Core Component Library",
   "type": "module",
   "main": "./dist/fds-vue-core.cjs.js",

package/src/assets/icons.ts

@@ -211,10 +211,8 @@ const icons: IconMap = {
         </g>
       </svg>`,
   edit: () => `
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-        <g fill-rule="nonzero">
-          <path d="M2.626 21.997c-.167 0-.323-.065-.441-.182-.181-.18-.235-.449-.136-.684l2.55-6.105L4.61 15c.01-.024.03-.06.056-.096l.026-.034c.014-.018.026-.032.04-.045l8.815-8.81c.007-.01.015-.019.022-.026l.037-.033 2.529-2.529c-.248-.116-.518-.176-.798-.176-.501 0-.97.193-1.323.545L11.36 6.45c-.118.118-.275.183-.441.183-.168 0-.325-.065-.443-.184-.243-.243-.243-.64.001-.884l2.655-2.652C13.719 2.324 14.503 2 15.34 2c.632 0 1.25.192 1.767.546.525-.35 1.149-.54 1.782-.54.634 0 1.25.186 1.78.539.69.49 1.143 1.212 1.284 2.036.14.824-.048 1.652-.531 2.332-.1.142-.214.275-.336.398L9.153 19.244c-.01.01-.024.021-.037.031-.052.045-.104.079-.162.103l-6.084 2.57c-.079.033-.16.049-.244.049zm1.167-1.796l3.82-1.614-2.22-2.219-1.6 3.833zm4.918-2.283l7.955-7.955-2.65-2.65-7.956 7.953 2.651 2.652zM17.55 9.08l2.652-2.652c.073-.074.14-.154.2-.238.6-.843.401-2.016-.442-2.615-.313-.208-.685-.32-1.07-.32-.535 0-1.054.222-1.425.61L14.9 6.429l2.65 2.65z" transform="translate(-257 -3428) translate(257 3428)"/>
-        </g>
+      <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" d="M0.687694 22C0.506145 22 0.329181 21.9267 0.200813 21.7983C0.0302677 21.6278 -0.0385007 21.3757 0.0210986 21.142L1.64495 14.8121C1.65045 14.792 1.66329 14.7562 1.67246 14.7379C1.67337 14.7342 1.67979 14.7168 1.68804 14.6994C1.7238 14.6224 1.76598 14.5591 1.81733 14.5059C1.81916 14.5023 15.1428 1.18163 15.1428 1.18163C15.902 0.419851 16.9143 0 17.9926 0C19.0654 0 20.074 0.415267 20.8313 1.17063C20.8341 1.17338 20.8442 1.18438 20.8469 1.18622C22.4048 2.77945 22.3809 5.33706 20.7947 6.8872C20.7947 6.8872 7.50769 20.1712 7.50585 20.173C7.44534 20.2326 7.37657 20.2784 7.29405 20.3151C7.28854 20.3169 7.27662 20.3224 7.27112 20.3243C7.24912 20.3353 7.21978 20.3463 7.18952 20.3536L0.858239 21.9771C0.802308 21.9927 0.744542 22 0.687694 22ZM1.6422 20.3573L5.68578 19.3205L2.67831 16.3201L1.6422 20.3573ZM7.02264 18.7127L17.0417 8.69678L13.3072 4.96304L3.28531 14.9826L7.02264 18.7127ZM18.0137 7.72416L18.9608 6.7772L15.2263 3.04346L14.2791 3.99042L18.0137 7.72416ZM19.9318 5.80274C20.8763 4.77145 20.8616 3.16905 19.8759 2.16067C19.8732 2.15792 19.8631 2.14784 19.8603 2.14509C19.3615 1.64824 18.6977 1.37506 17.9917 1.37506C17.3205 1.37506 16.6887 1.62165 16.1991 2.07175L19.9318 5.80274Z" />
       </svg>`,
   email: () => `
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">

package/src/components/Blocks/FdsBlockAlert/FdsBlockAlert.vue

@@ -75,7 +75,7 @@ defineSlots<{
         <div
           v-if="label"
           class="font-bold w-full justify-between items-start flex gap-2"
-          :class="{ 'mb-4': (isExpanded || !collapsable) && hasSlot }"
+          :class="{ 'mb-2': (isExpanded || !collapsable) && hasSlot }"
         >
           <div class="flex items-start gap-2">
             <div class="h-7 flex items-center">

package/src/components/Blocks/FdsBlockInfo/FdsBlockInfo.vue

@@ -64,7 +64,7 @@ defineSlots<{
 
     <!-- Small icon or no icon: icon in header only, content below -->
     <div v-else>
-      <div v-if="heading" :class="{ 'mb-4': hasSlot }">
+      <div v-if="heading" :class="{ 'mb-2': hasSlot }">
         <header class="flex items-start justify-between gap-4">
           <div class="flex items-center gap-3">
             <FdsIcon v-if="icon && size === 'small'" :name="icon" :size="smallIconSize" class="fill-blue-500" />

package/src/components/Buttons/FdsButtonSecondary/FdsButtonSecondary.vue

@@ -42,7 +42,7 @@ const sizeClasses: Record<string, string> = {
 }
 
 const variantClasses =
-  'bg-white border-2 border-blue-500 text-blue-600 hover:border-blue-600 active:bg-blue-600 active:border-blue-600 active:text-white'
+  'bg-white border-2 border-blue-500 text-blue-600 hover:bg-blue_t-100 hover:border-blue-500 hover:text-blue-600 active:bg-blue_t-200 active:border-blue-500 active:text-blue-600'
 
 const blockElClasses = computed(() => props.block && 'w-full justify-center')
 
@@ -55,7 +55,8 @@ const buttonClasses = computed(() => [
   blockElClasses.value,
   props.textSelection && 'select-text',
   (props.icon || props.text) && 'gap-2',
-  disabled.value ? 'opacity-20 cursor-not-allowed' : 'cursor-pointer',
+  props.loading && 'bg-blue_t-200!',
+  disabled.value ? 'cursor-not-allowed' : 'cursor-pointer',
 ])
 
 const iconFillClass = 'fill-blue-500'

package/src/components/FdsSearchSelect/FdsSearchSelect.vue

@@ -2,7 +2,6 @@
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useBoldQuery } from '../../composables/useBoldQuery'
 import { isPidString, useIsPid } from '../../composables/useIsPid'
-import FdsIcon from '../FdsIcon/FdsIcon.vue'
 import FdsPagination from '../FdsPagination/FdsPagination.vue'
 import FdsSpinner from '../FdsSpinner/FdsSpinner.vue'
 import FdsInput from '../Form/FdsInput/FdsInput.vue'
@@ -96,7 +95,9 @@ const focusInput = () => {
 
 const uncheckAllRadios = () => {
   if (!dropdownRef.value) return
-  const checkedRadio = dropdownRef.value.querySelector('input[name="search-select-radio-group"]:checked') as HTMLInputElement
+  const checkedRadio = dropdownRef.value.querySelector(
+    'input[name="search-select-radio-group"]:checked',
+  ) as HTMLInputElement
   if (checkedRadio) {
     checkedRadio.checked = false
   }
@@ -236,7 +237,6 @@ watch(
   { immediate: true },
 )
 
-
 const formatPidWithDash = (value: string): string => {
   // Only format if it looks like a personnummer
   if (!isPidString(value)) {
@@ -481,7 +481,9 @@ const rootAttrs = computed(() => {
 // Computed property to find the currently checked radio button ID for aria-activedescendant
 const activeDescendantId = computed(() => {
   if (!dropdownVisible.value || !dropdownRef.value) return null
-  const checkedRadio = dropdownRef.value.querySelector('input[name="search-select-radio-group"]:checked') as HTMLInputElement | null
+  const checkedRadio = dropdownRef.value.querySelector(
+    'input[name="search-select-radio-group"]:checked',
+  ) as HTMLInputElement | null
   return checkedRadio?.id || null
 })
 
@@ -493,15 +495,15 @@ const inputAriaAttrs = computed(() => {
     'aria-autocomplete': 'list',
     'aria-haspopup': 'listbox',
   }
-  
+
   if (dropdownVisible.value && listboxId) {
     attrs['aria-controls'] = listboxId
   }
-  
+
   if (activeDescendantId.value) {
     attrs['aria-activedescendant'] = activeDescendantId.value
   }
-  
+
   return attrs
 })
 </script>
@@ -528,15 +530,10 @@ const inputAriaAttrs = computed(() => {
             :mask="pidMask"
             :maskOptions="{ lazy: true }"
             v-bind="inputAriaAttrs"
+            :searchIcon="!disabled && !hasInputValue"
             @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>
@@ -559,16 +556,11 @@ const inputAriaAttrs = computed(() => {
         <!-- Results -->
         <template v-else-if="displayedItems && displayedItems.length">
           <!-- Header -->
-          <div
-            v-if="searchTerm && searchTerm.length"
-            :class="headerClasses"
-          >
+          <div v-if="searchTerm && searchTerm.length" :class="headerClasses">
             {{ displayedItems.length }} {{ searchContext.linkWord }} {{ totalCount }}
             {{ searchContext.context }}
           </div>
-          <div v-else-if="!searchTerm.length" :class="headerClasses">
-            {{ totalCount }} {{ searchContext.context }}
-          </div>
+          <div v-else-if="!searchTerm.length" :class="headerClasses">{{ totalCount }} {{ searchContext.context }}</div>
 
           <!-- List -->
           <ul class="block m-0 list-none p-0" role="listbox" :id="listboxId" @keydown="handleListKeyDown">

package/src/components/Form/FdsInput/FdsInput.vue

@@ -101,6 +101,7 @@ const rightIconCount = computed(() => {
   let count = 0
   if (showValidationIcon.value) count++
   if (showClearButton.value) count++
+  if (props.searchIcon) count++
   // Password toggle har text och är bredare, räkna som 2 ikoner
   if (showPasswordToggle.value) count += 3
   return count
@@ -302,6 +303,7 @@ watch(
             :aria-label="props.ariaLabel"
             :autocomplete="props.autocomplete"
             :pattern="props.pattern"
+            :searchIcon="props.searchIcon"
             v-bind="inputAttrs"
             @input="handleInputChange"
             @change="handleInputChange"
@@ -316,6 +318,7 @@ watch(
           <div :class="rightIconsContainerClasses">
             <FdsIcon v-if="isInvalid" name="alert" class="fill-red-600" />
             <FdsIcon v-if="isValid" name="bigSuccess" />
+            <FdsIcon v-if="props.searchIcon" name="search" :size="24" class="fill-blue-500" />
             <FdsButtonIcon
               v-if="showClearButton"
               icon="cross"

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

@@ -22,6 +22,7 @@ export interface FdsInputProps {
   readonly?: boolean
   ariaLabel?: string
   pattern?: string
+  searchIcon?: boolean
   onClearInput?: () => void
   maskOptions?: {
     lazy?: boolean