Cfa Ui Components

Previews

No matching results.

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
<form id="currency-demo-form" action="/" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="lIDOgZZgEEE6A7AEnpL4fS2LjqEvi9L3la3bJf0H2lCTqsJ1sdvpHBbN-2DXOHVxEXoPMVfedCqfPgCgNtaqxA" autocomplete="off" />
  <div class="currency-field cfa-stack-sm">
    <label class="label block" for="form_component_preview_test_model_my_number">My Number</label>
    <div class="relative max-w-sm">
      <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-cfa-med font-bold text-text-body-secondary">
        $
      </span>
      <input class="w-full !pl-cfa-xl" inputmode="decimal" placeholder="0.00" x-data="" x-mask:dynamic="$money" x-init="$el.form?.addEventListener('formdata', (e) => { e.formData.set($el.name, $el.value.replace(/[^0-9.]/g, '')) }); $el.dispatchEvent(new Event('input'))" aria-required="true" min="0" type="text" name="form_component_preview_test_model[my_number]" id="form_component_preview_test_model_my_number" />
    </div>
  </div>
  <button type="submit" class="mt-4 px-4 py-2 bg-zinc-900 text-white rounded">Submit</button>
</form>
<div class="mt-6">
  <p class="text-sm text-zinc-600">Submitted FormData (visible field value is preserved):</p>
  <pre id="currency-demo-output" class="mt-2 p-3 bg-zinc-100 text-sm whitespace-pre-wrap">(submit the form)</pre>
</div>
<script>
  (() => {
    const form = document.getElementById('currency-demo-form');
    const out = document.getElementById('currency-demo-output');
    form.addEventListener('submit', (e) => {
      e.preventDefault();
      const data = new FormData(form);
      const lines = [...data.entries()].map(([k, v]) => `${k} = ${JSON.stringify(v)}`);
      out.textContent = lines.join('\n') || '(empty)';
    });
  })();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%= form_with(url: "/", method: :post, model: FormComponentPreview::TestModel.new, html: { id: "currency-demo-form" }) do |f| %>
  <%= render(InputCurrencyComponent.new(form: f, method: :my_number, label: I18n.t("preview.my_number"), input_attrs: {min: 0})) %>
  <button type="submit" class="mt-4 px-4 py-2 bg-zinc-900 text-white rounded">Submit</button>
<% end %>
<div class="mt-6">
  <p class="text-sm text-zinc-600">Submitted FormData (visible field value is preserved):</p>
  <pre id="currency-demo-output" class="mt-2 p-3 bg-zinc-100 text-sm whitespace-pre-wrap">(submit the form)</pre>
</div>
<script>
  (() => {
    const form = document.getElementById('currency-demo-form');
    const out = document.getElementById('currency-demo-output');
    form.addEventListener('submit', (e) => {
      e.preventDefault();
      const data = new FormData(form);
      const lines = [...data.entries()].map(([k, v]) => `${k} = ${JSON.stringify(v)}`);
      out.textContent = lines.join('\n') || '(empty)';
    });
  })();
</script>

No notes provided.

No params configured.