@vcmap/ui 6.1.13 → 6.2.0-rc.1

package/src/manager/toolbox/GroupToolboxComponent.vue

@@ -55,14 +55,6 @@
     </v-menu>
   </div>
 </template>
-<style lang="scss" scoped>
-  .marginToTop {
-    margin-top: 3px;
-  }
-  .marginToBottom {
-    margin-bottom: 3px;
-  }
-</style>
 <script>
   import { computed, ref } from 'vue';
   import { VMenu, VIcon, VToolbar, VToolbarItems } from 'vuetify/components';
@@ -96,6 +88,7 @@
         required: true,
       },
     },
+    emits: ['click', 'toggle'],
     setup(props) {
       const open = ref(false);
 
@@ -127,3 +120,11 @@
     },
   };
 </script>
+<style lang="scss" scoped>
+  .marginToTop {
+    margin-top: 3px;
+  }
+  .marginToBottom {
+    margin-bottom: 3px;
+  }
+</style>

package/src/manager/toolbox/GroupToolboxComponent.vue.d.ts

@@ -9,10 +9,13 @@ declare const _default: import("vue").DefineComponent<{
     hasActiveAction: import("vue").ComputedRef<boolean>;
     toolboxHeight: import("vue").ComputedRef<number>;
     xs: import("vue").Ref<boolean>;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "toggle")[], "click" | "toggle", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     group: {
         type: ObjectConstructor;
         required: true;
     };
-}>>, {}, {}>;
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+    onToggle?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
 export default _default;

package/src/manager/toolbox/SelectToolboxComponent.vue

@@ -70,14 +70,6 @@
     </v-menu>
   </div>
 </template>
-<style lang="scss" scoped>
-  .marginToTop {
-    margin-top: 3px;
-  }
-  .marginToBottom {
-    margin-bottom: 3px;
-  }
-</style>
 <script>
   import { ref, computed } from 'vue';
   import { VMenu, VIcon, VToolbar, VToolbarItems } from 'vuetify/components';
@@ -105,6 +97,7 @@
         required: true,
       },
     },
+    emits: ['click', 'toggle'],
     setup() {
       const open = ref(false);
       const fontSize = useFontSize();
@@ -120,3 +113,11 @@
     },
   };
 </script>
+<style lang="scss" scoped>
+  .marginToTop {
+    margin-top: 3px;
+  }
+  .marginToBottom {
+    margin-bottom: 3px;
+  }
+</style>

package/src/manager/toolbox/SelectToolboxComponent.vue.d.ts

@@ -7,10 +7,13 @@ declare const _default: import("vue").DefineComponent<{
     open: import("vue").Ref<boolean>;
     toolboxHeight: import("vue").ComputedRef<number>;
     xs: import("vue").Ref<boolean>;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "toggle")[], "click" | "toggle", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     group: {
         type: ObjectConstructor;
         required: true;
     };
-}>>, {}, {}>;
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+    onToggle?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
 export default _default;

package/src/manager/toolbox/ToolboxManagerComponent.vue

@@ -56,29 +56,6 @@
   </v-toolbar>
 </template>
 
-<style lang="scss" scoped>
-  .vcs-toolbox__secondary {
-    &.vcs-toolbox.v-theme {
-      &--light {
-        background-color: rgba(var(--v-theme-primary-lighten-3));
-      }
-      &--dark {
-        background-color: rgba(var(--v-theme-primary-darken-4));
-      }
-    }
-  }
-  .vcs-toolbox {
-    margin-top: 2px;
-    width: fit-content;
-  }
-  .mobileToolbox {
-    bottom: 0px !important;
-    position: absolute !important;
-    left: 50% !important;
-    transform: translateX(-50%) !important;
-  }
-</style>
-
 <script>
   import { inject, ref, computed, watch, onUnmounted, reactive } from 'vue';
   import { useDisplay } from 'vuetify';
@@ -259,3 +236,26 @@
     },
   };
 </script>
+
+<style lang="scss" scoped>
+  .vcs-toolbox__secondary {
+    &.vcs-toolbox.v-theme {
+      &--light {
+        background-color: rgba(var(--v-theme-primary-lighten-3));
+      }
+      &--dark {
+        background-color: rgba(var(--v-theme-primary-darken-4));
+      }
+    }
+  }
+  .vcs-toolbox {
+    margin-top: 2px;
+    width: fit-content;
+  }
+  .mobileToolbox {
+    bottom: 0px !important;
+    position: absolute !important;
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+  }
+</style>

package/src/manager/window/WindowComponent.vue

@@ -38,16 +38,6 @@
   </v-sheet>
 </template>
 
-<style scoped>
-  .marginToTop {
-    margin-top: 2px;
-  }
-  .marginTablet {
-    margin-top: calc(var(--v-vcs-font-size) * 3 + 6px);
-    margin-bottom: 2px;
-  }
-</style>
-
 <script>
   import { computed, inject, provide, ref } from 'vue';
   import { VDivider, VSheet } from 'vuetify/components';
@@ -67,11 +57,11 @@
    */
   export default {
     name: 'WindowComponent',
-    inheritAttrs: false,
     components: {
       VSheet,
       VDivider,
     },
+    inheritAttrs: false,
     props: {
       windowState: {
         type: Object,
@@ -79,7 +69,6 @@
       },
       isOnTop: {
         type: Boolean,
-        required: true,
         default: false,
       },
       slotWindow: {
@@ -87,6 +76,7 @@
         required: true,
       },
     },
+    emits: ['mousedown', 'moved'],
     setup(props, { emit }) {
       const app = inject('vcsApp');
       const { provides } = app.windowManager.get(props.windowState.id);
@@ -177,3 +167,13 @@
     },
   };
 </script>
+
+<style scoped>
+  .marginToTop {
+    margin-top: 2px;
+  }
+  .marginTablet {
+    margin-top: calc(var(--v-vcs-font-size) * 3 + 6px);
+    margin-bottom: 2px;
+  }
+</style>

package/src/manager/window/WindowComponent.vue.d.ts

@@ -5,7 +5,6 @@ declare const _default: import("vue").DefineComponent<{
     };
     isOnTop: {
         type: BooleanConstructor;
-        required: true;
         default: boolean;
     };
     slotWindow: {
@@ -23,19 +22,23 @@ declare const _default: import("vue").DefineComponent<{
     dragStart: (e: DragEvent) => void;
     dragEnd: (endEvent: DragEvent) => void;
     mousedown: (e: MouseEvent) => void;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("mousedown" | "moved")[], "mousedown" | "moved", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     windowState: {
         type: ObjectConstructor;
         required: true;
     };
     isOnTop: {
         type: BooleanConstructor;
-        required: true;
         default: boolean;
     };
     slotWindow: {
         type: ObjectConstructor;
         required: true;
     };
-}>>, {}, {}>;
+}>> & {
+    onMousedown?: ((...args: any[]) => any) | undefined;
+    onMoved?: ((...args: any[]) => any) | undefined;
+}, {
+    isOnTop: boolean;
+}, {}>;
 export default _default;

package/src/manager/window/WindowComponentHeader.vue

@@ -58,29 +58,6 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
-  .window-component-header {
-    max-height: calc(var(--v-vcs-font-size) * 2 - 10px);
-
-    h3 {
-      line-height: calc(var(--v-vcs-font-size) * 2 - 10px);
-    }
-    .v-divider--vertical.v-divider--inset {
-      margin-top: 2px;
-    }
-  }
-  .user-select-none {
-    user-select: none;
-  }
-  .vcs-window-header-title {
-    width: 10px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex: 1;
-  }
-</style>
-
 <script>
   import { VIcon, VDivider, VTooltip } from 'vuetify/components';
   import { computed, getCurrentInstance, ref } from 'vue';
@@ -116,7 +93,6 @@
       },
       isOnTop: {
         type: Boolean,
-        required: true,
         default: false,
       },
       slotWindow: {
@@ -124,6 +100,7 @@
         required: true,
       },
     },
+    emits: ['pin', 'close'],
     setup(props, { emit }) {
       const pin = () => {
         emit('pin');
@@ -178,3 +155,26 @@
     },
   };
 </script>
+
+<style lang="scss" scoped>
+  .window-component-header {
+    max-height: calc(var(--v-vcs-font-size) * 2 - 10px);
+
+    h3 {
+      line-height: calc(var(--v-vcs-font-size) * 2 - 10px);
+    }
+    .v-divider--vertical.v-divider--inset {
+      margin-top: 2px;
+    }
+  }
+  .user-select-none {
+    user-select: none;
+  }
+  .vcs-window-header-title {
+    width: 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+  }
+</style>

package/src/manager/window/WindowComponentHeader.vue.d.ts

@@ -5,7 +5,6 @@ declare const _default: import("vue").DefineComponent<{
     };
     isOnTop: {
         type: BooleanConstructor;
-        required: true;
         default: boolean;
     };
     slotWindow: {
@@ -22,19 +21,23 @@ declare const _default: import("vue").DefineComponent<{
     headerTooltip: import("vue").ComputedRef<string>;
     infoAction: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction | undefined;
     xs: import("vue").Ref<boolean>;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "pin")[], "close" | "pin", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     windowState: {
         type: ObjectConstructor;
         required: true;
     };
     isOnTop: {
         type: BooleanConstructor;
-        required: true;
         default: boolean;
     };
     slotWindow: {
         type: ObjectConstructor;
         required: true;
     };
-}>>, {}, {}>;
+}>> & {
+    onClose?: ((...args: any[]) => any) | undefined;
+    onPin?: ((...args: any[]) => any) | undefined;
+}, {
+    isOnTop: boolean;
+}, {}>;
 export default _default;

package/src/manager/window/WindowManager.vue

@@ -36,47 +36,6 @@
   </div>
 </template>
 
-<style scoped lang="scss">
-  .mobile > div:not(#window-component--searchId) {
-    position: fixed;
-    left: 0;
-    right: 0;
-    z-index: 2;
-    display: contents;
-    width: 100% !important;
-    max-width: 100% !important;
-    inset: unset !important;
-    border-radius: 0 !important;
-    overflow: auto;
-    bottom: 0 !important;
-    max-height: 50% !important;
-  }
-  .mobile > div {
-    transition: transform 0.4s ease;
-  }
-
-  .mobile > #window-component--searchId {
-    position: fixed !important;
-    top: calc(var(--v-vcs-font-size) * 5 + 28px) !important;
-    left: 5px !important;
-    right: calc(var(--v-vcs-font-size) * 5 + 2px) !important;
-    z-index: 2;
-    border-radius: 4px !important;
-    width: inherit !important;
-    padding-right: 1px !important;
-    .py-1 {
-      padding: 0px !important;
-    }
-  }
-  .mobile > #window-component--searchId > div > div {
-    border-radius: 4px !important;
-  }
-
-  .oblique > #window-component--searchId {
-    right: calc(var(--v-vcs-font-size) * 6.25 + 2px) !important;
-  }
-</style>
-
 <script>
   import { computed, inject, onUnmounted, ref, watch } from 'vue';
   import { useDisplay } from 'vuetify';
@@ -358,3 +317,44 @@
     },
   };
 </script>
+
+<style scoped lang="scss">
+  .mobile > div:not(#window-component--searchId) {
+    position: fixed;
+    left: 0;
+    right: 0;
+    z-index: 2;
+    display: contents;
+    width: 100% !important;
+    max-width: 100% !important;
+    inset: unset !important;
+    border-radius: 0 !important;
+    overflow: auto;
+    bottom: 0 !important;
+    max-height: 50% !important;
+  }
+  .mobile > div {
+    transition: transform 0.4s ease;
+  }
+
+  .mobile > #window-component--searchId {
+    position: fixed !important;
+    top: calc(var(--v-vcs-font-size) * 5 + 28px) !important;
+    left: 5px !important;
+    right: calc(var(--v-vcs-font-size) * 5 + 2px) !important;
+    z-index: 2;
+    border-radius: 4px !important;
+    width: inherit !important;
+    padding-right: 1px !important;
+    .py-1 {
+      padding: 0px !important;
+    }
+  }
+  .mobile > #window-component--searchId > div > div {
+    border-radius: 4px !important;
+  }
+
+  .oblique > #window-component--searchId {
+    right: calc(var(--v-vcs-font-size) * 6.25 + 2px) !important;
+  }
+</style>

package/src/navigation/MapNavCompass.vue

@@ -177,6 +177,10 @@
         default: false,
       },
     },
+    emits: ['direction-click'],
+    setup() {
+      return { alignment: ref('') };
+    },
     methods: {
       emit(event, dir) {
         if (this.canEmit) {
@@ -186,9 +190,6 @@
         }
       },
     },
-    setup() {
-      return { alignment: ref('') };
-    },
   };
 </script>
 

package/src/navigation/MapNavCompass.vue.d.ts

@@ -11,7 +11,7 @@ declare const _default: import("vue").DefineComponent<{
     alignment: import("vue").Ref<string>;
 }, any, {}, {
     emit(event: any, dir: any): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "direction-click"[], "direction-click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     canEmit: {
         type: BooleanConstructor;
         default: boolean;
@@ -20,7 +20,9 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}>>, {
+}>> & {
+    "onDirection-click"?: ((...args: any[]) => any) | undefined;
+}, {
     canEmit: boolean;
     hideTicks: boolean;
 }, {}>;

package/src/navigation/ObliqueRotation.vue

@@ -41,6 +41,7 @@
         required: false,
       },
     },
+    emits: ['update:modelValue'],
     methods: {
       input(rotation) {
         let currentValue = this.modelValue + rotation;

package/src/navigation/ObliqueRotation.vue.d.ts

@@ -10,7 +10,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, any, any, {}, {
     input(rotation: any): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: NumberConstructor;
         required: true;
@@ -20,7 +20,9 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         required: false;
     };
-}>>, {
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
     disabled: boolean;
 }, {}>;
 export default _default;

package/src/navigation/OrientationToolsButton.vue

@@ -14,7 +14,6 @@
     ></v-tooltip>
   </v-card>
 </template>
-<style lang="scss" scoped></style>
 <script>
   import { VCard, VIcon, VTooltip } from 'vuetify/components';
   import { computed } from 'vue';
@@ -67,3 +66,4 @@
     },
   };
 </script>
+<style lang="scss" scoped></style>

package/src/navigation/TiltSlider.vue

@@ -28,41 +28,6 @@
   </v-card>
 </template>
 
-<style lang="scss" scoped>
-  .v-slider.v-input--vertical {
-    :deep(.v-slider-track__fill) {
-      width: 2px;
-    }
-    :deep(.v-slider-track__tick--first) {
-      bottom: 0;
-    }
-    :deep(.v-slider-track__tick--last) {
-      bottom: 100%;
-    }
-  }
-
-  .vcs-tilt-slider {
-    margin-top: 6px;
-    margin-bottom: 10px;
-    :deep(.v-slider-thumb__surface) {
-      border-radius: 3px;
-      width: 16px;
-      height: 4px;
-      margin-top: 10px;
-      box-shadow: none !important;
-    }
-  }
-  :deep(.v-slider-thumb__surface::before) {
-    --v-focus-opacity: 0;
-    --v-hover-opacity: 0;
-    --v-pressed-opacity: 0;
-  }
-
-  .v-input--vertical :deep(.v-input__control) {
-    min-height: calc(var(--v-vcs-font-size) * 4);
-  }
-</style>
-
 <script>
   import { computed, defineComponent } from 'vue';
   import { VCard, VSlider, VTooltip } from 'vuetify/components';
@@ -115,3 +80,38 @@
     },
   });
 </script>
+
+<style lang="scss" scoped>
+  .v-slider.v-input--vertical {
+    :deep(.v-slider-track__fill) {
+      width: 2px;
+    }
+    :deep(.v-slider-track__tick--first) {
+      bottom: 0;
+    }
+    :deep(.v-slider-track__tick--last) {
+      bottom: 100%;
+    }
+  }
+
+  .vcs-tilt-slider {
+    margin-top: 6px;
+    margin-bottom: 10px;
+    :deep(.v-slider-thumb__surface) {
+      border-radius: 3px;
+      width: 16px;
+      height: 4px;
+      margin-top: 10px;
+      box-shadow: none !important;
+    }
+  }
+  :deep(.v-slider-thumb__surface::before) {
+    --v-focus-opacity: 0;
+    --v-hover-opacity: 0;
+    --v-pressed-opacity: 0;
+  }
+
+  .v-input--vertical :deep(.v-input__control) {
+    min-height: calc(var(--v-vcs-font-size) * 4);
+  }
+</style>

package/src/navigation/VcsCompass.vue

@@ -4,7 +4,7 @@
       transform: `rotate(${compassRotation}deg)`,
       transition: 'transform 0.2s ease',
     }"
-    @click="$emit('update:modelValue', 0)"
+    @click="alignNorth"
     class="d-flex flex-column justify-center align-center position-relative rounded-circle user-select-none vcs-compass"
     elevation="1"
     :height="height"
@@ -13,17 +13,18 @@
     <span>N</span>
     <MapNavCompass
       class="position-absolute top-0 bottom-0 right-0 left-0 text-primary"
-      @click="$event.stopPropagation()"
+      @click="!xs && $event.stopPropagation()"
       @direction-click="$emit('update:modelValue', $event)"
-      :can-emit="!disabled && (viewMode === '3d' || viewMode === 'oblique')"
+      :can-emit="
+        !disabled && !xs && (viewMode === '3d' || viewMode === 'oblique')
+      "
       :hide-ticks="viewMode === 'oblique'"
     />
   </v-sheet>
 </template>
-<style lang="scss" scoped></style>
 <script>
   import { computed, ref } from 'vue';
-
+  import { useDisplay } from 'vuetify';
   import { VSheet } from 'vuetify/components';
   import MapNavCompass from './MapNavCompass.vue';
   import { useFontSize } from '../vuePlugins/vuetify.js';
@@ -55,23 +56,26 @@
         required: false,
       },
     },
-    setup(props) {
+    emits: ['update:modelValue'],
+    setup(props, { emit }) {
       const rotationValue = ref(props.modelValue);
 
+      const { xs } = useDisplay();
       const fontSize = useFontSize();
-      const height = computed(() => {
-        return fontSize.value * 5;
-      });
-
-      const width = computed(() => {
-        return fontSize.value * 5;
-      });
+      const height = computed(() => fontSize.value * 5);
+      const width = computed(() => fontSize.value * 5);
 
       return {
+        xs,
         rotationValue,
         compassRotation: computed(() => -1 * rotationValue.value),
         height,
         width,
+        alignNorth() {
+          if (props.modelValue % 360 !== 0) {
+            emit('update:modelValue', 0);
+          }
+        },
       };
     },
     watch: {
@@ -87,3 +91,4 @@
     },
   };
 </script>
+<style lang="scss" scoped></style>