@appscode/design-system 2.6.2 → 2.6.4

package/package.json

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

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineAsyncComponent, ref, watch } from "vue";
+import { defineAsyncComponent, ref, watch, onMounted } from "vue";
 
 interface prop {
   name?: string;
@@ -14,7 +14,7 @@ interface prop {
   showStar?: boolean;
 }
 
-withDefaults(defineProps<prop>(), {
+const props = withDefaults(defineProps<prop>(), {
   name: "",
   inputType: "text",
   customClass: "",
@@ -39,7 +39,7 @@ function onFocusInput() {
   triggerInput();
 }
 function onFocusOutInput() {
-  if (!model.value) isLabelHoisted.value = false;
+  if (!model.value && props.inputType !== "date" && props.inputType !== "datetime-local") isLabelHoisted.value = false;
 }
 
 function onClickLabel() {
@@ -58,6 +58,10 @@ watch(
   },
   { immediate: true },
 );
+
+onMounted(() => {
+  if (props.inputType === "date" || props.inputType === "datetime-local") triggerInput();
+});
 </script>
 
 <template>

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

@@ -8,6 +8,7 @@ interface Props {
   errorMsg?: string;
   placeholderText?: string;
   disabled?: boolean;
+  isMultiSelect?: boolean;
   label?: string;
   taggable?: boolean;
   allowEmpty?: boolean;
@@ -33,6 +34,7 @@ const props = withDefaults(defineProps<Props>(), {
   errorMsg: "",
   placeholderText: "",
   disabled: false,
+  isMultiSelect: false,
   label: "",
   allowEmpty: false,
   options: () => [],
@@ -135,6 +137,7 @@ const onSelect = (selectedOption: unknown, id: string) => emit("select", selecte
     <multiselect
       ref="multiselectElement"
       v-model="model"
+      :multiple="isMultiSelect"
       :track-by="trackBy"
       :label="showBy"
       :class="multiselectCustomClass"