fds-vue-core 2.1.4 → 2.1.6

package/src/components/Buttons/FdsButtonCopy/FdsButtonCopy.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import FdsButtonMinor from '@/components/Buttons/FdsButtonMinor/FdsButtonMinor.vue'
+import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
+import type { FdsCopyButtonProps } from './types'
+
+const props = withDefaults(defineProps<FdsCopyButtonProps>(), {
+  value: '',
+  label: 'Kopiera',
+  copiedLabel: 'Kopierat!',
+  timeoutMs: 800,
+  disabled: false,
+})
+
+const isCopied = ref(false)
+let resetTimer: ReturnType<typeof setTimeout> | null = null
+
+async function copyToClipboard(text: string) {
+  try {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      await navigator.clipboard.writeText(text)
+      return true
+    }
+  } catch {
+    // ignore and try fallback
+  }
+  const textarea = document.createElement('textarea')
+  textarea.value = text
+  textarea.style.position = 'fixed'
+  textarea.style.opacity = '0'
+  document.body.appendChild(textarea)
+  textarea.focus()
+  textarea.select()
+  let ok = false
+  try {
+    ok = document.execCommand('copy')
+  } catch {
+    ok = false
+  }
+  document.body.removeChild(textarea)
+  return ok
+}
+
+async function onClick() {
+  if (props.disabled) return
+  let textToCopy = props.value
+  if (props.targetId) {
+    const el = document.getElementById(props.targetId)
+    if (el) {
+      textToCopy = (el as HTMLElement).innerText || (el as HTMLElement).textContent || ''
+    }
+  }
+  if (!textToCopy) return
+  const ok = await copyToClipboard(textToCopy)
+  if (!ok) return
+  isCopied.value = true
+  if (resetTimer) clearTimeout(resetTimer)
+  resetTimer = setTimeout(() => (isCopied.value = false), props.timeoutMs)
+}
+
+onMounted(() => {
+  if (resetTimer) {
+    clearTimeout(resetTimer)
+    resetTimer = null
+  }
+})
+
+defineEmits<{ (e: 'click'): void }>()
+</script>
+
+<template>
+  <div
+    v-if="isCopied"
+    class="flex items-center gap-2 h-7"
+  >
+    <FdsIcon name="bigSuccess" />
+    <span>{{ props.copiedLabel }}</span>
+  </div>
+  <FdsButtonMinor
+    v-else
+    type="button"
+    :disabled="props.disabled"
+    icon="copy"
+    :text="isCopied ? props.copiedLabel : props.label"
+    @click="onClick"
+  />
+</template>

package/src/components/Buttons/FdsButtonCopy/types.ts

@@ -0,0 +1,8 @@
+export interface FdsCopyButtonProps {
+  value?: string
+  targetId?: string
+  label?: string
+  copiedLabel?: string
+  timeoutMs?: number
+  disabled?: boolean
+}

package/src/components/Buttons/FdsButtonDownload/FdsButtonDownload.stories.ts

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import FdsButtonDownload from './FdsButtonDownload.vue'
+
+const meta: Meta<typeof FdsButtonDownload> = {
+  title: 'FDS/Buttons/FdsButtonDownload',
+  component: FdsButtonDownload,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      source: {
+        transform: (_code: string, ctx: { args?: Record<string, unknown> }) => {
+          const a = (ctx.args || {}) as Record<string, unknown>
+          const attrs: string[] = []
+          const push = (s: string) => attrs.push(s)
+          if (typeof a.text === 'string') push(`text="${a.text}"`)
+          if (typeof a.iconPos === 'string' && a.iconPos !== 'left') push(`icon-pos="${a.iconPos}"`)
+          if (a.loading) push(':loading="true"')
+          if (a.disabled) push(':disabled="true"')
+          if (typeof a.href === 'string' && a.href) push(`href="${a.href}"`)
+          const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
+          return `<FdsButtonDownload${attrsStr} />`
+        },
+      },
+    },
+  },
+  argTypes: {
+    text: {
+      control: 'text',
+      description: 'Button text',
+    },
+    href: {
+      control: 'text',
+      description: 'Link URL',
+    },
+    loading: {
+      control: 'boolean',
+      description: 'Show loading spinner',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable button',
+    },
+  },
+  args: {
+    text: 'Download',
+    href: '#',
+    loading: false,
+    disabled: false,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { FdsButtonDownload },
+    setup() {
+      return { args }
+    },
+    template: '<FdsButtonDownload v-bind="args" />',
+  }),
+  args: {
+    text: 'Download',
+    href: '#',
+  },
+}
+
+export const WithText: Story = {
+  render: (args) => ({
+    components: { FdsButtonDownload },
+    setup() {
+      return { args }
+    },
+    template: '<FdsButtonDownload v-bind="args" />',
+  }),
+  args: {
+    text: 'Download file',
+    href: '/download.pdf',
+  },
+}
+
+export const Loading: Story = {
+  render: (args) => ({
+    components: { FdsButtonDownload },
+    setup() {
+      return { args }
+    },
+    template: '<FdsButtonDownload v-bind="args" />',
+  }),
+  args: {
+    text: 'Download',
+    href: '#',
+    loading: true,
+  },
+}
+
+export const Disabled: Story = {
+  render: (args) => ({
+    components: { FdsButtonDownload },
+    setup() {
+      return { args }
+    },
+    template: '<FdsButtonDownload v-bind="args" />',
+  }),
+  args: {
+    text: 'Download',
+    href: '#',
+    disabled: true,
+  },
+}

package/src/components/Buttons/FdsButtonDownload/FdsButtonDownload.vue

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
+import type { FdsButtonBaseProps } from '@/components/Buttons/ButtonBaseProps'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+interface DownloadOptions {
+  token: string
+  accept?: string
+  headerAuthKey?: string
+  headerAuthValuePrefix?: string
+  errorHandler?: (error: unknown) => void
+  onFinishCallback?: () => void
+}
+
+type FdsButtonDownloadProps = Omit<FdsButtonBaseProps, 'as' | 'icon'> & {
+  downloadOptions?: DownloadOptions
+}
+
+const props = withDefaults(defineProps<FdsButtonDownloadProps>(), {
+  loading: false,
+  disabled: false,
+  iconPos: 'left',
+  href: undefined,
+  downloadOptions: undefined,
+})
+
+const emit = defineEmits<{
+  (e: 'click', ev: MouseEvent): void
+}>()
+
+const isDownloading = ref(false)
+
+const rootClasses = computed(() => [
+  'inline-block transition-opacity duration-200',
+  props.disabled && 'opacity-20 pointer-events-none',
+])
+
+const elBase = computed(() => [
+  'box-border appearance-none w-full inline-flex items-center justify-center shadow-none p-0.5 text-base',
+  'select-none m-0 rounded-md align-middle whitespace-nowrap no-underline',
+  'transition-[box-shadow,border-color,background-color] duration-200 font-main text-base',
+  'leading-5 tracking-normal',
+])
+
+const stateClasses = computed(() => [
+  'focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4',
+  'focus-visible:outline-blue-500 hover:bg-blue_t-100 active:bg-blue_t-200',
+])
+
+const iconOrderClasses = computed(() => (props.iconPos === 'right' ? 'order-2 ml-2 mr-0' : 'mr-2'))
+
+const buttonClasses = computed(() => [
+  elBase.value,
+  stateClasses.value,
+  'border-0 font-normal bg-transparent',
+  isDownloading.value ? 'cursor-not-allowed text-gray-500' : 'cursor-pointer text-blue-600',
+])
+
+const iconFillClass = computed(() => (isDownloading.value ? 'fill-gray-500' : 'fill-blue-500'))
+
+async function handleDownload(ev: MouseEvent) {
+  if (props.disabled || props.loading || isDownloading.value) {
+    ev.preventDefault()
+    return
+  }
+
+  // If no downloadOptions, just emit click and let default link behavior handle it
+  if (!props.downloadOptions || !props.href) {
+    emit('click', ev)
+    return
+  }
+
+  ev.preventDefault()
+
+  isDownloading.value = true
+
+  const options = props.downloadOptions
+  const authHeader: Record<string, string> = {}
+  authHeader[options.headerAuthKey || 'Authorization'] = `${options.headerAuthValuePrefix || 'Bearer '}${options.token}`
+
+  if (options.accept) {
+    authHeader.Accept = options.accept
+  }
+
+  try {
+    const response = await fetch(props.href, {
+      method: 'GET',
+      headers: authHeader,
+    })
+
+    if (!response.ok) {
+      throw new Error(`Download failed: ${response.status} ${response.statusText}`)
+    }
+
+    // Get blob from response
+    const blob = await response.blob()
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+
+    // Try to get filename from Content-Disposition header
+    const contentDisposition = response.headers.get('content-disposition')
+    let fileName = props.href.substring(props.href.lastIndexOf('/') + 1)
+
+    if (contentDisposition) {
+      const fileNameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/)
+      if (fileNameMatch && fileNameMatch[1]) {
+        fileName = fileNameMatch[1].replace(/['"]/g, '')
+        // Decode URL encoding
+        fileName = fileName.replace(/\+/g, '%20')
+        fileName = decodeURIComponent(fileName)
+      }
+    }
+
+    link.setAttribute('download', fileName)
+    document.body.appendChild(link)
+
+    link.dispatchEvent(
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+        view: window,
+      }),
+    )
+
+    setTimeout(() => {
+      document.body.removeChild(link)
+      URL.revokeObjectURL(url)
+    }, 100)
+
+    if (options.onFinishCallback) {
+      options.onFinishCallback()
+    }
+  } catch (error) {
+    if (options.errorHandler) {
+      options.errorHandler(error)
+    } else {
+      throw error
+    }
+  } finally {
+    isDownloading.value = false
+  }
+}
+
+function onClick(ev: MouseEvent) {
+  if (props.downloadOptions) {
+    handleDownload(ev)
+  } else {
+    if (props.disabled || props.loading) {
+      ev.preventDefault()
+      return
+    }
+    emit('click', ev)
+  }
+}
+</script>
+
+<template>
+  <div
+    :class="rootClasses"
+    :aria-disabled="disabled ? 'true' : undefined"
+  >
+    <button
+      v-bind="$attrs"
+      :class="buttonClasses"
+      :disabled="disabled || loading || isDownloading"
+      type="button"
+      @click="onClick"
+    >
+      <span
+        :class="iconOrderClasses"
+        aria-hidden="true"
+      >
+        <FdsIcon
+          :class="iconFillClass"
+          name="download"
+          :size="24"
+        />
+      </span>
+      {{ text }}
+    </button>
+  </div>
+</template>

package/src/components/Buttons/FdsButtonIcon/FdsButtonIcon.stories.ts

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import FdsButtonIcon from './FdsButtonIcon.vue'
+import icons from '@/assets/icons'
+
+const meta: Meta<typeof FdsButtonIcon> = {
+  title: 'FDS/Buttons/FdsButtonIcon',
+  component: FdsButtonIcon,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      source: {
+        transform: (_code: string, ctx: { args?: Record<string, unknown> }) => {
+          const a = (ctx.args || {}) as Record<string, unknown>
+          const attrs: string[] = []
+          const push = (s: string) => attrs.push(s)
+          if (typeof a.icon === 'string') push(`icon="${a.icon}"`)
+          if (typeof a.size === 'number' && a.size !== 24) push(`size="${a.size}"`)
+          if (a.loading) push(':loading="true"')
+          if (a.disabled) push(':disabled="true"')
+          if (typeof a.type === 'string' && a.type !== 'button') push(`type="${a.type}"`)
+          if (typeof a.ariaLabel === 'string') push(`aria-label="${a.ariaLabel}"`)
+          const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
+          return `<FdsButtonIcon${attrsStr} />`
+        },
+      },
+    },
+  },
+  argTypes: {
+    icon: { control: { type: 'select' }, options: Object.keys(icons) },
+    disabled: { control: { type: 'boolean' } },
+    loading: { control: { type: 'boolean' } },
+    type: { control: { type: 'select' }, options: ['button', 'submit', 'reset'] },
+    ariaLabel: { control: { type: 'text' } },
+    size: { control: { type: 'number' } },
+  },
+  args: {
+    icon: 'information',
+    size: 24,
+    disabled: false,
+    loading: false,
+    type: 'button',
+    ariaLabel: 'More options',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { FdsButtonIcon },
+    setup: () => ({ args }),
+    template: '<FdsButtonIcon v-bind="args" />',
+  }),
+}

package/src/components/Buttons/FdsButtonIcon/FdsButtonIcon.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
+import type { FdsIconButtonProps } from './types'
+
+const props = withDefaults(defineProps<FdsIconButtonProps>(), {
+  size: 24,
+  disabled: false,
+  loading: false,
+  type: 'button',
+  ariaLabel: undefined,
+})
+
+// Remove padding of button (4px) from the size to get the icon size
+const iconSize = computed(() => props.size - 4)
+
+const emit = defineEmits<{
+  (e: 'click', ev: MouseEvent): void
+}>()
+
+const buttonClasses = computed(() => [
+  'inline-flex items-center justify-center rounded-md p-[2px] max-w-[48px] max-h-[48px] transition-colors duration-200 fill-blue-500 hover:bg-blue_t-100 active:bg-blue_t-200 focus-visible:outline-dashed focus-visible:outline-2 outline-blue-500',
+  props.disabled ? 'opacity-20 cursor-not-allowed' : 'cursor-pointer',
+])
+
+function onClick(ev: MouseEvent) {
+  if (props.disabled || props.loading) {
+    ev.preventDefault()
+    return
+  }
+  emit('click', ev)
+}
+</script>
+
+<template>
+  <button
+    :id="id"
+    :type="type"
+    :disabled="disabled"
+    :aria-label="ariaLabel"
+    :aria-disabled="ariaDisabled"
+    :class="buttonClasses"
+    @click="onClick"
+  >
+    <FdsIcon
+      v-if="!loading"
+      :size="iconSize"
+      :name="icon"
+    />
+    <FdsIcon
+      v-else
+      :size="iconSize"
+      name="spinner"
+      class="animate-spin"
+    />
+  </button>
+</template>

package/src/components/Buttons/FdsButtonIcon/types.ts

@@ -0,0 +1,12 @@
+import type { FdsIconName } from '@/components/FdsIcon/types'
+
+export interface FdsIconButtonProps {
+  icon: FdsIconName
+  size?: number
+  disabled?: boolean
+  loading?: boolean
+  type?: 'button' | 'submit' | 'reset'
+  ariaLabel?: string
+  id?: string
+  ariaDisabled?: boolean
+}

package/src/components/Buttons/FdsButtonMinor/FdsButtonMinor.stories.ts

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import FdsButtonMinor from './FdsButtonMinor.vue'
+import icons from '@/assets/icons'
+
+const meta: Meta<typeof FdsButtonMinor> = {
+  title: 'FDS/Buttons/FdsButtonMinor',
+  component: FdsButtonMinor,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      source: {
+        transform: (_code: string, ctx: { args?: Record<string, unknown> }) => {
+          const a = (ctx.args || {}) as Record<string, unknown>
+          const attrs: string[] = []
+          const push = (s: string) => attrs.push(s)
+          if (typeof a.text === 'string') push(`text="${a.text}"`)
+          if (typeof a.icon === 'string') push(`icon="${a.icon}"`)
+          if (typeof a.iconPos === 'string' && a.iconPos !== 'left') push(`icon-pos="${a.iconPos}"`)
+          if (a.invert) push(':invert="true"')
+          if (a.loading) push(':loading="true"')
+          if (a.disabled) push(':disabled="true"')
+          if (a.block) push(':block="true"')
+          if (typeof a.as === 'string' && a.as !== 'button') push(`as="${a.as}"`)
+          if (typeof a.type === 'string' && a.type !== 'button') push(`type="${a.type}"`)
+          if (typeof a.href === 'string' && a.href) push(`href="${a.href}"`)
+          const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
+          return `<FdsButtonMinor${attrsStr} />`
+        },
+      },
+    },
+  },
+  argTypes: {
+    text: { control: { type: 'text' } },
+    icon: { control: { type: 'select' }, options: Object.keys(icons) },
+    iconPos: { control: { type: 'inline-radio' }, options: ['left', 'right'] },
+    invert: { control: { type: 'boolean' } },
+    loading: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    block: { control: { type: 'boolean' } },
+    textSelection: { control: { type: 'boolean' } },
+    as: { control: { type: 'select' }, options: ['button', 'a', 'router-link'] },
+    type: { control: { type: 'select' }, options: ['button', 'submit', 'reset'] },
+    href: { control: { type: 'text' } },
+  },
+  args: {
+    text: 'Minor',
+    invert: false,
+    loading: false,
+    disabled: false,
+    block: false,
+    textSelection: false,
+    icon: undefined,
+    iconPos: 'left',
+    as: 'button',
+    type: 'button',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { FdsButtonMinor },
+    setup: () => ({ args }),
+    template: '<FdsButtonMinor v-bind="args" />',
+  }),
+}