open-index/open-npm huggingface dataset:
npm package: @luxii/wmcomponent
Description: A Component Library for Vue 3
Latest version: 0.0.10

# Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

## Type Support For `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
npm package: @luxonis-public/shadow-panda-preset
Description: The preset for PandaCSS that contains the theme for Shadow Panda
Latest version: 0.7.5

# @shadow-panda/preset

`Shadow Panda` is created based on [shadcn/ui](https://ui.shadcn.com/), tailored specifically for developers utilizing [Panda CSS](https://panda-css.com/) as an alternative to Tailwind CSS.

This package is a **preset** for [Panda CSS](https://panda-css.com/) that allows you to use the same components as [shadcn/ui](https://ui.shadcn.com/), but with [Panda CSS](https://panda-css.com/).

## Documentation

Visit our documentation: [https://shadow-panda.dev/](https://shadow-panda.dev/)

## Install

Install the preset and a utility package (used by most components) by running:

```bash
npm i -D @shadow-panda/preset
```

```bash
npm i @shadow-panda/style-context
```

Add the preset to your `panda.config.ts`

```ts
import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  // Required: Add the preset to your config.
  presets: ['@shadow-panda/preset'],

  // Optional: Enable CSS reset
  preflight: true,

  // Use React
  jsxFramework: 'react',

  // Optional: Emit artifacts to `node_modules` as a package.
  // The copy-paste component examples use `@shadow-panda/styled-system` as the import path of the generated files.
  // If you choose not to use this option, you should rewrite your component imports as needed.
  // @see https://panda-css.com/docs/references/config#emitpackage
  emitPackage: true,
  outdir: '@shadow-panda/styled-system',

  // Other configurations and overrides...
})
```

Compile Panda CSS, copy [components](https://shadow-panda.dev/docs/overview/supported-components) and use it!

## Acknowledgement

A huge thanks to the creators of [shadcn/ui](https://ui.shadcn.com/) for providing an excellent set of components and documentation.  
Most of the components and documentation were taken from [shadcn/ui](https://ui.shadcn.com/).

Also, a huge thanks to:

- [Panda CSS](https://panda-css.com/)
- [Radix UI](https://radix-ui.com/)
npm package: @luxorus/nuxt-snackbar
Description: A highly customizable snackbar module for Nuxt
Latest version: 0.1.2

![Nuxt Snackbar](https://github.com/Luxoruus/nuxt-snackbar/assets/64335628/222d2ca4-4eca-4171-bb1f-96bbdd036d09)

# Nuxt Snackbar

[![npm version][npm-version-src]][npm-version-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]

> A highly customizable module to create snackbars for the Nuxt framework

## Features

- Built using [Tailwind CSS](https://tailwindcss.com) and [Nuxt Icon](https://github.com/nuxt-modules/icon)
- Highly customizable (shape, position, color...)
- Easy to integrate and use

## Installation

Add the `@luxorus/nuxt-snackbar` dependency to your project

```sh
# Using npm
npm install @luxorus/nuxt-snackbar

# Using pnpm
pnpm add @luxorus/nuxt-snackbar
```

Then, add the module to the modules array in `nuxt.config.ts`

```ts
export default defineNuxtConfig({
  modules: ['@luxorus/nuxt-snackbar'],
})
```

And that's it! No further configuration is needed to run the module

## Usage

1. Add the `<SnackbarContainer />` tag to the `app.vue` file or to your layout file

```html
<template>
  <div>
    <div>
      <h1>My amazing app</h1>
    </div>
    <SnackbarContainer />
  </div>
</template>
```

2. Use the provided `useSnackbars` composable to add snackbars

```ts
useSnackbars().push({ type: 'error', content: 'My error message', duration: 5000 })
```

## Documentation

### Visual Customization

These are props passed to the `<SnackbarContainer />` tag to personalize the appearance of the snackbars

**position**
- Type: `"top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"`
- Default: `"bottom-center"`

**shape**
- Type: `"rounded" | "oval" | "sharp"`
- Default: `"oval"`

**color**
- Type: `String`
- Default: `"#fff"`

**background**
- Type: `String`
- Default: `"#2f2f2f"`

### API

This module comes with a `useSnackbars` composable to directly manipulate the snackbars

```ts
// Access all the snackbars
useSnackbars().snackbars

// Add a snackbar
// Types: "error" | "success" | "warning" | "info"
useSnackbars().push({type: "info", content:"My snackbar info", duration: 10000})

// Remove a snackbar with a specific id
useSnackbar().remove(2)
```

## Credits

- [nuxt/nuxt](https://github.com/nuxt/nuxt)
- [nuxt-modules/tailwindcss](https://github.com/nuxt-modules/tailwindcss)
- [tailwindlabs/tailwindcss](https://github.com/tailwindlabs/tailwindcss)
- [nuxt-modules/icon](https://github.com/nuxt-modules/icon)

## License

This project is licensed under the [MIT License](https://github.com/Luxoruus/nuxt-snackbar/blob/main/LICENSE)

<!-- Badges -->
[npm-version-src]: https://img.shields.io/npm/v/%40luxorus%2Fnuxt-snackbar
[npm-version-href]: https://www.npmjs.com/package/@luxorus/nuxt-snackbar
[license-src]: https://img.shields.io/npm/l/%40luxorus%2Fnuxt-snackbar
[license-href]: https://github.com/Luxoruus/nuxt-snackbar/blob/main/LICENSE
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com