VueJS: Cleaning up code to conform to the Vue Style Guide
styling changes to follow style guide
MODIFY
templates/Web/Pages/Vue.Grid/src/views/VueGrid.vue
templates/Web/Pages/Vue.Grid/src/views/VueGrid.vue
</div>
</div>
</main>
- <WarningMessage
+ <BaseWarningMessage
v-if="WarningMessageOpen"
- @onWarningClose="handleWarningClose"
:text="WarningMessageText"
+ @onWarningClose="handleWarningClose"
/>
</div>
</template>
<script>
import CONSTANTS from "@/constants";
import GridComponent from "@/components/GridComponent";
-import WarningMessage from "@/components/WarningMessage";
+import BaseWarningMessage from "@/components/BaseWarningMessage";
export default {
name: "VueGrid",
components: {
GridComponent,
- WarningMessage
+ BaseWarningMessage
},
data() {

MODIFY
templates/Web/Pages/Vue.List/src/components/ListForm.vue
templates/Web/Pages/Vue.List/src/components/ListForm.vue
<form class="input-group my-3" @submit.prevent="$emit('onAddListItem')">
<input
:value="value"
- @input="$emit('input', $event.target.value)"
- type="text"
+ aria-label="Add text here..."
class="form-control"
placeholder="Add text here..."
- aria-label="Add text here..."
+ type="text"
+ @input="$emit('input', $event.target.value)"
/>
<button type="submit" class="btn btn-primary ml-2">Submit</button>
</form>

MODIFY
templates/Web/Pages/Vue.List/src/components/ListItem.vue
templates/Web/Pages/Vue.List/src/components/ListItem.vue
</div>
<div class="col-1">
<button
- type="button"
+ aria-label="Close"
class="close py-2"
data-dismiss="alert"
- aria-label="Close"
+ type="button"
@click="$emit('onDeleteListItem', listItem)"
>
<div aria-hidden="true">&times;</div>

MODIFY
templates/Web/Pages/Vue.List/src/views/VueList.vue
templates/Web/Pages/Vue.List/src/views/VueList.vue
<h3>Bootstrap VueList Template</h3>
</div>
<div class="col-12 p-0">
- <ListForm @onAddListItem="handleAddListItem" v-model="textField" />
+ <ListForm v-model="textField" @onAddListItem="handleAddListItem" />
</div>
<ListItem
v-for="listItem in list"
:listItem="listItem"
@onDeleteListItem="handleDeleteListItem"
/>
- <WarningMessage
+ <BaseWarningMessage
v-if="WarningMessageOpen"
- @onWarningClose="handleWarningClose"
:text="WarningMessageText"
+ @onWarningClose="handleWarningClose"
/>
</div>
</main>
import CONSTANTS from "@/constants";
import ListForm from "@/components/ListForm";
import ListItem from "@/components/ListItem";
-import WarningMessage from "@/components/WarningMessage";
+import BaseWarningMessage from "@/components/BaseWarningMessage";
export default {
name: "VueList",
@@ -34,7 +34,7 @@ export default {
components: {
ListForm,
ListItem,
- WarningMessage
+ BaseWarningMessage
},
data() {

MODIFY
templates/Web/Pages/Vue.MasterDetail/src/views/VueMasterDetail.vue
templates/Web/Pages/Vue.MasterDetail/src/views/VueMasterDetail.vue
<div class="list-group list-group-flush border-bottom">
<MasterDetailSideBarTab
v-for="(textAssets, index) in masterDetailText"
- @onDisplayTabClick="handleDisplayTabClick"
- :tabText="textAssets.title"
- :index="index"
:key="textAssets.id"
+ :index="index"
+ :tabText="textAssets.title"
+ @onDisplayTabClick="handleDisplayTabClick"
/>
</div>
</div>
<MasterDetailPage :textSampleData="masterDetailText[currentDisplayTabIndex]" />
</div>
</main>
- <WarningMessage
+ <BaseWarningMessage
v-if="WarningMessageOpen"
- @onWarningClose="handleWarningClose"
:text="WarningMessageText"
+ @onWarningClose="handleWarningClose"
/>
</div>
</template>
import CONSTANTS from "@/constants";
import MasterDetailPage from "@/components/MasterDetailPage";
import MasterDetailSideBarTab from "@/components/MasterDetailSideBarTab";
-import WarningMessage from "@/components/WarningMessage";
+import BaseWarningMessage from "@/components/BaseWarningMessage";
export default {
name: "VueMasterDetail",
@@ -36,7 +36,7 @@ export default {
components: {
MasterDetailPage,
MasterDetailSideBarTab,
- WarningMessage
+ BaseWarningMessage
},
data() {

RENAME
templates/Web/_composition/Vue/Page.Vue.AddWarnings/src/components/WarningMessage.vue
templates/Web/_composition/Vue/Page.Vue.AddWarnings/src/components/BaseWarningMessage.vue
<script>
export default {
- name: "WarningMessage",
+ name: "BaseWarningMessage",
props: {
text: {
type: String,

VueJS: Cleaning up code to conform to the Vue Style Guide (#1044)

styling changes to follow style guide