@vcmap/ui 5.0.0-rc.23 → 5.0.0-rc.25

package/src/callback/goToViewpointCallback.js

@@ -0,0 +1,54 @@
+import VcsCallback, { callbackClassRegistry } from './vcsCallback.js';
+
+/**
+ * @typedef {VcsCallbackOptions} GoToViewpointOptions
+ * @property {string} viewpoint - name of the viewpoint
+ */
+
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+class GoToViewpointCallback extends VcsCallback {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'GoToViewpointCallback';
+  }
+
+  /**
+   * @param {GoToViewpointOptions} options
+   * @param {VcsUiApp} app
+   */
+  constructor(options, app) {
+    super(options, app);
+    /**
+     * @type {string}
+     * @private
+     */
+    this._viewpoint = options.viewpoint;
+  }
+
+  callback() {
+    const vp = this._app.viewpoints.getByKey(this._viewpoint);
+    if (this._app.maps.activeMap && vp) {
+      this._app.maps.activeMap.gotoViewpoint(vp);
+    }
+  }
+
+  /**
+   * @returns {GoToViewpointOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    config.viewpoint = this._viewpoint;
+    return config;
+  }
+}
+
+export default GoToViewpointCallback;
+callbackClassRegistry.registerClass(
+  GoToViewpointCallback.className,
+  GoToViewpointCallback,
+);

package/src/callback/vcsCallback.js

@@ -0,0 +1,66 @@
+import { ClassRegistry } from '@vcmap/core';
+
+/**
+ * @type {ClassRegistry<VcsCallback>}
+ */
+export const callbackClassRegistry = new ClassRegistry();
+
+/**
+ * creates instances of VcsCallback classes and executes its callback function
+ * @param {VcsUiApp} app
+ * @param {Array<VcsCallbackOptions>} vcsCallbackOptions
+ */
+export function executeCallbacks(app, vcsCallbackOptions) {
+  vcsCallbackOptions.forEach((options) =>
+    app.callbackClassRegistry.createFromTypeOptions(options, app)?.callback(),
+  );
+}
+
+/**
+ * @typedef {Object} VcsCallbackOptions
+ * @property {string} type
+ */
+
+/**
+ * @typedef {Object} VcsCallback
+ * @property {function():void} callback
+ */
+
+/**
+ * @class
+ * @abstract
+ */
+class VcsCallback {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'VcsCallback';
+  }
+
+  /**
+   * @param {VcsCallbackOptions} options
+   * @param {VcsUiApp} app
+   */
+  constructor(options, app) {
+    /**
+     * @protected
+     * @type {VcsUiApp}
+     */
+    this._app = app;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  callback() {}
+
+  /**
+   * @returns {VcsCallbackOptions}
+   */
+  toJSON() {
+    return {
+      type: this.constructor.className,
+    };
+  }
+}
+
+export default VcsCallback;

package/src/components/buttons/VcsActionButtonList.vue

@@ -1,15 +1,18 @@
 <template>
   <div v-if="actions.length > 0" :class="classes">
-    <VcsButton
+    <component
+      :is="button"
       class="d-flex"
-      v-for="(button, index) in buttons"
-      :key="`${button.name}-${index}`"
-      :tooltip="button.title"
-      :icon="button.icon"
-      :active="button.active"
-      @click.stop="button.callback($event)"
-      v-bind="{...$attrs}"
-      v-on="{...$listeners}"
+      v-for="(btn, index) in buttons"
+      :key="`${btn.name}-${index}`"
+      :tooltip="btn.title"
+      :icon="btn.icon"
+      :active="btn.active"
+      :disabled="btn.disabled"
+      :background="btn.background"
+      @click.stop="btn.callback($event)"
+      v-bind="{ ...$attrs }"
+      v-on="{ ...$listeners }"
     />
     <v-menu
       v-if="overflowButtons.length > 0"
@@ -19,28 +22,33 @@
       offset-x
     >
       <template #activator="{ on, attrs }">
-        <VcsButton
-          v-bind="{...$attrs, ...attrs}"
+        <component
+          :is="button"
+          v-bind="{ ...$attrs, ...attrs }"
           v-on="on"
           class="d-flex"
         >
-          <v-icon v-text="overflowIcon" />
-        </VcsButton>
+          <v-icon>{{ overflowIcon }}</v-icon>
+        </component>
       </template>
       <VcsActionList :actions="overflowButtons" />
     </v-menu>
-    <v-spacer v-else-if="blockOverflow" class="flex-grow-0 d-inline-block px-2" />
+    <v-spacer
+      v-else-if="blockOverflow"
+      class="flex-grow-0 d-inline-block px-2"
+    />
   </div>
 </template>
 <style lang="scss">
-.action-btn-wrap{
-  gap: 8px;
-}
+  .action-btn-wrap {
+    gap: 8px;
+  }
 </style>
 <script>
-
   import { VIcon, VMenu, VSpacer } from 'vuetify/lib';
   import VcsButton from './VcsButton.vue';
+  import VcsToolButton from './VcsToolButton.vue';
+  import VcsFormButton from './VcsFormButton.vue';
   import VcsActionList, { validateActions } from '../lists/VcsActionList.vue';
 
   /**
@@ -48,6 +56,7 @@
    * A component rendering a list of actions with overflow mechanic using
    * {@link VcsButton} and {@link VcsActionList}.
    * @vue-prop {Array<VcsAction>} actions - Array of actions
+   * @vue-prop {string} [button='VcsButton'] - used button type (one of 'VcsButton', 'VcsToolButton' or 'VcsFormButton)
    * @vue-prop {number} [overflowCount=2] - number of buttons rendered until overflow.
    * @vue-prop {string} [overflowIcon='$vcsKebab'] - optional custom icon for overflow button
    * @vue-prop {boolean} [blockOverflow=false] - if space for the overflow should be blocked or not (e.g. when rendering lists in a grid)
@@ -59,6 +68,8 @@
     components: {
       VcsActionList,
       VcsButton,
+      VcsToolButton,
+      VcsFormButton,
       VMenu,
       VIcon,
       VSpacer,
@@ -69,6 +80,12 @@
         required: true,
         validator: validateActions,
       },
+      button: {
+        type: String,
+        default: 'VcsButton',
+        validator: (type) =>
+          ['VcsButton', 'VcsToolButton', 'VcsFormButton'].includes(type),
+      },
       overflowCount: {
         type: Number,
         default: 2,
@@ -83,17 +100,21 @@
       },
     },
     computed: {
-      right() { return this.$attrs.right !== undefined && this.$attrs.right !== false; },
+      right() {
+        return this.$attrs.right !== undefined && this.$attrs.right !== false;
+      },
       buttons() {
-        const buttons = this.actions.filter(i => i.icon).slice(0, this.overflowCount);
+        const buttons = this.actions
+          .filter((i) => i.icon)
+          .slice(0, this.overflowCount);
         if (this.right) {
           return buttons.reverse();
         }
         return buttons;
       },
       overflowButtons() {
-        const buttonsNames = this.buttons.map(i => i.name);
-        return this.actions.filter(i => !buttonsNames.includes(i.name));
+        const buttonsNames = this.buttons.map((i) => i.name);
+        return this.actions.filter((i) => !buttonsNames.includes(i.name));
       },
       classes() {
         const classes = ['d-flex', 'align-center', 'action-btn-wrap'];

package/src/components/buttons/VcsButton.vue

@@ -1,97 +1,72 @@
 <template>
-  <div
-    class="vcs-button-wrap"
-  >
+  <div class="vcs-button-wrap">
+    <v-btn
+      v-if="!tooltip"
+      text
+      :color="appliedColor"
+      :disabled="disabled"
+      class="vcs-button pa-0"
+      :ripple="false"
+      elevation="0"
+      v-bind="{ ...$attrs }"
+      v-on="{ ...$listeners }"
+    >
+      <v-icon v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">
+        {{ icon }}
+      </v-icon>
+      <slot />
+    </v-btn>
     <VcsTooltip
+      v-else
       :tooltip="tooltip"
       :tooltip-position="tooltipPosition"
-      v-bind="{...tooltipProps}"
+      v-bind="{ ...tooltipProps }"
     >
       <template #activator="{ on, attrs }">
         <v-btn
-          :color="backgroundColor"
-          :text="isTextButton"
-          :outlined="isOutlined"
-          :class="classes"
-          :ripple="!isSmall ? { class: 'primary--text text--darken-4' } : false"
+          text
+          :color="appliedColor"
+          :disabled="disabled"
+          class="vcs-button pa-0"
+          :ripple="false"
           elevation="0"
-          v-bind="{...$attrs, ...attrs}"
-          v-on="{...$listeners, ...on}"
+          v-bind="{ ...$attrs, ...attrs }"
+          v-on="{ ...$listeners, ...on }"
         >
-          <v-icon v-if="icon" v-text="icon" :class="{ 'mr-2': hasDefaultSlot }" />
+          <v-icon v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">
+            {{ icon }}
+          </v-icon>
           <slot />
         </v-btn>
       </template>
     </VcsTooltip>
-    <VcsBadge
-      v-if="hasUpdate"
-      :color="'warning'"
-      class="position-absolute"
-    />
+    <VcsBadge v-if="hasUpdate" :color="'warning'" class="position-absolute" />
   </div>
 </template>
 
 <style lang="scss" scoped>
-  .vcs-button-wrap{
+  .vcs-button-wrap {
     position: relative;
     display: inline-block;
   }
-  .badge{
+  .badge {
     top: -3px;
     right: -3px;
   }
-  .v-btn{
-    &--outlined{
-      border: thin solid currentColor;
-    }
-    &.vcs-button{
-
-      &--standard {
-        min-width: 48px;
-        height: 32px;
-        font-size: 12px;
-        border: 1px solid transparent;
-        &:hover{
-          color: var(--v-base-lighten5) !important;
-          border-color: var(--v-primary-base);
-          background-color: var(--v-primary-base);
-        }
+  .v-btn {
+    &.vcs-button {
+      height: 16px;
+      min-width: auto;
+      &:hover {
+        color: var(--v-primary-lighten1) !important;
       }
-
-      &--small {
-        height: 16px;
-        min-width: auto;
-        &:hover{
-          color: var(--v-primary-base);
+      ::v-deep {
+        .v-icon {
+          font-size: 16px;
         }
-        &::before{
-          display: none; /*prevents unwanted mouseover effect*/
-        }
-        ::v-deep {
-          .v-icon{
-            font-size: 16px;
-          }
-
-          .v-icon__component {
-            height: 16px;
-            width: 16px;
-          }
-        }
-      }
-
-      &--large {
-        min-width: 42px;
-        height: 34px;
-        padding: 0;
-        position: relative;
-
-        &.vcs-button--active-background {
-          border: 2px solid var(--v-primary-base);
-          background-color: var(--v-base-lighten2) !important;
-        }
-
-        &.v-btn--disabled {
-          background-color: transparent !important;
+        .v-icon__component {
+          height: 16px;
+          width: 16px;
         }
       }
     }
@@ -105,22 +80,16 @@
 
   /**
    * @description a button with tooltip extending {@link https://vuetifyjs.com/en/api/v-btn/|vuetify v-btn} using {@link VcsTooltip}.
-   * @vue-prop {boolean}                                active - Whether button has background color. Applies vuetify primary color if color property is not set.
+   * @vue-prop {boolean}                                active - State of the button. Applies set color or vuetify primary color in active state.
    * @vue-prop {string}                                 color - Passes property to v-btn in case prop active is true.
-   * @vue-prop {boolean}                                background - When applied with active the button shows an active-background state implying that a tool is active, but running in background, e.g. windowComponent closed.
+   * @vue-prop {boolean}                                disabled
    * @vue-prop {boolean}                                hasUpdate - Whether the button shows a badge in the top right.
    * @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 VcsTooltip {@link https://vuetifyjs.com/en/api/v-tooltip/#props|vuetify v-tooltip}
-   * @vue-computed {string}                             backgroundColor - color applied to button, depending on size and state
-   * @vue-computed {Object<string, string>}             classes - css classes applied to button, depending on size and state
+   * @vue-computed {string}                             appliedColor - color applied to button, depending on active state
    * @vue-computed {boolean}                            hasDefaultSlot
-   * @vue-computed {boolean}                            isSmall - button size is small
-   * @vue-computed {boolean}                            isStandard - button size standard
-   * @vue-computed {boolean}                            isLarge - button size is large
-   * @vue-computed {boolean}                            isOutlined - button is outlined
-   * @vue-computed {boolean}                            isTextButton - button is text
    * @vue-event {MouseEvent}                            click - Emits click event when the button is clicked.
    */
   export default {
@@ -141,7 +110,7 @@
         type: String,
         default: undefined,
       },
-      background: {
+      disabled: {
         type: Boolean,
         default: false,
       },
@@ -167,51 +136,16 @@
       },
     },
     computed: {
-      backgroundColor() {
-        if (this.isStandard && !this.active) {
-          return this.color;
-        } else if (this.active) {
+      appliedColor() {
+        if (this.active) {
           return this.color ? this.color : 'primary';
         } else {
           return null;
         }
       },
-      classes() {
-        return {
-          'vcs-button--small': this.isSmall,
-          'pa-0': this.isSmall,
-          'vcs-button--standard': this.isStandard,
-          padding: this.isStandard,
-          'font-weight-bold': this.isStandard,
-          'text-capitalize': this.isStandard,
-          'vcs-button--large': this.isLarge,
-          'vcs-button--active-background': this.active && this.background && !this.$attrs.disabled,
-        };
-      },
       hasDefaultSlot() {
         return !!this.$slots?.default?.[0]?.text?.trim();
       },
-      isSmall() {
-        return this.$attrs.small != null;
-      },
-      isStandard() {
-        return !(this.isSmall || this.isLarge);
-      },
-      isLarge() {
-        return this.$attrs.large != null;
-      },
-      isOutlined() {
-        if (this.isStandard) {
-          return this.active || this.background;
-        }
-        return false;
-      },
-      isTextButton() {
-        if (this.isSmall) {
-          return true;
-        }
-        return !this.active ? true : null;
-      },
     },
   };
 </script>

package/src/components/buttons/VcsFormButton.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="vcs-button-wrap">
+    <v-btn
+      v-if="!tooltip"
+      :outlined="variant === 'outlined'"
+      :disabled="disabled"
+      :loading="loading"
+      :ripple="false"
+      elevation="0"
+      color="primary"
+      class="vcs-form-button"
+      :class="classes"
+      v-bind="{ ...$attrs }"
+      v-on="{ ...$listeners }"
+    >
+      <v-icon v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">
+        {{ icon }}
+      </v-icon>
+      <slot />
+    </v-btn>
+    <VcsTooltip
+      v-else
+      :tooltip="tooltip"
+      :tooltip-position="tooltipPosition"
+      v-bind="{ ...tooltipProps }"
+    >
+      <template #activator="{ on, attrs }">
+        <v-btn
+          :outlined="variant === 'outlined'"
+          :disabled="disabled"
+          :loading="loading"
+          :ripple="false"
+          elevation="0"
+          color="primary"
+          class="vcs-form-button"
+          :class="classes"
+          v-bind="{ ...$attrs, ...attrs }"
+          v-on="{ ...$listeners, ...on }"
+        >
+          <v-icon v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">
+            {{ icon }}
+          </v-icon>
+          <slot />
+        </v-btn>
+      </template>
+    </VcsTooltip>
+    <VcsBadge v-if="hasUpdate" :color="'warning'" class="position-absolute" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import '../../styles/shades.scss';
+
+  .vcs-button-wrap {
+    position: relative;
+    display: inline-block;
+  }
+  .badge {
+    top: -3px;
+    right: -3px;
+  }
+  .v-btn {
+    &--outlined {
+      border: thin solid currentColor;
+    }
+    &--disabled {
+      // TODO text color primary
+      border-color: var(--v-primary-lighten1);
+      background-color: transparent !important;
+    }
+  }
+  .vcs-button-wrap {
+    .vcs-form-button {
+      min-width: 48px;
+      height: 32px;
+      font-size: 12px;
+      border: 1px solid transparent;
+
+      &--outlined {
+        border: thin solid currentColor;
+        &:hover {
+          border-color: var(--v-primary-lighten1) !important;
+        }
+        &.theme--light:hover::before {
+          opacity: 0.16;
+        }
+        &.theme--dark:hover::before {
+          opacity: 0.32;
+        }
+      }
+
+      &--filled {
+        &:hover {
+          color: map-get($shades, 'white') !important;
+          border-color: var(--v-primary-lighten1) !important;
+          background-color: var(--v-primary-lighten1) !important;
+        }
+      }
+    }
+  }
+</style>
+
+<script>
+  import { VBtn, VIcon } from 'vuetify/lib';
+  import VcsBadge from '../notification/VcsBadge.vue';
+  import VcsTooltip from '../notification/VcsTooltip.vue';
+
+  /**
+   * @description a button with tooltip extending {@link https://vuetifyjs.com/en/api/v-btn/|vuetify v-btn} using {@link VcsTooltip}. Meant to be used in forms or window contents.
+   * @vue-prop {('filled' | 'outlined')}                [variant='outlined'] - Filled or outlined representation of the button.
+   * @vue-prop {boolean}                                disabled
+   * @vue-prop {boolean}                                loading
+   * @vue-prop {boolean}                                hasUpdate - Whether the button shows a badge in the top right.
+   * @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 VcsTooltip {@link https://vuetifyjs.com/en/api/v-tooltip/#props|vuetify v-tooltip}
+   * @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.
+   */
+  export default {
+    name: 'VcsFormButton',
+    components: {
+      VcsTooltip,
+      VcsBadge,
+      VBtn,
+      VIcon,
+    },
+    inheritAttrs: false,
+    props: {
+      variant: {
+        type: String,
+        default: 'outlined',
+        validator: (value) => ['outlined', 'filled'].includes(value),
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      loading: {
+        type: Boolean,
+        default: false,
+      },
+      hasUpdate: {
+        type: Boolean,
+        default: false,
+      },
+      icon: {
+        type: String,
+        default: undefined,
+      },
+      tooltip: {
+        type: String,
+        default: undefined,
+      },
+      tooltipPosition: {
+        type: String,
+        default: 'bottom',
+      },
+      tooltipProps: {
+        type: Object,
+        default: () => ({}),
+      },
+    },
+    computed: {
+      classes() {
+        return {
+          'vcs-form-button--outlined': this.variant === 'outlined',
+          'vcs-form-button--filled': this.variant === 'filled',
+        };
+      },
+      hasDefaultSlot() {
+        return !!this.$slots?.default?.[0]?.text?.trim();
+      },
+    },
+  };
+</script>