Fix dropdown
This commit is contained in:
parent
933f95e944
commit
df2fa4c444
|
@ -1,54 +1,50 @@
|
|||
<template>
|
||||
<div class="relative">
|
||||
<div class="relative" ref="dropdown">
|
||||
<slot name="trigger"
|
||||
:toggle="toggle"
|
||||
:open="open"
|
||||
:close="close"
|
||||
/>
|
||||
|
||||
<collapsible v-model="isOpen" :class="dropdownClass">
|
||||
<collapsible v-model="isOpen" :class="dropdownClass" @click-away="onClickAway">
|
||||
<div class="py-1 " role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
|
||||
<slot />
|
||||
<slot/>
|
||||
</div>
|
||||
</collapsible>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
<script setup>
|
||||
import {ref} from 'vue'
|
||||
import Collapsible from './transitions/Collapsible.vue'
|
||||
|
||||
export default {
|
||||
name: 'Dropdown',
|
||||
components: { Collapsible },
|
||||
directives: {},
|
||||
props: {
|
||||
dropdownClass: {
|
||||
type: String,
|
||||
default: 'origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-20'
|
||||
}
|
||||
},
|
||||
setup () {
|
||||
const isOpen = ref(false)
|
||||
const props = defineProps({
|
||||
dropdownClass: {
|
||||
type: String,
|
||||
default: 'origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-20'
|
||||
}
|
||||
})
|
||||
|
||||
const open = () => {
|
||||
isOpen.value = true
|
||||
}
|
||||
const isOpen = ref(false)
|
||||
const dropdown = ref(null)
|
||||
|
||||
const close = () => {
|
||||
isOpen.value = false
|
||||
}
|
||||
const open = (event) => {
|
||||
isOpen.value = true
|
||||
}
|
||||
|
||||
const toggle = () => {
|
||||
isOpen.value = !isOpen.value
|
||||
}
|
||||
const close = (event) => {
|
||||
console.log('closing')
|
||||
isOpen.value = false
|
||||
}
|
||||
|
||||
return {
|
||||
isOpen,
|
||||
open,
|
||||
close,
|
||||
toggle
|
||||
}
|
||||
const toggle = (event) => {
|
||||
isOpen.value = !isOpen.value
|
||||
}
|
||||
|
||||
const onClickAway = (event) => {
|
||||
// Check that event target isn't children of dropdown
|
||||
if (dropdown.value && !dropdown.value.contains(event.target)) {
|
||||
close(event)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -2,9 +2,7 @@
|
|||
<NuxtLink v-if="href" :class="btnClasses" :href="href" :target="target">
|
||||
<slot />
|
||||
</NuxtLink>
|
||||
<button v-else-if="!to" :type="nativeType" :disabled="loading?true:null" :class="btnClasses"
|
||||
@click="onClick($event)"
|
||||
>
|
||||
<button v-else-if="!to" :type="nativeType" :disabled="loading?true:null" :class="btnClasses">
|
||||
<template v-if="!loading">
|
||||
<span class="no-underline mx-auto">
|
||||
<slot />
|
||||
|
@ -175,11 +173,5 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick (event) {
|
||||
this.$emit('click', event)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -1,11 +1,9 @@
|
|||
<template>
|
||||
<transition @leave="(el,done)=>motions.collapsible.leave(done)">
|
||||
<transition @leave="onLeave">
|
||||
<div
|
||||
ref="collapsible"
|
||||
v-if="modelValue"
|
||||
v-motion="'collapsible'"
|
||||
:variants="variants"
|
||||
v-on-click-outside.bubble="close"
|
||||
v-on-click-outside.bubble="onClickAway"
|
||||
>
|
||||
<slot/>
|
||||
</div>
|
||||
|
@ -17,27 +15,38 @@ import {vOnClickOutside} from '@vueuse/components'
|
|||
|
||||
const props = defineProps({
|
||||
modelValue: {type: Boolean},
|
||||
closeOnClickAway: {type: Boolean, default: true},
|
||||
maxHeight: {type: Number, default: 200},
|
||||
})
|
||||
const emits = defineEmits(['update:modelValue'])
|
||||
const emits = defineEmits(['click-away'])
|
||||
|
||||
const motions = useMotions()
|
||||
const variants = ref({
|
||||
enter: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {duration: 150, ease: 'easeOut'}
|
||||
},
|
||||
const motion = ref(null)
|
||||
const collapsible = ref(null)
|
||||
const variants = {
|
||||
initial: {
|
||||
opacity: 0,
|
||||
y: -10,
|
||||
transition: {duration: 75, ease: 'easeIn'}
|
||||
},
|
||||
})
|
||||
const close = () => {
|
||||
if (props.closeOnClickAway) {
|
||||
emits('update:modelValue', false)
|
||||
enter: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {duration: 150, ease: 'easeOut'}
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => props.modelValue, (newValue) => {
|
||||
if (newValue) {
|
||||
nextTick(() => {
|
||||
motion.value = useMotion(collapsible.value, variants)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const onLeave = (el, done) => {
|
||||
motion.value.leave(done)
|
||||
}
|
||||
|
||||
const onClickAway = (event) => {
|
||||
emits('click-away', event)
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -3,9 +3,9 @@
|
|||
<div v-if="loadingDuplicate || loadingDelete" class="pr-4 pt-2">
|
||||
<Loader class="h-6 w-6 mx-auto" />
|
||||
</div>
|
||||
<dropdown v-else class="inline" dusk="nav-dropdown">
|
||||
<dropdown v-else class="inline">
|
||||
<template #trigger="{toggle}">
|
||||
<v-button color="white" class="mr-2" @click.stop="toggle">
|
||||
<v-button color="white" class="mr-2" @click="toggle">
|
||||
<svg class="w-4 h-4 inline -mt-1" viewBox="0 0 16 4" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
|
@ -42,7 +42,7 @@
|
|||
View form
|
||||
</a>
|
||||
<router-link v-if="isMainPage" v-track.edit_form_click="{form_id:form.id, form_slug:form.slug}"
|
||||
:to="{name:'forms.edit', params: {slug: form.slug}}"
|
||||
:to="{name:'forms-edit', params: {slug: form.slug}}"
|
||||
class="block block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
|
||||
>
|
||||
<svg class="w-4 h-4 mr-2" width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
|
@ -141,8 +141,6 @@
|
|||
<script>
|
||||
import { computed } from 'vue'
|
||||
import axios from 'axios'
|
||||
import { useAuthStore } from '../../../../stores/auth'
|
||||
import { useFormsStore } from '../../../../stores/forms'
|
||||
import Dropdown from '~/components/global/Dropdown.vue'
|
||||
import FormTemplateModal from '../../../open/forms/components/templates/FormTemplateModal.vue'
|
||||
|
||||
|
|
|
@ -263,7 +263,7 @@ export default {
|
|||
this.$router.push({ name: 'home' })
|
||||
},
|
||||
openEdit () {
|
||||
this.$router.push({ name: 'forms.edit', params: { slug: this.form.slug } })
|
||||
this.$router.push({ name: 'forms-edit', params: { slug: this.form.slug } })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -170,8 +170,6 @@ const isFilteringForms = computed(() => {
|
|||
const allTags = computed(() => {
|
||||
let tags = []
|
||||
forms.value.forEach((form) => {
|
||||
console.log(form.tags)
|
||||
// TODO: check this works
|
||||
if (form.tags && form.tags.length) {
|
||||
tags = tags.concat(form.tags.split(','))
|
||||
}
|
||||
|
|
|
@ -4,8 +4,8 @@
|
|||
<loader class="h-6 w-6 mx-auto" />
|
||||
</div>
|
||||
<dropdown v-else class="inline" dusk="nav-dropdown">
|
||||
<template #trigger="{toggle}">
|
||||
<v-button color="white" class="mr-2" @click.stop="toggle">
|
||||
<template #trigger="actions">
|
||||
<v-button color="white" class="mr-2" @click.native="onClick(actions)">
|
||||
<svg class="w-4 h-4 inline -mt-1" viewBox="0 0 16 4" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
|
@ -147,8 +147,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { computed } from 'vue'
|
||||
import axios from 'axios'
|
||||
import { computed } from 'vue'
|
||||
import { useAuthStore } from '../../../../stores/auth'
|
||||
import { useFormsStore } from '../../../../stores/forms'
|
||||
import Dropdown from '../../../common/Dropdown.vue'
|
||||
|
@ -184,6 +184,9 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
onClick (actions) {
|
||||
console.log('click', actions)
|
||||
},
|
||||
copyLink () {
|
||||
const el = document.createElement('textarea')
|
||||
el.value = this.form.share_url
|
||||
|
|
Loading…
Reference in New Issue