edvoyui-component-library-test-flight 0.0.156 → 0.0.158

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "edvoyui-component-library-test-flight",
   "private": false,
-  "version": "0.0.156",
+  "version": "0.0.158",
   "type": "module",
   "files": [
     "dist/",

package/src/components/datepicker/EUIDatepicker.vue

@@ -78,7 +78,9 @@
         @update:model-value="handleDate"
       />
     </div>
-    <EUIErrorMessage :errors="errors" :name="name" />
+    <template v-if="errors && errors.length">
+      <EUIErrorMessage :errors="errors" :name="name" class="mt-2" />
+    </template>
   </div>
 </template>
 
@@ -87,6 +89,7 @@ import { computed, ref, toRefs, watch } from 'vue'
 import type { PropType } from 'vue'
 import VueDatePicker from '@vuepic/vue-datepicker'
 import '@vuepic/vue-datepicker/dist/main.css'
+import EUIErrorMessage from '../errorMessage/EUIErrorMessage.vue';
 
 const props = defineProps({
   modelValue: {

package/src/components/searchTagSelect/EUISearchTagSelect.vue

@@ -190,9 +190,10 @@
         </div>
       </template>
     </Popper>
-    <div v-if="errors && errors.length > 0 && !showDropDown" class="error-msg">
-      {{ typeof errors[0] === "object" ? errors[0].$message : errors[0] }}
-    </div>
+    <template v-if="errors && errors.length && !showDropDown">
+      <EUIErrorMessage :errors="errors" :name="name" class="mt-2" />
+    </template>
+
     <slot v-if="$slots.labelhint" name="labelhint"></slot>
     <div
       v-if="selectType === 'multiple' && selectedValues.length > 0 && showTags"
@@ -234,7 +235,7 @@
 <script setup lang="ts">
 import { computed, ref, watch, nextTick, onMounted, onUnmounted } from "vue";
 import { startCase } from "lodash";
-import { ErrorObject } from "../../utils/types";
+import { ErrorObject, ValidationErrors } from "../../utils/types";
 import SearchInput from "./SearchInput.vue";
 import SearchBigZoomIn from "../../assets/svg/SearchBigZoomIn.vue";
 import ChevronDownStroke from "../../assets/svg/ChevronDownStroke.vue";
@@ -243,12 +244,14 @@ import EUITag from "../tag/EUITag.vue";
 import Popper from "vue3-popper";
 import CheckTick from "../../assets/svg/CheckTick.vue";
 import { XMarkIcon } from "@heroicons/vue/20/solid";
+import EUIErrorMessage from "../errorMessage/EUIErrorMessage.vue";
 
 // Props
 interface Props {
   modelValue?: any;
   items?: any[];
   label?: string;
+  name?: string;
   placement?:
     | "auto"
     | "auto-start"
@@ -269,7 +272,7 @@ interface Props {
   placeholder?: string;
   offsetSkid?: string;
   offsetDistance?: string;
-  errors?: Array<string | ErrorObject>;
+  errors?: ValidationErrors | ErrorObject[];
   selectType?: "single" | "multiple";
   filterFunction?: Function;
   searchable?: boolean;
@@ -287,11 +290,11 @@ interface Props {
   popperClasses?: string;
   showCount?: boolean;
 }
-
 const props = withDefaults(defineProps<Props>(), {
   items: () => [],
   itemText: "name",
   placeholder: "Please Select",
+  name: "",
   offsetDistance: "4",
   offsetSkid: "0",
   filterFunction: () => {},
@@ -313,6 +316,7 @@ const props = withDefaults(defineProps<Props>(), {
   showCount: false,
 });
 
+
 // Emits
 const emit = defineEmits<{
   "update:modelValue": [value: any];

package/src/components/select/EUISelect.vue

@@ -494,8 +494,17 @@ const selectAll = (e: Event) => {
 };
 
 watch(selected, (newValue) => {
-  emit("update:modelValue", newValue);
-  if (newValue === null || !newValue) {
+  // Emit scalar for single-select, array for multi-select
+  if (props.multiple) {
+    emit("update:modelValue", newValue);
+  } else {
+    if (Array.isArray(newValue)) {
+      emit("update:modelValue", newValue[0] ?? "");
+    } else {
+      emit("update:modelValue", newValue as any);
+    }
+  }
+  if (newValue === null || !newValue || (Array.isArray(newValue) && newValue.length === 0)) {
     emit("deselected", newValue);
   }
 });
@@ -512,7 +521,12 @@ const deselected = (newValue: any) => {
 };
 
 watch(modelValue, (newValue: any) => {
-  selected.value = newValue;
+  if (props.multiple) {
+    selected.value = Array.isArray(newValue) ? newValue : (newValue ? [newValue] : []);
+  } else {
+    // keep scalar
+    selected.value = Array.isArray(newValue) ? (newValue[0] ?? "") : newValue;
+  }
 });
 
 const search = (x: string) => {
@@ -565,12 +579,21 @@ const fuseSearch = (
 };
 
 onMounted(() => {
-  if (Array.isArray(props.value)) {
-    selected.value = props.value;
-  } else if (props.value) {
-    selected.value = [props.value];
+  if (props.multiple) {
+    if (Array.isArray(props.value)) {
+      selected.value = props.value;
+    } else if (props.value) {
+      selected.value = [props.value];
+    } else {
+      selected.value = [];
+    }
   } else {
-    selected.value = [];
+    // single: scalar
+    if (Array.isArray(props.value)) {
+      selected.value = props.value[0] ?? "";
+    } else {
+      selected.value = props.value ?? "";
+    }
   }
 });
 

package/src/components/uidemo/select-com.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="grid w-full grid-cols-3 gap-10">
+    <div>
+      <EUISelect
+        v-model="businessAreaSel"
+        :items="businessArea"
+        search-label="name"
+        label="Select Label"
+        placeholder="Placeholder"
+        :multiple="false"
+        :inputFilled="false"
+      />
+      <pre class="text-green-500 text-xxs">{{ businessAreaSel }}</pre>
+    </div>
+
+    <div>
+      <EUISelect
+        v-model="checkboxData"
+        search-label="name"
+        placeholder="Placeholder"
+        :items="datas"
+        :selected-count="true"
+        selectedCountLabel="Checkbox"
+        :multiple="true"
+        :is-checkbox="true"
+      />
+      <pre class="text-green-500 text-xxs">{{ checkboxData }}</pre>
+    </div>
+
+    <div>
+      <EUISelect
+        v-model="multipleData"
+        search-label="name"
+        label="Select Label"
+        placeholder="Placeholder"
+        :items="datas"
+        :multiple="true"
+        :multiple-limit="3"
+      />
+      <pre class="text-green-500 text-xxs">{{ multipleData }}</pre>
+    </div>
+    <div>
+      <EUISelect
+        v-model="singleData"
+        search-label="name"
+        label="Select Label"
+        placeholder="Placeholder"
+        :items="datas"
+        :multiple="false"
+      />
+      <pre class="text-green-500 text-xxs">{{ singleData }}</pre>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import EUISelect from "../select/EUISelect.vue";
+
+const businessArea = ref(["All", "B2B", "B2C", "Accelerator"]);
+const businessAreaSel = ref(businessArea.value?.[0]);
+
+const checkboxData = ref([]);
+const multipleData = ref([]);
+const singleData = ref({});
+const datas = ref([
+  {
+    value: "ShawnBurke",
+    name: "Shawn Burke",
+    age: 6,
+  },
+  {
+    value: "EmeryNolan",
+    name: "Emery Nolan",
+    age: 4,
+  },
+  {
+    value: "EmbryGrant",
+    name: "Embry Grant",
+    age: 3,
+  },
+  {
+    value: "JesseAustin",
+    name: "Jesse Austin",
+    age: 9,
+  },
+  {
+    value: "TandyChristensen",
+    name: "Tandy Christensen",
+    age: 7,
+  },
+  {
+    value: "ShawnBurkeNew",
+    name: "Shawn Burke New",
+    age: 6,
+  },
+  {
+    value: "EmeryNolanNew",
+    name: "Emery Nolan New",
+    age: 4,
+  },
+  {
+    value: "EmbryGrantNew",
+    name: "Embry Grant New",
+    age: 3,
+  },
+  {
+    value: "JesseAustinNew",
+    name: "Jesse Austin New",
+    age: 9,
+  },
+  {
+    value: "TandyChristensenNew",
+    name: "Tandy Christensen New",
+    age: 7,
+  },
+]);
+</script>
+
+<style scoped></style>