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

package/package.json

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

package/src/components/HelloWorld.vue

@@ -8,9 +8,18 @@
 <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"
+        />
+
     <Delete />
     <UTableview />
     <div class="">
@@ -1024,6 +1033,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,7 +17,8 @@
           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
@@ -25,6 +28,7 @@
               : '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',
           ]"
+          :aria-expanded="openAccordions[index]"
         >
           <div
             :class="[
@@ -110,9 +114,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 +124,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>