feat(Window): added Window

packages/svelte-materialify/src/components/Window/Window.scss

@@ -0,0 +1,66 @@
+@import './variables';
+
+.s-window {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  transition: 0.3s $window-transition-function;
+
+  &.horizontal {
+    .s-window-item {
+      &.next:not(.left),
+      &.active.right {
+        transform: translateX(100%);
+      }
+
+      &.prev:not(.right),
+      &.active.left {
+        transform: translateX(-100%);
+      }
+    }
+  }
+
+  &.vertical {
+    .s-window-item {
+      &.next:not(.left),
+      &.active.right {
+        transform: translateY(100%);
+      }
+
+      &.prev:not(.right),
+      &.active.left {
+        transform: translateY(-100%);
+      }
+    }
+  }
+
+  &.reverse {
+    &.horizontal {
+      .s-window-item {
+        &.next:not(.left),
+        &.active.right {
+          transform: translateX(-100%);
+        }
+
+        &.prev:not(.right),
+        &.active.left {
+          transform: translateX(100%);
+        }
+      }
+    }
+
+    &.vertical {
+      .s-window-item {
+        &.next:not(.left),
+        &.active.right {
+          transform: translateY(-100%);
+        }
+
+        &.prev:not(.right),
+        &.active.left {
+          transform: translateY(100%);
+        }
+      }
+    }
+  }
+}

packages/svelte-materialify/src/components/Window/Window.svelte

@@ -0,0 +1,92 @@
+<script>
+  import { onMount } from 'svelte';
+
+  let klass = '';
+  export { klass as class };
+  export let activeClass = 'active';
+  export let value = 0;
+  export let vertical = false;
+  export let reverse = false;
+  export let continuous = true;
+
+  /** @type {Element} */
+  let container;
+  /** @type {Array<Element>} */
+  let windowItems = [];
+  let moving = false;
+
+  export function set(index) {
+    const prevIndex = windowItems.findIndex((i) => i.classList.contains(activeClass));
+    if (!moving && windowItems[index] && index !== prevIndex) {
+      moving = true;
+
+      let direction;
+      let position;
+      if (index > prevIndex) {
+        direction = 'left';
+        position = 'next';
+      } else {
+        direction = 'right';
+        position = 'prev';
+      }
+
+      const prev = windowItems[prevIndex];
+      prev.classList.add(direction);
+
+      container.style.height = `${prev.offsetHeight}px`;
+
+      const active = windowItems[index];
+      active.classList.add(position);
+
+      container.style.height = `${active.offsetHeight}px`;
+
+      active.classList.add(direction);
+
+      setTimeout(() => {
+        prev.classList.remove('active', direction);
+
+        active.classList.add('active');
+        active.classList.remove(position, direction);
+
+        container.style.height = null;
+        moving = false;
+        value = index;
+      }, 300);
+    }
+  }
+
+  $: set(value);
+
+  export function next() {
+    if (value === windowItems.length - 1) {
+      if (continuous) set(0);
+    } else {
+      set(value + 1);
+    }
+  }
+
+  export function previous() {
+    if (value === 0) {
+      if (continuous) set(windowItems.length - 1);
+    } else {
+      set(value - 1);
+    }
+  }
+
+  onMount(() => {
+    windowItems = Array.from(container.querySelectorAll('.s-window-item'));
+    windowItems[value]?.classList.add(activeClass);
+  });
+</script>
+
+<style lang="scss" src="./Window.scss" global>
+</style>
+
+<div
+  bind:this={container}
+  class="s-window {klass}"
+  class:horizontal={!vertical}
+  class:vertical
+  class:reverse>
+  <slot />
+</div>

packages/svelte-materialify/src/components/Window/WindowItem.scss

@@ -0,0 +1,18 @@
+@import './variables';
+
+.s-window-item {
+  position: relative;
+  display: none;
+  align-items: center;
+  width: 100%;
+  float: left;
+  margin-right: -100%;
+  backface-visibility: hidden;
+  transition: 0.3s $window-transition-function;
+
+  &.active,
+  &.next,
+  &.prev {
+    display: block;
+  }
+}

packages/svelte-materialify/src/components/Window/WindowItem.svelte

@@ -0,0 +1,12 @@
+<script>
+  let klass = '';
+  export { klass as class };
+  export let style = null;
+</script>
+
+<style lang="scss" src="./WindowItem.scss" global>
+</style>
+
+<div class="s-window-item {klass}" {style}>
+  <slot />
+</div>

packages/svelte-materialify/src/components/Window/_variables.scss

@@ -0,0 +1,3 @@
+@import '../../styles/variables';
+
+$window-transition-function: cubic-bezier(0.25, 0.8, 0.5, 1) !default;

packages/svelte-materialify/src/components/Window/index.js

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