@vcmap/ui 6.1.0-rc.1 → 6.1.0-rc.3

package/src/application/VcsNavbar.vue

@@ -14,7 +14,7 @@
             <div class="d-flex">
               <VcsActionButtonList
                 :actions="mapActions"
-                :overflow-count="3"
+                :overflow-count="smAndDown ? 2 : 3"
                 :force-overflow="false"
                 button="VcsToolButton"
               />
@@ -29,7 +29,7 @@
               />
               <VcsActionButtonList
                 :actions="contentActions"
-                :overflow-count="xs ? 3 : 4"
+                :overflow-count="smAndDown ? 2 : 3"
                 :force-overflow="false"
                 button="VcsToolButton"
               />
@@ -41,8 +41,9 @@
               />
               <VcsActionButtonList
                 :actions="toolActions"
+                :overflow-count="smAndDown ? 1 : 2"
                 :force-overflow="false"
-                v-if="mdAndUp"
+                v-if="smAndUp"
                 button="VcsToolButton"
               />
             </div>
@@ -50,7 +51,7 @@
         </v-col>
         <v-col class="d-flex justify-center flex-grow-2 mx-2">
           <div class="d-flex align-center">
-            <template v-if="!xs">
+            <template v-if="!smAndDown">
               <img class="logo" :src="logo" draggable="false" alt="Logo" />
             </template>
             <div
@@ -63,10 +64,11 @@
           </div>
         </v-col>
         <v-col class="align-content-end d-flex justify-end">
-          <v-toolbar-items v-if="mdAndUp">
+          <v-toolbar-items v-if="smAndUp">
             <div class="d-flex">
               <VcsActionButtonList
                 :actions="projectActions"
+                :overflow-count="smAndDown ? 1 : 2"
                 :force-overflow="false"
                 button="VcsToolButton"
               />
@@ -206,7 +208,7 @@
         destroySearchAction();
       });
 
-      const { xs, mdAndUp } = useDisplay();
+      const { xs, mdAndUp, smAndDown, smAndUp } = useDisplay();
 
       const density = computed(() => {
         return xs.value ? 'comfortable' : 'compact';
@@ -228,8 +230,10 @@
         config: app.uiConfig.config,
         logo,
         xs,
+        smAndDown,
         density,
         mdAndUp,
+        smAndUp,
         toolbarHeight,
       };
     },

package/src/application/VcsNavbar.vue.d.ts

@@ -42,8 +42,10 @@ declare const _default: import("vue").DefineComponent<{}, {
     config: any;
     logo: import("vue").ComputedRef<any>;
     xs: import("vue").Ref<boolean>;
+    smAndDown: import("vue").Ref<boolean>;
     density: import("vue").ComputedRef<"compact" | "comfortable">;
     mdAndUp: import("vue").Ref<boolean>;
+    smAndUp: import("vue").Ref<boolean>;
     toolbarHeight: import("vue").ComputedRef<number>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/application/VcsObliqueFooter.vue

@@ -17,8 +17,12 @@
 
 <script>
   import { computed, inject, onUnmounted, shallowRef } from 'vue';
-  import { ObliqueMap, ObliqueViewDirection } from '@vcmap/core';
-  import { renderTemplate } from '../components/form-output/markdownHelper.js';
+  import {
+    ObliqueMap,
+    ObliqueViewDirection,
+    renderTemplate,
+  } from '@vcmap/core';
+  import { parseAndSanitizeMarkdown } from '../components/form-output/markdownHelper.js';
 
   const i18nViewDirection = {
     [ObliqueViewDirection.NORTH]: 'footer.oblique.north',
@@ -95,7 +99,9 @@
             app.uiConfig.config.obliqueFooterTemplate ??
             'footer.oblique.template';
           return renderTemplate(
-            app.vueI18n.te(template) ? app.vueI18n.tm(template) : template,
+            parseAndSanitizeMarkdown(
+              app.vueI18n.te(template) ? app.vueI18n.tm(template) : template,
+            ),
             getTranslatedImageInfo(currentImage.value),
           );
         }

package/src/application/VcsSplashScreen.vue

@@ -25,6 +25,13 @@
             />
           </template>
         </VcsCheckbox>
+        <VcsCheckbox v-if="options.enableDontShowAgain" v-model="dontShowAgain">
+          <template #label>
+            <div class="pl-2">
+              {{ $t('components.splashScreen.dontShowAgain') }}
+            </div>
+          </template>
+        </VcsCheckbox>
       </v-card-text>
 
       <v-card-actions>
@@ -33,6 +40,11 @@
             v-if="
               options.secondaryButtonTitle && options.secondaryCallbackOptions
             "
+            :disabled="
+              option.requireInputForSecondary &&
+              options.acceptInput &&
+              !checkBox
+            "
             @click="secondaryButtonClicked"
           >
             {{ $st(options.secondaryButtonTitle) }}
@@ -55,11 +67,27 @@
 <script>
   import { VDialog, VCard, VCardText, VCardActions } from 'vuetify/components';
   import { computed, ref, inject } from 'vue';
+  import { moduleIdSymbol } from '@vcmap/core';
+  import { v5 as uuidv5 } from 'uuid';
+  import { hideSplashScreenKey, setToLocalStorage } from '../localStorage.js';
   import { executeCallbacks } from '../callback/vcsCallback.js';
   import VcsFormButton from '../components/buttons/VcsFormButton.vue';
   import VcsCheckbox from '../components/form-inputs-controls/VcsCheckbox.vue';
   import VcsMarkdown from '../components/form-output/VcsMarkdown.vue';
   import { useProxiedAtomicModel } from '../components/modelHelper.js';
+  import { name } from '../../package.json';
+
+  /**
+   * @param {import("@vcmap/ui").VcsUiApp} app
+   * @returns {Promise<string>} The hash of the SplashScreen config.
+   */
+  export function getSplashScreenHash(app) {
+    const config = app.uiConfig.getByKey('splashScreen');
+    const string = JSON.stringify(
+      Object.entries(config.value).sort((a, b) => a[0].localeCompare(b[0])),
+    );
+    return uuidv5(string, uuidv5.URL);
+  }
 
   export default {
     name: 'VcsSplashScreen',
@@ -87,9 +115,17 @@
       const localValue = useProxiedAtomicModel(props, 'modelValue', emit);
 
       const checkBox = ref(false);
+      const dontShowAgain = ref(false);
+
       function exitScreen() {
         localValue.value = false;
         checkBox.value = false;
+        if (dontShowAgain.value) {
+          const config = app.uiConfig.getByKey('splashScreen');
+          const hash = getSplashScreenHash(app);
+          const moduleId = config[moduleIdSymbol];
+          setToLocalStorage(`${name}_${moduleId}`, hideSplashScreenKey, hash);
+        }
         if (Array.isArray(props.options.exitCallbackOptions)) {
           executeCallbacks(app, props.options.exitCallbackOptions);
         }
@@ -113,6 +149,7 @@
         exitScreen,
         secondaryButtonClicked,
         checkBox,
+        dontShowAgain,
         position,
       };
     },

package/src/application/VcsSplashScreen.vue.d.ts

@@ -1,3 +1,8 @@
+/**
+ * @param {import("@vcmap/ui").VcsUiApp} app
+ * @returns {Promise<string>} The hash of the SplashScreen config.
+ */
+export function getSplashScreenHash(app: import("@vcmap/ui").VcsUiApp): Promise<string>;
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: BooleanConstructor;
@@ -12,6 +17,7 @@ declare const _default: import("vue").DefineComponent<{
     exitScreen: () => void;
     secondaryButtonClicked: () => void;
     checkBox: import("vue").Ref<boolean>;
+    dontShowAgain: import("vue").Ref<boolean>;
     position: import("vue").ComputedRef<{
         width: any;
         height: any;

package/src/application/positionDisplayInteraction.js

@@ -55,7 +55,7 @@ class PositionDisplayInteraction extends AbstractInteraction {
    * @returns {Promise<import("@vcmap/core").InteractionEvent>}
    */
   pipe(event) {
-    if (!event.position.every((pos) => pos === 0)) {
+    if (event.position && !event.position.every((pos) => pos === 0)) {
       this.position.value = [...event.position];
     }
     return Promise.resolve(event);

package/src/callback/activateClippingPolygonCallback.d.ts

@@ -0,0 +1,29 @@
+export default ActivateClippingPolygonCallback;
+export type ActivateClippingPolygonOptions = import("./vcsCallback.js").VcsCallbackOptions & {
+    names: string[];
+};
+/**
+ * @typedef {import("./vcsCallback.js").VcsCallbackOptions & { names: string[] }} ActivateClippingPolygonOptions
+ * @property {string[]} names - names of the ClippingPolygonObjects to activate
+ */
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+declare class ActivateClippingPolygonCallback extends VcsCallback {
+    /**
+     * @param {ActivateClippingPolygonOptions} options
+     * @param {import("@src/vcsUiApp.js").default} app
+     */
+    constructor(options: ActivateClippingPolygonOptions, app: import("@src/vcsUiApp.js").default);
+    /**
+     * @type {string[]}
+     * @private
+     */
+    private _names;
+    /**
+     * @returns {ActivateClippingPolygonOptions}
+     */
+    toJSON(): ActivateClippingPolygonOptions;
+}
+import VcsCallback from './vcsCallback.js';

package/src/callback/activateClippingPolygonCallback.js

@@ -0,0 +1,54 @@
+import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
+
+/**
+ * @typedef {import("./vcsCallback.js").VcsCallbackOptions & { names: string[] }} ActivateClippingPolygonOptions
+ * @property {string[]} names - names of the ClippingPolygonObjects to activate
+ */
+
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+class ActivateClippingPolygonCallback extends VcsCallback {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'ActivateClippingPolygonCallback';
+  }
+
+  /**
+   * @param {ActivateClippingPolygonOptions} options
+   * @param {import("@src/vcsUiApp.js").default} app
+   */
+  constructor(options, app) {
+    super(options, app);
+    /**
+     * @type {string[]}
+     * @private
+     */
+    this._names = options.names;
+  }
+
+  callback() {
+    this._names
+      .map((n) => this._app.clippingPolygons.getByKey(n))
+      .filter((l) => l)
+      .forEach((l) => l.activate());
+  }
+
+  /**
+   * @returns {ActivateClippingPolygonOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    config.names = this._names.slice();
+    return config;
+  }
+}
+
+export default ActivateClippingPolygonCallback;
+callbackClassRegistry.registerClass(
+  ActivateClippingPolygonCallback.className,
+  ActivateClippingPolygonCallback,
+);

package/src/callback/closeSplashScreenCallback.d.ts

@@ -0,0 +1,8 @@
+export default CloseSplashScreenCallback;
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+declare class CloseSplashScreenCallback extends VcsCallback {
+}
+import VcsCallback from './vcsCallback.js';

package/src/callback/closeSplashScreenCallback.js

@@ -0,0 +1,33 @@
+import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
+
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+class CloseSplashScreenCallback extends VcsCallback {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'CloseSplashScreenCallback';
+  }
+
+  callback() {
+    this._app.uiConfig.showSplashScreen = false;
+  }
+
+  /**
+   * @returns {import('./vcsCallback.js').VcsCallbackOptions}
+   */
+  toJSON() {
+    return super.toJSON();
+  }
+}
+
+export default CloseSplashScreenCallback;
+
+// Register the class
+callbackClassRegistry.registerClass(
+  CloseSplashScreenCallback.className,
+  CloseSplashScreenCallback,
+);

package/src/callback/deactivateClippingPolygonCallback.d.ts

@@ -0,0 +1,29 @@
+export default DeactivateClippingPolygonCallback;
+export type DeactivateClippingPolygonOptions = import("./vcsCallback.js").VcsCallbackOptions & {
+    names: string[];
+};
+/**
+ * @typedef {import("./vcsCallback.js").VcsCallbackOptions & { names: string[] }} DeactivateClippingPolygonOptions
+ * @property {string[]} names - names of the ClippingPolygonObjects to deactivate
+ */
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+declare class DeactivateClippingPolygonCallback extends VcsCallback {
+    /**
+     * @param {DeactivateClippingPolygonOptions} options
+     * @param {import("@src/vcsUiApp.js").default} app
+     */
+    constructor(options: DeactivateClippingPolygonOptions, app: import("@src/vcsUiApp.js").default);
+    /**
+     * @type {string[]}
+     * @private
+     */
+    private _names;
+    /**
+     * @returns {DeactivateClippingPolygonOptions}
+     */
+    toJSON(): DeactivateClippingPolygonOptions;
+}
+import VcsCallback from './vcsCallback.js';

package/src/callback/deactivateClippingPolygonCallback.js

@@ -0,0 +1,54 @@
+import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
+
+/**
+ * @typedef {import("./vcsCallback.js").VcsCallbackOptions & { names: string[] }} DeactivateClippingPolygonOptions
+ * @property {string[]} names - names of the ClippingPolygonObjects to deactivate
+ */
+
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+class DeactivateClippingPolygonCallback extends VcsCallback {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'DeactivateClippingPolygonCallback';
+  }
+
+  /**
+   * @param {DeactivateClippingPolygonOptions} options
+   * @param {import("@src/vcsUiApp.js").default} app
+   */
+  constructor(options, app) {
+    super(options, app);
+    /**
+     * @type {string[]}
+     * @private
+     */
+    this._names = options.names;
+  }
+
+  callback() {
+    this._names
+      .map((n) => this._app.clippingPolygons.getByKey(n))
+      .filter((l) => l)
+      .forEach((l) => l.deactivate());
+  }
+
+  /**
+   * @returns {DeactivateClippingPolygonOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    config.names = this._names.slice();
+    return config;
+  }
+}
+
+export default DeactivateClippingPolygonCallback;
+callbackClassRegistry.registerClass(
+  DeactivateClippingPolygonCallback.className,
+  DeactivateClippingPolygonCallback,
+);

package/src/callback/openSplashScreenCallback.d.ts

@@ -0,0 +1,8 @@
+export default OpenSplashScreenCallback;
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+declare class OpenSplashScreenCallback extends VcsCallback {
+}
+import VcsCallback from './vcsCallback.js';

package/src/callback/openSplashScreenCallback.js

@@ -0,0 +1,35 @@
+import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
+
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+class OpenSplashScreenCallback extends VcsCallback {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'OpenSplashScreenCallback';
+  }
+
+  callback() {
+    if (this._app.uiConfig.getByKey('splashScreen')) {
+      this._app.uiConfig.showSplashScreen = true;
+    }
+  }
+
+  /**
+   * @returns {import('./vcsCallback.js').VcsCallbackOptions}
+   */
+  toJSON() {
+    return super.toJSON();
+  }
+}
+
+export default OpenSplashScreenCallback;
+
+// Register the class
+callbackClassRegistry.registerClass(
+  OpenSplashScreenCallback.className,
+  OpenSplashScreenCallback,
+);

package/src/callback/toggleNavbarButtonCallback.d.ts

@@ -0,0 +1,36 @@
+export default ToggleNavbarButtonCallback;
+export type ToggleNavbarButtonOptions = import("./vcsCallback.js").VcsCallbackOptions & {
+    buttonId: string;
+    activeState?: boolean;
+};
+/**
+ * @typedef {import("./vcsCallback.js").VcsCallbackOptions & { buttonId: string, activeState?:boolean }} ToggleNavbarButtonOptions
+ * @property {string} buttonId - id of the Navbar button
+ * @property {boolean} [activeState] - state to be applied to the button
+ */
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+declare class ToggleNavbarButtonCallback extends VcsCallback {
+    /**
+     * @param {ToggleNavbarButtonOptions} options
+     * @param {import("@src/vcsUiApp.js").default} app
+     */
+    constructor(options: ToggleNavbarButtonOptions, app: import("@src/vcsUiApp.js").default);
+    /**
+     * @type {string}
+     * @private
+     */
+    private _buttonId;
+    /**
+     * @type {boolean|undefined}
+     * @private
+     */
+    private _activeState;
+    /**
+     * @returns {ToggleNavbarButtonOptions}
+     */
+    toJSON(): ToggleNavbarButtonOptions;
+}
+import VcsCallback from './vcsCallback.js';

package/src/callback/toggleNavbarButtonCallback.js

@@ -0,0 +1,62 @@
+import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
+
+/**
+ * @typedef {import("./vcsCallback.js").VcsCallbackOptions & { buttonId: string, activeState?:boolean }} ToggleNavbarButtonOptions
+ * @property {string} buttonId - id of the Navbar button
+ * @property {boolean} [activeState] - state to be applied to the button
+ */
+
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+class ToggleNavbarButtonCallback extends VcsCallback {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'ToggleNavbarButtonCallback';
+  }
+
+  /**
+   * @param {ToggleNavbarButtonOptions} options
+   * @param {import("@src/vcsUiApp.js").default} app
+   */
+  constructor(options, app) {
+    super(options, app);
+    /**
+     * @type {string}
+     * @private
+     */
+    this._buttonId = options.buttonId;
+    /**
+     * @type {boolean|undefined}
+     * @private
+     */
+    this._activeState = options.activeState;
+  }
+
+  callback() {
+    this._app.navbarManager.toggle(this._buttonId, this._activeState);
+  }
+
+  /**
+   * @returns {ToggleNavbarButtonOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    config.buttonId = this._buttonId;
+    if (this._activeState) {
+      config.activeState = this._activeState;
+    }
+    return config;
+  }
+}
+
+export default ToggleNavbarButtonCallback;
+
+// Register the class
+callbackClassRegistry.registerClass(
+  ToggleNavbarButtonCallback.className,
+  ToggleNavbarButtonCallback,
+);

package/src/components/buttons/VcsActionButtonList.vue

@@ -38,12 +38,14 @@
       </template>
       <VcsActionList :actions="overflowButtons" :disabled="disabled" />
     </v-menu>
-    <v-spacer
-      v-else-if="blockOverflow"
-      class="flex-grow-0 d-inline-block px-2"
-    />
+    <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';

package/src/components/buttons/VcsToolButton.vue

@@ -82,7 +82,6 @@
    * @vue-prop {string}                                 icon - When given, will display an icon in the button. Replaces vuetify icon property.
    * @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 the tooltip {@link https://vuetifyjs.com/en/api/v-tooltip/#props|vuetify v-tooltip}
    * @vue-computed {string}                             appliedColor - color applied to button, depending on size and state
    * @vue-computed {boolean}                            hasDefaultSlot
    */

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

@@ -18,7 +18,8 @@
         v-model="localValue"
         hide-header
         @update:model-value="menuOpen = false"
-        color="primary"
+        :color="datePickerProps.color ?? 'primary'"
+        v-bind="{ ...datePickerProps }"
       >
         <template #actions>
           <v-btn color="primary" @click="goToToday">
@@ -40,6 +41,7 @@
    * @description stylized wrapper around {@link https://vuetifyjs.com/en/components/date-pickers/#internationalization}.
    * @vue-prop {Date} modelValue - value of the date picker as a Date (changes to the Date Object are not tracked, handled as atomic value)
    * @vue-prop {string} [icon] - specify optional prepend icon, defaults to mdi-calendar
+   * @vue-prop {Object} [datePickerProps] - props that are passed to the {@link https://vuetifyjs.com/en/api/v-date-picker/ | VDatePicker}
    */
   export default {
     name: 'VcsDatePicker',
@@ -52,6 +54,10 @@
         type: String,
         default: 'mdi-calendar',
       },
+      datePickerProps: {
+        type: Object,
+        default: () => ({}),
+      },
     },
     components: {
       VMenu,

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

@@ -7,6 +7,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    datePickerProps: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
 }, {
     formattedDate: import("vue").WritableComputedRef<string>;
     localValue: import("vue").WritableComputedRef<Date>;
@@ -22,10 +26,15 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    datePickerProps: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     icon: string;
     modelValue: Date;
+    datePickerProps: Record<string, any>;
 }, {}>;
 export default _default;

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

@@ -52,7 +52,7 @@
           <template #prepend="prependScope" v-if="multiple">
             <VcsCheckbox
               v-model="prependScope.isSelected"
-              class="py-0"
+              class="py-0 pr-1"
             ></VcsCheckbox>
           </template>
         </v-list-item>