@mixd-id/web-scaffold 0.1.230406329 → 0.1.230406331

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406329",
+  "version": "0.1.230406331",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/GmapsDirection.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="flex">
+    <div v-if="config.apiKey" ref="map" class="flex-1"></div>
+    <div v-else class="flex-1 flex items-center justify-center text-text-400">{{  error }}</div>
+  </div>
+</template>
+
+<script>
+
+import { Loader } from '@googlemaps/js-api-loader';
+
+export default{
+
+  props: {
+    value: Array,
+
+    config: {
+      type: Object,
+      default: {}
+    },
+  },
+
+  data(){
+    return {
+      error: this.$t('Google maps api required'),
+      map: null
+    }
+  },
+
+  mounted() {
+    this.load()
+  },
+
+  methods: {
+
+    load(){
+      if(!this.config.apiKey) return
+      if(!this.value) return this.error = 'No value'
+
+      const loader = new Loader({
+        apiKey: this.config.apiKey // "AIzaSyBmzMlmrR5St-njtN--64y_oLTa9FDLYfQ"
+      })
+
+      loader.load()
+          .then(async () => {
+
+            loader.load().then(() => {
+              if(!Array.isArray(this.value) || this.value.length < 1) return
+
+              const map = new google.maps.Map(this.$refs.map, {
+                center: this.value[0], // Example: San Francisco
+                zoom: 12,
+                mapTypeId: 'roadmap',
+                streetViewControl: false,
+                keyboardShortcuts: false,
+                styles: [
+                  { elementType: "geometry", stylers: [{ color: "#242f3e" }] },
+                  { elementType: "labels.text.stroke", stylers: [{ color: "#242f3e" }] },
+                  { elementType: "labels.text.fill", stylers: [{ color: "#746855" }] },
+                  {
+                    featureType: "administrative.locality",
+                    elementType: "labels.text.fill",
+                    stylers: [{ color: "#d59563" }],
+                  },
+                  {
+                    featureType: "poi",
+                    elementType: "labels.text.fill",
+                    stylers: [{ color: "#d59563" }],
+                  },
+                  {
+                    featureType: "poi.park",
+                    elementType: "geometry",
+                    stylers: [{ color: "#263c3f" }],
+                  },
+                  {
+                    featureType: "poi.park",
+                    elementType: "labels.text.fill",
+                    stylers: [{ color: "#6b9a76" }],
+                  },
+                  {
+                    featureType: "road",
+                    elementType: "geometry",
+                    stylers: [{ color: "#38414e" }],
+                  },
+                  {
+                    featureType: "road",
+                    elementType: "geometry.stroke",
+                    stylers: [{ color: "#212a37" }],
+                  },
+                  {
+                    featureType: "road",
+                    elementType: "labels.text.fill",
+                    stylers: [{ color: "#9ca5b3" }],
+                  },
+                  {
+                    featureType: "road.highway",
+                    elementType: "geometry",
+                    stylers: [{ color: "#746855" }],
+                  },
+                  {
+                    featureType: "road.highway",
+                    elementType: "geometry.stroke",
+                    stylers: [{ color: "#1f2835" }],
+                  },
+                  {
+                    featureType: "road.highway",
+                    elementType: "labels.text.fill",
+                    stylers: [{ color: "#f3d19c" }],
+                  },
+                  {
+                    featureType: "transit",
+                    elementType: "geometry",
+                    stylers: [{ color: "#2f3948" }],
+                  },
+                  {
+                    featureType: "transit.station",
+                    elementType: "labels.text.fill",
+                    stylers: [{ color: "#d59563" }],
+                  },
+                  {
+                    featureType: "water",
+                    elementType: "geometry",
+                    stylers: [{ color: "#17263c" }],
+                  },
+                  {
+                    featureType: "water",
+                    elementType: "labels.text.fill",
+                    stylers: [{ color: "#515c6d" }],
+                  },
+                  {
+                    featureType: "water",
+                    elementType: "labels.text.stroke",
+                    stylers: [{ color: "#17263c" }],
+                  },
+                ]
+              });
+
+              const root = document.documentElement;
+              const primaryColor600 = getComputedStyle(root).getPropertyValue('--primary-600').trim()
+              const primaryColor300 = getComputedStyle(root).getPropertyValue('--primary-300').trim()
+
+              const line = new google.maps.Polyline({
+                path: this.value,
+                geodesic: true,
+                strokeColor: `rgb(${primaryColor600})`,
+                strokeOpacity: .8,
+                strokeWeight: 6,
+              });
+              line.setMap(map);
+
+              for(let i = this.value.length - 1 ; i >= 0 ; i--){
+                const point = this.value[i]
+
+                new google.maps.Circle({
+                  strokeColor: `rgb(${primaryColor600})`,
+                  strokeOpacity: 0.8,
+                  strokeWeight: 2,
+                  fillColor: i === 0 ? '#FFF' : `rgb(${primaryColor300})`,
+                  fillOpacity: .8,
+                  map,
+                  center: point,
+                  radius: 10, // Radius in meters (adjust as needed)
+                });
+              }
+
+            }).catch(e => {
+              this.error = 'Error loading Google Maps JavaScript API'
+            });
+          });
+    }
+
+  },
+
+  watch: {
+
+    data(){
+      this.load()
+    }
+
+  }
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/components/List.vue

@@ -383,6 +383,9 @@ export default{
           return this.socket.send('user.preset', { key:this.presetKey })
               .then(config => {
                 Object.assign(this.config, config)
+
+                if(this.$route.query?.search)
+                  this.preset.search = this.$route.query.search
               })
         }
         return new Promise(resolve => resolve())
@@ -669,7 +672,7 @@ export default{
         let [ kk, ...vv ] = column.key.split('-')
         vv = vv.join('-')
 
-        if(![ 'count', 'countDistinct' ].includes(vv)){
+        if(![ 'count', 'countDistinct', 'sum' ].includes(vv)){
 
           const key = kk.substring(1)
           const presetColumn = this.preset.columns.find(_ => _.key === key)
@@ -696,6 +699,17 @@ export default{
             }]
           })
         }
+        else if([ 'sum' ].includes(vv)){
+          const key = kk.substring(1)
+
+          filters.push({
+            key,
+            value: [{
+              operator: '>',
+              value: 0
+            }]
+          })
+        }
 
         this.extBar.open = true
         this.extBar.filters = filters

package/src/components/Tabs.vue

@@ -2,7 +2,7 @@
 	<div :class="computedClass">
 		<button v-for="(item, index) in filteredItems" :class="tabClass(item)"
             class="whitespace-nowrap"
-			@click="onClick(item)" type="button" >
+			@click="item.disabled !== true ? onClick(item) : ''" type="button" >
 			<slot name="default" :="{ item, index }">
         <label class="px-1">
           {{ item.text }}

package/src/index.js

@@ -591,6 +591,7 @@ export default{
     app.component('Chart', defineAsyncComponent(() => import("./components/Chart.vue")))
     app.component('DGrid', defineAsyncComponent(() => import("./components/DGrid.vue")))
     app.component('DGridItem', defineAsyncComponent(() => import("./components/DGridItem.vue")))
+    app.component('GmapsDirection', defineAsyncComponent(() => import("./components/GmapsDirection.vue")))
 
     app.component('AhrefSetting', defineAsyncComponent(() => import("./widgets/AhrefSetting.vue")))
     app.component('ArticleSetting', defineAsyncComponent(() => import("./widgets/ArticleSetting.vue")))