fix(update): update components & pages

basics · Jun 13, 2023 · 27daf75 · 27daf75
1 parent f24656a
commit 27daf75
Show file tree

Hide file tree

Showing 33 changed files with 234 additions and 381 deletions.
diff --git a/playground/.nuxtignore b/playground/.nuxtignore
@@ -1 +1,3 @@
 pages/**/components/**/*.vue
+# pages/**/*.vue
+# !pages/index.vue
diff --git a/playground/components/InfoLayer.vue b/playground/components/InfoLayer.vue
@@ -34,7 +34,6 @@ import { useHead } from '#imports';
 import SpeedkitLayer from '#speedkit/components/SpeedkitLayer';
 import BaseButton from '@/components/base/Button';
 import useFonts from '#speedkit/composables/fonts';
-
 const { $getFont } = useFonts();
 
 useHead({
@@ -45,12 +44,8 @@ useHead({
     )
   ]
 });
-</script>
 
-<script>
-export default {
-  inheritAttrs: false
-};
+defineOptions({ inheritAttrs: false });
 </script>
 
 <style lang="postcss" scoped>

diff --git a/playground/components/elements/GithubCorner.vue b/playground/components/elements/GithubCorner.vue
@@ -21,23 +21,21 @@
   </a>
 </template>
 
-<script>
-export default {
-  props: {
-    title: {
-      type: String,
-      default: 'View source on GitHub'
-    },
-    target: {
-      type: String,
-      default: '_blank'
-    },
-    url: {
-      type: String,
-      default: 'https://your-url'
-    }
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: 'View source on GitHub'
+  },
+  target: {
+    type: String,
+    default: '_blank'
+  },
+  url: {
+    type: String,
+    default: 'https://your-url'
   }
-};
+});
 </script>
 
 <style lang="postcss" scoped>

diff --git a/playground/components/elements/LoaderTest.vue b/playground/components/elements/LoaderTest.vue
@@ -7,7 +7,9 @@
 <script setup>
 import { ref } from 'vue';
 import { onMounted } from '#imports';
+import useCritical from '#speedkit/composables/critical';
 
+const { isCritical } = useCritical();
 const active = ref(false);
 
 onMounted(() => (active.value = true));

diff --git a/playground/components/fragments/PageHeaderMenu.vue b/playground/components/fragments/PageHeaderMenu.vue
@@ -42,7 +42,7 @@
 </template>
 
 <script setup>
-import { watch, computed } from 'vue';
+import { watch, computed, ref, onMounted } from 'vue';
 import { useRoute } from '#app';
 import Headline from '@/components/base/Headline';
 import LinkList from '@/components/base/LinkList';
@@ -70,7 +70,12 @@ const props = defineProps({
   }
 });
 
-const inert = computed(() => props.modelValue);
+const mounted = ref(false);
+onMounted(() => {
+  mounted.value = true;
+});
+
+const inert = computed(() => mounted.value && !props.modelValue);
 const emit = defineEmits(['update:modelValue']);
 
 const route = useRoute();

diff --git a/playground/layouts/default.vue b/playground/layouts/default.vue
@@ -1,7 +1,9 @@
 <template>
   <div>
     <page-header v-model="menuOpened" v-bind="pageHeaderData" />
-    <slot :inert="menuOpened" />
+    <main :inert="menuOpened">
+      <slot />
+    </main>
     <info-layer v-if="!$config.public.disableInfoLayer" critical />
     <github-corner :url="$config.public.githubRepoUrl" />
   </div>

diff --git a/playground/nuxt.config.mjs b/playground/nuxt.config.mjs
@@ -25,12 +25,27 @@ export default defineNuxtConfig(async () => {
     runtimeConfig: {
       public: {
         githubRepoUrl: repository.url,
-        disableInfoLayer: true
+        disableInfoLayer: false
       }
     },
 
     app: {
-      baseURL: getBaseUrl()
+      baseURL: getBaseUrl(),
+      head: {
+        htmlAttrs: {
+          lang: 'en'
+        },
+        meta: [
+          {
+            charset: 'utf-8'
+          },
+          {
+            name: 'viewport',
+            content: 'width=device-width, initial-scale=1'
+          }
+        ],
+        link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
+      }
     },
 
     devServer: {
@@ -385,23 +400,7 @@ export default defineNuxtConfig(async () => {
       ]
     },
 
-    modules: ['../src/module'],
-
-    head: {
-      htmlAttrs: {
-        lang: 'en'
-      },
-      meta: [
-        {
-          charset: 'utf-8'
-        },
-        {
-          name: 'viewport',
-          content: 'width=device-width, initial-scale=1'
-        }
-      ],
-      link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
-    }
+    modules: ['../src/module']
   };
 });
 

diff --git a/playground/pages/index.vue b/playground/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <main class="page-index">
+  <div>
     <module-stage v-bind="stage" />
     <module-text-a v-bind="textA" />
     <module-image-text v-bind="imageTextA" />
@@ -9,7 +9,7 @@
     <module-image-text v-bind="imageTextB" />
     <module-text-b v-bind="textB" />
     <module-video-vimeo v-bind="videoVimeoB" />
-  </main>
+  </div>
 </template>
 
 <script setup>

diff --git a/playground/pages/tests/iframe/components/Critical.vue b/playground/pages/tests/iframe/components/Critical.vue
@@ -1,30 +1,17 @@
 <template>
   <preview-container>
     <template #default>
-      <default-iframe class="test-iframe" v-bind="iframe" />
+      <default-iframe class="test-iframe" :iframe-src="iframeSrc" />
     </template>
     <template #title>
       <p>Critical<br />Iframe</p>
     </template>
   </preview-container>
 </template>
 
-<script>
+<script setup>
 import DefaultIframe from '#speedkit/components/SpeedkitIframe';
 import PreviewContainer from '@/components/PreviewContainer';
 
-export default {
-  components: {
-    DefaultIframe,
-    PreviewContainer
-  },
-
-  data() {
-    return {
-      iframe: {
-        src: 'https://grabarzundpartner.de'
-      }
-    };
-  }
-};
+const iframeSrc = 'https://grabarzundpartner.de';
 </script>
diff --git a/playground/pages/tests/iframe/components/Lazy.vue b/playground/pages/tests/iframe/components/Lazy.vue
@@ -1,30 +1,17 @@
 <template>
   <preview-container id="lazyContainer">
     <template #default>
-      <default-iframe class="test-iframe" v-bind="iframe" />
+      <default-iframe class="test-iframe" :src="iframeSrc" />
     </template>
     <template #title>
       <p>Lazy<br />Iframe</p>
     </template>
   </preview-container>
 </template>
 
-<script>
+<script setup>
 import DefaultIframe from '#speedkit/components/SpeedkitIframe';
 import PreviewContainer from '@/components/PreviewContainer';
 
-export default {
-  components: {
-    DefaultIframe,
-    PreviewContainer
-  },
-
-  data() {
-    return {
-      iframe: {
-        src: 'https://grabarzundpartner.de'
-      }
-    };
-  }
-};
+const iframeSrc = 'https://grabarzundpartner.de';
 </script>
diff --git a/playground/pages/tests/iframe/index.vue b/playground/pages/tests/iframe/index.vue
@@ -1,18 +1,11 @@
 <template>
-  <main>
+  <div>
     <critical critical />
     <lazy />
-  </main>
+  </div>
 </template>
 
-<script>
+<script setup>
 import Critical from './components/Critical';
 import Lazy from './components/Lazy';
-
-export default {
-  components: {
-    Critical,
-    Lazy
-  }
-};
 </script>
diff --git a/playground/pages/tests/image/components/Critical.vue b/playground/pages/tests/image/components/Critical.vue
@@ -9,36 +9,25 @@
   </preview-container>
 </template>
 
-<script>
+<script setup>
 import SpeedkitImage from '#speedkit/components/SpeedkitImage';
 import PreviewContainer from '@/components/PreviewContainer';
 
-export default {
-  components: {
-    SpeedkitImage,
-    PreviewContainer
-  },
-
-  data() {
-    return {
-      image: {
-        title: 'Critical - Image',
-        source: {
-          format: 'jpg',
-          src: '/img/critical.jpg',
-          sizes: {
-            default: '100vw',
-            xxs: '100vw',
-            xs: '100vw',
-            sm: '100vw',
-            md: '100vw',
-            lg: '100vw',
-            xl: '100vw',
-            xxl: '100vw'
-          }
-        }
-      }
-    };
+const image = {
+  title: 'Critical - Image',
+  source: {
+    format: 'jpg',
+    src: '/img/critical.jpg',
+    sizes: {
+      default: '100vw',
+      xxs: '100vw',
+      xs: '100vw',
+      sm: '100vw',
+      md: '100vw',
+      lg: '100vw',
+      xl: '100vw',
+      xxl: '100vw'
+    }
   }
 };
 </script>
diff --git a/playground/pages/tests/image/components/Lazy.vue b/playground/pages/tests/image/components/Lazy.vue
@@ -9,35 +9,24 @@
   </preview-container>
 </template>
 
-<script>
+<script setup>
 import SpeedkitImage from '#speedkit/components/SpeedkitImage';
 import PreviewContainer from '@/components/PreviewContainer';
 
-export default {
-  components: {
-    SpeedkitImage,
-    PreviewContainer
-  },
-
-  data() {
-    return {
-      image: {
-        title: 'Lazy - Image',
-        source: {
-          src: '/img/lazy.jpg',
-          sizes: {
-            default: '100vw',
-            xxs: '100vw',
-            xs: '100vw',
-            sm: '100vw',
-            md: '100vw',
-            lg: '100vw',
-            xl: '100vw',
-            xxl: '100vw'
-          }
-        }
-      }
-    };
+const image = {
+  title: 'Lazy - Image',
+  source: {
+    src: '/img/lazy.jpg',
+    sizes: {
+      default: '100vw',
+      xxs: '100vw',
+      xs: '100vw',
+      sm: '100vw',
+      md: '100vw',
+      lg: '100vw',
+      xl: '100vw',
+      xxl: '100vw'
+    }
   }
 };
 </script>
diff --git a/playground/pages/tests/image/index.vue b/playground/pages/tests/image/index.vue
@@ -1,18 +1,11 @@
 <template>
-  <main>
+  <div>
     <critical critical />
     <lazy />
-  </main>
+  </div>
 </template>
 
-<script>
+<script setup>
 import Critical from './components/Critical';
 import Lazy from './components/Lazy';
-
-export default {
-  components: {
-    Critical,
-    Lazy
-  }
-};
 </script>