├── .circleci └── config.yml ├── .gitattributes ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── config.yml │ ├── issue_template_bug.yml │ └── issue_template_suggest.yml ├── SECURITY.md ├── boomper.yml ├── codecov.yml ├── dependabot.yml ├── release-drafter.yml ├── renovate.json └── workflows │ ├── clear.yml │ ├── main.yml │ └── publish.yml ├── .gitignore ├── .husky ├── commit-msg ├── pre-commit └── pre-push ├── .npmrc ├── .travis.yml ├── .vscode └── launch.json ├── LICENSE ├── README.md ├── assets └── logo.jpeg ├── commitlint.config.js ├── package.json ├── packages ├── better-ui-docs │ ├── index.html │ └── package.json └── better-ui │ ├── .eslintignore │ ├── .eslintrc.js │ ├── CHANGELOG.md │ ├── config │ └── unocss.ts │ ├── docs │ ├── .vitepress │ │ ├── config.ts │ │ └── theme │ │ │ └── index.ts │ ├── components │ │ ├── button │ │ │ └── index.md │ │ ├── icon │ │ │ └── index.md │ │ └── index.md │ ├── guide │ │ └── index.md │ ├── index.md │ ├── public │ │ ├── logo.png │ │ └── logo.svg │ ├── resource │ │ └── index.md │ ├── theme │ │ └── index.md │ └── vite.config.ts │ ├── index.html │ ├── package.json │ ├── server │ ├── doc.js │ └── ui.js │ ├── src │ ├── button │ │ ├── Button.tsx │ │ ├── __tests__ │ │ │ └── button.spec.ts │ │ └── index.ts │ ├── entry.ts │ ├── icon │ │ ├── Icon.tsx │ │ └── index.ts │ ├── index.ts │ └── shims-vue.d.ts │ ├── tsconfig.json │ └── vite.config.ts ├── pnpm-workspace.yaml ├── scripts └── preinstall.js └── tea.yaml /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | # This config is equivalent to both the '.circleci/extended/orb-free.yml' and the base '.circleci/config.yml' 2 | version: 2.1 3 | 4 | # Orbs are reusable packages of CircleCI configuration that you may share across projects, enabling you to create encapsulated, parameterized commands, jobs, and executors that can be used across multiple projects. 5 | # See: https://circleci.com/docs/2.0/orb-intro/ 6 | orbs: 7 | node: circleci/node@4.7.0 8 | 9 | # Invoke jobs via workflows 10 | # See: https://circleci.com/docs/2.0/configuration-reference/#workflows 11 | workflows: 12 | sample: # This is the name of the workflow, feel free to change it to better match your workflow. 13 | # Inside the workflow, you define the jobs you want to run. 14 | jobs: 15 | - node/test: 16 | # This is the node version to use for the `cimg/node` tag 17 | # Relevant tags can be found on the CircleCI Developer Hub 18 | # https://circleci.com/developer/images/image/cimg/node 19 | version: '16.10' 20 | # If you are using yarn, change the line below from "npm" to "yarn" 21 | pkg-manager: yarn 22 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.html text eol=lf 2 | *.css text eol=lf 3 | *.js text eol=lf 4 | *.scss text eol=lf 5 | *.vue text eol=lf 6 | *.hbs text eol=lf 7 | *.sh text eol=lf 8 | *.md text eol=lf 9 | *.json text eol=lf 10 | *.yml text eol=lf 11 | .browserslistrc text eol=lf 12 | .editorconfig text eol=lf 13 | .eslintignore text eol=lf 14 | .gitattributes text eol=lf 15 | LICENSE text eol=lf 16 | *.conf text eol=lf 17 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | custom: https://better-h7ml.vercel.app/ 4 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: better-ui issues template 4 | url: https://github.com/better-ui 5 | about: better-ui 6 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/issue_template_bug.yml: -------------------------------------------------------------------------------- 1 | name: 提交 Bug（Bug Report） 2 | description: 请告诉我APP存在的问题，我尽力修复它！（Please tell me the problem with the APP and I will try my best to fix it!） 3 | title: "[Bug]: " 4 | labels: ["bug"] 5 | assignees: 6 | - h7ml 7 | body: 8 | - type: markdown 9 | attributes: 10 | value: | 11 | 警告：请务必按照 issue 模板填写，避免浪费你我的时间！没有按照模板认真填写，一律直接关闭！ 12 | Warning: Please fill in according to the issue template to avoid wasting your time and mine! If you do not fill in the template carefully, it will be closed directly. 13 | - type: dropdown 14 | id: similar-issues 15 | attributes: 16 | label: 是否有人曾提过类似的问题 17 | description: Whether someone has raised similar issues 18 | options: 19 | - 否（No） 20 | - 是（Yes） 21 | validations: 22 | required: true 23 | - type: dropdown 24 | id: latest-version 25 | attributes: 26 | label: 升级到最新的版本是否存在这个问题 27 | description: Is there this problem when upgrading to the latest version 28 | options: 29 | - 否（No） 30 | - 是（Yes） 31 | validations: 32 | required: true 33 | - type: dropdown 34 | id: read-wiki 35 | attributes: 36 | label: 是否已经查阅Wiki文档还未能解决的 37 | description: Whether you have consulted the Wiki documentation that has not been resolved 38 | options: 39 | - 否（No） 40 | - 是（Yes） 41 | validations: 42 | required: true 43 | - type: input 44 | id: app-version 45 | attributes: 46 | label: APP版本 47 | description: APP Version 48 | placeholder: v3.x.x 49 | validations: 50 | required: true 51 | - type: textarea 52 | id: problem 53 | attributes: 54 | label: 问题描述 55 | description: Description of the problem 56 | placeholder: 你可以描述APP有什么令你不满意的地方（You can describe what dissatisfied you about the app） 57 | validations: 58 | required: true 59 | - type: textarea 60 | id: reproduction-steps 61 | attributes: 62 | label: 复现步骤 63 | description: Reproduction steps 64 | placeholder: 注意：目前不受理没有复现步骤的 Bug 单 (Note：Bug tickets without reproduction steps are currently not accepted) 65 | validations: 66 | required: true 67 | - type: dropdown 68 | id: required 69 | attributes: 70 | label: 是否必现 71 | description: Whether it is required 72 | options: 73 | - 否（No） 74 | - 是（Yes） 75 | validations: 76 | required: true 77 | - type: input 78 | id: brand-model 79 | attributes: 80 | label: 出现问题的信息 81 | description: The information with the problem 82 | placeholder: 请填写出现问题的品牌和机型（Please fill in the brand and model of the problem） 83 | validations: 84 | required: true 85 | - type: input 86 | id: version 87 | attributes: 88 | label: 出现问题的版本、系统版本 89 | description: Android version, system version in question 90 | placeholder: 例如：Android 12、MIUI 13 91 | validations: 92 | required: true 93 | - type: textarea 94 | id: screenshots 95 | attributes: 96 | label: 提供截图或视频 97 | description: Provide screenshots or videos 98 | placeholder: 如果有报错的话必填 (if there is an error, please fill in) 99 | - type: textarea 100 | id: stack 101 | attributes: 102 | label: 提供报错堆栈 103 | description: Provide a stack trace 104 | placeholder: 根据需要提供，此项不强制 (as needed, this is not mandatory) 105 | - type: textarea 106 | id: solution 107 | attributes: 108 | label: 提供解决方案 109 | description: Provide a solution 110 | placeholder: 如果已经解决了的话可以写下你的解决方法，此项不强制 (if it has been solved, this is not mandatory) 111 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/issue_template_suggest.yml: -------------------------------------------------------------------------------- 1 | name: 提交建议（Submit a suggestion） 2 | description: 请告诉我的不足之处，让我做得更好！（Please tell me the shortcomings of the let me do better!） 3 | title: "[Suggestion]: " 4 | labels: ["help wanted"] 5 | assignees: 6 | - h7ml 7 | body: 8 | - type: markdown 9 | attributes: 10 | value: | 11 | 警告：请务必按照 issue 模板填写，避免浪费你我的时间！没有按照模板认真填写，一律直接关闭！ 12 | Warning: Please fill in according to the issue template to avoid wasting your time and mine! If you do not fill in the template carefully, it will be closed directly. 13 | - type: dropdown 14 | id: similar-issues 15 | attributes: 16 | label: 是否有人曾提过类似的问题？ 17 | description: Has anyone asked a similar question before? 18 | options: 19 | - 否（No） 20 | - 是（Yes） 21 | validations: 22 | required: true 23 | - type: textarea 24 | id: suggestion 25 | attributes: 26 | label: 你觉得APP有什么不足之处？ 27 | description: What do you think is the inadequacy of the APP? 28 | placeholder: 你可以描述APP有什么令你不满意的地方（You can describe what dissatisfied you about the app） 29 | validations: 30 | required: true 31 | - type: textarea 32 | id: ideas 33 | attributes: 34 | label: 你觉得该怎么去完善会比较好？【非必答】 35 | description: What do you think would be better to improve? 【Not required】 36 | placeholder: 你可以提供一下自己的想法或者做法供作者参考（You can provide your own ideas or practices for the author's reference） 37 | -------------------------------------------------------------------------------- /.github/SECURITY.md: -------------------------------------------------------------------------------- 1 | # 安全报告 Security report 2 | 3 | 如果你发现安全相关漏洞请通过如下任意一种方式告知我们：\ 4 | If you find security-related vulnerabilities, please inform us in any of the following ways: 5 | 6 | - 直接开 Issue（请隐去站点、实际项目等敏感信息）\ 7 | Open Issue directly (please hide sensitive information such as site and actual project) 8 | - 发邮件至 h7ml@qq.com\ 9 | Send an email to h7ml@qq.com 10 | 11 | 非常感谢！\ 12 | Thank you very much! 13 | -------------------------------------------------------------------------------- /.github/boomper.yml: -------------------------------------------------------------------------------- 1 | updates: 2 | - path: README.md 3 | pattern: 'uses = "release-drafter/release-drafter@(.*)"' 4 | -------------------------------------------------------------------------------- /.github/codecov.yml: -------------------------------------------------------------------------------- 1 | coverage: 2 | range: '30...100' 3 | 4 | status: 5 | project: 6 | default: 7 | threshold: 1 8 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | # To get started with Dependabot version updates, you'll need to specify which 2 | # package ecosystems to update and where the package manifests are located. 3 | # Please see the documentation for all configuration options: 4 | # https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates 5 | 6 | version: 2 7 | updates: 8 | - package-ecosystem: 'npm' # See documentation for possible values 9 | directory: '/' # Location of package manifests 10 | open-pull-requests-limit: 20 11 | schedule: 12 | interval: 'daily' 13 | time: '19:00' 14 | timezone: 'Asia/Shanghai' 15 | -------------------------------------------------------------------------------- /.github/release-drafter.yml: -------------------------------------------------------------------------------- 1 | name-template: 'v$RESOLVED_VERSION' 2 | tag-template: 'v$RESOLVED_VERSION' 3 | template: | 4 | # What's Changed 5 | $CHANGES 6 | **Full Changelog**: https://github.com/$OWNER/$REPOSITORY/compare/$PREVIOUS_TAG...v$RESOLVED_VERSION 7 | categories: 8 | - title: 'Breaking' 9 | label: 'type: breaking' 10 | - title: 'New' 11 | label: 'type: feature' 12 | - title: 'Bug Fixes' 13 | label: 'type: bug' 14 | - title: 'Maintenance' 15 | label: 'type: maintenance' 16 | - title: 'Documentation' 17 | label: 'type: docs' 18 | - title: 'Other changes' 19 | - title: 'Dependency Updates' 20 | label: 'type: dependencies' 21 | collapse-after: 5 22 | 23 | version-resolver: 24 | major: 25 | labels: 26 | - 'type: breaking' 27 | minor: 28 | labels: 29 | - 'type: feature' 30 | patch: 31 | labels: 32 | - 'type: bug' 33 | - 'type: maintenance' 34 | - 'type: docs' 35 | - 'type: dependencies' 36 | - 'type: security' 37 | 38 | exclude-labels: 39 | - 'skip-changelog' 40 | -------------------------------------------------------------------------------- /.github/renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["config:base"] 3 | } 4 | -------------------------------------------------------------------------------- /.github/workflows/clear.yml: -------------------------------------------------------------------------------- 1 | name: claer 2 | on: 3 | workflow_dispatch: 4 | inputs: 5 | root_sol: 6 | description: "claer Title" 7 | required: true 8 | default: "claer" 9 | env: 10 | TZ: Asia/Shanghai 11 | 12 | jobs: 13 | clear: 14 | runs-on: ubuntu-latest 15 | steps: 16 | - name: Checkout 🚀 17 | uses: actions/checkout@v2 18 | with: 19 | repository: 'jdsync/Workflows-Cleaner' 20 | - name: Set up Python 🚀 21 | uses: actions/setup-python@v2 22 | with: 23 | python-version: '3.9' 24 | - name: Install pipenv 🚀 25 | env: 26 | GITHUB_REPO: ${{ github.repository }} 27 | GITHUB_TOKEN: ${{ secrets.ACTION_SECRET }} 28 | EXPIRE_TIME: '1h' 29 | run: | 30 | python -m pip install --upgrade pipenv wheel 31 | pipenv install 32 | pipenv run python run.py 33 | - name: Upload coverage to Codecov 🚀 34 | uses: codecov/codecov-action@v1 35 | with: 36 | token: ${{ secrets.CODECOV_TOKEN }} 37 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: main 2 | on: 3 | push: 4 | branches: [master] 5 | workflow_dispatch: 6 | inputs: 7 | root_sol: 8 | description: "Release Title" 9 | required: true 10 | default: "better-ui" 11 | # 设置上海时区 12 | env: 13 | TZ: Asia/Shanghai 14 | 15 | jobs: 16 | sync: 17 | runs-on: ubuntu-latest 18 | steps: 19 | - name: Checkout 🚀 20 | uses: actions/checkout@v2 21 | - name: Sync better-ui 🚀 22 | uses: Yikun/hub-mirror-action@master 23 | with: 24 | src: github/better-ui 25 | dst: gitee/better-ui 26 | dst_key: ${{ secrets.GITEE_PRIVATE_KEY }} 27 | dst_token: ${{ secrets.GITEE_TOKEN }} 28 | # static_list: "better-ui" 29 | account_type: org 30 | needs: deploy 31 | 32 | deploy: 33 | runs-on: ubuntu-latest 34 | steps: 35 | - name: Checkout 🚀 36 | uses: actions/checkout@v3 37 | with: 38 | ref: master 39 | fetch-depth: 0 40 | 41 | - name: Install pnpm 🚀 42 | uses: pnpm/action-setup@v2 43 | with: 44 | version: 7 45 | run_install: true 46 | 47 | - name: Setup Node.js 🚀 48 | uses: actions/setup-node@v3 49 | with: 50 | node-version: 14 51 | cache: pnpm 52 | 53 | - name: Install Deps 🚀 54 | run: pnpm install 55 | 56 | - name: Build project 🚀 57 | env: 58 | NODE_OPTIONS: --max_old_space_size=4096 59 | run: | 60 | cd packages/better-ui 61 | pnpm run docs:build 62 | 63 | - name: copy README.md 64 | run: cp README.md packages/better-ui/docs/.vitepress/dist 65 | 66 | - name: Upload better-ui 🚀 67 | uses: actions/upload-artifact@v2 68 | with: 69 | name: better-ui 70 | path: packages/better-ui/docs/.vitepress/dist 71 | 72 | - name: Deploy to github gh-pages 🚀 73 | uses: JamesIves/github-pages-deploy-action@releases/v3 74 | with: 75 | ACCESS_TOKEN: ${{ secrets.GIT_TOKEN }} 76 | BRANCH: gh-pages 77 | FOLDER: packages/better-ui/docs/.vitepress/dist 78 | 79 | - name: Deploy to surge 🚀 80 | uses: dswistowski/surge-sh-action@v1 81 | with: 82 | domain: "better-ui.surge.sh" 83 | project: packages/better-ui/docs/.vitepress/dist 84 | login: ${{ secrets.surge_login }} 85 | token: ${{ secrets.surge_token }} 86 | 87 | - name: Deploy to gh-pages 🚀 88 | uses: JamesIves/github-pages-deploy-action@v4 89 | with: 90 | repository-name: better-ui/better-ui 91 | branch: gh-pages 92 | folder: packages/better-ui/docs/.vitepress/dist 93 | token: ${{ secrets.ACCESS_TOKEN }} 94 | 95 | - name: Deploy to better-ui pages 🚀 96 | uses: JamesIves/github-pages-deploy-action@v4 97 | with: 98 | repository-name: better-ui/better-ui.github.io 99 | branch: gh-pages 100 | folder: packages/better-ui/docs/.vitepress/dist 101 | token: ${{ secrets.ACCESS_TOKEN }} 102 | 103 | gh-pages: 104 | runs-on: ubuntu-latest 105 | steps: 106 | - name: Build Gitee Pages 🚀 107 | uses: yanglbme/gitee-pages-action@main 108 | with: 109 | # 注意替换为你的 Gitee 用户名 110 | gitee-username: ${{ secrets.GITEE_USERNAME }} 111 | # 注意在 Settings->Secrets 配置 GITEE_PASSWORD 112 | gitee-password: ${{ secrets.GITEE_PASSWORD }} 113 | # 注意替换为你的 Gitee 仓库，仓库名严格区分大小写，请准确填写，否则会出错 114 | gitee-repo: better-ui/better-ui 115 | # 要部署的分支，默认是 master，若是其他分支，则需要指定（指定的分支必须存在） 116 | branch: gh-pages 117 | needs: sync 118 | 119 | clear: 120 | runs-on: ubuntu-latest 121 | steps: 122 | - name: Checkout 🚀 123 | uses: actions/checkout@v2 124 | with: 125 | repository: "jdsync/Workflows-Cleaner" 126 | - name: Set up Python 🚀 127 | uses: actions/setup-python@v2 128 | with: 129 | python-version: "3.9" 130 | - name: Install pipenv 🚀 131 | env: 132 | GITHUB_REPO: ${{ github.repository }} 133 | GITHUB_TOKEN: ${{ secrets.ACTION_SECRET }} 134 | EXPIRE_TIME: "1h" 135 | run: | 136 | python -m pip install --upgrade pipenv wheel 137 | pipenv install 138 | pipenv run python run.py 139 | - name: Upload coverage to Codecov 🚀 140 | uses: codecov/codecov-action@v1 141 | with: 142 | token: ${{ secrets.CODECOV_TOKEN }} 143 | needs: gh-pages 144 | -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | name: publish 2 | 3 | on: 4 | workflow_dispatch: 5 | push: 6 | tags: 7 | - '*' 8 | 9 | jobs: 10 | release: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - uses: actions/checkout@v3 14 | with: 15 | fetch-depth: 0 16 | - name: Set node 17 | uses: actions/setup-node@v3 18 | with: 19 | node-version: 16.x 20 | registry-url: 'https://registry.npmjs.org' 21 | 22 | - name: Setup 23 | run: npm i -g @antfu/ni pnpm 24 | 25 | - run: npx changelogithub 26 | continue-on-error: true 27 | env: 28 | GITHUB_TOKEN: ${{secrets.GIT_TOKEN}} 29 | 30 | - name: Install Dependencies 31 | run: nci 32 | 33 | - name: cd better-ui 🚀 34 | run: cd packages/better-ui 35 | 36 | - name: PNPM build 37 | run: nr build 38 | 39 | - name: Publish to NPM 40 | run: pnpm -r publish --access public --no-git-checks 41 | env: 42 | NODE_AUTH_TOKEN: ${{secrets.npm_token}} 43 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Logs 3 | logs 4 | *.log 5 | npm-debug.log* 6 | yarn-debug.log* 7 | yarn-error.log* 8 | lerna-debug.log* 9 | .pnpm-debug.log* 10 | 11 | # Diagnostic reports (https://nodejs.org/api/report.html) 12 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 13 | 14 | # Runtime data 15 | pids 16 | *.pid 17 | *.seed 18 | *.pid.lock 19 | 20 | # Directory for instrumented libs generated by jscoverage/JSCover 21 | lib-cov 22 | 23 | # Coverage directory used by tools like istanbul 24 | coverage 25 | *.lcov 26 | 27 | # nyc test coverage 28 | .nyc_output 29 | 30 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 31 | .grunt 32 | 33 | # Bower dependency directory (https://bower.io/) 34 | bower_components 35 | 36 | # node-waf configuration 37 | .lock-wscript 38 | 39 | # Compiled binary addons (https://nodejs.org/api/addons.html) 40 | build/Release 41 | 42 | # Dependency directories 43 | node_modules/ 44 | jspm_packages/ 45 | 46 | # Snowpack dependency directory (https://snowpack.dev/) 47 | web_modules/ 48 | 49 | # TypeScript cache 50 | *.tsbuildinfo 51 | 52 | # Optional npm cache directory 53 | .npm 54 | 55 | # Optional eslint cache 56 | .eslintcache 57 | 58 | # Optional stylelint cache 59 | .stylelintcache 60 | 61 | # Microbundle cache 62 | .rpt2_cache/ 63 | .rts2_cache_cjs/ 64 | .rts2_cache_es/ 65 | .rts2_cache_umd/ 66 | 67 | # Optional REPL history 68 | .node_repl_history 69 | 70 | # Output of 'npm pack' 71 | *.tgz 72 | 73 | # Yarn Integrity file 74 | .yarn-integrity 75 | 76 | # dotenv environment variable files 77 | .env 78 | .env.development.local 79 | .env.test.local 80 | .env.production.local 81 | .env.local 82 | 83 | # parcel-bundler cache (https://parceljs.org/) 84 | .cache 85 | .parcel-cache 86 | 87 | # Next.js build output 88 | .next 89 | out 90 | 91 | # Nuxt.js build / generate output 92 | .nuxt 93 | dist 94 | 95 | # Gatsby files 96 | .cache/ 97 | # Comment in the public line in if your project uses Gatsby and not Next.js 98 | # https://nextjs.org/blog/next-9-1#public-directory-support 99 | # public 100 | 101 | # vuepress build output 102 | .vuepress/dist 103 | 104 | # vuepress v2.x temp and cache directory 105 | .temp 106 | .cache 107 | 108 | # Docusaurus cache and generated files 109 | .docusaurus 110 | 111 | # Serverless directories 112 | .serverless/ 113 | 114 | # FuseBox cache 115 | .fusebox/ 116 | 117 | # DynamoDB Local files 118 | .dynamodb/ 119 | 120 | # TernJS port file 121 | .tern-port 122 | 123 | # Stores VSCode versions used for testing VSCode extensions 124 | .vscode-test 125 | 126 | # yarn v2 127 | .yarn/cache 128 | .yarn/unplugged 129 | .yarn/build-state.yml 130 | .yarn/install-state.gz 131 | .pnp.* 132 | 133 | # lockfile 134 | yarn.lock 135 | package-lock.json 136 | pnpm-lock.yaml 137 | 138 | # idea 139 | .idea 140 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | cd packages/better-ui 5 | pnpm lint 6 | -------------------------------------------------------------------------------- /.husky/pre-push: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | cd packages/better-ui 5 | pnpm test:run 6 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict = true 2 | shamefully-hoist = true 3 | hoist = true 4 | registry = https://registry.npmjs.org/ 5 | auto-install-peers = true 6 | strict-peer-dependencies = false 7 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: stable 3 | 4 | # Travis-CI Caching 5 | cache: 6 | directories: 7 | - node_modules 8 | yarn: true 9 | 10 | # S: Build Lifecycle 11 | install: 12 | - yarn 13 | 14 | stages: 15 | - name: deploy 16 | 17 | jobs: 18 | include: 19 | - stage: deploy 20 | script: 21 | - cd packages/better-ui 22 | - yarn test 23 | branches: 24 | only: 25 | - master 26 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "type": "pwa-node", 6 | "request": "launch", 7 | "name": "Launch Program", 8 | "skipFiles": [ 9 | "/**" 10 | ], 11 | "program": "${workspaceFolder}/packages/utils/babel/index.js" 12 | } 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🔨 What is better-ui? 2 | 3 | Better-ui, a library of Vite-based desktop components for developers, designers, and product managers 4 | 5 | ## Features 6 | 7 | - ⚡ Vue 3, Vite 2, pnpm, ESBuild - born with fastness 8 | - 🦾 TypeScript, of course 9 | - 🗂 File based routing 10 | - ⚙️ Unit Testing with Vitest 11 | - 😃 Eslint + Prittier 12 | - 🎨 UnoCSS - the instant on-demand atomic CSS engine 13 | - 🌍 I18n ready 14 | - 🚘 CI/CD with Github Actions 15 | 16 | ## Install 17 | 18 | ```bash 19 | pnpm add @h7ml/better-ui -D 20 | ``` 21 | 22 | ## Quick Start 23 | 24 | ```js 25 | import Vue from "vue"; 26 | import BetterUI from "better-ui"; 27 | 28 | const App = { 29 | template: `主要按钮`, 30 | }; 31 | 32 | createApp(App).use(BetterUI).mount("#app"); 33 | ``` 34 | 35 | ## Browser Support 36 | 37 | Modern browsers and Internet Explorer 10+. 38 | 39 | ## About 40 | - [repository](https://github.com/h7ml/better-ui) 41 | - [issues](https://github.com/h7ml/better-ui/issues) 42 | - [homepage](https://better-ui.github.io) 43 | -------------------------------------------------------------------------------- /assets/logo.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dext7r/better-ui/f6734262d5fa1385fd7e2dc38ae2dbdfc3def845/assets/logo.jpeg -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = {extends: ['@commitlint/config-conventional']} 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@h7ml/better-ui", 3 | "version": "1.0.1", 4 | "description": "better-ui", 5 | "main": "index.js", 6 | "scripts": { 7 | "preinstall": "node ./scripts/preinstall.js", 8 | "prepare": "husky install" 9 | }, 10 | "keywords": [ 11 | "better-ui" 12 | ], 13 | "license": "Apache-2.0", 14 | "licenses": [ 15 | { 16 | "type": "Apache-2.0", 17 | "url": "http://www.apache.org/licenses/LICENSE-2.0" 18 | } 19 | ], 20 | "repository": { 21 | "type": "git", 22 | "url": "https://github.com/h7ml/better-ui.git" 23 | }, 24 | "bugs": { 25 | "url": "https://github.com/h7ml/better-ui/issues" 26 | }, 27 | "author": { 28 | "name": "h7ml", 29 | "mail": "h7ml@qq.com", 30 | "github": "https://github.com/h7ml/better-ui" 31 | }, 32 | "homepage": "https://better-h7ml.vercel.app", 33 | "dependencies": { 34 | "@commitlint/cli": "^17.0.2", 35 | "@commitlint/config-conventional": "^17.0.2", 36 | "vite": "^3.0.4" 37 | }, 38 | "engines": { 39 | "node": ">= 12.0.0", 40 | "npm": ">= 3.0.0" 41 | }, 42 | "devDependencies": { 43 | "husky": "^8.0.1" 44 | }, 45 | "config": { 46 | "commitizen": { 47 | "path": "./node_modules/cz-conventional-changelog" 48 | } 49 | }, 50 | "publishConfig": { 51 | "registry": "https://registry.npmjs.org" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /packages/better-ui-docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | better-ui 8 | 9 | 10 |

better-ui

11 |
12 | 13 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /packages/better-ui-docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "better-ui-docs", 3 | "version": "1.0.0", 4 | "description": "better-ui-docs", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "vite" 8 | }, 9 | "keywords": [ 10 | "better-ui" 11 | ], 12 | "license": "Apache-2.0", 13 | "licenses": [ 14 | { 15 | "type": "Apache-2.0", 16 | "url": "http://www.apache.org/licenses/LICENSE-2.0" 17 | } 18 | ], 19 | "repository": { 20 | "type": "git", 21 | "url": "https://github.com/h7ml/better-ui.git" 22 | }, 23 | "bugs": { 24 | "url": "https://github.com/h7ml/better-ui/issues" 25 | }, 26 | "author": { 27 | "name": "h7ml", 28 | "mail": "h7ml@qq.com", 29 | "github": "https://github.com/h7ml/better-ui" 30 | }, 31 | "homepage": "https://better-h7ml.vercel.app", 32 | "dependencies": { 33 | "better-ui": "workspace:^1.0.0", 34 | "vue": "^3.2.37" 35 | }, 36 | "engines": { 37 | "node": ">= 12.0.0", 38 | "npm": ">= 3.0.0" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /packages/better-ui/.eslintignore: -------------------------------------------------------------------------------- 1 | *.sh 2 | node_modules 3 | lib 4 | coverage 5 | *.md 6 | *.scss 7 | *.woff 8 | *.ttf 9 | src/index.ts 10 | dist 11 | -------------------------------------------------------------------------------- /packages/better-ui/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { root: true, env: { browser: true, es2020: true, node: true, jest: true, }, globals: { ga: true, chrome: false, __DEV__: true, }, // 解析 .vue 文件 parser: "vue-eslint-parser", extends: [ "plugin:json/recommended", "plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier", ], plugins: ["@typescript-eslint"], parserOptions: { parser: "@typescript-eslint/parser", // 解析 .ts 文件 }, rules: { "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", "prettier/prettier": "error", }, }; -------------------------------------------------------------------------------- /packages/better-ui/CHANGELOG.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dext7r/better-ui/f6734262d5fa1385fd7e2dc38ae2dbdfc3def845/packages/better-ui/CHANGELOG.md -------------------------------------------------------------------------------- /packages/better-ui/config/unocss.ts: -------------------------------------------------------------------------------- 1 | import { presetUno, presetAttributify, presetIcons } from "unocss"; 2 | import Unocss from "unocss/vite"; 3 | 4 | const colors = [ 5 | "white", 6 | "black", 7 | "gray", 8 | "red", 9 | "yellow", 10 | "green", 11 | "blue", 12 | "indigo", 13 | "purple", 14 | "pink", 15 | ]; 16 | const safelist = [ 17 | ...colors.map((v) => `bg-${v}-100`), 18 | ...colors.map((v) => `bg-${v}-400`), 19 | ...colors.map((v) => `bg-${v}-500`), 20 | ...colors.map((v) => `hover:bg-${v}-100`), 21 | ...colors.map((v) => `hover:bg-${v}-300`), 22 | ...colors.map((v) => `hover:bg-${v}-400`), 23 | ...colors.map((v) => `hover:bg-${v}-500`), 24 | ...colors.map((v) => `border-${v}-400`), 25 | ...colors.map((v) => `border-${v}-500`), 26 | ...colors.map((v) => `text-${v}-500`), 27 | ...colors.map((v) => `hover:text-${v}-500`), 28 | 29 | ...Array.from({ length: 8 }, (_, i) => `px-${i + 1}`), 30 | ...Array.from({ length: 8 }, (_, i) => `py-${i + 1}`), 31 | ...["xs", "sm", "base", "lg", "xl", "2xl", "3xl"].map((v) => `text-${v}`), 32 | ...["rounded-full", "rounded-lg"], 33 | ...[ 34 | "search", 35 | "edit", 36 | "check", 37 | "message", 38 | "star-off", 39 | "delete", 40 | "add", 41 | "share", 42 | ].map((v) => `i-ic-baseline-${v}`), 43 | ]; 44 | 45 | export default () => 46 | Unocss({ 47 | safelist, 48 | presets: [presetUno(), presetAttributify(), presetIcons()], 49 | }); 50 | -------------------------------------------------------------------------------- /packages/better-ui/docs/.vitepress/config.ts: -------------------------------------------------------------------------------- 1 | import demoBlock from "vitepress-theme-demoblock"; 2 | import { defineConfig } from "vitepress"; 3 | const sidebar = { 4 | "/": [ 5 | { 6 | text: "快速开始", 7 | collapsible: true, 8 | items: [ 9 | { text: "Button 按钮", link: "/components/button/" }, 10 | { text: "Icon 图标", link: "/components/icon/" }, 11 | ], 12 | }, 13 | { 14 | text: "Config", 15 | collapsible: true, 16 | items: [ 17 | // This shows `/config/index.md` page. 18 | { text: "Index", link: "/components/1/" }, // /config/index.md 19 | { text: "Three", link: "/components/2/" }, // /config/three.md 20 | { text: "Four", link: "/components/3/" }, // /config/four.md 21 | ], 22 | }, 23 | ], 24 | }; 25 | const nav = [ 26 | { text: '指南', link: '/guide/' }, 27 | { text: '组件', link: '/components/' }, 28 | { text: '主题', link: '/theme/' }, 29 | { text: '资源', link: '/resource/' }, 30 | ] 31 | export default defineConfig({ 32 | base: "/", 33 | lang: "zh-CN", 34 | title: "🔨 Better-Ui", 35 | description: "better-ui是一个基于Vite的UI组件库", 36 | lastUpdated: true, 37 | appearance: true, 38 | themeConfig: { 39 | siteTitle: "🔨 better-ui是一个基于Vite的UI组件库", 40 | logo: "/logo.svg", 41 | sidebar, 42 | nav, 43 | editLink: { 44 | pattern: 45 | "https://github.com/better-ui/better-ui/edit/master/packages/better-ui/docs/:path", 46 | text: "Edit this page on GitHub", 47 | }, 48 | socialLinks: [ 49 | { icon: "github", link: "https://github.com/better-ui/better-ui" }, 50 | ], 51 | 52 | footer: { 53 | message: "Released under the MIT License.", 54 | copyright: "Copyright © 2022-present H7ml", 55 | }, 56 | }, 57 | markdown: { 58 | config: (md) => { 59 | const { demoBlockPlugin } = demoBlock; 60 | md.use(demoBlockPlugin); 61 | }, 62 | }, 63 | }); 64 | -------------------------------------------------------------------------------- /packages/better-ui/docs/.vitepress/theme/index.ts: -------------------------------------------------------------------------------- 1 | import DefaultTheme from 'vitepress/theme' 2 | import BetterUI from '../../../src/entry' 3 | import 'vitepress-theme-demoblock/theme/styles/index.css' 4 | import Demo from 'vitepress-theme-demoblock/components/Demo.vue' 5 | import DemoBlock from 'vitepress-theme-demoblock/components/DemoBlock.vue' 6 | export default { 7 | ...DefaultTheme, 8 | enhanceApp({ app }) { 9 | app.use(BetterUI) 10 | app.component('Demo', Demo) 11 | app.component('DemoBlock', DemoBlock) 12 | }, 13 | } 14 | -------------------------------------------------------------------------------- /packages/better-ui/docs/components/button/index.md: -------------------------------------------------------------------------------- 1 | # Button 按钮 2 | 常用操作按钮 3 | 4 | ## 基础用法 5 | 6 | 基础的函数用法 7 | 8 | :::demo 使用`size`、`color`、`pain`、`round`属性来定义 Button 的样式。 9 | 10 | ```vue 11 | 47 | ``` 48 | ::: 49 | 50 | ## 图标按钮 51 | 52 | 带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。 53 | 54 | :::demo 设置 icon 属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用 i 标签即可，可以使用自定义图标。 55 | 56 | ```vue 57 | 65 | ``` 66 | -------------------------------------------------------------------------------- /packages/better-ui/docs/components/icon/index.md: -------------------------------------------------------------------------------- 1 | # Icon 图标 2 | 3 | 常用图标 4 | 5 | ## 基础用法 6 | 7 | 基础的函数用法 8 | 9 | :::demo 使用`size`、`color`、`pain`、`round`属性来定义 Icon 的样式。 10 | 11 | ```vue 12 | 21 | ``` 22 | 23 | ::: 24 | -------------------------------------------------------------------------------- /packages/better-ui/docs/components/index.md: -------------------------------------------------------------------------------- 1 | # components 2 | 3 | Better-ui, a library of Vite-based desktop components for developers, designers, and product managers 4 | 5 | ## Features 6 | 7 | - ⚡ Vue 3, Vite 2, pnpm, ESBuild - born with fastness 8 | - 🦾 TypeScript, of course 9 | - 🗂 File based routing 10 | - ⚙️ Unit Testing with Vitest 11 | - 😃 Eslint + Prittier 12 | - 🎨 UnoCSS - the instant on-demand atomic CSS engine 13 | - 🌍 I18n ready 14 | - 🚘 CI/CD with Github Actions 15 | 16 | ## Install 17 | 18 | ```bash 19 | pnpm add @h7ml/better-ui -D 20 | ``` 21 | 22 | ## Quick Start 23 | 24 | ```js 25 | import Vue from "vue"; 26 | import BetterUI from "better-ui"; 27 | 28 | const App = { 29 | template: `主要按钮`, 30 | }; 31 | 32 | createApp(App).use(BetterUI).mount("#app"); 33 | ``` 34 | 35 | ## Browser Support 36 | 37 | Modern browsers and Internet Explorer 10+. 38 | 39 | ## About 40 | - [repository](https://github.com/h7ml/better-ui) 41 | - [issues](https://github.com/h7ml/better-ui/issues) 42 | - [homepage](https://better-ui.github.io) 43 | -------------------------------------------------------------------------------- /packages/better-ui/docs/guide/index.md: -------------------------------------------------------------------------------- 1 | # 设计原则 2 | 3 | ## 一致性 Consistency 4 | - 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念； 5 | - 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。 6 | 7 | ## 反馈 Feedback 8 | - 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作； 9 | - 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。 10 | 11 | ## 效率 Efficiency 12 | - 简化流程：设计简洁直观的操作流程； 13 | - 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策； 14 | - 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。 15 | 16 | ## 可控 Controllability 17 | - 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策； 18 | - 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。 19 | 20 | 21 | ## 导航 22 | - 导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。一般导航会有「侧栏导航」和「顶部导航」2 种类型。 23 | 24 | ## 选择合适的导航 25 | - 选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适（方向不明确），以下是「侧栏导航」和 「顶部导航」的区别。 26 | 27 | ## 侧栏导航 28 | - 可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。 29 | 30 | ## 一级类目 31 | - 适用于结构简单的网站：只有一级页面时，不需要使用面包屑。 32 | 33 | ## 二级类目 34 | - 侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。 35 | 36 | ## 三级类目 37 | - 适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。 38 | 39 | ## 顶部导航 40 | - 顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。 41 | - 适用于导航较少，页面篇幅较长的网站。 42 | -------------------------------------------------------------------------------- /packages/better-ui/docs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | 4 | title: better-ui 5 | hero: 6 | text: better-ui 7 | tagline: 是一个基于Vite的UI组件库 8 | actions: 9 | - theme: brand 10 | text: 快速上手 11 | link: /guide/ 12 | - theme: alt 13 | text: Github 14 | link: https://github.com/better-ui/better-ui 15 | 16 | features: 17 | - title: 基于VitePress 18 | details: 基于VitePress，加上增强插件，开箱即用 19 | - title: Demo展示 20 | details: 像dumi一样在markdown里面展示demo 21 | - title: 支持API文档自动生成 22 | details: 自动生成vue组件api文档 23 | - title: 支持文件映射 24 | details: 你可以把.md文件写在任何目录 25 | 26 | --- 27 | -------------------------------------------------------------------------------- /packages/better-ui/docs/public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dext7r/better-ui/f6734262d5fa1385fd7e2dc38ae2dbdfc3def845/packages/better-ui/docs/public/logo.png -------------------------------------------------------------------------------- /packages/better-ui/docs/public/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | background 5 | 6 | 7 | 8 | 9 | 10 | 11 | Layer 1 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/better-ui/docs/resource/index.md: -------------------------------------------------------------------------------- 1 | # resource 2 | 3 | Better-ui, a library of Vite-based desktop components for developers, designers, and product managers 4 | 5 | ## Features 6 | 7 | - ⚡ Vue 3, Vite 2, pnpm, ESBuild - born with fastness 8 | - 🦾 TypeScript, of course 9 | - 🗂 File based routing 10 | - ⚙️ Unit Testing with Vitest 11 | - 😃 Eslint + Prittier 12 | - 🎨 UnoCSS - the instant on-demand atomic CSS engine 13 | - 🌍 I18n ready 14 | - 🚘 CI/CD with Github Actions 15 | 16 | ## Install 17 | 18 | ```bash 19 | pnpm add @h7ml/better-ui -D 20 | ``` 21 | 22 | ## Quick Start 23 | 24 | ```js 25 | import Vue from "vue"; 26 | import BetterUI from "better-ui"; 27 | 28 | const App = { 29 | template: `主要按钮`, 30 | }; 31 | 32 | createApp(App).use(BetterUI).mount("#app"); 33 | ``` 34 | 35 | ## Browser Support 36 | 37 | Modern browsers and Internet Explorer 10+. 38 | 39 | ## About 40 | - [repository](https://github.com/h7ml/better-ui) 41 | - [issues](https://github.com/h7ml/better-ui/issues) 42 | - [homepage](https://better-ui.github.io) 43 | -------------------------------------------------------------------------------- /packages/better-ui/docs/theme/index.md: -------------------------------------------------------------------------------- 1 | # theme 2 | 3 | Better-ui, a library of Vite-based desktop components for developers, designers, and product managers 4 | 5 | ## Features 6 | 7 | - ⚡ Vue 3, Vite 2, pnpm, ESBuild - born with fastness 8 | - 🦾 TypeScript, of course 9 | - 🗂 File based routing 10 | - ⚙️ Unit Testing with Vitest 11 | - 😃 Eslint + Prittier 12 | - 🎨 UnoCSS - the instant on-demand atomic CSS engine 13 | - 🌍 I18n ready 14 | - 🚘 CI/CD with Github Actions 15 | 16 | ## Install 17 | 18 | ```bash 19 | pnpm add @h7ml/better-ui -D 20 | ``` 21 | 22 | ## Quick Start 23 | 24 | ```js 25 | import Vue from "vue"; 26 | import BetterUI from "better-ui"; 27 | 28 | const App = { 29 | template: `主要按钮`, 30 | }; 31 | 32 | createApp(App).use(BetterUI).mount("#app"); 33 | ``` 34 | 35 | ## Browser Support 36 | 37 | Modern browsers and Internet Explorer 10+. 38 | 39 | ## About 40 | - [repository](https://github.com/h7ml/better-ui) 41 | - [issues](https://github.com/h7ml/better-ui/issues) 42 | - [homepage](https://better-ui.github.io) 43 | -------------------------------------------------------------------------------- /packages/better-ui/docs/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import vueJsx from "@vitejs/plugin-vue-jsx"; 3 | import Unocss from "../config/unocss"; 4 | // https://vitejs.dev/config/ 5 | 6 | export default defineConfig({ 7 | plugins: [vueJsx(), Unocss()], 8 | }); 9 | -------------------------------------------------------------------------------- /packages/better-ui/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | better-ui 8 | 9 | 10 |

better-ui

11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /packages/better-ui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "better-ui", 3 | "version": "1.0.0", 4 | "description": "better-ui", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint --fix --ext .ts,.tsx,.vue src", 10 | "format": "prettier --write \"src/**/*.ts\"", 11 | "test": "vitest", 12 | "test:run": "vitest run", 13 | "docs:dev": "vitepress dev docs", 14 | "docs:build": "vitepress build docs", 15 | "docs:serve": "vitepress serve docs", 16 | "server:ui": "node ./server/ui.js", 17 | "server:doc": "node ./server/doc.js" 18 | }, 19 | "keywords": [ 20 | "better-ui" 21 | ], 22 | "license": "Apache-2.0", 23 | "licenses": [ 24 | { 25 | "type": "Apache-2.0", 26 | "url": "http://www.apache.org/licenses/LICENSE-2.0" 27 | } 28 | ], 29 | "repository": { 30 | "type": "git", 31 | "url": "https://github.com/h7ml/better-ui.git" 32 | }, 33 | "bugs": { 34 | "url": "https://github.com/h7ml/better-ui/issues" 35 | }, 36 | "author": { 37 | "name": "h7ml", 38 | "mail": "h7ml@qq.com", 39 | "github": "https://github.com/h7ml/better-ui" 40 | }, 41 | "homepage": "https://better-h7ml.vercel.app", 42 | "dependencies": { 43 | "@h7ml/better-ui": "latest", 44 | "@types/fs-extra": "^9.0.13", 45 | "@typescript-eslint/eslint-plugin": "^5.20.0", 46 | "@typescript-eslint/parser": "^5.20.0", 47 | "@vitejs/plugin-vue": "^2.3.3", 48 | "@vitejs/plugin-vue-jsx": "^1.3.10", 49 | "@vue/eslint-config-prettier": "^7.0.0", 50 | "@vue/test-utils": "^2.0.0-rc.20", 51 | "babel-eslint": "^10.1.0", 52 | "eslint": "^8.13.0", 53 | "eslint-formatter-pretty": "^4.1.0", 54 | "eslint-plugin-json": "^3.1.0", 55 | "eslint-plugin-prettier": "^4.0.0", 56 | "eslint-plugin-vue": "^8.6.0", 57 | "fs-extra": "^10.1.0", 58 | "prettier": "^2.6.2", 59 | "ts-node": "^10.9.1", 60 | "vite": "^3.0.5", 61 | "vue": "^3.2.37" 62 | }, 63 | "engines": { 64 | "node": ">= 12.0.0", 65 | "npm": ">= 3.0.0" 66 | }, 67 | "devDependencies": { 68 | "@iconify-json/ic": "^1.1.4", 69 | "@testing-library/vue": "^6.5.1", 70 | "@types/react": "^18.0.9", 71 | "@unocss/preset-attributify": "^0.35.1", 72 | "@unocss/preset-icons": "^0.30.10", 73 | "@unocss/preset-uno": "^0.35.1", 74 | "@vitejs/plugin-vue": "3.0.3", 75 | "@vitejs/plugin-vue-jsx": "^2.0.0", 76 | "@vitest/ui": "^0.14.0", 77 | "c8": "^7.11.3", 78 | "commitizen": "^4.2.5", 79 | "conventional-changelog-cli": "^2.2.2", 80 | "cz-conventional-changelog": "^3.3.0", 81 | "happy-dom": "^4.0.0", 82 | "husky": "^8.0.1", 83 | "jsdom": "^19.0.0", 84 | "pnpm": "^7.9.0", 85 | "pushstate-server": "^3.1.0", 86 | "react": "^18.1.0", 87 | "react-dom": "^18.1.0", 88 | "standard-version": "^9.5.0", 89 | "unocss": "^0.33.4", 90 | "vitepress": "^1.0.0-alpha.4", 91 | "vitepress-theme-demoblock": "^1.4.2", 92 | "vitest": "^0.14.0" 93 | }, 94 | "config": { 95 | "commitizen": { 96 | "path": "./node_modules/cz-conventional-changelog" 97 | } 98 | }, 99 | "publishConfig": { 100 | "registry": "https://registry.npmjs.org" 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /packages/better-ui/server/doc.js: -------------------------------------------------------------------------------- 1 | const server = require("pushstate-server"); 2 | const path = require("path"); 3 | const directory = path.join(__dirname, "../docs/.vitepress/dist"); 4 | server.start({ 5 | port: 5000, 6 | directory: directory, 7 | }); 8 | 9 | console.log("your server is running at http://localhost:5000"); 10 | -------------------------------------------------------------------------------- /packages/better-ui/server/ui.js: -------------------------------------------------------------------------------- 1 | const server = require("pushstate-server"); 2 | const path = require("path"); 3 | const directory = path.join(__dirname, "../dist"); 4 | server.start({ 5 | port: 6000, 6 | directory: directory, 7 | }); 8 | 9 | console.log("your server is running at http://localhost:6000"); 10 | -------------------------------------------------------------------------------- /packages/better-ui/src/button/Button.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent, PropType } from "vue"; 2 | import "uno.css"; 3 | 4 | export type ISize = "small" | "medium" | "large"; 5 | export type IColor = 6 | | "black" 7 | | "gray" 8 | | "red" 9 | | "yellow" 10 | | "green" 11 | | "blue" 12 | | "indigo" 13 | | "purple" 14 | | "pink"; 15 | 16 | export const props = { 17 | // 新增 18 | size: { 19 | type: String as PropType, 20 | default: "medium", 21 | }, 22 | 23 | color: { 24 | type: String as PropType, 25 | default: "blue", 26 | }, 27 | 28 | round: { 29 | type: Boolean, 30 | default: false, 31 | }, 32 | 33 | plain: { 34 | type: Boolean, 35 | default: false, 36 | }, 37 | 38 | icon: { 39 | type: String, 40 | default: "", 41 | }, 42 | } as const; 43 | 44 | export default defineComponent({ 45 | name: "BButton", 46 | props, 47 | setup(props, { slots }) { 48 | const size = { 49 | small: { 50 | x: "2", 51 | y: "1", 52 | text: "sm", 53 | }, 54 | medium: { 55 | x: "3", 56 | y: "1.5", 57 | text: "base", 58 | }, 59 | large: { 60 | x: "4", 61 | y: "2", 62 | text: "lg", 63 | }, 64 | }; 65 | 66 | return () => ( 67 | 91 | ); 92 | }, 93 | }); 94 | -------------------------------------------------------------------------------- /packages/better-ui/src/button/__tests__/button.spec.ts: -------------------------------------------------------------------------------- 1 | import Button from "../button"; 2 | 3 | import { shallowMount } from "@vue/test-utils"; 4 | import { describe, expect, test } from "vitest"; 5 | // 测试分组 6 | describe("Button", () => { 7 | // mount 8 | test("mount @vue/test-utils", () => { 9 | // @vue/test-utils 10 | const wrapper = shallowMount(Button, { 11 | slots: { 12 | default: "Button", 13 | }, 14 | }); 15 | 16 | // 断言 17 | expect(wrapper.text()).toBe("Button"); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/better-ui/src/button/index.ts: -------------------------------------------------------------------------------- 1 | import Button from "./Button"; 2 | export default Button; 3 | -------------------------------------------------------------------------------- /packages/better-ui/src/entry.ts: -------------------------------------------------------------------------------- 1 | import { App } from "vue"; 2 | import Button from "./button"; 3 | import Icon from "./icon"; 4 | export { Button }; 5 | export default { 6 | install(app: App): void { 7 | app.component(Button.name, Button); 8 | app.component(Icon.name, Icon); 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /packages/better-ui/src/icon/Icon.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent, PropType } from "vue"; 2 | import "uno.css"; 3 | 4 | export type ISize = "small" | "medium" | "large"; 5 | export type IColor = 6 | | "black" 7 | | "gray" 8 | | "red" 9 | | "yellow" 10 | | "green" 11 | | "blue" 12 | | "indigo" 13 | | "purple" 14 | | "pink"; 15 | 16 | export const props = { 17 | // 新增 18 | size: { 19 | type: String as PropType, 20 | default: "medium", 21 | }, 22 | 23 | color: { 24 | type: String as PropType, 25 | default: "blue", 26 | }, 27 | 28 | title: { 29 | type: String, 30 | default: "", 31 | }, 32 | 33 | round: { 34 | type: Boolean, 35 | default: false, 36 | }, 37 | 38 | plain: { 39 | type: Boolean, 40 | default: false, 41 | }, 42 | 43 | icon: { 44 | type: String, 45 | default: "", 46 | }, 47 | } as const; 48 | 49 | export default defineComponent({ 50 | name: "BIcon", 51 | props, 52 | setup(props, { slots }) { 53 | const size = { 54 | small: { 55 | x: "2", 56 | y: "1", 57 | text: "sm", 58 | }, 59 | medium: { 60 | x: "3", 61 | y: "1.5", 62 | text: "base", 63 | }, 64 | large: { 65 | x: "4", 66 | y: "2", 67 | text: "lg", 68 | }, 69 | }; 70 | 71 | return () => ( 72 | 93 | {" "} 94 | {slots.default ? slots.default() : ""} 95 | 96 | ); 97 | }, 98 | }); 99 | -------------------------------------------------------------------------------- /packages/better-ui/src/icon/index.ts: -------------------------------------------------------------------------------- 1 | import Icon from "./Icon"; 2 | export default Icon; 3 | -------------------------------------------------------------------------------- /packages/better-ui/src/index.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue/dist/vue.esm-browser.js"; 2 | import BetterUI from "./entry"; 3 | const createButton = ` 4 |
5 | 主要按钮 6 | 绿色按钮 7 | 灰色按钮 8 | 黄色按钮 9 | 红色按钮 10 |
11 |
12 | 13 | 14 | 15 | 16 | 17 |
`; 18 | createApp({ 19 | template: createButton, 20 | }) 21 | .use(BetterUI) 22 | .mount("#app"); 23 | -------------------------------------------------------------------------------- /packages/better-ui/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.vue" { 2 | import { DefineComponent } from "vue"; 3 | const component: DefineComponent<{}, {}, any>; 4 | export default component; 5 | } 6 | -------------------------------------------------------------------------------- /packages/better-ui/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": true, /* 生成相关的 '.d.ts' 文件。 */ 4 | "declarationDir": "./dist/types", /* '.d.ts' 文件输出目录 */ 5 | "jsx": "preserve", 6 | }, 7 | "include": [ 8 | "./**/*.*", 9 | "./shims-vue.d.ts", 10 | ], 11 | "exclude": [ 12 | "node_modules" 13 | ], 14 | "esModuleInterop": true, 15 | "allowSyntheticDefaultImports": "true" 16 | } 17 | -------------------------------------------------------------------------------- /packages/better-ui/vite.config.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import { defineConfig } from "vite"; 4 | import vue from "@vitejs/plugin-vue"; 5 | import vueJsx from "@vitejs/plugin-vue-jsx"; 6 | import Unocss from "./config/unocss"; 7 | 8 | const rollupOptions = { 9 | external: ["vue", "vue-router"], 10 | output: { 11 | globals: { 12 | vue: "Vue", 13 | }, 14 | }, 15 | }; 16 | export default defineConfig({ 17 | plugins: [Unocss(), vue(), vueJsx({})], 18 | build: { 19 | rollupOptions, 20 | minify: false, 21 | lib: { 22 | entry: "./src/entry.ts", 23 | name: "BetterUI", 24 | fileName: "better-ui", 25 | // 导出模块格式 26 | formats: ["es", "umd", "iife", "cjs"], 27 | }, 28 | }, 29 | // @ts-ignore 30 | test: { 31 | globals: true, 32 | environment: "happy-dom", 33 | transformMode: { 34 | web: [/.[tj]sx$/], 35 | }, 36 | }, 37 | }); 38 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | # all packages in subdirs of packages/ and components/ 3 | - 'packages/**' 4 | -------------------------------------------------------------------------------- /scripts/preinstall.js: -------------------------------------------------------------------------------- 1 | if (!/pnpm/.test(process.env.npm_execpath || '')) { 2 | console.warn( 3 | `\u001b[33mThis repository requires using pnpm as the package manager ` + 4 | ` for scripts to work properly.\u001b[39m\n` 5 | ) 6 | process.exit(1) 7 | } 8 | -------------------------------------------------------------------------------- /tea.yaml: -------------------------------------------------------------------------------- 1 | # https://tea.xyz/what-is-this-file 2 | --- 3 | version: 1.0.1 4 | codeOwners: 5 | - '0xBC99fC607a02790fc46c7e77F55fECAb120B9896' 6 | quorum: 1 7 | --------------------------------------------------------------------------------