@appscode/design-system 1.1.0-alpha.8 → 1.1.0-beta.2

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

@@ -1,5 +1,9 @@
+<script setup lang="ts"></script>
+
 <template>
   <div class="header-items is-flex is-align-items-center">
     <slot />
   </div>
 </template>
+
+<style lang="scss" scoped></style>

package/vue-components/v3/icons/Ellipsis.vue

@@ -0,0 +1,2 @@
+<script setup lang="ts"></script>
+<template><span>More...</span></template>

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

@@ -1,3 +1,7 @@
+<script setup lang="ts">
+import { ContentLoader } from "vue-content-loader";
+</script>
+
 <template>
   <div>
     <content-loader>
@@ -69,15 +73,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

@@ -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/long-running-tasks/LongRunningTaskItem.vue

@@ -1,21 +1,16 @@
-<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";
+import type { TaskStatus } from "./../../types/longRunningTasks";
 
-const props = withDefaults(
-  defineProps<{ title: string; status: TaskStatus }>(),
-  {
-    title: "",
-    status: "Pending",
-  }
-);
+interface Props {
+  title?: string;
+  status?: TaskStatus;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: "no title",
+  status: "Pending",
+});
 
 const { status } = toRefs(props);
 const statusClass = computed(() => `is-${status.value.toLowerCase()}`);
@@ -28,6 +23,13 @@ const statusIcon = computed(() => {
 });
 </script>
 
+<template>
+  <span href="" class="task-item" :class="[statusClass]">
+    <i class="fa" :class="`fa-${statusIcon}`" />
+    {{ title }}
+  </span>
+</template>
+
 <style scoped lang="scss">
 .task-item {
   font-size: 14px;

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

@@ -1,3 +1,89 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref, watch } from "vue";
+
+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(
+  "/src/assets/icons/modal/close-icon.svg",
+  { eager: true }
+);
+
+const showModal = ref(false);
+const crossIcon = ref(
+  (
+    modalCloseIcon["/src/assets/icons/modal/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();
+};
+
+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 -->
@@ -30,7 +116,6 @@
         <!-- modal body start  -->
         <div
           class="ac-modal-body ac-vscrollbar"
-          :class="modifierBodyClasses"
           data-testid="ac-modal-content-with-scroll"
         >
           <div class="ac-modal-content">
@@ -59,105 +144,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,
-    },
-    modifierBodyClasses: {
-      type: String,
-      default: "",
-    },
-  },
-  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;
+    }
+  }
+
+  &.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;
+      }
 
-  watch: {
-    open: {
-      immediate: true,
-      handler(n) {
-        if (n) {
-          this.initializeModal();
-        } else {
-          this.destroyModal();
+      .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;
+
+      .ac-modal-content {
+        img {
+          // width: 100%;
+          height: auto;
         }
-      },
-    },
-  },
 
-  methods: {
-    onKeyDown(e) {
-      if (this.open && e.keyCode === 27) {
-        // escape key
-        this.destroyModal();
+        .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>