open-index/open-npm huggingface dataset:
npm package: @nora-soderlund/markerbundle
Description: A way to bundle Google Maps JS markers that are placed at the same coordinate.
Author: Nora Söderlund
Latest version: 1.0.3

# Get Started
```bat
npm install @nora-soderlund/MarkerBundle
```

# Example
```js
import MarkerBundle from "@nora-soderlund/MarkerBundle";

const center = {
    lat: 58.3797077874133,
    lng: 12.324640529544448
};

const map = new google.maps.Map(document.getElementById("map"), {
    center,

    zoom: 12
});

MarkerBundle.getMarkerImage().then((image) => {
    const bundle = new MarkerBundle(map, center, image);

    const infowindow = new google.maps.InfoWindow({});
    
    for(let index = 1; index < 5; index++) {
        const marker = new google.maps.Marker({
            map: this.map,
            position: this.center
        });
    
        marker.addListener("click", (event) => {
            infowindow.setContent("Marker " + index);
    
            infowindow.open({
                map: this.map,
                anchor: bundle.marker
            });
        });
    
        bundle.addMarker(marker);
    }
});
```
npm package: @nora-soderlund/shiki
Description: shiki
Author: Pine Wu
Latest version: 0.12.0

<p>
  <h2 align="center">Shiki</h2>
</p>
<p align="center">
  Shiki is a beautiful Syntax Highlighter. <a href="http://shiki.matsu.io">Demo</a>.
</p>

## Usage

```sh
npm i shiki
```

```js
const shiki = require('shiki')

shiki
  .getHighlighter({
    theme: 'nord'
  })
  .then(highlighter => {
    console.log(highlighter.codeToHtml(`console.log('shiki');`, { lang: 'js' }))
  })

// <pre class="shiki" style="background-color: #2e3440"><code>
//   <!-- Highlighted Code -->
// </code></pre>
```

```html
<script src="https://unpkg.com/shiki"></script>
<script>
  shiki
    .getHighlighter({
      theme: 'nord'
    })
    .then(highlighter => {
      const code = highlighter.codeToHtml(`console.log('shiki');`, { lang: 'js' })
      document.getElementById('output').innerHTML = code
    })
</script>
```

Clone [shikijs/shiki-starter](https://github.com/shikijs/shiki-starter) to play with Shiki, or try it out on [Repl.it](https://repl.it/@octref/shiki-starter).

Learn more from the GitHub repo: [shikijs/shiki](https://github.com/shikijs/shiki).


## Credits

- Shiki uses [vscode-oniguruma](https://github.com/microsoft/vscode-oniguruma)
- A lot of code is based on [vscode-textmate](https://github.com/Microsoft/vscode-textmate)

## Sponsorship

If you find Shiki useful, please consider sponsoring my Open Source development. Thank you 🙏

https://github.com/sponsors/octref

## License

MIT © [Pine Wu](https://github.com/octref)
npm package: @nora7aki/common
Description: 用于构建项目的常用方法
Latest version: 1.0.3

# @nora7aki/common

用于构建项目的常用方法

## 安装

```
yarn add @nora7aki/common
```

## 引入

```
import {debounce} from @nora7aki/common
```

## API

### animateCSS

```js
/**
 * 依赖 animate.css 执行动画方法
 * @param {*} node          DOM元素
 * @param {*} animation     动画名称
 * @param {*} prefix        前缀，默认animate__
 * @returns
 */
function animateCSS(node, animation, prefix = 'animate__')
```

### debounce

```js
/**
 * 返回防抖后的方法
 * @param {*} fn    执行方法
 * @param {*} delay 延迟时间
 * @returns
 */
function debounce(fn, delay = 1000)
```

### downloadArrayBufferAsFile

```js
/**
 * env：brower
 * info：将arraybuffer数据打包为文件下载
 * @param {*} data      arraybuffer数据
 * @param {*} filename  打包成为的文件名
 */
function downloadArrayBufferAsFile(data, filename)
```

### isIOS

```js
/**
 * 是否是iOS设备
 * @returns
 */
function isIOS()
```

### isLocalhost

```js
/**
 * 是否是localhost测试环境
 * @returns
 */
function isLocalhost()
```

### isWechat

```js
/**
 * 是否是微信浏览器
 * @returns
 */
function isWechat()
```

### metaType

-   本质是 `Object` 对象，但可以通过 `keys`、`values`、`objects`、`datas` 获取不同类型的数据
-   `keys` 获取属性列表，有序
-   `values` 获取值列表，有序
-   `objects` 获取属性对象键值对
-   `datas` 获取属性 {id,value} 对象

```js
/**
 * 元数据类型
 * 可实现自动数据缓存和归类
 * 通过datas、objs、keys、values实现对应数据的获取
 */
class MetaType
```

```js
/**
 * MetaType的工厂函数
 * @returns metatype对象
 */
function metaType()
```

### queryString

```js
/**
 * 获取url参数值
 * @param {*} name 参数名
 * @returns
 */
function queryString(name)
```

### screenSize

```js
/**
 * 根据参数返回相应的屏幕所需尺寸
 * 以及当前设备姿态是否匹配
 * @param {*} direction     none|landscape|portrait
 * @returns
 */
function screenSize(direction = 'none')
```

### colorBasedOnBgColor

```js
/**
 * 根据背景颜色返回字体颜色
 * @param {*} bgColor       背景颜色
 * @param {*} lightColor    亮色字体颜色
 * @param {*} darkColor     暗色字体颜色
 * @returns
 */
function colorBasedOnBgColor(bgColor, lightColor = '#ffffff', darkColor = '#666666')
```
npm package: @nora7aki/three
Description: 用于构建 three.js 项目的常用方法
Latest version: 1.0.8

# @nora7aki/three

用于构建 three.js 项目的常用方法

## 安装

```
yarn add @nora7aki/three
```

## 引入

```
import {setRenderFps} from @nora7aki/three
```

## API

### canvasText

```js
/**
 * 创建文本sprite对象
 * @param {*} text  文本的值
 * @param {*} size  文本大小
 * @param {*} style 文本颜色
 * @returns sprite对象
 */
canvasText(text, size = 20, style = '#ffffff')
```

### setRenderFps

```js
/**
 * 限制渲染器的刷新频率
 * @param {*} renderFunction    render函数
 * @param {*} fps               刷新频率
 * @returns
 */
setRenderFps(renderFunction, fps = 25)
```

### setSkyBox

```js
/**
 * 设置宇宙背景图
 * @param {*} directions  方向图片
 * @param {*} distance  距离
 * @returns 返回背景箱网格模型
 */
setSkyBox(distance = 5000, directions) 
```

### setSkyBoxLight

```js
/**
 * 通过盒材质设置场景背景贴图或光线
 * @param {*} scene                 作用场景
 * @param {*} directions            方向图片 px nx py ny pz nz
 * @param {*} background     是否用作背景，默认true
 * @param {*} intensity      光照探针强度，默认1，0时不使用光照探针
 */
function setSkyBoxLight(scene, directions, background = true, intensity = 1) {
```

### sphereLayers

```js
/**
 * 批量创建模型层
 * @param {*} mesh      原始模型
 * @param {*} path      贴图资源路径
 * @param {*} opts      设置 {id,src,transparent,scale,visible}
 * @param {*} loaded    加载后回调 加载完最后一个材质后回调
 * @returns
 */
sphereLayers(mesh, path, opts, loaded) 
```

### sphereShader

```js
/**
 * 地球蓝色光晕
 * @param {*} camera    摄像头
 * @param {*} geometry  地球网格模型
 * @param {*} scale     相对倍率
 * @returns
 */
sphereShader(camera, geometry, scale = 1.03)
```

### sphereMeshByGeojson

```js
/**
 * 根据geojson数据生成球形网格模型
 * @param {*} r     球半径
 * @param {*} data  geojson数据
 * @returns
 */
function sphereMeshByGeojson(r, data)
```

### raycasterRegister

```js
/**
 * 为某个模型配置点击事件
 * 通过 ret.on(dom,type,func) 来注册事件
 * 通过 ret.off(type) 来取消注册事件
 * func的默认两个参数为(e,intersects)
 * @param {*} camera
 * @param {*} meshs
 * @param {*} recursive
 * @returns 事件对象
 */
function raycasterRegister(camera, meshs, recursive = true) 
```

### panScope

```js
/**
 * 界定 OrbitControl 控制器的平移范围
 * 界定范围是三维空间中的正立方体
 * 返回的对象中dispose方法可以取消掉限制
 * @param {*} controls  控制器
 * @param {*} min       最小坐标
 * @param {*} max       最大坐标
 */
function panScope(controls, min, max) {
```

### cubeEnvironment

```js
/**
 * 设置背景贴图及环境光
 * @param {*} directions    盒材质图片数组
 * @returns                 object {cubeTexutre,lightProbe}
 */
async function cubeEnvironment(directions) 
```

### materialConverter

```js
/**
 * 转换3d对象中的材质类型
 * @param {*} object3D  需要转换的对象、组
 * @param {*} intype    需要转换的类型
 * @param {*} outtype   转换之后的类型
 * @param {*} callback  回调函数
 */
function materialConverter(object3D, intype, outtype, callback) 
```
npm package: @nora7aki/vue-field
Description: 用于移动端快速构建基于 vue 项目 three.js 场景的框架
Latest version: 1.0.0

# @nora7aki/vue-field

用于移动端快速构建基于 vue 项目 three.js 场景的框架

## 安装

```
yarn add @nora7aki/vue-field
```

## 引入

```
import field from '@nora7aki/vue-field'

app.use(field)
```

## 使用

在组件中使用 `field`

```vue
<template>
    <field ref="fieldComponent" />
</template>
```

## 脚本样例

```vue
<script>
export default {
    setup() {
        const fieldComponent = ref(null)
        const cameraType = 'perspective'

        let field, scene, controls, renderer, camera

        // 往场景中增加网格对象
        function dealinscene() {
            const geometry = new THREE.TorusKnotGeometry(10, 3, 100, 16)
            const material = new THREE.MeshBasicMaterial({ color: 0xffff00 })
            const torusKnot = new THREE.Mesh(geometry, material)
            scene.add(torusKnot)
        }

        onMounted(() => {
            // 从组件获取field对象
            field = fieldComponent.value.field
            // 获取初始化的场景
            scene = field.scene.base
            // 创建渲染器
            renderer = field.renderer.webgl = field.webglRenderer()
            // 创建摄像机 perspectiveCamera / orthographicCamera
            camera = field.camera.base = field[`${cameraType}Camera`]({
                near: 0.1,
                far: 7000,
                position: [0, 0, 100],
                target: [0, 0, 0],
                fov: 75,
                size: renderer._s,
            })
            // 创建控制器
            controls = field.orbitControls(camera, renderer.domElement)

            // 创建render函数
            field.render.base = function () {
                controls.update()
                renderer.render(scene, camera)
            }

            // 讲渲染器结果canvas加载到页面
            // fieldDiv是固定的
            fieldComponent.value.fieldDiv.append(renderer.domElement)
            dealinscene()
        })

        return {
            fieldComponent,
            cameraType,
        }
    },
}
</script>
```

## 联动 vue-force

[@nora7aki/vue-force](https://www.npmjs.com/package/@nora7aki/vue-force)

将 `Field` 组件放在 `Force` 组件当中，同时在 `setup` 的时候给 `field` 对象增加 `posture` 参数

```js
// 设置posture属性
const force = inject('force')
force.posture = 'portrait'

onMounted(()=>{
    // ...
    field.posture = force.posture
})
```
npm package: @nora7aki/vue-force
Description: 用于设置页面，适配手机端横竖屏问题
Latest version: 1.1.3

# @nora7aki/vue-force

用于设置页面，适配手机端横竖屏问题

## 安装

```
yarn add @nora7aki/vue-force
```

## 引入

```
import force from '@nora7aki/vue-force'

app.use(force)
```

## 使用

在父组件中使用 `force`

```vue
<template>
    <force posture="portrait">
        <router-view />
    </force>
</template>
```

## 在子组件中动态调整强制状态

```vue
<script setup>
    const force = inject('force')
    force.posture = 'portrait'
</script>
```

## 参数说明

| 参数    | 说明                                                              | 默认      |
| ------- | ----------------------------------------------------------------- | --------- |
| posture | 强制横竖屏的标识，可以是`'none'` 、 `'portrait'` 、 `'landscape'` | `'none'`  |
| param   | 用于在 `provide/inject` 的参数名                                  | `'force'` |
npm package: @norabelle-labs/focus
Description: Focus management made easy!
Author: Nora Belle Reichwald
Latest version: 1.1.1

# @norabelle-labs/focus
Focus management made easy!

A tiny utility for stepping into or out of elements and simulating tab flow.

## Installing

```shell
pnpm add @norabelle-labs/focus
```
```shell
bun add @norabelle-labs/focus
```
```shell
yarn add @norabelle-labs/focus
```
```shell
npm install @norabelle-labs/focus
```

## Usage

```typescript
import { Focus } from "@norabelle-labs/focus";

// Move the focus forwards (simulate a tab press)
Focus.step(1)

// Move it forwards 3 steps
Focus.step(3)

// Move it backwards instead (shift + tab)
Focus.step(-1)

// Select a given element explicitly
let recover = Focus.select(document.querySelector("#my-input"))

// Recover where focus was before selecting the element;
recover()

// Move focus inside a container element (last element steps to first and vice versa)
Focus.step(1, document.querySelector("#my-form"))
Focus.step(-1, document.querySelector("#my-form"))

// Move focus to the first element before the form
Focus.stepOutOf(document.querySelector("#my-form"), -1)

// Select a given element in a container by index (default first element)
recover = Focus.stepInto(document.querySelector("#my-popover"), 2)

// Select the last element in a container
Focus.stepInto(document.querySelector("#my-popover"), -1)

// Recover where focus was before stepping into the popover
recover()

// Check if focus is inside an element or the element itself is focused
if (Focus.isInside(document.querySelector("#my-popover"))) {
  console.log("focus inside popover!")
}

// Get all focusable elements inside one or more containers
const elements = Focus.getFocusableElements(
  ...document.querySelectorAll("#my-popover>.content"),
  document.querySelector("#my-popover>.actions"),
)

// Step focus constrained to these elements
Focus.stepThrough(elements, 2)
```

All functions that actively shift focus, return a function, that resets the focus
to its previous location. They also accept an optional `FocusOptions` argument in
both the original function and the returned function to restore the previous
focus with.