@appscode/design-system 2.2.43 → 2.2.45

package/package.json

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

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

@@ -7,6 +7,23 @@
   left: 0;
   top: 0;
   z-index: 99999;
+  &.is-side-panel-modal {
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    left: auto;
+    right: 0;
+    .ac-modal-inner {
+      margin: 0 0 0 auto;
+      height: 100vh;
+      border-radius: 0;
+      max-width: 1200px;
+      .ac-modal-body {
+        height: calc(100vh - 110px);
+        max-height: inherit;
+      }
+    }
+  }
   .ac-button {
     &.is-white {
       margin-right: -10px;

package/vue-components/styles/components/alert/_alert.scss

@@ -111,4 +111,7 @@
 // is-warning
 .ac-notification.is-warning {
   @include acNotification($warning);
+  p {
+    color: $yellow-5 !important;
+  }
 }

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

@@ -167,7 +167,7 @@
   }
 }
 
-.multiselect__tags>span {
+.multiselect__tags > span {
   font-size: 13px;
   line-height: 1.6;
   color: $color-heading;
@@ -349,7 +349,6 @@
   }
 
   &.is-danger {
-
     input,
     .ac-card,
     textarea {
@@ -362,7 +361,6 @@
   }
 
   &.is-loading {
-
     input,
     .ac-card,
     textarea {
@@ -464,7 +462,6 @@ li {
 
 .multi-select-wrapper.is-small {
   .multiselect .multiselect__tags {
-
     .multiselect__input,
     .multiselect__single {
       top: 3.5px !important;
@@ -516,8 +513,19 @@ li {
       }
     }
   }
+  .multiselect__tags {
+    .multiselect__single {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      line-clamp: 1;
+      -webkit-line-clamp: 1;
+      box-orient: vertical;
+      -webkit-box-orient: vertical;
+    }
+  }
 
-  // clear 
+  // clear
   &.has-clear-button {
     &.has-refresh-button {
       .multiselect__select {
@@ -562,7 +570,9 @@ li {
       z-index: 99;
       right: 0px;
     }
-
+    .multiselect__tags {
+      padding: 3px 60px 4px 20px !important;
+    }
     .button {
       &.is-clear {
         right: 30px;
@@ -570,11 +580,9 @@ li {
     }
   }
 
-  // clear 
-
+  // clear
 
   .button {
-
     &.is-information,
     &.is-refresh,
     &.is-clear {
@@ -673,16 +681,21 @@ li {
 Responsive Classes
 *****************************************/
 // Extra small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) {}
+@media (max-width: 575.98px) {
+}
 
 // Small devices (landscape phones, 576px and up)
-@media (min-width: 576px) and (max-width: 767.98px) {}
+@media (min-width: 576px) and (max-width: 767.98px) {
+}
 
 // Medium devices (tablets, 768px and up)
-@media (min-width: 768px) and (max-width: 991.98px) {}
+@media (min-width: 768px) and (max-width: 991.98px) {
+}
 
 // Large devices (desktops, 992px and up)
-@media (min-width: 992px) and (max-width: 1199.98px) {}
+@media (min-width: 992px) and (max-width: 1199.98px) {
+}
 
 // Extra large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) {}
+@media (min-width: 1200px) {
+}

package/vue-components/v3/modal/DeleteModal.vue

@@ -44,8 +44,9 @@ const AcButton = defineAsyncComponent(() => import("./../button/Button.vue"));
   >
     <!-- freedom content start  -->
     <div class="action-message pt-35 pb-35 has-text-centered">
-      <h5 class="is-message">{{ message }} {{ itemName ? "" : "?" }}</h5>
+      <h5 class="is-message">{{ message }}</h5>
       <p class="is-description">{{ itemName }} {{ itemName ? "?" : "" }}</p>
+      <slot name="actions" />
     </div>
 
     <!-- freedom content end -->

package/vue-components/v3/modal/DialogModal.vue

@@ -104,9 +104,7 @@ const handleCancel = (event: Event) => {
 
       <div class="ac-modal-body ac-vscrollbar" data-testid="ac-modal-content-with-scroll">
         <div class="ac-modal-content">
-          <div class="action-message pt-35 pb-35 has-text-centered">
-            <slot />
-          </div>
+          <slot />
         </div>
       </div>
 

package/vue-components/v3/modal/SidePanelModal.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+
+interface Props {
+  title?: string;
+  message?: string;
+  itemName?: string;
+  modifierClasses?: string;
+  isDeleteActive?: boolean;
+  disableModalClose?: boolean;
+  ignoreOutsideClick?: boolean;
+  hideActionFooter?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  title: "Sidebar Modal",
+  message: "Side Panel modal message",
+  itemName: "",
+  modifierClasses: "is-side-panel-modal",
+  isDeleteActive: false,
+  disableModalClose: false,
+  ignoreOutsideClick: false,
+  hideActionFooter: false,
+});
+
+defineEmits(["onDelete"]);
+
+const open = defineModel({ type: Boolean });
+
+const Modal = defineAsyncComponent(() => import("./DialogModal.vue"));
+const AcButton = defineAsyncComponent(() => import("./../button/Button.vue"));
+</script>
+
+<template>
+  <!-- modal start  -->
+
+  <modal
+    v-model="open"
+    :title="title"
+    :class="modifierClasses"
+    :hide-action-footer="hideActionFooter"
+    :disable-modal-close="disableModalClose"
+    :ignore-outside-click="ignoreOutsideClick"
+  >
+    <!-- freedom content start  -->
+    <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. beatae.</h1>
+    <!-- freedom content end -->
+
+    <!-- modal footer start -->
+    <template #modal-footer-left>
+      <div class="buttons">
+        <ac-button
+          title="Yes, Do this"
+          modifier-classes="is-primary"
+          :is-loader-active="isDeleteActive"
+          @click.stop="$emit('onDelete', itemName)"
+          data-testid="delete-confirmation-modal-confirm-button"
+        />
+        <ac-button
+          @click.stop="open = false"
+          title="Cancel"
+          modifier-classes="is-outlined"
+          :disabled="isDeleteActive || disableModalClose"
+          data-testid="delete-confirmation-modal-close-button"
+        />
+      </div>
+    </template>
+  </modal>
+  <!-- modal end  -->
+</template>

package/vue-components/v3/sidebar/SidebarHeader.vue

@@ -39,12 +39,9 @@ withDefaults(defineProps<Props>(), {
     <!-- brand logo  -->
     <router-link class="is-flex brand-logo" :to="url">
       <img :src="brandLogo" alt="brand-logo" :class="modifierClasses" />
+      <span v-if="productName" class="brand-tag">{{ productName }}</span>
     </router-link>
     <!-- brand logo  -->
-
-    <!-- brand logo  -->
-    <span v-if="productName" class="brand-tag">{{ productName }}</span>
-    <!-- brand logo  -->
   </div>
 </template>