@appscode/design-system 2.0.75 → 2.0.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.0.75",
+  "version": "2.0.76",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/styles/components/_table.scss

@@ -3,6 +3,8 @@
 
 .table-container {
   &.ac-table-container {
+    margin-bottom: 8px;
+
     &::-webkit-scrollbar {
       height: 7px;
     }

package/vue-components/v3/table/Table.vue

@@ -11,6 +11,7 @@ interface Props {
   isDynamicWidthTable?: boolean;
   fullWidth?: number;
   columnStriped?: boolean;
+  modifierClass?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -22,6 +23,7 @@ const props = withDefaults(defineProps<Props>(), {
   isDynamicWidthTable: false,
   fullWidth: 1920,
   columnStriped: false,
+  modifierClass: "",
 });
 
 const emit = defineEmits(["sort", "scroller"]);
@@ -125,90 +127,93 @@ onUpdated(() => {
 </script>
 
 <template>
-  <table-container ref="ac_table_container" @scroller="handleScroller">
-    <table
-      ref="ac_table"
-      class="table ac-table is-bordered"
-      :class="{
-        'is-fullwidth': !isDynamicWidthTable || isFullTableLoaderActive || isTableEmpty || isLoaderActive,
-        // 'ac-striped': !columnStriped,
-        // 'is-bordered': columnStriped,
-      }"
-    >
-      <thead>
-        <table-row v-if="isFullTableLoaderActive">
-          <th v-for="i in loaderCols" :key="i">
-            <cell-value :is-loader-active="true" />
-          </th>
-        </table-row>
-        <table-row v-else>
-          <th v-if="collapsible" style="width: 20px" />
-          <th
-            v-for="(tableHeader, idx) in tableHeaders"
-            :key="idx"
-            :class="{
-              sorting: headerSortables[idx].enabled,
-              'sorting-desc': headerSortables[idx].mode === 'desc',
-              'sorting-asc': headerSortables[idx].mode === 'asc',
-              'has-text-centered': typeof tableHeader === 'string' ? false : tableHeader.textAlign === 'center',
-              'has-text-left': typeof tableHeader === 'string' ? false : tableHeader.textAlign === 'left',
-              'has-text-right': typeof tableHeader === 'string' ? false : tableHeader.textAlign === 'right',
-            }"
-            @click.prevent="headerSortables[idx].enabled && emitSortEvent(idx)"
-          >
-            {{ headerLabels[idx] }}
-            <span
-              v-if="tableHeader.dashboard && tableHeader.dashboard.status && tableHeader.dashboard.status !== 'Success'"
-              :title="tableHeader.dashboard && tableHeader.dashboard.message"
-              class="icon has-text-danger"
-            >
-              <i class="fa fa-exclamation-triangle" />
-            </span>
-          </th>
-          <th ref="action-section" v-if="actionable"></th>
-          <fake-table-cell v-if="fakeCellWidth > 0" :is-header-cell="true" :fake-cell-width="fakeCellWidth" />
-        </table-row>
-      </thead>
-      <!-- table row loaders -->
-      <tbody v-if="isFullTableLoaderActive || isLoaderActive">
-        <table-row v-if="isFullTableLoaderActive">
-          <th v-for="i in loaderCols" :key="i">
-            <cell-value :is-loader-active="true" />
-          </th>
-        </table-row>
-        <table-row v-else>
-          <table-cell v-for="(tableHeader, idx) in tableHeaders" :key="headerLabels[idx]">
-            <cell-value :is-loader-active="true" :cell-title="headerLabels[idx]" />
-          </table-cell>
-        </table-row>
-      </tbody>
-      <!-- table row loaders -->
-      <template v-else>
-        <tbody v-if="!isTableEmpty">
-          <!-- table rows -->
-          <slot :fake-cell-width="fakeCellWidth" />
-        </tbody>
-        <tbody v-else>
-          <table-row class="is-hoverless">
-            <table-cell
-              :colspan="tableHeaders.length + (actionable ? 1 : 0) + (collapsible ? 1 : 0)"
-              class="no-data-available has-text-centered"
+  <div class="table-wrapper" :class="modifierClass">
+    <table-container ref="ac_table_container" @scroller="handleScroller">
+      <table
+        ref="ac_table"
+        class="table ac-table is-bordered"
+        :class="{
+          'is-fullwidth': !isDynamicWidthTable || isFullTableLoaderActive || isTableEmpty || isLoaderActive,
+          // 'ac-striped': !columnStriped,
+          // 'is-bordered': columnStriped,
+        }"
+      >
+        <thead>
+          <table-row v-if="isFullTableLoaderActive">
+            <th v-for="i in loaderCols" :key="i">
+              <cell-value :is-loader-active="true" />
+            </th>
+          </table-row>
+          <table-row v-else>
+            <th v-if="collapsible" style="width: 20px" />
+            <th
+              v-for="(tableHeader, idx) in tableHeaders"
+              :key="idx"
+              :class="{
+                sorting: headerSortables[idx].enabled,
+                'sorting-desc': headerSortables[idx].mode === 'desc',
+                'sorting-asc': headerSortables[idx].mode === 'asc',
+                'has-text-centered': typeof tableHeader === 'string' ? false : tableHeader.textAlign === 'center',
+                'has-text-left': typeof tableHeader === 'string' ? false : tableHeader.textAlign === 'left',
+                'has-text-right': typeof tableHeader === 'string' ? false : tableHeader.textAlign === 'right',
+              }"
+              @click.prevent="headerSortables[idx].enabled && emitSortEvent(idx)"
             >
-              <empty-table-info />
+              {{ headerLabels[idx] }}
+              <span
+                v-if="
+                  tableHeader.dashboard && tableHeader.dashboard.status && tableHeader.dashboard.status !== 'Success'
+                "
+                :title="tableHeader.dashboard && tableHeader.dashboard.message"
+                class="icon has-text-danger"
+              >
+                <i class="fa fa-exclamation-triangle" />
+              </span>
+            </th>
+            <th ref="action-section" v-if="actionable"></th>
+            <fake-table-cell v-if="fakeCellWidth > 0" :is-header-cell="true" :fake-cell-width="fakeCellWidth" />
+          </table-row>
+        </thead>
+        <!-- table row loaders -->
+        <tbody v-if="isFullTableLoaderActive || isLoaderActive">
+          <table-row v-if="isFullTableLoaderActive">
+            <th v-for="i in loaderCols" :key="i">
+              <cell-value :is-loader-active="true" />
+            </th>
+          </table-row>
+          <table-row v-else>
+            <table-cell v-for="(tableHeader, idx) in tableHeaders" :key="headerLabels[idx]">
+              <cell-value :is-loader-active="true" :cell-title="headerLabels[idx]" />
             </table-cell>
           </table-row>
         </tbody>
-      </template>
-    </table>
-
-    <!-- table footer info start -->
-    <slot name="table-footer-info" />
-    <!-- table footer info end -->
-
+        <!-- table row loaders -->
+        <template v-else>
+          <tbody v-if="!isTableEmpty">
+            <!-- table rows -->
+            <slot :fake-cell-width="fakeCellWidth" />
+          </tbody>
+          <tbody v-else>
+            <table-row class="is-hoverless">
+              <table-cell
+                :colspan="tableHeaders.length + (actionable ? 1 : 0) + (collapsible ? 1 : 0)"
+                class="no-data-available has-text-centered"
+              >
+                <empty-table-info />
+              </table-cell>
+            </table-row>
+          </tbody>
+        </template>
+      </table>
+
+      <!-- table footer info start -->
+      <slot name="table-footer-info" />
+      <!-- table footer info end -->
+    </table-container>
     <!-- pagination start -->
     <slot name="table-pagination" />
     <!-- pagination end -->
-  </table-container>
+  </div>
 </template>
 
 <style lang="scss">