milk-lib 0.0.2 → 0.0.4

package/dist/components/Sidebar/SidebarGroupTitle.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  let { children }: { children: Snippet } = $props();
+</script>
+
+<li class="SidebarGroupTitle">{@render children()}</li>
+
+<style>
+  .SidebarGroupTitle {
+    font-size: 12px;
+    color: #333;
+    font-weight: 500;
+    margin-top: 1.5rem;
+  }
+</style>

package/dist/components/Sidebar/SidebarGroupTitle.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const SidebarGroupTitle: import("svelte").Component<$$ComponentProps, {}, "">;
+type SidebarGroupTitle = ReturnType<typeof SidebarGroupTitle>;
+export default SidebarGroupTitle;

package/dist/components/Sidebar/SidebarLink.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  let { children, link }: { children: Snippet; link: string } = $props();
+</script>
+
+<li>
+  <a href={link} class="SidebarLink">
+    {@render children()}
+  </a>
+</li>
+
+<style>
+  .SidebarLink {
+    font-size: 12px;
+    color: #777;
+  }
+
+  .SidebarLink:hover {
+    text-decoration: underline;
+  }
+</style>

package/dist/components/Sidebar/SidebarLink.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
+    link: string;
+};
+declare const SidebarLink: import("svelte").Component<$$ComponentProps, {}, "">;
+type SidebarLink = ReturnType<typeof SidebarLink>;
+export default SidebarLink;

package/dist/components/Sidebar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SidebarGroupTitle } from './SidebarGroupTitle.svelte';
+export { default as SidebarLink } from './SidebarLink.svelte';

package/dist/components/Sidebar/index.js

@@ -0,0 +1,2 @@
+export { default as SidebarGroupTitle } from './SidebarGroupTitle.svelte';
+export { default as SidebarLink } from './SidebarLink.svelte';

package/dist/components/StickyHeader/StickyHeader.svelte

@@ -0,0 +1,111 @@
+<svelte:window bind:innerWidth bind:innerHeight bind:scrollY />
+
+<script lang="ts">
+
+  import { onMount } from 'svelte';
+
+  let height = $state(0);
+  let stickyHeaderContent = $state<HTMLElement | null>(null);
+  let innerWidth = $state(0);
+  let innerHeight = $state(0);
+  let scrollY = $state(0);
+
+  // visibility state
+  let isVisible = $state(true);
+  let lastY = $state(0);
+  let downAccum = $state(0);
+  let upAccum = $state(0);
+
+  // настройки чувствительности
+  const SHOW_THRESHOLD = 12;  // сколько пикселей нужно прокрутить вверх, чтобы показать
+  const HIDE_THRESHOLD = 24;  // сколько пикселей нужно прокрутить вниз, чтобы спрятать
+  const AT_TOP_SHADOW_CUTOFF = 1; // когда ~в самом верху — без тени
+
+  let { children } = $props();
+
+  const updateWrapperSize = () => {
+    height = stickyHeaderContent?.getBoundingClientRect?.().height || 0;
+  }
+
+  $effect(() => {
+    if (innerWidth && innerHeight) { updateWrapperSize() }
+  });
+
+  onMount(() => {
+    updateWrapperSize();
+  });
+
+  $effect(() => {
+    const delta = scrollY - lastY;
+
+    // всегда показываем у самого верха
+    if (scrollY <= 0) {
+      isVisible = true;
+      downAccum = upAccum = 0;
+      lastY = scrollY;
+      return;
+    }
+
+    // avoid twitch
+    if (Math.abs(delta) < 2) {
+      lastY = scrollY;
+      return;
+    }
+
+    if (delta > 0) {
+      // scroll down
+      downAccum += delta;
+      upAccum = 0;
+      if (downAccum >= HIDE_THRESHOLD) isVisible = false;
+    } else {
+      // scroll up
+      upAccum += -delta;
+      downAccum = 0;
+      if (upAccum >= SHOW_THRESHOLD) isVisible = true;
+    }
+
+    lastY = scrollY;
+  });
+
+</script>
+
+
+
+<div class="StickyHeader">
+
+  <div
+      class="StickyHeaderPosition"
+      class:isVisible={isVisible}
+      class:StickyHeaderShadow={scrollY > 0}
+      id="StickyHeaderPosition"
+  >
+    <div class="StickyHeaderContent" bind:this={stickyHeaderContent}>
+      {@render children()}
+    </div>
+  </div>
+
+  <div class="StickyHeaderStub" style={`height: ${height}px`}></div>
+</div>
+
+<style>@charset "UTF-8";
+.StickyHeader .StickyHeaderPosition {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: var(--zindex-sticky);
+  background: white;
+  /* по умолчанию спрятан вверх */
+  transform: translateY(-100%);
+  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
+  will-change: transform;
+}
+.StickyHeader .StickyHeaderPosition.isVisible {
+  transform: translateY(0);
+}
+.StickyHeader .StickyHeaderPosition.StickyHeaderShadow {
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
+}
+.StickyHeader {
+  /* высота задаётся инлайном из скрипта */
+}</style>

package/dist/components/StickyHeader/StickyHeader.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const StickyHeader: import("svelte").Component<{
+    children: any;
+}, {}, "">;
+type StickyHeader = ReturnType<typeof StickyHeader>;
+export default StickyHeader;

package/dist/components/StickyHeader/index.d.ts

@@ -0,0 +1 @@
+export { default as StickyHeader } from './StickyHeader.svelte';

package/dist/components/StickyHeader/index.js

@@ -0,0 +1 @@
+export { default as StickyHeader } from './StickyHeader.svelte';

package/dist/components/index.d.ts

@@ -1,2 +1,4 @@
 export * from './TestComponent';
 export * from './Menu';
+export * from './StickyHeader';
+export * from './Sidebar';

package/dist/components/index.js

@@ -1,2 +1,4 @@
 export * from './TestComponent';
 export * from './Menu';
+export * from './StickyHeader';
+export * from './Sidebar';

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "milk-lib",
 	"license": "MIT",
-	"version": "0.0.2",
+	"version": "0.0.4",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",