@appscode/design-system 1.0.3-alpha.7 → 1.0.43-alpha.100

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

@@ -1,10 +1,13 @@
 <template>
-  <div class="app-drawer-wrapper">
-    <div class="drawer-icon">
+  <div class="app-drawer-wrapper is-flex">
+    <div
+      class="drawer-icon  is-flex is-justify-content-center is-align-items-center"
+    >
       <svg
         class="gb_We"
         focusable="false"
         viewBox="0 0 24 24"
+        style="width: 22px;margin-top: 2px;"
         :style="{ fill: 'white' }"
       >
         <path
@@ -44,11 +47,11 @@ export default {
   props: {
     apps: {
       type: Array,
-      default: () => [],
-    },
+      default: () => []
+    }
   },
   components: {
-    NavbarItemContent: () => import("./NavbarItemContent.vue"),
-  },
+    NavbarItemContent: () => import("./NavbarItemContent.vue")
+  }
 };
 </script>

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

@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <button
+      v-if="themeMode"
+      class="button ac-nav-button"
+      style="color: #ffffff; font-size: 15px;"
+      @click="toggleTheme"
+      :title="themeModes[themeMode].displayName"
+    >
+      <i :class="`fa ${themeModes[themeMode].iconClass}`" />
+    </button>
+    <div class="ac-menu-content theme-choice">
+      <ul class="is-flex is-flex-direction-row is-justify-content-space-around">
+        <li 
+          v-for="theme of Object.keys(themeModes)"
+          :title="themeModes[theme].displayName"
+          @click="themeMode = theme"
+          :class="{'is-active': themeMode === theme}"
+          :key="theme"
+        >
+          <i :class="['fa', themeModes[theme].iconClass]" />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      themeMode: "",
+      themeModes: {
+        system: {
+          displayName: "System Theme",
+          iconClass: "fa-desktop",
+        },
+        light: {
+          displayName: "Light Theme",
+          iconClass: "fa-sun-o",
+        },
+        dark: {
+          displayName: "Dark Theme",
+          iconClass: "fa-moon-o",
+        }
+      }
+    };
+  },
+
+  mounted() {
+    // get theme mode from localStorage or set default one
+    this.themeMode = localStorage.getItem("themeMode") || "light";
+  },
+
+  destroyed() {
+    this.removeColorSchemeEventListener();
+  },
+
+  watch: {
+    themeMode: {
+      handler(n) {
+        this.onThemeModeChange(n);
+      }
+    }
+  },
+
+  methods: {
+    // handle theme mode button click
+    toggleTheme() {
+      if (this.themeMode === "light") this.themeMode = "dark";
+      else if (this.themeMode === "dark") this.themeMode = "system";
+      else if (this.themeMode === "system") this.themeMode = "light";
+    },
+
+    // triggered when theme mode is updated
+    onThemeModeChange(n) {
+      localStorage.setItem("themeMode", n);
+
+      let theme = n;
+      if (n === "system") {
+        const isDarkMode =
+          window.matchMedia &&
+          window.matchMedia("(prefers-color-scheme: dark)").matches;
+        this.addColorSchemeEventListener();
+        theme = isDarkMode ? "dark" : "light";
+      } else {
+        this.removeColorSchemeEventListener();
+      }
+      this.$emit("set:theme", theme);
+      this.handleDarkThemeClass(theme);
+    },
+
+    // add proper css class to update the ui theme
+    handleDarkThemeClass(currentTheme) {
+      if (currentTheme === "light") {
+        document.documentElement.classList.remove("is-dark-theme");
+      } else {
+        document.documentElement.classList.add("is-dark-theme");
+      }
+    },
+
+    // add system theme listener event
+    addColorSchemeEventListener() {
+      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);
+    },
+
+    handleSystemThemeChange() {
+      this.onThemeModeChange(this.themeMode);
+    }
+  }
+};
+</script>

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

@@ -3,7 +3,10 @@
     <div class="pagination-filter level-left">
       <div
         class="level-item"
-        v-show="totalNoOfItems > preSelectedItemsCountPerPage"
+        v-show="
+          !hideRowsPerPageSelection &&
+          totalNoOfItems > preSelectedItemsCountPerPage
+        "
       >
         <label>Rows per page</label>
         <select v-model="selectedItemCountPerPage" name="page">
@@ -52,6 +55,10 @@
 <script>
 export default {
   props: {
+    hideRowsPerPageSelection: {
+      type: Boolean,
+      default: false,
+    },
     totalNoOfItems: {
       type: Number,
       default: 0,

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="is-flex is-justify-content-center is-align-items-center is-flex-direction-column"
+    class="is-flex is-justify-content-center is-align-items-center is-flex-direction-column ac-preloader"
     style="height: calc(100vh - 200px);"
   >
     <span v-if="showSpinner" class="spinner"></span>
@@ -15,12 +15,12 @@ export default {
   props: {
     showSpinner: {
       type: Boolean,
-      default: true,
+      default: true
     },
     message: {
       type: String,
-      default: "Fetching! Please wait for sometime...",
-    },
-  },
+      default: "Fetching! Please wait for sometime..."
+    }
+  }
 };
 </script>

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

@@ -0,0 +1,126 @@
+<template>
+  <div class="is-cluster-logo" v-if="sidebarCollapsed">
+    <img
+      width="40"
+      :src="getProviderIcon(selectedCluster && selectedCluster.provider)"
+      onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
+      alt="provider-icon"
+    />
+  </div>
+  <multiselect
+    v-else
+    v-model="selectedCluster"
+    placeholder="Selected Cluster"
+    label="name"
+    track-by="name"
+    :options="clusterOptions"
+    :allow-empty="false"
+    deselectLabel=""
+    selectLabel=""
+    selectedLabel=""
+  >
+    <template slot="singleLabel" slot-scope="props">
+      <div class="is-flex is-align-items-center">
+        <img
+          :src="getProviderIcon(props.option.provider)"
+          onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
+          alt="No cluster selected"
+        /><span
+          ><span>{{ props.option.displayName }}</span></span
+        >
+      </div>
+    </template>
+    <template slot="option" slot-scope="props">
+      <div class="is-flex is-align-items-center">
+        <img
+          class="mr-15"
+          :src="getProviderIcon(props.option.provider)"
+          onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
+          alt="No cluster selected"
+        />
+        <div>
+          <p>{{ props.option.displayName }}</p>
+          <p class="location">{{ props.option.location }}</p>
+        </div>
+      </div>
+    </template>
+  </multiselect>
+</template>
+
+<script>
+export default {
+  props: {
+    sidebarCollapsed: {
+      type: Boolean,
+      default: false,
+    },
+    mouseHover: {
+      type: Boolean,
+      default: false,
+    },
+    clusterOptions: {
+      type: Array,
+      default: [],
+    },
+    value: {
+      type: String,
+      default: "",
+    }
+  },
+
+  components: {
+    Multiselect: () => import("vue-multiselect"),
+  },
+
+  data() {
+    return {
+      selectedCluster: null,
+      selectedClusterName: "",
+    };
+  },
+
+  methods: {
+    getProviderIcon(provider) {
+      return `https://cdn.appscode.com/images/cloud-provider-icons/${provider}.png`;
+    },
+  },
+
+  watch: {
+    value: {
+      immediate: true,
+      handler(n) {
+        this.selectedClusterName = n;
+      },
+    },
+    selectedCluster: {
+      deep: true,
+      handler(n) {
+        this.selectedClusterName = n.name;
+      },
+    },
+    selectedClusterName(n) {
+      if (this.selectedCluster && n !== this.selectedCluster.name) {
+        this.clusterOptions.forEach((item) => {
+          if (this.selectedClusterName === item.name) {
+            this.selectedCluster = item;
+          }
+        });
+      }
+      this.$emit("input", n);
+    },
+    clusterOptions: {
+      deep: true,
+      immediate: true,
+      async handler(list) {
+        if (list) {
+          list.forEach(async (item) => {
+            if(item.name === this.selectedClusterName) {
+              this.selectedCluster = item;
+            }
+          });
+        }
+      },
+    },
+  },
+};
+</script>

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

@@ -1,5 +1,5 @@
 <template>
-  <li>
+  <li ref="sidebarItem">
     <router-link
       :id="id"
       :title="title"
@@ -34,9 +34,31 @@ export default {
       default: false,
     },
     icon: {
-      type: String,
+      type: null,
       default: "@/assets/images/icons/basic.svg",
     },
   },
+  watch: {
+    isActive: {
+      immediate: true,
+      handler(n) {
+        if (n) {
+          this.$nextTick(() => {
+            setTimeout(() => {
+              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
+                this.$refs.sidebarItem.scrollIntoView({
+                  behavior: 'smooth',
+                  block: "center"
+                });
+              }
+            }, 500);  
+          });
+        }
+      }
+    }
+  }
 };
 </script>

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

@@ -1,6 +1,9 @@
 <template>
   <table-container>
-    <table class="table ac-info-table is-fullwidth">
+    <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">
@@ -15,7 +18,10 @@
       </tbody>
       <tbody
         v-else
-        :class="isTableEmpty ? 'no-data-available has-text-centered p-10' : ''"
+        :class="{
+          'no-data-available has-text-centered p-10': isTableEmpty,
+          'pl-0 pr-0': removeContentPadding
+        }"
       >
         <template v-if="!isTableEmpty">
           <!-- table rows -->
@@ -60,7 +66,11 @@ export default {
     },
     tableHeaders: {
       type: Array,
-      default: () => [],
+      default: () => []
+    },
+    removeContentPadding: {
+      type: Boolean,
+      default: false,
     },
   },
 

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

@@ -18,8 +18,17 @@
           </th>
         </table-row>
         <table-row v-else>
-          <th v-for="tableHeader in tableHeaders" :key="tableHeader">
-            {{ tableHeader }}
+          <th
+            v-for="(tableHeader, idx) in tableHeaders"
+            :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',
+            }"
+            @click.prevent="headerSortables[idx] && headerSortables[idx].enabled && emitSortEvent(idx)"
+          >
+            {{ headerLabels[idx] }}
           </th>
           <th
             ref="action-section"
@@ -41,8 +50,14 @@
           </th>
         </table-row>
         <table-row v-else>
-          <table-cell v-for="tableHeader in tableHeaders" :key="tableHeader">
-            <cell-value :is-loader-active="true" :cell-title="tableHeader" />
+          <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>
@@ -112,12 +127,13 @@ export default {
   data() {
     return {
       fakeCellWidth: 0,
+      headerSortables: [],
     };
   },
 
   computed: {
     loaderCols() {
-      if (this.isFullLoaderActive) {
+      if (this.isFullTableLoaderActive) {
         return 5;
       } else if (this.isLoaderActive) {
         return Math.max(this.tableHeaders.length + 1, 5);
@@ -128,6 +144,41 @@ export default {
     isFullTableLoaderActive() {
       return !this.tableHeaders.length;
     },
+    headerLabels() {
+      return this.tableHeaders.map((th) =>
+        typeof th === "string" ? th : th.label || "Label"
+      );
+    },
+  },
+
+  watch: {
+    tableHeaders: {
+      immediate: true,
+      handler(n) {
+        if (this.headerSortables.length === n.length) {
+          n.forEach((th, idx) => {
+            if (this.headerSortables[idx].enabled !== !!th.sortable) {
+              this.headerSortables[idx].enabled = !!th.sortable;
+              this.headerSortables[idx].mode = "";
+            }
+          });
+        } else {
+          this.headerSortables = n.map((th) => {
+            if (typeof th === "string") {
+              return {
+                enabled: false,
+                mode: "",
+              };
+            } else {
+              return {
+                enabled: !!th.sortable,
+                mode: "",
+              };
+            }
+          });
+        }
+      },
+    },
   },
 
   updated() {
@@ -144,6 +195,25 @@ export default {
         this.fakeCellWidth = d;
       }
     },
+    emitSortEvent(index) {
+      const emitValue = {
+        index,
+        label: this.tableHeaders[index].label,
+        mode: "",
+      };
+
+      this.headerSortables.forEach((hs, idx) => {
+        if (idx !== index) hs.mode = "";
+        else {
+          if (hs.mode === "asc") hs.mode = "desc";
+          else hs.mode = "asc";
+
+          emitValue.mode = hs.mode;
+        }
+      });
+
+      this.$emit("sort", emitValue);
+    },
   },
 };
 </script>

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

@@ -6,7 +6,7 @@
     custom
     v-slot="{ navigate }"
   >
-    <tr @click="navigate">
+    <tr class="is-link" @click="navigate">
       <slot />
       <fake-table-cell
         v-if="fakeCellWidth > 0"
@@ -14,9 +14,14 @@
       />
     </tr>
   </router-link>
+
   <tr
     v-else
-    :class="{ 'is-selected': isSelected, 'is-hoverless': !isSelected }"
+    :class="{
+      'is-selected': isSelected,
+      'is-hoverless': !isSelected,
+      'is-disabled': isDisabled
+    }"
     @click.prevent="$emit('rowselect', true)"
   >
     <slot />
@@ -32,21 +37,25 @@ export default {
   props: {
     link: {
       type: String,
-      default: "",
+      default: ""
     },
     isSelected: {
       type: Boolean,
-      default: false,
+      default: false
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
     },
     fakeCellWidth: {
       type: Number,
-      default: 0,
-    },
+      default: 0
+    }
   },
 
   components: {
     TableCell: () => import("./TableCell.vue"),
-    FakeTableCell: () => import("./FakeTableCell.vue"),
-  },
+    FakeTableCell: () => import("./FakeTableCell.vue")
+  }
 };
 </script>

package/vue-components/v2/table/table-cell/CellValue.vue

@@ -1,6 +1,7 @@
 <template>
   <div v-if="isLoaderActive" ref="cellLoaderDiv" :style="{ maxWidth: '300px' }">
-    <content-loader :height="10" :width="computedCellWidth || 300" />
+    <content-loader :height="10" :width="computedCellWidth || 300" :primaryColor="primaryColor"
+    :secondaryColor="secondaryColor" />
   </div>
   <div v-else class="haha" ref="cellDiv">
     <object-cell
@@ -24,6 +25,8 @@
 </template>
 
 <script>
+import {loaderLightThemePrimaryColor, loaderDarkThemePrimaryColor, loaderLightThemeSecondaryColor, loaderDarkThemeSecondaryColor} from "@appscode/design-system/plugins/theme";
+
 export default {
   props: {
     isLoaderActive: {
@@ -56,6 +59,12 @@ export default {
     maxCharacterLength() {
       return Math.ceil(this.computedCellWidth / 8);
     },
+    primaryColor() {
+      return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemePrimaryColor : loaderLightThemePrimaryColor;
+    },
+    secondaryColor() {
+      return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemeSecondaryColor : loaderLightThemeSecondaryColor;
+    }
   },
 
   data() {

package/vue-components/v2/tabs/EditorTabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <tabs-body class="mt-20">
+  <tabs-body>
     <tabs class="is-line">
       <tab-item :is-active="activeTab === 'edit'">
         <a @click.prevent="$emit('tabchange', 'edit')">Edit</a>

package/vue-components/v3/button/Button.vue

@@ -0,0 +1,73 @@
+<template>
+  <button
+    class="button ac-button is-extra-small"
+    :class="`${modifierClasses}${isLoaderActive ? ' is-loading' : ''}`"
+    :disabled="disabled ? true : null"
+    @click="handleClick"
+  >
+    <span v-if="iconClass || iconImage" class="icon is-small">
+      <img
+        v-if="iconImage"
+        :src="iconImage"
+        alt="close-icon"
+        :width="iconImageWidth"
+      />
+      <i v-else :class="`fa fa-${iconClass}`" aria-hidden="true" />
+    </span>
+    <span v-if="title" :class="titleModifierClass">{{ title }}</span>
+    <slot />
+  </button>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+export default defineComponent({
+  props: {
+    // button title
+    title: {
+      type: String,
+      default: "",
+    },
+    // for loader
+    isLoaderActive: {
+      type: Boolean,
+      default: false,
+    },
+    // for disability
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    // for icon
+    iconClass: {
+      type: String,
+      default: "",
+    },
+    iconImage: {
+      type: String,
+      default: "",
+    },
+    iconImageWidth: {
+      type: Number,
+      default: undefined,
+    },
+    // modifier class
+    modifierClasses: {
+      type: String,
+      default: "is-primary",
+    },
+    titleModifierClass: {
+      type: String,
+      default: "",
+    },
+  },
+
+  emits: ["click"],
+
+  methods: {
+    handleClick(e) {
+      if (!this.disabled) this.$emit("click", e);
+    },
+  },
+});
+</script>