little-dizzy 1.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.
package/README.en.md ADDED
@@ -0,0 +1,36 @@
1
+ # little-dizzy
2
+
3
+ #### Description
4
+ LittleDizzy - 一个支持代码片段的 Vue 3 UI 组件库
5
+
6
+ #### Software Architecture
7
+ Software architecture description
8
+
9
+ #### Installation
10
+
11
+ 1. xxxx
12
+ 2. xxxx
13
+ 3. xxxx
14
+
15
+ #### Instructions
16
+
17
+ 1. xxxx
18
+ 2. xxxx
19
+ 3. xxxx
20
+
21
+ #### Contribution
22
+
23
+ 1. Fork the repository
24
+ 2. Create Feat_xxx branch
25
+ 3. Commit your code
26
+ 4. Create Pull Request
27
+
28
+
29
+ #### Gitee Feature
30
+
31
+ 1. You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
32
+ 2. Gitee blog [blog.gitee.com](https://blog.gitee.com)
33
+ 3. Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
34
+ 4. The most valuable open source project [GVP](https://gitee.com/gvp)
35
+ 5. The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
36
+ 6. The most popular members [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
package/README.md ADDED
@@ -0,0 +1,162 @@
1
+ # LittleDizzy
2
+
3
+ 基于 Vue 3 的 UI 组件库,支持代码片段预览功能。
4
+
5
+ ## 安装
6
+
7
+ ```bash
8
+ npm install little-dizzy
9
+ ```
10
+
11
+ ## 使用方式
12
+
13
+ ### 完整引入
14
+
15
+ ```javascript
16
+ import { createApp } from 'vue'
17
+ import LittleDizzy from 'little-dizzy'
18
+ import 'little-dizzy/dist/styles/index.css'
19
+
20
+ const app = createApp(App)
21
+ app.use(LittleDizzy)
22
+ app.mount('#app')
23
+ ```
24
+
25
+ ### 按需引入
26
+
27
+ ```javascript
28
+ import { createApp } from 'vue'
29
+ import { Button, Card, Modal } from 'little-dizzy'
30
+ import 'little-dizzy/dist/styles/index.css'
31
+
32
+ const app = createApp(App)
33
+ app.component('Button', Button)
34
+ app.component('Card', Card)
35
+ app.component('Modal', Modal)
36
+ app.mount('#app')
37
+ ```
38
+
39
+ ## 组件列表
40
+
41
+ ### Button 按钮
42
+
43
+ ```vue
44
+ <template>
45
+ <Button type="primary">主要按钮</Button>
46
+ <Button type="success">成功按钮</Button>
47
+ <Button type="warning">警告按钮</Button>
48
+ <Button type="danger">危险按钮</Button>
49
+ </template>
50
+ ```
51
+
52
+ **Props:**
53
+ - `type`: 按钮类型,可选值 `primary` | `success` | `warning` | `danger` | `info` | `secondary`
54
+ - `size`: 按钮尺寸,可选值 `small` | `medium` | `large`
55
+ - `disabled`: 是否禁用
56
+
57
+ ### Card 卡片
58
+
59
+ ```vue
60
+ <template>
61
+ <Card title="卡片标题">
62
+ <template #header>
63
+ <Button type="primary" size="small">操作</Button>
64
+ </template>
65
+ <div>卡片内容</div>
66
+ <template #footer>
67
+ <Button type="secondary">取消</Button>
68
+ <Button type="primary">确认</Button>
69
+ </template>
70
+ </Card>
71
+ </template>
72
+ ```
73
+
74
+ **Props:**
75
+ - `title`: 卡片标题
76
+ - `shadow`: 是否显示阴影,默认 `true`
77
+
78
+ **Slots:**
79
+ - `default`: 卡片内容
80
+ - `header`: 卡片头部
81
+ - `footer`: 卡片底部
82
+
83
+ ### Modal 模态框
84
+
85
+ ```vue
86
+ <template>
87
+ <Button @click="visible = true">打开模态框</Button>
88
+ <Modal :visible="visible" title="标题" @close="visible = false">
89
+ <div>模态框内容</div>
90
+ </Modal>
91
+ </template>
92
+
93
+ <script setup>
94
+ import { ref } from 'vue'
95
+ const visible = ref(false)
96
+ </script>
97
+ ```
98
+
99
+ **Props:**
100
+ - `visible`: 是否显示
101
+ - `title`: 标题
102
+ - `showFooter`: 是否显示默认底部按钮
103
+
104
+ **Events:**
105
+ - `close`: 关闭时触发
106
+ - `cancel`: 点击取消按钮
107
+ - `confirm`: 点击确认按钮
108
+
109
+ ## 代码片段系统
110
+
111
+ LittleDizzy 提供了代码片段注册系统,方便展示组件使用示例。
112
+
113
+ ### 注册自定义代码片段
114
+
115
+ ```javascript
116
+ import { registerSnippet } from 'little-dizzy'
117
+
118
+ registerSnippet({
119
+ name: 'MyButton',
120
+ type: 'html', // 'vue' | 'html' | 'css' | 'javascript'
121
+ label: '我的按钮',
122
+ code: `<button class="my-btn">Click Me</button>
123
+
124
+ <style>
125
+ .my-btn {
126
+ padding: 10px 20px;
127
+ background: #42b883;
128
+ color: white;
129
+ border: none;
130
+ border-radius: 4px;
131
+ }
132
+ </style>`
133
+ })
134
+ ```
135
+
136
+ ### 获取所有代码片段
137
+
138
+ ```javascript
139
+ import { snippets } from 'little-dizzy'
140
+
141
+ const allSnippets = snippets()
142
+ ```
143
+
144
+ ## 开发
145
+
146
+ ```bash
147
+ # 安装依赖
148
+ npm install
149
+
150
+ # 启动开发服务器
151
+ npm run dev
152
+
153
+ # 构建库
154
+ npm run build:lib
155
+
156
+ # 构建演示站点
157
+ npm run build
158
+ ```
159
+
160
+ ## License
161
+
162
+ MIT
@@ -0,0 +1 @@
1
+ [data-v-75f082b2]{margin:0;padding:0;box-sizing:border-box}body[data-v-75f082b2]{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;color:#303133;background-color:#f5f7fa}.btn[data-v-75f082b2]:hover{opacity:.9}.btn[data-v-75f082b2]:active{opacity:1}.btn[data-v-75f082b2]:disabled{cursor:not-allowed;opacity:.6}.btn-primary[data-v-75f082b2]:hover{background-color:#0d84ff;border-color:#0d84ff}.btn-success[data-v-75f082b2]:hover{background-color:#529b2e;border-color:#529b2e}.btn-warning[data-v-75f082b2]:hover{background-color:#d48a1b;border-color:#d48a1b}.btn-danger[data-v-75f082b2]:hover{background-color:#f23c3c;border-color:#f23c3c}.btn-info[data-v-75f082b2]:hover{background-color:#767980;border-color:#767980}.btn-secondary[data-v-75f082b2]:hover{color:#409eff;border-color:#409eff}.card[data-v-75f082b2]{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:8px;box-shadow:0 2px 4px #0000001a;transition:box-shadow .3s}.card[data-v-75f082b2]:hover{box-shadow:0 4px 12px #00000026}.card-header[data-v-75f082b2]{padding:16px;border-bottom:1px solid rgba(0,0,0,.125)}.card-header-title[data-v-75f082b2]{margin:0;font-size:16px;font-weight:600}.card-body[data-v-75f082b2]{flex:1 1 auto;padding:16px}.card-footer[data-v-75f082b2]{padding:16px;border-top:1px solid rgba(0,0,0,.125)}.modal[data-v-75f082b2]{position:fixed;top:0;left:0;z-index:1050;display:none;width:100%;height:100%;overflow:hidden;outline:0;background-color:#00000080}.modal.show[data-v-75f082b2]{display:flex;justify-content:center;align-items:center}.modal-dialog[data-v-75f082b2]{position:relative;width:auto;margin:10px;pointer-events:none}@media(min-width:576px){.modal-dialog[data-v-75f082b2]{max-width:500px;margin:1.75rem auto}}.modal-content[data-v-75f082b2]{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:8px;outline:0;box-shadow:0 6px 20px #0003}.modal-header[data-v-75f082b2]{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #dee2e6;border-top-left-radius:7px;border-top-right-radius:7px}.modal-header-title[data-v-75f082b2]{margin:0;font-size:16px;font-weight:600}.modal-header-close[data-v-75f082b2]{padding:0;background-color:transparent;border:0;cursor:pointer;font-size:1.5rem;line-height:1;color:#6c757d;opacity:.5}.modal-header-close[data-v-75f082b2]:hover{opacity:1}.modal-body[data-v-75f082b2]{position:relative;flex:1 1 auto;padding:16px}.modal-footer[data-v-75f082b2]{display:flex;justify-content:flex-end;align-items:center;padding:16px;border-top:1px solid #dee2e6;border-bottom-left-radius:7px;border-bottom-right-radius:7px}.modal-footer[data-v-75f082b2]>*+*{margin-left:8px}.btn[data-v-75f082b2]{display:inline-block;padding:8px 16px;border:1px solid transparent;border-radius:4px;font-size:14px;font-weight:400;line-height:1.5;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;transition:all .3s}.btn[data-v-75f082b2]:hover:not(.btn-disabled){opacity:.9}.btn[data-v-75f082b2]:active:not(.btn-disabled){opacity:1}.btn.btn-disabled[data-v-75f082b2]{cursor:not-allowed;opacity:.6}.btn-primary[data-v-75f082b2]{color:#fff;background-color:#409eff;border-color:#409eff}.btn-primary[data-v-75f082b2]:hover:not(.btn-disabled){background-color:#0d84ff;border-color:#0d84ff}.btn-success[data-v-75f082b2]{color:#fff;background-color:#67c23a;border-color:#67c23a}.btn-success[data-v-75f082b2]:hover:not(.btn-disabled){background-color:#529b2e;border-color:#529b2e}.btn-warning[data-v-75f082b2]{color:#fff;background-color:#e6a23c;border-color:#e6a23c}.btn-warning[data-v-75f082b2]:hover:not(.btn-disabled){background-color:#d48a1b;border-color:#d48a1b}.btn-danger[data-v-75f082b2]{color:#fff;background-color:#f56c6c;border-color:#f56c6c}.btn-danger[data-v-75f082b2]:hover:not(.btn-disabled){background-color:#f23c3c;border-color:#f23c3c}.btn-info[data-v-75f082b2]{color:#fff;background-color:#909399;border-color:#909399}.btn-info[data-v-75f082b2]:hover:not(.btn-disabled){background-color:#767980;border-color:#767980}.btn-secondary[data-v-75f082b2]{color:#606266;background-color:#fff;border-color:#dcdfe6}.btn-secondary[data-v-75f082b2]:hover:not(.btn-disabled){color:#409eff;border-color:#409eff}.btn-small[data-v-75f082b2]{padding:4px 8px;font-size:12px}.btn-medium[data-v-75f082b2]{padding:8px 16px;font-size:14px}.btn-large[data-v-75f082b2]{padding:12px 24px;font-size:16px}.btn-block[data-v-75f082b2]{display:block;width:100%}[data-v-2d83e63a]{margin:0;padding:0;box-sizing:border-box}body[data-v-2d83e63a]{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;color:#303133;background-color:#f5f7fa}.btn[data-v-2d83e63a]{display:inline-block;padding:8px 16px;border:1px solid transparent;border-radius:4px;font-size:14px;font-weight:400;line-height:1.5;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;transition:all .3s}.btn[data-v-2d83e63a]:hover{opacity:.9}.btn[data-v-2d83e63a]:active{opacity:1}.btn[data-v-2d83e63a]:disabled{cursor:not-allowed;opacity:.6}.btn-primary[data-v-2d83e63a]{color:#fff;background-color:#409eff;border-color:#409eff}.btn-primary[data-v-2d83e63a]:hover{background-color:#0d84ff;border-color:#0d84ff}.btn-success[data-v-2d83e63a]{color:#fff;background-color:#67c23a;border-color:#67c23a}.btn-success[data-v-2d83e63a]:hover{background-color:#529b2e;border-color:#529b2e}.btn-warning[data-v-2d83e63a]{color:#fff;background-color:#e6a23c;border-color:#e6a23c}.btn-warning[data-v-2d83e63a]:hover{background-color:#d48a1b;border-color:#d48a1b}.btn-danger[data-v-2d83e63a]{color:#fff;background-color:#f56c6c;border-color:#f56c6c}.btn-danger[data-v-2d83e63a]:hover{background-color:#f23c3c;border-color:#f23c3c}.btn-info[data-v-2d83e63a]{color:#fff;background-color:#909399;border-color:#909399}.btn-info[data-v-2d83e63a]:hover{background-color:#767980;border-color:#767980}.btn-secondary[data-v-2d83e63a]{color:#606266;background-color:#fff;border-color:#dcdfe6}.btn-secondary[data-v-2d83e63a]:hover{color:#409eff;border-color:#409eff}.btn-small[data-v-2d83e63a]{padding:4px 8px;font-size:12px}.btn-large[data-v-2d83e63a]{padding:12px 24px;font-size:16px}.card[data-v-2d83e63a]{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:8px;box-shadow:0 2px 4px #0000001a;transition:box-shadow .3s}.card[data-v-2d83e63a]:hover{box-shadow:0 4px 12px #00000026}.card-header[data-v-2d83e63a]{padding:16px;border-bottom:1px solid rgba(0,0,0,.125)}.card-header-title[data-v-2d83e63a]{margin:0;font-size:16px;font-weight:600}.card-body[data-v-2d83e63a]{flex:1 1 auto;padding:16px}.card-footer[data-v-2d83e63a]{padding:16px;border-top:1px solid rgba(0,0,0,.125)}.modal[data-v-2d83e63a]{position:fixed;top:0;left:0;z-index:1050;display:none;width:100%;height:100%;overflow:hidden;outline:0;background-color:#00000080}.modal.show[data-v-2d83e63a]{display:flex;justify-content:center;align-items:center}.modal-dialog[data-v-2d83e63a]{position:relative;width:auto;margin:10px;pointer-events:none}@media(min-width:576px){.modal-dialog[data-v-2d83e63a]{max-width:500px;margin:1.75rem auto}}.modal-content[data-v-2d83e63a]{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:8px;outline:0;box-shadow:0 6px 20px #0003}.modal-header[data-v-2d83e63a]{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #dee2e6;border-top-left-radius:7px;border-top-right-radius:7px}.modal-header-title[data-v-2d83e63a]{margin:0;font-size:16px;font-weight:600}.modal-header-close[data-v-2d83e63a]{padding:0;background-color:transparent;border:0;cursor:pointer;font-size:1.5rem;line-height:1;color:#6c757d;opacity:.5}.modal-header-close[data-v-2d83e63a]:hover{opacity:1}.modal-body[data-v-2d83e63a]{position:relative;flex:1 1 auto;padding:16px}.modal-footer[data-v-2d83e63a]{display:flex;justify-content:flex-end;align-items:center;padding:16px;border-top:1px solid #dee2e6;border-bottom-left-radius:7px;border-bottom-right-radius:7px}.modal-footer[data-v-2d83e63a]>*+*{margin-left:8px}.card[data-v-2d83e63a]{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:8px;transition:box-shadow .3s}.card-shadow[data-v-2d83e63a]{box-shadow:0 2px 4px #0000001a}.card-shadow[data-v-2d83e63a]:hover{box-shadow:0 4px 12px #00000026}.card-header[data-v-2d83e63a]{padding:16px;border-bottom:1px solid rgba(0,0,0,.125);display:flex;justify-content:space-between;align-items:center}.card-header-title[data-v-2d83e63a]{margin:0;font-size:16px;font-weight:600;color:#303133}.card-body[data-v-2d83e63a]{flex:1 1 auto;padding:16px;color:#606266}.card-footer[data-v-2d83e63a]{padding:16px;border-top:1px solid rgba(0,0,0,.125);background-color:#fafafa;border-bottom-left-radius:7px;border-bottom-right-radius:7px}[data-v-c66cec30]{margin:0;padding:0;box-sizing:border-box}body[data-v-c66cec30]{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;color:#303133;background-color:#f5f7fa}.btn[data-v-c66cec30]{display:inline-block;padding:8px 16px;border:1px solid transparent;border-radius:4px;font-size:14px;font-weight:400;line-height:1.5;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;transition:all .3s}.btn[data-v-c66cec30]:hover{opacity:.9}.btn[data-v-c66cec30]:active{opacity:1}.btn[data-v-c66cec30]:disabled{cursor:not-allowed;opacity:.6}.btn-primary[data-v-c66cec30]{color:#fff;background-color:#409eff;border-color:#409eff}.btn-primary[data-v-c66cec30]:hover{background-color:#0d84ff;border-color:#0d84ff}.btn-success[data-v-c66cec30]{color:#fff;background-color:#67c23a;border-color:#67c23a}.btn-success[data-v-c66cec30]:hover{background-color:#529b2e;border-color:#529b2e}.btn-warning[data-v-c66cec30]{color:#fff;background-color:#e6a23c;border-color:#e6a23c}.btn-warning[data-v-c66cec30]:hover{background-color:#d48a1b;border-color:#d48a1b}.btn-danger[data-v-c66cec30]{color:#fff;background-color:#f56c6c;border-color:#f56c6c}.btn-danger[data-v-c66cec30]:hover{background-color:#f23c3c;border-color:#f23c3c}.btn-info[data-v-c66cec30]{color:#fff;background-color:#909399;border-color:#909399}.btn-info[data-v-c66cec30]:hover{background-color:#767980;border-color:#767980}.btn-secondary[data-v-c66cec30]{color:#606266;background-color:#fff;border-color:#dcdfe6}.btn-secondary[data-v-c66cec30]:hover{color:#409eff;border-color:#409eff}.btn-small[data-v-c66cec30]{padding:4px 8px;font-size:12px}.btn-large[data-v-c66cec30]{padding:12px 24px;font-size:16px}.card[data-v-c66cec30]{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:8px;box-shadow:0 2px 4px #0000001a;transition:box-shadow .3s}.card[data-v-c66cec30]:hover{box-shadow:0 4px 12px #00000026}.card-header[data-v-c66cec30]{padding:16px;border-bottom:1px solid rgba(0,0,0,.125)}.card-header-title[data-v-c66cec30]{margin:0;font-size:16px;font-weight:600}.card-body[data-v-c66cec30]{flex:1 1 auto;padding:16px}.card-footer[data-v-c66cec30]{padding:16px;border-top:1px solid rgba(0,0,0,.125)}.modal.show[data-v-c66cec30]{display:flex;justify-content:center;align-items:center}.modal-header-title[data-v-c66cec30]{margin:0;font-size:16px;font-weight:600}.modal-body[data-v-c66cec30]{position:relative;flex:1 1 auto;padding:16px}.modal[data-v-c66cec30]{position:fixed;top:0;left:0;z-index:1050;display:none;width:100%;height:100%;overflow:hidden;outline:0;background-color:#00000080}.modal-show[data-v-c66cec30]{display:flex;justify-content:center;align-items:center}.modal-dialog[data-v-c66cec30]{position:relative;width:auto;margin:10px;pointer-events:none}@media(min-width:576px){.modal-dialog[data-v-c66cec30]{max-width:500px;margin:1.75rem auto}}.modal-content[data-v-c66cec30]{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:8px;outline:0;box-shadow:0 6px 20px #0003}.modal-header[data-v-c66cec30]{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #dee2e6;border-top-left-radius:7px;border-top-right-radius:7px}.modal-header-title[data-v-c66cec30]{margin:0;font-size:16px;font-weight:600;color:#303133}.modal-header-close[data-v-c66cec30]{padding:0;background-color:transparent;border:0;cursor:pointer;font-size:1.5rem;line-height:1;color:#6c757d;opacity:.5}.modal-header-close[data-v-c66cec30]:hover{opacity:1}.modal-body[data-v-c66cec30]{position:relative;flex:1 1 auto;padding:16px;color:#606266}.modal-footer[data-v-c66cec30]{display:flex;justify-content:flex-end;align-items:center;padding:16px;border-top:1px solid #dee2e6;border-bottom-left-radius:7px;border-bottom-right-radius:7px}.modal-footer[data-v-c66cec30]>*+*{margin-left:8px}
@@ -0,0 +1,269 @@
1
+ import { createElementBlock as s, openBlock as n, normalizeClass as u, renderSlot as i, createCommentVNode as r, createElementVNode as l, toDisplayString as f } from "vue";
2
+ const m = (t, e) => {
3
+ const o = t.__vccOpts || t;
4
+ for (const [a, d] of e)
5
+ o[a] = d;
6
+ return o;
7
+ }, B = ["disabled"], $ = {
8
+ __name: "Button",
9
+ props: {
10
+ // 按钮类型
11
+ type: {
12
+ type: String,
13
+ default: "primary",
14
+ validator: (t) => ["primary", "success", "warning", "danger", "info", "secondary"].includes(t)
15
+ },
16
+ // 按钮尺寸
17
+ size: {
18
+ type: String,
19
+ default: "medium",
20
+ validator: (t) => ["small", "medium", "large"].includes(t)
21
+ },
22
+ // 是否为块级按钮
23
+ block: {
24
+ type: Boolean,
25
+ default: !1
26
+ },
27
+ // 是否禁用
28
+ disabled: {
29
+ type: Boolean,
30
+ default: !1
31
+ }
32
+ },
33
+ emits: ["click"],
34
+ setup(t, { emit: e }) {
35
+ return (o, a) => (n(), s("button", {
36
+ class: u(["btn", [
37
+ `btn-${t.type}`,
38
+ `btn-${t.size}`,
39
+ { "btn-block": t.block },
40
+ { "btn-disabled": t.disabled }
41
+ ]]),
42
+ disabled: t.disabled,
43
+ onClick: a[0] || (a[0] = (d) => o.$emit("click", d))
44
+ }, [
45
+ i(o.$slots, "default", {}, void 0, !0)
46
+ ], 10, B));
47
+ }
48
+ }, g = /* @__PURE__ */ m($, [["__scopeId", "data-v-75f082b2"]]), k = {
49
+ key: 0,
50
+ class: "card-header"
51
+ }, _ = {
52
+ key: 0,
53
+ class: "card-header-title"
54
+ }, S = { class: "card-body" }, C = {
55
+ key: 1,
56
+ class: "card-footer"
57
+ }, z = {
58
+ __name: "Card",
59
+ props: {
60
+ // 卡片标题
61
+ title: {
62
+ type: String,
63
+ default: ""
64
+ },
65
+ // 是否显示阴影
66
+ shadow: {
67
+ type: Boolean,
68
+ default: !0
69
+ }
70
+ },
71
+ setup(t) {
72
+ return (e, o) => (n(), s("div", {
73
+ class: u(["card", { "card-shadow": t.shadow }])
74
+ }, [
75
+ e.$slots.header || t.title ? (n(), s("div", k, [
76
+ t.title ? (n(), s("h3", _, f(t.title), 1)) : r("", !0),
77
+ i(e.$slots, "header", {}, void 0, !0)
78
+ ])) : r("", !0),
79
+ l("div", S, [
80
+ i(e.$slots, "default", {}, void 0, !0)
81
+ ]),
82
+ e.$slots.footer ? (n(), s("div", C, [
83
+ i(e.$slots, "footer", {}, void 0, !0)
84
+ ])) : r("", !0)
85
+ ], 2));
86
+ }
87
+ }, w = /* @__PURE__ */ m(z, [["__scopeId", "data-v-2d83e63a"]]), M = { class: "modal-dialog" }, E = { class: "modal-content" }, D = { class: "modal-header" }, I = {
88
+ key: 0,
89
+ class: "modal-header-title"
90
+ }, A = { class: "modal-body" }, F = {
91
+ key: 0,
92
+ class: "modal-footer"
93
+ }, L = {
94
+ key: 1,
95
+ class: "modal-footer"
96
+ }, N = {
97
+ __name: "Modal",
98
+ props: {
99
+ // 是否显示模态框
100
+ visible: {
101
+ type: Boolean,
102
+ default: !1
103
+ },
104
+ // 模态框标题
105
+ title: {
106
+ type: String,
107
+ default: ""
108
+ },
109
+ // 是否显示默认底部按钮
110
+ showFooter: {
111
+ type: Boolean,
112
+ default: !0
113
+ }
114
+ },
115
+ emits: ["close", "cancel", "confirm"],
116
+ setup(t, { emit: e }) {
117
+ const o = e, a = () => {
118
+ o("close");
119
+ }, d = () => {
120
+ o("cancel");
121
+ }, v = () => {
122
+ o("confirm");
123
+ };
124
+ return (c, K) => t.visible ? (n(), s("div", {
125
+ key: 0,
126
+ class: u(["modal", { "modal-show": t.visible }])
127
+ }, [
128
+ l("div", M, [
129
+ l("div", E, [
130
+ l("div", D, [
131
+ t.title ? (n(), s("h3", I, f(t.title), 1)) : r("", !0),
132
+ l("button", {
133
+ class: "modal-header-close",
134
+ onClick: a
135
+ }, "×")
136
+ ]),
137
+ l("div", A, [
138
+ i(c.$slots, "default", {}, void 0, !0)
139
+ ]),
140
+ c.$slots.footer ? (n(), s("div", F, [
141
+ i(c.$slots, "footer", {}, void 0, !0)
142
+ ])) : t.showFooter ? (n(), s("div", L, [
143
+ l("button", {
144
+ class: "btn btn-secondary",
145
+ onClick: d
146
+ }, "取消"),
147
+ l("button", {
148
+ class: "btn btn-primary",
149
+ onClick: v
150
+ }, "确定")
151
+ ])) : r("", !0)
152
+ ])
153
+ ])
154
+ ], 2)) : r("", !0);
155
+ }
156
+ }, O = /* @__PURE__ */ m(N, [["__scopeId", "data-v-c66cec30"]]), V = {
157
+ name: "Button",
158
+ type: "vue",
159
+ label: "Button 按钮",
160
+ code: `<template>
161
+ <Button type="primary">主要按钮</Button>
162
+ <Button type="success">成功按钮</Button>
163
+ <Button type="warning">警告按钮</Button>
164
+ <Button type="danger">危险按钮</Button>
165
+ </template>
166
+
167
+ <script setup>
168
+ import { Button } from 'little-dizzy'
169
+ <\/script>`
170
+ }, j = {
171
+ name: "Card",
172
+ type: "vue",
173
+ label: "Card 卡片",
174
+ code: `<template>
175
+ <Card title="卡片标题">
176
+ <template #header>
177
+ <Button type="primary" size="small">操作</Button>
178
+ </template>
179
+ <div>卡片内容区域</div>
180
+ <template #footer>
181
+ <Button type="secondary" size="small">关闭</Button>
182
+ <Button type="primary" size="small">确认</Button>
183
+ </template>
184
+ </Card>
185
+ </template>
186
+
187
+ <script setup>
188
+ import { Card, Button } from 'little-dizzy'
189
+ <\/script>`
190
+ }, R = {
191
+ name: "Modal",
192
+ type: "vue",
193
+ label: "Modal 模态框",
194
+ code: `<template>
195
+ <div>
196
+ <Button type="primary" @click="visible = true">
197
+ 打开模态框
198
+ </Button>
199
+ <Modal
200
+ :visible="visible"
201
+ title="模态框标题"
202
+ @close="visible = false"
203
+ >
204
+ <div>模态框内容区域</div>
205
+ </Modal>
206
+ </div>
207
+ </template>
208
+
209
+ <script setup>
210
+ import { ref } from 'vue'
211
+ import { Modal, Button } from 'little-dizzy'
212
+
213
+ const visible = ref(false)
214
+ <\/script>`
215
+ }, q = [
216
+ V,
217
+ j,
218
+ R
219
+ ], p = /* @__PURE__ */ new Map();
220
+ function y(t) {
221
+ return !t || !t.name ? (console.warn("[LittleDizzy] Snippet must have a name property"), !1) : (p.set(t.name, {
222
+ name: t.name,
223
+ type: t.type || "html",
224
+ label: t.label || t.name,
225
+ code: t.code || "",
226
+ isCustom: t.isCustom || !1,
227
+ ...t
228
+ }), !0);
229
+ }
230
+ function b(t) {
231
+ if (!Array.isArray(t))
232
+ return console.warn("[LittleDizzy] registerSnippets expects an array"), 0;
233
+ let e = 0;
234
+ return t.forEach((o) => {
235
+ y(o) && e++;
236
+ }), e;
237
+ }
238
+ function G() {
239
+ const t = {};
240
+ return p.forEach((e, o) => {
241
+ t[o] = e;
242
+ }), t;
243
+ }
244
+ function H(t) {
245
+ return p.get(t);
246
+ }
247
+ b(q);
248
+ const h = {
249
+ Button: g,
250
+ Card: w,
251
+ Modal: O
252
+ }, J = (t, e = {}) => {
253
+ Object.entries(h).forEach(([o, a]) => {
254
+ t.component(e.prefix ? `${e.prefix}${o}` : o, a);
255
+ });
256
+ }, Q = G, T = y, U = b, W = H, X = {
257
+ install: J,
258
+ ...h
259
+ };
260
+ export {
261
+ g as Button,
262
+ w as Card,
263
+ O as Modal,
264
+ X as default,
265
+ W as getSnippet,
266
+ T as registerSnippet,
267
+ U as registerSnippets,
268
+ Q as snippets
269
+ };
@@ -0,0 +1,45 @@
1
+ (function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.LittleDizzy={},l.Vue))})(this,(function(l,e){"use strict";const i=(t,o)=>{const n=t.__vccOpts||t;for(const[a,s]of o)n[a]=s;return n},B=["disabled"],c=i({__name:"Button",props:{type:{type:String,default:"primary",validator:t=>["primary","success","warning","danger","info","secondary"].includes(t)},size:{type:String,default:"medium",validator:t=>["small","medium","large"].includes(t)},block:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},emits:["click"],setup(t,{emit:o}){return(n,a)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["btn",[`btn-${t.type}`,`btn-${t.size}`,{"btn-block":t.block},{"btn-disabled":t.disabled}]]),disabled:t.disabled,onClick:a[0]||(a[0]=s=>n.$emit("click",s))},[e.renderSlot(n.$slots,"default",{},void 0,!0)],10,B))}},[["__scopeId","data-v-75f082b2"]]),b={key:0,class:"card-header"},h={key:0,class:"card-header-title"},k={class:"card-body"},S={key:1,class:"card-footer"},m=i({__name:"Card",props:{title:{type:String,default:""},shadow:{type:Boolean,default:!0}},setup(t){return(o,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["card",{"card-shadow":t.shadow}])},[o.$slots.header||t.title?(e.openBlock(),e.createElementBlock("div",b,[t.title?(e.openBlock(),e.createElementBlock("h3",h,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"header",{},void 0,!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",k,[e.renderSlot(o.$slots,"default",{},void 0,!0)]),o.$slots.footer?(e.openBlock(),e.createElementBlock("div",S,[e.renderSlot(o.$slots,"footer",{},void 0,!0)])):e.createCommentVNode("",!0)],2))}},[["__scopeId","data-v-2d83e63a"]]),_={class:"modal-dialog"},g={class:"modal-content"},C={class:"modal-header"},$={key:0,class:"modal-header-title"},z={class:"modal-body"},E={key:0,class:"modal-footer"},V={key:1,class:"modal-footer"},p=i({__name:"Modal",props:{visible:{type:Boolean,default:!1},title:{type:String,default:""},showFooter:{type:Boolean,default:!0}},emits:["close","cancel","confirm"],setup(t,{emit:o}){const n=o,a=()=>{n("close")},s=()=>{n("cancel")},A=()=>{n("confirm")};return(d,J)=>t.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["modal",{"modal-show":t.visible}])},[e.createElementVNode("div",_,[e.createElementVNode("div",g,[e.createElementVNode("div",C,[t.title?(e.openBlock(),e.createElementBlock("h3",$,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.createElementVNode("button",{class:"modal-header-close",onClick:a},"×")]),e.createElementVNode("div",z,[e.renderSlot(d.$slots,"default",{},void 0,!0)]),d.$slots.footer?(e.openBlock(),e.createElementBlock("div",E,[e.renderSlot(d.$slots,"footer",{},void 0,!0)])):t.showFooter?(e.openBlock(),e.createElementBlock("div",V,[e.createElementVNode("button",{class:"btn btn-secondary",onClick:s},"取消"),e.createElementVNode("button",{class:"btn btn-primary",onClick:A},"确定")])):e.createCommentVNode("",!0)])])],2)):e.createCommentVNode("",!0)}},[["__scopeId","data-v-c66cec30"]]),N=[{name:"Button",type:"vue",label:"Button 按钮",code:`<template>
2
+ <Button type="primary">主要按钮</Button>
3
+ <Button type="success">成功按钮</Button>
4
+ <Button type="warning">警告按钮</Button>
5
+ <Button type="danger">危险按钮</Button>
6
+ </template>
7
+
8
+ <script setup>
9
+ import { Button } from 'little-dizzy'
10
+ <\/script>`},{name:"Card",type:"vue",label:"Card 卡片",code:`<template>
11
+ <Card title="卡片标题">
12
+ <template #header>
13
+ <Button type="primary" size="small">操作</Button>
14
+ </template>
15
+ <div>卡片内容区域</div>
16
+ <template #footer>
17
+ <Button type="secondary" size="small">关闭</Button>
18
+ <Button type="primary" size="small">确认</Button>
19
+ </template>
20
+ </Card>
21
+ </template>
22
+
23
+ <script setup>
24
+ import { Card, Button } from 'little-dizzy'
25
+ <\/script>`},{name:"Modal",type:"vue",label:"Modal 模态框",code:`<template>
26
+ <div>
27
+ <Button type="primary" @click="visible = true">
28
+ 打开模态框
29
+ </Button>
30
+ <Modal
31
+ :visible="visible"
32
+ title="模态框标题"
33
+ @close="visible = false"
34
+ >
35
+ <div>模态框内容区域</div>
36
+ </Modal>
37
+ </div>
38
+ </template>
39
+
40
+ <script setup>
41
+ import { ref } from 'vue'
42
+ import { Modal, Button } from 'little-dizzy'
43
+
44
+ const visible = ref(false)
45
+ <\/script>`}],r=new Map;function u(t){return!t||!t.name?(console.warn("[LittleDizzy] Snippet must have a name property"),!1):(r.set(t.name,{name:t.name,type:t.type||"html",label:t.label||t.name,code:t.code||"",isCustom:t.isCustom||!1,...t}),!0)}function f(t){if(!Array.isArray(t))return console.warn("[LittleDizzy] registerSnippets expects an array"),0;let o=0;return t.forEach(n=>{u(n)&&o++}),o}function w(){const t={};return r.forEach((o,n)=>{t[n]=o}),t}function M(t){return r.get(t)}f(N);const y={Button:c,Card:m,Modal:p},D=(t,o={})=>{Object.entries(y).forEach(([n,a])=>{t.component(o.prefix?`${o.prefix}${n}`:n,a)})},j=w,I=u,L=f,O=M,T={install:D,...y};l.Button=c,l.Card=m,l.Modal=p,l.default=T,l.getSnippet=O,l.registerSnippet=I,l.registerSnippets=L,l.snippets=j,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
package/dist/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/package.json ADDED
@@ -0,0 +1,55 @@
1
+ {
2
+ "name": "little-dizzy",
3
+ "version": "1.0.0",
4
+ "description": "LittleDizzy - 一个支持代码片段的 Vue 3 UI 组件库",
5
+ "type": "module",
6
+ "main": "dist/little-dizzy.umd.cjs",
7
+ "module": "dist/little-dizzy.js",
8
+ "exports": {
9
+ ".": {
10
+ "import": "./dist/little-dizzy.js",
11
+ "require": "./dist/little-dizzy.umd.cjs"
12
+ },
13
+ "./dist/*": "./dist/*",
14
+ "./src/*": "./src/*"
15
+ },
16
+ "files": [
17
+ "dist",
18
+ "src/components",
19
+ "src/snippets",
20
+ "src/styles",
21
+ "src/index.js"
22
+ ],
23
+ "scripts": {
24
+ "dev": "vite",
25
+ "build": "vite build",
26
+ "build:lib": "vite build --config vite.lib.config.js",
27
+ "preview": "vite preview"
28
+ },
29
+ "keywords": [
30
+ "vue",
31
+ "vue3",
32
+ "ui",
33
+ "components",
34
+ "snippets",
35
+ "little-dizzy",
36
+ "LittleDizzy"
37
+ ],
38
+ "author": "fsk",
39
+ "license": "MIT",
40
+ "repository": {
41
+ "type": "git",
42
+ "url": "https://gitee.com/nizuinande/little-dizzy"
43
+ },
44
+ "peerDependencies": {
45
+ "vue": "^3.0.0"
46
+ },
47
+ "dependencies": {
48
+ "vue": "^3.5.24"
49
+ },
50
+ "devDependencies": {
51
+ "@vitejs/plugin-vue": "^6.0.1",
52
+ "sass": "^1.97.1",
53
+ "vite": "^7.2.4"
54
+ }
55
+ }