@appscode/design-system 1.1.0 → 2.0.1

package/vue-components/v3/sidebar/SidebarItemWithDropDown.vue

@@ -1,3 +1,100 @@
+<script setup lang="ts">
+import { nextTick, onMounted, ref, watch } from "vue";
+
+interface Props {
+  isDropDownOpen?: boolean;
+  title?: string;
+  icon?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isDropDownOpen: false,
+  title: "Sidebar Item",
+  icon: "https://cdn.appscode.com/k8s/icons/apiextensions.k8s.io/customresourcedefinitions.svg",
+});
+
+const emit = defineEmits(["dropDownItemChange"]);
+
+const dropDownStatus = ref("close");
+const dropDownSectionHeight = ref<string | null>(null);
+const isCompMounted = ref(false);
+const sectionItems = ref(null as HTMLElement | null);
+
+const setDropdownMaxHeight = (mode: string) => {
+  if (mode === "open" && sectionItems.value) {
+    dropDownSectionHeight.value = `${sectionItems.value.scrollHeight}px`;
+  } else {
+    dropDownSectionHeight.value = null;
+  }
+};
+
+const toggleDropDownStatus = () => {
+  if (dropDownStatus.value === "open") {
+    dropDownStatus.value = "close";
+  } else dropDownStatus.value = "open";
+};
+
+onMounted(() => {
+  isCompMounted.value = true;
+  setTimeout(() => {
+    // for expanding dropdown
+    if (props.isDropDownOpen) {
+      setDropdownMaxHeight("open");
+    } else {
+      setDropdownMaxHeight("close");
+    }
+  }, 700);
+});
+
+watch(
+  () => props.title,
+  (n, o) => {
+    if (n && isCompMounted.value) {
+      nextTick(() => {
+        // for expanding dropdown
+        setDropdownMaxHeight("open");
+      });
+    }
+
+    if (o && isCompMounted.value) {
+      nextTick(() => {
+        // for expanding dropdown
+        setDropdownMaxHeight("close");
+      });
+    }
+  }
+);
+
+watch(
+  () => props.isDropDownOpen,
+  (n) => {
+    if (n) {
+      dropDownStatus.value = "open";
+    } else dropDownStatus.value = "close";
+  },
+  {
+    immediate: true,
+  }
+);
+
+watch(dropDownStatus, (n) => {
+  if (n === "open") {
+    // emit event to close other drop down items
+    emit("dropDownItemChange");
+
+    nextTick(() => {
+      const dropDownUl = sectionItems.value;
+      // debugger;
+      if (dropDownUl)
+        dropDownSectionHeight.value = `${dropDownUl.scrollHeight}px`;
+    });
+  } else {
+    // emit event to close other drop down items
+    dropDownSectionHeight.value = null;
+  }
+});
+</script>
+
 <template>
   <li :class="`is-${dropDownStatus}`">
     <a class="ac-dropdown-button" :title="title" @click="toggleDropDownStatus">
@@ -10,111 +107,11 @@
       </span>
     </a>
 
-    <ul ref="sectionItems" :style="{ maxHeight: dropDownSectionHeight }">
+    <ul
+      ref="sectionItems"
+      :style="{ maxHeight: dropDownSectionHeight || undefined }"
+    >
       <slot />
     </ul>
   </li>
 </template>
-
-<script>
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  props: {
-    isDropDownOpen: {
-      type: Boolean,
-      default: false,
-    },
-    title: {
-      type: String,
-      default: "Sidebar Item",
-    },
-    icon: {
-      type: String,
-      default: "@/assets/images/icons/basic.svg",
-    },
-  },
-
-  emits: ["dropDownItemChange"],
-
-  data() {
-    return {
-      dropDownStatus: "close",
-      dropDownSectionHeight: null,
-      isCompMounted: false,
-    };
-  },
-
-  mounted() {
-    this.isCompMounted = true;
-    setTimeout(() => {
-      // for expanding dropdown
-      if (this.isDropDownOpen) {
-        this.setDropdownMaxHeight("open");
-      } else {
-        this.setDropdownMaxHeight("close");
-      }
-    }, 700);
-  },
-
-  watch: {
-    title(n, o) {
-      if (n && this.isCompMounted) {
-        this.$nextTick(() => {
-          // for expanding dropdown
-          this.setDropdownMaxHeight("open");
-        });
-      }
-
-      if (o && this.isCompMounted) {
-        this.$nextTick(() => {
-          // for expanding dropdown
-          this.setDropdownMaxHeight("close");
-        });
-      }
-    },
-    isDropDownOpen: {
-      immediate: true,
-      handler(n) {
-        if (n) {
-          this.dropDownStatus = "open";
-        } else this.dropDownStatus = "close";
-      },
-    },
-    dropDownStatus: {
-      immediate: true,
-      handler(n) {
-        if (n === "open") {
-          // emit event to close other drop down items
-          this.$emit("dropDownItemChange");
-
-          this.$nextTick(() => {
-            const dropDownUl = this.$refs["sectionItems"];
-            // debugger;
-            if (dropDownUl)
-              this.dropDownSectionHeight = `${dropDownUl.scrollHeight}px`;
-          });
-        } else {
-          // emit event to close other drop down items
-          this.dropDownSectionHeight = null;
-        }
-      },
-    },
-  },
-
-  methods: {
-    setDropdownMaxHeight(mode) {
-      if (mode === "open") {
-        this.dropDownSectionHeight = `${this.$refs["sectionItems"].scrollHeight}px`;
-      } else {
-        this.dropDownSectionHeight = null;
-      }
-    },
-    toggleDropDownStatus() {
-      if (this.dropDownStatus === "open") {
-        this.dropDownStatus = "close";
-      } else this.dropDownStatus = "open";
-    },
-  },
-});
-</script>

package/vue-components/v3/sidebar/SidebarMenuList.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <ul class="menu-list ac-menu-list">
+    <slot />
+  </ul>
+</template>
+
+<style lang="scss"></style>

package/vue-components/v3/sidebar/Steps.vue

@@ -0,0 +1,152 @@
+<script lang="ts" setup>
+import FeCheck from "~icons/fe/check";
+import type { Step } from "../../types/importFlow";
+
+interface Props {
+  steps?: Step[];
+  activeStepIdentifier?: number;
+  activeSubStepIdentifier?: number;
+}
+
+withDefaults(defineProps<Props>(), {
+  steps: () => [],
+  activeStepIdentifier: 1,
+  activeSubStepIdentifier: 1,
+});
+</script>
+
+<template>
+  <li
+    v-for="step in steps"
+    :key="step.identifier"
+    :class="{
+      'is-hidden': !step.isVisible,
+    }"
+  >
+    <strong
+      :class="{
+        'is-active': step.identifier <= activeStepIdentifier,
+      }"
+    >
+      <span
+        :class="{
+          'step-count': true,
+          'is-active': step.identifier <= activeStepIdentifier,
+        }"
+        >{{ step.identifier }}</span
+      >
+      <span class="label-text">{{ step.title }}</span>
+    </strong>
+    <ul
+      :class="{
+        'is-hidden': step.identifier !== activeStepIdentifier,
+      }"
+    >
+      <li
+        v-for="substep in step.substeps"
+        :key="substep?.identifier"
+        :class="{
+          'is-hidden': !substep.isVisible,
+          'is-active': substep.identifier < activeSubStepIdentifier,
+        }"
+      >
+        <strong>
+          <span class="step-count"><FeCheck /></span>
+          <span
+            :class="{
+              'label-text': true,
+              'has-text-weight-semibold':
+                substep.identifier <= activeSubStepIdentifier,
+            }"
+            >{{ substep.title }}</span
+          >
+        </strong>
+      </li>
+    </ul>
+  </li>
+</template>
+
+<style lang="scss" scoped>
+ul {
+  padding-left: 4px !important;
+  position: relative;
+  z-index: 1;
+  &::after {
+    position: absolute;
+    content: "";
+    left: 15px;
+    top: -16px;
+    width: 1px;
+    height: 100%;
+    /* colors/primary/40-primary */
+    border: 1px dashed #186cb4;
+    z-index: -1;
+  }
+  li {
+    display: block;
+    padding: 6px 0;
+    cursor: pointer;
+    strong {
+      /* colors/white */
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+
+      .step-count {
+        width: 32px;
+        height: 32px;
+        margin-right: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        background-color: $primary-20;
+        border: 1px solid $primary-40;
+        color: $primary-80;
+        font-size: 16px;
+        &.is-active {
+          background-color: $primary;
+          color: $white-100;
+          border: 1px solid $primary-90;
+        }
+      }
+    }
+
+    ul {
+      max-height: 100% !important;
+
+      li {
+        &.is-active {
+          strong {
+            .step-count {
+              background-color: $primary;
+              color: $white-100;
+              border: 1px solid $primary-90;
+            }
+            .label-text {
+              color: $white-100;
+              font-weight: 500;
+            }
+          }
+        }
+        strong {
+          .step-count {
+            width: 22px;
+            height: 22px;
+            margin-right: 16px;
+            background: $primary-20;
+            color: $primary-80;
+            border: 1px solid $primary-40;
+            font-size: 14px;
+          }
+
+          .label-text {
+            color: $primary-95;
+            font-weight: 400;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabs.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts"></script>
+<template>
+  <div class="sidebar-tabs">
+    <slot />
+  </div>
+</template>
+
+<style lang="scss">
+.sidebar-tabs {
+  width: 220px;
+  border-right: 1px solid $primary-95;
+  padding: 8px;
+  height: calc(100vh - 50px);
+  ul {
+    li {
+      a {
+        display: flex;
+        align-items: center;
+        color: $primary-10;
+        position: relative;
+        z-index: 1;
+        padding: 8px 16px;
+        font-weight: 500;
+        transition: 0.3s ease-in-out;
+        align-items: center;
+        justify-content: space-between;
+
+        &:after {
+          position: absolute;
+          content: "";
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          background-color: $primary-95;
+          border-radius: 4px;
+          z-index: -1;
+          opacity: 0;
+          visibility: hidden;
+          transition: 0.3s ease-in-out;
+        }
+        &:hover {
+          color: $primary;
+
+          &:after {
+            opacity: 1;
+            visibility: visible;
+            background-color: $primary-97;
+          }
+        }
+        &.is-active {
+          color: $primary;
+          &:hover {
+            &::after {
+              background-color: $primary-90;
+            }
+          }
+          &:after {
+            opacity: 1;
+            visibility: visible;
+          }
+          &.is-danger {
+            color: $danger;
+            &:hover {
+              &::after {
+                background-color: $red-90;
+              }
+            }
+            &:after {
+              opacity: 1;
+              visibility: visible;
+              background-color: $red-95;
+            }
+          }
+          &.is-success {
+            color: $success;
+            &:hover {
+              &::after {
+                background-color: $green-90;
+              }
+            }
+            &:after {
+              opacity: 1;
+              visibility: visible;
+              background-color: $green-95;
+            }
+          }
+          &.is-warning {
+            color: $warning;
+            &:hover {
+              &::after {
+                background-color: $yellow-90;
+              }
+            }
+            &:after {
+              opacity: 1;
+              visibility: visible;
+              background-color: $yellow-95;
+            }
+          }
+        }
+        &.is-danger {
+          color: $danger;
+          &:hover {
+            &::after {
+              background-color: $red-90;
+            }
+          }
+          &:after {
+            opacity: 1;
+            visibility: visible;
+            background-color: transparent;
+          }
+        }
+        &.is-success {
+          color: $success;
+          &:hover {
+            &::after {
+              background-color: $green-90;
+            }
+          }
+          &:after {
+            opacity: 1;
+            visibility: visible;
+            background-color: transparent;
+          }
+        }
+        &.is-warning {
+          color: $warning;
+          &:hover {
+            &::after {
+              background-color: $yellow-90;
+            }
+          }
+          &:after {
+            opacity: 1;
+            visibility: visible;
+            background-color: transparent;
+          }
+        }
+      }
+      &.is-open {
+        transition: 0.3s ease-in-out;
+        ul {
+          max-height: 250px;
+        }
+      }
+      ul {
+        margin-left: 20px;
+        position: relative;
+        z-index: 1;
+        max-height: 0;
+        transition: 0.3s ease-in-out !important;
+        overflow: hidden;
+        &:after {
+          position: absolute;
+          content: "";
+          left: 4px;
+          top: 0;
+          width: 1px;
+          height: calc(100% - 10px);
+          background-color: $primary-90;
+        }
+        li {
+          a {
+            &:after {
+              left: -8px;
+              opacity: 0 !important;
+              visibility: hidden !important;
+            }
+            &::before {
+              position: absolute;
+              content: "";
+              left: 0;
+              top: 50%;
+              margin-top: -4px;
+              width: 8px;
+              height: 8px;
+              border-radius: 50%;
+              background-color: $primary;
+              transition: 0.3s ease-in-out;
+              opacity: 0;
+              visibility: hidden;
+            }
+            &:hover:not(&.is-active) {
+              &::before {
+                opacity: 1;
+                visibility: visible;
+                background-color: $primary-80;
+              }
+            }
+            &.is-active {
+              &::before {
+                opacity: 1;
+                visibility: visible;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabsLayout.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+interface Props {
+  isSidebarVisible?: boolean;
+}
+withDefaults(defineProps<Props>(), {
+  isSidebarVisible: true,
+});
+</script>
+
+<template>
+  <div class="sidebar-tabs-layout is-flex">
+    <!-- sidebar tabs  -->
+    <div class="sidebar-tabs-wrapper">
+      <slot name="sidebar-tabs" />
+    </div>
+    <!-- sidebar tabs  -->
+
+    <div
+      class="content-wrapper"
+      :class="isSidebarVisible ? 'pl-220' : 'pl-0 pb-0'"
+    >
+      <!-- sidebar content  -->
+      <slot name="tabs-content" />
+      <!-- sidebar content  -->
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.sidebar-tabs-wrapper {
+  position: fixed;
+  background-color: $white-100;
+}
+.pl-220 {
+  padding-left: 220px;
+}
+.content-wrapper {
+  padding-bottom: 40px;
+  width: 100%;
+  &:has(.form-footer) {
+    padding-bottom: 0;
+  }
+}
+</style>