@abi-software/flatmapvuer 1.17.0 → 1.17.1-demo.1

package/src/components/SelectionsGroup.vue

@@ -10,13 +10,13 @@
           popper-class="popover-origin-help"
           v-if="helpMessage"
         >
-        <template v-if="helpMessage" #reference>
-          <el-icon class="info"><el-icon-warning /></el-icon>
-        </template>
-        <span style="word-break: keep-all">
-          {{ helpMessage }}
-        </span>
-      </el-popover>
+          <template v-if="helpMessage" #reference>
+            <el-icon class="info"><el-icon-warning /></el-icon>
+          </template>
+          <span style="word-break: keep-all">
+            {{ helpMessage }}
+          </span>
+        </el-popover>
       </el-col>
       <el-col :span="12">
         <el-checkbox
@@ -26,8 +26,9 @@
           v-model="checkAll"
           @change="handleCheckAllChange"
           @click="onAllCheckboxNativeChange"
-          >Display all</el-checkbox
         >
+          Display all
+        </el-checkbox>
       </el-col>
     </el-row>
     <el-checkbox-group
@@ -37,15 +38,12 @@
       @change="handleCheckedItemsChange"
     >
       <div class="checkbox-group-inner">
-        <el-row
-          v-for="item in selections"
-          :key="item[identifierKey]"
-          :label="item[identifierKey]"
-        >
-          <div class="checkbox-container"
+        <el-row v-for="item in selections" :key="item[identifierKey]" :label="item[identifierKey]">
+          <div
+            class="checkbox-container"
             @mouseenter="checkboxMouseEnterEmit(item[identifierKey], true)"
             @mouseleave="checkboxMouseEnterEmit(item[identifierKey], false)"
-            >
+          >
             <el-checkbox
               class="my-checkbox"
               :label="item[identifierKey]"
@@ -73,26 +71,11 @@
 </template>
 
 <script>
-/* eslint-disable no-alert, no-console */
-import {
-  Warning as ElIconWarning,
-} from '@element-plus/icons-vue'
-import {
-  ElCheckbox as Checkbox,
-  ElCheckboxGroup as CheckboxGroup,
-  ElIcon as Icon,
-  ElCol as Col,
-  ElRow as Row,
-} from 'element-plus'
+import { Warning as ElIconWarning } from '@element-plus/icons-vue';
 
 export default {
   name: 'SelectionsGroup',
   components: {
-    Checkbox,
-    CheckboxGroup,
-    Col,
-    Icon,
-    Row,
     ElIconWarning,
   },
   methods: {
@@ -101,15 +84,15 @@ export default {
      * Also called when the associated button is pressed.
      */
     reset: function () {
-      this.checkAll = true
-      this.checkedItems = []
+      this.checkAll = true;
+      this.checkedItems = [];
       this.selections.forEach((item) => {
         if (!('enabled' in item) || item.enabled === true) {
-          this.checkedItems.push(item[this.identifierKey])
+          this.checkedItems.push(item[this.identifierKey]);
         } else {
-          this.checkAll = false
+          this.checkAll = false;
         }
-      })
+      });
     },
     setCheckboxActionData: function (containerEl, option) {
       // option = 'individual' or 'all'
@@ -127,9 +110,9 @@ export default {
 
         this.checkboxActionData = {
           selectionsTitle: selectionsTitleEl ? selectionsTitleEl.innerText : '',
-          property: (checkboxEl && option !== 'all') ? checkboxEl.value : '',
+          property: checkboxEl && option !== 'all' ? checkboxEl.value : '',
           label: checkboxLabelEl ? checkboxLabelEl.innerText : '',
-          checked: checkedLabel
+          checked: checkedLabel,
         };
       } else {
         // reset if no checkbox container found
@@ -150,7 +133,7 @@ export default {
       this.setCheckboxActionData(checkboxContainerEl, 'all');
     },
     visibilityToggle: function (key, value) {
-      this.$emit('changed', { key, value })
+      this.$emit('changed', { key, value });
       // emit event with checkbox data for tracking
       if (key === this.checkboxActionData.property) {
         // change true/false to checked/unchecked for readability
@@ -160,21 +143,24 @@ export default {
     },
     checkboxMouseEnterEmit: function (key, value) {
       // Update the stated to send to the emit
-      this.$emit('checkboxMouseEnter', { key: key, value: value, selections: this.selections, checked: this.checkedItems})
+      this.$emit('checkboxMouseEnter', {
+        key: key,
+        value: value,
+        selections: this.selections,
+        checked: this.checkedItems,
+      });
     },
     handleCheckedItemsChange: function (value) {
-      let checkedCount = value.length
-      this.checkAll = checkedCount === this.selections.length
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.selections.length;
     },
     handleCheckAllChange: function (val) {
-      this.checkedItems = val
-        ? this.selections.map((a) => a[this.identifierKey])
-        : []
+      this.checkedItems = val ? this.selections.map((a) => a[this.identifierKey]) : [];
 
       this.$emit('checkAll', {
         keys: this.selections.map((a) => a[this.identifierKey]),
         value: val,
-      })
+      });
       // emit event with checkbox data for tracking
       this.checkboxActionData.property = this.identifierKey;
       // change true/false to checked/unchecked for readability
@@ -183,50 +169,50 @@ export default {
     },
     getBackgroundStyles: function (item) {
       if ('colour' in item && this.colourStyle === 'background') {
-        return { background: item.colour }
+        return { background: item.colour };
       }
-      return {}
+      return {};
     },
-    getState: function() {
-      let checkedCount = this.checkedItems.length
-      const checkAll = checkedCount === this.selections.length
+    getState: function () {
+      let checkedCount = this.checkedItems.length;
+      const checkAll = checkedCount === this.selections.length;
       return {
         checkAll,
-        checked: !checkAll ? this.checkedItems : []
-      }
+        checked: !checkAll ? this.checkedItems : [],
+      };
     },
-    setState: function(state) {
-      this.checkAll = state.checkAll
-      this.checkedItems.length = 0
+    setState: function (state) {
+      this.checkAll = state.checkAll;
+      this.checkedItems.length = 0;
       if (state.checked?.length) {
-        this.checkedItems.push(...state.checked)
+        this.checkedItems.push(...state.checked);
         this.selections.forEach((item) => {
-          const key = item[this.identifierKey]
-          this.$emit('changed', {key, value: this.checkedItems.includes(key)})
-        })
+          const key = item[this.identifierKey];
+          this.$emit('changed', { key, value: this.checkedItems.includes(key) });
+        });
       } else {
-        const keys = this.selections.map((a) => a[this.identifierKey])
-        let value = false
+        const keys = this.selections.map((a) => a[this.identifierKey]);
+        let value = false;
         if (this.checkAll) {
-          value = true
-          this.checkedItems.push(...keys)
+          value = true;
+          this.checkedItems.push(...keys);
         }
-        this.$emit('checkAll', { keys, value })
+        this.$emit('checkAll', { keys, value });
       }
     },
-    hasLineStyles: function(item) {
-      return 'colour' in item && this.colourStyle === 'line'
+    hasLineStyles: function (item) {
+      return 'colour' in item && this.colourStyle === 'line';
     },
     getLineStyles: function (item) {
       if ('colour' in item && this.colourStyle === 'line') {
         if ('dashed' in item && item.dashed === true) {
-          const background = `repeating-linear-gradient(90deg,${item.colour},${item.colour} 6px,transparent 0,transparent 9px)`
-          return { background }
+          const background = `repeating-linear-gradient(90deg,${item.colour},${item.colour} 6px,transparent 0,transparent 9px)`;
+          return { background };
         } else {
-          return { background: item.colour }
+          return { background: item.colour };
         }
       }
-      return { display: 'None' }
+      return { display: 'None' };
     },
   },
   props: {
@@ -253,7 +239,7 @@ export default {
     selections: {
       type: Array,
       default: function () {
-        return []
+        return [];
       },
     },
     showAsLegend: {
@@ -263,11 +249,11 @@ export default {
   },
   computed: {
     isIndeterminate: function () {
-      const count = this.checkedItems.length
+      const count = this.checkedItems.length;
       if (count === 0 || this.checkAll) {
-        return false
+        return false;
       }
-      return true
+      return true;
     },
   },
   data: function () {
@@ -280,16 +266,15 @@ export default {
         label: '',
         checked: '',
       },
-    }
+    };
   },
   mounted: function () {
-    this.reset()
+    this.reset();
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
-
 .path-visual {
   margin: 3px 0;
   height: 3px;
@@ -314,7 +299,7 @@ export default {
 }
 
 .all-checkbox {
-  height:20px;
+  height: 20px;
   float: right;
 }
 
@@ -361,7 +346,7 @@ export default {
 }
 
 :deep(.el-row) {
-  height:20px;
+  height: 20px;
   margin-bottom: 0;
 }
 
@@ -376,7 +361,6 @@ export default {
   margin-left: 8px;
 }
 
-
 :deep(.popover-origin-help.el-popover) {
   text-transform: none !important; // need to overide the tooltip text transform
   border: 1px solid $app-primary-color;

package/src/components/index.js

@@ -1,7 +1,7 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import FlatmapVuer from "./FlatmapVuer.vue";
-import MultiFlatmapVuer from "./MultiFlatmapVuer.vue";
+import FlatmapVuer from './FlatmapVuer.vue';
+import MultiFlatmapVuer from './MultiFlatmapVuer.vue';
 import '../assets/fonts.scss';
 
 export { FlatmapVuer, MultiFlatmapVuer };

package/src/components/legends/DynamicLegends.vue

@@ -19,11 +19,7 @@
           ref="featuredMarkerPopover"
         >
           <template #reference>
-            <div
-              v-popover:featuredMarkerPopover
-              @mouseover="onMouseOver"
-              @mouseout="onMouseOut"
-            >
+            <div v-popover:featuredMarkerPopover @mouseover="onMouseOver" @mouseout="onMouseOut">
               <LegendItem
                 :item="item"
                 :identifierKey="identifierKey"
@@ -49,24 +45,23 @@
 <script>
 import LegendItem from './LegendItem.vue';
 
-/* eslint-disable no-alert, no-console */
 export default {
-  name: "DynamicLegends",
+  name: 'DynamicLegends',
   components: {
     LegendItem,
   },
   props: {
     identifierKey: {
       type: String,
-      default: "id",
+      default: 'id',
     },
     styleKey: {
       type: String,
-      default: "style",
+      default: 'style',
     },
     title: {
       type: String,
-      default: "",
+      default: '',
     },
     legends: {
       type: Array,

package/src/components/legends/LegendItem.vue

@@ -1,34 +1,23 @@
 <template>
   <div class="legend-item" v-if="legendStyleValue">
     <template v-if="clipPathLegends.includes(legendStyleValue)">
-      <div
-        :class="legendStyleValue"
-        :style="customClipPathStyle(true)"
-      >
-        <div
-          :class="legendStyleValue"
-          :style="customClipPathStyle(false)"
-        >
-        </div>
+      <div :class="legendStyleValue" :style="customClipPathStyle(true)">
+        <div :class="legendStyleValue" :style="customClipPathStyle(false)"></div>
       </div>
     </template>
     <template v-else>
-      <div
-        :class="legendStyleValue"
-        :style="customStyle"
-      >
-      </div>
+      <div :class="legendStyleValue" :style="customStyle"></div>
     </template>
     <div class="label">{{ capitalise(item[identifierKey]) }}</div>
   </div>
 </template>
 
 <script>
-const starTemplate = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="<fillColor>" stroke="<borderColor>" stroke-width="<borderWidth>" d="M11.0748 3.25583C11.4141 2.42845 12.5859 2.42845 12.9252 3.25583L14.6493 7.45955C14.793 7.80979 15.1221 8.04889 15.4995 8.07727L20.0303 8.41798C20.922 8.48504 21.2841 9.59942 20.6021 10.1778L17.1369 13.1166C16.8482 13.3614 16.7225 13.7483 16.8122 14.1161L17.8882 18.5304C18.1 19.3992 17.152 20.0879 16.3912 19.618L12.5255 17.2305C12.2034 17.0316 11.7966 17.0316 11.4745 17.2305L7.60881 19.618C6.84796 20.0879 5.90001 19.3992 6.1118 18.5304L7.18785 14.1161C7.2775 13.7483 7.1518 13.3614 6.86309 13.1166L3.3979 10.1778C2.71588 9.59942 3.07796 8.48504 3.96971 8.41798L8.50046 8.07727C8.87794 8.04889 9.20704 7.80979 9.35068 7.45955L11.0748 3.25583Z"/></svg>'
+const starTemplate =
+  '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="<fillColor>" stroke="<borderColor>" stroke-width="<borderWidth>" d="M11.0748 3.25583C11.4141 2.42845 12.5859 2.42845 12.9252 3.25583L14.6493 7.45955C14.793 7.80979 15.1221 8.04889 15.4995 8.07727L20.0303 8.41798C20.922 8.48504 21.2841 9.59942 20.6021 10.1778L17.1369 13.1166C16.8482 13.3614 16.7225 13.7483 16.8122 14.1161L17.8882 18.5304C18.1 19.3992 17.152 20.0879 16.3912 19.618L12.5255 17.2305C12.2034 17.0316 11.7966 17.0316 11.4745 17.2305L7.60881 19.618C6.84796 20.0879 5.90001 19.3992 6.1118 18.5304L7.18785 14.1161C7.2775 13.7483 7.1518 13.3614 6.86309 13.1166L3.3979 10.1778C2.71588 9.59942 3.07796 8.48504 3.96971 8.41798L8.50046 8.07727C8.87794 8.04889 9.20704 7.80979 9.35068 7.45955L11.0748 3.25583Z"/></svg>';
 
-/* eslint-disable no-alert, no-console */
 export default {
-  name: "LegendItem",
+  name: 'LegendItem',
   props: {
     item: {
       type: Object,
@@ -36,11 +25,11 @@ export default {
     },
     identifierKey: {
       type: String,
-      default: "id",
+      default: 'id',
     },
     styleKey: {
       type: String,
-      default: "style",
+      default: 'style',
     },
     showStarInLegend: {
       type: Boolean,
@@ -52,8 +41,8 @@ export default {
       return ['exoid', 'hexagon'];
     },
     legendStyleValue: function () {
-      if (this.item[this.styleKey] === "star") {
-        if (this.item[this.identifierKey] === "Featured dataset marker") {
+      if (this.item[this.styleKey] === 'star') {
+        if (this.item[this.identifierKey] === 'Featured dataset marker') {
           if (!this.showStarInLegend) {
             return;
           }
@@ -62,15 +51,19 @@ export default {
       } else if (this.clipPathLegends.includes(this.item[this.styleKey])) {
         return this.item[this.styleKey];
       } else if (this.item[this.styleKey] === 'line') {
-        return [this.item[this.styleKey], this.item.dashed ? 'dashed' : '', this.item.arrow ? 'arrow' : ''];
+        return [
+          this.item[this.styleKey],
+          this.item.dashed ? 'dashed' : '',
+          this.item.arrow ? 'arrow' : '',
+        ];
       }
       return [this.item[this.styleKey], 'shape'];
     },
-    customStyle: function() {
-      const specifiedColour = this.item["color"] ? this.item["color"] : this.item["colour"];
-      let colour = specifiedColour ? specifiedColour : "transparent";
-      let borderColour = this.item.border ? this.item.border : "black";
-      let borderStyle = this.item.borderStyle ? this.item.borderStyle : "default";
+    customStyle: function () {
+      const specifiedColour = this.item['color'] ? this.item['color'] : this.item['colour'];
+      let colour = specifiedColour ? specifiedColour : 'transparent';
+      let borderColour = this.item.border ? this.item.border : 'black';
+      let borderStyle = this.item.borderStyle ? this.item.borderStyle : 'default';
       if (specifiedColour && !this.item.border) {
         borderColour = colour;
       }
@@ -79,11 +72,15 @@ export default {
         star = star.replace('<borderColor>', borderColour);
         star = star.replace('<borderWidth>', borderColour ? '2' : '0');
         star = 'data:image/svg+xml,' + encodeURIComponent(star);
-        return { 'color': colour, 'background-image': `url(${star})` };
+        return { color: colour, 'background-image': `url(${star})` };
       } else if (this.item[this.styleKey] === 'line') {
-        return {'color': colour};
+        return { color: colour };
       } else {
-        return { 'background-color': colour, 'border-color': borderColour, 'border-style': borderStyle};
+        return {
+          'background-color': colour,
+          'border-color': borderColour,
+          'border-style': borderStyle,
+        };
       }
     },
   },
@@ -91,8 +88,8 @@ export default {
     capitalise: function (label) {
       return label.charAt(0).toUpperCase() + label.slice(1).toLowerCase();
     },
-    customClipPathStyle: function(isBorder) {
-      const style = {...this.customStyle};
+    customClipPathStyle: function (isBorder) {
+      const style = { ...this.customStyle };
       if (isBorder) {
         style['background-color'] = style['border-color'];
       } else {
@@ -122,7 +119,7 @@ export default {
 }
 
 .line::after {
-  content: "";
+  content: '';
   position: absolute;
   right: -2px;
   top: -5px;
@@ -169,10 +166,10 @@ export default {
   height: 25px;
   background-color: transparent;
   clip-path: path(
-    "M9.96 0.72 c-2.01 3.53 -5.81 5.74 -9.92 5.74 l-0.15 0.23 c1.94 3.42 1.94 7.6 0 11.02 l0.15 0.23 c4.07 0 7.9 2.2 9.92 5.74 c2.01 -3.53 5.81 -5.74 9.92 -5.74 c-2.01 -3.53 -2.01 -7.94 0 -11.55 C15.81 6.5 12.04 4.29 9.96 0.72z"
+    'M9.96 0.72 c-2.01 3.53 -5.81 5.74 -9.92 5.74 l-0.15 0.23 c1.94 3.42 1.94 7.6 0 11.02 l0.15 0.23 c4.07 0 7.9 2.2 9.92 5.74 c2.01 -3.53 5.81 -5.74 9.92 -5.74 c-2.01 -3.53 -2.01 -7.94 0 -11.55 C15.81 6.5 12.04 4.29 9.96 0.72z'
   );
   -webkit-clip-path: path(
-    "M9.96 0.72 c-2.01 3.53 -5.81 5.74 -9.92 5.74 l-0.15 0.23 c1.94 3.42 1.94 7.6 0 11.02 l0.15 0.23 c4.07 0 7.9 2.2 9.92 5.74 c2.01 -3.53 5.81 -5.74 9.92 -5.74 c-2.01 -3.53 -2.01 -7.94 0 -11.55 C15.81 6.5 12.04 4.29 9.96 0.72z"
+    'M9.96 0.72 c-2.01 3.53 -5.81 5.74 -9.92 5.74 l-0.15 0.23 c1.94 3.42 1.94 7.6 0 11.02 l0.15 0.23 c4.07 0 7.9 2.2 9.92 5.74 c2.01 -3.53 5.81 -5.74 9.92 -5.74 c-2.01 -3.53 -2.01 -7.94 0 -11.55 C15.81 6.5 12.04 4.29 9.96 0.72z'
   );
 }
 

package/src/components/legends/SvgLegends.vue

@@ -69,7 +69,7 @@
 <script>
 export default {
   name: 'SvgLegends',
-}
+};
 </script>
 
 <style lang="scss" scoped>

package/src/components/utilities.js

@@ -1,6 +1,5 @@
-const capitalise = term => {
-  if (term)
-    return term.charAt(0).toUpperCase() + term.slice(1);
+const capitalise = (term) => {
+  if (term) return term.charAt(0).toUpperCase() + term.slice(1);
   return term;
 };
 
@@ -38,7 +37,4 @@ const normaliseAlertToStringArray = (value) => {
   return [];
 };
 
-export {
-  capitalise,
-  normaliseAlertToStringArray,
-};
+export { capitalise, normaliseAlertToStringArray };

package/src/components.d.ts

@@ -28,6 +28,7 @@ declare module 'vue' {
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
     FlatmapError: typeof import('./components/FlatmapError.vue')['default']
     FlatmapVuer: typeof import('./components/FlatmapVuer.vue')['default']
     LegendItem: typeof import('./components/legends/LegendItem.vue')['default']

package/src/icons/flatmap-marker.js

@@ -6,4 +6,4 @@ export default `<div class="flatmap-marker">
     <circle cx="12.5" cy="12.5" r="9" fill="#fff"></circle>
     <text x="12" y="17.5" style="font-size:14px;fill:#000;text-anchor:middle">2</text>
   </svg>
-</div>`
+</div>`;

package/src/icons/mapicon-species-style.css

@@ -1,7 +1,8 @@
 @font-face {
   font-family: 'mapicon-species';
-  src:  url('fonts/mapicon-species.eot?h40clo');
-  src:  url('fonts/mapicon-species.eot?h40clo#iefix') format('embedded-opentype'),
+  src: url('fonts/mapicon-species.eot?h40clo');
+  src:
+    url('fonts/mapicon-species.eot?h40clo#iefix') format('embedded-opentype'),
     url('fonts/mapicon-species.ttf?h40clo') format('truetype'),
     url('fonts/mapicon-species.woff?h40clo') format('woff'),
     url('fonts/mapicon-species.svg?h40clo#mapicon-species') format('svg');
@@ -10,7 +11,8 @@
   font-display: block;
 }
 
-[class^="mapicon-icon"], [class*=" mapicon-icon"] {
+[class^='mapicon-icon'],
+[class*=' mapicon-icon'] {
   /* use !important to prevent issues with browser extensions that change fonts */
   font-family: 'mapicon-species' !important;
   speak: never;
@@ -26,17 +28,17 @@
 }
 
 .mapicon-icon_cat:before {
-  content: "\e904";
+  content: '\e904';
 }
 .mapicon-icon_rat:before {
-  content: "\e900";
+  content: '\e900';
 }
 .mapicon-icon_pig:before {
-  content: "\e901";
+  content: '\e901';
 }
 .mapicon-icon_mouse:before {
-  content: "\e902";
+  content: '\e902';
 }
 .mapicon-icon_human:before {
-  content: "\e903";
+  content: '\e903';
 }

package/src/icons/yellowstar.js

@@ -2,4 +2,4 @@ export default '<svg width="195px" height="24px" viewBox="0 0 200 24" fill="yell
   '<path d="M22.0748 3.25583C22.4141 2.42845 23.5859 2.42845 23.9252 3.25583L25.6493 7.45955C25.793 7.80979 26.1221 8.04889 26.4995 8.07727L31.0303 8.41798C31.922 8.48504 32.2841 9.59942 31.6021 10.1778L28.1369 13.1166C27.8482 13.3614 27.7225 13.7483 27.8122 14.1161L28.8882 18.5304C29.1 19.3992 28.152 20.0879 27.3912 19.618L23.5255 17.2305C23.2034 17.0316 22.7966 17.0316 22.4745 17.2305L18.60881 19.618C17.84796 20.0879 16.9 19.3992 17.1118 18.5304L18.18785 14.1161C18.2775 13.7483 18.1518 13.3614 17.86309 13.1166L14.3979 10.1778C13.71588 9.59942 14.07796 8.48504 14.96971 8.41798L19.50046 8.07727C19.87794 8.04889 20.20704 7.80979 20.35068 7.45955L22.0748 3.25583Z" stroke="#000000" stroke-width="2"/>' +
   // Adjusting the x attribute and adding padding for the text element
   '<text x="47" y="52%" style="white-space: pre" dominant-baseline="middle" text-anchor="start" font-family="Asap, sans-serif" font-size="12" fill="#333333">Featured dataset marker</text>' +
-  '</svg>'
+  '</svg>';

package/src/main.js

@@ -1,20 +1,18 @@
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-import App from './App.vue'
-import { useMainStore } from '@/store/index'
-import './assets/fonts.scss'
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import App from './App.vue';
+import { useMainStore } from '@/store/index';
+import './assets/fonts.scss';
 
-const pinia = createPinia()
-const app = createApp(App)
+const pinia = createPinia();
+const app = createApp(App);
 
-app.use(pinia)
+app.use(pinia);
 
-const mainStore = useMainStore()
-const token = document.cookie
-    .split("; ")
-    .find((row) => row.startsWith("user-token"))
+const mainStore = useMainStore();
+const token = document.cookie.split('; ').find((row) => row.startsWith('user-token'));
 if (mainStore && token) {
-    mainStore.setUserToken(token.split("=")[1])
+  mainStore.setUserToken(token.split('=')[1]);
 }
 
-app.mount('#app')
+app.mount('#app');