@appscode/design-system 2.4.26-alpha-2 → 2.4.26

package/main.scss

@@ -16,14 +16,11 @@
 // COMPONENTS
 // @import "@/components/vue-components/styles/components/all";
 @import "@/components/vue-components/styles/components/button";
-@import "@/components/vue-components/styles/components/avatar";
 @import "@/components/vue-components/styles/components/terminal";
 @import "@/components/vue-components/styles/components/steps";
 @import "@/components/vue-components/styles/components/code-preview/all";
 @import "@/components/vue-components/styles/components/form-fields/input";
-@import "@/components/vue-components/styles/components/form-fields/check-radio-switch";
 @import "@/components/vue-components/styles/components/form-fields/custom-selectbox";
 @import "@/components/vue-components/styles/components/ui-builder/vue-open-api";
 @import "@/components/vue-components/styles/components/ui-builder/ui-builder";
-@import "@/components/vue-components/styles/components/dropdown.scss";
 // @import "@/components/vue-components/styles/theme/appscode.scss";

package/package.json

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

package/vue-components/styles/base/utilities/_colors.scss

@@ -56,7 +56,7 @@ $secondary-dark-grey: hsl($secondary-hue, 10%, 10%);
 $secondary-light-gray: hsl($secondary-hue, 10%, 96%);
 $secondary-dark-gray: hsl($secondary-hue, 10%, 10%);
 
-$color-text: hsl($secondary-hue, 10%, 25%);
+$color-text: hsl($secondary-hue, 10%, 35%);
 $color-heading: hsl($secondary-hue, 10%, 10%);
 $color-label: hsl($secondary-hue, 20%, 30%);
 $color-link: hsl($secondary-hue, 40%, 20%);

package/vue-components/styles/base/utilities/_global.scss

@@ -333,19 +333,6 @@ hr {
   }
 }
 
-.overflow-y-hidden {
-  overflow-y: hidden;
-}
-.overflow-x-hidden {
-  overflow-x: hidden;
-}
-.overflow-y-auto {
-  overflow-y: auto;
-}
-.overflow-x-auto {
-  overflow-x: auto;
-}
-
 .is-transparent-bg {
   background-color: transparent !important;
 }

package/vue-components/styles/base/utilities/_typography.scss

@@ -10,7 +10,7 @@ body {
   font-family: $font-paragraph;
   font-weight: 400;
   font-size: 13px;
-  color: $color-text;
+  color: $color-heading;
 }
 
 p {

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

@@ -145,7 +145,7 @@ const onSelect = (selectedOption: unknown, id: string) => emit("select", selecte
       :options="options"
       :placeholder="placeholderText"
       :disabled="disabled || isLoaderActive"
-      :allow-empty="false"
+      :allow-empty="allowEmpty"
       :show-labels="false"
       :taggable="taggable"
       :close-on-select="true"

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

@@ -1,37 +1,35 @@
-<script setup lang="ts">
-import { defineAsyncComponent } from "vue";
-
-interface Props {
-  placeholder?: string;
-  size?: string;
-  loading?: boolean;
-  withResult?: boolean;
-}
-withDefaults(defineProps<Props>(), {
-  placeholder: "Search what you are looking for",
-  size: "is-small",
-  loading: false,
-  withResult: false,
-});
-
-const SearchIcon = defineAsyncComponent(() => import("./../icons/SearchIcon.vue"));
-const RefreshIcon = defineAsyncComponent(() => import("./../icons/RefreshIcon.vue"));
-</script>
 <template>
   <!-- searchbar  -->
   <div class="searchbar ac-single-input is-small is-relative">
     <label for="search">
       <span class="icon">
-        <RefreshIcon v-if="loading" class="is-spin" />
-        <SearchIcon v-else />
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="w-6 h-6"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+          />
+        </svg>
       </span>
     </label>
-    <input id="search" type="text" :placeholder="placeholder" class="pl-48" />
+    <input id="search" type="text" placeholder="Search what you are looking for" class="pl-48" />
 
     <!-- use .is-absolute  -->
-    <div v-if="withResult" class="search-result-box panel is-fullwidth z-900">
-      <div class="search-content ac-vscrollbar p-0" style="max-height: 350px; overflow-y: auto">
-        <slot name="search-result" />
+    <div id="meilisearch-hideid" class="search-result-box panel is-fullwidth">
+      <div class="search-content" id="meilisearch-hits" style="max-height: 350px; overflow-y: auto">
+        <a class="panel-block is-flex-direction-column is-align-items-flex-start px-5 py-4" v-for="i in 6" :key="i">
+          <h2 class="is-size-5 has-text-primary">Changelog | <em>Kube</em>DB</h2>
+          <p class="is-ellipsis-2">
+            <em>Kube</em>DB v2020.07.10-beta.1 (2020-07-10) kubedb/apimachinery v0.14.0-beta.1 157a8724 Update for…
+          </p>
+        </a>
       </div>
     </div>
   </div>

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

@@ -8,14 +8,14 @@ withDefaults(defineProps<{ direction?: "up" | "down" }>(), {
   <svg
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
-    height="16px"
     width="16px"
+    height="16px"
     viewBox="0 0 24 24"
     stroke-width="1.5"
     stroke="currentColor"
     class="size-6"
     :style="direction === 'up' ? 'transform: rotate(0deg)' : 'transform: rotate(-180deg)'"
   >
-    <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
   </svg>
 </template>

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

@@ -1,14 +1,21 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ direction?: "up" | "down" }>(), {
+  direction: "up",
+});
+</script>
+
 <template>
   <svg
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
-    width="16px"
     height="16px"
+    width="16px"
     viewBox="0 0 24 24"
     stroke-width="1.5"
     stroke="currentColor"
     class="size-6"
+    :style="direction === 'up' ? 'transform: rotate(0deg)' : 'transform: rotate(-180deg)'"
   >
-    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+    <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
   </svg>
 </template>

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

@@ -1,18 +1,21 @@
 <script setup lang="ts">
+import { setCookie } from "tiny-cookie";
 import { computed, defineAsyncComponent, ref } from "vue";
 
 interface Props {
   currentApp: "console" | "db" | "platform" | "billing" | "selfhost" | "learn" | "grafana";
   baseUrl: string;
+  activeOrganization: string;
+  rootDomain: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   currentApp: "platform",
   baseUrl: "https://appscode.com",
+  activeOrganization: "",
+  rootDomain: "",
 });
 
-defineEmits(["onClick"]);
-
 const appList = [
   {
     name: "console",
@@ -98,6 +101,11 @@ const filteredAppList = appListWithUrl.filter((element) => {
 
   return true;
 });
+
+const handleClick = (url: string) => {
+  setCookie("gorg", props.activeOrganization, { domain: props.rootDomain });
+  window.open(url, "_blank");
+};
 </script>
 
 <template>
@@ -140,7 +148,7 @@ const filteredAppList = appListWithUrl.filter((element) => {
           <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 @click.prevent.stop="$emit('onClick', app.url)">
+                <a @click.prevent.stop="handleClick(app.url)">
                   <article class="media">
                     <figure class="media-left">
                       <p class="image">

package/vue-components/v3/table/table-cell/ArrayCell.vue

@@ -40,9 +40,9 @@ const printableStringObjs = computed(() => {
 
 const indexOfCharacterLengthExceed = computed(() => {
   let idx = -1;
-  let cumulativeLen = 2;
+  let cumulativeLen = 4;
   for (const [index, po] of printableStringObjs.value.entries()) {
-    const newLen = cumulativeLen + po.print.length + 2;
+    const newLen = cumulativeLen + po.print.length + 4;
     if (newLen + 4 > props.maxCharacterLength) {
       idx = index;
       break;

package/vue-components/v3/table/table-cell/ObjectCell.vue

@@ -40,9 +40,9 @@ const printableStringObjs = computed(() => {
 
 const indexOfCharacterLengthExceed = computed(() => {
   let idx = -1;
-  let cumulativeLen = 2;
+  let cumulativeLen = 4;
   for (const [index, po] of printableStringObjs.value.entries()) {
-    const newLen = cumulativeLen + po.print.length + 2;
+    const newLen = cumulativeLen + po.print.length + 4;
     if (newLen + 4 > props.maxCharacterLength) {
       idx = index;
       break;

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

@@ -1,16 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-    class="size-6"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z"
-    />
-  </svg>
-</template>

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

@@ -1,16 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-    class="w-6 h-6"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
-    />
-  </svg>
-</template>

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

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  fill?: boolean;
-}
-withDefaults(defineProps<Props>(), {
-  fill: false,
-});
-</script>
-
-<template>
-  <svg v-if="fill" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
-    <path
-      fill-rule="evenodd"
-      d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
-      clip-rule="evenodd"
-    />
-  </svg>
-  <svg
-    v-else
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-    class="size-6"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"
-    />
-  </svg>
-</template>

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

@@ -1,16 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-    class="size-6"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
-    />
-  </svg>
-</template>