@appscode/design-system 2.4.15 → 2.4.17-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/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/custom-selectbox";

package/package.json

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

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

@@ -31,6 +31,7 @@
 @import "terminal";
 @import "tfa";
 @import "transitions";
+@import "steps";
 
 // @import "pricing-table";
 // @import "overview-info";

package/vue-components/styles/components/_options.scss

@@ -88,6 +88,9 @@
     visibility: hidden;
     transition: 0.3s ease-in-out;
     text-align: left;
+    box-shadow:
+      0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
+      0 0px 0 1px rgba(10, 10, 10, 0.02);
 
     li {
       .list-button {

package/vue-components/styles/components/_steps.scss

@@ -0,0 +1,108 @@
+.steps-wrapper {
+  --size: 32px;
+  --line: 4px;
+  ol {
+    display: flex;
+    // gap: 48px;
+    &.is-column {
+      flex-direction: column;
+      align-items: self-start;
+      li {
+        --line: 2px;
+        flex-direction: row;
+        gap: 8px;
+        text-align: left;
+        align-items: baseline;
+        padding-bottom: 24px;
+        .step-header {
+          margin: 0;
+        }
+
+        &:not(&:last-child) {
+          &::before {
+            position: absolute;
+            content: "";
+            height: var(--line);
+            top: 0;
+            left: calc(var(--size) / 2 - var(--line) / 2);
+            order: -1;
+            background-color: #e2e8f0;
+            height: 100%;
+            width: 2px;
+            z-index: -1;
+          }
+        }
+        &:last-child {
+          &::before {
+            display: none;
+          }
+        }
+        &.is-complete {
+          &::before {
+            background-color: $ac-primary !important;
+          }
+        }
+      }
+    }
+    li {
+      display: flex;
+      flex: 1 1 0%;
+      align-items: center;
+      flex-direction: column;
+      position: relative;
+      text-align: center;
+      cursor: pointer;
+      z-index: 1;
+      opacity: 0.7;
+      &.is-active {
+        opacity: 1;
+        .step-header {
+          background-color: $ac-primary;
+          color: #fff;
+        }
+      }
+      &.is-complete {
+        opacity: 1;
+        &:not(&:first-child) {
+          &::before {
+            background-color: $ac-primary;
+          }
+        }
+        p {
+          opacity: 1;
+        }
+      }
+      &:not(&:first-child) {
+        &::before {
+          position: absolute;
+          content: "";
+          height: var(--line);
+          left: calc(-50% + 16px);
+          top: calc(var(--size) / 2 - var(--line) / 2);
+          order: -1;
+          background-color: #e2e8f0;
+          width: calc(100% - var(--size));
+          z-index: -1;
+        }
+      }
+
+      .step-header {
+        background-color: #e2e8f0;
+        align-items: center;
+        display: flex;
+        flex-shrink: 0;
+        height: var(--size);
+        justify-content: center;
+        // margin: auto auto 8px;
+        margin-bottom: 8px;
+        position: relative;
+        width: var(--size);
+        border-radius: 50%;
+      }
+      p {
+        margin: 0;
+        padding: 0;
+      }
+    }
+  }
+}

package/vue-components/styles/components/_table.scss

@@ -45,6 +45,7 @@
         color: $color-heading;
         border: none;
         font-weight: 500;
+        background-color: $secondary-light-gray;
         // background-color: $primary-97;
         // text-transform: uppercase;
         font-weight: 500;
@@ -353,19 +354,29 @@
     }
   }
 
-  &.is-middle-aligned {
-    thead {
+  &.is-middle {
+    tbody {
       tr {
-        th {
+        td {
           vertical-align: middle;
         }
       }
     }
-
+  }
+  &.is-baseline {
     tbody {
       tr {
         td {
-          vertical-align: middle;
+          vertical-align: baseline;
+        }
+      }
+    }
+  }
+  &.is-bottom {
+    tbody {
+      tr {
+        td {
+          vertical-align: bottom;
         }
       }
     }

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

@@ -1,25 +1,39 @@
 <script setup lang="ts">
+import { ref } from "vue";
+
 interface Props {
   modifierClasses?: string;
   message?: string;
+  hasCrossIcon?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
   modifierClasses: "",
-  message:
-    "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut eum deserunt facilis natus ipsum eligendi! Consequuntur illo repudiandae at eius nam, ab omnis eveniet obcaecati.",
+  message: "",
+  hasCrossIcon: false,
 });
+
+const showAlert = ref(true);
+function hideAlert() {
+  showAlert.value = false;
+}
 </script>
 
 <template>
-  <div :class="modifierClasses" class="message is-success">
-    <div class="message-body">
-      <span class="status-icon">
-        <slot name="icon"></slot>
-      </span>
-      <p>{{ message }}</p>
+  <div v-if="showAlert" :class="modifierClasses" class="message">
+    <div class="message-body is-justify-content-space-between">
+      <div class="is-flex is-flex-direction-column gap-4 is-fullwidth">
+        <div class="is-flex is-align-items-center gap-8">
+          <span class="status-icon">
+            <slot name="icon"></slot>
+          </span>
+          <p v-if="message">{{ message }}</p>
+          <slot name="custom-text"></slot>
+        </div>
+        <slot name="buttons"></slot>
+      </div>
 
-      <button class="button is-text">
+      <button v-if="hasCrossIcon" class="button is-text" @click="hideAlert">
         <span class="icon"
           ><svg
             xmlns="http://www.w3.org/2000/svg"

package/vue-components/v3/editor/FilteredFileEditor.vue

@@ -112,7 +112,7 @@ watch(
 </script>
 
 <template>
-  <div class="ac-preview is-not-fixed">
+  <div class="ac-preview is-not-fixed b-t-1">
     <div class="ac-preview-inner">
       <!-- preview body start  -->
       <div
@@ -127,17 +127,20 @@ watch(
         </strong>
         <template v-else>
           <div v-if="!isPreviewLoading && previewYamls" class="left-content">
-            <div class="ac-files ac-hscrollbar ac-vscrollbar pt-0">
+            <div class="sidebar-tabs p-0 pt-16 pr-20">
               <ul v-if="!isPreviewLoading">
                 <li
                   v-for="(previewYaml, idx) in filteredYamls"
                   :key="previewYaml.name + idx"
-                  :class="{ 'is-active': activeKey === previewYaml.uid }"
                   :title="previewYaml.name"
                   data-testid="filtered-file-editor-file-name"
                 >
-                  <a @click.prevent="setActivePreview(previewYaml.uid)">
-                    <span>
+                  <a
+                    @click.prevent="setActivePreview(previewYaml.uid)"
+                    class="is-justify-content-flex-start gap-8 is-align-items-center"
+                    :class="{ 'is-active': activeKey === previewYaml.uid }"
+                  >
+                    <span class="is-flex is-align-items-center">
                       <img src="~@appscode/design-system-images/icons/file-icon.svg" alt="" />
                     </span>
                     <span>{{ previewYaml.name }}</span>

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

@@ -0,0 +1,10 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16">
+    <path
+      fill="currentColor"
+      fill-rule="evenodd"
+      d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353l4.493-6.74a.75.75 0 0 1 1.04-.207"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8s-3.58 8-8 8m-.22-13h-.06c-.4 0-.72.32-.72.72v4.72c0 .35.18.68.49.86l4.15 2.49c.34.2.78.1.98-.24a.71.71 0 0 0-.25-.99l-3.87-2.3V7.72c0-.4-.32-.72-.72-.72"
+    />
+  </svg>
+</template>

package/vue-components/v3/icons/CpuIcon.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/FinanceIcon.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 14 14">
+    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M7 4.5V3M5.5 8.5c0 .75.67 1 1.5 1s1.5 0 1.5-1c0-1.5-3-1.5-3-3c0-1 .67-1 1.5-1s1.5.38 1.5 1M7 9.5V11" />
+      <circle cx="7" cy="7" r="6.5" />
+    </g>
+  </svg>
+</template>

package/vue-components/v3/icons/MemoryIcon.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/steps/Steps.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+const CheckIcon = defineAsyncComponent(() => import("../icons/CheckIcon.vue"));
+interface Props {
+  direction?: string;
+  active?: boolean;
+  complete?: boolean;
+  title?: string;
+  description?: string;
+  count?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  direction: "is-row",
+  active: false,
+  complete: false,
+  title: "Title",
+  description: "Description",
+  count: "1",
+});
+</script>
+
+<template>
+  <div class="steps-wrapper">
+    <ol class="steps" :class="direction">
+      <!-- 'is-active': if active, 'is-complete':  if complete -->
+      <li class="step" :class="{ 'is-active': active, 'is-complete': complete }" v-for="i in 4" :key="i">
+        <div class="step-header">
+          <span class="icon" v-if="complete"><CheckIcon /></span>
+          <span v-else>{{ count }}</span>
+        </div>
+        <div class="is-flex is-flex-direction-column">
+          <h5>{{ title }}</h5>
+          <p>{{ description }}</p>
+        </div>
+      </li>
+    </ol>
+  </div>
+</template>

package/vue-components/v3/table/Table.vue

@@ -15,6 +15,8 @@ interface Props {
   modifierClass?: string;
   isCustom?: boolean;
   tableClass?: string;
+  tableStyle?: string;
+  dataAlign?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -30,6 +32,8 @@ const props = withDefaults(defineProps<Props>(), {
   modifierClass: "",
   isCustom: false,
   tableClass: "",
+  tableStyle: "is-bordered",
+  dataAlign: "is-middle",
 });
 
 const emit = defineEmits(["sort", "scroller"]);
@@ -136,10 +140,12 @@ onUpdated(() => {
     <table-container ref="ac_table_container" @scroller="handleScroller">
       <table
         ref="ac_table"
-        class="table ac-table is-bordered"
+        class="table ac-table"
         :class="[
           !isDynamicWidthTable || isFullTableLoaderActive || isTableEmpty || isLoaderActive ? 'is-fullwidth' : '',
           tableClass,
+          tableStyle,
+          dataAlign,
           // 'ac-striped': !columnStriped,
           // 'is-bordered': columnStriped,
         ]"

package/vue-components/v3/steps/ColoredSteps.vue

@@ -1,85 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  modifierClasses?: string;
-}
-
-withDefaults(defineProps<Props>(), {
-  modifierClasses: "",
-});
-</script>
-
-<template>
-  <div class="colored-steps" :class="modifierClasses">
-    <ol class="steps">
-      <li class="step">
-        <div class="step-header bg-primary"></div>
-        <p>Step 1</p>
-      </li>
-      <li class="step">
-        <div class="step-header bg-info"></div>
-        <p>Step 2</p>
-      </li>
-      <li class="step">
-        <div class="step-header bg-info"></div>
-        <p>Step 2</p>
-      </li>
-      <li class="step">
-        <div class="step-header bg-error"></div>
-        <p>Step 2</p>
-      </li>
-      <li class="step">
-        <div class="step-header bg-warning"></div>
-        <p>Step 2</p>
-      </li>
-    </ol>
-  </div>
-</template>
-
-<style lang="scss">
-.colored-steps {
-  --size: 8px;
-  --line: 1px;
-  ol {
-    display: flex;
-    // gap: 48px;
-
-    li {
-      display: flex;
-      align-items: center;
-      flex-direction: column;
-      position: relative;
-      width: 100px;
-      &:not(&:last-child) {
-        &::before {
-          position: absolute;
-          content: "";
-          height: var(--line);
-          left: 50%;
-          top: calc(var(--size) / 2 - var(--line) / 2);
-          order: -1;
-          background-color: #333;
-          width: calc(100% - var(--size));
-        }
-      }
-
-      .step-header {
-        background-color: $ac-primary;
-        align-items: center;
-        display: flex;
-        flex-shrink: 0;
-        height: var(--size);
-        justify-content: center;
-        margin: auto auto var(--size);
-        position: relative;
-        width: var(--size);
-        border-radius: 50%;
-      }
-      p {
-        font-size: 12px;
-        margin: 0;
-        padding: 0;
-      }
-    }
-  }
-}
-</style>