@antify/ui-module 1.1.3

package/dist/runtime/components/table/AntTh.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+
+import { AntTableAlign, AntTableSortDirection, type TableHeader } from './__types/TableHeader.type';
+import { computed, ref, type Ref } from 'vue';
+import AntTableSortButton from './AntTableSortButton.vue';
+
+defineEmits([ 'sort' ])
+const props = defineProps<{
+  header: TableHeader
+}>();
+
+const headerClasses = computed(() => {
+  const classes = {
+    [props.header.headerClassList || '']: true,
+    'px-2.5 py-0 h-[40px] text-sm text-neutral-100-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,
+  };
+
+  return classes;
+});
+
+const cellClasses = computed(() => ({
+  'flex gap-2.5 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,
+}))
+
+// 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-click="$emit('sort', header, getNewSortDirection())"
+        :sort-direction="sortDirection"
+      />
+    </div>
+  </th>
+</template>

package/dist/runtime/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/runtime/components/table/__stories/AntTable.stories.mjs

@@ -0,0 +1,274 @@
+import AntTable from "../AntTable.vue";
+import { AntTableAlign, AntTableRowTypes } from "../__types/TableHeader.type.mjs";
+import { ref } from "vue";
+const meta = {
+  title: "Components/Table",
+  component: AntTable,
+  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."
+    },
+    // 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`."
+    }
+  }
+};
+export default meta;
+const testData = [
+  {
+    text: "Lorem ipsum dolor sit amet",
+    number: 28,
+    email: "lindsay.walton@example.com",
+    linkLabel: "Link here",
+    link: "/"
+  },
+  {
+    text: "Lorem ipsum dolor sit amet",
+    number: 54,
+    email: "courtney.henry@example.com",
+    linkLabel: "Link here",
+    link: "/"
+  },
+  {
+    text: "Lorem ipsum dolor sit amet",
+    number: 44,
+    email: "courtney.henry@example.com",
+    linkLabel: "Link here",
+    link: "/"
+  }
+];
+for (let i = 0; i < 100; i++) {
+  testData.push({
+    text: "Lorem ipsum dolor sit amet",
+    number: 32,
+    email: "courtney.henry@example.com",
+    linkLabel: "Link here",
+    link: "/"
+  });
+}
+export const Docs = {
+  render: (args) => ({
+    components: { AntTable },
+    setup() {
+      const selected = ref();
+      return { args, selected };
+    },
+    template: `
+      <div class="h-96 border border-dashed border-neutral-300">
+        <AntTable v-bind="args" v-model="selected">
+          <template #emptyState>
+          </template>
+        </AntTable>
+      </div>
+    `
+  }),
+  args: {
+    headers: [
+      {
+        title: "Text",
+        identifier: "text",
+        type: AntTableRowTypes.text,
+        sortable: true,
+        lightVersion: true
+      },
+      {
+        title: "E-Mail",
+        identifier: "email",
+        rowClassList: "",
+        type: AntTableRowTypes.text
+      },
+      {
+        title: "Number",
+        identifier: "number",
+        type: AntTableRowTypes.text,
+        align: AntTableAlign.right,
+        lightVersion: true
+      },
+      {
+        title: "Link",
+        identifier: "linkLabel",
+        toProp: "link",
+        type: AntTableRowTypes.link
+      }
+    ],
+    data: testData
+  }
+};
+export const Empty = {
+  render: Docs.render,
+  args: {
+    headers: [
+      {
+        title: "Name",
+        identifier: "name",
+        headerClassList: "font-bold",
+        rowClassList: "",
+        type: AntTableRowTypes.text,
+        align: AntTableAlign.center,
+        sortable: true
+      },
+      {
+        title: "Title",
+        identifier: "title",
+        headerClassList: "",
+        rowClassList: "",
+        type: AntTableRowTypes.text
+      },
+      {
+        title: "E-Mail",
+        identifier: "email",
+        rowClassList: "",
+        type: AntTableRowTypes.text
+      },
+      {
+        title: "Link",
+        identifier: "linkLabel",
+        toProp: "link",
+        type: AntTableRowTypes.link
+      }
+    ],
+    data: []
+  }
+};
+export const Skeleton = {
+  render: Docs.render,
+  args: {
+    loading: true,
+    headers: [
+      {
+        title: "Name",
+        identifier: "name",
+        headerClassList: "font-bold",
+        rowClassList: "",
+        type: AntTableRowTypes.text,
+        align: AntTableAlign.center,
+        sortable: true
+      },
+      {
+        title: "Title",
+        identifier: "title",
+        headerClassList: "",
+        rowClassList: "",
+        type: AntTableRowTypes.text
+      },
+      {
+        title: "E-Mail",
+        identifier: "email",
+        rowClassList: "",
+        type: AntTableRowTypes.text
+      },
+      {
+        title: "Link",
+        identifier: "linkLabel",
+        toProp: "link",
+        type: AntTableRowTypes.link
+      }
+    ],
+    data: []
+  }
+};
+export const Loading = {
+  render: Docs.render,
+  args: {
+    loading: true,
+    headers: [
+      {
+        title: "Name",
+        identifier: "name",
+        headerClassList: "font-bold",
+        rowClassList: "",
+        type: AntTableRowTypes.text,
+        align: AntTableAlign.center,
+        sortable: true
+      },
+      {
+        title: "Title",
+        identifier: "title",
+        headerClassList: "",
+        rowClassList: "",
+        type: AntTableRowTypes.text
+      },
+      {
+        title: "E-Mail",
+        identifier: "email",
+        rowClassList: "",
+        type: AntTableRowTypes.text
+      },
+      {
+        title: "Link",
+        identifier: "linkLabel",
+        toProp: "link",
+        type: AntTableRowTypes.link
+      }
+    ],
+    data: testData
+  }
+};

package/dist/runtime/components/table/__types/TableHeader.type.d.ts

@@ -0,0 +1,31 @@
+export declare enum AntTableRowTypes {
+    text = "text",
+    html = "html",
+    link = "link",
+    slot = "slot"
+}
+export declare enum AntTableAlign {
+    left = "left",
+    center = "center",
+    right = "right"
+}
+export declare enum AntTableSortDirection {
+    asc = "asc",
+    desc = "desc",
+    neutral = "neutral"
+}
+export type TableHeader = {
+    identifier: string;
+    title?: string;
+    type: AntTableRowTypes;
+    sortable?: boolean;
+    sort?: (a: unknown, b: unknown, direction: AntTableSortDirection) => number;
+    headerClassList?: string;
+    rowClassList?: string;
+    align?: AntTableAlign;
+    toProp?: string;
+    /**
+     * Emit if the column should be shown on light table version.
+     */
+    lightVersion?: boolean;
+};

package/dist/runtime/components/table/__types/TableHeader.type.mjs

@@ -0,0 +1,19 @@
+export var AntTableRowTypes = /* @__PURE__ */ ((AntTableRowTypes2) => {
+  AntTableRowTypes2["text"] = "text";
+  AntTableRowTypes2["html"] = "html";
+  AntTableRowTypes2["link"] = "link";
+  AntTableRowTypes2["slot"] = "slot";
+  return AntTableRowTypes2;
+})(AntTableRowTypes || {});
+export var AntTableAlign = /* @__PURE__ */ ((AntTableAlign2) => {
+  AntTableAlign2["left"] = "left";
+  AntTableAlign2["center"] = "center";
+  AntTableAlign2["right"] = "right";
+  return AntTableAlign2;
+})(AntTableAlign || {});
+export var AntTableSortDirection = /* @__PURE__ */ ((AntTableSortDirection2) => {
+  AntTableSortDirection2["asc"] = "asc";
+  AntTableSortDirection2["desc"] = "desc";
+  AntTableSortDirection2["neutral"] = "neutral";
+  return AntTableSortDirection2;
+})(AntTableSortDirection || {});

package/dist/runtime/components/tabs/AntTabItem.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import AntIcon from '../AntIcon.vue';
+import {
+  faExclamationCircle,
+  faExclamationTriangle,
+  type IconDefinition
+} from '@fortawesome/free-solid-svg-icons';
+import {computed} from 'vue';
+import {type RouteLocationRaw, useRoute} from 'vue-router';
+import {ColorType} from './__types/AntTabItem.types';
+
+const props = withDefaults(defineProps<{
+  label: string;
+  active: boolean;
+  colorType?: ColorType
+  showIcon?: boolean;
+  icon?: IconDefinition;
+  to?: RouteLocationRaw;
+  expanded?: boolean;
+}>(), {
+  colorType: ColorType.base,
+  showIcon: true,
+});
+const route = useRoute();
+
+const icons = {
+  [ColorType.base]: null,
+  [ColorType.danger]: faExclamationCircle,
+  [ColorType.warning]: faExclamationTriangle,
+};
+const iconRight = computed<IconDefinition | null>(() => icons[props.colorType]);
+const _active = computed<boolean>(() => {
+  if (typeof props.to === 'string') {
+    return route.path === props.to;
+  }
+
+  if (typeof props.to === 'object' && props.to?.name !== undefined) {
+    return route.name === props.to.name;
+  }
+
+  return props.active;
+});
+const containerClasses = computed(() => {
+  const variants: Record<ColorType, string> = {
+    [ColorType.base]: 'hover:bg-neutral-100',
+    [ColorType.warning]: 'hover:bg-warning-100',
+    [ColorType.danger]: 'hover:bg-danger-100',
+  };
+  const activeVariants: Record<ColorType, string> = {
+    [ColorType.base]: 'text-primary-500 border-primary-500',
+    [ColorType.warning]: 'text-warning-500 border-warning-500',
+    [ColorType.danger]: 'text-danger-500 border-danger-500',
+  };
+  const notActiveVariants: Record<ColorType, string> = {
+    [ColorType.base]: 'text-neutral-50-font border-neutral-50',
+    [ColorType.warning]: 'text-warning-500',
+    [ColorType.danger]: 'text-danger-500',
+  };
+
+  return {
+    'p-2.5 hover:cursor-pointer text-center flex items-center justify-center gap-2.5 bg-neutral-50 transition-[background-color] relative': true,
+    'grow': props.expanded,
+    [variants[props.colorType]]: true,
+    [activeVariants[props.colorType]]: _active.value,
+    [notActiveVariants[props.colorType]]: !_active.value,
+  }
+});
+const borderBoxClasses = computed(() => {
+  const variants: Record<ColorType, string> = {
+    [ColorType.base]: 'bg-primary-500',
+    [ColorType.warning]: 'bg-warning-500',
+    [ColorType.danger]: 'bg-danger-500',
+  };
+
+  return {
+    'h-[2px] w-full bg-danger-500 absolute bottom-0': true,
+    [variants[props.colorType]]: true,
+  }
+});
+const iconColor = computed(() => {
+  const variants = {
+    [ColorType.base]: 'text-neutral-100-font',
+    [ColorType.warning]: 'text-warning-500',
+    [ColorType.danger]: 'text-danger-500',
+  };
+
+  return variants[props.colorType];
+});
+</script>
+
+<template>
+  <component
+    :is="to !== undefined ? 'router-link' : 'div'"
+    :to="to"
+    :class="containerClasses"
+  >
+    <slot name="iconLeft">
+      <AntIcon
+        v-if="icon"
+        :icon="icon"
+        :color="_active ? 'text-primary-500' : 'text-neutral-50-font'"
+      />
+    </slot>
+
+    <slot>{{ label }}</slot>
+
+    <AntIcon
+      v-if="iconRight && showIcon"
+      :icon="iconRight"
+      :color="iconColor"
+    />
+
+    <div v-if="_active" :class="borderBoxClasses" />
+  </component>
+</template>

package/dist/runtime/components/tabs/AntTabs.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import AntTabItem from './AntTabItem.vue';
+import {type TabItem} from './__types/AntTabItem.types';
+import {useVModel} from '@vueuse/core';
+import {computed} from 'vue';
+
+const emits = defineEmits(['update:modelValue']);
+const props = withDefaults(defineProps<{
+  modelValue?: string;
+  tabItems?: TabItem[];
+  expanded?: boolean;
+}>(), {
+  expanded: false,
+});
+
+const currentActive = useVModel(props, 'modelValue', emits);
+const containerClasses = computed(() => ({
+  'flex items-stretch bg-neutral-300 gap-px transition-all h-full': true,
+  'w-fit': !props.expanded,
+  'w-full': props.expanded,
+}));
+
+function clickTab(tabItem: TabItem) {
+  if (tabItem.clickHandler) {
+    tabItem.clickHandler();
+  }
+
+  currentActive.value = tabItem.id;
+}
+</script>
+
+<template>
+  <div :class="containerClasses">
+    <slot>
+      <AntTabItem
+        v-for="(tabItem, index) in tabItems"
+        :key="`tab-item-${index}`"
+        v-bind="tabItem"
+        @click="clickTab(tabItem)"
+        :active="currentActive === tabItem.id"
+        :expanded="expanded"
+      >
+        <slot name="content" v-bind="{item: tabItem, isActive: currentActive === tabItem.id}"></slot>
+      </AntTabItem>
+    </slot>
+  </div>
+</template>

package/dist/runtime/components/tabs/__stories/AntTabItem.stories.d.ts

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

package/dist/runtime/components/tabs/__stories/AntTabItem.stories.mjs

@@ -0,0 +1,32 @@
+import AntTabItem from "../AntTabItem.vue";
+import { ColorType } from "../__types/AntTabItem.types.mjs";
+const meta = {
+  title: "Components/Tab Item",
+  component: AntTabItem,
+  parameters: { controls: { sort: "requiredFirst" } },
+  decorators: [() => ({ template: '<div class="border border-neutral-300 border-dashed"><story /></div>' })],
+  argTypes: {
+    showIcon: {
+      control: "boolean",
+      description: "Some InputColorTypes can have an icon. Control with this property if it gets shown or not."
+    },
+    colorType: {
+      control: { type: "select" },
+      options: Object.values(ColorType)
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntTabItem },
+    setup() {
+      return { args };
+    },
+    template: '<AntTabItem v-bind="args"/>'
+  }),
+  args: {
+    label: "First tab",
+    active: false
+  }
+};

package/dist/runtime/components/tabs/__stories/AntTabs.stories.d.ts

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