@appscode/design-system 2.2.37 → 2.2.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.2.37",
+  "version": "2.2.39",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/v3/form-fields/AcSelect.vue

@@ -1,90 +1,28 @@
-<template>
-  <div
-    ref="multiselectDivId"
-    class="multi-select-wrapper"
-    :class="{
-      multiselectCustomClass,
-      'has-refresh-button': hasRefreshBtn,
-      'is-disable': disabled || isLoaderActive,
-      'has-clear-button': allowEmpty && model,
-    }"
-    data-testid="cluster-status-select-header"
-  >
-    <label
-      v-if="label.length"
-      :class="{ 'show-label': isLabelHoisted }"
-      data-testid="ac-multiselect-label"
-      @click.prevent="onClickLabel"
-    >
-      {{ isLabelHoisted ? label : `Select ${label}` }}
-      <span v-if="showStar" class="is-required has-text-danger"> * </span>
-    </label>
-    <button v-if="allowEmpty && model" class="button ac-button is-clear is-transparent" @click.prevent="model = ''">
-      <i class="fa fa-times" />
-    </button>
-    <button
-      v-if="hasRefreshBtn"
-      class="button ac-button is-primary is-refresh is-transparent"
-      :class="{ spin: isLoaderActive }"
-      @click.prevent="$emit('refresh-btn-click')"
-    >
-      <i class="fa fa-refresh" />
-    </button>
-    <multiselect
-      ref="multiselectElement"
-      v-model="model"
-      :track-by="trackBy"
-      :label="showBy"
-      :class="multiselectCustomClass"
-      :options="options"
-      :placeholder="placeholderText"
-      :disabled="disabled || isLoaderActive"
-      :allow-empty="false"
-      :show-labels="false"
-      :close-on-select="true"
-      :open-direction="openDirection"
-      :group-values="groupValues"
-      :group-label="groupLabel"
-      :group-select="groupSelect"
-      data-testid="simple-select-box"
-      @open="openDropDown"
-      @close="closeDropDown"
-      @select="onSelect"
-      @remove="onRemove"
-    >
-      <template #noResult>
-        <span> {{ noResultText }} </span>
-      </template>
-    </multiselect>
-    <p v-show="errorMsg" class="is-danger">
-      {{ errorMsg }}
-    </p>
-  </div>
-</template>
 <script setup lang="ts">
 import { computed, ref } from "vue";
+import type { ComponentPublicInstance } from "vue";
 import Multiselect from "vue-multiselect";
 
 interface Props {
-  errorMsg: string;
-  placeholderText: string;
-  disabled: boolean;
-  label: string;
-  allowEmpty: boolean;
-  options: unknown[];
-  trackBy: string;
-  showBy: string;
-  closeOnSelect: boolean;
-  hasRefreshBtn: boolean;
-  isLoaderActive: boolean;
-  noResultText: string;
-  showStar: boolean;
-  wrapperDivCustomClass: string;
-  multiselectCustomClass: string;
-  openDirection: "top" | "bottom";
-  groupLabel: string;
-  groupValues: string;
-  groupSelect: boolean;
+  errorMsg?: string;
+  placeholderText?: string;
+  disabled?: boolean;
+  label?: string;
+  allowEmpty?: boolean;
+  options?: unknown[];
+  trackBy?: string;
+  showBy?: string;
+  closeOnSelect?: boolean;
+  hasRefreshBtn?: boolean;
+  isLoaderActive?: boolean;
+  noResultText?: string;
+  showStar?: boolean;
+  wrapperDivCustomClass?: string;
+  multiselectCustomClass?: string;
+  openDirection?: "top" | "bottom";
+  groupLabel?: string;
+  groupValues?: string;
+  groupSelect?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -111,7 +49,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(["select", "remove", "refresh-btn-click"]);
 
-const multiselectElement = ref<HTMLInputElement | null>(null);
+const multiselectElement = ref<ComponentPublicInstance | null>(null);
 const multiselectDivId = ref<HTMLInputElement | null>(null);
 
 const model = defineModel<unknown>({ required: true });
@@ -122,8 +60,9 @@ const isLabelHoisted = computed(() => {
 });
 
 const onClickLabel = () => {
+  openDropDown();
   if (multiselectElement.value) {
-    multiselectDivId.value?.focus();
+    multiselectElement.value.$el.focus();
   }
 };
 
@@ -145,3 +84,67 @@ const onRemove = (removedOption: unknown, id: string) => emit("remove", removedO
 
 const onSelect = (selectedOption: unknown, id: string) => emit("select", selectedOption, id);
 </script>
+
+<template>
+  <div
+    ref="multiselectDivId"
+    class="multi-select-wrapper"
+    :class="{
+      multiselectCustomClass,
+      'has-refresh-button': hasRefreshBtn,
+      'is-disable': disabled || isLoaderActive,
+      'has-clear-button': allowEmpty && model,
+    }"
+    data-testid="cluster-status-select-header"
+  >
+    <label
+      v-if="label.length"
+      :class="{ 'show-label': isLabelHoisted }"
+      data-testid="ac-multiselect-label"
+      @click.prevent="onClickLabel"
+    >
+      {{ isLabelHoisted ? label : `Select ${label}` }}
+      <span v-if="showStar" class="is-required has-text-danger"> * </span>
+    </label>
+    <button v-if="allowEmpty && model" class="button ac-button is-clear is-transparent" @click.prevent="model = ''">
+      <i class="fa fa-times" />
+    </button>
+    <button
+      v-if="hasRefreshBtn"
+      class="button ac-button is-primary is-refresh is-transparent"
+      :class="{ spin: isLoaderActive }"
+      @click.prevent="$emit('refresh-btn-click')"
+    >
+      <i class="fa fa-refresh" />
+    </button>
+    <multiselect
+      ref="multiselectElement"
+      v-model="model"
+      :track-by="trackBy"
+      :label="showBy"
+      :class="multiselectCustomClass"
+      :options="options"
+      :placeholder="placeholderText"
+      :disabled="disabled || isLoaderActive"
+      :allow-empty="false"
+      :show-labels="false"
+      :close-on-select="true"
+      :open-direction="openDirection"
+      :group-values="groupValues"
+      :group-label="groupLabel"
+      :group-select="groupSelect"
+      data-testid="simple-select-box"
+      @open="openDropDown"
+      @close="closeDropDown"
+      @select="onSelect"
+      @remove="onRemove"
+    >
+      <template #noResult>
+        <span> {{ noResultText }} </span>
+      </template>
+    </multiselect>
+    <p v-show="errorMsg" class="is-danger">
+      {{ errorMsg }}
+    </p>
+  </div>
+</template>

package/vue-components/v3/navbar/Appdrawer.vue

@@ -1,20 +1,61 @@
 <script setup lang="ts">
-import { defineAsyncComponent, ref } from "vue";
-interface app {
-  url: string;
-  icon_url: string;
-  title: string;
-  sub_title: string;
-}
+import { computed, defineAsyncComponent, ref } from "vue";
 
 interface Props {
-  apps?: Array<app>;
+  currentApp: "console" | "db" | "platform" | "billing" | "selfhost" | "learn" | "grafana";
+  baseUrl: string;
 }
 
-withDefaults(defineProps<Props>(), {
-  apps: () => [],
+const props = withDefaults(defineProps<Props>(), {
+  currentApp: "platform",
+  baseUrl: "https://appscode.com",
 });
 
+const appList = [
+  {
+    name: "console",
+    icon_url: "https://cdn.appscode.com/images/products/console/console_512x512.svg",
+    title: "Console",
+    port: "5990",
+    sub_title: "Manage your kubernetes clusters",
+  },
+  {
+    name: "db",
+    icon_url: "https://cdn.appscode.com/images/products/kubedb/kubedb-512x512_1.svg",
+    title: "KubeDB",
+    port: "5996",
+    sub_title: "Manage your databases",
+  },
+  {
+    name: "grafana",
+    icon_url: "https://cdn.appscode.com/images/products/others/logos/grafana.svg",
+    title: "Grafana",
+    port: "3005",
+    sub_title: "Analyze your activities",
+  },
+  {
+    name: "selfhost",
+    icon_url: "https://cdn.appscode.com/images/products/selfhost/logos/selfhost.svg",
+    title: "SelfHost",
+    port: "5993",
+    sub_title: "Host AppsCode on your own cluster",
+  },
+  {
+    name: "billing",
+    icon_url: "https://cdn.appscode.com/images/products/billing/logos/billing.svg",
+    title: "Billing",
+    port: "5995",
+    sub_title: "Manage your contracts, licenses & billings",
+  },
+  {
+    name: "learn",
+    icon_url: "https://cdn.appscode.com/images/products/learn/logos/learn.svg",
+    title: "Learn",
+    port: "5988",
+    sub_title: "Be an Expert in Cloud Native technologies",
+  },
+];
+
 const NavbarItem = defineAsyncComponent(() => import("./NavbarItem.vue"));
 const NavbarItemContent = defineAsyncComponent(() => import("./NavbarItemContent.vue"));
 const showDrawer = ref(false);
@@ -22,6 +63,39 @@ const showDrawer = ref(false);
 function handleIsActiveChange(isActive: string) {
   showDrawer.value = !!isActive?.length;
 }
+
+const getUrl = (product: (typeof appList)[0]) => {
+  if (props.baseUrl.search("bb.test") !== -1) {
+    return `http://bb.test:${product.port}/${product.name}`;
+  } else if (props.baseUrl.search("localhost") !== -1) {
+    return `http://localhost:${product.port}/${product.name}`;
+  }
+
+  return `${props.baseUrl}/${product.name}`;
+};
+
+const appListWithUrl = appList.map((el) => {
+  return {
+    ...el,
+    url: getUrl(el),
+  };
+});
+
+const isSelfHosted = computed(() => {
+  const list = ["https://appscode.ninja", "https://appscode.com", "http://bb.test:8080"];
+  return !list.includes(props.baseUrl);
+});
+
+const filteredAppList = appListWithUrl.filter((element) => {
+  // remove own app from dropdown
+  if (element.name === props.currentApp) return false;
+
+  // remove billing selfhost & learn from selfhost mode
+  let selfHostList = ["billing", "selfhost", "learn"];
+  if (isSelfHosted.value && selfHostList.includes(element.name)) return false;
+
+  return true;
+});
 </script>
 
 <template>
@@ -63,7 +137,7 @@ function handleIsActiveChange(isActive: string) {
         <div v-if="showDrawer">
           <navbar-item-content class="navbar-dropdown-wrapper" style="right: -30px">
             <ul class="ac-scrollbar p-0 app-drawer">
-              <li v-for="app in apps" :key="app.url">
+              <li v-for="app in filteredAppList" :key="app.url">
                 <a :href="app.url">
                   <article class="media">
                     <figure class="media-left">

package/vue-components/v3/navbar/Appdrawer2.vue

@@ -1,175 +0,0 @@
-<script setup lang="ts">
-import { computed, defineAsyncComponent, ref } from "vue";
-
-interface Props {
-  currentApp: "console" | "db" | "platform" | "billing" | "selfhost" | "learn" | "grafana";
-  baseUrl: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  currentApp: "platform",
-  baseUrl: "https://appscode.com",
-});
-
-const appList = [
-  {
-    name: "console",
-    icon_url: "https://cdn.appscode.com/images/products/console/console_512x512.svg",
-    title: "Console",
-    port: "5990",
-    sub_title: "Manage your kubernetes clusters",
-  },
-  {
-    name: "db",
-    icon_url: "https://cdn.appscode.com/images/products/kubedb/kubedb-512x512_1.svg",
-    title: "KubeDB",
-    port: "5996",
-    sub_title: "Manage your databases",
-  },
-  {
-    name: "grafana",
-    icon_url: "https://cdn.appscode.com/images/products/others/logos/grafana.svg",
-    title: "Grafana",
-    port: "3005",
-    sub_title: "Analyze your activities",
-  },
-  {
-    name: "selfhost",
-    icon_url: "https://cdn.appscode.com/images/products/selfhost/logos/selfhost.svg",
-    title: "SelfHost",
-    port: "5993",
-    sub_title: "Host AppsCode on your own cluster",
-  },
-  {
-    name: "billing",
-    icon_url: "https://cdn.appscode.com/images/products/billing/logos/billing.svg",
-    title: "Billing",
-    sub_title: "Manage your contracts, licenses & billings",
-  },
-  {
-    name: "learn",
-    icon_url: "https://cdn.appscode.com/images/products/learn/logos/learn.svg",
-    title: "Learn",
-    sub_title: "Be an Expert in Cloud Native technologies",
-  },
-];
-
-const NavbarItem = defineAsyncComponent(() => import("./NavbarItem.vue"));
-const NavbarItemContent = defineAsyncComponent(() => import("./NavbarItemContent.vue"));
-const showDrawer = ref(false);
-
-function handleIsActiveChange(isActive: string) {
-  showDrawer.value = !!isActive?.length;
-}
-
-const getUrl = (product: (typeof appList)[0]) => {
-  if (props.baseUrl.search("bb.test") !== -1) {
-    return `http://bb.test:${product.port}/${product.name}`;
-  } else if (props.baseUrl.search("localhost") !== -1) {
-    return `http://localhost:${product.port}/${product.name}`;
-  }
-
-  return `${props.baseUrl}/${product.name}`;
-};
-
-const appListWithUrl = appList.map((el) => {
-  return {
-    ...el,
-    url: getUrl(el),
-  };
-});
-
-const isSelfHosted = computed(() => {
-  const list = ["https://appscode.ninja", "https://appscode.com", "http://bb.test:8080"];
-  return !list.includes(props.baseUrl);
-});
-
-const filteredAppList = appListWithUrl.filter((element) => {
-  // remove own app from dropdown
-  if (element.name === props.currentApp) return false;
-
-  // remove billing selfhost & learn from selfhost mode
-  let selfHostList = ["billing", "selfhost", "learn"];
-  if (isSelfHosted.value && selfHostList.includes(element.name)) return false;
-
-  return true;
-});
-</script>
-
-<template>
-  <navbar-item @on-is-active-change="handleIsActiveChange">
-    <template #navbar-item>
-      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-          d="M6.66667 2H2V6.66667H6.66667V2Z"
-          stroke="#061B2D"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M14 2H9.33337V6.66667H14V2Z"
-          stroke="#061B2D"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M14 9.33334H9.33337V14H14V9.33334Z"
-          stroke="#061B2D"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M6.66667 9.33334H2V14H6.66667V9.33334Z"
-          stroke="#061B2D"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </template>
-    <template #navbar-content>
-      <transition>
-        <div v-if="showDrawer">
-          <navbar-item-content class="navbar-dropdown-wrapper" style="right: -30px">
-            <ul class="ac-scrollbar p-0 app-drawer">
-              <li v-for="app in filteredAppList" :key="app.url">
-                <a :href="app.url">
-                  <article class="media">
-                    <figure class="media-left">
-                      <p class="image">
-                        <img :src="app.icon_url" />
-                      </p>
-                    </figure>
-                    <div class="media-content">
-                      <div class="content">
-                        <p>
-                          <strong>{{ app.title }}</strong>
-                          <span>{{ app.sub_title }}</span>
-                        </p>
-                      </div>
-                    </div>
-                  </article>
-                </a>
-              </li>
-            </ul>
-          </navbar-item-content>
-        </div>
-      </transition>
-    </template>
-  </navbar-item>
-</template>
-
-<style scoped>
-.v-enter-active,
-.v-leave-active {
-  transition: opacity 0.5s ease;
-}
-
-.v-enter-from,
-.v-leave-to {
-  opacity: 0;
-}
-</style>