# @wu-component/web-core-plus

> > TODO: description

Latest version **2.1.0-beta.1** (published 2024-04-04) · ISC license · 0 weekly downloads

## Install

```sh
npm install @wu-component/web-core-plus
pnpm add @wu-component/web-core-plus
yarn add @wu-component/web-core-plus
bun add @wu-component/web-core-plus
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0-beta.1 |
| Published | 2024-04-04 |
| First published | 2022-08-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 10 |
| Dependencies | 4 |
| Unpacked size | 584.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 218 |
| Author | Marvin |
| Maintainers | canyuegongzi |

## Links

- npm: https://www.npmjs.com/package/@wu-component/web-core-plus
- Repository: https://github.com/wu-component/web-component-plus
- Homepage: https://github.com/wu-component/web-component-plus#readme
- Issues: https://github.com/wu-component/web-component-plus/issues
- npm.io page: https://npm.io/package/@wu-component/web-core-plus

## Dependencies (4)

- [preact](https://npm.io/package/preact.md) ^10.12.1
- [weakmap-polyfill](https://npm.io/package/weakmap-polyfill.md) 2.0.4
- [@abraham/reflection](https://npm.io/package/@abraham/reflection.md) ^0.10.0
- [construct-style-sheets-polyfill](https://npm.io/package/construct-style-sheets-polyfill.md) ^3.1.0

## Recent versions

- 2.1.0-beta.1 (latest) — 2024-04-04
- 2.0.3 (next) — 2023-03-05
- 2.0.4 — 2023-12-10
- 2.0.2 — 2023-03-05
- 2.0.1 — 2023-02-26
- 2.0.0 — 2023-02-26
- 0.3.42 — 2023-02-26
- 0.3.41 — 2023-02-25
- 0.3.40 — 2023-02-25
- 0.3.39 — 2023-02-24
- 0.3.38 — 2023-02-24
- 0.3.37 — 2023-02-24
- 0.3.36 — 2023-02-22
- 0.3.35 — 2023-02-22
- 0.3.34 — 2023-02-22
- … 41 more at https://npm.io/package/@wu-component/web-core-plus/versions

## README

## Install 安装

## 快速创建


需要提前全局安装 t-cli 脚手架，关于 wu-cli 详见 [使用指南](https://www.npmjs.com/package/@wu-component/wu-cli) 。

```bash

wu init-web-component test-web-core-component

```

### 开发构建


### 开发

该命令用于本地启动一个热更新的服务，用于本地开发。

```bash

npm run dev:package

```

### 构建

该命令用于打包 webComponent， 该命令会构建出 umd、es、cjs 三种格式的产物，umd 格式可以直接在浏览器中预览效果。

```bash

npm run build:package

```

### 预览

该命令用于预览效果，浏览器默认打开根目录 index.html 文件， index.html 按需要修改，

```bash

npm run example:package

```

## 手动依赖

开发者可以根据需要手动安装依赖，相关 [Api]( https://wu-component.github.io/frame/CorePlus/Decorators.html) 。

```bash
npm install @wu-component/web-core-plus --save
```
## 示例如下：

```
import { h, Component, Prop, WuComponent } from '@wu-component/web-core-plus';
import css from './index.scss';
import { extractClass } from '@wu-component/common';
type WuButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info';
type NativeType = 'button' | 'submit' | 'reset';
type UISize = 'medium' | 'small' | 'mini';

@Component({
    name: 'wu-plus-button',
    css: css,
})
export class WuButton extends WuComponent {
    constructor() {
        super();
    }

    @Prop({ default: 'primary', type: String })
    public type: WuButtonType;

    @Prop({ default: 'mini', type: String })
    public size: UISize;

    @Prop({ default: false, type: Boolean })
    public plain: boolean;

    @Prop({ default: false, type: Boolean })
    public round: boolean;

    @Prop({ default: false, type: Boolean })
    public circle: boolean;

    @Prop({ default: false, type: Boolean })
    public loading: boolean;

    @Prop({ default: false, type: Boolean })
    public disabled: boolean;

    @Prop({ default: '', type: String })
    public icon: string;

    @Prop({ default: 'button', type: String })
    public nativeType: NativeType;

    @Prop({ default: '', type: String })
    public text: string;

    public override render(_renderProps = {}, _store = {}) {
        return (
            <button
                disabled={this.disabled}
                {...extractClass({}, 'wu-button', {
                    ['wu-button-' + this.type]: this.type,
                    ['wu-button-' + this.size]: this.size,
                    'is-plain': this.plain,
                    'is-round': this.round,
                    'is-circle': this.circle,
                    'is-disabled': this.disabled,
                })}
                type={this.nativeType}
            >
                {this.loading && [
                    <svg class="loading" viewBox="0 0 1024 1024" focusable="false" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                        <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" />
                    </svg>,
                    ' ',
                ]}
                {this.text}
                <slot />
            </button>
        );
    }
}


```

---
_Source: https://npm.io/package/@wu-component/web-core-plus · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._