@appscode/design-system 1.1.0 → 2.0.0

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

@@ -1,8 +1,76 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref, watch } from "vue";
+import type { SelectedClusterType } from "../../types/cluster";
+
+const Multiselect = defineAsyncComponent(() => import("vue-multiselect"));
+
+interface Props {
+  sidebarCollapsed?: boolean;
+  mouseHover?: boolean;
+  clusterOptions?: Array<SelectedClusterType>;
+  modelValue?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  sidebarCollapsed: false,
+  mouseHover: false,
+  clusterOptions: () => [],
+  modelValue: "",
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const selectedCluster = ref<SelectedClusterType | null>(null);
+const selectedClusterName = ref<null | string>(null);
+
+const getProviderIcon = (provider: string) => {
+  return `https://cdn.appscode.com/images/cloud-provider-icons/${provider}.png`;
+};
+
+watch(
+  () => props.modelValue,
+  (n) => {
+    selectedClusterName.value = n;
+  },
+  { immediate: true }
+);
+
+watch(selectedCluster, (n) => {
+  if (n) {
+    if (selectedClusterName.value !== n.name) {
+      selectedClusterName.value = n.name;
+    }
+  } else selectedCluster.value = null;
+});
+
+watch(selectedClusterName, (n) => {
+  if (n !== selectedCluster.value?.name) {
+    props.clusterOptions.forEach((item) => {
+      if (selectedClusterName.value === item.name) {
+        selectedCluster.value = item;
+      }
+    });
+  }
+  emit("update:modelValue", n);
+});
+
+watch(
+  () => props.clusterOptions,
+  async (list) => {
+    selectedCluster.value =
+      list.find((item) => {
+        return selectedClusterName.value === item.name;
+      }) || null;
+  },
+  { immediate: true, deep: true }
+);
+</script>
+
 <template>
   <div v-if="sidebarCollapsed" class="is-cluster-logo">
     <img
       width="40"
-      :src="getProviderIcon(selectedCluster && selectedCluster.provider)"
+      :src="getProviderIcon(selectedCluster?.provider || '')"
       onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
       alt="provider-icon"
     />
@@ -25,6 +93,7 @@
           :src="getProviderIcon(props.option.provider)"
           onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
           alt="No cluster selected"
+          class="height-22 mr-8"
         /><span
           ><span>{{ props.option.displayName }}</span></span
         >
@@ -46,88 +115,4 @@
     </template>
   </multiselect>
 </template>
-
-<script>
-  import { defineComponent, defineAsyncComponent } from 'vue'
-  export default defineComponent({
-    components: {
-      Multiselect: defineAsyncComponent(() =>
-        import('vue-multiselect').then((module) => module.default)
-      ),
-    },
-    props: {
-      sidebarCollapsed: {
-        type: Boolean,
-        default: false,
-      },
-      mouseHover: {
-        type: Boolean,
-        default: false,
-      },
-      clusterOptions: {
-        type: Array,
-        default: () => [],
-      },
-      modelValue: {
-        type: String,
-        default: '',
-      },
-    },
-
-    emits: ['update:modelValue'],
-
-    data() {
-      return {
-        selectedCluster: null,
-        selectedClusterName: null,
-      }
-    },
-
-    watch: {
-      modelValue: {
-        immediate: true,
-        handler(n) {
-          this.selectedClusterName = n
-        },
-      },
-      selectedCluster: {
-        deep: true,
-        handler(n) {
-          if (this.selectedClusterName !== n.name) {
-            this.selectedClusterName = n.name
-          }
-        },
-      },
-      selectedClusterName(n) {
-        if (n !== this.selectedCluster.name) {
-          this.clusterOptions.forEach((item) => {
-            if (this.selectedClusterName === item.name) {
-              this.selectedCluster = item
-            }
-          })
-        }
-
-        this.$emit('update:modelValue', n)
-      },
-      clusterOptions: {
-        deep: true,
-        immediate: true,
-        async handler(list) {
-          if (list) {
-            list.forEach((item) => {
-              if (this.selectedClusterName === item.name) {
-                this.selectedCluster = item
-              }
-            })
-          }
-        },
-      },
-    },
-
-    methods: {
-      getProviderIcon(provider) {
-        return `https://cdn.appscode.com/images/cloud-provider-icons/${provider}.png`
-      },
-    },
-  })
-</script>
+<style lang="scss"></style>

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

@@ -0,0 +1,239 @@
+<script setup lang="ts">
+interface Props {
+  type?: string;
+  isCollapsible?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  type: "cluster-main",
+});
+</script>
+
+<template>
+  <div class="ac-system-left-sidebar">
+    <!-- is-collapsed -->
+    <div class="ac-left-sidebar-wrapper">
+      <div class="ac-left-sidebar-inner">
+        <aside class="ac-left-sidebar">
+          <!-- sidebar header start  -->
+          <slot name="sidebar-header" />
+          <!-- sidebar header end  -->
+
+          <!-- sidebar components start -->
+          <slot name="sidebar-body" />
+          <!-- sidebar components end -->
+
+          <!-- sidebar footer  -->
+          <slot name="sidebar-footer" />
+          <!-- sidebar footer  -->
+        </aside>
+        <!-- sidebar top end -->
+      </div>
+      <!-- left-sidebar menu end -->
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.ac-left-sidebar-wrapper {
+  position: fixed;
+  top: 0px;
+  z-index: 9999;
+  background-color: $primary-20;
+  width: 250px;
+  transition: 0.3s ease-in-out;
+}
+
+.ac-left-sidebar {
+  .menu-list {
+    &.ac-menu-list {
+      height: calc(100vh - 80px);
+      overflow-y: auto;
+      padding-top: 4px;
+      scrollbar-color: $white-100 transparent;
+
+      /* width */
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      li {
+        &.is-open {
+          a {
+            &.ac-dropdown-button {
+              .ac-arrow-down {
+                transform: rotate(-180deg);
+                transform-origin: 5px;
+              }
+            }
+          }
+
+          ul {
+            li {
+              a {
+                strong {
+                  font-weight: 500;
+                }
+              }
+            }
+          }
+        }
+
+        a {
+          font-style: normal;
+          font-weight: 500;
+          font-size: 13px;
+          line-height: 16px;
+          color: $primary-97;
+          position: relative;
+          z-index: 1;
+          padding: 10px 15px 10px 24px;
+          transition: 0.3s ease-in-out;
+          display: flex;
+          align-items: center;
+
+          &:after {
+            position: absolute;
+            content: "";
+            left: 10px;
+            top: 0;
+            width: calc(100% - 20px);
+            height: 100%;
+            background: $primary;
+            border-radius: 4px;
+            z-index: -1;
+            transition: 0.3s ease-in-out;
+            opacity: 0;
+            visibility: hidden;
+          }
+
+          strong {
+            max-width: calc(100% - 65px);
+            // line-break: anywhere;
+            white-space: break-spaces;
+            display: flex;
+            align-items: center;
+            overflow: hidden;
+            font-weight: 500;
+            transition: 0.3s ease-in-out;
+          }
+
+          &.ac-dropdown-button {
+            user-select: none;
+
+            .ac-arrow-down {
+              position: absolute;
+              margin-right: 0;
+              right: 20px;
+              transition: transform 0.3s;
+              transform-origin: 4px;
+              color: $black-70;
+            }
+          }
+
+          &:hover {
+            background-color: transparent;
+
+            &:after {
+              color: $primary;
+              opacity: 0.2;
+              visibility: visible;
+            }
+
+            span {
+              color: $primary-97;
+
+              img {
+                filter: brightness(10);
+              }
+            }
+          }
+
+          span {
+            margin-right: 12px;
+            width: 16px;
+            height: 16px;
+            color: $black-30;
+            font-size: 16px;
+
+            img {
+              width: 100%;
+              filter: brightness(10);
+              transition: 0.3s ease-in-out;
+            }
+          }
+        }
+
+        ul {
+          max-height: 0;
+          transition: max-height 0.2s ease-out;
+          margin: 0;
+          padding: 0;
+          border-left: none;
+          overflow: hidden;
+
+          li {
+            a {
+              padding-left: 52px;
+              font-size: 12px;
+              padding-top: 10px;
+              padding-bottom: 10px;
+            }
+          }
+        }
+      }
+    }
+    a {
+      &.is-active {
+        background-color: transparent;
+        &::after {
+          opacity: 1 !important;
+          visibility: visible !important;
+        }
+      }
+    }
+  }
+}
+
+.sidebar-collapsed:not(.is-hoverable) {
+  .ac-left-sidebar-wrapper {
+    width: 60px;
+    .ac-left-sidebar {
+      .menu-list {
+        &.ac-menu-list {
+          li {
+            a {
+              padding: 10px 15px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+
+              span {
+                margin: 0;
+              }
+              strong {
+                opacity: 0;
+                visibility: hidden;
+              }
+            }
+            ul {
+              li {
+                a {
+                  padding-left: 15px;
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineEmits(["hover"]);
+</script>
+
+<template>
+  <ul
+    class="menu-list ac-menu-list"
+    data-testid="cluster-sidebar-menu-list"
+    @mouseenter="$emit('hover', true)"
+    @mouseleave="$emit('hover', false)"
+  >
+    <slot />
+  </ul>
+</template>

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

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+interface Props {
+  isColorpickerEnabled?: boolean;
+  hideBorder?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  isColorpickerEnabled: false,
+  hideBorder: false,
+});
+defineEmits(["toggleSidebar"]);
+const AccentColorPicker = defineAsyncComponent(
+  () => import("./AccentColorPicker.vue")
+);
+</script>
+
+<template>
+  <div class="sidebar-footer" :class="{ 'b-t-n': hideBorder }">
+    <!-- back button  -->
+    <button
+      class="back-button is-transparent"
+      data-testid="sidebar-footer-back-button"
+      @click="$emit('toggleSidebar')"
+    >
+      <svg
+        width="18"
+        height="18"
+        viewBox="0 0 18 18"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M11.25 13.5L6.75 9L11.25 4.5"
+          stroke="white"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M16 14V4"
+          stroke="white"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </button>
+    <!-- back button  -->
+
+    <!-- color control  -->
+    <div v-if="isColorpickerEnabled" class="accent-color-picker">
+      <accent-color-picker />
+    </div>
+    <!-- color control  -->
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.sidebar-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 30px;
+  border-top: 1px solid #3d5e7c;
+
+  .back-button {
+    display: flex;
+    padding: 5px 16px;
+    cursor: pointer;
+    justify-content: flex-start;
+    width: 50%;
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+}
+.sidebar-collapsed .ac-left-sidebar-wrapper {
+  .accent-color-picker {
+    display: none;
+  }
+  .sidebar-footer {
+    .back-button {
+      width: 100%;
+      transform: rotate(180deg);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+defineEmits(["toggleSidebar"]);
+
+interface Props {
+  brandLogo?: string;
+  brandLogoAlt?: string;
+  url?: string;
+  modifierClasses?: string;
+  hideCollapseButton?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  brandLogo: "https://via.placeholder.com/150x35/dddddd/808080",
+  brandLogoAlt: "",
+  url: "/",
+  modifierClasses: "",
+  hideCollapseButton: false,
+});
+</script>
+<template>
+  <div class="sidebar-header">
+    <!-- hamburger icon  -->
+    <div
+      v-if="!hideCollapseButton"
+      class="icon hamburger-icon mr-16"
+      data-testid="sidebar-menu-button"
+      @click="$emit('toggleSidebar')"
+    >
+      <svg
+        width="18"
+        height="18"
+        viewBox="0 0 18 18"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M3 13.5L10.5 13.5"
+          stroke="white"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M3 9L15 9"
+          stroke="white"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M3 4.5L7.5 4.5"
+          stroke="white"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+    <!-- hamburger icon  -->
+
+    <!-- brand logo  -->
+    <router-link class="is-flex brand-logo" :to="url">
+      <img :src="brandLogo" alt="brand-logo" :class="modifierClasses" />
+    </router-link>
+    <!-- brand logo  -->
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.sidebar-collapsed:not(.is-hoverable) .ac-left-sidebar-wrapper {
+  .brand-logo {
+    display: none !important;
+  }
+  .sidebar-header {
+    justify-content: center;
+    padding: 10px;
+    .hamburger-icon {
+      margin-right: 0 !important;
+    }
+  }
+}
+
+.sidebar-header {
+  background-color: transparent;
+  border-bottom: 1px solid #2f5473;
+  height: 50px;
+  display: flex;
+  // justify-content: space-between;
+  padding: 8px 20px;
+  align-items: center;
+
+  .hamburger-icon {
+    cursor: pointer;
+    position: relative;
+    z-index: 1;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    &::after {
+      position: absolute;
+      content: "";
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background-color: rgba(255, 255, 255, 0.1);
+      opacity: 0;
+      visibility: hidden;
+      transition: 0.3s ease-in-out;
+    }
+
+    &:hover {
+      &::after {
+        opacity: 1;
+        visibility: visible;
+      }
+    }
+  }
+  .brand-logo {
+    display: flex;
+    align-items: center;
+    img {
+      height: 30px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { nextTick, watch, ref } from "vue";
+
+interface Props {
+  id?: string;
+  title?: string;
+  url?: string;
+  isActive?: boolean;
+  icon?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  id: "sidebar-id",
+  title: "sidebar-title",
+  url: "/",
+  isActive: false,
+  icon: "@/assets/images/icons/basic.svg",
+});
+
+const sidebarItem = ref<HTMLElement | null>(null);
+
+watch(
+  () => props.isActive,
+  (n) => {
+    if (n) {
+      nextTick(() => {
+        setTimeout(() => {
+          const top =
+            (sidebarItem.value &&
+              sidebarItem.value.getBoundingClientRect().top) ||
+            0;
+          // preventing scroll to options that are already visible
+          if (top > window.innerHeight - 200) {
+            // scroll to selected option item
+            sidebarItem.value?.scrollIntoView({
+              behavior: "smooth",
+              block: "center",
+            });
+          }
+        }, 500);
+      });
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <li ref="sidebarItem">
+    <router-link
+      :id="id"
+      :title="title"
+      :to="url"
+      :class="{ 'is-active': isActive }"
+    >
+      <span>
+        <img :src="icon" alt="icon" />
+      </span>
+      <strong>{{ title }}</strong>
+    </router-link>
+  </li>
+</template>