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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "edvoyui-component-library-test-flight",
   "private": false,
-  "version": "0.0.154",
+  "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/timeLine/EUITimeLine.vue

@@ -1,43 +1,148 @@
 <template>
-    <div>
-        <ul role="list" class="space-y-6 p-4">
-            <EUITimeLineItem :data="items" :type="type" :timeline-icon="icon" :show-more="showMore" />
-        </ul>
-    </div>
+  <div>
+    <ul role="list" class="p-4 space-y-6">
+      <li
+        v-for="(item, itemIdx) in items"
+        :data="item"
+        :key="`timeline_${itemIdx}`"
+        class="relative flex gap-x-4 group"
+        :type="type"
+        :timeline-icon="icon"
+        :show-more="showMore"
+      >
+        <div
+          :class="[
+            itemIdx === items.length - 1 ? 'h-6' : '-bottom-6',
+            'absolute left-0 top-0 flex w-6 justify-center',
+          ]"
+        >
+        <slot name="line" :type="type">
+          <div
+            :class="[
+              type === 'icon' ? 'w-0.5 bg-green-500' : 'w-px bg-gray-200',
+            ]"
+          />
+        </slot>
+
+        </div>
+        <template v-if="type === 'image'">
+          <slot name="image" :data="item" :dataIndex="itemIdx">
+            <img
+              :src="item.person?.imageUrl"
+              alt=""
+              class="relative flex-initial flex-shrink-0 rounded-full size-6 bg-gray-50"
+            />
+          </slot>
+          <slot name="details" :data="item" :dataIndex="itemIdx">
+            <div
+              class="flex-1 min-w-0 p-3 rounded-md ring-1 ring-inset ring-gray-200"
+            >
+              <div class="flex justify-between gap-x-4 mb-0.5">
+                <div class="text-xs leading-5 text-gray-500">
+                  <span class="font-medium text-gray-900">{{
+                    item.person?.name
+                  }}</span>
+                </div>
+                <time
+                  :datetime="item.dateTime"
+                  class="flex-none text-xs leading-5 text-gray-500"
+                >
+                  {{ item.date + " " + item.dateTime }}
+                </time>
+              </div>
+              <p class="text-sm leading-6 text-gray-500">
+                {{ item.comment }}
+              </p>
+
+              <details
+                v-if="showMore"
+                :open="itemIdx === 0"
+                class="h-6 p-2 mt-2 text-xs text-gray-500 transition-colors duration-100 ease-in-out select-none open:border open:border-gray-100 open:bg-gray-50 open:rounded-md group open:h-auto"
+              >
+                <summary
+                  class="flex flex-row items-center justify-start text-sm leading-5 text-gray-900 list-none cursor-pointer"
+                >
+                  <slot name="showMoreTitle" :data="item" :open="itemIdx === 0">
+                    {{ item.showmore?.title || "More Details" }}
+                    <PlusIcon
+                      class="ml-auto -mr-1 transition-all duration-300 opacity-75 fill-current size-4 group-open:hidden"
+                    />
+                    <MinusIcon
+                      class="hidden ml-auto -mr-1 transition-all duration-300 opacity-75 fill-current size-4 group-open:inline-block"
+                    />
+                  </slot>
+                </summary>
+                <slot name="showMoreContent" :data="item">
+                  <div>{{ item.showmore?.content }}</div>
+                </slot>
+              </details>
+            </div>
+          </slot>
+        </template>
+        <template v-else>
+          <div
+            class="relative flex items-center justify-center flex-none bg-white size-6"
+          >
+            <component
+              v-if="type === 'icon'"
+              :is="icon || CheckCircleIcon"
+              class="text-green-500 size-6"
+              aria-hidden="true"
+            />
+            <div
+              v-else
+              class="size-1.5 rounded-full bg-gray-100 ring-1 ring-gray-300 group-hover:bg-purple-200 group-hover:ring-purple-500"
+            />
+          </div>
+          <p class="flex-auto py-0.5 text-xs leading-5 text-gray-500">
+            <span class="font-medium text-gray-900">{{
+              item.person?.name
+            }}</span>
+            {{ item?.comment }}
+          </p>
+          <time
+            :datetime="item.dateTime"
+            class="flex-none py-0.5 text-xs leading-5 text-gray-500"
+            >{{ item.date + " " + item.dateTime }}</time
+          >
+        </template>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { PropType ,toRefs} from 'vue';
-import EUITimeLineItem from './EUITimeLineItem.vue';
+import { PropType, toRefs } from "vue";
+import { MinusIcon, PlusIcon } from "@heroicons/vue/24/outline";
+import { CheckCircleIcon } from "@heroicons/vue/24/solid";
+
 interface ITimeLine {
-  id: number | string,
-  person: any,
+  id: number | string;
+  person: any;
   comment?: string;
-  date?: string,
-  dateTime?: string,
-  showmore?: any
+  date?: string;
+  dateTime?: string;
+  showmore?: any;
 }
 
-
 const props = defineProps({
-  items:{
-    type:Array<ITimeLine>,
-    default:[]
+  items: {
+    type: Array<ITimeLine>,
+    default: [],
   },
   type: {
-    type:String as PropType<"view" | "icon" | "image">,
-    default:''
+    type: String as PropType<"view" | "icon" | "image">,
+    default: "",
+  },
+  icon: {
+    type: [String, Object],
+    default: "",
+  },
+  showMore: {
+    type: Boolean,
+    default: false,
   },
-  icon:{
-    type:[String , Object],
-    default:''
-  } ,
-  showMore:{
-    type:Boolean,
-    default:false
-  }
 });
 
-const  {items,type,icon,showMore} = toRefs(props)
+const { items, type, icon, showMore } = toRefs(props);
 </script>
-

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>

package/dist/button/EUIButtonGroup.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EUIButtonGroup.vue.d.ts","sourceRoot":"","sources":["../../src/components/button/EUIButtonGroup.vue"],"names":[],"mappings":"AACA,cAAc,6GAA6G,CAAC;AAC5H,OAAO,2HAA2H,CAAC;;AAEnI,wBAA0F"}

package/dist/timeLine/EUITimeLineItem.vue.d.ts

@@ -1,4 +0,0 @@
-import _sfc_main from "/Volumes/work/repos/edvoy-ui-v2/src/components/timeLine/EUITimeLineItem.vue?vue&type=script&setup=true&lang.ts";
-export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/timeLine/EUITimeLineItem.vue?vue&type=script&setup=true&lang.ts";
-export default _sfc_main;
-//# sourceMappingURL=EUITimeLineItem.vue.d.ts.map

package/dist/timeLine/EUITimeLineItem.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EUITimeLineItem.vue.d.ts","sourceRoot":"","sources":["../../src/components/timeLine/EUITimeLineItem.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,gHAAgH,CAAC;AACvI,cAAc,gHAAgH,CAAC;AAC/H,eAAe,SAAS,CAAC"}

package/src/components/timeLine/EUITimeLineItem.vue

@@ -1,135 +0,0 @@
-<template>
-  <li
-    v-for="(item, itemIdx) in data"
-    :key="`timeline_${itemIdx}`"
-    class="relative flex gap-x-4 group"
-  >
-    <div
-      :class="[
-        itemIdx === data.length - 1 ? 'h-6' : '-bottom-6',
-        'absolute left-0 top-0 flex w-6 justify-center',
-      ]"
-    >
-      <div
-        :class="[type === 'icon' ? 'w-0.5 bg-green-500' : 'w-px bg-gray-200']"
-      />
-    </div>
-    <template v-if="type === 'image'">
-      <slot name="image" :data="item" :dataIndex="itemIdx">
-        <img
-          :src="item.person?.imageUrl"
-          alt=""
-          class="relative flex-initial flex-shrink-0 rounded-full size-6 bg-gray-50"
-        />
-      </slot>
-      <slot name="details" :data="item" :dataIndex="itemIdx">
-        <div
-          class="flex-1 min-w-0 p-3 rounded-md ring-1 ring-inset ring-gray-200"
-        >
-          <div class="flex justify-between gap-x-4 mb-0.5">
-            <div class="text-xs leading-5 text-gray-500">
-              <span class="font-medium text-gray-900">{{
-                item.person?.name
-              }}</span>
-            </div>
-            <time
-              :datetime="item.dateTime"
-              class="flex-none text-xs leading-5 text-gray-500"
-            >
-              {{ item.date + " " + item.dateTime }}
-            </time>
-          </div>
-          <p class="text-sm leading-6 text-gray-500">
-            {{ item.comment }}
-          </p>
-
-          <details
-            v-if="showMore"
-            :open="itemIdx === 0"
-            class="h-6 p-2 mt-2 text-xs text-gray-500 transition-colors duration-100 ease-in-out select-none open:border open:border-gray-100 open:bg-gray-50 open:rounded-md group open:h-auto"
-          >
-            <summary
-              class="flex flex-row items-center justify-start text-sm leading-5 text-gray-900 list-none cursor-pointer"
-            >
-              <slot name="showMoreTitle" :data="item" :open="itemIdx === 0">
-                {{ item.showmore?.title || "More Details" }}
-                <PlusIcon
-                  class="ml-auto -mr-1 transition-all duration-300 opacity-75 fill-current size-4 group-open:hidden"
-                />
-                <MinusIcon
-                  class="hidden ml-auto -mr-1 transition-all duration-300 opacity-75 fill-current size-4 group-open:inline-block"
-                />
-              </slot>
-            </summary>
-            <slot name="showMoreContent" :data="item">
-              <div>{{ item.showmore?.content }}</div>
-            </slot>
-          </details>
-        </div>
-      </slot>
-    </template>
-    <template v-else>
-      <div
-        class="relative flex items-center justify-center flex-none bg-white size-6"
-      >
-        <component
-          v-if="type === 'icon'"
-          :is="icon || CheckCircleIcon"
-          class="text-green-500 size-6"
-          aria-hidden="true"
-        />
-        <div
-          v-else
-          class="size-1.5 rounded-full bg-gray-100 ring-1 ring-gray-300 group-hover:bg-purple-200 group-hover:ring-purple-500"
-        />
-      </div>
-      <p class="flex-auto py-0.5 text-xs leading-5 text-gray-500">
-        <span class="font-medium text-gray-900">{{ item.person?.name }}</span>
-        {{ item?.command }}
-      </p>
-      <time
-        :datetime="item.dateTime"
-        class="flex-none py-0.5 text-xs leading-5 text-gray-500"
-        >{{ item.date + " " + item.dateTime }}</time
-      >
-    </template>
-  </li>
-</template>
-
-<script setup lang="ts">
-import { PropType, toRefs } from "vue";
-import { MinusIcon, PlusIcon } from "@heroicons/vue/24/outline";
-import { CheckCircleIcon } from "@heroicons/vue/24/solid";
-
-interface ITimeLine {
-  id: number | string;
-  person: any;
-  comment?: string;
-  date?: string;
-  dateTime?: string;
-  showmore?: any;
-  command?: string;
-}
-
-const props = defineProps({
-  data: {
-    type: Array<ITimeLine>,
-    default: [],
-  },
-  type: {
-    type: String as PropType<"view" | "icon" | "image">,
-    default: "",
-  },
-  icon: {
-    type: [String, Object],
-    default: "",
-  },
-  showMore: {
-    type: Boolean,
-    default: false,
-  },
-});
-const { data, type, icon, showMore } = toRefs(props);
-</script>
-
-<style scoped></style>