@appscode/design-system 1.0.43-alpha.14 → 1.0.43-alpha.142

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/card/PaymentCards.vue

@@ -5,8 +5,8 @@
       <content-loader
         :height="235"
         :speed="2"
-        :primary-color="'#f3f3fa'"
-        :secondary-color="'#ffffff'"
+        :primaryColor="primaryColor"
+        :secondaryColor="secondaryColor"
       />
     </div>
     <!-- loader end -->
@@ -20,6 +20,7 @@
 </template>
 <script>
 import { ContentLoader } from "vue-content-loader";
+import {loaderLightThemePrimaryColor, loaderDarkThemePrimaryColor, loaderLightThemeSecondaryColor, loaderDarkThemeSecondaryColor} from "@appscode/design-system/plugins/theme";
 
 export default {
   components: {
@@ -31,5 +32,13 @@ export default {
       default: false,
     },
   },
+  computed: {
+    primaryColor() {
+      return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemePrimaryColor : loaderLightThemePrimaryColor;
+    },
+    secondaryColor() {
+      return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemeSecondaryColor : loaderLightThemeSecondaryColor;
+    }  
+  }
 };
 </script>

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/Editor.vue

@@ -17,7 +17,9 @@
         minimap: {
           enabled: calcShowMinimap,
         },
+        theme: theme,
         readOnly: readOnly,
+        wordWrap: wordWrap,
         scrollBeyondLastLine: false,
       }"
     />
@@ -31,7 +33,9 @@
         minimap: {
           enabled: calcShowMinimap,
         },
+        theme: theme,
         readOnly: true,
+        wordWrap: wordWrap,
         scrollBeyondLastLine: false,
       }"
       :original="originalEditorContent"
@@ -41,6 +45,8 @@
 </template>
 
 <script>
+import Preloader from "../preloader/Preloader.vue";
+import Banner from "../banner/Banner.vue";
 export default {
   props: {
     value: {
@@ -67,10 +73,24 @@ export default {
       type: Number,
       default: 40,
     },
+    editorTheme: {
+      type: String,
+      default: "",
+    },
+    wordWrap: {
+      type: String,
+      default: "off",
+    },
   },
   components: {
     EditorTabs: () => import("../tabs/EditorTabs.vue"),
-    MonacoEditor: () => import("vue-monaco"),
+    MonacoEditor: () => ({
+      component: import("vue-monaco"),
+      loading: Preloader,
+      delay: 200,
+      error: Banner,
+      timeout: 20000,
+    }),
   },
 
   data() {
@@ -86,6 +106,14 @@ export default {
       const noOfLines = this.editorContent.split("\n").length;
       return this.showMinimap && noOfLines * 2 > this.editorHeight;
     },
+    theme() {
+      return (
+        this.editorTheme ||
+        (document.documentElement.classList.contains("is-dark-theme")
+          ? "vs-dark"
+          : "vs")
+      );
+    },
   },
 
   watch: {

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

@@ -0,0 +1,188 @@
+<template>
+  <div class="ac-preview is-active is-not-fixed">
+    <div class="ac-preview-inner">
+      <!-- preview body start  -->
+      <div class="ac-preview-body mt-0 pt-15 pl-20">
+        <div
+          v-if="isPreviewLoading || (!isPreviewLoading && previewYamls)"
+          class="left-content"
+        >
+          <div class="ac-files pt-0">
+            <ul v-if="!isPreviewLoading">
+              <li
+                v-for="(previewYaml, idx) in filteredYamls"
+                :key="previewYaml.name + idx"
+                :class="{ 'is-active': activeKey === previewYaml.uid }"
+              >
+                <a @click.prevent="setActivePreview(previewYaml.uid)">
+                  <span>
+                    <img
+                      src="~@appscode/design-system-images/icons/file-icon.svg"
+                      alt=""
+                    />
+                  </span>
+                  <span>{{ previewYaml.name }}</span>
+                </a>
+              </li>
+            </ul>
+            <sidebar-loader
+              v-else
+              :primaryLoaderColor="primaryLoaderColor"
+              :secondaryLoaderColor="secondaryLoaderColor"
+            />
+          </div>
+        </div>
+        <div class="right-content">
+          <div class="right-content">
+            <resource-loader
+              v-if="isPreviewLoading"
+              :primaryLoaderColor="primaryLoaderColor"
+              :secondaryLoaderColor="secondaryLoaderColor"
+            />
+            <editor
+              v-else-if="!isPreviewLoading && !hideValue"
+              v-model="activeFile.content"
+              :original-value="originalValue"
+              :language="activeFile.format"
+              :read-only="isEditorReadOnly"
+              :editor-height="editorHeight"
+              :show-minimap="showMinimap"
+              :editor-theme="editorTheme"
+              :key="editorTheme"
+            />
+            <span v-else> *************** </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Preloader from "../preloader/Preloader.vue";
+import Banner from "../banner/Banner.vue";
+export default {
+  components: {
+    Editor: () => ({
+      component: import("./Editor.vue"),
+      loading: Preloader,
+      delay: 200,
+      error: Banner,
+      timeout: 20000
+    }),
+    ResourceLoader: () => import("./../loaders/ResourceLoader.vue"),
+    SidebarLoader: () => import("./../loaders/SidebarLoader.vue")
+  },
+  props: {
+    searchText: {
+      type: String,
+      default: ""
+    },
+    toggleHideValue: {
+      type: Boolean,
+      default: true
+    },
+    isPreviewLoading: {
+      type: Boolean,
+      default: false
+    },
+    isEditorReadOnly: {
+      type: Boolean,
+      default: false
+    },
+    previewYamls: {
+      type: Array,
+      default: () => {
+        [];
+      }
+    },
+    showMinimap: {
+      type: Boolean,
+      default: false
+    },
+    editorHeight: {
+      type: Number,
+      default: 60
+    },
+    loaderColor: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    theme: {
+      type: String,
+      default: "light"
+    }
+  },
+  data() {
+    return {
+      activeKey: "",
+      hideValue: ""
+    };
+  },
+  computed: {
+    activeFile() {
+      const activeFile = this.filteredYamls.find(
+        element => element.uid === this.activeKey
+      );
+      return activeFile || { content: "", format: "yaml" };
+    },
+    originalValue() {
+      const activeFile = this.filteredYamls.find(
+        element => element.uid === this.activeKey
+      );
+      return (activeFile && activeFile.initContent) || "";
+    },
+    editorTheme() {
+      return this.theme === "dark" ? "vs-dark" : "vs";
+    },
+    primaryLoaderColor() {
+      return this.loaderColor.primaryLoaderColor;
+    },
+    secondaryLoaderColor() {
+      return this.loaderColor.secondaryLoaderColor;
+    },
+    filteredYamls() {
+      if (this.searchText) {
+        return this.previewYamls.filter(
+          element => JSON.stringify(element).search(this.searchText) > -1
+        );
+      } else return this.previewYamls;
+    },
+    isKeyAvailable() {
+      const val = this.previewYamls.find(element => {
+        return element.uid === this.activeKey;
+      });
+      return val === undefined ? false : true;
+    }
+  },
+  methods: {
+    initActivePreview() {
+      if (!this.isKeyAvailable) {
+        this.activeKey = this.previewYamls[0].uid;
+        this.hideValue = this.activeFile.isSecret;
+        this.$emit("setActiveKey", this.activeKey);
+      }
+    },
+    setActivePreview(uid) {
+      this.activeKey = uid;
+      this.hideValue = this.activeFile.isSecret;
+      this.$emit("setActiveKey", this.activeKey);
+    }
+  },
+  watch: {
+    previewYamls: {
+      deep: true,
+      immediate: true,
+      handler(n) {
+        if (n.length) {
+          this.initActivePreview();
+        }
+      }
+    },
+    toggleHideValue(n) {
+      this.hideValue = n;
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,209 @@
+<template>
+  <content-table
+    :table-title="title"
+    :searchable="isSearchable"
+    :hide-header="hideHeader"
+  >
+    <template #content-controls>
+      <header-item v-if="showHideBtn">
+        <ac-button
+          modifier-classes="is-square is-primary"
+          :icon-class="toggleHideValue ? 'eye-slash' : 'eye'"
+          @click.prevent="toggleHideValue = !toggleHideValue"
+        />
+      </header-item>
+      <header-item v-if="showCopyBtn">
+        <ac-button
+          modifier-classes="is-square is-primary"
+          icon-class="copy"
+          v-clipboard:copy="decode(activeFile)"
+          v-clipboard:success="onCopy"
+          v-clipboard:error="onError"
+        />
+      </header-item>
+      <header-item v-if="showDownloadBtn">
+        <download-btn
+          :file-data="decode(activeFile)"
+          :file-name="activeFile.name"
+        />
+      </header-item>
+      <header-item v-if="showUpdateBtn && !isEditorReadOnly">
+        <ac-button
+          modifier-classes="is-square is-primary"
+          icon-class="pencil-square-o"
+          :class="{ 'is-loading': isUpdateActive }"
+          @click.prevent="$emit('updateData', activeKey, activeFile)"
+        />
+      </header-item>
+      <header-item v-if="showDeleteBtn">
+        <ac-button
+          modifier-classes="is-square is-danger"
+          icon-class="trash"
+          @click.prevent="showDeleteDataModal = true"
+        />
+        <delete-confirmation-modal
+          title="Delete Resource"
+          message="Do you want to delete "
+          :item-name="activeFile.name"
+          :open="showDeleteDataModal"
+          :is-delete-active="deleteModalStatus === 'loading'"
+          @delete-confirmation-modal$confirm="confirmDelete"
+          @closemodal="showDeleteDataModal = false"
+        />
+      </header-item>
+      <slot name="content-action" />
+    </template>
+    <template #content="{ searchText }">
+      <filtered-file-editor
+        :search-text="searchText"
+        :toggle-hide-value="toggleHideValue"
+        :is-preview-loading="isPreviewLoading"
+        :is-editor-read-only="isEditorReadOnly"
+        :preview-yamls="previewYamls"
+        :show-minimap="showMinimap"
+        :editor-height="editorHeight"
+        :loader-color="loaderColor"
+        :theme="theme"
+        :key="theme"
+        @setActiveKey="setActiveKey"
+      />
+    </template>
+  </content-table>
+</template>
+<script>
+export default {
+  components: {
+    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("./../modals/DeleteConfirmationModal.vue"),
+    FilteredFileEditor: () => import("./FilteredFileEditor.vue")
+  },
+  props: {
+    title: {
+      type: String,
+      default: "Title"
+    },
+    isSearchable: {
+      type: Boolean,
+      default: false
+    },
+    isPreviewLoading: {
+      type: Boolean,
+      default: false
+    },
+    isEditorReadOnly: {
+      type: Boolean,
+      default: false
+    },
+    previewYamls: {
+      type: Array,
+      default: () => {
+        [];
+      }
+    },
+    visibleBtn: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    showMinimap: {
+      type: Boolean,
+      default: false
+    },
+    isUpdateActive: {
+      type: Boolean,
+      default: false
+    },
+    deleteModalStatus: {
+      type: String,
+      default: "closed"
+    },
+    editorHeight: {
+      type: Number,
+      default: 60
+    },
+    hideHeader: {
+      type: Boolean,
+      default: false
+    },
+    loaderColor: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    theme: {
+      type: String,
+      default: "light"
+    }
+  },
+  data() {
+    return {
+      activeKey: 0,
+      toggleHideValue: "",
+      showDeleteDataModal: false
+    };
+  },
+  computed: {
+    activeFile() {
+      const activeFile = this.previewYamls.find(
+        element => element.uid === this.activeKey
+      );
+      return activeFile || { content: "", format: "yaml" };
+    },
+    showCopyBtn() {
+      if (this.visibleBtn.showCopyBtn) return true;
+      else return false;
+    },
+    showHideBtn() {
+      if (this.visibleBtn.showHideBtn) return true;
+      else return false;
+    },
+    showUpdateBtn() {
+      if (this.visibleBtn.showUpdateBtn) return true;
+      else return false;
+    },
+    showDownloadBtn() {
+      if (this.visibleBtn.showDownloadBtn) return true;
+      else return false;
+    },
+    showDeleteBtn() {
+      if (this.visibleBtn.showDeleteBtn) return true;
+      else return false;
+    }
+  },
+  methods: {
+    onCopy() {
+      this.$toasted.global.success("Value copied successfully").goAway(1000);
+    },
+    onError() {
+      this.$toasted.global.error("Copying failed").goAway(1000);
+    },
+    decode(str) {
+      if (str && this.toggleHideValue === false) return str.content;
+      else return "";
+    },
+    encode(str) {
+      if (str && this.toggleHideValue === false) return str.content;
+      else return "";
+    },
+    confirmDelete(flag) {
+      if (flag) this.$emit("deleteResource", this.activeKey);
+    },
+    setActiveKey(key) {
+      this.activeKey = key;
+      this.toggleHideValue = this.activeFile.isSecret;
+    }
+  },
+  watch: {
+    deleteModalStatus(n) {
+      if (n === "closed") this.showDeleteDataModal = false;
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <content-loader
+      :width="100"
+      :height="40"
+      :speed="2"
+      :primaryColor="primaryLoaderColor"
+      :secondaryColor="secondaryLoaderColor"
+    >
+      <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
+  },
+  props: {
+    primaryLoaderColor: {
+      type: String,
+      default: "#f5f7f9"
+    },
+    secondaryLoaderColor: {
+      type: String,
+      default: "#ecebeb"
+    }
+  }
+};
+</script>