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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "edvoyui-component-library-test-flight",
   "private": false,
-  "version": "0.0.152",
+  "version": "0.0.153",
   "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/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"}