@vcmap/ui 5.0.1 → 5.1.0-rc.1

package/src/application/positionDisplayInteraction.js

@@ -0,0 +1,65 @@
+import { AbstractInteraction, EventType } from '@vcmap/core';
+import { parseBoolean } from '@vcsuite/parsers';
+import { check } from '@vcsuite/check';
+
+/**
+ * @typedef {Object} PositionDisplayInteractionOptions
+ * @property {import("vue").Ref<import("ol/coordinate.js").Coordinate>} position
+ * @property {?boolean} move - whether to be active on move or not
+ */
+
+/**
+ * @class
+ * @extends {import("@vcmap/core").AbstractInteraction}
+ */
+class PositionDisplayInteraction extends AbstractInteraction {
+  /**
+   * @param {PositionDisplayInteractionOptions} options
+   */
+  constructor(options) {
+    super();
+    /**
+     * @type {import("vue").Ref<import("ol/coordinate.js").Coordinate>}
+     */
+    this.position = options.position;
+    /**
+     * @type {boolean}
+     */
+    this._move = parseBoolean(options.move, false);
+
+    this._defaultActive = this._move
+      ? EventType.CLICK | EventType.MOVE
+      : EventType.CLICK;
+    this.setActive();
+  }
+
+  get move() {
+    return this._move;
+  }
+
+  /**
+   * @param {boolean} move
+   */
+  setMove(move) {
+    check(move, Boolean);
+
+    this._move = move;
+    this._defaultActive = this._move
+      ? EventType.CLICK | EventType.MOVE
+      : EventType.CLICK;
+    this.setActive();
+  }
+
+  /**
+   * @param {import("@vcmap/core").InteractionEvent} event
+   * @returns {Promise<import("@vcmap/core").InteractionEvent>}
+   */
+  pipe(event) {
+    if (!event.position.every((pos) => pos === 0)) {
+      this.position.value = [...event.position];
+    }
+    return Promise.resolve(event);
+  }
+}
+
+export default PositionDisplayInteraction;

package/src/callback/activateLayersCallback.d.ts

@@ -0,0 +1,29 @@
+export default ActivateLayersCallback;
+export type ActivateLayersOptions = import("./vcsCallback.js").VcsCallbackOptions & {
+    layerNames: string[];
+};
+/**
+ * @typedef {import("./vcsCallback.js").VcsCallbackOptions & { layerNames: string[] }} ActivateLayersOptions
+ * @property {Array<string>} layerNames - layer names to activate
+ */
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+declare class ActivateLayersCallback extends VcsCallback {
+    /**
+     * @param {ActivateLayersOptions} options
+     * @param {import("@src/vcsUiApp.js").default} app
+     */
+    constructor(options: ActivateLayersOptions, app: import("@src/vcsUiApp.js").default);
+    /**
+     * @type {Array<string>}
+     * @private
+     */
+    private _layerNames;
+    /**
+     * @returns {ActivateLayersOptions}
+     */
+    toJSON(): ActivateLayersOptions;
+}
+import VcsCallback from './vcsCallback.js';

package/src/callback/activateLayersCallback.js

@@ -1,7 +1,7 @@
 import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
 
 /**
- * @typedef {VcsCallbackOptions} ActivateLayersOptions
+ * @typedef {import("./vcsCallback.js").VcsCallbackOptions & { layerNames: string[] }} ActivateLayersOptions
  * @property {Array<string>} layerNames - layer names to activate
  */
 
@@ -19,7 +19,7 @@ class ActivateLayersCallback extends VcsCallback {
 
   /**
    * @param {ActivateLayersOptions} options
-   * @param {VcsUiApp} app
+   * @param {import("@src/vcsUiApp.js").default} app
    */
   constructor(options, app) {
     super(options, app);

package/src/callback/applyLayerStyleCallback.d.ts

@@ -0,0 +1,36 @@
+export default ApplyLayerStyleCallback;
+export type ApplyLayerStyleOptions = import("./vcsCallback.js").VcsCallbackOptions & {
+    styleName: string;
+    layerName: string;
+};
+/**
+ * @typedef {import("./vcsCallback.js").VcsCallbackOptions & { styleName: string, layerName: string }} ApplyLayerStyleOptions
+ * @property {string} styleName - name of the style
+ * @property {string} layerName - name of the layer to apply the style
+ */
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+declare class ApplyLayerStyleCallback extends VcsCallback {
+    /**
+     * @param {ApplyLayerStyleOptions} options
+     * @param {import("@src/vcsUiApp.js").default} app
+     */
+    constructor(options: ApplyLayerStyleOptions, app: import("@src/vcsUiApp.js").default);
+    /**
+     * @type {string}
+     * @private
+     */
+    private _styleName;
+    /**
+     * @type {string}
+     * @private
+     */
+    private _layerName;
+    /**
+     * @returns {ApplyLayerStyleOptions}
+     */
+    toJSON(): ApplyLayerStyleOptions;
+}
+import VcsCallback from './vcsCallback.js';

package/src/callback/applyLayerStyleCallback.js

@@ -2,7 +2,7 @@ import { FeatureLayer } from '@vcmap/core';
 import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
 
 /**
- * @typedef {VcsCallbackOptions} ApplyLayerStyleOptions
+ * @typedef {import("./vcsCallback.js").VcsCallbackOptions & { styleName: string, layerName: string }} ApplyLayerStyleOptions
  * @property {string} styleName - name of the style
  * @property {string} layerName - name of the layer to apply the style
  */
@@ -21,7 +21,7 @@ class ApplyLayerStyleCallback extends VcsCallback {
 
   /**
    * @param {ApplyLayerStyleOptions} options
-   * @param {VcsUiApp} app
+   * @param {import("@src/vcsUiApp.js").default} app
    */
   constructor(options, app) {
     super(options, app);

package/src/callback/deactivateLayersCallback.d.ts

@@ -0,0 +1,29 @@
+export default DeactivateLayersCallback;
+export type DeactivateLayersOptions = import("./vcsCallback.js").VcsCallbackOptions & {
+    layerNames: string[];
+};
+/**
+ * @typedef {import("./vcsCallback.js").VcsCallbackOptions & { layerNames: string[] }} DeactivateLayersOptions
+ * @property {Array<string>} layerNames - layer names to deactivate
+ */
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+declare class DeactivateLayersCallback extends VcsCallback {
+    /**
+     * @param {DeactivateLayersOptions} options
+     * @param {import("@src/vcsUiApp.js").default} app
+     */
+    constructor(options: DeactivateLayersOptions, app: import("@src/vcsUiApp.js").default);
+    /**
+     * @type {Array<string>}
+     * @private
+     */
+    private _layerNames;
+    /**
+     * @returns {DeactivateLayersOptions}
+     */
+    toJSON(): DeactivateLayersOptions;
+}
+import VcsCallback from './vcsCallback.js';

package/src/callback/deactivateLayersCallback.js

@@ -1,7 +1,7 @@
 import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
 
 /**
- * @typedef {VcsCallbackOptions} DeactivateLayersOptions
+ * @typedef {import("./vcsCallback.js").VcsCallbackOptions & { layerNames: string[] }} DeactivateLayersOptions
  * @property {Array<string>} layerNames - layer names to deactivate
  */
 
@@ -19,7 +19,7 @@ class DeactivateLayersCallback extends VcsCallback {
 
   /**
    * @param {DeactivateLayersOptions} options
-   * @param {VcsUiApp} app
+   * @param {import("@src/vcsUiApp.js").default} app
    */
   constructor(options, app) {
     super(options, app);

package/src/callback/goToViewpointCallback.d.ts

@@ -0,0 +1,29 @@
+export default GoToViewpointCallback;
+export type GoToViewpointOptions = import("./vcsCallback.js").VcsCallbackOptions & {
+    viewpoint: string;
+};
+/**
+ * @typedef {import("./vcsCallback.js").VcsCallbackOptions & { viewpoint: string }} GoToViewpointOptions
+ * @property {string} viewpoint - name of the viewpoint
+ */
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+declare class GoToViewpointCallback extends VcsCallback {
+    /**
+     * @param {GoToViewpointOptions} options
+     * @param {import("@src/vcsUiApp.js").default} app
+     */
+    constructor(options: GoToViewpointOptions, app: import("@src/vcsUiApp.js").default);
+    /**
+     * @type {string}
+     * @private
+     */
+    private _viewpoint;
+    /**
+     * @returns {GoToViewpointOptions}
+     */
+    toJSON(): GoToViewpointOptions;
+}
+import VcsCallback from './vcsCallback.js';

package/src/callback/goToViewpointCallback.js

@@ -1,7 +1,7 @@
 import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
 
 /**
- * @typedef {VcsCallbackOptions} GoToViewpointOptions
+ * @typedef {import("./vcsCallback.js").VcsCallbackOptions & { viewpoint: string }} GoToViewpointOptions
  * @property {string} viewpoint - name of the viewpoint
  */
 
@@ -19,7 +19,7 @@ class GoToViewpointCallback extends VcsCallback {
 
   /**
    * @param {GoToViewpointOptions} options
-   * @param {VcsUiApp} app
+   * @param {import("@src/vcsUiApp.js").default} app
    */
   constructor(options, app) {
     super(options, app);

package/src/callback/vcsCallback.d.ts

@@ -0,0 +1,44 @@
+/**
+ * creates instances of VcsCallback classes and executes its callback function
+ * @param {import("@src/vcsUiApp.js").default} app
+ * @param {Array<VcsCallbackOptions>} vcsCallbackOptions
+ */
+export function executeCallbacks(app: import("@src/vcsUiApp.js").default, vcsCallbackOptions: Array<VcsCallbackOptions>): void;
+/**
+ * @type {ClassRegistry<import("@vcmap/core").Ctor<typeof VcsCallback>>}
+ */
+export const callbackClassRegistry: ClassRegistry<import("@vcmap/core").Ctor<typeof VcsCallback>>;
+export default VcsCallback;
+export type VcsCallbackOptions = {
+    type: string;
+};
+import { ClassRegistry } from '@vcmap/core';
+/**
+ * @typedef {Object} VcsCallbackOptions
+ * @property {string} type
+ */
+/**
+ * @class
+ * @abstract
+ */
+declare class VcsCallback {
+    /**
+     * @type {string}
+     */
+    static get className(): string;
+    /**
+     * @param {VcsCallbackOptions} options
+     * @param {import("@src/vcsUiApp.js").default} app
+     */
+    constructor(options: VcsCallbackOptions, app: import("@src/vcsUiApp.js").default);
+    /**
+     * @protected
+     * @type {import("@src/vcsUiApp.js").default}
+     */
+    protected _app: import("@src/vcsUiApp.js").default;
+    callback(): void;
+    /**
+     * @returns {VcsCallbackOptions}
+     */
+    toJSON(): VcsCallbackOptions;
+}

package/src/callback/vcsCallback.js

@@ -1,13 +1,13 @@
 import { ClassRegistry } from '@vcmap/core';
 
 /**
- * @type {ClassRegistry<VcsCallback>}
+ * @type {ClassRegistry<import("@vcmap/core").Ctor<typeof VcsCallback>>}
  */
 export const callbackClassRegistry = new ClassRegistry();
 
 /**
  * creates instances of VcsCallback classes and executes its callback function
- * @param {VcsUiApp} app
+ * @param {import("@src/vcsUiApp.js").default} app
  * @param {Array<VcsCallbackOptions>} vcsCallbackOptions
  */
 export function executeCallbacks(app, vcsCallbackOptions) {
@@ -21,11 +21,6 @@ export function executeCallbacks(app, vcsCallbackOptions) {
  * @property {string} type
  */
 
-/**
- * @typedef {Object} VcsCallback
- * @property {function():void} callback
- */
-
 /**
  * @class
  * @abstract
@@ -40,12 +35,12 @@ class VcsCallback {
 
   /**
    * @param {VcsCallbackOptions} options
-   * @param {VcsUiApp} app
+   * @param {import("@src/vcsUiApp.js").default} app
    */
   constructor(options, app) {
     /**
      * @protected
-     * @type {VcsUiApp}
+     * @type {import("@src/vcsUiApp.js").default}
      */
     this._app = app;
   }

package/src/components/ImageElementInjector.vue.d.ts

@@ -0,0 +1,24 @@
+declare const _default: import("vue").DefineComponent<{
+    element: {
+        type: ({
+            new (): HTMLCanvasElement;
+            prototype: HTMLCanvasElement;
+        } | {
+            new (): HTMLImageElement;
+            prototype: HTMLImageElement;
+        })[];
+        required: true;
+    };
+}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    element: {
+        type: ({
+            new (): HTMLCanvasElement;
+            prototype: HTMLCanvasElement;
+        } | {
+            new (): HTMLImageElement;
+            prototype: HTMLImageElement;
+        })[];
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/src/components/buttons/VcsActionButtonList.vue

@@ -1,20 +1,22 @@
 <template>
   <div v-if="actions.length > 0" :class="classes">
-    <component
-      :is="button"
-      class="d-flex"
-      v-for="(btn, index) in buttons"
-      :key="`${btn.name}-${index}`"
-      :tooltip="btn.title"
-      :icon="btn.icon"
-      :active="btn.active"
-      :disabled="btn.disabled"
-      :has-update="btn.hasUpdate"
-      :background="btn.background"
-      @click.stop="btn.callback($event)"
-      v-bind="{ ...$attrs }"
-      v-on="{ ...$listeners }"
-    />
+    <template v-if="buttons.length > 0">
+      <component
+        :is="button"
+        class="d-flex"
+        v-for="(btn, index) in buttons"
+        :key="`${btn.name}-${index}`"
+        :tooltip="btn.title"
+        :icon="btn.icon"
+        :active="btn.active"
+        :disabled="btn.disabled || disabled"
+        :has-update="btn.hasUpdate"
+        :background="btn.background"
+        @click.stop="btn.callback($event)"
+        v-bind="{ ...$attrs }"
+        v-on="{ ...$listeners }"
+      />
+    </template>
     <v-menu
       v-if="overflowButtons.length > 0"
       content-class="vcs-overflow-menu-wrap"
@@ -25,6 +27,7 @@
       <template #activator="{ on, attrs }">
         <component
           :is="button"
+          :disabled="disabled"
           v-bind="{ ...$attrs, ...attrs }"
           v-on="on"
           class="d-flex"
@@ -32,7 +35,7 @@
           <v-icon>{{ overflowIcon }}</v-icon>
         </component>
       </template>
-      <VcsActionList :actions="overflowButtons" />
+      <VcsActionList :actions="overflowButtons" :disabled="disabled" />
     </v-menu>
     <v-spacer
       v-else-if="blockOverflow"
@@ -63,6 +66,7 @@
    * @vue-prop {boolean} [blockOverflow=false] - if space for the overflow should be blocked or not (e.g. when rendering lists in a grid)
    * @vue-computed {Array<VcsAction>} buttons - buttons rendered directly, have to provide an icon
    * @vue-computed {Array<VcsAction>} overflowButtons - rest of buttons rendered in overflow
+   * @vue-prop {boolean} [disabled=false] - disable all actions
    */
   export default {
     name: 'VcsActionButtonList',
@@ -99,6 +103,10 @@
         type: Boolean,
         default: false,
       },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
     },
     computed: {
       right() {

package/src/components/buttons/VcsActionButtonList.vue.d.ts

@@ -0,0 +1,68 @@
+declare const _default: import("vue").DefineComponent<{
+    actions: {
+        type: ArrayConstructor;
+        required: true;
+        validator: typeof validateActions;
+    };
+    button: {
+        type: StringConstructor;
+        default: string;
+        validator: (type: unknown) => boolean;
+    };
+    overflowCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    overflowIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    blockOverflow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {}, {}, {
+    right(): boolean;
+    buttons(): any;
+    overflowButtons(): any;
+    classes(): string[];
+}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    actions: {
+        type: ArrayConstructor;
+        required: true;
+        validator: typeof validateActions;
+    };
+    button: {
+        type: StringConstructor;
+        default: string;
+        validator: (type: unknown) => boolean;
+    };
+    overflowCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    overflowIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    blockOverflow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    button: string;
+    disabled: boolean;
+    overflowCount: number;
+    overflowIcon: string;
+    blockOverflow: boolean;
+}>;
+export default _default;
+import { validateActions } from '../lists/VcsActionList.vue';

package/src/components/buttons/VcsButton.vue

@@ -6,6 +6,7 @@
       :color="appliedColor"
       :disabled="disabled"
       class="vcs-button pa-0"
+      :class="customClasses.join(' ')"
       :ripple="false"
       elevation="0"
       v-bind="{ ...$attrs }"
@@ -28,6 +29,7 @@
           :color="appliedColor"
           :disabled="disabled"
           class="vcs-button pa-0"
+          :class="customClasses.join(' ')"
           :ripple="false"
           elevation="0"
           v-bind="{ ...$attrs, ...attrs }"
@@ -88,6 +90,7 @@
    * @vue-prop {string}                                 tooltip - Text content of a tooltip which appears on hover with default delay.
    * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  tooltipPosition - Position of the tooltip.
    * @vue-prop {Object<string, any>}                    tooltipProps - Properties to be passed to VcsTooltip {@link https://vuetifyjs.com/en/api/v-tooltip/#props|vuetify v-tooltip}
+   * @vue-prop {string[]}                               [customClasses] - CSS classes to customize style
    * @vue-computed {string}                             appliedColor - color applied to button, depending on active state
    * @vue-computed {boolean}                            hasDefaultSlot
    * @vue-event {MouseEvent}                            click - Emits click event when the button is clicked.
@@ -134,6 +137,10 @@
         type: Object,
         default: () => ({}),
       },
+      customClasses: {
+        type: Array,
+        default: () => [],
+      },
     },
     computed: {
       appliedColor() {

package/src/components/buttons/VcsButton.vue.d.ts

@@ -0,0 +1,89 @@
+declare const _default: import("vue").DefineComponent<{
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasUpdate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+    tooltipProps: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    customClasses: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}, {}, {}, {
+    appliedColor(): any;
+    hasDefaultSlot(): boolean;
+}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasUpdate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+    tooltipProps: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    customClasses: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}>>, {
+    tooltip: string;
+    tooltipPosition: string;
+    disabled: boolean;
+    icon: string;
+    active: boolean;
+    hasUpdate: boolean;
+    color: string;
+    tooltipProps: Record<string, any>;
+    customClasses: unknown[];
+}>;
+export default _default;

package/src/components/buttons/VcsFormButton.vue

@@ -115,6 +115,7 @@
    * @vue-prop {string}                                 tooltip - Text content of a tooltip which appears on hover with default delay.
    * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  tooltipPosition - Position of the tooltip.
    * @vue-prop {Object<string, any>}                    tooltipProps - Properties to be passed to VcsTooltip {@link https://vuetifyjs.com/en/api/v-tooltip/#props|vuetify v-tooltip}
+   * @vue-prop {string[]}                               [customClasses] - CSS classes to customize style
    * @vue-computed {Object<string, string>}             classes - css classes applied to button, depending on variant
    * @vue-computed {boolean}                            hasDefaultSlot
    * @vue-event {MouseEvent}                            click - Emits click event when the button is clicked.
@@ -162,10 +163,18 @@
         type: Object,
         default: () => ({}),
       },
+      customClasses: {
+        type: Array,
+        default: () => [],
+      },
     },
     computed: {
       classes() {
         return {
+          ...this.customClasses.reduce(
+            (acc, cur) => ({ ...acc, [cur]: true }),
+            {},
+          ),
           'vcs-form-button--outlined': this.variant === 'outlined',
           'vcs-form-button--filled': this.variant === 'filled',
         };