svelte-movable

Svelte Action - use:movable

Table of Contents

Show / hide

• Svelte Action - use:movable
  • Table of Contents
  • Changelog
  • Usage
  • Documentation
  • Contributing
  • Todos

Changelog

Usage

Example: show / hide

While mousedown of the trigger button element

• mousemove will trigger div to move accordingly; a CustomEvent movablestartis dispatched,
• movement will be limited to the border of the containerNode, plus and minus 20% of the width & height of the div that the action is being used on,
• mouseup will stop the movement; a CustomEvent movableend is dispatched.

<script lang="ts">
  import arrows from 'svelte-awesome/icons/arrows';
  import Icon from 'svelte-awesome/components/Icon.svelte';

  let modal = false;
  let triggerNode: HTMLElement;
</script>

<container>
  <!-- ... some other content ... -->

  {#if modal}
    <div
      transition:fade={{ duration: 200 }}
      class="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 w-full max-w-sm"
      use:movable={{
        limit: {
          delta: '20%',
          parent: containerNode,
        },
        trigger: triggerNode,
      }}
      on:movablestart={(node) => console.log('movable:start', node)}
      on:movableend={(node) => console.log('movable:end', node)}
    >
      <button
        bind:this={triggerNode}
        class="c-btn-icon absolute top-2 right-10 hover:cursor-move"
      >
        <Icon data={arrows} />
      </button>

      <!-- ... some other modal content ... -->
    </div>
{/if}

</container>

Documentation

Typescript support

app.d.ts: show / hide

/// <reference types="@sveltejs/kit" />
/// <reference types="svelte" />

// Typescript support in svelte-kit, see
// https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#im-using-an-attributeevent-on-a-dom-element-and-it-throws-a-type-error

declare namespace svelte.JSX {
  interface HTMLAttributes<T> {
    // on:movablestart
    onmovablestart?: (event: CustomEvent<HTMLElement>) => void;
    // on:movableend
    onmovableend?: (event: CustomEvent<HTMLElement>) => void;
  }
}

For detailed documentation, see the extracted API.

Quick access to the parameter interface accepted by the action: MovableParameters.

Note: action accepts Partial<MovableParameters>. By default you don't need to provide any option.

Contributing

Read Contribution Guide

Todos

• separate helper methods & implement unit tests

• add field test for svelte kit (integration)

• CI workflow (github action)
  

Changelog

1.0.1 (2022-05-08)

Bug Fixes

• release: set semantic-release to publish to npm (a21fe70)