@appscode/design-system 2.2.42 → 2.2.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.2.42",
+  "version": "2.2.44",
   "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/form-fields/SingleStepFormArray.vue

@@ -9,6 +9,8 @@ import HeroiconsTrash from "~icons/heroicons/trash";
 import HeroiconsChevronDownSolid from "~icons/heroicons/chevron-down-solid";
 import HeroiconsChevronUpSolid from "~icons/heroicons/chevron-up-solid";
 
+const JsonModal = defineAsyncComponent(() => import("../modals/JsonShowModal.vue"));
+
 interface Props {
   disabled?: boolean;
   isCreateDisabled?: boolean;
@@ -49,6 +51,8 @@ const editFieldIndex = ref(-1);
 const isFormHidden = ref(true);
 const isSavingNewElement = ref(false);
 const dataForTable = defineModel<Array<AcTableRow>>({ required: true });
+const isOpen = ref(false);
+const fullNamespaceList = ref<string[]>([]);
 
 function onAddClick() {
   isSavingNewElement.value = true;
@@ -85,12 +89,33 @@ function onDetailsClick(row: number) {
   editFieldIndex.value = -1;
 }
 
-function readableTime(utcTime: string) {
-  return new Date(utcTime).toLocaleString();
+function readableTime(utcTime: unknown) {
+  if (typeof utcTime === "string") return new Date(utcTime).toLocaleString();
+  else return utcTime;
+}
+function truncatedNamespaces(namespaces: string[]): string {
+  if (namespaces.length <= 1) {
+    return namespaces[0];
+  }
+  return namespaces.slice(0, 1).join(", ") + ` (+${namespaces.length - 1})`;
+}
+
+function showFullNamespaceList(namespaces: string[]): void {
+  isOpen.value = true;
+
+  fullNamespaceList.value = namespaces;
 }
 </script>
 
 <template>
+  <json-modal
+    v-if="isOpen"
+    :open="isOpen"
+    :title="'Namespace List'"
+    :editor-content="fullNamespaceList"
+    @closemodal="isOpen = false"
+  ></json-modal>
+
   <div :class="{ 'ac-nested-elements': label }">
     <!-- Add New Form Start -->
     <template v-if="isSavingNewElement">
@@ -181,12 +206,23 @@ function readableTime(utcTime: string) {
             <tbody>
               <template v-for="(itemRow, idxRow) in dataForTable" :key="idxRow">
                 <tr data-testid="ac-table-row">
-                  <td
-                    v-for="(itemColumn, idx) in itemRow.cells"
-                    :key="itemColumn.data as string || 'namespace'   + idx"
-                  >
+                  <td v-for="(itemColumn, idx) in itemRow.cells" :key="tableHeaders[idx].name + idx">
                     <template v-if="tableHeaders[idx].type === 'date'">
-                      {{ readableTime(itemColumn.data as string) }}
+                      {{ readableTime(itemColumn.data) }}
+                    </template>
+                    <template
+                      v-else-if="tableHeaders[idx].name.toLowerCase() === 'namespace' && Array.isArray(itemColumn.data)"
+                    >
+                      <span
+                        >{{ truncatedNamespaces(itemColumn.data) }}
+                        <div
+                          v-if="itemColumn.data.length > 1"
+                          class="tag is-secondary is-light"
+                          @click="showFullNamespaceList(itemColumn.data)"
+                        >
+                          <a>More </a>
+                        </div></span
+                      >
                     </template>
                     <template v-else>
                       {{ itemColumn.data }}

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>