|
1 | | -<template> |
2 | | - <div> |
3 | | - <q-input |
4 | | - @keyup.enter.native="createNewProp(textProps)" |
5 | | - standout="bg-secondary text-white" |
6 | | - bottom-slots |
7 | | - v-model="textProps" |
8 | | - label="Create Prop" |
9 | | - dense |
10 | | - class="input-add" |
11 | | - v-on:keyup.delete.stop |
12 | | - > |
13 | | - <template v-slot:append> |
14 | | - <q-btn round dense flat icon="add" @click="createNewProp(textProps)" /> |
15 | | - </template> |
16 | | - </q-input> |
17 | | - |
18 | | - <div id="props-select"> |
19 | | - <VueMultiselect |
20 | | - v-model="selectProps" |
21 | | - class="multiselect" |
22 | | - placeholder="Select Props for Component" |
23 | | - :multiple="true" |
24 | | - :close-on-select="false" |
25 | | - :max-height="180" |
26 | | - :option-height="20" |
27 | | - open-direction="top" |
28 | | - :options="propsOptions" |
29 | | - :searchable="false" |
30 | | - @search-change="stopDelete($event)" |
31 | | - > |
32 | | - <span slot="noResult">No props found.</span> |
33 | | - </VueMultiselect> |
34 | | - </div> |
35 | | - <br/> |
36 | | - <div> |
37 | | - <q-btn |
38 | | - v-if="selectProps.length" |
39 | | - id="add-props-btn" |
40 | | - class="add-btn" |
41 | | - color="secondary" |
42 | | - label="Add Prop(s)" |
43 | | - @click="addPropsToComp" |
44 | | - /> |
45 | | - </div> |
46 | | - </div> |
47 | | -</template> |
48 | | - |
49 | | -<script> |
50 | | -import { mapState, mapActions } from 'vuex' |
51 | | -import VueMultiselect from 'vue-multiselect' |
52 | | -
|
53 | | -export default { |
54 | | - name: 'addProps', |
55 | | - components: { |
56 | | - VueMultiselect |
57 | | - }, |
58 | | - data () { |
59 | | - return { |
60 | | - textProps: '' |
61 | | - } |
62 | | - }, |
63 | | -
|
64 | | - computed: { |
65 | | - ...mapState([ |
66 | | - 'selectedProps', |
67 | | - 'userProps', |
68 | | - ]), |
69 | | - propsOptions () { |
70 | | - return this.userProps |
71 | | - }, |
72 | | - selectProps: { |
73 | | - get () { |
74 | | - return this.selectedProps |
75 | | - }, |
76 | | - set (value) { |
77 | | - this.addPropsSelected(value) |
78 | | - } |
79 | | - } |
80 | | - }, |
81 | | -
|
82 | | - methods: { |
83 | | - ...mapActions([ |
84 | | - 'createProp', |
85 | | - 'addPropsSelected', |
86 | | - 'addPropsToComponent' |
87 | | - ]), |
88 | | - // Prevent Delete on changes to searchable multiselect |
89 | | - stopDelete (e) { |
90 | | - if (e.code === 'Backspace') e.stopPropogation() |
91 | | - // console.log(e) |
92 | | - }, |
93 | | -
|
94 | | - // Create's a new prop that will be stored in the userProps array within store, and it will be added to the props drop-down menu |
95 | | - createNewProp (text) { |
96 | | - if (!this.userProps.includes(text) && text) { |
97 | | - this.createProp(text) |
98 | | - this.textProps = '' |
99 | | - } |
100 | | - }, |
101 | | -
|
102 | | - addPropsToComp () { |
103 | | - this.addPropsToComponent(this.selectedProps) |
104 | | - } |
105 | | - } |
106 | | -} |
107 | | -</script> |
| 1 | +<template> |
| 2 | + <div> |
| 3 | + <q-input |
| 4 | + @keyup.enter.native="createNewProp(textProps)" |
| 5 | + standout="bg-secondary text-white" |
| 6 | + bottom-slots |
| 7 | + v-model="textProps" |
| 8 | + label="Create Prop" |
| 9 | + dense |
| 10 | + class="input-add" |
| 11 | + v-on:keyup.delete.stop |
| 12 | + > |
| 13 | + <template v-slot:append> |
| 14 | + <q-btn round dense flat icon="add" @click="createNewProp(textProps)" /> |
| 15 | + </template> |
| 16 | + </q-input> |
| 17 | + |
| 18 | + <div id="props-select"> |
| 19 | + <VueMultiselect |
| 20 | + v-model="selectProps" |
| 21 | + class="multiselect" |
| 22 | + placeholder="Select Props for Component" |
| 23 | + :multiple="true" |
| 24 | + :close-on-select="false" |
| 25 | + :max-height="180" |
| 26 | + :option-height="20" |
| 27 | + open-direction="top" |
| 28 | + :options="propsOptions" |
| 29 | + :searchable="false" |
| 30 | + @search-change="stopDelete($event)" |
| 31 | + > |
| 32 | + <span slot="noResult">No props found.</span> |
| 33 | + </VueMultiselect> |
| 34 | + </div> |
| 35 | + <br/> |
| 36 | + <div> |
| 37 | + <q-btn |
| 38 | + v-if="selectProps.length" |
| 39 | + id="add-props-btn" |
| 40 | + class="add-btn" |
| 41 | + color="secondary" |
| 42 | + label="Add Prop(s)" |
| 43 | + @click="addPropsToComp" |
| 44 | + /> |
| 45 | + </div> |
| 46 | + </div> |
| 47 | +</template> |
| 48 | + |
| 49 | +<script> |
| 50 | +import { mapState, mapActions } from 'vuex' |
| 51 | +import VueMultiselect from 'vue-multiselect' |
| 52 | +
|
| 53 | +export default { |
| 54 | + name: 'addProps', |
| 55 | + components: { |
| 56 | + VueMultiselect |
| 57 | + }, |
| 58 | + data () { |
| 59 | + return { |
| 60 | + textProps: '' |
| 61 | + } |
| 62 | + }, |
| 63 | +
|
| 64 | + computed: { |
| 65 | + ...mapState([ |
| 66 | + 'selectedProps', |
| 67 | + 'userProps', |
| 68 | + ]), |
| 69 | + propsOptions () { |
| 70 | + return this.userProps |
| 71 | + }, |
| 72 | + selectProps: { |
| 73 | + get () { |
| 74 | + return this.selectedProps |
| 75 | + }, |
| 76 | + set (value) { |
| 77 | + this.addPropsSelected(value) |
| 78 | + } |
| 79 | + } |
| 80 | + }, |
| 81 | +
|
| 82 | + methods: { |
| 83 | + ...mapActions([ |
| 84 | + 'createProp', |
| 85 | + 'addPropsSelected', |
| 86 | + 'addPropsToComponent' |
| 87 | + ]), |
| 88 | + // Prevent Delete on changes to searchable multiselect |
| 89 | + stopDelete (e) { |
| 90 | + if (e.code === 'Backspace') e.stopPropogation() |
| 91 | + // console.log(e) |
| 92 | + }, |
| 93 | +
|
| 94 | + // Create's a new prop that will be stored in the userProps array within store, and it will be added to the props drop-down menu |
| 95 | + createNewProp (text) { |
| 96 | + if (!this.userProps.includes(text) && text) { |
| 97 | + this.createProp(text) |
| 98 | + this.textProps = '' |
| 99 | + } |
| 100 | + }, |
| 101 | +
|
| 102 | + addPropsToComp () { |
| 103 | + this.addPropsToComponent(this.selectedProps) |
| 104 | + } |
| 105 | + } |
| 106 | +} |
| 107 | +</script> |
0 commit comments