STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

added multicolumn support

Browse Source
This commit is contained in:
James Collins
2023-02-20 16:23:46 +10:00
parent 3de48f002c
commit 9337ee292c
2 changed files with 41 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
resources/js/components/SMForm.vue
View File

@@ -33,4 +33,10 @@ const handleSubmit = function () {
provide("form", props.modelValue);
</script>
<style lang="scss"></style>
<style lang="scss">
.sm-form-columns {
.sm-input-group {
margin-bottom: 0;
}
}
</style>

61
resources/js/views/dashboard/UserEdit.vue
View File

@@ -1,31 +1,32 @@
<template>
<SMPage>
<SMRow>
<SMDialog>
<SMHeading :heading="pageHeading" />
<SMForm :model-value="form" @submit="handleSubmit">
<SMRow>
<SMColumn><SMInput control="first_name" /></SMColumn>
<SMColumn><SMInput control="last_name" /></SMColumn>
</SMRow>
<SMRow>
<SMColumn><SMInput control="email" /></SMColumn>
<SMColumn><SMInput control="phone" /></SMColumn>
</SMRow>
<SMRow>
<SMFormFooter>
<template #right>
<SMButton
type="secondary"
label="Change Password"
@click.prevent="handleChangePassword" />
<SMButton type="submit" label="Update" />
</template>
</SMFormFooter>
</SMRow>
</SMForm>
</SMDialog>
</SMRow>
<SMPage class="sm-page-user-edit">
<template #container>
<SMHeading :heading="pageHeading" />
<SMForm
class="sm-form-columns"
:model-value="form"
@submit="handleSubmit">
<SMRow>
<SMColumn><SMInput control="first_name" /></SMColumn>
<SMColumn><SMInput control="last_name" /></SMColumn>
</SMRow>
<SMRow>
<SMColumn><SMInput control="email" /></SMColumn>
<SMColumn><SMInput control="phone" /></SMColumn>
</SMRow>
<SMRow>
<SMFormFooter>
<template #right>
<SMButton
type="secondary"
label="Change Password"
@click.prevent="handleChangePassword" />
<SMButton type="submit" label="Update" />
</template>
</SMFormFooter>
</SMRow>
</SMForm>
</template>
</SMPage>
</template>
@@ -116,3 +117,9 @@ const pageHeading = computed(() => {
loadData();
</script>
<style lang="scss">
.sm-page-user-edit {
background-color: #f8f8f8;
}
</style>