@mixd-id/web-scaffold 0.1.230406330 → 0.1.230406332
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="flex">
|
|
3
|
+
<div v-if="config.apiKey" ref="map" class="flex-1"></div>
|
|
4
|
+
<div v-else class="flex-1 flex items-center justify-center text-text-400">{{ error }}</div>
|
|
5
|
+
</div>
|
|
6
|
+
</template>
|
|
7
|
+
|
|
8
|
+
<script>
|
|
9
|
+
|
|
10
|
+
import { Loader } from '@googlemaps/js-api-loader';
|
|
11
|
+
|
|
12
|
+
export default{
|
|
13
|
+
|
|
14
|
+
props: {
|
|
15
|
+
value: Array,
|
|
16
|
+
|
|
17
|
+
config: {
|
|
18
|
+
type: Object,
|
|
19
|
+
default: {}
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
|
|
23
|
+
data(){
|
|
24
|
+
return {
|
|
25
|
+
error: this.$t('Google maps api required'),
|
|
26
|
+
map: null
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
|
|
30
|
+
mounted() {
|
|
31
|
+
this.load()
|
|
32
|
+
},
|
|
33
|
+
|
|
34
|
+
methods: {
|
|
35
|
+
|
|
36
|
+
load(){
|
|
37
|
+
if(!this.config.apiKey) return
|
|
38
|
+
if(!this.value) return this.error = 'No value'
|
|
39
|
+
|
|
40
|
+
const loader = new Loader({
|
|
41
|
+
apiKey: this.config.apiKey // "AIzaSyBmzMlmrR5St-njtN--64y_oLTa9FDLYfQ"
|
|
42
|
+
})
|
|
43
|
+
|
|
44
|
+
loader.load()
|
|
45
|
+
.then(async () => {
|
|
46
|
+
|
|
47
|
+
loader.load().then(() => {
|
|
48
|
+
if(!Array.isArray(this.value) || this.value.length < 1) return
|
|
49
|
+
|
|
50
|
+
const map = new google.maps.Map(this.$refs.map, {
|
|
51
|
+
center: this.value[0], // Example: San Francisco
|
|
52
|
+
zoom: 12,
|
|
53
|
+
mapTypeId: 'roadmap',
|
|
54
|
+
streetViewControl: false,
|
|
55
|
+
keyboardShortcuts: false,
|
|
56
|
+
styles: [
|
|
57
|
+
{ elementType: "geometry", stylers: [{ color: "#242f3e" }] },
|
|
58
|
+
{ elementType: "labels.text.stroke", stylers: [{ color: "#242f3e" }] },
|
|
59
|
+
{ elementType: "labels.text.fill", stylers: [{ color: "#746855" }] },
|
|
60
|
+
{
|
|
61
|
+
featureType: "administrative.locality",
|
|
62
|
+
elementType: "labels.text.fill",
|
|
63
|
+
stylers: [{ color: "#d59563" }],
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
featureType: "poi",
|
|
67
|
+
elementType: "labels.text.fill",
|
|
68
|
+
stylers: [{ color: "#d59563" }],
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
featureType: "poi.park",
|
|
72
|
+
elementType: "geometry",
|
|
73
|
+
stylers: [{ color: "#263c3f" }],
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
featureType: "poi.park",
|
|
77
|
+
elementType: "labels.text.fill",
|
|
78
|
+
stylers: [{ color: "#6b9a76" }],
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
featureType: "road",
|
|
82
|
+
elementType: "geometry",
|
|
83
|
+
stylers: [{ color: "#38414e" }],
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
featureType: "road",
|
|
87
|
+
elementType: "geometry.stroke",
|
|
88
|
+
stylers: [{ color: "#212a37" }],
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
featureType: "road",
|
|
92
|
+
elementType: "labels.text.fill",
|
|
93
|
+
stylers: [{ color: "#9ca5b3" }],
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
featureType: "road.highway",
|
|
97
|
+
elementType: "geometry",
|
|
98
|
+
stylers: [{ color: "#746855" }],
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
featureType: "road.highway",
|
|
102
|
+
elementType: "geometry.stroke",
|
|
103
|
+
stylers: [{ color: "#1f2835" }],
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
featureType: "road.highway",
|
|
107
|
+
elementType: "labels.text.fill",
|
|
108
|
+
stylers: [{ color: "#f3d19c" }],
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
featureType: "transit",
|
|
112
|
+
elementType: "geometry",
|
|
113
|
+
stylers: [{ color: "#2f3948" }],
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
featureType: "transit.station",
|
|
117
|
+
elementType: "labels.text.fill",
|
|
118
|
+
stylers: [{ color: "#d59563" }],
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
featureType: "water",
|
|
122
|
+
elementType: "geometry",
|
|
123
|
+
stylers: [{ color: "#17263c" }],
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
featureType: "water",
|
|
127
|
+
elementType: "labels.text.fill",
|
|
128
|
+
stylers: [{ color: "#515c6d" }],
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
featureType: "water",
|
|
132
|
+
elementType: "labels.text.stroke",
|
|
133
|
+
stylers: [{ color: "#17263c" }],
|
|
134
|
+
},
|
|
135
|
+
]
|
|
136
|
+
});
|
|
137
|
+
|
|
138
|
+
const root = document.documentElement;
|
|
139
|
+
const primaryColor600 = getComputedStyle(root).getPropertyValue('--primary-600').trim()
|
|
140
|
+
const primaryColor300 = getComputedStyle(root).getPropertyValue('--primary-300').trim()
|
|
141
|
+
|
|
142
|
+
const line = new google.maps.Polyline({
|
|
143
|
+
path: this.value,
|
|
144
|
+
geodesic: true,
|
|
145
|
+
strokeColor: `rgb(${primaryColor600})`,
|
|
146
|
+
strokeOpacity: .8,
|
|
147
|
+
strokeWeight: 6,
|
|
148
|
+
});
|
|
149
|
+
line.setMap(map);
|
|
150
|
+
|
|
151
|
+
for(let i = this.value.length - 1 ; i >= 0 ; i--){
|
|
152
|
+
const point = this.value[i]
|
|
153
|
+
|
|
154
|
+
new google.maps.Circle({
|
|
155
|
+
strokeColor: `rgb(${primaryColor600})`,
|
|
156
|
+
strokeOpacity: 0.8,
|
|
157
|
+
strokeWeight: 2,
|
|
158
|
+
fillColor: i === 0 ? '#FFF' : `rgb(${primaryColor300})`,
|
|
159
|
+
fillOpacity: .8,
|
|
160
|
+
map,
|
|
161
|
+
center: point,
|
|
162
|
+
radius: 10, // Radius in meters (adjust as needed)
|
|
163
|
+
});
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
}).catch(e => {
|
|
167
|
+
this.error = 'Error loading Google Maps JavaScript API'
|
|
168
|
+
});
|
|
169
|
+
});
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
},
|
|
173
|
+
|
|
174
|
+
watch: {
|
|
175
|
+
|
|
176
|
+
data(){
|
|
177
|
+
this.load()
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
</script>
|
|
184
|
+
|
|
185
|
+
<style module>
|
|
186
|
+
|
|
187
|
+
.comp{
|
|
188
|
+
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
</style>
|
package/src/components/List.vue
CHANGED
|
@@ -120,57 +120,77 @@
|
|
|
120
120
|
</div>
|
|
121
121
|
</slot>
|
|
122
122
|
|
|
123
|
-
<div
|
|
124
|
-
<
|
|
125
|
-
|
|
123
|
+
<div class="flex-1 flex" ref="content">
|
|
124
|
+
<div v-if="readyState === 2" class="flex-1 flex items-center justify-center">
|
|
125
|
+
<svg class="animate-spin" width="36" height="36" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
|
|
126
|
+
</div>
|
|
126
127
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
128
|
+
<div v-else-if="presetView === 'table' || pivotEnabled" class="flex-1 flex" :class="pivotEnabled ? 'p-3 panel-400 md:p-0' : ''">
|
|
129
|
+
<VirtualTable
|
|
130
|
+
ref="table"
|
|
131
|
+
:columns="columns"
|
|
132
|
+
class="flex-1 rounded-lg panel-400"
|
|
133
|
+
:items="data.items"
|
|
134
|
+
:enumCache="enumCache"
|
|
135
|
+
@scroll-end="loadNext"
|
|
136
|
+
@item-click="onTableItemClick">
|
|
137
|
+
|
|
138
|
+
<template v-for="(_, slot) in headerSlots" #[slot]="{ item, index }">
|
|
139
|
+
<div :class="getHeader(slot.replace('col-', ''))">
|
|
140
|
+
<slot :name="slot" :item="item" :index="index"></slot>
|
|
141
|
+
</div>
|
|
142
|
+
</template>
|
|
142
143
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
144
|
+
<template v-for="(_, slot) in contentSlots" #[slot]="{ item, index }">
|
|
145
|
+
<slot :name="slot" :item="item" :index="index"></slot>
|
|
146
|
+
</template>
|
|
147
|
+
|
|
148
|
+
<template #end>
|
|
149
|
+
<div v-if="data?.hasNext" class="flex justify-center p-3">
|
|
150
|
+
<svg v-if="readyState === 4" class="animate-spin aspect-square w-[14px] h-[14px] fill-text-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
|
|
151
|
+
<button v-else type="button" class="text-text-300" @click="loadNext()">
|
|
152
|
+
{{ $t('Load More' )}}
|
|
153
|
+
</button>
|
|
154
|
+
</div>
|
|
155
|
+
</template>
|
|
146
156
|
|
|
147
|
-
|
|
148
|
-
|
|
157
|
+
</VirtualTable>
|
|
158
|
+
</div>
|
|
149
159
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
160
|
+
<VirtualGrid v-else-if="presetView === 'grid'"
|
|
161
|
+
ref="grid"
|
|
162
|
+
:items="dataItems"
|
|
163
|
+
:column="computedGridColumn"
|
|
164
|
+
:class="gridClass"
|
|
165
|
+
@scroll-end="loadNext"
|
|
166
|
+
:container-class="`${gridContainerClass}`"
|
|
167
|
+
:config="config">
|
|
168
|
+
<template #item="{ item }">
|
|
169
|
+
<slot name="gridItem" :item="item" :enumCache="enumCache" :getEnumText="getEnumText">
|
|
170
|
+
<div class="flex flex-row panel-400 rounded-lg overflow-hidden md:rounded-lg overflow-hidden p-3 gap-3">
|
|
171
|
+
<div>
|
|
172
|
+
<Image :src="item.imageUrl" class="bg-text-50 w-[64px] h-[64px] rounded-lg" />
|
|
173
|
+
</div>
|
|
174
|
+
<div class="flex-1 flex flex-col leading-tight">
|
|
175
|
+
<small>{{ item.code }}</small>
|
|
176
|
+
<strong>{{ item.name }}</strong>
|
|
177
|
+
</div>
|
|
167
178
|
</div>
|
|
179
|
+
</slot>
|
|
180
|
+
</template>
|
|
181
|
+
|
|
182
|
+
<template #end>
|
|
183
|
+
<div v-if="data?.hasNext" class="flex justify-center p-3">
|
|
184
|
+
<svg v-if="readyState === 4" class="animate-spin aspect-square w-[14px] h-[14px] fill-text-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
|
|
185
|
+
<button v-else type="button" class="text-text-300" @click="loadNext()">
|
|
186
|
+
{{ $t('Load More' )}}
|
|
187
|
+
</button>
|
|
168
188
|
</div>
|
|
169
|
-
</
|
|
170
|
-
</
|
|
171
|
-
</VirtualGrid>
|
|
189
|
+
</template>
|
|
190
|
+
</VirtualGrid>
|
|
172
191
|
|
|
173
|
-
|
|
192
|
+
<PresetSelector ref="presetSelector" :config="config" @select="load" />
|
|
193
|
+
</div>
|
|
174
194
|
</div>
|
|
175
195
|
|
|
176
196
|
<div v-if="extBar.open && pivotEnabled"
|
|
@@ -300,6 +320,14 @@ export default{
|
|
|
300
320
|
|
|
301
321
|
methods: {
|
|
302
322
|
|
|
323
|
+
calcItemsPerPage(){
|
|
324
|
+
|
|
325
|
+
if(this.$refs.content){
|
|
326
|
+
this.data.itemsPerPage = Math.round((this.$refs.content.clientHeight - 36) / 36) + 3
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
},
|
|
330
|
+
|
|
303
331
|
getEnumText(key, value){
|
|
304
332
|
|
|
305
333
|
let enumText
|
|
@@ -361,6 +389,7 @@ export default{
|
|
|
361
389
|
|
|
362
390
|
//console.log('last id', this.dataItems[this.dataItems.length - 1].id)
|
|
363
391
|
|
|
392
|
+
this.readyState = 4
|
|
364
393
|
this.socket.send(this.src, {
|
|
365
394
|
...this.preset,
|
|
366
395
|
itemsPerPage: this.data.itemsPerPage,
|
|
@@ -373,6 +402,7 @@ export default{
|
|
|
373
402
|
this.loadEnums(data.items)
|
|
374
403
|
})
|
|
375
404
|
.catch(err => this.toast(err))
|
|
405
|
+
.finally(_ => this.readyState = 1)
|
|
376
406
|
}
|
|
377
407
|
return new Promise(resolve => resolve())
|
|
378
408
|
},
|
|
@@ -383,6 +413,9 @@ export default{
|
|
|
383
413
|
return this.socket.send('user.preset', { key:this.presetKey })
|
|
384
414
|
.then(config => {
|
|
385
415
|
Object.assign(this.config, config)
|
|
416
|
+
|
|
417
|
+
if(this.$route.query?.search)
|
|
418
|
+
this.preset.search = this.$route.query.search
|
|
386
419
|
})
|
|
387
420
|
}
|
|
388
421
|
return new Promise(resolve => resolve())
|
|
@@ -669,7 +702,7 @@ export default{
|
|
|
669
702
|
let [ kk, ...vv ] = column.key.split('-')
|
|
670
703
|
vv = vv.join('-')
|
|
671
704
|
|
|
672
|
-
if(![ 'count', 'countDistinct' ].includes(vv)){
|
|
705
|
+
if(![ 'count', 'countDistinct', 'sum' ].includes(vv)){
|
|
673
706
|
|
|
674
707
|
const key = kk.substring(1)
|
|
675
708
|
const presetColumn = this.preset.columns.find(_ => _.key === key)
|
|
@@ -696,6 +729,17 @@ export default{
|
|
|
696
729
|
}]
|
|
697
730
|
})
|
|
698
731
|
}
|
|
732
|
+
else if([ 'sum' ].includes(vv)){
|
|
733
|
+
const key = kk.substring(1)
|
|
734
|
+
|
|
735
|
+
filters.push({
|
|
736
|
+
key,
|
|
737
|
+
value: [{
|
|
738
|
+
operator: '>',
|
|
739
|
+
value: 0
|
|
740
|
+
}]
|
|
741
|
+
})
|
|
742
|
+
}
|
|
699
743
|
|
|
700
744
|
this.extBar.open = true
|
|
701
745
|
this.extBar.filters = filters
|
|
@@ -747,8 +791,11 @@ export default{
|
|
|
747
791
|
this.loadPreset()
|
|
748
792
|
.then(() => {
|
|
749
793
|
this.readyState = 1
|
|
750
|
-
this
|
|
751
|
-
|
|
794
|
+
this.$nextTick(() => {
|
|
795
|
+
this.calcItemsPerPage()
|
|
796
|
+
this.load()
|
|
797
|
+
this.loadExt()
|
|
798
|
+
})
|
|
752
799
|
})
|
|
753
800
|
|
|
754
801
|
if(this.subscribeKey){
|
package/src/components/Tabs.vue
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<div :class="computedClass">
|
|
3
3
|
<button v-for="(item, index) in filteredItems" :class="tabClass(item)"
|
|
4
4
|
class="whitespace-nowrap"
|
|
5
|
-
@click="onClick(item)" type="button" >
|
|
5
|
+
@click="item.disabled !== true ? onClick(item) : ''" type="button" >
|
|
6
6
|
<slot name="default" :="{ item, index }">
|
|
7
7
|
<label class="px-1">
|
|
8
8
|
{{ item.text }}
|
|
@@ -56,6 +56,7 @@
|
|
|
56
56
|
<svg class="animate-spin aspect-square w-[16px] h-[16px] text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
|
|
57
57
|
</div>
|
|
58
58
|
</div>
|
|
59
|
+
<slot name="end"></slot>
|
|
59
60
|
</div>
|
|
60
61
|
</div>
|
|
61
62
|
<div v-else-if="visibleColumns.length <= 0 && Array.isArray(columns)" class="text-center p-3 flex-1 min-h-[100%] flex items-center justify-center">
|
package/src/index.js
CHANGED
|
@@ -591,6 +591,7 @@ export default{
|
|
|
591
591
|
app.component('Chart', defineAsyncComponent(() => import("./components/Chart.vue")))
|
|
592
592
|
app.component('DGrid', defineAsyncComponent(() => import("./components/DGrid.vue")))
|
|
593
593
|
app.component('DGridItem', defineAsyncComponent(() => import("./components/DGridItem.vue")))
|
|
594
|
+
app.component('GmapsDirection', defineAsyncComponent(() => import("./components/GmapsDirection.vue")))
|
|
594
595
|
|
|
595
596
|
app.component('AhrefSetting', defineAsyncComponent(() => import("./widgets/AhrefSetting.vue")))
|
|
596
597
|
app.component('ArticleSetting', defineAsyncComponent(() => import("./widgets/ArticleSetting.vue")))
|