@abi-software/map-side-bar 2.18.0 → 2.19.1-demo.0

package/src/main.js

@@ -1,10 +1,10 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import "./assets/fonts.scss"
-import MapSideBar from './components/SideBar.vue'
+import { createApp } from 'vue';
+import App from './App.vue';
+import './assets/fonts.scss';
+import MapSideBar from './components/SideBar.vue';
 
 const app = createApp(App);
 
-app.component('MapSideBar', MapSideBar)
+app.component('MapSideBar', MapSideBar);
 
-app.mount("#app");
+app.mount('#app');

package/src/mixins/S3Bucket.vue

@@ -1,37 +1,34 @@
 <script>
 export default {
-  name: "S3Bucket",
+  name: 'S3Bucket',
   data() {
     return {
       s3Bucket: undefined,
-      s3Prefix: "",
+      s3Prefix: '',
     };
   },
   methods: {
-    updateS3Bucket: function(s3uri) {
+    updateS3Bucket: function (s3uri) {
       this.s3Bucket = undefined;
       if (s3uri) {
-        const substring = s3uri.split("//")[1];
+        const substring = s3uri.split('//')[1];
         if (substring) {
-          this.s3Bucket = substring.split("/")[0];
+          this.s3Bucket = substring.split('/')[0];
           const n = substring.indexOf('/');
           this.s3Prefix = substring.substring(n + 1);
           return;
         }
       }
     },
-    getS3Args: function() {
+    getS3Args: function () {
       if (this.s3Bucket) {
-        return `?s3BucketName=${this.s3Bucket}`
+        return `?s3BucketName=${this.s3Bucket}`;
       }
-      return "";
+      return '';
     },
-    getS3Prefix: function() {
+    getS3Prefix: function () {
       return this.s3Prefix;
-    }
+    },
   },
-
 };
 </script>
-
-

package/src/utils/common.js

@@ -0,0 +1,59 @@
+export function generateUUID() {
+  const arr = new Uint8Array(16);
+  window.crypto.getRandomValues(arr);
+
+  arr[6] = (arr[6] & 0x0f) | 0x40;
+  arr[8] = (arr[8] & 0x3f) | 0x80;
+
+  const hex = Array.from(arr)
+    .map((byte) => byte.toString(16).padStart(2, '0'))
+    .join('');
+
+  return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+}
+
+export function capitalise(text) {
+  if (!text) return '';
+  const value = String(text);
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+
+export function formatAlertText(text, { formatLines = false } = {}) {
+  if (!text) return '';
+
+  const escaped = String(text).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+  const linkified = escaped.replace(/(https?:\/\/[^\s"<>[]+)/g, (url) => {
+    const parts = url.match(/^(.*?)([\].,;:!?]*)$/);
+    const cleanUrl = parts ? parts[1] : url;
+    const suffix = parts ? parts[2] : '';
+    return `<a href="${cleanUrl}" target="_blank" rel="noopener noreferrer">${cleanUrl}</a>${suffix}`;
+  });
+
+  const normalised = linkified.replace(/\\n/g, '\n').replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+
+  if (!formatLines) {
+    return normalised;
+  }
+
+  return normalised
+    .split('\n')
+    .map((line) => {
+      const withBoldLabel = line.replace(/^\s*([A-Za-z][^:<]{0,120}:)/, '<strong>$1</strong>');
+      return `<div class="alert-line">${withBoldLabel}</div>`;
+    })
+    .join('\n');
+}
+
+export function scrollToRef(vm, refName) {
+  vm?.$nextTick(() => {
+    const element = vm?.$refs?.[refName];
+    if (element) {
+      element.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start',
+        inline: 'nearest',
+      });
+    }
+  });
+}

package/vite.config.js

@@ -1,69 +1,70 @@
-import { resolve } from "node:path"
+import { resolve } from 'node:path';
 
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-
-import Components from 'unplugin-vue-components/vite'
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import AutoImport from 'unplugin-auto-import/vite';
+import Components from 'unplugin-vue-components/vite';
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    server: {
-        port: 8081,
-    },
-    plugins: [
-        vue(),
-        Components({
-            // allow auto load markdown components under `./src/components/`
-            extensions: ['vue', 'md'],
-            // allow auto import and register components used in markdown
-            include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
-            resolvers: [
-                ElementPlusResolver({
-                    importStyle: 'sass',
-                }),
-            ],
-            dts: './src/components.d.ts',
+  server: {
+    port: 8081,
+  },
+  plugins: [
+    vue(),
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
+    Components({
+      // allow auto load markdown components under `./src/components/`
+      extensions: ['vue', 'md'],
+      // allow auto import and register components used in markdown
+      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
+      resolvers: [
+        ElementPlusResolver({
+          importStyle: 'sass',
         }),
-    ],
-    resolve: {
-        alias: {
-            '@': resolve(import.meta.dirname, './src'),
-        }
+      ],
+      dts: './src/components.d.ts',
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': resolve(import.meta.dirname, './src'),
     },
-    build: {
-        lib: {
-            entry: resolve(import.meta.dirname, "./src/components/index.js"),
-            name: "MapSideBar",
-            fileName: 'map-side-bar',
-        },
-        rollupOptions: {
-            external: [
-              "vue",
-              "@abi-software/map-utilities",
-              "@element-plus/icons-vue",
-              "@abi-software/map-utilities/dist/style.css"
-            ],
-            output: {
-              globals: {
-                vue: "Vue",
-                "@abi-software/map-utilities": "@abi-software/map-utilities",
-                "@element-plus/icons-vue": "@element-plus/icons-vue"
-              },
-              // keep css output name stable for the "./dist/style.css" export/import paths
-              assetFileNames: (assetInfo) =>
-                assetInfo.name?.endsWith(".css")
-                  ? "style.css"
-                  : "assets/[name][extname]",
-            },
+  },
+  build: {
+    lib: {
+      entry: resolve(import.meta.dirname, './src/components/index.js'),
+      name: 'MapSideBar',
+      fileName: 'map-side-bar',
+    },
+    rollupOptions: {
+      external: [
+        'vue',
+        '@abi-software/map-utilities',
+        '@element-plus/icons-vue',
+        '@abi-software/map-utilities/dist/style.css',
+      ],
+      output: {
+        globals: {
+          vue: 'Vue',
+          '@abi-software/map-utilities': '@abi-software/map-utilities',
+          '@element-plus/icons-vue': '@element-plus/icons-vue',
         },
+        // keep css output name stable for the "./dist/style.css" export/import paths
+        assetFileNames: (assetInfo) =>
+          assetInfo.name?.endsWith('.css') ? 'style.css' : 'assets/[name][extname]',
+      },
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+        additionalData: `@use '@/assets/styles' as *;`,
+      },
     },
-    css: {
-        preprocessorOptions: {
-            scss: {
-                api: 'modern-compiler',
-                additionalData: `@use '@/assets/styles' as *;`
-            }
-        }
-    }
-})
+  },
+});

package/vuese-generator.js

@@ -5,120 +5,112 @@
  * To watch components changes for Vitepress on Dev Mode
  */
 
-import fs from 'fs'
-import path from 'path'
-import chokidar from 'chokidar'
+import fs from 'fs';
+import path from 'path';
+import chokidar from 'chokidar';
 // import { parser } from '@vuese/parser'
-import { parseSource } from 'vue-docgen-api'
-import { Render } from '@vuese/markdown-render'
+import { parseSource } from 'vue-docgen-api';
+import { Render } from '@vuese/markdown-render';
 
-const watchMode = process.argv.find((argv) => argv === 'watch')
+const watchMode = process.argv.find((argv) => argv === 'watch');
 
-const componentsDir = 'src/components'
-const components = ['SideBar.vue']
-const outputDir = 'docs/components'
+const componentsDir = 'src/components';
+const components = ['SideBar.vue'];
+const outputDir = 'docs/components';
 
 function generateMarkdown(file) {
-  const fileWithPath = `${componentsDir}/${file}`
-  const fileContent = fs.readFileSync(fileWithPath, 'utf-8')
+  const fileWithPath = `${componentsDir}/${file}`;
+  const fileContent = fs.readFileSync(fileWithPath, 'utf-8');
 
   try {
     // const parserResult = parser(fileContent)
-    const parserResult = parseSource(fileContent, fileWithPath)
+    const parserResult = parseSource(fileContent, fileWithPath);
     parserResult.then((result) => {
-      const {
-        displayName: name,
-        description: desc,
-        props,
-        events,
-        methods
-      } = result
+      const { displayName: name, description: desc, props, events, methods } = result;
 
       // transform props to vuese styles
       const parseResult = {
         name: name,
         componentDesc: {
-          default: [desc]
+          default: [desc],
         },
         props: transformData(props),
         events: transformData(events),
         methods: transformData(methods),
-      }
-      const r = new Render(parseResult)
-      const renderResult = r.render()
-      const markdownResult = r.renderMarkdown()
-      const markdownContent = markdownResult.content
-      const componentName = path.basename(fileWithPath, '.vue')
+      };
+      const r = new Render(parseResult);
+      // const renderResult = r.render();
+      const markdownResult = r.renderMarkdown();
+      const markdownContent = markdownResult.content;
+      const componentName = path.basename(fileWithPath, '.vue');
 
       if (!fs.existsSync(outputDir)) {
-        fs.mkdirSync(outputDir)
+        fs.mkdirSync(outputDir);
       }
 
       fs.writeFile(`${outputDir}/${componentName}.md`, markdownContent, (err) => {
         if (err) {
-          console.error(`Error writing markdown file for ${componentName}`, err)
+          console.error(`Error writing markdown file for ${componentName}`, err);
         } else {
-          console.log(`Markdown file for ${componentName} is generated!`)
+          console.log(`Markdown file for ${componentName} is generated!`);
         }
-      })
-    })
-  } catch(e) {
-    console.error(e)
+      });
+    });
+  } catch (e) {
+    console.error(e);
   }
 }
 
 function transformData(data) {
   data.forEach((prop) => {
-    prop.name = prop.name
-
     if (prop.description) {
-      prop.describe = [prop.description.replaceAll('\n', ' ')]
+      prop.describe = [prop.description.replaceAll('\n', ' ')];
     }
 
     if (prop.type) {
-      prop.type = prop.type.name
+      prop.type = prop.type.name;
     }
 
     if (prop.defaultValue) {
-      prop.default = prop.defaultValue.value.replaceAll('\n', ' ')
+      prop.default = prop.defaultValue.value.replaceAll('\n', ' ');
     }
 
     // events
     if (prop.properties) {
-      prop.argumentsDesc = []
+      prop.argumentsDesc = [];
       prop.properties.forEach((param) => {
-        const argName = param.name || param.description
-        prop.argumentsDesc.push(argName)
-      })
+        const argName = param.name || param.description;
+        prop.argumentsDesc.push(argName);
+      });
     }
 
     // methods
     if (prop.params) {
-      prop.argumentsDesc = []
+      prop.argumentsDesc = [];
       prop.params.forEach((param) => {
-        const argName = param.name || param.description
-        prop.argumentsDesc.push(argName)
-      })
+        const argName = param.name || param.description;
+        prop.argumentsDesc.push(argName);
+      });
     }
-  })
-  return data
+  });
+  return data;
 }
 
 // To generate markdown files - one time
 components.forEach((component) => {
-  console.log(`Write markdown file for ${component} on first load.`)
-  generateMarkdown(component)
-})
+  console.log(`Write markdown file for ${component} on first load.`);
+  generateMarkdown(component);
+});
 
 // To watch component changes and generate markdown files
 if (watchMode) {
   const watcher = chokidar.watch(components, {
     cwd: componentsDir,
     ignoreInitial: true,
-  })
+  });
 
   watcher.on('change', (file) => {
-    console.log(`The component ${file} has changed!`)
-    generateMarkdown(file)
-  })
+    console.log(`The component ${file} has changed!`);
+    generateMarkdown(file);
+  });
 }