rule-summary

A read-only view of a rule, with groups nested inside groups.

Example

All of these
  • SSoT user.country is NZ
  • Any of these
    • user.age over 40
    • entries.count at least 3

Laravel

<x-admin::rule-summary :rules="['match' => 'all', 'conditions' => [
    ['source' => 'SSoT', 'field' => 'user.country', 'operator' => 'is', 'value' => 'NZ'],
    ['match' => 'any', 'conditions' => [
        ['field' => 'user.age', 'operator' => 'over', 'value' => 40],
        ['field' => 'entries.count', 'operator' => 'at least', 'value' => 3],
    ]],
]]" />

Props

PropRequiredDefaultOptions
rules[]
nestedfalse

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { RuleSummary } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<div class="adm-rule-summary">
    <span class="adm-badge adm-badge--neutral">All of these</span>
            <ul class="adm-rule-summary__list">
                            <li>
                                            <span class="adm-rule-summary__condition">
                            <span class="adm-badge adm-badge--outline">SSoT</span>
                            <code class="adm-code">user.country</code>
                            <span class="adm-subtle">is</span>
                            <strong class="adm-rule-summary__value">NZ</strong>                        </span>
                                    </li>
                            <li>
                                            <div class="adm-rule-summary adm-rule-summary--nested">
    <span class="adm-badge adm-badge--neutral">Any of these</span>
            <ul class="adm-rule-summary__list">
                            <li>
                                            <span class="adm-rule-summary__condition">
                                                        <code class="adm-code">user.age</code>
                            <span class="adm-subtle">over</span>
                            <strong class="adm-rule-summary__value">40</strong>                        </span>
                                    </li>
                            <li>
                                            <span class="adm-rule-summary__condition">
                                                        <code class="adm-code">entries.count</code>
                            <span class="adm-subtle">at least</span>
                            <strong class="adm-rule-summary__value">3</strong>                        </span>
                                    </li>
                    </ul>
    </div>
                                    </li>
                    </ul>
    </div>