feat: 搭建UI组件库
1. 完成展示example 2. 按需加载 3. 导入导出 未来： 1. 更多组件 2. 暗黑模式 3. 配置文件
This commit is contained in:
HeXiaoLong:Suanier
commit
49de4589bd
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
18
.npmignore
Normal file
18
.npmignore
Normal file
@ -0,0 +1,18 @@
|
||||
.vscode
|
||||
.github
|
||||
docs
|
||||
public
|
||||
src
|
||||
.gitignore
|
||||
.npmrc
|
||||
.editorconfig
|
||||
.eslintrc
|
||||
.prettierrc
|
||||
*.log
|
||||
*.test.ts
|
||||
*.spec.ts
|
||||
tsconfig.json
|
||||
tsconfig.build.json
|
||||
tsconfig.node.json
|
||||
vite.config.ts
|
||||
vitest.config.ts
|
||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
5
README.md
Normal file
5
README.md
Normal file
@ -0,0 +1,5 @@
|
||||
# Vue 3 + TypeScript + Vite
|
||||
|
||||
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
|
||||
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
|
||||
12
example/index.html
Normal file
12
example/index.html
Normal file
@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>组件库示例</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
1173
example/package-lock.json
generated
Normal file
1173
example/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
23
example/package.json
Normal file
23
example/package.json
Normal file
@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "example",
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"description": "",
|
||||
"dependencies": {
|
||||
"vue": "^3.3.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.2.3",
|
||||
"typescript": "~5.0.4",
|
||||
"vite": "^4.4.9",
|
||||
"vue-tsc": "^1.8.8"
|
||||
}
|
||||
}
|
||||
41
example/src/App.vue
Normal file
41
example/src/App.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import { NiButton } from 'ni'
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<h1>组件库示例</h1>
|
||||
|
||||
<section class="demo-section">
|
||||
<h2>按钮组件</h2>
|
||||
<div class="demo-row">
|
||||
<NiButton>默认按钮</NiButton>
|
||||
<NiButton type="primary">主要按钮</NiButton>
|
||||
<NiButton type="success">成功按钮</NiButton>
|
||||
<NiButton type="warning">警告按钮</NiButton>
|
||||
<NiButton type="danger">危险按钮</NiButton>
|
||||
</div>
|
||||
|
||||
<div class="demo-row">
|
||||
<NiButton size="small">小型按钮</NiButton>
|
||||
<NiButton>默认大小</NiButton>
|
||||
<NiButton size="large">大型按钮</NiButton>
|
||||
</div>
|
||||
|
||||
<div class="demo-row">
|
||||
<NiButton disabled>禁用按钮</NiButton>
|
||||
<NiButton type="primary" disabled>禁用主要按钮</NiButton>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
}
|
||||
</style>
|
||||
8
example/src/main.ts
Normal file
8
example/src/main.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
// import Ni from 'ni'
|
||||
import '../../dist/ni.css'
|
||||
|
||||
const app = createApp(App)
|
||||
// app.use(Ni)
|
||||
app.mount('#app')
|
||||
12
example/vite.config.ts
Normal file
12
example/vite.config.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import { resolve } from 'path'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'ni': resolve(__dirname, '../dist/ni.es.js')
|
||||
}
|
||||
}
|
||||
})
|
||||
13
index.html
Normal file
13
index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
6699
package-lock.json
generated
Normal file
6699
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
69
package.json
Normal file
69
package.json
Normal file
@ -0,0 +1,69 @@
|
||||
{
|
||||
"name": "ni",
|
||||
"private": true,
|
||||
"version": "0.0.1",
|
||||
"type": "module",
|
||||
"files": [
|
||||
"dist",
|
||||
"types"
|
||||
],
|
||||
"main": "./dist/ni.umd.js",
|
||||
"module": "./dist/ni.es.js",
|
||||
"types": "./types/index.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./types/index.d.ts",
|
||||
"import": "./dist/ni.es.js",
|
||||
"require": "./dist/ni.umd.js"
|
||||
},
|
||||
"./button": {
|
||||
"types": "./types/components/button/index.d.ts",
|
||||
"import": "./dist/ni-button.es.js",
|
||||
"require": "./dist/ni-button.umd.js"
|
||||
},
|
||||
"./dist/style.css": "./dist/ni.css"
|
||||
},
|
||||
"sideEffects": [
|
||||
"**/*.css",
|
||||
"**/*.scss"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc && vite build",
|
||||
"build:lib": "vite build --config vite.lib.config.ts && tsc -p tsconfig.build.json",
|
||||
"preview": "vite preview",
|
||||
"docs:dev": "vitepress dev docs",
|
||||
"docs:build": "vitepress build docs",
|
||||
"docs:preview": "vitepress preview docs",
|
||||
"test": "vitest",
|
||||
"test:coverage": "vitest run --coverage",
|
||||
"test:ui": "vitest --ui",
|
||||
"prepublishOnly": "npm run build:lib"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.3.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.2.3",
|
||||
"@vue/tsconfig": "^0.4.0",
|
||||
"typescript": "~5.0.4",
|
||||
"vite": "^4.4.9",
|
||||
"vue-tsc": "^1.8.8",
|
||||
"sass": "^1.66.1",
|
||||
"vitepress": "^1.0.0-rc.44",
|
||||
"@types/node": "^20.5.9",
|
||||
"unplugin-vue-components": "^0.25.2",
|
||||
"unplugin-auto-import": "^0.16.7",
|
||||
"@vue/test-utils": "^2.4.3",
|
||||
"vitest": "^0.34.6",
|
||||
"@vitest/coverage-v8": "^0.34.6",
|
||||
"@vitest/ui": "^0.34.6",
|
||||
"jsdom": "^22.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.0.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
}
|
||||
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
60
src/App.vue
Normal file
60
src/App.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<script lang="ts" setup>
|
||||
import { NiButton } from './components/button/index'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>Ni UI 组件库示例</h1>
|
||||
|
||||
<section class="demo-section">
|
||||
<h2>按钮组件</h2>
|
||||
<div class="demo-row">
|
||||
<NiButton>默认按钮</NiButton>
|
||||
<NiButton type="primary">主要按钮</NiButton>
|
||||
<NiButton type="success">成功按钮</NiButton>
|
||||
<NiButton type="warning">警告按钮</NiButton>
|
||||
<NiButton type="danger">危险按钮</NiButton>
|
||||
</div>
|
||||
|
||||
<div class="demo-row">
|
||||
<NiButton size="small">小型按钮</NiButton>
|
||||
<NiButton>默认大小</NiButton>
|
||||
<NiButton size="large">大型按钮</NiButton>
|
||||
</div>
|
||||
|
||||
<div class="demo-row">
|
||||
<NiButton disabled>禁用按钮</NiButton>
|
||||
<NiButton type="primary" disabled>禁用主要按钮</NiButton>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: 40px;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 20px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-row {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
1
src/assets/vue.svg
Normal file
1
src/assets/vue.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
234
src/components/button/Button.vue
Normal file
234
src/components/button/Button.vue
Normal file
@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<button
|
||||
:class="[
|
||||
'ni-button',
|
||||
`ni-button--${type}`,
|
||||
`ni-button--${size}`,
|
||||
{
|
||||
'is-plain': plain,
|
||||
'is-round': round,
|
||||
'is-circle': circle,
|
||||
'is-disabled': disabled,
|
||||
'is-loading': loading
|
||||
}
|
||||
]"
|
||||
:disabled="disabled || loading"
|
||||
@click="handleClick"
|
||||
>
|
||||
<slot></slot>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
plain: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
round: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
circle: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'click', evt: MouseEvent): void
|
||||
}>()
|
||||
|
||||
const handleClick = (evt: MouseEvent) => {
|
||||
emit('click', evt)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ni-button {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
height: 32px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
color: #606266;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
transition: .1s;
|
||||
font-weight: 500;
|
||||
padding: 8px 15px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #dcdfe6;
|
||||
background-color: #ffffff;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #409eff;
|
||||
border-color: #c6e2ff;
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
|
||||
&--primary {
|
||||
color: #fff;
|
||||
background-color: #409eff;
|
||||
border-color: #409eff;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: #66b1ff;
|
||||
border-color: #66b1ff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&--success {
|
||||
color: #fff;
|
||||
background-color: #67c23a;
|
||||
border-color: #67c23a;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: #85ce61;
|
||||
border-color: #85ce61;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&--warning {
|
||||
color: #fff;
|
||||
background-color: #e6a23c;
|
||||
border-color: #e6a23c;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: #ebb563;
|
||||
border-color: #ebb563;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&--danger {
|
||||
color: #fff;
|
||||
background-color: #f56c6c;
|
||||
border-color: #f56c6c;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: #f78989;
|
||||
border-color: #f78989;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&--small {
|
||||
height: 24px;
|
||||
padding: 5px 11px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&--large {
|
||||
height: 40px;
|
||||
padding: 12px 19px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.is-plain {
|
||||
background: #fff;
|
||||
border-color: #dcdfe6;
|
||||
color: #606266;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: #fff;
|
||||
border-color: #409eff;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
&.ni-button--primary {
|
||||
color: #409eff;
|
||||
background: #ecf5ff;
|
||||
border-color: #b3d8ff;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
background: #409eff;
|
||||
border-color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
&.ni-button--success {
|
||||
color: #67c23a;
|
||||
background: #f0f9eb;
|
||||
border-color: #c2e7b0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
background: #67c23a;
|
||||
border-color: #67c23a;
|
||||
}
|
||||
}
|
||||
|
||||
&.ni-button--warning {
|
||||
color: #e6a23c;
|
||||
background: #fdf6ec;
|
||||
border-color: #f5dab1;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
background: #e6a23c;
|
||||
border-color: #e6a23c;
|
||||
}
|
||||
}
|
||||
|
||||
&.ni-button--danger {
|
||||
color: #f56c6c;
|
||||
background: #fef0f0;
|
||||
border-color: #fbc4c4;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
background: #f56c6c;
|
||||
border-color: #f56c6c;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-round {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
&.is-circle {
|
||||
border-radius: 50%;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
58
src/components/button/__tests__/Button.test.ts
Normal file
58
src/components/button/__tests__/Button.test.ts
Normal file
@ -0,0 +1,58 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import Button from '../Button.vue'
|
||||
|
||||
describe('Button.vue', () => {
|
||||
it('renders slot content', () => {
|
||||
const wrapper = mount(Button, {
|
||||
slots: {
|
||||
default: '按钮文本'
|
||||
}
|
||||
})
|
||||
expect(wrapper.text()).toBe('按钮文本')
|
||||
})
|
||||
|
||||
it('applies type class', () => {
|
||||
const wrapper = mount(Button, {
|
||||
props: {
|
||||
type: 'primary'
|
||||
}
|
||||
})
|
||||
expect(wrapper.classes()).toContain('ni-button--primary')
|
||||
})
|
||||
|
||||
it('applies size class', () => {
|
||||
const wrapper = mount(Button, {
|
||||
props: {
|
||||
size: 'small'
|
||||
}
|
||||
})
|
||||
expect(wrapper.classes()).toContain('ni-button--small')
|
||||
})
|
||||
|
||||
it('applies disabled class and attribute', () => {
|
||||
const wrapper = mount(Button, {
|
||||
props: {
|
||||
disabled: true
|
||||
}
|
||||
})
|
||||
expect(wrapper.classes()).toContain('is-disabled')
|
||||
expect(wrapper.attributes('disabled')).toBeDefined()
|
||||
})
|
||||
|
||||
it('emits click event when clicked', async () => {
|
||||
const wrapper = mount(Button)
|
||||
await wrapper.trigger('click')
|
||||
expect(wrapper.emitted('click')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('does not emit click event when disabled', async () => {
|
||||
const wrapper = mount(Button, {
|
||||
props: {
|
||||
disabled: true
|
||||
}
|
||||
})
|
||||
await wrapper.trigger('click')
|
||||
expect(wrapper.emitted('click')).toBeFalsy()
|
||||
})
|
||||
})
|
||||
3
src/components/button/index.ts
Normal file
3
src/components/button/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import NiButton from './Button.vue'
|
||||
export { NiButton }
|
||||
export default NiButton
|
||||
24
src/components/button/types.ts
Normal file
24
src/components/button/types.ts
Normal file
@ -0,0 +1,24 @@
|
||||
import { ExtractPropTypes, PropType } from 'vue'
|
||||
|
||||
export const buttonProps = {
|
||||
type: {
|
||||
type: String as PropType<'default' | 'primary' | 'success' | 'warning' | 'danger'>,
|
||||
default: 'default',
|
||||
validator: (value: string) => {
|
||||
return ['default', 'primary', 'success', 'warning', 'danger'].includes(value)
|
||||
}
|
||||
},
|
||||
size: {
|
||||
type: String as PropType<'small' | 'medium' | 'large'>,
|
||||
default: 'medium',
|
||||
validator: (value: string) => {
|
||||
return ['small', 'medium', 'large'].includes(value)
|
||||
}
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
} as const
|
||||
|
||||
export type ButtonProps = ExtractPropTypes<typeof buttonProps>
|
||||
9
src/components/index.ts
Normal file
9
src/components/index.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import NiButton from './button'
|
||||
|
||||
export {
|
||||
NiButton,
|
||||
}
|
||||
|
||||
export default {
|
||||
NiButton,
|
||||
}
|
||||
7
src/env.d.ts
vendored
Normal file
7
src/env.d.ts
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
declare module '*.vue' {
|
||||
import type { DefineComponent } from 'vue'
|
||||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
}
|
||||
21
src/index.ts
Normal file
21
src/index.ts
Normal file
@ -0,0 +1,21 @@
|
||||
import { App } from 'vue'
|
||||
import * as components from './components'
|
||||
|
||||
// 导出所有组件
|
||||
export * from './components'
|
||||
|
||||
// 导出组件库版本
|
||||
export const version = '0.0.1'
|
||||
|
||||
// 导出安装方法
|
||||
export const install = (app: App) => {
|
||||
Object.entries(components).forEach(([path, module]: [string, any]) => {
|
||||
app.component(path, module)
|
||||
})
|
||||
}
|
||||
|
||||
// 默认导出
|
||||
export default {
|
||||
version,
|
||||
install
|
||||
}
|
||||
5
src/main.ts
Normal file
5
src/main.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
79
src/style.css
Normal file
79
src/style.css
Normal file
@ -0,0 +1,79 @@
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
36
src/types/index.d.ts
vendored
Normal file
36
src/types/index.d.ts
vendored
Normal file
@ -0,0 +1,36 @@
|
||||
import { App, Component } from 'vue'
|
||||
|
||||
// 按钮组件属性
|
||||
export interface ButtonProps {
|
||||
type?: 'default' | 'primary' | 'success' | 'warning' | 'danger'
|
||||
size?: 'small' | 'medium' | 'large'
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
// 按钮组件实例
|
||||
export interface ButtonInstance {
|
||||
$el: HTMLButtonElement
|
||||
}
|
||||
|
||||
// 组件库配置选项
|
||||
export interface NiUIOptions {
|
||||
size?: 'small' | 'medium' | 'large'
|
||||
}
|
||||
|
||||
// 组件库实例
|
||||
export interface NiUI {
|
||||
install: (app: App, options?: NiUIOptions) => void
|
||||
}
|
||||
|
||||
// 组件类型声明
|
||||
declare module '@vue/runtime-core' {
|
||||
export interface GlobalComponents {
|
||||
NiButton: typeof import('../components/button')['Button']
|
||||
}
|
||||
}
|
||||
|
||||
// 组件导出
|
||||
export type { Button } from '../components/button'
|
||||
|
||||
// 组件库导出
|
||||
export * from './components'
|
||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
15
tsconfig.app.json
Normal file
15
tsconfig.app.json
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||
}
|
||||
12
tsconfig.build.json
Normal file
12
tsconfig.build.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"declaration": true,
|
||||
"emitDeclarationOnly": true,
|
||||
"outDir": "types",
|
||||
"noEmit": false,
|
||||
"types": ["node", "vite/client"]
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue", "src/env.d.ts"],
|
||||
"exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.spec.ts"]
|
||||
}
|
||||
26
tsconfig.json
Normal file
26
tsconfig.json
Normal file
@ -0,0 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "node",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "preserve",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"types": ["node", "vite/client", "vue"],
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
12
tsconfig.node.json
Normal file
12
tsconfig.node.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"types": ["node"]
|
||||
},
|
||||
"include": ["vite.config.ts", "vitest.config.ts"]
|
||||
}
|
||||
1
tsconfig.node.tsbuildinfo
Normal file
1
tsconfig.node.tsbuildinfo
Normal file
File diff suppressed because one or more lines are too long
1
tsconfig.tsbuildinfo
Normal file
1
tsconfig.tsbuildinfo
Normal file
@ -0,0 +1 @@
|
||||
{"root":["./src/index.ts","./src/main.ts","./src/vite-env.d.ts","./src/components/index.ts","./src/components/button/index.ts","./src/components/button/__tests__/button.test.ts","./src/types/index.d.ts","./src/app.vue","./src/components/button/button.vue"],"version":"5.8.3"}
|
||||
3
types/components/button/index.d.ts
vendored
Normal file
3
types/components/button/index.d.ts
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
import NiButton from './Button.vue';
|
||||
export { NiButton };
|
||||
export default NiButton;
|
||||
18
types/components/button/types.d.ts
vendored
Normal file
18
types/components/button/types.d.ts
vendored
Normal file
@ -0,0 +1,18 @@
|
||||
import { ExtractPropTypes, PropType } from 'vue';
|
||||
export declare const buttonProps: {
|
||||
readonly type: {
|
||||
readonly type: PropType<"default" | "primary" | "success" | "warning" | "danger">;
|
||||
readonly default: "default";
|
||||
readonly validator: (value: string) => boolean;
|
||||
};
|
||||
readonly size: {
|
||||
readonly type: PropType<"small" | "medium" | "large">;
|
||||
readonly default: "medium";
|
||||
readonly validator: (value: string) => boolean;
|
||||
};
|
||||
readonly disabled: {
|
||||
readonly type: BooleanConstructor;
|
||||
readonly default: false;
|
||||
};
|
||||
};
|
||||
export type ButtonProps = ExtractPropTypes<typeof buttonProps>;
|
||||
8
types/components/index.d.ts
vendored
Normal file
8
types/components/index.d.ts
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
import NiButton from './button';
|
||||
import NiText from './text';
|
||||
export { NiButton, NiText };
|
||||
declare const _default: {
|
||||
NiButton: import("vue").DefineComponent<{}, {}, any>;
|
||||
NiText: import("vue").DefineComponent<{}, {}, any>;
|
||||
};
|
||||
export default _default;
|
||||
3
types/components/text/index.d.ts
vendored
Normal file
3
types/components/text/index.d.ts
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
import NiText from './Text.vue';
|
||||
export { NiText };
|
||||
export default NiText;
|
||||
9
types/index.d.ts
vendored
Normal file
9
types/index.d.ts
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
import { App } from 'vue';
|
||||
export * from './components';
|
||||
export declare const version = "0.0.1";
|
||||
export declare const install: (app: App) => void;
|
||||
declare const _default: {
|
||||
version: string;
|
||||
install: (app: App<any>) => void;
|
||||
};
|
||||
export default _default;
|
||||
1
types/main.d.ts
vendored
Normal file
1
types/main.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
import './style.css';
|
||||
2
vite.config.d.ts
vendored
Normal file
2
vite.config.d.ts
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
declare const _default: import("vite").UserConfig;
|
||||
export default _default;
|
||||
6
vite.config.js
Normal file
6
vite.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
});
|
||||
30
vite.config.ts
Normal file
30
vite.config.ts
Normal file
@ -0,0 +1,30 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
Components({
|
||||
dirs: ['src/components'],
|
||||
dts: 'src/components.d.ts',
|
||||
resolvers: [
|
||||
(name) => {
|
||||
if (name.startsWith('Ni')) {
|
||||
return {
|
||||
name,
|
||||
from: 'ni',
|
||||
sideEffects: 'ni/dist/style.css'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}),
|
||||
AutoImport({
|
||||
imports: ['vue'],
|
||||
dts: 'src/auto-imports.d.ts'
|
||||
})
|
||||
]
|
||||
})
|
||||
25
vite.lib.config.ts
Normal file
25
vite.lib.config.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import { resolve } from 'path'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
build: {
|
||||
lib: {
|
||||
entry: resolve(__dirname, 'src/index.ts'),
|
||||
formats: ['es'],
|
||||
fileName: (format) => `ni.${format}.js`
|
||||
},
|
||||
rollupOptions: {
|
||||
external: ['vue'],
|
||||
output: {
|
||||
globals: {
|
||||
vue: 'Vue'
|
||||
},
|
||||
assetFileNames: (assetInfo) => {
|
||||
return assetInfo.name === 'style.css' ? 'ni.css' : assetInfo.name || ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
2
vitest.config.d.ts
vendored
Normal file
2
vitest.config.d.ts
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
declare const _default: import("vite").UserConfig & Promise<import("vite").UserConfig> & (import("vitest/config").UserConfigFnObject & import("vitest/config").UserConfigExport);
|
||||
export default _default;
|
||||
26
vitest.config.js
Normal file
26
vitest.config.js
Normal file
@ -0,0 +1,26 @@
|
||||
import { defineConfig } from 'vitest/config';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import { resolve } from 'path';
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
test: {
|
||||
environment: 'jsdom',
|
||||
globals: true,
|
||||
coverage: {
|
||||
provider: 'v8',
|
||||
reporter: ['text', 'json', 'html'],
|
||||
exclude: [
|
||||
'node_modules/**',
|
||||
'dist/**',
|
||||
'**/*.d.ts',
|
||||
'test/**',
|
||||
'vitest.config.ts',
|
||||
],
|
||||
},
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve(__dirname, './src'),
|
||||
},
|
||||
},
|
||||
});
|
||||
27
vitest.config.ts
Normal file
27
vitest.config.ts
Normal file
@ -0,0 +1,27 @@
|
||||
import { defineConfig } from 'vitest/config'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import { resolve } from 'path'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
test: {
|
||||
environment: 'jsdom',
|
||||
globals: true,
|
||||
coverage: {
|
||||
provider: 'v8',
|
||||
reporter: ['text', 'json', 'html'],
|
||||
exclude: [
|
||||
'node_modules/**',
|
||||
'dist/**',
|
||||
'**/*.d.ts',
|
||||
'test/**',
|
||||
'vitest.config.ts',
|
||||
],
|
||||
},
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve(__dirname, './src'),
|
||||
},
|
||||
},
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user