open-index/open-npm huggingface dataset:
npm package: @soerenmartius/vue3-clipboard
Description: A Vue 3 binding for clipboard.js
Author: Soeren Martius
Latest version: 0.1.2

# vue3-clipboard


![Build](https://github.com/soerenmartius/vue3-clipboard/workflows/Build/badge.svg)

[Clipboard.js](https://clipboardjs.com/) bindings for Vue 3.

This repository is a port of Inndy's
[vue-clipboard2](https://github.com/Inndy/vue-clipboard2) plugin for Vue3.

## Install

`npm install --save @soerenmartius/vue3-clipboard`

## Usage

### Import the `v-clipboard` directive globally

**`src/main.ts`**

```typescript
import { createApp } from 'vue'
import App from './App.vue'
import { VueClipboard } from '@soerenmartius/vue3-clipboard'

createApp(App).use(VueClipboard).mount('#app')

```

### Import the `v-clipboard` directive for a specific component

## Examples

### Apply the v-clipboard directive to an element

```typescript
<template>
  <input v-model="value" />
  <button v-clipboard="value">Copy</button>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const value = ref('lorem')

    return { value }
  },
})
</script>
```

### Copy value of an input, and handle events separately.

```typescript
<template>
  <input v-model="value" />
  <button
    v-clipboard:copy="value"
    v-clipboard:success="onSuccess"
    v-clipboard:error="onError"
  >
    Copy
  </button>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const value = ref('lorem')

    const onSuccess = () => {
      console.log('success')
    }

    const onError = () => {
      console.log('error')
    }

    return { value, onSuccess, onError }
  },
})
</script>
```

### Standalone usage of the toClipboard function

```typescript
<template>
  <input v-model="value" />
  <button @click="toClipboard(value)">Copy</button>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

import { toClipboard } from '@soerenmartius/vue3-clipboard'

export default defineComponent({
  setup() {
    const value = ref('lorem')

    return { value, toClipboard }
  },
})
</script>
```

## Contributing

Contributions are always encouraged and welcome!
For the process of accepting changes, we use
[Pull Requests](https://github.com/soerenmartius/vue3-clipboard/pulls).
For feature requests please fill an
[issue](https://github.com/soerenmartius/vue3-clipboard/issues/new).

## License

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
npm package: @soerenuhrbach/command-bus
Description: A lightweight command bus for TypeScript/JavaScript.
Author: Sören Uhrbach
Latest version: 1.0.1

# @soerenuhrbach/command-bus

A lightweight command bus for TypeScript/JavaScript.

## Installation

Install by `npm`

```sh
npm install --save @soerenuhrbach/command-bus
```

**or** install with `yarn`

```sh
yarn add @soerenuhrbach/command-bus
```

Modify your `tsconfig.json` to include the following settings

```json
{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}
```

Add a polyfill for the Reflect API. You can use:

- [reflect-metadata](https://www.npmjs.com/package/reflect-metadata)

The Reflect polyfill import should only be added once, and before command bus is used:

```typescript
// main.ts
import "reflect-metadata";

// Your code here...
```

## Usage

### Creating a command

```typescript
// test-command.ts
import { Command, CommandInterface } from "@soerenuhrbach/command-bus";

@Command()
class TestCommand implements CommandInterface {
}
```

### Creating a command handler

```typescript
// test-command-handler.ts
import { TestCommand } from './test-command'; 
import { CommandHandler, CommandHandlerInterface } from "@soerenuhrbach/command-bus";

@CommandHandler(TestCommand)
class TestCommandHandler implements CommandHandlerInterface<TestCommand> {
  public handle(command: TestCommand) {}
}
```

### Register command and command handler

#### With using "@CommandHandler()" decorator

```typescript
// main.ts
import { CommandBus } from '@soerenuhrbach/command-bus';
import { TestCommandHandler } from './test-command-handler';

const bus = new CommandBus();
bus.registerHandler(TestCommandHandler);
```

#### Without using "@CommandHandler()" decorator

```typescript
// main.ts
import { CommandBus } from '@soerenuhrbach/command-bus';
import { TestCommand } from './test-command';
import { TestCommandHandler } from './test-command-handler';

const bus = new CommandBus();
bus.register(TestCommand, TestCommandHandler);
```

### Dispatching command

```typescript
// main.ts
import { CommandBus } from '@soerenuhrbach/command-bus';
import { TestCommand } from './test-command';
import { TestCommandHandler } from './test-command-handler';

const bus = new CommandBus();
bus.register(TestCommand, TestCommandHandler);

bus.dispatch(new TestCommand).then(() => console.log('Command dispatched and executed'));
```

### Using command bus with your own di container

By default this package uses the di container provided by the package '@soerenuhrbach/di'.
You can use your own di container by passing your container as constructor parameter.

```typescript
// main.ts
import { CommandBus } from '@soerenuhrbach/command-bus';
import { ContainerInterface } from '@soerenuhrbach/di';

const container: ContainerInterface = new CustomContainer();
const bus = new CommandBus(container);
```
npm package: @soerenuhrbach/event-dispatcher
Description: A lightweight event dispatcher for TypeScript/JavaScript.
Author: Sören Uhrbach
Latest version: 2.0.3

# @soerenuhrbach/event-dispatcher

A lightweight event dispatcher for TypeScript/JavaScript.

## Installation

Install by `npm`

```sh
npm install --save @soerenuhrbach/event-dispatcher
```

**or** install with `yarn`

```sh
yarn add @soerenuhrbach/event-dispatcher
```

Modify your `tsconfig.json` to include the following settings

```json
{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}
```

Add a polyfill for the Reflect API. You can use:

- [reflect-metadata](https://www.npmjs.com/package/reflect-metadata)

The Reflect polyfill import should only be added once, and before event dispatcher is used:

```typescript
// main.ts
import "reflect-metadata";

// Your code here...
```

## Usage

### Creating a event

```typescript
// test-event.ts
import { EventInterface } from "@soerenuhrbach/event-dispatcher";

class TestEvent implements EventInterface { }
```

### Creating a event handler

#### Using the "@EventHandler()" decorator

```typescript
// test-event-handler.ts
import { TestEvent } from './test-event'; 
import { EventHandler, EventHandlerInterface } from "@soerenuhrbach/event-dispatcher";

@EventHandler(TestEvent)
class TestEventHandler implements EventHandlerInterface<TestEvent> {
  public handle(event: TestEvent) {}
}
```

#### Using the "@when()" Decorator

```typescript
// test-event-handler.ts
import { TestEvent } from './test-event'; 
import { EventHandlerInterface, when } from "@soerenuhrbach/event-dispatcher";

class TestEventHandler implements EventHandlerInterface<TestEvent> {
  @when(TestEvent)
  public handleTestEvent(event: TestEvent) {}
}
```

### Register event handler

```typescript
// main.ts
import { EventDispatcher } from '@soerenuhrbach/event-dispatcher';
import { TestEventHandler } from './test-event-handler';

const dispatcher = new EventDispatcher();
dispatcher.registerHandler(TestEventHandler);
```

### Dispatching event

```typescript
// main.ts
import { EventDispatcher } from '@soerenuhrbach/event-dispatcher';
import { TestEvent } from './test-event';
import { TestEventHandler } from './test-event-handler';

const dispatcher = new EventDispatcher();
dispatcher.registerHandler(TestEventHandler);
dispatcher.dispatch(new TestEvent).then(() => console.log('Event dispatched and executed'));
```

### Using event dispatcher with your own di container

By default this package uses the di container provided by the package '@soerenuhrbach/di'.
You can use your own di container by passing your container as constructor parameter.

```typescript
// main.ts
import { EventDispatcher } from '@soerenuhrbach/event-dispatcher';
import { ContainerInterface } from '@soerenuhrbach/di';

const container: ContainerInterface = new CustomContainer();
const dispatcher = new EventDispatcher(container);
```
npm package: @soerenuhrbach/message-store
Description: A lightweight message store for TypeScript/JavaScript.
Author: Sören Uhrbach
Latest version: 1.0.1

# @soerenuhrbach/message-store

A lightweight message store for TypeScript/JavaScript.

## Installation

Install by `npm`

```sh
npm install --save @soerenuhrbach/message-store
```

**or** install with `yarn`

```sh
yarn add @soerenuhrbach/message-store
```

## Usage

### Creating a store

```typescript
import { MessageStore, MessageStoreInterface } from '@soerenuhrbach/message-store';

const messageStore: MessageStoreInterface = new MessageStore();
```

### Creating a message

```typescript
import { Message } from '@soerenuhrbach/message-store';

const message: Message = new Message('foo');
```

### Adding a message 

```typescript
import { MessageStore, MessageStoreInterface, Message } from '@soerenuhrbach/message-store';

const messageStore: MessageStoreInterface = new MessageStore();
const message: Message = new Message('foo');

messageStore.add(message);
```

### Retrieving messages 

```typescript
import { MessageStore, MessageStoreInterface, Message } from '@soerenuhrbach/message-store';

const messageStore: MessageStoreInterface = new MessageStore();
const message: Message = new Message('foo');

messageStore.add(message);

const messages: Message[] = messageStore.get();
```

### Flush messages 

```typescript
import { MessageStore, MessageStoreInterface, Message } from '@soerenuhrbach/message-store';

const messageStore: MessageStoreInterface = new MessageStore();
const message: Message = new Message('foo');

messageStore.add(message);

const messages: Message[] = messageStore.flush();
```
npm package: @soerenuhrbach/query-bus
Description: A lightweight query bus for TypeScript/JavaScript.
Author: Sören Uhrbach
Latest version: 1.1.1

# @soerenuhrbach/query-bus

A lightweight query bus for TypeScript/JavaScript.

## Installation

Install by `npm`

```sh
npm install --save @soerenuhrbach/query-bus
```

**or** install with `yarn`

```sh
yarn add @soerenuhrbach/query-bus
```

Modify your `tsconfig.json` to include the following settings

```json
{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}
```

Add a polyfill for the Reflect API. You can use:

- [reflect-metadata](https://www.npmjs.com/package/reflect-metadata)

The Reflect polyfill import should only be added once, and before query bus is used:

```typescript
// main.ts
import "reflect-metadata";

// Your code here...
```

## Usage

### Creating a query

```typescript
// test-query.ts
import { Query, QueryInterface, clone } from "@soerenuhrbach/query-bus";

@Query()
class TestQuery implements QueryInterface {
  protected response = null;

  public getResponse() { return this.response; }

  public withResponse(response: any) {
    return clone(this, { response });
  }
}
```

### Creating a query handler

```typescript
// test-query-handler.ts
import { TestQuery } from './test-query'; 
import { QueryHandler, QueryHandlerInterface } from "@soerenuhrbach/query-bus";

@QueryHandler(TestQuery)
class TestQueryHandler implements QueryHandlerInterface<TestQuery> {
  public handle(query: TestQuery): TestQuery {
    return query.withResponse('response');
  }
}
```

### Register query and query handler

#### With using "@QueryHandler()" decorator

```typescript
// main.ts
import { QueryBus } from '@soerenuhrbach/query-bus';
import { TestQueryHandler } from './test-query-handler';

const bus = new QueryBus();
bus.registerHandler(TestQueryHandler);
```

#### Without using "@QueryHandler()" decorator

```typescript
// main.ts
import { QueryBus } from '@soerenuhrbach/query-bus';
import { TestQuery } from './test-query';
import { TestQueryHandler } from './test-query-handler';

const bus = new QueryBus();
bus.register(TestQuery, TestQueryHandler);
```

### Execute query

```typescript
// main.ts
import { QueryBus } from '@soerenuhrbach/query-bus';
import { TestQuery } from './test-query';
import { TestQueryHandler } from './test-query-handler';

const bus = new QueryBus();
bus.register(TestQuery, TestQueryHandler);

bus.dispatch(new TestQuery)
  .then((query) => console.log('value is ', query.getResponse()));
```

### Using query bus with your own di container

By default this package uses the di container provided by the package '@soerenuhrbach/di'.
You can use your own di container by passing your container as constructor parameter.

```typescript
// main.ts
import { QueryBus } from '@soerenuhrbach/query-bus';
import { ContainerInterface } from '@soerenuhrbach/di';

const container: ContainerInterface = new CustomContainer();
const bus = new QueryBus(container);
```
npm package: @soetji/flow-dnd
Description: A drag and drop library built using [react-dnd](https://react-dnd.github.io).
Author: Soetji Anto
Latest version: 1.0.0-beta.2

# @soetji/flow-dnd

A drag and drop library built using [react-dnd](https://react-dnd.github.io). 

This library allows an item to be dropped on empty spaces inside a container.

Currently it supports only items that flows and wraps in the left-to-right direction. In the future it will also support other directions, such as right-to-left, top-to-bottom and bottom-to-top.
npm package: @soeyu/dev-template-parser
Description: replace template parser
Latest version: 0.5.0

# @soeyu/dev-template-parser

vite-plugin
替换 vite 项目 index.html 中特定内容

基本配置

```ts
parser({
  // 通过http，https，请求获取的替换内容
  // 如果不是以http开头，会尝试使用 readfile 找本地文件
  httpParser: [
    {
      to: string,
      from: string,
      enforce: 'post' | 'pre',
    },
  ],
  strParser: [
    {
      to: string,
      from: string,
      enforce: 'post' | 'pre',
    },
  ],
})
```

使用方法
在 vite.config.js/ts

```ts
import { defineConfig } from 'vite'
import parser from '@soeyu/dev-template-parser'
export default defineConfig({
  plugins: [
    parser({
      httpParser: [
        {
          from: `http://example.com`,
          to: '<!--#include virtual="../header/header.shtml"-->',
          enforce: 'pre',
        },
        {
          from: `https://example.com`,
          to: '<!--#include virtual="/footer/footer.html"-->',
        },
        {
          from: path.resolve(__dirname, 'header.html'),
          to: '<!--#include virtual="/locaheader.html"-->',
        },
      ],
      strParser: [
        {
          from: '',
          to: 'only one line target',
        },
        {
          to: `    target line one
    target line two`,
          from: `    will replace string line one
    will replace string line two`,
        },
      ],
    }),
  ],
})
```
npm package: @sofa-boys/gatsby-theme-podcast
Description: Podcast gatsby theme.
Author: @harry830622
Latest version: 1.0.3

# Gatsby Theme Podcast

## Usage

1. Install the theme

   ```
   npm install --save @sofa-boys/gatsby-theme-podcast
   ```

1. Add the theme to your `gatsby-config.js`:

   ```
   module.exports = {
     plugins: [
       {
         resolve: '@vojtaholik/gatsby-theme-simplecast',
         options: {
           rssUrl: PODCAST_RSS_URL,
         },
       },
     ],
   }
   ```

1. Start your site

   ```
   gatsby develop
   ```

1. Customize

   See [Shadowing in Gatsby Themes](https://www.gatsbyjs.org/docs/themes/shadowing/) for details.