@appscode/design-system 1.1.0-alpha.9 → 1.1.0-beta.3

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/sidebar-tabs/SidebarTabs.vue

@@ -0,0 +1,128 @@
+<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-90;
+  padding: 8px;
+  height: calc(100vh - 50px);
+  ul {
+    li {
+      a {
+        display: flex;
+        align-items: center;
+        color: $black-40;
+        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;
+          }
+        }
+        span {
+        }
+      }
+      &.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,29 @@
+<script lang="ts" setup></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">
+      <!-- sidebar content  -->
+      <slot name="tabs-content" />
+      <!-- sidebar content  -->
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.sidebar-tabs-wrapper {
+  position: fixed;
+  background-color: $white-100;
+}
+.content-wrapper {
+  padding-left: 220px;
+  padding-bottom: 40px;
+  width: 100%;
+}
+</style>

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

@@ -0,0 +1,99 @@
+<script setup lang="ts"></script>
+<template>
+  <div class="content pt-10 pl-20 pb-20">
+    <h1>Heading One</h1>
+    <p>
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum
+      corrupti atque voluptatum quos a commodi similique perferendis
+      necessitatibus. Praesentium labore laudantium assumenda consectetur
+      corporis ex doloremque magnam animi numquam?
+    </p>
+    <h2>Heading Two</h2>
+    <p>
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum
+      corrupti atque voluptatum quos a commodi similique perferendis
+      necessitatibus. Praesentium labore laudantium assumenda consectetur
+      corporis ex doloremque magnam animi numquam? Lorem ipsum dolor sit amet
+      consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a
+      commodi similique perferendis necessitatibus. Praesentium labore
+      laudantium assumenda consectetur corporis ex doloremque magnam animi
+      numquam?
+    </p>
+    <h3>Heading three</h3>
+    <p>
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum
+      corrupti atque voluptatum quos a commodi similique perferendis
+      necessitatibus. Praesentium labore laudantium assumenda consectetur
+      corporis ex doloremque magnam animi numquam?
+    </p>
+
+    <h4>Heading Four</h4>
+    <p>
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum
+      corrupti atque voluptatum quos a commodi similique perferendis
+      necessitatibus. Praesentium labore laudantium assumenda consectetur
+      corporis ex doloremque magnam animi numquam?
+    </p>
+    <h5>Heading Five</h5>
+    <p>
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum
+      corrupti atque voluptatum quos a commodi similique perferendis
+      necessitatibus. Praesentium labore laudantium assumenda consectetur
+      corporis ex doloremque magnam animi numquam? Lorem ipsum dolor sit amet
+      consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a
+      commodi similique perferendis necessitatibus. Praesentium labore
+      laudantium assumenda consectetur corporis ex doloremque magnam animi
+      numquam?
+    </p>
+    <h6>Heading Six</h6>
+    <p>
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum
+      corrupti atque voluptatum quos a commodi similique perferendis
+      necessitatibus. Praesentium labore laudantium assumenda consectetur
+      corporis ex doloremque magnam animi numquam?
+    </p>
+
+    <h4>Block Quote</h4>
+
+    <blockquote>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Et repudiandae
+      officiis autem aspernatur. Ab cum quisquam dolore pariatur consequuntur
+      officia nostrum, commodi sint saepe delectus itaque vel quae voluptates
+      atque.
+    </blockquote>
+
+    <h5>Heading Five</h5>
+    <p>
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum
+      corrupti atque voluptatum quos a commodi similique perferendis
+      necessitatibus. Praesentium labore laudantium assumenda consectetur
+      corporis ex doloremque magnam animi numquam? Lorem ipsum dolor sit amet
+      consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a
+      commodi similique perferendis necessitatibus. Praesentium labore
+      laudantium assumenda consectetur corporis ex doloremque magnam animi
+      numquam?
+    </p>
+    <h6>Heading Six</h6>
+    <p>
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum
+      corrupti atque voluptatum quos a commodi similique perferendis
+      necessitatibus. Praesentium labore laudantium assumenda consectetur
+      corporis ex doloremque magnam animi numquam?
+    </p>
+
+    <h4>Block Quote</h4>
+
+    <blockquote>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Et repudiandae
+      officiis autem aspernatur. Ab cum quisquam dolore pariatur consequuntur
+      officia nostrum, commodi sint saepe delectus itaque vel quae voluptates
+      atque.
+    </blockquote>
+  </div>
+</template>
+
+<style lang="scss">
+.content {
+  width: 100%;
+}
+</style>

package/vue-components/v3/tab/TabItem.vue

@@ -1,17 +1,15 @@
+<script setup lang="ts">
+interface Props {
+  isActive?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  isActive: false,
+});
+</script>
+
 <template>
   <li :class="{ 'is-active': isActive }" data-testid="tab-item">
     <slot />
   </li>
 </template>
-
-<script>
-import { defineComponent } from "vue";
-export default defineComponent({
-  props: {
-    isActive: {
-      type: Boolean,
-      default: false,
-    },
-  },
-});
-</script>

package/vue-components/v3/tab/Tabs.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="tabs ac-tabs">
+    <ul>
+      <slot />
+    </ul>
+  </div>
+</template>

package/vue-components/v3/tab/TabsBody.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="ac-tabs-body is-content-available">
+    <slot />
+  </div>
+</template>

package/vue-components/v3/table/EmptyTableInfo.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts"></script>
+
+<template>
+  <strong>
+    No Data Available
+    <i class="pl-5 fa fa-exclamation-circle" aria-hidden="true"></i>
+  </strong>
+</template>

package/vue-components/v3/table/FakeTableCell.vue

@@ -1,3 +1,25 @@
+<script setup lang="ts">
+import { defineAsyncComponent, computed } from "vue";
+
+interface Props {
+  isHeaderCell?: boolean;
+  fakeCellWidth?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isHeaderCell: false,
+  fakeCellWidth: 0,
+});
+
+const TableCell = defineAsyncComponent(() => import("./TableCell.vue"));
+
+const dynamicColumnStyle = computed(() => {
+  return {
+    right: `-${props.fakeCellWidth}px`,
+  };
+});
+</script>
+
 <template>
   <th v-if="isHeaderCell" class="increase-width">
     <div class="increase-innner" :style="dynamicColumnStyle" />
@@ -6,34 +28,3 @@
     <div class="increase-innner" :style="dynamicColumnStyle" />
   </table-cell>
 </template>
-
-<script>
-import { defineComponent, defineAsyncComponent } from "vue";
-
-export default defineComponent({
-  props: {
-    isHeaderCell: {
-      type: Boolean,
-      default: false,
-    },
-    fakeCellWidth: {
-      type: Number,
-      default: 0,
-    },
-  },
-
-  components: {
-    TableCell: defineAsyncComponent(() =>
-      import("./TableCell.vue").then((module) => module.default)
-    ),
-  },
-
-  computed: {
-    dynamicColumnStyle() {
-      return {
-        right: `-${this.fakeCellWidth}px`,
-      };
-    },
-  },
-});
-</script>