@antify/ui-module 1.7.3 → 1.8.2

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

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

@@ -1,273 +0,0 @@
-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/runtime/components/table/__types/TableHeader.types.d.ts

@@ -1,36 +0,0 @@
-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/runtime/components/table/__types/TableHeader.types.mjs

@@ -1,25 +0,0 @@
-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/runtime/components/table/__types/index.d.ts

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

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

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

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

@@ -1,118 +0,0 @@
-<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/runtime/components/tabs/AntTabs.vue

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

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

@@ -1,32 +0,0 @@
-import AntTabItem from "../AntTabItem.vue";
-import { TabItemState } 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 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/runtime/components/tabs/__stories/AntTabs.stories.d.ts

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