Add named slot for before contents in open view

beyonk-group · Aug 20, 2024 · 9848001 · 9848001
1 parent fccdd44
commit 9848001
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 36 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -285,7 +285,17 @@
                         'Change fired'
                       ]
                     }}
-                  />
+                    let:selectedStart
+                    let:selectedEnd
+                  >
+                    <div style="border: 1px solid black; padding: 10px; border-radius: 4px;">
+                      <p>{selectedStart}</p>
+                      <p>{selectedEnd}</p>
+                    </div>
+                    <div slot="beforeContents">
+                      <h1>hell yeah!</h1>
+                    </div>
+                  </DatePicker>
                   </div>
                   <ul>
                   {#each firedEvents as fired}

diff --git a/src/components/DatePicker.svelte b/src/components/DatePicker.svelte
@@ -23,6 +23,9 @@
       let:selectedEnd
     >
       <slot {selectedStart} {selectedEnd} />
+      <div slot="beforeContents">
+       <slot name="beforeContents" {selectedStart} {selectedEnd} />
+      </div>
     </DatePickerInner>
   {:else}
     <DatePickerInner {...$$restProps}

diff --git a/src/components/DatePickerInner.svelte b/src/components/DatePickerInner.svelte
@@ -226,6 +226,9 @@
         {/if}
       </slot>
     </div>
+    <div slot="beforeContents">
+      <slot name="beforeContents" {selectedStart} {selectedEnd} />
+    </div>
     <div class="contents" slot="contents" class:is-range-picker={config.isRangePicker}>
       <div class="view">
         <View

diff --git a/src/components/Popover.svelte b/src/components/Popover.svelte
@@ -70,34 +70,35 @@
     <slot name="trigger">
     </slot>
   </div>
-  <div 
-    class="contents-wrapper" 
+  <div
+    class="contents-wrapper"
     class:visible={$isOpen}
     class:shrink={$isClosing}
     class:is-fullscreen={isFullscreen}
-    style="top: {translateY}px; left: {translateX}px" 
+    style="top: {translateY}px; left: {translateX}px"
     bind:this={contentsWrapper}>
     <div class="wrapper" bind:this={contentsAnimated}>
       <div class="contents-inner">
-        <slot name="contents"></slot>
+        <slot name="beforeContents" />
+        <slot name="contents" />
       </div>
     </div>
   </div>
 </div>
 
 <style>
-  .sc-popover { 
+  .sc-popover {
     position: relative;
   }
 
-  .contents-wrapper { 
+  .contents-wrapper {
     position: fixed;
     transition: none;
     z-index: 2;
     display: none;
   }
 
-  .contents-wrapper.visible { 
+  .contents-wrapper.visible {
     display: block;
   }
 
@@ -109,65 +110,65 @@
     overflow: scroll;
   }
 
-  .contents-wrapper.visible .wrapper { 
-    opacity: 1; 
+  .contents-wrapper.visible .wrapper {
+    opacity: 1;
     transform: scale(1);
     display: block;
   }
-  
-  .contents-wrapper.shrink .wrapper { 
+
+  .contents-wrapper.shrink .wrapper {
     animation: shrink 150ms forwards cubic-bezier(.92,.09,.18,1.05);
   }
 
-  .wrapper { 
+  .wrapper {
     background: #fff;
     box-shadow: 0px 10px 26px rgba(0,0,0,0.4) ;
-    opacity: .8; 
+    opacity: .8;
     padding-top: 0;
     display: none;
     animation: grow 200ms forwards cubic-bezier(.92,.09,.18,1.05);
   }
 
-  .contents-inner { 
+  .contents-inner {
     animation: fadeIn 400ms forwards;
   }
 
-  @keyframes grow { 
-    0% { 
-      transform: scale(.9,.1); 
-      opacity: 0; 
+  @keyframes grow {
+    0% {
+      transform: scale(.9,.1);
+      opacity: 0;
     }
-    30% { 
-      opacity: 1; 
+    30% {
+      opacity: 1;
     }
-    100% { 
+    100% {
       transform: scale(1);
     }
   }
 
-  @keyframes shrink { 
-    0% { 
-      transform: scale(1); 
-      opacity: 1; 
+  @keyframes shrink {
+    0% {
+      transform: scale(1);
+      opacity: 1;
     }
-    70% { 
-      opacity: 1; 
+    70% {
+      opacity: 1;
     }
-    100% { 
-      opacity: 0; 
+    100% {
+      opacity: 0;
       transform: scale(.9,.1);
     }
   }
 
-  @keyframes fadeIn { 
-    0% { 
-      opacity: 0; 
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
     }
-    50% { 
+    50% {
       opacity: 0;
     }
-    100% { 
-      opacity: 1; 
+    100% {
+      opacity: 1;
     }
   }
 </style>