@appscode/design-system 2.17.25 → 2.17.26-alpha

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.25",
+  "version": "2.17.26-alpha",
   "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/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;
@@ -578,3 +601,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/cards/UsageTableCard.vue

@@ -1,15 +1,18 @@
 <script setup lang="ts">
 import { defineProps, type Component } from "vue";
-
+import AcButton from "../../v3/button/Button.vue";
 interface UsageRow {
   icon?: Component;
   label: string;
   values: (string | number)[];
 }
+
+type Header = string | { label: string; button?: boolean; text?: string };
+
 withDefaults(
   defineProps<{
     title?: string;
-    thead?: string[];
+    thead?: Header[];
     tbody?: UsageRow[];
   }>(),
   {
@@ -24,8 +27,24 @@ withDefaults(
   <h5 class="mb-8">{{ title }}</h5>
   <div class="usage-table-card">
     <div class="table-row thead">
-      <div v-for="(header, index) in thead" :key="index" class="table-cell">{{ header }}</div>
+      <div v-for="(header, index) in thead" :key="index" class="table-cell">
+        <template v-if="typeof header === 'string'">
+          {{ header }}
+        </template>
+        <template v-else>
+          <div class="is-flex is-align-items-center is-justify-content-flex-end gap-4">
+            <span>{{ header.label }}</span>
+            <ac-button
+              modifier-classes="is-text has-text-primary p-0 height-auto"
+              v-if="header.button"
+              @click="$emit('total-click')"
+              >({{ header.text }})</ac-button
+            >
+          </div>
+        </template>
+      </div>
     </div>
+
     <div v-for="(row, rowIndex) in tbody" :key="rowIndex" class="table-row">
       <div class="table-cell">
         <div class="is-flex gap-8">
@@ -35,7 +54,9 @@ withDefaults(
           <span>{{ row.label }}</span>
         </div>
       </div>
-      <div v-for="(val, valIndex) in row.values" :key="valIndex" class="table-cell">{{ val }}</div>
+      <div v-for="(val, valIndex) in row.values" :key="valIndex" class="table-cell">
+        {{ val }}
+      </div>
     </div>
   </div>
 </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/editor/Editor.vue

@@ -15,7 +15,7 @@ interface Props {
     schema?: Record<string, unknown>;
     uri: string;
   };
-  needsUpdateOnChange?: boolean
+  needsUpdateOnChange?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -29,7 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
   editorTheme: "",
   wordWrap: "on",
   validation: () => ({ uri: "" }),
-  needsUpdateOnChange: false
+  needsUpdateOnChange: false,
 });
 
 const emit = defineEmits(["update:modelValue"]);
@@ -65,8 +65,7 @@ const theme = computed(() => {
 const onChange = (e: Event) => {
   if (typeof e === "string") {
     editorContent.value = e;
-    if(props.needsUpdateOnChange)
-     emit("update:modelValue", e);
+    if (props.needsUpdateOnChange) emit("update:modelValue", e);
   }
 };
 

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>

package/vue-components/v3/node-selection/NodeSelection.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref } from "vue";
+const SectionContent = defineAsyncComponent(() => import("@/components/vue-components/v3/section/SectionContent.vue"));
+const AcSelect = defineAsyncComponent(() => import("@/components/vue-components/v3/form-fields/AcSelect.vue"));
+const AlertMessage = defineAsyncComponent(() => import("@/components/vue-components/v3/alert/AlertMessage.vue"));
+const AcSingleInput = defineAsyncComponent(
+  () => import("@/components/vue-components/v3/form-fields/AcSingleInput.vue"),
+);
+
+interface Props {
+  sectionTitle?: string;
+  policyTitle?: string;
+  policyDescription?: string;
+  policyOptions: Array<{ name: string; id?: string }>;
+  hasInfo?: boolean;
+  infoMessage?: string;
+  topologyTitle?: string;
+  topologyDescription?: string;
+  topologyKey: string;
+  topologyValue: string;
+  modifierClasses?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  hasInfo: false,
+  infoMessage: "",
+});
+
+const machine = ref("");
+</script>
+
+<template>
+  <SectionContent :title="sectionTitle" :class="modifierClasses">
+    <template #section-body>
+      <div class="columns" style="align-items: end">
+        <div class="column is-6">
+          <h6>{{ policyTitle }}</h6>
+          <p>{{ policyDescription }}</p>
+          <AcSelect
+            v-model="machine"
+            :options="policyOptions"
+            :label="policyTitle"
+            group-label="language"
+            show-by="name"
+          />
+        </div>
+        <div v-if="hasInfo" class="column is-6">
+          <AlertMessage modifier-classes="is-info">
+            <template #custom-text>
+              <p><strong>Label Selector:</strong> {{ infoMessage }}</p>
+            </template>
+          </AlertMessage>
+        </div>
+      </div>
+      <div class="columns is-multiline">
+        <div class="column is-12">
+          <h6>{{ topologyTitle }}</h6>
+          <p class="mb-0">{{ topologyDescription }}</p>
+        </div>
+        <div class="column is-6">
+          <ac-single-input>
+            <label for="email" class="ac-label is-required show-label">Key </label>
+            <input id="Key" name="Key" type="Key" class="ac-input bg-white" :placeholder="topologyKey" disabled />
+          </ac-single-input>
+        </div>
+        <div class="column is-6">
+          <ac-single-input>
+            <label for="Value" class="ac-label is-required show-label">Value </label>
+            <input
+              id="Value"
+              name="Value"
+              type="Value"
+              class="ac-input bg-white"
+              :placeholder="topologyValue"
+              disabled
+            />
+          </ac-single-input>
+        </div>
+      </div>
+    </template>
+  </SectionContent>
+</template>