@appscode/design-system 2.2.67 → 2.4.0

package/main.scss

@@ -22,6 +22,7 @@
 @import "@/components/vue-components/styles/components/terminal";
 @import "@/components/vue-components/styles/components/code-preview/all";
 @import "@/components/vue-components/styles/components/form-fields/input";
+@import "@/components/vue-components/styles/components/form-fields/custom-selectbox";
 @import "@/components/vue-components/styles/components/ui-builder/vue-open-api";
 @import "@/components/vue-components/styles/components/ui-builder/ui-builder";
 // @import "@/components/vue-components/styles/theme/appscode.scss";

package/package.json

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

package/plugins/time-convert.js

@@ -1,5 +1,4 @@
 import moment from "moment";
-import { useNow, useThrottleFn } from "@vueuse/core";
 
 const getTime = (option) => {
   if (parseInt(option.time, 10) < 0 || !option.time) {

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

@@ -5,6 +5,7 @@
 @import "mixin";
 @import "extended";
 @import "global";
+@import "animation";
 @import "grid";
 @import "spacing";
 @import "layouts";

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

@@ -0,0 +1,11 @@
+.is-spin {
+  animation: spin 1000ms linear infinite;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -178,10 +178,16 @@ $gray-97: hsl($gray-hue, $gray-saturation, 97%);
 // Box Shadow
 $ac-shadow-1: 0 1px 4px rgba(26, 80, 151, 0.16);
 $ac-shadow-2: 0px 8px 57px rgba(0, 0, 0, 0.16);
-$ac-shadow-3: 0 3px 4px 0 rgba(0, 0, 0, 0.18), 0 3px 3px -2px rgba(0, 0, 0, 0.16), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
+$ac-shadow-3:
+  0 3px 4px 0 rgba(0, 0, 0, 0.18),
+  0 3px 3px -2px rgba(0, 0, 0, 0.16),
+  0 1px 6px 0 rgba(0, 0, 0, 0.12);
 
 $shadow-sm: 0 1px 4px rgba(26, 80, 151, 0.16);
 $shadow-xl: 0px 8px 57px rgba(0, 0, 0, 0.16);
-$shadow-lg: 0 3px 4px 0 rgba(0, 0, 0, 0.18), 0 3px 3px -2px rgba(0, 0, 0, 0.16), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
+$shadow-lg:
+  0 3px 4px 0 rgba(0, 0, 0, 0.18),
+  0 3px 3px -2px rgba(0, 0, 0, 0.16),
+  0 1px 6px 0 rgba(0, 0, 0, 0.12);
 
 // @import "../../theme/appscode";

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

@@ -637,7 +637,9 @@ $border_color_4: transparent transparent #585d6e transparent;
   &[aria-hidden="true"] {
     visibility: hidden;
     opacity: 0;
-    transition: opacity 0.15s, visibility 0.15s;
+    transition:
+      opacity 0.15s,
+      visibility 0.15s;
   }
 
   &[aria-hidden="false"] {

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

@@ -417,7 +417,9 @@
 .table-inner-shadow {
   border-radius: 0px;
   background: $color-border;
-  box-shadow: inset 5px 5px 10px #e3e6e9, inset -5px -5px 10px $white-100;
+  box-shadow:
+    inset 5px 5px 10px #e3e6e9,
+    inset -5px -5px 10px $white-100;
 }
 
 @keyframes expand {

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

@@ -1,4 +1,5 @@
 @import "input";
+@import "custom-selectbox";
 @import "check-radio-switch";
 @import "file-upload";
 @import "image-upload";

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

@@ -0,0 +1,135 @@
+.is-selectbox {
+  position: relative;
+  z-index: 9;
+
+  input[type="text"] {
+    padding-right: 32px;
+  }
+
+  &.is-extra-small {
+    .buttons {
+      .button {
+        height: 28px;
+      }
+    }
+  }
+
+  .ac-field {
+    position: absolute;
+    top: 7px;
+    left: 12px;
+    width: calc(100% - 15px);
+  }
+
+  &.is-open {
+    .options {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  .buttons {
+    position: absolute;
+    gap: 0;
+    right: 2px;
+    top: 2px;
+    margin: 0;
+
+    .button {
+      margin: 0 !important;
+      color: #616161 !important;
+      padding: 0;
+      width: 32px;
+      height: 32px;
+    }
+  }
+
+  .options {
+    border: 1px solid $color-border;
+    box-shadow: $ac-shadow-1;
+    background-color: $white-100;
+    border-radius: 4px;
+    padding: 2px;
+    position: absolute;
+    width: 100%;
+    max-height: 500px;
+    overflow-y: auto;
+    transition: 0.3s ease-in-out;
+    opacity: 0;
+    visibility: hidden;
+
+    input[type="checkbox"] {
+      width: 16px;
+      height: 16px;
+    }
+
+    label {
+      position: inherit;
+    }
+
+    &.group {
+      li {
+        display: block;
+
+        ul {
+          li {
+            display: flex;
+
+            &:hover:not(.is-active) {
+              background-color: $primary-light-gray;
+              color: $color-heading;
+
+              label {
+                color: $color-heading;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    li {
+      display: flex;
+      align-items: center;
+      padding: 6px 12px;
+      border-radius: 4px;
+      gap: 8px;
+      cursor: pointer;
+      transition: 0.2s ease-in-out;
+      color: $color-text;
+
+      label {
+        color: $color-text;
+        cursor: pointer;
+      }
+
+      &:hover:not(.group li, .is-active) {
+        background-color: $primary-light-gray;
+        color: $color-heading;
+
+        label {
+          color: $color-heading;
+        }
+      }
+
+      strong {
+        color: $color-heading;
+        font-weight: 500;
+      }
+
+      &.is-active {
+        background-color: $ac-primary;
+        color: $white-100;
+
+        label {
+          color: $white-100;
+        }
+      }
+
+      &.is-disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+    }
+  }
+}

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

@@ -42,7 +42,6 @@
   }
 
   &.is-success {
-
     input,
     .ac-card,
     textarea,
@@ -56,7 +55,6 @@
   }
 
   &.is-danger {
-
     input,
     .ac-card,
     textarea,
@@ -70,7 +68,6 @@
   }
 
   &.is-loading {
-
     input,
     .ac-card,
     textarea {
@@ -112,7 +109,6 @@
   }
 
   &.is-normal {
-
     input,
     select {
       height: 45px;
@@ -161,7 +157,6 @@
   }
 
   &.is-small {
-
     input,
     select {
       height: 36px;
@@ -220,7 +215,6 @@
   }
 
   &.is-extra-small {
-
     input,
     select {
       height: 32px;
@@ -505,7 +499,7 @@
 // check radio
 
 .ac-single-radio {
-  .is-checkradio[type="radio"]+label {
+  .is-checkradio[type="radio"] + label {
     padding-left: 25px;
 
     &:before {
@@ -575,7 +569,6 @@
   }
 
   &:hover {
-
     .file-cta,
     .file-name {
       border-color: $ac-primary;
@@ -632,4 +625,4 @@
       }
     }
   }
-}
+}

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

@@ -4,23 +4,30 @@ withDefaults(defineProps<{ isActive?: boolean; bodyInside?: boolean }>(), {
   bodyInside: false,
 });
 
-defineEmits(['onClick'])
-
+defineEmits(["onClick"]);
 </script>
 
-
 <template>
   <div class="single-accordion-item">
     <div @click.prevent="$emit('onClick')" class="accordion-heading is-clickable">
       <slot name="title" />
       <div class="accordion-right is-flex is-align-items-center">
-        <div v-show="!isActive"
-          class="accordion-description is-justify-content-flex-end has-text-right is-flex-direction-column">
+        <div
+          v-show="!isActive"
+          class="accordion-description is-justify-content-flex-end has-text-right is-flex-direction-column"
+        >
           <slot name="description" />
         </div>
         <button class="icon">
-          <svg :style="{ transform: isActive ? 'rotate(-180deg)' : 'rotate(0deg)' }" xmlns="http://www.w3.org/2000/svg"
-            fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+          <svg
+            :style="{ transform: isActive ? 'rotate(-180deg)' : 'rotate(0deg)' }"
+            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="m19.5 8.25-7.5 7.5-7.5-7.5" />
           </svg>
         </button>

package/vue-components/v3/breadcrumbs/Breadcrumb.vue

@@ -75,7 +75,7 @@ watch(
   {
     immediate: true,
     deep: true,
-  }
+  },
 );
 </script>
 

package/vue-components/v3/button/Buttons.vue

@@ -3,7 +3,7 @@ withDefaults(
   defineProps<{
     isMaxWidth?: boolean;
   }>(),
-  { isMaxWidth: false }
+  { isMaxWidth: false },
 );
 </script>
 <template>

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

@@ -7,7 +7,7 @@ withDefaults(
   {
     isRequired: false,
     statusClass: "has-background-primary-light has-text-primary",
-  }
+  },
 );
 </script>
 <template>

package/vue-components/v3/dropdown/DropdownMenu.vue

@@ -79,7 +79,7 @@ watch(
         }, 200);
       }
     }
-  }
+  },
 );
 </script>
 

package/vue-components/v3/editor/Editor.vue

@@ -90,7 +90,7 @@ watch(
   },
   {
     immediate: true,
-  }
+  },
 );
 
 watch(
@@ -102,7 +102,7 @@ watch(
   },
   {
     immediate: true,
-  }
+  },
 );
 </script>
 

package/vue-components/v3/editor/FilteredFileEditor.vue

@@ -100,14 +100,14 @@ watch(
   {
     immediate: true,
     deep: true,
-  }
+  },
 );
 
 watch(
   () => props.toggleHideValue,
   (n) => {
     hideValue.value = n;
-  }
+  },
 );
 </script>
 

package/vue-components/v3/editor/MonacoEditor.vue

@@ -59,7 +59,7 @@ export default defineComponent({
     // remove the schema
     if (this.$monacoValidationOptions) {
       this.$monacoValidationOptions.schemas = this.$monacoValidationOptions.schemas.filter(
-        (schema) => !schema.fileMatch.includes(this.modelId)
+        (schema) => !schema.fileMatch.includes(this.modelId),
       );
     }
     // dispose editor

package/vue-components/v3/editor/ResourceKeyValueEditor.vue

@@ -60,7 +60,7 @@ watch(
   (n) => {
     emit("activeKey", n);
   },
-  { immediate: true }
+  { immediate: true },
 );
 </script>
 

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

@@ -56,7 +56,7 @@ watch(
   (n) => {
     if (n) triggerInput();
   },
-  { immediate: true }
+  { immediate: true },
 );
 </script>
 

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

@@ -53,7 +53,7 @@ watch(
   (n) => {
     if (n) triggerInput();
   },
-  { immediate: true }
+  { immediate: true },
 );
 </script>
 

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

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+
+interface prop {
+  multiselect?: boolean;
+  custom?: boolean;
+  group?: boolean;
+  isOpen?: boolean;
+}
+
+withDefaults(defineProps<prop>(), {
+  multiselect: false,
+  custom: false,
+  isOpen: false,
+});
+
+const AcButtons = defineAsyncComponent(() => import("../button/Buttons.vue"));
+const AcButton = defineAsyncComponent(() => import("../button/Button.vue"));
+
+const ArrowDownIcon = defineAsyncComponent(() => import("../icons/ArrowDownIcon.vue"));
+const RefreshIcon = defineAsyncComponent(() => import("../icons/RefreshIcon.vue"));
+const CloseIcon = defineAsyncComponent(() => import("../icons/CloseIcon.vue"));
+</script>
+
+<template>
+  <!-- add dynamic 'z-index', use 'is-open' for show hide options -->
+  <div class="ac-single-input is-small is-selectbox" :class="[isOpen ? 'is-open' : '']" style="z-index: 2">
+    <!-- add 'show-label' class for move top -->
+    <label for="custom-select" class="ac-label show-label">Select Option</label>
+    <input type="text" value="Select" />
+
+    <div v-if="multiselect" class="ac-field field is-grouped is-clipped">
+      <div class="control">
+        <div class="tags has-addons">
+          <span class="tag is-primary is-light">Alex Smith</span>
+          <a class="tag is-delete"></a>
+        </div>
+      </div>
+
+      <div class="control">
+        <div class="tags has-addons">
+          <span class="tag is-info is-light">Alex Smith</span>
+          <a class="tag is-delete"></a>
+        </div>
+      </div>
+
+      <div class="control">
+        <div class="tags has-addons">
+          <span class="tag is-secondary is-light">Alex Smith</span>
+          <a class="tag is-delete"></a>
+        </div>
+      </div>
+
+      <div class="control">
+        <div class="tags has-addons">
+          <span class="tag is-primary is-clickable">+3</span>
+        </div>
+      </div>
+    </div>
+
+    <ac-buttons>
+      <button class="button ac-button is-white">
+        <ArrowDownIcon />
+      </button>
+
+      <ac-button modifier-classes="is-white">
+        <RefreshIcon class="is-spin" />
+      </ac-button>
+
+      <ac-button modifier-classes="is-white">
+        <CloseIcon style="rotate: 180deg" />
+      </ac-button>
+    </ac-buttons>
+
+    <ul v-if="group" class="options group">
+      <li v-for="i in 2" :key="i">
+        <strong>Group one</strong>
+        <ul>
+          <li>
+            <input v-if="multiselect" type="checkbox" name="" id="opt-five" />
+            <label for="opt-five">Select option five</label>
+          </li>
+          <li>
+            <input v-if="multiselect" type="checkbox" name="" id="opt-six" checked />
+            <label for="opt-six">Select option six</label>
+          </li>
+          <li class="is-disabled">
+            <input v-if="multiselect" type="checkbox" name="" id="opt-seven" />
+            <label for="opt-seven">Select option seven</label>
+          </li>
+          <li>
+            <input v-if="multiselect" type="checkbox" name="" id="opt-eight" />
+            <label for="opt-eight">Select option eight</label>
+          </li>
+        </ul>
+      </li>
+    </ul>
+    <div v-else-if="custom" class="custom-select options">
+      <slot />
+    </div>
+
+    <ul v-else class="options">
+      <li>
+        <input v-if="multiselect" type="checkbox" name="" id="opt-one" />
+        <label for="opt-one">Select option one</label>
+      </li>
+      <li class="is-active">
+        <input v-if="multiselect" type="checkbox" name="" id="opt-two" />
+        <label for="opt-two">Select option Two</label>
+      </li>
+      <li class="is-disabled">
+        <input v-if="multiselect" type="checkbox" name="" id="opt-three" />
+        <label for="opt-three">Select option three</label>
+      </li>
+      <li>
+        <input v-if="multiselect" type="checkbox" name="" id="opt-four" />
+        <label for="opt-four">Select option four</label>
+      </li>
+    </ul>
+  </div>
+  <!-- <single-input /> -->
+</template>

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

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <div class="input-container">
+      <AcInput v-model="newItem" @keyup.enter="addItem" :placeholderText="placeholderText" class="input-field" />
+      <AcButton @click="addItem">Add</AcButton>
+    </div>
+    <transition-group name="list" tag="ul" class="item-list">
+      <li v-for="(item, index) in items" :key="item" class="list-item">
+        <span>{{ item }}</span>
+        <AcButton @click="removeItem(index)" class="remove-button">&times;</AcButton>
+      </li>
+    </transition-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import AcInput from "./AcInput.vue";
+import AcButton from "../button/Button.vue";
+
+withDefaults(
+  defineProps<{
+    placeholderText?: string;
+  }>(),
+  { placeholderText: "Enter a New Item" },
+);
+
+const newItem = ref("");
+const items = ref<string[]>([]);
+
+const emit = defineEmits<{
+  (e: "update:items", value: string[]): void;
+}>();
+
+const addItem = () => {
+  if (newItem.value.trim()) {
+    items.value.unshift(newItem.value.trim());
+    newItem.value = "";
+    emit("update:items", items.value);
+  }
+};
+
+const removeItem = (index: number) => {
+  items.value.splice(index, 1);
+  emit("update:items", items.value);
+};
+</script>
+
+<style scoped>
+.title {
+  color: #2c3e50;
+  text-align: center;
+  margin-bottom: 20px;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.input-field {
+  border-radius: 8px;
+  transition: border-color 0.3s;
+  margin-right: 8px;
+  width: 100%;
+}
+.input-container {
+  display: flex;
+}
+
+.item-list {
+  list-style-type: none;
+  padding: 0;
+}
+
+.list-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px;
+  background-color: #ecf0f1;
+  margin-bottom: 12px;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s;
+}
+
+.list-item:hover {
+  background-color: #e0e6e8;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.remove-button {
+  background-color: #e74c3c;
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  font-size: 18px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.3s;
+}
+
+.remove-button:hover {
+  background-color: #c0392b;
+}
+
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.5s;
+}
+.list-enter,
+.list-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+</style>

package/vue-components/v3/icons/ArrowDownIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    width="16px"
+    height="16px"
+    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>
+</template>

package/vue-components/v3/icons/CloseIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    height="16px"
+    width="16px"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="size-6"
+  >
+    <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+  </svg>
+</template>

package/vue-components/v3/icons/RefreshIcon.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    width="16px"
+    height="16px"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="size-6"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
+    />
+  </svg>
+</template>

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

@@ -50,7 +50,7 @@ watch(
     } else {
       destroyModal();
     }
-  }
+  },
 );
 
 const handleBackdropClick = (event: MouseEvent) => {

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

@@ -25,10 +25,10 @@ function clickEvent() {
 const route = useRoute();
 watch(
   () => route.fullPath,
-  (n) => {
+  () => {
     isActive.value = "";
     emit("onRouteChange");
-  }
+  },
 );
 onClickOutside(navbarItem, () => {
   isActive.value = "";

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

@@ -12,7 +12,7 @@ withDefaults(
   {
     notifications: () => [],
     unreadNotification: 0,
-  }
+  },
 );
 function notificationTime(time: number) {
   return TimeConvert.getDayDifferences({ past: time });

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

@@ -103,7 +103,7 @@ watch(
   {
     deep: true,
     immediate: true,
-  }
+  },
 );
 </script>
 

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

@@ -63,7 +63,7 @@ watch(
       document.documentElement.style.setProperty("--hsl-lightness", lightness);
     });
   },
-  { deep: true }
+  { deep: true },
 );
 
 watch(
@@ -76,7 +76,7 @@ watch(
       document.documentElement.style.setProperty("--font-hsl-lightness", lightness);
     });
   },
-  { deep: true }
+  { deep: true },
 );
 </script>
 

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

@@ -32,7 +32,7 @@ watch(
   (n) => {
     selectedClusterName.value = n;
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 watch(selectedCluster, (n) => {
@@ -62,7 +62,7 @@ watch(
         return selectedClusterName.value === item.name;
       }) || null;
   },
-  { immediate: true, deep: true }
+  { immediate: true, deep: true },
 );
 </script>
 

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

@@ -38,7 +38,7 @@ watch(
       });
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 </script>
 

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

@@ -22,7 +22,7 @@ watch(
       dropDownStatus.value = "open";
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 const toggleDropDownStatus = () => {

package/vue-components/v3/table/InfoTable.vue

@@ -53,7 +53,7 @@ const isFullTableLoaderActive = computed(() => {
         }"
       >
         <template v-if="!isTableEmpty">
-          <table-row v-for="(tableHeader, idx) in tableHeaders" :key="(tableHeader as string)">
+          <table-row v-for="(tableHeader, idx) in tableHeaders" :key="tableHeader as string">
             <table-cell>
               <span class="is-flex is-align-items-center">
                 <slot :name="`table-cell-icon-${idx}`" />

package/vue-components/v3/table/MultiInfoTable.vue

@@ -58,7 +58,7 @@ watch(
         }
       });
     }
-  }
+  },
 );
 </script>
 

package/vue-components/v3/table/Table.vue

@@ -119,7 +119,7 @@ watch(
       });
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 onUpdated(() => {

package/vue-components/v3/table/TableCell.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { computed } from "vue";
-
 interface Props {
   cellWidth?: number | null;
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   cellWidth: null,
 });
 </script>

package/vue-components/v3/table/table-cell/CellValue.vue

@@ -17,7 +17,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const ContentLoader = defineAsyncComponent(() =>
-  import("vue-content-loader").then(({ ContentLoader }) => ContentLoader)
+  import("vue-content-loader").then(({ ContentLoader }) => ContentLoader),
 );
 const ObjectCell = defineAsyncComponent(() => import("../../table/table-cell/ObjectCell.vue"));
 const ArrayCell = defineAsyncComponent(() => import("../../table/table-cell/ArrayCell.vue"));
@@ -58,7 +58,7 @@ watch(
       oldDivValue = n;
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 const primaryColor = computed(() => {

package/vue-components/v3/table/table-cell/GenericCell.vue

@@ -66,7 +66,7 @@ function redirectTo() {
     <cell-value
       v-else
       :cell-title="cellDescriptor.name"
-      :value="cellValue.data as {} || '-'"
+      :value="(cellValue.data as {}) || '-'"
       :tooltip="cellValue.tooltip || JSON.stringify(cellValue.data)"
     />
   </span>

package/plugins/vue-toaster.js

@@ -1,85 +0,0 @@
-module.exports = {
-  position: "top-center",
-  theme: "toasted-primary",
-  iconPack: "fontawesome",
-  className: "ac-toast",
-  action: {
-    icon: "close",
-    class: "ac-toast-action",
-    onClick: (e, toastObject) => {
-      toastObject.goAway(0);
-    },
-  },
-  register: [
-    {
-      name: "success",
-      message: (payload) => {
-        if (payload) {
-          if (typeof payload === "string") return payload;
-          else if (payload.message) return payload.message;
-          else return "Operation Completed Successfully";
-        }
-        // if there is no message passed show default message
-        else return "Operation Completed Successfully";
-      },
-      options: {
-        icon: "fa-check",
-        duration: 2500,
-        type: "success",
-        className: "ac-toast is-success",
-      },
-    },
-    {
-      name: "error",
-      message: (payload) => {
-        if (payload) {
-          if (typeof payload === "string") return payload;
-          else if (payload.response && payload.response.data && payload.response.data.message)
-            return payload.response.data.message;
-          else if (payload.message) return payload.message;
-          else return "Something Went Wrong";
-        } else return "Something Went Wrong";
-      },
-      options: {
-        icon: "fa-warning",
-        duration: 20000,
-        type: "error",
-        className: "ac-toast is-danger",
-      },
-    },
-    {
-      name: "info",
-      message: (payload) => {
-        if (payload) {
-          if (typeof payload === "string") return payload;
-          else if (payload.message) return payload.message;
-          else return "Something Went Wrong";
-        } else return "Something Went Wrong";
-      },
-      options: {
-        icon: "fa-info",
-        duration: 20000,
-        type: "info",
-        className: "ac-toast is-info",
-      },
-    },
-    {
-      name: "warning",
-      message: (payload) => {
-        if (payload) {
-          if (typeof payload === "string") return payload;
-          else if (payload.message) return payload.message;
-          else return "Something Went Wrong";
-        }
-        // if there is no message passed show default message
-        else return "Something Went Wrong";
-      },
-      options: {
-        icon: "fa-warning",
-        duration: 2500,
-        type: "error",
-        className: "ac-toast is-warning",
-      },
-    },
-  ],
-};