update object overlay component

Author: cviterirei

src/components/objectOverlay/CdrObjectOverlay.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useCssModule, computed } from 'vue';
+import { useCssModule, computed, ref, onMounted, nextTick } from 'vue';
 import type { ObjectOverlayProps } from '../../types/interfaces';
 
 /** Component for positioning content in 9 different positions relative to a container */
@@ -10,9 +10,31 @@ const props = withDefaults(defineProps<ObjectOverlayProps>(), {
   position: 'center-center',
   margin: 'zero',
   tag: 'div',
+  gradientTheme: 'dark'
 });
 
-// Helper function to process component properties (position, gradient)
+// Refs for DOM elements
+const containerRef = ref<HTMLElement | null>(null);
+const overlayRef = ref<HTMLElement | null>(null);
+
+// Helper function to determine gradient direction based on position
+const getGradientDirection = (position: string): string | null => {
+  if (position === 'center-center') return null;
+  
+  if (['left-top', 'center-top', 'right-top'].includes(position)) {
+    return 'to-bottom';
+  } else if (position === 'left-center') {
+    return 'to-right';
+  } else if (position === 'right-center') {
+    return 'to-left';
+  } else if (['left-bottom', 'center-bottom', 'right-bottom'].includes(position)) {
+    return 'to-top';
+  }
+  
+  return null;
+};
+
+// Helper function to process component properties (position, withGradient)
 const processComponentProperty = (property: string, prop: any): Record<string, string> => {
   const result: Record<string, string> = {};
   
@@ -71,13 +93,38 @@ const attrs = computed(() => {
   const component: Record<string, string> = {};
   const content: Record<string, any> = { style: {} };
 
-  // Process component properties
-  ['position', 'gradient'].forEach((property) => {
-    const prop = props[property as keyof typeof props];
-    if (prop) {
-      Object.assign(component, processComponentProperty(property, prop));
+  // Process position property
+  if (props.position) {
+    Object.assign(component, processComponentProperty('position', props.position));
+  }
+  
+  // Process gradient based on position if withGradient is true
+  if (props.withGradient) {
+    // Set gradient theme
+    if (props.gradientTheme) {
+      component['data-gradient-theme'] = props.gradientTheme;
     }
-  });
+    
+    // For responsive positions, we need to determine gradient for each breakpoint
+    if (typeof props.position === 'object') {
+      Object.entries(props.position).forEach(([mq, pos]) => {
+        const direction = getGradientDirection(pos as string);
+        if (direction) {
+          if (mq === 'xs') {
+            component['data-gradient'] = direction;
+          } else {
+            component[`data-gradient-${mq}`] = direction;
+          }
+        }
+      });
+    } else {
+      // For single position value
+      const direction = getGradientDirection(props.position as string);
+      if (direction) {
+        component['data-gradient'] = direction;
+      }
+    }
+  }
 
   // Process content properties
   ['margin', 'padding'].forEach((property) => {
@@ -97,6 +144,59 @@ const attrs = computed(() => {
   };
 });
 
+// Function to inherit border radius from container
+const inheritBorderRadius = () => {
+  if (!containerRef.value || !overlayRef.value) return;
+  
+  // Get the first child of the container (the actual content element)
+  const containerContent = containerRef.value.firstElementChild as HTMLElement;
+  if (!containerContent) return;
+  
+  requestAnimationFrame(() => {
+    // Get computed style of the container content
+    const computedStyle = window.getComputedStyle(containerContent);
+    const borderRadius = computedStyle.borderRadius;
+
+    if (!overlayRef.value) return;
+    
+    // Apply the same border radius to the overlay component
+    if (borderRadius && borderRadius !== '0px') {
+      overlayRef.value.style.borderRadius = borderRadius;
+    } else {
+      // Try to get border-radius from individual properties if the shorthand is not set
+      const topLeft = computedStyle.borderTopLeftRadius;
+      const topRight = computedStyle.borderTopRightRadius;
+      const bottomLeft = computedStyle.borderBottomLeftRadius;
+      const bottomRight = computedStyle.borderBottomRightRadius;
+      
+      if (
+        topLeft !== '0px' || topRight !== '0px' || bottomLeft !== '0px' || bottomRight !== '0px'
+      ) {
+        overlayRef.value.style.borderTopLeftRadius = topLeft;
+        overlayRef.value.style.borderTopRightRadius = topRight;
+        overlayRef.value.style.borderBottomLeftRadius = bottomLeft;
+        overlayRef.value.style.borderBottomRightRadius = bottomRight;
+      }
+    }
+  }); // Small delay to ensure styles are applied
+};
+
+// Apply border radius after component is mounted and when it updates
+onMounted(() => {
+  nextTick(inheritBorderRadius);
+  
+  // Set up MutationObserver to detect when children are added/changed
+  if (containerRef.value) {
+    const observer = new MutationObserver(inheritBorderRadius);
+    observer.observe(containerRef.value, { 
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['style', 'class']
+    });
+  }
+});
+
 const styles = useCssModule();
 </script>
 
@@ -105,8 +205,12 @@ const styles = useCssModule();
     :is="tag"
     :class="styles['cdr-object-overlay']"
     v-bind="attrs.component"
+    ref="overlayRef"
   >
-    <div :class="styles['cdr-object-overlay__container']">
+    <div
+      :class="styles['cdr-object-overlay__container']"
+      ref="containerRef"
+    >
       <!-- @slot Container content that the overlay will be positioned relative to -->
       <slot name="container" />
     </div>

src/components/objectOverlay/__tests__/CdrObjectOverlay.spec.js

@@ -98,18 +98,6 @@ describe('CdrObjectOverlay.vue', () => {
       wrapper.unmount();
     });
 
-    it('applies gradient through data attribute', () => {
-      const wrapper = mount(CdrObjectOverlay, {
-        props: { gradient: 'to-top' },
-        slots: {
-          container: '<div>Container</div>',
-          content: '<div>Content</div>',
-        },
-      });
-      expect(wrapper.attributes('data-gradient')).toBe('to-top');
-      wrapper.unmount();
-    });
-
     it('handles responsive position values', () => {
       const wrapper = mount(CdrObjectOverlay, {
         props: { 
@@ -158,5 +146,84 @@ describe('CdrObjectOverlay.vue', () => {
       expect(wrapper.element.tagName).toBe('SECTION');
       wrapper.unmount();
     });
+
+    // New tests for gradientTheme
+    it('applies dark gradient theme by default when withGradient is true', () => {
+      const wrapper = mount(CdrObjectOverlay, {
+        props: { 
+          withGradient: true,
+          position: 'left-top'
+        },
+        slots: {
+          container: '<div>Container</div>',
+          content: '<div>Content</div>',
+        },
+      });
+      expect(wrapper.attributes('data-gradient')).toBe('to-bottom');
+      expect(wrapper.attributes('data-gradient-theme')).toBe('dark');
+      wrapper.unmount();
+    });
+
+    it('applies light gradient theme when specified', () => {
+      const wrapper = mount(CdrObjectOverlay, {
+        props: { 
+          withGradient: true,
+          gradientTheme: 'light',
+          position: 'left-top'
+        },
+        slots: {
+          container: '<div>Container</div>',
+          content: '<div>Content</div>',
+        },
+      });
+      expect(wrapper.attributes('data-gradient')).toBe('to-bottom');
+      expect(wrapper.attributes('data-gradient-theme')).toBe('light');
+      wrapper.unmount();
+    });
+
+    it('applies correct gradient direction based on position with light theme', () => {
+      const positionsAndDirections = [
+        { position: 'left-top', direction: 'to-bottom' },
+        { position: 'center-top', direction: 'to-bottom' },
+        { position: 'right-top', direction: 'to-bottom' },
+        { position: 'left-center', direction: 'to-right' },
+        { position: 'right-center', direction: 'to-left' },
+        { position: 'left-bottom', direction: 'to-top' },
+        { position: 'center-bottom', direction: 'to-top' },
+        { position: 'right-bottom', direction: 'to-top' },
+      ];
+
+      positionsAndDirections.forEach(({ position, direction }) => {
+        const wrapper = mount(CdrObjectOverlay, {
+          props: { 
+            withGradient: true,
+            gradientTheme: 'light',
+            position
+          },
+          slots: {
+            container: '<div>Container</div>',
+            content: '<div>Content</div>',
+          },
+        });
+        expect(wrapper.attributes('data-gradient')).toBe(direction);
+        expect(wrapper.attributes('data-gradient-theme')).toBe('light');
+        wrapper.unmount();
+      });
+    });
+
+    it('does not apply gradient when position is center-center', () => {
+      const wrapper = mount(CdrObjectOverlay, {
+        props: { 
+          withGradient: true,
+          position: 'center-center'
+        },
+        slots: {
+          container: '<div>Container</div>',
+          content: '<div>Content</div>',
+        },
+      });
+      expect(wrapper.attributes('data-gradient')).toBeUndefined();
+      wrapper.unmount();
+    });
   });
 });