@appscode/design-system 2.4.4-alpha → 2.4.4

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

@@ -2,11 +2,43 @@
   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;
+    span {
+      line-height: 1.2;
+    }
+
+    &:hover {
+      border: 1px solid $ac-primary;
+    }
+  }
+
   &.is-extra-small {
+    height: 32px;
+
+    .custom-select-placeholder {
+      height: 32px;
+    }
+
+    .ac-field {
+      top: 5px;
+    }
+
     .buttons {
       .button {
         height: 28px;
@@ -34,6 +66,7 @@
     right: 2px;
     top: 2px;
     margin: 0;
+    z-index: 9;
 
     .button {
       margin: 0 !important;
@@ -54,7 +87,7 @@
     width: 100%;
     max-height: 500px;
     overflow-y: auto;
-    transition: 0.3s ease-in-out;
+    // transition: 0.2s ease-in-out;
     opacity: 0;
     visibility: hidden;
 
@@ -75,7 +108,7 @@
           li {
             display: flex;
 
-            &:hover:not(.is-active) {
+            &:hover:not(.is-active, .is-disabled) {
               background-color: $primary-light-gray;
               color: $color-heading;
 
@@ -103,7 +136,7 @@
         cursor: pointer;
       }
 
-      &:hover:not(.group li, .is-active) {
+      &:hover:not(.group li, .is-active, .is-disabled) {
         background-color: $primary-light-gray;
         color: $color-heading;
 
@@ -129,6 +162,9 @@
       &.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.3s ease-in-out;
+    transition: 0.1s ease-in-out;
 
     .is-required {
       color: $danger;

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

@@ -19,14 +19,18 @@ const model = defineModel({ type: Array });
 </script>
 
 <template>
-  <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 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>
-  <p v-show="errorMsg" class="is-danger mb-16">
+  <p v-show="errorMsg" class="is-danger">
     {{ errorMsg }}
   </p>
 </template>

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

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

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

@@ -27,7 +27,13 @@ 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" />
+
+    <!-- <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>
 
     <div v-if="multiselect" class="ac-field field is-grouped is-clipped">
       <div class="control">

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

@@ -18,21 +18,17 @@ const model = defineModel({ type: Boolean });
 </script>
 
 <template>
-  <div class="ac-switch is-flex is-align-items-center gap-8">
+  <div class="field">
+    <input
+      v-model="model"
+      :id="name"
+      type="checkbox"
+      :name="name"
+      class="switch is-rounded is-primary"
+      :class="modifierClasses"
+      :data-testid="dataTestId"
+    />
     <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,3 +1,9 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ direction?: "up" | "down" }>(), {
+  direction: "up",
+});
+</script>
+
 <template>
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -8,6 +14,7 @@
     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,3 +1,9 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ direction?: "up" | "down" }>(), {
+  direction: "up",
+});
+</script>
+
 <template>
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -8,6 +14,7 @@
     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

@@ -0,0 +1,134 @@
+<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>