From e98fef503d8507bce604bdf4b3f615bdca78175b Mon Sep 17 00:00:00 2001 From: Sukaato Date: Sat, 28 Sep 2024 21:32:49 +0200 Subject: [PATCH] feat(dropdown): add new `side` & `align` possibilities Add `start` & `end` to `side` Add `center` to `align` fixes: #38 --- biome.json | 1 + packages/core/api.txt | 6 +- packages/core/src/components-config.d.ts | 3 + packages/core/src/components.d.ts | 8 +- .../src/components/dropdown/dropdown.scss | 35 +- .../core/src/components/dropdown/dropdown.tsx | 10 +- .../src/components/dropdown/dropdown.type.ts | 4 +- .../core/src/components/dropdown/readme.md | 16 +- .../components/dropdown/test/basic/index.html | 333 +++++++++++++++--- 9 files changed, 349 insertions(+), 67 deletions(-) diff --git a/biome.json b/biome.json index 51e0da2..c67d443 100644 --- a/biome.json +++ b/biome.json @@ -24,6 +24,7 @@ "rules": { "recommended": true, "suspicious": { + "noAssignInExpressions": "off", "noEmptyBlock": "error", "noExplicitAny": "off", "noConfusingVoidType": "off", diff --git a/packages/core/api.txt b/packages/core/api.txt index d2b9907..bb24f9a 100644 --- a/packages/core/api.txt +++ b/packages/core/api.txt @@ -116,11 +116,11 @@ pop-drawer,part,backdrop pop-drawer,part,side pop-dropdown,shadow -pop-dropdown,prop,align,"end" | "start",undefined,false,true -pop-dropdown,prop,debounce,number,100,false,false +pop-dropdown,prop,align,"center" | "end" | "start",undefined,false,true +pop-dropdown,prop,debounce,number,undefined,false,false pop-dropdown,prop,open,boolean,undefined,false,true pop-dropdown,prop,showBackdrop,boolean,undefined,false,true -pop-dropdown,prop,side,"bottom" | "left" | "right" | "top",undefined,false,true +pop-dropdown,prop,side,"bottom" | "end" | "left" | "right" | "start" | "top",undefined,false,true pop-dropdown,prop,triggerAction,"click" | "context-menu" | "hover",undefined,false,false pop-dropdown,method,dismiss,dismiss() => Promise pop-dropdown,method,present,present() => Promise diff --git a/packages/core/src/components-config.d.ts b/packages/core/src/components-config.d.ts index f2db6f9..9991c9a 100644 --- a/packages/core/src/components-config.d.ts +++ b/packages/core/src/components-config.d.ts @@ -215,6 +215,8 @@ export namespace Configuration { 'pop-dropdown'?: { /** * Describe where the content is displayed relatively to the trigger element + * - `"start"`: Open on the left in LTR and to the right in RTL. + * - `"end"`: Open on the right in LTR and to the left in RTL. * - `"left"`: Open on left * - `"right"`: Open on right * - `"top"`: Open on top @@ -225,6 +227,7 @@ export namespace Configuration { /** * Describes how the dropdown has to be alined * - `"start"`: Align to the left in LTR and to the right in RTL. + * - `"center"`: Align to the left in LTR and to the right in RTL. * - `"end"`: Align to the right in LTR and to the left in RTL. * @default "start" */ diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index be7a501..2d3da4a 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -345,7 +345,7 @@ export namespace Components { */ interface PopDropdown { /** - * Describes how the dropdown has to be alined - `"start"`: Align to the left in LTR and to the right in RTL. - `"end"`: Align to the right in LTR and to the left in RTL. + * Describes how the dropdown has to be alined - `"start"`: Align to the left in LTR and to the right in RTL. - `"center"`: Align to the left in LTR and to the right in RTL. - `"end"`: Align to the right in LTR and to the left in RTL. * @config * @default "start" */ @@ -379,7 +379,7 @@ export namespace Components { */ "showBackdrop"?: boolean; /** - * Describe where the content is displayed relatively to the trigger element - `"left"`: Open on left - `"right"`: Open on right - `"top"`: Open on top - `"bottom"`: Open on bottom + * Describe where the content is displayed relatively to the trigger element - `"start"`: Open on the left in LTR and to the right in RTL. - `"end"`: Open on the right in LTR and to the left in RTL. - `"left"`: Open on left - `"right"`: Open on right - `"top"`: Open on top - `"bottom"`: Open on bottom * @config * @default "bottom" */ @@ -2309,7 +2309,7 @@ declare namespace LocalJSX { */ interface PopDropdown { /** - * Describes how the dropdown has to be alined - `"start"`: Align to the left in LTR and to the right in RTL. - `"end"`: Align to the right in LTR and to the left in RTL. + * Describes how the dropdown has to be alined - `"start"`: Align to the left in LTR and to the right in RTL. - `"center"`: Align to the left in LTR and to the right in RTL. - `"end"`: Align to the right in LTR and to the left in RTL. * @config * @default "start" */ @@ -2341,7 +2341,7 @@ declare namespace LocalJSX { */ "showBackdrop"?: boolean; /** - * Describe where the content is displayed relatively to the trigger element - `"left"`: Open on left - `"right"`: Open on right - `"top"`: Open on top - `"bottom"`: Open on bottom + * Describe where the content is displayed relatively to the trigger element - `"start"`: Open on the left in LTR and to the right in RTL. - `"end"`: Open on the right in LTR and to the left in RTL. - `"left"`: Open on left - `"right"`: Open on right - `"top"`: Open on top - `"bottom"`: Open on bottom * @config * @default "bottom" */ diff --git a/packages/core/src/components/dropdown/dropdown.scss b/packages/core/src/components/dropdown/dropdown.scss index 20b5124..1d7258b 100644 --- a/packages/core/src/components/dropdown/dropdown.scss +++ b/packages/core/src/components/dropdown/dropdown.scss @@ -81,6 +81,14 @@ // Dropdown Placement // ---------------------------------------------------------------- +:host(:is([side="bottom"], [side="top"])[align="center"]) .dropdown-content { + inset-inline-end: 50%; + transform: translateX(50%); +} +:host(:is([side="bottom"], [side="top"])[align="center"].dropdown-rtl) .dropdown-content { + transform: translateX(-50%); +} + :host([side="bottom"][align="end"]) .dropdown-content { inset-inline-end: 0; } @@ -93,26 +101,39 @@ inset-inline-end: 0; } -:host([side="left"]) .dropdown-content { +:host(:is([side="left"], [side="start"])) .dropdown-content { top: 0; bottom: auto; +} +:host([side="start"]) .dropdown-content { inset-inline-end: 100%; } -:host([side="left"][align="end"]) .dropdown-content { - top: auto; - bottom: 0; +:host([side="left"]) .dropdown-content { + right: 100%; } -:host([side="right"]) .dropdown-content { +:host(:is([side="start"], [side="left"], [side="right"], [side="end"])[align="center"]) .dropdown-content { + top: 50%; + transform: translateY(-50%); +} + + +:host(:is([side="right"], [side="end"])) .dropdown-content { top: 0; bottom: auto; - inset-inline-start: 100%; } -:host([side="right"][align="end"]) .dropdown-content { +:host(:is([side="left"], [side="start"], [side="right"], [side="end"])[align="end"]) .dropdown-content { top: auto; bottom: 0; } +:host([side="right"]) .dropdown-content { + left: 100%; +} +:host([side="end"]) .dropdown-content { + inset-inline-start: 100%; +} + @keyframes present { from { scale: 0.95; diff --git a/packages/core/src/components/dropdown/dropdown.tsx b/packages/core/src/components/dropdown/dropdown.tsx index 0544c75..e0c1a95 100644 --- a/packages/core/src/components/dropdown/dropdown.tsx +++ b/packages/core/src/components/dropdown/dropdown.tsx @@ -16,6 +16,7 @@ import { import { Show } from '../Show'; import type { DropdownAlign, DropdownSide } from './dropdown.type'; import { SPACE, ENTER } from 'key-definitions'; +import { isRTL } from '#utils/dir'; /** * Dropdown can open a menu or any other element when the trigger element is clicked. @@ -42,6 +43,8 @@ export class Dropdown implements ComponentInterface, OverlayInterface { /** * Describe where the content is displayed relatively to the trigger element + * - `"start"`: Open on the left in LTR and to the right in RTL. + * - `"end"`: Open on the right in LTR and to the left in RTL. * - `"left"`: Open on left * - `"right"`: Open on right * - `"top"`: Open on top @@ -55,6 +58,7 @@ export class Dropdown implements ComponentInterface, OverlayInterface { /** * Describes how the dropdown has to be alined * - `"start"`: Align to the left in LTR and to the right in RTL. + * - `"center"`: Align to the left in LTR and to the right in RTL. * - `"end"`: Align to the right in LTR and to the left in RTL. * * @config @@ -208,7 +212,11 @@ export class Dropdown implements ComponentInterface, OverlayInterface { render() { return ( - +
- `"start"`: Align to the left in LTR and to the right in RTL.
- `"end"`: Align to the right in LTR and to the left in RTL. | `"end" \| "start"` | `"start"` | -| `debounce` | `debounce` | Set the amount of time, in milliseconds after the user no longer hover the trigger or dropdown, will dismiss.
Only apply on `triggerAction=hover` | `number` | `100` | -| `open` | `open` | Force the dropdown to be shown | `boolean` | `false` | -| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the modal.
This property controls whether or not the backdrop
darkens the screen when the modal is presented. | `boolean` | `false` | -| `side` | `side` | Describe where the content is displayed relatively to the trigger element
- `"left"`: Open on left
- `"right"`: Open on right
- `"top"`: Open on top
- `"bottom"`: Open on bottom | `"bottom" \| "left" \| "right" \| "top"` | `"bottom"` | -| `triggerAction` | `trigger-action` | Describes what kind of intertion with the trigger (sloted element) that should cause the dropdown to open.
- `"click"`: the dropdown will be presented when the trigger is left clicked.
- `"hover"`: the dropdown will be presented when a pointer hovers over the trigger.
- `"context-menu"`: the dropdown will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing. | `"click" \| "context-menu" \| "hover"` | `"click"` | +| Property | Attribute | Description | Type | Default | +| --------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | ---------- | +| `align` | `align` | Describes how the dropdown has to be alined
- `"start"`: Align to the left in LTR and to the right in RTL.
- `"center"`: Align to the left in LTR and to the right in RTL.
- `"end"`: Align to the right in LTR and to the left in RTL. | `"center" \| "end" \| "start"` | `"start"` | +| `debounce` | `debounce` | Set the amount of time, in milliseconds after the user no longer hover the trigger or dropdown, will dismiss.
Only apply on `triggerAction=hover` | `number` | `100` | +| `open` | `open` | Force the dropdown to be shown | `boolean` | `false` | +| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the modal.
This property controls whether or not the backdrop
darkens the screen when the modal is presented. | `boolean` | `false` | +| `side` | `side` | Describe where the content is displayed relatively to the trigger element
- `"start"`: Open on the left in LTR and to the right in RTL.
- `"end"`: Open on the right in LTR and to the left in RTL.
- `"left"`: Open on left
- `"right"`: Open on right
- `"top"`: Open on top
- `"bottom"`: Open on bottom | `"bottom" \| "end" \| "left" \| "right" \| "start" \| "top"` | `"bottom"` | +| `triggerAction` | `trigger-action` | Describes what kind of intertion with the trigger (sloted element) that should cause the dropdown to open.
- `"click"`: the dropdown will be presented when the trigger is left clicked.
- `"hover"`: the dropdown will be presented when a pointer hovers over the trigger.
- `"context-menu"`: the dropdown will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing. | `"click" \| "context-menu" \| "hover"` | `"click"` | ## Events diff --git a/packages/core/src/components/dropdown/test/basic/index.html b/packages/core/src/components/dropdown/test/basic/index.html index eae01c7..10f26de 100644 --- a/packages/core/src/components/dropdown/test/basic/index.html +++ b/packages/core/src/components/dropdown/test/basic/index.html @@ -26,6 +26,7 @@ } div { display: flex; + justify-content: center; gap: .5rem; } @@ -37,33 +38,33 @@

Dropdown - basic

trigger default - + - dropdown content + content trigger click - + - dropdown content + content trigger hover - + - dropdown content + content trigger context-menu - + - dropdown content + content @@ -71,45 +72,53 @@

Dropdown - basic

-

Dropdown - side

+

start / align

- - side default - + + start / start + - dropdown content + content - - side left - + + start / start rtl + - dropdown content + content - - side right - + + start / center + - dropdown content + content - - side top - + + start / center rlt + - dropdown content + content - - side bottom - + + start / end + - dropdown content + content + + + + + start / end rlt + + + content @@ -117,29 +126,269 @@

Dropdown - side

-

Dropdown - align

+

left / align

- - align default - + + left / start + + + content + + + + + left / start rtl + + + content + + + + + left / center + + + content + + + + + left / center rlt + + + content + + + + + left / end + + + content + + + + + left / end rlt + + + content + + + +
+
+ +
+

bottom / align

+
+ + bottom / start + + + content + + + + + bottom / start rtl + + + content + + + + + bottom / center + + + content + + + + + bottom / center rlt + + + content + + + + + bottom / end + + + content + + + + + bottom / end rlt + + + content + + + +
+
+ +
+

right / align

+
+ + right / start + + + content + + + + + right / start rtl + + + content + + + + + right / center + + + content + + + + + right / center rlt + + + content + + + + + right / end + + + content + + + + + right / end rlt + + + content + + + +
+
+ +
+

end / align

+
+ + end / start + + + content + + + + + end / start rtl + + + content + + + + + end / center + + + content + + + + + end / center rlt + + + content + + + + + end / end + + + content + + + + + end / end rlt + + + content + + + +
+
+ +
+

top / align

+
+ + top / start + + + content + + + + + top / start rtl + + + content + + + + + top / center + + + content + + + + + top / center rlt + - dropdown content + content - - side start - + + top / end + - dropdown content + content - - align end - + + top / end rlt + - dropdown content + content