@appscode/design-system 2.4.1 → 2.4.3

package/package.json

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

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

@@ -2,11 +2,40 @@
   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;
@@ -34,6 +63,7 @@
     right: 2px;
     top: 2px;
     margin: 0;
+    z-index: 9;
 
     .button {
       margin: 0 !important;
@@ -54,7 +84,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 +105,7 @@
           li {
             display: flex;
 
-            &:hover:not(.is-active) {
+            &:hover:not(.is-active, .is-disabled) {
               background-color: $primary-light-gray;
               color: $color-heading;
 
@@ -103,7 +133,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 +159,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/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/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>