Skip to content

Commit b669ab5

Browse files
author
Emma Genesen
committed
added elementplus components
1 parent 6f094ac commit b669ab5

File tree

7 files changed

+98
-8
lines changed

7 files changed

+98
-8
lines changed

‎src/components/composables/useExportComponent.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,15 @@ export function useExportComponent() {
5757
h4: ["<h4", "</h4>"],
5858
h5: ["<h5", "</h5>"],
5959
h6: ["<h6", "</h6>"],
60-
element:["<el-button", "</el-button>"]
60+
'e-button':["<el-button", "</el-button>"],
61+
'e-input':["<el-input", "</el-input>"],
62+
'e-link':["<el-link", "</el-link>"],
63+
'e-form': ["<el-form", "</el-form>"],
64+
'e-checkbox': ["<el-checkbox", "</el-checkbox>"],
65+
'e-checkbox-button': ["<el-checkbox-button", "</el-checkbox-button>"],
66+
'e-date-picker': ["<el-date-picker", "</el-date-picker>"],
67+
'e-slider':["<el-slider", "</el-slider>"],
68+
6169
};
6270
// function to loop through nested elements
6371
const writeNested = (childrenArray, indent) => {

‎src/components/left-sidebar/ComponentTab/ImportComponent.vue

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,14 @@ export default {
134134
h4:["<h4>", "</h4>"],
135135
h5:["<h5>", "</h5>"],
136136
h6:["<h6>", "</h6>"],
137-
element:["<el-button ", "</el-button>"]
137+
'e-button':["<el-button", "</el-button>"],
138+
'e-input':["<el-input", "</el-input>"],
139+
'e-form': ["<el-form", "</el-form>"],
140+
'e-checkbox': ["<el-checkbox", "</el-checkbox>"],
141+
'e-link':["<el-link", "</el-link>"],
142+
'e-checkbox-button': ["<el-checkbox-button", "</el-checkbox-button>"],
143+
'e-date-picker': ["<el-date-picker", "</el-date-picker>"],
144+
'e-slider':["<el-slider", "</el-slider>"],
138145
};
139146
140147

‎src/components/left-sidebar/ComponentTab/InputHTMLMenu.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ import { mapState, mapActions } from 'vuex'
157157
export default {
158158
data () {
159159
return {
160-
exceptions: ['div','button','form','img','list','paragraph','list-ol','list-ul','input','h1','h2','h3','h4','h5','h6','element'],
160+
exceptions: ['div','button','form','img','list','paragraph','list-ol','list-ul','input','h1','h2','h3','h4','h5','h6','e-button','e-input','e-link', 'e-form', 'e-checkbox', 'e-checkbox-button', 'e-date-picker', 'e-slider'],
161161
attributeModal : "false",
162162
classText: '',
163163
heightText: '',

‎src/components/left-sidebar/ComponentTab/LibComponents.vue

Lines changed: 56 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,71 @@
77

88
<q-btn-dropdown color="pink" label="Select Library Component" dropdown-icon="change_history">
99
<q-list>
10-
<q-item clickable v-close-popup @click="pickComponent('element')">
10+
<q-item clickable v-close-popup @click="pickComponent('e-button')">
1111
<q-item-section>
1212
<q-item-label>Button <q-btn class="demo-button" color="blue" label="Default" /></q-item-label>
1313
</q-item-section>
1414
</q-item>
1515

16-
<q-item clickable v-close-popup >
16+
<q-item clickable v-close-popup @click="pickComponent('e-input')">
1717
<q-item-section>
1818
<q-item-label>InputBox <q-input class="demo-input" outlined /></q-item-label>
1919
</q-item-section>
2020
</q-item>
21+
22+
<q-item clickable v-close-popup @click="pickComponent('e-link')">
23+
<q-item-section>
24+
<q-item-label>Link <a href="#">Link</a></q-item-label>
25+
</q-item-section>
26+
</q-item>
27+
28+
<q-item clickable v-close-popup @click="pickComponent('e-card')">
29+
<q-item-section>
30+
<q-item-label>Card
31+
<q-card class="my-card">
32+
<q-card-section>
33+
Card
34+
</q-card-section>
35+
</q-card>
36+
37+
</q-item-label>
38+
</q-item-section>
39+
</q-item>
40+
41+
<q-item clickable v-close-popup @click="pickComponent('e-form')">
42+
<q-item-section>
43+
<q-item-label>Form <q-form class="demo-form" outlined /></q-item-label>
44+
</q-item-section>
45+
</q-item>
46+
47+
<q-item clickable v-close-popup @click="pickComponent('e-checkbox')">
48+
<q-item-section>
49+
<q-item-label>Checkbox <q-checkbox class="demo-checkbox" outlined /></q-item-label>
50+
</q-item-section>
51+
</q-item>
52+
53+
<q-item clickable v-close-popup @click="pickComponent('e-checkbox-button')">
54+
<q-item-section>
55+
<q-item-label>Checkbox-button <q-checkbox-button class="demo-checkbox-button" color="blue" outlined /></q-item-label>
56+
</q-item-section>
57+
</q-item>
58+
59+
<q-item clickable v-close-popup @click="pickComponent('e-date-picker')">
60+
<q-item-section>
61+
<q-item-label>Date-picker <q-date-picker class="demo-date-picker" v-model="value1"
62+
type="date"
63+
placeholder="Pick a day"
64+
:size="size" outlined /></q-item-label>
65+
</q-item-section>
66+
</q-item>
67+
68+
<q-item clickable v-close-popup @click="pickComponent('e-slider')">
69+
<q-item-section>
70+
<q-item-label>Slider <q-slider class="demo-slider" v-model="value1" color="blue"
71+
outlined /></q-item-label>
72+
</q-item-section>
73+
</q-item>
74+
2175
</q-list>
2276
</q-btn-dropdown>
2377
</div>

‎src/components/nav-buttons/ExportMenu.vue

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,14 @@ export default {
147147
h4: ["<h4", "</h4>"],
148148
h5: ["<h5", "</h5>"],
149149
h6: ["<h6", "</h6>"],
150-
element:["<el-button", "</el-button>"]
150+
'e-button':["<el-button", "</el-button>"],
151+
'e-input':["<el-input", "</el-input>"],
152+
'e-link':["<el-link", "</el-link>"],
153+
'e-form': ["<el-form", "</el-form>"],
154+
'e-checkbox': ["<el-checkbox", "</el-checkbox>"],
155+
'e-checkbox-button': ["<el-checkbox-button", "</el-checkbox-button>"],
156+
'e-date-picker': ["<el-date-picker", "</el-date-picker>"],
157+
'e-slider':["<el-slider", "</el-slider>"],
151158
};
152159
// function to loop through nested elements
153160
function writeNested(childrenArray, indent) {

‎src/components/right-sidebar/CodeSnippet.vue

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,14 @@ export default {
107107
h4: ["<h4", "</h4>"],
108108
h5: ["<h5", "</h5>"],
109109
h6: ["<h6", "</h6>"],
110-
element:["<el-button", "</el-button>"]
110+
'e-button':["<el-button", "</el-button>"],
111+
'e-input':["<el-input", "</el-input>"],
112+
'e-link':["<el-link", "</el-link>"],
113+
'e-form': ["<el-form", "</el-form>"],
114+
'e-checkbox': ["<el-checkbox", "</el-checkbox>"],
115+
'e-checkbox-button': ["<el-checkbox-button", "</el-checkbox-button>"],
116+
'e-date-picker': ["<el-date-picker", "</el-date-picker>"],
117+
'e-slider':["<el-slider", "</el-slider>"],
111118
};
112119
113120
// Helper function that recursively iterates through the given html element's children and their children's children.

‎src/store/state/htmlElementMap.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,14 @@ const htmlElementMap = {
1919
h4:['<h4>', '</h4>'],
2020
h5:['<h5>', '</h5>'],
2121
h6:['<h6>', '</h6>'],
22-
element:["<el-button", "</el-button>"]
22+
'e-button':["<el-button", "</el-button>"],
23+
'e-input':["<el-input", "</el-input>"],
24+
'e-link':["<el-link", "</el-link>"],
25+
'e-form': ["<el-form", "</el-form>"],
26+
'e-checkbox': ["<el-checkbox", "</el-checkbox>"],
27+
'e-checkbox-button': ["<el-checkbox-button", "</el-checkbox-button>"],
28+
'e-date-picker': ["<el-date-picker", "</el-date-picker>"],
29+
'e-slider':["<el-slider", "</el-slider>"],
2330
}
2431

2532
export default htmlElementMap

0 commit comments

Comments
 (0)