@appscode/design-system 2.2.20 → 2.2.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.2.20",
+  "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/AcInput.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref, watch } from "vue";
+
+interface prop {
+  name?: string;
+  inputType?: string;
+  customClass?: string;
+  placeholderText?: string;
+  isReadOnly?: boolean;
+  isDisabled?: boolean;
+  showLabel?: boolean;
+  errorMsg?: string;
+  showStar?: boolean;
+}
+
+withDefaults(defineProps<prop>(), {
+  name: "",
+  inputType: "text",
+  customClass: "",
+  placeholderText: "",
+  isReadOnly: false,
+  isDisabled: false,
+  showLabel: true,
+  errorMsg: "",
+  showStar: false,
+});
+
+const AcInputText = defineAsyncComponent(
+  () => import("@appscode/design-system/vue-components/v3/form-fields/AcSingleInput.vue")
+);
+
+const model = defineModel({ type: String });
+const isLabelHoisted = ref(false);
+const isValueVisible = ref(false);
+const acLabel = ref<HTMLInputElement | null>(null);
+const acInput = ref<HTMLInputElement | null>(null);
+
+function onFocusInput() {
+  triggerInput();
+}
+function onFocusOutInput() {
+  if (!model.value) isLabelHoisted.value = false;
+}
+
+function onClickLabel() {
+  acInput.value?.focus();
+  triggerInput();
+}
+
+function triggerInput() {
+  isLabelHoisted.value = true;
+}
+
+watch(
+  model,
+  (n) => {
+    if (n) triggerInput();
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <ac-input-text :modifier-classes="customClass" :class="{ 'is-disabled': isDisabled }">
+    <template #label>
+      <label
+        ref="acLabel"
+        class="ac-label"
+        :class="{ 'is-required': showStar, 'show-label': isLabelHoisted }"
+        @click="onClickLabel"
+        >{{ placeholderText }}
+        <span v-if="showStar" class="is-required"> * </span>
+      </label>
+    </template>
+
+    <input
+      ref="acInput"
+      v-model="model"
+      data-testid="ac-input-text"
+      class="ac-input"
+      :name="name"
+      :type="isValueVisible ? 'text' : inputType"
+      :readonly="isReadOnly"
+      :disabled="isDisabled"
+      @focus="onFocusInput"
+      @focusout="onFocusOutInput"
+    />
+    <template #eye-switcher>
+      <span
+        v-if="inputType === 'password'"
+        class="eye"
+        data-testid="ac-input-text-hide-value"
+        @click="isValueVisible = !isValueVisible"
+      >
+        <i aria-hidden="true" class="fa" :class="`fa-${isValueVisible ? 'eye-slash' : 'eye'}`" />
+      </span>
+    </template>
+    <div class="is-flex is-flex-direction-column">
+      <p v-if="errorMsg" class="is-danger">{{ errorMsg }}</p>
+      <slot name="message" />
+    </div>
+  </ac-input-text>
+</template>

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>