@appscode/design-system 2.0.59 → 2.0.60

package/vue-components/v2/navbar/Appdrawer.vue

@@ -1,15 +1,7 @@
 <template>
   <div class="app-drawer-wrapper is-flex">
-    <div
-      class="drawer-icon is-flex is-justify-content-center is-align-items-center"
-    >
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
+    <div class="drawer-icon is-flex is-justify-content-center is-align-items-center">
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           d="M6.66667 2H2V6.66667H6.66667V2Z"
           stroke="#061B2D"

package/vue-components/v2/navbar/ThemeMode.vue

@@ -3,7 +3,7 @@
     <button
       v-if="themeMode"
       class="button ac-nav-button"
-      style="color: #ffffff; font-size: 15px;"
+      style="color: #ffffff; font-size: 15px"
       @click="toggleTheme"
       :title="themeModes[themeMode].displayName"
     >
@@ -11,11 +11,11 @@
     </button>
     <div class="ac-menu-content theme-choice">
       <ul class="is-flex is-flex-direction-row is-justify-content-space-around">
-        <li 
+        <li
           v-for="theme of Object.keys(themeModes)"
           :title="themeModes[theme].displayName"
           @click="themeMode = theme"
-          :class="{'is-active': themeMode === theme}"
+          :class="{ 'is-active': themeMode === theme }"
           :key="theme"
         >
           <i :class="['fa', themeModes[theme].iconClass]" />
@@ -41,8 +41,8 @@ export default {
         dark: {
           displayName: "Dark Theme",
           iconClass: "fa-moon-o",
-        }
-      }
+        },
+      },
     };
   },
 
@@ -59,8 +59,8 @@ export default {
     themeMode: {
       handler(n) {
         this.onThemeModeChange(n);
-      }
-    }
+      },
+    },
   },
 
   methods: {
@@ -77,9 +77,7 @@ export default {
 
       let theme = n;
       if (n === "system") {
-        const isDarkMode =
-          window.matchMedia &&
-          window.matchMedia("(prefers-color-scheme: dark)").matches;
+        const isDarkMode = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
         this.addColorSchemeEventListener();
         theme = isDarkMode ? "dark" : "light";
       } else {
@@ -100,21 +98,17 @@ export default {
 
     // add system theme listener event
     addColorSchemeEventListener() {
-      window
-        .matchMedia("(prefers-color-scheme: dark)")
-        .addEventListener("change", this.handleSystemThemeChange);
+      window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", this.handleSystemThemeChange);
     },
 
     // remove system theme listener event
     removeColorSchemeEventListener() {
-      window
-        .matchMedia("(prefers-color-scheme: dark)")
-        .removeEventListener("change", this.handleSystemThemeChange);
+      window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", this.handleSystemThemeChange);
     },
 
     handleSystemThemeChange() {
       this.onThemeModeChange(this.themeMode);
-    }
-  }
+    },
+  },
 };
 </script>

package/vue-components/v2/navbar/User.vue

@@ -8,18 +8,10 @@
       <i class="fa fa-angle-down" aria-hidden="true"></i>
     </button>
     <navbar-item-content class="navbar-dropdown-wrapper">
-      <div
-        v-if="user.username"
-        class="user-profile-wrapper"
-        @mouseleave="onMouseLeave()"
-      >
+      <div v-if="user.username" class="user-profile-wrapper" @mouseleave="onMouseLeave()">
         <div class="profile-area">
           <div class="profile-photo">
-            <img
-              :src="user.avatar_url"
-              alt="User Photo"
-              class="width-50 height-50"
-            />
+            <img :src="user.avatar_url" alt="User Photo" class="width-50 height-50" />
             <button class="camera-icon"></button>
           </div>
           <div class="profile-info" style="width: calc(100% - 60px)">
@@ -35,34 +27,18 @@
         </div>
         <transition-group name="list" tag="ul">
           <li key="settings">
-            <a
-              data-testid="user-settings-link"
-              :href="`${serverDomain}/user/settings/`"
-              >Settings</a
-            >
+            <a data-testid="user-settings-link" :href="`${serverDomain}/user/settings/`">Settings</a>
           </li>
           <li v-if="isLoggedinUserAdmin" key="site-admin">
-            <a data-testid="site-admin-link" :href="`${accountsDomain}/admin`"
-              >Site Administration</a
-            >
+            <a data-testid="site-admin-link" :href="`${accountsDomain}/admin`">Site Administration</a>
           </li>
-          <li
-            v-if="showAccountSwitcher"
-            :class="`is-${dropDownStatus}`"
-            key="switcher"
-          >
+          <li v-if="showAccountSwitcher" :class="`is-${dropDownStatus}`" key="switcher">
             <a
               class="ac-dropdown-button is-fullwidth is-flex is-justify-content-space-between is-align-items-center"
               @click="toggleList()"
             >
               <span>Switch Account</span>
-              <span
-                ><i
-                  :class="`fa fa-angle-${
-                    dropDownStatus === 'open' ? 'up' : 'down'
-                  }`"
-                ></i
-              ></span>
+              <span><i :class="`fa fa-angle-${dropDownStatus === 'open' ? 'up' : 'down'}`"></i></span>
             </a>
             <transition-group
               name="list"
@@ -71,42 +47,21 @@
               ref="dropdownItems"
               :style="{ maxHeight: dropDownSectionHeight }"
             >
-              <li
-                v-for="(org, idx) in formattedOrganizations"
-                :key="org.username"
-              >
-                <a
-                  class="is-flex is-align-items-center"
-                  @click="onOrganizationClick(org.username)"
-                >
+              <li v-for="(org, idx) in formattedOrganizations" :key="org.username">
+                <a class="is-flex is-align-items-center" @click="onOrganizationClick(org.username)">
                   <div class="width-30 height-30 image">
-                    <img
-                      :src="org.avatar_url"
-                      class="ac-user-profile is-rounded"
-                      alt="icon"
-                    />
+                    <img :src="org.avatar_url" class="ac-user-profile is-rounded" alt="icon" />
                   </div>
-                  <div
-                    class="is-flex is-align-items-center is-justify-content-space-between is-fullwidth ml-10"
-                  >
+                  <div class="is-flex is-align-items-center is-justify-content-space-between is-fullwidth ml-10">
                     <div class="org-info">
-                      <strong
-                        :title="org.username"
-                        class="line-break-anywhere is-ellipsis-1"
-                        >{{ org.username }}</strong
-                      >
+                      <strong :title="org.username" class="line-break-anywhere is-ellipsis-1">{{
+                        org.username
+                      }}</strong>
                       <p>
-                        {{
-                          org.isPersonalAccount
-                            ? "Personal Account"
-                            : "Organization"
-                        }}
+                        {{ org.isPersonalAccount ? "Personal Account" : "Organization" }}
                       </p>
                     </div>
-                    <span
-                      v-if="idx === 0"
-                      class="material-icons-outlined font-size-18 ml-10 is-pulled-right"
-                    >
+                    <span v-if="idx === 0" class="material-icons-outlined font-size-18 ml-10 is-pulled-right">
                       check
                     </span>
                   </div>
@@ -115,28 +70,11 @@
             </transition-group>
           </li>
           <li key="dashboard">
-            <nuxt-link
-              v-if="isPlatformDomain"
-              to="/dashboard"
-              data-testid="user-dashboard-link"
-            >
-              Dashboard
-            </nuxt-link>
-            <a
-              v-else
-              :href="`${serverDomain}/dashboard`"
-              data-testid="user-dashboard-link"
-            >
-              Dashboard
-            </a>
+            <nuxt-link v-if="isPlatformDomain" to="/dashboard" data-testid="user-dashboard-link"> Dashboard </nuxt-link>
+            <a v-else :href="`${serverDomain}/dashboard`" data-testid="user-dashboard-link"> Dashboard </a>
           </li>
           <li key="signout">
-            <a
-              :href="`${accountsDomain}/user/logout`"
-              data-testid="signout-link"
-            >
-              Sign out
-            </a>
+            <a :href="`${accountsDomain}/user/logout`" data-testid="signout-link"> Sign out </a>
           </li>
         </transition-group>
       </div>
@@ -232,8 +170,7 @@ export default {
         if (n === "open") {
           this.$nextTick(() => {
             const dropDownUl = this.$refs["dropdownItems"];
-            if (dropDownUl)
-              this.dropDownSectionHeight = `${dropDownUl.scrollHeight}px`;
+            if (dropDownUl) this.dropDownSectionHeight = `${dropDownUl.scrollHeight}px`;
           });
         } else {
           this.dropDownSectionHeight = null;

package/vue-components/v2/notification/Notification.vue

@@ -1,15 +1,8 @@
 <template>
-  <div
-    @mouseenter="notificationPanelOpen = true"
-    @mouseleave="notificationPanelOpen = false"
-  >
+  <div @mouseenter="notificationPanelOpen = true" @mouseleave="notificationPanelOpen = false">
     <button class="button ac-nav-button">
       <span v-if="unreadCount">{{ unreadCount }}</span>
-      <i
-        class="fa fa-bell"
-        :class="{ 'ac-shake': unreadCount }"
-        aria-hidden="true"
-      ></i>
+      <i class="fa fa-bell" :class="{ 'ac-shake': unreadCount }" aria-hidden="true"></i>
     </button>
     <div class="ac-menu-content is-notification">
       <div class="notification-header">
@@ -28,9 +21,7 @@
             :notification="notification"
           />
         </transition-group>
-        <span v-else class="single-notification-item"
-          >No new notifications</span
-        >
+        <span v-else class="single-notification-item">No new notifications</span>
       </div>
     </div>
   </div>

package/vue-components/v2/notification/NotificationItem.vue

@@ -8,9 +8,7 @@
         :class="{
           'is-success': notification.status === 'Success',
           'has-text-danger': notification.status === 'Failed',
-          'is-info':
-            notification.status === 'Started' ||
-            notification.status === 'Running',
+          'is-info': notification.status === 'Started' || notification.status === 'Running',
           'is-warning': notification.status === 'Pending',
         }"
       >

package/vue-components/v2/pagination/Pagination.vue

@@ -1,19 +1,9 @@
 <template>
   <div class="level inner-table-pagination" v-show="showPagination">
     <div class="pagination-filter level-left">
-      <div
-        class="level-item"
-        v-show="
-          !hideRowsPerPageSelection &&
-          totalNoOfItems > preSelectedItemsCountPerPage
-        "
-      >
+      <div class="level-item" v-show="!hideRowsPerPageSelection && totalNoOfItems > preSelectedItemsCountPerPage">
         <label>Rows per page</label>
-        <select
-          v-model="selectedItemCountPerPage"
-          name="page"
-          data-testid="rows-per-page-selector"
-        >
+        <select v-model="selectedItemCountPerPage" name="page" data-testid="rows-per-page-selector">
           <option :value="5">5</option>
           <option :value="10" v-show="totalNoOfItems > 5">10</option>
           <option :value="15" v-show="totalNoOfItems > 10">15</option>
@@ -35,11 +25,7 @@
 
       <ul v-if="totalNoOfItems > selectedItemCountPerPage">
         <li>
-          <a
-            class="previous"
-            @click.prevent="prevPage()"
-            data-testid="pagination-previous-page-button"
-          >
+          <a class="previous" @click.prevent="prevPage()" data-testid="pagination-previous-page-button">
             <i class="fa fa-angle-left" aria-hidden="true"></i>
           </a>
         </li>
@@ -52,11 +38,7 @@
           >
         </li>
         <li>
-          <a
-            class="next"
-            @click.prevent="nextPage()"
-            data-testid="pagination-next-page-button"
-          >
+          <a class="next" @click.prevent="nextPage()" data-testid="pagination-next-page-button">
             <i class="fa fa-angle-right" aria-hidden="true"></i>
           </a>
         </li>
@@ -126,10 +108,7 @@ export default {
     },
     itemsRange() {
       let start = (this.activePageNo - 1) * this.selectedItemCountPerPage;
-      let end = Math.min(
-        this.activePageNo * this.selectedItemCountPerPage,
-        this.totalNoOfItems
-      );
+      let end = Math.min(this.activePageNo * this.selectedItemCountPerPage, this.totalNoOfItems);
 
       return { start, end };
     },

package/vue-components/v2/preloader/Preloader.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="is-flex is-justify-content-center is-align-items-center is-flex-direction-column ac-preloader"
-    style="height: calc(100vh - 200px);"
+    style="height: calc(100vh - 200px)"
   >
     <span v-if="showSpinner" class="spinner"></span>
     <p class="font-size-12 mt-10 pl-5">
@@ -15,12 +15,12 @@ export default {
   props: {
     showSpinner: {
       type: Boolean,
-      default: true
+      default: true,
     },
     message: {
       type: String,
-      default: "Loading ..."
-    }
-  }
+      default: "Loading ...",
+    },
+  },
 };
 </script>

package/vue-components/v2/searchbars/SearchBar.vue

@@ -5,13 +5,7 @@
         <i class="fa fa-search" aria-hidden="true"></i>
       </button>
     </template>
-    <ac-input
-      name="search"
-      placeholder="Search"
-      type="search"
-      class="ac-search"
-      v-model="searchText"
-    />
+    <ac-input name="search" placeholder="Search" type="search" class="ac-search" v-model="searchText" />
   </ac-single-input>
 </template>
 

package/vue-components/v2/sidebar/ClusterSwitcher.vue

@@ -65,7 +65,7 @@ export default {
     value: {
       type: String,
       default: "",
-    }
+    },
   },
 
   components: {
@@ -114,7 +114,7 @@ export default {
       async handler(list) {
         if (list) {
           list.forEach(async (item) => {
-            if(item.name === this.selectedClusterName) {
+            if (item.name === this.selectedClusterName) {
               this.selectedCluster = item;
             }
           });

package/vue-components/v2/sidebar/SidebarItem.vue

@@ -1,11 +1,6 @@
 <template>
   <li ref="sidebarItem">
-    <router-link
-      :id="id"
-      :title="title"
-      :to="url"
-      :class="{ 'is-active': isActive }"
-    >
+    <router-link :id="id" :title="title" :to="url" :class="{ 'is-active': isActive }">
       <span>
         <img :src="icon" alt="icon" />
       </span>
@@ -45,10 +40,7 @@ export default {
         if (n) {
           this.$nextTick(() => {
             setTimeout(() => {
-              const top =
-                (this.$refs.sidebarItem &&
-                  this.$refs.sidebarItem.getBoundingClientRect().top) ||
-                0;
+              const top = (this.$refs.sidebarItem && this.$refs.sidebarItem.getBoundingClientRect().top) || 0;
               // preventing scroll to options that are already visible
               if (top > window.innerHeight - 200) {
                 // scroll to selected option item

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

@@ -86,8 +86,7 @@ export default {
 
           this.$nextTick(() => {
             const dropDownUl = this.$refs["sectionItems"];
-            if (dropDownUl)
-              this.dropDownSectionHeight = `${dropDownUl.scrollHeight}px`;
+            if (dropDownUl) this.dropDownSectionHeight = `${dropDownUl.scrollHeight}px`;
           });
         } else {
           // emit event to close other drop down items

package/vue-components/v2/table/FakeTableCell.vue

@@ -21,8 +21,7 @@ export default {
   },
 
   components: {
-    TableCell: () =>
-      import("@appscode/design-system/vue-components/v2/table/TableCell.vue"),
+    TableCell: () => import("@appscode/design-system/vue-components/v2/table/TableCell.vue"),
   },
 
   computed: {

package/vue-components/v2/table/InfoTable.vue

@@ -1,9 +1,6 @@
 <template>
   <table-container>
-    <table
-      class="table ac-info-table is-fullwidth"
-      :class="{ 'pl-0 pr-0': removeContentPadding }"
-    >
+    <table class="table ac-info-table is-fullwidth" :class="{ 'pl-0 pr-0': removeContentPadding }">
       <tbody v-if="isFullTableLoaderActive">
         <!-- table loader -->
         <table-row v-for="i in loaderCols" :key="i">
@@ -20,15 +17,12 @@
         v-else
         :class="{
           'no-data-available has-text-centered p-10': isTableEmpty,
-          'pl-0 pr-0': removeContentPadding
+          'pl-0 pr-0': removeContentPadding,
         }"
       >
         <template v-if="!isTableEmpty">
           <!-- table rows -->
-          <table-row
-            v-for="(tableHeader, idx) in tableHeaders"
-            :key="tableHeader"
-          >
+          <table-row v-for="(tableHeader, idx) in tableHeaders" :key="tableHeader">
             <table-cell>
               <!-- for table cell icons -->
               <slot :name="`table-cell-icon-${idx}`" />
@@ -66,7 +60,7 @@ export default {
     },
     tableHeaders: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     removeContentPadding: {
       type: Boolean,

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

@@ -4,11 +4,7 @@
       ref="ac-table"
       class="table ac-table ac-striped"
       :class="{
-        'is-fullwidth':
-          !isDynamicWidthTable ||
-          isFullTableLoaderActive ||
-          isTableEmpty ||
-          isLoaderActive,
+        'is-fullwidth': !isDynamicWidthTable || isFullTableLoaderActive || isTableEmpty || isLoaderActive,
       }"
     >
       <thead>
@@ -23,52 +19,25 @@
             :key="idx"
             :class="{
               sorting: headerSortables[idx] && headerSortables[idx].enabled,
-              'sorting-desc':
-                headerSortables[idx] && headerSortables[idx].mode === 'desc',
-              'sorting-asc':
-                headerSortables[idx] && 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',
+              'sorting-desc': headerSortables[idx] && headerSortables[idx].mode === 'desc',
+              'sorting-asc': headerSortables[idx] && 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] &&
-                headerSortables[idx].enabled &&
-                emitSortEvent(idx)
-            "
+            @click.prevent="headerSortables[idx] && headerSortables[idx].enabled && emitSortEvent(idx)"
           >
             {{ headerLabels[idx] }}
             <span
-              v-if="
-                tableHeader.dashboard &&
-                tableHeader.dashboard.status &&
-                tableHeader.dashboard.status !== 'Success'
-              "
+              v-if="tableHeader.dashboard && tableHeader.dashboard.status && tableHeader.dashboard.status !== 'Success'"
               class="icon has-text-danger"
               :title="tableHeader.dashboard && tableHeader.dashboard.message"
             >
               <i class="fa fa-exclamation-triangle" />
             </span>
           </th>
-          <th
-            ref="action-section"
-            v-if="actionable"
-            style="min-width: 100px"
-          ></th>
-          <fake-table-cell
-            v-if="fakeCellWidth > 0"
-            :is-header-cell="true"
-            :fake-cell-width="fakeCellWidth"
-          />
+          <th ref="action-section" v-if="actionable" style="min-width: 100px"></th>
+          <fake-table-cell v-if="fakeCellWidth > 0" :is-header-cell="true" :fake-cell-width="fakeCellWidth" />
         </table-row>
       </thead>
       <!-- table row loaders -->
@@ -79,14 +48,8 @@
           </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 v-for="(tableHeader, idx) in tableHeaders" :key="headerLabels[idx]">
+            <cell-value :is-loader-active="true" :cell-title="headerLabels[idx]" />
           </table-cell>
         </table-row>
       </tbody>
@@ -99,9 +62,7 @@
         <tbody v-else>
           <table-row class="is-hoverless">
             <table-cell
-              :colspan="
-                actionable ? tableHeaders.length + 1 : tableHeaders.length
-              "
+              :colspan="actionable ? tableHeaders.length + 1 : tableHeaders.length"
               class="no-data-available has-text-centered"
             >
               <empty-table-info />
@@ -179,9 +140,7 @@ export default {
       return !this.tableHeaders.length;
     },
     headerLabels() {
-      return this.tableHeaders.map((th) =>
-        typeof th === "string" ? th : th.name || "Label"
-      );
+      return this.tableHeaders.map((th) => (typeof th === "string" ? th : th.name || "Label"));
     },
   },
 
@@ -191,15 +150,8 @@ export default {
       handler(n) {
         if (this.headerSortables.length === n.length) {
           n.forEach((th, idx) => {
-            if (
-              this.headerSortables[idx].enabled !==
-              !!(th && th.sort && th.sort.enable)
-            ) {
-              this.headerSortables[idx].enabled = !!(
-                th &&
-                th.sort &&
-                th.sort.enable
-              );
+            if (this.headerSortables[idx].enabled !== !!(th && th.sort && th.sort.enable)) {
+              this.headerSortables[idx].enabled = !!(th && th.sort && th.sort.enable);
               this.headerSortables[idx].mode = "";
             }
           });

package/vue-components/v2/table/TableRow.vue

@@ -1,17 +1,8 @@
 <template>
-  <router-link
-    v-if="link"
-    :event="link !== '' ? 'click' : ''"
-    :to="link"
-    custom
-    v-slot="{ navigate }"
-  >
+  <router-link v-if="link" :event="link !== '' ? 'click' : ''" :to="link" custom v-slot="{ navigate }">
     <tr class="is-link" @click="navigate" data-testid="ac-table-row">
       <slot />
-      <fake-table-cell
-        v-if="fakeCellWidth > 0"
-        :fake-cell-width="fakeCellWidth"
-      />
+      <fake-table-cell v-if="fakeCellWidth > 0" :fake-cell-width="fakeCellWidth" />
     </tr>
   </router-link>
 
@@ -26,10 +17,7 @@
     @click.prevent="$emit('rowselect', true)"
   >
     <slot />
-    <fake-table-cell
-      v-if="fakeCellWidth > 0"
-      :fake-cell-width="fakeCellWidth"
-    />
+    <fake-table-cell v-if="fakeCellWidth > 0" :fake-cell-width="fakeCellWidth" />
   </tr>
 </template>