@appscode/design-system 2.0.74 → 2.0.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.0.74",
+  "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/styles/components/sidebar/_left-sidebar.scss

@@ -179,8 +179,6 @@
         }
 
         ul {
-          max-height: 0;
-          transition: max-height 0.2s ease-out;
           margin: 0;
           padding: 0;
           border-left: none;

package/vue-components/v3/sidebar/SidebarItemWithDropDown.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { nextTick, onMounted, ref, watch } from "vue";
+import { ref } from "vue";
 
 interface Props {
   isDropDownOpen?: boolean;
@@ -13,85 +13,12 @@ const props = withDefaults(defineProps<Props>(), {
   icon: "https://cdn.appscode.com/k8s/icons/apiextensions.k8s.io/customresourcedefinitions.svg",
 });
 
-const emit = defineEmits(["dropDownItemChange"]);
-
-const dropDownStatus = ref("close");
-const dropDownSectionHeight = ref<string | null>(null);
-const isCompMounted = ref(false);
-const sectionItems = ref(null as HTMLElement | null);
-
-const setDropdownMaxHeight = (mode: string) => {
-  if (mode === "open" && sectionItems.value) {
-    dropDownSectionHeight.value = `${sectionItems.value.scrollHeight}px`;
-  } else {
-    dropDownSectionHeight.value = null;
-  }
-};
+const dropDownStatus = ref<"close" | "open">(`${props.isDropDownOpen ? "open" : "close"}`);
 
 const toggleDropDownStatus = () => {
-  if (dropDownStatus.value === "open") {
-    dropDownStatus.value = "close";
-  } else dropDownStatus.value = "open";
+  if (dropDownStatus.value === "open") dropDownStatus.value = "close";
+  else dropDownStatus.value = "open";
 };
-
-onMounted(() => {
-  isCompMounted.value = true;
-  setTimeout(() => {
-    // for expanding dropdown
-    if (props.isDropDownOpen) {
-      setDropdownMaxHeight("open");
-    } else {
-      setDropdownMaxHeight("close");
-    }
-  }, 200);
-});
-
-watch(
-  () => props.title,
-  (n, o) => {
-    if (n && isCompMounted.value) {
-      nextTick(() => {
-        // for expanding dropdown
-        setDropdownMaxHeight("open");
-      });
-    }
-
-    if (o && isCompMounted.value) {
-      nextTick(() => {
-        // for expanding dropdown
-        setDropdownMaxHeight("close");
-      });
-    }
-  }
-);
-
-watch(
-  () => props.isDropDownOpen,
-  (n) => {
-    if (n) {
-      dropDownStatus.value = "open";
-    } else dropDownStatus.value = "close";
-  },
-  {
-    immediate: true,
-  }
-);
-
-watch(dropDownStatus, (n) => {
-  if (n === "open") {
-    // emit event to close other drop down items
-    emit("dropDownItemChange");
-
-    nextTick(() => {
-      const dropDownUl = sectionItems.value;
-      // debugger;
-      if (dropDownUl) dropDownSectionHeight.value = `${dropDownUl.scrollHeight}px`;
-    });
-  } else {
-    // emit event to close other drop down items
-    dropDownSectionHeight.value = null;
-  }
-});
 </script>
 
 <template>
@@ -106,7 +33,7 @@ watch(dropDownStatus, (n) => {
       </span>
     </a>
 
-    <ul ref="sectionItems" :style="{ maxHeight: dropDownSectionHeight || undefined }">
+    <ul v-if="dropDownStatus == 'open'">
       <slot />
     </ul>
   </li>

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">