@appscode/design-system 2.4.3 → 2.4.4-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";

package/package.json

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

package/vue-components/styles/components/form-fields/_check-radio-switch.scss

@@ -1,47 +1,47 @@
-.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"]: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[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;
-}
+// .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"]: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[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
@@ -98,6 +98,11 @@
       transition: all 0.2s ease;
     }
   }
+  &:hover {
+    .checkmark {
+      border: 1px solid $ac-primary;
+    }
+  }
 }
 
 // radio button
@@ -131,6 +136,7 @@
       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
@@ -156,6 +162,16 @@
     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;
+      }
+    }
+  }
 }
 
 .ac-switch {
@@ -208,7 +224,7 @@
     }
 
     input:checked + .slider {
-      background-color: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-light));
+      background-color: $ac-primary;
     }
 
     input:checked + .slider:before {
@@ -216,7 +232,7 @@
     }
 
     input:focus-visible + .slider {
-      box-shadow: 0 0 3px hsl(var(--primary-hue), var(--primary-saturation), var(--primary-light));
+      box-shadow: 0 0 3px $ac-primary;
     }
   }
 }

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

@@ -2,40 +2,11 @@
   position: relative;
   z-index: 9;
 
-  &.is-disabled {
-    pointer-events: none;
-  }
-
   input[type="text"] {
     padding-right: 32px;
   }
 
-  .custom-select-placeholder {
-    border: 1px solid $color-border-dark;
-    padding: 8px 15px;
-    border-radius: 4px;
-    line-height: 1;
-    // cursor: pointer;
-    display: flex;
-    align-items: center;
-    height: 36px;
-
-    &:hover {
-      border: 1px solid $ac-primary;
-    }
-  }
-
   &.is-extra-small {
-    height: 32px;
-
-    .custom-select-placeholder {
-      height: 32px;
-    }
-
-    .ac-field {
-      top: 5px;
-    }
-
     .buttons {
       .button {
         height: 28px;
@@ -63,7 +34,6 @@
     right: 2px;
     top: 2px;
     margin: 0;
-    z-index: 9;
 
     .button {
       margin: 0 !important;
@@ -84,7 +54,7 @@
     width: 100%;
     max-height: 500px;
     overflow-y: auto;
-    // transition: 0.2s ease-in-out;
+    transition: 0.3s ease-in-out;
     opacity: 0;
     visibility: hidden;
 
@@ -105,7 +75,7 @@
           li {
             display: flex;
 
-            &:hover:not(.is-active, .is-disabled) {
+            &:hover:not(.is-active) {
               background-color: $primary-light-gray;
               color: $color-heading;
 
@@ -133,7 +103,7 @@
         cursor: pointer;
       }
 
-      &:hover:not(.group li, .is-active, .is-disabled) {
+      &:hover:not(.group li, .is-active) {
         background-color: $primary-light-gray;
         color: $color-heading;
 
@@ -159,9 +129,6 @@
       &.is-disabled {
         opacity: 0.6;
         cursor: not-allowed;
-        label {
-          cursor: not-allowed;
-        }
       }
     }
   }

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

@@ -284,7 +284,7 @@
     color: $color-heading;
     position: absolute;
     z-index: 2;
-    transition: 0.1s ease-in-out;
+    transition: 0.3s ease-in-out;
 
     .is-required {
       color: $danger;

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

@@ -19,18 +19,14 @@ const model = defineModel({ type: Array });
 </script>
 
 <template>
-  <div v-for="option in options" :key="name + option.label" class="field">
-    <input
-      class="is-checkradio has-background-color"
-      :class="modifierClasses"
-      :id="name + option.label"
-      :value="option.value"
-      type="checkbox"
-      v-model="model"
-    />
-    <label :for="name + option.label">{{ option.label }}</label>
+  <div v-for="option in options" :key="name + option.label" class="mb-8">
+    <label class="ac-checkbox" :for="name + option.label">
+      <input :class="modifierClasses" :id="name + option.label" :value="option.value" type="checkbox" v-model="model" />
+      <span class="checkmark"></span>
+      <span>{{ option.label }}</span>
+    </label>
   </div>
-  <p v-show="errorMsg" class="is-danger">
+  <p v-show="errorMsg" class="is-danger mb-16">
     {{ errorMsg }}
   </p>
 </template>

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

@@ -18,10 +18,9 @@ const model = defineModel();
 </script>
 
 <template>
-  <div v-for="option in options" :key="name + option.label" class="field">
+  <div class="ac-radio" v-for="option in options" :key="name + option.label">
     <input
       v-model="model"
-      class="is-checkradio"
       :class="modifierClasses"
       :id="name + option.label"
       type="radio"
@@ -34,7 +33,7 @@ const model = defineModel();
       <slot name="message" />
     </p>
   </div>
-  <p v-show="errorMsg" class="is-danger">
+  <p v-show="errorMsg" class="is-danger mb-16">
     {{ errorMsg }}
   </p>
 </template>

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

@@ -27,13 +27,7 @@ const CloseIcon = defineAsyncComponent(() => import("../icons/CloseIcon.vue"));
   <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" /> -->
-    <p class="custom-select-placeholder">
-      <span class="is-ellipsis-1">
-        Select Value Select ValueSelect ValueSelect ValueSelect ValueSelect ValueSelect Value
-      </span>
-    </p>
+    <input type="text" value="Select" />
 
     <div v-if="multiselect" class="ac-field field is-grouped is-clipped">
       <div class="control">

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

@@ -18,17 +18,21 @@ const model = defineModel({ type: Boolean });
 </script>
 
 <template>
-  <div class="field">
-    <input
-      v-model="model"
-      :id="name"
-      type="checkbox"
-      :name="name"
-      class="switch is-rounded is-primary"
-      :class="modifierClasses"
-      :data-testid="dataTestId"
-    />
+  <div class="ac-switch is-flex is-align-items-center gap-8">
     <label :for="name">{{ label }}</label>
+    <label class="switch">
+      <input
+        v-model="model"
+        :id="name"
+        type="checkbox"
+        :name="name"
+        class="switch is-rounded is-primary"
+        :class="modifierClasses"
+        :data-testid="dataTestId"
+      />
+      <span class="slider round"></span>
+    </label>
+
     <p v-show="errorMsg" class="is-danger">
       {{ errorMsg }}
     </p>

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

@@ -1,9 +1,3 @@
-<script setup lang="ts">
-withDefaults(defineProps<{ direction?: "up" | "down" }>(), {
-  direction: "up",
-});
-</script>
-
 <template>
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -14,7 +8,6 @@ withDefaults(defineProps<{ direction?: "up" | "down" }>(), {
     stroke-width="1.5"
     stroke="currentColor"
     class="size-6"
-    :style="direction === 'up' ? 'transform: rotate(0deg)' : 'transform: rotate(-180deg)'"
   >
     <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
   </svg>

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

@@ -1,9 +1,3 @@
-<script setup lang="ts">
-withDefaults(defineProps<{ direction?: "up" | "down" }>(), {
-  direction: "up",
-});
-</script>
-
 <template>
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -14,7 +8,6 @@ withDefaults(defineProps<{ direction?: "up" | "down" }>(), {
     stroke-width="1.5"
     stroke="currentColor"
     class="size-6"
-    :style="direction === 'up' ? 'transform: rotate(0deg)' : 'transform: rotate(-180deg)'"
   >
     <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
   </svg>

package/vue-components/v3/upcoming/SimpleSelect.vue

@@ -1,134 +0,0 @@
-<script setup lang="ts">
-import { computed, defineAsyncComponent, ref, watch } from "vue";
-import { onClickOutside, useFocus } from "@vueuse/core";
-
-import AcButton from "../button/Button.vue";
-import AcButtons from "../button/Buttons.vue";
-
-const ArrowDownIcon = defineAsyncComponent(() => import("../icons/ArrowDownIcon.vue"));
-const RefreshIcon = defineAsyncComponent(() => import("../icons/RefreshIcon.vue"));
-const CloseIcon = defineAsyncComponent(() => import("../icons/CloseIcon.vue"));
-
-type Option = { text: string; value: string };
-interface prop {
-  custom?: boolean;
-  options?: Array<Option>;
-  isLoading?: boolean;
-  optionType?: "simple" | "custom";
-}
-
-const props = withDefaults(defineProps<prop>(), {
-  custom: false,
-  options: () => [],
-  isLoading: false,
-  optionType: "simple",
-});
-
-defineEmits(["onRefreshClick"]);
-
-const selectedValue = ref<Option>();
-const labelHoisted = ref(false);
-const searchText = ref("");
-const isOpen = ref(false);
-
-// handle outside box
-const selectBox = ref(null);
-onClickOutside(selectBox, () => (isOpen.value = false));
-
-// handle input click
-const searchInput = ref(null);
-const { focused } = useFocus(searchInput, { initialValue: true });
-
-// filter options based on search text
-const filteredOptions = computed(() => {
-  if (searchText.value) {
-    return props.options.filter((op) => op.text.includes(searchText.value));
-  } else return props.options || [];
-});
-
-// handle selection
-const onLabelClick = (op: Option) => {
-  selectedValue.value = op;
-  isOpen.value = false;
-};
-
-// handle label click
-const selectClick = () => {
-  isOpen.value = true;
-  focused.value = true;
-};
-
-// handle clear btn
-const handleClear = () => {
-  selectedValue.value = undefined;
-  searchText.value = "";
-};
-
-// handle depend on selected data
-watch(selectedValue, (n) => {
-  if (n) labelHoisted.value = true;
-  else labelHoisted.value = false;
-});
-
-watch(isOpen, (n) => {
-  if (n) searchText.value = "";
-  else {
-    if (!selectedValue.value?.value) labelHoisted.value = false;
-  }
-});
-</script>
-
-<template>
-  <div
-    ref="selectBox"
-    class="ac-single-input is-small is-selectbox"
-    :class="{ 'is-open': isOpen, 'is-disabled': isLoading }"
-    :style="[isOpen ? { 'z-index': 2 } : '']"
-  >
-    <label for="custom-select" class="ac-label" :class="{ 'show-label': labelHoisted || isOpen }" @click="selectClick">
-      Select Option
-    </label>
-
-    <input
-      v-if="isOpen"
-      v-model="searchText"
-      type="text"
-      ref="searchInput"
-      placeholder="Select One"
-      @click="selectClick"
-    />
-
-    <p v-else class="custom-select-placeholder" @click="selectClick">
-      <span class="is-ellipsis-1">{{ selectedValue?.text }}</span>
-    </p>
-
-    <ac-buttons>
-      <button class="button ac-button is-white" @click="handleClear">
-        <ArrowDownIcon />
-      </button>
-
-      <ac-button modifier-classes="is-white" @click="$emit('onRefreshClick')">
-        <RefreshIcon :class="{ 'is-spin': isLoading }" />
-      </ac-button>
-
-      <ac-button modifier-classes="is-white" @click="isOpen = !isOpen">
-        <CloseIcon :direction="isOpen ? 'down' : 'up'" />
-      </ac-button>
-    </ac-buttons>
-
-    <div v-if="optionType === 'custom'" class="custom-select options">
-      <slot />
-    </div>
-
-    <ul v-else class="options">
-      <template v-for="op in filteredOptions" :key="op.value">
-        <li @click="onLabelClick(op)" :class="{ 'is-active': selectedValue?.value === op.value }">
-          <label for="opt-one">{{ op.text }}</label>
-        </li>
-      </template>
-      <li v-if="filteredOptions.length <= 0" class="is-disabled">
-        <label>No element found. Consider changing the search text</label>
-      </li>
-    </ul>
-  </div>
-</template>