From 79fb0cb56c2585013e0bbea95e51d40b79112bec Mon Sep 17 00:00:00 2001 From: Sukaato Date: Sun, 29 Sep 2024 12:54:05 +0200 Subject: [PATCH] fix(select): display `select` properly `popover` property cause this bug since element extends HTMLElement under the hood Also fix the lable fixes: #41 --- package.json | 11 +-- packages/core/src/components/join/join.tsx | 2 +- .../core/src/components/select/select.scss | 4 +- .../core/src/components/select/select.tsx | 20 +++--- .../components/select/test/basic/index.html | 72 +++++++++++++++++++ .../core/src/themes/utils/_join-item.scss | 16 +++-- 6 files changed, 100 insertions(+), 25 deletions(-) create mode 100644 packages/core/src/components/select/test/basic/index.html diff --git a/package.json b/package.json index 24e788c..0d90bbd 100644 --- a/package.json +++ b/package.json @@ -8,11 +8,12 @@ "packages/vue" ], "scripts": { - "install:all": "npm run install:core && npm install:vue", - "install:core": "npm install -w @poppy-ui/core", - "build:core": "cd packages/core && npm run build", - "install:vue": "npm install -w @poppy-ui/vue @poppy-ui/core ", - "build:vue": "cd packages/vue && npm run build", + "install:all": "npm install -w @poppy-ui/core -w @poppy-ui/vue", + "core:install": "npm install -w @poppy-ui/core", + "core:start": "npm start -w @poppy-ui/core", + "core:build": "npm run build -w @poppy-ui/core", + "vue:install": "npm install -w @poppy-ui/vue", + "vue:build": "npm run build -w @poppy-ui/vue", "prepare": "git config core.hooksPath .githooks" }, "devDependencies": { diff --git a/packages/core/src/components/join/join.tsx b/packages/core/src/components/join/join.tsx index 4db23a5..0860ccd 100644 --- a/packages/core/src/components/join/join.tsx +++ b/packages/core/src/components/join/join.tsx @@ -19,7 +19,7 @@ export class Join implements ComponentInterface { * @config * @default "horizontal" */ - @Prop({ reflect: true }) orientation: JoinOrientation; + @Prop({ reflect: true, mutable: true }) orientation: JoinOrientation; componentWillLoad(): void { componentConfig.apply(this, 'pop-join', { diff --git a/packages/core/src/components/select/select.scss b/packages/core/src/components/select/select.scss index 95bf59f..5e6d5aa 100644 --- a/packages/core/src/components/select/select.scss +++ b/packages/core/src/components/select/select.scss @@ -16,7 +16,7 @@ $minWidth: 12rem; // @include join-item.item(".select-wrapper"); -@include join-item.item(".select-wrapper button"); +@include join-item.item(".select-wrapper", ".select-wrapper button"); :host { --opacity: 1; @@ -38,7 +38,7 @@ $minWidth: 12rem; align-items: center; overflow: hidden; - // border-radius: var(--border-radius, get-radius(md)); + border-radius: var(--border-radius); background-color: var(--background); &:has(button:focus-visible) { diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx index 1e55301..9a3cb3e 100644 --- a/packages/core/src/components/select/select.tsx +++ b/packages/core/src/components/select/select.tsx @@ -34,8 +34,8 @@ export class Select implements ComponentInterface, FormAssociatedInterface { private inputId = `pop-select-${selectIds++}`; private inheritedAttributes: Attributes; - private popover: HTMLPopPopoverElement; - private trigger: HTMLButtonElement; + private popoverRef: HTMLPopPopoverElement; + private triggerRef: HTMLButtonElement; @Element() host!: HTMLElement; @AttachInternals() internals: ElementInternals; @@ -226,12 +226,12 @@ export class Select implements ComponentInterface, FormAssociatedInterface { */ @Method() async setFocus(): Promise { - this.trigger.focus(); + this.triggerRef.focus(); } @Method() async open(event?: any) { - if (this.disabled || this.isExpanded || this.popover) return; + if (this.disabled || this.isExpanded || this.popoverRef) return; this.isExpanded = true; const selectedValue = this.value; @@ -275,10 +275,10 @@ export class Select implements ComponentInterface, FormAssociatedInterface { alignment: 'center', event: event, }); - this.popover = popover; + this.popoverRef = popover; popover.addEventListener('didDismiss', () => { - this.popover = undefined; + this.popoverRef = undefined; this.isExpanded = false; this.popDismiss.emit(); this.setFocus(); @@ -324,7 +324,7 @@ export class Select implements ComponentInterface, FormAssociatedInterface { if (this.disabled || !this.isExpanded) return; this.isExpanded = false; - this.popover.dismiss(); + this.popoverRef.dismiss(); } private onFocus = () => { @@ -338,7 +338,7 @@ export class Select implements ComponentInterface, FormAssociatedInterface { private onClick = async (ev: PointerEvent) => { await this.open({ ...ev, - target: this.trigger, + target: this.triggerRef, }); }; @@ -453,7 +453,7 @@ export class Select implements ComponentInterface, FormAssociatedInterface { onClick={this.onClick} onFocus={this.onFocus} onBlur={this.onBlur} - ref={ref => (this.trigger = ref)} + ref={ref => (this.triggerRef = ref)} /> ); } @@ -474,7 +474,7 @@ export class Select implements ComponentInterface, FormAssociatedInterface { 'join-item': hostContext(host, 'pop-join'), }} > -
+