@appscode/design-system 1.1.0-alpha.9 → 1.1.0-beta.2

package/vue-components/types/longRunningTasks.ts

@@ -0,0 +1,20 @@
+export type TaskStatus =
+  | "Pending"
+  | "Running"
+  | "Success"
+  | "Failed"
+  | "Started";
+export interface TaskLog {
+  status?: TaskStatus;
+  msg?: string;
+  step?: string;
+  error?: string;
+  id?: string;
+}
+export interface Task extends Omit<TaskLog, "message"> {
+  logs: Array<string>;
+}
+export interface LongRunningTasksCtx {
+  natsSubject: string;
+  tasks: Array<Task>;
+}

package/vue-components/types/notification.ts

@@ -0,0 +1,6 @@
+import type { TaskLog } from "./longRunningTasks";
+
+export interface Notification extends TaskLog {
+  id: string;
+  time: number;
+}

package/vue-components/types/previewYaml.ts

@@ -0,0 +1,8 @@
+export interface PreviewYamlType {
+  content: string;
+  initContent: string;
+  isSecret: boolean;
+  name: string;
+  type: string;
+  uid: string;
+}

package/vue-components/types/table.ts

@@ -0,0 +1,54 @@
+export interface AcSortCtx {
+  index: number | null;
+  mode: "asc" | "desc" | string;
+  label: string;
+}
+export interface AcTableCell {
+  data: unknown;
+  sort?: string | number;
+  icon?: string;
+  color?: string;
+  link?: string;
+  tooltip?: string;
+}
+export interface AcTableCol {
+  name: string;
+  type: "object" | "string" | "number" | "date" | "integer";
+  priority: number;
+  pathTemplate?: string;
+  format?: string;
+  link?: Record<string, unknown>;
+  sort?: {
+    enable: boolean;
+    template: string;
+    type: string;
+  };
+  icon?: boolean;
+  textAlign?: string;
+  dashboard?: {
+    status: string;
+    message: string;
+    title: string;
+  };
+  exec?: Record<string, unknown>;
+}
+export interface AcTableRow {
+  cells: Array<{
+    data: unknown;
+    sort?: number | string;
+    color?: string;
+    link?: string;
+    icon?: string;
+  }>;
+  namespace?: string;
+}
+export type AcTable = {
+  columns: Array<AcTableCol>;
+  rows: Array<AcTableRow>;
+  name?: string;
+};
+
+export type AcDashboardList = Array<{
+  title: string;
+  url: string;
+}>;

package/vue-components/types/theme.ts

@@ -0,0 +1,10 @@
+interface Theme {
+  displayName: string;
+  iconClass: string;
+}
+
+export interface ThemeModes {
+  light: Theme;
+  dark: Theme;
+  system: Theme;
+}

package/vue-components/types/user.ts

@@ -0,0 +1,22 @@
+export interface User {
+  id: number;
+  login: string;
+  full_name: string;
+  email: string;
+  avatar_url: string;
+  language: string;
+  is_admin: boolean;
+  last_login: string;
+  created: string;
+  type: 0 | 1 | 2;
+  active: boolean;
+  prohibit_login: boolean;
+  location: string;
+  website: string;
+  description: string;
+  username: string;
+}
+
+export interface Organization extends User {
+  type: 1;
+}

package/vue-components/v2/card/OverviewCards.vue

@@ -1,5 +1,20 @@
 <template>
-  <div class="overview-card">
-    <slot />
+  <div>
+    <h1>Hello there</h1>
+    <div class="overview-cards">
+      <slot />
+    </div>
   </div>
 </template>
+<style lang="scss" scoped>
+.overview-cards {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
+
+  border: 1px solid $primary-95;
+  padding: 16px;
+  height: 100%;
+  margin-right: 20px;
+}
+</style>

package/vue-components/v2/editor/ResourceKeyValueEditor.vue

@@ -80,79 +80,79 @@ export default {
     DownloadBtn: () => import("./../button/DownloadBtn.vue"),
     DeleteConfirmationModal: () =>
       import("./../modals/DeleteConfirmationModal.vue"),
-    FilteredFileEditor: () => import("./FilteredFileEditor.vue")
+    FilteredFileEditor: () => import("./FilteredFileEditor.vue"),
   },
   props: {
     title: {
       type: String,
-      default: "Title"
+      default: "Title",
     },
     isSearchable: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isPreviewLoading: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isEditorReadOnly: {
       type: Boolean,
-      default: false
+      default: false,
     },
     previewYamls: {
       type: Array,
       default: () => {
         [];
-      }
+      },
     },
     visibleBtn: {
       type: Object,
       default: () => {
         return {};
-      }
+      },
     },
     showMinimap: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isUpdateActive: {
       type: Boolean,
-      default: false
+      default: false,
     },
     deleteModalStatus: {
       type: String,
-      default: "closed"
+      default: "closed",
     },
     editorHeight: {
       type: Number,
-      default: 60
+      default: 60,
     },
     hideHeader: {
       type: Boolean,
-      default: false
+      default: false,
     },
     loaderColor: {
       type: Object,
       default: () => {
         return {};
-      }
+      },
     },
     theme: {
       type: String,
-      default: "light"
-    }
+      default: "light",
+    },
   },
   data() {
     return {
       activeKey: 0,
       toggleHideValue: "",
-      showDeleteDataModal: false
+      showDeleteDataModal: false,
     };
   },
   computed: {
     activeFile() {
       const activeFile = this.previewYamls.find(
-        element => element.uid === this.activeKey
+        (element) => element.uid === this.activeKey
       );
       return activeFile || { content: "", format: "yaml" };
     },
@@ -175,7 +175,7 @@ export default {
     showDeleteBtn() {
       if (this.visibleBtn.showDeleteBtn) return true;
       else return false;
-    }
+    },
   },
   methods: {
     onCopy() {
@@ -198,12 +198,12 @@ export default {
     setActiveKey(key) {
       this.activeKey = key;
       this.toggleHideValue = this.activeFile.isSecret;
-    }
+    },
   },
   watch: {
     deleteModalStatus(n) {
       if (n === "closed") this.showDeleteDataModal = false;
-    }
-  }
+    },
+  },
 };
 </script>

package/vue-components/v2/icons/Ellipsis.vue

@@ -1,3 +1,4 @@
 <template>
-  <i aria-hidden="true" class="fa fa-ellipsis-h"></i>
+  <!-- <i aria-hidden="true" class="fa fa-ellipsis-h"></i> -->
+  <span>More...</span>
 </template>

package/vue-components/v2/modal/Modal.vue

@@ -32,7 +32,6 @@
         <!-- modal body start  -->
         <div
           class="ac-modal-body ac-vscrollbar"
-          :class="modifierBodyClasses"
           data-testid="ac-modal-content-with-scroll"
         >
           <div class="ac-modal-content">
@@ -88,10 +87,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    modifierBodyClasses: {
-      type: String,
-      default: "",
-    },
   },
 
   components: {

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

@@ -1,18 +1,43 @@
 <template>
   <div class="app-drawer-wrapper is-flex">
     <div
-      class="drawer-icon  is-flex is-justify-content-center is-align-items-center"
+      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' }"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z"
-        ></path>
+          d="M6.66667 2H2V6.66667H6.66667V2Z"
+          stroke="#061B2D"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M14 2H9.33337V6.66667H14V2Z"
+          stroke="#061B2D"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M14 9.33334H9.33337V14H14V9.33334Z"
+          stroke="#061B2D"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M6.66667 9.33334H2V14H6.66667V9.33334Z"
+          stroke="#061B2D"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
       </svg>
     </div>
     <!-- dropdown start -->
@@ -47,11 +72,11 @@ export default {
   props: {
     apps: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
   },
   components: {
-    NavbarItemContent: () => import("./NavbarItemContent.vue")
-  }
+    NavbarItemContent: () => import("./NavbarItemContent.vue"),
+  },
 };
 </script>

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

@@ -4,9 +4,9 @@
       <!-- navbar start  -->
       <nav class="ac-navbar">
         <!-- navbar logo start  -->
-        <div class="ac-navbar-brand">
+        <!-- <div class="ac-navbar-brand">
           <slot name="navbar-brand-logo" />
-        </div>
+        </div> -->
         <!-- navbar logo end -->
 
         <!-- navbar search area start  -->
@@ -26,4 +26,4 @@
       <!-- navbar end -->
     </div>
   </div>
-</template>
+</template>

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

@@ -2,4 +2,6 @@
   <div class="ac-menu-item">
     <slot />
   </div>
-</template>
+</template>
+
+<style></style>

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

@@ -2,4 +2,4 @@
   <div class="ac-menu-content">
     <slot />
   </div>
-</template>
+</template>

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

@@ -1,11 +1,11 @@
 <template>
   <navbar-item>
     <button class="button ac-nav-button ac-profile-button">
-      {{ user.full_name || user.username }}
-      <i class="fa fa-angle-down" aria-hidden="true"></i>
       <div class="ac-user-profile">
         <img :src="user.avatar_url" alt="User Photo" />
       </div>
+      {{ user.full_name || user.username }}
+      <i class="fa fa-angle-down" aria-hidden="true"></i>
     </button>
     <navbar-item-content class="navbar-dropdown-wrapper">
       <div
@@ -52,13 +52,7 @@
             key="switcher"
           >
             <a
-              class="
-                ac-dropdown-button
-                is-fullwidth
-                is-flex
-                is-justify-content-space-between
-                is-align-items-center
-              "
+              class="ac-dropdown-button is-fullwidth is-flex is-justify-content-space-between is-align-items-center"
               @click="toggleList()"
             >
               <span>Switch Account</span>
@@ -93,13 +87,7 @@
                     />
                   </div>
                   <div
-                    class="
-                      is-flex
-                      is-align-items-center
-                      is-justify-content-space-between
-                      is-fullwidth
-                      ml-10
-                    "
+                    class="is-flex is-align-items-center is-justify-content-space-between is-fullwidth ml-10"
                   >
                     <div class="org-info">
                       <strong
@@ -117,12 +105,7 @@
                     </div>
                     <span
                       v-if="idx === 0"
-                      class="
-                        material-icons-outlined
-                        font-size-18
-                        ml-10
-                        is-pulled-right
-                      "
+                      class="material-icons-outlined font-size-18 ml-10 is-pulled-right"
                     >
                       check
                     </span>

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

@@ -167,3 +167,68 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.inner-table-pagination {
+  padding: 4px 20px;
+}
+
+.pagination-item {
+  ul {
+    li {
+      display: inline-block;
+      a {
+        display: block;
+        width: 20px;
+        text-align: center;
+        font-size: 13px;
+        font-weight: 500;
+        border-radius: 4px;
+        border: 1px solid $primary-90;
+        color: $primary;
+        margin-left: 4px;
+
+        &:hover {
+          background-color: $primary !important;
+          color: $white-100;
+          border: 1px solid $primary-90;
+        }
+        &.previous {
+          background-color: $primary-97;
+        }
+        &.next {
+          background-color: $primary-97;
+        }
+        &.is-current {
+          background-color: $primary;
+          color: $white-100;
+        }
+      }
+    }
+  }
+}
+
+.counting-page,
+.pagination-filter {
+  color: $primary-30;
+  font-size: 12px;
+  span {
+    font-weight: 500;
+    padding: 0 4px;
+  }
+}
+.pagination-filter {
+  select {
+    background-color: $primary-97;
+    border: 1px solid $primary-90;
+    border-radius: 2px;
+    margin-left: 4px;
+    height: 22px;
+    padding: 0 4px;
+    &:focus,
+    &:active,
+    &:focus-visible {
+      border: 1px solid $primary;
+    }
+  }
+}
+</style>

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

@@ -45,20 +45,23 @@ 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
                 this.$refs.sidebarItem.scrollIntoView({
-                  behavior: 'smooth',
-                  block: "center"
+                  behavior: "smooth",
+                  block: "center",
                 });
               }
-            }, 500);  
+            }, 500);
           });
         }
-      }
-    }
-  }
+      },
+    },
+  },
 };
 </script>