Compare commits
4 Commits
| Author | SHA1 | Date |
|---|---|---|
dntzhang
|
06df9a7949 | |
|
dntzhang
|
74d24dd377 | |
|
当耐特
|
2802a53c86 | |
|
yuqing521
|
3ae8d59a87 |
|
|
@ -7,10 +7,8 @@
|
|||
"jsx": true
|
||||
}
|
||||
},
|
||||
"plugins": ["prettier"],
|
||||
"rules": {
|
||||
"semi": [1, "never"],
|
||||
"indent": ["error", 2],
|
||||
"prettier/prettier": "error"
|
||||
"indent": ["error", 2]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ node_modules
|
|||
/coverage
|
||||
package-lock.json
|
||||
/test/ts/**/*.js
|
||||
yarn.lock
|
||||
|
||||
# Editor and IDE configuration
|
||||
.vscode/
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
dist
|
||||
node_modules
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
module.exports = {
|
||||
printWidth: 80,
|
||||
tabWidth: 2,
|
||||
useTabs: false,
|
||||
singleQuote: true,
|
||||
semi: false,
|
||||
trailingComma: "none",
|
||||
bracketSpacing: true
|
||||
};
|
||||
4
LICENSE
4
LICENSE
|
|
@ -13,6 +13,10 @@ Copyright (c) 2017 Jason Miller
|
|||
jsonpatcherproxy 0.0.10
|
||||
Copyright (c) 2018 alshakero
|
||||
|
||||
Open Source Software Licensed Under the Apache License 2.0:
|
||||
------------------------------------------------------
|
||||
htm
|
||||
Copyright 2018 Google Inc.
|
||||
|
||||
The MIT License (MIT)
|
||||
------------------------------------------------------
|
||||
|
|
|
|||
509
README.CN.md
509
README.CN.md
|
|
@ -2,14 +2,10 @@
|
|||
|
||||
<p align="center"><img src="https://tencent.github.io/omi/assets/logo.svg" alt="omi" width="100"/></p>
|
||||
<h2 align="center">Omi - 前端跨框架跨平台框架</h2>
|
||||
|
||||
> Omiu - 使用 Omi 打造的跨框架、[跨主题](https://omi.cdn-go.cn/admin/latest/index.html#/docs/theme) UI 组件库
|
||||
|
||||
* [💯国内加速访问 Omi Admin](https://omi.cdn-go.cn/admin/latest/index.html)
|
||||
* [💯Omiu 打造的 Omi Admin](https://tencent.github.io/omi/packages/admin/dist/index.html)
|
||||
<p align="center"><b>基于 Web Components 跨框架并支持小程序开发(omi-kbone)</b></p>
|
||||
|
||||
|
||||
使用 TypeScript 开发跨框架的按钮组件:
|
||||
## 使用 TypeScript 开发自定义组件
|
||||
|
||||
```ts
|
||||
import { tag, WeElement, h, extractClass } from 'omi'
|
||||
|
|
@ -78,78 +74,268 @@ export default class Button extends WeElement<Props>{
|
|||
}
|
||||
```
|
||||
|
||||
## Omiu
|
||||
|
||||
## 快速开始开发项目
|
||||
> Omi 打造的跨框架、[跨主题](https://tencent.github.io/omi/components/docs/cn.html#/theme?index=0&subIndex=1) UI 组件库
|
||||
|
||||
```bash
|
||||
$ npm i omi-cli -g # install cli
|
||||
$ omi init my-app # 初始化项目，也可以在空目录里执行 'omi init'
|
||||
$ cd my-app # 如果在空目录里执行 'omi init' 忽略这条命令
|
||||
$ npm start # 开发
|
||||
$ npm run build # 编译发布
|
||||
```
|
||||
| **Name** | **Status** | **Example** | **Docs** |
|
||||
| -------------- | ----------|----------- | ----------------|
|
||||
| [@omiu/button][omiu-button-github] | [![omiu-button-status]][omiu-button-package]|[CodePen][omiu-button-codepen] | [Button Docs][omiu-button-docs]|
|
||||
| [@omiu/icon][omiu-icon-github] | [![omiu-icon-status]][omiu-icon-package]|[Icon Online][omiu-icon-codepen] | [Icon Docs][omiu-icon-docs]|
|
||||
| [@omiu/tabs][omiu-tabs-github] | [![omiu-tabs-status]][omiu-tabs-package]|[CodePen][omiu-tabs-codepen] | [Tabs Docs][omiu-tabs-docs]|
|
||||
| [@omiu/radio][omiu-radio-github] | [![omiu-radio-status]][omiu-radio-package]|[CodePen][omiu-radio-codepen] | [Radio Docs][omiu-radio-docs]|
|
||||
| [@omiu/link][omiu-link-github] | [![omiu-link-status]][omiu-link-package]|[CodePen][omiu-link-codepen] | [Link Docs][omiu-link-docs]|
|
||||
| [@omiu/checkbox][omiu-checkbox-github] | [![omiu-checkbox-status]][omiu-checkbox-package]|[CodePen][omiu-checkbox-codepen] | [Checkbox Docs][omiu-checkbox-docs]|
|
||||
| [@omiu/hamburger-menu][omiu-hamburger-menu-github] | [![omiu-hamburger-menu-status]][omiu-hamburger-menu-package]|[CodePen][omiu-hamburger-menu-codepen] | [HamburgerMenu Docs][omiu-hamburger-menu-docs]|
|
||||
| [@omiu/input][omiu-input-github] | [![omiu-input-status]][omiu-input-package]|[CodePen][omiu-input-codepen] | [Input Docs][omiu-input-docs]|
|
||||
| [@omiu/tree][omiu-tree-github] | [![omiu-tree-status]][omiu-tree-package]|[CodePen][omiu-tree-codepen] | [Tree Docs][omiu-tree-docs]|
|
||||
| [@omiu/pagination][omiu-pagination-github] | [![omiu-pagination-status]][omiu-pagination-package]|[CodePen][omiu-pagination-codepen] | [Pagination Docs][omiu-pagination-docs]|
|
||||
| [@omiu/loading][omiu-loading-github] | [![omiu-loading-status]][omiu-loading-package]|[CodePen][omiu-loading-codepen] | [Loading Docs][omiu-loading-docs]|
|
||||
| [@omiu/toast][omiu-toast-github] | [![omiu-toast-status]][omiu-toast-package]|[CodePen][omiu-toast-codepen] | [Toast Docs][omiu-toast-docs]|
|
||||
| [@omiu/action-sheet][omiu-action-sheet-github] | [![omiu-action-sheet-status]][omiu-action-sheet-package]|[CodePen][omiu-action-sheet-codepen] | [ActionSheet Docs][omiu-action-sheet-docs]|
|
||||
| [@omiu/switch][omiu-switch-github] | [![omiu-switch-status]][omiu-switch-package]|[CodePen][omiu-switch-codepen] | [Switch Docs][omiu-switch-docs]|
|
||||
| [@omiu/color-picker][omiu-color-picker-github] | [![omiu-color-picker-status]][omiu-color-picker-package]|[CodePen][omiu-color-picker-codepen] | [ColorPicker Docs][omiu-color-picker-docs]|
|
||||
| [@omiu/chart][omiu-chart-github] | [![omiu-chart-status]][omiu-chart-package]|[CodePen][omiu-chart-codepen] | [Chart Docs][omiu-chart-docs]|
|
||||
| [@omiu/toggle-icon][omiu-toggle-icon-github] | [![omiu-toggle-icon-status]][omiu-toggle-icon-package]|[CodePen][omiu-toggle-icon-codepen] | [ToggleIcon Docs][omiu-toggle-icon-docs]|
|
||||
| [@omiu/o-icon][omiu-o-icon-github] | [![omiu-o-icon-status]][omiu-o-icon-package]|[CodePen][omiu-o-icon-codepen] | [OIcon Docs][omiu-o-icon-docs]|
|
||||
| [@omiu/badge][omiu-badge-github] | [![omiu-badge-status]][omiu-badge-package]|[CodePen][omiu-badge-codepen] | [Badge Docs][omiu-badge-docs]|
|
||||
| [@omiu/avatar][omiu-avatar-github] | [![omiu-avatar-status]][omiu-avatar-package]|[CodePen][omiu-avatar-codepen] | [Avatar Docs][omiu-avatar-docs]|
|
||||
| [@omiu/breadcrumb][omiu-breadcrumb-github] | [![omiu-breadcrumb-status]][omiu-breadcrumb-package]|[CodePen][omiu-breadcrumb-codepen] | [Breadcrumb Docs][omiu-breadcrumb-docs]|
|
||||
| [@omiu/bottom-nav][omiu-bottom-nav-github] | [![omiu-bottom-nav-status]][omiu-bottom-nav-package]|[CodePen][omiu-bottom-nav-codepen] | [BottomNav Docs][omiu-bottom-nav-docs]|
|
||||
| [@omiu/transition][omiu-transition-github] | [![omiu-transition-status]][omiu-transition-package]|[CodePen][omiu-transition-codepen] | [Transition Docs][omiu-transition-docs]|
|
||||
| [@omiu/dialog][omiu-dialog-github] | [![omiu-dialog-status]][omiu-dialog-package]|[CodePen][omiu-dialog-codepen] | [Dialog Docs][omiu-dialog-docs]|
|
||||
| [@omiu/dialog-extention][omiu-dialog-extention-github] | [![omiu-dialog-extention-status]][omiu-dialog-extention-package]|[CodePen][omiu-dialog-extention-codepen] | [DialogExtention Docs][omiu-dialog-extention-docs]|
|
||||
| Coming... | | | |
|
||||
| Coming... | | | |
|
||||
|
||||
> `npx omi-cli init my-app` 也支持(要求 npm v5.2.0+)
|
||||
[omiu-button-github]: https://github.com/Tencent/omi/tree/v6/components/button
|
||||
[omiu-button-status]: https://img.shields.io/npm/v/@omiu/button.svg
|
||||
[omiu-button-package]: https://www.npmjs.com/package/@omiu/button
|
||||
[omiu-button-docs]: https://tencent.github.io/omi/components/docs/cn.html#/button
|
||||
[omiu-button-codepen]: https://codepen.io/omijs/pen/LYppwYG
|
||||
|
||||
## 快速开始开发跨框架组件
|
||||
[omiu-icon-github]: https://github.com/Tencent/omi/tree/v6/components/icon
|
||||
[omiu-icon-status]: https://img.shields.io/npm/v/@omiu/icon.svg
|
||||
[omiu-icon-package]: https://www.npmjs.com/package/@omiu/icon
|
||||
[omiu-icon-docs]: https://tencent.github.io/omi/components/docs/cn.html#/icon
|
||||
[omiu-icon-codepen]: https://tencent.github.io/omi/components/icon/demos/icon.html
|
||||
|
||||
```bash
|
||||
$ npm i omi-cli -g # install cli
|
||||
$ omi init-component my-component # 初始化项目，也可以在空目录里执行 'omi init'
|
||||
$ cd my-app # 如果在空目录里执行 'omi init' 忽略这条命令
|
||||
$ npm start # 开发
|
||||
$ npm run build # 编译发布
|
||||
```
|
||||
[omiu-tabs-github]: https://github.com/Tencent/omi/tree/v6/components/tabs
|
||||
[omiu-tabs-status]: https://img.shields.io/npm/v/@omiu/tabs.svg
|
||||
[omiu-tabs-package]: https://www.npmjs.com/package/@omiu/tabs
|
||||
[omiu-tabs-docs]: https://tencent.github.io/omi/components/docs/cn.html#/tabs
|
||||
[omiu-tabs-codepen]: https://codepen.io/omijs/pen/XWmjyXK
|
||||
|
||||
> `npx omi-cli init-component my-component` 也支持(要求 npm v5.2.0+)
|
||||
|
||||
[omiu-radio-github]: https://github.com/Tencent/omi/tree/v6/components/radio
|
||||
[omiu-radio-status]: https://img.shields.io/npm/v/@omiu/radio.svg
|
||||
[omiu-radio-package]: https://www.npmjs.com/package/@omiu/radio
|
||||
[omiu-radio-docs]: https://tencent.github.io/omi/components/docs/cn.html#/radio
|
||||
[omiu-radio-codepen]: https://codepen.io/omijs/pen/GRpjapr
|
||||
|
||||
|
||||
[omiu-link-github]: https://github.com/Tencent/omi/tree/v6/components/link
|
||||
[omiu-link-status]: https://img.shields.io/npm/v/@omiu/link.svg
|
||||
[omiu-link-package]: https://www.npmjs.com/package/@omiu/link
|
||||
[omiu-link-docs]: https://tencent.github.io/omi/components/docs/cn.html#/link
|
||||
[omiu-link-codepen]: https://codepen.io/omijs/pen/KKdNBaO
|
||||
|
||||
|
||||
|
||||
[omiu-hamburger-menu-github]: https://github.com/Tencent/omi/tree/v6/components/hamburger-menu
|
||||
[omiu-hamburger-menu-status]: https://img.shields.io/npm/v/@omiu/hamburger-menu.svg
|
||||
[omiu-hamburger-menu-package]: https://www.npmjs.com/package/@omiu/hamburger-menu
|
||||
[omiu-hamburger-menu-docs]: https://tencent.github.io/omi/components/docs/cn.html#/hamburger-menu
|
||||
[omiu-hamburger-menu-codepen]: https://codepen.io/omijs/pen/MWapaJd
|
||||
|
||||
[omiu-input-github]: https://github.com/Tencent/omi/tree/v6/components/input
|
||||
[omiu-input-status]: https://img.shields.io/npm/v/@omiu/input.svg
|
||||
[omiu-input-package]: https://www.npmjs.com/package/@omiu/input
|
||||
[omiu-input-docs]: https://tencent.github.io/omi/components/docs/cn.html#/input
|
||||
[omiu-input-codepen]: https://codepen.io/omijs/pen/yLYMGqa
|
||||
|
||||
[omiu-checkbox-github]: https://github.com/Tencent/omi/tree/v6/components/checkbox
|
||||
[omiu-checkbox-status]: https://img.shields.io/npm/v/@omiu/checkbox.svg
|
||||
[omiu-checkbox-package]: https://www.npmjs.com/package/@omiu/checkbox
|
||||
[omiu-checkbox-docs]: https://tencent.github.io/omi/components/docs/cn.html#/checkbox
|
||||
[omiu-checkbox-codepen]: https://codepen.io/omijs/pen/MWapwNZ
|
||||
|
||||
[omiu-switch-github]: https://github.com/Tencent/omi/tree/v6/components/switch
|
||||
[omiu-switch-status]: https://img.shields.io/npm/v/@omiu/switch.svg
|
||||
[omiu-switch-package]: https://www.npmjs.com/package/@omiu/switch
|
||||
[omiu-switch-docs]: https://tencent.github.io/omi/components/docs/index.html#/switch
|
||||
[omiu-switch-codepen]: https://codepen.io/omijs/pen/BaoRpLd
|
||||
|
||||
[omiu-tree-github]: https://github.com/Tencent/omi/tree/v6/components/tree
|
||||
[omiu-tree-status]: https://img.shields.io/npm/v/@omiu/tree.svg
|
||||
[omiu-tree-package]: https://www.npmjs.com/package/@omiu/tree
|
||||
[omiu-tree-docs]: https://tencent.github.io/omi/components/docs/cn.html#/tree
|
||||
[omiu-tree-codepen]: https://codepen.io/omijs/pen/yLYMrdg
|
||||
|
||||
[omiu-pagination-github]: https://github.com/Tencent/omi/tree/v6/components/pagination
|
||||
[omiu-pagination-status]: https://img.shields.io/npm/v/@omiu/pagination.svg
|
||||
[omiu-pagination-package]: https://www.npmjs.com/package/@omiu/pagination
|
||||
[omiu-pagination-docs]: https://tencent.github.io/omi/components/docs/cn.html#/pagination
|
||||
[omiu-pagination-codepen]: https://codepen.io/omijs/pen/MWamyBQ
|
||||
|
||||
[omiu-loading-github]: https://github.com/Tencent/omi/tree/v6/components/loading
|
||||
[omiu-loading-status]: https://img.shields.io/npm/v/@omiu/loading.svg
|
||||
[omiu-loading-package]: https://www.npmjs.com/package/@omiu/loading
|
||||
[omiu-loading-docs]: https://tencent.github.io/omi/components/docs/cn.html#/loading
|
||||
[omiu-loading-codepen]: https://codepen.io/omijs/pen/oNjZRwO
|
||||
|
||||
[omiu-toast-github]: https://github.com/Tencent/omi/tree/v6/components/toast
|
||||
[omiu-toast-status]: https://img.shields.io/npm/v/@omiu/toast.svg
|
||||
[omiu-toast-package]: https://www.npmjs.com/package/@omiu/toast
|
||||
[omiu-toast-docs]: https://tencent.github.io/omi/components/docs/cn.html#/toast
|
||||
[omiu-toast-codepen]: https://codepen.io/omijs/pen/YzyVwOO
|
||||
|
||||
[omiu-action-sheet-github]: https://github.com/Tencent/omi/tree/v6/components/action-sheet
|
||||
[omiu-action-sheet-status]: https://img.shields.io/npm/v/@omiu/action-sheet.svg
|
||||
[omiu-action-sheet-package]: https://www.npmjs.com/package/@omiu/action-sheet
|
||||
[omiu-action-sheet-docs]: https://tencent.github.io/omi/components/docs/cn.html#/action-sheet
|
||||
[omiu-action-sheet-codepen]: https://codepen.io/omijs/pen/wvKdoNJ
|
||||
|
||||
[omiu-color-picker-github]: https://github.com/Tencent/omi/tree/v6/components/color-picker
|
||||
[omiu-color-picker-status]: https://img.shields.io/npm/v/@omiu/color-picker.svg
|
||||
[omiu-color-picker-package]: https://www.npmjs.com/package/@omiu/color-picker
|
||||
[omiu-color-picker-docs]: https://tencent.github.io/omi/components/docs/cn.html#/color-picker
|
||||
[omiu-color-picker-codepen]: https://codepen.io/omijs/pen/gOaWmZE
|
||||
|
||||
[omiu-chart-github]: https://github.com/Tencent/omi/tree/v6/components/chart
|
||||
[omiu-chart-status]: https://img.shields.io/npm/v/@omiu/chart.svg
|
||||
[omiu-chart-package]: https://www.npmjs.com/package/@omiu/chart
|
||||
[omiu-chart-docs]: https://tencent.github.io/omi/components/docs/cn.html#/chart
|
||||
[omiu-chart-codepen]: https://codepen.io/omijs/pen/pojPKLr
|
||||
|
||||
[omiu-toggle-icon-github]: https://github.com/Tencent/omi/tree/v6/components/toggle-icon
|
||||
[omiu-toggle-icon-status]: https://img.shields.io/npm/v/@omiu/toggle-icon.svg
|
||||
[omiu-toggle-icon-package]: https://www.npmjs.com/package/@omiu/toggle-icon
|
||||
[omiu-toggle-icon-docs]: https://tencent.github.io/omi/components/docs/cn.html#/toggle-icon
|
||||
[omiu-toggle-icon-codepen]: https://codepen.io/omijs/pen/ZEbKwXX
|
||||
|
||||
[omiu-o-icon-github]: https://github.com/Tencent/omi/tree/v6/components/o-icon
|
||||
[omiu-o-icon-status]: https://img.shields.io/npm/v/@omiu/o-icon.svg
|
||||
[omiu-o-icon-package]: https://www.npmjs.com/package/@omiu/o-icon
|
||||
[omiu-o-icon-docs]: https://tencent.github.io/omi/components/docs/cn.html#/o-icon
|
||||
[omiu-o-icon-codepen]: https://codepen.io/omijs/pen/QWjgapY
|
||||
|
||||
[omiu-badge-github]: https://github.com/Tencent/omi/tree/v6/components/badge
|
||||
[omiu-badge-status]: https://img.shields.io/npm/v/@omiu/badge.svg
|
||||
[omiu-badge-package]: https://www.npmjs.com/package/@omiu/badge
|
||||
[omiu-badge-docs]: https://tencent.github.io/omi/components/docs/cn.html#/badge
|
||||
[omiu-badge-codepen]: https://codepen.io/omijs/pen/WNQOdaB
|
||||
|
||||
[omiu-avatar-github]: https://github.com/Tencent/omi/tree/v6/components/avatar
|
||||
[omiu-avatar-status]: https://img.shields.io/npm/v/@omiu/avatar.svg
|
||||
[omiu-avatar-package]: https://www.npmjs.com/package/@omiu/avatar
|
||||
[omiu-avatar-docs]: https://tencent.github.io/omi/components/docs/cn.html#/avatar
|
||||
[omiu-avatar-codepen]: https://codepen.io/omijs/pen/QWjgaze
|
||||
|
||||
[omiu-breadcrumb-github]: https://github.com/Tencent/omi/tree/v6/components/breadcrumb
|
||||
[omiu-breadcrumb-status]: https://img.shields.io/npm/v/@omiu/breadcrumb.svg
|
||||
[omiu-breadcrumb-package]: https://www.npmjs.com/package/@omiu/breadcrumb
|
||||
[omiu-breadcrumb-docs]: https://tencent.github.io/omi/components/docs/cn.html#/breadcrumb
|
||||
[omiu-breadcrumb-codepen]: https://codepen.io/omijs/pen/wvKqGxB
|
||||
|
||||
|
||||
[omiu-bottom-nav-github]: https://github.com/Tencent/omi/tree/v6/components/bottom-nav
|
||||
[omiu-bottom-nav-status]: https://img.shields.io/npm/v/@omiu/bottom-nav.svg
|
||||
[omiu-bottom-nav-package]: https://www.npmjs.com/package/@omiu/bottom-nav
|
||||
[omiu-bottom-nav-docs]: https://tencent.github.io/omi/components/docs/cn.html#/bottom-nav
|
||||
[omiu-bottom-nav-codepen]: https://codepen.io/omijs/pen/zYvdjEY
|
||||
|
||||
[omiu-transition-github]: https://github.com/Tencent/omi/tree/v6/components/transition
|
||||
[omiu-transition-status]: https://img.shields.io/npm/v/@omiu/transition.svg
|
||||
[omiu-transition-package]: https://www.npmjs.com/package/@omiu/transition
|
||||
[omiu-transition-docs]: https://tencent.github.io/omi/components/docs/cn.html#/transition
|
||||
[omiu-transition-codepen]: https://codepen.io/omijs/pen/JjYyezQ
|
||||
|
||||
[omiu-dialog-github]: https://github.com/Tencent/omi/tree/v6/components/dialog
|
||||
[omiu-dialog-status]: https://img.shields.io/npm/v/@omiu/dialog.svg
|
||||
[omiu-dialog-package]: https://www.npmjs.com/package/@omiu/dialog
|
||||
[omiu-dialog-docs]: https://tencent.github.io/omi/components/docs/cn.html#/dialog
|
||||
[omiu-dialog-codepen]: https://codepen.io/omijs/pen/JjYyezQ
|
||||
|
||||
[omiu-dialog-extention-github]: https://github.com/Tencent/omi/tree/v6/components/dialog-extention
|
||||
[omiu-dialog-extention-status]: https://img.shields.io/npm/v/@omiu/dialog-extention.svg
|
||||
[omiu-dialog-extention-package]: https://www.npmjs.com/package/@omiu/dialog-extention
|
||||
[omiu-dialog-extention-docs]: https://tencent.github.io/omi/components/docs/cn.html#/dialog-extention
|
||||
[omiu-dialog-extention-codepen]: https://codepen.io/omijs/pen/GRpOBmL
|
||||
|
||||
|
||||
## Omi 生态
|
||||
|
||||
[→ Omi 生态学习路线图](https://github.com/Tencent/omi/tree/master/assets/rm.md)
|
||||
[→ Omi 生态学习路线图](https://github.com/Tencent/omi/tree/v6/assets/rm.md)
|
||||
|
||||
#### 基础生态
|
||||
|
||||
| **项目** | **描述** |
|
||||
| ------------------------------- | ----------------------------------- |
|
||||
| [omi-docs](https://tencent.github.io/omi/site/docs/cn.html) 和 [例子](https://codepen.io/collection/DrMYgV/) 和 [webcomponents.dev](https://webcomponents.dev/)| Omi 官方文档 |
|
||||
| [omi-router ](https://github.com/Tencent/omi/tree/master/packages/omi-router) |Omi 官方路由,超级小的尺寸，只有 1KB 的 js|
|
||||
| [omi-cli](https://github.com/Tencent/omi/tree/master/packages/omi-cli)| 项目脚手架工具，各种模板任你选 [→ 基础模板](https://github.com/Tencent/omi/tree/master/packages/omi-cli/template) |
|
||||
| [CEE](https://omijs.github.io/cee/out/)| custom-elements-everywhere 评分 |
|
||||
|
||||
| [omix](https://github.com/Tencent/omi/tree/v6/packages/omix)| 小程序全局状态管理框架，数据触手可及，状态无处遁形 |
|
||||
| [omim](https://github.com/Tencent/omi/tree/v6/packages/omim)| Omi 打造的跨框架 Material Design UI 组件库, 任意框架可以使用,([DOCS & REPL](https://tencent.github.io/omi/packages/omim/docs/build/cn.html) && [加入我们](https://github.com/Tencent/omi/tree/v6/packages/omim#contribution)!)|
|
||||
| [omi-kbone ](https://github.com/Tencent/omi/tree/v6/packages/omi-kbone)| 使用 omi + [kbone](https://github.com/wechat-miniprogram/kbone) 多端开发(小程序和Web)的贪吃蛇游戏。|
|
||||
| [omio](https://github.com/Tencent/omi/tree/v6/packages/omio)| 兼容老浏览器的 Omi 版本(支持到 IE8+) |
|
||||
| [omis ](https://github.com/Tencent/omi/tree/v6/packages/omis)| Omis + React|
|
||||
| [omi-ssr](https://github.com/Tencent/omi/tree/v6/packages/omi-ssr)| 服务端同构渲染解决方案(目前只能用 omio) |
|
||||
| [omiu](https://tencent.github.io/omi/packages/omiu/examples/build/zh-cn.html)| 简单 Omi UI|
|
||||
| [omi-router ](https://github.com/Tencent/omi/tree/v6/packages/omi-router) |Omi 官方路由,超级小的尺寸，只有 1KB 的 js|
|
||||
| [omi-devtools](https://github.com/f/omi-devtools)| 谷歌浏览器开发工具扩展|
|
||||
| [omi-cli](https://github.com/Tencent/omi/tree/v6/packages/omi-cli)| 项目脚手架工具，各种模板任你选 [→ 基础模板](https://github.com/Tencent/omi/tree/v6/packages/omi-cli/template) and [→ 其他模板](https://github.com/omijs) |
|
||||
| [omil](https://github.com/Wscats/omil)| 基于 .omi 单文件组件的 webpack 模块加载器 |
|
||||
| [omi-snippets](https://github.com/Wscats/omi-snippets) | VSCode omi 文件扩展, [立即安装!](https://marketplace.visualstudio.com/items?itemName=Wscats.omi-snippets) |
|
||||
| [obaa](https://github.com/Tencent/omi/tree/v6/packages/obaa) 或 [JSONPatcherProxy](https://github.com/Palindrom/JSONPatcherProxy) | 监听或代理任意对象的任意变化 |
|
||||
<!-- | [omiv ](https://github.com/Tencent/omi/tree/v6/packages/omiv)| 1kb 搞定 Vue 无状态视图状态管理，[也可以 SSR](https://github.com/Tencent/omi/tree/v6/packages/vue-omiv-ssr-starter) | -->
|
||||
#### Snake MVP
|
||||
|
||||
| **Project** | **Description** |
|
||||
| ------------------------------- | ----------------------------------- |
|
||||
| [omi-snake ](https://github.com/Tencent/omi/tree/master/packages/omi-snake)| omi 写的 MVP 架构的贪吃蛇游戏 |
|
||||
| [omi-kbone-snake ](https://github.com/Tencent/omi/tree/master/packages/omi-kbone)| omi-kbone 写的 MVP 架构的跨端贪吃蛇游戏，支持小程序和 H5 |
|
||||
| [Preact-snake](https://github.com/Tencent/omi/tree/master/packages/preact-css/examples/snake) & [→ Touch the demo](https://tencent.github.io/omi/packages/preact-css/examples/snake/build/)| Preact + [Preact-CSS](https://github.com/Tencent/omi/tree/master/packages/preact-css) + Omis 写的贪吃蛇 |
|
||||
| [[P]react-snake ](https://github.com/Tencent/omi/tree/master/packages/react-snake) & [→ Touch the demo](https://tencent.github.io/omi/packages/react-snake/build/index.html)| react/preact 写的 MVP 架构的贪吃蛇游戏 |
|
||||
| [omix-snake](https://github.com/Tencent/omi/tree/master/packages/omix-snake) | Omix 写的 MVP 架构贪吃蛇 |
|
||||
<!-- | [vue-snake](https://github.com/Tencent/omi/tree/master/packages/vue-snake) | Vue + Omiv 写的 MVP 架构的贪吃蛇游戏 | -->
|
||||
| [omi-snake ](https://github.com/Tencent/omi/tree/v6/packages/omi-snake)| omi 写的 MVP 架构的贪吃蛇游戏 |
|
||||
| [omi-kbone-snake ](https://github.com/Tencent/omi/tree/v6/packages/omi-kbone)| omi-kbone 写的 MVP 架构的跨端贪吃蛇游戏，支持小程序和 H5 |
|
||||
| [Preact-snake](https://github.com/Tencent/omi/tree/v6/packages/preact-css/examples/snake) & [→ Touch the demo](https://tencent.github.io/omi/packages/preact-css/examples/snake/build/)| Preact + [Preact-CSS](https://github.com/Tencent/omi/tree/v6/packages/preact-css) + Omis 写的贪吃蛇 |
|
||||
| [[P]react-snake ](https://github.com/Tencent/omi/tree/v6/packages/react-snake) & [→ Touch the demo](https://tencent.github.io/omi/packages/react-snake/build/index.html)| react/preact 写的 MVP 架构的贪吃蛇游戏 |
|
||||
| [omix-snake](https://github.com/Tencent/omi/tree/v6/packages/omix-snake) | Omix 写的 MVP 架构贪吃蛇 |
|
||||
<!-- | [vue-snake](https://github.com/Tencent/omi/tree/v6/packages/vue-snake) | Vue + Omiv 写的 MVP 架构的贪吃蛇游戏 | -->
|
||||
|
||||
#### 小程序生态
|
||||
|
||||
| **项目** | **描述** |
|
||||
| ------------------------------- | ----------------------------------- |
|
||||
| [omix](https://github.com/Tencent/omi/tree/v6/packages/omix)| 小程序全局状态管理框架，数据触手可及，状态无处遁形 |
|
||||
| [react-kbone ](https://github.com/Tencent/omi/tree/v6/packages/react-kbone)| 直接使用 React 开发小程序或 Web，基于 [kbone](https://github.com/wechat-miniprogram/kbone) |
|
||||
| [preact-kbone ](https://github.com/Tencent/omi/tree/v6/packages/preact-kbone)| 直接使用 Preact 开发小程序或 Web，基于 [kbone](https://github.com/wechat-miniprogram/kbone) |
|
||||
| [omi-cloud](https://github.com/Tencent/omi/tree/v6/packages/omi-cloud)| 小程序•云开发|
|
||||
| [omip](https://github.com/Tencent/omi/tree/v6/packages/omip)| 直接使用 Omi 开发小程序或 H5 SPA|
|
||||
| [mps](https://github.com/Tencent/omi/tree/v6/packages/mps)| 原生小程序增强框架(JSX + Less 输出 WXML + WXSS)，也支持 QQ 轻应用 |
|
||||
| [cax](https://github.com/Tencent/omi/tree/v6/packages/cax)| 小程序 Canvas 和 SVG 渲染引擎 |
|
||||
| [omi-mp](https://github.com/Tencent/omi/tree/v6/packages/omi-mp)| 通过微信小程序开发和生成 Web 单页应用(H5 SPA) |
|
||||
| [westore](https://github.com/Tencent/westore/)| 小程序状态管理 |
|
||||
| [comi](https://github.com/Tencent/omi/tree/v6/packages/comi)| 小程序代码高亮和 markdown 渲染组件 |
|
||||
| [wx-touch-event](https://github.com/qbright/wx-touch-event)| 基于 AlloyFinger/omi-finger 改造的小程序手势解决方案 |
|
||||
|
||||
#### 其他
|
||||
|
||||
| **项目** | **描述** |
|
||||
| ------------------------------- | ----------------------------------- |
|
||||
| [omi-piano](https://github.com/Wscats/piano) |Omi 钢琴, [开始演奏吧!](https://wscats.github.io/piano/build/)|
|
||||
| [omi-devtools](https://github.com/f/omi-devtools)| 谷歌浏览器开发工具扩展|
|
||||
| [md2site](https://tencent.github.io/omi/assets/md2site/)| 用 markdown 生成静态网站文档.|
|
||||
| [omi-chart](https://github.com/Tencent/omi/tree/master/packages/omi-chart)| 一个 chart-x 标签搞定报表|
|
||||
| [omi-30-seconds](https://github.com/Tencent/omi/tree/master/packages/omi-30-seconds)| 30 秒理解一段有用的 Omi 代码片段.|
|
||||
| [omi-chart](https://github.com/Tencent/omi/tree/v6/packages/omi-chart)| 一个 chart-x 标签搞定报表|
|
||||
| [omi-30-seconds](https://github.com/Tencent/omi/tree/v6/packages/omi-30-seconds)| 30 秒理解一段有用的 Omi 代码片段.|
|
||||
| [omi-swiper](https://github.com/loo41/Omi-Swiper)| Omi + Swiper |
|
||||
| [omi-vscode](https://github.com/ZainChen/omi-vscode)| VSCode extension for omi, [Install now!](https://marketplace.visualstudio.com/items?itemName=ZainChen.omi) |
|
||||
| [omi-sprite](https://github.com/Tencent/omi/tree/master/packages/omi-sprite)| Web Components, JSX 和 Canvas 的完美融合|
|
||||
| [omi-canvas](https://github.com/Tencent/omi/tree/master/packages/omi-canvas)| Web Components, JSX 和 Canvas 的完美融合|
|
||||
| [omi-ex](https://github.com/Tencent/omi/tree/master/packages/omi-ex)| Omi.js 扩展(TypeScript) |
|
||||
| [omi-transform](https://github.com/Tencent/omi/tree/master/packages/omi-transform)|Omi 和 [css3transform](https://tencent.github.io/omi/packages/omi-transform/css3transform/) 完美结合. 让 css3 transform 在你的 Omi 项目中变得超级简单.|
|
||||
| [omi-finger](https://github.com/Tencent/omi/tree/master/packages/omi-finger)|Omi 官方手势库|
|
||||
| [omi-touch](https://github.com/Tencent/omi/tree/master/packages/omi-touch)|丝般顺滑的触摸运动|
|
||||
| [omi-snap](https://github.com/Tencent/omi/blob/master/tutorial/omi-snap.cn.md)|预渲染骨架屏|
|
||||
| [omi-sprite](https://github.com/Tencent/omi/tree/v6/packages/omi-sprite)| Web Components, JSX 和 Canvas 的完美融合|
|
||||
| [omi-canvas](https://github.com/Tencent/omi/tree/v6/packages/omi-canvas)| Web Components, JSX 和 Canvas 的完美融合|
|
||||
| [omi-ex](https://github.com/Tencent/omi/tree/v6/packages/omi-ex)| Omi.js 扩展(TypeScript) |
|
||||
| [omi-transform](https://github.com/Tencent/omi/tree/v6/packages/omi-transform)|Omi 和 [css3transform](https://tencent.github.io/omi/packages/omi-transform/css3transform/) 完美结合. 让 css3 transform 在你的 Omi 项目中变得超级简单.|
|
||||
| [omi-finger](https://github.com/Tencent/omi/tree/v6/packages/omi-finger)|Omi 官方手势库|
|
||||
| [omi-touch](https://github.com/Tencent/omi/tree/v6/packages/omi-touch)|丝般顺滑的触摸运动|
|
||||
| [omi-snap](https://github.com/Tencent/omi/blob/v6/tutorial/omi-snap.cn.md)|预渲染骨架屏|
|
||||
|[omi-i18n](https://github.com/i18next/omi-i18n)| Omi 国际化解决方案 |
|
||||
| [omi-page](https://github.com/Tencent/omi/tree/v6/packages/omi-page) | 基于 [page.js](https://github.com/visionmedia/page.js) 的 Omi 路由|
|
||||
| [omie](https://github.com/Wscats/omi-electron) | Omi.js 和 Electron.js 打造跨平台桌面应用 |
|
||||
| [Soo](https://github.com/tonis2/Soo)| 和 Omi 一样的 API，但是更小且没有 JSX, virtual DOM 和 store|
|
||||
| [CEE](https://omijs.github.io/cee/out/)| custom-elements-everywhere 评分 |
|
||||
|
||||
### 特性
|
||||
|
||||
|
|
@ -159,8 +345,12 @@ $ npm run build # 编译发布
|
|||
- 小巧的尺寸和[高性能](https://tencent.github.io/omi/packages/omi/examples/perfs/)
|
||||
- 对 custom elements 友好, 通过字符串 `'0'`或者`'false'`传递 `false`，[通过`:`和`Omi.$`传递任意复杂类型](https://github.com/Tencent/omi/releases/tag/v6.8.0)
|
||||
- 拥有官方跨框架 UI 组件库 - [omim](https://tencent.github.io/omi/packages/omim/docs/build/cn.html)
|
||||
- 使用 [omio](https://github.com/Tencent/omi/tree/v6/packages/omio) 可以兼容到 IE8
|
||||
- [很容易通过 extend api 实现双向绑定](https://codepen.io/omijs/pen/aeLYjx)
|
||||
- 支持 `TypeScript`
|
||||
- 响应式数据绑定
|
||||
- 增强了 CSS, [支持 rpx 单位](https://github.com/Tencent/omi/releases/tag/v4.0.26)，基于 **750** 屏幕宽度
|
||||
- [原生支持 tap 事件](https://github.com/Tencent/omi/releases/tag/v4.0.24)
|
||||
- [基于 Shadow/Light Dom 设计](https://developers.google.cn/web/fundamentals/web-components/shadowdom?hl=zh-cn)
|
||||
- 利用 [Chrome 开发工具扩展 ](https://github.com/f/omi-devtools)轻松调试，[从 Chrome 应用商店安装](https://chrome.google.com/webstore/detail/omijs-devtools/pjgglfliglbhpcpalbpeloghnbceocmd/related)
|
||||
- 符合浏览器的发展趋势以及 API 设计理念
|
||||
|
|
@ -170,12 +360,13 @@ $ npm run build # 编译发布
|
|||
- 看看 [Facebook React 和 Web Components 对比优势](https://www.cnblogs.com/rubylouvre/p/4072979.html)，Omi 融合了各自的优点，而且给开发者自由的选择喜爱的方式
|
||||
- `Shadow/Light DOM` 与 `Virtual DOM` 融合，Omi 既使用了`虚拟 DOM`，也是使用真实 `Shadow DOM`，让视图更新更准确更迅速
|
||||
- 局部 CSS 最佳解决方案(`Shadow DOM`)，社区为局部 CSS 折腾了不少框架和库(使用 js 或 json 写样式，如:`Radium`，`jsxstyle`，`react-style`；与 webpack 绑定使用生成独特的 className `文件名—类名—hash值`，如：`CSS Modules`，`Vue`)，还有运行时注入`scoped atrr` 的方式，都是 hack 技术；`Shadow DOM Style` 是最完美的方案
|
||||
- 独创的 `Path Updating`的 `store` 系统，基于 Proxy 全自动化的精准更新，功耗低，自由度高，性能卓越，方便集成 `requestIdleCallback`，自动化按需更新局部视图
|
||||
|
||||
对比同样开发 TodoApp， Omi 和 React 渲染完的 DOM 结构，Omi 使用 Shadow/Light DOM 隔离样式和语义化结构:
|
||||
|
||||
| **Omi** | **React** |
|
||||
| ------------------------------- | ----------------------------------- |
|
||||
|  |  |
|
||||
| **Omi** | **React** | **Omio** |
|
||||
| ------------------------------- | ----------------------------------- |----------------------------------- |
|
||||
|  |  |  |
|
||||
|
||||
|
||||
### TypeScript 智能提示
|
||||
|
|
@ -213,20 +404,20 @@ export default class oButton extends WeElement<ButtonProps> {
|
|||
|
||||
## 必须收藏的资源
|
||||
|
||||
* [使用 MVP 架构和 Web Components(Omi) 开发贪吃蛇](https://github.com/Tencent/omi/blob/master/tutorial/omi-web-components-snake-game-mvp.cn.md)
|
||||
* [使用 MVP 架构和 Web Components(Omi) 开发贪吃蛇](https://github.com/Tencent/omi/blob/v6/tutorial/omi-web-components-snake-game-mvp.cn.md)
|
||||
* [Web Components 规范](https://github.com/w3c/webcomponents)
|
||||
* [Comi 原理揭秘](https://github.com/Tencent/omi/blob/master/tutorial/comi-principle.md)
|
||||
* [Omip 编译 H5 原理揭秘](https://github.com/Tencent/omi/blob/master/tutorial/omip-h5.md)
|
||||
* [Comi 原理揭秘](https://github.com/Tencent/omi/blob/v6/tutorial/comi-principle.md)
|
||||
* [Omip 编译 H5 原理揭秘](https://github.com/Tencent/omi/blob/v6/tutorial/omip-h5.md)
|
||||
* [如何通过小程序实现跨平台开发](https://developers.weixin.qq.com/community/develop/article/doc/00002cda45c930d87a380a74351813)
|
||||
* [你必须收藏 ES6 Spread Operator 技巧](https://github.com/Tencent/omi/blob/master/tutorial/spread-operator.cn.md)
|
||||
* [Omi snap 骨架屏与快照](https://github.com/Tencent/omi/blob/master/tutorial/omi-snap.cn.md)
|
||||
* [Omio 兼容 IE8 踩坑之路](https://github.com/Tencent/omi/blob/master/tutorial/omio.cn.md)
|
||||
* [Omi 生态发布](https://github.com/Tencent/omi/blob/master/tutorial/ecosystem.cn.md)
|
||||
* [深入浅出 Shadow Dom](https://github.com/Tencent/omi/blob/master/tutorial/shadow-dom-in-depth.cn.md)
|
||||
* [HTM - JSX 的替代品？还是另一种选择？](https://github.com/Tencent/omi/blob/master/tutorial/omi-html.cn.md)
|
||||
* [MVVM 王者归来](https://github.com/Tencent/omi/blob/master/tutorial/omi-mvvm.cn.md)
|
||||
* [60FPS Animation In Omi](https://github.com/Tencent/omi/blob/master/tutorial/omi-transform.cn.md)
|
||||
* [Render Web Components To Native](https://github.com/Tencent/omi/blob/master/tutorial/render-web-components-to-native.cn.md)
|
||||
* [你必须收藏 ES6 Spread Operator 技巧](https://github.com/Tencent/omi/blob/v6/tutorial/spread-operator.cn.md)
|
||||
* [Omi snap 骨架屏与快照](https://github.com/Tencent/omi/blob/v6/tutorial/omi-snap.cn.md)
|
||||
* [Omio 兼容 IE8 踩坑之路](https://github.com/Tencent/omi/blob/v6/tutorial/omio.cn.md)
|
||||
* [Omi 生态发布](https://github.com/Tencent/omi/blob/v6/tutorial/ecosystem.cn.md)
|
||||
* [深入浅出 Shadow Dom](https://github.com/Tencent/omi/blob/v6/tutorial/shadow-dom-in-depth.cn.md)
|
||||
* [HTM - JSX 的替代品？还是另一种选择？](https://github.com/Tencent/omi/blob/v6/tutorial/omi-html.cn.md)
|
||||
* [MVVM 王者归来](https://github.com/Tencent/omi/blob/v6/tutorial/omi-mvvm.cn.md)
|
||||
* [60FPS Animation In Omi](https://github.com/Tencent/omi/blob/v6/tutorial/omi-transform.cn.md)
|
||||
* [Render Web Components To Native](https://github.com/Tencent/omi/blob/v6/tutorial/render-web-components-to-native.cn.md)
|
||||
* [Web Components MDN](https://developer.mozilla.org/zh-CN/docs/Web/Web_Components)
|
||||
* [Web Components Google](https://developers.google.com/web/fundamentals/web-components/)
|
||||
* [Web Components Org](https://www.webcomponents.org/introduction)
|
||||
|
|
@ -237,7 +428,7 @@ export default class oButton extends WeElement<ButtonProps> {
|
|||
* [Platform HTML5](https://platform.html5.org/)
|
||||
* [使用 requestIdleCallback](https://div.io/topic/1370)
|
||||
* [A requestIdleCallback polyfill](https://gist.github.com/paullewis/55efe5d6f05434a96c36)
|
||||
* [Web Components 的力量](https://github.com/Tencent/omi/blob/master/tutorial/the-power-of-web-components.cn.md)
|
||||
* [Web Components 的力量](https://github.com/Tencent/omi/blob/v6/tutorial/the-power-of-web-components.cn.md)
|
||||
* [ShadowRoot](https://developer.mozilla.org/zh-CN/docs/Web/API/ShadowRoot)
|
||||
* [Developer Tools support for Web Components in Firefox 63](https://blog.nightly.mozilla.org/2018/09/06/developer-tools-support-for-web-components-in-firefox-63/)
|
||||
* [Web Components中引入外部CSS的3种方法](https://www.zhangxinxu.com/wordpress/2021/02/web-components-import-css/)
|
||||
|
|
@ -245,22 +436,146 @@ export default class oButton extends WeElement<ButtonProps> {
|
|||
|
||||
# 目录
|
||||
|
||||
- [Omi 生态](#omi-生态)
|
||||
- [必须收藏的资源](#必须收藏的资源)
|
||||
- [快速入门](#快速入门)
|
||||
- [项目模板](#项目模板)
|
||||
- [Hello Element](#hello-element)
|
||||
- [生命周期](#生命周期)
|
||||
- [浏览器兼容](#浏览器兼容)
|
||||
- [相关链接](#相关链接)
|
||||
- [贡献者们](#贡献者们)
|
||||
- [维护者](#维护者)
|
||||
- [感谢](#感谢)
|
||||
- [License](#license)
|
||||
- [目录](#目录)
|
||||
- [一个 HTML 完全上手](#一个-html-完全上手)
|
||||
- [快速入门](#快速入门)
|
||||
- [安装](#安装)
|
||||
- [Scripts](#scripts)
|
||||
- [切换 omi, omio 和 reomi](#切换-omi-omio-和-reomi)
|
||||
- [浏览器兼容](#浏览器兼容)
|
||||
- [贡献](#贡献)
|
||||
- [贡献者们](#贡献者们)
|
||||
- [核心维护者](#核心维护者)
|
||||
- [感谢](#感谢)
|
||||
- [License](#license)
|
||||
|
||||
## 一个 HTML 完全上手
|
||||
|
||||
下面这个页面不需要任何构建工具就可以执行
|
||||
|
||||
- [→ Online Demo!](https://codepen.io/omijs/pen/PMZWNb)
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Omi demo without transpiler</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script src="https://unpkg.com/omi"></script>
|
||||
<script>
|
||||
const { define, render, h } = Omi
|
||||
|
||||
class Store {
|
||||
data = {
|
||||
count: 1
|
||||
}
|
||||
sub = () => {
|
||||
this.data.count--
|
||||
}
|
||||
add = () => {
|
||||
this.data.count++
|
||||
}
|
||||
}
|
||||
|
||||
define('my-counter', _ => (
|
||||
h(h.f, null,
|
||||
h('button', {
|
||||
onClick: _.store.sub
|
||||
}, '-'),
|
||||
h('span', null, _.store.data.count),
|
||||
h('button', {
|
||||
onClick: _.store.add
|
||||
}, '+')
|
||||
)
|
||||
), {
|
||||
use: ['count'],
|
||||
//or using useSelf, useSelf will update self only, exclude children components
|
||||
//useSelf: ['count'],
|
||||
css: `span { color: red; }`,
|
||||
installed() {
|
||||
console.log('installed')
|
||||
}
|
||||
})
|
||||
|
||||
render(h('my-counter'), 'body', new Store)
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
通过上面脚本的执行，你已经定义好了一个自定义标签，可以不使用 render 方法，直接使用 `<my-counter></my-counter>` 标签：
|
||||
|
||||
```jsx
|
||||
<body>
|
||||
<my-counter></my-counter>
|
||||
</body>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 快速入门
|
||||
|
||||
### 安装
|
||||
|
||||
```bash
|
||||
$ npm i omi-cli -g # install cli
|
||||
$ omi init my-app # 初始化项目，也可以在空目录里执行 'omi init'
|
||||
$ cd my-app # 如果在空目录里执行 'omi init' 忽略这条命令
|
||||
$ npm start # 开发
|
||||
$ npm run build # 编译发布
|
||||
```
|
||||
|
||||
> `npx omi-cli init my-app` 也支持(要求 npm v5.2.0+)
|
||||
|
||||
目录说明:
|
||||
|
||||
```
|
||||
├─ config
|
||||
├─ public
|
||||
├─ scripts
|
||||
├─ src
|
||||
│ ├─ assets
|
||||
│ ├─ elements //存放所有 custom elements
|
||||
│ ├─ store //存放所有页面的 store
|
||||
│ ├─ admin.js //入口文件，会 build 成 admin.html
|
||||
│ └─ index.js //入口文件，会 build 成 index.html
|
||||
```
|
||||
|
||||
#### Scripts
|
||||
|
||||
```json
|
||||
"scripts": {
|
||||
"start": "node scripts/start.js",
|
||||
"build": "PUBLIC_URL=. node scripts/build.js",
|
||||
"build-windows": "set PUBLIC_URL=.&& node scripts/build.js",
|
||||
"fix": "eslint src --fix"
|
||||
}
|
||||
```
|
||||
|
||||
你也可以设置 PUBLIC_URL, 比如：
|
||||
|
||||
```json
|
||||
...
|
||||
"build": "PUBLIC_URL=https://fe.wxpay.oa.com/dv node scripts/build.js",
|
||||
"build-windows": "set PUBLIC_URL=https://fe.wxpay.oa.com/dv&& node scripts/build.js",
|
||||
...
|
||||
```
|
||||
|
||||
#### 切换 omi, omio 和 reomi
|
||||
|
||||
增加或删除 package.json 里的 alias config 可以切换 omi 和 omio 渲染:
|
||||
|
||||
```js
|
||||
"alias": {
|
||||
"omi": "omio"
|
||||
}
|
||||
```
|
||||
|
||||
<!-- 关于编译网站的 url 前缀的设置，可以参考两个地址：
|
||||
|
||||
* [build problem](https://stackoverflow.com/questions/42686149/create-react-app-build-with-public-url)
|
||||
|
|
@ -299,7 +614,14 @@ export default class oButton extends WeElement<ButtonProps> {
|
|||
| **Template Type**| **Command**| **Describe**|
|
||||
| ------------ | -----------| ----------------- |
|
||||
|基础模板(v3.3.0+)|`omi init my-app`| 基础模板，支持 omi 和 omio(IE8+)|
|
||||
|小程序模板(v3.3.5+)|`omi init-p my-app`| Omi 开发小程序 |
|
||||
|基础模板(v3.3.9+)|`omi init-o my-app`| 支持 IE8 的基础模板，只是 build 的时候支持 IE8，开发调试请用 IE9|
|
||||
|Kbone Template|`omi init-kbone my-app` | 使用 omi 开发小程序或者 Web|
|
||||
|支持预渲染快照骨架的模板|`omi init-snap my-app`| 基础模板，支持 omi 和 omio(IE8+)，内置预渲染|
|
||||
|TypeScript Template(omi-cli v3.3.0+)|`omi init-ts my-app`|使用 TypeScript 的模板|
|
||||
|Mobile Template|`omi init-weui my-app`| 使用了 weui 和 omi-router 的移动 web app 模板|
|
||||
|
||||
|
||||
|
||||
### Hello Element
|
||||
|
||||
|
|
@ -566,7 +888,7 @@ define('todo-app', class extends WeElement {
|
|||
render(<todo-app></todo-app>, 'body', store)
|
||||
```
|
||||
|
||||
[→ Store 完整的代码](https://github.com/Tencent/omi/blob/master/packages/omi/examples/store/main.js)
|
||||
[→ Store 完整的代码](https://github.com/Tencent/omi/blob/v6/packages/omi/examples/store/main.js)
|
||||
|
||||
总结一下:
|
||||
|
||||
|
|
@ -579,7 +901,7 @@ render(<todo-app></todo-app>, 'body', store)
|
|||
|
||||
如果不想使用 store 的 data 体系，也可以使用发布订阅模式。比如在 Omi 中使用 [mitt](https://github.com/developit/mitt) 跨组件通讯:
|
||||
|
||||
* [cross-component-communication](https://github.com/Tencent/omi/blob/master/packages/omi-30-seconds/README.md#cross-component-communication) -->
|
||||
* [cross-component-communication](https://github.com/Tencent/omi/blob/v6/packages/omi-30-seconds/README.md#cross-component-communication) -->
|
||||
|
||||
<!--
|
||||
如果你想要兼容 IE11,请使用 `omi-mobx` 代替 omi 自带的 observe，往下看..
|
||||
|
|
@ -623,6 +945,14 @@ class MyApp extends WeElement {
|
|||
| `beforeRender` | `render()` 之前 |
|
||||
| `receiveProps` | 父组件更新时候触发, 返回 false 可以阻止更新 |
|
||||
|
||||
## 调试工具
|
||||
|
||||
使用 [Omi 开发工具](https://chrome.google.com/webstore/detail/omijs-devtools/pjgglfliglbhpcpalbpeloghnbceocmd) 可以非常简单地调试和管理你的 UI。不需要任何配置，你只要安装然后就能调试。
|
||||
|
||||
既然 Omi 使用了 Web Components 和 Shadow-DOM, 所以不需要像 React 一样安装其他元素面板，只需要使用 Chrome 自带的 **Elements' sidebar** 便可，它和 React 开发者工具一样强大。
|
||||
|
||||
|
||||
|
||||
### 查看所有注册的元素
|
||||
|
||||
```js
|
||||
|
|
@ -643,7 +973,7 @@ console.log(Omi.elements)
|
|||
|
||||
## 浏览器兼容
|
||||
|
||||
> [Omio](https://github.com/Tencent/omi/tree/master/packages/omio) - 兼容老浏览器的 Omi 版本(支持到 IE8+)
|
||||
> [Omio](https://github.com/Tencent/omi/tree/v6/packages/omio) - 兼容老浏览器的 Omi 版本(支持到 IE8+)
|
||||
|
||||
Omi works in the latest two versions of all major browsers: Safari 10+, IE 11+, and the evergreen Chrome, Firefox, and Edge.
|
||||
|
||||
|
|
@ -677,26 +1007,39 @@ npm run test
|
|||
|
||||
## 贡献者们
|
||||
|
||||
<a href="https://github.com/Tencent/omi/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=Tencent/omi" />
|
||||
</a>
|
||||
<table><tbody>
|
||||
<tr><td><a target="_blank" href="https://github.com/dntzhang"><img width="60px" src="https://avatars2.githubusercontent.com/u/7917954?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/LeeHyungGeun"><img width="60px" src="https://avatars2.githubusercontent.com/u/2471651?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/xcatliu"><img width="60px" src="https://avatars1.githubusercontent.com/u/5453359?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/1921622004"><img width="60px" src="https://avatars1.githubusercontent.com/u/19359217?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/yanceyou"><img width="60px" src="https://avatars2.githubusercontent.com/u/16320418?s=60&v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/f"><img width="60px" src="https://avatars0.githubusercontent.com/u/196477?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/pasturn"><img width="60px" src="https://avatars0.githubusercontent.com/u/6126885?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/Wscats"><img width="60px" src="https://avatars3.githubusercontent.com/u/17243165?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/akira-cn"><img width="60px" src="https://avatars0.githubusercontent.com/u/316498?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/ZainChen"><img width="60px" src="https://avatars3.githubusercontent.com/u/15615524?s=60&v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/dangxuandev"><img width="60px" src="https://avatars1.githubusercontent.com/u/5436704?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/daizhan"><img width="60px" src="https://avatars0.githubusercontent.com/u/5318547?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/132yse"><img width="60px" src="https://avatars1.githubusercontent.com/u/12951461?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/elfman"><img width="60px" src="https://avatars3.githubusercontent.com/u/948001?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/NoBey"><img width="60px" src="https://avatars3.githubusercontent.com/u/10740524?s=60&v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/hilkbahar"><img width="60px" src="https://avatars2.githubusercontent.com/u/12161006?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/eyea"><img width="60px" src="https://avatars0.githubusercontent.com/u/17020223?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/guisturdy"><img width="60px" src="https://avatars1.githubusercontent.com/u/7098619?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/KidneyFlower"><img width="60px" src="https://avatars1.githubusercontent.com/u/16027183?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/zhangsanshi"><img width="60px" src="https://avatars1.githubusercontent.com/u/3771933?s=60&v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/xland"><img width="60px" src="https://avatars0.githubusercontent.com/u/2980915?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/winstonxie"><img width="60px" src="https://avatars3.githubusercontent.com/u/16422642?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/ghostzhang"><img width="60px" src="https://avatars3.githubusercontent.com/u/194242?s=60&v=4"></a></td>
|
||||
<td><a target="_blank" href="https://github.com/jayZOU"><img width="60px" src="https://avatars3.githubusercontent.com/u/8576977?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/zhengbao"><img width="60px" src="https://avatars3.githubusercontent.com/u/1736166?s=60&v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/vorshen"><img width="60px" src="https://avatars3.githubusercontent.com/u/10334783?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/akira-cn"><img width="60px" src="https://avatars3.githubusercontent.com/u/316498?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/loo41"><img width="60px" src="https://avatars3.githubusercontent.com/u/28095677?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/rainmanhhh"><img width="60px" src="https://avatars3.githubusercontent.com/u/13862623?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/nbompetsis"><img width="60px" src="https://avatars3.githubusercontent.com/u/11991105?s=60&v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/CodeFalling"><img width="60px" src="https://avatars1.githubusercontent.com/u/5436704?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/daizhan"><img width="60px" src="https://avatars0.githubusercontent.com/u/5318547?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/ritschwumm"><img width="60px" src="https://avatars2.githubusercontent.com/u/547138?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/kahwee"><img width="60px" src="https://avatars3.githubusercontent.com/u/262105?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/alanyinjs"><img width="60px" src="https://avatars3.githubusercontent.com/u/25688258?s=60&v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/electerious"><img width="60px" src="https://avatars2.githubusercontent.com/u/499088?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/nanhupatar"><img width="60px" src="https://avatars1.githubusercontent.com/u/27266016?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/ilker0"><img width="60px" src="https://avatars1.githubusercontent.com/u/23511412?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/MrGrabazu"><img width="60px" src="https://avatars2.githubusercontent.com/u/6928672?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/Tagir-A"><img width="60px" src="https://avatars2.githubusercontent.com/u/23556586?s=60&v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/mahmut-gundogdu"><img width="60px" src="https://avatars2.githubusercontent.com/u/2217899?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/howel52"><img width="60px" src="https://avatars3.githubusercontent.com/u/9854818?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/yolio2003"><img width="60px" src="https://avatars1.githubusercontent.com/u/352931?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/loo41"><img width="60px" src="https://avatars3.githubusercontent.com/u/28095677?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/nbompetsis"><img width="60px" src="https://avatars1.githubusercontent.com/u/11991105?s=60&v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/WozHuang"><img width="60px" src="https://avatars2.githubusercontent.com/u/22727100?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/web-padawan"><img width="60px" src="https://avatars2.githubusercontent.com/u/10589913?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/SuperHuangXu"><img width="60px" src="https://avatars1.githubusercontent.com/u/14816052?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/LastHeaven"><img width="60px" src="https://avatars1.githubusercontent.com/u/10590077?s=60&v=4"></a></td>
|
||||
<td><a target="_blank" href="https://github.com/validalias"><img width="60px" src="https://avatars3.githubusercontent.com/u/44221844?s=60&v=4"></a></td></tr><tr>
|
||||
<td><a target="_blank" href="https://github.com/FAKER-A"><img width="60px" src="https://avatars2.githubusercontent.com/u/25676164?s=60&v=4"></a></td>
|
||||
<td><a target="_blank" href="https://github.com/liulinboyi"><img width="60px" src="https://avatars2.githubusercontent.com/u/41336612?s=60&v=4"></a></td>
|
||||
<td><a target="_blank" href="https://github.com/hulei"><img width="60px" src="https://avatars2.githubusercontent.com/u/6905072?s=60&v=4"></a></td> <td><a target="_blank" href="https://github.com/mtonhuang"><img width="60px" src="https://avatars2.githubusercontent.com/u/30364922?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/Juliiii"><img width="60px" src="https://avatars2.githubusercontent.com/u/23744602?s=60&v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/mingkang1993"><img width="60px" src="https://avatars2.githubusercontent.com/u/9126292?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/liufushihai"><img width="60px" src="https://avatars2.githubusercontent.com/u/28208916?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/supermp"><img width="60px" src="https://avatars2.githubusercontent.com/u/892475?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/LeachZhou"><img width="60px" src="https://avatars2.githubusercontent.com/u/18715564?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/yiliang114"><img width="60px" src="https://avatars2.githubusercontent.com/u/11473889?s=60&v=4"></a></td></tr>
|
||||
<tr><td><a target="_blank" href="https://github.com/liubailing"><img width="60px" src="https://avatars2.githubusercontent.com/u/3907493?s=60&v=4"></a></td>
|
||||
<td><a target="_blank" href="https://github.com/fyuan1992"><img width="60px" src="https://avatars2.githubusercontent.com/u/19830858?s=60&v=4"></a></td>
|
||||
<td><a target="_blank" href="https://github.com/xinshangshangxin"><img width="60px" src="https://avatars2.githubusercontent.com/u/8779091?s=60&v=4"></a></td>
|
||||
<td><a target="_blank" href="https://github.com/aolu11"><img width="60px" src="https://avatars2.githubusercontent.com/u/1127488?s=60&v=4"></a></td>
|
||||
</tr></tbody></table>
|
||||
|
||||
感谢所有贡献者，欢迎更多人加入一起贡献。
|
||||
|
||||
## 核心维护者
|
||||
|
||||
- [@dntzhang](https://github.com/dntzhang)
|
||||
- [@Wscats](https://github.com/Wscats)
|
||||
- [@LeeHyungGeun](https://github.com/LeeHyungGeun)
|
||||
- [@xcatliu](https://github.com/xcatliu)
|
||||
- [AlloyTeam](http://alloyteam.com/)
|
||||
- [@Wscats](https://github.com/Wscats)
|
||||
- [@f](https://github.com/f)
|
||||
- [@LeeHyungGeun](https://github.com/LeeHyungGeun)
|
||||
- [@dntzhang](https://github.com/dntzhang)
|
||||
- [@xcatliu](https://github.com/xcatliu)
|
||||
|
||||
任何 Omi 相关问题欢迎联系我们。也可以[加入 Omi QQ 群](https://github.com/Tencent/omi/issues/169)进行讨论交流。
|
||||
|
||||
## 感谢
|
||||
|
||||
* [preact](https://github.com/developit/preact)
|
||||
* [obaa](https://github.com/Tencent/omi/tree/v6/packages/obaa)
|
||||
* [create-react-app](https://github.com/facebook/create-react-app)
|
||||
* [JSX](https://github.com/facebook/jsx)
|
||||
* [JSONPatcherProxy](https://github.com/Palindrom/JSONPatcherProxy)
|
||||
|
||||
## License
|
||||
|
||||
|
|
|
|||
498
README.md
498
README.md
|
|
@ -3,13 +3,7 @@ English | [简体中文](./README.CN.md)
|
|||
<p align="center"><img src="https://tencent.github.io/omi/assets/logo.svg" alt="omi" width="100"/></p>
|
||||
<h2 align="center">Omi - Front End Cross-Frameworks Framework</h2>
|
||||
|
||||
> Omiu - Cross-Frameworks and [Cross-Themes](https://omi.cdn-go.cn/admin/latest/index.html#/docs/theme) UI Components powered by Omi
|
||||
|
||||
* [💯Omi Admin by Omiu](https://tencent.github.io/omi/packages/admin/dist/index.html)
|
||||
* [💯国内加速访问 Omi Admin](https://omi.cdn-go.cn/admin/latest/index.html)
|
||||
|
||||
|
||||
Define cross-frameworks button element with typescript:
|
||||
## With TypeScript
|
||||
|
||||
```ts
|
||||
import { tag, WeElement, h, extractClass } from 'omi'
|
||||
|
|
@ -78,33 +72,194 @@ export default class Button extends WeElement<Props>{
|
|||
}
|
||||
```
|
||||
|
||||
## Omiu
|
||||
|
||||
### New Project by Omi
|
||||
> Cross-Frameworks and [Cross-Themes](https://tencent.github.io/omi/components/docs/#/theme?index=0&subIndex=1) UI Components powered by Omi
|
||||
|
||||
```bash
|
||||
$ npm i omi-cli -g # install cli
|
||||
$ omi init my-app # init project
|
||||
$ cd my-app
|
||||
$ npm start # develop
|
||||
$ npm run build # release
|
||||
```
|
||||
| **Name** | **Status** | **Example** | **Docs** |
|
||||
| -------------- | ----------|----------- | ----------------|
|
||||
| [@omiu/button][omiu-button-github] | [![omiu-button-status]][omiu-button-package]|[CodePen][omiu-button-codepen] | [Button Docs][omiu-button-docs]|
|
||||
| [@omiu/icon][omiu-icon-github] | [![omiu-icon-status]][omiu-icon-package]|[Icon Online][omiu-icon-codepen] | [Icon Docs][omiu-icon-docs]|
|
||||
| [@omiu/tabs][omiu-tabs-github] | [![omiu-tabs-status]][omiu-tabs-package]|[CodePen][omiu-tabs-codepen] | [Tabs Docs][omiu-tabs-docs]|
|
||||
| [@omiu/radio][omiu-radio-github] | [![omiu-radio-status]][omiu-radio-package]|[CodePen][omiu-radio-codepen] | [Radio Docs][omiu-radio-docs]|
|
||||
| [@omiu/link][omiu-link-github] | [![omiu-link-status]][omiu-link-package]|[CodePen][omiu-link-codepen] | [Link Docs][omiu-link-docs]|
|
||||
| [@omiu/checkbox][omiu-checkbox-github] | [![omiu-checkbox-status]][omiu-checkbox-package]|[CodePen][omiu-checkbox-codepen] | [Checkbox Docs][omiu-checkbox-docs]|
|
||||
| [@omiu/hamburger-menu][omiu-hamburger-menu-github] | [![omiu-hamburger-menu-status]][omiu-hamburger-menu-package]|[CodePen][omiu-hamburger-menu-codepen] | [HamburgerMenu Docs][omiu-hamburger-menu-docs]|
|
||||
| [@omiu/input][omiu-input-github] | [![omiu-input-status]][omiu-input-package]|[CodePen][omiu-input-codepen] | [Input Docs][omiu-input-docs]|
|
||||
| [@omiu/tree][omiu-tree-github] | [![omiu-tree-status]][omiu-tree-package]|[CodePen][omiu-tree-codepen] | [Tree Docs][omiu-tree-docs]|
|
||||
| [@omiu/pagination][omiu-pagination-github] | [![omiu-pagination-status]][omiu-pagination-package]|[CodePen][omiu-pagination-codepen] | [Pagination Docs][omiu-pagination-docs]|
|
||||
| [@omiu/loading][omiu-loading-github] | [![omiu-loading-status]][omiu-loading-package]|[CodePen][omiu-loading-codepen] | [Loading Docs][omiu-loading-docs]|
|
||||
| [@omiu/toast][omiu-toast-github] | [![omiu-toast-status]][omiu-toast-package]|[CodePen][omiu-toast-codepen] | [Toast Docs][omiu-toast-docs]|
|
||||
| [@omiu/action-sheet][omiu-action-sheet-github] | [![omiu-action-sheet-status]][omiu-action-sheet-package]|[CodePen][omiu-action-sheet-codepen] | [ActionSheet Docs][omiu-action-sheet-docs]|
|
||||
| [@omiu/switch][omiu-switch-github] | [![omiu-switch-status]][omiu-switch-package]|[CodePen][omiu-switch-codepen] | [Switch Docs][omiu-switch-docs]|
|
||||
| [@omiu/color-picker][omiu-color-picker-github] | [![omiu-color-picker-status]][omiu-color-picker-package]|[CodePen][omiu-color-picker-codepen] | [ColorPicker Docs][omiu-color-picker-docs]|
|
||||
| [@omiu/chart][omiu-chart-github] | [![omiu-chart-status]][omiu-chart-package]|[CodePen][omiu-chart-codepen] | [Chart Docs][omiu-chart-docs]|
|
||||
| [@omiu/toggle-icon][omiu-toggle-icon-github] | [![omiu-toggle-icon-status]][omiu-toggle-icon-package]|[CodePen][omiu-toggle-icon-codepen] | [ToggleIcon Docs][omiu-toggle-icon-docs]|
|
||||
| [@omiu/o-icon][omiu-o-icon-github] | [![omiu-o-icon-status]][omiu-o-icon-package]|[CodePen][omiu-o-icon-codepen] | [OIcon Docs][omiu-o-icon-docs]|
|
||||
| [@omiu/badge][omiu-badge-github] | [![omiu-badge-status]][omiu-badge-package]|[CodePen][omiu-badge-codepen] | [Badge Docs][omiu-badge-docs]|
|
||||
| [@omiu/avatar][omiu-avatar-github] | [![omiu-avatar-status]][omiu-avatar-package]|[CodePen][omiu-avatar-codepen] | [Avatar Docs][omiu-avatar-docs]|
|
||||
| [@omiu/breadcrumb][omiu-breadcrumb-github] | [![omiu-breadcrumb-status]][omiu-breadcrumb-package]|[CodePen][omiu-breadcrumb-codepen] | [Breadcrumb Docs][omiu-breadcrumb-docs]|
|
||||
| [@omiu/bottom-nav][omiu-bottom-nav-github] | [![omiu-bottom-nav-status]][omiu-bottom-nav-package]|[CodePen][omiu-bottom-nav-codepen] | [BottomNav Docs][omiu-bottom-nav-docs]|
|
||||
| [@omiu/transition][omiu-transition-github] | [![omiu-transition-status]][omiu-transition-package]|[CodePen][omiu-transition-codepen] | [Transition Docs][omiu-transition-docs]|
|
||||
| [@omiu/dialog][omiu-dialog-github] | [![omiu-dialog-status]][omiu-dialog-package]|[CodePen][omiu-dialog-codepen] | [Dialog Docs][omiu-dialog-docs]|
|
||||
| [@omiu/dialog-extention][omiu-dialog-extention-github] | [![omiu-dialog-extention-status]][omiu-dialog-extention-package]|[CodePen][omiu-dialog-extention-codepen] | [DialogExtention Docs][omiu-dialog-extention-docs]|
|
||||
| Coming... | | | |
|
||||
| Coming... | | | |
|
||||
|
||||
> `npx omi-cli init my-app` is also supported(npm v5.2.0+).
|
||||
[omiu-button-github]: https://github.com/Tencent/omi/tree/v6/components/button
|
||||
[omiu-button-status]: https://img.shields.io/npm/v/@omiu/button.svg
|
||||
[omiu-button-package]: https://www.npmjs.com/package/@omiu/button
|
||||
[omiu-button-docs]: https://tencent.github.io/omi/components/docs/index.html#/button
|
||||
[omiu-button-codepen]: https://codepen.io/omijs/pen/LYppwYG
|
||||
|
||||
[omiu-icon-github]: https://github.com/Tencent/omi/tree/v6/components/icon
|
||||
[omiu-icon-status]: https://img.shields.io/npm/v/@omiu/icon.svg
|
||||
[omiu-icon-package]: https://www.npmjs.com/package/@omiu/icon
|
||||
[omiu-icon-docs]: https://tencent.github.io/omi/components/docs/index.html#/icon
|
||||
[omiu-icon-codepen]: https://tencent.github.io/omi/components/icon/demos/icon.html
|
||||
|
||||
[omiu-tabs-github]: https://github.com/Tencent/omi/tree/v6/components/tabs
|
||||
[omiu-tabs-status]: https://img.shields.io/npm/v/@omiu/tabs.svg
|
||||
[omiu-tabs-package]: https://www.npmjs.com/package/@omiu/tabs
|
||||
[omiu-tabs-docs]: https://tencent.github.io/omi/components/docs/index.html#/tabs
|
||||
[omiu-tabs-codepen]: https://codepen.io/omijs/pen/XWmjyXK
|
||||
|
||||
|
||||
### New Component by Omi
|
||||
|
||||
```bash
|
||||
$ npm i omi-cli -g # install cli
|
||||
$ omi init-component my-component # init project
|
||||
$ cd my-app
|
||||
$ npm start # develop
|
||||
$ npm run build # release
|
||||
```
|
||||
|
||||
> `npx omi-cli init-component my-component` is also supported(npm v5.2.0+).
|
||||
[omiu-radio-github]: https://github.com/Tencent/omi/tree/v6/components/radio
|
||||
[omiu-radio-status]: https://img.shields.io/npm/v/@omiu/radio.svg
|
||||
[omiu-radio-package]: https://www.npmjs.com/package/@omiu/radio
|
||||
[omiu-radio-docs]: https://tencent.github.io/omi/components/docs/index.html#/radio
|
||||
[omiu-radio-codepen]: https://codepen.io/omijs/pen/GRpjapr
|
||||
|
||||
|
||||
[omiu-link-github]: https://github.com/Tencent/omi/tree/v6/components/link
|
||||
[omiu-link-status]: https://img.shields.io/npm/v/@omiu/link.svg
|
||||
[omiu-link-package]: https://www.npmjs.com/package/@omiu/link
|
||||
[omiu-link-docs]: https://tencent.github.io/omi/components/docs/index.html#/link
|
||||
[omiu-link-codepen]: https://codepen.io/omijs/pen/KKdNBaO
|
||||
|
||||
|
||||
[omiu-hamburger-menu-github]: https://github.com/Tencent/omi/tree/v6/components/hamburger-menu
|
||||
[omiu-hamburger-menu-status]: https://img.shields.io/npm/v/@omiu/hamburger-menu.svg
|
||||
[omiu-hamburger-menu-package]: https://www.npmjs.com/package/@omiu/hamburger-menu
|
||||
[omiu-hamburger-menu-docs]: https://tencent.github.io/omi/components/docs/index.html#/hamburger-menu
|
||||
[omiu-hamburger-menu-codepen]: https://codepen.io/omijs/pen/MWapaJd
|
||||
|
||||
|
||||
[omiu-input-github]: https://github.com/Tencent/omi/tree/v6/components/input
|
||||
[omiu-input-status]: https://img.shields.io/npm/v/@omiu/input.svg
|
||||
[omiu-input-package]: https://www.npmjs.com/package/@omiu/input
|
||||
[omiu-input-docs]: https://tencent.github.io/omi/components/docs/index.html#/input
|
||||
[omiu-input-codepen]: https://codepen.io/omijs/pen/yLYMGqa
|
||||
|
||||
[omiu-checkbox-github]: https://github.com/Tencent/omi/tree/v6/components/checkbox
|
||||
[omiu-checkbox-status]: https://img.shields.io/npm/v/@omiu/checkbox.svg
|
||||
[omiu-checkbox-package]: https://www.npmjs.com/package/@omiu/checkbox
|
||||
[omiu-checkbox-docs]: https://tencent.github.io/omi/components/docs/index.html#/checkbox
|
||||
[omiu-checkbox-codepen]: https://codepen.io/omijs/pen/MWapwNZ
|
||||
|
||||
[omiu-switch-github]: https://github.com/Tencent/omi/tree/v6/components/switch
|
||||
[omiu-switch-status]: https://img.shields.io/npm/v/@omiu/switch.svg
|
||||
[omiu-switch-package]: https://www.npmjs.com/package/@omiu/switch
|
||||
[omiu-switch-docs]: https://tencent.github.io/omi/components/docs/index.html#/switch
|
||||
[omiu-switch-codepen]: https://codepen.io/omijs/pen/BaoRpLd
|
||||
|
||||
[omiu-tree-github]: https://github.com/Tencent/omi/tree/v6/components/tree
|
||||
[omiu-tree-status]: https://img.shields.io/npm/v/@omiu/tree.svg
|
||||
[omiu-tree-package]: https://www.npmjs.com/package/@omiu/tree
|
||||
[omiu-tree-docs]: https://tencent.github.io/omi/components/docs/index.html#/tree
|
||||
[omiu-tree-codepen]: https://codepen.io/omijs/pen/yLYMrdg
|
||||
|
||||
[omiu-pagination-github]: https://github.com/Tencent/omi/tree/v6/components/pagination
|
||||
[omiu-pagination-status]: https://img.shields.io/npm/v/@omiu/pagination.svg
|
||||
[omiu-pagination-package]: https://www.npmjs.com/package/@omiu/pagination
|
||||
[omiu-pagination-docs]: https://tencent.github.io/omi/components/docs/index.html#/pagination
|
||||
[omiu-pagination-codepen]: https://codepen.io/omijs/pen/MWamyBQ
|
||||
|
||||
[omiu-loading-github]: https://github.com/Tencent/omi/tree/v6/components/loading
|
||||
[omiu-loading-status]: https://img.shields.io/npm/v/@omiu/loading.svg
|
||||
[omiu-loading-package]: https://www.npmjs.com/package/@omiu/loading
|
||||
[omiu-loading-docs]: https://tencent.github.io/omi/components/docs/index.html#/loading
|
||||
[omiu-loading-codepen]: https://codepen.io/omijs/pen/oNjZRwO
|
||||
|
||||
[omiu-toast-github]: https://github.com/Tencent/omi/tree/v6/components/toast
|
||||
[omiu-toast-status]: https://img.shields.io/npm/v/@omiu/toast.svg
|
||||
[omiu-toast-package]: https://www.npmjs.com/package/@omiu/toast
|
||||
[omiu-toast-docs]: https://tencent.github.io/omi/components/docs/index.html#/toast
|
||||
[omiu-toast-codepen]: https://codepen.io/omijs/pen/YzyVwOO
|
||||
|
||||
[omiu-action-sheet-github]: https://github.com/Tencent/omi/tree/v6/components/action-sheet
|
||||
[omiu-action-sheet-status]: https://img.shields.io/npm/v/@omiu/action-sheet.svg
|
||||
[omiu-action-sheet-package]: https://www.npmjs.com/package/@omiu/action-sheet
|
||||
[omiu-action-sheet-docs]: https://tencent.github.io/omi/components/docs/index.html#/action-sheet
|
||||
[omiu-action-sheet-codepen]: https://codepen.io/omijs/pen/wvKdoNJ
|
||||
|
||||
[omiu-color-picker-github]: https://github.com/Tencent/omi/tree/v6/components/color-picker
|
||||
[omiu-color-picker-status]: https://img.shields.io/npm/v/@omiu/color-picker.svg
|
||||
[omiu-color-picker-package]: https://www.npmjs.com/package/@omiu/color-picker
|
||||
[omiu-color-picker-docs]: https://tencent.github.io/omi/components/docs/index.html#/color-picker
|
||||
[omiu-color-picker-codepen]: https://codepen.io/omijs/pen/gOaWmZE
|
||||
|
||||
[omiu-chart-github]: https://github.com/Tencent/omi/tree/v6/components/chart
|
||||
[omiu-chart-status]: https://img.shields.io/npm/v/@omiu/chart.svg
|
||||
[omiu-chart-package]: https://www.npmjs.com/package/@omiu/chart
|
||||
[omiu-chart-docs]: https://tencent.github.io/omi/components/docs/index.html#/chart
|
||||
[omiu-chart-codepen]: https://codepen.io/omijs/pen/pojPKLr
|
||||
|
||||
[omiu-toggle-icon-github]: https://github.com/Tencent/omi/tree/v6/components/toggle-icon
|
||||
[omiu-toggle-icon-status]: https://img.shields.io/npm/v/@omiu/toggle-icon.svg
|
||||
[omiu-toggle-icon-package]: https://www.npmjs.com/package/@omiu/toggle-icon
|
||||
[omiu-toggle-icon-docs]: https://tencent.github.io/omi/components/docs/index.html#/toggle-icon
|
||||
[omiu-toggle-icon-codepen]: https://codepen.io/omijs/pen/ZEbKwXX
|
||||
|
||||
[omiu-o-icon-github]: https://github.com/Tencent/omi/tree/v6/components/o-icon
|
||||
[omiu-o-icon-status]: https://img.shields.io/npm/v/@omiu/o-icon.svg
|
||||
[omiu-o-icon-package]: https://www.npmjs.com/package/@omiu/o-icon
|
||||
[omiu-o-icon-docs]: https://tencent.github.io/omi/components/docs/index.html#/o-icon
|
||||
[omiu-o-icon-codepen]: https://codepen.io/omijs/pen/QWjgapY
|
||||
|
||||
[omiu-badge-github]: https://github.com/Tencent/omi/tree/v6/components/badge
|
||||
[omiu-badge-status]: https://img.shields.io/npm/v/@omiu/badge.svg
|
||||
[omiu-badge-package]: https://www.npmjs.com/package/@omiu/badge
|
||||
[omiu-badge-docs]: https://tencent.github.io/omi/components/docs/index.html#/badge
|
||||
[omiu-badge-codepen]: https://codepen.io/omijs/pen/WNQOdaB
|
||||
|
||||
[omiu-avatar-github]: https://github.com/Tencent/omi/tree/v6/components/avatar
|
||||
[omiu-avatar-status]: https://img.shields.io/npm/v/@omiu/avatar.svg
|
||||
[omiu-avatar-package]: https://www.npmjs.com/package/@omiu/avatar
|
||||
[omiu-avatar-docs]: https://tencent.github.io/omi/components/docs/index.html#/avatar
|
||||
[omiu-avatar-codepen]: https://codepen.io/omijs/pen/QWjgaze
|
||||
|
||||
[omiu-breadcrumb-github]: https://github.com/Tencent/omi/tree/v6/components/breadcrumb
|
||||
[omiu-breadcrumb-status]: https://img.shields.io/npm/v/@omiu/breadcrumb.svg
|
||||
[omiu-breadcrumb-package]: https://www.npmjs.com/package/@omiu/breadcrumb
|
||||
[omiu-breadcrumb-docs]: https://tencent.github.io/omi/components/docs/index.html#/breadcrumb
|
||||
[omiu-breadcrumb-codepen]: https://codepen.io/omijs/pen/wvKqGxB
|
||||
|
||||
|
||||
[omiu-bottom-nav-github]: https://github.com/Tencent/omi/tree/v6/components/bottom-nav
|
||||
[omiu-bottom-nav-status]: https://img.shields.io/npm/v/@omiu/bottom-nav.svg
|
||||
[omiu-bottom-nav-package]: https://www.npmjs.com/package/@omiu/bottom-nav
|
||||
[omiu-bottom-nav-docs]: https://tencent.github.io/omi/components/docs/index.html#/bottom-nav
|
||||
[omiu-bottom-nav-codepen]: https://codepen.io/omijs/pen/zYvdjEY
|
||||
|
||||
[omiu-transition-github]: https://github.com/Tencent/omi/tree/v6/components/transition
|
||||
[omiu-transition-status]: https://img.shields.io/npm/v/@omiu/transition.svg
|
||||
[omiu-transition-package]: https://www.npmjs.com/package/@omiu/transition
|
||||
[omiu-transition-docs]: https://tencent.github.io/omi/components/docs/index.html#/transition
|
||||
[omiu-transition-codepen]: https://codepen.io/omijs/pen/JjYyezQ
|
||||
|
||||
[omiu-dialog-github]: https://github.com/Tencent/omi/tree/v6/components/dialog
|
||||
[omiu-dialog-status]: https://img.shields.io/npm/v/@omiu/dialog.svg
|
||||
[omiu-dialog-package]: https://www.npmjs.com/package/@omiu/dialog
|
||||
[omiu-dialog-docs]: https://tencent.github.io/omi/components/docs/index.html#/dialog
|
||||
[omiu-dialog-codepen]: https://codepen.io/omijs/pen/JjYyezQ
|
||||
|
||||
[omiu-dialog-extention-github]: https://github.com/Tencent/omi/tree/v6/components/dialog-extention
|
||||
[omiu-dialog-extention-status]: https://img.shields.io/npm/v/@omiu/dialog-extention.svg
|
||||
[omiu-dialog-extention-package]: https://www.npmjs.com/package/@omiu/dialog-extention
|
||||
[omiu-dialog-extention-docs]: https://tencent.github.io/omi/components/docs/index.html#/dialog-extention
|
||||
[omiu-dialog-extention-codepen]: https://codepen.io/omijs/pen/GRpOBmL
|
||||
|
||||
## Ecosystem of Omi
|
||||
|
||||
|
|
@ -112,27 +267,52 @@ $ npm run build # release
|
|||
|
||||
| **Project** | **Description** |
|
||||
| ------------------------------- | ----------------------------------- |
|
||||
| [omi-docs](https://tencent.github.io/omi/site/docs/index.html) and [codepen](https://codepen.io/collection/DrMYgV/) | Omi official documents |
|
||||
| [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router) |Omi official router in 1KB js|
|
||||
| [omi-cli](https://github.com/Tencent/omi/tree/master/packages/omi-cli)| Project scaffolding. [→ Base Templates](https://github.com/Tencent/omi/tree/master/packages/omi-cli/template)|
|
||||
|[CEE](https://omijs.github.io/cee/out/)| Fork from custom-elements-everywhere |
|
||||
|
||||
| [omi-docs](https://tencent.github.io/omi/site/docs/index.html) and [codepen](https://codepen.io/collection/DrMYgV/) and [webcomponents.dev](https://webcomponents.dev/)| Omi official documents |
|
||||
| [omix](https://github.com/Tencent/omi/tree/v6/packages/omix)| 小程序全局状态管理框架，数据触手可及，状态无处遁形 |
|
||||
| [omim](https://github.com/Tencent/omi/tree/v6/packages/omim)| Cross **frameworks** and **themes** components.([DOCS & REPL](https://tencent.github.io/omi/packages/omim/docs/build/index.html) && [JOIN US!](https://github.com/Tencent/omi/tree/v6/packages/omim#contribution))|
|
||||
| [omi-kbone ](https://github.com/Tencent/omi/tree/v6/packages/omi-kbone)| 使用 omi + [kbone](https://github.com/wechat-miniprogram/kbone) 多端开发(小程序和Web)的贪吃蛇游戏。 |
|
||||
| [omio](https://github.com/Tencent/omi/tree/v6/packages/omio)| Omi for old browsers with same api(IE8+)|
|
||||
| [omis ](https://github.com/Tencent/omi/tree/v6/packages/omis)| Omis + React|
|
||||
| [omi-ssr](https://github.com/Tencent/omi/tree/v6/packages/omi-ssr)| Server-side rendering(support omio only)|
|
||||
| [omi-router](https://github.com/Tencent/omi/tree/v6/packages/omi-router) |Omi official router in 1KB js|
|
||||
| [omi-cli](https://github.com/Tencent/omi/tree/v6/packages/omi-cli)| Project scaffolding. [→ Base Templates](https://github.com/Tencent/omi/tree/v6/packages/omi-cli/template) and [→ Other Templates](https://github.com/omijs) |
|
||||
| [omi-devtools](https://github.com/f/omi-devtools)| Browser DevTools extension |
|
||||
| [omiu](https://tencent.github.io/omi/packages/omiu/examples/build/index.html)| Simple Omi UI |
|
||||
| [omil](https://github.com/Wscats/omil)|Webpack loader for Omi.js components.([DOCS](https://wscats.github.io/omi-docs/public/home/))|
|
||||
| [omi-snippets](https://github.com/Wscats/omi-snippets) |A beautify VSCode extension for .omi or .eno file, [Install now!](https://marketplace.visualstudio.com/items?itemName=Wscats.omi-snippets)|
|
||||
| [obaa](https://github.com/Tencent/omi/tree/v6/packages/obaa) or [JSONPatcherProxy](https://github.com/Palindrom/JSONPatcherProxy) | Observe or Proxy any object's any change |
|
||||
<!-- | [omiv ](https://github.com/Tencent/omi/tree/v6/packages/omiv)| 1kb store system for Vue apps. [SSR Now](https://github.com/Tencent/omi/tree/v6/packages/vue-omiv-ssr-starter) | -->
|
||||
#### :snake:Snake MVP
|
||||
|
||||
| **Project** | **Description** |
|
||||
| ------------------------------- | ----------------------------------- |
|
||||
| [omi-snake ](https://github.com/Tencent/omi/tree/master/packages/omi-snake) & [→ Touch the demo](https://tencent.github.io/omi/packages/omi-snake/dist/index.html)| The Snake-Eating Game Based on MVP Architecture Written by Omi |
|
||||
| [omi-snake ](https://github.com/Tencent/omi/tree/v6/packages/omi-snake) & [→ Touch the demo](https://tencent.github.io/omi/packages/omi-snake/build/index.html)| The Snake-Eating Game Based on MVP Architecture Written by Omi |
|
||||
| [omi-kbone-snake ](https://github.com/Tencent/omi/tree/v6/packages/omi-kbone)| omi-kbone 写的 MVP 架构的跨端贪吃蛇游戏，支持小程序和 H5 |
|
||||
| [Preact-snake](https://github.com/Tencent/omi/tree/v6/packages/preact-css/examples/snake) | The Snake-Eating Game Based on MVP Architecture Written by Preact + [Preact-CSS](https://github.com/Tencent/omi/tree/v6/packages/preact-css) + Omis |
|
||||
| [[P]react-snake](https://github.com/Tencent/omi/tree/v6/packages/react-snake) | The Snake-Eating Game Based on MVP Architecture Written by React/Preact |
|
||||
| [omix-snake](https://github.com/Tencent/omi/tree/v6/packages/omix-snake) | 小程序贪吃蛇 |
|
||||
| [Preact-snake](https://github.com/Tencent/omi/tree/v6/packages/preact-css/examples/snake) & [→ Touch the demo](https://tencent.github.io/omi/packages/preact-css/examples/snake/build/)| The Snake-Eating Game Based on MVP Architecture Written by Preact + [Preact-CSS](https://github.com/Tencent/omi/tree/v6/packages/preact-css) + Omis |
|
||||
| [[P]react-snake](https://github.com/Tencent/omi/tree/v6/packages/react-snake) & [→ Touch the demo](https://tencent.github.io/omi/packages/react-snake/build/index.html)| The Snake-Eating Game Based on MVP Architecture Written by React/Preact |
|
||||
| [omix-snake](https://github.com/Tencent/omi/tree/v6/packages/omix-snake) | The Snake-Eating Game Based on MVP Architecture Written by Omix |
|
||||
<!-- | [vue-snake](https://github.com/Tencent/omi/tree/v6/packages/vue-snake) | The Snake-Eating Game Based on MVP Architecture Written by Vue + Omiv | -->
|
||||
#### :+1:Mini Program(小程序)
|
||||
|
||||
| **Project** | **Description** |
|
||||
| ------------------------------- | ----------------------------------- |
|
||||
| [omix](https://github.com/Tencent/omi/tree/v6/packages/omix)| 小程序全局状态管理框架，数据触手可及，状态无处遁形 |
|
||||
| [react-kbone ](https://github.com/Tencent/omi/tree/v6/packages/react-kbone)| 直接使用 React 开发小程序或 Web，基于 [kbone](https://github.com/wechat-miniprogram/kbone) |
|
||||
| [preact-kbone ](https://github.com/Tencent/omi/tree/v6/packages/preact-kbone)| 直接使用 Preact 开发小程序或 Web，基于 [kbone](https://github.com/wechat-miniprogram/kbone) |
|
||||
| [omi-cloud](https://github.com/Tencent/omi/tree/v6/packages/omi-cloud)| 小程序•云开发|
|
||||
| [omip](https://github.com/Tencent/omi/tree/v6/packages/omip)| 直接使用 Omi 开发小程序或 H5 SPA|
|
||||
| [mps](https://github.com/Tencent/omi/tree/v6/packages/mps)| 原生小程序增强框架(JSX + Less 输出 WXML + WXSS)，也支持 QQ 轻应用 |
|
||||
| [cax](https://github.com/Tencent/omi/tree/v6/packages/cax)| 小程序 Canvas 和 SVG 渲染引擎 |
|
||||
| [omi-mp](https://github.com/Tencent/omi/tree/v6/packages/omi-mp)| 通过微信小程序开发和生成 Web 单页应用(H5 SPA)|
|
||||
| [westore](https://github.com/Tencent/westore/)| 小程序状态管理 |
|
||||
| [comi](https://github.com/Tencent/omi/tree/v6/packages/comi)| 小程序代码高亮和 markdown 渲染组件 |
|
||||
| [wx-touch-event](https://github.com/qbright/wx-touch-event)| 基于 [AlloyFinger](https://github.com/AlloyTeam/AlloyFinger) 改造的小程序手势解决方案 |
|
||||
|
||||
#### :books:Other
|
||||
|
||||
| **Project** | **Description** |
|
||||
| ------------------------------- | ----------------------------------- |
|
||||
| [omi-piano](https://github.com/Wscats/piano) |Build piano with Omi and Omi Snippets, [Enjoy now!](https://wscats.github.io/piano/build/)|
|
||||
| [omi-devtools](https://github.com/f/omi-devtools)| Browser DevTools extension |
|
||||
| [omi-chart](https://github.com/Tencent/omi/tree/v6/packages/omi-chart)| Simple HTML5 Charts using chart-x tag.|
|
||||
| [md2site](https://tencent.github.io/omi/assets/md2site/)| Static Site Generator with markdown powered by Omio.|
|
||||
| [omi-30-seconds](https://github.com/Tencent/omi/tree/v6/packages/omi-30-seconds)| Useful Omi snippets that you can understand in 30 seconds.|
|
||||
|
|
@ -145,10 +325,11 @@ $ npm run build # release
|
|||
| [omi-touch](https://github.com/Tencent/omi/tree/v6/packages/omi-touch)|Smooth scrolling, rotation, pull to refresh and any motion for the web.|
|
||||
| [omi-native](https://github.com/Tencent/omi/tree/v6/packages/omi-native)|Render web components to native|
|
||||
| [omi-i18n](https://github.com/i18next/omi-i18n)| Internationalization solution for omi.js using i18next ecosystem |
|
||||
| [omi-page](https://github.com/Tencent/omi/tree/v6/packages/omi-page) |Tiny client-side router by [page](https://github.com/visionmedia/page.js)|
|
||||
| [omie](https://github.com/Wscats/omi-electron) |Build cross platform desktop apps with Omi.js and Electron.js|
|
||||
| [omi-cv](https://github.com/Wscats/CV) |Create a front-end engineer curriculum vitae, [Get Started!](http://wscats.github.io/CV/omi/build/index.html)|
|
||||
| [Soo](https://github.com/tonis2/Soo)| Has same API as omi but is great alternative if you want to create custom elements without JSX, virtual DOM and store |
|
||||
|
||||
|[CEE](https://omijs.github.io/cee/out/)| Fork from custom-elements-everywhere |
|
||||
|
||||
## Why Omi?
|
||||
|
||||
|
|
@ -158,6 +339,11 @@ $ npm run build # release
|
|||
- Stateless View Architecture Design
|
||||
- Be friendly to custom elements, you can pass `false` attributes to elements through string `'0'` or string `'false'`, you can [pass `object` attributes to elements through `:` prefix and `Omi.$`](https://github.com/Tencent/omi/releases/tag/v6.8.0)
|
||||
- [Easy two way binding by extend api](https://codepen.io/omijs/pen/aeLYjx)
|
||||
- Supports TypeScript
|
||||
- Reactive data-binding
|
||||
- [Native tap event support](https://github.com/Tencent/omi/releases/tag/v4.0.24)
|
||||
- Having Cross-frameworks UI components - [omim](https://tencent.github.io/omi/packages/omim/docs/build/index.html)
|
||||
- Excellent compatibility(IE8+) with [omio](https://github.com/Tencent/omi/tree/v6/packages/omio)
|
||||
- Enhanced CSS, [rpx unit support](https://github.com/Tencent/omi/releases/tag/v4.0.26) base on **750** screen width
|
||||
- Compliance with browser trend and API design
|
||||
- Merge [**Web Components**](https://developers.google.com/web/fundamentals/web-components/), [**JSX**](https://reactjs.org/docs/introducing-jsx.html) into one framework
|
||||
|
|
@ -166,12 +352,13 @@ $ npm run build # release
|
|||
- Look at [Facebook React vs Web Components](https://softwareengineering.stackexchange.com/questions/225400/pros-and-cons-of-facebooks-react-vs-web-components-polymer)，Omi **combines their advantages** and gives developers the **freedom to choose the way they like**
|
||||
- **Shadow DOM or Light DOM merges with Virtual DOM**, Omi uses both virtual DOM and real Shadow DOM to make view updates more accurate and faster
|
||||
- **Scoped CSS**'s best solution is [**Shadow DOM**](https://developers.google.com/web/fundamentals/web-components/shadowdom), the community churning out frameworks and libraries for Scoped CSS (using JS or JSON writing styles such as Radium, jsxstyle, react-style; binding to webpack using generated unique `className` `filename-classname-hash`, such as CSS Modules, Vue), are hack technologies; _and Shadow DOM Style is the perfect solution_.
|
||||
- The original **Path Updating** **store system**. Proxy-based automatic **accurate** update, **low power consumption**, high degree of freedom, excellent performance, easy integration of `requestIdleCallback`,It will automatically update UI partially when data is changed
|
||||
|
||||
Compare TodoApp by Omi and React, Omi and React rendering DOM structure:
|
||||
|
||||
| **Omi** | **React** |
|
||||
| ------------------------------- | ----------------------------------- |
|
||||
|  |  |
|
||||
| **Omi** | **React** | **Omio** |
|
||||
| ------------------------------- | ----------------------------------- |----------------------------------- |
|
||||
|  |  |  |
|
||||
|
||||
Omi uses Shadow DOM or Light DOM based style isolation and semantic structure.
|
||||
|
||||
|
|
@ -180,7 +367,7 @@ Omi uses Shadow DOM or Light DOM based style isolation and semantic structure.
|
|||
| **Title Name** | **Other language** | **Related**|
|
||||
| ----------------------------------------- | ------------------ |-----------------|
|
||||
|[Web Components bookmarks](https://www.notion.so/Web-Components-bookmarks-64066078f891433dbc74997dc4d64302)|||
|
||||
|[Snake-Eating Game Making with Web Components of Omi and MVP Architecture](https://github.com/Tencent/omi/blob/master/tutorial/omi-web-components-snake-game-mvp.md)|||
|
||||
|[Snake-Eating Game Making with Web Components of Omi and MVP Architecture](https://github.com/Tencent/omi/blob/v6/tutorial/omi-web-components-snake-game-mvp.md)|||
|
||||
|[Constructable Stylesheets: seamless reusable styles](https://developers.google.com/web/updates/2019/02/constructable-stylesheets)|||
|
||||
|[Web Components specifications](https://github.com/w3c/webcomponents)|||
|
||||
|[Web Components in a Nutshell](https://levelup.gitconnected.com/web-components-in-a-nutshell-1e114aa971b9)|||
|
||||
|
|
@ -189,9 +376,9 @@ Omi uses Shadow DOM or Light DOM based style isolation and semantic structure.
|
|||
|[Styling We Components Using A Shared Style Sheet](https://www.smashingmagazine.com/2016/12/styling-web-components-using-a-shared-style-sheet/)|
|
||||
|[Developer Tools support for Web Components in Firefox 63](https://blog.nightly.mozilla.org/2018/09/06/developer-tools-support-for-web-components-in-firefox-63/)||
|
||||
|[Develop W3C Web Components with WebAssembly](https://medium.com/coinmonks/develop-w3c-web-components-with-webassembly-d65938284255)||
|
||||
| [60FPS Animation In Omi](https://github.com/Tencent/omi/blob/master/tutorial/omi-transform.md)| [简体中文](https://github.com/Tencent/omi/blob/master/tutorial/omi-transform.cn.md) [한국어](https://github.com/Tencent/omi/blob/master/tutorial/omi-transform.kr.md)|
|
||||
| [Render Web Components To Native](https://github.com/Tencent/omi/blob/master/tutorial/render-web-components-to-native.md)|[简体中文](https://github.com/Tencent/omi/blob/master/tutorial/render-web-components-to-native.cn.md) [한국어](https://github.com/Tencent/omi/blob/master/tutorial/render-web-components-to-native.kr.md)|
|
||||
| [Shadow Dom In Depth](https://github.com/praveenpuglia/shadow-dom-in-depth)| [简体中文](https://github.com/Tencent/omi/blob/master/tutorial/shadow-dom-in-depth.cn.md)|
|
||||
| [60FPS Animation In Omi](https://github.com/Tencent/omi/blob/v6/tutorial/omi-transform.md)| [简体中文](https://github.com/Tencent/omi/blob/v6/tutorial/omi-transform.cn.md) [한국어](https://github.com/Tencent/omi/blob/v6/tutorial/omi-transform.kr.md)|
|
||||
| [Render Web Components To Native](https://github.com/Tencent/omi/blob/v6/tutorial/render-web-components-to-native.md)|[简体中文](https://github.com/Tencent/omi/blob/v6/tutorial/render-web-components-to-native.cn.md) [한국어](https://github.com/Tencent/omi/blob/v6/tutorial/render-web-components-to-native.kr.md)|
|
||||
| [Shadow Dom In Depth](https://github.com/praveenpuglia/shadow-dom-in-depth)| [简体中文](https://github.com/Tencent/omi/blob/v6/tutorial/shadow-dom-in-depth.cn.md)|
|
||||
| [Part Theme Explainer](https://meowni.ca/posts/part-theme-explainer/)|求翻译|
|
||||
| [Web Components MDN](https://developer.mozilla.org/en-US/docs/Web/Web_Components)| [简体中文](https://developer.mozilla.org/zh-CN/docs/Web/Web_Components)|
|
||||
| [Web Components Google](https://developers.google.com/web/fundamentals/web-components/)|
|
||||
|
|
@ -202,32 +389,163 @@ Omi uses Shadow DOM or Light DOM based style isolation and semantic structure.
|
|||
| [CSS Shadow Parts](https://drafts.csswg.org/css-shadow-parts-1/)|
|
||||
| [Platform HTML5](https://platform.html5.org/)|
|
||||
| [Using requestIdleCallback](https://developers.google.com/web/updates/2015/08/using-requestidlecallback)|[简体中文](https://div.io/topic/1370)| [A polyfill](https://gist.github.com/paullewis/55efe5d6f05434a96c36)|
|
||||
| [The Power Of Web Components](https://hacks.mozilla.org/2018/11/the-power-of-web-components/)|[简体中文](https://github.com/Tencent/omi/blob/master/tutorial/the-power-of-web-components.cn.md)|
|
||||
| [The Power Of Web Components](https://hacks.mozilla.org/2018/11/the-power-of-web-components/)|[简体中文](https://github.com/Tencent/omi/blob/v6/tutorial/the-power-of-web-components.cn.md)|
|
||||
|[ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot)|[简体中文](https://developer.mozilla.org/zh-CN/docs/Web/API/ShadowRoot)||
|
||||
|
||||
# Overview of the Readme
|
||||
|
||||
- [Ecosystem of Omi](#ecosystem-of-omi)
|
||||
- [Useful Resources](#useful-resources)
|
||||
- [Getting Started](#getting-started)
|
||||
- [Project Template](#project-template)
|
||||
- [Hello Element](#hello-element)
|
||||
- [TypeScript Auto Complete](#typescript-auto-complete)
|
||||
- [Lifecycle](#lifecycle)
|
||||
- [Browsers Support](#browsers-support)
|
||||
- [Contributors](#contributors)
|
||||
- [Maintainers](#maintainers)
|
||||
- [Thanks](#thanks)
|
||||
- [License](#license)
|
||||
- [Overview of the Readme](#overview-of-the-readme)
|
||||
- [Add Omi in One Minute](#add-omi-in-one-minute)
|
||||
- [Getting Started](#getting-started)
|
||||
- [Install](#install)
|
||||
- [Scripts](#scripts)
|
||||
- [Switch omi, omio and reomi](#switch-omi-omio-and-reomi)
|
||||
- [Project Template](#project-template)
|
||||
- [Hello Element](#hello-element)
|
||||
- [Browsers Support](#browsers-support)
|
||||
- [Contribution](#contribution)
|
||||
- [Contributors](#contributors)
|
||||
- [Design philosophy](#design-philosophy)
|
||||
- [Core Maintainers](#core-maintainers)
|
||||
- [Thanks](#thanks)
|
||||
- [License](#license)
|
||||
|
||||
## Add Omi in One Minute
|
||||
|
||||
This page demonstrates using Omi **with no build tooling**, directly run in the browser.
|
||||
|
||||
- [→ Online Demo!](https://codepen.io/omijs/pen/PMZWNb)
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Omi demo without transpiler</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script src="https://unpkg.com/omi"></script>
|
||||
<script>
|
||||
const { define, render, h } = Omi
|
||||
|
||||
class Store {
|
||||
data = {
|
||||
count: 1
|
||||
}
|
||||
sub = () => {
|
||||
this.data.count--
|
||||
}
|
||||
add = () => {
|
||||
this.data.count++
|
||||
}
|
||||
}
|
||||
|
||||
define('my-counter', _ => (
|
||||
h(h.f, null,
|
||||
h('button', {
|
||||
onClick: _.store.sub
|
||||
}, '-'),
|
||||
h('span', null, _.store.data.count),
|
||||
h('button', {
|
||||
onClick: _.store.add
|
||||
}, '+')
|
||||
)
|
||||
), {
|
||||
use: ['count'],
|
||||
//or using useSelf, useSelf will update self only, exclude children components
|
||||
//useSelf: ['count'],
|
||||
css: `span { color: red; }`,
|
||||
installed() {
|
||||
console.log('installed')
|
||||
}
|
||||
})
|
||||
|
||||
render(h('my-counter'), 'body', new Store)
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
Omi Store provides a way to pass data through the component tree without having to pass props down manually at every level, injected from the root component and shared across all subcomponents. It's very simple to use:
|
||||
|
||||
You can also use `my-counter` tag directly in HTML：
|
||||
|
||||
```jsx
|
||||
<body>
|
||||
<my-counter></my-counter>
|
||||
</body>
|
||||
```
|
||||
|
||||
|
||||
## Getting Started
|
||||
|
||||
### Install
|
||||
|
||||
```bash
|
||||
$ npm i omi-cli -g # install cli
|
||||
$ omi init my-app # init project
|
||||
$ cd my-app
|
||||
$ npm start # develop
|
||||
$ npm run build # release
|
||||
```
|
||||
|
||||
> `npx omi-cli init my-app` is also supported(npm v5.2.0+).
|
||||
|
||||
Directory description:
|
||||
|
||||
```
|
||||
├─ config
|
||||
├─ public
|
||||
├─ scripts
|
||||
├─ src
|
||||
│ ├─ assets
|
||||
│ ├─ elements //Store all custom elements
|
||||
│ ├─ store //Store all this store of pages
|
||||
│ ├─ admin.js //Entry js of compiler，will build to admin.html
|
||||
│ └─ index.js //Entry js of compiler，will build to index.html
|
||||
```
|
||||
|
||||
#### Scripts
|
||||
|
||||
```json
|
||||
"scripts": {
|
||||
"start": "node scripts/start.js",
|
||||
"build": "PUBLIC_URL=. node scripts/build.js",
|
||||
"build-windows": "set PUBLIC_URL=.&& node scripts/build.js",
|
||||
"fix": "eslint src --fix"
|
||||
}
|
||||
```
|
||||
|
||||
You can set up the PUBLIC_URL, such as：
|
||||
|
||||
```json
|
||||
...
|
||||
"build": "PUBLIC_URL=https://fe.wxpay.oa.com/dv node scripts/build.js",
|
||||
"build-windows": "set PUBLIC_URL=https://fe.wxpay.oa.com/dv && node scripts/build.js",
|
||||
...
|
||||
```
|
||||
|
||||
#### Switch omi, omio and reomi
|
||||
|
||||
Add or remove the alias config in package.json to switch omi and omio：
|
||||
|
||||
```js
|
||||
"alias": {
|
||||
"omi": "omio"
|
||||
}
|
||||
```
|
||||
|
||||
### Project Template
|
||||
|
||||
| **Template Type**| **Command**| **Describe**|
|
||||
| ------------ | -----------| ----------------- |
|
||||
|Base Template|`omi init my-app`| Basic omi project template.|
|
||||
|Base Template(v3.3.0+)|`omi init my-app`| Basic omi or omio(IE8+) project template.|
|
||||
|Base Template with snapshoot|`omi init-snap my-app`| Basic omi or omio(IE8+) project template with snapshoot prerendering.|
|
||||
|TypeScript Template(omi-cli v3.3.0+)|`omi init-ts my-app`|Basic template with typescript.|
|
||||
|Mobile Template|`omi init-weui my-app`| Mobile web app template with weui and omi-router.|
|
||||
|Kbone Template|`omi init-kbone my-app` |Developing mini program or web using omi.|
|
||||
|
||||
### Hello Element
|
||||
|
|
@ -478,6 +796,14 @@ export default class oButton extends WeElement<ButtonProps> {
|
|||
| `beforeRender` | before `render()` |
|
||||
| `receiveProps` | parent element re-render will trigger it, `return false` will prevent update action|
|
||||
|
||||
## Debugging
|
||||
|
||||
Easy to debug via [Omi DevTools Extension](https://github.com/f/omi-devtools) [[Install from Chrome WebStore](https://chrome.google.com/webstore/detail/omijs-devtools/pjgglfliglbhpcpalbpeloghnbceocmd)], using Omi DevTools you can simply debug and manage your UI **without any configuration**. Just install and debug.
|
||||
|
||||
Since Omi uses Web Components and Shadow-DOM, it doesn't need to have another elements panel such as React has. It just adds a panel to the **Elements' sidebar** and it's powerful as much as React DevTools.
|
||||
|
||||
|
||||
|
||||
### View registered elements
|
||||
|
||||
```js
|
||||
|
|
@ -498,6 +824,7 @@ For example, the below is about migration React button as weui Omi button:
|
|||
|
||||
## Browsers Support
|
||||
|
||||
> [Omio](https://github.com/Tencent/omi/tree/v6/packages/omio) - Omi for old browsers(IE8+)
|
||||
|
||||
Omi works in the latest two versions of all major browsers: Safari 10+, IE 11+, and the evergreen Chrome, Firefox, and Edge.
|
||||
|
||||
|
|
@ -531,28 +858,67 @@ npm run test
|
|||
|
||||
## Contributors
|
||||
|
||||
<a href="https://github.com/Tencent/omi/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=Tencent/omi" />
|
||||
</a>
|
||||
<table><tbody>
|
||||
<tr><td><a target="_blank" href="https://github.com/dntzhang"><img width="60px" src="https://avatars2.githubusercontent.com/u/7917954?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/LeeHyungGeun"><img width="60px" src="https://avatars2.githubusercontent.com/u/2471651?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/xcatliu"><img width="60px" src="https://avatars1.githubusercontent.com/u/5453359?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/1921622004"><img width="60px" src="https://avatars1.githubusercontent.com/u/19359217?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/yanceyou"><img width="60px" src="https://avatars2.githubusercontent.com/u/16320418?s=60&v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/f"><img width="60px" src="https://avatars0.githubusercontent.com/u/196477?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/pasturn"><img width="60px" src="https://avatars0.githubusercontent.com/u/6126885?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/Wscats"><img width="60px" src="https://avatars3.githubusercontent.com/u/17243165?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/akira-cn"><img width="60px" src="https://avatars0.githubusercontent.com/u/316498?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/ZainChen"><img width="60px" src="https://avatars3.githubusercontent.com/u/15615524?s=60&v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/dangxuandev"><img width="60px" src="https://avatars1.githubusercontent.com/u/5436704?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/daizhan"><img width="60px" src="https://avatars0.githubusercontent.com/u/5318547?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/132yse"><img width="60px" src="https://avatars1.githubusercontent.com/u/12951461?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/elfman"><img width="60px" src="https://avatars3.githubusercontent.com/u/948001?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/NoBey"><img width="60px" src="https://avatars3.githubusercontent.com/u/10740524?s=60&v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/hilkbahar"><img width="60px" src="https://avatars2.githubusercontent.com/u/12161006?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/eyea"><img width="60px" src="https://avatars0.githubusercontent.com/u/17020223?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/guisturdy"><img width="60px" src="https://avatars1.githubusercontent.com/u/7098619?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/KidneyFlower"><img width="60px" src="https://avatars1.githubusercontent.com/u/16027183?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/zhangsanshi"><img width="60px" src="https://avatars1.githubusercontent.com/u/3771933?s=60&v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/xland"><img width="60px" src="https://avatars0.githubusercontent.com/u/2980915?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/winstonxie"><img width="60px" src="https://avatars3.githubusercontent.com/u/16422642?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/ghostzhang"><img width="60px" src="https://avatars3.githubusercontent.com/u/194242?s=60&v=4"></a></td>
|
||||
<td><a target="_blank" href="https://github.com/jayZOU"><img width="60px" src="https://avatars3.githubusercontent.com/u/8576977?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/zhengbao"><img width="60px" src="https://avatars3.githubusercontent.com/u/1736166?s=60&v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/vorshen"><img width="60px" src="https://avatars3.githubusercontent.com/u/10334783?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/akira-cn"><img width="60px" src="https://avatars3.githubusercontent.com/u/316498?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/loo41"><img width="60px" src="https://avatars3.githubusercontent.com/u/28095677?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/rainmanhhh"><img width="60px" src="https://avatars3.githubusercontent.com/u/13862623?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/nbompetsis"><img width="60px" src="https://avatars3.githubusercontent.com/u/11991105?s=60&v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/CodeFalling"><img width="60px" src="https://avatars1.githubusercontent.com/u/5436704?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/daizhan"><img width="60px" src="https://avatars0.githubusercontent.com/u/5318547?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/ritschwumm"><img width="60px" src="https://avatars2.githubusercontent.com/u/547138?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/kahwee"><img width="60px" src="https://avatars3.githubusercontent.com/u/262105?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/alanyinjs"><img width="60px" src="https://avatars3.githubusercontent.com/u/25688258?s=60&v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/electerious"><img width="60px" src="https://avatars2.githubusercontent.com/u/499088?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/nanhupatar"><img width="60px" src="https://avatars1.githubusercontent.com/u/27266016?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/ilker0"><img width="60px" src="https://avatars1.githubusercontent.com/u/23511412?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/MrGrabazu"><img width="60px" src="https://avatars2.githubusercontent.com/u/6928672?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/Tagir-A"><img width="60px" src="https://avatars2.githubusercontent.com/u/23556586?s=60&v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/mahmut-gundogdu"><img width="60px" src="https://avatars2.githubusercontent.com/u/2217899?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/howel52"><img width="60px" src="https://avatars3.githubusercontent.com/u/9854818?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/yolio2003"><img width="60px" src="https://avatars1.githubusercontent.com/u/352931?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/loo41"><img width="60px" src="https://avatars3.githubusercontent.com/u/28095677?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/nbompetsis"><img width="60px" src="https://avatars1.githubusercontent.com/u/11991105?s=60&v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/WozHuang"><img width="60px" src="https://avatars2.githubusercontent.com/u/22727100?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/web-padawan"><img width="60px" src="https://avatars2.githubusercontent.com/u/10589913?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/SuperHuangXu"><img width="60px" src="https://avatars1.githubusercontent.com/u/14816052?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/LastHeaven"><img width="60px" src="https://avatars1.githubusercontent.com/u/10590077?s=60&v=4"></a></td>
|
||||
<td><a target="_blank" href="https://github.com/validalias"><img width="60px" src="https://avatars3.githubusercontent.com/u/44221844?s=60&v=4"></a></td></tr><tr>
|
||||
<td><a target="_blank" href="https://github.com/FAKER-A"><img width="60px" src="https://avatars2.githubusercontent.com/u/25676164?s=60&v=4"></a></td>
|
||||
<td><a target="_blank" href="https://github.com/liulinboyi"><img width="60px" src="https://avatars2.githubusercontent.com/u/41336612?s=60&v=4"></a></td>
|
||||
<td><a target="_blank" href="https://github.com/hulei"><img width="60px" src="https://avatars2.githubusercontent.com/u/6905072?s=60&v=4"></a></td> <td><a target="_blank" href="https://github.com/mtonhuang"><img width="60px" src="https://avatars2.githubusercontent.com/u/30364922?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/Juliiii"><img width="60px" src="https://avatars2.githubusercontent.com/u/23744602?s=60&v=4"></a></td></tr><tr><td><a target="_blank" href="https://github.com/mingkang1993"><img width="60px" src="https://avatars2.githubusercontent.com/u/9126292?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/liufushihai"><img width="60px" src="https://avatars2.githubusercontent.com/u/28208916?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/supermp"><img width="60px" src="https://avatars2.githubusercontent.com/u/892475?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/LeachZhou"><img width="60px" src="https://avatars2.githubusercontent.com/u/18715564?s=60&v=4"></a></td><td><a target="_blank" href="https://github.com/yiliang114"><img width="60px" src="https://avatars2.githubusercontent.com/u/11473889?s=60&v=4"></a></td>
|
||||
</tr><tr><td><a target="_blank" href="https://github.com/liubailing"><img width="60px" src="https://avatars2.githubusercontent.com/u/3907493?s=60&v=4"></a></td>
|
||||
<td><a target="_blank" href="https://github.com/fyuan1992"><img width="60px" src="https://avatars2.githubusercontent.com/u/19830858?s=60&v=4"></a></td>
|
||||
<td><a target="_blank" href="https://github.com/xinshangshangxin"><img width="60px" src="https://avatars2.githubusercontent.com/u/8779091?s=60&v=4"></a></td>
|
||||
<td><a target="_blank" href="https://github.com/aolu11"><img width="60px" src="https://avatars2.githubusercontent.com/u/1127488?s=60&v=4"></a></td>
|
||||
</tr></tbody></table>
|
||||
|
||||
Any form of contribution is welcome. The above contributors have been officially released by Tencent.
|
||||
|
||||
We very much welcome developers to contribute to Tencent's open source, and we will also give them incentives to acknowledge and thank them. Here we provide an official description of Tencent's open source contribution. Specific contribution rules for each project are formulated by the project team. Developers can choose the appropriate project and participate according to the corresponding rules. The Tencent Project Management Committee will report regularly to qualified contributors and awards will be issued by the official contact.
|
||||
|
||||
|
||||
## Design philosophy
|
||||
|
||||
The Omi design was driven by The Zen of Python, by Tim Peters philosophy:
|
||||
|
||||
* Beautiful is better than ugly.
|
||||
* Explicit is better than implicit.
|
||||
* Simple is better than complex.
|
||||
* Complex is better than complicated.
|
||||
* Flat is better than nested.
|
||||
* Sparse is better than dense.
|
||||
* Readability counts.
|
||||
* Special cases aren't special enough to break the rules.
|
||||
* Although practicality beats purity.
|
||||
* Errors should never pass silently.
|
||||
* Unless explicitly silenced.
|
||||
* In the face of ambiguity, refuse the temptation to guess.
|
||||
* There should be one—and preferably only one—obvious way to do it.
|
||||
* Although that way may not be obvious at first unless you're Dutch.
|
||||
* Now is better than never.
|
||||
* Although never is often better than right now.
|
||||
* If the implementation is hard to explain, it's a bad idea.
|
||||
* If the implementation is easy to explain, it may be a good idea.
|
||||
* Namespaces are one honking great idea—let's do more of those!
|
||||
|
||||
|
||||
## Core Maintainers
|
||||
|
||||
- [@dntzhang](https://github.com/dntzhang)
|
||||
- [@Wscats](https://github.com/Wscats)
|
||||
- [@LeeHyungGeun](https://github.com/LeeHyungGeun)
|
||||
- [@xcatliu](https://github.com/xcatliu)
|
||||
- [AlloyTeam](http://alloyteam.com/)
|
||||
- [@Wscats](https://github.com/Wscats)
|
||||
- [@f](https://github.com/f)
|
||||
- [@LeeHyungGeun](https://github.com/LeeHyungGeun)
|
||||
- [@dntzhang](https://github.com/dntzhang)
|
||||
- [@xcatliu](https://github.com/xcatliu)
|
||||
|
||||
Please contact us for any questions.
|
||||
|
||||
## Thanks
|
||||
|
||||
* [preact](https://github.com/developit/preact)
|
||||
* [obaa](https://github.com/Tencent/omi/tree/v6/packages/obaa)
|
||||
* [create-react-app](https://github.com/facebook/create-react-app)
|
||||
* [JSX](https://github.com/facebook/jsx)
|
||||
* [JSONPatcherProxy](https://github.com/Palindrom/JSONPatcherProxy)
|
||||
|
||||
## License
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 148 KiB |
|
|
@ -1,5 +0,0 @@
|
|||
node_modules
|
||||
|
||||
# lock
|
||||
yarn.lock
|
||||
package-lock.json
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
@import '@omiu/common/scss/theme.scss';
|
||||
@import "@omiu/common/theme.scss";
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
img {
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -39,8 +40,13 @@ img {
|
|||
color: white;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.o-avatar .material-icons {
|
||||
line-height: 40px;
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
types
|
||||
*.local
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Omiu</title>
|
||||
<script type="module" src="/src/demo.tsx"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>JSX Mode <a href="./index.html">HTML Mode</a></h1>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
|
||||
<meta charset="UTF-8" />
|
||||
<title>Omiu Avatar</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<a href="https://github.com/Tencent/omi" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;">
|
||||
<img src="//alloyteam.github.io/github.png" alt="">
|
||||
</a>
|
||||
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
|
||||
<script src="../../src/index.js"></script>
|
||||
<script src="../../../o-icon/src/index.js"></script>
|
||||
<script src="https://unpkg.com/@omiu/icon@0.0.3/wifi.js"></script>
|
||||
<script src="https://unpkg.com/@omiu/icon@0.0.3/favorite.js"></script>
|
||||
|
||||
<div>
|
||||
|
||||
<o-badge dot x="2" y="10">
|
||||
<o-icon-wifi style="font-size: 30px;"></o-icon-wifi>
|
||||
</o-badge>
|
||||
|
||||
<br><br><br>
|
||||
<o-badge content="99" x="5" y="10">
|
||||
<o-icon-favorite style="font-size: 30px;"></o-icon-favorite>
|
||||
</o-badge>
|
||||
<br /><br /><br />
|
||||
|
||||
<o-badge content="8">
|
||||
<o-icon
|
||||
path="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"
|
||||
color="#07C160" />
|
||||
</o-badge>
|
||||
|
||||
<br /><br /><br />
|
||||
<o-badge content="99">
|
||||
<o-icon
|
||||
path="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"
|
||||
color="red" />
|
||||
</o-badge>
|
||||
|
||||
<br /><br /><br />
|
||||
|
||||
<o-badge content="new">
|
||||
<o-icon
|
||||
path="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"
|
||||
color="black" />
|
||||
</o-badge>
|
||||
|
||||
|
||||
<br /><br /><br />
|
||||
<o-badge dot>
|
||||
<o-icon
|
||||
path="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"
|
||||
color="black" />
|
||||
</o-badge>
|
||||
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Omiu</title>
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>HTML Mode <a href="./demo.html">JSX Mode</a></h1>
|
||||
|
||||
<script src="https://unpkg.com/omi@6.21.3/dist/omi.min.js"></script>
|
||||
|
||||
<script src="https://unpkg.com/@omiu/icon@0.0.3/wifi.js"></script>
|
||||
<script src="https://unpkg.com/@omiu/icon@0.0.3/favorite.js"></script>
|
||||
|
||||
<div>
|
||||
<o-badge dot x="2" y="10">
|
||||
<o-icon-wifi style="font-size: 30px"></o-icon-wifi>
|
||||
</o-badge>
|
||||
|
||||
<br /><br /><br />
|
||||
<o-badge content="99" x="5" y="10">
|
||||
<o-icon-favorite style="font-size: 30px"></o-icon-favorite>
|
||||
</o-badge>
|
||||
<br /><br /><br />
|
||||
|
||||
<o-badge content="8">
|
||||
<o-icon-favorite style="font-size: 30px"></o-icon-favorite>
|
||||
</o-badge>
|
||||
|
||||
<br /><br /><br />
|
||||
<o-badge content="99">
|
||||
<o-icon-favorite style="font-size: 30px"></o-icon-favorite>
|
||||
</o-badge>
|
||||
|
||||
<br /><br /><br />
|
||||
|
||||
<o-badge content="new">
|
||||
<o-icon-favorite style="font-size: 30px"></o-icon-favorite>
|
||||
</o-badge>
|
||||
|
||||
<br /><br /><br />
|
||||
<o-badge dot>
|
||||
<o-icon-favorite style="font-size: 30px"></o-icon-favorite>
|
||||
</o-badge>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@omiu/badge",
|
||||
"version": "0.0.2",
|
||||
"version": "0.0.1",
|
||||
"description": "Mark in the upper right corner of the icon",
|
||||
"docsExtend": {
|
||||
"cnName": "徽章",
|
||||
|
|
@ -9,41 +9,93 @@
|
|||
"codepenHeight": 351,
|
||||
"codepenDefaultTab": "html,result"
|
||||
},
|
||||
"main": "dist/index.es.js",
|
||||
"exports": {
|
||||
".": "./dist/index.es.js"
|
||||
},
|
||||
"types": "types/index.d.ts",
|
||||
"main": "src/index.js",
|
||||
"module": "src/index.esm.js",
|
||||
"types": "src/index.d.ts",
|
||||
"scripts": {
|
||||
"start": "yarn watch & vite",
|
||||
"dev": "yarn watch & vite",
|
||||
"build": "vite build && yarn build:scss",
|
||||
"build:demo": "vite build",
|
||||
"build:scss": "sass src/index.scss src/index.css",
|
||||
"watch": "sass --watch src/index.scss src/index.css --no-source-map",
|
||||
"test": "npm run build && web-test-runner \"test/*.js\" --node-resolve"
|
||||
"docs": "node ./scripts/docs-gen.js",
|
||||
"start": "node ./scripts/webpack.build.js -- demo",
|
||||
"build": "node ./scripts/webpack.build.js -- build && rollup -c scripts/rollup.config.js && node ./scripts/rollup.end.js"
|
||||
},
|
||||
"typings": "./dist/index.d.ts",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/omi.git"
|
||||
},
|
||||
"files": [
|
||||
"src",
|
||||
"dist",
|
||||
"types"
|
||||
"typings.json"
|
||||
],
|
||||
"keywords": [
|
||||
"omiu",
|
||||
"omi",
|
||||
"omio",
|
||||
"preact",
|
||||
"react",
|
||||
"virtual dom",
|
||||
"vdom",
|
||||
"components",
|
||||
"virtual",
|
||||
"dom"
|
||||
],
|
||||
"author": "dntzhang <dntzhang@qq.com>",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/Tencent/omi/issues"
|
||||
},
|
||||
"homepage": "http://omijs.org",
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^11.1.0",
|
||||
"css": "^2.2.4",
|
||||
"css-loader": "^1.0.1",
|
||||
"file": "^0.2.2",
|
||||
"file-loader": "^2.0.0",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"less": "^3.9.0",
|
||||
"less-loader": "^4.1.0",
|
||||
"mini-css-extract-plugin": "^0.4.5",
|
||||
"node-sass": "^4.12.0",
|
||||
"omi": "latest",
|
||||
"omio": "latest",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.1",
|
||||
"progress-bar-webpack-plugin": "^2.1.0",
|
||||
"resolve-url-loader": "^3.1.0",
|
||||
"rollup": "^2.7.1",
|
||||
"rollup-plugin-license": "^2.0.0",
|
||||
"rollup-plugin-node-resolve": "^5.2.0",
|
||||
"rollup-plugin-scss": "^2.4.0",
|
||||
"rollup-plugin-typescript": "^1.0.1",
|
||||
"sass-loader": "^7.1.0",
|
||||
"style-loader": "^0.23.1",
|
||||
"to-string-loader": "^1.1.5",
|
||||
"ts-loader": "^5.4.4",
|
||||
"typescript": "^3.2.1",
|
||||
"url": "^0.11.0",
|
||||
"url-loader": "^1.1.2",
|
||||
"webpack": "^4.42.1",
|
||||
"webpack-cli": "^3.3.1",
|
||||
"webpack-dev-server": "^3.1.10",
|
||||
"webpack-merge": "^4.1.4"
|
||||
},
|
||||
"greenkeeper": {
|
||||
"ignore": [
|
||||
"babel-cli",
|
||||
"babel-core",
|
||||
"babel-eslint",
|
||||
"babel-loader",
|
||||
"jscodeshift",
|
||||
"rollup-plugin-babel"
|
||||
]
|
||||
},
|
||||
"prettier": {
|
||||
"singleQuote": true,
|
||||
"semi": false,
|
||||
"tabWidth": 2,
|
||||
"useTabs": false
|
||||
},
|
||||
"dependencies": {
|
||||
"@omiu/common": "latest",
|
||||
"omi": "latest"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@omiu/icon": "^0.0.4",
|
||||
"@open-wc/testing": "^2.5.33",
|
||||
"@types/node": "^16.4.7",
|
||||
"@web/test-runner": "^0.13.13",
|
||||
"sass": "^1.39.0",
|
||||
"typescript": "^4.3.2",
|
||||
"vite": "^2.5.4"
|
||||
},
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"omi",
|
||||
"omiu",
|
||||
"form"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,153 @@
|
|||
//自动扫描 index.tsx 生成 readme
|
||||
const fs = require('fs')
|
||||
|
||||
const content = fs.readFileSync('./src/index.tsx', 'utf-8')
|
||||
|
||||
const props = extract('interface Props {', content).replace('interface Props ', '')
|
||||
|
||||
const defaultProps = extract('static defaultProps = {', content).replace('static defaultProps = ', '').replace(/ }/g, '}').replace(/ /g, ' ')
|
||||
|
||||
|
||||
const eventContexts = content.match(new RegExp('this.fire\\([\\s\\S]*?[,|)]', 'g'))
|
||||
const package = require('../package.json')
|
||||
const packageName = package.name
|
||||
const name = packageName.split('/')[1]
|
||||
|
||||
const upperCaseName = name.split('-').map(item => {
|
||||
return item.charAt(0).toUpperCase() + item.slice(1)
|
||||
}).join('')
|
||||
const tagName = 'o-' + name
|
||||
|
||||
//fire 附近打标标记 event.detail 类型？
|
||||
let events, eventMap
|
||||
if (eventContexts) {
|
||||
|
||||
events = eventContexts.map(event => {
|
||||
return event.replace('this.fire(\'', '').replace('\',', '').replace('\')', '')
|
||||
})
|
||||
eventMap = {}
|
||||
events.forEach(event => {
|
||||
eventMap[event] = 1
|
||||
})
|
||||
}
|
||||
|
||||
const cnContent = `## ${upperCaseName} ${package.docsExtend.cnName}
|
||||
|
||||
${package.docsExtend.cnDescription}
|
||||
|
||||
<iframe height="${package.docsExtend.codepenHeight}" style="width: 100%;" scrolling="no" title="OMIU ${upperCaseName}" src="https://codepen.io/omijs/embed/${package.docsExtend.codepen}?height=${package.docsExtend.codepenHeight}&theme-id=default&default-tab=${package.docsExtend.codepenDefaultTab}" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
|
||||
See the Pen <a href='https://codepen.io/omijs/pen/${package.docsExtend.codepen}'>OMIU Checkbox</a> by OMI
|
||||
(<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
## 导入
|
||||
|
||||
\`\`\`js
|
||||
import '${packageName}'
|
||||
\`\`\`
|
||||
|
||||
或者直接 script 标签引入。
|
||||
|
||||
|
||||
\`\`\`html
|
||||
<script src="https://unpkg.com/${packageName}"></script>
|
||||
\`\`\`
|
||||
|
||||
## 使用
|
||||
|
||||
\`\`\`html
|
||||
<${tagName}></${tagName}>
|
||||
\`\`\`
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
\`\`\`tsx
|
||||
${props}
|
||||
\`\`\`
|
||||
|
||||
${defaultProps ? '### 默认属性\n' : ''}${defaultProps ? '\`\`\`tsx\n' : ''}${defaultProps ? defaultProps : ''}
|
||||
${defaultProps ? '\`\`\`\n' : ''}${eventMap ? '### 事件\n' : ''}${eventMap ? Object.keys(eventMap).map(event => {
|
||||
return `* ${event}\n`
|
||||
}).join('') : ''}`
|
||||
|
||||
fs.writeFileSync(`../docs-src/src/docs/zh-cn/${name}.md`, cnContent)
|
||||
|
||||
|
||||
|
||||
const enContent = `## ${upperCaseName}
|
||||
|
||||
${package.description}
|
||||
|
||||
<iframe height="${package.docsExtend.codepenHeight}" style="width: 100%;" scrolling="no" title="OMIU ${upperCaseName}" src="https://codepen.io/omijs/embed/${package.docsExtend.codepen}?height=${package.docsExtend.codepenHeight}&theme-id=default&default-tab=${package.docsExtend.codepenDefaultTab}" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
|
||||
See the Pen <a href='https://codepen.io/omijs/pen/${package.docsExtend.codepen}'>OMIU Checkbox</a> by OMI
|
||||
(<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
## Import
|
||||
|
||||
\`\`\`js
|
||||
import '${packageName}'
|
||||
\`\`\`
|
||||
|
||||
Or use script tag to ref it.
|
||||
|
||||
|
||||
\`\`\`html
|
||||
<script src="https://unpkg.com/${packageName}"></script>
|
||||
\`\`\`
|
||||
|
||||
## Usage
|
||||
|
||||
\`\`\`html
|
||||
<${tagName}></${tagName}>
|
||||
\`\`\`
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
\`\`\`tsx
|
||||
${props}
|
||||
\`\`\`
|
||||
|
||||
${defaultProps ? '### defaultProps\n\n' : ''}${defaultProps ? '\`\`\`tsx\n' : ''}${defaultProps ? defaultProps : ''}
|
||||
${defaultProps ? '\`\`\`\n' : ''}${eventMap ? '### Events\n\n' : ''}${eventMap ? Object.keys(eventMap).map(event => {
|
||||
return `* ${event}\n`
|
||||
}).join('') : ''}`
|
||||
|
||||
|
||||
fs.writeFileSync(`../docs-src/src/docs/en/${name}.md`, enContent)
|
||||
|
||||
|
||||
fs.writeFileSync(`../${name}/README.md`, enContent.replace(/<iframe[\s\S]*?<\/iframe>/, `* [→ CodePen](https://codepen.io/omijs/pen/${package.docsExtend.codepen})`))
|
||||
// console.log(props)
|
||||
// console.log(defaultProps)
|
||||
// console.log(Object.keys(eventMap))
|
||||
|
||||
|
||||
|
||||
function extract(startWith, str) {
|
||||
const start = str.indexOf(startWith)
|
||||
if (start === -1) return ''
|
||||
let end = start + startWith.length
|
||||
let stackCount = 1
|
||||
while (end < str.length) {
|
||||
if (str[end] === '}') {
|
||||
if (stackCount === 1) {
|
||||
|
||||
break
|
||||
} else {
|
||||
stackCount--
|
||||
}
|
||||
} else if (str[end] === '{') {
|
||||
stackCount++
|
||||
}
|
||||
|
||||
end++
|
||||
}
|
||||
|
||||
return str.substring(start, end + 1)
|
||||
}
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
import { tag, h, WeElement, render } from 'omi'
|
||||
|
||||
import './index.tsx'
|
||||
import '@omiu/icon/notifications'
|
||||
|
||||
export type Props = {}
|
||||
|
||||
const tagName = 'my-demo'
|
||||
|
||||
@tag(tagName)
|
||||
export default class MyDemo extends WeElement<Props> {
|
||||
render(props: Props) {
|
||||
return (
|
||||
<div>
|
||||
<o-badge dot x="2" y="10">
|
||||
<o-icon-notifications></o-icon-notifications>
|
||||
</o-badge>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<o-badge content="99" x="5" y="10">
|
||||
<o-icon-notifications></o-icon-notifications>
|
||||
</o-badge>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<o-badge content="8">
|
||||
<o-icon-notifications></o-icon-notifications>
|
||||
</o-badge>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<o-badge content="99">
|
||||
<o-icon-notifications></o-icon-notifications>
|
||||
</o-badge>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<o-badge content="new">
|
||||
<o-icon-notifications></o-icon-notifications>
|
||||
</o-badge>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<o-badge dot>
|
||||
<o-icon-notifications></o-icon-notifications>
|
||||
</o-badge>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
render(<my-demo></my-demo>, 'body', {
|
||||
ignoreAttrs: true
|
||||
})
|
||||
|
|
@ -1,11 +1,10 @@
|
|||
.o-badge {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
display: inline-block; }
|
||||
|
||||
.badge {
|
||||
background-color: #f95050;
|
||||
color: #ffffff;
|
||||
background-color: #F95050;
|
||||
color: #FFFFFF;
|
||||
line-height: 1.2;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -27,16 +26,11 @@
|
|||
border-radius: 10px;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
transform-origin: 100% 0%;
|
||||
cursor: pointer;
|
||||
}
|
||||
transform-origin: 100% 0%; }
|
||||
|
||||
.circle {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
min-width: 8px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
padding: 0; }
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAEA;EACE;EACA;;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"index.css"}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { WeElement } from 'omi';
|
||||
interface Props {
|
||||
dot?: boolean;
|
||||
content?: string;
|
||||
x?: number;
|
||||
y?: number;
|
||||
}
|
||||
export default class Badge extends WeElement<Props> {
|
||||
static css: any;
|
||||
static defaultProps: {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
static propTypes: {
|
||||
dot: BooleanConstructor;
|
||||
content: StringConstructor;
|
||||
x: NumberConstructor;
|
||||
y: NumberConstructor;
|
||||
};
|
||||
installed(): void;
|
||||
uninstall(): void;
|
||||
render(props: any): JSX.Element;
|
||||
}
|
||||
export {};
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
/**
|
||||
* @omiu/badge v0.0.1 http://omijs.org
|
||||
* Front End Cross-Frameworks Framework.
|
||||
* By dntzhang https://github.com/dntzhang
|
||||
* Github: https://github.com/Tencent/omi
|
||||
* MIT Licensed.
|
||||
*/
|
||||
|
||||
import { h, extractClass, tag, WeElement } from 'omi';
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
|
||||
this file except in compliance with the License. You may obtain a copy of the
|
||||
License at http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
|
||||
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
|
||||
MERCHANTABLITY OR NON-INFRINGEMENT.
|
||||
|
||||
See the Apache Version 2.0 License for specific language governing permissions
|
||||
and limitations under the License.
|
||||
***************************************************************************** */
|
||||
/* global Reflect, Promise */
|
||||
|
||||
var extendStatics = function(d, b) {
|
||||
extendStatics = Object.setPrototypeOf ||
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
||||
return extendStatics(d, b);
|
||||
};
|
||||
|
||||
function __extends(d, b) {
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||
}
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
function __decorate(decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
}
|
||||
|
||||
|
||||
var css = `.o-badge {
|
||||
position: relative;
|
||||
display: inline-block; }
|
||||
|
||||
.badge {
|
||||
background-color: #F95050;
|
||||
color: #FFFFFF;
|
||||
line-height: 1.2;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
padding: 0 4px;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
flex-wrap: wrap;
|
||||
font-size: 0.75rem;
|
||||
min-width: 20px;
|
||||
transform: scale(1) translate(50%, -50%);
|
||||
box-sizing: border-box;
|
||||
transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
||||
align-items: center;
|
||||
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
|
||||
font-weight: 500;
|
||||
align-content: center;
|
||||
border-radius: 10px;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
transform-origin: 100% 0%; }
|
||||
|
||||
.circle {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
min-width: 8px;
|
||||
padding: 0; }
|
||||
`
|
||||
|
||||
|
||||
var Badge = /** @class */ (function (_super) {
|
||||
__extends(Badge, _super);
|
||||
function Badge() {
|
||||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
Badge.prototype.installed = function () {
|
||||
};
|
||||
Badge.prototype.uninstall = function () {
|
||||
};
|
||||
Badge.prototype.render = function (props) {
|
||||
if (props.content) {
|
||||
return h("div", __assign({}, extractClass(props, 'o-badge')),
|
||||
props.children ? props.children[0] : h("slot", null),
|
||||
h("span", { class: "badge", style: "right:" + props.x * -1 + "px;top:" + props.y + "px;" }, props.content));
|
||||
}
|
||||
if (props.dot) {
|
||||
return (h("div", { class: "o-badge" },
|
||||
props.children ? props.children[0] : h("slot", null),
|
||||
h("span", { style: "right:" + props.x * -1 + "px;top:" + props.y + "px;", class: "circle badge" })));
|
||||
}
|
||||
return h("div", { class: "o-badge" }, props.children ? props.children[0] : h("slot", null));
|
||||
};
|
||||
Badge.css = css;
|
||||
Badge.defaultProps = {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
Badge.propTypes = {
|
||||
dot: Boolean,
|
||||
content: String,
|
||||
x: Number,
|
||||
y: Number
|
||||
};
|
||||
Badge = __decorate([
|
||||
tag('o-badge')
|
||||
], Badge);
|
||||
return Badge;
|
||||
}(WeElement));
|
||||
|
||||
export default Badge;
|
||||
//# sourceMappingURL=index.esm.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,322 @@
|
|||
(function webpackUniversalModuleDefinition(root, factory) {
|
||||
if(typeof exports === 'object' && typeof module === 'object')
|
||||
module.exports = factory(require("omi"));
|
||||
else if(typeof define === 'function' && define.amd)
|
||||
define(["omi"], factory);
|
||||
else if(typeof exports === 'object')
|
||||
exports["OBadge"] = factory(require("omi"));
|
||||
else
|
||||
root["OBadge"] = factory(root["Omi"]);
|
||||
})(this, function(__WEBPACK_EXTERNAL_MODULE_omi__) {
|
||||
return /******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
/******/
|
||||
/******/ // Check if module is in cache
|
||||
/******/ if(installedModules[moduleId]) {
|
||||
/******/ return installedModules[moduleId].exports;
|
||||
/******/ }
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = installedModules[moduleId] = {
|
||||
/******/ i: moduleId,
|
||||
/******/ l: false,
|
||||
/******/ exports: {}
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Execute the module function
|
||||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||
/******/
|
||||
/******/ // Flag the module as loaded
|
||||
/******/ module.l = true;
|
||||
/******/
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
/******/
|
||||
/******/
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = modules;
|
||||
/******/
|
||||
/******/ // expose the module cache
|
||||
/******/ __webpack_require__.c = installedModules;
|
||||
/******/
|
||||
/******/ // define getter function for harmony exports
|
||||
/******/ __webpack_require__.d = function(exports, name, getter) {
|
||||
/******/ if(!__webpack_require__.o(exports, name)) {
|
||||
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
|
||||
/******/ }
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // define __esModule on exports
|
||||
/******/ __webpack_require__.r = function(exports) {
|
||||
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
||||
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
||||
/******/ }
|
||||
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // create a fake namespace object
|
||||
/******/ // mode & 1: value is a module id, require it
|
||||
/******/ // mode & 2: merge all properties of value into the ns
|
||||
/******/ // mode & 4: return value when already ns object
|
||||
/******/ // mode & 8|1: behave like require
|
||||
/******/ __webpack_require__.t = function(value, mode) {
|
||||
/******/ if(mode & 1) value = __webpack_require__(value);
|
||||
/******/ if(mode & 8) return value;
|
||||
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
|
||||
/******/ var ns = Object.create(null);
|
||||
/******/ __webpack_require__.r(ns);
|
||||
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
|
||||
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
|
||||
/******/ return ns;
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||
/******/ __webpack_require__.n = function(module) {
|
||||
/******/ var getter = module && module.__esModule ?
|
||||
/******/ function getDefault() { return module['default']; } :
|
||||
/******/ function getModuleExports() { return module; };
|
||||
/******/ __webpack_require__.d(getter, 'a', getter);
|
||||
/******/ return getter;
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Object.prototype.hasOwnProperty.call
|
||||
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
||||
/******/
|
||||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "";
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = "./src/index.tsx");
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
/******/ ({
|
||||
|
||||
/***/ "./node_modules/_css-loader@1.0.1@css-loader/index.js!./node_modules/_resolve-url-loader@3.1.1@resolve-url-loader/index.js!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js?!./src/index.scss":
|
||||
/*!****************************************************************************************************************************************************************************************************!*\
|
||||
!*** ./node_modules/_css-loader@1.0.1@css-loader!./node_modules/_resolve-url-loader@3.1.1@resolve-url-loader!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js??ref--4-3!./src/index.scss ***!
|
||||
\****************************************************************************************************************************************************************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
exports = module.exports = __webpack_require__(/*! ../node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js */ "./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js")(false);
|
||||
// imports
|
||||
|
||||
|
||||
// module
|
||||
exports.push([module.i, ".o-badge {\n position: relative;\n display: inline-block; }\n\n.badge {\n background-color: #F95050;\n color: #FFFFFF;\n line-height: 1.2;\n top: 0;\n right: 0;\n height: 20px;\n display: flex;\n padding: 0 4px;\n z-index: 1;\n position: absolute;\n flex-wrap: wrap;\n font-size: 0.75rem;\n min-width: 20px;\n transform: scale(1) translate(50%, -50%);\n box-sizing: border-box;\n transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n align-items: center;\n font-family: \"Roboto\", \"Helvetica\", \"Arial\", sans-serif;\n font-weight: 500;\n align-content: center;\n border-radius: 10px;\n flex-direction: row;\n justify-content: center;\n transform-origin: 100% 0%; }\n\n.circle {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n min-width: 8px;\n padding: 0; }\n", ""]);
|
||||
|
||||
// exports
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js":
|
||||
/*!*******************************************************************!*\
|
||||
!*** ./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js ***!
|
||||
\*******************************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
/*
|
||||
MIT License http://www.opensource.org/licenses/mit-license.php
|
||||
Author Tobias Koppers @sokra
|
||||
*/
|
||||
// css base code, injected by the css-loader
|
||||
module.exports = function(useSourceMap) {
|
||||
var list = [];
|
||||
|
||||
// return the list of modules as css string
|
||||
list.toString = function toString() {
|
||||
return this.map(function (item) {
|
||||
var content = cssWithMappingToString(item, useSourceMap);
|
||||
if(item[2]) {
|
||||
return "@media " + item[2] + "{" + content + "}";
|
||||
} else {
|
||||
return content;
|
||||
}
|
||||
}).join("");
|
||||
};
|
||||
|
||||
// import a list of modules into the list
|
||||
list.i = function(modules, mediaQuery) {
|
||||
if(typeof modules === "string")
|
||||
modules = [[null, modules, ""]];
|
||||
var alreadyImportedModules = {};
|
||||
for(var i = 0; i < this.length; i++) {
|
||||
var id = this[i][0];
|
||||
if(typeof id === "number")
|
||||
alreadyImportedModules[id] = true;
|
||||
}
|
||||
for(i = 0; i < modules.length; i++) {
|
||||
var item = modules[i];
|
||||
// skip already imported module
|
||||
// this implementation is not 100% perfect for weird media query combinations
|
||||
// when a module is imported multiple times with different media queries.
|
||||
// I hope this will never occur (Hey this way we have smaller bundles)
|
||||
if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
|
||||
if(mediaQuery && !item[2]) {
|
||||
item[2] = mediaQuery;
|
||||
} else if(mediaQuery) {
|
||||
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
|
||||
}
|
||||
list.push(item);
|
||||
}
|
||||
}
|
||||
};
|
||||
return list;
|
||||
};
|
||||
|
||||
function cssWithMappingToString(item, useSourceMap) {
|
||||
var content = item[1] || '';
|
||||
var cssMapping = item[3];
|
||||
if (!cssMapping) {
|
||||
return content;
|
||||
}
|
||||
|
||||
if (useSourceMap && typeof btoa === 'function') {
|
||||
var sourceMapping = toComment(cssMapping);
|
||||
var sourceURLs = cssMapping.sources.map(function (source) {
|
||||
return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'
|
||||
});
|
||||
|
||||
return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
|
||||
}
|
||||
|
||||
return [content].join('\n');
|
||||
}
|
||||
|
||||
// Adapted from convert-source-map (MIT)
|
||||
function toComment(sourceMap) {
|
||||
// eslint-disable-next-line no-undef
|
||||
var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
|
||||
var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;
|
||||
|
||||
return '/*# ' + data + ' */';
|
||||
}
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/index.scss":
|
||||
/*!************************!*\
|
||||
!*** ./src/index.scss ***!
|
||||
\************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
|
||||
var result = __webpack_require__(/*! !../node_modules/_css-loader@1.0.1@css-loader!../node_modules/_resolve-url-loader@3.1.1@resolve-url-loader!../node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js??ref--4-3!./index.scss */ "./node_modules/_css-loader@1.0.1@css-loader/index.js!./node_modules/_resolve-url-loader@3.1.1@resolve-url-loader/index.js!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js?!./src/index.scss");
|
||||
|
||||
if (typeof result === "string") {
|
||||
module.exports = result;
|
||||
} else {
|
||||
module.exports = result.toString();
|
||||
}
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/index.tsx":
|
||||
/*!***********************!*\
|
||||
!*** ./src/index.tsx ***!
|
||||
\***********************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
|
||||
var __extends = (this && this.__extends) || (function () {
|
||||
var extendStatics = function (d, b) {
|
||||
extendStatics = Object.setPrototypeOf ||
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
||||
return extendStatics(d, b);
|
||||
};
|
||||
return function (d, b) {
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||
};
|
||||
})();
|
||||
var __assign = (this && this.__assign) || function () {
|
||||
__assign = Object.assign || function(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
||||
t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
var omi_1 = __webpack_require__(/*! omi */ "omi");
|
||||
var css = __webpack_require__(/*! ./index.scss */ "./src/index.scss");
|
||||
var Badge = /** @class */ (function (_super) {
|
||||
__extends(Badge, _super);
|
||||
function Badge() {
|
||||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
Badge.prototype.installed = function () {
|
||||
};
|
||||
Badge.prototype.uninstall = function () {
|
||||
};
|
||||
Badge.prototype.render = function (props) {
|
||||
if (props.content) {
|
||||
return omi_1.h("div", __assign({}, omi_1.extractClass(props, 'o-badge')),
|
||||
props.children ? props.children[0] : omi_1.h("slot", null),
|
||||
omi_1.h("span", { class: "badge", style: "right:" + props.x * -1 + "px;top:" + props.y + "px;" }, props.content));
|
||||
}
|
||||
if (props.dot) {
|
||||
return (omi_1.h("div", { class: "o-badge" },
|
||||
props.children ? props.children[0] : omi_1.h("slot", null),
|
||||
omi_1.h("span", { style: "right:" + props.x * -1 + "px;top:" + props.y + "px;", class: "circle badge" })));
|
||||
}
|
||||
return omi_1.h("div", { class: "o-badge" }, props.children ? props.children[0] : omi_1.h("slot", null));
|
||||
};
|
||||
Badge.css = css;
|
||||
Badge.defaultProps = {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
Badge.propTypes = {
|
||||
dot: Boolean,
|
||||
content: String,
|
||||
x: Number,
|
||||
y: Number
|
||||
};
|
||||
Badge = __decorate([
|
||||
omi_1.tag('o-badge')
|
||||
], Badge);
|
||||
return Badge;
|
||||
}(omi_1.WeElement));
|
||||
exports.default = Badge;
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "omi":
|
||||
/*!******************************************************************************!*\
|
||||
!*** external {"commonjs":"omi","commonjs2":"omi","amd":"omi","root":"Omi"} ***!
|
||||
\******************************************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = __WEBPACK_EXTERNAL_MODULE_omi__;
|
||||
|
||||
/***/ })
|
||||
|
||||
/******/ })["default"];
|
||||
});
|
||||
//# sourceMappingURL=index.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,6 @@
|
|||
@import '../../common/scss/theme.scss';
|
||||
@import "@omiu/common/theme.scss";
|
||||
|
||||
|
||||
|
||||
.o-badge {
|
||||
position: relative;
|
||||
|
|
@ -6,10 +8,13 @@
|
|||
}
|
||||
|
||||
.badge {
|
||||
background-color: #f95050;
|
||||
color: #ffffff;
|
||||
|
||||
background-color: #F95050;
|
||||
color: #FFFFFF;
|
||||
line-height: 1.2;
|
||||
|
||||
|
||||
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 20px;
|
||||
|
|
@ -24,18 +29,17 @@
|
|||
box-sizing: border-box;
|
||||
transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
||||
align-items: center;
|
||||
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
||||
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
|
||||
font-weight: 500;
|
||||
align-content: center;
|
||||
border-radius: 10px;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
transform-origin: 100% 0%;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.circle {
|
||||
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
|
|
|
|||
|
|
@ -1,23 +1,19 @@
|
|||
import { tag, h, WeElement, extractClass } from 'omi'
|
||||
import * as css from './index.scss'
|
||||
|
||||
// todo: move to common?
|
||||
type OmiProps<T> = T & { children?: any }
|
||||
|
||||
interface Props {
|
||||
dot: boolean
|
||||
content: string
|
||||
x: number
|
||||
y: number
|
||||
dot?: boolean,
|
||||
content?: string,
|
||||
x?: number,
|
||||
y?: number
|
||||
}
|
||||
|
||||
|
||||
@tag('o-badge')
|
||||
export default class Badge extends WeElement<Props> {
|
||||
static css = css.default
|
||||
export default class Badge extends WeElement<Props>{
|
||||
static css = css
|
||||
|
||||
static defaultProps = {
|
||||
dot: false,
|
||||
content: '',
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
|
|
@ -29,40 +25,33 @@ export default class Badge extends WeElement<Props> {
|
|||
y: Number
|
||||
}
|
||||
|
||||
installed() {}
|
||||
|
||||
uninstall() {}
|
||||
installed() {
|
||||
|
||||
render(props: OmiProps<Props>) {
|
||||
}
|
||||
|
||||
uninstall() {
|
||||
|
||||
}
|
||||
|
||||
|
||||
render(props) {
|
||||
if (props.content) {
|
||||
return (
|
||||
<div {...extractClass(props, 'o-badge')}>
|
||||
{props.children ? props.children[0] : <slot></slot>}
|
||||
<span
|
||||
class="badge"
|
||||
style={`right:${props.x * -1}px;top:${props.y}px;`}
|
||||
>
|
||||
{props.content}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
return <div {...extractClass(props, 'o-badge')}>
|
||||
{props.children ? props.children[0] : <slot></slot>}
|
||||
<span class="badge" style={`right:${props.x * -1}px;top:${props.y}px;`}>{props.content}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
if (props.dot) {
|
||||
return (
|
||||
<div class="o-badge">
|
||||
{props.children ? props.children[0] : <slot></slot>}
|
||||
<span
|
||||
style={`right:${props.x * -1}px;top:${props.y}px;`}
|
||||
class="circle badge"
|
||||
></span>
|
||||
<span style={`right:${props.x * -1}px;top:${props.y}px;`} class="circle badge"></span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div class="o-badge">
|
||||
{props.children ? props.children[0] : <slot></slot>}
|
||||
</div>
|
||||
)
|
||||
return <div class="o-badge">{props.children ? props.children[0] : <slot></slot>}</div>
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
import { html, fixture, expect } from '@open-wc/testing'
|
||||
|
||||
import '../dist/index.es.js'
|
||||
|
||||
describe('o-badge ', () => {
|
||||
it('default prop', async () => {
|
||||
const el = await fixture(html`<o-badge><div>abc</div></o-badge>`)
|
||||
expect(el.shadowRoot.innerHTML).to.equal(
|
||||
`<div class="o-badge"><slot></slot></div>`
|
||||
)
|
||||
})
|
||||
})
|
||||
|
|
@ -1,29 +1,14 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"module": "esnext",
|
||||
"lib": [
|
||||
"es2017",
|
||||
"dom",
|
||||
"dom.iterable"
|
||||
],
|
||||
"declaration": true,
|
||||
"emitDeclarationOnly": true,
|
||||
"outDir": "./types",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"moduleResolution": "node",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"baseUrl": ".",
|
||||
"experimentalDecorators": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"jsx": "react",
|
||||
"jsxFactory": "h",
|
||||
"target": "es5",
|
||||
"allowJs": true,
|
||||
"declaration": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx"
|
||||
],
|
||||
"exclude": []
|
||||
}
|
||||
"src/**/*"
|
||||
]
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import { resolve } from 'path'
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
build: {
|
||||
lib: {
|
||||
entry: resolve(__dirname, 'src/index.tsx'),
|
||||
name: 'index',
|
||||
formats: ['es'],
|
||||
fileName: (format) => `index.${format}.js`
|
||||
},
|
||||
rollupOptions: {
|
||||
external: /^omi/,
|
||||
input: {
|
||||
main: resolve(__dirname, 'index.html'),
|
||||
admin: resolve(__dirname, 'demo.html')
|
||||
}
|
||||
}
|
||||
},
|
||||
esbuild: {
|
||||
jsxFactory: 'h',
|
||||
jsxFragment: 'h.f'
|
||||
}
|
||||
})
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
types
|
||||
*.local
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
# Button
|
||||
## Button
|
||||
|
||||
Click or touch it to trigger an operation. The encapsulated logic is triggered in response to user clicks.
|
||||
Button
|
||||
|
||||
* [→ CodePen](https://codepen.io/omijs/pen/LYppwYG)
|
||||
|
||||
|
|
@ -44,7 +44,7 @@ Or use script tag to ref it.
|
|||
}
|
||||
```
|
||||
|
||||
### Default Props
|
||||
### 默认属性
|
||||
|
||||
```tsx
|
||||
{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,135 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
|
||||
<meta charset="UTF-8" />
|
||||
<title>Omiu Button</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<a href="https://github.com/Tencent/omi" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;">
|
||||
<img src="//alloyteam.github.io/github.png" alt="">
|
||||
</a>
|
||||
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
|
||||
<script src="../../../common//src/index.js"></script>
|
||||
<script src="../../src/index.js"></script>
|
||||
<script src="../../../icon/ac-unit-outlined.js"></script>
|
||||
<script src="../../../icon/accessible-rounded.js"></script>
|
||||
<style>
|
||||
o-button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div>
|
||||
<o-button text="Default"></o-button>
|
||||
<o-button type="primary">Primary</o-button>
|
||||
|
||||
<o-button type="danger">Danger</o-button>
|
||||
|
||||
<o-button type="primary">
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined> Icon
|
||||
</o-button>
|
||||
<o-button type="danger">Icon <o-icon-accessible-rounded></o-icon-accessible-rounded>
|
||||
</o-button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<o-button disabled>Default</o-button>
|
||||
<o-button disabled type="primary">Primary</o-button>
|
||||
|
||||
<o-button disabled type="danger">Danger</o-button>
|
||||
|
||||
<o-button disabled type="primary">
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined> Icon
|
||||
</o-button>
|
||||
<o-button disabled type="danger">Icon <o-icon-accessible-rounded></o-icon-accessible-rounded>
|
||||
</o-button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<o-button plain>Plain</o-button>
|
||||
<o-button plain type="primary">Primary</o-button>
|
||||
|
||||
<o-button plain type="danger">Danger</o-button>
|
||||
|
||||
<o-button plain type="primary">
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined> Icon
|
||||
</o-button>
|
||||
<o-button plain type="danger">Icon <o-icon-accessible-rounded></o-icon-accessible-rounded>
|
||||
</o-button>
|
||||
|
||||
|
||||
<o-button plain type="primary">
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
|
||||
</o-button>
|
||||
<o-button plain type="danger">
|
||||
<o-icon-accessible-rounded></o-icon-accessible-rounded>
|
||||
</o-button>
|
||||
|
||||
<o-button plain type="danger" size="medium">
|
||||
<o-icon-accessible-rounded></o-icon-accessible-rounded>
|
||||
</o-button>
|
||||
<o-button plain type="danger" size="small">
|
||||
<o-icon-accessible-rounded></o-icon-accessible-rounded>
|
||||
</o-button>
|
||||
<o-button plain type="danger" size="mini">
|
||||
<o-icon-accessible-rounded></o-icon-accessible-rounded>
|
||||
</o-button>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<o-button plain loading>Plain</o-button>
|
||||
<o-button plain loading type="primary">Primary</o-button>
|
||||
|
||||
<o-button plain loading type="danger">Danger</o-button>
|
||||
|
||||
|
||||
<o-button plain loading type="primary">
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
|
||||
</o-button>
|
||||
<o-button plain loading type="danger">
|
||||
<o-icon-accessible-rounded></o-icon-accessible-rounded>
|
||||
</o-button>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<o-button>Default</o-button>
|
||||
<o-button size="medium">Medium</o-button>
|
||||
<o-button size="small">Small</o-button>
|
||||
<o-button size="mini">Mini</o-button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<o-button round>Default</o-button>
|
||||
<o-button round size="medium">Medium</o-button>
|
||||
<o-button round size="small">Small</o-button>
|
||||
<o-button round size="mini">Mini</o-button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<o-button circle>
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
|
||||
</o-button>
|
||||
<o-button type="primary" circle>
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
|
||||
</o-button>
|
||||
<o-button type="danger" circle>
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
|
||||
</o-button>
|
||||
<o-button type="primary" plain circle>
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
|
||||
</o-button>
|
||||
<o-button type="danger" plain circle>
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
|
||||
</o-button>
|
||||
</div>
|
||||
|
||||
<o-button block>Block button</o-button>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,140 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Omiu Button</title>
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a
|
||||
href="https://github.com/Tencent/omi"
|
||||
target="_blank"
|
||||
style="position: fixed; right: 0; top: 0; z-index: 3"
|
||||
>
|
||||
<img src="//alloyteam.github.io/github.png" alt="" />
|
||||
</a>
|
||||
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
|
||||
<script src="https://tencent.github.io/omi/components/icon/ac-unit-outlined.js"></script>
|
||||
<script src="https://tencent.github.io/omi/components/icon/accessible-rounded.js"></script>
|
||||
<style>
|
||||
o-button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<o-button text="Default"></o-button>
|
||||
<o-button type="primary">Primary</o-button>
|
||||
<o-button type="warning">Warning</o-button>
|
||||
<o-button type="danger">Danger</o-button>
|
||||
<o-button type="info">Info</o-button>
|
||||
|
||||
<o-button type="primary">
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined> Icon
|
||||
</o-button>
|
||||
<o-button type="danger"
|
||||
>Icon <o-icon-accessible-rounded></o-icon-accessible-rounded>
|
||||
</o-button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<o-button disabled>Default</o-button>
|
||||
<o-button disabled type="primary">Primary</o-button>
|
||||
<o-button disabled type="warning">Warning</o-button>
|
||||
<o-button disabled type="danger">Danger</o-button>
|
||||
<o-button disabled type="info">Info</o-button>
|
||||
|
||||
<o-button disabled type="primary">
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined> Icon
|
||||
</o-button>
|
||||
<o-button disabled type="danger"
|
||||
>Icon <o-icon-accessible-rounded></o-icon-accessible-rounded>
|
||||
</o-button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<o-button plain>Plain</o-button>
|
||||
<o-button plain type="primary">Primary</o-button>
|
||||
<o-button plain type="warning">Warning</o-button>
|
||||
<o-button plain type="danger">Danger</o-button>
|
||||
<o-button plain type="info">Info</o-button>
|
||||
|
||||
<o-button plain type="primary">
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined> Icon
|
||||
</o-button>
|
||||
<o-button plain type="danger"
|
||||
>Icon <o-icon-accessible-rounded></o-icon-accessible-rounded>
|
||||
</o-button>
|
||||
|
||||
<o-button plain type="primary">
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
|
||||
</o-button>
|
||||
<o-button plain type="danger">
|
||||
<o-icon-accessible-rounded></o-icon-accessible-rounded>
|
||||
</o-button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<o-button plain loading>Plain</o-button>
|
||||
<o-button plain loading type="primary">Primary</o-button>
|
||||
<o-button plain loading type="warning">Warning</o-button>
|
||||
<o-button plain loading type="danger">Danger</o-button>
|
||||
<o-button plain loading type="info">Info</o-button>
|
||||
|
||||
<o-button plain loading type="primary">
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
|
||||
</o-button>
|
||||
<o-button plain loading type="danger">
|
||||
<o-icon-accessible-rounded></o-icon-accessible-rounded>
|
||||
</o-button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<o-button>Default</o-button>
|
||||
<o-button size="medium">Medium</o-button>
|
||||
<o-button size="small">Small</o-button>
|
||||
<o-button size="mini">Mini</o-button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<o-button round>Default</o-button>
|
||||
<o-button round size="medium">Medium</o-button>
|
||||
<o-button round size="small">Small</o-button>
|
||||
<o-button round size="mini">Mini</o-button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<o-button circle>
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
|
||||
</o-button>
|
||||
<o-button type="primary" circle>
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
|
||||
</o-button>
|
||||
<o-button type="warning" circle>
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
|
||||
</o-button>
|
||||
<o-button type="danger" circle>
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
|
||||
</o-button>
|
||||
<o-button type="info" circle>
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
|
||||
</o-button>
|
||||
<o-button type="primary" plain circle>
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
|
||||
</o-button>
|
||||
<o-button type="warning" plain circle>
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
|
||||
</o-button>
|
||||
<o-button type="danger" plain circle>
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
|
||||
</o-button>
|
||||
<o-button type="info" plain circle>
|
||||
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
|
||||
</o-button>
|
||||
</div>
|
||||
|
||||
<o-button block>Block button</o-button>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,38 +1,31 @@
|
|||
{
|
||||
"name": "@omiu/button",
|
||||
"version": "0.0.10",
|
||||
"main": "dist/index.es.js",
|
||||
"exports": {
|
||||
".": "./dist/index.es.js"
|
||||
},
|
||||
"types": "types/index.d.ts",
|
||||
"description": "Click or touch it to trigger an operation. The encapsulated logic is triggered in response to user clicks.",
|
||||
"version": "0.0.8",
|
||||
"description": "Button",
|
||||
"docsExtend": {
|
||||
"cnName": "按钮",
|
||||
"cnDescription": "点击或触摸触发一个操作的元素。响应用户点击操作，触发封装的逻辑。",
|
||||
"cnDescription": "按钮",
|
||||
"codepen": "LYppwYG",
|
||||
"codepenHeight": 351,
|
||||
"codepenDefaultTab": "html,result"
|
||||
},
|
||||
"main": "src/index.js",
|
||||
"module": "src/index.esm.js",
|
||||
"types": "src/index.d.ts",
|
||||
"scripts": {
|
||||
"start": "yarn watch & vite",
|
||||
"dev": "yarn watch & vite",
|
||||
"build": "vite build && yarn build:scss",
|
||||
"build:demo": "vite build",
|
||||
"build:scss": "sass src/index.scss src/index.css",
|
||||
"watch": "sass --watch src/index.scss src/index.css --no-source-map",
|
||||
"pretest": "yarn build",
|
||||
"test": "web-test-runner \"test/*.js\" --node-resolve",
|
||||
"docs": "node ./scripts/docs-gen.js",
|
||||
"test:watch": "web-test-runner \"test/*.test.js\" --node-resolve --watch"
|
||||
"start": "node ./scripts/webpack.build.js -- demo",
|
||||
"build": "node ./scripts/webpack.build.js -- build && rollup -c scripts/rollup.config.js && node ./scripts/rollup.end.js"
|
||||
},
|
||||
"typings": "./dist/index.d.ts",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/omi.git"
|
||||
},
|
||||
"files": [
|
||||
"src",
|
||||
"dist",
|
||||
"types"
|
||||
"typings.json"
|
||||
],
|
||||
"keywords": [
|
||||
"omiu",
|
||||
|
|
@ -52,23 +45,57 @@
|
|||
"url": "https://github.com/Tencent/omi/issues"
|
||||
},
|
||||
"homepage": "http://omijs.org",
|
||||
"dependencies": {
|
||||
"@omiu/common": "latest",
|
||||
"omi": "latest"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@open-wc/testing": "^2.5.33",
|
||||
"@types/node": "^16.4.7",
|
||||
"@web/test-runner": "^0.13.13",
|
||||
"node-watch": "^0.7.1",
|
||||
"sass": "^1.36.0",
|
||||
"typescript": "^4.3.2",
|
||||
"vite": "^2.4.3"
|
||||
"@rollup/plugin-commonjs": "^11.1.0",
|
||||
"css": "^2.2.4",
|
||||
"css-loader": "^1.0.1",
|
||||
"file": "^0.2.2",
|
||||
"file-loader": "^2.0.0",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"less": "^3.9.0",
|
||||
"less-loader": "^4.1.0",
|
||||
"mini-css-extract-plugin": "^0.4.5",
|
||||
"node-sass": "^4.12.0",
|
||||
"omi": "latest",
|
||||
"omio": "latest",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.1",
|
||||
"progress-bar-webpack-plugin": "^2.1.0",
|
||||
"resolve-url-loader": "^3.1.0",
|
||||
"rollup": "^2.7.1",
|
||||
"rollup-plugin-license": "^2.0.0",
|
||||
"rollup-plugin-node-resolve": "^5.2.0",
|
||||
"rollup-plugin-scss": "^2.4.0",
|
||||
"rollup-plugin-typescript": "^1.0.1",
|
||||
"sass-loader": "^7.1.0",
|
||||
"style-loader": "^0.23.1",
|
||||
"to-string-loader": "^1.1.5",
|
||||
"ts-loader": "^5.4.4",
|
||||
"typescript": "^3.2.1",
|
||||
"url": "^0.11.0",
|
||||
"url-loader": "^1.1.2",
|
||||
"webpack": "^4.42.1",
|
||||
"webpack-cli": "^3.3.1",
|
||||
"webpack-dev-server": "^3.1.10",
|
||||
"webpack-merge": "^4.1.4"
|
||||
},
|
||||
"greenkeeper": {
|
||||
"ignore": [
|
||||
"babel-cli",
|
||||
"babel-core",
|
||||
"babel-eslint",
|
||||
"babel-loader",
|
||||
"jscodeshift",
|
||||
"rollup-plugin-babel"
|
||||
]
|
||||
},
|
||||
"prettier": {
|
||||
"singleQuote": true,
|
||||
"semi": false,
|
||||
"tabWidth": 2,
|
||||
"useTabs": false
|
||||
},
|
||||
"dependencies": {
|
||||
"@omiu/common": "latest",
|
||||
"omi": "latest"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,57 +3,40 @@ const fs = require('fs')
|
|||
|
||||
const content = fs.readFileSync('./src/index.tsx', 'utf-8')
|
||||
|
||||
const props = extract('interface Props {', content).replace(
|
||||
'interface Props ',
|
||||
''
|
||||
)
|
||||
const props = extract('interface Props {', content).replace('interface Props ', '')
|
||||
|
||||
const defaultProps = extract('static defaultProps = {', content)
|
||||
.replace('static defaultProps = ', '')
|
||||
.replace(/ }/g, '}')
|
||||
.replace(/ /g, ' ')
|
||||
const defaultProps = extract('static defaultProps = {', content).replace('static defaultProps = ', '').replace(/ }/g, '}').replace(/ /g, ' ')
|
||||
|
||||
const eventContexts = content.match(
|
||||
new RegExp('this.fire\\([\\s\\S]*?[,|)]', 'g')
|
||||
)
|
||||
|
||||
const eventContexts = content.match(new RegExp('this.fire\\([\\s\\S]*?[,|)]', 'g'))
|
||||
const package = require('../package.json')
|
||||
const packageName = package.name
|
||||
const name = packageName.split('/')[1]
|
||||
|
||||
const upperCaseName = name
|
||||
.split('-')
|
||||
.map((item) => {
|
||||
return item.charAt(0).toUpperCase() + item.slice(1)
|
||||
})
|
||||
.join('')
|
||||
const upperCaseName = name.split('-').map(item => {
|
||||
return item.charAt(0).toUpperCase() + item.slice(1)
|
||||
}).join('')
|
||||
const tagName = 'o-' + name
|
||||
|
||||
//fire 附近打标标记 event.detail 类型？
|
||||
let events, eventMap
|
||||
if (eventContexts) {
|
||||
events = eventContexts.map((event) => {
|
||||
return event.replace("this.fire('", '').replace("',", '').replace("')", '')
|
||||
|
||||
events = eventContexts.map(event => {
|
||||
return event.replace('this.fire(\'', '').replace('\',', '').replace('\')', '')
|
||||
})
|
||||
eventMap = {}
|
||||
events.forEach((event) => {
|
||||
events.forEach(event => {
|
||||
eventMap[event] = 1
|
||||
})
|
||||
}
|
||||
|
||||
const cnContent = `# ${upperCaseName} ${package.docsExtend.cnName}
|
||||
const cnContent = `## ${upperCaseName} ${package.docsExtend.cnName}
|
||||
|
||||
${package.docsExtend.cnDescription}
|
||||
|
||||
<iframe height="${
|
||||
package.docsExtend.codepenHeight
|
||||
}" style="width: 100%;" scrolling="no" title="OMIU ${upperCaseName}" src="https://codepen.io/omijs/embed/${
|
||||
package.docsExtend.codepen
|
||||
}?height=${package.docsExtend.codepenHeight}&theme-id=default&default-tab=${
|
||||
package.docsExtend.codepenDefaultTab
|
||||
}" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
|
||||
See the Pen <a href='https://codepen.io/omijs/pen/${
|
||||
package.docsExtend.codepen
|
||||
}'>OMIU Checkbox</a> by OMI
|
||||
<iframe height="${package.docsExtend.codepenHeight}" style="width: 100%;" scrolling="no" title="OMIU ${upperCaseName}" src="https://codepen.io/omijs/embed/${package.docsExtend.codepen}?height=${package.docsExtend.codepenHeight}&theme-id=default&default-tab=${package.docsExtend.codepenDefaultTab}" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
|
||||
See the Pen <a href='https://codepen.io/omijs/pen/${package.docsExtend.codepen}'>OMIU Checkbox</a> by OMI
|
||||
(<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
|
|
@ -85,35 +68,21 @@ import '${packageName}'
|
|||
${props}
|
||||
\`\`\`
|
||||
|
||||
${defaultProps ? '### 默认属性\n' : ''}${defaultProps ? '```tsx\n' : ''}${
|
||||
defaultProps ? defaultProps : ''
|
||||
}
|
||||
${defaultProps ? '```\n' : ''}${eventMap ? '### 事件\n' : ''}${
|
||||
eventMap
|
||||
? Object.keys(eventMap)
|
||||
.map((event) => {
|
||||
return `* ${event}\n`
|
||||
})
|
||||
.join('')
|
||||
: ''
|
||||
}`
|
||||
${defaultProps ? '### 默认属性\n' : ''}${defaultProps ? '\`\`\`tsx\n' : ''}${defaultProps ? defaultProps : ''}
|
||||
${defaultProps ? '\`\`\`\n' : ''}${eventMap ? '### 事件\n' : ''}${eventMap ? Object.keys(eventMap).map(event => {
|
||||
return `* ${event}\n`
|
||||
}).join('') : ''}`
|
||||
|
||||
fs.writeFileSync(`../docs-src/src/docs/zh-cn/${name}.md`, cnContent)
|
||||
|
||||
const enContent = `# ${upperCaseName}
|
||||
|
||||
|
||||
const enContent = `## ${upperCaseName}
|
||||
|
||||
${package.description}
|
||||
|
||||
<iframe height="${
|
||||
package.docsExtend.codepenHeight
|
||||
}" style="width: 100%;" scrolling="no" title="OMIU ${upperCaseName}" src="https://codepen.io/omijs/embed/${
|
||||
package.docsExtend.codepen
|
||||
}?height=${package.docsExtend.codepenHeight}&theme-id=default&default-tab=${
|
||||
package.docsExtend.codepenDefaultTab
|
||||
}" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
|
||||
See the Pen <a href='https://codepen.io/omijs/pen/${
|
||||
package.docsExtend.codepen
|
||||
}'>OMIU Checkbox</a> by OMI
|
||||
<iframe height="${package.docsExtend.codepenHeight}" style="width: 100%;" scrolling="no" title="OMIU ${upperCaseName}" src="https://codepen.io/omijs/embed/${package.docsExtend.codepen}?height=${package.docsExtend.codepenHeight}&theme-id=default&default-tab=${package.docsExtend.codepenDefaultTab}" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
|
||||
See the Pen <a href='https://codepen.io/omijs/pen/${package.docsExtend.codepen}'>OMIU Checkbox</a> by OMI
|
||||
(<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
|
|
@ -144,32 +113,22 @@ Or use script tag to ref it.
|
|||
${props}
|
||||
\`\`\`
|
||||
|
||||
${defaultProps ? '### Default Props\n\n' : ''}${
|
||||
defaultProps ? '```tsx\n' : ''
|
||||
}${defaultProps ? defaultProps : ''}
|
||||
${defaultProps ? '```\n' : ''}${eventMap ? '### Events\n\n' : ''}${
|
||||
eventMap
|
||||
? Object.keys(eventMap)
|
||||
.map((event) => {
|
||||
return `* ${event}\n`
|
||||
})
|
||||
.join('')
|
||||
: ''
|
||||
}`
|
||||
${defaultProps ? '### defaultProps\n\n' : ''}${defaultProps ? '\`\`\`tsx\n' : ''}${defaultProps ? defaultProps : ''}
|
||||
${defaultProps ? '\`\`\`\n' : ''}${eventMap ? '### Events\n\n' : ''}${eventMap ? Object.keys(eventMap).map(event => {
|
||||
return `* ${event}\n`
|
||||
}).join('') : ''}`
|
||||
|
||||
|
||||
fs.writeFileSync(`../docs-src/src/docs/en/${name}.md`, enContent)
|
||||
|
||||
fs.writeFileSync(
|
||||
`../${name}/README.md`,
|
||||
enContent.replace(
|
||||
/<iframe[\s\S]*?<\/iframe>/,
|
||||
`* [→ CodePen](https://codepen.io/omijs/pen/${package.docsExtend.codepen})`
|
||||
)
|
||||
)
|
||||
|
||||
fs.writeFileSync(`../${name}/README.md`, enContent.replace(/<iframe[\s\S]*?<\/iframe>/, `* [→ CodePen](https://codepen.io/omijs/pen/${package.docsExtend.codepen})`))
|
||||
// console.log(props)
|
||||
// console.log(defaultProps)
|
||||
// console.log(Object.keys(eventMap))
|
||||
|
||||
|
||||
|
||||
function extract(startWith, str) {
|
||||
const start = str.indexOf(startWith)
|
||||
if (start === -1) return ''
|
||||
|
|
@ -178,6 +137,7 @@ function extract(startWith, str) {
|
|||
while (end < str.length) {
|
||||
if (str[end] === '}') {
|
||||
if (stackCount === 1) {
|
||||
|
||||
break
|
||||
} else {
|
||||
stackCount--
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
declare module '*.svg'
|
||||
declare module '*.png'
|
||||
declare module '*.jpg'
|
||||
declare module '*.jpeg'
|
||||
declare module '*.gif'
|
||||
declare module '*.bmp'
|
||||
declare module '*.tiff'
|
||||
declare module '*.less'
|
||||
declare module '*.css'
|
||||
declare module '*.scss'
|
||||
declare module '*.sass'
|
||||
declare module '*.webp'
|
||||
|
|
@ -1,10 +1,8 @@
|
|||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
display: inline-block; }
|
||||
|
||||
:host([block]) {
|
||||
display: block;
|
||||
}
|
||||
display: block; }
|
||||
|
||||
.o-button {
|
||||
display: inline-block;
|
||||
|
|
@ -19,202 +17,136 @@
|
|||
box-sizing: border-box;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
transition: 0.1s;
|
||||
transition: .1s;
|
||||
font-weight: 500;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
border-radius: 4px; }
|
||||
|
||||
.o-button:hover {
|
||||
border-color: rgba(7, 193, 96, 0.382);
|
||||
border-color: var(--o-primary-fade-some, rgba(7, 193, 96, 0.382));
|
||||
border-color: var(--o-primary-hover-border, rgba(7, 193, 96, 0.382));
|
||||
color: #07c160;
|
||||
color: var(--o-primary, #07c160);
|
||||
background-color: rgba(7, 193, 96, 0.1);
|
||||
background-color: var(--o-primary-fade-lot, rgba(7, 193, 96, 0.1));
|
||||
}
|
||||
background-color: var(--o-primary-hover-bg, rgba(7, 193, 96, 0.1)); }
|
||||
|
||||
.o-button:active {
|
||||
color: #07c160;
|
||||
color: var(--o-primary, #07c160);
|
||||
border-color: #07c160;
|
||||
border-color: var(--o-primary, #07c160);
|
||||
outline: none;
|
||||
}
|
||||
.o-button-medium {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.o-button-small {
|
||||
padding: 9px 15px;
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.o-button-mini {
|
||||
padding: 7px 15px;
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.o-button.is-round {
|
||||
border-radius: 20px;
|
||||
}
|
||||
.o-button.is-circle {
|
||||
border-radius: 20px;
|
||||
padding: 12px;
|
||||
}
|
||||
.o-button.is-disabled, .o-button.is-disabled:focus, .o-button.is-disabled:hover {
|
||||
color: #c0c4cc;
|
||||
cursor: not-allowed;
|
||||
background-image: none;
|
||||
background-color: #fff;
|
||||
border-color: #ebeef5;
|
||||
}
|
||||
.o-button.is-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
outline: none; }
|
||||
|
||||
.o-button-primary {
|
||||
color: #fff;
|
||||
background-color: #07c160;
|
||||
border-color: #07c160;
|
||||
background-color: var(--o-primary, #07c160);
|
||||
border-color: var(--o-primary, #07c160);
|
||||
}
|
||||
.o-button-primary:disabled, .o-button-primary:disabled:hover {
|
||||
background-color: var(--o-primary-fade-lot, rgba(7, 193, 96, 0.1));
|
||||
}
|
||||
border-color: var(--o-primary, #07c160); }
|
||||
|
||||
.o-button-primary.is-plain {
|
||||
color: #07c160;
|
||||
color: var(--o-primary, #07c160);
|
||||
background-color: rgba(7, 193, 96, 0.1);
|
||||
background-color: var(--o-primary-fade-lot, rgba(7, 193, 96, 0.1));
|
||||
border-color: var(--o-primary-fade-some, rgba(7, 193, 96, 0.382));
|
||||
}
|
||||
border-color: rgba(7, 193, 96, 0.382);
|
||||
border-color: var(--o-primary-fade-some, rgba(7, 193, 96, 0.382)); }
|
||||
|
||||
.o-button-primary:hover {
|
||||
background-color: rgba(7, 193, 96, 0.618);
|
||||
border-color: rgba(7, 193, 96, 0.618);
|
||||
background-color: var(--o-primary-fade-little, rgba(7, 193, 96, 0.618));
|
||||
border-color: var(--o-primary-fade-little, rgba(7, 193, 96, 0.618));
|
||||
color: #fff;
|
||||
}
|
||||
color: #fff; }
|
||||
|
||||
.o-button-primary:active {
|
||||
background-color: #059048;
|
||||
border-color: #059048;
|
||||
background-color: var(--o-primary-active, #059048);
|
||||
border-color: var(--o-primary-active, #059048);
|
||||
color: #fff;
|
||||
}
|
||||
.o-button-success {
|
||||
color: #fff;
|
||||
background-color: var(--o-success, #07c160);
|
||||
border-color: var(--o-success, #07c160);
|
||||
}
|
||||
.o-button-success:disabled, .o-button-success:disabled:hover {
|
||||
background-color: var(--o-success-fade-lot, rgba(7, 193, 96, 0.1));
|
||||
}
|
||||
.o-button-success.is-plain {
|
||||
color: var(--o-success, #07c160);
|
||||
background-color: var(--o-success-fade-lot, rgba(7, 193, 96, 0.1));
|
||||
border-color: var(--o-success-fade-some, rgba(7, 193, 96, 0.382));
|
||||
}
|
||||
.o-button-success:hover {
|
||||
background-color: var(--o-success-fade-little, rgba(7, 193, 96, 0.618));
|
||||
border-color: var(--o-success-fade-little, rgba(7, 193, 96, 0.618));
|
||||
color: #fff;
|
||||
}
|
||||
.o-button-success:active {
|
||||
background-color: var(--o-success-active, #059048);
|
||||
border-color: var(--o-success-active, #059048);
|
||||
color: #fff;
|
||||
}
|
||||
.o-button-warning {
|
||||
color: #fff;
|
||||
background-color: var(--o-warning, #f2711c);
|
||||
border-color: var(--o-warning, #f2711c);
|
||||
}
|
||||
.o-button-warning:disabled, .o-button-warning:disabled:hover {
|
||||
background-color: var(--o-warning-fade-lot, rgba(242, 113, 28, 0.1));
|
||||
}
|
||||
.o-button-warning.is-plain {
|
||||
color: var(--o-warning, #f2711c);
|
||||
background-color: var(--o-warning-fade-lot, rgba(242, 113, 28, 0.1));
|
||||
border-color: var(--o-warning-fade-some, rgba(242, 113, 28, 0.382));
|
||||
}
|
||||
.o-button-warning:hover {
|
||||
background-color: var(--o-warning-fade-little, rgba(242, 113, 28, 0.618));
|
||||
border-color: var(--o-warning-fade-little, rgba(242, 113, 28, 0.618));
|
||||
color: #fff;
|
||||
}
|
||||
.o-button-warning:active {
|
||||
background-color: var(--o-warning-active, #cf590c);
|
||||
border-color: var(--o-warning-active, #cf590c);
|
||||
color: #fff;
|
||||
}
|
||||
color: #fff; }
|
||||
|
||||
.o-button-danger {
|
||||
color: #fff;
|
||||
background-color: #fa5151;
|
||||
border-color: #fa5151;
|
||||
background-color: var(--o-danger, #fa5151);
|
||||
border-color: var(--o-danger, #fa5151);
|
||||
}
|
||||
.o-button-danger:disabled, .o-button-danger:disabled:hover {
|
||||
background-color: var(--o-danger-fade-lot, rgba(250, 81, 81, 0.1));
|
||||
}
|
||||
border-color: var(--o-danger, #fa5151); }
|
||||
|
||||
.o-button-danger.is-plain {
|
||||
color: #fa5151;
|
||||
color: var(--o-danger, #fa5151);
|
||||
background-color: rgba(250, 81, 81, 0.1);
|
||||
background-color: var(--o-danger-fade-lot, rgba(250, 81, 81, 0.1));
|
||||
border-color: var(--o-danger-fade-some, rgba(250, 81, 81, 0.382));
|
||||
}
|
||||
border-color: rgba(250, 81, 81, 0.382);
|
||||
border-color: var(--o-danger-fade-some, rgba(250, 81, 81, 0.382)); }
|
||||
|
||||
.o-button-danger:hover {
|
||||
background-color: rgba(250, 81, 81, 0.618);
|
||||
border-color: rgba(250, 81, 81, 0.618);
|
||||
background-color: var(--o-danger-fade-little, rgba(250, 81, 81, 0.618));
|
||||
border-color: var(--o-danger-fade-little, rgba(250, 81, 81, 0.618));
|
||||
color: #fff;
|
||||
}
|
||||
color: #fff; }
|
||||
|
||||
.o-button-danger:active {
|
||||
background-color: #f91f1f;
|
||||
border-color: #f91f1f;
|
||||
background-color: var(--o-danger-active, #f91f1f);
|
||||
border-color: var(--o-danger-active, #f91f1f);
|
||||
color: #fff;
|
||||
}
|
||||
.o-button-info {
|
||||
color: #fff;
|
||||
background-color: var(--o-info, #42b8dd);
|
||||
border-color: var(--o-info, #42b8dd);
|
||||
}
|
||||
.o-button-info:disabled, .o-button-info:disabled:hover {
|
||||
background-color: var(--o-info-fade-lot, rgba(66, 184, 221, 0.1));
|
||||
}
|
||||
.o-button-info.is-plain {
|
||||
color: var(--o-info, #42b8dd);
|
||||
background-color: var(--o-info-fade-lot, rgba(66, 184, 221, 0.1));
|
||||
border-color: var(--o-info-fade-some, rgba(66, 184, 221, 0.382));
|
||||
}
|
||||
.o-button-info:hover {
|
||||
background-color: var(--o-info-fade-little, rgba(66, 184, 221, 0.618));
|
||||
border-color: var(--o-info-fade-little, rgba(66, 184, 221, 0.618));
|
||||
color: #fff;
|
||||
}
|
||||
.o-button-info:active {
|
||||
background-color: var(--o-info-active, #24a1c8);
|
||||
border-color: var(--o-info-active, #24a1c8);
|
||||
color: #fff;
|
||||
}
|
||||
color: #fff; }
|
||||
|
||||
.loading {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: inline-block;
|
||||
animation: loading 1s steps(12, end) infinite;
|
||||
vertical-align: -0.125em;
|
||||
}
|
||||
vertical-align: -0.125em; }
|
||||
|
||||
@-webkit-keyframes loading {
|
||||
0% {
|
||||
transform: rotate3d(0, 0, 1, 0deg);
|
||||
}
|
||||
transform: rotate3d(0, 0, 1, 0deg); }
|
||||
100% {
|
||||
transform: rotate3d(0, 0, 1, 360deg);
|
||||
}
|
||||
}
|
||||
transform: rotate3d(0, 0, 1, 360deg); } }
|
||||
|
||||
@keyframes loading {
|
||||
0% {
|
||||
transform: rotate3d(0, 0, 1, 0deg);
|
||||
}
|
||||
transform: rotate3d(0, 0, 1, 0deg); }
|
||||
100% {
|
||||
transform: rotate3d(0, 0, 1, 360deg);
|
||||
}
|
||||
}
|
||||
transform: rotate3d(0, 0, 1, 360deg); } }
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
.o-button-medium {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px; }
|
||||
|
||||
.o-button-small {
|
||||
padding: 9px 15px;
|
||||
font-size: 12px;
|
||||
border-radius: 3px; }
|
||||
|
||||
.o-button-mini {
|
||||
padding: 7px 15px;
|
||||
font-size: 12px;
|
||||
border-radius: 3px; }
|
||||
|
||||
.o-button.is-round {
|
||||
border-radius: 20px; }
|
||||
|
||||
.o-button.is-circle {
|
||||
border-radius: 20px;
|
||||
padding: 12px; }
|
||||
|
||||
.o-button.is-disabled, .o-button.is-disabled:focus, .o-button.is-disabled:hover {
|
||||
color: #c0c4cc;
|
||||
cursor: not-allowed;
|
||||
background-image: none;
|
||||
background-color: #fff;
|
||||
border-color: #ebeef5; }
|
||||
|
||||
.o-button.is-block {
|
||||
display: block;
|
||||
width: 100%; }
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
{
|
||||
"version": 3,
|
||||
"sourceRoot": "",
|
||||
"sources": [
|
||||
"index.scss",
|
||||
"../../common/scss/theme.scss"
|
||||
],
|
||||
"names": [],
|
||||
"mappings": "AAkCA;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,cC1DkB;ED2DlB;EACA,OC/DQ;EDgER;EACA,kBC5DiB;ED6DjB;;AAGF;EACE,OCtEQ;EDuER;EACA,cCxEQ;EDyER;EACA;;AAIA;EACE;EACA;EACA;;AAHF;EACE;EACA;EACA;;AAHF;EACE;EACA;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;;AAGF;EAGE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIA;EACE;EACA;EACA;;AAEA;EAEE;;AAOJ;EACE;EACA;EAIA;;AAMF;EACE;EAIA;EAIA;;AAGF;EACE;EAIA;EAIA;;AA/CF;EACE;EACA;EACA;;AAEA;EAEE;;AAOJ;EACE;EACA;EAIA;;AAMF;EACE;EAIA;EAIA;;AAGF;EACE;EAIA;EAIA;;AA/CF;EACE;EACA;EACA;;AAEA;EAEE;;AAOJ;EACE;EACA;EAIA;;AAMF;EACE;EAIA;EAIA;;AAGF;EACE;EAIA;EAIA;;AA/CF;EACE;EACA;EACA;;AAEA;EAEE;;AAOJ;EACE;EACA;EAIA;;AAMF;EACE;EAIA;EAIA;;AAGF;EACE;EAIA;EAIA;;AA/CF;EACE;EACA;EACA;;AAEA;EAEE;;AAOJ;EACE;EACA;EAIA;;AAMF;EACE;EAIA;EAIA;;AAGF;EACE;EAIA;EAIA;;;AAKN;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE",
|
||||
"file": "index.css"
|
||||
}
|
||||
|
|
@ -0,0 +1,267 @@
|
|||
/**
|
||||
* @omiu/button v0.0.8 http://omijs.org
|
||||
* Front End Cross-Frameworks Framework.
|
||||
* By dntzhang https://github.com/dntzhang
|
||||
* Github: https://github.com/Tencent/omi
|
||||
* MIT Licensed.
|
||||
*/
|
||||
|
||||
import { h, extractClass, tag, WeElement } from 'omi';
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
|
||||
this file except in compliance with the License. You may obtain a copy of the
|
||||
License at http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
|
||||
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
|
||||
MERCHANTABLITY OR NON-INFRINGEMENT.
|
||||
|
||||
See the Apache Version 2.0 License for specific language governing permissions
|
||||
and limitations under the License.
|
||||
***************************************************************************** */
|
||||
/* global Reflect, Promise */
|
||||
|
||||
var extendStatics = function(d, b) {
|
||||
extendStatics = Object.setPrototypeOf ||
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
||||
return extendStatics(d, b);
|
||||
};
|
||||
|
||||
function __extends(d, b) {
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||
}
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
function __decorate(decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
}
|
||||
|
||||
|
||||
var css = `:host {
|
||||
display: inline-block; }
|
||||
|
||||
:host([block]) {
|
||||
display: block; }
|
||||
|
||||
.o-button {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
color: #606266;
|
||||
-webkit-appearance: none;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
transition: .1s;
|
||||
font-weight: 500;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px; }
|
||||
|
||||
.o-button:hover {
|
||||
border-color: rgba(7, 193, 96, 0.382);
|
||||
border-color: var(--o-primary-hover-border, rgba(7, 193, 96, 0.382));
|
||||
color: #07c160;
|
||||
color: var(--o-primary, #07c160);
|
||||
background-color: rgba(7, 193, 96, 0.1);
|
||||
background-color: var(--o-primary-hover-bg, rgba(7, 193, 96, 0.1)); }
|
||||
|
||||
.o-button:active {
|
||||
color: #07c160;
|
||||
color: var(--o-primary, #07c160);
|
||||
border-color: #07c160;
|
||||
border-color: var(--o-primary, #07c160);
|
||||
outline: none; }
|
||||
|
||||
.o-button-primary {
|
||||
color: #fff;
|
||||
background-color: #07c160;
|
||||
border-color: #07c160;
|
||||
background-color: var(--o-primary, #07c160);
|
||||
border-color: var(--o-primary, #07c160); }
|
||||
|
||||
.o-button-primary.is-plain {
|
||||
color: #07c160;
|
||||
color: var(--o-primary, #07c160);
|
||||
background-color: rgba(7, 193, 96, 0.1);
|
||||
background-color: var(--o-primary-fade-lot, rgba(7, 193, 96, 0.1));
|
||||
border-color: rgba(7, 193, 96, 0.382);
|
||||
border-color: var(--o-primary-fade-some, rgba(7, 193, 96, 0.382)); }
|
||||
|
||||
.o-button-primary:hover {
|
||||
background-color: rgba(7, 193, 96, 0.618);
|
||||
border-color: rgba(7, 193, 96, 0.618);
|
||||
background-color: var(--o-primary-fade-little, rgba(7, 193, 96, 0.618));
|
||||
border-color: var(--o-primary-fade-little, rgba(7, 193, 96, 0.618));
|
||||
color: #fff; }
|
||||
|
||||
.o-button-primary:active {
|
||||
background-color: #059048;
|
||||
border-color: #059048;
|
||||
background-color: var(--o-primary-active, #059048);
|
||||
border-color: var(--o-primary-active, #059048);
|
||||
color: #fff; }
|
||||
|
||||
.o-button-danger {
|
||||
color: #fff;
|
||||
background-color: #fa5151;
|
||||
border-color: #fa5151;
|
||||
background-color: var(--o-danger, #fa5151);
|
||||
border-color: var(--o-danger, #fa5151); }
|
||||
|
||||
.o-button-danger.is-plain {
|
||||
color: #fa5151;
|
||||
color: var(--o-danger, #fa5151);
|
||||
background-color: rgba(250, 81, 81, 0.1);
|
||||
background-color: var(--o-danger-fade-lot, rgba(250, 81, 81, 0.1));
|
||||
border-color: rgba(250, 81, 81, 0.382);
|
||||
border-color: var(--o-danger-fade-some, rgba(250, 81, 81, 0.382)); }
|
||||
|
||||
.o-button-danger:hover {
|
||||
background-color: rgba(250, 81, 81, 0.618);
|
||||
border-color: rgba(250, 81, 81, 0.618);
|
||||
background-color: var(--o-danger-fade-little, rgba(250, 81, 81, 0.618));
|
||||
border-color: var(--o-danger-fade-little, rgba(250, 81, 81, 0.618));
|
||||
color: #fff; }
|
||||
|
||||
.o-button-danger:active {
|
||||
background-color: #f91f1f;
|
||||
border-color: #f91f1f;
|
||||
background-color: var(--o-danger-active, #f91f1f);
|
||||
border-color: var(--o-danger-active, #f91f1f);
|
||||
color: #fff; }
|
||||
|
||||
.loading {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: inline-block;
|
||||
animation: loading 1s steps(12, end) infinite;
|
||||
vertical-align: -0.125em; }
|
||||
|
||||
@-webkit-keyframes loading {
|
||||
0% {
|
||||
transform: rotate3d(0, 0, 1, 0deg); }
|
||||
100% {
|
||||
transform: rotate3d(0, 0, 1, 360deg); } }
|
||||
|
||||
@keyframes loading {
|
||||
0% {
|
||||
transform: rotate3d(0, 0, 1, 0deg); }
|
||||
100% {
|
||||
transform: rotate3d(0, 0, 1, 360deg); } }
|
||||
|
||||
.o-button-medium {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px; }
|
||||
|
||||
.o-button-small {
|
||||
padding: 9px 15px;
|
||||
font-size: 12px;
|
||||
border-radius: 3px; }
|
||||
|
||||
.o-button-mini {
|
||||
padding: 7px 15px;
|
||||
font-size: 12px;
|
||||
border-radius: 3px; }
|
||||
|
||||
.o-button.is-round {
|
||||
border-radius: 20px; }
|
||||
|
||||
.o-button.is-circle {
|
||||
border-radius: 20px;
|
||||
padding: 12px; }
|
||||
|
||||
.o-button.is-disabled, .o-button.is-disabled:focus, .o-button.is-disabled:hover {
|
||||
color: #c0c4cc;
|
||||
cursor: not-allowed;
|
||||
background-image: none;
|
||||
background-color: #fff;
|
||||
border-color: #ebeef5; }
|
||||
|
||||
.o-button.is-block {
|
||||
display: block;
|
||||
width: 100%; }
|
||||
`
|
||||
|
||||
|
||||
var Button = /** @class */ (function (_super) {
|
||||
__extends(Button, _super);
|
||||
function Button() {
|
||||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
Button.prototype.render = function (props) {
|
||||
var _a;
|
||||
return h("button", __assign({ disabled: props.disabled }, extractClass(props, 'o-button', (_a = {},
|
||||
_a['o-button-' + props.type] = props.type,
|
||||
_a['o-button-' + props.size] = props.size,
|
||||
_a['is-plain'] = props.plain,
|
||||
_a['is-round'] = props.round,
|
||||
_a['is-circle'] = props.circle,
|
||||
_a['is-disabled'] = props.disabled,
|
||||
_a['is-block'] = props.block,
|
||||
_a)), { type: props.nativeType }),
|
||||
props.loading && [h("svg", { class: "loading", viewBox: "0 0 1024 1024", focusable: "false", "data-icon": "loading", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" },
|
||||
h("path", { d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" })), ' '],
|
||||
props.text,
|
||||
h("slot", null));
|
||||
};
|
||||
Button.css = css;
|
||||
Button.defaultProps = {
|
||||
plain: false,
|
||||
round: false,
|
||||
circle: false,
|
||||
loading: false,
|
||||
disabled: false,
|
||||
autofocus: false,
|
||||
nativeType: 'button',
|
||||
block: false
|
||||
};
|
||||
Button.propTypes = {
|
||||
size: String,
|
||||
type: String,
|
||||
plain: Boolean,
|
||||
round: Boolean,
|
||||
circle: Boolean,
|
||||
loading: Boolean,
|
||||
disabled: Boolean,
|
||||
icon: String,
|
||||
autofocus: Boolean,
|
||||
nativeType: String,
|
||||
block: Boolean,
|
||||
text: String
|
||||
};
|
||||
Button = __decorate([
|
||||
tag('o-button')
|
||||
], Button);
|
||||
return Button;
|
||||
}(WeElement));
|
||||
|
||||
export default Button;
|
||||
//# sourceMappingURL=index.esm.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,335 @@
|
|||
(function webpackUniversalModuleDefinition(root, factory) {
|
||||
if(typeof exports === 'object' && typeof module === 'object')
|
||||
module.exports = factory(require("omi"));
|
||||
else if(typeof define === 'function' && define.amd)
|
||||
define(["omi"], factory);
|
||||
else if(typeof exports === 'object')
|
||||
exports["OButton"] = factory(require("omi"));
|
||||
else
|
||||
root["OButton"] = factory(root["Omi"]);
|
||||
})(this, function(__WEBPACK_EXTERNAL_MODULE_omi__) {
|
||||
return /******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
/******/
|
||||
/******/ // Check if module is in cache
|
||||
/******/ if(installedModules[moduleId]) {
|
||||
/******/ return installedModules[moduleId].exports;
|
||||
/******/ }
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = installedModules[moduleId] = {
|
||||
/******/ i: moduleId,
|
||||
/******/ l: false,
|
||||
/******/ exports: {}
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Execute the module function
|
||||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||
/******/
|
||||
/******/ // Flag the module as loaded
|
||||
/******/ module.l = true;
|
||||
/******/
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
/******/
|
||||
/******/
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = modules;
|
||||
/******/
|
||||
/******/ // expose the module cache
|
||||
/******/ __webpack_require__.c = installedModules;
|
||||
/******/
|
||||
/******/ // define getter function for harmony exports
|
||||
/******/ __webpack_require__.d = function(exports, name, getter) {
|
||||
/******/ if(!__webpack_require__.o(exports, name)) {
|
||||
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
|
||||
/******/ }
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // define __esModule on exports
|
||||
/******/ __webpack_require__.r = function(exports) {
|
||||
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
||||
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
||||
/******/ }
|
||||
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // create a fake namespace object
|
||||
/******/ // mode & 1: value is a module id, require it
|
||||
/******/ // mode & 2: merge all properties of value into the ns
|
||||
/******/ // mode & 4: return value when already ns object
|
||||
/******/ // mode & 8|1: behave like require
|
||||
/******/ __webpack_require__.t = function(value, mode) {
|
||||
/******/ if(mode & 1) value = __webpack_require__(value);
|
||||
/******/ if(mode & 8) return value;
|
||||
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
|
||||
/******/ var ns = Object.create(null);
|
||||
/******/ __webpack_require__.r(ns);
|
||||
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
|
||||
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
|
||||
/******/ return ns;
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||
/******/ __webpack_require__.n = function(module) {
|
||||
/******/ var getter = module && module.__esModule ?
|
||||
/******/ function getDefault() { return module['default']; } :
|
||||
/******/ function getModuleExports() { return module; };
|
||||
/******/ __webpack_require__.d(getter, 'a', getter);
|
||||
/******/ return getter;
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Object.prototype.hasOwnProperty.call
|
||||
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
||||
/******/
|
||||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "";
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = "./src/index.tsx");
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
/******/ ({
|
||||
|
||||
/***/ "./node_modules/_css-loader@1.0.1@css-loader/index.js!./node_modules/_resolve-url-loader@3.1.1@resolve-url-loader/index.js!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js?!./src/index.scss":
|
||||
/*!****************************************************************************************************************************************************************************************************!*\
|
||||
!*** ./node_modules/_css-loader@1.0.1@css-loader!./node_modules/_resolve-url-loader@3.1.1@resolve-url-loader!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js??ref--4-3!./src/index.scss ***!
|
||||
\****************************************************************************************************************************************************************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
exports = module.exports = __webpack_require__(/*! ../node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js */ "./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js")(false);
|
||||
// imports
|
||||
|
||||
|
||||
// module
|
||||
exports.push([module.i, ":host {\n display: inline-block; }\n\n:host([block]) {\n display: block; }\n\n.o-button {\n display: inline-block;\n line-height: 1;\n white-space: nowrap;\n cursor: pointer;\n background: #fff;\n border: 1px solid #dcdfe6;\n color: #606266;\n -webkit-appearance: none;\n text-align: center;\n box-sizing: border-box;\n outline: none;\n margin: 0;\n transition: .1s;\n font-weight: 500;\n -moz-user-select: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n padding: 12px 20px;\n font-size: 14px;\n border-radius: 4px; }\n\n.o-button:hover {\n border-color: rgba(7, 193, 96, 0.382);\n border-color: var(--o-primary-hover-border, rgba(7, 193, 96, 0.382));\n color: #07c160;\n color: var(--o-primary, #07c160);\n background-color: rgba(7, 193, 96, 0.1);\n background-color: var(--o-primary-hover-bg, rgba(7, 193, 96, 0.1)); }\n\n.o-button:active {\n color: #07c160;\n color: var(--o-primary, #07c160);\n border-color: #07c160;\n border-color: var(--o-primary, #07c160);\n outline: none; }\n\n.o-button-primary {\n color: #fff;\n background-color: #07c160;\n border-color: #07c160;\n background-color: var(--o-primary, #07c160);\n border-color: var(--o-primary, #07c160); }\n\n.o-button-primary.is-plain {\n color: #07c160;\n color: var(--o-primary, #07c160);\n background-color: rgba(7, 193, 96, 0.1);\n background-color: var(--o-primary-fade-lot, rgba(7, 193, 96, 0.1));\n border-color: rgba(7, 193, 96, 0.382);\n border-color: var(--o-primary-fade-some, rgba(7, 193, 96, 0.382)); }\n\n.o-button-primary:hover {\n background-color: rgba(7, 193, 96, 0.618);\n border-color: rgba(7, 193, 96, 0.618);\n background-color: var(--o-primary-fade-little, rgba(7, 193, 96, 0.618));\n border-color: var(--o-primary-fade-little, rgba(7, 193, 96, 0.618));\n color: #fff; }\n\n.o-button-primary:active {\n background-color: #059048;\n border-color: #059048;\n background-color: var(--o-primary-active, #059048);\n border-color: var(--o-primary-active, #059048);\n color: #fff; }\n\n.o-button-danger {\n color: #fff;\n background-color: #fa5151;\n border-color: #fa5151;\n background-color: var(--o-danger, #fa5151);\n border-color: var(--o-danger, #fa5151); }\n\n.o-button-danger.is-plain {\n color: #fa5151;\n color: var(--o-danger, #fa5151);\n background-color: rgba(250, 81, 81, 0.1);\n background-color: var(--o-danger-fade-lot, rgba(250, 81, 81, 0.1));\n border-color: rgba(250, 81, 81, 0.382);\n border-color: var(--o-danger-fade-some, rgba(250, 81, 81, 0.382)); }\n\n.o-button-danger:hover {\n background-color: rgba(250, 81, 81, 0.618);\n border-color: rgba(250, 81, 81, 0.618);\n background-color: var(--o-danger-fade-little, rgba(250, 81, 81, 0.618));\n border-color: var(--o-danger-fade-little, rgba(250, 81, 81, 0.618));\n color: #fff; }\n\n.o-button-danger:active {\n background-color: #f91f1f;\n border-color: #f91f1f;\n background-color: var(--o-danger-active, #f91f1f);\n border-color: var(--o-danger-active, #f91f1f);\n color: #fff; }\n\n.loading {\n width: 1em;\n height: 1em;\n display: inline-block;\n animation: loading 1s steps(12, end) infinite;\n vertical-align: -0.125em; }\n\n@-webkit-keyframes loading {\n 0% {\n transform: rotate3d(0, 0, 1, 0deg); }\n 100% {\n transform: rotate3d(0, 0, 1, 360deg); } }\n\n@keyframes loading {\n 0% {\n transform: rotate3d(0, 0, 1, 0deg); }\n 100% {\n transform: rotate3d(0, 0, 1, 360deg); } }\n\n.o-button-medium {\n padding: 10px 20px;\n font-size: 14px;\n border-radius: 4px; }\n\n.o-button-small {\n padding: 9px 15px;\n font-size: 12px;\n border-radius: 3px; }\n\n.o-button-mini {\n padding: 7px 15px;\n font-size: 12px;\n border-radius: 3px; }\n\n.o-button.is-round {\n border-radius: 20px; }\n\n.o-button.is-circle {\n border-radius: 20px;\n padding: 12px; }\n\n.o-button.is-disabled, .o-button.is-disabled:focus, .o-button.is-disabled:hover {\n color: #c0c4cc;\n cursor: not-allowed;\n background-image: none;\n background-color: #fff;\n border-color: #ebeef5; }\n\n.o-button.is-block {\n display: block;\n width: 100%; }\n", ""]);
|
||||
|
||||
// exports
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js":
|
||||
/*!*******************************************************************!*\
|
||||
!*** ./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js ***!
|
||||
\*******************************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
/*
|
||||
MIT License http://www.opensource.org/licenses/mit-license.php
|
||||
Author Tobias Koppers @sokra
|
||||
*/
|
||||
// css base code, injected by the css-loader
|
||||
module.exports = function(useSourceMap) {
|
||||
var list = [];
|
||||
|
||||
// return the list of modules as css string
|
||||
list.toString = function toString() {
|
||||
return this.map(function (item) {
|
||||
var content = cssWithMappingToString(item, useSourceMap);
|
||||
if(item[2]) {
|
||||
return "@media " + item[2] + "{" + content + "}";
|
||||
} else {
|
||||
return content;
|
||||
}
|
||||
}).join("");
|
||||
};
|
||||
|
||||
// import a list of modules into the list
|
||||
list.i = function(modules, mediaQuery) {
|
||||
if(typeof modules === "string")
|
||||
modules = [[null, modules, ""]];
|
||||
var alreadyImportedModules = {};
|
||||
for(var i = 0; i < this.length; i++) {
|
||||
var id = this[i][0];
|
||||
if(typeof id === "number")
|
||||
alreadyImportedModules[id] = true;
|
||||
}
|
||||
for(i = 0; i < modules.length; i++) {
|
||||
var item = modules[i];
|
||||
// skip already imported module
|
||||
// this implementation is not 100% perfect for weird media query combinations
|
||||
// when a module is imported multiple times with different media queries.
|
||||
// I hope this will never occur (Hey this way we have smaller bundles)
|
||||
if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
|
||||
if(mediaQuery && !item[2]) {
|
||||
item[2] = mediaQuery;
|
||||
} else if(mediaQuery) {
|
||||
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
|
||||
}
|
||||
list.push(item);
|
||||
}
|
||||
}
|
||||
};
|
||||
return list;
|
||||
};
|
||||
|
||||
function cssWithMappingToString(item, useSourceMap) {
|
||||
var content = item[1] || '';
|
||||
var cssMapping = item[3];
|
||||
if (!cssMapping) {
|
||||
return content;
|
||||
}
|
||||
|
||||
if (useSourceMap && typeof btoa === 'function') {
|
||||
var sourceMapping = toComment(cssMapping);
|
||||
var sourceURLs = cssMapping.sources.map(function (source) {
|
||||
return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'
|
||||
});
|
||||
|
||||
return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
|
||||
}
|
||||
|
||||
return [content].join('\n');
|
||||
}
|
||||
|
||||
// Adapted from convert-source-map (MIT)
|
||||
function toComment(sourceMap) {
|
||||
// eslint-disable-next-line no-undef
|
||||
var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
|
||||
var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;
|
||||
|
||||
return '/*# ' + data + ' */';
|
||||
}
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/index.scss":
|
||||
/*!************************!*\
|
||||
!*** ./src/index.scss ***!
|
||||
\************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
|
||||
var result = __webpack_require__(/*! !../node_modules/_css-loader@1.0.1@css-loader!../node_modules/_resolve-url-loader@3.1.1@resolve-url-loader!../node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js??ref--4-3!./index.scss */ "./node_modules/_css-loader@1.0.1@css-loader/index.js!./node_modules/_resolve-url-loader@3.1.1@resolve-url-loader/index.js!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js?!./src/index.scss");
|
||||
|
||||
if (typeof result === "string") {
|
||||
module.exports = result;
|
||||
} else {
|
||||
module.exports = result.toString();
|
||||
}
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/index.tsx":
|
||||
/*!***********************!*\
|
||||
!*** ./src/index.tsx ***!
|
||||
\***********************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
|
||||
var __extends = (this && this.__extends) || (function () {
|
||||
var extendStatics = function (d, b) {
|
||||
extendStatics = Object.setPrototypeOf ||
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
||||
return extendStatics(d, b);
|
||||
};
|
||||
return function (d, b) {
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||
};
|
||||
})();
|
||||
var __assign = (this && this.__assign) || function () {
|
||||
__assign = Object.assign || function(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
||||
t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
var omi_1 = __webpack_require__(/*! omi */ "omi");
|
||||
var css = __webpack_require__(/*! ./index.scss */ "./src/index.scss");
|
||||
var Button = /** @class */ (function (_super) {
|
||||
__extends(Button, _super);
|
||||
function Button() {
|
||||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
Button.prototype.render = function (props) {
|
||||
var _a;
|
||||
return omi_1.h("button", __assign({ disabled: props.disabled }, omi_1.extractClass(props, 'o-button', (_a = {},
|
||||
_a['o-button-' + props.type] = props.type,
|
||||
_a['o-button-' + props.size] = props.size,
|
||||
_a['is-plain'] = props.plain,
|
||||
_a['is-round'] = props.round,
|
||||
_a['is-circle'] = props.circle,
|
||||
_a['is-disabled'] = props.disabled,
|
||||
_a['is-block'] = props.block,
|
||||
_a)), { type: props.nativeType }),
|
||||
props.loading && [omi_1.h("svg", { class: "loading", viewBox: "0 0 1024 1024", focusable: "false", "data-icon": "loading", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" },
|
||||
omi_1.h("path", { d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" })), ' '],
|
||||
props.text,
|
||||
omi_1.h("slot", null));
|
||||
};
|
||||
Button.css = css;
|
||||
Button.defaultProps = {
|
||||
plain: false,
|
||||
round: false,
|
||||
circle: false,
|
||||
loading: false,
|
||||
disabled: false,
|
||||
autofocus: false,
|
||||
nativeType: 'button',
|
||||
block: false
|
||||
};
|
||||
Button.propTypes = {
|
||||
size: String,
|
||||
type: String,
|
||||
plain: Boolean,
|
||||
round: Boolean,
|
||||
circle: Boolean,
|
||||
loading: Boolean,
|
||||
disabled: Boolean,
|
||||
icon: String,
|
||||
autofocus: Boolean,
|
||||
nativeType: String,
|
||||
block: Boolean,
|
||||
text: String
|
||||
};
|
||||
Button = __decorate([
|
||||
omi_1.tag('o-button')
|
||||
], Button);
|
||||
return Button;
|
||||
}(omi_1.WeElement));
|
||||
exports.default = Button;
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "omi":
|
||||
/*!******************************************************************************!*\
|
||||
!*** external {"commonjs":"omi","commonjs2":"omi","amd":"omi","root":"Omi"} ***!
|
||||
\******************************************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = __WEBPACK_EXTERNAL_MODULE_omi__;
|
||||
|
||||
/***/ })
|
||||
|
||||
/******/ })["default"];
|
||||
});
|
||||
//# sourceMappingURL=index.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,193 +1,156 @@
|
|||
@use "sass:map";
|
||||
|
||||
@import '../../common/scss/theme.scss';
|
||||
|
||||
$--button-padding: () !default;
|
||||
$--button-padding: map.merge(
|
||||
(
|
||||
'medium': 10px 20px,
|
||||
'small': 9px 15px,
|
||||
'mini': 7px 15px,
|
||||
),
|
||||
$--button-padding
|
||||
);
|
||||
|
||||
$--button-font-size: () !default;
|
||||
$--button-font-size: map.merge(
|
||||
(
|
||||
'medium': 14px,
|
||||
'small': 12px,
|
||||
'mini': 12px,
|
||||
),
|
||||
$--button-font-size
|
||||
);
|
||||
|
||||
$--button-border-radius: () !default;
|
||||
$--button-border-radius: map.merge(
|
||||
(
|
||||
'medium': 4px,
|
||||
'small': 3px,
|
||||
'mini': 3px,
|
||||
),
|
||||
$--button-border-radius
|
||||
);
|
||||
@import "@omiu/common/theme.scss";
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
:host([block]) {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.o-button {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
color: #606266;
|
||||
-webkit-appearance: none;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
transition: 0.1s;
|
||||
font-weight: 500;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
border-color: $o-primary-fade-some;
|
||||
border-color: var(--o-primary-fade-some, $o-primary-fade-some);
|
||||
color: $o-primary;
|
||||
color: var(--o-primary, $o-primary);
|
||||
background-color: $o-primary-fade-lot;
|
||||
background-color: var(--o-primary-fade-lot, $o-primary-fade-lot);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $o-primary;
|
||||
color: var(--o-primary, $o-primary);
|
||||
border-color: $o-primary;
|
||||
border-color: var(--o-primary, $o-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@each $size in $--sizes {
|
||||
&-#{$size} {
|
||||
padding: map.get($--button-padding, $size);
|
||||
font-size: map.get($--button-font-size, $size);
|
||||
border-radius: map.get($--button-border-radius, $size);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-round {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
&.is-circle {
|
||||
border-radius: 20px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
&.is-disabled,
|
||||
&.is-disabled:focus,
|
||||
&.is-disabled:hover {
|
||||
color: #c0c4cc;
|
||||
cursor: not-allowed;
|
||||
background-image: none;
|
||||
background-color: #fff;
|
||||
border-color: #ebeef5;
|
||||
}
|
||||
|
||||
&.is-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@each $type in $--types {
|
||||
&-#{$type} {
|
||||
color: #fff;
|
||||
background-color: var(--o-#{$type}, map.get($--colors, $type, 'base'));
|
||||
border-color: var(--o-#{$type}, map.get($--colors, $type, 'base'));
|
||||
|
||||
&:disabled,
|
||||
&:disabled:hover {
|
||||
background-color: var(
|
||||
--o-#{$type}-fade-lot,
|
||||
map.get($--colors, $type, 'fade-lot')
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&-#{$type}.is-plain {
|
||||
color: var(--o-#{$type}, map.get($--colors, $type, 'base'));
|
||||
background-color: var(
|
||||
--o-#{$type}-fade-lot,
|
||||
map.get($--colors, $type, 'fade-lot')
|
||||
);
|
||||
border-color: var(
|
||||
--o-#{$type}-fade-some,
|
||||
map.get($--colors, $type, 'fade-some')
|
||||
);
|
||||
}
|
||||
|
||||
&-#{$type}:hover {
|
||||
background-color: var(
|
||||
--o-#{$type}-fade-little,
|
||||
map.get($--colors, $type, 'fade-little')
|
||||
);
|
||||
border-color: var(
|
||||
--o-#{$type}-fade-little,
|
||||
map.get($--colors, $type, 'fade-little')
|
||||
);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&-#{$type}:active {
|
||||
background-color: var(
|
||||
--o-#{$type}-active,
|
||||
map.get($--colors, $type, 'active')
|
||||
);
|
||||
border-color: var(
|
||||
--o-#{$type}-active,
|
||||
map.get($--colors, $type, 'active')
|
||||
);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
color: #606266;
|
||||
-webkit-appearance: none;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
transition: .1s;
|
||||
font-weight: 500;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
.o-button:hover {
|
||||
border-color: $o-primary-hover-border;
|
||||
border-color: var(--o-primary-hover-border, $o-primary-hover-border);
|
||||
color: $o-primary;
|
||||
color: var(--o-primary, $o-primary);
|
||||
background-color: $o-primary-hover-bg;
|
||||
background-color: var(--o-primary-hover-bg, $o-primary-hover-bg);
|
||||
}
|
||||
|
||||
.o-button:active {
|
||||
color: $o-primary;
|
||||
color: var(--o-primary, $o-primary);
|
||||
border-color: $o-primary;
|
||||
border-color: var(--o-primary, $o-primary);
|
||||
outline: none
|
||||
}
|
||||
|
||||
$type-list: primary danger;
|
||||
|
||||
@each $type in $type-list {
|
||||
.o-button-#{$type} {
|
||||
color: #fff;
|
||||
background-color: map-get($options, $type);
|
||||
border-color: map-get($options, $type);
|
||||
background-color: var(--o-#{$type}, map-get($options, $type));
|
||||
border-color: var(--o-#{$type}, map-get($options, $type));
|
||||
}
|
||||
|
||||
|
||||
.o-button-#{$type}.is-plain {
|
||||
color:map-get($options, $type);
|
||||
color: var(--o-#{$type}, map-get($options, $type));
|
||||
background-color: map-get($options, $type#{-fade-lot});
|
||||
background-color: var(--o-#{$type}-fade-lot, map-get($options, $type#{-fade-lot}));
|
||||
border-color: map-get($options, $type#{-fade-some});
|
||||
border-color: var(--o-#{$type}-fade-some, map-get($options, $type#{-fade-some}));
|
||||
}
|
||||
|
||||
.o-button-#{$type}:hover {
|
||||
background-color: map-get($options, $type#{-fade-little});
|
||||
border-color: map-get($options, $type#{-fade-little});
|
||||
background-color: var(--o-#{$type}-fade-little, map-get($options, $type#{-fade-little}));
|
||||
border-color: var(--o-#{$type}-fade-little, map-get($options, $type#{-fade-little}));
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.o-button-#{$type}:active {
|
||||
background-color: map-get($options, $type#{-active});
|
||||
border-color: map-get($options, $type#{-active});
|
||||
background-color: var(--o-#{$type}-active, map-get($options, $type#{-active}));
|
||||
border-color: var(--o-#{$type}-active, map-get($options, $type#{-active}));
|
||||
color: #fff
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.loading {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: inline-block;
|
||||
animation: loading 1s steps(12, end) infinite;
|
||||
vertical-align: -0.125em;
|
||||
vertical-align: -0.125em;
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes loading {
|
||||
0% {
|
||||
transform: rotate3d(0, 0, 1, 0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate3d(0, 0, 1, 360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
0% {
|
||||
transform: rotate3d(0, 0, 1, 0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate3d(0, 0, 1, 360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.o-button-medium {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.o-button-small {
|
||||
padding: 9px 15px;
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.o-button-mini {
|
||||
padding: 7px 15px;
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.o-button.is-round {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.o-button.is-circle {
|
||||
border-radius: 20px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.o-button.is-disabled, .o-button.is-disabled:focus, .o-button.is-disabled:hover {
|
||||
color: #c0c4cc;
|
||||
cursor: not-allowed;
|
||||
background-image: none;
|
||||
background-color: #fff;
|
||||
border-color: #ebeef5;
|
||||
}
|
||||
|
||||
.o-button.is-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,23 +2,26 @@ import { tag, WeElement, h, extractClass } from 'omi'
|
|||
import * as css from './index.scss'
|
||||
|
||||
interface Props {
|
||||
size?: 'medium' | 'small' | 'mini'
|
||||
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'
|
||||
plain?: boolean,
|
||||
round?: boolean,
|
||||
circle?: boolean,
|
||||
loading?: boolean,
|
||||
disabled?: boolean,
|
||||
icon?: string,
|
||||
autofocus?: boolean,
|
||||
nativeType?: 'button' | 'submit' | 'reset',
|
||||
block?: boolean
|
||||
text?: string
|
||||
}
|
||||
|
||||
|
||||
|
||||
@tag('o-button')
|
||||
export default class Button extends WeElement<Props> {
|
||||
static css = css.default ? css.default : css
|
||||
export default class Button extends WeElement<Props>{
|
||||
static css = css
|
||||
|
||||
|
||||
static defaultProps = {
|
||||
plain: false,
|
||||
|
|
@ -28,9 +31,10 @@ export default class Button extends WeElement<Props> {
|
|||
disabled: false,
|
||||
autofocus: false,
|
||||
nativeType: 'button',
|
||||
block: false,
|
||||
block: false
|
||||
}
|
||||
|
||||
|
||||
static propTypes = {
|
||||
size: String,
|
||||
type: String,
|
||||
|
|
@ -43,42 +47,24 @@ export default class Button extends WeElement<Props> {
|
|||
autofocus: Boolean,
|
||||
nativeType: String,
|
||||
block: Boolean,
|
||||
text: String,
|
||||
text: String
|
||||
}
|
||||
|
||||
|
||||
render(props) {
|
||||
return (
|
||||
<button
|
||||
disabled={props.disabled}
|
||||
{...extractClass(props, 'o-button', {
|
||||
['o-button-' + props.type]: props.type,
|
||||
['o-button-' + props.size]: props.size,
|
||||
'is-plain': props.plain,
|
||||
'is-round': props.round,
|
||||
'is-circle': props.circle,
|
||||
'is-disabled': props.disabled,
|
||||
'is-block': props.block,
|
||||
})}
|
||||
type={props.nativeType}
|
||||
>
|
||||
{props.loading && [
|
||||
<svg
|
||||
class="loading"
|
||||
viewBox="0 0 1024 1024"
|
||||
focusable="false"
|
||||
data-icon="loading"
|
||||
width="1em"
|
||||
height="1em"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path>
|
||||
</svg>,
|
||||
' ',
|
||||
]}
|
||||
{props.text}
|
||||
<slot></slot>
|
||||
</button>
|
||||
)
|
||||
|
||||
return <button disabled={props.disabled} {...extractClass(props, 'o-button', {
|
||||
['o-button-' + props.type]: props.type,
|
||||
['o-button-' + props.size]: props.size,
|
||||
'is-plain': props.plain,
|
||||
'is-round': props.round,
|
||||
'is-circle': props.circle,
|
||||
'is-disabled': props.disabled,
|
||||
'is-block': props.block
|
||||
})} type={props.nativeType} >
|
||||
{props.loading && [<svg class="loading" viewBox="0 0 1024 1024" focusable="false" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg>, ' ']}
|
||||
{props.text}
|
||||
<slot></slot>
|
||||
</button>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,86 +0,0 @@
|
|||
import { html, fixture, expect } from '@open-wc/testing'
|
||||
|
||||
import '../dist/index.es.js'
|
||||
|
||||
const defaultProps = {
|
||||
plain: false,
|
||||
round: false,
|
||||
circle: false,
|
||||
loading: false,
|
||||
disabled: false,
|
||||
autofocus: false,
|
||||
nativeType: 'button',
|
||||
block: false,
|
||||
}
|
||||
|
||||
describe('Testing o-button', () => {
|
||||
it('tests button with default props', async () => {
|
||||
const el = await fixture(html` <o-button>Default</o-button> `)
|
||||
const button = el.shadowRoot.querySelector('button')
|
||||
const classList = button.getAttribute('class').split(' ')
|
||||
expect(classList.includes('o-button')).to.be.true
|
||||
})
|
||||
|
||||
it('tests setting type', async () => {
|
||||
const el = await fixture(html`
|
||||
<o-button type="primary">Primary</o-button>
|
||||
`)
|
||||
const button = el.shadowRoot.querySelector('button')
|
||||
const classList = button.getAttribute('class').split(' ')
|
||||
expect(classList.includes('o-button-primary')).to.be.true
|
||||
})
|
||||
|
||||
it('tests setting disabled', async () => {
|
||||
const el = await fixture(html` <o-button disabled>Disabled</o-button> `)
|
||||
const button = el.shadowRoot.querySelector('button')
|
||||
const classList = button.getAttribute('class').split(' ')
|
||||
expect(button.getAttribute('disabled')).to.equal('')
|
||||
expect(classList.includes('is-disabled')).to.be.true
|
||||
})
|
||||
|
||||
it('tests setting plain', async () => {
|
||||
const el = await fixture(html` <o-button plain>Plain</o-button> `)
|
||||
const button = el.shadowRoot.querySelector('button')
|
||||
const classList = button.getAttribute('class').split(' ')
|
||||
expect(classList.includes('is-plain')).to.be.true
|
||||
})
|
||||
|
||||
it('tests setting size', async () => {
|
||||
const el = await fixture(html` <o-button size="medium">Medium</o-button> `)
|
||||
const button = el.shadowRoot.querySelector('button')
|
||||
const classList = button.getAttribute('class').split(' ')
|
||||
expect(classList.includes('o-button-medium')).to.be.true
|
||||
})
|
||||
|
||||
it('tests setting round', async () => {
|
||||
const el = await fixture(html` <o-button round>Round</o-button> `)
|
||||
const button = el.shadowRoot.querySelector('button')
|
||||
const classList = button.getAttribute('class').split(' ')
|
||||
expect(classList.includes('is-round')).to.be.true
|
||||
})
|
||||
|
||||
it('tests setting circle', async () => {
|
||||
const el = await fixture(html` <o-button circle>Circle</o-button> `)
|
||||
const button = el.shadowRoot.querySelector('button')
|
||||
const classList = button.getAttribute('class').split(' ')
|
||||
expect(classList.includes('is-circle')).to.be.true
|
||||
})
|
||||
|
||||
it('tests setting block', async () => {
|
||||
const el = await fixture(html` <o-button block>Block</o-button> `)
|
||||
const button = el.shadowRoot.querySelector('button')
|
||||
const classList = button.getAttribute('class').split(' ')
|
||||
expect(classList.includes('is-block')).to.be.true
|
||||
})
|
||||
|
||||
it('tests setting loading', async () => {
|
||||
const el = await fixture(html` <o-button loading>Loading</o-button> `)
|
||||
const svg = el.shadowRoot.querySelector('svg')
|
||||
expect(svg).to.not.be.null
|
||||
})
|
||||
|
||||
it('passes the a11y audit', async () => {
|
||||
const el = await fixture(html` <o-button></o-button> `)
|
||||
expect(el).shadowDom.to.be.accessible()
|
||||
})
|
||||
})
|
||||
|
|
@ -1,30 +1,14 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"module": "esnext",
|
||||
"lib": [
|
||||
"es2017",
|
||||
"dom",
|
||||
"dom.iterable"
|
||||
],
|
||||
"declaration": true,
|
||||
"emitDeclarationOnly": true,
|
||||
"outDir": "./types",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"moduleResolution": "node",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"baseUrl": ".",
|
||||
"experimentalDecorators": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"jsx": "react",
|
||||
"jsxFactory": "h",
|
||||
"target": "es5",
|
||||
"allowJs": true,
|
||||
"declaration": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx"
|
||||
],
|
||||
"exclude": []
|
||||
}
|
||||
"src/**/*"
|
||||
]
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import { resolve } from 'path'
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
build: {
|
||||
lib: {
|
||||
entry: resolve(__dirname, 'src/index.tsx'),
|
||||
name: 'index',
|
||||
formats: ['es'],
|
||||
fileName: (format) => `index.${format}.js`,
|
||||
},
|
||||
rollupOptions: {
|
||||
external: /^omi/,
|
||||
input: {
|
||||
main: resolve(__dirname, 'index.html'),
|
||||
admin: resolve(__dirname, 'demo.html'),
|
||||
},
|
||||
},
|
||||
},
|
||||
esbuild: {
|
||||
jsxFactory: 'h',
|
||||
jsxFragment: 'h.f',
|
||||
},
|
||||
})
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
types
|
||||
*.local
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
## Card
|
||||
|
||||
> Card
|
||||
|
||||
## 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
|
||||
```
|
||||
|
||||
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Omiu</title>
|
||||
<script type="module" src="/src/demo.tsx"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a href="https://github.com/Tencent/omi" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;">
|
||||
<img src="//alloyteam.github.io/github.png" alt="">
|
||||
</a>
|
||||
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
|
||||
|
||||
<script src="https://unpkg.com/@omiu/link"></script>
|
||||
|
||||
<!-- 这里导入需要的OmiU-component -->
|
||||
<script src="https://unpkg.com/@omiu/icon@0.0.2/add-a-photo-rounded.js"></script>
|
||||
<script src="https://unpkg.com/@omiu/icon@0.0.2/add-comment-rounded.js"></script>
|
||||
<script src="https://unpkg.com/@omiu/icon@0.0.2/add-ic-call-rounded.js"></script>
|
||||
<script src="https://unpkg.com/@omiu/avatar"></script>
|
||||
<script src="https://unpkg.com/@omiu/image"></script>
|
||||
</body>
|
||||
|
||||
|
||||
|
||||
</html>
|
||||
|
|
@ -1,108 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>omiu Card</title>
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a href="https://github.com/Tencent/omi" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;">
|
||||
<img src="//alloyteam.github.io/github.png" alt="">
|
||||
</a>
|
||||
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
|
||||
|
||||
<script src="https://unpkg.com/@omiu/link"></script>
|
||||
|
||||
<!-- 这里导入需要的OmiU-component -->
|
||||
<script src="https://unpkg.com/@omiu/icon@0.0.2/add-a-photo-rounded.js"></script>
|
||||
<script src="https://unpkg.com/@omiu/icon@0.0.2/add-comment-rounded.js"></script>
|
||||
<script src="https://unpkg.com/@omiu/icon@0.0.2/add-ic-call-rounded.js"></script>
|
||||
<script src="https://unpkg.com/@omiu/avatar"></script>
|
||||
<script src="https://unpkg.com/@omiu/image"></script>
|
||||
|
||||
<div style="height: 100vh; display: flex; justify-content: space-around; flex-wrap: wrap; background: #F0F2F5;">
|
||||
|
||||
<div style="margin: 5%; height: 200px; width: 300px;">
|
||||
<o-card title="Default size card" hoverable="always" block="1">
|
||||
<o-link underline='0' type="primary" target="_blank" href="https://tencent.github.io/omi/" slot="extra">More
|
||||
</o-link>
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
</o-card>
|
||||
</div>
|
||||
|
||||
<div style="margin: 5%; height: 200px; width: 300px;">
|
||||
<o-card title="Simple Card" hoverable="always" block="1">
|
||||
<!-- slot="cover" 若不填充内容，则header栏不显示。-简洁卡片 -->
|
||||
<div slot="cover">
|
||||
</div>
|
||||
<p>Simple Card</p>
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
</o-card>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 若需实现底部栏按钮，id,actions为必选参数 -->
|
||||
<div style="margin: 5%; height: 200px; width: 300px;">
|
||||
<o-card title="Action card" hoverable="always" actions="[{icon: 'add-a-photo-rounded'},{icon: 'add-ic-call-rounded'},{icon: 'add-comment-rounded'}]" block="1">
|
||||
<o-link underline='0' type="primary" target="_blank" href="https://tencent.github.io/omi/" slot="extra">More
|
||||
</o-link>
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
</o-card>
|
||||
</div>
|
||||
|
||||
<div style="margin: 5%; height: 200px; width: 300px;">
|
||||
<o-card title="DNT's card" actions="[{icon: 'add-ic-call-rounded'}]" hoverable="true" block="1">
|
||||
<o-avatar slot="extra">DNT</o-avatar>
|
||||
<p>Tel:</p>
|
||||
<p>Company:</p>
|
||||
<p>...</p>
|
||||
</o-card>
|
||||
</div>
|
||||
|
||||
<div style="margin: 2% 5%; height: 200px; width: 300px;">
|
||||
<o-card bordered=true hoverable="true" title="Action card" actions="[{icon: 'add-ic-call-rounded'},{icon: 'add-comment-rounded'}]" block="1">
|
||||
<o-image slot="cover"
|
||||
src="https://cdc-old-dcloud-migrate-1258344706.cos.ap-guangzhou.myqcloud.com/data2/material/thumb/1/1190188000/VCG41N1127233809.jpg/thumb">
|
||||
</o-image>
|
||||
<div style="display: flex; justify-content: space-around;">
|
||||
<o-avatar style="margin: auto 0px;"
|
||||
src="https://wx.gtimg.com/resource/feuploader/202108/fb85c997c6476acd7a1441043fdda775_204x204.png"></o-avatar>
|
||||
<div>
|
||||
<p style="font-weight: 600; font-size: 1.2em;">Card title</p>
|
||||
<p>This is the description</p>
|
||||
</div>
|
||||
</div>
|
||||
</o-card>
|
||||
</div>
|
||||
|
||||
<div style="margin: 2% 5%; height: 200px; width: 300px;">
|
||||
<o-card hoverable="true" block="1">
|
||||
<o-image slot="cover"
|
||||
src="https://cdc-old-dcloud-migrate-1258344706.cos.ap-guangzhou.myqcloud.com/data2/material/thumb/1/1199435000/VCG211199435578.jpg/thumb">
|
||||
</o-image>
|
||||
<p style="font-weight: 500">OMI Card</p>
|
||||
<p>
|
||||
<o-link underline='0' type="primary" target="_blank" href="https://tencent.github.io/omi/" slot="extra">Welcome
|
||||
to OMI</o-link>
|
||||
</p>
|
||||
</o-card>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
{
|
||||
"name": "@omiu/card",
|
||||
"version": "0.0.8",
|
||||
"main": "dist/index.es.js",
|
||||
"exports": {
|
||||
".": "./dist/index.es.js"
|
||||
},
|
||||
"types": "types/index.d.ts",
|
||||
"scripts": {
|
||||
"start": "yarn watch & vite",
|
||||
"dev": "yarn watch & vite",
|
||||
"build": "vite build && yarn build:scss",
|
||||
"build:demo": "vite build",
|
||||
"build:scss": "sass src/index.scss src/index.css",
|
||||
"watch": "sass --watch src/index.scss src/index.css --no-source-map",
|
||||
"test": "npm run build && web-test-runner \"test/*.js\" --node-resolve"
|
||||
},
|
||||
"dependencies": {
|
||||
"omi": "latest"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@open-wc/testing": "^2.5.33",
|
||||
"@types/node": "^16.4.7",
|
||||
"@web/test-runner": "^0.13.13",
|
||||
"node-watch": "^0.7.1",
|
||||
"sass": "^1.36.0",
|
||||
"typescript": "^4.3.2",
|
||||
"vite": "^2.4.3"
|
||||
},
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"omi",
|
||||
"omiu",
|
||||
"form"
|
||||
]
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
import { tag, h, WeElement, render } from 'omi'
|
||||
|
||||
import './index.tsx'
|
||||
|
||||
export type Props = {
|
||||
|
||||
}
|
||||
|
||||
const tagName = 'my-demo'
|
||||
|
||||
|
||||
@tag(tagName)
|
||||
export default class MyDemo extends WeElement<Props> {
|
||||
|
||||
pickAction = (evt) => {
|
||||
console.log(evt.detail)
|
||||
const btn = evt.detail.action
|
||||
if(btn.icon === 'add-comment-rounded') {
|
||||
alert(btn.icon)
|
||||
} else if (btn.icon === 'add-a-photo-rounded') {
|
||||
alert(btn.icon)
|
||||
} else if (btn.icon === 'add-ic-call-rounded') {
|
||||
alert(btn.icon)
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div style="background: #F0F2F5">
|
||||
<h1 onclick={() => {
|
||||
this.update()
|
||||
}}>JSX Mode</h1>
|
||||
<div >
|
||||
<o-card onChange={this.pickAction} title="My demo" hoverable="true" actions={[{ icon: 'add-a-photo-rounded' },{ icon: 'add-ic-call-rounded' },{ icon: 'add-comment-rounded' }]}>
|
||||
<o-image
|
||||
slot="cover"
|
||||
src="https://cdc-old-dcloud-migrate-1258344706.cos.ap-guangzhou.myqcloud.com/data2/material/thumb/1/1190188000/VCG41N1127233809.jpg/thumb"
|
||||
></o-image>
|
||||
<div style="display: flex; justify-content: space-around; margin: 10px 0px">
|
||||
<o-avatar
|
||||
style="margin: auto 0px;"
|
||||
src="https://wx.gtimg.com/resource/feuploader/202108/fb85c997c6476acd7a1441043fdda775_204x204.png"
|
||||
></o-avatar>
|
||||
<div>
|
||||
<p style="font-weight: 600; font-size: 1.2em;">Card title</p>
|
||||
<p>This is the description</p>
|
||||
</div>
|
||||
</div>
|
||||
</o-card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
render(<my-demo></my-demo>, 'body', {
|
||||
ignoreAttrs: true
|
||||
})
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
:host([block]) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.o-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #FFF;
|
||||
}
|
||||
.o-card.is-border {
|
||||
border: 1px solid #EFEFEF;
|
||||
}
|
||||
.o-card.is-shadow-always {
|
||||
box-shadow: 0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017;
|
||||
}
|
||||
.o-card.is-shadow-true:hover {
|
||||
box-shadow: 0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.o-card-header {
|
||||
min-height: 48px;
|
||||
padding: 0 24px;
|
||||
border-bottom: 1px solid #EFEFEF;
|
||||
border-radius: 2px 2px 0 0;
|
||||
}
|
||||
|
||||
.o-card-title {
|
||||
float: left;
|
||||
padding: 16px 0;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.o-card-extra {
|
||||
float: right;
|
||||
margin-left: auto;
|
||||
padding: 16px 0;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.o-card-body {
|
||||
margin: 12px 24px;
|
||||
font-weight: 200;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.o-card-footer {
|
||||
height: 56px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
.o-card-btn {
|
||||
flex: 1;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border-top: 1px solid #EFEFEF;
|
||||
border-right: 1px solid #EFEFEF;
|
||||
border-left: none;
|
||||
border-bottom: none;
|
||||
background: #FFF;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
padding: 6px 12px 8px;
|
||||
}
|
||||
.o-card-btn:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.o-card-btn:hover {
|
||||
background: #EFEFEF;
|
||||
color: #07C160;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-feature-settings: "liga";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAIA;EACE;;AAGA;EACE;EACA;;;AAMR;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"index.css"}
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
:host([block]) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.o-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #FFF;
|
||||
|
||||
&.is-border {
|
||||
border: 1px solid #EFEFEF;
|
||||
}
|
||||
|
||||
&.is-shadow {
|
||||
&-always {
|
||||
box-shadow: 0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017;
|
||||
}
|
||||
&-true {
|
||||
&:hover {
|
||||
box-shadow: 0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017;
|
||||
transition: all .3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.o-card-header {
|
||||
min-height: 48px;
|
||||
padding: 0 24px;
|
||||
border-bottom: 1px solid #EFEFEF;
|
||||
border-radius: 2px 2px 0 0;
|
||||
}
|
||||
|
||||
.o-card-title {
|
||||
float: left;
|
||||
padding: 16px 0;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.o-card-extra {
|
||||
float: right;
|
||||
margin-left: auto;
|
||||
padding: 16px 0;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.o-card-body {
|
||||
margin: 12px 24px;
|
||||
font-weight: 200;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.o-card-footer {
|
||||
height: 56px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
.o-card-btn {
|
||||
flex: 1;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border-top: 1px solid #EFEFEF;
|
||||
border-right: 1px solid #EFEFEF;
|
||||
border-left: none;
|
||||
border-bottom: none;
|
||||
background: #FFF;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
padding: 6px 12px 8px;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #EFEFEF;
|
||||
color: #07C160;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
import { tag, h, WeElement, OverwriteProps, extractClass } from 'omi'
|
||||
|
||||
import * as css from './index.scss'
|
||||
|
||||
export type Attrs = {
|
||||
/**
|
||||
* 标题内容
|
||||
*/
|
||||
title?: string,
|
||||
/**
|
||||
* 是否有边框
|
||||
*/
|
||||
bordered?: boolean,
|
||||
/**
|
||||
* 当前浮动状态
|
||||
*/
|
||||
hoverable?: 'always' | 'true' | 'false',
|
||||
/**
|
||||
* 选项列表
|
||||
*/
|
||||
actions?: any[],
|
||||
/**
|
||||
* 选项被点击后的回调函数
|
||||
*/
|
||||
onChange?: (evt: any, index: any) => void
|
||||
}
|
||||
|
||||
const tagName = 'o-card'
|
||||
declare global {
|
||||
namespace JSX {
|
||||
interface IntrinsicElements {
|
||||
[tagName]: Omi.Props & Attrs
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export type Props = OverwriteProps<Attrs, { title?: string,
|
||||
hoverable?: 'always' | 'true' | 'false',
|
||||
bordered?: boolean,
|
||||
actions?: any[],
|
||||
onChange?: (evt: any, index: any) => void }>
|
||||
|
||||
@tag(tagName)
|
||||
export default class Card extends WeElement<Props> {
|
||||
|
||||
static css = css.default ? css.default : css
|
||||
|
||||
static defaultProps = {
|
||||
title: '',
|
||||
hoverable: 'true',
|
||||
bordered: true
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
title: String,
|
||||
hoverable: String,
|
||||
actions: Array,
|
||||
bordered: Boolean
|
||||
}
|
||||
|
||||
onIconClick = (evt, index, isOn) => {
|
||||
this.fire('change', {
|
||||
action: isOn,
|
||||
index: index,
|
||||
evt: evt.currentTarget
|
||||
})
|
||||
}
|
||||
|
||||
_iconTag: any
|
||||
|
||||
render(props: Props) {
|
||||
return (
|
||||
<div {...extractClass(props, 'o-card', {
|
||||
['is-shadow-' + props.hoverable]: props.hoverable,
|
||||
'is-border': props.bordered
|
||||
})}>
|
||||
<slot name="cover">
|
||||
<div class="o-card-header">
|
||||
<div class="o-card-title">{props.title}</div>
|
||||
<div class="o-card-extra">
|
||||
<slot name="extra"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</slot>
|
||||
|
||||
<div class="o-card-body">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
{props.actions ? (
|
||||
<div class="o-card-footer">
|
||||
{props.actions.map((item, index) => {
|
||||
this._iconTag = 'o-icon-' + item.icon
|
||||
return <button onClick={evt => { this.onIconClick(evt, index, props.actions[index]) }} class="o-card-btn">
|
||||
<this._iconTag class="icon" />
|
||||
</button>
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
import { html, fixture, expect, assert } from '@open-wc/testing'
|
||||
|
||||
import '../dist/index.es.js'
|
||||
|
||||
|
||||
describe('o-card', () => {
|
||||
it('default', async () => {
|
||||
const el = await fixture(html`<o-card></o-card>`)
|
||||
const card = el.shadowRoot.querySelector('div')
|
||||
const classList = card.getAttribute('class').split(' ')
|
||||
expect(classList.includes('o-card')).to.be.true
|
||||
})
|
||||
|
||||
it('hoverable prop', async () => {
|
||||
const el = await fixture(html`<o-card hoverable="true"></o-card>`)
|
||||
const card = el.shadowRoot.querySelector('div')
|
||||
const classList = card.getAttribute('class').split(' ')
|
||||
expect(classList.includes('is-shadow-true')).to.be.true
|
||||
})
|
||||
|
||||
it('bordered prop', async () => {
|
||||
const el = await fixture(html`<o-card bordered=true></o-card>`)
|
||||
const card = el.shadowRoot.querySelector('div')
|
||||
const classList = card.getAttribute('class').split(' ')
|
||||
expect(classList.includes('is-border')).to.be.true
|
||||
})
|
||||
|
||||
it('action prop', async () => {
|
||||
const el = await fixture(html`<o-card actions="[{icon: 'add-ic-call-rounded'}]"></o-card>`)
|
||||
const domNode = el.shadowRoot.querySelector('o-icon-add-ic-call-rounded')
|
||||
expect(domNode).to.not.be.null
|
||||
})
|
||||
|
||||
it('actions prop', async () => {
|
||||
const el = await fixture(html`<o-card actions="[{icon: 'add-a-photo-rounded'},{icon: 'add-ic-call-rounded'},{icon: 'add-comment-rounded'}]"></o-card>`)
|
||||
const actions = el.shadowRoot.querySelector('.o-card-footer').childNodes
|
||||
assert.lengthOf(actions, 3, 'actions[] Rendered correctly')
|
||||
})
|
||||
|
||||
it('title prop', async () => {
|
||||
const el = await fixture(html`<o-card title="test content"></o-card>`)
|
||||
const str = el.shadowRoot.querySelector('.o-card-title').innerHTML
|
||||
assert.equal(str, 'test content', '{props.title} equal `test content`')
|
||||
})
|
||||
|
||||
})
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"module": "esnext",
|
||||
"lib": [
|
||||
"es2017",
|
||||
"dom",
|
||||
"dom.iterable"
|
||||
],
|
||||
"declaration": true,
|
||||
"emitDeclarationOnly": true,
|
||||
"outDir": "./types",
|
||||
"strict": false,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"moduleResolution": "node",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"experimentalDecorators": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"jsx": "react",
|
||||
"jsxFactory": "h",
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx"
|
||||
],
|
||||
"exclude": []
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
import { resolve } from 'path'
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
build: {
|
||||
lib: {
|
||||
entry: resolve(__dirname, 'src/index.tsx'),
|
||||
name: 'index',
|
||||
formats: ['es'],
|
||||
fileName: (format) => `index.${format}.js`
|
||||
},
|
||||
rollupOptions: {
|
||||
external: /^omi/,
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: resolve(__dirname, "index.html"),
|
||||
admin: resolve(__dirname, "demo.html")
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
esbuild: {
|
||||
jsxFactory: 'h',
|
||||
jsxFragment: 'Fragment'
|
||||
}
|
||||
})
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
types
|
||||
*.local
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
# 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
|
||||
```
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Omiu Cascader</title>
|
||||
<script type="module" src="/src/demo.tsx"></script>
|
||||
</head>
|
||||
|
||||
<body></body>
|
||||
|
||||
|
||||
</html>
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Omiu Cascader</title>
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
<style>
|
||||
.demo-container {
|
||||
width: 100%;
|
||||
height: 666px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.label {
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="background-color: #eee">
|
||||
<div class="demo-container">
|
||||
<div class="label">Click 触发子菜单</div>
|
||||
<o-cascader options=""></o-cascader>
|
||||
禁用
|
||||
<o-cascader
|
||||
disabled
|
||||
value="['components', 'basic', 'card']"
|
||||
options=""
|
||||
></o-cascader>
|
||||
Size: medium
|
||||
<o-cascader size="medium"></o-cascader>
|
||||
Size: small
|
||||
<o-cascader size="small"></o-cascader>
|
||||
Size: mini
|
||||
<o-cascader size="mini"></o-cascader>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const options = [
|
||||
{
|
||||
value: 'components',
|
||||
label: '组件',
|
||||
children: [
|
||||
{
|
||||
value: 'basic',
|
||||
label: '基础',
|
||||
children: [
|
||||
{
|
||||
value: 'input',
|
||||
label: '输入框'
|
||||
},
|
||||
{
|
||||
value: 'button',
|
||||
label: '按钮'
|
||||
},
|
||||
{
|
||||
value: 'card',
|
||||
label: '卡片'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'form',
|
||||
label: '表单',
|
||||
children: [
|
||||
{
|
||||
value: 'select',
|
||||
label: '选择器'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'advanced',
|
||||
label: '高级',
|
||||
children: [
|
||||
{
|
||||
value: 'tree',
|
||||
label: '树'
|
||||
},
|
||||
{
|
||||
value: 'cascader',
|
||||
label: '级联选择器'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'author',
|
||||
label: '作者',
|
||||
children: [
|
||||
{
|
||||
value: 'dntzhang',
|
||||
label: '当耐特'
|
||||
},
|
||||
{
|
||||
value: 'YunYouJun',
|
||||
label: '云游君'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'disabled',
|
||||
label: '禁用',
|
||||
disabled: true
|
||||
}
|
||||
]
|
||||
|
||||
// set default value
|
||||
const elements = document.getElementsByTagName('o-cascader')
|
||||
Array.from(elements).map((el) =>
|
||||
el.setAttribute('options', JSON.stringify(options))
|
||||
)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
{
|
||||
"name": "@omiu/cascader",
|
||||
"version": "0.0.5",
|
||||
"main": "dist/index.es.js",
|
||||
"exports": {
|
||||
".": "./dist/index.es.js"
|
||||
},
|
||||
"types": "types/index.d.ts",
|
||||
"files": [
|
||||
"dist",
|
||||
"types"
|
||||
],
|
||||
"scripts": {
|
||||
"start": "yarn watch & vite",
|
||||
"dev": "yarn watch & vite",
|
||||
"build": "vite build && yarn build:scss",
|
||||
"build:demo": "vite build",
|
||||
"build:scss": "sass src/index.scss src/index.css",
|
||||
"watch": "sass --watch src/index.scss src/index.css --no-source-map"
|
||||
},
|
||||
"dependencies": {
|
||||
"omi": "latest"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^16.4.7",
|
||||
"node-watch": "^0.7.1",
|
||||
"sass": "^1.36.0",
|
||||
"typescript": "^4.3.2",
|
||||
"vite": "^2.4.3"
|
||||
},
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"omi",
|
||||
"omiu",
|
||||
"cascader"
|
||||
]
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import { tag, WeElement, h, render } from 'omi'
|
||||
|
||||
import './index.tsx'
|
||||
|
||||
@tag('my-demo')
|
||||
export default class extends WeElement {
|
||||
render(props) {
|
||||
return <div>
|
||||
demo
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
render(<my-demo></my-demo>, 'body', {
|
||||
ignoreAttrs: true
|
||||
})
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
.o-cascader {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
outline: 0;
|
||||
}
|
||||
.o-cascader-dropdown__wrap {
|
||||
position: relative;
|
||||
}
|
||||
.o-cascader-dropdown__menu {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 6px 0;
|
||||
list-style: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.o-cascader-dropdown__item {
|
||||
position: relative;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.o-cascader-dropdown__item.selected, .o-cascader-dropdown__item:hover {
|
||||
background: #f1fff8;
|
||||
}
|
||||
.o-cascader-dropdown__item-suffix {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
.o-cascader-dropdown__item.disabled {
|
||||
color: #c0c4cc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.o-cascader-dropdown-right__wrap {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
width: 190px;
|
||||
background-color: #fff;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0 2px 12px 0;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;AAGE;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA","file":"index.css"}
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
.o-cascader {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
outline: 0;
|
||||
|
||||
&-dropdown {
|
||||
&__wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__menu {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 6px 0;
|
||||
list-style: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&__item {
|
||||
position: relative;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
|
||||
&.selected,
|
||||
&:hover {
|
||||
background: #f1fff8;
|
||||
}
|
||||
|
||||
&-suffix {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: #c0c4cc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&-right__wrap {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
width: 190px;
|
||||
background-color: #fff;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0 2px 12px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,192 +0,0 @@
|
|||
import { tag, h, WeElement } from 'omi'
|
||||
import '../../input'
|
||||
import '../../popover'
|
||||
import '../../icon/esm/check'
|
||||
import '../../icon/esm/keyboard-arrow-right'
|
||||
import '../../icon/esm/keyboard-arrow-down'
|
||||
import * as css from './index.scss'
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
@tag('o-cascader')
|
||||
export default class Cascader extends WeElement<CascaderProps> {
|
||||
static css = css.default ? css.default : css
|
||||
|
||||
static defaultProps = {
|
||||
disabled: false,
|
||||
value: [],
|
||||
options: [],
|
||||
size: 'default'
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
disabled: Boolean,
|
||||
value: Array,
|
||||
options: Array,
|
||||
size: String
|
||||
}
|
||||
|
||||
installed() {
|
||||
window.addEventListener('click', (e) => {
|
||||
// admin 系统里 e.target.localName 直接输出 my-app 了
|
||||
// if (e.target.localName === 'o-cascader') return
|
||||
if (this.popoverRef.isShow) {
|
||||
this.popoverRef.isShow = false
|
||||
this.popoverRef.update()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据当前 value 获取 label 值
|
||||
* @param value
|
||||
*/
|
||||
getLabelsByValue(value: string[]): string {
|
||||
let labels: string[] = []
|
||||
let curOptions = this.props.options
|
||||
value.forEach((val) => {
|
||||
if (!curOptions) return
|
||||
const curOption = curOptions.find((item) => item.value === val)
|
||||
if (curOption) {
|
||||
labels.push(curOption.label)
|
||||
curOptions = curOption.children
|
||||
}
|
||||
})
|
||||
|
||||
return labels.join(' / ')
|
||||
}
|
||||
|
||||
// 引用的元素
|
||||
popoverRef: HTMLElement | null = null
|
||||
inputRef: HTMLElement | null = null
|
||||
|
||||
render(props: CascaderProps) {
|
||||
const classes = [
|
||||
'o-cascader',
|
||||
props.size ? 'o-cascader--' + props.size : '',
|
||||
props.disabled ? 'disabled' : ''
|
||||
].join(' ')
|
||||
|
||||
/**
|
||||
* 展示右侧面板
|
||||
* @param index 层级
|
||||
*/
|
||||
const showRightPanel = (options: CascaderOption[], index: number) => {
|
||||
if (!props.value || !props.value.length) return
|
||||
const curOption = options.find(
|
||||
(item) => item.value === props.value[index]
|
||||
)
|
||||
return (
|
||||
curOption &&
|
||||
curOption.children && (
|
||||
<div class="o-cascader-dropdown-right__wrap">
|
||||
<ul class="o-cascader-dropdown__menu">
|
||||
{curOption.children.map((option) =>
|
||||
CascaderOptionItem(option, index + 1)
|
||||
)}
|
||||
{showRightPanel(curOption.children, index + 1)}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
const CascaderOptionItem = (item: CascaderOption, index: number) => {
|
||||
return (
|
||||
<li
|
||||
class={[
|
||||
'o-cascader-dropdown__item',
|
||||
props.value[index] === item.value ? 'selected' : '',
|
||||
item.disabled ? 'disabled' : ''
|
||||
].join(' ')}
|
||||
onClick={(evt) => {
|
||||
if (item.disabled) return
|
||||
const temp = props.value.slice(0, index)
|
||||
temp.push(item.value)
|
||||
this.updateProps({ value: temp })
|
||||
props.onOptionClick && props.onOptionClick(item, index, evt)
|
||||
}}
|
||||
>
|
||||
<span>{item.label}</span>
|
||||
<span class="o-cascader-dropdown__item-suffix">
|
||||
{item.children && <o-icon-keyboard-arrow-right />}
|
||||
</span>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div class={classes} onclick={(e) => e.stopPropagation()}>
|
||||
<o-popover
|
||||
ref={(e) => (this.popoverRef = e)}
|
||||
trigger="manual"
|
||||
position="bottom"
|
||||
>
|
||||
<o-input
|
||||
class="o-cascader-input"
|
||||
ref={(e) => (this.inputRef = e)}
|
||||
value={this.getLabelsByValue(props.value)}
|
||||
suffix-icon="keyboard-arrow-down"
|
||||
disabled
|
||||
size={props.size}
|
||||
onClick={(e) => {
|
||||
if (props.disabled) return
|
||||
this.popoverRef.onEnter(e)
|
||||
}}
|
||||
style={{
|
||||
cursor: props.disabled ? 'not-allowed' : 'pointer',
|
||||
color: props.disabled ? '' : '#606266',
|
||||
// border: 'transparent',
|
||||
backgroundColor: props.disabled ? '' : 'white',
|
||||
borderRadius: 5
|
||||
}}
|
||||
></o-input>
|
||||
|
||||
<div slot="popover" class="o-cascader-dropdown__wrap">
|
||||
<ul class="o-cascader-dropdown__menu">
|
||||
{props.options.map((item) => CascaderOptionItem(item, 0))}
|
||||
</ul>
|
||||
{showRightPanel(props.options, 0)}
|
||||
</div>
|
||||
</o-popover>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'o-cascader': Cascader
|
||||
}
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"module": "esnext",
|
||||
"lib": ["es2017", "dom", "dom.iterable"],
|
||||
"declaration": true,
|
||||
"emitDeclarationOnly": true,
|
||||
"outDir": "./types",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"moduleResolution": "node",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"experimentalDecorators": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"jsx": "react",
|
||||
"jsxFactory": "h",
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/index.tsx"],
|
||||
"exclude": []
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
import { resolve } from 'path'
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
build: {
|
||||
lib: {
|
||||
entry: resolve(__dirname, 'src/index.tsx'),
|
||||
name: 'index',
|
||||
formats: ['es'],
|
||||
fileName: (format) => `index.${format}.js`
|
||||
},
|
||||
rollupOptions: {
|
||||
external: /^omi/,
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: resolve(__dirname, "index.html"),
|
||||
admin: resolve(__dirname, "demo.html")
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
esbuild: {
|
||||
jsxFactory: 'h',
|
||||
jsxFragment: 'Fragment'
|
||||
}
|
||||
})
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
types
|
||||
*.local
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
# 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
|
||||
```
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Omiu Chart Card</title>
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/omi"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@omiu/icon@0.0.2/people.js"></script>
|
||||
</head>
|
||||
<body style="background-color: #eee">
|
||||
<o-chart-card chart-type="bar" content="9987" describe="Members online" color="#39f" data="[12, 19, 3, 5, 2, 3]" labels="['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']">
|
||||
<o-icon-people width="2em" height="2em" style="font-size: 3em;"></o-icon-people>
|
||||
</o-chart-card>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
{
|
||||
"name": "@omiu/chart-card",
|
||||
"version": "0.0.7",
|
||||
"main": "dist/index.es.js",
|
||||
"exports": {
|
||||
".": "./dist/index.es.js"
|
||||
},
|
||||
"types": "types/index.d.ts",
|
||||
"files": [
|
||||
"dist",
|
||||
"types"
|
||||
],
|
||||
"scripts": {
|
||||
"start": "yarn watch & vite",
|
||||
"build": "vite build && yarn build:scss",
|
||||
"build:demo": "vite build",
|
||||
"build:scss": "sass src/index.scss src/index.css",
|
||||
"watch": "sass --watch src/index.scss src/index.css --no-source-map"
|
||||
},
|
||||
"dependencies": {
|
||||
"@omiu/chart": "^0.0.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^16.4.7",
|
||||
"node-watch": "^0.7.1",
|
||||
"omi": "^6.19.23",
|
||||
"sass": "^1.36.0",
|
||||
"typescript": "^4.3.2",
|
||||
"vite": "^2.4.3"
|
||||
},
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"omi",
|
||||
"omiu",
|
||||
"cascader"
|
||||
]
|
||||
}
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
.card {
|
||||
position: relative;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
background-clip: border-box;
|
||||
border: 1px solid;
|
||||
border-radius: 0.25rem;
|
||||
background-color: #fff;
|
||||
border-color: #d8dbe0;
|
||||
}
|
||||
|
||||
.card[class^=bg-],
|
||||
.card[class*=" bg-"] {
|
||||
border-color: rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.text-white {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.align-items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.justify-content-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.d-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
min-height: 1px;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.pb-0,
|
||||
.py-0 {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.ml-3,
|
||||
.mx-3,
|
||||
html:not([dir=rtl]) .mfs-3 {
|
||||
margin-left: 1rem !important;
|
||||
}
|
||||
|
||||
.mr-3,
|
||||
.mx-3 {
|
||||
margin-right: 1rem !important;
|
||||
}
|
||||
|
||||
.mt-3,
|
||||
.my-3 {
|
||||
margin-top: 1rem !important;
|
||||
}
|
||||
|
||||
.nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.text-value-lg {
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
|
||||
[class^=text-value] {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;EAGE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE","file":"index.css"}
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
.card {
|
||||
position: relative;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
background-clip: border-box;
|
||||
border: 1px solid;
|
||||
border-radius: .25rem;
|
||||
background-color: #fff;
|
||||
border-color: #d8dbe0;
|
||||
}
|
||||
|
||||
.card[class^=bg-],
|
||||
.card[class*=" bg-"] {
|
||||
border-color: rgba(0, 0, 0, .125);
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.text-white {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.align-items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.justify-content-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.d-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
min-height: 1px;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.pb-0,
|
||||
.py-0 {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.ml-3,
|
||||
.mx-3,
|
||||
html:not([dir=rtl]) .mfs-3 {
|
||||
margin-left: 1rem !important;
|
||||
}
|
||||
|
||||
.mr-3,
|
||||
.mx-3 {
|
||||
margin-right: 1rem !important;
|
||||
}
|
||||
|
||||
.mt-3,
|
||||
.my-3 {
|
||||
margin-top: 1rem !important;
|
||||
}
|
||||
|
||||
.nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.text-value-lg {
|
||||
font-size: 1.3125rem;
|
||||
}
|
||||
|
||||
[class^=text-value] {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
import { tag, h, WeElement } from 'omi'
|
||||
import * as css from './index.scss'
|
||||
//import '../../chart/src/index.tsx'
|
||||
|
||||
import '@omiu/chart'
|
||||
export interface Props {
|
||||
color: string
|
||||
content: string | number
|
||||
describe: string
|
||||
labels: string[]
|
||||
data: number[],
|
||||
chartType: 'line' | 'bar'
|
||||
}
|
||||
|
||||
@tag('o-chart-card')
|
||||
export default class ChartCard extends WeElement<Props> {
|
||||
static css = css.default ? css.default : css
|
||||
|
||||
static defaultProps = {
|
||||
color: 'black',
|
||||
chartType: 'line'
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
color: String,
|
||||
labels: Array,
|
||||
data: Array,
|
||||
content: String,
|
||||
describe: String,
|
||||
chartType: String
|
||||
}
|
||||
|
||||
chartData = {
|
||||
labels: null,
|
||||
datasets: [{
|
||||
// label: '# of Votes',
|
||||
data: null,
|
||||
segment: {
|
||||
borderColor: 'white',
|
||||
},
|
||||
|
||||
|
||||
barPercentage: 0.5,
|
||||
barThickness: 6,
|
||||
maxBarThickness: 8,
|
||||
minBarLength: 2,
|
||||
|
||||
backgroundColor: [],
|
||||
borderColor: ['white', 'white', 'white', 'white', 'white', 'white'],
|
||||
borderWidth: 1
|
||||
}]
|
||||
}
|
||||
|
||||
chartOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
// https://www.chartjs.org/docs/latest/configuration/responsive.html
|
||||
// Note that in order for the above code to correctly resize the chart height, the maintainAspectRatio option must also be set to false.
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
yAxes: { display: false },
|
||||
xAxes: { display: false }
|
||||
}
|
||||
}
|
||||
|
||||
render(props: Props) {
|
||||
|
||||
|
||||
props.labels.forEach(_ => {
|
||||
this.chartData.datasets[0].backgroundColor.push(props.color)
|
||||
})
|
||||
this.chartTagName = 'o-' + props.chartType
|
||||
this.chartData.labels = props.labels
|
||||
this.chartData.datasets[0].data = props.data
|
||||
return <div class="card text-white" style={{ backgroundColor: props.color }}>
|
||||
<div class="card-body card-body pb-0 d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<div class="text-value-lg">{props.content}</div>
|
||||
<div class="nowrap">{props.describe}</div>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<slot>ICON</slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 mx-3" >
|
||||
<this.chartTagName css="canvas{width: 100% !important;}" ignoreAttrs={true} height="70" data={this.chartData} options={this.chartOptions}></this.chartTagName>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'o-chart-card': ChartCard
|
||||
}
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"module": "esnext",
|
||||
"lib": ["es2017", "dom", "dom.iterable"],
|
||||
"declaration": true,
|
||||
"emitDeclarationOnly": true,
|
||||
"outDir": "./types",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"moduleResolution": "node",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"experimentalDecorators": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"jsx": "react",
|
||||
"jsxFactory": "h",
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/index.tsx"],
|
||||
"exclude": []
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import path from 'path'
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
build: {
|
||||
lib: {
|
||||
entry: path.resolve(__dirname, 'src/index.tsx'),
|
||||
name: 'index',
|
||||
formats: ['es'],
|
||||
fileName: (format) => `index.${format}.js`
|
||||
},
|
||||
rollupOptions: {
|
||||
external: /^omi/
|
||||
}
|
||||
},
|
||||
esbuild: {
|
||||
jsxFactory: 'h',
|
||||
jsxFragment: 'Fragment'
|
||||
}
|
||||
})
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
{
|
||||
"name": "@omiu/chart",
|
||||
"version": "0.0.5",
|
||||
"version": "0.0.1",
|
||||
"description": "Mobile pop-up options list",
|
||||
"docsExtend": {
|
||||
"cnName": "图表",
|
||||
"cnDescription": "图表",
|
||||
"cnName": "弹出式菜单",
|
||||
"cnDescription": "移动端弹出式选项列表",
|
||||
"codepen": "wvKdoNJ",
|
||||
"codepenHeight": 351,
|
||||
"codepenDefaultTab": "html,result"
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
"scripts": {
|
||||
"docs": "node ./scripts/docs-gen.js",
|
||||
"start": "node ./scripts/webpack.build.js -- demo",
|
||||
"build": "node ./scripts/webpack.build.js -- build && rollup -c scripts/rollup.config.js"
|
||||
"build": "node ./scripts/webpack.build.js -- build && rollup -c scripts/rollup.config.js && node ./scripts/rollup.end.js"
|
||||
},
|
||||
"typings": "./dist/index.d.ts",
|
||||
"repository": {
|
||||
|
|
@ -55,6 +55,7 @@
|
|||
"less": "^3.9.0",
|
||||
"less-loader": "^4.1.0",
|
||||
"mini-css-extract-plugin": "^0.4.5",
|
||||
"node-sass": "^4.12.0",
|
||||
"omi": "latest",
|
||||
"omio": "latest",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.1",
|
||||
|
|
@ -65,7 +66,6 @@
|
|||
"rollup-plugin-node-resolve": "^5.2.0",
|
||||
"rollup-plugin-scss": "^2.4.0",
|
||||
"rollup-plugin-typescript": "^1.0.1",
|
||||
"sass": "^1.38.0",
|
||||
"sass-loader": "^7.1.0",
|
||||
"style-loader": "^0.23.1",
|
||||
"to-string-loader": "^1.1.5",
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@omiu/common": "latest",
|
||||
"chart.js": "^3.5.0",
|
||||
"chart.js": "^2.9.3",
|
||||
"omi": "latest"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,12 +23,12 @@ export default {
|
|||
nodeResolve({
|
||||
main: true
|
||||
}),
|
||||
// scss({
|
||||
// //output: false,
|
||||
// output: function (styles, styleNodes) {
|
||||
// fs.writeFileSync('./src/index.css', styles)
|
||||
// },
|
||||
// }),
|
||||
scss({
|
||||
//output: false,
|
||||
output: function (styles, styleNodes) {
|
||||
fs.writeFileSync('./src/index.css', styles)
|
||||
},
|
||||
}),
|
||||
typescript(),
|
||||
commonjs(),
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
const fs = require('fs')
|
||||
|
||||
const css = fs.readFileSync('./src/index.css')
|
||||
|
||||
const js = fs.readFileSync('./src/index.esm.js', 'utf-8')
|
||||
|
||||
|
||||
fs.writeFileSync('./src/index.esm.js',
|
||||
js.replace(`var css = /*#__PURE__*/Object.freeze({
|
||||
__proto__: null
|
||||
});`, `
|
||||
var css = \`${css}\`
|
||||
`)
|
||||
)
|
||||
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
undefined
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
* @omiu/chart v0.0.5 http://omijs.org
|
||||
* @omiu/chart v0.0.1 http://omijs.org
|
||||
* Front End Cross-Frameworks Framework.
|
||||
* By dntzhang https://github.com/dntzhang
|
||||
* Github: https://github.com/Tencent/omi
|
||||
|
|
@ -7,7 +7,8 @@
|
|||
*/
|
||||
|
||||
import { h, tag, WeElement } from 'omi';
|
||||
import { Chart, ArcElement, LineElement, BarElement, PointElement, BarController, BubbleController, DoughnutController, LineController, PieController, PolarAreaController, RadarController, ScatterController, CategoryScale, LinearScale, LogarithmicScale, RadialLinearScale, TimeScale, TimeSeriesScale, Decimation, Filler, Legend, Title, Tooltip } from 'chart.js';
|
||||
import * as Chart from 'chart.js';
|
||||
import { Scatter as Scatter$1, PolarArea as PolarArea$1 } from 'chart.js';
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
|
|
@ -45,7 +46,6 @@ function __decorate(decorators, target, key, desc) {
|
|||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
}
|
||||
|
||||
Chart.register(ArcElement, LineElement, BarElement, PointElement, BarController, BubbleController, DoughnutController, LineController, PieController, PolarAreaController, RadarController, ScatterController, CategoryScale, LinearScale, LogarithmicScale, RadialLinearScale, TimeScale, TimeSeriesScale, Decimation, Filler, Legend, Title, Tooltip);
|
||||
var ChartBase = /** @class */ (function (_super) {
|
||||
__extends(ChartBase, _super);
|
||||
function ChartBase() {
|
||||
|
|
@ -131,8 +131,7 @@ var Scatter = /** @class */ (function (_super) {
|
|||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
Scatter.prototype.installed = function () {
|
||||
this.chart = new Chart(this.canvas.getContext('2d'), {
|
||||
type: 'scatter',
|
||||
this.chart = new Scatter$1(this.canvas.getContext('2d'), {
|
||||
data: this.props.data,
|
||||
options: this.props.options
|
||||
});
|
||||
|
|
@ -182,8 +181,7 @@ var PolarArea = /** @class */ (function (_super) {
|
|||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
PolarArea.prototype.installed = function () {
|
||||
this.chart = new Chart(this.canvas.getContext('2d'), {
|
||||
type: 'polarArea',
|
||||
this.chart = new PolarArea$1(this.canvas.getContext('2d'), {
|
||||
data: this.props.data,
|
||||
options: this.props.options
|
||||
});
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -33925,9 +33925,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|||
};
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
var omi_1 = __webpack_require__(/*! omi */ "omi");
|
||||
//https://www.chartjs.org/docs/next/getting-started/integration.html
|
||||
var chart_js_1 = __webpack_require__(/*! chart.js */ "./node_modules/_chart.js@2.9.3@chart.js/dist/Chart.js");
|
||||
chart_js_1.Chart.register(chart_js_1.ArcElement, chart_js_1.LineElement, chart_js_1.BarElement, chart_js_1.PointElement, chart_js_1.BarController, chart_js_1.BubbleController, chart_js_1.DoughnutController, chart_js_1.LineController, chart_js_1.PieController, chart_js_1.PolarAreaController, chart_js_1.RadarController, chart_js_1.ScatterController, chart_js_1.CategoryScale, chart_js_1.LinearScale, chart_js_1.LogarithmicScale, chart_js_1.RadialLinearScale, chart_js_1.TimeScale, chart_js_1.TimeSeriesScale, chart_js_1.Decimation, chart_js_1.Filler, chart_js_1.Legend, chart_js_1.Title, chart_js_1.Tooltip);
|
||||
var Chart = __webpack_require__(/*! chart.js */ "./node_modules/_chart.js@2.9.3@chart.js/dist/Chart.js");
|
||||
var ChartBase = /** @class */ (function (_super) {
|
||||
__extends(ChartBase, _super);
|
||||
function ChartBase() {
|
||||
|
|
@ -33961,7 +33959,7 @@ var Bar = /** @class */ (function (_super) {
|
|||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
Bar.prototype.installed = function () {
|
||||
this.chart = new chart_js_1.Chart(this.canvas.getContext('2d'), {
|
||||
this.chart = new Chart(this.canvas.getContext('2d'), {
|
||||
//@ts-ignore
|
||||
type: this.props.horizontal ? 'horizontalBar' : 'bar',
|
||||
data: this.props.data,
|
||||
|
|
@ -33979,7 +33977,7 @@ var Line = /** @class */ (function (_super) {
|
|||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
Line.prototype.installed = function () {
|
||||
this.chart = new chart_js_1.Chart(this.canvas.getContext('2d'), {
|
||||
this.chart = new Chart(this.canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: this.props.data,
|
||||
options: this.props.options
|
||||
|
|
@ -33996,7 +33994,7 @@ var Radar = /** @class */ (function (_super) {
|
|||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
Radar.prototype.installed = function () {
|
||||
this.chart = new chart_js_1.Chart(this.canvas.getContext('2d'), {
|
||||
this.chart = new Chart(this.canvas.getContext('2d'), {
|
||||
type: 'radar',
|
||||
data: this.props.data,
|
||||
options: this.props.options
|
||||
|
|
@ -34013,8 +34011,7 @@ var Scatter = /** @class */ (function (_super) {
|
|||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
Scatter.prototype.installed = function () {
|
||||
this.chart = new chart_js_1.Chart(this.canvas.getContext('2d'), {
|
||||
type: 'scatter',
|
||||
this.chart = new Chart.Scatter(this.canvas.getContext('2d'), {
|
||||
data: this.props.data,
|
||||
options: this.props.options
|
||||
});
|
||||
|
|
@ -34030,7 +34027,7 @@ var Doughnut = /** @class */ (function (_super) {
|
|||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
Doughnut.prototype.installed = function () {
|
||||
this.chart = new chart_js_1.Chart(this.canvas.getContext('2d'), {
|
||||
this.chart = new Chart(this.canvas.getContext('2d'), {
|
||||
type: 'doughnut',
|
||||
data: this.props.data,
|
||||
options: this.props.options
|
||||
|
|
@ -34047,7 +34044,7 @@ var Pie = /** @class */ (function (_super) {
|
|||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
Pie.prototype.installed = function () {
|
||||
this.chart = new chart_js_1.Chart(this.canvas.getContext('2d'), {
|
||||
this.chart = new Chart(this.canvas.getContext('2d'), {
|
||||
type: 'pie',
|
||||
data: this.props.data,
|
||||
options: this.props.options
|
||||
|
|
@ -34064,8 +34061,7 @@ var PolarArea = /** @class */ (function (_super) {
|
|||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
PolarArea.prototype.installed = function () {
|
||||
this.chart = new chart_js_1.Chart(this.canvas.getContext('2d'), {
|
||||
type: 'polarArea',
|
||||
this.chart = new Chart.PolarArea(this.canvas.getContext('2d'), {
|
||||
data: this.props.data,
|
||||
options: this.props.options
|
||||
});
|
||||
|
|
@ -34089,7 +34085,7 @@ var Bubble = /** @class */ (function (_super) {
|
|||
var $w = context.chart.width;
|
||||
return (new Function('$v', '$w', 'return ' + exp))($v, $w);
|
||||
};
|
||||
this.chart = new chart_js_1.Chart(this.canvas.getContext('2d'), {
|
||||
this.chart = new Chart(this.canvas.getContext('2d'), {
|
||||
type: 'bubble',
|
||||
data: this.props.data,
|
||||
options: this.props.options
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,59 +1,5 @@
|
|||
import { h, WeElement, tag } from 'omi'
|
||||
//https://www.chartjs.org/docs/next/getting-started/integration.html
|
||||
import {
|
||||
Chart,
|
||||
ArcElement,
|
||||
LineElement,
|
||||
BarElement,
|
||||
PointElement,
|
||||
BarController,
|
||||
BubbleController,
|
||||
DoughnutController,
|
||||
LineController,
|
||||
PieController,
|
||||
PolarAreaController,
|
||||
RadarController,
|
||||
ScatterController,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
LogarithmicScale,
|
||||
RadialLinearScale,
|
||||
TimeScale,
|
||||
TimeSeriesScale,
|
||||
Decimation,
|
||||
Filler,
|
||||
Legend,
|
||||
Title,
|
||||
Tooltip
|
||||
} from 'chart.js'
|
||||
|
||||
Chart.register(
|
||||
ArcElement,
|
||||
LineElement,
|
||||
BarElement,
|
||||
PointElement,
|
||||
BarController,
|
||||
BubbleController,
|
||||
DoughnutController,
|
||||
LineController,
|
||||
PieController,
|
||||
PolarAreaController,
|
||||
RadarController,
|
||||
ScatterController,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
LogarithmicScale,
|
||||
RadialLinearScale,
|
||||
TimeScale,
|
||||
TimeSeriesScale,
|
||||
Decimation,
|
||||
Filler,
|
||||
Legend,
|
||||
Title,
|
||||
Tooltip
|
||||
)
|
||||
|
||||
|
||||
import * as Chart from 'chart.js'
|
||||
|
||||
interface Props {
|
||||
data: object,
|
||||
|
|
@ -134,8 +80,7 @@ class Radar extends ChartBase {
|
|||
@tag('o-scatter')
|
||||
class Scatter extends ChartBase {
|
||||
installed() {
|
||||
this.chart = new Chart(this.canvas.getContext('2d'), {
|
||||
type: 'scatter',
|
||||
this.chart = new Chart.Scatter(this.canvas.getContext('2d'), {
|
||||
data: this.props.data,
|
||||
options: this.props.options
|
||||
})
|
||||
|
|
@ -167,8 +112,7 @@ class Pie extends ChartBase {
|
|||
@tag('o-polar-area')
|
||||
class PolarArea extends ChartBase {
|
||||
installed() {
|
||||
this.chart = new Chart(this.canvas.getContext('2d'), {
|
||||
type: 'polarArea',
|
||||
this.chart = new Chart.PolarArea(this.canvas.getContext('2d'), {
|
||||
data: this.props.data,
|
||||
options: this.props.options
|
||||
})
|
||||
|
|
|
|||
|
|
@ -11,4 +11,4 @@
|
|||
"include": [
|
||||
"src/**/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
.DS_Store
|
||||
dist
|
||||
node_modules
|
||||
*.local
|
||||
*.lock
|
||||
*.log
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue