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>