@appscode/design-system 2.3.0 → 2.4.0

package/main.scss

@@ -25,4 +25,4 @@
 @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";
+// @import "@/components/vue-components/styles/theme/appscode.scss";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.3.0",
+  "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/_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

@@ -4,4 +4,4 @@
 @import "file-upload";
 @import "image-upload";
 @import "input-card";
-@import "form-footer";
+@import "form-footer";

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

@@ -132,4 +132,4 @@
       }
     }
   }
-}
+}

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/ListInputField.vue

@@ -22,7 +22,7 @@ withDefaults(
   defineProps<{
     placeholderText?: string;
   }>(),
-  { placeholderText: "Enter a New Item" }
+  { placeholderText: "Enter a New Item" },
 );
 
 const newItem = ref("");

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",
-      },
-    },
-  ],
-};