fds-vue-core 2.1.4 → 2.1.6

package/src/components/Table/FdsTable/FdsTable.stories.ts

@@ -0,0 +1,221 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import FdsTableHead from '@/components/Table/FdsTableHead/FdsTableHead.vue'
+import FdsTable from './FdsTable.vue'
+
+const meta: Meta<typeof FdsTable> = {
+  title: 'FDS/Table/FdsTable',
+  component: FdsTable,
+  tags: ['autodocs'],
+  argTypes: {
+    bordered: { control: { type: 'boolean' } },
+    compact: { control: { type: 'boolean' } },
+  },
+  args: {
+    bordered: false,
+    compact: false,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const tableTransform = (storyContext: { args?: { bordered?: boolean; compact?: boolean } }) => {
+  const args = storyContext?.args || {}
+  const attrs = []
+  if (args.bordered) attrs.push(':bordered="true"')
+  if (args.compact) attrs.push(':compact="true"')
+
+  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
+  return `<FdsTable${attrsStr}>
+  <table>
+    <thead>
+      <tr>
+        <FdsTableHead>ID</FdsTableHead>
+        <FdsTableHead>Namn</FdsTableHead>
+        <FdsTableHead>E-post</FdsTableHead>
+        <FdsTableHead>Roll</FdsTableHead>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="row in sampleData" :key="row.id">
+        <td>{{ row.id }}</td>
+        <td>{{ row.name }}</td>
+        <td>{{ row.email }}</td>
+        <td>{{ row.role }}</td>
+      </tr>
+    </tbody>
+  </table>
+</FdsTable>`
+}
+
+const sampleData = [
+  { id: 1, name: 'Anna Andersson', email: 'anna@example.com', role: 'Admin' },
+  { id: 2, name: 'Erik Eriksson', email: 'erik@example.com', role: 'User' },
+  { id: 3, name: 'Maria Svensson', email: 'maria@example.com', role: 'User' },
+  { id: 4, name: 'Lars Larsson', email: 'lars@example.com', role: 'Moderator' },
+]
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { FdsTable, FdsTableHead },
+    setup: () => ({ args, sampleData }),
+    template: `
+      <FdsTable v-bind="args">
+        <table>
+          <thead>
+            <tr>
+              <FdsTableHead>ID</FdsTableHead>
+              <FdsTableHead>Namn</FdsTableHead>
+              <FdsTableHead>E-post</FdsTableHead>
+              <FdsTableHead>Roll</FdsTableHead>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="row in sampleData" :key="row.id">
+              <td>{{ row.id }}</td>
+              <td>{{ row.name }}</td>
+              <td>{{ row.email }}</td>
+              <td>{{ row.role }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </FdsTable>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        transform: tableTransform,
+      },
+    },
+  },
+}
+
+export const Bordered: Story = {
+  args: { bordered: true },
+  render: (args) => ({
+    components: { FdsTable, FdsTableHead },
+    setup: () => ({ args, sampleData }),
+    template: `
+      <FdsTable v-bind="args">
+        <table>
+          <thead>
+            <tr>
+              <FdsTableHead>ID</FdsTableHead>
+              <FdsTableHead>Namn</FdsTableHead>
+              <FdsTableHead>E-post</FdsTableHead>
+              <FdsTableHead>Roll</FdsTableHead>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="row in sampleData" :key="row.id">
+              <td>{{ row.id }}</td>
+              <td>{{ row.name }}</td>
+              <td>{{ row.email }}</td>
+              <td>{{ row.role }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </FdsTable>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        transform: tableTransform,
+      },
+    },
+  },
+}
+
+export const Compact: Story = {
+  args: { compact: true },
+  render: (args) => ({
+    components: { FdsTable, FdsTableHead },
+    setup: () => ({ args, sampleData }),
+    template: `
+      <FdsTable v-bind="args">
+        <table>
+          <thead>
+            <tr>
+              <FdsTableHead>ID</FdsTableHead>
+              <FdsTableHead>Namn</FdsTableHead>
+              <FdsTableHead>E-post</FdsTableHead>
+              <FdsTableHead>Roll</FdsTableHead>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="row in sampleData" :key="row.id">
+              <td>{{ row.id }}</td>
+              <td>{{ row.name }}</td>
+              <td>{{ row.email }}</td>
+              <td>{{ row.role }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </FdsTable>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        transform: tableTransform,
+      },
+    },
+  },
+}
+
+export const Sortable: Story = {
+  render: () => ({
+    components: { FdsTable, FdsTableHead },
+    setup: () => ({ sampleData }),
+    template: `
+      <FdsTable>
+        <table>
+          <thead>
+            <tr>
+              <FdsTableHead icon="sort">ID</FdsTableHead>
+              <FdsTableHead icon="ascending">Namn</FdsTableHead>
+              <FdsTableHead icon="descending">E-post</FdsTableHead>
+              <FdsTableHead>Roll</FdsTableHead>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="row in sampleData" :key="row.id">
+              <td>{{ row.id }}</td>
+              <td>{{ row.name }}</td>
+              <td>{{ row.email }}</td>
+              <td>{{ row.role }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </FdsTable>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<FdsTable>
+  <table>
+    <thead>
+      <tr>
+        <FdsTableHead icon="sort">ID</FdsTableHead>
+        <FdsTableHead icon="ascending">Namn</FdsTableHead>
+        <FdsTableHead icon="descending">E-post</FdsTableHead>
+        <FdsTableHead>Roll</FdsTableHead>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="row in sampleData" :key="row.id">
+        <td>{{ row.id }}</td>
+        <td>{{ row.name }}</td>
+        <td>{{ row.email }}</td>
+        <td>{{ row.role }}</td>
+      </tr>
+    </tbody>
+  </table>
+</FdsTable>`,
+      },
+    },
+  },
+}

package/src/components/Table/FdsTable/FdsTable.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { FdsTableProps } from './types'
+
+const props = withDefaults(defineProps<FdsTableProps>(), {
+  bordered: false,
+  compact: false,
+})
+
+const wrapperClasses = computed(() => [
+  'fds-table-wrapper',
+  props.bordered && 'fds-table-wrapper--bordered',
+  props.compact && 'fds-table-wrapper--compact',
+])
+
+defineSlots<{
+  default?: unknown
+}>()
+</script>
+
+<template>
+  <div :class="wrapperClasses">
+    <slot />
+  </div>
+</template>

package/src/components/Table/FdsTable/types.ts

@@ -0,0 +1,4 @@
+export interface FdsTableProps {
+  bordered?: boolean
+  compact?: boolean
+}

package/src/components/Table/FdsTableHead/FdsTableHead.stories.ts

@@ -0,0 +1,151 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import FdsTableHead from './FdsTableHead.vue'
+
+const meta: Meta<typeof FdsTableHead> = {
+  title: 'FDS/Table/FdsTableHead',
+  component: FdsTableHead,
+  tags: ['autodocs'],
+  argTypes: {
+    heading: { control: { type: 'text' } },
+    align: { control: { type: 'radio' }, options: ['left', 'center', 'right'] },
+    icon: { control: { type: 'select' }, options: ['sort', 'ascending', 'descending'] },
+  },
+  args: {
+    heading: 'Namn',
+    align: 'left',
+    icon: 'sort',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { FdsTableHead },
+    setup: () => ({ args }),
+    template: `
+      <table class="min-w-full divide-y divide-gray-200">
+        <thead class="bg-gray-50">
+          <tr>
+            <FdsTableHead v-bind="args">Namn</FdsTableHead>
+          </tr>
+        </thead>
+        <tbody class="bg-white divide-y divide-gray-200">
+          <tr>
+            <td class="px-4 py-3 text-sm text-gray-700">Exempel data</td>
+          </tr>
+        </tbody>
+      </table>
+    `,
+  }),
+}
+
+export const Sortable: Story = {
+  render: (args) => ({
+    components: { FdsTableHead },
+    setup: () => ({ args }),
+    template: `
+      <table class="min-w-full divide-y divide-gray-200">
+        <thead class="bg-gray-50">
+          <tr>
+            <FdsTableHead v-bind="args">Namn</FdsTableHead>
+          </tr>
+        </thead>
+        <tbody class="bg-white divide-y divide-gray-200">
+          <tr>
+            <td class="px-4 py-3 text-sm text-gray-700">Exempel data</td>
+          </tr>
+        </tbody>
+      </table>
+    `,
+  }),
+}
+
+export const SortedAsc: Story = {
+  args: { icon: 'ascending' },
+  render: (args) => ({
+    components: { FdsTableHead },
+    setup: () => ({ args }),
+    template: `
+      <table class="min-w-full divide-y divide-gray-200">
+        <thead class="bg-gray-50">
+          <tr>
+            <FdsTableHead v-bind="args">Namn</FdsTableHead>
+          </tr>
+        </thead>
+        <tbody class="bg-white divide-y divide-gray-200">
+          <tr>
+            <td class="px-4 py-3 text-sm text-gray-700">Exempel data</td>
+          </tr>
+        </tbody>
+      </table>
+    `,
+  }),
+}
+
+export const SortedDesc: Story = {
+  args: { icon: 'descending' },
+  render: (args) => ({
+    components: { FdsTableHead },
+    setup: () => ({ args }),
+    template: `
+      <table class="min-w-full divide-y divide-gray-200">
+        <thead class="bg-gray-50">
+          <tr>
+            <FdsTableHead v-bind="args">Namn</FdsTableHead>
+          </tr>
+        </thead>
+        <tbody class="bg-white divide-y divide-gray-200">
+          <tr>
+            <td class="px-4 py-3 text-sm text-gray-700">Exempel data</td>
+          </tr>
+        </tbody>
+      </table>
+    `,
+  }),
+}
+
+export const CenterAligned: Story = {
+  args: { align: 'center' },
+  render: (args) => ({
+    components: { FdsTableHead },
+    setup: () => ({ args }),
+    template: `
+      <table class="min-w-full divide-y divide-gray-200">
+        <thead class="bg-gray-50">
+          <tr>
+            <FdsTableHead v-bind="args">Centrerad</FdsTableHead>
+          </tr>
+        </thead>
+        <tbody class="bg-white divide-y divide-gray-200">
+          <tr>
+            <td class="px-4 py-3 text-sm text-gray-700 text-center">Exempel data</td>
+          </tr>
+        </tbody>
+      </table>
+    `,
+  }),
+}
+
+export const RightAligned: Story = {
+  args: { align: 'right' },
+  render: (args) => ({
+    components: { FdsTableHead },
+    setup: () => ({ args }),
+    template: `
+      <table class="min-w-full divide-y divide-gray-200">
+        <thead class="bg-gray-50">
+          <tr>
+            <FdsTableHead v-bind="args">Högerjusterad</FdsTableHead>
+          </tr>
+        </thead>
+        <tbody class="bg-white divide-y divide-gray-200">
+          <tr>
+            <td class="px-4 py-3 text-sm text-gray-700 text-right">Exempel data</td>
+          </tr>
+        </tbody>
+      </table>
+    `,
+  }),
+}

package/src/components/Table/FdsTableHead/FdsTableHead.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { useHasSlot } from '@/composables/useHasSlots'
+import { computed } from 'vue'
+import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
+import type { FdsTableHeadProps } from './types'
+
+const props = withDefaults(defineProps<FdsTableHeadProps>(), {
+  align: 'left',
+  icon: undefined,
+  heading: undefined,
+})
+
+const hasSlot = useHasSlot()
+
+const headerClasses = computed(() => [
+  'appearance-none p-4 bg-transparent flex items-center border-none text-left w-full bg-transparent text-gray-800 whitespace-nowrap text-base font-bold leading-5 tracking-normal',
+  props.align === 'center' && 'text-center justify-center',
+  props.align === 'right' && 'text-right justify-end',
+  iconName.value &&
+    'text-blue-600! hover:bg-blue_t-200 cursor-pointer focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blue-500 active:bg-blue_t-300',
+])
+
+/* Sending an icon makes the th sortable */
+const iconName = computed(() => props.icon)
+
+defineEmits<{
+  (e: 'sort'): void
+}>()
+</script>
+
+<template>
+  <th class="fds-table-head">
+    <button
+      v-if="iconName"
+      :class="headerClasses"
+      @click="$emit('sort')"
+    >
+      <span v-if="hasSlot"><slot /></span>
+      <span v-else>{{ heading }}</span>
+      <FdsIcon
+        :name="iconName"
+        size="24px"
+        class="fill-blue-500"
+      />
+    </button>
+    <div
+      v-else
+      :class="headerClasses"
+    >
+      <span v-if="hasSlot"><slot /></span>
+      <span v-else>{{ heading }}</span>
+    </div>
+  </th>
+</template>

package/src/components/Table/FdsTableHead/types.ts

@@ -0,0 +1,5 @@
+export interface FdsTableHeadProps {
+  heading?: string
+  align?: 'left' | 'center' | 'right'
+  icon?: 'sort' | 'ascending' | 'descending'
+}