Live Storybook

Set assigns

Technical component illustrating how templates and assign/toggle can be used together.

Hello story Open in playground
label: hello / status: false 
<div id="template-component-single-hello" class="space-y-2" >
  <button class="btn" id="set-foo" phx-click={JS.push("psb-assign", value: %{label: "foo"})}>Set label to foo</button>
  <button class="btn" id="set-bar" phx-click={JS.push("psb-assign", value: %{label: "bar"})}>Set label to bar</button>
  <button class="btn" id="toggle-status" phx-click={JS.push("psb-toggle", value: %{attr: :status})}>Toggle status</button>
  <button class="btn" id="set-status-true" phx-click={JS.push("psb-assign", value: %{status: true})}>Set status to true</button>
  <button class="btn" id="set-status-false" phx-click={JS.push("psb-assign", value: %{status: false})}>Set status to false</button>
  <div class="mt-2">
    <.template_component label="hello" theme={:default}/>
  </div>
</div>
World story Open in playground
label: world / status: false 
<div id="template-component-single-world" class="space-y-2" >
  <button class="btn" id="set-foo" phx-click={JS.push("psb-assign", value: %{label: "foo"})}>Set label to foo</button>
  <button class="btn" id="set-bar" phx-click={JS.push("psb-assign", value: %{label: "bar"})}>Set label to bar</button>
  <button class="btn" id="toggle-status" phx-click={JS.push("psb-toggle", value: %{attr: :status})}>Toggle status</button>
  <button class="btn" id="set-status-true" phx-click={JS.push("psb-assign", value: %{status: true})}>Set status to true</button>
  <button class="btn" id="set-status-false" phx-click={JS.push("psb-assign", value: %{status: false})}>Set status to false</button>
  <div class="mt-2">
    <.template_component label="world" theme={:default}/>
  </div>
</div>
Value template Open in playground
label: hey / status: false 
<.template_component label={"hey"} theme={:default}/>
Group Open in playground
label: one / status: false
label: two / status: false 
<div id="template-component-group-one" class="space-y-2" >
  <button class="btn" id="set-foo" phx-click={JS.push("psb-assign", value: %{label: "foo"})}>Set label to foo</button>
  <button class="btn" id="set-bar" phx-click={JS.push("psb-assign", value: %{label: "bar"})}>Set label to bar</button>
  <button class="btn" id="toggle-status" phx-click={JS.push("psb-toggle", value: %{attr: :status})}>Toggle status</button>
  <button class="btn" id="set-status-true" phx-click={JS.push("psb-assign", value: %{status: true})}>Set status to true</button>
  <button class="btn" id="set-status-false" phx-click={JS.push("psb-assign", value: %{status: false})}>Set status to false</button>
  <div class="mt-2">
    <.template_component label="one" theme={:default}/>
  </div>
</div>

<div id="template-component-group-two" class="space-y-2" >
  <button class="btn" id="set-foo" phx-click={JS.push("psb-assign", value: %{label: "foo"})}>Set label to foo</button>
  <button class="btn" id="set-bar" phx-click={JS.push("psb-assign", value: %{label: "bar"})}>Set label to bar</button>
  <button class="btn" id="toggle-status" phx-click={JS.push("psb-toggle", value: %{attr: :status})}>Toggle status</button>
  <button class="btn" id="set-status-true" phx-click={JS.push("psb-assign", value: %{status: true})}>Set status to true</button>
  <button class="btn" id="set-status-false" phx-click={JS.push("psb-assign", value: %{status: false})}>Set status to false</button>
  <div class="mt-2">
    <.template_component label="two" theme={:default}/>
  </div>
</div>