README.md

@tok/ui directives

1. Dragdrop

To detect how far element was dragged

Used in

1. Carousel

Usage

<template>
  <div v-dragdrop="dragDropProps">hello</div>
</template>

<script setup lang="ts">
import { DragDropDirective as vDragDrop } from '@tok/ui/directives/dragdrop';

const onEvent = (
  element: HTMLElement | null,
  [offsetX, offsetY]: [number, number]
) => {
  // do something
};

const dragDropProps = {
  onEvent,
};
</script>

2. Intersection

Simple Directive for IntersectionObserver

Used in

1. Carousel

Usage

<template>
  <div v-intersection="intersectionProps">hello</div>
</template>

<script setup lang="ts">
import { IntersectionDirective as vIntersection } from '@tok/ui/directives/intersection';

const onEvent: IntersectionObserverCallback = (
  entries: IntersectionObserverEntry[],
  observer: IntersectionObserver
) => {
  // do something
};

const intersectionProps = {
  onEvent,
};
</script>

3. Ripple

Simple Directive for Ripple effect

Used in

1. FlatButton
2. TelegramPopupButton

Usage

<template>
  <button v-ripple>Click me!</button>
</template>

<script setup lang="ts">
import { RippleDirective as vRipple } from '@tok/ui/directives/ripple';
</script>

Customization

You can specify ripple color via style

<template>
  <button v-ripple class="button">Click me!</button>
</template>

<script setup lang="ts">
import { RippleDirective as vRipple } from '@tok/ui/directives/ripple';
</script>

<style lang="scss" scoped>
.button {
  .tok-ripple-ink {
    background: red;
  }
}
</style>

3. Swipe

Directive allows detecting swipes on mobile devices

Used in

1. Carousel

Usage

<template>
  <div v-swipe="swipeProps">Swipe me!</div>
</template>

<script setup lang="ts">
import { Swipe, SwipeDirective as vSwipe } from '@tok/ui/directives/swipe';

const onEvent = (element: EventTarget | null, swipe: Swipe) => {
  // do something
};

const swipeProps = {
  onEvent,
  // timeout: 500, max time between touchstart and touchend
  // threshold: 30, min distance between touchstart and touchend
};
</script>

Customization

You can specify ripple color via style

<template>
  <button v-ripple class="button">Click me!</button>
</template>

<script setup lang="ts">
import { RippleDirective as vRipple } from '@tok/ui/directives/ripple';
</script>

<style lang="scss" scoped>
.button {
  .tok-ripple-ink {
    background: red;
  }
}
</style>