feat(dropdown): Add toggle button and remove force open in editor option (WW-3773)

AI.md

@@ -1,55 +1,44 @@
 ---
 name: ww-dropdown
-description: The `ww-dropdown` component provides a customizable dropdown menu that can be triggered by click, hover, or right-click, with configurable positions, alignments, and optional animations, allowing for flexible integration into web applications.
-keywords:
-  - triggertype
-  - position
-  - alignment
-  - offsetx
-  - offsety
-  - dropdownzindex
-  - disabled
-  - animated
-  - forcedisplayeditor
-  - closedropdown
-  - ww-layout
+description: A customizable dropdown menu component with configurable trigger types, positions, and alignments.
+keywords: [dropdown, menu, trigger, position, alignment, animation]
 ---
 
 #### ww-dropdown
 
-Component Purpose: Renders a dropdown menu triggered by click, hover, or right-click with configurable positions and alignments.
+***Purpose:***
+Renders a dropdown menu that can be triggered by click, hover, or right-click, with configurable positions and alignments. The component supports animations and can be programmatically controlled.
 
-Properties:
-- triggerType: 'click' | 'hover' | 'right-click' - Trigger type for opening. Default: "click"
-- position: 'top' | 'right' | 'bottom' | 'left' - Position relative to trigger. Default: "bottom"
-- alignment: 'start' | 'center' | 'end' - Alignment along position axis. Default: "start"
-- offsetX: string - Horizontal offset in px or %. Default: undefined
-- offsetY: string - Vertical offset in px or %. Default: undefined
-- dropdownZIndex: number - Z-index of dropdown (0-100). Default: undefined
-- disabled: boolean - Disables dropdown. Default: undefined
-- animated: boolean - Enables animations. Default: undefined
-- forceDisplayEditor: boolean - Forces display in editor. Default: undefined
-- triggerLayout: Array - Hidden property for trigger element layout. Default: []
-- dropdownLayout: Array - Hidden property for dropdown content layout. Default: []
+***Properties:***
+- triggerType: 'click'|'hover'|'right-click' - Type of interaction that opens the dropdown. Default: "click"
+- position: 'top'|'right'|'bottom'|'left' - Position of dropdown relative to trigger. Default: "bottom"
+- alignment: 'start'|'center'|'end' - Alignment along position axis. Default: "start"
+- offsetX: string - Horizontal offset in px or %. Example: "10px" or "50%"
+- offsetY: string - Vertical offset in px or %. Example: "8px" or "20%"
+- dropdownZIndex: number - Z-index of dropdown (0-100). Supports states and classes
+- disabled: boolean - Disables the dropdown functionality
+- animated: boolean - Enables animations for dropdown transitions
+- forceDisplayEditor: boolean - Forces display in editor mode
 
-Properties Details:
+***Slots:***
+- triggerLayout: (array of elements) - The element that triggers the dropdown. Example: ww-button
+- dropdownLayout: (array of elements) - The content displayed in the dropdown. Example: ww-div with menu items
+
+***Element Actions:***
+- closeDropdown: (no args) Programmatically closes the dropdown
+
+***Notes:***
 - offsetX and offsetY support binding with string values (px or %)
-- dropdownZIndex is responsive, supports states and classes, and can be bound to a number
+- dropdownZIndex is responsive and supports states and classes
 - alignment changes icon options based on position (horizontal/vertical alignment icons)
 - disabled and animated properties can be bound to boolean values
 
-Actions:
-- closeDropdown: Programmatically closes the dropdown
-
-Example:
-
-{"uid":"dropdown-element","tag":"ww-dropdown","props":{"default":{"offsetY":"8px","position":"bottom","alignment":"start","triggerType":"click","forceDisplayEditor":true}},"children":{"triggerLayout":[{"uid":"dropdown-trigger-layout"}],"dropdownLayout":[{"uid":"dropdown-layout"}]}}
-{"uid":"dropdown-trigger-layout","tag":"ww-button","props":{"default":{"disabled":false,"text":{"en":"<div>Click me</div>"}}},"styles":{"default":{"height":"38px","padding":"8px 16px","backgroundColor":"#000000","color":"#FFFFFF"}}}
-{"uid":"dropdown-layout","tag":"ww-div","styles":{"default":{"width":"220px","padding":"8px","borderRadius":"12px"}},"children":{"children":[{"uid":"dropdown-layout-children"}]}}
-{"uid":"dropdown-layout-children","tag":"ww-div","children":{"children":[{"uid":"layout-children-icon"},{"uid":"layout-children-text"}]}}
+***Example:***
+<elements>
+{"uid":"dropdown-element","tag":"ww-dropdown","props":{"default":{"offsetY":"8px","position":"bottom","alignment":"start","triggerType":"click","forceDisplayEditor":true}},"slots":{"triggerLayout":[{"uid":"dropdown-trigger-layout"}],"dropdownLayout":[{"uid":"dropdown-layout"}]}}
+{"uid":"dropdown-trigger-layout","tag":"ww-button","props":{"default":{"disabled":false,"text":{"en":"Click me"}}},"styles":{"default":{"height":"38px","padding":"8px 16px","backgroundColor":"#000000","color":"#FFFFFF"}}}
+{"uid":"dropdown-layout","tag":"ww-div","styles":{"default":{"width":"220px","padding":"8px","borderRadius":"12px"}},"slots":{"children":[{"uid":"dropdown-layout-children"}]}}
+{"uid":"dropdown-layout-children","tag":"ww-div","slots":{"children":[{"uid":"layout-children-icon"},{"uid":"layout-children-text"}]}}
 {"uid":"layout-children-icon","tag":"ww-icon","props":{"default":{"icon":"icon-user","fontSize":"16","color":"black"}}}
-{"uid":"layout-children-text","tag":"ww-text","props":{"default":{"text":{"en":"<div>Profile</div>"}}}}
-
-Events: none
-
-Variables: none
+{"uid":"layout-children-text","tag":"ww-text","props":{"default":{"text":{"en":"Profile"}}}}
+</elements>

src/wwElement.vue

@@ -13,7 +13,7 @@
             <div @mouseenter="handleHoverIn" @mouseleave="handleHoverOut">
                 <Transition :name="this.content.animated ? 'slide' : ''">
                     <wwLayout
-                        v-if="isOpened || (this.content.forceDisplayEditor && this.isEditing)"
+                        v-if="isOpened || (forceOpenInEditor && isEditing)"
                         path="dropdownLayout"
                     />
                 </Transition>
@@ -37,6 +37,7 @@ export default {
             isMouseInside: false,
             timeoutId: 0,
             resizeObserver: null,
+            forceOpenInEditor: false,
         };
     },
     computed: {
@@ -162,6 +163,9 @@ export default {
                 if (!this.content.disabled) this.isOpened = !this.isOpened;
             }
         },
+        toggleDropdown() {
+            if (!this.content.disabled) this.isOpened = !this.isOpened;
+        },
         closeDropdown() {
             this.isOpened = false;
         },
@@ -215,6 +219,9 @@ export default {
             this.coordinates.width = entry.contentRect.width;
             this.coordinates.height = entry.contentRect.height;
         },
+        toggleForceOpenInEditor() {
+            this.forceOpenInEditor = !this.forceOpenInEditor;
+        },
     },
 };
 </script>

ww-config.js

@@ -8,8 +8,20 @@ export default {
       groups: ["Trigger", "Dropdown"],
     },
   },
-  actions: [{ label: 'Close dropdown', action: 'closeDropdown' }],
+  actions: [
+    { label: 'Toggle dropdown', action: 'toggleDropdown' },
+    { label: 'Close dropdown', action: 'closeDropdown' },
+    { label: 'Toggle force open in editor', action: 'toggleForceOpenInEditor' },
+  ],
   properties: {
+    toggleDropdown: {
+      type: 'Button',
+      editorOnly: true,
+      options: {
+        text: { en: 'Toggle' },
+        action: 'toggleForceOpenInEditor',
+      },
+    },
     triggerType: {
       label: {
         en: "Trigger",
@@ -179,11 +191,5 @@ export default {
       },
       /* wwEditor:end */
     },
-    forceDisplayEditor: {
-      type: "OnOff",
-      label: {
-        en: "Force display in editor",
-      }
-    },
   },
 };