@appscode/design-system 2.2.38 → 2.2.39

package/package.json

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

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

@@ -1,90 +1,28 @@
-<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"
-      :open-direction="openDirection"
-      :group-values="groupValues"
-      :group-label="groupLabel"
-      :group-select="groupSelect"
-      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 type { ComponentPublicInstance } 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;
-  openDirection: "top" | "bottom";
-  groupLabel: string;
-  groupValues: string;
-  groupSelect: boolean;
+  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;
+  openDirection?: "top" | "bottom";
+  groupLabel?: string;
+  groupValues?: string;
+  groupSelect?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -111,7 +49,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(["select", "remove", "refresh-btn-click"]);
 
-const multiselectElement = ref<HTMLInputElement | null>(null);
+const multiselectElement = ref<ComponentPublicInstance | null>(null);
 const multiselectDivId = ref<HTMLInputElement | null>(null);
 
 const model = defineModel<unknown>({ required: true });
@@ -122,8 +60,9 @@ const isLabelHoisted = computed(() => {
 });
 
 const onClickLabel = () => {
+  openDropDown();
   if (multiselectElement.value) {
-    multiselectDivId.value?.focus();
+    multiselectElement.value.$el.focus();
   }
 };
 
@@ -145,3 +84,67 @@ const onRemove = (removedOption: unknown, id: string) => emit("remove", removedO
 
 const onSelect = (selectedOption: unknown, id: string) => emit("select", selectedOption, id);
 </script>
+
+<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"
+      :open-direction="openDirection"
+      :group-values="groupValues"
+      :group-label="groupLabel"
+      :group-select="groupSelect"
+      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>