open-index/open-npm huggingface dataset:
npm package: @modalogue/core
Description: Headless state management for multi-step dialogs
Author: Edoardo Guido
Latest version: 0.1.0

# @modalogue/core

Headless state management for multi-step dialogs. Framework-agnostic with zero dependencies.

## Installation

```bash
npm install @modalogue/core
# or
pnpm add @modalogue/core
# or
yarn add @modalogue/core
```

## Usage

```typescript
import Modalogue from '@modalogue/core';

// Create a new instance
const modalogue = new Modalogue();

// Subscribe to state changes
const unsubscribe = modalogue.subscribe((state) => {
  console.log('Modal state:', state);
  // state.isOpen - boolean
  // state.activeView - { id, element }
  // state.hasHistory - boolean
});

// Open a modal with content
modalogue.open(<YourContent />);

// Navigate to a new view (adds to history)
modalogue.navigate(<NextView />);

// Go back to previous view
modalogue.back();

// Close modal and clear history
modalogue.close();

// Hide modal without clearing history
modalogue.hide();

// Show hidden modal
modalogue.show();

// Clean up subscription
unsubscribe();
```

## API

### `new Modalogue()`

Creates a new Modalogue instance.

### `modalogue.subscribe(callback): () => void`

Subscribe to state changes. Returns an unsubscribe function.

### `modalogue.open(content): void`

Opens the modal with the given content. Clears any existing history.

### `modalogue.navigate(content): void`

Navigates to new content, preserving history for back navigation.

### `modalogue.back(): void`

Goes back to the previous view. If on the first view, closes the modal.

### `modalogue.close(): void`

Closes the modal and clears all history.

### `modalogue.hide(): void`

Hides the modal without clearing history (can be shown again).

### `modalogue.show(): void`

Shows a previously hidden modal.

## Types

```typescript
import type { ModalState, ModalContent, ActiveView, Subscriber, ModalAPI } from '@modalogue/core';
```

## License

MIT
npm package: @modalor/react
Description: A modal state manager for React.
Author: Croatia Lu
Latest version: 1.1.1

# @modalor/vue

A modal state manager for Vue3.

## Install

```bash
pnpm add @modalor/vue
```

## Usage

1. Render the Modalor in the root of your app.

```vue
<script lang="ts" setup>
import { Modalor } from '@modalor/vue'
</script>

<!-- App.vue -->
<template>
  <!-- ... -->
  <Modalor />
</template>
```

2. create a modal with your own modal component

```ts
// modal.ts
import { create } from '@modalor/vue'
import { h } from 'vue'

interface ModalProps {
  title: string
  // ...
}

// 1. create modal wrapper
export const createModal = create<ModalProps>(({ onCancel, onOk, open, isOkLoading, props: { renderChildren, ...rest } }) => (
  h(YourModalComponent, { onCancel, onOk, open, isOkLoading, ...rest }, renderChildren)
))
```

3. create a modal with a content component

```ts
// modals/userProfile.ts
import { createModal } from './../modal'

// 1.define modal content props
interface ModalContentProps {
  username: string
  // ...
}

// 2. define modal content resolve values
interface ModalContentResolveValues {
  newUsername: string
  // ...
}
// 3. create modal wrapper with modal content props and resolve values
const userProfileModal = createModal<ModalContentProps, ModalContentResolveValues>(props => (
  h(YourModalContentComponent, { ...props })
))
```

4. use api to show modal

```vue
<script setup>
// 1. import your modal
import { userProfileModal } from '@/modals/userProfile'

async function showModal() {
  // 2. show modal
  const [isOk, result] = await userProfileModal.show({
    username: 'John'
  }, {
    title: 'User Profile', // you can override modal props
  })

  // 3. handle result
  if (isOk) {
    console.log(result.newUsername) // will be your resolve values
  }
}
</script>

<template>
  <button @click="showModal">
    Show Modal
  </button>
</template>
```
npm package: @modalor/vue
Description: A modal state manager for Vue.
Author: Croatia Lu
Latest version: 1.1.2

# @modalor/vue

A modal state manager for Vue3.

## Install

```bash
pnpm add @modalor/vue
```

## Usage

1. Render the Modalor in the root of your app.

```vue
<script lang="ts" setup>
import { Modalor } from '@modalor/vue'
</script>

<!-- App.vue -->
<template>
  <!-- ... -->
  <Modalor />
</template>
```

2. create a modal with your own modal component

```ts
// modal.ts
import { create } from '@modalor/vue'
import { h } from 'vue'

interface ModalProps {
  title: string
  // ...
}

// 1. create modal wrapper
export const createModal = create<ModalProps>(({ onCancel, onOk, open, isOkLoading, props: { renderChildren, ...rest } }) => (
  h(YourModalComponent, { onCancel, onOk, open, isOkLoading, ...rest }, renderChildren)
))
```

3. create a modal with a content component

```ts
// modals/userProfile.ts
import { createModal } from './../modal'

// 1.define modal content props
interface ModalContentProps {
  username: string
  // ...
}

// 2. define modal content resolve values
interface ModalContentResolveValues {
  newUsername: string
  // ...
}
// 3. create modal wrapper with modal content props and resolve values
const userProfileModal = createModal<ModalContentProps, ModalContentResolveValues>(props => (
  h(YourModalContentComponent, { ...props })
))
```

4. use api to show modal

```vue
<script setup>
// 1. import your modal
import { userProfileModal } from '@/modals/userProfile'

async function showModal() {
  // 2. show modal
  const [isOk, result] = await userProfileModal.show({
    username: 'John'
  }, {
    title: 'User Profile', // you can override modal props
  })

  // 3. handle result
  if (isOk) {
    console.log(result.newUsername) // will be your resolve values
  }
}
</script>

<template>
  <button @click="showModal">
    Show Modal
  </button>
</template>
```
npm package: @modastar/z-router
Description: [![npm package][npm-badge]][npm]
Author: Lanstar
Latest version: 0.0.20

# Z-Router

[![npm package][npm-badge]][npm]

[npm-badge]: https://img.shields.io/npm/v/@modastar/z-router.svg
[npm]: https://www.npmjs.org/package/@modastar/z-router

Z-Router is a lightweight stack routing library for modern web applications. It provides an easy way to manage navigation and URL handling in your React projects.

# License

[MIT](LICENSE)