@appscode/design-system 1.1.0-beta.42 → 1.1.0-beta.47

package/components/_all.scss

@@ -27,8 +27,8 @@
 // @import "wizard";
 
 @import "terminal";
-@import "input-card";
 @import "input";
+@import "multi-select";
 @import "report";
 @import "ui-builder/ui-builder";
-@import "ui-builder/vue-open-api";
+@import "ui-builder/vue-open-api";

package/components/_multi-select.scss

@@ -0,0 +1,589 @@
+.multiselect {
+  // margin-top: 3px;
+  // display: flex;
+  // align-items: center;
+  // max-width: 350px;
+  // &.cluster-select {
+  //   .multiselect__tags {
+  //     border: 1px solid $primary-90;
+  //     background-color: $table-header;
+
+  //     .multiselect__input {
+  //       background-color: $table-header;
+  //     }
+  //   }
+  // }
+
+  .multiselect__tags {
+    background-color: $white-100;
+    min-height: 36px;
+    // max-height: 36px;
+    font-weight: 500;
+    width: 100%;
+    border-radius: 4px;
+    border: 1px solid $primary-80;
+    padding: 6px 30px 8px 20px;
+    font-size: 13px;
+    border-radius: 4px;
+
+    .multiselect__placeholder {
+      margin: 0;
+      padding: 0;
+      // padding-top: 2px !important;
+      font-weight: 500;
+      font-size: 13px;
+    }
+
+    .multiselect__tags-wrap {
+      display: flex;
+      align-items: center;
+    }
+
+    .multiselect__tag {
+      background-color: $black-80;
+      margin-top: 4px;
+      margin-bottom: 0;
+
+      .multiselect__tag-icon {
+        font-size: 12px;
+
+        &::after {
+          color: $white-100;
+        }
+
+        &:hover {
+          background-color: hsla(
+            var(--hsl-hue),
+            var(--hsl-saturation),
+            calc(var(--hsl-lightness) - 9%),
+            1
+          );
+        }
+      }
+    }
+
+    .multiselect__input,
+    .multiselect__single {
+      background-color: $white-100;
+      margin-bottom: 0;
+      margin: 0 !important;
+      padding-left: 0;
+      left: 0px;
+      // top: 2px;
+      font-size: 13px !important;
+      font-weight: 500;
+      color: $primary-10;
+      line-height: 1.5;
+    }
+
+    .multiselect__single {
+      margin-top: 3px;
+      margin-bottom: 0;
+    }
+  }
+  .multiselect__select {
+    height: 36px;
+  }
+  .multiselect__content {
+    .multiselect__element {
+      .multiselect__option {
+        padding: 4px 16px;
+        min-height: 32px;
+        font-size: 13px;
+        display: flex;
+        align-items: center;
+        img {
+          width: 30px;
+        }
+        p {
+          font-size: 13px;
+          color: $primary-10;
+        }
+        p:not(.location) {
+          font-weight: 500;
+        }
+        a {
+          display: block;
+          font-weight: 400;
+          margin-top: -12px;
+          margin-bottom: -12px;
+          padding-top: 12px;
+          padding-bottom: 12px;
+        }
+
+        &:hover {
+          background-color: hsla(
+            var(--hsl-hue),
+            var(--hsl-saturation),
+            var(--hsl-lightness),
+            0.2
+          );
+          color: $primary;
+        }
+
+        &.multiselect__option--highlight {
+          background-color: $white-100;
+          color: $primary;
+          &:hover {
+            background-color: $primary-97;
+          }
+
+          &:after {
+            background-color: hsla(
+              var(--hsl-hue),
+              var(--hsl-saturation),
+              var(--hsl-lightness),
+              0.2
+            );
+            color: $primary;
+          }
+        }
+      }
+    }
+  }
+}
+
+.multi-select-wrapper {
+  &.is-last-child-bold {
+    .multiselect {
+      .multiselect__content {
+        .multiselect__element {
+          &:nth-last-child(-n + 3) {
+            .multiselect__option {
+              font-weight: 500;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.multiselect__element {
+  span {
+    label {
+      padding-left: 15px !important;
+      font-size: 13px !important;
+      color: $primary-10 !important;
+
+      &:after {
+        position: inherit !important;
+        content: "" !important;
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+.multiselect__input {
+  &::placeholder {
+    color: $primary-20;
+    font-weight: 400;
+    line-height: 1.6;
+    font-size: 13px;
+  }
+}
+
+.multiselect__tags > span {
+  font-size: 13px;
+  line-height: 1.6;
+  color: $primary-10;
+}
+
+.multi-select-wrapper {
+  position: relative;
+  z-index: 0;
+
+  .multiselect--disabled {
+    opacity: unset;
+  }
+
+  &.is-disable {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    input,
+    .button.is-information,
+    .eye i.fa {
+      cursor: not-allowed;
+    }
+  }
+
+  .multiselect__input {
+    border: none !important;
+  }
+
+  &.has-bg-color {
+    label.show-label {
+      &:after {
+        background-color: transparent;
+      }
+    }
+  }
+
+  &.is-small {
+    label {
+      font-size: 13px;
+      top: 8px;
+
+      &.show-label {
+        font-size: 12px;
+        top: -9px;
+        font-weight: 500;
+        color: $black-5;
+      }
+    }
+
+    .button.is-information {
+      width: 36px;
+      height: 36px;
+    }
+
+    .multiselect__select {
+      height: 100%;
+    }
+
+    .multiselect__tags {
+      .multiselect__tag {
+        padding: 5px 20px 4px 10px;
+        font-size: 12px;
+      }
+    }
+
+    .multiselect {
+      min-height: auto;
+    }
+
+    .multiselect--active {
+      height: 36px !important;
+      z-index: 50;
+    }
+
+    .multiselect .multiselect__tags {
+      min-height: 36px !important;
+      padding: 4px 30px 4px 20px;
+      font-size: 13px;
+
+      .multiselect__single {
+        font-size: 12px;
+      }
+
+      .multiselect__placeholder {
+        padding: 5px 0 0;
+        font-size: 13px;
+        font-weight: 500;
+      }
+    }
+
+    .multiselect__input,
+    .multiselect__single {
+      font-size: 13px !important;
+      font-weight: 500;
+      line-height: 1.5;
+      // padding-bottom: 4px;
+      display: flex;
+      align-items: center;
+
+      &::placeholder {
+        font-weight: 500;
+        line-height: 1.6;
+        font-size: 13px;
+      }
+    }
+  }
+
+  &.is-extra-small {
+    label {
+      font-size: 13px;
+      top: 8px;
+
+      &.show-label {
+        font-size: 12px;
+        top: -9px;
+      }
+    }
+
+    .button.is-information {
+      width: 32px;
+      height: 32px;
+    }
+
+    .multiselect__select {
+      height: 100%;
+    }
+
+    .multiselect__tags {
+      .multiselect__tag {
+        padding: 5px 20px 4px 10px;
+        font-size: 12px;
+      }
+    }
+
+    .multiselect {
+      min-height: auto;
+    }
+
+    .multiselect--active {
+      height: 32px !important;
+      z-index: 50;
+    }
+
+    .multiselect .multiselect__tags {
+      min-height: 32px !important;
+      padding: 3px 30px 4px 20px;
+      font-size: 13px;
+      display: flex;
+      align-items: center;
+      .multiselect__single {
+        font-size: 12px;
+      }
+
+      .multiselect__placeholder {
+        padding: 5px 0 0;
+        font-size: 13px;
+        font-weight: 500;
+      }
+    }
+
+    .multiselect__input,
+    .multiselect__single {
+      font-size: 13px !important;
+      font-weight: 500;
+      line-height: 1.5;
+      // padding-bottom: 4px;
+      display: flex;
+      align-items: center;
+
+      &::placeholder {
+        font-weight: 500;
+        line-height: 1.6;
+        font-size: 13px;
+      }
+    }
+  }
+
+  &.is-danger {
+    input,
+    .ac-card,
+    textarea {
+      border: 1px solid $danger;
+    }
+
+    p {
+      color: $danger;
+    }
+  }
+
+  &.is-loading {
+    input,
+    .ac-card,
+    textarea {
+      border: 1px solid $info;
+      opacity: 0.5;
+    }
+
+    p {
+      color: $info;
+      opacity: 0.5;
+    }
+  }
+
+  .is-danger {
+    font-size: 12px;
+    line-height: 22px;
+    color: $danger;
+    text-align: left;
+
+    i.fa {
+      padding-right: 10px;
+    }
+  }
+
+  .multiselect__select {
+    height: calc(100% - 2px);
+    border-radius: 0 4px 4px 0;
+    background-color: transparent !important;
+  }
+
+  label {
+    font-size: 16px;
+    left: 20px;
+    top: 11px;
+    cursor: text;
+    color: $primary-10;
+    position: absolute;
+    z-index: 99;
+    transition: 0.3s ease-in-out;
+
+    .is-required {
+      img {
+        position: absolute;
+        top: 7px;
+        padding-left: 3px;
+      }
+    }
+
+    &.show-label {
+      top: -10px;
+      left: 15px;
+      padding: 0 5px;
+      font-size: 13px;
+      color: $black-5;
+
+      &::after {
+        background-color: $white-100;
+      }
+    }
+
+    &:after {
+      position: absolute;
+      content: "";
+      left: 0;
+      top: 50%;
+      background-color: $white-100;
+      width: 100%;
+      height: 2px;
+      margin-top: -1px;
+      z-index: -1;
+    }
+
+    &.is-required {
+      &:after {
+        width: calc(100% + 10px);
+      }
+    }
+  }
+}
+li {
+  .multiselect__option {
+    font-size: 13px;
+    color: $primary-10;
+  }
+}
+.multiselect__option--selected {
+  label {
+    right: 30px;
+  }
+}
+.multi-select-wrapper.is-small {
+  .multiselect .multiselect__tags {
+    .multiselect__input,
+    .multiselect__single {
+      top: 3.5px !important;
+    }
+  }
+  .multiselect .multiselect__tags .multiselect__placeholder {
+    padding-top: 3.5px !important;
+  }
+}
+// has info button start
+.multi-select-wrapper {
+  &.has-info-button {
+    .multiselect__select {
+      z-index: 99;
+      right: 30px;
+    }
+    &.has-refresh-button {
+      .multiselect__select {
+        z-index: 99;
+        right: 60px;
+      }
+      .button {
+        &.is-refresh {
+          right: 30px;
+        }
+      }
+    }
+    .button {
+      &.is-information {
+        right: 0;
+      }
+    }
+  }
+  &.has-refresh-button {
+    .multiselect__select {
+      z-index: 99;
+      right: 30px;
+    }
+    .button {
+      &.is-refresh {
+        right: 0;
+      }
+    }
+  }
+
+  .button {
+    &.is-information,
+    &.is-refresh {
+      background-color: transparent;
+      border: none;
+      position: absolute;
+      height: 36px;
+      width: 36px;
+      z-index: 90;
+      margin-top: 0;
+
+      &:focus {
+        outline: none;
+        box-shadow: none;
+        background-color: #e4e8ef;
+        transform: scale(0.8);
+      }
+    }
+    &.is-refresh.spin {
+      i {
+        animation: spin 1s linear infinite;
+      }
+    }
+  }
+}
+
+@-moz-keyframes spin {
+  from {
+    -moz-transform: rotate(0deg);
+  }
+  to {
+    -moz-transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes spin {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+// has info button end
+
+// dark theme end
+/****************************************
+Responsive Classes
+*****************************************/
+// Extra small devices (portrait phones, less than 576px)
+@media (max-width: 575.98px) {
+}
+
+// Small devices (landscape phones, 576px and up)
+@media (min-width: 576px) and (max-width: 767.98px) {
+}
+
+// Medium devices (tablets, 768px and up)
+@media (min-width: 768px) and (max-width: 991.98px) {
+}
+
+// Large devices (desktops, 992px and up)
+@media (min-width: 992px) and (max-width: 1199.98px) {
+}
+
+// Extra large devices (large desktops, 1200px and up)
+@media (min-width: 1200px) {
+}

package/components/_terminal.scss

@@ -67,6 +67,9 @@
         overflow-y: hidden;
 
         li {
+          &.is-active {
+            background-color: $black-20;
+          }
           a {
             margin-bottom: 0 !important;
           }
@@ -110,7 +113,7 @@
 
         li:not(.is-active) {
           margin-right: -1px;
-          border-right: 1px solid $primary-90;
+          border-right: 1px solid $primary-30;
         }
 
         li {
@@ -176,7 +179,7 @@
                 padding: 10px 20px;
                 justify-content: flex-start;
                 border-bottom: 1px solid $primary-20;
-                color: $primary-97;
+                color: $primary-97 !important;
 
                 &:last-child {
                   border-bottom: none;

package/components/ui-builder/_ui-builder.scss

@@ -1,3 +1,5 @@
+@import "../input-card";
+
 .ac-object-field-wrapper {
   display: grid;
   grid-template-columns: auto auto 45px;
@@ -210,9 +212,9 @@
 
 // details with checkradio
 .details-with-checkradio-wrapper {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
   gap: 15px;
+  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
 }
 .table {
   tr {

package/package.json

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

package/vue-components/types/notification.ts

@@ -1,6 +1,6 @@
-import type { TaskLog } from "./longRunningTasks";
-
-export interface Notification extends TaskLog {
+export interface Notification {
   id: string;
   time: number;
+  msg?: string;
+  status: string;
 }

package/vue-components/v3/footer/FooterArea.vue

@@ -23,6 +23,7 @@
   background: $primary-20;
   border-top: 1px solid $primary-90;
   z-index: 99;
+  transition: 0.3s ease-in-out;
 }
 
 .footer-left,
@@ -31,4 +32,9 @@
   align-items: center;
   gap: 32px;
 }
+.sidebar-collapsed {
+  .footer-area {
+    width: calc(100% - 60px);
+  }
+}
 </style>

package/vue-components/v3/notification/Notification.vue

@@ -9,7 +9,7 @@ import {
   watch,
 } from "vue";
 import type { Ref } from "vue";
-import type { TaskLog } from "../../types/longRunningTasks";
+// import type { TaskLog } from "../../types/longRunningTasks";
 import type { Notification } from "../../types/notification";
 
 const NotificationItem = defineAsyncComponent(
@@ -48,7 +48,7 @@ async function subscribeToNotifcations() {
     for await (const msg of subscription) {
       console.log("notifications ===>");
       console.log({ data: StringCodec().decode(msg.data) });
-      const log: TaskLog = JSON.parse(StringCodec().decode(msg.data));
+      const log = JSON.parse(StringCodec().decode(msg.data));
       console.log({ log });
       const currentTime = new Date().getTime();
       addNewNotification({