open-index/open-npm huggingface dataset:
npm package: @mycolaos/frosted-glass
Description: Web component for creating frosted glass effects on web elements.
Author: Mycolaos
Latest version: 2.0.0

# \<frosted-glass\> Web Component
This effect creates a frosted glass appearance over any element, simulating the look of ice crystals forming on a cold window. It uses a combination of blur, subtle noise, and crystalline patterns to achieve a realistic icy overlay.

## Features

- Realistic frosted glass effect (blur, crystalline pattern)
- Subtle melting animation on hover (via melted state)
- Handles parent border offsets for perfect overlay
- Pointer events are disabled for the glass layer (parent handles interaction)
- Lightweight, no external dependencies
- Easy integration as a drop-in web component

## Component API

### Attributes

- `color-rgb`: Sets the color of the frosted glass effect. Accepts `r,g,b` value. For example, `color-rgb="255,0,0"` for red. Default is `255, 255, 255` (white).
- `opacity`: Adjusts the opacity of the frosted effect. Accepts a number between 0 (fully transparent) and 1 (fully opaque). This value controls the opaqueness of the frosted glass background color. Note: the crystalline patterns and highlights may use different opacity levels relative to this value for a more realistic effect.
- `z-index`: Sets the z-index of the frosted glass layer. Accepts any valid CSS z-index value (number or 'auto').
- `melted-color-rgb`, `melted-opacity`, `melted-z-index`: Optional. Set the color, opacity, or z-index for the melted (hover) state. Same format as above. If omitted, defaults to the base value.

### Behavior

- On hover (pointer enters parent), the glass enters the "melted" state, using melted-* attributes if set.
- Pointer events are disabled for the glass layer; use events on the parent element.
- The glass overlays the parent's border, not just the content box.
- The component automatically sets the parent element's position to `relative` if needed for correct overlay, and restores it on disconnect.

## Usage

1. Include the `frosted-glass.js` script in your HTML file:
```html
<script src="frosted-glass.js"></script>
```
Or install via npm:
```bash
npm install @mycolaos/frosted-glass
```
Or yarn:
```bash
yarn add @mycolaos/frosted-glass
```

2. Use the `<frosted-glass>` tag inside elements you want to apply the effect to:
```html
<button class="frosty-button">
  <!-- Your content here -->
  <frosted-glass></frosted-glass>
</button>

<button class="button-with-white-background">
  <!-- Your content here -->
  <frosted-glass color-rgb="0,187,255" melted-color-rgb="255,255,255" melted-opacity="0.25"></frosted-glass>
</button>

<p>
  Some text with a frosted glass effect.
  <frosted-glass color-rgb="0,200,255" opacity="0.5" melted-opacity="0.8"></frosted-glass>
</p>
```
npm package: @mycolorway/tao
Description: The component solution for Rails project
Author: farthinker
Latest version: 2.0.0-beta.14

# Tao on Rails [![Build Status](https://travis-ci.org/mycolorway/tao_on_rails.svg?branch=master)](https://travis-ci.org/mycolorway/tao_on_rails)

Tao on Rails provide both frontend and backend component solution for rails project.

## Frontend Components

## Backend Components

## Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/mycolorway/tao_on_rails. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.

## License

The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
npm package: @mycolorway/tao_editor
Description: Rich text editor based on Tao
Author: farthinker
Latest version: 1.0.0-beta.1

# TaoEditor
Short description and motivation.

## Usage
How to use my plugin.

## Installation
Add this line to your application's Gemfile:

```ruby
gem 'tao_editor'
```

And then execute:
```bash
$ bundle
```

Or install it yourself as:
```bash
$ gem install tao_editor
```

## Contributing
Contribution directions go here.

## License
The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
npm package: @mycolorway/tao_form
Description: UI library based on tao
Author: farthinker
Latest version: 1.0.0-beta.7

# TaoForm
Short description and motivation.

## Usage
How to use my plugin.

## Installation
Add this line to your application's Gemfile:

```ruby
gem 'tao_form'
```

And then execute:
```bash
$ bundle
```

Or install it yourself as:
```bash
$ gem install tao_form
```

## Contributing
Contribution directions go here.

## License
The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
npm package: @mycolorway/tao_ui
Description: UI library based on tao
Author: farthinker
Latest version: 1.0.0-beta.5

# Tao UI

Tao UI provide basic global styles and related tools for [Tao](https://github.com/mycolorway/tao_on_rails) project.

## Installation
Add this line to your application's Gemfile:

```ruby
gem 'tao_ui'
```

And then execute:
```bash
$ bundle
```

Or install it yourself as:
```bash
$ gem install tao_ui
```
npm package: @mycolorway/vest-cli
Description: A lightweight tool to improve wechat miniprogram development experience.
Author: farthinker
Latest version: 1.0.3

# vest 的命令行工具

### 安装

```
npm i @mycolorway/vest-cli -g
```

### 支持的命令

#### vest create

从模版创建小程序项目

#### vest dev

使用 `.env.development` 里的环境变量预编译小程序，并且在源文件修改之后自动重新编译

#### vest build

使用 `.env.production` 里的环境变量预编译小程序，可以增加 `-w` 参数监听源文件变化

#### vest test

基于 Jest 运行 test 文件夹里的测试用例，可以增加 `--coverage` 参数来生成测试覆盖率报告
npm package: @mycolorway/vest-form
Description: A miniprogram form component based on vest.
Author: farthinker@gmail.com
Latest version: 1.0.3

# vest-form

基于 [vest](https://github.com/mycolorway/vest) 开发的小程序表单组件。

## 使用方法

1. 将 vest-form 添加为项目依赖：

```bash
npm i --save @mycolorway/vest-form
```

2. 重新编译项目：

```bash
vest build
```

如果当前项目不是 vest 项目，则需要手动点击微信开发者工具的“构建 npm”选项。

3. 添加 vest-form 组件需要的全局样式：

```scss
// app.scss
/*= import './miniprogram_npm/@mycolorway/vest-form/styles/base' */
```

如果当前项目不是 vest 项目：

```scss
// app.wxss
@import './miniprogram_npm/@mycolorway/vest-form/styles/base'
```

4. 然后就可以在页面中添加需要的表单和字段组件了，具体可以参考 [demo](https://github.com/mycolorway/vest-form/tree/master/demo/src/pages/index)

## 编写新的表单字段组件

vest-form 只提供了一些基础类型的表单字段，我们可以在项目中根据业务需要编写新的表单字段组件，具体可以参考[这个例子](https://github.com/mycolorway/vest-form/blob/master/demo/src/components/another-string-input/another-string-input.js)。

注意，表单字段组件的定义中必须使用 vest-form 提供的一个 behavior，然后打开 addGlobalClass 选项：

```js
import inputBehavior from '@mycolorway/vest-form/inputs/behaviors/input'

Component({
  behaviors: [inputBehavior],

  options: {
    addGlobalClass: true
  },

  ...
})
```
npm package: @mycolorway/wepy-cli
Description: 参见：[小程序框架wepy](https://github.com/wepyjs/wepy)
Author: Gcaufy
Latest version: 1.7.2-alpha4

# 小程序框架wepy命令行工具

参见：[小程序框架wepy](https://github.com/wepyjs/wepy)


### 安装
```bash
npm install wepy-cli -g
```

### Changelog
[查看CHANGELOG](https://github.com/wepyjs/wepy/blob/master/CHANGELOG.md)
npm package: @mycolorway/weui-wxss
Description: weui-wxss
Author: wechat ui team
Latest version: 1.1.1

WeUI for 小程序 为微信小程序量身设计  
=====

[![npm version](https://img.shields.io/npm/v/weui-wxss.svg)](https://www.npmjs.org/package/weui-wxss)
[![Gitter](https://badges.gitter.im/weui/weui.svg)](https://gitter.im/weui/weui?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)

## 概述

[WeUI](https://github.com/weui/weui) 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含`button`、`cell`、`dialog`、 `progress`、 `toast`、`article`、`actionsheet`、`icon`等各式元素。


## 预览
用[微信web开发者工具](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html)打开`dist`目录（请注意，是dist目录，不是整个项目）

<img src='https://cloud.githubusercontent.com/assets/2395166/20168869/48a75b02-a75f-11e6-89aa-503d65c8ad8e.png' width='344' alt='preview' />

![WeUI for 小程序](https://user-images.githubusercontent.com/2395166/29502325-ada080f6-8661-11e7-94c2-23d638210f45.jpg)


## 使用

- 组件的wxml结构请看`dist/example/`下的组件
- 样式文件可直接引用`dist/style/weui.wxss`，或者单独引用`dist/style/widget`下的组件的`wxss`


## 文档

WeUI 视觉标准参考 [weui-design](https://github.com/weui/weui-design)


## License
The MIT License(http://opensource.org/licenses/MIT)

请自由地享受和参与开源


## 贡献

如果你有好的意见或建议，欢迎给我们提issue或pull request。