@appscode/design-system 2.0.59 → 2.0.61

package/vue-components/v3/modals/JsonShowModal.vue

@@ -18,19 +18,14 @@ const emit = defineEmits(["closemodal"]);
 
 const Modal = defineAsyncComponent(() => import("./../modal/Modal.vue"));
 const AcButton = defineAsyncComponent(() => import("./../button/Button.vue"));
-const HeaderItem = defineAsyncComponent(
-  () => import("./../header/HeaderItem.vue")
-);
+const HeaderItem = defineAsyncComponent(() => import("./../header/HeaderItem.vue"));
 
-const Preloader = defineAsyncComponent(
-  () => import("./../preloader/Preloader.vue")
-);
+const Preloader = defineAsyncComponent(() => import("./../preloader/Preloader.vue"));
 
 const Banner = defineAsyncComponent(() => import("./../banner/Banner.vue"));
 
 const Editor = defineAsyncComponent({
-  loader: () =>
-    import("./../editor/Editor.vue").then((module) => module.default),
+  loader: () => import("./../editor/Editor.vue").then((module) => module.default),
   loadingComponent: Preloader,
   delay: 200,
   errorComponent: Banner,
@@ -61,20 +56,13 @@ const closeModal = () => {
 </script>
 
 <template>
-  <modal
-    :title="editorTitle"
-    :open="open"
-    @closemodal="closeModal"
-    modifier-classes="is-medium"
-  >
+  <modal :title="editorTitle" :open="open" @closemodal="closeModal" modifier-classes="is-medium">
     <template #modal-header-controls>
       <header-item>
         <ac-button
           modifier-classes="is-square is-primary"
           icon-class="copy"
-          v-clipboard:copy="
-            `${editorTitle}: ${JSON.stringify(parsedContent, null, 4)}`
-          "
+          v-clipboard:copy="`${editorTitle}: ${JSON.stringify(parsedContent, null, 4)}`"
           v-clipboard:success="onCopy"
           v-clipboard:error="onError"
         />

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

@@ -16,21 +16,13 @@ withDefaults(defineProps<Props>(), {
 });
 
 const NavbarItem = defineAsyncComponent(() => import("./NavbarItem.vue"));
-const NavbarItemContent = defineAsyncComponent(
-  () => import("./NavbarItemContent.vue")
-);
+const NavbarItemContent = defineAsyncComponent(() => import("./NavbarItemContent.vue"));
 </script>
 
 <template>
   <navbar-item>
     <template #navbar-item>
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
+      <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/v3/navbar/Navbar.vue

@@ -15,20 +15,12 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <div
-    class="ac-navbar-area"
-    id="header"
-    :class="[modifierClasses, { 'is-full': fullWidth }]"
-  >
+  <div class="ac-navbar-area" id="header" :class="[modifierClasses, { 'is-full': fullWidth }]">
     <div class="ac-navbar-inner" :class="{ container: container }">
       <!-- navbar start  -->
       <nav class="ac-navbar">
         <!-- navbar logo start  -->
-        <div
-          class="ac-navbar-brand is-flex"
-          v-if="fullWidth"
-          :class="{ 'pl-0': container }"
-        >
+        <div class="ac-navbar-brand is-flex" v-if="fullWidth" :class="{ 'pl-0': container }">
           <slot name="navbar-brand-logo" />
           <span v-if="productName" class="brand-tag">{{ productName }}</span>
         </div>

package/vue-components/v3/navbar/NavbarItem.vue

@@ -25,11 +25,7 @@ onClickOutside(navbarItem, () => (isActive.value = ""));
 </script>
 
 <template>
-  <div
-    ref="navbarItem"
-    class="ac-menu-item"
-    :class="modifierClasses + isActive"
-  >
+  <div ref="navbarItem" class="ac-menu-item" :class="modifierClasses + isActive">
     <button class="button ac-nav-button" @click="clickEvent()">
       <slot name="navbar-item" />
     </button>

package/vue-components/v3/navbar/Notification.vue

@@ -3,9 +3,7 @@ import { defineAsyncComponent } from "vue";
 import TimeConvert from "../../plugins/time-convert";
 import type { Notification } from "../../types/notification";
 const NavbarItem = defineAsyncComponent(() => import("./NavbarItem.vue"));
-const NavbarItemContent = defineAsyncComponent(
-  () => import("./NavbarItemContent.vue")
-);
+const NavbarItemContent = defineAsyncComponent(() => import("./NavbarItemContent.vue"));
 withDefaults(
   defineProps<{
     notifications?: Array<Notification>;
@@ -24,13 +22,7 @@ function notificationTime(time: number) {
 <template>
   <navbar-item ref="notificationItem" @is-active="$emit('isActive', $event)">
     <template #navbar-item>
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <g clip-path="url(#clip0_534_14009)">
           <path
             d="M9.15331 14C9.03611 14.2021 8.86787 14.3698 8.66546 14.4864C8.46305 14.603 8.23357 14.6643 7.99998 14.6643C7.76639 14.6643 7.53691 14.603 7.3345 14.4864C7.13208 14.3698 6.96385 14.2021 6.84665 14M14.6666 11.3334H1.33331C1.86375 11.3334 2.37245 11.1227 2.74753 10.7476C3.1226 10.3725 3.33331 9.86381 3.33331 9.33337V6.00004C3.33331 4.76236 3.82498 3.57538 4.70015 2.70021C5.57532 1.82504 6.7623 1.33337 7.99998 1.33337C9.23766 1.33337 10.4246 1.82504 11.2998 2.70021C12.175 3.57538 12.6666 4.76236 12.6666 6.00004V9.33337C12.6666 9.86381 12.8774 10.3725 13.2524 10.7476C13.6275 11.1227 14.1362 11.3334 14.6666 11.3334Z"
@@ -47,19 +39,12 @@ function notificationTime(time: number) {
         </defs>
       </svg>
 
-      <span v-if="unreadNotification > 999" class="notification-count"
-        >999+</span
-      >
-      <span v-else-if="unreadNotification !== 0" class="notification-count">{{
-        unreadNotification
-      }}</span>
+      <span v-if="unreadNotification > 999" class="notification-count">999+</span>
+      <span v-else-if="unreadNotification !== 0" class="notification-count">{{ unreadNotification }}</span>
     </template>
 
     <template #navbar-content>
-      <navbar-item-content
-        class="navbar-dropdown-wrapper"
-        style="width: 320px; right: -30px"
-      >
+      <navbar-item-content class="navbar-dropdown-wrapper" style="width: 320px; right: -30px">
         <div class="dropdown-inner">
           <div class="notification-header">
             <h5>Notification</h5>
@@ -67,12 +52,7 @@ function notificationTime(time: number) {
           </div>
 
           <div class="notification-body ac-scrollbar p-0">
-            <a
-              v-for="data in notifications"
-              href="#"
-              class="single-notification"
-              :key="data.id"
-            >
+            <a v-for="data in notifications" href="#" class="single-notification" :key="data.id">
               <!-- <span class="round-icon">Z</span> -->
               <div class="notification-content">
                 <h6>{{ data.msg }}</h6>
@@ -81,11 +61,7 @@ function notificationTime(time: number) {
               <span>{{ notificationTime(data.time) }}</span>
             </a>
 
-            <a
-              v-if="!notifications.length"
-              href="#"
-              class="single-notification"
-            >
+            <a v-if="!notifications.length" href="#" class="single-notification">
               <!-- <span class="round-icon">Y</span> -->
               <div class="notification-content">
                 <h6>No New Notification</h6>

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

@@ -43,9 +43,7 @@ const onThemeModeChange = (n: string) => {
 
   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;
     addColorSchemeEventListener();
     theme = isDarkMode ? "dark" : "light";
   } else {
@@ -64,9 +62,7 @@ const handleDarkThemeClass = (currentTheme: string) => {
 };
 
 const addColorSchemeEventListener = () => {
-  window
-    .matchMedia("(prefers-color-scheme: dark)")
-    .addEventListener("change", handleSystemThemeChange);
+  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", handleSystemThemeChange);
 };
 
 const handleSystemThemeChange = () => {
@@ -74,9 +70,7 @@ const handleSystemThemeChange = () => {
 };
 
 const removeColorSchemeEventListener = () => {
-  window
-    .matchMedia("(prefers-color-scheme: dark)")
-    .removeEventListener("change", handleSystemThemeChange);
+  window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", handleSystemThemeChange);
 };
 
 watch(themeMode, (n) => {
@@ -91,16 +85,10 @@ watch(themeMode, (n) => {
       :title="themeModes[theme as keyof ThemeModes].displayName"
       @click="themeMode = theme"
       class="is-flex-grow-1 has-text-centered"
-      :class="[
-        themeMode === theme ? 'is-active' : '',
-        theme === 'dark' ? 'b-l-1 b-r-1' : '',
-      ]"
+      :class="[themeMode === theme ? 'is-active' : '', theme === 'dark' ? 'b-l-1 b-r-1' : '']"
       :key="theme"
     >
-      <span
-        class="icon"
-        v-html="themeModes[theme as keyof ThemeModes].iconClass"
-      ></span>
+      <span class="icon" v-html="themeModes[theme as keyof ThemeModes].iconClass"></span>
     </li>
   </div>
 </template>

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

@@ -36,12 +36,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(["set:theme", "on-logout", "activeorg$set"]);
 
-const NavbarItem = defineAsyncComponent(
-  () => import("../navbar/NavbarItem.vue")
-);
-const NavbarItemContent = defineAsyncComponent(
-  () => import("../navbar/NavbarItemContent.vue")
-);
+const NavbarItem = defineAsyncComponent(() => import("../navbar/NavbarItem.vue"));
+const NavbarItemContent = defineAsyncComponent(() => import("../navbar/NavbarItemContent.vue"));
 
 const ThemeMode = defineAsyncComponent(() => import("../navbar/ThemeMode.vue"));
 
@@ -92,8 +88,7 @@ watch(dropDownStatus, (n) => {
   if (n === "open") {
     nextTick(() => {
       const dropDownUl = dropdownItems.value;
-      if (dropDownUl)
-        dropDownSectionHeight.value = `${dropDownUl.$el.scrollHeight}px`;
+      if (dropDownUl) dropDownSectionHeight.value = `${dropDownUl.$el.scrollHeight}px`;
     });
   } else {
     dropDownSectionHeight.value = null;
@@ -117,8 +112,12 @@ watch(dropDownStatus, (n) => {
     <template #navbar-content>
       <navbar-item-content class="navbar-dropdown-wrapper">
         <div v-if="user.username" class="user-profile-wrapper">
-          <a :href="`${serverDomain}/${user.username}`" :title="user.username.toUpperCase()"
-            data-testid="user-profile-link" class="line-break-anywhere is-ellipsis-1 has-text-weight-medium">
+          <a
+            :href="`${serverDomain}/${user.username}`"
+            :title="user.username.toUpperCase()"
+            data-testid="user-profile-link"
+            class="line-break-anywhere is-ellipsis-1 has-text-weight-medium"
+          >
             <div class="profile-area">
               <div class="profile-photo">
                 <img :src="user.avatar_url" alt="User Photo" class="width-32 height-32" />
@@ -127,27 +126,25 @@ watch(dropDownStatus, (n) => {
               <div class="profile-info" style="width: calc(100% - 60px)">
                 <strong> {{ user.username }} </strong>
                 <p>
-                  {{
-                    user.isPersonalAccount || user.is_admin
-                    ? "Personal Account"
-                    : "Organization"
-                  }}
+                  {{ user.isPersonalAccount || user.is_admin ? "Personal Account" : "Organization" }}
                 </p>
               </div>
             </div>
           </a>
           <transition-group name="list" tag="ul" class="list-items ac-scrollbar py-2">
             <li key="settings" v-if="serverDomain !== locationOrigin || isDocsUi">
-              <a v-if="user.isPersonalAccount" data-testid="user-settings-link" :href="`${serverDomain}/user/settings/`">
+              <a
+                v-if="user.isPersonalAccount"
+                data-testid="user-settings-link"
+                :href="`${serverDomain}/user/settings/`"
+              >
                 <span class="icon">
                   <HeroiconsCog6Tooth />
                 </span>
                 <span>Settings</span>
               </a>
               <a v-else data-testid="user-settings-link" :href="`${serverDomain}/${user.username}/settings`">
-                <span class="icon">
-                  <HeroiconsCog6Tooth />
-                </span><span>Settings</span>
+                <span class="icon"> <HeroiconsCog6Tooth /> </span><span>Settings</span>
               </a>
             </li>
             <li key="settings-platform" v-else>
@@ -158,63 +155,63 @@ watch(dropDownStatus, (n) => {
                 <span>Settings</span>
               </NuxtLink>
               <NuxtLink v-else data-testid="user-settings-link" :to="`/${user.username}/settings`">
-                <span class="icon">
-                  <HeroiconsCog6Tooth />
-                </span><span>Settings</span>
+                <span class="icon"> <HeroiconsCog6Tooth /> </span><span>Settings</span>
               </NuxtLink>
             </li>
 
             <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()">
+              <a
+                class="ac-dropdown-button is-fullwidth is-flex is-justify-content-space-between is-align-items-center"
+                @click="toggleList()"
+              >
                 <div class="is-flex gap-8">
-                  <span class="icon">
-                    <HeroiconsUserGroup />
-                  </span><span>Switch Account</span>
+                  <span class="icon"> <HeroiconsUserGroup /> </span><span>Switch Account</span>
                 </div>
-                <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" tag="ul" class="ac-vscrollbar" 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)">
-                <div class="width-30 height-30 image">
-                  <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="org-info">
-                    <strong :title="org.username" class="line-break-anywhere is-ellipsis-1">{{ org.username }}</strong>
-                    <p>
-                      {{
-                        org.isPersonalAccount
-                        ? "Personal Account"
-                        : "Organization"
-                      }}
-                    </p>
-                  </div>
-                  <span v-if="idx === 0" class="material-icons font-size-18 ml-10 is-pulled-right">
-                    <HeroiconsCheck />
-                  </span>
-                </div>
+              <transition-group
+                name="list"
+                tag="ul"
+                class="ac-vscrollbar"
+                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)">
+                    <div class="width-30 height-30 image">
+                      <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="org-info">
+                        <strong :title="org.username" class="line-break-anywhere is-ellipsis-1">{{
+                          org.username
+                        }}</strong>
+                        <p>
+                          {{ org.isPersonalAccount ? "Personal Account" : "Organization" }}
+                        </p>
+                      </div>
+                      <span v-if="idx === 0" class="material-icons font-size-18 ml-10 is-pulled-right">
+                        <HeroiconsCheck />
+                      </span>
+                    </div>
+                  </a>
+                </li>
+              </transition-group>
+            </li>
+            <li v-if="isLoggedinUserAdmin || user.is_admin" key="site-admin">
+              <a data-testid="site-admin-link" :href="`${accountsDomain}/admin`"
+                ><span class="icon"> <HeroiconsWrenchScrewdriver /> </span><span>Site Administration</span></a
+              >
+            </li>
+            <li key="signout" @click="$emit('on-logout')">
+              <a data-testid="user-logout-link" :href="`${accountsDomain}/user/logout`">
+                <span class="icon">
+                  <HeroiconsPower />
+                </span>
+                <span>Sign out</span>
               </a>
             </li>
-          </transition-group>
-          </li>
-          <li v-if="isLoggedinUserAdmin || user.is_admin" key="site-admin">
-            <a data-testid="site-admin-link" :href="`${accountsDomain}/admin`"><span class="icon">
-                <HeroiconsWrenchScrewdriver />
-              </span><span>Site Administration</span></a>
-          </li>
-          <li key="signout" @click="$emit('on-logout')">
-            <a data-testid="user-logout-link" :href="`${accountsDomain}/user/logout`">
-              <span class="icon">
-                <HeroiconsPower />
-              </span>
-              <span>Sign out</span>
-            </a>
-          </li>
-          <!-- <li key="theme" v-if="showThemeMode">
+            <!-- <li key="theme" v-if="showThemeMode">
               <theme-mode @set:theme="setTheme" />
             </li> -->
           </transition-group>

package/vue-components/v3/notification/AlertBox.vue

@@ -45,13 +45,9 @@ const getSanitizedHtml = (content: string) => {
 <template>
   <!-- alert-message area start  -->
   <!-- plsease, use this class name ('.is-info' 'is-success', 'is-danger', 'is-warning') -->
-  <div
-    class="ac-notification is-${notificationType} mb-15"
-    :class="backgroundColor"
-  >
+  <div class="ac-notification is-${notificationType} mb-15" :class="backgroundColor">
     <p>
-      <i v-if="!hideIcon" :class="`fa ${iconClass} mr-5`"></i
-      ><span v-html="getSanitizedHtml(content)"></span>
+      <i v-if="!hideIcon" :class="`fa ${iconClass} mr-5`"></i><span v-html="getSanitizedHtml(content)"></span>
       <ac-button
         v-if="actionButton?.show"
         :title="actionButton?.title"
@@ -97,12 +93,7 @@ const getSanitizedHtml = (content: string) => {
       color: $ac-primary;
 
       &:hover {
-        color: hsla(
-          var(--hsl-hue),
-          var(--hsl-saturation),
-          calc(var(--hsl-lightness) - 10%),
-          1
-        );
+        color: hsla(var(--hsl-hue), var(--hsl-saturation), calc(var(--hsl-lightness) - 10%), 1);
       }
     }
   }
@@ -144,12 +135,7 @@ const getSanitizedHtml = (content: string) => {
   }
 }
 @mixin acPrimaryNotification() {
-  background-color: hsla(
-    var(--hsl-hue),
-    var(--hsl-saturation),
-    var(--hsl-lightness),
-    0.2
-  );
+  background-color: hsla(var(--hsl-hue), var(--hsl-saturation), var(--hsl-lightness), 0.2);
   color: $white-100;
   border-color: $ac-primary;
 
@@ -226,7 +212,7 @@ AC Toast
     padding: 0 15px;
 
     &:hover {
-      color: $black-70;
+      color: $gray-70;
     }
   }
 
@@ -282,7 +268,7 @@ AC Toast
 // dark theme start
 // .is-dark-theme {
 //   .ac-notification.is-danger {
-//     background-color: $black-80;
+//     background-color: $gray-80;
 //   }
 // }
 </style>

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

@@ -1,26 +1,16 @@
 <script setup lang="ts">
 import { StringCodec } from "nats.ws";
 import type { NatsConnection, Subscription } from "nats.ws";
-import {
-  computed,
-  defineAsyncComponent,
-  getCurrentInstance,
-  ref,
-  watch,
-} from "vue";
+import { computed, defineAsyncComponent, getCurrentInstance, ref, watch } from "vue";
 import type { Ref } from "vue";
 // import type { TaskLog } from "../../types/longRunningTasks";
 import type { Notification } from "../../types/notification";
 
-const NotificationItem = defineAsyncComponent(
-  () => import("./NotificationItem.vue")
-);
+const NotificationItem = defineAsyncComponent(() => import("./NotificationItem.vue"));
 
 const notifications: Ref<Notification[]> = ref([]);
 const notificationsRead = ref(0);
-const unreadCount = computed(
-  () => notifications.value.length - notificationsRead.value
-);
+const unreadCount = computed(() => notifications.value.length - notificationsRead.value);
 
 const notificationPanelOpen = ref(false);
 watch(notificationPanelOpen, (n) => {
@@ -66,17 +56,10 @@ subscribeToNotifcations();
 </script>
 
 <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">
@@ -95,9 +78,7 @@ subscribeToNotifcations();
             :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/v3/notification/NotificationItem.vue

@@ -16,9 +16,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const getDayDifferences = (options: { past: number }) => {
-  const past = moment(options.past).isValid()
-    ? moment(options.past).valueOf() / 1000
-    : options.past;
+  const past = moment(options.past).isValid() ? moment(options.past).valueOf() / 1000 : options.past;
   const now = Date.now() / 1000;
   const diff = now - past;
   if (options.past > 10) {
@@ -44,9 +42,7 @@ const getDayDifferences = (options: { past: number }) => {
 };
 
 const { notification } = toRefs(props);
-const notificationTime = computed(() =>
-  getDayDifferences({ past: notification?.value?.time || 0 })
-);
+const notificationTime = computed(() => getDayDifferences({ past: notification?.value?.time || 0 }));
 </script>
 
 <template>
@@ -59,9 +55,7 @@ const notificationTime = computed(() =>
         :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/v3/pagination/Pagination.vue

@@ -66,10 +66,7 @@ const pages = computed(() => {
 
 const itemsRange = computed(() => {
   let start = (activePageNo.value - 1) * selectedItemCountPerPage.value;
-  let end = Math.min(
-    activePageNo.value * selectedItemCountPerPage.value,
-    props.totalNoOfItems
-  );
+  let end = Math.min(activePageNo.value * selectedItemCountPerPage.value, props.totalNoOfItems);
 
   return { start, end };
 });
@@ -105,16 +102,9 @@ watch(
 <template>
   <div class="level inner-table-pagination" v-show="showPagination">
     <div class="pagination-filter level-left">
-      <div
-        class="level-item"
-        v-show="!hideRowsPerPageSelection && totalNoOfItems > itemsPerPage"
-      >
+      <div class="level-item" v-show="!hideRowsPerPageSelection && totalNoOfItems > itemsPerPage">
         <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>
@@ -136,11 +126,7 @@ watch(
 
       <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>
@@ -153,11 +139,7 @@ watch(
           >
         </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>
@@ -269,7 +251,7 @@ watch(
 //   }
 
 //   label {
-//     color: $black-40;
+//     color: $gray-40;
 //     padding-right: 5px;
 //     display: inline-block;
 //     font-size: 13px;
@@ -279,7 +261,7 @@ watch(
 // .is-dark-theme {
 //   .pagination-filter {
 //     label {
-//       $black-40: $primary-20;
+//       $gray-40: $primary-20;
 //     }
 //   }
 // }