@antify/ui 2.0.0 → 2.2.0

package/dist/components/table/AntTable.vue

@@ -2,11 +2,17 @@
 import {AntTableSize, AntTableSortDirection, type TableHeader} from './__types/TableHeader.types';
 import {computed, ref, type Ref, watch} from 'vue';
 import {useVModel} from '@vueuse/core';
-import {State} from '../../enums';
+import {Size, State} from '../../enums';
 import AntTh from './AntTh.vue';
 import AntTd from './AntTd.vue';
 import AntSpinner from '../AntSpinner.vue';
 import AntSkeleton from '../AntSkeleton.vue';
+import {hasSlotContent} from "@/utils";
+import AntCollapsibleTableRowContent from "./AntCollapsibleTableRowContent.vue";
+import {CollapseStrategy} from "@/components/table/__types";
+import {faAngleDown, faAngleUp} from "@fortawesome/free-solid-svg-icons";
+import AntButton from "../buttons/AntButton.vue";
+import AntIcon from "../AntIcon.vue";
 
 defineOptions({inheritAttrs: false});
 
@@ -29,15 +35,23 @@ const props = withDefaults(
     showLightVersion?: boolean;
     size?: AntTableSize;
     headerColor?: string;
+    emptyStateText?: string;
+    collapseStrategy?: CollapseStrategy;
+    rowsCollapsed?: boolean;
   }>(), {
     rowKey: 'id',
     loading: false,
     selectableRows: false,
     showLightVersion: false,
     size: AntTableSize.md,
-    headerColor: 'bg-base-200'
+    headerColor: 'bg-base-200',
+    emptyStateText: 'We couldn\'t find any entry',
+    collapseStrategy: CollapseStrategy.single,
+    rowsCollapsed: true,
   });
+const slots = defineSlots();
 
+const openItems = ref<number[]>([]);
 const selected: Ref<Record<string, unknown> | undefined> = useVModel(props, 'selectedRow', emits);
 const _loading: Ref<boolean> = useVModel(props, 'loading', emits);
 const _showLightVersion = ref(props.showLightVersion);
@@ -51,6 +65,8 @@ const _headers = computed(() => {
   return props.headers;
 });
 
+const maxColSpan = computed(() => _headers.value.length + (hasSlotContent(slots['rowFirstCell']) ? 1 : 0) + (hasSlotContent(slots['rowLastCell']) ? 1 : 0))
+
 watch(() => props.showLightVersion, (val) => {
   setTimeout(() => _showLightVersion.value = val, val ? 200 : 400);
 });
@@ -80,11 +96,32 @@ function sortTable(header: TableHeader, newDirection: AntTableSortDirection) {
   emits('updateSort', header, newDirection);
 }
 
-function rowClick(elem: Record<string, unknown>): void {
+function rowClick(e: MouseEvent, elem: Record<string, unknown>): void {
+  e.preventDefault();
+
   selected.value = elem;
 
   emits('rowClick', elem);
 }
+
+function toggleRowContent(index: number) {
+  const isOpen = openItems.value.includes(index);
+
+  if (isOpen) {
+    openItems.value = props.collapseStrategy === CollapseStrategy.single && props.rowsCollapsed
+      ? []
+      : openItems.value.filter(item => item !== index);
+  } else {
+    openItems.value = props.collapseStrategy === CollapseStrategy.single
+      ? [index]
+      : [...openItems.value, index];
+  }
+}
+
+// Open all row contents by default
+if (!props.rowsCollapsed) {
+  props.data.map((_, index) => openItems.value.push(index));
+}
 </script>
 
 <template>
@@ -119,67 +156,93 @@ function rowClick(elem: Record<string, unknown>): void {
             </AntTh>
           </template>
 
+          <template v-if="!!$slots.afterRowContent">
+            <td/>
+          </template>
+
           <slot name="headerLastCell"></slot>
         </tr>
         </thead>
 
         <tbody class="bg-white relative">
         <!-- TODO:: Add some kind of virtual list for very large tree data (or required pagination??) -->
-        <tr
-          v-for="(elem, rowIndex) in data"
-          :id="elem[rowKey] as string"
-          :key="`table-row-${elem[rowKey]}-${rowIndex}`"
-          :class="{
+        <template
+          v-for="(elem, rowIndex) in data" :key="`table-row-${elem[rowKey]}-${rowIndex}`"
+        >
+          <tr
+            :id="elem[rowKey] as string"
+            :class="{
               'bg-primary-200 text-primary-200-font transition-colors': elem === selected,
               'bg-white text-for-white-bg-font': elem !== selected && rowIndex % 2 === 0,
               'bg-base-100 text-base-100-font': elem !== selected && rowIndex % 2 !== 0,
               'cursor-pointer': selectableRows,
               'hover:bg-base-200': selectableRows && elem !== selected,
             }"
-        >
-          <slot
-            name="rowFirstCell"
-            v-bind="{ elem }"
-          />
+          >
+            <slot
+              name="rowFirstCell"
+              v-bind="{ elem }"
+            />
 
-          <template v-for="(header, colIndex) in _headers">
-            <AntTd
-              v-if="!_showLightVersion || (_showLightVersion && header.lightVersion)"
-              :key="`table-cell-${header.identifier}-${colIndex}`"
-              :header="header"
-              :element="elem"
-              :align="header.align"
-              :size="size"
-              @click="rowClick(elem)"
-            >
-              <template #beforeCellContent="props">
-                <slot
-                  name="beforeCellContent"
-                  v-bind="{...props, colIndex, rowIndex}"
-                />
-              </template>
+            <template v-for="(header, colIndex) in _headers">
+              <AntTd
+                v-if="!_showLightVersion || (_showLightVersion && header.lightVersion)"
+                :key="`table-cell-${header.identifier}-${colIndex}`"
+                :header="header"
+                :element="elem"
+                :align="header.align"
+                :size="size"
+                @click="(e) => rowClick(e, elem)"
+              >
+                <template #beforeCellContent="props">
+                  <slot
+                    name="beforeCellContent"
+                    v-bind="{...props, colIndex, rowIndex}"
+                  />
+                </template>
 
-              <template #cellContent="props">
-                <slot
-                  name="cellContent"
-                  v-bind="{...props, colIndex, rowIndex}"
-                />
-              </template>
+                <template #cellContent="props">
+                  <slot
+                    name="cellContent"
+                    v-bind="{...props, colIndex, rowIndex}"
+                  />
+                </template>
 
-              <template #afterCellContent="props">
-                <slot
-                  name="afterCellContent"
-                  v-bind="{...props, colIndex, rowIndex}"
-                />
-              </template>
-            </AntTd>
-          </template>
+                <template #afterCellContent="props">
+                  <slot
+                    name="afterCellContent"
+                    v-bind="{...props, colIndex, rowIndex}"
+                  />
+                </template>
+              </AntTd>
+            </template>
 
-          <slot
-            name="rowLastCell"
-            v-bind="{ elem }"
-          />
-        </tr>
+            <template v-if="!!$slots.afterRowContent">
+              <td class="whitespace-nowrap text-sm font-medium relative px-2 py-0 h-9 text-right"
+                  @click="(e) => rowClick(e, elem)">
+                <AntButton @click="toggleRowContent(rowIndex)" :size="Size.xs2">
+                  <AntIcon :icon="openItems.includes(rowIndex) ? faAngleUp : faAngleDown"/>
+                </AntButton>
+              </td>
+            </template>
+
+            <slot
+              name="rowLastCell"
+              v-bind="{ elem }"
+            />
+          </tr>
+
+          <template v-if="!!$slots.afterRowContent">
+            <tr>
+              <td :colspan="maxColSpan + 1" class="p-0">
+                <AntCollapsibleTableRowContent :is-open="openItems.includes(rowIndex)"
+                >
+                  <slot name="afterRowContent" v-bind="{ element: elem, rowIndex }"/>
+                </AntCollapsibleTableRowContent>
+              </td>
+            </tr>
+          </template>
+        </template>
 
         <tr v-if="data.length <= 0 && !_loading">
           <td
@@ -188,7 +251,7 @@ function rowClick(elem: Record<string, unknown>): void {
           >
             <slot name="emptyState">
               <div class="flex items-center flex-col">
-                <span class="font-semibold">We couldn't find any entry</span>
+                <span class="font-semibold">{{ emptyStateText }}</span>
               </div>
             </slot>
           </td>

package/dist/components/table/AntTd.vue

@@ -74,7 +74,3 @@ const cellClasses = computed(() => ({
     />
   </td>
 </template>
-
-<style scoped>
-
-</style>

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

@@ -7,3 +7,6 @@ export declare const Docs: Story;
 export declare const Empty: Story;
 export declare const Skeleton: Story;
 export declare const Loading: Story;
+export declare const Collapsible: Story;
+export declare const MultipleCollapseStrategy: Story;
+export declare const DefaultCollapseOpen: Story;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = exports.Skeleton = exports.Loading = exports.Empty = exports.Docs = void 0;
+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 _TableHeader = require("../__types/TableHeader.types");
 var _vue = require("vue");
@@ -169,8 +169,8 @@ const Docs = exports.Docs = {
       <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">
           <template #cellContent="{element: entry, header}">
-            <div v-if="header.identifier === 'employeed'">
-              <AntSwitch v-model="entry.employeed"/>
+            <div v-if="header.identifier === 'employed'">
+              <AntSwitch v-model="entry.employed"/>
             </div>
           </template>
         </AntTable>
@@ -196,8 +196,8 @@ const Docs = exports.Docs = {
       rowClassList: "",
       type: _TableHeader.AntTableRowTypes.text
     }, {
-      title: "Employeed",
-      identifier: "employeed",
+      title: "Employed",
+      identifier: "employed",
       rowClassList: "",
       type: _TableHeader.AntTableRowTypes.slot
     }],
@@ -205,7 +205,42 @@ const Docs = exports.Docs = {
   }
 };
 const Empty = exports.Empty = {
-  render: Docs.render,
+  render: args => ({
+    components: {
+      AntTable: _AntTable.default,
+      AntSwitch: _AntSwitch.default
+    },
+    setup() {
+      const selected = (0, _vue.ref)();
+      return {
+        args,
+        selected
+      };
+    },
+    template: `
+      <div class="flex flex-col gap-2">
+        <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">
+            <template #cellContent="{element: entry, header}">
+              <div v-if="header.identifier === 'employed'">
+                <AntSwitch v-model="entry.employed"/>
+              </div>
+            </template>
+          </AntTable>
+          </div>
+
+          <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" empty-state-text="Custom Empty State Text">
+              <template #cellContent="{element: entry, header}">
+                <div v-if="header.identifier === 'employed'">
+                  <AntSwitch v-model="entry.employed"/>
+                </div>
+              </template>
+            </AntTable>
+          </div>
+        </div>
+    `
+  }),
   args: {
     headers: [{
       title: "Name",
@@ -298,4 +333,109 @@ const Loading = exports.Loading = {
     }],
     data: testData.value
   }
+};
+const Collapsible = exports.Collapsible = {
+  render: args => ({
+    components: {
+      AntTable: _AntTable.default,
+      AntSwitch: _AntSwitch.default
+    },
+    setup() {
+      const selected = (0, _vue.ref)();
+      return {
+        args,
+        selected
+      };
+    },
+    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">
+          <template #cellContent="{element: entry, header}">
+            <div v-if="header.identifier === 'employed'">
+              <AntSwitch v-model="entry.employed"/>
+            </div>
+          </template>
+
+          <template #afterRowContent="{element, rowIndex}">
+            <div class="p-4">
+              <pre>
+                {{element}}
+              </pre>
+            </div>
+          </template>
+        </AntTable>
+      </div>
+    `
+  }),
+  args: Docs.args
+};
+const MultipleCollapseStrategy = exports.MultipleCollapseStrategy = {
+  render: args => ({
+    components: {
+      AntTable: _AntTable.default,
+      AntSwitch: _AntSwitch.default
+    },
+    setup() {
+      const selected = (0, _vue.ref)();
+      return {
+        args,
+        selected
+      };
+    },
+    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" collapse-strategy="multiple">
+          <template #cellContent="{element: entry, header}">
+            <div v-if="header.identifier === 'employed'">
+              <AntSwitch v-model="entry.employed"/>
+            </div>
+          </template>
+
+          <template #afterRowContent="{element, rowIndex}">
+            <div class="p-4">
+              <pre>
+                {{JSON.stringify(element, null, 2)}}
+              </pre>
+            </div>
+          </template>
+        </AntTable>
+      </div>
+    `
+  }),
+  args: Docs.args
+};
+const DefaultCollapseOpen = exports.DefaultCollapseOpen = {
+  render: args => ({
+    components: {
+      AntTable: _AntTable.default,
+      AntSwitch: _AntSwitch.default
+    },
+    setup() {
+      const selected = (0, _vue.ref)();
+      return {
+        args,
+        selected
+      };
+    },
+    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">
+          <template #cellContent="{element: entry, header}">
+            <div v-if="header.identifier === 'employed'">
+              <AntSwitch v-model="entry.employed"/>
+            </div>
+          </template>
+
+          <template #afterRowContent="{element, rowIndex}">
+            <div class="p-4">
+              <pre>
+                {{JSON.stringify(element, null, 2)}}
+              </pre>
+            </div>
+          </template>
+        </AntTable>
+      </div>
+    `
+  }),
+  args: Docs.args
 };

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

@@ -113,8 +113,8 @@ export const Docs = {
       <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">
           <template #cellContent="{element: entry, header}">
-            <div v-if="header.identifier === 'employeed'">
-              <AntSwitch v-model="entry.employeed"/>
+            <div v-if="header.identifier === 'employed'">
+              <AntSwitch v-model="entry.employed"/>
             </div>
           </template>
         </AntTable>
@@ -144,8 +144,8 @@ export const Docs = {
         type: AntTableRowTypes.text
       },
       {
-        title: "Employeed",
-        identifier: "employeed",
+        title: "Employed",
+        identifier: "employed",
         rowClassList: "",
         type: AntTableRowTypes.slot
       }
@@ -154,7 +154,36 @@ export const Docs = {
   }
 };
 export const Empty = {
-  render: Docs.render,
+  render: (args) => ({
+    components: { AntTable, AntSwitch },
+    setup() {
+      const selected = ref();
+      return { args, selected };
+    },
+    template: `
+      <div class="flex flex-col gap-2">
+        <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">
+            <template #cellContent="{element: entry, header}">
+              <div v-if="header.identifier === 'employed'">
+                <AntSwitch v-model="entry.employed"/>
+              </div>
+            </template>
+          </AntTable>
+          </div>
+
+          <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" empty-state-text="Custom Empty State Text">
+              <template #cellContent="{element: entry, header}">
+                <div v-if="header.identifier === 'employed'">
+                  <AntSwitch v-model="entry.employed"/>
+                </div>
+              </template>
+            </AntTable>
+          </div>
+        </div>
+    `
+  }),
   args: {
     headers: [
       {
@@ -263,3 +292,90 @@ export const Loading = {
     data: testData.value
   }
 };
+export const Collapsible = {
+  render: (args) => ({
+    components: { AntTable, AntSwitch },
+    setup() {
+      const selected = ref();
+      return { args, selected };
+    },
+    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">
+          <template #cellContent="{element: entry, header}">
+            <div v-if="header.identifier === 'employed'">
+              <AntSwitch v-model="entry.employed"/>
+            </div>
+          </template>
+
+          <template #afterRowContent="{element, rowIndex}">
+            <div class="p-4">
+              <pre>
+                {{element}}
+              </pre>
+            </div>
+          </template>
+        </AntTable>
+      </div>
+    `
+  }),
+  args: Docs.args
+};
+export const MultipleCollapseStrategy = {
+  render: (args) => ({
+    components: { AntTable, AntSwitch },
+    setup() {
+      const selected = ref();
+      return { args, selected };
+    },
+    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" collapse-strategy="multiple">
+          <template #cellContent="{element: entry, header}">
+            <div v-if="header.identifier === 'employed'">
+              <AntSwitch v-model="entry.employed"/>
+            </div>
+          </template>
+
+          <template #afterRowContent="{element, rowIndex}">
+            <div class="p-4">
+              <pre>
+                {{JSON.stringify(element, null, 2)}}
+              </pre>
+            </div>
+          </template>
+        </AntTable>
+      </div>
+    `
+  }),
+  args: Docs.args
+};
+export const DefaultCollapseOpen = {
+  render: (args) => ({
+    components: { AntTable, AntSwitch },
+    setup() {
+      const selected = ref();
+      return { args, selected };
+    },
+    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">
+          <template #cellContent="{element: entry, header}">
+            <div v-if="header.identifier === 'employed'">
+              <AntSwitch v-model="entry.employed"/>
+            </div>
+          </template>
+
+          <template #afterRowContent="{element, rowIndex}">
+            <div class="p-4">
+              <pre>
+                {{JSON.stringify(element, null, 2)}}
+              </pre>
+            </div>
+          </template>
+        </AntTable>
+      </div>
+    `
+  }),
+  args: Docs.args
+};

package/dist/components/table/__types/AntCollapsibleTable.types.d.ts

@@ -0,0 +1,4 @@
+export declare enum CollapseStrategy {
+    single = "single",
+    multiple = "multiple"
+}

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CollapseStrategy = void 0;
+var CollapseStrategy = exports.CollapseStrategy = /* @__PURE__ */(CollapseStrategy2 => {
+  CollapseStrategy2["single"] = "single";
+  CollapseStrategy2["multiple"] = "multiple";
+  return CollapseStrategy2;
+})(CollapseStrategy || {});

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

@@ -0,0 +1,5 @@
+export var CollapseStrategy = /* @__PURE__ */ ((CollapseStrategy2) => {
+  CollapseStrategy2["single"] = "single";
+  CollapseStrategy2["multiple"] = "multiple";
+  return CollapseStrategy2;
+})(CollapseStrategy || {});

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

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

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

@@ -13,4 +13,15 @@ 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 +1,2 @@
 export * from "./TableHeader.types.mjs";
+export * from "./AntCollapsibleTable.types.mjs";

package/dist/tailwind.config.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("tailwindcss/types/config").Config;
+import { type Config } from 'tailwindcss';
+declare const _default: Config;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antify/ui",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "private": false,
   "type": "module",
   "exports": {
@@ -58,7 +58,8 @@
     "@vuepic/vue-datepicker": "^6.1.0",
     "@vueuse/components": "^10.7.2",
     "@vueuse/core": "^10.7.2",
-    "@vueuse/router": "^10.7.2"
+    "@vueuse/router": "^10.7.2",
+    "big.js": "^6.2.2"
   },
   "devDependencies": {
     "@antify/validate": "^1.14.0",
@@ -73,6 +74,7 @@
     "@storybook/vue3": "^8.2.9",
     "@storybook/vue3-vite": "^8.2.9",
     "@tsconfig/node20": "^20.1.4",
+    "@types/big.js": "^6.2.2",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^20.14.5",
     "@vitejs/plugin-vue": "^5.0.5",
@@ -84,7 +86,7 @@
     "standard-version": "^9.5.0",
     "storybook": "^8.2.9",
     "storybook-vue3-router": "^5.0.0",
-    "typescript": "~5.4.0",
+    "typescript": "~5.5.0",
     "unbuild": "^2.0.0",
     "vite": "^5.3.1",
     "vitest": "^1.6.0",