village-hall
/
opnform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Re-worked the modal component

This commit is contained in:
Julien Nahum 2022-10-18 16:55:08 +02:00
parent 8068ed1129
commit 35c49ff90c
3 changed files with 70 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
resources/js/components/Modal.vue
View File

@ -11,7 +11,7 @@
appear @after-leave="leaveCallback" appear @after-leave="leaveCallback"
> >
<div v-if="show" class="fixed inset-0 transform" @click="close"> <div v-if="show" class="fixed inset-0 transform" @click="close">
<div class="absolute inset-0 bg-gray-500 opacity-75" /> <div class="absolute inset-0 bg-gray-500 opacity-75"/>
</div> </div>
</transition> </transition>
@ -22,25 +22,40 @@
leave-class="opacity-100 translate-y-0 sm:scale-100" leave-class="opacity-100 translate-y-0 sm:scale-100"
leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<div v-if="show" class="modal-content bg-white dark:bg-notion-dark rounded-lg overflow-y-scroll shadow-xl transform transition-all sm:w-full" <div v-if="show"
class="modal-content bg-white dark:bg-notion-dark rounded-lg overflow-y-scroll shadow-xl transform transition-all sm:w-full"
:class="maxWidthClass" :class="maxWidthClass"
> >
<div class="bg-white dark:bg-notion-dark px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> <div class="bg-white relative dark:bg-notion-dark p-4 md:p-6">
<div class="sm:flex sm:items-start"> <div class="absolute top-4 right-4" v-if="closeable">
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> <button class="text-gray-500 hover:text-gray-900 cursor-pointer" @click.prevent="close">
<h3 v-if="$scopedSlots.hasOwnProperty('title')" class="text-lg"> <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<slot name="title" /> <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"
</h3> stroke-linejoin="round"/>
</svg>
</button>
</div>
<div class="sm:flex sm:flex-col sm:items-start">
<div v-if="$scopedSlots.hasOwnProperty('icon')" class="flex w-full justify-center mb-4">
<div class="w-14 h-14 rounded-full flex justify-center items-center"
:class="'bg-'+iconColor+'-100 text-'+iconColor+'-600'">
<slot name="icon"/>
</div>
</div>
<div class="mt-3 text-center sm:mt-0 w-full">
<h2 v-if="$scopedSlots.hasOwnProperty('title')" class="text-2xl font-semibold text-center text-gray-900">
<slot name="title"/>
</h2>
</div> </div>
</div> </div>
<div class="mt-2 w-full"> <div class="mt-2 w-full">
<slot /> <slot/>
</div> </div>
</div> </div>
<div v-if="$scopedSlots.hasOwnProperty('footer')" class="px-6 py-4 bg-gray-100 text-right"> <div v-if="$scopedSlots.hasOwnProperty('footer')" class="px-6 py-4 bg-gray-100 text-right">
<slot name="footer" /> <slot name="footer"/>
</div> </div>
</div> </div>
</transition> </transition>
@ -57,6 +72,9 @@ export default {
show: { show: {
default: false default: false
}, },
iconColor: {
default: 'blue'
},
maxWidth: { maxWidth: {
default: '2xl' default: '2xl'
}, },
@ -73,7 +91,7 @@ export default {
}, },
computed: { computed: {
maxWidthClass () { maxWidthClass() {
return { return {
sm: 'sm:max-w-sm', sm: 'sm:max-w-sm',
md: 'sm:max-w-md', md: 'sm:max-w-md',
@ -97,7 +115,7 @@ export default {
} }
}, },
created () { created() {
const closeOnEscape = (e) => { const closeOnEscape = (e) => {
if (e.key === 'Escape' && this.show) { if (e.key === 'Escape' && this.show) {
this.close() this.close()
@ -112,12 +130,12 @@ export default {
}, },
methods: { methods: {
close () { close() {
if (this.closeable) { if (this.closeable) {
this.$emit('close') this.$emit('close')
} }
}, },
leaveCallback () { leaveCallback() {
if (this.afterLeave) { if (this.afterLeave) {
this.afterLeave() this.afterLeave()
} }

8
resources/js/components/common/Button.vue
View File

@ -3,7 +3,7 @@
@click="$emit('click',$event)" @click="$emit('click',$event)"
> >
<template v-if="!loading"> <template v-if="!loading">
<span class="no-underline"> <span class="no-underline mx-auto">
<slot/> <slot/>
</span> </span>
<svg v-if="arrow" class="ml-2 w-3 h-3 inline" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg v-if="arrow" class="ml-2 w-3 h-3 inline" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
@ -16,7 +16,7 @@
</button> </button>
<router-link v-else :class="btnClasses" :to="to" :target="target" <router-link v-else :class="btnClasses" :to="to" :target="target"
> >
<span class="no-underline"> <span class="no-underline mx-auto">
<slot/> <slot/>
</span> </span>
<svg v-if="arrow" class="ml-2 w-3 h-3 inline" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg v-if="arrow" class="ml-2 w-3 h-3 inline" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
@ -72,8 +72,8 @@ export default {
const sizes = this.sizes const sizes = this.sizes
const colorShades = this.colorShades const colorShades = this.colorShades
return `${sizes['p-y']} ${sizes['p-x']} return `${sizes['p-y']} ${sizes['p-x']}
${colorShades['main']} ${colorShades['hover']} ${colorShades['ring']} ${colorShades['ring-offset']} ${colorShades?.main} ${colorShades?.hover} ${colorShades?.ring} ${colorShades['ring-offset']}
${colorShades['text']} transition ease-in duration-200 text-center text-${sizes['font']} font-medium focus:outline-none focus:ring-2 ${colorShades?.text} transition ease-in duration-200 text-center text-${sizes?.font} font-medium focus:outline-none focus:ring-2
focus:ring-offset-2 rounded-lg flex items-center hover:no-underline` focus:ring-offset-2 rounded-lg flex items-center hover:no-underline`
}, },
colorShades() { colorShades() {

59
resources/js/pages/settings/workspace.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<card title="Workspaces" class="bg-gray-50 dark:bg-notion-dark-light"> <card title="Workspaces" class="bg-gray-50 dark:bg-notion-dark-light">
<div v-if="loading" class="w-full text-blue-500 text-center"> <div v-if="loading" class="w-full text-blue-500 text-center">
<loader class="h-10 w-10 p-5" /> <loader class="h-10 w-10 p-5"/>
</div> </div>
<div v-else> <div v-else>
<div v-for="workspace in workspaces" :key="workspace.id" <div v-for="workspace in workspaces" :key="workspace.id"
@ -15,12 +15,15 @@
v-text="workspace.icon" v-text="workspace.icon"
/> />
<div class="flex-1 flex items-center space-y-4 py-1"> <div class="flex-1 flex items-center space-y-4 py-1">
<p class="font-bold truncate" v-text="workspace.name" /> <p class="font-bold truncate" v-text="workspace.name"/>
</div> </div>
</div> </div>
<div v-if="workspaces.length > 1" class="block md:hidden group-hover:block text-red-500 p-2 rounded hover:bg-red-50" role="button" @click="deleteWorkspace(workspace)"> <div v-if="workspaces.length > 1"
class="block md:hidden group-hover:block text-red-500 p-2 rounded hover:bg-red-50" role="button"
@click="deleteWorkspace(workspace)">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
</svg> </svg>
</div> </div>
</div> </div>
@ -32,26 +35,32 @@
</div> </div>
<!-- Workspace modal --> <!-- Workspace modal -->
<modal :show="workspaceModal" @close="workspaceModal=false"> <modal :show="workspaceModal" @close="workspaceModal=false" max-width="lg">
<template #icon>
<svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12 8V16M8 12H16M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</template>
<template #title>
Create Workspace
</template>
<div class="px-4"> <div class="px-4">
<form @submit.prevent="createWorkspace" @keydown="form.onKeydown($event)"> <form @submit.prevent="createWorkspace" @keydown="form.onKeydown($event)">
<h2 class="text-2xl font-bold z-10 truncate mb-5 text-nt-blue">
Create Workspace
</h2>
<div> <div>
<text-input name="name" class="mt-4" :form="form" :required="true" <text-input name="name" class="mt-4" :form="form" :required="true"
label="Workspace Name" label="Workspace Name"
/> />
<text-input name="emoji" class="mt-4" :form="form" :required="false" <text-input name="emoji" class="mt-4" :form="form" :required="false"
label="Emoji" label="Emoji"
/> />
</div> </div>
<div class="flex justify-end mt-4"> <div class="w-full mt-6">
<v-button :loading="form.busy" class="mr-1">Save</v-button> <v-button :loading="form.busy" class="w-full my-3">Save</v-button>
<v-button color="gray" shade="light" @click.prevent="workspaceModal=false">Close</v-button>
</div> </div>
</form> </form>
</div> </div>
</modal> </modal>
@ -61,15 +70,15 @@
<script> <script>
import Form from 'vform' import Form from 'vform'
import { mapActions, mapState } from 'vuex' import {mapActions, mapState} from 'vuex'
export default { export default {
components: { }, components: {},
scrollToTop: false, scrollToTop: false,
metaInfo () { metaInfo() {
return { title: 'Workspaces' } return {title: 'Workspaces'}
}, },
data: () => ({ data: () => ({
@ -80,7 +89,7 @@ export default {
workspaceModal: false workspaceModal: false
}), }),
mounted () { mounted() {
this.loadWorkspaces() this.loadWorkspaces()
}, },
@ -95,19 +104,19 @@ export default {
...mapActions({ ...mapActions({
loadWorkspaces: 'open/workspaces/loadIfEmpty' loadWorkspaces: 'open/workspaces/loadIfEmpty'
}), }),
switchWorkspace (workspace) { switchWorkspace(workspace) {
this.$store.commit('open/workspaces/setCurrentId', workspace.id) this.$store.commit('open/workspaces/setCurrentId', workspace.id)
this.$router.push({ name: 'home' }) this.$router.push({name: 'home'})
this.$store.dispatch('open/forms/load', workspace.id) this.$store.dispatch('open/forms/load', workspace.id)
}, },
deleteWorkspace (workspace) { deleteWorkspace(workspace) {
this.alertConfirm('Do you really want to delete this workspace? All forms created in this workspace will be removed.', () => { this.alertConfirm('Do you really want to delete this workspace? All forms created in this workspace will be removed.', () => {
this.$store.dispatch('open/workspaces/delete', workspace.id).then(() => { this.$store.dispatch('open/workspaces/delete', workspace.id).then(() => {
this.alertSuccess('Workspace successfully removed.') this.alertSuccess('Workspace successfully removed.')
}) })
}) })
}, },
isUrl (str) { isUrl(str) {
const pattern = new RegExp('^(https?:\\/\\/)?' + // protocol const pattern = new RegExp('^(https?:\\/\\/)?' + // protocol
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
'((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
@ -116,8 +125,8 @@ export default {
'(\\#[-a-z\\d_]*)?$', 'i') // fragment locator '(\\#[-a-z\\d_]*)?$', 'i') // fragment locator
return !!pattern.test(str) return !!pattern.test(str)
}, },
async createWorkspace () { async createWorkspace() {
const { data } = await this.form.post('/api/open/workspaces/create') const {data} = await this.form.post('/api/open/workspaces/create')
this.$store.dispatch('open/workspaces/load') this.$store.dispatch('open/workspaces/load')
this.workspaceModal = false this.workspaceModal = false
} }