chore(docs): update Modal documentation

- In `docs/pages/components/modal/Modal.vue`,
    - The `pre` filter is replaced with `preformat`.
- In `docs/pages/components/modal/examples/ExProgrammatic.vue`,
    - Components used by `ModalForm` are explicitly referenced from
      `ModalForm`, because a component specified to the `component`
      option does not extend the current app.
- In `docs/pages/components/modal/examples/ExFullScreen.vue`,
    - `$parent.close()` of `ModalForm` is replaced with a combination
      of `ref` and `close` event, because `$parent` does not point to
      the intended component.
    - The `h` function is replaced with the global Vue API.
    - `value` binding of `b-input` is replaced with `modelValue`.

docs/pages/components/modal/Modal.vue

@@ -14,7 +14,7 @@
 
         <Example :component="ExProgrammatic" :code="ExProgrammaticCode" title="Programmatic">
             <p>Syntax:</p>
-            <CodeView lang="javascript" :code="programmaticSyntax | pre" expanded/>
+            <CodeView lang="javascript" :code="preformat(programmaticSyntax)" expanded/>
         </Example>
 
         <Example :component="ExFullScreen" :code="ExFullScreenCode" title="Full Screen">
@@ -31,6 +31,8 @@
 </template>
 
 <script>
+    import { preformat as _preformat } from '@/utils'
+
     import api from './api/modal'
     import variables from './variables/modal'
 
@@ -67,6 +69,11 @@
                 import { ModalProgrammatic as Modal } from 'buefy'
                 Modal.open(props)`
             }
+        },
+        methods: {
+            preformat(text) {
+                return _preformat(text)
+            }
         }
     }
 </script>

docs/pages/components/modal/examples/ExFullScreen.vue

@@ -7,18 +7,20 @@
             @click="isComponentModalActive = true" />
 
         <b-modal
+            ref="modal"
             v-model="isComponentModalActive"
             has-modal-card
             full-screen
             :can-cancel="false">
-            <modal-form v-bind="formProps"></modal-form>
+            <modal-form v-bind="formProps" @close="$refs.modal.close()"></modal-form>
         </b-modal>
     </section>
 </template>
 
 <script>
     const ModalForm = {
         props: ['email', 'password'],
+        emits: ['close'],
         template: `
             <div class="modal-card" style="width: auto">
                 <header class="modal-card-head">
@@ -28,7 +30,7 @@
                     <b-field label="Email">
                         <b-input
                             type="email"
-                            :value="email"
+                            :modelValue="email"
                             placeholder="Your email"
                             required>
                         </b-input>
@@ -37,7 +39,7 @@
                     <b-field label="Password">
                         <b-input
                             type="password"
-                            :value="password"
+                            :modelValue="password"
                             password-reveal
                             placeholder="Your password"
                             required>
@@ -49,7 +51,7 @@
                 <footer class="modal-card-foot">
                     <b-button
                         label="Close"
-                        @click="$parent.close()" />
+                        @click="$emit('close')" />
                     <b-button
                         label="Login"
                         type="is-primary" />

docs/pages/components/modal/examples/ExProgrammatic.vue

@@ -16,7 +16,20 @@
 </template>
 
 <script>
+    import { h } from 'vue'
+
+    // `modal.open` can no longer resolve components registered in
+    // the current app because it creates a brand-new app.
+    // so components referenced from the component specified to the `component`
+    // option have to be explicitly registered.
+    import { BButton } from '../../../../../src/components/button'
+    import { BCheckbox } from '../../../../../src/components/checkbox'
+    import { BField } from '../../../../../src/components/field'
+    import { BInput } from '../../../../../src/components/input'
+
     const ModalForm = {
+        // see above
+        components: { BButton, BCheckbox, BField, BInput },
         props: ['email', 'password'],
         template: `
             <form action="">
@@ -66,10 +79,15 @@
     export default {
         methods: {
             imageModal() {
-                const h = this.$createElement
-                const vnode = h('p', { class: "image is-4by3" }, [
-                    h('img', { attrs: { src: 'https://buefy.org/static/img/placeholder-1280x960.png' }})
-                ])
+                const vnode = h(
+                  'p',
+                  { class: "image is-4by3" },
+                  [
+                    h('img', {
+                      src: 'https://buefy.org/static/img/placeholder-1280x960.png'
+                    })
+                  ]
+                )
                 this.$buefy.modal.open({
                     content: [ vnode ]
                 })