fds-vue-core 2.1.4 → 2.1.6

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

@@ -0,0 +1,319 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import FdsInput from './FdsInput.vue'
+
+const meta: Meta<typeof FdsInput> = {
+  title: 'FDS/Form/FdsInput',
+  component: FdsInput,
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: { type: 'text' },
+      description: 'Input value (use v-model for two-way binding)',
+    },
+    label: {
+      control: { type: 'text' },
+      description: 'Label text displayed above the input',
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      description: 'Disables the input field',
+    },
+    valid: {
+      control: { type: 'select' },
+      options: ['true', 'false', 'null'],
+      description: 'Validation state: "true" for valid, "false" for invalid, "null" for neutral',
+    },
+    optional: {
+      control: { type: 'boolean' },
+      description: 'Marks the field as optional (hides invalid message if true)',
+    },
+    invalidMessage: {
+      control: { type: 'text' },
+      description: 'Error message displayed when validation is false',
+    },
+    required: {
+      control: { type: 'boolean' },
+      description: 'Marks the field as required',
+    },
+    labelLeft: {
+      control: { type: 'boolean' },
+      description: 'If true, positions the label to the left of the input',
+    },
+    meta: {
+      control: { type: 'text' },
+      description: 'Meta text displayed below the label',
+    },
+    type: {
+      control: { type: 'select' },
+      options: ['text', 'search', 'email', 'password'],
+      description: 'Input type',
+    },
+    clearButton: {
+      control: { type: 'boolean' },
+      description: 'Shows a clear button when input has a value',
+    },
+    name: {
+      control: { type: 'text' },
+      description: 'HTML name attribute for the input',
+    },
+    id: {
+      control: { type: 'text' },
+      description: 'HTML id attribute for the input',
+    },
+    passwordLabels: {
+      control: { type: 'object' },
+      description: 'Array with [showLabel, hideLabel] for password toggle button',
+    },
+    locale: {
+      control: { type: 'select' },
+      options: ['sv', 'en'],
+      description: 'Locale for translations ("sv" for Swedish, "en" for English)',
+    },
+    size: {
+      control: { type: 'number' },
+      description: 'HTML size attribute for the input',
+    },
+    maxlength: {
+      control: { type: 'number' },
+      description: 'Maximum length of the input value',
+    },
+    mask: {
+      control: { type: 'text' },
+      description: 'IMask pattern string (e.g., "00000000-0000" for personnummer)',
+    },
+    maskOptions: {
+      control: { type: 'object' },
+      description: 'Additional options for IMask (e.g., { lazy: true, placeholderChar: "" })',
+    },
+  },
+  args: {
+    value: '',
+    label: 'Label',
+    labelLeft: false,
+    meta: '',
+    valid: 'null',
+    optional: false,
+    invalidMessage: '',
+    clearButton: false,
+    disabled: false,
+    required: false,
+    type: 'text',
+    passwordLabels: undefined,
+    locale: 'sv',
+    size: undefined,
+    maxlength: undefined,
+    mask: undefined,
+    maskOptions: undefined,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Basic: Story = {
+  render: (args) => ({
+    components: { FdsInput },
+    setup: () => ({ args }),
+    template: '<FdsInput v-bind="args" />',
+  }),
+  args: {
+    label: 'Namn',
+    meta: 'Ange ditt fullständiga namn',
+  },
+}
+
+export const WithVModel: Story = {
+  render: () => ({
+    components: { FdsInput },
+    setup() {
+      const text = ref('')
+      return { text }
+    },
+    template: `
+      <div>
+        <FdsInput v-model="text" label="Sök" placeholder="Sök..." clearButton />
+        <p class="mt-4">Värde: {{ text }}</p>
+      </div>
+    `,
+  }),
+}
+
+export const WithMeta: Story = {
+  render: (args) => ({
+    components: { FdsInput },
+    setup: () => ({ args }),
+    template: '<FdsInput v-bind="args" meta="Detta är hjälptext som visas under labeln" />',
+  }),
+  args: {
+    label: 'E-postadress',
+  },
+}
+
+export const WithValidation: Story = {
+  render: () => ({
+    components: { FdsInput },
+    setup() {
+      const email = ref('')
+      const valid = ref<string>('null')
+
+      const validateEmail = (value: string) => {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+        if (value.length === 0) {
+          valid.value = 'null'
+        } else if (emailRegex.test(value)) {
+          valid.value = 'true'
+        } else {
+          valid.value = 'false'
+        }
+      }
+
+      return { email, valid, validateEmail }
+    },
+    template: `
+      <FdsInput
+        v-model="email"
+        label="E-postadress"
+        type="email"
+        :valid="valid"
+        invalid-message="Ange en giltig e-postadress"
+        @input="validateEmail(email)"
+      />
+    `,
+  }),
+}
+
+export const Disabled: Story = {
+  render: (args) => ({
+    components: { FdsInput },
+    setup: () => ({ args }),
+    template: '<FdsInput v-bind="args" />',
+  }),
+  args: {
+    label: 'Inaktiverat fält',
+    value: 'Detta värde kan inte ändras',
+    disabled: true,
+  },
+}
+
+export const Required: Story = {
+  render: (args) => ({
+    components: { FdsInput },
+    setup: () => ({ args }),
+    template: '<FdsInput v-bind="args" />',
+  }),
+  args: {
+    label: 'Obligatoriskt fält',
+    required: true,
+    invalidMessage: 'Detta fält är obligatoriskt',
+  },
+}
+
+export const WithLabelLeft: Story = {
+  render: (args) => ({
+    components: { FdsInput },
+    setup: () => ({ args }),
+    template: '<FdsInput v-bind="args" />',
+  }),
+  args: {
+    label: 'Label till vänster',
+    labelLeft: true,
+    meta: 'Meta-text visas här',
+  },
+}
+
+export const Password: Story = {
+  render: () => ({
+    components: { FdsInput },
+    setup() {
+      const password = ref('')
+      return { password }
+    },
+    template: `
+      <FdsInput
+        v-model="password"
+        label="Lösenord"
+        type="password"
+        meta="Minst 8 tecken"
+      />
+    `,
+  }),
+}
+
+export const Search: Story = {
+  render: () => ({
+    components: { FdsInput },
+    setup() {
+      const searchTerm = ref('')
+      return { searchTerm }
+    },
+    template: `
+      <FdsInput
+        v-model="searchTerm"
+        label="Sök"
+        type="search"
+        clearButton
+        placeholder="Sök efter..."
+      />
+    `,
+  }),
+}
+
+export const WithMask: Story = {
+  render: () => ({
+    components: { FdsInput },
+    setup() {
+      const personnummer = ref('')
+      return { personnummer }
+    },
+    template: `
+      <div>
+        <FdsInput
+          v-model="personnummer"
+          label="Personnummer"
+          mask="00000000-0000"
+          :maskOptions="{ lazy: true }"
+          meta="Format: yyyymmdd-nnnn"
+        />
+        <p class="mt-4">Värde: {{ personnummer }}</p>
+      </div>
+    `,
+  }),
+}
+
+export const WithMaskPhone: Story = {
+  render: () => ({
+    components: { FdsInput },
+    setup() {
+      const phone = ref('')
+      return { phone }
+    },
+    template: `
+      <div>
+        <FdsInput
+          v-model="phone"
+          label="Telefonnummer"
+          mask="+46 (000) 000-00-00"
+          :maskOptions="{ lazy: true }"
+        />
+        <p class="mt-4">Värde: {{ phone }}</p>
+      </div>
+    `,
+  }),
+}
+
+export const AllStates: Story = {
+  render: () => ({
+    components: { FdsInput },
+    setup: () => ({}),
+    template: `
+      <div class="space-y-6">
+        <FdsInput label="Neutral" value="Neutralt tillstånd" />
+        <FdsInput label="Valid" value="Giltigt värde" valid="true" />
+        <FdsInput label="Invalid" value="Ogiltigt värde" valid="false" invalid-message="Detta är ett felmeddelande" />
+        <FdsInput label="Disabled" value="Inaktiverat" disabled />
+        <FdsInput label="Required" required invalid-message="Detta fält är obligatoriskt" />
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+// @ts-ignore - IMask types may not be resolved in build
+import IMask from 'imask'
+import FdsButtonIcon from '@/components/Buttons/FdsButtonIcon/FdsButtonIcon.vue'
+import FdsButtonMinor from '@/components/Buttons/FdsButtonMinor/FdsButtonMinor.vue'
+import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
+import type { FdsInputProps } from './types'
+
+// Support both v-model (modelValue) and :value prop for backward compatibility
+const modelValue = defineModel<string>({ default: undefined, required: false })
+
+const props = withDefaults(defineProps<FdsInputProps>(), {
+  value: undefined,
+  label: undefined,
+  disabled: false,
+  valid: undefined,
+  optional: false,
+  required: false,
+  labelLeft: false,
+  meta: undefined,
+  type: 'text',
+  passwordLabels: undefined,
+  clearButton: false,
+  name: undefined,
+  id: undefined,
+  mask: undefined,
+  maskOptions: undefined,
+})
+
+const emit = defineEmits<{
+  (e: 'input', ev: Event): void
+  (e: 'clearInput'): void
+  (e: 'update:value', value: string): void
+}>()
+
+const autoId = `fds-input-${Math.random().toString(36).slice(2, 9)}`
+const inputId = computed(() => props.id ?? autoId)
+
+const clearButtonLabel = computed(() => (props.locale === 'sv' ? 'Rensa input' : 'Clear input'))
+
+const showInvalidMessage = computed(() => props.valid === 'false' && !props.optional && props.invalidMessage)
+const isInvalid = computed(() => props.valid === 'false' && !props.optional && !props.disabled)
+const isValid = computed(() => props.valid === 'true')
+const showPasswordToggle = computed(() => isPasswordType.value && internalValue.value.length > 0)
+
+const inputClasses = computed(() => [
+  'block w-full rounded-md border border-gray-500 px-3 py-[calc(0.75rem-1px)] mb-6',
+  'focus:outline-2 focus:outline-blue-500 -outline-offset-2 focus:border-transparent',
+  props.disabled ? 'outline-dashed outline-2 outline-gray-400 cursor-not-allowed border-transparent' : 'bg-white',
+  isInvalid.value && 'outline-2 outline-red-600',
+])
+
+const validationIconClasses = computed(() => [
+  'absolute flex gap-2 right-4 top-1/2 -translate-y-1/2 flex items-center justify-end',
+])
+
+// Use modelValue if bound via v-model, otherwise use value prop
+const internalValue = computed({
+  get: () =>
+    // If modelValue is explicitly set (via v-model), use it
+    // Otherwise fall back to value prop
+    modelValue.value !== undefined ? modelValue.value : (props.value ?? ''),
+  set: (newValue: string) => {
+    // Update modelValue if it's being used
+    if (modelValue.value !== undefined) {
+      modelValue.value = newValue
+    }
+    // Always emit update:value for backward compatibility
+    emit('update:value', newValue)
+  },
+})
+
+function onClear() {
+  internalValue.value = ''
+  emit('clearInput')
+}
+
+const showPassword = ref(false)
+const isPasswordType = computed(() => props.type === 'password')
+
+function toggleShowPassword() {
+  showPassword.value = !showPassword.value
+}
+
+// IMask setup
+const inputRef = ref<HTMLInputElement | null>(null)
+
+let maskInstance: any = null
+
+const createMask = () => {
+  // Destroy existing mask if any
+  if (maskInstance) {
+    maskInstance.destroy()
+    maskInstance = null
+  }
+
+  // Create new mask if mask prop is provided and input exists
+  if (props.mask && inputRef.value) {
+    const maskConfig = {
+      mask: props.mask,
+      ...props.maskOptions,
+    }
+
+    maskInstance = IMask(inputRef.value, maskConfig as any)
+
+    // Sync mask value with internalValue
+    if (internalValue.value) {
+      maskInstance.value = internalValue.value
+    }
+
+    // Update internalValue when mask value changes
+    maskInstance.on('accept', () => {
+      if (maskInstance) {
+        internalValue.value = maskInstance.value
+      }
+    })
+  }
+}
+
+onMounted(() => {
+  nextTick(() => {
+    createMask()
+  })
+})
+
+onBeforeUnmount(() => {
+  if (maskInstance) {
+    maskInstance.destroy()
+    maskInstance = null
+  }
+})
+
+// Watch for mask prop changes and recreate mask
+watch(
+  () => props.mask,
+  () => {
+    nextTick(() => {
+      createMask()
+    })
+  },
+)
+
+// Watch for external value changes and update mask
+watch(
+  () => props.value,
+  (newValue) => {
+    if (maskInstance && newValue !== undefined && newValue !== maskInstance.value) {
+      maskInstance.value = newValue
+    }
+  },
+)
+
+watch(
+  () => modelValue.value,
+  (newValue) => {
+    if (maskInstance && newValue !== undefined && newValue !== maskInstance.value) {
+      maskInstance.value = newValue
+    }
+  },
+)
+</script>
+
+<template>
+  <div class="w-full mb-4">
+    <div :class="{ 'flex flex-row gap-4': labelLeft }">
+      <div>
+        <label
+          v-if="label"
+          :for="inputId"
+          class="block font-bold text-gray-900 cursor-pointer"
+          :class="{ 'mb-0': meta, 'mb-1': !meta }"
+          >{{ label }}</label
+        >
+        <div
+          v-if="meta"
+          class="font-thin"
+          :class="{ 'mb-1': !labelLeft }"
+        >
+          {{ meta }}
+        </div>
+      </div>
+      <div :class="{ 'flex-1': labelLeft }">
+        <div class="relative">
+          <input
+            ref="inputRef"
+            :id="inputId"
+            :name="name || undefined"
+            :type="isPasswordType ? (showPassword ? 'text' : 'password') : type"
+            :disabled="disabled"
+            :required="required"
+            :size="size as any"
+            :maxlength="maxlength as any"
+            v-model="internalValue"
+            :aria-invalid="valid === 'false' ? 'true' : undefined"
+            :class="inputClasses"
+            v-bind="$attrs"
+            @input="$emit('input', $event)"
+          />
+          <div :class="validationIconClasses">
+            <FdsIcon
+              v-if="isInvalid"
+              name="alert"
+              class="fill-red-600"
+            />
+            <FdsIcon
+              v-if="isValid"
+              name="bigSuccess"
+            />
+            <FdsButtonIcon
+              v-if="clearButton && !!internalValue && !disabled"
+              icon="cross"
+              :ariaLabel="clearButtonLabel"
+              @click="onClear"
+            />
+            <FdsButtonMinor
+              v-if="showPasswordToggle"
+              :icon="showPassword ? 'viewOff' : 'viewOn'"
+              text=""
+              @click="toggleShowPassword"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="showInvalidMessage"
+      class="text-red-600 font-bold mt-1"
+    >
+      {{ invalidMessage }}
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,25 @@
+export interface FdsInputProps {
+  value?: string
+  label?: string
+  disabled?: boolean
+  valid?: string
+  optional?: boolean
+  invalidMessage?: string
+  required?: boolean
+  labelLeft?: boolean
+  meta?: string
+  type?: 'text' | 'search' | 'email' | 'password'
+  clearButton?: boolean
+  name?: string
+  id?: string
+  passwordLabels?: string[]
+  locale?: 'sv' | 'en'
+  size?: number | string
+  maxlength?: number
+  mask?: string | RegExp | Array<string | RegExp>
+  maskOptions?: {
+    lazy?: boolean
+    placeholderChar?: string
+    [key: string]: unknown
+  }
+}

package/src/components/Form/FdsRadio/FdsRadio.stories.ts

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref, watch } from 'vue'
+import FdsRadio from './FdsRadio.vue'
+
+const meta: Meta<typeof FdsRadio> = {
+  title: 'FDS/Form/FdsRadio',
+  component: FdsRadio,
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text' },
+    checked: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    name: { control: 'text' },
+    value: { control: 'text' },
+    id: { control: 'text' },
+  },
+  args: {
+    label: 'Radio label',
+    checked: false,
+    disabled: false,
+    name: 'group1',
+    value: 'optionA',
+    id: undefined,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { FdsRadio },
+    setup() {
+      const checked = ref(args.checked)
+      watch(
+        () => args.checked,
+        (v) => (checked.value = v),
+      )
+      return { args, checked }
+    },
+    template: `
+      <FdsRadio v-bind="args" v-model:checked="checked" />
+    `,
+  }),
+}
+
+export const Group: Story = {
+  render: () => ({
+    components: { FdsRadio },
+    setup() {
+      const selected = ref('a')
+      return { selected }
+    },
+    template: `
+      <div class="space-y-2">
+        <FdsRadio name="g1" value="a" v-model:checked="selected === 'a'" @change="(v) => selected = v ? 'a' : selected">Alternative A</FdsRadio>
+        <FdsRadio name="g1" value="b" v-model:checked="selected === 'b'" @change="(v) => selected = v ? 'b' : selected">Alternative B</FdsRadio>
+        <FdsRadio name="g1" value="c" v-model:checked="selected === 'c'" @change="(v) => selected = v ? 'c' : selected">Alternative C</FdsRadio>
+        <div>Selected: {{ selected }}</div>
+      </div>
+    `,
+  }),
+}