feat(@omiu/select): supoort block prop
This commit is contained in:
dntzhang
parent
67dcf53047
commit
6f67ee8f08
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@omiu/popover",
|
||||
"version": "0.0.12",
|
||||
"version": "0.0.13",
|
||||
"description": "Components that show popover.",
|
||||
"docsExtend": {
|
||||
"cnName": "弹出框",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
* @omiu/popover v0.0.12 http://omijs.org
|
||||
* @omiu/popover v0.0.13 http://omijs.org
|
||||
* Front End Cross-Frameworks Framework.
|
||||
* By dntzhang https://github.com/dntzhang
|
||||
* Github: https://github.com/Tencent/omi
|
||||
|
|
@ -2219,7 +2219,7 @@ var domReady = _dready_0_0_1_dready || _domReady;
|
|||
return Transition;
|
||||
})(WeElement));
|
||||
|
||||
var index = "/**\n * omiu tip css based on element ui css\n * Licensed under the MIT License\n * https://github.com/ElemeFE/element/blob/dev/LICENSE\n *\n * modified by dntzhang\n */\n:host {\n display: inline-block; }\n\n.tip {\n position: absolute;\n background: #fff;\n min-width: 150px;\n border-radius: 4px;\n border: 1px solid #ebeef5;\n z-index: 2000;\n color: #606266;\n line-height: 1.4;\n text-align: justify;\n font-size: 14px;\n word-break: break-all;\n box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n width: 100%; }\n\n.tip .tip-arrow,\n.tip .tip-arrow::after {\n position: absolute;\n display: block;\n width: 0;\n height: 0;\n border-color: transparent;\n border-style: solid; }\n\n.tip .tip-arrow {\n border-width: 6px; }\n\n.tip .tip-arrow::after {\n content: \" \";\n border-width: 5px; }\n\n.tip[data-popper-placement^=top] {\n margin-bottom: 12px; }\n\n.tip[data-popper-placement^=top] .tip-arrow {\n bottom: -6px;\n border-top-color: #ebeef5;\n border-bottom-width: 0; }\n\n.tip[data-popper-placement^=top] .tip-arrow::after {\n bottom: 1px;\n margin-left: -5px;\n border-top-color: #ebeef5;\n border-bottom-width: 0; }\n\n.tip[data-popper-placement^=bottom] {\n margin-top: 12px; }\n\n.tip[data-popper-placement^=bottom] .tip-arrow {\n top: -6px;\n border-top-width: 0;\n border-bottom-color: #ebeef5; }\n\n.tip[data-popper-placement^=bottom] .tip-arrow::after {\n top: 1px;\n margin-left: -5px;\n border-top-width: 0;\n border-bottom-color: #ebeef5; }\n\n.tip[data-popper-placement^=right] {\n margin-left: 12px; }\n\n.tip[data-popper-placement^=right] .tip-arrow {\n left: -6px;\n border-right-color: #ebeef5;\n border-left-width: 0; }\n\n.tip[data-popper-placement^=right] .tip-arrow::after {\n bottom: -5px;\n left: 1px;\n border-right-color: #ebeef5;\n border-left-width: 0; }\n\n.tip[data-popper-placement^=left] {\n margin-right: 12px; }\n\n.tip[data-popper-placement^=left] .tip-arrow {\n right: -6px;\n border-right-width: 0;\n border-left-color: #ebeef5; }\n\n.tip[data-popper-placement^=left] .tip-arrow::after {\n right: 1px;\n bottom: -5px;\n margin-left: -5px;\n border-right-width: 0;\n border-left-color: #ebeef5; }\n\n.tip.is-dark {\n background: #ebeef5;\n color: #FFF; }\n\n.tip.is-light {\n background: #FFF; }\n\n.tip.is-light[data-popper-placement^=top] .tip-arrow {\n border-top-color: #ebeef5; }\n\n.tip.is-light[data-popper-placement^=top] .tip-arrow::after {\n border-top-color: #FFF; }\n\n.tip.is-light[data-popper-placement^=bottom] .tip-arrow {\n border-bottom-color: #ebeef5; }\n\n.tip.is-light[data-popper-placement^=bottom] .tip-arrow::after {\n border-bottom-color: #FFF; }\n\n.tip.is-light[data-popper-placement^=left] .tip-arrow {\n border-left-color: #ebeef5; }\n\n.tip.is-light[data-popper-placement^=left] .tip-arrow::after {\n border-left-color: #FFF; }\n\n.tip.is-light[data-popper-placement^=right] .tip-arrow {\n border-right-color: #ebeef5; }\n\n.tip.is-light[data-popper-placement^=right] .tip-arrow::after {\n border-right-color: #FFF; }\n\n.fade-enter,\n.fade-leave-to {\n opacity: 0;\n padding-top: 10px;\n pointer-events: none; }\n\n.fade-enter-active,\n.fade-leave-active {\n -webkit-transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1), padding-top 0.3s cubic-bezier(0.55, 0, 0.1, 1);\n transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1), padding-top 0.3s cubic-bezier(0.55, 0, 0.1, 1); }\n";
|
||||
var index = "/**\n * omiu tip css based on element ui css\n * Licensed under the MIT License\n * https://github.com/ElemeFE/element/blob/dev/LICENSE\n *\n * modified by dntzhang\n */\n:host {\n display: inline-block; }\n\n:host([block]) {\n display: block; }\n\n.tip {\n position: absolute;\n background: #fff;\n min-width: 150px;\n border-radius: 4px;\n border: 1px solid #ebeef5;\n z-index: 2000;\n color: #606266;\n line-height: 1.4;\n text-align: justify;\n font-size: 14px;\n word-break: break-all;\n box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n width: 100%; }\n\n.tip .tip-arrow,\n.tip .tip-arrow::after {\n position: absolute;\n display: block;\n width: 0;\n height: 0;\n border-color: transparent;\n border-style: solid; }\n\n.tip .tip-arrow {\n border-width: 6px; }\n\n.tip .tip-arrow::after {\n content: \" \";\n border-width: 5px; }\n\n.tip[data-popper-placement^=top] {\n margin-bottom: 12px; }\n\n.tip[data-popper-placement^=top] .tip-arrow {\n bottom: -6px;\n border-top-color: #ebeef5;\n border-bottom-width: 0; }\n\n.tip[data-popper-placement^=top] .tip-arrow::after {\n bottom: 1px;\n margin-left: -5px;\n border-top-color: #ebeef5;\n border-bottom-width: 0; }\n\n.tip[data-popper-placement^=bottom] {\n margin-top: 12px; }\n\n.tip[data-popper-placement^=bottom] .tip-arrow {\n top: -6px;\n border-top-width: 0;\n border-bottom-color: #ebeef5; }\n\n.tip[data-popper-placement^=bottom] .tip-arrow::after {\n top: 1px;\n margin-left: -5px;\n border-top-width: 0;\n border-bottom-color: #ebeef5; }\n\n.tip[data-popper-placement^=right] {\n margin-left: 12px; }\n\n.tip[data-popper-placement^=right] .tip-arrow {\n left: -6px;\n border-right-color: #ebeef5;\n border-left-width: 0; }\n\n.tip[data-popper-placement^=right] .tip-arrow::after {\n bottom: -5px;\n left: 1px;\n border-right-color: #ebeef5;\n border-left-width: 0; }\n\n.tip[data-popper-placement^=left] {\n margin-right: 12px; }\n\n.tip[data-popper-placement^=left] .tip-arrow {\n right: -6px;\n border-right-width: 0;\n border-left-color: #ebeef5; }\n\n.tip[data-popper-placement^=left] .tip-arrow::after {\n right: 1px;\n bottom: -5px;\n margin-left: -5px;\n border-right-width: 0;\n border-left-color: #ebeef5; }\n\n.tip.is-dark {\n background: #ebeef5;\n color: #FFF; }\n\n.tip.is-light {\n background: #FFF; }\n\n.tip.is-light[data-popper-placement^=top] .tip-arrow {\n border-top-color: #ebeef5; }\n\n.tip.is-light[data-popper-placement^=top] .tip-arrow::after {\n border-top-color: #FFF; }\n\n.tip.is-light[data-popper-placement^=bottom] .tip-arrow {\n border-bottom-color: #ebeef5; }\n\n.tip.is-light[data-popper-placement^=bottom] .tip-arrow::after {\n border-bottom-color: #FFF; }\n\n.tip.is-light[data-popper-placement^=left] .tip-arrow {\n border-left-color: #ebeef5; }\n\n.tip.is-light[data-popper-placement^=left] .tip-arrow::after {\n border-left-color: #FFF; }\n\n.tip.is-light[data-popper-placement^=right] .tip-arrow {\n border-right-color: #ebeef5; }\n\n.tip.is-light[data-popper-placement^=right] .tip-arrow::after {\n border-right-color: #FFF; }\n\n.fade-enter,\n.fade-leave-to {\n opacity: 0;\n padding-top: 10px;\n pointer-events: none; }\n\n.fade-enter-active,\n.fade-leave-active {\n -webkit-transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1), padding-top 0.3s cubic-bezier(0.55, 0, 0.1, 1);\n transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1), padding-top 0.3s cubic-bezier(0.55, 0, 0.1, 1); }\n";
|
||||
|
||||
var css = index;Object.freeze({
|
||||
__proto__: null,
|
||||
|
|
@ -2327,12 +2327,14 @@ var Popover = /** @class */ (function (_super) {
|
|||
* 触发方式
|
||||
*/
|
||||
trigger: 'click',
|
||||
block: false
|
||||
};
|
||||
Popover.propTypes = {
|
||||
content: String,
|
||||
effect: String,
|
||||
position: String,
|
||||
trigger: String,
|
||||
block: Boolean
|
||||
};
|
||||
Popover = __decorate$1([
|
||||
tag('o-popover')
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
* @omiu/popover v0.0.12 http://omijs.org
|
||||
* @omiu/popover v0.0.13 http://omijs.org
|
||||
* Front End Cross-Frameworks Framework.
|
||||
* By dntzhang https://github.com/dntzhang
|
||||
* Github: https://github.com/Tencent/omi
|
||||
|
|
@ -2220,7 +2220,7 @@
|
|||
return Transition;
|
||||
})(omi.WeElement));
|
||||
|
||||
var index = "/**\n * omiu tip css based on element ui css\n * Licensed under the MIT License\n * https://github.com/ElemeFE/element/blob/dev/LICENSE\n *\n * modified by dntzhang\n */\n:host {\n display: inline-block; }\n\n.tip {\n position: absolute;\n background: #fff;\n min-width: 150px;\n border-radius: 4px;\n border: 1px solid #ebeef5;\n z-index: 2000;\n color: #606266;\n line-height: 1.4;\n text-align: justify;\n font-size: 14px;\n word-break: break-all;\n box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n width: 100%; }\n\n.tip .tip-arrow,\n.tip .tip-arrow::after {\n position: absolute;\n display: block;\n width: 0;\n height: 0;\n border-color: transparent;\n border-style: solid; }\n\n.tip .tip-arrow {\n border-width: 6px; }\n\n.tip .tip-arrow::after {\n content: \" \";\n border-width: 5px; }\n\n.tip[data-popper-placement^=top] {\n margin-bottom: 12px; }\n\n.tip[data-popper-placement^=top] .tip-arrow {\n bottom: -6px;\n border-top-color: #ebeef5;\n border-bottom-width: 0; }\n\n.tip[data-popper-placement^=top] .tip-arrow::after {\n bottom: 1px;\n margin-left: -5px;\n border-top-color: #ebeef5;\n border-bottom-width: 0; }\n\n.tip[data-popper-placement^=bottom] {\n margin-top: 12px; }\n\n.tip[data-popper-placement^=bottom] .tip-arrow {\n top: -6px;\n border-top-width: 0;\n border-bottom-color: #ebeef5; }\n\n.tip[data-popper-placement^=bottom] .tip-arrow::after {\n top: 1px;\n margin-left: -5px;\n border-top-width: 0;\n border-bottom-color: #ebeef5; }\n\n.tip[data-popper-placement^=right] {\n margin-left: 12px; }\n\n.tip[data-popper-placement^=right] .tip-arrow {\n left: -6px;\n border-right-color: #ebeef5;\n border-left-width: 0; }\n\n.tip[data-popper-placement^=right] .tip-arrow::after {\n bottom: -5px;\n left: 1px;\n border-right-color: #ebeef5;\n border-left-width: 0; }\n\n.tip[data-popper-placement^=left] {\n margin-right: 12px; }\n\n.tip[data-popper-placement^=left] .tip-arrow {\n right: -6px;\n border-right-width: 0;\n border-left-color: #ebeef5; }\n\n.tip[data-popper-placement^=left] .tip-arrow::after {\n right: 1px;\n bottom: -5px;\n margin-left: -5px;\n border-right-width: 0;\n border-left-color: #ebeef5; }\n\n.tip.is-dark {\n background: #ebeef5;\n color: #FFF; }\n\n.tip.is-light {\n background: #FFF; }\n\n.tip.is-light[data-popper-placement^=top] .tip-arrow {\n border-top-color: #ebeef5; }\n\n.tip.is-light[data-popper-placement^=top] .tip-arrow::after {\n border-top-color: #FFF; }\n\n.tip.is-light[data-popper-placement^=bottom] .tip-arrow {\n border-bottom-color: #ebeef5; }\n\n.tip.is-light[data-popper-placement^=bottom] .tip-arrow::after {\n border-bottom-color: #FFF; }\n\n.tip.is-light[data-popper-placement^=left] .tip-arrow {\n border-left-color: #ebeef5; }\n\n.tip.is-light[data-popper-placement^=left] .tip-arrow::after {\n border-left-color: #FFF; }\n\n.tip.is-light[data-popper-placement^=right] .tip-arrow {\n border-right-color: #ebeef5; }\n\n.tip.is-light[data-popper-placement^=right] .tip-arrow::after {\n border-right-color: #FFF; }\n\n.fade-enter,\n.fade-leave-to {\n opacity: 0;\n padding-top: 10px;\n pointer-events: none; }\n\n.fade-enter-active,\n.fade-leave-active {\n -webkit-transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1), padding-top 0.3s cubic-bezier(0.55, 0, 0.1, 1);\n transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1), padding-top 0.3s cubic-bezier(0.55, 0, 0.1, 1); }\n";
|
||||
var index = "/**\n * omiu tip css based on element ui css\n * Licensed under the MIT License\n * https://github.com/ElemeFE/element/blob/dev/LICENSE\n *\n * modified by dntzhang\n */\n:host {\n display: inline-block; }\n\n:host([block]) {\n display: block; }\n\n.tip {\n position: absolute;\n background: #fff;\n min-width: 150px;\n border-radius: 4px;\n border: 1px solid #ebeef5;\n z-index: 2000;\n color: #606266;\n line-height: 1.4;\n text-align: justify;\n font-size: 14px;\n word-break: break-all;\n box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n width: 100%; }\n\n.tip .tip-arrow,\n.tip .tip-arrow::after {\n position: absolute;\n display: block;\n width: 0;\n height: 0;\n border-color: transparent;\n border-style: solid; }\n\n.tip .tip-arrow {\n border-width: 6px; }\n\n.tip .tip-arrow::after {\n content: \" \";\n border-width: 5px; }\n\n.tip[data-popper-placement^=top] {\n margin-bottom: 12px; }\n\n.tip[data-popper-placement^=top] .tip-arrow {\n bottom: -6px;\n border-top-color: #ebeef5;\n border-bottom-width: 0; }\n\n.tip[data-popper-placement^=top] .tip-arrow::after {\n bottom: 1px;\n margin-left: -5px;\n border-top-color: #ebeef5;\n border-bottom-width: 0; }\n\n.tip[data-popper-placement^=bottom] {\n margin-top: 12px; }\n\n.tip[data-popper-placement^=bottom] .tip-arrow {\n top: -6px;\n border-top-width: 0;\n border-bottom-color: #ebeef5; }\n\n.tip[data-popper-placement^=bottom] .tip-arrow::after {\n top: 1px;\n margin-left: -5px;\n border-top-width: 0;\n border-bottom-color: #ebeef5; }\n\n.tip[data-popper-placement^=right] {\n margin-left: 12px; }\n\n.tip[data-popper-placement^=right] .tip-arrow {\n left: -6px;\n border-right-color: #ebeef5;\n border-left-width: 0; }\n\n.tip[data-popper-placement^=right] .tip-arrow::after {\n bottom: -5px;\n left: 1px;\n border-right-color: #ebeef5;\n border-left-width: 0; }\n\n.tip[data-popper-placement^=left] {\n margin-right: 12px; }\n\n.tip[data-popper-placement^=left] .tip-arrow {\n right: -6px;\n border-right-width: 0;\n border-left-color: #ebeef5; }\n\n.tip[data-popper-placement^=left] .tip-arrow::after {\n right: 1px;\n bottom: -5px;\n margin-left: -5px;\n border-right-width: 0;\n border-left-color: #ebeef5; }\n\n.tip.is-dark {\n background: #ebeef5;\n color: #FFF; }\n\n.tip.is-light {\n background: #FFF; }\n\n.tip.is-light[data-popper-placement^=top] .tip-arrow {\n border-top-color: #ebeef5; }\n\n.tip.is-light[data-popper-placement^=top] .tip-arrow::after {\n border-top-color: #FFF; }\n\n.tip.is-light[data-popper-placement^=bottom] .tip-arrow {\n border-bottom-color: #ebeef5; }\n\n.tip.is-light[data-popper-placement^=bottom] .tip-arrow::after {\n border-bottom-color: #FFF; }\n\n.tip.is-light[data-popper-placement^=left] .tip-arrow {\n border-left-color: #ebeef5; }\n\n.tip.is-light[data-popper-placement^=left] .tip-arrow::after {\n border-left-color: #FFF; }\n\n.tip.is-light[data-popper-placement^=right] .tip-arrow {\n border-right-color: #ebeef5; }\n\n.tip.is-light[data-popper-placement^=right] .tip-arrow::after {\n border-right-color: #FFF; }\n\n.fade-enter,\n.fade-leave-to {\n opacity: 0;\n padding-top: 10px;\n pointer-events: none; }\n\n.fade-enter-active,\n.fade-leave-active {\n -webkit-transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1), padding-top 0.3s cubic-bezier(0.55, 0, 0.1, 1);\n transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1), padding-top 0.3s cubic-bezier(0.55, 0, 0.1, 1); }\n";
|
||||
|
||||
var css = index;Object.freeze({
|
||||
__proto__: null,
|
||||
|
|
@ -2328,12 +2328,14 @@
|
|||
* 触发方式
|
||||
*/
|
||||
trigger: 'click',
|
||||
block: false
|
||||
};
|
||||
Popover.propTypes = {
|
||||
content: String,
|
||||
effect: String,
|
||||
position: String,
|
||||
trigger: String,
|
||||
block: Boolean
|
||||
};
|
||||
Popover = __decorate$1([
|
||||
omi.tag('o-popover')
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -12,6 +12,9 @@
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
:host([block]) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tip {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ interface Props {
|
|||
effect?: string
|
||||
position?: string
|
||||
trigger?: 'click' | 'hover' | 'manual'
|
||||
block?: boolean
|
||||
}
|
||||
|
||||
@tag('o-popover')
|
||||
|
|
@ -20,6 +21,7 @@ export default class Popover extends WeElement<Props> {
|
|||
* 触发方式
|
||||
*/
|
||||
trigger: 'click',
|
||||
block: false
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
|
|
@ -27,6 +29,7 @@ export default class Popover extends WeElement<Props> {
|
|||
effect: String,
|
||||
position: String,
|
||||
trigger: String,
|
||||
block: Boolean
|
||||
}
|
||||
|
||||
installed() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
types
|
||||
*.local
|
||||
|
|
@ -1,52 +1,33 @@
|
|||
## ActionSheet
|
||||
## Select
|
||||
|
||||
Mobile pop-up options list
|
||||
> Select
|
||||
|
||||
* [→ CodePen](https://codepen.io/omijs/pen/wvKdoNJ)
|
||||
## Install
|
||||
|
||||
## Import
|
||||
|
||||
```js
|
||||
import '@omiu/action-sheet'
|
||||
```bash
|
||||
npm i
|
||||
```
|
||||
|
||||
Or use script tag to ref it.
|
||||
## Dev
|
||||
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/@omiu/action-sheet"></script>
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
## Usage
|
||||
## Preview
|
||||
|
||||
```html
|
||||
<o-action-sheet></o-action-sheet>
|
||||
```
|
||||
//html mode demo
|
||||
http://localhost:3000
|
||||
|
||||
//jsx mode demo
|
||||
http://localhost:3000/demo.html
|
||||
```
|
||||
|
||||
## API
|
||||
## Release
|
||||
|
||||
### Props
|
||||
|
||||
```tsx
|
||||
{
|
||||
type: string,
|
||||
menus: any[],
|
||||
actions: any[],
|
||||
show: boolean
|
||||
}
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### 默认属性
|
||||
|
||||
```tsx
|
||||
{
|
||||
type: '',
|
||||
menus: [],
|
||||
actions: [],
|
||||
show: false
|
||||
}
|
||||
```
|
||||
### Events
|
||||
|
||||
* item-click
|
||||
* close
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
<!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>
|
||||
|
|
@ -1,25 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
|
||||
<meta charset="UTF-8" />
|
||||
<!-- <title>Omiu Select</title> -->
|
||||
<style>
|
||||
body {
|
||||
padding: 100px
|
||||
}
|
||||
</style>
|
||||
<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>
|
||||
<!--
|
||||
<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://cdn.jsdelivr.net/npm/omi@6.19.20"></script>
|
||||
<script src="https://unpkg.com/@omiu/button@0.0.7/src/index.js"></script>
|
||||
<script src="../../src/index.js"></script>
|
||||
<h1>HTML Mode <a href="./demo.html">JSX Mode</a></h1>
|
||||
|
||||
<o-select multiple size="mini" block="1" placeholder="Select A Item"
|
||||
items="[{label:'Item A', value: 1},{ label:'Item B', value: 2},{ label:'Item C', value: 3},{ label:'Item B', value: 4},{ label:'Item C', value: 5}]">
|
||||
</o-select>
|
||||
|
||||
<o-select placeholder="Select A Item" value="1"
|
||||
items="[{label:'Item A', value: 1},{ label:'Item B', value: 2},{ label:'Item C', value: 3}]"></o-select>
|
||||
|
|
@ -41,10 +37,15 @@
|
|||
items="[{label:'Item A', value: 1},{ label:'Item B', value: 2},{ label:'Item C', value: 3},{ label:'Item B', value: 4},{ label:'Item C', value: 5}]">
|
||||
</o-select>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
document.querySelector('o-counter').addEventListener('CountChanged', function (evt) {
|
||||
console.log(evt.detail)
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@omiu/select",
|
||||
"version": "0.0.8",
|
||||
"version": "0.0.9",
|
||||
"description": "Mobile pop-up options list",
|
||||
"docsExtend": {
|
||||
"cnName": "下拉菜单",
|
||||
|
|
@ -9,95 +9,43 @@
|
|||
"codepenHeight": 351,
|
||||
"codepenDefaultTab": "html,result"
|
||||
},
|
||||
"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"
|
||||
"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 watch & vite",
|
||||
"build": "vite build && yarn build:scss",
|
||||
"build:demo": "vite build",
|
||||
"build:scss": "sass src/index.scss src/index.css",
|
||||
"watch": "sass --watch src/index.scss src/index.css --no-source-map",
|
||||
"test": "npm run build && web-test-runner \"test/*.js\" --node-resolve"
|
||||
},
|
||||
"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"
|
||||
]
|
||||
},
|
||||
"prettier": {
|
||||
"singleQuote": true,
|
||||
"semi": false,
|
||||
"tabWidth": 2,
|
||||
"useTabs": false
|
||||
},
|
||||
"dependencies": {
|
||||
"@omiu/common": "latest",
|
||||
"@omiu/popover": "^0.0.12",
|
||||
"@omiu/popover": "^0.0.13",
|
||||
"omi": "latest",
|
||||
"resize-observer-polyfill": "^1.5.1"
|
||||
}
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
"@open-wc/testing": "^2.5.33",
|
||||
"@types/node": "^16.4.7",
|
||||
"@web/test-runner": "^0.13.13",
|
||||
"node-watch": "^0.7.1",
|
||||
"sass": "^1.36.0",
|
||||
"typescript": "^4.3.2",
|
||||
"vite": "^2.4.3"
|
||||
},
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"omi",
|
||||
"omiu",
|
||||
"form"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,153 +0,0 @@
|
|||
//自动扫描 index.tsx 生成 readme
|
||||
const fs = require('fs')
|
||||
|
||||
const content = fs.readFileSync('./src/index.tsx', 'utf-8')
|
||||
|
||||
const props = extract('interface Props {', content).replace('interface Props ', '')
|
||||
|
||||
const defaultProps = extract('static defaultProps = {', content).replace('static defaultProps = ', '').replace(/ }/g, '}').replace(/ /g, ' ')
|
||||
|
||||
|
||||
const eventContexts = content.match(new RegExp('this.fire\\([\\s\\S]*?[,|)]', 'g'))
|
||||
const package = require('../package.json')
|
||||
const packageName = package.name
|
||||
const name = packageName.split('/')[1]
|
||||
|
||||
const upperCaseName = name.split('-').map(item => {
|
||||
return item.charAt(0).toUpperCase() + item.slice(1)
|
||||
}).join('')
|
||||
const tagName = 'o-' + name
|
||||
|
||||
//fire 附近打标标记 event.detail 类型？
|
||||
let events, eventMap
|
||||
if (eventContexts) {
|
||||
|
||||
events = eventContexts.map(event => {
|
||||
return event.replace('this.fire(\'', '').replace('\',', '').replace('\')', '')
|
||||
})
|
||||
eventMap = {}
|
||||
events.forEach(event => {
|
||||
eventMap[event] = 1
|
||||
})
|
||||
}
|
||||
|
||||
const cnContent = `## ${upperCaseName} ${package.docsExtend.cnName}
|
||||
|
||||
${package.docsExtend.cnDescription}
|
||||
|
||||
<iframe height="${package.docsExtend.codepenHeight}" style="width: 100%;" scrolling="no" title="OMIU ${upperCaseName}" src="https://codepen.io/omijs/embed/${package.docsExtend.codepen}?height=${package.docsExtend.codepenHeight}&theme-id=default&default-tab=${package.docsExtend.codepenDefaultTab}" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
|
||||
See the Pen <a href='https://codepen.io/omijs/pen/${package.docsExtend.codepen}'>OMIU Checkbox</a> by OMI
|
||||
(<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
## 导入
|
||||
|
||||
\`\`\`js
|
||||
import '${packageName}'
|
||||
\`\`\`
|
||||
|
||||
或者直接 script 标签引入。
|
||||
|
||||
|
||||
\`\`\`html
|
||||
<script src="https://unpkg.com/${packageName}"></script>
|
||||
\`\`\`
|
||||
|
||||
## 使用
|
||||
|
||||
\`\`\`html
|
||||
<${tagName}></${tagName}>
|
||||
\`\`\`
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
\`\`\`tsx
|
||||
${props}
|
||||
\`\`\`
|
||||
|
||||
${defaultProps ? '### 默认属性\n' : ''}${defaultProps ? '\`\`\`tsx\n' : ''}${defaultProps ? defaultProps : ''}
|
||||
${defaultProps ? '\`\`\`\n' : ''}${eventMap ? '### 事件\n' : ''}${eventMap ? Object.keys(eventMap).map(event => {
|
||||
return `* ${event}\n`
|
||||
}).join('') : ''}`
|
||||
|
||||
fs.writeFileSync(`../docs-src/src/docs/zh-cn/${name}.md`, cnContent)
|
||||
|
||||
|
||||
|
||||
const enContent = `## ${upperCaseName}
|
||||
|
||||
${package.description}
|
||||
|
||||
<iframe height="${package.docsExtend.codepenHeight}" style="width: 100%;" scrolling="no" title="OMIU ${upperCaseName}" src="https://codepen.io/omijs/embed/${package.docsExtend.codepen}?height=${package.docsExtend.codepenHeight}&theme-id=default&default-tab=${package.docsExtend.codepenDefaultTab}" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
|
||||
See the Pen <a href='https://codepen.io/omijs/pen/${package.docsExtend.codepen}'>OMIU Checkbox</a> by OMI
|
||||
(<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
## Import
|
||||
|
||||
\`\`\`js
|
||||
import '${packageName}'
|
||||
\`\`\`
|
||||
|
||||
Or use script tag to ref it.
|
||||
|
||||
|
||||
\`\`\`html
|
||||
<script src="https://unpkg.com/${packageName}"></script>
|
||||
\`\`\`
|
||||
|
||||
## Usage
|
||||
|
||||
\`\`\`html
|
||||
<${tagName}></${tagName}>
|
||||
\`\`\`
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
\`\`\`tsx
|
||||
${props}
|
||||
\`\`\`
|
||||
|
||||
${defaultProps ? '### 默认属性\n\n' : ''}${defaultProps ? '\`\`\`tsx\n' : ''}${defaultProps ? defaultProps : ''}
|
||||
${defaultProps ? '\`\`\`\n' : ''}${eventMap ? '### Events\n\n' : ''}${eventMap ? Object.keys(eventMap).map(event => {
|
||||
return `* ${event}\n`
|
||||
}).join('') : ''}`
|
||||
|
||||
|
||||
fs.writeFileSync(`../docs-src/src/docs/en/${name}.md`, enContent)
|
||||
|
||||
|
||||
fs.writeFileSync(`../${name}/README.md`, enContent.replace(/<iframe[\s\S]*?<\/iframe>/, `* [→ CodePen](https://codepen.io/omijs/pen/${package.docsExtend.codepen})`))
|
||||
// console.log(props)
|
||||
// console.log(defaultProps)
|
||||
// console.log(Object.keys(eventMap))
|
||||
|
||||
|
||||
|
||||
function extract(startWith, str) {
|
||||
const start = str.indexOf(startWith)
|
||||
if (start === -1) return ''
|
||||
let end = start + startWith.length
|
||||
let stackCount = 1
|
||||
while (end < str.length) {
|
||||
if (str[end] === '}') {
|
||||
if (stackCount === 1) {
|
||||
|
||||
break
|
||||
} else {
|
||||
stackCount--
|
||||
}
|
||||
} else if (str[end] === '{') {
|
||||
stackCount++
|
||||
}
|
||||
|
||||
end++
|
||||
}
|
||||
|
||||
return str.substring(start, end + 1)
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
import nodeResolve from "rollup-plugin-node-resolve";
|
||||
|
||||
import typescript from 'rollup-plugin-typescript';
|
||||
import scss from 'rollup-plugin-scss'
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
const fs = require('fs')
|
||||
const license = require("rollup-plugin-license");
|
||||
const pkg = require("../package.json");
|
||||
const licensePlugin = license({
|
||||
banner: `${pkg.name} v${pkg.version} http://omijs.org\r\nFront End Cross-Frameworks Framework.\r\nBy dntzhang https://github.com/dntzhang \r\n Github: https://github.com/Tencent/omi\r\n MIT Licensed.`
|
||||
});
|
||||
|
||||
export default {
|
||||
input: "src/index.tsx",
|
||||
output: {
|
||||
format: "es",
|
||||
file: "./src/index.esm.js",
|
||||
name: pkg.name,
|
||||
sourcemap: true,
|
||||
strict: true
|
||||
},
|
||||
plugins: [
|
||||
nodeResolve({
|
||||
main: true
|
||||
}),
|
||||
scss({
|
||||
output: false,
|
||||
// output: function (styles, styleNodes) {
|
||||
// fs.writeFileSync('./src/index.css', styles)
|
||||
// },
|
||||
}),
|
||||
typescript(),
|
||||
commonjs(),
|
||||
|
||||
licensePlugin
|
||||
],
|
||||
external: ['omi']
|
||||
};
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const fs = require('fs')
|
||||
|
||||
let js = fs.readFileSync('./src/index.esm.js', 'utf-8')
|
||||
|
||||
fs.writeFileSync('./src/index.esm.js',
|
||||
js.replace(`var css = /*#__PURE__*/Object.freeze({`, `var css = index;Object.freeze({`)
|
||||
)
|
||||
|
||||
js = fs.readFileSync('./src/index.js', 'utf-8')
|
||||
|
||||
fs.writeFileSync('./src/index.js',
|
||||
js.replace(`var css = /*#__PURE__*/Object.freeze({`, `var css = index;Object.freeze({`)
|
||||
)
|
||||
|
||||
|
||||
|
|
@ -1,102 +0,0 @@
|
|||
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]
|
||||
|
||||
const name = 'o-' + componentName
|
||||
const library = 'O' + componentName.split('-').map(name => name.charAt(0).toUpperCase() + name.slice(1)).join('')
|
||||
|
||||
|
||||
const config = {
|
||||
devtool: 'source-map',
|
||||
plugins: [
|
||||
new ProgressBarPlugin()
|
||||
],
|
||||
entry: {
|
||||
[name]: './src/index.tsx'
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, '../src/'),
|
||||
filename: 'index.js',
|
||||
libraryTarget: 'umd',
|
||||
library: library,
|
||||
libraryExport: "default",
|
||||
globalObject: 'this'
|
||||
},
|
||||
mode: 'development',
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.scss$/,
|
||||
use: [
|
||||
'to-string-loader',
|
||||
'css-loader',
|
||||
{
|
||||
loader: 'resolve-url-loader'
|
||||
},
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
sourceMap: true,
|
||||
|
||||
// mdc-web doesn't use sass-loader's normal syntax for imports
|
||||
// across modules, so we add all module directories containing
|
||||
// mdc-web components to the Sass include path
|
||||
// https://github.com/material-components/material-components-web/issues/351
|
||||
includePaths: glob.sync(path.join(__dirname, '../node_modules/@material')).map((dir) => path.dirname(dir))
|
||||
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
'to-string-loader',
|
||||
'css-loader',
|
||||
{
|
||||
loader: 'resolve-url-loader'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.less$/,
|
||||
use: [
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
{
|
||||
loader: 'resolve-url-loader'
|
||||
},
|
||||
'less-loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.(jpe?g|png|gif|svg)$/i,
|
||||
loader: "url-loader"
|
||||
},
|
||||
{
|
||||
test: /\.[t|j]sx?$/,
|
||||
use: 'ts-loader',
|
||||
exclude: /node_modules/
|
||||
}
|
||||
]
|
||||
},
|
||||
watch: process.argv[3] === 'demo',
|
||||
externals: {
|
||||
'omi': {
|
||||
commonjs: "omi",
|
||||
commonjs2: "omi",
|
||||
amd: "omi",
|
||||
root: "Omi"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
webpack(config, (err, stats) => { // Stats Object
|
||||
if (err || stats.hasErrors()) {
|
||||
// Handle errors here
|
||||
}
|
||||
// Done processing
|
||||
|
||||
})
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
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>
|
||||
<h1 onclick={() => {
|
||||
this.update()
|
||||
}}>JSX Mode</h1>
|
||||
<o-counter count={this.count} onCountChanged={this.onChanged}></o-counter>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
render(<my-demo></my-demo>, 'body', {
|
||||
ignoreAttrs: true
|
||||
})
|
||||
|
|
@ -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'
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +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"}
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
import { WeElement } from 'omi';
|
||||
import '@omiu/popover';
|
||||
interface Props {
|
||||
items: any[];
|
||||
active: boolean;
|
||||
value: string | number | any[];
|
||||
placeholder: string;
|
||||
size: 'big' | 'medium' | 'small' | 'mini';
|
||||
multiple: boolean;
|
||||
}
|
||||
export default class Select extends WeElement<Props> {
|
||||
static css: any;
|
||||
static defaultProps: {
|
||||
value: string;
|
||||
size: string;
|
||||
multiple: boolean;
|
||||
};
|
||||
static propTypes: {
|
||||
items: ArrayConstructor;
|
||||
active: BooleanConstructor;
|
||||
value: StringConstructor;
|
||||
placeholder: StringConstructor;
|
||||
size: StringConstructor;
|
||||
multiple: BooleanConstructor;
|
||||
};
|
||||
onInputClick: () => void;
|
||||
onInputBlur: () => void;
|
||||
selectedIndex: number;
|
||||
selectedIndexMap: {};
|
||||
selectedItems: any[];
|
||||
onItemClick: (item: any, index: any, evt: any) => void;
|
||||
_refInput: any;
|
||||
inputHeight: any;
|
||||
resetInputHeight(): void;
|
||||
inputWidth: number;
|
||||
tags: any;
|
||||
resetInputWidth(): void;
|
||||
installed(): void;
|
||||
resetSize: () => void;
|
||||
label: string;
|
||||
install(): void;
|
||||
uninstall(): void;
|
||||
render(props: any): JSX.Element;
|
||||
}
|
||||
export {};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -6,7 +6,15 @@
|
|||
* modified by dntzhang
|
||||
*/
|
||||
|
||||
@import "@omiu/common/theme.scss";
|
||||
@import "../node_modules/@omiu/common/theme.scss";
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
:host([block]) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.o-select {
|
||||
position: relative;
|
||||
|
|
@ -61,6 +69,12 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
.block .o-input {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.o-input {
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
|
|
@ -108,24 +122,7 @@
|
|||
color: #909399
|
||||
}
|
||||
|
||||
.o-input .o-input__count {
|
||||
height: 100%;
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
color: #909399;
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
.o-input .o-input__count .o-input__count-inner {
|
||||
background: #FFF;
|
||||
line-height: initial;
|
||||
display: inline-block;
|
||||
padding: 0 5px
|
||||
}
|
||||
|
||||
.o-input__inner {
|
||||
-webkit-appearance: none;
|
||||
|
|
@ -257,9 +254,7 @@
|
|||
border-color: #F56C6C
|
||||
}
|
||||
|
||||
.o-input.is-exceed .o-input__suffix .o-input__count {
|
||||
color: #F56C6C
|
||||
}
|
||||
|
||||
|
||||
.o-input--suffix .o-input__inner {
|
||||
padding-right: 30px
|
||||
|
|
@ -903,6 +898,12 @@
|
|||
position: relative
|
||||
}
|
||||
|
||||
.o-select.block {
|
||||
display: block;
|
||||
position: relative
|
||||
}
|
||||
|
||||
|
||||
.o-select .o-select__tags>span {
|
||||
display: contents
|
||||
}
|
||||
|
|
@ -1125,4 +1126,4 @@ ul,
|
|||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -13,6 +13,7 @@ interface Props {
|
|||
placeholder: string
|
||||
size: 'big' | 'medium' | 'small' | 'mini'
|
||||
multiple: boolean
|
||||
block: boolean
|
||||
}
|
||||
|
||||
const heightMap = {
|
||||
|
|
@ -29,7 +30,9 @@ export default class Select extends WeElement<Props> {
|
|||
static defaultProps = {
|
||||
value: '',
|
||||
size: 'big',
|
||||
multiple: false
|
||||
multiple: false,
|
||||
block: false
|
||||
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
|
|
@ -38,7 +41,8 @@ export default class Select extends WeElement<Props> {
|
|||
value: String,
|
||||
placeholder: String,
|
||||
size: String,
|
||||
multiple: Boolean
|
||||
multiple: Boolean,
|
||||
block: Boolean
|
||||
}
|
||||
|
||||
onInputClick = () => {
|
||||
|
|
@ -156,9 +160,13 @@ export default class Select extends WeElement<Props> {
|
|||
|
||||
return (
|
||||
<div {...extractClass({}, 'o-select', {
|
||||
['o-select--' + props.size]: props.size
|
||||
['o-select--' + props.size]: props.size,
|
||||
'block': props.block
|
||||
})} >
|
||||
<o-popover ref={e => this.popover = e} position="bottom">
|
||||
<o-popover
|
||||
block={props.block}
|
||||
ref={e => this.popover = e}
|
||||
position="bottom">
|
||||
<div>
|
||||
<div class="o-select__tags" ref={e => this.tags = e} style={{ width: '100%', maxWidth: (this.inputWidth - 32) + 'px' }}>
|
||||
<span>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
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-select multiple size="mini" block="1" placeholder="Select A Item"
|
||||
items="[{label:'Item A', value: 1},{ label:'Item B', value: 2},{ label:'Item C', value: 3},{ label:'Item B', value: 4},{ label:'Item C', value: 5}]">
|
||||
</o-select>`)
|
||||
expect(el.shadowRoot.innerHTML).to.equal(`<div class="o-select o-select--mini block"><o-popover block="true" position="bottom"><div><div class="o-select__tags" style="width: 100%; max-width: 752px;"><span></span><input type="text" autocomplete="off" class="o-select__input" style="flex-grow: 1; width: 0.0961538%; max-width: 752px;"></div><div class="o-input o-input--suffix o-input--mini"><input type="text" readonly="true" autocomplete="off" placeholder="Select A Item" class="o-input__inner" style="height: 28px;"><span class="o-input__suffix"><span class="o-input__suffix-inner"><i class="o-select__caret o-input__icon o-icon-arrow-up is-reverse"></i></span></span><svg viewBox="0 0 24 24" class="arrow" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path></svg></div></div><div slot="popover" class="o-select-dropdown__wrap"><ul><li class="o-select-dropdown__item"><span>Item A</span></li><li class="o-select-dropdown__item"><span>Item B</span></li><li class="o-select-dropdown__item"><span>Item C</span></li><li class="o-select-dropdown__item"><span>Item B</span></li><li class="o-select-dropdown__item"><span>Item C</span></li></ul></div></o-popover></div>`)
|
||||
})
|
||||
|
||||
|
||||
|
||||
})
|
||||
|
|
@ -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": []
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
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/, '@omiu/popover'],
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: resolve(__dirname, "index.html"),
|
||||
admin: resolve(__dirname, "demo.html")
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
esbuild: {
|
||||
jsxFactory: 'h',
|
||||
jsxFragment: 'h.f'
|
||||
}
|
||||
})
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
"@omiu/popover": "^0.0.12",
|
||||
"@omiu/progress": "^0.0.3",
|
||||
"@omiu/radio": "^0.0.6",
|
||||
"@omiu/select": "^0.0.8",
|
||||
"@omiu/select": "^0.0.9",
|
||||
"@omiu/slider": "^0.0.2",
|
||||
"@omiu/step": "^0.0.3",
|
||||
"@omiu/switch": "^0.0.2",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "omi-cli",
|
||||
"version": "3.8.3",
|
||||
"version": "3.8.5",
|
||||
"description": "Create website, app with no build configuration, be friendly to [Omi](https://github.com/Tencent/omi) framework.",
|
||||
"main": "bin/omi",
|
||||
"engines": {
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
"types"
|
||||
],
|
||||
"dependencies": {
|
||||
"@omiu/common": "latest",
|
||||
"omi": "latest"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -23,10 +23,11 @@ export default class MyDemo extends WeElement<Props> {
|
|||
render(props: Props) {
|
||||
return (
|
||||
<div>
|
||||
<h1 onclick={() => {
|
||||
this.update()
|
||||
}}>JSX Mode</h1>
|
||||
|
||||
<o-counter count={this.count} onCountChanged={this.onChanged}></o-counter>
|
||||
<button onclick={() => {
|
||||
this.update()
|
||||
}}>parent.update()</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue