{"id":14990388,"url":"https://github.com/wu-component/web-component-plus","last_synced_at":"2025-04-05T09:04:49.093Z","repository":{"id":37017213,"uuid":"482439904","full_name":"wu-component/web-component-plus","owner":"wu-component","description":"采用WebComponent方式重写ElementUI, 仓库中包含核心包以及UI组件库,包括底层逻辑npm包以及UI实现","archived":false,"fork":false,"pushed_at":"2023-12-11T14:56:49.000Z","size":12923,"stargazers_count":221,"open_issues_count":1,"forks_count":38,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-03-29T08:07:37.372Z","etag":null,"topics":["element","typescript","virtual-dom","web","webcomponents"],"latest_commit_sha":null,"homepage":"https://wu-component.github.io/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wu-component.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-17T05:54:31.000Z","updated_at":"2025-01-17T16:06:57.000Z","dependencies_parsed_at":"2024-06-18T22:58:07.546Z","dependency_job_id":null,"html_url":"https://github.com/wu-component/web-component-plus","commit_stats":{"total_commits":205,"total_committers":3,"mean_commits":68.33333333333333,"dds":"0.42439024390243907","last_synced_commit":"c12acbc6b6751dd2f1156d32e3582623d190e932"},"previous_names":[],"tags_count":67,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wu-component%2Fweb-component-plus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wu-component%2Fweb-component-plus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wu-component%2Fweb-component-plus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wu-component%2Fweb-component-plus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wu-component","download_url":"https://codeload.github.com/wu-component/web-component-plus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247312068,"owners_count":20918344,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["element","typescript","virtual-dom","web","webcomponents"],"created_at":"2024-09-24T14:20:01.983Z","updated_at":"2025-04-05T09:04:49.012Z","avatar_url":"https://github.com/wu-component.png","language":"TypeScript","readme":"## web-component-ui\n\n[中文官网](https://wu.canyuegongzi.xyz/)\n[英文官网](https://wu-component.github.io/)\n\nweb-plus-ui 是一套基于 webComponent 的 UI 组件库，目前尚在开发阶段，其中样式基于 elementUI。\nweb-core-plus 是核心代码包，其中利用虚拟dom 实现了 WebComponent 的渲染;\n\n### 如何开发 WebComponent 组件\n\n#### 自定义标签\n\n```tsx\nimport { h, Component, Prop } from \"@wu-component/web-core-plus\";\nimport css from './index.scss';\nimport { UISize } from \"@/interface\";\nimport { extractClass } from \"@/common\";\ntype WuButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info'\ntype NativeType = 'button' | 'submit' | 'reset'\n\n@Component({\n    name: 'wu-plus-button',\n    css: css\n})\nexport class WuButton extends HTMLElement {\n    constructor() {\n        super();\n    }\n\n    @Prop({ default: 'primary', type: String })\n    public type: WuButtonType;\n\n    @Prop({ default: 'mini', type: String })\n    public size: UISize;\n\n    @Prop({ default: false, type: Boolean })\n    public plain: boolean;\n\n    @Prop({ default: false, type: Boolean })\n    public round: boolean;\n\n    @Prop({ default: false, type: Boolean })\n    public circle: boolean;\n\n    @Prop({ default: false, type: Boolean })\n    public loading: boolean;\n\n    @Prop({ default: false, type: Boolean })\n    public disabled: boolean;\n\n    @Prop({ default: '', type: String })\n    public icon: string;\n\n    @Prop({ default: 'button', type: String })\n    public nativeType: NativeType;\n\n    @Prop({ default: '', type: String })\n    public text: string;\n\n\n    public render(_renderProps= {}, _store = {}) {\n        return(\n            \u003cbutton\n                disabled={this.disabled}\n                {...extractClass({}, 'wu-button', {\n                    ['wu-button-' + this.type]: this.type,\n                    ['wu-button-' + this.size]: this.size,\n                    'is-plain': this.plain,\n                    'is-round': this.round,\n                    'is-circle': this.circle,\n                    'is-disabled': this.disabled\n                })}\n                type={this.nativeType}\n            \u003e\n                {this.loading \u0026\u0026 [\n                    \u003csvg\n                        class=\"loading\"\n                        viewBox=\"0 0 1024 1024\"\n                        focusable=\"false\"\n                        data-icon=\"loading\"\n                        width=\"1em\"\n                        height=\"1em\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                    \u003e\n                        \u003cpath 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\"/\u003e\n                    \u003c/svg\u003e,\n                    ' ',\n                ]}\n                {this.text}\n                \u003cslot/\u003e\n            \u003c/button\u003e\n        );\n    }\n}\n```\n\n\n\n\n#### 使用标签\n\n```html\n\u003cdiv\u003e\n    \u003cwu-plus-button id=\"testDom2\" type=\"primary\"\u003e按钮\u003c/wu-plus-button\u003e\n    \u003cwu-plus-button id=\"testDom3\" type=\"success\"\u003e按钮\u003c/wu-plus-button\u003e\n    \u003cwu-plus-button id=\"testDom4\" type=\"info\"\u003e按钮\u003c/wu-plus-button\u003e\n\u003c/div\u003e\n\n```\n\n### 参与开发\n\n#### 依赖安装\n\n```bin\n// 核心包、路由插件依赖安装\npnpm install\n// 组件库以来安装\ncd ./packages/web-core-ui\npnpm install\n```\n\n#### 构建\n```\n// 核心包构建\ncd web-core-plus\npnpm run build:rollup\n\n// 路由插件构建\ncd web-core-router\npnpm run build:rollup\n\n// 组件库构建\ncd web-core-ui\npnpm run build:ui\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwu-component%2Fweb-component-plus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwu-component%2Fweb-component-plus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwu-component%2Fweb-component-plus/lists"}