chore: set component with children

micantoine · micantoine · commit d6120128c6ac · 2025-01-16T23:15:34.000+09:00
diff --git a/example/webpack/App.svelte b/example/webpack/App.svelte
@@ -1,21 +1,31 @@
 <script>
   import 'swiper/swiper.min.css';
   import Time from './components/Time.svelte';
+  import Body from './components/Body.svelte';
+
   import css from './app.module.css';
   import { success, successSmall } from './app2.module.css';
   import './app3.module.css';
 
   let theme = { color: 'blue'};
 </script>
-<div class="overlay" />
+<div class="overlay"></div>
 <div class="modal" style="display:block">
   <section>
-    <header class="active" on:click={() => theme.color = 'red'}>My Modal title</header>
-    <div class="body">
-      <Time />
+    <header
+      class="active"
+      role="button"
+      tabindex="-1"
+      on:click={() => theme.color = 'red'}
+      on:keyup={() => theme.color = 'green'}
+    >
+      My Modal title
+    </header>
+    <Body>
+      <Time class="time" />
       <p class="{css.error} {css.errorMessage} large"><strong>Lorem ipsum dolor sit</strong>, amet consectetur adipisicing elit. Placeat, deserunt.</p>
       <p class="{success} {successSmall}">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat, deserunt. Lorem ipsum dolor sit amet. </p>
-    </div>
+    </Body>
     <footer>
       <button class="active">Ok</button>
       <button class="cancel">Cancel</button>
@@ -61,15 +71,6 @@
   color: bind("theme.color");
 }
 
-.body {
-  padding: 1rem;
-  flex: 1 0 0;
-  min-height: 0;
-  max-height: 100%;
-  overflow: scroll;
-  -webkit-overflow-scrolling: touch;
-}
-
 :local(footer) {
   padding: 1rem;
   text-align: right;
@@ -90,4 +91,10 @@ button {
 .active {
   font-weight: 700;
 }
+
+@media screen {
+  .time {
+    color: red;
+  }
+}
 </style>
diff --git a/example/webpack/components/Body.svelte b/example/webpack/components/Body.svelte
@@ -0,0 +1,18 @@
+<script>
+  let { children } = $props();
+</script>
+
+<div class="body">
+  {@render children?.()}  
+</div>
+
+<style module="mixed">
+  .body {
+    padding: 1rem;
+    flex: 1 0 0;
+    min-height: 0;
+    max-height: 100%;
+    overflow: scroll;
+    -webkit-overflow-scrolling: touch;
+  }
+</style>
