Update and move app into demo subdirectory

gilbitron · Sep 30, 2022 · 6557d44 · 6557d44
1 parent b439b42
commit 6557d44
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 25 deletions.
diff --git a/index.html b/index.html
@@ -7,6 +7,6 @@
     </head>
     <body>
         <div id="app"></div>
-        <script type="module" src="/src/main.js"></script>
+        <script type="module" src="/src/demo/main.js"></script>
     </body>
 </html>
diff --git a/src/App.vue → src/demo/App.vue b/src/App.vue → src/demo/App.vue
@@ -5,19 +5,26 @@
 
         <form class="mb-5" @submit.prevent>
             <div class="form-row">
-                <div class="form-group col-md-4">
+                <div class="form-group col-md-3">
+                    <label for="style">Style</label><br>
+                    <select id="size" class="form-control" v-model="style">
+                        <option value="bootstrap4">Bootstrap 4</option>
+                        <option value="bootstrap5">Bootstrap 5</option>
+                    </select>
+                </div>
+                <div class="form-group col-md-3">
                     <label for="limit">Limit</label><br>
                     <input type="number" id="limit" class="form-control" v-model="limit">
                 </div>
-                <div class="form-group col-md-4">
+                <div class="form-group col-md-3">
                     <label for="size">Size</label><br>
                     <select id="size" class="form-control" v-model="size">
                         <option value="small">Small</option>
                         <option value="default">Default</option>
                         <option value="large">Large</option>
                     </select>
                 </div>
-                <div class="form-group col-md-4">
+                <div class="form-group col-md-3">
                     <label for="align">Align</label><br>
                     <select id="align" class="form-control" v-model="align">
                         <option value="left">Left</option>
@@ -38,22 +45,28 @@
 
         <div class="card bg-light">
             <div class="card-body p-5">
-                <BootstrapPagination
-                    class="mb-0"
-                    :data="laravelData"
-                    :limit="limit"
-                    :show-disabled="showDisabled"
-                    :size="size"
-                    :align="align"
-                    @pagination-change-page="getResults" />
-
-                <!--BootstrapPagination
-                    :data="laravelResourceData"
-                    :limit="limit"
-                    :show-disabled="showDisabled"
-                    :size="size"
-                    :align="align"
-                    @pagination-change-page="getResourceResults" /-->
+                <RenderToIFrame :css-url="cssUrl">
+                    <Bootstrap4Pagination
+                        class="mb-0"
+                        :data="laravelData"
+                        :limit="limit"
+                        :show-disabled="showDisabled"
+                        :size="size"
+                        :align="align"
+                        @pagination-change-page="getResults"
+                        v-if="style === 'bootstrap4'"
+                    />
+                    <Bootstrap5Pagination
+                        class="mb-0"
+                        :data="laravelData"
+                        :limit="limit"
+                        :show-disabled="showDisabled"
+                        :size="size"
+                        :align="align"
+                        @pagination-change-page="getResults"
+                        v-if="style === 'bootstrap5'"
+                    />
+                </RenderToIFrame>
             </div>
         </div>
 
@@ -71,8 +84,9 @@
 </template>
 
 <script>
-import '../node_modules/bootstrap/dist/css/bootstrap.css';
-import LaravelVuePagination from './LaravelVuePagination.vue';
+import '../../node_modules/bootstrap/dist/css/bootstrap.css';
+import { Bootstrap4Pagination, Bootstrap5Pagination } from '@/lib';
+import RenderToIFrame from './components/RenderToIFrame';
 
 const dummyData = [
     { id: 1 },
@@ -99,20 +113,33 @@ const dummyData = [
 
 export default {
     components: {
-        'BootstrapPagination': LaravelVuePagination
+        RenderToIFrame,
+        Bootstrap4Pagination,
+        Bootstrap5Pagination
     },
 
     data () {
         return {
             laravelData: {},
             laravelResourceData: {},
+            style: 'bootstrap4',
             limit: 2,
             showDisabled: false,
             size: 'default',
             align: 'left'
         }
     },
 
+    computed:{
+        cssUrl() {
+            if (this.style === 'bootstrap5') {
+                return 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css';
+            }
+
+            return 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css';
+        }
+    },
+
     mounted () {
         this.getResults(10);
         // this.getResourceResults();
@@ -168,7 +195,17 @@ export default {
             if (this.limit < 0) {
                 this.limit = 0;
             }
-        }
-    }
+        },
+    },
 }
 </script>
+
+<style scoped>
+iframe {
+    border: 0;
+    overflow: auto;
+    width: 100%;
+    height: 10rem;
+    background-color: transparent;
+}
+</style>
diff --git a/src/demo/components/RenderToIframe.js b/src/demo/components/RenderToIframe.js
@@ -0,0 +1,50 @@
+import { h, ref, createApp, onMounted, onBeforeUpdate } from 'vue';
+
+export default {
+    name: 'RenderToIFrame',
+    props: {
+        cssUrl: {
+            type: String,
+            default: '',
+        },
+    },
+    setup(props, { slots }) {
+        const iframeRef = ref(null);
+        const iframeBody = ref(null);
+        const iframeHead = ref(null);
+        const iframeCSS = ref(null);
+        const iframeStyle = ref(null);
+        let iframeApp = null;
+
+        onMounted(() => {
+            iframeBody.value = iframeRef.value.contentDocument.body;
+            iframeHead.value = iframeRef.value.contentDocument.head;
+            const el = document.createElement('div');
+            iframeBody.value.appendChild(el);
+            iframeCSS.value = document.createElement('link');
+            iframeCSS.value.rel = 'stylesheet';
+            iframeCSS.value.href = props.cssUrl;
+            iframeHead.value.appendChild(iframeCSS.value);
+            iframeStyle.value = document.createElement('style');
+            iframeStyle.value.innerHTML =
+                'body { margin: 0; padding: 10px; background: #f8f9fa; }';
+            iframeHead.value.appendChild(iframeStyle.value);
+
+            iframeApp = createApp({
+                name: 'IframeRender',
+                setup() {
+                    return () => slots.default();
+                },
+            }).mount(el);
+        });
+        onBeforeUpdate(() => {
+            if (!iframeApp || !iframeRef.value) {
+                return;
+            }
+            if (props.cssUrl) {
+                iframeCSS.value.href = props.cssUrl;
+            }
+        });
+        return () => h('iframe', { ref: iframeRef });
+    },
+};
diff --git a/src/main.js → src/demo/main.js b/src/main.js → src/demo/main.js