@antify/ui 1.0.0

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

@@ -0,0 +1,273 @@
+import AntTable from "../AntTable.vue";
+import { AntTableAlign, AntTableRowTypes, AntTableSize } from "../__types/TableHeader.types.mjs";
+import { ref } from "vue";
+import { faker } from "@faker-js/faker";
+import AntSwitch from "../../inputs/AntSwitch.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."
+    },
+    size: {
+      control: { type: "select" },
+      options: Object.values(AntTableSize),
+      table: { defaultValue: { summary: 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`."
+    }
+  }
+};
+export default meta;
+const testData = [];
+for (let i = 0; i < 100; i++) {
+  const randomName = faker.person.firstName() + " " + faker.person.lastName();
+  const randomNumber = faker.number.int({ min: 18, max: 60 });
+  const randomEmail = faker.internet.email();
+  const randomBoolean = faker.datatype.boolean();
+  testData.push({
+    name: randomName,
+    age: randomNumber,
+    email: randomEmail,
+    employeed: randomBoolean,
+    linkLabel: "Link here",
+    link: "/"
+  });
+}
+export const Docs = {
+  render: (args) => ({
+    components: { AntTable, AntSwitch },
+    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 #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: AntTableRowTypes.text,
+        sortable: true,
+        lightVersion: true
+      },
+      {
+        title: "Age",
+        identifier: "age",
+        type: AntTableRowTypes.text,
+        align: AntTableAlign.right,
+        lightVersion: true
+      },
+      {
+        title: "E-Mail",
+        identifier: "email",
+        rowClassList: "",
+        type: AntTableRowTypes.text
+      },
+      {
+        title: "Employeed",
+        identifier: "employeed",
+        rowClassList: "",
+        type: AntTableRowTypes.slot
+      },
+      {
+        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/components/table/__types/TableHeader.types.d.ts

@@ -0,0 +1,36 @@
+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;
+};
+export declare enum AntTableSize {
+    lg = "lg",
+    md = "md",
+    sm = "sm"
+}

package/dist/components/table/__types/TableHeader.types.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AntTableSortDirection = exports.AntTableSize = exports.AntTableRowTypes = exports.AntTableAlign = void 0;
+var AntTableRowTypes = exports.AntTableRowTypes = /* @__PURE__ */(AntTableRowTypes2 => {
+  AntTableRowTypes2["text"] = "text";
+  AntTableRowTypes2["html"] = "html";
+  AntTableRowTypes2["link"] = "link";
+  AntTableRowTypes2["slot"] = "slot";
+  return AntTableRowTypes2;
+})(AntTableRowTypes || {});
+var AntTableAlign = exports.AntTableAlign = /* @__PURE__ */(AntTableAlign2 => {
+  AntTableAlign2["left"] = "left";
+  AntTableAlign2["center"] = "center";
+  AntTableAlign2["right"] = "right";
+  return AntTableAlign2;
+})(AntTableAlign || {});
+var AntTableSortDirection = exports.AntTableSortDirection = /* @__PURE__ */(AntTableSortDirection2 => {
+  AntTableSortDirection2["asc"] = "asc";
+  AntTableSortDirection2["desc"] = "desc";
+  AntTableSortDirection2["neutral"] = "neutral";
+  return AntTableSortDirection2;
+})(AntTableSortDirection || {});
+var AntTableSize = exports.AntTableSize = /* @__PURE__ */(AntTableSize2 => {
+  AntTableSize2["lg"] = "lg";
+  AntTableSize2["md"] = "md";
+  AntTableSize2["sm"] = "sm";
+  return AntTableSize2;
+})(AntTableSize || {});

package/dist/components/table/__types/TableHeader.types.mjs

@@ -0,0 +1,25 @@
+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 || {});
+export var AntTableSize = /* @__PURE__ */ ((AntTableSize2) => {
+  AntTableSize2["lg"] = "lg";
+  AntTableSize2["md"] = "md";
+  AntTableSize2["sm"] = "sm";
+  return AntTableSize2;
+})(AntTableSize || {});

package/dist/components/table/__types/index.d.ts

@@ -0,0 +1 @@
+export * from './TableHeader.types';

package/dist/components/table/__types/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _TableHeader = require("./TableHeader.types");
+Object.keys(_TableHeader).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TableHeader[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TableHeader[key];
+    }
+  });
+});

package/dist/components/table/__types/index.mjs

@@ -0,0 +1 @@
+export * from "./TableHeader.types.mjs";

package/dist/components/tabs/AntTabItem.vue

@@ -0,0 +1,118 @@
+<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 {TabItemState} from './__types/AntTabItem.types';
+
+const props = withDefaults(defineProps<{
+  label: string;
+  active: boolean;
+  state?: TabItemState
+  showIcon?: boolean;
+  icon?: IconDefinition;
+  to?: RouteLocationRaw;
+  expanded?: boolean;
+}>(), {
+  state: TabItemState.base,
+  showIcon: true,
+});
+const route = useRoute();
+
+const icons = {
+  [TabItemState.base]: null,
+  [TabItemState.danger]: faExclamationCircle,
+  [TabItemState.warning]: faExclamationTriangle,
+};
+const iconRight = computed<IconDefinition | null>(() => icons[props.state]);
+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<TabItemState, string> = {
+    [TabItemState.base]: 'hover:bg-neutral-100',
+    [TabItemState.warning]: 'hover:bg-warning-100',
+    [TabItemState.danger]: 'hover:bg-danger-100',
+  };
+  const activeVariants: Record<TabItemState, string> = {
+    [TabItemState.base]: 'text-primary-500 border-primary-500',
+    [TabItemState.warning]: 'text-warning-500 border-warning-500',
+    [TabItemState.danger]: 'text-danger-500 border-danger-500',
+  };
+  const notActiveVariants: Record<TabItemState, string> = {
+    [TabItemState.base]: 'text-for-white-bg-font border-white',
+    [TabItemState.warning]: 'text-warning-500',
+    [TabItemState.danger]: 'text-danger-500',
+  };
+
+  return {
+    'p-2 hover:cursor-pointer text-center flex items-center justify-center gap-2 bg-white transition-[background-color] relative text-sm': true,
+    'grow': props.expanded,
+    [variants[props.state]]: true,
+    [activeVariants[props.state]]: _active.value,
+    [notActiveVariants[props.state]]: !_active.value,
+  };
+});
+const borderBoxClasses = computed(() => {
+  const variants: Record<TabItemState, string> = {
+    [TabItemState.base]: 'bg-primary-500',
+    [TabItemState.warning]: 'bg-warning-500',
+    [TabItemState.danger]: 'bg-danger-500',
+  };
+
+  return {
+    'h-[2px] w-full bg-danger-500 absolute bottom-0': true,
+    [variants[props.state]]: true,
+  };
+});
+const iconColor = computed(() => {
+  const variants = {
+    [TabItemState.base]: 'text-neutral-100-font',
+    [TabItemState.warning]: 'text-warning-500',
+    [TabItemState.danger]: 'text-danger-500',
+  };
+
+  return variants[props.state];
+});
+</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-for-white-bg-font'"
+      />
+    </slot>
+
+    <slot>{{ label }}</slot>
+
+    <AntIcon
+      v-if="iconRight && showIcon"
+      :icon="iconRight"
+      :color="iconColor"
+    />
+
+    <div
+      v-if="_active"
+      :class="borderBoxClasses"
+    />
+  </component>
+</template>

package/dist/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/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/components/tabs/__stories/AntTabItem.stories.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Docs = void 0;
+var _AntTabItem = _interopRequireDefault(require("../AntTabItem.vue"));
+var _AntTabItem2 = require("../__types/AntTabItem.types");
+var _storybookVue3Router = require("storybook-vue3-router");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Components/Tab Item",
+  component: _AntTabItem.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  decorators: [() => ({
+    template: '<div class="dashed"><story /></div>'
+  }), (0, _storybookVue3Router.vueRouter)()],
+  argTypes: {
+    showIcon: {
+      control: "boolean",
+      description: "Some InputStates can have an icon. Control with this property if it gets shown or not."
+    },
+    state: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_AntTabItem2.TabItemState)
+    }
+  }
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntTabItem: _AntTabItem.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: '<AntTabItem v-bind="args"/>'
+  }),
+  args: {
+    label: "First tab",
+    active: false
+  }
+};

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

@@ -0,0 +1,36 @@
+import AntTabItem from "../AntTabItem.vue";
+import { TabItemState } from "../__types/AntTabItem.types.mjs";
+import { vueRouter } from "storybook-vue3-router";
+const meta = {
+  title: "Components/Tab Item",
+  component: AntTabItem,
+  parameters: { controls: { sort: "requiredFirst" } },
+  decorators: [
+    () => ({ template: '<div class="dashed"><story /></div>' }),
+    vueRouter()
+  ],
+  argTypes: {
+    showIcon: {
+      control: "boolean",
+      description: "Some InputStates can have an icon. Control with this property if it gets shown or not."
+    },
+    state: {
+      control: { type: "select" },
+      options: Object.values(TabItemState)
+    }
+  }
+};
+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/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 Summary: Story;