open-index/open-npm huggingface dataset:
npm package: @omiu/action-sheet
Description: Mobile pop-up options list
Author: dntzhang
Latest version: 0.0.5

## ActionSheet

Mobile pop-up options list

* [→ CodePen](https://codepen.io/omijs/pen/wvKdoNJ)

## Import

```js
import '@omiu/action-sheet'
```

Or use script tag to ref it.


```html
<script src="https://unpkg.com/@omiu/action-sheet"></script>
```

## Usage

```html
<o-action-sheet></o-action-sheet>
```

## API

### Props

```tsx
{
  type: string,
  menus: any[],
  actions: any[],
  show: boolean
}
```

### 默认属性

```tsx
{
  type: '',
  menus: [],
  actions: [],
  show: false
}
```
### Events

* item-click
* close
npm package: @omiu/avatar
Description: A head that symbolizes an image or personality
Author: dntzhang
Latest version: 0.0.1

## Avatar

A head that symbolizes an image or personality

* [→ CodePen](https://codepen.io/omijs/pen/QWjgaze)

## Import

```js
import '@omiu/avatar'
```

Or use script tag to ref it.


```html
<script src="https://unpkg.com/@omiu/avatar"></script>
```

## Usage

```html
<o-avatar></o-avatar>
```

## API

### Props

```tsx
{
  alt?: string,
  src?: string,
  size?: number,
  square?: boolean,
  icon?: string,
  color?: string,
  backgroundColor?: string
}
```

### 默认属性

```tsx
{
  size: 40,
  color: 'white',
  backgroundColor: '#ccc'
)
```
npm package: @omiu/badge
Description: Mark in the upper right corner of the icon
Latest version: 0.0.2

## Badge

Mark in the upper right corner of the icon

* [→ CodePen](https://codepen.io/omijs/pen/WNQOdaB)

## Import

```js
import '@omiu/badge'
```

Or use script tag to ref it.


```html
<script src="https://unpkg.com/@omiu/badge"></script>
```

## Usage

```html
<o-badge></o-badge>
```

## API

### Props

```tsx
{
  dot?: boolean,
  content?: string,
  x?: number,
  y?: number
}
```

### 默认属性

```tsx
{
  x: 0,
  y: 0
)
```
npm package: @omiu/bottom-nav
Description: Mobile bottom navigation
Author: dntzhang
Latest version: 0.0.2

## BottomNav

Mobile bottom navigation

* [→ CodePen](https://codepen.io/omijs/pen/zYvdjEY)

## Import

```js
import '@omiu/bottom-nav'
```

Or use script tag to ref it.


```html
<script src="https://unpkg.com/@omiu/bottom-nav"></script>
```

## Usage

```html
<o-bottom-nav></o-bottom-nav>
```

## API

### Props

```tsx
{
  selectedColor: string
  items: any[]
}
```

### 默认属性

```tsx
{
}
```
### Events

* item-click
* change
npm package: @omiu/breadcrumb
Description: Display the position of the current page in the system hierarchy and be able to navigate
Author: dntzhang
Latest version: 0.0.4

# Button

Click or touch it to trigger an operation. The encapsulated logic is triggered in response to user clicks.

* [→ CodePen](https://codepen.io/omijs/pen/LYppwYG)

## Import

```js
import '@omiu/button'
```

Or use script tag to ref it.


```html
<script src="https://unpkg.com/@omiu/button"></script>
```

## Usage

```html
<o-button></o-button>
```

## API

### Props

```tsx
{
  size?: 'medium' | 'small' | 'mini',
  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
  plain?: boolean,
  round?: boolean,
  circle?: boolean,
  loading?: boolean,
  disabled?: boolean,
  icon?: string,
  autofocus?: boolean,
  nativeType?: 'button' | 'submit' | 'reset',
  block?: boolean
  text?: string
}
```

### Default Props

```tsx
{
  plain: false,
  round: false,
  circle: false,
  loading: false,
  disabled: false,
  autofocus: false,
  nativeType: 'button',
  block: false
}
```
npm package: @omiu/button
Description: Click or touch it to trigger an operation. The encapsulated logic is triggered in response to user clicks.
Author: dntzhang
Latest version: 0.0.12

# Button

Click or touch it to trigger an operation. The encapsulated logic is triggered in response to user clicks.

* [→ CodePen](https://codepen.io/omijs/pen/LYppwYG)

## Import

```js
import '@omiu/button'
```

Or use script tag to ref it.


```html
<script src="https://unpkg.com/@omiu/button"></script>
```

## Usage

```html
<o-button></o-button>
```

## API

### Props

```tsx
{
  size?: 'medium' | 'small' | 'mini',
  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
  plain?: boolean,
  round?: boolean,
  circle?: boolean,
  loading?: boolean,
  disabled?: boolean,
  icon?: string,
  autofocus?: boolean,
  nativeType?: 'button' | 'submit' | 'reset',
  block?: boolean
  text?: string
}
```

### Default Props

```tsx
{
  plain: false,
  round: false,
  circle: false,
  loading: false,
  disabled: false,
  autofocus: false,
  nativeType: 'button',
  block: false
}
```
npm package: @omiu/cascader
Description: Cascader
Latest version: 0.0.7

# Cascader

Cascader

## Import

```js
import '@omiu/cascader'
```

Or use script tag to ref it.

```html
<script src="https://unpkg.com/@omiu/cascader"></script>
```

## Usage

```html
<o-cascader></o-cascader>
```

## API

### Props

```tsx
interface CascaderOption {
  value: string
  label: string
  /**
   * 是否禁用
   */
  disabled: boolean
  children?: CascaderOption[]
}

export interface CascaderProps {
  /**
   * 展开触发方式
   */
  expandTrigger: 'click' | 'hover'
  /**
   * 当前值（从父到子应当是一个数组）
   */
  value: string[]
  /**
   * 选项列表
   */
  options: CascaderOption[]
  /**
   * 尺寸 Todo
   */
  size?: 'default' | 'medium' | 'small' | 'mini'
  /**
   * 是否禁用
   */
  disabled?: boolean
  /**
   * 选中选项发生改变回调函数
   */
  onChange?: (evt: CustomEvent) => void
}
```

### 默认属性

```tsx
{
  value: []
}
```

## Dev

尝试使用 vite 构建

```bash
cd components/cascader
yarn
# 开发预览
yarn dev
# 构建（目录位于 dist）
yarn build
# 构建 demo
yarn build:demo
# 构建 scss
yarn build:scss
```
npm package: @omiu/chart
Description: Mobile pop-up options list
Author: dntzhang
Latest version: 0.0.5

# Omim Chart

<p align="center"><img src="https://github.com/Tencent/omi/raw/master/packages/omi-chart/assets/omi-chart.svg?sanitize=true" /><p>

<p  align="center">Simple HTML5 Charts 📈 using html tag powered by <a href="https://github.com/Tencent/omi">omi</a> and <a href="https://www.chartjs.org/" rel="nofollow">chart.js</a>.</p>



## Supported HTML Chart Elements

```html
<o-bar></o-bar>
<o-line></o-line>
<o-scatter></o-scatter>
<o-pie></o-pie>
<o-doughnut></o-doughnut>
<o-radar></o-radar>
<o-polar-area></o-polar-area>
<o-bubble></o-bubble>
```

## Install

### Via script

```html
<script src="https://unpkg.com/omi"></script>
<script src="https://unpkg.com/@omiu/chart"></script>
```

### Via npm

``` bash
npm install @omiu/chart
```

Then:

```js
import '@omiu/chart'
```
npm package: @omiu/chart-card
Description: Cascader
Latest version: 0.0.7

# Cascader

Cascader

## Import

```js
import '@omiu/cascader'
```

Or use script tag to ref it.

```html
<script src="https://unpkg.com/@omiu/cascader"></script>
```

## Usage

```html
<o-cascader></o-cascader>
```

## API

### Props

```tsx
interface CascaderOption {
  value: string
  label: string
  /**
   * 是否禁用
   */
  disabled: boolean
  children?: CascaderOption[]
}

export interface CascaderProps {
  /**
   * 当前值（从父到子应当是一个数组）
   */
  value: string[]
  /**
   * 选项列表
   */
  options: CascaderOption[]
  /**
   * 尺寸 Todo
   */
  size?: 'default' | 'medium' | 'small' | 'mini'
  /**
   * 是否禁用
   */
  disabled?: boolean
  /**
   * 选项被点击后的回调函数
   */
  onOptionClick?: (item: any, index: any, evt: any) => void
}
```

### 默认属性

```tsx
{
  value: []
}
```

## Dev

尝试使用 vite 构建

```bash
cd components/cascader
yarn
# 开发预览
yarn dev
# 构建（目录位于 dist）
yarn build
# 构建 demo
yarn build:demo
# 构建 scss
yarn build:scss
```
npm package: @omiu/checkbox
Description: ## 开发
Latest version: 0.0.15

# o-checkbox

## 开发

### 样式

### 脚本


## 发布私有包

### 创建组织

### 发布

## 安装

## 主题切换

```js
document.body.style.setProperty('--o-theme-primary', 'red')
```

## 原生 JS 集成 o-checkbox

## Vue 集成 o-checkbox

## Preact 集成 o-checkbox

## React 集成 o-checkbox
npm package: @omiu/collapse
Description: > Collapse
Latest version: 0.0.1

# Collapse

> Collapse

## Install

```bash
npm i
```

## Dev

```bash
npm start
```

## Preview

```bash
//html mode demo
http://localhost:3000

//jsx mode demo
http://localhost:3000/demo.html
```

## Release

```bash
npm run build
```
npm package: @omiu/color-picker
Description: Color Picker
Latest version: 0.0.6

## ColorPicker

Color Picker

* [→ CodePen](https://codepen.io/omijs/pen/gOaWmZE)

## Import

```js
import '@omiu/color-picker'
```

Or use script tag to ref it.


```html
<script src="https://unpkg.com/@omiu/color-picker"></script>
```

## Usage

```html
<o-color-picker></o-color-picker>
```

## API

### Props

```tsx
{
  button?: boolean,
  preview?: boolean,
  opacity?: boolean,
  hue?: boolean,

  hex?: boolean,
  rgba?: boolean,
  hsla?: boolean,
  hsva?: boolean,
  input?: boolean,
  clear?: boolean,
  save?: boolean,
  cmyk?: boolean,

  default?: string,

  swatches?: string[],

  inline?: boolean,
  strings?: {
    save: string,  // Default for save button
    clear: string // Default for clear button
  },
  width?: string
}
```

### 默认属性

```tsx
{
  button: true,
  preview: true,
  opacity: true,
  hue: true,

  hex: true,
  rgba: true,
  hsla: true,
  hsva: false,
  input: true,
  clear: true,
  save: true,
  cmyk: false,

  default: '#07c160',

  swatches: [],
  inline: true,

  strings: {
    save: 'Save',  // Default for save button
    clear: 'Clear' // Default for clear button
  }
}
```
### Events

* init
* save
* change
* swatch-select
npm package: @omiu/dialog
Description: Pop anything you want in the middle of the page
Author: dntzhang
Latest version: 0.0.5

## Dialog

Pop anything you want in the middle of the page

* [→ CodePen](https://codepen.io/omijs/pen/dyYZvRP)

## Import

```js
import '@omiu/dialog'
```

Or use script tag to ref it.


```html
<script src="https://unpkg.com/@omiu/dialog"></script>
```

## Usage

```html
<o-dialog></o-dialog>
```

## API

### Props

```tsx
{
  visible: boolean
  title: String
  width: String
}
```

### 默认属性

```tsx
{
  visible: false,
  width: '50%'
}
```
### Events

* open
* mask-click
* close
npm package: @omiu/dialog-extention
Description: Pop alert, confirm or prompt in the middle of the page
Author: dntzhang
Latest version: 0.0.8

## DialogExtention

Pop alert, confirm or prompt in the middle of the page

* [→ CodePen](https://codepen.io/omijs/pen/GRpOBmL)

## Import

```js
import '@omiu/dialog-extention'
```

Or use script tag to ref it.


```html
<script src="https://unpkg.com/@omiu/dialog-extention"></script>
```

## Usage

```js
Omiu.alert({
  msg: 'Simple Message',
  title: 'Msg',
  confirmButtonText: 'OK',
  onConfirm: function () {
    console.log('ok')
  }
})

Omiu.confirm({
  msg: 'Simple Message',
  title: 'Msg',
  cancelButtonText: 'Cancel',
  confirmButtonText: 'OK',
  onCancel: function () {

  },
  onConfirm: function () {
    console.log('ok')
  }
})

Omiu.prompt({
  msg: 'Simple Message',
  title: 'Msg',
  cancelButtonText: 'Cancel',
  confirmButtonText: 'OK',
  onCancel: function () {

  },
  onConfirm: function (val) {
    console.log(val)
  }
})
```
npm package: @omiu/echarts
Description: OMI version of ECharts
Latest version: 0.0.1

## Echarts

OMI version of ECharts

## Import

```js
import '@omiu/echarts'
```

Or use script tag to ref it.


```html
<script src="https://unpkg.com/@omiu/echarts"></script>
```

## Usage
```html
<o-chart
        width="300"
        height="300"
        options="{
        
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line',
              smooth: true
            }
          ]
      }"
      />
```

## API

### Props

```tsx
interface ChartProps {
  /**
   * echart的option
   */
  options: object
  /**
   * 是否可以resize
   */
  resizeAble?: boolean
  /**
   * 画布宽度
   */
  width: number
  /**
   * 画布高度
   */
  height: number
}
```

### defaultProps

```tsx
{
  options: {},
  resizeAble: false,
  width: 300,
  height: 300
}
```
npm package: @omiu/input
Description: Generally used to input information and submit it to the server.
Author: dntzhang
Latest version: 0.0.14

## Input

Generally used to input information and submit it to the server.

* [→ CodePen](https://codepen.io/omijs/pen/yLYMGqa)

## Import

```js
import '@omiu/input'
```

Or use script tag to ref it.


```html
<script src="https://unpkg.com/@omiu/input"></script>
```

## Usage

```html
<o-input></o-input>
```

## API

### Props

```tsx
{
  value?: string
  disabled?: boolean
  type?: string
  placeholder?: string
  clearable?: boolean
  size?: 'medium' | 'small' | 'mini'
  suffixIcon?: string
  prefixIcon?: string
  maxLength?: number
  autoComplete?: string
  block?: boolean
}
```

### 默认属性

```tsx
{
  type: 'text',
  autosize: false,
  rows: 2,
  trim: false,
  autoComplete: 'off',
  block: false
}
```
### Events

* blur
* focus
* change
* input
npm package: @omiu/kanban
Description: Description for component.
Latest version: 0.0.1

# Kanban 看板



<iframe height="351" style="width: 100%;" scrolling="no" title="OMIU Counter_to_be_replace" src="https://codepen.io/omijs/embed/?height=351&theme-id=default&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
  See the Pen <a href='https://codepen.io/omijs/pen/'>OMIU Checkbox</a> by OMI
  (<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## 导入

```js
import '@omiu/o-kanban'
```

或者直接 script 标签引入。

```html
<script src="https://unpkg.com/@omiu/counter_to_be_replace"></script>
```

## 使用

```html
<o-kanban></o-kanban>
```

## API

### 属性

```tsx
{
  dataSource: T[];
  title?:string;
  renderItem?:renderItemType;
  onEnd:(data:T[])=>void;

  isLimited?:boolean;//是否固定高度，改为滚动 未实装
  height?:string;
  width?:string;
}
```
### dataSource

```tsx
CardType{
  id?:number;
  title?:string;
}
DataType{
  id?:number;
  title?:string;
  cards:CardType[];
}
```

### 默认属性

```tsx
{
  
}
```

### Events

- onEnd
npm package: @omiu/message
Description: Top message alert
Latest version: 0.0.5

## Message

Top message alert

* [→ CodePen](https://codepen.io/omijs/pen/JjYyezQ)

## Import

```js
import '@omiu/message'
```

Or use script tag to ref it.


```html
<script src="https://unpkg.com/@omiu/message"></script>
```

## Usage

```html
<o-message></o-message>
```

## API

### Props

```tsx
{
  type?: 'success' | 'warning' | 'info' | 'error'
  message: string
  showClose: boolean
  center: boolean
  duration: number
}
```

### 默认属性

```tsx
{
  duration: 3000
}
```
npm package: @omiu/o-icon
Description: SVG Icon
Author: dntzhang
Latest version: 0.0.1

## OIcon

SVG Icon

* [→ CodePen](https://codepen.io/omijs/pen/QWjgapY)

## Import

```js
import '@omiu/o-icon'
```

Or use script tag to ref it.


```html
<script src="https://unpkg.com/@omiu/o-icon"></script>
```

## Usage

```html
<o-o-icon></o-o-icon>
```

## API

### Props

```tsx
{
  path?: string,
  paths?: object,
  view?: number,
  scale?: number,
  color?: string,
  rotate?: boolean
}
```

### 默认属性

```tsx
{
  view: 1024,
  scale: 2
)
```
npm package: @omiu/pagination
Description: Used to display a large number of list data in multiple pages.
Author: dntzhang
Latest version: 0.0.6

## Pagination

Used to display a large number of list data in multiple pages.

* [→ CodePen](https://codepen.io/omijs/pen/MWamyBQ)

## Import

```js
import '@omiu/pagination'
```

Or use script tag to ref it.


```html
<script src="https://unpkg.com/@omiu/pagination"></script>
```

## Usage

```html
<o-pagination></o-pagination>
```

## API

### Props

```tsx
{
  total: number
  pageSize: number
  numDisplay: number
  currentPage: number
  numEdge: number
  linkTo: string
  prevText: string
  nextText: string
  ellipseText: string
  prevShow: boolean
  nextShow: boolean
}
```

### 默认属性

```tsx
{
  total: 0,
  pageSize: 10,
  numDisplay: 5,
  currentPage: 0,
  numEdge: 3,
  linkTo: '#',
  prevText: 'Prev',
  nextText: 'Next',
  ellipseText: '...',
  prevShow: true,
  nextShow: true
)
```
### Events

* change
npm package: @omiu/popconfirm
Description: A bubble confirmation box will pop up near the click element.
Author: dntzhang
Latest version: 0.0.2

## Tip

Components that show tooptip or popover.

* [→ CodePen](https://codepen.io/omijs/pen/yLYMrdg)

## Import

```js
import '@omiu/tip'
```

Or use script tag to ref it.


```html
<script src="https://unpkg.com/@omiu/tip"></script>
```

## Usage

```html
<o-tip></o-tip>
```

## API

### Props

```tsx
{
  content?: string,
  effect?: string,
  position?: string
}
```

### defaultProps

```tsx
{
  content: '',
  effect: 'light',
  position: 'bottom'
}
```
npm package: @omiu/popover
Description: Components that show popover.
Latest version: 0.0.21

## Popover

Components that show popover.

* [→ CodePen](https://codepen.io/omijs/pen/yLYMrdg)

## Import

```js
import '@omiu/popover'
```

Or use script tag to ref it.


```html
<script src="https://unpkg.com/@omiu/popover"></script>
```

## Usage

```html
<o-popover></o-popover>
```

## API

### Props

```tsx
{
  effect?: string,
  position?: string,
  trigger?: string
}
```

### defaultProps

```tsx
{
  effect: 'light',
  position: 'bottom',
  trigger: 'click'
}
```
npm package: @omiu/progress
Description: Used to display a large number of list data in multiple pages.
Author: dntzhang
Latest version: 0.0.4

## Pagination

Used to display a large number of list data in multiple pages.

* [→ CodePen](https://codepen.io/omijs/pen/MWamyBQ)

## Import

```js
import '@omiu/pagination'
```

Or use script tag to ref it.


```html
<script src="https://unpkg.com/@omiu/pagination"></script>
```

## Usage

```html
<o-pagination></o-pagination>
```

## API

### Props

```tsx
{
  total: number
  pageSize: number
  numDisplay: number
  currentPage: number
  numEdge: number
  linkTo: string
  prevText: string
  nextText: string
  ellipseText: string
  prevShow: boolean
  nextShow: boolean
}
```

### 默认属性

```tsx
{
  total: 0,
  pageSize: 10,
  numDisplay: 5,
  currentPage: 0,
  numEdge: 3,
  linkTo: '#',
  prevText: 'Prev',
  nextText: 'Next',
  ellipseText: '...',
  prevShow: true,
  nextShow: true
)
```
### Events

* change
npm package: @omiu/rate
Description: Rate
Author: dntzhang
Latest version: 0.0.10

## Rate

Rate

* [→ CodePen](https://codepen.io/omijs/pen/LYppwYG)

## Import

```js
import '@omiu/rate'
```

Or use script tag to ref it.


```html
<script src="https://unpkg.com/@omiu/rate"></script>
```

## Usage

```html
<o-rate></o-rate>
```

## API

### Props

```tsx
{
  value?: Number
  max?: Number
  precision?: Number
  readonly?: Boolean
  disabled?: Boolean
  icon?: String,
  color?: String,
  path?: String
}
```

### defaultProps

```tsx
{
  size: 10,
  value: 0,
  max: 5,
  precision: 1,
  // readonly: false,
  // disabled: false,
  color: '#f7e620',
  path: 'M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z'
}
```
npm package: @omiu/select
Description: Mobile pop-up options list
Latest version: 0.0.19

## Select

> Select

## Install

```bash
npm i
```

## Dev

```bash
npm start
```

## Preview

```
//html mode demo
http://localhost:3000

//jsx mode demo
http://localhost:3000/demo.html
```

## Release

```
npm run build
```
npm package: @omiu/slider
Description: used for dragging through content on page
Author: dntzhang
Latest version: 0.0.15

# Slider

used for dragging through content on page

* [→ CodePen](https://codepen.io/omijs/pen/undefined)

## Import

```js
import '@omiu/slider'
```

Or use script tag to ref it.


```html
<script src="https://unpkg.com/@omiu/slider"></script>
```

## Usage

```html
<o-slider></o-slider>
```

## API

### Props

```tsx
{
  min?: number
  max?: number
  step?: number
  value?: number
  second_value?: number
  size: 'small' | 'normal' | 'large'
  range: 'single' | 'double'
  orient?: 'vertical' | 'horizontal'
  shape: 'square' | 'round'
  tooltip?: boolean
  disabled?: boolean
  reversed?: boolean
}
```

### Default Props

```tsx
{
  //default a single round range slider
  min: undefined,
  max: undefined,
  step: 1,
  value: undefined,
  second_value: undefined,
  range: 'single',
  size: 'normal',
  orient: 'horizontal',
  shape: 'round',
  tooltip: false,
  disabled: false,
  reversed: false,
}
```
### Events

* input
* change
npm package: @omiu/switch
Description: Switch button
Author: dntzhang
Latest version: 0.0.2

## Switch

Switch button

* [→ CodePen](https://codepen.io/omijs/pen/BaoRpLd)

## Import

```js
import '@omiu/switch'
```

Or use script tag to ref it.


```html
<script src="https://unpkg.com/@omiu/switch"></script>
```

## Usage

```html
<o-switch></o-switch>
```

## API

### Props

```tsx
{
  checked: boolean
}
```


### Events

* change
npm package: @omiu/table
Description: 展示行列数据。
Latest version: 0.0.25

# Table 表格

展示行列数据。


## 导入

```js
import '@omiu/table'
```

或者直接 script 标签引入。

```html
<script src="https://unpkg.com/@omiu/table"></script>
```

## 使用

```html
<o-table></o-table>
```

## API

### 属性

```tsx
{
  options: TableOptions
}
```

#### TableOptions

```tsx
{
  data: {[key: string]: any}[]
  columns: Column[]
  mergeCells: mergeCell[]
}
```

### Column

```tsx
{
  align?:	'left' | 'right' | 'center'	// 设置列的对齐方式， 默认 left
  render?: ({cellData, column, rowData, tableData}) => VNode
}
```


### mergeCell

```tsx
{
  row: number
  col: number
  rowSpan: number
  colSpan: number
}
```

### Events
npm package: @omiu/tag
Description: tag
Latest version: 0.0.7

# tag

tag

## Import

```js
import '@omiu/tag'
```

Or use script tag to ref it.

```html
<script src="https://unpkg.com/@omiu/tag"></script>
```

## Usage

```html
<o-tag></o-tag>
```

## API

### Props

```tsx
export interface TagProps {
  /**
   * 类型
   */
  type?: 'success' | 'info' | 'warning' | 'danger'
  /**
   * 是否可关闭
   */
  closable?: boolean
  /**
   * 背景色
   */
  color?: string
  /**
   * 尺寸
   */
  size?: 'default' | 'medium' | 'small' | 'mini'
  /**
   * 是否禁用
   */
  disabled?: boolean
  /**
   * 点击 Tag 时触发的事件
   */
  onClick?: (e: MouseEvent) => void
  /**
   * 关闭 Tag 时触发的事件
   */
  onClose?: (e: MouseEvent) => void
}
```

### 默认属性

```tsx
TagProps = {
  disabled: false,
  size: 'default',
  closable: false
}
```

## Dev

```bash
cd components/tag
yarn
# 开发预览
yarn dev
# 构建（目录位于 dist）
yarn build
# 构建 demo
yarn build:demo
# 构建 scss
yarn build:scss
```
npm package: @omiu/time-picker
Description: TimePicker
Latest version: 0.0.3


# TimePicker

TimePicker

## Import

```js
import '@omiu/time-picker'
```

Or use script tag to ref it.

```html
<script src="https://unpkg.com/@omiu/time-picker"></script>
```

## Usage

```html
<o-time-picker></o-time-picker>
```

## API

### Props

```tsx
```

### 默认属性

```tsx

```

## Dev

尝试使用 vite 构建

```bash
cd components/time-picker
yarn
# 开发预览
yarn dev
# 构建（目录位于 dist）
yarn build
# 构建 demo
yarn build:demo
# 构建 scss
yarn build:scss
```
npm package: @omiu/tip
Description: Components that show tooptip or popover.
Author: dntzhang
Latest version: 0.0.3

## Tip

Components that show tooptip or popover.

* [→ CodePen](https://codepen.io/omijs/pen/yLYMrdg)

## Import

```js
import '@omiu/tip'
```

Or use script tag to ref it.


```html
<script src="https://unpkg.com/@omiu/tip"></script>
```

## Usage

```html
<o-tip></o-tip>
```

## API

### Props

```tsx
{
  content?: string,
  effect?: string,
  position?: string
}
```

### defaultProps

```tsx
{
  content: '',
  effect: 'light',
  position: 'bottom'
}
```
npm package: @omiu/toast
Description: Pop up prompt box.
Latest version: 0.0.13

## Toast

Pop up prompt box.

* [→ CodePen](https://codepen.io/omijs/pen/YzyVwOO)

## Import

```js
import '@omiu/toast'
```

Or use script tag to ref it.


```html
<script src="https://unpkg.com/@omiu/toast"></script>
```

## Usage

```html
<o-toast></o-toast>
```

## API

### Props

```tsx
{
  label?: string
  loading?: boolean
  done?: boolean
  duration: number
  autoClose: boolean
  show: boolean
}
```

### 默认属性

```tsx
{
  duration: 2000,
  autoClose: false,
  show: true
)
```
npm package: @omiu/toggle-icon
Description: Icon with two state switches
Author: dntzhang
Latest version: 0.0.3

## ToggleIcon

Icon with two state switches

* [→ CodePen](https://codepen.io/omijs/pen/ZEbKwXX)

## Import

```js
import '@omiu/toggle-icon'
```

Or use script tag to ref it.


```html
<script src="https://unpkg.com/@omiu/toggle-icon"></script>
```

## Usage

```html
<o-toggle-icon></o-toggle-icon>
```

## API

### Props

```tsx
{
  isOn?: boolean
  icons: object
  imgs: object
  color: string
  disabled: boolean
}
```

### 默认属性

```tsx
{
  isOn: false,
  icons: []
)
```
### Events

* change
npm package: @omiu/tooltip
Description: Components that show tooptip.
Author: dntzhang
Latest version: 0.0.1

## Tip

Components that show tooptip or popover.

* [→ CodePen](https://codepen.io/omijs/pen/yLYMrdg)

## Import

```js
import '@omiu/tip'
```

Or use script tag to ref it.


```html
<script src="https://unpkg.com/@omiu/tip"></script>
```

## Usage

```html
<o-tip></o-tip>
```

## API

### Props

```tsx
{
  content?: string,
  effect?: string,
  position?: string
}
```

### defaultProps

```tsx
{
  content: '',
  effect: 'light',
  position: 'bottom'
}
```
npm package: @omiu/transition
Description: Define transition animation for entering and leaving
Latest version: 0.0.17

## Transition

Define transition animation for entering and leaving

* [→ CodePen](https://codepen.io/omijs/pen/JjYyezQ)

## Import

```js
import '@omiu/transition'
```

Or use script tag to ref it.


```html
<script src="https://unpkg.com/@omiu/transition"></script>
```

## Usage

```html
<o-transition></o-transition>
```

## API

### Props

```tsx
{
  name: string
  leavingTime?: number
  autoRemove?: boolean
  appear?: boolean
  delay?: number
}
```

### 默认属性

```tsx
{
  name: 'o',
  delay: 0
}
```
### Events

* before-enter
* after-enter
* enter
* before-leave
* after-leave
* leave
npm package: @omiu/tree
Description: Components that show tree nested data structures.
Author: dntzhang
Latest version: 0.0.22

## Tree

Components that show tree nested data structures.

* [→ CodePen](https://codepen.io/omijs/pen/yLYMrdg)

## Import

```js
import '@omiu/tree'
```

Or use script tag to ref it.


```html
<script src="https://unpkg.com/@omiu/tree"></script>
```

## Usage

```html
<o-tree></o-tree>
```

## API

### Props

```tsx
{
  data?: any[]
  padding: number
}
```

### defaultProps

```tsx
{
  padding: 10
}
```
### Events

* node-click
* node-arrow-click
* context-menu
* action-icon-click
* fold
npm package: @omixfy/uikit-css
Description: Biblioteca de estilos CSS nativos do Omixfy UIkit
Author: Omixfy
Latest version: 1.0.9

# @omixfy/uikit-css

Biblioteca de estilos CSS nativos do Omixfy UIkit. Fornece variáveis CSS, estilos de componentes e utilitários para projetos que utilizam o design system Omixfy.

## Instalação

```bash
npm install @omixfy/uikit-css
```

## Uso

### Importação em projetos React/Next.js

#### Next.js (App Router)

No arquivo `app/layout.tsx` ou `app/globals.css`:

```css
@import '@omixfy/uikit-css/dist/global.css';
```

#### Next.js (Pages Router)

No arquivo `pages/_app.tsx`:

```tsx
import '@omixfy/uikit-css/dist/global.css';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}
```

#### React (Vite/CRA)

No arquivo principal (`main.tsx`, `index.tsx` ou `App.tsx`):

```tsx
import '@omixfy/uikit-css/dist/global.css';
```

### Importação em projetos HTML/CSS puro

```html
<link rel="stylesheet" href="./node_modules/@omixfy/uikit-css/dist/global.css">
```

ou via CDN (quando disponível):

```html
<link rel="stylesheet" href="https://unpkg.com/@omixfy/uikit-css@latest/dist/global.css">
```

## Variáveis CSS

O pacote expõe variáveis CSS customizadas que podem ser utilizadas em seus estilos:

### Cores Primárias

```css
.elemento {
  background-color: var(--of-primary-500);
  color: var(--of-primary-text);
}
```

Variáveis disponíveis:
- `--of-primary-50` até `--of-primary-950`
- `--of-primary-oklch`
- `--of-primary-bg`
- `--of-primary-text`

### Cores Secundárias

```css
.elemento {
  background-color: var(--of-secondary-500);
  color: var(--of-secondary-text);
}
```

Variáveis disponíveis:
- `--of-secondary-50` até `--of-secondary-950`
- `--of-secondary-oklch`
- `--of-secondary-bg`
- `--of-secondary-text`

### Cores Neutras

```css
.elemento {
  background-color: var(--of-neutral-100);
  color: var(--of-neutral-900);
}
```

Variáveis disponíveis:
- `--of-neutral-50` até `--of-neutral-950`

### Background e Superfície

```css
.container {
  background-color: var(--of-bg);
}

.card {
  background-color: var(--of-surface);
}

.card-secondary {
  background-color: var(--of-card);
}
```

### Tipografia

```css
body {
  font-family: var(--of-font-family);
}
```

## Estrutura

O CSS é organizado em camadas (layers) para melhor controle de especificidade:

- `reset` - Reset de estilos padrão
- `base` - Estilos base e variáveis
- `theme` - Tema e customizações
npm package: @omixfy/web-tools
Description: Tools para o desenvolvimento de aplicativos web.
Author: Raul Melo
Latest version: 1.0.6

# Web Tools

Tools para o desenvolvimento de aplicativos web.

## Instalação

```bash
npm install @omixfy/web-tools
```

## Desenvolvimento

- Requisitos: Node 18+ e npm 9+
- Código fonte em `src/`
- Entrada do pacote: `src/public-api.ts`

### Scripts

- `npm run build`: compila TypeScript de `src/` para `dist/`
- Publicação: o `prepublishOnly` roda o build automaticamente

### Build local

```bash
npm install
npm run build
```

Os artefatos ficam em `dist/`. O pacote expõe `dist/public-api.js` e os tipos em `dist/public-api.d.ts`.

## Publicação no npm

1. Ajuste a versão no `package.json`
2. Faça login no npm:
   ```bash
   npm login
   ```
3. Publique:
   ```bash
   npm publish --access public
   ```

## Uso

### Funções de Autenticação

```ts
import { 
  setAuth, 
  getAuth,
  setToken, 
  validateToken, 
  getToken, 
  getUser 
} from '@omixfy/web-tools';

// Definir dados de autenticação no storage
setAuth({ accessToken: 'token123', refreshToken: 'refresh123' });

// Recuperar dados de autenticação do storage
const authData = getAuth(); // retorna any

// Definir token no storage
setToken('token123');

// Validar se o token é válido e não está expirado
const isValid = validateToken(); // retorna true ou false

// Recuperar token do storage
const token = getToken(); // retorna string | null

// Recuperar dados do usuário do storage
const user = getUser(); // retorna any
```

### Funções de Loja

```ts
import { 
  setStore, 
  getStore,
  validateStore
} from '@omixfy/web-tools';

// Definir dados da loja no storage
setStore({ 
  id: '',
  name: '',
  ...OthersData
});

// Recuperar dados da loja do storage
const store = getStore(); // retorna any

// Validar se a loja existe e está ativa
const isValid = validateStore(); // retorna true ou false
```

### Outras funções

```ts
import { getTokenRoles, TokenStorage } from '@omixfy/web-tools';
```
npm package: @omjs/angle
Description: 角 - 角之度量，包含弧度、度、梯度、圈/转之间的转换
Author: oyzhen
Latest version: 1.3.1

# Angle 类库

本库提供了一个类 `Angle` 用于在各种角单位之间相互转换。

[Source Code 👉](https://git.coding.net/oyzhen/angle.git)

## Install

```bash
npm i @omjs/angle
```

## Usage

```javascript
import Angle from '@omjs/angle';
var ag = new Angle(45, Angle.UNIT.DEG);  // Angle {angle: 45, unit: Symbol('deg')}
ag.rad;  // 0.78539816 rad
ag.deg;  // 45 deg
ag.grad;  // 50 grad
ag.turn;  // 0.125 turn
```

## API

[See API.md 👉](./doc/API.md)
npm package: @omjs/iterable
Description: 可迭代对象及迭代方法库, an library for iterable object and iterator functions using ES2015+.
Author: oyzhen
Latest version: 1.2.2

# 可迭代对象及迭代方法

本库提供了一个类 `Iterable` 用于构建具有不可变结构的可迭代对象，并导出了一些继承自 Array 对象的迭代方法函数。

[Source Code 👉](https://git.coding.net/oyzhen/iterable.git)

## INSTALL

```
npm i @omjs/iterable
```

## USAGE

### `Iterable`

```javascript
import { Iterable } from '@omjs/iterable';
var iter = new Iterable(1, 2, 3, 4);
console.log(iter); // Iterable {0: 1, 1: 2, 2: 3, 3: 4, length: 4}
console.log(iter.toString()); // 1,2,3,4
console.log(iter.valueOf()); // {0: 1, 1: 2, 2: 3, 3: 4}
console.log([...iter]); // [1, 2, 3, 4]
console.log({ ...iter }); // {0: 1, 1: 2, 2: 3, 3: 4}
console.log(iter instanceof Array); // false
```

### Iterator Methods

```javascript
import { Iterable, map, filter, find } from '@omjs/iterable';
var iter = new Iterable(1, 2, 3, 4);

map.bind(iter)(v => v + 1); // [2,3,4,5]
filter.bind(iter)(v => v % 2); // [1,3]
find.bind(iter)(v => v % 2); // 1

// using babel-plugin-transform-function-bind
iter::map(v => v + 1); // [2,3,4,5]
iter::filter(v => v % 2); // [1, 3]
iter::find(v => v % 2); // 1
```

## API

Coming soon...

## LICENCE

[MIT](./LICENCE)
npm package: @omkar-sheral/react-view-controller
Description: Controller for React Component
Author: Omkar Sheral
Latest version: 1.0.8

# react-view-controller
Controller for React Component

A pattern where Component should worry about only rendering the data.
Controller will take care of providing the data to the Component and
handling the events.

The idea is Component should be as dumb as possible.

Controller should be responsible for the logic.

This library delegates all life cycle callbacks of Component to Contoller.
Controller then, in the life cycle callbacks, can fetch the data, attach an event listener, 
and work on data.

### How to use
See 
[examples](https://github.com/omkarsheral1989/react-view-controller/tree/master/example).
npm package: @omkarkadu/secure-server-kit
Description: Backend security middleware for Express.js (CSP, headers, rate limiting, VAPT baseline)
Latest version: 1.3.3

# @omkarkadu/secure-server-kit

A backend security middleware for **Express.js** applications that applies
**Content Security Policy (CSP)**, **security headers**, **rate limiting**, and
basic **VAPT / OWASP hardening** with safe defaults.

This package is designed to be:

- Easy to use
- Secure by default
- Configurable when needed

---

## Features

- Secure default **Content Security Policy (CSP)**
- Common OWASP-recommended security headers
- Removes Express fingerprinting
- Rate limiting enabled by default
- User-based rate limiting support
- **Advanced route-specific rate limiting**
- Ability to disable rate limiting
- Custom security signature header
- Request Timeout Protection
- HTTP Method AllowList
- Body Limit (JSON REQUEST SIZE)
- `"use strict"` across all source files

---

## Installation

```bash
npm install @omkarkadu/secure-server-kit
```

## Documentation

👉 **Check the `Docs.js` file included in this package** for a complete,
fully working example with detailed comments and advanced configuration options.
npm package: @omkarkirpan/tiny
Description: Removes all spaces from a string
Latest version: 2.0.1

# @omkarkirpan/tiny

[![npm (scoped)](https://img.shields.io/npm/v/@omkarkirpan/tiny)](https://github.com/OmkarKirpan/tiny)
[![install size](https://packagephobia.com/badge?p=@omkarkirpan/tiny)](https://packagephobia.com/result?p=@omkarkirpan/tiny)

Removes all spaces from a string.

## Install

```
$ npm install @omkarkirpan/tiny
```

## Usage

```js
const tiny = require("@omkarkirpan/tiny");

tiny("So much space!");
//=> "Somuchspace!"

tiny(1337);
//=> Uncaught TypeError: Tiny wants a string!
//    at tiny (<anonymous>:2:41)
//    at <anonymous>:1:1
```
npm package: @omkartech/aws-utils
Description: Utils for accessing AWS
Author: Nachi Muthukumar
Latest version: 1.1.2

# AWS Utils

Functions to invoke Lambdas, publish to SNS, and interface with S3

## Install

```bash
npm install --save @omkar-tect/aws-utils
```

## Usage

## Lambda 

```js
import {
  invokeLambda,
  adminRequestContext,
} from '@omkar-tect/aws-utils'

const stage = process.env.STAGE;
const svcInvokeResp = await invokeLambda(`lambdaname-${stage}-get`, {
  pathParameters: {
    Key: value,
  },
  queryStringParameters: {
    Id: uui-123123,
    AddChild: true,
  },
}, {
  requestContext: adminRequestContext,
  appendStage: false,
});

// For asynchronous execution, you can supply "Event" for invocationType on the options
const svcInvokeResp = await invokeLambda(`lambdaname-${stage}-get`, {
  pathParameters: {
    ...
  },
  queryStringParameters: {
    ...
  },
}, {
  requestContext: adminRequestContext,
  appendStage: false,
  invocationType: "Event"
});
```

## SNS

```js
import {
  publishSampleEvent,
  TOPIC_FORMAT_APPENDED,  
} from '@omkar-tect/aws-utils'

const stage = process.env.STAGE;
await publishSampleEvent('topic-name', SomeOldKey, SomeNewKey, { topicFormat: TOPIC_FORMAT_APPENDED, notificationTitle: 'title' });
```

## S3

```js
import {
  copyS3toS3,
  deleteS3File,
  moveS3toS3,
  s3FileExists,
  uploadFileToS3,
} from '@omkar-tect/aws-utils'

// Operations
await copyS3toS3({ sourceBucket, sourceKey, targetBucket, targetKey })
await moveS3toS3({ sourceBucket, sourceKey, targetBucket, targetKey })
await deleteS3File({ sourceBucket, sourceKey })
await uploadFileToS3({ bucket, key, body })

// Utilities
const exists = await s3FileExists({ bucket, key })
const parsed = s3FileParser('s3://omkartech-aws-utils-test/dynamotableschema/test.json')
// "parsed" is an object with Bucket and Key properties:
// {
//   Bucket: 'omkartech-aws-utils-test',
//   Key: 'dynamotableschema/test.json'
// }

```
npm package: @omkartech/before-after-middleware
Description: Module to do specific set of actions before and after lambda calls
Author: Nachi Muthukumar
Latest version: 1.1.2

Before After Middleware
=========

Allows functionality to be inserted before the lambda is called and after of warewolf stack.   Handles default error handling in after.  Before also adds a flag to tell lambda to stop running any threads when after is called.

## Installation

```bash
npm install @omkartech/before-after-middleware
```

## Usage

```js
import ware from 'warewolf';
import { before, after } from '@omkartech/before-after-middleware';

export const get = ware(
  before,
  async (event) => {
    event.result = { message: 'Hello World' };
  },
  after,
);
```

## Tests

  `npm test`
npm package: @omkartech/role-policy
Description: Policy rules for aws auth roles
Author: Nachi Muthukumar
Latest version: 1.3.0

# `@omkartech/role-policy`
# Role Policy

This package contains policy rules for aws auth roles.

## ROLES
Default export is a JSON object of all roles available.  

### ROLE_AWS_APP_ADMIN

String `AwsAppAdmin`

Highest level admin generally used by applications

### ROLE_APP_READONLY_ADMIN

String `AppReadOnlyAdmin`

### ROLE_EXTERNAL_CLIENT_ADMIN

String `ExternalClientAdmin`

### ROLE_EXTERNAL_CLIENT_READONLY_ADMIN

String `ExternalReadOnlyClientAdmin`

### ROLE_ANY_EMPLOYEE

String `AnyEmployee`

## Usage

Roles default export

```js
import ROLES from '@omkartech/role-policy'

if (ROLES.AWS_APP_ADMIN) {
  console.log('"AWS Application Admin" is the highest level admin')
}
```

Named exports for roles

```js
import {
  ROLE_AWS_APP_ADMIN,
  ROLE_APP_READONLY_ADMIN,
  ROLE_EXTERNAL_CLIENT_ADMIN,
  ROLE_EXTERNAL_CLIENT_READONLY_ADMIN,
  ROLE_ANY_EMPLOYEE,
} from '@Omkartech/role-policy'

if (ROLE_AWS_APP_ADMIN) {
  console.log('"ROLE_AWS_APP_ADMIN" is the highest level admin')
}

if (ROLE_ANY_EMPLOYEE) {
  console.log('"ROLE_ANY_EMPLOYEE" is for employees')
}

```
npm package: @omkartech/service-request
Description: A wrapper to call lambda functions asyncronously
Author: Nachi Muthukumar
Latest version: 1.3.0

# `@omkartech/service-request`

The goal of this package is to centralize the boilerplate request setup and handling to any requests to lambda.


**Import the service**

```js
import serviceRequest from '@omkartech/service-request'
```

**Common request helper syntax**

```js
const lambdaFunction = params.FunctionName
const awsRegion = 'us-west-2'
const lambdaPayLoad = {}
  try {
    // find the lambda to invoke
    const svcParams = {
      InvocationType: 'Event',
      region: awsRegion || 'us-west-2',
    }
    // invoke lambda
    const resp = await serviceRequest(lambdaFunction, svcParams).request(lambdaPayLoad)
  } catch (err) {
    console.error(`Error in calling Lambda: ${lambdaFunction}, error: ${err.message}`)
    throw new Error(`Error in calling Lambda: ${lambdaFunction}, error: ${err.message}`)
  }
```