@appscode/design-system 1.0.43-alpha.20 → 1.0.43-alpha.201

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

@@ -1,21 +1,22 @@
 <template>
-  <input class="ac-input" v-bind="inputListeners" />
+  <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({
-  inheritAttrs: false,
-  emits: ["update:modelValue"],
-  computed: {
-    inputListeners() {
-      return Object.assign({}, this.$attrs, {
-        onInput: (event) => {
-          this.$emit("update:modelValue", event.target.value);
-        },
-      });
+  props: {
+    modelValue: {
+      type: null,
+      default: "",
     },
   },
+  emits: ["update:modelValue"],
 });
 </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>

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

@@ -6,7 +6,7 @@
       v-if="showModal"
       class="ac-modal is-middle-alignment"
       :class="modifierClasses"
-      @click.self="destroyModal"
+      @click.self="onModalOutsideClick"
     >
       <div class="ac-modal-inner">
         <!-- modal header start  -->
@@ -17,8 +17,10 @@
             <header-item>
               <ac-button
                 modifier-classes="is-square is-transparent"
+                :disabled="isCloseOptionDisabled"
                 :icon-image="crossIcon"
                 @click.stop="destroyModal"
+                data-testid="modal-generic-close-icon"
               />
             </header-item>
           </header-items>
@@ -26,7 +28,10 @@
         <!-- modal header end -->
 
         <!-- modal body start  -->
-        <div class="ac-modal-body">
+        <div
+          class="ac-modal-body ac-vscrollbar"
+          data-testid="ac-modal-content-with-scroll"
+        >
           <div class="ac-modal-content">
             <!-- freedom content start  -->
             <slot />
@@ -36,7 +41,17 @@
         <!-- modal body end  -->
 
         <!-- modal footer start -->
-        <div class="ac-modal-footer action-footer">
+        <div
+          v-if="!hideActionFooter"
+          class="
+            ac-modal-footer
+            action-footer
+            is-flex is-align-items-center is-justify-content-space-between
+          "
+        >
+          <div>
+            <slot name="modal-footer-left" />
+          </div>
           <buttons class="has-text-right is-block">
             <slot name="modal-footer-controls" />
           </buttons>
@@ -64,6 +79,18 @@ export default defineComponent({
       type: String,
       default: "",
     },
+    isCloseOptionDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    ignoreOutsideClick: {
+      type: Boolean,
+      default: false,
+    },
+    hideActionFooter: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ["closemodal"],
 
@@ -115,7 +142,12 @@ export default defineComponent({
       this.showModal = true;
       document.addEventListener("keydown", this.onKeyDown);
     },
+    onModalOutsideClick() {
+      if (this.ignoreOutsideClick) return;
+      this.destroyModal();
+    },
     destroyModal() {
+      if (this.isCloseOptionDisabled) return;
       this.showModal = false;
       document.removeEventListener("keydown", this.onKeyDown);
 

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

@@ -0,0 +1,85 @@
+<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"
+        data-testid="delete-confirmation-modal-close-button"
+      />
+      <ac-button
+        modifier-classes="is-danger"
+        :is-loader-active="isDeleteActive"
+        title="Yes"
+        @click.stop="confirm(true)"
+        data-testid="delete-confirmation-modal-confirm-button"
+      />
+    </template>
+  </modal>
+  <!-- modal end  -->
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+export default defineComponent({
+  components: {
+    Modal: defineAsyncComponent(() =>
+      import("../modal/Modal.vue").then((module) => module.default)
+    ),
+    AcButton: defineAsyncComponent(() =>
+      import("../button/Button.vue").then((module) => module.default)
+    ),
+  },
+  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,
+    },
+  },
+  emits: ["closemodal", "delete-confirmation-modal$confirm"],
+  methods: {
+    confirm(response) {
+      this.$emit("delete-confirmation-modal$confirm", response);
+    },
+    closeModal() {
+      this.confirm(false);
+      this.$emit("closemodal", true);
+    },
+  },
+});
+</script>

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

@@ -10,14 +10,16 @@
         <ac-button
           modifier-classes="is-square is-primary"
           icon-class="copy"
-          v-clipboard:copy="`${editorTitle}: &quot;${editorContent}&quot;`"
+          v-clipboard:copy="
+            `${editorTitle}: ${JSON.stringify(parsedContent, null, 4)}`
+          "
           v-clipboard:success="onCopy"
           v-clipboard:error="onError"
         />
       </header-item>
     </template>
     <editor
-      :value="JSON.stringify(parsedContent, null, 4)"
+      :model-value="JSON.stringify(parsedContent, null, 4)"
       :read-only="true"
       language="json"
       :show-minimap="false"
@@ -28,36 +30,43 @@
 <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: {
     open: {
       type: Boolean,
-      default: false,
+      default: false
     },
     editorTitle: {
       type: String,
-      default: "",
+      default: ""
     },
     editorContent: {
       type: null,
-      default: () => ({}),
-    },
+      default: () => ({})
+    }
   },
   emits: ["closemodal"],
   components: {
     Modal: defineAsyncComponent(() =>
-      import("../modal/Modal.vue").then((module) => module.default)
-    ),
-    Editor: defineAsyncComponent(() =>
-      import("../editor/Editor.vue").then((module) => module.default)
+      import("../modal/Modal.vue").then(module => module.default)
     ),
+    Editor: defineAsyncComponent({
+      loader: () =>
+        import("../editor/Editor.vue").then(module => module.default),
+      loadingComponent: Preloader,
+      delay: 200,
+      errorComponent: Banner,
+      timeout: 100000,
+    }),
     AcButton: defineAsyncComponent(() =>
-      import("../button/Button.vue").then((module) => module.default)
+      import("../button/Button.vue").then(module => module.default)
     ),
     HeaderItem: defineAsyncComponent(() =>
-      import("../../v2/header/HeaderItem.vue").then((module) => module.default)
-    ),
+      import("../../v2/header/HeaderItem.vue").then(module => module.default)
+    )
   },
   computed: {
     parsedContent() {
@@ -66,7 +75,7 @@ export default defineComponent({
       } catch (e) {
         return this.editorContent;
       }
-    },
+    }
   },
   setup() {
     const toast = useToast();
@@ -81,7 +90,7 @@ export default defineComponent({
     },
     closeModal() {
       this.$emit("closemodal", true);
-    },
-  },
+    }
+  }
 });
 </script>