@vcmap/ui 6.1.14 → 6.2.0-rc.2

package/src/callback/toggleToolbarButtonCallback.d.ts

@@ -0,0 +1,48 @@
+export default ToggleToolbarButtonCallback;
+export type ToggleToolbarButtonOptions = import("./vcsCallback.js").VcsCallbackOptions & {
+    componentId: string;
+    groupButtonId?: string;
+};
+/**
+ * @typedef {import("./vcsCallback.js").VcsCallbackOptions & { componentId: string, groupButtonId?:string }} ToggleToolbarButtonOptions
+ * @property {string} componentId - id of the Toolbar button
+ * @property {string} [groupButtonId] - id of the button to toggle, in case of a GroupComponentToolbox
+ * @property {string} [toolName] - name of the tool to toggle, in case of a SelectComponentToolbox
+ * @property {boolean} [activeState] - state to be applied to the button
+ */
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+declare class ToggleToolbarButtonCallback extends VcsCallback {
+    /**
+     * @param {ToggleToolbarButtonOptions} options
+     * @param {import("@src/vcsUiApp.js").default} app
+     */
+    constructor(options: ToggleToolbarButtonOptions, app: import("@src/vcsUiApp.js").default);
+    /**
+     * @type {string}
+     * @private
+     */
+    private _componentId;
+    /**
+     * @type {string|undefined}
+     * @private
+     */
+    private _groupButtonId;
+    /**
+     * @type {string|undefined}
+     * @private
+     */
+    private _toolName;
+    /**
+     * @type {boolean|undefined}
+     * @private
+     */
+    private _activeState;
+    /**
+     * @returns {ToggleToolbarButtonOptions}
+     */
+    toJSON(): ToggleToolbarButtonOptions;
+}
+import VcsCallback from './vcsCallback.js';

package/src/callback/toggleToolbarButtonCallback.js

@@ -0,0 +1,115 @@
+import { getLogger } from '@vcsuite/logger';
+import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
+import { ToolboxType } from '../manager/toolbox/toolboxManager.js';
+import { callSafeAction } from '../actions/actionHelper.js';
+
+/**
+ * @typedef {import("./vcsCallback.js").VcsCallbackOptions & { componentId: string, groupButtonId?:string }} ToggleToolbarButtonOptions
+ * @property {string} componentId - id of the Toolbar button
+ * @property {string} [groupButtonId] - id of the button to toggle, in case of a GroupComponentToolbox
+ * @property {string} [toolName] - name of the tool to toggle, in case of a SelectComponentToolbox
+ * @property {boolean} [activeState] - state to be applied to the button
+ */
+
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+class ToggleToolbarButtonCallback extends VcsCallback {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'ToggleToolbarButtonCallback';
+  }
+
+  /**
+   * @param {ToggleToolbarButtonOptions} options
+   * @param {import("@src/vcsUiApp.js").default} app
+   */
+  constructor(options, app) {
+    super(options, app);
+    /**
+     * @type {string}
+     * @private
+     */
+    this._componentId = options.componentId;
+    /**
+     * @type {string|undefined}
+     * @private
+     */
+    this._groupButtonId = options.groupButtonId;
+    /**
+     * @type {string|undefined}
+     * @private
+     */
+    this._toolName = options.toolName;
+    /**
+     * @type {boolean|undefined}
+     * @private
+     */
+    this._activeState = options.activeState;
+  }
+
+  callback() {
+    let action;
+    const component = this._app.toolboxManager.get(this._componentId);
+    if (component?.type === ToolboxType.GROUP && this._groupButtonId) {
+      const btn = component.buttonManager.get(this._groupButtonId);
+      if (btn?.action) {
+        ({ action } = btn);
+      }
+    } else if (component?.type === ToolboxType.SELECT) {
+      try {
+        const { tools } = component.action;
+        const toolIndex = tools.findIndex((t) => t.name === this._toolName);
+        if (toolIndex) {
+          component.action.selected(toolIndex);
+          ({ action } = component);
+        }
+      } catch (error) {
+        getLogger(this.className).error(
+          `Error while setting tool ${this._toolName}:`,
+          error,
+        );
+      }
+    } else if (component?.type === ToolboxType.SINGLE) {
+      ({ action } = component);
+    }
+
+    if (
+      action &&
+      (this._activeState === undefined ||
+        action.active === undefined ||
+        action.active !== this._activeState)
+    ) {
+      callSafeAction(action);
+    }
+  }
+
+  /**
+   * @returns {ToggleToolbarButtonOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    config.componentId = this._componentId;
+    if (this._groupButtonId) {
+      config.groupButtonId = this._groupButtonId;
+    }
+    if (this._toolName) {
+      config.toolName = this._toolName;
+    }
+    if (this._activeState) {
+      config.activeState = this._activeState;
+    }
+    return config;
+  }
+}
+
+export default ToggleToolbarButtonCallback;
+
+// Register the class
+callbackClassRegistry.registerClass(
+  ToggleToolbarButtonCallback.className,
+  ToggleToolbarButtonCallback,
+);

package/src/components/attrsHelpers.js

@@ -4,7 +4,7 @@ import { is } from '@vcsuite/check';
  * @param {Record<string, unknown>} attrs
  * @returns {Record<string, unknown>}
  */
-// eslint-disable-next-line import/prefer-default-export
+
 export function removeListenersFromAttrs(attrs) {
   return Object.fromEntries(
     Object.entries(attrs).filter(

package/src/components/buttons/VcsActionButtonList.vue

@@ -42,11 +42,6 @@
     <v-spacer v-else-if="blockOverflow" />
   </div>
 </template>
-<style scoped lang="scss">
-  :deep(.v-spacer) {
-    width: calc(var(--v-vcs-font-size) * 1.25);
-  }
-</style>
 <script>
   import { VIcon, VMenu, VSpacer } from 'vuetify/components';
   import VcsButton from './VcsButton.vue';
@@ -180,3 +175,8 @@
     },
   };
 </script>
+<style scoped lang="scss">
+  :deep(.v-spacer) {
+    width: calc(var(--v-vcs-font-size) * 1.25);
+  }
+</style>

package/src/components/buttons/VcsButton.vue

@@ -34,32 +34,6 @@
   </v-btn>
 </template>
 
-<style lang="scss" scoped>
-  .badge {
-    top: -3px;
-    right: -3px;
-  }
-  .v-btn {
-    padding: 0px;
-    &.vcs-button {
-      &:hover {
-        color: rgb(var(--v-theme-primary-lighten-1)) !important;
-      }
-    }
-    &.v-btn--disabled {
-      opacity: var(--v-disabled-opacity);
-    }
-    :deep(.v-btn__loader > .v-progress-circular) {
-      width: calc(var(--v-vcs-font-size) * (1.2 + 0.1 / 3)) !important;
-      height: calc(var(--v-vcs-font-size) * (1.2 + 0.1 / 3)) !important;
-    }
-  }
-  // remove hover shadow over button
-  :deep(.v-btn__overlay) {
-    --v-hover-opacity: 0;
-  }
-</style>
-
 <script>
   import { computed } from 'vue';
   import { VBtn, VIcon, VTooltip } from 'vuetify/components';
@@ -143,3 +117,29 @@
     },
   };
 </script>
+
+<style lang="scss" scoped>
+  .badge {
+    top: -3px;
+    right: -3px;
+  }
+  .v-btn {
+    padding: 0px;
+    &.vcs-button {
+      &:hover {
+        color: rgb(var(--v-theme-primary-lighten-1)) !important;
+      }
+    }
+    &.v-btn--disabled {
+      opacity: var(--v-disabled-opacity);
+    }
+    :deep(.v-btn__loader > .v-progress-circular) {
+      width: calc(var(--v-vcs-font-size) * (1.2 + 0.1 / 3)) !important;
+      height: calc(var(--v-vcs-font-size) * (1.2 + 0.1 / 3)) !important;
+    }
+  }
+  // remove hover shadow over button
+  :deep(.v-btn__overlay) {
+    --v-hover-opacity: 0;
+  }
+</style>

package/src/components/buttons/VcsFormButton.vue

@@ -32,37 +32,6 @@
   </v-btn>
 </template>
 
-<style lang="scss" scoped>
-  .badge {
-    top: -3px;
-    right: -3px;
-  }
-  .v-btn {
-    &.v-btn--variant-outlined:hover {
-      border-color: rgb(var(--v-theme-primary-lighten-1));
-    }
-    &.v-btn--variant-flat:hover {
-      background-color: rgb(var(--v-theme-primary-lighten-1)) !important;
-      --v-hover-opacity: 0;
-    }
-    &.v-btn--disabled.v-btn--variant-outlined {
-      opacity: var(--v-disabled-opacity);
-      color: rgb(var(--v-theme-on-surface)) !important;
-    }
-    &.v-btn--disabled.v-btn--variant-flat {
-      opacity: var(--v-disabled-opacity);
-      background-color: rgb(var(--v-theme-base-lighten-1)) !important;
-      :deep(.v-btn__overlay) {
-        opacity: 0;
-      }
-    }
-    :deep(.v-btn__loader > .v-progress-circular) {
-      width: calc(var(--v-vcs-font-size) * (1.2 + 0.1 / 3)) !important;
-      height: calc(var(--v-vcs-font-size) * (1.2 + 0.1 / 3)) !important;
-    }
-  }
-</style>
-
 <script>
   import { computed } from 'vue';
   import { VBtn, VIcon, VTooltip } from 'vuetify/components';
@@ -137,3 +106,34 @@
     },
   };
 </script>
+
+<style lang="scss" scoped>
+  .badge {
+    top: -3px;
+    right: -3px;
+  }
+  .v-btn {
+    &.v-btn--variant-outlined:hover {
+      border-color: rgb(var(--v-theme-primary-lighten-1));
+    }
+    &.v-btn--variant-flat:hover {
+      background-color: rgb(var(--v-theme-primary-lighten-1)) !important;
+      --v-hover-opacity: 0;
+    }
+    &.v-btn--disabled.v-btn--variant-outlined {
+      opacity: var(--v-disabled-opacity);
+      color: rgb(var(--v-theme-on-surface)) !important;
+    }
+    &.v-btn--disabled.v-btn--variant-flat {
+      opacity: var(--v-disabled-opacity);
+      background-color: rgb(var(--v-theme-base-lighten-1)) !important;
+      :deep(.v-btn__overlay) {
+        opacity: 0;
+      }
+    }
+    :deep(.v-btn__loader > .v-progress-circular) {
+      width: calc(var(--v-vcs-font-size) * (1.2 + 0.1 / 3)) !important;
+      height: calc(var(--v-vcs-font-size) * (1.2 + 0.1 / 3)) !important;
+    }
+  }
+</style>

package/src/components/buttons/VcsToolButton.vue

@@ -40,35 +40,6 @@
   </v-btn>
 </template>
 
-<style lang="scss" scoped>
-  .badge {
-    top: -3px;
-    right: -3px;
-  }
-  .vcs-active.vcs-background:not(.v-btn--disabled) :deep(.badge) {
-    top: -5px;
-    right: -5px;
-  }
-  .v-btn {
-    padding-left: 11px;
-    padding-right: 11px;
-
-    &.vcs-active.vcs-background:not(.v-btn--disabled) {
-      padding-left: 9px;
-      padding-right: 9px;
-      border: 2px solid rgb(var(--v-theme-primary));
-      background-color: rgb(var(--v-theme-base-lighten-2)) !important;
-    }
-    &.v-btn--disabled.v-btn--variant-text {
-      opacity: var(--v-disabled-opacity);
-    }
-    :deep(.v-btn__loader > .v-progress-circular) {
-      width: calc(var(--v-vcs-font-size) * (1.2 + 0.1 / 3)) !important;
-      height: calc(var(--v-vcs-font-size) * (1.2 + 0.1 / 3)) !important;
-    }
-  }
-</style>
-
 <script>
   import { computed } from 'vue';
   import { VBtn, VIcon, VTooltip } from 'vuetify/components';
@@ -173,3 +144,32 @@
     },
   };
 </script>
+
+<style lang="scss" scoped>
+  .badge {
+    top: -3px;
+    right: -3px;
+  }
+  .vcs-active.vcs-background:not(.v-btn--disabled) :deep(.badge) {
+    top: -5px;
+    right: -5px;
+  }
+  .v-btn {
+    padding-left: 11px;
+    padding-right: 11px;
+
+    &.vcs-active.vcs-background:not(.v-btn--disabled) {
+      padding-left: 9px;
+      padding-right: 9px;
+      border: 2px solid rgb(var(--v-theme-primary));
+      background-color: rgb(var(--v-theme-base-lighten-2)) !important;
+    }
+    &.v-btn--disabled.v-btn--variant-text {
+      opacity: var(--v-disabled-opacity);
+    }
+    :deep(.v-btn__loader > .v-progress-circular) {
+      width: calc(var(--v-vcs-font-size) * (1.2 + 0.1 / 3)) !important;
+      height: calc(var(--v-vcs-font-size) * (1.2 + 0.1 / 3)) !important;
+    }
+  }
+</style>

package/src/components/extent/VcsExtent.vue

@@ -73,7 +73,6 @@
    */
   export default {
     name: 'VcsExtent',
-    inheritAttrs: false,
     components: {
       VcsCoordinate,
       VContainer,
@@ -82,6 +81,7 @@
       VcsLabel,
       VcsTextField,
     },
+    inheritAttrs: false,
     props: {
       modelValue: {
         type: Object,

package/src/components/extent/VcsExtentEditor.vue

@@ -30,11 +30,11 @@
    */
   export default {
     name: 'VcsExtentEditor',
-    inheritAttrs: false,
     components: {
       VcsFormSection,
       VcsExtent,
     },
+    inheritAttrs: false,
     props: {
       modelValue: {
         type: Object,

package/src/components/flight/VcsFlightAnchorsComponent.vue

@@ -328,8 +328,8 @@
         items: collectionComponent.items,
         draggable: collectionComponent.draggable,
         actions: collectionComponent.getActions(),
-        move({ item, targetIndex }) {
-          moveItem(collectionComponent, item, targetIndex);
+        move(event) {
+          moveItem(collectionComponent, event);
         },
         durationRule,
         showDuration(index) {

package/src/components/flight/VcsFlightAnchorsComponent.vue.d.ts

@@ -18,10 +18,7 @@ declare const _default: import("vue").DefineComponent<{
     items: import("vue").Ref<import("../../manager/collectionManager/collectionComponentClass.js", { with: { "resolution-mode": "import" } }).CollectionComponentListItem[]>;
     draggable: import("vue").Ref<boolean>;
     actions: import("vue").ComputedRef<import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[]>;
-    move({ item, targetIndex }: {
-        item: any;
-        targetIndex: any;
-    }): void;
+    move(event: any): void;
     durationRule: typeof durationRule;
     showDuration(index: any): boolean;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

package/src/components/flight/VcsFlightEditor.vue

@@ -45,6 +45,7 @@
         default: () => {},
       },
     },
+    emits: ['close'],
     setup(props, { emit }) {
       const flightInstance = props.getFlightInstance();
       let cancel = false;

package/src/components/flight/VcsFlightEditor.vue.d.ts

@@ -15,7 +15,7 @@ declare const _default: import("vue").DefineComponent<{
     apply(): Promise<void>;
     cancel(): Promise<void>;
     reset(): Promise<void>;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     getFlightInstance: {
         type: FunctionConstructor;
         required: true;
@@ -28,7 +28,9 @@ declare const _default: import("vue").DefineComponent<{
         type: FunctionConstructor;
         default: () => void;
     };
-}>>, {
+}>> & {
+    onClose?: ((...args: any[]) => any) | undefined;
+}, {
     resetFlightInstance: Function;
 }, {}>;
 export default _default;

package/src/components/flight/VcsFlightPlayer.vue

@@ -5,7 +5,7 @@
       v-if="clock"
       type="number"
       :model-value="clock.currentTime"
-      @update:modelValue="setTime"
+      @update:model-value="setTime"
       :step="0"
       :min="clock.startTime"
       :max="clock.endTime"

package/src/components/form-inputs-controls/VcsCheckbox.vue

@@ -38,28 +38,6 @@
     ></v-tooltip>
   </v-checkbox>
 </template>
-<style lang="scss" scoped>
-  :deep(.v-icon--size-default) {
-    font-size: calc(var(--v-vcs-font-size) * (1.2 + 0.1 / 3));
-  }
-  .v-input--density-compact :deep(.v-selection-control) {
-    --v-selection-control-size: calc(
-      var(--v-vcs-font-size) * (1.2 + 0.1 / 3) + 4
-    );
-    --v-input-control-height: calc(var(--v-vcs-font-size) + 3px);
-  }
-  :deep(.v-input__control) {
-    height: calc(var(--v-vcs-font-size) * 2 - 2px);
-  }
-  // remove ripple effect
-  :deep(.v-selection-control__input::before) {
-    background-color: transparent;
-  }
-  // remove details
-  :deep(.v-input__details) {
-    display: none;
-  }
-</style>
 <script>
   import { ref } from 'vue';
   import { VCheckbox, VTooltip } from 'vuetify/components';
@@ -75,11 +53,11 @@
    */
   export default {
     name: 'VcsCheckbox',
-    inheritAttrs: true,
     components: {
       VTooltip,
       VCheckbox,
     },
+    inheritAttrs: true,
     props: {
       tooltip: {
         type: String,
@@ -108,3 +86,25 @@
     },
   };
 </script>
+<style lang="scss" scoped>
+  :deep(.v-icon--size-default) {
+    font-size: calc(var(--v-vcs-font-size) * (1.2 + 0.1 / 3));
+  }
+  .v-input--density-compact :deep(.v-selection-control) {
+    --v-selection-control-size: calc(
+      var(--v-vcs-font-size) * (1.2 + 0.1 / 3) + 4
+    );
+    --v-input-control-height: calc(var(--v-vcs-font-size) + 3px);
+  }
+  :deep(.v-input__control) {
+    height: calc(var(--v-vcs-font-size) * 2 - 2px);
+  }
+  // remove ripple effect
+  :deep(.v-selection-control__input::before) {
+    background-color: transparent;
+  }
+  // remove details
+  :deep(.v-input__details) {
+    display: none;
+  }
+</style>

package/src/components/form-inputs-controls/VcsChipArrayInput.vue

@@ -85,26 +85,6 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
-  .hide-scrollbar {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
-  .hide-scrollbar::-webkit-scrollbar {
-    display: none;
-  }
-  .v-chip.v-chip--size-small {
-    --v-chip-height: calc(var(--v-vcs-font-size) * 2 - 2px);
-    padding: 0 calc(var(--v-vcs-font-size) - 3px);
-  }
-  :deep(.v-icon--size-x-small) {
-    font-size: calc(var(--v-vcs-font-size) + 3px);
-  }
-  .row-gap {
-    row-gap: 8px !important;
-  }
-</style>
-
 <script>
   import { computed, nextTick, onMounted, ref, shallowRef, watch } from 'vue';
   import { VChip, VIcon } from 'vuetify/components';
@@ -296,3 +276,23 @@
     },
   };
 </script>
+
+<style lang="scss" scoped>
+  .hide-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+  .hide-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  .v-chip.v-chip--size-small {
+    --v-chip-height: calc(var(--v-vcs-font-size) * 2 - 2px);
+    padding: 0 calc(var(--v-vcs-font-size) - 3px);
+  }
+  :deep(.v-icon--size-x-small) {
+    font-size: calc(var(--v-vcs-font-size) + 3px);
+  }
+  .row-gap {
+    row-gap: 8px !important;
+  }
+</style>

package/src/components/form-inputs-controls/VcsCoordinate.vue

@@ -32,8 +32,6 @@
   </v-row>
 </template>
 
-<style lang="scss" scoped></style>
-
 <script>
   import { computed } from 'vue';
   import { VRow, VCol } from 'vuetify/components';
@@ -83,12 +81,12 @@
    */
   export default {
     name: 'VcsCoordinate',
-    inheritAttrs: false,
     components: {
       VRow,
       VCol,
       VcsTextField,
     },
+    inheritAttrs: false,
     props: {
       modelValue: {
         type: Array,
@@ -152,3 +150,5 @@
     },
   };
 </script>
+
+<style lang="scss" scoped></style>

package/src/components/form-inputs-controls/VcsDatePicker.vue

@@ -30,7 +30,6 @@
     </v-menu>
   </VcsTextField>
 </template>
-<style lang="scss" scoped></style>
 <script>
   import { computed, ref, watch } from 'vue';
   import { VMenu, VDatePicker, VBtn } from 'vuetify/components';
@@ -45,6 +44,12 @@
    */
   export default {
     name: 'VcsDatePicker',
+    components: {
+      VMenu,
+      VcsTextField,
+      VDatePicker,
+      VBtn,
+    },
     props: {
       modelValue: {
         type: Date,
@@ -59,12 +64,6 @@
         default: () => ({}),
       },
     },
-    components: {
-      VMenu,
-      VcsTextField,
-      VDatePicker,
-      VBtn,
-    },
     emits: ['update:modelValue'],
     setup(props, { emit }) {
       const i18n = useI18n();
@@ -121,3 +120,4 @@
     },
   };
 </script>
+<style lang="scss" scoped></style>