fds-vue-core 2.1.4 → 2.1.6

package/src/components/FdsPagination/FdsPagination.vue

@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import FdsButtonIcon from '@/components/Buttons/FdsButtonIcon/FdsButtonIcon.vue'
+import FdsSpinner from '@/components/FdsSpinner/FdsSpinner.vue'
+import FdsInput from '@/components/Form/FdsInput/FdsInput.vue'
+import type { FdsPaginationProps } from './types'
+
+const props = withDefaults(defineProps<FdsPaginationProps>(), {
+  id: undefined,
+  loading: false,
+})
+
+const emit = defineEmits<{
+  (e: 'paginate', payload: { target: { id: string }; detail: number }): void
+}>()
+
+const loadingIndicator = ref<'start' | 'prev' | 'input' | 'next' | 'end' | ''>('')
+const internalValue = ref(props.current)
+
+const autoId = `fds-pagination-${Math.random().toString(36).slice(2, 9)}`
+const inputId = computed(() => props.id ?? autoId)
+
+const inputValue = computed(() => String(internalValue.value))
+
+watch(
+  () => props.current,
+  (newValue) => {
+    internalValue.value = newValue
+  },
+)
+
+const debounce = <T extends (...args: any[]) => void>(fn: T, delay = 300) => {
+  let timer: ReturnType<typeof setTimeout>
+  return (...args: Parameters<T>) => {
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      fn(...args)
+    }, delay)
+  }
+}
+
+const handlePageChange = debounce((event: Event) => {
+  const target = event.target as HTMLInputElement
+  const incomingPage = Number.parseInt(target.value)
+
+  if (Number.isNaN(incomingPage)) {
+    internalValue.value = props.current
+    return
+  }
+
+  loadingIndicator.value = 'input'
+
+  let page = props.current
+  if (incomingPage > props.max) {
+    page = props.max
+  } else if (incomingPage < 1) {
+    page = 1
+  } else {
+    page = incomingPage
+  }
+
+  internalValue.value = page
+  emit('paginate', { target: { id: inputId.value }, detail: page })
+}, 500)
+
+const handlePagination = (action: 'start' | 'prev' | 'next' | 'end') => {
+  let page = 0
+
+  switch (action) {
+    case 'start':
+      if (props.current === 1) return
+      loadingIndicator.value = 'start'
+      page = 1
+      break
+    case 'prev':
+      if (props.current === 1) return
+      loadingIndicator.value = 'prev'
+      page = props.current === 1 ? props.current : props.current - 1
+      break
+    case 'next':
+      if (props.current === props.max) return
+      loadingIndicator.value = 'next'
+      page = props.current === props.max ? props.current : props.current + 1
+      break
+    case 'end':
+      if (props.current === props.max) return
+      loadingIndicator.value = 'end'
+      page = props.max
+      break
+  }
+
+  emit('paginate', { target: { id: inputId.value }, detail: page })
+}
+</script>
+
+<template>
+  <div
+    class="my-6 flex items-between justify-between gap-2"
+    :id="inputId"
+  >
+    <!-- Prev -->
+    <div class="flex items-center justify-start gap-1 w-[100px]">
+      <FdsSpinner
+        v-if="loading && loadingIndicator === 'start'"
+        size="32px"
+        color="blue"
+      />
+      <FdsButtonIcon
+        v-else
+        icon="first"
+        :size="28"
+        :disabled="current === 1"
+        :ariaDisabled="current === 1"
+        :class="{ 'hidden!': current === 1 }"
+        class="w-8 h-8 sm:w-12 sm:h-12"
+        @click="handlePagination('start')"
+      />
+
+      <FdsSpinner
+        v-if="loading && loadingIndicator === 'prev'"
+        size="24px"
+        color="blue"
+      />
+      <FdsButtonIcon
+        v-else
+        icon="arrowLeft"
+        :size="28"
+        :disabled="current === 1"
+        :ariaDisabled="current === 1"
+        :class="{ 'hidden!': current === 1 }"
+        class="w-8 h-8 sm:w-12 sm:h-12"
+        @click="handlePagination('prev')"
+      />
+    </div>
+
+    <!-- Numbers -->
+    <div class="flex items-center justify-center w-auto gap-2 order-0 sm:order-0">
+      <FdsSpinner
+        v-if="loading && loadingIndicator === 'input'"
+        size="24px"
+        color="blue"
+        label="Laddar"
+        label-position="right"
+      />
+      <template v-else>
+        <FdsInput
+          :value="inputValue"
+          type="text"
+          :size="max.toString().length"
+          :maxlength="max.toString().length"
+          @input="handlePageChange"
+          class="mb-0! text-center"
+        />
+        <div class="whitespace-nowrap">/ {{ max }}</div>
+      </template>
+    </div>
+
+    <!-- Next -->
+    <div class="flex items-center justify-end gap-1 order-2 sm:order-0 w-[100px]">
+      <FdsSpinner
+        v-if="loading && loadingIndicator === 'next'"
+        size="24px"
+        color="blue"
+      />
+      <FdsButtonIcon
+        v-else
+        icon="arrowRight"
+        :size="28"
+        :disabled="current === max"
+        :ariaDisabled="current === max"
+        :class="{ 'hidden!': current === max }"
+        class="w-8 h-8 sm:w-12 sm:h-12"
+        @click="handlePagination('next')"
+      />
+
+      <FdsSpinner
+        v-if="loading && loadingIndicator === 'end'"
+        size="24px"
+        color="blue"
+      />
+      <FdsButtonIcon
+        v-else
+        icon="last"
+        :size="28"
+        :disabled="current === max"
+        :ariaDisabled="current === max"
+        :class="{ 'hidden!': current === max }"
+        class="w-8 h-8 sm:w-12 sm:h-12"
+        @click="handlePagination('end')"
+      />
+    </div>
+  </div>
+</template>

package/src/components/FdsPagination/types.ts

@@ -0,0 +1,6 @@
+export interface FdsPaginationProps {
+  id?: string
+  current: number
+  max: number
+  loading?: boolean
+}

package/src/components/FdsSearchSelect/FdsSearchSelect.stories.ts

@@ -0,0 +1,428 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import FdsSearchSelect from './FdsSearchSelect.vue'
+
+const meta: Meta<typeof FdsSearchSelect> = {
+  title: 'FDS/Form/FdsSearchSelect',
+  component: FdsSearchSelect,
+  tags: ['autodocs'],
+  argTypes: {
+    items: {
+      control: { type: 'object' },
+      description: 'Array of items to display in the search select dropdown',
+    },
+    page: {
+      control: { type: 'number' },
+      description: 'Current page number for server-side pagination',
+    },
+    totalPages: {
+      control: { type: 'number' },
+      description: 'Total number of pages for server-side pagination',
+    },
+    totalCount: {
+      control: { type: 'number' },
+      description: 'Total count of unfiltered items (displayed as "x av y")',
+    },
+    loading: {
+      control: { type: 'boolean' },
+      description: 'Shows loading spinner in the dropdown when true',
+    },
+    searchFields: {
+      control: { type: 'object' },
+      description: 'Array of field names to search in (e.g., ["fullName", "email"])',
+    },
+    preserveOrder: {
+      control: { type: 'boolean' },
+      description: 'If true, preserves the order of searchFields when displaying results',
+    },
+    initialValue: {
+      control: { type: 'text' },
+      description: 'Initial value to display in the input field',
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      description: 'Disables the search select component',
+    },
+    dropdownAbsolute: {
+      control: { type: 'boolean' },
+      description: 'If true, positions the dropdown absolutely',
+    },
+    labelLeft: {
+      control: { type: 'boolean' },
+      description: 'If true, positions the label to the left of the input',
+    },
+    label: {
+      control: { type: 'text' },
+      description: 'Label text for the input field',
+    },
+    meta: {
+      control: { type: 'text' },
+      description: 'Meta text displayed below the label',
+    },
+    singleItemLabel: {
+      control: { type: 'text' },
+      description: 'Label text displayed when a single item is shown',
+    },
+    searchContext: {
+      control: { type: 'object' },
+      description: 'Context object with "context" and "linkWord" for displaying search results count',
+    },
+    valid: {
+      control: { type: 'select' },
+      options: ['true', 'false', 'null'],
+      description: 'Validation state: "true" for valid, "false" for invalid, "null" for neutral',
+    },
+    invalidMessage: {
+      control: { type: 'text' },
+      description: 'Error message displayed when validation is false',
+    },
+    noResultPrompt: {
+      control: { type: 'text' },
+      description: 'Message displayed when no search results are found',
+    },
+    borderless: {
+      control: { type: 'boolean' },
+      description: 'If true, removes borders from the dropdown list',
+    },
+    marginless: {
+      control: { type: 'boolean' },
+      description: 'If true, removes bottom margin from the component',
+    },
+    maxListHeight: {
+      control: { type: 'number' },
+      description: 'Maximum height of the dropdown list in pixels',
+    },
+    locale: {
+      control: { type: 'select' },
+      options: ['sv', 'en'],
+      description: 'Locale for translations ("sv" for Swedish, "en" for English)',
+    },
+    clearTrigger: {
+      control: { type: 'boolean' },
+      description: 'When set to true, clears the search input and selection',
+    },
+  },
+  args: {
+    items: [],
+    searchFields: ['companyName', 'orgNumber'],
+    preserveOrder: false,
+    initialValue: '',
+    disabled: false,
+    dropdownAbsolute: false,
+    labelLeft: false,
+    label: 'Sök organisation',
+    meta: undefined,
+    singleItemLabel: 'Vald organisation',
+    searchContext: { context: 'organisationer', linkWord: 'av' },
+    valid: undefined,
+    invalidMessage: 'Vänligen välj en organisation',
+    noResultPrompt: 'Inga resultat hittades',
+    borderless: false,
+    marginless: false,
+    maxListHeight: undefined,
+    locale: 'sv',
+    clearTrigger: false,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Mock data for items examples
+const mockItems = [
+  {
+    companyName: 'Acme Corporation',
+    orgNumber: '1234567890',
+    companyFqn: 'Acme Corporation | 1234567890',
+  },
+  {
+    companyName: 'Tech Solutions AB',
+    orgNumber: '9876543210',
+    companyFqn: 'Tech Solutions AB | 9876543210',
+  },
+  {
+    companyName: 'Global Industries',
+    orgNumber: '5555555555',
+    companyFqn: 'Global Industries | 5555555555',
+  },
+  {
+    companyName: 'Nordic Ventures',
+    orgNumber: '1111111111',
+    companyFqn: 'Nordic Ventures | 1111111111',
+  },
+  {
+    companyName: 'Scandinavian Group',
+    orgNumber: '2222222222',
+    companyFqn: 'Scandinavian Group | 2222222222',
+  },
+]
+
+export const WithItems: Story = {
+  render: (args) => ({
+    components: { FdsSearchSelect },
+    setup: () => {
+      const selected = ref<Record<string, unknown> | null>(null)
+      const handleSearchSelected = (value: Record<string, unknown> | null) => {
+        selected.value = value
+      }
+      return { args, selected, handleSearchSelected }
+    },
+    template: `
+        <FdsSearchSelect
+          v-bind="args"
+          :items="args.items"
+          @searchSelected="handleSearchSelected"
+        />
+
+    `,
+  }),
+  args: {
+    items: mockItems,
+    label: 'Sök bland organisationer',
+    meta: 'Börja skriva för att söka',
+  },
+}
+
+export const WithSelectedEarlier: Story = {
+  render: (args) => ({
+    components: { FdsSearchSelect },
+    setup: () => {
+      const selected = ref<Record<string, unknown> | null>(null)
+      const handleSearchSelected = (value: Record<string, unknown> | null) => {
+        selected.value = value
+      }
+      return { args, selected, handleSearchSelected }
+    },
+    template: `
+      <FdsSearchSelect
+        v-bind="args"
+        :items="args.items"
+        @searchSelected="handleSearchSelected"
+      />
+    `,
+  }),
+  args: {
+    items: mockItems,
+    initialValue: 'Acme Corporation',
+    label: 'Organisation',
+  },
+}
+
+export const SingleOrganization: Story = {
+  render: (args) => ({
+    components: { FdsSearchSelect },
+    setup: () => {
+      const selected = ref<Record<string, unknown> | null>(null)
+      const handleSearchSelected = (value: Record<string, unknown> | null) => {
+        selected.value = value
+      }
+      return { args, selected, handleSearchSelected }
+    },
+    template: `
+        <FdsSearchSelect
+          v-bind="args"
+          :items="args.items"
+          @searchSelected="handleSearchSelected"
+        />
+    `,
+  }),
+  args: {
+    items: [
+      {
+        companyName: 'Acme Corporation',
+        orgNumber: '1234567890',
+        companyFqn: 'Acme Corporation | 1234567890',
+      },
+    ],
+    singleItemLabel: 'Vald organisation',
+    label: 'Organisation',
+  },
+}
+
+export const WithValidation: Story = {
+  render: (args) => ({
+    components: { FdsSearchSelect },
+    setup: () => {
+      const selected = ref<Record<string, unknown> | null>(null)
+      const valid = ref<string | undefined>('null')
+      const handleSearchSelected = (value: Record<string, unknown> | null) => {
+        selected.value = value
+        valid.value = value ? 'true' : 'null'
+      }
+      return { args, selected, valid, handleSearchSelected }
+    },
+    template: `
+      <FdsSearchSelect
+        v-bind="args"
+        :items="args.items"
+        :valid="valid"
+        @searchSelected="handleSearchSelected"
+      />
+    `,
+  }),
+  args: {
+    items: mockItems,
+    label: 'Välj organisation',
+    invalidMessage: 'Vänligen välj en organisation',
+  },
+}
+
+export const WithLabelLeft: Story = {
+  render: (args) => ({
+    components: { FdsSearchSelect },
+    setup: () => {
+      const selected = ref<Record<string, unknown> | null>(null)
+      const handleSearchSelected = (value: Record<string, unknown> | null) => {
+        selected.value = value
+      }
+      return { args, selected, handleSearchSelected }
+    },
+    template: `
+      <div>
+        <FdsSearchSelect
+          v-bind="args"
+          :items="args.items"
+          @searchSelected="handleSearchSelected"
+        />
+      </div>
+    `,
+  }),
+  args: {
+    items: mockItems,
+    label: 'Organisation',
+    labelLeft: true,
+    meta: 'Sök efter organisation',
+  },
+}
+
+export const WithAbsoluteList: Story = {
+  render: (args) => ({
+    components: { FdsSearchSelect },
+    setup: () => {
+      const selected = ref<Record<string, unknown> | null>(null)
+      const handleSearchSelected = (value: Record<string, unknown> | null) => {
+        selected.value = value
+      }
+      return { args, selected, handleSearchSelected }
+    },
+    template: `
+      <div style="position: relative; padding: 2rem;">
+        <FdsSearchSelect
+          v-bind="args"
+          :items="args.items"
+          @searchSelected="handleSearchSelected"
+        />
+      </div>
+    `,
+  }),
+  args: {
+    items: mockItems,
+    dropdownAbsolute: true,
+    label: 'Sök organisation',
+  },
+}
+
+export const Disabled: Story = {
+  render: (args) => ({
+    components: { FdsSearchSelect },
+    setup: () => ({ args }),
+    template: '<FdsSearchSelect v-bind="args" :items="args.items" />',
+  }),
+  args: {
+    items: mockItems,
+    disabled: true,
+    label: 'Sök organisation',
+  },
+}
+
+export const EnglishLocale: Story = {
+  render: (args) => ({
+    components: { FdsSearchSelect },
+    setup: () => {
+      const selected = ref<Record<string, unknown> | null>(null)
+      const handleSearchSelected = (value: Record<string, unknown> | null) => {
+        selected.value = value
+      }
+      return { args, selected, handleSearchSelected }
+    },
+    template: `
+      <div>
+        <FdsSearchSelect
+          v-bind="args"
+          :items="args.items"
+          @searchSelected="handleSearchSelected"
+        />
+      </div>
+    `,
+  }),
+  args: {
+    items: mockItems,
+    locale: 'en',
+    label: 'Search organization',
+    meta: 'Start typing to search',
+    singleItemLabel: 'Selected organization',
+    searchContext: { context: 'organizations', linkWord: 'of' },
+    noResultPrompt: 'No results found',
+    invalidMessage: 'Please select an organization',
+  },
+}
+
+export const WithPagination: Story = {
+  render: (args) => ({
+    components: { FdsSearchSelect },
+    setup: () => {
+      const selected = ref<Record<string, unknown> | null>(null)
+      const handleSearchSelected = (value: Record<string, unknown> | null) => {
+        selected.value = value
+      }
+      const handlePaginate = (page: number) => {
+        // eslint-disable-next-line no-console
+        console.log('Paginate to page:', page)
+      }
+      return { args, selected, handleSearchSelected, handlePaginate }
+    },
+    template: `
+      <div>
+        <FdsSearchSelect
+          v-bind="args"
+          :items="args.items"
+          @searchSelected="handleSearchSelected"
+          @paginate="handlePaginate"
+        />
+      </div>
+    `,
+  }),
+  args: {
+    items: [
+      ...mockItems,
+      {
+        companyName: 'Company 6',
+        orgNumber: '6666666666',
+        companyFqn: 'Company 6 | 6666666666',
+      },
+      {
+        companyName: 'Company 7',
+        orgNumber: '7777777777',
+        companyFqn: 'Company 7 | 7777777777',
+      },
+      {
+        companyName: 'Company 8',
+        orgNumber: '8888888888',
+        companyFqn: 'Company 8 | 8888888888',
+      },
+      {
+        companyName: 'Company 9',
+        orgNumber: '9999999999',
+        companyFqn: 'Company 9 | 9999999999',
+      },
+      {
+        companyName: 'Company 10',
+        orgNumber: '1010101010',
+        companyFqn: 'Company 10 | 1010101010',
+      },
+    ],
+    page: 1,
+    totalPages: 2,
+    label: 'Sök organisation',
+  },
+}