open-index/open-npm huggingface dataset:
npm package: @hbgj/native-api
Description: native交互h5
Author: yujindong
Latest version: 1.0.7
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@hbgj/native-api`


# Native与h5页面交互api h5端实现  

<p align="center">
    <a href="https://www.npmjs.com/package/@hbgj/native-api"><img alt="npm" src="https://img.shields.io/npm/v/@hbgj/native-api.svg"></a>
    <a href="https://www.npmjs.com/package/@hbgj/native-api"><img alt="npm" src="https://img.shields.io/npm/dt/@hbgj/native-api.svg?style=flat-square"></a>
    <a href="https://www.npmjs.com/package/@hbgj/native-api"><img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/@hbgj/native-api.svg?style=flat-square"></a>
    <a href="https://travis-ci.org/huoli-front/hbgj-components"><img alt="Travis (.org)" src="https://img.shields.io/travis/huoli-front/hbgj-components.svg?style=flat-square"></a>
</p>  

## 通信协议 jsonrpc 2.0
## 本组件依赖 js-cookie

## Usage
    1. `npm i @hbgj/native-api`
```ecmascript 6
    
    import NativeApi from "@hbgj/native-api";

    NativeApi.invoke("method", { param1: 1, param2: 2}, function(err, result) {
        if(err) {
            console.log(err);
        } else {
            console.log(result)
        }
    });
```
npm package: @hbgj/quickapi
Description: quickapi bridge
Author: yujindong
Latest version: 1.1.23
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# 快应用与h5页面交互api h5端实现  

<p align="center">
    <a href="https://www.npmjs.com/package/@hbgj/quickapi"><img alt="npm" src="https://img.shields.io/npm/v/@hbgj/quickapi.svg"></a>
    <a href="https://www.npmjs.com/package/@hbgj/quickapi"><img alt="npm" src="https://img.shields.io/npm/dt/@hbgj/quickapi.svg?style=flat-square"></a>
    <a href="https://www.npmjs.com/package/@hbgj/quickapi"><img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/@hbgj/quickapi.svg?style=flat-square"></a>
    <a href="https://travis-ci.com/github/huoli-front/hbgj-components">
    <img alt="Travis (.com)" src="https://img.shields.io/travis/com/huoli-front/hbgj-components?style=flat-square"></a>
</p>  

# 请使用 1.1.x 以后的版本
## 通信协议 jsonrpc 2.0
## 本组件依赖 Promise 
引入Promise支持<a href="#webpack-promise">推荐做法</a>

## Usage
    1. `npm i @hbgj/quickapi`
    2. 引入api，你的环境需要有Promise支持
```ecmascript 6
    // 你可能需@babel/polyfill 但不推荐此做法
    // import "@babel/polyfill";
    
    import QuickApi from "@hbgj/quickapi";

    QuickApi.invoke("method", { param1: 1, param2: 2})
        .then((result) => {
            console.log(result);
        }).catch((err) => {
            console.log(err);   
        })
```
  
  
## webpack管理项目 增加promise支持
<a name="webpack-promise"></a>

* 安装依赖  
` npm i -S es6-promise `
* 修改webpack配置
```ecmascript 6

    plugins: [
        new webpack.ProvidePlugin({
            Promise: ['es6-promise', 'Promise']
        }),
        ...
    ]
```
npm package: @hbgj/tools
Description: 前端功能组件库
Latest version: 1.0.47
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

工具，UI组件库

## 安装

### 使用 npm 或 yarn 安装

```bash
$ npm i -D @hbgj/tools
```
npm package: @hbilal_9/vue3-chat-scroll
Description: 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.
Latest version: 0.0.4

# 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: @hbilal_9/vue3-star-ratings
Description: Vue 3 simple and customizable component for star ratings
Author: HBilal Khan Yousafzai
Latest version: 0.0.8

# Vue Star Ratings

Vue 3 simple and customizable component for star ratings


## Features

- Simple to use
- HTML Encode Characher Stars without quality loss
- customize color, size, font-family, and counts of stars

## Screenshots

![App Screenshot](https://i.postimg.cc/yYX6rd3y/Screenshot-2023-02-05-at-12-49-58-PM.png)

![App Screenshot](https://i.postimg.cc/2jHNqZWJ/vue-star-ratings.gif)

## Installation

Install Vue Stars Ratings with npm

```bash
  npm i @hbilal_9/vue3-star-ratings
```

## Browser with CDN

```html
<script src="https://unpkg.com/@hbilal_9/vue3-star-ratings/dist/index.js"></script>
```
    
## Setup

Import Images Dragger in main.ts

```bash
  import StarRatings from '@hbilal_9/vue3-star-ratings'
  import '@hbilal_9/vue3-star-ratings/dist/style.css'
  app.use(StarRatings)
```

Use as component

```bash
  import StarRatings from '@hbilal_9/vue3-star-ratings'
  import '@hbilal_9/vue3-star-ratings/dist/style.css'
```
In template

```
  <star-ratings :starsCounts="7" v-model="ratings"></star-ratings>
```
you can also pass change event
```
  <star-ratings @star-change="getRatings"></star-ratings>
```
in script

```
function getRatings(e){
    console.log(e)
}
```

##  Usage
```bash
<script setup lang="ts">
  import { ref } from 'vue';
  const ratings = ref(0)

</script>

<template>
    <star-ratings v-model="ratings"></star-ratings>

    You added {{ ratings }} stars ratings.
</template>

```

## Custom Style

You can pass a custom class as a props to design the component according to your needs

```
<star-ratings v-model="ratings" class="custom-style" />
```

css 

```
.custom-style {
    color: red !important;
    font-size: 5rem !important;
    font-family: 'system-ui', 'Courier New', Courier, monospace;
}
```
## Props

| Prop          | Description                                                                                       | Type             | Default |
| ------------- | ------------------------------------------------------------------------------------------------- | ---------------- | ------- |
| starsCounts      | Stars counts                                | Number | 5      |
| fillColor     | This is the color of the stars when active or hover                                                        | String           | #ED8A19 |
| size     | star size in accept px and rem                                                        | String           | 3rem |
| fontFamily     | This is the font family of the stars,this will auto select accounding to your system's fontFamily                                                  | String           | 'system-ui' |

 

## Support Me
support me to publish more packages like this for free.

[![Coffee](https://img.shields.io/badge/Coffee-Buy%20me%20a%20coffee-yellow)](https://www.buymeacoffee.com/hbilal)