migrate to nuxt useClipboard (#268)

client/components/open/forms/components/CopyContent.vue

@@ -6,7 +6,7 @@
       </p>
     </div>
     <div class="w-full sm:w-40 sm:ml-2 mt-2 sm:mt-0 shrink-0">
-      <v-button color="light-gray" class="w-full" @click="copyToClipboard(content)">
+      <v-button color="light-gray" class="w-full" @click="copyToClipboard">
         <slot name="icon">
           <svg class="h-4 w-4 -mt-1 text-blue-600 inline mr-1" viewBox="0 0 20 20" fill="none"
                xmlns="http://www.w3.org/2000/svg">
@@ -21,47 +21,28 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'CopyContent',
-  props: {
-    content: {
-      type: String,
-      required: true
-    },
-    isDraft: {
-      type: Boolean,
-      default: false
-    },
+<script setup>
+import { defineProps } from 'vue'
+const { copy } = useClipboard()
+
+const props = defineProps({
+  content: {
+    type: String,
+    required: true
   },
+  isDraft: {
+    type: Boolean,
+    default: false
+  }
+})
 
-  data() {
-    return {}
-  },
-
-  computed: {},
-
-  watch: {},
-
-  mounted() {
-  },
-
-  methods: {
-    copyToClipboard(str) {
-      if (process.server) return
-      const el = document.createElement('textarea')
-      el.value = str
-      document.body.appendChild(el)
-      el.select()
-      document.execCommand('copy')
-      document.body.removeChild(el)
-      if(this.isDraft){
-        useAlert().warning('Copied! But other people won\'t be able to see the form since it\'s currently in draft mode')
-      } else {
-        useAlert().success('Copied!')
-      }
-
-    }
+const copyToClipboard = () => {
+  if (process.server) return
+  copy(props.content)
+  if(props.isDraft){
+    useAlert().warning('Copied! But other people won\'t be able to see the form since it\'s currently in draft mode')
+  } else {
+    useAlert().success('Copied!')
   }
 }
 </script>

client/components/open/forms/components/FormUrlPrefill.vue

@@ -17,72 +17,50 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'FormUrlPrefill',
-  props: {
-    form: {
-      type: Object,
-      required: true
-    },
-    formData: {
-      type: Object,
-      required: true
-    },
-    extraQueryParam: {
-      type: String,
-      default: ''
-    }
+<script setup>
+import { defineProps, computed } from 'vue'
+const { copy } = useClipboard()
+
+const props = defineProps({
+  form: {
+    type: Object,
+    required: true
   },
-
-  data () {
-    return {}
+  formData: {
+    type: Object,
+    required: true
   },
-
-  computed: {
-    preFillUrl () {
-      const url = this.form.share_url
-      const uriComponents = new URLSearchParams()
-      this.form.properties.filter((property) => {
-        return this.formData.hasOwnProperty(property.id) && this.formData[property.id] !== null
-      }).forEach((property) => {
-        if (Array.isArray(this.formData[property.id])) {
-          this.formData[property.id].forEach((value) => {
-            uriComponents.append(property.id + '[]', value)
-          })
-        } else {
-          uriComponents.append(property.id, this.formData[property.id])
-        }
-      })
-
-      if(uriComponents.toString() !== ""){
-        return (this.extraQueryParam) ? url + '?' + uriComponents + '&' + this.extraQueryParam : url + '?' + uriComponents
-      }else{
-        return (this.extraQueryParam) ? url + '?' + this.extraQueryParam : url
-      }
-    }
-  },
-
-  watch: {},
-
-  mounted () {
-  },
-
-  methods: {
-    getPropertyUriComponent (property) {
-      const prefillValue = encodeURIComponent(this.formData[property.id])
-      return encodeURIComponent(property.id) + '=' + prefillValue
-    },
-    copyToClipboard () {
-      if (process.server) return
-      const str = this.preFillUrl
-      const el = document.createElement('textarea')
-      el.value = str
-      document.body.appendChild(el)
-      el.select()
-      document.execCommand('copy')
-      document.body.removeChild(el)
-    }
+  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>

client/components/pages/forms/show/EmbedFormAsPopupModal.vue

@@ -59,7 +59,7 @@
           </div>
         </div>
 
-        <collapse class="py-5 w-full border rounded-md px-4" :model-value="false">
+        <collapse class="py-5 w-full border rounded-md px-4" :model-value="true">
           <template #title>
             <div class="flex">
               <h3 class="font-semibold block text-lg">
@@ -101,99 +101,87 @@
   </div>
 </template>
 
-<script>
-import Collapse from '~/components/global/Collapse.vue'
+<script setup>
+import { ref, defineProps, computed } from 'vue'
 
-export default {
-  name: 'EmbedFormAsPopupModal',
-  components: { Collapse },
-  props: {
-    form: { type: Object, required: true }
-  },
+const { copy } = useClipboard()
+const crisp = useCrisp()
+const props = defineProps({
+  form: { type: Object, required: true }
+})
 
-  data: () => ({
-    showEmbedFormAsPopupModal: false,
-    embedScriptUrl: 'widgets/embed-min.js',
-    advancedOptions: {
-      hide_title: false,
-      emoji: '💬',
-      position: 'right',
-      bgcolor: '#3B82F6',
-      width: '500'
-    }
-  }),
+const embedScriptUrl = '/widgets/embed-min.js'
+let showEmbedFormAsPopupModal = ref(false)
+let advancedOptions = ref({
+  hide_title: false,
+  emoji: '💬',
+  position: 'right',
+  bgcolor: '#3B82F6',
+  width: '500'
+})
 
-  computed: {
-    hideTitleHelp () {
-      return this.form.hide_title ? 'This option is disabled because the form title is already hidden' : null
-    },
-    shareUrl () {
-      return (this.advancedOptions.hide_title) ? this.form.share_url + '?hide_title=true' : this.form.share_url
-    },
-    embedPopupCode () {
-      const nfData = {
-        formurl: this.shareUrl,
-        emoji: this.advancedOptions.emoji,
-        position: this.advancedOptions.position,
-        bgcolor: this.advancedOptions.bgcolor,
-        width: this.advancedOptions.width
-      }
-      this.previewPopup(nfData)
-      return '<script async data-nf=\'' + JSON.stringify(nfData) + '\' src=\'' + this.asset(this.embedScriptUrl) + '\'></scrip' + 't>'
-    }
-  },
+let hideTitleHelp = computed(() => {
+  return props.form.hide_title ? 'This option is disabled because the form title is already hidden' : null
+})
+let shareUrl = computed(() => {
+  return (advancedOptions.value.hide_title) ? props.form.share_url + '?hide_title=true' : props.form.share_url
+})
+let embedPopupCode = computed(() => {
+  const nfData = {
+    formurl: shareUrl.value,
+    emoji: advancedOptions.value.emoji,
+    position: advancedOptions.value.position,
+    bgcolor: advancedOptions.value.bgcolor,
+    width: advancedOptions.value.width
+  }
+  previewPopup(nfData)
+  return '<script async data-nf=\'' + JSON.stringify(nfData) + '\' src=\'' + embedScriptUrl + '\'></scrip' + 't>'
+})
 
-  mounted () {
-    this.advancedOptions.bgcolor = this.form.color
-  },
+onMounted(() => {
+  advancedOptions.value.bgcolor = props.form.color
+})
 
-  methods: {
-    onClose () {
-      this.removePreview()
-      this.$crisp.push(['do', 'chat:show'])
-      this.showEmbedFormAsPopupModal = false
-    },
-    copyToClipboard () {
-      if (process.server) return
-      const str = this.embedPopupCode
-      const el = document.createElement('textarea')
-      el.value = str
-      document.body.appendChild(el)
-      el.select()
-      document.execCommand('copy')
-      document.body.removeChild(el)
-    },
-    removePreview () {
-      if (process.server) return
-      const oldP = document.head.querySelector('#nf-popup-preview')
-      if (oldP) {
-        oldP.remove()
-      }
-      const oldM = document.body.querySelector('.nf-main')
-      if (oldM) {
-        oldM.remove()
-      }
-    },
-    previewPopup (nfData) {
-      if (process.server) return
-      if (!this.showEmbedFormAsPopupModal) {
-        return
-      }
 
-      // Remove old preview, if there
-      this.removePreview()
-
-      // Hide crisp
-      this.$crisp.push(['do', 'chat:hide'])
-
-      // Add new preview
-      const el = document.createElement('script')
-      el.id = 'nf-popup-preview'
-      el.async = true
-      el.src = this.asset(this.embedScriptUrl)
-      el.setAttribute('data-nf', JSON.stringify(nfData))
-      document.head.appendChild(el)
-    }
+const onClose = () => {
+  removePreview()
+  crisp.showChat()
+  showEmbedFormAsPopupModal.value = false
+}
+const copyToClipboard = () => {
+  if (process.server) return
+  copy(embedPopupCode.value)
+  useAlert().success('Copied!')
+}
+const removePreview = () => {
+  if (process.server) return
+  const oldP = document.head.querySelector('#nf-popup-preview')
+  if (oldP) {
+    oldP.remove()
+  }
+  const oldM = document.body.querySelector('.nf-main')
+  if (oldM) {
+    oldM.remove()
   }
 }
+const previewPopup = (nfData) => {
+  if (process.server) return
+  if (!showEmbedFormAsPopupModal.value) {
+    return
+  }
+
+  // Remove old preview, if there
+  removePreview()
+
+  // Hide crisp
+  crisp.hideChat()
+
+  // Add new preview
+  const el = document.createElement('script')
+  el.id = 'nf-popup-preview'
+  el.async = true
+  el.src = embedScriptUrl
+  el.setAttribute('data-nf', JSON.stringify(nfData))
+  document.head.appendChild(el)
+}
 </script>

client/components/pages/forms/show/ExtraMenu.vue

@@ -138,70 +138,51 @@
   </div>
 </template>
 
-<script>
-import { computed } from 'vue'
+<script setup>
+import { ref, defineProps, computed } from 'vue'
 import Dropdown from '~/components/global/Dropdown.vue'
 import FormTemplateModal from '../../../open/forms/components/templates/FormTemplateModal.vue'
 
-export default {
-  name: 'ExtraMenu',
-  components: { Dropdown, FormTemplateModal },
-  props: {
-    form: { type: Object, required: true },
-    isMainPage: { type: Boolean, required: false, default: false }
-  },
+const { copy } = useClipboard()
+const router = useRouter()
 
-  setup () {
-    const authStore = useAuthStore()
-    const formsStore = useFormsStore()
-    return {
-      formsStore,
-      user: computed(() => authStore.user),
-      useAlert: useAlert()
-    }
-  },
+const props = defineProps({
+  form: { type: Object, required: true },
+  isMainPage: { type: Boolean, required: false, default: false }
+})
 
-  data: () => ({
-    loadingDuplicate: false,
-    loadingDelete: false,
-    showDeleteFormModal: false,
-    showFormTemplateModal: false
-  }),
+const authStore = useAuthStore()
+const formsStore = useFormsStore()
+const formEndpoint = '/open/forms/{id}'
+let user = computed(() => authStore.user)
 
-  computed: {
-    formEndpoint: () => '/open/forms/{id}'
-  },
+let loadingDuplicate = ref(false)
+let loadingDelete = ref(false)
+let showDeleteFormModal = ref(false)
+let showFormTemplateModal = ref(false)
 
-  methods: {
-    copyLink () {
-      const el = document.createElement('textarea')
-      el.value = this.form.share_url
-      document.body.appendChild(el)
-      el.select()
-      document.execCommand('copy')
-      document.body.removeChild(el)
-      this.useAlert.success('Copied!')
-    },
-    duplicateForm () {
-      if (this.loadingDuplicate) return
-      this.loadingDuplicate = true
-      opnFetch(this.formEndpoint.replace('{id}', this.form.id) + '/duplicate',{method: 'POST'}).then((data) => {
-        this.formsStore.save(data.new_form)
-        this.$router.push({ name: 'forms-show', params: { slug: data.new_form.slug } })
-        this.useAlert.success('Form was successfully duplicated.')
-        this.loadingDuplicate = false
-      })
-    },
-    deleteForm () {
-      if (this.loadingDelete) return
-      this.loadingDelete = true
-      opnFetch(this.formEndpoint.replace('{id}', this.form.id),{method:'DELETE'}).then(() => {
-        this.formsStore.remove(this.form)
-        this.$router.push({ name: 'home' })
-        this.useAlert.success('Form was deleted.')
-        this.loadingDelete = false
-      })
-    }
-  }
+const copyLink = () => {
+  copy(props.form.share_url)
+  useAlert().success('Copied!')
+}
+const duplicateForm = () => {
+  if (loadingDuplicate.value) return
+  loadingDuplicate.value = true
+  opnFetch(formEndpoint.replace('{id}', props.form.id) + '/duplicate',{method: 'POST'}).then((data) => {
+    formsStore.save(data.new_form)
+    router.push({ name: 'forms-slug-show', params: { slug: data.new_form.slug } })
+    useAlert().success('Form was successfully duplicated.')
+    loadingDuplicate.value = false
+  })
+}
+const deleteForm = () => {
+  if (loadingDelete.value) return
+  loadingDelete.value = true
+  opnFetch(formEndpoint.replace('{id}', props.form.id),{method:'DELETE'}).then(() => {
+    formsStore.remove(props.form)
+    router.push({ name: 'home' })
+    useAlert().success('Form was deleted.')
+    loadingDelete.value = false
+  })
 }
 </script>

client/pages/templates/[slug].vue

@@ -205,6 +205,7 @@ defineRouteRules({
   prerender: true
 })
 
+const { copy } = useClipboard()
 const authStore = useAuthStore()
 const templatesStore = useTemplatesStore()
 
@@ -255,13 +256,7 @@ const cleanQuotes = (str) => {
 }
 
 const copyTemplateUrl = () => {
-  const str = template.value.share_url
-  const el = document.createElement('textarea')
-  el.value = str
-  document.body.appendChild(el)
-  el.select()
-  document.execCommand('copy')
-  document.body.removeChild(el)
+  copy(template.value.share_url)
   useAlert().success('Copied!')
 }