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

publish(@omiu/badge)

This commit is contained in:
dntzhang 2020-04-28 19:15:57 +08:00
parent cf5a4cfa27
commit e9434d1f75
13 changed files with 348 additions and 464 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/badge/README.md
View File

@ -1,26 +1,26 @@
## ActionSheet
## Badge
Mobile pop-up options list
Mark in the upper right corner of the icon
* [→ CodePen](https://codepen.io/omijs/pen/wvKdoNJ)
* [→ CodePen](https://codepen.io/omijs/pen/WNQOdaB)
## Import
```js
import '@omiu/action-sheet'
import '@omiu/badge'
```
Or use script tag to ref it.
```html
<script src="https://unpkg.com/@omiu/action-sheet"></script>
<script src="https://unpkg.com/@omiu/badge"></script>
```
## Usage
```html
<o-action-sheet></o-action-sheet>
<o-badge></o-badge>
```
## API
@ -29,10 +29,10 @@ Or use script tag to ref it.
```tsx
{
type: string,
menus: any[],
actions: any[],
show: boolean
dot?: boolean,
content?: string,
x?: number,
y?: number
}
```
@ -40,13 +40,7 @@ Or use script tag to ref it.
```tsx
{
type: '',
menus: [],
actions: [],
show: false
x: 0,
y: 0
)
```
### Events
* itemClick
* close

43
components/badge/demos/js-demo/index.html
View File

@ -14,49 +14,50 @@
</a>
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
<script src="../../src/index.js"></script>
<script src="../../../badge/src/index.js"></script>
<script src="https://unpkg.com/@omiu/icon@0.0.2/person.js"></script>
<script src="../../../o-icon/src/index.js"></script>
<script src="https://unpkg.com/@omiu/icon@0.0.3/wifi.js"></script>
<script src="https://unpkg.com/@omiu/icon@0.0.3/favorite.js"></script>
<div>
<m-badge dot x="-10" y="10">
<m-icon-button icon='wifi'></m-icon-button>
</m-badge>
<o-badge dot x="2" y="10">
<o-icon-wifi style="font-size: 30px;"></o-icon-wifi>
</o-badge>
<m-badge content="99" x="-10" y="10">
<m-icon-button icon='favorite'></m-icon-button>
</m-badge>
<br><br><br>
<o-badge content="99" x="5" y="10">
<o-icon-favorite style="font-size: 30px;"></o-icon-favorite>
</o-badge>
<br /><br /><br />
<m-badge content="8">
<m-icon
<o-badge content="8">
<o-icon
path="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"
color="#07C160" />
</m-badge>
</o-badge>
<br /><br /><br />
<m-badge content="99">
<m-icon
<o-badge content="99">
<o-icon
path="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"
color="red" />
</m-badge>
</o-badge>
<br /><br /><br />
<m-badge content="new">
<m-icon
<o-badge content="new">
<o-icon
path="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"
color="black" />
</m-badge>
</o-badge>
<br /><br /><br />
<m-badge dot>
<m-icon
<o-badge dot>
<o-icon
path="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"
color="black" />
</m-badge>
</o-badge>
</div>

10
components/badge/package.json
View File

@ -1,11 +1,11 @@
{
"name": "@omiu/avatar",
"name": "@omiu/badge",
"version": "0.0.1",
"description": "A head that symbolizes an image or personality",
"description": "Mark in the upper right corner of the icon",
"docsExtend": {
"cnName": "头像",
"cnDescription": "象征着想象或者个性的头像",
"codepen": "wvKdoNJ",
"cnName": "徽章",
"cnDescription": "图标右上角的标记",
"codepen": "WNQOdaB",
"codepenHeight": 351,
"codepenDefaultTab": "html,result"
},

36
components/badge/src/index.css Normal file
View File

@ -0,0 +1,36 @@
.o-badge {
position: relative;
display: inline-block; }
.badge {
background-color: #F95050;
color: #FFFFFF;
line-height: 1.2;
top: 0;
right: 0;
height: 20px;
display: flex;
padding: 0 4px;
z-index: 1;
position: absolute;
flex-wrap: wrap;
font-size: 0.75rem;
min-width: 20px;
transform: scale(1) translate(50%, -50%);
box-sizing: border-box;
transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
align-items: center;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
align-content: center;
border-radius: 10px;
flex-direction: row;
justify-content: center;
transform-origin: 100% 0%; }
.circle {
width: 8px;
height: 8px;
border-radius: 50%;
min-width: 8px;
padding: 0; }

2
components/badge/src/index.d.ts vendored
View File

@ -1,6 +1,4 @@
import { WeElement } from 'omi';
import '../icon';
import '../theme.ts';
interface Props {
dot?: boolean;
content?: string;

138
components/badge/src/index.esm.js Normal file
View File

@ -0,0 +1,138 @@
/**
* @omiu/badge v0.0.1 http://omijs.org
* Front End Cross-Frameworks Framework.
* By dntzhang https://github.com/dntzhang
* Github: https://github.com/Tencent/omi
* MIT Licensed.
*/
import { h, extractClass, tag, WeElement } from 'omi';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
var css = `.o-badge {
position: relative;
display: inline-block; }
.badge {
background-color: #F95050;
color: #FFFFFF;
line-height: 1.2;
top: 0;
right: 0;
height: 20px;
display: flex;
padding: 0 4px;
z-index: 1;
position: absolute;
flex-wrap: wrap;
font-size: 0.75rem;
min-width: 20px;
transform: scale(1) translate(50%, -50%);
box-sizing: border-box;
transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
align-items: center;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
align-content: center;
border-radius: 10px;
flex-direction: row;
justify-content: center;
transform-origin: 100% 0%; }
.circle {
width: 8px;
height: 8px;
border-radius: 50%;
min-width: 8px;
padding: 0; }
`
var Badge = /** @class */ (function (_super) {
__extends(Badge, _super);
function Badge() {
return _super !== null && _super.apply(this, arguments) || this;
}
Badge.prototype.installed = function () {
};
Badge.prototype.uninstall = function () {
};
Badge.prototype.render = function (props) {
if (props.content) {
return h("div", __assign({}, extractClass(props, 'o-badge')),
props.children ? props.children[0] : h("slot", null),
h("span", { class: "badge", style: "right:" + props.x * -1 + "px;top:" + props.y + "px;" }, props.content));
}
if (props.dot) {
return (h("div", { class: "o-badge" },
props.children ? props.children[0] : h("slot", null),
h("span", { style: "right:" + props.x * -1 + "px;top:" + props.y + "px;", class: "circle badge" })));
}
return h("div", { class: "o-badge" }, props.children ? props.children[0] : h("slot", null));
};
Badge.css = css;
Badge.defaultProps = {
x: 0,
y: 0
};
Badge.propTypes = {
dot: Boolean,
content: String,
x: Number,
y: Number
};
Badge = __decorate([
tag('o-badge')
], Badge);
return Badge;
}(WeElement));
export default Badge;
//# sourceMappingURL=index.esm.js.map

1
components/badge/src/index.esm.js.map Normal file
View File

File diff suppressed because one or more lines are too long

435
components/badge/src/index.js
View File

@ -4,10 +4,10 @@
else if(typeof define === 'function' && define.amd)
define(["omi"], factory);
else if(typeof exports === 'object')
exports["MBadge"] = factory(require("omi"));
exports["OBadge"] = factory(require("omi"));
else
root["MBadge"] = factory(root["Omi"]);
})(window, function(__WEBPACK_EXTERNAL_MODULE_omi__) {
root["OBadge"] = factory(root["Omi"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_omi__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
@ -91,34 +91,34 @@ return /******/ (function(modules) { // webpackBootstrap
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./src/badge/index.tsx");
/******/ 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/badge/index.scss":
/*!*******************************************************************************************************************************************!*\
!*** ./node_modules/css-loader!./node_modules/resolve-url-loader!./node_modules/sass-loader/dist/cjs.js??ref--4-3!./src/badge/index.scss ***!
\*******************************************************************************************************************************************/
/***/ "./node_modules/_css-loader@1.0.1@css-loader/index.js!./node_modules/_resolve-url-loader@3.1.1@resolve-url-loader/index.js!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js?!./src/index.scss":
/*!****************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/_css-loader@1.0.1@css-loader!./node_modules/_resolve-url-loader@3.1.1@resolve-url-loader!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js??ref--4-3!./src/index.scss ***!
\****************************************************************************************************************************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(/*! ../../node_modules/css-loader/lib/css-base.js */ "./node_modules/css-loader/lib/css-base.js")(false);
exports = module.exports = __webpack_require__(/*! ../node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js */ "./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js")(false);
// imports
// module
exports.push([module.i, ".m-badge {\n position: relative;\n display: inline-block; }\n\n.badge {\n background-color: #F95050;\n color: #FFFFFF;\n line-height: 1.2;\n top: 0;\n right: 0;\n height: 20px;\n display: flex;\n padding: 0 4px;\n z-index: 1;\n position: absolute;\n flex-wrap: wrap;\n font-size: 0.75rem;\n min-width: 20px;\n transform: scale(1) translate(50%, -50%);\n box-sizing: border-box;\n transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n align-items: center;\n font-family: \"Roboto\", \"Helvetica\", \"Arial\", sans-serif;\n font-weight: 500;\n align-content: center;\n border-radius: 10px;\n flex-direction: row;\n justify-content: center;\n transform-origin: 100% 0%; }\n\n.circle {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n min-width: 8px;\n padding: 0; }\n", ""]);
exports.push([module.i, ".o-badge {\n position: relative;\n display: inline-block; }\n\n.badge {\n background-color: #F95050;\n color: #FFFFFF;\n line-height: 1.2;\n top: 0;\n right: 0;\n height: 20px;\n display: flex;\n padding: 0 4px;\n z-index: 1;\n position: absolute;\n flex-wrap: wrap;\n font-size: 0.75rem;\n min-width: 20px;\n transform: scale(1) translate(50%, -50%);\n box-sizing: border-box;\n transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n align-items: center;\n font-family: \"Roboto\", \"Helvetica\", \"Arial\", sans-serif;\n font-weight: 500;\n align-content: center;\n border-radius: 10px;\n flex-direction: row;\n justify-content: center;\n transform-origin: 100% 0%; }\n\n.circle {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n min-width: 8px;\n padding: 0; }\n", ""]);
// exports
/***/ }),
/***/ "./node_modules/css-loader/lib/css-base.js":
/*!*************************************************!*\
!*** ./node_modules/css-loader/lib/css-base.js ***!
\*************************************************/
/***/ "./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js":
/*!*******************************************************************!*\
!*** ./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js ***!
\*******************************************************************/
/*! no static exports found */
/***/ (function(module, exports) {
@ -202,15 +202,15 @@ function toComment(sourceMap) {
/***/ }),
/***/ "./src/badge/index.scss":
/*!******************************!*\
!*** ./src/badge/index.scss ***!
\******************************/
/***/ "./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/badge/index.scss");
var result = __webpack_require__(/*! !../node_modules/_css-loader@1.0.1@css-loader!../node_modules/_resolve-url-loader@3.1.1@resolve-url-loader!../node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js??ref--4-3!./index.scss */ "./node_modules/_css-loader@1.0.1@css-loader/index.js!./node_modules/_resolve-url-loader@3.1.1@resolve-url-loader/index.js!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js?!./src/index.scss");
if (typeof result === "string") {
module.exports = result;
@ -221,10 +221,10 @@ function toComment(sourceMap) {
/***/ }),
/***/ "./src/badge/index.tsx":
/*!*****************************!*\
!*** ./src/badge/index.tsx ***!
\*****************************/
/***/ "./src/index.tsx":
/*!***********************!*\
!*** ./src/index.tsx ***!
\***********************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
@ -262,10 +262,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
};
Object.defineProperty(exports, "__esModule", { value: true });
var omi_1 = __webpack_require__(/*! omi */ "omi");
var css = __webpack_require__(/*! ./index.scss */ "./src/badge/index.scss");
__webpack_require__(/*! ../icon */ "./src/icon/index.js");
//@ts-ignore
__webpack_require__(/*! ../theme.ts */ "./src/theme.ts");
var css = __webpack_require__(/*! ./index.scss */ "./src/index.scss");
var Badge = /** @class */ (function (_super) {
__extends(Badge, _super);
function Badge() {
@ -277,16 +274,16 @@ var Badge = /** @class */ (function (_super) {
};
Badge.prototype.render = function (props) {
if (props.content) {
return omi_1.h("div", __assign({}, omi_1.extractClass(props, 'm-badge')),
return omi_1.h("div", __assign({}, omi_1.extractClass(props, 'o-badge')),
props.children ? props.children[0] : omi_1.h("slot", null),
omi_1.h("span", { class: "badge", style: "right:" + props.x * -1 + "px;top:" + props.y + "px;" }, props.content));
}
if (props.dot) {
return (omi_1.h("div", { class: "m-badge" },
return (omi_1.h("div", { class: "o-badge" },
props.children ? props.children[0] : omi_1.h("slot", null),
omi_1.h("span", { style: "right:" + props.x * -1 + "px;top:" + props.y + "px;", class: "circle badge" })));
}
return omi_1.h("div", { class: "m-badge" }, props.children ? props.children[0] : omi_1.h("slot", null));
return omi_1.h("div", { class: "o-badge" }, props.children ? props.children[0] : omi_1.h("slot", null));
};
Badge.css = css;
Badge.defaultProps = {
@ -300,389 +297,13 @@ var Badge = /** @class */ (function (_super) {
y: Number
};
Badge = __decorate([
omi_1.tag('m-badge')
omi_1.tag('o-badge')
], Badge);
return Badge;
}(omi_1.WeElement));
exports.default = Badge;
/***/ }),
/***/ "./src/icon/index.js":
/*!***************************!*\
!*** ./src/icon/index.js ***!
\***************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
(function webpackUniversalModuleDefinition(root, factory) {
if (true)
module.exports = factory(__webpack_require__(/*! omi */ "omi"));
else {}
})(window, function (__WEBPACK_EXTERNAL_MODULE_omi__) {
return /******/ (function (modules) {
/******/ // 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/icon/index.tsx");
/******/
})({
/***/ "./node_modules/_css-loader@1.0.1@css-loader/index.js!./node_modules/_resolve-url-loader@3.1.0@resolve-url-loader/index.js!./node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js?!./src/icon/index.scss":
/*!***********************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/_css-loader@1.0.1@css-loader!./node_modules/_resolve-url-loader@3.1.0@resolve-url-loader!./node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js??ref--4-3!./src/icon/index.scss ***!
\***********************************************************************************************************************************************************************************************************/
/*! no static exports found */
/***/ (function (module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(/*! ../../node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js */ "./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js")(false);
// imports
// module
exports.push([module.i, ":host {\n display: inline-block; }\n\n.m-icon {\n text-align: center;\n display: inline-block; }\n\n.m-icon svg {\n display: inline-block;\n vertical-align: top; }\n\n.rotate {\n display: inline-block;\n -webkit-animation: rotate 1s infinite linear;\n animation: rotate 1s infinite linear; }\n\ni div {\n font-style: normal; }\n\n@-webkit-keyframes rotate {\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg); } }\n\n@keyframes rotate {\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg); } }\n", ""]);
// exports
/***/
}),
/***/ "./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js":
/*!*******************************************************************!*\
!*** ./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js ***!
\*******************************************************************/
/*! no static exports found */
/***/ (function (module, exports) {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
// css base code, injected by the css-loader
module.exports = function (useSourceMap) {
var list = [];
// return the list of modules as css string
list.toString = function toString() {
return this.map(function (item) {
var content = cssWithMappingToString(item, useSourceMap);
if (item[2]) {
return "@media " + item[2] + "{" + content + "}";
}
else {
return content;
}
}).join("");
};
// import a list of modules into the list
list.i = function (modules, mediaQuery) {
if (typeof modules === "string")
modules = [[null, modules, ""]];
var alreadyImportedModules = {};
for (var i = 0; i < this.length; i++) {
var id = this[i][0];
if (typeof id === "number")
alreadyImportedModules[id] = true;
}
for (i = 0; i < modules.length; i++) {
var item = modules[i];
// skip already imported module
// this implementation is not 100% perfect for weird media query combinations
// when a module is imported multiple times with different media queries.
// I hope this will never occur (Hey this way we have smaller bundles)
if (typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
if (mediaQuery && !item[2]) {
item[2] = mediaQuery;
}
else if (mediaQuery) {
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
}
list.push(item);
}
}
};
return list;
};
function cssWithMappingToString(item, useSourceMap) {
var content = item[1] || '';
var cssMapping = item[3];
if (!cssMapping) {
return content;
}
if (useSourceMap && typeof btoa === 'function') {
var sourceMapping = toComment(cssMapping);
var sourceURLs = cssMapping.sources.map(function (source) {
return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */';
});
return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
}
return [content].join('\n');
}
// Adapted from convert-source-map (MIT)
function toComment(sourceMap) {
// eslint-disable-next-line no-undef
var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;
return '/*# ' + data + ' */';
}
/***/
}),
/***/ "./src/icon/index.scss":
/*!*****************************!*\
!*** ./src/icon/index.scss ***!
\*****************************/
/*! no static exports found */
/***/ (function (module, exports, __webpack_require__) {
var result = __webpack_require__(/*! !../../node_modules/_css-loader@1.0.1@css-loader!../../node_modules/_resolve-url-loader@3.1.0@resolve-url-loader!../../node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js??ref--4-3!./index.scss */ "./node_modules/_css-loader@1.0.1@css-loader/index.js!./node_modules/_resolve-url-loader@3.1.0@resolve-url-loader/index.js!./node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js?!./src/icon/index.scss");
if (typeof result === "string") {
module.exports = result;
}
else {
module.exports = result.toString();
}
/***/
}),
/***/ "./src/icon/index.tsx":
/*!****************************!*\
!*** ./src/icon/index.tsx ***!
\****************************/
/*! no static exports found */
/***/ (function (module, exports, __webpack_require__) {
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function (t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if (d = decorators[i])
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var omi_1 = __webpack_require__(/*! omi */ "omi");
var css = __webpack_require__(/*! ./index.scss */ "./src/icon/index.scss");
//@ts-ignore
__webpack_require__(/*! ../theme.ts */ "./src/theme.ts");
var Icon = /** @class */ (function (_super) {
__extends(Icon, _super);
function Icon() {
return _super !== null && _super.apply(this, arguments) || this;
}
Icon.prototype.render = function (props) {
return (omi_1.h("i", __assign({}, omi_1.extractClass(props, 'm-icon')), omi_1.h("svg", { viewBox: '0 0 ' + props.view + ' ' + props.view, class: omi_1.classNames({ rotate: props.rotate }), width: props.scale + 'em', height: props.scale + 'em', fill: props.color, "aria-hidden": "true" }, props.paths ? (props.paths.map(function (item) {
var attrs = { d: item.path, fill: props.color || 'black' };
if (item.color)
attrs.fill = item.color;
return omi_1.h("path", __assign({}, attrs));
})) : omi_1.h("path", { d: props.path })), props.children && (omi_1.h("div", { style: "color:" + (props.color || 'black') + ";" }, props.children[0]))));
};
Icon.css = css;
Icon.defaultProps = {
view: 1024,
scale: 2
};
Icon.propTypes = {
path: String,
paths: Object,
view: Number,
scale: Number,
color: String,
rotate: Boolean
};
Icon = __decorate([
omi_1.tag('m-icon')
], Icon);
return Icon;
}(omi_1.WeElement));
exports.default = Icon;
/***/
}),
/***/ "./src/theme.ts":
/*!**********************!*\
!*** ./src/theme.ts ***!
\**********************/
/*! no static exports found */
/***/ (function (module, exports) {
theme();
document.addEventListener('DOMContentLoaded', function () {
theme();
});
function theme() {
if (document.body && !document.body.style.getPropertyValue('--mdc-theme-primary')) {
document.body.style.setProperty('--mdc-theme-primary', '#0072d9');
document.body.style.setProperty('--mdc-theme-secondary', '#2170b8');
document.body.style.setProperty('--mdc-theme-error', '#f5222d');
document.body.style.setProperty('--mdc-theme-surface', '#ffffff');
document.body.style.setProperty('--mdc-theme-on-primary', '#ffffff');
document.body.style.setProperty('--mdc-theme-on-secondary', '#ffffff');
document.body.style.setProperty('--mdc-theme-on-error', '#ffffff');
document.body.style.setProperty('--mdc-theme-on-surface', '#000000');
document.body.style.setProperty('--mdc-theme-background', '#ffffff');
document.body.style.setProperty('--mdc-shape-small-component-radius', '4px');
document.body.style.setProperty('--mdc-shape-medium-component-radius', '4px');
document.body.style.setProperty('--mdc-shape-large-component-radius', '0px');
document.body.style.setProperty('--mdc-typography--font-family', 'Roboto, sans-serif');
}
}
/***/
}),
/***/ "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
/***/ }),
/***/ "./src/theme.ts":
/*!**********************!*\
!*** ./src/theme.ts ***!
\**********************/
/*! no static exports found */
/***/ (function(module, exports) {
theme();
document.addEventListener('DOMContentLoaded', function () {
theme();
});
function theme() {
if (document.body && !document.body.style.getPropertyValue('--mdc-theme-primary')) {
document.body.style.setProperty('--mdc-theme-primary', '#0072d9');
document.body.style.setProperty('--mdc-theme-secondary', '#2170b8');
document.body.style.setProperty('--mdc-theme-error', '#f5222d');
document.body.style.setProperty('--mdc-theme-surface', '#ffffff');
document.body.style.setProperty('--mdc-theme-on-primary', '#ffffff');
document.body.style.setProperty('--mdc-theme-on-secondary', '#ffffff');
document.body.style.setProperty('--mdc-theme-on-error', '#ffffff');
document.body.style.setProperty('--mdc-theme-on-surface', '#000000');
document.body.style.setProperty('--mdc-theme-background', '#ffffff');
document.body.style.setProperty('--mdc-shape-small-component-radius', '4px');
document.body.style.setProperty('--mdc-shape-medium-component-radius', '4px');
document.body.style.setProperty('--mdc-shape-large-component-radius', '0px');
document.body.style.setProperty('--mdc-typography--font-family', 'Roboto, sans-serif');
}
}
/***/ }),
/***/ "omi":

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

File diff suppressed because one or more lines are too long

6
components/badge/src/index.scss
View File

@ -1,8 +1,8 @@
@import "../theme.scss";
@import "@omiu/common/theme.scss";
.m-badge {
.o-badge {
position: relative;
display: inline-block;
}
@ -45,4 +45,4 @@
border-radius: 50%;
min-width: 8px;
padding: 0;
}
}

11
components/badge/src/index.tsx
View File

@ -1,8 +1,5 @@
import { tag, h, WeElement, extractClass } from 'omi'
import * as css from './index.scss'
import '../icon'
//@ts-ignore
import '../theme.ts'
interface Props {
dot?: boolean,
@ -12,7 +9,7 @@ interface Props {
}
@tag('m-badge')
@tag('o-badge')
export default class Badge extends WeElement<Props>{
static css = css
@ -40,7 +37,7 @@ export default class Badge extends WeElement<Props>{
render(props) {
if (props.content) {
return <div {...extractClass(props, 'm-badge')}>
return <div {...extractClass(props, 'o-badge')}>
{props.children ? props.children[0] : <slot></slot>}
<span class="badge" style={`right:${props.x * -1}px;top:${props.y}px;`}>{props.content}</span>
</div>
@ -48,13 +45,13 @@ export default class Badge extends WeElement<Props>{
if (props.dot) {
return (
<div class="m-badge">
<div class="o-badge">
{props.children ? props.children[0] : <slot></slot>}
<span style={`right:${props.x * -1}px;top:${props.y}px;`} class="circle badge"></span>
</div>
)
}
return <div class="m-badge">{props.children ? props.children[0] : <slot></slot>}</div>
return <div class="o-badge">{props.children ? props.children[0] : <slot></slot>}</div>
}
}

49
components/docs-src/src/docs/en/badge.md Normal file
View File

@ -0,0 +1,49 @@
## Badge
Mark in the upper right corner of the icon
<iframe height="351" style="width: 100%;" scrolling="no" title="OMIU Badge" src="https://codepen.io/omijs/embed/WNQOdaB?height=351&theme-id=default&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
See the Pen <a href='https://codepen.io/omijs/pen/WNQOdaB'>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 '@omiu/badge'
```
Or use script tag to ref it.
```html
<script src="https://unpkg.com/@omiu/badge"></script>
```
## Usage
```html
<o-badge></o-badge>
```
## API
### Props
```tsx
{
dot?: boolean,
content?: string,
x?: number,
y?: number
}
```
### 默认属性
```tsx
{
x: 0,
y: 0
)
```

49
components/docs-src/src/docs/zh-cn/badge.md Normal file
View File

@ -0,0 +1,49 @@
## Badge 徽章
图标右上角的标记
<iframe height="351" style="width: 100%;" scrolling="no" title="OMIU Badge" src="https://codepen.io/omijs/embed/WNQOdaB?height=351&theme-id=default&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
See the Pen <a href='https://codepen.io/omijs/pen/WNQOdaB'>OMIU Checkbox</a> by OMI
(<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
## 导入
```js
import '@omiu/badge'
```
或者直接 script 标签引入。
```html
<script src="https://unpkg.com/@omiu/badge"></script>
```
## 使用
```html
<o-badge> </o-badge>
```
## API
### 属性
```tsx
{
dot?: boolean,
content?: string,
x?: number,
y?: number
}
```
### 默认属性
```tsx
{
x: 0,
y: 0
)
```