fds-vue-core 2.1.4 → 2.1.6

package/src/components/Form/FdsRadio/FdsRadio.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { useHasSlot } from '@/composables/useHasSlots'
+import { computed } from 'vue'
+import type { FdsRadioProps } from './types'
+
+// Support v-model for selected value in a radio group (string|number)
+const modelValue = defineModel<string | number>({ default: undefined, required: false })
+
+const props = withDefaults(defineProps<FdsRadioProps>(), {
+  label: undefined,
+  checked: false,
+  disabled: false,
+  value: undefined,
+  name: undefined,
+  id: undefined,
+  required: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | number): void
+  (e: 'change', value: string | number): void
+  (e: 'input', value: string | number): void
+}>()
+
+const autoId = `fds-radio-${Math.random().toString(36).slice(2, 9)}`
+const inputId = computed(() => props.id ?? autoId)
+
+const hasLabelSlot = useHasSlot()
+
+// Proxy for v-model on radio groups: binds the selected value (string|number)
+const radioModel = computed({
+  get() {
+    return modelValue.value
+  },
+  set(newChecked: string | number) {
+    emit('update:modelValue', newChecked)
+    emit('change', newChecked)
+    emit('input', newChecked)
+  },
+})
+
+const wrapperClasses = computed(() => ['block relative flex items-center mb-2 last:mb-0'])
+const innerWrapperClasses = computed(() => [
+  'flex p-0.5 items-start rounded-l-xl rounded-r-md',
+  'hover:bg-blue_t-100 active:bg-blue_t-200',
+  '[&:has(:focus-visible)]:outline-2 [&:has(:focus-visible)]:outline-dashed [&:has(:focus-visible)]:-outline-offset-2 [&:has(:focus-visible)]:outline-blue-500',
+  props.disabled && 'hover:bg-transparent active:bg-transparent',
+])
+
+const inputClasses = computed(() => [
+  'peer z-2 bg-white min-w-[20px] min-h-[20px] focus-visible:outline-none rounded-full accent-blue-500',
+  props.disabled && 'cursor-not-allowed',
+])
+</script>
+
+<template>
+  <div :class="wrapperClasses">
+    <label
+      :for="inputId"
+      :class="[innerWrapperClasses, { 'cursor-not-allowed': disabled }]"
+      v-bind="$attrs"
+    >
+      <input
+        :id="inputId"
+        :name="name"
+        :value="value"
+        v-model="radioModel"
+        :disabled="disabled"
+        :required="required"
+        type="radio"
+        :class="inputClasses"
+        class="m-[2px]"
+      />
+      <span
+        v-if="hasLabelSlot || label"
+        class="relative inline-block leading-6 pl-1 select-none"
+        :class="{ 'cursor-not-allowed': disabled }"
+      >
+        <template v-if="hasLabelSlot">
+          <slot></slot>
+        </template>
+        <template v-else-if="label">
+          {{ label }}
+        </template>
+      </span>
+    </label>
+  </div>
+</template>

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

@@ -0,0 +1,12 @@
+export interface FdsRadioProps {
+  label?: string
+  checked?: boolean
+  disabled?: boolean
+  value?: string | number
+  name?: string
+  id?: string
+  required?: boolean
+  onKeydown?: ((event: KeyboardEvent) => void) | Array<(event: KeyboardEvent) => void>
+  onBlur?: ((event: FocusEvent) => void) | Array<(event: FocusEvent) => void>
+  onChange?: ((event: Event) => void) | Array<(event: Event) => void>
+}

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

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import FdsSelect from './FdsSelect.vue'
+
+const meta: Meta<typeof FdsSelect> = {
+  title: 'FDS/Form/FdsSelect',
+  component: FdsSelect,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: { control: { type: 'text' } },
+    label: { control: { type: 'text' } },
+    meta: { control: { type: 'text' } },
+    disabled: { control: { type: 'boolean' } },
+    optional: { control: { type: 'boolean' } },
+    valid: { control: { type: 'select' }, options: ['true', 'false', 'null'] },
+    invalidMessage: { control: { type: 'text' } },
+    placeholder: { control: { type: 'text' } },
+  },
+  args: {
+    modelValue: '',
+    label: 'Välj alternativ',
+    meta: undefined,
+    disabled: false,
+    optional: false,
+    valid: 'null',
+    invalidMessage: undefined,
+    placeholder: undefined,
+    options: [
+      { value: 'option1', label: 'Alternativ 1' },
+      { value: 'option2', label: 'Alternativ 2' },
+      { value: 'option3', label: 'Alternativ 3', disabled: true },
+      { value: 'option4', label: 'Alternativ 4' },
+    ],
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { FdsSelect },
+    setup: () => ({ args }),
+    template: `<FdsSelect v-bind="args" />`,
+  }),
+}
+
+export const Disabled: Story = {
+  args: { disabled: true },
+  render: (args) => ({
+    components: { FdsSelect },
+    setup: () => ({ args }),
+    template: `<FdsSelect v-bind="args" />`,
+  }),
+}
+
+export const Invalid: Story = {
+  args: {
+    valid: 'false',
+    invalidMessage: 'Välj ett giltigt alternativ',
+  },
+  render: (args) => ({
+    components: { FdsSelect },
+    setup: () => ({ args }),
+    template: `<FdsSelect v-bind="args" />`,
+  }),
+}
+
+export const Valid: Story = {
+  args: {
+    valid: 'true',
+    modelValue: 'option1',
+  },
+  render: (args) => ({
+    components: { FdsSelect },
+    setup: () => ({ args }),
+    template: `<FdsSelect v-bind="args" />`,
+  }),
+}

package/src/components/Form/FdsSelect/FdsSelect.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
+import type { FdsSelectProps } 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<FdsSelectProps>(), {
+  value: undefined,
+  label: undefined,
+  meta: undefined,
+  disabled: false,
+  optional: false,
+  valid: undefined,
+  invalidMessage: undefined,
+  name: undefined,
+  id: undefined,
+  placeholder: undefined,
+  options: undefined,
+})
+
+const emit = defineEmits<{
+  (e: 'input', ev: Event): void
+  (e: 'change', ev: Event): void
+  (e: 'update:value', value: string): void
+}>()
+
+const autoId = `fds-select-${Math.random().toString(36).slice(2, 9)}`
+const selectId = computed(() => props.id ?? autoId)
+
+const slots = useSlots()
+const hasDefaultSlot = computed(() => !!slots.default)
+
+const showInvalidMessage = computed(
+  () => props.valid === 'false' && !props.optional && props.invalidMessage && !props.disabled,
+)
+const isInvalid = computed(() => props.valid === 'false' && !props.optional && !props.disabled)
+
+const selectClasses = computed(() => [
+  'block w-full rounded-md border border-gray-500 px-3 py-2 pr-8 h-12 mb-4',
+  'focus:outline-2 focus:outline-blue-500 focus:border-transparent',
+  'appearance-none',
+  props.disabled
+    ? 'outline-dashed text-gray-600 outline-2 -outline-offset-2 outline-gray-400 cursor-not-allowed border-transparent'
+    : 'bg-white cursor-pointer',
+  isInvalid.value && !props.disabled && 'outline-2 -outline-offset-2 outline-red-600 text-red-600',
+])
+
+// Use modelValue if bound via v-model, otherwise use value prop
+const internalValue = computed({
+  get: () => (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 handleChange(ev: Event) {
+  emit('change', ev)
+  emit('input', ev)
+}
+</script>
+
+<template>
+  <div class="w-full mb-4">
+    <label
+      v-if="label"
+      :for="selectId"
+      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 mb-1"
+    >
+      {{ meta }}
+    </div>
+    <div class="relative">
+      <select
+        :id="selectId"
+        :name="name || undefined"
+        :disabled="disabled"
+        v-model="internalValue"
+        :aria-invalid="valid === 'false' ? 'true' : undefined"
+        :class="selectClasses"
+        v-bind="$attrs"
+        @change="handleChange"
+        @input="(e) => emit('input', e)"
+      >
+        <option
+          v-if="placeholder && !hasDefaultSlot"
+          value=""
+          disabled
+        >
+          {{ placeholder }}
+        </option>
+        <!-- Render options from prop if no slot is provided -->
+        <template v-if="!hasDefaultSlot && options">
+          <option
+            v-for="option in options"
+            :key="option.value"
+            :value="option.value"
+            :disabled="option.disabled"
+          >
+            {{ option.label }}
+          </option>
+        </template>
+        <!-- Render slot content (supports optgroups and custom options) -->
+        <slot v-else />
+      </select>
+      <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
+        <FdsIcon
+          name="arrowDown"
+          :size="24"
+          :class="{
+            'fill-gray-500': disabled,
+            'fill-red-500': isInvalid && !disabled,
+            'fill-blue-500': !disabled && !isInvalid,
+          }"
+        />
+      </div>
+    </div>
+    <div
+      v-if="showInvalidMessage"
+      class="text-red-600 font-bold mt-1"
+    >
+      {{ invalidMessage }}
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,13 @@
+export interface FdsSelectProps {
+  value?: string
+  label?: string
+  meta?: string
+  disabled?: boolean
+  optional?: boolean
+  valid?: 'true' | 'false' | 'null'
+  invalidMessage?: string
+  name?: string
+  id?: string
+  placeholder?: string
+  options?: { value: string; label: string; disabled?: boolean }[]
+}

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

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import FdsTextarea from './FdsTextarea.vue'
+
+const meta: Meta<typeof FdsTextarea> = {
+  title: 'FDS/Form/FdsTextarea',
+  component: FdsTextarea,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: { control: { type: 'text' } },
+    label: { control: { type: 'text' } },
+    meta: { control: { type: 'text' } },
+    disabled: { control: { type: 'boolean' } },
+    optional: { control: { type: 'boolean' } },
+    valid: { control: { type: 'select' }, options: ['true', 'false', 'null'] },
+    invalidMessage: { control: { type: 'text' } },
+    rows: { control: { type: 'number', min: 1, step: 1 } },
+    id: { control: { type: 'text' } },
+    name: { control: { type: 'text' } },
+  },
+  args: {
+    modelValue: '',
+    label: 'Beskrivning',
+    meta: '',
+    disabled: false,
+    optional: false,
+    valid: 'null',
+    invalidMessage: undefined,
+    rows: 4,
+    id: '',
+    name: '',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { FdsTextarea },
+    setup: () => ({ args }),
+    template: `<FdsTextarea v-bind="args" />`,
+  }),
+}
+
+export const Disabled: Story = {
+  args: { disabled: true },
+  render: (args) => ({
+    components: { FdsTextarea },
+    setup: () => ({ args }),
+    template: `<FdsTextarea v-bind="args" />`,
+  }),
+}

package/src/components/Form/FdsTextarea/FdsTextarea.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
+import type { FdsTextareaProps } 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<FdsTextareaProps>(), {
+  value: undefined,
+  label: undefined,
+  meta: undefined,
+  disabled: false,
+  optional: false,
+  valid: undefined,
+  rows: 4,
+  name: undefined,
+  id: undefined,
+})
+
+const emit = defineEmits<{
+  (e: 'input', ev: Event): void
+  (e: 'update:value', value: string): void
+}>()
+
+const autoId = `fds-textarea-${Math.random().toString(36).slice(2, 9)}`
+const textareaId = computed(() => props.id ?? autoId)
+
+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 inputClasses = computed(() => [
+  'block w-full rounded-md border border-gray-500 px-3 py-2',
+  'focus:outline-2 focus:outline-blue-500 focus:border-transparent',
+  props.disabled
+    ? 'outline-dashed outline-2 -outline-offset-2 outline-gray-400 cursor-not-allowed border-transparent bg-gray-50'
+    : 'bg-white',
+  isInvalid.value && 'outline-2 -outline-offset-2 outline-red-600',
+])
+
+const validationIconClasses = computed(() => ['absolute right-3 top-3 flex items-center gap-2 pointer-events-none'])
+
+// Use modelValue if bound via v-model, otherwise use value prop
+const internalValue = computed({
+  get: () => (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)
+  },
+})
+</script>
+
+<template>
+  <div class="w-full mb-4">
+    <label
+      v-if="label"
+      :for="textareaId"
+      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 mb-1"
+    >
+      {{ meta }}
+    </div>
+    <div class="relative">
+      <textarea
+        :id="textareaId"
+        :name="name || undefined"
+        :disabled="disabled"
+        :rows="rows"
+        v-model="internalValue"
+        :aria-invalid="valid === 'false' ? 'true' : undefined"
+        :class="inputClasses"
+        v-bind="$attrs"
+        @input="(e) => emit('input', e)"
+      />
+      <div :class="validationIconClasses">
+        <FdsIcon
+          v-if="isInvalid"
+          name="alert"
+          class="fill-red-600"
+        />
+        <FdsIcon
+          v-if="isValid"
+          name="bigSuccess"
+        />
+      </div>
+    </div>
+    <div
+      v-if="showInvalidMessage"
+      class="text-red-600 font-bold mt-1"
+    >
+      {{ invalidMessage }}
+    </div>
+  </div>
+  <div
+    v-if="isValid"
+    class="sr-only"
+  >
+    OK
+  </div>
+</template>

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

@@ -0,0 +1,12 @@
+export type FdsTextareaProps = {
+  value?: string
+  label?: string
+  meta?: string
+  disabled?: boolean
+  optional?: boolean
+  valid?: 'true' | 'false' | 'null'
+  invalidMessage?: string
+  rows?: number
+  name?: string
+  id?: string
+}