@geode/opengeodeweb-front 10.2.1-rc.1 → 10.2.1-rc.2

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.
@@ -0,0 +1,55 @@
1
+ <script setup>
2
+ import { useTheme } from "vuetify"
3
+
4
+ const theme = useTheme()
5
+ const primaryColor = computed(() => theme.current.value.colors.primary)
6
+
7
+ defineProps({
8
+ title: { type: String, default: "" },
9
+ width: { type: [Number, String], default: 320 },
10
+ maxHeight: { type: [Number, String], default: 500 },
11
+ })
12
+ </script>
13
+ <template>
14
+ <v-card
15
+ @click.stop
16
+ :title="title"
17
+ class="option-card rounded-xl border-thin elevation-24"
18
+ :width="width"
19
+ :max-height="maxHeight"
20
+ :ripple="false"
21
+ theme="dark"
22
+ >
23
+ <v-card-text class="pa-5">
24
+ <slot />
25
+ </v-card-text>
26
+ <v-card-actions v-if="$slots.actions" class="justify-center pb-4">
27
+ <slot name="actions" />
28
+ </v-card-actions>
29
+ </v-card>
30
+ </template>
31
+
32
+ <style scoped>
33
+ .option-card {
34
+ background-color: rgba(30, 30, 30, 0.85) !important;
35
+ backdrop-filter: blur(20px);
36
+ -webkit-backdrop-filter: blur(20px);
37
+ border-color: rgba(255, 255, 255, 0.15) !important;
38
+ }
39
+
40
+ ::v-deep(.v-list-item:hover) {
41
+ background-color: rgba(255, 255, 255, 0.1);
42
+ }
43
+
44
+ ::v-deep(.v-slider-track__fill),
45
+ ::v-deep(.v-selection-control--dirty .v-switch__track) {
46
+ background-color: v-bind(primaryColor) !important;
47
+ }
48
+
49
+ ::v-deep(.v-btn) {
50
+ border-radius: 8px;
51
+ text-transform: none;
52
+ font-weight: 500;
53
+ letter-spacing: normal;
54
+ }
55
+ </style>
@@ -1,65 +1,3 @@
1
- <template>
2
- <v-sheet
3
- v-if="props.show_dialog"
4
- :width="props.width + 'px'"
5
- class="screenshot_menu"
6
- border="md"
7
- >
8
- <v-card class="bg-primary pa-0">
9
- <v-card-title>
10
- <h3 class="mt-4">Take a screenshot</h3>
11
- </v-card-title>
12
- <v-card-text class="pa-0">
13
- <v-container>
14
- <v-row>
15
- <v-col cols="8" class="py-0">
16
- <v-text-field v-model="filename" label="File name"></v-text-field>
17
- </v-col>
18
- <v-col cols="4" class="py-0">
19
- <v-select
20
- v-model="output_extension"
21
- :items="output_extensions"
22
- label="Extension"
23
- required
24
- />
25
- </v-col>
26
- </v-row>
27
-
28
- <v-row>
29
- <v-col cols="12" class="py-0">
30
- <v-switch
31
- v-model="include_background"
32
- :disabled="output_extension !== 'png'"
33
- label="Include background"
34
- inset
35
- ></v-switch>
36
- </v-col>
37
- </v-row>
38
- </v-container>
39
- </v-card-text>
40
- <v-card-actions justify-center>
41
- <v-btn
42
- variant="outlined"
43
- color="white"
44
- text
45
- @click="emit('close')"
46
- class="ml-8 mb-4"
47
- >Close</v-btn
48
- >
49
- <v-btn
50
- variant="outlined"
51
- class="mb-4"
52
- :disabled="!filename || !output_extension"
53
- color="white"
54
- text
55
- @click="takeScreenshot()"
56
- >Screenshot</v-btn
57
- >
58
- </v-card-actions>
59
- </v-card>
60
- </v-sheet>
61
- </template>
62
-
63
1
  <script setup>
64
2
  import fileDownload from "js-file-download"
65
3
  import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
@@ -107,12 +45,50 @@
107
45
  }
108
46
  })
109
47
  </script>
48
+ <template>
49
+ <OptionCard
50
+ v-if="props.show_dialog"
51
+ title="Take a screenshot"
52
+ :width="props.width"
53
+ class="position-absolute"
54
+ style="z-index: 2; top: 90px; right: 55px"
55
+ >
56
+ <v-container>
57
+ <v-row>
58
+ <v-col cols="8" class="py-0">
59
+ <v-text-field v-model="filename" label="File name"></v-text-field>
60
+ </v-col>
61
+ <v-col cols="4" class="py-0">
62
+ <v-select
63
+ v-model="output_extension"
64
+ :items="output_extensions"
65
+ label="Extension"
66
+ required
67
+ />
68
+ </v-col>
69
+ </v-row>
110
70
 
111
- <style scoped>
112
- .screenshot_menu {
113
- position: absolute;
114
- z-index: 2;
115
- top: 90px;
116
- right: 55px;
117
- }
118
- </style>
71
+ <v-row>
72
+ <v-col cols="12" class="py-0">
73
+ <v-switch
74
+ v-model="include_background"
75
+ :disabled="output_extension !== 'png'"
76
+ label="Include background"
77
+ inset
78
+ ></v-switch>
79
+ </v-col>
80
+ </v-row>
81
+ </v-container>
82
+
83
+ <template #actions>
84
+ <v-btn variant="text" color="white" @click="emit('close')">Close</v-btn>
85
+ <v-btn
86
+ variant="outlined"
87
+ :disabled="!filename || !output_extension"
88
+ color="white"
89
+ @click="takeScreenshot()"
90
+ >Screenshot</v-btn
91
+ >
92
+ </template>
93
+ </OptionCard>
94
+ </template>
@@ -1,50 +1,3 @@
1
- <template>
2
- <v-sheet class="menu-item-container transition-swing" color="transparent">
3
- <v-tooltip
4
- :location="props.itemProps.tooltip_location"
5
- :origin="props.itemProps.tooltip_origin"
6
- >
7
- <template v-slot:activator="{ props: tooltipProps }">
8
- <v-btn
9
- icon
10
- :active="is_active"
11
- @click.stop="toggleOptions"
12
- v-bind="tooltipProps"
13
- class="menu-btn bg-white border"
14
- elevation="2"
15
- >
16
- <v-img :src="btn_image" height="28" width="28" />
17
- </v-btn>
18
- </template>
19
- <span>{{ props.tooltip }}</span>
20
- </v-tooltip>
21
-
22
- <v-sheet
23
- v-if="is_active"
24
- ref="optionsRef"
25
- class="menu-options d-flex align-center pa-0"
26
- :class="optionsClass"
27
- :style="optionsStyle"
28
- color="transparent"
29
- @click.stop
30
- >
31
- <v-card
32
- @click.stop
33
- :title="props.tooltip"
34
- class="options-card rounded-xl border-thin elevation-24"
35
- width="320"
36
- :max-height="maxCardHeight"
37
- :ripple="false"
38
- theme="dark"
39
- >
40
- <v-card-text class="pa-5">
41
- <slot name="options" />
42
- </v-card-text>
43
- </v-card>
44
- </v-sheet>
45
- </v-sheet>
46
- </template>
47
-
48
1
  <script setup>
49
2
  import { useTheme } from "vuetify"
50
3
  import { useMenuStore } from "@ogw_front/stores/menu"
@@ -103,6 +56,46 @@
103
56
 
104
57
  const toggleOptions = () => menuStore.toggleItemOptions(props.index)
105
58
  </script>
59
+ <template>
60
+ <v-sheet class="menu-item-container transition-swing" color="transparent">
61
+ <v-tooltip
62
+ :location="props.itemProps.tooltip_location"
63
+ :origin="props.itemProps.tooltip_origin"
64
+ >
65
+ <template v-slot:activator="{ props: tooltipProps }">
66
+ <v-btn
67
+ icon
68
+ :active="is_active"
69
+ @click.stop="toggleOptions"
70
+ v-bind="tooltipProps"
71
+ class="menu-btn bg-white border"
72
+ elevation="2"
73
+ >
74
+ <v-img :src="btn_image" height="28" width="28" />
75
+ </v-btn>
76
+ </template>
77
+ <span>{{ props.tooltip }}</span>
78
+ </v-tooltip>
79
+
80
+ <v-sheet
81
+ v-if="is_active"
82
+ ref="optionsRef"
83
+ class="menu-options d-flex align-center pa-0"
84
+ :class="optionsClass"
85
+ :style="optionsStyle"
86
+ color="transparent"
87
+ @click.stop
88
+ >
89
+ <OptionCard
90
+ :title="props.tooltip"
91
+ width="320"
92
+ :max-height="maxCardHeight"
93
+ >
94
+ <slot name="options" />
95
+ </OptionCard>
96
+ </v-sheet>
97
+ </v-sheet>
98
+ </template>
106
99
 
107
100
  <style scoped>
108
101
  .menu-item-container {
@@ -146,22 +139,8 @@
146
139
  .options-right {
147
140
  left: 60px;
148
141
  }
142
+
149
143
  .options-left {
150
144
  right: 60px;
151
145
  }
152
-
153
- .options-card {
154
- background-color: rgba(30, 30, 30, 0.85) !important;
155
- backdrop-filter: blur(20px);
156
- -webkit-backdrop-filter: blur(20px);
157
- border-color: rgba(255, 255, 255, 0.15) !important;
158
- }
159
-
160
- ::v-deep(.v-list-item:hover) {
161
- background-color: rgba(255, 255, 255, 0.1);
162
- }
163
- ::v-deep(.v-slider-track__fill),
164
- ::v-deep(.v-selection-control--dirty .v-switch__track) {
165
- background-color: v-bind(primaryColor) !important;
166
- }
167
146
  </style>
@@ -1,75 +1,55 @@
1
- <template>
2
- <v-sheet
3
- :width="width + 'px'"
4
- class="z-scaling-menu"
5
- elevation="10"
6
- rounded="lg"
7
- >
8
- <v-card class="bg-primary pa-4" elevation="0">
9
- <v-card-title class="d-flex justify-space-between align-center">
10
- <h3 class="text-h5 font-weight-bold">Z Scaling Control</h3>
11
- </v-card-title>
12
- <v-card-text class="pt-4">
13
- <v-container>
14
- <v-row>
15
- <v-col cols="12" class="py-2">
16
- <v-slider
17
- v-model="zScale"
18
- :min="1"
19
- :max="10"
20
- :step="0.2"
21
- label="Z Scale"
22
- thumb-label
23
- color="white"
24
- track-color="white"
25
- />
26
- </v-col>
27
- </v-row>
28
- <v-row>
29
- <v-col cols="12" class="py-2">
30
- <v-text-field
31
- v-model.number="zScale"
32
- type="number"
33
- label="Z Scale Value"
34
- outlined
35
- dense
36
- hide-details
37
- step="0.1"
38
- class="custom-number-input"
39
- :min="1"
40
- />
41
- </v-col>
42
- </v-row>
43
- </v-container>
44
- </v-card-text>
45
- <v-card-actions class="justify-center pb-4">
46
- <v-btn
47
- variant="text"
48
- color="white"
49
- @click="$emit('close')"
50
- class="px-4"
51
- >
52
- Close
53
- </v-btn>
54
- <v-btn
55
- variant="outlined"
56
- color="white"
57
- @click="$emit('close')"
58
- class="px-4"
59
- >
60
- Apply
61
- </v-btn>
62
- </v-card-actions>
63
- </v-card>
64
- </v-sheet>
65
- </template>
66
-
67
1
  <script setup>
68
2
  const zScale = defineModel({ type: Number, default: 1 })
69
3
  const props = defineProps({
70
4
  width: { type: Number, default: 400 },
71
5
  })
72
6
  </script>
7
+ <template>
8
+ <OptionCard
9
+ title="Z Scaling Control"
10
+ :width="width"
11
+ class="position-absolute rounded-xl"
12
+ style="z-index: 2; top: 90px; right: 55px"
13
+ >
14
+ <v-container>
15
+ <v-row>
16
+ <v-col cols="12" class="py-2">
17
+ <v-slider
18
+ v-model="zScale"
19
+ :min="1"
20
+ :max="10"
21
+ :step="0.2"
22
+ label="Z Scale"
23
+ thumb-label
24
+ color="white"
25
+ track-color="white"
26
+ />
27
+ </v-col>
28
+ </v-row>
29
+ <v-row>
30
+ <v-col cols="12" class="py-2">
31
+ <v-text-field
32
+ v-model.number="zScale"
33
+ type="number"
34
+ label="Z Scale Value"
35
+ outlined
36
+ dense
37
+ hide-details
38
+ step="0.1"
39
+ :min="1"
40
+ />
41
+ </v-col>
42
+ </v-row>
43
+ </v-container>
44
+
45
+ <template #actions>
46
+ <v-btn variant="text" color="white" @click="$emit('close')">Close</v-btn>
47
+ <v-btn variant="outlined" color="white" @click="$emit('close')"
48
+ >Apply</v-btn
49
+ >
50
+ </template>
51
+ </OptionCard>
52
+ </template>
73
53
 
74
54
  <style scoped>
75
55
  .z-scaling-menu {
@@ -83,11 +63,4 @@
83
63
  .custom-number-input :deep(.v-input__control) {
84
64
  min-height: 48px;
85
65
  }
86
-
87
- .v-btn {
88
- border-radius: 8px;
89
- text-transform: none;
90
- font-weight: 500;
91
- letter-spacing: normal;
92
- }
93
66
  </style>
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@geode/opengeodeweb-front",
3
3
  "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
4
4
  "type": "module",
5
- "version": "10.2.1-rc.1",
5
+ "version": "10.2.1-rc.2",
6
6
  "main": "./nuxt.config.js",
7
7
  "scripts": {
8
8
  "lint": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",