Skip to content

Commit d2ce3dc

Browse files
AkashiGakkiAkashiGakki
committed
🎉 feat: use ui vue
1 parent f7d84c2 commit d2ce3dc

17 files changed

+306
-0
lines changed

‎packages/@vue/components/button/button.vue

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script setup lang="ts">
2+
import type { ButtonProps } from './types'
3+
import { buttonProps } from './types'
4+
5+
const props: ButtonProps = defineProps(buttonProps)
6+
7+
const emit = defineEmits(['click', 'change'])
8+
9+
const onClick = (event: Event) => emit('click', event)
10+
</script>
11+
12+
<template>
13+
<button color-rose-400 color-red-400 @click="onClick($event)">Use Button</button>
14+
</template>

‎packages/@vue/components/button/index.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import button from './button.vue'
2+
import type { App, Plugin } from "vue"
3+
4+
type SFCWithInstall<T> = T & Plugin
5+
6+
const withInstall = <T>(comp: T) => {
7+
(comp as SFCWithInstall<T>).install = (app: App) => {
8+
// 注册组件
9+
app.component((comp as any).name, comp)
10+
}
11+
return comp as SFCWithInstall<T>
12+
}
13+
14+
const UseButton = withInstall(button)
15+
16+
export { UseButton }

‎packages/@vue/components/button/types.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { ExtractPropTypes } from 'vue'
2+
3+
export const ButtonType = ['default', 'primary', 'success', 'warning', 'danger']
4+
5+
export const ButtonSize = ['large', 'normal', 'small', 'mini'];
6+
7+
8+
export const buttonProps = {
9+
type: {
10+
type: String,
11+
values: ButtonType
12+
},
13+
14+
size: {
15+
type: String,
16+
values: ButtonSize
17+
}
18+
}
19+
20+
export type ButtonProps = ExtractPropTypes<typeof buttonProps>

‎packages/@vue/components/index.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// import { testFun } from '@use-ui/utils'
2+
3+
// const ret = testFun(1, 2)
4+
// console.log('ret', ret)
5+
6+
import 'uno.css'
7+
8+
export * from './button'

‎packages/@vue/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="./public/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Use UI Vue</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/sample/main.ts"></script>
12+
</body>
13+
</html>

‎packages/@vue/package.json

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "@use-ui/vue",
3+
"version": "0.0.0",
4+
"description": "",
5+
"type": "module",
6+
"files": [
7+
"dist"
8+
],
9+
"main": "./dist/use-ui.umd.cjs",
10+
"module": "./dist/use-ui.js",
11+
"exports": {
12+
".": {
13+
"import": "./dist/use-ui.js",
14+
"require": "./dist/use-ui.umd.cjs"
15+
}
16+
},
17+
"scripts": {
18+
"dev": "vite",
19+
"build": "vite build"
20+
},
21+
"devDependencies": {
22+
"unocss": "^0.45.7",
23+
"vite-plugin-dts": "^1.4.1",
24+
"vite-plugin-libcss": "^1.0.5"
25+
},
26+
"keywords": [],
27+
"author": "akashi",
28+
"license": "MIT"
29+
}

‎packages/@vue/public/vite.svg

Lines changed: 1 addition & 0 deletions
Loading

‎packages/@vue/sample/App.vue

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script setup lang="ts">
2+
//
3+
</script>
4+
5+
<template>
6+
<div>
7+
<a href="https://vitejs.dev" target="_blank">
8+
<img src="./assets/vite.svg" class="logo" alt="Vite logo" />
9+
</a>
10+
<a href="https://vuejs.org/" target="_blank">
11+
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
12+
</a>
13+
</div>
14+
</template>
15+
16+
<style scoped>
17+
.logo {
18+
height: 6em;
19+
padding: 1.5em;
20+
will-change: filter;
21+
}
22+
23+
.logo:hover {
24+
filter: drop-shadow(0 0 2em #646cffaa);
25+
}
26+
27+
.logo.vue:hover {
28+
filter: drop-shadow(0 0 2em #42b883aa);
29+
}
30+
</style>

‎packages/@vue/sample/assets/vite.svg

Lines changed: 1 addition & 0 deletions
Loading

‎packages/@vue/sample/assets/vue.svg

Lines changed: 1 addition & 0 deletions
Loading

‎packages/@vue/sample/main.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { createApp } from 'vue'
2+
import './style.css'
3+
import App from './App.vue'
4+
5+
createApp(App).mount('#app')

‎packages/@vue/sample/style.css

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
:root {
2+
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
3+
font-size: 16px;
4+
line-height: 24px;
5+
font-weight: 400;
6+
7+
color-scheme: light dark;
8+
color: rgba(255, 255, 255, 0.87);
9+
background-color: #242424;
10+
11+
font-synthesis: none;
12+
text-rendering: optimizeLegibility;
13+
-webkit-font-smoothing: antialiased;
14+
-moz-osx-font-smoothing: grayscale;
15+
-webkit-text-size-adjust: 100%;
16+
}
17+
18+
a {
19+
font-weight: 500;
20+
color: #646cff;
21+
text-decoration: inherit;
22+
}
23+
a:hover {
24+
color: #535bf2;
25+
}
26+
27+
body {
28+
margin: 0;
29+
display: flex;
30+
place-items: center;
31+
min-width: 320px;
32+
min-height: 100vh;
33+
}
34+
35+
h1 {
36+
font-size: 3.2em;
37+
line-height: 1.1;
38+
}
39+
40+
button {
41+
border-radius: 8px;
42+
border: 1px solid transparent;
43+
padding: 0.6em 1.2em;
44+
font-size: 1em;
45+
font-weight: 500;
46+
font-family: inherit;
47+
background-color: #1a1a1a;
48+
cursor: pointer;
49+
transition: border-color 0.25s;
50+
}
51+
button:hover {
52+
border-color: #646cff;
53+
}
54+
button:focus,
55+
button:focus-visible {
56+
outline: 4px auto -webkit-focus-ring-color;
57+
}
58+
59+
.card {
60+
padding: 2em;
61+
}
62+
63+
#app {
64+
max-width: 1280px;
65+
margin: 0 auto;
66+
padding: 2rem;
67+
text-align: center;
68+
}
69+
70+
@media (prefers-color-scheme: light) {
71+
:root {
72+
color: #213547;
73+
background-color: #ffffff;
74+
}
75+
a:hover {
76+
color: #747bff;
77+
}
78+
button {
79+
background-color: #f9f9f9;
80+
}
81+
}

‎packages/@vue/sample/vite-env.d.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/// <reference types="vite/client" />
2+
3+
declare module '*.vue' {
4+
import type { DefineComponent } from 'vue'
5+
const component: DefineComponent<{}, {}, any>
6+
export default component
7+
}

‎packages/@vue/tsconfig.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"compilerOptions": {
3+
"target": "esnext",
4+
"useDefineForClassFields": true,
5+
"module": "esnext",
6+
"moduleResolution": "node",
7+
"strict": true,
8+
"jsx": "preserve",
9+
"sourceMap": true,
10+
"resolveJsonModule": true,
11+
"esModuleInterop": true,
12+
"lib": [
13+
"esnext",
14+
"dom"
15+
]
16+
},
17+
// "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
18+
}

‎packages/@vue/unocss.config.ts

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import {
2+
defineConfig,
3+
presetAttributify,
4+
presetIcons,
5+
presetUno,
6+
presetWebFonts,
7+
// transformerDirectives,
8+
// transformerVariantGroup,
9+
} from 'unocss'
10+
11+
export default defineConfig({
12+
shortcuts: [
13+
['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
14+
['icon-btn', 'text-[0.9em] inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
15+
],
16+
presets: [
17+
presetUno(),
18+
presetAttributify(),
19+
presetIcons({
20+
scale: 1.2,
21+
warn: true,
22+
}),
23+
presetWebFonts({
24+
fonts: {
25+
sans: 'DM Sans',
26+
serif: 'DM Serif Display',
27+
mono: 'DM Mono',
28+
},
29+
}),
30+
],
31+
// transformers: [
32+
// transformerDirectives(),
33+
// transformerVariantGroup(),
34+
// ],
35+
})

‎packages/@vue/utils/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const testFun = (a: number, b: number): number => a + b

‎packages/@vue/vite.config.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { defineConfig } from 'vite'
2+
import vue from '@vitejs/plugin-vue'
3+
import unocss from 'unocss/vite'
4+
import dts from 'vite-plugin-dts'
5+
import libCss from 'vite-plugin-libcss'
6+
7+
export default defineConfig({
8+
build: {
9+
// minify: false,
10+
lib: {
11+
entry: 'index.ts',
12+
name: 'use-ui',
13+
fileName: 'use-ui'
14+
},
15+
},
16+
plugins: [
17+
vue(),
18+
unocss({
19+
mode: 'vue-scoped',
20+
}),
21+
dts({
22+
outputDir: 'dist/types'
23+
}),
24+
libCss(),
25+
]
26+
})

0 commit comments

Comments
 (0)