@appscode/design-system 1.0.43-alpha.126 → 1.0.43-alpha.129

package/components/_dashboard-header.scss

@@ -81,3 +81,35 @@
     }
   }
 }
+
+.resource {
+  display: flex;
+  align-items: center;
+  border-left: 1px solid $ac-white-light;
+  padding: 0 1.5rem;
+  margin-top: -10px;
+  margin-bottom: -10px;
+  .r-icon {
+    display: flex;
+    align-items: center;
+    max-width: 40px;
+  }
+
+  .r-data {
+    margin-left: 0.8rem;
+    .request,
+    .limit {
+      font-weight: 500;
+      min-width: 50px;
+      text-align: center;
+    }
+    .request {
+      font-weight: 300;
+    }
+    hr {
+      margin: 0;
+      padding: 0;
+      background-color: $ac-white-light;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "1.0.43-alpha.126",
+  "version": "1.0.43-alpha.129",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/v2/content/ContentTable.vue

@@ -2,6 +2,7 @@
   <content-layout>
     <template #content-header>
       <content-header
+        v-if="!hideHeader"
         :header-title="tableTitle"
         :header-sub-title="tableSubTitle"
         :class="{ 'pl-0 pr-0': removeTableHeaderPadding }"
@@ -21,32 +22,36 @@ export default {
   props: {
     removeTableHeaderPadding: {
       type: Boolean,
-      default: false,
+      default: false
     },
     tableTitle: {
       type: String,
-      default: "Table",
+      default: "Table"
     },
     tableSubTitle: {
       type: String,
-      default: "",
+      default: ""
     },
     searchable: {
       type: Boolean,
-      default: true,
+      default: true
     },
+    hideHeader: {
+      type: Boolean,
+      default: false
+    }
   },
   components: {
     ContentLayout: () => import("./ContentLayout.vue"),
     ContentHeader: () => import("./ContentHeader.vue"),
     HeaderItem: () => import("../header/HeaderItem.vue"),
-    SearchBar: () => import("../searchbars/SearchBar.vue"),
+    SearchBar: () => import("../searchbars/SearchBar.vue")
   },
 
   data() {
     return {
-      searchText: "",
+      searchText: ""
     };
-  },
+  }
 };
 </script>

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

@@ -48,9 +48,17 @@
   </div>
 </template>
 <script>
+import Preloader from "../preloader/Preloader.vue";
+import Banner from "../banner/Banner.vue";
 export default {
   components: {
-    Editor: () => import("./Editor.vue"),
+    Editor: () => ({
+      component: import("./Editor.vue"),
+      loading: Preloader,
+      delay: 200,
+      error: Banner,
+      timeout: 20000
+    }),
     ResourceLoader: () => import("./../loaders/ResourceLoader.vue"),
     SidebarLoader: () => import("./../loaders/SidebarLoader.vue")
   },

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

@@ -1,5 +1,9 @@
 <template>
-  <content-table :table-title="title" :searchable="isSearchable">
+  <content-table
+    :table-title="title"
+    :searchable="isSearchable"
+    :hide-header="hideHeader"
+  >
     <template #content-controls>
       <header-item v-if="showHideBtn">
         <ac-button
@@ -119,6 +123,10 @@ export default {
     editorHeight: {
       type: Number,
       default: 60
+    },
+    hideHeader: {
+      type: Boolean,
+      default: false
     }
   },
   data() {

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

@@ -18,7 +18,9 @@
               <ac-button
                 modifier-classes="is-square is-transparent"
                 :disabled="isCloseOptionDisabled"
-                :icon-image="require('@/assets/images/icons/close-icon.svg')"
+                :icon-image="
+                  require('@appscode/design-system-images/icons/close-icon.svg')
+                "
                 @click.stop="destroyModal"
               />
             </header-item>

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

@@ -28,6 +28,8 @@
 </template>
 
 <script>
+import Preloader from "../preloader/Preloader.vue";
+import Banner from "../banner/Banner.vue";
 export default {
   props: {
     open: {
@@ -45,7 +47,13 @@ export default {
   },
   components: {
     Modal: () => import("../modal/Modal.vue"),
-    Editor: () => import("../editor/Editor.vue"),
+    Editor: () => ({
+      component: import("../editor/Editor.vue"),
+      loading: Preloader,
+      delay: 200,
+      error: Banner,
+      timeout: 20000,
+    }),
     AcButton: () => import("../button/Button.vue"),
     HeaderItem: () => import("../header/HeaderItem.vue"),
   },

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

@@ -30,6 +30,8 @@
 <script>
 import { defineComponent, defineAsyncComponent } from "vue";
 import { useToast } from "vue-toastification";
+import Preloader from "../../v2/preloader/Preloader.vue";
+import Banner from "../../v2/banner/Banner.vue";
 
 export default defineComponent({
   props: {
@@ -51,9 +53,14 @@ export default defineComponent({
     Modal: defineAsyncComponent(() =>
       import("../modal/Modal.vue").then((module) => module.default)
     ),
-    Editor: defineAsyncComponent(() =>
-      import("../editor/Editor.vue").then((module) => module.default)
-    ),
+    Editor: defineAsyncComponent({
+      loader: () =>
+        import("../editor/Editor.vue").then((module) => module.default),
+      loadingComponent: Preloader,
+      delay: 200,
+      errorComponent: Banner,
+      timeout: 20000,
+    }),
     AcButton: defineAsyncComponent(() =>
       import("../button/Button.vue").then((module) => module.default)
     ),