Anchor ViewComponents

Pages

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<form class="flex flex-col gap-4" data-controller="conditional-input" data-multi-select-target="input" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="YBrkLT-3MKriflRmbmeUunBHzI-Hdj3PbqRQC-tAjJu5VAe_ffFlYEz8MYQ5hMhvxg-PH6HP8awRZIleaFAfHg" autocomplete="off" />
  <div class="space-y-3">
    <label class="font-semibold text-base text-primary" data-testid="label-food-options" required="required" for="food_options">Select food option</label>
    <div class="relative">
      <select class="form-input min-h-[40px] resize-none block w-full rounded disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base" data-testid="select-food-options" data-action="change->conditional-input#toggle" data-conditional-input-target="input" onchange="hideParamsFromFormSubmit()" name="food_options" id="food_options"><option value="">Select</option>
        <option value="dairy">Dairy</option>
        <option value="fruit">Fruit</option>
        <option value="meat">Meat</option>
        <option value="vegetable">Vegetable</option></select>
      <!-- Source: Iconoir, added via `bin/add_icon` -->
      <svg width="20" height="20" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0 absolute top-1/2 -translate-y-1/2 text-secondary pointer-events-none right-4" aria-hidden="true">
        <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
    </div>
  </div>
  
  <div hidden="hidden" data-conditional-input-target="container" data-conditional-input-show-if="[{"food_options":["fruit","vegetable"]}]" data-testid="form-field-produce">
    <label class="font-semibold text-base text-primary" data-testid="label-produce-options" required="required" for="produce_options">Select produce option</label>
    <div class="relative">
      <select class="form-input min-h-[40px] resize-none block w-full rounded disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base" data-testid="select-produce-options" data-action="change->conditional-input#toggle" data-conditional-input-target="input" onchange="hideParamsFromFormSubmit()" name="produce_options" id="produce_options"><option value="">Select</option>
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="celery">Celery</option>
        <option value="date">Date</option>
        <option value="eggplant">Eggplant</option></select>
      <!-- Source: Iconoir, added via `bin/add_icon` -->
      <svg width="20" height="20" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0 absolute top-1/2 -translate-y-1/2 text-secondary pointer-events-none right-4" aria-hidden="true">
        <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
    </div>
  </div>
  
  <div hidden="hidden" class="space-y-3" data-conditional-input-target="container" data-conditional-input-show-if="[{"food_options":["dairy"]}]" data-testid="form-field-dairy">
    <label class="font-semibold text-base text-primary" data-testid="label-dairy-options" required="required" for="dairy_options">Select dairy option</label>
    <div class="relative">
      <select class="form-input min-h-[40px] resize-none block w-full rounded disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base" data-testid="select-dairy-options" name="dairy_options" id="dairy_options"><option value="">Select</option>
        <option value="butter">Butter</option>
        <option value="cheese">Cheese</option>
        <option selected="selected" value="milk">Milk</option>
        <option value="yogurt">Yogurt</option></select>
      <!-- Source: Iconoir, added via `bin/add_icon` -->
      <svg width="20" height="20" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0 absolute top-1/2 -translate-y-1/2 text-secondary pointer-events-none right-4" aria-hidden="true">
        <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
    </div>
  </div>
  
  <div hidden="hidden" data-conditional-input-target="container" data-conditional-input-show-if="[{"food_options":["vegetable","dairy"]},{"produce_options":["apple"]}]" data-testid="form-field-comment">
    <label class="font-semibold text-base text-primary" data-testid="label-comment" required="required" for="comment">Comment</label>
    <div>
      <textarea class="form-input min-h-[40px] resize-none block w-full rounded h-[120px] disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base" data-testid="text-area-comment" name="comment" id="comment">
Describe your selection here</textarea>
    </div>
  </div>
  
  <div hidden="hidden" data-conditional-input-target="container" data-conditional-input-show-if="[{"food_options":["fruit"],"produce_options":["apple"]}]" data-testid="form-field-comment">
    <label class="font-semibold text-base text-primary" data-testid="label-coupon-code" required="required" for="coupon_code">Coupon code</label>
    <div data-testid="form-field-input-coupon-code"><input class="form-input min-h-[40px] resize-none block w-full rounded disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base" autocomplete="off" data-action="change->conditional-input#toggle" data-conditional-input-target="input" placeholder="Enter you coupon code" onchange="hideParamsFromFormSubmit()" type="text" name="coupon_code" id="coupon_code" /></div>
  </div>
  
  <div hidden="hidden" data-conditional-input-target="container" data-conditional-input-show-if="[{"coupon_code":["abc123","xyz789"]}]" data-testid="form-field-valid-coupon">
    <p class="text-green-700">
      <strong>Valid coupon code!</strong>
    </p>
    <p>
      5% off your order
    </p>
  </div>
  <button id="submit" class="btn mt-6">Submit</button>
</form>
<div id="output-params-container" hidden class="mt-6">
  <h3 class="text-lg font-bold">Form Params</h3>
  <code id="output-params"></code>
</div>
<script>
  const submit = document.querySelector("#submit");
  submit.addEventListener("click", showParamsFromFormSubmit, false);
  function showParamsFromFormSubmit(event) {
    event.preventDefault();
    const form = document.querySelector('form');
    const {authenticity_token, ...data } = Object.fromEntries(new FormData(form).entries());
    document.getElementById("output-params").innerHTML = JSON.stringify(data, null, 2);
    document.getElementById("output-params-container").hidden = false;
  }
  function hideParamsFromFormSubmit() {
    document.getElementById("output-params").innerHTML = "";
    document.getElementById("output-params-container").hidden = true;
  }
</script>
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<%= anchor_form_with(
  url: false,
  data: {
    controller: "conditional-input",
    multi_select_target: "input"
  }
) do |form| %>
  <%= tag.div(class: "space-y-3") do %>
    <%= form.label :food_options, "Select food option", required: true %>
    <%= form.select(
    :food_options,
      options_for_select(
        [
          ["Dairy", "dairy"],
          ["Fruit", "fruit"],
          ["Meat", "meat"],
          ["Vegetable", "vegetable"],
        ],
      ),
      { include_blank: "Select"},
      data: {
        action: "change->conditional-input#toggle",
        conditional_input_target: "input",
      },
      onchange: "hideParamsFromFormSubmit()",
    ) %>
  <% end %>
  <%= tag.div(
    hidden: true,
    data: {
      conditional_input_target: "container",
      conditional_input_show_if: [
        {"food_options" => ["fruit", "vegetable"]}
      ],
      testid: "form-field-produce"
    }
  ) do %>
    <%= form.label :produce_options, "Select produce option", required: true %>
    <%= form.select(
      :produce_options,
      options_for_select([
        ["Apple", "apple"],
        ["Banana", "banana"],
        ["Celery", "celery"],
        ["Date", "date"],
        ["Eggplant", "eggplant"],
      ]),
      { include_blank: "Select"},
      data: {
        action: "change->conditional-input#toggle",
        conditional_input_target: "input",
      },
      onchange: "hideParamsFromFormSubmit()",
    ) %>
  <% end %>
  <%= tag.div(
    hidden: true,
    class: "space-y-3",
    data: {
      conditional_input_target: "container",
      conditional_input_show_if: [
        {"food_options" => ["dairy"]}
      ],
      testid: "form-field-dairy"
    }
  ) do %>
    <%= form.label :dairy_options, "Select dairy option", required: true %>
    <%= form.select(
      :dairy_options,
      options_for_select([
        ["Butter", "butter"],
        ["Cheese", "cheese"],
        ["Milk", "milk"],
        ["Yogurt", "yogurt"],
      ], "milk"),
      { include_blank: "Select" },
    ) %>
  <% end %>
  <%= tag.div(
    hidden: true,
    data: {
      conditional_input_target: "container",
      conditional_input_show_if: [
        {"food_options": ["vegetable", "dairy"]},
        {"produce_options": ["apple"]},
      ],
      testid: "form-field-comment"
    }
  ) do %>
    <%= form.label :comment, "Comment", required: true %>
    <%= form.text_area :comment, value: "Describe your selection here" %>
  <% end %>
  <%= tag.div(
    hidden: true,
    data: {
      conditional_input_target: "container",
      conditional_input_show_if: [
        {"food_options": ["fruit"], "produce_options": ["apple"]},
      ],
      testid: "form-field-comment"
    }
  ) do %>
    <%= form.label :coupon_code, "Coupon code", required: true %>
    <%= form.text_field(
      :coupon_code,
      placeholder: "Enter you coupon code",
      data: {
        action: "change->conditional-input#toggle",
        conditional_input_target: "input",
      },
      onchange: "hideParamsFromFormSubmit()"
    ) %>
  <% end %>
  <%= tag.div(
    hidden: true,
    data: {
      conditional_input_target: "container",
      conditional_input_show_if: [
        {"coupon_code": ["abc123", "xyz789"]},
      ],
      testid: "form-field-valid-coupon"
    }
  ) do %>
    <p class="text-green-700">
      <strong>Valid coupon code!</strong>
    </p>
    <p>
      5% off your order
    </p>
  <% end %>
  <button id="submit" class="btn mt-6">Submit</button>
<% end %>
<div id="output-params-container" hidden class="mt-6">
  <h3 class="text-lg font-bold">Form Params</h3>
  <code id="output-params"></code>
</div>
<script>
  const submit = document.querySelector("#submit");
  submit.addEventListener("click", showParamsFromFormSubmit, false);
  function showParamsFromFormSubmit(event) {
    event.preventDefault();
    const form = document.querySelector('form');
    const {authenticity_token, ...data } = Object.fromEntries(new FormData(form).entries());
    document.getElementById("output-params").innerHTML = JSON.stringify(data, null, 2);
    document.getElementById("output-params-container").hidden = false;
  }
  function hideParamsFromFormSubmit() {
    document.getElementById("output-params").innerHTML = "";
    document.getElementById("output-params-container").hidden = true;
  }
</script>

No notes provided.

No params configured.