@antify/ui 2.2.0 → 2.2.3

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

@@ -1,12 +1,36 @@
 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 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 AntSwitch from "../../inputs/AntSwitch.vue";
+import {
+  expect,
+  userEvent,
+  waitFor
+} from "@storybook/test";
 const meta = {
+  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.",
@@ -41,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: {
@@ -90,24 +150,56 @@ const meta = {
 };
 export default meta;
 const testData = ref([]);
-for (let i = 0; i < 100; i++) {
+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();
-  testData.value.push({
+  const randomPermissions = faker.helpers.arrayElements([
+    "read",
+    "write"
+  ], {
+    min: 0,
+    max: 2
+  });
+  return {
     name: randomName,
     age: randomNumber,
     email: randomEmail,
-    employed: randomBoolean
-  });
+    employed: randomBoolean,
+    permissions: randomPermissions
+  };
+}
+for (let i = 0; i < 100; i++) {
+  testData.value.push(getRandomEntry());
 }
 export const Docs = {
   render: (args) => ({
-    components: { AntTable, AntSwitch },
+    components: {
+      AntTable,
+      AntSwitch,
+      AntCheckboxGroup
+    },
     setup() {
       const selected = ref();
-      return { args, selected };
+      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">
@@ -116,11 +208,52 @@ export const Docs = {
             <div v-if="header.identifier === 'employed'">
               <AntSwitch v-model="entry.employed"/>
             </div>
+
+            <div v-if="header.identifier === 'permissions'">
+              <AntCheckboxGroup v-model="entry.permissions" :checkboxes="checkboxes" direction="row"/>
+            </div>
           </template>
         </AntTable>
       </div>
     `
   }),
+  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");
+    const permissionsCell = firstRow.querySelector('[data-e2e="table-cell-permissions"]');
+    const permissionCheckboxWithLabel = permissionsCell?.querySelector('[data-e2e="checkbox"]');
+    const permissionCheckbox = permissionCheckboxWithLabel?.querySelector('[type="checkbox"]');
+    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 step("Click on employed switch and expect the value to toggle", async () => {
+      const initialAriaChecked = JSON.parse(employedSwitch?.getAttribute("aria-checked"));
+      await userEvent.click(employedSwitch);
+      await waitFor(() => {
+        const toggledAriaChecked = JSON.parse(employedSwitch?.getAttribute("aria-checked"));
+        expect(toggledAriaChecked).toBe(!initialAriaChecked);
+      }, {
+        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"));
+      await userEvent.click(permissionLabel);
+      await waitFor(() => {
+        const toggledAriaChecked = JSON.parse(permissionCheckbox?.getAttribute("aria-checked"));
+        expect(toggledAriaChecked).toBe(!initialAriaChecked);
+      }, {
+        timeout: 600
+      });
+    });
+  },
   args: {
     headers: [
       {
@@ -148,6 +281,12 @@ export const Docs = {
         identifier: "employed",
         rowClassList: "",
         type: AntTableRowTypes.slot
+      },
+      {
+        title: "Permissions",
+        identifier: "permissions",
+        rowClassList: "",
+        type: AntTableRowTypes.slot
       }
     ],
     data: testData.value
@@ -155,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">
@@ -294,10 +439,28 @@ export const Loading = {
 };
 export const Collapsible = {
   render: (args) => ({
-    components: { AntTable, AntSwitch },
+    components: {
+      AntTable,
+      AntSwitch,
+      AntCheckboxGroup
+    },
     setup() {
       const selected = ref();
-      return { args, selected };
+      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">
@@ -306,6 +469,10 @@ export const Collapsible = {
             <div v-if="header.identifier === 'employed'">
               <AntSwitch v-model="entry.employed"/>
             </div>
+
+            <div v-if="header.identifier === 'permissions'">
+              <AntCheckboxGroup v-model="entry.permissions" :checkboxes="checkboxes" direction="row"/>
+            </div>
           </template>
 
           <template #afterRowContent="{element, rowIndex}">
@@ -323,10 +490,28 @@ export const Collapsible = {
 };
 export const MultipleCollapseStrategy = {
   render: (args) => ({
-    components: { AntTable, AntSwitch },
+    components: {
+      AntTable,
+      AntSwitch,
+      AntCheckboxGroup
+    },
     setup() {
       const selected = ref();
-      return { args, selected };
+      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">
@@ -335,6 +520,10 @@ export const MultipleCollapseStrategy = {
             <div v-if="header.identifier === 'employed'">
               <AntSwitch v-model="entry.employed"/>
             </div>
+
+            <div v-if="header.identifier === 'permissions'">
+              <AntCheckboxGroup v-model="entry.permissions" :checkboxes="checkboxes" direction="row"/>
+            </div>
           </template>
 
           <template #afterRowContent="{element, rowIndex}">
@@ -352,18 +541,51 @@ export const MultipleCollapseStrategy = {
 };
 export const DefaultCollapseOpen = {
   render: (args) => ({
-    components: { AntTable, AntSwitch },
+    components: {
+      AntTable,
+      AntSwitch,
+      AntCheckboxGroup,
+      AntButton
+    },
     setup() {
       const selected = ref();
-      return { args, selected };
+      const data = ref(args.data.splice(0, 5));
+      const checkboxes = [
+        {
+          label: "Read",
+          value: "read"
+        },
+        {
+          label: "Write",
+          value: "write"
+        }
+      ];
+      function addRandomEntry() {
+        data.value = [
+          ...data.value,
+          getRandomEntry()
+        ];
+      }
+      return {
+        args,
+        data,
+        selected,
+        checkboxes,
+        addRandomEntry
+      };
     },
     template: `
-      <div class="h-96 border border-dashed border-base-300">
-        <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val" :rows-collapsed="false">
+      <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" collapse-strategy="multiple" expandedRows>
           <template #cellContent="{element: entry, header}">
             <div v-if="header.identifier === 'employed'">
               <AntSwitch v-model="entry.employed"/>
             </div>
+
+            <div v-if="header.identifier === 'permissions'">
+              <AntCheckboxGroup v-model="entry.permissions" :checkboxes="checkboxes" direction="row"/>
+            </div>
           </template>
 
           <template #afterRowContent="{element, rowIndex}">

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

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

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

@@ -13,15 +13,4 @@ Object.keys(_TableHeader).forEach(function (key) {
       return _TableHeader[key];
     }
   });
-});
-var _AntCollapsibleTable = require("./AntCollapsibleTable.types");
-Object.keys(_AntCollapsibleTable).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _AntCollapsibleTable[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _AntCollapsibleTable[key];
-    }
-  });
 });

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

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

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>

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

@@ -1,12 +1,22 @@
 import AntTabItem from "../AntTabItem.vue";
-import { TabItemState } from "../__types/AntTabItem.types.mjs";
-import { vueRouter } from "storybook-vue3-router";
+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" } },
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
   decorators: [
-    () => ({ template: '<div class="dashed"><story /></div>' }),
+    () => ({
+      template: '<div class="dashed"><story /></div>'
+    }),
     vueRouter()
   ],
   argTypes: {
@@ -15,7 +25,9 @@ const meta = {
       description: "Some InputStates can have an icon. Control with this property if it gets shown or not."
     },
     state: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(TabItemState)
     }
   }
@@ -23,9 +35,13 @@ const meta = {
 export default meta;
 export const Docs = {
   render: (args) => ({
-    components: { AntTabItem },
+    components: {
+      AntTabItem
+    },
     setup() {
-      return { args };
+      return {
+        args
+      };
     },
     template: '<AntTabItem v-bind="args"/>'
   }),