@appscode/design-system 2.17.60-alpha-1 → 2.17.61-alpha

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

@@ -1,5 +1,3 @@
-@use "../../base/utilities/index" as *;
-
 // vendor cards start
 .ac-single-card.vendor-card {
   outline: 1px solid $color-border;

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

@@ -1 +1 @@
-@forward "./_code-preview.scss";
+@import "./_code-preview.scss";

package/vue-components/styles/components/code-preview/_code-preview.scss

@@ -1,8 +1,13 @@
-@use "../../base/utilities/colors" as *;
-
 .code-container {
   position: relative;
   z-index: 1;
+  &:has(.is-white) {
+    .buttons:not(.head .buttons) {
+      &:after {
+        background-color: #fff;
+      }
+    }
+  }
   &:has(.head) {
     &::after {
       display: none;

package/vue-components/styles/components/content/_content-header.scss

@@ -1,5 +1,3 @@
-@use "../../base/utilities/index" as *;
-
 .ac-content-header {
   display: flex;
   align-items: center;

package/vue-components/styles/components/content/_content-layout.scss

@@ -1,5 +1,3 @@
-@use "../../base/utilities/index" as *;
-
 .ac-content-layout {
   margin-bottom: 16px;
   border-radius: 4px;

package/vue-components/styles/components/editor/_customize-editor.scss

@@ -1,5 +1,3 @@
-@use "../../base/utilities/index" as *;
-
 .ac-editor-wrapper {
   border: 1px solid $color-border;
   border-radius: 4px;

package/vue-components/styles/components/editor/_filtered-file-editor.scss

@@ -1,5 +1,3 @@
-@use "../../base/utilities/index" as *;
-
 // .preview-icon {
 //   width: 60px;
 //   height: 60px;

package/vue-components/styles/components/editor/_monaco-editor.scss

@@ -1,5 +1,3 @@
-@use "../../base/utilities/index" as *;
-
 .editor {
   border: none;
   background-color: $white-100 !important;

package/vue-components/styles/components/footer/_footer-area.scss

@@ -1,5 +1,3 @@
-@use "../../base/utilities/index" as *;
-
 .footer-area {
   position: fixed;
   bottom: 0;

package/vue-components/styles/components/footer/_footer-item.scss

@@ -1,5 +1,3 @@
-@use "../../base/utilities/index" as *;
-
 .footer-item {
   display: flex;
   align-items: center;

package/vue-components/styles/components/footer/_footer-items.scss

@@ -1,5 +1,3 @@
-@use "../../base/utilities/index" as *;
-
 .footer-items {
   display: flex;
   align-items: center;

package/vue-components/styles/components/form-fields/_check-radio-switch.scss

@@ -1,5 +1,3 @@
-@use "../../base/utilities/index" as *;
-
 // Old Third party dependency modification | Remove it, when 2024 AppsCode Custom Checkbox, Radio, Switch used everywhere
 .is-checkradio.is-primary[type="checkbox"].is-primary:checked.has-background-color + label::before,
 .is-checkradio.is-primary[type="checkbox"].is-primary:checked.has-background-color + label:before,

package/vue-components/styles/components/form-fields/_custom-selectbox.scss

@@ -1,5 +1,3 @@
-@use "../../base/utilities/index" as *;
-
 .is-selectbox {
   position: relative;
   z-index: 9;

package/vue-components/styles/components/form-fields/_file-upload.scss

@@ -1,5 +1,3 @@
-@use "../../base/utilities/index" as *;
-
 .file-upload {
   border: 1px dashed $color-border-dark;
   border-radius: 4px;

package/vue-components/styles/components/form-fields/_form-footer.scss

@@ -1,5 +1,3 @@
-@use "../../base/utilities/index" as *;
-
 .form-footer {
   display: flex;
   align-items: center;

package/vue-components/styles/components/form-fields/_image-upload.scss

@@ -1,5 +1,3 @@
-@use "../../base/utilities/index" as *;
-
 .ac-upload-image {
   background-color: transparent;
   border: 1px dashed $primary-10;

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

@@ -1,5 +1,3 @@
-@use "../../base/utilities/index" as *;
-
 // card select
 .card-select {
   min-height: 98px;
@@ -11,8 +9,8 @@
   transition: 0.3s ease-in-out;
   position: relative;
   z-index: 1;
-  min-width: 200px;
-  max-width: 250px;
+  width: 250px;
+  height: 100%;
   margin-bottom: 0 !important;
   &.ac-radio [type="radio"] + label {
     color: $color-heading;

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

@@ -1,5 +1,3 @@
-@use "../../base/utilities/colors" as *;
-
 .ac-single-input {
   position: relative;
   z-index: 1;

package/vue-components/styles/components/form-fields/_range-slider.scss

@@ -1,5 +1,3 @@
-@use "../../base/utilities/index" as *;
-
 .threshold-field {
   animation: slideIn 0.3s ease-out;
 }

package/vue-components/styles/components/header/_header-item.scss

@@ -1,5 +1,3 @@
-@use "../../base/utilities/index" as *;
-
 .header-item {
   display: inline-block;
   margin-left: 8px;

package/vue-components/styles/components/header/_header.scss

@@ -1,5 +1,3 @@
-@use "../../base/utilities/index" as *;
-
 .inner-header {
   padding: 6px 20px;
   border-bottom: 1px solid $color-border;

package/vue-components/styles/components/inbox/all.scss

@@ -1,5 +1,3 @@
-@use "../../base/utilities/index" as *;
-
 .mail-details {
   display: grid;
   grid-template-columns: 360px calc(100% - 360px);

package/vue-components/styles/components/navbar/_menu-content.scss

@@ -1,5 +1,3 @@
-@use "../../base/utilities/index" as *;
-
 // menu content
 
 .ac-menu-item {

package/vue-components/styles/components/navbar/_navbar.scss

@@ -1,5 +1,3 @@
-@use "../../base/utilities/index" as *;
-
 @import "./menu-content";
 .ac-navbar-area {
   position: fixed;

package/vue-components/styles/components/navbar/_notification.scss

@@ -1,5 +1,3 @@
-@use "../../base/utilities/index" as *;
-
 .notification-count {
   position: absolute;
   background-color: $ac-primary;

package/vue-components/styles/components/select-box/_ac-select-box.scss

@@ -1,5 +1,3 @@
-@use "../../base/utilities/index" as *;
-
 // .ac-select-box {
 //   select {
 //     background-color: $info-light;

package/vue-components/styles/components/select-box/_multi-select.scss

@@ -1,5 +1,3 @@
-@use "../../base/utilities/index" as *;
-
 .multiselect {
   .multiselect__tags {
     background-color: $white-100;

package/vue-components/styles/components/sidebar/_left-sidebar.scss

@@ -1,5 +1,3 @@
-@use "../../base/utilities/index" as *;
-
 .ac-system-left-sidebar {
   &.is-light {
     .ac-left-sidebar-wrapper {

package/vue-components/styles/components/sidebar-tabs/_sidebar-tabs-layout.scss

@@ -1,5 +1,3 @@
-@use "../../base/utilities/index" as *;
-
 .sidebar-tabs-layout {
   .sidebar-tabs-wrapper {
     position: fixed;

package/vue-components/styles/components/sidebar-tabs/_sidebar-tabs.scss

@@ -1,5 +1,3 @@
-@use "../../base/utilities/index" as *;
-
 .sidebar-tabs {
   width: 220px;
   border-right: 1px solid $color-border;

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

@@ -1,6 +1,4 @@
-@use "../../base/utilities/index" as *;
-
-@use "../../components/form-fields/input-card" as *;
+@import "../../components/form-fields/input-card";
 
 .ac-object-field-wrapper {
   display: grid;

package/vue-components/styles/components/ui-builder/_vue-open-api.scss

@@ -1,5 +1,3 @@
-@use "../../base/utilities/index" as *;
-
 .vue-schema-form-array {
   .nested-body {
     // margin-bottom: 15px;

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

@@ -1,2 +1,2 @@
-// @forward "404";
-@forward "code-preview";
+// @import "404";
+@import "code-preview";

package/vue-components/styles/layouts/_code-preview.scss

@@ -1,5 +1,3 @@
-@use "../base/utilities/colors" as *;
-@use "../base/utilities/typography" as *;
 .component-wrapper {
   .component-inner {
     margin: 20px;

package/vue-components/v3/accordion/Accordion.vue

@@ -20,7 +20,7 @@ defineEmits(["onClick"]);
         >
           <slot name="description" />
         </div>
-        <button class="icon">
+        <button class="width-32 height-32 is-rounded-50 b-1 p-0">
           <ArrowIcon :direction="isActive ? 'down' : 'up'" />
         </button>
       </div>

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

@@ -33,6 +33,7 @@ function hideAlert() {
           <p v-if="message">{{ message }}</p>
           <slot name="custom-text"></slot>
         </div>
+        <slot name="custom-code"></slot>
         <slot name="buttons"></slot>
       </div>
 

package/vue-components/v3/avatar/Avatar.vue

@@ -28,5 +28,5 @@ withDefaults(defineProps<Props>(), {
   </figure>
 </template>
 <style lang="scss">
-@use "../../../vue-components/styles/components/avatar";
+@import "../../../vue-components/styles/components/_avatar.scss";
 </style>

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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Props {
+  id?: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+  modifierClasses?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  id: "",
+  description: "",
+  disabled: false,
+  modifierClasses: "",
+});
+
+const checked = defineModel<boolean>("checked", { default: false });
+
+const inputId = computed(() => props.id || `check-item-${props.label.toLowerCase().replace(/\s+/g, "-")}`);
+</script>
+
+<template>
+  <label
+    :for="inputId"
+    class="card-select is-clickable mb-0 is-flex is-flex-direction-column gap-10"
+    :class="[modifierClasses, { 'is-selected': checked, 'is-disabled': disabled }]"
+  >
+    <div class="is-flex is-align-items-center gap-8">
+      <span class="ac-checkbox mb-0 is-align-items-flex-start">
+        <input :id="inputId" type="checkbox" :disabled="disabled" v-model="checked" />
+        <span class="checkmark"></span>
+      </span>
+      <p class="mb-0 has-text-weight-semibold">{{ label }}</p>
+    </div>
+
+    <p v-if="description" class="mb-0">{{ description }}</p>
+  </label>
+</template>

package/vue-components/v3/code-preview/CodeBlock.vue

@@ -8,6 +8,7 @@ interface Props {
   downloadBtn?: boolean;
   code?: string;
   copyBtn?: boolean;
+  whiteSpaceClass?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -15,6 +16,7 @@ const props = withDefaults(defineProps<Props>(), {
   downloadBtn: false,
   code: "",
   copyBtn: true,
+  whiteSpaceClass: "is-whitespace-normal",
 });
 
 const source = computed(() => props.code);
@@ -24,7 +26,7 @@ const { copy, copied } = useClipboard({ source, legacy: true });
 
 <template>
   <div class="code-container p-0">
-    <pre class="ac-hscrollbar" :class="spacing">{{ source }}</pre>
+    <pre class="ac-hscrollbar" :class="[spacing, whiteSpaceClass]">{{ source }}</pre>
     <div class="buttons">
       <ac-button v-if="downloadBtn" modifier-classes="is-primary small-button" icon-class="download" />
       <ac-button

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

@@ -106,3 +106,19 @@ onMounted(() => {
     </div>
   </ac-input-text>
 </template>
+
+<style lang="scss">
+.ac-single-input {
+  input.ac-input:read-only {
+    background-color: #eeeeee !important;
+    cursor: not-allowed !important;
+  }
+
+  label.show-label::after {
+    background-color: #eeeeee !important;
+  }
+  :hover {
+    border-color: #cbd5e1 !important;
+  }
+}
+</style>

package/vue-components/v3/navbar/Appdrawer.vue

@@ -4,7 +4,7 @@ import { computed, defineAsyncComponent, ref } from "vue";
 import GridIcon from "../icons/GridIcon.vue";
 
 export interface Props {
-  currentApp?: "console" | "db" | "platform" | "billing" | "selfhost" | "learn" | "grafana";
+  currentApp?: "console" | "db" | "platform" | "billing" | "selfhost" | "learn" | "grafana" | "observe";
   baseUrl?: string;
   activeOrganization?: string;
   rootDomain?: string;
@@ -41,6 +41,13 @@ const appList = [
     port: "3005",
     sub_title: "Analyze your activities",
   },
+  {
+    name: "observe",
+    icon_url: "https://cdn.appscode.com/images/products/observe/logos/observe.png",
+    title: "Observe",
+    port: "5992",
+    sub_title: "Observe your system",
+  },
   {
     name: "selfhost",
     icon_url: "https://cdn.appscode.com/images/products/selfhost/logos/selfhost.svg",

package/vue-components/v3/pagination/Pagination.vue

@@ -3,12 +3,14 @@ import { computed, ref, watch } from "vue";
 
 interface Props {
   hideRowsPerPageSelection?: boolean;
+  userDefinedItemsPerPage?: number | null;
   totalNoOfItems?: number;
   itemsPerPage?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   hideRowsPerPageSelection: false,
+  userDefinedItemsPerPage: null,
   totalNoOfItems: 0,
   itemsPerPage: 5,
 });
@@ -19,6 +21,7 @@ const activePageNo = ref(1);
 
 const selectedItemCountPerPage = computed({
   get() {
+    if (props.userDefinedItemsPerPage) return props.userDefinedItemsPerPage;
     if (props.itemsPerPage > 5 && props.totalNoOfItems <= 5) return 5;
     else if (props.itemsPerPage > 10 && props.totalNoOfItems <= 10) return 10;
     else if (props.itemsPerPage > 15 && props.totalNoOfItems <= 15) return 15;
@@ -113,6 +116,12 @@ watch(
       <div class="level-item" v-show="!hideRowsPerPageSelection && totalNoOfItems > 5">
         <label>Rows per page</label>
         <select v-model="selectedItemCountPerPage" name="page" data-testid="rows-per-page-selector">
+          <option
+            :value="userDefinedItemsPerPage"
+            v-if="userDefinedItemsPerPage && ![5, 10, 15, 20, 25, 50].includes(userDefinedItemsPerPage)"
+          >
+            default
+          </option>
           <option :value="5">5</option>
           <option :value="10" v-show="totalNoOfItems > 5">10</option>
           <option :value="15" v-show="totalNoOfItems > 10">15</option>

package/vue-components/v3/time/AcDurationNew.vue

@@ -92,11 +92,10 @@ useDraggable(".picker-minute");
   </div>
 </template>
 <style lang="scss" scoped>
-@use "sass:color";
 /* ========== Variables ========== */
 $cool-gray: #eff1f1;
 $secondary-light-gray: #f7f9fa;
-$scroll-highlight: color.adjust($cool-gray, $lightness: -10%);
+$scroll-highlight: darken($cool-gray, 10);
 
 /* ========== Mixins ========== */
 @mixin hide-scrollbars {

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

@@ -1,10 +0,0 @@
-// This file forwards all commonly used utilities
-// Import this file in any component that needs access to colors, mixins, etc.
-
-@forward "colors";
-@forward "typography";
-@forward "mixin";
-@forward "customize-bulma";
-@forward "bulma/sass/utilities/_all" hide $purple, $red, $green, $blue, $yellow, $orange, $primary, $info, $success,
-  $warning, $danger, $white, $black, $light, $dark, $primary-light, $size-1, $size-2, $size-3, $size-4, $size-5,
-  $size-6, $size-7, $weight-light, $weight-normal, $weight-medium, $weight-semibold, $weight-bold;