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

package/package.json

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

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>