@appscode/design-system 2.17.25 → 2.17.26-alpha-1

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-1",
   "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;
@@ -494,7 +517,8 @@
   padding: 0;
 }
 
-.ac-search:focus {
+.ac-search:focus,
+.ac-search:not(:placeholder-shown) {
   width: 200px !important;
   padding-right: 10px;
 }
@@ -578,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/cards/UsageTableCard.vue

@@ -1,31 +1,72 @@
 <script setup lang="ts">
-import { defineProps, type Component } from "vue";
+import { defineProps, defineEmits, type Component, defineAsyncComponent } from "vue";
+import AcButton from "../../v3/button/Button.vue";
+const Skeletons = defineAsyncComponent(() => import("../skeleton/Skeletons.vue"));
+const Skeleton = defineAsyncComponent(() => import("../skeleton/Skeleton.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[];
+    isLoaderActive?: boolean;
   }>(),
   {
     title: "Total Usage Data",
     thead: () => [],
     tbody: () => [],
+    isLoaderActive: false,
   },
 );
+
+const emit = defineEmits<{
+  "header-button-click": [index: number];
+}>();
+
+const handleHeaderButtonClick = (index: number) => {
+  emit("header-button-click", index);
+};
 </script>
 
 <template>
   <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 has-text-weight-normal">
+        <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="handleHeaderButtonClick(1)"
+              >({{ header.text }})</ac-button
+            >
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <div v-if="tbody.length === 0 && !isLoaderActive" class="table-row">
+      <div class="table-cell" :style="{ gridColumn: `1 / -1`, textAlign: 'center' }">
+        <strong>
+          Resource Not Found
+          <i class="pl-5 fa fa-exclamation-circle" aria-hidden="true"></i>
+        </strong>
+      </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 +76,18 @@ 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 has-text-weight-normal">
+        <div v-if="isLoaderActive">
+          <skeletons>
+            <template #default>
+              <Skeleton />
+            </template>
+          </skeletons>
+        </div>
+        <div v-else>
+          {{ val }}
+        </div>
+      </div>
     </div>
   </div>
 </template>

package/vue-components/v3/cards/UsageTableCardTwo.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { defineProps, defineEmits, type Component, defineAsyncComponent, ref } from "vue";
+import AcButton from "../../v3/button/Button.vue";
+const Skeletons = defineAsyncComponent(() => import("../skeleton/Skeletons.vue"));
+const Skeleton = defineAsyncComponent(() => import("../skeleton/Skeleton.vue"));
+const LinkIcon = defineAsyncComponent(() => import("../icons/BillableInfo.vue"));
+interface UsageRow {
+  icon?: Component;
+  label: string;
+  values: (string | number)[];
+}
+
+type Header = string | { label: string; button?: boolean; text?: string };
+
+withDefaults(
+  defineProps<{
+    title?: string;
+    thead?: Header[];
+    tbody?: UsageRow[];
+    isLoaderActive?: boolean;
+  }>(),
+  {
+    title: "Total Usage Data",
+    thead: () => [],
+    tbody: () => [],
+    isLoaderActive: false,
+  },
+);
+
+const emit = defineEmits<{
+  "header-button-click": [index: number];
+}>();
+
+const handleHeaderButtonClick = (index: number) => {
+  emit("header-button-click", index);
+};
+
+const hoveredRow = ref<number | null>(null);
+</script>
+
+<template>
+  <div class="columns is-multiline">
+    <div class="column is-12">
+      <h5>{{ title }}</h5>
+      <div class="usage-table-card">
+        <div class="table-row thead">
+          <div class="table-cell has-text-weight-normal">{{ thead[0] }}</div>
+          <div class="table-cell has-text-weight-normal">{{ thead[1] }}</div>
+          <div
+            class="table-cell has-text-weight-normal has-background-white has-text-centered is-flex is-justify-content-center b-1 ml-40"
+          >
+            <span class="width-70 is-flex is-align-items-center is-justify-content-flex-end">{{ thead[2] }}</span>
+            <span class="b-r-1 mx-4"></span>
+            <span class="width-70 is-flex is-align-items-center">{{ thead[3] }}</span>
+            <span class="b-l-1 px-2 is-flex is-align-items-center is-clickable">
+              <ac-button @click="handleHeaderButtonClick(2)" modifier-classes="is-text has-text-primary p-0 height-16">
+                <LinkIcon />
+              </ac-button>
+            </span>
+          </div>
+          <div class="table-cell has-text-weight-normal is-flex is-justify-content-end gap-5">
+            <div>{{ thead[4] }}</div>
+            <div class="is-flex is-clickable">
+              <ac-button modifier-classes="is-text has-text-primary p-0 height-16" @click="handleHeaderButtonClick(1)">
+                <LinkIcon />
+              </ac-button>
+            </div>
+          </div>
+        </div>
+
+        <div v-for="(row, rowIndex) in tbody" :key="rowIndex" class="table-row">
+          <div class="table-cell">
+            <div class="is-flex gap-8">
+              <span class="icon" v-if="row.icon">
+                <component :is="row.icon" />
+              </span>
+              <span>{{ row.label }}</span>
+            </div>
+          </div>
+
+          <div class="table-cell has-text-weight-normal">
+            <div v-if="isLoaderActive">
+              <skeletons>
+                <template #default>
+                  <Skeleton />
+                </template>
+              </skeletons>
+            </div>
+            <div v-else @mouseenter="hoveredRow = rowIndex" @mouseleave="hoveredRow = null">
+              <span>{{ row.values[0] }}</span>
+            </div>
+          </div>
+
+          <div
+            class="table-cell has-text-weight-normal has-background-white has-text-centered is-flex is-justify-content-center b-1 ml-40 relative-cell"
+            :class="{ 'highlighted-cell': hoveredRow === rowIndex }"
+          >
+            <div v-if="hoveredRow === rowIndex" class="tooltip">Sum = ({{ row.values[1] }} + {{ row.values[2] }})</div>
+
+            <span class="width-70 is-flex is-justify-content-flex-end">
+              <Skeleton v-if="isLoaderActive" />
+              <template v-else>{{ row.values[1] }}</template>
+            </span>
+            <span class="b-r-1 mx-4"></span>
+            <span class="width-70 is-flex">
+              <Skeleton v-if="isLoaderActive" />
+              <template v-else>{{ row.values[2] }}</template>
+            </span>
+            <span class="width-30"></span>
+          </div>
+          <div class="table-cell has-text-weight-normal">
+            <div v-if="isLoaderActive">
+              <skeletons>
+                <template #default>
+                  <Skeleton />
+                </template>
+              </skeletons>
+            </div>
+            <div v-else>{{ row.values[3] }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.highlighted-cell {
+  border: 1px dashed #333 !important;
+  background-color: #f1f1f1 !important;
+  position: relative;
+}
+
+.relative-cell {
+  position: relative;
+}
+
+.tooltip {
+  position: absolute;
+  top: -26px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #333;
+  color: #fff;
+  padding: 4px 8px;
+  font-size: 12px;
+  border-radius: 4px;
+  white-space: nowrap;
+  z-index: 10;
+}
+
+.tooltip::after {
+  content: "";
+  position: absolute;
+  bottom: -4px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 5px;
+  border-style: solid;
+  border-color: #333 transparent transparent;
+}
+</style>