67 lines
2.0 KiB
Vue
67 lines
2.0 KiB
Vue
<template>
|
|
<div
|
|
class="border border-nt-blue-light bg-blue-50 dark:bg-notion-dark-light shadow rounded-md p-4 mb-5 w-full mx-auto mt-4 select-all"
|
|
>
|
|
<div class="flex items-center">
|
|
<p class="select-all flex-grow break-all" v-html="preFillUrl" />
|
|
<div class="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer" @click="copyToClipboard">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-nt-blue" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, computed } from 'vue'
|
|
const { copy } = useClipboard()
|
|
|
|
const props = defineProps({
|
|
form: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
formData: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
extraQueryParam: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
const preFillUrl = computed(() => {
|
|
const url = props.form.share_url
|
|
const uriComponents = new URLSearchParams()
|
|
props.form.properties.filter((property) => {
|
|
return props.formData.hasOwnProperty(property.id) && props.formData[property.id] !== null
|
|
}).forEach((property) => {
|
|
if (Array.isArray(props.formData[property.id])) {
|
|
props.formData[property.id].forEach((value) => {
|
|
uriComponents.append(property.id + '[]', value)
|
|
})
|
|
} else {
|
|
uriComponents.append(property.id, props.formData[property.id])
|
|
}
|
|
})
|
|
|
|
if(uriComponents.toString() !== ""){
|
|
return (props.extraQueryParam) ? url + '?' + uriComponents + '&' + props.extraQueryParam : url + '?' + uriComponents
|
|
}else{
|
|
return (props.extraQueryParam) ? url + '?' + props.extraQueryParam : url
|
|
}
|
|
})
|
|
|
|
const copyToClipboard = () => {
|
|
if (process.server) return
|
|
copy(preFillUrl.value)
|
|
useAlert().success('Copied!')
|
|
}
|
|
</script>
|