@antify/ui 2.2.0 → 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

@@ -5,12 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 module.exports = exports.Skeleton = exports.MultipleCollapseStrategy = exports.Loading = exports.Empty = exports.Docs = exports.DefaultCollapseOpen = exports.Collapsible = void 0;
 var _AntTable = _interopRequireDefault(require("../AntTable.vue"));
+var _AntButton = _interopRequireDefault(require("../../buttons/AntButton.vue"));
+var _AntSelect = _interopRequireDefault(require("../../inputs/AntSelect.vue"));
+var _AntCheckboxGroup = _interopRequireDefault(require("../../inputs/AntCheckboxGroup.vue"));
 var _TableHeader = require("../__types/TableHeader.types");
 var _vue = require("vue");
 var _faker = require("@faker-js/faker");
 var _AntSwitch = _interopRequireDefault(require("../../inputs/AntSwitch.vue"));
+var _test = require("@storybook/test");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
+  components: {
+    AntSelect: _AntSelect.default,
+    AntCheckboxGroup: _AntCheckboxGroup.default
+  },
   title: "Components/Table",
   component: _AntTable.default,
   parameters: {
@@ -137,7 +145,7 @@ const meta = {
 };
 module.exports = meta;
 const testData = (0, _vue.ref)([]);
-for (let i = 0; i < 100; i++) {
+function getRandomEntry() {
   const randomName = _faker.faker.person.firstName() + " " + _faker.faker.person.lastName();
   const randomNumber = _faker.faker.number.int({
     min: 18,
@@ -145,24 +153,41 @@ for (let i = 0; i < 100; i++) {
   });
   const randomEmail = _faker.faker.internet.email();
   const randomBoolean = _faker.faker.datatype.boolean();
-  testData.value.push({
+  const randomPermissions = _faker.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());
 }
 const Docs = exports.Docs = {
   render: args => ({
     components: {
       AntTable: _AntTable.default,
-      AntSwitch: _AntSwitch.default
+      AntSwitch: _AntSwitch.default,
+      AntCheckboxGroup: _AntCheckboxGroup.default
     },
     setup() {
       const selected = (0, _vue.ref)();
+      const checkboxes = [{
+        label: "Read",
+        value: "read"
+      }, {
+        label: "Write",
+        value: "write"
+      }];
       return {
         args,
-        selected
+        selected,
+        checkboxes
       };
     },
     template: `
@@ -172,11 +197,52 @@ const Docs = exports.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 _test.userEvent.click(employedCell);
+      await (0, _test.waitFor)(() => (0, _test.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 _test.userEvent.click(employedSwitch);
+      await (0, _test.waitFor)(() => {
+        const toggledAriaChecked = JSON.parse(employedSwitch?.getAttribute("aria-checked"));
+        (0, _test.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 _test.userEvent.click(permissionLabel);
+      await (0, _test.waitFor)(() => {
+        const toggledAriaChecked = JSON.parse(permissionCheckbox?.getAttribute("aria-checked"));
+        (0, _test.expect)(toggledAriaChecked).toBe(!initialAriaChecked);
+      }, {
+        timeout: 600
+      });
+    });
+  },
   args: {
     headers: [{
       title: "Name",
@@ -200,6 +266,11 @@ const Docs = exports.Docs = {
       identifier: "employed",
       rowClassList: "",
       type: _TableHeader.AntTableRowTypes.slot
+    }, {
+      title: "Permissions",
+      identifier: "permissions",
+      rowClassList: "",
+      type: _TableHeader.AntTableRowTypes.slot
     }],
     data: testData.value
   }
@@ -338,13 +409,22 @@ const Collapsible = exports.Collapsible = {
   render: args => ({
     components: {
       AntTable: _AntTable.default,
-      AntSwitch: _AntSwitch.default
+      AntSwitch: _AntSwitch.default,
+      AntCheckboxGroup: _AntCheckboxGroup.default
     },
     setup() {
       const selected = (0, _vue.ref)();
+      const checkboxes = [{
+        label: "Read",
+        value: "read"
+      }, {
+        label: "Write",
+        value: "write"
+      }];
       return {
         args,
-        selected
+        selected,
+        checkboxes
       };
     },
     template: `
@@ -354,6 +434,10 @@ const Collapsible = exports.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}">
@@ -373,13 +457,22 @@ const MultipleCollapseStrategy = exports.MultipleCollapseStrategy = {
   render: args => ({
     components: {
       AntTable: _AntTable.default,
-      AntSwitch: _AntSwitch.default
+      AntSwitch: _AntSwitch.default,
+      AntCheckboxGroup: _AntCheckboxGroup.default
     },
     setup() {
       const selected = (0, _vue.ref)();
+      const checkboxes = [{
+        label: "Read",
+        value: "read"
+      }, {
+        label: "Write",
+        value: "write"
+      }];
       return {
         args,
-        selected
+        selected,
+        checkboxes
       };
     },
     template: `
@@ -389,6 +482,10 @@ const MultipleCollapseStrategy = exports.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}">
@@ -408,22 +505,43 @@ const DefaultCollapseOpen = exports.DefaultCollapseOpen = {
   render: args => ({
     components: {
       AntTable: _AntTable.default,
-      AntSwitch: _AntSwitch.default
+      AntSwitch: _AntSwitch.default,
+      AntCheckboxGroup: _AntCheckboxGroup.default,
+      AntButton: _AntButton.default
     },
     setup() {
       const selected = (0, _vue.ref)();
+      const data = (0, _vue.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,
-        selected
+        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}">