@appscode/design-system 2.2.21 → 2.2.22

package/package.json

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

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

@@ -0,0 +1,135 @@
+<template>
+  <div
+    ref="multiselectDivId"
+    class="multi-select-wrapper"
+    :class="{
+      multiselectCustomClass,
+      'has-refresh-button': hasRefreshBtn,
+      'is-disable': disabled || isLoaderActive,
+      'has-clear-button': allowEmpty && model,
+    }"
+    data-testid="cluster-status-select-header"
+  >
+    <label
+      v-if="label.length"
+      :class="{ 'show-label': isLabelHoisted }"
+      data-testid="ac-multiselect-label"
+      @click.prevent="onClickLabel"
+    >
+      {{ isLabelHoisted ? label : `Select ${label}` }}
+      <span v-if="showStar" class="is-required has-text-danger"> * </span>
+    </label>
+    <button v-if="allowEmpty && model" class="button ac-button is-clear is-transparent" @click.prevent="model = ''">
+      <i class="fa fa-times" />
+    </button>
+    <button
+      v-if="hasRefreshBtn"
+      class="button ac-button is-primary is-refresh is-transparent"
+      :class="{ spin: isLoaderActive }"
+      @click.prevent="$emit('refresh-btn-click')"
+    >
+      <i class="fa fa-refresh" />
+    </button>
+    <multiselect
+      ref="multiselectElement"
+      v-model="model"
+      :track-by="trackBy"
+      :label="showBy"
+      :class="multiselectCustomClass"
+      :options="options"
+      :placeholder="placeholderText"
+      :disabled="disabled || isLoaderActive"
+      :allow-empty="false"
+      :show-labels="false"
+      :close-on-select="true"
+      data-testid="simple-select-box"
+      @open="openDropDown"
+      @close="closeDropDown"
+      @select="onSelect"
+      @remove="onRemove"
+    >
+      <template #noResult>
+        <span> {{ noResultText }} </span>
+      </template>
+    </multiselect>
+    <p v-show="errorMsg" class="is-danger">
+      {{ errorMsg }}
+    </p>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import Multiselect from "vue-multiselect";
+
+interface Props {
+  errorMsg: string;
+  placeholderText: string;
+  disabled: boolean;
+  label: string;
+  allowEmpty: boolean;
+  options: unknown[];
+  trackBy: string;
+  showBy: string;
+  closeOnSelect: boolean;
+  hasRefreshBtn: boolean;
+  isLoaderActive: boolean;
+  noResultText: string;
+  showStar: boolean;
+  wrapperDivCustomClass: string;
+  multiselectCustomClass: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  errorMsg: "",
+  placeholderText: "",
+  disabled: false,
+  label: "",
+  allowEmpty: false,
+  options: () => [],
+  wrapperDivCustomClass: "",
+  multiselectCustomClass: "",
+  trackBy: "",
+  showBy: "",
+  closeOnSelect: false,
+  hasRefreshBtn: false,
+  isLoaderActive: false,
+  noResultText: "",
+  showStar: false,
+});
+
+const emit = defineEmits(["select", "remove", "refresh-btn-click"]);
+
+const multiselectElement = ref<HTMLInputElement | null>(null);
+const multiselectDivId = ref<HTMLInputElement | null>(null);
+
+const model = defineModel<unknown>({ required: true });
+const isDropdownOpen = ref(false);
+
+const isLabelHoisted = computed(() => {
+  return props.label && ((model.value && model.value !== "") || isDropdownOpen.value);
+});
+
+const onClickLabel = () => {
+  if (multiselectElement.value) {
+    multiselectDivId.value?.focus();
+  }
+};
+
+const openDropDown = () => {
+  isDropdownOpen.value = true;
+  if (multiselectDivId.value) {
+    multiselectDivId.value.style.zIndex = "799";
+  }
+};
+
+const closeDropDown = () => {
+  isDropdownOpen.value = false;
+  if (multiselectDivId.value) {
+    multiselectDivId.value.style.zIndex = "";
+  }
+};
+
+const onRemove = (removedOption: unknown, id: string) => emit("remove", removedOption, id);
+
+const onSelect = (selectedOption: unknown, id: string) => emit("select", selectedOption, id);
+</script>