open-index/open-npm huggingface dataset:
npm package: @pearlbea/better-img-stencil
Description: A simple element that adds a fallback url and logging function to an image.
Latest version: 1.7.4

# better-img-stencil

A simple component that adds a fallback url and logging function to an image. Made with [Stencil Component Starter](https://github.com/ionic-team/stencil-component-starter).

## Installation

Install the [npm package](https://www.npmjs.com/package/@pearlbea/better-img-stencil) or add the script from [unkpg](https://unpkg.com/@pearlbea/better-img-stencil@1.2.8/dist/better-img-stencil.js) to your HTML page.
Example:

```html
<!-- load the element from unkpg -->
<script src="https://unpkg.com/@pearlbea/better-img-stencil@1.2.8/dist/better-img-stencil.js"></script>

<!-- or from node modules -->
<script src="../node_modules/@pearlbea/better-img/src/better-img/dist/better-img-stencil.js"></script>

<!-- use the component on your page -->
<better-img-stencil
  url="https://placeimg.com/480/640/animals"
  fallback="https://lorempixel.com/480/640"
  log="logMe"
  width="480"
  height="640"
  alt="an adorable animal">
</better-img-stencil>
```

## Usage

| property       | type   | default | description                                                                                                                       |
| -------------- | ------ | ------- | --------------------------------------------------------------------------------------------------------------------------------- |
| url (required) | string | null    | An image url. This will become the image's "src" attribute.                                                                       |
| fallback       | string | null    | An image url. If the url provided returns an error, the fallback url will be assigned to the "src" attribute.                     |
| width          | number | 480     | Image width                                                                                                                       |
| height         | number | 640     | Image height                                                                                                                      |
| alt            | string | ""      | Image alt text                                                                                                                    |
| log            | string | null    | If you provide the name of a function, it will be called if the url returns an error and receive the error object as a parameter. |

## Viewing your component

```
$ npm run dev
```

## Running the tests

```
$ npm test
```

See the Stencil testing [docs](https://stenciljs.com/docs/unit-testing/) and [Jest](https://facebook.github.io/jest/en/) for more info.

## License

[MIT](https://opensource.org/licenses/MIT)
npm package: @pearlescent/gallery
Description: The intent of this library is to provide a series of utilities that make building galleries easy using native browser functionality as much as possible.
Latest version: 0.2.2

# Gallery

The intent of this library is to provide a series of utilities that make building galleries easy using native browser functionality as much as possible.

## Carousel

The CarouselComponent is a reusable UI component that displays a series of panes in a carousel layout, allowing users to navigate through them. It supports horizontal and vertical directions, and can be configured with a delay between pane transitions. The component also provides methods to halt and resume progression, making it easy to integrate with other interactive elements.

To use the CarouselComponent, simply wrap your panes in the `<pls-carousel>` element and add the `plsCarouselPane` directive to each pane. Configure the carousel's direction and delay using the `config` input. For example:

```html
<pls-carousel [config]="{ direction: 'horizontal', delay: 5000 }">
  <div plsCarouselPane>...</div>
  <div plsCarouselPane>...</div>
  <div plsCarouselPane>...</div>
  <div plsCarouselPane>...</div>
  <div plsCarouselPane>...</div>
</pls-carousel>
```

Panes do not necessarily need to be the same dimensions, some could be wider.
npm package: @pearlescent/resize
Description: Resize provides multiple angular utility directives to monitor the size of an html element. Only supports box model.
Latest version: 0.1.2

# Resize

Resize provides multiple angular utility directives to monitor the size of an html element. Only supports box model.

## OnResize

A directive that simply spits out the current inline (width) and block (height) sizes of an Element.

### Usage - Use element size change in component implementation.

In component.ts:

```ts
handleSize(size: CurrentSize) {
    // ... do something
}
```

In template:

```html
<div (plsOnResize)="handleSize($event)"></div>
```

### Usage - Confined to template

```html
<div plsResize #resize="plsResize"></div>

@let inlineSize = resize.currentSize().inlineSize;
<!-- ... Do something with inlineSize -->
```

## ResizeBreakpointsDirective

A directive that matches your element width to a breakpoint. Essentially a directive implementation of the
[`matchContainer()`](https://github.com/w3c/csswg-drafts/issues/6205) function which will eventually come to CSS. The
current implementation does not depend on the `matchContainer` polyfill.

### Usage - Use element size change in component implementation.

In component.ts:

```ts
handleBreakpointChange(breakpoints: CurrentBreakpoints) {
    // ... do something
}
```

In template:

```html
<div
  plsResizeBreakpoints="{ inlineBreakpoints: [200, 400, 1600] }"
  (inlineBreakpointChanged)="handleBreakpointChange($event)"
>
  ...
</div>

<!-- If you inject a global config with default thresholds, you can use the event listener directly -->
<div (plsOnResizeBreakpoints)="handleBreakpointChange($event)">...</div>
```

### Usage - Confined to template

```html
<div
  plsResizeBreakpoints="{
    inlineBreakpoints: [200, 400, 1600],
  }"
  #breakpoint="plsResizeBreakpoints"
></div>

@let inlineBreakpoint = breakpoint.inlineBreakpoint();
<!-- ... Do something with inlineSize -->
```
npm package: @pearlescent/visibility
Description: A simple, no-frills visibility utility. Will tell you if a component is 100% inside the viewport, and when a visible component exits the viewport.
Latest version: 0.1.1

# Visibility

A simple, no-frills visibility utility. Will tell you if a component is 100% inside the viewport, and when a visible
component exits the viewport.

## Usage

1. Add `IsVisibilityDirective` to `hostDirectives` of the component you want to monitor visibility for:

```ts
import { Component, OnInit, computed, effect } from '@angular/core';

@Component({
  selector: 'selector-name',
  templateUrl: 'name.component.html',
  hostDirectives: [IsVisibleDirective],
})
```

and then assign the isVisible signal to a local field so you can perform actions on it.

```ts
export class NameComponent implements  {
   private readonly isVisible = inject(IsVisibleDirective).isVisible;
   protected readonly computeValueWhenIsVisible = computed(() => {
      const i = this.isVisible();
      if (i) return 'foo';

      return 'bar';
   });

   constructor() {
      effect(() => {
         const i = this.isVisible();
         if (i) doSomeWork();
      });
   }
}
```
npm package: @pearmiracle/xy-signature
Description: xylink's xy-signature by node
Author: Jacks
Latest version: 2.2.1

小鱼易联 签名算法工具包

npm i @pearmiracle/xy-signature

yarn add @pearmiracle/xy-signature

## 签名算法 V2

```js
import { SignatureV2 } from '@pearmiracle/xy-signature'

const enterpriseId = '' //企业ID，可在小鱼云视讯管理平台获取
const x_xy_clientid = '' //小鱼向三方提供的应用id，可在小鱼云视讯管理平台获取
const x_xy_clientsecret = '' //小鱼向三方提供的应用密钥，可在小鱼云视讯管理平台获取

const V2 = new SignatureV2(enterpriseId, x_xy_clientid, x_xy_clientsecret)

//如果需要在控制台打印，设置isLog为ture，默认为false
//V2.isLog = true

const signs = await V2.getSigns(method, uri, requestBody)
```