@appscode/design-system 1.1.0 → 2.0.0

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

@@ -11,7 +11,7 @@
       <div class="ac-modal-inner">
         <!-- modal header start  -->
         <div class="ac-modal-header">
-          <h6>{{ title }}</h6>
+          <h5>{{ title }}</h5>
           <header-items>
             <slot name="modal-header-controls" />
             <header-item>
@@ -45,11 +45,7 @@
         <!-- modal footer start -->
         <div
           v-if="!hideActionFooter"
-          class="
-            ac-modal-footer
-            action-footer
-            is-flex is-align-items-center is-justify-content-space-between
-          "
+          class="ac-modal-footer action-footer is-flex is-align-items-center is-justify-content-space-between"
         >
           <div>
             <slot name="modal-footer-left" />

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,69 @@ 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;
+      outline: none;
+    }
+  }
+}
+</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>

package/{components/_ac-accordion.scss → vue-components/v3/accordion/Accordion.vue}

@@ -1,3 +1,36 @@
+<script setup lang="ts">
+interface Props {
+  modifierClasses?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  modifierClasses: "",
+});
+</script>
+
+<template>
+  <!--use "is-marginless" class for remove margin -->
+  <div class="ac-accordion-wrapper" :class="modifierClasses">
+    <!-- single accordion item start  -->
+    <div class="single-accordion-item closed">
+      <!-- accordion heading start  -->
+      <div class="accordion-heading">
+        <h6 class="is-small">Hello Accordion title</h6>
+        <button class="icon">
+          <i class="fa fa-plus" aria-hidden="true"></i>
+        </button>
+      </div>
+      <!-- accordion heading end -->
+      <!-- accordion body start  -->
+      <div class="accordion-body">
+        <slot />
+      </div>
+      <!-- accordion body end -->
+    </div>
+    <!-- single accordion item end  -->
+  </div>
+</template>
+<style lang="scss" scoped>
 .ac-accordion-wrapper {
   &.is-marginless {
     .single-accordion-item {
@@ -16,18 +49,18 @@
           top: 0;
           width: 4px;
           height: 100%;
-          background-color: $ac-primary;
+          background-color: $primary;
         }
       }
     }
   }
 
   .single-accordion-item {
-    background-color: $ac-white;
+    background-color: $white-100;
     padding: 15px 20px;
     margin-bottom: 15px;
     border-radius: 4px;
-    border: 1px solid $ac-white-light;
+    border: 1px solid $primary-90;
 
     &.open {
       .accordion-heading {
@@ -56,7 +89,7 @@
       .icon {
         width: 20px;
         height: 20px;
-        border: 1px solid $ac-white-light;
+        border: 1px solid $primary-90;
         line-height: 20px;
         display: flex;
         justify-content: center;
@@ -73,8 +106,8 @@
       overflow: hidden;
 
       p {
-        font-size: $font-size-small;
-        color: $ac-color-text;
+        font-size: 13px;
+        color: $primary-20;
         line-height: 1.6;
       }
     }
@@ -115,3 +148,4 @@ Responsive Classes
 // Extra large devices (large desktops, 1200px and up)
 @media (min-width: 1200px) {
 }
+</style>