open-index/open-npm huggingface dataset:
npm package: @itshixun/qst-apptar
Description: QST前端项目打包压缩脚本
Author: Mutueye
Latest version: 1.0.0

# @itshixun/qst-apptar

QST前端项目打包压缩脚本

## Installation

```
npm install @itshixun/qst-apptar
```

## Usage

前端打包项目压缩工具：压缩指定文件夹到指定目录，并命名为${appName}-${version}-'YYYYMMDDhhmm'.tgz。在node环境执行。

例如下面的ts文件，打包dist文件夹为qst_compo_lib_storybook-1.0.0-202304101200.tgz这样的格式，并存储到指定该tar.ts脚本的package.json的上两级目录下。

```ts
/**
 * ./scripts/tar.ts
 */

import appTarball from '@itshixun/qst-apptar';
import packageJson from '../package.json';

appTarball({
  appName: 'qst_compo_lib_storybook',
  version: packageJson.version,
  fileList: ['./dist'],
  targetDir: '../..',
});
```

在package.json中执行该tar.ts的脚本如下：

(node环境下执行ts脚本，可以使用ts-node/esrun/esno/bun，下面例子使用了esno)

```json
"scripts": {
  "tar": "esno ./scripts/tar.ts"
}
```

-- EOF --
npm package: @itshixun/qst-compo-lib
Description: QST前端通用组件库(Vue3)
Latest version: 1.0.3

# @itshixun/qst-compo-lib

QST前端通用组件库 [文档](https://lib.qstcloud.com)

## Getting Started

#### Install

```bash
npm install @itshixun/qst-compo-lib
```

#### Usage

1. 组件库依赖前端UI体系@itshixun/qst-ui-system和ElementPlus。在main.js|ts中，初始化前端UI体系，全局引入ElementPlus，并引入样式。

   ```ts
   import { createApp } from 'vue';
   import ElementPlus from 'element-plus';
   import zhCn from 'element-plus/es/locale/lang/zh-cn';
   import { initQstTheme } from '@itshixun/qst-ui-system';
   import App from '@/App.vue';
   import 'element-plus/dist/index.css';
   // 引入组件库样式
   import '@itshixun/qst-compo-lib/dist/index.css';
   // 初始化前对UI体系
   initQstTheme();

   const app = createApp(App);
   app.use(ElementPlus, { locale: zhCn });
   app.mount('#app');
   ```

2. 在项目中引入组件并使用

```vue
<template>
  <LayoutAdmin>
    <!-- your content -->
  </LayoutAdmin>
</template>

<script lang="ts" setup>
  import { LayoutAdmin } from '@itshixun/qst-compo-lib';
</script>
```
npm package: @itshixun/qst-ui-system
Description: qst ui system
Author: mutueye
Latest version: 0.3.15

# qst-ui-system

QST 前端 UI 基础库：

1. 对接设计端定制的颜色/间距/风格(圆角/边框)等主题规范，作为 UI 设计和前端开发之间的“接口”;
2. 将设计端定制的主题规范 关联到常用组件库的主题配置上;
3. 将设计端定制的主题规范 关联到常用 css 框架的配置上;
4. 通用的 normalize(reset)样式和其他全局样式;

## 主要功能

- [x] 基于 element-plus 的 css 变量，生成主题变量配置：颜色/字色/背景色/圆角/间距/组件尺寸 等等，
- [x] 全局初始化样式：normalize，全局文字配置(字体/抗锯齿等)
- [ ] 组件库适配主题变量配置(样式覆盖)
  - [x] element-plus
  - [ ] element-ui
  - [ ] ant-design / ant-design-vue
  - [ ] vant
- [ ] css 框架适配主题变量配置
  - [x] unocss
  - [ ] windicss (windicss即将停止维护，不再进行适配)
  - [ ] tailwind

## 对接&使用说明

设计端：

1. 设计师使用[主题编辑器](https://mutueye.github.io/vite-vue3-scaffold/themeeditor)配置并导出 json 格式的主题列表
2. 在 UI 设计的过程中遵循配置好的主题进行设计

前端：

1. 在项目入口(main.js/main.ts)调用`initQstTheme()`初始化主题样式，引入设计端定制好的主题(不传则使用默认主题列表)

   ```js
   import { initQstTheme } from 'qst-ui-system';
   // 初始化qst主题，不传参数使用默认配置
   initQstTheme();

   // 类型定义
   export declare const initQstTheme: (option?: ThemeOption) => void;

   /** 主题选项 */
   export interface ThemeOption {
     /** 主题css变量命名空间 默认--el */
     namespace?: string;
     /** 主题列表 */
     themeList?: UITheme[];
     /** 主题样式设置完成后的回调函数 */
     onStylesSet?: () => void;
     /** 是否包含css重置样式(reset/normalize) 默认是 */
     cssReset?: boolean;
     /** 需要适配的组件库(进行样式覆盖/主题定制)  */
     uiLibs?: UILib | UILib[];
     /** 初始主题序号, 默认为主题列表中第一个主题 */
     initialThemeIndex?: number;
   }
   ```

2. 如果使用 element-plus 组件库，则 element 组件自动适配引入的主题配置；其他组件库需要额外的步骤(WIP)

3. 使用 css 框架(比如 unocss)，可以方便的调用主题配置进行样式编写(需要在相应的配置文件中引入主题配置 WIP)

   ```js
   import { generateUnocssTheme } from 'qst-ui-system';
   // unocss配置
   {
     ...
     presets: [...],
     safelist: [...],
     transformers: [...]
     // 生成主题配置 参数为namespace，默认'--el'
     theme: generateUnocssTheme('--el'),
     ...
   }
   ```
npm package: @itshixun/qst-utils
Description: QST前端常用工具方法库
Author: Mutueye
Latest version: 1.1.2

# @itshixun/qst-utils

QST前端常用工具方法库

## Installation

```
npm install @itshixun/qst-utils
```

## Usage

工具库包含以下方法：

### 1. appTarball

⚠️：即将弃用，请使用[@itshixun/qst-apptar](https://www.npmjs.com/package/@itshixun/qst-apptar)进行前端项目资源的打包压缩

前端打包项目压缩工具：压缩指定文件夹到指定目录，并命名为${appName}-${version}-'YYYYMMDDhhmm'.tgz。在node环境执行。

例如下面的ts文件，打包dist文件夹为qst_compo_lib_storybook-1.0.0-202304101200.tgz这样的格式，并存储到指定该tar.ts脚本的package.json的上两级目录下。

```ts
/**
 * ./scripts/tar.ts
 */

import { appTarball } from '@itshixun/qst-utils';
import packageJson from '../package.json';

appTarball({
  appName: 'qst_compo_lib_storybook',
  version: packageJson.version,
  fileList: ['./dist'],
  targetDir: '../..',
});
```

在package.json中执行该tar.ts的脚本如下：

(node环境下执行ts脚本，可以使用ts-node/esrun/esno/bun，下面例子使用了esno)

```json
"scripts": {
  "tar": "esno ./scripts/tar.ts"
}
```

### 2. formatDate

时间格式化方法，默认格式'YYYY-MM-DD hh:mm:ss'，默认空字符串'--'

```ts
import { formatDate } from '@itshixun/qst-utils';

// 获取当前日期，格式为YYYY.MM.DD hh:mm:ss
formatDate(new Date(), 'YYYY.MM.DD hh:mm:ss');

// 将时间戳转换为'YYYY-MM-DD hh:mm:ss'格式的时间字符串
formateDate(1714378189350);
```

### 3. generateUUID

基于时间戳生成标准UUID的方法

### 4. getByteLength

获取字符串的字节长度

### 5. toZeroStr

- 将数字转换为指定长度的字符串，长度不够前缀0
- 长度默认为2，比如8转换为'08'，10转换为'10'
- 如果指定目标长度为3，则9转换为'009'，34转换为'034'

<br />

---

<br />
-- 待补充 --
npm package: @itshixun/vrouter-tools
Description: vue-rotuer的路由&面包屑相关工具库
Author: Mutueye
Latest version: 0.0.5

# @itshixun/vrouter-tools

一些在特定项目结构和约定条件下使用的vue-router相关的的工具方法：

- `useRouteQuerySync()` 用于监听和同步某个具体的路由参数的vue组合式函数(composable)
- `useBreadCrumbNavigation()` 使用useRouteQuerySync构建的基于路由参数的面包屑导航工具composable
- `generateLayoutBasedRoutes()` 基于LayoutRouteConfig和LayoutRouteRecordData两个类型约定的格式构建路由配置文件时，该方法将路由配置文件中的路由放到对应的布局框架父路由下，并最终生成RouteRecordRaw[]类型的完整项目路由表

## Installation

```
npm install @itshixun/vrouter-tools
```

## Usage

TBD
npm package: @itshizhan/video-player
Description: a video-player based on vue3 and typescript
Author: itshizhan
Latest version: 1.0.1

# @itshizhan/video-player
video-player based vue3 and typescript

# Get Started
## Npm
```shell
$ npm install @itshizhan/video-player --save
```
## Yarn
```shell
$ yarn add @itshizhan/video-player --save
```

# Usage

```typescript

import { createApp } from 'vue'
import App from './App.vue'
import VPlayer from "@itshizhan/video-player";
import "@itshizhan/video-player/dist/style.css";

createApp(App).use(VPlayer).mount('#app')
```

# 更新日志
2021-08-20 
  - 区分移动端和PC的适配
  - 异步加载视频地址

2021-07-28 已适配移动端

# Inspired

This Component is inspired by this [Article](https://freshman.tech/custom-html5-video/), just refactor based on vue3 and typescript

# Referrence

https://freshman.tech/custom-html5-video/

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video

https://vitejs.dev/

https://github.com/vitejs/vite/issues/2989

https://github.com/vitejs/vite/issues/2049

https://github.com/egoist/rollup-plugin-esbuild

https://github.com/egoist/tsup

https://github.com/ezolenko/rollup-plugin-typescript2

https://github.com/Swatinem/rollup-plugin-dts

https://github.com/rollup/rollup
npm package: @itshizhan/vui
Description: a Vue UI components library based on  vue 3 and TypeScript.
Author: itshizhan
Latest version: 0.0.3

# Introduction
 a Vue UI components library based on  vue 3 and TypeScript.

# Install
```
npm install @itshizhan/vui -S
```

# Usage

```
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import Vui from "@itshizhan/vui";
import "@itshizhan/vui/lib/index.css";

createApp(App)
  .use(router)
  .use(Vui)
  .mount("#app");
```
npm package: @itshkins/animations
Description: Frame animation engine with some predefined timing functions
Author: itshkins
Latest version: 1.1.2

# Frame animation engine with some predefined timing functions

## Installation

```sh
npm i @itshkins/animations@latest
```

## Usage

```js
<script src="./node_modules/@itshkins/animations/dist/animations.js"></script>
```

```js
import * as animation from '@itshkins/animations'
```

```js
import { FrameAnimation, ImagesCompleteListener } from '@itshkins/animations'
```

* [Frame animation usage - new FrameAnimation({...}).start()](src/frame-animation.md)
* [Images complete listener usage - new ImagesCompleteListener({...}).activate()](src/images-complete-listener.md)
* [Accent typography usage - applyAccentTypography(...)](src/accent-typography.md)
npm package: @itshkins/dom-utils
Description: DOM utils
Author: itshkins
Latest version: 1.1.20

# DOM utils

This package provides a set of DOM utilities.

* One of them is a local state manager that simplifies the usage of Storage API:
```js
const KEY = `my-key`
const storage = localStorage // or sessionStorage

const state = JSON.parse(storage.getItem(KEY))
storage.setItem(KEY, JSON.stringify({value: []}))
```

## Installation

```bash
npm i @itshkins/dom-utils@latest
```

## Usage

### Node

```js
import {newLocalState} from '@itshkins/dom-utils'

const DEFAULT_STATE = Object.freeze({})

const localState = newLocalState(`my-key`)
console.log(localState.getState(DEFAULT_STATE)) // {}
console.log(localState.setState({value: []})) // true
console.log(localState.getState(DEFAULT_STATE)) // {value: Array(0)}
```

### Browser

```html
<script src="./node_modules/@itshkins/dom-utils/dist/dom-utils.js"></script>

<script>
  const DEFAULT_STATE = Object.freeze({})

  const localState = domUtils.newLocalState(`my-key`)
  console.log(localState.getState(DEFAULT_STATE)) // {}
  console.log(localState.setState({value: []})) // true
  console.log(localState.getState(DEFAULT_STATE)) // {value: Array(0)}
</script>
```
npm package: @itshkins/js-utils
Description: JavaScript utils
Author: itshkins
Latest version: 1.2.1

# DOM utils

## Installation

```bash
npm i @itshkins/js-utils@latest
```

## Usage

### Node

```js
import {orderBy, orderByDescending} from '@itshkins/js-utils'

console.log(orderBy([5, 3, 9, 0])) // [0, 3, 5, 9]
console.log(orderByDescending([5, 3, 9, 0])) // [9, 5, 3, 0]
```

```js
import {orderBy, orderByDescending} from '@itshkins/js-utils'

const value5 = {value: 5}
const value3 = {value: 3}
const value9 = {value: 9}
const value0 = {value: 0}

const selector = (it) => it.value

console.log(orderBy([value5, value3, value9, value0], selector)) // [value0, value3, value5, value9])
console.log(orderByDescending([value5, value3, value9, value0], selector)) // [value9, value5, value3, value0]
```

### Browser

```html

<script src="./node_modules/@itshkins/js-utils/dist/js-utils.js"></script>

<script>{
  console.log(jsUtils.orderBy([5, 3, 9, 0])) // [0, 3, 5, 9]
  console.log(jsUtils.orderByDescending([5, 3, 9, 0])) // [9, 5, 3, 0]
}</script>

<script>{
  const {orderBy, orderByDescending} = jsUtils

  const value5 = {value: 5}
  const value3 = {value: 3}
  const value9 = {value: 9}
  const value0 = {value: 0}

  const selector = (it) => it.value

  console.log(orderBy([value5, value3, value9, value0], selector)) // [value0, value3, value5, value9])
  console.log(orderByDescending([value5, value3, value9, value0], selector)) // [value9, value5, value3, value0]
}
</script>
```
npm package: @itshkins/react-utils
Description: React hooks
Author: itshkins
Latest version: 1.0.5

# React utils (for v17 and v18)

## Installation

```bash
npm i @itshkins/react-utils@latest
```

## Usage

* [useLocalState() example](./src/hooks/use-local-state.md)
* [useBooleanState() example](./src/hooks/use-boolean-state.md)
* [useMountedRef() example](./src/hooks/use-mounted-ref.md)
npm package: @itshkins/vue-utils
Description: Vue composables
Author: itshkins
Latest version: 1.0.2

# Vue utils

## Installation

```bash
npm i @itshkins/vue-utils@latest
```

## Usage

* [useLocalState usage](./src/composables/use-local-state/use-local-state.md)
* [useBoolean usage](./src/composables/use-boolean/use-boolean.md)
* [useMounted usage](./src/composables/use-mounted/use-mounted.md)
* [useProp usage](./src/composables/use-prop/use-prop.md)

* [useEventListener usage](./src/composables/use-event-listener/use-event-listener.md)
* [useEscapeListener usage](./src/composables/use-escape-listener/use-escape-listener.md)

* [useInterval usage](./src/composables/use-interval/use-interval.md)

* [useBodyClass usage](./src/composables/use-body-class/use-body-class.md)
npm package: @itsi/cli
Description: WEB前端应用框架项目design system的命令行工具
Author: Tangcuyu
Latest version: 1.1.0

# @itsi/cli

Living Design System 的命令行工具

## 用法

### 安装

```bash
pnpm i -D @itsi/cli
```

### 使用

示例：

```bash
pnpm lds -h
```

## 命令介绍

| 命令         | 作用                                                               |
| ------------ | ------------------------------------------------------------------ |
| help(-h)     | 查看全部命令用法                                                   |
| git-commit   | 生成符合 Angular 规范的 git 提交信息                               |
| cleanup      | 清空依赖和构建产物（dist目录，可以自定义配置）                     |
| update-pkg   | 命令 npm-check-updates, 升级依赖                                   |
| release      | 发布：更新版本号、生成 changelog、提交代码                         |
| create-admin | 创建工程模板(管理类应用脚手架)                                     |
| changelog    | 根据两次 tag 生成 changelog (--total: 根据所有 tag 生成 changelog) |
npm package: @itsjamie/preact-resize-observer
Description: Element resize event for Preact X
Author: mjdease
Latest version: 1.1.0

preact-resize-observer
---

[![Build Status](https://travis-ci.com/mjdease/preact-resize-observer.svg?branch=master)](https://travis-ci.com/mjdease/preact-resize-observer)
[![codecov](https://codecov.io/gh/mjdease/preact-resize-observer/branch/master/graph/badge.svg)](https://codecov.io/gh/mjdease/preact-resize-observer)
[![npm version](https://badge.fury.io/js/preact-resize-observer.svg)](https://badge.fury.io/js/preact-resize-observer)

Watch an element for changes to its size. Supports modern browsers and IE9+.

This is a Preact component wrapper for the excellent [ResizeObserver polyfill](https://github.com/que-etc/resize-observer-polyfill).

[Demo](https://mjdease.github.io/preact-resize-observer/demo/)

### Installation

`npm install preact-resize-observer`

### Example

```js
import { Component } from 'preact';
import ResizeObserver from 'preact-resize-observer';

export default class App extends Component {
  handleResize = (width, height) => {
    // Current width and height of the .fluid-content element
    console.log(`width: ${width}, height: ${height}`)
  }

  render(props) {
    return (
      <ResizeObserver class="fluid-content" onResize={this.handleResize}>
        <p>{props.content}</p>
      </ResizeObserver>
    );
  }
}
```

### Prop Types

| Property | Type | Default | Description |
|:---|:---|:---:|:---|
| `onResize` | Function | | Required. Callback invoked whenever the observed element changes size. `(width: number, height: number): void` |
| `horizontal` | boolean | `true` | Observe changes to the width |
| `vertical` | boolean | `true` | Observe changes to the height |
| `tag` | string | `'div'` | The HTML tag to render this component as |
| `element` | Element | | The element to observe the size of. If not specified the element rendered by this component will be observed |
| `initial` | boolean | `true` | Controls if `onResize` will be invoked when the element is first observed (typically on mount). Set to `false` to disable this initial call.
| `innerRef` | function | | Get reference to the rendered element. `(element: Element): void`

Changelog
---
1.0.0 (24/06/2018)
* Change component design to be used as part of regular page markup:
  * Change to observe size of self by default (previously parent was observed)
  * Add support to render children
  * Add `tag` prop to control the tag to render as
  * Add `innerRef` prop to get a reference to the actual DOM node
  * Change prop names to avoid clashing with standard HTML attributes
* Distribute ES module

0.1.1 (31/05/2018)
* Fixed package dependencies
* Fixed component types for Preact 8.2.9

0.1.0 (20/03/2018)
* Initial Release

Licence
---
`preact-resize-obsever` is available under the MIT License.