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

package/vue-components/v3/editor/Editor.vue

@@ -1,3 +1,103 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref, computed, watch } from "vue";
+
+interface Props {
+  modelValue?: string;
+  originalValue?: string;
+  readOnly?: boolean;
+  language?: string;
+  showMinimap?: boolean;
+  editorHeight?: number;
+  editorTheme?: string;
+  wordWrap?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: "",
+  originalValue: "",
+  readOnly: false,
+  language: "",
+  showMinimap: false,
+  editorHeight: 40,
+  editorTheme: "",
+  wordWrap: "off",
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const EditorTabs = defineAsyncComponent(() => import("../tabs/EditorTabs.vue"));
+
+const Preloader = defineAsyncComponent(
+  () => import("../preloader/Preloader.vue")
+);
+
+const Banner = defineAsyncComponent(() => import("../banner/Banner.vue"));
+
+const MonacoEditor = defineAsyncComponent({
+  loader: () => import("./MonacoEditor.vue"),
+
+  loadingComponent: Preloader,
+  delay: 200,
+  errorComponent: Banner,
+  timeout: 100000,
+});
+
+const activeTab = ref("edit");
+const editorContent = ref("");
+const originalEditorContent = ref("");
+
+const calcShowMinimap = computed(() => {
+  const noOfLines = editorContent.value.split("\n").length;
+  return props.showMinimap && noOfLines * 2 > props.editorHeight;
+});
+
+const theme = computed(() => {
+  return (
+    props.editorTheme ||
+    (document.documentElement.classList.contains("is-dark-theme")
+      ? "vs-dark"
+      : "vs")
+  );
+});
+
+const onChange = (e: Event) => {
+  if (typeof e === "string") editorContent.value = e;
+};
+
+const onEditorMount = (editor: Record<string, unknown>) => {
+  // add event listeners
+  if (editor.onDidBlurEditorText instanceof Function) {
+    editor.onDidBlurEditorText(() => {
+      emit("update:modelValue", editorContent.value);
+    });
+  }
+};
+
+watch(
+  () => props.modelValue,
+  (n) => {
+    if (editorContent.value !== n) {
+      editorContent.value = n;
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+
+watch(
+  () => props.originalValue,
+  (n) => {
+    if (originalEditorContent.value !== n) {
+      originalEditorContent.value = n;
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+</script>
+
 <template>
   <div>
     <editor-tabs
@@ -45,116 +145,3 @@
     />
   </div>
 </template>
-
-<script>
-import { defineComponent, defineAsyncComponent, h } from "vue";
-import Preloader from "../../v2/preloader/Preloader.vue";
-import Banner from "../../v2/banner/Banner.vue";
-export default defineComponent({
-  props: {
-    modelValue: {
-      type: String,
-      default: "",
-    },
-    originalValue: {
-      type: String,
-      default: "",
-    },
-    readOnly: {
-      type: Boolean,
-      default: false,
-    },
-    language: {
-      type: String,
-      default: "yaml",
-    },
-    showMinimap: {
-      type: Boolean,
-      default: true,
-    },
-    editorHeight: {
-      type: Number,
-      default: 40,
-    },
-    editorTheme: {
-      type: String,
-      default: "",
-    },
-    wordWrap: {
-      type: String,
-      default: "off",
-    },
-  },
-
-  emits: ["update:modelValue"],
-
-  components: {
-    EditorTabs: defineAsyncComponent(() =>
-      import("../tabs/EditorTabs.vue").then((module) => module.default)
-    ),
-    MonacoEditor: defineAsyncComponent({
-      loader: () =>
-        import("./MonacoEditor.vue").then((module) => module.default),
-
-      loadingComponent: Preloader,
-      delay: 200,
-      errorComponent: Banner,
-      timeout: 100000,
-    }),
-  },
-
-  data() {
-    return {
-      activeTab: "edit",
-      editorContent: "",
-      originalEditorContent: "",
-    };
-  },
-
-  computed: {
-    calcShowMinimap() {
-      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: {
-    modelValue: {
-      immediate: true,
-      handler(n) {
-        if (this.editorContent !== n) {
-          this.editorContent = n;
-        }
-      },
-    },
-    originalValue: {
-      immediate: true,
-      handler(n) {
-        if (this.originalEditorContent !== n) {
-          this.originalEditorContent = n;
-        }
-      },
-    },
-  },
-
-  methods: {
-    onChange(e) {
-      if (typeof e === "string") this.editorContent = e;
-    },
-    onEditorMount(editor) {
-      // add event listeners
-      editor.onDidBlurEditorText(() => {
-        this.$emit("update:modelValue", this.editorContent);
-      });
-    },
-  },
-});
-</script>

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

@@ -1,3 +1,126 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref, watch, computed } from "vue";
+import type { PreviewYamlType } from "../../types/previewYaml";
+
+interface Props {
+  searchText?: string;
+  toggleHideValue?: boolean;
+  isPreviewLoading?: boolean;
+  isEditorReadOnly?: boolean;
+  previewYamls?: Array<PreviewYamlType>;
+  showMinimap?: boolean;
+  editorHeight?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  searchText: "",
+  toggleHideValue: true,
+  isPreviewLoading: false,
+  isEditorReadOnly: false,
+  previewYamls: () => [],
+  showMinimap: false,
+  editorHeight: 60,
+});
+
+const emit = defineEmits(["setActiveKey"]);
+
+const Banner = defineAsyncComponent(() => import("../banner/Banner.vue"));
+const Preloader = defineAsyncComponent(
+  () => import("../preloader/Preloader.vue")
+);
+const Editor = defineAsyncComponent({
+  loader: () => import("../editor/Editor.vue"),
+  loadingComponent: Preloader,
+  delay: 200,
+  errorComponent: Banner,
+  timeout: 100000,
+});
+const ResourceLoader = defineAsyncComponent(
+  () => import("../loaders/ResourceLoader.vue")
+);
+
+const SidebarLoader = defineAsyncComponent(
+  () => import("../loaders/SidebarLoader.vue")
+);
+
+const activeKey = ref("");
+const hideValue = ref(false);
+
+const filteredYamls = computed(() => {
+  if (props.searchText) {
+    return props.previewYamls.filter(
+      (element) => JSON.stringify(element).search(props.searchText) > -1
+    );
+  } else return props.previewYamls;
+});
+
+const activeFile = computed(() => {
+  const activeFile = filteredYamls.value.find(
+    (element) => element.uid === activeKey.value
+  );
+  return activeFile || { content: "", type: "yaml", isSecret: false };
+});
+
+const originalValue = computed(() => {
+  const activeFile = filteredYamls.value.find(
+    (element) => element.uid === activeKey.value
+  );
+  return (activeFile && activeFile.initContent) || "";
+});
+
+const isKeyAvailable = computed(() => {
+  const val = props.previewYamls.find((element) => {
+    return element.uid === activeKey.value;
+  });
+  return val === undefined ? false : true;
+});
+
+const isYamlsEmpty = computed(() => {
+  return filteredYamls.value.length === 0;
+});
+
+const isYamlsNotSelected = computed(() => {
+  const val = filteredYamls.value.find((element) => {
+    return element.uid === activeKey.value;
+  });
+  return val === undefined;
+});
+
+const initActivePreview = () => {
+  if (!isKeyAvailable.value) {
+    activeKey.value = props.previewYamls[0].uid;
+    hideValue.value = activeFile.value.isSecret;
+    emit("setActiveKey", activeKey.value);
+  }
+};
+
+const setActivePreview = (uid: string) => {
+  activeKey.value = uid;
+  hideValue.value = activeFile.value.isSecret;
+  emit("setActiveKey", activeKey.value);
+};
+
+watch(
+  () => props.previewYamls,
+  (n) => {
+    if (n.length) {
+      initActivePreview();
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
+
+watch(
+  () => props.toggleHideValue,
+  (n) => {
+    hideValue.value = n;
+  }
+);
+</script>
+
 <template>
   <div class="ac-preview is-active is-not-fixed">
     <div class="ac-preview-inner">
@@ -47,7 +170,7 @@
               v-else
               v-model="activeFile.content"
               :original-value="originalValue"
-              :language="activeFile.format"
+              :language="activeFile.type"
               :read-only="isEditorReadOnly"
               :editor-height="editorHeight"
               :show-minimap="showMinimap"
@@ -58,129 +181,3 @@
     </div>
   </div>
 </template>
-<script>
-import { defineComponent, defineAsyncComponent } from "vue";
-import Preloader from "../../v2/preloader/Preloader.vue";
-import Banner from "../../v2/banner/Banner.vue";
-export default defineComponent({
-  components: {
-    Editor: defineAsyncComponent({
-      loader: () =>
-        import("../editor/Editor.vue").then((module) => module.default),
-      loadingComponent: Preloader,
-      delay: 200,
-      errorComponent: Banner,
-      timeout: 100000,
-    }),
-    ResourceLoader: defineAsyncComponent(() =>
-      import("../loaders/ResourceLoader.vue")
-    ),
-    SidebarLoader: defineAsyncComponent(() =>
-      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,
-    },
-  },
-  emits: ["setActiveKey"],
-  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) || "";
-    },
-    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;
-    },
-    isYamlsEmpty() {
-      return this.filteredYamls.length === 0;
-    },
-    isYamlsNotSelected() {
-      const val = this.filteredYamls.find((element) => {
-        return element.uid === this.activeKey;
-      });
-      return val === undefined;
-    },
-  },
-  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/v3/editor/ResourceKeyValueEditor.vue

@@ -1,3 +1,73 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref, watch, computed } from "vue";
+import type { PreviewYamlType } from "../../types/previewYaml";
+
+interface Props {
+  title?: string;
+  isSearchable?: boolean;
+  isPreviewLoading?: boolean;
+  isEditorReadOnly?: boolean;
+  previewYamls?: Array<PreviewYamlType>;
+  showHideBtn?: boolean;
+  showMinimap?: boolean;
+  isUpdateActive?: boolean;
+  deleteModalStatus?: string;
+  editorHeight?: number;
+  hideHeader?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: "Title",
+  isSearchable: false,
+  isPreviewLoading: false,
+  isEditorReadOnly: false,
+  previewYamls: () => [],
+  showHideBtn: false,
+  showMinimap: false,
+  isUpdateActive: false,
+  deleteModalStatus: "closed",
+  editorHeight: 60,
+  hideHeader: false,
+});
+
+const emit = defineEmits(["activeKey"]);
+
+const AcButton = defineAsyncComponent(() => import("../button/Button.vue"));
+const ContentTable = defineAsyncComponent(
+  () => import("../content/ContentTable.vue")
+);
+const HeaderItem = defineAsyncComponent(
+  () => import("../header/HeaderItem.vue")
+);
+
+const FilteredFileEditor = defineAsyncComponent(
+  () => import("../editor/FilteredFileEditor.vue")
+);
+
+const activeKey = ref("");
+const toggleHideValue = ref(false);
+
+const activeFile = computed(() => {
+  const activeFile = props.previewYamls.find(
+    (element) => element.uid === activeKey.value
+  );
+  return activeFile || { content: "", type: "yaml", isSecret: false };
+});
+
+const setActiveKey = (key: string) => {
+  activeKey.value = key;
+  toggleHideValue.value = activeFile.value.isSecret;
+};
+
+watch(
+  activeKey,
+  (n) => {
+    emit("activeKey", n);
+  },
+  { immediate: true }
+);
+</script>
+
 <template>
   <content-table
     :table-title="title"
@@ -29,97 +99,3 @@
     </template>
   </content-table>
 </template>
-<script>
-import { defineComponent, defineAsyncComponent } from "vue";
-export default defineComponent({
-  components: {
-    AcButton: defineAsyncComponent(() => import("../button/Button.vue")),
-    ContentTable: defineAsyncComponent(() =>
-      import("../content/ContentTable.vue")
-    ),
-    HeaderItem: defineAsyncComponent(() => import("../header/HeaderItem.vue")),
-    FilteredFileEditor: defineAsyncComponent(() =>
-      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: () => {
-        [];
-      }
-    },
-    showHideBtn: {
-      type: Boolean,
-      default: false,
-    },
-    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
-    }
-  },
-  emits: ["activeKey"],
-  data() {
-    return {
-      activeKey: "",
-      toggleHideValue: "",
-      showDeleteDataModal: false
-    };
-  },
-  computed: {
-    activeFile() {
-      const activeFile = this.previewYamls.find(
-        element => element.uid === this.activeKey
-      );
-      return activeFile || { content: "", format: "yaml" };
-    },
-  },
-  methods: {
-    setActiveKey(key) {
-      this.activeKey = key;
-      this.toggleHideValue = this.activeFile.isSecret;
-    }
-  },
-  watch: {
-    activeKey:{
-      immediate: true,
-      handler(n){
-        this.$emit("activeKey",this.activeKey);
-      }
-    }
-    
-  }
-});
-</script>

package/vue-components/v3/footer/FooterArea.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup></script>
+<template>
+  <div class="footer-area">
+    <div class="footer-left">
+      <slot name="footer-left" />
+    </div>
+    <div class="footer-right">
+      <slot name="footer-right" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.footer-area {
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: calc(100% - 250px);
+  min-height: 30px;
+  padding: 0 20px;
+  background: $primary-20;
+  border-top: 1px solid $primary-90;
+  z-index: 99;
+}
+
+.footer-left,
+.footer-right {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+}
+</style>

package/vue-components/v3/footer/FooterItem.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+interface Props {
+  modifierClasses?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  modifierClasses: "",
+});
+</script>
+
+<template>
+  <div class="footer-item" :class="modifierClasses">
+    <slot />
+  </div>
+</template>
+
+<style lang="scss">
+.footer-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 500;
+  color: $primary-90;
+  font-size: 12px;
+  &.has-text-danger {
+    color: $red-80 !important;
+  }
+  &.has-text-success {
+    color: $green-50 !important;
+  }
+}
+</style>