fds-vue-core 2.1.1 → 2.1.3

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

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

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

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

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

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

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

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