open-index/open-npm huggingface dataset:
npm package: @miyagi/core
Description: miyagi is a component development tool for JavaScript template engines.
Author: Michael Großklaus
Latest version: 4.0.1

<div align="center">
  <img src="logo.svg" width="300" height="60" alt="miyagi">
</div>

# miyagi

_miyagi_ is a component development tool for JavaScript templating engines.

## Benefits

- No overhead in your project: _miyagi_ only needs one configuration file.
- Works with any directory structure (as long as you have one folder per component).
- Helps you developing your components encapsulated.
- Mock data (static or dynamic) allows developing independently from a backend.
- Validates your mock data against your JSON schema files.
- Documentation of your components using markdown.
- You can customize the layout, so it fits the design of your project.
- Use any kind of templating engine by providing your own render function.
- Allows creating a static build.
- Lots of functionality invokable via CLI or JavaScript API.
- Automatically created design tokens overview based on CSS custom properties.

## Requirements

- NodeJS `20.11.0` or higher

## Demos

### Handlebars

[handlebars.demos.miyagi.dev](https://handlebars.demos.miyagi.dev) (Code: [https://github.com/miyagi-dev/demos/tree/main/handlebars](https://github.com/miyagi-dev/demos/tree/main/handlebars))

### Web Components

[web-components.demos.miyagi.dev](https://web-components.demos.miyagi.dev) (Code: [https://github.com/miyagi-dev/demos/tree/main/web-components](https://github.com/miyagi-dev/demos/tree/main/web-components))

## Documentation

[https://docs.miyagi.dev](https://docs.miyagi.dev)

## Sponsor

<a href="https://factorial.io"><img src="https://logo.factorial.io/color.png" width="40" height="56" alt="Factorial"></a>
npm package: @miyagi/twig-drupal
Description: Adds twig and Drupal functionality to @miyagi/core
Author: Michael Großklaus
Latest version: 0.2.3

# @miyagi/twig-drupal

This extension adds support for specific twig and Drupal functionality to [@miyagi/core](https://npmjs.com/package/@miyagi/core).

## Features

### Drupal attributes

- `addClass`
- `setAttribute`

[More about Drupal attributes](https://www.drupal.org/docs/8/theming-drupal-8/using-attributes-in-templates)

To use Drupal attributes in your mock files, add `$drupal: true` to the object.

### twig

**NOTE:** If you need to add additional filters, functions or tags, please refer to the [_miyagi_ documentation](https://docs.miyagi.dev/configuration/extending-template-engine/).

#### Functions and filters

This plugin uses [twig-drupal-filters](https://www.npmjs.com/package/twig-drupal-filters), so all its functions and filters are supported.

#### Tags

- `trans` / `endtrans`
- `plural`

## Installation

```bash
npm i --save-dev @miyagi/twig-drupal
```

or

```bash
yarn add -D @miyagi/twig-drupal
```

### Usage

Add the extension to your `.miyagi.js` like this:

```js
module.exports = {
  extensions: [require('@miyagi/twig-drupal')],
  ...
}
```
npm package: @miyagi/twig-laravel
Description: Laravel/twig support for @miyagi/core
Author: Michael Großklaus
Latest version: 0.2.3

# @miyagi/twig-laravel

When using Laravel together with twig, this extension adds support for specific functionality to [@miyagi/core](https://npmjs.com/package/@miyagi/core).

## Features

### Laravel localization

In your templates, you might want to use translations with dot notation like `{{ trans('foo.bar') }}` or `{{ trans_choice('foo.bar', 2) }}`.
By using this extension, `miyagi` can load the translations from your localization files and use these.

By default the english localilzation files are used, which can be overwritten though.

See [Usage](#usage) for more information.

### twig

**NOTE:** If you need to add additional filters, functions or tags, please refer to the [_miyagi_ documentation](https://docs.miyagi.dev/configuration/extending-template-engine/).

#### Functions

This extension adds mocking to functions like `csrf_field` or `asset`, so `miyagi` does not throw an error when using these in your templates.

## Installation

```bash
npm i --save-dev @miyagi/twig-laravel
```

or

```bash
yarn add -D @miyagi/twig-laravel
```

### Usage

Add the extension to your `.miyagi.js` like this:

```js
module.exports = {
  extensions: [[require('@miyagi/twig-laravel'), {
    engine: Twig // optional, only necessary if you extended Twig in your configuration file,
    // the `locales` object is optional, the values below are the default values
    locales: {
      rootFolder: "resources/lang",
      lang: "en",
    }
  }]],
  ...
}
```
npm package: @miyako-discord/eslint-config
Description: ESLint Configuration for Miyako Discord Bot and related projects
Author: Ravener
Latest version: 1.0.3

# ESLint Config Miyako

This is my personal ESLint configuration for developing Miyako and its related projects.

## Usage

* Requires ESLint v9+
* Built for ESM and Node.js with TypeScript

```sh
$ npm install eslint @miyako-discord/eslint-config
```

In your `eslint.config.js`:

```js
import miyakoConfig from '@miyako-discord/eslint-config';

export default [
    ...miyakoConfig
];
```

This config is opinionated to my preferences and may change anytime without warning.
npm package: @miyakoochi/react-layout-components
Description: A lightweight and easy-to-use package for building layouts with React.
Latest version: 0.0.4

# react-layout-components

A lightweight and easy-to-use package for building layouts with React.

## Installation

```
npm install @miyakoochi/react-layout-components
```

## Usage

The package provides two simple layout components:

### Grid

The Grid component allows you to create a grid layout with CSS Grid. You can pass in all the relevant CSS Grid styles as props, including templateColumns, templateRows, columnGap, and more.

```tsx
import { Grid } from "@miyakoochi/react-layout-components";

function App() {
  return (
    <Grid templateColumns="repeat(3, 1fr)" columnGap="20px">
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
      <div>Item 5</div>
    </Grid>
  );
}
```

### Flex

The Flex component allows you to create a flex layout with CSS Flexbox. You can pass in all the relevant CSS Flexbox styles as props, including justifyContent, alignItems, and more.

```tsx
import { Flex } from "@miyakoochi/react-layout-components";

function App() {
  return (
    <Flex justifyContent="center" alignItems="center">
      <div>Centered content</div>
    </Flex>
  );
}
```

## License

This package is released under the MIT License.
npm package: @miyaoka/vite-plugin-commit-info
Description: Vite plugin to provide commit info as a virtual module
Author: miyaoka
Latest version: 0.0.1

# @miyaoka/vite-plugin-commit-info

[![npm version](https://img.shields.io/npm/v/@miyaoka/vite-plugin-commit-info)](https://www.npmjs.com/package/@miyaoka/vite-plugin-commit-info)
[![npm downloads](https://img.shields.io/npm/dm/@miyaoka/vite-plugin-commit-info)](https://www.npmjs.com/package/@miyaoka/vite-plugin-commit-info)
[![license](https://img.shields.io/npm/l/@miyaoka/vite-plugin-commit-info)](https://github.com/miyaoka/vite-plugin-commit-info/blob/main/LICENSE)

Vite plugin to provide commit info as a virtual module.

Retrieve commit hash and date at build time to identify deployed versions.

## Install

```bash
pnpm add -D @miyaoka/vite-plugin-commit-info
```

## Usage

```ts
// vite.config.ts
import { commitInfoPlugin } from '@miyaoka/vite-plugin-commit-info'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [commitInfoPlugin()],
})
```

```ts
// In your app
import { commitInfo } from 'virtual:commit-info'

console.log(commitInfo.hash) // "abc1234..."
console.log(commitInfo.date) // 1705312800 (UNIX timestamp)
```

## TypeScript

Add type support by one of these methods:

**Option 1: tsconfig.json**

```json
{
  "compilerOptions": {
    "types": ["@miyaoka/vite-plugin-commit-info/client"]
  }
}
```

**Option 2: env.d.ts**

```ts
/// <reference types="@miyaoka/vite-plugin-commit-info/client" />
```

## CI Environment

In CI environments (e.g., Docker builds without `.git` directory), set these environment variables:

```bash
COMMIT_HASH=$(git rev-parse HEAD)
COMMIT_DATE=$(git show -s --format=%ct HEAD)
```

Example GitHub Actions:

```yaml
- name: Build
  run: pnpm build
  env:
    COMMIT_HASH: ${{ github.sha }}
    COMMIT_DATE: ${{ github.event.head_commit.timestamp }}
```

## Why use this plugin?

Compared to generating a file in a prebuild script:

- **No missed execution**: Integrated into the build process, always runs
- **Always fresh**: Retrieves info on every build, no stale data
- **No file management**: Virtual module, no intermediate files to manage

## License

MIT
npm package: @miyaoka/vite-plugin-doc-block
Description: Vite plugin to strip <doc> custom blocks from Vue SFC
Author: miyaoka
Latest version: 0.0.2

# @miyaoka/vite-plugin-doc-block

[![npm version](https://img.shields.io/npm/v/@miyaoka/vite-plugin-doc-block)](https://www.npmjs.com/package/@miyaoka/vite-plugin-doc-block)
[![npm downloads](https://img.shields.io/npm/dm/@miyaoka/vite-plugin-doc-block)](https://www.npmjs.com/package/@miyaoka/vite-plugin-doc-block)
[![license](https://img.shields.io/npm/l/@miyaoka/vite-plugin-doc-block)](https://github.com/miyaoka/vite-plugin-doc-block/blob/main/LICENSE)

Vite plugin to strip `<doc>` custom blocks from Vue SFC.

Write documentation directly in your Vue components. The plugin removes them during build, so they don't affect bundle size.

## Install

```bash
pnpm add -D @miyaoka/vite-plugin-doc-block
```

## Usage

```ts
// vite.config.ts
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import { docBlockPlugin } from '@miyaoka/vite-plugin-doc-block'

export default defineConfig({
  plugins: [docBlockPlugin(), vue()],
})
```

> **Note**: Place `docBlockPlugin()` before other Vue-related plugins.
> This plugin must run before `vite-plugin-vue-inspector` (used by `vite-plugin-vue-devtools`),
> which would error when parsing HTML-like strings (e.g. `<RouterView>`) inside `<doc>` blocks.

Then you can write `<doc>` blocks in your Vue components:

```vue
<doc lang="md">
# MyComponent

This component displays user information.

## Props

- `userId` - The user ID to display

## Usage

Used in the user profile page.
</doc>

<script setup lang="ts">
const props = defineProps<{ userId: string }>()
</script>

<template>
  <div>{{ user.name }}</div>
</template>
```

The `<doc>` block will be removed during build.

## Why

- **Colocation**: Keep documentation next to the code it describes
- **Zero runtime cost**: Stripped at build time
- **IDE friendly**: Documentation is visible when editing the component

## Why not a simpler approach?

A common approach to ignore custom blocks is to return an empty module:

```ts
// This does NOT work with vite-plugin-vue-inspector
const vueDocsPlugin = {
  name: 'vue-docs',
  transform(_code, id) {
    if (!/vue&type=doc/.test(id))
      return
    return `export default ''`
  },
}
```

However, this doesn't solve the `vite-plugin-vue-inspector` issue. The inspector parses the SFC before this transform runs, and HTML-like strings inside `<doc>` blocks (e.g. `<RouterView>`) cause parsing errors.

This plugin uses `enforce: 'pre'` to run before the inspector and removes the content from the SFC source directly, preventing the error.

## License

MIT
npm package: @miyaoka/vue-youtube-embed-lite
Description: Embed YouTube player without iframe for better performance
Author: Masaya Kazama
Latest version: 1.1.0

# vue-youtube-embed-lite

[![NPM version](https://img.shields.io/npm/v/@miyaoka/vue-youtube-embed-lite.svg?style=flat)](https://npmjs.com/package/@miyaoka/vue-youtube-embed-lite) [![NPM downloads](https://img.shields.io/npm/dm/@miyaoka/vue-youtube-embed-lite.svg?style=flat)](https://npmjs.com/package/@miyaoka/vue-youtube-embed-lite) [![CircleCI](https://circleci.com/gh/miyaoka/vue-youtube-embed-lite.svg?style=shield)](https://circleci.com/gh/miyaoka/vue-youtube-embed-lite)

> Embed YouTube player without iframe for better performance.

Demo: https://miyaoka.github.io/vue-youtube-embed-lite/

## Install

```sh
npm i @miyaoka/vue-youtube-embed-lite
```

## Usage

```vue
<template>
  <YoutubeEmbedLite
    vid="M7lc1UVf-VE"
    thumb-quality="hq"
    :params="{start: 100}"
  />
</template>

<script>
import YoutubeEmbedLite from '@miyaoka/vue-youtube-embed-lite'

export default {
  components: {
    YoutubeEmbedLite
  }
}
</script>
```
npm package: @miyaokamarina/uq
Description: React-friendly file upload queue.
Author: Marina Miyaoka
Latest version: 0.0.17

# @miyaokamarina/uq

> React-friendly file upload queue.

-   Immutable.
-   Uploads progress tracking.
-   Uploads abort.
-   Uploads removal.
-   Retry support.
-   React hooks.

## Upload states

-   Unfinished:
    -   Pending: added to the queue, but not yet started.
    -   Ongoing: in progress.
-   Finished:
    -   Done: successfully finished.
    -   Failed:
        -   Error: failed due to error.
        -   Aborted: cancelled by user.

## TODO

-   Upload batching.
-   Batch abort/retry/remove/clear.
-   Relative paths support.

## License

MIT
npm package: @miyauci/react-click-outside
Description: react custom hooks for outside click
Author: TomokiMiyauci
Latest version: 1.0.4

<div align="center">
  <img width="180" src="../../docs/public/logo-react.png" alt="logo image" />

![npm version](https://img.shields.io/npm/v/@miyauci/react-click-outside.svg?style=flat)
![bundle size](https://img.shields.io/bundlephobia/min/@miyauci/react-click-outside)
![npm download](https://img.shields.io/npm/dw/@miyauci/react-click-outside?color=blue)
![npm type definitions](https://img.shields.io/npm/types/@miyauci/react-click-outside)
![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)
![Gitmoji](https://img.shields.io/badge/gitmoji-%20😜%20😍-FFDD67.svg?style=flat)
![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)
![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

</div>

# @miyauci/react-click-outside

## :truck: Install

```bash
npm i -s @miyauci/react-click-outside
or
yarn add @miyauci/react-click-outside
```

## :bulb: Usage

This provides React Custom Hooks.

```tsx
import React, { useRef } from 'react'
import { useClickOutside } from '@miyauci/react-click-outside'

const App: FC = () => {
  const ref = useRef<HTMLElement>(null)
  const onClick = () => console.log('Outside clicked')

  useClickOutside(ref, onClick)

  return (
    <div>
      Outer
      <div ref={ref}>
        <div>Inter</div>
      </div>
    </div>
  )
}
```

## :revolving_hearts: Related

- [@miyauci/vue-click-outside](../vue)
npm package: @miyauci/result
Description: Minimum result type port of Rust
Latest version: 2.0.0

# result

[![deno land](http://img.shields.io/badge/available%20on-deno.land/x-lightgrey.svg?logo=deno)](https://deno.land/x/result_js)
[![deno doc](https://doc.deno.land/badge.svg)](https://deno.land/x/result_js?doc)
[![GitHub release (latest by date)](https://img.shields.io/github/v/release/TomokiMiyauci/result)](https://github.com/TomokiMiyauci/result/releases)
[![codecov](https://codecov.io/github/TomokiMiyauci/result/branch/main/graph/badge.svg)](https://codecov.io/github/TomokiMiyauci/result)
[![GitHub](https://img.shields.io/github/license/TomokiMiyauci/result)](LICENSE)

[![test](https://github.com/TomokiMiyauci/result/actions/workflows/test.yaml/badge.svg)](https://github.com/TomokiMiyauci/result/actions/workflows/test.yaml)
[![NPM](https://nodei.co/npm/@miyauci/result.png?mini=true)](https://nodei.co/npm/@miyauci/result/)
[![standard-readme compliant](https://img.shields.io/badge/readme%20style-standard-brightgreen.svg)](https://github.com/RichardLitt/standard-readme)
[![semantic-release: angular](https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release)

Minimum result type port of Rust.

[Option](https://github.com/TomokiMiyauci/option) version.

## Table of Contents <!-- omit in toc -->

- [Install](#install)
- [Usage](#usage)
- [API](#api)
- [Acknowledgements](#acknowledgements)
- [Contributing](#contributing)
- [License](#license)

## Install

deno.land:

```ts
import * as mod from "https://deno.land/x/result_js/mod.ts";
```

npm:

```bash
npm i @miyauci/result
```

## Usage

Type [Result](https://deno.land/x/result_js/mod.ts?s=Result) represents an
success or failure.

```ts
import {
  Err,
  Ok,
  type Result,
  unwrap,
} from "https://deno.land/x/result_js/mod.ts";
import { assertThrows } from "https://deno.land/std/testing/asserts.ts";

function divide(
  numerator: number,
  denominator: number,
): Result<number, string> {
  if (!denominator) return Err("divide by 0");

  return Ok(numerator / denominator);
}

const opt = divide(100, 0);
assertThrows(() => unwrap(opt));
```

All [operators](https://deno.land/x/result_js/mod.ts#Functions) for
[Result](https://deno.land/x/result_js/mod.ts?s=Result) are separated from
prototype.

## API

All APIs can be found in the [deno doc](https://deno.land/x/result_js?doc).

## Acknowledgements

- [Rust std::result](https://doc.rust-lang.org/std/result/index.html)

## Contributing

See [contribution](CONTRIBUTING.md).

## License

[MIT](LICENSE) © 2023 Tomoki Miyauchi
npm package: @miyauci/vdom
Description: Virtual DOM specification and diff-patch algorithm
Latest version: 1.0.0-beta.1

# vdom

[![deno land](http://img.shields.io/badge/available%20on-deno.land/x-lightgrey.svg?logo=deno)](https://deno.land/x/vdom)
[![deno doc](https://doc.deno.land/badge.svg)](https://deno.land/x/vdom?doc)
[![GitHub release (latest by date)](https://img.shields.io/github/v/release/TomokiMiyauci/vdom)](https://github.com/TomokiMiyauci/vdom/releases)
[![codecov](https://codecov.io/github/TomokiMiyauci/vdom/branch/main/graph/badge.svg)](https://codecov.io/gh/TomokiMiyauci/vdom)
[![License](https://img.shields.io/github/license/TomokiMiyauci/vdom)](LICENSE)

[![test](https://github.com/TomokiMiyauci/vdom/actions/workflows/test.yaml/badge.svg)](https://github.com/TomokiMiyauci/vdom/actions/workflows/test.yaml)
[![NPM](https://nodei.co/npm/@miyauci/vdom.png?mini=true)](https://nodei.co/npm/@miyauci/vdom/)
[![standard-readme compliant](https://img.shields.io/badge/readme%20style-standard-brightgreen.svg)](https://github.com/RichardLitt/standard-readme)
[![semantic-release: angular](https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release)

Virtual DOM specification and diff-patch algorithm.

## Background

Various projects with virtual-dom at their core have problems with their
modularity.

In particular, the codebase is chaotic, with a mixture of declarative HTML and
reactive programming.

This project provides a virtual-dom module for doing declarative HTML.

## Install

deno.land:

```ts
import * as mod from "https://deno.land/x/vdom/mod.ts";
```

npm:

```bash
npm i @miyauci/vdom
```

## Usage

```ts
/// <reference lib="dom" />
import {
  createElement,
  diff,
  patch,
  type VElement,
  VNodeType,
} from "https://deno.land/x/vdom/mod.ts";

function app(count: number): VElement {
  return {
    nodeType: VNodeType.Element,
    tagName: "div",
    attributes: [{
      nodeType: VNodeType.Attribute,
      name: "style",
      value: "color: red;",
    }],
    children: [
      { nodeType: VNodeType.Text, data: count.toFixed() },
    ],
  };
}

let count = 0;
let vnode = app(count);
const root = createElement(vnode, document);
document.body.append(root);

setInterval(() => {
  const newVNode = app(++count);
  const patches = diff(vnode, newVNode);

  patch(root, patches, document);
  vnode = newVNode;
}, 1000);
```

## Documentation

- [FAQ](docs/faq.md)

## API

See [deno doc](https://deno.land/x/vdom?doc) for all APIs.

## Contributing

See [contributing](CONTRIBUTING.md).

## License

[MIT](LICENSE) © 2023 Tomoki Miyauchi
npm package: @miyauci/vue-click-outside
Description: vue directive for outside click
Author: TomokiMiyauci
Latest version: 1.2.4

<div align="center">
  <img width="180" src="../../docs/public/logo-vue.png" alt="logo image" />

![npm version](https://img.shields.io/npm/v/@miyauci/vue-click-outside.svg?style=flat)
![bundle size](https://img.shields.io/bundlephobia/min/@miyauci/vue-click-outside)
![npm download](https://img.shields.io/npm/dw/@miyauci/vue-click-outside?color=blue)
![npm type definitions](https://img.shields.io/npm/types/@miyauci/vue-click-outside)
![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)
![Gitmoji](https://img.shields.io/badge/gitmoji-%20😜%20😍-FFDD67.svg?style=flat)
![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)
![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

</div>

# @miyauci/vue-click-outside

> vue directive for outside click

## :truck: Install

```bash
npm i -s @miyauci/vue-click-outside
or
yarn add @miyauci/vue-click-outside
```

## :bulb: Usage

This provides 3 way Usage.

### Global directive

It can be used with all components.

```ts
import { createApp } from 'vue'
import App from './App.vue'
import { plugin } from '@miyauci/vue-click-outside'

const app = createApp(App)

app.use(plugin()) // 'v-click-outside' directive usable by default.
// Or you can customize directive name => 'v-click-out'
app.use(
  plugin({
    name: 'ClickOut' // PascalCase
  })
)
app.mount('#app')
```

template

```html
<template>
  <div v-click-outside="onClickOut">...</div>
</template>
```

#### Options API

```ts
<script lang="ts">
export default {
  methods: {
    onClickOut(event) {
      console.log(event)
    }
  }
}
</script>
```

#### Composition API

```ts
<script setup lang="ts">
const onClickOut = (event) => console.log(evnet)
</script>
```

### Directive

```ts
<script lang="ts">
import { defineComponent } from 'vue'
import { directive } from '@miyauci/vue-click-outside'

export default defineComponent({
  directives: {
    ClickOutside: directive
  },
  setup() {
    return {
      onClickOut: (e) => console.log(e)
    }
  }
})
</script>
```

### Mixin

```ts
<script lang="ts">
import { defineComponent } from 'vue'
import { mixin } from '@miyauci/vue-click-outside'
export default defineComponent({
  mixins: [mixin]

  setup() {
    return {
      onClickOut: (e) => console.log(e)
    }
  }
}
</script>
```

## :revolving_hearts: Related

- [@miyauci/react-click-outside](../react)
npm package: @miyauci/vue-data-table
Description: <img src="https://img.shields.io/npm/v/@miyauci/vue-data-table?color=blue"> <img src="https://img.shields.io/npm/l/@miyauci/vue-data-table"> <img src="https://img.shields.io/npm/dw/@miyauci/vue-data-table"> <img src="https://img.badgesize.io/https:/unpkg.
Latest version: 1.1.1

# vue-data-table

<img src="https://img.shields.io/npm/v/@miyauci/vue-data-table?color=blue">
<img src="https://img.shields.io/npm/l/@miyauci/vue-data-table">
<img src="https://img.shields.io/npm/dw/@miyauci/vue-data-table">
<img src="https://img.badgesize.io/https:/unpkg.com/@miyauci/vue-data-table/?label=Brotli%20size%3A%20JS&compression=brotli">

> Composition API baseed table component

## Install

```bash
yarn add @miyauci/vue-data-table
```

```ts
import { createApp } from 'vue'
import plugin from '@miyauci/vue-data-table'

createApp(App).use(plugin()).mount('#app')
```
npm package: @miyazhong/video-player-vue
Description: A Vue.js project
Author: miyazhong
Latest version: 1.0.0

# video-player-vue

> A Vue.js project

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build
```

For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
npm package: @miyoo/d2c
Description: npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id>] | from-git]
Author: michaely
Latest version: 5.2.0

# test

npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id>] | from-git]

### npm version patch
npm package: @miyoo/yi-ui
Description: A Component Library for Vue3.0
Latest version: 0.0.1

<p align="center">
  <img width="300px" src="https://user-images.githubusercontent.com/10731096/95823103-9ce15780-0d5f-11eb-8010-1bd1b5910d4f.png">
</p>

<p align="center">
  <a href="https://www.npmjs.org/package/element-plus">
    <img src="https://img.shields.io/npm/v/element-plus.svg">
  </a>
  <a href="https://npmcharts.com/compare/element-plus?minimal=true">
    <img src="http://img.shields.io/npm/dm/element-plus.svg">
  </a>
  <br>
</p>

<p align="center">Element Plus - A Vue.js 3.0 UI library</p>

* 💪 Vue 3.0 Composition API
* 🔥 Written in TypeScript

## Status: Beta

This project is still under heavy development. Feel free to join us and make your first pull request.

[![Edit element-plus](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/element-plus-ncxnt?fontsize=14&hidenavigation=1&theme=dark)

<br/>
<p align="center">
  <b>Special thanks to the generous sponsorship by:</b>
</p>
<br/>
<table align="center" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td align="center" valign="middle">
        <a href="https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index" target="_blank">
          <img width="150px" src="https://user-images.githubusercontent.com/10731096/100414179-11741980-30b4-11eb-9ee3-4d0a30d4e21d.png">
        </a>
      </td>
      <td align="center" valign="middle">
        <a href="https://bit.dev/?from=element-ui" target="_blank">
          <img width="150px" src="https://user-images.githubusercontent.com/10095631/41342907-e44e7196-6f2f-11e8-92f2-47702dc8f059.png">
        </a>
      </td>
    </tr>
  </tbody>
</table>

---

## Documentation
You can find for more details, API, and other docs on [https://element-plus.org](https://element-plus.org/)

国内[加速镜像站点](https://element-plus.gitee.io/)

Join our [Discord](https://discord.link/ElementPlus) to start communicating with everybody.

## Bootstrap project
With command
```bash
$ yarn bootstrap
```
the project will install all dependencies and run `lerna bootstrap` to initialize the project

## Website preview
With command
```bash
$ yarn website-dev
```
the project will launch website for you to preview all existing component

You can also use this command to start a blank page to debug
```bash
$ yarn website-dev:play
//source file: ./website/play/index.vue
```
## Component migration process
1. Convert the item in https://github.com/element-plus/element-plus/projects/1 to an issue
2. Assign yourself to the issue
3. Author your component by generating new component command below
4. Migrate tests and docs
5. Open a new pull request, fill in the component issue link in 1

## Generate new component
With command
```bash
$ yarn gen component-name
```

Note the `component-name` must be in `kebab-case`, combining words by replacing each space with a dash.

## Commit template
With command
```bash
yarn cz
```

Example
```
[TYPE](SCOPE):DESCRIPTION#[ISSUE]
# example feat(button):add type 'button' for form usage #1234
```