@appscode/design-system 2.2.39 → 2.2.41

package/package.json

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

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

@@ -11,7 +11,7 @@ interface Props {
 
 withDefaults(defineProps<Props>(), {
   size: "32x32",
-  imgUrl: "https://bulma.io/images/placeholders/32x32.png",
+  imgUrl: "https://bulma.io/assets/images/placeholders/32x32.png",
   rounded: false,
   roundedClass: "",
   dots: false,

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

@@ -89,12 +89,14 @@ const onSelect = (selectedOption: unknown, id: string) => emit("select", selecte
   <div
     ref="multiselectDivId"
     class="multi-select-wrapper"
-    :class="{
-      multiselectCustomClass,
-      'has-refresh-button': hasRefreshBtn,
-      'is-disable': disabled || isLoaderActive,
-      'has-clear-button': allowEmpty && model,
-    }"
+    :class="[
+      wrapperDivCustomClass,
+      {
+        'has-refresh-button': hasRefreshBtn,
+        'is-disable': disabled || isLoaderActive,
+        'has-clear-button': allowEmpty && model,
+      },
+    ]"
     data-testid="cluster-status-select-header"
   >
     <label

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 interface Props {
   label: string;
-  customClass: string;
+  customClass?: string;
   isCollapsible: boolean;
   isRequired: boolean;
   errors: Array<string>;

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

@@ -181,7 +181,10 @@ 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 + idx">
+                  <td
+                    v-for="(itemColumn, idx) in itemRow.cells"
+                    :key="itemColumn.data as string || 'namespace'   + idx"
+                  >
                     <template v-if="tableHeaders[idx].type === 'date'">
                       {{ readableTime(itemColumn.data as string) }}
                     </template>

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

@@ -0,0 +1,72 @@
+<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: "Delete Modal",
+  message: "Do you want to delete",
+  itemName: "item",
+  modifierClasses: "is-normal",
+  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  -->
+    <div class="action-message pt-35 pb-35 has-text-centered">
+      <h5 class="is-message">{{ message }} {{ itemName ? "" : "?" }}</h5>
+      <p class="is-description">{{ itemName }} {{ itemName ? "?" : "" }}</p>
+    </div>
+
+    <!-- freedom content end -->
+
+    <!-- modal footer start -->
+    <template #modal-footer-controls>
+      <ac-button
+        @click.stop="open = false"
+        title="Cancel"
+        modifier-classes="is-outlined"
+        :disabled="isDeleteActive || disableModalClose"
+        data-testid="delete-confirmation-modal-close-button"
+      />
+      <ac-button
+        title="Yes"
+        modifier-classes="is-danger"
+        :is-loader-active="isDeleteActive"
+        @click.stop="$emit('onDelete', itemName)"
+        data-testid="delete-confirmation-modal-confirm-button"
+      />
+    </template>
+  </modal>
+  <!-- modal end  -->
+</template>

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

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref, watch, nextTick } from "vue";
+
+interface Props {
+  title?: string;
+  ignoreOutsideClick?: boolean;
+  hideActionFooter?: boolean;
+  disableModalClose?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: "Modal",
+  disableModalClose: false,
+  ignoreOutsideClick: false,
+  hideActionFooter: false,
+});
+
+const HeaderItems = defineAsyncComponent(() => import("./../header/HeaderItems.vue"));
+
+const dialogModal = ref<HTMLDialogElement | null>(null);
+
+const model = defineModel({ type: Boolean });
+
+const onKeyDown = (e: KeyboardEvent) => {
+  if (model.value && e.keyCode === 27) {
+    destroyModal();
+  }
+};
+
+const initializeModal = () => {
+  model.value = true;
+  document.addEventListener("keydown", onKeyDown);
+};
+
+const destroyModal = () => {
+  if (props.disableModalClose) return;
+  model.value = false;
+  document.removeEventListener("keydown", onKeyDown);
+};
+
+watch(
+  () => model.value,
+  (n) => {
+    if (n) {
+      initializeModal();
+      openDialog();
+    } else {
+      destroyModal();
+    }
+  }
+);
+
+const handleBackdropClick = (event: MouseEvent) => {
+  if (event.target === dialogModal.value && !props.ignoreOutsideClick) {
+    destroyModal();
+  }
+};
+
+const openDialog = async () => {
+  await nextTick();
+  if (dialogModal.value) {
+    dialogModal.value.showModal();
+  }
+};
+
+const handleCancel = (event: Event) => {
+  event.preventDefault();
+};
+</script>
+
+<template>
+  <dialog v-if="model" ref="dialogModal" @click="handleBackdropClick" @cancel="handleCancel" class="ac-modal">
+    <div class="ac-modal-inner" @click.stop>
+      <div class="ac-modal-header">
+        <h5>{{ title }}</h5>
+        <header-items>
+          <slot name="modal-header-controls" />
+        </header-items>
+
+        <div class="header-items is-flex is-align-items-center">
+          <div class="header-item">
+            <button
+              @click="destroyModal"
+              class="button ac-button is-white"
+              data-testid="modal-generic-close-icon"
+              :disabled="disableModalClose"
+            >
+              <span class="icon">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="size-6"
+                >
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+                </svg>
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <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>
+        </div>
+      </div>
+
+      <div
+        v-if="!hideActionFooter"
+        class="ac-modal-footer action-footer is-flex is-align-items-center is-justify-content-space-between"
+      >
+        <div>
+          <slot name="modal-footer-left" />
+        </div>
+
+        <div class="buttons has-text-right is-block">
+          <slot name="modal-footer-controls" />
+        </div>
+      </div>
+    </div>
+  </dialog>
+</template>
+
+<style lang="scss" scoped>
+@import "../../../vue-components/styles/components/modal";
+
+.ac-modal {
+  position: unset;
+  min-height: auto;
+  &:after {
+    position: unset;
+    background-color: unset;
+    opacity: 1;
+  }
+  .ac-modal-inner {
+    box-shadow: none;
+  }
+}
+
+dialog {
+  background: transparent;
+  border: none;
+  &::backdrop {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
+
+dialog:focus {
+  outline: none;
+}
+</style>