glib-web 5.0.4 → 5.0.5

data/app/views/json_ui/garage/test_page/fields_radio.json.jbuilder

@@ -0,0 +1,293 @@
+json.title 'Test Page (Fields Radio)'
+
+page = json_ui_page json
+
+render 'json_ui/garage/test_page/header', json: json, page: page
+
+page.body(
+  childViews: ->(body) do
+
+    body.panels_responsive(
+      padding: glib_json_padding_body,
+      childViews: ->(res) do
+        res.h2 text: 'Fields Radio'
+        res.spacer height: 8
+        res.label text: 'Radio button input used inside a fields_radioGroup to select a single value from a set of options.'
+        res.spacer height: 12
+
+        res.panels_form(
+          url: json_ui_garage_url(path: 'forms/generic_post'),
+          method: 'post',
+          childViews: ->(form) do
+            form.h2 text: 'Overview'
+            form.spacer height: 8
+            form.label text: 'fields_radio must always be nested inside fields_radioGroup. The group manages the name, value, and onChange/onChangeAndLoad callbacks. Each fields_radio carries its own value and label, and optionally an icon or image.'
+            form.spacer height: 12
+            form.hr width: 'matchParent'
+            form.spacer height: 12
+
+            form.h2 text: 'Basic example'
+            form.spacer height: 8
+            form.label text: 'Minimal vertical radio group.'
+            form.spacer height: 8
+            form.fields_radioGroup(
+              id: 'radio_main',
+              name: 'user[gender]',
+              value: 'M',
+              onChange: ->(action) do
+                action.logics_set targetId: 'radio_status', data: { text: 'Status: changed' }
+              end,
+              childViews: ->(group) do
+                group.fields_radio value: 'M', label: 'Male'
+                group.fields_radio value: 'F', label: 'Female'
+                group.fields_radio value: '', label: 'Prefer not to say'
+              end
+            )
+            form.spacer height: 8
+            form.label id: 'radio_status', text: 'Status: idle'
+
+            form.spacer height: 12
+            form.hr width: 'matchParent'
+            form.spacer height: 12
+
+            form.h2 text: 'Variants/props'
+            form.spacer height: 8
+
+            form.h4 text: 'Horizontal layout'
+            form.spacer height: 8
+            form.label text: 'Wrap options in panels_horizontal to lay them out side by side.'
+            form.spacer height: 8
+            form.fields_radioGroup(
+              name: 'user[plan]',
+              value: 'fixed',
+              childViews: ->(group) do
+                group.panels_horizontal(
+                  childViews: ->(h) do
+                    h.fields_radio value: 'hourly', label: 'Hourly rate'
+                    h.spacer width: 20
+                    h.fields_radio value: 'fixed', label: 'Fixed amount'
+                    h.spacer width: 20
+                    h.fields_radio value: 'equity', label: 'Equity only'
+                  end
+                )
+              end
+            )
+
+            form.spacer height: 16
+
+            form.h4 text: 'With icon (featured template)'
+            form.spacer height: 8
+            form.fields_radioGroup(
+              name: 'user[mode]',
+              value: 'edit',
+              childViews: ->(group) do
+                group.panels_horizontal(
+                  childViews: ->(h) do
+                    h.fields_radio value: 'edit', label: 'Edit', icon: { template: 'featured', name: 'edit', size: 40, color: '#d1d1d1' }
+                    h.spacer width: 16
+                    h.fields_radio value: 'view', label: 'View', icon: { template: 'featured', name: 'visibility', size: 40, color: '#d1d1d1' }
+                    h.spacer width: 16
+                    h.fields_radio value: 'delete', label: 'Delete', icon: { template: 'featured', name: 'delete', size: 40, color: '#d1d1d1' }
+                  end
+                )
+              end
+            )
+
+            form.spacer height: 16
+
+            form.h4 text: 'With image (thumbnail and featured templates)'
+            form.spacer height: 8
+            form.fields_radioGroup(
+              name: 'user[choice]',
+              value: 'yes',
+              childViews: ->(group) do
+                group.panels_horizontal(
+                  childViews: ->(h) do
+                    h.fields_radio(
+                      value: 'yes',
+                      label: 'Yes',
+                      image: { template: 'thumbnail', url: 'https://cdn.pixabay.com/photo/2020/08/05/13/12/eco-5465432_1280.png', width: 24, height: 24 }
+                    )
+                    h.spacer width: 16
+                    h.fields_radio(
+                      value: 'no',
+                      label: 'No',
+                      image: { template: 'featured', url: 'https://cdn.pixabay.com/photo/2020/08/05/13/12/eco-5465432_1280.png', width: 80, height: 80 }
+                    )
+                  end
+                )
+              end
+            )
+
+            form.spacer height: 16
+
+            form.h4 text: 'Responsive column layout'
+            form.spacer height: 8
+            form.label text: 'Use panels_responsive + panels_column for card-style radio options.'
+            form.spacer height: 8
+            form.fields_radioGroup(
+              name: 'user[tier]',
+              value: 'pro',
+              width: 'matchParent',
+              childViews: ->(group) do
+                group.panels_responsive(
+                  width: 'matchParent',
+                  childViews: ->(resp) do
+                    resp.panels_column(
+                      width: 'matchParent',
+                      lg: { cols: 4, padding: { x: 6 } },
+                      childViews: ->(col) do
+                        col.fields_radio(
+                          width: 'matchParent',
+                          value: 'free',
+                          label: 'Free',
+                          icon: { template: 'featured', name: 'star_border', size: 36, color: '#9e9e9e' }
+                        )
+                      end
+                    )
+                    resp.panels_column(
+                      width: 'matchParent',
+                      lg: { cols: 4, padding: { x: 6 } },
+                      childViews: ->(col) do
+                        col.fields_radio(
+                          width: 'matchParent',
+                          value: 'pro',
+                          label: 'Pro',
+                          icon: { template: 'featured', name: 'star', size: 36, color: '#fbc02d' }
+                        )
+                      end
+                    )
+                    resp.panels_column(
+                      width: 'matchParent',
+                      lg: { cols: 4, padding: { x: 6 } },
+                      childViews: ->(col) do
+                        col.fields_radio(
+                          width: 'matchParent',
+                          value: 'enterprise',
+                          label: 'Enterprise',
+                          icon: { template: 'featured', name: 'star_rate', size: 36, color: '#1565c0' }
+                        )
+                      end
+                    )
+                  end
+                )
+              end
+            )
+
+            form.spacer height: 12
+            form.hr width: 'matchParent'
+            form.spacer height: 12
+
+            form.h2 text: 'Actions/events'
+            form.spacer height: 8
+            form.label text: 'Programmatically set value on the basic example above using components_set.'
+            form.spacer height: 8
+            form.panels_flow(
+              innerPadding: { bottom: 0 },
+              width: 'matchParent',
+              childViews: ->(flow) do
+                flow.button(
+                  text: 'Select Male',
+                  onClick: ->(action) do
+                    action.runMultiple(
+                      childActions: ->(multiple) do
+                        multiple.components_set targetId: 'radio_main', data: { value: 'M' }
+                        multiple.logics_set targetId: 'radio_status', data: { text: 'Status: set to Male' }
+                      end
+                    )
+                  end
+                )
+                flow.spacer width: 8
+                flow.button(
+                  text: 'Select Female',
+                  onClick: ->(action) do
+                    action.runMultiple(
+                      childActions: ->(multiple) do
+                        multiple.components_set targetId: 'radio_main', data: { value: 'F' }
+                        multiple.logics_set targetId: 'radio_status', data: { text: 'Status: set to Female' }
+                      end
+                    )
+                  end
+                )
+                flow.spacer width: 8
+                flow.button(
+                  text: 'Clear selection',
+                  onClick: ->(action) do
+                    action.runMultiple(
+                      childActions: ->(multiple) do
+                        multiple.components_set targetId: 'radio_main', data: { value: '' }
+                        multiple.logics_set targetId: 'radio_status', data: { text: 'Status: cleared' }
+                      end
+                    )
+                  end
+                )
+              end
+            )
+
+            form.spacer height: 16
+
+            form.h4 text: 'onChangeAndLoad — conditional show/hide'
+            form.spacer height: 8
+            form.label text: 'Toggle a field based on the selected radio value.'
+            form.spacer height: 8
+            form.fields_radioGroup(
+              name: 'user[contact]',
+              value: 'email',
+              onChangeAndLoad: ->(action) do
+                action.runMultiple(
+                  childActions: ->(multiple) do
+                    multiple.logics_set(
+                      targetId: 'contact_email_field',
+                      conditionalData: {
+                    displayed: { '==': [{ 'var': 'user[contact]' }, 'email'] }
+                    }
+                    )
+                    multiple.logics_set(
+                      targetId: 'contact_phone_field',
+                      conditionalData: {
+                    displayed: { '==': [{ 'var': 'user[contact]' }, 'phone'] }
+                    }
+                    )
+                  end
+                )
+              end,
+              childViews: ->(group) do
+                group.panels_horizontal(
+                  childViews: ->(h) do
+                    h.fields_radio value: 'email', label: 'Email'
+                    h.spacer width: 20
+                    h.fields_radio value: 'phone', label: 'Phone'
+                  end
+                )
+              end
+            )
+            form.spacer height: 8
+            form.fields_text id: 'contact_email_field', name: 'user[email]', width: 'matchParent', label: 'Email address', value: ''
+            form.fields_text id: 'contact_phone_field', name: 'user[phone]', width: 'matchParent', label: 'Phone number', value: ''
+
+            form.spacer height: 12
+            form.hr width: 'matchParent'
+            form.spacer height: 12
+
+
+            form.h4 text: 'Single option'
+            form.spacer height: 8
+            form.label text: 'A radio group with only one option acts as a toggle.'
+            form.spacer height: 8
+            form.fields_radioGroup(
+              name: 'user[agree]',
+              value: nil,
+              childViews: ->(group) do
+                group.fields_radio value: 'yes', label: 'I agree to the terms and conditions'
+              end
+            )
+
+
+            form.spacer height: 16
+            form.fields_submit text: 'Submit'
+          end
+        )
+      end
+    )
+  end
+)

data/app/views/json_ui/garage/test_page/fields_rating.json.jbuilder

@@ -2,9 +2,10 @@ json.title 'Test Page (Fields Rating)'
 
 page = json_ui_page json
 
+render 'json_ui/garage/test_page/header', json: json, page: page
+
 page.body(
   childViews: ->(body) do
-    render 'json_ui/garage/test_page/header', view: body
 
     body.panels_responsive(
       padding: glib_json_padding_body,

data/app/views/json_ui/garage/test_page/fields_richText.json.jbuilder

@@ -2,9 +2,10 @@ json.title 'Test Page (Fields RichText)'
 
 page = json_ui_page json
 
+render 'json_ui/garage/test_page/header', json: json, page: page
+
 page.body(
   childViews: ->(body) do
-    render 'json_ui/garage/test_page/header', view: body
 
     body.panels_responsive(
       padding: glib_json_padding_body,

data/app/views/json_ui/garage/test_page/fields_select.json.jbuilder

@@ -2,9 +2,10 @@ json.title 'Test Page (Fields Select Options)'
 
 page = json_ui_page json
 
+render 'json_ui/garage/test_page/header', json: json, page: page
+
 page.body(
   childViews: ->(body) do
-    render 'json_ui/garage/test_page/header', view: body
 
     body.panels_responsive(
       padding: glib_json_padding_body,
@@ -95,7 +96,7 @@ page.body(
                   onClick: ->(action) do
                     action.components_set(
                       targetId: 'select_media',
-                      data: { options: icon_options, value: %w[option1 option3], multiple: true, useChips: true }
+                      data: { options: icon_options, value: %w[option1 option3], multiple: true, useChips: true, maxChipLines: 1, width: 250 }
                     )
                   end
                 )

data/app/views/json_ui/garage/test_page/fields_sign.json.jbuilder

@@ -2,9 +2,10 @@ json.title 'Test Page (Fields Sign)'
 
 page = json_ui_page json
 
+render 'json_ui/garage/test_page/header', json: json, page: page
+
 page.body(
   childViews: ->(body) do
-    render 'json_ui/garage/test_page/header', view: body
 
     body.panels_responsive(
       padding: glib_json_padding_body,

data/app/views/json_ui/garage/test_page/fields_stripeExternalAccount.json.jbuilder

@@ -2,9 +2,10 @@ json.title 'Test Page (Fields Stripe External Account)'
 
 page = json_ui_page json
 
+render 'json_ui/garage/test_page/header', json: json, page: page
+
 page.body(
   childViews: ->(body) do
-    render 'json_ui/garage/test_page/header', view: body
 
     body.panels_responsive(
       padding: glib_json_padding_body,

data/app/views/json_ui/garage/test_page/fields_stripeToken.json.jbuilder

@@ -2,9 +2,10 @@ json.title 'Test Page (Fields Stripe Token)'
 
 page = json_ui_page json
 
+render 'json_ui/garage/test_page/header', json: json, page: page
+
 page.body(
   childViews: ->(body) do
-    render 'json_ui/garage/test_page/header', view: body
 
     body.panels_responsive(
       padding: glib_json_padding_body,

data/app/views/json_ui/garage/test_page/fields_text.json.jbuilder

@@ -0,0 +1,312 @@
+json.title 'Test Page (Fields Text)'
+
+page = json_ui_page json
+
+render 'json_ui/garage/test_page/header', json: json, page: page
+
+page.body(
+  childViews: ->(body) do
+
+    body.panels_responsive(
+      padding: glib_json_padding_body,
+      childViews: ->(res) do
+        res.h2 text: 'Fields Text'
+        res.spacer height: 8
+        res.label text: 'Family of single-line text inputs: fields_text, fields_email, fields_number, fields_url, and fields_password. All share the same base props; each variant sets a specific input type.'
+        res.spacer height: 12
+
+        res.panels_form(
+          url: json_ui_garage_url(path: 'forms/generic_post'),
+          method: 'post',
+          childViews: ->(form) do
+
+            # ── Overview ──────────────────────────────────────────────────────
+            form.h2 text: 'Overview'
+            form.spacer height: 8
+            form.label text: 'Choose the variant that matches the expected value type. The input type controls the mobile keyboard, browser autofill hints, and native validation on submit.'
+            form.spacer height: 12
+            form.hr width: 'matchParent'
+            form.spacer height: 12
+
+            # ── Basic example ─────────────────────────────────────────────────
+            form.h2 text: 'Basic example'
+            form.spacer height: 8
+            form.label text: 'One instance of each variant with a label and placeholder.'
+            form.spacer height: 8
+
+            form.fields_text(
+              id: 'text_main',
+              name: 'user[name]',
+              label: 'Name (fields_text)',
+              placeholder: 'Full name',
+              width: 'matchParent',
+              onChange: ->(action) do
+                action.logics_set targetId: 'text_status', data: { text: 'Status: changed' }
+              end
+            )
+            form.spacer height: 8
+            form.fields_email(
+              name: 'user[email]',
+              label: 'Email (fields_email)',
+              placeholder: 'you@example.com',
+              width: 'matchParent'
+            )
+            form.spacer height: 8
+            form.fields_number(
+              name: 'user[age]',
+              label: 'Age (fields_number)',
+              placeholder: '0',
+              width: 'matchParent',
+              value: 25
+            )
+            form.spacer height: 8
+            form.fields_url(
+              name: 'user[website]',
+              label: 'Website (fields_url)',
+              placeholder: 'https://example.com',
+              width: 'matchParent'
+            )
+            form.spacer height: 8
+            form.fields_password(
+              name: 'user[password]',
+              label: 'Password (fields_password)',
+              placeholder: 'Enter your password',
+              width: 'matchParent'
+            )
+            form.spacer height: 8
+            form.label id: 'text_status', text: 'Status: idle'
+
+            form.spacer height: 12
+            form.hr width: 'matchParent'
+            form.spacer height: 12
+
+            # ── Variants/props ────────────────────────────────────────────────
+            form.h2 text: 'Variants/props'
+            form.spacer height: 8
+
+            form.h4 text: 'fields_text — styleClasses'
+            form.spacer height: 8
+            form.label text: 'outlined and outlined + rounded.'
+            form.spacer height: 8
+            form.fields_text(
+              name: 'user[text_outlined]',
+              label: 'Outlined',
+              placeholder: 'outlined',
+              width: 'matchParent',
+              styleClasses: ['outlined']
+            )
+            form.spacer height: 8
+            form.fields_text(
+              name: 'user[text_rounded]',
+              label: 'Outlined + rounded',
+              placeholder: 'outlined rounded',
+              width: 'matchParent',
+              styleClasses: ['outlined', 'rounded']
+            )
+
+            form.spacer height: 16
+
+            form.h4 text: 'fields_number — min / max / precision'
+            form.spacer height: 8
+            form.fields_number(
+              name: 'user[percentage]',
+              label: 'Percentage (0–100)',
+              width: 'matchParent',
+              value: 50,
+              min: 0,
+              max: 100
+            )
+            form.spacer height: 8
+            form.fields_number(
+              name: 'user[price]',
+              label: 'Price (2 decimal places)',
+              placeholder: '0.00',
+              width: 'matchParent',
+              value: 9.99,
+              min: 0,
+              precision: 2
+            )
+
+            form.spacer height: 16
+
+            form.h4 text: 'fields_password — outlined + compact'
+            form.spacer height: 8
+            form.fields_password(
+              name: 'user[password_outlined]',
+              label: 'Password (outlined compact)',
+              placeholder: 'Type your password',
+              width: 'matchParent',
+              styleClasses: ['outlined', 'compact']
+            )
+
+            form.spacer height: 16
+
+            form.h4 text: 'Disabled state (fields_text)'
+            form.spacer height: 8
+            form.fields_text(
+              id: 'text_disabled',
+              name: 'user[text_disabled]',
+              label: 'Disabled field',
+              width: 'matchParent',
+              value: 'Cannot edit',
+              disabled: true
+            )
+
+            form.spacer height: 12
+            form.hr width: 'matchParent'
+            form.spacer height: 12
+
+            # ── Actions/events ────────────────────────────────────────────────
+            form.h2 text: 'Actions/events'
+            form.spacer height: 8
+            form.label text: 'Buttons target the basic fields_text field (id: text_main) via components_set and fields_focus.'
+            form.spacer height: 8
+            form.panels_flow(
+              innerPadding: { bottom: 0 },
+              width: 'matchParent',
+              childViews: ->(flow) do
+                flow.button(
+                  text: 'Set value',
+                  onClick: ->(action) do
+                    action.runMultiple(
+                      childActions: ->(multi) do
+                        multi.components_set targetId: 'text_main', data: { value: 'Hello world' }
+                        multi.logics_set targetId: 'text_status', data: { text: 'Status: value set' }
+                      end
+                    )
+                  end
+                )
+                flow.spacer width: 8
+                flow.button(
+                  text: 'Clear value',
+                  onClick: ->(action) do
+                    action.runMultiple(
+                      childActions: ->(multi) do
+                        multi.components_set targetId: 'text_main', data: { value: '' }
+                        multi.logics_set targetId: 'text_status', data: { text: 'Status: cleared' }
+                      end
+                    )
+                  end
+                )
+                flow.spacer width: 8
+                flow.button(
+                  text: 'Focus',
+                  onClick: ->(action) do
+                    action.fields_focus targetId: 'text_main'
+                  end
+                )
+                flow.spacer width: 8
+                flow.button(
+                  text: 'Reset',
+                  onClick: ->(action) do
+                    action.runMultiple(
+                      childActions: ->(multi) do
+                        multi.fields_reset targetId: 'text_main'
+                        multi.logics_set targetId: 'text_status', data: { text: 'Status: reset' }
+                      end
+                    )
+                  end
+                )
+              end
+            )
+
+            form.spacer height: 16
+            form.hr width: 'matchParent'
+            form.spacer height: 16
+
+            # ── Edge/advanced ─────────────────────────────────────────────────
+            form.h2 text: 'Edge/advanced'
+            form.spacer height: 8
+
+            form.h4 text: 'Toggle disabled state'
+            form.spacer height: 8
+            form.panels_flow(
+              innerPadding: { bottom: 0 },
+              width: 'matchParent',
+              childViews: ->(flow) do
+                flow.button(
+                  text: 'Disable',
+                  onClick: ->(action) do
+                    action.components_set targetId: 'text_disabled', data: { disabled: true }
+                  end
+                )
+                flow.spacer width: 8
+                flow.button(
+                  text: 'Enable',
+                  onClick: ->(action) do
+                    action.components_set targetId: 'text_disabled', data: { disabled: nil }
+                  end
+                )
+              end
+            )
+
+            form.spacer height: 16
+
+            form.h4 text: 'fields_number — onChangeAndLoad derived value'
+            form.spacer height: 8
+            form.label text: 'The second field shows the first value divided by 3 (1 decimal place).'
+            form.spacer height: 8
+            form.fields_number(
+              name: 'user[base_value]',
+              label: 'Base value',
+              width: 'matchParent',
+              value: 12,
+              onChangeAndLoad: ->(action) do
+                action.logics_set(
+                  targetId: 'number_derived',
+                  conditionalData: { value: { '/': [{ 'var': 'user[base_value]' }, 3] } }
+                )
+              end
+            )
+            form.spacer height: 8
+            form.fields_number(
+              id: 'number_derived',
+              name: 'user[derived_value]',
+              label: 'Derived value (÷ 3)',
+              width: 'matchParent',
+              precision: 1,
+              disabled: true
+            )
+
+            form.spacer height: 16
+
+            form.h4 text: 'fields_password — onChangeAndLoad strength hint'
+            form.spacer height: 8
+            form.label text: 'Show a hint once the password reaches 8 characters.'
+            form.spacer height: 8
+            form.fields_password(
+              name: 'user[password_live]',
+              label: 'Password strength check',
+              placeholder: 'Type a password...',
+              width: 'matchParent',
+              onChangeAndLoad: ->(action) do
+                action.runMultiple(
+                  childActions: ->(multi) do
+                    multi.logics_set(
+                      targetId: 'password_hint_strong',
+                      conditionalData: {
+                        displayed: { '>=': [{ 'strlen': { 'var': 'user[password_live]' } }, 8] }
+                      }
+                    )
+                    multi.logics_set(
+                      targetId: 'password_hint_weak',
+                      conditionalData: {
+                        displayed: { '<': [{ 'strlen': { 'var': 'user[password_live]' } }, 8] }
+                      }
+                    )
+                  end
+                )
+              end
+            )
+            form.spacer height: 4
+            form.label id: 'password_hint_strong', text: 'Password length looks good', displayed: false
+            form.label id: 'password_hint_weak', text: 'Password must be at least 8 characters', displayed: true
+
+            form.spacer height: 16
+            form.fields_submit text: 'Submit'
+          end
+        )
+      end
+    )
+  end
+)