@vcmap/ui 5.0.0-rc.22 → 5.0.0-rc.24

package/src/application/attributionsHelper.js

@@ -29,7 +29,7 @@ export function mergeAttributions(entries) {
         if (year) {
           const index = providerObject.years.indexOf(year);
           if (url && index === -1) {
-            if (providerObject.years.every(y => Number(y) < Number(year))) {
+            if (providerObject.years.every((y) => Number(y) < Number(year))) {
               providerObject.url = url;
             }
             if (year) {
@@ -46,7 +46,7 @@ export function mergeAttributions(entries) {
       }
     });
   });
-  return Object.keys(providers).map(provider => ({
+  return Object.keys(providers).map((provider) => ({
     provider,
     years: providers[provider].years.join(', '),
     url: providers[provider].url,
@@ -77,14 +77,19 @@ export function getAttributions(app) {
    */
   function addAttributions(object) {
     const { attributions } = object.properties;
-    if (!attributions) { return; }
+    if (!attributions) {
+      return;
+    }
     const key = `${object.className}_${object.name}`;
-    const idx = entries.value.findIndex(e => e.key === key);
+    const idx = entries.value.findIndex((e) => e.key === key);
     if (idx < 0) {
       entries.value.push({
         key,
-        title: object.properties?.title ?? `${object.className}: ${object.name}`,
-        attributions: Array.isArray(attributions) ? attributions : [attributions],
+        title:
+          object.properties?.title ?? `${object.className}: ${object.name}`,
+        attributions: Array.isArray(attributions)
+          ? attributions
+          : [attributions],
       });
     }
   }
@@ -93,7 +98,9 @@ export function getAttributions(app) {
    * @param {import("@vcmap/core").VcsMap|import("@vcmap/core").Layer|import("@vcmap/core").ObliqueCollection} object
    */
   function removeAttributions(object) {
-    const idx = entries.value.findIndex(e => e.key === `${object.className}_${object.name}`);
+    const idx = entries.value.findIndex(
+      (e) => e.key === `${object.className}_${object.name}`,
+    );
     if (idx >= 0) {
       entries.value.splice(idx, 1);
     }
@@ -104,7 +111,9 @@ export function getAttributions(app) {
    * @param {import("@vcmap/core").VcsMap|import("@vcmap/core").Layer|import("@vcmap/core").ObliqueCollection} object
    */
   function syncAttributions(object) {
-    if (object?.properties?.attributions === undefined) { return; }
+    if (object?.properties?.attributions === undefined) {
+      return;
+    }
     if (object.active || object.loaded) {
       addAttributions(object);
     } else {
@@ -117,7 +126,9 @@ export function getAttributions(app) {
    * @param {import("@vcmap/core").VcsMap} map
    */
   function initAttributions(map) {
-    if (!map) { return; }
+    if (!map) {
+      return;
+    }
     obliqueListener();
     entries.value.splice(0);
     syncAttributions(map);
@@ -128,7 +139,8 @@ export function getAttributions(app) {
     });
     if (map instanceof ObliqueMap) {
       syncAttributions(map.collection);
-      obliqueListener = map.collectionChanged.addEventListener(syncAttributions);
+      obliqueListener =
+        map.collectionChanged.addEventListener(syncAttributions);
     }
   }
 
@@ -142,7 +154,7 @@ export function getAttributions(app) {
   initAttributions(app.maps.activeMap);
 
   const destroy = () => {
-    listeners.forEach(cb => cb());
+    listeners.forEach((cb) => cb());
     obliqueListener();
   };
 

package/src/application/vcsAppWrapper.vue

@@ -29,6 +29,4 @@
   };
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

package/src/components/buttons/VcsActionButtonList.vue

@@ -7,9 +7,10 @@
       :tooltip="button.title"
       :icon="button.icon"
       :active="button.active"
+      :disabled="button.disabled"
       @click.stop="button.callback($event)"
-      v-bind="{...$attrs}"
-      v-on="{...$listeners}"
+      v-bind="{ ...$attrs }"
+      v-on="{ ...$listeners }"
     />
     <v-menu
       v-if="overflowButtons.length > 0"
@@ -19,26 +20,24 @@
       offset-x
     >
       <template #activator="{ on, attrs }">
-        <VcsButton
-          v-bind="{...$attrs, ...attrs}"
-          v-on="on"
-          class="d-flex"
-        >
-          <v-icon v-text="overflowIcon" />
+        <VcsButton v-bind="{ ...$attrs, ...attrs }" v-on="on" class="d-flex">
+          <v-icon>{{ overflowIcon }}</v-icon>
         </VcsButton>
       </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 VcsActionList, { validateActions } from '../lists/VcsActionList.vue';
@@ -83,17 +82,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,11 +1,9 @@
 <template>
-  <div
-    class="vcs-button-wrap"
-  >
+  <div class="vcs-button-wrap">
     <VcsTooltip
       :tooltip="tooltip"
       :tooltip-position="tooltipPosition"
-      v-bind="{...tooltipProps}"
+      v-bind="{ ...tooltipProps }"
     >
       <template #activator="{ on, attrs }">
         <v-btn
@@ -15,43 +13,40 @@
           :class="classes"
           :ripple="!isSmall ? { class: 'primary--text text--darken-4' } : 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{
+  .v-btn {
+    &--outlined {
       border: thin solid currentColor;
     }
-    &.vcs-button{
-
+    &.vcs-button {
       &--standard {
         min-width: 48px;
         height: 32px;
         font-size: 12px;
         border: 1px solid transparent;
-        &:hover{
+        &:hover {
           color: var(--v-base-lighten5) !important;
           border-color: var(--v-primary-base);
           background-color: var(--v-primary-base);
@@ -61,14 +56,14 @@
       &--small {
         height: 16px;
         min-width: auto;
-        &:hover{
+        &:hover {
           color: var(--v-primary-base);
         }
-        &::before{
+        &::before {
           display: none; /*prevents unwanted mouseover effect*/
         }
         ::v-deep {
-          .v-icon{
+          .v-icon {
             font-size: 16px;
           }
 
@@ -185,7 +180,8 @@
           '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,
+          'vcs-button--active-background':
+            this.active && this.background && !this.$attrs.disabled,
         };
       },
       hasDefaultSlot() {

package/src/components/buttons/VcsFormButton.vue

@@ -0,0 +1,176 @@
+<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;
+          &::before {
+            background-color: var(--v-primary-lighten4) !important;
+            opacity: 1;
+          }
+        }
+      }
+
+      &--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>

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

@@ -13,13 +13,13 @@
           on-icon="$vcsCheckboxChecked"
           off-icon="$vcsCheckbox"
           class="vcs-checkbox"
-          :class="{'pl-1': !isDense }"
+          :class="{ 'pl-1': !isDense }"
           hide-details
           indeterminate-icon="$vcsCheckboxIndeterminate"
           :dense="isDense"
           :ripple="false"
-          v-bind="{...$attrs, ...attrs}"
-          v-on="{...$listeners, ...on}"
+          v-bind="{ ...$attrs, ...attrs }"
+          v-on="{ ...$listeners, ...on }"
         >
           <template #label>
             <VcsLabel :html-for="$attrs.id" :dense="isDense">
@@ -33,7 +33,7 @@
   </VcsTooltip>
 </template>
 <style lang="scss" scoped>
-@import '../../styles/shades.scss';
+  @import '../../styles/shades.scss';
   .vcs-checkbox {
     ::v-deep {
       .v-input--selection-controls__input {
@@ -47,13 +47,13 @@
       .v-label {
         &.theme--light {
           color: map-get($shades, 'black') !important;
-          &.error--text{
+          &.error--text {
             color: var(--v-error-base) !important;
           }
         }
         &.theme--dark {
           color: map-get($shades, 'white') !important;
-          &.error--text{
+          &.error--text {
             color: var(--v-error-base) !important;
           }
         }
@@ -64,7 +64,6 @@
     margin: 0;
     padding: 0;
   }
-
 </style>
 <script>
   import { computed, ref } from 'vue';

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

@@ -0,0 +1,142 @@
+<template>
+  <v-menu
+    v-model="menuOpen"
+    :close-on-content-click="false"
+    transition="scale-transition"
+    offset-y
+    max-width="290px"
+    min-width="290px"
+  >
+    <template #activator="{ on, attrs }">
+      <v-text-field
+        v-model="formattedDate"
+        :placeholder="formatDate(new Date().toISOString())"
+        v-bind="{ ...$attrs, ...attrs }"
+        v-on="{ ...$listeners, ...on }"
+        :prepend-icon="icon"
+        readonly
+        hide-details
+        class="ma-0 py-1"
+      />
+    </template>
+    <v-date-picker
+      v-model="date"
+      no-title
+      @input="menuOpen = false"
+      :locale="locale"
+      color="primary"
+    >
+      <v-btn color="primary" @click="goToToday">
+        {{ $t('datePicker.today') }}
+      </v-btn>
+    </v-date-picker>
+  </v-menu>
+</template>
+<style lang="scss" scoped>
+  ::v-deep {
+    .v-input__control {
+      padding: 0 8px;
+    }
+  }
+</style>
+<script>
+  import {
+    computed,
+    ref,
+    watch,
+    inject,
+    onUnmounted,
+    onBeforeMount,
+  } from 'vue';
+  import { VMenu, VTextField, VDatePicker, VBtn } from 'vuetify/lib';
+  /**
+   * @description stylized wrapper around {@link https://v15.vuetifyjs.com/en/components/date-pickers/#month-pickers-in-dialog-and-menu}.
+   * @vue-prop {string} value - value of the date picker in {@link https://tc39.es/ecma262/#sec-date-time-string-format | Date Time String Format}
+   * @vue-prop {string} icon - specify optional prepend icon, defaults to mdi-calendar
+   * @vue-event {string} input - raised when calendar date is selected
+   */
+  export default {
+    name: 'VcsDatePicker',
+    props: {
+      value: {
+        type: String,
+        required: true,
+      },
+      icon: {
+        type: String,
+        default: 'mdi-calendar',
+      },
+    },
+    components: {
+      VMenu,
+      VTextField,
+      VDatePicker,
+      VBtn,
+    },
+    setup(props, context) {
+      /**
+       * @type {import("@vcmap/ui").VcsUiApp}
+       */
+      const app = /** @type {import("@vcmap/ui").VcsUiApp} */ (
+        inject('vcsApp')
+      );
+      const localValue = ref(props.value);
+      const menuOpen = ref(false);
+      const locale = ref(app.locale);
+
+      const isValid = (date) => !Number.isNaN(Date.parse(date));
+      const setFromValue = () => {
+        if (isValid(localValue.value)) {
+          localValue.value = props.value;
+        } else {
+          // eslint-disable-next-line no-console
+          console.error('Invalid date provided: ', props.value);
+        }
+      };
+      onBeforeMount(() => setFromValue());
+      const destroyLocaleChanged = app.localeChanged.addEventListener(() => {
+        locale.value = app.locale;
+      });
+      onUnmounted(() => destroyLocaleChanged());
+
+      const formatDate = (date) => {
+        if (date) {
+          return new Intl.DateTimeFormat(locale.value, {
+            dateStyle: 'short',
+          }).format(Date.parse(date));
+        }
+        return '';
+      };
+      const goToToday = () => {
+        localValue.value = new Date(Date.now()).toISOString().substring(0, 10);
+        menuOpen.value = false;
+      };
+      watch(
+        () => props.value,
+        () => setFromValue(),
+      );
+      const formattedDate = computed({
+        get: () => {
+          return formatDate(localValue.value);
+        },
+        set: () => {},
+      });
+      const date = computed({
+        get: () => localValue.value,
+        set: (nv) => {
+          localValue.value = nv;
+          context.emit('input', localValue.value);
+        },
+      });
+
+      return {
+        formattedDate,
+        date,
+        menuOpen,
+        formatDate,
+        locale,
+        goToToday,
+      };
+    },
+  };
+</script>