edvoyui-component-library-test-flight 0.0.53 → 0.0.55

package/package.json

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

package/src/components/HelloWorld.vue

@@ -8,9 +8,28 @@
 <style lang="scss"></style>
 
 <!-- Development code here -->
-<!--  <template>
+<!-- <template>
   <div class="h-[clac(100svh-64px)] w-full px-10 py-8 max-w-screen-xl mx-auto">
     <h1 class="mb-2 font-semibold text-gray-900 tetx-lg">Edvoy UI Componnet</h1>
+
+    <EUIAccordion
+          :datas="accordionData"
+          :defaultOpen="[1]"
+          :collapse="true"
+          accordionStyle="separated"
+          @update:activeItem="handleActiveItem"
+        >
+          <template #title="{ item}">
+            <div>{{ item.title }}</div>
+          </template>
+          <template #right-icon="{item}">
+            <div :key="item" class="w-10 h-10 bg-red-100 border border-red-500 rounded-full" />
+          </template>
+          <template #content="{item}">
+            <div>{{ item.content }}</div>
+          </template>
+        </EUIAccordion>
+
     <Delete />
     <UTableview />
     <div class="">
@@ -1024,6 +1043,11 @@ const openModal = () => {
   customModal.value = false;
 };
 
+// accordion active Index
+const handleActiveItem = (activeItems:number) => {
+  console.log("Currently active accordion(s):", activeItems)
+}
+
 //TODO: Select Data
 const datas = ref([
   {

package/src/components/accordion/EUIAccordion.stories.ts

@@ -9,7 +9,7 @@ const meta: Meta<typeof EUIAccordion> = {
     datas: {
       control: "object",
       description:
-        "* The template method allows you to define how content is rendered in the <mark>EUIAccordion</mark> component. \n\n* Named slots <mark>(#title, #content)</mark> enable you to customize the display of titles and content for each accordion item.",
+        "* The template method allows you to define how content is rendered in the <mark>EUIAccordion</mark> component. \n\n* Named slots <mark>(#title, #content)</mark> enable you to customize the display of titles and content for each accordion item. \n\n* The <mark>item.className</mark> data to send additional CSS classes for styling the accordion item.",
     },
     defaultOpen: {
       control: { type: "object" },

package/src/components/accordion/EUIAccordion.vue

@@ -2,7 +2,9 @@
   <div>
     <div
       :class="[
-        accordionStyle === 'grouped' ? 'p-2 bg-gray-50 rounded-xl' : 'space-y-3',
+        accordionStyle === 'grouped'
+          ? 'p-2 bg-gray-50 rounded-xl'
+          : 'space-y-3',
         'max-w-full transition-all duration-100 ease-in-out',
       ]"
     >
@@ -15,20 +17,22 @@
           accordionStyle === 'grouped'
             ? 'rounded-lg hover:bg-gray-100 open:bg-gray-100 open:mb-4 open:last:mb-0'
             : 'bg-white px-8 py-4 rounded-2xl hover:ring-2 hover:ring-purple-500 open:ring-2 ring-purple-700 open:shadow-lg open:shadow-purple-100',
-          'box-border relative mx-auto my-0 text-base font-normal transition-colors duration-150 ease-in-out group', className
+          'box-border relative mx-auto my-0 text-base font-normal transition-colors duration-150 ease-in-out group',
+          className, item?.className,
         ]"
       >
         <summary
           :class="[
             accordionStyle === 'grouped'
               ? 'p-4'
-              : 'group-open:pb-4 justify-center gap-6 group-open:border-b group-open:border-gray-200',
-            'flex items-center font-semibold list-none cursor-pointer select-none focus:outline-none',
+              : 'group-open:pb-4 gap-6 group-open:border-b group-open:border-gray-200',
+            'flex items-center font-semibold list-none cursor-pointer select-none focus:outline-none max-w-full justify-between',
           ]"
+          :aria-expanded="openAccordions[index]"
         >
           <div
             :class="[
-              accordionStyle === 'grouped' ? 'w-11/12' : 'flex-initial w-10/12',
+              accordionStyle === 'grouped' ? 'w-11/12' : 'flex-initial w-[calc(75%-1.5rem)]',
               'text-gray-700 transition-all duration-200 ease-in-out faq-title group-hover:text-gray-900 group-open:text-gray-900',
             ]"
           >
@@ -52,10 +56,8 @@
             <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
             <path d="M9 6l6 6l-6 6"></path>
           </svg>
-          <div v-else class="flex-1 truncate">
-            <div class="flex items-end w-full text-start">
-              <slot name="right-icon" :item="item"></slot>
-            </div>
+          <div v-else class="flex-1 max-w-[25%] flex items-center justify-end">
+             <slot name="right-icon" :item="item"></slot>
           </div>
         </summary>
         <div
@@ -110,9 +112,9 @@ onMounted(() => {
   });
 });
 
+const emit = defineEmits(['update:activeItem']);
 const onClick = (index: number) => {
-  //   openAccordions.value = openAccordions.value.map((isOpen, i) => i === index ? !isOpen : isOpen);
-
+  // openAccordions.value = openAccordions.value.map((isOpen, i) => i === index ? !isOpen : isOpen);
   if (props.collapse) {
     openAccordions.value = openAccordions.value.map((_, i) => i === index);
   } else {
@@ -120,6 +122,10 @@ const onClick = (index: number) => {
       i === index ? !isOpen : isOpen
     );
   }
+
+  // Emit active index accessible from parent component
+  const activeItems = openAccordions.value.map((isOpen, i) => (isOpen ? i : null)).filter((i) => i !== null);
+  emit('update:activeItem', activeItems);
 };
 </script>