@appscode/design-system 2.2.66 → 2.2.67-alpha

package/main.scss

@@ -4,8 +4,8 @@
 
 // Third party CSS
 @import "../node_modules/bulma/bulma.sass";
-@import "bulma-checkradio";
-@import "bulma-switch";
+// @import "bulma-checkradio";
+// @import "bulma-switch";
 @import "bulma-tooltip";
 @import "font-awesome/css/font-awesome.min.css";
 @import "vue-multiselect/dist/vue-multiselect.css";
@@ -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.66",
+  "version": "2.2.67-alpha",
   "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/_check-radio-switch.scss

@@ -1,42 +1,238 @@
-.is-checkradio.is-primary[type="checkbox"].is-primary:checked.has-background-color + label::before,
-.is-checkradio.is-primary[type="checkbox"].is-primary:checked.has-background-color + label:before,
-.is-checkradio.is-primary[type="checkbox"].is-primary:checked.has-background-color + label::after,
-.is-checkradio.is-primary[type="checkbox"].is-primary:checked.has-background-color + label:after {
-  background-color: $ac-primary !important;
-}
+// .is-checkradio.is-primary[type="checkbox"].is-primary:checked.has-background-color + label::before,
+// .is-checkradio.is-primary[type="checkbox"].is-primary:checked.has-background-color + label:before,
+// .is-checkradio.is-primary[type="checkbox"].is-primary:checked.has-background-color + label::after,
+// .is-checkradio.is-primary[type="checkbox"].is-primary:checked.has-background-color + label:after {
+//   background-color: $ac-primary !important;
+// }
 
-.is-checkradio[type="checkbox"] + label::after,
-.is-checkradio[type="checkbox"] + label:after {
-  border-color: $ac-primary;
-}
+// .is-checkradio[type="checkbox"] + label::after,
+// .is-checkradio[type="checkbox"] + label:after {
+//   border-color: $ac-primary;
+// }
 
-.is-checkradio[type="checkbox"]:checked + label::before,
-.is-checkradio[type="checkbox"]:checked + label:before {
-  border: 1px solid $ac-primary;
-}
+// .is-checkradio[type="checkbox"]:checked + label::before,
+// .is-checkradio[type="checkbox"]:checked + label:before {
+//   border: 1px solid $ac-primary;
+// }
 
-.is-checkradio.is-primary[type="radio"] + label::after,
-.is-checkradio.is-primary[type="radio"] + label:after {
-  background: $ac-primary !important;
-}
-.is-checkradio.is-primary[type="checkbox"]:checked + label::before,
-.is-checkradio.is-primary[type="checkbox"]:checked + label:before,
-.is-checkradio.is-primary[type="radio"]:checked + label::before,
-.is-checkradio.is-primary[type="radio"]:checked + label:before {
-  border-color: $ac-primary;
-}
+// .is-checkradio.is-primary[type="radio"] + label::after,
+// .is-checkradio.is-primary[type="radio"] + label:after {
+//   background: $ac-primary !important;
+// }
+
+// .is-checkradio.is-primary[type="checkbox"]:checked + label::before,
+// .is-checkradio.is-primary[type="checkbox"]:checked + label:before,
+// .is-checkradio.is-primary[type="radio"]:checked + label::before,
+// .is-checkradio.is-primary[type="radio"]:checked + label:before {
+//   border-color: $ac-primary;
+// }
+
+// .is-checkradio[type="radio"].is-primary:checked + label::after,
+// .is-checkradio[type="radio"].is-primary:checked + label:after {
+//   background-color: $ac-primary !important;
+//   border-color: $ac-primary;
+// }
+
+// .switch[type="checkbox"].is-primary:checked + label::before,
+// .switch[type="checkbox"].is-primary:checked + label:before {
+//   background-color: $ac-primary;
+// }
+
+// .is-checkradio[type="radio"] + label::after,
+// .is-checkradio[type="radio"] + label:after {
+//   background-color: $ac-primary;
+// }
+
+// 2024 AppsCode Custom Checkbox, Radio, Switch style
+// checkbox
+.ac-checkbox {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+
+  input {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  input:checked ~ .checkmark {
+    background: $ac-primary;
+    border: 1px solid $ac-primary;
+  }
+
+  input:checked ~ .checkmark::after {
+    opacity: 1;
+    transition: all 0.2s ease;
+  }
+
+  .checkmark {
+    position: relative;
+    display: block;
+    top: 0;
+    left: 1px;
+    width: 18px;
+    height: 18px;
+    background: white;
+    border-radius: 4px;
+    border: 1px solid $color-border-dark;
+    transition: all 0.2s ease;
 
-.is-checkradio[type="radio"].is-primary:checked + label::after,
-.is-checkradio[type="radio"].is-primary:checked + label:after {
-  background-color: $ac-primary !important;
-  border-color: $ac-primary;
+    &::after {
+      position: absolute;
+      display: block;
+      content: "";
+      left: 50%;
+      top: 45%;
+      width: 4px;
+      height: 8px;
+      border: solid white;
+      border-width: 0 2px 2px 0;
+      transform: translate(-50%, -50%) rotate(45deg);
+      opacity: 0;
+      transition: all 0.2s ease;
+    }
+  }
+  &:hover {
+    .checkmark {
+      border: 1px solid $ac-primary;
+    }
+  }
 }
 
-.switch[type="checkbox"].is-primary:checked + label::before,
-.switch[type="checkbox"].is-primary:checked + label:before {
-  background-color: $ac-primary;
+// radio button
+.ac-radio {
+  &:not(:last-child) {
+    margin-bottom: 8px;
+  }
+
+  // Hide the actual radio inputs off-screen
+  [type="radio"] {
+    position: absolute;
+    left: -9999px;
+  }
+
+  // Style for labels associated with radio buttons
+  [type="radio"] + label {
+    position: relative;
+    padding-left: 24px;
+    cursor: pointer;
+    line-height: 20px;
+    display: inline-block;
+
+    // Base circle style
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 18px;
+      height: 18px;
+      border: 1px solid $color-border-dark;
+      border-radius: 50%; // Full circle
+      background: #fff;
+      transition: 0.2s ease-in-out;
+    }
+
+    // Inner dot for selected radio button
+    &::after {
+      content: "";
+      position: absolute;
+      top: 4px;
+      left: 4px;
+      width: 10px;
+      height: 10px;
+      background: $ac-primary;
+      border-radius: 50%;
+      opacity: 0;
+      transform: scale(0);
+      transition:
+        opacity 0.2s ease,
+        transform 0.2s ease;
+    }
+  }
+
+  // Checked state styles
+  [type="radio"]:checked + label::after {
+    opacity: 1;
+    transform: scale(1);
+  }
+  [type="radio"]:checked + label::before {
+    border: 1px solid $ac-primary;
+  }
+  &:hover {
+    [type="radio"] + label {
+      &::before {
+        border: 1px solid $ac-primary;
+      }
+    }
+  }
 }
-.is-checkradio[type="radio"] + label::after,
-.is-checkradio[type="radio"] + label:after {
-  background-color: $ac-primary;
+
+.ac-switch {
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 36px;
+    height: 18px;
+
+    input {
+      position: absolute;
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1; // Keeps input clickable
+      cursor: pointer;
+    }
+
+    .slider {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #ccc;
+      transition:
+        background-color 0.4s,
+        box-shadow 0.4s;
+
+      &.round {
+        border-radius: 34px;
+
+        &::before {
+          border-radius: 50%;
+        }
+      }
+
+      &:before {
+        content: "";
+        position: absolute;
+        height: 12px;
+        width: 12px;
+        left: 4px;
+        bottom: 3px;
+        background-color: white;
+        transition:
+          transform 0.4s,
+          background-color 0.4s;
+      }
+    }
+
+    input:checked + .slider {
+      background-color: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-light));
+    }
+
+    input:checked + .slider:before {
+      transform: translateX(16px);
+    }
+
+    input:focus-visible + .slider {
+      box-shadow: 0 0 3px hsl(var(--primary-hue), var(--primary-saturation), var(--primary-light));
+    }
+  }
 }

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>