@weni/unnnic-system 3.2.5 → 3.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.2.5",
+  "version": "3.2.6",
   "type": "commonjs",
   "files": [
     "dist",

package/src/components/Dropdown/Dropdown.vue

@@ -38,6 +38,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    forceOpen: {
+      type: Boolean,
+      default: false,
+    },
     position: {
       type: String,
       default: 'bottom-left',
@@ -73,10 +77,12 @@ export default {
   },
   methods: {
     onClickTrigger() {
+      if (this.forceOpen) return;
       if (this.useOpenProp) this.$emit('update:open', !this.open);
       else this.active = !this.active;
     },
     onClickOutside() {
+      if (this.forceOpen) return;
       if (this.useOpenProp && this.open) {
         this.$emit('update:open', false);
         return;

package/src/components/Dropdown/__tests__/Dropdown.spec.js

@@ -95,4 +95,61 @@ describe('Dropdown.vue', () => {
       expect(wrapper.vm.active).toBe(false);
     });
   });
+
+  describe('ForceOpen Functionality', () => {
+    it('should not toggle dropdown on trigger click when forceOpen is true', async () => {
+      await wrapper.setProps({ forceOpen: true, open: false });
+      const initialActiveState = wrapper.vm.active;
+      
+      const trigger = wrapper.find('[data-testid="dropdown-trigger"]');
+      await trigger.trigger('click');
+      
+      expect(wrapper.vm.active).toBe(initialActiveState);
+      expect(wrapper.emitted('update:open')).toBeFalsy();
+    });
+
+    it('should not close dropdown on outside click when forceOpen is true', async () => {
+      await wrapper.setProps({ forceOpen: true, open: true });
+      expect(wrapper.vm.active).toBe(true);
+
+      await wrapper.vm.onClickOutside();
+      
+      expect(wrapper.vm.active).toBe(true);
+    });
+
+    it('should not emit update:open when forceOpen is true and useOpenProp is true', async () => {
+      await wrapper.setProps({ 
+        forceOpen: true, 
+        useOpenProp: true, 
+        open: false 
+      });
+      
+      const trigger = wrapper.find('[data-testid="dropdown-trigger"]');
+      await trigger.trigger('click');
+      
+      expect(wrapper.emitted('update:open')).toBeFalsy();
+    });
+
+    it('should not close dropdown via onClickOutside when forceOpen is true and useOpenProp is true', async () => {
+      await wrapper.setProps({ 
+        forceOpen: true, 
+        useOpenProp: true, 
+        open: true 
+      });
+      
+      await wrapper.vm.onClickOutside();
+      
+      expect(wrapper.emitted('update:open')).toBeFalsy();
+    });
+
+    it('should allow normal behavior when forceOpen is false', async () => {
+      await wrapper.setProps({ forceOpen: false, open: false });
+      
+      const trigger = wrapper.find('[data-testid="dropdown-trigger"]');
+      await trigger.trigger('click');
+      
+      expect(wrapper.vm.active).toBe(true);
+      expect(wrapper.emitted('update:open')).toBeTruthy();
+    });
+  });
 });

package/src/components/SelectSmart/SelectSmart.vue

@@ -214,7 +214,7 @@ export default {
     },
   },
 
-  emits: ['update:searchValue', 'onChange', 'update:modelValue'],
+  emits: ['update:searchValue', 'onChange', 'update:modelValue', 'onActiveChange'],
 
   data() {
     return {
@@ -303,6 +303,8 @@ export default {
     active(newValue) {
       this.$refs['dropdown-skeleton'].calculatePosition();
 
+      this.$emit('onActiveChange', newValue);
+
       this.$nextTick(() => {
         if (newValue && !this.multiple) {
           const activeOptionIndex = this.getOptionIndex('active');

package/src/components/SelectSmart/__tests__/SelectSmart.spec.js

@@ -238,6 +238,51 @@ describe('SelectSmart.vue', () => {
     });
   });
 
+  describe('onActiveChange Event', () => {
+    it('should emit onActiveChange when dropdown opens', async () => {
+      await input().trigger('click');
+
+      expect(wrapper.emitted('onActiveChange')).toBeTruthy();
+      expect(wrapper.emitted('onActiveChange')[0][0]).toBe(true);
+    });
+
+    it('should emit onActiveChange when dropdown closes', async () => {
+      wrapper.vm.active = true;
+      await nextTick();
+
+      wrapper.vm.active = false;
+      await nextTick();
+
+      expect(wrapper.emitted('onActiveChange')).toBeTruthy();
+      expect(wrapper.emitted('onActiveChange')[1][0]).toBe(false);
+    });
+
+    it('should emit onActiveChange when toggling dropdown visibility', async () => {
+      // Open dropdown
+      await input().trigger('click');
+      
+      // Close dropdown
+      await input().trigger('click');
+
+      const emittedEvents = wrapper.emitted('onActiveChange');
+      expect(emittedEvents).toBeTruthy();
+      expect(emittedEvents.length).toBe(2);
+      expect(emittedEvents[0][0]).toBe(true);  // opened
+      expect(emittedEvents[1][0]).toBe(false); // closed
+    });
+
+    it('should emit onActiveChange when closing dropdown with escape key', async () => {
+      await input().trigger('click');
+      expect(wrapper.emitted('onActiveChange')[0][0]).toBe(true);
+
+      await selectSmart().trigger('keydown', { key: 'Escape' });
+
+      const emittedEvents = wrapper.emitted('onActiveChange');
+      expect(emittedEvents.length).toBe(2);
+      expect(emittedEvents[1][0]).toBe(false);
+    });
+  });
+
   describe('Secondary Type', () => {
     beforeEach(() => {
       mountWrapper({