@appscode/design-system 2.17.36 → 2.17.38

package/main.scss

@@ -17,6 +17,7 @@
 // @import "@/components/vue-components/styles/components/all";
 @import "@/components/vue-components/styles/components/button";
 @import "@/components/vue-components/styles/components/table";
+@import "@/components/vue-components/styles/components/tabs";
 @import "@/components/vue-components/styles/components/avatar";
 @import "@/components/vue-components/styles/components/terminal";
 @import "@/components/vue-components/styles/components/steps";
@@ -30,6 +31,8 @@
 @import "@/components/vue-components/styles/components/dropdown";
 @import "@/components/vue-components/styles/components/badge-tags";
 @import "@/components/vue-components/styles/components/platform-design";
-@import "@/components/vue-components/styles/components/cards/usage-table-card";
+@import "@/components/vue-components/styles/components/cards/cards-group";
+@import "@/components/vue-components/styles/components/file-explore";
+@import "@/components/vue-components/styles/components/ac-duration";
 
 // @import "@/components/vue-components/styles/theme/appscode.scss";

package/package.json

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

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

@@ -690,3 +690,11 @@ $whitespace-values: normal, nowrap, pre, pre-line, pre-wrap, break-spaces;
 .is-no-underlined {
   text-decoration: none !important;
 }
+
+.container-sm {
+  max-width: 1080px;
+  margin: 0 auto;
+  &.is-fullwidth {
+    max-width: 100%;
+  }
+}

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

@@ -164,3 +164,8 @@ strong {
 .has-text-primary {
   color: $ac-primary !important;
 }
+.text-code {
+  font-family: "Inconsolata", monospace;
+  font-size: 14px;
+  color: $color-heading;
+}

package/vue-components/styles/components/_ac-duration.scss

@@ -0,0 +1,50 @@
+.ac-duration-wrapper {
+  position: relative;
+  z-index: 1;
+  .ac-duration {
+    position: absolute;
+    bottom: 30px;
+    left: 0;
+    z-index: 999;
+  }
+}
+.ac-duration {
+  height: 261px;
+  display: inline-flex;
+  flex-direction: column;
+  text-align: center;
+  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.15);
+  border: 1px solid $color-border;
+  background-color: #fff;
+  overflow: hidden;
+  border-radius: 4px;
+  .duration {
+    padding: 8px 16px;
+  }
+
+  .duration-header {
+    background-color: $secondary-light-gray;
+    padding: 8px;
+  }
+  .duration-body {
+    ul {
+      li {
+        padding: 6px;
+        // color: $color-border-dark;
+        cursor: all-scroll;
+        user-select: none;
+      }
+      max-height: 150px;
+      overflow-y: auto;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+  .duration-footer {
+    display: flex;
+    justify-content: end;
+    padding: 4px;
+    border-top: 1px solid $color-border;
+  }
+}

package/vue-components/styles/components/_file-explore.scss

@@ -0,0 +1,31 @@
+.file-explore {
+  .content-sidebar {
+    width: 220px;
+    border: 1px solid $color-border;
+    padding: 8px;
+    min-height: 400px;
+    border-radius: 4px;
+
+    li {
+      a {
+        display: flex;
+        color: $color-text;
+        padding: 4px 8px;
+        border-radius: 4px;
+        &:hover {
+          color: $color-heading;
+        }
+      }
+      &.is-active {
+        a {
+          color: $color-heading;
+          background-color: $secondary-light-gray;
+          border: 1px solid $color-border;
+        }
+      }
+    }
+  }
+  .right-content {
+    width: calc(100% - 200px);
+  }
+}

package/vue-components/styles/components/_time-picker.scss

@@ -0,0 +1,140 @@
+/* ========== Variables ========== */
+$cool-gray: #eff1f1;
+$secondary-light-gray: #f7f9fa;
+$scroll-highlight: darken($cool-gray, 10%);
+
+/* ========== Mixins ========== */
+@mixin hide-scrollbars {
+  -ms-overflow-style: none; // IE 10+
+  scrollbar-width: none; // Firefox
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* ========== Container ========== */
+.picker-wrapper {
+  background: white;
+  box-shadow: 0 0.5vw 2vw -5px rgba(0, 0, 0, 0.2);
+  display: inline-flex;
+  flex-direction: column;
+  border-radius: 8px;
+}
+
+/* ========== Header ========== */
+.duration-header {
+  background-color: $secondary-light-gray;
+  text-align: center;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  h6 {
+    font-size: 13px;
+    margin: 0;
+    font-weight: 600;
+  }
+}
+
+/* ========== Title Labels ========== */
+.d-title {
+  display: inline-grid;
+  grid-template-columns: repeat(3, fit-content(100px));
+  justify-content: end;
+  gap: 0.5em;
+  font-weight: bold;
+  font-size: 11px;
+  padding: 8px 1rem 0;
+
+  span {
+    width: 40px;
+    text-align: center;
+    margin-right: 1em;
+  }
+}
+
+/* ========== Picker Section ========== */
+.picker {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: repeat(3, fit-content(80px));
+  justify-content: end;
+  padding: 0 1rem;
+  font-size: 13px;
+  font-weight: 500;
+  font-feature-settings: "tnum";
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  &::before {
+    top: 0;
+    height: 50%;
+    background: linear-gradient(white, rgba(255, 255, 255, 0));
+  }
+
+  &::after {
+    bottom: 0;
+    height: 50%;
+    background: linear-gradient(rgba(255, 255, 255, 0), white);
+  }
+
+  ul {
+    @include hide-scrollbars();
+    max-height: 190px;
+    overflow-y: scroll;
+    padding: 1.5em 0;
+    margin-right: 1em;
+    scroll-snap-type: y mandatory;
+    scroll-behavior: smooth;
+
+    li {
+      scroll-snap-align: center;
+      height: 2.35em;
+      width: 40px;
+      text-align: center;
+      user-select: none;
+      cursor: pointer;
+      line-height: 2.35em;
+      border-radius: 4px;
+
+      &:hover {
+        background: #f0f0f0;
+      }
+    }
+  }
+}
+
+/* ========== Highlight Window ========== */
+.picker-window {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  height: 2.4em;
+  transform: translateY(-52%);
+  border-top: 1px solid $scroll-highlight;
+  border-bottom: 1px solid $scroll-highlight;
+  pointer-events: none;
+  z-index: 2;
+}
+
+/* ========== Footer Buttons ========== */
+.duration-footer {
+  padding: 0 1rem 1rem;
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+
+  .buttons {
+    display: flex;
+    gap: 0.5rem;
+  }
+}

package/vue-components/styles/components/cards/_all.scss

@@ -7,4 +7,4 @@
 @import "payment-card";
 @import "subscription-card";
 @import "usage-card";
-@import "usage-table-card";
+@import "cards-group";

package/vue-components/styles/components/cards/_cards-group.scss

@@ -0,0 +1,26 @@
+.card-group {
+  background-color: #f4f5f6;
+  border: 1px solid $color-border;
+  border-radius: 8px;
+  position: relative;
+  z-index: 1;
+  .card-label {
+    position: absolute;
+    content: "";
+    left: 16px;
+    top: -10px;
+    &::after {
+      position: absolute;
+      content: "";
+      left: 0px;
+      top: 9px;
+      background-color: #fff;
+      width: 100%;
+      height: 2px;
+      z-index: -1;
+    }
+  }
+  .section-card {
+    background-color: #fff;
+  }
+}

package/vue-components/styles/components/form-fields/_input-card.scss

@@ -2,7 +2,7 @@
 .card-select {
   min-height: 98px;
   padding: 16px;
-  background-color: $white-100;
+  background-color: $secondary-light-gray;
   border: 1px solid $color-border;
   box-sizing: border-box;
   border-radius: 4px;
@@ -104,6 +104,8 @@
   }
 
   &.is-selected {
+    background-color: $primary-light-gray;
+    box-shadow: 0px 8px 50px rgba(0, 0, 0, 0.2);
     &::after {
       position: absolute;
       content: "";

package/vue-components/styles/components/form-fields/_input.scss

@@ -338,7 +338,30 @@
       }
     }
   }
-
+  .up-down-btns {
+    position: absolute;
+    right: 1px;
+    top: 1px;
+    button {
+      background-color: #fff;
+      border: 1px solid $color-border;
+      height: 17px;
+      width: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      &:hover {
+        border-color: $color-border-dark;
+      }
+      &.arrow-up {
+        border-radius: 4px 4px 0 0;
+      }
+      &.arrow-down {
+        border-radius: 0 0 4px 4px;
+      }
+    }
+  }
   .ac-search-button {
     background-color: transparent;
     border: none;
@@ -579,3 +602,42 @@
     }
   }
 }
+// icon with input
+.icon-with-input,
+.input-with-icon {
+  position: relative;
+  border: 1px solid $color-border-dark;
+  border-radius: 4px;
+  display: flex;
+  &.is-inactive {
+    background-color: #f0efef;
+  }
+
+  .icon {
+    width: 36px;
+    height: 36px;
+    border-right: 1px solid $color-border-dark;
+  }
+  input {
+    border: none;
+    width: calc(100% - 36px);
+    height: 36px;
+    padding: 4px 8px;
+    border-radius: 0 4px 4px 0;
+    background-color: transparent;
+    &:focus {
+      outline: 1px solid $color-border-dark;
+    }
+  }
+}
+.input-with-icon {
+  .icon {
+    border-right: none;
+    border-left: 1px solid $color-border-dark;
+    cursor: pointer;
+    transition: 0.3s ease-in-out;
+    &:hover {
+      background-color: $secondary-light-gray;
+    }
+  }
+}

package/vue-components/v3/alert/AlertLinked.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+const AlertMessage = defineAsyncComponent(() => import("@/components/vue-components/v3/alert/AlertMessage.vue"));
+const InfoLightIcon = defineAsyncComponent(() => import("@/components/vue-components/v3/icons/InfoLightIcon.vue"));
+
+interface Props {
+  message?: string;
+  hasLink?: boolean;
+  linkTitle?: string;
+  linkAddress?: string;
+  modifierClasses?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  linkTitle: "Link",
+  linkAddress: "#",
+  hasLink: false,
+});
+</script>
+
+<template>
+  <AlertMessage :modifier-classes="modifierClasses">
+    <template #icon>
+      <InfoLightIcon />
+    </template>
+    <template #custom-text>
+      <p>
+        {{ message }} <a v-if="hasLink" :href="linkAddress">{{ linkTitle }}</a>
+      </p>
+    </template>
+  </AlertMessage>
+</template>

package/vue-components/v3/config-secret/ConfigSecret.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+const SectionContent = defineAsyncComponent(() => import("@/components/vue-components/v3/section/SectionContent.vue"));
+const AlertMessage = defineAsyncComponent(() => import("@/components/vue-components/v3/alert/AlertMessage.vue"));
+const InfoLightIcon = defineAsyncComponent(() => import("@/components/vue-components/v3/icons/InfoLightIcon.vue"));
+
+import CustomSelect from "@/components/vue-components/v3/form-fields/CustomSelect.vue";
+import CodeGroup from "@/components/vue-components/v3/code-preview/CodeGroup.vue";
+</script>
+<template>
+  <SectionContent class="mt-24" :custom="true">
+    <template #custom-header>
+      <div class="tabs ac-tabs" style="margin: -8px -16px">
+        <ul>
+          <li class="is-active"><a href="#">NEW CONFIG SECRET</a></li>
+          <li><a href="#">APPLY CONFIG</a></li>
+          <li><a href="#">REMOVE</a></li>
+        </ul>
+      </div>
+    </template>
+    <template #section-body>
+      <h5>Config Secret</h5>
+      <p>Select a configuration secret from the available list to update your database settings</p>
+      <CustomSelect :multiselect="false" class="mt-16 mb-0 width-300" />
+
+      <p>You have selected <strong>db_config</strong> secret</p>
+      <code-group code="code here">
+        <template #left>
+          <h5>Value *</h5>
+        </template>
+      </code-group>
+
+      <br />
+
+      <div class="is-flex gap-8 file-explore">
+        <div class="left-content content-sidebar">
+          <ul>
+            <li class="is-active"><a href="#">db_config</a></li>
+            <li><a href="#">user.conf</a></li>
+            <li><a href="#">mongod.conf</a></li>
+          </ul>
+          <AlertMessage modifier-classes="is-info" class="mt-8">
+            <template #icon>
+              <InfoLightIcon />
+            </template>
+            <template #custom-text>
+              <p>Kubedb er <a href="#">link</a> asbe for config secret</p>
+            </template>
+          </AlertMessage>
+        </div>
+        <div class="right-content">
+          <code-group code="code here">
+            <template #left>
+              <h5>Value *</h5>
+            </template>
+          </code-group>
+        </div>
+      </div>
+    </template>
+  </SectionContent>
+</template>

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

@@ -1,11 +1,22 @@
 <script setup lang="ts">
+import ArrowIcon from "../icons/ArrowIcon.vue";
 interface Props {
   modifierClasses?: string;
+  type?: string;
+  hasModifierBtn?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
   modifierClasses: "",
+  type: "",
+  hasModifierBtn: false,
 });
+
+const emit = defineEmits(["updateCount"]);
+
+function changes(value: number) {
+  emit("updateCount", value);
+}
 </script>
 
 <template>
@@ -15,6 +26,15 @@ withDefaults(defineProps<Props>(), {
     <slot />
     <slot name="eye-switcher" />
     <slot name="error" />
+
+    <div class="up-down-btns" v-if="hasModifierBtn">
+      <button class="arrow-up" title="Button Up" @click="changes(1)">
+        <ArrowIcon direction="down" />
+      </button>
+      <button class="arrow-down" title="Button Down" @click="changes(-1)">
+        <ArrowIcon />
+      </button>
+    </div>
   </div>
 </template>
 

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

@@ -12,6 +12,7 @@ interface Props {
   errorMsg?: string;
   isRow?: boolean;
   hasDescription?: boolean;
+  ellipsis?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -20,6 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
   errorMsg: "",
   isRow: false,
   hasDescription: false,
+  ellipsis: "is-ellipsis-2",
 });
 const includeSelectedClass = (optionValue: unknown) => {
   return props.hasDescription && JSON.stringify(model.value) === JSON.stringify(optionValue);
@@ -62,7 +64,7 @@ const bodyClass = computed(() => {
       <p v-show="errorMsg" class="has-text-danger">
         <slot name="message" />
       </p>
-      <p v-if="hasDescription" class="is-ellipsis-2 mt-8" :title="option.description">
+      <p v-if="hasDescription" class="mt-8" :class="ellipsis" :title="option.description">
         {{ option.description }}
       </p>
       <p v-show="errorMsg" class="has-text-danger mb-16">

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

@@ -0,0 +1,8 @@
+<template>
+  <svg width="6" height="45" viewBox="0 0 6 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M3.5 1C3.5 0.723858 3.27614 0.5 3 0.5C2.72386 0.5 2.5 0.723858 2.5 1H3.5ZM3 45L5.88675 40H0.113249L3 45ZM3 1H2.5V40.5H3H3.5V1H3Z"
+      fill="#CBD5E1"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,14 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+    <!-- Icon from Huge Icons by Hugeicons - undefined -->
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+      d="M20 12H4m11 5s5-3.682 5-5s-5-5-5-5"
+      color="currentColor"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,15 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+    <g
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+      color="currentColor"
+    >
+      <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10s10-4.477 10-10" />
+      <path d="M12.242 17v-5c0-.471 0-.707-.146-.854c-.147-.146-.382-.146-.854-.146m.75-3h.009" />
+    </g>
+  </svg>
+</template>

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

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256">
+    <path
+      fill="currentColor"
+      d="M152 96h-48a8 8 0 0 0-8 8v48a8 8 0 0 0 8 8h48a8 8 0 0 0 8-8v-48a8 8 0 0 0-8-8m-8 48h-32v-32h32Zm88 0h-16v-32h16a8 8 0 0 0 0-16h-16V56a16 16 0 0 0-16-16h-40V24a8 8 0 0 0-16 0v16h-32V24a8 8 0 0 0-16 0v16H56a16 16 0 0 0-16 16v40H24a8 8 0 0 0 0 16h16v32H24a8 8 0 0 0 0 16h16v40a16 16 0 0 0 16 16h40v16a8 8 0 0 0 16 0v-16h32v16a8 8 0 0 0 16 0v-16h40a16 16 0 0 0 16-16v-40h16a8 8 0 0 0 0-16m-32 56H56V56h144z"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256">
+    <path
+      fill="currentColor"
+      d="M232 56H24A16 16 0 0 0 8 72v128a8 8 0 0 0 16 0v-16h16v16a8 8 0 0 0 16 0v-16h16v16a8 8 0 0 0 16 0v-16h16v16a8 8 0 0 0 16 0v-16h16v16a8 8 0 0 0 16 0v-16h16v16a8 8 0 0 0 16 0v-16h16v16a8 8 0 0 0 16 0v-16h16v16a8 8 0 0 0 16 0V72a16 16 0 0 0-16-16M24 72h208v96H24Zm88 80a8 8 0 0 0 8-8V96a8 8 0 0 0-8-8H48a8 8 0 0 0-8 8v48a8 8 0 0 0 8 8Zm-56-48h48v32H56Zm88 48h64a8 8 0 0 0 8-8V96a8 8 0 0 0-8-8h-64a8 8 0 0 0-8 8v48a8 8 0 0 0 8 8m8-48h48v32h-48Z"
+    />
+  </svg>
+</template>

package/vue-components/v3/icons/StorageIcon-2.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16">
+    <!-- Icon from OpenSearch UI by OpenSearch Contributors - https://github.com/opensearch-project/oui/blob/main/LICENSE.txt -->
+    <g fill="currentColor" fill-rule="evenodd" transform="translate(0 2)">
+      <path
+        fill-rule="nonzero"
+        d="M2 6a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1zm13 2v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1m1-3V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v3c0 .601.271 1.133.69 1.5C.271 6.867 0 7.399 0 8v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8c0-.601-.271-1.133-.689-1.5c.418-.367.689-.899.689-1.5"
+      />
+      <circle cx="4.5" cy="9.5" r="1.5" />
+      <circle cx="4.5" cy="3.5" r="1.5" />
+      <path d="M12 8h1v3h-1zm-2 0h1v3h-1zm2-6h1v3h-1zm-2 0h1v3h-1z" />
+    </g>
+  </svg>
+</template>