@zephyr_zz/zephyr-ui 0.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/.vscode/extensions.json +3 -0
  2. package/README.md +5 -0
  3. package/index.html +13 -0
  4. package/package.json +31 -0
  5. package/packages/button/ZzButton.ts +7 -0
  6. package/packages/button/ZzButton.vue +53 -0
  7. package/packages/index.ts +10 -0
  8. package/public/vite.svg +1 -0
  9. package/src/App.vue +9 -0
  10. package/src/assets/vue.svg +1 -0
  11. package/src/main.ts +8 -0
  12. package/src/style.css +79 -0
  13. package/tsconfig.app.json +16 -0
  14. package/tsconfig.json +7 -0
  15. package/tsconfig.node.json +26 -0
  16. package/vite.config.ts +23 -0
package/.vscode/extensions.json ADDED
@@ -0,0 +1,3 @@
1
+ {
2
+ "recommendations": ["Vue.volar"]
3
+ }
package/README.md ADDED
@@ -0,0 +1,5 @@
1
+ # Vue 3 + TypeScript + Vite
2
+
3
+ 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.
4
+
5
+ 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).
package/index.html ADDED
@@ -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="/vite.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>project-code</title>
8
+ </head>
9
+ <body>
10
+ <div id="app"></div>
11
+ <script type="module" src="/src/main.ts"></script>
12
+ </body>
13
+ </html>
package/package.json ADDED
@@ -0,0 +1,31 @@
1
+ {
2
+ "name": "@zephyr_zz/zephyr-ui",
3
+ "private": false,
4
+ "main": "./dist/zephyrUi.umd.ts",
5
+ "module": "./dist/zephyrUi.es.ts",
6
+ "exports": {
7
+ ".": {
8
+ "import": "./dist/zephyrUi.es.ts",
9
+ "require": "./dist/zephyrUi.umd.ts"
10
+ }
11
+ },
12
+ "version": "0.0.0",
13
+ "type": "module",
14
+ "scripts": {
15
+ "dev": "vite",
16
+ "build": "vue-tsc -b && vite build",
17
+ "preview": "vite preview"
18
+ },
19
+ "dependencies": {
20
+ "vue": "^3.5.22"
21
+ },
22
+ "devDependencies": {
23
+ "@types/node": "^24.6.0",
24
+ "@vitejs/plugin-vue": "^6.0.1",
25
+ "@vue/tsconfig": "^0.8.1",
26
+ "sass-embedded": "^1.93.2",
27
+ "typescript": "~5.9.3",
28
+ "vite": "^7.1.7",
29
+ "vue-tsc": "^3.1.0"
30
+ }
31
+ }
package/packages/button/ZzButton.ts ADDED
@@ -0,0 +1,7 @@
1
+ import ZzButton from "./ZzButton.vue";
2
+
3
+ ZzButton.install = (app: any) => {
4
+ app.component(ZzButton.name, ZzButton);
5
+ };
6
+
7
+ export default ZzButton;
package/packages/button/ZzButton.vue ADDED
@@ -0,0 +1,53 @@
1
+ <template>
2
+ <button class="zz-button" :class="`zz-button--${type}`">
3
+ <slot />
4
+ </button>
5
+ </template>
6
+
7
+ <script setup lang="ts">
8
+ import type { PropType } from 'vue';
9
+
10
+ defineProps({
11
+ type: {
12
+ type: String as PropType<'primary' | 'success' | 'warning' | 'danger'>,
13
+ default: 'primary'
14
+ }
15
+ })
16
+ </script>
17
+
18
+ <script lang="ts">
19
+ export default {
20
+ name: "ZzButton",
21
+ };
22
+ </script>
23
+
24
+ <style scoped lang="scss">
25
+ .zz-button {
26
+ padding: 8px 16px;
27
+ border: none;
28
+ border-radius: 4px;
29
+ cursor: pointer;
30
+ font-weight: 500;
31
+ transition: 0.2s;
32
+
33
+ &--primary {
34
+ background: #409eff;
35
+ color: white;
36
+ }
37
+
38
+ &--success {
39
+ background: #67c23a;
40
+ color: white;
41
+ }
42
+
43
+ &--warning {
44
+ background: #e6a23c;
45
+ color: white;
46
+ }
47
+
48
+ &--danger {
49
+ background: #f56c6c;
50
+ color: white;
51
+ }
52
+ }
53
+ </style>
package/packages/index.ts ADDED
@@ -0,0 +1,10 @@
1
+ import ZzButton from "./button/ZzButton";
2
+ const install = (app: any) => {
3
+ app.use(ZzButton);
4
+ };
5
+
6
+ const ZephyrUI = {
7
+ install
8
+ };
9
+
10
+ export default ZephyrUI;
package/public/vite.svg ADDED
@@ -0,0 +1 @@
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>
package/src/App.vue ADDED
@@ -0,0 +1,9 @@
1
+ <script setup lang="ts">
2
+
3
+ </script>
4
+
5
+ <template>
6
+ <ZzButton>我的按钮</ZzButton>
7
+ </template>
8
+
9
+ <style scoped></style>
package/src/assets/vue.svg ADDED
@@ -0,0 +1 @@
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>
package/src/main.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { createApp } from 'vue'
2
+ import './style.css'
3
+ import App from './App.vue'
4
+ import ZephyrUI from '../packages'
5
+
6
+ const app = createApp(App);
7
+ app.use(ZephyrUI);
8
+ app.mount('#app');
package/src/style.css ADDED
@@ -0,0 +1,79 @@
1
+ :root {
2
+ font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
3
+ line-height: 1.5;
4
+ font-weight: 400;
5
+
6
+ color-scheme: light dark;
7
+ color: rgba(255, 255, 255, 0.87);
8
+ background-color: #242424;
9
+
10
+ font-synthesis: none;
11
+ text-rendering: optimizeLegibility;
12
+ -webkit-font-smoothing: antialiased;
13
+ -moz-osx-font-smoothing: grayscale;
14
+ }
15
+
16
+ a {
17
+ font-weight: 500;
18
+ color: #646cff;
19
+ text-decoration: inherit;
20
+ }
21
+ a:hover {
22
+ color: #535bf2;
23
+ }
24
+
25
+ body {
26
+ margin: 0;
27
+ display: flex;
28
+ place-items: center;
29
+ min-width: 320px;
30
+ min-height: 100vh;
31
+ }
32
+
33
+ h1 {
34
+ font-size: 3.2em;
35
+ line-height: 1.1;
36
+ }
37
+
38
+ button {
39
+ border-radius: 8px;
40
+ border: 1px solid transparent;
41
+ padding: 0.6em 1.2em;
42
+ font-size: 1em;
43
+ font-weight: 500;
44
+ font-family: inherit;
45
+ background-color: #1a1a1a;
46
+ cursor: pointer;
47
+ transition: border-color 0.25s;
48
+ }
49
+ button:hover {
50
+ border-color: #646cff;
51
+ }
52
+ button:focus,
53
+ button:focus-visible {
54
+ outline: 4px auto -webkit-focus-ring-color;
55
+ }
56
+
57
+ .card {
58
+ padding: 2em;
59
+ }
60
+
61
+ #app {
62
+ max-width: 1280px;
63
+ margin: 0 auto;
64
+ padding: 2rem;
65
+ text-align: center;
66
+ }
67
+
68
+ @media (prefers-color-scheme: light) {
69
+ :root {
70
+ color: #213547;
71
+ background-color: #ffffff;
72
+ }
73
+ a:hover {
74
+ color: #747bff;
75
+ }
76
+ button {
77
+ background-color: #f9f9f9;
78
+ }
79
+ }
package/tsconfig.app.json ADDED
@@ -0,0 +1,16 @@
1
+ {
2
+ "extends": "@vue/tsconfig/tsconfig.dom.json",
3
+ "compilerOptions": {
4
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
5
+ "types": ["vite/client"],
6
+
7
+ /* Linting */
8
+ "strict": true,
9
+ "noUnusedLocals": true,
10
+ "noUnusedParameters": true,
11
+ "erasableSyntaxOnly": true,
12
+ "noFallthroughCasesInSwitch": true,
13
+ "noUncheckedSideEffectImports": true
14
+ },
15
+ "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
16
+ }
package/tsconfig.json ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "files": [],
3
+ "references": [
4
+ { "path": "./tsconfig.app.json" },
5
+ { "path": "./tsconfig.node.json" }
6
+ ]
7
+ }
package/tsconfig.node.json ADDED
@@ -0,0 +1,26 @@
1
+ {
2
+ "compilerOptions": {
3
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
4
+ "target": "ES2023",
5
+ "lib": ["ES2023"],
6
+ "module": "ESNext",
7
+ "types": ["node"],
8
+ "skipLibCheck": true,
9
+
10
+ /* Bundler mode */
11
+ "moduleResolution": "bundler",
12
+ "allowImportingTsExtensions": true,
13
+ "verbatimModuleSyntax": true,
14
+ "moduleDetection": "force",
15
+ "noEmit": true,
16
+
17
+ /* Linting */
18
+ "strict": true,
19
+ "noUnusedLocals": true,
20
+ "noUnusedParameters": true,
21
+ "erasableSyntaxOnly": true,
22
+ "noFallthroughCasesInSwitch": true,
23
+ "noUncheckedSideEffectImports": true
24
+ },
25
+ "include": ["vite.config.ts"]
26
+ }
package/vite.config.ts ADDED
@@ -0,0 +1,23 @@
1
+ import { defineConfig } from 'vite'
2
+ import vue from '@vitejs/plugin-vue'
3
+
4
+ // https://vite.dev/config/
5
+ export default defineConfig({
6
+ plugins: [vue()],
7
+ build: {
8
+ lib: {
9
+ entry: './packages/index.ts',
10
+ name: 'zephyrUi',
11
+ fileName: (format) => `zephyrUi.${format}.ts`,
12
+ formats: ['es', 'umd']
13
+ },
14
+ rollupOptions: {
15
+ external: ['vue'],
16
+ output: {
17
+ globals: {
18
+ vue: 'Vue'// 抛出一个全局对象
19
+ }
20
+ }
21
+ }
22
+ }
23
+ })