useOpen

Creates a small open/closed state controller for UI components. It works well for modals, drawers, dropdown menus, popovers, and any component where the template should read from one boolean ref and call named actions.

The returned functions are intentionally simple and synchronous, which makes them easy to pass to event handlers or expose from a component.

Importing

import { useOpen } from '@almighty-shogun/common'

Usage

<template>
    <button @click="open">Open settings</button>

    <dialog :open="isOpen">
        <h2>Settings</h2>
        <button @click="close">Close</button>
    </dialog>
</template>

<script setup lang="ts">
import { useOpen } from '@almighty-shogun/common'

const { isOpen, open, close } = useOpen();
</script>

Returns

isOpen: Ref<boolean>
Current open state. Starts as false.

open(): void
Sets isOpen to true.

close(): void
Sets isOpen to false.

toggle(): void
Flips the current open state.

Type signature

declare function useOpen(): UseOpen;

type UseOpen = {
    readonly isOpen: Ref<boolean>;

    open(): void;
    close(): void;
    toggle(): void;
};