@antify/ui 2.2.1 → 2.2.3

package/dist/components/table/AntTd.vue

@@ -1,19 +1,24 @@
 <script setup lang="ts">
-import {AntTableAlign, AntTableRowTypes, AntTableSize, type TableHeader} from './__types/TableHeader.types';
-import {computed} from 'vue';
-import {type RouteLocationRaw, RouterLink} from 'vue-router';
+import {
+  AntTableAlign, AntTableRowTypes, AntTableSize, type TableHeader,
+} from './__types/TableHeader.types';
+import {
+  computed,
+} from 'vue';
+import {
+  type RouteLocationRaw, RouterLink,
+} from 'vue-router';
 
 const props =
-  withDefaults(
-    defineProps<{
-      element: Record<string, unknown>;
-      header: TableHeader;
-      align?: AntTableAlign
-      size?: AntTableSize
-    }>(), {
-      align: AntTableAlign.left,
-      size: AntTableSize.md
-    });
+  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,
@@ -21,7 +26,7 @@ const cellClasses = computed(() => ({
   '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
+  'px-1.5 py-0 h-8': props.size === AntTableSize.sm,
 }));
 </script>
 
@@ -47,8 +52,7 @@ const cellClasses = computed(() => ({
       <RouterLink
         :to="element[header.toProp] as RouteLocationRaw"
         class="absolute inset-0"
-      >
-      </RouterLink>
+      />
       {{ element[header.identifier] }}
     </div>
 
@@ -65,7 +69,7 @@ const cellClasses = computed(() => ({
       <slot
         name="cellContent"
         v-bind="{ element, header }"
-      ></slot>
+      />
     </div>
 
     <slot

package/dist/components/table/AntTh.vue

@@ -1,18 +1,22 @@
 <script setup lang="ts">
 
-import {AntTableAlign, AntTableSize, AntTableSortDirection, type TableHeader} from './__types/TableHeader.types';
-import {computed, ref, type Ref} from 'vue';
+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
-  }
-);
+defineEmits([
+  'sort',
+]);
+const props = withDefaults(defineProps<{
+  header: TableHeader;
+  size?: AntTableSize;
+}>(), {
+  size: AntTableSize.md,
+});
 
 const headerClasses = computed(() => ({
   [props.header.headerClassList || '']: true,
@@ -22,7 +26,7 @@ const headerClasses = computed(() => ({
   '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
+  'px-1.5 py-0 h-8': props.size === AntTableSize.sm,
 }));
 
 const cellClasses = computed(() => ({
@@ -41,15 +45,18 @@ const sortDirection: Ref<AntTableSortDirection> = ref(AntTableSortDirection.neut
 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>

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

@@ -533,7 +533,7 @@ const DefaultCollapseOpen = exports.DefaultCollapseOpen = {
     template: `
       <div class="h-96 border border-dashed border-base-300 flex flex-col gap-2">
         <AntButton state="primary" @click="addRandomEntry" filled>Add Random Entry</AntButton>
-        <AntTable v-bind="args" :data="data" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val" :rows-collapsed="false" collapse-strategy="multiple">
+        <AntTable v-bind="args" :data="data" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val" collapse-strategy="multiple" expandedRows>
           <template #cellContent="{element: entry, header}">
             <div v-if="header.identifier === 'employed'">
               <AntSwitch v-model="entry.employed"/>

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

@@ -2,16 +2,35 @@ import AntTable from "../AntTable.vue";
 import AntButton from "../../buttons/AntButton.vue";
 import AntSelect from "../../inputs/AntSelect.vue";
 import AntCheckboxGroup from "../../inputs/AntCheckboxGroup.vue";
-import { AntTableAlign, AntTableRowTypes, AntTableSize } from "../__types/TableHeader.types.mjs";
-import { ref } from "vue";
-import { faker } from "@faker-js/faker";
+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";
-import { expect, userEvent, waitFor } from "@storybook/test";
+import {
+  expect,
+  userEvent,
+  waitFor
+} from "@storybook/test";
 const meta = {
-  components: { AntSelect, AntCheckboxGroup },
+  components: {
+    AntSelect,
+    AntCheckboxGroup
+  },
   title: "Components/Table",
   component: AntTable,
-  parameters: { controls: { sort: "requiredFirst" } },
+  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.",
@@ -46,46 +65,82 @@ const meta = {
       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" },
+      control: {
+        type: "select"
+      },
       options: Object.values(AntTableSize),
-      table: { defaultValue: { summary: AntTableSize.md } }
+      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" } }
+      table: {
+        type: {
+          summary: "HTML"
+        }
+      }
     },
     beforeCellContent: {
       description: "Slot to add custom elements to all cells. Gets {elem, header} as property.",
-      table: { type: { summary: "HTML" } }
+      table: {
+        type: {
+          summary: "HTML"
+        }
+      }
     },
     emptyState: {
       description: "Place for custom empty states.",
-      table: { type: { summary: "HTML" } }
+      table: {
+        type: {
+          summary: "HTML"
+        }
+      }
     },
     headerContent: {
       description: "Overwrite for the default header items. Gets header as property.",
-      table: { type: { summary: "HTML" } }
+      table: {
+        type: {
+          summary: "HTML"
+        }
+      }
     },
     headerFirstCell: {
       description: "Space to add cells to the header.",
-      table: { type: { summary: "HTML" } }
+      table: {
+        type: {
+          summary: "HTML"
+        }
+      }
     },
     headerLastCell: {
       description: "Space to add cells to the header.",
-      table: { type: { summary: "HTML" } }
+      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" } }
+      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" }
+        type: {
+          summary: "HTML"
+        }
       }
     },
     showLightVersion: {
@@ -97,10 +152,19 @@ export default meta;
 const testData = ref([]);
 function getRandomEntry() {
   const randomName = faker.person.firstName() + " " + faker.person.lastName();
-  const randomNumber = faker.number.int({ min: 18, max: 60 });
+  const randomNumber = faker.number.int({
+    min: 18,
+    max: 60
+  });
   const randomEmail = faker.internet.email();
   const randomBoolean = faker.datatype.boolean();
-  const randomPermissions = faker.helpers.arrayElements(["read", "write"], { min: 0, max: 2 });
+  const randomPermissions = faker.helpers.arrayElements([
+    "read",
+    "write"
+  ], {
+    min: 0,
+    max: 2
+  });
   return {
     name: randomName,
     age: randomNumber,
@@ -114,17 +178,28 @@ for (let i = 0; i < 100; i++) {
 }
 export const Docs = {
   render: (args) => ({
-    components: { AntTable, AntSwitch, AntCheckboxGroup },
+    components: {
+      AntTable,
+      AntSwitch,
+      AntCheckboxGroup
+    },
     setup() {
       const selected = ref();
-      const checkboxes = [{
-        label: "Read",
-        value: "read"
-      }, {
-        label: "Write",
-        value: "write"
-      }];
-      return { args, selected, checkboxes };
+      const checkboxes = [
+        {
+          label: "Read",
+          value: "read"
+        },
+        {
+          label: "Write",
+          value: "write"
+        }
+      ];
+      return {
+        args,
+        selected,
+        checkboxes
+      };
     },
     template: `
       <div class="h-96 border border-dashed border-base-300">
@@ -142,7 +217,9 @@ export const Docs = {
       </div>
     `
   }),
-  play: async ({ step }) => {
+  play: async ({
+    step
+  }) => {
     const firstRow = document.querySelectorAll('[data-e2e="table-row"]')[0];
     const employedCell = firstRow.querySelector('[data-e2e="table-cell-employed"]');
     const employedSwitch = employedCell?.querySelector('[data-e2e="switch"]')?.querySelector("button");
@@ -152,7 +229,9 @@ export const Docs = {
     const permissionLabel = permissionCheckboxWithLabel?.querySelector("label");
     await step("Click on a table cell and expect the row to be selected", async () => {
       await userEvent.click(employedCell);
-      await waitFor(() => expect(firstRow).toHaveClass("bg-primary-200"), { timeout: 600 });
+      await waitFor(() => expect(firstRow).toHaveClass("bg-primary-200"), {
+        timeout: 600
+      });
     });
     await step("Click on employed switch and expect the value to toggle", async () => {
       const initialAriaChecked = JSON.parse(employedSwitch?.getAttribute("aria-checked"));
@@ -160,7 +239,9 @@ export const Docs = {
       await waitFor(() => {
         const toggledAriaChecked = JSON.parse(employedSwitch?.getAttribute("aria-checked"));
         expect(toggledAriaChecked).toBe(!initialAriaChecked);
-      }, { timeout: 600 });
+      }, {
+        timeout: 600
+      });
     });
     await step("Click on one of the permissions and expect the value to toggle", async () => {
       const initialAriaChecked = JSON.parse(permissionCheckbox?.getAttribute("aria-checked"));
@@ -168,7 +249,9 @@ export const Docs = {
       await waitFor(() => {
         const toggledAriaChecked = JSON.parse(permissionCheckbox?.getAttribute("aria-checked"));
         expect(toggledAriaChecked).toBe(!initialAriaChecked);
-      }, { timeout: 600 });
+      }, {
+        timeout: 600
+      });
     });
   },
   args: {
@@ -211,10 +294,16 @@ export const Docs = {
 };
 export const Empty = {
   render: (args) => ({
-    components: { AntTable, AntSwitch },
+    components: {
+      AntTable,
+      AntSwitch
+    },
     setup() {
       const selected = ref();
-      return { args, selected };
+      return {
+        args,
+        selected
+      };
     },
     template: `
       <div class="flex flex-col gap-2">
@@ -350,17 +439,28 @@ export const Loading = {
 };
 export const Collapsible = {
   render: (args) => ({
-    components: { AntTable, AntSwitch, AntCheckboxGroup },
+    components: {
+      AntTable,
+      AntSwitch,
+      AntCheckboxGroup
+    },
     setup() {
       const selected = ref();
-      const checkboxes = [{
-        label: "Read",
-        value: "read"
-      }, {
-        label: "Write",
-        value: "write"
-      }];
-      return { args, selected, checkboxes };
+      const checkboxes = [
+        {
+          label: "Read",
+          value: "read"
+        },
+        {
+          label: "Write",
+          value: "write"
+        }
+      ];
+      return {
+        args,
+        selected,
+        checkboxes
+      };
     },
     template: `
       <div class="h-96 border border-dashed border-base-300">
@@ -390,17 +490,28 @@ export const Collapsible = {
 };
 export const MultipleCollapseStrategy = {
   render: (args) => ({
-    components: { AntTable, AntSwitch, AntCheckboxGroup },
+    components: {
+      AntTable,
+      AntSwitch,
+      AntCheckboxGroup
+    },
     setup() {
       const selected = ref();
-      const checkboxes = [{
-        label: "Read",
-        value: "read"
-      }, {
-        label: "Write",
-        value: "write"
-      }];
-      return { args, selected, checkboxes };
+      const checkboxes = [
+        {
+          label: "Read",
+          value: "read"
+        },
+        {
+          label: "Write",
+          value: "write"
+        }
+      ];
+      return {
+        args,
+        selected,
+        checkboxes
+      };
     },
     template: `
       <div class="h-96 border border-dashed border-base-300">
@@ -430,26 +541,43 @@ export const MultipleCollapseStrategy = {
 };
 export const DefaultCollapseOpen = {
   render: (args) => ({
-    components: { AntTable, AntSwitch, AntCheckboxGroup, AntButton },
+    components: {
+      AntTable,
+      AntSwitch,
+      AntCheckboxGroup,
+      AntButton
+    },
     setup() {
       const selected = ref();
       const data = ref(args.data.splice(0, 5));
-      const checkboxes = [{
-        label: "Read",
-        value: "read"
-      }, {
-        label: "Write",
-        value: "write"
-      }];
+      const checkboxes = [
+        {
+          label: "Read",
+          value: "read"
+        },
+        {
+          label: "Write",
+          value: "write"
+        }
+      ];
       function addRandomEntry() {
-        data.value = [...data.value, getRandomEntry()];
+        data.value = [
+          ...data.value,
+          getRandomEntry()
+        ];
       }
-      return { args, data, selected, checkboxes, addRandomEntry };
+      return {
+        args,
+        data,
+        selected,
+        checkboxes,
+        addRandomEntry
+      };
     },
     template: `
       <div class="h-96 border border-dashed border-base-300 flex flex-col gap-2">
         <AntButton state="primary" @click="addRandomEntry" filled>Add Random Entry</AntButton>
-        <AntTable v-bind="args" :data="data" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val" :rows-collapsed="false" collapse-strategy="multiple">
+        <AntTable v-bind="args" :data="data" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val" collapse-strategy="multiple" expandedRows>
           <template #cellContent="{element: entry, header}">
             <div v-if="header.identifier === 'employed'">
               <AntSwitch v-model="entry.employed"/>

package/dist/components/tabs/AntTabItem.vue

@@ -4,18 +4,26 @@ import {
   faCircleInfo,
   faExclamationCircle,
   faExclamationTriangle,
-  type IconDefinition
+  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';
-import {AntSkeleton} from "../../../dist";
+import {
+  computed,
+} from 'vue';
+import {
+  type RouteLocationRaw, useRoute,
+} from 'vue-router';
+import {
+  TabItemState,
+} from './__types/AntTabItem.types';
+import {
+  AntSkeleton,
+} from '../../../dist';
 
 const props = withDefaults(defineProps<{
   label: string;
   active: boolean;
   disabled?: boolean;
-  state?: TabItemState
+  state?: TabItemState;
   showIcon?: boolean;
   icon?: IconDefinition;
   to?: RouteLocationRaw;
@@ -69,7 +77,7 @@ const containerClasses = computed(() => {
 
   return {
     'p-2 text-center flex items-center justify-center gap-2 bg-white transition-[background-color] relative text-sm text-nowrap': true,
-    'grow': props.expanded,
+    grow: props.expanded,
     [variants[props.state]]: !props.disabled,
     [activeVariants[props.state]]: _active.value,
     [notActiveVariants[props.state]]: !_active.value,
@@ -118,7 +126,11 @@ const iconColor = computed(() => {
 
     <div class="relative">
       <slot>{{ label }}</slot>
-      <AntSkeleton v-if="skeleton" rounded absolute/>
+      <AntSkeleton
+        v-if="skeleton"
+        rounded
+        absolute
+      />
     </div>
 
     <AntIcon

package/dist/components/tabs/AntTabs.vue

@@ -1,10 +1,18 @@
 <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';
+import {
+  type TabItem,
+} from './__types/AntTabItem.types';
+import {
+  useVModel,
+} from '@vueuse/core';
+import {
+  computed,
+} from 'vue';
 
-const emits = defineEmits(['update:modelValue']);
+const emits = defineEmits([
+  'update:modelValue',
+]);
 const props = withDefaults(defineProps<{
   modelValue?: string;
   tabItems?: TabItem[];
@@ -29,8 +37,8 @@ function clickTab(tabItem: TabItem) {
     tabItem.clickHandler();
   }
 
-  if (tabItem.disabled){
-    return
+  if (tabItem.disabled) {
+    return;
   }
 
   currentActive.value = tabItem.id;
@@ -39,21 +47,27 @@ function clickTab(tabItem: TabItem) {
 
 <template>
   <div :class="containerClasses">
-    <div class="flex gap-px bg-base-300 border-l border-r border-base-300 overflow-x-auto" :class="scrollContainerClasses">
-    <slot>
-      <AntTabItem
-        v-for="(tabItem, index) in tabItems"
-        :key="`tab-item-${index}`"
-        v-bind="tabItem"
-        @click="clickTab(tabItem)"
-        :active="currentActive === tabItem.id"
-        :expanded="expanded"
-        :disabled="tabItem.disabled"
-        :skeleton="skeleton"
-      >
-        <slot name="content" v-bind="{item: tabItem, isActive: currentActive === tabItem.id}"></slot>
-      </AntTabItem>
-    </slot>
+    <div
+      class="flex gap-px bg-base-300 border-l border-r border-base-300 overflow-x-auto"
+      :class="scrollContainerClasses"
+    >
+      <slot>
+        <AntTabItem
+          v-for="(tabItem, index) in tabItems"
+          :key="`tab-item-${index}`"
+          v-bind="tabItem"
+          :active="currentActive === tabItem.id"
+          :expanded="expanded"
+          :disabled="tabItem.disabled"
+          :skeleton="skeleton"
+          @click="clickTab(tabItem)"
+        >
+          <slot
+            name="content"
+            v-bind="{item: tabItem, isActive: currentActive === tabItem.id}"
+          />
+        </AntTabItem>
+      </slot>
     </div>
   </div>
 </template>