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

package/dist/toggle/EUIToggle.vue.d.ts

@@ -1,5 +1,5 @@
 export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/toggle/EUIToggle.vue?vue&type=script&setup=true&lang.ts";
-import "/Volumes/work/repos/edvoy-ui-v2/src/components/toggle/EUIToggle.vue?vue&type=style&index=0&scoped=a0b1f818&lang.scss";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/toggle/EUIToggle.vue?vue&type=style&index=0&scoped=f3426066&lang.scss";
 declare const _default: any;
 export default _default;
 //# sourceMappingURL=EUIToggle.vue.d.ts.map

package/package.json

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

package/src/components/button/EUIButtonGroup.vue

@@ -1,14 +1,18 @@
 <template>
   <div>
     <div
-    class="inline-flex items-center gap-2 px-2 py-2 overflow-hidden transition-all duration-200 ease-in bg-white shadow-xl w-max shadow-purple-50"
-    :class="[rounded ? 'rounded-full' : 'rounded-lg']"
-    v-bind="$attrs"
+      class="inline-flex items-center gap-2 px-2 py-2 overflow-hidden transition-all duration-200 ease-in bg-white shadow-xl w-max shadow-purple-50"
+      :class="[rounded ? 'rounded-full' : 'rounded-lg']"
+      v-bind="$attrs"
     >
       <slot name="before" />
-      <nav class="relative z-0 inline-flex flex-row items-center gap-2">
+      <nav
+        ref="navContainer"
+        class="relative z-0 inline-flex flex-row items-center gap-2"
+      >
         <div
-          id="nav-indicator"
+          ref="navIndicator"
+          class="absolute left-0 top-0 h-full w-auto -z-[1] transition-all duration-350 ease-[cubic-bezier(0.15,0.3,0.25,1)]"
           :class="[
             getBtnClass(activeBtnName),
             rounded ? 'rounded-full' : 'rounded-lg',
@@ -17,7 +21,7 @@
         <button
           v-for="(data, index) in items"
           :key="`data-${index}`"
-           v-bind="buttonAttrs"
+          v-bind="buttonAttrs"
           :type="type"
           :size="size"
           :iconType="iconType"
@@ -99,8 +103,8 @@ const props = defineProps({
     default: () => [],
   },
   defaultActive: {
-    type:String,
-    default: '',
+    type: String,
+    default: "",
   },
   type: {
     type: String as PropType<"button" | "submit" | "reset">,
@@ -139,9 +143,9 @@ const props = defineProps({
 });
 
 defineOptions({
-  inheritAttrs: false, // 🛑 prevents auto-inheritance of $attrs to root
-})
-const attrs = useAttrs()
+  inheritAttrs: false,
+});
+const attrs = useAttrs();
 const buttonAttrs = computed(() => {
   const { class: _class, style: _style, id: _id, ...rest } = attrs;
   return rest;
@@ -151,45 +155,51 @@ const emit = defineEmits<{
   (event: "update:activeButton", activeButton: Item): void;
 }>();
 
+const navIndicator = ref<HTMLElement | null>(null);
+const navContainer = ref<HTMLElement | null>(null);
+
 const { items, defaultActive } = toRefs(props);
 const activeBtnName = ref(defaultActive.value || items.value[0]?.name || "");
 
 const marker = (el: HTMLElement) => {
-  const indicator = document.querySelector("#nav-indicator") as HTMLElement;
+  const indicator = navIndicator.value;
   if (indicator && el) {
     indicator.style.left = el.offsetLeft + "px";
     indicator.style.width = el.offsetWidth + "px";
   }
 };
 
+const updateMarkerPosition = () => {
+  const activeBtn = navContainer.value?.querySelector(
+    `button[data-name="${activeBtnName.value}"]`
+  );
+  if (activeBtn) {
+    marker(activeBtn as HTMLElement);
+  }
+};
+
 const handleOnChange = (val: any) => {
   activeBtnName.value = val?.name;
   emit("update:activeButton", val);
   nextTick(() => {
-    const activeBtn = document.querySelector(
-      `nav button[data-name="${activeBtnName.value}"]`
-    );
-    if (activeBtn) marker(activeBtn as HTMLElement);
+    updateMarkerPosition();
   });
 };
 
 onMounted(() => {
   nextTick(() => {
     requestAnimationFrame(() => {
-      const activeBtn = document.querySelector(
-        `nav button[data-name="${activeBtnName.value}"]`
-      );
-      if (activeBtn) marker(activeBtn as HTMLElement);
+      updateMarkerPosition();
     });
   });
 });
 
 // Computed classes for button size
 const sizeClasses = reactive({
-  xs: "text-xs font-medium leading-[normal]", // 24
-  sm: "text-sm font-medium", // 32
-  md: "text-base font-semibold", // 40
-  lg: "text-base font-semibold", // 48
+  xs: "text-xs font-medium leading-[normal]", //24
+  sm: "text-sm font-medium", //32
+  md: "text-base font-semibold", //40
+  lg: "text-base font-semibold", //48
 });
 
 const btnColors = {
@@ -261,11 +271,6 @@ const getBtnClass = (btnName: string) => {
 </script>
 
 <style lang="scss" scoped>
-#nav-indicator {
-  transition: all 350ms cubic-bezier(0.15, 0.3, 0.25, 1);
-  @apply absolute left-0 w-auto h-full top-0 -z-[1];
-}
-
 .bar-indicator {
   @apply relative;
   &::before {

package/src/components/timeLine/EUITimeLineItem.vue

@@ -1,7 +1,7 @@
 <template>
   <li
     v-for="(item, itemIdx) in data"
-    :key="item.id"
+    :key="`timeline_${itemIdx}`"
     class="relative flex gap-x-4 group"
   >
     <div
@@ -15,56 +15,67 @@
       />
     </div>
     <template v-if="type === 'image'">
-      <img
-        :src="item.person?.imageUrl"
-        alt=""
-        class="relative size-6 flex-none rounded-full bg-gray-50"
-      />
-      <div class="flex-auto rounded-md p-3 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>
+      <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>
-          <time
-            :datetime="item.dateTime"
-            class="flex-none text-xs leading-5 text-gray-500"
+          <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"
           >
-            {{ item.date + " " + item.dateTime }}
-          </time>
+            <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>
-        <p class="text-sm leading-6 text-gray-500">
-          {{ item.comment }}
-        </p>
-        <details
-          v-if="showMore"
-          :open="itemIdx === 0"
-          class="text-gray-500 text-xs select-none open:border open:border-gray-100 open:bg-gray-50 open:rounded-md transition-colors duration-100 ease-in-out mt-2 p-2 group h-6 open:h-auto"
-        >
-          <summary
-            class="text-sm leading-5 text-gray-900 list-none flex items-center justify-start flex-row cursor-pointer"
-          >
-            {{ item.showmore?.title || "More Details" }}
-            <PlusIcon
-              class="fill-current opacity-75 size-4 -mr-1 transition-all duration-300 ml-auto group-open:hidden"
-            />
-            <MinusIcon
-              class="fill-current opacity-75 size-4 -mr-1 transition-all duration-300 ml-auto hidden group-open:inline-block"
-            />
-          </summary>
-          <div>{{ item.showmore?.content }}</div>
-        </details>
-      </div>
+      </slot>
     </template>
     <template v-else>
       <div
-        class="relative flex size-6 flex-none items-center justify-center bg-white"
+        class="relative flex items-center justify-center flex-none bg-white size-6"
       >
         <component
           v-if="type === 'icon'"
           :is="icon || CheckCircleIcon"
-          class="size-6 text-green-500"
+          class="text-green-500 size-6"
           aria-hidden="true"
         />
         <div
@@ -97,7 +108,7 @@ interface ITimeLine {
   date?: string;
   dateTime?: string;
   showmore?: any;
-  command?:string
+  command?: string;
 }
 
 const props = defineProps({
@@ -118,7 +129,7 @@ const props = defineProps({
     default: false,
   },
 });
-const  {data,type,icon,showMore} = toRefs(props)
+const { data, type, icon, showMore } = toRefs(props);
 </script>
 
 <style scoped></style>

package/src/components/toggle/EUIToggle.vue

@@ -17,7 +17,9 @@
             {{ label }}
         </span>
     </label>
-    <EUIErrorMessage :errors="errors" :name="name" />
+    <template v-if="errors && errors.length">
+      <EUIErrorMessage :errors="errors" :name="name" />
+    </template>
   </div>
 </template>
 

package/dist/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"}