<commit_before><template>
    <div class="container">
        <h1 class="title is-spaced">Modal</h1>
        <h2 class="subtitle">Classic modal overlay to include any content you may need</h2>
        <hr>

        <div class="block">
            <button class="button is-primary is-medium" @click="isImageModalActive = true">Launch image modal</button>
            <button class="button is-primary is-medium" @click="isCardModalActive = true">Launch card modal</button>
        </div>
        <b-modal :active.sync="isImageModalActive">
            <p class="image is-4by3">
                <img src="static/placeholder-1280x960.png">
            </p>
        </b-modal>
        <b-modal :active.sync="isCardModalActive" :width="640">
            <div class="card">
                <div class="card-image">
                    <figure class="image is-4by3">
                        <img src="static/placeholder-1280x960.png" alt="Image">
                    </figure>
                </div>
                <div class="card-content">
                    <div class="media">
                        <div class="media-left">
                            <figure class="image is-48x48">
                                <img src="static/placeholder-1280x960.png" alt="Image">
                            </figure>
                        </div>
                        <div class="media-content">
                            <p class="title is-4"><NAME></p>
                            <p class="subtitle is-6">@johnsmith</p>
                        </div>
                    </div>

                    <div class="content">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Phasellus nec iaculis mauris. <a>@bulmaio</a>.
                        <a>#css</a> <a>#responsive</a>
                        <br>
                        <small>11:09 PM - 1 Jan 2016</small>
                    </div>
                </div>
            </div>
        </b-modal>
        <pre class="content" v-highlight><code class="html">{{ template1 | pre }}</code></pre>

        <hr>

        <h2 class="title">Component Modal</h2>
        <div class="content">
            <p>A modal with an injected component. When you want to close the Modal, emit a 'close' event — <code>this.$emit('close')</code> — from the component.</p>
            <p>The component will receive all props from the <code>props</code> object.</p>
            <button class="button is-primary is-medium" @click="isComponentModalActive = true">Launch component modal</button>
        </div>
        <b-modal
            :active.sync="isComponentModalActive"
            :component="ModalForm"
            :props="formProps"
            :width="380">
        </b-modal>
        <pre class="content" v-highlight><code class="html">{{ template2 | pre }}</code></pre>
        <pre class="content" v-highlight><code class="javascript">{{ code2 | pre }}</code></pre>

        <h3 class="subtitle">ModalForm component</h3>
        <p class="content"><b>Note:</b> You should't mutate a prop directly, this is just an example.</p>
        <pre class="content" v-highlight><code class="html">{{ component | pre }}</code></pre>

        <hr>

        <h2 class="title is-spaced">Programmatically opening</h2>

        <div class="block">
            <button class="button is-primary is-medium" @click="imageModal">Launch image modal</button>
            <button class="button is-primary is-medium" @click="cardModal">Launch card modal</button>
        </div>
        <pre class="content" v-highlight><code class="javascript">{{ code3 | pre }}</code></pre>

        <hr>

        <h2 class="title">Programmatically opening Component Modal</h2>
        <b-message type="is-warning">
            <b>Note</b>: You won't have access to Vue main instance (<code>$store</code>, <code>$router</code>, etc) from the component when opening programmatically.
        </b-message>
        <div class="content">
            <p>A modal with an injected component. When you want to close the Modal, emit a 'close' event — <code>this.$emit('close')</code> — from the component.</p>
            <p>The component will receive all props from the <code>props</code> object.</p>
            <button class="button is-primary is-medium" @click="componentModal">Launch component modal</button>
        </div>
        <pre class="content" v-highlight><code class="javascript">{{ code4 | pre }}</code></pre>

        <hr>

        <h2 class="title is-spaced">API</h2>
        <b-tabs>
            <b-tab-item label="Properties">
                <b-table :data="props" default-sort="name">
                    <template scope="props">
                        <b-table-column field="name" label="Name">
                            <span v-html="props.row.name"></span>
                        </b-table-column>
                        <b-table-column field="description" label="Description" width="620">
                            <span v-html="props.row.description"></span>
                        </b-table-column>
                        <b-table-column field="type" label="Type">
                            <span>{{ props.row.type }}</span><commit_msg>Add modal note<commit_after><template>
    <div class="container">
        <h1 class="title is-spaced">Modal</h1>
        <h2 class="subtitle">Classic modal overlay to include any content you may need</h2>
        <hr>

        <div class="block">
            <button class="button is-primary is-medium" @click="isImageModalActive = true">Launch image modal</button>
            <button class="button is-primary is-medium" @click="isCardModalActive = true">Launch card modal</button>
        </div>
        <b-modal :active.sync="isImageModalActive">
            <p class="image is-4by3">
                <img src="static/placeholder-1280x960.png">
            </p>
        </b-modal>
        <b-modal :active.sync="isCardModalActive" :width="640">
            <div class="card">
                <div class="card-image">
                    <figure class="image is-4by3">
                        <img src="static/placeholder-1280x960.png" alt="Image">
                    </figure>
                </div>
                <div class="card-content">
                    <div class="media">
                        <div class="media-left">
                            <figure class="image is-48x48">
                                <img src="static/placeholder-1280x960.png" alt="Image">
                            </figure>
                        </div>
                        <div class="media-content">
                            <p class="title is-4"><NAME></p>
                            <p class="subtitle is-6">@johnsmith</p>
                        </div>
                    </div>

                    <div class="content">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Phasellus nec iaculis mauris. <a>@bulmaio</a>.
                        <a>#css</a> <a>#responsive</a>
                        <br>
                        <small>11:09 PM - 1 Jan 2016</small>
                    </div>
                </div>
            </div>
        </b-modal>
        <pre class="content" v-highlight><code class="html">{{ template1 | pre }}</code></pre>

        <hr>

        <h2 class="title">Component Modal</h2>
        <div class="content">
            <p>A modal with an injected component. When you want to close the Modal, emit a 'close' event — <code>this.$emit('close')</code> — from the component.</p>
            <p>The component will receive all props from the <code>props</code> object.</p>
            <button class="button is-primary is-medium" @click="isComponentModalActive = true">Launch component modal</button>
        </div>
        <b-modal
            :active.sync="isComponentModalActive"
            :component="ModalForm"
            :props="formProps"
            :width="380">
        </b-modal>
        <pre class="content" v-highlight><code class="html">{{ template2 | pre }}</code></pre>
        <pre class="content" v-highlight><code class="javascript">{{ code2 | pre }}</code></pre>

        <h3 class="subtitle">ModalForm component</h3>
        <p class="content"><b>Note:</b> You should't mutate a prop directly, this is just an example.</p>
        <pre class="content" v-highlight><code class="html">{{ component | pre }}</code></pre>

        <hr>

        <h2 class="title is-spaced">Programmatically opening</h2>

        <div class="block">
            <button class="button is-primary is-medium" @click="imageModal">Launch image modal</button>
            <button class="button is-primary is-medium" @click="cardModal">Launch card modal</button>
        </div>
        <pre class="content" v-highlight><code class="javascript">{{ code3 | pre }}</code></pre>

        <hr>

        <h2 class="title">Programmatically opening Component Modal</h2>
        <b-message type="is-warning">
            <b>Note</b>: You won't have access to Vue main instance (<code>$store</code>, <code>$router</code>, Buefy components, etc)
            from the component when opening programmatically. Use the non-programmatic Modal for that.
        </b-message>
        <div class="content">
            <p>A modal with an injected component. When you want to close the Modal, emit a 'close' event — <code>this.$emit('close')</code> — from the component.</p>
            <p>The component will receive all props from the <code>props</code> object.</p>
            <button class="button is-primary is-medium" @click="componentModal">Launch component modal</button>
        </div>
        <pre class="content" v-highlight><code class="javascript">{{ code4 | pre }}</code></pre>

        <hr>

        <h2 class="title is-spaced">API</h2>
        <b-tabs>
            <b-tab-item label="Properties">
                <b-table :data="props" default-sort="name">
                    <template scope="props">
                        <b-table-column field="name" label="Name">
                            <span v-html="props.row.name"></span>
                        </b-table-column>
                        <b-table-column field="description" label="Description" width="620">
                            <span v-html="props.row.description"></span>
                        </b-table-column>
                        <b-table-column field="type" label="Type">
                            <span>{{ props.row.type }}</span>
{'fraction_non_alphanumeric': 0.14721535829690172, 'fraction_numerical': 0.012925299372742824, 'mean_word_length': 1.781654771345493, 'pattern_counts': {'":': 0, '<': 305, '<?xml version=': 0, '>': 305, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4543334', 'n_tokens_mistral': 2990, 'n_tokens_neox': 2811, 'n_words': 703}