H0llyW00dzZ/templui
H0llyW00dzZ/templui
1
0
Fork 0
mirror of https://github.com/axzilla/templui.git synced 2025-02-22 15:24:21 +00:00
Code

improve: better colors for disabled toggle component

Browse Source
This commit is contained in:
axzilla 2024-10-25 09:25:58 +02:00
parent af138f66e4
commit 2c13a651fd
2 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
pkg/components/toggle.templ
View File

@ -94,7 +94,7 @@ templ Toggle(props ToggleProps) {
<label
@click="$refs.switchButton.click(); $refs.switchButton.focus()"
:id="$id('switch')"
:class="{ 'text-foreground': checked, 'text-muted-foreground': !checked }"
:class="{ 'text-foreground': checked, 'text-muted-foreground': !checked, 'opacity-50 cursor-not-allowed': disabled }"
class="text-sm select-none"
x-cloak
>
@ -106,7 +106,10 @@ templ Toggle(props ToggleProps) {
x-ref="switchButton"
type="button"
@click="checked = !checked"
class={ "relative inline-flex h-6 py-0.5 focus:outline-none rounded-full w-10" }
class={
"relative inline-flex h-6 py-0.5 focus:outline-none rounded-full w-10",
"disabled:opacity-50 disabled:cursor-not-allowed",
}
:class="checked ? 'bg-primary' : 'bg-neutral-200'"
:disabled={ props.Disabled }
x-cloak
@ -120,7 +123,7 @@ templ Toggle(props ToggleProps) {
<label
@click="$refs.switchButton.click(); $refs.switchButton.focus()"
:id="$id('switch')"
:class="{ 'text-foreground': checked, 'text-muted-foreground': !checked }"
:class="{ 'text-foreground': checked, 'text-muted-foreground': !checked, 'opacity-50 cursor-not-allowed': disabled }"
class="text-sm select-none"
x-cloak
>

15
pkg/components/toggle_templ.go
View File

@ -177,7 +177,7 @@ func Toggle(props ToggleProps) templ.Component {
return templ_7745c5c3_Err
}
if props.LabelLeft != "" {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<label @click=\"$refs.switchButton.click(); $refs.switchButton.focus()\" :id=\"$id(&#39;switch&#39;)\" :class=\"{ &#39;text-foreground&#39;: checked, &#39;text-muted-foreground&#39;: !checked }\" class=\"text-sm select-none\" x-cloak>")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<label @click=\"$refs.switchButton.click(); $refs.switchButton.focus()\" :id=\"$id(&#39;switch&#39;)\" :class=\"{ &#39;text-foreground&#39;: checked, &#39;text-muted-foreground&#39;: !checked, &#39;opacity-50 cursor-not-allowed&#39;: disabled }\" class=\"text-sm select-none\" x-cloak>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -190,12 +190,15 @@ func Toggle(props ToggleProps) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</label>")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</label> ")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
var templ_7745c5c3_Var7 = []any{"relative inline-flex h-6 py-0.5 focus:outline-none rounded-full w-10"}
var templ_7745c5c3_Var7 = []any{
"relative inline-flex h-6 py-0.5 focus:outline-none rounded-full w-10",
"disabled:opacity-50 disabled:cursor-not-allowed",
}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var7...)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
@ -220,7 +223,7 @@ func Toggle(props ToggleProps) templ.Component {
var templ_7745c5c3_Var9 string
templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(props.Disabled)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/toggle.templ`, Line: 111, Col: 29}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/toggle.templ`, Line: 113, Col: 29}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
if templ_7745c5c3_Err != nil {
@ -231,14 +234,14 @@ func Toggle(props ToggleProps) templ.Component {
return templ_7745c5c3_Err
}
if props.LabelRight != "" {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<label @click=\"$refs.switchButton.click(); $refs.switchButton.focus()\" :id=\"$id(&#39;switch&#39;)\" :class=\"{ &#39;text-foreground&#39;: checked, &#39;text-muted-foreground&#39;: !checked }\" class=\"text-sm select-none\" x-cloak>")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<label @click=\"$refs.switchButton.click(); $refs.switchButton.focus()\" :id=\"$id(&#39;switch&#39;)\" :class=\"{ &#39;text-foreground&#39;: checked, &#39;text-muted-foreground&#39;: !checked, &#39;opacity-50 cursor-not-allowed&#39;: disabled }\" class=\"text-sm select-none\" x-cloak>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var10 string
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(props.LabelRight)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/toggle.templ`, Line: 127, Col: 22}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/toggle.templ`, Line: 129, Col: 22}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
if templ_7745c5c3_Err != nil {