<commit_before><template>
    <div class="ui container">
        <h1 class="ui dividing header">Popup</h1>
    
        <p>Popup component, did you note that semantic-ui has a Popup module that you can use without javascript? But, if you need something more "complex", This is something helpful.</p>
        <p>
            <a href="https://semantic-ui.com/modules/popup.html"> you can see all documentation here</a>
        </p>
    
        <div class="ui button popup-example-element">Try here the beautiful Popup</div>
    
        <div class="ui grid">
            <div class="three wide column">
                <div class="ui sub header">Position</div>
                <dropdown dropdownId="dropdown-positions" :options="positions" :value.sync="position" customClass="large fluid label"></dropdown>
            </div>
            <div class="two wide column">
                <div class="ui sub header">Trigger</div>
                <dropdown dropdownId="dropdown-triggers" :options="triggers" :value.sync="trigger" customClass="large fluid label"></dropdown>
            </div>
            <div class="three wide column">
                <div class="ui sub header">Transitions</div>
                <dropdown dropdownId="dropdown-transitions" :options="transitions" :value.sync="transition" customClass="large fluid label"></dropdown>
            </div>
        </div>
    
        <h3 class="ui dividing header">Usage</h3>
        <div class="ui segment code">
            <pre>
            import { Popup } from 'semvue';

            export default {
                components: {
                    Popup,
                },
            }
            </pre>
        </div>
    
        <div class="ui segment code">
            <pre>
            &ltpopup popupId="nice-popup" :trigger="trigger.value" targetSelector=".popup-example-element" :options="popupOptions" customClass="fluid"&gt
                *your custom popup html here*
            &lt/popup&gt
            </pre>
        </div>
    
        <h3 class="ui dividing header">Props</h3>
        <table class="ui definition table">
            <thead>
                <tr>
                    <th></th>
                    <th>Type</th>
                    <th>Required</th>
                    <th>Default</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>popupId</td>
                    <td>String</td>
                    <td>Yes</td>
                    <td>-</td>
                    <td>Is a div id for popup (used to get your custom complex popup and start it on semantic-ui)</td>
                </tr>
                <tr>
                    <td>trigger</td>
                    <td>String</td>
                    <td>Yes</td>
                    <td>-</td>
                    <td>Used to toggle popup on element.
                        <p>
                            <a href="https://semantic-ui.com/modules/popup.html"> you can see all popup triggers here</a>
                        </p>
                        <p>*Attention, according on semantic-ui docs, sometimes your overrides on options will need diferent styles (e.g min-width) on your popup</p>
                    </td>
                </tr>
                <tr>
                    <td>targetSelector</td>
                    <td>String</td>
                    <td>Yes</td>
                    <td>-</td>
                    <td>Selector of element where popup should appear (could be #elementId or .element-class)</td>
                </tr>
                <tr>
                    <td>curstomClass</td>
                    <td>String</td>
                    <td>No</td>
                    <td>String empty</td>
                    <td>Used to put any aditional class inside rating div </br>
                        e.g. class="ui customClass popup"
                    </td>
                </tr>
                <tr>
                    <td>options</td>
                    <td>Object</td>
                    <td>No</td>
                    <td>Object Empty</td>
                    <td>Overrides component options.
                        <a href="https://semantic-ui.com/modules/popup.html"> You can see all options here</a>
                    </td>
                </tr>
            </tbody>
        </table>
    
        <popup popupId="nice-popup" :trigger="trigger.value" targetSelector=".popup-example-element" :options="popupOptions" customClass="fluid">
            <div class="ui three column divided center aligned grid">
                <div class="column">
                    <h4 class="ui header">Selected Position</h4>
                    <p>{{ position.text }}</p>
                </div>
                <div class="column">
                    <h4 class="ui header">Selected Trigger</h4>
                    <p>{{ trigger.text }}</p>
                </div>
                <div class="column">
                    <h4 class="ui header">Selected Transition</h4>
                    <p>{{ transition.text }}</p>
                </div>
            </div>
        </popup>
    </div>
</template>

<script>
import { Dropdown, Popup } from '@/semvue';

export default {
    name: 'PopupDoc',<commit_msg>Fix popup size to show all positions on demo Add position warn<commit_after><template>
    <div class="ui container">
        <h1 class="ui dividing header">Popup</h1>
    
        <p>Popup component, did you note that semantic-ui has a Popup module that you can use without javascript? But, if you need something more "complex", This is something helpful.</p>
        <p>
            <a href="https://semantic-ui.com/modules/popup.html"> you can see all documentation here</a>
        </p>
    
        <div class="ui button popup-example-element">Try here the beautiful Popup</div>
    
        <div class="ui grid">
            <div class="three wide column">
                <div class="ui sub header">Position*</div>
                <dropdown dropdownId="dropdown-positions" :options="positions" :value.sync="position" customClass="large fluid label"></dropdown>
            </div>
            <div class="two wide column">
                <div class="ui sub header">Trigger</div>
                <dropdown dropdownId="dropdown-triggers" :options="triggers" :value.sync="trigger" customClass="large fluid label"></dropdown>
            </div>
            <div class="three wide column">
                <div class="ui sub header">Transitions</div>
                <dropdown dropdownId="dropdown-transitions" :options="transitions" :value.sync="transition" customClass="large fluid label"></dropdown>
            </div>
        </div>
        <p>* Position: If space is not available, it will automatically search for a similar alternative position to use.</p>

        <h3 class="ui dividing header">Usage</h3>
        <div class="ui segment code">
            <pre>
            import { Popup } from 'semvue';

            export default {
                components: {
                    Popup,
                },
            }
            </pre>
        </div>
    
        <div class="ui segment code">
            <pre>
            &ltpopup popupId="nice-popup" :trigger="trigger.value" targetSelector=".popup-example-element" :options="popupOptions" customClass="fluid"&gt
                *your custom popup html here*
            &lt/popup&gt
            </pre>
        </div>
    
        <h3 class="ui dividing header">Props</h3>
        <table class="ui definition table">
            <thead>
                <tr>
                    <th></th>
                    <th>Type</th>
                    <th>Required</th>
                    <th>Default</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>popupId</td>
                    <td>String</td>
                    <td>Yes</td>
                    <td>-</td>
                    <td>Is a div id for popup (used to get your custom complex popup and start it on semantic-ui)</td>
                </tr>
                <tr>
                    <td>trigger</td>
                    <td>String</td>
                    <td>Yes</td>
                    <td>-</td>
                    <td>Used to toggle popup on element.
                        <p>
                            <a href="https://semantic-ui.com/modules/popup.html"> you can see all popup triggers here</a>
                        </p>
                        <p>*Attention, according on semantic-ui docs, sometimes your overrides on options will need diferent styles (e.g min-width) on your popup</p>
                    </td>
                </tr>
                <tr>
                    <td>targetSelector</td>
                    <td>String</td>
                    <td>Yes</td>
                    <td>-</td>
                    <td>Selector of element where popup should appear (could be #elementId or .element-class)</td>
                </tr>
                <tr>
                    <td>curstomClass</td>
                    <td>String</td>
                    <td>No</td>
                    <td>String empty</td>
                    <td>Used to put any aditional class inside rating div </br>
                        e.g. class="ui customClass popup"
                    </td>
                </tr>
                <tr>
                    <td>options</td>
                    <td>Object</td>
                    <td>No</td>
                    <td>Object Empty</td>
                    <td>Overrides component options.
                        <a href="https://semantic-ui.com/modules/popup.html"> You can see all options here</a>
                    </td>
                </tr>
            </tbody>
        </table>
    
        <popup popupId="nice-popup" :trigger="trigger.value" targetSelector=".popup-example-element" :options="popupOptions" customClass="flowing">
            <div class="ui horizontal segments">
                <div class="ui center aligned segment">
                    <h4 class="ui header">Selected Position</h4>
                    <p>{{ position.text }}</p>
                </div>
                <div class="ui center aligned segment">
                    <h4 class="ui header">Selected Trigger</h4>
                    <p>{{ trigger.text }}</p>
                </div>
                <div class="ui center aligned segment">
                    <h4 class="ui header">Selected Transition</h4>
                    <p>{{ transition.text }}</p>
                </div>
            </div>
        </popup>
    </div>
</template>

<script>
import { Dropdown, Popup } from '@/semvue';

export default {
    name: 'PopupDoc',
{'fraction_non_alphanumeric': 0.12483745123537061, 'fraction_numerical': 0.002229240200631618, 'mean_word_length': 1.297205035203755, 'pattern_counts': {'":': 0, '<': 317, '<?xml version=': 0, '>': 317, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2616482', 'n_tokens_mistral': 2906, 'n_tokens_neox': 2686, 'n_words': 729}