milk-lib 0.0.24 → 0.0.27

package/dist/components/Sheet/Sheet.svelte

@@ -0,0 +1,109 @@
+<!-- 
+  TODO: Сейчас при смене пропса side на лету анимация слегка корявая
+  Нужно будет подумать как ее сделать поприятнее.
+-->
+
+<script lang="ts">
+  import { clickOutsideObject } from '../..';
+  import Portal from '../Portal/Portal.svelte';
+  import type { ISheetProps } from './Sheet.types';
+  import { onDestroy, onMount } from "svelte";
+  import { browser } from "$app/environment";
+
+  let { children, isOpen, hide, hideOnClickOutside, side = 'right' }: ISheetProps = $props();
+
+  let sheetElement = $state<HTMLDivElement | null>(null)
+  let shouldRender = $state(isOpen);
+
+  const sheetClassNames = $derived(`Sheet Sheet-${side}`);
+
+  const handleClickOutside = (event: MouseEvent) => {
+    clickOutsideObject(event, sheetElement as HTMLElement, null, () => hide?.());
+  };
+
+  onMount(() => {
+    if (browser && hideOnClickOutside) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+  });
+
+  onDestroy(() => {
+    if (browser && hideOnClickOutside) {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+  });
+
+  $effect(() => {
+    if (isOpen) {
+      shouldRender = true;
+      
+      const timeout = setTimeout(() => {
+        if (sheetElement) {
+          sheetElement.classList.add('Sheet-open');
+        }
+      });
+      return () => clearTimeout(timeout);
+      
+    } else {
+      if (sheetElement) {
+        sheetElement.classList.remove('Sheet-open');
+      }
+    }
+  });
+
+  const handleTransitionEnd = (e: TransitionEvent) => {
+    e.stopPropagation();
+    if (!isOpen) {
+      if (e.propertyName === 'transform') {
+        console.log('hide');
+        shouldRender = false;
+      }
+    }
+  }
+
+</script>
+
+<Portal>
+  {#if shouldRender}
+    <div 
+      class={sheetClassNames} 
+      bind:this={sheetElement} 
+      ontransitionend={handleTransitionEnd}
+    >
+      {@render children()}
+    </div>
+  {/if}
+</Portal>
+
+<style>.Sheet {
+  position: fixed;
+  z-index: var(--zindex-sheet);
+  top: 0;
+  height: 100vh;
+  background: white;
+  width: 400px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+  opacity: 0;
+  transition: all 0.3s ease-in-out;
+}
+@media (max-width: 400px) {
+  .Sheet {
+    width: 100%;
+  }
+}
+.Sheet.Sheet-right {
+  right: 0;
+  left: auto;
+  border-left: 1px solid var(--line-base);
+  transform: translateX(110%);
+}
+.Sheet.Sheet-left {
+  left: 0;
+  right: auto;
+  border-right: 1px solid var(--line-base);
+  transform: translateX(-110%);
+}
+.Sheet.Sheet-open {
+  transform: translateX(0);
+  opacity: 1;
+}</style>

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

@@ -0,0 +1,4 @@
+import type { ISheetProps } from './Sheet.types';
+declare const Sheet: import("svelte").Component<ISheetProps, {}, "">;
+type Sheet = ReturnType<typeof Sheet>;
+export default Sheet;

package/dist/components/Sheet/Sheet.types.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from "svelte";
+export interface ISheetProps {
+    children: Snippet;
+    isOpen: boolean;
+    hide?: () => unknown;
+    hideOnClickOutside?: boolean;
+    side?: 'left' | 'right';
+}
+export interface ISheetHeaderProps {
+    children: Snippet;
+}
+export interface ISheetDescriptionProps {
+    children: Snippet;
+}
+export interface ISheetContentProps {
+    children: Snippet;
+}
+export interface ISheetActionsProps {
+    children: Snippet;
+    hide?: () => unknown;
+}
+export interface ISheetTitleProps {
+    children: Snippet;
+}

package/dist/components/Sheet/Sheet.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Sheet/SheetActions.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { ButtonMilk } from "../..";
+  import type { ISheetActionsProps } from './Sheet.types';
+  import { CloseLargeLineSystem } from "svelte-remix";
+  let { children, hide }: ISheetActionsProps = $props();
+
+</script>
+
+<div class="SheetActions">
+  {@render children()}
+  {#if hide}
+    <div class="SheetActions-hide">
+      <ButtonMilk onClick={hide} iconButton variant="base-contained" size="sm">
+        <CloseLargeLineSystem size="1em"/>
+      </ButtonMilk>
+    </div>
+  {/if}
+</div>
+
+<style>.SheetActions {
+  padding: 0.5rem;
+  border-bottom: 1px solid var(--line-base);
+}
+.SheetActions .SheetActions-hide {
+  position: absolute;
+  right: 0.5rem;
+  top: 0.5rem;
+}</style>

package/dist/components/Sheet/SheetActions.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ISheetActionsProps } from './Sheet.types';
+declare const SheetActions: import("svelte").Component<ISheetActionsProps, {}, "">;
+type SheetActions = ReturnType<typeof SheetActions>;
+export default SheetActions;

package/dist/components/Sheet/SheetContent.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { ISheetContentProps } from "./Sheet.types";
+
+  let { children }: ISheetContentProps = $props();
+</script>
+
+<div class="SheetContent">
+  {@render children()}
+</div>
+
+<style>.SheetContent {
+  padding: 0.5rem 1.5rem;
+}</style>

package/dist/components/Sheet/SheetContent.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ISheetContentProps } from "./Sheet.types";
+declare const SheetContent: import("svelte").Component<ISheetContentProps, {}, "">;
+type SheetContent = ReturnType<typeof SheetContent>;
+export default SheetContent;

package/dist/components/Sheet/SheetDescription.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type {ISheetDescriptionProps} from "./Sheet.types";
+
+  let { children }: ISheetDescriptionProps = $props();
+</script>
+
+<div class="SheetDescription">
+  {@render children()}
+</div>
+
+<style>.SheetDescription {
+  color: var(--text-base-muted);
+}</style>

package/dist/components/Sheet/SheetDescription.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ISheetDescriptionProps } from "./Sheet.types";
+declare const SheetDescription: import("svelte").Component<ISheetDescriptionProps, {}, "">;
+type SheetDescription = ReturnType<typeof SheetDescription>;
+export default SheetDescription;

package/dist/components/Sheet/SheetHeader.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type {ISheetHeaderProps} from "./Sheet.types";
+
+  let { children }: ISheetHeaderProps = $props();
+</script>
+
+<div class="SheetHeader">
+  {@render children()}
+</div>
+
+<style>.SheetHeader {
+  padding: 1.5rem 1.5rem 0.5rem;
+}</style>

package/dist/components/Sheet/SheetHeader.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ISheetHeaderProps } from "./Sheet.types";
+declare const SheetHeader: import("svelte").Component<ISheetHeaderProps, {}, "">;
+type SheetHeader = ReturnType<typeof SheetHeader>;
+export default SheetHeader;

package/dist/components/Sheet/SheetTitle.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { ISheetTitleProps } from './Sheet.types';
+  let { children } : ISheetTitleProps = $props();
+</script>
+
+<h2 class="SheetTitle">
+  {@render children()}
+</h2>
+
+<style>.SheetTitle {
+  font-size: var(--font-size-h2);
+  font-weight: 500;
+}</style>

package/dist/components/Sheet/SheetTitle.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ISheetTitleProps } from './Sheet.types';
+declare const SheetTitle: import("svelte").Component<ISheetTitleProps, {}, "">;
+type SheetTitle = ReturnType<typeof SheetTitle>;
+export default SheetTitle;

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

@@ -0,0 +1,6 @@
+export { default as Sheet } from './Sheet.svelte';
+export { default as SheetHeader } from './SheetHeader.svelte';
+export { default as SheetActions } from './SheetActions.svelte';
+export { default as SheetTitle } from './SheetTitle.svelte';
+export { default as SheetContent } from './SheetContent.svelte';
+export { default as SheetDescription } from './SheetDescription.svelte';

package/dist/components/Sheet/index.js

@@ -0,0 +1,6 @@
+export { default as Sheet } from './Sheet.svelte';
+export { default as SheetHeader } from './SheetHeader.svelte';
+export { default as SheetActions } from './SheetActions.svelte';
+export { default as SheetTitle } from './SheetTitle.svelte';
+export { default as SheetContent } from './SheetContent.svelte';
+export { default as SheetDescription } from './SheetDescription.svelte';

package/dist/components/index.d.ts

@@ -18,3 +18,4 @@ export * from './Select';
 export * from './Icon';
 export * from './Checkbox';
 export * from './CheckboxGroup';
+export * from './Sheet';

package/dist/components/index.js

@@ -18,3 +18,4 @@ export * from './Select';
 export * from './Icon';
 export * from './Checkbox';
 export * from './CheckboxGroup';
+export * from './Sheet';

package/package.json

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