srcdev-nuxt-components 2.1.9 → 2.1.11

package/components/display-details/DisplayDetailsCore.vue

@@ -5,7 +5,7 @@
         <slot name="summary"></slot>
       </span>
       <slot name="summaryIcon">
-        <Icon name="bi:caret-down-fill" class="icon mi-12" :class="iconsSize" />
+        <Icon name="bi:caret-down-fill" class="icon mi-12" :class="iconSize" />
       </slot>
     </summary>
     <div class="display-details-content" :aria-labelledby="triggerId" :id="contentId" role="region" ref="contentRef">
@@ -15,7 +15,10 @@
 </template>
 
 <script lang="ts">
-export const useDetailsTransition = (detailsRef: Ref<HTMLDetailsElement | null>, summaryRef: Ref<HTMLElement | null>, contentRef: Ref<HTMLDivElement | null>) => {
+// Create a global store to track open details elements by name
+const openDetailsByName = reactive(new Map<string, HTMLDetailsElement>());
+
+export const useDetailsTransition = (detailsRef: Ref<HTMLDetailsElement | null>, summaryRef: Ref<HTMLElement | null>, contentRef: Ref<HTMLDivElement | null>, name: string) => {
   // State
   const animation = ref<Animation | null>(null);
   const animationDuration = 400;
@@ -24,12 +27,42 @@ export const useDetailsTransition = (detailsRef: Ref<HTMLDetailsElement | null>,
 
   // Check if refs are available
   if (!detailsRef.value || !summaryRef.value || !contentRef.value) {
-    console.warn('Details or content ref is null');
+    console.warn('Details, summary, or content ref is null');
     return {
       clickAction: () => console.warn('Component not fully initialized'),
     };
   }
 
+  const closeOtherDetailsWithSameName = () => {
+    const currentDetails = detailsRef.value;
+    if (!currentDetails || !name) return;
+
+    // Get the currently open details with the same name
+    const openDetails = openDetailsByName.get(name);
+
+    // If there's an open details with the same name and it's not the current one, close it
+    if (openDetails && openDetails !== currentDetails && openDetails.open) {
+      // Simulate a click on the other details to close it with animation
+      const otherSummary = openDetails.querySelector('summary');
+      if (otherSummary) {
+        otherSummary.click();
+      } else {
+        // Fallback: close directly without animation
+        openDetails.open = false;
+      }
+    }
+
+    // Update the map with the current details if it's open
+    if (currentDetails.open) {
+      openDetailsByName.set(name, currentDetails);
+    } else {
+      // If it's closed and was the one in the map, remove it
+      if (openDetailsByName.get(name) === currentDetails) {
+        openDetailsByName.delete(name);
+      }
+    }
+  };
+
   const clickAction = () => {
     const details = detailsRef.value;
     const summary = summaryRef.value;
@@ -41,13 +74,15 @@ export const useDetailsTransition = (detailsRef: Ref<HTMLDetailsElement | null>,
     details.style.overflow = 'hidden';
 
     if (isClosing.value || !details.open) {
+      // Close other details with the same name first
+      closeOtherDetailsWithSameName();
+
       // Open the details
       details.open = true;
       isExpanding.value = true;
       isClosing.value = false;
 
       // Get the height of the content
-
       const detailsHeight = details.offsetHeight;
       const contentHeight = content.offsetHeight;
       const summaryHeight = summary.offsetHeight;
@@ -77,6 +112,9 @@ export const useDetailsTransition = (detailsRef: Ref<HTMLDetailsElement | null>,
         details.style.overflow = '';
         isExpanding.value = false;
         animation.value = null;
+
+        // Register this as the open details for this name
+        openDetailsByName.set(name, details);
       };
 
       animation.value.oncancel = () => {
@@ -114,6 +152,11 @@ export const useDetailsTransition = (detailsRef: Ref<HTMLDetailsElement | null>,
         details.style.overflow = '';
         isClosing.value = false;
         animation.value = null;
+
+        // Remove this from the open details map if it's there
+        if (openDetailsByName.get(name) === details) {
+          openDetailsByName.delete(name);
+        }
       };
 
       animation.value.oncancel = () => {
@@ -182,7 +225,7 @@ watch(
 onMounted(() => {
   // Initialize the composable once the component is mounted and refs are available
   if (detailsRef.value && contentRef.value && summaryRef.value) {
-    const details = useDetailsTransition(detailsRef, summaryRef, contentRef);
+    const details = useDetailsTransition(detailsRef, summaryRef, contentRef, props.name);
     clickAction = details.clickAction; // Assign the real click handler
   } else {
     console.error('Refs not available after mounting');
@@ -191,70 +234,72 @@ onMounted(() => {
 </script>
 
 <style lang="css">
-.display-details {
-  /* Component setup */
-  --_display-details-icon-transform: scaleY(1);
-  --_display-details-icon-size: 1.2rem;
-
-  /* Configurable properties */
-  --_display-details-border: none;
-  --_display-details-outline: none;
-  --_display-details-box-shadow: none;
-  --_display-details-border-radius: 0;
-  --_display-details-mbe: 1em;
+@scope (.display-details) {
+  .display-details {
+    /* Component setup */
+    --_display-details-icon-transform: scaleY(1);
+    --_display-details-icon-size: 1.2rem;
+
+    /* Configurable properties */
+    --_display-details-border: none;
+    --_display-details-outline: none;
+    --_display-details-box-shadow: none;
+    --_display-details-border-radius: 0;
+    --_display-details-mbe: 1em;
+
+    --_display-details-summary-gap: 12px;
+    --_display-details-summary-flex-direction: row;
+
+    --_display-details-content-padding: 0;
+
+    &.medium {
+      --_display-details-icon-size: 1.8rem;
+    }
+    &.large {
+      --_display-details-icon-size: 2.4rem;
+    }
 
-  --_display-details-summary-gap: 12px;
-  --_display-details-summary-flex-direction: row;
+    &[open] {
+      --_display-details-icon-transform: scaleY(-1);
+    }
 
-  --_display-details-content-padding: 0;
+    border: var(--_display-details-border);
+    outline: var(--_display-details-outline);
+    box-shadow: var(--_display-details-box-shadow);
+    border-radius: var(--_display-details-border-radius);
+    margin-block-end: var(--_display-details-mbe);
 
-  &.medium {
-    --_display-details-icon-size: 1.8rem;
-  }
-  &.large {
-    --_display-details-icon-size: 2.4rem;
-  }
-
-  &[open] {
-    --_display-details-icon-transform: scaleY(-1);
-  }
+    .display-details-summary {
+      list-style: none;
 
-  border: var(--_display-details-border);
-  outline: var(--_display-details-outline);
-  box-shadow: var(--_display-details-box-shadow);
-  border-radius: var(--_display-details-border-radius);
-  margin-block-end: var(--_display-details-mbe);
+      &::-webkit-details-marker,
+      &::marker {
+        display: none;
+      }
 
-  .display-details-summary {
-    list-style: none;
+      display: flex !important;
+      flex-direction: var(--_display-details-summary-flex-direction);
+      align-items: center;
+      gap: var(--_display-details-summary-gap);
+      overflow: clip;
 
-    &::-webkit-details-marker,
-    &::marker {
-      display: none;
-    }
+      .label {
+        display: block;
+        flex-grow: 1;
+      }
 
-    display: flex !important;
-    flex-direction: var(--_display-details-summary-flex-direction);
-    align-items: center;
-    gap: var(--_display-details-summary-gap);
-    overflow: clip;
+      .icon {
+        display: block;
 
-    .label {
-      display: block;
-      flex-grow: 1;
+        font-size: var(--_display-details-icon-size);
+        transform: var(--_display-details-icon-transform);
+        transition: transform 200ms;
+      }
     }
 
-    .icon {
-      display: block;
-
-      font-size: var(--_display-details-icon-size);
-      transform: var(--_display-details-icon-transform);
-      transition: transform 200ms;
+    .display-details-content {
+      padding: var(--_display-details-content-padding);
     }
   }
-
-  .display-details-content {
-    padding: var(--_display-details-content-padding);
-  }
 }
 </style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "2.1.9",
+  "version": "2.1.11",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",