DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'master' into master

This commit is contained in:
当耐特 2021-08-09 20:58:46 +08:00 committed by GitHub
parent 61ad05a3e3 da2cfde2fd
commit 97981435c4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
197 changed files with 5967 additions and 2265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/common/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@omiu/common",
"version": "0.0.10",
"version": "0.0.11",
"description": "Omi UI Components.",
"main": "src/index.js",
"module": "src/index.esm.js",

12
components/common/theme.scss
View File

@ -1,3 +1,5 @@
@use "sass:map";
@import './var.scss';
$o-primary: #07c160;
@ -13,8 +15,7 @@ $o-danger-fade-little: fade-out($o-danger, 0.382);
$o-danger-fade-some: fade-out($o-danger, 0.618);
$o-danger-fade-lot: fade-out($o-danger, 0.9);
$options: (
primary: $o-primary,
$options: (primary: $o-primary,
primary-active: $o-primary-active,
primary-fade-little: $o-primary-fade-little,
primary-fade-some: $o-primary-fade-some,
@ -24,8 +25,7 @@ $options: (
danger-active: $o-danger-active,
danger-fade-little: $o-danger-fade-little,
danger-fade-some: $o-danger-fade-some,
danger-fade-lot: $o-danger-fade-lot
);
danger-fade-lot: $o-danger-fade-lot);
$o-surface: #ffffff;
@ -38,4 +38,6 @@ $o-background: #ffffff;
$o-small-radius: 4px;
$o-medium-radius: 4px;
$o-large-radius: 0px;
$o-font-family: -apple-system-font, 'Helvetica Neue', sans-serif;
$o-font-family: -apple-system-font,
'Helvetica Neue',
sans-serif;

24
components/docs-src/src/docs/en/introduction.md
View File

@ -130,7 +130,7 @@ export default function SomeComponent(props) {
return (
<div>
<p>The switch is {result ? 'on' : 'off'}</p>
<o-icon-button color="red" icons="['favorite', 'favorite_border']" onChange={e => setSwitch(e.detail.isOn)}>
<o-icon-button color="red" icons="['favorite', 'favorite_border']" onchange={e => setSwitch(e.detail.isOn)}>
</o-icon-button>
</div>
)
@ -138,7 +138,7 @@ export default function SomeComponent(props) {
```
## Using omiu in react
<!-- ## Using omiu in react
```tsx
/** @jsx nativeEvents */
@ -160,27 +160,33 @@ export default function SomeComponent(props) {
```
Many thanks to calebdwilliams's [jsx-native-events](https://github.com/calebdwilliams/jsx-native-events#readme)。
-->
## Event triggering and binding best practices
Due to the need for cross framework, in order to unify component behavior in event binding, best practices for component development and use are given here. The event triggering of the omiu component is in the form of uppercase dash:
Due to the need for cross framework, in order to unify component behavior in event binding, best practices for component development and use are given here. The event triggering of the omiu component is in the form of lowercase or lowercase + middle dash:
```js
this.fire('Change')
this.fire('MyEvent')
this.fire('change')
this.fire('my-event')
```
In Omi or Preact :
In Omi:
```jsx
<my-ele onchange={this.changeHandler} onMyEvent={this.myEventHandler}></my-ele>
<my-ele onChange={this.changeHandler} onMyEvent={this.myEventHandler}></my-ele>
```
In Preact :
```jsx
<my-ele onchange={this.changeHandler} onmy-event={this.myEventHandler}></my-ele>
```
In Vue:
```html
<my-ele @change="changeHandler" @MyEvent="myEventHandler"></my-ele>
<my-ele @change="changeHandler" @my-event="myEventHandler"></my-ele>
```
In React or JS:

64
components/docs-src/src/docs/zh-cn/introduction.md
View File

@ -88,28 +88,6 @@ or
<my-element show="0"></my-element>
```
## React 中使用 omiu
```tsx
/** @jsx nativeEvents */
import nativeEvents from 'jsx-native-events'
import { useState } from 'react'
import '@omiu/icon-button'
export default function SomeComponent(props) {
const [result, setSwitch] = useState(false)
return (
<div>
<p>The switch is {result ? 'on' : 'off'}</p>
<o-icon-button color="red" icons="['favorite', 'favorite_border']" onEventChange={e => setSwitch(e.detail.isOn)}>
</o-icon-button>
</div>
)
}
```
非常感谢 calebdwilliams 的 [jsx-native-events](https://github.com/calebdwilliams/jsx-native-events#readme)。
## Vue 中使用 Omiu
@ -140,16 +118,41 @@ export default {
</template>
```
## 事件触发和绑定最佳实践
## 在 preact 中使用 Omiu
由于需要跨框架，在事件绑定上为了统一组件行为这里给除了组件开发和使用的最佳实践。Omiu 组件的事件触发统一使用大写的形式：
```tsx
import { useState, h } from 'preact'
import '@omiu/icon-button'
```js
this.fire('Change')
this.fire('MyEvent')
export default function SomeComponent(props) {
const [result, setSwitch] = useState(false)
return (
<div>
<p>The switch is {result ? 'on' : 'off'}</p>
<o-icon-button color="red" icons="['favorite', 'favorite_border']" onchange={e => setSwitch(e.detail.isOn)}>
</o-icon-button>
</div>
)
}
```
在 Omi 或者 Preact 中进行对应的事件绑定:
## 事件触发和绑定最佳实践
由于需要跨框架，在事件绑定上为了统一组件行为这里给除了组件开发和使用的最佳实践。Omiu 组件的事件触发统一使用小写中划线的形式：
```js
this.fire('change')
this.fire('my-event')
```
在 Omi 中：
```jsx
<my-ele onChange={this.changeHandler} onMyEvent={this.myEventHandler}></my-ele>
```
Preact 中进行对应的事件绑定:
```jsx
<my-ele onchange={this.changeHandler} onMyEvent={this.myEventHandler}></my-ele>
@ -158,15 +161,16 @@ this.fire('MyEvent')
在 Vue 中进行对应的事件绑定:
```html
<my-ele @change="changeHandler" @MyEvent="myEventHandler"></my-ele>
<my-ele @change="changeHandler" @my-event="myEventHandler"></my-ele>
```
在 React 和 JS 中进行对应的事件绑定:
```jsx
myEl.addEventListener('MyEvent', (evt) => {})
myEl.addEventListener('my-event', (evt) => {})
```
## 贡献
### 一些命令

32
components/docs/asset-manifest.json
View File

@ -1,12 +1,12 @@
{
"cn.css": "static/css/cn.0726442c.css",
"cn.css.map": "static/css/cn.0726442c.css.map",
"cn.js": "static/js/cn.430cc3dc.js",
"cn.js.map": "static/js/cn.430cc3dc.js.map",
"cn.js": "static/js/cn.9ee79072.js",
"cn.js.map": "static/js/cn.9ee79072.js.map",
"index.css": "static/css/index.0726442c.css",
"index.css.map": "static/css/index.0726442c.css.map",
"index.js": "static/js/index.c93621c4.js",
"index.js.map": "static/js/index.c93621c4.js.map",
"index.js": "static/js/index.e4c8e269.js",
"index.js.map": "static/js/index.e4c8e269.js.map",
"static/js/0.266a4fc6.chunk.js": "static/js/0.266a4fc6.chunk.js",
"static/js/0.266a4fc6.chunk.js.map": "static/js/0.266a4fc6.chunk.js.map",
"static/js/1.49dca734.chunk.js": "static/js/1.49dca734.chunk.js",
@ -39,8 +39,8 @@
"static/js/21.48771cbd.chunk.js.map": "static/js/21.48771cbd.chunk.js.map",
"static/js/22.867eca40.chunk.js": "static/js/22.867eca40.chunk.js",
"static/js/22.867eca40.chunk.js.map": "static/js/22.867eca40.chunk.js.map",
"static/js/23.e5b78f21.chunk.js": "static/js/23.e5b78f21.chunk.js",
"static/js/23.e5b78f21.chunk.js.map": "static/js/23.e5b78f21.chunk.js.map",
"static/js/23.7a3045ca.chunk.js": "static/js/23.7a3045ca.chunk.js",
"static/js/23.7a3045ca.chunk.js.map": "static/js/23.7a3045ca.chunk.js.map",
"static/js/24.52539569.chunk.js": "static/js/24.52539569.chunk.js",
"static/js/24.52539569.chunk.js.map": "static/js/24.52539569.chunk.js.map",
"static/js/25.612afa7e.chunk.js": "static/js/25.612afa7e.chunk.js",
@ -63,8 +63,8 @@
"static/js/32.2726d216.chunk.js.map": "static/js/32.2726d216.chunk.js.map",
"static/js/33.a3264a3b.chunk.js": "static/js/33.a3264a3b.chunk.js",
"static/js/33.a3264a3b.chunk.js.map": "static/js/33.a3264a3b.chunk.js.map",
"static/js/34.f1c97f88.chunk.js": "static/js/34.f1c97f88.chunk.js",
"static/js/34.f1c97f88.chunk.js.map": "static/js/34.f1c97f88.chunk.js.map",
"static/js/34.c36bc07c.chunk.js": "static/js/34.c36bc07c.chunk.js",
"static/js/34.c36bc07c.chunk.js.map": "static/js/34.c36bc07c.chunk.js.map",
"static/js/35.0db63273.chunk.js": "static/js/35.0db63273.chunk.js",
"static/js/35.0db63273.chunk.js.map": "static/js/35.0db63273.chunk.js.map",
"static/js/36.404a48b6.chunk.js": "static/js/36.404a48b6.chunk.js",
@ -103,8 +103,8 @@
"static/js/50.67452c21.chunk.js.map": "static/js/50.67452c21.chunk.js.map",
"static/js/51.e0454caf.chunk.js": "static/js/51.e0454caf.chunk.js",
"static/js/51.e0454caf.chunk.js.map": "static/js/51.e0454caf.chunk.js.map",
"static/js/52.9fef8b0a.chunk.js": "static/js/52.9fef8b0a.chunk.js",
"static/js/52.9fef8b0a.chunk.js.map": "static/js/52.9fef8b0a.chunk.js.map",
"static/js/52.e2442a30.chunk.js": "static/js/52.e2442a30.chunk.js",
"static/js/52.e2442a30.chunk.js.map": "static/js/52.e2442a30.chunk.js.map",
"static/js/53.9c761506.chunk.js": "static/js/53.9c761506.chunk.js",
"static/js/53.9c761506.chunk.js.map": "static/js/53.9c761506.chunk.js.map",
"static/js/54.a8458494.chunk.js": "static/js/54.a8458494.chunk.js",
@ -133,8 +133,8 @@
"static/js/64.dee77916.chunk.js.map": "static/js/64.dee77916.chunk.js.map",
"static/js/65.2f1d2157.chunk.js": "static/js/65.2f1d2157.chunk.js",
"static/js/65.2f1d2157.chunk.js.map": "static/js/65.2f1d2157.chunk.js.map",
"static/js/66.638a42cb.chunk.js": "static/js/66.638a42cb.chunk.js",
"static/js/66.638a42cb.chunk.js.map": "static/js/66.638a42cb.chunk.js.map",
"static/js/66.982afa95.chunk.js": "static/js/66.982afa95.chunk.js",
"static/js/66.982afa95.chunk.js.map": "static/js/66.982afa95.chunk.js.map",
"static/js/67.22d9e689.chunk.js": "static/js/67.22d9e689.chunk.js",
"static/js/67.22d9e689.chunk.js.map": "static/js/67.22d9e689.chunk.js.map",
"static/js/68.ff9ac3cf.chunk.js": "static/js/68.ff9ac3cf.chunk.js",
@ -157,8 +157,8 @@
"static/js/75.2b89f737.chunk.js.map": "static/js/75.2b89f737.chunk.js.map",
"static/js/76.dbe00ca7.chunk.js": "static/js/76.dbe00ca7.chunk.js",
"static/js/76.dbe00ca7.chunk.js.map": "static/js/76.dbe00ca7.chunk.js.map",
"static/js/77.f41ec88a.chunk.js": "static/js/77.f41ec88a.chunk.js",
"static/js/77.f41ec88a.chunk.js.map": "static/js/77.f41ec88a.chunk.js.map",
"static/js/77.a636f1ae.chunk.js": "static/js/77.a636f1ae.chunk.js",
"static/js/77.a636f1ae.chunk.js.map": "static/js/77.a636f1ae.chunk.js.map",
"static/js/78.5a3afa60.chunk.js": "static/js/78.5a3afa60.chunk.js",
"static/js/78.5a3afa60.chunk.js.map": "static/js/78.5a3afa60.chunk.js.map",
"static/js/79.7f4f718c.chunk.js": "static/js/79.7f4f718c.chunk.js",
@ -177,7 +177,7 @@
"static/js/84.6be84e08.chunk.js.map": "static/js/84.6be84e08.chunk.js.map",
"static/js/85.8211a68e.chunk.js": "static/js/85.8211a68e.chunk.js",
"static/js/85.8211a68e.chunk.js.map": "static/js/85.8211a68e.chunk.js.map",
"static/js/9.4919020f.chunk.js": "static/js/9.4919020f.chunk.js",
"static/js/9.4919020f.chunk.js.map": "static/js/9.4919020f.chunk.js.map",
"static/js/9.7df62ae0.chunk.js": "static/js/9.7df62ae0.chunk.js",
"static/js/9.7df62ae0.chunk.js.map": "static/js/9.7df62ae0.chunk.js.map",
"static/media/omi-logo2019.svg": "static/media/omi-logo2019.923166c3.svg"
}

2
components/docs/cn.html
View File

@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>OMIU - Cross-Frameworks UI Framework</title><link href="./static/css/cn.0726442c.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/prism.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/cn.430cc3dc.js"></script></body></html>
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>OMIU - Cross-Frameworks UI Framework</title><link href="./static/css/cn.0726442c.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/prism.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/cn.9ee79072.js"></script></body></html>

2
components/docs/index.html
View File

@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>OMIU - Cross-Frameworks UI Framework</title><link href="./static/css/index.0726442c.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/prism.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/index.c93621c4.js"></script></body></html>
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>OMIU - Cross-Frameworks UI Framework</title><link href="./static/css/index.0726442c.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/prism.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/index.e4c8e269.js"></script></body></html>

2
components/docs/service-worker.js
View File

File diff suppressed because one or more lines are too long

4
components/docs/static/js/23.e5b78f21.chunk.js → components/docs/static/js/23.7a3045ca.chunk.js vendored
View File

File diff suppressed because one or more lines are too long

1
components/docs/static/js/23.7a3045ca.chunk.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
components/docs/static/js/23.e5b78f21.chunk.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
components/docs/static/js/34.c36bc07c.chunk.js vendored Normal file
View File

@ -0,0 +1,2 @@
webpackJsonp([34],{91:function(n,e){n.exports="# Button \u6309\u94ae\n\n\u70b9\u51fb\u6216\u89e6\u6478\u89e6\u53d1\u4e00\u4e2a\u64cd\u4f5c\u7684\u5143\u7d20\u3002\u54cd\u5e94\u7528\u6237\u70b9\u51fb\u64cd\u4f5c\uff0c\u89e6\u53d1\u5c01\u88c5\u7684\u903b\u8f91\u3002\n\n<iframe height=\"351\" style=\"width: 100%;\" scrolling=\"no\" title=\"OMIU Button\" src=\"https://codepen.io/omijs/embed/LYppwYG?height=351&theme-id=default&default-tab=html,result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" loading=\"lazy\">\n See the Pen <a href='https://codepen.io/omijs/pen/LYppwYG'>OMIU Checkbox</a> by OMI\n (<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.\n</iframe>\n\n## \u5bfc\u5165\n\n```js\nimport '@omiu/button'\n```\n\n\u6216\u8005\u76f4\u63a5 script \u6807\u7b7e\u5f15\u5165\u3002\n\n\n```html\n<script src=\"https://unpkg.com/@omiu/button\"><\/script>\n```\n\n## \u4f7f\u7528\n\n```html\n<o-button></o-button>\n```\n\n\n## API\n\n### \u5c5e\u6027\n\n```tsx\n{\n size?: 'medium' | 'small' | 'mini',\n type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'\n plain?: boolean,\n round?: boolean,\n circle?: boolean,\n loading?: boolean,\n disabled?: boolean,\n icon?: string,\n autofocus?: boolean,\n nativeType?: 'button' | 'submit' | 'reset',\n block?: boolean\n text?: string\n}\n```\n\n### \u9ed8\u8ba4\u5c5e\u6027\n```tsx\n{\n plain: false,\n round: false,\n circle: false,\n loading: false,\n disabled: false,\n autofocus: false,\n nativeType: 'button',\n block: false\n}\n```\n"}});
//# sourceMappingURL=34.c36bc07c.chunk.js.map

1
components/docs/static/js/34.c36bc07c.chunk.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":["../static/js/34.c36bc07c.chunk.js","docs/zh-cn/button.md"],"names":["webpackJsonp","91","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/34.c36bc07c.chunk.js","sourcesContent":["webpackJsonp([34],{\n\n/***/ 91:\n/***/ (function(module, exports) {\n\nmodule.exports = \"# Button 按钮\\n\\n点击或触摸触发一个操作的元素。响应用户点击操作，触发封装的逻辑。\\n\\n<iframe height=\\\"351\\\" style=\\\"width: 100%;\\\" scrolling=\\\"no\\\" title=\\\"OMIU Button\\\" src=\\\"https://codepen.io/omijs/embed/LYppwYG?height=351&theme-id=default&default-tab=html,result\\\" frameborder=\\\"no\\\" allowtransparency=\\\"true\\\" allowfullscreen=\\\"true\\\" loading=\\\"lazy\\\">\\n See the Pen <a href='https://codepen.io/omijs/pen/LYppwYG'>OMIU Checkbox</a> by OMI\\n (<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.\\n</iframe>\\n\\n## 导入\\n\\n```js\\nimport '@omiu/button'\\n```\\n\\n或者直接 script 标签引入。\\n\\n\\n```html\\n<script src=\\\"https://unpkg.com/@omiu/button\\\"></script>\\n```\\n\\n## 使用\\n\\n```html\\n<o-button></o-button>\\n```\\n\\n\\n## API\\n\\n### 属性\\n\\n```tsx\\n{\\n size?: 'medium' | 'small' | 'mini',\\n type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'\\n plain?: boolean,\\n round?: boolean,\\n circle?: boolean,\\n loading?: boolean,\\n disabled?: boolean,\\n icon?: string,\\n autofocus?: boolean,\\n nativeType?: 'button' | 'submit' | 'reset',\\n block?: boolean\\n text?: string\\n}\\n```\\n\\n### 默认属性\\n```tsx\\n{\\n plain: false,\\n round: false,\\n circle: false,\\n loading: false,\\n disabled: false,\\n autofocus: false,\\n nativeType: 'button',\\n block: false\\n}\\n```\\n\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/34.c36bc07c.chunk.js","module.exports = \"# Button 按钮\\n\\n点击或触摸触发一个操作的元素。响应用户点击操作，触发封装的逻辑。\\n\\n<iframe height=\\\"351\\\" style=\\\"width: 100%;\\\" scrolling=\\\"no\\\" title=\\\"OMIU Button\\\" src=\\\"https://codepen.io/omijs/embed/LYppwYG?height=351&theme-id=default&default-tab=html,result\\\" frameborder=\\\"no\\\" allowtransparency=\\\"true\\\" allowfullscreen=\\\"true\\\" loading=\\\"lazy\\\">\\n See the Pen <a href='https://codepen.io/omijs/pen/LYppwYG'>OMIU Checkbox</a> by OMI\\n (<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.\\n</iframe>\\n\\n## 导入\\n\\n```js\\nimport '@omiu/button'\\n```\\n\\n或者直接 script 标签引入。\\n\\n\\n```html\\n<script src=\\\"https://unpkg.com/@omiu/button\\\"></script>\\n```\\n\\n## 使用\\n\\n```html\\n<o-button></o-button>\\n```\\n\\n\\n## API\\n\\n### 属性\\n\\n```tsx\\n{\\n size?: 'medium' | 'small' | 'mini',\\n type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'\\n plain?: boolean,\\n round?: boolean,\\n circle?: boolean,\\n loading?: boolean,\\n disabled?: boolean,\\n icon?: string,\\n autofocus?: boolean,\\n nativeType?: 'button' | 'submit' | 'reset',\\n block?: boolean\\n text?: string\\n}\\n```\\n\\n### 默认属性\\n```tsx\\n{\\n plain: false,\\n round: false,\\n circle: false,\\n loading: false,\\n disabled: false,\\n autofocus: false,\\n nativeType: 'button',\\n block: false\\n}\\n```\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/button.md\n// module id = 91\n// module chunks = 34"],"sourceRoot":""}

2
components/docs/static/js/34.f1c97f88.chunk.js vendored
View File

@ -1,2 +0,0 @@
webpackJsonp([34],{91:function(n,e){n.exports="## Button \u6309\u94ae\n\n\u70b9\u51fb\u6216\u89e6\u6478\u89e6\u53d1\u4e00\u4e2a\u64cd\u4f5c\u7684\u5143\u7d20\u3002\u54cd\u5e94\u7528\u6237\u70b9\u51fb\u64cd\u4f5c\uff0c\u89e6\u53d1\u5c01\u88c5\u7684\u903b\u8f91\u3002\n\n<iframe height=\"351\" style=\"width: 100%;\" scrolling=\"no\" title=\"OMIU Button\" src=\"https://codepen.io/omijs/embed/LYppwYG?height=351&theme-id=default&default-tab=html,result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" loading=\"lazy\">\n See the Pen <a href='https://codepen.io/omijs/pen/LYppwYG'>OMIU Checkbox</a> by OMI\n (<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.\n</iframe>\n\n## \u5bfc\u5165\n\n```js\nimport '@omiu/button'\n```\n\n\u6216\u8005\u76f4\u63a5 script \u6807\u7b7e\u5f15\u5165\u3002\n\n\n```html\n<script src=\"https://unpkg.com/@omiu/button\"><\/script>\n```\n\n## \u4f7f\u7528\n\n```html\n<o-button></o-button>\n```\n\n\n## API\n\n### \u5c5e\u6027\n\n```tsx\n{\n size?: 'medium' | 'small' | 'mini',\n type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'\n plain?: boolean,\n round?: boolean,\n circle?: boolean,\n loading?: boolean,\n disabled?: boolean,\n icon?: string,\n autofocus?: boolean,\n nativeType?: 'button' | 'submit' | 'reset',\n block?: boolean\n text?: string\n}\n```\n\n### \u9ed8\u8ba4\u5c5e\u6027\n```tsx\n{\n plain: false,\n round: false,\n circle: false,\n loading: false,\n disabled: false,\n autofocus: false,\n nativeType: 'button',\n block: false\n}\n```\n"}});
//# sourceMappingURL=34.f1c97f88.chunk.js.map

1
components/docs/static/js/34.f1c97f88.chunk.js.map vendored
View File

@ -1 +0,0 @@
{"version":3,"sources":["../static/js/34.f1c97f88.chunk.js","docs/zh-cn/button.md"],"names":["webpackJsonp","91","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/34.f1c97f88.chunk.js","sourcesContent":["webpackJsonp([34],{\n\n/***/ 91:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Button 按钮\\n\\n点击或触摸触发一个操作的元素。响应用户点击操作，触发封装的逻辑。\\n\\n<iframe height=\\\"351\\\" style=\\\"width: 100%;\\\" scrolling=\\\"no\\\" title=\\\"OMIU Button\\\" src=\\\"https://codepen.io/omijs/embed/LYppwYG?height=351&theme-id=default&default-tab=html,result\\\" frameborder=\\\"no\\\" allowtransparency=\\\"true\\\" allowfullscreen=\\\"true\\\" loading=\\\"lazy\\\">\\n See the Pen <a href='https://codepen.io/omijs/pen/LYppwYG'>OMIU Checkbox</a> by OMI\\n (<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.\\n</iframe>\\n\\n## 导入\\n\\n```js\\nimport '@omiu/button'\\n```\\n\\n或者直接 script 标签引入。\\n\\n\\n```html\\n<script src=\\\"https://unpkg.com/@omiu/button\\\"></script>\\n```\\n\\n## 使用\\n\\n```html\\n<o-button></o-button>\\n```\\n\\n\\n## API\\n\\n### 属性\\n\\n```tsx\\n{\\n size?: 'medium' | 'small' | 'mini',\\n type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'\\n plain?: boolean,\\n round?: boolean,\\n circle?: boolean,\\n loading?: boolean,\\n disabled?: boolean,\\n icon?: string,\\n autofocus?: boolean,\\n nativeType?: 'button' | 'submit' | 'reset',\\n block?: boolean\\n text?: string\\n}\\n```\\n\\n### 默认属性\\n```tsx\\n{\\n plain: false,\\n round: false,\\n circle: false,\\n loading: false,\\n disabled: false,\\n autofocus: false,\\n nativeType: 'button',\\n block: false\\n}\\n```\\n\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/34.f1c97f88.chunk.js","module.exports = \"## Button 按钮\\n\\n点击或触摸触发一个操作的元素。响应用户点击操作，触发封装的逻辑。\\n\\n<iframe height=\\\"351\\\" style=\\\"width: 100%;\\\" scrolling=\\\"no\\\" title=\\\"OMIU Button\\\" src=\\\"https://codepen.io/omijs/embed/LYppwYG?height=351&theme-id=default&default-tab=html,result\\\" frameborder=\\\"no\\\" allowtransparency=\\\"true\\\" allowfullscreen=\\\"true\\\" loading=\\\"lazy\\\">\\n See the Pen <a href='https://codepen.io/omijs/pen/LYppwYG'>OMIU Checkbox</a> by OMI\\n (<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.\\n</iframe>\\n\\n## 导入\\n\\n```js\\nimport '@omiu/button'\\n```\\n\\n或者直接 script 标签引入。\\n\\n\\n```html\\n<script src=\\\"https://unpkg.com/@omiu/button\\\"></script>\\n```\\n\\n## 使用\\n\\n```html\\n<o-button></o-button>\\n```\\n\\n\\n## API\\n\\n### 属性\\n\\n```tsx\\n{\\n size?: 'medium' | 'small' | 'mini',\\n type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'\\n plain?: boolean,\\n round?: boolean,\\n circle?: boolean,\\n loading?: boolean,\\n disabled?: boolean,\\n icon?: string,\\n autofocus?: boolean,\\n nativeType?: 'button' | 'submit' | 'reset',\\n block?: boolean\\n text?: string\\n}\\n```\\n\\n### 默认属性\\n```tsx\\n{\\n plain: false,\\n round: false,\\n circle: false,\\n loading: false,\\n disabled: false,\\n autofocus: false,\\n nativeType: 'button',\\n block: false\\n}\\n```\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/button.md\n// module id = 91\n// module chunks = 34"],"sourceRoot":""}

2
components/docs/static/js/52.9fef8b0a.chunk.js vendored
View File

@ -1,2 +0,0 @@
webpackJsonp([52],{73:function(n,e){n.exports="## Slider\n\nUsed for scrolling through page content\n\n## Import\n\n```js\nimport '@omiu/slider'\n```\n\nOr use script tag to ref it.\n\n```html\n<script src=\"https://unpkg.com/@omiu/slider\"><\/script>\n```\n\n## Usage\n\n```html\n<o-slider></o-slider>\n```\n\n## API\n\n### Props\n\n```tsx\n{\n min?: number\n max?: number\n step?: number\n value?: number\n second_value?: number\n range: 'single' | 'double'\n orient?: 'vetical' | 'horizontal'\n shape: 'square' | 'round'\n disabled?: boolean\n}\n```\n\n### defaultProps\n\n```tsx\n{\n //default a single square range slider\n min: 0,\n max: 100,\n step: 1,\n value: 0,\n second_value: 100,\n range: 'single',\n orient: 'horizontal',\n shape: 'square',\n disabled: false,\n}\n```\n\n### Events\n\n- change\n"}});
//# sourceMappingURL=52.9fef8b0a.chunk.js.map

1
components/docs/static/js/52.9fef8b0a.chunk.js.map vendored
View File

@ -1 +0,0 @@
{"version":3,"sources":["../static/js/52.9fef8b0a.chunk.js","docs/en/slider.md"],"names":["webpackJsonp","73","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/52.9fef8b0a.chunk.js","sourcesContent":["webpackJsonp([52],{\n\n/***/ 73:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Slider\\n\\nUsed for scrolling through page content\\n\\n## Import\\n\\n```js\\nimport '@omiu/slider'\\n```\\n\\nOr use script tag to ref it.\\n\\n```html\\n<script src=\\\"https://unpkg.com/@omiu/slider\\\"></script>\\n```\\n\\n## Usage\\n\\n```html\\n<o-slider></o-slider>\\n```\\n\\n## API\\n\\n### Props\\n\\n```tsx\\n{\\n min?: number\\n max?: number\\n step?: number\\n value?: number\\n second_value?: number\\n range: 'single' | 'double'\\n orient?: 'vetical' | 'horizontal'\\n shape: 'square' | 'round'\\n disabled?: boolean\\n}\\n```\\n\\n### defaultProps\\n\\n```tsx\\n{\\n //default a single square range slider\\n min: 0,\\n max: 100,\\n step: 1,\\n value: 0,\\n second_value: 100,\\n range: 'single',\\n orient: 'horizontal',\\n shape: 'square',\\n disabled: false,\\n}\\n```\\n\\n### Events\\n\\n- change\\n\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/52.9fef8b0a.chunk.js","module.exports = \"## Slider\\n\\nUsed for scrolling through page content\\n\\n## Import\\n\\n```js\\nimport '@omiu/slider'\\n```\\n\\nOr use script tag to ref it.\\n\\n```html\\n<script src=\\\"https://unpkg.com/@omiu/slider\\\"></script>\\n```\\n\\n## Usage\\n\\n```html\\n<o-slider></o-slider>\\n```\\n\\n## API\\n\\n### Props\\n\\n```tsx\\n{\\n min?: number\\n max?: number\\n step?: number\\n value?: number\\n second_value?: number\\n range: 'single' | 'double'\\n orient?: 'vetical' | 'horizontal'\\n shape: 'square' | 'round'\\n disabled?: boolean\\n}\\n```\\n\\n### defaultProps\\n\\n```tsx\\n{\\n //default a single square range slider\\n min: 0,\\n max: 100,\\n step: 1,\\n value: 0,\\n second_value: 100,\\n range: 'single',\\n orient: 'horizontal',\\n shape: 'square',\\n disabled: false,\\n}\\n```\\n\\n### Events\\n\\n- change\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/slider.md\n// module id = 73\n// module chunks = 52"],"sourceRoot":""}

2
components/docs/static/js/52.e2442a30.chunk.js vendored Normal file
View File

@ -0,0 +1,2 @@
webpackJsonp([52],{73:function(n,e){n.exports="## Slider\n\nSlider\n\n<iframe height=\"undefined\" style=\"width: 100%;\" scrolling=\"no\" title=\"OMIU Slider\" src=\"https://codepen.io/omijs/embed/undefined?height=undefined&theme-id=default&default-tab=undefined\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" loading=\"lazy\">\n See the Pen <a href='https://codepen.io/omijs/pen/undefined'>OMIU Checkbox</a> by OMI\n (<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.\n</iframe>\n\n## Import\n\n```js\nimport '@omiu/slider'\n```\n\nOr use script tag to ref it.\n\n\n```html\n<script src=\"https://unpkg.com/@omiu/slider\"><\/script>\n```\n\n## Usage\n\n```html\n<o-slider></o-slider>\n```\n\n## API\n\n### Props\n\n```tsx\n{\n min?: number\n max?: number\n step?: number\n value?: number\n second_value?: number\n range: 'single' | 'double'\n orient?: 'vertical' | 'horizontal'\n shape: 'square' | 'round'\n tooltip?: boolean\n disabled?: boolean\n}\n```\n\n### defaultProps\n\n```tsx\n{\n //default a single round range slider\n min: undefined,\n max: undefined,\n step: 1,\n value: undefined,\n second_value: undefined,\n range: 'single',\n orient: 'horizontal',\n shape: 'round',\n tooltip: false,\n disabled: false,\n}\n```\n### Events\n\n* input\n"}});
//# sourceMappingURL=52.e2442a30.chunk.js.map

1
components/docs/static/js/52.e2442a30.chunk.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":["../static/js/52.e2442a30.chunk.js","docs/en/slider.md"],"names":["webpackJsonp","73","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/52.e2442a30.chunk.js","sourcesContent":["webpackJsonp([52],{\n\n/***/ 73:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Slider\\n\\nSlider\\n\\n<iframe height=\\\"undefined\\\" style=\\\"width: 100%;\\\" scrolling=\\\"no\\\" title=\\\"OMIU Slider\\\" src=\\\"https://codepen.io/omijs/embed/undefined?height=undefined&theme-id=default&default-tab=undefined\\\" frameborder=\\\"no\\\" allowtransparency=\\\"true\\\" allowfullscreen=\\\"true\\\" loading=\\\"lazy\\\">\\n See the Pen <a href='https://codepen.io/omijs/pen/undefined'>OMIU Checkbox</a> by OMI\\n (<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.\\n</iframe>\\n\\n## Import\\n\\n```js\\nimport '@omiu/slider'\\n```\\n\\nOr use script tag to ref it.\\n\\n\\n```html\\n<script src=\\\"https://unpkg.com/@omiu/slider\\\"></script>\\n```\\n\\n## Usage\\n\\n```html\\n<o-slider></o-slider>\\n```\\n\\n## API\\n\\n### Props\\n\\n```tsx\\n{\\n min?: number\\n max?: number\\n step?: number\\n value?: number\\n second_value?: number\\n range: 'single' | 'double'\\n orient?: 'vertical' | 'horizontal'\\n shape: 'square' | 'round'\\n tooltip?: boolean\\n disabled?: boolean\\n}\\n```\\n\\n### defaultProps\\n\\n```tsx\\n{\\n //default a single round range slider\\n min: undefined,\\n max: undefined,\\n step: 1,\\n value: undefined,\\n second_value: undefined,\\n range: 'single',\\n orient: 'horizontal',\\n shape: 'round',\\n tooltip: false,\\n disabled: false,\\n}\\n```\\n### Events\\n\\n* input\\n\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/52.e2442a30.chunk.js","module.exports = \"## Slider\\n\\nSlider\\n\\n<iframe height=\\\"undefined\\\" style=\\\"width: 100%;\\\" scrolling=\\\"no\\\" title=\\\"OMIU Slider\\\" src=\\\"https://codepen.io/omijs/embed/undefined?height=undefined&theme-id=default&default-tab=undefined\\\" frameborder=\\\"no\\\" allowtransparency=\\\"true\\\" allowfullscreen=\\\"true\\\" loading=\\\"lazy\\\">\\n See the Pen <a href='https://codepen.io/omijs/pen/undefined'>OMIU Checkbox</a> by OMI\\n (<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.\\n</iframe>\\n\\n## Import\\n\\n```js\\nimport '@omiu/slider'\\n```\\n\\nOr use script tag to ref it.\\n\\n\\n```html\\n<script src=\\\"https://unpkg.com/@omiu/slider\\\"></script>\\n```\\n\\n## Usage\\n\\n```html\\n<o-slider></o-slider>\\n```\\n\\n## API\\n\\n### Props\\n\\n```tsx\\n{\\n min?: number\\n max?: number\\n step?: number\\n value?: number\\n second_value?: number\\n range: 'single' | 'double'\\n orient?: 'vertical' | 'horizontal'\\n shape: 'square' | 'round'\\n tooltip?: boolean\\n disabled?: boolean\\n}\\n```\\n\\n### defaultProps\\n\\n```tsx\\n{\\n //default a single round range slider\\n min: undefined,\\n max: undefined,\\n step: 1,\\n value: undefined,\\n second_value: undefined,\\n range: 'single',\\n orient: 'horizontal',\\n shape: 'round',\\n tooltip: false,\\n disabled: false,\\n}\\n```\\n### Events\\n\\n* input\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/slider.md\n// module id = 73\n// module chunks = 52"],"sourceRoot":""}

1
components/docs/static/js/66.638a42cb.chunk.js.map vendored
View File

File diff suppressed because one or more lines are too long

4
components/docs/static/js/66.638a42cb.chunk.js → components/docs/static/js/66.982afa95.chunk.js vendored
View File

@ -1,2 +1,2 @@
webpackJsonp([66],{59:function(n,e){n.exports="## What's Omiu ?\n\nOmiu is a cross framework UI component library developed based on [OMI](https://github.com/tencent/omi), which outputs custom elements of standard web components. Any component can be used in any framework or frameless environment such as react, Vue, preact, OMI or native JS at the same time, which is very convenient. Overall, omiu has these characteristics:\n\n> [Omiu Codepen Collection](https://codepen.io/collection/XBJjke)\n\n* Cross frameworks \n* High quality UI interaction details\n* Integrated [all the MUI Icon](https://tencent.github.io/omi/components/icon/demos/icon.html)\n* Mobile terminal and PC share one set of components\n* Theme switching support at runtime (color, font, and fillets)\n* Components directly decoupled, independently polished, independently released, independently quoted\n* Extended HTML capabilities. You can pass false to an element through the string `'0'` or the string `'false'`\n\n## Usage\n\n### Install by script\n\n```html\n<script src=\"https://unpkg.com/omi\"><\/script>\n<script src=\"https://unpkg.com/@omiu/button\"><\/script>\n\n<o-button>I am button</o-button>\n```\n\n### Install by npm\n\n``` bash\nnpm install @omiu/button\n```\n\nImport to use it:\n\n```js\nimport '@omiu/button'\n```\n\nThen use it in any framework, such as Omi, react, Vue or angular:\n\n``` html\n<o-button>I am button</o-button>\n```\n\nYou can also use native JS:\n\n```js\nvar button = document.createElement('o-button')\nbutton.innerHTML = 'I am omiu button'\ndocument.body.append(button)\nbutton.addEventListener('click', function () {\n console.log('Clicked!')\n})\n\n//or\n//document.body.innerHTML = '<o-button>I am omiu button</o-button>'\n```\n\n## HTML Extension \n\nWhen the default value is true and you need to pass false to the element, it used to be a historical problem. OMI has solved this problem perfectly. You can set it through the string `'0'` or the string `'false'`.\n\n```js\ndefine('my-element', class extends WeElement {\n static defaultProps = {\n show: true\n }\n\n static propTypes = {\n show: Boolean\n }\n\n render(props) {\n ...\n ...\n }\n})\n```\n\nUse:\n\n```html\n<my-element show=\"false\"></my-element>\n```\n\nor\n\n```html\n<my-element show=\"0\"></my-element>\n```\n\n\n## Using omiu in Vue\n\n```html\n<script>\nimport '@omiu/icon-button'\n\nexport default {\n name: 'HelloWorld',\n data: function() {\n return {\n result: false\n }\n },\n methods: {\n myEvent: function(evt) {\n this.result = evt.detail.isOn\n }\n }\n}\n<\/script>\n\n<template>\n <div class=\"component\">\n <p>The switch is {{result? 'on' : 'off'}}</p>\n <o-icon-button color=\"red\" icons=\"['favorite', 'favorite_border']\" @change=\"myEvent\"></o-icon-button>\n </div>\n</template>\n```\n\n## Using omiu in preact\n\n```tsx\nimport { useState, h } from 'preact'\nimport '@omiu/icon-button'\n\nexport default function SomeComponent(props) {\n const [result, setSwitch] = useState(false)\n\n return (\n <div>\n <p>The switch is {result ? 'on' : 'off'}</p>\n <o-icon-button color=\"red\" icons=\"['favorite', 'favorite_border']\" onChange={e => setSwitch(e.detail.isOn)}>\n </o-icon-button>\n </div>\n )\n}\n```\n\n\n## Using omiu in react\n\n```tsx\n/** @jsx nativeEvents */\nimport nativeEvents from 'jsx-native-events'\nimport { useState } from 'react'\nimport '@omiu/icon-button'\n\nexport default function SomeComponent(props) {\n const [result, setSwitch] = useState(false)\n\n return (\n <div>\n <p>The switch is {result ? 'on' : 'off'}</p>\n <o-icon-button color=\"red\" icons=\"['favorite', 'favorite_border']\" onEventChange={e => setSwitch(e.detail.isOn)}>\n </o-icon-button>\n </div>\n )\n}\n```\n\nMany thanks to calebdwilliams's [jsx-native-events](https://github.com/calebdwilliams/jsx-native-events#readme)\u3002\n\n\n## Event triggering and binding best practices\n\nDue to the need for cross framework, in order to unify component behavior in event binding, best practices for component development and use are given here. The event triggering of the omiu component is in the form of uppercase dash:\n\n```js\nthis.fire('Change')\nthis.fire('MyEvent')\n```\n\nIn Omi or Preact :\n\n```jsx\n<my-ele onchange={this.changeHandler} onMyEvent={this.myEventHandler}></my-ele>\n```\n\nIn Vue:\n\n```html\n<my-ele @change=\"changeHandler\" @MyEvent=\"myEventHandler\"></my-ele>\n```\n\nIn React or JS:\n\n```jsx\nmyEl.addEventListener('MyEvent', (evt) => {})\n```\n\n## Contribution\n\nBuild:\n\n```bash\nnpm run build\n```\n\nBuild Demo:\n\n```bash\nnpm start \n```\n\nGenerate the docs:\n\n```bash\nnpm run docs\n```\n\nPublic to npm:\n\n```bash\nnpm publish --access public\n```\n\n\n"}});
//# sourceMappingURL=66.638a42cb.chunk.js.map
webpackJsonp([66],{59:function(n,e){n.exports="## What's Omiu ?\n\nOmiu is a cross framework UI component library developed based on [OMI](https://github.com/tencent/omi), which outputs custom elements of standard web components. Any component can be used in any framework or frameless environment such as react, Vue, preact, OMI or native JS at the same time, which is very convenient. Overall, omiu has these characteristics:\n\n> [Omiu Codepen Collection](https://codepen.io/collection/XBJjke)\n\n* Cross frameworks \n* High quality UI interaction details\n* Integrated [all the MUI Icon](https://tencent.github.io/omi/components/icon/demos/icon.html)\n* Mobile terminal and PC share one set of components\n* Theme switching support at runtime (color, font, and fillets)\n* Components directly decoupled, independently polished, independently released, independently quoted\n* Extended HTML capabilities. You can pass false to an element through the string `'0'` or the string `'false'`\n\n## Usage\n\n### Install by script\n\n```html\n<script src=\"https://unpkg.com/omi\"><\/script>\n<script src=\"https://unpkg.com/@omiu/button\"><\/script>\n\n<o-button>I am button</o-button>\n```\n\n### Install by npm\n\n``` bash\nnpm install @omiu/button\n```\n\nImport to use it:\n\n```js\nimport '@omiu/button'\n```\n\nThen use it in any framework, such as Omi, react, Vue or angular:\n\n``` html\n<o-button>I am button</o-button>\n```\n\nYou can also use native JS:\n\n```js\nvar button = document.createElement('o-button')\nbutton.innerHTML = 'I am omiu button'\ndocument.body.append(button)\nbutton.addEventListener('click', function () {\n console.log('Clicked!')\n})\n\n//or\n//document.body.innerHTML = '<o-button>I am omiu button</o-button>'\n```\n\n## HTML Extension \n\nWhen the default value is true and you need to pass false to the element, it used to be a historical problem. OMI has solved this problem perfectly. You can set it through the string `'0'` or the string `'false'`.\n\n```js\ndefine('my-element', class extends WeElement {\n static defaultProps = {\n show: true\n }\n\n static propTypes = {\n show: Boolean\n }\n\n render(props) {\n ...\n ...\n }\n})\n```\n\nUse:\n\n```html\n<my-element show=\"false\"></my-element>\n```\n\nor\n\n```html\n<my-element show=\"0\"></my-element>\n```\n\n\n## Using omiu in Vue\n\n```html\n<script>\nimport '@omiu/icon-button'\n\nexport default {\n name: 'HelloWorld',\n data: function() {\n return {\n result: false\n }\n },\n methods: {\n myEvent: function(evt) {\n this.result = evt.detail.isOn\n }\n }\n}\n<\/script>\n\n<template>\n <div class=\"component\">\n <p>The switch is {{result? 'on' : 'off'}}</p>\n <o-icon-button color=\"red\" icons=\"['favorite', 'favorite_border']\" @change=\"myEvent\"></o-icon-button>\n </div>\n</template>\n```\n\n## Using omiu in preact\n\n```tsx\nimport { useState, h } from 'preact'\nimport '@omiu/icon-button'\n\nexport default function SomeComponent(props) {\n const [result, setSwitch] = useState(false)\n\n return (\n <div>\n <p>The switch is {result ? 'on' : 'off'}</p>\n <o-icon-button color=\"red\" icons=\"['favorite', 'favorite_border']\" onchange={e => setSwitch(e.detail.isOn)}>\n </o-icon-button>\n </div>\n )\n}\n```\n\n\n\x3c!-- ## Using omiu in react\n\n```tsx\n/** @jsx nativeEvents */\nimport nativeEvents from 'jsx-native-events'\nimport { useState } from 'react'\nimport '@omiu/icon-button'\n\nexport default function SomeComponent(props) {\n const [result, setSwitch] = useState(false)\n\n return (\n <div>\n <p>The switch is {result ? 'on' : 'off'}</p>\n <o-icon-button color=\"red\" icons=\"['favorite', 'favorite_border']\" onEventChange={e => setSwitch(e.detail.isOn)}>\n </o-icon-button>\n </div>\n )\n}\n```\n\nMany thanks to calebdwilliams's [jsx-native-events](https://github.com/calebdwilliams/jsx-native-events#readme)\u3002\n --\x3e\n\n## Event triggering and binding best practices\n\nDue to the need for cross framework, in order to unify component behavior in event binding, best practices for component development and use are given here. The event triggering of the omiu component is in the form of lowercase or lowercase + middle dash:\n\n```js\nthis.fire('change')\nthis.fire('my-event')\n```\n\nIn Omi:\n\n```jsx\n<my-ele onChange={this.changeHandler} onMyEvent={this.myEventHandler}></my-ele>\n```\n\nIn Preact :\n\n```jsx\n<my-ele onchange={this.changeHandler} onmy-event={this.myEventHandler}></my-ele>\n```\n\nIn Vue:\n\n```html\n<my-ele @change=\"changeHandler\" @my-event=\"myEventHandler\"></my-ele>\n```\n\nIn React or JS:\n\n```jsx\nmyEl.addEventListener('MyEvent', (evt) => {})\n```\n\n## Contribution\n\nBuild:\n\n```bash\nnpm run build\n```\n\nBuild Demo:\n\n```bash\nnpm start \n```\n\nGenerate the docs:\n\n```bash\nnpm run docs\n```\n\nPublic to npm:\n\n```bash\nnpm publish --access public\n```\n\n\n"}});
//# sourceMappingURL=66.982afa95.chunk.js.map

1
components/docs/static/js/66.982afa95.chunk.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
components/docs/static/js/77.a636f1ae.chunk.js vendored Normal file
View File

@ -0,0 +1,2 @@
webpackJsonp([77],{48:function(n,e){n.exports="# Button\n\nClick or touch it to trigger an operation. The encapsulated logic is triggered in response to user clicks.\n\n<iframe height=\"351\" style=\"width: 100%;\" scrolling=\"no\" title=\"OMIU Button\" src=\"https://codepen.io/omijs/embed/LYppwYG?height=351&theme-id=default&default-tab=html,result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" loading=\"lazy\">\n See the Pen <a href='https://codepen.io/omijs/pen/LYppwYG'>OMIU Checkbox</a> by OMI\n (<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.\n</iframe>\n\n## Import\n\n```js\nimport '@omiu/button'\n```\n\nOr use script tag to ref it.\n\n\n```html\n<script src=\"https://unpkg.com/@omiu/button\"><\/script>\n```\n\n## Usage\n\n```html\n<o-button></o-button>\n```\n\n## API\n\n### Props\n\n```tsx\n{\n size?: 'medium' | 'small' | 'mini',\n type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'\n plain?: boolean,\n round?: boolean,\n circle?: boolean,\n loading?: boolean,\n disabled?: boolean,\n icon?: string,\n autofocus?: boolean,\n nativeType?: 'button' | 'submit' | 'reset',\n block?: boolean\n text?: string\n}\n```\n\n### Default Props\n\n```tsx\n{\n plain: false,\n round: false,\n circle: false,\n loading: false,\n disabled: false,\n autofocus: false,\n nativeType: 'button',\n block: false\n}\n```\n"}});
//# sourceMappingURL=77.a636f1ae.chunk.js.map

1
components/docs/static/js/77.a636f1ae.chunk.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":["../static/js/77.a636f1ae.chunk.js","docs/en/button.md"],"names":["webpackJsonp","48","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/77.a636f1ae.chunk.js","sourcesContent":["webpackJsonp([77],{\n\n/***/ 48:\n/***/ (function(module, exports) {\n\nmodule.exports = \"# Button\\n\\nClick or touch it to trigger an operation. The encapsulated logic is triggered in response to user clicks.\\n\\n<iframe height=\\\"351\\\" style=\\\"width: 100%;\\\" scrolling=\\\"no\\\" title=\\\"OMIU Button\\\" src=\\\"https://codepen.io/omijs/embed/LYppwYG?height=351&theme-id=default&default-tab=html,result\\\" frameborder=\\\"no\\\" allowtransparency=\\\"true\\\" allowfullscreen=\\\"true\\\" loading=\\\"lazy\\\">\\n See the Pen <a href='https://codepen.io/omijs/pen/LYppwYG'>OMIU Checkbox</a> by OMI\\n (<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.\\n</iframe>\\n\\n## Import\\n\\n```js\\nimport '@omiu/button'\\n```\\n\\nOr use script tag to ref it.\\n\\n\\n```html\\n<script src=\\\"https://unpkg.com/@omiu/button\\\"></script>\\n```\\n\\n## Usage\\n\\n```html\\n<o-button></o-button>\\n```\\n\\n## API\\n\\n### Props\\n\\n```tsx\\n{\\n size?: 'medium' | 'small' | 'mini',\\n type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'\\n plain?: boolean,\\n round?: boolean,\\n circle?: boolean,\\n loading?: boolean,\\n disabled?: boolean,\\n icon?: string,\\n autofocus?: boolean,\\n nativeType?: 'button' | 'submit' | 'reset',\\n block?: boolean\\n text?: string\\n}\\n```\\n\\n### Default Props\\n\\n```tsx\\n{\\n plain: false,\\n round: false,\\n circle: false,\\n loading: false,\\n disabled: false,\\n autofocus: false,\\n nativeType: 'button',\\n block: false\\n}\\n```\\n\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/77.a636f1ae.chunk.js","module.exports = \"# Button\\n\\nClick or touch it to trigger an operation. The encapsulated logic is triggered in response to user clicks.\\n\\n<iframe height=\\\"351\\\" style=\\\"width: 100%;\\\" scrolling=\\\"no\\\" title=\\\"OMIU Button\\\" src=\\\"https://codepen.io/omijs/embed/LYppwYG?height=351&theme-id=default&default-tab=html,result\\\" frameborder=\\\"no\\\" allowtransparency=\\\"true\\\" allowfullscreen=\\\"true\\\" loading=\\\"lazy\\\">\\n See the Pen <a href='https://codepen.io/omijs/pen/LYppwYG'>OMIU Checkbox</a> by OMI\\n (<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.\\n</iframe>\\n\\n## Import\\n\\n```js\\nimport '@omiu/button'\\n```\\n\\nOr use script tag to ref it.\\n\\n\\n```html\\n<script src=\\\"https://unpkg.com/@omiu/button\\\"></script>\\n```\\n\\n## Usage\\n\\n```html\\n<o-button></o-button>\\n```\\n\\n## API\\n\\n### Props\\n\\n```tsx\\n{\\n size?: 'medium' | 'small' | 'mini',\\n type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'\\n plain?: boolean,\\n round?: boolean,\\n circle?: boolean,\\n loading?: boolean,\\n disabled?: boolean,\\n icon?: string,\\n autofocus?: boolean,\\n nativeType?: 'button' | 'submit' | 'reset',\\n block?: boolean\\n text?: string\\n}\\n```\\n\\n### Default Props\\n\\n```tsx\\n{\\n plain: false,\\n round: false,\\n circle: false,\\n loading: false,\\n disabled: false,\\n autofocus: false,\\n nativeType: 'button',\\n block: false\\n}\\n```\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/button.md\n// module id = 48\n// module chunks = 77"],"sourceRoot":""}

2
components/docs/static/js/77.f41ec88a.chunk.js vendored
View File

@ -1,2 +0,0 @@
webpackJsonp([77],{48:function(n,e){n.exports="## Button\n\nClick or touch it to trigger an operation. The encapsulated logic is triggered in response to user clicks.\n\n<iframe height=\"351\" style=\"width: 100%;\" scrolling=\"no\" title=\"OMIU Button\" src=\"https://codepen.io/omijs/embed/LYppwYG?height=351&theme-id=default&default-tab=html,result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" loading=\"lazy\">\n See the Pen <a href='https://codepen.io/omijs/pen/LYppwYG'>OMIU Checkbox</a> by OMI\n (<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.\n</iframe>\n\n## Import\n\n```js\nimport '@omiu/button'\n```\n\nOr use script tag to ref it.\n\n\n```html\n<script src=\"https://unpkg.com/@omiu/button\"><\/script>\n```\n\n## Usage\n\n```html\n<o-button></o-button>\n```\n\n## API\n\n### Props\n\n```tsx\n{\n size?: 'medium' | 'small' | 'mini',\n type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'\n plain?: boolean,\n round?: boolean,\n circle?: boolean,\n loading?: boolean,\n disabled?: boolean,\n icon?: string,\n autofocus?: boolean,\n nativeType?: 'button' | 'submit' | 'reset',\n block?: boolean\n text?: string\n}\n```\n\n### defaultProps\n\n```tsx\n{\n plain: false,\n round: false,\n circle: false,\n loading: false,\n disabled: false,\n autofocus: false,\n nativeType: 'button',\n block: false\n}\n```\n"}});
//# sourceMappingURL=77.f41ec88a.chunk.js.map

1
components/docs/static/js/77.f41ec88a.chunk.js.map vendored
View File

@ -1 +0,0 @@
{"version":3,"sources":["../static/js/77.f41ec88a.chunk.js","docs/en/button.md"],"names":["webpackJsonp","48","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/77.f41ec88a.chunk.js","sourcesContent":["webpackJsonp([77],{\n\n/***/ 48:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Button\\n\\nClick or touch it to trigger an operation. The encapsulated logic is triggered in response to user clicks.\\n\\n<iframe height=\\\"351\\\" style=\\\"width: 100%;\\\" scrolling=\\\"no\\\" title=\\\"OMIU Button\\\" src=\\\"https://codepen.io/omijs/embed/LYppwYG?height=351&theme-id=default&default-tab=html,result\\\" frameborder=\\\"no\\\" allowtransparency=\\\"true\\\" allowfullscreen=\\\"true\\\" loading=\\\"lazy\\\">\\n See the Pen <a href='https://codepen.io/omijs/pen/LYppwYG'>OMIU Checkbox</a> by OMI\\n (<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.\\n</iframe>\\n\\n## Import\\n\\n```js\\nimport '@omiu/button'\\n```\\n\\nOr use script tag to ref it.\\n\\n\\n```html\\n<script src=\\\"https://unpkg.com/@omiu/button\\\"></script>\\n```\\n\\n## Usage\\n\\n```html\\n<o-button></o-button>\\n```\\n\\n## API\\n\\n### Props\\n\\n```tsx\\n{\\n size?: 'medium' | 'small' | 'mini',\\n type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'\\n plain?: boolean,\\n round?: boolean,\\n circle?: boolean,\\n loading?: boolean,\\n disabled?: boolean,\\n icon?: string,\\n autofocus?: boolean,\\n nativeType?: 'button' | 'submit' | 'reset',\\n block?: boolean\\n text?: string\\n}\\n```\\n\\n### defaultProps\\n\\n```tsx\\n{\\n plain: false,\\n round: false,\\n circle: false,\\n loading: false,\\n disabled: false,\\n autofocus: false,\\n nativeType: 'button',\\n block: false\\n}\\n```\\n\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/77.f41ec88a.chunk.js","module.exports = \"## Button\\n\\nClick or touch it to trigger an operation. The encapsulated logic is triggered in response to user clicks.\\n\\n<iframe height=\\\"351\\\" style=\\\"width: 100%;\\\" scrolling=\\\"no\\\" title=\\\"OMIU Button\\\" src=\\\"https://codepen.io/omijs/embed/LYppwYG?height=351&theme-id=default&default-tab=html,result\\\" frameborder=\\\"no\\\" allowtransparency=\\\"true\\\" allowfullscreen=\\\"true\\\" loading=\\\"lazy\\\">\\n See the Pen <a href='https://codepen.io/omijs/pen/LYppwYG'>OMIU Checkbox</a> by OMI\\n (<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.\\n</iframe>\\n\\n## Import\\n\\n```js\\nimport '@omiu/button'\\n```\\n\\nOr use script tag to ref it.\\n\\n\\n```html\\n<script src=\\\"https://unpkg.com/@omiu/button\\\"></script>\\n```\\n\\n## Usage\\n\\n```html\\n<o-button></o-button>\\n```\\n\\n## API\\n\\n### Props\\n\\n```tsx\\n{\\n size?: 'medium' | 'small' | 'mini',\\n type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'\\n plain?: boolean,\\n round?: boolean,\\n circle?: boolean,\\n loading?: boolean,\\n disabled?: boolean,\\n icon?: string,\\n autofocus?: boolean,\\n nativeType?: 'button' | 'submit' | 'reset',\\n block?: boolean\\n text?: string\\n}\\n```\\n\\n### defaultProps\\n\\n```tsx\\n{\\n plain: false,\\n round: false,\\n circle: false,\\n loading: false,\\n disabled: false,\\n autofocus: false,\\n nativeType: 'button',\\n block: false\\n}\\n```\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/button.md\n// module id = 48\n// module chunks = 77"],"sourceRoot":""}

2
components/docs/static/js/9.4919020f.chunk.js vendored
View File

@ -1,2 +0,0 @@
webpackJsonp([9],{116:function(n,e){n.exports="## Slider \u6ed1\u5757\n\n\u4e00\u822c\u7528\u4e8e\u62d6\u52a8\u9875\u9762\u5185\u5bb9\n\n## \u5bfc\u5165\n\n```js\nimport '@omiu/slider'\n```\n\n\u6216\u8005\u76f4\u63a5 script \u6807\u7b7e\u5f15\u5165\u3002\n\n```html\n<script src=\"https://unpkg.com/@omiu/slider\"><\/script>\n```\n\n## \u4f7f\u7528\n\n```html\n<o-slider></o-slider>\n```\n\n## API\n\n### \u5c5e\u6027\n\n```tsx\n{\n min?: number\n max?: number\n step?: number\n value?: number\n second_value?: number\n range: 'single' | 'double'\n orient?: 'vetical' | 'horizontal'\n shape: 'square' | 'round'\n disabled?: boolean\n}\n```\n\n### \u9ed8\u8ba4\u5c5e\u6027\n\n```tsx\n{\n //default a single square range slider\n min: 0,\n max: 100,\n step: 1,\n value: 0,\n second_value: 100,\n range: 'single',\n orient: 'horizontal',\n shape: 'square',\n disabled: false,\n}\n```\n\n### \u4e8b\u4ef6\n\n- change\n"}});
//# sourceMappingURL=9.4919020f.chunk.js.map

1
components/docs/static/js/9.4919020f.chunk.js.map vendored
View File

@ -1 +0,0 @@
{"version":3,"sources":["../static/js/9.4919020f.chunk.js","docs/zh-cn/slider.md"],"names":["webpackJsonp","116","module","exports"],"mappings":"AAAAA,cAAc,IAERC,IACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/9.4919020f.chunk.js","sourcesContent":["webpackJsonp([9],{\n\n/***/ 116:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Slider 滑块\\n\\n一般用于拖动页面内容\\n\\n## 导入\\n\\n```js\\nimport '@omiu/slider'\\n```\\n\\n或者直接 script 标签引入。\\n\\n```html\\n<script src=\\\"https://unpkg.com/@omiu/slider\\\"></script>\\n```\\n\\n## 使用\\n\\n```html\\n<o-slider></o-slider>\\n```\\n\\n## API\\n\\n### 属性\\n\\n```tsx\\n{\\n min?: number\\n max?: number\\n step?: number\\n value?: number\\n second_value?: number\\n range: 'single' | 'double'\\n orient?: 'vetical' | 'horizontal'\\n shape: 'square' | 'round'\\n disabled?: boolean\\n}\\n```\\n\\n### 默认属性\\n\\n```tsx\\n{\\n //default a single square range slider\\n min: 0,\\n max: 100,\\n step: 1,\\n value: 0,\\n second_value: 100,\\n range: 'single',\\n orient: 'horizontal',\\n shape: 'square',\\n disabled: false,\\n}\\n```\\n\\n### 事件\\n\\n- change\\n\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/9.4919020f.chunk.js","module.exports = \"## Slider 滑块\\n\\n一般用于拖动页面内容\\n\\n## 导入\\n\\n```js\\nimport '@omiu/slider'\\n```\\n\\n或者直接 script 标签引入。\\n\\n```html\\n<script src=\\\"https://unpkg.com/@omiu/slider\\\"></script>\\n```\\n\\n## 使用\\n\\n```html\\n<o-slider></o-slider>\\n```\\n\\n## API\\n\\n### 属性\\n\\n```tsx\\n{\\n min?: number\\n max?: number\\n step?: number\\n value?: number\\n second_value?: number\\n range: 'single' | 'double'\\n orient?: 'vetical' | 'horizontal'\\n shape: 'square' | 'round'\\n disabled?: boolean\\n}\\n```\\n\\n### 默认属性\\n\\n```tsx\\n{\\n //default a single square range slider\\n min: 0,\\n max: 100,\\n step: 1,\\n value: 0,\\n second_value: 100,\\n range: 'single',\\n orient: 'horizontal',\\n shape: 'square',\\n disabled: false,\\n}\\n```\\n\\n### 事件\\n\\n- change\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/slider.md\n// module id = 116\n// module chunks = 9"],"sourceRoot":""}

2
components/docs/static/js/9.7df62ae0.chunk.js vendored Normal file
View File

@ -0,0 +1,2 @@
webpackJsonp([9],{116:function(n,e){n.exports="## Slider \u6ed1\u5757\n\n\u4e00\u822c\u7528\u4e8e\u62d6\u52a8\u9875\u9762\u5185\u5bb9\n\n<iframe height=\"undefined\" style=\"width: 100%;\" scrolling=\"no\" title=\"OMIU Slider\" src=\"https://codepen.io/omijs/embed/undefined?height=undefined&theme-id=default&default-tab=undefined\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" loading=\"lazy\">\n See the Pen <a href='https://codepen.io/omijs/pen/undefined'>OMIU Checkbox</a> by OMI\n (<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.\n</iframe>\n\n## \u5bfc\u5165\n\n```js\nimport '@omiu/slider'\n```\n\n\u6216\u8005\u76f4\u63a5 script \u6807\u7b7e\u5f15\u5165\u3002\n\n\n```html\n<script src=\"https://unpkg.com/@omiu/slider\"><\/script>\n```\n\n## \u4f7f\u7528\n\n```html\n<o-slider></o-slider>\n```\n\n\n## API\n\n### \u5c5e\u6027\n\n```tsx\n{\n min?: number\n max?: number\n step?: number\n value?: number\n second_value?: number\n range: 'single' | 'double'\n orient?: 'vertical' | 'horizontal'\n shape: 'square' | 'round'\n tooltip?: boolean\n disabled?: boolean\n}\n```\n\n### \u9ed8\u8ba4\u5c5e\u6027\n```tsx\n{\n //default a single round range slider\n min: undefined,\n max: undefined,\n step: 1,\n value: undefined,\n second_value: undefined,\n range: 'single',\n orient: 'horizontal',\n shape: 'round',\n tooltip: false,\n disabled: false,\n}\n```\n### \u4e8b\u4ef6\n* input\n"}});
//# sourceMappingURL=9.7df62ae0.chunk.js.map

1
components/docs/static/js/9.7df62ae0.chunk.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":["../static/js/9.7df62ae0.chunk.js","docs/zh-cn/slider.md"],"names":["webpackJsonp","116","module","exports"],"mappings":"AAAAA,cAAc,IAERC,IACA,SAAUC,EAAQC,GCHxBD,EAAOC,QAAU","file":"static/js/9.7df62ae0.chunk.js","sourcesContent":["webpackJsonp([9],{\n\n/***/ 116:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Slider 滑块\\n\\n一般用于拖动页面内容\\n\\n<iframe height=\\\"undefined\\\" style=\\\"width: 100%;\\\" scrolling=\\\"no\\\" title=\\\"OMIU Slider\\\" src=\\\"https://codepen.io/omijs/embed/undefined?height=undefined&theme-id=default&default-tab=undefined\\\" frameborder=\\\"no\\\" allowtransparency=\\\"true\\\" allowfullscreen=\\\"true\\\" loading=\\\"lazy\\\">\\n See the Pen <a href='https://codepen.io/omijs/pen/undefined'>OMIU Checkbox</a> by OMI\\n (<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.\\n</iframe>\\n\\n## 导入\\n\\n```js\\nimport '@omiu/slider'\\n```\\n\\n或者直接 script 标签引入。\\n\\n\\n```html\\n<script src=\\\"https://unpkg.com/@omiu/slider\\\"></script>\\n```\\n\\n## 使用\\n\\n```html\\n<o-slider></o-slider>\\n```\\n\\n\\n## API\\n\\n### 属性\\n\\n```tsx\\n{\\n min?: number\\n max?: number\\n step?: number\\n value?: number\\n second_value?: number\\n range: 'single' | 'double'\\n orient?: 'vertical' | 'horizontal'\\n shape: 'square' | 'round'\\n tooltip?: boolean\\n disabled?: boolean\\n}\\n```\\n\\n### 默认属性\\n```tsx\\n{\\n //default a single round range slider\\n min: undefined,\\n max: undefined,\\n step: 1,\\n value: undefined,\\n second_value: undefined,\\n range: 'single',\\n orient: 'horizontal',\\n shape: 'round',\\n tooltip: false,\\n disabled: false,\\n}\\n```\\n### 事件\\n* input\\n\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/9.7df62ae0.chunk.js","module.exports = \"## Slider 滑块\\n\\n一般用于拖动页面内容\\n\\n<iframe height=\\\"undefined\\\" style=\\\"width: 100%;\\\" scrolling=\\\"no\\\" title=\\\"OMIU Slider\\\" src=\\\"https://codepen.io/omijs/embed/undefined?height=undefined&theme-id=default&default-tab=undefined\\\" frameborder=\\\"no\\\" allowtransparency=\\\"true\\\" allowfullscreen=\\\"true\\\" loading=\\\"lazy\\\">\\n See the Pen <a href='https://codepen.io/omijs/pen/undefined'>OMIU Checkbox</a> by OMI\\n (<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.\\n</iframe>\\n\\n## 导入\\n\\n```js\\nimport '@omiu/slider'\\n```\\n\\n或者直接 script 标签引入。\\n\\n\\n```html\\n<script src=\\\"https://unpkg.com/@omiu/slider\\\"></script>\\n```\\n\\n## 使用\\n\\n```html\\n<o-slider></o-slider>\\n```\\n\\n\\n## API\\n\\n### 属性\\n\\n```tsx\\n{\\n min?: number\\n max?: number\\n step?: number\\n value?: number\\n second_value?: number\\n range: 'single' | 'double'\\n orient?: 'vertical' | 'horizontal'\\n shape: 'square' | 'round'\\n tooltip?: boolean\\n disabled?: boolean\\n}\\n```\\n\\n### 默认属性\\n```tsx\\n{\\n //default a single round range slider\\n min: undefined,\\n max: undefined,\\n step: 1,\\n value: undefined,\\n second_value: undefined,\\n range: 'single',\\n orient: 'horizontal',\\n shape: 'round',\\n tooltip: false,\\n disabled: false,\\n}\\n```\\n### 事件\\n* input\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/slider.md\n// module id = 116\n// module chunks = 9"],"sourceRoot":""}

4
components/docs/static/js/cn.430cc3dc.js → components/docs/static/js/cn.9ee79072.js vendored
View File

File diff suppressed because one or more lines are too long

2
components/docs/static/js/cn.430cc3dc.js.map → components/docs/static/js/cn.9ee79072.js.map vendored
View File

File diff suppressed because one or more lines are too long

4
components/docs/static/js/index.c93621c4.js → components/docs/static/js/index.e4c8e269.js vendored
View File

File diff suppressed because one or more lines are too long

2
components/docs/static/js/index.c93621c4.js.map → components/docs/static/js/index.e4c8e269.js.map vendored
View File

File diff suppressed because one or more lines are too long

69
components/input-number/demos/js-demo/index.html Normal file
View File

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OMI InputNumber</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>
<style>
o-input-number {
margin-top: 10px;
}
body{
margin: 0 0 50px 50px;
}
h3{
font-weight: 400;
}
</style>
<h2>InputNumber计数器</h2>
<h3>基础用法：max=10 min=1</h3>
<div>
<o-input-number min=1 max=10></o-input-number>
</div>
<h3>禁用状态</h3>
<div>
<o-input-number disabled='true'></o-input-number>
</div>
<h3>步数：step=2</h3>
<div>
<o-input-number step=2></o-input-number>
</div>
<h3>严格步数：strictly='true' step=2</h3>
<div>
<o-input-number step=2 strictly='true' ></o-input-number>
</div>
<h3>精度：precision=2 step=0.01</h3>
<div>
<o-input-number precision=2 step=0.01></o-input-number>
</div>
<h3>尺寸：medium | small | mini</h3>
<div>
<o-input-number size='medium'></o-input-number>
<o-input-number size='small' step=2></o-input-number>
<o-input-number size='mini'></o-input-number>
</div>
<h3>样式2：style='right'</h3>
<div>
<o-input-number style='right'></o-input-number>
<o-input-number style='right' size='small'></o-input-number>
<o-input-number style='right' size='mini'></o-input-number>
</div>
<h3>样式3：style='left'</h3>
<div>
<o-input-number style='left'></o-input-number>
<o-input-number style='left' size='small'></o-input-number>
<o-input-number style='left' size='mini'></o-input-number>
</div>
</body>
</html>

39
components/input-number/index.html
View File

@ -1,39 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- <link rel="icon" type="image/svg+xml" href="favicon.svg" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OMI InputNumber</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 type="module" src="/src/index.tsx"></script>
<style>
o-input-number {
margin-top: 10px;
}
</style>
<br>
<div>
<o-input-number ></o-input-number>
</div>
<br>
<div>
<o-input-number disabled='true'></o-input-number>
</div>
<br>
<div>
<o-input-number size='medium'></o-input-number>
<o-input-number size='small' step=2></o-input-number>
<o-input-number size='mini'></o-input-number>
</div>
<br>
</body>
</html>

94
components/input-number/package.json
View File

@ -1,17 +1,91 @@
{
"version": "0.0.0",
"name": "@omiu/input-number",
"version": "0.0.3",
"description": "InputNumber",
"main": "src/index.js",
"module": "src/index.esm.js",
"types": "src/index.d.ts",
"scripts": {
"start": "vite",
"build": "tsc && vite build --base=./",
"serve": "vite preview"
"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"
},
"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": {
"less": "^4.1.1",
"sass": "^1.36.0",
"sass-loader": "^12.1.0",
"ts-loader": "^9.2.4",
"typescript": "^4.3.5",
"vite": "^2.3.7"
"@esm-bundle/chai": "^4.3.4",
"@open-wc/testing": "^2.5.33",
"@rollup/plugin-commonjs": "^11.1.0",
"@web/test-runner": "^0.13.13",
"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-polyfills": "^0.2.1",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-scss": "^2.4.0",
"rollup-plugin-typescript": "^1.0.1",
"sass": "^1.37.0",
"sass-loader": "^7.1.0",
"sinon": "^11.1.1",
"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",

54
components/tabs/scripts/docs-gen.js → components/input-number/scripts/docs-gen.js
View File

@ -14,7 +14,7 @@ const packageName = package.name
const name = packageName.split('/')[1]
const upperCaseName = name.split('-').map(item => {
return item.charAt(0).toUpperCase() + item.slice(1)
return item.charAt(0).toUpperCase() + item.slice(1)
}).join('')
const tagName = 'o-' + name
@ -22,13 +22,13 @@ const tagName = 'o-' + name
let events, eventMap
if (eventContexts) {
events = eventContexts.map(event => {
return event.replace('this.fire(\'', '').replace('\',', '').replace('\')', '')
})
eventMap = {}
events.forEach(event => {
eventMap[event] = 1
})
events = eventContexts.map(event => {
return event.replace('this.fire(\'', '').replace('\',', '').replace('\')', '')
})
eventMap = {}
events.forEach(event => {
eventMap[event] = 1
})
}
const cnContent = `## ${upperCaseName} ${package.docsExtend.cnName}
@ -70,7 +70,7 @@ ${props}
${defaultProps ? '### 默认属性\n' : ''}${defaultProps ? '\`\`\`tsx\n' : ''}${defaultProps ? defaultProps : ''}
${defaultProps ? '\`\`\`\n' : ''}${eventMap ? '### 事件\n' : ''}${eventMap ? Object.keys(eventMap).map(event => {
return `* ${event}\n`
return `* ${event}\n`
}).join('') : ''}`
fs.writeFileSync(`../docs-src/src/docs/zh-cn/${name}.md`, cnContent)
@ -115,7 +115,7 @@ ${props}
${defaultProps ? '### 默认属性\n\n' : ''}${defaultProps ? '\`\`\`tsx\n' : ''}${defaultProps ? defaultProps : ''}
${defaultProps ? '\`\`\`\n' : ''}${eventMap ? '### Events\n\n' : ''}${eventMap ? Object.keys(eventMap).map(event => {
return `* ${event}\n`
return `* ${event}\n`
}).join('') : ''}`
@ -130,24 +130,24 @@ fs.writeFileSync(`../${name}/README.md`, enContent.replace(/<iframe[\s\S]*?<\/if
function extract(startWith, str) {
const start = str.indexOf(startWith)
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) {
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++
}
break
} else {
stackCount--
}
} else if (str[end] === '{') {
stackCount++
}
end++
}
end++
}
return str.substring(start, end + 1)
return str.substring(start, end + 1)
}

5
components/tabs/scripts/rollup.config.js → components/input-number/scripts/rollup.config.js
View File

@ -1,9 +1,9 @@
import nodeResolve from "rollup-plugin-node-resolve";
import typescript from 'rollup-plugin-typescript';
import scss from 'rollup-plugin-scss'
import scss from 'rollup-plugin-scss';
import commonjs from '@rollup/plugin-commonjs';
const fs = require('fs')
const fs = require('fs');
const license = require("rollup-plugin-license");
const pkg = require("../package.json");
const licensePlugin = license({
@ -22,6 +22,7 @@ export default {
plugins: [
nodeResolve({
main: true
// mainFields:["main"]
}),
scss({
//output: false,

4
components/tabs/scripts/rollup.end.js → components/input-number/scripts/rollup.end.js
View File

@ -11,6 +11,4 @@ js.replace(`var css = /*#__PURE__*/Object.freeze({
});`, `
var css = \`${css}\`
`)
)
)

5
components/tabs/scripts/webpack.build.js → components/input-number/scripts/webpack.build.js
View File

@ -1,7 +1,7 @@
const path = require('path')
const glob = require('glob')
const webpack = require('webpack')
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
const pkgName = require('../package.json')
const componentName = pkgName.name.split('/')[1]
@ -11,6 +11,9 @@ const library = 'O' + componentName.split('-').map(name => name.charAt(0).toUppe
const config = {
devtool: 'source-map',
plugins: [
new ProgressBarPlugin()
],
entry: {
[name]: './src/index.tsx'
},

166
components/input-number/src/index.css
View File

@ -1,4 +1,162 @@
html,body{
padding: 0;
margin: 0;
}
.o-input-number {
position: relative;
display: inline-block; }
.o-input-number-medium {
height: 40px;
width: 172px; }
.o-input-number-small {
height: 34px;
width: 146px; }
.o-input-number-mini {
height: 30px;
width: 130px; }
.o-button,
.o-input {
position: absolute;
height: 100%;
line-height: 100%;
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;
font-weight: 500;
transition: .1s;
vertical-align: top; }
.o-button {
width: 25%;
line-height: 15%;
background-color: #f3faf1; }
.o-input {
left: 25%;
width: 50%; }
.o-button-add {
right: 0;
border-bottom-right-radius: 0.3em;
border-top-right-radius: 0.3em;
border-left: none; }
.o-button-sub {
left: 0;
border-bottom-left-radius: 0.3em;
border-top-left-radius: 0.3em;
border-right: none; }
.o-input-number.is-disabled .o-input,
.o-input-number.is-disabled:hover .o-input,
.o-input-number.is-disabled .o-button,
.o-input-number.is-disabled:hover .o-button {
background-color: #F5F7FA;
border-color: #E4E7ED;
color: #E4E7ED;
pointer-events: none; }
.o-input-number.is-disabled {
cursor: not-allowed; }
.o-input-number:hover .o-input {
color: #07c160;
color: var(--o-primary, #07c160);
border-top-color: #07c160;
border-top-color: var(--o-primary, #07c160);
border-bottom-color: #07c160;
border-bottom-color: var(--o-primary, #07c160); }
.o-input-number:hover .o-button {
background-color: rgba(7, 193, 96, 0.1);
background-color: var(--o-primary-fade-lot, rgba(7, 193, 96, 0.1));
color: #07c160;
color: var(--o-primary, #07c160);
border-color: #07c160;
border-color: var(--o-primary, #07c160); }
.o-input-medium,
.o-button-medium {
font-size: 20px; }
.o-input-small,
.o-button-small {
font-size: 18px; }
.o-input-mini,
.o-button-mini {
font-size: 16px; }
.o-input-right {
left: 0;
width: 75%;
border-radius: 0.3em 0 0 0.3em; }
.o-button-add-right {
right: 0;
top: 0;
height: 50%;
border-radius: 0 0.3em 0 0; }
.o-button-sub-right {
margin-left: 75%;
bottom: 0;
height: 50%;
border-width: 0 1px 1px 0;
border-right: 1px solid #dcdfe6;
border-radius: 0 0 0.3em 0; }
.o-input-number:hover .o-input-right {
border-left-color: #07c160;
border-left-color: var(--o-primary, #07c160); }
.o-input-number:hover .o-button-sub-right {
border-right-color: #07c160;
border-right-color: var(--o-primary, #07c160);
border-top-color: #dcdfe6; }
.o-input-number:hover .o-button-add-right {
border-bottom-color: #dcdfe6; }
.o-input-left {
right: 0;
width: 75%;
border-radius: 0 0.3em 0.3em 0; }
.o-button-add-left {
left: 0;
top: 0;
height: 50%;
border-left: 1px solid #dcdfe6;
border-radius: 0.3em 0 0 0;
border-width: 1px 0 1px 1px; }
.o-button-sub-left {
margin-right: 75%;
bottom: 0;
height: 50%;
border-width: 0 1px 1px 1px;
border-radius: 0 0 0 0.3em; }
.o-input-number:hover .o-input-left {
border-right-color: #07c160;
border-right-color: var(--o-primary, #07c160); }
.o-input-number:hover .o-button-sub-left {
border-left-color: #07c160;
border-left-color: var(--o-primary, #07c160);
border-top-color: #dcdfe6; }
.o-input-number:hover .o-button-sub-disabled,
.o-button-sub-disabled,
.o-input-number:hover .o-button-add-disabled,
.o-button-add-disabled {
color: #E4E7ED;
cursor: not-allowed; }

33
components/input-number/src/index.d.ts vendored
View File

@ -1,44 +1,51 @@
import { WeElement } from 'omi';
interface Props {
value?: number;
value?: string;
size?: 'medium' | 'small' | 'mini';
right?: string;
left?: string;
style?: 'justify' | 'right' | 'left';
disabled?: boolean;
step?: number;
strictly?: boolean;
max?: number;
min?: number;
precision?: number;
}
export default class InputNumber extends WeElement<Props> {
static css: any;
static defaultProps: {
value: number;
value: string;
size: string;
right: string;
left: string;
style: string;
step: number;
strictly: boolean;
disabled: boolean;
max: number;
min: number;
precision: number;
};
static propTypes: {
value: NumberConstructor;
value: StringConstructor;
size: StringConstructor;
right: StringConstructor;
left: StringConstructor;
style: StringConstructor;
step: NumberConstructor;
strictly: BooleanConstructor;
disabled: BooleanConstructor;
max: NumberConstructor;
min: NumberConstructor;
precision: NumberConstructor;
};
__$value: number;
preValue: number;
install(): void;
_onGetValue: () => number;
_onGetValue: () => string;
valueAdd: number;
valueSub: number;
inputErro: boolean;
_onSetValue: (value: any) => void;
handleInput: (evt: any) => void;
add: (evt: any) => void;
subtraction: (evt: any) => void;
clearInput: () => void;
handleChange: (evt: any) => void;
add: () => void;
subtraction: () => void;
render(props: any): JSX.Element;
}
export {};

375
components/input-number/src/index.esm.js Normal file
View File

@ -0,0 +1,375 @@
/**
* @omiu/input-number v0.0.3 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.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* 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 __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
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-input-number {
position: relative;
display: inline-block; }
.o-input-number-medium {
height: 40px;
width: 172px; }
.o-input-number-small {
height: 34px;
width: 146px; }
.o-input-number-mini {
height: 30px;
width: 130px; }
.o-button,
.o-input {
position: absolute;
height: 100%;
line-height: 100%;
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;
font-weight: 500;
transition: .1s;
vertical-align: top; }
.o-button {
width: 25%;
line-height: 15%;
background-color: #f3faf1; }
.o-input {
left: 25%;
width: 50%; }
.o-button-add {
right: 0;
border-bottom-right-radius: 0.3em;
border-top-right-radius: 0.3em;
border-left: none; }
.o-button-sub {
left: 0;
border-bottom-left-radius: 0.3em;
border-top-left-radius: 0.3em;
border-right: none; }
.o-input-number.is-disabled .o-input,
.o-input-number.is-disabled:hover .o-input,
.o-input-number.is-disabled .o-button,
.o-input-number.is-disabled:hover .o-button {
background-color: #F5F7FA;
border-color: #E4E7ED;
color: #E4E7ED;
pointer-events: none; }
.o-input-number.is-disabled {
cursor: not-allowed; }
.o-input-number:hover .o-input {
color: #07c160;
color: var(--o-primary, #07c160);
border-top-color: #07c160;
border-top-color: var(--o-primary, #07c160);
border-bottom-color: #07c160;
border-bottom-color: var(--o-primary, #07c160); }
.o-input-number:hover .o-button {
background-color: rgba(7, 193, 96, 0.1);
background-color: var(--o-primary-fade-lot, rgba(7, 193, 96, 0.1));
color: #07c160;
color: var(--o-primary, #07c160);
border-color: #07c160;
border-color: var(--o-primary, #07c160); }
.o-input-medium,
.o-button-medium {
font-size: 20px; }
.o-input-small,
.o-button-small {
font-size: 18px; }
.o-input-mini,
.o-button-mini {
font-size: 16px; }
.o-input-right {
left: 0;
width: 75%;
border-radius: 0.3em 0 0 0.3em; }
.o-button-add-right {
right: 0;
top: 0;
height: 50%;
border-radius: 0 0.3em 0 0; }
.o-button-sub-right {
margin-left: 75%;
bottom: 0;
height: 50%;
border-width: 0 1px 1px 0;
border-right: 1px solid #dcdfe6;
border-radius: 0 0 0.3em 0; }
.o-input-number:hover .o-input-right {
border-left-color: #07c160;
border-left-color: var(--o-primary, #07c160); }
.o-input-number:hover .o-button-sub-right {
border-right-color: #07c160;
border-right-color: var(--o-primary, #07c160);
border-top-color: #dcdfe6; }
.o-input-number:hover .o-button-add-right {
border-bottom-color: #dcdfe6; }
.o-input-left {
right: 0;
width: 75%;
border-radius: 0 0.3em 0.3em 0; }
.o-button-add-left {
left: 0;
top: 0;
height: 50%;
border-left: 1px solid #dcdfe6;
border-radius: 0.3em 0 0 0;
border-width: 1px 0 1px 1px; }
.o-button-sub-left {
margin-right: 75%;
bottom: 0;
height: 50%;
border-width: 0 1px 1px 1px;
border-radius: 0 0 0 0.3em; }
.o-input-number:hover .o-input-left {
border-right-color: #07c160;
border-right-color: var(--o-primary, #07c160); }
.o-input-number:hover .o-button-sub-left {
border-left-color: #07c160;
border-left-color: var(--o-primary, #07c160);
border-top-color: #dcdfe6; }
.o-input-number:hover .o-button-sub-disabled,
.o-button-sub-disabled,
.o-input-number:hover .o-button-add-disabled,
.o-button-add-disabled {
color: #E4E7ED;
cursor: not-allowed; }
`
var InputNumber = /** @class */ (function (_super) {
__extends(InputNumber, _super);
function InputNumber() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._onGetValue = function () {
return _this.props.value;
};
_this._onSetValue = function (value) {
// console.log('pre',this.preValue)
// console.log(this.__$value)
if (_this.props.strictly == true && ((Math.abs(_this.preValue - _this.__$value) % _this.props.step != 0))) { // program should correct the number when input is not right under the mode of strict.
_this.inputErro = true;
_this.valueAdd = _this.preValue + _this.props.step * 2;
_this.valueSub = _this.preValue - _this.props.step;
}
_this.__$value = value;
_this.props.value = value;
_this.setAttribute('value', value);
//precision
if (_this.props.precision != 0) {
var s = value.toString();
var rs = s.indexOf('.');
if (rs < 0) {
rs = s.length;
s += '.';
}
while (s.length <= rs + _this.props.precision) {
s += '0';
}
_this.setAttribute('value', Number.parseFloat(s).toFixed(_this.props.precision));
}
else {
_this.setAttribute('value', Number.parseFloat(value).toFixed(_this.props.precision));
}
};
_this.handleInput = function (evt) {
evt.stopPropagation();
if (parseFloat(evt.target.value) >= _this.props.min && parseFloat(evt.target.value) <= _this.props.max) {
_this._onSetValue(evt.target.value);
_this.fire('input', _this.props.value);
}
};
_this.handleChange = function (evt) {
_this.__$value = evt.target.value;
_this.props.value = evt.target.value;
_this.fire('change', _this.props.value);
};
_this.add = function () {
var value = Number(_this._onGetValue());
_this.preValue = value;
// console.log(this.preValue)
if (value + _this.props.step <= _this.props.max) {
value += _this.props.step;
_this._onSetValue(value);
}
if (_this.inputErro == true) {
_this._onSetValue(_this.valueAdd);
_this.inputErro = false;
}
};
_this.subtraction = function () {
var value = Number(_this._onGetValue());
_this.preValue = value;
if (value - _this.props.step >= _this.props.min) {
value -= _this.props.step;
_this._onSetValue(value);
}
if (_this.inputErro == true) {
_this._onSetValue(_this.valueSub);
_this.inputErro = false;
}
};
return _this;
}
InputNumber.prototype.install = function () {
this.__$value = Number(this.props.value);
this.preValue = Number(this.props.value);
Object.defineProperty(this, 'value', {
get: this._onGetValue,
set: this._onSetValue
});
};
InputNumber.prototype.render = function (props) {
var _a, _b, _c, _d;
props.value; props.style; props.size; props.disabled; props.step; props.max; props.min; props.strictly; props.precision; var onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave; __rest(props, ["value", "style", "size", "disabled", "step", "max", "min", "strictly", "precision", "onMouseEnter", "onMouseLeave"]);
return (h("div", __assign({}, extractClass(props, 'o-input-number', (_a = {
'is-disabled': this.props.disabled
},
_a['o-input-number-' + props.size] = props.size,
_a)), { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }),
h("button", __assign({}, extractClass(props, 'o-button', 'o-button-sub', (_b = {
'is-disabled': this.props.disabled
},
_b['o-button-' + props.size] = props.size,
_b['o-button-sub-' + props.style] = props.style,
_b['o-button-sub-disabled'] = parseFloat(this.props.value) - this.props.step < this.props.min,
_b)), { onClick: this.subtraction }), "-"),
h("input", __assign({}, extractClass(props, 'o-input', (_c = {},
_c['o-input-' + props.size] = props.size,
_c['o-input-' + props.style] = props.style,
_c)), { value: Number.parseFloat(props.value).toFixed(this.props.precision), size: props.size, onInput: this.handleInput, onChange: this.handleChange })),
h("button", __assign({}, extractClass(props, 'o-button', 'o-button-add', (_d = {
'is-disabled': this.props.disabled
},
_d['o-button-' + props.size] = props.size,
_d['o-button-add-' + props.style] = props.style,
_d['o-button-add-disabled'] = parseFloat(this.props.value) + this.props.step > this.props.max,
_d)), { onClick: this.add }), "+")));
};
InputNumber.css = css;
InputNumber.defaultProps = {
value: '1',
size: 'medium',
style: 'justify',
step: 1,
strictly: false,
disabled: false,
max: Number.MAX_VALUE,
min: 1,
precision: 0
};
InputNumber.propTypes = {
value: String,
size: String,
style: String,
step: Number,
strictly: Boolean,
disabled: Boolean,
max: Number,
min: Number,
precision: Number
};
InputNumber = __decorate([
tag('o-input-number')
], InputNumber);
return InputNumber;
}(WeElement));
export default InputNumber;
//# sourceMappingURL=index.esm.js.map

1
components/input-number/src/index.esm.js.map Normal file
View File

File diff suppressed because one or more lines are too long

373
components/input-number/src/index.js
View File

@ -1,14 +1,243 @@
(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["OInputNumber"] = factory(require("omi"));
else
root["OInputNumber"] = 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/index.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js?!./src/index.scss":
/*!*************************************************************************************************************************************!*\
!*** ./node_modules/css-loader!./node_modules/resolve-url-loader!./node_modules/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/lib/css-base.js */ "./node_modules/css-loader/lib/css-base.js")(false);
// imports
// module
exports.push([module.i, ".o-input-number {\n position: relative;\n display: inline-block; }\n\n.o-input-number-medium {\n height: 40px;\n width: 172px; }\n\n.o-input-number-small {\n height: 34px;\n width: 146px; }\n\n.o-input-number-mini {\n height: 30px;\n width: 130px; }\n\n.o-button,\n.o-input {\n position: absolute;\n height: 100%;\n line-height: 100%;\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 font-weight: 500;\n transition: .1s;\n vertical-align: top; }\n\n.o-button {\n width: 25%;\n line-height: 15%;\n background-color: #f3faf1; }\n\n.o-input {\n left: 25%;\n width: 50%; }\n\n.o-button-add {\n right: 0;\n border-bottom-right-radius: 0.3em;\n border-top-right-radius: 0.3em;\n border-left: none; }\n\n.o-button-sub {\n left: 0;\n border-bottom-left-radius: 0.3em;\n border-top-left-radius: 0.3em;\n border-right: none; }\n\n.o-input-number.is-disabled .o-input,\n.o-input-number.is-disabled:hover .o-input,\n.o-input-number.is-disabled .o-button,\n.o-input-number.is-disabled:hover .o-button {\n background-color: #F5F7FA;\n border-color: #E4E7ED;\n color: #E4E7ED;\n pointer-events: none; }\n\n.o-input-number.is-disabled {\n cursor: not-allowed; }\n\n.o-input-number:hover .o-input {\n color: #07c160;\n color: var(--o-primary, #07c160);\n border-top-color: #07c160;\n border-top-color: var(--o-primary, #07c160);\n border-bottom-color: #07c160;\n border-bottom-color: var(--o-primary, #07c160); }\n\n.o-input-number:hover .o-button {\n background-color: rgba(7, 193, 96, 0.1);\n background-color: var(--o-primary-fade-lot, rgba(7, 193, 96, 0.1));\n color: #07c160;\n color: var(--o-primary, #07c160);\n border-color: #07c160;\n border-color: var(--o-primary, #07c160); }\n\n.o-input-medium,\n.o-button-medium {\n font-size: 20px; }\n\n.o-input-small,\n.o-button-small {\n font-size: 18px; }\n\n.o-input-mini,\n.o-button-mini {\n font-size: 16px; }\n\n.o-input-right {\n left: 0;\n width: 75%;\n border-radius: 0.3em 0 0 0.3em; }\n\n.o-button-add-right {\n right: 0;\n top: 0;\n height: 50%;\n border-radius: 0 0.3em 0 0; }\n\n.o-button-sub-right {\n margin-left: 75%;\n bottom: 0;\n height: 50%;\n border-width: 0 1px 1px 0;\n border-right: 1px solid #dcdfe6;\n border-radius: 0 0 0.3em 0; }\n\n.o-input-number:hover .o-input-right {\n border-left-color: #07c160;\n border-left-color: var(--o-primary, #07c160); }\n\n.o-input-number:hover .o-button-sub-right {\n border-right-color: #07c160;\n border-right-color: var(--o-primary, #07c160);\n border-top-color: #dcdfe6; }\n\n.o-input-number:hover .o-button-add-right {\n border-bottom-color: #dcdfe6; }\n\n.o-input-left {\n right: 0;\n width: 75%;\n border-radius: 0 0.3em 0.3em 0; }\n\n.o-button-add-left {\n left: 0;\n top: 0;\n height: 50%;\n border-left: 1px solid #dcdfe6;\n border-radius: 0.3em 0 0 0;\n border-width: 1px 0 1px 1px; }\n\n.o-button-sub-left {\n margin-right: 75%;\n bottom: 0;\n height: 50%;\n border-width: 0 1px 1px 1px;\n border-radius: 0 0 0 0.3em; }\n\n.o-input-number:hover .o-input-left {\n border-right-color: #07c160;\n border-right-color: var(--o-primary, #07c160); }\n\n.o-input-number:hover .o-button-sub-left {\n border-left-color: #07c160;\n border-left-color: var(--o-primary, #07c160);\n border-top-color: #dcdfe6; }\n\n.o-input-number:hover .o-button-sub-disabled,\n.o-button-sub-disabled,\n.o-input-number:hover .o-button-add-disabled,\n.o-button-add-disabled {\n color: #E4E7ED;\n cursor: not-allowed; }\n", ""]);
// exports
/***/ }),
/***/ "./node_modules/css-loader/lib/css-base.js":
/*!*************************************************!*\
!*** ./node_modules/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!../node_modules/resolve-url-loader!../node_modules/sass-loader/dist/cjs.js??ref--4-3!./index.scss */ "./node_modules/css-loader/index.js!./node_modules/resolve-url-loader/index.js!./node_modules/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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@ -43,50 +272,85 @@ var __rest = (this && this.__rest) || function (s, e) {
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var omi_1 = require("omi");
var css = require("./index.scss");
var omi_1 = __webpack_require__(/*! omi */ "omi");
var css = __webpack_require__(/*! ./index.scss */ "./src/index.scss");
var InputNumber = /** @class */ (function (_super) {
__extends(InputNumber, _super);
function InputNumber() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._onGetValue = function () {
return Number(_this.__$value);
return _this.props.value;
};
_this._onSetValue = function (value) {
// console.log('pre',this.preValue)
// console.log(this.__$value)
if (_this.props.strictly == true && ((Math.abs(_this.preValue - _this.__$value) % _this.props.step != 0))) { // program should correct the number when input is not right under the mode of strict.
_this.inputErro = true;
_this.valueAdd = _this.preValue + _this.props.step * 2;
_this.valueSub = _this.preValue - _this.props.step;
}
_this.__$value = value;
_this.props.value = value;
_this.setAttribute('value', value);
//precision
if (_this.props.precision != 0) {
var s = value.toString();
var rs = s.indexOf('.');
if (rs < 0) {
rs = s.length;
s += '.';
}
while (s.length <= rs + _this.props.precision) {
s += '0';
}
_this.setAttribute('value', Number.parseFloat(s).toFixed(_this.props.precision));
}
else {
_this.setAttribute('value', Number.parseFloat(value).toFixed(_this.props.precision));
}
};
_this.handleInput = function (evt) {
evt.stopPropagation();
if (Number(evt.target.value) >= _this.props.min && Number(evt.target.value) <= _this.props.max) {
_this._onSetValue(Number(evt.target.value));
_this.__$value = evt.target.value;
if (parseFloat(evt.target.value) >= _this.props.min && parseFloat(evt.target.value) <= _this.props.max) {
_this._onSetValue(evt.target.value);
_this.fire('input', _this.props.value);
}
};
_this.add = function (evt) {
var value = _this._onGetValue();
value += _this.props.step;
if (value <= _this.props.max) {
_this._onSetValue(value - 0);
_this.handleChange = function (evt) {
_this.__$value = evt.target.value;
_this.props.value = evt.target.value;
_this.fire('change', _this.props.value);
};
_this.add = function () {
var value = Number(_this._onGetValue());
_this.preValue = value;
if (value + _this.props.step <= _this.props.max) {
value += _this.props.step;
_this._onSetValue(value);
}
if (_this.inputErro == true) {
_this._onSetValue(_this.valueAdd);
_this.inputErro = false;
}
};
_this.subtraction = function (evt) {
var value = _this._onGetValue();
value -= _this.props.step;
if (value >= _this.props.min) {
_this._onSetValue(value - 0);
_this.subtraction = function () {
var value = Number(_this._onGetValue());
_this.preValue = value;
if (value - _this.props.step >= _this.props.min) {
value -= _this.props.step;
_this._onSetValue(value);
}
if (_this.inputErro == true) {
_this._onSetValue(_this.valueSub);
_this.inputErro = false;
}
};
_this.clearInput = function () {
_this.updateProps({
value: ''
});
// this.__$value = ''
};
return _this;
}
InputNumber.prototype.install = function () {
this.__$value = this.props.value;
this.__$value = Number(this.props.value);
this.preValue = Number(this.props.value);
Object.defineProperty(this, 'value', {
get: this._onGetValue,
set: this._onSetValue
@ -94,44 +358,53 @@ var InputNumber = /** @class */ (function (_super) {
};
InputNumber.prototype.render = function (props) {
var _a, _b, _c, _d;
var value = props.value, left = props.left, right = props.right, size = props.size, disabled = props.disabled, max = props.max, min = props.min, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, otherProps = __rest(props, ["value", "left", "right", "size", "disabled", "max", "min", "onMouseEnter", "onMouseLeave"]);
var value = props.value, style = props.style, size = props.size, disabled = props.disabled, step = props.step, max = props.max, min = props.min, strictly = props.strictly, precision = props.precision, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, otherProps = __rest(props, ["value", "style", "size", "disabled", "step", "max", "min", "strictly", "precision", "onMouseEnter", "onMouseLeave"]);
return (omi_1.h("div", __assign({}, omi_1.extractClass(props, 'o-input-number', (_a = {
'is-disabled': this.props.disabled
},
_a['o-input-number-' + props.size] = props.size,
_a)), { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }),
omi_1.h("button", __assign({}, omi_1.extractClass(props, 'o-button', (_b = {},
omi_1.h("button", __assign({}, omi_1.extractClass(props, 'o-button', 'o-button-sub', (_b = {
'is-disabled': this.props.disabled
},
_b['o-button-' + props.size] = props.size,
_b['o-button-' + props.left] = props.left,
_b['o-button-sub-' + props.style] = props.style,
_b['o-button-sub-disabled'] = parseFloat(this.props.value) - this.props.step < this.props.min,
_b)), { onClick: this.subtraction }), "-"),
omi_1.h("input", __assign({}, omi_1.extractClass(props, 'o-input', (_c = {},
_c['o-input-' + props.size] = props.size,
_c)), { value: props.value, size: props.size, onInput: this.handleInput, onClick: this.clearInput })),
omi_1.h("button", __assign({}, omi_1.extractClass(props, 'o-button', (_d = {},
_c['o-input-' + props.style] = props.style,
_c)), { value: Number.parseFloat(props.value).toFixed(this.props.precision), size: props.size, onInput: this.handleInput, onChange: this.handleChange })),
omi_1.h("button", __assign({}, omi_1.extractClass(props, 'o-button', 'o-button-add', (_d = {
'is-disabled': this.props.disabled
},
_d['o-button-' + props.size] = props.size,
_d['o-button-' + props.right] = props.right,
_d['o-button-add-' + props.style] = props.style,
_d['o-button-add-disabled'] = parseFloat(this.props.value) + this.props.step > this.props.max,
_d)), { onClick: this.add }), "+")));
};
InputNumber.css = css.default;
InputNumber.css = css;
InputNumber.defaultProps = {
value: 1,
value: '1',
size: 'medium',
right: 'right',
left: 'left',
style: 'justify',
step: 1,
strictly: false,
disabled: false,
max: 10,
min: 1
max: Number.MAX_VALUE,
min: 1,
precision: 0
};
InputNumber.propTypes = {
value: Number,
value: String,
size: String,
right: String,
left: String,
style: String,
step: Number,
strictly: Boolean,
disabled: Boolean,
max: Number,
min: Number
min: Number,
precision: Number
};
InputNumber = __decorate([
omi_1.tag('o-input-number')
@ -139,3 +412,21 @@ var InputNumber = /** @class */ (function (_super) {
return InputNumber;
}(omi_1.WeElement));
exports.default = InputNumber;
/***/ }),
/***/ "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

1
components/input-number/src/index.js.map Normal file
View File

File diff suppressed because one or more lines are too long

204
components/input-number/src/index.scss
View File

@ -1,35 +1,27 @@
@import "@omiu/common/theme.scss";
.o-input-number{
position: relative;
display: inline-block;
height: auto;
width: auto;
}
.o-input-number-medium{
height: 40px;
width: 172px;
}
.o-input-number-small{
height: 34px;
width: 146px;
}
.o-input-number-mini{
height: 30px;
width: 130px;
}
// 禁用状态
.o-input-number.is-disabled .o-input,
.o-input-number.is-disabled:hover .o-input
{
background-color: #F5F7FA;
border-color: #E4E7ED;
color: #C0C4CC;
cursor: not-allowed;
pointer-events: none;
}
.o-input-number.is-disabled .o-button,
.o-input-number.is-disabled:hover .o-button{
background-color: #F5F7FA;
border-color: #E4E7ED;
color: #C0C4CC;
cursor: not-allowed;
pointer-events: none;
}
.o-input-number.is-disabled{
cursor: not-allowed;
}
.o-button ,.o-input{
// display: inline-block;
float: left;
.o-button,
.o-input{
position: absolute;
height: 100%;
line-height: 100%;
white-space: nowrap;
cursor: pointer;
background: #fff;
@ -40,46 +32,45 @@
box-sizing: border-box;
outline: none;
margin: 0;
transition: .1s;
font-weight: 500;
transition: .1s;
vertical-align: top;
}
.o-button{
width: 25%;
line-height: 15%;
background-color:#f3faf1;
}
.o-button-medium {
padding: 10px 12px;
padding-top: 0.01em;
font-size: 22px;
height: 38px;
line-height: 38px;
width: 42px;
.o-input{
left: 25%;
width: 50%;
}
.o-button-small {
padding: 9px 10px;
padding-top: 0.01em;
font-size: 20px;
height: 32px;
line-height: 32px;
width: 35px;
}
.o-button-mini {
padding: 7px 8px;
padding-top: 0.01em;
font-size: 17px;
height: 28px;
line-height: 28px;
width:30px;
.o-button-add{
right: 0;
border-bottom-right-radius: 0.3em;
border-top-right-radius: 0.3em;
border-left: none;
}
.o-button-right{
border-bottom-right-radius: 8px;
border-top-right-radius: 8px;
border-left: 0;
.o-button-sub{
left: 0;
border-bottom-left-radius: 0.3em;
border-top-left-radius: 0.3em;
border-right: none;
}
.o-button-left{
border-bottom-left-radius: 8px;
border-top-left-radius: 8px;
border-right: 0;
// is-disabled:ture
.o-input-number.is-disabled .o-input,
.o-input-number.is-disabled:hover .o-input,
.o-input-number.is-disabled .o-button,
.o-input-number.is-disabled:hover .o-button
{
background-color: #F5F7FA;
border-color: #E4E7ED;
color: #E4E7ED;
pointer-events: none;
}
.o-input-number.is-disabled{
cursor: not-allowed;
}
.o-input-number:hover .o-input{
color: $o-primary;
@ -97,24 +88,89 @@
border-color: $o-primary;
border-color: var(--o-primary, $o-primary);
}
.o-input-medium {
padding: 10px 12px;
.o-input-medium,
.o-button-medium
{
font-size: 20px;
}
.o-input-small,
.o-button-small{
font-size: 18px;
height: 38px;
line-height: 38px;
width: 86px;
}
.o-input-small {
padding: 9px 10px;
.o-input-mini,
.o-button-mini{
font-size: 16px;
height: 32px;
line-height: 32px;
width: 73px;
}
.o-input-mini {
padding: 7px 8px;
font-size: 14px;
height: 28px;
line-height: 28px;
width: 64px;
}
// style:right, buttons are on the right
.o-input-right{
left: 0;
width: 75%;
border-radius: 0.3em 0 0 0.3em;
}
.o-button-add-right{
right: 0;
top: 0;
height: 50%;
border-radius: 0 0.3em 0 0;
}
.o-button-sub-right{
margin-left:75%;
bottom: 0;
height: 50%;
border-width: 0 1px 1px 0;
border-right: 1px solid #dcdfe6;
border-radius: 0 0 0.3em 0;
}
.o-input-number:hover .o-input-right{
border-left-color: $o-primary;
border-left-color: var(--o-primary, $o-primary);
}
.o-input-number:hover .o-button-sub-right{
border-right-color: $o-primary;
border-right-color: var(--o-primary, $o-primary);
border-top-color:#dcdfe6 ;
}
.o-input-number:hover .o-button-add-right{
border-bottom-color:#dcdfe6;
}
// style:left, buttons are on the left
.o-input-left{
right: 0;
width: 75%;
border-radius: 0 0.3em 0.3em 0;
}
.o-button-add-left{
left: 0;
top: 0;
height: 50%;
border-left: 1px solid #dcdfe6;
border-radius: 0.3em 0 0 0 ;
border-width: 1px 0 1px 1px;
}
.o-button-sub-left{
margin-right:75%;
bottom: 0;
height: 50%;
border-width: 0 1px 1px 1px;
border-radius: 0 0 0 0.3em;
}
.o-input-number:hover .o-input-left{
border-right-color: $o-primary;
border-right-color: var(--o-primary, $o-primary);
}
.o-input-number:hover .o-button-sub-left{
border-left-color: $o-primary;
border-left-color: var(--o-primary, $o-primary);
border-top-color:#dcdfe6 ;
}
.o-input-number:hover .o-button-sub-disabled,
.o-button-sub-disabled,
.o-input-number:hover .o-button-add-disabled,
.o-button-add-disabled{
color: #E4E7ED;
cursor: not-allowed;
// pointer-events: none;
}

159
components/input-number/src/index.tsx
View File

@ -1,87 +1,134 @@
import { WeElement, render, h, tag, extractClass,extend, get, set,bind,unbind } from 'omi'
import { tag, WeElement, h, extractClass} from 'omi'
import * as css from './index.scss'
interface Props {
value?: number,
value?: string,
size?: 'medium' | 'small' | 'mini',
right?: string,
left?:string,
style?:'justify'| 'right' |'left',
disabled?:boolean,
step?:number,
strictly?:boolean,
max?:number,
min?:number
min?:number,
precision?:number
}
@tag('o-input-number')
export default class InputNumber extends WeElement<Props> {
static css = css.default
static css = css
static defaultProps = {
value: 1,
value: '1',
size:'medium',
right:'right',
left:'left',
style:'justify',
step:1,
strictly:false,
disabled:false,
max:10,
min:1
max:Number.MAX_VALUE,
min:1,
precision:0
}
static propTypes = {
value:Number,
value:String,
size:String,
right:String,
left:String,
style:String,
step:Number,
strictly:Boolean,
disabled:Boolean,
max:Number,
min:Number
min:Number,
precision:Number
}
__$value:number
preValue:number
install() {
this.__$value = this.props.value
this.__$value = Number(this.props.value)
this.preValue=Number(this.props.value)
Object.defineProperty(this, 'value', {
get: this._onGetValue,
set: this._onSetValue
})
}
_onGetValue = () => {
return Number(this.__$value)
return this.props.value
}
valueAdd:number
valueSub:number
inputErro:boolean
_onSetValue = (value) => {
this.__$value = value
this.props.value = value
this.setAttribute('value', value)
// console.log('pre',this.preValue)
// console.log(this.__$value)
if(this.props.strictly==true&&((Math.abs(this.preValue-this.__$value)%this.props.step!=0)))
{// program should correct the number when input is not right under the mode of strict.
this.inputErro=true
this.valueAdd=this.preValue+this.props.step*2
this.valueSub=this.preValue-this.props.step
}
this.__$value = value
this.props.value = value
this.setAttribute('value',value)
//precision
if(this.props.precision!=0 ){
var s=value.toString()
var rs=s.indexOf('.')
if(rs<0){
rs=s.length;
s+='.'
}
while(s.length<=rs+this.props.precision)
{
s+='0'
}
this.setAttribute('value', Number.parseFloat(s).toFixed(this.props.precision))
}
else
{
this.setAttribute('value', Number.parseFloat(value).toFixed(this.props.precision))
}
}
handleInput = (evt) => {
evt.stopPropagation()
if(Number(evt.target.value)>=this.props.min && Number(evt.target.value)<=this.props.max)
{
this._onSetValue(Number(evt.target.value))
this.__$value=evt.target.value
if(parseFloat(evt.target.value)>=this.props.min && parseFloat(evt.target.value)<=this.props.max)
{
this._onSetValue(evt.target.value)
this.fire('input', this.props.value)
}
}
add=(evt)=>{
let value=this._onGetValue()
value+=this.props.step
if(value<=this.props.max)
handleChange = (evt) => {
this.__$value =evt.target.value
this.props.value = evt.target.value
this.fire('change', this.props.value)
}
add=()=>{
let value=Number(this._onGetValue())
this.preValue=value
if(value+this.props.step<=this.props.max)
{
this._onSetValue(value-0)
value+=this.props.step
this._onSetValue(value)
}
if(this.inputErro==true)
{
this._onSetValue(this.valueAdd)
this.inputErro=false
}
}
subtraction=(evt)=>{
let value=this._onGetValue()
value-=this.props.step
if(value>=this.props.min)
subtraction=()=>{
let value=Number(this._onGetValue())
this.preValue=value
if(value-this.props.step>=this.props.min)
{
this._onSetValue(value-0)
value-=this.props.step
this._onSetValue(value)
}
if(this.inputErro==true)
{
this._onSetValue(this.valueSub)
this.inputErro=false
}
}
clearInput = () => {
this.updateProps({
value: ''
})
// this.__$value = ''
}
render(props) {
const { value,left,right,size,disabled, max,min,onMouseEnter, onMouseLeave,...otherProps} = props;
const { value,style,size,disabled,step,max,min,strictly,precision,onMouseEnter, onMouseLeave,...otherProps} = props;
return (
<div
{
@ -94,26 +141,32 @@ export default class InputNumber extends WeElement<Props> {
}
onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
<button
{...extractClass(props, 'o-button', {
['o-button-' + props.size]: props.size,
['o-button-'+ props.left]:props.left })}
onClick={this.subtraction}
{...extractClass(props, 'o-button','o-button-sub',
{
'is-disabled': this.props.disabled,
['o-button-' + props.size]: props.size,
['o-button-sub-'+ props.style]:props.style,
'o-button-sub-disabled':parseFloat(this.props.value)-this.props.step<this.props.min
})}
onClick={this.subtraction}
>-</button>
<input
{...extractClass(props, 'o-input',{
['o-input-' + props.size]: props.size
['o-input-' + props.size]: props.size,
['o-input-' + props.style]: props.style
})}
value={props.value}
value={Number.parseFloat(props.value).toFixed(this.props.precision)}
size={props.size}
onInput={this.handleInput}
onClick={this.clearInput}
onChange={this.handleChange}
></input>
<button
{...extractClass(props, 'o-button',
{
['o-button-' + props.size]: props.size,
['o-button-'+props.right]:props.right
<button
{...extractClass(props, 'o-button', 'o-button-add',
{
'is-disabled': this.props.disabled,
['o-button-'+props.size]: props.size,
['o-button-add-'+ props.style]:props.style,
'o-button-add-disabled':parseFloat(this.props.value)+this.props.step>this.props.max
}
)}
onClick={this.add}>+</button>

2
components/input-number/tsconfig.json
View File

@ -7,6 +7,8 @@
"target": "es5",
"allowJs": true,
"declaration": true
// "outDir": "dist",
// "lib": ["dom", "es6"]
},
"include": [
"src/**/*"

16
components/input-number/vite.config.js
View File

@ -8,14 +8,14 @@ export default {
build: {
rollupOptions: {
input: {
main: resolve(__dirname, "index.html"),
// main: resolve(__dirname, "index.html"),
// admin: resolve(__dirname, "admin.html")
}
}
},
cssPreprocessOptions: {
scss: {
additionalData: '@import "./src/index.scss";'
}
}
}
}
// cssPreprocessOptions: {
// scss: {
// additionalData: '@import "./src/index.scss";'
// }
// }
};

2
components/select/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@omiu/select",
"version": "0.0.9",
"version": "0.0.12",
"description": "Mobile pop-up options list",
"docsExtend": {
"cnName": "下拉菜单",

2
components/select/src/index.css.map
View File

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["index.scss","../node_modules/@omiu/common/theme.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE,OCpCU;EDqCV;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAKF;EACE;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE,cCxLU;EDyLV;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OCpZU;EDqZV;EACA;EACA;EACA;EACA;;;AAGF;EACE,cC7ZU;ED8ZV;;;AAGF;EACE,OClaU;EDmaV;;;AAGF;EACE;EACA,kBCxaU;EDyaV;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE,kBC3gBU;ED4gBV;EACA,cC7gBU;ED8gBV;EACA;;;AAGF;EACE,cCnhBU;EDohBV;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA,OC/mBU;EDgnBV;;;AAGF;EACE,cCpnBU;EDqnBV;;;AAGF;EACE,OCznBU;ED0nBV;;;AAGF;EACE;EACA,kBC/nBU;EDgoBV;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE,OC5wBU;ED6wBV;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE,cCx5BU;EDy5BV;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,cCr8BU;EDs8BV;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE,OC9iCU;ED+iCV;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;AAAA;EAEE;EACA","file":"index.css"}
{"version":3,"sourceRoot":"","sources":["index.scss","../../common/theme.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE,OChCU;EDiCV;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAKF;EACE;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE,cCpLU;EDqLV;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OChZU;EDiZV;EACA;EACA;EACA;EACA;;;AAGF;EACE,cCzZU;ED0ZV;;;AAGF;EACE,OC9ZU;ED+ZV;;;AAGF;EACE;EACA,kBCpaU;EDqaV;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE,kBCvgBU;EDwgBV;EACA,cCzgBU;ED0gBV;EACA;;;AAGF;EACE,cC/gBU;EDghBV;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA,OC3mBU;ED4mBV;;;AAGF;EACE,cChnBU;EDinBV;;;AAGF;EACE,OCrnBU;EDsnBV;;;AAGF;EACE;EACA,kBC3nBU;ED4nBV;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE,OCxwBU;EDywBV;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE,cCp5BU;EDq5BV;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,cCj8BU;EDk8BV;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE,OC1iCU;ED2iCV;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;AAAA;EAEE;EACA","file":"index.css"}

4
components/select/src/index.scss
View File

@ -6,7 +6,7 @@
* modified by dntzhang
*/
@import "../node_modules/@omiu/common/theme.scss";
@import "../../common/theme.scss";
:host {
display: inline-block;
@ -1126,4 +1126,4 @@ ul,
li {
margin: 0;
padding: 0;
}
}

2
components/select/src/index.tsx
View File

@ -82,6 +82,7 @@ export default class Select extends WeElement<Props> {
}
this.fire('item-select', this.selectedItems)
this.update()
this.resetSize()
@ -92,6 +93,7 @@ export default class Select extends WeElement<Props> {
this._refInput.focus()
this.fire('item-select', item)
this.selectedIndex = index
this.label = item.label
this.updateProps({

9
components/slider/demo/js-demo/index.html
View File

@ -20,6 +20,15 @@
<script src="../../src/index.js"></script>
<div style="text-align: center">basic slider</div>
<o-slider min="0" max="10" value="2" id="single-range-demo"></o-slider>
<div style="text-align: center">reversed slider</div>
<o-slider
min="0"
max="10"
value="5"
reversed
id="single-reversed-range-demo"
></o-slider>
<div style="text-align: center">single slider with tool-tip</div>
<o-slider
min="0"

2
components/slider/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@omiu/slider",
"version": "0.0.7",
"version": "0.0.8",
"description": "Slider",
"main": "src/index.js",
"module": "src/index.esm.js",

2795
components/slider/src/index.js
View File

File diff suppressed because it is too large Load Diff

2
components/slider/src/index.js.map
View File

File diff suppressed because one or more lines are too long

24
components/slider/src/index.tsx
View File

@ -14,12 +14,11 @@ interface Props {
shape: 'square' | 'round'
tooltip?: boolean
disabled?: boolean
reversed?: boolean
}
@tag('o-slider')
export default class OSlider extends WeElement<Props> {
static css = css
static defaultProps = {
//default a single round range slider
min: undefined,
@ -32,6 +31,7 @@ export default class OSlider extends WeElement<Props> {
shape: 'round',
tooltip: false,
disabled: false,
reversed: false,
}
static propTypes = {
@ -45,8 +45,11 @@ export default class OSlider extends WeElement<Props> {
shape: String,
tooltip: Boolean,
disabled: Boolean,
reversed: Boolean,
}
static css = css
__$value1: number
__$value2: number
@ -77,10 +80,10 @@ export default class OSlider extends WeElement<Props> {
installed() {
this.fillColor('#07c160', '#f0f0f0')
this.update()
let host = this.shadowRoot.host as HTMLElement
this.props.orient === 'vertical' &&
(host.style.transform = 'rotate(-90deg)')
this.props.reversed && (host.style.transform = 'rotate(180deg)')
}
_onGetValue = () => {
@ -103,12 +106,20 @@ export default class OSlider extends WeElement<Props> {
this.setAttribute('second_value', value)
}
receiveProps() {
beforeUpdate() {
if (this.__$value1 > this.__$value2 && this.props.range === 'double') {
const temp = this.__$value1
this.__$value1 = this.__$value2
this.__$value2 = temp
}
}
updated() {
this.fillColor(this.lowerColor, this.upperColor)
this.update()
}
handleSliderOne = (evt) => {
evt.stopPropagation()
const first_value = parseInt(this.slider1.value)
if (first_value <= this.__$value2 || this.props.range === 'single') {
// if the slider 1 has not exceeded slider2 or it is a single range slider
@ -125,13 +136,13 @@ export default class OSlider extends WeElement<Props> {
}
handleSliderTwo = (evt) => {
evt.stopPropagation()
const second_value = parseInt(this.slider2.value)
//we only have one case if slider two exists
if (second_value >= this.__$value1) {
this.__$value2 = second_value
}
this.fire('input', [this.__$value1, this.__$value2])
this.fillColor(this.lowerColor, this.upperColor)
this.update()
}
@ -163,7 +174,6 @@ export default class OSlider extends WeElement<Props> {
'is-vertical': props.orient === 'vertical',
'is-round': props.shape === 'round',
'is-disabled': props.disabled,
'is-reversed': props.reversed,
})
return (

18
components/step/test/index.js
View File

@ -1,18 +0,0 @@
import { html, fixture, expect } from '@open-wc/testing'
import '../dist/index.es.js'
describe('o-counter ', () => {
it('default prop', async () => {
const el = await fixture(html` <o-step items="[
{ name: 'Finished', description: 'This is a description.', state: 0 },
{ name: 'In Progress', description: 'This is a description.', state: 2 },
{ name: 'Waiting', description: 'This is a description.', state: 3 }
]" ></o-step>`)
expect(el.shadowRoot.innerHTML).to.equal(`<div class="o-step"><div class="_item _item-finish"><div class="_item-tail"></div><div class="_item-icon"><span class="icon"><i class="anticon anticon-check finish-icon"><o-icon-done></o-icon-done></i></span></div><div class="_item-content"><div class="_item-title">Finished</div><div class="_item-description">This is a description.</div></div></div><div class="_item _item-process"><div class="_item-tail"></div><div class="_item-icon"><span class="icon"><span class="icon">2</span></span></div><div class="_item-content"><div class="_item-title">In Progress</div><div class="_item-description">This is a description.</div></div></div><div class="_item _item-wait"><div class="_item-tail"></div><div class="_item-icon"><span class="icon"><span class="icon">3</span></span></div><div class="_item-content"><div class="_item-title">Waiting</div><div class="_item-description">This is a description.</div></div></div></div>`)
})
})

0
components/step/.gitignore → components/steps/.gitignore vendored
View File

4
components/step/README.md → components/steps/README.md
View File

@ -1,6 +1,6 @@
## Step
## Steps
> Step
> Steps
## Install

0
components/step/demo.html → components/steps/demo.html
View File

32
components/step/index.html → components/steps/index.html
View File

@ -3,45 +3,45 @@
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta charset="UTF-8" >
<title>Omiu</title>
<script type="module" src="/src/index.tsx"></script>
<meta charset="UTF-8">
<title>Omiu</title>
<script type="module" src="/src/index.tsx"></script>
</head>
<body>
<h1>HTML Mode <a href="./demo.html">JSX Mode</a></h1>
<h1>HTML Mode <a href="./demo.html">JSX Mode</a></h1>
<div>
<o-step items="[
<o-steps items="[
{ name: 'Finished', description: 'This is a description.', state: 0 },
{ name: 'In Progress', description: 'This is a description.', state: 2 },
{ name: 'Waiting', description: 'This is a description.', state: 3 }
]" ></o-step>
<o-step items="[
]"></o-steps>
<o-steps items="[
{ name: 'Finished', description: 'This is a description.', state: 0 },
{ name: 'Error', description: 'This is a description.', state: 1 },
{ name: 'Waiting', description: 'This is a description.', state: 3 }
]" ></o-step>
<o-step items="[
]"></o-steps>
<o-steps items="[
{ name: 'Finished', description: 'This is a description.', state: 0 },
{ name: 'Finished', description: 'This is a description.', state: 0 },
{ name: 'Finished', description: 'This is a description.', state: 0 }
]" ></o-step>
]"></o-steps>
<o-step items="[
<o-steps items="[
{ name: 'Finished', description: 'This is a description.', state: 0 },
{ name: 'In Progress', description: 'This is a description.', state: 2 },
{ name: 'Waiting', description: 'This is a description.', state: 3 }
]" vertical ></o-step>
<o-step items="[
]" vertical></o-steps>
<o-steps items="[
{ name: 'Finished', description: 'This is a description.', state: 0 },
{ name: 'Error', description: 'This is a description.', state: 1 },
{ name: 'Waiting', description: 'This is a description.', state: 3 }
]" vertical ></o-step>
<o-step items="[
]" vertical></o-steps>
<o-steps items="[
{ name: 'Finished', description: 'This is a description.', state: 0 },
{ name: 'Finished', description: 'This is a description.', state: 0 },
{ name: 'Finished', description: 'This is a description.', state: 0 }
]" vertical ></o-step>
]" vertical></o-steps>
</div>
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>

2
components/step/package.json → components/steps/package.json
View File

@ -1,5 +1,5 @@
{
"name": "@omiu/step",
"name": "@omiu/steps",
"version": "0.0.3",
"main": "dist/index.es.js",
"exports": {

12
components/step/src/demo.tsx → components/steps/src/demo.tsx
View File

@ -32,13 +32,13 @@ define('my-app', class extends WeElement {
render() {
return (
<div>
<o-step items={this.itemsA} />
<o-step items={this.itemsB} />
<o-step items={this.itemsC} />
<o-steps items={this.itemsA} />
<o-steps items={this.itemsB} />
<o-steps items={this.itemsC} />
<o-step items={this.itemsA} vertical />
<o-step items={this.itemsB} vertical />
<o-step items={this.itemsC} vertical />
<o-steps items={this.itemsA} vertical />
<o-steps items={this.itemsB} vertical />
<o-steps items={this.itemsC} vertical />
</div>

0
components/step/src/global.d.ts → components/steps/src/global.d.ts vendored
View File

4
components/step/src/index.css → components/steps/src/index.css
View File

@ -2,13 +2,13 @@
display: block;
}
.o-step {
.o-steps {
width: 100%;
display: flex;
white-space: nowrap;
}
.o-step.vertical {
.o-steps.vertical {
flex-direction: column;
}

0
components/step/src/index.css.map → components/steps/src/index.css.map
View File

4
components/step/src/index.scss → components/steps/src/index.scss
View File

@ -5,13 +5,13 @@
display: block;
}
.o-step {
.o-steps {
width: 100%;
display: flex;
white-space: nowrap;
}
.o-step.vertical{
.o-steps.vertical{
flex-direction: column;
}

6
components/step/src/index.tsx → components/steps/src/index.tsx
View File

@ -12,8 +12,8 @@ const state = {
}
@tag('o-step')
export default class Step extends WeElement {
@tag('o-steps')
export default class Steps extends WeElement {
static css = css.default
static propTypes = {
@ -23,7 +23,7 @@ export default class Step extends WeElement {
render(props) {
return (
<div {...extractClass(props, 'o-step', {
<div {...extractClass(props, 'o-steps', {
'vertical': props.vertical
})}>
{props.items.map((item, index) => {

18
components/steps/test/index.js Normal file
View File

@ -0,0 +1,18 @@
import { html, fixture, expect } from '@open-wc/testing'
import '../dist/index.es.js'
describe('o-counter ', () => {
it('default prop', async () => {
const el = await fixture(html` <o-steps items="[
{ name: 'Finished', description: 'This is a description.', state: 0 },
{ name: 'In Progress', description: 'This is a description.', state: 2 },
{ name: 'Waiting', description: 'This is a description.', state: 3 }
]" ></o-steps>`)
expect(el.shadowRoot.innerHTML).to.equal(`<div class="o-steps"><div class="_item _item-finish"><div class="_item-tail"></div><div class="_item-icon"><span class="icon"><i class="anticon anticon-check finish-icon"><o-icon-done></o-icon-done></i></span></div><div class="_item-content"><div class="_item-title">Finished</div><div class="_item-description">This is a description.</div></div></div><div class="_item _item-process"><div class="_item-tail"></div><div class="_item-icon"><span class="icon"><span class="icon">2</span></span></div><div class="_item-content"><div class="_item-title">In Progress</div><div class="_item-description">This is a description.</div></div></div><div class="_item _item-wait"><div class="_item-tail"></div><div class="_item-icon"><span class="icon"><span class="icon">3</span></span></div><div class="_item-content"><div class="_item-title">Waiting</div><div class="_item-description">This is a description.</div></div></div></div>`)
})
})

0
components/step/tsconfig.json → components/steps/tsconfig.json
View File

0
components/step/vite.config.ts → components/steps/vite.config.ts
View File

6
components/tabs/.gitignore vendored Normal file
View File

@ -0,0 +1,6 @@
.DS_Store
dist
node_modules
*.local
*.lock
*.log

14
components/tabs/demo.html Normal file
View File

@ -0,0 +1,14 @@
<!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>

71
components/tabs/demos/js-demo/index.html
View File

@ -1,71 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta charset="UTF-8" />
<title>Omiu Tabs</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>
<o-tabs list="[{label:'用户管理'},{label:'系统设置'},{label:'权限管理中心'}]" active-index="0">
</o-tabs>
<o-tabs type="card" list="[{label:'用户管理'},{label:'系统设置'},{label:'权限管理中心'}]" active-index="0">
</o-tabs>
<o-tabs addable list="[{label:'用户管理'},{label:'系统设置'},{label:'权限管理中心'}]" active-index="0">
</o-tabs>
<o-tabs addable type="card" list="[{label:'用户管理'},{label:'系统设置'},{label:'权限管理中心'}]" active-index="0">
</o-tabs>
<o-tabs type="border-card" list="[{label:'用户管理'},{label:'系统设置'},{label:'权限管理中心'}]" active-index="0">
</o-tabs>
<br>
<o-tabs position="right" list="[{label:'用户管理'},{label:'系统设置'},{label:'权限管理中心'}]" active-index="0">
</o-tabs>
<br>
<o-tabs position="left" list="[{label:'用户管理'},{label:'系统设置'},{label:'权限管理中心'}]" active-index="0">
</o-tabs>
<br>
<o-tabs type="border-card" position="bottom" list="[{label:'用户管理'},{label:'系统设置'},{label:'权限管理中心'}]" active-index="0">
</o-tabs>
<br>
<o-tabs
list="[{label:'用户管理', icon:'accessible-rounded'},{label:'系统设置', icon:'ac-unit-outlined'},{label:'权限管理中心', icon:'accessible-rounded'}]"
active-index="0">
</o-tabs>
<br>
<o-tabs closable
list="[{label:'用户管理', icon:'accessible-rounded'},{label:'系统设置', icon:'ac-unit-outlined'},{label:'权限管理中心', icon:'accessible-rounded'}]"
active-index="0">
</o-tabs>
<br>
<o-tabs closable list="[{label:'用户管理'},{label:'系统设置'},{label:'权限管理中心'}]" active-index="0">
</o-tabs>
<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>
</body>
</html>

69
components/tabs/index.html Normal file
View File

@ -0,0 +1,69 @@
<!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>
<o-tabs list="[{label:'用户管理'},{label:'系统设置'},{label:'权限管理中心'}]" active-index="0">
</o-tabs>
<o-tabs type="card" list="[{label:'用户管理'},{label:'系统设置'},{label:'权限管理中心'}]" active-index="0">
</o-tabs>
<o-tabs addable list="[{label:'用户管理'},{label:'系统设置'},{label:'权限管理中心'}]" active-index="0">
</o-tabs>
<o-tabs addable type="card" list="[{label:'用户管理'},{label:'系统设置'},{label:'权限管理中心'}]" active-index="0">
</o-tabs>
<o-tabs type="border-card" list="[{label:'用户管理'},{label:'系统设置'},{label:'权限管理中心'}]" active-index="0">
</o-tabs>
<br>
<o-tabs position="right" list="[{label:'用户管理'},{label:'系统设置'},{label:'权限管理中心'}]" active-index="0">
</o-tabs>
<br>
<o-tabs position="left" list="[{label:'用户管理'},{label:'系统设置'},{label:'权限管理中心'}]" active-index="0">
</o-tabs>
<br>
<o-tabs type="border-card" position="bottom" list="[{label:'用户管理'},{label:'系统设置'},{label:'权限管理中心'}]" active-index="0">
</o-tabs>
<br>
<o-tabs
list="[{label:'用户管理', icon:'accessible-rounded'},{label:'系统设置', icon:'ac-unit-outlined'},{label:'权限管理中心', icon:'accessible-rounded'}]"
active-index="0">
</o-tabs>
<br>
<o-tabs closable
list="[{label:'用户管理', icon:'accessible-rounded'},{label:'系统设置', icon:'ac-unit-outlined'},{label:'权限管理中心', icon:'accessible-rounded'}]"
active-index="0">
</o-tabs>
<br>
<o-tabs closable list="[{label:'用户管理'},{label:'系统设置'},{label:'权限管理中心'}]" active-index="0">
</o-tabs>
<!--
<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> -->
</body>
</html>

121
components/tabs/package.json
View File

@ -1,100 +1,41 @@
{
"name": "@omiu/tabs",
"version": "0.0.19",
"description": "Omi UI Components.",
"main": "src/index.js",
"module": "src/index.esm.js",
"types": "src/index.d.ts",
"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 && node ./scripts/rollup.end.js"
"version": "0.0.22",
"main": "dist/index.es.js",
"exports": {
".": "./dist/index.es.js"
},
"typings": "./dist/index.d.ts",
"repository": {
"type": "git",
"url": "https://github.com/Tencent/omi.git"
"types": "types/index.d.ts",
"scripts": {
"start": "yarn watch & vite",
"dev": "yarn start",
"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"
},
"files": [
"src",
"dist",
"typings.json"
"types"
],
"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"
]
},
"bundlesize": [
{
"path": "./dist/omim.min.js",
"threshold": "4Kb"
}
],
"prettier": {
"singleQuote": true,
"semi": false,
"tabWidth": 2,
"useTabs": false
},
"dependencies": {
"@omiu/common": "latest",
"omi": "latest"
}
}
},
"devDependencies": {
"@open-wc/testing": "^2.5.33",
"@types/node": "^16.4.13",
"@web/test-runner": "^0.13.15",
"sass": "^1.37.5",
"typescript": "^4.3.5",
"vite": "^2.4.4"
},
"license": "MIT",
"keywords": [
"omi",
"omiu",
"form"
]
}

39
components/tabs/src/demo.tsx Normal file
View File

@ -0,0 +1,39 @@
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> {
count = 2
onChanged = (evt: CustomEvent) => {
//同步内部状态到外部，这样防止父刷新覆盖子的 count
this.count = evt.detail
}
render(props: Props) {
return (
<div>
<o-counter
count={this.count}
onCountChanged={this.onChanged}
></o-counter>
<button
onclick={() => {
this.update()
}}
>
parent.update()
</button>
</div>
)
}
}
render(<my-demo></my-demo>, 'body', {
ignoreAttrs: true
})

12
components/tabs/src/global.d.ts vendored Executable file
View File

@ -0,0 +1,12 @@
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'

399
components/tabs/src/index.css
View File

@ -6,11 +6,13 @@
* modified by dntzhang
*/
:host {
display: block; }
display: block;
}
.o-tabs__header {
padding: 0;
position: relative; }
position: relative;
}
.o-tabs__active-bar {
position: absolute;
@ -24,7 +26,8 @@
transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
list-style: none; }
list-style: none;
}
.o-tabs__new-tab {
float: right;
@ -38,21 +41,25 @@
font-size: 12px;
color: #d3dce6;
cursor: pointer;
-webkit-transition: all .15s;
transition: all .15s; }
-webkit-transition: all 0.15s;
transition: all 0.15s;
}
.o-tabs__new-tab .o-icon-plus {
-webkit-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8); }
transform: scale(0.8, 0.8);
}
.o-tabs__new-tab:hover {
color: #07c160;
color: var(--o-primary, #07c160); }
color: var(--o-primary, #07c160);
}
.o-tabs__nav-wrap {
overflow: hidden;
margin-bottom: -1px;
position: relative; }
position: relative;
}
.o-tabs__nav-wrap::after {
content: "";
@ -62,19 +69,23 @@
width: 100%;
height: 2px;
background-color: #E4E7ED;
z-index: 1; }
z-index: 1;
}
.o-tabs--border-card > .o-tabs__header .o-tabs__nav-wrap::after,
.o-tabs--card > .o-tabs__header .o-tabs__nav-wrap::after {
content: none; }
content: none;
}
.o-tabs__nav-wrap.is-scrollable {
padding: 0 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
box-sizing: border-box;
}
.o-tabs__nav-scroll {
overflow: auto; }
overflow: auto;
}
.o-tabs__nav-next,
.o-tabs__nav-prev {
@ -82,35 +93,41 @@
cursor: pointer;
line-height: 44px;
font-size: 12px;
color: #909399; }
color: #909399;
}
.o-tabs__nav-next {
right: 0; }
right: 0;
}
.o-tabs__nav-prev {
left: 0; }
left: 0;
}
.o-tabs__nav {
white-space: nowrap;
position: relative;
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
float: left;
z-index: 2; }
z-index: 2;
}
.o-tabs__nav.is-stretch {
min-width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
display: flex;
}
.o-tabs__nav.is-stretch > * {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center; }
text-align: center;
}
.o-tabs__item {
padding: 0 20px;
@ -123,21 +140,25 @@
font-size: 14px;
font-weight: 500;
color: #303133;
position: relative; }
position: relative;
}
.o-tabs__item:focus,
.o-tabs__item:focus:active {
outline: 0; }
outline: 0;
}
.o-tabs__item:focus.is-active.is-focus:not(:active) {
-webkit-box-shadow: 0 0 2px 2px #07c160 inset;
-webkit-box-shadow: 0 0 2px 2px var(--o-primary, #07c160) inset;
box-shadow: 0 0 2px 2px #07c160 inset;
box-shadow: 0 0 2px 2px var(--o-primary, #07c160) inset;
border-radius: 3px; }
border-radius: 3px;
}
.o-tabs__item:hover .o-icon-close {
visibility: visible; }
visibility: visible;
}
.o-tabs__item .o-icon-close {
visibility: hidden;
@ -145,46 +166,56 @@
text-align: center;
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
margin-left: 5px; }
margin-left: 5px;
}
.o-tabs__item .o-icon-close:before {
-webkit-transform: scale(0.9);
transform: scale(0.9);
display: inline-block; }
display: inline-block;
}
.o-tabs__item .o-icon-close:hover {
background-color: #C0C4CC;
color: #FFF; }
color: #FFF;
}
.o-tabs__item.is-active {
color: #07c160;
color: var(--o-primary, #07c160); }
color: var(--o-primary, #07c160);
}
.o-tabs__item:hover {
color: #07c160;
color: var(--o-primary, #07c160);
cursor: pointer; }
cursor: pointer;
}
.o-tabs__item.is-disabled {
color: #C0C4CC;
cursor: default; }
cursor: default;
}
.o-tabs__content {
overflow: hidden;
position: relative; }
position: relative;
}
.o-tabs--card > .o-tabs__header {
border-bottom: 1px solid #E4E7ED; }
border-bottom: 1px solid #E4E7ED;
}
.o-tabs--card > .o-tabs__header .o-tabs__nav {
border: 1px solid #E4E7ED;
border-bottom: none;
border-radius: 4px 4px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
box-sizing: border-box;
}
.o-tabs--card > .o-tabs__header .o-tabs__active-bar {
display: none; }
display: none;
}
.o-tabs--card > .o-tabs__header .o-tabs__item .o-icon-close {
position: relative;
@ -197,87 +228,106 @@
top: -1px;
right: -2px;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%; }
transform-origin: 100% 50%;
}
.o-tabs--card > .o-tabs__header .o-tabs__item.is-active.is-closable .o-icon-close,
.o-tabs--card > .o-tabs__header .o-tabs__item.is-closable:hover .o-icon-close {
width: 14px; }
width: 14px;
}
.o-tabs--card > .o-tabs__header .o-tabs__item {
border-bottom: 1px solid transparent;
border-left: 1px solid #E4E7ED;
-webkit-transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.o-tabs--card > .o-tabs__header .o-tabs__item:first-child {
border-left: none; }
border-left: none;
}
.o-tabs--card > .o-tabs__header .o-tabs__item.is-closable:hover {
padding-left: 13px;
padding-right: 13px; }
padding-right: 13px;
}
.o-tabs--card > .o-tabs__header .o-tabs__item.is-active {
border-bottom-color: #FFF; }
border-bottom-color: #FFF;
}
.o-tabs--card > .o-tabs__header .o-tabs__item.is-active.is-closable {
padding-left: 20px;
padding-right: 20px; }
padding-right: 20px;
}
.o-tabs--border-card {
background: #FFF;
border: 1px solid #DCDFE6;
border-bottom: none; }
border-bottom: none;
}
.o-tabs--border-card.o-tabs--bottom {
border: 1px solid #DCDFE6; }
border: 1px solid #DCDFE6;
}
.o-tabs--border-card > .o-tabs__content {
padding: 15px; }
padding: 15px;
}
.o-tabs--border-card > .o-tabs__header {
background-color: #F5F7FA;
border-bottom: 1px solid #E4E7ED;
margin: 0; }
margin: 0;
}
.o-tabs--border-card > .o-tabs__header .o-tabs__item {
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
border: 1px solid transparent;
margin-top: -1px;
color: #909399; }
color: #909399;
}
.o-tabs--border-card > .o-tabs__header .o-tabs__item + .o-tabs__item,
.o-tabs--border-card > .o-tabs__header .o-tabs__item:first-child {
margin-left: -1px; }
margin-left: -1px;
}
.o-tabs--border-card > .o-tabs__header .o-tabs__item.is-active {
color: #07c160;
color: var(--o-primary, #07c160);
background-color: #FFF;
border-right-color: #DCDFE6;
border-left-color: #DCDFE6; }
border-left-color: #DCDFE6;
}
.o-tabs--border-card > .o-tabs__header .o-tabs__item:not(.is-disabled):hover {
color: #07c160;
color: var(--o-primary, #07c160); }
color: var(--o-primary, #07c160);
}
.o-tabs--border-card > .o-tabs__header .o-tabs__item.is-disabled {
color: #C0C4CC; }
color: #C0C4CC;
}
.o-tabs--border-card > .o-tabs__header .is-scrollable .o-tabs__item:first-child {
margin-left: 0; }
margin-left: 0;
}
.o-tabs--bottom .o-tabs__item.is-bottom:nth-child(2),
.o-tabs--bottom .o-tabs__item.is-top:nth-child(2),
.o-tabs--top .o-tabs__item.is-bottom:nth-child(2),
.o-tabs--top .o-tabs__item.is-top:nth-child(2) {
padding-left: 0; }
padding-left: 0;
}
.o-tabs--bottom .o-tabs__item.is-bottom:last-child,
.o-tabs--bottom .o-tabs__item.is-top:last-child,
.o-tabs--top .o-tabs__item.is-bottom:last-child,
.o-tabs--top .o-tabs__item.is-top:last-child {
padding-right: 0; }
padding-right: 0;
}
.o-tabs--bottom .o-tabs--left > .o-tabs__header .o-tabs__item:nth-child(2),
.o-tabs--bottom .o-tabs--right > .o-tabs__header .o-tabs__item:nth-child(2),
@ -287,7 +337,8 @@
.o-tabs--top .o-tabs--right > .o-tabs__header .o-tabs__item:nth-child(2),
.o-tabs--top.o-tabs--border-card > .o-tabs__header .o-tabs__item:nth-child(2),
.o-tabs--top.o-tabs--card > .o-tabs__header .o-tabs__item:nth-child(2) {
padding-left: 20px; }
padding-left: 20px;
}
.o-tabs--bottom .o-tabs--left > .o-tabs__header .o-tabs__item:last-child,
.o-tabs--bottom .o-tabs--right > .o-tabs__header .o-tabs__item:last-child,
@ -297,28 +348,35 @@
.o-tabs--top .o-tabs--right > .o-tabs__header .o-tabs__item:last-child,
.o-tabs--top.o-tabs--border-card > .o-tabs__header .o-tabs__item:last-child,
.o-tabs--top.o-tabs--card > .o-tabs__header .o-tabs__item:last-child {
padding-right: 20px; }
padding-right: 20px;
}
.o-tabs--bottom.o-tabs--border-card {
border-top: none; }
border-top: none;
}
.o-tabs--bottom.o-tabs--border-card .o-tabs__header.is-bottom {
border-bottom: 0;
border-top: 1px solid #DCDFE6; }
border-top: 1px solid #DCDFE6;
}
.o-tabs--bottom.o-tabs--border-card .o-tabs__nav-wrap.is-bottom {
margin-top: -1px;
margin-bottom: 0; }
margin-bottom: 0;
}
.o-tabs--bottom.o-tabs--border-card .o-tabs__item.is-bottom:not(.is-active) {
border: 1px solid transparent; }
border: 1px solid transparent;
}
.o-tabs--bottom.o-tabs--border-card .o-tabs__item.is-bottom {
margin: 0 -1px -1px; }
margin: 0 -1px -1px;
}
.o-tabs--left,
.o-tabs--right {
overflow: hidden; }
overflow: hidden;
}
.o-tabs--left .o-tabs__header.is-left,
.o-tabs--left .o-tabs__header.is-right,
@ -330,7 +388,8 @@
.o-tabs--right .o-tabs__nav-scroll,
.o-tabs--right .o-tabs__nav-wrap.is-left,
.o-tabs--right .o-tabs__nav-wrap.is-right {
height: 100%; }
height: 100%;
}
.o-tabs--left .o-tabs__active-bar.is-left,
.o-tabs--left .o-tabs__active-bar.is-right,
@ -339,13 +398,15 @@
top: 0;
bottom: auto;
width: 2px;
height: auto; }
height: auto;
}
.o-tabs--left .o-tabs__nav-wrap.is-left,
.o-tabs--left .o-tabs__nav-wrap.is-right,
.o-tabs--right .o-tabs__nav-wrap.is-left,
.o-tabs--right .o-tabs__nav-wrap.is-right {
margin-bottom: 0; }
margin-bottom: 0;
}
.o-tabs--left .o-tabs__nav-wrap.is-left > .o-tabs__nav-next,
.o-tabs--left .o-tabs__nav-wrap.is-left > .o-tabs__nav-prev,
@ -359,7 +420,8 @@
line-height: 30px;
width: 100%;
text-align: center;
cursor: pointer; }
cursor: pointer;
}
.o-tabs--left .o-tabs__nav-wrap.is-left > .o-tabs__nav-next i,
.o-tabs--left .o-tabs__nav-wrap.is-left > .o-tabs__nav-prev i,
@ -370,32 +432,37 @@
.o-tabs--right .o-tabs__nav-wrap.is-right > .o-tabs__nav-next i,
.o-tabs--right .o-tabs__nav-wrap.is-right > .o-tabs__nav-prev i {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg); }
transform: rotateZ(90deg);
}
.o-tabs--left .o-tabs__nav-wrap.is-left > .o-tabs__nav-prev,
.o-tabs--left .o-tabs__nav-wrap.is-right > .o-tabs__nav-prev,
.o-tabs--right .o-tabs__nav-wrap.is-left > .o-tabs__nav-prev,
.o-tabs--right .o-tabs__nav-wrap.is-right > .o-tabs__nav-prev {
left: auto;
top: 0; }
top: 0;
}
.o-tabs--left .o-tabs__nav-wrap.is-left > .o-tabs__nav-next,
.o-tabs--left .o-tabs__nav-wrap.is-right > .o-tabs__nav-next,
.o-tabs--right .o-tabs__nav-wrap.is-left > .o-tabs__nav-next,
.o-tabs--right .o-tabs__nav-wrap.is-right > .o-tabs__nav-next {
right: auto;
bottom: 0; }
bottom: 0;
}
.o-tabs--left .o-tabs__active-bar.is-left,
.o-tabs--left .o-tabs__nav-wrap.is-left::after {
right: 0;
left: auto; }
left: auto;
}
.o-tabs--left .o-tabs__nav-wrap.is-left.is-scrollable,
.o-tabs--left .o-tabs__nav-wrap.is-right.is-scrollable,
.o-tabs--right .o-tabs__nav-wrap.is-left.is-scrollable,
.o-tabs--right .o-tabs__nav-wrap.is-right.is-scrollable {
padding: 30px 0; }
padding: 30px 0;
}
.o-tabs--left .o-tabs__nav-wrap.is-left::after,
.o-tabs--left .o-tabs__nav-wrap.is-right::after,
@ -404,151 +471,186 @@
height: 100%;
width: 2px;
bottom: auto;
top: 0; }
top: 0;
}
.o-tabs--left .o-tabs__nav.is-left,
.o-tabs--left .o-tabs__nav.is-right,
.o-tabs--right .o-tabs__nav.is-left,
.o-tabs--right .o-tabs__nav.is-right {
float: none; }
float: none;
}
.o-tabs--left .o-tabs__item.is-left,
.o-tabs--left .o-tabs__item.is-right,
.o-tabs--right .o-tabs__item.is-left,
.o-tabs--right .o-tabs__item.is-right {
display: block; }
display: block;
}
.o-tabs--left.o-tabs--card .o-tabs__active-bar.is-left,
.o-tabs--right.o-tabs--card .o-tabs__active-bar.is-right {
display: none; }
display: none;
}
.o-tabs--left .o-tabs__header.is-left {
float: left;
margin-bottom: 0;
margin-right: 10px; }
margin-right: 10px;
}
.o-tabs--left .o-tabs__nav-wrap.is-left {
margin-right: -1px; }
margin-right: -1px;
}
.o-tabs--left .o-tabs__item.is-left {
text-align: right; }
text-align: right;
}
.o-tabs--left.o-tabs--card .o-tabs__item.is-left {
border-left: none;
border-right: 1px solid #E4E7ED;
border-bottom: none;
border-top: 1px solid #E4E7ED;
text-align: left; }
text-align: left;
}
.o-tabs--left.o-tabs--card .o-tabs__item.is-left:first-child {
border-right: 1px solid #E4E7ED;
border-top: none; }
border-top: none;
}
.o-tabs--left.o-tabs--card .o-tabs__item.is-left.is-active {
border: 1px solid #E4E7ED;
border-right-color: #fff;
border-left: none;
border-bottom: none; }
border-bottom: none;
}
.o-tabs--left.o-tabs--card .o-tabs__item.is-left.is-active:first-child {
border-top: none; }
border-top: none;
}
.o-tabs--left.o-tabs--card .o-tabs__item.is-left.is-active:last-child {
border-bottom: none; }
border-bottom: none;
}
.o-tabs--left.o-tabs--card .o-tabs__nav {
border-radius: 4px 0 0 4px;
border-bottom: 1px solid #E4E7ED;
border-right: none; }
border-right: none;
}
.o-tabs--left.o-tabs--card .o-tabs__new-tab {
float: none; }
float: none;
}
.o-tabs--left.o-tabs--border-card .o-tabs__header.is-left {
border-right: 1px solid #dfe4ed; }
border-right: 1px solid #dfe4ed;
}
.o-tabs--left.o-tabs--border-card .o-tabs__item.is-left {
border: 1px solid transparent;
margin: -1px 0 -1px -1px; }
margin: -1px 0 -1px -1px;
}
.o-tabs--left.o-tabs--border-card .o-tabs__item.is-left.is-active {
border-color: #d1dbe5 transparent; }
border-color: #d1dbe5 transparent;
}
.o-tabs--right .o-tabs__header.is-right {
float: right;
margin-bottom: 0;
margin-left: 10px; }
margin-left: 10px;
}
.o-tabs--right .o-tabs__nav-wrap.is-right {
margin-left: -1px; }
margin-left: -1px;
}
.o-tabs--right .o-tabs__nav-wrap.is-right::after {
left: 0;
right: auto; }
right: auto;
}
.o-tabs--right .o-tabs__active-bar.is-right {
left: 0; }
left: 0;
}
.o-tabs--right.o-tabs--card .o-tabs__item.is-right {
border-bottom: none;
border-top: 1px solid #E4E7ED; }
border-top: 1px solid #E4E7ED;
}
.o-tabs--right.o-tabs--card .o-tabs__item.is-right:first-child {
border-left: 1px solid #E4E7ED;
border-top: none; }
border-top: none;
}
.o-tabs--right.o-tabs--card .o-tabs__item.is-right.is-active {
border: 1px solid #E4E7ED;
border-left-color: #fff;
border-right: none;
border-bottom: none; }
border-bottom: none;
}
.o-tabs--right.o-tabs--card .o-tabs__item.is-right.is-active:first-child {
border-top: none; }
border-top: none;
}
.o-tabs--right.o-tabs--card .o-tabs__item.is-right.is-active:last-child {
border-bottom: none; }
border-bottom: none;
}
.o-tabs--right.o-tabs--card .o-tabs__nav {
border-radius: 0 4px 4px 0;
border-bottom: 1px solid #E4E7ED;
border-left: none; }
border-left: none;
}
.o-tabs--right.o-tabs--border-card .o-tabs__header.is-right {
border-left: 1px solid #dfe4ed; }
border-left: 1px solid #dfe4ed;
}
.o-tabs--right.o-tabs--border-card .o-tabs__item.is-right {
border: 1px solid transparent;
margin: -1px -1px -1px 0; }
margin: -1px -1px -1px 0;
}
.o-tabs--right.o-tabs--border-card .o-tabs__item.is-right.is-active {
border-color: #d1dbe5 transparent; }
border-color: #d1dbe5 transparent;
}
.slideInLeft-transition,
.slideInRight-transition {
display: inline-block; }
display: inline-block;
}
.slideInRight-enter {
-webkit-animation: slideInRight-enter .3s;
animation: slideInRight-enter .3s; }
-webkit-animation: slideInRight-enter 0.3s;
animation: slideInRight-enter 0.3s;
}
.slideInRight-leave {
position: absolute;
left: 0;
right: 0;
-webkit-animation: slideInRight-leave .3s;
animation: slideInRight-leave .3s; }
-webkit-animation: slideInRight-leave 0.3s;
animation: slideInRight-leave 0.3s;
}
.slideInLeft-enter {
-webkit-animation: slideInLeft-enter .3s;
animation: slideInLeft-enter .3s; }
-webkit-animation: slideInLeft-enter 0.3s;
animation: slideInLeft-enter 0.3s;
}
.slideInLeft-leave {
position: absolute;
left: 0;
right: 0;
-webkit-animation: slideInLeft-leave .3s;
animation: slideInLeft-leave .3s; }
-webkit-animation: slideInLeft-leave 0.3s;
animation: slideInLeft-leave 0.3s;
}
@-webkit-keyframes slideInRight-enter {
0% {
@ -556,123 +658,144 @@
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(100%);
transform: translateX(100%); }
transform: translateX(100%);
}
to {
opacity: 1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0); } }
transform: translateX(0);
}
}
@keyframes slideInRight-enter {
0% {
opacity: 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(100%);
transform: translateX(100%); }
transform: translateX(100%);
}
to {
opacity: 1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0); } }
transform: translateX(0);
}
}
@-webkit-keyframes slideInRight-leave {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1; }
opacity: 1;
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 0; } }
opacity: 0;
}
}
@keyframes slideInRight-leave {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1; }
opacity: 1;
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 0; } }
opacity: 0;
}
}
@-webkit-keyframes slideInLeft-enter {
0% {
opacity: 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%); }
transform: translateX(-100%);
}
to {
opacity: 1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0); } }
transform: translateX(0);
}
}
@keyframes slideInLeft-enter {
0% {
opacity: 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%); }
transform: translateX(-100%);
}
to {
opacity: 1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0); } }
transform: translateX(0);
}
}
@-webkit-keyframes slideInLeft-leave {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1; }
opacity: 1;
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0; } }
opacity: 0;
}
}
@keyframes slideInLeft-leave {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1; }
opacity: 1;
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0; } }
opacity: 0;
}
}
.o-icon-close {
display: inline-block;
vertical-align: -0.125em; }
vertical-align: -0.125em;
}
.o-icon-add {
position: absolute;
top: 50%;
margin-top: -0.5em;
margin-left: 0.5em;
cursor: pointer; }
cursor: pointer;
}
.o-icon-add:hover {
color: #07c160;
color: var(--o-primary, #07c160); }
color: var(--o-primary, #07c160);
}
/*# sourceMappingURL=index.css.map */

1
components/tabs/src/index.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["index.scss","../../common/theme.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA,kBCpBU;EDqBV;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE,OCpDU;EDqDV;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE,OCtLU;EDuLV;;;AAGF;EACE,OC3LU;ED4LV;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE,OC1SU;ED2SV;EACA;EACA;EACA;;;AAGF;EACE,OClTU;EDmTV;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE;;;AAQF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAUE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;;AAIJ;EACE;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;;AAIJ;EACE;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;;AAIJ;EACE;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;;AAIJ;EACE;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;;AAIJ;EACE;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;;AAIJ;EACE;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;;AAIJ;EACE;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE,OClzBU;EDmzBV","file":"index.css"}

37
components/tabs/src/index.d.ts vendored
View File

@ -1,37 +0,0 @@
import { WeElement } from 'omi';
interface Props {
list?: any[];
activeIndex: number;
type?: 'card' | 'border-card';
position?: 'left' | 'right' | 'top' | 'bottom';
closable?: boolean;
addable?: boolean;
}
export default class Tabs extends WeElement<Props> {
static css: any;
static defaultProps: {
position: string;
closable: boolean;
addable: boolean;
};
static propTypes: {
list: ArrayConstructor;
activeIndex: NumberConstructor;
type: StringConstructor;
position: StringConstructor;
closable: BooleanConstructor;
addable: BooleanConstructor;
};
_x: any;
_width: any;
baseRect: any;
onTabClick: (evt: any, index: any) => void;
setActiveBar(ele: any, index: any): void;
installed(): void;
removeTab(index: any): void;
addTab(tab: any): void;
onAddIconClick(): void;
_tempTagName: string;
render(props: any): JSX.Element;
}
export {};

885
components/tabs/src/index.esm.js
View File

@ -1,885 +0,0 @@
/**
* @omiu/tabs v0.0.19 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, classNames, tag, WeElement } from 'omi';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* 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 = `/**
* omiu tab css based on element ui css
* Licensed under the MIT License
* https://github.com/ElemeFE/element/blob/dev/LICENSE
*
* modified by dntzhang
*/
:host {
display: block; }
.o-tabs__header {
padding: 0;
position: relative; }
.o-tabs__active-bar {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
background-color: #07c160;
background-color: var(--o-primary, #07c160);
z-index: 1;
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
list-style: none; }
.o-tabs__new-tab {
float: right;
border: 1px solid #d3dce6;
height: 18px;
width: 18px;
line-height: 18px;
margin: 12px 0 9px 10px;
border-radius: 3px;
text-align: center;
font-size: 12px;
color: #d3dce6;
cursor: pointer;
-webkit-transition: all .15s;
transition: all .15s; }
.o-tabs__new-tab .o-icon-plus {
-webkit-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8); }
.o-tabs__new-tab:hover {
color: #07c160;
color: var(--o-primary, #07c160); }
.o-tabs__nav-wrap {
overflow: hidden;
margin-bottom: -1px;
position: relative; }
.o-tabs__nav-wrap::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: #E4E7ED;
z-index: 1; }
.o-tabs--border-card > .o-tabs__header .o-tabs__nav-wrap::after,
.o-tabs--card > .o-tabs__header .o-tabs__nav-wrap::after {
content: none; }
.o-tabs__nav-wrap.is-scrollable {
padding: 0 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.o-tabs__nav-scroll {
overflow: auto; }
.o-tabs__nav-next,
.o-tabs__nav-prev {
position: absolute;
cursor: pointer;
line-height: 44px;
font-size: 12px;
color: #909399; }
.o-tabs__nav-next {
right: 0; }
.o-tabs__nav-prev {
left: 0; }
.o-tabs__nav {
white-space: nowrap;
position: relative;
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
float: left;
z-index: 2; }
.o-tabs__nav.is-stretch {
min-width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.o-tabs__nav.is-stretch > * {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center; }
.o-tabs__item {
padding: 0 20px;
height: 40px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 40px;
display: inline-block;
list-style: none;
font-size: 14px;
font-weight: 500;
color: #303133;
position: relative; }
.o-tabs__item:focus,
.o-tabs__item:focus:active {
outline: 0; }
.o-tabs__item:focus.is-active.is-focus:not(:active) {
-webkit-box-shadow: 0 0 2px 2px #07c160 inset;
-webkit-box-shadow: 0 0 2px 2px var(--o-primary, #07c160) inset;
box-shadow: 0 0 2px 2px #07c160 inset;
box-shadow: 0 0 2px 2px var(--o-primary, #07c160) inset;
border-radius: 3px; }
.o-tabs__item:hover .o-icon-close {
visibility: visible; }
.o-tabs__item .o-icon-close {
visibility: hidden;
border-radius: 50%;
text-align: center;
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
margin-left: 5px; }
.o-tabs__item .o-icon-close:before {
-webkit-transform: scale(0.9);
transform: scale(0.9);
display: inline-block; }
.o-tabs__item .o-icon-close:hover {
background-color: #C0C4CC;
color: #FFF; }
.o-tabs__item.is-active {
color: #07c160;
color: var(--o-primary, #07c160); }
.o-tabs__item:hover {
color: #07c160;
color: var(--o-primary, #07c160);
cursor: pointer; }
.o-tabs__item.is-disabled {
color: #C0C4CC;
cursor: default; }
.o-tabs__content {
overflow: hidden;
position: relative; }
.o-tabs--card > .o-tabs__header {
border-bottom: 1px solid #E4E7ED; }
.o-tabs--card > .o-tabs__header .o-tabs__nav {
border: 1px solid #E4E7ED;
border-bottom: none;
border-radius: 4px 4px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.o-tabs--card > .o-tabs__header .o-tabs__active-bar {
display: none; }
.o-tabs--card > .o-tabs__header .o-tabs__item .o-icon-close {
position: relative;
font-size: 12px;
width: 0;
height: 14px;
vertical-align: middle;
line-height: 15px;
overflow: hidden;
top: -1px;
right: -2px;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%; }
.o-tabs--card > .o-tabs__header .o-tabs__item.is-active.is-closable .o-icon-close,
.o-tabs--card > .o-tabs__header .o-tabs__item.is-closable:hover .o-icon-close {
width: 14px; }
.o-tabs--card > .o-tabs__header .o-tabs__item {
border-bottom: 1px solid transparent;
border-left: 1px solid #E4E7ED;
-webkit-transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
.o-tabs--card > .o-tabs__header .o-tabs__item:first-child {
border-left: none; }
.o-tabs--card > .o-tabs__header .o-tabs__item.is-closable:hover {
padding-left: 13px;
padding-right: 13px; }
.o-tabs--card > .o-tabs__header .o-tabs__item.is-active {
border-bottom-color: #FFF; }
.o-tabs--card > .o-tabs__header .o-tabs__item.is-active.is-closable {
padding-left: 20px;
padding-right: 20px; }
.o-tabs--border-card {
background: #FFF;
border: 1px solid #DCDFE6;
border-bottom: none; }
.o-tabs--border-card.o-tabs--bottom {
border: 1px solid #DCDFE6; }
.o-tabs--border-card > .o-tabs__content {
padding: 15px; }
.o-tabs--border-card > .o-tabs__header {
background-color: #F5F7FA;
border-bottom: 1px solid #E4E7ED;
margin: 0; }
.o-tabs--border-card > .o-tabs__header .o-tabs__item {
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
border: 1px solid transparent;
margin-top: -1px;
color: #909399; }
.o-tabs--border-card > .o-tabs__header .o-tabs__item + .o-tabs__item,
.o-tabs--border-card > .o-tabs__header .o-tabs__item:first-child {
margin-left: -1px; }
.o-tabs--border-card > .o-tabs__header .o-tabs__item.is-active {
color: #07c160;
color: var(--o-primary, #07c160);
background-color: #FFF;
border-right-color: #DCDFE6;
border-left-color: #DCDFE6; }
.o-tabs--border-card > .o-tabs__header .o-tabs__item:not(.is-disabled):hover {
color: #07c160;
color: var(--o-primary, #07c160); }
.o-tabs--border-card > .o-tabs__header .o-tabs__item.is-disabled {
color: #C0C4CC; }
.o-tabs--border-card > .o-tabs__header .is-scrollable .o-tabs__item:first-child {
margin-left: 0; }
.o-tabs--bottom .o-tabs__item.is-bottom:nth-child(2),
.o-tabs--bottom .o-tabs__item.is-top:nth-child(2),
.o-tabs--top .o-tabs__item.is-bottom:nth-child(2),
.o-tabs--top .o-tabs__item.is-top:nth-child(2) {
padding-left: 0; }
.o-tabs--bottom .o-tabs__item.is-bottom:last-child,
.o-tabs--bottom .o-tabs__item.is-top:last-child,
.o-tabs--top .o-tabs__item.is-bottom:last-child,
.o-tabs--top .o-tabs__item.is-top:last-child {
padding-right: 0; }
.o-tabs--bottom .o-tabs--left > .o-tabs__header .o-tabs__item:nth-child(2),
.o-tabs--bottom .o-tabs--right > .o-tabs__header .o-tabs__item:nth-child(2),
.o-tabs--bottom.o-tabs--border-card > .o-tabs__header .o-tabs__item:nth-child(2),
.o-tabs--bottom.o-tabs--card > .o-tabs__header .o-tabs__item:nth-child(2),
.o-tabs--top .o-tabs--left > .o-tabs__header .o-tabs__item:nth-child(2),
.o-tabs--top .o-tabs--right > .o-tabs__header .o-tabs__item:nth-child(2),
.o-tabs--top.o-tabs--border-card > .o-tabs__header .o-tabs__item:nth-child(2),
.o-tabs--top.o-tabs--card > .o-tabs__header .o-tabs__item:nth-child(2) {
padding-left: 20px; }
.o-tabs--bottom .o-tabs--left > .o-tabs__header .o-tabs__item:last-child,
.o-tabs--bottom .o-tabs--right > .o-tabs__header .o-tabs__item:last-child,
.o-tabs--bottom.o-tabs--border-card > .o-tabs__header .o-tabs__item:last-child,
.o-tabs--bottom.o-tabs--card > .o-tabs__header .o-tabs__item:last-child,
.o-tabs--top .o-tabs--left > .o-tabs__header .o-tabs__item:last-child,
.o-tabs--top .o-tabs--right > .o-tabs__header .o-tabs__item:last-child,
.o-tabs--top.o-tabs--border-card > .o-tabs__header .o-tabs__item:last-child,
.o-tabs--top.o-tabs--card > .o-tabs__header .o-tabs__item:last-child {
padding-right: 20px; }
.o-tabs--bottom.o-tabs--border-card {
border-top: none; }
.o-tabs--bottom.o-tabs--border-card .o-tabs__header.is-bottom {
border-bottom: 0;
border-top: 1px solid #DCDFE6; }
.o-tabs--bottom.o-tabs--border-card .o-tabs__nav-wrap.is-bottom {
margin-top: -1px;
margin-bottom: 0; }
.o-tabs--bottom.o-tabs--border-card .o-tabs__item.is-bottom:not(.is-active) {
border: 1px solid transparent; }
.o-tabs--bottom.o-tabs--border-card .o-tabs__item.is-bottom {
margin: 0 -1px -1px; }
.o-tabs--left,
.o-tabs--right {
overflow: hidden; }
.o-tabs--left .o-tabs__header.is-left,
.o-tabs--left .o-tabs__header.is-right,
.o-tabs--left .o-tabs__nav-scroll,
.o-tabs--left .o-tabs__nav-wrap.is-left,
.o-tabs--left .o-tabs__nav-wrap.is-right,
.o-tabs--right .o-tabs__header.is-left,
.o-tabs--right .o-tabs__header.is-right,
.o-tabs--right .o-tabs__nav-scroll,
.o-tabs--right .o-tabs__nav-wrap.is-left,
.o-tabs--right .o-tabs__nav-wrap.is-right {
height: 100%; }
.o-tabs--left .o-tabs__active-bar.is-left,
.o-tabs--left .o-tabs__active-bar.is-right,
.o-tabs--right .o-tabs__active-bar.is-left,
.o-tabs--right .o-tabs__active-bar.is-right {
top: 0;
bottom: auto;
width: 2px;
height: auto; }
.o-tabs--left .o-tabs__nav-wrap.is-left,
.o-tabs--left .o-tabs__nav-wrap.is-right,
.o-tabs--right .o-tabs__nav-wrap.is-left,
.o-tabs--right .o-tabs__nav-wrap.is-right {
margin-bottom: 0; }
.o-tabs--left .o-tabs__nav-wrap.is-left > .o-tabs__nav-next,
.o-tabs--left .o-tabs__nav-wrap.is-left > .o-tabs__nav-prev,
.o-tabs--left .o-tabs__nav-wrap.is-right > .o-tabs__nav-next,
.o-tabs--left .o-tabs__nav-wrap.is-right > .o-tabs__nav-prev,
.o-tabs--right .o-tabs__nav-wrap.is-left > .o-tabs__nav-next,
.o-tabs--right .o-tabs__nav-wrap.is-left > .o-tabs__nav-prev,
.o-tabs--right .o-tabs__nav-wrap.is-right > .o-tabs__nav-next,
.o-tabs--right .o-tabs__nav-wrap.is-right > .o-tabs__nav-prev {
height: 30px;
line-height: 30px;
width: 100%;
text-align: center;
cursor: pointer; }
.o-tabs--left .o-tabs__nav-wrap.is-left > .o-tabs__nav-next i,
.o-tabs--left .o-tabs__nav-wrap.is-left > .o-tabs__nav-prev i,
.o-tabs--left .o-tabs__nav-wrap.is-right > .o-tabs__nav-next i,
.o-tabs--left .o-tabs__nav-wrap.is-right > .o-tabs__nav-prev i,
.o-tabs--right .o-tabs__nav-wrap.is-left > .o-tabs__nav-next i,
.o-tabs--right .o-tabs__nav-wrap.is-left > .o-tabs__nav-prev i,
.o-tabs--right .o-tabs__nav-wrap.is-right > .o-tabs__nav-next i,
.o-tabs--right .o-tabs__nav-wrap.is-right > .o-tabs__nav-prev i {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg); }
.o-tabs--left .o-tabs__nav-wrap.is-left > .o-tabs__nav-prev,
.o-tabs--left .o-tabs__nav-wrap.is-right > .o-tabs__nav-prev,
.o-tabs--right .o-tabs__nav-wrap.is-left > .o-tabs__nav-prev,
.o-tabs--right .o-tabs__nav-wrap.is-right > .o-tabs__nav-prev {
left: auto;
top: 0; }
.o-tabs--left .o-tabs__nav-wrap.is-left > .o-tabs__nav-next,
.o-tabs--left .o-tabs__nav-wrap.is-right > .o-tabs__nav-next,
.o-tabs--right .o-tabs__nav-wrap.is-left > .o-tabs__nav-next,
.o-tabs--right .o-tabs__nav-wrap.is-right > .o-tabs__nav-next {
right: auto;
bottom: 0; }
.o-tabs--left .o-tabs__active-bar.is-left,
.o-tabs--left .o-tabs__nav-wrap.is-left::after {
right: 0;
left: auto; }
.o-tabs--left .o-tabs__nav-wrap.is-left.is-scrollable,
.o-tabs--left .o-tabs__nav-wrap.is-right.is-scrollable,
.o-tabs--right .o-tabs__nav-wrap.is-left.is-scrollable,
.o-tabs--right .o-tabs__nav-wrap.is-right.is-scrollable {
padding: 30px 0; }
.o-tabs--left .o-tabs__nav-wrap.is-left::after,
.o-tabs--left .o-tabs__nav-wrap.is-right::after,
.o-tabs--right .o-tabs__nav-wrap.is-left::after,
.o-tabs--right .o-tabs__nav-wrap.is-right::after {
height: 100%;
width: 2px;
bottom: auto;
top: 0; }
.o-tabs--left .o-tabs__nav.is-left,
.o-tabs--left .o-tabs__nav.is-right,
.o-tabs--right .o-tabs__nav.is-left,
.o-tabs--right .o-tabs__nav.is-right {
float: none; }
.o-tabs--left .o-tabs__item.is-left,
.o-tabs--left .o-tabs__item.is-right,
.o-tabs--right .o-tabs__item.is-left,
.o-tabs--right .o-tabs__item.is-right {
display: block; }
.o-tabs--left.o-tabs--card .o-tabs__active-bar.is-left,
.o-tabs--right.o-tabs--card .o-tabs__active-bar.is-right {
display: none; }
.o-tabs--left .o-tabs__header.is-left {
float: left;
margin-bottom: 0;
margin-right: 10px; }
.o-tabs--left .o-tabs__nav-wrap.is-left {
margin-right: -1px; }
.o-tabs--left .o-tabs__item.is-left {
text-align: right; }
.o-tabs--left.o-tabs--card .o-tabs__item.is-left {
border-left: none;
border-right: 1px solid #E4E7ED;
border-bottom: none;
border-top: 1px solid #E4E7ED;
text-align: left; }
.o-tabs--left.o-tabs--card .o-tabs__item.is-left:first-child {
border-right: 1px solid #E4E7ED;
border-top: none; }
.o-tabs--left.o-tabs--card .o-tabs__item.is-left.is-active {
border: 1px solid #E4E7ED;
border-right-color: #fff;
border-left: none;
border-bottom: none; }
.o-tabs--left.o-tabs--card .o-tabs__item.is-left.is-active:first-child {
border-top: none; }
.o-tabs--left.o-tabs--card .o-tabs__item.is-left.is-active:last-child {
border-bottom: none; }
.o-tabs--left.o-tabs--card .o-tabs__nav {
border-radius: 4px 0 0 4px;
border-bottom: 1px solid #E4E7ED;
border-right: none; }
.o-tabs--left.o-tabs--card .o-tabs__new-tab {
float: none; }
.o-tabs--left.o-tabs--border-card .o-tabs__header.is-left {
border-right: 1px solid #dfe4ed; }
.o-tabs--left.o-tabs--border-card .o-tabs__item.is-left {
border: 1px solid transparent;
margin: -1px 0 -1px -1px; }
.o-tabs--left.o-tabs--border-card .o-tabs__item.is-left.is-active {
border-color: #d1dbe5 transparent; }
.o-tabs--right .o-tabs__header.is-right {
float: right;
margin-bottom: 0;
margin-left: 10px; }
.o-tabs--right .o-tabs__nav-wrap.is-right {
margin-left: -1px; }
.o-tabs--right .o-tabs__nav-wrap.is-right::after {
left: 0;
right: auto; }
.o-tabs--right .o-tabs__active-bar.is-right {
left: 0; }
.o-tabs--right.o-tabs--card .o-tabs__item.is-right {
border-bottom: none;
border-top: 1px solid #E4E7ED; }
.o-tabs--right.o-tabs--card .o-tabs__item.is-right:first-child {
border-left: 1px solid #E4E7ED;
border-top: none; }
.o-tabs--right.o-tabs--card .o-tabs__item.is-right.is-active {
border: 1px solid #E4E7ED;
border-left-color: #fff;
border-right: none;
border-bottom: none; }
.o-tabs--right.o-tabs--card .o-tabs__item.is-right.is-active:first-child {
border-top: none; }
.o-tabs--right.o-tabs--card .o-tabs__item.is-right.is-active:last-child {
border-bottom: none; }
.o-tabs--right.o-tabs--card .o-tabs__nav {
border-radius: 0 4px 4px 0;
border-bottom: 1px solid #E4E7ED;
border-left: none; }
.o-tabs--right.o-tabs--border-card .o-tabs__header.is-right {
border-left: 1px solid #dfe4ed; }
.o-tabs--right.o-tabs--border-card .o-tabs__item.is-right {
border: 1px solid transparent;
margin: -1px -1px -1px 0; }
.o-tabs--right.o-tabs--border-card .o-tabs__item.is-right.is-active {
border-color: #d1dbe5 transparent; }
.slideInLeft-transition,
.slideInRight-transition {
display: inline-block; }
.slideInRight-enter {
-webkit-animation: slideInRight-enter .3s;
animation: slideInRight-enter .3s; }
.slideInRight-leave {
position: absolute;
left: 0;
right: 0;
-webkit-animation: slideInRight-leave .3s;
animation: slideInRight-leave .3s; }
.slideInLeft-enter {
-webkit-animation: slideInLeft-enter .3s;
animation: slideInLeft-enter .3s; }
.slideInLeft-leave {
position: absolute;
left: 0;
right: 0;
-webkit-animation: slideInLeft-leave .3s;
animation: slideInLeft-leave .3s; }
@-webkit-keyframes slideInRight-enter {
0% {
opacity: 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(100%);
transform: translateX(100%); }
to {
opacity: 1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0); } }
@keyframes slideInRight-enter {
0% {
opacity: 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(100%);
transform: translateX(100%); }
to {
opacity: 1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0); } }
@-webkit-keyframes slideInRight-leave {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1; }
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 0; } }
@keyframes slideInRight-leave {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1; }
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 0; } }
@-webkit-keyframes slideInLeft-enter {
0% {
opacity: 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%); }
to {
opacity: 1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0); } }
@keyframes slideInLeft-enter {
0% {
opacity: 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%); }
to {
opacity: 1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0); } }
@-webkit-keyframes slideInLeft-leave {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1; }
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0; } }
@keyframes slideInLeft-leave {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1; }
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0; } }
.o-icon-close {
display: inline-block;
vertical-align: -0.125em; }
.o-icon-add {
position: absolute;
top: 50%;
margin-top: -0.5em;
margin-left: 0.5em;
cursor: pointer; }
.o-icon-add:hover {
color: #07c160;
color: var(--o-primary, #07c160); }
`
var readyCallbacks = [];
document.addEventListener('DOMContentLoaded', function () {
domReady.done = true;
readyCallbacks.forEach(function (callback) {
callback();
});
});
function domReady(callback) {
if (domReady.done) {
callback();
return;
}
readyCallbacks.push(callback);
}
domReady.done = false;
var Tabs = /** @class */ (function (_super) {
__extends(Tabs, _super);
function Tabs() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.onTabClick = function (evt, index) {
_this.setActiveBar(evt.currentTarget, index);
_this.fire('change', {
tab: _this.props.list[index],
index: index
});
};
return _this;
}
Tabs.prototype.setActiveBar = function (ele, index) {
if (!ele)
return;
var rect = ele.getBoundingClientRect();
this._x = rect.left - this.baseRect.left;
this._width = rect.width;
if (index === 0) {
this._x = 0;
this._width -= 20;
}
else if (index === this.props.list.length - 1) {
this._x += 20;
this._width -= 20;
}
else {
this._x += 20;
this._width -= 40;
}
this.updateProps({
activeIndex: index
});
};
Tabs.prototype.installed = function () {
var _this = this;
this.baseRect = this.rootNode.getBoundingClientRect();
this.setActiveBar(this['$tab' + this.props.activeIndex], this.props.activeIndex);
domReady(function () {
_this.baseRect = _this.rootNode.getBoundingClientRect();
_this.setActiveBar(_this['$tab' + _this.props.activeIndex], _this.props.activeIndex);
});
};
Tabs.prototype.removeTab = function (index) {
var tab = this.props.list.splice(index, 1)[0];
if (index <= this.props.activeIndex) {
this.props.activeIndex -= 1;
}
if (this.props.activeIndex < 0) {
this.props.activeIndex = 0;
}
this.forceUpdate();
this.setActiveBar(this['$tab' + this.props.activeIndex], this.props.activeIndex);
this.fire('remove', {
tab: tab,
index: index
});
};
Tabs.prototype.addTab = function (tab) {
this.props.list.push(tab);
this.forceUpdate();
};
Tabs.prototype.onAddIconClick = function () {
this.fire('add-icon-click');
};
Tabs.prototype.render = function (props) {
var _a, _b, _c, _d, _e;
var _this = this;
var activeBarStyle = (props.position === 'left' || props.position === 'right') ? {
height: "40px",
transform: "translateY(" + props.activeIndex * 40 + "px)"
} : {
width: this._width + "px",
transform: "translateX(" + this._x + "px)"
};
return (h("div", __assign({}, extractClass(props, 'o-tabs', (_a = {},
_a["o-tabs--" + props.position] = props.position,
_a["o-tabs--" + props.type] = props.type,
_a))),
h("div", { class: classNames('o-tabs__header', (_b = {},
_b["is-" + props.position] = props.position,
_b)) },
h("div", { class: classNames('o-tabs__nav-wrap', (_c = {},
_c["is-" + props.position] = props.position,
_c)) },
h("div", { class: "o-tabs__nav-scroll" },
h("div", { role: "tablist", class: classNames('o-tabs__nav', (_d = {},
_d["is-" + props.position] = props.position,
_d)) },
!props.type && h("div", { class: classNames('o-tabs__active-bar', (_e = {},
_e["is-" + props.position] = props.position,
_e)), style: activeBarStyle }),
props.list.map(function (tab, index) {
var _a;
_this._tempTagName = 'o-icon-' + tab.icon;
return h("div", __assign({ ref: function (e) { _this['$tab' + index] = e; }, role: "tab", onClick: function (evt) { return props.activeIndex !== index && _this.onTabClick(evt, index); }, tabindex: props.activeIndex === index ? '0' : -1 }, extractClass(props, 'o-tabs__item', (_a = {},
_a["is-" + props.position] = props.position,
_a['is-active'] = props.activeIndex === index,
_a['is-closable'] = props.closable && tab.closable !== false,
_a))),
tab.icon && h(_this._tempTagName, null),
tab.label,
props.closable && tab.closable !== false && h("svg", { onClick: function (evt) { evt.stopPropagation(); _this.removeTab(index); }, class: "o-icon-close", style: props.activeIndex === index && "visibility: visible;", fill: "currentColor", width: "1em", height: "1em", focusable: "false", viewBox: "0 0 24 24", "aria-hidden": "true" },
h("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })));
})),
props.addable && h("svg", { class: "o-icon-add", fill: "currentColor", width: "1em", height: "1em", focusable: "false", viewBox: "0 0 24 24", "aria-hidden": "true", onClick: this.onAddIconClick },
h("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" })))))));
};
Tabs.css = css;
Tabs.defaultProps = {
position: 'top',
closable: false,
addable: false
};
Tabs.propTypes = {
list: Array,
activeIndex: Number,
type: String,
position: String,
closable: Boolean,
addable: Boolean
};
Tabs = __decorate([
tag('o-tabs')
], Tabs);
return Tabs;
}(WeElement));
export default Tabs;
//# sourceMappingURL=index.esm.js.map

1
components/tabs/src/index.esm.js.map
View File

File diff suppressed because one or more lines are too long

427
components/tabs/src/index.js
View File

File diff suppressed because one or more lines are too long

1
components/tabs/src/index.js.map
View File

File diff suppressed because one or more lines are too long

2
components/tabs/src/index.scss
View File

@ -6,7 +6,7 @@
* modified by dntzhang
*/
@import "@omiu/common/theme.scss";
@import "../../common/theme.scss";
:host {
display: block;

9
components/tabs/src/index.tsx
View File

@ -30,7 +30,7 @@ domReady.done = false
@tag('o-tabs')
export default class Tabs extends WeElement<Props>{
static css = css
static css = css.default
static defaultProps = {
position: 'top',
@ -99,6 +99,7 @@ export default class Tabs extends WeElement<Props>{
this.forceUpdate()
this.setActiveBar(this['$tab' + this.props.activeIndex], this.props.activeIndex)
this.fire('remove', {
tab: tab,
index: index
@ -122,9 +123,9 @@ export default class Tabs extends WeElement<Props>{
height: `40px`,
transform: `translateY(${props.activeIndex * 40}px)`
} : {
width: `${this._width}px`,
transform: `translateX(${this._x}px)`
}
width: `${this._width}px`,
transform: `translateX(${this._x}px)`
}
return (
<div {...extractClass(props, 'o-tabs', {

14
components/tabs/test/index.js Normal file
View File

@ -0,0 +1,14 @@
import { html, fixture, expect } from '@open-wc/testing'
import '../dist/index.es.js'
describe('o-tabs ', () => {
it('default prop', async () => {
const el = await fixture(html`<o-tabs list="[{label:'用户管理'},{label:'系统设置'},{label:'权限管理中心'}]" active-index="0"></o-tabs>`)
expect(el.shadowRoot.innerHTML).to.equal(
`<div class="o-tabs o-tabs--top"><div class="o-tabs__header is-top"><div class="o-tabs__nav-wrap is-top"><div class="o-tabs__nav-scroll"><div role="tablist" class="o-tabs__nav is-top"><div class="o-tabs__active-bar is-top" style="width: 56px; transform: translateX(0px);"></div><div role="tab" tabindex="0" class="o-tabs__item is-top is-active">用户管理</div><div role="tab" tabindex="-1" class="o-tabs__item is-top">系统设置</div><div role="tab" tabindex="-1" class="o-tabs__item is-top">权限管理中心</div></div></div></div></div></div>`
)
})
})

29
components/tabs/tsconfig.json
View File

@ -1,14 +1,29 @@
{
"compilerOptions": {
"baseUrl": ".",
"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",
"target": "es5",
"allowJs": true,
"declaration": true
},
"include": [
"src/**/*"
]
}
"src/**/*.ts",
"src/**/*.tsx"
],
"exclude": []
}

25
components/tabs/vite.config.ts Normal file
View File

@ -0,0 +1,25 @@
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
packages/admin/.gitignore vendored
View File

@ -1,3 +1,2 @@
.DS_Store
dist
node_modules

1
packages/admin/dist/assets/___vite-browser-external_commonjs-proxy.6f562c52.js vendored Normal file
View File

@ -0,0 +1 @@
import{l as o}from"./vendor.897da41b.js";var r=o(Object.freeze({__proto__:null,[Symbol.toStringTag]:"Module",default:{}}));export{r};

1
packages/admin/dist/assets/accessible-rounded.062512b3.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

45
packages/admin/dist/assets/add-comment-rounded.dc828cf3.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
packages/admin/dist/assets/add-ic-call-rounded.81156481.js vendored Normal file
View File

@ -0,0 +1 @@
import{j as require$$0,k as commonjsGlobal}from"./vendor.897da41b.js";var addIcCallRounded={exports:{}};(function(module,exports){var factory;factory=function(__WEBPACK_EXTERNAL_MODULE_omi__){return function(e){var n={};function r(t){if(n[t])return n[t].exports;var o=n[t]={i:t,l:!1,exports:{}};return e[t].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=n,r.d=function(e,n,t){r.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:t})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,n){if(1&n&&(e=r(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(r.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)r.d(t,o,function(n){return e[n]}.bind(null,o));return t},r.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(n,"a",n),n},r.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},r.p="",r(r.s="./esm/add-ic-call-rounded.js")}({"./esm/add-ic-call-rounded.js":function(module,exports,__webpack_require__){eval('\nObject.defineProperty(exports, "__esModule", { value: true });\nvar omi_1 = __webpack_require__(/*! omi */ "omi");\nvar createSvgIcon_1 = __webpack_require__(/*! ./utils/createSvgIcon */ "./esm/utils/createSvgIcon.js");\nexports.default = createSvgIcon_1.default(omi_1.h("path", {\n d: "M14 8h2v2c0 .55.45 1 1 1s1-.45 1-1V8h2c.55 0 1-.45 1-1s-.45-1-1-1h-2V4c0-.55-.45-1-1-1s-1 .45-1 1v2h-2c-.55 0-1 .45-1 1s.45 1 1 1zm5.21 7.27l-2.54-.29c-.61-.07-1.21.14-1.64.57l-1.84 1.84c-2.83-1.44-5.15-3.75-6.59-6.59l1.85-1.85c.43-.43.64-1.04.57-1.64l-.29-2.52c-.11-1.01-.97-1.78-1.98-1.78H5.02c-1.13 0-2.07.94-2 2.07.53 8.54 7.36 15.36 15.89 15.89 1.13.07 2.07-.87 2.07-2v-1.73c.01-1-.76-1.86-1.77-1.97z"\n}), \'AddIcCallRounded\');\n\n\n//# sourceURL=webpack://%5Bname%5D/./esm/add-ic-call-rounded.js?')},"./esm/utils/createSvgIcon.js":function(module,exports,__webpack_require__){eval('\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nObject.defineProperty(exports, "__esModule", { value: true });\nvar omi_1 = __webpack_require__(/*! omi */ "omi");\nvar hyphenateRE = /\\B([A-Z])/g;\nvar hyphenate = function (str) {\n return str.replace(hyphenateRE, \'-$1\').toLowerCase();\n};\nfunction createSvgIcon(path, displayName) {\n omi_1.define(hyphenate(\'OIcon\' + displayName), function (_) {\n return omi_1.h(\'svg\', __assign({ viewBox: "0 0 24 24", title: displayName }, _.props), path);\n }, {\n css: ":host {\\n fill: currentColor;\\n width: 1em;\\n height: 1em;\\n display: inline-block;\\n vertical-align: -0.125em;\\n transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\\n flex-shrink: 0;\\n user-select: none;\\n}"\n });\n}\nexports.default = createSvgIcon;\n\n\n//# sourceURL=webpack://%5Bname%5D/./esm/utils/createSvgIcon.js?')},omi:function(module,exports){eval("module.exports = __WEBPACK_EXTERNAL_MODULE_omi__;\n\n//# sourceURL=webpack://%5Bname%5D/external_%7B%22commonjs%22:%22omi%22,%22commonjs2%22:%22omi%22,%22amd%22:%22omi%22,%22root%22:%22Omi%22%7D?")}}).default},module.exports=factory(require$$0)})(addIcCallRounded);

16
packages/admin/dist/assets/admin-comment.0922d1a6.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

Some files were not shown because too many files have changed in this diff Show More