gi-component 0.0.12 → 0.0.14
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/package.json +1 -1
- package/packages/components/dialog/src/dialog-content.vue +27 -0
- package/packages/components/dialog/src/dialog.ts +42 -1
- package/packages/components/dialog/src/dialog.vue +2 -1
- package/packages/components/input-group/src/input-group.vue +3 -16
- package/packages/styles/index.scss +5 -0
package/package.json
CHANGED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="el-message-box__container">
|
|
3
|
+
<el-icon class="el-message-box__status" :class="`el-message-box-icon--${props.type}`">
|
|
4
|
+
<InfoFilled v-if="props.type === 'info'" />
|
|
5
|
+
<SuccessFilled v-else-if="props.type === 'success'" />
|
|
6
|
+
<WarningFilled v-else-if="props.type === 'warning'" />
|
|
7
|
+
<CircleCloseFilled v-else-if="props.type === 'error'" />
|
|
8
|
+
</el-icon>
|
|
9
|
+
<div class="el-message-box__message">
|
|
10
|
+
<p>{{ props.content }}</p>
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
</template>
|
|
14
|
+
|
|
15
|
+
<script setup lang="ts">
|
|
16
|
+
import { CircleCloseFilled, InfoFilled, SuccessFilled, WarningFilled } from '@element-plus/icons-vue'
|
|
17
|
+
|
|
18
|
+
interface Props {
|
|
19
|
+
type?: 'info' | 'success' | 'warning' | 'error'
|
|
20
|
+
content?: string
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
const props = withDefaults(defineProps<Props>(), {
|
|
24
|
+
type: 'info',
|
|
25
|
+
content: ''
|
|
26
|
+
})
|
|
27
|
+
</script>
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import type { DialogInstance } from '../index'
|
|
2
2
|
import ElementPlus from 'element-plus'
|
|
3
|
-
import { createApp, h, ref } from 'vue'
|
|
3
|
+
import { createApp, defineAsyncComponent, h, ref } from 'vue'
|
|
4
4
|
import GiDialog from './dialog.vue'
|
|
5
5
|
|
|
6
|
+
const DialogContent = defineAsyncComponent(() => import('./dialog-content.vue'))
|
|
7
|
+
|
|
6
8
|
export type DialogOptions = Partial<DialogInstance['$props']>
|
|
7
9
|
|
|
8
10
|
export interface DialogReturnObject {
|
|
@@ -77,6 +79,45 @@ export function createDialog() {
|
|
|
77
79
|
/** 对话框-打开 */
|
|
78
80
|
open(options: DialogOptions) {
|
|
79
81
|
return this.create(options)
|
|
82
|
+
},
|
|
83
|
+
|
|
84
|
+
info(options: DialogOptions) {
|
|
85
|
+
return this.create({
|
|
86
|
+
...options,
|
|
87
|
+
content: () => h(DialogContent, { type: 'info', content: options.content as string }),
|
|
88
|
+
simple: true,
|
|
89
|
+
style: { maxWidth: '420px', ...options.style },
|
|
90
|
+
lockScroll: false
|
|
91
|
+
})
|
|
92
|
+
},
|
|
93
|
+
|
|
94
|
+
success(options: DialogOptions) {
|
|
95
|
+
return this.create({
|
|
96
|
+
...options,
|
|
97
|
+
content: () => h(DialogContent, { type: 'success', content: options.content as string }),
|
|
98
|
+
simple: true,
|
|
99
|
+
style: { maxWidth: '420px', ...options.style },
|
|
100
|
+
lockScroll: false
|
|
101
|
+
})
|
|
102
|
+
},
|
|
103
|
+
|
|
104
|
+
warning(options: DialogOptions) {
|
|
105
|
+
return this.create({
|
|
106
|
+
...options,
|
|
107
|
+
content: () => h(DialogContent, { type: 'warning', content: options.content as string }),
|
|
108
|
+
simple: true,
|
|
109
|
+
style: { maxWidth: '420px', ...options.style },
|
|
110
|
+
lockScroll: false
|
|
111
|
+
})
|
|
112
|
+
},
|
|
113
|
+
|
|
114
|
+
error(options: DialogOptions) {
|
|
115
|
+
return this.create({
|
|
116
|
+
...options,
|
|
117
|
+
content: () => h(DialogContent, { type: 'error', content: options.content as string }),
|
|
118
|
+
simple: true,
|
|
119
|
+
style: { maxWidth: '420px', ...options.style }
|
|
120
|
+
})
|
|
80
121
|
}
|
|
81
122
|
}
|
|
82
123
|
|
|
@@ -17,21 +17,6 @@ const { b } = useBemClass()
|
|
|
17
17
|
margin-left: 0;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
:deep(.el-select__wrapper) {
|
|
21
|
-
box-shadow: none;
|
|
22
|
-
border: 1px solid var(--el-border-color);
|
|
23
|
-
|
|
24
|
-
&.is-focused {
|
|
25
|
-
box-shadow: none;
|
|
26
|
-
border-color: var(--el-color-primary);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
&.is-hovering:not(.is-focused) {
|
|
30
|
-
box-shadow: none;
|
|
31
|
-
border-color: var(--el-border-color-hover);
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
|
|
35
20
|
.#{a.$prefix}-input-group {
|
|
36
21
|
display: flex;
|
|
37
22
|
|
|
@@ -51,7 +36,8 @@ const { b } = useBemClass()
|
|
|
51
36
|
> :deep(*:not(:first-child):not(:last-child)) {
|
|
52
37
|
border-radius: 0;
|
|
53
38
|
|
|
54
|
-
.el-input__wrapper
|
|
39
|
+
.el-input__wrapper,
|
|
40
|
+
.el-select__wrapper {
|
|
55
41
|
border-radius: 0;
|
|
56
42
|
}
|
|
57
43
|
}
|
|
@@ -83,6 +69,7 @@ const { b } = useBemClass()
|
|
|
83
69
|
}
|
|
84
70
|
|
|
85
71
|
> :deep(*) {
|
|
72
|
+
|
|
86
73
|
.el-input__wrapper.is-focus,
|
|
87
74
|
.el-select__wrapper.is-focused {
|
|
88
75
|
z-index: 2;
|