@appscode/design-system 1.0.43-alpha.101 → 1.0.43-alpha.105

package/package.json

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

package/vue-components/v2/button/DownloadBtn.vue

@@ -0,0 +1,45 @@
+<template>
+  <ac-button
+    modifier-classes="is-primary is-square"
+    icon-class="download"
+    :is-loader-active="isFetching"
+    @click="download()"
+  />
+</template>
+
+<script>
+import downloadFunc from "downloadjs";
+
+export default {
+  components: {
+    AcButton: () => import("./../button/Button.vue")
+  },
+  props: {
+    fileData: {
+      type: String,
+      default: ""
+    },
+    fileName: {
+      type: String,
+      default: ""
+    },
+    isFetching: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      downloadIcon: "fa fa-cloud-download"
+    };
+  },
+  component: {
+    downloadFunc
+  },
+  methods: {
+    download() {
+      downloadFunc(this.fileData, this.fileName);
+    }
+  }
+};
+</script>

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

@@ -103,66 +103,58 @@
 <script>
 export default {
   components: {
-    AcButton: () =>
-      import("@appscode/design-system/vue-components/v2/button/Button"),
-    Editor: () =>
-      import("@appscode/design-system/vue-components/v2/editor/Editor.vue"),
-    ContentTable: () =>
-      import(
-        "@appscode/design-system/vue-components/v2/content/ContentTable.vue"
-      ),
-    HeaderItem: () =>
-      import("@appscode/design-system/vue-components/v2/header/HeaderItem.vue"),
-    AcButton: () =>
-      import("@appscode/design-system/vue-components/v2/button/Button"),
-    DownloadBtn: () => import("@/components/buttons/DownloadBtn.vue"),
+    AcButton: () => import("./../button/Button.vue"),
+    Editor: () => import("./../editor/Editor.vue"),
+    ContentTable: () => import("./../content/ContentTable.vue"),
+    HeaderItem: () => import("./../header/HeaderItem.vue"),
+    DownloadBtn: () => import("./../button/DownloadBtn.vue"),
     DeleteConfirmationModal: () =>
-      import("@/components/modals/DeleteConfirmationModal.vue"),
-    ResourceLoader: () => import("@/components/loaders/ResourceLoader.vue"),
-    SidebarLoader: () => import("@/components/loaders/SidebarLoader.vue"),
+      import("./../modals/DeleteConfirmationModal.vue"),
+    ResourceLoader: () => import("./../loaders/ResourceLoader.vue"),
+    SidebarLoader: () => import("./../loaders/SidebarLoader.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 {};
-      },
-    },
+      }
+    }
   },
   data() {
     return {
       activePreview: "",
       activeKey: 0,
       hideValue: "",
-      showDeleteDataModal: false,
+      showDeleteDataModal: false
     };
   },
   computed: {
     activeFile() {
       const activeFile = this.previewYamls.find(
-        (p) => p.name === this.activePreview
+        p => p.name === this.activePreview
       );
 
       return activeFile || { content: "", format: "yaml" };
@@ -186,7 +178,7 @@ export default {
     showDeleteBtn() {
       if (this.visibleBtn.showDeleteBtn) return true;
       else return false;
-    },
+    }
   },
   methods: {
     initActivePreview() {
@@ -215,7 +207,7 @@ export default {
     },
     confirmDelete(flag) {
       if (flag) this.$emit("deleteResource", this.activeKey);
-    },
+    }
   },
   watch: {
     previewYamls: {
@@ -225,8 +217,8 @@ export default {
         if (n.length) {
           this.initActivePreview();
         }
-      },
-    },
-  },
+      }
+    }
+  }
 };
 </script>

package/vue-components/v2/loaders/ResourceLoader.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <content-loader
+      :width="100"
+      :height="40"
+      :speed="2"
+      :primaryColor="'#f5f7f9'"
+    >
+      <rect x="1" y="1" rx="1" ry="1" width="14" height="1" />
+      <rect x="17" y="1" rx="1" ry="1" width="13" height="1" />
+      <rect x="32" y="1" rx="1" ry="1" width="8" height="1" />
+
+      <rect x="7" y="3" rx="1" ry="1" width="14" height="1" />
+      <rect x="23" y="3" rx="1" ry="1" width="13" height="1" />
+      <rect x="38" y="3" rx="1" ry="1" width="8" height="1" />
+
+      <rect x="13" y="5" rx="1" ry="1" width="8" height="1" />
+      <rect x="23" y="5" rx="1" ry="1" width="15" height="1" />
+      <rect x="40" y="5" rx="1" ry="1" width="4" height="1" />
+
+      <rect x="13" y="7" rx="1" ry="1" width="10" height="1" />
+      <rect x="25" y="7" rx="1" ry="1" width="20" height="1" />
+
+      <rect x="7" y="10" rx="1" ry="1" width="14" height="1" />
+      <rect x="23" y="10" rx="1" ry="1" width="13" height="1" />
+      <rect x="38" y="10" rx="1" ry="1" width="8" height="1" />
+
+      <rect x="13" y="12" rx="1" ry="1" width="8" height="1" />
+      <rect x="23" y="12" rx="1" ry="1" width="15" height="1" />
+      <rect x="40" y="12" rx="1" ry="1" width="4" height="1" />
+
+      <rect x="13" y="14" rx="1" ry="1" width="10" height="1" />
+      <rect x="25" y="14" rx="1" ry="1" width="20" height="1" />
+
+      <rect x="7" y="17" rx="1" ry="1" width="14" height="1" />
+      <rect x="23" y="17" rx="1" ry="1" width="13" height="1" />
+      <rect x="38" y="17" rx="1" ry="1" width="8" height="1" />
+
+      <rect x="13" y="19" rx="1" ry="1" width="8" height="1" />
+      <rect x="23" y="19" rx="1" ry="1" width="15" height="1" />
+      <rect x="40" y="19" rx="1" ry="1" width="4" height="1" />
+
+      <rect x="7" y="22" rx="1" ry="1" width="14" height="1" />
+      <rect x="23" y="22" rx="1" ry="1" width="13" height="1" />
+      <rect x="38" y="22" rx="1" ry="1" width="8" height="1" />
+
+      <rect x="13" y="24" rx="1" ry="1" width="8" height="1" />
+      <rect x="23" y="24" rx="1" ry="1" width="15" height="1" />
+      <rect x="40" y="24" rx="1" ry="1" width="4" height="1" />
+
+      <rect x="1" y="26" rx="1" ry="1" width="14" height="1" />
+      <rect x="17" y="26" rx="1" ry="1" width="13" height="1" />
+      <rect x="32" y="26" rx="1" ry="1" width="8" height="1" />
+
+      <rect x="7" y="29" rx="1" ry="1" width="14" height="1" />
+      <rect x="23" y="29" rx="1" ry="1" width="13" height="1" />
+      <rect x="38" y="29" rx="1" ry="1" width="8" height="1" />
+
+      <rect x="13" y="31" rx="1" ry="1" width="8" height="1" />
+      <rect x="23" y="31" rx="1" ry="1" width="15" height="1" />
+      <rect x="40" y="31" rx="1" ry="1" width="4" height="1" />
+
+      <rect x="7" y="33" rx="1" ry="1" width="14" height="1" />
+      <rect x="23" y="33" rx="1" ry="1" width="13" height="1" />
+      <rect x="38" y="33" rx="1" ry="1" width="8" height="1" />
+
+      <rect x="13" y="35" rx="1" ry="1" width="8" height="1" />
+      <rect x="23" y="35" rx="1" ry="1" width="15" height="1" />
+      <rect x="40" y="35" rx="1" ry="1" width="4" height="1" />
+
+      <rect x="13" y="37" rx="1" ry="1" width="8" height="1" />
+      <rect x="23" y="37" rx="1" ry="1" width="15" height="1" />
+      <rect x="40" y="37" rx="1" ry="1" width="4" height="1" />
+
+      <rect x="1" y="39" rx="1" ry="1" width="14" height="1" />
+      <rect x="17" y="39" rx="1" ry="1" width="13" height="1" />
+      <rect x="32" y="39" rx="1" ry="1" width="8" height="1" />
+    </content-loader>
+  </div>
+</template>
+
+<script>
+import { ContentLoader } from "vue-content-loader";
+
+export default {
+  components: {
+    ContentLoader,
+  },
+};
+</script>

package/vue-components/v2/loaders/SidebarLoader.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <content-loader
+      :width="100"
+      :height="175"
+      :speed="2"
+      :primaryColor="'#dcdee6'"
+    >
+      <rect x="2" y="1" rx="3" ry="3" width="96" height="20" />
+      <rect x="15" y="23" rx="3" ry="3" width="83" height="15" />
+      <rect x="15" y="40" rx="3" ry="3" width="83" height="15" />
+      <rect x="15" y="57" rx="3" ry="3" width="83" height="15" />
+
+      <rect x="2" y="78" rx="3" ry="3" width="96" height="20" />
+      <rect x="15" y="100" rx="3" ry="3" width="83" height="15" />
+      <rect x="15" y="117" rx="3" ry="3" width="83" height="15" />
+      <rect x="15" y="134" rx="3" ry="3" width="83" height="15" />
+
+      <rect x="2" y="155" rx="3" ry="3" width="96" height="20" />
+    </content-loader>
+  </div>
+</template>
+
+<script>
+import { ContentLoader } from "vue-content-loader";
+
+export default {
+  components: {
+    ContentLoader,
+  },
+};
+</script>

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

@@ -0,0 +1,77 @@
+<template>
+  <!-- modal start  -->
+  <modal
+    :title="title"
+    modifier-classes="is-normal"
+    :open="open"
+    @closemodal="closeModal"
+  >
+    <!-- freedom content start  -->
+    <div class="action-message pt-35 pb-35 has-text-centered">
+      <h5 class="is-message">{{ message }} {{ itemName ? "" : "?" }}</h5>
+      <p class="is-description">{{ itemName }} {{ itemName ? "?" : "" }}</p>
+    </div>
+
+    <!-- freedom content end -->
+
+    <!-- modal footer start -->
+    <template #modal-footer-controls>
+      <ac-button
+        @click.stop="closeModal"
+        title="Cancel"
+        modifier-classes="is-outlined"
+      />
+      <ac-button
+        modifier-classes="is-danger"
+        :is-loader-active="isDeleteActive"
+        title="Yes"
+        @click.stop="confirm(true)"
+      />
+    </template>
+  </modal>
+  <!-- modal end  -->
+</template>
+
+<script>
+export default {
+  components: {
+    Modal: () => import("./../modal/Modal.vue"),
+    AcButton: () => import("./../button/Button.vue")
+  },
+  props: {
+    open: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    message: {
+      type: String,
+      default: ""
+    },
+    itemName: {
+      type: String,
+      default: ""
+    },
+    isLoading: {
+      type: Boolean,
+      default: false
+    },
+    isDeleteActive: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    confirm(response) {
+      this.$emit("delete-confirmation-modal$confirm", response);
+    },
+    closeModal() {
+      this.confirm(false);
+      this.$emit("closemodal", true);
+    }
+  }
+};
+</script>

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

@@ -28,6 +28,9 @@
               <a :href="`${serverDomain}/admin`"> Site Administration </a>
             </li>
           </template>
+          <li>
+            <a :href="`${serverDomain}/dashboard`"> Dashboard </a>
+          </li>
           <li>
             <a :href="`${serverDomain}/user/logout`"> Sign out </a>
           </li>

package/vue-components/v3/sidebar/SidebarItemWithDropDown.vue

@@ -0,0 +1,120 @@
+<template>
+  <li :class="`is-${dropDownStatus}`">
+    <a class="ac-dropdown-button" :title="title" @click="toggleDropDownStatus">
+      <span>
+        <img :src="icon" alt="icon" />
+      </span>
+      <strong>{{ title || "-" }}</strong>
+      <span class="ac-arrow-down">
+        <i class="fa fa-angle-down" aria-hidden="true"> </i>
+      </span>
+    </a>
+
+    <ul ref="sectionItems" :style="{ maxHeight: dropDownSectionHeight }">
+      <slot />
+    </ul>
+  </li>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    isDropDownOpen: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: "Sidebar Item",
+    },
+    icon: {
+      type: String,
+      default: "@/assets/images/icons/basic.svg",
+    },
+  },
+
+  emits: ["dropDownItemChange"],
+
+  data() {
+    return {
+      dropDownStatus: "close",
+      dropDownSectionHeight: null,
+      isCompMounted: false,
+    };
+  },
+
+  mounted() {
+    this.isCompMounted = true;
+    setTimeout(() => {
+      // for expanding dropdown
+      if (this.isDropDownOpen) {
+        this.setDropdownMaxHeight("open");
+      } else {
+        this.setDropdownMaxHeight("close");
+      }
+    }, 700);
+  },
+
+  watch: {
+    title(n, o) {
+      if (n && this.isCompMounted) {
+        this.$nextTick(() => {
+          // for expanding dropdown
+          this.setDropdownMaxHeight("open");
+        });
+      }
+
+      if (o && this.isCompMounted) {
+        this.$nextTick(() => {
+          // for expanding dropdown
+          this.setDropdownMaxHeight("close");
+        });
+      }
+    },
+    isDropDownOpen: {
+      immediate: true,
+      handler(n) {
+        if (n) {
+          this.dropDownStatus = "open";
+        } else this.dropDownStatus = "close";
+      },
+    },
+    dropDownStatus: {
+      immediate: true,
+      handler(n) {
+        if (n === "open") {
+          // emit event to close other drop down items
+          this.$emit("dropDownItemChange");
+
+          this.$nextTick(() => {
+            const dropDownUl = this.$refs["sectionItems"];
+            // debugger;
+            if (dropDownUl)
+              this.dropDownSectionHeight = `${dropDownUl.scrollHeight}px`;
+          });
+        } else {
+          // emit event to close other drop down items
+          this.dropDownSectionHeight = null;
+        }
+      },
+    },
+  },
+
+  methods: {
+    setDropdownMaxHeight(mode) {
+      if (mode === "open") {
+        this.dropDownSectionHeight = `${this.$refs["sectionItems"].scrollHeight}px`;
+      } else {
+        this.dropDownSectionHeight = null;
+      }
+    },
+    toggleDropDownStatus() {
+      if (this.dropDownStatus === "open") {
+        this.dropDownStatus = "close";
+      } else this.dropDownStatus = "open";
+    },
+  },
+});
+</script>