@explorer-1/vue 0.3.8 → 0.3.9

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @explorer-1/vue
 
+## 0.3.9
+
+### Patch Changes
+
+- 604b717: Fixing url handling in BlockCsrTable, adding option to disable trailing slash in BaseLink.
+
 ## 0.3.8
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/BaseLink/BaseLink.vue

@@ -50,6 +50,11 @@ export default defineComponent({
       type: String,
       default: undefined
     },
+    /** Links are normalized to add a trailing slash (handles links to files, query params etc.). Set to false to disable. */
+    addSlash: {
+      type: Boolean,
+      default: true
+    },
     title: {
       type: String,
       default: undefined
@@ -196,46 +201,49 @@ export default defineComponent({
       eventBus.emit('linkClicked')
     },
     addTrailingSlash(path: string) {
-      let filteredPath = path
-      if (path && typeof path === 'string') {
-        const isFilePath = () => {
-          const afterLastSlash = path.split('/').pop()
-          if (afterLastSlash && afterLastSlash.includes('.')) {
-            return true
-          }
-          return false
-        }
-        const isQueryPath = path.includes('?')
-        const isAnchorPath = path.includes('#')
-        if (
-          !isQueryPath &&
-          !isAnchorPath &&
-          !isFilePath() &&
-          path !== '/' &&
-          !path.endsWith('/') &&
-          !path.startsWith('/preview')
-        ) {
-          // add a trailing slash if there isn't one
-          filteredPath += '/'
-        } else if (isQueryPath) {
-          if (!path.includes('/?')) {
-            // also add a trailing slash to paths with query params
-            const urlParts = filteredPath.split('?')
-            const pathWithSlash = `${urlParts[0]}/`
-            const queryParams = urlParts[1]
-            filteredPath = pathWithSlash + '?' + queryParams
+      if (this.addSlash) {
+        let filteredPath = path
+        if (path && typeof path === 'string') {
+          const isFilePath = () => {
+            const afterLastSlash = path.split('/').pop()
+            if (afterLastSlash && afterLastSlash.includes('.')) {
+              return true
+            }
+            return false
           }
-        } else if (isAnchorPath) {
-          if (!path.includes('/#')) {
-            // also add a trailing slash to paths with anchors
-            const urlParts = filteredPath.split('#')
-            const pathWithSlash = `${urlParts[0]}/`
-            const anchor = urlParts[1]
-            filteredPath = pathWithSlash + '#' + anchor
+          const isQueryPath = path.includes('?')
+          const isAnchorPath = path.includes('#')
+          if (
+            !isQueryPath &&
+            !isAnchorPath &&
+            !isFilePath() &&
+            path !== '/' &&
+            !path.endsWith('/') &&
+            !path.startsWith('/preview')
+          ) {
+            // add a trailing slash if there isn't one
+            filteredPath += '/'
+          } else if (isQueryPath) {
+            if (!path.includes('/?')) {
+              // also add a trailing slash to paths with query params
+              const urlParts = filteredPath.split('?')
+              const pathWithSlash = `${urlParts[0]}/`
+              const queryParams = urlParts[1]
+              filteredPath = pathWithSlash + '?' + queryParams
+            }
+          } else if (isAnchorPath) {
+            if (!path.includes('/#')) {
+              // also add a trailing slash to paths with anchors
+              const urlParts = filteredPath.split('#')
+              const pathWithSlash = `${urlParts[0]}/`
+              const anchor = urlParts[1]
+              filteredPath = pathWithSlash + '#' + anchor
+            }
           }
         }
+        return filteredPath
       }
-      return filteredPath
+      return path
     }
   }
 })

package/src/components/BlockCsrTable/CsrAttachment.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
+import { computed, onMounted } from 'vue'
 import BaseLink from './../BaseLink/BaseLink.vue'
 
 interface CsrAttachmentProps {
@@ -15,14 +15,26 @@ interface CsrAttachmentProps {
 const props = withDefaults(defineProps<CsrAttachmentProps>(), {
   params: undefined
 })
-const { params } = reactive(props)
+
+const encodedAttachmentUrl = computed(() => {
+  let url = ''
+  if (props.params.data?.Attachment && props.params.attachmentPrefix) {
+    url = props.params.attachmentPrefix + props.params.data.Attachment
+  }
+  return encodeURI(url)
+})
+
+onMounted(() => {
+  console.log(encodedAttachmentUrl.value)
+})
 </script>
 <template>
   <BaseLink
-    v-if="params?.data?.Attachment"
-    :href="params.attachmentPrefix + params.data.Attachment"
+    v-if="props.params?.data?.Attachment"
+    :href="encodedAttachmentUrl"
     variant="default"
     target="_blank"
+    :add-slash="false"
     >Download</BaseLink
   >
 </template>