@bagelink/vue 0.0.1214 → 0.0.1216
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.
|
@@ -1,19 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
export interface DialogOptions {
|
|
3
|
-
title?: string;
|
|
4
|
-
content?: string | Component;
|
|
5
|
-
dismissable?: boolean;
|
|
6
|
-
width?: string;
|
|
7
|
-
actions?: Array<{
|
|
8
|
-
label: string;
|
|
9
|
-
onClick: () => void;
|
|
10
|
-
variant?: 'primary' | 'secondary' | 'danger';
|
|
11
|
-
}>;
|
|
12
|
-
}
|
|
13
|
-
export interface DialogApi {
|
|
14
|
-
show: (options: DialogOptions) => void;
|
|
15
|
-
hide: () => void;
|
|
16
|
-
}
|
|
17
|
-
export declare function useDialog(): DialogApi;
|
|
18
|
-
export declare const DialogPlugin: Plugin;
|
|
1
|
+
export {};
|
|
19
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/index.ts"],"names":[],"mappings":""}
|
package/package.json
CHANGED
|
File without changes
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
// import type { App, Component, InjectionKey, Plugin, PropType } from 'vue'
|
|
2
|
+
// import { createApp, defineComponent, h, inject } from 'vue'
|
|
3
|
+
|
|
4
|
+
// export interface DialogOptions {
|
|
5
|
+
// title?: string
|
|
6
|
+
// content?: string | Component
|
|
7
|
+
// dismissable?: boolean
|
|
8
|
+
// width?: string
|
|
9
|
+
// actions?: Array<{
|
|
10
|
+
// label: string
|
|
11
|
+
// onClick: () => void
|
|
12
|
+
// variant?: 'primary' | 'secondary' | 'danger'
|
|
13
|
+
// }>
|
|
14
|
+
// }
|
|
15
|
+
|
|
16
|
+
// export interface DialogApi {
|
|
17
|
+
// show: (options: DialogOptions) => void
|
|
18
|
+
// hide: () => void
|
|
19
|
+
// }
|
|
20
|
+
|
|
21
|
+
// const DialogSymbol: InjectionKey<DialogApi> = Symbol('dialog')
|
|
22
|
+
|
|
23
|
+
// export function useDialog(): DialogApi {
|
|
24
|
+
// const api = inject(DialogSymbol)
|
|
25
|
+
// if (!api) throw new Error('Dialog plugin not installed')
|
|
26
|
+
// return api
|
|
27
|
+
// }
|
|
28
|
+
|
|
29
|
+
// const Dialog = defineComponent({
|
|
30
|
+
// props: {
|
|
31
|
+
// options: {
|
|
32
|
+
// type: Object as () => DialogOptions,
|
|
33
|
+
// required: true
|
|
34
|
+
// },
|
|
35
|
+
// onClose: {
|
|
36
|
+
// type: Function as PropType<(event?: MouseEvent) => void>,
|
|
37
|
+
// required: true
|
|
38
|
+
// }
|
|
39
|
+
// },
|
|
40
|
+
// setup(props) {
|
|
41
|
+
// return () => h('div', {
|
|
42
|
+
// class: 'dialog-overlay',
|
|
43
|
+
// onClick: (e: MouseEvent) => {
|
|
44
|
+
// if (props.options.dismissable && e.target === e.currentTarget) {
|
|
45
|
+
// props.onClose()
|
|
46
|
+
// }
|
|
47
|
+
// }
|
|
48
|
+
// }, [
|
|
49
|
+
// h('div', {
|
|
50
|
+
// class: ['dialog', props.options.width ? `w-${props.options.width}` : 'w-96']
|
|
51
|
+
// }, [
|
|
52
|
+
// h('div', { class: 'dialog-header' }, [
|
|
53
|
+
// h('h3', { class: 'dialog-title' }, props.options.title),
|
|
54
|
+
// props.options.dismissable && h('button', {
|
|
55
|
+
// class: 'dialog-close',
|
|
56
|
+
// onClick: props.onClose
|
|
57
|
+
// }, '×')
|
|
58
|
+
// ]),
|
|
59
|
+
// h('div', { class: 'dialog-content' }, [
|
|
60
|
+
// typeof props.options.content === 'string'
|
|
61
|
+
// ? props.options.content
|
|
62
|
+
// : h(props.options.content as any)
|
|
63
|
+
// ]),
|
|
64
|
+
// props.options.actions && h('div', { class: 'dialog-actions' }, props.options.actions.map(action => h('button', {
|
|
65
|
+
// class: ['dialog-btn', action.variant],
|
|
66
|
+
// onClick: () => {
|
|
67
|
+
// action.onClick()
|
|
68
|
+
// props.onClose()
|
|
69
|
+
// }
|
|
70
|
+
// }, action.label)
|
|
71
|
+
// ))
|
|
72
|
+
// ])
|
|
73
|
+
// ])
|
|
74
|
+
// }
|
|
75
|
+
// })
|
|
76
|
+
|
|
77
|
+
// export const DialogPlugin: Plugin = {
|
|
78
|
+
// install: (app: App) => {
|
|
79
|
+
// // Create a div to mount our dialog
|
|
80
|
+
// const dialogContainer = document.createElement('div')
|
|
81
|
+
// document.body.appendChild(dialogContainer)
|
|
82
|
+
|
|
83
|
+
// let currentDialog: any = null
|
|
84
|
+
|
|
85
|
+
// const api: DialogApi = {
|
|
86
|
+
// show: (options: DialogOptions) => {
|
|
87
|
+
// // Remove existing dialog if any
|
|
88
|
+
// if (currentDialog) {
|
|
89
|
+
// currentDialog.unmount()
|
|
90
|
+
// }
|
|
91
|
+
|
|
92
|
+
// // Create new dialog instance
|
|
93
|
+
// const dialogApp = createApp(Dialog, {
|
|
94
|
+
// options,
|
|
95
|
+
// onClose: () => { api.hide() }
|
|
96
|
+
// })
|
|
97
|
+
|
|
98
|
+
// // Mount it
|
|
99
|
+
// currentDialog = dialogApp.mount(dialogContainer)
|
|
100
|
+
// },
|
|
101
|
+
// hide: () => {
|
|
102
|
+
// if (currentDialog) {
|
|
103
|
+
// currentDialog.unmount()
|
|
104
|
+
// currentDialog = null
|
|
105
|
+
// }
|
|
106
|
+
// }
|
|
107
|
+
// }
|
|
108
|
+
|
|
109
|
+
// app.provide(DialogSymbol, api)
|
|
110
|
+
// }
|
|
111
|
+
// }
|
|
112
|
+
|
|
113
|
+
// // Add some basic styles
|
|
114
|
+
// const style = document.createElement('style')
|
|
115
|
+
// style.textContent = `
|
|
116
|
+
// .dialog-overlay {
|
|
117
|
+
// position: fixed;
|
|
118
|
+
// top: 0;
|
|
119
|
+
// left: 0;
|
|
120
|
+
// right: 0;
|
|
121
|
+
// bottom: 0;
|
|
122
|
+
// background: rgba(0, 0, 0, 0.5);
|
|
123
|
+
// display: flex;
|
|
124
|
+
// align-items: center;
|
|
125
|
+
// justify-content: center;
|
|
126
|
+
// z-index: 1000;
|
|
127
|
+
// }
|
|
128
|
+
|
|
129
|
+
// .dialog {
|
|
130
|
+
// background: white;
|
|
131
|
+
// border-radius: 0.5rem;
|
|
132
|
+
// box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
133
|
+
// max-width: 90vw;
|
|
134
|
+
// max-height: 90vh;
|
|
135
|
+
// overflow: auto;
|
|
136
|
+
// }
|
|
137
|
+
|
|
138
|
+
// .dialog-header {
|
|
139
|
+
// padding: 1rem;
|
|
140
|
+
// border-bottom: 1px solid #e5e7eb;
|
|
141
|
+
// display: flex;
|
|
142
|
+
// justify-content: space-between;
|
|
143
|
+
// align-items: center;
|
|
144
|
+
// }
|
|
145
|
+
|
|
146
|
+
// .dialog-title {
|
|
147
|
+
// margin: 0;
|
|
148
|
+
// font-size: 1.25rem;
|
|
149
|
+
// font-weight: 600;
|
|
150
|
+
// }
|
|
151
|
+
|
|
152
|
+
// .dialog-close {
|
|
153
|
+
// background: none;
|
|
154
|
+
// border: none;
|
|
155
|
+
// font-size: 1.5rem;
|
|
156
|
+
// cursor: pointer;
|
|
157
|
+
// padding: 0.25rem;
|
|
158
|
+
// }
|
|
159
|
+
|
|
160
|
+
// .dialog-content {
|
|
161
|
+
// padding: 1rem;
|
|
162
|
+
// }
|
|
163
|
+
|
|
164
|
+
// .dialog-actions {
|
|
165
|
+
// padding: 1rem;
|
|
166
|
+
// border-top: 1px solid #e5e7eb;
|
|
167
|
+
// display: flex;
|
|
168
|
+
// justify-content: flex-end;
|
|
169
|
+
// gap: 0.5rem;
|
|
170
|
+
// }
|
|
171
|
+
|
|
172
|
+
// .dialog-btn {
|
|
173
|
+
// padding: 0.5rem 1rem;
|
|
174
|
+
// border-radius: 0.375rem;
|
|
175
|
+
// border: 1px solid #e5e7eb;
|
|
176
|
+
// background: white;
|
|
177
|
+
// cursor: pointer;
|
|
178
|
+
// }
|
|
179
|
+
|
|
180
|
+
// .dialog-btn.primary {
|
|
181
|
+
// background: #3b82f6;
|
|
182
|
+
// color: white;
|
|
183
|
+
// border-color: #3b82f6;
|
|
184
|
+
// }
|
|
185
|
+
|
|
186
|
+
// .dialog-btn.danger {
|
|
187
|
+
// background: #ef4444;
|
|
188
|
+
// color: white;
|
|
189
|
+
// border-color: #ef4444;
|
|
190
|
+
// }
|
|
191
|
+
// `
|
|
192
|
+
// document.head.appendChild(style)
|
|
@@ -1,192 +0,0 @@
|
|
|
1
|
-
import type { App, Component, InjectionKey, Plugin, PropType } from 'vue'
|
|
2
|
-
import { createApp, defineComponent, h, inject } from 'vue'
|
|
3
|
-
|
|
4
|
-
export interface DialogOptions {
|
|
5
|
-
title?: string
|
|
6
|
-
content?: string | Component
|
|
7
|
-
dismissable?: boolean
|
|
8
|
-
width?: string
|
|
9
|
-
actions?: Array<{
|
|
10
|
-
label: string
|
|
11
|
-
onClick: () => void
|
|
12
|
-
variant?: 'primary' | 'secondary' | 'danger'
|
|
13
|
-
}>
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
export interface DialogApi {
|
|
17
|
-
show: (options: DialogOptions) => void
|
|
18
|
-
hide: () => void
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
const DialogSymbol: InjectionKey<DialogApi> = Symbol('dialog')
|
|
22
|
-
|
|
23
|
-
export function useDialog(): DialogApi {
|
|
24
|
-
const api = inject(DialogSymbol)
|
|
25
|
-
if (!api) throw new Error('Dialog plugin not installed')
|
|
26
|
-
return api
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
const Dialog = defineComponent({
|
|
30
|
-
props: {
|
|
31
|
-
options: {
|
|
32
|
-
type: Object as () => DialogOptions,
|
|
33
|
-
required: true
|
|
34
|
-
},
|
|
35
|
-
onClose: {
|
|
36
|
-
type: Function as PropType<(event?: MouseEvent) => void>,
|
|
37
|
-
required: true
|
|
38
|
-
}
|
|
39
|
-
},
|
|
40
|
-
setup(props) {
|
|
41
|
-
return () => h('div', {
|
|
42
|
-
class: 'dialog-overlay',
|
|
43
|
-
onClick: (e: MouseEvent) => {
|
|
44
|
-
if (props.options.dismissable && e.target === e.currentTarget) {
|
|
45
|
-
props.onClose()
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
}, [
|
|
49
|
-
h('div', {
|
|
50
|
-
class: ['dialog', props.options.width ? `w-${props.options.width}` : 'w-96']
|
|
51
|
-
}, [
|
|
52
|
-
h('div', { class: 'dialog-header' }, [
|
|
53
|
-
h('h3', { class: 'dialog-title' }, props.options.title),
|
|
54
|
-
props.options.dismissable && h('button', {
|
|
55
|
-
class: 'dialog-close',
|
|
56
|
-
onClick: props.onClose
|
|
57
|
-
}, '×')
|
|
58
|
-
]),
|
|
59
|
-
h('div', { class: 'dialog-content' }, [
|
|
60
|
-
typeof props.options.content === 'string'
|
|
61
|
-
? props.options.content
|
|
62
|
-
: h(props.options.content as any)
|
|
63
|
-
]),
|
|
64
|
-
props.options.actions && h('div', { class: 'dialog-actions' }, props.options.actions.map(action => h('button', {
|
|
65
|
-
class: ['dialog-btn', action.variant],
|
|
66
|
-
onClick: () => {
|
|
67
|
-
action.onClick()
|
|
68
|
-
props.onClose()
|
|
69
|
-
}
|
|
70
|
-
}, action.label)
|
|
71
|
-
))
|
|
72
|
-
])
|
|
73
|
-
])
|
|
74
|
-
}
|
|
75
|
-
})
|
|
76
|
-
|
|
77
|
-
export const DialogPlugin: Plugin = {
|
|
78
|
-
install: (app: App) => {
|
|
79
|
-
// Create a div to mount our dialog
|
|
80
|
-
const dialogContainer = document.createElement('div')
|
|
81
|
-
document.body.appendChild(dialogContainer)
|
|
82
|
-
|
|
83
|
-
let currentDialog: any = null
|
|
84
|
-
|
|
85
|
-
const api: DialogApi = {
|
|
86
|
-
show: (options: DialogOptions) => {
|
|
87
|
-
// Remove existing dialog if any
|
|
88
|
-
if (currentDialog) {
|
|
89
|
-
currentDialog.unmount()
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
// Create new dialog instance
|
|
93
|
-
const dialogApp = createApp(Dialog, {
|
|
94
|
-
options,
|
|
95
|
-
onClose: () => { api.hide() }
|
|
96
|
-
})
|
|
97
|
-
|
|
98
|
-
// Mount it
|
|
99
|
-
currentDialog = dialogApp.mount(dialogContainer)
|
|
100
|
-
},
|
|
101
|
-
hide: () => {
|
|
102
|
-
if (currentDialog) {
|
|
103
|
-
currentDialog.unmount()
|
|
104
|
-
currentDialog = null
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
app.provide(DialogSymbol, api)
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
// Add some basic styles
|
|
114
|
-
const style = document.createElement('style')
|
|
115
|
-
style.textContent = `
|
|
116
|
-
.dialog-overlay {
|
|
117
|
-
position: fixed;
|
|
118
|
-
top: 0;
|
|
119
|
-
left: 0;
|
|
120
|
-
right: 0;
|
|
121
|
-
bottom: 0;
|
|
122
|
-
background: rgba(0, 0, 0, 0.5);
|
|
123
|
-
display: flex;
|
|
124
|
-
align-items: center;
|
|
125
|
-
justify-content: center;
|
|
126
|
-
z-index: 1000;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.dialog {
|
|
130
|
-
background: white;
|
|
131
|
-
border-radius: 0.5rem;
|
|
132
|
-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
133
|
-
max-width: 90vw;
|
|
134
|
-
max-height: 90vh;
|
|
135
|
-
overflow: auto;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
.dialog-header {
|
|
139
|
-
padding: 1rem;
|
|
140
|
-
border-bottom: 1px solid #e5e7eb;
|
|
141
|
-
display: flex;
|
|
142
|
-
justify-content: space-between;
|
|
143
|
-
align-items: center;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.dialog-title {
|
|
147
|
-
margin: 0;
|
|
148
|
-
font-size: 1.25rem;
|
|
149
|
-
font-weight: 600;
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
.dialog-close {
|
|
153
|
-
background: none;
|
|
154
|
-
border: none;
|
|
155
|
-
font-size: 1.5rem;
|
|
156
|
-
cursor: pointer;
|
|
157
|
-
padding: 0.25rem;
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
.dialog-content {
|
|
161
|
-
padding: 1rem;
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
.dialog-actions {
|
|
165
|
-
padding: 1rem;
|
|
166
|
-
border-top: 1px solid #e5e7eb;
|
|
167
|
-
display: flex;
|
|
168
|
-
justify-content: flex-end;
|
|
169
|
-
gap: 0.5rem;
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
.dialog-btn {
|
|
173
|
-
padding: 0.5rem 1rem;
|
|
174
|
-
border-radius: 0.375rem;
|
|
175
|
-
border: 1px solid #e5e7eb;
|
|
176
|
-
background: white;
|
|
177
|
-
cursor: pointer;
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
.dialog-btn.primary {
|
|
181
|
-
background: #3b82f6;
|
|
182
|
-
color: white;
|
|
183
|
-
border-color: #3b82f6;
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
.dialog-btn.danger {
|
|
187
|
-
background: #ef4444;
|
|
188
|
-
color: white;
|
|
189
|
-
border-color: #ef4444;
|
|
190
|
-
}
|
|
191
|
-
`
|
|
192
|
-
document.head.appendChild(style)
|