Always bring internal button to full width

lucsoft · Feb 14, 2024 · 1066a4c · 1066a4c
1 parent 2722daa
commit 1066a4c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/src/components/Button.ts b/src/components/Button.ts
@@ -51,11 +51,11 @@ export class ButtonComponent extends ColoredComponent {
         });
         return this;
     }
-    setAlignContent(type: "center" | "end" | "start" | "stretch") {
+    setAlignContent(type: "center" | "end" | "start" | "stretch" | "space-around" | "space-between" | "space-evenly") {
         this.wrapper.style.alignContent = type;
         return this;
     }
-    setJustifyContent(type: "center" | "end" | "start" | "stretch") {
+    setJustifyContent(type: "center" | "end" | "start" | "stretch" | "space-around" | "space-between" | "space-evenly") {
         this.wrapper.style.justifyContent = type;
         return this;
     }

diff --git a/src/components/FormInputs.ts b/src/components/FormInputs.ts
@@ -77,7 +77,10 @@ export class DropDownInputComponent<Value extends string> extends InputForm<Valu
         super();
 
         const text = asRef(label);
-        this.button = Button(text).addSuffix(icon);
+        this.button = Button(text)
+            .setWidth("100%")
+            .setJustifyContent("space-between")
+            .addSuffix(icon);
 
         this.wrapper.innerHTML = "";
         this.color.setValue(Color.Disabled);
@@ -91,6 +94,10 @@ export class DropDownInputComponent<Value extends string> extends InputForm<Valu
         });
 
         this.button.onClick(() => {
+            if (dropDownPopover.isOpen()) {
+                dropDownPopover.hidePopover();
+                return;
+            }
             dropDownPopover.clearAnchors("--wdropdown-default");
             this.button.setAnchorName("--wdropdown-default");
             dropDownPopover.showPopover();

diff --git a/src/components/Popover.ts b/src/components/Popover.ts
@@ -34,6 +34,10 @@ export const Popover = (content: Component) => new class extends Component {
         return this;
     };
 
+    public isOpen() {
+        return this.wrapper.matches(':popover-open');
+    }
+
     public clearAnchors(anchorName: `--${string}`) {
         const anchors = document.querySelectorAll(`[anchor="${anchorName}"]`);
         anchors.forEach(anchor => anchor.removeAttribute("anchor"));