fds-vue-core 2.1.1 → 2.1.3

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

@@ -1,87 +0,0 @@
-<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

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

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

@@ -1,111 +0,0 @@
-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

@@ -1,187 +0,0 @@
-<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

@@ -1,55 +0,0 @@
-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

@@ -1,57 +0,0 @@
-<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

@@ -1,12 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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" />',
-  }),
-}