@xilonglab/vue-main 0.9.3 → 0.9.6
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/dialog/XlDialog.vue +1 -1
- package/packages/else/XlBox.vue +78 -0
- package/packages/index.js +6 -113
- package/packages/main/XlSingleTabView.vue +59 -0
- /package/packages/{XlBreadcrumb.vue → else/XlBreadcrumb.vue} +0 -0
- /package/packages/{XlControlBar.vue → else/XlControlBar.vue} +0 -0
- /package/packages/{XlSideBar.vue → else/XlSideBar.vue} +0 -0
package/package.json
CHANGED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
defineOptions({ name: "XlBox" })
|
|
3
|
+
|
|
4
|
+
const props = defineProps({
|
|
5
|
+
text: {
|
|
6
|
+
type: String,
|
|
7
|
+
default: "",
|
|
8
|
+
},
|
|
9
|
+
height: {
|
|
10
|
+
default: 300,
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
<template>
|
|
17
|
+
<div class="xl-box">
|
|
18
|
+
<div class="header">
|
|
19
|
+
<div class="left">
|
|
20
|
+
<span class="title">{{ text }}</span>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="right">
|
|
23
|
+
<slot name="header-right" />
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
<div class="main">
|
|
27
|
+
<slot />
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
</template>
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
<style lang="less">
|
|
34
|
+
.xl-box {
|
|
35
|
+
// background: #fff;
|
|
36
|
+
color: #000;
|
|
37
|
+
box-shadow: 2px 3px 4px #00000029;
|
|
38
|
+
border-radius: 5px;
|
|
39
|
+
border-top: 1px solid rgba(150, 150, 150, 0.5);
|
|
40
|
+
border-left: 1px solid rgba(150, 150, 150, 0.5);
|
|
41
|
+
padding: 10px 15px;
|
|
42
|
+
margin: 5px;
|
|
43
|
+
display: flex;
|
|
44
|
+
flex-flow: column;
|
|
45
|
+
|
|
46
|
+
.header {
|
|
47
|
+
display: flex;
|
|
48
|
+
padding-bottom: 10px;
|
|
49
|
+
height: 40px;
|
|
50
|
+
|
|
51
|
+
.left {
|
|
52
|
+
flex: 1;
|
|
53
|
+
|
|
54
|
+
.title {
|
|
55
|
+
color: #2c2c2c;
|
|
56
|
+
font-size: 17px;
|
|
57
|
+
padding-bottom: 10px;
|
|
58
|
+
font-family: "BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif";
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.right {
|
|
63
|
+
flex: 1;
|
|
64
|
+
text-align: right;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.number {
|
|
69
|
+
font-size: 30px;
|
|
70
|
+
text-align: center;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.main {
|
|
74
|
+
width: 100%;
|
|
75
|
+
height: 100%;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
</style>
|
package/packages/index.js
CHANGED
|
@@ -1,127 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
import XlControlBar from './XlControlBar.vue'
|
|
3
|
-
import XlBreadcrumb from './XlBreadcrumb.vue'
|
|
4
|
-
|
|
5
|
-
// Button Components
|
|
6
|
-
import XlAsyncButton from './button/XlAsyncButton.vue'
|
|
7
|
-
import XlButton from './button/XlButton.vue'
|
|
8
|
-
import XlDeleteButton from './button/XlDeleteButton.vue'
|
|
9
|
-
import XlEditButton from './button/XlEditButton.vue'
|
|
10
|
-
import XlIconButton from './button/XlIconButton.vue'
|
|
11
|
-
import XlUploadButton from './button/XlUploadButton.vue'
|
|
12
|
-
|
|
13
|
-
// Form Components
|
|
14
|
-
import XlCascader from './form/XlCascader.vue'
|
|
15
|
-
import XlCheckbox from './form/XlCheckbox.vue'
|
|
16
|
-
import XlDate from './form/XlDate.vue'
|
|
17
|
-
import XlFormCol from './form/XlFormCol.vue'
|
|
18
|
-
import XlFormRow from './form/XlFormRow.vue'
|
|
19
|
-
import XlImageInput from './form/XlImageInput.vue'
|
|
20
|
-
import XlInput from './form/XlInput.vue'
|
|
21
|
-
import XlMapSelect from './form/XlMapSelect.vue'
|
|
22
|
-
import XlNumber from './form/XlNumber.vue'
|
|
23
|
-
import XlRadio from './form/XlRadio.vue'
|
|
24
|
-
import XlRawSelect from './form/XlRawSelect.vue'
|
|
25
|
-
import XlRegion from './form/XlRegion.vue'
|
|
26
|
-
import XlSearchSelect from './form/XlSearchSelect.vue'
|
|
27
|
-
import XlSelect from './form/XlSelect.vue'
|
|
28
|
-
import XlSwitch from './form/XlSwitch.vue'
|
|
29
|
-
import XlTabRadio from './form/XlTabRadio.vue'
|
|
30
|
-
import XlTags from './form/XlTags.vue'
|
|
31
|
-
import XlTextarea from './form/XlTextarea.vue'
|
|
32
|
-
import XlTime from './form/XlTime.vue'
|
|
33
|
-
|
|
34
|
-
// Dialog Components
|
|
35
|
-
import XlDialog from './dialog/XlDialog.vue'
|
|
36
|
-
import XlFormDialog from './dialog/XlFormDialog.vue'
|
|
37
|
-
import XlStateDialog from './dialog/XlStateDialog.vue'
|
|
38
|
-
import XlImagePreviewDialog from './dialog/XlImagePreviewDialog.vue'
|
|
39
|
-
import XlMessageDialog from './dialog/XlMessageDialog.vue'
|
|
40
|
-
import XlReviewDialog from './dialog/XlReviewDialog.vue'
|
|
41
|
-
|
|
42
|
-
// Main Components
|
|
43
|
-
import XlDataView from './main/XlDataView.vue'
|
|
44
|
-
import XlDataTable from './main/XlDataTable.vue'
|
|
45
|
-
import XlDataReview from './main/XlDataReview.vue'
|
|
46
|
-
import XlDataFormDialog from './main/XlDataFormDialog.vue'
|
|
47
|
-
import XlDataReviewDialog from './main/XlDataReviewDialog.vue'
|
|
48
|
-
import XlNavBar from './main/XlNavBar.vue'
|
|
49
|
-
import XlTabView from './main/XlTabView.vue'
|
|
50
|
-
import XlToolBar from './main/XlToolBar.vue'
|
|
51
|
-
import XlVerticalMenu from './main/XlVerticalMenu.vue'
|
|
52
|
-
import XlStatusIndicator from './main/XlStatusIndicator.vue'
|
|
53
|
-
import XlUpdateIndicator from './main/XlUpdateIndicator.vue'
|
|
54
|
-
import XlAutoSaver from './main/XlAutoSaver.vue'
|
|
55
|
-
import XlLoginForm from './main/XlLoginForm.vue'
|
|
56
|
-
|
|
57
|
-
const components = [
|
|
58
|
-
XlSideBar,
|
|
59
|
-
XlControlBar,
|
|
60
|
-
XlBreadcrumb,
|
|
61
|
-
// Buttons
|
|
62
|
-
XlAsyncButton,
|
|
63
|
-
XlButton,
|
|
64
|
-
XlDeleteButton,
|
|
65
|
-
XlEditButton,
|
|
66
|
-
XlIconButton,
|
|
67
|
-
XlUploadButton,
|
|
68
|
-
// Forms
|
|
69
|
-
XlCascader,
|
|
70
|
-
XlCheckbox,
|
|
71
|
-
XlDate,
|
|
72
|
-
XlFormCol,
|
|
73
|
-
XlFormRow,
|
|
74
|
-
XlImageInput,
|
|
75
|
-
XlInput,
|
|
76
|
-
XlMapSelect,
|
|
77
|
-
XlNumber,
|
|
78
|
-
XlRadio,
|
|
79
|
-
XlRawSelect,
|
|
80
|
-
XlRegion,
|
|
81
|
-
XlSearchSelect,
|
|
82
|
-
XlSelect,
|
|
83
|
-
XlSwitch,
|
|
84
|
-
XlTabRadio,
|
|
85
|
-
XlTags,
|
|
86
|
-
XlTextarea,
|
|
87
|
-
XlTime,
|
|
88
|
-
// Dialogs
|
|
89
|
-
XlDialog,
|
|
90
|
-
XlFormDialog,
|
|
91
|
-
XlStateDialog,
|
|
92
|
-
XlImagePreviewDialog,
|
|
93
|
-
XlMessageDialog,
|
|
94
|
-
XlReviewDialog,
|
|
95
|
-
// Main Components
|
|
96
|
-
XlDataView,
|
|
97
|
-
XlDataTable,
|
|
98
|
-
XlDataReview,
|
|
99
|
-
XlDataFormDialog,
|
|
100
|
-
XlDataReviewDialog,
|
|
101
|
-
XlNavBar,
|
|
102
|
-
XlTabView,
|
|
103
|
-
XlToolBar,
|
|
104
|
-
XlVerticalMenu,
|
|
105
|
-
XlStatusIndicator,
|
|
106
|
-
XlUpdateIndicator,
|
|
107
|
-
XlAutoSaver,
|
|
108
|
-
XlLoginForm
|
|
109
|
-
];
|
|
1
|
+
const components = import.meta.glob('./**/*.vue', { eager: true });
|
|
110
2
|
|
|
111
3
|
const install = (app) => {
|
|
112
|
-
components.forEach((component) => {
|
|
113
|
-
app.component(component.name, component);
|
|
4
|
+
Object.values(components).forEach((component) => {
|
|
5
|
+
app.component(component.default.name, component.default);
|
|
114
6
|
});
|
|
115
7
|
};
|
|
116
8
|
|
|
117
9
|
let componentsJson = {}
|
|
118
|
-
|
|
10
|
+
for (const key in components) {
|
|
11
|
+
const component = components[key].default
|
|
119
12
|
const componentName = component.name
|
|
120
13
|
component.install = function (app) {
|
|
121
14
|
app.component(componentName, component)
|
|
122
15
|
}
|
|
123
16
|
componentsJson[componentName] = component
|
|
124
|
-
}
|
|
17
|
+
}
|
|
125
18
|
|
|
126
19
|
export default {
|
|
127
20
|
install,
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
defineOptions({ name: "XlSingleTabView" })
|
|
3
|
+
|
|
4
|
+
import { ref } from 'vue'
|
|
5
|
+
|
|
6
|
+
const props = defineProps({
|
|
7
|
+
l: {
|
|
8
|
+
type: String,
|
|
9
|
+
default: '',
|
|
10
|
+
},
|
|
11
|
+
})
|
|
12
|
+
|
|
13
|
+
const tabIndex = ref('0')
|
|
14
|
+
</script>
|
|
15
|
+
|
|
16
|
+
<template>
|
|
17
|
+
<div class="xl-single-tab-view">
|
|
18
|
+
<el-tabs class="tabs" v-model="tabIndex">
|
|
19
|
+
<el-tab-pane
|
|
20
|
+
:key="l"
|
|
21
|
+
:label="l"
|
|
22
|
+
name="0"
|
|
23
|
+
/>
|
|
24
|
+
</el-tabs>
|
|
25
|
+
<template class="frame">
|
|
26
|
+
<slot/>
|
|
27
|
+
</template>
|
|
28
|
+
</div>
|
|
29
|
+
</template>
|
|
30
|
+
|
|
31
|
+
<style lang="less" scoped>
|
|
32
|
+
.xl-single-tab-view {
|
|
33
|
+
display: flex;
|
|
34
|
+
flex-flow: column;
|
|
35
|
+
flex-grow: 1;
|
|
36
|
+
position: relative;
|
|
37
|
+
background: #fff;
|
|
38
|
+
color: #000;
|
|
39
|
+
|
|
40
|
+
.tabs {
|
|
41
|
+
height: 40px;
|
|
42
|
+
|
|
43
|
+
:deep(.el-tabs__nav-wrap) {
|
|
44
|
+
padding-left: 10px;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
:deep(.el-tabs__header) {
|
|
48
|
+
margin: 0;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.frame {
|
|
53
|
+
flex-grow: 1;
|
|
54
|
+
overflow-y: scroll;
|
|
55
|
+
display: flex;
|
|
56
|
+
flex-flow: column;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
</style>
|
|
File without changes
|
|
File without changes
|
|
File without changes
|