fix(core): solves dropdown checked option

ThatOpen · Jul 17, 2024 · d5e522f · d5e522f
1 parent b4c1d2a
commit d5e522f
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 89 deletions.
diff --git a/packages/core/src/components/Button/example.html b/packages/core/src/components/Button/example.html
@@ -13,12 +13,39 @@
     body {
       background-color: var(--bim-ui_bg-base);
     }
+
+    .btn-1 {
+      --bim-label--c: rgb(255 97 97);
+      background-color: rgb(182 19 19 / 40%);
+      border-radius: 100px;
+    }
+
+    .btn-1:hover {
+      --bim-label--c: rgb(239, 75, 75);
+      background-color: rgb(182 19 19 / 50%);
+      outline: 1px solid rgb(239, 75, 75);
+    }
+
+    .btn-2 {
+      background-color: transparent;
+    }
+
+    .btn-2:hover {
+      --bim-label--c: var(--bim-ui_accent-base);
+    }
   </style>
 </head>
 
 <body>
-  <bim-button label="My Button!" icon="solar:alarm-play-bold" tooltip-title="The Button"
-    tooltip-text="This just activates a popup!"></bim-button>
+  <div style="display: flex; flex-direction: column; gap: 0.35rem; width: 15rem;">
+    <bim-button label="My Button!" icon="solar:alarm-play-bold" tooltip-title="The Button"
+      tooltip-text="This just activates a popup!"></bim-button>
+    <bim-button class="btn-1" label="An nicely styled button" icon="solar:alarm-play-bold"></bim-button>
+    <bim-button class="btn-2" label="An styled button" icon="solar:alarm-play-bold"></bim-button>
+    <bim-button label="Vertical Button" icon="solar:alarm-play-bold" vertical></bim-button>
+    <bim-button label="No icon"></bim-button>
+    <bim-button icon="solar:settings-bold"></bim-button>
+  </div>
   <script type="module" src="./example.ts"></script>
 </body>
 

diff --git a/packages/core/src/components/Button/index.ts b/packages/core/src/components/Button/index.ts
@@ -16,10 +16,12 @@ export class Button extends LitElement {
    */
   static styles = css`
     :host {
-      --bim-label--c: var(--bim-ui_bg-contrast-100);
+      --bim-label--c: var(--bim-ui_bg-contrast-100, white);
       display: block;
       flex: 1;
       pointer-events: none;
+      background-color: var(--bim-ui_bg-contrast-20);
+      border-radius: var(--bim-ui_size-4xs);
     }
 
     :host(:not([disabled]):hover) {
@@ -31,13 +33,13 @@ export class Button extends LitElement {
     }
 
     .parent {
-      --bim-label--fz: var(--bim-ui_size-xs);
       --bim-icon--c: var(--bim-label--c);
       display: flex;
       height: 100%;
       user-select: none;
       row-gap: 0.125rem;
-      column-gap: 0.125rem;
+      min-height: var(--bim-ui_size-5xl);
+      min-width: var(--bim-ui_size-5xl);
     }
 
     .button,
@@ -47,10 +49,14 @@ export class Button extends LitElement {
       align-items: center;
       justify-content: center;
       pointer-events: auto;
-      min-height: var(--bim-ui_size-5xl);
-      min-width: var(--bim-ui_size-5xl);
-      background-color: var(--bim-button--bgc, var(--bim-ui_bg-contrast-20));
-      outline: var(--bim-button--olw) solid var(--bim-button--olc);
+    }
+
+    .children {
+      padding: 0 0.375rem;
+    }
+
+    :host(:not([label-hidden])[icon][vertical]) .parent {
+      min-height: 2.5rem;
     }
 
     .button {
@@ -61,24 +67,16 @@ export class Button extends LitElement {
       justify-content: var(--bim-button--jc, center);
     }
 
-    :host(:hover) .button,
-    :host(:hover) .children {
+    :host(:hover),
+    :host([active]) {
       --bim-label--c: var(--bim-ui_main-contrast);
-      --bim-icon--c: var(--bim-ui_main-contrast);
-      fill: white;
       background-color: var(--bim-ui_main-base);
     }
 
     :host(:not([label]):not([icon])) .children {
       flex: 1;
     }
 
-    :host([active]) .button {
-      --bim-label--c: var(--bim-ui_main-contrast);
-      --bim-icon--c: var(--bim-ui_main-contrast);
-      background-color: var(--bim-ui_main-base);
-    }
-
     :host([vertical]) .parent {
       justify-content: center;
     }
@@ -91,17 +89,8 @@ export class Button extends LitElement {
       background-color: gray;
     }
 
-    .children {
-      --bim-icon--fz: var(--bim-ui_size-base);
-      padding: 0 0.125rem;
-    }
-
     ::slotted(bim-button) {
       --bim-icon--fz: var(--bim-ui_size-base);
-      --bim-button--bgc: var(
-        --bim-context-menu--bgc,
-        var(--bim-ui_bg-contrast-20)
-      );
       --bim-button--bdrs: var(--bim-ui_size-4xs);
       --bim-button--olw: 0;
       --bim-button--olc: transparent;

diff --git a/packages/core/src/components/Dropdown/example.html b/packages/core/src/components/Dropdown/example.html
@@ -14,19 +14,32 @@
       background-color: var(--bim-ui_bg-base);
     }
 
-    bim-dropdown {
-      width: 28rem;
+    .dropdown-1 {
+      --bim-dropdown--c: rgb(239, 75, 75);
+      --bim-input--bgc: rgb(182 19 19 / 50%);
+      --bim-input--bdrs: 100px;
+    }
+
+    .dropdown-1[visible] {
+      --bim-input--olc: rgb(239, 75, 75);
     }
   </style>
 </head>
 
 <body>
-  <div>
-    <bim-dropdown label="IFC Entity" multiple>
+  <div style="display: flex; flex-direction: column; gap: 0.35rem; width: 15rem;">
+    <bim-dropdown id="my-dropdown-1" label="IFC Entity" multiple>
       <bim-option label="IfcWindow" checked></bim-option>
       <bim-option label="IfcWall"></bim-option>
       <bim-option label="IfcSlab"></bim-option>
     </bim-dropdown>
+    <bim-dropdown class="dropdown-1">
+      <bim-option label="IfcSlab"></bim-option>
+    </bim-dropdown>
+    <bim-dropdown label="Vertical Layout" vertical>
+      <bim-option label="IfcSlab"></bim-option>
+    </bim-dropdown>
+    <bim-dropdown id="my-dropdown-2" required></bim-dropdown>
   </div>
   <script type="module" src="./example.ts"></script>
 </body>

diff --git a/packages/core/src/components/Dropdown/example.ts b/packages/core/src/components/Dropdown/example.ts
@@ -3,8 +3,18 @@ import * as BUI from "../..";
 
 BUI.Manager.init();
 
-const dropdown = document.body.querySelector<BUI.Dropdown>("bim-dropdown")!;
+const dropdown = document.getElementById("my-dropdown-1") as BUI.Dropdown;
 dropdown.addEventListener("change", () => {
   const value = dropdown.value as string[];
   alert(`You've selected: ${value.join(", ")}.`);
 });
+
+const myDropdown = document.getElementById("my-dropdown-2") as BUI.Dropdown;
+for (let index = 0; index < 300; index++) {
+  const option = document.createElement("bim-option");
+  option.label = `Option ${index}`;
+  option.value = index;
+  myDropdown.append(option);
+}
+
+myDropdown.value = [100];