From e764c2d6462acffc651016698092ea12e87882f7 Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Fri, 7 Nov 2025 14:22:00 +0100 Subject: [PATCH 1/9] Use click on input to change value --- src/components/input/radio/item/index.tsx | 16 +++++++++++++--- src/components/input/radio/item/style.css | 8 ++++---- 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/src/components/input/radio/item/index.tsx b/src/components/input/radio/item/index.tsx index 2f6d7a386..1b095247e 100644 --- a/src/components/input/radio/item/index.tsx +++ b/src/components/input/radio/item/index.tsx @@ -11,6 +11,7 @@ import { RadioItemSelect } from "../RadioItemSelect" }) export class SmoothlyInputRadioItem { @Element() element: HTMLInputElement + private id: string @Prop({ mutable: true }) value: any @Prop({ mutable: true, reflect: true }) selected = false @Prop({ mutable: true, reflect: true }) looks?: Looks @@ -27,6 +28,7 @@ export class SmoothlyInputRadioItem { }) }) this.selected && this.inputHandler(false) + this.id = "id-" + Math.random().toString(36).substring(2, 11) } inputHandler(userInitiated: boolean): void { this.smoothlyRadioItemSelect.emit({ @@ -39,12 +41,20 @@ export class SmoothlyInputRadioItem { render(): VNode | VNode[] { return ( - this.inputHandler(true)}> - + + this.inputHandler(true)} + /> - ) } diff --git a/src/components/input/radio/item/style.css b/src/components/input/radio/item/style.css index 0dd0e17ec..f3de53acc 100644 --- a/src/components/input/radio/item/style.css +++ b/src/components/input/radio/item/style.css @@ -24,13 +24,13 @@ smoothly-input-radio:not([disabled]):not([readonly]) :host>smoothly-icon[name=ch :host>input { opacity: 0; z-index: 1; - width: 1.5em; - height: 1.5em; + left: 0; + width: 1.4rem; + height: 1.4rem; position: absolute; - transform: translateX(50%); } :host>label { - padding: 0 .3em; + padding-inline: 0.25rem; white-space: nowrap; } From fffafd1a882ef18134a959b813978fa0c515b632 Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Mon, 10 Nov 2025 11:33:26 +0100 Subject: [PATCH 2/9] Add radio demo --- src/components.d.ts | 13 ++++++ src/components/input/demo/index.tsx | 1 + src/components/input/demo/radio/index.tsx | 57 +++++++++++++++++++++++ src/components/input/demo/radio/style.css | 4 ++ 4 files changed, 75 insertions(+) create mode 100644 src/components/input/demo/radio/index.tsx create mode 100644 src/components/input/demo/radio/style.css diff --git a/src/components.d.ts b/src/components.d.ts index cb5d72cb6..234f0333b 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -412,6 +412,8 @@ export namespace Components { } interface SmoothlyInputDemo { } + interface SmoothlyInputDemoRadio { + } interface SmoothlyInputDemoStandard { } interface SmoothlyInputDemoUserInput { @@ -1601,6 +1603,12 @@ declare global { prototype: HTMLSmoothlyInputDemoElement; new (): HTMLSmoothlyInputDemoElement; }; + interface HTMLSmoothlyInputDemoRadioElement extends Components.SmoothlyInputDemoRadio, HTMLStencilElement { + } + var HTMLSmoothlyInputDemoRadioElement: { + prototype: HTMLSmoothlyInputDemoRadioElement; + new (): HTMLSmoothlyInputDemoRadioElement; + }; interface HTMLSmoothlyInputDemoStandardElement extends Components.SmoothlyInputDemoStandard, HTMLStencilElement { } var HTMLSmoothlyInputDemoStandardElement: { @@ -2267,6 +2275,7 @@ declare global { "smoothly-input-date-range": HTMLSmoothlyInputDateRangeElement; "smoothly-input-date-time": HTMLSmoothlyInputDateTimeElement; "smoothly-input-demo": HTMLSmoothlyInputDemoElement; + "smoothly-input-demo-radio": HTMLSmoothlyInputDemoRadioElement; "smoothly-input-demo-standard": HTMLSmoothlyInputDemoStandardElement; "smoothly-input-demo-user-input": HTMLSmoothlyInputDemoUserInputElement; "smoothly-input-edit": HTMLSmoothlyInputEditElement; @@ -2709,6 +2718,8 @@ declare namespace LocalJSX { interface SmoothlyInputDemo { "onSmoothlyUrlUpdate"?: (event: SmoothlyInputDemoCustomEvent<{ path: string; query?: string }>) => void; } + interface SmoothlyInputDemoRadio { + } interface SmoothlyInputDemoStandard { } interface SmoothlyInputDemoUserInput { @@ -3090,6 +3101,7 @@ declare namespace LocalJSX { "smoothly-input-date-range": SmoothlyInputDateRange; "smoothly-input-date-time": SmoothlyInputDateTime; "smoothly-input-demo": SmoothlyInputDemo; + "smoothly-input-demo-radio": SmoothlyInputDemoRadio; "smoothly-input-demo-standard": SmoothlyInputDemoStandard; "smoothly-input-demo-user-input": SmoothlyInputDemoUserInput; "smoothly-input-edit": SmoothlyInputEdit; @@ -3206,6 +3218,7 @@ declare module "@stencil/core" { "smoothly-input-date-range": LocalJSX.SmoothlyInputDateRange & JSXBase.HTMLAttributes; "smoothly-input-date-time": LocalJSX.SmoothlyInputDateTime & JSXBase.HTMLAttributes; "smoothly-input-demo": LocalJSX.SmoothlyInputDemo & JSXBase.HTMLAttributes; + "smoothly-input-demo-radio": LocalJSX.SmoothlyInputDemoRadio & JSXBase.HTMLAttributes; "smoothly-input-demo-standard": LocalJSX.SmoothlyInputDemoStandard & JSXBase.HTMLAttributes; "smoothly-input-demo-user-input": LocalJSX.SmoothlyInputDemoUserInput & JSXBase.HTMLAttributes; "smoothly-input-edit": LocalJSX.SmoothlyInputEdit & JSXBase.HTMLAttributes; diff --git a/src/components/input/demo/index.tsx b/src/components/input/demo/index.tsx index 173b8cb14..0404d484f 100644 --- a/src/components/input/demo/index.tsx +++ b/src/components/input/demo/index.tsx @@ -18,6 +18,7 @@ export class SmoothlyInputDemo { +

Calendar

Calendar diff --git a/src/components/input/demo/radio/index.tsx b/src/components/input/demo/radio/index.tsx new file mode 100644 index 000000000..167cb84ef --- /dev/null +++ b/src/components/input/demo/radio/index.tsx @@ -0,0 +1,57 @@ +import { Component, h, Host, State, Watch } from "@stencil/core" + +@Component({ + tag: "smoothly-input-demo-radio", + styleUrl: "style.css", + scoped: true, +}) +export class SmoothlyInputDemoRadio { + @State() selected: string + + @Watch("selected") + selectedChange() { + console.log("selected", this.selected) + } + + render() { + return ( + + (this.selected = e.detail.radio as string)}> + + Option 1 + {this.selected == "1" && ( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu + fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum. + + )} + + + Option 2 +
+ {this.selected == "2" && ( + + + 🐕 + + + 🐈 + + + 🐀 + + + )} +
+ + + + ) + } +} diff --git a/src/components/input/demo/radio/style.css b/src/components/input/demo/radio/style.css new file mode 100644 index 000000000..df83bb3d9 --- /dev/null +++ b/src/components/input/demo/radio/style.css @@ -0,0 +1,4 @@ +:host { + max-width: min(40rem, 100%); + margin-inline: auto; +} From 1e8ed607ba349a977763a42ea39c92d1a1f5c439 Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Mon, 10 Nov 2025 11:55:29 +0100 Subject: [PATCH 3/9] detail slot in radio-item --- src/components/input/demo/radio/index.tsx | 4 ++-- src/components/input/radio/item/index.tsx | 2 +- src/components/input/radio/item/style.css | 13 +++++++++++-- 3 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/components/input/demo/radio/index.tsx b/src/components/input/demo/radio/index.tsx index 167cb84ef..70926397c 100644 --- a/src/components/input/demo/radio/index.tsx +++ b/src/components/input/demo/radio/index.tsx @@ -23,7 +23,7 @@ export class SmoothlyInputDemoRadio { Option 1 {this.selected == "1" && ( - + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu @@ -34,7 +34,7 @@ export class SmoothlyInputDemoRadio { Option 2 -
+
{this.selected == "2" && ( diff --git a/src/components/input/radio/item/index.tsx b/src/components/input/radio/item/index.tsx index 1b095247e..ff3c26f6c 100644 --- a/src/components/input/radio/item/index.tsx +++ b/src/components/input/radio/item/index.tsx @@ -54,7 +54,7 @@ export class SmoothlyInputRadioItem { - + ) } diff --git a/src/components/input/radio/item/style.css b/src/components/input/radio/item/style.css index f3de53acc..82bb64fe1 100644 --- a/src/components/input/radio/item/style.css +++ b/src/components/input/radio/item/style.css @@ -1,5 +1,9 @@ :host { - display: flex; + display: grid; + grid-template-areas: + "check label" + "detail detail"; + grid-template-columns: auto 1fr; align-items: center; position: relative; } @@ -15,6 +19,7 @@ smoothly-input-radio[disabled] :host>* { border-radius: 1px; } :host>smoothly-icon { + grid-area: check; --smoothly-color-contrast: var(--smoothly-input-foreground); } smoothly-input-radio:not([disabled]):not([readonly]) :host>smoothly-icon[name=checkmark-circle] { @@ -22,6 +27,7 @@ smoothly-input-radio:not([disabled]):not([readonly]) :host>smoothly-icon[name=ch } :host>input { + grid-area: check; opacity: 0; z-index: 1; left: 0; @@ -29,8 +35,11 @@ smoothly-input-radio:not([disabled]):not([readonly]) :host>smoothly-icon[name=ch height: 1.4rem; position: absolute; } - :host>label { + grid-area: label; padding-inline: 0.25rem; white-space: nowrap; } +:host [slot=detail] { + grid-area: detail; +} From 7e50ed180e3ac484f221a7680bcfcf1fb7d9a4c2 Mon Sep 17 00:00:00 2001 From: Magnus Gustafsson Date: Mon, 10 Nov 2025 12:07:04 +0100 Subject: [PATCH 4/9] label fit-content --- src/components/input/radio/item/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/input/radio/item/style.css b/src/components/input/radio/item/style.css index 82bb64fe1..83526afe4 100644 --- a/src/components/input/radio/item/style.css +++ b/src/components/input/radio/item/style.css @@ -39,6 +39,7 @@ smoothly-input-radio:not([disabled]):not([readonly]) :host>smoothly-icon[name=ch grid-area: label; padding-inline: 0.25rem; white-space: nowrap; + width: fit-content; } :host [slot=detail] { grid-area: detail; From b0eb937f76b94e3893dd17402e161ec0541844b1 Mon Sep 17 00:00:00 2001 From: qijieye Date: Fri, 2 Jan 2026 15:53:39 +0100 Subject: [PATCH 5/9] using css to show/hide slot content --- src/components/input/demo/radio/index.tsx | 41 +++++++++++------------ src/components/input/radio/item/style.css | 6 ++++ 2 files changed, 25 insertions(+), 22 deletions(-) diff --git a/src/components/input/demo/radio/index.tsx b/src/components/input/demo/radio/index.tsx index 70926397c..2cb96b829 100644 --- a/src/components/input/demo/radio/index.tsx +++ b/src/components/input/demo/radio/index.tsx @@ -22,32 +22,29 @@ export class SmoothlyInputDemoRadio { onSmoothlyInput={e => (this.selected = e.detail.radio as string)}> Option 1 - {this.selected == "1" && ( - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip - ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu - fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia - deserunt mollit anim id est laborum. - - )} + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex + ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu + fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + Option 2
- {this.selected == "2" && ( - - - 🐕 - - - 🐈 - - - 🐀 - - - )} + + + 🐕 + + + 🐈 + + + 🐀 + +
diff --git a/src/components/input/radio/item/style.css b/src/components/input/radio/item/style.css index 83526afe4..a728c7b5a 100644 --- a/src/components/input/radio/item/style.css +++ b/src/components/input/radio/item/style.css @@ -44,3 +44,9 @@ smoothly-input-radio:not([disabled]):not([readonly]) :host>smoothly-icon[name=ch :host [slot=detail] { grid-area: detail; } +:host[selected] ::slotted([slot="detail"]) { + display: block; +} +:host ::slotted([slot="detail"]) { + display: none; +} From e1c49b1cd503abdff8a5a42a9ea98572644a086a Mon Sep 17 00:00:00 2001 From: qijieye Date: Wed, 7 Jan 2026 11:32:47 +0100 Subject: [PATCH 6/9] update --- src/components/input/radio/item/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/input/radio/item/index.tsx b/src/components/input/radio/item/index.tsx index ff3c26f6c..1d093ec1f 100644 --- a/src/components/input/radio/item/index.tsx +++ b/src/components/input/radio/item/index.tsx @@ -28,7 +28,6 @@ export class SmoothlyInputRadioItem { }) }) this.selected && this.inputHandler(false) - this.id = "id-" + Math.random().toString(36).substring(2, 11) } inputHandler(userInitiated: boolean): void { this.smoothlyRadioItemSelect.emit({ @@ -43,7 +42,6 @@ export class SmoothlyInputRadioItem { return ( this.inputHandler(true)} /> -