open-index/open-npm huggingface dataset:
npm package: @mtn-ui/utils
Description: MTN UI Utils
Latest version: 0.0.8

# @mtn-ui/utils

MTN UI 工具函数包，基于 VueUse 构建。

## 安装

```bash
pnpm add @mtn-ui/utils @vueuse/core
```

## 目录结构

```
packages/utils/src/
├── common.ts        # 通用工具函数
├── function.ts      # 函数工具（防抖、节流）
├── state.ts         # 状态管理工具
├── dom.ts           # DOM 操作工具
├── interaction.ts   # 交互工具（鼠标、滚动等）
├── media.ts         # 媒体查询工具
├── types.ts         # 类型定义
└── index.ts         # 主入口（重新导出所有内容）
```

## 功能分类

### 通用工具 (`common.ts`)

- `classNames` - 格式化类名

### 函数工具 (`function.ts`)

- `useDebounceFn` - 防抖函数
- `useThrottleFn` - 节流函数

### 状态管理 (`state.ts`)

本包重新导出了 VueUse 的状态管理函数，包括：

- `useToggle` - 切换布尔值
- `useCounter` - 计数器
- `useLocalStorage` - 本地存储
- `useSessionStorage` - 会话存储

### DOM 操作 (`dom.ts`)

- `onClickOutside` - 点击外部区域
- `useEventListener` - 事件监听
- `useElementSize` - 元素尺寸
- `useResizeObserver` - 尺寸观察
- `useFocus` - 焦点管理
- `useHover` - 悬停状态
- `useClipboard` - 剪贴板操作

### 交互工具 (`interaction.ts`)

- `useMouse` - 鼠标位置
- `useScroll` - 滚动位置
- `useWindowSize` - 窗口尺寸

### 媒体查询 (`media.ts`)

- `useMediaQuery` - 媒体查询
- `usePreferredDark` - 系统暗色偏好
- `useDark` - 暗色模式
- `useColorMode` - 颜色模式

## 使用方式

### 全量导入（推荐）

```typescript
import { classNames, useDebounceFn, useToggle } from '@mtn-ui/utils'
```

### 按分类导入

```typescript
// 通用工具
import { classNames } from '@mtn-ui/utils/common'

// 函数工具
import { useDebounceFn, useThrottleFn } from '@mtn-ui/utils/function'

// 状态管理
import { useToggle, useCounter } from '@mtn-ui/utils/state'

// DOM 操作
import { onClickOutside, useElementSize } from '@mtn-ui/utils/dom'

// 交互工具
import { useMouse, useScroll } from '@mtn-ui/utils/interaction'

// 媒体查询
import { useDark, useColorMode } from '@mtn-ui/utils/media'
```

## 使用示例

### 防抖和节流

```typescript
import { useDebounceFn, useThrottleFn } from '@mtn-ui/utils'

// 防抖
const debouncedSearch = useDebounceFn((query: string) => {
  console.log('Search:', query)
}, 300)

// 节流
const throttledScroll = useThrottleFn(() => {
  console.log('Scrolled')
}, 100)
```

### 状态管理

```typescript
import { useToggle, useCounter, useLocalStorage } from '@mtn-ui/utils'

// 切换状态
const [isOpen, toggle] = useToggle(false)

// 计数器
const { count, inc, dec, reset } = useCounter(0)

// 本地存储
const stored = useLocalStorage('key', 'default-value')
```

### DOM 操作

```typescript
import { onClickOutside, useElementSize } from '@mtn-ui/utils'
import { ref } from 'vue'

const target = ref<HTMLElement>()

// 点击外部区域
onClickOutside(target, () => {
  console.log('Clicked outside')
})

// 元素尺寸
const { width, height } = useElementSize(target)
```

## 更多文档

查看 [VueUse 官方文档](https://vueuse.org/) 了解更多功能。
npm package: @mtna/annotations-ui
Description: Angular component library for Annotation related UIs for Metadata Technology North America
Latest version: 3.0.0
Deprecated: Moved to @mtna/social-ui.

# AnnotationsUi

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.3.

## Code scaffolding

Run `ng generate component component-name --project annotations-ui` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project annotations-ui`.
> Note: Don't forget to add `--project annotations-ui` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build annotations-ui` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build annotations-ui`, go to the dist folder `cd dist/annotations-ui` and run `npm publish`.

## Running unit tests

Run `ng test annotations-ui` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @mtna/auth-ui
Description: Angular Authentication library for Metadata Technology North America
Latest version: 3.2.1

# Angular authentication UI for Metadata Technology North America

[![npm version](https://badge.fury.io/js/@mtna/auth-ui.svg)](https://www.npmjs.com/package/@mtna/auth-ui)

### Installation

The latest release of the library can be installed from npm

`npm install @mtna/auth-ui`
npm package: @mtna/charts-ui
Description: [![npm version](https://badge.fury.io/js/@mtna/charts-ui.svg)](https://www.npmjs.com/package/@mtna/charts-ui)
Latest version: 7.0.4

# Angular Charts UI for Metadata Technology North America

[![npm version](https://badge.fury.io/js/@mtna/charts-ui.svg)](https://www.npmjs.com/package/@mtna/charts-ui)

### Installation

The latest release of the library can be installed from npm

`npm install @mtna/charts-ui`
npm package: @mtna/classification-service-core-ui
Description: [![npm version](https://badge.fury.io/js/%40mtna%2Fclassification-service-core-ui.svg)](https://badge.fury.io/js/%40mtna%2Fclassification-service-core-ui)
Latest version: 2.4.0

# Classification-Service-Core for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40mtna%2Fclassification-service-core-ui.svg)](https://badge.fury.io/js/%40mtna%2Fclassification-service-core-ui)

## Installation

The latest release of the library can be installed from npm

`npm install @mtna/classification-service-core-ui`
npm package: @mtna/common
Description: [![npm version](https://badge.fury.io/js/@mtna/common.svg)](https://www.npmjs.com/package/@mtna/common)
Latest version: 1.15.0

# Common Typescript models and utilities for Metadata Technology North America

[![npm version](https://badge.fury.io/js/@mtna/common.svg)](https://www.npmjs.com/package/@mtna/common)

### Installation

The latest release of the library can be installed from npm≈

`npm install @mtna/mtna-common`
npm package: @mtna/consumer-service-core-ui
Description: [![npm version](https://badge.fury.io/js/%40mtna%2Fconsumer-service-core-ui.svg)](https://badge.fury.io/js/%40mtna%2Fconsumer-service-core-ui)
Latest version: 2.2.1

# Consumer-Service-Core for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40mtna%2Fconsumer-service-core-ui.svg)](https://badge.fury.io/js/%40mtna%2Fconsumer-service-core-ui)

## Installation

The latest release of the library can be installed from npm

`npm install @mtna/consumer-service-core-ui`
npm package: @mtna/core-context-ui
Description: [![npm version](https://badge.fury.io/js/%40mtna%2Fcore-context-ui.svg)](https://badge.fury.io/js/%40mtna%2Fcore-context-ui)
Latest version: 1.2.1

# Core Context for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40mtna%2Fcore-context-ui.svg)](https://badge.fury.io/js/%40mtna%2Fcore-context-ui)

## Installation

The latest release of the library can be installed from npm

`npm install @mtna/core-context-ui`
npm package: @mtna/core-i18n-ui
Description: [![npm version](https://badge.fury.io/js/%40mtna%2Fcore-i18n-ui.svg)](https://badge.fury.io/js/%40mtna%2Fcore-i18n-ui)
Latest version: 1.1.1

# Core-User for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40mtna%2Fcore-i18n-ui.svg)](https://badge.fury.io/js/%40mtna%2Fcore-i18n-ui)

## Installation

The latest release of the library can be installed from npm

`npm install @mtna/core-i18n-ui`
npm package: @mtna/core-layout
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.0.
Latest version: 1.3.2

# CoreLayout

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.0.

## Code scaffolding

Run `ng generate component component-name --project core-layout` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project core-layout`.

> Note: Don't forget to add `--project core-layout` or else it will be added to the default project in your `angular.json` file.

## Build

Run `ng build core-layout` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build core-layout`, go to the dist folder `cd dist/core-layout` and run `npm publish`.

## Running unit tests

Run `ng test core-layout` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
npm package: @mtna/core-user-ui
Description: [![npm version](https://badge.fury.io/js/%40mtna%2Fcore-user-ui.svg)](https://badge.fury.io/js/%40mtna%2Fcore-user-ui)
Latest version: 4.2.0

# Core-User for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40mtna%2Fcore-user-ui.svg)](https://badge.fury.io/js/%40mtna%2Fcore-user-ui)

## Installation

The latest release of the library can be installed from npm

`npm install @mtna/core-user-ui`
npm package: @mtna/data-core-ui
Description: [![npm version](https://badge.fury.io/js/%40mtna%2Fdata-core-ui.svg)](https://badge.fury.io/js/%40mtna%2Fdata-core-ui)
Latest version: 3.3.1

# Data-Core for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40mtna%2Fdata-core-ui.svg)](https://badge.fury.io/js/%40mtna%2Fdata-core-ui)

## Installation

The latest release of the library can be installed from npm

`npm install @mtna/data-core-ui`
npm package: @mtna/data-mapping-ui
Description: [![npm version](https://badge.fury.io/js/%40mtna%2Fdata-mapping-ui.svg)](https://badge.fury.io/js/%40mtna%2Fdata-mapping-ui)
Latest version: 3.1.1

# Data-Mapping for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40mtna%2Fdata-mapping-ui.svg)](https://badge.fury.io/js/%40mtna%2Fdata-mapping-ui)

## Installation

The latest release of the library can be installed from npm

`npm install @mtna/data-mapping-ui`
npm package: @mtna/data-query-ui
Description: [![npm version](https://badge.fury.io/js/%40mtna%2Fdata-query-ui.svg)](https://badge.fury.io/js/%40mtna%2Fdata-query-ui)
Latest version: 3.3.1

# Data-Query for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40mtna%2Fdata-query-ui.svg)](https://badge.fury.io/js/%40mtna%2Fdata-query-ui)

## Installation

The latest release of the library can be installed from npm

`npm install @mtna/data-query-ui`
npm package: @mtna/data-validation-ui
Description: [![npm version](https://badge.fury.io/js/%40mtna%2Fdata-validation-ui.svg)](https://badge.fury.io/js/%40mtna%2Fdata-validation-ui)
Latest version: 3.1.1

# Data-Validation for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40mtna%2Fdata-validation-ui.svg)](https://badge.fury.io/js/%40mtna%2Fdata-validation-ui)

## Installation

The latest release of the library can be installed from npm

`npm install @mtna/data-validation-ui`
npm package: @mtna/data-viz-ui
Description: [![npm version](https://badge.fury.io/js/@mtna/data-viz-ui.svg)](https://www.npmjs.com/package/@mtna/data-viz-ui)
Latest version: 4.0.5

# Angular Data Visualization UI for Metadata Technology North America

[![npm version](https://badge.fury.io/js/@mtna/data-viz-ui.svg)](https://www.npmjs.com/package/@mtna/data-viz-ui)

### Installation

The latest release of the library can be installed from npm

`npm install @mtna/data-viz-ui`
npm package: @mtna/datareader-ascii-ui
Description: [![npm version](https://badge.fury.io/js/%40mtna%2Fdatareader-ascii-ui.svg)](https://badge.fury.io/js/%40mtna%2Fdatareader-ascii-ui)
Latest version: 1.1.1

# Datareader-Ascii for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40mtna%2Fdatareader-ascii-ui.svg)](https://badge.fury.io/js/%40mtna%2Fdatareader-ascii-ui)

## Installation

The latest release of the library can be installed from npm

`npm install @mtna/datareader-ascii-ui`
npm package: @mtna/datareader-base-ui
Description: [![npm version](https://badge.fury.io/js/%40mtna%2Fdatareader-base-ui.svg)](https://badge.fury.io/js/%40mtna%2Fdatareader-base-ui)
Latest version: 1.1.1

# Datareader-Base for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40mtna%2Fdatareader-base-ui.svg)](https://badge.fury.io/js/%40mtna%2Fdatareader-base-ui)

## Installation

The latest release of the library can be installed from npm

`npm install @mtna/datareader-base-ui`
npm package: @mtna/datareader-excel-ui
Description: [![npm version](https://badge.fury.io/js/%40mtna%2Fdatareader-excel-ui.svg)](https://badge.fury.io/js/%40mtna%2Fdatareader-excel-ui)
Latest version: 1.1.2

# Datareader-Excel for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40mtna%2Fdatareader-excel-ui.svg)](https://badge.fury.io/js/%40mtna%2Fdatareader-excel-ui)

## Installation

The latest release of the library can be installed from npm

`npm install @mtna/datareader-excel-ui`
npm package: @mtna/file-manager
Description: [![npm version](https://badge.fury.io/js/%40mtna%2Ffile-manager.svg)](https://badge.fury.io/js/%40mtna%2Ffile-manager)
Latest version: 1.1.1

# File-Manager for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40mtna%2Ffile-manager.svg)](https://badge.fury.io/js/%40mtna%2Ffile-manager)

## Installation

The latest release of the library can be installed from npm

`npm install @mtna/file-manager`

## Deployed Documentation

[http://mtna-file-manager.surge.sh](http://mtna-file-manager.surge.sh)
npm package: @mtna/lifecycle-manager-ui
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.0.0.
Latest version: 2.0.1

# LifecycleManagerUi

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.0.0.

## Code scaffolding

Run `ng generate component component-name --project lifecycle-manager-ui` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project lifecycle-manager-ui`.
> Note: Don't forget to add `--project lifecycle-manager-ui` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build lifecycle-manager-ui` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build lifecycle-manager-ui`, go to the dist folder `cd dist/lifecycle-manager-ui` and run `npm publish`.

## Running unit tests

Run `ng test lifecycle-manager-ui` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @mtna/model-base-ui
Description: [![npm version](https://badge.fury.io/js/%40mtna%2Fmodel-base-ui.svg)](https://badge.fury.io/js/%40mtna%2Fmodel-base-ui)
Latest version: 10.2.1

# Model-Base for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40mtna%2Fmodel-base-ui.svg)](https://badge.fury.io/js/%40mtna%2Fmodel-base-ui)

## Installation

The latest release of the library can be installed from npm

`npm install @mtna/model-base-ui`
npm package: @mtna/model-core-ui
Description: [![npm version](https://badge.fury.io/js/%40mtna%2Fmodel-core-ui.svg)](https://badge.fury.io/js/%40mtna%2Fmodel-core-ui)
Latest version: 11.3.0

# Model-Core for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40mtna%2Fmodel-core-ui.svg)](https://badge.fury.io/js/%40mtna%2Fmodel-core-ui)

## Installation

The latest release of the library can be installed from npm

`npm install @mtna/model-core-ui`
npm package: @mtna/model-mhdo-ui
Description: [![npm version](https://badge.fury.io/js/%40mtna%2Fmodel-mhdo-ui.svg)](https://badge.fury.io/js/%40mtna%2Fmodel-mhdo-ui)
Latest version: 1.2.1

# Model-Mhdo for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40mtna%2Fmodel-mhdo-ui.svg)](https://badge.fury.io/js/%40mtna%2Fmodel-mhdo-ui)

## Installation

The latest release of the library can be installed from npm

`npm install @mtna/model-mhdo-ui`
npm package: @mtna/model-predefined-data-ui
Description: [![npm version](https://badge.fury.io/js/%40mtna%2Fmodel-predefined-data-ui.svg)](https://badge.fury.io/js/%40mtna%2Fmodel-predefined-data-ui)
Latest version: 2.2.1

# Model-Predefined-Data for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40mtna%2Fmodel-predefined-data-ui.svg)](https://badge.fury.io/js/%40mtna%2Fmodel-predefined-data-ui)

## Installation

The latest release of the library can be installed from npm

`npm install @mtna/model-predefined-data-ui`
npm package: @mtna/model-predefined-ui
Description: [![npm version](https://badge.fury.io/js/%40mtna%2Fmodel-predefined-ui.svg)](https://badge.fury.io/js/%40mtna%2Fmodel-predefined-ui)
Latest version: 3.4.0

# Model-Predefined for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40mtna%2Fmodel-predefined-ui.svg)](https://badge.fury.io/js/%40mtna%2Fmodel-predefined-ui)

## Installation

The latest release of the library can be installed from npm

`npm install @mtna/model-predefined-ui`
npm package: @mtna/model-request-ui
Description: [![npm version](https://badge.fury.io/js/%40mtna%2Fmodel-request-ui.svg)](https://badge.fury.io/js/%40mtna%2Fmodel-request-ui)
Latest version: 3.2.1

# Model-Request for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40mtna%2Fmodel-request-ui.svg)](https://badge.fury.io/js/%40mtna%2Fmodel-request-ui)

## Installation

The latest release of the library can be installed from npm

`npm install @mtna/model-request-ui`
npm package: @mtna/pojo-base-atua-ui
Description: [![npm version](https://badge.fury.io/js/%40mtna%2Fpojo-base-atua-ui.svg)](https://badge.fury.io/js/%40mtna%2Fpojo-base-atua-ui)
Latest version: 6.0.0

# Pojo-Base-Atua for Metadata Technology North America
[![npm version](https://badge.fury.io/js/%40mtna%2Fpojo-base-atua-ui.svg)](https://badge.fury.io/js/%40mtna%2Fpojo-base-atua-ui)

## Installation
The lastest release of the library can be installed from npm

`npm install @mtna/pojo-base-atua-ui`

## Live Demo

[http://mtna-pojo-atua-ui.surge.sh](http://mtna-pojo-atua-ui.surge.sh)
npm package: @mtna/pojo-base-ui
Description: [![npm version](https://badge.fury.io/js/%40mtna%2Fpojo-base-ui.svg)](https://badge.fury.io/js/%40mtna%2Fpojo-base-ui)
Latest version: 10.3.1

# Pojo-Base for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40mtna%2Fpojo-base-ui.svg)](https://badge.fury.io/js/%40mtna%2Fpojo-base-ui)

## Installation

The latest release of the library can be installed from npm

`npm install @mtna/pojo-base-ui`
npm package: @mtna/pojo-consumer-ui
Description: [![npm version](https://badge.fury.io/js/%40mtna%2Fpojo-consumer-ui.svg)](https://badge.fury.io/js/%40mtna%2Fpojo-consumer-ui)
Latest version: 2.11.0

# Pojo-Consumer for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40mtna%2Fpojo-consumer-ui.svg)](https://badge.fury.io/js/%40mtna%2Fpojo-consumer-ui)

## Installation

The latest release of the library can be installed from npm

`npm install @mtna/pojo-consumer-ui`
npm package: @mtna/pojo-core-atua-ui
Description: [![npm version](https://badge.fury.io/js/%40mtna%2Fpojo-core-atua-ui.svg)](https://badge.fury.io/js/%40mtna%2Fpojo-core-atua-ui)
Latest version: 6.0.0

# Pojo-Core-Atua for Metadata Technology North America
[![npm version](https://badge.fury.io/js/%40mtna%2Fpojo-core-atua-ui.svg)](https://badge.fury.io/js/%40mtna%2Fpojo-core-atua-ui)

## Installation
The lastest release of the library can be installed from npm

`npm install @mtna/pojo-core-atua-ui`

## Live Demo

[http://mtna-pojo-atua-ui.surge.sh](http://mtna-pojo-atua-ui.surge.sh)
npm package: @mtna/pojo-core-ui
Description: [![npm version](https://badge.fury.io/js/%40mtna%2Fpojo-core-ui.svg)](https://badge.fury.io/js/%40mtna%2Fpojo-core-ui)
Latest version: 10.3.1

# Pojo-Core for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40mtna%2Fpojo-core-ui.svg)](https://badge.fury.io/js/%40mtna%2Fpojo-core-ui)

## Installation

The latest release of the library can be installed from npm

`npm install @mtna/pojo-core-ui`
npm package: @mtna/pojo-management-ui
Description: [![npm version](https://badge.fury.io/js/%40mtna%2Fpojo-management-ui.svg)](https://badge.fury.io/js/%40mtna%2Fpojo-management-ui)
Latest version: 1.5.1

# Pojo-Management for Metadata Technology North America

[![npm version](https://badge.fury.io/js/%40mtna%2Fpojo-management-ui.svg)](https://badge.fury.io/js/%40mtna%2Fpojo-management-ui)

## Installation

The latest release of the library can be installed from npm

`npm install @mtna/pojo-management-ui`
npm package: @mtna/pojo-social-ui
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.0.0.
Latest version: 1.0.2

# PojoSocialUi

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.0.0.

## Code scaffolding

Run `ng generate component component-name --project pojo-social-ui` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project pojo-social-ui`.
> Note: Don't forget to add `--project pojo-social-ui` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build pojo-social-ui` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build pojo-social-ui`, go to the dist folder `cd dist/pojo-social-ui` and run `npm publish`.

## Running unit tests

Run `ng test pojo-social-ui` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).