@appscode/design-system 1.1.0 → 2.0.0

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

@@ -1,3 +1,7 @@
+<script setup lang="ts">
+import { ContentLoader } from "vue-content-loader";
+</script>
+
 <template>
   <div>
     <content-loader :width="200" :height="350" :speed="2">
@@ -20,15 +24,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/SingleInfoCardLoader.vue

@@ -0,0 +1,24 @@
+<script>
+import { ContentLoader } from "vue-content-loader";
+
+export default {
+  components: { ContentLoader },
+};
+</script>
+
+<template>
+  <content-loader
+    viewBox="0 0 1540 90"
+    :speed="2"
+    primaryColor="#f5f5f5"
+    secondaryColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="0" ry="0" />
+    <circle cx="47" cy="52" r="21" />
+    <rect x="86" y="64" rx="0" ry="0" width="95" height="11" />
+    <rect x="86" y="29" rx="0" ry="0" width="146" height="22" />
+    <rect x="1240" y="57" rx="0" ry="0" width="64" height="12" />
+    <rect x="1340" y="57" rx="0" ry="0" width="64" height="12" />
+    <rect x="1440" y="56" rx="0" ry="0" width="64" height="12" />
+  </content-loader>
+</template>

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

@@ -1,3 +1,88 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref, watch } from "vue";
+import { onClickOutside } from "@vueuse/core";
+
+interface Props {
+  open?: boolean;
+  title?: string;
+  modifierClasses?: string;
+  isCloseOptionDisabled?: boolean;
+  ignoreOutsideClick?: boolean;
+  hideActionFooter?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  open: false,
+  title: "Modal",
+  modifierClasses: "",
+  isCloseOptionDisabled: false,
+  ignoreOutsideClick: false,
+  hideActionFooter: false,
+});
+
+const emit = defineEmits(["closemodal"]);
+
+const HeaderItems = defineAsyncComponent(
+  () => import("./../header/HeaderItems.vue")
+);
+const HeaderItem = defineAsyncComponent(
+  () => import("./../header/HeaderItem.vue")
+);
+const Buttons = defineAsyncComponent(() => import("./../button/Buttons.vue"));
+const AcButton = defineAsyncComponent(() => import("./../button/Button.vue"));
+
+//TODO: need to update not a currect way to import the file
+const modalCloseIcon = import.meta.glob("../../../icons/close-icon.svg", {
+  eager: true,
+});
+
+const modal = ref();
+const showModal = ref(false);
+const crossIcon = ref(
+  (modalCloseIcon["../../../icons/close-icon.svg"] as Record<string, unknown>)
+    ?.default as string
+);
+
+const onKeyDown = (e: KeyboardEvent) => {
+  if (props.open && e.keyCode === 27) {
+    // escape key
+    destroyModal();
+  }
+};
+
+const initializeModal = () => {
+  showModal.value = true;
+  document.addEventListener("keydown", onKeyDown);
+};
+
+const onModalOutsideClick = () => {
+  if (props.ignoreOutsideClick) return;
+  destroyModal();
+};
+
+onClickOutside(modal, onModalOutsideClick);
+
+const destroyModal = () => {
+  if (props.isCloseOptionDisabled) return;
+  showModal.value = false;
+  document.removeEventListener("keydown", onKeyDown);
+
+  emit("closemodal", true);
+};
+
+watch(
+  () => props.open,
+  (n) => {
+    if (n) {
+      initializeModal();
+    } else {
+      destroyModal();
+    }
+  },
+  { immediate: true }
+);
+</script>
+
 <template>
   <teleport to="#modals">
     <!-- for transition https://github.com/adamwathan/vue-tailwind-examples/blob/master/src/components/Modal.vue -->
@@ -6,18 +91,17 @@
       v-if="showModal"
       class="ac-modal is-middle-alignment"
       :class="modifierClasses"
-      @click.self="onModalOutsideClick"
     >
-      <div class="ac-modal-inner">
+      <div ref="modal" class="ac-modal-inner">
         <!-- modal header start  -->
         <div class="ac-modal-header">
-          <h6>{{ title }}</h6>
+          <h5>{{ title }}</h5>
           <header-items>
             <slot name="modal-header-controls" />
             <header-item>
               <ac-button
+                v-if="!isCloseOptionDisabled"
                 modifier-classes="is-square is-transparent"
-                :disabled="isCloseOptionDisabled"
                 :icon-image="crossIcon"
                 @click.stop="destroyModal"
                 data-testid="modal-generic-close-icon"
@@ -58,101 +142,216 @@
   </teleport>
 </template>
 
-<script>
-import { defineComponent, defineAsyncComponent } from "vue";
+<style lang="scss" scoped>
+// modal start
+.ac-modal {
+  // position: relative;
+  min-height: 100vh;
+  position: fixed;
+  width: 100%;
+  left: 0;
+  top: 0;
+  z-index: 9999;
 
-const modalCloseIcon = import.meta.glob(
-  "/src/assets/icons/modal/close-icon.svg",
-  { eager: true }
-);
+  &:after {
+    position: absolute;
+    content: "";
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: $primary-5;
+    z-index: -1;
+    opacity: 0.5;
+  }
 
-export default defineComponent({
-  props: {
-    open: {
-      type: Boolean,
-      default: false,
-    },
-    title: {
-      type: String,
-      default: "Modal",
-    },
-    modifierClasses: {
-      type: String,
-      default: "",
-    },
-    isCloseOptionDisabled: {
-      type: Boolean,
-      default: false,
-    },
-    ignoreOutsideClick: {
-      type: Boolean,
-      default: false,
-    },
-    hideActionFooter: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ["closemodal"],
-
-  components: {
-    HeaderItems: defineAsyncComponent(() =>
-      import("../../v2/header/HeaderItems.vue").then((module) => module.default)
-    ),
-    HeaderItem: defineAsyncComponent(() =>
-      import("../../v2/header/HeaderItem.vue").then((module) => module.default)
-    ),
-    Buttons: defineAsyncComponent(() =>
-      import("../../v2/button/Buttons.vue").then((module) => module.default)
-    ),
-    AcButton: defineAsyncComponent(() =>
-      import("../button/Button.vue").then((module) => module.default)
-    ),
-  },
+  &.is-small {
+    .ac-modal-inner {
+      border-radius: 4px;
+      width: 446px;
+    }
+  }
 
-  data() {
-    return {
-      showModal: false,
-      crossIcon:
-        modalCloseIcon["/src/assets/icons/modal/close-icon.svg"].default,
-    };
-  },
+  &.is-normal {
+    .ac-modal-inner {
+      width: 518px;
+    }
+  }
+
+  &.is-medium {
+    .ac-modal-inner {
+      width: 800px;
+    }
+  }
 
-  watch: {
-    open: {
-      immediate: true,
-      handler(n) {
-        if (n) {
-          this.initializeModal();
-        } else {
-          this.destroyModal();
+  &.is-large {
+    .ac-modal-inner {
+      width: 1000px !important;
+    }
+  }
+
+  .ac-modal-inner {
+    margin: 0 auto;
+    background-color: $white-100;
+    border-radius: 4px;
+    overflow: hidden;
+    box-shadow: 12px 26px 118px rgba(0, 0, 0, 0.16);
+
+    .ac-modal-header {
+      background-color: $white-100;
+      padding: 10px 20px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border: 1px solid $primary-90;
+
+      h6 {
+        color: $primary-10;
+      }
+
+      .ms-close-button {
+        button {
+          cursor: pointer;
+          padding: 3px 5px;
+          color: $primary-10;
         }
-      },
-    },
-  },
+      }
+    }
+
+    .ac-modal-body {
+      padding: 20px;
+      max-height: calc(100vh - 230px);
+      overflow-y: auto;
 
-  methods: {
-    onKeyDown(e) {
-      if (this.open && e.keyCode === 27) {
-        // escape key
-        this.destroyModal();
+      .ac-modal-content {
+        img {
+          // width: 100%;
+          height: auto;
+        }
+
+        .action-message {
+          p {
+            font-size: 16px;
+            margin-bottom: 10px;
+
+            &:last-child {
+              margin-bottom: 0;
+            }
+
+            &.is-description {
+              font-weight: 400;
+              color: $primary-10;
+
+              strong {
+                font-weight: 500;
+              }
+            }
+          }
+        }
       }
-    },
-    initializeModal() {
-      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);
-
-      this.$emit("closemodal", true);
-    },
-  },
-});
-</script>
+    }
+
+    .ac-modal-footer {
+      border-top: 1px solid $primary-90;
+      padding: 10px 20px;
+    }
+  }
+}
+
+/****************************************
+Responsive Classes
+*****************************************/
+// Extra small devices (portrait phones, less than 576px)
+@media (max-width: 575.98px) {
+  .ac-modal {
+    &.is-small {
+      .ac-modal-inner {
+        width: 266px;
+      }
+    }
+
+    &.is-normal {
+      .ac-modal-inner {
+        width: calc(100% - 15px);
+      }
+    }
+
+    &.is-medium {
+      .ac-modal-inner {
+        width: calc(100% - 15px);
+      }
+    }
+
+    &.is-large {
+      .ac-modal-inner {
+        width: calc(100% - 15px);
+      }
+    }
+
+    .action-message.pt-35.pb-35 {
+      padding-top: 20px !important;
+      padding-bottom: 20px !important;
+    }
+  }
+}
+
+// Small devices (landscape phones, 576px and up)
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .ac-modal {
+    &.is-small {
+      .ac-modal-inner {
+        width: 266px;
+      }
+    }
+
+    &.is-normal {
+      .ac-modal-inner {
+        width: calc(100% - 15px);
+      }
+    }
+
+    &.is-medium {
+      .ac-modal-inner {
+        width: calc(100% - 15px);
+      }
+    }
+
+    &.is-large {
+      .ac-modal-inner {
+        width: calc(100% - 15px);
+      }
+    }
+  }
+}
+
+// Medium devices (tablets, 768px and up)
+@media (min-width: 768px) and (max-width: 991.98px) {
+  .ac-modal {
+    &.is-normal {
+      .ac-modal-inner {
+        width: calc(100% - 50px);
+      }
+    }
+
+    &.is-medium {
+      .ac-modal-inner {
+        width: calc(100% - 50px);
+      }
+    }
+
+    &.is-large {
+      .ac-modal-inner {
+        width: calc(100% - 50px);
+      }
+    }
+  }
+}
+
+// Large devices (desktops, 992px and up)
+@media (min-width: 992px) and (max-width: 1199.98px) {
+}
+
+// Extra large devices (large desktops, 1200px and up)
+@media (min-width: 1200px) {
+}
+</style>

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

@@ -1,5 +1,42 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+
+interface Props {
+  open?: boolean;
+  title?: string;
+  message?: string;
+  itemName?: string;
+  isLoading?: boolean;
+  isDeleteActive?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  open: false,
+  title: "",
+  message: "",
+  itemName: "",
+  isLoading: false,
+  isDeleteActive: false,
+});
+
+const emit = defineEmits(["closemodal", "delete-confirmation-modal$confirm"]);
+
+const confirm = (response: boolean) => {
+  emit("delete-confirmation-modal$confirm", response);
+};
+
+const closeModal = () => {
+  confirm(false);
+  emit("closemodal", true);
+};
+
+const Modal = defineAsyncComponent(() => import("./../modal/Modal.vue"));
+const AcButton = defineAsyncComponent(() => import("./../button/Button.vue"));
+</script>
+
 <template>
   <!-- modal start  -->
+
   <modal
     :title="title"
     modifier-classes="is-normal"
@@ -33,53 +70,3 @@
   </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

@@ -1,3 +1,65 @@
+<script setup lang="ts">
+import { computed, defineAsyncComponent } from "vue";
+import { useToast } from "vue-toastification";
+
+interface Props {
+  open?: boolean;
+  editorTitle?: string;
+  editorContent?: Record<string, unknown> | string | Array<any>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  open: false,
+  editorTitle: "",
+  editorContent: () => ({}),
+});
+
+const emit = defineEmits(["closemodal"]);
+
+const Modal = defineAsyncComponent(() => import("./../modal/Modal.vue"));
+const AcButton = defineAsyncComponent(() => import("./../button/Button.vue"));
+const HeaderItem = defineAsyncComponent(
+  () => import("./../header/HeaderItem.vue")
+);
+
+const Preloader = defineAsyncComponent(
+  () => import("./../preloader/Preloader.vue")
+);
+
+const Banner = defineAsyncComponent(() => import("./../banner/Banner.vue"));
+
+const Editor = defineAsyncComponent({
+  loader: () =>
+    import("./../editor/Editor.vue").then((module) => module.default),
+  loadingComponent: Preloader,
+  delay: 200,
+  errorComponent: Banner,
+  timeout: 100000,
+});
+
+const toast = useToast();
+
+const parsedContent = computed(() => {
+  try {
+    return JSON.parse(props.editorContent as string);
+  } catch (e) {
+    return props.editorContent;
+  }
+});
+
+const onCopy = () => {
+  toast.success("Value copied successfully", { timeout: 1000 });
+};
+
+const onError = () => {
+  toast.error("Copying failed", { timeout: 1000 });
+};
+
+const closeModal = () => {
+  emit("closemodal", true);
+};
+</script>
+
 <template>
   <modal
     :title="editorTitle"
@@ -23,74 +85,7 @@
       :read-only="true"
       language="json"
       :show-minimap="false"
+      word-wrap="on"
     />
   </modal>
 </template>
-
-<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
-    },
-    editorTitle: {
-      type: String,
-      default: ""
-    },
-    editorContent: {
-      type: null,
-      default: () => ({})
-    }
-  },
-  emits: ["closemodal"],
-  components: {
-    Modal: defineAsyncComponent(() =>
-      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)
-    ),
-    HeaderItem: defineAsyncComponent(() =>
-      import("../../v2/header/HeaderItem.vue").then(module => module.default)
-    )
-  },
-  computed: {
-    parsedContent() {
-      try {
-        return JSON.parse(this.editorContent);
-      } catch (e) {
-        return this.editorContent;
-      }
-    }
-  },
-  setup() {
-    const toast = useToast();
-    return { toast };
-  },
-  methods: {
-    onCopy() {
-      this.toast.success("Value copied successfully", { timeout: 1000 });
-    },
-    onError() {
-      this.toast.error("Copying failed", { timeout: 1000 });
-    },
-    closeModal() {
-      this.$emit("closemodal", true);
-    }
-  }
-});
-</script>