@appscode/design-system 0.0.21-alpha.2 → 0.4.27

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

@@ -0,0 +1,131 @@
+<template>
+  <div class="monaco-editor-vue3" :style="style"></div>
+</template>
+
+<script>
+import { defineComponent, computed, toRefs } from "vue";
+import * as monaco from "monaco-editor";
+
+export default defineComponent({
+  name: "MonacoEditor",
+  props: {
+    diffEditor: { type: Boolean, default: false },
+    width: { type: [String, Number], default: "100%" },
+    height: { type: [String, Number], default: "100%" },
+    original: String,
+    value: String,
+    language: { type: String, default: "javascript" },
+    theme: { type: String, default: "vs" },
+    options: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  emits: ["editorWillMount", "editorDidMount", "change"],
+  setup(props) {
+    const { width, height } = toRefs(props);
+    const style = computed(() => {
+      const fixedWidth = width.value.toString().includes("%")
+        ? width.value
+        : `${width.value}px`;
+      const fixedHeight = height.value.toString().includes("%")
+        ? height.value
+        : `${height.value}px`;
+      return {
+        width: fixedWidth,
+        height: fixedHeight,
+        "text-align": "left",
+      };
+    });
+    return {
+      style,
+    };
+  },
+  mounted() {
+    this.initMonaco();
+  },
+  beforeUnmount() {
+    this.editor && this.editor.dispose();
+  },
+  methods: {
+    initMonaco() {
+      this.$emit("editorWillMount", this.monaco);
+      const { value, language, theme, options } = this;
+      this.editor = monaco.editor[
+        this.diffEditor ? "createDiffEditor" : "create"
+      ](this.$el, {
+        value: value,
+        language: language,
+        theme: theme,
+        ...options,
+      });
+      this.diffEditor && this._setModel(this.value, this.original);
+
+      // @event `change`
+      const editor = this._getEditor();
+      editor.onDidChangeModelContent((event) => {
+        const value = editor.getValue();
+        if (this.value !== value) {
+          this.$emit("change", value, event);
+        }
+      });
+
+      this.$emit("editorDidMount", this.editor);
+    },
+    _setModel(value, original) {
+      const { language } = this;
+      const originalModel = monaco.editor.createModel(original, language);
+      const modifiedModel = monaco.editor.createModel(value, language);
+      this.editor.setModel({
+        original: originalModel,
+        modified: modifiedModel,
+      });
+    },
+    _setValue(value) {
+      let editor = this._getEditor();
+      if (editor) return editor.setValue(value);
+    },
+    _getValue() {
+      let editor = this._getEditor();
+      if (!editor) return "";
+      return editor.getValue();
+    },
+    _getEditor() {
+      if (!this.editor) return null;
+      return this.diffEditor ? this.editor.getModifiedEditor() : this.editor;
+    },
+    _setOriginal() {
+      const { original } = this.editor.getModel();
+      original.setValue(this.original);
+    },
+  },
+  watch: {
+    options: {
+      deep: true,
+      handler(options) {
+        this.editor.updateOptions(options);
+      },
+    },
+    value() {
+      this.value !== this._getValue() && this._setValue(this.value);
+    },
+    original() {
+      this._setOriginal();
+    },
+    language() {
+      if (!this.editor) return;
+      if (this.diffEditor) {
+        const { original, modified } = this.editor.getModel();
+        monaco.editor.setModelLanguage(original, this.language);
+        monaco.editor.setModelLanguage(modified, this.language);
+      } else
+        monaco.editor.setModelLanguage(this.editor.getModel(), this.language);
+    },
+    theme() {
+      monaco.editor.setTheme(this.theme);
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,125 @@
+<template>
+  <content-table
+    :table-title="title"
+    :searchable="isSearchable"
+    :hide-header="hideHeader"
+  >
+    <template #content-right-controls>
+      <header-item v-if="showHideBtn">
+        <ac-button
+          modifier-classes="is-square is-primary"
+          :icon-class="toggleHideValue ? 'eye-slash' : 'eye'"
+          :disabled="previewYamls.length === 0"
+          @click.prevent="toggleHideValue = !toggleHideValue"
+        />
+      </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"
+        @setActiveKey="setActiveKey"
+      />
+    </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/form/Form.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="form-wrapper">
+    <div
+      :class="{
+        'pt-20': !reducePaddingTop,
+        'pt-10': reducePaddingTop,
+        'pl-20': !isContainer,
+        'form-content': !isContainer,
+        container: isContainer,
+      }"
+    >
+      <slot />
+    </div>
+    <div
+      class="form-footer b-t-1 pt-10 pb-10 pl-20 pr-20 mt-15"
+      v-if="hasFooter"
+    >
+      <div
+        class="ac-vcentered"
+        :class="{
+          'form-content': !isContainer,
+          container: isContainer,
+        }"
+      >
+        <form-footer-controls>
+          <slot name="form-left-controls" />
+        </form-footer-controls>
+        <form-footer-controls>
+          <slot name="form-right-controls" />
+        </form-footer-controls>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent, h } from "vue";
+
+export default defineComponent({
+  props: {
+    isContainer: {
+      type: Boolean,
+      default: false,
+    },
+    hasFooter: {
+      type: Boolean,
+      default: true,
+    },
+    reducePaddingTop: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  components: {
+    FormFooterControls: defineAsyncComponent(() =>
+      import("../../v2/form/FormFooterControl.vue").then(
+        (module) => module.default
+      )
+    ),
+  },
+});
+</script>

package/vue-components/v3/form-fields/Input.vue

@@ -0,0 +1,22 @@
+<template>
+  <input
+    class="ac-input"
+    data-testid="ac-input"
+    :value="modelValue"
+    @input="$emit('update:modelValue', $event.target.value)"
+  />
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: null,
+      default: "",
+    },
+  },
+  emits: ["update:modelValue"],
+});
+</script>

package/vue-components/v3/header/Header.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="inner-header">
+    <div
+      class="is-flex is-justify-content-space-between"
+      :class="{ container: isContainer }"
+    >
+      <header-items>
+        <header-item>
+          <transition name="fade" mode="out-in" appear>
+            <h5 :key="title">{{ title }}</h5>
+          </transition>
+        </header-item>
+        <slot name="header-left-controls" />
+      </header-items>
+      <header-items>
+        <slot />
+      </header-items>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+      default: "No Title",
+    },
+    isContainer: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {
+    HeaderItems: defineAsyncComponent(() =>
+      import("../../v2/header/HeaderItems.vue").then((module) => module.default)
+    ),
+    HeaderItem: defineAsyncComponent(() =>
+      import("../../v2/header/HeaderItem.vue").then((module) => module.default)
+    ),
+  },
+});
+</script>

package/vue-components/v3/header/HeaderItem.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="header-item">
+    <slot />
+  </div>
+</template>

package/vue-components/v3/header/HeaderItems.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="header-items is-flex is-align-items-center">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <content-loader>
+      <rect x="21" y="6" rx="3" ry="3" width="42" height="3" />
+      <rect x="69" y="6" rx="3" ry="3" width="39" height="3" />
+      <rect x="114" y="6" rx="3" ry="3" width="24" height="3" />
+
+      <rect x="39" y="12" rx="3" ry="3" width="24" height="3" />
+      <rect x="69" y="12" rx="3" ry="3" width="45" height="3" />
+      <rect x="120" y="12" rx="3" ry="3" width="12" height="3" />
+
+      <rect x="39" y="18" rx="3" ry="3" width="30" height="3" />
+      <rect x="75" y="18" rx="3" ry="3" width="60" height="3" />
+
+      <rect x="21" y="27" rx="3" ry="3" width="42" height="3" />
+      <rect x="69" y="27" rx="3" ry="3" width="39" height="3" />
+      <rect x="114" y="27" rx="3" ry="3" width="24" height="3" />
+
+      <rect x="39" y="33" rx="3" ry="3" width="24" height="3" />
+      <rect x="69" y="33" rx="3" ry="3" width="45" height="3" />
+      <rect x="120" y="33" rx="3" ry="3" width="12" height="3" />
+
+      <rect x="39" y="39" rx="3" ry="3" width="30" height="3" />
+      <rect x="75" y="39" rx="3" ry="3" width="60" height="3" />
+
+      <rect x="21" y="48" rx="3" ry="3" width="42" height="3" />
+      <rect x="69" y="48" rx="3" ry="3" width="39" height="3" />
+      <rect x="114" y="48" rx="3" ry="3" width="24" height="3" />
+
+      <rect x="39" y="54" rx="3" ry="3" width="24" height="3" />
+      <rect x="69" y="54" rx="3" ry="3" width="45" height="3" />
+      <rect x="120" y="54" rx="3" ry="3" width="12" height="3" />
+
+      <rect x="39" y="60" rx="3" ry="3" width="30" height="3" />
+      <rect x="75" y="60" rx="3" ry="3" width="60" height="3" />
+
+      <rect x="21" y="69" rx="3" ry="3" width="42" height="3" />
+      <rect x="69" y="69" rx="3" ry="3" width="39" height="3" />
+      <rect x="114" y="69" rx="3" ry="3" width="24" height="3" />
+
+      <rect x="39" y="75" rx="3" ry="3" width="24" height="3" />
+      <rect x="69" y="75" rx="3" ry="3" width="45" height="3" />
+      <rect x="120" y="75" rx="3" ry="3" width="12" height="3" />
+
+      <rect x="39" y="81" rx="3" ry="3" width="30" height="3" />
+      <rect x="75" y="81" rx="3" ry="3" width="60" height="3" />
+
+      <rect x="21" y="90" rx="3" ry="3" width="42" height="3" />
+      <rect x="69" y="90" rx="3" ry="3" width="39" height="3" />
+      <rect x="114" y="90" rx="3" ry="3" width="24" height="3" />
+
+      <rect x="39" y="96" rx="3" ry="3" width="24" height="3" />
+      <rect x="69" y="96" rx="3" ry="3" width="45" height="3" />
+      <rect x="120" y="96" rx="3" ry="3" width="12" height="3" />
+
+      <rect x="39" y="102" rx="3" ry="3" width="30" height="3" />
+      <rect x="75" y="102" rx="3" ry="3" width="60" height="3" />
+
+      <rect x="21" y="111" rx="3" ry="3" width="42" height="3" />
+      <rect x="69" y="111" rx="3" ry="3" width="39" height="3" />
+      <rect x="114" y="111" rx="3" ry="3" width="24" height="3" />
+
+      <rect x="39" y="117" rx="3" ry="3" width="24" height="3" />
+      <rect x="69" y="117" rx="3" ry="3" width="45" height="3" />
+      <rect x="120" y="117" rx="3" ry="3" width="12" height="3" />
+
+      <rect x="39" y="123" rx="3" ry="3" width="30" height="3" />
+      <rect x="75" y="123" rx="3" ry="3" width="60" height="3" />
+    </content-loader>
+  </div>
+</template>
+
+<script>
+  import { defineAsyncComponent, defineComponent } from 'vue'
+  export default defineComponent({
+    name: 'LoaderElement',
+    components: {
+      ContentLoader: defineAsyncComponent(() =>
+        import('vue-content-loader').then((module) => module.ContentLoader)
+      ),
+    },
+  })
+</script>

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

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <content-loader :width="200" :height="350" :speed="2">
+      <rect x="0" y="24" rx="3" ry="3" width="200" height="20" />
+      <rect x="20" y="49" rx="3" ry="3" width="200" height="20" />
+      <rect x="20" y="74" rx="3" ry="3" width="200" height="20" />
+      <rect x="20" y="124" rx="3" ry="3" width="200" height="20" />
+
+      <rect x="0" y="149" rx="3" ry="3" width="200" height="20" />
+      <rect x="20" y="174" rx="3" ry="3" width="200" height="20" />
+      <rect x="20" y="199" rx="3" ry="3" width="200" height="20" />
+      <rect x="20" y="249" rx="3" ry="3" width="200" height="20" />
+
+      <rect x="0" y="274" rx="3" ry="3" width="200" height="20" />
+      <rect x="20" y="299" rx="3" ry="3" width="200" height="20" />
+      <rect x="20" y="324" rx="3" ry="3" width="200" height="20" />
+      <rect x="20" y="349" rx="3" ry="3" width="200" height="20" />
+
+      <rect x="0" y="374" rx="3" ry="3" width="200" height="20" />
+    </content-loader>
+  </div>
+</template>
+
+<script>
+  import { defineAsyncComponent, defineComponent } from 'vue'
+  export default defineComponent({
+    name: 'LoaderElement',
+    components: {
+      ContentLoader: defineAsyncComponent(() =>
+        import('vue-content-loader').then((module) => module.ContentLoader)
+      ),
+    },
+  })
+</script>

package/vue-components/v3/long-running-tasks/LongRunningTaskItem.vue

@@ -0,0 +1,92 @@
+<template>
+  <span href="" class="task-item" :class="[statusClass]">
+    <i class="fa" :class="`fa-${statusIcon}`" />
+    {{ title }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed, toRefs } from "vue";
+import { TaskStatus } from "../../../typings/long-running-tasks.ts";
+
+const props = withDefaults(
+  defineProps<{ title: string; status: TaskStatus }>(),
+  {
+    title: "",
+    status: "Pending",
+  }
+);
+
+const { status } = toRefs(props);
+const statusClass = computed(() => `is-${status.value.toLowerCase()}`);
+const statusIcon = computed(() => {
+  if (status.value === "Running" || status.value === "Started")
+    return "circle-o-notch";
+  else if (status.value === "Success") return "check-circle";
+  else if (status.value === "Failed") return "times-circle";
+  else return "spinner";
+});
+</script>
+
+<style scoped lang="scss">
+.task-item {
+  font-size: 14px;
+  display: block;
+  padding: 5px;
+  border-radius: 5px;
+  transition: all 0.3s ease-in-out;
+  &:hover {
+    background-color: var(--ac-white-light);
+    cursor: pointer;
+  }
+  &.is-active {
+    background-color: var(--ac-white-light);
+  }
+  &.is-pending {
+    color: var(--ac-gray-light);
+    i {
+      visibility: hidden;
+    }
+    &:hover {
+      background-color: transparent;
+      cursor: not-allowed;
+    }
+  }
+  &.is-aborted {
+    color: var(--ac-gray-light);
+    &:hover {
+      background-color: transparent;
+      cursor: not-allowed;
+    }
+  }
+  &.is-running,
+  &.is-started {
+    i {
+      color: var(--ac-primary);
+      animation-name: spin;
+      animation-duration: 1000ms;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
+    }
+
+    @keyframes spin {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  }
+  &.is-success {
+    i {
+      color: #158748;
+    }
+  }
+  &.is-failed {
+    i {
+      color: #ff3729;
+    }
+  }
+}
+</style>