@antify/ui 1.0.0

package/dist/components/table/AntTd.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+
+import {AntTableAlign, AntTableRowTypes, AntTableSize, type TableHeader} from './__types/TableHeader.types';
+import {computed} from 'vue';
+import type {RouteLocationRaw} from 'vue-router';
+
+const props =
+  withDefaults(
+    defineProps<{
+      element: Record<string, unknown>;
+      header: TableHeader;
+      align?: AntTableAlign
+      size?: AntTableSize
+    }>(), {
+      align: AntTableAlign.left,
+      size: AntTableSize.md
+    });
+
+const cellClasses = computed(() => ({
+  'whitespace-nowrap text-sm font-medium relative': true,
+  'text-right': props.align === AntTableAlign.right,
+  'text-center': props.align === AntTableAlign.center,
+  'px-2.5 py-0 h-10': props.size === AntTableSize.lg,
+  'px-2 py-0 h-9': props.size === AntTableSize.md,
+  'px-1.5 py-0 h-8': props.size === AntTableSize.sm
+}));
+</script>
+
+<template>
+  <td
+    :class="cellClasses"
+  >
+    <slot
+      name="beforeCellContent"
+      v-bind="{ elem: element, header: header }"
+    />
+
+    <div
+      v-if="header.type === AntTableRowTypes.text"
+      :class="header.rowClassList"
+    >
+      {{ element[header.identifier] }}
+    </div>
+
+    <div
+      v-else-if="header.type === AntTableRowTypes.link && header.toProp"
+    >
+      <RouterLink
+        :to="element[header.toProp] as RouteLocationRaw"
+        class="absolute inset-0"
+      >
+      </RouterLink>
+      {{ element[header.identifier] }}
+    </div>
+
+    <div
+      v-else-if="header.type === AntTableRowTypes.html"
+      :class="header.rowClassList"
+      v-html="element[header.identifier]"
+    />
+
+    <div
+      v-else-if="header.type === AntTableRowTypes.slot"
+      :class="header.rowClassList"
+    >
+      <slot
+        name="cellContent"
+        v-bind="{ element, header }"
+      ></slot>
+    </div>
+
+    <slot
+      name="afterCellContent"
+      v-bind="{ elem: element, header: header }"
+    />
+  </td>
+</template>
+
+<style scoped>
+
+</style>

package/dist/components/table/AntTh.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+
+import {AntTableAlign, AntTableSize, AntTableSortDirection, type TableHeader} from './__types/TableHeader.types';
+import {computed, ref, type Ref} from 'vue';
+import AntTableSortButton from './AntTableSortButton.vue';
+
+defineEmits(['sort']);
+const props = withDefaults(
+  defineProps<{
+    header: TableHeader
+    size?: AntTableSize
+  }>(), {
+    size: AntTableSize.md
+  }
+);
+
+const headerClasses = computed(() => ({
+  [props.header.headerClassList || '']: true,
+  'text-sm text-neutral-200-font uppercase font-semi-bold': true,
+  'text-left': !props.header.align || props.header.align === AntTableAlign.left,
+  'text-center': props.header.align === AntTableAlign.center,
+  'text-right': props.header.align === AntTableAlign.right,
+  'px-2.5 py-0 h-10': props.size === AntTableSize.lg,
+  'px-2 py-0 h-9': props.size === AntTableSize.md,
+  'px-1.5 py-0 h-8': props.size === AntTableSize.sm
+}));
+
+const cellClasses = computed(() => ({
+  'flex items-center': true,
+  'justify-start': !props.header.align || props.header.align === AntTableAlign.left,
+  'justify-center': props.header.align === AntTableAlign.center,
+  'justify-end': props.header.align === AntTableAlign.right,
+  'gap-2.5': props.size === AntTableSize.lg,
+  'gap-2': props.size === AntTableSize.md,
+  'gap-1.5': props.size === AntTableSize.sm,
+}));
+
+// TODO:: Initial sort should be possible with this
+const sortDirection: Ref<AntTableSortDirection> = ref(AntTableSortDirection.neutral);
+
+function getNewSortDirection(): AntTableSortDirection {
+  if (sortDirection.value === AntTableSortDirection.neutral) {
+    sortDirection.value = AntTableSortDirection.asc;
+    return AntTableSortDirection.asc;
+  }
+
+  if (sortDirection.value === AntTableSortDirection.asc) {
+    sortDirection.value = AntTableSortDirection.desc;
+    return AntTableSortDirection.desc;
+  }
+
+  sortDirection.value = AntTableSortDirection.neutral;
+  return AntTableSortDirection.neutral;
+}
+</script>
+
+<template>
+  <th
+    scope="col"
+    :class="headerClasses"
+  >
+    <div :class="cellClasses">
+      <slot
+        name="headerContent"
+        v-bind="header"
+      >
+        {{ header.title }}
+      </slot>
+
+      <AntTableSortButton
+        v-if="header.sortable"
+        :sort-direction="sortDirection"
+        :size="size"
+        @sort-click="$emit('sort', header, getNewSortDirection())"
+      />
+    </div>
+  </th>
+</template>

package/dist/components/table/__stories/AntTable.stories.d.ts

@@ -0,0 +1,9 @@
+import AntTable from '../AntTable.vue';
+import { type Meta, type StoryObj } from '@storybook/vue3';
+declare const meta: Meta<typeof AntTable>;
+export default meta;
+type Story = StoryObj<typeof AntTable>;
+export declare const Docs: Story;
+export declare const Empty: Story;
+export declare const Skeleton: Story;
+export declare const Loading: Story;

package/dist/components/table/__stories/AntTable.stories.js

@@ -0,0 +1,308 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Skeleton = exports.Loading = exports.Empty = exports.Docs = void 0;
+var _AntTable = _interopRequireDefault(require("../AntTable.vue"));
+var _TableHeader = require("../__types/TableHeader.types");
+var _vue = require("vue");
+var _faker = require("@faker-js/faker");
+var _AntSwitch = _interopRequireDefault(require("../../inputs/AntSwitch.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Components/Table",
+  component: _AntTable.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    headers: {
+      description: "List of header definitions. <br>If this value get changed from outside, because the table size should change, the change will take 350 ms to have a more smooth transition.",
+      table: {
+        type: {
+          summary: "TableHeader",
+          detail: `
+            type TableHeader = {
+              identifier: string;
+              headerClassList?: string;
+              rowClassList?: string;
+              title: string;
+              type: AntTableRowTypes;
+              links?: {
+                to: string;
+                label: string;
+              }[];
+            }`
+        }
+      }
+    },
+    data: {
+      description: "List of rows to be displayed in the table. The properties of the elements need to be equal to the identifier of a table row for it to be displayed<br>They will be updated as they are beeing moved inside the table."
+    },
+    selectedRow: {
+      description: "Reactive value that contains the selected row."
+    },
+    rowKey: {
+      description: "Prop name of a unique identifier in your data structure."
+    },
+    loading: {
+      description: "If true will display skeleton rows instead of an empty table if there is no data provided, otherwise it will display an overlay."
+    },
+    size: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_TableHeader.AntTableSize),
+      table: {
+        defaultValue: {
+          summary: _TableHeader.AntTableSize.md
+        }
+      }
+    },
+    // Slots
+    afterCellContent: {
+      description: "Slot to add custom elements to all cells. Gets {elem, header} as property.",
+      table: {
+        type: {
+          summary: "HTML"
+        }
+      }
+    },
+    beforeCellContent: {
+      description: "Slot to add custom elements to all cells. Gets {elem, header} as property.",
+      table: {
+        type: {
+          summary: "HTML"
+        }
+      }
+    },
+    emptyState: {
+      description: "Place for custom empty states.",
+      table: {
+        type: {
+          summary: "HTML"
+        }
+      }
+    },
+    headerContent: {
+      description: "Overwrite for the default header items. Gets header as property.",
+      table: {
+        type: {
+          summary: "HTML"
+        }
+      }
+    },
+    headerFirstCell: {
+      description: "Space to add cells to the header.",
+      table: {
+        type: {
+          summary: "HTML"
+        }
+      }
+    },
+    headerLastCell: {
+      description: "Space to add cells to the header.",
+      table: {
+        type: {
+          summary: "HTML"
+        }
+      }
+    },
+    rowFirstCell: {
+      description: "Space to add cells to the beginning of a row. Be aware that you have to add headerFirstCells as well otherwise the headers will not match up to your cells."
+    },
+    rowLastCell: {
+      description: "Space to add cells to all rows. Gets the current element as property.",
+      table: {
+        type: {
+          summary: "HTML"
+        }
+      }
+    },
+    cellContent: {
+      description: 'Is used if the ROW_TYPE = "SLOT". Gets the current element and the header element to identifier witch cell is currently displayed.',
+      table: {
+        type: {
+          summary: "HTML"
+        }
+      }
+    },
+    showLightVersion: {
+      description: "Switch between the normal version, which contains all columns, and the light version, which only contains all columns with the property `lightVersion` set to `true`."
+    }
+  }
+};
+module.exports = meta;
+const testData = [];
+for (let i = 0; i < 100; i++) {
+  const randomName = _faker.faker.person.firstName() + " " + _faker.faker.person.lastName();
+  const randomNumber = _faker.faker.number.int({
+    min: 18,
+    max: 60
+  });
+  const randomEmail = _faker.faker.internet.email();
+  const randomBoolean = _faker.faker.datatype.boolean();
+  testData.push({
+    name: randomName,
+    age: randomNumber,
+    email: randomEmail,
+    employeed: randomBoolean,
+    linkLabel: "Link here",
+    link: "/"
+  });
+}
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntTable: _AntTable.default,
+      AntSwitch: _AntSwitch.default
+    },
+    setup() {
+      const selected = (0, _vue.ref)();
+      return {
+        args,
+        selected
+      };
+    },
+    template: `
+      <div class="h-96 border border-dashed border-neutral-300">
+        <AntTable v-bind="args" v-model="selected">
+          <template #cellContent="{element: entry, header}">
+            <div v-if="header.identifier === 'employeed'">
+              <AntSwitch :model-value="entry.employeed"/>
+            </div>
+          </template>
+        </AntTable>
+      </div>
+    `
+  }),
+  args: {
+    headers: [{
+      title: "Name",
+      identifier: "name",
+      type: _TableHeader.AntTableRowTypes.text,
+      sortable: true,
+      lightVersion: true
+    }, {
+      title: "Age",
+      identifier: "age",
+      type: _TableHeader.AntTableRowTypes.text,
+      align: _TableHeader.AntTableAlign.right,
+      lightVersion: true
+    }, {
+      title: "E-Mail",
+      identifier: "email",
+      rowClassList: "",
+      type: _TableHeader.AntTableRowTypes.text
+    }, {
+      title: "Employeed",
+      identifier: "employeed",
+      rowClassList: "",
+      type: _TableHeader.AntTableRowTypes.slot
+    }, {
+      title: "Link",
+      identifier: "linkLabel",
+      toProp: "link",
+      type: _TableHeader.AntTableRowTypes.link
+    }],
+    data: testData
+  }
+};
+const Empty = exports.Empty = {
+  render: Docs.render,
+  args: {
+    headers: [{
+      title: "Name",
+      identifier: "name",
+      headerClassList: "font-bold",
+      rowClassList: "",
+      type: _TableHeader.AntTableRowTypes.text,
+      align: _TableHeader.AntTableAlign.center,
+      sortable: true
+    }, {
+      title: "Title",
+      identifier: "title",
+      headerClassList: "",
+      rowClassList: "",
+      type: _TableHeader.AntTableRowTypes.text
+    }, {
+      title: "E-Mail",
+      identifier: "email",
+      rowClassList: "",
+      type: _TableHeader.AntTableRowTypes.text
+    }, {
+      title: "Link",
+      identifier: "linkLabel",
+      toProp: "link",
+      type: _TableHeader.AntTableRowTypes.link
+    }],
+    data: []
+  }
+};
+const Skeleton = exports.Skeleton = {
+  render: Docs.render,
+  args: {
+    loading: true,
+    headers: [{
+      title: "Name",
+      identifier: "name",
+      headerClassList: "font-bold",
+      rowClassList: "",
+      type: _TableHeader.AntTableRowTypes.text,
+      align: _TableHeader.AntTableAlign.center,
+      sortable: true
+    }, {
+      title: "Title",
+      identifier: "title",
+      headerClassList: "",
+      rowClassList: "",
+      type: _TableHeader.AntTableRowTypes.text
+    }, {
+      title: "E-Mail",
+      identifier: "email",
+      rowClassList: "",
+      type: _TableHeader.AntTableRowTypes.text
+    }, {
+      title: "Link",
+      identifier: "linkLabel",
+      toProp: "link",
+      type: _TableHeader.AntTableRowTypes.link
+    }],
+    data: []
+  }
+};
+const Loading = exports.Loading = {
+  render: Docs.render,
+  args: {
+    loading: true,
+    headers: [{
+      title: "Name",
+      identifier: "name",
+      headerClassList: "font-bold",
+      rowClassList: "",
+      type: _TableHeader.AntTableRowTypes.text,
+      align: _TableHeader.AntTableAlign.center,
+      sortable: true
+    }, {
+      title: "Title",
+      identifier: "title",
+      headerClassList: "",
+      rowClassList: "",
+      type: _TableHeader.AntTableRowTypes.text
+    }, {
+      title: "E-Mail",
+      identifier: "email",
+      rowClassList: "",
+      type: _TableHeader.AntTableRowTypes.text
+    }, {
+      title: "Link",
+      identifier: "linkLabel",
+      toProp: "link",
+      type: _TableHeader.AntTableRowTypes.link
+    }],
+    data: testData
+  }
+};