@appscode/design-system 2.2.19 → 2.2.21

package/package.json

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

package/vue-components/styles/components/select-box/_multi-select.scss

@@ -1,19 +1,4 @@
 .multiselect {
-  // margin-top: 3px;
-  // display: flex;
-  // align-items: center;
-  // max-width: 350px;
-  // &.cluster-select {
-  //   .multiselect__tags {
-  //     border: 1px solid $color-border;
-  //     background-color: $table-header;
-
-  //     .multiselect__input {
-  //       background-color: $table-header;
-  //     }
-  //   }
-  // }
-
   .multiselect__tags {
     background-color: $white-100;
     min-height: 36px;
@@ -537,12 +522,12 @@ li {
     &.has-refresh-button {
       .multiselect__select {
         z-index: 99;
-        right: 60px;
+        right: 30px;
       }
 
       .button {
         &.is-clear {
-          right: 30px;
+          right: 60px;
         }
       }
     }
@@ -563,45 +548,25 @@ li {
 
       .multiselect__select {
         z-index: 99;
-        right: 60px;
+        right: 30px;
       }
 
       .button {
         &.is-clear {
-          right: 30px;
+          right: 60px;
         }
       }
     }
 
     .multiselect__select {
       z-index: 99;
-      right: 30px;
+      right: 0px;
     }
 
     .button {
       &.is-clear {
-        right: 0px;
-      }
-    }
-  }
-
-  &.has-info-button {
-    &.has-refresh-button {
-      &.has-clear-button {
-        // .multiselect__select {
-        //   z-index: 99;
-        //   right: 60px;
-        // }
+        right: 30px;
       }
-
-
-
-
-      // .button {
-      //   &.is-information {
-      //     right: 0;
-      //   }
-      // }
     }
   }
 

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>