x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<div class="flex flex-col gap" style="max-inline-size: 400px" data-controller="tabs">
<div class="tabs__list" data-action="keydown.left->tabs#prev keydown.right->tabs#next" role="tablist">
<button id="trigger_account" class="btn btn--tab" data-tabs-target="button" data-action="tabs#select" role="tab" aria-controls="tab_account">Account</button>
<button id="trigger_password" class="btn btn--tab" data-tabs-target="button" data-action="tabs#select" role="tab" aria-controls="tab_password">Password</button>
</div>
<div hidden id="tab_account" data-tabs-target="tab" role="tabpanel" tabindex="0" aria-labelledby="trigger_account">
<form class="card flex flex-col gap" action="/lookbook/home/index" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="utIQvnkp56gyLP6yypUbqhmNmHJ6f6HmoVnekXkMqFJtFIICXklCH3KU5Mo_s7mikrF9UDogrLUjoNDSO2tqDg" autocomplete="off" />
<div class="flex flex-col gap-half">
<h3 class="text-2xl font-semibold leading-none">Account</h3>
<p class="text-sm text-subtle">Make changes to your account here. Click save when you're done.</p>
</div>
<div class="flex flex-col gap mb-2">
<div class="flex flex-col gap-half">
<label class="text-sm font-medium leading-none" for="name">Name</label>
<input value="Lázaro Nixon" class="input" type="text" name="name" id="name" />
</div>
<div class="flex flex-col gap-half">
<label class="text-sm font-medium leading-none" for="username">Username</label>
<input value="@lazaronixon" class="input" type="text" name="username" id="username" />
</div>
</div>
<div class="flex items-center">
<input type="submit" name="commit" value="Save changes" class="btn btn--primary" data-disable-with="Save changes" />
</div>
</form>
</div>
<div hidden id="tab_password" data-tabs-target="tab" role="tabpanel" tabindex="0" aria-labelledby="trigger_password">
<form class="card flex flex-col gap" action="/lookbook/home/index" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="Ze6ktJXSlJGFgdd1ksNu487Z9O1k-nhgmPmXF-D3mQOyKDYIsrIxJsU5zQ1n5czrReURzySldTMaAJlUopBbXw" autocomplete="off" />
<div class="flex flex-col gap-half">
<h3 class="text-2xl font-semibold leading-none">Password</h3>
<p class="text-sm text-subtle">Change your password here. After saving, you'll be logged out.</p>
</div>
<div class="flex flex-col gap mb-2">
<div class="flex flex-col gap-half">
<label class="text-sm font-medium leading-none" for="current_password">Current password</label>
<input class="input" type="password" name="current_password" id="current_password" />
</div>
<div class="flex flex-col gap-half">
<label class="text-sm font-medium leading-none" for="new_password">New password</label>
<input class="input" type="password" name="new_password" id="new_password" />
</div>
</div>
<div class="flex items-center">
<input type="submit" name="commit" value="Save password" class="btn btn--primary" data-disable-with="Save password" />
</div>
</form>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="flex flex-col gap" style="max-inline-size: 400px" data-controller="tabs">
<div class="tabs__list" data-action="keydown.left->tabs#prev keydown.right->tabs#next" role="tablist">
<button id="trigger_account" class="btn btn--tab" data-tabs-target="button" data-action="tabs#select" role="tab" aria-controls="tab_account">Account</button>
<button id="trigger_password" class="btn btn--tab" data-tabs-target="button" data-action="tabs#select" role="tab" aria-controls="tab_password">Password</button>
</div>
<div hidden id="tab_account" data-tabs-target="tab" role="tabpanel" tabindex="0" aria-labelledby="trigger_account">
<%= render "account_form" %>
</div>
<div hidden id="tab_password" data-tabs-target="tab" role="tabpanel" tabindex="0" aria-labelledby="trigger_password">
<%= render "password_form" %>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.tabs__list {
background-color: var(--color-border-light);
block-size: var(--size-10);
border-radius: var(--rounded-md);
color: var(--color-text-subtle);
display: inline-flex;
gap: var(--size-2);
padding: var(--size-1);
}
.btn--tab {
--btn-background: transparent;
--btn-border-color: transparent;
--btn-hover-color: transparent;
--btn-inline-size: var(--size-full);
&[aria-selected=true] {
--btn-background: var(--color-bg);
--btn-hover-color: var(--color-bg);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = [ "button", "tab" ]
static values = { index: Number }
connect() {
this.#showCurrentTab()
}
select({ target }) {
this.indexValue = this.buttonTargets.indexOf(target)
this.#showCurrentTab()
}
prev() {
if (this.indexValue > 0) {
this.indexValue--
this.#showCurrentTab()
this.#focusCurrentButton()
}
}
next() {
if (this.indexValue < this.#lastIndex) {
this.indexValue++
this.#showCurrentTab()
this.#focusCurrentButton()
}
}
#showCurrentTab(shouldFocus) {
this.buttonTargets.forEach((element, index) => {
element.ariaSelected = index === this.indexValue
element.tabIndex = index === this.indexValue ? 0 : -1
})
this.tabTargets.forEach((element, index) => {
element.hidden = index !== this.indexValue
})
}
#focusCurrentButton() {
this.buttonTargets[this.indexValue].focus()
}
get #lastIndex() {
return this.tabTargets.length -1
}
}